-
-
+
+ - {listItems}
{message}
- )}
- {message}
+ )}
+ No issue tracker configured
++ Please configure an issue tracker by expanding the report title, selecting the ‘Issue + tracker’ tab, and configuring an issue tracker. +
+ } - header={"No issue tracker configured"} - trigger={} - /> + > + +- {details}
{popupHeader}
+{popupContent}
+ + } + > + {card} +- Identifiers of issues in the configured issue tracker that track the progress of fixing this {target}. -
-+ const permissions = useContext(Permissions) + const disabled = !accessGranted(permissions, [EDIT_REPORT_PERMISSION]) + const issueStatusHelp = `Identifiers of issues in the configured issue tracker that track the progress of fixing this ${target}. When the issues have all been resolved, or the technical debt end date has passed, whichever happens - first, the technical debt should be resolved and the technical debt target is no longer evaluated. -
- {issueTrackerInstruction} - - ) + first, the technical debt should be resolved and the technical debt target is no longer evaluated.${issueTrackerInstruction ?? ""}` const [suggestions, setSuggestions] = useState([]) - const labelId = `issue-identifiers-label-${metric_uuid}` const issue_ids = getMetricIssueIds(metric, entityKey) return ( -+
-
{header}
+ {content} + + } + > + + + +Accept technical debt until this date.
-- After this date, or when the issues below have all been resolved, whichever happens first, the technical - debt should be resolved and the technical debt target is no longer evaluated. -
- + const permissions = useContext(Permissions) + const disabled = !accessGranted(permissions, [EDIT_REPORT_PERMISSION]) + const debtEndDateTime = metric.debt_end_date ? dayjs(metric.debt_end_date) : null + const helperText = metric.debt_end_date ? ( +No notification destinations have been configured yet.
-
- navigate_to_subject(e, s)}
- onClickTag={(tag) => {
- // If there are hidden tags (hiddenTags.length > 0), show the hidden tags.
- // Otherwise, hide all tags in this report except the one clicked on.
- const tagsToToggle =
- settings.hiddenTags.value.length > 0 ? settings.hiddenTags.value : getReportTags(report)
- settings.hiddenTags.toggle(...tagsToToggle.filter((visibleTag) => visibleTag !== tag))
- }}
- report={report}
- reload={reload}
- settings={settings}
- />
+ navigate_to_subject(e, s)}
+ onClickTag={(tag) => {
+ // If there are hidden tags (hiddenTags.length > 0), show the hidden tags.
+ // Otherwise, hide all tags in this report except the one clicked on.
+ const tagsToToggle =
+ settings.hiddenTags.value.length > 0 ? settings.hiddenTags.value : getReportTags(report)
+ settings.hiddenTags.toggle(...tagsToToggle.filter((visibleTag) => visibleTag !== tag))
+ }}
+ report={report}
+ reload={reload}
+ settings={settings}
+ />
+
- {children}
-
- )
-}
-ErrorMessage.propTypes = {
- children: string,
-}
-
-export function ReportErrorMessage({ reportDate }) {
- return (
-
- {reportDate ? `Sorry, this report didn't exist at ${reportDate}` : "Sorry, this report doesn't exist"}
-
- )
-}
-ReportErrorMessage.propTypes = {
- reportDate: optionalDatePropType,
-}
-
-export function ReportsOverviewErrorMessage({ reportDate }) {
- return {`Sorry, no reports existed at ${reportDate}`}
-}
-ReportsOverviewErrorMessage.propTypes = {
- reportDate: datePropType,
-}
diff --git a/components/frontend/src/report/ReportTitle.js b/components/frontend/src/report/ReportTitle.js
index 8d4dfdbfa8..a11f85070c 100644
--- a/components/frontend/src/report/ReportTitle.js
+++ b/components/frontend/src/report/ReportTitle.js
@@ -1,16 +1,20 @@
-import { bool, func, oneOfType, string } from "prop-types"
-import { Grid } from "semantic-ui-react"
+import AssignmentIcon from "@mui/icons-material/Assignment"
+import HistoryIcon from "@mui/icons-material/History"
+import NotificationsIcon from "@mui/icons-material/Notifications"
+import SettingsIcon from "@mui/icons-material/Settings"
+import TimerIcon from "@mui/icons-material/Timer"
+import { Typography } from "@mui/material"
+import Grid from "@mui/material/Grid2"
+import { func, oneOfType, string } from "prop-types"
+import { useContext } from "react"
import { delete_report, set_report_attribute } from "../api/report"
-import { activeTabIndex, tabChangeHandler } from "../app_ui_settings"
import { ChangeLog } from "../changelog/ChangeLog"
-import { EDIT_REPORT_PERMISSION, ReadOnlyOrEditable } from "../context/Permissions"
-import { Comment } from "../fields/Comment"
-import { IntegerInput } from "../fields/IntegerInput"
-import { StringInput } from "../fields/StringInput"
+import { accessGranted, EDIT_REPORT_PERMISSION, Permissions, ReadOnlyOrEditable } from "../context/Permissions"
+import { CommentField } from "../fields/CommentField"
+import { TextField } from "../fields/TextField"
import { STATUS_DESCRIPTION, STATUS_NAME, statusPropType } from "../metric/status"
import { NotificationDestinations } from "../notification/NotificationDestinations"
-import { Label, Segment, Tab } from "../semantic_ui_react_wrappers"
import { entityStatusPropType, reportPropType, settingsPropType } from "../sharedPropTypes"
import { SOURCE_ENTITY_STATUS_DESCRIPTION, SOURCE_ENTITY_STATUS_NAME } from "../source/source_entity_status"
import { getDesiredResponseTime } from "../utils"
@@ -18,43 +22,41 @@ import { ButtonRow } from "../widgets/ButtonRow"
import { DeleteButton } from "../widgets/buttons/DeleteButton"
import { PermLinkButton } from "../widgets/buttons/PermLinkButton"
import { HeaderWithDetails } from "../widgets/HeaderWithDetails"
-import { LabelWithHelp } from "../widgets/LabelWithHelp"
-import { changelogTabPane, configurationTabPane, tabPane } from "../widgets/TabPane"
+import { Tabs } from "../widgets/Tabs"
import { setDocumentTitle } from "./document_title"
import { IssueTracker } from "./IssueTracker"
function ReportConfiguration({ reload, report }) {
+ const permissions = useContext(Permissions)
+ const disabled = !accessGranted(permissions, [EDIT_REPORT_PERMISSION])
return (
-
-
-
- set_report_attribute(report.report_uuid, "title", value, reload)}
- value={report.title}
- />
-
-
- set_report_attribute(report.report_uuid, "subtitle", value, reload)}
- value={report.subtitle}
- />
-
-
-
-
- set_report_attribute(report.report_uuid, "comment", value, reload)}
- value={report.comment}
- />
-
-
+
+
+ set_report_attribute(report.report_uuid, "title", value, reload)}
+ value={report.title}
+ />
+
+
+ set_report_attribute(report.report_uuid, "subtitle", value, reload)}
+ value={report.subtitle}
+ />
+
+
+ set_report_attribute(report.report_uuid, "comment", value, reload)}
+ value={report.comment}
+ />
+
)
}
@@ -63,28 +65,30 @@ ReportConfiguration.propTypes = {
report: reportPropType,
}
-function DesiredResponseTimeInput({ hoverableLabel, reload, report, status }) {
+function DesiredResponseTimeInput({ reload, report, status }) {
+ const permissions = useContext(Permissions)
+ const disabled = !accessGranted(permissions, [EDIT_REPORT_PERMISSION])
const desiredResponseTimes = report.desired_response_times ?? {}
const inputId = `desired-response-time-${status}`
const label = STATUS_NAME[status] || SOURCE_ENTITY_STATUS_NAME[status]
const help = STATUS_DESCRIPTION[status] || SOURCE_ENTITY_STATUS_DESCRIPTION[status]
return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
)
}
ReactionTimes.propTypes = {
@@ -166,38 +160,35 @@ ReportTitleButtonRow.propTypes = {
export function ReportTitle({ report, openReportsOverview, reload, settings }) {
const report_uuid = report.report_uuid
- const tabIndex = activeTabIndex(settings.expandedItems, report_uuid)
const reportUrl = `${window.location}`
- const panes = [
- configurationTabPane(
-
)
diff --git a/components/frontend/src/report/ReportTitle.test.js b/components/frontend/src/report/ReportTitle.test.js
index 64494f9548..d160ebd9c4 100644
--- a/components/frontend/src/report/ReportTitle.test.js
+++ b/components/frontend/src/report/ReportTitle.test.js
@@ -1,4 +1,4 @@
-import { act, fireEvent, render, screen } from "@testing-library/react"
+import { act, fireEvent, render, screen, within } from "@testing-library/react"
import userEvent from "@testing-library/user-event"
import history from "history/browser"
@@ -13,15 +13,14 @@ jest.mock("../api/changelog.js")
jest.mock("../api/report.js")
beforeEach(() => {
- history.push("?expanded=report_uuid:0")
+ history.push("?expanded=report_uuid")
+ jest.resetAllMocks()
})
report_api.get_report_issue_tracker_options.mockImplementation(() =>
Promise.resolve({ projects: [], issue_types: [], fields: [], epic_links: [] }),
)
-changelog_api.get_changelog.mockImplementation(() => Promise.resolve({ changelog: [] }))
-
const reload = jest.fn
function renderReportTitle() {
@@ -41,7 +40,6 @@ function renderReportTitle() {
it("deletes the report", async () => {
report_api.delete_report = jest.fn().mockResolvedValue({ ok: true })
renderReportTitle()
- fireEvent.click(screen.getByTitle(/expand/))
await act(async () => {
fireEvent.click(screen.getByText(/Delete report/))
})
@@ -50,7 +48,6 @@ it("deletes the report", async () => {
it("sets the title", async () => {
renderReportTitle()
- fireEvent.click(screen.getByTitle(/expand/))
await userEvent.type(screen.getByLabelText(/Report title/), "New title{Enter}", {
initialSelectionStart: 0,
initialSelectionEnd: 12,
@@ -60,7 +57,6 @@ it("sets the title", async () => {
it("sets the subtitle", async () => {
renderReportTitle()
- fireEvent.click(screen.getByTitle(/expand/))
await userEvent.type(screen.getByLabelText(/Report subtitle/), "New subtitle{Enter}", {
initialSelectionStart: 0,
initialSelectionEnd: 12,
@@ -70,7 +66,6 @@ it("sets the subtitle", async () => {
it("sets the comment", async () => {
renderReportTitle()
- fireEvent.click(screen.getByTitle(/expand/))
await userEvent.type(screen.getByLabelText(/Comment/), "New comment{Shift>}{Enter}", {
initialSelectionStart: 0,
initialSelectionEnd: 8,
@@ -80,11 +75,13 @@ it("sets the comment", async () => {
it("sets the unknown status reaction time", async () => {
renderReportTitle()
- fireEvent.click(screen.getByTitle(/expand/))
await act(async () => {
- fireEvent.click(screen.getByText(/reaction times/))
+ fireEvent.click(screen.getByRole("tab", { name: /reaction times/ }))
+ })
+ await act(async () => {
+ fireEvent.click(screen.getByLabelText("Unknown"))
})
- await userEvent.type(screen.getByLabelText(/Unknown/), "4{Enter}}", {
+ await userEvent.type(screen.getByLabelText("Unknown"), "4{Enter}}", {
initialSelectionStart: 0,
initialSelectionEnd: 1,
})
@@ -98,11 +95,10 @@ it("sets the unknown status reaction time", async () => {
it("sets the target not met status reaction time", async () => {
renderReportTitle()
- fireEvent.click(screen.getByTitle(/expand/))
await act(async () => {
fireEvent.click(screen.getByText(/reaction times/))
})
- await userEvent.type(screen.getByLabelText(/Target not met/), "5{Enter}}", {
+ await userEvent.type(screen.getByLabelText("Target not met"), "5{Enter}}", {
initialSelectionStart: 0,
initialSelectionEnd: 1,
})
@@ -116,11 +112,10 @@ it("sets the target not met status reaction time", async () => {
it("sets the near target met status reaction time", async () => {
renderReportTitle()
- fireEvent.click(screen.getByTitle(/expand/))
await act(async () => {
fireEvent.click(screen.getByText(/reaction times/))
})
- await userEvent.type(screen.getByLabelText(/Near target met/), "6{Enter}}", {
+ await userEvent.type(screen.getByLabelText("Near target met"), "6{Enter}}", {
initialSelectionStart: 0,
initialSelectionEnd: 2,
})
@@ -134,7 +129,6 @@ it("sets the near target met status reaction time", async () => {
it("sets the tech debt target status reaction time", async () => {
renderReportTitle()
- fireEvent.click(screen.getByTitle(/expand/))
await act(async () => {
fireEvent.click(screen.getByText(/reaction times/))
})
@@ -152,11 +146,10 @@ it("sets the tech debt target status reaction time", async () => {
it("sets the confirmed measurement entity status reaction time", async () => {
renderReportTitle()
- fireEvent.click(screen.getByTitle(/expand/))
await act(async () => {
fireEvent.click(screen.getByText(/reaction times/))
})
- await userEvent.type(screen.getByLabelText(/Confirmed/), "60{Enter}}", {
+ await userEvent.type(screen.getByLabelText("Confirmed"), "60{Enter}}", {
initialSelectionStart: 0,
initialSelectionEnd: 3,
})
@@ -170,11 +163,10 @@ it("sets the confirmed measurement entity status reaction time", async () => {
it("sets the false positive measurement entity status reaction time", async () => {
renderReportTitle()
- fireEvent.click(screen.getByTitle(/expand/))
await act(async () => {
fireEvent.click(screen.getByText(/reaction times/))
})
- await userEvent.type(screen.getByLabelText(/False positive/), "70{Enter}}", {
+ await userEvent.type(screen.getByLabelText("False positive"), "70{Enter}}", {
initialSelectionStart: 0,
initialSelectionEnd: 3,
})
@@ -188,11 +180,10 @@ it("sets the false positive measurement entity status reaction time", async () =
it("sets the fixed measurement entity status reaction time", async () => {
renderReportTitle()
- fireEvent.click(screen.getByTitle(/expand/))
await act(async () => {
fireEvent.click(screen.getByText(/reaction times/))
})
- await userEvent.type(screen.getByLabelText(/Fixed/), "80{Enter}}", {
+ await userEvent.type(screen.getByLabelText("Fixed"), "80{Enter}}", {
initialSelectionStart: 0,
initialSelectionEnd: 3,
})
@@ -206,11 +197,10 @@ it("sets the fixed measurement entity status reaction time", async () => {
it("sets the won't fixed measurement entity status reaction time", async () => {
renderReportTitle()
- fireEvent.click(screen.getByTitle(/expand/))
await act(async () => {
fireEvent.click(screen.getByText(/reaction times/))
})
- await userEvent.type(screen.getByLabelText(/Won't fix/), "90{Enter}}", {
+ await userEvent.type(screen.getByLabelText("Won't fix"), "90{Enter}}", {
initialSelectionStart: 0,
initialSelectionEnd: 3,
})
@@ -223,13 +213,14 @@ it("sets the won't fixed measurement entity status reaction time", async () => {
})
it("sets the issue tracker type", async () => {
+ report_api.get_report_issue_tracker_options.mockImplementation(() =>
+ Promise.resolve({ projects: [], issue_types: [], fields: [], epic_links: [] }),
+ )
renderReportTitle()
- fireEvent.click(screen.getByTitle(/expand/))
fireEvent.click(screen.getByText(/Issue tracker/))
- fireEvent.click(screen.getByText(/Issue tracker type/))
- await act(async () => {
- fireEvent.click(screen.getByText(/Jira/))
- })
+ fireEvent.mouseDown(screen.getByLabelText(/Issue tracker type/))
+ const listbox = within(screen.getByRole("listbox"))
+ await act(async () => fireEvent.click(listbox.getByText(/Jira/)))
expect(report_api.set_report_issue_tracker_attribute).toHaveBeenLastCalledWith(
"report_uuid",
"type",
@@ -239,10 +230,12 @@ it("sets the issue tracker type", async () => {
})
it("sets the issue tracker url", async () => {
+ report_api.get_report_issue_tracker_options.mockImplementation(() =>
+ Promise.resolve({ projects: [], issue_types: [], fields: [], epic_links: [] }),
+ )
renderReportTitle()
- fireEvent.click(screen.getByTitle(/expand/))
fireEvent.click(screen.getByText(/Issue tracker/))
- await userEvent.type(screen.getByText(/URL/), "https://jira{Enter}")
+ await userEvent.type(screen.getByLabelText(/URL/), "https://jira{Enter}")
expect(report_api.set_report_issue_tracker_attribute).toHaveBeenLastCalledWith(
"report_uuid",
"url",
@@ -252,10 +245,12 @@ it("sets the issue tracker url", async () => {
})
it("sets the issue tracker username", async () => {
+ report_api.get_report_issue_tracker_options.mockImplementation(() =>
+ Promise.resolve({ projects: [], issue_types: [], fields: [], epic_links: [] }),
+ )
renderReportTitle()
- fireEvent.click(screen.getByTitle(/expand/))
fireEvent.click(screen.getByText(/Issue tracker/))
- await userEvent.type(screen.getByText(/Username/), "janedoe{Enter}")
+ await userEvent.type(screen.getByLabelText(/Username/), "janedoe{Enter}")
expect(report_api.set_report_issue_tracker_attribute).toHaveBeenLastCalledWith(
"report_uuid",
"username",
@@ -265,10 +260,12 @@ it("sets the issue tracker username", async () => {
})
it("sets the issue tracker password", async () => {
+ report_api.get_report_issue_tracker_options.mockImplementation(() =>
+ Promise.resolve({ projects: [], issue_types: [], fields: [], epic_links: [] }),
+ )
renderReportTitle()
- fireEvent.click(screen.getByTitle(/expand/))
fireEvent.click(screen.getByText(/Issue tracker/))
- await userEvent.type(screen.getByText(/Password/), "secret{Enter}")
+ await userEvent.type(screen.getByLabelText(/Password/), "secret{Enter}")
expect(report_api.set_report_issue_tracker_attribute).toHaveBeenLastCalledWith(
"report_uuid",
"password",
@@ -278,10 +275,12 @@ it("sets the issue tracker password", async () => {
})
it("sets the issue tracker private token", async () => {
+ report_api.get_report_issue_tracker_options.mockImplementation(() =>
+ Promise.resolve({ projects: [], issue_types: [], fields: [], epic_links: [] }),
+ )
renderReportTitle()
- fireEvent.click(screen.getByTitle(/expand/))
fireEvent.click(screen.getByText(/Issue tracker/))
- await userEvent.type(screen.getByText(/Private token/), "secret{Enter}")
+ await userEvent.type(screen.getByLabelText(/Private token/), "secret{Enter}")
expect(report_api.set_report_issue_tracker_attribute).toHaveBeenLastCalledWith(
"report_uuid",
"private_token",
@@ -291,8 +290,8 @@ it("sets the issue tracker private token", async () => {
})
it("loads the changelog", async () => {
+ changelog_api.get_changelog.mockImplementation(() => Promise.resolve({ changelog: [] }))
renderReportTitle()
- fireEvent.click(screen.getByTitle(/expand/))
await act(async () => {
fireEvent.click(screen.getByText(/Changelog/))
})
@@ -301,7 +300,6 @@ it("loads the changelog", async () => {
it("shows the notification destinations", () => {
renderReportTitle()
- fireEvent.click(screen.getByTitle(/expand/))
fireEvent.click(screen.getByText(/Notifications/))
expect(screen.getAllByText(/No notification destinations/).length).toBe(2)
})
diff --git a/components/frontend/src/report/ReportsOverview.js b/components/frontend/src/report/ReportsOverview.js
index ff25b1ef57..82aaf5642a 100644
--- a/components/frontend/src/report/ReportsOverview.js
+++ b/components/frontend/src/report/ReportsOverview.js
@@ -3,7 +3,7 @@ import { func } from "prop-types"
import { add_report, copy_report } from "../api/report"
import { EDIT_REPORT_PERMISSION, ReadOnlyOrEditable } from "../context/Permissions"
-import { ExportCard } from "../dashboard/ExportCard"
+import { PageHeader } from "../dashboard/PageHeader"
import {
datePropType,
datesPropType,
@@ -21,7 +21,7 @@ import { AddButton } from "../widgets/buttons/AddButton"
import { CopyButton } from "../widgets/buttons/CopyButton"
import { CommentSegment } from "../widgets/CommentSegment"
import { report_options } from "../widgets/menu_options"
-import { ReportsOverviewErrorMessage } from "./ReportErrorMessage"
+import { WarningMessage } from "../widgets/WarningMessage"
import { ReportsOverviewDashboard } from "./ReportsOverviewDashboard"
import { ReportsOverviewTitle } from "./ReportsOverviewTitle"
@@ -30,7 +30,7 @@ function ReportsOverviewButtonRow({ reload, reports }) {
+
add_report(reload)} />
{`Sorry, no reports existed at ${report_date}`}
}
// Sort measurements in reverse order so that if there multiple measurements on a day, we find the most recent one:
const reversedMeasurements = measurements.slice().sort((m1, m2) => (m1.start < m2.start ? 1 : -1))
return (
+
-
- {
const reports = [{ report_uuid: "report_uuid", subjects: {} }]
const reportsOverview = { title: "Overview", permissions: {} }
renderReportsOverview({ reports: reports, reportsOverview: reportsOverview })
- expect(screen.getAllByText(/Overview/).length).toBe(2)
+ expect(screen.getAllByText(/Overview/).length).toBe(1)
})
it("shows the comment", async () => {
diff --git a/components/frontend/src/report/ReportsOverviewTitle.js b/components/frontend/src/report/ReportsOverviewTitle.js
index b5f383e1ee..adf7cdc0b3 100644
--- a/components/frontend/src/report/ReportsOverviewTitle.js
+++ b/components/frontend/src/report/ReportsOverviewTitle.js
@@ -1,52 +1,52 @@
+import HistoryIcon from "@mui/icons-material/History"
+import LockIcon from "@mui/icons-material/Lock"
+import SettingsIcon from "@mui/icons-material/Settings"
+import Grid from "@mui/material/Grid2"
import { func, shape } from "prop-types"
-import { Grid } from "semantic-ui-react"
+import { useContext } from "react"
import { set_reports_attribute } from "../api/report"
-import { activeTabIndex, tabChangeHandler } from "../app_ui_settings"
import { ChangeLog } from "../changelog/ChangeLog"
-import { EDIT_ENTITY_PERMISSION, EDIT_REPORT_PERMISSION } from "../context/Permissions"
-import { Comment } from "../fields/Comment"
-import { MultipleChoiceInput } from "../fields/MultipleChoiceInput"
-import { StringInput } from "../fields/StringInput"
-import { Tab } from "../semantic_ui_react_wrappers"
+import { accessGranted, EDIT_ENTITY_PERMISSION, EDIT_REPORT_PERMISSION, Permissions } from "../context/Permissions"
+import { CommentField } from "../fields/CommentField"
+import { MultipleChoiceField } from "../fields/MultipleChoiceField"
+import { TextField } from "../fields/TextField"
import { permissionsPropType, reportsOverviewPropType, settingsPropType } from "../sharedPropTypes"
-import { dropdownOptions } from "../utils"
import { HeaderWithDetails } from "../widgets/HeaderWithDetails"
-import { changelogTabPane, configurationTabPane, tabPane } from "../widgets/TabPane"
+import { Tabs } from "../widgets/Tabs"
import { setDocumentTitle } from "./document_title"
function ReportsOverviewConfiguration({ reports_overview, reload }) {
+ const permissions = useContext(Permissions)
+ const disabled = !accessGranted(permissions, [EDIT_REPORT_PERMISSION])
return (
-
-
-
- set_reports_attribute("title", value, reload)}
- value={reports_overview.title}
- />
-
-
- set_reports_attribute("subtitle", value, reload)}
- value={reports_overview.subtitle}
- />
-
-
-
-
- set_reports_attribute("comment", value, reload)}
- value={reports_overview.comment}
- />
-
-
+
+
+ set_reports_attribute("title", value, reload)}
+ value={reports_overview.title}
+ />
+
+
+ set_reports_attribute("subtitle", value, reload)}
+ value={reports_overview.subtitle}
+ />
+
+
+ set_reports_attribute("comment", value, reload)}
+ value={reports_overview.comment}
+ />
+
)
}
@@ -60,41 +60,39 @@ function setPermissions(permissions, permission, value, reload) {
set_reports_attribute("permissions", permissions, reload)
}
-function Permissions({ permissions, reload }) {
+function PermissionsConfiguration({ permissions, reload }) {
+ const currentPermissions = useContext(Permissions)
+ const disabled = !accessGranted(currentPermissions, [EDIT_REPORT_PERMISSION])
return (
-
-
-
- setPermissions(permissions, EDIT_REPORT_PERMISSION, value, reload)}
- value={permissions[EDIT_REPORT_PERMISSION]}
- />
-
-
-
-
- setPermissions(permissions, EDIT_ENTITY_PERMISSION, value, reload)}
- value={permissions[EDIT_ENTITY_PERMISSION]}
- />
-
-
+
+
+ setPermissions(permissions, EDIT_REPORT_PERMISSION, value, reload)}
+ options={permissions[EDIT_REPORT_PERMISSION] || []}
+ placeholder="All authenticated users"
+ value={permissions[EDIT_REPORT_PERMISSION] || []}
+ />
+
+
+ setPermissions(permissions, EDIT_ENTITY_PERMISSION, value, reload)}
+ options={permissions[EDIT_ENTITY_PERMISSION] || []}
+ placeholder="All authenticated users"
+ value={permissions[EDIT_ENTITY_PERMISSION] || []}
+ />
+
)
}
-Permissions.propTypes = {
+PermissionsConfiguration.propTypes = {
permissions: shape({
EDIT_REPORT_PERMISSION: permissionsPropType,
EDIT_ENTITY_PERMISSION: permissionsPropType,
@@ -104,29 +102,27 @@ Permissions.propTypes = {
export function ReportsOverviewTitle({ reports_overview, reload, settings }) {
const uuid = "reports_overview"
- const tabIndex = activeTabIndex(settings.expandedItems, uuid)
- const panes = [
- configurationTabPane(
-
)
}
diff --git a/components/frontend/src/report/ReportsOverviewTitle.test.js b/components/frontend/src/report/ReportsOverviewTitle.test.js
index e2b2256ae1..91f0c80c03 100644
--- a/components/frontend/src/report/ReportsOverviewTitle.test.js
+++ b/components/frontend/src/report/ReportsOverviewTitle.test.js
@@ -10,7 +10,7 @@ import { ReportsOverviewTitle } from "./ReportsOverviewTitle"
jest.mock("../api/fetch_server_api.js")
beforeEach(() => {
- history.push("?expanded=reports_overview:0")
+ history.push("?expanded=reports_overview")
})
function renderReportsOverviewTitle() {
@@ -52,7 +52,7 @@ it("sets the edit report permission", async () => {
fetch_server_api.fetch_server_api = jest.fn().mockResolvedValue({ ok: true })
renderReportsOverviewTitle()
fireEvent.click(screen.getByText(/Permissions/))
- await userEvent.type(screen.getAllByText(/All authenticated users/)[0], "jadoe{Enter}")
+ await userEvent.type(screen.getByLabelText(/Users allowed to edit reports/), "jadoe{Enter}")
expect(fetch_server_api.fetch_server_api).toHaveBeenLastCalledWith(
"post",
"reports_overview/attribute/permissions",
@@ -64,7 +64,7 @@ it("sets the edit entities permission", async () => {
fetch_server_api.fetch_server_api = jest.fn().mockResolvedValue({ ok: true })
renderReportsOverviewTitle()
fireEvent.click(screen.getByText(/Permissions/))
- await userEvent.type(screen.getAllByText(/All authenticated users/)[1], "jodoe{Enter}")
+ await userEvent.type(screen.getByLabelText(/Users allowed to edit measured entities/), "jodoe{Enter}")
expect(fetch_server_api.fetch_server_api).toHaveBeenLastCalledWith(
"post",
"reports_overview/attribute/permissions",
diff --git a/components/frontend/src/semantic_ui_react_wrappers.js b/components/frontend/src/semantic_ui_react_wrappers.js
deleted file mode 100644
index 53c7959114..0000000000
--- a/components/frontend/src/semantic_ui_react_wrappers.js
+++ /dev/null
@@ -1,10 +0,0 @@
-export { Card } from "./semantic_ui_react_wrappers/Card"
-export { Dropdown } from "./semantic_ui_react_wrappers/Dropdown"
-export { Form } from "./semantic_ui_react_wrappers/Form"
-export { Header } from "./semantic_ui_react_wrappers/Header"
-export { Label } from "./semantic_ui_react_wrappers/Label"
-export { Message } from "./semantic_ui_react_wrappers/Message"
-export { Popup } from "./semantic_ui_react_wrappers/Popup"
-export { Segment } from "./semantic_ui_react_wrappers/Segment"
-export { Tab } from "./semantic_ui_react_wrappers/Tab"
-export { Table } from "./semantic_ui_react_wrappers/Table"
diff --git a/components/frontend/src/semantic_ui_react_wrappers/Card.css b/components/frontend/src/semantic_ui_react_wrappers/Card.css
deleted file mode 100644
index a98355e504..0000000000
--- a/components/frontend/src/semantic_ui_react_wrappers/Card.css
+++ /dev/null
@@ -1,11 +0,0 @@
-.ui.inverted.card {
- background: rgba(50, 50, 50, 0.8);
-}
-
-.ui.inverted.card:hover {
- background: rgba(30, 30, 30, 0.8);
-}
-
-.ui.inverted.card > .content > .header {
- color: rgba(255, 255, 255, 0.87);
-}
diff --git a/components/frontend/src/semantic_ui_react_wrappers/Card.js b/components/frontend/src/semantic_ui_react_wrappers/Card.js
deleted file mode 100644
index 8ad57a5d80..0000000000
--- a/components/frontend/src/semantic_ui_react_wrappers/Card.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import "./Card.css"
-
-import { useContext } from "react"
-import { Card as SemanticUICard } from "semantic-ui-react"
-
-import { DarkMode } from "../context/DarkMode"
-import { addInvertedClassNameWhenInDarkMode } from "./dark_mode"
-
-export function Card(props) {
- return
-
- ,
- )
- expect(result.container.querySelector(".inverted")).not.toBe(null)
-})
-
-it("shows the form dropdown in light mode", () => {
- let result
- result = render(
-
-
- ,
- )
- expect(result.container.querySelector(".inverted")).toBe(null)
-})
diff --git a/components/frontend/src/semantic_ui_react_wrappers/Header.css b/components/frontend/src/semantic_ui_react_wrappers/Header.css
deleted file mode 100644
index 1a4485e873..0000000000
--- a/components/frontend/src/semantic_ui_react_wrappers/Header.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.ui.inverted.header {
- color: rgba(255, 255, 255, 0.87);
-}
diff --git a/components/frontend/src/semantic_ui_react_wrappers/Header.js b/components/frontend/src/semantic_ui_react_wrappers/Header.js
deleted file mode 100644
index 6767e44e7d..0000000000
--- a/components/frontend/src/semantic_ui_react_wrappers/Header.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import "./Header.css"
-
-import { useContext } from "react"
-import { Header as SemanticUIHeader } from "semantic-ui-react"
-
-import { DarkMode } from "../context/DarkMode"
-
-export function Header(props) {
- return 
+export function Logo({ alt, logo, marginBottom, width, height }) {
+ return (
+
+ )
}
Logo.propTypes = {
alt: string,
logo: string,
+ marginBottom: string,
+ width: string,
+ height: string,
}
diff --git a/components/frontend/src/source/Source.js b/components/frontend/src/source/Source.js
index b94f115789..83e6add265 100644
--- a/components/frontend/src/source/Source.js
+++ b/components/frontend/src/source/Source.js
@@ -1,14 +1,15 @@
+import HistoryIcon from "@mui/icons-material/History"
+import SettingsIcon from "@mui/icons-material/Settings"
+import Grid from "@mui/material/Grid2"
import { bool, func, object, oneOfType, string } from "prop-types"
import { useContext } from "react"
-import { Grid } from "semantic-ui-react"
import { delete_source, set_source_attribute } from "../api/source"
import { ChangeLog } from "../changelog/ChangeLog"
import { DataModel } from "../context/DataModel"
-import { EDIT_REPORT_PERMISSION, ReadOnlyOrEditable } from "../context/Permissions"
+import { accessGranted, EDIT_REPORT_PERMISSION, Permissions, ReadOnlyOrEditable } from "../context/Permissions"
import { ErrorMessage } from "../errorMessage"
-import { StringInput } from "../fields/StringInput"
-import { Tab } from "../semantic_ui_react_wrappers"
+import { TextField } from "../fields/TextField"
import {
measurementSourcePropType,
metricPropType,
@@ -21,7 +22,7 @@ import { ButtonRow } from "../widgets/ButtonRow"
import { DeleteButton } from "../widgets/buttons/DeleteButton"
import { ReorderButtonGroup } from "../widgets/buttons/ReorderButtonGroup"
import { HyperLink } from "../widgets/HyperLink"
-import { changelogTabPane, configurationTabPane } from "../widgets/TabPane"
+import { Tabs } from "../widgets/Tabs"
import { SourceParameters } from "./SourceParameters"
import { SourceType } from "./SourceType"
import { SourceTypeHeader } from "./SourceTypeHeader"
@@ -71,41 +72,39 @@ function Parameters({
source_uuid,
}) {
const dataModel = useContext(DataModel)
+ const permissions = useContext(Permissions)
+ const disabled = !accessGranted(permissions, [EDIT_REPORT_PERMISSION])
const source_type = dataModel.sources[source.type]
return (
-
-
-
- set_source_attribute(source_uuid, a, v, reload)}
- source_uuid={source_uuid}
- source_type={source.type}
- />
-
-
- set_source_attribute(source_uuid, "name", value, reload)}
- value={source.name}
- />
-
-
-
-
-
-
+
+
+ set_source_attribute(source_uuid, a, v, reload)}
+ source_uuid={source_uuid}
+ source_type={source.type}
+ />
+
+
+ set_source_attribute(source_uuid, "name", value, reload)}
+ value={source.name}
+ />
+
+
+
{connection_error && {
it("changes the source type", () => {
renderSource(metric)
- fireEvent.click(screen.getAllByText(/Source type 1/)[0])
+ fireEvent.mouseDown(screen.getByLabelText(/Source type/))
fireEvent.click(screen.getByText(/Source type 2/))
expect(fetch_server_api.fetch_server_api).toHaveBeenLastCalledWith("post", "source/source_uuid/attribute/type", {
type: "source_type2",
diff --git a/components/frontend/src/source/SourceEntities.css b/components/frontend/src/source/SourceEntities.css
index 005c4c4988..235d4007a6 100644
--- a/components/frontend/src/source/SourceEntities.css
+++ b/components/frontend/src/source/SourceEntities.css
@@ -1,11 +1,3 @@
-.ui.sortable.table.entities.stickyHeader > thead {
- /* Make thead sticky by positioning the th's */
- position: sticky;
- /* Leave room for the menu bar, the subject title, and the subject table header row */
- top: 187px;
- z-index: 1;
-}
-
@media print {
button.ui {
display: none !important;
diff --git a/components/frontend/src/source/SourceEntities.js b/components/frontend/src/source/SourceEntities.js
index 15b44f2447..bb72e1c289 100644
--- a/components/frontend/src/source/SourceEntities.js
+++ b/components/frontend/src/source/SourceEntities.js
@@ -1,13 +1,22 @@
import "./SourceEntities.css"
import HelpIcon from "@mui/icons-material/Help"
-import { IconButton, Tooltip } from "@mui/material"
+import {
+ IconButton,
+ Paper,
+ Table,
+ TableBody,
+ TableCell,
+ TableContainer,
+ TableHead,
+ TableRow,
+ TableSortLabel,
+ Tooltip,
+} from "@mui/material"
import { bool, func, object, string } from "prop-types"
import { useContext, useState } from "react"
-import { Message } from "semantic-ui-react"
import { DataModel } from "../context/DataModel"
-import { Popup, Table } from "../semantic_ui_react_wrappers"
import {
alignmentPropType,
childrenPropType,
@@ -25,7 +34,7 @@ import {
import { capitalize } from "../utils"
import { IgnoreIcon, ShowIcon } from "../widgets/icons"
import { LoadingPlaceHolder } from "../widgets/Placeholder"
-import { FailedToLoadMeasurementsWarningMessage } from "../widgets/WarningMessage"
+import { FailedToLoadMeasurementsWarningMessage, InfoMessage } from "../widgets/WarningMessage"
import { SourceEntity } from "./SourceEntity"
function entityStatus(source, entity) {
@@ -99,6 +108,10 @@ sort.propTypes = {
sortDirection: sortDirectionPropType,
}
+function MuiSortDirection(sortDirection) {
+ return sortDirection === "ascending" ? "asc" : "desc"
+}
+
function SortableHeaderCell({
children,
column,
@@ -111,15 +124,17 @@ function SortableHeaderCell({
textAlign,
}) {
return (
-
- sort(column, columnType, setColumnType, setSortColumn, setSortDirection, sortColumn, sortDirection)
- }
- sorted={sorted(column, sortColumn, sortDirection)}
- textAlign={textAlign}
- >
- {children}
-
+
+
+ sort(column, columnType, setColumnType, setSortColumn, setSortDirection, sortColumn, sortDirection)
+ }
+ >
+ {children}
+
+
)
}
SortableHeaderCell.propTypes = {
@@ -144,16 +159,12 @@ function EntityAttributeHeaderCell({ entityAttribute, ...sortProps }) {
>
{entityAttribute.name}
{entityAttribute.help ? (
-
-
-
+
+
+
) : null}
)
@@ -178,8 +189,8 @@ function sourceEntitiesHeaders(
const entityNamePlural = metricEntities.name_plural
const hideIgnoredEntitiesLabel = `${hideIgnoredEntities ? "Show" : "Hide"} ignored ${entityNamePlural}`
return (
-
-
+
+
-
+
{`${capitalize(entityName)} status`}
@@ -204,19 +215,15 @@ function sourceEntitiesHeaders(
{entityAttributes.map((entityAttribute) => (
+
)
}
sourceEntitiesHeaders.propTypes = {
entityAttributes: entityAttributesPropType,
hideIgnoredEntities: bool,
metricEntities: object,
- setColumnType: func,
setHideIgnoredEntities: func,
- setSortColumn: func,
- setSortDirection: func,
- sortColumn: string,
- sortDirection: sortDirectionPropType,
+ sortProps: object,
}
function sortedEntities(columnType, sortColumn, sortDirection, source) {
@@ -270,10 +277,9 @@ export function SourceEntities({ loading, measurements, metric, metric_uuid, rel
const unit = dataModel.metrics[metric.type].unit || "entities"
const sourceTypeName = dataModel.sources[sourceType].name
return (
-
+ {`Showing individual ${unit} is not supported when using ${sourceTypeName} as source.`}
+
)
}
if (loading === "failed") {
@@ -284,20 +290,18 @@ export function SourceEntities({ loading, measurements, metric, metric_uuid, rel
}
if (measurements.length === 0) {
return (
-
+ Measurement details not available because Quality-time has not collected any measurements yet.
+
)
}
const lastMeasurement = measurements[measurements.length - 1]
const source = lastMeasurement.sources.find((source) => source.source_uuid === source_uuid)
if (!Array.isArray(source.entities) || source.entities.length === 0) {
return (
-
+ There are currently no measurement details available.
+
)
}
const entityAttributes = metricEntities.attributes.filter((attribute) => attribute?.visible ?? true)
@@ -333,10 +337,12 @@ export function SourceEntities({ loading, measurements, metric, metric_uuid, rel
/>
))
return (
-
-
+
+
+
+
)
}
SourceEntities.propTypes = {
diff --git a/components/frontend/src/source/SourceEntities.test.js b/components/frontend/src/source/SourceEntities.test.js
index 98cf824b89..844d0b14fb 100644
--- a/components/frontend/src/source/SourceEntities.test.js
+++ b/components/frontend/src/source/SourceEntities.test.js
@@ -131,7 +131,7 @@ it("renders a message if the metric does not support measurement entities", () =
).toBe(1)
})
-it("renders a message if the metric does not support measurement entities andhas no unit", () => {
+it("renders a message if the metric does not support measurement entities and has no unit", () => {
renderSourceEntities({
metric: {
type: "metric_type_without_unit",
diff --git a/components/frontend/src/source/SourceEntity.css b/components/frontend/src/source/SourceEntity.css
deleted file mode 100644
index 6e0e39d1a3..0000000000
--- a/components/frontend/src/source/SourceEntity.css
+++ /dev/null
@@ -1,43 +0,0 @@
-tr.positive_status {
- background-color: rgb(30, 148, 78, 0.15) !important;
-}
-
-tr.positive_status:hover {
- background-color: rgb(30, 148, 78, 0.25) !important;
-}
-
-tr.negative_status {
- background-color: rgb(211, 59, 55, 0.2) !important;
-}
-
-tr.negative_status:hover {
- background-color: rgb(211, 59, 55, 0.3) !important;
-}
-
-tr.warning_status {
- background-color: rgb(253, 197, 54, 0.15) !important;
-}
-
-tr.warning_status:hover {
- background-color: rgb(253, 197, 54, 0.25) !important;
-}
-
-tr.active_status {
- background-color: rgb(150, 150, 150, 0.2) !important;
-}
-
-tr.active_status:hover {
- background-color: rgb(150, 150, 150, 0.3) !important;
-}
-
-tr.unknown_status {
- background-color: rgb(245, 245, 245, 0.15) !important;
-}
-
-tr.unknown_status:hover {
- background-color: rgb(245, 245, 245, 0.65) !important;
-}
-
-td > a {
- color: rgb(0, 88, 176) !important;
-}
diff --git a/components/frontend/src/source/SourceEntity.js b/components/frontend/src/source/SourceEntity.js
index 923ecb9a31..4a6b48cefb 100644
--- a/components/frontend/src/source/SourceEntity.js
+++ b/components/frontend/src/source/SourceEntity.js
@@ -1,8 +1,6 @@
-import "./SourceEntity.css"
-
+import { TableCell } from "@mui/material"
import { bool, func, string } from "prop-types"
import { useState } from "react"
-import { Table } from "semantic-ui-react"
import { entityAttributesPropType, entityPropType, entityStatusPropType, reportPropType } from "../sharedPropTypes"
import { DivWithHTML } from "../widgets/DivWithHTML"
@@ -71,28 +69,30 @@ export function SourceEntity({
return (
- {SOURCE_ENTITY_STATUS_NAME[status]}
- {status === "unconfirmed" ? "" : status_end_date}
-
+ {SOURCE_ENTITY_STATUS_NAME[status]}
+ {status === "unconfirmed" ? "" : status_end_date}
+
{rationale}
-
-
+
+
{entity.first_seen ?
+
{entity_attributes.map((entity_attribute) => (
-
+
))}
)
diff --git a/components/frontend/src/source/SourceEntity.test.js b/components/frontend/src/source/SourceEntity.test.js
index bc4d7c75b7..bc14431493 100644
--- a/components/frontend/src/source/SourceEntity.test.js
+++ b/components/frontend/src/source/SourceEntity.test.js
@@ -1,5 +1,8 @@
+import { Table, TableBody } from "@mui/material"
+import { LocalizationProvider } from "@mui/x-date-pickers"
+import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs"
import { fireEvent, render, screen } from "@testing-library/react"
-import { Table } from "semantic-ui-react"
+import { locale_en_gb } from "dayjs/locale/en-gb"
import { SourceEntity } from "./SourceEntity"
@@ -11,27 +14,29 @@ function renderSourceEntity({
first_seen = null,
}) {
return render(
-
-
,
+
+
+
+ ,
)
}
it("renders the unconfirmed status", () => {
renderSourceEntity({})
fireEvent.click(screen.getByRole("button"))
- expect(screen.getAllByText(/Unconfirmed/).length).toBe(1)
- expect(screen.getByText(/Unconfirmed/).closest("tr").className).toContain("warning_status")
+ expect(screen.getAllByText(/Unconfirmed/).length).toBe(2)
+ expect(screen.getAllByText(/Unconfirmed/)[0].closest("tr").className).toContain("warning_status")
})
it("renders the fixed status", () => {
diff --git a/components/frontend/src/source/SourceEntityDetails.js b/components/frontend/src/source/SourceEntityDetails.js
index 632babc659..be55d96ff6 100644
--- a/components/frontend/src/source/SourceEntityDetails.js
+++ b/components/frontend/src/source/SourceEntityDetails.js
@@ -1,14 +1,16 @@
+import { MenuItem } from "@mui/material"
+import Grid from "@mui/material/Grid2"
+import { DatePicker } from "@mui/x-date-pickers"
+import dayjs from "dayjs"
import { func, node, oneOf, string } from "prop-types"
-import { Grid, Header } from "semantic-ui-react"
+import { useContext } from "react"
import { set_source_entity_attribute } from "../api/source"
-import { EDIT_ENTITY_PERMISSION } from "../context/Permissions"
-import { DateInput } from "../fields/DateInput"
-import { SingleChoiceInput } from "../fields/SingleChoiceInput"
-import { TextInput } from "../fields/TextInput"
+import { accessGranted, EDIT_ENTITY_PERMISSION, Permissions } from "../context/Permissions"
+import { TextField } from "../fields/TextField"
import { entityPropType, entityStatusPropType, reportPropType } from "../sharedPropTypes"
import { capitalize, getDesiredResponseTime } from "../utils"
-import { LabelWithDate } from "../widgets/LabelWithDate"
+import { Header } from "../widgets/Header"
import { SOURCE_ENTITY_STATUS_ACTION, SOURCE_ENTITY_STATUS_NAME } from "./source_entity_status"
function entityStatusOption(status, subheader) {
@@ -16,7 +18,7 @@ function entityStatusOption(status, subheader) {
key: status,
text: SOURCE_ENTITY_STATUS_NAME[status],
value: status,
- content:
-
-
-
- set_source_entity_attribute(metric_uuid, source_uuid, entity.key, "status", value, reload)
- }
- value={status}
- sort={false}
- />
-
-
-
-
-
- set_source_entity_attribute(
- metric_uuid,
- source_uuid,
- entity.key,
- "rationale",
- value,
- reload,
- )
- }
- value={rationale}
- />
-
-
+
+
+
+ set_source_entity_attribute(metric_uuid, source_uuid, entity.key, "status", value, reload)
+ }
+ select
+ value={status}
+ >
+ {entityStatusOptions(name, report).map((option) => (
+
+ ))}
+
+
+
+
+ set_source_entity_attribute(
+ metric_uuid,
+ source_uuid,
+ entity.key,
+ "status_end_date",
+ value,
+ reload,
+ )
+ }
+ slotProps={{
+ field: { clearable: true },
+ textField: {
+ helperText: `Consider the status of this ${name} to be 'Unconfirmed' after the selected date.`,
+ },
+ }}
+ sx={{ width: "100%" }}
+ timezone="default"
+ />
+
+
+
+ set_source_entity_attribute(metric_uuid, source_uuid, entity.key, "rationale", value, reload)
+ }
+ value={rationale}
+ />
+
)
}
diff --git a/components/frontend/src/source/SourceEntityDetails.test.js b/components/frontend/src/source/SourceEntityDetails.test.js
index 4fe511f270..8087698189 100644
--- a/components/frontend/src/source/SourceEntityDetails.test.js
+++ b/components/frontend/src/source/SourceEntityDetails.test.js
@@ -1,5 +1,9 @@
+import { LocalizationProvider } from "@mui/x-date-pickers"
+import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs"
import { fireEvent, render, screen } from "@testing-library/react"
import userEvent from "@testing-library/user-event"
+import dayjs from "dayjs"
+import { locale_en_gb } from "dayjs/locale/en-gb"
import * as source from "../api/source"
import { EDIT_ENTITY_PERMISSION, Permissions } from "../context/Permissions"
@@ -11,23 +15,25 @@ const reload = jest.fn
function renderSourceEntityDetails(report) {
render(
-
- ,
+
+
+
+ ,
)
}
it("shows the default desired response times when the report has no desired response times", () => {
renderSourceEntityDetails()
- fireEvent.click(screen.getByText(/Unconfirmed/))
+ fireEvent.mouseDown(screen.getByText("Unconfirm"))
const expectedMenuItemDescriptions = [
"This violation has been reviewed and should be addressed within 180 days.",
"Ignore this violation for 7 days because it has been fixed or will be fixed shortly.",
@@ -42,7 +48,7 @@ it("shows the default desired response times when the report has no desired resp
it("shows the configured desired response times", () => {
const report = { desired_response_times: { confirmed: "2", fixed: "4", false_positive: "600", wont_fix: "100" } }
renderSourceEntityDetails(report)
- fireEvent.click(screen.getByText(/Unconfirmed/))
+ fireEvent.mouseDown(screen.getByText("Unconfirm"))
const expectedMenuItemDescriptions = [
"This violation has been reviewed and should be addressed within 2 days.",
"Ignore this violation for 4 days because it has been fixed or will be fixed shortly.",
@@ -57,7 +63,7 @@ it("shows the configured desired response times", () => {
it("shows no desired response times when the report has been configured to not have desired response times", () => {
const report = { desired_response_times: { confirmed: null, fixed: null, false_positive: null, wont_fix: null } }
renderSourceEntityDetails(report)
- fireEvent.click(screen.getByText(/Unconfirmed/))
+ fireEvent.mouseDown(screen.getByText("Unconfirm"))
const expectedMenuItemDescriptions = [
"This violation has been reviewed and should be addressed.",
"Ignore this violation because it has been fixed or will be fixed shortly.",
@@ -72,6 +78,7 @@ it("shows no desired response times when the report has been configured to not h
it("changes the entity status", () => {
source.set_source_entity_attribute = jest.fn()
renderSourceEntityDetails()
+ fireEvent.mouseDown(screen.getByText("Unconfirm"))
fireEvent.click(screen.getByText(/Confirm/))
expect(source.set_source_entity_attribute).toHaveBeenCalledWith(
"metric_uuid",
@@ -84,31 +91,23 @@ it("changes the entity status", () => {
})
it("changes the entity status end date", async () => {
- // Suppress "Warning: An update to t inside a test was not wrapped in act(...)." caused by interacting with
- // the date picker.
- const consoleLog = console.log
- console.error = jest.fn()
source.set_source_entity_attribute = jest.fn()
renderSourceEntityDetails()
- await userEvent.type(screen.getByPlaceholderText(/YYYY-MM-DD/), "2222-01-01{Tab}", {
- initialSelectionStart: 0,
- initialSelectionEnd: 10,
- })
+ await userEvent.type(screen.getByPlaceholderText(/YYYY-MM-DD/), "22220101{Enter}")
expect(source.set_source_entity_attribute).toHaveBeenCalledWith(
"metric_uuid",
"source_uuid",
"key",
"status_end_date",
- "2222-01-01",
+ dayjs("2222-01-01"),
reload,
)
- console.log = consoleLog
})
it("changes the rationale", async () => {
source.set_source_entity_attribute = jest.fn()
renderSourceEntityDetails()
- await userEvent.type(screen.getByPlaceholderText(/Rationale/), "Rationale")
+ await userEvent.type(screen.getByLabelText(/rationale/), "Rationale")
await userEvent.tab()
expect(source.set_source_entity_attribute).toHaveBeenCalledWith(
"metric_uuid",
diff --git a/components/frontend/src/source/SourceParameter.js b/components/frontend/src/source/SourceParameter.js
index 35ae091a25..e5d69254a7 100644
--- a/components/frontend/src/source/SourceParameter.js
+++ b/components/frontend/src/source/SourceParameter.js
@@ -1,15 +1,15 @@
+import { MenuItem } from "@mui/material"
+import { DatePicker } from "@mui/x-date-pickers/DatePicker"
+import dayjs from "dayjs"
import { bool, func, number, oneOfType, string } from "prop-types"
-import { useState } from "react"
+import { useContext, useState } from "react"
+import TimeAgo from "react-timeago"
import { set_source_parameter } from "../api/source"
-import { DateInput } from "../fields/DateInput"
-import { IntegerInput } from "../fields/IntegerInput"
-import { MultipleChoiceInput } from "../fields/MultipleChoiceInput"
-import { PasswordInput } from "../fields/PasswordInput"
-import { SingleChoiceInput } from "../fields/SingleChoiceInput"
-import { StringInput } from "../fields/StringInput"
+import { accessGranted, Permissions } from "../context/Permissions"
+import { MultipleChoiceField } from "../fields/MultipleChoiceField"
+import { TextField } from "../fields/TextField"
import {
- labelPropType,
permissionsPropType,
popupContentPropType,
reportPropType,
@@ -17,75 +17,47 @@ import {
stringsPropType,
} from "../sharedPropTypes"
import { dropdownOptions } from "../utils"
-import { LabelDate } from "../widgets/LabelWithDate"
+import { HyperLink } from "../widgets/HyperLink"
import { LabelWithDropdown } from "../widgets/LabelWithDropdown"
-import { LabelWithHelp } from "../widgets/LabelWithHelp"
-import { LabelWithHyperLink } from "../widgets/LabelWithHyperLink"
-function SourceParameterLabel({ edit_scope, index, label, parameter_short_name, setEditScope, source_type_name }) {
- const scope_options = [
+function EditScopeSelect({ editScope, setEditScope }) {
+ const scopeOptions = [
{
key: "source",
value: "source",
text: "Apply change to source",
- description: `Change the ${parameter_short_name} of this ${source_type_name} source only`,
- label: { color: "grey", empty: true, circular: true },
+ color: "grey",
},
{
key: "metric",
value: "metric",
text: "Apply change to metric",
- description: `Change the ${parameter_short_name} of ${source_type_name} sources in this metric that have the same ${parameter_short_name}`,
- label: { color: "black", empty: true, circular: true },
+ color: "text.primary",
},
{
key: "subject",
value: "subject",
text: "Apply change to subject",
- description: `Change the ${parameter_short_name} of ${source_type_name} sources in this subject that have the same ${parameter_short_name}`,
- label: { color: "yellow", empty: true, circular: true },
+ color: "gold",
},
{
key: "report",
value: "report",
text: "Apply change to report",
- description: `Change the ${parameter_short_name} of ${source_type_name} sources in this report that have the same ${parameter_short_name}`,
- label: { color: "orange", empty: true, circular: true },
+ color: "orange",
},
{
key: "reports",
value: "reports",
text: "Apply change to all reports",
- description: `Change the ${parameter_short_name} of ${source_type_name} sources in all reports that have the same ${parameter_short_name}`,
- label: { color: "red", empty: true, circular: true },
+ color: "red",
},
]
- return (
- setEditScope(data.value)}
- options={scope_options}
- value={edit_scope}
- />
- )
+ return setEditScope(value)} options={scopeOptions} value={editScope} />
}
-SourceParameterLabel.propTypes = {
- edit_scope: string,
- index: number,
- label: labelPropType,
- parameter_short_name: string,
+EditScopeSelect.propTypes = {
+ editScope: string,
setEditScope: func,
- source_type_name: string,
}
function sources(report) {
@@ -128,11 +100,9 @@ parameterValues.propTypes = {
export function SourceParameter({
help,
help_url,
- index,
parameter_key,
parameter_type,
parameter_name,
- parameter_short_name,
parameter_unit,
parameter_min,
parameter_max,
@@ -144,83 +114,103 @@ export function SourceParameter({
required,
requiredPermissions,
source,
- source_type_name,
source_uuid,
warning,
}) {
const [editScope, setEditScope] = useState("source")
+ const permissions = useContext(Permissions)
+ const disabled = !accessGranted(permissions, requiredPermissions)
let label = parameter_name
+ let helperText = ""
if (help_url) {
- label = {help_url} for more information
+
+ )
}
if (help) {
- label =
+ {dropdownOptions(parameter_values).map((option) => (
+
+ ))}
+
+ )
}
if (parameter_type === "multiple_choice") {
- return
- ,
+
+
+
+ ,
)
}
it("renders an url parameter", () => {
renderSourceParameter({})
- expect(screen.queryAllByText(/URL/).length).toBe(1)
- expect(screen.queryAllByText(/placeholder/).length).toBe(1)
+ expect(screen.queryAllByLabelText(/URL/).length).toBe(1)
expect(screen.getByDisplayValue(/https:\/\/test/)).toBeValid()
})
it("renders an url parameter with warning", () => {
- renderSourceParameter({ warning: true, index: 1 })
- expect(screen.queryAllByText(/URL/).length).toBe(1)
- expect(screen.queryAllByText(/placeholder/).length).toBe(1)
- expect(screen.getByRole("combobox")).toBeInvalid()
+ renderSourceParameter({ warning: true })
+ expect(screen.queryAllByLabelText(/URL/).length).toBe(1)
+ expect(screen.getByDisplayValue(/https:\/\/test/)).not.toBeValid()
})
it("renders a string parameter", () => {
renderSourceParameter({ parameter_name: "String", parameter_type: "string" })
- expect(screen.queryAllByText(/String/).length).toBe(1)
- expect(screen.queryAllByText(/placeholder/).length).toBe(1)
+ expect(screen.queryAllByLabelText(/String/).length).toBe(1)
+ expect(screen.queryAllByDisplayValue(/https/).length).toBe(1)
})
it("renders a password parameter", () => {
renderSourceParameter({ parameter_name: "Password", parameter_type: "password" })
- expect(screen.queryAllByText(/Password/).length).toBe(1)
- expect(screen.queryAllByPlaceholderText(/placeholder/).length).toBe(1)
+ expect(screen.queryAllByLabelText(/Password/).length).toBe(1)
})
it("renders a date parameter", () => {
@@ -98,14 +99,13 @@ it("renders a date parameter", () => {
parameter_type: "date",
parameter_value: "2021-10-10",
})
- expect(screen.queryAllByText(/Date/).length).toBe(1)
+ expect(screen.queryAllByLabelText(/Date/).length).toBe(1)
expect(screen.queryAllByDisplayValue("2021-10-10").length).toBe(1)
})
it("renders an integer parameter", () => {
renderSourceParameter({ parameter_name: "Integer", parameter_type: "integer" })
- expect(screen.queryAllByText(/Integer/).length).toBe(1)
- expect(screen.queryAllByPlaceholderText(/placeholder/).length).toBe(1)
+ expect(screen.queryAllByLabelText(/Integer/).length).toBe(1)
})
it("renders a single choice parameter", () => {
@@ -115,8 +115,8 @@ it("renders a single choice parameter", () => {
parameter_value: "option 1",
parameter_values: ["option 1", "option 2"],
})
- expect(screen.queryAllByText(/Single choice/).length).toBe(1)
- expect(screen.queryAllByText(/option 1/).length).toBe(2)
+ expect(screen.queryAllByLabelText(/Single choice/).length).toBe(1)
+ expect(screen.queryAllByText(/option 1/).length).toBe(1)
})
it("renders a multiple choice parameter", () => {
@@ -126,7 +126,7 @@ it("renders a multiple choice parameter", () => {
parameter_value: ["option 1", "option 2"],
parameter_values: ["option 1", "option 2", "option 3"],
})
- expect(screen.queryAllByText(/Multiple choice/).length).toBe(1)
+ expect(screen.queryAllByLabelText(/Multiple choice/).length).toBe(1)
expect(screen.queryAllByText(/option 1/).length).toBe(1)
})
@@ -137,7 +137,7 @@ it("renders a multiple choice with addition parameter", () => {
parameter_value: ["option 1", "option 2"],
placeholder: null,
})
- expect(screen.queryAllByText(/Multiple choice/).length).toBe(1)
+ expect(screen.queryAllByLabelText(/Multiple choice/).length).toBe(1)
})
it("renders nothing on unknown parameter type", () => {
@@ -147,21 +147,18 @@ it("renders nothing on unknown parameter type", () => {
it("renders a help url", () => {
renderSourceParameter({ help_url: "https://help" })
- expect(screen.queryByTitle(/Opens new window/).closest("a").href).toBe("https://help/")
+ expect(screen.queryAllByTitle(/Opens new window/)[0].closest("a").href).toBe("https://help/")
})
it("renders a help text", async () => {
renderSourceParameter({ help: "Help text" })
- await userEvent.hover(screen.queryByTestId("HelpIcon"))
- await waitFor(() => {
- expect(screen.queryAllByText(/Help text/).length).toBe(1)
- })
+ expect(screen.queryAllByText(/Help text/).length).toBe(1)
})
it("changes the value", async () => {
fetch_server_api.fetch_server_api = jest.fn().mockResolvedValue({ ok: true })
renderSourceParameter({})
- await userEvent.type(screen.queryByText(/test/), "/new{Enter}")
+ await userEvent.type(screen.queryByLabelText(/URL/), "/new{Enter}")
expect(fetch_server_api.fetch_server_api).toHaveBeenLastCalledWith("post", "source/source_uuid/parameter/key1", {
key1: "https://test/new",
edit_scope: "source",
@@ -171,8 +168,9 @@ it("changes the value", async () => {
it("changes the value via mass edit", async () => {
fetch_server_api.fetch_server_api = jest.fn().mockResolvedValue({ ok: true })
renderSourceParameter({})
+ await userEvent.click(screen.queryByText(/Apply change to source/))
await userEvent.click(screen.queryByText(/Apply change to subject/))
- await userEvent.type(screen.queryByText(/test/), "/new{Enter}")
+ await userEvent.type(screen.queryByLabelText(/URL/), "/new{Enter}")
expect(fetch_server_api.fetch_server_api).toHaveBeenLastCalledWith("post", "source/source_uuid/parameter/key1", {
key1: "https://test/new",
edit_scope: "subject",
diff --git a/components/frontend/src/source/SourceParameters.js b/components/frontend/src/source/SourceParameters.js
index fc3ac78908..40d80bb0bf 100644
--- a/components/frontend/src/source/SourceParameters.js
+++ b/components/frontend/src/source/SourceParameters.js
@@ -1,10 +1,10 @@
+import { Paper, Typography } from "@mui/material"
+import Grid from "@mui/material/Grid2"
import { func, string } from "prop-types"
import { useContext } from "react"
-import { Grid } from "semantic-ui-react"
import { DataModel } from "../context/DataModel"
import { EDIT_REPORT_PERMISSION } from "../context/Permissions"
-import { Header, Segment } from "../semantic_ui_react_wrappers"
import { metricPropType, reportPropType, sourcePropType, stringsPropType } from "../sharedPropTypes"
import { formatMetricScaleAndUnit } from "../utils"
import { SourceParameter } from "./SourceParameter"
@@ -44,17 +44,15 @@ export function SourceParameters({ changed_param_keys, metric, reload, report, s
if (parameterKeys.length === 0) {
return null
}
- const parameters = parameterKeys.map((parameterKey, index) => (
+ const parameters = parameterKeys.map((parameterKey) => (
-
-
- {parameterGroup.name}
-
+
+
+ {parameterGroup.name}
{parameters}
-
-
+
+
)
})
return (
-
- {groups}
+
+ {groups}
)
}
diff --git a/components/frontend/src/source/SourceParameters.test.js b/components/frontend/src/source/SourceParameters.test.js
index 149b9e5b0c..7be5615d70 100644
--- a/components/frontend/src/source/SourceParameters.test.js
+++ b/components/frontend/src/source/SourceParameters.test.js
@@ -60,7 +60,7 @@ function renderSourceParameters({
it("renders a string parameter", () => {
renderSourceParameters({})
- expect(screen.queryAllByText(/Parameter/).length).toBe(1)
+ expect(screen.queryAllByLabelText(/Parameter/).length).toBe(1)
})
it("renders a string parameter with placeholder", () => {
@@ -96,5 +96,5 @@ it("renders parameter groups", () => {
it("renders ungrouped parameters in the group without explicitly listed parameters", () => {
renderSourceParameters({})
- expect(screen.queryAllByText(/Other parameter/).length).toBe(2)
+ expect(screen.queryAllByLabelText(/Other parameter/).length).toBe(1)
})
diff --git a/components/frontend/src/source/SourceType.js b/components/frontend/src/source/SourceType.js
index 617c9817af..f1c8e1b9dd 100644
--- a/components/frontend/src/source/SourceType.js
+++ b/components/frontend/src/source/SourceType.js
@@ -1,10 +1,10 @@
-import { Chip, Stack, Typography } from "@mui/material"
+import { Chip, MenuItem, Stack, Typography } from "@mui/material"
import { func, string } from "prop-types"
import { useContext } from "react"
import { DataModel } from "../context/DataModel"
-import { EDIT_REPORT_PERMISSION } from "../context/Permissions"
-import { SingleChoiceInput } from "../fields/SingleChoiceInput"
+import { accessGranted, EDIT_REPORT_PERMISSION, Permissions } from "../context/Permissions"
+import { TextField } from "../fields/TextField"
import { dataModelPropType, sourceTypePropType } from "../sharedPropTypes"
import { Logo } from "./Logo"
@@ -29,11 +29,15 @@ function sourceTypeOption(key, sourceType) {
set_source_attribute("type", value)}
+ onChange={(value) => set_source_attribute("type", value)}
+ select
value={source_type}
- />
+ >
+ {options.map((option) => (
+
+ ))}
+
)
}
SourceType.propTypes = {
diff --git a/components/frontend/src/source/SourceType.test.js b/components/frontend/src/source/SourceType.test.js
index 7431c328f2..9006b5863e 100644
--- a/components/frontend/src/source/SourceType.test.js
+++ b/components/frontend/src/source/SourceType.test.js
@@ -1,4 +1,4 @@
-import { act, render, screen } from "@testing-library/react"
+import { act, fireEvent, render, screen } from "@testing-library/react"
import userEvent from "@testing-library/user-event"
import { DataModel } from "../context/DataModel"
@@ -60,19 +60,20 @@ it("shows the metric type even when not supported by the subject type", async ()
await act(async () => {
renderSourceType("violations", "unsupported")
})
- expect(screen.queryAllByText(/Unsupported/).length).toBe(2)
+ expect(screen.getAllByText(/Unsupported/).length).toBe(1)
})
it("shows the supported source versions", async () => {
await act(async () => {
renderSourceType("violations", "sonarqube")
})
- expect(screen.queryAllByText(/Supported SonarQube versions: >=8.2/).length).toBe(1)
+ expect(screen.getAllByText(/Supported SonarQube versions: >=8.2/).length).toBe(1)
})
it("shows sources as deprecated if they are deprecated", async () => {
await act(async () => {
renderSourceType("violations", "sonarqube")
})
+ fireEvent.mouseDown(screen.getByLabelText(/Source type/))
expect(screen.getAllByText(/Deprecated/).length).toBe(1)
})
diff --git a/components/frontend/src/source/SourceTypeHeader.js b/components/frontend/src/source/SourceTypeHeader.js
index 419a9c84f6..3bb33ee92b 100644
--- a/components/frontend/src/source/SourceTypeHeader.js
+++ b/components/frontend/src/source/SourceTypeHeader.js
@@ -1,9 +1,9 @@
import { Chip } from "@mui/material"
import { string } from "prop-types"
-import { Header } from "../semantic_ui_react_wrappers"
import { sourceTypePropType } from "../sharedPropTypes"
import { referenceDocumentationURL } from "../utils"
+import { Header } from "../widgets/Header"
import { ReadTheDocsLink } from "../widgets/ReadTheDocsLink"
import { Logo } from "./Logo"
import { sourceTypeDescription } from "./SourceType"
@@ -14,18 +14,22 @@ export function SourceTypeHeader({ metricTypeId, sourceTypeId, sourceType }) {
howToConfigure = " for specific information on how to configure this source type."
}
return (
-
-
-
+
+
-
-
+
+ }
+ />
)
}
SourceTypeHeader.propTypes = {
diff --git a/components/frontend/src/source/Sources.js b/components/frontend/src/source/Sources.js
index 15a6a3b9a3..8b1a7b0520 100644
--- a/components/frontend/src/source/Sources.js
+++ b/components/frontend/src/source/Sources.js
@@ -1,10 +1,10 @@
+import { Paper } from "@mui/material"
import { func, number, string } from "prop-types"
import { useContext } from "react"
import { add_source, copy_source, move_source } from "../api/source"
import { DataModel } from "../context/DataModel"
import { EDIT_REPORT_PERMISSION, ReadOnlyOrEditable } from "../context/Permissions"
-import { Message, Segment } from "../semantic_ui_react_wrappers"
import {
measurementPropType,
measurementSourcePropType,
@@ -20,6 +20,7 @@ import { CopyButton } from "../widgets/buttons/CopyButton"
import { MoveButton } from "../widgets/buttons/MoveButton"
import { source_options } from "../widgets/menu_options"
import { showMessage } from "../widgets/toast"
+import { InfoMessage } from "../widgets/WarningMessage"
import { Source } from "./Source"
import { sourceTypeOptions } from "./SourceType"
@@ -59,7 +60,7 @@ ButtonSegment.propTypes = {
function SourceSegment({ changed_fields, index, last_index, measurement_source, metric, reload, report, sourceUuid }) {
return (
-
+
+
)
}
SourceSegment.propTypes = {
@@ -118,10 +119,7 @@ export function Sources({ reports, report, metric, metric_uuid, measurement, cha
return (
<>
{sourceSegments.length === 0 ? (
-
- No sources
-
+ No sources have been configured yet.
) : (
sourceSegments
)}
diff --git a/components/frontend/src/source/Sources.test.js b/components/frontend/src/source/Sources.test.js
index 3e1f1de5b0..a403e60484 100644
--- a/components/frontend/src/source/Sources.test.js
+++ b/components/frontend/src/source/Sources.test.js
@@ -106,7 +106,7 @@ it("creates a new source", async () => {
fireEvent.click(screen.getByText(/Add source/))
})
await act(async () => {
- fireEvent.click(screen.getAllByText(/Source type 2/)[1])
+ fireEvent.click(screen.getByText(/Source type 2/))
})
expect(fetch_server_api.fetch_server_api).toHaveBeenNthCalledWith(1, "post", "source/new/metric_uuid", {
type: "source_type2",
@@ -168,10 +168,9 @@ it("updates a parameter of a source", async () => {
it("mass updates a parameter of a source", async () => {
fetch_server_api.fetch_server_api = jest.fn().mockResolvedValue({ ok: true, nr_sources_mass_edited: 2 })
renderSources()
- await act(async () => {
- fireEvent.click(screen.getByText(/Apply change to subject/))
- })
- expect(screen.getAllByText(/Apply change to subject/).length).toBe(2)
+ await userEvent.click(screen.getByText(/Apply change to source/))
+ await userEvent.click(screen.getByText(/Apply change to subject/))
+ expect(screen.getAllByText(/Apply change to subject/).length).toBe(1)
await userEvent.type(screen.getByDisplayValue(/https:\/\/test.nl/), "https://other{Enter}", {
initialSelectionStart: 0,
initialSelectionEnd: 15,
@@ -185,5 +184,5 @@ it("mass updates a parameter of a source", async () => {
url: "https://other",
})
expect(toast.showMessage).toHaveBeenCalledTimes(1)
- expect(screen.getAllByText(/Apply change to subject/).length).toBe(1)
+ expect(screen.getAllByText(/Apply change to source/).length).toBe(1)
})
diff --git a/components/frontend/src/subject/Subject.css b/components/frontend/src/subject/Subject.css
index 1957375822..b17fe6a6ea 100644
--- a/components/frontend/src/subject/Subject.css
+++ b/components/frontend/src/subject/Subject.css
@@ -1,5 +1,5 @@
div.sticky {
position: sticky; /* Make the div sticky */
- top: 15px; /* The menu bar is about 60px high, move the top margin under it */
+ top: 60px; /* The menu bar is about 60px high, move the top margin under it */
z-index: 3;
}
diff --git a/components/frontend/src/subject/Subject.js b/components/frontend/src/subject/Subject.js
index 2e22900287..ec831c9a5d 100644
--- a/components/frontend/src/subject/Subject.js
+++ b/components/frontend/src/subject/Subject.js
@@ -1,5 +1,6 @@
import "./Subject.css"
+import { Divider, Paper } from "@mui/material"
import { bool, func, string } from "prop-types"
import { useContext } from "react"
@@ -164,7 +165,7 @@ export function Subject({
}
return (
-
-
-
- set_subject_attribute(subject_uuid, "type", value, reload)}
- subjectType={subject.type}
- />
-
-
- set_subject_attribute(subject_uuid, "name", value, reload)}
- value={subject.name}
- />
-
-
- set_subject_attribute(subject_uuid, "subtitle", value, reload)}
- value={subject.subtitle}
- />
-
-
-
-
- set_subject_attribute(subject_uuid, "comment", value, reload)}
- value={subject.comment}
- />
-
-
+
+
+ set_subject_attribute(subject_uuid, "type", value, reload)}
+ subjectType={subject.type}
+ />
+
+
+ set_subject_attribute(subject_uuid, "name", value, reload)}
+ value={subject.name}
+ />
+
+
+ set_subject_attribute(subject_uuid, "subtitle", value, reload)}
+ value={subject.subtitle}
+ />
+
+
+ set_subject_attribute(subject_uuid, "comment", value, reload)}
+ value={subject.comment}
+ />
+
)
}
diff --git a/components/frontend/src/subject/SubjectTable.css b/components/frontend/src/subject/SubjectTable.css
index 925a569965..89af38163c 100644
--- a/components/frontend/src/subject/SubjectTable.css
+++ b/components/frontend/src/subject/SubjectTable.css
@@ -1,123 +1,7 @@
-.ui.sortable.table.stickyHeader > thead {
+table.stickyHeader > thead {
/* Make thead sticky by positioning the th's */
position: sticky;
/* Leave room for the menu bar and the subject title */
- top: 143px;
+ top: 140px;
z-index: 2;
}
-
-.ui.sortable.table.stickyHeader > thead > tr > th {
- /* Apply the top table border to the th as the table border scrolls out of view */
- border-top: 1px solid rgba(34, 36, 38, 0.15);
-}
-
-.ui.sortable.table.stickyHeader {
- /* The top table border is applied to the th's because the top table border scrolls out of view */
- border-top: 0px;
-}
-
-/* Remove opacity from the th background, otherwise the rows underneath are visible. */
-
-.ui.inverted.sortable.table > thead > tr > th {
- background-color: rgba(50, 50, 50, 1);
-}
-
-.ui.sortable.table > thead > tr > th.sorted {
- background-color: rgba(242, 242, 242, 1);
-}
-
-.ui.inverted.sortable.table > thead > tr > th.sorted {
- background-color: rgba(80, 80, 80, 1) !important;
-}
-
-.ui.sortable.table > thead > tr > th:not(.unsortable):hover {
- background-color: rgba(242, 242, 242, 1);
-}
-
-.ui.inverted.sortable.table > thead > tr > th:not(.unsortable):hover {
- background-color: rgba(100, 100, 100, 1);
-}
-
-.ui.sortable.table > thead > tr > th.unsortable:hover {
- /* Don't highlight unsortable columns */
- background-color: rgba(249, 250, 251, 1);
-}
-
-.ui.inverted.sortable.table > thead > tr > th.unsortable:hover {
- /* Don't highlight unsortable columns */
- background-color: rgba(50, 50, 50, 1);
-}
-
-tr.target_met,
-td.target_met {
- background-color: rgb(30, 148, 78, 0.15) !important;
-}
-
-tr.target_met:hover,
-td.target_met:hover {
- background-color: rgb(30, 148, 78, 0.25) !important;
-}
-
-tr.target_not_met,
-td.target_not_met {
- background-color: rgb(211, 59, 55, 0.2) !important;
-}
-
-tr.target_not_met:hover,
-td.target_not_met:hover {
- background-color: rgb(211, 59, 55, 0.3) !important;
-}
-
-tr.near_target_met,
-td.near_target_met {
- background-color: rgb(253, 197, 54, 0.15) !important;
-}
-
-tr.near_target_met:hover,
-td.near_target_met:hover {
- background-color: rgb(253, 197, 54, 0.25) !important;
-}
-
-tr.debt_target_met,
-td.debt_target_met {
- background-color: rgb(150, 150, 150, 0.2) !important;
-}
-
-tr.informative,
-td.informative {
- background-color: rgb(0, 125, 200, 0.2) !important;
-}
-
-tr.debt_target_met:hover,
-td.debt_target_met:hover {
- background-color: rgb(150, 150, 150, 0.3) !important;
-}
-
-tr.informative:hover,
-td.informative:hover {
- background-color: rgb(0, 125, 200, 0.3) !important;
-}
-
-tr.unknown,
-td.unknown {
- background-color: rgb(245, 245, 245, 0.15) !important;
-}
-
-.ui.table.inverted > tbody > tr.unknown:hover,
-.ui.table.inverted > tbody > tr > td.unknown:hover {
- background-color: rgb(245, 245, 245, 0.25) !important;
-}
-
-tr.unknown:hover,
-td.unknown:hover {
- background-color: rgb(245, 245, 245, 0.65) !important;
-}
-
-td > a {
- color: rgb(0, 88, 176) !important;
-}
-
-.ui.sortable.table thead th.unsortable:hover {
- /* Allow for specifying that some columns in a sortable table aren't sortable */
- background: #f9fafb;
-}
diff --git a/components/frontend/src/subject/SubjectTable.js b/components/frontend/src/subject/SubjectTable.js
index 48457c3402..7e4440c232 100644
--- a/components/frontend/src/subject/SubjectTable.js
+++ b/components/frontend/src/subject/SubjectTable.js
@@ -1,8 +1,8 @@
import "./SubjectTable.css"
+import { Table, TableContainer } from "@mui/material"
import { array, func, object, string } from "prop-types"
-import { Table } from "../semantic_ui_react_wrappers"
import {
datesPropType,
measurementsPropType,
@@ -33,34 +33,36 @@ export function SubjectTable({
// Sort measurements in reverse order so that if there multiple measurements on a day, we find the most recent one:
const reversedMeasurements = measurements.slice().sort((m1, m2) => (m1.start < m2.start ? 1 : -1))
return (
-
-
+
+
+
+
)
}
SubjectTable.propTypes = {
diff --git a/components/frontend/src/subject/SubjectTable.test.js b/components/frontend/src/subject/SubjectTable.test.js
index 3057af4959..7b9ccef512 100644
--- a/components/frontend/src/subject/SubjectTable.test.js
+++ b/components/frontend/src/subject/SubjectTable.test.js
@@ -202,7 +202,7 @@ it("hides the tags column", () => {
it("expands the details via the button", () => {
const expandedItems = renderHook(() => useExpandedItemsSearchQuery())
renderSubjectTable({ expandedItems: expandedItems.result.current })
- const expand = screen.getAllByRole("button")[0]
+ const expand = screen.getAllByRole("button", { name: "Expand/collapse" })[0]
fireEvent.click(expand)
expandedItems.rerender()
expect(expandedItems.result.current.value).toStrictEqual(["1:0"])
@@ -212,7 +212,7 @@ it("collapses the details via the button", async () => {
history.push("?expanded=1:0")
const expandedItems = renderHook(() => useExpandedItemsSearchQuery())
renderSubjectTable({ expandedItems: expandedItems.result.current })
- const expand = screen.getAllByRole("button")[0]
+ const expand = screen.getAllByRole("button", { name: "Expand/collapse" })[0]
await act(async () => fireEvent.click(expand))
expandedItems.rerender()
expect(expandedItems.result.current.value).toStrictEqual([])
@@ -237,6 +237,9 @@ it("moves a metric", async () => {
it("adds a source", async () => {
history.push("?expanded=1:1")
renderSubjectTable()
+ await act(async () => {
+ fireEvent.click(screen.getByRole("tab", { name: /Sources/ }))
+ })
const addButton = await screen.findByText("Add source")
await act(async () => fireEvent.click(addButton))
fireEvent.click(await screen.findByText("Source type"))
diff --git a/components/frontend/src/subject/SubjectTableBody.js b/components/frontend/src/subject/SubjectTableBody.js
index 28d187c3b6..4132f12c4c 100644
--- a/components/frontend/src/subject/SubjectTableBody.js
+++ b/components/frontend/src/subject/SubjectTableBody.js
@@ -1,6 +1,6 @@
+import { TableBody } from "@mui/material"
import { array, func, string } from "prop-types"
-import { Table } from "../semantic_ui_react_wrappers"
import {
datesPropType,
measurementsPropType,
@@ -28,7 +28,7 @@ export function SubjectTableBody({
}) {
const lastIndex = metricEntries.length - 1
return (
-
+
{metricEntries.map(([metric_uuid, metric], index) => {
return (
+
)
}
SubjectTableBody.propTypes = {
diff --git a/components/frontend/src/subject/SubjectTableFooter.js b/components/frontend/src/subject/SubjectTableFooter.js
index ca66d032d1..fbda961b44 100644
--- a/components/frontend/src/subject/SubjectTableFooter.js
+++ b/components/frontend/src/subject/SubjectTableFooter.js
@@ -1,6 +1,6 @@
+import { TableCell, TableFooter, TableRow } from "@mui/material"
import { func, string } from "prop-types"
import { useContext } from "react"
-import { Table } from "semantic-ui-react"
import { add_metric, copy_metric, move_metric } from "../api/metric"
import { DataModel } from "../context/DataModel"
@@ -16,8 +16,8 @@ import { metric_options } from "../widgets/menu_options"
function SubjectTableFooterButtonRow({ subject, subjectUuid, reload, reports, stopFilteringAndSorting }) {
const dataModel = useContext(DataModel)
return (
-
-
+
+
metric_options(reports, dataModel, subject.type, subjectUuid)}
/>
-
-
+
+
)
}
SubjectTableFooterButtonRow.propTypes = {
@@ -63,9 +63,9 @@ export function SubjectTableFooter(props) {
+
}
/>
)
diff --git a/components/frontend/src/subject/SubjectTableFooter.test.js b/components/frontend/src/subject/SubjectTableFooter.test.js
index 72de24050c..62f2293724 100644
--- a/components/frontend/src/subject/SubjectTableFooter.test.js
+++ b/components/frontend/src/subject/SubjectTableFooter.test.js
@@ -1,5 +1,5 @@
+import { Table } from "@mui/material"
import { act, fireEvent, render, screen } from "@testing-library/react"
-import { Table } from "semantic-ui-react"
import { dataModel, report } from "../__fixtures__/fixtures"
import * as fetch_server_api from "../api/fetch_server_api"
diff --git a/components/frontend/src/subject/SubjectTableHeader.js b/components/frontend/src/subject/SubjectTableHeader.js
index c30cd58081..f6b5ff43c8 100644
--- a/components/frontend/src/subject/SubjectTableHeader.js
+++ b/components/frontend/src/subject/SubjectTableHeader.js
@@ -1,10 +1,8 @@
-import { List, ListItem, ListItemIcon, ListItemText } from "@mui/material"
+import { Chip, List, ListItem, ListItemIcon, ListItemText, Paper, TableHead, TableRow, Typography } from "@mui/material"
import { bool, func, string } from "prop-types"
-import { Table } from "semantic-ui-react"
import { StatusIcon } from "../measurement/StatusIcon"
import { STATUS_DESCRIPTION, STATUSES } from "../metric/status"
-import { Label } from "../semantic_ui_react_wrappers"
import { datesPropType, settingsPropType } from "../sharedPropTypes"
import { HyperLink } from "../widgets/HyperLink"
import { IgnoreIcon, TriangleRightIcon } from "../widgets/icons"
@@ -78,9 +76,9 @@ const measurementHelp = (
+
+ )
+}
+InlineChip.propTypes = {
+ color: string,
+ label: string,
+}
+
function MeasurementHeaderCells({ columnDates, showDeltaColumns }) {
const cells = []
columnDates.forEach((date, index) => {
@@ -236,29 +246,16 @@ function MeasurementHeaderCells({ columnDates, showDeltaColumns }) {
and next date.
Pane, { warning: true })]} />)
- expect(screen.getByText("Tab").className).toEqual(expect.stringContaining("yellow"))
-})
-
-it("shows an icon", () => {
- render(Pane, { icon: ![]()
- const { container } = render(Pane, { image: image })]} />)
- expect(container.firstChild.firstChild.firstChild.firstChild.className).toEqual(expect.stringContaining("image"))
-})
diff --git a/components/frontend/src/widgets/TableHeaderCell.js b/components/frontend/src/widgets/TableHeaderCell.js
index f861f89f97..566a7060bf 100644
--- a/components/frontend/src/widgets/TableHeaderCell.js
+++ b/components/frontend/src/widgets/TableHeaderCell.js
@@ -1,7 +1,6 @@
-import { Tooltip } from "@mui/material"
+import { TableCell, TableSortLabel, Tooltip } from "@mui/material"
import { func, string } from "prop-types"
-import { Table } from "../semantic_ui_react_wrappers"
import {
alignmentPropType,
labelPropType,
@@ -24,6 +23,10 @@ TableHeaderCellContents.propTypes = {
label: labelPropType,
}
+function MuiSortDirection(sortDirection) {
+ return sortDirection === "ascending" ? "asc" : "desc"
+}
+
export function SortableTableHeaderCell({
colSpan,
column,
@@ -34,16 +37,17 @@ export function SortableTableHeaderCell({
textAlign,
help,
}) {
- const sorted = sortColumn.value === column ? sortDirection.value : null
+ const sorted = sortColumn.value === column ? MuiSortDirection(sortDirection.value) : null
return (
- handleSort(column)}
- sorted={sorted}
- textAlign={textAlign || "left"}
- >
-
+
+ handleSort(column)}
+ >
+
+
)
}
SortableTableHeaderCell.propTypes = {
@@ -59,9 +63,9 @@ SortableTableHeaderCell.propTypes = {
export function UnsortableTableHeaderCell({ help, label, textAlign, width }) {
return (
-
+
+
)
}
UnsortableTableHeaderCell.propTypes = {
diff --git a/components/frontend/src/widgets/TableHeaderCell.test.js b/components/frontend/src/widgets/TableHeaderCell.test.js
index 40b05e8df2..72e793885f 100644
--- a/components/frontend/src/widgets/TableHeaderCell.test.js
+++ b/components/frontend/src/widgets/TableHeaderCell.test.js
@@ -1,6 +1,6 @@
+import { Table, TableHead, TableRow } from "@mui/material"
import { render, screen, waitFor } from "@testing-library/react"
import userEvent from "@testing-library/user-event"
-import { Table } from "semantic-ui-react"
import { createTestableSettings } from "../__fixtures__/fixtures"
import { SortableTableHeaderCell, UnsortableTableHeaderCell } from "./TableHeaderCell"
@@ -9,16 +9,16 @@ function renderSortableTableHeaderCell(help) {
const settings = createTestableSettings()
render(
-
,
)
}
@@ -39,11 +39,11 @@ it("shows the help of the sortable header", async () => {
function renderUnsortableTableHeaderCell(help) {
render(
-
,
)
}
diff --git a/components/frontend/src/widgets/TableRowWithDetails.js b/components/frontend/src/widgets/TableRowWithDetails.js
index c805f59a48..ebbed94fc8 100644
--- a/components/frontend/src/widgets/TableRowWithDetails.js
+++ b/components/frontend/src/widgets/TableRowWithDetails.js
@@ -1,31 +1,42 @@
-import { bool, func, object } from "prop-types"
+import { TableCell, TableRow } from "@mui/material"
+import { bool, func, string } from "prop-types"
-import { Table } from "../semantic_ui_react_wrappers"
import { childrenPropType } from "../sharedPropTypes"
import { ExpandButton } from "./buttons/ExpandButton"
export function TableRowWithDetails(props) {
- const { children, details, expanded, onExpand, style, ...otherProps } = props
+ const { color, children, details, expanded, onExpand, ...otherProps } = props
return (
<>
-
-
+
+
onExpand(!expanded)} size="1.5em" />
-
+
{children}
-
+
{expanded && (
-
- {details}
-
+
+ {details}
+
)}
)
}
TableRowWithDetails.propTypes = {
children: childrenPropType,
+ color: string,
details: childrenPropType,
expanded: bool,
onExpand: func,
- style: object,
}
diff --git a/components/frontend/src/widgets/TableRowWithDetails.test.js b/components/frontend/src/widgets/TableRowWithDetails.test.js
index 5bcac28cb3..72da7d5376 100644
--- a/components/frontend/src/widgets/TableRowWithDetails.test.js
+++ b/components/frontend/src/widgets/TableRowWithDetails.test.js
@@ -1,15 +1,15 @@
+import { Table, TableBody } from "@mui/material"
import { fireEvent, render, screen } from "@testing-library/react"
import userEvent from "@testing-library/user-event"
-import { Table } from "semantic-ui-react"
import { TableRowWithDetails } from "./TableRowWithDetails"
function renderTableRowWithDetails(expanded, onExpand) {
render(
-
,
)
}
diff --git a/components/frontend/src/widgets/Tabs.js b/components/frontend/src/widgets/Tabs.js
new file mode 100644
index 0000000000..c9d7f0f920
--- /dev/null
+++ b/components/frontend/src/widgets/Tabs.js
@@ -0,0 +1,46 @@
+import { Box, Tab, Tabs as MUITabs } from "@mui/material"
+import { arrayOf, object } from "prop-types"
+import { useId, useState } from "react"
+
+import { childrenPropType } from "../sharedPropTypes"
+import { Label } from "./Label"
+
+export function Tabs({ children, tabs }) {
+ const tabsId = useId()
+ const [tabIndex, setTabIndex] = useState(0)
+ return (
+ <>
+
+ setTabIndex(newTabIndex)}>
+ {tabs.map((tab, index) => {
+ let tabLabel = tab.label
+ if (tab.error || tab.warning) {
+ const color = tab.error ? "error" : "warning"
+ tabLabel =
+ }
+ return (
+
+
+
+ {children[tabIndex]}
+
+
+ )
+}
+Tabs.propTypes = {
+ children: childrenPropType,
+ tabs: arrayOf(object),
+}
diff --git a/components/frontend/src/widgets/WarningMessage.js b/components/frontend/src/widgets/WarningMessage.js
index 86dea71c07..18de1cfe31 100644
--- a/components/frontend/src/widgets/WarningMessage.js
+++ b/components/frontend/src/widgets/WarningMessage.js
@@ -1,21 +1,40 @@
-import { bool } from "prop-types"
+import { Alert, AlertTitle } from "@mui/material"
+import { bool, string } from "prop-types"
-import { Message } from "../semantic_ui_react_wrappers"
+import { childrenPropType } from "../sharedPropTypes"
-export function WarningMessage(props) {
+export function WarningMessage({ children, title, showIf }) {
// Show a warning message if showIf is true or undefined
- const { showIf, ...messageProps } = props
- return (showIf ?? true) ?
+ {title}
+ {children}
+
+ ) : null
}
WarningMessage.propTypes = {
+ children: childrenPropType,
showIf: bool,
+ title: string,
}
export function FailedToLoadMeasurementsWarningMessage() {
return (
-
+ Loading the measurements from the API-server failed.
+
)
}
+
+export function InfoMessage({ children, title }) {
+ return (
+
+ {title}
+ {children}
+
+ )
+}
+InfoMessage.propTypes = {
+ children: childrenPropType,
+ title: string,
+}
diff --git a/components/frontend/src/widgets/WarningMessage.test.js b/components/frontend/src/widgets/WarningMessage.test.js
index bc859c756f..cfc5fb9ab7 100644
--- a/components/frontend/src/widgets/WarningMessage.test.js
+++ b/components/frontend/src/widgets/WarningMessage.test.js
@@ -3,16 +3,16 @@ import { render, screen } from "@testing-library/react"
import { WarningMessage } from "./WarningMessage"
it("shows a warning message if showIf is true", () => {
- render(Warning )
expect(screen.getAllByText("Warning").length).toBe(1)
})
it("does not show a warning message if showIf is false", () => {
- render(Warning )
expect(screen.queryAllByText("Warning").length).toBe(0)
})
it("shows a warning message if showIf is undefined", () => {
- render(Warning )
expect(screen.getAllByText("Warning").length).toBe(1)
})
diff --git a/components/frontend/src/widgets/icons.js b/components/frontend/src/widgets/icons.js
index 3d5fcb39cf..55fa0fe45f 100644
--- a/components/frontend/src/widgets/icons.js
+++ b/components/frontend/src/widgets/icons.js
@@ -42,7 +42,7 @@ export function DeleteItemIcon() {
}
export function IgnoreIcon() {
- return
-
+
- {sourceType.name}
- {sourceType.deprecated &&
No sources have been configured yet.
-
+
+
)
}
Subject.propTypes = {
diff --git a/components/frontend/src/subject/SubjectParameters.js b/components/frontend/src/subject/SubjectParameters.js
index ec40812d73..ef875c4e67 100644
--- a/components/frontend/src/subject/SubjectParameters.js
+++ b/components/frontend/src/subject/SubjectParameters.js
@@ -1,53 +1,53 @@
+import Grid from "@mui/material/Grid2"
import { func, string } from "prop-types"
-import { Grid } from "semantic-ui-react"
+import { useContext } from "react"
import { set_subject_attribute } from "../api/subject"
-import { EDIT_REPORT_PERMISSION } from "../context/Permissions"
-import { Comment } from "../fields/Comment"
-import { StringInput } from "../fields/StringInput"
+import { accessGranted, EDIT_REPORT_PERMISSION, Permissions } from "../context/Permissions"
+import { CommentField } from "../fields/CommentField"
+import { TextField } from "../fields/TextField"
import { subjectPropType } from "../sharedPropTypes"
import { SubjectType } from "./SubjectType"
export function SubjectParameters({ subject, subject_uuid, subject_name, reload }) {
+ const permissions = useContext(Permissions)
+ const disabled = !accessGranted(permissions, [EDIT_REPORT_PERMISSION])
return (
- If the measurement value has a{" "} - + , the metric has not been measured recently. This indicates a problem with Quality-time itself, and a system administrator should be notified.
@@ -99,9 +97,9 @@ const targetHelp = (The value against which measurements are evaluated to determine whether a metric needs action.
The target value has a{" "} - {" "} + {" "} if the metric has accepted technical debt that is not applied because the technical debt end date is in the past or all issues linked to the metric have been resolved.
@@ -172,9 +170,9 @@ const sourcesHelp = (The tools and reports accessed to collect the measurement data. One metric can have multiple sources.
If a source has a{" "}
-
+
, the source could not be accessed or the data could not be parsed.
If an issue has a{" "}
-
+
, the issue tracker could not be accessed or the data could not be parsed.
- A plus sign{" "}
- {" "}
- indicates that the newer value is higher. A minus sign{" "}
- {" "}
- indicates that the newer value is lower.
+ A plus sign
- A{" "}
- {" "}
+ A
@@ -289,8 +286,8 @@ export function SubjectTableHeader({ columnDates, handleSort, settings }) {
}
const nrDates = columnDates.length
return (
-
+ Hello Hello Hello
-
+
+ )
+}
+Header.propTypes = {
+ header: oneOfType([element, string]),
+ level: string,
+ subheader: oneOfType([element, string]),
+}
diff --git a/components/frontend/src/widgets/HeaderWithDetails.css b/components/frontend/src/widgets/HeaderWithDetails.css
deleted file mode 100644
index f0f4f35cd9..0000000000
--- a/components/frontend/src/widgets/HeaderWithDetails.css
+++ /dev/null
@@ -1,9 +0,0 @@
-@media print {
- .Caret {
- display: none !important;
- }
-}
-
-div.sticky {
- background-color: white;
-}
diff --git a/components/frontend/src/widgets/HeaderWithDetails.js b/components/frontend/src/widgets/HeaderWithDetails.js
index 5d287a780d..ed0703b358 100644
--- a/components/frontend/src/widgets/HeaderWithDetails.js
+++ b/components/frontend/src/widgets/HeaderWithDetails.js
@@ -1,43 +1,52 @@
-import "./HeaderWithDetails.css"
+import { Accordion, AccordionDetails, AccordionSummary } from "@mui/material"
+import { accordionSummaryClasses } from "@mui/material/AccordionSummary"
+import { string } from "prop-types"
-import { node, object, string } from "prop-types"
-
-import { Header, Segment } from "../semantic_ui_react_wrappers"
import { childrenPropType, settingsPropType } from "../sharedPropTypes"
-import { ExpandButton } from "./buttons/ExpandButton"
+import { Header } from "./Header"
+import { CaretRight } from "./icons"
-export function HeaderWithDetails({ children, className, header, item_uuid, level, style, settings, subheader }) {
- const showDetails = settings.expandedItems.includes(item_uuid)
- const segmentStyle = { paddingLeft: "0px", paddingRight: "0px" }
+export function HeaderWithDetails({ children, header, item_uuid, level, settings, subheader }) {
+ const showDetails = Boolean(settings.expandedItems.includes(item_uuid))
return (
-