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

package/package.json

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

package/src/components/WfoBadges/WfoFailedTasksBadge/WfoFailedTasksBadge.tsx

@@ -1,18 +1,20 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 
 import { useTranslations } from 'next-intl';
+import Link from 'next/link';
 
 import { EuiToolTip } from '@elastic/eui';
 
-import { WfoHeaderBadge } from '@/components';
-import { useOrchestratorTheme } from '@/hooks';
-import { WfoCheckmarkCircleFill } from '@/icons';
-import { WfoXCircleFill } from '@/icons';
+import { PATH_TASKS, WfoHeaderBadge } from '@/components';
+import { useOrchestratorTheme, useWithOrchestratorTheme } from '@/hooks';
+import { WfoCheckmarkCircleFill, WfoXCircleFill } from '@/icons';
 import {
     ProcessStatusCounts,
     useProcessStatusCountsQuery,
 } from '@/rtk/endpoints/processStatusCounts';
 
+import { getTasksBadgeStyles } from './styles';
+
 type TaskCountsSummary = {
     failed: number;
     inconsistentData: number;
@@ -36,9 +38,22 @@ const getTaskCountsSummary = (
     };
 };
 
+const WfoTasksLink = ({ children }: { children: ReactNode }) => (
+    <Link
+        href={`${PATH_TASKS}`}
+        onClick={(e) => {
+            e.currentTarget.blur();
+        }}
+    >
+        {children}
+    </Link>
+);
+
 export const WfoFailedTasksBadge = () => {
     const t = useTranslations('common');
     const { theme } = useOrchestratorTheme();
+    const { failedTaskBadgeStyle } =
+        useWithOrchestratorTheme(getTasksBadgeStyles);
     const { data: processStatusCounts } = useProcessStatusCountsQuery();
 
     const taskCountsSummary = getTaskCountsSummary(processStatusCounts);
@@ -60,15 +75,18 @@ export const WfoFailedTasksBadge = () => {
                     </>
                 }
             >
-                <WfoHeaderBadge
-                    color={theme.colors.ghost}
-                    textColor={theme.colors.shadow}
-                    iconType={() => (
-                        <WfoXCircleFill color={theme.colors.danger} />
-                    )}
-                >
-                    {taskCountsSummary.total}
-                </WfoHeaderBadge>
+                <WfoTasksLink>
+                    <WfoHeaderBadge
+                        css={failedTaskBadgeStyle}
+                        color={theme.colors.ghost}
+                        textColor={theme.colors.shadow}
+                        iconType={() => (
+                            <WfoXCircleFill color={theme.colors.danger} />
+                        )}
+                    >
+                        {taskCountsSummary.total}
+                    </WfoHeaderBadge>
+                </WfoTasksLink>
             </EuiToolTip>
         );
     } else {
@@ -81,15 +99,20 @@ export const WfoFailedTasksBadge = () => {
                     </>
                 }
             >
-                <WfoHeaderBadge
-                    color={theme.colors.ghost}
-                    textColor={theme.colors.shadow}
-                    iconType={() => (
-                        <WfoCheckmarkCircleFill color={theme.colors.success} />
-                    )}
-                >
-                    0
-                </WfoHeaderBadge>
+                <WfoTasksLink>
+                    <WfoHeaderBadge
+                        css={failedTaskBadgeStyle}
+                        color={theme.colors.ghost}
+                        textColor={theme.colors.shadow}
+                        iconType={() => (
+                            <WfoCheckmarkCircleFill
+                                color={theme.colors.success}
+                            />
+                        )}
+                    >
+                        0
+                    </WfoHeaderBadge>
+                </WfoTasksLink>
             </EuiToolTip>
         );
     }

package/src/components/WfoBadges/WfoFailedTasksBadge/styles.ts

@@ -0,0 +1,10 @@
+import { css } from '@emotion/react';
+
+export const getTasksBadgeStyles = () => {
+    const failedTaskBadgeStyle = css({
+        cursor: 'pointer',
+        '&:hover': { textDecoration: 'underline' },
+    });
+
+    return { failedTaskBadgeStyle };
+};

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/WfoForms/formFields/BoolFieldStyling.ts

@@ -12,10 +12,6 @@ export const boolFieldStyling = css`
       z-index: unset;
     }
 
-    input[type="checkbox"] {
-      display: none;
-    }
-
     label {
       display: inline-block;
       margin: 3px 0;

package/src/components/WfoInlineNoteEdit/WfoInlineNoteEdit.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import type { ChangeEvent, FC } from 'react';
 
 import { EuiInlineEditText } from '@elastic/eui';
@@ -20,8 +20,7 @@ export const WfoInlineNoteEdit: FC<WfoInlineNoteEditProps> = ({
     onlyShowOnHover = false,
 }) => {
     const { theme } = useOrchestratorTheme();
-    const initialNote = useMemo(() => value || '', [value]);
-    const [note, setNote] = useState<string>(initialNote);
+    const [note, setNote] = useState<string>(value ?? '');
     const [isTooltipVisible, setIsTooltipVisible] = useState<boolean>(true);
 
     const [startProcess] = useStartProcessMutation();
@@ -42,15 +41,15 @@ export const WfoInlineNoteEdit: FC<WfoInlineNoteEditProps> = ({
     };
 
     const handleCancel = () => {
-        setNote(initialNote);
+        setNote(value ?? '');
         setIsTooltipVisible(true);
     };
 
     // This useEffect makes sure the note is updated when a new value property is passed in
     // for example by a parent component that is update through a websocket event
     useEffect(() => {
-        setNote(initialNote);
-    }, [initialNote]);
+        setNote(value ?? '');
+    }, [value]);
 
     return (
         <div

package/src/components/WfoSubscription/WfoInUseByRelations.tsx

@@ -52,6 +52,7 @@ export const WfoInUseByRelations = ({
                 value: (
                     <WfoFirstPartUUID
                         UUID={inUseByRelationDetails.subscriptionId}
+                        showCopyIcon={false}
                     />
                 ),
                 textToCopy: inUseByRelationDetails.subscriptionId,

package/src/components/WfoSubscription/WfoSubscriptionProductBlock/WfoSubscriptionProductBlock.tsx

@@ -34,7 +34,7 @@ interface WfoSubscriptionProductBlockProps {
     subscriptionId: Subscription['subscriptionId'];
 }
 
-export const HIDDEN_KEYS = ['title', 'name', 'label'];
+export const HIDDEN_KEYS = ['title', 'name', 'label', 'inUseByIds'];
 
 export const WfoSubscriptionProductBlock = ({
     productBlock,

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/components/WfoSubscriptionsList/WfoSubscriptionsList.tsx

@@ -10,6 +10,7 @@ import {
     Pagination,
     WfoDateTime,
     WfoInlineJson,
+    WfoInlineNoteEdit,
     WfoInsyncIcon,
     WfoJsonCodeBlock,
     WfoSubscriptionStatusBadge,
@@ -80,6 +81,7 @@ export const WfoSubscriptionsList: FC<WfoSubscriptionsListProps> = ({
             subscriptionId: {
                 columnType: ColumnType.DATA,
                 label: t('id'),
+                width: '100px',
                 renderData: (value) => <WfoFirstPartUUID UUID={value} />,
                 renderDetails: (value) => value,
                 renderTooltip: (value) => value,
@@ -87,7 +89,7 @@ export const WfoSubscriptionsList: FC<WfoSubscriptionsListProps> = ({
             description: {
                 columnType: ColumnType.DATA,
                 label: t('description'),
-                width: '400px',
+                width: '500px',
                 renderData: (value, record) => (
                     <Link href={`/subscriptions/${record.subscriptionId}`}>
                         {value}
@@ -98,6 +100,7 @@ export const WfoSubscriptionsList: FC<WfoSubscriptionsListProps> = ({
             status: {
                 columnType: ColumnType.DATA,
                 label: t('status'),
+                width: '120px',
                 renderData: (value) => (
                     <WfoSubscriptionStatusBadge status={value} />
                 ),
@@ -105,6 +108,7 @@ export const WfoSubscriptionsList: FC<WfoSubscriptionsListProps> = ({
             insync: {
                 columnType: ColumnType.DATA,
                 label: t('insync'),
+                width: '80px',
                 renderData: (value) => <WfoInsyncIcon inSync={value} />,
             },
             productName: {
@@ -119,7 +123,6 @@ export const WfoSubscriptionsList: FC<WfoSubscriptionsListProps> = ({
             customerFullname: {
                 columnType: ColumnType.DATA,
                 label: t('customerFullname'),
-                width: '150px',
             },
             customerShortcode: {
                 columnType: ColumnType.DATA,
@@ -129,6 +132,7 @@ export const WfoSubscriptionsList: FC<WfoSubscriptionsListProps> = ({
             startDate: {
                 columnType: ColumnType.DATA,
                 label: t('startDate'),
+                width: '120px',
                 renderData: (value) => <WfoDateTime dateOrIsoString={value} />,
                 renderDetails: parseDateToLocaleDateTimeString,
                 clipboardText: parseDateToLocaleDateTimeString,
@@ -137,6 +141,7 @@ export const WfoSubscriptionsList: FC<WfoSubscriptionsListProps> = ({
             endDate: {
                 columnType: ColumnType.DATA,
                 label: t('endDate'),
+                width: '120px',
                 renderData: (value) => <WfoDateTime dateOrIsoString={value} />,
                 renderDetails: parseDateToLocaleDateTimeString,
                 clipboardText: parseDateToLocaleDateTimeString,
@@ -145,7 +150,13 @@ export const WfoSubscriptionsList: FC<WfoSubscriptionsListProps> = ({
             note: {
                 columnType: ColumnType.DATA,
                 label: t('note'),
-                width: '100px',
+                renderData: (cellValue, row) => (
+                    <WfoInlineNoteEdit
+                        subscriptionId={row.subscriptionId}
+                        value={cellValue}
+                        onlyShowOnHover={true}
+                    />
+                ),
             },
             metadata: {
                 columnType: ColumnType.DATA,

package/src/components/WfoTable/WfoFirstPartUUID/WfoFirstPartUUID.tsx

@@ -10,30 +10,36 @@ import { COPY_ICON_CLASS, getStyles } from './styles';
 
 export type WfoFirstUUIDPartProps = {
     UUID: string;
+    showCopyIcon?: boolean;
 };
 
-export const WfoFirstPartUUID: FC<WfoFirstUUIDPartProps> = ({ UUID }) => {
+export const WfoFirstPartUUID: FC<WfoFirstUUIDPartProps> = ({
+    UUID,
+    showCopyIcon = true,
+}) => {
     const { uuidFieldStyle, clickable } = useWithOrchestratorTheme(getStyles);
     const { theme } = useOrchestratorTheme();
 
     return (
         <span css={uuidFieldStyle}>
             {getFirstUuidPart(UUID)}
-            <EuiCopy textToCopy={UUID}>
-                {(copy) => (
-                    <div
-                        className={COPY_ICON_CLASS}
-                        onClick={copy}
-                        css={clickable}
-                    >
-                        <WfoClipboardCopy
-                            width={16}
-                            height={16}
-                            color={theme.colors.mediumShade}
-                        />
-                    </div>
-                )}
-            </EuiCopy>
+            {showCopyIcon && (
+                <EuiCopy textToCopy={UUID}>
+                    {(copy) => (
+                        <div
+                            className={COPY_ICON_CLASS}
+                            onClick={copy}
+                            css={clickable}
+                        >
+                            <WfoClipboardCopy
+                                width={16}
+                                height={16}
+                                color={theme.colors.mediumShade}
+                            />
+                        </div>
+                    )}
+                </EuiCopy>
+            )}
         </span>
     );
 };

package/src/components/WfoTable/WfoTable/WfoTableDataRows.tsx

@@ -29,8 +29,14 @@ export const WfoTableDataRows = <T extends object>({
     onRowClick,
     className,
 }: WfoTableDataRowsProps<T>) => {
-    const { cellStyle, rowStyle, dataRowStyle, clickableStyle, setWidth } =
-        useWithOrchestratorTheme(getWfoTableStyles);
+    const {
+        cellStyle,
+        cellContentStyle,
+        rowStyle,
+        dataRowStyle,
+        clickableStyle,
+        setWidth,
+    } = useWithOrchestratorTheme(getWfoTableStyles);
 
     const sortedVisibleColumns = getSortedVisibleColumns(
         columnConfig,
@@ -70,7 +76,7 @@ export const WfoTableDataRows = <T extends object>({
                                             setWidth(columnConfig.width),
                                         ]}
                                     >
-                                        <div>
+                                        <div css={cellContentStyle}>
                                             {columnConfig.renderControl(row)}
                                         </div>
                                     </td>
@@ -91,7 +97,7 @@ export const WfoTableDataRows = <T extends object>({
                                         setWidth(columnConfig.width),
                                     ]}
                                 >
-                                    <div>
+                                    <div css={cellContentStyle}>
                                         <WfoDataCell
                                             customTooltip={columnConfig.renderTooltip?.(
                                                 result,

package/src/components/WfoTable/WfoTable/WfoTableHeaderCell/WfoSortDirectionIcon.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 
 import { useOrchestratorTheme } from '@/hooks';
-import { WfoArrowNarrowDown, WfoArrowNarrowUp, WfoArrowsUpDown } from '@/icons';
+import { WfoArrowDown, WfoArrowUp, WfoArrowsUpDown } from '@/icons';
 import { SortOrder } from '@/types';
 
 import { SORTABLE_ICON_CLASS } from './styles';
@@ -18,6 +18,8 @@ export const WfoSortDirectionIcon: FC<WfoSortDirectionIconProps> = ({
     if (!sortDirection) {
         return (
             <WfoArrowsUpDown
+                height={16}
+                width={16}
                 className={SORTABLE_ICON_CLASS}
                 css={{ visibility: 'hidden' }}
                 color={theme.colors.subduedText}
@@ -26,16 +28,8 @@ export const WfoSortDirectionIcon: FC<WfoSortDirectionIconProps> = ({
     }
 
     return sortDirection === SortOrder.ASC ? (
-        <WfoArrowNarrowUp
-            color={theme.colors.subduedText}
-            height={24}
-            width={24}
-        />
+        <WfoArrowUp color={theme.colors.subduedText} />
     ) : (
-        <WfoArrowNarrowDown
-            color={theme.colors.subduedText}
-            height={24}
-            width={24}
-        />
+        <WfoArrowDown color={theme.colors.subduedText} />
     );
 };

package/src/components/WfoTable/WfoTable/WfoTableHeaderCell/styles.ts

@@ -116,6 +116,7 @@ export const getWfoBasicTableStyles = ({ theme }: WfoTheme) => {
         });
 
     const sortButtonStyle = css({
+        paddingLeft: theme.size.xxs,
         display: 'flex',
         flex: '0 0 auto',
         alignItems: 'center',

package/src/components/WfoTable/WfoTable/styles.ts

@@ -83,6 +83,7 @@ export const getWfoTableStyles = ({ theme }: WfoTheme) => {
     });
 
     const headerCellStyle = css({
+        paddingRight: 0,
         [`&:hover`]: {
             [`.${SORTABLE_ICON_CLASS}`]: {
                 visibility: 'visible',
@@ -100,6 +101,10 @@ export const getWfoTableStyles = ({ theme }: WfoTheme) => {
         verticalAlign: 'middle',
     });
 
+    const cellContentStyle = css({
+        display: 'inline-block',
+    });
+
     const emptyTableMessageStyle = css({
         textAlign: 'center',
     });
@@ -127,6 +132,7 @@ export const getWfoTableStyles = ({ theme }: WfoTheme) => {
         expandedRowStyle,
         headerCellStyle,
         cellStyle,
+        cellContentStyle,
         emptyTableMessageStyle,
         clickableStyle,
         setWidth,

package/src/configuration/version.ts

@@ -1 +1 @@
-export const ORCHESTRATOR_UI_LIBRARY_VERSION = '2.11.1';
+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/icons/heroicons/WfoArrowDown.tsx

@@ -0,0 +1,27 @@
+import React, { FC } from 'react';
+
+import { WfoIconProps } from '@/icons/WfoIconProps';
+
+import { withWfoHeroIconsWrapper } from './WfoHeroIconsWrapper';
+
+export const WfoArrowDownSvg: FC<WfoIconProps> = ({
+    width = 12,
+    height = 14,
+    color = 'currentColor',
+}) => (
+    <svg
+        width={width}
+        height={height}
+        viewBox="4 3 12 14"
+        fill={color}
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path
+            fillRule="evenodd"
+            d="M10 3a.75.75 0 0 1 .75.75v10.638l3.96-4.158a.75.75 0 1 1 1.08 1.04l-5.25 5.5a.75.75 0 0 1-1.08 0l-5.25-5.5a.75.75 0 1 1 1.08-1.04l3.96 4.158V3.75A.75.75 0 0 1 10 3Z"
+            clipRule="evenodd"
+        />
+    </svg>
+);
+
+export const WfoArrowDown = withWfoHeroIconsWrapper(WfoArrowDownSvg);

package/src/icons/heroicons/WfoArrowUp.tsx

@@ -0,0 +1,27 @@
+import React, { FC } from 'react';
+
+import { WfoIconProps } from '@/icons/WfoIconProps';
+
+import { withWfoHeroIconsWrapper } from './WfoHeroIconsWrapper';
+
+export const WfoArrowUpSvg: FC<WfoIconProps> = ({
+    width = 12,
+    height = 14,
+    color = 'currentColor',
+}) => (
+    <svg
+        width={width}
+        height={height}
+        viewBox="4 3 12 14"
+        fill={color}
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path
+            fillRule="evenodd"
+            d="M10 17a.75.75 0 0 1-.75-.75V5.612L5.29 9.77a.75.75 0 0 1-1.08-1.04l5.25-5.5a.75.75 0 0 1 1.08 0l5.25 5.5a.75.75 0 1 1-1.08 1.04l-3.96-4.158V16.25A.75.75 0 0 1 10 17Z"
+            clipRule="evenodd"
+        />
+    </svg>
+);
+
+export const WfoArrowUp = withWfoHeroIconsWrapper(WfoArrowUpSvg);

package/src/icons/heroicons/WfoArrowsUpDown.tsx

@@ -7,12 +7,12 @@ import { withWfoHeroIconsWrapper } from './WfoHeroIconsWrapper';
 const WfoArrowsUpDownSvg: FC<WfoIconProps> = ({
     width = 20,
     height = 20,
-    color = '#000000',
+    color = 'currentColor',
 }) => (
     <svg
         width={width}
         height={height}
-        viewBox="0 0 24 24"
+        viewBox="2 2 20 20"
         fill={color}
         xmlns="http://www.w3.org/2000/svg"
     >