From 9abd20f98c79bedeb4bff04469742df509283d50 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Ricks?= <bjoern.ricks@greenbone.net>
Date: Tue, 18 Aug 2026 14:48:42 +0200
Subject: [PATCH 1/6] Change: Rename SeverityClass module to SeverityClassLabel

Use same name as the object of the default export. Also improve its
tests.
---
 ...verityClass.tsx => SeverityClassLabel.tsx} |  4 +-
 .../label/__tests__/SeverityClass.test.jsx    | 71 -----------------
 .../__tests__/SeverityClassLabel.test.tsx     | 76 +++++++++++++++++++
 .../powerfilter/SeverityLevelsGroup.tsx       |  2 +-
 src/web/components/table/SeverityColumns.tsx  |  2 +-
 5 files changed, 80 insertions(+), 75 deletions(-)
 rename src/web/components/label/{SeverityClass.tsx => SeverityClassLabel.tsx} (94%)
 delete mode 100644 src/web/components/label/__tests__/SeverityClass.test.jsx
 create mode 100644 src/web/components/label/__tests__/SeverityClassLabel.test.tsx

diff --git a/src/web/components/label/SeverityClass.tsx b/src/web/components/label/SeverityClassLabel.tsx
similarity index 94%
rename from src/web/components/label/SeverityClass.tsx
rename to src/web/components/label/SeverityClassLabel.tsx
index 464a1008f8..be7db11def 100644
--- a/src/web/components/label/SeverityClass.tsx
+++ b/src/web/components/label/SeverityClassLabel.tsx
@@ -50,7 +50,7 @@ const FalsePositiveLabel = createLabel(
   _l('False Pos.'),
 );
 
-export const SeverityClassLabels = {
+export const SeverityClassLabel = {
   Critical: CriticalLabel,
   High: HighLabel,
   Medium: MediumLabel,
@@ -59,4 +59,4 @@ export const SeverityClassLabels = {
   FalsePositive: FalsePositiveLabel,
 };
 
-export default SeverityClassLabels;
+export default SeverityClassLabel;
diff --git a/src/web/components/label/__tests__/SeverityClass.test.jsx b/src/web/components/label/__tests__/SeverityClass.test.jsx
deleted file mode 100644
index 47e9b31109..0000000000
--- a/src/web/components/label/__tests__/SeverityClass.test.jsx
+++ /dev/null
@@ -1,71 +0,0 @@
-/* SPDX-FileCopyrightText: 2024 Greenbone AG
- *
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-
-import {describe, test, expect} from '@gsa/testing';
-import {render} from 'web/testing';
-import SeverityClassLabel from 'web/components/label/SeverityClass';
-import Theme from 'web/utils/theme';
-
-describe('SeverityClassLabel tests', () => {
-  test('should render', () => {
-    const {element} = render(<SeverityClassLabel.High />);
-
-    expect(element).toBeVisible();
-  });
-
-  test('should render HighLabel', () => {
-    const {element} = render(<SeverityClassLabel.High />);
-
-    expect(element).toHaveBackgroundColor(Theme.severityClassHigh);
-    expect(element).toHaveBorderColor(Theme.severityClassHigh);
-    expect(element).toHaveColor(Theme.white);
-    expect(element).toHaveTextContent('High');
-  });
-
-  test('should render MediumLabel', () => {
-    const {element} = render(<SeverityClassLabel.Medium />);
-
-    expect(element).toHaveBackgroundColor(Theme.severityClassMedium);
-    expect(element).toHaveBorderColor(Theme.severityClassMedium);
-    expect(element).toHaveColor(Theme.black);
-    expect(element).toHaveTextContent('Medium');
-  });
-
-  test('should render LowLabel', () => {
-    const {element} = render(<SeverityClassLabel.Low />);
-
-    expect(element).toHaveBackgroundColor(Theme.severityClassLow);
-    expect(element).toHaveBorderColor(Theme.severityClassLow);
-    expect(element).toHaveColor(Theme.white);
-    expect(element).toHaveTextContent('Low');
-  });
-
-  test('should render LogLabel', () => {
-    const {element} = render(<SeverityClassLabel.Log />);
-
-    expect(element).toHaveBackgroundColor(Theme.severityClassLog);
-    expect(element).toHaveBorderColor(Theme.severityClassLog);
-    expect(element).toHaveColor(Theme.white);
-    expect(element).toHaveTextContent('Log');
-  });
-
-  test('should render FalsePositiveLabel', () => {
-    const {element} = render(<SeverityClassLabel.FalsePositive />);
-
-    expect(element).toHaveBackgroundColor(Theme.mediumGray);
-    expect(element).toHaveBorderColor(Theme.mediumGray);
-    expect(element).toHaveColor(Theme.white);
-    expect(element).toHaveTextContent('False Pos.');
-  });
-
-  test('should render CriticalLabel', () => {
-    const {element} = render(<SeverityClassLabel.Critical />);
-
-    expect(element).toHaveBackgroundColor(Theme.severityClassCritical);
-    expect(element).toHaveBorderColor(Theme.severityClassCritical);
-    expect(element).toHaveColor(Theme.white);
-    expect(element).toHaveTextContent('Critical');
-  });
-});
diff --git a/src/web/components/label/__tests__/SeverityClassLabel.test.tsx b/src/web/components/label/__tests__/SeverityClassLabel.test.tsx
new file mode 100644
index 0000000000..7e38424811
--- /dev/null
+++ b/src/web/components/label/__tests__/SeverityClassLabel.test.tsx
@@ -0,0 +1,76 @@
+/* SPDX-FileCopyrightText: 2024 Greenbone AG
+ *
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import {describe, test, expect} from '@gsa/testing';
+import {render, screen} from 'web/testing';
+import SeverityClassLabel from 'web/components/label/SeverityClassLabel';
+import Theme from 'web/utils/theme';
+
+const getLabel = (testId: string) => screen.getByTestId(testId);
+
+describe('SeverityClassLabel tests', () => {
+  test('should render', () => {
+    render(<SeverityClassLabel.High />);
+
+    expect(getLabel('severity-class-High')).toBeVisible();
+  });
+
+  test.each([
+    [
+      'High',
+      'severity-class-High',
+      SeverityClassLabel.High,
+      Theme.severityClassHigh,
+      Theme.white,
+    ],
+    [
+      'Medium',
+      'severity-class-Medium',
+      SeverityClassLabel.Medium,
+      Theme.severityClassMedium,
+      Theme.black,
+    ],
+    [
+      'Low',
+      'severity-class-Low',
+      SeverityClassLabel.Low,
+      Theme.severityClassLow,
+      Theme.white,
+    ],
+    [
+      'Log',
+      'severity-class-Log',
+      SeverityClassLabel.Log,
+      Theme.severityClassLog,
+      Theme.white,
+    ],
+    [
+      'False Pos.',
+      'severity-class-False-Positive',
+      SeverityClassLabel.FalsePositive,
+      Theme.mediumGray,
+      Theme.white,
+    ],
+    [
+      'Critical',
+      'severity-class-Critical',
+      SeverityClassLabel.Critical,
+      Theme.severityClassCritical,
+      Theme.white,
+    ],
+  ])(
+    'should render the %s label with the correct styles',
+    (text, testId, Label, color, textColor) => {
+      render(<Label />);
+
+      const label = getLabel(testId);
+
+      expect(label).toHaveBackgroundColor(color);
+      expect(label).toHaveBorderColor(color);
+      expect(label).toHaveColor(textColor);
+      expect(label).toHaveTextContent(text);
+    },
+  );
+});
diff --git a/src/web/components/powerfilter/SeverityLevelsGroup.tsx b/src/web/components/powerfilter/SeverityLevelsGroup.tsx
index 6198100663..a45c3643ce 100644
--- a/src/web/components/powerfilter/SeverityLevelsGroup.tsx
+++ b/src/web/components/powerfilter/SeverityLevelsGroup.tsx
@@ -9,7 +9,7 @@ import {isDefined} from 'gmp/utils/identity';
 import {SEVERITY_RATING_CVSS_3} from 'gmp/utils/severity';
 import Checkbox from 'web/components/form/Checkbox';
 import FormGroup from 'web/components/form/FormGroup';
-import SeverityClassLabel from 'web/components/label/SeverityClass';
+import SeverityClassLabel from 'web/components/label/SeverityClassLabel';
 import IconDivider from 'web/components/layout/IconDivider';
 import useGmp from 'web/hooks/useGmp';
 import useTranslation from 'web/hooks/useTranslation';
diff --git a/src/web/components/table/SeverityColumns.tsx b/src/web/components/table/SeverityColumns.tsx
index dbd351fb47..8a444d196e 100644
--- a/src/web/components/table/SeverityColumns.tsx
+++ b/src/web/components/table/SeverityColumns.tsx
@@ -4,7 +4,7 @@
  */
 
 import {_} from 'gmp/locale/lang';
-import SeverityClassLabel from 'web/components/label/SeverityClass';
+import SeverityClassLabel from 'web/components/label/SeverityClassLabel';
 
 type EntityWithCounts = {
   result_counts?: Record<string, number>;

From 8f50022bf81384fb8c00ee77c31cc9c4cdf4e55a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Ricks?= <bjoern.ricks@greenbone.net>
Date: Tue, 18 Aug 2026 14:50:55 +0200
Subject: [PATCH 2/6] test: Add tests for the createLabel function

Ensure the function behaves as expected.
---
 .../components/label/__tests__/Label.test.tsx | 53 +++++++++++++++++++
 1 file changed, 53 insertions(+)
 create mode 100644 src/web/components/label/__tests__/Label.test.tsx

diff --git a/src/web/components/label/__tests__/Label.test.tsx b/src/web/components/label/__tests__/Label.test.tsx
new file mode 100644
index 0000000000..e8fc03dbe7
--- /dev/null
+++ b/src/web/components/label/__tests__/Label.test.tsx
@@ -0,0 +1,53 @@
+/* SPDX-FileCopyrightText: 2026 Greenbone AG
+ *
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import {describe, expect, test} from '@gsa/testing';
+import {render, screen} from 'web/testing';
+import createLabel from 'web/components/label/Label';
+
+const TestLabel = createLabel(
+  '#123456',
+  '#654321',
+  '#ffffff',
+  'test-label',
+  'Test label',
+);
+
+describe('Label tests', () => {
+  test('should render the configured text and test id', () => {
+    render(<TestLabel />);
+
+    const label = screen.getByTestId('test-label');
+
+    expect(label).toBeVisible();
+    expect(label).toHaveTextContent('Test label');
+  });
+
+  test('should apply the configured colors', () => {
+    render(<TestLabel />);
+
+    const label = screen.getByTestId('test-label');
+
+    expect(label).toHaveBackgroundColor('#123456');
+    expect(label).toHaveBorderColor('#654321');
+    expect(label).toHaveColor('#ffffff');
+  });
+
+  test('should forward HTML props without overriding the configured test id', () => {
+    render(
+      <TestLabel
+        aria-label="Test label"
+        className="custom-label"
+        data-testid="custom-test-id"
+      />,
+    );
+
+    const label = screen.getByTestId('test-label');
+
+    expect(label).toHaveAttribute('aria-label', 'Test label');
+    expect(label).toHaveClass('custom-label');
+    expect(screen.queryByTestId('custom-test-id')).not.toBeInTheDocument();
+  });
+});

From 8ac55df6dd3e29799700426e8cdcbf819e24ff89 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Ricks?= <bjoern.ricks@greenbone.net>
Date: Tue, 18 Aug 2026 15:04:24 +0200
Subject: [PATCH 3/6] Change: Update testing helper function to calculate
 colors

Make comparing colors more prone against the actual implementation by
converting the css color to the computed style color.
---
 src/web/testing/custom-matchers.ts | 39 ++++++++++++++++++------------
 1 file changed, 24 insertions(+), 15 deletions(-)

diff --git a/src/web/testing/custom-matchers.ts b/src/web/testing/custom-matchers.ts
index 6b00b31622..cacff8bad8 100644
--- a/src/web/testing/custom-matchers.ts
+++ b/src/web/testing/custom-matchers.ts
@@ -21,6 +21,15 @@ export const hexToRgb = (hex: string): string => {
   return `rgb(${Number.parseInt(result[1], 16)}, ${Number.parseInt(result[2], 16)}, ${Number.parseInt(result[3], 16)})`;
 };
 
+export const cssColorToRgb = (color: string): string => {
+  const element = document.createElement('div');
+  element.style.color = color;
+  document.body.appendChild(element);
+  const computedColor = getComputedStyle(element).color;
+  element.remove();
+  return computedColor;
+};
+
 /**
  * Custom matcher to check computed style property
  */
@@ -50,74 +59,74 @@ function toHaveComputedStyle(
 }
 
 /**
- * Custom matcher to check computed background color against hex value
+ * Custom matcher to check computed background color
  */
-function toHaveBackgroundColor(this, element: HTMLElement, hex: string) {
+function toHaveBackgroundColor(this, element: HTMLElement, color: string) {
   const actualValue =
     getComputedStyle(element).getPropertyValue('background-color');
-  const expectedValue = hexToRgb(hex);
+  const expectedValue = cssColorToRgb(color);
 
   const pass = actualValue === expectedValue;
 
   if (pass) {
     return {
       message: () =>
-        `expected element not to have background-color: ${hex} (${expectedValue}), but got ${actualValue}`,
+        `expected element not to have background-color: ${color} (${expectedValue}), but got ${actualValue}`,
       pass: true,
     };
   } else {
     return {
       message: () =>
-        `expected element to have background-color: ${hex} (${expectedValue}), but got ${actualValue}`,
+        `expected element to have background-color: ${color} (${expectedValue}), but got ${actualValue}`,
       pass: false,
     };
   }
 }
 
 /**
- * Custom matcher to check computed border color against hex value
+ * Custom matcher to check computed border color
  */
-function toHaveBorderColor(this, element: HTMLElement, hex: string) {
+function toHaveBorderColor(this, element: HTMLElement, color: string) {
   const actualValue =
     getComputedStyle(element).getPropertyValue('border-color');
-  const expectedValue = hexToRgb(hex);
+  const expectedValue = cssColorToRgb(color);
 
   const pass = actualValue === expectedValue;
 
   if (pass) {
     return {
       message: () =>
-        `expected element not to have border-color: ${hex} (${expectedValue}), but got ${actualValue}`,
+        `expected element not to have border-color: ${color} (${expectedValue}), but got ${actualValue}`,
       pass: true,
     };
   } else {
     return {
       message: () =>
-        `expected element to have border-color: ${hex} (${expectedValue}), but got ${actualValue}`,
+        `expected element to have border-color: ${color} (${expectedValue}), but got ${actualValue}`,
       pass: false,
     };
   }
 }
 
 /**
- * Custom matcher to check computed text color against hex value
+ * Custom matcher to check computed text color
  */
-function toHaveColor(this, element: HTMLElement, hex: string) {
+function toHaveColor(this, element: HTMLElement, color: string) {
   const actualValue = getComputedStyle(element).getPropertyValue('color');
-  const expectedValue = hexToRgb(hex);
+  const expectedValue = cssColorToRgb(color);
 
   const pass = actualValue === expectedValue;
 
   if (pass) {
     return {
       message: () =>
-        `expected element not to have color: ${hex} (${expectedValue}), but got ${actualValue}`,
+        `expected element not to have color: ${color} (${expectedValue}), but got ${actualValue}`,
       pass: true,
     };
   } else {
     return {
       message: () =>
-        `expected element to have color: ${hex} (${expectedValue}), but got ${actualValue}`,
+        `expected element to have color: ${color} (${expectedValue}), but got ${actualValue}`,
       pass: false,
     };
   }

From e831343cf6a315a52361a2be02849cffc1465bbb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Ricks?= <bjoern.ricks@greenbone.net>
Date: Tue, 18 Aug 2026 14:54:27 +0200
Subject: [PATCH 4/6] Change: Rename ComplianceState module to
 ComplianceStateLabel

Use same name as the object exported as the default export. Also add
tests for the module.
---
 ...anceState.tsx => ComplianceStateLabel.tsx} |  6 ++-
 .../__tests__/ComplianceStateLabel.test.tsx   | 46 +++++++++++++++++++
 .../powerfilter/ComplianceLevelsGroup.tsx     | 10 ++--
 src/web/pages/reports/AuditReportTable.jsx    |  8 ++--
 4 files changed, 59 insertions(+), 11 deletions(-)
 rename src/web/components/label/{ComplianceState.tsx => ComplianceStateLabel.tsx} (92%)
 create mode 100644 src/web/components/label/__tests__/ComplianceStateLabel.test.tsx

diff --git a/src/web/components/label/ComplianceState.tsx b/src/web/components/label/ComplianceStateLabel.tsx
similarity index 92%
rename from src/web/components/label/ComplianceState.tsx
rename to src/web/components/label/ComplianceStateLabel.tsx
index 4c0c69b7d8..92f97902ec 100644
--- a/src/web/components/label/ComplianceState.tsx
+++ b/src/web/components/label/ComplianceStateLabel.tsx
@@ -22,6 +22,7 @@ const NoLabel = createLabel(
   'compliance-state-no',
   _l('No'),
 );
+
 const IncompleteLabel = createLabel(
   Theme.complianceIncomplete,
   Theme.complianceIncomplete,
@@ -29,6 +30,7 @@ const IncompleteLabel = createLabel(
   'compliance-state-incomplete',
   _l('Incomplete'),
 );
+
 const UndefinedLabel = createLabel(
   Theme.complianceUndefined,
   Theme.complianceUndefined,
@@ -37,11 +39,11 @@ const UndefinedLabel = createLabel(
   _l('Undefined'),
 );
 
-export const ComplianceStateLabels = {
+const ComplianceStateLabel = {
   Yes: YesLabel,
   No: NoLabel,
   Incomplete: IncompleteLabel,
   Undefined: UndefinedLabel,
 };
 
-export default ComplianceStateLabels;
+export default ComplianceStateLabel;
diff --git a/src/web/components/label/__tests__/ComplianceStateLabel.test.tsx b/src/web/components/label/__tests__/ComplianceStateLabel.test.tsx
new file mode 100644
index 0000000000..5a2c1a4a98
--- /dev/null
+++ b/src/web/components/label/__tests__/ComplianceStateLabel.test.tsx
@@ -0,0 +1,46 @@
+/* SPDX-FileCopyrightText: 2026 Greenbone AG
+ *
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import {describe, expect, test} from '@gsa/testing';
+import {render, screen} from 'web/testing';
+import ComplianceStateLabel from 'web/components/label/ComplianceStateLabel';
+import Theme from 'web/utils/theme';
+
+describe('ComplianceStateLabel tests', () => {
+  test.each([
+    [
+      'Yes',
+      'compliance-state-yes',
+      ComplianceStateLabel.Yes,
+      Theme.complianceYes,
+    ],
+    ['No', 'compliance-state-no', ComplianceStateLabel.No, Theme.complianceNo],
+    [
+      'Incomplete',
+      'compliance-state-incomplete',
+      ComplianceStateLabel.Incomplete,
+      Theme.complianceIncomplete,
+    ],
+    [
+      'Undefined',
+      'compliance-state-undefined',
+      ComplianceStateLabel.Undefined,
+      Theme.complianceUndefined,
+    ],
+  ])(
+    'should render the %s label with the correct styles',
+    (text, testId, Label, color) => {
+      render(<Label />);
+
+      const label = screen.getByTestId(testId);
+
+      expect(label).toBeVisible();
+      expect(label).toHaveTextContent(text);
+      expect(label).toHaveBackgroundColor(color);
+      expect(label).toHaveBorderColor(color);
+      expect(label).toHaveColor(Theme.white);
+    },
+  );
+});
diff --git a/src/web/components/powerfilter/ComplianceLevelsGroup.tsx b/src/web/components/powerfilter/ComplianceLevelsGroup.tsx
index 680782a0b6..50b4d10333 100644
--- a/src/web/components/powerfilter/ComplianceLevelsGroup.tsx
+++ b/src/web/components/powerfilter/ComplianceLevelsGroup.tsx
@@ -7,7 +7,7 @@ import {type FilterType} from 'gmp/models/filter';
 import {isDefined} from 'gmp/utils/identity';
 import Checkbox from 'web/components/form/Checkbox';
 import FormGroup from 'web/components/form/FormGroup';
-import ComplianceStateLabels from 'web/components/label/ComplianceState';
+import ComplianceStateLabel from 'web/components/label/ComplianceStateLabel';
 import IconDivider from 'web/components/layout/IconDivider';
 import useTranslation from 'web/hooks/useTranslation';
 
@@ -74,28 +74,28 @@ const ComplianceLevelsFilterGroup = ({
           name="y"
           onChange={handleComplianceChange}
         />
-        <ComplianceStateLabels.Yes />
+        <ComplianceStateLabel.Yes />
         <Checkbox
           checked={complianceLevels.includes('n')}
           data-testid="compliance-checkbox-no"
           name="n"
           onChange={handleComplianceChange}
         />
-        <ComplianceStateLabels.No />
+        <ComplianceStateLabel.No />
         <Checkbox
           checked={complianceLevels.includes('i')}
           data-testid="compliance-checkbox-incomplete"
           name="i"
           onChange={handleComplianceChange}
         />
-        <ComplianceStateLabels.Incomplete />
+        <ComplianceStateLabel.Incomplete />
         <Checkbox
           checked={complianceLevels.includes('u')}
           data-testid="compliance-checkbox-undefined"
           name="u"
           onChange={handleComplianceChange}
         />
-        <ComplianceStateLabels.Undefined />
+        <ComplianceStateLabel.Undefined />
       </IconDivider>
     </FormGroup>
   );
diff --git a/src/web/pages/reports/AuditReportTable.jsx b/src/web/pages/reports/AuditReportTable.jsx
index 09f2a22b7e..9107332180 100644
--- a/src/web/pages/reports/AuditReportTable.jsx
+++ b/src/web/pages/reports/AuditReportTable.jsx
@@ -6,7 +6,7 @@
 import React from 'react';
 import {_l} from 'gmp/locale/lang';
 import {isDefined} from 'gmp/utils/identity';
-import ComplianceState from 'web/components/label/ComplianceState';
+import ComplianceStateLabel from 'web/components/label/ComplianceStateLabel';
 import TableHead from 'web/components/table/TableHead';
 import TableHeader from 'web/components/table/TableHeader';
 import TableRow from 'web/components/table/TableRow';
@@ -74,7 +74,7 @@ const AuditReportTableHeader = ({
           width="5%"
           onSortChange={onSortChange}
         >
-          <ComplianceState.Yes />
+          <ComplianceStateLabel.Yes />
         </TableHead>
         <TableHead
           currentSortBy={currentSortBy}
@@ -84,7 +84,7 @@ const AuditReportTableHeader = ({
           width="5%"
           onSortChange={onSortChange}
         >
-          <ComplianceState.No />
+          <ComplianceStateLabel.No />
         </TableHead>
         <TableHead
           currentSortBy={currentSortBy}
@@ -94,7 +94,7 @@ const AuditReportTableHeader = ({
           width="5%"
           onSortChange={onSortChange}
         >
-          <ComplianceState.Incomplete />
+          <ComplianceStateLabel.Incomplete />
         </TableHead>
         {isDefined(actionsColumn) ? (
           actionsColumn

From 08cea2b34d8b9f59ed6ffe293db941d9eb0a9300 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Ricks?= <bjoern.ricks@greenbone.net>
Date: Tue, 18 Aug 2026 15:16:41 +0200
Subject: [PATCH 5/6] Change: Rename AgentState module to AgentStateLabel

Improve the module and add tests too.
---
 .../{AgentsState.tsx => AgentsStateLabel.tsx} | 29 ++++++----
 .../label/__tests__/AgentsStateLabel.test.tsx | 58 +++++++++++++++++++
 src/web/pages/agents/AgentDialog.tsx          |  2 +-
 src/web/pages/agents/AgentTableRow.tsx        |  2 +-
 4 files changed, 78 insertions(+), 13 deletions(-)
 rename src/web/components/label/{AgentsState.tsx => AgentsStateLabel.tsx} (74%)
 create mode 100644 src/web/components/label/__tests__/AgentsStateLabel.test.tsx

diff --git a/src/web/components/label/AgentsState.tsx b/src/web/components/label/AgentsStateLabel.tsx
similarity index 74%
rename from src/web/components/label/AgentsState.tsx
rename to src/web/components/label/AgentsStateLabel.tsx
index a7b8503553..dec417354a 100644
--- a/src/web/components/label/AgentsState.tsx
+++ b/src/web/components/label/AgentsStateLabel.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import {_} from 'gmp/locale/lang';
+import {_l} from 'gmp/locale/lang';
 import createLabel from 'web/components/label/Label';
 import Theme from 'web/utils/theme';
 
@@ -48,14 +48,21 @@ export const getConnectionStatusLabel = (status?: string) => {
   return <Label />;
 };
 
-export const getAuthorizationLabel = (authorized?: boolean) => {
-  const Label = createLabel(
-    authorized ? Theme.green : Theme.errorRed,
-    authorized ? Theme.green : Theme.errorRed,
-    'white',
-    'authorization-status-label',
-    authorized ? _('Yes') : _('No'),
-  );
+const AuthorizedLabelNo = createLabel(
+  Theme.errorRed,
+  Theme.errorRed,
+  Theme.white,
+  'authorization-status-label',
+  _l('No'),
+);
 
-  return <Label />;
-};
+const AuthorizedLabelYes = createLabel(
+  Theme.green,
+  Theme.green,
+  Theme.white,
+  'authorization-status-label',
+  _l('Yes'),
+);
+
+export const getAuthorizationLabel = (authorized?: boolean) =>
+  authorized ? <AuthorizedLabelYes /> : <AuthorizedLabelNo />;
diff --git a/src/web/components/label/__tests__/AgentsStateLabel.test.tsx b/src/web/components/label/__tests__/AgentsStateLabel.test.tsx
new file mode 100644
index 0000000000..af66845acb
--- /dev/null
+++ b/src/web/components/label/__tests__/AgentsStateLabel.test.tsx
@@ -0,0 +1,58 @@
+/* SPDX-FileCopyrightText: 2026 Greenbone AG
+ *
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import {describe, expect, test} from '@gsa/testing';
+import {render, screen} from 'web/testing';
+import {
+  getAuthorizationLabel,
+  getConnectionStatusLabel,
+} from 'web/components/label/AgentsStateLabel';
+import Theme from 'web/utils/theme';
+
+describe('AgentsStateLabel tests', () => {
+  describe('getConnectionStatusLabel', () => {
+    test.each([
+      ['active', 'Active', Theme.green],
+      ['INACTIVE', 'Inactive', Theme.errorRed],
+      ['not authorized', 'Notauthorized', Theme.severityWarnYellow],
+      ['unknown', 'Unknown', Theme.green],
+      [undefined, 'Unknown', Theme.green],
+    ])(
+      'should render the %s connection status label',
+      (status, text, color) => {
+        render(getConnectionStatusLabel(status));
+
+        const label = screen.getByTestId('connection-status-label');
+
+        expect(label).toBeVisible();
+        expect(label).toHaveTextContent(text);
+        expect(label).toHaveBackgroundColor(color);
+        expect(label).toHaveBorderColor(color);
+        expect(label).toHaveColor(Theme.white);
+      },
+    );
+  });
+
+  describe('getAuthorizationLabel', () => {
+    test.each([
+      [true, 'Yes', Theme.green],
+      [false, 'No', Theme.errorRed],
+      [undefined, 'No', Theme.errorRed],
+    ])(
+      'should render the %s authorization label',
+      (authorized, text, color) => {
+        render(getAuthorizationLabel(authorized));
+
+        const label = screen.getByTestId('authorization-status-label');
+
+        expect(label).toBeVisible();
+        expect(label).toHaveTextContent(text);
+        expect(label).toHaveBackgroundColor(color);
+        expect(label).toHaveBorderColor(color);
+        expect(label).toHaveColor(Theme.white);
+      },
+    );
+  });
+});
diff --git a/src/web/pages/agents/AgentDialog.tsx b/src/web/pages/agents/AgentDialog.tsx
index c7766514ce..713444104e 100644
--- a/src/web/pages/agents/AgentDialog.tsx
+++ b/src/web/pages/agents/AgentDialog.tsx
@@ -9,7 +9,7 @@ import SaveDialog from 'web/components/dialog/SaveDialog';
 import Checkbox from 'web/components/form/Checkbox';
 import FormGroup from 'web/components/form/FormGroup';
 import TextField from 'web/components/form/TextField';
-import {getConnectionStatusLabel} from 'web/components/label/AgentsState';
+import {getConnectionStatusLabel} from 'web/components/label/AgentsStateLabel';
 import Column from 'web/components/layout/Column';
 import Layout from 'web/components/layout/Layout';
 import Row from 'web/components/layout/Row';
diff --git a/src/web/pages/agents/AgentTableRow.tsx b/src/web/pages/agents/AgentTableRow.tsx
index 8147e8f8f3..0364fe21b9 100644
--- a/src/web/pages/agents/AgentTableRow.tsx
+++ b/src/web/pages/agents/AgentTableRow.tsx
@@ -7,7 +7,7 @@ import type Agent from 'gmp/models/agent';
 import {
   getConnectionStatusLabel,
   getAuthorizationLabel,
-} from 'web/components/label/AgentsState';
+} from 'web/components/label/AgentsStateLabel';
 import Divider from 'web/components/layout/Divider';
 import TableData from 'web/components/table/TableData';
 import TableRow from 'web/components/table/TableRow';

From 5343cff3f5a728e6c64f9796f5c65184298851eb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Ricks?= <bjoern.ricks@greenbone.net>
Date: Tue, 18 Aug 2026 15:20:36 +0200
Subject: [PATCH 6/6] Change: Rename Toolbar module to ToolBar

Use PascalCase naming for components and modules.
---
 src/web/components/bar/{Toolbar.tsx => ToolBar.tsx}         | 6 +++---
 .../bar/__tests__/{Toolbar.test.tsx => ToolBar.test.tsx}    | 6 +++---
 src/web/entities/EntitiesPage.tsx                           | 6 +++---
 src/web/entity/EntityPage.tsx                               | 4 ++--
 src/web/entity/Page.jsx                                     | 4 ++--
 src/web/pages/reports/AuditReportDetailsContent.tsx         | 2 +-
 src/web/pages/reports/DeltaReportDetailsContent.tsx         | 2 +-
 src/web/pages/reports/details/ReportDetailsPageToolBar.tsx  | 2 +-
 8 files changed, 16 insertions(+), 16 deletions(-)
 rename src/web/components/bar/{Toolbar.tsx => ToolBar.tsx} (83%)
 rename src/web/components/bar/__tests__/{Toolbar.test.tsx => ToolBar.test.tsx} (88%)

diff --git a/src/web/components/bar/Toolbar.tsx b/src/web/components/bar/ToolBar.tsx
similarity index 83%
rename from src/web/components/bar/Toolbar.tsx
rename to src/web/components/bar/ToolBar.tsx
index 7c344c343c..4d322c5182 100644
--- a/src/web/components/bar/Toolbar.tsx
+++ b/src/web/components/bar/ToolBar.tsx
@@ -7,11 +7,11 @@ import {type ReactNode} from 'react';
 import Layout from 'web/components/layout/Layout';
 import IconSizeProvider from 'web/components/provider/IconSizeProvider';
 
-interface ToolbarProps {
+interface ToolBarProps {
   children?: ReactNode;
 }
 
-const Toolbar = ({children}: ToolbarProps) => {
+const ToolBar = ({children}: ToolBarProps) => {
   return (
     <IconSizeProvider size="small">
       <Layout flex align={['space-between', 'start']} data-testid="toolbar">
@@ -21,4 +21,4 @@ const Toolbar = ({children}: ToolbarProps) => {
   );
 };
 
-export default Toolbar;
+export default ToolBar;
diff --git a/src/web/components/bar/__tests__/Toolbar.test.tsx b/src/web/components/bar/__tests__/ToolBar.test.tsx
similarity index 88%
rename from src/web/components/bar/__tests__/Toolbar.test.tsx
rename to src/web/components/bar/__tests__/ToolBar.test.tsx
index 983e157088..c69e194a74 100644
--- a/src/web/components/bar/__tests__/Toolbar.test.tsx
+++ b/src/web/components/bar/__tests__/ToolBar.test.tsx
@@ -5,14 +5,14 @@
 
 import {describe, test, expect} from '@gsa/testing';
 import {render, screen} from 'web/testing';
-import Toolbar from 'web/components/bar/Toolbar';
+import ToolBar from 'web/components/bar/ToolBar';
 
 describe('Toolbar tests', () => {
   test('should render with children', () => {
     render(
-      <Toolbar>
+      <ToolBar>
         <button>Test Button</button>
-      </Toolbar>,
+      </ToolBar>,
     );
 
     const toolbar = screen.getByTestId('toolbar');
diff --git a/src/web/entities/EntitiesPage.tsx b/src/web/entities/EntitiesPage.tsx
index 900206df13..487c8da499 100644
--- a/src/web/entities/EntitiesPage.tsx
+++ b/src/web/entities/EntitiesPage.tsx
@@ -11,7 +11,7 @@ import {type default as Filter, type FilterType} from 'gmp/models/filter';
 import type Model from 'gmp/models/model';
 import {isDefined, hasValue} from 'gmp/utils/identity';
 import {excludeObjectProps} from 'gmp/utils/object';
-import Toolbar from 'web/components/bar/Toolbar';
+import ToolBar from 'web/components/bar/ToolBar';
 import ErrorMessage from 'web/components/error/ErrorMessage';
 import Layout from 'web/components/layout/Layout';
 import Loading from 'web/components/loading/Loading';
@@ -278,10 +278,10 @@ class EntitiesPage<
 
   renderToolbar() {
     return (
-      <Toolbar>
+      <ToolBar>
         {this.renderToolbarIcons()}
         {this.renderPowerFilter()}
-      </Toolbar>
+      </ToolBar>
     );
   }
 
diff --git a/src/web/entity/EntityPage.tsx b/src/web/entity/EntityPage.tsx
index 03ab64846e..b37becef7c 100644
--- a/src/web/entity/EntityPage.tsx
+++ b/src/web/entity/EntityPage.tsx
@@ -10,7 +10,7 @@ import type Model from 'gmp/models/model';
 import {type EntityType, getEntityType, typeName} from 'gmp/utils/entity-type';
 import {isDefined} from 'gmp/utils/identity';
 import {shorten} from 'gmp/utils/string';
-import Toolbar from 'web/components/bar/Toolbar';
+import ToolBar from 'web/components/bar/ToolBar';
 import ErrorMessage from 'web/components/error/ErrorMessage';
 import Message from 'web/components/error/Message';
 import Layout from 'web/components/layout/Layout';
@@ -223,7 +223,7 @@ const EntityPage = <TEntity extends Model>({
 
   return (
     <Layout align="start" flex="column" grow="1">
-      <Toolbar>{renderToolbarIcons()}</Toolbar>
+      <ToolBar>{renderToolbarIcons()}</ToolBar>
       {renderSection()}
     </Layout>
   );
diff --git a/src/web/entity/Page.jsx b/src/web/entity/Page.jsx
index 1f6caa83f5..6011e3ae2a 100644
--- a/src/web/entity/Page.jsx
+++ b/src/web/entity/Page.jsx
@@ -8,7 +8,7 @@ import styled from 'styled-components';
 import {typeName} from 'gmp/utils/entity-type';
 import {isDefined} from 'gmp/utils/identity';
 import {shorten} from 'gmp/utils/string';
-import Toolbar from 'web/components/bar/Toolbar';
+import ToolBar from 'web/components/bar/ToolBar';
 import ErrorMessage from 'web/components/error/ErrorMessage';
 import Message from 'web/components/error/Message';
 import Layout from 'web/components/layout/Layout';
@@ -162,7 +162,7 @@ class EntityPage extends React.Component {
 
     return (
       <Layout align="start" flex="column" grow="1">
-        <Toolbar>{this.renderToolbarIcons()}</Toolbar>
+        <ToolBar>{this.renderToolbarIcons()}</ToolBar>
         {this.renderSection()}
       </Layout>
     );
diff --git a/src/web/pages/reports/AuditReportDetailsContent.tsx b/src/web/pages/reports/AuditReportDetailsContent.tsx
index 7de1efd9ca..1ec4e5fb40 100644
--- a/src/web/pages/reports/AuditReportDetailsContent.tsx
+++ b/src/web/pages/reports/AuditReportDetailsContent.tsx
@@ -15,7 +15,7 @@ import type ReportTLSCertificate from 'gmp/models/report/tls-certificate';
 import {isActive, TASK_STATUS, type TaskStatus} from 'gmp/models/task';
 import {isDefined} from 'gmp/utils/identity';
 import StatusBar from 'web/components/bar/StatusBar';
-import ToolBar from 'web/components/bar/Toolbar';
+import ToolBar from 'web/components/bar/ToolBar';
 import DateTime from 'web/components/date/DateTime';
 import ErrorPanel from 'web/components/error/ErrorPanel';
 import {ReportIcon} from 'web/components/icon';
diff --git a/src/web/pages/reports/DeltaReportDetailsContent.tsx b/src/web/pages/reports/DeltaReportDetailsContent.tsx
index 6ae0edc9be..0aabe20839 100644
--- a/src/web/pages/reports/DeltaReportDetailsContent.tsx
+++ b/src/web/pages/reports/DeltaReportDetailsContent.tsx
@@ -17,7 +17,7 @@ import type ReportTask from 'gmp/models/report/task';
 import {TASK_STATUS} from 'gmp/models/task';
 import {isDefined} from 'gmp/utils/identity';
 import StatusBar from 'web/components/bar/StatusBar';
-import ToolBar from 'web/components/bar/Toolbar';
+import ToolBar from 'web/components/bar/ToolBar';
 import DateTime from 'web/components/date/DateTime';
 import ErrorMessage from 'web/components/error/ErrorMessage';
 import {ReportIcon} from 'web/components/icon';
diff --git a/src/web/pages/reports/details/ReportDetailsPageToolBar.tsx b/src/web/pages/reports/details/ReportDetailsPageToolBar.tsx
index 9c4e0ddcf7..fb2522d0c5 100644
--- a/src/web/pages/reports/details/ReportDetailsPageToolBar.tsx
+++ b/src/web/pages/reports/details/ReportDetailsPageToolBar.tsx
@@ -6,7 +6,7 @@
 import {type default as Filter, type FilterType} from 'gmp/models/filter';
 import type ReportReport from 'gmp/models/report/report';
 import type ReportTask from 'gmp/models/report/task';
-import ToolBar from 'web/components/bar/Toolbar';
+import ToolBar from 'web/components/bar/ToolBar';
 import Layout from 'web/components/layout/Layout';
 import Powerfilter from 'web/components/powerfilter/PowerFilter';
 import ReportDetailsToolBarIcons from 'web/pages/reports/details/ReportDetailsPageToolBarIcons';