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

package/src/components/WfoSubscription/WfoCustomerDescriptionsField.tsx

@@ -3,8 +3,8 @@ import React, { FC } from 'react';
 import { useWithOrchestratorTheme } from '@/hooks';
 import { useGetCustomerQuery } from '@/rtk';
 import {
-    useSetCustomerDescriptionMutation,
-    useUpdateCustomerDescriptionMutation,
+  useSetCustomerDescriptionMutation,
+  useUpdateCustomerDescriptionMutation,
 } from '@/rtk/endpoints/customerDescriptions';
 import { Customer, CustomerDescriptions, SubscriptionDetail } from '@/types';
 import { INVISIBLE_CHARACTER } from '@/utils';
@@ -12,115 +12,101 @@ import { INVISIBLE_CHARACTER } from '@/utils';
 import { WfoInlineEdit } from '../WfoInlineEdit';
 import { getSubscriptionDetailStyles } from './styles';
 
-type CustomerDescriptionWithName = CustomerDescriptions &
-    Partial<Pick<Customer, 'fullname' | 'shortcode'>>;
+type CustomerDescriptionWithName = CustomerDescriptions & Partial<Pick<Customer, 'fullname' | 'shortcode'>>;
 
 export type WfoCustomerDescriptionsFieldProps = {
-    customerDescriptions: CustomerDescriptions[];
-    subscriptionCustomerId: SubscriptionDetail['customerId'];
-    subscriptionId: SubscriptionDetail['subscriptionId'];
+  customerDescriptions: CustomerDescriptions[];
+  subscriptionCustomerId: SubscriptionDetail['customerId'];
+  subscriptionId: SubscriptionDetail['subscriptionId'];
 };
 
-export const WfoCustomerDescriptionsField: FC<
-    WfoCustomerDescriptionsFieldProps
-> = ({ customerDescriptions, subscriptionCustomerId, subscriptionId }) => {
-    const {
-        customerDescriptionsCustomerNameStyle,
-        customerDescriptionsFormStyle,
-    } = useWithOrchestratorTheme(getSubscriptionDetailStyles);
-    const [updateCustomerDescription] = useUpdateCustomerDescriptionMutation();
-    const [setCustomerDescription] = useSetCustomerDescriptionMutation();
-    const customerIds = customerDescriptions.map(
-        (customerDescription) => customerDescription.customerId,
-    );
-    const { data } = useGetCustomerQuery({ customerIds });
-
-    if (!data) {
-        return null;
-    }
+export const WfoCustomerDescriptionsField: FC<WfoCustomerDescriptionsFieldProps> = ({
+  customerDescriptions,
+  subscriptionCustomerId,
+  subscriptionId,
+}) => {
+  const { customerDescriptionsCustomerNameStyle, customerDescriptionsFormStyle } =
+    useWithOrchestratorTheme(getSubscriptionDetailStyles);
+  const [updateCustomerDescription] = useUpdateCustomerDescriptionMutation();
+  const [setCustomerDescription] = useSetCustomerDescriptionMutation();
+  const customerIds = customerDescriptions.map((customerDescription) => customerDescription.customerId);
+  const { data } = useGetCustomerQuery({ customerIds });
 
-    const customerDescriptionsWithName: CustomerDescriptionWithName[] =
-        customerDescriptions.map(
-            ({ description, customerId, id, subscriptionId }) => {
-                const customer = data.find(
-                    (customer) => customer.customerId === customerId,
-                );
+  if (!data) {
+    return null;
+  }
 
-                return {
-                    id,
-                    customerId,
-                    shortcode: customer?.shortcode,
-                    fullname: customer?.fullname,
-                    description,
-                    subscriptionId,
-                };
-            },
-        );
+  const customerDescriptionsWithName: CustomerDescriptionWithName[] = customerDescriptions.map(
+    ({ description, customerId, id, subscriptionId }) => {
+      const customer = data.find((customer) => customer.customerId === customerId);
 
-    const customerDescriptionEditForm = ({
+      return {
+        id,
         customerId,
-        fullname,
-        shortcode,
+        shortcode: customer?.shortcode,
+        fullname: customer?.fullname,
         description,
-        id,
         subscriptionId,
-    }: CustomerDescriptionWithName) => (
-        <div key={customerId} css={{ display: 'flex' }}>
-            <div css={customerDescriptionsCustomerNameStyle}>
-                {fullname ?? customerId} {`${shortcode ?? customerId}`}:
-            </div>
-            <WfoInlineEdit
-                value={description || INVISIBLE_CHARACTER}
-                onSave={(value) =>
-                    updateCustomerDescription({
-                        id: id,
-                        description: value,
-                        customerId: customerId,
-                        subscriptionId: subscriptionId,
-                    })
-                }
-            />
-        </div>
-    );
-
-    const customerDescriptionCreateForm = () => {
-        if (!subscriptionCustomerId) return;
-        return (
-            <div key={subscriptionCustomerId}>
-                <WfoInlineEdit
-                    value={INVISIBLE_CHARACTER}
-                    onlyShowOnHover={true}
-                    onSave={(value) =>
-                        setCustomerDescription({
-                            customerId: subscriptionCustomerId,
-                            subscriptionId: subscriptionId,
-                            description: value,
-                        })
-                    }
-                />
-            </div>
-        );
-    };
+      };
+    },
+  );
 
-    const currentCustomerSubscriptionDescription =
-        customerDescriptionsWithName.find(
-            ({ customerId }) => customerId === subscriptionCustomerId,
-        );
+  const customerDescriptionEditForm = ({
+    customerId,
+    fullname,
+    shortcode,
+    description,
+    id,
+    subscriptionId,
+  }: CustomerDescriptionWithName) => (
+    <div key={customerId} css={{ display: 'flex' }}>
+      <div css={customerDescriptionsCustomerNameStyle}>
+        {fullname ?? customerId} {`${shortcode ?? customerId}`}:
+      </div>
+      <WfoInlineEdit
+        value={description || INVISIBLE_CHARACTER}
+        onSave={(value) =>
+          updateCustomerDescription({
+            id: id,
+            description: value,
+            customerId: customerId,
+            subscriptionId: subscriptionId,
+          })
+        }
+      />
+    </div>
+  );
 
+  const customerDescriptionCreateForm = () => {
+    if (!subscriptionCustomerId) return;
     return (
-        <div css={customerDescriptionsFormStyle}>
-            {(currentCustomerSubscriptionDescription &&
-                customerDescriptionEditForm(
-                    currentCustomerSubscriptionDescription,
-                )) ||
-                customerDescriptionCreateForm()}
-            {customerDescriptionsWithName
-                .filter(
-                    ({ customerId }) => customerId !== subscriptionCustomerId,
-                )
-                .map((customerDescriptionWithName) =>
-                    customerDescriptionEditForm(customerDescriptionWithName),
-                )}
-        </div>
+      <div key={subscriptionCustomerId}>
+        <WfoInlineEdit
+          value={INVISIBLE_CHARACTER}
+          onlyShowOnHover={true}
+          onSave={(value) =>
+            setCustomerDescription({
+              customerId: subscriptionCustomerId,
+              subscriptionId: subscriptionId,
+              description: value,
+            })
+          }
+        />
+      </div>
     );
+  };
+
+  const currentCustomerSubscriptionDescription = customerDescriptionsWithName.find(
+    ({ customerId }) => customerId === subscriptionCustomerId,
+  );
+
+  return (
+    <div css={customerDescriptionsFormStyle}>
+      {(currentCustomerSubscriptionDescription && customerDescriptionEditForm(currentCustomerSubscriptionDescription))
+        || customerDescriptionCreateForm()}
+      {customerDescriptionsWithName
+        .filter(({ customerId }) => customerId !== subscriptionCustomerId)
+        .map((customerDescriptionWithName) => customerDescriptionEditForm(customerDescriptionWithName))}
+    </div>
+  );
 };

package/src/components/WfoSubscription/WfoInSyncField/WfoInSyncErrorToastMessage.tsx

@@ -4,22 +4,20 @@ import Link from 'next/link';
 
 import { PATH_WORKFLOWS, parseErrorDetail } from '@/components';
 
-export const WfoInSyncErrorToastMessage: FC<{ errorDetail: string }> = ({
-    errorDetail,
-}) => {
-    const { failedIds, filteredInput } = parseErrorDetail(errorDetail);
+export const WfoInSyncErrorToastMessage: FC<{ errorDetail: string }> = ({ errorDetail }) => {
+  const { failedIds, filteredInput } = parseErrorDetail(errorDetail);
 
-    return (
-        <div css={{ whiteSpace: 'normal', wordBreak: 'break-word' }}>
-            <div>{filteredInput}</div>
-            {failedIds.map((processId) => {
-                const processUrl = `${PATH_WORKFLOWS}/${processId}`;
-                return (
-                    <div key={processId}>
-                        <Link href={processUrl}>{processId}</Link>
-                    </div>
-                );
-            })}
-        </div>
-    );
+  return (
+    <div css={{ whiteSpace: 'normal', wordBreak: 'break-word' }}>
+      <div>{filteredInput}</div>
+      {failedIds.map((processId) => {
+        const processUrl = `${PATH_WORKFLOWS}/${processId}`;
+        return (
+          <div key={processId}>
+            <Link href={processUrl}>{processId}</Link>
+          </div>
+        );
+      })}
+    </div>
+  );
 };

package/src/components/WfoSubscription/WfoInSyncField/WfoInSyncField.tsx

@@ -3,12 +3,7 @@ import React, { useContext, useEffect, useState } from 'react';
 import { useTranslations } from 'next-intl';
 import Link from 'next/link';
 
-import {
-    EuiButton,
-    EuiContextMenuItem,
-    EuiLoadingSpinner,
-    EuiToolTip,
-} from '@elastic/eui';
+import { EuiButton, EuiContextMenuItem, EuiLoadingSpinner, EuiToolTip } from '@elastic/eui';
 
 import { WfoIsAllowedToRender } from '@/components';
 import { WfoInsyncIcon } from '@/components';
@@ -18,11 +13,7 @@ import { getSubscriptionActionStyles } from '@/components/WfoSubscription/WfoSub
 import { WfoInSyncCompactIcon } from '@/components/WfoSubscription/WfoTargetTypeIcon';
 import { PolicyResource } from '@/configuration/policy-resources';
 import { ConfirmationDialogContext } from '@/contexts';
-import {
-    useOrchestratorTheme,
-    useShowToastMessage,
-    useWithOrchestratorTheme,
-} from '@/hooks';
+import { useOrchestratorTheme, useShowToastMessage, useWithOrchestratorTheme } from '@/hooks';
 import { WfoCheckmarkCircleFill } from '@/icons';
 import { useSetSubscriptionInSyncMutation } from '@/rtk/endpoints';
 import { SubscriptionDetail, ToastTypes } from '@/types';
@@ -31,194 +22,158 @@ import { formatDate } from '@/utils';
 import { getLastUncompletedProcess, getLatestTaskDate } from '../utils';
 
 interface WfoInSyncFieldProps {
-    subscriptionDetail: SubscriptionDetail;
-    compactMode?: boolean;
-    setPopover?: (isOpen: boolean) => void;
+  subscriptionDetail: SubscriptionDetail;
+  compactMode?: boolean;
+  setPopover?: (isOpen: boolean) => void;
 }
 
-export const WfoInSyncField = ({
-    subscriptionDetail,
-    compactMode = false,
-    setPopover,
-}: WfoInSyncFieldProps) => {
-    const t = useTranslations('subscriptions.detail');
-    const { theme } = useOrchestratorTheme();
-    const {
-        clickableStyle,
-        linkMenuItemStyle,
-        disabledTextStyle,
-        disabledIconStyle,
-        secondaryIconStyle,
-        spinnerSecondaryIconStyle,
-    } = useWithOrchestratorTheme(getSubscriptionActionStyles);
-    const [inSync, setInSync] = useState<boolean>(subscriptionDetail.insync);
-    const lastTaskRunDate = getLatestTaskDate(
-        subscriptionDetail.processes?.page,
-    );
-    const lastUncompletedProcess = getLastUncompletedProcess(
-        subscriptionDetail?.processes?.page,
-    );
+export const WfoInSyncField = ({ subscriptionDetail, compactMode = false, setPopover }: WfoInSyncFieldProps) => {
+  const t = useTranslations('subscriptions.detail');
+  const { theme } = useOrchestratorTheme();
+  const {
+    clickableStyle,
+    linkMenuItemStyle,
+    disabledTextStyle,
+    disabledIconStyle,
+    secondaryIconStyle,
+    spinnerSecondaryIconStyle,
+  } = useWithOrchestratorTheme(getSubscriptionActionStyles);
+  const [inSync, setInSync] = useState<boolean>(subscriptionDetail.insync);
+  const lastTaskRunDate = getLatestTaskDate(subscriptionDetail.processes?.page);
+  const lastUncompletedProcess = getLastUncompletedProcess(subscriptionDetail?.processes?.page);
+
+  const [setSubscriptionInSync, { isLoading }] = useSetSubscriptionInSyncMutation();
+  const { showToastMessage } = useShowToastMessage();
+  const { showConfirmDialog } = useContext(ConfirmationDialogContext);
+
+  useEffect(() => {
+    setInSync(subscriptionDetail.insync);
+  }, [subscriptionDetail.insync]);
+
+  const setInSyncAction = () => {
+    setSubscriptionInSync(subscriptionDetail.subscriptionId)
+      .unwrap()
+      .then(() => {
+        setInSync(true);
+        showToastMessage(ToastTypes.SUCCESS, t('setInSyncSuccess.text'), t('setInSyncSuccess.title'));
+      })
+      .catch((error) => {
+        const errorToastMessage =
+          error?.data?.detail ?
+            <WfoInSyncErrorToastMessage errorDetail={error.data?.detail} />
+          : t('setInSyncFailed.text').toString();
+
+        showToastMessage(ToastTypes.ERROR, errorToastMessage, t('setInSyncFailed.title'));
+        console.error('Failed to set subscription in sync.', error);
+      });
+  };
+
+  const confirmSetInSync = () => {
+    showConfirmDialog({
+      question: t('setInSyncQuestion'),
+      onConfirm: () => {
+        setInSyncAction();
+        setPopover?.(false);
+      },
+    });
+  };
+
+  const getProcessLink = () => {
+    const processUrl = `${
+      lastUncompletedProcess?.isTask ? PATH_TASKS : PATH_WORKFLOWS
+    }/${lastUncompletedProcess?.processId}`;
 
-    const [setSubscriptionInSync, { isLoading }] =
-        useSetSubscriptionInSyncMutation();
-    const { showToastMessage } = useShowToastMessage();
-    const { showConfirmDialog } = useContext(ConfirmationDialogContext);
-
-    useEffect(() => {
-        setInSync(subscriptionDetail.insync);
-    }, [subscriptionDetail.insync]);
-
-    const setInSyncAction = () => {
-        setSubscriptionInSync(subscriptionDetail.subscriptionId)
-            .unwrap()
-            .then(() => {
-                setInSync(true);
-                showToastMessage(
-                    ToastTypes.SUCCESS,
-                    t('setInSyncSuccess.text'),
-                    t('setInSyncSuccess.title'),
-                );
-            })
-            .catch((error) => {
-                const errorToastMessage = error?.data?.detail ? (
-                    <WfoInSyncErrorToastMessage
-                        errorDetail={error.data?.detail}
-                    />
-                ) : (
-                    t('setInSyncFailed.text').toString()
-                );
-
-                showToastMessage(
-                    ToastTypes.ERROR,
-                    errorToastMessage,
-                    t('setInSyncFailed.title'),
-                );
-                console.error('Failed to set subscription in sync.', error);
-            });
-    };
-
-    const confirmSetInSync = () => {
-        showConfirmDialog({
-            question: t('setInSyncQuestion'),
-            onConfirm: () => {
-                setInSyncAction();
-                setPopover?.(false);
-            },
-        });
-    };
-
-    const getProcessLink = () => {
-        const processUrl = `${
-            lastUncompletedProcess?.isTask ? PATH_TASKS : PATH_WORKFLOWS
-        }/${lastUncompletedProcess?.processId}`;
-
-        return (
-            <>
-                <Link
-                    href={processUrl}
-                    css={{
-                        paddingLeft: theme.base / 2,
-                        paddingRight: theme.base,
-                    }}
-                >
-                    {t('see')} {lastUncompletedProcess?.processId}
-                </Link>
-                <WfoIsAllowedToRender resource={PolicyResource.PROCESS_RETRY}>
-                    <EuiButton
-                        isLoading={isLoading}
-                        isDisabled={isLoading}
-                        color="danger"
-                        size="s"
-                        onClick={confirmSetInSync}
-                    >
-                        {t('setInSync')}
-                    </EuiButton>
-                </WfoIsAllowedToRender>
-            </>
-        );
-    };
-
-    const allowInSyncButton = !inSync && lastUncompletedProcess;
-    const showDate = inSync && lastTaskRunDate;
-
-    const InSyncDetails = () => (
-        <>
-            <div css={{ display: 'flex' }}>
-                <div css={{ paddingRight: theme.base / 4, display: 'flex' }}>
-                    <WfoInsyncIcon inSync={inSync} />
-                </div>
-                {showDate && `(${formatDate(lastTaskRunDate)})`}
-                {!showDate && compactMode && t('subscriptionIsInSync')}
-            </div>
-        </>
+    return (
+      <>
+        <Link
+          href={processUrl}
+          css={{
+            paddingLeft: theme.base / 2,
+            paddingRight: theme.base,
+          }}
+        >
+          {t('see')} {lastUncompletedProcess?.processId}
+        </Link>
+        <WfoIsAllowedToRender resource={PolicyResource.PROCESS_RETRY}>
+          <EuiButton isLoading={isLoading} isDisabled={isLoading} color="danger" size="s" onClick={confirmSetInSync}>
+            {t('setInSync')}
+          </EuiButton>
+        </WfoIsAllowedToRender>
+      </>
     );
-
-    const InSyncDetailsWithButton = () => (
-        <>
-            <InSyncDetails />
-            {allowInSyncButton && getProcessLink()}
-        </>
+  };
+
+  const allowInSyncButton = !inSync && lastUncompletedProcess;
+  const showDate = inSync && lastTaskRunDate;
+
+  const InSyncDetails = () => (
+    <>
+      <div css={{ display: 'flex' }}>
+        <div css={{ paddingRight: theme.base / 4, display: 'flex' }}>
+          <WfoInsyncIcon inSync={inSync} />
+        </div>
+        {showDate && `(${formatDate(lastTaskRunDate)})`}
+        {!showDate && compactMode && t('subscriptionIsInSync')}
+      </div>
+    </>
+  );
+
+  const InSyncDetailsWithButton = () => (
+    <>
+      <InSyncDetails />
+      {allowInSyncButton && getProcessLink()}
+    </>
+  );
+
+  const InSyncCompactMenuIcon = () => {
+    const LoadingSecondaryIcon = () => (
+      <div css={spinnerSecondaryIconStyle}>
+        <EuiLoadingSpinner size="s" />
+      </div>
     );
-
-    const InSyncCompactMenuIcon = () => {
-        const LoadingSecondaryIcon = () => (
-            <div css={spinnerSecondaryIconStyle}>
-                <EuiLoadingSpinner size="s" />
-            </div>
-        );
-        if (!allowInSyncButton) {
-            return (
-                <div css={disabledIconStyle}>
-                    <WfoInSyncCompactIcon disabled />
-                    {isLoading ? (
-                        <LoadingSecondaryIcon />
-                    ) : (
-                        <div css={secondaryIconStyle}>
-                            <WfoCheckmarkCircleFill
-                                width={20}
-                                height={20}
-                                color={theme.colors.primary}
-                            />
-                        </div>
-                    )}
-                </div>
-            );
-        }
-        return (
-            <div css={disabledIconStyle}>
-                <WfoInSyncCompactIcon disabled={false} />
-                {isLoading && <LoadingSecondaryIcon />}
-            </div>
-        );
-    };
-
-    const InSyncCompactMenuItem = () => {
-        return (
-            <div css={[allowInSyncButton && clickableStyle, linkMenuItemStyle]}>
-                <EuiToolTip
-                    position="top"
-                    content={!allowInSyncButton && <InSyncDetails />}
-                >
-                    <EuiContextMenuItem
-                        css={!allowInSyncButton && disabledTextStyle}
-                        icon={<InSyncCompactMenuIcon />}
-                        onClick={confirmSetInSync}
-                        disabled={!allowInSyncButton}
-                    >
-                        {t('setInSync')}
-                    </EuiContextMenuItem>
-                </EuiToolTip>
+    if (!allowInSyncButton) {
+      return (
+        <div css={disabledIconStyle}>
+          <WfoInSyncCompactIcon disabled />
+          {isLoading ?
+            <LoadingSecondaryIcon />
+          : <div css={secondaryIconStyle}>
+              <WfoCheckmarkCircleFill width={20} height={20} color={theme.colors.primary} />
             </div>
-        );
-    };
+          }
+        </div>
+      );
+    }
+    return (
+      <div css={disabledIconStyle}>
+        <WfoInSyncCompactIcon disabled={false} />
+        {isLoading && <LoadingSecondaryIcon />}
+      </div>
+    );
+  };
 
+  const InSyncCompactMenuItem = () => {
     return (
-        <>
-            {!compactMode ? (
-                <InSyncDetailsWithButton />
-            ) : (
-                <InSyncCompactMenuItem />
-            )}
-        </>
+      <div css={[allowInSyncButton && clickableStyle, linkMenuItemStyle]}>
+        <EuiToolTip position="top" content={!allowInSyncButton && <InSyncDetails />}>
+          <EuiContextMenuItem
+            css={!allowInSyncButton && disabledTextStyle}
+            icon={<InSyncCompactMenuIcon />}
+            onClick={confirmSetInSync}
+            disabled={!allowInSyncButton}
+          >
+            {t('setInSync')}
+          </EuiContextMenuItem>
+        </EuiToolTip>
+      </div>
     );
+  };
+
+  return (
+    <>
+      {!compactMode ?
+        <InSyncDetailsWithButton />
+      : <InSyncCompactMenuItem />}
+    </>
+  );
 };