Migrate frontend to MUI.

- Settings
- Menubar

Partially addresses #9796.

components/frontend/package.json

@@ -7,6 +7,7 @@
         "@emotion/react": "^11.13.3",
         "@emotion/styled": "^11.13.0",
         "@mui/icons-material": "^6.1.1",
+        "@mui/lab": "^6.0.0-beta.10",
         "@mui/material": "^6.1.1",
         "crypto-js": "^4.2.0",
         "fomantic-ui-css": "^2.9.3",
@@ -15,7 +16,6 @@
         "react": "^18.3.1",
         "react-datepicker": "^7.4.0",
         "react-dom": "^18.3.1",
-        "react-focus-lock": "^2.13.0",
         "react-grid-layout": "^1.4.4",
         "react-hash-link": "1.0.2",
         "react-is": "^18.3.1",

components/frontend/src/AppUI.test.js

@@ -59,6 +59,6 @@ async function renderAppUI() {
 it("resets all settings", async () => {
     history.push("?date_interval=2")
     await act(async () => await renderAppUI())
-    fireEvent.click(screen.getByLabelText("Reset reports overview settings"))
+    fireEvent.click(screen.getByText("Reset settings"))
     expect(history.location.search).toBe("")
 })

components/frontend/src/header_footer/CollapseButton.js

@@ -1,30 +1,23 @@
-import { Button, Icon } from "semantic-ui-react"
+import UnfoldLessIcon from "@mui/icons-material/UnfoldLess"
+import { Button, Tooltip } from "@mui/material"
 
-import { Popup } from "../semantic_ui_react_wrappers"
 import { stringsURLSearchQueryPropType } from "../sharedPropTypes"
 
 export function CollapseButton({ expandedItems }) {
-    const label = "Collapse all headers and metrics"
     return (
-        <Popup
-            on={["hover", "focus"]}
-            trigger={
-                <span // We need a span here to prevent the popup from becoming disabled whenever the button is disabled
+        <Tooltip title={"Collapse all headers and metrics"}>
+            <span>
+                <Button
+                    color="inherit"
+                    disabled={expandedItems.equals([])}
+                    onClick={() => expandedItems.reset()}
+                    startIcon={<UnfoldLessIcon />}
+                    variant="outlined"
                 >
-                    <Button
-                        aria-label={label}
-                        basic
-                        disabled={expandedItems.equals([])}
-                        icon
-                        onClick={() => expandedItems.reset()}
-                        inverted
-                    >
-                        <Icon name="angle double up" /> Collapse all
-                    </Button>
-                </span>
-            }
-            content={label}
-        />
+                    Collapse all
+                </Button>
+            </span>
+        </Tooltip>
     )
 }
 CollapseButton.propTypes = {

components/frontend/src/header_footer/CollapseButton.test.js

@@ -19,7 +19,7 @@ it("resets the expanded items", () => {
     const expandedItems = renderHook(() => useExpandedItemsSearchQuery())
     expect(expandedItems.result.current.value).toStrictEqual(["tab"])
     renderCollapseButton({ expandedItems: expandedItems.result.current })
-    fireEvent.click(screen.getByRole("button", { name: "Collapse all headers and metrics" }))
+    fireEvent.click(screen.getByRole("button", { name: "Collapse all" }))
     expandedItems.rerender()
     expect(expandedItems.result.current.value).toStrictEqual([])
 })
@@ -28,7 +28,7 @@ it("doesn't change the expanded items if there are none", () => {
     const expandedItems = renderHook(() => useExpandedItemsSearchQuery())
     expect(expandedItems.result.current.value).toStrictEqual([])
     renderCollapseButton({ expandedItems: expandedItems.result.current })
-    fireEvent.click(screen.getByRole("button", { name: "Collapse all headers and metrics" }))
+    fireEvent.click(screen.getByRole("button", { name: "Collapse all" }))
     expandedItems.rerender()
     expect(expandedItems.result.current.value).toStrictEqual([])
 })