@orchestrator-ui/orchestrator-ui-components 1.36.0 → 1.37.0

package/src/pages/metadata/WfoProductBlocksPage.tsx

@@ -29,6 +29,7 @@ import {
 } from '@/hooks';
 import { useGetProductBlocksQuery, useLazyGetProductBlocksQuery } from '@/rtk';
 import type { ProductBlocksResponse } from '@/rtk';
+import { mapRtkErrorToWfoError } from '@/rtk/utils';
 import {
     BadgeType,
     GraphqlQueryVariables,
@@ -204,7 +205,7 @@ export const WfoProductBlocksPage = () => {
             sortBy: sortBy,
             query: queryString || undefined,
         };
-    const { data, isFetching, isError } = useGetProductBlocksQuery(
+    const { data, isFetching, error } = useGetProductBlocksQuery(
         graphqlQueryVariables,
     );
     const [getProductBlocksTrigger, { isFetching: isFetchingCsv }] =
@@ -264,7 +265,7 @@ export const WfoProductBlocksPage = () => {
                 )}
                 pagination={pagination}
                 isLoading={isFetching}
-                hasError={isError}
+                error={mapRtkErrorToWfoError(error)}
                 queryString={queryString}
                 localStorageKey={
                     METADATA_PRODUCT_BLOCKS_TABLE_LOCAL_STORAGE_KEY

package/src/pages/metadata/WfoProductsPage.tsx

@@ -27,6 +27,7 @@ import {
 } from '@/hooks';
 import { useGetProductsQuery, useLazyGetProductsQuery } from '@/rtk';
 import { ProductsResponse } from '@/rtk';
+import { mapRtkErrorToWfoError } from '@/rtk/utils';
 import type { GraphqlQueryVariables, ProductDefinition } from '@/types';
 import { BadgeType, SortOrder } from '@/types';
 import {
@@ -183,7 +184,7 @@ export const WfoProductsPage = () => {
         sortBy: sortBy,
         query: queryString || undefined,
     };
-    const { data, isFetching, isError } = useGetProductsQuery(
+    const { data, isFetching, error } = useGetProductsQuery(
         graphqlQueryVariables,
     );
     const [getProductsTrigger, { isFetching: isFetchingCsv }] =
@@ -259,7 +260,7 @@ export const WfoProductsPage = () => {
                 )}
                 pagination={pagination}
                 isLoading={isFetching}
-                hasError={isError}
+                error={mapRtkErrorToWfoError(error)}
                 queryString={queryString}
                 localStorageKey={METADATA_PRODUCT_TABLE_LOCAL_STORAGE_KEY}
                 onExportData={csvDownloadHandler(

package/src/pages/metadata/WfoResourceTypesPage.tsx

@@ -30,6 +30,7 @@ import {
     useGetResourceTypesQuery,
     useLazyGetResourceTypesQuery,
 } from '@/rtk';
+import { mapRtkErrorToWfoError } from '@/rtk/utils';
 import {
     BadgeType,
     GraphqlQueryVariables,
@@ -151,7 +152,7 @@ export const WfoResourceTypesPage = () => {
             sortBy: sortBy,
             query: queryString || undefined,
         };
-    const { data, isFetching, isError } = useGetResourceTypesQuery(
+    const { data, isFetching, error } = useGetResourceTypesQuery(
         graphqlQueryVariables,
     );
 
@@ -210,7 +211,7 @@ export const WfoResourceTypesPage = () => {
                 )}
                 pagination={pagination}
                 isLoading={isFetching}
-                hasError={isError}
+                error={mapRtkErrorToWfoError(error)}
                 queryString={queryString}
                 localStorageKey={
                     METADATA_RESOURCE_TYPES_TABLE_LOCAL_STORAGE_KEY

package/src/pages/metadata/WfoTasksPage.tsx

@@ -27,6 +27,7 @@ import {
     useStoredTableConfig,
 } from '@/hooks';
 import { TasksResponse, useGetTasksQuery, useLazyGetTasksQuery } from '@/rtk';
+import { mapRtkErrorToWfoError } from '@/rtk/utils';
 import type { GraphqlQueryVariables, TaskDefinition } from '@/types';
 import { BadgeType, SortOrder } from '@/types';
 import {
@@ -163,7 +164,7 @@ export const WfoTasksPage = () => {
         sortBy: graphQlTaskListMapper(sortBy),
         query: queryString || undefined,
     };
-    const { data, isFetching, isError } = useGetTasksQuery(
+    const { data, isFetching, error } = useGetTasksQuery(
         taskListQueryVariables,
     );
 
@@ -231,7 +232,7 @@ export const WfoTasksPage = () => {
                 )}
                 pagination={pagination}
                 isLoading={isFetching}
-                hasError={isError}
+                error={mapRtkErrorToWfoError(error)}
                 queryString={queryString}
                 localStorageKey={METADATA_TASKS_TABLE_LOCAL_STORAGE_KEY}
                 onExportData={csvDownloadHandler(

package/src/pages/metadata/WfoWorkflowsPage.tsx

@@ -29,6 +29,7 @@ import {
     useGetWorkflowsQuery,
     useLazyGetWorkflowsQuery,
 } from '@/rtk';
+import { mapRtkErrorToWfoError } from '@/rtk/utils';
 import type { GraphqlQueryVariables, WorkflowDefinition } from '@/types';
 import { BadgeType, SortOrder } from '@/types';
 import {
@@ -168,7 +169,7 @@ export const WfoWorkflowsPage = () => {
             sortBy: graphQlWorkflowListMapper(sortBy),
             query: queryString || undefined,
         };
-    const { data, isFetching, isError } = useGetWorkflowsQuery(
+    const { data, isFetching, error } = useGetWorkflowsQuery(
         workflowListQueryVariables,
     );
 
@@ -237,7 +238,7 @@ export const WfoWorkflowsPage = () => {
                 )}
                 pagination={pagination}
                 isLoading={isFetching}
-                hasError={isError}
+                error={mapRtkErrorToWfoError(error)}
                 queryString={queryString}
                 localStorageKey={METADATA_WORKFLOWS_TABLE_LOCAL_STORAGE_KEY}
                 onExportData={csvDownloadHandler(

package/src/rtk/api.ts

@@ -1,3 +1,5 @@
+import { ClientError } from 'graphql-request';
+import { GraphQLErrorExtensions } from 'graphql/error/GraphQLError';
 import { getSession, signOut } from 'next-auth/react';
 
 import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
@@ -73,6 +75,11 @@ export const catchErrorResponse = async (
     }
 };
 
+export type WfoGraphqlError = {
+    extensions: GraphQLErrorExtensions;
+    message: string;
+};
+
 export const orchestratorApi = createApi({
     reducerPath: 'orchestratorApi',
     baseQuery: (args, api, extraOptions: ExtraOptions) => {
@@ -104,6 +111,9 @@ export const orchestratorApi = createApi({
                             ? customApi.apiBaseUrl
                             : graphqlEndpointCore,
                         prepareHeaders,
+                        customErrors: (args: ClientError) => {
+                            return args.response?.errors;
+                        },
                     },
                     authActive,
                 );

package/src/rtk/endpoints/formFields.ts

@@ -21,7 +21,7 @@ const nodeSubscriptionsQuery = `query NodeSubscriptions(
     subscriptions(filterBy: [
         {field: "tag", value: "Node"},
         {field: "status", value: $statuses}
-    
+
     ], first: ${NUMBER_OF_ITEMS_REPRESENTING_ALL_ITEMS}, after: 0) {
         page {
             description

package/src/rtk/endpoints/inSync.ts

@@ -1,4 +1,4 @@
-import { Subscription } from '@/types';
+import { CacheTagType, Subscription } from '@/types';
 
 import { BaseQueryTypes, orchestratorApi } from '../api';
 
@@ -15,6 +15,12 @@ const inSyncApi = orchestratorApi.injectEndpoints({
             extraOptions: {
                 baseQueryType: BaseQueryTypes.fetch,
             },
+            invalidatesTags: (_result, _error, subscriptionId) => [
+                {
+                    type: CacheTagType.subscriptions,
+                    id: subscriptionId,
+                },
+            ],
         }),
     }),
 });

package/src/rtk/endpoints/streamMessages.ts

@@ -1,4 +1,3 @@
-import { debounce } from 'lodash';
 import { getSession } from 'next-auth/react';
 
 import type { WfoSession } from '@/hooks';
@@ -24,8 +23,11 @@ const getWebSocket = async (url: string) => {
     }
 };
 
-const PING_INTERVAL_MS = 45000; // Recommended values are between 30 and 60 seconds
-const DEBOUNCE_CLOSE_INTERVAL_MS = 60000;
+// Recommended values are between 30 and 60 seconds
+// Note: When the browser tab is suspended, the browser will give this suspended tab approximately every 60 seconds time
+// to execute code. This means that the ping message will be sent every 60 seconds in suspended mode. This depends
+// on the browser and can differ.
+const PING_INTERVAL_MS = 45000;
 
 type WebSocketMessage = {
     name: MessageTypes;
@@ -88,12 +90,6 @@ const streamMessagesApi = orchestratorApi.injectEndpoints({
                     webSocket.send('__ping__');
                 }, PING_INTERVAL_MS);
 
-                const debounceCloseWebSocket = debounce(() => {
-                    webSocket.close();
-                }, DEBOUNCE_CLOSE_INTERVAL_MS);
-                // Start the debounced function to close the websocket when no 'pong' message is received after DEBOUNCE_CLOSE_INTERVAL
-                debounceCloseWebSocket();
-
                 await cacheDataLoaded;
 
                 const state = getState() as RootState;
@@ -114,8 +110,7 @@ const streamMessagesApi = orchestratorApi.injectEndpoints({
                         const data = messageEvent.data;
 
                         if (data === '__pong__') {
-                            // Reset the debounced every time a 'pong' message is received
-                            debounceCloseWebSocket();
+                            // __pong__ is an accepted message, but should not be processed
                             return;
                         }
                         const message = JSON.parse(data) as WebSocketMessage;

package/src/rtk/utils.ts

@@ -1,5 +1,11 @@
+import { GraphQLError } from 'graphql/error/GraphQLError';
 import { isPlainObject } from 'lodash';
 
+import { SerializedError } from '@reduxjs/toolkit';
+import { FetchBaseQueryError } from '@reduxjs/toolkit/query';
+
+import { WfoGraphqlError } from '@/rtk/api';
+
 export function stripUndefined(obj: object): Record<string, unknown> {
     if (!isPlainObject(obj)) {
         return obj as Record<string, unknown>;
@@ -12,3 +18,62 @@ export function stripUndefined(obj: object): Record<string, unknown> {
     }
     return copy;
 }
+
+function isSerializedError(
+    error: SerializedError | undefined,
+): error is SerializedError {
+    if (error) {
+        return (
+            error &&
+            typeof error === 'object' &&
+            ('name' in error ||
+                'message' in error ||
+                'stack' in error ||
+                'code' in error)
+        );
+    }
+    return false;
+}
+
+const UNKNOWN_ERROR_MESSAGE = 'Unknown error';
+
+const getSerializedErrorMessage = (error: SerializedError) => {
+    if (error.message) {
+        return error.message;
+    } else if (error.name) {
+        return error.name;
+    } else if (error.code) {
+        return error.code;
+    } else if (error.stack) {
+        return error.stack;
+    }
+    return UNKNOWN_ERROR_MESSAGE;
+};
+
+export const mapRtkErrorToWfoError = (
+    error: FetchBaseQueryError | GraphQLError[] | SerializedError | undefined,
+): WfoGraphqlError[] | undefined => {
+    if (Array.isArray(error)) {
+        return error.map((err): WfoGraphqlError => {
+            return {
+                extensions: err.extensions,
+                message: err.message,
+            };
+        });
+    } else if (error && 'status' in error && error.status !== undefined) {
+        return [
+            {
+                extensions: {},
+                message: String(error.status),
+            },
+        ];
+    } else if (isSerializedError(error)) {
+        return [
+            {
+                extensions: {},
+                message: getSerializedErrorMessage(error),
+            },
+        ];
+    }
+    return error;
+};

package/src/rtk/wfoGraphqlRequestBaseQuery.ts

@@ -1,4 +1,5 @@
 import { ClientError, GraphQLClient } from 'graphql-request';
+import type { GraphQLError } from 'graphql/error/GraphQLError.js';
 import { signOut } from 'next-auth/react';
 
 import { BaseQueryFn } from '@reduxjs/toolkit/query';
@@ -53,7 +54,7 @@ export const wfoGraphqlRequestBaseQuery = <T, E = ErrorResponse>(
             );
 
             if (errors?.length && authActive) {
-                errors.map((error) => {
+                errors.map((error: GraphQLError) => {
                     if (error.extensions?.error_type === 'not_authenticated') {
                         signOut();
                     }
@@ -74,9 +75,9 @@ export const wfoGraphqlRequestBaseQuery = <T, E = ErrorResponse>(
             };
         } catch (error) {
             if (error instanceof ClientError) {
-                const { name, message, stack, request, response } = error;
+                const { request, response } = error;
                 const customErrors =
-                    options.customErrors ?? (() => ({ name, message, stack }));
+                    options.customErrors ?? ((error) => error.response.errors);
                 const customizedErrors = customErrors(error) as E;
                 return { error: customizedErrors, meta: { request, response } };
             }

package/src/theme/defaultOrchestratorTheme.ts

@@ -1,94 +1,104 @@
-import { EuiThemeModifications } from '@elastic/eui';
+import type { EuiThemeComputed, EuiThemeModifications } from '@elastic/eui';
 
-export const defaultOrchestratorTheme: EuiThemeModifications = {
-    base: 16,
-    breakpoint: {
-        xs: 0,
-        s: 575,
-        m: 768,
-        l: 992,
-        xl: 1200,
-        xxl: 1600,
-    },
-    size: {
-        base: '16px',
-        xxs: '2px',
-        xs: '4px',
-        s: '8px',
-        m: '12px',
-        l: '24px',
-        xl: '32px',
-        xxl: '40px',
-        xxxl: '48px',
-        xxxxl: '64px',
-    },
+export type WfoThemeExtraColors = {
     colors: {
-        DARK: {
-            primary: '#0077C8',
-            accent: '#E67300',
-            success: '#13B054',
-            warning: '#FFC514',
-            danger: '#FF4F46',
-            primaryText: '#1F8DD8',
-            accentText: '#E67300',
-            successText: '#13B054',
-            warningText: '#FFC514',
-            dangerText: '#FF4F46',
-            emptyShade: '#101827',
-            lightestShade: '#1F2937',
-            lightShade: '#374151',
-            mediumShade: '#4B5563',
-            darkShade: '#64758B',
-            darkestShade: '#F1F5F9',
-            fullShade: '#ffffff',
-            text: '#9CA3AF',
-            title: '#ffffff',
-            subduedText: '#9CA3AF',
-            link: '#1F8DD8',
-            body: '#1F2937',
-            highlight: '#51482F',
-            disabled: '#4B5563',
-            disabledText: '#4B5563',
-            shadow: '#000000',
+        header: string;
+    };
+};
+
+export type WfoThemeComputed = EuiThemeComputed<WfoThemeExtraColors>;
+
+export const defaultOrchestratorTheme: EuiThemeModifications<WfoThemeExtraColors> =
+    {
+        base: 16,
+        breakpoint: {
+            xs: 0,
+            s: 575,
+            m: 768,
+            l: 992,
+            xl: 1200,
+            xxl: 1600,
         },
-        LIGHT: {
-            primary: '#0077C8',
-            accent: '#E67300',
-            success: '#008939',
-            warning: '#FFC514',
-            danger: '#BD271F',
-            primaryText: '#0067AC',
-            accentText: '#B05200',
-            successText: '#007832',
-            warningText: '#8E6A00',
-            dangerText: '#AC0A01',
-            emptyShade: '#FFFFFF',
-            lightestShade: '#F1F5F9',
-            lightShade: '#CCD5E2',
-            mediumShade: '#94A4B8',
-            darkShade: '#64758B',
-            darkestShade: '#334255',
-            fullShade: '#0F172B',
-            text: '#334255',
-            title: '#0F172B',
-            subduedText: '#64758B',
-            link: '#0067AC',
-            body: '#F1F5F9',
-            highlight: '#FFF6DE',
-            disabled: '#94A4B8',
-            disabledText: '#94A4B8',
-            shadow: '#000000',
+        size: {
+            base: '16px',
+            xxs: '2px',
+            xs: '4px',
+            s: '8px',
+            m: '12px',
+            l: '24px',
+            xl: '32px',
+            xxl: '40px',
+            xxxl: '48px',
+            xxxxl: '64px',
         },
-    },
-    font: {
-        weight: {
-            regular: 400,
-            medium: 500,
-            semiBold: 600,
-            bold: 700,
+        colors: {
+            DARK: {
+                primary: '#0077C8',
+                accent: '#E67300',
+                success: '#13B054',
+                warning: '#FFC514',
+                danger: '#FF4F46',
+                primaryText: '#1F8DD8',
+                accentText: '#E67300',
+                successText: '#13B054',
+                warningText: '#FFC514',
+                dangerText: '#FF4F46',
+                emptyShade: '#101827',
+                lightestShade: '#1F2937',
+                lightShade: '#374151',
+                mediumShade: '#4B5563',
+                darkShade: '#64758B',
+                darkestShade: '#F1F5F9',
+                fullShade: '#ffffff',
+                text: '#9CA3AF',
+                title: '#ffffff',
+                subduedText: '#9CA3AF',
+                link: '#1F8DD8',
+                body: '#1F2937',
+                highlight: '#51482F',
+                disabled: '#4B5563',
+                disabledText: '#4B5563',
+                shadow: '#000000',
+            },
+            LIGHT: {
+                primary: '#0077C8',
+                accent: '#E67300',
+                success: '#008939',
+                warning: '#FFC514',
+                danger: '#BD271F',
+                primaryText: '#0067AC',
+                accentText: '#B05200',
+                successText: '#007832',
+                warningText: '#8E6A00',
+                dangerText: '#AC0A01',
+                emptyShade: '#FFFFFF',
+                lightestShade: '#F1F5F9',
+                lightShade: '#CCD5E2',
+                mediumShade: '#94A4B8',
+                darkShade: '#64758B',
+                darkestShade: '#334255',
+                fullShade: '#0F172B',
+                text: '#334255',
+                title: '#0F172B',
+                subduedText: '#64758B',
+                link: '#0067AC',
+                body: '#F1F5F9',
+                highlight: '#FFF6DE',
+                disabled: '#94A4B8',
+                disabledText: '#94A4B8',
+                shadow: '#000000',
+            },
+            header: '#04385F',
         },
-    },
-    border: {
-        thin: 'solid 1px #ddd',
-    },
-};
+        font: {
+            weight: {
+                regular: 400,
+                medium: 500,
+                semiBold: 600,
+                bold: 700,
+            },
+        },
+        border: {
+            thin: 'solid 1px #ddd',
+        },
+    };