Migrate components from SUIR to MUI.

components/frontend/src/fields/DateInput.js

@@ -3,18 +3,19 @@ import "./DateInput.css"
 import { bool, func, string } from "prop-types"
 
 import { ReadOnlyOrEditable } from "../context/Permissions"
-import { Form, Icon, Label } from "../semantic_ui_react_wrappers"
+import { Form, Label } from "../semantic_ui_react_wrappers"
 import { labelPropType, permissionsPropType } from "../sharedPropTypes"
 import { toISODateStringInCurrentTZ } from "../utils"
 import { DatePicker } from "../widgets/DatePicker"
+import { CalendarIcon } from "../widgets/icons"
 import { ReadOnlyInput } from "./ReadOnlyInput"
 
 function EditableDateInput({ ariaLabelledBy, label, placeholder, required, set_value, value }) {
     value = value ? new Date(value) : null
     return (
         <Form.Input error={required && !value} label={label} labelPosition="left" required={required}>
-            <Label>
-                <Icon fitted name="calendar" />
+            <Label style={{ padding: "8px" }}>
+                <CalendarIcon />
             </Label>
             <DatePicker
                 ariaLabelledBy={ariaLabelledBy}

components/frontend/src/issue/IssuesRows.js

@@ -9,7 +9,8 @@ import { ErrorMessage } from "../errorMessage"
 import { MultipleChoiceInput } from "../fields/MultipleChoiceInput"
 import { metricPropType, reportPropType } from "../sharedPropTypes"
 import { getMetricIssueIds } from "../utils"
-import { ActionButton } from "../widgets/Button"
+import { ActionButton } from "../widgets/buttons/ActionButton"
+import { AddItemIcon } from "../widgets/icons"
 import { LabelWithHelp } from "../widgets/LabelWithHelp"
 import { showMessage } from "../widgets/toast"
 
@@ -19,7 +20,7 @@ function CreateIssueButton({ issueTrackerConfigured, issueTrackerInstruction, me
             action="Create new"
             disabled={!issueTrackerConfigured}
             fluid
-            icon="plus"
+            icon={<AddItemIcon />}
             itemType="issue"
             onClick={() => add_metric_issue(metric_uuid, reload)}
             popup={

components/frontend/src/measurement/MeasurementValue.js

@@ -4,7 +4,7 @@ import { bool, string } from "prop-types"
 import { useContext } from "react"
 
 import { DataModel } from "../context/DataModel"
-import { Icon, Label, Message, Popup } from "../semantic_ui_react_wrappers"
+import { Label, Message, Popup } from "../semantic_ui_react_wrappers"
 import { datePropType, measurementPropType, metricPropType } from "../sharedPropTypes"
 import { IGNORABLE_SOURCE_ENTITY_STATUSES, SOURCE_ENTITY_STATUS_NAME } from "../source/source_entity_status"
 import {
@@ -17,13 +17,14 @@ import {
     isMeasurementStale,
     sum,
 } from "../utils"
+import { IgnoreIcon, LoadingIcon } from "../widgets/icons"
 import { TimeAgoWithDate } from "../widgets/TimeAgoWithDate"
 import { WarningMessage } from "../widgets/WarningMessage"
 
 function measurementValueLabel(hasIgnoredEntities, stale, updating, value) {
     const measurementValue = hasIgnoredEntities ? (
         <>
-            <Icon name="hide" /> {value}
+            <IgnoreIcon /> {value}
         </>
     ) : (
         value
@@ -34,7 +35,8 @@ function measurementValueLabel(hasIgnoredEntities, stale, updating, value) {
     if (updating) {
         return (
             <Label color="yellow">
-                <Icon loading name="hourglass" /> {measurementValue}
+                <LoadingIcon />
+                {measurementValue}
             </Label>
         )
     }
@@ -124,7 +126,7 @@ export function MeasurementValue({ metric, reportDate }) {
                     info
                     header={
                         <span>
-                            <Icon name="hide" /> {`Ignored ${unit}`}
+                            <IgnoreIcon /> {`Ignored ${unit}`}
                         </span>
                     }
                     content={ignoredEntitiesMessage(metric.latest_measurement, unit)}

components/frontend/src/measurement/MeasurementValue.test.js

@@ -56,7 +56,7 @@ it("renders an outdated value", async () => {
     })
     const measurementValue = screen.getByText(/1/)
     expect(measurementValue.className).toContain("yellow")
-    expect(measurementValue.children[0].className).toContain("loading")
+    expect(screen.getAllByTestId("LoopIcon").length).toBe(1)
     await userEvent.hover(measurementValue)
     await waitFor(() => {
         expect(screen.queryByText(/Latest measurement out of date/)).not.toBe(null)
@@ -74,7 +74,7 @@ it("renders a value for which a measurement was requested", async () => {
     })
     const measurementValue = screen.getByText(/1/)
     expect(measurementValue.className).toContain("yellow")
-    expect(measurementValue.children[0].className).toContain("loading")
+    expect(screen.getAllByTestId("LoopIcon").length).toBe(1)
     await userEvent.hover(measurementValue)
     await waitFor(() => {
         expect(screen.queryByText(/Measurement requested/)).not.toBe(null)
@@ -90,6 +90,7 @@ it("renders a value for which a measurement was requested, but which is now up t
     })
     const measurementValue = screen.getByText(/1/)
     expect(measurementValue.className).not.toContain("yellow")
+    expect(screen.queryAllByTestId("LoopIcon").length).toBe(0)
     await userEvent.hover(measurementValue)
     await waitFor(() => {
         expect(screen.queryByText(/Measurement requested/)).toBe(null)

components/frontend/src/metric/MetricDetails.js

@@ -20,7 +20,11 @@ import { Logo } from "../source/Logo"
 import { SourceEntities } from "../source/SourceEntities"
 import { Sources } from "../source/Sources"
 import { getSourceName, isMeasurementRequested } from "../utils"
-import { ActionButton, DeleteButton, PermLinkButton, ReorderButtonGroup } from "../widgets/Button"
+import { ActionButton } from "../widgets/buttons/ActionButton"
+import { DeleteButton } from "../widgets/buttons/DeleteButton"
+import { PermLinkButton } from "../widgets/buttons/PermLinkButton"
+import { ReorderButtonGroup } from "../widgets/buttons/ReorderButtonGroup"
+import { RefreshIcon } from "../widgets/icons"
 import { changelogTabPane, configurationTabPane, tabPane } from "../widgets/TabPane"
 import { showMessage } from "../widgets/toast"
 import { MetricConfigurationParameters } from "./MetricConfigurationParameters"
@@ -34,7 +38,7 @@ function RequestMeasurementButton({ metric, metric_uuid, reload }) {
         <ActionButton
             action="Measure"
             disabled={measurementRequested}
-            icon="refresh"
+            icon={<RefreshIcon />}
             itemType="metric"
             loading={measurementRequested}
             onClick={() => set_metric_attribute(metric_uuid, "measurement_requested", new Date().toISOString(), reload)}

components/frontend/src/metric/MetricTypeHeader.js

@@ -1,9 +1,7 @@
-import { Icon } from "semantic-ui-react"
-
 import { Header } from "../semantic_ui_react_wrappers"
 import { metricTypePropType } from "../sharedPropTypes"
 import { slugify } from "../utils"
-import { HyperLink } from "../widgets/HyperLink"
+import { ReadTheDocsLink } from "../widgets/ReadTheDocsLink"
 
 export function MetricTypeHeader({ metricType }) {
     const url = `https://quality-time.readthedocs.io/en/v${process.env.REACT_APP_VERSION}/reference.html${slugify(metricType.name)}`
@@ -15,10 +13,7 @@ export function MetricTypeHeader({ metricType }) {
             <Header.Content>
                 {metricType.name}
                 <Header.Subheader>
-                    {metricType.description}{" "}
-                    <HyperLink url={url}>
-                        Read the Docs <Icon name="external" link />
-                    </HyperLink>
+                    {metricType.description} <ReadTheDocsLink url={url} />
                     {howToConfigure}
                 </Header.Subheader>
             </Header.Content>

components/frontend/src/notification/NotificationDestinations.js

@@ -10,7 +10,8 @@ import { EDIT_REPORT_PERMISSION, ReadOnlyOrEditable } from "../context/Permissio
 import { StringInput } from "../fields/StringInput"
 import { Message, Segment } from "../semantic_ui_react_wrappers"
 import { destinationPropType } from "../sharedPropTypes"
-import { AddButton, DeleteButton } from "../widgets/Button"
+import { AddButton } from "../widgets/buttons/AddButton"
+import { DeleteButton } from "../widgets/buttons/DeleteButton"
 import { HyperLink } from "../widgets/HyperLink"
 import { LabelWithHelp } from "../widgets/LabelWithHelp"
 

components/frontend/src/report/ReportTitle.js

@@ -14,7 +14,8 @@ 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"
-import { DeleteButton, PermLinkButton } from "../widgets/Button"
+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"

components/frontend/src/report/ReportsOverview.js

@@ -16,7 +16,8 @@ import {
 } from "../sharedPropTypes"
 import { Subjects } from "../subject/Subjects"
 import { getReportsTags } from "../utils"
-import { AddButton, CopyButton } from "../widgets/Button"
+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"

components/frontend/src/source/Source.js

@@ -17,7 +17,8 @@ import {
     stringsPropType,
 } from "../sharedPropTypes"
 import { getMetricName, getSourceName } from "../utils"
-import { DeleteButton, ReorderButtonGroup } from "../widgets/Button"
+import { DeleteButton } from "../widgets/buttons/DeleteButton"
+import { ReorderButtonGroup } from "../widgets/buttons/ReorderButtonGroup"
 import { HyperLink } from "../widgets/HyperLink"
 import { changelogTabPane, configurationTabPane } from "../widgets/TabPane"
 import { SourceParameters } from "./SourceParameters"

components/frontend/src/source/SourceEntities.js

@@ -1,11 +1,12 @@
 import "./SourceEntities.css"
 
+import HelpIcon from "@mui/icons-material/Help"
 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 { Button, Icon, Popup, Table } from "../semantic_ui_react_wrappers"
+import { Button, Popup, Table } from "../semantic_ui_react_wrappers"
 import {
     alignmentPropType,
     childrenPropType,
@@ -146,7 +147,7 @@ function EntityAttributeHeaderCell({ entityAttribute, ...sortProps }) {
                     trigger={
                         <span>
                             &nbsp;
-                            <Icon role="tooltip" aria-label="help" tabIndex="0" name="help circle" />
+                            <HelpIcon fontSize="inherit" sx={{ verticalAlign: "middle" }} tabIndex="0" />
                         </span>
                     }
                     content={entityAttribute.help}

components/frontend/src/source/SourceEntities.test.js

@@ -281,7 +281,7 @@ it("sorts the entities by minutes", async () => {
 
 it("shows help", async () => {
     renderSourceEntities()
-    await userEvent.hover(screen.queryByRole("tooltip", { name: /help/ }))
+    await userEvent.hover(screen.queryByTestId("HelpIcon"))
     await waitFor(() => {
         expect(screen.queryByText(/help text/)).not.toBe(null)
     })

components/frontend/src/source/SourceParameter.test.js

@@ -152,7 +152,7 @@ it("renders a help url", () => {
 
 it("renders a help text", async () => {
     renderSourceParameter({ help: "Help text" })
-    await userEvent.hover(screen.queryByTestId("help-icon"))
+    await userEvent.hover(screen.queryByTestId("HelpIcon"))
     await waitFor(() => {
         expect(screen.queryAllByText(/Help text/).length).toBe(1)
     })

components/frontend/src/source/SourceTypeHeader.js

@@ -1,9 +1,9 @@
 import { string } from "prop-types"
 
-import { Header, Icon, Label } from "../semantic_ui_react_wrappers"
+import { Header, Label } from "../semantic_ui_react_wrappers"
 import { sourceTypePropType } from "../sharedPropTypes"
 import { slugify } from "../utils"
-import { HyperLink } from "../widgets/HyperLink"
+import { ReadTheDocsLink } from "../widgets/ReadTheDocsLink"
 import { Logo } from "./Logo"
 import { sourceTypeDescription } from "./SourceType"
 
@@ -21,9 +21,7 @@ export function SourceTypeHeader({ metricTypeId, sourceTypeId, sourceType }) {
                 {sourceType.deprecated && <Label color="yellow">Deprecated</Label>}
                 <Header.Subheader>
                     {`${sourceTypeDescription(sourceType)} `}
-                    <HyperLink url={url}>
-                        Read the Docs <Icon name="external" link />
-                    </HyperLink>
+                    <ReadTheDocsLink url={url} />
                     {howToConfigure}
                 </Header.Subheader>
             </Header.Content>

components/frontend/src/source/Sources.js

@@ -14,7 +14,9 @@ import {
     stringsPropType,
 } from "../sharedPropTypes"
 import { pluralize } from "../utils"
-import { AddDropdownButton, CopyButton, MoveButton } from "../widgets/Button"
+import { AddDropdownButton } from "../widgets/buttons/AddDropdownButton"
+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 { Source } from "./Source"

components/frontend/src/subject/SubjectTableFooter.js

@@ -7,7 +7,9 @@ import { DataModel } from "../context/DataModel"
 import { EDIT_REPORT_PERMISSION, ReadOnlyOrEditable } from "../context/Permissions"
 import { allMetricTypeOptions, metricTypeOptions, usedMetricTypes } from "../metric/MetricType"
 import { reportsPropType, subjectPropType } from "../sharedPropTypes"
-import { AddDropdownButton, CopyButton, MoveButton } from "../widgets/Button"
+import { AddDropdownButton } from "../widgets/buttons/AddDropdownButton"
+import { CopyButton } from "../widgets/buttons/CopyButton"
+import { MoveButton } from "../widgets/buttons/MoveButton"
 import { metric_options } from "../widgets/menu_options"
 
 function SubjectTableFooterButtonRow({ subject, subjectUuid, reload, reports, stopFilteringAndSorting }) {