@orchestrator-ui/orchestrator-ui-components 1.13.2 → 1.14.0

package/package.json

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

package/src/components/WfoForms/CreateForm.tsx

@@ -14,11 +14,11 @@
  */
 import React, { useCallback, useEffect, useState } from 'react';
 
+import { UserInputFormWizard } from '@/components';
+import { handlePromiseErrorWithCallback } from '@/rtk';
+import { useStartFormMutation } from '@/rtk/endpoints/forms';
 import { Form, FormNotCompleteResponse } from '@/types/forms';
 
-import UserInputFormWizardDeprecated from './UserInputFormWizardDeprecated';
-import { useAxiosApiClient } from './useAxiosApiClient';
-
 interface IProps {
     /* eslint-disable  @typescript-eslint/no-explicit-any */
     preselectedInput?: unknown;
@@ -31,20 +31,22 @@ export function CreateForm(props: IProps) {
     const { preselectedInput, formKey, handleSubmit, handleCancel } = props;
     const [form, setForm] = useState<Form>({});
     const { stepUserInput, hasNext } = form;
-    const apiClient = useAxiosApiClient();
+    const [startForm] = useStartFormMutation();
 
     const submit = useCallback(
         (userInputs: object[]) => {
-            return apiClient.startForm(formKey, userInputs).then((form) => {
-                handleSubmit(form);
-            });
+            return startForm({ formKey, userInputs })
+                .unwrap()
+                .then((form) => {
+                    handleSubmit(form);
+                });
         },
-        [formKey, handleSubmit, apiClient],
+        [formKey, handleSubmit, startForm],
     );
 
     useEffect(() => {
-        if (formKey && apiClient) {
-            apiClient.catchErrorStatus<FormNotCompleteResponse>(
+        if (formKey) {
+            handlePromiseErrorWithCallback<FormNotCompleteResponse>(
                 submit([]),
                 510,
                 (json) => {
@@ -55,14 +57,14 @@ export function CreateForm(props: IProps) {
                 },
             );
         }
-    }, [formKey, submit, preselectedInput, apiClient]);
+    }, [formKey, submit, preselectedInput]);
 
     return (
         <div>
             {stepUserInput && (
-                <UserInputFormWizardDeprecated
+                <UserInputFormWizard
                     stepUserInput={stepUserInput}
-                    validSubmit={submit}
+                    stepSubmit={submit}
                     cancel={handleCancel}
                     hasNext={hasNext ?? false}
                     isTask={false}

package/src/components/WfoForms/UserInputForm.tsx

@@ -16,7 +16,6 @@
  */
 import React, { useContext, useState } from 'react';
 
-import axios from 'axios';
 import invariant from 'invariant';
 import { JSONSchema6 } from 'json-schema';
 import cloneDeep from 'lodash/cloneDeep';
@@ -37,7 +36,7 @@ import {
 import { ConfirmDialogActions, ConfirmationDialogContext } from '@/contexts';
 import { useOrchestratorTheme } from '@/hooks';
 import { WfoPlayFill } from '@/icons';
-import { ValidationError } from '@/types/forms';
+import { FormValidationError, ValidationError } from '@/types/forms';
 
 import { autoFieldFunction } from './AutoFieldLoader';
 import AutoFields from './AutoFields';
@@ -440,31 +439,30 @@ function UserInputForm({
                 return null;
             } catch (error: unknown) {
                 setProcessing(false);
-
-                if (
-                    axios.isAxiosError(error) &&
-                    error.response?.status === 400
-                ) {
-                    const json = error.response.data;
-                    setNrOfValidationErrors(json.validation_errors.length);
-                    setRootErrors(
-                        json.validation_errors
-                            .filter(
-                                (e: ValidationError) => e.loc[0] === '__root__',
-                            )
-                            .map((e: ValidationError) => e.msg),
-                    );
-                    throw Object.assign(new Error(), {
-                        details: json.validation_errors.map(
-                            (e: ValidationError) => ({
-                                message: e.msg,
-                                params: e.ctx || {},
-                                dataPath: '.' + e.loc.join('.'),
-                            }),
-                        ),
-                    });
+                if (typeof error === 'object' && error !== null) {
+                    const validationError = error as FormValidationError;
+                    if (validationError?.status === 400) {
+                        const json = validationError.data;
+                        setNrOfValidationErrors(json.validation_errors.length);
+                        setRootErrors(
+                            json.validation_errors
+                                .filter(
+                                    (e: ValidationError) =>
+                                        e.loc[0] === '__root__',
+                                )
+                                .map((e: ValidationError) => e.msg),
+                        );
+                        throw Object.assign(new Error(), {
+                            details: json.validation_errors.map(
+                                (e: ValidationError) => ({
+                                    message: e.msg,
+                                    params: e.ctx || {},
+                                    dataPath: '.' + e.loc.join('.'),
+                                }),
+                            ),
+                        });
+                    }
                 }
-
                 // Let the error escape so it can be caught by our own onerror handler instead of being silenced by uniforms
                 setTimeout(() => {
                     throw error;

package/src/components/WfoForms/UserInputFormWizard.tsx

@@ -44,14 +44,14 @@ function stop(e: React.SyntheticEvent) {
     }
 }
 
-export function UserInputFormWizard({
+export const UserInputFormWizard = ({
     hasNext = false,
     stepUserInput,
     stepSubmit,
     cancel,
     isTask,
     isResuming = false,
-}: UserInputFormWizardProps) {
+}: UserInputFormWizardProps) => {
     const router = useRouter();
     const [forms, setForms] = useState<Form[]>([
         { form: stepUserInput, hasNext: hasNext },
@@ -118,6 +118,4 @@ export function UserInputFormWizard({
             isResuming={isResuming}
         />
     );
-}
-
-export default UserInputFormWizard;
+};

package/src/components/WfoForms/index.ts

@@ -1,6 +1,5 @@
 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,9 +2,9 @@ import React, { useState } from 'react';
 
 import { EuiFlexItem } from '@elastic/eui';
 
-import { UserInputFormWizardDeprecated, WfoLoading } from '@/components';
-import { useAxiosApiClient } from '@/components/WfoForms/useAxiosApiClient';
+import { UserInputFormWizard, WfoLoading } from '@/components';
 import { useOrchestratorTheme } from '@/hooks';
+import { useResumeProcessMutation } from '@/rtk/endpoints/forms';
 import { InputForm } from '@/types/forms';
 
 interface WfoStepFormProps {
@@ -20,24 +20,26 @@ export const WfoStepForm = ({
 }: WfoStepFormProps) => {
     const [isProcessing, setIsProcessing] = useState<boolean>(false);
     const { theme } = useOrchestratorTheme();
-    const apiClient = useAxiosApiClient();
+    const [resumeProcess] = useResumeProcessMutation();
 
     const submitForm = (processInput: object[]) => {
         if (!processId) {
             return Promise.reject();
         }
 
-        return apiClient.resumeProcess(processId, processInput).then(() => {
-            setIsProcessing(true);
-        });
+        return resumeProcess({ processId, userInputs: processInput }).then(
+            () => {
+                setIsProcessing(true);
+            },
+        );
     };
 
     return (
         <EuiFlexItem css={{ margin: theme.size.m }}>
             {(isProcessing && <WfoLoading />) || (
-                <UserInputFormWizardDeprecated
+                <UserInputFormWizard
                     stepUserInput={userInputForm}
-                    validSubmit={submitForm}
+                    stepSubmit={submitForm}
                     hasNext={false}
                     isTask={isTask}
                     isResuming={true}

package/src/pages/processes/WfoStartProcessPage.tsx

@@ -1,6 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
-import { AxiosError } from 'axios';
 import { JSONSchema6 } from 'json-schema';
 import { useTranslations } from 'next-intl';
 import { useRouter } from 'next/router';
@@ -13,13 +12,18 @@ import {
     EuiText,
 } from '@elastic/eui';
 
-import { PATH_TASKS, WfoError, WfoLoading } from '@/components';
-import { PATH_WORKFLOWS } from '@/components';
+import { PATH_TASKS, PATH_WORKFLOWS, WfoError, WfoLoading } from '@/components';
+import { UserInputFormWizard } from '@/components/WfoForms/UserInputFormWizard';
 import { useAxiosApiClient } from '@/components/WfoForms/useAxiosApiClient';
 import { WfoStepStatusIcon } from '@/components/WfoWorkflowSteps';
 import { getStyles } from '@/components/WfoWorkflowSteps/styles';
 import { useOrchestratorTheme } from '@/hooks';
-import { useGetTimeLineItemsQuery } from '@/rtk';
+import {
+    HttpStatus,
+    handlePromiseErrorWithCallback,
+    useGetTimeLineItemsQuery,
+} from '@/rtk';
+import { useStartProcessMutation } from '@/rtk/endpoints/forms';
 import {
     EngineStatus,
     ProcessDetail,
@@ -28,7 +32,6 @@ import {
 } from '@/types';
 import { FormNotCompleteResponse } from '@/types/forms';
 
-import UserInputFormWizardDeprecated from '../../components/WfoForms/UserInputFormWizardDeprecated';
 import { WfoProcessDetail } from './WfoProcessDetail';
 
 type StartCreateWorkflowPayload = {
@@ -86,6 +89,8 @@ export const WfoStartProcessPage = ({
     const [form, setForm] = useState<UserInputForm>({});
     const { productId, subscriptionId } = router.query as StartProcessPageQuery;
 
+    const [startProcess] = useStartProcessMutation();
+
     const startProcessPayload = useMemo(
         () => getInitialProcessPayload({ productId, subscriptionId }),
         [productId, subscriptionId],
@@ -110,17 +115,15 @@ export const WfoStartProcessPage = ({
 
     const submit = useCallback(
         (processInput: object[]) => {
-            const startProcessPromise = apiClient
-                .startProcess(
-                    processName,
-                    startProcessPayload
-                        ? [startProcessPayload, ...processInput]
-                        : [...processInput],
-                )
+            const startProcessPromise = startProcess({
+                workflowName: processName,
+                userInputs: startProcessPayload
+                    ? [startProcessPayload, ...processInput]
+                    : [...processInput],
+            })
+                .unwrap()
                 .then(
-                    // Resolve handler
-                    (result) => {
-                        const process = result as { id: string };
+                    (process) => {
                         if (process.id) {
                             const basePath = isTask
                                 ? PATH_TASKS
@@ -133,13 +136,12 @@ export const WfoStartProcessPage = ({
                         throw e;
                     },
                 )
-                .catch((error: AxiosError) => {
-                    if (error?.response?.status !== 510) {
-                        if (error?.response?.status === 400) {
+                .catch((error) => {
+                    if (error?.status !== HttpStatus.FormNotComplete) {
+                        if (error?.status === HttpStatus.BadRequest) {
                             // Rethrow the error so userInputForm can catch it and display validation errors
                             throw error;
                         }
-
                         console.error(error);
                         setHasError(true);
                     } else {
@@ -149,9 +151,9 @@ export const WfoStartProcessPage = ({
 
             // Catch a 503: Service unavailable error indicating the engine is down. This rethrows other errors
             // if it's not 503 so we can catch the special 510 error in the catchErrorStatus call in the useEffect hook
-            return apiClient.catchErrorStatus<EngineStatus>(
+            return handlePromiseErrorWithCallback<EngineStatus>(
                 startProcessPromise,
-                503,
+                HttpStatus.ServiceUnavailable,
                 (json) => {
                     // TODO: Use the toastMessage hook to display an engine down error message
                     console.error('engine down!!!', json);
@@ -159,7 +161,7 @@ export const WfoStartProcessPage = ({
                 },
             );
         },
-        [apiClient, processName, startProcessPayload, isTask, router],
+        [startProcess, processName, startProcessPayload, isTask, router],
     );
 
     useEffect(() => {
@@ -171,9 +173,9 @@ export const WfoStartProcessPage = ({
                 });
             };
 
-            apiClient.catchErrorStatus<FormNotCompleteResponse>(
+            handlePromiseErrorWithCallback<FormNotCompleteResponse>(
                 submit([]),
-                510,
+                HttpStatus.FormNotComplete,
                 clientResultCallback,
             );
         }
@@ -215,9 +217,9 @@ export const WfoStartProcessPage = ({
                 <EuiHorizontalRule />
                 {(hasError && <WfoError />) ||
                     (stepUserInput && (
-                        <UserInputFormWizardDeprecated
+                        <UserInputFormWizard
                             stepUserInput={stepUserInput}
-                            validSubmit={submit}
+                            stepSubmit={submit}
                             cancel={() =>
                                 router.push(
                                     isTask ? PATH_TASKS : PATH_WORKFLOWS,

package/src/rtk/api.ts

@@ -25,6 +25,7 @@ export enum HttpStatus {
     FormNotComplete = 510,
     BadGateway = 502,
     BadRequest = 400,
+    ServiceUnavailable = 503,
 }
 
 type ExtraOptions = {
@@ -42,7 +43,7 @@ export const prepareHeaders = async (headers: Headers) => {
 
 export const handlePromiseErrorWithCallback = <T>(
     promise: Promise<unknown>,
-    status: number,
+    status: HttpStatus,
     callbackAction: (json: T) => void,
 ) => {
     return promise.catch((err) => {

package/src/rtk/endpoints/forms.ts

@@ -0,0 +1,64 @@
+import { BaseQueryTypes, orchestratorApi } from '@/rtk';
+
+const PROCESS_ENDPOINT = 'processes';
+const RESUME_ENDPOINT = 'resume';
+const FORMS_ENDPOINT = 'surf/forms/'; // It is still being used by example-wfo-ui
+
+const formsApi = orchestratorApi.injectEndpoints({
+    endpoints: (build) => ({
+        startProcess: build.mutation<
+            { id: string },
+            { workflowName: string; userInputs: object[] }
+        >({
+            query: ({ workflowName, userInputs }) => ({
+                url: `${PROCESS_ENDPOINT}/${workflowName}`,
+                method: 'POST',
+                body: JSON.stringify(userInputs),
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+            }),
+            extraOptions: {
+                baseQueryType: BaseQueryTypes.fetch,
+            },
+        }),
+        resumeProcess: build.mutation<
+            void,
+            { processId: string; userInputs: object[] }
+        >({
+            query: ({ processId, userInputs }) => ({
+                url: `${PROCESS_ENDPOINT}/${processId}/${RESUME_ENDPOINT}`,
+                method: 'PUT',
+                body: JSON.stringify(userInputs),
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+            }),
+            extraOptions: {
+                baseQueryType: BaseQueryTypes.fetch,
+            },
+        }),
+        startForm: build.mutation<
+            void,
+            { formKey: string; userInputs: object[] }
+        >({
+            query: ({ formKey, userInputs }) => ({
+                url: `${FORMS_ENDPOINT}${formKey}`,
+                method: 'POST',
+                body: JSON.stringify(userInputs),
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+            }),
+            extraOptions: {
+                baseQueryType: BaseQueryTypes.fetch,
+            },
+        }),
+    }),
+});
+
+export const {
+    useStartProcessMutation,
+    useResumeProcessMutation,
+    useStartFormMutation,
+} = formsApi;

package/src/types/forms.ts

@@ -3,6 +3,8 @@ import { Ref } from 'react';
 import { JSONSchema6 } from 'json-schema';
 import { HTMLFieldProps } from 'uniforms';
 
+import { HttpStatus } from '@/rtk';
+
 export interface ValidationError {
     input_type: string;
     loc: (string | number)[];
@@ -38,3 +40,17 @@ export type FieldProps<
         description?: string;
     } & Extra
 >;
+
+type ValidationErrorData = {
+    detail: string;
+    status: HttpStatus;
+    title: string;
+    traceback: string;
+    type: string;
+    validation_errors: [];
+};
+
+export type FormValidationError = {
+    data: ValidationErrorData;
+    status: HttpStatus;
+};

package/src/components/WfoForms/UserInputFormWizardDeprecated.tsx

@@ -1,125 +0,0 @@
-/*
- * 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;