@orchestrator-ui/orchestrator-ui-components 1.11.0 → 1.12.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @orchestrator-ui/orchestrator-ui-components@1.11.0 build
+> @orchestrator-ui/orchestrator-ui-components@1.12.0 build
 > tsup src/index.ts --format esm --dts --tsconfig tsconfig.build.json
 
 CLI Building entry: src/index.ts
@@ -9,6 +9,6 @@
 ESM Build start
 DTS Build start
 ESM dist/index.js 2.12 MB
-ESM ⚡️ Build success in 619ms
-DTS ⚡️ Build success in 13044ms
+ESM ⚡️ Build success in 666ms
+DTS ⚡️ Build success in 12853ms
 DTS dist/index.d.ts 161.35 KB

package/.turbo/turbo-lint.log

@@ -1,5 +1,5 @@
 
-> @orchestrator-ui/orchestrator-ui-components@1.11.0 lint
+> @orchestrator-ui/orchestrator-ui-components@1.12.0 lint
 > eslint "src/**/*.ts*"
 
 

package/.turbo/turbo-test.log

@@ -1,19 +1,19 @@
 
-> @orchestrator-ui/orchestrator-ui-components@1.11.0 test
+> @orchestrator-ui/orchestrator-ui-components@1.12.0 test
 > jest
 
-PASS Orchestrator UI Components Tests src/utils/date.spec.ts
-PASS Orchestrator UI Components Tests src/components/WfoForms/formFields/utils.spec.ts
 PASS Orchestrator UI Components Tests src/components/WfoSubscription/utils/utils.spec.ts
+PASS Orchestrator UI Components Tests src/components/WfoForms/formFields/utils.spec.ts
+PASS Orchestrator UI Components Tests src/utils/date.spec.ts
+PASS Orchestrator UI Components Tests src/utils/getProductNamesFromProcess.spec.ts
 PASS Orchestrator UI Components Tests src/pages/processes/timelineUtils.spec.ts
 PASS Orchestrator UI Components Tests src/utils/string.spec.ts
-PASS Orchestrator UI Components Tests src/utils/getProductNamesFromProcess.spec.ts
 PASS Orchestrator UI Components Tests src/components/WfoTable/WfoDataGridTable/WfodataGridColumns.spec.ts
 PASS Orchestrator UI Components Tests src/components/WfoTree/treeUtils.spec.ts
 PASS Orchestrator UI Components Tests src/components/WfoTable/WfoTableWithFilter/updateQueryString.spec.ts
 PASS Orchestrator UI Components Tests src/components/WfoTable/utils/tableConfigPersistence.spec.ts
-PASS Orchestrator UI Components Tests src/components/WfoTable/utils/tableUtils.spec.ts
 PASS Orchestrator UI Components Tests src/components/WfoTable/utils/mapSortableAndFilterableValuesToTableColumnConfig.spec.ts
+PASS Orchestrator UI Components Tests src/components/WfoTable/utils/tableUtils.spec.ts
 PASS Orchestrator UI Components Tests src/utils/resultFlattener.spec.ts
 PASS Orchestrator UI Components Tests src/messages/getTranslationMessages.spec.ts
 PASS Orchestrator UI Components Tests src/utils/getToastMessage.spec.ts
@@ -23,14 +23,14 @@ PASS Orchestrator UI Components Tests src/components/WfoWorkflowSteps/stepListUt
 PASS Orchestrator UI Components Tests src/utils/getTokenName.spec.ts
 PASS Orchestrator UI Components Tests src/utils/environmentVariables.spec.ts
 PASS Orchestrator UI Components Tests src/utils/onlyUnique.spec.ts
-PASS Orchestrator UI Components Tests src/utils/uuid.spec.ts
 PASS Orchestrator UI Components Tests src/utils/getTypedFieldFromObject.spec.ts
-PASS Orchestrator UI Components Tests src/utils/toOptionalArrayEntry.spec.ts
+PASS Orchestrator UI Components Tests src/utils/uuid.spec.ts
 PASS Orchestrator UI Components Tests src/utils/getQueryVariablesForExport.spec.ts
+PASS Orchestrator UI Components Tests src/utils/toOptionalArrayEntry.spec.ts
 PASS Orchestrator UI Components Tests src/components/WfoPageTemplate/WfoPageHeader/utils/toHexColorWithOpacity.spec.ts
 
 Test Suites: 26 passed, 26 total
 Tests:       157 passed, 157 total
 Snapshots:   0 total
-Time:        3.684 s
+Time:        3.654 s
 Ran all test suites.

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @orchestrator-ui/orchestrator-ui-components
 
+## 1.12.0
+
+### Minor Changes
+
+- a95a6dc: Updates what the websocket interface is listening to
+
 ## 1.11.0
 
 ### Minor Changes

package/dist/index.js

@@ -41359,6 +41359,7 @@ var {
 
 // src/rtk/endpoints/streamMessages.ts
 var import_lodash = __toESM(require_lodash(), 1);
+import { getSession as getSession2 } from "next-auth/react";
 
 // src/utils/getToastMessage.ts
 var getToastMessage = (type, text, title) => {
@@ -41387,11 +41388,13 @@ var getToastMessage = (type, text, title) => {
 };
 
 // src/rtk/endpoints/streamMessages.ts
-var getWebSocket = (url) => {
-  return new WebSocket(url);
-};
-var PING_INTERVAL_MS = 5e3;
-var DEBOUNCE_CLOSE_INTERVAL_MS = 1e4;
+var getWebSocket = (url) => __async(void 0, null, function* () {
+  const session = yield getSession2();
+  const token = (session == null ? void 0 : session.accessToken) ? [session == null ? void 0 : session.accessToken] : [];
+  return new WebSocket(url, token);
+});
+var PING_INTERVAL_MS = 45e3;
+var DEBOUNCE_CLOSE_INTERVAL_MS = 6e4;
 var streamMessagesApi = orchestratorApi.injectEndpoints({
   endpoints: (build) => ({
     streamMessages: build.query({
@@ -41416,40 +41419,59 @@ var streamMessagesApi = orchestratorApi.injectEndpoints({
             clearInterval(pingInterval);
             updateCachedData(() => false);
           };
-          yield cacheDataLoaded;
-          const state = getState();
-          const { orchestratorWebsocketUrl } = state.orchestratorConfig;
-          const webSocket = getWebSocket(orchestratorWebsocketUrl);
-          webSocket.onopen = () => {
-            updateCachedData(() => true);
+          const invalidateTag = (tag) => {
+            const tagToInvalidate = tag;
+            if (validCacheTags.includes(tagToInvalidate)) {
+              const cacheInvalidationAction = orchestratorApi.util.invalidateTags([
+                tagToInvalidate
+              ]);
+              dispatch(cacheInvalidationAction);
+            } else {
+              console.error(
+                `Trying to invalidate a cache entry with an unknown tag: ${tagToInvalidate}`
+              );
+            }
+          };
+          const handleInvalidateCacheMessage = (message) => {
+            if (message.name === "invalidateCache" /* invalidateCache */) {
+              const messageValue = message.value;
+              if (typeof messageValue === "string") {
+                invalidateTag(messageValue);
+              } else if (Array.isArray(messageValue)) {
+                messageValue.forEach((tag) => invalidateTag(tag));
+              } else {
+                console.error(
+                  "invalid message value type",
+                  messageValue
+                );
+              }
+            }
           };
           const pingInterval = setInterval(() => {
-            webSocket.send("ping");
+            webSocket.send("__ping__");
           }, PING_INTERVAL_MS);
           const debounceCloseWebSocket = (0, import_lodash.debounce)(() => {
             webSocket.close();
           }, DEBOUNCE_CLOSE_INTERVAL_MS);
           debounceCloseWebSocket();
+          yield cacheDataLoaded;
+          const state = getState();
+          const { orchestratorWebsocketUrl } = state.orchestratorConfig;
+          const validCacheTags = Object.values(CacheTags);
+          const webSocket = yield getWebSocket(orchestratorWebsocketUrl);
+          webSocket.onopen = () => {
+            updateCachedData(() => true);
+          };
           webSocket.addEventListener(
             "message",
-            (message) => {
-              const tagOrPong = message.data.trim();
-              if (tagOrPong === "pong") {
+            (messageEvent) => {
+              const data = messageEvent.data;
+              if (data === "__pong__") {
                 debounceCloseWebSocket();
                 return;
               }
-              const tagToInvalidate = tagOrPong;
-              const validCacheTags = Object.values(CacheTags);
-              if (tagToInvalidate && validCacheTags.includes(tagToInvalidate)) {
-                const cacheInvalidationAction = orchestratorApi.util.invalidateTags([
-                  tagToInvalidate
-                ]);
-                dispatch(cacheInvalidationAction);
-              } else {
-                console.error(
-                  `Trying to invalidate a cache entry with an unknown tag: ${tagToInvalidate}`
-                );
-              }
+              const message = JSON.parse(data);
+              handleInvalidateCacheMessage(message);
             }
           );
           webSocket.onerror = (event) => {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@orchestrator-ui/orchestrator-ui-components",
-    "version": "1.11.0",
+    "version": "1.12.0",
     "license": "Apache-2.0",
     "description": "Library of UI Components used to display the workflow orchestrator frontend",
     "author": {

package/src/rtk/endpoints/streamMessages.ts

@@ -1,5 +1,7 @@
 import { debounce } from 'lodash';
+import { getSession } from 'next-auth/react';
 
+import type { WfoSession } from '@/hooks';
 import { addToastMessage } from '@/rtk/slices/toastMessages';
 import type { RootState } from '@/rtk/store';
 import { ToastTypes } from '@/types';
@@ -7,15 +9,24 @@ import { getToastMessage } from '@/utils/getToastMessage';
 
 import { CacheTags, orchestratorApi } from '../api';
 
-const getWebSocket = (url: string) => {
-    // TODO: Implement authentication taking this into account: https://stackoverflow.com/questions/4361173/http-headers-in-websockets-client-api/77060459#77060459
-    // https://github.com/workfloworchestrator/orchestrator-core/issues/502 - https://github.com/workfloworchestrator/orchestrator-ui-library/issues/823
-    return new WebSocket(url);
+const getWebSocket = async (url: string) => {
+    const session = (await getSession()) as WfoSession;
+    const token = session?.accessToken ? [session?.accessToken] : [];
+    // Implemented authentication taking this into account: https://stackoverflow.com/questions/4361173/http-headers-in-websockets-client-api/77060459#77060459
+    return new WebSocket(url, token);
 };
 
-const PING_INTERVAL_MS = 5000;
-const DEBOUNCE_CLOSE_INTERVAL_MS = 10000;
+const PING_INTERVAL_MS = 45000; // Recommended values are between 30 and 60 seconds
+const DEBOUNCE_CLOSE_INTERVAL_MS = 60000;
 
+type WebSocketMessage = {
+    name: MessageTypes;
+    value: string[] | string;
+};
+
+enum MessageTypes {
+    invalidateCache = 'invalidateCache',
+}
 /*
  * Websocket handling as recommended by RTK QUery see: https://redux-toolkit.js.org/rtk-query/usage/customizing-queries#streaming-data-with-no-initial-request
  * The websocket is opened after the cacheDataLoaded promise is resolved, and closed after the cacheEntryRemoved promise is resolved maintaining
@@ -52,22 +63,43 @@ const streamMessagesApi = orchestratorApi.injectEndpoints({
                     updateCachedData(() => false);
                 };
 
-                await cacheDataLoaded;
-
-                const state = getState() as RootState;
-                const { orchestratorWebsocketUrl } = state.orchestratorConfig;
+                const invalidateTag = (tag: string) => {
+                    const tagToInvalidate = tag as CacheTags;
+                    if (validCacheTags.includes(tagToInvalidate)) {
+                        const cacheInvalidationAction =
+                            orchestratorApi.util.invalidateTags([
+                                tagToInvalidate,
+                            ]);
+                        dispatch(cacheInvalidationAction);
+                    } else {
+                        console.error(
+                            `Trying to invalidate a cache entry with an unknown tag: ${tagToInvalidate}`,
+                        );
+                    }
+                };
 
-                // Starts the websocket
-                const webSocket = getWebSocket(orchestratorWebsocketUrl);
+                const handleInvalidateCacheMessage = (
+                    message: WebSocketMessage,
+                ) => {
+                    if (message.name === MessageTypes.invalidateCache) {
+                        const messageValue = message.value;
 
-                // Lets the WfoWebsocketStatusBadge know the websocket is connected
-                webSocket.onopen = () => {
-                    updateCachedData(() => true);
+                        if (typeof messageValue === 'string') {
+                            invalidateTag(messageValue);
+                        } else if (Array.isArray(messageValue)) {
+                            messageValue.forEach((tag) => invalidateTag(tag));
+                        } else {
+                            console.error(
+                                'invalid message value type',
+                                messageValue,
+                            );
+                        }
+                    }
                 };
 
                 // Send a ping message every to the websocket server to keep the connection alive
                 const pingInterval = setInterval(() => {
-                    webSocket.send('ping');
+                    webSocket.send('__ping__');
                 }, PING_INTERVAL_MS);
 
                 const debounceCloseWebSocket = debounce(() => {
@@ -76,34 +108,32 @@ const streamMessagesApi = orchestratorApi.injectEndpoints({
                 // 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;
+                const { orchestratorWebsocketUrl } = state.orchestratorConfig;
+                const validCacheTags = Object.values(CacheTags);
+
+                // Starts the websocket
+                const webSocket = await getWebSocket(orchestratorWebsocketUrl);
+
+                // Lets the WfoWebsocketStatusBadge know the websocket is connected
+                webSocket.onopen = () => {
+                    updateCachedData(() => true);
+                };
+
                 webSocket.addEventListener(
                     'message',
-                    (message: MessageEvent<string>) => {
-                        const tagOrPong = message.data.trim();
+                    (messageEvent: MessageEvent<string>) => {
+                        const data = messageEvent.data;
 
-                        if (tagOrPong === 'pong') {
+                        if (data === '__pong__') {
                             // Reset the debounced every time a 'pong' message is received
                             debounceCloseWebSocket();
                             return;
                         }
-
-                        const tagToInvalidate = tagOrPong as CacheTags;
-                        const validCacheTags = Object.values(CacheTags);
-
-                        if (
-                            tagToInvalidate &&
-                            validCacheTags.includes(tagToInvalidate)
-                        ) {
-                            const cacheInvalidationAction =
-                                orchestratorApi.util.invalidateTags([
-                                    tagToInvalidate,
-                                ]);
-                            dispatch(cacheInvalidationAction);
-                        } else {
-                            console.error(
-                                `Trying to invalidate a cache entry with an unknown tag: ${tagToInvalidate}`,
-                            );
-                        }
+                        const message = JSON.parse(data) as WebSocketMessage;
+                        handleInvalidateCacheMessage(message);
                     },
                 );