@orchestrator-ui/orchestrator-ui-components 1.8.0 → 1.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@orchestrator-ui/orchestrator-ui-components",
-    "version": "1.8.0",
+    "version": "1.9.0",
     "license": "Apache-2.0",
     "description": "Library of UI Components used to display the workflow orchestrator frontend",
     "author": {

package/src/components/WfoPageTemplate/WfoSidebar/WfoMenuLink.tsx

@@ -0,0 +1,50 @@
+import React, { FC } from 'react';
+
+import { useTranslations } from 'next-intl';
+import Link from 'next/link';
+
+import { useWithOrchestratorTheme } from '@/hooks';
+
+import { getMenuItemStyles } from './styles';
+
+type WfoMenuItemLinkProps = {
+    path: string;
+    translationString: string;
+    isSelected: boolean;
+    isSubItem?: boolean;
+};
+
+export const WfoMenuItemLink: FC<WfoMenuItemLinkProps> = ({
+    path,
+    translationString,
+    isSelected,
+    isSubItem,
+}) => {
+    const {
+        menuItemStyle,
+        selectedMenuItem,
+        selectedSubMenuItem,
+        subMenuItemStyle,
+    } = useWithOrchestratorTheme(getMenuItemStyles);
+
+    const getMenuItemStyle = () => {
+        if (isSubItem) {
+            return isSelected ? selectedSubMenuItem : subMenuItemStyle;
+        } else {
+            return isSelected ? selectedMenuItem : menuItemStyle;
+        }
+    };
+
+    const t = useTranslations('main');
+
+    // This is a workaround to use the translation string as the link text if it's not found in the translation file.
+    const linkText =
+        t(translationString) === `main.${translationString}`
+            ? translationString
+            : t(translationString);
+    return (
+        <Link css={getMenuItemStyle()} href={path}>
+            {linkText}
+        </Link>
+    );
+};

package/src/components/WfoPageTemplate/WfoSidebar/WfoSidebar.tsx

@@ -25,6 +25,7 @@ import {
     PATH_WORKFLOWS,
 } from '../paths';
 import { WfoCopyright } from './WfoCopyright';
+import { WfoMenuItemLink } from './WfoMenuLink';
 
 export const renderEmptyElementWhenNotAllowedByPolicy = (isAllowed: boolean) =>
     isAllowed ? undefined : () => <></>;
@@ -46,6 +47,7 @@ export type WfoSidebarProps = {
 export const WfoSidebar: FC<WfoSidebarProps> = ({ overrideMenuItems }) => {
     const t = useTranslations('main');
     const router = useRouter();
+
     const [isSideNavOpenOnMobile, setIsSideNavOpenOnMobile] = useState(false);
     const { isAllowed } = usePolicy();
 
@@ -53,90 +55,144 @@ 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: () => (
+                <WfoMenuItemLink
+                    path={PATH_START}
+                    translationString="start"
+                    isSelected={router.pathname === PATH_START}
+                />
+            ),
         },
         {
             name: t('workflows'),
             id: '3',
             isSelected: router.pathname === PATH_WORKFLOWS,
             href: PATH_WORKFLOWS,
-            onClick: (e) => {
-                e.preventDefault();
-                router.push(PATH_WORKFLOWS);
-            },
+            renderItem: () => (
+                <WfoMenuItemLink
+                    path={PATH_WORKFLOWS}
+                    translationString="workflows"
+                    isSelected={router.pathname === PATH_WORKFLOWS}
+                />
+            ),
         },
         {
             name: t('subscriptions'),
             id: '4',
             isSelected: router.pathname === PATH_SUBSCRIPTIONS,
             href: PATH_SUBSCRIPTIONS,
-            onClick: (e) => {
-                e.preventDefault();
-                router.push(PATH_SUBSCRIPTIONS);
-            },
+            renderItem: () => (
+                <WfoMenuItemLink
+                    path={PATH_SUBSCRIPTIONS}
+                    translationString="subscriptions"
+                    isSelected={router.pathname === PATH_SUBSCRIPTIONS}
+                />
+            ),
         },
         {
             name: t('metadata'),
             id: '5',
             href: PATH_METADATA,
-            onClick: () => {
-                router.push(PATH_METADATA);
-            },
+            isSelected:
+                router.pathname.substring(0, PATH_METADATA.length) ===
+                PATH_METADATA,
+            renderItem: () => (
+                <WfoMenuItemLink
+                    path={PATH_METADATA_PRODUCTS}
+                    translationString="metadata"
+                    isSelected={
+                        router.pathname.substring(0, PATH_METADATA.length) ===
+                        PATH_METADATA
+                    }
+                />
+            ),
             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: () => (
+                        <WfoMenuItemLink
+                            path={PATH_METADATA_PRODUCTS}
+                            translationString="metadataProducts"
+                            isSelected={
+                                router.pathname === PATH_METADATA_PRODUCTS
+                            }
+                            isSubItem={true}
+                        />
+                    ),
                 },
                 {
                     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: () => (
+                        <WfoMenuItemLink
+                            path={PATH_METADATA_PRODUCT_BLOCKS}
+                            translationString="metadataProductblocks"
+                            isSelected={
+                                router.pathname === PATH_METADATA_PRODUCT_BLOCKS
+                            }
+                            isSubItem={true}
+                        />
+                    ),
                 },
                 {
                     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: () => (
+                        <WfoMenuItemLink
+                            path={PATH_METADATA_RESOURCE_TYPES}
+                            translationString="metadataResourceTypes"
+                            isSelected={
+                                router.pathname === PATH_METADATA_RESOURCE_TYPES
+                            }
+                            isSubItem={true}
+                        />
+                    ),
                 },
                 {
                     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: () => (
+                        <WfoMenuItemLink
+                            path={PATH_METADATA_WORKFLOWS}
+                            translationString="metadataWorkflows"
+                            isSelected={
+                                router.pathname === PATH_METADATA_WORKFLOWS
+                            }
+                            isSubItem={true}
+                        />
+                    ),
                 },
                 {
                     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: () => (
+                        <WfoMenuItemLink
+                            path={PATH_METADATA_TASKS}
+                            translationString="metadataTasks"
+                            isSelected={router.pathname === PATH_METADATA_TASKS}
+                            isSubItem={true}
+                        />
+                    ),
                 },
             ],
         },
@@ -144,21 +200,27 @@ export const WfoSidebar: FC<WfoSidebarProps> = ({ overrideMenuItems }) => {
             name: t('tasks'),
             isSelected: router.pathname === PATH_TASKS,
             id: '6',
-            onClick: (e) => {
-                e.preventDefault();
-                router.push(PATH_TASKS);
-            },
             href: PATH_TASKS,
+            renderItem: () => (
+                <WfoMenuItemLink
+                    path={PATH_TASKS}
+                    translationString="tasks"
+                    isSelected={router.pathname === PATH_TASKS}
+                />
+            ),
         },
         {
             name: t('settings'),
             isSelected: router.pathname === PATH_SETTINGS,
             id: '7',
-            onClick: (e) => {
-                e.preventDefault();
-                router.push(PATH_SETTINGS);
-            },
             href: PATH_SETTINGS,
+            renderItem: () => (
+                <WfoMenuItemLink
+                    path={PATH_SETTINGS}
+                    translationString="settings"
+                    isSelected={router.pathname === PATH_SETTINGS}
+                />
+            ),
         },
     ];
 

package/src/components/WfoPageTemplate/WfoSidebar/index.ts

@@ -1 +1,2 @@
 export * from './WfoSidebar';
+export * from './WfoMenuLink';

package/src/components/WfoPageTemplate/WfoSidebar/styles.ts

@@ -1,5 +1,5 @@
 import { EuiThemeComputed } from '@elastic/eui';
-import { css } from '@emotion/react';
+import { CSSObject, css } from '@emotion/react';
 
 export const getCopyrightStyles = (theme: EuiThemeComputed) => {
     const copyrightStyle = css({
@@ -15,3 +15,64 @@ export const getCopyrightStyles = (theme: EuiThemeComputed) => {
         copyrightStyle,
     };
 };
+
+export const getMenuItemStyles = (theme: EuiThemeComputed) => {
+    const baseStyles: CSSObject = {
+        lineHeight: `${theme.base * 1.25}px`,
+        display: 'flex',
+        alignItems: 'center',
+        ':hover': {
+            textDecoration: 'underline',
+        },
+        color: theme.colors.text,
+        padding: `${theme.base * 0.5}px ${theme.base * 0.75}px`,
+    };
+
+    const baseSubMenuStyles: CSSObject = {
+        ...baseStyles,
+        ':after': {
+            content: "''",
+            top: '16px',
+            left: 0,
+            width: '4px',
+            height: '1px',
+            backgroundColor: '#d3dae6',
+            position: 'absolute',
+        },
+        padding: '8px 12px',
+        ':last-child': {
+            top: '-4px',
+            position: 'relative',
+        },
+    };
+
+    const menuItemStyle = css({
+        ...baseStyles,
+        color: theme.colors.title,
+    });
+
+    const selectedMenuItem = css({
+        ...baseStyles,
+        height: `${theme.base * 2.25}px`,
+        backgroundColor: theme.colors.lightShade,
+        borderRadius: theme.border.radius.medium,
+        fontWeight: theme.font.weight.semiBold,
+        color: theme.colors.primaryText,
+    });
+
+    const selectedSubMenuItem = css({
+        ...baseSubMenuStyles,
+        fontWeight: theme.font.weight.semiBold,
+    });
+
+    const subMenuItemStyle = css({
+        ...baseSubMenuStyles,
+    });
+
+    return {
+        menuItemStyle,
+        selectedMenuItem,
+        selectedSubMenuItem,
+        subMenuItemStyle,
+    };
+};