@orchestrator-ui/orchestrator-ui-components 3.1.0 → 3.2.0

package/package.json

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

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

@@ -0,0 +1,28 @@
+import React, { FC, ReactNode, createContext } from 'react';
+
+import { getPageTemplateStyles } from '@/components/WfoPageTemplate/WfoPageTemplate/styles';
+import { useWithOrchestratorTheme } from '@/hooks';
+
+export type ContentType = {
+    contentRef: React.RefObject<HTMLDivElement>;
+};
+export const ContentContext = createContext<ContentType | undefined>(undefined);
+export type ContentContextProviderProps = ContentType & {
+    navigationHeight: number;
+    children: ReactNode;
+};
+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>
+    );
+};

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

@@ -1,11 +1,13 @@
-import React, { FC, ReactElement, ReactNode, useState } from 'react';
+import React, { FC, ReactElement, ReactNode, useRef, useState } from 'react';
 
 import type { EuiThemeColorMode } from '@elastic/eui';
-import { EuiPageTemplate } from '@elastic/eui';
-import { EuiSideNavItemType } from '@elastic/eui/src/components/side_nav/side_nav_types';
+import { EuiPageTemplate, EuiSideNavItemType } from '@elastic/eui';
 
 import { WfoBreadcrumbs, WfoPageHeader, WfoSidebar } from '@/components';
-import { useOrchestratorTheme } from '@/hooks';
+import { useWithOrchestratorTheme } from '@/hooks';
+
+import { ContentContextProvider } from './ContentContext';
+import { getPageTemplateStyles } from './styles';
 
 export interface WfoPageTemplateProps {
     getAppLogo: (navigationHeight: number) => ReactElement;
@@ -22,15 +24,19 @@ export const WfoPageTemplate: FC<WfoPageTemplateProps> = ({
     overrideMenuItems,
     onThemeSwitch,
 }) => {
-    const { theme, multiplyByBaseUnit } = useOrchestratorTheme();
+    const { getSidebarStyle, NAVIGATION_HEIGHT } = useWithOrchestratorTheme(
+        getPageTemplateStyles,
+    );
+
     const [isSideMenuVisible, setIsSideMenuVisible] = useState(true);
-    const navigationHeight = multiplyByBaseUnit(3);
+
+    const headerRowRef = useRef<HTMLDivElement>(null);
 
     return (
         <>
             <WfoPageHeader
                 getAppLogo={getAppLogo}
-                navigationHeight={navigationHeight}
+                navigationHeight={NAVIGATION_HEIGHT}
                 onThemeSwitch={onThemeSwitch}
             />
             {/* Sidebar and content area */}
@@ -38,34 +44,30 @@ export const WfoPageTemplate: FC<WfoPageTemplateProps> = ({
                 panelled={false}
                 grow={false}
                 contentBorder={false}
-                minHeight={`calc(100vh - ${navigationHeight}px)`}
+                minHeight={`calc(100vh - ${NAVIGATION_HEIGHT}px)`}
                 restrictWidth={false}
             >
                 {isSideMenuVisible && (
                     <EuiPageTemplate.Sidebar
-                        css={{
-                            backgroundColor: theme.colors.body,
-                            overflowY: 'auto',
-                            maxHeight: `calc(100vh - ${navigationHeight}px)`,
-                        }}
+                        css={getSidebarStyle(NAVIGATION_HEIGHT)}
                     >
                         <WfoSidebar overrideMenuItems={overrideMenuItems} />
                     </EuiPageTemplate.Sidebar>
                 )}
-                <EuiPageTemplate.Section
-                    css={{
-                        backgroundColor: theme.colors.emptyShade,
-                        overflowY: 'auto',
-                        maxHeight: `calc(100vh - ${navigationHeight}px)`,
-                    }}
+
+                <ContentContextProvider
+                    contentRef={headerRowRef}
+                    navigationHeight={NAVIGATION_HEIGHT}
                 >
-                    <WfoBreadcrumbs
-                        handleSideMenuClick={() =>
-                            setIsSideMenuVisible((prevState) => !prevState)
-                        }
-                    />
-                    {children}
-                </EuiPageTemplate.Section>
+                    <EuiPageTemplate.Section>
+                        <WfoBreadcrumbs
+                            handleSideMenuClick={() =>
+                                setIsSideMenuVisible((prevState) => !prevState)
+                            }
+                        />
+                        {children}
+                    </EuiPageTemplate.Section>
+                </ContentContextProvider>
             </EuiPageTemplate>
         </>
     );

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

@@ -1 +1,2 @@
+export * from './ContentContext';
 export * from './WfoPageTemplate';

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

@@ -0,0 +1,30 @@
+import { css } from '@emotion/react';
+
+import { WfoTheme } from '@/hooks';
+
+export const getPageTemplateStyles = ({
+    theme,
+    multiplyByBaseUnit,
+}: WfoTheme) => {
+    const NAVIGATION_HEIGHT = multiplyByBaseUnit(3);
+
+    const getSidebarStyle = (navigationHeight: number) =>
+        css({
+            backgroundColor: theme.colors.body,
+            overflowY: 'auto',
+            maxHeight: `calc(100vh - ${navigationHeight}px)`,
+        });
+
+    const getContentStyle = (navigationHeight: number) =>
+        css({
+            backgroundColor: theme.colors.emptyShade,
+            overflowY: 'auto',
+            maxHeight: `calc(100vh - ${navigationHeight}px)`,
+        });
+
+    return {
+        NAVIGATION_HEIGHT,
+        getSidebarStyle,
+        getContentStyle,
+    };
+};

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

@@ -3,7 +3,7 @@ import React, { FC, useState } from 'react';
 import { useTranslations } from 'next-intl';
 import { useRouter } from 'next/router';
 
-import { EuiSideNav, EuiSpacer } from '@elastic/eui';
+import { EuiHorizontalRule, EuiSideNav, EuiSpacer } from '@elastic/eui';
 import { EuiSideNavItemType } from '@elastic/eui/src/components/side_nav/side_nav_types';
 
 import { WfoIsAllowedToRender, menuItemIsAllowed } from '@/components';
@@ -36,6 +36,12 @@ export const urlPolicyMap = new Map<string, PolicyResource>([
     [PATH_SETTINGS, PolicyResource.NAVIGATION_SETTINGS],
 ]);
 
+export const sideNavMenuDivider: EuiSideNavItemType<object> = {
+    name: '',
+    id: 'menuDivider',
+    renderItem: () => <EuiHorizontalRule margin="xs" />,
+};
+
 export type WfoSidebarProps = {
     overrideMenuItems?: (
         defaultMenuItems: EuiSideNavItemType<object>[],
@@ -60,7 +66,7 @@ export const WfoSidebar: FC<WfoSidebarProps> = ({ overrideMenuItems }) => {
     const defaultMenuItems: EuiSideNavItemType<object>[] = [
         {
             name: t('start'),
-            id: '2',
+            id: 'start',
             isSelected: router.pathname === PATH_START,
             href: PATH_START,
             renderItem: () => (
@@ -73,7 +79,7 @@ export const WfoSidebar: FC<WfoSidebarProps> = ({ overrideMenuItems }) => {
         },
         {
             name: t('subscriptions'),
-            id: '3',
+            id: 'subscriptions',
             isSelected: router.pathname.startsWith(PATH_SUBSCRIPTIONS),
             href: PATH_SUBSCRIPTIONS,
             renderItem: () => (
@@ -86,7 +92,7 @@ export const WfoSidebar: FC<WfoSidebarProps> = ({ overrideMenuItems }) => {
         },
         {
             name: t('workflows'),
-            id: '4',
+            id: 'workflows',
             isSelected: router.pathname.startsWith(PATH_WORKFLOWS),
             href: PATH_WORKFLOWS,
             renderItem: () => (
@@ -100,7 +106,7 @@ export const WfoSidebar: FC<WfoSidebarProps> = ({ overrideMenuItems }) => {
         {
             name: t('tasks'),
             isSelected: router.pathname.startsWith(PATH_TASKS),
-            id: '5',
+            id: 'tasks',
             href: PATH_TASKS,
             renderItem: () => (
                 <WfoMenuItemLink
@@ -112,7 +118,7 @@ export const WfoSidebar: FC<WfoSidebarProps> = ({ overrideMenuItems }) => {
         },
         {
             name: t('metadata'),
-            id: '6',
+            id: 'metadata',
             href: PATH_METADATA,
             isSelected:
                 router.pathname.substring(0, PATH_METADATA.length) ===
@@ -121,17 +127,13 @@ export const WfoSidebar: FC<WfoSidebarProps> = ({ overrideMenuItems }) => {
                 <WfoMenuItemLink
                     path={PATH_METADATA_PRODUCTS}
                     translationString="metadata"
-                    isSelected={
-                        router.pathname.substring(0, PATH_METADATA.length) ===
-                        PATH_METADATA
-                    }
                     hasSubItems={true}
                 />
             ),
             items: [
                 {
                     name: t('metadataProducts'),
-                    id: '6.1',
+                    id: 'metadata-products',
                     href: PATH_METADATA_PRODUCTS,
                     renderItem: () => (
                         <WfoMenuItemLink
@@ -146,7 +148,7 @@ export const WfoSidebar: FC<WfoSidebarProps> = ({ overrideMenuItems }) => {
                 },
                 {
                     name: t('metadataProductblocks'),
-                    id: '6.2',
+                    id: 'metadata-productblocks',
                     isSelected:
                         router.pathname === PATH_METADATA_PRODUCT_BLOCKS,
                     href: PATH_METADATA_PRODUCT_BLOCKS,
@@ -163,7 +165,7 @@ export const WfoSidebar: FC<WfoSidebarProps> = ({ overrideMenuItems }) => {
                 },
                 {
                     name: t('metadataResourceTypes'),
-                    id: '6.3',
+                    id: 'metadata-resourceTypes',
                     href: PATH_METADATA_RESOURCE_TYPES,
                     isSelected:
                         router.pathname === PATH_METADATA_RESOURCE_TYPES,
@@ -180,7 +182,7 @@ export const WfoSidebar: FC<WfoSidebarProps> = ({ overrideMenuItems }) => {
                 },
                 {
                     name: t('metadataWorkflows'),
-                    id: '6.4',
+                    id: 'metadata-workflows',
                     isSelected: router.pathname === PATH_METADATA_WORKFLOWS,
                     href: PATH_METADATA_WORKFLOWS,
                     renderItem: () => (
@@ -196,7 +198,7 @@ export const WfoSidebar: FC<WfoSidebarProps> = ({ overrideMenuItems }) => {
                 },
                 {
                     name: t('metadataTasks'),
-                    id: '6.5',
+                    id: 'metadata-tasks',
                     isSelected: router.pathname === PATH_METADATA_TASKS,
                     href: PATH_METADATA_TASKS,
                     renderItem: () => (
@@ -212,8 +214,8 @@ export const WfoSidebar: FC<WfoSidebarProps> = ({ overrideMenuItems }) => {
         },
         {
             name: t('settings'),
+            id: 'settings',
             isSelected: router.pathname === PATH_SETTINGS,
-            id: '7',
             href: PATH_SETTINGS,
             renderItem: () => (
                 <WfoMenuItemLink

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

@@ -45,7 +45,7 @@ export const getMenuItemStyles = ({ theme, isDarkThemeActive }: WfoTheme) => {
         ':hover': {
             textDecoration: 'underline',
         },
-        color: theme.colors.text,
+        color: theme.colors.subduedText,
         padding: `${theme.base * 0.5}px ${theme.base * 0.75}px`,
     };
 
@@ -69,7 +69,6 @@ export const getMenuItemStyles = ({ theme, isDarkThemeActive }: WfoTheme) => {
 
     const menuItemStyle = css({
         ...baseStyles,
-        color: theme.colors.subduedText,
     });
 
     const selectedMenuItemBaseStyle = {

package/src/components/WfoTimeline/WfoTimeline.tsx

@@ -7,7 +7,7 @@ import { useWithOrchestratorTheme } from '@/hooks';
 import { StepStatus } from '@/types';
 
 import { WfoTimelineStep } from './WfoTimelineStep';
-import { getStyles } from './styles';
+import { getTimelineStyles } from './styles';
 import { getTimelinePosition } from './timelineUtils';
 
 export enum TimelinePosition {
@@ -34,7 +34,7 @@ export const WfoTimeline: FC<WfoTimelineProps> = ({
     indexOfCurrentStep = 0,
     onStepClick,
 }) => {
-    const { timelinePanelStyle } = useWithOrchestratorTheme(getStyles);
+    const { timelinePanelStyle } = useWithOrchestratorTheme(getTimelineStyles);
 
     const mapTimelineItemToStep = (
         timelineItem: TimelineItem,

package/src/components/WfoTimeline/WfoTimelineStep.tsx

@@ -6,7 +6,7 @@ import { useWithOrchestratorTheme } from '@/hooks';
 import { StepStatus } from '@/types';
 
 import { TimelinePosition } from './WfoTimeline';
-import { getStyles } from './styles';
+import { getTimelineStyles } from './styles';
 
 export type WfoTimelineStepProps = {
     stepStatus: StepStatus;
@@ -34,7 +34,7 @@ export const WfoTimelineStep = ({
         getStepLineStyle,
         getStepOuterCircleStyle,
         getStepInnerCircleStyle,
-    } = useWithOrchestratorTheme(getStyles);
+    } = useWithOrchestratorTheme(getTimelineStyles);
 
     return (
         <button

package/src/components/WfoTimeline/styles.ts

@@ -5,7 +5,12 @@ import { StepStatus } from '@/types';
 
 import { TimelinePosition } from './WfoTimeline';
 
-export const getStyles = ({ theme }: WfoTheme) => {
+export const getTimelineStyles = ({ theme }: WfoTheme) => {
+    const TIMELINE_HEIGHT = theme.base * 2.5;
+    const TIMELINE_OUTLINE_WIDTH = theme.base * 0.75;
+
+    const timelineHeightPx = `${TIMELINE_HEIGHT}px`;
+    const timelineOutlineWidthPx = `${TIMELINE_OUTLINE_WIDTH}px`;
     const emptyStepOuterDiameter = theme.base;
     const emptyStepInnerDiameter = theme.base / 2;
     const stepWithValueOuterDiameter = theme.base * 1.5;
@@ -41,12 +46,19 @@ export const getStyles = ({ theme }: WfoTheme) => {
     const timelinePanelStyle = css({
         backgroundColor: theme.colors.body,
         borderRadius: theme.border.radius.medium,
+        outline: `${timelineOutlineWidthPx} solid ${theme.colors.emptyShade}`,
+        height: timelineHeightPx,
+        marginTop: timelineOutlineWidthPx,
+        marginBottom: timelineOutlineWidthPx,
         overflow: 'auto',
         scrollbarWidth: 'auto',
         paddingTop: theme.font.baseline * 2,
         paddingBottom: theme.font.baseline * 2,
         paddingLeft: theme.font.baseline * 4,
         paddingRight: theme.font.baseline * 4,
+        position: 'sticky',
+        top: timelineOutlineWidthPx,
+        zIndex: 2, // Some EUI components have a zIndex
         display: 'flex',
 
         '& > button': {
@@ -161,6 +173,8 @@ export const getStyles = ({ theme }: WfoTheme) => {
     });
 
     return {
+        TIMELINE_HEIGHT,
+        TIMELINE_OUTLINE_WIDTH,
         timelinePanelStyle,
         stepStyle,
         clickableStyle,

package/src/components/WfoWorkflowSteps/WfoStep/WfoStep.tsx

@@ -20,7 +20,7 @@ import { calculateTimeDifference, formatDate } from '@/utils';
 import { WfoStepStatusIcon } from '../WfoStepStatusIcon';
 import type { StepListItem } from '../WfoWorkflowStepList';
 import { getStepContent } from '../stepListUtils';
-import { getStyles } from '../styles';
+import { getWorkflowStepsStyles } from '../styles';
 import { WfoStepForm } from './WfoStepForm';
 
 export interface WfoStepProps {
@@ -58,7 +58,7 @@ export const WfoStep = React.forwardRef(
             stepDurationStyle,
             stepRowStyle,
             getStepToggleExpandStyle,
-        } = useWithOrchestratorTheme(getStyles);
+        } = useWithOrchestratorTheme(getWorkflowStepsStyles);
         const t = useTranslations('processes.steps');
         const hasHtmlMail =
             step.stateDelta?.hasOwnProperty('confirmation_mail');

package/src/components/WfoWorkflowSteps/WfoStepList/WfoStepList.tsx

@@ -1,9 +1,11 @@
 import React, { Ref, useImperativeHandle, useRef } from 'react';
 
-import { useWithOrchestratorTheme } from '@/hooks';
+import { getPageTemplateStyles } from '@/components/WfoPageTemplate/WfoPageTemplate/styles';
+import { getTimelineStyles } from '@/components/WfoTimeline/styles';
+import { useContentRef, useWithOrchestratorTheme } from '@/hooks';
 
 import { WfoStep } from '../WfoStep';
-import { getStyles } from '../styles';
+import { getWorkflowStepsStyles } from '../styles';
 import { StepListItem } from './../WfoWorkflowStepList';
 
 export type WfoStepListRef = {
@@ -33,10 +35,23 @@ export const WfoStepList = React.forwardRef(
         }: WfoStepListProps,
         reference: Ref<WfoStepListRef>,
     ) => {
-        const { stepSpacerStyle } = useWithOrchestratorTheme(getStyles);
+        const { NAVIGATION_HEIGHT } = useWithOrchestratorTheme(
+            getPageTemplateStyles,
+        );
+        const { TIMELINE_HEIGHT, TIMELINE_OUTLINE_WIDTH } =
+            useWithOrchestratorTheme(getTimelineStyles);
+        const { SPACE_BETWEEN_STEPS, stepSpacerStyle } =
+            useWithOrchestratorTheme(getWorkflowStepsStyles);
+        const scrollOffset =
+            NAVIGATION_HEIGHT +
+            TIMELINE_HEIGHT +
+            TIMELINE_OUTLINE_WIDTH +
+            SPACE_BETWEEN_STEPS;
 
         const stepReferences = useRef(new Map<string, HTMLDivElement>());
 
+        const { contentRef } = useContentRef();
+
         let stepStartTime = startedAt;
 
         useImperativeHandle(reference, () => ({
@@ -56,9 +71,18 @@ export const WfoStepList = React.forwardRef(
                             onTriggerExpandStepListItem(foundStepListItem),
                         );
                     });
-                    stepReferences.current.get(stepId)?.scrollIntoView({
-                        behavior: 'smooth',
-                    });
+
+                    const targetRect = stepReferences.current
+                        .get(stepId)
+                        ?.getBoundingClientRect();
+
+                    if (targetRect) {
+                        const { top } = targetRect;
+                        contentRef?.current?.scrollBy({
+                            top: top - scrollOffset,
+                            behavior: 'smooth',
+                        });
+                    }
                 } catch {
                     console.error(
                         'Error scrolling to step with stepId ',

package/src/components/WfoWorkflowSteps/WfoStepStatusIcon/WfoStepStatusIcon.tsx

@@ -13,7 +13,7 @@ import {
 } from '@/icons';
 import { StepStatus } from '@/types';
 
-import { getStyles } from '../styles';
+import { getWorkflowStepsStyles } from '../styles';
 
 export interface WfoStepStatusIconProps {
     stepStatus: StepStatus;
@@ -61,7 +61,7 @@ export const WfoStepStatusIcon = ({
         stepStateSuspendIconStyle,
         stepStatePendingIconStyle,
         stepStateFailedIconStyle,
-    } = useWithOrchestratorTheme(getStyles);
+    } = useWithOrchestratorTheme(getWorkflowStepsStyles);
 
     const [
         stepStateStyle,

package/src/components/WfoWorkflowSteps/WfoWorkflowStepList/WfoStepListHeader.tsx

@@ -16,7 +16,7 @@ import { WfoTextAnchor } from '@/components/WfoTextAnchor/WfoTextAnchor';
 import { useOrchestratorTheme, useWithOrchestratorTheme } from '@/hooks';
 import { WfoCode, WfoEyeFill } from '@/icons';
 
-import { getStyles } from '../styles';
+import { getWorkflowStepsStyles } from '../styles';
 
 export type WfoStepListHeaderProps = {
     allDetailToggleText: string;
@@ -56,7 +56,7 @@ export const WfoStepListHeader: FC<WfoStepListHeaderProps> = ({
         stepListContentStyle,
         stepListContentBoldTextStyle,
         stepListOptionsContainerStyle,
-    } = useWithOrchestratorTheme(getStyles);
+    } = useWithOrchestratorTheme(getWorkflowStepsStyles);
 
     const [isViewOptionOpen, setIsViewOptionOpen] = useState(false);
 

package/src/components/WfoWorkflowSteps/styles.ts

@@ -2,10 +2,15 @@ import { css } from '@emotion/react';
 
 import { WfoTheme } from '@/hooks';
 
-export const getStyles = ({ theme, toSecondaryColor }: WfoTheme) => {
+export const getWorkflowStepsStyles = ({
+    theme,
+    toSecondaryColor,
+}: WfoTheme) => {
+    const SPACE_BETWEEN_STEPS = theme.base * 1.5;
+
     const stepSpacerStyle = css({
         borderLeft: `1px solid ${theme.colors.darkShade}`,
-        height: '24px',
+        height: `${SPACE_BETWEEN_STEPS}px`,
         marginLeft: '36px',
     });
 
@@ -102,6 +107,7 @@ export const getStyles = ({ theme, toSecondaryColor }: WfoTheme) => {
         });
 
     return {
+        SPACE_BETWEEN_STEPS,
         stepDurationStyle,
         stepEmailContainerStyle,
         stepHeaderRightStyle,

package/src/configuration/version.ts

@@ -1 +1 @@
-export const ORCHESTRATOR_UI_LIBRARY_VERSION = '3.1.0';
+export const ORCHESTRATOR_UI_LIBRARY_VERSION = '3.2.0';

package/src/hooks/index.ts

@@ -1,4 +1,5 @@
 export * from './useCheckEngineStatus';
+export * from './useContentRef';
 export * from './useOrchestratorConfig';
 export * from './useOrchestratorTheme';
 export * from './usePolicy';

package/src/hooks/useContentRef.ts

@@ -0,0 +1,7 @@
+import { useContext } from 'react';
+
+import { ContentContext } from '../components/WfoPageTemplate';
+
+export const useContentRef = () => ({
+    contentRef: useContext(ContentContext)?.contentRef,
+});

package/src/pages/processes/WfoStartProcessPage.tsx

@@ -15,7 +15,7 @@ import {
 import { PATH_TASKS, PATH_WORKFLOWS, WfoError, WfoLoading } from '@/components';
 import { UserInputFormWizard } from '@/components/WfoForms/UserInputFormWizard';
 import { WfoStepStatusIcon } from '@/components/WfoWorkflowSteps';
-import { getStyles } from '@/components/WfoWorkflowSteps/styles';
+import { getWorkflowStepsStyles } from '@/components/WfoWorkflowSteps/styles';
 import { useOrchestratorTheme, useWithOrchestratorTheme } from '@/hooks';
 import {
     HttpStatus,
@@ -124,7 +124,7 @@ export const WfoStartProcessPage = ({
     const { stepUserInput, hasNext } = form;
 
     const { getStepHeaderStyle, stepListContentBoldTextStyle } =
-        useWithOrchestratorTheme(getStyles);
+        useWithOrchestratorTheme(getWorkflowStepsStyles);
 
     const {
         data: timeLineItems = [],