@orchestrator-ui/orchestrator-ui-components 1.24.0 → 1.26.0

package/package.json

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

package/src/components/WfoBadges/WfoWebsocketStatusBadge/WfoWebsocketStatusBadge.tsx

@@ -42,7 +42,7 @@ export const WfoWebsocketStatusBadge = () => {
                     websocketConnected ? (
                         <WfoBoltFill color={theme.colors.success} />
                     ) : (
-                        <WfoBoltSlashFill color="yellow" />
+                        <WfoBoltSlashFill color={theme.colors.warning} />
                     )
                 }
                 css={websocketConnected ? connectedStyle : disconnectedStyle}

package/src/components/WfoForms/formFields/utils.spec.ts

@@ -17,11 +17,14 @@ const getProductBlockInstance = (
     instanceProperties: Partial<ProductBlockInstance> = {},
 ): ProductBlockInstance => ({
     id: 1,
-    ownerSubscriptionId: 'ProductBlockInstanceId 1',
     parent: 0,
     productBlockInstanceValues: [],
     subscriptionInstanceId: 'testId',
     inUseByRelations: [],
+    subscription: {
+        subscriptionId: 'OwnerSubscriptionId',
+        description: 'OwnerSubscription description',
+    },
     ...instanceProperties,
 });
 
@@ -128,11 +131,14 @@ describe('formField utils', () => {
                 ...testProductBlockInstances,
                 {
                     id: 1,
-                    ownerSubscriptionId: 'ProductBlockInstanceId 1',
                     parent: 0,
                     productBlockInstanceValues: [],
                     subscriptionInstanceId: 'testId',
                     inUseByRelations: [],
+                    subscription: {
+                        subscriptionId: 'OwnerSubscriptionId',
+                        description: 'OwnerSubscription description',
+                    },
                 },
             ]);
             expect(result).toEqual(undefined);
@@ -152,11 +158,14 @@ describe('formField utils', () => {
                 productBlockInstances: [
                     {
                         id: 1,
-                        ownerSubscriptionId: 'ProductBlockInstanceId 1',
                         parent: 0,
                         productBlockInstanceValues: [],
                         subscriptionInstanceId: 'testId',
                         inUseByRelations: [],
+                        subscription: {
+                            subscriptionId: 'OwnerSubscriptionId 1',
+                            description: 'OwnerSubscriptionId description',
+                        },
                     },
                 ],
             };
@@ -171,10 +180,13 @@ describe('formField utils', () => {
                 productBlockInstances: [
                     {
                         id: 1,
-                        ownerSubscriptionId: 'ProductBlockInstanceId 1',
                         parent: 0,
                         subscriptionInstanceId: 'testId',
                         inUseByRelations: [],
+                        subscription: {
+                            subscriptionId: 'OwnerSubscriptionId 1',
+                            description: 'OwnerSubscriptionId description',
+                        },
                         productBlockInstanceValues: [
                             {
                                 field: 'key1',
@@ -198,10 +210,13 @@ describe('formField utils', () => {
                 productBlockInstances: [
                     {
                         id: 1,
-                        ownerSubscriptionId: 'ProductBlockInstanceId 1',
                         parent: 0,
                         subscriptionInstanceId: 'testId',
                         inUseByRelations: [],
+                        subscription: {
+                            subscriptionId: 'OwnerSubscriptionId 1',
+                            description: 'OwnerSubscriptionId description',
+                        },
                         productBlockInstanceValues: [
                             {
                                 field: 'key1',
@@ -225,10 +240,13 @@ describe('formField utils', () => {
                 productBlockInstances: [
                     {
                         id: 1,
-                        ownerSubscriptionId: 'ProductBlockInstanceId 1',
                         parent: 0,
                         subscriptionInstanceId: 'testId',
                         inUseByRelations: [],
+                        subscription: {
+                            subscriptionId: 'OwnerSubscriptionId 1',
+                            description: 'OwnerSubscriptionId description',
+                        },
                         productBlockInstanceValues: [
                             {
                                 field: 'key1',

package/src/components/WfoKeyValueTable/styles.ts

@@ -31,7 +31,6 @@ export const getStyles = ({ theme }: WfoTheme) => {
     });
 
     const valueColumnStyle = css({
-        padding: padding,
         borderTopRightRadius: radius,
         borderBottomRightRadius: radius,
         display: 'flex',

package/src/components/WfoSettingsModal/WfoSettingsModal.tsx

@@ -1,5 +1,7 @@
 import React, { FC, ReactNode } from 'react';
 
+import { useTranslations } from 'next-intl';
+
 import {
     EuiButton,
     EuiButtonEmpty,
@@ -26,25 +28,29 @@ export const WfoSettingsModal: FC<WfoSettingsModalProps> = ({
     onResetToDefaults,
     onUpdateTableConfig,
     children,
-}) => (
-    <EuiModal onClose={onClose} maxWidth={400}>
-        <EuiModalHeader>
-            <EuiModalHeaderTitle size="xs">{title}</EuiModalHeaderTitle>
-        </EuiModalHeader>
-
-        <EuiSpacer size="s" />
-
-        <EuiModalBody>{children}</EuiModalBody>
-
-        <EuiModalFooter>
-            <EuiFlexGroup justifyContent="spaceBetween">
-                <EuiButtonEmpty onClick={onResetToDefaults} flush="left">
-                    Reset to default
-                </EuiButtonEmpty>
-                <EuiButton onClick={onUpdateTableConfig} fill>
-                    Save preference
-                </EuiButton>
-            </EuiFlexGroup>
-        </EuiModalFooter>
-    </EuiModal>
-);
+}) => {
+    const t = useTranslations('main');
+
+    return (
+        <EuiModal onClose={onClose} maxWidth={400}>
+            <EuiModalHeader>
+                <EuiModalHeaderTitle size="xs">{title}</EuiModalHeaderTitle>
+            </EuiModalHeader>
+
+            <EuiSpacer size="s" />
+
+            <EuiModalBody>{children}</EuiModalBody>
+
+            <EuiModalFooter>
+                <EuiFlexGroup justifyContent="spaceBetween">
+                    <EuiButtonEmpty onClick={onResetToDefaults} flush="left">
+                        {t('resetToDefault')}
+                    </EuiButtonEmpty>
+                    <EuiButton onClick={onUpdateTableConfig} fill>
+                        {t('savePreferences')}
+                    </EuiButton>
+                </EuiFlexGroup>
+            </EuiModalFooter>
+        </EuiModal>
+    );
+};

package/src/components/WfoSubscription/WfoInUseByRelations.tsx

@@ -58,7 +58,7 @@ export const WfoInUseByRelations = ({
                 key: t('description'),
                 value: (
                     <Link
-                        href={`/${PATH_SUBSCRIPTIONS}/${inUseByRelationDetails.subscriptionId}`}
+                        href={`${PATH_SUBSCRIPTIONS}/${inUseByRelationDetails.subscriptionId}`}
                         target="_blank"
                     >
                         {inUseByRelationDetails.description}

package/src/components/WfoSubscription/WfoRelatedSubscriptions.tsx

@@ -19,6 +19,7 @@ import {
     getDataSortHandler,
     getPageChangeHandler,
 } from '@/components';
+import { PATH_SUBSCRIPTIONS } from '@/components';
 import { useDataDisplayParams, useOrchestratorTheme } from '@/hooks';
 import { WfoSearchStrikethrough } from '@/icons';
 import { useGetRelatedSubscriptionsQuery } from '@/rtk';
@@ -83,7 +84,7 @@ export const WfoRelatedSubscriptions = ({
             render: (value, record) => (
                 <Link
                     target="_blank"
-                    href={`/subscriptions/${record.subscriptionId}`}
+                    href={`${PATH_SUBSCRIPTIONS}/${record.subscriptionId}`}
                 >
                     {value}
                 </Link>

package/src/components/WfoSubscription/WfoSubscriptionDetailTree.tsx

@@ -47,7 +47,8 @@ export const WfoSubscriptionDetailTree = ({
             callback: () => {},
             children: [],
             isOutsideCurrentSubscription:
-                productBlockInstance.ownerSubscriptionId !== subscriptionId,
+                productBlockInstance.subscription.subscriptionId !==
+                subscriptionId,
         };
 
         // Does this node have a parent?
@@ -153,32 +154,11 @@ export const WfoSubscriptionDetailTree = ({
                         selectedIds.map((id, index) => {
                             const block = idToNodeMap[selectedIds[index]];
 
-                            const inUseByRelationsWithoutCurrentSubscription =
-                                block.inUseByRelations.filter(
-                                    (inUseByRelation) =>
-                                        inUseByRelation.subscription_id !==
-                                        subscriptionId,
-                                );
-
                             return (
                                 <WfoSubscriptionProductBlock
                                     key={index}
-                                    ownerSubscriptionId={
-                                        block.ownerSubscriptionId
-                                    }
-                                    subscriptionInstanceId={
-                                        block.subscriptionInstanceId
-                                    }
-                                    productBlockInstanceValues={
-                                        block.productBlockInstanceValues
-                                    }
-                                    inUseByRelations={
-                                        inUseByRelationsWithoutCurrentSubscription
-                                    }
-                                    isOutsideCurrentSubscription={
-                                        block.isOutsideCurrentSubscription
-                                    }
-                                    id={id}
+                                    subscriptionId={subscriptionId}
+                                    productBlock={block}
                                 />
                             );
                         })}

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

@@ -16,8 +16,7 @@ export type WfoProductBlockKeyValueRowProps = {
 export const WfoProductBlockKeyValueRow: FC<
     WfoProductBlockKeyValueRowProps
 > = ({ fieldValue }) => {
-    const { leftColumnStyle, rightColumnStyle, rowStyle } =
-        useWithOrchestratorTheme(getStyles);
+    const { leftColumnStyle, rowStyle } = useWithOrchestratorTheme(getStyles);
     const { getOverriddenValue } = useSubscriptionDetailValueOverride();
 
     const { field, value } = fieldValue;
@@ -36,7 +35,7 @@ export const WfoProductBlockKeyValueRow: FC<
             <td css={leftColumnStyle}>
                 <b>{camelToHuman(field)}</b>
             </td>
-            <td css={rightColumnStyle}>
+            <td>
                 {getOverriddenValue(fieldValue) ?? (
                     <WfoProductBlockValue value={value} />
                 )}

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

@@ -13,9 +13,14 @@ import {
     EuiText,
 } from '@elastic/eui';
 
-import { PATH_SUBSCRIPTIONS, WfoProductBlockKeyValueRow } from '@/components';
+import {
+    PATH_SUBSCRIPTIONS,
+    WfoProductBlockKeyValueRow,
+    WfoValueCell,
+} from '@/components';
 import { useOrchestratorTheme, useWithOrchestratorTheme } from '@/hooks';
-import { FieldValue, InUseByRelation } from '@/types';
+import { ProductBlockInstance, Subscription } from '@/types';
+import { getFirstUuidPart } from '@/utils';
 
 import { WfoInUseByRelations } from '../WfoInUseByRelations';
 import {
@@ -25,22 +30,15 @@ import {
 import { getStyles } from './styles';
 
 interface WfoSubscriptionProductBlockProps {
-    ownerSubscriptionId: string;
-    subscriptionInstanceId: string;
-    productBlockInstanceValues: FieldValue[];
-    inUseByRelations: InUseByRelation[];
-    id: number;
-    isOutsideCurrentSubscription?: boolean;
+    productBlock: ProductBlockInstance;
+    subscriptionId: Subscription['subscriptionId'];
 }
 
 export const HIDDEN_KEYS = ['title', 'name', 'label'];
 
 export const WfoSubscriptionProductBlock = ({
-    ownerSubscriptionId,
-    subscriptionInstanceId,
-    productBlockInstanceValues,
-    inUseByRelations,
-    isOutsideCurrentSubscription = false,
+    productBlock,
+    subscriptionId,
 }: WfoSubscriptionProductBlockProps) => {
     const t = useTranslations('subscriptions.detail');
     const { theme } = useOrchestratorTheme();
@@ -49,13 +47,24 @@ export const WfoSubscriptionProductBlock = ({
         panelStyle,
         panelStyleOutsideCurrentSubscription,
         leftColumnStyle,
-        rightColumnStyle,
+        leftColumnStyleWithAlignSelf,
+        outsideSubscriptionIdTextStyle,
         rowStyle,
     } = useWithOrchestratorTheme(getStyles);
 
     const [showDetails, setShowDetails] = useState(false);
+
+    const ownerSubscriptionId = productBlock.subscription.subscriptionId;
+    const isOutsideCurrentSubscription = ownerSubscriptionId !== subscriptionId;
+    const inUseByRelations = productBlock.inUseByRelations.filter(
+        (inUseByRelation) => inUseByRelation.subscription_id !== subscriptionId,
+    );
     const showProductBlockValues = !isOutsideCurrentSubscription || showDetails;
 
+    const isEmpty = (value: unknown) => {
+        return value === null || value === undefined || value === '';
+    };
+
     return (
         <>
             <EuiSpacer size={'m'}></EuiSpacer>
@@ -81,13 +90,13 @@ export const WfoSubscriptionProductBlock = ({
                         <EuiText grow={true}>
                             <h3>
                                 {getProductBlockTitle(
-                                    productBlockInstanceValues,
+                                    productBlock.productBlockInstanceValues,
                                 )}
                             </h3>
                         </EuiText>
                         <EuiText size="s">
                             {getFieldFromProductBlockInstanceValues(
-                                productBlockInstanceValues,
+                                productBlock.productBlockInstanceValues,
                                 'name',
                             )}
                         </EuiText>
@@ -113,16 +122,39 @@ export const WfoSubscriptionProductBlock = ({
                         <tbody>
                             {isOutsideCurrentSubscription && (
                                 <tr key={-1} css={rowStyle}>
-                                    <td css={leftColumnStyle}>
+                                    <td css={leftColumnStyleWithAlignSelf}>
                                         <b>{t('ownerSubscriptionId')}</b>
                                     </td>
-                                    <td css={rightColumnStyle}>
-                                        <a
-                                            href={`${PATH_SUBSCRIPTIONS}/${ownerSubscriptionId}`}
-                                            target="_blank"
-                                        >
-                                            {ownerSubscriptionId}
-                                        </a>
+                                    <td>
+                                        <WfoValueCell
+                                            value={
+                                                <>
+                                                    <a
+                                                        href={`${PATH_SUBSCRIPTIONS}/${ownerSubscriptionId}`}
+                                                        target="_blank"
+                                                    >
+                                                        {
+                                                            productBlock
+                                                                .subscription
+                                                                .description
+                                                        }
+                                                    </a>
+                                                    <EuiText
+                                                        css={
+                                                            outsideSubscriptionIdTextStyle
+                                                        }
+                                                    >
+                                                        -
+                                                    </EuiText>
+                                                    {getFirstUuidPart(
+                                                        ownerSubscriptionId,
+                                                    )}
+                                                </>
+                                            }
+                                            textToCopy={ownerSubscriptionId}
+                                            rowNumber={-1}
+                                            enableCopyIcon={true}
+                                        />
                                     </td>
                                 </tr>
                             )}
@@ -132,8 +164,10 @@ export const WfoSubscriptionProductBlock = ({
                                         <td css={leftColumnStyle}>
                                             <b>{t('subscriptionInstanceId')}</b>
                                         </td>
-                                        <td css={rightColumnStyle}>
-                                            {subscriptionInstanceId}
+                                        <td>
+                                            {
+                                                productBlock.subscriptionInstanceId
+                                            }
                                         </td>
                                     </tr>
                                     {!isOutsideCurrentSubscription && (
@@ -143,7 +177,7 @@ export const WfoSubscriptionProductBlock = ({
                                                     {t('ownerSubscriptionId')}
                                                 </b>
                                             </td>
-                                            <td css={rightColumnStyle}>
+                                            <td>
                                                 <>
                                                     <EuiBadge>
                                                         {t('self')}
@@ -156,7 +190,7 @@ export const WfoSubscriptionProductBlock = ({
                                         <td css={leftColumnStyle}>
                                             <b>{t('inUseByRelations')}</b>
                                         </td>
-                                        <td css={rightColumnStyle}>
+                                        <td>
                                             {(inUseByRelations.length === 0 &&
                                                 'None') || (
                                                 <WfoInUseByRelations
@@ -171,21 +205,44 @@ export const WfoSubscriptionProductBlock = ({
                             )}
 
                             {showProductBlockValues &&
-                                productBlockInstanceValues
+                                productBlock.productBlockInstanceValues
                                     .filter(
                                         (productBlockInstanceValue) =>
                                             !HIDDEN_KEYS.includes(
                                                 productBlockInstanceValue.field,
                                             ),
                                     )
-                                    .map((productBlockInstanceValue, index) => (
-                                        <WfoProductBlockKeyValueRow
-                                            fieldValue={
-                                                productBlockInstanceValue
+                                    .sort(
+                                        (
+                                            { field: fieldNameA },
+                                            { field: fieldNameB },
+                                        ) => {
+                                            if (fieldNameA < fieldNameB) {
+                                                return -1;
                                             }
-                                            key={index}
-                                        />
-                                    ))}
+                                            if (fieldNameA > fieldNameB) {
+                                                return 1;
+                                            }
+                                            return 0;
+                                        },
+                                    )
+                                    .map((productBlockInstanceValue, index) => {
+                                        if (
+                                            productBlockInstanceValue &&
+                                            !isEmpty(
+                                                productBlockInstanceValue.value,
+                                            )
+                                        ) {
+                                            return (
+                                                <WfoProductBlockKeyValueRow
+                                                    fieldValue={
+                                                        productBlockInstanceValue
+                                                    }
+                                                    key={index}
+                                                />
+                                            );
+                                        }
+                                    })}
                         </tbody>
                     </table>
                 }

package/src/components/WfoSubscription/WfoSubscriptionProductBlock/styles.ts

@@ -23,6 +23,10 @@ export const getStyles = (wfoTheme: WfoTheme) => {
     });
 
     const rowStyle = css({
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        padding: `${theme.base / 2}px 0`,
         borderBottom: `solid 1px ${theme.colors.lightShade}`,
         '&:first-child': {
             borderTop: `solid 1px ${theme.colors.lightShade}`,
@@ -30,26 +34,28 @@ export const getStyles = (wfoTheme: WfoTheme) => {
     });
 
     const leftColumnStyle = css({
-        verticalAlign: 'top',
         width: 250,
-        paddingLeft: 0,
-        paddingTop: 10,
-        paddingBottom: 10,
+        flexShrink: 0,
+        paddingTop: `${theme.base / 4}px`,
     });
 
-    const rightColumnStyle = css({
-        verticalAlign: 'top',
-        paddingLeft: 0,
-        paddingTop: 10,
-        paddingBottom: 10,
+    const leftColumnStyleWithAlignSelf = css({
+        width: 250,
+        flexShrink: 0,
+        alignSelf: 'center',
+    });
+
+    const outsideSubscriptionIdTextStyle = css({
+        padding: `${theme.size.xs}px 0`,
     });
 
     return {
         iconStyle,
         panelStyle,
         leftColumnStyle,
-        rightColumnStyle,
+        leftColumnStyleWithAlignSelf,
         rowStyle,
         panelStyleOutsideCurrentSubscription,
+        outsideSubscriptionIdTextStyle,
     };
 };

package/src/components/WfoTable/WfoTableSettingsModal/WfoTableSettingsModal.tsx

@@ -1,5 +1,7 @@
 import React, { useState } from 'react';
 
+import { useTranslations } from 'next-intl';
+
 import {
     EuiForm,
     EuiFormRow,
@@ -39,6 +41,7 @@ export const TableSettingsModal = <T,>({
     onResetToDefaults,
     onClose,
 }: TableSettingsModalProps<T>) => {
+    const t = useTranslations('main');
     const { formRowStyle, selectFieldStyle } = useWithOrchestratorTheme(
         getWfoTableSettingsModalStyles,
     );
@@ -67,7 +70,7 @@ export const TableSettingsModal = <T,>({
 
     return (
         <WfoSettingsModal
-            title="Table settings"
+            title={t('tableSettings')}
             onClose={onClose}
             onResetToDefaults={onResetToDefaults}
             onUpdateTableConfig={() =>
@@ -103,7 +106,7 @@ export const TableSettingsModal = <T,>({
                 <EuiFormRow
                     css={formRowStyle}
                     hasEmptyLabelSpace
-                    label="Number of Rows"
+                    label={t('numberOfRows')}
                     display="columnCompressed"
                 >
                     <EuiSelect

package/src/components/WfoTable/WfoTableWithFilter/WfoTableWithFilter.tsx

@@ -16,6 +16,7 @@ import {
 import { WfoError } from '@/components';
 import { useOrchestratorTheme } from '@/hooks';
 import { WfoArrowsExpand } from '@/icons';
+import { getDefaultTableConfig } from '@/utils/getDefaultTableConfig';
 
 import { getTypedFieldFromObject } from '../../../utils';
 import {
@@ -89,8 +90,6 @@ export const WfoTableWithFilter = <T extends object>({
     exportDataIsLoading = false,
 }: WfoTableWithFilterProps<T>) => {
     const { theme } = useOrchestratorTheme();
-
-    const defaultPageSize = pagination.pageSize;
     const [hiddenColumns, setHiddenColumns] =
         useState<TableColumnKeys<T>>(defaultHiddenColumns);
     const [showSettingsModal, setShowSettingsModal] = useState(false);
@@ -184,12 +183,13 @@ export const WfoTableWithFilter = <T extends object>({
     };
 
     const handleResetToDefaults = () => {
-        setHiddenColumns(defaultHiddenColumns);
+        const defaultTableConfig = getDefaultTableConfig<T>(localStorageKey);
+        setHiddenColumns(defaultTableConfig.hiddenColumns);
         setShowSettingsModal(false);
         clearTableConfigFromLocalStorage(localStorageKey);
         onUpdatePage({
             index: 0,
-            size: defaultPageSize ?? DEFAULT_PAGE_SIZE,
+            size: defaultTableConfig.selectedPageSize ?? DEFAULT_PAGE_SIZE,
         });
     };