@orchestrator-ui/orchestrator-ui-components 0.5.0 → 0.5.1

package/package.json

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

package/src/components/WfoDateTime/WfoDateTime.tsx

@@ -1,9 +1,10 @@
 import React, { FC } from 'react';
 
 import {
+    getDate,
     parseDateOrTimeRelativeToToday,
     parseDateToLocaleDateTimeString,
-} from '../../utils';
+} from '@/utils';
 
 export type WfoDateTimeProps = {
     dateOrIsoString: Date | string | null;
@@ -18,11 +19,3 @@ export const WfoDateTime: FC<WfoDateTimeProps> = ({ dateOrIsoString }) => {
         </span>
     );
 };
-
-function getDate(date: Date | string | null) {
-    if (typeof date === 'string') {
-        return new Date(date);
-    }
-
-    return date;
-}

package/src/components/WfoErrorBoundary/WfoErrorBoundary.tsx

@@ -0,0 +1,45 @@
+import React, { ErrorInfo, ReactNode } from 'react';
+
+type ErrorBoundaryProps = {
+    fallback?: ReactNode;
+    children: ReactNode;
+};
+
+type ErrorBoundaryState = {
+    hasError: boolean;
+};
+
+export class WfoErrorBoundary extends React.Component<
+    ErrorBoundaryProps,
+    ErrorBoundaryState
+> {
+    constructor(props: ErrorBoundaryProps) {
+        super(props);
+        this.state = { hasError: false };
+    }
+
+    static getDerivedStateFromError() {
+        return { hasError: true };
+    }
+
+    componentDidCatch(error: Error, info: ErrorInfo) {
+        console.error(error, info.componentStack);
+    }
+
+    render() {
+        if (this.state.hasError) {
+            if (this.props.fallback) {
+                return this.props.fallback;
+            }
+
+            return (
+                <p>
+                    An unexpected error occurred, try to go back to the{' '}
+                    <a href="/">home page</a>
+                </p>
+            );
+        }
+
+        return this.props.children;
+    }
+}

package/src/components/WfoErrorBoundary/index.ts

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

package/src/components/WfoSubscription/WfoSubscriptionGeneral.tsx

@@ -4,7 +4,9 @@ import { useTranslations } from 'next-intl';
 
 import { EuiFlexGrid, EuiFlexItem } from '@elastic/eui';
 
-import { SubscriptionDetail } from '../../types';
+import { SubscriptionDetail } from '@/types';
+import { formatDate } from '@/utils';
+
 import {
     WfoProductStatusBadge,
     WfoSubscriptionStatusBadge,
@@ -33,18 +35,17 @@ export const WfoSubscriptionGeneral = ({
                 key: t('productName'),
                 value: subscriptionDetail.product.name,
             },
-
             {
                 key: t('description'),
                 value: subscriptionDetail.description,
             },
             {
                 key: t('startDate'),
-                value: subscriptionDetail.startDate,
+                value: formatDate(subscriptionDetail.startDate),
             },
             {
                 key: t('endDate'),
-                value: subscriptionDetail.endDate,
+                value: formatDate(subscriptionDetail.endDate),
             },
             {
                 key: t('status'),
@@ -71,6 +72,7 @@ export const WfoSubscriptionGeneral = ({
                     subscriptionDetail && subscriptionDetail.customer
                         ? `${subscriptionDetail.customer?.customerId}`
                         : '-',
+                textToCopy: subscriptionDetail.customer?.customerId,
             },
             {
                 key: t('note'),
@@ -111,11 +113,11 @@ export const WfoSubscriptionGeneral = ({
             },
             {
                 key: t('created'),
-                value: product.createdAt,
+                value: formatDate(product.createdAt),
             },
             {
                 key: t('endDate'),
-                value: product.endDate,
+                value: formatDate(product.endDate),
             },
         ];
     };

package/src/components/WfoSubscriptionsList/WfoSubscriptionsList.tsx

@@ -155,7 +155,7 @@ export const WfoSubscriptionsList: FC<WfoSubscriptionsListProps> = ({
         filterBy: alwaysOnFilters,
         query: queryString || undefined,
     };
-    const { data, isError, isLoading } = useQueryWithGraphql(
+    const { data, isError, isFetching } = useQueryWithGraphql(
         getSubscriptionsListGraphQlQuery<SubscriptionListItem>(),
         graphqlQueryVariables,
         ['subscriptions', 'listPage'],
@@ -205,7 +205,7 @@ export const WfoSubscriptionsList: FC<WfoSubscriptionsListProps> = ({
             defaultHiddenColumns={hiddenColumns}
             dataSorting={dataSorting}
             pagination={pagination}
-            isLoading={isLoading}
+            isLoading={isFetching}
             localStorageKey={SUBSCRIPTIONS_TABLE_LOCAL_STORAGE_KEY}
             detailModalTitle={'Details - Subscription'}
             onUpdatePage={getPageChangeHandler<SubscriptionListItem>(

package/src/components/WfoTable/WfoBasicTable/WfoBasicTable.tsx

@@ -1,5 +1,7 @@
 import React, { ReactNode } from 'react';
 
+import { useTranslations } from 'next-intl';
+
 import { EuiBasicTable, EuiBasicTableColumn, Pagination } from '@elastic/eui';
 import { Criteria } from '@elastic/eui/src/components/basic_table/basic_table';
 import { SerializedStyles } from '@emotion/react';
@@ -68,6 +70,8 @@ export const WfoBasicTable = <T extends object>({
     const { theme } = useOrchestratorTheme();
     const { basicTableStyle } = getWfoBasicTableStyles(theme);
 
+    const t = useTranslations('common');
+
     const statusColorColumn: WfoTableControlColumnConfig<T> = {
         statusColorField: {
             field: WFO_STATUS_COLOR_FIELD,
@@ -94,6 +98,7 @@ export const WfoBasicTable = <T extends object>({
         <EuiBasicTable
             css={tableStyling}
             items={data}
+            noItemsMessage={isLoading ? t('loading') : t('noItemsFound')}
             columns={mapWfoTableColumnsToEuiColumns(
                 allTableColumns,
                 hiddenColumns,

package/src/components/index.ts

@@ -23,4 +23,5 @@ export * from './WfoDiff';
 export * from './WfoSettings';
 export * from './WfoInsyncIcon';
 export * from './WfoError';
+export * from './WfoErrorBoundary';
 export * from './WfoWorkflowSteps';

package/src/graphqlQueries/subscriptionsListQuery.ts

@@ -71,6 +71,7 @@ export const GET_SUBSCRIPTIONS_LIST_SUMMARY_GRAPHQL_QUERY = parse(gql`
             query: $query
         ) {
             page {
+                startDate
                 description
                 subscriptionId
             }
@@ -93,6 +94,8 @@ export const getSubscriptionsListGraphQlQuery = <
 export const getSubscriptionsListSummaryGraphQlQuery = <
     QueryVariablesType = Subscription,
 >(): TypedDocumentNode<
-    SubscriptionsResult<Pick<Subscription, 'subscriptionId' | 'description'>>,
+    SubscriptionsResult<
+        Pick<Subscription, 'subscriptionId' | 'description' | 'startDate'>
+    >,
     GraphqlQueryVariables<QueryVariablesType>
 > => GET_SUBSCRIPTIONS_LIST_SUMMARY_GRAPHQL_QUERY;

package/src/messages/en-GB.json

@@ -19,9 +19,11 @@
         "deselect": "Deselect",
         "close": "Close",
         "editColumns": "Edit columns",
+        "loading": "Loading",
         "newSubscription": "New subscription",
         "newTask": "New task",
         "noFailedTasks": "No failed tasks!",
+        "noItemsFound": "No items found",
         "search": "Search",
         "errorMessage": "An error occurred",
         "export": "Export"

package/src/messages/nl-NL.json

@@ -19,9 +19,11 @@
         "deselect": "Deselecteer",
         "close": "Sluiten",
         "editColumns": "Wijzig kolommen",
+        "loading": "Laden",
         "newSubscription": "Nieuwe subscription",
         "newTask": "Nieuwe task",
         "noFailedTasks": "Geen gefaalde taken!",
+        "noItemsFound": "Geen items gevonden",
         "search": "Zoeken",
         "errorMessage": "Er is een fout opgetreden",
         "export": "Exporteren"

package/src/pages/metadata/WfoProductBlocksPage.tsx

@@ -201,7 +201,7 @@ export const WfoProductBlocksPage = () => {
             sortBy: sortBy,
             query: queryString || undefined,
         };
-    const { data, isLoading, isError } = useQueryWithGraphql(
+    const { data, isFetching, isError } = useQueryWithGraphql(
         GET_PRODUCTS_BLOCKS_GRAPHQL_QUERY,
         graphqlQueryVariables,
         ['productBlocks', 'listPage'],
@@ -249,7 +249,7 @@ export const WfoProductBlocksPage = () => {
                     setDataDisplayParam,
                 )}
                 pagination={pagination}
-                isLoading={isLoading}
+                isLoading={isFetching}
                 hasError={isError}
                 queryString={queryString}
                 localStorageKey={

package/src/pages/metadata/WfoProductsPage.tsx

@@ -170,7 +170,7 @@ export const WfoProductsPage = () => {
         sortBy: sortBy,
         query: queryString || undefined,
     };
-    const { data, isLoading, isError } = useQueryWithGraphql(
+    const { data, isFetching, isError } = useQueryWithGraphql(
         getProductsQuery(),
         graphqlQueryVariables,
         ['products', 'listPage'],
@@ -218,7 +218,7 @@ export const WfoProductsPage = () => {
                     setDataDisplayParam,
                 )}
                 pagination={pagination}
-                isLoading={isLoading}
+                isLoading={isFetching}
                 hasError={isError}
                 queryString={queryString}
                 localStorageKey={METADATA_PRODUCT_TABLE_LOCAL_STORAGE_KEY}

package/src/pages/metadata/WfoResourceTypesPage.tsx

@@ -144,7 +144,7 @@ export const WfoResourceTypesPage = () => {
             sortBy: sortBy,
             query: queryString || undefined,
         };
-    const { data, isLoading, isError } = useQueryWithGraphql(
+    const { data, isFetching, isError } = useQueryWithGraphql(
         GET_RESOURCE_TYPES_GRAPHQL_QUERY,
         graphqlQueryVariables,
         ['resourceTypes', 'listPage'],
@@ -192,7 +192,7 @@ export const WfoResourceTypesPage = () => {
                     setDataDisplayParam,
                 )}
                 pagination={pagination}
-                isLoading={isLoading}
+                isLoading={isFetching}
                 hasError={isError}
                 queryString={queryString}
                 localStorageKey={

package/src/pages/metadata/WfoWorkflowsPage.tsx

@@ -156,7 +156,7 @@ export const WfoWorkflowsPage = () => {
         sortBy: graphQlWorkflowListMapper(sortBy),
         query: queryString || undefined,
     };
-    const { data, isLoading, isError } = useQueryWithGraphql(
+    const { data, isFetching, isError } = useQueryWithGraphql(
         GET_WORKFLOWS_GRAPHQL_QUERY,
         graphqlQueryVariables,
         ['workflows', 'listPage'],
@@ -204,7 +204,7 @@ export const WfoWorkflowsPage = () => {
                     setDataDisplayParam,
                 )}
                 pagination={pagination}
-                isLoading={isLoading}
+                isLoading={isFetching}
                 hasError={isError}
                 queryString={queryString}
                 localStorageKey={METADATA_WORKFLOWS_TABLE_LOCAL_STORAGE_KEY}

package/src/pages/startPage/WfoStartPage.tsx

@@ -23,7 +23,7 @@ import {
     SortOrder,
     Subscription,
 } from '@/types';
-import { getFirstUuidPart } from '@/utils';
+import { formatDate } from '@/utils';
 
 export const WfoStartPage = () => {
     const t = useTranslations('startPage');
@@ -71,7 +71,7 @@ export const WfoStartPage = () => {
             subscriptionsSummaryResult?.subscriptions.page.map(
                 (subscription) => ({
                     title: subscription.description,
-                    value: getFirstUuidPart(subscription.subscriptionId),
+                    value: formatDate(subscription.startDate),
                     url: `${PATH_SUBSCRIPTIONS}/${subscription.subscriptionId}`,
                 }),
             ) ?? [],
@@ -90,7 +90,7 @@ export const WfoStartPage = () => {
         listItems:
             processesSummaryResult?.processes.page.map((workflow) => ({
                 title: workflow.workflowName,
-                value: workflow.startedAt,
+                value: formatDate(workflow?.startedAt),
                 url: `${PATH_WORKFLOWS}/${workflow.processId}`,
             })) ?? [],
         button: {
@@ -109,7 +109,7 @@ export const WfoStartPage = () => {
         listItems:
             failedTasksSummaryResult?.processes.page.map((task) => ({
                 title: task.workflowName,
-                value: task.startedAt,
+                value: formatDate(task?.startedAt),
                 url: `${PATH_TASKS}/${task.processId}`,
             })) ?? [],
         button: {
@@ -154,9 +154,9 @@ export const WfoStartPage = () => {
         <EuiFlexItem>
             <WfoSummaryCards
                 summaryCards={[
-                    latestActiveSubscriptionsSummaryCard,
-                    latestWorkflowsSummaryCard,
                     failedTasksSummaryCard,
+                    latestWorkflowsSummaryCard,
+                    latestActiveSubscriptionsSummaryCard,
                     productsSummaryCard,
                 ]}
             />

package/src/utils/date.ts

@@ -112,3 +112,11 @@ export const formatDateCetWithUtc = (
 
     return `${formattedDateCET} (${formattedDateUTC})`;
 };
+
+export const getDate = (date: Date | string | null) => {
+    if (typeof date === 'string') {
+        return new Date(date);
+    }
+
+    return date;
+};