Add: Appliance logo in the app header

package.json

@@ -32,7 +32,7 @@
     "node": ">=18.0"
   },
   "dependencies": {
-    "@greenbone/opensight-ui-components": "^0.3.0",
+    "@greenbone/opensight-ui-components": "^0.4.1-alpha1",
     "@mantine/core": "^6.0.0",
     "@reduxjs/toolkit": "^2.2.7",
     "@sentry/react": "^8.28.0",

src/web/components/icon/GreenboneApplianceLogo.jsx

@@ -0,0 +1,25 @@
+/* SPDX-FileCopyrightText: 2024 Greenbone AG
+ *
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import SvgIconWrapper from './SvgIconWrapper';
+import Enterprise150Svg from 'web/components/icon/svg/Enterprise_150.svg';
+import Enterprise400Svg from 'web/components/icon/svg/Enterprise_400.svg';
+import Enterprise450Svg from 'web/components/icon/svg/Enterprise_450.svg';
+import Enterprise600Svg from 'web/components/icon/svg/Enterprise_600.svg';
+import Enterprise650Svg from 'web/components/icon/svg/Enterprise_650.svg';
+import Enterprise5400Svg from 'web/components/icon/svg/Enterprise_5400.svg';
+import Enterprise6500Svg from 'web/components/icon/svg/Enterprise_6500.svg';
+
+const createEnterpriseComponent = Component => () => (
+  <SvgIconWrapper size={['150px', '150px']} component={Component} />
+);
+
+export const Enterprise150 = createEnterpriseComponent(Enterprise150Svg);
+export const Enterprise400 = createEnterpriseComponent(Enterprise400Svg);
+export const Enterprise450 = createEnterpriseComponent(Enterprise450Svg);
+export const Enterprise600 = createEnterpriseComponent(Enterprise600Svg);
+export const Enterprise650 = createEnterpriseComponent(Enterprise650Svg);
+export const Enterprise5400 = createEnterpriseComponent(Enterprise5400Svg);
+export const Enterprise6500 = createEnterpriseComponent(Enterprise6500Svg);

src/web/components/icon/SvgIconWrapper.jsx

@@ -0,0 +1,23 @@
+/* SPDX-FileCopyrightText: 2024 Greenbone AG
+ *
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import PropTypes from 'web/utils/proptypes';
+import SvgIcon from './svgicon';
+
+const SvgIconWrapper = ({component: Component, size, ...props}) => (
+  <SvgIcon size={size} {...props}>
+    {svgProps => <Component {...svgProps} />}
+  </SvgIcon>
+);
+
+SvgIconWrapper.propTypes = {
+  component: PropTypes.node.isRequired,
+  size: PropTypes.oneOfType([
+    PropTypes.oneOf(['tiny', 'small', 'medium', 'large']),
+    PropTypes.string,
+  ]),
+};
+
+export default SvgIconWrapper;

src/web/components/structure/__tests__/getLogo.jsx

@@ -0,0 +1,34 @@
+/* SPDX-FileCopyrightText: 2024 Greenbone AG
+ *
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import {describe, test, expect} from '@gsa/testing';
+import {render} from 'web/utils/testing';
+import getLogo from 'web/components/structure/getLogo';
+
+describe('getLogo', () => {
+  const testCases = [
+    ['gsm-150_label.svg', 'Enterprise150'],
+    ['gsm-400_label.svg', 'Enterprise400'],
+    ['gsm-400r2_label.svg', 'Enterprise400'],
+    ['gsm-450_label.svg', 'Enterprise450'],
+    ['gsm-450r2_label.svg', 'Enterprise450'],
+    ['gsm-600_label.svg', 'Enterprise600'],
+    ['gsm-600r2_label.svg', 'Enterprise600'],
+    ['gsm-650_label.svg', 'Enterprise650'],
+    ['gsm-650r2_label.svg', 'Enterprise650'],
+    ['gsm-5400_label.svg', 'Enterprise5400'],
+    ['gsm-6500_label.svg', 'Enterprise6500'],
+  ];
+
+  test.each(testCases)('returns %s for %s', (model, expectedTestId) => {
+    const {getByTestId} = render(getLogo(model));
+    expect(getByTestId(expectedTestId)).toBeInTheDocument();
+  });
+
+  test('returns undefined for unknown model', () => {
+    const result = getLogo('unknown_model.svg');
+    expect(result).toBeUndefined();
+  });
+});

src/web/components/structure/getLogo.jsx

@@ -0,0 +1,52 @@
+/* SPDX-FileCopyrightText: 2024 Greenbone AG
+ *
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import PropTypes from 'web/utils/proptypes';
+import {
+  Enterprise150,
+  Enterprise400,
+  Enterprise450,
+  Enterprise600,
+  Enterprise650,
+  Enterprise5400,
+  Enterprise6500,
+} from 'web/components/icon/GreenboneApplianceLogo';
+
+const APPLIANCE_MODELS = {
+  'gsm-150_label.svg': Enterprise150,
+  'gsm-400_label.svg': Enterprise400,
+  'gsm-400r2_label.svg': Enterprise400,
+  'gsm-450_label.svg': Enterprise450,
+  'gsm-450r2_label.svg': Enterprise450,
+  'gsm-600_label.svg': Enterprise600,
+  'gsm-600r2_label.svg': Enterprise600,
+  'gsm-650_label.svg': Enterprise650,
+  'gsm-650r2_label.svg': Enterprise650,
+  'gsm-5400_label.svg': Enterprise5400,
+  'gsm-6500_label.svg': Enterprise6500,
+};
+
+const getLogo = model => {
+  const Component = APPLIANCE_MODELS[model];
+  return Component ? <Component /> : undefined;
+};
+
+getLogo.propTypes = {
+  model: PropTypes.oneOf([
+    'gsm-150_label.svg',
+    'gsm-400_label.svg',
+    'gsm-400r2_label.svg',
+    'gsm-450_label.svg',
+    'gsm-450r2_label.svg',
+    'gsm-600_label.svg',
+    'gsm-600r2_label.svg',
+    'gsm-650_label.svg',
+    'gsm-650r2_label.svg',
+    'gsm-5400_label.svg',
+    'gsm-6500_label.svg',
+  ]),
+};
+
+export default getLogo;

src/web/components/structure/header.jsx

@@ -16,6 +16,7 @@ import useUserName from 'web/hooks/useUserName';
 import useGmp from 'web/hooks/useGmp';
 
 import LogoutIcon from 'web/components/icon/logouticon';
+import getLogo from 'web/components/structure/getLogo';
 import MySettingsIcon from 'web/components/icon/mysettingsicon';
 import LanguageSwitch from './languageswitch';
 import SessionTimer from '../sessionTimer/SessionTimer';
@@ -25,6 +26,7 @@ const Header = () => {
   const username = useUserName();
   const loggedIn = useUserIsLoggedIn();
   const navigate = useNavigate();
+  const logoComponent = getLogo(gmp.settings.vendorLabel);
 
   const handleSettingsClick = useCallback(
     event => {
@@ -57,14 +59,16 @@ const Header = () => {
       icon: <LogoutIcon />,
     },
   ];
+
   return (
     <AppHeader
+      logo={logoComponent}
       languageSwitch={<LanguageSwitch />}
       menuPoints={menuPoints}
       isLoggedIn={loggedIn}
       sessionTimer={<SessionTimer />}
       username={username}
-      logoLink="/"
+      logoLink="/dashboards"
     />
   );
 };

src/web/routes.jsx

@@ -244,7 +244,7 @@ const LoggedInRoutes = () => {
                 />
               }
             />
-            <Route path="/" element={<Navigate to="/dashboard" />} />
+            <Route path="/" element={<Navigate to="/dashboards" />} />
 
             <Route path="*" element={<PageNotFound />} />
           </Routes>