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

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

@@ -6,54 +6,54 @@ import type { Meta } from '@storybook/react';
 import { WfoPageHeader } from './WfoPageHeader';
 
 const Story: Meta<typeof WfoPageHeader> = {
-    component: WfoPageHeader,
-    title: 'PageTemplate/WfoPageHeader',
+  component: WfoPageHeader,
+  title: 'PageTemplate/WfoPageHeader',
 };
 export default Story;
 
 function getAppLogo(navigationLogo: number): ReactElement {
-    return (
-        <EuiFlexGroup alignItems="center" css={{ height: navigationLogo }}>
-            <EuiFlexItem>FLEX ITEM PLACEHOLDER</EuiFlexItem>
-        </EuiFlexGroup>
-    );
+  return (
+    <EuiFlexGroup alignItems="center" css={{ height: navigationLogo }}>
+      <EuiFlexItem>FLEX ITEM PLACEHOLDER</EuiFlexItem>
+    </EuiFlexGroup>
+  );
 }
 
 export const Default = {
-    args: {
-        getAppLogo,
-        navigationHeight: 50,
-    },
-    parameters: {
-        mockData: [
-            {
-                url: 'https://testing.test/settings/status',
-                method: 'GET',
-                status: 200,
-                response: {
-                    global_lock: false,
-                    running_processes: 1,
-                    global_status: 'RUNNING',
-                },
-            },
-            {
-                url: 'https://testing.test/processes/status-counts',
-                method: 'GET',
-                status: 200,
-                response: {
-                    process_counts: {
-                        failed: 6,
-                        completed: 249,
-                        aborted: 2,
-                        resumed: 3,
-                    },
-                    task_counts: {
-                        aborted: 1,
-                        failed: 3,
-                        completed: 3,
-                    },
-                },
-            },
-        ],
-    },
+  args: {
+    getAppLogo,
+    navigationHeight: 50,
+  },
+  parameters: {
+    mockData: [
+      {
+        url: 'https://testing.test/settings/status',
+        method: 'GET',
+        status: 200,
+        response: {
+          global_lock: false,
+          running_processes: 1,
+          global_status: 'RUNNING',
+        },
+      },
+      {
+        url: 'https://testing.test/processes/status-counts',
+        method: 'GET',
+        status: 200,
+        response: {
+          process_counts: {
+            failed: 6,
+            completed: 249,
+            aborted: 2,
+            resumed: 3,
+          },
+          task_counts: {
+            aborted: 1,
+            failed: 3,
+            completed: 3,
+          },
+        },
+      },
+    ],
+  },
 };

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

@@ -4,122 +4,88 @@ import { useTranslations } from 'next-intl';
 
 import type { EuiThemeColorMode } from '@elastic/eui';
 import {
-    EuiBadgeGroup,
-    EuiButtonIcon,
-    EuiHeader,
-    EuiHeaderLogo,
-    EuiHeaderSection,
-    EuiHeaderSectionItem,
-    EuiToolTip,
+  EuiBadgeGroup,
+  EuiButtonIcon,
+  EuiHeader,
+  EuiHeaderLogo,
+  EuiHeaderSection,
+  EuiHeaderSectionItem,
+  EuiToolTip,
 } from '@elastic/eui';
 
-import {
-    WfoEngineStatusBadge,
-    WfoEnvironmentBadge,
-    WfoFailedTasksBadge,
-    WfoWebsocketStatusBadge,
-} from '@/components';
+import { WfoEngineStatusBadge, WfoEnvironmentBadge, WfoFailedTasksBadge, WfoWebsocketStatusBadge } from '@/components';
 import { WfoVersionIncompatibleBadge } from '@/components/WfoBadges/WfoVersionIncompatibleBadge/WfoVersionIncompatibleBadge';
 import { WfoAppLogo } from '@/components/WfoPageTemplate/WfoPageHeader/WfoAppLogo';
 import { getWfoPageHeaderStyles } from '@/components/WfoPageTemplate/WfoPageHeader/styles';
 import { ORCHESTRATOR_UI_LIBRARY_VERSION } from '@/configuration';
-import {
-    useGetOrchestratorConfig,
-    useOrchestratorTheme,
-    useWithOrchestratorTheme,
-} from '@/hooks';
+import { useGetOrchestratorConfig, useOrchestratorTheme, useWithOrchestratorTheme } from '@/hooks';
 import { useGetVersionsQuery } from '@/rtk/endpoints/versions';
 import { ColorModes } from '@/types';
 
 import { WfoHamburgerMenu } from './WfoHamburgerMenu';
 
 export interface WfoPageHeaderProps {
-    // todo: should be part of theme!
-    navigationHeight: number;
-    getAppLogo: (navigationHeight: number) => ReactElement;
-    onColorModeSwitch: (newColorMode: EuiThemeColorMode) => void;
+  // todo: should be part of theme!
+  navigationHeight: number;
+  getAppLogo: (navigationHeight: number) => ReactElement;
+  onColorModeSwitch: (newColorMode: EuiThemeColorMode) => void;
 }
 
-export const WfoPageHeader: FC<WfoPageHeaderProps> = ({
-    navigationHeight,
-    getAppLogo,
-    onColorModeSwitch,
-}) => {
-    const t = useTranslations('main');
-    const { multiplyByBaseUnit, colorMode, theme } = useOrchestratorTheme();
-    const orchestratorConfig = useGetOrchestratorConfig();
-    const { getHeaderStyle, appNameStyle } = useWithOrchestratorTheme(
-        getWfoPageHeaderStyles,
-    );
-    const { data } = useGetVersionsQuery();
-    const coreVersion =
-        data?.version.applicationVersions[0].split(' ')[1] ?? '';
+export const WfoPageHeader: FC<WfoPageHeaderProps> = ({ navigationHeight, getAppLogo, onColorModeSwitch }) => {
+  const t = useTranslations('main');
+  const { multiplyByBaseUnit, colorMode, theme } = useOrchestratorTheme();
+  const orchestratorConfig = useGetOrchestratorConfig();
+  const { getHeaderStyle, appNameStyle } = useWithOrchestratorTheme(getWfoPageHeaderStyles);
+  const { data } = useGetVersionsQuery();
+  const coreVersion = data?.version.applicationVersions[0].split(' ')[1] ?? '';
 
-    return (
-        <EuiHeader css={getHeaderStyle(navigationHeight)}>
-            <EuiHeaderSection>
-                <EuiToolTip
-                    content={'UI version ' + ORCHESTRATOR_UI_LIBRARY_VERSION}
-                >
-                    <EuiHeaderSectionItem css={{ paddingTop: theme.size.xs }}>
-                        <EuiHeaderLogo iconType={() => <WfoAppLogo />} />
-                        <div css={appNameStyle}>
-                            {getAppLogo(navigationHeight)}
-                        </div>
-                    </EuiHeaderSectionItem>
-                </EuiToolTip>
-                <EuiHeaderSectionItem>
-                    <WfoEnvironmentBadge />
-                </EuiHeaderSectionItem>
-                <EuiHeaderSectionItem>
-                    <WfoVersionIncompatibleBadge
-                        orchestratorUiVersion={ORCHESTRATOR_UI_LIBRARY_VERSION}
-                        orchestratorCoreVersion={coreVersion}
-                    />
-                </EuiHeaderSectionItem>
-            </EuiHeaderSection>
+  return (
+    <EuiHeader css={getHeaderStyle(navigationHeight)}>
+      <EuiHeaderSection>
+        <EuiToolTip content={'UI version ' + ORCHESTRATOR_UI_LIBRARY_VERSION}>
+          <EuiHeaderSectionItem css={{ paddingTop: theme.size.xs }}>
+            <EuiHeaderLogo iconType={() => <WfoAppLogo />} />
+            <div css={appNameStyle}>{getAppLogo(navigationHeight)}</div>
+          </EuiHeaderSectionItem>
+        </EuiToolTip>
+        <EuiHeaderSectionItem>
+          <WfoEnvironmentBadge />
+        </EuiHeaderSectionItem>
+        <EuiHeaderSectionItem>
+          <WfoVersionIncompatibleBadge
+            orchestratorUiVersion={ORCHESTRATOR_UI_LIBRARY_VERSION}
+            orchestratorCoreVersion={coreVersion}
+          />
+        </EuiHeaderSectionItem>
+      </EuiHeaderSection>
 
-            <EuiHeaderSection>
-                <EuiHeaderSectionItem>
-                    <EuiBadgeGroup css={{ marginRight: multiplyByBaseUnit(1) }}>
-                        <WfoWebsocketStatusBadge hideWhenConnected={true} />
-                        <WfoEngineStatusBadge />
-                        <WfoFailedTasksBadge />
-                    </EuiBadgeGroup>
-                    {orchestratorConfig.useThemeToggle && (
-                        <EuiButtonIcon
-                            aria-label={t(
-                                colorMode === ColorModes.LIGHT
-                                    ? 'darkMode'
-                                    : 'lightMode',
-                            )}
-                            display="empty"
-                            iconType={
-                                colorMode === ColorModes.LIGHT ? 'moon' : 'sun'
-                            }
-                            css={{
-                                width: theme.base * 3,
-                                height: theme.base * 3,
-                                color: theme.colors.ghost,
-                            }}
-                            title={t(
-                                colorMode === ColorModes.LIGHT
-                                    ? 'darkMode'
-                                    : 'lightMode',
-                            )}
-                            onClick={() => {
-                                onColorModeSwitch(
-                                    colorMode === ColorModes.LIGHT
-                                        ? ColorModes.DARK
-                                        : ColorModes.LIGHT,
-                                );
-                            }}
-                        />
-                    )}
+      <EuiHeaderSection>
+        <EuiHeaderSectionItem>
+          <EuiBadgeGroup css={{ marginRight: multiplyByBaseUnit(1) }}>
+            <WfoWebsocketStatusBadge hideWhenConnected={true} />
+            <WfoEngineStatusBadge />
+            <WfoFailedTasksBadge />
+          </EuiBadgeGroup>
+          {orchestratorConfig.useThemeToggle && (
+            <EuiButtonIcon
+              aria-label={t(colorMode === ColorModes.LIGHT ? 'darkMode' : 'lightMode')}
+              display="empty"
+              iconType={colorMode === ColorModes.LIGHT ? 'moon' : 'sun'}
+              css={{
+                width: theme.base * 3,
+                height: theme.base * 3,
+                color: theme.colors.textGhost,
+              }}
+              title={t(colorMode === ColorModes.LIGHT ? 'darkMode' : 'lightMode')}
+              onClick={() => {
+                onColorModeSwitch(colorMode === ColorModes.LIGHT ? ColorModes.DARK : ColorModes.LIGHT);
+              }}
+            />
+          )}
 
-                    <WfoHamburgerMenu />
-                </EuiHeaderSectionItem>
-            </EuiHeaderSection>
-        </EuiHeader>
-    );
+          <WfoHamburgerMenu />
+        </EuiHeaderSectionItem>
+      </EuiHeaderSection>
+    </EuiHeader>
+  );
 };

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

@@ -3,22 +3,22 @@ import { css } from '@emotion/react';
 import { WfoThemeHelpers } from '@/hooks';
 
 export const getWfoPageHeaderStyles = ({ theme }: WfoThemeHelpers) => {
-    const appNameStyle = css({
-        paddingRight: theme.base,
-        marginRight: theme.base,
-        borderRight: `${theme.border.width.thick} solid ${theme.colors.textSubdued}`,
-    });
+  const appNameStyle = css({
+    paddingRight: theme.base,
+    marginRight: theme.base,
+    borderRight: `${theme.border.width.thick} solid ${theme.colors.textSubdued}`,
+  });
 
-    const getHeaderStyle = (navigationHeight: number) => {
-        return css({
-            backgroundColor: theme.colors.header,
-            height: navigationHeight,
-            borderBottom: theme.colors.header, // Overrides EuiHeader default border bottom
-        });
-    };
+  const getHeaderStyle = (navigationHeight: number) => {
+    return css({
+      backgroundColor: theme.colors.header,
+      height: navigationHeight,
+      borderBottom: theme.colors.header, // Overrides EuiHeader default border bottom
+    });
+  };
 
-    return {
-        appNameStyle,
-        getHeaderStyle,
-    };
+  return {
+    appNameStyle,
+    getHeaderStyle,
+  };
 };

package/src/components/WfoPageTemplate/WfoPageHeader/utils/toHexColorWithOpacity.spec.ts

@@ -1,12 +1,12 @@
 import { toHexColorWithOpacity } from './toHexColorWithOpacity';
 
 describe('toHexColorWithOpacity', () => {
-    it('returns hex color with opacity', () => {
-        const hexColor = '#ffffff';
-        const opacity = 0.3;
+  it('returns hex color with opacity', () => {
+    const hexColor = '#ffffff';
+    const opacity = 0.3;
 
-        const result = toHexColorWithOpacity(hexColor, opacity);
+    const result = toHexColorWithOpacity(hexColor, opacity);
 
-        expect(result).toEqual('#ffffff4d');
-    });
+    expect(result).toEqual('#ffffff4d');
+  });
 });

package/src/components/WfoPageTemplate/WfoPageHeader/utils/toHexColorWithOpacity.ts

@@ -1,5 +1,5 @@
 export const toHexColorWithOpacity = (hexColor: string, opacity: number) => {
-    const opacityHex = Math.round(opacity * 255).toString(16);
+  const opacityHex = Math.round(opacity * 255).toString(16);
 
-    return `${hexColor}${opacityHex}`;
+  return `${hexColor}${opacityHex}`;
 };

package/src/components/WfoPageTemplate/WfoPageTemplate/ContentContext.tsx

@@ -4,25 +4,19 @@ import { getPageTemplateStyles } from '@/components/WfoPageTemplate/WfoPageTempl
 import { useWithOrchestratorTheme } from '@/hooks';
 
 export type ContentType = {
-    contentRef: React.RefObject<HTMLDivElement>;
+  contentRef: React.RefObject<HTMLDivElement>;
 };
 export const ContentContext = createContext<ContentType | undefined>(undefined);
 export type ContentContextProviderProps = ContentType & {
-    navigationHeight: number;
-    children: ReactNode;
+  navigationHeight: number;
+  children: ReactNode;
 };
-export const ContentContextProvider: FC<ContentContextProviderProps> = ({
-    contentRef,
-    navigationHeight,
-    children,
-}) => {
-    const { getContentStyle } = useWithOrchestratorTheme(getPageTemplateStyles);
+export const ContentContextProvider: FC<ContentContextProviderProps> = ({ contentRef, navigationHeight, children }) => {
+  const { getContentStyle } = useWithOrchestratorTheme(getPageTemplateStyles);
 
-    return (
-        <div ref={contentRef} css={getContentStyle(navigationHeight)}>
-            <ContentContext.Provider value={{ contentRef }}>
-                {children}
-            </ContentContext.Provider>
-        </div>
-    );
+  return (
+    <div ref={contentRef} css={getContentStyle(navigationHeight)}>
+      <ContentContext.Provider value={{ contentRef }}>{children}</ContentContext.Provider>
+    </div>
+  );
 };

package/src/components/WfoPageTemplate/WfoPageTemplate/WfoPageTemplate.stories.tsx

@@ -6,21 +6,21 @@ import type { Meta } from '@storybook/react';
 import { WfoPageTemplate } from './WfoPageTemplate';
 
 const Story: Meta<typeof WfoPageTemplate> = {
-    component: WfoPageTemplate,
-    title: 'PageTemplate/WfoPageTemplate',
+  component: WfoPageTemplate,
+  title: 'PageTemplate/WfoPageTemplate',
 };
 export default Story;
 
 function getAppLogo(navigationLogo: number): ReactElement {
-    return (
-        <EuiFlexGroup alignItems="center" css={{ height: navigationLogo }}>
-            <EuiFlexItem>FLEX ITEM PLACEHOLDER</EuiFlexItem>
-        </EuiFlexGroup>
-    );
+  return (
+    <EuiFlexGroup alignItems="center" css={{ height: navigationLogo }}>
+      <EuiFlexItem>FLEX ITEM PLACEHOLDER</EuiFlexItem>
+    </EuiFlexGroup>
+  );
 }
 
 export const Default = {
-    args: {
-        getAppLogo,
-    },
+  args: {
+    getAppLogo,
+  },
 };

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

@@ -1,18 +1,7 @@
-import React, {
-    FC,
-    ReactElement,
-    ReactNode,
-    useEffect,
-    useRef,
-    useState,
-} from 'react';
+import React, { FC, ReactElement, ReactNode, useCallback, useEffect, useRef, useState } from 'react';
 
 import type { EuiThemeColorMode } from '@elastic/eui';
-import {
-    EuiPageTemplate,
-    EuiSideNavItemType,
-    EuiThemeProvider,
-} from '@elastic/eui';
+import { EuiPageTemplate, EuiSideNavItemType, EuiThemeProvider } from '@elastic/eui';
 
 import { WfoBreadcrumbs, WfoPageHeader, WfoSidebar } from '@/components';
 import { useWithOrchestratorTheme } from '@/hooks';
@@ -23,97 +12,76 @@ import { ContentContextProvider } from './ContentContext';
 import { getPageTemplateStyles } from './styles';
 
 export interface WfoPageTemplateProps {
-    getAppLogo: (navigationHeight: number) => ReactElement;
-    overrideMenuItems?: (
-        defaultMenuItems: EuiSideNavItemType<object>[],
-    ) => EuiSideNavItemType<object>[];
-    children: ReactNode;
-    colorMode: EuiThemeColorMode;
-    setColorMode: React.Dispatch<React.SetStateAction<EuiThemeColorMode>>;
+  getAppLogo: (navigationHeight: number) => ReactElement;
+  overrideMenuItems?: (defaultMenuItems: EuiSideNavItemType<object>[]) => EuiSideNavItemType<object>[];
+  children: ReactNode;
+  colorMode: EuiThemeColorMode;
+  setColorMode: React.Dispatch<React.SetStateAction<EuiThemeColorMode>>;
 }
 
 export const WfoPageTemplate: FC<WfoPageTemplateProps> = (props) => {
-    const { colorMode, setColorMode } = props;
-    const handleColorModeSwitch = (newColorMode: EuiThemeColorMode) => {
-        setColorMode(newColorMode);
-        localStorage.setItem('colorMode', newColorMode);
-    };
+  const { colorMode, setColorMode } = props;
+  const handleColorModeSwitch = useCallback(
+    (newColorMode: EuiThemeColorMode) => {
+      setColorMode(newColorMode);
+      localStorage.setItem('colorMode', newColorMode);
+    },
+    [setColorMode],
+  );
 
-    useEffect(() => {
-        // Initialize theme mode from localStorage or set it to 'light' if not present
-        const storedColorMode = localStorage.getItem('colorMode');
-        if (
-            storedColorMode !== ColorModes.LIGHT &&
-            storedColorMode !== ColorModes.DARK
-        ) {
-            handleColorModeSwitch(ColorModes.LIGHT);
-        } else {
-            handleColorModeSwitch(storedColorMode);
-        }
-    }, []);
+  useEffect(() => {
+    // Initialize theme mode from localStorage or set it to 'light' if not present
+    const storedColorMode = localStorage.getItem('colorMode');
+    if (storedColorMode !== ColorModes.LIGHT && storedColorMode !== ColorModes.DARK) {
+      handleColorModeSwitch(ColorModes.LIGHT);
+    } else {
+      handleColorModeSwitch(storedColorMode);
+    }
+  }, [handleColorModeSwitch]);
 
-    return (
-        <EuiThemeProvider modify={wfoThemeModifications} colorMode={colorMode}>
-            <WfoPageTemplateContent
-                {...props}
-                handleColorModeSwitch={handleColorModeSwitch}
-            />
-        </EuiThemeProvider>
-    );
+  return (
+    <EuiThemeProvider modify={wfoThemeModifications} colorMode={colorMode}>
+      <WfoPageTemplateContent {...props} handleColorModeSwitch={handleColorModeSwitch} />
+    </EuiThemeProvider>
+  );
 };
 
 const WfoPageTemplateContent: FC<
-    WfoPageTemplateProps & {
-        handleColorModeSwitch: (mode: EuiThemeColorMode) => void;
-    }
+  WfoPageTemplateProps & {
+    handleColorModeSwitch: (mode: EuiThemeColorMode) => void;
+  }
 > = ({ children, getAppLogo, overrideMenuItems, handleColorModeSwitch }) => {
-    const { getSidebarStyle, NAVIGATION_HEIGHT } = useWithOrchestratorTheme(
-        getPageTemplateStyles,
-    );
+  const { getSidebarStyle, NAVIGATION_HEIGHT } = useWithOrchestratorTheme(getPageTemplateStyles);
 
-    const [isSideMenuVisible, setIsSideMenuVisible] = useState(true);
-    const headerRowRef = useRef<HTMLDivElement>(null);
+  const [isSideMenuVisible, setIsSideMenuVisible] = useState(true);
+  const headerRowRef = useRef<HTMLDivElement>(null);
 
-    return (
-        <>
-            <WfoPageHeader
-                getAppLogo={getAppLogo}
-                navigationHeight={NAVIGATION_HEIGHT}
-                onColorModeSwitch={handleColorModeSwitch}
-            />
-            {/* Sidebar and content area */}
-            <EuiPageTemplate
-                panelled={false}
-                grow={false}
-                contentBorder={false}
-                restrictWidth={false}
-            >
-                {isSideMenuVisible && (
-                    <EuiPageTemplate.Sidebar
-                        css={getSidebarStyle(NAVIGATION_HEIGHT)}
-                    >
-                        <WfoSidebar overrideMenuItems={overrideMenuItems} />
-                    </EuiPageTemplate.Sidebar>
-                )}
+  return (
+    <>
+      <WfoPageHeader
+        getAppLogo={getAppLogo}
+        navigationHeight={NAVIGATION_HEIGHT}
+        onColorModeSwitch={handleColorModeSwitch}
+      />
+      {/* Sidebar and content area */}
+      <EuiPageTemplate panelled={false} grow={false} contentBorder={false} restrictWidth={false}>
+        {isSideMenuVisible && (
+          <EuiPageTemplate.Sidebar css={getSidebarStyle(NAVIGATION_HEIGHT)}>
+            <WfoSidebar overrideMenuItems={overrideMenuItems} />
+          </EuiPageTemplate.Sidebar>
+        )}
 
-                <ContentContextProvider
-                    contentRef={headerRowRef}
-                    navigationHeight={NAVIGATION_HEIGHT}
-                >
-                    <EuiPageTemplate.Section
-                        css={{
-                            minHeight: `calc(100vh - ${NAVIGATION_HEIGHT}px)`,
-                        }}
-                    >
-                        <WfoBreadcrumbs
-                            handleSideMenuClick={() =>
-                                setIsSideMenuVisible((prevState) => !prevState)
-                            }
-                        />
-                        {children}
-                    </EuiPageTemplate.Section>
-                </ContentContextProvider>
-            </EuiPageTemplate>
-        </>
-    );
+        <ContentContextProvider contentRef={headerRowRef} navigationHeight={NAVIGATION_HEIGHT}>
+          <EuiPageTemplate.Section
+            css={{
+              minHeight: `calc(100vh - ${NAVIGATION_HEIGHT}px)`,
+            }}
+          >
+            <WfoBreadcrumbs handleSideMenuClick={() => setIsSideMenuVisible((prevState) => !prevState)} />
+            {children}
+          </EuiPageTemplate.Section>
+        </ContentContextProvider>
+      </EuiPageTemplate>
+    </>
+  );
 };

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

@@ -2,29 +2,26 @@ import { css } from '@emotion/react';
 
 import { WfoThemeHelpers } from '@/hooks';
 
-export const getPageTemplateStyles = ({
-    theme,
-    multiplyByBaseUnit,
-}: WfoThemeHelpers) => {
-    const NAVIGATION_HEIGHT = multiplyByBaseUnit(3);
+export const getPageTemplateStyles = ({ theme, multiplyByBaseUnit }: WfoThemeHelpers) => {
+  const NAVIGATION_HEIGHT = multiplyByBaseUnit(3);
 
-    const getSidebarStyle = (navigationHeight: number) =>
-        css({
-            backgroundColor: theme.colors.backgroundBaseSubdued,
-            overflowY: 'auto',
-            maxHeight: `calc(100vh - ${navigationHeight}px)`,
-        });
+  const getSidebarStyle = (navigationHeight: number) =>
+    css({
+      backgroundColor: theme.colors.backgroundBaseSubdued,
+      overflowY: 'auto',
+      maxHeight: `calc(100vh - ${navigationHeight}px)`,
+    });
 
-    const getContentStyle = (navigationHeight: number) =>
-        css({
-            backgroundColor: theme.colors.backgroundBaseNeutral,
-            overflowY: 'auto',
-            maxHeight: `calc(100vh - ${navigationHeight}px)`,
-        });
+  const getContentStyle = (navigationHeight: number) =>
+    css({
+      backgroundColor: theme.colors.backgroundBaseNeutral,
+      overflowY: 'auto',
+      maxHeight: `calc(100vh - ${navigationHeight}px)`,
+    });
 
-    return {
-        NAVIGATION_HEIGHT,
-        getSidebarStyle,
-        getContentStyle,
-    };
+  return {
+    NAVIGATION_HEIGHT,
+    getSidebarStyle,
+    getContentStyle,
+  };
 };