Merge pull request #4150 from greenbone/Add-Appliance-logo-in-the-app…

…-header Add: Appliance logo in the app header and page title - opensight
greenbone · Oct 2, 2024 · 48a2292 · 48a2292
2 parents 674a388 + 546254c
commit 48a2292
Show file tree

Hide file tree

Showing 25 changed files with 710 additions and 34 deletions.
diff --git a/index.html b/index.html
@@ -1,8 +1,8 @@
 <!doctype html>
-<html>
+<html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" href="/img/favicon.png" type="image/png"/>
+    <link rel="icon" href="/img/favicon.png" type="image/png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Greenbone Security Assistant</title>
     <script type="text/javascript" src="/config.js"></script>
@@ -11,5 +11,24 @@
     <div id="app"></div>
     <div id="portals"></div>
     <script type="module" src="/src/index.jsx"></script>
+    <script>
+      window.addEventListener('DOMContentLoaded', () => {
+        try {
+          const vendorLabel = config.vendorLabel;
+
+          const match = vendorLabel.match(/gsm-(\w+)_label\.svg/);
+          if (match) {
+            let labelPart = match[1];
+            if (isNaN(labelPart)) {
+              labelPart = labelPart.toUpperCase();
+            }
+            const pageTitle = `Greenbone - ${labelPart}`;
+            document.title = pageTitle;
+          } else {
+            document.title = 'Greenbone Security Assistant';
+          }
+        } catch (error) {}
+      });
+    </script>
   </body>
 </html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -32,7 +32,7 @@
     "node": ">=18.0"
   },
   "dependencies": {
-    "@greenbone/opensight-ui-components": "^0.4.0",
+    "@greenbone/opensight-ui-components": "^0.4.1-alpha6",
     "@mantine/core": "^6.0.0",
     "@reduxjs/toolkit": "^2.2.7",
     "@sentry/react": "^8.28.0",

diff --git a/src/web/components/icon/GreenboneApplianceLogo.jsx b/src/web/components/icon/GreenboneApplianceLogo.jsx
@@ -0,0 +1,35 @@
+/* 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';
+import EnterpriseCenoSvg from 'web/components/icon/svg/Enterprise_CENO.svg';
+import EnterpriseDecaSvg from 'web/components/icon/svg/Enterprise_DECA.svg';
+import EnterpriseExaSvg from 'web/components/icon/svg/Enterprise_EXA.svg';
+import EnterprisePetaSvg from 'web/components/icon/svg/Enterprise_PETA.svg';
+import EnterpriseTeraSvg from 'web/components/icon/svg/Enterprise_TERA.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);
+export const EnterpriseCeno = createEnterpriseComponent(EnterpriseCenoSvg);
+export const EnterpriseDeca = createEnterpriseComponent(EnterpriseDecaSvg);
+export const EnterpriseExa = createEnterpriseComponent(EnterpriseExaSvg);
+export const EnterprisePeta = createEnterpriseComponent(EnterprisePetaSvg);
+export const EnterpriseTera = createEnterpriseComponent(EnterpriseTeraSvg);
diff --git a/src/web/components/icon/SvgIconWrapper.jsx b/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;
diff --git a/src/web/components/icon/svg/Enterprise_150.svg b/src/web/components/icon/svg/Enterprise_150.svg
diff --git a/src/web/components/icon/svg/Enterprise_400.svg b/src/web/components/icon/svg/Enterprise_400.svg
diff --git a/src/web/components/icon/svg/Enterprise_450.svg b/src/web/components/icon/svg/Enterprise_450.svg
diff --git a/src/web/components/icon/svg/Enterprise_5400.svg b/src/web/components/icon/svg/Enterprise_5400.svg
diff --git a/src/web/components/icon/svg/Enterprise_600.svg b/src/web/components/icon/svg/Enterprise_600.svg
diff --git a/src/web/components/icon/svg/Enterprise_650.svg b/src/web/components/icon/svg/Enterprise_650.svg
diff --git a/src/web/components/icon/svg/Enterprise_6500.svg b/src/web/components/icon/svg/Enterprise_6500.svg
diff --git a/src/web/components/icon/svg/Enterprise_CENO.svg b/src/web/components/icon/svg/Enterprise_CENO.svg
diff --git a/src/web/components/icon/svg/Enterprise_DECA.svg b/src/web/components/icon/svg/Enterprise_DECA.svg
diff --git a/src/web/components/icon/svg/Enterprise_EXA.svg b/src/web/components/icon/svg/Enterprise_EXA.svg
diff --git a/src/web/components/icon/svg/Enterprise_PETA.svg b/src/web/components/icon/svg/Enterprise_PETA.svg
diff --git a/src/web/components/icon/svg/Enterprise_TERA.svg b/src/web/components/icon/svg/Enterprise_TERA.svg
diff --git a/src/web/components/layout/__tests__/__snapshots__/pagetitle.jsx.snap b/src/web/components/layout/__tests__/__snapshots__/pagetitle.jsx.snap
diff --git a/src/web/components/layout/__tests__/pagetitle.jsx b/src/web/components/layout/__tests__/pagetitle.jsx
@@ -3,27 +3,31 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-
 import {describe, test, expect} from '@gsa/testing';
 
 import PageTitle from 'web/components/layout/pagetitle';
 
-import {render} from 'web/utils/testing';
+import {rendererWith} from 'web/utils/testing';
 
-describe('PageTitle tests', () => {
-  test('should render', () => {
-    const {element} = render(<PageTitle />);
-    expect(element).toMatchSnapshot();
-  });
+const gmp = {
+  settings: {
+    vendorLabel: 'someVendorLabel',
+  },
+};
 
+describe('PageTitle tests', () => {
   test('Should render default title', () => {
+    const {render} = rendererWith({gmp});
+
     const defaultTitle = 'Greenbone Security Assistant';
     render(<PageTitle />);
 
     expect(global.window.document.title).toBe(defaultTitle);
   });
 
   test('Should render custom title', () => {
+    const {render} = rendererWith({gmp});
+
     const title = 'foo';
     const defaultTitle = 'Greenbone Security Assistant';
     render(<PageTitle title={title} />);
@@ -32,6 +36,8 @@ describe('PageTitle tests', () => {
   });
 
   test('should update value', () => {
+    const {render} = rendererWith({gmp});
+
     const title1 = 'foo';
     const title2 = 'bar';
     const defaultTitle = 'Greenbone Security Assistant';
@@ -43,4 +49,16 @@ describe('PageTitle tests', () => {
 
     expect(global.window.document.title).toBe(defaultTitle + ' - ' + title2);
   });
+  test('should render appliance model title', () => {
+    const {render} = rendererWith({
+      gmp: {
+        settings: {
+          vendorLabel: 'gsm-150_label.svg',
+        },
+      },
+    });
+    render(<PageTitle />);
+
+    expect(global.window.document.title).toBe('Greenbone - 150');
+  });
 });
diff --git a/src/web/components/layout/pagetitle.jsx b/src/web/components/layout/pagetitle.jsx
@@ -6,10 +6,15 @@
 import {useEffect} from 'react';
 import {isDefined} from 'gmp/utils/identity';
 import PropTypes from 'web/utils/proptypes';
-
-const defaultTitle = 'Greenbone Security Assistant';
+import useGmp from 'web/hooks/useGmp';
+import {applianceTitle} from 'web/utils/applianceData';
 
 const PageTitle = ({title}) => {
+  const gmp = useGmp();
+  const vendorLabel = gmp?.settings?.vendorLabel || 'defaultVendorLabel';
+  const defaultTitle =
+    applianceTitle[vendorLabel] || 'Greenbone Security Assistant';
+
   useEffect(() => {
     if (isDefined(title)) {
       document.title = defaultTitle + ' - ' + title;
@@ -20,7 +25,8 @@ const PageTitle = ({title}) => {
     return () => {
       document.title = defaultTitle;
     };
-  }, [title]);
+  }, [defaultTitle, title]);
+
   return null;
 };
 

diff --git a/src/web/components/structure/__tests__/getLogo.jsx b/src/web/components/structure/__tests__/getLogo.jsx
@@ -0,0 +1,39 @@
+/* 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'],
+    ['gsm-ceno_label.svg', 'EnterpriseCeno'],
+    ['gsm-deca_label.svg', 'EnterpriseDeca'],
+    ['gsm-exa_label.svg', 'EnterpriseExa'],
+    ['gsm-peta_label.svg', 'EnterprisePeta'],
+    ['gsm-tera_label.svg', 'EnterpriseTera'],
+  ];
+
+  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();
+  });
+});
diff --git a/src/web/components/structure/getLogo.jsx b/src/web/components/structure/getLogo.jsx
@@ -0,0 +1,36 @@
+/* SPDX-FileCopyrightText: 2024 Greenbone AG
+ *
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import PropTypes from 'web/utils/proptypes';
+
+import {applianceComponent} from 'web/utils/applianceData';
+
+const getLogo = model => {
+  const Component = applianceComponent[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',
+    'gsm-ceno_label.svg',
+    'gsm-deca_label.svg',
+    'gsm-exa_label.svg',
+    'gsm-peta_label.svg',
+    'gsm-tera_label.svg',
+  ]),
+};
+
+export default getLogo;