@orchestrator-ui/orchestrator-ui-components 7.4.1 → 7.5.1

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

@@ -11,49 +11,35 @@ import type { WfoThemeHelpers } from '@/hooks';
 import { useWithOrchestratorTheme } from '@/hooks';
 
 const getFormFieldsBaseStyle = ({ theme }: WfoThemeHelpers) => {
-    const formFieldBaseStyle = css({
-        backgroundColor: theme.colors.backgroundBaseSubdued,
-        color: theme.colors.textParagraph,
-        '&:focus': {
-            backgroundColor: theme.colors.backgroundBaseNeutral,
-        },
-    });
-
-    return {
-        formFieldBaseStyle,
-    };
+  const formFieldBaseStyle = css({
+    backgroundColor: theme.colors.backgroundBaseSubdued,
+    color: theme.colors.textParagraph,
+    '&:focus': {
+      backgroundColor: theme.colors.backgroundBaseNeutral,
+    },
+  });
+
+  return {
+    formFieldBaseStyle,
+  };
 };
 
-export const WfoInteger: PydanticFormControlledElement = ({
-    pydanticFormField,
-    onChange,
-    value,
-    disabled,
-}) => {
-    const { formFieldBaseStyle } = useWithOrchestratorTheme(
-        getFormFieldsBaseStyle,
-    );
-
-    // If the field is part of an array the value is passed in as an object with the field name as key
-    // this is imposed by react-hook-form. We try to detect this and extract the actual value
-    const fieldName = getFormFieldIdWithPath(pydanticFormField.id);
-    const fieldValue =
-        _.isObject(value) && _.has(value, fieldName)
-            ? _.get(value, fieldName)
-            : value;
-
-    return (
-        <EuiFieldNumber
-            data-testid={pydanticFormField.id}
-            css={formFieldBaseStyle}
-            name={pydanticFormField.id}
-            onChange={(event) =>
-                onChange(
-                    event.target.value ? parseInt(event.target.value) : null,
-                )
-            }
-            value={fieldValue}
-            disabled={disabled}
-        />
-    );
+export const WfoInteger: PydanticFormControlledElement = ({ pydanticFormField, onChange, value, disabled }) => {
+  const { formFieldBaseStyle } = useWithOrchestratorTheme(getFormFieldsBaseStyle);
+
+  // If the field is part of an array the value is passed in as an object with the field name as key
+  // this is imposed by react-hook-form. We try to detect this and extract the actual value
+  const fieldName = getFormFieldIdWithPath(pydanticFormField.id);
+  const fieldValue = _.isObject(value) && _.has(value, fieldName) ? _.get(value, fieldName) : value;
+
+  return (
+    <EuiFieldNumber
+      data-testid={pydanticFormField.id}
+      css={formFieldBaseStyle}
+      name={pydanticFormField.id}
+      onChange={(event) => onChange(event.target.value ? parseInt(event.target.value) : null)}
+      value={fieldValue}
+      disabled={disabled}
+    />
+  );
 };

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

@@ -5,19 +5,19 @@ import { PydanticFormElement } from 'pydantic-forms';
 import { useOrchestratorTheme } from '@/hooks';
 
 export const WfoLabel: PydanticFormElement = ({ pydanticFormField }) => {
-    const { theme } = useOrchestratorTheme();
+  const { theme } = useOrchestratorTheme();
 
-    return (
-        <div data-testid={pydanticFormField.id}>
-            <label
-                css={{
-                    color: theme.colors.textParagraph,
-                    display: 'block',
-                }}
-                id={pydanticFormField.id}
-            >
-                {pydanticFormField.default || pydanticFormField.title}
-            </label>
-        </div>
-    );
+  return (
+    <div data-testid={pydanticFormField.id}>
+      <label
+        css={{
+          color: theme.colors.textParagraph,
+          display: 'block',
+        }}
+        id={pydanticFormField.id}
+      >
+        {pydanticFormField.default || pydanticFormField.title}
+      </label>
+    </div>
+  );
 };

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

@@ -6,63 +6,52 @@ 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;
-        };
+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]);
+    setCheckboxIdToSelectedMap(getInitialMap());
+  }, [value]);
 
-    const [checkboxIdToSelectedMap, setCheckboxIdToSelectedMap] = useState<
-        Record<string, boolean>
-    >({});
+  const [checkboxIdToSelectedMap, setCheckboxIdToSelectedMap] = useState<Record<string, boolean>>({});
 
-    const { options, id } = pydanticFormField;
+  const { options, id } = pydanticFormField;
 
-    const checkboxes = options?.map((option, index) => ({
-        label: option.label,
-        id: option.value,
-        'data-test-id': `${id}-${index}`,
-    }));
+  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 handleCheckboxChange = (optionId: string) => {
+    const newCheckboxIdToSelectedMap = {
+      ...checkboxIdToSelectedMap,
+      ...{
+        [optionId]: !checkboxIdToSelectedMap[optionId],
+      },
+    };
 
-        const selectedIds = Object.keys(newCheckboxIdToSelectedMap).filter(
-            (key) => newCheckboxIdToSelectedMap[key],
-        );
+    const selectedIds = Object.keys(newCheckboxIdToSelectedMap).filter((key) => newCheckboxIdToSelectedMap[key]);
 
-        onChange(selectedIds);
-        setCheckboxIdToSelectedMap(newCheckboxIdToSelectedMap);
-    };
+    onChange(selectedIds);
+    setCheckboxIdToSelectedMap(newCheckboxIdToSelectedMap);
+  };
 
-    return (
-        <EuiCheckboxGroup
-            options={checkboxes || []}
-            idToSelectedMap={checkboxIdToSelectedMap}
-            onChange={(id) => handleCheckboxChange(id)}
-            data-testid={id}
-        />
-    );
+  return (
+    <EuiCheckboxGroup
+      options={checkboxes || []}
+      idToSelectedMap={checkboxIdToSelectedMap}
+      onChange={(id) => handleCheckboxChange(id)}
+      data-testid={id}
+    />
+  );
 };

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

@@ -1,46 +1,33 @@
 import React from 'react';
 
 import {
-    PydanticFormElementProps,
-    RenderFields,
-    disableField,
-    getPydanticFormComponents,
-    useGetConfig,
+  PydanticFormElementProps,
+  RenderFields,
+  disableField,
+  getPydanticFormComponents,
+  useGetConfig,
 } from 'pydantic-forms';
 
 import { EuiFlexGroup } from '@elastic/eui';
 
 import { getWfoObjectFieldStyles } from './styles';
 
-export const WfoObjectField = ({
-    pydanticFormField,
-}: PydanticFormElementProps) => {
-    const config = useGetConfig();
-    const disabled = pydanticFormField.attributes?.disabled || false;
-    const { wfoObjectFieldStyles } = getWfoObjectFieldStyles();
-    const components = getPydanticFormComponents(
-        pydanticFormField.properties || {},
-        config?.componentMatcherExtender,
-    );
+export const WfoObjectField = ({ pydanticFormField }: PydanticFormElementProps) => {
+  const config = useGetConfig();
+  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}
-            css={wfoObjectFieldStyles}
-        >
-            <RenderFields
-                pydanticFormComponents={components}
-                idPrefix={pydanticFormField.id}
-            />
-        </EuiFlexGroup>
-    );
+  // 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} css={wfoObjectFieldStyles}>
+      <RenderFields pydanticFormComponents={components} idPrefix={pydanticFormField.id} />
+    </EuiFlexGroup>
+  );
 };

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

@@ -1,13 +1,13 @@
 import { css } from '@emotion/react';
 
 export const getWfoObjectFieldStyles = () => {
-    const wfoObjectFieldStyles = css({
-        width: '100%',
-        '& > div': {
-            width: '100%',
-        },
-    });
-    return {
-        wfoObjectFieldStyles,
-    };
+  const wfoObjectFieldStyles = css({
+    width: '100%',
+    '& > div': {
+      width: '100%',
+    },
+  });
+  return {
+    wfoObjectFieldStyles,
+  };
 };

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

@@ -4,25 +4,20 @@ import type { PydanticFormControlledElement } from 'pydantic-forms';
 
 import { EuiRadioGroup } from '@elastic/eui';
 
-export const WfoRadio: PydanticFormControlledElement = ({
-    pydanticFormField,
-    onChange,
-    value,
-    disabled,
-}) => {
-    const radioOptions = pydanticFormField.options?.map((option) => ({
-        id: option.value,
-        label: option.label,
-    }));
+export const WfoRadio: PydanticFormControlledElement = ({ pydanticFormField, onChange, value, disabled }) => {
+  const radioOptions = pydanticFormField.options?.map((option) => ({
+    id: option.value,
+    label: option.label,
+  }));
 
-    return (
-        <EuiRadioGroup
-            data-testid={pydanticFormField.id}
-            options={radioOptions || []}
-            idSelected={value}
-            onChange={(id) => onChange(id)}
-            name={pydanticFormField.id}
-            disabled={disabled}
-        />
-    );
+  return (
+    <EuiRadioGroup
+      data-testid={pydanticFormField.id}
+      options={radioOptions || []}
+      idSelected={value}
+      onChange={(id) => onChange(id)}
+      name={pydanticFormField.id}
+      disabled={disabled}
+    />
+  );
 };

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

@@ -11,111 +11,98 @@ import type { Option } from '@/types';
 import { getWfoReactSelectStyles } from './styles';
 
 interface WfoReactSelectProps<ValueType> {
-    options: Option<ValueType>[];
-    id: string;
-    onChange: (value: ValueType | undefined | null) => void;
-    value: ValueType;
-    disabled?: boolean;
-    isLoading?: boolean;
-    placeholder?: string;
-    hasError?: boolean;
-    refetch?: () => void;
+  options: Option<ValueType>[];
+  id: string;
+  onChange: (value: ValueType | undefined | null) => 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,
+  options,
+  id,
+  onChange,
+  value,
+  disabled = false,
+  isLoading = false,
+  placeholder = 'Select an option',
+  hasError = false,
+  refetch,
 }: WfoReactSelectProps<ValueType>) => {
-    const initialValue = options.find(
-        (option: Option<ValueType>) => option.value === value,
-    );
+  const initialValue = options.find((option: Option<ValueType>) => option.value === value);
 
-    const [selectedValue, setSelectedValue] =
-        useState<Option<ValueType> | null>(initialValue || null);
+  const [selectedValue, setSelectedValue] = useState<Option<ValueType> | null>(initialValue || null);
 
-    useEffect(() => {
-        const preSelectedValue = options.find(
-            (option: Option<ValueType>) => option.value === value,
-        );
-        if (preSelectedValue !== selectedValue) {
-            setSelectedValue(preSelectedValue || null);
-        }
-    }, [options, selectedValue, value]);
+  useEffect(() => {
+    const preSelectedValue = options.find((option: Option<ValueType>) => option.value === value);
+    if (preSelectedValue !== selectedValue) {
+      setSelectedValue(preSelectedValue || null);
+    }
+  }, [options, selectedValue, value]);
 
-    // React select allows callbacks to supply style for innercomponents: https://react-select.com/styles#inner-components
-    const {
-        reactSelectInnerComponentStyles,
-        containerStyle,
-        refreshButtonStyle,
-        reactSelectStyle,
-    } = useWithOrchestratorTheme(getWfoReactSelectStyles);
+  // 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 />;
-    }
+  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`} />
-        );
-    };
+  // 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) => {
-                    // By default reactSelect reverts to the initial option when cleared.
-                    // This is to make sure we can also deselect the value after it is
-                    // initialized from error state that sets it to the latest value.
-                    if (option === null) {
-                        setSelectedValue(null);
-                        onChange(null);
-                    } else {
-                        const selectedValue = option?.value;
-                        setSelectedValue(option);
-                        onChange(selectedValue);
-                    }
-                }}
-                css={reactSelectStyle}
-                isLoading={isLoading}
-                styles={reactSelectInnerComponentStyles}
-                options={options}
-                value={selectedValue || null}
-                isSearchable={true}
-                isClearable={true}
-                placeholder={placeholder}
-                isDisabled={disabled}
-                components={{
-                    Input,
-                }}
-            />
-        </div>
-    );
+  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) => {
+          // By default reactSelect reverts to the initial option when cleared.
+          // This is to make sure we can also deselect the value after it is
+          // initialized from error state that sets it to the latest value.
+          if (option === null) {
+            setSelectedValue(null);
+            onChange(null);
+          } else {
+            const selectedValue = option?.value;
+            setSelectedValue(option);
+            onChange(selectedValue);
+          }
+        }}
+        css={reactSelectStyle}
+        isLoading={isLoading}
+        styles={reactSelectInnerComponentStyles}
+        options={options}
+        value={selectedValue || null}
+        isSearchable={true}
+        isClearable={true}
+        placeholder={placeholder}
+        isDisabled={disabled}
+        components={{
+          Input,
+        }}
+      />
+    </div>
+  );
 };