@orchestrator-ui/orchestrator-ui-components 6.8.0 → 7.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@orchestrator-ui/orchestrator-ui-components",
-    "version": "6.8.0",
+    "version": "7.0.0",
     "license": "Apache-2.0",
     "description": "Library of UI Components used to display the workflow orchestrator frontend",
     "author": {
@@ -54,16 +54,13 @@
         "next-query-params": "^5.0.0",
         "object-hash": "^3.0.0",
         "prism-themes": "^1.9.0",
-        "pydantic-forms": "^0.10.2",
+        "pydantic-forms": "^1.0.0",
         "react-diff-view": "^3.2.0",
         "react-draggable": "^4.4.6",
         "react-redux": "^9.1.2",
         "react-select": "^5.8.0",
         "scroll-into-view": "^1.16.2",
         "unidiff": "^1.0.4",
-        "uniforms": "^3.8.1",
-        "uniforms-bridge-json-schema": "^3.8.1",
-        "uniforms-unstyled": "^3.8.1",
         "use-query-params": "2.2.1"
     },
     "devDependencies": {
@@ -82,11 +79,10 @@
         "jest-environment-jsdom": "^30.2.0",
         "jest-watch-typeahead": "^3.0.1",
         "tsup": "^8.5.0",
-        "typescript": "^5.5.2",
-        "uniforms-bridge-simple-schema-2": "^3.8.1"
+        "typescript": "^5.5.2"
     },
     "peerDependencies": {
-        "next": "^15.5.7",
+        "next": "^15.5.9",
         "react": "^18.3.1",
         "react-dom": "^18.3.1"
     },

package/src/components/WfoPydanticForm/RenderFormErrors.tsx

@@ -8,9 +8,10 @@ import React from 'react';
 import { useTranslations } from 'next-intl';
 import { useGetValidationErrors } from 'pydantic-forms';
 
-import { getCommonFormFieldStyles } from '@/components';
 import { useWithOrchestratorTheme } from '@/hooks';
 
+import { getCommonFormFieldStyles } from './fields/styles';
+
 export const RenderFormErrors = () => {
     const { errorStyle } = useWithOrchestratorTheme(getCommonFormFieldStyles);
 

package/src/components/WfoPydanticForm/Row.tsx

@@ -4,9 +4,11 @@ import type { RowRenderComponent } from 'pydantic-forms';
 
 import { EuiFormRow, EuiText } from '@elastic/eui';
 
-import { getCommonFormFieldStyles, getDataTestId } from '@/components';
+import { getDataTestId } from '@/components';
 import { useWithOrchestratorTheme } from '@/hooks';
 
+import { getCommonFormFieldStyles } from './fields/styles';
+
 export const Row: RowRenderComponent = ({
     title,
     description,

package/src/components/WfoPydanticForm/fields/WfoSummary.tsx

@@ -5,14 +5,12 @@ import type { PydanticFormElement } from 'pydantic-forms';
 
 import { EuiFlexItem, EuiFormRow, EuiText } from '@elastic/eui';
 
-import {
-    getCommonFormFieldStyles,
-    getNestedSummaryLabel,
-    summaryFieldStyles,
-} from '@/components';
 import { useWithOrchestratorTheme } from '@/hooks';
 import { snakeToHuman } from '@/utils';
 
+import { getCommonFormFieldStyles, summaryFieldStyles } from './styles';
+import { getNestedSummaryLabel } from './wfoPydanticFormUtils';
+
 export const WfoSummary: PydanticFormElement = ({ pydanticFormField }) => {
     const { summaryFieldStyle } = useWithOrchestratorTheme(summaryFieldStyles);
     const { formRowStyle } = useWithOrchestratorTheme(getCommonFormFieldStyles);

package/src/components/WfoPydanticForm/fields/styles.ts

@@ -1,5 +1,7 @@
 import { css } from '@emotion/react';
 
+import type { WfoTheme } from '@/hooks';
+
 export const getWfoObjectFieldStyles = () => {
     const wfoObjectFieldStyles = css({
         width: '100%',
@@ -11,3 +13,73 @@ export const getWfoObjectFieldStyles = () => {
         wfoObjectFieldStyles,
     };
 };
+
+export const getCommonFormFieldStyles = ({ theme }: WfoTheme) => {
+    const formRowStyle = css({
+        marginBottom: theme.base * 2,
+
+        '.euiText': {
+            color: theme.colors.text,
+        },
+        '.euiFormLabel': {
+            color: theme.colors.text,
+            cursor: 'text',
+            '&.euiFormLabel-isFocused': {
+                color: theme.colors.primaryText,
+            },
+        },
+        '.euiFormRow__labelWrapper': {
+            display: 'flex',
+            flexDirection: 'column',
+        },
+    });
+
+    const errorStyle = css({
+        color: theme.colors.dangerText,
+    });
+    return {
+        errorStyle,
+        formRowStyle,
+    };
+};
+
+export const summaryFieldStyles = ({ theme }: WfoTheme) => {
+    const summaryFieldStyle = css({
+        'div.emailMessage': {
+            td: {
+                color: theme.colors.textParagraph,
+            },
+            p: {
+                color: theme.colors.textParagraph,
+            },
+            html: {
+                marginLeft: '-10px',
+            },
+        },
+        'section.table-summary': {
+            marginTop: '20px',
+            width: '100%',
+            td: {
+                padding: '10px',
+                verticalAlign: 'top',
+            },
+            'td:not(:first-child):not(:last-child)': {
+                borderRight: `1px solid ${theme.colors.borderBasePlain}`,
+            },
+            '.label': {
+                fontWeight: 'bold',
+                color: theme.colors.backgroundBaseSubdued,
+                backgroundColor: theme.colors.primary,
+                borderRight: `2px solid ${theme.colors.borderBasePlain}`,
+                borderBottom: `1px solid ${theme.colors.borderBasePlain}`,
+            },
+            '.value': {
+                backgroundColor: theme.colors.backgroundBasePrimary,
+                borderBottom: `1px solid ${theme.colors.borderBasePlain}`,
+            },
+        },
+    });
+    return {
+        summaryFieldStyle: summaryFieldStyle,
+    };
+};

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

@@ -9,16 +9,10 @@ import {
     WfoMonacoCodeBlock,
     WfoTableCodeBlock,
 } from '@/components';
-import { WfoStepFormOld } from '@/components/WfoWorkflowSteps/WfoStep/WfoStepFormOld';
-import {
-    useGetOrchestratorConfig,
-    useOrchestratorTheme,
-    useWithOrchestratorTheme,
-} from '@/hooks';
+import { useOrchestratorTheme, useWithOrchestratorTheme } from '@/hooks';
 import { WfoChevronDown, WfoChevronUp } from '@/icons';
-import type { EmailState } from '@/types';
+import type { EmailState, FormUserPermissions } from '@/types';
 import { StepStatus } from '@/types';
-import { FormUserPermissions } from '@/types/forms';
 import { calculateTimeDifference, formatDate } from '@/utils';
 
 import { WfoStepStatusIcon } from '../WfoStepStatusIcon';
@@ -55,8 +49,6 @@ export const WfoStep = React.forwardRef(
         }: WfoStepProps,
         ref: LegacyRef<HTMLDivElement>,
     ) => {
-        const config = useGetOrchestratorConfig();
-        const usePydanticForms: boolean = config.activatePydanticForms ?? false;
         const { isExpanded, step, userInputForm } = stepListItem;
         const [codeView, setCodeView] = useState<CodeView>(CodeView.JSON);
 
@@ -213,23 +205,14 @@ export const WfoStep = React.forwardRef(
                             )}
                         </div>
                     )}
-                    {step.status === StepStatus.SUSPEND &&
-                        userInputForm &&
-                        (usePydanticForms ? (
-                            <WfoStepForm
-                                userInputForm={userInputForm}
-                                isTask={isTask}
-                                processId={processId ?? ''}
-                                userPermissions={userPermissions}
-                            />
-                        ) : (
-                            <WfoStepFormOld
-                                userInputForm={userInputForm}
-                                isTask={isTask}
-                                processId={processId}
-                                userPermissions={userPermissions}
-                            />
-                        ))}
+                    {step.status === StepStatus.SUSPEND && userInputForm && (
+                        <WfoStepForm
+                            userInputForm={userInputForm}
+                            isTask={isTask}
+                            processId={processId ?? ''}
+                            userPermissions={userPermissions}
+                        />
+                    )}
                 </EuiPanel>
             </div>
         );

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

@@ -9,7 +9,7 @@ import { StepFormFooter } from '@/components/WfoWorkflowSteps/WfoStep/WfoStepFor
 import { useOrchestratorTheme } from '@/hooks';
 import { HttpStatus } from '@/rtk';
 import { useResumeProcessMutation } from '@/rtk/endpoints/forms';
-import { FormUserPermissions, InputForm } from '@/types/forms';
+import { FormUserPermissions, InputForm } from '@/types';
 
 interface WfoStepFormProps {
     userInputForm: InputForm;

package/src/components/index.ts

@@ -14,7 +14,6 @@ export * from './WfoTable';
 export * from './WfoTimeline';
 export * from './WfoLoading';
 export * from './WfoToastsList';
-export * from './WfoForms';
 export * from './WfoDateTime';
 export * from './WfoAuth';
 export * from './WfoDropdownButton';

package/src/configuration/version.ts

@@ -1 +1 @@
-export const ORCHESTRATOR_UI_LIBRARY_VERSION = '6.8.0';
+export const ORCHESTRATOR_UI_LIBRARY_VERSION = '7.0.0';

package/src/contexts/OrchestratorConfigContext.tsx

@@ -18,7 +18,6 @@ export const emptyOrchestratorConfig: OrchestratorConfig = {
     supportMenuItemUrl: '',
     enableAoStackStatus: false,
     aoStackStatusUrl: '',
-    activatePydanticForms: false,
 };
 
 export const OrchestratorConfigContext = createContext<OrchestratorConfig>(

package/src/pages/processes/WfoStartProcessPage.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useMemo, useState } from 'react';
 
 import { JSONSchema6 } from 'json-schema';
 import { useTranslations } from 'next-intl';
@@ -12,28 +12,17 @@ import {
     EuiText,
 } from '@elastic/eui';
 
-import { PATH_TASKS, PATH_WORKFLOWS, WfoError, WfoLoading } from '@/components';
-import { UserInputFormWizard } from '@/components/WfoForms/UserInputFormWizard';
+import { WfoError, WfoLoading } from '@/components';
 import { WfoPydanticForm } from '@/components/WfoPydanticForm';
 import { WfoStepStatusIcon } from '@/components/WfoWorkflowSteps';
 import { getWorkflowStepsStyles } from '@/components/WfoWorkflowSteps/styles';
 import { useOrchestratorTheme, useWithOrchestratorTheme } from '@/hooks';
-import { useGetOrchestratorConfig } from '@/hooks';
 import {
-    HttpStatus,
-    handlePromiseErrorWithCallback,
     useGetDescriptionForWorkflowNameQuery,
     useGetTimeLineItemsQuery,
 } from '@/rtk';
 import { useGetSubscriptionDetailQuery } from '@/rtk';
-import { useStartProcessMutation } from '@/rtk/endpoints/forms';
-import {
-    EngineStatus,
-    ProcessDetail,
-    ProcessStatus,
-    StepStatus,
-} from '@/types';
-import { FormNotCompleteResponse } from '@/types/forms';
+import { ProcessDetail, ProcessStatus, StepStatus } from '@/types';
 
 import { WfoProcessDetail } from './WfoProcessDetail';
 
@@ -89,13 +78,10 @@ export const WfoStartProcessPage = ({
     processName,
     isTask = false,
 }: WfoStartProcessPageProps) => {
-    const config = useGetOrchestratorConfig();
-    const usePydanticForms: boolean = config.activatePydanticForms ?? false;
     const t = useTranslations('processes.steps');
     const router = useRouter();
     const [hasError, setHasError] = useState<boolean>(false);
     const { theme } = useOrchestratorTheme();
-    const [form, setForm] = useState<UserInputForm>({});
     const { productId, subscriptionId } = router.query as StartProcessPageQuery;
 
     const {
@@ -114,8 +100,6 @@ export const WfoStartProcessPage = ({
             workflowName: processName,
         });
 
-    const [startProcess] = useStartProcessMutation();
-
     const startProcessPayload = useMemo(
         () =>
             getInitialProcessPayload({
@@ -125,8 +109,6 @@ export const WfoStartProcessPage = ({
         [productId, subscriptionId],
     );
 
-    const { stepUserInput, hasNext } = form;
-
     const { getStepHeaderStyle, stepListContentBoldTextStyle } =
         useWithOrchestratorTheme(getWorkflowStepsStyles);
 
@@ -145,76 +127,6 @@ export const WfoStartProcessPage = ({
         }
     }
 
-    const submit = useCallback(
-        (processInput: object[]) => {
-            const startProcessPromise = startProcess({
-                workflowName: processName,
-                userInputs: startProcessPayload
-                    ? [startProcessPayload, ...processInput]
-                    : [...processInput],
-            })
-                .unwrap()
-                .then(
-                    (process) => {
-                        if (process.id) {
-                            const basePath = isTask
-                                ? PATH_TASKS
-                                : PATH_WORKFLOWS;
-                            router.replace(`${basePath}/${process.id}`);
-                        }
-                    },
-                    // Reject handler
-                    (e) => {
-                        throw e;
-                    },
-                )
-                .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 {
-                        throw error;
-                    }
-                });
-
-            // 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 handlePromiseErrorWithCallback<EngineStatus>(
-                startProcessPromise,
-                HttpStatus.ServiceUnavailable,
-                (json) => {
-                    // TODO: Use the toastMessage hook to display an engine down error message
-                    console.error('engine down!!!', json);
-                    router.push(PATH_WORKFLOWS);
-                },
-            );
-        },
-        [startProcess, processName, startProcessPayload, isTask, router],
-    );
-
-    useEffect(() => {
-        if (processName && !usePydanticForms) {
-            const clientResultCallback = (json: FormNotCompleteResponse) => {
-                setForm({
-                    stepUserInput: json.form,
-                    hasNext: json.meta?.hasNext ?? false,
-                });
-            };
-            handlePromiseErrorWithCallback<FormNotCompleteResponse>(
-                submit([]),
-                HttpStatus.FormNotComplete,
-                clientResultCallback,
-            );
-            return () => {
-                setForm({});
-            };
-        }
-    }, [submit, processName, usePydanticForms]);
-
     const processDetail: Partial<ProcessDetail> = {
         lastStatus: ProcessStatus.CREATE,
         lastStep: StepStatus.FORM,
@@ -266,27 +178,13 @@ export const WfoStartProcessPage = ({
                     </EuiFlexItem>
                 </EuiFlexGroup>
                 <EuiHorizontalRule />
-                {(hasError && <WfoError />) ||
-                    (usePydanticForms && (
+                {(hasError && <WfoError />) || (
                         <WfoPydanticForm
                             processName={processName}
                             startProcessPayload={startProcessPayload}
                             isTask={isTask}
                         />
-                    )) ||
-                    (stepUserInput && (
-                        <UserInputFormWizard
-                            stepUserInput={stepUserInput}
-                            stepSubmit={submit}
-                            cancel={() =>
-                                router.push(
-                                    isTask ? PATH_TASKS : PATH_WORKFLOWS,
-                                )
-                            }
-                            hasNext={hasNext}
-                            isTask={isTask}
-                        />
-                    )) || <WfoLoading />}
+                    ) || <WfoLoading />}
             </EuiPanel>
         </WfoProcessDetail>
     );

package/src/rtk/endpoints/index.ts

@@ -17,8 +17,6 @@ export * from './subscriptionInUseByRelationsList';
 export * from './subscriptionList';
 export * from './subscriptionListSummary';
 export * from './forms';
-export * from './deprecated';
-export * from './formFields';
 export * from './fileUpload';
 export * from './search';
 export * from './availability';

package/src/types/index.ts

@@ -1,4 +1,3 @@
 export * from './types';
-export * from './deprecated';
 export * from './forms';
 export * from './search';

package/src/types/types.ts

@@ -595,7 +595,6 @@ export type OrchestratorConfig = {
     supportMenuItemUrl: string;
     enableAoStackStatus: boolean;
     aoStackStatusUrl: string;
-    activatePydanticForms: boolean;
 };
 
 export enum ColorModes {

package/src/components/WfoForms/AutoFieldLoader.tsx

@@ -1,118 +0,0 @@
-import { Context, GuaranteedProps } from 'uniforms';
-import { AutoField } from 'uniforms-unstyled';
-
-import {
-    AcceptField,
-    BoolField,
-    ConnectedSelectField,
-    ContactPersonNameField,
-    CustomerField,
-    DateField,
-    DividerField,
-    FileUploadField,
-    ImsNodeIdField,
-    ImsPortIdField,
-    IpNetworkField,
-    LabelField,
-    ListField,
-    LocationCodeField,
-    LongTextField,
-    NestField,
-    NumField,
-    OptGroupField,
-    RadioField,
-    SubscriptionField,
-    SubscriptionSummaryField,
-    SummaryField,
-    TextField,
-    TimestampField,
-    VlanField,
-} from './formFields';
-
-export function autoFieldFunction(
-    props: GuaranteedProps<unknown> & Record<string, unknown>,
-    uniforms: Context<Record<string, unknown>>,
-) {
-    const { allowedValues, checkboxes, fieldType, field } = props;
-    const { format } = field;
-
-    /*
-      Note, uniforms adds the fieldType property with one of the primitive types (Number, String..) based on the value of "type" in
-      node_modules/uniforms-bridge-json-schema/src/JSONSchemaBridge.ts. The only exception being dateFields where it matches on the
-      "format" field being "date-time" to populate fieldType with a Date constructor
-    */
-    switch (fieldType) {
-        case Number:
-            switch (format) {
-                case 'imsPortId': // Deprecated
-                    return ImsPortIdField;
-                case 'imsNodeId': // Deprecated
-                    return ImsNodeIdField;
-                case 'timestamp':
-                    return TimestampField; // Deprecated
-            }
-            break;
-        case Object:
-            switch (format) {
-                case 'optGroup':
-                    return OptGroupField;
-                case 'summary':
-                    return SummaryField;
-            }
-            break;
-        case String:
-            switch (format) {
-                case 'subscriptionId':
-                    return SubscriptionField;
-                case 'long':
-                    return LongTextField;
-                case 'label':
-                    return LabelField;
-                case 'divider':
-                    return DividerField;
-                case 'summary':
-                    return SummaryField;
-                case 'subscription':
-                    return SubscriptionSummaryField;
-                case 'customerId':
-                    return CustomerField;
-                case 'locationCode':
-                    return LocationCodeField;
-                case 'contactPersonName': // Deprecated
-                    return ContactPersonNameField;
-                case 'vlan': // Deprecated
-                    return VlanField;
-                case 'accept':
-                    return AcceptField;
-                case 'ipvanynetwork': // Deprecated
-                    return IpNetworkField;
-                case 'file': // Deprecated
-                    return FileUploadField;
-            }
-            break;
-    }
-
-    if (allowedValues && format !== 'accept') {
-        return checkboxes && fieldType !== Array
-            ? RadioField
-            : ConnectedSelectField;
-    } else {
-        switch (fieldType) {
-            case Array:
-                return ListField;
-            case Boolean:
-                return BoolField;
-            case Number:
-                return NumField;
-            case Object:
-                return NestField;
-            case String:
-                return TextField;
-            case Date:
-                // See the note at line above about how Date fields are matched on the "format" field instead of "type" like other fields
-                return DateField;
-        }
-    }
-
-    return AutoField.defaultComponentDetector(props, uniforms);
-}

package/src/components/WfoForms/AutoFields.tsx

@@ -1,49 +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 { ComponentType, createElement } from 'react';
-
-import { useForm } from 'uniforms';
-import { AutoField } from 'uniforms-unstyled';
-
-export type AutoFieldsProps = {
-    autoField?: ComponentType<{ className: string; name: string }>;
-    element?: ComponentType<object> | string;
-    fields?: string[];
-    omitFields?: string[];
-};
-
-export default function AutoFields({
-    autoField = AutoField,
-    element = 'section',
-    fields,
-    omitFields = [],
-    ...props
-}: AutoFieldsProps) {
-    const { schema } = useForm();
-
-    return createElement(
-        element,
-        { ...props },
-        (fields ?? schema.getSubfields())
-            .filter((field) => !omitFields.includes(field))
-            .map((field) =>
-                createElement(autoField, {
-                    key: field,
-                    name: field,
-                    className: 'form-input',
-                }),
-            ),
-    );
-}