Merge branches '905-metadata-refresh-bug' and 'main' of github.com:wo…

…rkfloworchestrator/orchestrator-ui-library
workfloworchestrator · Mar 27, 2024 · 751d937 · 751d937
2 parents 9ff8891 + 9e2266e
commit 751d937
Show file tree

Hide file tree

Showing 2 changed files with 84 additions and 43 deletions.
diff --git a/.changeset/silver-ears-jump.md b/.changeset/silver-ears-jump.md
@@ -0,0 +1,5 @@
+---
+"@orchestrator-ui/orchestrator-ui-components": minor
+---
+
+Improves sideBar navigation
diff --git a/packages/orchestrator-ui-components/src/components/WfoPageTemplate/WfoSidebar/WfoSidebar.tsx b/packages/orchestrator-ui-components/src/components/WfoPageTemplate/WfoSidebar/WfoSidebar.tsx
@@ -1,6 +1,7 @@
 import React, { FC, useState } from 'react';
 
 import { useTranslations } from 'next-intl';
+import Link from 'next/link';
 import { useRouter } from 'next/router';
 
 import { EuiSideNav, EuiSpacer } from '@elastic/eui';
@@ -53,112 +54,147 @@ export const WfoSidebar: FC<WfoSidebarProps> = ({ overrideMenuItems }) => {
         setIsSideNavOpenOnMobile((openState) => !openState);
     };
 
+    // Note: href is used to determine if the user has access to the page in
+    // defaultMenuItemsFilteredByPolicy so we need to keep it in the item although we don't use it in the render.
     const defaultMenuItems: EuiSideNavItemType<object>[] = [
         {
             name: t('start'),
             id: '2',
             isSelected: router.pathname === PATH_START,
-            onClick: (e) => {
-                e.preventDefault();
-                router.push(PATH_START);
-            },
+            href: PATH_START,
+            renderItem: (props) => (
+                <Link className={props.className} href={PATH_START}>
+                    {t('start')}
+                </Link>
+            ),
         },
         {
             name: t('workflows'),
             id: '3',
             isSelected: router.pathname === PATH_WORKFLOWS,
             href: PATH_WORKFLOWS,
-            onClick: (e) => {
-                e.preventDefault();
-                router.push(PATH_WORKFLOWS);
-            },
+            renderItem: (props) => (
+                <Link className={props.className} href={PATH_WORKFLOWS}>
+                    {t('workflows')}
+                </Link>
+            ),
         },
         {
             name: t('subscriptions'),
             id: '4',
             isSelected: router.pathname === PATH_SUBSCRIPTIONS,
             href: PATH_SUBSCRIPTIONS,
-            onClick: (e) => {
-                e.preventDefault();
-                router.push(PATH_SUBSCRIPTIONS);
-            },
+            renderItem: (props) => (
+                <Link className={props.className} href={PATH_SUBSCRIPTIONS}>
+                    {t('subscriptions')}
+                </Link>
+            ),
         },
         {
             name: t('metadata'),
             id: '5',
             href: PATH_METADATA,
-            onClick: () => {
-                router.push(PATH_METADATA);
-            },
+            renderItem: (props) => (
+                <Link className={props.className} href={PATH_METADATA}>
+                    {t('metadata')}
+                </Link>
+            ),
             items: [
                 {
                     name: t('metadataProducts'),
                     id: '5.1',
                     isSelected: router.pathname === PATH_METADATA_PRODUCTS,
-                    onClick: (e) => {
-                        e.preventDefault();
-                        router.push(PATH_METADATA_PRODUCTS);
-                    },
+                    href: PATH_METADATA_PRODUCTS,
+                    renderItem: (props) => (
+                        <Link
+                            className={props.className}
+                            href={PATH_METADATA_PRODUCTS}
+                        >
+                            {t('metadataProducts')}
+                        </Link>
+                    ),
                 },
                 {
                     name: t('metadataProductblocks'),
                     id: '5.2',
                     isSelected:
                         router.pathname === PATH_METADATA_PRODUCT_BLOCKS,
-                    onClick: (e) => {
-                        e.preventDefault();
-                        router.push(PATH_METADATA_PRODUCT_BLOCKS);
-                    },
+                    href: PATH_METADATA_PRODUCT_BLOCKS,
+                    renderItem: (props) => (
+                        <Link
+                            className={props.className}
+                            href={PATH_METADATA_PRODUCT_BLOCKS}
+                        >
+                            {t('metadataProductblocks')}
+                        </Link>
+                    ),
                 },
                 {
                     name: t('metadataResourceTypes'),
                     id: '5.3',
+                    href: PATH_METADATA_RESOURCE_TYPES,
                     isSelected:
                         router.pathname === PATH_METADATA_RESOURCE_TYPES,
-                    onClick: (e) => {
-                        e.preventDefault();
-                        router.push(PATH_METADATA_RESOURCE_TYPES);
-                    },
+                    renderItem: (props) => (
+                        <Link
+                            className={props.className}
+                            href={PATH_METADATA_RESOURCE_TYPES}
+                        >
+                            {t('metadataResourceTypes')}
+                        </Link>
+                    ),
                 },
                 {
                     name: t('metadataWorkflows'),
                     id: '5.4',
                     isSelected: router.pathname === PATH_METADATA_WORKFLOWS,
-                    onClick: (e) => {
-                        e.preventDefault();
-                        router.push(PATH_METADATA_WORKFLOWS);
-                    },
+                    href: PATH_METADATA_WORKFLOWS,
+                    renderItem: (props) => (
+                        <Link
+                            className={props.className}
+                            href={PATH_METADATA_WORKFLOWS}
+                        >
+                            {t('metadataWorkflows')}
+                        </Link>
+                    ),
                 },
                 {
                     name: t('metadataTasks'),
                     id: '5.5',
                     isSelected: router.pathname === PATH_METADATA_TASKS,
-                    onClick: (e) => {
-                        e.preventDefault();
-                        router.push(PATH_METADATA_TASKS);
-                    },
+                    href: PATH_METADATA_TASKS,
+                    renderItem: (props) => (
+                        <Link
+                            className={props.className}
+                            href={PATH_METADATA_TASKS}
+                        >
+                            {t('metadataTasks')}
+                        </Link>
+                    ),
                 },
             ],
         },
         {
             name: t('tasks'),
             isSelected: router.pathname === PATH_TASKS,
             id: '6',
-            onClick: (e) => {
-                e.preventDefault();
-                router.push(PATH_TASKS);
-            },
             href: PATH_TASKS,
+            renderItem: (props) => (
+                <Link className={props.className} href={PATH_TASKS}>
+                    {t('tasks')}
+                </Link>
+            ),
         },
         {
             name: t('settings'),
             isSelected: router.pathname === PATH_SETTINGS,
             id: '7',
-            onClick: (e) => {
-                e.preventDefault();
-                router.push(PATH_SETTINGS);
-            },
             href: PATH_SETTINGS,
+            renderItem: (props) => (
+                <Link className={props.className} href={PATH_SETTINGS}>
+                    {t('settings')}
+                </Link>
+            ),
         },
     ];