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

package/src/components/WfoSubscription/WfoSubscriptionGeneral.tsx

@@ -3,80 +3,68 @@ import React from 'react';
 import { EuiFlexGrid, EuiFlexItem } from '@elastic/eui';
 
 import {
-    WfoSubscriptionDetailSection,
-    WfoSubscriptionFixedInputSection,
-    WfoSubscriptionMetadataSection,
-    WfoSubscriptionProductInfoSection,
-    useSubscriptionDetailGeneralSectionConfigurationOverride,
+  WfoSubscriptionDetailSection,
+  WfoSubscriptionFixedInputSection,
+  WfoSubscriptionMetadataSection,
+  WfoSubscriptionProductInfoSection,
+  useSubscriptionDetailGeneralSectionConfigurationOverride,
 } from '@/components';
 import { WfoSubscriptionDetailGeneralConfiguration } from '@/rtk';
 import { SubscriptionDetail } from '@/types';
 import { toOptionalArrayEntry } from '@/utils';
 
 interface WfoSubscriptionGeneralProps {
-    subscriptionDetail: SubscriptionDetail;
+  subscriptionDetail: SubscriptionDetail;
 }
 
 export enum WfoSubscriptionGeneralSections {
-    BLOCK_TITLE_SUBSCRIPTION_DETAILS = 'blockTitleSubscriptionDetails',
-    BLOCK_TITLE_METADATA = 'metadata',
-    BLOCK_TITLE_FIXED_INPUTS = 'blockTitleFixedInputs',
-    BLOCK_TITLE_PRODUCT_INFO = 'blockTitleProductInfo',
+  BLOCK_TITLE_SUBSCRIPTION_DETAILS = 'blockTitleSubscriptionDetails',
+  BLOCK_TITLE_METADATA = 'metadata',
+  BLOCK_TITLE_FIXED_INPUTS = 'blockTitleFixedInputs',
+  BLOCK_TITLE_PRODUCT_INFO = 'blockTitleProductInfo',
 }
 
-export const WfoSubscriptionGeneral = ({
-    subscriptionDetail,
-}: WfoSubscriptionGeneralProps) => {
-    const { overrideSections } =
-        useSubscriptionDetailGeneralSectionConfigurationOverride();
+export const WfoSubscriptionGeneral = ({ subscriptionDetail }: WfoSubscriptionGeneralProps) => {
+  const { overrideSections } = useSubscriptionDetailGeneralSectionConfigurationOverride();
 
-    const { metadata, fixedInputs, product } = subscriptionDetail;
+  const { metadata, fixedInputs, product } = subscriptionDetail;
 
-    const hasMetadata = Object.entries(metadata).length > 0;
-    const hasFixedInputs = fixedInputs.length > 0;
+  const hasMetadata = Object.entries(metadata).length > 0;
+  const hasFixedInputs = fixedInputs.length > 0;
 
-    const defaultConfiguration: WfoSubscriptionDetailGeneralConfiguration[] = [
-        {
-            id: WfoSubscriptionGeneralSections.BLOCK_TITLE_SUBSCRIPTION_DETAILS,
-            node: (
-                <WfoSubscriptionDetailSection
-                    subscriptionDetail={subscriptionDetail}
-                />
-            ),
-        },
-        ...toOptionalArrayEntry(
-            {
-                id: WfoSubscriptionGeneralSections.BLOCK_TITLE_METADATA,
-                node: <WfoSubscriptionMetadataSection metadata={metadata} />,
-            },
-            hasMetadata,
-        ),
-        ...toOptionalArrayEntry(
-            {
-                id: WfoSubscriptionGeneralSections.BLOCK_TITLE_FIXED_INPUTS,
-                node: (
-                    <WfoSubscriptionFixedInputSection
-                        fixedInputs={fixedInputs}
-                    />
-                ),
-            },
-            hasFixedInputs,
-        ),
-        {
-            id: WfoSubscriptionGeneralSections.BLOCK_TITLE_PRODUCT_INFO,
-            node: <WfoSubscriptionProductInfoSection product={product} />,
-        },
-    ];
+  const defaultConfiguration: WfoSubscriptionDetailGeneralConfiguration[] = [
+    {
+      id: WfoSubscriptionGeneralSections.BLOCK_TITLE_SUBSCRIPTION_DETAILS,
+      node: <WfoSubscriptionDetailSection subscriptionDetail={subscriptionDetail} />,
+    },
+    ...toOptionalArrayEntry(
+      {
+        id: WfoSubscriptionGeneralSections.BLOCK_TITLE_METADATA,
+        node: <WfoSubscriptionMetadataSection metadata={metadata} />,
+      },
+      hasMetadata,
+    ),
+    ...toOptionalArrayEntry(
+      {
+        id: WfoSubscriptionGeneralSections.BLOCK_TITLE_FIXED_INPUTS,
+        node: <WfoSubscriptionFixedInputSection fixedInputs={fixedInputs} />,
+      },
+      hasFixedInputs,
+    ),
+    {
+      id: WfoSubscriptionGeneralSections.BLOCK_TITLE_PRODUCT_INFO,
+      node: <WfoSubscriptionProductInfoSection product={product} />,
+    },
+  ];
 
-    const configuration: WfoSubscriptionDetailGeneralConfiguration[] =
-        overrideSections?.(defaultConfiguration, subscriptionDetail) ||
-        defaultConfiguration;
+  const configuration: WfoSubscriptionDetailGeneralConfiguration[] =
+    overrideSections?.(defaultConfiguration, subscriptionDetail) || defaultConfiguration;
 
-    return (
-        <EuiFlexGrid direction="row">
-            {configuration.map(({ id, node }) => (
-                <EuiFlexItem key={id}>{node}</EuiFlexItem>
-            ))}
-        </EuiFlexGrid>
-    );
+  return (
+    <EuiFlexGrid direction="row">
+      {configuration.map(({ id, node }) => (
+        <EuiFlexItem key={id}>{node}</EuiFlexItem>
+      ))}
+    </EuiFlexGrid>
+  );
 };

package/src/components/WfoSubscription/WfoSubscriptionGeneralSections/WfoSubscriptionDetailSection.tsx

@@ -3,105 +3,81 @@ import React from 'react';
 import { useTranslations } from 'next-intl';
 
 import {
-    SubscriptionKeyValueBlock,
-    WfoCustomerDescriptionsField,
-    WfoInSyncField,
-    WfoSubscriptionDetailNoteEdit,
-    WfoSubscriptionStatusBadge,
+  SubscriptionKeyValueBlock,
+  WfoCustomerDescriptionsField,
+  WfoInSyncField,
+  WfoSubscriptionDetailNoteEdit,
+  WfoSubscriptionStatusBadge,
 } from '@/components';
 import { SubscriptionDetail } from '@/types';
 import { formatDate } from '@/utils';
 
 interface WfoSubscriptionDetailSectionProps {
-    subscriptionDetail: SubscriptionDetail;
+  subscriptionDetail: SubscriptionDetail;
 }
 
-export const WfoSubscriptionDetailSection = ({
-    subscriptionDetail,
-}: WfoSubscriptionDetailSectionProps) => {
-    const t = useTranslations('subscriptions.detail');
+export const WfoSubscriptionDetailSection = ({ subscriptionDetail }: WfoSubscriptionDetailSectionProps) => {
+  const t = useTranslations('subscriptions.detail');
 
-    const {
-        subscriptionId,
-        product,
-        description,
-        startDate,
-        endDate,
-        status,
-        customer,
-        customerDescriptions,
-    } = subscriptionDetail;
+  const { subscriptionId, product, description, startDate, endDate, status, customer, customerDescriptions } =
+    subscriptionDetail;
 
-    const subscriptionDetailBlockData = [
-        {
-            key: t('subscriptionId'),
-            value: subscriptionId,
-            textToCopy: subscriptionId,
-        },
-        {
-            key: t('productName'),
-            value: product.name,
-        },
-        {
-            key: t('description'),
-            value: description,
-        },
-        {
-            key: t('startDate'),
-            value: formatDate(startDate),
-        },
-        {
-            key: t('endDate'),
-            value: formatDate(endDate),
-        },
-        {
-            key: t('status'),
-            value: <WfoSubscriptionStatusBadge status={status} />,
-        },
-        {
-            key: t('insync'),
-            value: <WfoInSyncField subscriptionDetail={subscriptionDetail} />,
-        },
-        {
-            key: t('customer'),
-            value:
-                subscriptionDetail && subscriptionDetail.customer
-                    ? `${customer?.fullname}`
-                    : '-',
-        },
-        {
-            key: t('customerUuid'),
-            value:
-                subscriptionDetail && customer
-                    ? `${customer?.customerId}`
-                    : '-',
-            textToCopy: customer?.customerId,
-        },
-        {
-            key: t('customerDescriptions'),
-            value: (
-                <WfoCustomerDescriptionsField
-                    customerDescriptions={customerDescriptions}
-                    subscriptionCustomerId={customer?.customerId}
-                    subscriptionId={subscriptionId}
-                />
-            ),
-        },
-        {
-            key: t('note'),
-            value: (
-                <WfoSubscriptionDetailNoteEdit
-                    subscriptionId={subscriptionId}
-                    onlyShowOnHover={true}
-                />
-            ),
-        },
-    ];
-
-    return (
-        <SubscriptionKeyValueBlock
-            title={t('blockTitleSubscriptionDetails')}
-            keyValues={subscriptionDetailBlockData}
+  const subscriptionDetailBlockData = [
+    {
+      key: t('subscriptionId'),
+      value: subscriptionId,
+      textToCopy: subscriptionId,
+    },
+    {
+      key: t('productName'),
+      value: product.name,
+    },
+    {
+      key: t('description'),
+      value: description,
+    },
+    {
+      key: t('startDate'),
+      value: formatDate(startDate),
+    },
+    {
+      key: t('endDate'),
+      value: formatDate(endDate),
+    },
+    {
+      key: t('status'),
+      value: <WfoSubscriptionStatusBadge status={status} />,
+    },
+    {
+      key: t('insync'),
+      value: <WfoInSyncField subscriptionDetail={subscriptionDetail} />,
+    },
+    {
+      key: t('customer'),
+      value: subscriptionDetail && subscriptionDetail.customer ? `${customer?.fullname}` : '-',
+    },
+    {
+      key: t('customerUuid'),
+      value: subscriptionDetail && customer ? `${customer?.customerId}` : '-',
+      textToCopy: customer?.customerId,
+    },
+    {
+      key: t('customerDescriptions'),
+      value: (
+        <WfoCustomerDescriptionsField
+          customerDescriptions={customerDescriptions}
+          subscriptionCustomerId={customer?.customerId}
+          subscriptionId={subscriptionId}
         />
-    );
+      ),
+    },
+    {
+      key: t('note'),
+      value: <WfoSubscriptionDetailNoteEdit subscriptionId={subscriptionId} onlyShowOnHover={true} />,
+    },
+  ];
+
+  return (
+    <SubscriptionKeyValueBlock title={t('blockTitleSubscriptionDetails')} keyValues={subscriptionDetailBlockData} />
+  );
 };

package/src/components/WfoSubscription/WfoSubscriptionGeneralSections/WfoSubscriptionFixedInputSection.tsx

@@ -6,23 +6,16 @@ import { SubscriptionKeyValueBlock } from '@/components';
 import { SubscriptionDetail } from '@/types';
 
 interface WfoSubscriptionFixedInputSectionProps {
-    fixedInputs: SubscriptionDetail['fixedInputs'];
+  fixedInputs: SubscriptionDetail['fixedInputs'];
 }
 
-export const WfoSubscriptionFixedInputSection = ({
-    fixedInputs,
-}: WfoSubscriptionFixedInputSectionProps) => {
-    const t = useTranslations('subscriptions.detail');
+export const WfoSubscriptionFixedInputSection = ({ fixedInputs }: WfoSubscriptionFixedInputSectionProps) => {
+  const t = useTranslations('subscriptions.detail');
 
-    const fixedInputBlockData = fixedInputs.map((fixedInput) => ({
-        key: fixedInput.field,
-        value: fixedInput.value,
-    }));
+  const fixedInputBlockData = fixedInputs.map((fixedInput) => ({
+    key: fixedInput.field,
+    value: fixedInput.value,
+  }));
 
-    return (
-        <SubscriptionKeyValueBlock
-            title={t('blockTitleFixedInputs')}
-            keyValues={fixedInputBlockData}
-        />
-    );
+  return <SubscriptionKeyValueBlock title={t('blockTitleFixedInputs')} keyValues={fixedInputBlockData} />;
 };

package/src/components/WfoSubscription/WfoSubscriptionGeneralSections/WfoSubscriptionMetadataSection.tsx

@@ -7,23 +7,16 @@ import { SubscriptionDetail } from '@/types';
 import { camelToHuman } from '@/utils';
 
 interface WfoSubscriptionMetadataSectionProps {
-    metadata: SubscriptionDetail['metadata'];
+  metadata: SubscriptionDetail['metadata'];
 }
 
-export const WfoSubscriptionMetadataSection = ({
-    metadata,
-}: WfoSubscriptionMetadataSectionProps) => {
-    const t = useTranslations('subscriptions.detail');
+export const WfoSubscriptionMetadataSection = ({ metadata }: WfoSubscriptionMetadataSectionProps) => {
+  const t = useTranslations('subscriptions.detail');
 
-    const metadataBlockData = Object.entries(metadata).map(([key, value]) => ({
-        key: camelToHuman(key),
-        value: <WfoJsonCodeBlock data={value} isBasicStyle />,
-    }));
+  const metadataBlockData = Object.entries(metadata).map(([key, value]) => ({
+    key: camelToHuman(key),
+    value: <WfoJsonCodeBlock data={value} isBasicStyle />,
+  }));
 
-    return (
-        <SubscriptionKeyValueBlock
-            title={t('metadata')}
-            keyValues={metadataBlockData}
-        />
-    );
+  return <SubscriptionKeyValueBlock title={t('metadata')} keyValues={metadataBlockData} />;
 };

package/src/components/WfoSubscription/WfoSubscriptionGeneralSections/WfoSubscriptionProductInfoSection.tsx

@@ -7,49 +7,42 @@ import { SubscriptionDetail } from '@/types';
 import { formatDate } from '@/utils';
 
 interface WfoSubscriptionProductInfoSectionProps {
-    product: SubscriptionDetail['product'];
+  product: SubscriptionDetail['product'];
 }
 
-export const WfoSubscriptionProductInfoSection = ({
-    product,
-}: WfoSubscriptionProductInfoSectionProps) => {
-    const t = useTranslations('subscriptions.detail');
+export const WfoSubscriptionProductInfoSection = ({ product }: WfoSubscriptionProductInfoSectionProps) => {
+  const t = useTranslations('subscriptions.detail');
 
-    const productInfoBlockData = [
-        {
-            key: t('name'),
-            value: product.name,
-        },
-        {
-            key: t('description'),
-            value: product.description,
-        },
-        {
-            key: t('productType'),
-            value: product.productType,
-        },
-        {
-            key: t('tag'),
-            value: product.tag,
-        },
-        {
-            key: t('status'),
-            value: <WfoProductStatusBadge status={product.status} />,
-        },
-        {
-            key: t('created'),
-            value: formatDate(product.createdAt),
-        },
-        {
-            key: t('endDate'),
-            value: formatDate(product.endDate),
-        },
-    ];
+  const productInfoBlockData = [
+    {
+      key: t('name'),
+      value: product.name,
+    },
+    {
+      key: t('description'),
+      value: product.description,
+    },
+    {
+      key: t('productType'),
+      value: product.productType,
+    },
+    {
+      key: t('tag'),
+      value: product.tag,
+    },
+    {
+      key: t('status'),
+      value: <WfoProductStatusBadge status={product.status} />,
+    },
+    {
+      key: t('created'),
+      value: formatDate(product.createdAt),
+    },
+    {
+      key: t('endDate'),
+      value: formatDate(product.endDate),
+    },
+  ];
 
-    return (
-        <SubscriptionKeyValueBlock
-            title={t('blockTitleProductInfo')}
-            keyValues={productInfoBlockData}
-        />
-    );
+  return <SubscriptionKeyValueBlock title={t('blockTitleProductInfo')} keyValues={productInfoBlockData} />;
 };

package/src/components/WfoSubscription/WfoSubscriptionProductBlock/WfoProductBlockKeyValueRow.tsx

@@ -13,42 +13,42 @@ export const KEY_CELL_CLASS_NAME = 'key-cell';
 export const VALUE_CELL_CLASS_NAME = 'value-cell';
 
 export type WfoProductBlockKeyValueRowProps = {
-    fieldValue: FieldValue | RenderableFieldValue;
-    allFieldValues: FieldValue[] | RenderableFieldValue[];
-    className?: string;
+  fieldValue: FieldValue | RenderableFieldValue;
+  allFieldValues: FieldValue[] | RenderableFieldValue[];
+  className?: string;
 };
 
-export const WfoProductBlockKeyValueRow: FC<
-    WfoProductBlockKeyValueRowProps
-> = ({ fieldValue, allFieldValues, className }) => {
-    const { leftColumnStyle, rowStyle } = useWithOrchestratorTheme(getStyles);
-    const { getOverriddenValue } = useSubscriptionDetailValueOverride();
-
-    const { field, value } = fieldValue;
-
-    const WfoProductBlockValue: FC<{
-        value: RenderableFieldValue['value'];
-    }> = ({ value }) => {
-        if (typeof value === 'boolean') {
-            return <EuiBadge>{value.toString()}</EuiBadge>;
-        } else if (Array.isArray(value)) {
-            const result = value.join(', ');
-            return <>{result}</>;
-        } else {
-            return <>{value}</>;
-        }
-    };
-
-    return (
-        <tr className={className} css={rowStyle}>
-            <td className={KEY_CELL_CLASS_NAME} css={leftColumnStyle}>
-                <b>{camelToHuman(field)}</b>
-            </td>
-            <td className={VALUE_CELL_CLASS_NAME}>
-                {getOverriddenValue(fieldValue, allFieldValues) ?? (
-                    <WfoProductBlockValue value={value} />
-                )}
-            </td>
-        </tr>
-    );
+export const WfoProductBlockKeyValueRow: FC<WfoProductBlockKeyValueRowProps> = ({
+  fieldValue,
+  allFieldValues,
+  className,
+}) => {
+  const { leftColumnStyle, rowStyle } = useWithOrchestratorTheme(getStyles);
+  const { getOverriddenValue } = useSubscriptionDetailValueOverride();
+
+  const { field, value } = fieldValue;
+
+  const WfoProductBlockValue: FC<{
+    value: RenderableFieldValue['value'];
+  }> = ({ value }) => {
+    if (typeof value === 'boolean') {
+      return <EuiBadge>{value.toString()}</EuiBadge>;
+    } else if (Array.isArray(value)) {
+      const result = value.join(', ');
+      return <>{result}</>;
+    } else {
+      return <>{value}</>;
+    }
+  };
+
+  return (
+    <tr className={className} css={rowStyle}>
+      <td className={KEY_CELL_CLASS_NAME} css={leftColumnStyle}>
+        <b>{camelToHuman(field)}</b>
+      </td>
+      <td className={VALUE_CELL_CLASS_NAME}>
+        {getOverriddenValue(fieldValue, allFieldValues) ?? <WfoProductBlockValue value={value} />}
+      </td>
+    </tr>
+  );
 };