@orchestrator-ui/orchestrator-ui-components 0.2.2 → 0.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@orchestrator-ui/orchestrator-ui-components",
-    "version": "0.2.2",
+    "version": "0.2.4",
     "license": "MIT",
     "scripts": {
         "test": "jest",

package/src/components/WFOBadges/{WFOStatusBadge/WFOStatusBadge.stories.tsx → WFOSubscriptionStatusBadge/WFOSubscriptionStatusBadge.stories.tsx}

@@ -1,9 +1,9 @@
 import type { Meta } from '@storybook/react';
-import { WFOStatusBadge } from './WFOStatusBadge';
+import { WFOSubscriptionStatusBadge } from './WFOSubscriptionStatusBadge';
 
-const Story: Meta<typeof WFOStatusBadge> = {
-    component: WFOStatusBadge,
-    title: 'Badges/WFOStatusBadge',
+const Story: Meta<typeof WFOSubscriptionStatusBadge> = {
+    component: WFOSubscriptionStatusBadge,
+    title: 'Badges/WFOSubscriptionStatusBadge',
 };
 export default Story;
 

package/src/components/WFOBadges/{WFOStatusBadge/WFOStatusBadge.tsx → WFOSubscriptionStatusBadge/WFOSubscriptionStatusBadge.tsx}

@@ -2,11 +2,13 @@ import { WFOBadge } from '../WFOBadge';
 import React, { FC } from 'react';
 import { useOrchestratorTheme } from '../../../hooks';
 
-export type WFOStatusBadgeProps = {
+export type WFOSubscriptionStatusBadgeProps = {
     status: string;
 };
 
-export const WFOStatusBadge: FC<WFOStatusBadgeProps> = ({ status }) => {
+export const WFOSubscriptionStatusBadge: FC<
+    WFOSubscriptionStatusBadgeProps
+> = ({ status }) => {
     const { theme, toSecondaryColor } = useOrchestratorTheme();
 
     const getBadgeColorFromStatus = (status: string) => {
@@ -19,7 +21,7 @@ export const WFOStatusBadge: FC<WFOStatusBadgeProps> = ({ status }) => {
             successText,
         } = theme.colors;
 
-        switch (status) {
+        switch (status.toLowerCase()) {
             case 'active':
                 return {
                     badgeColor: toSecondaryColor(success),

package/src/components/WFOBadges/WFOSubscriptionStatusBadge/index.ts

@@ -0,0 +1 @@
+export * from './WFOSubscriptionStatusBadge';

package/src/components/WFOBadges/index.ts

@@ -1,5 +1,5 @@
 export * from './WFOBadge';
-export * from './WFOStatusBadge';
+export * from './WFOSubscriptionStatusBadge';
 export * from './WFOProductBlockBadge';
 export * from './WFOProcessStatusBadge';
 export * from './WFOFailedTasksBadge';

package/src/components/{WFOBreadcrumbs → WFOPageTemplate/WFOBreadcrumbs}/WFOBreadcrumbs.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { EuiBreadcrumb, EuiBreadcrumbs, EuiSpacer } from '@elastic/eui';
 import { useRouter } from 'next/router';
-import { isUuid4, removeSuffix, upperCaseFirstChar } from '../../utils';
+import { isUuid4, removeSuffix, upperCaseFirstChar } from '../../../utils';
 
 export const WFOBreadcrumbs = () => {
     const router = useRouter();

package/src/components/WFOPageTemplate/WFOPageTemplate/WFOPageTemplate.tsx

@@ -3,6 +3,7 @@ import { EuiPageTemplate } from '@elastic/eui';
 import { WFOPageHeader } from '../WFOPageHeader';
 import { WFOSidebar } from '../WFOSidebar';
 import { useOrchestratorTheme } from '../../../hooks/useOrchestratorTheme';
+import { WFOBreadcrumbs } from '../WFOBreadcrumbs';
 
 export interface WFOPageTemplateProps {
     getAppLogo: (navigationHeight: number) => ReactElement;
@@ -50,6 +51,7 @@ export const WFOPageTemplate: FC<WFOPageTemplateProps> = ({
                         backgroundColor: theme.colors.emptyShade,
                     }}
                 >
+                    <WFOBreadcrumbs />
                     {children}
                 </EuiPageTemplate.Section>
             </EuiPageTemplate>

package/src/components/WFOPageTemplate/WFOSidebar/WFOSidebar.tsx

@@ -1,17 +1,19 @@
 import React, { FC } from 'react';
 import { EuiButton, EuiSideNav, EuiSpacer } from '@elastic/eui';
 import { useRouter } from 'next/router';
-
-const PATH_START = '/';
-const PATH_NEW_PROCESS = '/new-process';
-const PATH_PROCESSES = '/processes';
-const PATH_SUBSCRIPTIONS = '/subscriptions';
-const PATH_METADATA_PRODUCTS = '/metadata/products';
-const PATH_METADATA_PRODUCT_BLOCKS = '/metadata/productblocks';
-const PATH_METADATA_RESOURCE_TYPES = '/metadata/resource-types';
-const PATH_METADATA_WORKFLOWS = '/metadata/workflows';
-const PATH_TASKS = '/tasks';
-const PATH_SETTINGS = '/settings';
+import {
+    PATH_METADATA,
+    PATH_METADATA_PRODUCT_BLOCKS,
+    PATH_METADATA_PRODUCTS,
+    PATH_METADATA_RESOURCE_TYPES,
+    PATH_METADATA_WORKFLOWS,
+    PATH_NEW_PROCESS,
+    PATH_PROCESSES,
+    PATH_SETTINGS,
+    PATH_START,
+    PATH_SUBSCRIPTIONS,
+    PATH_TASKS,
+} from '../paths';
 
 export const WFOSidebar: FC = () => {
     const router = useRouter();
@@ -78,7 +80,7 @@ export const WFOSidebar: FC = () => {
                             name: 'Metadata',
                             id: '5',
                             onClick: () => {
-                                router.push(PATH_METADATA_PRODUCTS);
+                                router.push(PATH_METADATA);
                             },
                             items: [
                                 {

package/src/components/WFOPageTemplate/index.ts

@@ -1,3 +1,4 @@
 export * from './WFOPageHeader';
 export * from './WFOPageTemplate';
 export * from './WFOSidebar';
+export * from './paths';

package/src/components/WFOPageTemplate/paths.ts

@@ -0,0 +1,11 @@
+export const PATH_START = '/';
+export const PATH_NEW_PROCESS = '/new-process';
+export const PATH_PROCESSES = '/processes';
+export const PATH_SUBSCRIPTIONS = '/subscriptions';
+export const PATH_METADATA = '/metadata';
+export const PATH_METADATA_PRODUCTS = '/metadata/products';
+export const PATH_METADATA_PRODUCT_BLOCKS = '/metadata/productblocks';
+export const PATH_METADATA_RESOURCE_TYPES = '/metadata/resource-types';
+export const PATH_METADATA_WORKFLOWS = '/metadata/workflows';
+export const PATH_TASKS = '/tasks';
+export const PATH_SETTINGS = '/settings';

package/src/components/WFOSubscription/WFOSubscriptionBlock.tsx

@@ -9,7 +9,7 @@ import {
 } from '@elastic/eui';
 import { useTranslations } from 'next-intl';
 import { WFOCheckmarkCircleFill, WFOMinusCircleOutline } from '../../icons';
-import { WFOStatusBadge } from '../WFOBadges';
+import { WFOSubscriptionStatusBadge } from '../WFOBadges';
 import {
     subscriptionDefinitionCellStyle,
     subscriptionTableRowStyle,
@@ -18,7 +18,8 @@ import {
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const RenderField = (field: string, data: any) => {
-    if (field === 'status') return <WFOStatusBadge status={data[field]} />;
+    if (field === 'status')
+        return <WFOSubscriptionStatusBadge status={data[field]} />;
     else if (field === 'insync')
         return (
             <div style={{ position: 'relative', top: 5 }}>

package/src/components/WFOSubscriptionsList/WFOSubscriptionsList.tsx

@@ -0,0 +1,199 @@
+import React from 'react';
+import { FC } from 'react';
+import { useRouter } from 'next/router';
+import Link from 'next/link';
+import { EuiFlexItem, Pagination } from '@elastic/eui';
+import { useTranslations } from 'next-intl';
+import {
+    DEFAULT_PAGE_SIZES,
+    getDataSortHandler,
+    getEsQueryStringHandler,
+    getPageChangeHandler,
+    SUBSCRIPTIONS_TABLE_LOCAL_STORAGE_KEY,
+    TableColumnKeys,
+    WFODataSorting,
+    WFOTableColumns,
+    WFOTableControlColumnConfig,
+    WFOTableWithFilter,
+} from '../WFOTable';
+import { SubscriptionListItem } from './types';
+import { FilterQuery } from '../WFOFilterTabs';
+import { DataDisplayParams } from '../../hooks/useDataDisplayParams';
+import { useOrchestratorTheme } from '../../hooks/useOrchestratorTheme';
+import { getFirstUuidPart } from '../../utils/uuid';
+import { WFOSubscriptionStatusBadge } from '../WFOBadges/WFOSubscriptionStatusBadge';
+import {
+    WFOCheckmarkCircleFill,
+    WFOMinusCircleOutline,
+    WFOPlusCircleFill,
+} from '../../icons';
+import { parseDateToLocaleString } from '../../utils/date';
+import { useQueryWithGraphql } from '../../hooks/useQueryWithGraphql';
+import { getSubscriptionsListGraphQlQuery } from '../../graphqlQueries/subscriptionsListQuery';
+import { getTypedFieldFromObject } from '../../utils/getTypedFieldFromObject';
+import { WFOLoading } from '../WFOLoading';
+import { SortOrder } from '../../types';
+import { mapGrapghQlSubscriptionsResultToSubscriptionListItems } from './mapGrapghQlSubscriptionsResultToSubscriptionListItems';
+
+const FIELD_NAME_INLINE_SUBSCRIPTION_DETAILS = 'inlineSubscriptionDetails';
+
+const defaultHiddenColumns: TableColumnKeys<SubscriptionListItem> = [
+    'productName',
+];
+
+export type WFOSubscriptionsListProps = {
+    alwaysOnFilters?: FilterQuery<SubscriptionListItem>[];
+    dataDisplayParams: DataDisplayParams<SubscriptionListItem>;
+    setDataDisplayParam: <
+        DisplayParamKey extends keyof DataDisplayParams<SubscriptionListItem>,
+    >(
+        prop: DisplayParamKey,
+        value: DataDisplayParams<SubscriptionListItem>[DisplayParamKey],
+    ) => void;
+};
+
+export const WFOSubscriptionsList: FC<WFOSubscriptionsListProps> = ({
+    alwaysOnFilters,
+    dataDisplayParams,
+    setDataDisplayParam,
+}) => {
+    const router = useRouter();
+    const t = useTranslations('subscriptions.index');
+
+    const { theme } = useOrchestratorTheme();
+
+    const tableColumns: WFOTableColumns<SubscriptionListItem> = {
+        subscriptionId: {
+            field: 'subscriptionId',
+            name: t('id'),
+            width: '100',
+            render: (value) => getFirstUuidPart(value),
+        },
+        description: {
+            field: 'description',
+            name: t('description'),
+            width: '400',
+            render: (value, record) => (
+                <Link href={`/subscriptions/${record.subscriptionId}`}>
+                    {value}
+                </Link>
+            ),
+        },
+        status: {
+            field: 'status',
+            name: t('status'),
+            width: '110',
+            render: (value) => (
+                <WFOSubscriptionStatusBadge status={value.toLowerCase()} />
+            ),
+        },
+        insync: {
+            field: 'insync',
+            name: t('insync'),
+            width: '110',
+            render: (value) =>
+                value ? (
+                    <WFOCheckmarkCircleFill color={theme.colors.primary} />
+                ) : (
+                    <WFOMinusCircleOutline color={theme.colors.mediumShade} />
+                ),
+        },
+        productName: {
+            field: 'productName',
+            name: t('product'),
+        },
+        tag: {
+            field: 'tag',
+            name: t('tag'),
+            width: '100',
+        },
+        startDate: {
+            field: 'startDate',
+            name: t('startDate'),
+            width: '150',
+            render: parseDateToLocaleString,
+        },
+        endDate: {
+            field: 'endDate',
+            name: t('endDate'),
+            width: '150',
+            render: parseDateToLocaleString,
+        },
+        note: {
+            field: 'note',
+            name: t('note'),
+        },
+    };
+
+    const leadingControlColumns: WFOTableControlColumnConfig<SubscriptionListItem> =
+        {
+            inlineSubscriptionDetails: {
+                field: FIELD_NAME_INLINE_SUBSCRIPTION_DETAILS,
+                width: '40',
+                render: () => (
+                    <EuiFlexItem>
+                        <WFOPlusCircleFill color={theme.colors.mediumShade} />
+                    </EuiFlexItem>
+                ),
+            },
+        };
+
+    const { sortBy } = dataDisplayParams;
+    const { data, isFetching } = useQueryWithGraphql(
+        getSubscriptionsListGraphQlQuery<SubscriptionListItem>(),
+        {
+            first: dataDisplayParams.pageSize,
+            after: dataDisplayParams.pageIndex * dataDisplayParams.pageSize,
+            sortBy,
+            filterBy: alwaysOnFilters,
+        },
+        'subscriptions',
+        true,
+    );
+
+    const sortedColumnId = getTypedFieldFromObject(sortBy?.field, tableColumns);
+    if (!sortedColumnId) {
+        router.replace('/subscriptions');
+        return null;
+    }
+
+    if (!data) {
+        return <WFOLoading />;
+    }
+
+    const dataSorting: WFODataSorting<SubscriptionListItem> = {
+        field: sortedColumnId,
+        sortOrder: dataDisplayParams.sortBy?.order ?? SortOrder.ASC,
+    };
+    const { totalItems } = data.subscriptions.pageInfo;
+    const pagination: Pagination = {
+        pageSize: dataDisplayParams.pageSize,
+        pageIndex: dataDisplayParams.pageIndex,
+        pageSizeOptions: DEFAULT_PAGE_SIZES,
+        totalItemCount: totalItems ?? 0,
+    };
+
+    return (
+        <WFOTableWithFilter<SubscriptionListItem>
+            esQueryString={dataDisplayParams.esQueryString}
+            onUpdateEsQueryString={getEsQueryStringHandler<SubscriptionListItem>(
+                setDataDisplayParam,
+            )}
+            data={mapGrapghQlSubscriptionsResultToSubscriptionListItems(data)}
+            tableColumns={tableColumns}
+            leadingControlColumns={leadingControlColumns}
+            defaultHiddenColumns={defaultHiddenColumns}
+            dataSorting={dataSorting}
+            pagination={pagination}
+            isLoading={isFetching}
+            localStorageKey={SUBSCRIPTIONS_TABLE_LOCAL_STORAGE_KEY}
+            onUpdatePage={getPageChangeHandler<SubscriptionListItem>(
+                setDataDisplayParam,
+            )}
+            onUpdateDataSort={getDataSortHandler<SubscriptionListItem>(
+                dataDisplayParams,
+                setDataDisplayParam,
+            )}
+        />
+    );
+};

package/src/components/WFOSubscriptionsList/index.ts

@@ -0,0 +1,4 @@
+export * from './mapGrapghQlSubscriptionsResultToSubscriptionListItems';
+export * from './subscriptionListTabs';
+export * from './WFOSubscriptionsList';
+export * from './types';

package/src/components/WFOSubscriptionsList/mapGrapghQlSubscriptionsResultToSubscriptionListItems.ts

@@ -0,0 +1,34 @@
+import { SubscriptionsResult } from '../../types';
+import { SubscriptionListItem } from './types';
+import { parseDate } from '../../utils';
+
+export function mapGrapghQlSubscriptionsResultToSubscriptionListItems(
+    graphqlResponse: SubscriptionsResult,
+): SubscriptionListItem[] {
+    return graphqlResponse.subscriptions.page.map((subscription) => {
+        const {
+            description,
+            insync,
+            product,
+            startDate,
+            endDate,
+            status,
+            subscriptionId,
+            note,
+        } = subscription;
+
+        const { name: productName, tag } = product;
+
+        return {
+            description,
+            insync,
+            productName,
+            tag,
+            startDate: parseDate(startDate),
+            endDate: parseDate(endDate),
+            status,
+            subscriptionId,
+            note: note ?? null,
+        };
+    });
+}

package/src/{pages/subscriptions → components/WFOSubscriptionsList}/types.ts

@@ -1,5 +1,3 @@
-// Todo: preparation for moving the Subscriptions component (table) to the lib
-// https://github.com/workfloworchestrator/orchestrator-ui/issues/149
 export type SubscriptionListItem = {
     subscriptionId: string;
     description: string;

package/src/components/WFOTable/utils/constants.ts

@@ -13,3 +13,5 @@ export const METADATA_PRODUCTBLOCKS_TABLE_LOCAL_STORAGE_KEY =
 export const METADATA_PRODUCT_TABLE_LOCAL_STORAGE_KEY = 'metadataProductTable';
 export const METADATA_WORKFLOWS_TABLE_LOCAL_STORAGE_KEY =
     'metadataWorkflowsTable';
+
+export const SUBSCRIPTIONS_TABLE_LOCAL_STORAGE_KEY = 'subscriptionsTable';

package/src/components/index.ts

@@ -1,5 +1,5 @@
 export * from './WFOBadges';
-export * from './WFOBreadcrumbs';
+export * from './WFOPageTemplate/WFOBreadcrumbs';
 export * from './WFOFilterTabs';
 export * from './WFOPageTemplate';
 export * from './WFOSearchBar';

package/src/graphqlQueries/index.ts

@@ -1,3 +1,4 @@
+export * from './subscriptionsListQuery';
 export * from './productBlocksQuery';
-export * from './resourceTypesQuery';
 export * from './productsQuery';
+export * from './resourceTypesQuery';

package/src/graphqlQueries/processListQuery.ts

@@ -1,14 +1,10 @@
 import { parse } from 'graphql';
 import { gql } from 'graphql-request';
 import { TypedDocumentNode } from '@graphql-typed-document-node/core';
-import {
-    GraphqlQueryVariables,
-    Process,
-    ProcessesDefinitionsResult,
-} from '../types';
+import { GraphqlQueryVariables, Process, ProcessesResult } from '../types';
 
 export const GET_PROCESS_LIST_GRAPHQL_QUERY: TypedDocumentNode<
-    ProcessesDefinitionsResult,
+    ProcessesResult,
     GraphqlQueryVariables<Process>
 > = parse(gql`
     query ProcessList(
@@ -25,15 +21,16 @@ export const GET_PROCESS_LIST_GRAPHQL_QUERY: TypedDocumentNode<
         ) {
             page {
                 workflowName
-                lastStep
+                step
                 status
                 product
                 customer
                 createdBy
                 assignee
-                id
+                processId
                 started
                 lastModified
+                workflowTarget
                 subscriptions {
                     page {
                         subscriptionId

package/src/graphqlQueries/productsQuery.ts

@@ -1,12 +1,11 @@
 import { gql } from 'graphql-request';
 import { parse } from 'graphql';
 import type { TypedDocumentNode } from '@graphql-typed-document-node/core';
-
-import type {
-    ProductDefinition,
+import {
     GraphqlQueryVariables,
+    ProductDefinition,
     ProductDefinitionsResult,
-} from '@orchestrator-ui/orchestrator-ui-components';
+} from '../types';
 
 export const GET_PRODUCTS_GRAPHQL_QUERY: TypedDocumentNode<
     ProductDefinitionsResult,

package/src/graphqlQueries/subscriptionsListQuery.ts

@@ -0,0 +1,55 @@
+import { parse } from 'graphql';
+import { gql } from 'graphql-request';
+import { TypedDocumentNode } from '@graphql-typed-document-node/core';
+import {
+    GraphqlQueryVariables,
+    Subscription,
+    SubscriptionsResult,
+} from '../types';
+
+export const GET_SUBSCRIPTIONS_LIST_GRAPHQL_QUERY = parse(gql`
+    query SubscriptionsList(
+        $first: IntType!
+        $after: IntType!
+        $sortBy: [GraphqlSort!]
+        $filterBy: [GraphqlFilter!]
+    ) {
+        subscriptions(
+            first: $first
+            after: $after
+            sortBy: $sortBy
+            filterBy: $filterBy
+        ) {
+            page {
+                note
+                startDate
+                endDate
+                description
+                insync
+                status
+                subscriptionId
+                product {
+                    name
+                    tag
+                    productType
+                }
+            }
+            pageInfo {
+                totalItems
+                startCursor
+                hasPreviousPage
+                hasNextPage
+                endCursor
+            }
+        }
+    }
+`);
+
+export function getSubscriptionsListGraphQlQuery<
+    QueryVariablesType = Subscription,
+>(): TypedDocumentNode<
+    SubscriptionsResult,
+    GraphqlQueryVariables<QueryVariablesType>
+> {
+    return GET_SUBSCRIPTIONS_LIST_GRAPHQL_QUERY;
+}

package/src/graphqlQueries/workflowsQuery.ts

@@ -1,12 +1,11 @@
 import { gql } from 'graphql-request';
 import { parse } from 'graphql';
 import type { TypedDocumentNode } from '@graphql-typed-document-node/core';
-
-import type {
-    WorkflowDefinition,
+import {
     GraphqlQueryVariables,
+    WorkflowDefinition,
     WorkflowDefinitionsResult,
-} from '@orchestrator-ui/orchestrator-ui-components';
+} from '../types';
 
 export const GET_WORKFLOWS_GRAPHQL_QUERY: TypedDocumentNode<
     WorkflowDefinitionsResult,

package/src/index.ts

@@ -7,3 +7,4 @@ export * from './types';
 export * from './hooks';
 export * from './messages';
 export * from './pages';
+export * from './graphqlQueries';

package/src/messages/en-US.json

@@ -57,16 +57,17 @@
         },
         "index": {
             "workflowName": "Workflow",
-            "lastStep": "Last step",
+            "step": "Last step",
             "status": "Status",
             "product": "Product",
             "customer": "Customer",
             "subscriptions": "Subscriptions",
             "createdBy": "Created By",
             "assignee": "Assignee",
-            "id": "ID",
+            "processId": "ID",
             "started": "Started",
-            "lastModified": "Last Modified"
+            "lastModified": "Last Modified",
+            "workflowTarget": "Target"
         }
     },
     "subscriptions": {

package/src/messages/nl-NL.json

@@ -55,16 +55,17 @@
         },
         "index": {
             "workflowName": "Workflow naam",
-            "lastStep": "Laatste stap",
+            "step": "Laatste stap",
             "status": "Status",
             "product": "Product",
             "customer": "Klant",
             "subscriptions": "Subscriptions",
             "createdBy": "Gecreëerd door",
             "assignee": "Assignee",
-            "id": "ID",
+            "processId": "ID",
             "started": "Gestart",
-            "lastModified": "Aangepast op"
+            "lastModified": "Aangepast op",
+            "workflowTarget": "Doel"
         }
     },
     "subscriptions": {

package/src/pages/metadata/WFOProductBlocksPage.tsx

@@ -8,7 +8,7 @@ import {
     METADATA_PRODUCTBLOCKS_TABLE_LOCAL_STORAGE_KEY,
 } from '../../components';
 import {
-    WFOStatusBadge,
+    WFOSubscriptionStatusBadge,
     WFOProductBlockBadge,
     WFOTableWithFilter,
 } from '../../components';
@@ -85,7 +85,9 @@ export const WFOProductBlocksPage = () => {
             name: t('status'),
             width: '90',
             render: (value) => (
-                <WFOStatusBadge status={value.toLocaleLowerCase()} />
+                <WFOSubscriptionStatusBadge
+                    status={value.toLocaleLowerCase()}
+                />
             ),
         },
         resourceTypes: {

package/src/pages/metadata/WFOProductsPage.tsx

@@ -8,7 +8,7 @@ import {
     METADATA_PRODUCT_TABLE_LOCAL_STORAGE_KEY,
 } from '../../components';
 import {
-    WFOStatusBadge,
+    WFOSubscriptionStatusBadge,
     WFOProductBlockBadge,
     WFOTableWithFilter,
 } from '../../components';
@@ -84,7 +84,9 @@ export const WFOProductsPage = () => {
             name: t('status'),
             width: '90',
             render: (value) => (
-                <WFOStatusBadge status={value.toLocaleLowerCase()} />
+                <WFOSubscriptionStatusBadge
+                    status={value.toLocaleLowerCase()}
+                />
             ),
         },
         productBlocks: {