@orchestrator-ui/orchestrator-ui-components 1.26.0 → 1.27.1

package/jest.config.cjs

@@ -1,6 +1,17 @@
 const base = require('@orchestrator-ui/jest-config/jest-base.config.js');
+const nextJest = require('next/jest');
 
-module.exports = {
+const createJestConfig = nextJest({
+    // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
+    dir: './',
+});
+
+// The entry for "uuid" in the moduleNameMapper can be removed when EUI updates the dependency version to 9.0.0 or higher.
+// https://github.com/uuidjs/uuid/blob/main/CHANGELOG.md#900-2022-09-05
+const customJestConfig = {
     ...base,
-    displayName: 'Orchestrator UI Components Tests',
+    displayName: 'Wfo-UI Tests',
+    moduleNameMapper: { '^uuid$': 'uuid' },
 };
+
+module.exports = createJestConfig(customJestConfig);

package/package.json

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

package/src/components/WfoForms/UserInputForm.tsx

@@ -33,7 +33,7 @@ import {
     EuiHorizontalRule,
 } from '@elastic/eui';
 
-import { ConfirmDialogActions, ConfirmationDialogContext } from '@/contexts';
+import { ConfirmDialogHandler, ConfirmationDialogContext } from '@/contexts';
 import { useOrchestratorTheme } from '@/hooks';
 import { WfoPlayFill } from '@/icons';
 import { FormValidationError, ValidationError } from '@/types/forms';
@@ -51,8 +51,8 @@ interface IProps {
     router: NextRouter;
     stepUserInput: JSONSchema6;
     validSubmit: (userInput: { [index: string]: unknown }) => Promise<unknown>;
-    cancel?: ConfirmDialogActions['closeConfirmDialog'];
-    previous: ConfirmDialogActions['closeConfirmDialog'];
+    cancel?: ConfirmDialogHandler;
+    previous: ConfirmDialogHandler;
     hasNext?: boolean;
     hasPrev?: boolean;
     userInput: object;
@@ -423,6 +423,7 @@ export function WfoUserInputForm({
     isResuming = false,
 }: IProps) {
     const t = useTranslations('pydanticForms.userInputForm');
+    const tDialog = useTranslations('confirmationDialog');
     const { theme } = useOrchestratorTheme();
     const { showConfirmDialog } = useContext(ConfirmationDialogContext);
     const [processing, setProcessing] = useState<boolean>(false);
@@ -430,15 +431,21 @@ export function WfoUserInputForm({
     const [rootErrors, setRootErrors] = useState<string[]>([]);
 
     const openLeavePageDialog = (
-        leaveAction: ConfirmDialogActions['closeConfirmDialog'],
+        leaveAction: ConfirmDialogHandler,
         leaveQuestion?: string,
     ) => {
+        const question = leaveQuestion || tDialog('leavePage');
+        const subQuestion = leaveQuestion ? tDialog('leavePageSub') : '';
+        const cancelButtonText = tDialog('stay');
+        const confirmButtonText = tDialog('leave');
+
         return () =>
             showConfirmDialog({
-                question: leaveQuestion || '',
-                confirmAction: () => {},
-                cancelAction: leaveAction,
-                leavePage: true,
+                question,
+                subQuestion,
+                onConfirm: leaveAction,
+                cancelButtonText,
+                confirmButtonText,
             });
     };
 
@@ -496,17 +503,15 @@ export function WfoUserInputForm({
             | React.MouseEvent<HTMLButtonElement>
             | React.MouseEvent<HTMLDivElement, MouseEvent>,
         question: string | undefined,
-        confirm: ConfirmDialogActions['closeConfirmDialog'],
+        confirm: () => void,
     ) => {
         if (!question) {
-            return confirm(e);
+            return confirm();
         }
 
         showConfirmDialog({
             question: question,
-            confirmAction: confirm,
-            cancelAction: () => {},
-            leavePage: false,
+            onConfirm: confirm,
         });
     };
 

package/src/components/WfoForms/UserInputFormWizard.tsx

@@ -17,7 +17,7 @@ import React, { useEffect, useState } from 'react';
 import { useRouter } from 'next/router';
 import hash from 'object-hash';
 
-import { ConfirmDialogActions } from '@/contexts';
+import type { ConfirmDialogHandler } from '@/contexts';
 import { HttpStatus, handlePromiseErrorWithCallback } from '@/rtk';
 import { FormNotCompleteResponse, InputForm } from '@/types/forms';
 
@@ -31,7 +31,7 @@ interface Form {
 interface UserInputFormWizardProps {
     stepUserInput: InputForm;
     stepSubmit: (processInput: object[]) => Promise<unknown>;
-    cancel?: () => void;
+    cancel?: ConfirmDialogHandler;
     isTask: boolean;
     hasNext?: boolean;
     isResuming?: boolean;
@@ -62,7 +62,7 @@ export const UserInputFormWizard = ({
         setForms([{ form: stepUserInput, hasNext: hasNext }]);
     }, [hasNext, stepUserInput]);
 
-    const previous: ConfirmDialogActions['closeConfirmDialog'] = (e) => {
+    const previous: ConfirmDialogHandler = (e) => {
         if (e) {
             stop(e);
         }

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

@@ -1,17 +1,35 @@
 import React from 'react';
 
+import { useTranslations } from 'next-intl';
 import { useRouter } from 'next/router';
 
-import { EuiBreadcrumb, EuiBreadcrumbs, EuiSpacer } from '@elastic/eui';
+import {
+    EuiBreadcrumb,
+    EuiBreadcrumbs,
+    EuiButtonIcon,
+    EuiFlexGroup,
+    EuiFlexItem,
+    EuiSpacer,
+} from '@elastic/eui';
 
-import { isUuid4, removeSuffix, upperCaseFirstChar } from '../../../utils';
+import { useOrchestratorTheme } from '@/hooks';
+import { WfoSideMenu } from '@/icons';
+import { isUuid4, removeSuffix, upperCaseFirstChar } from '@/utils';
 
-export const WfoBreadcrumbs = () => {
+interface WfoBreadcrumbsProps {
+    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: 'Start',
+            text: t('start'),
             href: '/',
             onClick: (e) => {
                 e.preventDefault();
@@ -29,7 +47,6 @@ export const WfoBreadcrumbs = () => {
             // first remove the suffix, like ?activeTab=....
             const _p = removeSuffix(p);
             const text = isUuid4(_p) ? _p : upperCaseFirstChar(_p);
-            // eslint-disable-next-line no-console
 
             breadcrumbs.push({
                 text: text,
@@ -44,11 +61,36 @@ export const WfoBreadcrumbs = () => {
 
     return (
         <>
-            <EuiBreadcrumbs
-                breadcrumbs={breadcrumbs}
-                truncate={false}
-                aria-label="Current page"
-            />
+            <EuiFlexGroup
+                direction="row"
+                alignItems="center"
+                justifyContent="flexStart"
+                gutterSize="none"
+            >
+                <EuiFlexItem grow={0}>
+                    <EuiButtonIcon
+                        aria-label={t('ariaLabelToggleSideMenu')}
+                        display="empty"
+                        iconType={() => (
+                            <WfoSideMenu color={theme.colors.subduedText} />
+                        )}
+                        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/WfoPageHeader.tsx

@@ -25,14 +25,13 @@ import {
     useOrchestratorTheme,
     useWithOrchestratorTheme,
 } from '@/hooks';
-import { WfoLogoutIcon, WfoSideMenu } from '@/icons';
+import { WfoLogoutIcon } from '@/icons';
 import { ColorModes } from '@/types';
 
 export interface WfoPageHeaderProps {
     // todo: should be part of theme!
     navigationHeight: number;
     getAppLogo: (navigationHeight: number) => ReactElement;
-    handleSideMenuClick: () => void;
     handleLogoutClick: () => void;
     onThemeSwitch: (theme: EuiThemeColorMode) => void;
 }
@@ -40,7 +39,6 @@ export interface WfoPageHeaderProps {
 export const WfoPageHeader: FC<WfoPageHeaderProps> = ({
     navigationHeight,
     getAppLogo,
-    handleSideMenuClick,
     handleLogoutClick,
     onThemeSwitch,
 }) => {
@@ -62,14 +60,6 @@ export const WfoPageHeader: FC<WfoPageHeaderProps> = ({
                 <EuiHeaderSectionItem>
                     <WfoEnvironmentBadge />
                 </EuiHeaderSectionItem>
-
-                <EuiButtonIcon
-                    aria-label="Show/Hide side menu"
-                    display="empty"
-                    iconType={() => <WfoSideMenu color={theme.colors.ghost} />}
-                    css={{ width: 48, height: 48, marginLeft: 10 }}
-                    onClick={handleSideMenuClick}
-                />
             </EuiHeaderSection>
 
             <EuiHeaderSection>

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

@@ -35,9 +35,6 @@ export const WfoPageTemplate: FC<WfoPageTemplateProps> = ({
             <WfoPageHeader
                 getAppLogo={getAppLogo}
                 navigationHeight={navigationHeight}
-                handleSideMenuClick={() =>
-                    setIsSideMenuVisible((prevState) => !prevState)
-                }
                 handleLogoutClick={signOut}
                 onThemeSwitch={onThemeSwitch}
             />
@@ -64,7 +61,11 @@ export const WfoPageTemplate: FC<WfoPageTemplateProps> = ({
                         backgroundColor: theme.colors.emptyShade,
                     }}
                 >
-                    <WfoBreadcrumbs />
+                    <WfoBreadcrumbs
+                        handleSideMenuClick={() =>
+                            setIsSideMenuVisible((prevState) => !prevState)
+                        }
+                    />
                     {children}
                 </EuiPageTemplate.Section>
             </EuiPageTemplate>

package/src/components/WfoSubscription/WfoInSyncField.tsx

@@ -63,7 +63,7 @@ export const WfoInSyncField = ({ subscriptionDetail }: WfoInSyncFieldProps) => {
         const confirmSetInSync = () => {
             showConfirmDialog({
                 question: t('setInSyncQuestion'),
-                confirmAction: () => {
+                onConfirm: () => {
                     setInSyncAction();
                 },
             });

package/src/components/WfoSubscription/WfoSubscriptionDetailTree.tsx

@@ -127,7 +127,10 @@ export const WfoSubscriptionDetailTree = ({
                     <EuiFlexItem grow={true}>
                         {!tree && <WfoLoading />}
                         {tree && (
-                            <WfoTree data={[tree]} depthList={depthList} />
+                            <WfoTree
+                                treeBlocks={[tree]}
+                                depthList={depthList}
+                            />
                         )}
                     </EuiFlexItem>
                 </EuiFlexGroup>

package/src/components/WfoTree/WfoTree.tsx

@@ -3,13 +3,14 @@ import React, { FC, useEffect } from 'react';
 import { TreeContext, TreeContextType } from '../../contexts';
 import { TreeBlock } from '../../types';
 import { WfoTreeBranch } from './WfoTreeBranch';
+import { sortTreeBlockByLabel } from './treeUtils';
 
 type WfoTreeProps = {
-    data: TreeBlock[];
+    treeBlocks: TreeBlock[];
     depthList: number[];
 };
 
-export const WfoTree: FC<WfoTreeProps> = ({ data, depthList }) => {
+export const WfoTree: FC<WfoTreeProps> = ({ treeBlocks, depthList }) => {
     const { setDepths } = React.useContext(TreeContext) as TreeContextType;
 
     useEffect(() => {
@@ -19,7 +20,7 @@ export const WfoTree: FC<WfoTreeProps> = ({ data, depthList }) => {
 
     return (
         <div style={{ width: '500px' }}>
-            {data.map((item) => (
+            {[...treeBlocks].sort(sortTreeBlockByLabel).map((item) => (
                 <WfoTreeBranch key={item.id} item={item} level={0} />
             ))}
         </div>

package/src/components/WfoTree/WfoTreeBranch.tsx

@@ -5,6 +5,7 @@ import { EuiListGroup } from '@elastic/eui';
 import { TreeContext, TreeContextType } from '../../contexts';
 import { TreeBlock } from '../../types';
 import { WfoTreeNode } from './WfoTreeNode';
+import { sortTreeBlockByLabel } from './treeUtils';
 
 type WfoTreeBranchProps = {
     item: TreeBlock;
@@ -21,9 +22,15 @@ export const WfoTreeBranch: FC<WfoTreeBranchProps> = ({ item, level }) => {
         if (hasChildren) {
             const newLevel = level + 1;
 
-            return item.children.map((child) => (
-                <WfoTreeBranch key={child.id} item={child} level={newLevel} />
-            ));
+            return [...item.children]
+                .sort(sortTreeBlockByLabel)
+                .map((child) => (
+                    <WfoTreeBranch
+                        key={child.id}
+                        item={child}
+                        level={newLevel}
+                    />
+                ));
         }
 
         return null;

package/src/components/WfoTree/treeUtils.ts

@@ -19,3 +19,16 @@ export function getWfoTreeNodeDepth(
         }
     }
 }
+
+export const sortTreeBlockByLabel = (
+    { label: labelA }: TreeBlock,
+    { label: labelB }: TreeBlock,
+): number => {
+    if (labelA < labelB) {
+        return -1;
+    }
+    if (labelA > labelB) {
+        return 1;
+    }
+    return 0;
+};

package/src/components/confirmationDialog/WfoConfirmationDialog.tsx

@@ -26,87 +26,80 @@ import {
     EuiOverlayMask,
 } from '@elastic/eui';
 
+import { ConfirmDialogHandler } from '@/contexts/ConfirmationDialogProvider';
+
 import { confirmationDialogStyling } from './ConfirmationDialogStyling';
 
-interface IProps {
+interface WfoConfirmationDialogProps {
     isOpen?: boolean;
-    cancel: (
-        e:
-            | React.KeyboardEvent<HTMLDivElement>
-            | React.MouseEvent<HTMLButtonElement, MouseEvent>
-            | undefined,
-    ) => void;
-    confirm: (
-        e:
-            | React.KeyboardEvent<HTMLDivElement>
-            | React.MouseEvent<HTMLButtonElement, MouseEvent>
-            | undefined,
-    ) => void;
-    question?: string;
-    leavePage?: boolean;
+    onCancel: ConfirmDialogHandler;
+    onConfirm: ConfirmDialogHandler;
+    question: string;
+    subQuestion?: string;
+    cancelButtonText?: string;
+    confirmButtonText?: string;
     isError?: boolean;
 }
 
 export default function WfoConfirmationDialog({
     isOpen = false,
-    cancel,
-    confirm,
+    onCancel,
+    onConfirm,
     question = '',
-    leavePage = false,
+    subQuestion = '',
+    cancelButtonText = '',
+    confirmButtonText = '',
     isError = false,
-}: IProps) {
+}: WfoConfirmationDialogProps) {
     const t = useTranslations('confirmationDialog');
-    const modalContent = (
-        <div>
-            {leavePage ? (
-                <section
-                    className={`dialog-content ${isError ? ' error' : ''}`}
-                >
-                    <h2>{question || t('leavePage')}</h2>
-                    {!question && <p>{t('leavePageSub')}</p>}
-                </section>
-            ) : (
-                <section className="dialog-content">
-                    <h2>{question}</h2>
-                </section>
-            )}
-        </div>
-    );
-
-    let modal;
 
-    if (isOpen) {
-        modal = (
-            <EuiOverlayMask>
-                <EuiModal
-                    css={confirmationDialogStyling}
-                    className="confirm-modal"
-                    onClose={leavePage ? confirm : cancel}
-                    initialFocus="[name=popfirst]"
-                >
-                    <EuiModalHeader>
-                        <EuiModalHeaderTitle>{t('title')}</EuiModalHeaderTitle>
-                    </EuiModalHeader>
+    return (
+        <div className="confirmation-dialog-overlay">
+            {isOpen && (
+                <EuiOverlayMask>
+                    <EuiModal
+                        css={confirmationDialogStyling}
+                        className="confirm-modal"
+                        onClose={onCancel}
+                        initialFocus="[name=popfirst]"
+                    >
+                        <EuiModalHeader>
+                            <EuiModalHeaderTitle>
+                                {t('title')}
+                            </EuiModalHeaderTitle>
+                        </EuiModalHeader>
 
-                    <EuiModalBody>{modalContent}</EuiModalBody>
+                        <EuiModalBody>
+                            <div>
+                                <section
+                                    className={`dialog-content ${isError ? ' error' : ''}`}
+                                >
+                                    <h2>{question}</h2>
+                                    {subQuestion && <p>{subQuestion}</p>}
+                                </section>
+                            </div>
+                        </EuiModalBody>
 
-                    <EuiModalFooter>
-                        <EuiButton
-                            onClick={cancel}
-                            id="dialog-cancel"
-                            fill={false}
-                        >
-                            {leavePage ? t('leave') : t('cancel')}
-                        </EuiButton>
+                        <EuiModalFooter>
+                            <EuiButton
+                                onClick={onCancel}
+                                id="dialog-cancel"
+                                fill={false}
+                            >
+                                {cancelButtonText || t('cancel')}
+                            </EuiButton>
 
-                        <EuiButton onClick={confirm} fill id="dialog-confirm">
-                            {leavePage ? t('stay') : t('confirm')}
-                        </EuiButton>
-                    </EuiModalFooter>
-                </EuiModal>
-            </EuiOverlayMask>
-        );
-    }
-
-    return <div className="confirmation-dialog-overlay">{modal}</div>;
+                            <EuiButton
+                                onClick={onConfirm}
+                                fill
+                                id="dialog-confirm"
+                            >
+                                {confirmButtonText || t('confirm')}
+                            </EuiButton>
+                        </EuiModalFooter>
+                    </EuiModal>
+                </EuiOverlayMask>
+            )}
+        </div>
+    );
 }