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

package/src/components/WfoSubscriptionsList/WfoSubscriptionsList.tsx

@@ -5,278 +5,234 @@ import Link from 'next/link';
 import { useRouter } from 'next/router';
 
 import {
-    ColumnType,
-    FilterQuery,
-    PATH_SUBSCRIPTIONS,
-    Pagination,
-    WfoAdvancedTable,
-    WfoAdvancedTableColumnConfig,
-    WfoDateTime,
-    WfoInlineJson,
-    WfoInsyncIcon,
-    WfoJsonCodeBlock,
-    WfoSubscriptionActions,
-    WfoSubscriptionNoteEdit,
-    WfoSubscriptionStatusBadge,
-    getPageIndexChangeHandler,
-    getPageSizeChangeHandler,
+  ColumnType,
+  FilterQuery,
+  PATH_SUBSCRIPTIONS,
+  Pagination,
+  WfoAdvancedTable,
+  WfoAdvancedTableColumnConfig,
+  WfoDateTime,
+  WfoInlineJson,
+  WfoInsyncIcon,
+  WfoJsonCodeBlock,
+  WfoSubscriptionActions,
+  WfoSubscriptionNoteEdit,
+  WfoSubscriptionStatusBadge,
+  getPageIndexChangeHandler,
+  getPageSizeChangeHandler,
 } from '@/components';
 import {
-    SubscriptionListItem,
-    mapGraphQlSubscriptionsResultToPageInfo,
-    mapGraphQlSubscriptionsResultToSubscriptionListItems,
+  SubscriptionListItem,
+  mapGraphQlSubscriptionsResultToPageInfo,
+  mapGraphQlSubscriptionsResultToSubscriptionListItems,
 } from '@/components';
 import { mapSortableAndFilterableValuesToTableColumnConfig } from '@/components/WfoTable/WfoTable/utils';
 import { DataDisplayParams, useShowToastMessage } from '@/hooks';
-import {
-    useGetSubscriptionListQuery,
-    useLazyGetSubscriptionListQuery,
-} from '@/rtk/endpoints/subscriptionList';
+import { useGetSubscriptionListQuery, useLazyGetSubscriptionListQuery } from '@/rtk/endpoints/subscriptionList';
 import { mapRtkErrorToWfoError } from '@/rtk/utils';
 import { GraphqlQueryVariables, SortOrder } from '@/types';
-import {
-    getQueryVariablesForExport,
-    getTypedFieldFromObject,
-    parseDateToLocaleDateTimeString,
-} from '@/utils';
-import {
-    csvDownloadHandler,
-    getCsvFileNameWithDate,
-} from '@/utils/csvDownload';
+import { getQueryVariablesForExport, getTypedFieldFromObject, parseDateToLocaleDateTimeString } from '@/utils';
+import { csvDownloadHandler, getCsvFileNameWithDate } from '@/utils/csvDownload';
 
 import {
-    DEFAULT_PAGE_SIZES,
-    SUBSCRIPTIONS_TABLE_LOCAL_STORAGE_KEY,
-    TableColumnKeys,
-    WfoDataSorting,
-    WfoFirstPartUUID,
-    getDataSortHandler,
-    getQueryStringHandler,
+  DEFAULT_PAGE_SIZES,
+  SUBSCRIPTIONS_TABLE_LOCAL_STORAGE_KEY,
+  TableColumnKeys,
+  WfoDataSorting,
+  WfoFirstPartUUID,
+  getDataSortHandler,
+  getQueryStringHandler,
 } from '../WfoTable';
 
 export type WfoSubscriptionsListProps = {
-    alwaysOnFilters?: FilterQuery<SubscriptionListItem>[];
-    dataDisplayParams: DataDisplayParams<SubscriptionListItem>;
-    setDataDisplayParam: <
-        DisplayParamKey extends keyof DataDisplayParams<SubscriptionListItem>,
-    >(
-        prop: DisplayParamKey,
-        value: DataDisplayParams<SubscriptionListItem>[DisplayParamKey],
-    ) => void;
-    hiddenColumns: TableColumnKeys<SubscriptionListItem> | undefined;
+  alwaysOnFilters?: FilterQuery<SubscriptionListItem>[];
+  dataDisplayParams: DataDisplayParams<SubscriptionListItem>;
+  setDataDisplayParam: <DisplayParamKey extends keyof DataDisplayParams<SubscriptionListItem>>(
+    prop: DisplayParamKey,
+    value: DataDisplayParams<SubscriptionListItem>[DisplayParamKey],
+  ) => void;
+  hiddenColumns: TableColumnKeys<SubscriptionListItem> | undefined;
 };
 
 export const WfoSubscriptionsList: FC<WfoSubscriptionsListProps> = ({
-    alwaysOnFilters,
-    dataDisplayParams,
-    setDataDisplayParam,
-    hiddenColumns,
+  alwaysOnFilters,
+  dataDisplayParams,
+  setDataDisplayParam,
+  hiddenColumns,
 }) => {
-    const router = useRouter();
-    const t = useTranslations('subscriptions.index');
-    const tError = useTranslations('errors');
-    const { showToastMessage } = useShowToastMessage();
-
-    const { sortBy, queryString, pageIndex, pageSize } = dataDisplayParams;
-
-    const graphqlQueryVariables: GraphqlQueryVariables<SubscriptionListItem> = {
-        first: pageSize,
-        after: pageIndex * pageSize,
-        sortBy,
-        filterBy: alwaysOnFilters,
-        query: queryString || undefined,
-    };
-
-    const { data, isFetching, error, endpointName } =
-        useGetSubscriptionListQuery(graphqlQueryVariables);
-
-    const subscriptionList =
-        mapGraphQlSubscriptionsResultToSubscriptionListItems(data);
-
-    const tableColumnConfig: WfoAdvancedTableColumnConfig<SubscriptionListItem> =
-        {
-            subscriptionId: {
-                columnType: ColumnType.DATA,
-                label: t('id'),
-                width: '100px',
-                renderData: (value) => <WfoFirstPartUUID UUID={value} />,
-                renderDetails: (value) => value,
-                renderTooltip: (value) => value,
-            },
-            description: {
-                columnType: ColumnType.DATA,
-                label: t('description'),
-                width: '500px',
-                renderData: (value, record) => (
-                    <Link href={`/subscriptions/${record.subscriptionId}`}>
-                        {value}
-                    </Link>
-                ),
-                renderTooltip: (value) => value,
-            },
-            status: {
-                columnType: ColumnType.DATA,
-                label: t('status'),
-                width: '120px',
-                renderData: (value) => (
-                    <WfoSubscriptionStatusBadge status={value} />
-                ),
-            },
-            insync: {
-                columnType: ColumnType.DATA,
-                label: t('insync'),
-                width: '80px',
-                renderData: (value) => <WfoInsyncIcon inSync={value} />,
-            },
-            productName: {
-                columnType: ColumnType.DATA,
-                label: t('product'),
-            },
-            tag: {
-                columnType: ColumnType.DATA,
-                label: t('tag'),
-                width: '100px',
-            },
-            customerFullname: {
-                columnType: ColumnType.DATA,
-                label: t('customerFullname'),
-            },
-            customerShortcode: {
-                columnType: ColumnType.DATA,
-                label: t('customerShortcode'),
-                width: '150px',
-            },
-            startDate: {
-                columnType: ColumnType.DATA,
-                label: t('startDate'),
-                width: '120px',
-                renderData: (value) => <WfoDateTime dateOrIsoString={value} />,
-                renderDetails: parseDateToLocaleDateTimeString,
-                clipboardText: parseDateToLocaleDateTimeString,
-                renderTooltip: (cellValue) => cellValue?.toString(),
-            },
-            endDate: {
-                columnType: ColumnType.DATA,
-                label: t('endDate'),
-                width: '120px',
-                renderData: (value) => <WfoDateTime dateOrIsoString={value} />,
-                renderDetails: parseDateToLocaleDateTimeString,
-                clipboardText: parseDateToLocaleDateTimeString,
-                renderTooltip: (cellValue) => cellValue?.toString(),
-            },
-            note: {
-                columnType: ColumnType.DATA,
-                label: t('note'),
-                width: '300px',
-                renderData: (cellValue, row) => {
-                    return (
-                        <WfoSubscriptionNoteEdit
-                            onlyShowOnHover={true}
-                            endpointName={endpointName}
-                            queryVariables={graphqlQueryVariables}
-                            subscriptionId={row.subscriptionId}
-                            note={cellValue}
-                        />
-                    );
-                },
-            },
-            actions: {
-                columnType: ColumnType.CONTROL,
-                label: t('actions'),
-                width: '80px',
-                renderControl: (row) => (
-                    <WfoSubscriptionActions
-                        compactMode={true}
-                        subscriptionId={row.subscriptionId}
-                    />
-                ),
-            },
-            metadata: {
-                columnType: ColumnType.DATA,
-                label: t('metadata'),
-                width: '100px',
-                renderData: (value) => <WfoInlineJson data={value} />,
-                renderDetails: (value) =>
-                    value && <WfoJsonCodeBlock data={value} isBasicStyle />,
-                renderTooltip: (value) =>
-                    value && (
-                        <WfoJsonCodeBlock data={value} isBasicStyle={false} />
-                    ),
-            },
-        };
-
-    const [getSubscriptionListTrigger, { isFetching: isFetchingCsv }] =
-        useLazyGetSubscriptionListQuery();
-    const getSubscriptionListForExport = () =>
-        getSubscriptionListTrigger(
-            getQueryVariablesForExport(graphqlQueryVariables),
-        ).unwrap();
-
-    const sortedColumnId = getTypedFieldFromObject(
-        sortBy?.field,
-        tableColumnConfig,
-    );
-    if (!sortedColumnId) {
-        router.replace(PATH_SUBSCRIPTIONS);
-        return null;
-    }
-
-    const dataSorting: WfoDataSorting<SubscriptionListItem> = {
-        field: sortedColumnId,
-        sortOrder: dataDisplayParams.sortBy?.order ?? SortOrder.ASC,
-    };
-    const { totalItems, sortFields, filterFields } = data?.pageInfo ?? {};
-
-    const pageChange =
-        getPageIndexChangeHandler<SubscriptionListItem>(setDataDisplayParam);
-    const pageSizeChange =
-        getPageSizeChangeHandler<SubscriptionListItem>(setDataDisplayParam);
-    const updateQuery =
-        getQueryStringHandler<SubscriptionListItem>(setDataDisplayParam);
-    const updateSorting =
-        getDataSortHandler<SubscriptionListItem>(setDataDisplayParam);
-
-    const pagination: Pagination = {
-        pageIndex: dataDisplayParams.pageIndex,
-        pageSize: dataDisplayParams.pageSize,
-        pageSizeOptions: DEFAULT_PAGE_SIZES,
-        totalItemCount: totalItems ?? 0,
-        onChangePage: pageChange,
-        onChangeItemsPerPage: pageSizeChange,
-    };
-
-    const exportData = csvDownloadHandler(
-        getSubscriptionListForExport,
-        mapGraphQlSubscriptionsResultToSubscriptionListItems,
-        mapGraphQlSubscriptionsResultToPageInfo,
-        Object.keys(tableColumnConfig),
-        getCsvFileNameWithDate('Subscriptions'),
-        showToastMessage,
-        tError,
-    );
-
-    const tableConfig = mapSortableAndFilterableValuesToTableColumnConfig(
-        tableColumnConfig,
-        sortFields,
-        filterFields,
-    );
-
-    return (
-        <WfoAdvancedTable
-            queryString={dataDisplayParams.queryString}
-            onUpdateQueryString={updateQuery}
-            data={subscriptionList}
-            tableColumnConfig={tableConfig}
-            defaultHiddenColumns={hiddenColumns}
-            dataSorting={[dataSorting]}
-            isLoading={isFetching}
-            localStorageKey={SUBSCRIPTIONS_TABLE_LOCAL_STORAGE_KEY}
-            detailModalTitle={'Details - Subscription'}
-            pagination={pagination}
-            error={mapRtkErrorToWfoError(error)}
-            onUpdateDataSorting={updateSorting}
-            onExportData={exportData}
-            exportDataIsLoading={isFetchingCsv}
-        />
-    );
+  const router = useRouter();
+  const t = useTranslations('subscriptions.index');
+  const tError = useTranslations('errors');
+  const { showToastMessage } = useShowToastMessage();
+
+  const { sortBy, queryString, pageIndex, pageSize } = dataDisplayParams;
+
+  const graphqlQueryVariables: GraphqlQueryVariables<SubscriptionListItem> = {
+    first: pageSize,
+    after: pageIndex * pageSize,
+    sortBy,
+    filterBy: alwaysOnFilters,
+    query: queryString || undefined,
+  };
+
+  const { data, isFetching, error, endpointName } = useGetSubscriptionListQuery(graphqlQueryVariables);
+
+  const subscriptionList = mapGraphQlSubscriptionsResultToSubscriptionListItems(data);
+
+  const tableColumnConfig: WfoAdvancedTableColumnConfig<SubscriptionListItem> = {
+    subscriptionId: {
+      columnType: ColumnType.DATA,
+      label: t('id'),
+      width: '100px',
+      renderData: (value) => <WfoFirstPartUUID UUID={value} />,
+      renderDetails: (value) => value,
+      renderTooltip: (value) => value,
+    },
+    description: {
+      columnType: ColumnType.DATA,
+      label: t('description'),
+      width: '500px',
+      renderData: (value, record) => <Link href={`/subscriptions/${record.subscriptionId}`}>{value}</Link>,
+      renderTooltip: (value) => value,
+    },
+    status: {
+      columnType: ColumnType.DATA,
+      label: t('status'),
+      width: '120px',
+      renderData: (value) => <WfoSubscriptionStatusBadge status={value} />,
+    },
+    insync: {
+      columnType: ColumnType.DATA,
+      label: t('insync'),
+      width: '80px',
+      renderData: (value) => <WfoInsyncIcon inSync={value} />,
+    },
+    productName: {
+      columnType: ColumnType.DATA,
+      label: t('product'),
+    },
+    tag: {
+      columnType: ColumnType.DATA,
+      label: t('tag'),
+      width: '100px',
+    },
+    customerFullname: {
+      columnType: ColumnType.DATA,
+      label: t('customerFullname'),
+    },
+    customerShortcode: {
+      columnType: ColumnType.DATA,
+      label: t('customerShortcode'),
+      width: '150px',
+    },
+    startDate: {
+      columnType: ColumnType.DATA,
+      label: t('startDate'),
+      width: '120px',
+      renderData: (value) => <WfoDateTime dateOrIsoString={value} />,
+      renderDetails: parseDateToLocaleDateTimeString,
+      clipboardText: parseDateToLocaleDateTimeString,
+      renderTooltip: (cellValue) => cellValue?.toString(),
+    },
+    endDate: {
+      columnType: ColumnType.DATA,
+      label: t('endDate'),
+      width: '120px',
+      renderData: (value) => <WfoDateTime dateOrIsoString={value} />,
+      renderDetails: parseDateToLocaleDateTimeString,
+      clipboardText: parseDateToLocaleDateTimeString,
+      renderTooltip: (cellValue) => cellValue?.toString(),
+    },
+    note: {
+      columnType: ColumnType.DATA,
+      label: t('note'),
+      width: '300px',
+      renderData: (cellValue, row) => {
+        return (
+          <WfoSubscriptionNoteEdit
+            onlyShowOnHover={true}
+            endpointName={endpointName}
+            queryVariables={graphqlQueryVariables}
+            subscriptionId={row.subscriptionId}
+            note={cellValue}
+          />
+        );
+      },
+    },
+    actions: {
+      columnType: ColumnType.CONTROL,
+      label: t('actions'),
+      width: '80px',
+      renderControl: (row) => <WfoSubscriptionActions compactMode={true} subscriptionId={row.subscriptionId} />,
+    },
+    metadata: {
+      columnType: ColumnType.DATA,
+      label: t('metadata'),
+      width: '100px',
+      renderData: (value) => <WfoInlineJson data={value} />,
+      renderDetails: (value) => value && <WfoJsonCodeBlock data={value} isBasicStyle />,
+      renderTooltip: (value) => value && <WfoJsonCodeBlock data={value} isBasicStyle={false} />,
+    },
+  };
+
+  const [getSubscriptionListTrigger, { isFetching: isFetchingCsv }] = useLazyGetSubscriptionListQuery();
+  const getSubscriptionListForExport = () =>
+    getSubscriptionListTrigger(getQueryVariablesForExport(graphqlQueryVariables)).unwrap();
+
+  const sortedColumnId = getTypedFieldFromObject(sortBy?.field, tableColumnConfig);
+  if (!sortedColumnId) {
+    router.replace(PATH_SUBSCRIPTIONS);
+    return null;
+  }
+
+  const dataSorting: WfoDataSorting<SubscriptionListItem> = {
+    field: sortedColumnId,
+    sortOrder: dataDisplayParams.sortBy?.order ?? SortOrder.ASC,
+  };
+  const { totalItems, sortFields, filterFields } = data?.pageInfo ?? {};
+
+  const pageChange = getPageIndexChangeHandler<SubscriptionListItem>(setDataDisplayParam);
+  const pageSizeChange = getPageSizeChangeHandler<SubscriptionListItem>(setDataDisplayParam);
+  const updateQuery = getQueryStringHandler<SubscriptionListItem>(setDataDisplayParam);
+  const updateSorting = getDataSortHandler<SubscriptionListItem>(setDataDisplayParam);
+
+  const pagination: Pagination = {
+    pageIndex: dataDisplayParams.pageIndex,
+    pageSize: dataDisplayParams.pageSize,
+    pageSizeOptions: DEFAULT_PAGE_SIZES,
+    totalItemCount: totalItems ?? 0,
+    onChangePage: pageChange,
+    onChangeItemsPerPage: pageSizeChange,
+  };
+
+  const exportData = csvDownloadHandler(
+    getSubscriptionListForExport,
+    mapGraphQlSubscriptionsResultToSubscriptionListItems,
+    mapGraphQlSubscriptionsResultToPageInfo,
+    Object.keys(tableColumnConfig),
+    getCsvFileNameWithDate('Subscriptions'),
+    showToastMessage,
+    tError,
+  );
+
+  const tableConfig = mapSortableAndFilterableValuesToTableColumnConfig(tableColumnConfig, sortFields, filterFields);
+
+  return (
+    <WfoAdvancedTable
+      queryString={dataDisplayParams.queryString}
+      onUpdateQueryString={updateQuery}
+      data={subscriptionList}
+      tableColumnConfig={tableConfig}
+      defaultHiddenColumns={hiddenColumns}
+      dataSorting={[dataSorting]}
+      isLoading={isFetching}
+      localStorageKey={SUBSCRIPTIONS_TABLE_LOCAL_STORAGE_KEY}
+      detailModalTitle={'Details - Subscription'}
+      pagination={pagination}
+      error={mapRtkErrorToWfoError(error)}
+      onUpdateDataSorting={updateSorting}
+      onExportData={exportData}
+      exportDataIsLoading={isFetchingCsv}
+    />
+  );
 };

package/src/components/WfoSubscriptionsList/subscriptionListTabs.ts

@@ -2,48 +2,45 @@ import { WfoFilterTab } from '../../components';
 import { SubscriptionListItem } from './subscriptionResultMappers';
 
 export enum WfoSubscriptionListTab {
-    ACTIVE = 'ACTIVE',
-    TERMINATED = 'TERMINATED',
-    TRANSIENT = 'TRANSIENT',
-    ALL = 'ALL',
+  ACTIVE = 'ACTIVE',
+  TERMINATED = 'TERMINATED',
+  TRANSIENT = 'TRANSIENT',
+  ALL = 'ALL',
 }
 
-export const subscriptionListTabs: WfoFilterTab<
-    WfoSubscriptionListTab,
-    SubscriptionListItem
->[] = [
-    {
-        id: WfoSubscriptionListTab.ACTIVE,
-        translationKey: 'active',
-        alwaysOnFilters: [
-            {
-                field: 'status',
-                value: 'active',
-            },
-        ],
-    },
-    {
-        id: WfoSubscriptionListTab.TERMINATED,
-        translationKey: 'terminated',
-        alwaysOnFilters: [
-            {
-                field: 'status',
-                value: 'terminated',
-            },
-        ],
-    },
-    {
-        id: WfoSubscriptionListTab.TRANSIENT,
-        translationKey: 'transient',
-        alwaysOnFilters: [
-            {
-                field: 'status',
-                value: 'initial-provisioning-migrating',
-            },
-        ],
-    },
-    {
-        id: WfoSubscriptionListTab.ALL,
-        translationKey: 'all',
-    },
+export const subscriptionListTabs: WfoFilterTab<WfoSubscriptionListTab, SubscriptionListItem>[] = [
+  {
+    id: WfoSubscriptionListTab.ACTIVE,
+    translationKey: 'active',
+    alwaysOnFilters: [
+      {
+        field: 'status',
+        value: 'active',
+      },
+    ],
+  },
+  {
+    id: WfoSubscriptionListTab.TERMINATED,
+    translationKey: 'terminated',
+    alwaysOnFilters: [
+      {
+        field: 'status',
+        value: 'terminated',
+      },
+    ],
+  },
+  {
+    id: WfoSubscriptionListTab.TRANSIENT,
+    translationKey: 'transient',
+    alwaysOnFilters: [
+      {
+        field: 'status',
+        value: 'initial-provisioning-migrating',
+      },
+    ],
+  },
+  {
+    id: WfoSubscriptionListTab.ALL,
+    translationKey: 'all',
+  },
 ];