@orchestrator-ui/orchestrator-ui-components 2.12.0 → 2.13.0

package/package.json

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

package/src/components/WfoForms/UserInputForm.tsx

@@ -34,7 +34,7 @@ import {
 } from '@elastic/eui';
 
 import { ConfirmDialogHandler, ConfirmationDialogContext } from '@/contexts';
-import { useOrchestratorTheme } from '@/hooks';
+import { useOrchestratorTheme, useWfoErrorMonitoring } from '@/hooks';
 import { WfoPlayFill } from '@/icons';
 import { FormValidationError, ValidationError } from '@/types/forms';
 
@@ -429,6 +429,7 @@ export function WfoUserInputForm({
     const [processing, setProcessing] = useState<boolean>(false);
     const [nrOfValidationErrors, setNrOfValidationErrors] = useState<number>(0);
     const [rootErrors, setRootErrors] = useState<string[]>([]);
+    const { reportError } = useWfoErrorMonitoring();
 
     const openLeavePageDialog = (
         leaveAction: ConfirmDialogHandler,
@@ -457,7 +458,7 @@ export function WfoUserInputForm({
                 await validSubmit(userInput);
                 setProcessing(false);
                 return null;
-            } catch (error: unknown) {
+            } catch (error) {
                 setProcessing(false);
                 if (typeof error === 'object' && error !== null) {
                     const validationError = error as FormValidationError;
@@ -485,6 +486,9 @@ export function WfoUserInputForm({
                 }
                 // Let the error escape, so it can be caught by our own onerror handler instead of being silenced by uniforms
                 setTimeout(() => {
+                    reportError(
+                        new Error(`Forms error: ${JSON.stringify({ error })}`),
+                    );
                     throw error;
                 }, 0);
 

package/src/components/WfoSubscription/styles.ts

@@ -34,18 +34,23 @@ export const getSubscriptionDetailStyles = ({ theme }: WfoTheme) => {
     });
     const workflowTargetStyle = css({ fontWeight: theme.font.weight.bold });
 
-    const lastContentCellStyle = css({
-        ...contentCellStyle,
-        border: 0,
-    });
+    const lastContentCellStyle = css([
+        {
+            ...contentCellStyle,
+        },
+        {
+            borderBottom: 0,
+        },
+    ]);
 
-    const lastHeaderCellStyle = css({
-        padding: theme.base,
-        paddingLeft: 0,
-        width: 250,
-        fontWeight: theme.font.weight.medium,
-        border: 0,
-    });
+    const lastHeaderCellStyle = css([
+        {
+            ...headerCellStyle,
+        },
+        {
+            borderBottomWidth: 0,
+        },
+    ]);
 
     const inUseByRelationDetailsStyle = css({
         borderColor: theme.colors.lightShade,

package/src/configuration/version.ts

@@ -1 +1 @@
-export const ORCHESTRATOR_UI_LIBRARY_VERSION = '2.12.0';
+export const ORCHESTRATOR_UI_LIBRARY_VERSION = '2.13.0';

package/src/contexts/WfoErrorMonitoringProvider.tsx

@@ -0,0 +1,37 @@
+import React, { FC, ReactNode, createContext } from 'react';
+
+export type WfoErrorMonitoring = {
+    reportError: (error: Error | string) => void;
+    reportMessage: (message: string) => void;
+};
+
+export const emptyWfoErrorMonitoring: WfoErrorMonitoring = {
+    reportError: () => {},
+    reportMessage: () => {},
+};
+
+export const WfoErrorMonitoringContext = createContext<WfoErrorMonitoring>(
+    emptyWfoErrorMonitoring,
+);
+
+export type WfoErrorMonitoringProviderProps = {
+    errorMonitoringHandler?: WfoErrorMonitoring;
+    children: ReactNode;
+};
+
+/**
+ *
+ * @param errorMonitoringHandler for implementing the error monitoring. When not provided, all report calls are no-ops.
+ * @param children
+ */
+export const WfoErrorMonitoringProvider: FC<
+    WfoErrorMonitoringProviderProps
+> = ({ errorMonitoringHandler, children }) => {
+    return (
+        <WfoErrorMonitoringContext.Provider
+            value={errorMonitoringHandler ?? emptyWfoErrorMonitoring}
+        >
+            {children}
+        </WfoErrorMonitoringContext.Provider>
+    );
+};

package/src/contexts/index.ts

@@ -2,3 +2,4 @@ export * from './ConfirmationDialogProvider';
 export * from './OrchestratorConfigContext';
 export * from './PolicyContext';
 export * from './TreeContext';
+export * from './WfoErrorMonitoringProvider';

package/src/hooks/index.ts

@@ -6,5 +6,6 @@ export * from './useDataDisplayParams';
 export * from './useShowToastMessage';
 export * from './useStoredTableConfig';
 export * from './useWithOrchestratorTheme';
+export * from './useWfoErrorMonitoring';
 export * from './useWfoSession';
 export * from './useGetOrchestratorConfig';

package/src/hooks/useWfoErrorMonitoring.ts

@@ -0,0 +1,6 @@
+import { useContext } from 'react';
+
+import { WfoErrorMonitoringContext } from '@/contexts';
+
+export const useWfoErrorMonitoring = () =>
+    useContext(WfoErrorMonitoringContext);

package/src/rtk/endpoints/streamMessages.ts

@@ -97,7 +97,7 @@ const streamMessagesApi = orchestratorApi.injectEndpoints({
                 const getDebounce = (delay: number) => {
                     return debounce(() => {
                         webSocket.close();
-                        // note: websocket.close doesnt trigger the onclose handler when losing
+                        // note: websocket.close doesn't trigger the onClose handler when closing
                         // internet connection so we call the cleanup event from here to be sure it's called
                         cleanUp();
                     }, delay);