UI make navbar options configurable and filter menu items according to user groups

salt/metalk8s/addons/ui/deployed/ui.sls.in

@@ -68,6 +68,15 @@ Create shell-ui ConfigMap:
                 "clientId": "metalk8s-ui",
                 "responseType": "id_token",
                 "scopes": "openid profile email groups offline_access audience:server:client_id:oidc-auth-client"
+              },
+              "options": {
+                "main": {
+                    "https://{{ ingress_control_plane }}/":{ "en": "Platform", "fr": "Plateforme" },
+                    "https://{{ ingress_control_plane }}/alerts":{ "en": "Alerts", "fr": "Alertes" }
+                },
+                "subLogin": {
+                    "https://{{ ingress_control_plane }}/docs":{ "en": "Documentation", "fr": "Documentation" }
+                }
               }
             }
 

shell-ui/package.json

@@ -32,10 +32,11 @@
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.15.1",
-    "@scality/core-ui": "github:scality/core-ui.git#v0.7.1",
+    "@scality/core-ui": "github:scality/core-ui.git#v0.13.0",
     "oidc-client": "^1.11.3",
     "oidc-react": "^1.1.5",
     "polished": "^4.0.5",
+    "quicklink": "^2.1.0",
     "react": "^17.0.1",
     "react-debounce-input": "^3.2.3",
     "react-dom": "^17.0.1",

shell-ui/public/shell/config.json

@@ -6,5 +6,12 @@
     "clientId": "metalk8s-ui",
     "responseType": "id_token",
     "scopes": "openid profile email groups offline_access audience:server:client_id:oidc-auth-client"
+  },
+  "options": {
+    "main": {
+        "http://localhost:8082/":{ "en": "Platform", "fr": "Plateforme" },
+        "http://localhost:8082/test":{ "en": "Test", "fr": "Test" }
+    },
+    "subLogin": {}
   }
 }

shell-ui/src/NavBar.js

@@ -2,64 +2,101 @@
 import CoreUINavbar from '@scality/core-ui/dist/components/navbar/Navbar.component';
 import { useAuth } from 'oidc-react';
 import { useLayoutEffect, useState } from 'react';
-import type { SolutionsNavbarProps } from './index';
+import type {
+  Options,
+  SolutionsNavbarProps,
+  TranslationAndGroups,
+} from './index';
 import type { Node } from 'react';
 import { logOut } from './auth/logout';
+import {
+  getAccessiblePathsFromOptions,
+  isEntryAccessibleByTheUser,
+  normalizePath,
+} from './auth/permissionUtils';
+import { prefetch } from 'quicklink';
 
-export const LoadingNavbar = (): Node => <CoreUINavbar role="navigation" tabs={[{title: 'loading'}]} />;
+export const LoadingNavbar = (): Node => (
+  <CoreUINavbar role="navigation" tabs={[{ title: 'loading' }]} />
+);
 
-export const Navbar = ({
-  options,
-}: {
-  options: $PropertyType<SolutionsNavbarProps, 'options'>,
-}): Node => {
+const translateOptionsToMenu = (
+  options: Options,
+  section: 'main' | 'subLogin',
+  renderer: (
+    path: string,
+    translationAndGroup: TranslationAndGroups,
+  ) => { link: Node } | { label: string, onClick: () => void },
+  userGroups: string[],
+) => {
+  const normalizedLocation = normalizePath(location.href);
+  return (
+    Object.entries(options[section])
+      //$FlowIssue - flow typing for Object.entries incorrectly typing values as [string, mixed] instead of [string, TranslationAndGroups]
+      .filter((entry: [string, TranslationAndGroups]) =>
+        isEntryAccessibleByTheUser(entry, userGroups),
+      )
+      .map(
+        //$FlowIssue - flow typing for Object.entries incorrectly typing values as [string, mixed] instead of [string, TranslationAndGroups]
+        ([path, translationAndGroup]: [string, TranslationAndGroups], i) => {
+          try {
+            return {
+              ...renderer(path, translationAndGroup),
+              selected: translationAndGroup.activeIfMatches
+                ? new RegExp(translationAndGroup.activeIfMatches).test(
+                    location.href,
+                  )
+                : normalizedLocation === normalizePath(path),
+            };
+          } catch (e) {
+            throw new Error(
+              `[navbar][config] Invalid path specified in "options.${section}": "${path}" ` +
+                '(keys must be defined as fully qualified URLs, ' +
+                'such as "{protocol}://{host}{path}?{queryParams}")',
+            );
+          }
+        },
+      )
+  );
+};
+
+export const Navbar = ({ options }: { options: Options }): Node => {
   const auth = useAuth();
 
-  const tabs = [
-    {
-      selected: true,
-      title: 'Overview',
-      onClick: () => console.log('Overview'),
-    },
-  ];
+  const userGroups: string[] = auth.userData?.profile?.groups || [];
+  const accessiblePaths = getAccessiblePathsFromOptions(options, userGroups);
+  useLayoutEffect(() => {
+    accessiblePaths.forEach((accessiblePath) => {
+      prefetch(accessiblePath);
+    });
+  }, [JSON.stringify(accessiblePaths)]);
+
+  const tabs = translateOptionsToMenu(
+    options,
+    'main',
+    (path, translationAndGroup) => ({
+      link: <a href={path}>{translationAndGroup.en}</a>,
+    }),
+    userGroups,
+  );
+
   const rightActions = [
-    {
-      type: 'dropdown',
-      text: 'FR',
-      icon: <i className="fas fa-globe" />,
-      items: [
-        {
-          label: 'English',
-          name: 'EN',
-          onClick: () => console.log('en'),
-        },
-      ],
-    },
-    {
-      type: 'dropdown',
-      icon: <i className="fas fa-question-circle" />,
-      items: [
-        { label: 'About', onClick: () => console.log('About clicked') },
-        {
-          label: 'Documentation',
-          onClick: () => console.log('Documentation clicked'),
-        },
-        {
-          label: 'Onboarding',
-          onClick: () => console.log('Onboarding clicked'),
-        },
-      ],
-    },
-    {
-      type: 'button',
-      icon: <i className="fas fa-sun" />,
-      onClick: () => console.log('Theme toggle clicked'),
-    },
     {
       type: 'dropdown',
       text: auth.userData?.profile.name || '',
       icon: <i className="fas fa-user" />,
       items: [
+        ...translateOptionsToMenu(
+          options,
+          'subLogin',
+          (path, translationAndGroup) => ({
+            label: translationAndGroup.en,
+            onClick: () => {
+              location.href = path;
+            },
+          }),
+          userGroups,
+        ),
         {
           label: 'Log out',
           onClick: () => {
@@ -69,6 +106,7 @@ export const Navbar = ({
       ],
     },
   ];
+
   return (
     <CoreUINavbar rightActions={rightActions} tabs={tabs} role="navigation" />
   );