@orchestrator-ui/orchestrator-ui-components 0.2.1 → 0.2.3

package/src/messages/nl-NL.json

@@ -2,15 +2,20 @@
     "main": {
         "title": "Welcome to example-orchestrator-ui!"
     },
+    "common": {
+        "addToFavorites": "Favoriet",
+        "product": "Produkt",
+        "deselect": "Deselecteer",
+        "close": "Sluiten"
+    },
     "metadata": {
         "tabs": {
             "products": "Producten",
             "productBlocks": "Productblokken",
             "resourceTypes": "Resource types",
-            "fixedInputs": "Vaste inputs",
             "workflows": "Workflows"
         },
-        "product": {
+        "products": {
             "name": "Naam",
             "description": "Beschrijving",
             "tag": "Tag",
@@ -18,6 +23,48 @@
             "status": "Status",
             "productBlocks": "Product blocks",
             "createdAt": "Aangemaakt"
+        },
+        "productBlocks": {
+            "id": "ID",
+            "name": "Naam",
+            "description": "Beschrijving",
+            "tag": "Tag",
+            "status": "Status",
+            "resourceTypes": "Resource types",
+            "createdAt": "Aangemaakt",
+            "endDate": "Eind datum",
+            "parentIds": "Parents"
+        },
+        "resourceTypes": {
+            "type": "Type",
+            "description": "Description",
+            "resourceId": "Resource ID"
+        },
+        "workflows": {
+            "name": "Naam",
+            "description": "Beschrijving",
+            "target": "Target",
+            "productTags": "Product Tags",
+            "createdAt": "Aangemaakt"
+        }
+    },
+    "processes": {
+        "tabs": {
+            "active": "Actief",
+            "completed": "Voltooid"
+        },
+        "index": {
+            "workflowName": "Workflow naam",
+            "lastStep": "Laatste stap",
+            "status": "Status",
+            "product": "Product",
+            "customer": "Klant",
+            "subscriptions": "Subscriptions",
+            "createdBy": "Gecreëerd door",
+            "assignee": "Assignee",
+            "id": "ID",
+            "started": "Gestart",
+            "lastModified": "Aangepast op"
         }
     },
     "subscriptions": {
@@ -44,7 +91,24 @@
                 "serviceConfiguration": "Service configuratie",
                 "processes": "Processen",
                 "relatedSubscriptions": "Geralateerde subscriptions"
-            }
+            },
+            "loadingStatus": "Loading status",
+            "workflow": {
+                "create": "Create workflow",
+                "modify": "Modify workflow",
+                "system": "System workflow",
+                "terminate": "Terminate workflow"
+            },
+            "subscriptionDetails": "Subscription details",
+            "fixedInputs": "Fixed inputs",
+            "productInfo": "Product info",
+            "noProductBlockSelected": "No product block selected",
+            "productBlocks": "Product blocks",
+            "ctaSelectProductBlock": "Select one or more product blocks to view their details",
+            "startedBy": "Started by",
+            "startedAt": "Started at",
+            "status": "Status",
+            "id": "ID"
         }
     }
 }

package/src/pages/index.ts

@@ -1 +1,3 @@
 export * from './metadata';
+export * from './processes';
+export * from './subscriptions';

package/src/pages/metadata/WFOMetadataPageLayout.tsx

@@ -31,11 +31,6 @@ const metaDataTabs: MetaDataTab[] = [
         translationKey: 'resourceTypes',
         path: '/metadata/resource-types',
     },
-    {
-        id: 4,
-        translationKey: 'fixedInputs',
-        path: '/metadata/fixed-inputs',
-    },
     {
         id: 5,
         translationKey: 'workflows',

package/src/pages/metadata/WFOProductBlocksPage.tsx

@@ -10,7 +10,7 @@ import {
 import {
     WFOStatusBadge,
     WFOProductBlockBadge,
-    TableWithFilter,
+    WFOTableWithFilter,
 } from '../../components';
 import {
     getTableConfigFromLocalStorage,
@@ -18,7 +18,7 @@ import {
     getPageChangeHandler,
     getEsQueryStringHandler,
 } from '../../components';
-import type { TableColumns, DataSorting } from '../../components';
+import type { WFOTableColumns, WFODataSorting } from '../../components';
 
 import { parseDateToLocaleString } from '../../utils';
 import type { ProductBlockDefinition } from '../../types';
@@ -30,20 +30,17 @@ import { GET_PRODUCTS_BLOCKS_GRAPHQL_QUERY } from '../../graphqlQueries';
 
 import { WFOMetadataPageLayout } from './WFOMetadataPageLayout';
 
-export const PRODUCT_BLOCK_FIELD_ID: keyof ProductBlockDefinition =
-    'productBlockId';
-export const PRODUCT_BLOCK_FIELD_NAME: keyof ProductBlockDefinition = 'name';
+const PRODUCT_BLOCK_FIELD_ID: keyof ProductBlockDefinition = 'productBlockId';
+const PRODUCT_BLOCK_FIELD_NAME: keyof ProductBlockDefinition = 'name';
 
-export const PRODUCT_BLOCK_FIELD_TAG: keyof ProductBlockDefinition = 'tag';
-export const PRODUCT_BLOCK_FIELD_DESCRIPTION: keyof ProductBlockDefinition =
+const PRODUCT_BLOCK_FIELD_TAG: keyof ProductBlockDefinition = 'tag';
+const PRODUCT_BLOCK_FIELD_DESCRIPTION: keyof ProductBlockDefinition =
     'description';
-export const PRODUCT_BLOCK_FIELD_STATUS: keyof ProductBlockDefinition =
-    'status';
-export const PRODUCT_BLOCK_FIELD_CREATED_AT: keyof ProductBlockDefinition =
+const PRODUCT_BLOCK_FIELD_STATUS: keyof ProductBlockDefinition = 'status';
+const PRODUCT_BLOCK_FIELD_CREATED_AT: keyof ProductBlockDefinition =
     'createdAt';
-export const PRODUCT_BLOCK_FIELD_END_DATE: keyof ProductBlockDefinition =
-    'endDate';
-export const PRODUCT_BLOCK_FIELD_RESOURCE_TYPES: keyof ProductBlockDefinition =
+const PRODUCT_BLOCK_FIELD_END_DATE: keyof ProductBlockDefinition = 'endDate';
+const PRODUCT_BLOCK_FIELD_RESOURCE_TYPES: keyof ProductBlockDefinition =
     'resourceTypes';
 
 export const WFOProductBlocksPage = () => {
@@ -63,7 +60,7 @@ export const WFOProductBlocksPage = () => {
             },
         });
 
-    const tableColumns: TableColumns<ProductBlockDefinition> = {
+    const tableColumns: WFOTableColumns<ProductBlockDefinition> = {
         productBlockId: {
             field: PRODUCT_BLOCK_FIELD_ID,
             name: t('id'),
@@ -127,7 +124,7 @@ export const WFOProductBlocksPage = () => {
         true,
     );
 
-    const dataSorting: DataSorting<ProductBlockDefinition> = {
+    const dataSorting: WFODataSorting<ProductBlockDefinition> = {
         field: dataDisplayParams.sortBy?.field ?? PRODUCT_BLOCK_FIELD_NAME,
         sortOrder: dataDisplayParams.sortBy?.order ?? SortOrder.ASC,
     };
@@ -143,7 +140,7 @@ export const WFOProductBlocksPage = () => {
 
     return (
         <WFOMetadataPageLayout>
-            <TableWithFilter<ProductBlockDefinition>
+            <WFOTableWithFilter<ProductBlockDefinition>
                 data={data ? data.productBlocks.page : []}
                 tableColumns={tableColumns}
                 dataSorting={dataSorting}

package/src/pages/metadata/WFOProductsPage.tsx

@@ -0,0 +1,169 @@
+import React from 'react';
+import { useTranslations } from 'next-intl';
+import type { Pagination } from '@elastic/eui/src/components';
+
+import {
+    DEFAULT_PAGE_SIZE,
+    DEFAULT_PAGE_SIZES,
+    METADATA_PRODUCT_TABLE_LOCAL_STORAGE_KEY,
+} from '../../components';
+import {
+    WFOStatusBadge,
+    WFOProductBlockBadge,
+    WFOTableWithFilter,
+} from '../../components';
+import {
+    getTableConfigFromLocalStorage,
+    getDataSortHandler,
+    getPageChangeHandler,
+    getEsQueryStringHandler,
+} from '../../components';
+import type { WFOTableColumns, WFODataSorting } from '../../components';
+
+import type { ProductDefinition } from '../../types';
+import { SortOrder } from '../../types';
+
+import { useDataDisplayParams, useQueryWithGraphql } from '../../hooks';
+
+import { GET_PRODUCTS_GRAPHQL_QUERY } from '../../graphqlQueries';
+
+import { WFOMetadataPageLayout } from './WFOMetadataPageLayout';
+
+const PRODUCT_FIELD_PRODUCT_ID: keyof ProductDefinition = 'productId';
+const PRODUCT_FIELD_NAME: keyof ProductDefinition = 'name';
+const PRODUCT_FIELD_DESCRIPTION: keyof ProductDefinition = 'description';
+const PRODUCT_FIELD_TAG: keyof ProductDefinition = 'tag';
+const PRODUCT_FIELD_PRODUCT_TYPE: keyof ProductDefinition = 'productType';
+const PRODUCT_FIELD_STATUS: keyof ProductDefinition = 'status';
+const PRODUCT_FIELD_PRODUCT_BLOCKS: keyof ProductDefinition = 'productBlocks';
+const PRODUCT_FIELD_FIXED_INPUTS: keyof ProductDefinition = 'fixedInputs';
+const PRODUCT_FIELD_CREATED_AT: keyof ProductDefinition = 'createdAt';
+
+export const WFOProductsPage = () => {
+    const t = useTranslations('metadata.products');
+
+    const initialPageSize =
+        getTableConfigFromLocalStorage(METADATA_PRODUCT_TABLE_LOCAL_STORAGE_KEY)
+            ?.selectedPageSize ?? DEFAULT_PAGE_SIZE;
+
+    const { dataDisplayParams, setDataDisplayParam } =
+        useDataDisplayParams<ProductDefinition>({
+            pageSize: initialPageSize,
+            sortBy: {
+                field: PRODUCT_FIELD_NAME,
+                order: SortOrder.ASC,
+            },
+        });
+
+    const tableColumns: WFOTableColumns<ProductDefinition> = {
+        productId: {
+            field: PRODUCT_FIELD_PRODUCT_ID,
+            name: t('id'),
+            width: '110',
+        },
+        name: {
+            field: PRODUCT_FIELD_NAME,
+            name: t('name'),
+            width: '110',
+        },
+        description: {
+            field: PRODUCT_FIELD_DESCRIPTION,
+            name: t('description'),
+            width: '400',
+        },
+        tag: {
+            field: PRODUCT_FIELD_TAG,
+            name: t('tag'),
+        },
+        productType: {
+            field: PRODUCT_FIELD_PRODUCT_TYPE,
+            name: t('productType'),
+        },
+        status: {
+            field: PRODUCT_FIELD_STATUS,
+            name: t('status'),
+            width: '90',
+            render: (value) => (
+                <WFOStatusBadge status={value.toLocaleLowerCase()} />
+            ),
+        },
+        productBlocks: {
+            field: PRODUCT_FIELD_PRODUCT_BLOCKS,
+            name: t('productBlocks'),
+            render: (productBlocks) => (
+                <>
+                    {productBlocks.map((block, index) => (
+                        <WFOProductBlockBadge key={index}>
+                            {block.name}
+                        </WFOProductBlockBadge>
+                    ))}
+                </>
+            ),
+        },
+        fixedInputs: {
+            field: PRODUCT_FIELD_FIXED_INPUTS,
+            name: t('fixedInputs'),
+            render: (fixedInputs) => (
+                <>
+                    {fixedInputs.map((fixedInput, index) => (
+                        <WFOProductBlockBadge key={index}>
+                            {`${fixedInput.name}: ${fixedInput.value}`}
+                        </WFOProductBlockBadge>
+                    ))}
+                </>
+            ),
+        },
+        createdAt: {
+            field: PRODUCT_FIELD_CREATED_AT,
+            name: t('createdAt'),
+        },
+    };
+
+    const { data, isFetching } = useQueryWithGraphql(
+        GET_PRODUCTS_GRAPHQL_QUERY,
+        {
+            first: dataDisplayParams.pageSize,
+            after: dataDisplayParams.pageIndex * dataDisplayParams.pageSize,
+            sortBy: dataDisplayParams.sortBy,
+        },
+        'products',
+        true,
+    );
+    const totalItems = data?.products.pageInfo.totalItems;
+
+    const pagination: Pagination = {
+        pageSize: dataDisplayParams.pageSize,
+        pageIndex: dataDisplayParams.pageIndex,
+        pageSizeOptions: DEFAULT_PAGE_SIZES,
+        totalItemCount: totalItems ? totalItems : 0,
+    };
+
+    const dataSorting: WFODataSorting<ProductDefinition> = {
+        field: dataDisplayParams.sortBy?.field ?? PRODUCT_FIELD_NAME,
+        sortOrder: dataDisplayParams.sortBy?.order ?? SortOrder.ASC,
+    };
+
+    return (
+        <WFOMetadataPageLayout>
+            <WFOTableWithFilter<ProductDefinition>
+                data={data ? data.products.page : []}
+                tableColumns={tableColumns}
+                dataSorting={dataSorting}
+                onUpdateDataSort={getDataSortHandler<ProductDefinition>(
+                    dataDisplayParams,
+                    setDataDisplayParam,
+                )}
+                onUpdatePage={getPageChangeHandler<ProductDefinition>(
+                    setDataDisplayParam,
+                )}
+                onUpdateEsQueryString={getEsQueryStringHandler<ProductDefinition>(
+                    setDataDisplayParam,
+                )}
+                pagination={pagination}
+                isLoading={isFetching}
+                esQueryString={dataDisplayParams.esQueryString}
+                localStorageKey={METADATA_PRODUCT_TABLE_LOCAL_STORAGE_KEY}
+            />
+        </WFOMetadataPageLayout>
+    );
+};

package/src/pages/metadata/WFOResourceTypesPage.tsx

@@ -0,0 +1,120 @@
+import React from 'react';
+import { useTranslations } from 'next-intl';
+import type { Pagination } from '@elastic/eui/src/components';
+
+import {
+    DEFAULT_PAGE_SIZE,
+    DEFAULT_PAGE_SIZES,
+    METADATA_RESOURCE_TYPES_TABLE_LOCAL_STORAGE_KEY,
+} from '../../components';
+import { WFOTableWithFilter } from '../../components';
+import {
+    getTableConfigFromLocalStorage,
+    getDataSortHandler,
+    getPageChangeHandler,
+    getEsQueryStringHandler,
+} from '../../components';
+import type { WFOTableColumns, WFODataSorting } from '../../components';
+
+import type { ResourceTypeDefinition } from '../../types';
+import { SortOrder } from '../../types';
+
+import { useDataDisplayParams, useQueryWithGraphql } from '../../hooks';
+
+import { GET_RESOURCE_TYPES_GRAPHQL_QUERY } from '../../graphqlQueries';
+
+import { WFOMetadataPageLayout } from './WFOMetadataPageLayout';
+
+export const RESOURCE_TYPE_FIELD_ID: keyof ResourceTypeDefinition =
+    'resourceTypeId';
+export const RESOURCE_TYPE_FIELD_TYPE: keyof ResourceTypeDefinition =
+    'resourceType';
+export const RESOURCE_TYPE_FIELD_DESCRIPTION: keyof ResourceTypeDefinition =
+    'description';
+
+export const WFOResourceTypesPage = () => {
+    const t = useTranslations('metadata.resourceTypes');
+
+    const initialPageSize =
+        getTableConfigFromLocalStorage(
+            METADATA_RESOURCE_TYPES_TABLE_LOCAL_STORAGE_KEY,
+        )?.selectedPageSize ?? DEFAULT_PAGE_SIZE;
+
+    const { dataDisplayParams, setDataDisplayParam } =
+        useDataDisplayParams<ResourceTypeDefinition>({
+            pageSize: initialPageSize,
+            sortBy: {
+                field: RESOURCE_TYPE_FIELD_TYPE,
+                order: SortOrder.ASC,
+            },
+        });
+
+    const tableColumns: WFOTableColumns<ResourceTypeDefinition> = {
+        resourceType: {
+            field: RESOURCE_TYPE_FIELD_TYPE,
+            name: t('type'),
+            width: '110',
+        },
+        description: {
+            field: RESOURCE_TYPE_FIELD_DESCRIPTION,
+            name: t('description'),
+            width: '400',
+        },
+        resourceTypeId: {
+            field: RESOURCE_TYPE_FIELD_ID,
+            name: t('resourceId'),
+            width: '110',
+        },
+    };
+
+    const { data, isFetching } = useQueryWithGraphql(
+        GET_RESOURCE_TYPES_GRAPHQL_QUERY,
+        {
+            first: dataDisplayParams.pageSize,
+            after: dataDisplayParams.pageIndex * dataDisplayParams.pageSize,
+            sortBy: dataDisplayParams.sortBy,
+        },
+        'resourceTypes',
+        true,
+    );
+
+    const dataSorting: WFODataSorting<ResourceTypeDefinition> = {
+        field: dataDisplayParams.sortBy?.field ?? RESOURCE_TYPE_FIELD_TYPE,
+        sortOrder: dataDisplayParams.sortBy?.order ?? SortOrder.ASC,
+    };
+
+    const totalItems = data?.resourceTypes.pageInfo.totalItems;
+
+    const pagination: Pagination = {
+        pageSize: dataDisplayParams.pageSize,
+        pageIndex: dataDisplayParams.pageIndex,
+        pageSizeOptions: DEFAULT_PAGE_SIZES,
+        totalItemCount: totalItems ? totalItems : 0,
+    };
+
+    return (
+        <WFOMetadataPageLayout>
+            <WFOTableWithFilter<ResourceTypeDefinition>
+                data={data ? data.resourceTypes.page : []}
+                tableColumns={tableColumns}
+                dataSorting={dataSorting}
+                onUpdateDataSort={getDataSortHandler<ResourceTypeDefinition>(
+                    dataDisplayParams,
+                    setDataDisplayParam,
+                )}
+                onUpdatePage={getPageChangeHandler<ResourceTypeDefinition>(
+                    setDataDisplayParam,
+                )}
+                onUpdateEsQueryString={getEsQueryStringHandler<ResourceTypeDefinition>(
+                    setDataDisplayParam,
+                )}
+                pagination={pagination}
+                isLoading={isFetching}
+                esQueryString={dataDisplayParams.esQueryString}
+                localStorageKey={
+                    METADATA_RESOURCE_TYPES_TABLE_LOCAL_STORAGE_KEY
+                }
+            />
+        </WFOMetadataPageLayout>
+    );
+};