@orchestrator-ui/orchestrator-ui-components 4.0.1 → 4.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@orchestrator-ui/orchestrator-ui-components",
-    "version": "4.0.1",
+    "version": "4.1.1",
     "license": "Apache-2.0",
     "description": "Library of UI Components used to display the workflow orchestrator frontend",
     "author": {
@@ -48,7 +48,7 @@
         "next-query-params": "^5.0.0",
         "object-hash": "^3.0.0",
         "prism-themes": "^1.9.0",
-        "pydantic-forms": "^0.1.2",
+        "pydantic-forms": "^0.1.5",
         "react-diff-view": "^3.2.0",
         "react-draggable": "^4.4.6",
         "react-redux": "^9.1.2",

package/src/components/WfoForms/formFields/SelectField/SelectField.tsx

@@ -101,7 +101,9 @@ export function UnconnectedSelectField({
         if (selectedValue && selectedValue.value !== 'undefined') {
             onChange(selectedValue.value);
         }
-    }, [onChange, selectedValue]);
+        // Adding the missing dependencies to the dependency array leads to an infinite loop
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
 
     if (fieldType === Array) {
         // Avoid circular import with our own ListSelectField (instead of recursively trying to use SelectField)

package/src/components/WfoForms/formFields/deprecated/VlanField.tsx

@@ -165,7 +165,9 @@ function Vlan({
         ) {
             onChange('');
         }
-    }, [onChange, subscriptionId, isFetched, portIsTagged, value, disabled]);
+        // Adding the missing dependencies to the dependency array leads to an infinite loop
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [onChange, subscriptionId, isFetched, portIsTagged]);
 
     const [usedVlansInIms, setUsedVlansInIms] = useState<VlanRange[]>([]);
     const [missingInIms, setMissingInIms] = useState(false);

package/src/components/WfoPydanticForm/Footer.tsx

@@ -15,7 +15,7 @@ import { WfoPlayFill } from '@/icons';
 
 export const Footer = () => {
     const { theme } = useOrchestratorTheme();
-    const t = useTranslations('pydanticForms.userInputForm');
+    const t = useTranslations();
     const { rhf, onCancel, allowUntouchedSubmit, isLoading } =
         usePydanticFormContext();
 

package/src/components/WfoPydanticForm/WfoPydanticForm.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { AbstractIntlMessages, useMessages } from 'next-intl';
+import { AbstractIntlMessages, useMessages, useTranslations } from 'next-intl';
 import { useRouter } from 'next/router';
 import {
     PydanticForm,
@@ -8,6 +8,7 @@ import {
     PydanticFormFieldType,
 } from 'pydantic-forms';
 import type {
+    ComponentMatcher,
     PydanticComponentMatcher,
     PydanticFormApiProvider,
     PydanticFormLabelProvider,
@@ -19,6 +20,7 @@ import { PATH_TASKS, PATH_WORKFLOWS, WfoLoading } from '@/components';
 import { StartWorkflowPayload } from '@/pages/processes/WfoStartProcessPage';
 import { HttpStatus } from '@/rtk';
 import { useStartProcessMutation } from '@/rtk/endpoints/forms';
+import { useAppSelector } from '@/rtk/hooks';
 
 import { Footer } from './Footer';
 import { Row } from './Row';
@@ -41,6 +43,10 @@ export const WfoPydanticForm = ({
 }: WfoPydanticFormProps) => {
     const [startProcess] = useStartProcessMutation();
     const router = useRouter();
+    const t = useTranslations('pydanticForms.userInputForm');
+    const componentMatcher = useAppSelector(
+        (state) => state.pydanticForm?.componentMatcher,
+    );
 
     const translationMessages: AbstractIntlMessages = useMessages();
     const formTranslations =
@@ -106,10 +112,19 @@ export const WfoPydanticForm = ({
         return pydanticFormProvider;
     };
 
-    const componentMatcher = (
-        currentMatchers: PydanticComponentMatcher[],
-    ): PydanticComponentMatcher[] => {
-        return [
+    const pydanticLabelProvider: PydanticFormLabelProvider = async () => {
+        return new Promise((resolve) => {
+            resolve({
+                labels: {
+                    ...(formTranslations as object),
+                },
+                data: {},
+            });
+        });
+    };
+
+    const wfoComponentMatcher: ComponentMatcher = (currentMatchers) => {
+        const wfoMatchers: PydanticComponentMatcher[] = [
             {
                 id: 'textarea',
                 ElementMatch: {
@@ -125,17 +140,8 @@ export const WfoPydanticForm = ({
             },
             ...currentMatchers,
         ];
-    };
 
-    const pydanticLabelProvider: PydanticFormLabelProvider = async () => {
-        return new Promise((resolve) => {
-            resolve({
-                labels: {
-                    ...(formTranslations as object),
-                },
-                data: {},
-            });
-        });
+        return componentMatcher ? componentMatcher(wfoMatchers) : wfoMatchers;
     };
 
     return (
@@ -149,9 +155,13 @@ export const WfoPydanticForm = ({
                 allowUntouchedSubmit: true,
                 footerRenderer: Footer,
                 skipSuccessNotice: true,
-                componentMatcher: componentMatcher,
+                componentMatcher: wfoComponentMatcher,
                 labelProvider: pydanticLabelProvider,
                 rowRenderer: Row,
+                customTranslations: {
+                    cancel: t('cancel'),
+                    startWorkflow: t('startWorkflow'),
+                },
             }}
         />
     );

package/src/components/WfoWorkflowSteps/index.ts

@@ -3,3 +3,4 @@ export * from './WfoStepList';
 export * from './WfoStepStatusIcon';
 export * from './WfoWorkflowStepList';
 export * from './stepListUtils';
+export * from './styles';

package/src/components/index.ts

@@ -35,3 +35,4 @@ export * from './WfoRadioDropdown';
 export * from './WfoInlineNoteEdit';
 export * from './WfoTableCodeBlock';
 export * from './WfoInlineEdit';
+export * from './WfoPydanticForm';

package/src/configuration/version.ts

@@ -1 +1 @@
-export const ORCHESTRATOR_UI_LIBRARY_VERSION = '4.0.1';
+export const ORCHESTRATOR_UI_LIBRARY_VERSION = '4.1.1';

package/src/pages/processes/index.ts

@@ -2,3 +2,4 @@ export * from './WfoProcessListSubscriptionsCell';
 export * from './WfoProcessDetailPage';
 export * from './WfoStartProcessPage';
 export * from './WfoProductInformationWithLink';
+export * from './WfoProcessDetail';

package/src/rtk/slices/pydanticForm.ts

@@ -0,0 +1,18 @@
+import type { ComponentMatcher } from 'pydantic-forms';
+
+import { Slice, createSlice } from '@reduxjs/toolkit';
+
+export type PydanticForm = {
+    componentMatcher?: ComponentMatcher;
+};
+
+type PydanticFormComponentMatcherSlice = Slice<PydanticForm>;
+
+export const getPydanticFormSlice = (
+    pydanticForm: PydanticForm,
+): PydanticFormComponentMatcherSlice =>
+    createSlice({
+        name: 'pydanticForm',
+        initialState: pydanticForm,
+        reducers: {},
+    });

package/src/rtk/store.ts

@@ -8,6 +8,7 @@ import {
     OrchestratorComponentOverride,
     getOrchestratorComponentOverrideSlice,
 } from '@/rtk/slices/orchestratorComponentOverride';
+import { PydanticForm, getPydanticFormSlice } from '@/rtk/slices/pydanticForm';
 import type { OrchestratorConfig } from '@/types';
 
 import { orchestratorApi } from './api';
@@ -22,23 +23,29 @@ export type RootState = {
     toastMessages: ReturnType<typeof toastMessagesReducer>;
     orchestratorConfig: OrchestratorConfig;
     orchestratorComponentOverride?: OrchestratorComponentOverride;
+    pydanticForm?: PydanticForm;
     customApis: CustomApiConfig[];
 };
 
 export type InitialOrchestratorStoreConfig = Pick<
     RootState,
-    'orchestratorConfig' | 'customApis' | 'orchestratorComponentOverride'
+    | 'orchestratorConfig'
+    | 'customApis'
+    | 'orchestratorComponentOverride'
+    | 'pydanticForm'
 >;
 
 export const getOrchestratorStore = ({
     orchestratorConfig,
     orchestratorComponentOverride = {},
+    pydanticForm = {},
     customApis,
 }: InitialOrchestratorStoreConfig): EnhancedStore<RootState> => {
     const configSlice = getOrchestratorConfigSlice(orchestratorConfig);
     const orchestratorComponentOverrideSlice =
         getOrchestratorComponentOverrideSlice(orchestratorComponentOverride);
     const customApisSlice = getCustomApiSlice(customApis);
+    const componentMatcherSlice = getPydanticFormSlice(pydanticForm);
 
     const orchestratorStore = configureStore({
         reducer: {
@@ -48,6 +55,7 @@ export const getOrchestratorStore = ({
             orchestratorComponentOverride:
                 orchestratorComponentOverrideSlice.reducer,
             customApis: customApisSlice?.reducer,
+            pydanticForm: componentMatcherSlice?.reducer,
         },
         middleware: (getDefaultMiddleware) =>
             getDefaultMiddleware({

package/src/rtk/storeProvider.tsx

@@ -2,6 +2,8 @@ import React, { useState } from 'react';
 import type { ReactNode } from 'react';
 import { Provider } from 'react-redux';
 
+import type { ComponentMatcher } from 'pydantic-forms';
+
 import { emptyOrchestratorConfig } from '@/contexts';
 import { CustomApiConfig } from '@/rtk/slices/customApis';
 import { OrchestratorComponentOverride } from '@/rtk/slices/orchestratorComponentOverride';
@@ -12,6 +14,7 @@ import { getOrchestratorStore } from './store';
 export type StoreProviderProps = {
     initialOrchestratorConfig: OrchestratorConfig | null;
     orchestratorComponentOverride?: OrchestratorComponentOverride;
+    componentMatcher?: ComponentMatcher;
     customApis?: CustomApiConfig[];
     children: ReactNode;
 };
@@ -19,6 +22,7 @@ export type StoreProviderProps = {
 export const StoreProvider = ({
     initialOrchestratorConfig,
     orchestratorComponentOverride,
+    componentMatcher,
     customApis = [],
     children,
 }: StoreProviderProps) => {
@@ -26,6 +30,9 @@ export const StoreProvider = ({
         orchestratorConfig:
             initialOrchestratorConfig ?? emptyOrchestratorConfig,
         orchestratorComponentOverride,
+        pydanticForm: {
+            componentMatcher: componentMatcher || undefined,
+        },
         customApis,
     });
     const [orchestratorStore] = useState(store);