@orchestrator-ui/orchestrator-ui-components 2.1.0 → 2.2.0

package/package.json

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

package/src/components/WfoBadges/WfoBadge/WfoBadge.tsx

@@ -18,7 +18,7 @@ export const WfoBadge: FC<WfoBadgeProps> = ({
     ...restProps
 }) => (
     <EuiBadge {...restProps}>
-        <EuiText color={textColor} size={size ?? 'xs'}>
+        <EuiText title="" color={textColor} size={size ?? 'xs'}>
             <b>{children}</b>
         </EuiText>
     </EuiBadge>

package/src/components/WfoContentHeader/WfoContentHeader.tsx

@@ -30,10 +30,18 @@ export const WfoContentHeader: FC<WfoContentHeaderProps> = ({
                 >
                     {title}
                 </WfoRenderElementOrString>
+                {subtitle && (
+                    <div>
+                        <EuiSpacer size="m" />
+                        <WfoRenderElementOrString>
+                            {subtitle}
+                        </WfoRenderElementOrString>
+                    </div>
+                )}
             </EuiFlexItem>
 
             {children && (
-                <EuiFlexItem>
+                <EuiFlexItem grow={0}>
                     <EuiFlexGroup justifyContent="flexEnd">
                         <WfoRenderElementOrString>
                             {children}
@@ -43,13 +51,6 @@ export const WfoContentHeader: FC<WfoContentHeaderProps> = ({
             )}
         </EuiFlexGroup>
 
-        {subtitle && (
-            <>
-                <EuiSpacer size="m" />
-                <WfoRenderElementOrString>{subtitle}</WfoRenderElementOrString>
-            </>
-        )}
-
         <EuiSpacer size="l" />
     </>
 );

package/src/components/WfoDateTime/WfoDateTime.tsx

@@ -1,10 +1,6 @@
 import React, { FC } from 'react';
 
-import {
-    getDate,
-    parseDateOrTimeRelativeToToday,
-    parseDateToLocaleDateTimeString,
-} from '@/utils';
+import { getDate, parseDateOrTimeRelativeToToday } from '@/utils';
 
 export type WfoDateTimeProps = {
     dateOrIsoString: Date | string | null;
@@ -13,9 +9,5 @@ export type WfoDateTimeProps = {
 export const WfoDateTime: FC<WfoDateTimeProps> = ({ dateOrIsoString }) => {
     const date = getDate(dateOrIsoString);
 
-    return (
-        <span title={parseDateToLocaleDateTimeString(date)}>
-            {parseDateOrTimeRelativeToToday(date)}
-        </span>
-    );
+    return <span>{parseDateOrTimeRelativeToToday(date)}</span>;
 };

package/src/components/WfoForms/formFields/BoolField.tsx

@@ -63,7 +63,7 @@ function Bool({
                         disabled={disabled}
                         id={id}
                         name={name}
-                        label={label}
+                        label={label || <div>&nbsp;</div>}
                         onChange={() =>
                             !disabled && !readOnly && onChange(!value)
                         }

package/src/components/WfoProcessList/WfoProcessesList.tsx

@@ -113,6 +113,7 @@ export const WfoProcessesList = ({
             columnType: ColumnType.DATA,
             label: t('step'),
             width: '15%',
+            renderTooltip: (value) => value,
         },
         lastStatus: {
             columnType: ColumnType.DATA,
@@ -184,6 +185,7 @@ export const WfoProcessesList = ({
             width: '90',
             renderData: (value) => <WfoFirstPartUUID UUID={value} />,
             renderDetails: (value) => value,
+            renderTooltip: (value) => value,
         },
         startedAt: {
             columnType: ColumnType.DATA,
@@ -192,6 +194,7 @@ export const WfoProcessesList = ({
             renderData: (value) => <WfoDateTime dateOrIsoString={value} />,
             renderDetails: parseDateToLocaleDateTimeString,
             clipboardText: parseDateToLocaleDateTimeString,
+            renderTooltip: (value) => value.toString(),
         },
         lastModifiedAt: {
             columnType: ColumnType.DATA,
@@ -200,6 +203,7 @@ export const WfoProcessesList = ({
             renderData: (value) => <WfoDateTime dateOrIsoString={value} />,
             renderDetails: parseDateToLocaleDateTimeString,
             clipboardText: parseDateToLocaleDateTimeString,
+            renderTooltip: (value) => value.toString(),
         },
     };
 

package/src/components/WfoStartButton/WfoStartTaskComboBox.tsx

@@ -18,14 +18,14 @@ export const WfoStartTaskButtonComboBox = () => {
     const { data } = useGetTaskOptionsQuery();
     const taskOptions = data?.startOptions || [];
 
-    const comboBoxOptions: StartComboBoxOption[] = taskOptions.map(
-        (option) => ({
+    const comboBoxOptions: StartComboBoxOption[] = [...taskOptions]
+        .map((option) => ({
             data: {
                 workflowName: option.name,
             },
-            label: option.description || '',
-        }),
-    );
+            label: option.description ?? option.name,
+        }))
+        .sort((taskA, taskB) => taskA.label.localeCompare(taskB.label));
 
     const handleOptionChange = async (selectedProduct: StartComboBoxOption) => {
         if (await isEngineRunningNow()) {

package/src/components/WfoStartButton/WfoStartWorkflowComboBox.tsx

@@ -18,15 +18,17 @@ export const WfoStartWorkflowButtonComboBox = () => {
     const { data } = useGetWorkflowOptionsQuery();
     const workflowOptions = data?.startOptions || [];
 
-    const comboBoxOptions: StartComboBoxOption[] = workflowOptions.map(
-        (option) => ({
+    const comboBoxOptions: StartComboBoxOption[] = [...workflowOptions]
+        .sort((workflowA, workflowB) =>
+            workflowA.productName.localeCompare(workflowB.productName),
+        )
+        .map((option) => ({
             data: {
                 workflowName: option.workflowName,
                 productId: option.productId,
             },
             label: option.productName || '',
-        }),
-    );
+        }));
 
     const handleOptionChange = async (selectedProduct: StartComboBoxOption) => {
         if (await isEngineRunningNow()) {

package/src/components/WfoSubscription/WfoRelatedSubscriptions.tsx

@@ -101,6 +101,7 @@ export const WfoRelatedSubscriptions = ({
             columnType: ColumnType.DATA,
             label: t('id'),
             renderData: (value) => <WfoFirstPartUUID UUID={value} />,
+            renderTooltip: (value) => value,
         },
         description: {
             columnType: ColumnType.DATA,
@@ -129,6 +130,7 @@ export const WfoRelatedSubscriptions = ({
         customerFullname: {
             columnType: ColumnType.DATA,
             label: t('customer'),
+            renderTooltip: (value) => value,
         },
         tag: {
             columnType: ColumnType.DATA,
@@ -139,6 +141,7 @@ export const WfoRelatedSubscriptions = ({
             columnType: ColumnType.DATA,
             label: t('startDate'),
             renderData: parseDateToLocaleDateString,
+            renderTooltip: parseDateToLocaleDateString,
         },
     };
 

package/src/components/WfoSubscriptionsList/WfoSubscriptionsList.tsx

@@ -82,6 +82,7 @@ export const WfoSubscriptionsList: FC<WfoSubscriptionsListProps> = ({
                 label: t('id'),
                 renderData: (value) => <WfoFirstPartUUID UUID={value} />,
                 renderDetails: (value) => value,
+                renderTooltip: (value) => value,
             },
             description: {
                 columnType: ColumnType.DATA,
@@ -130,6 +131,7 @@ export const WfoSubscriptionsList: FC<WfoSubscriptionsListProps> = ({
                 renderData: (value) => <WfoDateTime dateOrIsoString={value} />,
                 renderDetails: parseDateToLocaleDateTimeString,
                 clipboardText: parseDateToLocaleDateTimeString,
+                renderTooltip: (cellValue) => cellValue?.toString(),
             },
             endDate: {
                 columnType: ColumnType.DATA,
@@ -137,6 +139,7 @@ export const WfoSubscriptionsList: FC<WfoSubscriptionsListProps> = ({
                 renderData: (value) => <WfoDateTime dateOrIsoString={value} />,
                 renderDetails: parseDateToLocaleDateTimeString,
                 clipboardText: parseDateToLocaleDateTimeString,
+                renderTooltip: (cellValue) => cellValue?.toString(),
             },
             note: {
                 columnType: ColumnType.DATA,

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

@@ -12,9 +12,5 @@ export type WfoFirstUUIDPartProps = {
 export const WfoFirstPartUUID: FC<WfoFirstUUIDPartProps> = ({ UUID }) => {
     const { uuidFieldStyle } = useWithOrchestratorTheme(getStyles);
 
-    return (
-        <span css={uuidFieldStyle} title={UUID}>
-            {getFirstUuidPart(UUID)}
-        </span>
-    );
+    return <span css={uuidFieldStyle}>{getFirstUuidPart(UUID)}</span>;
 };

package/src/components/WfoTable/WfoTable/WfoDataCell.tsx

@@ -0,0 +1,31 @@
+import React, { FC, ReactNode } from 'react';
+
+import { EuiToolTip } from '@elastic/eui';
+
+interface WfoDataCellProps {
+    customTooltip: ReactNode;
+    children: ReactNode;
+}
+
+export const WfoDataCell: FC<WfoDataCellProps> = ({
+    customTooltip,
+    children,
+}) => {
+    const tooltipContent =
+        customTooltip || (typeof children === 'string' ? children : <></>);
+
+    if (tooltipContent) {
+        return (
+            <EuiToolTip
+                position="bottom"
+                delay="long"
+                content={tooltipContent}
+                css={{ maxWidth: 'fit-content' }}
+                repositionOnScroll
+            >
+                <>{children}</>
+            </EuiToolTip>
+        );
+    }
+    return <>{children}</>;
+};

package/src/components/WfoTable/WfoTable/WfoGroupedTable/useGroupedTableConfig.tsx

@@ -35,6 +35,11 @@ export const useGroupedTableConfig = <T extends object>({
     // Expanding all children needs another render cycle, because they do not exist in the DOM yet
     const [isExpanding, setIsExpanding] = useState(false);
 
+    const groups: GroupType[] = getObjectKeys(data).map((key) => ({
+        groupName: key.toString(),
+    }));
+    const numberOfColumnsInnerTable = Object.keys(columnConfig).length;
+
     useEffect(() => {
         if (isExpanding) {
             groupReferences.current.forEach((ref) => {
@@ -53,12 +58,7 @@ export const useGroupedTableConfig = <T extends object>({
                     ),
             );
         }
-    }, [isAllSubgroupsExpanded, isAllGroupsExpanded]);
-
-    const groups: GroupType[] = getObjectKeys(data).map((key) => ({
-        groupName: key.toString(),
-    }));
-    const numberOfColumnsInnerTable = Object.keys(columnConfig).length;
+    }, [isAllSubgroupsExpanded, isAllGroupsExpanded, notifyParent, groups]);
 
     const groupColumnConfig: WfoTableColumnConfig<GroupType> = {
         groupName: {

package/src/components/WfoTable/WfoTable/WfoGroupedTable/utils.spec.ts

@@ -1,41 +1,45 @@
 import { GroupedData } from './WfoGroupedTable';
-import { getTotalNumberOfRows, groupData } from './utils';
+import {
+    getTotalNumberOfRows,
+    groupData,
+    toObjectWithSortedProperties,
+} from './utils';
 
 type TestObject = {
     name: string;
     age: number;
-    group: 'group1' | 'group2';
-    subGroup: 'subGroup1' | 'subGroup2';
+    group: 'groupA' | 'groupB';
+    subGroup: 'subGroupA' | 'subGroupB';
 };
 
 describe('WfoGroupedTable - utils', () => {
     describe('groupData()', () => {
-        it('successfully groups the data', () => {
+        it('successfully groups the data. Sorting alphabetically by group name', () => {
             // Given
             const testData: TestObject[] = [
                 {
                     name: 'John',
                     age: 25,
-                    group: 'group2',
-                    subGroup: 'subGroup1',
+                    group: 'groupB',
+                    subGroup: 'subGroupA',
                 },
                 {
                     name: 'Bob',
                     age: 40,
-                    group: 'group2',
-                    subGroup: 'subGroup2',
+                    group: 'groupB',
+                    subGroup: 'subGroupB',
                 },
                 {
                     name: 'Jane',
                     age: 30,
-                    group: 'group2',
-                    subGroup: 'subGroup2',
+                    group: 'groupB',
+                    subGroup: 'subGroupB',
                 },
                 {
                     name: 'Tom',
                     age: 35,
-                    group: 'group1',
-                    subGroup: 'subGroup1',
+                    group: 'groupA',
+                    subGroup: 'subGroupA',
                 },
             ];
 
@@ -47,37 +51,37 @@ describe('WfoGroupedTable - utils', () => {
 
             // Then
             const expected: GroupedData<TestObject> = {
-                group1: {
-                    subGroup1: [
+                groupA: {
+                    subGroupA: [
                         {
                             name: 'Tom',
                             age: 35,
-                            group: 'group1',
-                            subGroup: 'subGroup1',
+                            group: 'groupA',
+                            subGroup: 'subGroupA',
                         },
                     ],
                 },
-                group2: {
-                    subGroup1: [
+                groupB: {
+                    subGroupA: [
                         {
                             name: 'John',
                             age: 25,
-                            group: 'group2',
-                            subGroup: 'subGroup1',
+                            group: 'groupB',
+                            subGroup: 'subGroupA',
                         },
                     ],
-                    subGroup2: [
+                    subGroupB: [
                         {
                             name: 'Bob',
                             age: 40,
-                            group: 'group2',
-                            subGroup: 'subGroup2',
+                            group: 'groupB',
+                            subGroup: 'subGroupB',
                         },
                         {
                             name: 'Jane',
                             age: 30,
-                            group: 'group2',
-                            subGroup: 'subGroup2',
+                            group: 'groupB',
+                            subGroup: 'subGroupB',
                         },
                     ],
                 },
@@ -86,6 +90,27 @@ describe('WfoGroupedTable - utils', () => {
         });
     });
 
+    describe('sort object by properties', () => {
+        // Given
+        const testObject = {
+            c: 'c',
+            a: 'a',
+            b: 'b',
+        };
+
+        // When
+        const sortedObject = toObjectWithSortedProperties(testObject);
+
+        // Then
+        it('sorts the object by properties', () => {
+            expect(sortedObject).toEqual({
+                a: 'a',
+                b: 'b',
+                c: 'c',
+            });
+        });
+    });
+
     describe('getTotalNumberOfRows()', () => {
         it('counts the total number of data rows', () => {
             const testData: GroupedData<TestObject> = {
@@ -94,22 +119,22 @@ describe('WfoGroupedTable - utils', () => {
                         {
                             name: 'John',
                             age: 25,
-                            group: 'group1',
-                            subGroup: 'subGroup1',
+                            group: 'groupA',
+                            subGroup: 'subGroupA',
                         },
                         {
                             name: 'Bob',
                             age: 40,
-                            group: 'group1',
-                            subGroup: 'subGroup1',
+                            group: 'groupA',
+                            subGroup: 'subGroupA',
                         },
                     ],
                     subGroup2: [
                         {
                             name: 'Jane',
                             age: 30,
-                            group: 'group1',
-                            subGroup: 'subGroup2',
+                            group: 'groupA',
+                            subGroup: 'subGroupB',
                         },
                     ],
                 },
@@ -118,8 +143,8 @@ describe('WfoGroupedTable - utils', () => {
                         {
                             name: 'Tom',
                             age: 35,
-                            group: 'group1',
-                            subGroup: 'subGroup1',
+                            group: 'groupA',
+                            subGroup: 'subGroupA',
                         },
                     ],
                 },

package/src/components/WfoTable/WfoTable/WfoGroupedTable/utils.ts

@@ -1,3 +1,5 @@
+import { sortBy, toPairs } from 'lodash';
+
 import { GroupedData } from './WfoGroupedTable';
 
 export const groupData = <T>(
@@ -22,14 +24,17 @@ export const groupData = <T>(
     );
 
     if (groupByFunctions.length <= 1) {
-        return groupedData;
+        return toObjectWithSortedProperties(groupedData);
     }
 
-    const entries = Object.entries(groupedData).map(([key, value]) => [
-        key,
-        groupData(value, groupByFunctions.slice(1)),
-    ]);
-    return Object.fromEntries(entries);
+    const entries = Object.entries(groupedData).map(([key, value]) => {
+        return [key, groupData(value, groupByFunctions.slice(1))];
+    });
+    return toObjectWithSortedProperties(Object.fromEntries(entries));
+};
+
+export const toObjectWithSortedProperties = (object: object) => {
+    return Object.fromEntries(sortBy(toPairs(object), ([key]) => key));
 };
 
 export const getTotalNumberOfRows = <T>(groupedData: GroupedData<T>): number =>

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

@@ -46,6 +46,7 @@ export type WfoTableDataColumnConfigItem<
     isSortable?: boolean;
     isFilterable?: boolean;
     renderData?: (cellValue: T[Property], row: T) => ReactNode;
+    renderTooltip?: (cellValue: T[Property], row: T) => ReactNode;
 };
 
 export type WfoTableControlColumnConfigItem<T extends object> =

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

@@ -1,5 +1,6 @@
 import React, { Fragment } from 'react';
 
+import { WfoDataCell } from '@/components';
 import { useWithOrchestratorTheme } from '@/hooks';
 import { toOptionalArrayEntry } from '@/utils';
 
@@ -91,10 +92,17 @@ export const WfoTableDataRows = <T extends object>({
                                     ]}
                                 >
                                     <div>
-                                        {columnConfig.renderData?.(
-                                            result,
-                                            row,
-                                        ) ?? result?.toString()}
+                                        <WfoDataCell
+                                            customTooltip={columnConfig.renderTooltip?.(
+                                                result,
+                                                row,
+                                            )}
+                                        >
+                                            {columnConfig.renderData?.(
+                                                result,
+                                                row,
+                                            ) ?? result?.toString()}
+                                        </WfoDataCell>
                                     </div>
                                 </td>
                             );

package/src/components/WfoTable/WfoTable/index.ts

@@ -12,3 +12,4 @@ export * from './WfoTable';
 export * from './WfoTableHeaderCell';
 
 export * from './WfoTruncateCell';
+export * from './WfoDataCell';

package/src/configuration/version.ts

@@ -1 +1 @@
-export const ORCHESTRATOR_UI_LIBRARY_VERSION = '2.1.0';
+export const ORCHESTRATOR_UI_LIBRARY_VERSION = '2.2.0';

package/src/hooks/useWfoSession.ts

@@ -4,6 +4,8 @@ import type { UseSessionOptions } from 'next-auth/react';
 
 export type WfoSession = Session & {
     accessToken?: string;
+    accessTokenExpiresAt?: number;
+    refreshTokenExpiresAt?: number;
     profile?: WfoUserProfile;
 };
 

package/src/icons/WfoCheckmarkCircleFill.tsx

@@ -14,7 +14,6 @@ export const WfoCheckmarkCircleFill: FC<WfoIconProps> = ({
         version="1.1"
         xmlns="http://www.w3.org/2000/svg"
     >
-        <title>icon/checkmark-circle-fill</title>
         <g
             id="Symbols"
             stroke="none"

package/src/icons/WfoMinusCircleOutline.tsx

@@ -14,7 +14,6 @@ export const WfoMinusCircleOutline: FC<WfoIconProps> = ({
         version="1.1"
         xmlns="http://www.w3.org/2000/svg"
     >
-        <title>icon/minus-circle-outline</title>
         <g
             id="Symbols"
             stroke="none"

package/src/pages/metadata/WfoProductBlocksPage.tsx

@@ -98,6 +98,7 @@ export const WfoProductBlocksPage = () => {
             width: '90',
             renderData: (value) => <WfoFirstPartUUID UUID={value} />,
             renderDetails: (value) => value,
+            renderTooltip: (value) => value,
         },
         name: {
             columnType: ColumnType.DATA,
@@ -138,6 +139,11 @@ export const WfoProductBlocksPage = () => {
                     ))}
                 </>
             ),
+            renderTooltip: (productBlocks) => {
+                return productBlocks.map((productBlock) => (
+                    <p key={productBlock.name}>- {productBlock.name}</p>
+                ));
+            },
         },
         resourceTypes: {
             columnType: ColumnType.DATA,
@@ -166,6 +172,13 @@ export const WfoProductBlocksPage = () => {
                     ))}
                 </EuiBadgeGroup>
             ),
+            renderTooltip: (resourceTypes) => {
+                return resourceTypes.map((resourceType) => (
+                    <p key={resourceType.resourceType}>
+                        - {resourceType.resourceType}
+                    </p>
+                ));
+            },
         },
         createdAt: {
             columnType: ColumnType.DATA,
@@ -173,6 +186,7 @@ export const WfoProductBlocksPage = () => {
             renderData: (date) => <WfoDateTime dateOrIsoString={date} />,
             renderDetails: parseIsoString(parseDateToLocaleDateTimeString),
             clipboardText: parseIsoString(parseDateToLocaleDateTimeString),
+            renderTooltip: parseIsoString(parseDateToLocaleDateTimeString),
         },
         endDate: {
             columnType: ColumnType.DATA,
@@ -180,6 +194,7 @@ export const WfoProductBlocksPage = () => {
             renderData: (date) => <WfoDateTime dateOrIsoString={date} />,
             renderDetails: parseIsoString(parseDateToLocaleDateTimeString),
             clipboardText: parseIsoString(parseDateToLocaleDateTimeString),
+            renderTooltip: parseIsoString(parseDateToLocaleDateTimeString),
         },
     };
 

package/src/pages/metadata/WfoProductsPage.tsx

@@ -95,6 +95,7 @@ export const WfoProductsPage = () => {
             width: '90',
             renderData: (value) => <WfoFirstPartUUID UUID={value} />,
             renderDetails: (value) => value,
+            renderTooltip: (value) => value,
         },
         name: {
             columnType: ColumnType.DATA,
@@ -120,6 +121,7 @@ export const WfoProductsPage = () => {
             columnType: ColumnType.DATA,
             label: t('description'),
             width: '400',
+            renderTooltip: (value) => value,
         },
         productType: {
             columnType: ColumnType.DATA,
@@ -146,6 +148,13 @@ export const WfoProductsPage = () => {
                     ))}
                 </>
             ),
+            renderTooltip: (fixedInputs) => {
+                return fixedInputs.map((fixedInput) => (
+                    <p key={fixedInput.name}>
+                        - {`${fixedInput.name}: ${fixedInput.value}`}
+                    </p>
+                ));
+            },
         },
         productBlocks: {
             columnType: ColumnType.DATA,
@@ -162,6 +171,11 @@ export const WfoProductsPage = () => {
                     ))}
                 </>
             ),
+            renderTooltip: (productBlocks) => {
+                return productBlocks.map((productBlock) => (
+                    <p key={productBlock.name}>- {productBlock.name}</p>
+                ));
+            },
         },
         createdAt: {
             columnType: ColumnType.DATA,
@@ -169,6 +183,7 @@ export const WfoProductsPage = () => {
             renderData: (date) => <WfoDateTime dateOrIsoString={date} />,
             renderDetails: parseIsoString(parseDateToLocaleDateTimeString),
             clipboardText: parseIsoString(parseDateToLocaleDateTimeString),
+            renderTooltip: parseIsoString(parseDateToLocaleDateTimeString),
         },
     };