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

package/src/pages/metadata/WfoProductBlocksPage.tsx

@@ -5,317 +5,263 @@ import { useTranslations } from 'next-intl';
 import { EuiBadgeGroup } from '@elastic/eui';
 
 import {
-    DEFAULT_PAGE_SIZE,
-    DEFAULT_PAGE_SIZES,
-    METADATA_PRODUCT_BLOCKS_TABLE_LOCAL_STORAGE_KEY,
-    PATH_METADATA_PRODUCT_BLOCKS,
-    PATH_METADATA_RESOURCE_TYPES,
-    StoredTableConfig,
-    WfoDataSorting,
-    WfoDateTime,
-    WfoFirstPartUUID,
-    WfoProductBlockBadge,
-    WfoProductStatusBadge,
-    getDataSortHandler,
-    getPageIndexChangeHandler,
-    getPageSizeChangeHandler,
-    getQueryStringHandler,
+  DEFAULT_PAGE_SIZE,
+  DEFAULT_PAGE_SIZES,
+  METADATA_PRODUCT_BLOCKS_TABLE_LOCAL_STORAGE_KEY,
+  PATH_METADATA_PRODUCT_BLOCKS,
+  PATH_METADATA_RESOURCE_TYPES,
+  StoredTableConfig,
+  WfoDataSorting,
+  WfoDateTime,
+  WfoFirstPartUUID,
+  WfoProductBlockBadge,
+  WfoProductStatusBadge,
+  getDataSortHandler,
+  getPageIndexChangeHandler,
+  getPageSizeChangeHandler,
+  getQueryStringHandler,
 } from '@/components';
 import { WfoMetadataDescriptionField } from '@/components/WfoMetadata/WfoMetadataDescriptionField';
 import { WfoAdvancedTable } from '@/components/WfoTable/WfoAdvancedTable';
 import { WfoAdvancedTableColumnConfig } from '@/components/WfoTable/WfoAdvancedTable/types';
 import { ColumnType, Pagination } from '@/components/WfoTable/WfoTable';
 import { mapSortableAndFilterableValuesToTableColumnConfig } from '@/components/WfoTable/WfoTable/utils';
-import {
-    useDataDisplayParams,
-    useShowToastMessage,
-    useStoredTableConfig,
-} from '@/hooks';
-import {
-    useGetProductBlocksQuery,
-    useLazyGetProductBlocksQuery,
-    useUpdateProductBlockMutation,
-} from '@/rtk';
+import { useDataDisplayParams, useShowToastMessage, useStoredTableConfig } from '@/hooks';
+import { useGetProductBlocksQuery, useLazyGetProductBlocksQuery, useUpdateProductBlockMutation } from '@/rtk';
 import type { ProductBlocksResponse } from '@/rtk';
 import { mapRtkErrorToWfoError } from '@/rtk/utils';
+import { BadgeType, GraphqlQueryVariables, ProductBlockDefinition, SortOrder } from '@/types';
 import {
-    BadgeType,
-    GraphqlQueryVariables,
-    ProductBlockDefinition,
-    SortOrder,
-} from '@/types';
-import {
-    csvDownloadHandler,
-    getConcatenatedResult,
-    getCsvFileNameWithDate,
-    getQueryUrl,
-    getQueryVariablesForExport,
-    parseDateToLocaleDateTimeString,
-    parseIsoString,
+  csvDownloadHandler,
+  getConcatenatedResult,
+  getCsvFileNameWithDate,
+  getQueryUrl,
+  getQueryVariablesForExport,
+  parseDateToLocaleDateTimeString,
+  parseIsoString,
 } from '@/utils';
 
 import { WfoMetadataPageLayout } from './WfoMetadataPageLayout';
 
 const PRODUCT_BLOCK_FIELD_NAME: keyof ProductBlockDefinition = 'name';
 
-type ProductBlockDefinitionExportItem = Omit<
-    ProductBlockDefinition,
-    'resourceTypes' | 'dependsOn'
-> & {
-    resourceTypes: string;
-    dependsOn: string;
+type ProductBlockDefinitionExportItem = Omit<ProductBlockDefinition, 'resourceTypes' | 'dependsOn'> & {
+  resourceTypes: string;
+  dependsOn: string;
 };
 
 export const WfoProductBlocksPage = () => {
-    const t = useTranslations('metadata.productBlocks');
-    const tError = useTranslations('errors');
-    const { showToastMessage } = useShowToastMessage();
+  const t = useTranslations('metadata.productBlocks');
+  const tError = useTranslations('errors');
+  const { showToastMessage } = useShowToastMessage();
 
-    const [tableDefaults, setTableDefaults] =
-        useState<StoredTableConfig<ProductBlockDefinition>>();
+  const [tableDefaults, setTableDefaults] = useState<StoredTableConfig<ProductBlockDefinition>>();
 
-    const getStoredTableConfig = useStoredTableConfig<ProductBlockDefinition>(
-        METADATA_PRODUCT_BLOCKS_TABLE_LOCAL_STORAGE_KEY,
-    );
-    const [updateProductBlock] = useUpdateProductBlockMutation();
+  const getStoredTableConfig = useStoredTableConfig<ProductBlockDefinition>(
+    METADATA_PRODUCT_BLOCKS_TABLE_LOCAL_STORAGE_KEY,
+  );
+  const [updateProductBlock] = useUpdateProductBlockMutation();
 
-    useEffect(() => {
-        const storedConfig = getStoredTableConfig();
+  useEffect(() => {
+    const storedConfig = getStoredTableConfig();
 
-        if (storedConfig) {
-            setTableDefaults(storedConfig);
-        }
-    }, [getStoredTableConfig]);
+    if (storedConfig) {
+      setTableDefaults(storedConfig);
+    }
+  }, [getStoredTableConfig]);
 
-    const { dataDisplayParams, setDataDisplayParam } =
-        useDataDisplayParams<ProductBlockDefinition>({
-            // TODO: Improvement: A default pageSize value is set to avoid a graphql error when the query is executed
-            // the fist time before the useEffect has populated the tableDefaults. Better is to create a way for
-            // the query to wait for the values to be available
-            // https://github.com/workfloworchestrator/orchestrator-ui/issues/261
-            pageSize: tableDefaults?.selectedPageSize || DEFAULT_PAGE_SIZE,
-            sortBy: {
-                field: PRODUCT_BLOCK_FIELD_NAME,
-                order: SortOrder.ASC,
-            },
-        });
+  const { dataDisplayParams, setDataDisplayParam } = useDataDisplayParams<ProductBlockDefinition>({
+    // TODO: Improvement: A default pageSize value is set to avoid a graphql error when the query is executed
+    // the fist time before the useEffect has populated the tableDefaults. Better is to create a way for
+    // the query to wait for the values to be available
+    // https://github.com/workfloworchestrator/orchestrator-ui/issues/261
+    pageSize: tableDefaults?.selectedPageSize || DEFAULT_PAGE_SIZE,
+    sortBy: {
+      field: PRODUCT_BLOCK_FIELD_NAME,
+      order: SortOrder.ASC,
+    },
+  });
 
-    const tableColumns: WfoAdvancedTableColumnConfig<ProductBlockDefinition> = {
-        productBlockId: {
-            columnType: ColumnType.DATA,
-            label: t('id'),
-            width: '90px',
-            renderData: (value) => <WfoFirstPartUUID UUID={value} />,
-            renderDetails: (value) => value,
-            renderTooltip: (value) => value,
-        },
-        name: {
-            columnType: ColumnType.DATA,
-            label: t('name'),
-            width: '300px',
-            renderData: (name) => (
-                <WfoProductBlockBadge badgeType={BadgeType.PRODUCT_BLOCK}>
-                    {name}
-                </WfoProductBlockBadge>
-            ),
-        },
-        tag: {
-            columnType: ColumnType.DATA,
-            label: t('tag'),
-            width: '120px',
-        },
-        description: {
-            columnType: ColumnType.DATA,
-            label: t('description'),
-            width: '700px',
-            renderData: (value, row) => (
-                <WfoMetadataDescriptionField
-                    onSave={(updatedNote) =>
-                        updateProductBlock({
-                            id: row.productBlockId,
-                            description: updatedNote,
-                        })
-                    }
-                    description={value}
-                />
-            ),
-        },
-        status: {
-            columnType: ColumnType.DATA,
-            label: t('status'),
-            width: '90px',
-            renderData: (value) => <WfoProductStatusBadge status={value} />,
-        },
-        dependsOn: {
-            columnType: ColumnType.DATA,
-            label: t('dependingProductBlocks'),
-            renderData: (dependsOn) => (
-                <>
-                    {dependsOn.map(({ name }, index) => (
-                        <WfoProductBlockBadge
-                            key={index}
-                            link={getQueryUrl(
-                                PATH_METADATA_PRODUCT_BLOCKS,
-                                `name:"${name}"`,
-                            )}
-                            badgeType={BadgeType.PRODUCT_BLOCK}
-                        >
-                            {name}
-                        </WfoProductBlockBadge>
-                    ))}
-                </>
-            ),
-            renderTooltip: (productBlocks) => {
-                return productBlocks.map((productBlock) => (
-                    <p key={productBlock.name}>- {productBlock.name}</p>
-                ));
-            },
-        },
-        resourceTypes: {
-            columnType: ColumnType.DATA,
-            label: t('resourceTypes'),
-            width: '700px',
-            renderData: (resourceTypes) => (
-                <>
-                    {resourceTypes.map(({ resourceType }, index) => (
-                        <WfoProductBlockBadge
-                            key={index}
-                            link={getQueryUrl(
-                                PATH_METADATA_RESOURCE_TYPES,
-                                `resourceType:"${resourceType}"`,
-                            )}
-                            badgeType={BadgeType.RESOURCE_TYPE}
-                        >
-                            {resourceType}
-                        </WfoProductBlockBadge>
-                    ))}
-                </>
-            ),
-            renderDetails: (resourceTypes) => (
-                <EuiBadgeGroup gutterSize="s">
-                    {resourceTypes.map(({ resourceType }, index) => (
-                        <WfoProductBlockBadge
-                            key={index}
-                            link={getQueryUrl(
-                                PATH_METADATA_RESOURCE_TYPES,
-                                `resourceType:"${resourceType}"`,
-                            )}
-                            badgeType={BadgeType.RESOURCE_TYPE}
-                        >
-                            {resourceType}
-                        </WfoProductBlockBadge>
-                    ))}
-                </EuiBadgeGroup>
-            ),
-            renderTooltip: (resourceTypes) => {
-                return resourceTypes.map((resourceType) => (
-                    <p key={resourceType.resourceType}>
-                        - {resourceType.resourceType}
-                    </p>
-                ));
-            },
-        },
-        createdAt: {
-            columnType: ColumnType.DATA,
-            label: t('createdAt'),
-            width: '120px',
-            renderData: (date) => <WfoDateTime dateOrIsoString={date} />,
-            renderDetails: parseIsoString(parseDateToLocaleDateTimeString),
-            clipboardText: parseIsoString(parseDateToLocaleDateTimeString),
-            renderTooltip: parseIsoString(parseDateToLocaleDateTimeString),
-        },
-        endDate: {
-            columnType: ColumnType.DATA,
-            label: t('endDate'),
-            width: '120px',
-            renderData: (date) => <WfoDateTime dateOrIsoString={date} />,
-            renderDetails: parseIsoString(parseDateToLocaleDateTimeString),
-            clipboardText: parseIsoString(parseDateToLocaleDateTimeString),
-            renderTooltip: parseIsoString(parseDateToLocaleDateTimeString),
-        },
-    };
+  const tableColumns: WfoAdvancedTableColumnConfig<ProductBlockDefinition> = {
+    productBlockId: {
+      columnType: ColumnType.DATA,
+      label: t('id'),
+      width: '90px',
+      renderData: (value) => <WfoFirstPartUUID UUID={value} />,
+      renderDetails: (value) => value,
+      renderTooltip: (value) => value,
+    },
+    name: {
+      columnType: ColumnType.DATA,
+      label: t('name'),
+      width: '300px',
+      renderData: (name) => <WfoProductBlockBadge badgeType={BadgeType.PRODUCT_BLOCK}>{name}</WfoProductBlockBadge>,
+    },
+    tag: {
+      columnType: ColumnType.DATA,
+      label: t('tag'),
+      width: '120px',
+    },
+    description: {
+      columnType: ColumnType.DATA,
+      label: t('description'),
+      width: '700px',
+      renderData: (value, row) => (
+        <WfoMetadataDescriptionField
+          onSave={(updatedNote) =>
+            updateProductBlock({
+              id: row.productBlockId,
+              description: updatedNote,
+            })
+          }
+          description={value}
+        />
+      ),
+    },
+    status: {
+      columnType: ColumnType.DATA,
+      label: t('status'),
+      width: '90px',
+      renderData: (value) => <WfoProductStatusBadge status={value} />,
+    },
+    dependsOn: {
+      columnType: ColumnType.DATA,
+      label: t('dependingProductBlocks'),
+      renderData: (dependsOn) => (
+        <>
+          {dependsOn.map(({ name }, index) => (
+            <WfoProductBlockBadge
+              key={index}
+              link={getQueryUrl(PATH_METADATA_PRODUCT_BLOCKS, `name:"${name}"`)}
+              badgeType={BadgeType.PRODUCT_BLOCK}
+            >
+              {name}
+            </WfoProductBlockBadge>
+          ))}
+        </>
+      ),
+      renderTooltip: (productBlocks) => {
+        return productBlocks.map((productBlock) => <p key={productBlock.name}>- {productBlock.name}</p>);
+      },
+    },
+    resourceTypes: {
+      columnType: ColumnType.DATA,
+      label: t('resourceTypes'),
+      width: '700px',
+      renderData: (resourceTypes) => (
+        <>
+          {resourceTypes.map(({ resourceType }, index) => (
+            <WfoProductBlockBadge
+              key={index}
+              link={getQueryUrl(PATH_METADATA_RESOURCE_TYPES, `resourceType:"${resourceType}"`)}
+              badgeType={BadgeType.RESOURCE_TYPE}
+            >
+              {resourceType}
+            </WfoProductBlockBadge>
+          ))}
+        </>
+      ),
+      renderDetails: (resourceTypes) => (
+        <EuiBadgeGroup gutterSize="s">
+          {resourceTypes.map(({ resourceType }, index) => (
+            <WfoProductBlockBadge
+              key={index}
+              link={getQueryUrl(PATH_METADATA_RESOURCE_TYPES, `resourceType:"${resourceType}"`)}
+              badgeType={BadgeType.RESOURCE_TYPE}
+            >
+              {resourceType}
+            </WfoProductBlockBadge>
+          ))}
+        </EuiBadgeGroup>
+      ),
+      renderTooltip: (resourceTypes) => {
+        return resourceTypes.map((resourceType) => (
+          <p key={resourceType.resourceType}>- {resourceType.resourceType}</p>
+        ));
+      },
+    },
+    createdAt: {
+      columnType: ColumnType.DATA,
+      label: t('createdAt'),
+      width: '120px',
+      renderData: (date) => <WfoDateTime dateOrIsoString={date} />,
+      renderDetails: parseIsoString(parseDateToLocaleDateTimeString),
+      clipboardText: parseIsoString(parseDateToLocaleDateTimeString),
+      renderTooltip: parseIsoString(parseDateToLocaleDateTimeString),
+    },
+    endDate: {
+      columnType: ColumnType.DATA,
+      label: t('endDate'),
+      width: '120px',
+      renderData: (date) => <WfoDateTime dateOrIsoString={date} />,
+      renderDetails: parseIsoString(parseDateToLocaleDateTimeString),
+      clipboardText: parseIsoString(parseDateToLocaleDateTimeString),
+      renderTooltip: parseIsoString(parseDateToLocaleDateTimeString),
+    },
+  };
 
-    const { pageSize, pageIndex, sortBy, queryString } = dataDisplayParams;
-    const graphqlQueryVariables: GraphqlQueryVariables<ProductBlockDefinition> =
-        {
-            first: pageSize,
-            after: pageIndex * pageSize,
-            sortBy: sortBy,
-            query: queryString || undefined,
-        };
-    const { data, isFetching, error } = useGetProductBlocksQuery(
-        graphqlQueryVariables,
-    );
-    const [getProductBlocksTrigger, { isFetching: isFetchingCsv }] =
-        useLazyGetProductBlocksQuery();
-    const getProductBlocksForExport = () =>
-        getProductBlocksTrigger(
-            getQueryVariablesForExport(graphqlQueryVariables),
-        ).unwrap();
+  const { pageSize, pageIndex, sortBy, queryString } = dataDisplayParams;
+  const graphqlQueryVariables: GraphqlQueryVariables<ProductBlockDefinition> = {
+    first: pageSize,
+    after: pageIndex * pageSize,
+    sortBy: sortBy,
+    query: queryString || undefined,
+  };
+  const { data, isFetching, error } = useGetProductBlocksQuery(graphqlQueryVariables);
+  const [getProductBlocksTrigger, { isFetching: isFetchingCsv }] = useLazyGetProductBlocksQuery();
+  const getProductBlocksForExport = () =>
+    getProductBlocksTrigger(getQueryVariablesForExport(graphqlQueryVariables)).unwrap();
 
-    const dataSorting: WfoDataSorting<ProductBlockDefinition> = {
-        field: sortBy?.field ?? PRODUCT_BLOCK_FIELD_NAME,
-        sortOrder: sortBy?.order ?? SortOrder.ASC,
-    };
+  const dataSorting: WfoDataSorting<ProductBlockDefinition> = {
+    field: sortBy?.field ?? PRODUCT_BLOCK_FIELD_NAME,
+    sortOrder: sortBy?.order ?? SortOrder.ASC,
+  };
 
-    const { totalItems, sortFields, filterFields } = data?.pageInfo ?? {};
+  const { totalItems, sortFields, filterFields } = data?.pageInfo ?? {};
 
-    const pagination: Pagination = {
-        pageIndex,
-        pageSize,
-        pageSizeOptions: DEFAULT_PAGE_SIZES,
-        totalItemCount: totalItems ? totalItems : 0,
-        onChangePage: getPageIndexChangeHandler(setDataDisplayParam),
-        onChangeItemsPerPage: getPageSizeChangeHandler(setDataDisplayParam),
-    };
+  const pagination: Pagination = {
+    pageIndex,
+    pageSize,
+    pageSizeOptions: DEFAULT_PAGE_SIZES,
+    totalItemCount: totalItems ? totalItems : 0,
+    onChangePage: getPageIndexChangeHandler(setDataDisplayParam),
+    onChangeItemsPerPage: getPageSizeChangeHandler(setDataDisplayParam),
+  };
 
-    const mapToExportItems = (
-        productBlocksResponse: ProductBlocksResponse,
-    ): ProductBlockDefinitionExportItem[] => {
-        const { productBlocks } = productBlocksResponse;
-        return productBlocks.map((productBlock) => ({
-            ...productBlock,
-            resourceTypes: getConcatenatedResult(productBlock.resourceTypes, [
-                'resourceType',
-                'description',
-            ]),
-            dependsOn: getConcatenatedResult(productBlock.dependsOn, ['name']),
-        }));
-    };
+  const mapToExportItems = (productBlocksResponse: ProductBlocksResponse): ProductBlockDefinitionExportItem[] => {
+    const { productBlocks } = productBlocksResponse;
+    return productBlocks.map((productBlock) => ({
+      ...productBlock,
+      resourceTypes: getConcatenatedResult(productBlock.resourceTypes, ['resourceType', 'description']),
+      dependsOn: getConcatenatedResult(productBlock.dependsOn, ['name']),
+    }));
+  };
 
-    return (
-        <WfoMetadataPageLayout>
-            <WfoAdvancedTable
-                data={data?.productBlocks || []}
-                tableColumnConfig={mapSortableAndFilterableValuesToTableColumnConfig(
-                    tableColumns,
-                    sortFields,
-                    filterFields,
-                )}
-                dataSorting={[dataSorting]}
-                defaultHiddenColumns={tableDefaults?.hiddenColumns}
-                onUpdateDataSorting={getDataSortHandler(setDataDisplayParam)}
-                onUpdateQueryString={getQueryStringHandler<ProductBlockDefinition>(
-                    setDataDisplayParam,
-                )}
-                pagination={pagination}
-                isLoading={isFetching}
-                error={mapRtkErrorToWfoError(error)}
-                queryString={queryString}
-                localStorageKey={
-                    METADATA_PRODUCT_BLOCKS_TABLE_LOCAL_STORAGE_KEY
-                }
-                onExportData={csvDownloadHandler(
-                    getProductBlocksForExport,
-                    mapToExportItems,
-                    (data) => data.pageInfo,
-                    Object.keys(tableColumns),
-                    getCsvFileNameWithDate('ProductBlocks'),
-                    showToastMessage,
-                    tError,
-                )}
-                exportDataIsLoading={isFetchingCsv}
-            />
-        </WfoMetadataPageLayout>
-    );
+  return (
+    <WfoMetadataPageLayout>
+      <WfoAdvancedTable
+        data={data?.productBlocks || []}
+        tableColumnConfig={mapSortableAndFilterableValuesToTableColumnConfig(tableColumns, sortFields, filterFields)}
+        dataSorting={[dataSorting]}
+        defaultHiddenColumns={tableDefaults?.hiddenColumns}
+        onUpdateDataSorting={getDataSortHandler(setDataDisplayParam)}
+        onUpdateQueryString={getQueryStringHandler<ProductBlockDefinition>(setDataDisplayParam)}
+        pagination={pagination}
+        isLoading={isFetching}
+        error={mapRtkErrorToWfoError(error)}
+        queryString={queryString}
+        localStorageKey={METADATA_PRODUCT_BLOCKS_TABLE_LOCAL_STORAGE_KEY}
+        onExportData={csvDownloadHandler(
+          getProductBlocksForExport,
+          mapToExportItems,
+          (data) => data.pageInfo,
+          Object.keys(tableColumns),
+          getCsvFileNameWithDate('ProductBlocks'),
+          showToastMessage,
+          tError,
+        )}
+        exportDataIsLoading={isFetchingCsv}
+      />
+    </WfoMetadataPageLayout>
+  );
 };