Label Components

src/web/components/bar/Toolbar.tsx → 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;

src/web/components/bar/__tests__/Toolbar.test.tsx → 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');

src/web/components/label/AgentsState.tsx → 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 />;

src/web/components/label/ComplianceState.tsx → src/web/components/label/ComplianceStateLabel.tsx

@@ -22,13 +22,15 @@ const NoLabel = createLabel(
   'compliance-state-no',
   _l('No'),
 );
+
 const IncompleteLabel = createLabel(
   Theme.complianceIncomplete,
   Theme.complianceIncomplete,
   Theme.white,
   '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;

src/web/components/label/SeverityClass.tsx → 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;

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);
+      },
+    );
+  });
+});

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);
+    },
+  );
+});

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();
+  });
+});