DONT MERGE: 1727 Allow adding more version info to hover modal (#1733)

* Add icon, gql query, sub context menu

* Add orchestrator-ui-components npm pkg version to popover

* Change icon

* Add changeset

* Add translations

* Break up nested ternary; address PR comments

* Small change to gql query for version endpoint

Author: Sparrow1029

.changeset/spotty-cheetahs-type.md

@@ -0,0 +1,5 @@
+---
+'@orchestrator-ui/orchestrator-ui-components': minor
+---
+
+Added support for displaying software versions in hamburger menu

packages/orchestrator-ui-components/src/components/WfoPageTemplate/WfoPageHeader/WfoHamburgerMenu.tsx

@@ -5,14 +5,18 @@ import { useTranslations } from 'next-intl';
 
 import { EuiButtonIcon, EuiContextMenu, EuiPopover } from '@elastic/eui';
 import type { EuiContextMenuPanelDescriptor } from '@elastic/eui';
+import { EmotionJSX } from '@emotion/react/types/jsx-namespace';
 
+import { WfoLoading } from '@/components/WfoLoading';
+import { ORCHESTRATOR_UI_LIBRARY_VERSION } from '@/configuration';
 import { useGetOrchestratorConfig, useOrchestratorTheme } from '@/hooks';
-import { WfoLogoutIcon } from '@/icons';
+import { WfoLogoutIcon, WfoSquareStack3dStack, WfoXCircleFill } from '@/icons';
 import { WfoQuestionCircle } from '@/icons/WfoQuestionCircle';
+import { useGetVersionsQuery } from '@/rtk/endpoints/versions';
 import { toOptionalArrayEntry } from '@/utils';
 
 export const WfoHamburgerMenu = ({}) => {
-    const t = useTranslations('main');
+    const t = useTranslations('hamburgerMenu');
     const [isPopoverOpen, setPopoverIsOpen] = useState(false);
     const { theme, isDarkThemeActive } = useOrchestratorTheme();
     const { enableSupportMenuItem, supportMenuItemUrl } =
@@ -23,9 +27,50 @@ export const WfoHamburgerMenu = ({}) => {
     const handleOpenSupport = async (): Promise<undefined> => {
         window.open(supportMenuItemUrl, '_blank');
     };
+    const {
+        data,
+        isFetching,
+        error: versionFetchError,
+    } = useGetVersionsQuery();
+
+    const getVersionItems = () => {
+        if (versionFetchError) {
+            console.error(versionFetchError);
+            return [
+                {
+                    name: 'Error fetching application version data',
+                    icon: <WfoXCircleFill color={theme.colors.danger} />,
+                },
+            ];
+        }
+        if (isFetching) {
+            return [{ name: '', icon: <WfoLoading /> }];
+        }
+        // initial array contains orchestrator-ui-components library version
+        const versionsArr: [{ name: string; icon: EmotionJSX.Element }] = [
+            {
+                name: `orchestrator-ui-components: ${ORCHESTRATOR_UI_LIBRARY_VERSION}`,
+                icon: <WfoSquareStack3dStack />,
+            },
+        ];
+
+        if (data === undefined) {
+            return versionsArr;
+        }
+
+        const orchApiVersions = data.version.applicationVersions.map((item) => {
+            return {
+                name: item,
+                icon: <WfoSquareStack3dStack />,
+            };
+        });
+
+        // orchestrator-ui-components library version + versions returned from orchestrator api
+        return versionsArr.concat(orchApiVersions);
+    };
 
     const logoutItem = {
-        name: 'Logout',
+        name: t('logout'),
         icon: (
             <WfoLogoutIcon
                 color={
@@ -37,7 +82,7 @@ export const WfoHamburgerMenu = ({}) => {
     };
 
     const supportItem = {
-        name: 'Support',
+        name: t('support'),
         icon: (
             <WfoQuestionCircle
                 color={
@@ -48,8 +93,15 @@ export const WfoHamburgerMenu = ({}) => {
         onClick: handleOpenSupport,
     };
 
+    const versionItem = {
+        name: t('softwareVersions'),
+        icon: <WfoSquareStack3dStack width={24} height={24} />,
+        panel: 1,
+    };
+
     const panelItems = [
         ...toOptionalArrayEntry(supportItem, enableSupportMenuItem),
+        versionItem,
         { ...logoutItem },
     ];
 
@@ -58,6 +110,11 @@ export const WfoHamburgerMenu = ({}) => {
             id: 0,
             items: panelItems,
         },
+        {
+            id: 1,
+            title: t('softwareVersions'),
+            items: getVersionItems(),
+        },
     ];
 
     return (
@@ -77,7 +134,11 @@ export const WfoHamburgerMenu = ({}) => {
             panelPaddingSize="none"
             anchorPosition="downLeft"
         >
-            <EuiContextMenu initialPanelId={0} panels={panels} />
+            <EuiContextMenu
+                initialPanelId={0}
+                panels={panels}
+                css={{ width: theme.base * 25 }}
+            />
         </EuiPopover>
     );
 };

packages/orchestrator-ui-components/src/icons/heroicons/WfoSquareStack3dStack.tsx

@@ -0,0 +1,27 @@
+import React, { FC } from 'react';
+
+import { WfoIconProps } from '@/icons';
+
+import { withWfoHeroIconsWrapper } from './WfoHeroIconsWrapper';
+
+const WfoSquareStack3dStackSvg: FC<WfoIconProps> = ({
+    width = 20,
+    height = 20,
+    color = 'currentColor',
+}) => (
+    <svg
+        width={width}
+        height={height}
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill={color}
+    >
+        <path d="M11.644 1.59a.75.75 0 0 1 .712 0l9.75 5.25a.75.75 0 0 1 0 1.32l-9.75 5.25a.75.75 0 0 1-.712 0l-9.75-5.25a.75.75 0 0 1 0-1.32l9.75-5.25Z" />
+        <path d="m3.265 10.602 7.668 4.129a2.25 2.25 0 0 0 2.134 0l7.668-4.13 1.37.739a.75.75 0 0 1 0 1.32l-9.75 5.25a.75.75 0 0 1-.71 0l-9.75-5.25a.75.75 0 0 1 0-1.32l1.37-.738Z" />
+        <path d="m10.933 19.231-7.668-4.13-1.37.739a.75.75 0 0 0 0 1.32l9.75 5.25c.221.12.489.12.71 0l9.75-5.25a.75.75 0 0 0 0-1.32l-1.37-.738-7.668 4.13a2.25 2.25 0 0 1-2.134-.001Z" />
+    </svg>
+);
+
+export const WfoSquareStack3dStack = withWfoHeroIconsWrapper(
+    WfoSquareStack3dStackSvg,
+);

packages/orchestrator-ui-components/src/icons/heroicons/index.ts

@@ -4,3 +4,4 @@ export * from './WfoArrowDown';
 export * from './WfoArrowsUpDown';
 export * from './WfoArrowUp';
 export * from './WfoWrench';
+export * from './WfoSquareStack3dStack';

packages/orchestrator-ui-components/src/messages/en-GB.json

@@ -24,8 +24,7 @@
         "resetToDefault": "Reset to default",
         "savePreferences": "Save preferences",
         "numberOfRows": "Number of rows",
-        "tableSettings": "Table settings",
-        "openMenu": "Open menu"
+        "tableSettings": "Table settings"
     },
     "common": {
         "product": "Product",
@@ -428,5 +427,11 @@
             "headerTitle": "Total number of products",
             "listTitle": "Total number of product instances"
         }
+    },
+    "hamburgerMenu": {
+        "openMenu": "Open menu",
+        "support": "Support",
+        "softwareVersions": "Software Versions",
+        "logout": "Logout"
     }
 }

packages/orchestrator-ui-components/src/messages/nl-NL.json

@@ -428,5 +428,10 @@
             "headerTitle": "Totaal aantal producten",
             "listTitle": "Totaal aantal productinstanties"
         }
+    },
+    "hamburgerMenu": {
+        "support": "Support",
+        "softwareVersions": "Software Versies",
+        "logout": "Logout"
     }
 }

packages/orchestrator-ui-components/src/rtk/endpoints/versions.ts

@@ -0,0 +1,27 @@
+import { orchestratorApi } from '../api';
+
+const versionsQuery = `
+    query Versions {
+        version {
+            applicationVersions
+        }
+    }
+`;
+
+export type VersionsResponse = {
+    version: {
+        applicationVersions: [string];
+    };
+};
+
+const versionsApi = orchestratorApi.injectEndpoints({
+    endpoints: (build) => ({
+        getVersions: build.query<VersionsResponse, void>({
+            query: () => ({
+                document: versionsQuery,
+            }),
+        }),
+    }),
+});
+
+export const { useGetVersionsQuery } = versionsApi;