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

package/src/components/WfoSubscription/WfoInUseByRelations.tsx

@@ -3,12 +3,7 @@ import React from 'react';
 import { useTranslations } from 'next-intl';
 import Link from 'next/link';
 
-import {
-    WfoError,
-    WfoFirstPartUUID,
-    WfoKeyValueTable,
-    WfoLoading,
-} from '@/components';
+import { WfoError, WfoFirstPartUUID, WfoKeyValueTable, WfoLoading } from '@/components';
 import type { WfoKeyValueTableDataType } from '@/components';
 import { PATH_SUBSCRIPTIONS } from '@/components';
 import { useWithOrchestratorTheme } from '@/hooks';
@@ -18,79 +13,60 @@ import { InUseByRelation, InUseByRelationDetail } from '@/types';
 import { getSubscriptionDetailStyles } from './styles';
 
 interface WfoInUseByRelationsProps {
-    inUseByRelations: InUseByRelation[];
+  inUseByRelations: InUseByRelation[];
 }
 
-export const WfoInUseByRelations = ({
-    inUseByRelations,
-}: WfoInUseByRelationsProps) => {
-    const t = useTranslations('subscriptions.detail');
-    const { inUseByRelationDetailsStyle } = useWithOrchestratorTheme(
-        getSubscriptionDetailStyles,
-    );
-    const subscriptionIds = inUseByRelations
-        .map((relation) => relation.subscription_id)
-        .join('|');
-    const { data, isLoading, isError } = useGetInUseByRelationDetailsQuery({
-        subscriptionIds,
-    });
+export const WfoInUseByRelations = ({ inUseByRelations }: WfoInUseByRelationsProps) => {
+  const t = useTranslations('subscriptions.detail');
+  const { inUseByRelationDetailsStyle } = useWithOrchestratorTheme(getSubscriptionDetailStyles);
+  const subscriptionIds = inUseByRelations.map((relation) => relation.subscription_id).join('|');
+  const { data, isLoading, isError } = useGetInUseByRelationDetailsQuery({
+    subscriptionIds,
+  });
 
-    if (isError) {
-        return <WfoError />;
-    }
+  if (isError) {
+    return <WfoError />;
+  }
 
-    if (isLoading) {
-        return <WfoLoading />;
-    }
+  if (isLoading) {
+    return <WfoLoading />;
+  }
 
-    const getKeyValues = (
-        inUseByRelationDetails: InUseByRelationDetail,
-    ): WfoKeyValueTableDataType[] => {
-        return [
-            {
-                key: t('subscriptionId'),
-                value: (
-                    <WfoFirstPartUUID
-                        UUID={inUseByRelationDetails.subscriptionId}
-                        showCopyIcon={false}
-                    />
-                ),
-                textToCopy: inUseByRelationDetails.subscriptionId,
-            },
-            {
-                key: t('description'),
-                value: (
-                    <Link
-                        href={`${PATH_SUBSCRIPTIONS}/${inUseByRelationDetails.subscriptionId}`}
-                        target="_blank"
-                    >
-                        {inUseByRelationDetails.description}
-                    </Link>
-                ),
-                textToCopy: inUseByRelationDetails.description,
-            },
-            {
-                key: t('productName'),
-                value: inUseByRelationDetails.product.name,
-                textToCopy: inUseByRelationDetails.product.name,
-            },
-        ];
-    };
+  const getKeyValues = (inUseByRelationDetails: InUseByRelationDetail): WfoKeyValueTableDataType[] => {
+    return [
+      {
+        key: t('subscriptionId'),
+        value: <WfoFirstPartUUID UUID={inUseByRelationDetails.subscriptionId} showCopyIcon={false} />,
+        textToCopy: inUseByRelationDetails.subscriptionId,
+      },
+      {
+        key: t('description'),
+        value: (
+          <Link href={`${PATH_SUBSCRIPTIONS}/${inUseByRelationDetails.subscriptionId}`} target="_blank">
+            {inUseByRelationDetails.description}
+          </Link>
+        ),
+        textToCopy: inUseByRelationDetails.description,
+      },
+      {
+        key: t('productName'),
+        value: inUseByRelationDetails.product.name,
+        textToCopy: inUseByRelationDetails.product.name,
+      },
+    ];
+  };
 
-    return (
-        <>
-            {data?.inUseByRelationDetails.map((relation, index) => {
-                const keyValues = getKeyValues(relation);
+  return (
+    <>
+      {data?.inUseByRelationDetails.map((relation, index) => {
+        const keyValues = getKeyValues(relation);
 
-                return (
-                    <div css={inUseByRelationDetailsStyle} key={index}>
-                        <WfoKeyValueTable
-                            keyValues={keyValues}
-                            showCopyToClipboardIcon={true}
-                        />
-                    </div>
-                );
-            })}
-        </>
-    );
+        return (
+          <div css={inUseByRelationDetailsStyle} key={index}>
+            <WfoKeyValueTable keyValues={keyValues} showCopyToClipboardIcon={true} />
+          </div>
+        );
+      })}
+    </>
+  );
 };

package/src/components/WfoSubscription/WfoProcessesTimeline.tsx

@@ -3,201 +3,141 @@ import React from 'react';
 import { useTranslations } from 'next-intl';
 import Link from 'next/link';
 
-import {
-    EuiComment,
-    EuiCommentList,
-    EuiFlexGroup,
-    EuiFlexItem,
-    EuiSpacer,
-    EuiText,
-} from '@elastic/eui';
+import { EuiComment, EuiCommentList, EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText } from '@elastic/eui';
 
 import {
-    PATH_TASKS,
-    PATH_WORKFLOWS,
-    WfoLoading,
-    WfoRadioDropdown,
-    WfoRadioDropdownOption,
-    sortProcessesByDate,
+  PATH_TASKS,
+  PATH_WORKFLOWS,
+  WfoLoading,
+  WfoRadioDropdown,
+  WfoRadioDropdownOption,
+  sortProcessesByDate,
 } from '@/components';
 import { useWithOrchestratorTheme } from '@/hooks';
 import { SortOrder, SubscriptionDetailProcess } from '@/types';
-import {
-    parseDate,
-    parseDateToLocaleDateTimeString,
-    upperCaseFirstChar,
-} from '@/utils';
+import { parseDate, parseDateToLocaleDateTimeString, upperCaseFirstChar } from '@/utils';
 
 import { WfoProcessStatusBadge } from '../WfoBadges';
 import { WfoTargetTypeIcon } from './WfoTargetTypeIcon';
 import { getSubscriptionDetailStyles } from './styles';
 
 interface WfoProcessCardProps {
-    subscriptionDetailProcess: SubscriptionDetailProcess;
+  subscriptionDetailProcess: SubscriptionDetailProcess;
 }
 
 const WfoProcessCard = ({ subscriptionDetailProcess }: WfoProcessCardProps) => {
-    const t = useTranslations('subscriptions.detail.processDetail');
-    const {
-        tableStyle,
-        labelCellStyle,
-        cellGroupStyle,
-        borderStyle,
-        rowStyle,
-    } = useWithOrchestratorTheme(getSubscriptionDetailStyles);
-    const processUrl = subscriptionDetailProcess.isTask
-        ? PATH_TASKS
-        : PATH_WORKFLOWS;
-
-    const rows = [
-        {
-            label: t('id'),
-            content: (
-                <Link
-                    href={`${processUrl}/${subscriptionDetailProcess.processId}`}
-                >
-                    {subscriptionDetailProcess.processId}
-                </Link>
-            ),
-        },
-        {
-            label: t('status'),
-            content: (
-                <div>
-                    <WfoProcessStatusBadge
-                        processStatus={subscriptionDetailProcess.lastStatus}
-                    />
-                </div>
-            ),
-        },
-        {
-            label: t('startedAt'),
-            content: parseDateToLocaleDateTimeString(
-                parseDate(subscriptionDetailProcess.startedAt),
-            ),
-        },
-        {
-            label: t('startedBy'),
-            content: subscriptionDetailProcess.createdBy,
-        },
-    ];
-
-    return (
-        <div css={tableStyle}>
-            {rows.map(({ label, content }, idx) => (
-                <div key={idx} css={rowStyle}>
-                    <div className="border" css={borderStyle}>
-                        <EuiFlexGroup key={label} css={cellGroupStyle}>
-                            <EuiFlexItem css={labelCellStyle} grow={2}>
-                                {label}
-                            </EuiFlexItem>
-                            <EuiFlexItem grow={9}>{content}</EuiFlexItem>
-                        </EuiFlexGroup>
-                    </div>
-                </div>
-            ))}
+  const t = useTranslations('subscriptions.detail.processDetail');
+  const { tableStyle, labelCellStyle, cellGroupStyle, borderStyle, rowStyle } =
+    useWithOrchestratorTheme(getSubscriptionDetailStyles);
+  const processUrl = subscriptionDetailProcess.isTask ? PATH_TASKS : PATH_WORKFLOWS;
+
+  const rows = [
+    {
+      label: t('id'),
+      content: (
+        <Link href={`${processUrl}/${subscriptionDetailProcess.processId}`}>{subscriptionDetailProcess.processId}</Link>
+      ),
+    },
+    {
+      label: t('status'),
+      content: (
+        <div>
+          <WfoProcessStatusBadge processStatus={subscriptionDetailProcess.lastStatus} />
+        </div>
+      ),
+    },
+    {
+      label: t('startedAt'),
+      content: parseDateToLocaleDateTimeString(parseDate(subscriptionDetailProcess.startedAt)),
+    },
+    {
+      label: t('startedBy'),
+      content: subscriptionDetailProcess.createdBy,
+    },
+  ];
+
+  return (
+    <div css={tableStyle}>
+      {rows.map(({ label, content }, idx) => (
+        <div key={idx} css={rowStyle}>
+          <div className="border" css={borderStyle}>
+            <EuiFlexGroup key={label} css={cellGroupStyle}>
+              <EuiFlexItem css={labelCellStyle} grow={2}>
+                {label}
+              </EuiFlexItem>
+              <EuiFlexItem grow={9}>{content}</EuiFlexItem>
+            </EuiFlexGroup>
+          </div>
         </div>
-    );
+      ))}
+    </div>
+  );
 };
 
 interface WfoRenderSubscriptionProcess {
-    subscriptionDetailProcess: SubscriptionDetailProcess;
+  subscriptionDetailProcess: SubscriptionDetailProcess;
 }
-const WfoRenderSubscriptionProcess = ({
-    subscriptionDetailProcess,
-}: WfoRenderSubscriptionProcess) => {
-    const { timeLineStyle, workflowTargetStyle } = useWithOrchestratorTheme(
-        getSubscriptionDetailStyles,
-    );
-
-    return (
-        <EuiComment
-            username={subscriptionDetailProcess.workflowTarget ?? ''}
-            timelineAvatarAriaLabel={subscriptionDetailProcess.workflowName}
-            timelineAvatar={
-                <WfoTargetTypeIcon
-                    target={subscriptionDetailProcess.workflowTarget}
-                />
-            }
-        >
-            <EuiFlexGroup
-                alignItems="center"
-                gutterSize="s"
-                css={timeLineStyle}
-            >
-                <EuiText css={workflowTargetStyle}>
-                    {upperCaseFirstChar(
-                        subscriptionDetailProcess.workflowTarget,
-                    )}
-                </EuiText>
-                <EuiText>-</EuiText>
-                <EuiText>{subscriptionDetailProcess.workflowName}</EuiText>
-            </EuiFlexGroup>
-
-            <WfoProcessCard
-                subscriptionDetailProcess={subscriptionDetailProcess}
-            />
-        </EuiComment>
-    );
+const WfoRenderSubscriptionProcess = ({ subscriptionDetailProcess }: WfoRenderSubscriptionProcess) => {
+  const { timeLineStyle, workflowTargetStyle } = useWithOrchestratorTheme(getSubscriptionDetailStyles);
+
+  return (
+    <EuiComment
+      username={subscriptionDetailProcess.workflowTarget ?? ''}
+      timelineAvatarAriaLabel={subscriptionDetailProcess.workflowName}
+      timelineAvatar={<WfoTargetTypeIcon target={subscriptionDetailProcess.workflowTarget} />}
+    >
+      <EuiFlexGroup alignItems="center" gutterSize="s" css={timeLineStyle}>
+        <EuiText css={workflowTargetStyle}>{upperCaseFirstChar(subscriptionDetailProcess.workflowTarget)}</EuiText>
+        <EuiText>-</EuiText>
+        <EuiText>{subscriptionDetailProcess.workflowName}</EuiText>
+      </EuiFlexGroup>
+
+      <WfoProcessCard subscriptionDetailProcess={subscriptionDetailProcess} />
+    </EuiComment>
+  );
 };
 
 interface WfoProcessesTimelineProps {
-    subscriptionDetailProcesses: SubscriptionDetailProcess[];
+  subscriptionDetailProcesses: SubscriptionDetailProcess[];
 }
 
-export const WfoProcessesTimeline = ({
-    subscriptionDetailProcesses,
-}: WfoProcessesTimelineProps) => {
-    const t = useTranslations('subscriptions.detail.workflowsTab');
-    const options: WfoRadioDropdownOption<SortOrder>[] = [
-        {
-            label: t('startWithOldestLabel'),
-            id: 'radioButtonOldest',
-            value: SortOrder.ASC,
-        },
-        {
-            label: t('startWithNewestLabel'),
-            id: 'radioButtonNewest',
-            value: SortOrder.DESC,
-        },
-    ];
-
-    const [selectedOption, setSelectedOption] = React.useState(options[0]);
-
-    const handleOnSelectOption = (
-        option: WfoRadioDropdownOption<SortOrder>,
-    ) => {
-        setSelectedOption(option);
-    };
-
-    const sortedProcesses = sortProcessesByDate(
-        subscriptionDetailProcesses,
-        selectedOption.value,
-    );
-
-    return (
-        <>
-            <EuiSpacer size={'m'} />
-            {!subscriptionDetailProcesses && <WfoLoading />}
-            <WfoRadioDropdown
-                options={options}
-                onUpdateOption={handleOnSelectOption}
-                selectedOption={selectedOption}
-            />
-            {sortedProcesses && (
-                <EuiCommentList aria-label="Processes">
-                    {sortedProcesses
-                        .filter((process) => !process.isTask)
-                        .map((subscriptionDetailProcess, index) => (
-                            <WfoRenderSubscriptionProcess
-                                key={index}
-                                subscriptionDetailProcess={
-                                    subscriptionDetailProcess
-                                }
-                            />
-                        ))}
-                </EuiCommentList>
-            )}
-        </>
-    );
+export const WfoProcessesTimeline = ({ subscriptionDetailProcesses }: WfoProcessesTimelineProps) => {
+  const t = useTranslations('subscriptions.detail.workflowsTab');
+  const options: WfoRadioDropdownOption<SortOrder>[] = [
+    {
+      label: t('startWithOldestLabel'),
+      id: 'radioButtonOldest',
+      value: SortOrder.ASC,
+    },
+    {
+      label: t('startWithNewestLabel'),
+      id: 'radioButtonNewest',
+      value: SortOrder.DESC,
+    },
+  ];
+
+  const [selectedOption, setSelectedOption] = React.useState(options[0]);
+
+  const handleOnSelectOption = (option: WfoRadioDropdownOption<SortOrder>) => {
+    setSelectedOption(option);
+  };
+
+  const sortedProcesses = sortProcessesByDate(subscriptionDetailProcesses, selectedOption.value);
+
+  return (
+    <>
+      <EuiSpacer size={'m'} />
+      {!subscriptionDetailProcesses && <WfoLoading />}
+      <WfoRadioDropdown options={options} onUpdateOption={handleOnSelectOption} selectedOption={selectedOption} />
+      {sortedProcesses && (
+        <EuiCommentList aria-label="Processes">
+          {sortedProcesses
+            .filter((process) => !process.isTask)
+            .map((subscriptionDetailProcess, index) => (
+              <WfoRenderSubscriptionProcess key={index} subscriptionDetailProcess={subscriptionDetailProcess} />
+            ))}
+        </EuiCommentList>
+      )}
+    </>
+  );
 };