Add icons to tabs with measurement entities.

Closes #8823.
ICTU · Jul 16, 2024 · ed1b9d8 · ed1b9d8
1 parent 52fc76e
commit ed1b9d8
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 3 deletions.
diff --git 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: <Logo logo={reportSource.type} alt={sourceName} /> },
                 ),
             )
         })

diff --git a/components/frontend/src/widgets/TabPane.js b/components/frontend/src/widgets/TabPane.js
@@ -7,19 +7,20 @@ 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 color="red">{label}</Label> : label
     return (
         <>
-            {iconName && <Icon name={iconName} />}
+            {iconName ? <Icon name={iconName} size="large" /> : image}
             <button className={className}>{tabLabel}</button>
         </>
     )
 }
 FocusableTab.propTypes = {
     error: bool,
     iconName: string,
+    image: element,
     label: oneOfType([element, string]),
 }
 
@@ -28,7 +29,12 @@ export function tabPane(label, pane, options) {
     return {
         menuItem: (
             <Menu.Item key={label}>
-                <FocusableTab error={options?.error} iconName={options?.iconName} label={label} />
+                <FocusableTab
+                    error={options?.error}
+                    iconName={options?.iconName}
+                    image={options?.image}
+                    label={label}
+                />
             </Menu.Item>
         ),
         render: () => <Tab.Pane>{pane}</Tab.Pane>,

diff --git 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(<Tab panes={[tabPane("Tab", <p>Pane</p>, { error: true })]} />)
     expect(screen.getByText("Tab").className).toEqual(expect.stringContaining("red"))
 })
+
+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"))
+})
+
+it("shows an image", () => {
+    const image = <img alt="" className="image" />
+    const { container } = render(<Tab panes={[tabPane("Tab", <p>Pane</p>, { 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
@@ -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