Migrate SUIR components to MUI.

components/frontend/src/measurement/SourceStatus.js

@@ -15,11 +15,9 @@ export function SourceStatus({ metric, measurement_source }) {
     const source = metric.sources[measurement_source.source_uuid]
     const source_name = getSourceName(source, dataModel)
     const configError = !dataModel.metrics[metric.type].sources.includes(source.type)
-    function source_label(error) {
+    function source_label() {
         return measurement_source.landing_url ? (
-            <HyperLink error={error} url={measurement_source.landing_url}>
-                {source_name}
-            </HyperLink>
+            <HyperLink url={measurement_source.landing_url}>{source_name}</HyperLink>
         ) : (
             source_name
         )
@@ -43,7 +41,7 @@ export function SourceStatus({ metric, measurement_source }) {
                 flowing
                 header={header}
                 hoverable
-                trigger={<Label color="red">{source_label(true)}</Label>}
+                trigger={<Label color="red">{source_label()}</Label>}
             />
         )
     } else {

components/frontend/src/metric/TrendGraph.test.js

@@ -69,7 +69,7 @@ it("renders the measurements with missing values for the scale", () => {
 
 it("renders a placeholder while the measurements are loading", () => {
     const { container } = renderTrendgraph({ loading: "loading" })
-    expect(container.firstChild.className).toContain("placeholder")
+    expect(container.firstChild.className).toContain("MuiSkeleton-rectangular")
     expect(screen.queryAllByText(/Time/).length).toBe(0)
 })
 

components/frontend/src/metric/status.js

@@ -57,11 +57,11 @@ export const STATUS_DESCRIPTION = {
     target_not_met: `${STATUS_NAME.target_not_met}: the measurement value does not meet the target value.`,
     debt_target_met: (
         <>
-            {`${STATUS_NAME.debt_target_met}: the measurement value does not meet the\ntarget value, but this is accepted as `}
+            {`${STATUS_NAME.debt_target_met}: the measurement value does not meet the target value, but this is accepted as `}
             <HyperLink url="https://en.wikipedia.org/wiki/Technical_debt">technical debt</HyperLink>
-            {". The measurement\nvalue does meet the technical debt target."}
+            {". The measurement value does meet the technical debt target."}
         </>
     ),
-    unknown: `${STATUS_NAME.unknown}: the status could not be determined because no sources have\nbeen configured for the metric yet or the measurement data could not\nbe collected.`,
+    unknown: `${STATUS_NAME.unknown}: the status could not be determined because no sources have been configured for the metric yet or the measurement data could not be collected.`,
 }
 export const statusPropType = oneOf(STATUSES)

components/frontend/src/semantic_ui_react_wrappers.js

@@ -1,13 +1,9 @@
-export { Breadcrumb } from "./semantic_ui_react_wrappers/Breadcrumb"
 export { Card } from "./semantic_ui_react_wrappers/Card"
-export { Checkbox } from "./semantic_ui_react_wrappers/Checkbox"
 export { Dropdown } from "./semantic_ui_react_wrappers/Dropdown"
-export { Feed } from "./semantic_ui_react_wrappers/Feed"
 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 { Modal } from "./semantic_ui_react_wrappers/Modal"
 export { Popup } from "./semantic_ui_react_wrappers/Popup"
 export { Segment } from "./semantic_ui_react_wrappers/Segment"
 export { Tab } from "./semantic_ui_react_wrappers/Tab"

components/frontend/src/source/Logo.js

@@ -1,8 +1,7 @@
 import { string } from "prop-types"
-import { Image } from "semantic-ui-react"
 
 export function Logo({ alt, logo }) {
-    return <Image src={`api/internal/logo/${logo}`} alt={`${alt} logo`} size="mini" spaced="right" />
+    return <img src={`api/internal/logo/${logo}`} alt={`${alt} logo`} width="32px" height="32px" />
 }
 Logo.propTypes = {
     alt: string,

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

@@ -158,7 +158,7 @@ it("renders a message if the measurements failed to load", () => {
 
 it("renders a placeholder while the measurements are loading", () => {
     const { container } = renderSourceEntities({ loading: "loading" })
-    expect(container.firstChild.className).toContain("placeholder")
+    expect(container.firstChild.className).toContain("MuiSkeleton-rectangular")
     expect(screen.queryAllByText("AAA").length).toBe(0)
 })
 

components/frontend/src/source/SourceType.js

@@ -1,11 +1,10 @@
-import { Stack, Typography } from "@mui/material"
+import { Chip, 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 { Label } from "../semantic_ui_react_wrappers"
 import { dataModelPropType, sourceTypePropType } from "../sharedPropTypes"
 import { Logo } from "./Logo"
 
@@ -27,10 +26,12 @@ function sourceTypeOption(key, sourceType) {
         value: key,
         content: (
             <Stack direction="row">
-                <Logo logo={key} alt={sourceType.name} />
+                <span style={{ paddingRight: "10px" }}>
+                    <Logo logo={key} alt={sourceType.name} />
+                </span>
                 <p>
                     {sourceType.name}
-                    {sourceType.deprecated && <Label color="yellow">Deprecated</Label>}
+                    {sourceType.deprecated && <Chip color="warning" label="Deprecated" sx={{ marginLeft: "8px" }} />}
                     <Typography variant="body2">{sourceTypeDescription(sourceType)}</Typography>
                 </p>
             </Stack>

components/frontend/src/source/SourceTypeHeader.js

@@ -1,6 +1,7 @@
+import { Chip } from "@mui/material"
 import { string } from "prop-types"
 
-import { Header, Label } from "../semantic_ui_react_wrappers"
+import { Header } from "../semantic_ui_react_wrappers"
 import { sourceTypePropType } from "../sharedPropTypes"
 import { slugify } from "../utils"
 import { ReadTheDocsLink } from "../widgets/ReadTheDocsLink"
@@ -18,7 +19,7 @@ export function SourceTypeHeader({ metricTypeId, sourceTypeId, sourceType }) {
             <Header.Content>
                 <Logo logo={sourceTypeId} alt={sourceType.name} />
                 {sourceType.name}
-                {sourceType.deprecated && <Label color="yellow">Deprecated</Label>}
+                {sourceType.deprecated && <Chip color="warning" label="Deprecated" sx={{ marginLeft: "8px" }} />}
                 <Header.Subheader>
                     {`${sourceTypeDescription(sourceType)} `}
                     <ReadTheDocsLink url={url} />

components/frontend/src/subject/SubjectTableHeader.js

@@ -1,8 +1,7 @@
+import { List, ListItem, ListItemIcon, ListItemText } from "@mui/material"
 import { bool, func, string } from "prop-types"
-import { useContext } from "react"
-import { List, Table } from "semantic-ui-react"
+import { Table } from "semantic-ui-react"
 
-import { DarkMode } from "../context/DarkMode"
 import { StatusIcon } from "../measurement/StatusIcon"
 import { STATUS_DESCRIPTION, STATUSES } from "../metric/status"
 import { Label } from "../semantic_ui_react_wrappers"
@@ -49,21 +48,18 @@ const trendHelp = (
     </>
 )
 
-function statusHelp(darkMode) {
-    const color = darkMode ? "white" : "black"
+function statusHelp() {
     return (
         <>
             <p>The current status of the metric.</p>
             <List>
                 {STATUSES.map((status) => (
-                    <List.Item key={status}>
-                        <List.Icon>
+                    <ListItem key={status} alignItems="flex-start" sx={{ paddingLeft: "8px" }}>
+                        <ListItemIcon sx={{ minWidth: "32px" }}>
                             <StatusIcon status={status} size="small" />
-                        </List.Icon>
-                        <List.Content verticalAlign="middle" style={{ color: color, whiteSpace: "pre" }}>
-                            {STATUS_DESCRIPTION[status]}
-                        </List.Content>
-                    </List.Item>
+                        </ListItemIcon>
+                        <ListItemText>{STATUS_DESCRIPTION[status]}</ListItemText>
+                    </ListItem>
                 ))}
             </List>
             <p>Hover over the status to see how long the metric has had the current status.</p>
@@ -286,7 +282,6 @@ MeasurementHeaderCells.propTypes = {
 }
 
 export function SubjectTableHeader({ columnDates, handleSort, settings }) {
-    const darkMode = useContext(DarkMode)
     const sortProps = {
         sortColumn: settings.sortColumn,
         sortDirection: settings.sortDirection,
@@ -311,7 +306,7 @@ export function SubjectTableHeader({ columnDates, handleSort, settings }) {
                         column="status"
                         label="Status"
                         textAlign="center"
-                        help={statusHelp(darkMode)}
+                        help={statusHelp()}
                         {...sortProps}
                     />
                 )}

components/frontend/src/widgets/HyperLink.js

@@ -1,31 +1,24 @@
-import "./HyperLink.css"
+import { Link } from "@mui/material"
+import { string } from "prop-types"
 
-import { bool, string } from "prop-types"
-import { useContext } from "react"
-
-import { DarkMode } from "../context/DarkMode"
 import { childrenPropType } from "../sharedPropTypes"
 
-export function HyperLink({ url, children, error }) {
-    let className = useContext(DarkMode) ? "inverted" : ""
-    if (error) {
-        className += " error"
-    }
+export function HyperLink({ url, children }) {
     return (
-        <a
-            className={className}
+        <Link
+            color="inherit"
             href={url}
             onClick={(event) => event.stopPropagation()}
-            rel="noopener noreferrer"
+            rel="noreferrer"
             target="_blank"
             title="Opens new window or tab"
+            underline="always"
         >
             {children}
-        </a>
+        </Link>
     )
 }
 HyperLink.propTypes = {
     url: string,
     children: childrenPropType,
-    error: bool,
 }

components/frontend/src/widgets/Hyperlink.test.js

@@ -1,31 +1,12 @@
 import { fireEvent, render, screen } from "@testing-library/react"
 
-import { DarkMode } from "../context/DarkMode"
 import { HyperLink } from "./HyperLink"
 
 it("shows the hyperlink", () => {
     render(<HyperLink url="https://url">Link</HyperLink>)
     expect(screen.queryAllByText("Link").length).toBe(1)
 })
 
-it("is grey in dark mode", () => {
-    const { container } = render(
-        <DarkMode.Provider value={true}>
-            <HyperLink url="https://url">Link</HyperLink>
-        </DarkMode.Provider>,
-    )
-    expect(container.firstChild.className).toEqual(expect.stringContaining("inverted"))
-})
-
-it("is can be in error mode", () => {
-    const { container } = render(
-        <HyperLink url="https://url" error>
-            Link
-        </HyperLink>,
-    )
-    expect(container.firstChild.className).toEqual(expect.stringContaining("error"))
-})
-
 it("does not propagate a click event", () => {
     const eventHandler = jest.fn()
     render(