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