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

package/src/components/WfoProcessList/processListObjectMappers.ts

@@ -4,121 +4,116 @@ import { getConcatenatedPagedResult } from '@/utils';
 
 import { ProcessListExportItem, ProcessListItem } from './WfoProcessesList';
 
-export const mapGraphQlProcessListResultToPageInfo = (
-    processesResponse: ProcessListResponse,
-) => processesResponse.pageInfo;
+export const mapGraphQlProcessListResultToPageInfo = (processesResponse: ProcessListResponse) =>
+  processesResponse.pageInfo;
 
-export const mapGraphQlProcessListResultToProcessListItems = (
-    processes: Process[],
-): ProcessListItem[] =>
-    processes.map((process) => {
-        const {
-            workflowName,
-            lastStep,
-            lastStatus,
-            workflowTarget,
-            createdBy,
-            assignee,
-            processId,
-            startedAt,
-            lastModifiedAt,
-            subscriptions,
-            product,
-            customer,
-            isTask,
-        } = process;
+export const mapGraphQlProcessListResultToProcessListItems = (processes: Process[]): ProcessListItem[] =>
+  processes.map((process) => {
+    const {
+      workflowName,
+      lastStep,
+      lastStatus,
+      workflowTarget,
+      createdBy,
+      assignee,
+      processId,
+      startedAt,
+      lastModifiedAt,
+      subscriptions,
+      product,
+      customer,
+      isTask,
+    } = process;
 
-        return {
-            workflowName,
-            lastStep,
-            lastStatus,
-            workflowTarget,
-            createdBy,
-            assignee,
-            processId,
-            isTask,
-            startedAt: new Date(startedAt),
-            lastModifiedAt: new Date(lastModifiedAt),
-            subscriptions,
-            productName: product?.name,
-            tag: product?.tag,
-            customer: customer.fullname,
-            customerAbbreviation: customer.shortcode,
-        };
-    });
+    return {
+      workflowName,
+      lastStep,
+      lastStatus,
+      workflowTarget,
+      createdBy,
+      assignee,
+      processId,
+      isTask,
+      startedAt: new Date(startedAt),
+      lastModifiedAt: new Date(lastModifiedAt),
+      subscriptions,
+      productName: product?.name,
+      tag: product?.tag,
+      customer: customer.fullname,
+      customerAbbreviation: customer.shortcode,
+    };
+  });
 
 export const mapGraphQlProcessListExportResultToProcessListItems = (
-    processesResponse: ProcessListResponse,
+  processesResponse: ProcessListResponse,
 ): ProcessListExportItem[] =>
-    processesResponse.processes.map((process) => {
-        const {
-            workflowName,
-            lastStep,
-            lastStatus,
-            workflowTarget,
-            createdBy,
-            assignee,
-            processId,
-            startedAt,
-            lastModifiedAt,
-            subscriptions,
-            product,
-            customer,
-            isTask,
-        } = process;
+  processesResponse.processes.map((process) => {
+    const {
+      workflowName,
+      lastStep,
+      lastStatus,
+      workflowTarget,
+      createdBy,
+      assignee,
+      processId,
+      startedAt,
+      lastModifiedAt,
+      subscriptions,
+      product,
+      customer,
+      isTask,
+    } = process;
 
-        return {
-            workflowName,
-            lastStep,
-            lastStatus,
-            workflowTarget,
-            createdBy,
-            assignee,
-            processId,
-            isTask,
-            startedAt: new Date(startedAt),
-            lastModifiedAt: new Date(lastModifiedAt),
-            subscriptions: getConcatenatedPagedResult<
-                Pick<Subscription, 'subscriptionId' | 'description'>
-            >(subscriptions, ['subscriptionId', 'description']),
-            productName: product?.name,
-            productTag: product?.tag,
-            customer: customer.fullname,
-            customerAbbreviation: customer.shortcode,
-        };
-    });
+    return {
+      workflowName,
+      lastStep,
+      lastStatus,
+      workflowTarget,
+      createdBy,
+      assignee,
+      processId,
+      isTask,
+      startedAt: new Date(startedAt),
+      lastModifiedAt: new Date(lastModifiedAt),
+      subscriptions: getConcatenatedPagedResult<Pick<Subscription, 'subscriptionId' | 'description'>>(subscriptions, [
+        'subscriptionId',
+        'description',
+      ]),
+      productName: product?.name,
+      productTag: product?.tag,
+      customer: customer.fullname,
+      customerAbbreviation: customer.shortcode,
+    };
+  });
 
 // Some fields are not a key of Process, however backend still supports them
 // Backend concatenates object name with the key, e.g. product.name becomes productName
 // Todo: typecast is needed until ticket is implemented:
 // https://github.com/workfloworchestrator/orchestrator-ui/issues/290
 const fieldMapper = (field: keyof ProcessListItem): keyof Process => {
-    switch (field) {
-        case 'customer':
-            return 'customerFullname' as keyof Process;
-        case 'customerAbbreviation':
-            return 'customerShortcode' as keyof Process;
-        case 'productName':
-            return 'productName' as keyof Process;
-        case 'tag':
-            return 'tag' as keyof Process;
-        default:
-            return field;
-    }
+  switch (field) {
+    case 'customer':
+      return 'customerFullname' as keyof Process;
+    case 'customerAbbreviation':
+      return 'customerShortcode' as keyof Process;
+    case 'productName':
+      return 'productName' as keyof Process;
+    case 'tag':
+      return 'tag' as keyof Process;
+    default:
+      return field;
+  }
 };
 
-export const graphQlProcessSortMapper = ({
-    field,
-    order,
-}: GraphQLSort<ProcessListItem>): GraphQLSort<Process> => ({
-    field: fieldMapper(field),
-    order,
+export const graphQlProcessSortMapper = ({ field, order }: GraphQLSort<ProcessListItem>): GraphQLSort<Process> => ({
+  field: fieldMapper(field),
+  order,
 });
 
 export const graphQlProcessFilterMapper = (
-    data?: GraphqlFilter<ProcessListItem>[],
+  data?: GraphqlFilter<ProcessListItem>[],
 ): GraphqlFilter<Process>[] | undefined =>
-    data?.map(({ field, value }) => ({
-        field: fieldMapper(field),
-        value,
-    }));
+  data?.map(({ field, value }) => ({
+    field: fieldMapper(field),
+    value,
+  }));

package/src/components/WfoPydanticForm/Footer.tsx

@@ -18,175 +18,157 @@ import { WfoComputedTheme } from '@/theme';
 import { RenderFormErrors } from './RenderFormErrors';
 
 type FooterProps = PydanticFormFooterProps & {
-    isTask?: boolean;
+  isTask?: boolean;
 };
 
 const submitButtonId = 'button-submit-form-submit';
 const previousButtonId = 'button-submit-form-previous';
 const cancelButtonId = 'button-submit-form-cancel';
 
-export const Footer = ({
-    onCancel,
-    onPrevious,
-    hasNext,
-    hasPrevious,
-    isTask = false,
-    buttons,
-}: FooterProps) => {
-    const { theme } = useOrchestratorTheme();
-    const t = useTranslations('pydanticForms.userInputForm');
-    const { showConfirmDialog } = useContext(ConfirmationDialogContext);
-
-    const handlePrevious = useCallback(() => {
-        if (onCancel) {
-            showConfirmDialog({
-                question: t('previousQuestion'),
-                onConfirm: onCancel,
-            });
+export const Footer = ({ onCancel, onPrevious, hasNext, hasPrevious, isTask = false, buttons }: FooterProps) => {
+  const { theme } = useOrchestratorTheme();
+  const t = useTranslations('pydanticForms.userInputForm');
+  const { showConfirmDialog } = useContext(ConfirmationDialogContext);
+
+  const handlePrevious = useCallback(() => {
+    if (onCancel) {
+      showConfirmDialog({
+        question: t('previousQuestion'),
+        onConfirm: onCancel,
+      });
+    }
+  }, [onCancel, showConfirmDialog, t]);
+
+  const { next, previous } = buttons || {};
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      const isPrimary = event.metaKey || event.ctrlKey;
+
+      if (isPrimary && event.key === 'ArrowLeft') {
+        event.preventDefault();
+
+        if (hasPrevious) {
+          onPrevious?.();
+        } else {
+          handlePrevious();
         }
-    }, [onCancel, showConfirmDialog, t]);
-
-    const { next, previous } = buttons || {};
-
-    useEffect(() => {
-        const handleKeyDown = (event: KeyboardEvent) => {
-            const isPrimary = event.metaKey || event.ctrlKey;
-
-            if (isPrimary && event.key === 'ArrowLeft') {
-                event.preventDefault();
-
-                if (hasPrevious) {
-                    onPrevious?.();
-                } else {
-                    handlePrevious();
-                }
-            }
-
-            if (isPrimary && event.key === 'ArrowRight') {
-                event.preventDefault();
-                document.getElementById(submitButtonId)?.click();
-            }
-        };
-        window.addEventListener('keydown', handleKeyDown);
-        return () => window.removeEventListener('keydown', handleKeyDown);
-    }, [hasPrevious, hasNext, onPrevious, onCancel, handlePrevious]);
-
-    const PreviousButton = () => {
-        const previousButtonColor =
-            theme.colors[
-                (previous?.color as keyof WfoComputedTheme['colors']) ??
-                    ('primary' as keyof WfoComputedTheme['colors'])
-            ];
-
-        return (
-            <EuiButton
-                data-testid={previousButtonId}
-                id={previousButtonId}
-                tabIndex={0}
-                fill
-                onClick={() => {
-                    if (onPrevious) {
-                        onPrevious();
-                    }
-                }}
-                css={{
-                    backgroundColor: previousButtonColor.toString(),
-                    padding: '12px',
-                }}
-                iconSide="right"
-                aria-label={t('previous')}
-            >
-                {previous?.text ?? t('previous')}
-            </EuiButton>
-        );
+      }
+
+      if (isPrimary && event.key === 'ArrowRight') {
+        event.preventDefault();
+        document.getElementById(submitButtonId)?.click();
+      }
     };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [hasPrevious, hasNext, onPrevious, onCancel, handlePrevious]);
 
-    const CancelButton = () => (
-        <div
-            data-testid={cancelButtonId}
-            onClick={handlePrevious}
-            css={{
-                cursor: 'pointer',
-                color: theme.colors.link,
-                fontWeight: theme.font.weight.bold,
-                marginLeft: theme.base / 2,
-                display: 'flex',
-                alignItems: 'center',
-            }}
-        >
-            {t('cancel')}
-        </div>
-    );
+  const PreviousButton = () => {
+    const previousButtonColor =
+      theme.colors[
+        (previous?.color as keyof WfoComputedTheme['colors']) ?? ('primary' as keyof WfoComputedTheme['colors'])
+      ];
 
-    const SubmitButton = () => {
-        /*
-         * The submit button is used to submit the form data.
-         * If there is a next step, it will be labeled as "Next".
-         * If there is no next step, it will be labeled as "Start Workflow".
-         * If there is a label provided in the buttonNextProps, it will be used instead.
-         * The button is styled with primary color and has an icon on the right side.
-         * We don't use the disable property based on the form valid state here. When calculating the form valid state
-         * react-hook-form might return a false negative - marking the form invalid - when not all fields have a defaultValue
-         * which is a valid use case. https://chatgpt.com/share/6874ce66-35e8-800c-9434-725ff895ac44
-         */
-
-        const submitButtonTranslated = hasNext
-            ? t('next')
-            : isTask
-            ? t('startTask')
-            : t('startWorkflow');
-
-        const submitButtonLabel = next?.text ?? submitButtonTranslated;
-        const submitIconType =
-            !hasNext && !next?.text
-                ? () => <WfoPlayCircle color="currentColor" />
-                : undefined;
-        const submitButtonColor = next?.color
-            ? (next?.color as keyof WfoComputedTheme['colors'])
-            : 'primary';
-
-        return (
-            <EuiButton
-                data-testid={submitButtonId}
-                id={submitButtonId}
-                tabIndex={0}
-                fill
-                css={{
-                    backgroundColor: submitButtonColor,
-                    padding: '12px',
-                }}
-                type="submit"
-                iconSide="right"
-                iconType={submitIconType}
-                aria-label={submitButtonLabel}
-            >
-                {submitButtonLabel}
-            </EuiButton>
-        );
-    };
+    return (
+      <EuiButton
+        data-testid={previousButtonId}
+        id={previousButtonId}
+        tabIndex={0}
+        fill
+        onClick={() => {
+          if (onPrevious) {
+            onPrevious();
+          }
+        }}
+        css={{
+          backgroundColor: previousButtonColor.toString(),
+          padding: '12px',
+        }}
+        iconSide="right"
+        aria-label={t('previous')}
+      >
+        {previous?.text ?? t('previous')}
+      </EuiButton>
+    );
+  };
+
+  const CancelButton = () => (
+    <div
+      data-testid={cancelButtonId}
+      onClick={handlePrevious}
+      css={{
+        cursor: 'pointer',
+        color: theme.colors.link,
+        fontWeight: theme.font.weight.bold,
+        marginLeft: theme.base / 2,
+        display: 'flex',
+        alignItems: 'center',
+      }}
+    >
+      {t('cancel')}
+    </div>
+  );
+
+  const SubmitButton = () => {
+    /*
+     * The submit button is used to submit the form data.
+     * If there is a next step, it will be labeled as "Next".
+     * If there is no next step, it will be labeled as "Start Workflow".
+     * If there is a label provided in the buttonNextProps, it will be used instead.
+     * The button is styled with primary color and has an icon on the right side.
+     * We don't use the disable property based on the form valid state here. When calculating the form valid state
+     * react-hook-form might return a false negative - marking the form invalid - when not all fields have a defaultValue
+     * which is a valid use case. https://chatgpt.com/share/6874ce66-35e8-800c-9434-725ff895ac44
+     */
+
+    const submitButtonTranslated =
+      hasNext ? t('next')
+      : isTask ? t('startTask')
+      : t('startWorkflow');
+
+    const submitButtonLabel = next?.text ?? submitButtonTranslated;
+    const submitIconType = !hasNext && !next?.text ? () => <WfoPlayCircle color="currentColor" /> : undefined;
+    const submitButtonColor = next?.color ? (next?.color as keyof WfoComputedTheme['colors']) : 'primary';
 
-    const PreviousCancelButtonGroup = () => {
-        return (
-            <EuiFlexGroup gutterSize="xl">
-                <PreviousButton />
-                <CancelButton />
-            </EuiFlexGroup>
-        );
-    };
+    return (
+      <EuiButton
+        data-testid={submitButtonId}
+        id={submitButtonId}
+        tabIndex={0}
+        fill
+        css={{
+          backgroundColor: submitButtonColor,
+          padding: '12px',
+        }}
+        type="submit"
+        iconSide="right"
+        iconType={submitIconType}
+        aria-label={submitButtonLabel}
+      >
+        {submitButtonLabel}
+      </EuiButton>
+    );
+  };
 
+  const PreviousCancelButtonGroup = () => {
     return (
-        <div data-testid="pydantic-form-footer">
-            <RenderFormErrors />
-            <EuiHorizontalRule />
-            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
-                <div>
-                    {(hasPrevious && <PreviousCancelButtonGroup />) || (
-                        <CancelButton />
-                    )}
-                </div>
-
-                <SubmitButton />
-            </div>
-        </div>
+      <EuiFlexGroup gutterSize="xl">
+        <PreviousButton />
+        <CancelButton />
+      </EuiFlexGroup>
     );
+  };
+
+  return (
+    <div data-testid="pydantic-form-footer">
+      <RenderFormErrors />
+      <EuiHorizontalRule />
+      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+        <div>{(hasPrevious && <PreviousCancelButtonGroup />) || <CancelButton />}</div>
+
+        <SubmitButton />
+      </div>
+    </div>
+  );
 };

package/src/components/WfoPydanticForm/Header.tsx

@@ -5,17 +5,16 @@ import type { PydanticFormHeaderProps } from 'pydantic-forms';
 import { css } from '@emotion/react';
 
 const headerStyling = css`
-    padding: 20px 0;
-    font-size: larger;
-    font-weight: bold;
-    margin-bottom: 15px;
+  padding: 20px 0;
+  font-size: larger;
+  font-weight: bold;
+  margin-bottom: 15px;
 `;
 
 export const Header = ({ pydanticFormSchema }: PydanticFormHeaderProps) => {
-    return pydanticFormSchema?.title &&
-        pydanticFormSchema.title !== 'unknown' ? (
-        <h3 data-testid="pydantic-form-header" css={headerStyling}>
-            {pydanticFormSchema?.title}
-        </h3>
-    ) : undefined;
+  return pydanticFormSchema?.title && pydanticFormSchema.title !== 'unknown' ?
+      <h3 data-testid="pydantic-form-header" css={headerStyling}>
+        {pydanticFormSchema?.title}
+      </h3>
+    : undefined;
 };

package/src/components/WfoPydanticForm/RenderFormErrors.tsx

@@ -13,27 +13,25 @@ import { useWithOrchestratorTheme } from '@/hooks';
 import { getCommonFormFieldStyles } from './fields/styles';
 
 export const RenderFormErrors = () => {
-    const { errorStyle } = useWithOrchestratorTheme(getCommonFormFieldStyles);
+  const { errorStyle } = useWithOrchestratorTheme(getCommonFormFieldStyles);
 
-    const errorDetails = useGetValidationErrors();
-    const t = useTranslations('pydanticForms.userInputForm');
-    if (!errorDetails) {
-        return <></>;
-    }
+  const errorDetails = useGetValidationErrors();
+  const t = useTranslations('pydanticForms.userInputForm');
+  if (!errorDetails) {
+    return <></>;
+  }
 
-    const errors = errorDetails.source;
-    const rootError = errors
-        .filter((err) => err.loc.includes('__root__'))
-        .shift();
-    const otherErrors = errors.filter((err) => !err.loc.includes('__root__'));
+  const errors = errorDetails.source;
+  const rootError = errors.filter((err) => err.loc.includes('__root__')).shift();
+  const otherErrors = errors.filter((err) => !err.loc.includes('__root__'));
 
-    return (
-        <em css={errorStyle}>
-            {rootError && <div>{rootError.msg}</div>}
-            {otherErrors?.length >= 1 &&
-                t('inputFieldsHaveValidationErrors', {
-                    nrOfValidationErrors: otherErrors.length,
-                })}
-        </em>
-    );
+  return (
+    <em css={errorStyle}>
+      {rootError && <div>{rootError.msg}</div>}
+      {otherErrors?.length >= 1
+        && t('inputFieldsHaveValidationErrors', {
+          nrOfValidationErrors: otherErrors.length,
+        })}
+    </em>
+  );
 };

package/src/components/WfoPydanticForm/Row.tsx

@@ -9,37 +9,28 @@ import { useWithOrchestratorTheme } from '@/hooks';
 
 import { getCommonFormFieldStyles } from './fields/styles';
 
-export const Row: RowRenderComponent = ({
-    title,
-    description,
-    error,
-    isInvalid,
-    required,
-    children,
-}) => {
-    const { formRowStyle, errorStyle } = useWithOrchestratorTheme(
-        getCommonFormFieldStyles,
-    );
+export const Row: RowRenderComponent = ({ title, description, error, isInvalid, required, children }) => {
+  const { formRowStyle, errorStyle } = useWithOrchestratorTheme(getCommonFormFieldStyles);
 
-    const Label = () => {
-        return title ? (
-            <div css={error && errorStyle}>
-                {title} {required && '*'}
-            </div>
-        ) : undefined;
-    };
+  const Label = () => {
+    return title ?
+        <div css={error && errorStyle}>
+          {title} {required && '*'}
+        </div>
+      : undefined;
+  };
 
-    return (
-        <EuiFormRow
-            data-testid={getDataTestId('pydantic-form-row', title)}
-            css={formRowStyle}
-            label={<Label />}
-            labelAppend={<EuiText size="m">{description}</EuiText>}
-            error={error}
-            isInvalid={isInvalid}
-            fullWidth
-        >
-            <>{children}</>
-        </EuiFormRow>
-    );
+  return (
+    <EuiFormRow
+      data-testid={getDataTestId('pydantic-form-row', title)}
+      css={formRowStyle}
+      label={<Label />}
+      labelAppend={<EuiText size="m">{description}</EuiText>}
+      error={error}
+      isInvalid={isInvalid}
+      fullWidth
+    >
+      <>{children}</>
+    </EuiFormRow>
+  );
 };