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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@orchestrator-ui/orchestrator-ui-components",
-    "version": "1.9.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/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) => {