@orchestrator-ui/orchestrator-ui-components 7.4.0 → 7.5.0

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

@@ -5,93 +5,76 @@ import { css } from '@emotion/react';
 import type { WfoThemeHelpers } from '@/hooks';
 
 export const getWfoReactSelectStyles = (wfoTheme: WfoThemeHelpers) => {
-    const { theme } = wfoTheme;
+  const { theme } = wfoTheme;
 
-    const reactSelectInnerComponentStyles = {
-        option: (
-            baseStyles: object,
-            state: { isSelected: boolean; isDisabled: boolean },
-        ) => ({
-            ...baseStyles,
-            borderBottom: theme.border.thin,
-            borderColor: theme.colors.borderBaseSubdued,
-            backgroundColor: theme.colors.backgroundBaseSubdued,
-            color: state.isSelected
-                ? theme.colors.textPrimary
-                : theme.colors.textParagraph,
-            '&:active': {
-                backgroundColor: theme.colors.backgroundLightPrimary,
-            },
-        }),
-        control: (baseStyles: object, state: { isFocused: boolean }) => {
-            return {
-                ...baseStyles,
-                backgroundColor: state.isFocused
-                    ? theme.colors.backgroundBaseNeutral
-                    : theme.colors.backgroundBaseSubdued,
-                color: theme.colors.textParagraph,
-                border: `1px solid ${theme.colors.borderBaseSubdued}`,
-                borderColor: 'none',
-                '&:hover': {
-                    borderColor: 'none',
-                },
-            };
+  const reactSelectInnerComponentStyles = {
+    option: (baseStyles: object, state: { isSelected: boolean; isDisabled: boolean }) => ({
+      ...baseStyles,
+      borderBottom: theme.border.thin,
+      borderColor: theme.colors.borderBaseSubdued,
+      backgroundColor: theme.colors.backgroundBaseSubdued,
+      color: state.isSelected ? theme.colors.textPrimary : theme.colors.textParagraph,
+      '&:active': {
+        backgroundColor: theme.colors.backgroundLightPrimary,
+      },
+    }),
+    control: (baseStyles: object, state: { isFocused: boolean }) => {
+      return {
+        ...baseStyles,
+        backgroundColor: state.isFocused ? theme.colors.backgroundBaseNeutral : theme.colors.backgroundBaseSubdued,
+        color: theme.colors.textParagraph,
+        border: `1px solid ${theme.colors.borderBaseSubdued}`,
+        borderColor: 'none',
+        '&:hover': {
+          borderColor: 'none',
         },
-        input: (baseStyles: object) => ({
-            ...baseStyles,
-            color: theme.colors.textParagraph,
-        }),
-        singleValue: (baseStyles: object, state: { isDisabled: boolean }) => {
-            const opacity = state.isDisabled ? 0.6 : 1;
-            const transition = 'opacity 300ms';
-            return {
-                ...baseStyles,
-                opacity,
-                transition,
-                color: theme.colors.textParagraph,
-            };
-        },
-        menu: (baseStyles: object) => ({
-            ...baseStyles,
-            backgroundColor: theme.colors.backgroundBasePlain,
-        }),
-        dropdownIndicator: (
-            base: CSSObjectWithLabel,
-            state: { isDisabled: boolean },
-        ) => ({
-            ...base,
-            color: state.isDisabled
-                ? theme.colors.borderBaseSubdued
-                : theme.colors.textDisabled,
-        }),
-        indicatorSeparator: (
-            base: CSSObjectWithLabel,
-            state: { isDisabled: boolean },
-        ) => ({
-            ...base,
-            backgroundColor: state.isDisabled
-                ? theme.colors.borderBaseSubdued
-                : theme.colors.textDisabled,
-        }),
-    };
+      };
+    },
+    input: (baseStyles: object) => ({
+      ...baseStyles,
+      color: theme.colors.textParagraph,
+    }),
+    singleValue: (baseStyles: object, state: { isDisabled: boolean }) => {
+      const opacity = state.isDisabled ? 0.6 : 1;
+      const transition = 'opacity 300ms';
+      return {
+        ...baseStyles,
+        opacity,
+        transition,
+        color: theme.colors.textParagraph,
+      };
+    },
+    menu: (baseStyles: object) => ({
+      ...baseStyles,
+      backgroundColor: theme.colors.backgroundBasePlain,
+    }),
+    dropdownIndicator: (base: CSSObjectWithLabel, state: { isDisabled: boolean }) => ({
+      ...base,
+      color: state.isDisabled ? theme.colors.borderBaseSubdued : theme.colors.textDisabled,
+    }),
+    indicatorSeparator: (base: CSSObjectWithLabel, state: { isDisabled: boolean }) => ({
+      ...base,
+      backgroundColor: state.isDisabled ? theme.colors.borderBaseSubdued : theme.colors.textDisabled,
+    }),
+  };
 
-    const containerStyle = css({
-        display: 'flex',
-        flexDirection: 'row',
-        alignItems: 'center',
-    });
+  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,
-    };
+  const reactSelectStyle = css({
+    width: '100%',
+  });
+  const refreshButtonStyle = css({
+    marginRight: theme.base / 2,
+    cursor: 'pointer',
+  });
+  return {
+    reactSelectInnerComponentStyles,
+    refreshButtonStyle,
+    containerStyle,
+    reactSelectStyle,
+  };
 };

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

@@ -12,78 +12,69 @@ import { getCommonFormFieldStyles, summaryFieldStyles } from './styles';
 import { getNestedSummaryLabel } from './wfoPydanticFormUtils';
 
 export const WfoSummary: PydanticFormElement = ({ pydanticFormField }) => {
-    const { summaryFieldStyle } = useWithOrchestratorTheme(summaryFieldStyles);
-    const { formRowStyle } = useWithOrchestratorTheme(getCommonFormFieldStyles);
+  const { summaryFieldStyle } = useWithOrchestratorTheme(summaryFieldStyles);
+  const { formRowStyle } = useWithOrchestratorTheme(getCommonFormFieldStyles);
 
-    const { id, title, description } = pydanticFormField;
-    const uniforms = pydanticFormField.schema.uniforms;
-    const summaryData = uniforms?.data as unknown as {
-        headers: string[][];
-        labels: string[];
-        columns: string[][];
-    };
+  const { id, title, description } = pydanticFormField;
+  const uniforms = pydanticFormField.schema.uniforms;
+  const summaryData = uniforms?.data as unknown as {
+    headers: string[][];
+    labels: string[];
+    columns: string[][];
+  };
 
-    const headers = summaryData?.headers as string[][];
-    const labels = summaryData?.labels as string[];
-    const columns = summaryData?.columns || [];
+  const headers = summaryData?.headers as string[][];
+  const labels = summaryData?.labels as string[];
+  const columns = summaryData?.columns || [];
 
-    const extraColumnsData = columns.filter((_, index) => index !== 0);
+  const extraColumnsData = columns.filter((_, index) => index !== 0);
 
-    const rows = columns[0].map((row, index) => (
-        <tr key={index}>
-            {labels && (
-                <td className={`label`}>
-                    {getNestedSummaryLabel(labels, index)}
-                </td>
-            )}
-            <td className={`value`}>
-                {typeof row === 'string' && row.includes('<!doctype html>') ? (
-                    <div
-                        className="emailMessage"
-                        dangerouslySetInnerHTML={{ __html: row }}
-                    ></div>
-                ) : (
-                    row
-                )}
-            </td>
-            {extraColumnsData &&
-                extraColumnsData.map((_, idx) => (
-                    <td className={`value`} key={idx}>
-                        {extraColumnsData[idx][index]?.toString()}
-                    </td>
-                ))}
-        </tr>
-    ));
+  const rows = columns[0].map((row, index) => (
+    <tr key={index}>
+      {labels && <td className={`label`}>{getNestedSummaryLabel(labels, index)}</td>}
+      <td className={`value`}>
+        {typeof row === 'string' && row.includes('<!doctype html>') ?
+          <div className="emailMessage" dangerouslySetInnerHTML={{ __html: row }}></div>
+        : row}
+      </td>
+      {extraColumnsData
+        && extraColumnsData.map((_, idx) => (
+          <td className={`value`} key={idx}>
+            {extraColumnsData[idx][index]?.toString()}
+          </td>
+        ))}
+    </tr>
+  ));
 
-    const tableHeader =
-        !headers || headers.length === 0 ? null : (
-            <tr>
-                {labels && <th />}
-                {headers.map((header, idx) => (
-                    <th key={idx}>{header}</th>
-                ))}
-            </tr>
-        );
+  const tableHeader =
+    !headers || headers.length === 0 ?
+      null
+    : <tr>
+        {labels && <th />}
+        {headers.map((header, idx) => (
+          <th key={idx}>{header}</th>
+        ))}
+      </tr>;
 
-    const formattedTitle = snakeToHuman(capitalize(title ?? ''));
+  const formattedTitle = snakeToHuman(capitalize(title ?? ''));
 
-    return (
-        <EuiFlexItem data-testid={id} css={[summaryFieldStyle, formRowStyle]}>
-            <section>
-                <EuiFormRow
-                    label={<p className="label">{formattedTitle}</p>}
-                    labelAppend={<EuiText size="m">{description}</EuiText>}
-                    id={id}
-                    fullWidth
-                >
-                    <section className="table-summary">
-                        <table id={`${id}-table`}>
-                            <thead>{tableHeader}</thead>
-                            <tbody>{rows}</tbody>
-                        </table>
-                    </section>
-                </EuiFormRow>
-            </section>
-        </EuiFlexItem>
-    );
+  return (
+    <EuiFlexItem data-testid={id} css={[summaryFieldStyle, formRowStyle]}>
+      <section>
+        <EuiFormRow
+          label={<p className="label">{formattedTitle}</p>}
+          labelAppend={<EuiText size="m">{description}</EuiText>}
+          id={id}
+          fullWidth
+        >
+          <section className="table-summary">
+            <table id={`${id}-table`}>
+              <thead>{tableHeader}</thead>
+              <tbody>{rows}</tbody>
+            </table>
+          </section>
+        </EuiFormRow>
+      </section>
+    </EuiFlexItem>
+  );
 };

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

@@ -9,30 +9,20 @@ import { EuiFieldText } from '@elastic/eui';
 import { useWithOrchestratorTheme } from '@/hooks';
 import { getFormFieldsBaseStyle } from '@/theme';
 
-export const WfoText: PydanticFormControlledElement = ({
-    onChange,
-    value,
-    disabled,
-    pydanticFormField,
-}) => {
-    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 (
-        <EuiFieldText
-            data-testid={pydanticFormField.id}
-            css={formFieldBaseStyle}
-            disabled={disabled}
-            onChange={(event) => onChange(event.target.value)}
-            value={fieldValue}
-            fullWidth
-        />
-    );
+export const WfoText: PydanticFormControlledElement = ({ onChange, value, disabled, pydanticFormField }) => {
+  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 (
+    <EuiFieldText
+      data-testid={pydanticFormField.id}
+      css={formFieldBaseStyle}
+      disabled={disabled}
+      onChange={(event) => onChange(event.target.value)}
+      value={fieldValue}
+      fullWidth
+    />
+  );
 };

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

@@ -4,21 +4,16 @@ import type { PydanticFormControlledElement } from 'pydantic-forms';
 
 import { EuiTextArea } from '@elastic/eui';
 
-export const WfoTextArea: PydanticFormControlledElement = ({
-    pydanticFormField,
-    onChange,
-    value,
-    disabled,
-}) => {
-    return (
-        <EuiTextArea
-            data-testid={pydanticFormField.id}
-            disabled={disabled}
-            name={pydanticFormField.id}
-            onChange={(event) => onChange(event.target.value)}
-            value={value ?? ''}
-            id={`input-${pydanticFormField.id}`}
-            fullWidth
-        />
-    );
+export const WfoTextArea: PydanticFormControlledElement = ({ pydanticFormField, onChange, value, disabled }) => {
+  return (
+    <EuiTextArea
+      data-testid={pydanticFormField.id}
+      disabled={disabled}
+      name={pydanticFormField.id}
+      onChange={(event) => onChange(event.target.value)}
+      value={value ?? ''}
+      id={`input-${pydanticFormField.id}`}
+      fullWidth
+    />
+  );
 };

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

@@ -8,60 +8,54 @@ import { EuiDatePicker } from '@elastic/eui';
 const DATEPICKER_INTERVAL = 15;
 
 const utcTimestampToLocalMoment = (utc_timestamp: number) => {
-    // Convert UTC timestamp to localized Moment object
-    return moment
-        .unix(utc_timestamp)
-        .tz(moment.tz.guess() ?? 'Europe/Amsterdam');
+  // Convert UTC timestamp to localized Moment object
+  return moment.unix(utc_timestamp).tz(moment.tz.guess() ?? 'Europe/Amsterdam');
 };
 
 const localMomentToUtcTimestamp = (local_moment: Moment) => {
-    // Convert localized Moment object to UTC timestamp
-    return local_moment.unix();
+  // Convert localized Moment object to UTC timestamp
+  return local_moment.unix();
 };
 
 export const WfoTimestampField = ({
-    onChange,
-    value,
-    pydanticFormField,
-    disabled,
+  onChange,
+  value,
+  pydanticFormField,
+  disabled,
 }: PydanticFormControlledElementProps) => {
-    const { schema } = pydanticFormField;
+  const { schema } = pydanticFormField;
 
-    const {
-        dateFormat: dateTimeFormat,
-        locale,
-        max,
-        min,
-        showTimeSelect,
-        timeFormat,
-    } = schema.uniforms as unknown as {
-        dateFormat?: string;
-        locale?: string;
-        max?: number;
-        min?: number;
-        showTimeSelect: boolean;
-        timeFormat?: string;
-    };
-    const dateValue = value || schema.default;
-    return (
-        <EuiDatePicker
-            disabled={disabled}
-            timeIntervals={DATEPICKER_INTERVAL}
-            selected={dateValue ? utcTimestampToLocalMoment(dateValue) : null}
-            value={
-                dateValue
-                    ? utcTimestampToLocalMoment(dateValue).toLocaleString()
-                    : undefined
-            }
-            onChange={(event) => {
-                onChange(event ? localMomentToUtcTimestamp(event) : undefined);
-            }}
-            showTimeSelect={showTimeSelect}
-            dateFormat={dateTimeFormat || undefined}
-            timeFormat={timeFormat || undefined}
-            locale={locale || 'en-en'}
-            maxDate={max ? moment.unix(max) : undefined}
-            minDate={min ? moment.unix(min) : undefined}
-        />
-    );
+  const {
+    dateFormat: dateTimeFormat,
+    locale,
+    max,
+    min,
+    showTimeSelect,
+    timeFormat,
+  } = schema.uniforms as unknown as {
+    dateFormat?: string;
+    locale?: string;
+    max?: number;
+    min?: number;
+    showTimeSelect: boolean;
+    timeFormat?: string;
+  };
+  const dateValue = value || schema.default;
+  return (
+    <EuiDatePicker
+      disabled={disabled}
+      timeIntervals={DATEPICKER_INTERVAL}
+      selected={dateValue ? utcTimestampToLocalMoment(dateValue) : null}
+      value={dateValue ? utcTimestampToLocalMoment(dateValue).toLocaleString() : undefined}
+      onChange={(event) => {
+        onChange(event ? localMomentToUtcTimestamp(event) : undefined);
+      }}
+      showTimeSelect={showTimeSelect}
+      dateFormat={dateTimeFormat || undefined}
+      timeFormat={timeFormat || undefined}
+      locale={locale || 'en-en'}
+      maxDate={max ? moment.unix(max) : undefined}
+      minDate={min ? moment.unix(min) : undefined}
+    />
+  );
 };

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

@@ -3,83 +3,83 @@ import { css } from '@emotion/react';
 import type { WfoThemeHelpers } from '@/hooks';
 
 export const getWfoObjectFieldStyles = () => {
-    const wfoObjectFieldStyles = css({
-        width: '100%',
-        '& > div': {
-            width: '100%',
-        },
-    });
-    return {
-        wfoObjectFieldStyles,
-    };
+  const wfoObjectFieldStyles = css({
+    width: '100%',
+    '& > div': {
+      width: '100%',
+    },
+  });
+  return {
+    wfoObjectFieldStyles,
+  };
 };
 
 export const getCommonFormFieldStyles = ({ theme }: WfoThemeHelpers) => {
-    const formRowStyle = css({
-        marginBottom: theme.base * 2,
+  const formRowStyle = css({
+    marginBottom: theme.base * 2,
 
-        '.euiText': {
-            color: theme.colors.textParagraph,
-        },
-        '.euiFormLabel': {
-            color: theme.colors.textParagraph,
-            cursor: 'text',
-            '&.euiFormLabel-isFocused': {
-                color: theme.colors.textPrimary,
-            },
-        },
-        '.euiFormRow__labelWrapper': {
-            display: 'flex',
-            flexDirection: 'column',
-        },
-    });
+    '.euiText': {
+      color: theme.colors.textParagraph,
+    },
+    '.euiFormLabel': {
+      color: theme.colors.textParagraph,
+      cursor: 'text',
+      '&.euiFormLabel-isFocused': {
+        color: theme.colors.textPrimary,
+      },
+    },
+    '.euiFormRow__labelWrapper': {
+      display: 'flex',
+      flexDirection: 'column',
+    },
+  });
 
-    const errorStyle = css({
-        color: theme.colors.textDanger,
-    });
-    return {
-        errorStyle,
-        formRowStyle,
-    };
+  const errorStyle = css({
+    color: theme.colors.textDanger,
+  });
+  return {
+    errorStyle,
+    formRowStyle,
+  };
 };
 
 export const summaryFieldStyles = ({ theme }: WfoThemeHelpers) => {
-    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.backgroundBaseNeutral,
-                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,
-    };
+  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.backgroundBaseNeutral,
+        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,
+  };
 };