@orchestrator-ui/orchestrator-ui-components 7.4.0 → 7.5.0

package/src/components/WfoMonacoCodeBlock/styles.ts

@@ -3,16 +3,14 @@ import { css } from '@emotion/react';
 import { WfoThemeHelpers } from '@/hooks';
 
 export const getStyles = ({ theme, isDarkModeActive }: WfoThemeHelpers) => {
-    const monacoEditorStyle = css({
-        marginTop: 10,
-        padding: 10,
-        backgroundColor: isDarkModeActive
-            ? theme.colors.backgroundBaseNeutral
-            : theme.colors.backgroundBaseSubdued,
-        borderRadius: theme.border.radius.medium,
-    });
+  const monacoEditorStyle = css({
+    marginTop: 10,
+    padding: 10,
+    backgroundColor: isDarkModeActive ? theme.colors.backgroundBaseNeutral : theme.colors.backgroundBaseSubdued,
+    borderRadius: theme.border.radius.medium,
+  });
 
-    return {
-        monacoEditorStyle,
-    };
+  return {
+    monacoEditorStyle,
+  };
 };

package/src/components/WfoNoResults/WfoNoResults.stories.tsx

@@ -6,14 +6,14 @@ import { WfoSearchStrikethrough } from './../../icons';
 import { WfoNoResults } from './WfoNoResults';
 
 const Story: Meta<typeof WfoNoResults> = {
-    component: WfoNoResults,
-    title: 'WfoNoResult',
+  component: WfoNoResults,
+  title: 'WfoNoResult',
 };
 export default Story;
 
 export const Default = {
-    args: {
-        icon: <WfoSearchStrikethrough />,
-        text: 'No results text',
-    },
+  args: {
+    icon: <WfoSearchStrikethrough />,
+    text: 'No results text',
+  },
 };

package/src/components/WfoNoResults/WfoNoResults.tsx

@@ -7,16 +7,16 @@ import { useWithOrchestratorTheme } from '@/hooks';
 import { getStyles } from './styles';
 
 interface WfoNoResultsProps {
-    text: string;
-    icon: ReactNode;
+  text: string;
+  icon: ReactNode;
 }
 
 export const WfoNoResults = ({ text, icon }: WfoNoResultsProps) => {
-    const { panelStyle } = useWithOrchestratorTheme(getStyles);
+  const { panelStyle } = useWithOrchestratorTheme(getStyles);
 
-    return (
-        <EuiFlexGroup css={panelStyle}>
-            {icon} {text}
-        </EuiFlexGroup>
-    );
+  return (
+    <EuiFlexGroup css={panelStyle}>
+      {icon} {text}
+    </EuiFlexGroup>
+  );
 };

package/src/components/WfoNoResults/styles.ts

@@ -3,21 +3,21 @@ import { css } from '@emotion/react';
 import { WfoThemeHelpers } from '@/hooks';
 
 export const getStyles = ({ theme }: WfoThemeHelpers) => {
-    const panelStyle = css({
-        display: 'flex',
-        padding: theme.base * 2,
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'center',
-        gap: theme.base / 2,
-        backgroundColor: theme.colors.backgroundBaseSubdued,
-        borderRadius: theme.border.radius.medium,
-        color: theme.colors.link,
-        fontFamily: theme.font.family,
-        marginTop: theme.base * 2,
-    });
+  const panelStyle = css({
+    display: 'flex',
+    padding: theme.base * 2,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: theme.base / 2,
+    backgroundColor: theme.colors.backgroundBaseSubdued,
+    borderRadius: theme.border.radius.medium,
+    color: theme.colors.link,
+    fontFamily: theme.font.family,
+    marginTop: theme.base * 2,
+  });
 
-    return {
-        panelStyle,
-    };
+  return {
+    panelStyle,
+  };
 };

package/src/components/WfoOptionalLink/WfoOptionalLink.tsx

@@ -4,17 +4,14 @@ import Link from 'next/link';
 import type { UrlObject } from 'url';
 
 export type WfoOptionalLinkProps = {
-    children: ReactNode;
-    href?: UrlObject | string;
+  children: ReactNode;
+  href?: UrlObject | string;
 };
 
-export const WfoOptionalLink: FC<WfoOptionalLinkProps> = ({
-    children,
-    href,
-}) => {
-    if (!href) {
-        return <span>{children}</span>;
-    }
+export const WfoOptionalLink: FC<WfoOptionalLinkProps> = ({ children, href }) => {
+  if (!href) {
+    return <span>{children}</span>;
+  }
 
-    return <Link href={href}>{children}</Link>;
+  return <Link href={href}>{children}</Link>;
 };

package/src/components/WfoPageTemplate/WfoBreadcrumbs/WfoBreadcrumbs.tsx

@@ -3,101 +3,75 @@ import React from 'react';
 import { useTranslations } from 'next-intl';
 import { useRouter } from 'next/router';
 
-import {
-    EuiBreadcrumb,
-    EuiBreadcrumbs,
-    EuiButtonIcon,
-    EuiFlexGroup,
-    EuiFlexItem,
-    EuiSpacer,
-} from '@elastic/eui';
+import { EuiBreadcrumb, EuiBreadcrumbs, EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
 
 import { useOrchestratorTheme } from '@/hooks';
 import { WfoSideMenu } from '@/icons';
-import {
-    isAllUpperCase,
-    isUuid4,
-    removeSuffix,
-    upperCaseFirstChar,
-} from '@/utils';
+import { isAllUpperCase, isUuid4, removeSuffix, upperCaseFirstChar } from '@/utils';
 
 interface WfoBreadcrumbsProps {
-    handleSideMenuClick: () => void;
+  handleSideMenuClick: () => void;
 }
 
-export const WfoBreadcrumbs = ({
-    handleSideMenuClick,
-}: WfoBreadcrumbsProps) => {
-    const router = useRouter();
-    const { theme } = useOrchestratorTheme();
-    const t = useTranslations('main');
-    // Setup initial breadcrumbs with navigation to home
-    const breadcrumbs: EuiBreadcrumb[] = [
-        {
-            text: t('start'),
-            href: '/',
-            onClick: (e) => {
-                e.preventDefault();
-                router.push('/').then();
-            },
-        },
-    ];
+export const WfoBreadcrumbs = ({ handleSideMenuClick }: WfoBreadcrumbsProps) => {
+  const router = useRouter();
+  const { theme } = useOrchestratorTheme();
+  const t = useTranslations('main');
+  // Setup initial breadcrumbs with navigation to home
+  const breadcrumbs: EuiBreadcrumb[] = [
+    {
+      text: t('start'),
+      href: '/',
+      onClick: (e) => {
+        e.preventDefault();
+        router.push('/').then();
+      },
+    },
+  ];
 
-    // Handle remaining breadcrumbs dynamic
-    const parts = router.asPath.split('/');
-    parts.forEach((p, index) => {
-        if (index > 0) {
-            const link = parts.slice(0, index + 1).join('/');
-            // Handle UUID's: so you can have breadcrumb like: `Start / Subscriptions / b2312aa-cbc ...`
-            // first remove the suffix, like ?activeTab=....
-            const _p = removeSuffix(p);
-            const text =
-                isUuid4(_p) || isAllUpperCase(_p) ? _p : upperCaseFirstChar(_p);
+  // Handle remaining breadcrumbs dynamic
+  const parts = router.asPath.split('/');
+  parts.forEach((p, index) => {
+    if (index > 0) {
+      const link = parts.slice(0, index + 1).join('/');
+      // Handle UUID's: so you can have breadcrumb like: `Start / Subscriptions / b2312aa-cbc ...`
+      // first remove the suffix, like ?activeTab=....
+      const _p = removeSuffix(p);
+      const text = isUuid4(_p) || isAllUpperCase(_p) ? _p : upperCaseFirstChar(_p);
 
-            breadcrumbs.push({
-                text: text,
-                href: link,
-                onClick: (e) => {
-                    e.preventDefault();
-                    router.push(link).then();
-                },
-            });
-        }
-    });
+      breadcrumbs.push({
+        text: text,
+        href: link,
+        onClick: (e) => {
+          e.preventDefault();
+          router.push(link).then();
+        },
+      });
+    }
+  });
 
-    return (
-        <>
-            <EuiFlexGroup
-                direction="row"
-                alignItems="center"
-                justifyContent="flexStart"
-                gutterSize="none"
-            >
-                <EuiFlexItem grow={0}>
-                    <EuiButtonIcon
-                        aria-label={t('ariaLabelToggleSideMenu')}
-                        display="empty"
-                        iconType={() => (
-                            <WfoSideMenu color={theme.colors.textSubdued} />
-                        )}
-                        color="text"
-                        css={{
-                            width: `${theme.size.l}px`,
-                            height: `${theme.size.l}px`,
-                            marginRight: `${theme.base * 0.375}px`,
-                        }}
-                        onClick={handleSideMenuClick}
-                    />
-                </EuiFlexItem>
-                <EuiFlexItem>
-                    <EuiBreadcrumbs
-                        breadcrumbs={breadcrumbs}
-                        truncate={false}
-                        aria-label={t('ariaLabelCurrentPage')}
-                    />
-                </EuiFlexItem>
-            </EuiFlexGroup>
-            <EuiSpacer size="m" />
-        </>
-    );
+  return (
+    <>
+      <EuiFlexGroup direction="row" alignItems="center" justifyContent="flexStart" gutterSize="none">
+        <EuiFlexItem grow={0}>
+          <EuiButtonIcon
+            aria-label={t('ariaLabelToggleSideMenu')}
+            display="empty"
+            iconType={() => <WfoSideMenu color={theme.colors.textSubdued} />}
+            color="text"
+            css={{
+              width: `${theme.size.l}px`,
+              height: `${theme.size.l}px`,
+              marginRight: `${theme.base * 0.375}px`,
+            }}
+            onClick={handleSideMenuClick}
+          />
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiBreadcrumbs breadcrumbs={breadcrumbs} truncate={false} aria-label={t('ariaLabelCurrentPage')} />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+      <EuiSpacer size="m" />
+    </>
+  );
 };

package/src/components/WfoPageTemplate/WfoPageHeader/WfoAppLogo.tsx

@@ -1,28 +1,19 @@
 import React, { FC } from 'react';
 
 export const WfoAppLogo: FC = () => (
-    <svg
-        width="64"
-        height="64"
-        viewBox="0 0 640 640"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-    >
-        <path
-            d="M354.832 276.683L360.538 287.948L359.342 289.144L350.731 280.784L354.832 276.683Z"
-            fill="#76B5E0"
-        />
-        <path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M314 128H326V144.077L346.283 151.332C369.967 159.802 392.949 170.121 415.016 182.193L437.191 194.324L457.599 173.916L466.084 182.401L444.445 204.041L447.319 212.963C458.702 248.31 474.148 282.216 493.347 314H512V326H494.455L479.094 369.434L455.768 455.642L435.097 460.957C396.477 470.887 359.666 486.806 326 508.123V512H314V507.22C278.543 479.763 236.412 462.268 191.965 456.521L177.181 471.305L168.696 462.82L182.781 448.735L178.858 430.061C170.982 392.571 155.435 357.146 133.225 326H128V314H133.231C160.297 276.391 177.89 232.762 184.461 186.82L184.848 184.112L189.665 183.666C233.34 179.627 275.675 166.567 314 145.341V128ZM202.539 445.947C242.755 452.568 280.91 468.411 314 492.244V473.216L290.911 456.231C282.445 450.003 272.889 445.414 262.735 442.701L217.795 430.692L202.539 445.947ZM223.816 419.218L220.283 411.232L220.205 411.31L203.692 365.949L182.106 324.487L209.836 263.925L220.609 229.096L250.516 259.003L247.951 276.471L259.312 281.643C259.366 281.313 259.417 280.983 259.466 280.652L261.092 269.578L280.603 289.089L289.027 280.543L272.597 264.113C290.854 263.844 308.123 255.788 320.058 241.986L320.416 242.326C326.029 247.645 334.392 254.783 343.006 258.57C346.645 260.171 350.671 261.323 354.722 262.155L365.634 251.672C359.394 251.031 352.909 249.816 347.836 247.585C340.856 244.516 333.312 238.102 327.751 232.737C327.142 232.15 326.558 231.575 326 231.019V192.603L349.031 206.751C357.495 211.95 366.707 215.817 376.346 218.216L414.942 227.823L416.766 231.72L417.01 231.476L428.441 264.125L454.962 322.358L435.039 366.132L418.078 409.592L417.67 409.185L413.333 419.221L370.63 430.485C358.819 433.601 347.703 438.922 337.869 446.167L326 454.912V413.269L369.867 395.097L360.505 385.986L326 400.28L326 352.404L319.555 346.132L314 351.776L314 397.517L303.919 390.42C298.125 386.34 291.71 383.263 284.945 381.296L275.035 391.364C282.944 392.589 290.464 395.623 297.01 400.232L314 412.193V457.525L298.401 446.05C288.665 438.888 277.675 433.611 265.998 430.49L223.816 419.218ZM326 470.61V494.005C358.966 474.008 394.715 458.95 432.109 449.335L439.062 447.547L421.62 430.106L373.853 442.706C363.583 445.415 353.917 450.042 345.366 456.342L326 470.61ZM427.836 419.351L447.764 439.279L467.629 365.861L481.727 326H467.19L446.687 371.051L427.836 419.351ZM465.043 314H479.389C461.412 283.226 446.827 250.582 435.896 216.641L434.909 213.576L426.928 221.558L440.181 259.408L465.043 314ZM416.363 215.152L428.349 203.166L409.257 192.721C387.741 180.95 365.334 170.889 342.242 162.631L326 156.822V177.77L355.647 195.982C363.006 200.503 371.017 203.865 379.399 205.952L416.363 215.152ZM314 175.391V158.982C279.328 177.284 241.657 189.241 202.767 194.283L222.749 214.264L255.145 205.567C261.978 203.732 268.553 201.044 274.715 197.566L314 175.391ZM314 189.904L280.928 208.572C273.842 212.572 266.28 215.663 258.422 217.773L233.065 224.581L260.604 252.12H271.652C287.114 252.12 301.774 245.239 311.653 233.345L314 230.516V189.904ZM210.505 218.991L194.003 202.49C186.351 242.412 170.649 280.354 147.865 314H173.007L198.004 259.408L210.505 218.991ZM168.644 326L192.099 371.051L210.345 421.171L192.914 438.602L190.601 427.593C182.967 391.252 168.422 356.769 147.811 326H168.644Z"
-            fill="#76B5E0"
-        />
-        <path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M217.061 279.988L198.893 323.312L236.306 407.902L319.312 323.568L402.325 404.358L439.577 318.177L402.325 238.609L369.47 270.173L392.538 315.708L385.493 336.836L319.327 272.592L252.74 340.151L245.423 323.568L252.74 296.229L217.061 279.988Z"
-            fill="white"
-        />
-    </svg>
+  <svg width="64" height="64" viewBox="0 0 640 640" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M354.832 276.683L360.538 287.948L359.342 289.144L350.731 280.784L354.832 276.683Z" fill="#76B5E0" />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M314 128H326V144.077L346.283 151.332C369.967 159.802 392.949 170.121 415.016 182.193L437.191 194.324L457.599 173.916L466.084 182.401L444.445 204.041L447.319 212.963C458.702 248.31 474.148 282.216 493.347 314H512V326H494.455L479.094 369.434L455.768 455.642L435.097 460.957C396.477 470.887 359.666 486.806 326 508.123V512H314V507.22C278.543 479.763 236.412 462.268 191.965 456.521L177.181 471.305L168.696 462.82L182.781 448.735L178.858 430.061C170.982 392.571 155.435 357.146 133.225 326H128V314H133.231C160.297 276.391 177.89 232.762 184.461 186.82L184.848 184.112L189.665 183.666C233.34 179.627 275.675 166.567 314 145.341V128ZM202.539 445.947C242.755 452.568 280.91 468.411 314 492.244V473.216L290.911 456.231C282.445 450.003 272.889 445.414 262.735 442.701L217.795 430.692L202.539 445.947ZM223.816 419.218L220.283 411.232L220.205 411.31L203.692 365.949L182.106 324.487L209.836 263.925L220.609 229.096L250.516 259.003L247.951 276.471L259.312 281.643C259.366 281.313 259.417 280.983 259.466 280.652L261.092 269.578L280.603 289.089L289.027 280.543L272.597 264.113C290.854 263.844 308.123 255.788 320.058 241.986L320.416 242.326C326.029 247.645 334.392 254.783 343.006 258.57C346.645 260.171 350.671 261.323 354.722 262.155L365.634 251.672C359.394 251.031 352.909 249.816 347.836 247.585C340.856 244.516 333.312 238.102 327.751 232.737C327.142 232.15 326.558 231.575 326 231.019V192.603L349.031 206.751C357.495 211.95 366.707 215.817 376.346 218.216L414.942 227.823L416.766 231.72L417.01 231.476L428.441 264.125L454.962 322.358L435.039 366.132L418.078 409.592L417.67 409.185L413.333 419.221L370.63 430.485C358.819 433.601 347.703 438.922 337.869 446.167L326 454.912V413.269L369.867 395.097L360.505 385.986L326 400.28L326 352.404L319.555 346.132L314 351.776L314 397.517L303.919 390.42C298.125 386.34 291.71 383.263 284.945 381.296L275.035 391.364C282.944 392.589 290.464 395.623 297.01 400.232L314 412.193V457.525L298.401 446.05C288.665 438.888 277.675 433.611 265.998 430.49L223.816 419.218ZM326 470.61V494.005C358.966 474.008 394.715 458.95 432.109 449.335L439.062 447.547L421.62 430.106L373.853 442.706C363.583 445.415 353.917 450.042 345.366 456.342L326 470.61ZM427.836 419.351L447.764 439.279L467.629 365.861L481.727 326H467.19L446.687 371.051L427.836 419.351ZM465.043 314H479.389C461.412 283.226 446.827 250.582 435.896 216.641L434.909 213.576L426.928 221.558L440.181 259.408L465.043 314ZM416.363 215.152L428.349 203.166L409.257 192.721C387.741 180.95 365.334 170.889 342.242 162.631L326 156.822V177.77L355.647 195.982C363.006 200.503 371.017 203.865 379.399 205.952L416.363 215.152ZM314 175.391V158.982C279.328 177.284 241.657 189.241 202.767 194.283L222.749 214.264L255.145 205.567C261.978 203.732 268.553 201.044 274.715 197.566L314 175.391ZM314 189.904L280.928 208.572C273.842 212.572 266.28 215.663 258.422 217.773L233.065 224.581L260.604 252.12H271.652C287.114 252.12 301.774 245.239 311.653 233.345L314 230.516V189.904ZM210.505 218.991L194.003 202.49C186.351 242.412 170.649 280.354 147.865 314H173.007L198.004 259.408L210.505 218.991ZM168.644 326L192.099 371.051L210.345 421.171L192.914 438.602L190.601 427.593C182.967 391.252 168.422 356.769 147.811 326H168.644Z"
+      fill="#76B5E0"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M217.061 279.988L198.893 323.312L236.306 407.902L319.312 323.568L402.325 404.358L439.577 318.177L402.325 238.609L369.47 270.173L392.538 315.708L385.493 336.836L319.327 272.592L252.74 340.151L245.423 323.568L252.74 296.229L217.061 279.988Z"
+      fill="white"
+    />
+  </svg>
 );

package/src/components/WfoPageTemplate/WfoPageHeader/WfoHamburgerMenu.tsx

@@ -9,153 +9,128 @@ import { EuiButtonIcon, EuiContextMenu, EuiPopover } from '@elastic/eui';
 import { WfoLoading } from '@/components/WfoLoading';
 import { ORCHESTRATOR_UI_LIBRARY_VERSION } from '@/configuration';
 import { useGetOrchestratorConfig, useOrchestratorTheme } from '@/hooks';
-import {
-    WfoChartBar,
-    WfoLogoutIcon,
-    WfoSquareStack3dStack,
-    WfoXCircleFill,
-} from '@/icons';
+import { WfoChartBar, 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('hamburgerMenu');
-    const [isPopoverOpen, setPopoverIsOpen] = useState(false);
-    const { theme, isDarkModeActive } = useOrchestratorTheme();
-    const {
-        enableSupportMenuItem,
-        supportMenuItemUrl,
-        enableAoStackStatus,
-        aoStackStatusUrl,
-    } = useGetOrchestratorConfig();
-    const closePopover = () => {
-        setPopoverIsOpen(false);
-    };
-
-    const handleOpenSupport = async (): Promise<undefined> => {
-        window.open(supportMenuItemUrl, '_blank');
-    };
-
-    const handleOpenStatus = async (): Promise<undefined> => {
-        window.open(aoStackStatusUrl, '_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: React.ReactElement }] = [
-            {
-                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: t('logout'),
-        icon: (
-            <WfoLogoutIcon
-                color={isDarkModeActive ? theme.colors.ghost : theme.colors.ink}
-            />
-        ),
-        onClick: () => signOut(),
-    };
-
-    const supportItem = {
-        name: t('support'),
-        icon: (
-            <WfoQuestionCircle
-                color={isDarkModeActive ? theme.colors.ghost : theme.colors.ink}
-            />
-        ),
-        onClick: handleOpenSupport,
-    };
-
-    const aoStackStatusItem = {
-        name: t('aoStatusPage'),
-        icon: <WfoChartBar width={26} height={26} />,
-        onClick: handleOpenStatus,
-    };
-
-    const versionItem = {
-        name: t('softwareVersions'),
-        icon: <WfoSquareStack3dStack width={24} height={24} />,
-        panel: 1,
-    };
-
-    const panelItems = [
-        ...toOptionalArrayEntry(supportItem, enableSupportMenuItem),
-        ...toOptionalArrayEntry(aoStackStatusItem, enableAoStackStatus),
-        versionItem,
-        { ...logoutItem },
-    ];
-
-    const panels: EuiContextMenuPanelDescriptor[] = [
-        {
-            id: 0,
-            items: panelItems,
-        },
+  const t = useTranslations('hamburgerMenu');
+  const [isPopoverOpen, setPopoverIsOpen] = useState(false);
+  const { theme, isDarkModeActive } = useOrchestratorTheme();
+  const { enableSupportMenuItem, supportMenuItemUrl, enableAoStackStatus, aoStackStatusUrl } =
+    useGetOrchestratorConfig();
+  const closePopover = () => {
+    setPopoverIsOpen(false);
+  };
+
+  const handleOpenSupport = async (): Promise<undefined> => {
+    window.open(supportMenuItemUrl, '_blank');
+  };
+
+  const handleOpenStatus = async (): Promise<undefined> => {
+    window.open(aoStackStatusUrl, '_blank');
+  };
+
+  const { data, isFetching, error: versionFetchError } = useGetVersionsQuery();
+
+  const getVersionItems = () => {
+    if (versionFetchError) {
+      console.error(versionFetchError);
+      return [
         {
-            id: 1,
-            title: t('softwareVersions'),
-            items: getVersionItems(),
+          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: React.ReactElement }] = [
+      {
+        name: `orchestrator-ui-components: ${ORCHESTRATOR_UI_LIBRARY_VERSION}`,
+        icon: <WfoSquareStack3dStack />,
+      },
     ];
 
-    return (
-        <EuiPopover
-            id={'contextMenuPopoverId'}
-            button={
-                <EuiButtonIcon
-                    iconType="menu"
-                    css={{ color: theme.colors.ghost }}
-                    onClick={() => setPopoverIsOpen(!isPopoverOpen)}
-                    aria-label={t('openMenu')}
-                />
-            }
-            css={{ width: theme.base * 2 }}
-            isOpen={isPopoverOpen}
-            closePopover={closePopover}
-            panelPaddingSize="none"
-            anchorPosition="downLeft"
-        >
-            <EuiContextMenu
-                initialPanelId={0}
-                panels={panels}
-                css={{ width: theme.base * 25 }}
-            />
-        </EuiPopover>
-    );
+    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: t('logout'),
+    icon: <WfoLogoutIcon color={isDarkModeActive ? theme.colors.textGhost : theme.colors.textInk} />,
+    onClick: () => signOut(),
+  };
+
+  const supportItem = {
+    name: t('support'),
+    icon: <WfoQuestionCircle color={isDarkModeActive ? theme.colors.textGhost : theme.colors.textInk} />,
+    onClick: handleOpenSupport,
+  };
+
+  const aoStackStatusItem = {
+    name: t('aoStatusPage'),
+    icon: <WfoChartBar width={26} height={26} />,
+    onClick: handleOpenStatus,
+  };
+
+  const versionItem = {
+    name: t('softwareVersions'),
+    icon: <WfoSquareStack3dStack width={24} height={24} />,
+    panel: 1,
+  };
+
+  const panelItems = [
+    ...toOptionalArrayEntry(supportItem, enableSupportMenuItem),
+    ...toOptionalArrayEntry(aoStackStatusItem, enableAoStackStatus),
+    versionItem,
+    { ...logoutItem },
+  ];
+
+  const panels: EuiContextMenuPanelDescriptor[] = [
+    {
+      id: 0,
+      items: panelItems,
+    },
+    {
+      id: 1,
+      title: t('softwareVersions'),
+      items: getVersionItems(),
+    },
+  ];
+
+  return (
+    <EuiPopover
+      id={'contextMenuPopoverId'}
+      button={
+        <EuiButtonIcon
+          iconType="menu"
+          css={{ color: theme.colors.textGhost }}
+          onClick={() => setPopoverIsOpen(!isPopoverOpen)}
+          aria-label={t('openMenu')}
+        />
+      }
+      css={{ width: theme.base * 2 }}
+      isOpen={isPopoverOpen}
+      closePopover={closePopover}
+      panelPaddingSize="none"
+      anchorPosition="downLeft"
+    >
+      <EuiContextMenu initialPanelId={0} panels={panels} css={{ width: theme.base * 25 }} />
+    </EuiPopover>
+  );
 };