@orchestrator-ui/orchestrator-ui-components 5.4.0 → 5.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@orchestrator-ui/orchestrator-ui-components",
-    "version": "5.4.0",
+    "version": "5.5.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.6.6",
+        "pydantic-forms": "^0.7.3",
         "react-diff-view": "^3.2.0",
         "react-draggable": "^4.4.6",
         "react-redux": "^9.1.2",

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

@@ -22,11 +22,12 @@ import { joinName, useField, useForm } from 'uniforms';
 import { EuiFormRow, EuiText } from '@elastic/eui';
 
 import { useWithOrchestratorTheme } from '@/hooks';
+import type { Option } from '@/types';
 
 import { ListField, ListFieldProps } from '../ListField';
 import { ListItemField } from '../ListItemField';
 import { ListSelectField } from '../ListSelectField';
-import { FieldProps, Option } from '../types';
+import { FieldProps } from '../types';
 import { getSelectFieldStyles } from './styles';
 
 export type SelectFieldProps = FieldProps<

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

@@ -25,9 +25,10 @@ import {
     useFreePortsByNodeSubscriptionIdAndSpeedQuery,
     useGetNodeSubscriptionOptionsQuery,
 } from '@/rtk/endpoints/formFields';
+import type { Option } from '@/types';
 
 import { getSelectFieldStyles } from '../SelectField/styles';
-import { FieldProps, Option } from '../types';
+import { FieldProps } from '../types';
 import { imsPortIdFieldStyling } from './ImsPortIdFieldStyling';
 import { ImsPort, NodeSubscriptionOption } from './types';
 

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

@@ -31,8 +31,9 @@ import {
 
 import { ipPrefixTableFieldStyling } from '@/components';
 import { useIpBlocksQuery, usePrefixFiltersQuery } from '@/rtk/endpoints/ipam';
+import type { Option } from '@/types';
 
-import { Option, prop } from '../types';
+import { prop } from '../types';
 import { IpBlock, IpPrefix, SortOption } from './types';
 import { ipamStates } from './utils';
 

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

@@ -21,8 +21,7 @@ import { EuiFlexItem } from '@elastic/eui';
 
 import { splitPrefixStyling } from '@/components';
 import { useFreeSubnetsQuery } from '@/rtk/endpoints/ipam';
-
-import { Option } from '../types';
+import type { Option } from '@/types';
 
 interface IProps {
     id: string;

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

@@ -35,9 +35,10 @@ import {
 
 import { useWithOrchestratorTheme } from '@/hooks';
 import { useGetSurfSubscriptionDropdownOptions } from '@/hooks/deprecated/useGetSurfSubcriptionDropdownOptions';
+import type { Option } from '@/types';
 
 import { getSelectFieldStyles } from '../SelectField/styles';
-import { FieldProps, Option } from '../types';
+import { FieldProps } from '../types';
 import { subscriptionFieldStyling } from './SubscriptionFieldStyling';
 
 declare module 'uniforms' {

package/src/components/WfoForms/formFields/types.ts

@@ -36,16 +36,6 @@ export interface ContactPerson {
     phone?: string;
 }
 
-export interface Option<Value = string> {
-    value: Value;
-    label: string;
-}
-
-export interface Option<Value = string> {
-    value: Value;
-    label: string;
-}
-
 export function prop<T, K extends keyof T>(obj: T, key: K): T[K] {
     return obj[key];
 }

package/src/components/WfoPydanticForm/RenderFormErrors.tsx

@@ -24,7 +24,7 @@ export const RenderFormErrors = () => {
     return (
         <em className="error backend-validation-metadata">
             {rootError && <div>{rootError.msg}</div>}
-            {otherErrors?.length &&
+            {otherErrors?.length >= 1 &&
                 t('inputFieldsHaveValidationErrors', {
                     nrOfValidationErrors: otherErrors.length,
                 })}

package/src/components/WfoPydanticForm/WfoPydanticForm.tsx

@@ -9,6 +9,7 @@ import type {
     PydanticFormLabelProvider,
 } from 'pydantic-forms';
 import {
+    Locale,
     PydanticForm,
     PydanticFormFieldFormat,
     PydanticFormFieldType,
@@ -28,10 +29,11 @@ import {
     WfoArrayField,
     WfoCheckbox,
     WfoDivider,
+    WfoDropdown,
     WfoInteger,
     WfoLabel,
+    WfoMultiCheckboxField,
     WfoObjectField,
-    WfoRadio,
     WfoSummary,
     WfoText,
     WfoTextArea,
@@ -155,16 +157,18 @@ export const useWfoPydanticFormConfig = () => {
                     },
                 },
                 {
-                    id: 'radio',
+                    id: 'dropdown',
                     ElementMatch: {
-                        Element: WfoRadio,
+                        Element: WfoDropdown,
                         isControlledElement: true,
                     },
                     matcher(field) {
+                        // We are looking for a single value from a set list of options.
+                        // We are not using a radio button component to maintain being able to deselect options
                         return (
                             field.type === PydanticFormFieldType.STRING &&
-                            field.options.length > 0 &&
-                            field.options.length <= 3
+                            Array.isArray(field.options) &&
+                            field.options.length > 0
                         );
                     },
                 },
@@ -179,6 +183,21 @@ export const useWfoPydanticFormConfig = () => {
                     },
                     validator: zodValidationPresets.integer,
                 },
+                {
+                    id: 'multicheckbox',
+                    ElementMatch: {
+                        Element: WfoMultiCheckboxField,
+                        isControlledElement: true,
+                    },
+                    matcher(field) {
+                        return (
+                            field.type === PydanticFormFieldType.ARRAY &&
+                            field.options?.length > 0 &&
+                            field.options?.length <= 5
+                        );
+                    },
+                    validator: zodValidationPresets.multiSelect,
+                },
                 ...currentMatchers
                     .filter((matcher) => matcher.id !== 'text')
                     .filter((matcher) => matcher.id !== 'array')
@@ -241,16 +260,19 @@ export const WfoPydanticForm = ({
         customTranslations,
     } = useWfoPydanticFormConfig();
 
-    const onSuccess = (_fieldValues: object, req: object) => {
-        const request = req as { response: StartProcessResponse };
-        const response = request ? request?.response : null;
-        if (response?.id) {
-            const pfBasePath = isTask ? PATH_TASKS : PATH_WORKFLOWS;
-            router.replace(`${pfBasePath}/${response.id}`);
-        }
-    };
+    const onSuccess = useCallback(
+        (_fieldValues: object, req: object) => {
+            const request = req as { response: StartProcessResponse };
+            const response = request ? request?.response : null;
+            if (response?.id) {
+                const pfBasePath = isTask ? PATH_TASKS : PATH_WORKFLOWS;
+                router.replace(`${pfBasePath}/${response.id}`);
+            }
+        },
+        [isTask, router],
+    );
 
-    const getPydanticFormProvider = () => {
+    const getPydanticFormProvider = useCallback(() => {
         const pydanticFormProvider: PydanticFormApiProvider = async ({
             requestBody = [],
             formKey,
@@ -294,12 +316,40 @@ export const WfoPydanticForm = ({
         };
 
         return pydanticFormProvider;
-    };
+    }, [startProcess, startProcessPayload]);
 
-    const handleCancel = () => {
+    const handleCancel = useCallback(() => {
         const pfBasePath = isTask ? PATH_TASKS : PATH_WORKFLOWS;
         router.replace(pfBasePath);
-    };
+    }, [isTask, router]);
+
+    const config = useMemo(() => {
+        const getLocale = () => {
+            if (router.locale) {
+                return router.locale as Locale;
+            }
+            return Locale.enGB; // Default to enGB if no locale is set
+        };
+
+        return {
+            apiProvider: getPydanticFormProvider(),
+            allowUntouchedSubmit: true,
+            footerRenderer: Footer,
+            headerRenderer: Header,
+            skipSuccessNotice: true,
+            componentMatcherExtender: wfoComponentMatcherExtender,
+            labelProvider: pydanticLabelProvider,
+            rowRenderer: Row,
+            customTranslations: customTranslations,
+            locale: getLocale(),
+        };
+    }, [
+        customTranslations,
+        getPydanticFormProvider,
+        pydanticLabelProvider,
+        router.locale,
+        wfoComponentMatcherExtender,
+    ]);
 
     return (
         <PydanticForm
@@ -307,17 +357,7 @@ export const WfoPydanticForm = ({
             onSuccess={onSuccess}
             onCancel={handleCancel}
             loadingComponent={<WfoLoading />}
-            config={{
-                apiProvider: getPydanticFormProvider(),
-                allowUntouchedSubmit: true,
-                footerRenderer: Footer,
-                headerRenderer: Header,
-                skipSuccessNotice: true,
-                componentMatcherExtender: wfoComponentMatcherExtender,
-                labelProvider: pydanticLabelProvider,
-                rowRenderer: Row,
-                customTranslations: customTranslations,
-            }}
+            config={config}
         />
     );
 };

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

@@ -4,6 +4,7 @@ import { useFieldArray } from 'react-hook-form';
 import {
     PydanticFormElementProps,
     RenderFields,
+    disableField,
     fieldToComponentMatcher,
     itemizeArrayItem,
     usePydanticFormContext,
@@ -11,9 +12,10 @@ import {
 
 import { EuiIcon } from '@elastic/eui';
 
-import { getWfoArrayFieldStyles } from '@/components';
 import { useOrchestratorTheme } from '@/hooks';
 
+import { getWfoArrayFieldStyles } from './styles';
+
 export const MinusButton = ({
     index,
     onRemove,
@@ -65,6 +67,7 @@ export const WfoArrayField = ({
     pydanticFormField,
 }: PydanticFormElementProps) => {
     const { config, rhf } = usePydanticFormContext();
+    const disabled = pydanticFormField.attributes?.disabled || false;
     const { control } = rhf;
     const { id: arrayName, arrayItem } = pydanticFormField;
     const { minItems, maxItems } = pydanticFormField.validations;
@@ -75,8 +78,8 @@ export const WfoArrayField = ({
         name: arrayName,
     });
 
-    const showMinus = !minItems || fields.length > minItems;
-    const showPlus = !maxItems || fields.length < maxItems;
+    const showMinus = (!minItems || fields.length > minItems) && !disabled;
+    const showPlus = (!maxItems || fields.length < maxItems) && !disabled;
 
     if (!arrayItem) return null;
 
@@ -86,7 +89,12 @@ export const WfoArrayField = ({
     );
 
     const renderField = (field: Record<'id', string>, index: number) => {
-        const arrayField = itemizeArrayItem(index, arrayItem, arrayName);
+        const itemizedField = itemizeArrayItem(index, arrayItem, arrayName);
+        // We have decided - for now - on the convention that all descendants of disabled fields will be disabled as well
+        // so we will not displaying any interactive elements inside a disabled element
+        const arrayItemField = disabled
+            ? disableField(itemizedField)
+            : itemizedField;
 
         return (
             <div key={field.id} css={fieldWrapper}>
@@ -94,7 +102,7 @@ export const WfoArrayField = ({
                     pydanticFormComponents={[
                         {
                             Element: component.Element,
-                            pydanticFormField: arrayField,
+                            pydanticFormField: arrayItemField,
                         },
                     ]}
                     extraTriggerFields={[arrayName]}

package/src/components/WfoPydanticForm/fields/WfoArrayField/index.ts

@@ -1,2 +1,2 @@
 export * from './WfoArrayField';
-export * from './arrayFieldStyles';
+export * from './styles';

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

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import type { PydanticFormControlledElement } from 'pydantic-forms';
+
+import { WfoReactSelect } from './WfoReactSelect';
+
+export const WfoDropdown: PydanticFormControlledElement = ({
+    onChange,
+    pydanticFormField,
+    value,
+}) => {
+    const dropDownOptions = pydanticFormField.options.map((option) => ({
+        value: option.value,
+        label: option.label,
+    }));
+
+    return (
+        <WfoReactSelect
+            options={dropDownOptions}
+            onChange={onChange}
+            id={pydanticFormField.id}
+            value={value}
+        />
+    );
+};

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

@@ -0,0 +1,68 @@
+import React, { useEffect, useState } from 'react';
+
+import { PydanticFormControlledElement } from 'pydantic-forms';
+
+import { EuiCheckboxGroup } from '@elastic/eui';
+
+type idMap = Record<string, boolean>;
+
+export const WfoMultiCheckboxField: PydanticFormControlledElement = ({
+    pydanticFormField,
+    onChange,
+    value,
+}) => {
+    // See: https://eui.elastic.co/docs/components/forms/selection/checkboxes-and-radios/#checkbox
+
+    useEffect(() => {
+        // Setting the ids is handled here to make sure the field repopulates when navigating back from another step
+        const getInitialMap = () => {
+            const initialIdMap: idMap = (value || []).reduce(
+                (idMap: idMap, id: string) => {
+                    idMap[id] = true;
+                    return idMap;
+                },
+                {} as idMap,
+            );
+            return initialIdMap;
+        };
+
+        setCheckboxIdToSelectedMap(getInitialMap());
+    }, [value]);
+
+    const [checkboxIdToSelectedMap, setCheckboxIdToSelectedMap] = useState<
+        Record<string, boolean>
+    >({});
+
+    const { options, id } = pydanticFormField;
+
+    const checkboxes = options.map((option, index) => ({
+        label: option.label,
+        id: option.value,
+        'data-test-id': `${id}-${index}`,
+    }));
+
+    const handleCheckboxChange = (optionId: string) => {
+        const newCheckboxIdToSelectedMap = {
+            ...checkboxIdToSelectedMap,
+            ...{
+                [optionId]: !checkboxIdToSelectedMap[optionId],
+            },
+        };
+
+        const selectedIds = Object.keys(newCheckboxIdToSelectedMap).filter(
+            (key) => newCheckboxIdToSelectedMap[key],
+        );
+
+        onChange(selectedIds);
+        setCheckboxIdToSelectedMap(newCheckboxIdToSelectedMap);
+    };
+
+    return (
+        <EuiCheckboxGroup
+            options={checkboxes}
+            idToSelectedMap={checkboxIdToSelectedMap}
+            onChange={(id) => handleCheckboxChange(id)}
+            data-testid={id}
+        />
+    );
+};

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

@@ -3,24 +3,35 @@ import React from 'react';
 import {
     PydanticFormElementProps,
     RenderFields,
+    disableField,
     getPydanticFormComponents,
     usePydanticFormContext,
 } from 'pydantic-forms';
 
 import { EuiFlexGroup } from '@elastic/eui';
 
-import { getWfoObjectFieldStyles } from './getWfoObjectFieldStyles';
+import { getWfoObjectFieldStyles } from './styles';
 
 export const WfoObjectField = ({
     pydanticFormField,
 }: PydanticFormElementProps) => {
     const { config } = usePydanticFormContext();
+    const disabled = pydanticFormField.attributes?.disabled || false;
     const { wfoObjectFieldStyles } = getWfoObjectFieldStyles();
     const components = getPydanticFormComponents(
         pydanticFormField.properties || {},
         config?.componentMatcherExtender,
     );
 
+    // We have decided - for now - on the convention that all descendants of disabled fields will be disabled as well
+    // so we will not displaying any interactive elements inside a disabled element
+    if (disabled) {
+        components.forEach((component) => {
+            component.pydanticFormField = disableField(
+                component.pydanticFormField,
+            );
+        });
+    }
     return (
         <EuiFlexGroup
             data-testid={pydanticFormField.id}

package/src/components/WfoPydanticForm/fields/WfoObjectField/index.ts

@@ -1,2 +1,2 @@
 export * from './WfoObjectField';
-export * from './getWfoObjectFieldStyles';
+export * from './styles';

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

@@ -0,0 +1,100 @@
+import React from 'react';
+import ReactSelect, { components } from 'react-select';
+import type { GroupBase, InputProps } from 'react-select';
+
+import { EuiButtonIcon } from '@elastic/eui';
+
+import { WfoError } from '@/components';
+import { useWithOrchestratorTheme } from '@/hooks';
+import type { Option } from '@/types';
+
+import { getWfoReactSelectStyles } from './styles';
+
+interface WfoReactSelectProps<ValueType> {
+    options: Option<ValueType>[];
+    id: string;
+    onChange: (value: ValueType | undefined) => void;
+    value: ValueType;
+    disabled?: boolean;
+    isLoading?: boolean;
+    placeholder?: string;
+    hasError?: boolean;
+    refetch?: () => void;
+}
+
+export const WfoReactSelect = <ValueType,>({
+    options,
+    id,
+    onChange,
+    value,
+    disabled = false,
+    isLoading = false,
+    placeholder = 'Select an option',
+    hasError = false,
+    refetch,
+}: WfoReactSelectProps<ValueType>) => {
+    const selectedValue = options.find(
+        (option: Option<ValueType>) => option.value === value,
+    );
+
+    // React select allows callbacks to supply style for innercomponents: https://react-select.com/styles#inner-components
+    const {
+        reactSelectInnerComponentStyles,
+        containerStyle,
+        refreshButtonStyle,
+        reactSelectStyle,
+    } = useWithOrchestratorTheme(getWfoReactSelectStyles);
+
+    if (hasError) {
+        return <WfoError />;
+    }
+
+    // Way to add data-testid based on https://react-select.com/components
+    const Input = ({
+        ...props
+    }: InputProps<Option<ValueType>, false, GroupBase<Option<ValueType>>>) => {
+        return (
+            <components.Input {...props} data-testid={`${id}.search-input`} />
+        );
+    };
+
+    return (
+        <div css={containerStyle}>
+            {refetch && (
+                <EuiButtonIcon
+                    className="reload-subscriptions-icon-button"
+                    css={refreshButtonStyle}
+                    aria-label={`refetch-${id}`}
+                    id={`refresh-icon-${id}`}
+                    iconType="refresh"
+                    iconSize="l"
+                    disabled={disabled}
+                    onClick={() => {
+                        refetch();
+                    }}
+                    data-testid={`${id}-refresh-button`}
+                />
+            )}
+            <ReactSelect<Option<ValueType>, false>
+                id={id}
+                inputId={`${id}.search`}
+                onChange={(option) => {
+                    const selectedValue = option?.value;
+                    onChange(selectedValue);
+                }}
+                css={reactSelectStyle}
+                isLoading={isLoading}
+                styles={reactSelectInnerComponentStyles}
+                options={options}
+                value={selectedValue || null}
+                isSearchable={true}
+                isClearable={true}
+                placeholder={placeholder}
+                isDisabled={disabled}
+                components={{
+                    Input,
+                }}
+            />
+        </div>
+    );
+};

package/src/components/WfoPydanticForm/fields/WfoReactSelect/index.ts

@@ -0,0 +1,2 @@
+export * from './WfoReactSelect';
+export * from './styles';

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

@@ -0,0 +1,70 @@
+import { css } from '@emotion/react';
+
+import type { WfoTheme } from '@/hooks';
+
+export const getWfoReactSelectStyles = (wfoTheme: WfoTheme) => {
+    const { theme } = wfoTheme;
+
+    const reactSelectInnerComponentStyles = {
+        option: (
+            baseStyles: object,
+            state: { isSelected: boolean; isDisabled: boolean },
+        ) => ({
+            ...baseStyles,
+            borderBottom: theme.border.thin,
+            borderColor: theme.colors.lightShade,
+            backgroundColor: theme.colors.lightestShade,
+            color: state.isSelected
+                ? theme.colors.primaryText
+                : theme.colors.text,
+        }),
+        control: (baseStyles: object, state: { isFocused: boolean }) => {
+            return {
+                ...baseStyles,
+                backgroundColor: state.isFocused
+                    ? theme.colors.emptyShade
+                    : theme.colors.lightestShade,
+                color: theme.colors.text,
+                border: `1px solid ${theme.colors.lightShade}`,
+            };
+        },
+        input: (baseStyles: object) => ({
+            ...baseStyles,
+            color: theme.colors.text,
+        }),
+        singleValue: (baseStyles: object, state: { isDisabled: boolean }) => {
+            const opacity = state.isDisabled ? 0.3 : 1;
+            const transition = 'opacity 300ms';
+            return {
+                ...baseStyles,
+                opacity,
+                transition,
+                color: theme.colors.text,
+            };
+        },
+        menu: (baseStyles: object) => ({
+            ...baseStyles,
+            backgroundColor: theme.colors.lightestShade,
+        }),
+    };
+
+    const containerStyle = css({
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+    });
+
+    const reactSelectStyle = css({
+        width: '100%',
+    });
+    const refreshButtonStyle = css({
+        marginRight: theme.base / 2,
+        cursor: 'pointer',
+    });
+    return {
+        reactSelectInnerComponentStyles,
+        refreshButtonStyle,
+        containerStyle,
+        reactSelectStyle,
+    };
+};

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

@@ -8,3 +8,6 @@ export * from './WfoObjectField';
 export * from './WfoArrayField';
 export * from './WfoRadio';
 export * from './WfoInteger';
+export * from './WfoDropdown';
+export * from './WfoReactSelect';
+export * from './WfoMultiCheckboxField';

package/src/configuration/version.ts

@@ -1 +1 @@
-export const ORCHESTRATOR_UI_LIBRARY_VERSION = '5.4.0';
+export const ORCHESTRATOR_UI_LIBRARY_VERSION = '5.5.1';

package/src/messages/en-GB.json

@@ -139,7 +139,8 @@
                 "invalidFiletype": "Invalid filetype!",
                 "errorUploading": "Error uploading file!",
                 "fileToBig": "File to large. Maximum file size: {fileSizeLimit}",
-                "initialPromptText": "Select or drag and drop a file"
+                "initialPromptText": "Select or drag and drop a file",
+                "supportedFileTypes": "Supported file types: pdf"
             }
         }
     },