@orchestrator-ui/orchestrator-ui-components 1.8.0 → 1.10.0

package/package.json

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

package/src/components/WfoForms/CreateForm.tsx

@@ -16,7 +16,7 @@ import React, { useCallback, useEffect, useState } from 'react';
 
 import { Form, FormNotCompleteResponse } from '@/types/forms';
 
-import UserInputFormWizard from './UserInputFormWizard';
+import UserInputFormWizardDeprecated from './UserInputFormWizardDeprecated';
 import { useAxiosApiClient } from './useAxiosApiClient';
 
 interface IProps {
@@ -60,7 +60,7 @@ export function CreateForm(props: IProps) {
     return (
         <div>
             {stepUserInput && (
-                <UserInputFormWizard
+                <UserInputFormWizardDeprecated
                     stepUserInput={stepUserInput}
                     validSubmit={submit}
                     cancel={handleCancel}

package/src/components/WfoForms/UserInputFormWizard.tsx

@@ -18,10 +18,10 @@ import { useRouter } from 'next/router';
 import hash from 'object-hash';
 
 import { ConfirmDialogActions } from '@/contexts';
+import { HttpStatus, handlePromiseErrorWithCallback } from '@/rtk';
 import { FormNotCompleteResponse, InputForm } from '@/types/forms';
 
 import UserInputForm from './UserInputForm';
-import { useAxiosApiClient } from './useAxiosApiClient';
 
 interface Form {
     form: InputForm;
@@ -30,7 +30,7 @@ interface Form {
 
 interface UserInputFormWizardProps {
     stepUserInput: InputForm;
-    validSubmit: (processInput: object[]) => Promise<unknown>;
+    stepSubmit: (processInput: object[]) => Promise<unknown>;
     cancel?: () => void;
     isTask: boolean;
     hasNext?: boolean;
@@ -47,13 +47,12 @@ function stop(e: React.SyntheticEvent) {
 export function UserInputFormWizard({
     hasNext = false,
     stepUserInput,
-    validSubmit,
+    stepSubmit,
     cancel,
     isTask,
     isResuming = false,
 }: UserInputFormWizardProps) {
     const router = useRouter();
-    const apiClient = useAxiosApiClient();
     const [forms, setForms] = useState<Form[]>([
         { form: stepUserInput, hasNext: hasNext },
     ]);
@@ -75,20 +74,17 @@ export function UserInputFormWizard({
         const newUserInputs = userInputs.slice(0, forms.length - 1);
         newUserInputs.push(currentFormData);
 
-        const result = validSubmit(newUserInputs);
-        return apiClient.catchErrorStatus<FormNotCompleteResponse>(
-            result,
-            510,
-            (json) => {
-                // Scroll to top when navigating to next screen of wizard
-                window.scrollTo(0, 0);
-                // setFlash(intl.formatMessage({ id: "process.flash.wizard_next_step" }));
-                setForms([
-                    ...forms,
-                    { form: json.form, hasNext: json.hasNext },
-                ]);
-                setUserInputs(newUserInputs);
-            },
+        const promise = stepSubmit(newUserInputs);
+        const callback = (data: FormNotCompleteResponse) => {
+            window.scrollTo(0, 0);
+            setForms([...forms, { form: data.form, hasNext: data.hasNext }]);
+            setUserInputs(newUserInputs);
+        };
+
+        return handlePromiseErrorWithCallback<FormNotCompleteResponse>(
+            promise,
+            HttpStatus.FormNotComplete,
+            callback,
         );
     };
 

package/src/components/WfoForms/UserInputFormWizardDeprecated.tsx

@@ -0,0 +1,125 @@
+/*
+ * Copyright 2019-2023 SURF.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+import React, { useEffect, useState } from 'react';
+
+import { useRouter } from 'next/router';
+import hash from 'object-hash';
+
+import { ConfirmDialogActions } from '@/contexts';
+import { FormNotCompleteResponse, InputForm } from '@/types/forms';
+
+import UserInputForm from './UserInputForm';
+import { useAxiosApiClient } from './useAxiosApiClient';
+
+interface Form {
+    form: InputForm;
+    hasNext?: boolean;
+}
+
+interface UserInputFormWizardProps {
+    stepUserInput: InputForm;
+    validSubmit: (processInput: object[]) => Promise<unknown>;
+    cancel?: () => void;
+    isTask: boolean;
+    hasNext?: boolean;
+    isResuming?: boolean;
+}
+
+function stop(e: React.SyntheticEvent) {
+    if (e !== undefined && e !== null) {
+        e.preventDefault();
+        e.stopPropagation();
+    }
+}
+
+export function UserInputFormWizardDeprecated({
+    hasNext = false,
+    stepUserInput,
+    validSubmit,
+    cancel,
+    isTask,
+    isResuming = false,
+}: UserInputFormWizardProps) {
+    const router = useRouter();
+    const apiClient = useAxiosApiClient();
+    const [forms, setForms] = useState<Form[]>([
+        { form: stepUserInput, hasNext: hasNext },
+    ]);
+    const [userInputs, setUserInputs] = useState<object[]>([]);
+
+    useEffect(() => {
+        setForms([{ form: stepUserInput, hasNext: hasNext }]);
+    }, [hasNext, stepUserInput]);
+
+    const previous: ConfirmDialogActions['closeConfirmDialog'] = (e) => {
+        if (e) {
+            stop(e);
+        }
+        const current = forms.pop();
+        setForms(forms.filter((item) => item !== current));
+    };
+
+    const submit = (currentFormData: object) => {
+        const newUserInputs = userInputs.slice(0, forms.length - 1);
+        newUserInputs.push(currentFormData);
+
+        const result = validSubmit(newUserInputs);
+        return apiClient.catchErrorStatus<FormNotCompleteResponse>(
+            result,
+            510,
+            (json) => {
+                window.scrollTo(0, 0);
+                setForms([
+                    ...forms,
+                    { form: json.form, hasNext: json.hasNext },
+                ]);
+                setUserInputs(newUserInputs);
+            },
+        );
+    };
+
+    const currentForm = forms[forms.length - 1];
+    const currentUserInput = userInputs[forms.length - 1];
+    if (!currentForm || !currentForm.form.properties) {
+        return null;
+    }
+
+    /* Generate a key based on input widget names that results in a new
+     * clean instance + rerender of UserInputForm if the form changes. Without this, state of previous,
+     * wizard step can cause wrong/weird default values for forms inputs.
+     *
+     * Note: to ensure a new form for multiple form wizard steps with exactly the same fields and labels on
+     * the form the hash is calculated on the form object itself + length, which generates a unique hash as it
+     * has a changing ".length" attribute.
+     * */
+    const key = hash.sha1({ form: currentForm.form, length: forms.length });
+    return (
+        <UserInputForm
+            key={key}
+            router={router}
+            stepUserInput={currentForm.form}
+            validSubmit={submit}
+            previous={previous}
+            hasNext={currentForm.hasNext}
+            hasPrev={forms.length > 1}
+            cancel={cancel}
+            userInput={currentUserInput}
+            isTask={isTask}
+            isResuming={isResuming}
+        />
+    );
+}
+
+export default UserInputFormWizardDeprecated;

package/src/components/WfoForms/index.ts

@@ -1,5 +1,6 @@
 export * from './AutoFields';
 export * from './UserInputForm';
 export * from './UserInputFormWizard';
+export * from './UserInputFormWizardDeprecated';
 export * from './formFields';
 export * from './CreateForm';

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

@@ -0,0 +1,50 @@
+import React, { FC } from 'react';
+
+import { useTranslations } from 'next-intl';
+import Link from 'next/link';
+
+import { useWithOrchestratorTheme } from '@/hooks';
+
+import { getMenuItemStyles } from './styles';
+
+type WfoMenuItemLinkProps = {
+    path: string;
+    translationString: string;
+    isSelected: boolean;
+    isSubItem?: boolean;
+};
+
+export const WfoMenuItemLink: FC<WfoMenuItemLinkProps> = ({
+    path,
+    translationString,
+    isSelected,
+    isSubItem,
+}) => {
+    const {
+        menuItemStyle,
+        selectedMenuItem,
+        selectedSubMenuItem,
+        subMenuItemStyle,
+    } = useWithOrchestratorTheme(getMenuItemStyles);
+
+    const getMenuItemStyle = () => {
+        if (isSubItem) {
+            return isSelected ? selectedSubMenuItem : subMenuItemStyle;
+        } else {
+            return isSelected ? selectedMenuItem : menuItemStyle;
+        }
+    };
+
+    const t = useTranslations('main');
+
+    // This is a workaround to use the translation string as the link text if it's not found in the translation file.
+    const linkText =
+        t(translationString) === `main.${translationString}`
+            ? translationString
+            : t(translationString);
+    return (
+        <Link css={getMenuItemStyle()} href={path}>
+            {linkText}
+        </Link>
+    );
+};

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

@@ -25,6 +25,7 @@ import {
     PATH_WORKFLOWS,
 } from '../paths';
 import { WfoCopyright } from './WfoCopyright';
+import { WfoMenuItemLink } from './WfoMenuLink';
 
 export const renderEmptyElementWhenNotAllowedByPolicy = (isAllowed: boolean) =>
     isAllowed ? undefined : () => <></>;
@@ -46,6 +47,7 @@ export type WfoSidebarProps = {
 export const WfoSidebar: FC<WfoSidebarProps> = ({ overrideMenuItems }) => {
     const t = useTranslations('main');
     const router = useRouter();
+
     const [isSideNavOpenOnMobile, setIsSideNavOpenOnMobile] = useState(false);
     const { isAllowed } = usePolicy();
 
@@ -53,90 +55,144 @@ export const WfoSidebar: FC<WfoSidebarProps> = ({ overrideMenuItems }) => {
         setIsSideNavOpenOnMobile((openState) => !openState);
     };
 
+    // Note: href is used to determine if the user has access to the page in
+    // defaultMenuItemsFilteredByPolicy so we need to keep it in the item although we don't use it in the render.
     const defaultMenuItems: EuiSideNavItemType<object>[] = [
         {
             name: t('start'),
             id: '2',
             isSelected: router.pathname === PATH_START,
-            onClick: (e) => {
-                e.preventDefault();
-                router.push(PATH_START);
-            },
+            href: PATH_START,
+            renderItem: () => (
+                <WfoMenuItemLink
+                    path={PATH_START}
+                    translationString="start"
+                    isSelected={router.pathname === PATH_START}
+                />
+            ),
         },
         {
             name: t('workflows'),
             id: '3',
             isSelected: router.pathname === PATH_WORKFLOWS,
             href: PATH_WORKFLOWS,
-            onClick: (e) => {
-                e.preventDefault();
-                router.push(PATH_WORKFLOWS);
-            },
+            renderItem: () => (
+                <WfoMenuItemLink
+                    path={PATH_WORKFLOWS}
+                    translationString="workflows"
+                    isSelected={router.pathname === PATH_WORKFLOWS}
+                />
+            ),
         },
         {
             name: t('subscriptions'),
             id: '4',
             isSelected: router.pathname === PATH_SUBSCRIPTIONS,
             href: PATH_SUBSCRIPTIONS,
-            onClick: (e) => {
-                e.preventDefault();
-                router.push(PATH_SUBSCRIPTIONS);
-            },
+            renderItem: () => (
+                <WfoMenuItemLink
+                    path={PATH_SUBSCRIPTIONS}
+                    translationString="subscriptions"
+                    isSelected={router.pathname === PATH_SUBSCRIPTIONS}
+                />
+            ),
         },
         {
             name: t('metadata'),
             id: '5',
             href: PATH_METADATA,
-            onClick: () => {
-                router.push(PATH_METADATA);
-            },
+            isSelected:
+                router.pathname.substring(0, PATH_METADATA.length) ===
+                PATH_METADATA,
+            renderItem: () => (
+                <WfoMenuItemLink
+                    path={PATH_METADATA_PRODUCTS}
+                    translationString="metadata"
+                    isSelected={
+                        router.pathname.substring(0, PATH_METADATA.length) ===
+                        PATH_METADATA
+                    }
+                />
+            ),
             items: [
                 {
                     name: t('metadataProducts'),
                     id: '5.1',
-                    isSelected: router.pathname === PATH_METADATA_PRODUCTS,
-                    onClick: (e) => {
-                        e.preventDefault();
-                        router.push(PATH_METADATA_PRODUCTS);
-                    },
+                    href: PATH_METADATA_PRODUCTS,
+                    renderItem: () => (
+                        <WfoMenuItemLink
+                            path={PATH_METADATA_PRODUCTS}
+                            translationString="metadataProducts"
+                            isSelected={
+                                router.pathname === PATH_METADATA_PRODUCTS
+                            }
+                            isSubItem={true}
+                        />
+                    ),
                 },
                 {
                     name: t('metadataProductblocks'),
                     id: '5.2',
                     isSelected:
                         router.pathname === PATH_METADATA_PRODUCT_BLOCKS,
-                    onClick: (e) => {
-                        e.preventDefault();
-                        router.push(PATH_METADATA_PRODUCT_BLOCKS);
-                    },
+                    href: PATH_METADATA_PRODUCT_BLOCKS,
+                    renderItem: () => (
+                        <WfoMenuItemLink
+                            path={PATH_METADATA_PRODUCT_BLOCKS}
+                            translationString="metadataProductblocks"
+                            isSelected={
+                                router.pathname === PATH_METADATA_PRODUCT_BLOCKS
+                            }
+                            isSubItem={true}
+                        />
+                    ),
                 },
                 {
                     name: t('metadataResourceTypes'),
                     id: '5.3',
+                    href: PATH_METADATA_RESOURCE_TYPES,
                     isSelected:
                         router.pathname === PATH_METADATA_RESOURCE_TYPES,
-                    onClick: (e) => {
-                        e.preventDefault();
-                        router.push(PATH_METADATA_RESOURCE_TYPES);
-                    },
+                    renderItem: () => (
+                        <WfoMenuItemLink
+                            path={PATH_METADATA_RESOURCE_TYPES}
+                            translationString="metadataResourceTypes"
+                            isSelected={
+                                router.pathname === PATH_METADATA_RESOURCE_TYPES
+                            }
+                            isSubItem={true}
+                        />
+                    ),
                 },
                 {
                     name: t('metadataWorkflows'),
                     id: '5.4',
                     isSelected: router.pathname === PATH_METADATA_WORKFLOWS,
-                    onClick: (e) => {
-                        e.preventDefault();
-                        router.push(PATH_METADATA_WORKFLOWS);
-                    },
+                    href: PATH_METADATA_WORKFLOWS,
+                    renderItem: () => (
+                        <WfoMenuItemLink
+                            path={PATH_METADATA_WORKFLOWS}
+                            translationString="metadataWorkflows"
+                            isSelected={
+                                router.pathname === PATH_METADATA_WORKFLOWS
+                            }
+                            isSubItem={true}
+                        />
+                    ),
                 },
                 {
                     name: t('metadataTasks'),
                     id: '5.5',
                     isSelected: router.pathname === PATH_METADATA_TASKS,
-                    onClick: (e) => {
-                        e.preventDefault();
-                        router.push(PATH_METADATA_TASKS);
-                    },
+                    href: PATH_METADATA_TASKS,
+                    renderItem: () => (
+                        <WfoMenuItemLink
+                            path={PATH_METADATA_TASKS}
+                            translationString="metadataTasks"
+                            isSelected={router.pathname === PATH_METADATA_TASKS}
+                            isSubItem={true}
+                        />
+                    ),
                 },
             ],
         },
@@ -144,21 +200,27 @@ export const WfoSidebar: FC<WfoSidebarProps> = ({ overrideMenuItems }) => {
             name: t('tasks'),
             isSelected: router.pathname === PATH_TASKS,
             id: '6',
-            onClick: (e) => {
-                e.preventDefault();
-                router.push(PATH_TASKS);
-            },
             href: PATH_TASKS,
+            renderItem: () => (
+                <WfoMenuItemLink
+                    path={PATH_TASKS}
+                    translationString="tasks"
+                    isSelected={router.pathname === PATH_TASKS}
+                />
+            ),
         },
         {
             name: t('settings'),
             isSelected: router.pathname === PATH_SETTINGS,
             id: '7',
-            onClick: (e) => {
-                e.preventDefault();
-                router.push(PATH_SETTINGS);
-            },
             href: PATH_SETTINGS,
+            renderItem: () => (
+                <WfoMenuItemLink
+                    path={PATH_SETTINGS}
+                    translationString="settings"
+                    isSelected={router.pathname === PATH_SETTINGS}
+                />
+            ),
         },
     ];
 

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

@@ -1 +1,2 @@
 export * from './WfoSidebar';
+export * from './WfoMenuLink';

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

@@ -1,5 +1,5 @@
 import { EuiThemeComputed } from '@elastic/eui';
-import { css } from '@emotion/react';
+import { CSSObject, css } from '@emotion/react';
 
 export const getCopyrightStyles = (theme: EuiThemeComputed) => {
     const copyrightStyle = css({
@@ -15,3 +15,64 @@ export const getCopyrightStyles = (theme: EuiThemeComputed) => {
         copyrightStyle,
     };
 };
+
+export const getMenuItemStyles = (theme: EuiThemeComputed) => {
+    const baseStyles: CSSObject = {
+        lineHeight: `${theme.base * 1.25}px`,
+        display: 'flex',
+        alignItems: 'center',
+        ':hover': {
+            textDecoration: 'underline',
+        },
+        color: theme.colors.text,
+        padding: `${theme.base * 0.5}px ${theme.base * 0.75}px`,
+    };
+
+    const baseSubMenuStyles: CSSObject = {
+        ...baseStyles,
+        ':after': {
+            content: "''",
+            top: '16px',
+            left: 0,
+            width: '4px',
+            height: '1px',
+            backgroundColor: '#d3dae6',
+            position: 'absolute',
+        },
+        padding: '8px 12px',
+        ':last-child': {
+            top: '-4px',
+            position: 'relative',
+        },
+    };
+
+    const menuItemStyle = css({
+        ...baseStyles,
+        color: theme.colors.title,
+    });
+
+    const selectedMenuItem = css({
+        ...baseStyles,
+        height: `${theme.base * 2.25}px`,
+        backgroundColor: theme.colors.lightShade,
+        borderRadius: theme.border.radius.medium,
+        fontWeight: theme.font.weight.semiBold,
+        color: theme.colors.primaryText,
+    });
+
+    const selectedSubMenuItem = css({
+        ...baseSubMenuStyles,
+        fontWeight: theme.font.weight.semiBold,
+    });
+
+    const subMenuItemStyle = css({
+        ...baseSubMenuStyles,
+    });
+
+    return {
+        menuItemStyle,
+        selectedMenuItem,
+        selectedSubMenuItem,
+        subMenuItemStyle,
+    };
+};

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

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 
 import { EuiFlexItem } from '@elastic/eui';
 
-import { UserInputFormWizard, WfoLoading } from '@/components';
+import { UserInputFormWizardDeprecated, WfoLoading } from '@/components';
 import { useAxiosApiClient } from '@/components/WfoForms/useAxiosApiClient';
 import { useOrchestratorTheme } from '@/hooks';
 import { InputForm } from '@/types/forms';
@@ -35,7 +35,7 @@ export const WfoStepForm = ({
     return (
         <EuiFlexItem css={{ margin: theme.size.m }}>
             {(isProcessing && <WfoLoading />) || (
-                <UserInputFormWizard
+                <UserInputFormWizardDeprecated
                     stepUserInput={userInputForm}
                     validSubmit={submitForm}
                     hasNext={false}

package/src/hooks/DataFetchHooks.ts

@@ -42,6 +42,10 @@ export const filterDataByCriteria = <Type>(
     });
 };
 
+/**
+ * @deprecated
+ * Currently not in use in the SURF app - switched to RTK Query
+ */
 export const useFilterQueryWithRest = <Type>(
     url: string,
     queryKey: string[],

package/src/pages/processes/WfoStartProcessPage.tsx

@@ -28,7 +28,7 @@ import {
 } from '@/types';
 import { FormNotCompleteResponse } from '@/types/forms';
 
-import UserInputFormWizard from '../../components/WfoForms/UserInputFormWizard';
+import UserInputFormWizardDeprecated from '../../components/WfoForms/UserInputFormWizardDeprecated';
 import { WfoProcessDetail } from './WfoProcessDetail';
 
 type StartCreateWorkflowPayload = {
@@ -215,7 +215,7 @@ export const WfoStartProcessPage = ({
                 <EuiHorizontalRule />
                 {(hasError && <WfoError />) ||
                     (stepUserInput && (
-                        <UserInputFormWizard
+                        <UserInputFormWizardDeprecated
                             stepUserInput={stepUserInput}
                             validSubmit={submit}
                             cancel={() =>

package/src/rtk/api.ts

@@ -21,6 +21,12 @@ export enum CacheTags {
     subscriptionList = 'subscriptionList',
 }
 
+export enum HttpStatus {
+    FormNotComplete = 510,
+    BadGateway = 502,
+    BadRequest = 400,
+}
+
 type ExtraOptions = {
     baseQueryType?: BaseQueryTypes;
     apiName?: string;
@@ -34,6 +40,20 @@ export const prepareHeaders = async (headers: Headers) => {
     return headers;
 };
 
+export const handlePromiseErrorWithCallback = <T>(
+    promise: Promise<unknown>,
+    status: number,
+    callbackAction: (json: T) => void,
+) => {
+    return promise.catch((err) => {
+        if (err.data && err.status === status) {
+            callbackAction(err.data);
+        } else {
+            throw err;
+        }
+    });
+};
+
 export const orchestratorApi = createApi({
     reducerPath: 'orchestratorApi',
     baseQuery: (args, api, extraOptions: ExtraOptions) => {