From e5f99323dc662942f83be17fabafa740a8ca80f1 Mon Sep 17 00:00:00 2001
From: Frank Niessink <frank@niessink.com>
Date: Tue, 17 Dec 2024 16:09:10 +0100
Subject: [PATCH] Migrate components from SUIR to MUI.

---
 components/frontend/src/fields/DateInput.js   |   7 +-
 components/frontend/src/issue/IssuesRows.js   |  11 +-
 .../src/measurement/MeasurementValue.js       |  10 +-
 .../src/measurement/MeasurementValue.test.js  |   5 +-
 .../frontend/src/metric/MetricDetails.js      |  42 +-
 .../frontend/src/metric/MetricDetails.test.js |  10 +-
 components/frontend/src/metric/MetricType.js  |   9 +-
 .../frontend/src/metric/MetricTypeHeader.js   |   9 +-
 .../notification/NotificationDestinations.js  |  49 ++-
 components/frontend/src/report/ReportTitle.js |  26 +-
 .../frontend/src/report/ReportsOverview.js    |  24 +-
 .../src/report/ReportsOverview.test.js        |   2 +-
 .../src/semantic_ui_react_wrappers.js         |   1 -
 .../src/semantic_ui_react_wrappers/Icon.js    |  21 -
 components/frontend/src/source/Source.js      |  36 +-
 .../frontend/src/source/SourceEntities.js     |   5 +-
 .../src/source/SourceEntities.test.js         |   2 +-
 .../src/source/SourceParameter.test.js        |   2 +-
 components/frontend/src/source/SourceType.js  |  15 +-
 .../frontend/src/source/SourceTypeHeader.js   |   8 +-
 components/frontend/src/source/Sources.js     |   9 +-
 .../frontend/src/subject/SubjectTable.test.js |   3 +-
 .../src/subject/SubjectTableFooter.js         |  59 +--
 .../src/subject/SubjectTableFooter.test.js    |   1 +
 .../src/subject/SubjectTableHeader.js         |  64 +--
 .../src/subject/SubjectTableHeader.test.js    |  12 +-
 .../frontend/src/subject/SubjectTitle.js      |  25 +-
 .../frontend/src/subject/SubjectTitle.test.js |   2 +-
 .../frontend/src/subject/SubjectType.js       |  28 +-
 .../frontend/src/subject/SubjectsButtonRow.js |  63 +--
 .../src/subject/SubjectsButtonRow.test.js     |   4 +-
 components/frontend/src/widgets/Button.js     | 400 ------------------
 .../frontend/src/widgets/Button.test.js       | 367 ----------------
 components/frontend/src/widgets/ButtonRow.js  |  17 +
 .../frontend/src/widgets/HeaderWithDetails.js |   7 +-
 .../frontend/src/widgets/LabelWithHelp.js     |   2 +-
 .../src/widgets/LabelWithHelp.test.js         |   2 +-
 .../frontend/src/widgets/ReadTheDocsLink.js   |  15 +
 components/frontend/src/widgets/TabPane.js    |  17 +-
 .../frontend/src/widgets/TabPane.test.js      |   5 +-
 .../src/widgets/TableRowWithDetails.js        |   6 +-
 .../buttons/ActionAndItemPickerButton.js      |  67 +++
 .../src/widgets/buttons/ActionButton.js       |  27 ++
 .../frontend/src/widgets/buttons/AddButton.js |  20 +
 .../src/widgets/buttons/AddButton.test.js     |   8 +
 .../src/widgets/buttons/AddDropdownButton.js  | 150 +++++++
 .../widgets/buttons/AddDropdownButton.test.js | 145 +++++++
 .../src/widgets/buttons/CopyButton.js         |   6 +
 .../src/widgets/buttons/CopyButton.test.js    |  69 +++
 .../src/widgets/buttons/DeleteButton.js       |  19 +
 .../src/widgets/buttons/DeleteButton.test.js  |   8 +
 .../src/widgets/buttons/MoveButton.js         |   6 +
 .../src/widgets/buttons/MoveButton.test.js    |  10 +
 .../src/widgets/buttons/PermLinkButton.js     |  32 ++
 .../widgets/buttons/PermLinkButton.test.js    |  39 ++
 .../src/widgets/buttons/ReorderButtonGroup.js |  47 ++
 .../buttons/ReorderButtonGroup.test.js        |  21 +
 components/frontend/src/widgets/icons.js      |  73 ++++
 58 files changed, 1100 insertions(+), 1049 deletions(-)
 delete mode 100644 components/frontend/src/semantic_ui_react_wrappers/Icon.js
 delete mode 100644 components/frontend/src/widgets/Button.js
 delete mode 100644 components/frontend/src/widgets/Button.test.js
 create mode 100644 components/frontend/src/widgets/ButtonRow.js
 create mode 100644 components/frontend/src/widgets/ReadTheDocsLink.js
 create mode 100644 components/frontend/src/widgets/buttons/ActionAndItemPickerButton.js
 create mode 100644 components/frontend/src/widgets/buttons/ActionButton.js
 create mode 100644 components/frontend/src/widgets/buttons/AddButton.js
 create mode 100644 components/frontend/src/widgets/buttons/AddButton.test.js
 create mode 100644 components/frontend/src/widgets/buttons/AddDropdownButton.js
 create mode 100644 components/frontend/src/widgets/buttons/AddDropdownButton.test.js
 create mode 100644 components/frontend/src/widgets/buttons/CopyButton.js
 create mode 100644 components/frontend/src/widgets/buttons/CopyButton.test.js
 create mode 100644 components/frontend/src/widgets/buttons/DeleteButton.js
 create mode 100644 components/frontend/src/widgets/buttons/DeleteButton.test.js
 create mode 100644 components/frontend/src/widgets/buttons/MoveButton.js
 create mode 100644 components/frontend/src/widgets/buttons/MoveButton.test.js
 create mode 100644 components/frontend/src/widgets/buttons/PermLinkButton.js
 create mode 100644 components/frontend/src/widgets/buttons/PermLinkButton.test.js
 create mode 100644 components/frontend/src/widgets/buttons/ReorderButtonGroup.js
 create mode 100644 components/frontend/src/widgets/buttons/ReorderButtonGroup.test.js
 create mode 100644 components/frontend/src/widgets/icons.js

diff --git a/components/frontend/src/fields/DateInput.js b/components/frontend/src/fields/DateInput.js
index 1f6ed54a7c..a987f1a7db 100644
--- a/components/frontend/src/fields/DateInput.js
+++ b/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}
diff --git a/components/frontend/src/issue/IssuesRows.js b/components/frontend/src/issue/IssuesRows.js
index e8fe1442c5..6f2960689d 100644
--- a/components/frontend/src/issue/IssuesRows.js
+++ b/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"
 
@@ -18,8 +19,7 @@ function CreateIssueButton({ issueTrackerConfigured, issueTrackerInstruction, me
         <ActionButton
             action="Create new"
             disabled={!issueTrackerConfigured}
-            fluid
-            icon="plus"
+            icon={<AddItemIcon />}
             itemType="issue"
             onClick={() => add_metric_issue(metric_uuid, reload)}
             popup={
@@ -28,7 +28,6 @@ function CreateIssueButton({ issueTrackerConfigured, issueTrackerInstruction, me
                     tracked issue identifiers.{issueTrackerInstruction}
                 </>
             }
-            position="top center"
         />
     )
 }
@@ -127,7 +126,7 @@ export function IssuesRows({ metric, metric_uuid, reload, report, target }) {
                     }
                     editableComponent={
                         <>
-                            <Grid.Column width={3} verticalAlign="bottom">
+                            <Grid.Column width={2} verticalAlign="bottom">
                                 <CreateIssueButton
                                     issueTrackerConfigured={issueTrackerConfigured}
                                     issueTrackerInstruction={issueTrackerInstruction}
@@ -136,7 +135,7 @@ export function IssuesRows({ metric, metric_uuid, reload, report, target }) {
                                     reload={reload}
                                 />
                             </Grid.Column>
-                            <Grid.Column width={13}>
+                            <Grid.Column width={14}>
                                 <IssueIdentifiers {...issueIdentifiersProps} />
                             </Grid.Column>
                         </>
diff --git a/components/frontend/src/measurement/MeasurementValue.js b/components/frontend/src/measurement/MeasurementValue.js
index 19349b78ff..f9d7e58c63 100644
--- a/components/frontend/src/measurement/MeasurementValue.js
+++ b/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)}
diff --git a/components/frontend/src/measurement/MeasurementValue.test.js b/components/frontend/src/measurement/MeasurementValue.test.js
index 6b0a2b984e..1af6c4721e 100644
--- a/components/frontend/src/measurement/MeasurementValue.test.js
+++ b/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)
diff --git a/components/frontend/src/metric/MetricDetails.js b/components/frontend/src/metric/MetricDetails.js
index edf3576c4e..56cc768851 100644
--- a/components/frontend/src/metric/MetricDetails.js
+++ b/components/frontend/src/metric/MetricDetails.js
@@ -1,3 +1,6 @@
+import MoneyIcon from "@mui/icons-material/Money"
+import ShowChartIcon from "@mui/icons-material/ShowChart"
+import StorageIcon from "@mui/icons-material/Storage"
 import { bool, func, string } from "prop-types"
 import { useContext, useEffect, useState } from "react"
 
@@ -20,7 +23,12 @@ 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 { ButtonRow } from "../widgets/ButtonRow"
+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 +42,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)}
@@ -48,12 +56,21 @@ RequestMeasurementButton.propTypes = {
     reload: func,
 }
 
-function Buttons({ isFirstMetric, isLastMetric, metric, metric_uuid, reload, stopFilteringAndSorting, url }) {
+function MetricDetailsButtonRow({
+    isFirstMetric,
+    isLastMetric,
+    metric,
+    metric_uuid,
+    reload,
+    stopFilteringAndSorting,
+    url,
+}) {
+    const deleteButton = <DeleteButton itemType="metric" onClick={() => delete_metric(metric_uuid, reload)} />
     return (
         <ReadOnlyOrEditable
             requiredPermissions={[EDIT_REPORT_PERMISSION]}
             editableComponent={
-                <div style={{ marginTop: "20px" }}>
+                <ButtonRow rightButton={deleteButton}>
                     <ReorderButtonGroup
                         first={isFirstMetric}
                         last={isLastMetric}
@@ -66,13 +83,12 @@ function Buttons({ isFirstMetric, isLastMetric, metric, metric_uuid, reload, sto
                     />
                     <PermLinkButton itemType="metric" url={url} />
                     <RequestMeasurementButton metric={metric} metric_uuid={metric_uuid} reload={reload} />
-                    <DeleteButton itemType="metric" onClick={() => delete_metric(metric_uuid, reload)} />
-                </div>
+                </ButtonRow>
             }
         />
     )
 }
-Buttons.propTypes = {
+MetricDetailsButtonRow.propTypes = {
     isFirstMetric: bool,
     isLastMetric: bool,
     metric: metricPropType,
@@ -131,9 +147,7 @@ export function MetricDetails({
     let anyWarning = Object.values(metric.sources).some((source) => dataModel.sources[source.type].deprecated)
     anyError =
         anyError ||
-        Object.values(metric.sources ?? {}).some(
-            (source) => !dataModel.metrics[metric.type].sources.includes(source.type),
-        )
+        Object.values(metric.sources).some((source) => !dataModel.metrics[metric.type].sources.includes(source.type))
     const metricUrl = `${window.location.href.split("#")[0]}#${metric_uuid}`
     let panes = []
     panes.push(
@@ -157,18 +171,18 @@ export function MetricDetails({
                 changed_fields={changed_fields}
                 reload={reload}
             />,
-            { iconName: "server", error: Boolean(anyError), warning: Boolean(anyWarning) },
+            { icon: <StorageIcon />, error: Boolean(anyError), warning: Boolean(anyWarning) },
         ),
         tabPane(
             "Technical debt",
             <MetricDebtParameters metric={metric} metric_uuid={metric_uuid} report={report} reload={reload} />,
-            { iconName: "money" },
+            { icon: <MoneyIcon /> },
         ),
         changelogTabPane(<ChangeLog timestamp={report.timestamp} metric_uuid={metric_uuid} />),
         tabPane(
             "Trend graph",
             <TrendGraph metric={metric} measurements={measurements} loading={measurementsStatus} />,
-            { iconName: "linegraph" },
+            { icon: <ShowChartIcon /> },
         ),
     )
     Object.entries(metric.sources).forEach(([source_uuid, source]) => {
@@ -198,7 +212,7 @@ export function MetricDetails({
                 onTabChange={tabChangeHandler(expandedItems, metric_uuid)}
                 panes={panes}
             />
-            <Buttons
+            <MetricDetailsButtonRow
                 metric={metric}
                 metric_uuid={metric_uuid}
                 isFirstMetric={isFirstMetric}
diff --git a/components/frontend/src/metric/MetricDetails.test.js b/components/frontend/src/metric/MetricDetails.test.js
index 7c50e499f0..2e1de91a2c 100644
--- a/components/frontend/src/metric/MetricDetails.test.js
+++ b/components/frontend/src/metric/MetricDetails.test.js
@@ -28,12 +28,12 @@ const report = {
                     type: "violations",
                     sources: {
                         source_uuid: {
-                            type: "source_type",
+                            type: "sonarqube",
                             entities: [],
                         },
                     },
                 },
-                metric_uuid2: {},
+                metric_uuid2: { name: "Metric 2", sources: {} },
             },
         },
     },
@@ -41,7 +41,7 @@ const report = {
 
 const dataModel = {
     sources: {
-        source_type: {
+        sonarqube: {
             name: "The source",
             deprecated: true,
             parameters: {},
@@ -54,7 +54,7 @@ const dataModel = {
             entities: { violations: { name: "Attribute", attributes: [] } },
         },
     },
-    metrics: { violations: { direction: "<", tags: [], sources: ["source_type"] } },
+    metrics: { violations: { direction: "<", tags: [], sources: ["sonarqube"] } },
     subjects: { subject_type: { metrics: ["violations"] } },
 }
 
@@ -175,7 +175,7 @@ it("displays whether sources have warnings", async () => {
 it("moves the metric", async () => {
     const mockCallback = jest.fn()
     await renderMetricDetails(mockCallback)
-    await act(async () => fireEvent.click(screen.getByLabelText(/Move metric to the last row/)))
+    await act(async () => fireEvent.click(screen.getByRole("button", { name: /Move metric to the last row/ })))
     expect(mockCallback).toHaveBeenCalled()
     expect(measurement_api.get_metric_measurements).toHaveBeenCalled()
 })
diff --git a/components/frontend/src/metric/MetricType.js b/components/frontend/src/metric/MetricType.js
index 6ae6a57a47..f0a8d1543d 100644
--- a/components/frontend/src/metric/MetricType.js
+++ b/components/frontend/src/metric/MetricType.js
@@ -1,3 +1,4 @@
+import { Stack, Typography } from "@mui/material"
 import { func, string } from "prop-types"
 import { useContext } from "react"
 
@@ -5,7 +6,6 @@ import { set_metric_attribute } from "../api/metric"
 import { DataModel } from "../context/DataModel"
 import { EDIT_REPORT_PERMISSION } from "../context/Permissions"
 import { SingleChoiceInput } from "../fields/SingleChoiceInput"
-import { Header } from "../semantic_ui_react_wrappers"
 import { getSubjectTypeMetrics } from "../utils"
 
 export function metricTypeOption(key, metricType) {
@@ -13,7 +13,12 @@ export function metricTypeOption(key, metricType) {
         key: key,
         text: metricType.name,
         value: key,
-        content: <Header as="h4" content={metricType.name} subheader={metricType.description} />,
+        content: (
+            <Stack direction="column">
+                {metricType.name}
+                <Typography variant="body2">{metricType.description}</Typography>
+            </Stack>
+        ),
     }
 }
 
diff --git a/components/frontend/src/metric/MetricTypeHeader.js b/components/frontend/src/metric/MetricTypeHeader.js
index 76ff362f4e..bc91a5c021 100644
--- a/components/frontend/src/metric/MetricTypeHeader.js
+++ b/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>
diff --git a/components/frontend/src/notification/NotificationDestinations.js b/components/frontend/src/notification/NotificationDestinations.js
index 24e8d2d5c4..28ce09fc8e 100644
--- a/components/frontend/src/notification/NotificationDestinations.js
+++ b/components/frontend/src/notification/NotificationDestinations.js
@@ -1,3 +1,4 @@
+import { Stack } from "@mui/material"
 import { func, objectOf, string } from "prop-types"
 import { Grid } from "semantic-ui-react"
 
@@ -8,9 +9,11 @@ import {
 } from "../api/notification"
 import { EDIT_REPORT_PERMISSION, ReadOnlyOrEditable } from "../context/Permissions"
 import { StringInput } from "../fields/StringInput"
-import { Message, Segment } from "../semantic_ui_react_wrappers"
+import { Message } from "../semantic_ui_react_wrappers"
 import { destinationPropType } from "../sharedPropTypes"
-import { AddButton, DeleteButton } from "../widgets/Button"
+import { ButtonRow } from "../widgets/ButtonRow"
+import { AddButton } from "../widgets/buttons/AddButton"
+import { DeleteButton } from "../widgets/buttons/DeleteButton"
 import { HyperLink } from "../widgets/HyperLink"
 import { LabelWithHelp } from "../widgets/LabelWithHelp"
 
@@ -19,7 +22,7 @@ function NotificationDestination({ destination, destination_uuid, reload, report
         "https://docs.microsoft.com/en-us/microsoftteams/platform/webhooks-and-connectors/how-to/add-incoming-webhook"
     const teams_hyperlink = <HyperLink url={help_url}>Microsoft Teams</HyperLink>
     return (
-        <Segment vertical key={destination_uuid}>
+        <Stack key={destination_uuid} direction="column" spacing={2}>
             <Grid stackable>
                 <Grid.Row columns={2}>
                     <Grid.Column width={6}>
@@ -61,23 +64,21 @@ function NotificationDestination({ destination, destination_uuid, reload, report
                         />
                     </Grid.Column>
                 </Grid.Row>
-                <ReadOnlyOrEditable
-                    requiredPermissions={[EDIT_REPORT_PERMISSION]}
-                    editableComponent={
-                        <Grid.Row>
-                            <Grid.Column>
-                                <DeleteButton
-                                    itemType="notification destination"
-                                    onClick={() =>
-                                        delete_notification_destination(report_uuid, destination_uuid, reload)
-                                    }
-                                />
-                            </Grid.Column>
-                        </Grid.Row>
-                    }
-                />
             </Grid>
-        </Segment>
+            <ReadOnlyOrEditable
+                requiredPermissions={[EDIT_REPORT_PERMISSION]}
+                editableComponent={
+                    <ButtonRow
+                        rightButton={
+                            <DeleteButton
+                                itemType="notification destination"
+                                onClick={() => delete_notification_destination(report_uuid, destination_uuid, reload)}
+                            />
+                        }
+                    />
+                }
+            />
+        </Stack>
     )
 }
 NotificationDestination.propTypes = {
@@ -114,12 +115,10 @@ export function NotificationDestinations({ destinations, reload, report_uuid })
                 key="1"
                 requiredPermissions={[EDIT_REPORT_PERMISSION]}
                 editableComponent={
-                    <Segment vertical>
-                        <AddButton
-                            itemType="notification destination"
-                            onClick={() => add_notification_destination(report_uuid, reload)}
-                        />
-                    </Segment>
+                    <AddButton
+                        itemType="notification destination"
+                        onClick={() => add_notification_destination(report_uuid, reload)}
+                    />
                 }
             />
         </>
diff --git a/components/frontend/src/report/ReportTitle.js b/components/frontend/src/report/ReportTitle.js
index 3f21c8eded..8d4dfdbfa8 100644
--- a/components/frontend/src/report/ReportTitle.js
+++ b/components/frontend/src/report/ReportTitle.js
@@ -14,7 +14,9 @@ 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 { 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"
@@ -141,26 +143,22 @@ ReactionTimes.propTypes = {
     report: reportPropType,
 }
 
-function ButtonRow({ report_uuid, openReportsOverview, url }) {
+function ReportTitleButtonRow({ report_uuid, openReportsOverview, url }) {
+    const deleteButton = (
+        <DeleteButton itemType="report" onClick={() => delete_report(report_uuid, openReportsOverview)} />
+    )
     return (
         <ReadOnlyOrEditable
             requiredPermissions={[EDIT_REPORT_PERMISSION]}
             editableComponent={
-                <span
-                    /* The delete button needs to be in a span with an explicit height because otherwise it is
-                       considered to have a height of zero. Maybe because it is floated right? Button rows that have
-                       buttons on the left-hand side don't have this problem.
-                    */
-                    style={{ height: "36px", width: "100%", display: "block" }}
-                >
+                <ButtonRow rightButton={deleteButton}>
                     <PermLinkButton itemType="report" url={url} />
-                    <DeleteButton itemType="report" onClick={() => delete_report(report_uuid, openReportsOverview)} />
-                </span>
+                </ButtonRow>
             }
         />
     )
 }
-ButtonRow.propTypes = {
+ReportTitleButtonRow.propTypes = {
     report_uuid: string,
     openReportsOverview: func,
     url: string,
@@ -200,9 +198,7 @@ export function ReportTitle({ report, openReportsOverview, reload, settings }) {
                 onTabChange={tabChangeHandler(settings.expandedItems, report_uuid)}
                 panes={panes}
             />
-            <div style={{ marginTop: "20px" }}>
-                <ButtonRow report_uuid={report_uuid} openReportsOverview={openReportsOverview} url={reportUrl} />
-            </div>
+            <ReportTitleButtonRow report_uuid={report_uuid} openReportsOverview={openReportsOverview} url={reportUrl} />
         </HeaderWithDetails>
     )
 }
diff --git a/components/frontend/src/report/ReportsOverview.js b/components/frontend/src/report/ReportsOverview.js
index cac56db0de..ff25b1ef57 100644
--- a/components/frontend/src/report/ReportsOverview.js
+++ b/components/frontend/src/report/ReportsOverview.js
@@ -1,9 +1,9 @@
+import { Box } from "@mui/material"
 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 { Segment } from "../semantic_ui_react_wrappers"
 import {
     datePropType,
     datesPropType,
@@ -16,7 +16,9 @@ import {
 } from "../sharedPropTypes"
 import { Subjects } from "../subject/Subjects"
 import { getReportsTags } from "../utils"
-import { AddButton, CopyButton } from "../widgets/Button"
+import { ButtonRow } from "../widgets/ButtonRow"
+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"
@@ -28,14 +30,16 @@ function ReportsOverviewButtonRow({ reload, reports }) {
         <ReadOnlyOrEditable
             requiredPermissions={[EDIT_REPORT_PERMISSION]}
             editableComponent={
-                <Segment basic>
-                    <AddButton itemType={"report"} onClick={() => add_report(reload)} />
-                    <CopyButton
-                        itemType={"report"}
-                        get_options={() => report_options(reports)}
-                        onChange={(source_report_uuid) => copy_report(source_report_uuid, reload)}
-                    />
-                </Segment>
+                <Box sx={{ p: "10px" }}>
+                    <ButtonRow>
+                        <AddButton itemType={"report"} onClick={() => add_report(reload)} />
+                        <CopyButton
+                            itemType={"report"}
+                            get_options={() => report_options(reports)}
+                            onChange={(source_report_uuid) => copy_report(source_report_uuid, reload)}
+                        />
+                    </ButtonRow>
+                </Box>
             }
         />
     )
diff --git a/components/frontend/src/report/ReportsOverview.test.js b/components/frontend/src/report/ReportsOverview.test.js
index e9ede868ec..bef3612336 100644
--- a/components/frontend/src/report/ReportsOverview.test.js
+++ b/components/frontend/src/report/ReportsOverview.test.js
@@ -125,7 +125,7 @@ it("copies a report", async () => {
     renderReportsOverview({ reports: reports })
     fireEvent.click(screen.getByText(/Copy report/))
     await act(async () => {
-        fireEvent.click(screen.getByRole("option"))
+        fireEvent.click(screen.getAllByRole("menuitem")[1])
     })
     expect(fetch_server_api.fetch_server_api).toHaveBeenLastCalledWith("post", "report/uuid/copy", {})
 })
diff --git a/components/frontend/src/semantic_ui_react_wrappers.js b/components/frontend/src/semantic_ui_react_wrappers.js
index d5a1816b15..d864009753 100644
--- a/components/frontend/src/semantic_ui_react_wrappers.js
+++ b/components/frontend/src/semantic_ui_react_wrappers.js
@@ -6,7 +6,6 @@ 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 { Icon } from "./semantic_ui_react_wrappers/Icon"
 export { Label } from "./semantic_ui_react_wrappers/Label"
 export { Message } from "./semantic_ui_react_wrappers/Message"
 export { Modal } from "./semantic_ui_react_wrappers/Modal"
diff --git a/components/frontend/src/semantic_ui_react_wrappers/Icon.js b/components/frontend/src/semantic_ui_react_wrappers/Icon.js
deleted file mode 100644
index 1222f0f230..0000000000
--- a/components/frontend/src/semantic_ui_react_wrappers/Icon.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import { string } from "prop-types"
-import { useContext } from "react"
-import { Icon as SemanticUIIcon } from "semantic-ui-react"
-
-import { DarkMode } from "../context/DarkMode"
-
-export function Icon(props) {
-    let { className, name, ...otherProps } = props
-    /* Using name="linegraph" results in "Invalid prop `name` of value `linegraph` supplied to `Icon`."
-       Using name="line graph" does not show the icon. Using className works around this. */
-    if (name === "linegraph") {
-        className = className ?? ""
-        className += ` ${name}`
-        name = ""
-    }
-    return <SemanticUIIcon className={className} inverted={useContext(DarkMode)} name={name} {...otherProps} />
-}
-Icon.propTypes = {
-    className: string,
-    name: string,
-}
diff --git a/components/frontend/src/source/Source.js b/components/frontend/src/source/Source.js
index 51e7b88370..9bee36716a 100644
--- a/components/frontend/src/source/Source.js
+++ b/components/frontend/src/source/Source.js
@@ -17,7 +17,9 @@ import {
     stringsPropType,
 } from "../sharedPropTypes"
 import { getMetricName, getSourceName } from "../utils"
-import { DeleteButton, ReorderButtonGroup } from "../widgets/Button"
+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 { SourceParameters } from "./SourceParameters"
@@ -30,31 +32,27 @@ function select_sources_parameter_keys(changed_fields, source_uuid) {
         : []
 }
 
-function ButtonGridRow({ first_source, last_source, reload, source_uuid }) {
+function SourceButtonRow({ first_source, last_source, reload, source_uuid }) {
+    const deleteButton = <DeleteButton itemType="source" onClick={() => delete_source(source_uuid, reload)} />
     return (
         <ReadOnlyOrEditable
             requiredPermissions={[EDIT_REPORT_PERMISSION]}
             editableComponent={
-                <div style={{ marginTop: "20px" }}>
-                    <Grid.Row>
-                        <Grid.Column>
-                            <ReorderButtonGroup
-                                first={first_source}
-                                last={last_source}
-                                moveable="source"
-                                onClick={(direction) => {
-                                    set_source_attribute(source_uuid, "position", direction, reload)
-                                }}
-                            />
-                            <DeleteButton itemType="source" onClick={() => delete_source(source_uuid, reload)} />
-                        </Grid.Column>
-                    </Grid.Row>
-                </div>
+                <ButtonRow rightButton={deleteButton}>
+                    <ReorderButtonGroup
+                        first={first_source}
+                        last={last_source}
+                        moveable="source"
+                        onClick={(direction) => {
+                            set_source_attribute(source_uuid, "position", direction, reload)
+                        }}
+                    />
+                </ButtonRow>
             }
         />
     )
 }
-ButtonGridRow.propTypes = {
+SourceButtonRow.propTypes = {
     first_source: bool,
     last_source: bool,
     reload: func,
@@ -192,7 +190,7 @@ export function Source({
         <>
             <SourceTypeHeader metricTypeId={metric.type} sourceTypeId={source.type} sourceType={sourceType} />
             <Tab panes={panes} />
-            <ButtonGridRow
+            <SourceButtonRow
                 first_source={first_source}
                 last_source={last_source}
                 reload={reload}
diff --git a/components/frontend/src/source/SourceEntities.js b/components/frontend/src/source/SourceEntities.js
index 6a56a8446d..87897fe20a 100644
--- a/components/frontend/src/source/SourceEntities.js
+++ b/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}
diff --git a/components/frontend/src/source/SourceEntities.test.js b/components/frontend/src/source/SourceEntities.test.js
index b4e341170a..31ad813d00 100644
--- a/components/frontend/src/source/SourceEntities.test.js
+++ b/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)
     })
diff --git a/components/frontend/src/source/SourceParameter.test.js b/components/frontend/src/source/SourceParameter.test.js
index e1a395dc8e..0ea0323b5f 100644
--- a/components/frontend/src/source/SourceParameter.test.js
+++ b/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)
     })
diff --git a/components/frontend/src/source/SourceType.js b/components/frontend/src/source/SourceType.js
index 6e6935afc4..b17dd34afc 100644
--- a/components/frontend/src/source/SourceType.js
+++ b/components/frontend/src/source/SourceType.js
@@ -1,10 +1,11 @@
+import { 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 { Header, Label } from "../semantic_ui_react_wrappers"
+import { Label } from "../semantic_ui_react_wrappers"
 import { dataModelPropType, sourceTypePropType } from "../sharedPropTypes"
 import { Logo } from "./Logo"
 
@@ -25,14 +26,14 @@ function sourceTypeOption(key, sourceType) {
         text: sourceType.name,
         value: key,
         content: (
-            <Header as="h4">
-                <Header.Content>
-                    <Logo logo={key} alt={sourceType.name} />
+            <Stack direction="row">
+                <Logo logo={key} alt={sourceType.name} />
+                <p>
                     {sourceType.name}
                     {sourceType.deprecated && <Label color="yellow">Deprecated</Label>}
-                    <Header.Subheader>{sourceTypeDescription(sourceType)}</Header.Subheader>
-                </Header.Content>
-            </Header>
+                    <Typography variant="body2">{sourceTypeDescription(sourceType)}</Typography>
+                </p>
+            </Stack>
         ),
     }
 }
diff --git a/components/frontend/src/source/SourceTypeHeader.js b/components/frontend/src/source/SourceTypeHeader.js
index cf05d2071a..a874a54087 100644
--- a/components/frontend/src/source/SourceTypeHeader.js
+++ b/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>
diff --git a/components/frontend/src/source/Sources.js b/components/frontend/src/source/Sources.js
index b88612d110..15a6a3b9a3 100644
--- a/components/frontend/src/source/Sources.js
+++ b/components/frontend/src/source/Sources.js
@@ -14,7 +14,10 @@ import {
     stringsPropType,
 } from "../sharedPropTypes"
 import { pluralize } from "../utils"
-import { AddDropdownButton, CopyButton, MoveButton } from "../widgets/Button"
+import { ButtonRow } from "../widgets/ButtonRow"
+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"
@@ -26,7 +29,7 @@ function ButtonSegment({ metric, metric_uuid, reload, reports }) {
         <ReadOnlyOrEditable
             requiredPermissions={[EDIT_REPORT_PERMISSION]}
             editableComponent={
-                <Segment vertical>
+                <ButtonRow>
                     <AddDropdownButton
                         itemType="source"
                         itemSubtypes={sourceTypeOptions(dataModel, metric.type)}
@@ -42,7 +45,7 @@ function ButtonSegment({ metric, metric_uuid, reload, reports }) {
                         onChange={(source_uuid) => move_source(source_uuid, metric_uuid, reload)}
                         get_options={() => source_options(reports, dataModel, metric.type, metric_uuid)}
                     />
-                </Segment>
+                </ButtonRow>
             }
         />
     )
diff --git a/components/frontend/src/subject/SubjectTable.test.js b/components/frontend/src/subject/SubjectTable.test.js
index 80c9cd6646..3057af4959 100644
--- a/components/frontend/src/subject/SubjectTable.test.js
+++ b/components/frontend/src/subject/SubjectTable.test.js
@@ -97,6 +97,7 @@ function renderSubjectTable({ dates = [], expandedItems = null, settings = null
                         },
                     ]}
                     metricEntries={Object.entries({ 1: metric, 2: metric2 })}
+                    reports={[]}
                     settings={settings}
                     subject={{ type: "subject_type", metrics: { 1: metric, 2: metric2 } }}
                     subject_uuid="subject_uuid"
@@ -227,7 +228,7 @@ it("expands the details via the url", async () => {
 it("moves a metric", async () => {
     history.push("?expanded=1:2")
     renderSubjectTable()
-    await act(async () => fireEvent.click(screen.getByLabelText("Move metric to the next row")))
+    await act(async () => fireEvent.click(screen.getByRole("button", { name: "Move metric to the next row" })))
     expect(fetch_server_api.fetch_server_api).toHaveBeenCalledWith("post", "metric/1/attribute/position", {
         position: "next",
     })
diff --git a/components/frontend/src/subject/SubjectTableFooter.js b/components/frontend/src/subject/SubjectTableFooter.js
index f62c96356a..ca66d032d1 100644
--- a/components/frontend/src/subject/SubjectTableFooter.js
+++ b/components/frontend/src/subject/SubjectTableFooter.js
@@ -7,7 +7,10 @@ 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 { ButtonRow } from "../widgets/ButtonRow"
+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 }) {
@@ -15,32 +18,34 @@ function SubjectTableFooterButtonRow({ subject, subjectUuid, reload, reports, st
     return (
         <Table.Row>
             <Table.HeaderCell colSpan="99">
-                <AddDropdownButton
-                    allItemSubtypes={allMetricTypeOptions(dataModel)}
-                    itemType="metric"
-                    itemSubtypes={metricTypeOptions(dataModel, subject.type)}
-                    onClick={(subtype) => {
-                        stopFilteringAndSorting()
-                        add_metric(subjectUuid, subtype, reload)
-                    }}
-                    usedItemSubtypeKeys={usedMetricTypes(subject)}
-                />
-                <CopyButton
-                    itemType="metric"
-                    onChange={(source_metric_uuid) => {
-                        stopFilteringAndSorting()
-                        copy_metric(source_metric_uuid, subjectUuid, reload)
-                    }}
-                    get_options={() => metric_options(reports, dataModel, subject.type)}
-                />
-                <MoveButton
-                    itemType="metric"
-                    onChange={(source_metric_uuid) => {
-                        stopFilteringAndSorting()
-                        move_metric(source_metric_uuid, subjectUuid, reload)
-                    }}
-                    get_options={() => metric_options(reports, dataModel, subject.type, subjectUuid)}
-                />
+                <ButtonRow>
+                    <AddDropdownButton
+                        allItemSubtypes={allMetricTypeOptions(dataModel)}
+                        itemType="metric"
+                        itemSubtypes={metricTypeOptions(dataModel, subject.type)}
+                        onClick={(subtype) => {
+                            stopFilteringAndSorting()
+                            add_metric(subjectUuid, subtype, reload)
+                        }}
+                        usedItemSubtypeKeys={usedMetricTypes(subject)}
+                    />
+                    <CopyButton
+                        itemType="metric"
+                        onChange={(source_metric_uuid) => {
+                            stopFilteringAndSorting()
+                            copy_metric(source_metric_uuid, subjectUuid, reload)
+                        }}
+                        get_options={() => metric_options(reports, dataModel, subject.type)}
+                    />
+                    <MoveButton
+                        itemType="metric"
+                        onChange={(source_metric_uuid) => {
+                            stopFilteringAndSorting()
+                            move_metric(source_metric_uuid, subjectUuid, reload)
+                        }}
+                        get_options={() => metric_options(reports, dataModel, subject.type, subjectUuid)}
+                    />
+                </ButtonRow>
             </Table.HeaderCell>
         </Table.Row>
     )
diff --git a/components/frontend/src/subject/SubjectTableFooter.test.js b/components/frontend/src/subject/SubjectTableFooter.test.js
index b9615227a1..72de24050c 100644
--- a/components/frontend/src/subject/SubjectTableFooter.test.js
+++ b/components/frontend/src/subject/SubjectTableFooter.test.js
@@ -18,6 +18,7 @@ it("shows the add metric button and adds a metric when clicked", () => {
             <DataModel.Provider value={dataModel}>
                 <Table>
                     <SubjectTableFooter
+                        reports={[]}
                         subjectUuid="subject_uuid"
                         subject={report.subjects.subject_uuid}
                         stopFilteringAndSorting={stopFilteringAndSorting}
diff --git a/components/frontend/src/subject/SubjectTableHeader.js b/components/frontend/src/subject/SubjectTableHeader.js
index 9018a8aa26..a55251f835 100644
--- a/components/frontend/src/subject/SubjectTableHeader.js
+++ b/components/frontend/src/subject/SubjectTableHeader.js
@@ -1,20 +1,33 @@
-import { bool, func } from "prop-types"
+import { bool, func, string } from "prop-types"
 import { useContext } from "react"
 import { List, Table } from "semantic-ui-react"
 
 import { DarkMode } from "../context/DarkMode"
 import { StatusIcon } from "../measurement/StatusIcon"
 import { STATUS_DESCRIPTION, STATUSES } from "../metric/status"
-import { Icon, Label } from "../semantic_ui_react_wrappers"
+import { Label } from "../semantic_ui_react_wrappers"
 import { datesPropType, settingsPropType } from "../sharedPropTypes"
 import { HyperLink } from "../widgets/HyperLink"
+import { IgnoreIcon, TriangleRightIcon } from "../widgets/icons"
 import { SortableTableHeaderCell, UnsortableTableHeaderCell } from "../widgets/TableHeaderCell"
 
+function Expand({ children }) {
+    return (
+        <>
+            Expand the {children} (click
+            <TriangleRightIcon />)
+        </>
+    )
+}
+Expand.propTypes = {
+    children: string,
+}
+
 const metricHelp = (
     <>
         <p>The name of the metric.</p>
         <p>
-            Expand the metric (click <Icon fitted name="triangle right" />) to edit its name in the configuration tab.
+            <Expand>metric</Expand> to edit its name in the configuration tab.
         </p>
         <p>Click the column header to sort the metrics by name.</p>
     </>
@@ -31,8 +44,7 @@ const trendHelp = (
             number scale.
         </p>
         <p>
-            Expand the metric (click <Icon fitted name="triangle right" />) and navigate to the trend graph tab to see a
-            graph of all measurements.
+            <Expand>metric</Expand> and navigate to the trend graph tab to see a graph of all measurements.
         </p>
     </>
 )
@@ -65,8 +77,8 @@ const measurementHelp = (
         <p>The latest measurement value. Metrics are measured periodically.</p>
         <p>
             If the measurement value is ?, no sources have been configured for the metric yet or the measurement data
-            could not be collected. Expand the metric (click <Icon fitted name="triangle right" />) and navigate to the
-            sources tab to add sources or see the error details.
+            could not be collected. <Expand>metric</Expand> and navigate to the sources tab to add sources or see the
+            error details.
         </p>
         <p>
             If the measurement value has a{" "}
@@ -77,10 +89,9 @@ const measurementHelp = (
             a system administrator should be notified.
         </p>
         <p>
-            If there is a <Icon name="hide" /> before the measurement value, it means one or more measurement entities
-            are being ignored. Hover over the measurement value to see how many entities are ignored. Expand the metric
-            (click <Icon fitted name="triangle right" />) and navigate to the entities tab to see why individual
-            entities are ignored.
+            If there is a <IgnoreIcon /> before the measurement value, it means one or more measurement entities are
+            being ignored. Hover over the measurement value to see how many entities are ignored.{" "}
+            <Expand>metric</Expand> and navigate to the entities tab to see why individual entities are ignored.
         </p>
         <p>Hover over the measurement value to see when the metric was last measured.</p>
         <p>Click the column header to sort the metrics by measurement value.</p>
@@ -99,8 +110,7 @@ const targetHelp = (
             past or all issues linked to the metric have been resolved.
         </p>
         <p>
-            Expand the metric (click <Icon fitted name="triangle right" />) to edit the target value in the
-            configuration tab.
+            <Expand>metric</Expand> to edit the target value in the configuration tab.
         </p>
         <p>Click the column header to sort the metrics by target value.</p>
     </>
@@ -113,8 +123,7 @@ const unitHelp = (
             and target values.
         </p>
         <p>
-            Expand the metric (click <Icon fitted name="triangle right" />) to edit the unit name in the configuration
-            tab.
+            <Expand>metric</Expand> to edit the unit name in the configuration tab.
         </p>
         <p>Click the column header to sort the metrics by unit.</p>
     </>
@@ -124,13 +133,12 @@ const timeLeftHelp = (
     <>
         <p>The number of days left to address the metric.</p>
         <p>
-            If the metric needs action, the time left is based on the desired reaction times. Expand the report title
-            (click <Icon fitted name="triangle right" />) to change the desired reaction times.
+            If the metric needs action, the time left is based on the desired reaction times.{" "}
+            <Expand>report title</Expand> to change the desired reaction times.
         </p>
         <p>
-            If the metric has accepted technical debt, the time left is based on the technical debt end date. Expand the
-            metric (click <Icon fitted name="triangle right" />) to edit technical debt end date in the technical debt
-            tab.
+            If the metric has accepted technical debt, the time left is based on the technical debt end date.{" "}
+            <Expand>metric</Expand> to edit technical debt end date in the technical debt tab.
         </p>
         <p>Hover over the number of days to see the exact deadline.</p>
         <p>Click the column header to sort the metrics by time left.</p>
@@ -141,7 +149,7 @@ const overrunHelp = (
     <>
         <p>The number of days that the desired reaction time was exceeded, in the displayed period.</p>
         <p>
-            Expand the report title (click <Icon fitted name="triangle right" />) to change the desired reaction times.
+            <Expand>report title</Expand> to change the desired reaction times.
         </p>
         <p>
             Hover over the number of days to see an overview of when and for which statuses the metric had overruns, in
@@ -158,7 +166,7 @@ const commentHelp = (
             and URLs are supported.
         </p>
         <p>
-            Expand the metric (click <Icon fitted name="triangle right" />) to edit the comments.
+            <Expand>metric</Expand> to edit the comments.
         </p>
     </>
 )
@@ -171,11 +179,11 @@ const sourcesHelp = (
             <Label as="span" horizontal color="red">
                 red background
             </Label>
-            , the source could not be accessed or the data could not be parsed. Expand the metric (click{" "}
-            <Icon fitted name="triangle right" />) and navigate to the source to see the error details.
+            , the source could not be accessed or the data could not be parsed. <Expand>metric</Expand> and navigate to
+            the source to see the error details.
         </p>
         <p>
-            Expand the metric (click <Icon fitted name="triangle right" />) to configure sources.
+            <Expand>metric</Expand> to configure sources.
         </p>
         <p>Click a source to open the tool or report in a new tab.</p>
         <p>Click the column header to sort the metrics by source.</p>
@@ -193,8 +201,8 @@ const issuesHelp = (
             <Label as="span" horizontal color="red">
                 red background
             </Label>
-            , the issue tracker could not be accessed or the data could not be parsed. Expand the metric and navigate to
-            the technical debt tab to see the error details.
+            , the issue tracker could not be accessed or the data could not be parsed. <Expand>metric</Expand> and
+            navigate to the technical debt tab to see the error details.
         </p>
         <p>Hover over an issue to see more information about the issue.</p>
         <p>Click an issue to open the issue in a new tab.</p>
@@ -212,7 +220,7 @@ const tagsHelp = (
             selected tags.
         </p>
         <p>
-            Expand the metric (click <Icon fitted name="triangle right" />) to add or remove tags.
+            <Expand>metric</Expand> to add or remove tags.
         </p>
         <p>Click the column header to sort the metrics by tag.</p>
     </>
diff --git a/components/frontend/src/subject/SubjectTableHeader.test.js b/components/frontend/src/subject/SubjectTableHeader.test.js
index 21a3ac1e00..a6b6f3eceb 100644
--- a/components/frontend/src/subject/SubjectTableHeader.test.js
+++ b/components/frontend/src/subject/SubjectTableHeader.test.js
@@ -1,4 +1,5 @@
-import { render, screen } from "@testing-library/react"
+import { render, screen, waitFor } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
 import history from "history/browser"
 import { Table } from "semantic-ui-react"
 
@@ -73,3 +74,12 @@ it("hides the delta columns", () => {
     renderSubjectTableHeader([date1, date2])
     expect(screen.queryAllByText("𝚫").length).toBe(0)
 })
+
+it("shows help for column headers", async () => {
+    const date1 = new Date("2022-02-02")
+    renderSubjectTableHeader([date1])
+    await userEvent.hover(screen.getByText("Metric"))
+    await waitFor(() => {
+        expect(screen.queryByText(/Click the column header to sort the metrics by name/)).not.toBe(null)
+    })
+})
diff --git a/components/frontend/src/subject/SubjectTitle.js b/components/frontend/src/subject/SubjectTitle.js
index 67a0c14943..a5370644cc 100644
--- a/components/frontend/src/subject/SubjectTitle.js
+++ b/components/frontend/src/subject/SubjectTitle.js
@@ -1,6 +1,5 @@
 import { bool, func, object, string } from "prop-types"
 import { useContext } from "react"
-import { Icon } from "semantic-ui-react"
 
 import { delete_subject, set_subject_attribute } from "../api/subject"
 import { activeTabIndex, tabChangeHandler } from "../app_ui_settings"
@@ -10,9 +9,12 @@ import { EDIT_REPORT_PERMISSION, ReadOnlyOrEditable } from "../context/Permissio
 import { Header, Tab } from "../semantic_ui_react_wrappers"
 import { reportPropType, settingsPropType } from "../sharedPropTypes"
 import { getSubjectType, slugify } from "../utils"
-import { DeleteButton, PermLinkButton, ReorderButtonGroup } from "../widgets/Button"
+import { ButtonRow } from "../widgets/ButtonRow"
+import { DeleteButton } from "../widgets/buttons/DeleteButton"
+import { PermLinkButton } from "../widgets/buttons/PermLinkButton"
+import { ReorderButtonGroup } from "../widgets/buttons/ReorderButtonGroup"
 import { HeaderWithDetails } from "../widgets/HeaderWithDetails"
-import { HyperLink } from "../widgets/HyperLink"
+import { ReadTheDocsLink } from "../widgets/ReadTheDocsLink"
 import { changelogTabPane, configurationTabPane } from "../widgets/TabPane"
 import { SubjectParameters } from "./SubjectParameters"
 
@@ -23,10 +25,7 @@ function SubjectHeader({ subjectType }) {
             <Header.Content>
                 {subjectType.name}
                 <Header.Subheader>
-                    {subjectType.description}{" "}
-                    <HyperLink url={url}>
-                        Read the Docs <Icon name="external" link />
-                    </HyperLink>
+                    {subjectType.description} <ReadTheDocsLink url={url} />
                 </Header.Subheader>
             </Header.Content>
         </Header>
@@ -36,12 +35,13 @@ SubjectHeader.propTypes = {
     subjectType: object,
 }
 
-function ButtonRow({ subject_uuid, firstSubject, lastSubject, reload, url }) {
+function SubjectTitleButtonRow({ subject_uuid, firstSubject, lastSubject, reload, url }) {
+    const deleteButton = <DeleteButton itemType="subject" onClick={() => delete_subject(subject_uuid, reload)} />
     return (
         <ReadOnlyOrEditable
             requiredPermissions={[EDIT_REPORT_PERMISSION]}
             editableComponent={
-                <>
+                <ButtonRow rightButton={deleteButton}>
                     <ReorderButtonGroup
                         first={firstSubject}
                         last={lastSubject}
@@ -51,13 +51,12 @@ function ButtonRow({ subject_uuid, firstSubject, lastSubject, reload, url }) {
                         }}
                     />
                     <PermLinkButton itemType="subject" url={url} />
-                    <DeleteButton itemType="subject" onClick={() => delete_subject(subject_uuid, reload)} />
-                </>
+                </ButtonRow>
             }
         />
     )
 }
-ButtonRow.propTypes = {
+SubjectTitleButtonRow.propTypes = {
     subject_uuid: string,
     firstSubject: bool,
     lastSubject: bool,
@@ -112,7 +111,7 @@ export function SubjectTitle({
                 onTabChange={tabChangeHandler(settings.expandedItems, subject_uuid)}
                 panes={panes}
             />
-            <ButtonRow
+            <SubjectTitleButtonRow
                 subject_uuid={subject_uuid}
                 firstSubject={firstSubject}
                 lastSubject={lastSubject}
diff --git a/components/frontend/src/subject/SubjectTitle.test.js b/components/frontend/src/subject/SubjectTitle.test.js
index 0110b9db48..568c305e9a 100644
--- a/components/frontend/src/subject/SubjectTitle.test.js
+++ b/components/frontend/src/subject/SubjectTitle.test.js
@@ -109,7 +109,7 @@ it("moves the subject", async () => {
     fetch_server_api.fetch_server_api = jest.fn().mockResolvedValue({ ok: true })
     await renderSubjectTitle()
     await act(async () => {
-        fireEvent.click(screen.getByLabelText(/Move subject to the next position/))
+        fireEvent.click(screen.getByRole("button", { name: /Move subject to the next position/ }))
     })
     expect(fetch_server_api.fetch_server_api).toHaveBeenLastCalledWith(
         "post",
diff --git a/components/frontend/src/subject/SubjectType.js b/components/frontend/src/subject/SubjectType.js
index e353327734..d471c5bbb0 100644
--- a/components/frontend/src/subject/SubjectType.js
+++ b/components/frontend/src/subject/SubjectType.js
@@ -1,30 +1,40 @@
+import CircleIcon from "@mui/icons-material/Circle"
+import { Stack, Typography } from "@mui/material"
 import { func, number, objectOf, string } from "prop-types"
 import { useContext } from "react"
-import { HeaderContent, HeaderSubheader } from "semantic-ui-react"
 
 import { DataModel } from "../context/DataModel"
 import { EDIT_REPORT_PERMISSION } from "../context/Permissions"
 import { SingleChoiceInput } from "../fields/SingleChoiceInput"
-import { Header, Icon } from "../semantic_ui_react_wrappers"
 import { subjectPropType } from "../sharedPropTypes"
 
 export function subjectTypes(subjectTypesMapping, level = 0) {
     const options = []
-    const headingLevel = `h${Math.min(level, 2) + 4}` // Ensure the heading level is at least h4 and at most h6
-    const bullet = level === 0 ? null : <Icon name="circle" size="tiny" style={{ paddingLeft: `${level}em` }} />
+    const bullet =
+        level === 0 ? null : (
+            <CircleIcon
+                fontSize="inherit"
+                sx={{
+                    color: "inherit",
+                    width: "0.5em",
+                    marginRight: "0.5em",
+                    paddingTop: "0.3em",
+                }}
+            />
+        )
     Object.entries(subjectTypesMapping).forEach(([key, subjectType]) => {
         options.push({
             key: key,
             text: subjectType.name,
             value: key,
             content: (
-                <Header as={headingLevel}>
+                <Stack direction="row">
                     {bullet}
-                    <HeaderContent>
+                    <p>
                         {subjectType.name}
-                        <HeaderSubheader>{subjectType.description}</HeaderSubheader>
-                    </HeaderContent>
-                </Header>
+                        <Typography variant="body2">{subjectType.description}</Typography>
+                    </p>
+                </Stack>
             ),
         })
         options.push(...subjectTypes(subjectType?.subjects ?? [], level + 1))
diff --git a/components/frontend/src/subject/SubjectsButtonRow.js b/components/frontend/src/subject/SubjectsButtonRow.js
index 87d4e0e7a8..450169b2a7 100644
--- a/components/frontend/src/subject/SubjectsButtonRow.js
+++ b/components/frontend/src/subject/SubjectsButtonRow.js
@@ -1,12 +1,15 @@
+import { Box } from "@mui/material"
 import { func } from "prop-types"
 import { useContext } from "react"
 
 import { add_subject, copy_subject, move_subject } from "../api/subject"
 import { DataModel } from "../context/DataModel"
 import { EDIT_REPORT_PERMISSION, ReadOnlyOrEditable } from "../context/Permissions"
-import { Segment } from "../semantic_ui_react_wrappers"
 import { reportPropType, reportsPropType, settingsPropType } from "../sharedPropTypes"
-import { AddDropdownButton, CopyButton, MoveButton } from "../widgets/Button"
+import { ButtonRow } from "../widgets/ButtonRow"
+import { AddDropdownButton } from "../widgets/buttons/AddDropdownButton"
+import { CopyButton } from "../widgets/buttons/CopyButton"
+import { MoveButton } from "../widgets/buttons/MoveButton"
 import { subject_options } from "../widgets/menu_options"
 import { subjectTypes } from "./SubjectType"
 
@@ -20,33 +23,35 @@ export function SubjectsButtonRow({ reload, report, reports, settings }) {
         <ReadOnlyOrEditable
             requiredPermissions={[EDIT_REPORT_PERMISSION]}
             editableComponent={
-                <Segment basic>
-                    <AddDropdownButton
-                        itemType="subject"
-                        itemSubtypes={subjectTypes(dataModel.subjects)}
-                        onClick={(subtype) => {
-                            stopFiltering()
-                            add_subject(report.report_uuid, subtype, reload)
-                        }}
-                        sort={false} // Don't sort the subjects by name because it's a hierarchy defined in the data model
-                    />
-                    <CopyButton
-                        itemType="subject"
-                        onChange={(source_subject_uuid) => {
-                            stopFiltering()
-                            copy_subject(source_subject_uuid, report.report_uuid, reload)
-                        }}
-                        get_options={() => subject_options(reports, dataModel)}
-                    />
-                    <MoveButton
-                        itemType="subject"
-                        onChange={(source_subject_uuid) => {
-                            stopFiltering()
-                            move_subject(source_subject_uuid, report.report_uuid, reload)
-                        }}
-                        get_options={() => subject_options(reports, dataModel, report.report_uuid)}
-                    />
-                </Segment>
+                <Box sx={{ pt: "50px" }}>
+                    <ButtonRow>
+                        <AddDropdownButton
+                            itemType="subject"
+                            itemSubtypes={subjectTypes(dataModel.subjects)}
+                            onClick={(subtype) => {
+                                stopFiltering()
+                                add_subject(report.report_uuid, subtype, reload)
+                            }}
+                            sort={false} // Don't sort the subjects by name because it's a hierarchy defined in the data model
+                        />
+                        <CopyButton
+                            itemType="subject"
+                            onChange={(source_subject_uuid) => {
+                                stopFiltering()
+                                copy_subject(source_subject_uuid, report.report_uuid, reload)
+                            }}
+                            get_options={() => subject_options(reports, dataModel)}
+                        />
+                        <MoveButton
+                            itemType="subject"
+                            onChange={(source_subject_uuid) => {
+                                stopFiltering()
+                                move_subject(source_subject_uuid, report.report_uuid, reload)
+                            }}
+                            get_options={() => subject_options(reports, dataModel, report.report_uuid)}
+                        />
+                    </ButtonRow>
+                </Box>
             }
         />
     )
diff --git a/components/frontend/src/subject/SubjectsButtonRow.test.js b/components/frontend/src/subject/SubjectsButtonRow.test.js
index 7206c7d207..03008a9b31 100644
--- a/components/frontend/src/subject/SubjectsButtonRow.test.js
+++ b/components/frontend/src/subject/SubjectsButtonRow.test.js
@@ -15,8 +15,8 @@ jest.mock("../widgets/menu_options", () => {
         __esModule: true,
         ...originalModule,
         subject_options: jest.fn(() => [
-            { key: "1", text: "dummy option 1" },
-            { key: "2", text: "dummy option 2" },
+            { key: "1", text: "dummy option 1", content: "dummy option 1" },
+            { key: "2", text: "dummy option 2", content: "dummy option 2" },
         ]),
     }
 })
diff --git a/components/frontend/src/widgets/Button.js b/components/frontend/src/widgets/Button.js
deleted file mode 100644
index 25739a9233..0000000000
--- a/components/frontend/src/widgets/Button.js
+++ /dev/null
@@ -1,400 +0,0 @@
-import { array, arrayOf, bool, func, string } from "prop-types"
-import { useState } from "react"
-import { Icon, Input } from "semantic-ui-react"
-
-import { Button, Checkbox, Dropdown, Popup } from "../semantic_ui_react_wrappers"
-import { popupContentPropType } from "../sharedPropTypes"
-import { showMessage } from "../widgets/toast"
-import { ItemBreadcrumb } from "./ItemBreadcrumb"
-
-function stopEventPropagation(event) {
-    event.stopPropagation()
-}
-
-function stopEventPropagationOnSpace(event) {
-    if (event.key === " ") {
-        event.stopPropagation() // Prevent space from closing menu
-    }
-}
-
-function FilterCheckbox({ label, filter, setFilter }) {
-    return (
-        <Checkbox
-            label={label}
-            onChange={() => setFilter(!filter)}
-            onClick={stopEventPropagation}
-            onKeyDown={stopEventPropagationOnSpace}
-            style={{ paddingLeft: "10pt", paddingBottom: "10pt" }}
-            tabIndex={0}
-            value={filter ? 1 : 0}
-        />
-    )
-}
-FilterCheckbox.propTypes = {
-    label: string,
-    filter: bool,
-    setFilter: func,
-}
-
-function FilterCheckboxes({
-    itemType,
-    allowHidingUnsupportedItems,
-    showUnsupportedItems,
-    setShowUnsupportedItems,
-    allowHidingUsedItems,
-    hideUsedItems,
-    setHideUsedItems,
-}) {
-    if (!allowHidingUnsupportedItems && !allowHidingUsedItems) {
-        return null
-    }
-    return (
-        <span style={{ paddingRight: "12px" }}>
-            {allowHidingUnsupportedItems && (
-                <FilterCheckbox
-                    label={`Select from all ${itemType} types`}
-                    filter={showUnsupportedItems}
-                    setFilter={setShowUnsupportedItems}
-                />
-            )}
-            {allowHidingUsedItems && (
-                <FilterCheckbox
-                    label={`Hide ${itemType} types already used`}
-                    filter={hideUsedItems}
-                    setFilter={setHideUsedItems}
-                />
-            )}
-        </span>
-    )
-}
-FilterCheckboxes.propTypes = {
-    itemType: string,
-    allowHidingUnsupportedItems: bool,
-    showUnsupportedItems: bool,
-    setShowUnsupportedItems: func,
-    allowHidingUsedItems: bool,
-    hideUsedItems: bool,
-    setHideUsedItems: func,
-}
-
-export function ActionButton(props) {
-    const { action, disabled, icon, itemType, floated, fluid, popup, position, ...other } = props
-    const label = `${action} ${itemType}`
-    // Put the button in a span so that a disabled button can still have a popup
-    // See https://github.com/Semantic-Org/Semantic-UI-React/issues/2804
-    const button = (
-        <span style={{ float: floated ?? "none", display: fluid ? "" : "inline-block" }}>
-            <Button basic disabled={disabled} icon fluid={fluid} primary {...other}>
-                <Icon name={icon} /> {label}
-            </Button>
-        </span>
-    )
-    return <Popup content={popup} on={["focus", "hover"]} position={position || "top left"} trigger={button} />
-}
-ActionButton.propTypes = {
-    action: string,
-    disabled: bool,
-    icon: string,
-    itemType: string,
-    floated: string,
-    fluid: bool,
-    popup: popupContentPropType,
-    position: string,
-}
-
-export function AddDropdownButton({ itemSubtypes, itemType, onClick, allItemSubtypes, usedItemSubtypeKeys, sort }) {
-    const [selectedItem, setSelectedItem] = useState(0) // Index of selected item in the dropdown
-    const [query, setQuery] = useState("") // Search query to filter item subtypes
-    const [menuOpen, setMenuOpen] = useState(false) // Is the menu open?
-    const [popupTriggered, setPopupTriggered] = useState(false) // Is the popup triggered by hover or focus?
-    const [inputHasFocus, setInputHasFocus] = useState(false) // Does the input have focus?
-    const [showUnsupportedItems, setShowUnsupportedItems] = useState(false) // Show only supported itemSubTypes or also unsupported itemSubTypes?
-    const [hideUsedItems, setHideUsedItems] = useState(false) // Hide itemSubTypes already used?
-    let items = showUnsupportedItems ? allItemSubtypes : itemSubtypes
-    if (hideUsedItems) {
-        items = items.filter((item) => !usedItemSubtypeKeys.includes(item.key))
-    }
-    const options = items.filter((itemSubtype) => itemSubtype.text.toLowerCase().includes(query.toLowerCase()))
-    // Unless specified not to, sort the options:
-    if (sort !== false) {
-        options.sort((a, b) => a.text.localeCompare(b.text))
-    }
-    return (
-        <Popup
-            content={`Add a new ${itemType} here`}
-            on={["focus", "hover"]}
-            onOpen={() => setPopupTriggered(true)}
-            onClose={() => setPopupTriggered(false)}
-            open={!menuOpen && popupTriggered}
-            trigger={
-                <Dropdown
-                    basic
-                    className="button icon primary"
-                    floating
-                    onClose={() => setMenuOpen(false)}
-                    onKeyDown={(event) => {
-                        if (!menuOpen) {
-                            return
-                        }
-                        if (event.key === "Escape") {
-                            setQuery("")
-                        }
-                        if (!inputHasFocus) {
-                            // Allow for editing the query without the input having focus
-                            if (event.key === "Backspace") {
-                                setQuery(query.slice(0, query.length - 1))
-                            } else if (event.key.length === 1) {
-                                setQuery(query + event.key)
-                            }
-                        }
-                        if (options.length === 0) {
-                            return
-                        }
-                        if (event.key === "ArrowUp" || event.key === "ArrowDown") {
-                            let newIndex
-                            if (event.key === "ArrowUp") {
-                                newIndex = Math.max(selectedItem - 1, 0)
-                            } else {
-                                newIndex = Math.min(selectedItem + 1, options.length - 1)
-                            }
-                            setSelectedItem(newIndex)
-                            const activeMenuItem = event.target.querySelectorAll("[role='option']")[newIndex]
-                            activeMenuItem?.scrollIntoView({ block: "nearest" })
-                        }
-                        if (event.key === "Enter") {
-                            onClick(options[selectedItem].value)
-                        }
-                    }}
-                    onOpen={() => setMenuOpen(true)}
-                    selectOnBlur={false}
-                    selectOnNavigation={false}
-                    trigger={
-                        <>
-                            <Icon name="add" /> {`Add ${itemType} `}
-                        </>
-                    }
-                    value={null} // Without this, a selected item becomes active (shown bold in the menu) and can't be selected again
-                >
-                    <Dropdown.Menu style={{ minWidth: "50em" }}>
-                        <Dropdown.Header>{`Available ${itemType} types`}</Dropdown.Header>
-                        <Dropdown.Divider />
-                        <Input
-                            className="search"
-                            focus
-                            icon="search"
-                            iconPosition="left"
-                            onBlur={(event) => {
-                                setInputHasFocus(false)
-                                if (allItemSubtypes) {
-                                    event.stopPropagation()
-                                } // Prevent tabbing to the checkbox from clearing the input
-                            }}
-                            onChange={(_event, { value }) => setQuery(value)}
-                            onClick={stopEventPropagation}
-                            onFocus={() => {
-                                setInputHasFocus(true)
-                            }}
-                            onKeyDown={stopEventPropagationOnSpace}
-                            placeholder={`Filter ${itemType} types`}
-                            value={query}
-                        />
-                        <FilterCheckboxes
-                            itemType={itemType}
-                            allowHidingUnsupportedItems={allItemSubtypes?.length > 0}
-                            showUnsupportedItems={showUnsupportedItems}
-                            setShowUnsupportedItems={setShowUnsupportedItems}
-                            allowHidingUsedItems={usedItemSubtypeKeys?.length > 0}
-                            hideUsedItems={hideUsedItems}
-                            setHideUsedItems={setHideUsedItems}
-                        />
-                        <Dropdown.Menu scrolling>
-                            {options.map((option, index) => (
-                                <Dropdown.Item
-                                    content={option.content}
-                                    key={option.key}
-                                    onClick={(_event, { value }) => onClick(value)}
-                                    selected={selectedItem === index}
-                                    style={{ whiteSpace: "wrap" }}
-                                    text={option.text}
-                                    value={option.value}
-                                />
-                            ))}
-                        </Dropdown.Menu>
-                    </Dropdown.Menu>
-                </Dropdown>
-            }
-        />
-    )
-}
-AddDropdownButton.propTypes = {
-    allItemSubtypes: array,
-    itemSubtypes: array,
-    itemType: string,
-    onClick: func,
-    sort: bool,
-    usedItemSubtypeKeys: arrayOf(string),
-}
-
-export function AddButton({ itemType, onClick }) {
-    return (
-        <ActionButton
-            action="Add"
-            icon="plus"
-            itemType={itemType}
-            onClick={() => onClick()}
-            popup={`Add a new ${itemType} here`}
-        />
-    )
-}
-AddButton.propTypes = {
-    itemType: string,
-    onClick: func,
-}
-
-export function DeleteButton(props) {
-    return (
-        <ActionButton
-            action="Delete"
-            floated="right"
-            icon="trash"
-            negative
-            popup={`Delete this ${props.itemType}. Careful, this can only be undone by a system administrator!`}
-            position="top right"
-            {...props}
-        />
-    )
-}
-DeleteButton.propTypes = {
-    itemType: string,
-}
-
-function ReorderButton(props) {
-    const label = `Move ${props.moveable} to the ${props.direction} ${props.slot || "position"}`
-    const icon = { first: "double up", last: "double down", previous: "up", next: "down" }[props.direction]
-    const disabled =
-        (props.first && (props.direction === "first" || props.direction === "previous")) ||
-        (props.last && (props.direction === "last" || props.direction === "next"))
-    return (
-        <Popup
-            content={label}
-            trigger={
-                <Button
-                    aria-label={label}
-                    basic
-                    disabled={disabled}
-                    icon={`angle ${icon}`}
-                    onClick={() => props.onClick(props.direction)}
-                    primary
-                />
-            }
-        />
-    )
-}
-ReorderButton.propTypes = {
-    direction: string,
-    first: bool,
-    last: bool,
-    moveable: string,
-    onClick: func,
-    slot: string,
-}
-
-export function ReorderButtonGroup(props) {
-    return (
-        <Button.Group style={{ marginTop: "0px", marginRight: "5px" }}>
-            <ReorderButton {...props} direction="first" />
-            <ReorderButton {...props} direction="previous" />
-            <ReorderButton {...props} direction="next" />
-            <ReorderButton {...props} direction="last" />
-        </Button.Group>
-    )
-}
-
-function ActionAndItemPickerButton({ action, itemType, onChange, get_options, icon }) {
-    const [options, setOptions] = useState([])
-
-    const breadcrumbProps = { report: "report" }
-    if (itemType !== "report") {
-        breadcrumbProps.subject = "subject"
-        if (itemType !== "subject") {
-            breadcrumbProps.metric = "metric"
-            if (itemType !== "metric") {
-                breadcrumbProps.source = "source"
-            }
-        }
-    }
-    return (
-        <Popup
-            content={`${action} an existing ${itemType} here`}
-            trigger={
-                <Dropdown
-                    basic
-                    className="button icon primary"
-                    floating
-                    header={
-                        <Dropdown.Header>
-                            <ItemBreadcrumb size="tiny" {...breadcrumbProps} />
-                        </Dropdown.Header>
-                    }
-                    options={options}
-                    onChange={(_event, { value }) => onChange(value)}
-                    onOpen={() => setOptions(get_options())}
-                    scrolling
-                    selectOnBlur={false}
-                    selectOnNavigation={false}
-                    trigger={
-                        <>
-                            <Icon name={icon} /> {`${action} ${itemType} `}
-                        </>
-                    }
-                    value={null} // Without this, a selected item becomes active (shown bold in the menu) and can't be selected again
-                />
-            }
-        />
-    )
-}
-ActionAndItemPickerButton.propTypes = {
-    action: string,
-    itemType: string,
-    onChange: func,
-    get_options: func,
-    icon: string,
-}
-
-export function CopyButton(props) {
-    return <ActionAndItemPickerButton {...props} action="Copy" icon="copy" />
-}
-
-export function MoveButton(props) {
-    return <ActionAndItemPickerButton {...props} action="Move" icon="shuffle" />
-}
-
-export function PermLinkButton({ itemType, url }) {
-    if (window.isSecureContext) {
-        // Frontend runs in a secure context (https) so we can use the Clipboard API
-        return (
-            <Popup
-                content={`Copy a permanent link to this ${itemType} to the clipboard`}
-                trigger={
-                    <Button
-                        basic
-                        content={`Share ${itemType}`}
-                        icon="share square"
-                        onClick={() =>
-                            navigator.clipboard
-                                .writeText(url)
-                                .then(() => showMessage("success", "Copied URL to clipboard"))
-                                .catch((error) => showMessage("error", "Could not copy URL to clipboard", `${error}`))
-                        }
-                        primary
-                    />
-                }
-            />
-        )
-    }
-    return null
-}
-PermLinkButton.propTypes = {
-    itemType: string,
-    url: string,
-}
diff --git a/components/frontend/src/widgets/Button.test.js b/components/frontend/src/widgets/Button.test.js
deleted file mode 100644
index dc81ab5479..0000000000
--- a/components/frontend/src/widgets/Button.test.js
+++ /dev/null
@@ -1,367 +0,0 @@
-import { act, fireEvent, render, screen, waitFor } from "@testing-library/react"
-import userEvent from "@testing-library/user-event"
-
-import {
-    AddButton,
-    AddDropdownButton,
-    CopyButton,
-    DeleteButton,
-    MoveButton,
-    PermLinkButton,
-    ReorderButtonGroup,
-} from "./Button"
-import * as toast from "./toast"
-
-function renderAddDropdownButton({ nrItems = 2, totalItems = 10, usedItemKeys = [], sort = true } = {}) {
-    const mockCallback = jest.fn()
-    const itemSubtypes = []
-    let allItemSubtypes
-    if (nrItems < totalItems) {
-        allItemSubtypes = []
-        for (const index of Array(totalItems).keys()) {
-            const text = `Sub ${index + 1}`
-            const key = text.toLowerCase()
-            const option = { key: key, text: text, value: key }
-            allItemSubtypes.push(option)
-            if (index < nrItems) {
-                itemSubtypes.push(option)
-            }
-        }
-    }
-    render(
-        <AddDropdownButton
-            allItemSubtypes={allItemSubtypes}
-            itemType="foo"
-            itemSubtypes={itemSubtypes.toReversed()} // Pass items in reversed order to test they are sorted correctly
-            onClick={mockCallback}
-            usedItemSubtypeKeys={usedItemKeys}
-            sort={sort}
-        />,
-    )
-    return mockCallback
-}
-
-test("AddDropdownButton mouse navigation", async () => {
-    const mockCallback = renderAddDropdownButton()
-    await act(async () => {
-        fireEvent.click(screen.getByText(/Add foo/))
-    })
-    await act(async () => {
-        fireEvent.click(screen.getByText(/Sub 2/))
-    })
-    expect(mockCallback).toHaveBeenCalledWith("sub 2")
-})
-
-test("AddDropdownButton keyboard navigation", async () => {
-    const mockCallback = renderAddDropdownButton()
-    await act(async () => {
-        fireEvent.click(screen.getByText(/Add foo/))
-    })
-    await act(async () => {
-        fireEvent.keyDown(screen.getByText(/Available/), { key: "ArrowDown" })
-    })
-    await act(async () => {
-        fireEvent.keyDown(screen.getByText(/Available/), { key: "ArrowUp" })
-    })
-    await act(async () => {
-        fireEvent.keyDown(screen.getByText(/Available/), { key: "ArrowDown" })
-    })
-    await act(async () => {
-        fireEvent.keyDown(screen.getByText(/Sub 2/), { key: "Enter" })
-    })
-    expect(mockCallback).toHaveBeenCalledWith("sub 2")
-})
-
-test("AddDropdownButton is sorted", async () => {
-    renderAddDropdownButton()
-    await act(async () => {
-        fireEvent.click(screen.getByText(/Add foo/))
-    })
-    expect(screen.getAllByText(/Sub/).map((item) => item.innerHTML)).toStrictEqual(["Sub 1", "Sub 2"])
-})
-
-test("AddDropdownButton is not sorted", async () => {
-    renderAddDropdownButton({ sort: false })
-    await act(async () => {
-        fireEvent.click(screen.getByText(/Add foo/))
-    })
-    expect(screen.getAllByText(/Sub/).map((item) => item.innerHTML)).toStrictEqual(["Sub 2", "Sub 1"])
-})
-
-test("AddDropdownButton hides popup when dropdown is shown", async () => {
-    renderAddDropdownButton()
-    await userEvent.hover(screen.getByText(/Add foo/))
-    await waitFor(() => {
-        expect(screen.queryAllByText(/Add a new foo here/).length).toBe(1)
-    })
-    await act(async () => {
-        fireEvent.click(screen.getByText(/Add foo/))
-    })
-    expect(screen.queryAllByText(/Add a new foo here/).length).toBe(0) // Popup should disappear
-    await userEvent.type(screen.getByText(/Add foo/), "{Escape}") // Close dropdown
-    await userEvent.hover(screen.getByText(/Add foo/))
-    await waitFor(() => {
-        expect(screen.queryAllByText(/Add a new foo here/).length).toBe(1)
-    }) // Popup should appear again
-})
-
-test("AddDropdownButton filter one item", async () => {
-    const mockCallback = renderAddDropdownButton({ nrItems: 6 })
-    await act(async () => {
-        fireEvent.click(screen.getByText(/Add foo/))
-    })
-    await userEvent.type(screen.getByPlaceholderText(/Filter/), "Sub 6{Enter}")
-    expect(mockCallback).toHaveBeenCalledWith("sub 6")
-})
-
-test("AddDropdownButton filter one item without focus", async () => {
-    const mockCallback = renderAddDropdownButton({ nrItems: 6 })
-    await act(async () => {
-        fireEvent.click(screen.getByText(/Add foo/))
-    })
-    const dropdown = screen.getByText(/Add foo/)
-    await act(async () => {
-        fireEvent.keyDown(dropdown, { key: "9" })
-    })
-    await act(async () => {
-        fireEvent.keyDown(dropdown, { key: "Backspace" })
-    })
-    await act(async () => {
-        fireEvent.keyDown(dropdown, { key: "6" })
-    })
-    await act(async () => {
-        fireEvent.keyDown(dropdown, { key: "Enter" })
-    })
-    expect(mockCallback).toHaveBeenCalledWith("sub 6")
-})
-
-test("AddDropdownButton filter zero items", async () => {
-    const mockCallback = renderAddDropdownButton({ nrItems: 6 })
-    await act(async () => {
-        fireEvent.click(screen.getByText(/Add foo/))
-    })
-    await userEvent.type(screen.getByPlaceholderText(/Filter/), "FOO{Enter}")
-    expect(mockCallback).not.toHaveBeenCalled()
-})
-
-test("AddDropdownButton add all items", async () => {
-    const mockCallback = renderAddDropdownButton()
-    await act(async () => {
-        fireEvent.click(screen.getByText(/Add foo/))
-    })
-    await act(async () => {
-        fireEvent.click(screen.getByRole("checkbox"))
-    })
-    await act(async () => {
-        fireEvent.click(screen.getByText(/Sub 3/))
-    })
-    expect(mockCallback).toHaveBeenCalledWith("sub 3")
-})
-
-test("AddDropdownButton hide used items", async () => {
-    renderAddDropdownButton({ nrItems: 2, totalItems: 3, usedItemKeys: ["sub 1"] })
-    await act(async () => {
-        fireEvent.click(screen.getByText(/Add foo/))
-    })
-    await act(async () => {
-        fireEvent.click(screen.getAllByRole("checkbox")[1])
-    })
-    expect(screen.queryAllByText(/Sub 1/).length).toBe(0)
-})
-
-test("AddDropdownButton add all items by keyboard", async () => {
-    const mockCallback = renderAddDropdownButton()
-    await act(async () => {
-        fireEvent.click(screen.getByText(/Add foo/))
-    })
-    await userEvent.type(screen.getByRole("checkbox"), " ")
-    // Somehow the space does not trigger the checkbox, so hit Enter as well
-    await userEvent.type(screen.getByRole("checkbox"), "{Enter}")
-    await act(async () => {
-        fireEvent.click(screen.getByText(/Sub 3/))
-    })
-    expect(mockCallback).toHaveBeenCalledWith("sub 3")
-})
-
-test("AddDropdownButton resets query on escape", async () => {
-    const mockCallback = renderAddDropdownButton({ nrItems: 6 })
-    await act(async () => {
-        fireEvent.click(screen.getByText(/Add foo/))
-    })
-    await userEvent.type(screen.getByPlaceholderText(/Filter/), "FOO{Escape}")
-    await act(async () => {
-        fireEvent.click(screen.getByText(/Add foo/))
-    })
-    await act(async () => {
-        fireEvent.keyDown(screen.getByText(/Sub 1/), { key: "Enter" })
-    })
-    expect(mockCallback).toHaveBeenCalledWith("sub 1")
-})
-
-test("AddDropdownButton does not reset query on blur when it has checkbox", async () => {
-    renderAddDropdownButton()
-    await act(async () => {
-        fireEvent.click(screen.getByText(/Add foo/))
-    })
-    await userEvent.type(screen.getByPlaceholderText(/Filter/), "Sub 3{Tab}")
-    expect(screen.queryAllByText(/Sub 1/).length).toBe(0)
-})
-
-test("AddDropdownButton does reset query on blur when it has no checkbox", async () => {
-    renderAddDropdownButton({ nrItems: 10 })
-    await act(async () => {
-        fireEvent.click(screen.getByText(/Add foo/))
-    })
-    await userEvent.type(screen.getByPlaceholderText(/Filter/), "Sub 3{Tab}")
-    expect(screen.queryAllByText(/Sub 3/).length).toBe(0)
-})
-
-test("AddDropdownButton does not add selected item on enter when menu is closed", async () => {
-    const mockCallback = renderAddDropdownButton({ nrItems: 6 })
-    await act(async () => {
-        fireEvent.click(screen.getByText(/Add foo/))
-    })
-    await userEvent.type(screen.getByPlaceholderText(/Filter/), "Sub{Escape}")
-    await act(async () => {
-        fireEvent.keyDown(screen.getByText(/Add foo/), { key: "Enter" })
-    })
-    expect(mockCallback).not.toHaveBeenCalled()
-})
-
-test("AddButton has the correct label", () => {
-    render(<AddButton itemType="bar" />)
-    expect(screen.getAllByText(/bar/).length).toBe(1)
-})
-
-test("DeleteButton has the correct label", () => {
-    render(<DeleteButton itemType="bar" />)
-    expect(screen.getAllByText(/bar/).length).toBe(1)
-})
-
-Array("report", "subject", "metric", "source").forEach((itemType) => {
-    test("CopyButton has the correct label", () => {
-        render(<CopyButton itemType={itemType} />)
-        expect(screen.getAllByText(new RegExp(`Copy ${itemType}`)).length).toBe(1)
-    })
-
-    test("CopyButton can be used to select an item", async () => {
-        const mockCallback = jest.fn()
-        render(
-            <CopyButton
-                itemType={itemType}
-                onChange={mockCallback}
-                get_options={() => {
-                    return [{ key: "1", text: "Item", value: "1" }]
-                }}
-            />,
-        )
-        await act(async () => {
-            fireEvent.click(screen.getByText(new RegExp(`Copy ${itemType}`)))
-        })
-        await act(async () => {
-            fireEvent.click(screen.getByText(/Item/))
-        })
-        expect(mockCallback).toHaveBeenCalledWith("1")
-    })
-
-    test("CopyButton loads the options every time the menu is opened", async () => {
-        const mockCallback = jest.fn()
-        let get_options_called = 0
-        render(
-            <CopyButton
-                itemType={itemType}
-                onChange={mockCallback}
-                get_options={() => {
-                    get_options_called++
-                    return [{ key: "1", text: "Item", value: "1" }]
-                }}
-            />,
-        )
-        await act(async () => {
-            fireEvent.click(screen.getByText(new RegExp(`Copy ${itemType}`)))
-        })
-        fireEvent.click(screen.getByText(/Item/))
-        await act(async () => {
-            fireEvent.click(screen.getByText(new RegExp(`Copy ${itemType}`)))
-        })
-        expect(get_options_called).toBe(2)
-    })
-
-    test("MoveButton has the correct label", () => {
-        render(<MoveButton itemType={itemType} />)
-        expect(screen.getAllByText(new RegExp(`Move ${itemType}`)).length).toBe(1)
-    })
-
-    test("MoveButton can be used to select an item", async () => {
-        const mockCallback = jest.fn()
-        render(
-            <MoveButton
-                itemType={itemType}
-                onChange={mockCallback}
-                get_options={() => {
-                    return [{ key: "1", text: "Item", value: "1" }]
-                }}
-            />,
-        )
-        await act(async () => {
-            fireEvent.click(screen.getByText(new RegExp(`Move ${itemType}`)))
-        })
-        await act(async () => {
-            fireEvent.click(screen.getByText(/Item/))
-        })
-        expect(mockCallback).toHaveBeenCalledWith("1")
-    })
-})
-
-Array("first", "last", "previous", "next").forEach((direction) => {
-    test("ReorderButtonGroup calls the callback on click direction", async () => {
-        const mockCallback = jest.fn()
-        render(<ReorderButtonGroup onClick={mockCallback} moveable="item" />)
-        await act(async () => {
-            fireEvent.click(screen.getByLabelText(`Move item to the ${direction} position`))
-        })
-        expect(mockCallback).toHaveBeenCalledWith(direction)
-    })
-
-    test("ReorderButtonGroup does not call the callback on click direction when the button group is already there", () => {
-        const mockCallback = jest.fn()
-        render(<ReorderButtonGroup onClick={mockCallback} first={true} last={true} moveable="item" />)
-        fireEvent.click(screen.getByLabelText(`Move item to the ${direction} position`))
-        expect(mockCallback).not.toHaveBeenCalled()
-    })
-})
-
-test("PermLinkButton is not shown in an insecure context", () => {
-    Object.assign(window, { isSecureContext: false })
-    render(<PermLinkButton itemType="metric" url="https://example.org" />)
-    expect(screen.queryAllByText(/Share/).length).toBe(0)
-})
-
-test("PermLinkButton copies URL to clipboard", async () => {
-    toast.showMessage = jest.fn()
-    Object.assign(window, { isSecureContext: true })
-    Object.assign(navigator, {
-        clipboard: { writeText: jest.fn().mockImplementation(() => Promise.resolve()) },
-    })
-    render(<PermLinkButton itemType="metric" url="https://example.org" />)
-    await act(async () => {
-        fireEvent.click(screen.getByText(/Share/))
-    })
-    expect(navigator.clipboard.writeText).toHaveBeenCalledWith("https://example.org")
-    expect(toast.showMessage).toHaveBeenCalledWith("success", "Copied URL to clipboard")
-})
-
-test("PermLinkButton shows error message if copying fails", async () => {
-    toast.showMessage = jest.fn()
-    Object.assign(window, { isSecureContext: true })
-    Object.assign(navigator, {
-        clipboard: {
-            writeText: jest.fn().mockImplementation(() => Promise.reject(new Error("fail"))),
-        },
-    })
-    render(<PermLinkButton itemType="metric" url="https://example.org" />)
-    await act(async () => {
-        fireEvent.click(screen.getByText(/Share/))
-    })
-    expect(toast.showMessage).toHaveBeenCalledWith("error", "Could not copy URL to clipboard", "Error: fail")
-})
diff --git a/components/frontend/src/widgets/ButtonRow.js b/components/frontend/src/widgets/ButtonRow.js
new file mode 100644
index 0000000000..1f968891fa
--- /dev/null
+++ b/components/frontend/src/widgets/ButtonRow.js
@@ -0,0 +1,17 @@
+import { Box } from "@mui/material"
+import { element } from "prop-types"
+
+import { childrenPropType } from "../sharedPropTypes"
+
+export function ButtonRow({ children, rightButton }) {
+    return (
+        <Box sx={{ display: "flex", justifyContent: "space-between" }}>
+            <Box sx={{ display: "flex", columnGap: 1 }}>{children}</Box>
+            {rightButton}
+        </Box>
+    )
+}
+ButtonRow.propTypes = {
+    children: childrenPropType,
+    rightButton: element,
+}
diff --git a/components/frontend/src/widgets/HeaderWithDetails.js b/components/frontend/src/widgets/HeaderWithDetails.js
index 6389f391f4..32cc4d376f 100644
--- a/components/frontend/src/widgets/HeaderWithDetails.js
+++ b/components/frontend/src/widgets/HeaderWithDetails.js
@@ -2,8 +2,9 @@ import "./HeaderWithDetails.css"
 
 import { node, object, string } from "prop-types"
 
-import { Header, Icon, Segment } from "../semantic_ui_react_wrappers"
+import { Header, Segment } from "../semantic_ui_react_wrappers"
 import { childrenPropType, settingsPropType } from "../sharedPropTypes"
+import { CaretDown, CaretRight } from "./icons"
 
 export function HeaderWithDetails({ children, className, header, item_uuid, level, style, settings, subheader }) {
     const showDetails = settings.expandedItems.includes(item_uuid)
@@ -20,8 +21,8 @@ export function HeaderWithDetails({ children, className, header, item_uuid, leve
                 style={style}
                 tabIndex="0"
             >
-                <Icon className="Caret" title="expand" name={showDetails ? "caret down" : "caret right"} size="large" />
-                <Header.Content>
+                {showDetails ? <CaretDown /> : <CaretRight />}
+                <Header.Content style={{ verticalAlign: "middle" }}>
                     {header}
                     <Header.Subheader>{subheader}</Header.Subheader>
                 </Header.Content>
diff --git a/components/frontend/src/widgets/LabelWithHelp.js b/components/frontend/src/widgets/LabelWithHelp.js
index f09b9849c7..1d744eb063 100644
--- a/components/frontend/src/widgets/LabelWithHelp.js
+++ b/components/frontend/src/widgets/LabelWithHelp.js
@@ -12,7 +12,7 @@ export function LabelWithHelp({ labelId, labelFor, label, help, hoverable }) {
                 hoverable={hoverable}
                 on={["hover", "focus"]}
                 content={help}
-                trigger={<HelpIcon fontSize="inherit" data-testid="help-icon" tabIndex="0" />}
+                trigger={<HelpIcon fontSize="inherit" tabIndex="0" />}
                 wide
             />
         </label>
diff --git a/components/frontend/src/widgets/LabelWithHelp.test.js b/components/frontend/src/widgets/LabelWithHelp.test.js
index 05e4143cb4..0e2b471787 100644
--- a/components/frontend/src/widgets/LabelWithHelp.test.js
+++ b/components/frontend/src/widgets/LabelWithHelp.test.js
@@ -10,7 +10,7 @@ it("shows the label", () => {
 
 it("shows the help", async () => {
     render(<LabelWithHelp label="Hello" help="Help" />)
-    await userEvent.hover(screen.queryByTestId("help-icon"))
+    await userEvent.hover(screen.queryByTestId("HelpIcon"))
     await waitFor(() => {
         expect(screen.queryByText(/Help/)).not.toBe(null)
     })
diff --git a/components/frontend/src/widgets/ReadTheDocsLink.js b/components/frontend/src/widgets/ReadTheDocsLink.js
new file mode 100644
index 0000000000..87b6dde7b6
--- /dev/null
+++ b/components/frontend/src/widgets/ReadTheDocsLink.js
@@ -0,0 +1,15 @@
+import HelpIcon from "@mui/icons-material/Help"
+import { string } from "prop-types"
+
+import { HyperLink } from "./HyperLink"
+
+export function ReadTheDocsLink({ url }) {
+    return (
+        <HyperLink url={url}>
+            Read the Docs <HelpIcon fontSize="small" sx={{ verticalAlign: "middle" }} />
+        </HyperLink>
+    )
+}
+ReadTheDocsLink.propTypes = {
+    url: string,
+}
diff --git a/components/frontend/src/widgets/TabPane.js b/components/frontend/src/widgets/TabPane.js
index 95e5a3ff20..5d578bd426 100644
--- a/components/frontend/src/widgets/TabPane.js
+++ b/components/frontend/src/widgets/TabPane.js
@@ -1,13 +1,15 @@
 import "./TabPane.css"
 
+import HistoryIcon from "@mui/icons-material/History"
+import SettingsIcon from "@mui/icons-material/Settings"
 import { bool, element, oneOfType, string } from "prop-types"
 import { useContext } from "react"
 import { Menu } from "semantic-ui-react"
 
 import { DarkMode } from "../context/DarkMode"
-import { Icon, Label, Tab } from "../semantic_ui_react_wrappers"
+import { Label, Tab } from "../semantic_ui_react_wrappers"
 
-function FocusableTab({ error, iconName, image, label, warning }) {
+function FocusableTab({ error, icon, image, label, warning }) {
     const className = useContext(DarkMode) ? "tabbutton inverted" : "tabbutton"
     let tabLabel = label
     if (error || warning) {
@@ -16,14 +18,13 @@ function FocusableTab({ error, iconName, image, label, warning }) {
     }
     return (
         <>
-            {iconName ? <Icon name={iconName} size="large" /> : image}
-            <button className={className}>{tabLabel}</button>
+            {icon || image}&nbsp;<button className={className}>{tabLabel}</button>
         </>
     )
 }
 FocusableTab.propTypes = {
     error: bool,
-    iconName: string,
+    icon: element,
     image: element,
     label: oneOfType([element, string]),
     warning: bool,
@@ -36,7 +37,7 @@ export function tabPane(label, pane, options) {
             <Menu.Item key={label}>
                 <FocusableTab
                     error={options?.error}
-                    iconName={options?.iconName}
+                    icon={options?.icon}
                     image={options?.image}
                     label={label}
                     warning={options?.warning}
@@ -48,9 +49,9 @@ export function tabPane(label, pane, options) {
 }
 
 export function configurationTabPane(pane, options) {
-    return tabPane("Configuration", pane, { ...options, iconName: "settings" })
+    return tabPane("Configuration", pane, { ...options, icon: <SettingsIcon /> })
 }
 
 export function changelogTabPane(pane, options) {
-    return tabPane("Changelog", pane, { ...options, iconName: "history" })
+    return tabPane("Changelog", pane, { ...options, icon: <HistoryIcon /> })
 }
diff --git a/components/frontend/src/widgets/TabPane.test.js b/components/frontend/src/widgets/TabPane.test.js
index 0b1edf5456..8587d2c9bd 100644
--- a/components/frontend/src/widgets/TabPane.test.js
+++ b/components/frontend/src/widgets/TabPane.test.js
@@ -1,3 +1,4 @@
+import StorageIcon from "@mui/icons-material/Storage"
 import { render, screen } from "@testing-library/react"
 
 import { DarkMode } from "../context/DarkMode"
@@ -29,8 +30,8 @@ it("shows the tab yellow when there is a warning", () => {
 })
 
 it("shows an icon", () => {
-    const { container } = render(<Tab panes={[tabPane("Tab", <p>Pane</p>, { iconName: "server" })]} />)
-    expect(container.firstChild.firstChild.firstChild.firstChild.className).toEqual(expect.stringContaining("server"))
+    render(<Tab panes={[tabPane("Tab", <p>Pane</p>, { icon: <StorageIcon /> })]} />)
+    expect(screen.getAllByTestId("StorageIcon").length).toBe(1)
 })
 
 it("shows an image", () => {
diff --git a/components/frontend/src/widgets/TableRowWithDetails.js b/components/frontend/src/widgets/TableRowWithDetails.js
index 542c5bcd22..361c777308 100644
--- a/components/frontend/src/widgets/TableRowWithDetails.js
+++ b/components/frontend/src/widgets/TableRowWithDetails.js
@@ -2,8 +2,9 @@ import "./TableRowWithDetails.css"
 
 import { bool, func, object } from "prop-types"
 
-import { Button, Icon, Table } from "../semantic_ui_react_wrappers"
+import { Button, Table } from "../semantic_ui_react_wrappers"
 import { childrenPropType } from "../sharedPropTypes"
+import { CaretDown, CaretRight } from "./icons"
 
 export function TableRowWithDetails(props) {
     const { children, details, expanded, onExpand, style, ...otherProps } = props
@@ -15,8 +16,9 @@ export function TableRowWithDetails(props) {
                         aria-label="Expand/collapse"
                         basic
                         className="expandcollapse"
-                        icon={<Icon name={expanded ? "caret down" : "caret right"} size="large" />}
+                        icon={expanded ? <CaretDown /> : <CaretRight />}
                         onClick={() => onExpand(!expanded)}
+                        style={{ padding: "0pt" }}
                     />
                 </Table.Cell>
                 {children}
diff --git a/components/frontend/src/widgets/buttons/ActionAndItemPickerButton.js b/components/frontend/src/widgets/buttons/ActionAndItemPickerButton.js
new file mode 100644
index 0000000000..9f4728cc8b
--- /dev/null
+++ b/components/frontend/src/widgets/buttons/ActionAndItemPickerButton.js
@@ -0,0 +1,67 @@
+import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown"
+import { Button, Menu, MenuItem, Tooltip, Typography } from "@mui/material"
+import { element, func, string } from "prop-types"
+import { useState } from "react"
+
+import { ItemBreadcrumb } from "../ItemBreadcrumb"
+
+export function ActionAndItemPickerButton({ action, itemType, onChange, get_options, icon }) {
+    const [anchorEl, setAnchorEl] = useState()
+    const handleMenu = (event) => setAnchorEl(event.currentTarget)
+    const onClick = (value) => {
+        onChange(value)
+        setAnchorEl(null)
+    }
+
+    const breadcrumbProps = { report: "report" }
+    if (itemType !== "report") {
+        breadcrumbProps.subject = "subject"
+        if (itemType !== "subject") {
+            breadcrumbProps.metric = "metric"
+            if (itemType !== "metric") {
+                breadcrumbProps.source = "source"
+            }
+        }
+    }
+    return (
+        <>
+            <Tooltip title={`${action} an existing ${itemType} here`} placement="top">
+                <Button aria-controls="action-menu" onClick={handleMenu} variant="outlined">
+                    {icon}&nbsp;{`${action} ${itemType} `}
+                    <ArrowDropDownIcon />
+                </Button>
+            </Tooltip>
+            <Menu
+                id="action-menu"
+                anchorEl={anchorEl}
+                onClose={() => setAnchorEl(null)}
+                open={Boolean(anchorEl)}
+                slotProps={{
+                    paper: {
+                        style: {
+                            maxHeight: 250,
+                        },
+                    },
+                }}
+            >
+                <MenuItem disabled divider>
+                    <Typography variant="button">
+                        <ItemBreadcrumb size="tiny" {...breadcrumbProps} />
+                    </Typography>
+                </MenuItem>
+                {get_options().map((option) => (
+                    <MenuItem key={option.key} onClick={() => onClick(option.value)}>
+                        {option.content}
+                    </MenuItem>
+                ))}
+            </Menu>
+        </>
+    )
+}
+ActionAndItemPickerButton.propTypes = {
+    action: string,
+    itemType: string,
+    onChange: func,
+    get_options: func,
+    icon: element,
+}
diff --git a/components/frontend/src/widgets/buttons/ActionButton.js b/components/frontend/src/widgets/buttons/ActionButton.js
new file mode 100644
index 0000000000..05c15ac0ea
--- /dev/null
+++ b/components/frontend/src/widgets/buttons/ActionButton.js
@@ -0,0 +1,27 @@
+import { Button, Tooltip } from "@mui/material"
+import { bool, element, func, string } from "prop-types"
+
+import { popupContentPropType } from "../../sharedPropTypes"
+
+export function ActionButton(props) {
+    const { action, color, disabled, icon, itemType, onClick, popup } = props
+    const label = `${action} ${itemType}`
+    return (
+        <Tooltip title={popup}>
+            <span /* https://mui.com/material-ui/react-tooltip/#disabled-elements */>
+                <Button color={color} disabled={disabled} onClick={() => onClick()} startIcon={icon} variant="outlined">
+                    {label}
+                </Button>
+            </span>
+        </Tooltip>
+    )
+}
+ActionButton.propTypes = {
+    action: string,
+    color: string,
+    disabled: bool,
+    icon: element,
+    itemType: string,
+    onClick: func,
+    popup: popupContentPropType,
+}
diff --git a/components/frontend/src/widgets/buttons/AddButton.js b/components/frontend/src/widgets/buttons/AddButton.js
new file mode 100644
index 0000000000..ed1eaaf9a4
--- /dev/null
+++ b/components/frontend/src/widgets/buttons/AddButton.js
@@ -0,0 +1,20 @@
+import { func, string } from "prop-types"
+
+import { AddItemIcon } from "../icons"
+import { ActionButton } from "./ActionButton"
+
+export function AddButton({ itemType, onClick }) {
+    return (
+        <ActionButton
+            action="Add"
+            icon={<AddItemIcon />}
+            itemType={itemType}
+            onClick={onClick}
+            popup={`Add a new ${itemType} here`}
+        />
+    )
+}
+AddButton.propTypes = {
+    itemType: string,
+    onClick: func,
+}
diff --git a/components/frontend/src/widgets/buttons/AddButton.test.js b/components/frontend/src/widgets/buttons/AddButton.test.js
new file mode 100644
index 0000000000..e7703ae62a
--- /dev/null
+++ b/components/frontend/src/widgets/buttons/AddButton.test.js
@@ -0,0 +1,8 @@
+import { render, screen } from "@testing-library/react"
+
+import { AddButton } from "./AddButton"
+
+test("AddButton has the correct label", () => {
+    render(<AddButton itemType="bar" />)
+    expect(screen.getAllByText(/bar/).length).toBe(1)
+})
diff --git a/components/frontend/src/widgets/buttons/AddDropdownButton.js b/components/frontend/src/widgets/buttons/AddDropdownButton.js
new file mode 100644
index 0000000000..6f41cf4a13
--- /dev/null
+++ b/components/frontend/src/widgets/buttons/AddDropdownButton.js
@@ -0,0 +1,150 @@
+import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown"
+import {
+    Button,
+    Checkbox,
+    FormControlLabel,
+    FormGroup,
+    MenuItem,
+    MenuList,
+    Popover,
+    TextField,
+    Tooltip,
+    Typography,
+} from "@mui/material"
+import { array, arrayOf, bool, func, string } from "prop-types"
+import { useState } from "react"
+
+import { AddItemIcon } from "../icons"
+
+function FilterCheckbox({ label, filter, setFilter }) {
+    return (
+        <FormControlLabel
+            control={
+                <Checkbox
+                    checked={filter}
+                    inputProps={{ "aria-label": "controlled" }}
+                    onChange={() => setFilter(!filter)}
+                />
+            }
+            label={label}
+        />
+    )
+}
+FilterCheckbox.propTypes = {
+    label: string,
+    filter: bool,
+    setFilter: func,
+}
+
+function FilterCheckboxes({
+    itemType,
+    allowHidingUnsupportedItems,
+    showUnsupportedItems,
+    setShowUnsupportedItems,
+    allowHidingUsedItems,
+    hideUsedItems,
+    setHideUsedItems,
+}) {
+    if (!allowHidingUnsupportedItems && !allowHidingUsedItems) {
+        return null
+    }
+    return (
+        <FormGroup row sx={{ ml: "10px" }}>
+            {allowHidingUnsupportedItems && (
+                <FilterCheckbox
+                    label={`Select from all ${itemType} types`}
+                    filter={showUnsupportedItems}
+                    setFilter={setShowUnsupportedItems}
+                />
+            )}
+            {allowHidingUsedItems && (
+                <FilterCheckbox
+                    label={`Hide ${itemType} types already used`}
+                    filter={hideUsedItems}
+                    setFilter={setHideUsedItems}
+                />
+            )}
+        </FormGroup>
+    )
+}
+FilterCheckboxes.propTypes = {
+    itemType: string,
+    allowHidingUnsupportedItems: bool,
+    showUnsupportedItems: bool,
+    setShowUnsupportedItems: func,
+    allowHidingUsedItems: bool,
+    hideUsedItems: bool,
+    setHideUsedItems: func,
+}
+
+export function AddDropdownButton({ itemSubtypes, itemType, onClick, allItemSubtypes, usedItemSubtypeKeys, sort }) {
+    const [anchorEl, setAnchorEl] = useState()
+    const handleMenu = (event) => setAnchorEl(event.currentTarget)
+    const onClickMenuItem = (value) => {
+        onClick(value)
+        setAnchorEl(null)
+    }
+    const [query, setQuery] = useState("") // Search query to filter item subtypes
+    const [showUnsupportedItems, setShowUnsupportedItems] = useState(false) // Show only supported itemSubTypes or also unsupported itemSubTypes?
+    const [hideUsedItems, setHideUsedItems] = useState(false) // Hide itemSubTypes already used?
+    let items = showUnsupportedItems ? allItemSubtypes : itemSubtypes
+    if (hideUsedItems) {
+        items = items.filter((item) => !usedItemSubtypeKeys.includes(item.key))
+    }
+    const options = items.filter((itemSubtype) => itemSubtype.text.toLowerCase().includes(query.toLowerCase()))
+    // Unless specified not to, sort the options:
+    if (sort !== false) {
+        options.sort((a, b) => a.text.localeCompare(b.text))
+    }
+    return (
+        <>
+            <Tooltip title={`Add a new ${itemType} here`} placement="top">
+                <Button aria-describedby="dropdown-menu" onClick={handleMenu} variant="outlined">
+                    <AddItemIcon /> {`Add ${itemType} `} <ArrowDropDownIcon />
+                </Button>
+            </Tooltip>
+            <Popover id="dropdown-menu" anchorEl={anchorEl} onClose={() => setAnchorEl(null)} open={Boolean(anchorEl)}>
+                <TextField
+                    fullWidth
+                    label={`Filter ${itemType} types`}
+                    onChange={(event) => setQuery(event.target.value)}
+                    value={query}
+                    variant="outlined"
+                    sx={{ ml: "10px", mt: "10px", pr: "20px" }}
+                    type="search"
+                />
+                <FilterCheckboxes
+                    itemType={itemType}
+                    allowHidingUnsupportedItems={allItemSubtypes?.length > 0}
+                    showUnsupportedItems={showUnsupportedItems}
+                    setShowUnsupportedItems={setShowUnsupportedItems}
+                    allowHidingUsedItems={usedItemSubtypeKeys?.length > 0}
+                    hideUsedItems={hideUsedItems}
+                    setHideUsedItems={setHideUsedItems}
+                />
+                <MenuList sx={{ height: "30vh", width: "50vw" }}>
+                    <MenuItem disabled divider>
+                        <Typography variant="button">{`Available ${itemType} types`}</Typography>
+                    </MenuItem>
+                    {options.map((option) => (
+                        <MenuItem
+                            key={option.key}
+                            onClick={() => onClickMenuItem(option.value)}
+                            sx={{ whiteSpace: "wrap" }}
+                        >
+                            {option.content}
+                        </MenuItem>
+                    ))}
+                </MenuList>
+            </Popover>
+        </>
+    )
+}
+AddDropdownButton.propTypes = {
+    allItemSubtypes: array,
+    itemSubtypes: array,
+    itemType: string,
+    onClick: func,
+    sort: bool,
+    usedItemSubtypeKeys: arrayOf(string),
+}
diff --git a/components/frontend/src/widgets/buttons/AddDropdownButton.test.js b/components/frontend/src/widgets/buttons/AddDropdownButton.test.js
new file mode 100644
index 0000000000..6c09d13de5
--- /dev/null
+++ b/components/frontend/src/widgets/buttons/AddDropdownButton.test.js
@@ -0,0 +1,145 @@
+import { act, fireEvent, render, screen } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+
+import { AddDropdownButton } from "./AddDropdownButton"
+
+function renderAddDropdownButton({ nrItems = 2, totalItems = 10, usedItemKeys = [], sort = true } = {}) {
+    const mockCallback = jest.fn()
+    const itemSubtypes = []
+    let allItemSubtypes
+    if (nrItems < totalItems) {
+        allItemSubtypes = []
+        for (const index of Array(totalItems).keys()) {
+            const text = `Sub ${index + 1}`
+            const key = text.toLowerCase()
+            const option = { key: key, text: text, value: key, content: text }
+            allItemSubtypes.push(option)
+            if (index < nrItems) {
+                itemSubtypes.push(option)
+            }
+        }
+    }
+    render(
+        <AddDropdownButton
+            allItemSubtypes={allItemSubtypes}
+            itemType="foo"
+            itemSubtypes={itemSubtypes.toReversed()} // Pass items in reversed order to test they are sorted correctly
+            onClick={mockCallback}
+            usedItemSubtypeKeys={usedItemKeys}
+            sort={sort}
+        />,
+    )
+    return mockCallback
+}
+
+test("AddDropdownButton mouse navigation", async () => {
+    const mockCallback = renderAddDropdownButton()
+    await act(async () => {
+        fireEvent.click(screen.getByText(/Add foo/))
+    })
+    await act(async () => {
+        fireEvent.click(screen.getByText(/Sub 2/))
+    })
+    expect(mockCallback).toHaveBeenCalledWith("sub 2")
+})
+
+test("AddDropdownButton keyboard navigation", async () => {
+    const mockCallback = renderAddDropdownButton()
+    await act(async () => {
+        fireEvent.click(screen.getByText(/Add foo/))
+    })
+    await act(async () => {
+        fireEvent.keyDown(screen.getByText(/Available/), { key: "ArrowDown" })
+    })
+    await act(async () => {
+        fireEvent.keyDown(screen.getByText(/Available/), { key: "ArrowUp" })
+    })
+    await act(async () => {
+        fireEvent.keyDown(screen.getByText(/Available/), { key: "ArrowDown" })
+    })
+    await act(async () => {
+        fireEvent.keyDown(screen.getByText(/Sub 2/), { key: "Enter" })
+    })
+    expect(mockCallback).toHaveBeenCalledWith("sub 2")
+})
+
+test("AddDropdownButton is sorted", async () => {
+    renderAddDropdownButton()
+    await act(async () => {
+        fireEvent.click(screen.getByText(/Add foo/))
+    })
+    expect(screen.getAllByText(/Sub/).map((item) => item.innerHTML)).toStrictEqual(["Sub 1", "Sub 2"])
+})
+
+test("AddDropdownButton is not sorted", async () => {
+    renderAddDropdownButton({ sort: false })
+    await act(async () => {
+        fireEvent.click(screen.getByText(/Add foo/))
+    })
+    expect(screen.getAllByText(/Sub/).map((item) => item.innerHTML)).toStrictEqual(["Sub 2", "Sub 1"])
+})
+
+test("AddDropdownButton filter one item", async () => {
+    renderAddDropdownButton({ nrItems: 6 })
+    await act(async () => {
+        fireEvent.click(screen.getByText(/Add foo/))
+    })
+    await userEvent.type(screen.getByRole("searchbox"), "Sub 3")
+    expect(screen.getAllByText(/Sub/).map((item) => item.innerHTML)).toStrictEqual(["Sub 3"])
+})
+
+test("AddDropdownButton filter zero items", async () => {
+    renderAddDropdownButton({ nrItems: 6 })
+    await act(async () => {
+        fireEvent.click(screen.getByText(/Add foo/))
+    })
+    await userEvent.type(screen.getByRole("searchbox"), "FOO{Enter}")
+    expect(screen.queryAllByText(/Sub/).length).toBe(0)
+})
+
+test("AddDropdownButton select from all items", async () => {
+    const mockCallback = renderAddDropdownButton()
+    await act(async () => {
+        fireEvent.click(screen.getByText(/Add foo/))
+    })
+    await act(async () => {
+        fireEvent.click(screen.getByRole("checkbox"))
+    })
+    await act(async () => {
+        fireEvent.click(screen.getByText(/Sub 3/))
+    })
+    expect(mockCallback).toHaveBeenCalledWith("sub 3")
+})
+
+test("AddDropdownButton hide used items", async () => {
+    renderAddDropdownButton({ nrItems: 2, totalItems: 3, usedItemKeys: ["sub 1"] })
+    await act(async () => {
+        fireEvent.click(screen.getByText(/Add foo/))
+    })
+    await act(async () => {
+        fireEvent.click(screen.getAllByRole("checkbox")[1])
+    })
+    expect(screen.queryAllByText(/Sub 1/).length).toBe(0)
+})
+
+test("AddDropdownButton add all items by keyboard", async () => {
+    const mockCallback = renderAddDropdownButton()
+    await act(async () => {
+        fireEvent.click(screen.getByText(/Add foo/))
+    })
+    await userEvent.type(screen.getByRole("checkbox"), "{Enter}")
+    await act(async () => {
+        fireEvent.click(screen.getByText(/Sub 3/))
+    })
+    expect(mockCallback).toHaveBeenCalledWith("sub 3")
+})
+
+test("AddDropdownButton menu can be closed without selecting an item", async () => {
+    const mockCallback = renderAddDropdownButton()
+    await act(async () => {
+        fireEvent.click(screen.getByText(/Add foo/))
+    })
+    await userEvent.keyboard("{Escape}")
+    expect(screen.queryAllByText(/Sub/).length).toBe(0)
+    expect(mockCallback).not.toHaveBeenCalled()
+})
diff --git a/components/frontend/src/widgets/buttons/CopyButton.js b/components/frontend/src/widgets/buttons/CopyButton.js
new file mode 100644
index 0000000000..6a1f9a90ba
--- /dev/null
+++ b/components/frontend/src/widgets/buttons/CopyButton.js
@@ -0,0 +1,6 @@
+import { CopyItemIcon } from "../icons"
+import { ActionAndItemPickerButton } from "./ActionAndItemPickerButton"
+
+export function CopyButton(props) {
+    return <ActionAndItemPickerButton {...props} action="Copy" icon={<CopyItemIcon />} />
+}
diff --git a/components/frontend/src/widgets/buttons/CopyButton.test.js b/components/frontend/src/widgets/buttons/CopyButton.test.js
new file mode 100644
index 0000000000..e77e4454c5
--- /dev/null
+++ b/components/frontend/src/widgets/buttons/CopyButton.test.js
@@ -0,0 +1,69 @@
+import { act, fireEvent, render, screen } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+
+import { CopyButton } from "./CopyButton"
+
+function renderCopyButton(itemType, mockCallback) {
+    render(
+        <CopyButton
+            itemType={itemType}
+            onChange={mockCallback}
+            get_options={() => {
+                return [{ key: "1", text: "Item", value: "1", content: "Item" }]
+            }}
+        />,
+    )
+}
+
+Array("report", "subject", "metric", "source").forEach((itemType) => {
+    test("CopyButton has the correct label", () => {
+        render(<CopyButton itemType={itemType} get_options={() => []} />)
+        expect(screen.getAllByText(new RegExp(`Copy ${itemType}`)).length).toBe(1)
+    })
+
+    test("CopyButton can be used to select an item", async () => {
+        const mockCallback = jest.fn()
+        renderCopyButton(itemType, mockCallback)
+        await act(async () => {
+            fireEvent.click(screen.getByText(new RegExp(`Copy ${itemType}`)))
+        })
+        await act(async () => {
+            fireEvent.click(screen.getByText(/Item/))
+        })
+        expect(mockCallback).toHaveBeenCalledWith("1")
+    })
+
+    test("CopyButton menu can be closed without selecting an item", async () => {
+        const mockCallback = jest.fn()
+        renderCopyButton(itemType, mockCallback)
+        await act(async () => {
+            fireEvent.click(screen.getByText(new RegExp(`Copy ${itemType}`)))
+        })
+        await userEvent.keyboard("{Escape}")
+        expect(screen.queryAllByText(/Item/).length).toBe(0)
+        expect(mockCallback).not.toHaveBeenCalled()
+    })
+
+    test("CopyButton loads the options every time the menu is opened", async () => {
+        const mockCallback = jest.fn()
+        let get_options_called = 0
+        render(
+            <CopyButton
+                itemType={itemType}
+                onChange={mockCallback}
+                get_options={() => {
+                    get_options_called++
+                    return [{ key: "1", text: "Item", value: "1", content: "Item" }]
+                }}
+            />,
+        )
+        await act(async () => {
+            fireEvent.click(screen.getByText(new RegExp(`Copy ${itemType}`)))
+        })
+        fireEvent.click(screen.getByText(/Item/))
+        await act(async () => {
+            fireEvent.click(screen.getByText(new RegExp(`Copy ${itemType}`)))
+        })
+        expect(get_options_called).toBe(4)
+    })
+})
diff --git a/components/frontend/src/widgets/buttons/DeleteButton.js b/components/frontend/src/widgets/buttons/DeleteButton.js
new file mode 100644
index 0000000000..fc53dd882c
--- /dev/null
+++ b/components/frontend/src/widgets/buttons/DeleteButton.js
@@ -0,0 +1,19 @@
+import { string } from "prop-types"
+
+import { DeleteItemIcon } from "../icons"
+import { ActionButton } from "./ActionButton"
+
+export function DeleteButton(props) {
+    return (
+        <ActionButton
+            action="Delete"
+            color="warning"
+            icon={<DeleteItemIcon />}
+            popup={`Delete this ${props.itemType}. Careful, this can only be undone by a system administrator!`}
+            {...props}
+        />
+    )
+}
+DeleteButton.propTypes = {
+    itemType: string,
+}
diff --git a/components/frontend/src/widgets/buttons/DeleteButton.test.js b/components/frontend/src/widgets/buttons/DeleteButton.test.js
new file mode 100644
index 0000000000..0ac989c767
--- /dev/null
+++ b/components/frontend/src/widgets/buttons/DeleteButton.test.js
@@ -0,0 +1,8 @@
+import { render, screen } from "@testing-library/react"
+
+import { DeleteButton } from "./DeleteButton"
+
+test("DeleteButton has the correct label", () => {
+    render(<DeleteButton itemType="bar" />)
+    expect(screen.getAllByText(/bar/).length).toBe(1)
+})
diff --git a/components/frontend/src/widgets/buttons/MoveButton.js b/components/frontend/src/widgets/buttons/MoveButton.js
new file mode 100644
index 0000000000..35dfbf5a57
--- /dev/null
+++ b/components/frontend/src/widgets/buttons/MoveButton.js
@@ -0,0 +1,6 @@
+import { MoveItemIcon } from "../icons"
+import { ActionAndItemPickerButton } from "./ActionAndItemPickerButton"
+
+export function MoveButton(props) {
+    return <ActionAndItemPickerButton {...props} action="Move" icon={<MoveItemIcon />} />
+}
diff --git a/components/frontend/src/widgets/buttons/MoveButton.test.js b/components/frontend/src/widgets/buttons/MoveButton.test.js
new file mode 100644
index 0000000000..181bda307e
--- /dev/null
+++ b/components/frontend/src/widgets/buttons/MoveButton.test.js
@@ -0,0 +1,10 @@
+import { render, screen } from "@testing-library/react"
+
+import { MoveButton } from "./MoveButton"
+
+Array("report", "subject", "metric", "source").forEach((itemType) => {
+    test("MoveButton has the correct label", () => {
+        render(<MoveButton itemType={itemType} get_options={() => []} />)
+        expect(screen.getAllByText(new RegExp(`Move ${itemType}`)).length).toBe(1)
+    })
+})
diff --git a/components/frontend/src/widgets/buttons/PermLinkButton.js b/components/frontend/src/widgets/buttons/PermLinkButton.js
new file mode 100644
index 0000000000..0ef21ac489
--- /dev/null
+++ b/components/frontend/src/widgets/buttons/PermLinkButton.js
@@ -0,0 +1,32 @@
+import { Button, Tooltip } from "@mui/material"
+import { string } from "prop-types"
+
+import { OpenLink } from "../icons"
+import { showMessage } from "../toast"
+
+export function PermLinkButton({ itemType, url }) {
+    if (window.isSecureContext) {
+        // Frontend runs in a secure context (https) so we can use the Clipboard API
+        return (
+            <Tooltip title={`Copy a permanent link to this ${itemType} to the clipboard`}>
+                <Button
+                    onClick={() =>
+                        navigator.clipboard
+                            .writeText(url)
+                            .then(() => showMessage("success", "Copied URL to clipboard"))
+                            .catch((error) => showMessage("error", "Could not copy URL to clipboard", `${error}`))
+                    }
+                    startIcon={<OpenLink />}
+                    variant="outlined"
+                >
+                    {`Share ${itemType}`}
+                </Button>
+            </Tooltip>
+        )
+    }
+    return null
+}
+PermLinkButton.propTypes = {
+    itemType: string,
+    url: string,
+}
diff --git a/components/frontend/src/widgets/buttons/PermLinkButton.test.js b/components/frontend/src/widgets/buttons/PermLinkButton.test.js
new file mode 100644
index 0000000000..815a007472
--- /dev/null
+++ b/components/frontend/src/widgets/buttons/PermLinkButton.test.js
@@ -0,0 +1,39 @@
+import { act, fireEvent, render, screen } from "@testing-library/react"
+
+import * as toast from "../toast"
+import { PermLinkButton } from "./PermLinkButton"
+
+test("PermLinkButton is not shown in an insecure context", () => {
+    Object.assign(window, { isSecureContext: false })
+    render(<PermLinkButton itemType="metric" url="https://example.org" />)
+    expect(screen.queryAllByText(/Share/).length).toBe(0)
+})
+
+test("PermLinkButton copies URL to clipboard", async () => {
+    toast.showMessage = jest.fn()
+    Object.assign(window, { isSecureContext: true })
+    Object.assign(navigator, {
+        clipboard: { writeText: jest.fn().mockImplementation(() => Promise.resolve()) },
+    })
+    render(<PermLinkButton itemType="metric" url="https://example.org" />)
+    await act(async () => {
+        fireEvent.click(screen.getByText(/Share/))
+    })
+    expect(navigator.clipboard.writeText).toHaveBeenCalledWith("https://example.org")
+    expect(toast.showMessage).toHaveBeenCalledWith("success", "Copied URL to clipboard")
+})
+
+test("PermLinkButton shows error message if copying fails", async () => {
+    toast.showMessage = jest.fn()
+    Object.assign(window, { isSecureContext: true })
+    Object.assign(navigator, {
+        clipboard: {
+            writeText: jest.fn().mockImplementation(() => Promise.reject(new Error("fail"))),
+        },
+    })
+    render(<PermLinkButton itemType="metric" url="https://example.org" />)
+    await act(async () => {
+        fireEvent.click(screen.getByText(/Share/))
+    })
+    expect(toast.showMessage).toHaveBeenCalledWith("error", "Could not copy URL to clipboard", "Error: fail")
+})
diff --git a/components/frontend/src/widgets/buttons/ReorderButtonGroup.js b/components/frontend/src/widgets/buttons/ReorderButtonGroup.js
new file mode 100644
index 0000000000..e187908c46
--- /dev/null
+++ b/components/frontend/src/widgets/buttons/ReorderButtonGroup.js
@@ -0,0 +1,47 @@
+import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown"
+import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp"
+import KeyboardDoubleArrowDownIcon from "@mui/icons-material/KeyboardDoubleArrowDown"
+import KeyboardDoubleArrowUpIcon from "@mui/icons-material/KeyboardDoubleArrowUp"
+import { Button, ButtonGroup, Tooltip } from "@mui/material"
+import { bool, element, func, string } from "prop-types"
+
+function ReorderButton(props) {
+    const label = `Move ${props.moveable} to the ${props.direction} ${props.slot || "position"}`
+    const disabled =
+        (props.first && (props.direction === "first" || props.direction === "previous")) ||
+        (props.last && (props.direction === "last" || props.direction === "next"))
+    return (
+        <Tooltip title={label}>
+            <span /* https://mui.com/material-ui/react-tooltip/#disabled-elements */>
+                <Button
+                    aria-label={label}
+                    disabled={disabled}
+                    onClick={() => props.onClick(props.direction)}
+                    variant="outlined"
+                >
+                    {props.icon}
+                </Button>
+            </span>
+        </Tooltip>
+    )
+}
+ReorderButton.propTypes = {
+    direction: string,
+    first: bool,
+    icon: element,
+    last: bool,
+    moveable: string,
+    onClick: func,
+    slot: string,
+}
+
+export function ReorderButtonGroup(props) {
+    return (
+        <ButtonGroup variant="outlined">
+            <ReorderButton {...props} direction="first" icon={<KeyboardDoubleArrowUpIcon />} />
+            <ReorderButton {...props} direction="previous" icon={<KeyboardArrowUpIcon />} />
+            <ReorderButton {...props} direction="next" icon={<KeyboardArrowDownIcon />} />
+            <ReorderButton {...props} direction="last" icon={<KeyboardDoubleArrowDownIcon />} />
+        </ButtonGroup>
+    )
+}
diff --git a/components/frontend/src/widgets/buttons/ReorderButtonGroup.test.js b/components/frontend/src/widgets/buttons/ReorderButtonGroup.test.js
new file mode 100644
index 0000000000..fbf50a4c29
--- /dev/null
+++ b/components/frontend/src/widgets/buttons/ReorderButtonGroup.test.js
@@ -0,0 +1,21 @@
+import { act, fireEvent, render, screen } from "@testing-library/react"
+
+import { ReorderButtonGroup } from "./ReorderButtonGroup"
+
+Array("first", "last", "previous", "next").forEach((direction) => {
+    test("ReorderButtonGroup calls the callback on click direction", async () => {
+        const mockCallback = jest.fn()
+        render(<ReorderButtonGroup onClick={mockCallback} moveable="item" />)
+        await act(async () => {
+            fireEvent.click(screen.getByRole("button", { name: `Move item to the ${direction} position` }))
+        })
+        expect(mockCallback).toHaveBeenCalledWith(direction)
+    })
+
+    test("ReorderButtonGroup does not call the callback on click direction when the button group is already there", () => {
+        const mockCallback = jest.fn()
+        render(<ReorderButtonGroup onClick={mockCallback} first={true} last={true} moveable="item" />)
+        fireEvent.click(screen.getByRole("button", { name: `Move item to the ${direction} position` }))
+        expect(mockCallback).not.toHaveBeenCalled()
+    })
+})
diff --git a/components/frontend/src/widgets/icons.js b/components/frontend/src/widgets/icons.js
new file mode 100644
index 0000000000..aeb1ca0f84
--- /dev/null
+++ b/components/frontend/src/widgets/icons.js
@@ -0,0 +1,73 @@
+import AddIcon from "@mui/icons-material/Add"
+import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown"
+import ArrowRightIcon from "@mui/icons-material/ArrowRight"
+import CalendarMonthIcon from "@mui/icons-material/CalendarMonth"
+import ContentCopyIcon from "@mui/icons-material/ContentCopy"
+import DeleteIcon from "@mui/icons-material/Delete"
+import LoopIcon from "@mui/icons-material/Loop"
+import MoveDownIcon from "@mui/icons-material/MoveDown"
+import OpenInNewIcon from "@mui/icons-material/OpenInNew"
+import VisibilityOffIcon from "@mui/icons-material/VisibilityOff"
+
+export function AddItemIcon() {
+    return <AddIcon fontSize="inherit" sx={{ verticalAlign: "middle" }} />
+}
+
+export function CalendarIcon() {
+    return <CalendarMonthIcon fontSize="inherit" sx={{ verticalAlign: "middle" }} />
+}
+
+export function CaretDown() {
+    return <ArrowDropDownIcon title="expand" sx={{ verticalAlign: "middle", fontSize: "2.5em" }} />
+}
+
+export function CaretRight() {
+    return <ArrowRightIcon title="expand" sx={{ verticalAlign: "middle", fontSize: "2.5em" }} />
+}
+
+export function CopyItemIcon() {
+    return <ContentCopyIcon fontSize="inherit" sx={{ verticalAlign: "middle" }} />
+}
+
+export function DeleteItemIcon() {
+    return <DeleteIcon fontSize="inherit" sx={{ verticalAlign: "middle" }} />
+}
+
+export function IgnoreIcon() {
+    return <VisibilityOffIcon fontSize="inherit" sx={{ verticalAlign: "middle" }} />
+}
+
+export function MoveItemIcon() {
+    return <MoveDownIcon fontSize="inherit" sx={{ verticalAlign: "middle" }} />
+}
+
+export function OpenLink() {
+    return <OpenInNewIcon fontSize="inherit" sx={{ verticalAlign: "middle" }} />
+}
+
+export function LoadingIcon() {
+    return (
+        <LoopIcon
+            sx={{
+                animation: "spin 2s linear infinite",
+                "@keyframes spin": {
+                    "0%": {
+                        transform: "rotate(360deg)",
+                    },
+                    "100%": {
+                        transform: "rotate(0deg)",
+                    },
+                },
+                verticalAlign: "middle",
+            }}
+        />
+    )
+}
+
+export function RefreshIcon() {
+    return <LoopIcon fontSize="inherit" sx={{ verticalAlign: "middle" }} />
+}
+
+export function TriangleRightIcon() {
+    return <ArrowRightIcon fontSize="medium" sx={{ verticalAlign: "middle" }} />
+}