diff --git a/components/frontend/src/metric/MetricDetails.js b/components/frontend/src/metric/MetricDetails.js
index 84db263e89..a5f42f1a9a 100644
--- a/components/frontend/src/metric/MetricDetails.js
+++ b/components/frontend/src/metric/MetricDetails.js
@@ -16,6 +16,7 @@ import {
stringsPropType,
stringsURLSearchQueryPropType,
} from "../sharedPropTypes"
+import { Logo } from "../source/Logo"
import { SourceEntities } from "../source/SourceEntities"
import { Sources } from "../source/Sources"
import { getSourceName, isMeasurementRequested } from "../utils"
@@ -191,6 +192,7 @@ export function MetricDetails({
source={source}
reload={measurementsReload}
/>,
+ { image: },
),
)
})
diff --git a/components/frontend/src/widgets/TabPane.js b/components/frontend/src/widgets/TabPane.js
index 82a2e18804..b89f7f1d9e 100644
--- a/components/frontend/src/widgets/TabPane.js
+++ b/components/frontend/src/widgets/TabPane.js
@@ -7,12 +7,12 @@ import { Menu } from "semantic-ui-react"
import { DarkMode } from "../context/DarkMode"
import { Icon, Label, Tab } from "../semantic_ui_react_wrappers"
-function FocusableTab({ error, iconName, label }) {
+function FocusableTab({ error, iconName, image, label }) {
const className = useContext(DarkMode) ? "tabbutton inverted" : "tabbutton"
const tabLabel = error ? : label
return (
<>
- {iconName && }
+ {iconName ? : image}
>
)
@@ -20,6 +20,7 @@ function FocusableTab({ error, iconName, label }) {
FocusableTab.propTypes = {
error: bool,
iconName: string,
+ image: element,
label: oneOfType([element, string]),
}
@@ -28,7 +29,12 @@ export function tabPane(label, pane, options) {
return {
menuItem: (
-
+
),
render: () => {pane},
diff --git a/components/frontend/src/widgets/TabPane.test.js b/components/frontend/src/widgets/TabPane.test.js
index 62c9d70b25..4ff125aef0 100644
--- a/components/frontend/src/widgets/TabPane.test.js
+++ b/components/frontend/src/widgets/TabPane.test.js
@@ -22,3 +22,14 @@ it("shows the tab red when there is an error", () => {
render(Pane, { error: true })]} />)
expect(screen.getByText("Tab").className).toEqual(expect.stringContaining("red"))
})
+
+it("shows an icon", () => {
+ const { container } = render(Pane, { iconName: "server" })]} />)
+ expect(container.firstChild.firstChild.firstChild.firstChild.className).toEqual(expect.stringContaining("server"))
+})
+
+it("shows an image", () => {
+ const image =
+ const { container } = render(Pane, { image: image })]} />)
+ expect(container.firstChild.firstChild.firstChild.firstChild.className).toEqual(expect.stringContaining("image"))
+})
diff --git a/docs/src/changelog.md b/docs/src/changelog.md
index 6ce3c7d71e..602dd3f9e0 100644
--- a/docs/src/changelog.md
+++ b/docs/src/changelog.md
@@ -16,6 +16,7 @@ If your currently installed *Quality-time* version is not v5.14.0, please first
### Added
+- Add icons to tabs with measurement entities. Closes [#8823](https://github.com/ICTU/quality-time/issues/8823).
- Give measurement entity tables sticky headers, like the metric tables already have. Closes [#8879](https://github.com/ICTU/quality-time/issues/8879).
### Changed