diff --git a/.changeset/spotty-cheetahs-type.md b/.changeset/spotty-cheetahs-type.md new file mode 100644 index 000000000..3f35a4355 --- /dev/null +++ b/.changeset/spotty-cheetahs-type.md @@ -0,0 +1,5 @@ +--- +'@orchestrator-ui/orchestrator-ui-components': minor +--- + +Added support for displaying software versions in hamburger menu diff --git a/packages/orchestrator-ui-components/src/components/WfoPageTemplate/WfoPageHeader/WfoHamburgerMenu.tsx b/packages/orchestrator-ui-components/src/components/WfoPageTemplate/WfoPageHeader/WfoHamburgerMenu.tsx index 24471bd5e..da66402e6 100644 --- a/packages/orchestrator-ui-components/src/components/WfoPageTemplate/WfoPageHeader/WfoHamburgerMenu.tsx +++ b/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 => { 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: , + }, + ]; + } + if (isFetching) { + return [{ name: '', icon: }]; + } + // initial array contains orchestrator-ui-components library version + const versionsArr: [{ name: string; icon: EmotionJSX.Element }] = [ + { + name: `orchestrator-ui-components: ${ORCHESTRATOR_UI_LIBRARY_VERSION}`, + icon: , + }, + ]; + + if (data === undefined) { + return versionsArr; + } + + const orchApiVersions = data.version.applicationVersions.map((item) => { + return { + name: item, + icon: , + }; + }); + + // orchestrator-ui-components library version + versions returned from orchestrator api + return versionsArr.concat(orchApiVersions); + }; const logoutItem = { - name: 'Logout', + name: t('logout'), icon: ( { }; const supportItem = { - name: 'Support', + name: t('support'), icon: ( { onClick: handleOpenSupport, }; + const versionItem = { + name: t('softwareVersions'), + icon: , + 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" > - + ); }; diff --git a/packages/orchestrator-ui-components/src/icons/heroicons/WfoSquareStack3dStack.tsx b/packages/orchestrator-ui-components/src/icons/heroicons/WfoSquareStack3dStack.tsx new file mode 100644 index 000000000..672534549 --- /dev/null +++ b/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 = ({ + width = 20, + height = 20, + color = 'currentColor', +}) => ( + + + + + +); + +export const WfoSquareStack3dStack = withWfoHeroIconsWrapper( + WfoSquareStack3dStackSvg, +); diff --git a/packages/orchestrator-ui-components/src/icons/heroicons/index.ts b/packages/orchestrator-ui-components/src/icons/heroicons/index.ts index 66e0860fd..5c7bda42d 100644 --- a/packages/orchestrator-ui-components/src/icons/heroicons/index.ts +++ b/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'; diff --git a/packages/orchestrator-ui-components/src/messages/en-GB.json b/packages/orchestrator-ui-components/src/messages/en-GB.json index 946bd1639..f7fb46acf 100644 --- a/packages/orchestrator-ui-components/src/messages/en-GB.json +++ b/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" } } diff --git a/packages/orchestrator-ui-components/src/messages/nl-NL.json b/packages/orchestrator-ui-components/src/messages/nl-NL.json index dc6de5b42..a48c0194d 100644 --- a/packages/orchestrator-ui-components/src/messages/nl-NL.json +++ b/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" } } diff --git a/packages/orchestrator-ui-components/src/rtk/endpoints/versions.ts b/packages/orchestrator-ui-components/src/rtk/endpoints/versions.ts new file mode 100644 index 000000000..d26e7255a --- /dev/null +++ b/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({ + query: () => ({ + document: versionsQuery, + }), + }), + }), +}); + +export const { useGetVersionsQuery } = versionsApi;