@orchestrator-ui/orchestrator-ui-components 3.5.2 → 3.6.0

package/package.json

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

package/src/components/WfoPageTemplate/WfoSidebar/WfoSidebar.tsx

@@ -3,10 +3,16 @@ import React, { FC, useState } from 'react';
 import { useTranslations } from 'next-intl';
 import { useRouter } from 'next/router';
 
-import { EuiHorizontalRule, EuiSideNav, EuiSpacer } from '@elastic/eui';
+import {
+    EuiHorizontalRule,
+    EuiSideNav,
+    EuiSpacer,
+    htmlIdGenerator,
+} from '@elastic/eui';
 import { EuiSideNavItemType } from '@elastic/eui/src/components/side_nav/side_nav_types';
 
 import { WfoIsAllowedToRender, menuItemIsAllowed } from '@/components';
+import { WfoMenuItemLink } from '@/components';
 import { getMenuStyles } from '@/components/WfoPageTemplate/WfoSidebar/styles';
 import { WfoStartWorkflowButtonComboBox } from '@/components/WfoStartButton/WfoStartWorkflowComboBox';
 import { PolicyResource } from '@/configuration/policy-resources';
@@ -26,7 +32,6 @@ import {
     PATH_WORKFLOWS,
 } from '../paths';
 import { WfoCopyright } from './WfoCopyright';
-import { WfoMenuItemLink } from './WfoMenuLink';
 
 export const urlPolicyMap = new Map<string, PolicyResource>([
     [PATH_WORKFLOWS, PolicyResource.NAVIGATION_WORKFLOWS],
@@ -36,11 +41,11 @@ export const urlPolicyMap = new Map<string, PolicyResource>([
     [PATH_SETTINGS, PolicyResource.NAVIGATION_SETTINGS],
 ]);
 
-export const sideNavMenuDivider: EuiSideNavItemType<object> = {
+export const createSideNavDivider = (): EuiSideNavItemType<object> => ({
     name: '',
-    id: 'menuDivider',
+    id: htmlIdGenerator('menuDivider')(),
     renderItem: () => <EuiHorizontalRule margin="xs" />,
-};
+});
 
 export type WfoSidebarProps = {
     overrideMenuItems?: (

package/src/components/WfoSettings/WfoModifySettings.tsx

@@ -4,8 +4,10 @@ import { useTranslations } from 'next-intl';
 
 import { EuiFlexItem, EuiPanel, EuiSpacer, EuiText } from '@elastic/eui';
 
-import { WfoEngineStatusButton } from './WfoEngineStatusButton';
-import { WfoResetTextSearchIndexButton } from './WfoResetTextSearchIndexButton';
+import {
+    WfoEngineStatusButton,
+    WfoResetTextSearchIndexButton,
+} from '@/components';
 
 export const WfoModifySettings = () => {
     const t = useTranslations('settings.page');

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

@@ -22,49 +22,62 @@ export const WfoDragHandler: FC<WfoDragHandlerProps> = ({
     onUpdateColumWidth,
 }) => {
     const [position, setPosition] = useState({ x: 0, y: 0 });
+    const [isDragging, setIsDragging] = useState(false);
+    const { dragAndDropStyle } = useWithOrchestratorTheme(getWfoTableStyles);
+
+    const resetPosition = () => {
+        setPosition({ x: 0, y: 0 });
+    };
+
+    const onStart: DraggableEventHandler = () => {
+        setIsDragging(false);
+    };
 
     const onDrag: DraggableEventHandler = (_, data) => {
+        setIsDragging(true);
         setPosition({ x: data.x, y: data.y });
     };
 
-    const resetPosition = () => {
-        setPosition({ x: 0, y: 0 });
-    };
+    const onStop: DraggableEventHandler = (_, data) => {
+        if (headerRowRef.current && isDragging) {
+            const newWidth = startWidth + data.x;
 
-    const { dragAndDropStyle } = useWithOrchestratorTheme(getWfoTableStyles);
+            onUpdateColumWidth(
+                fieldName,
+                newWidth > MINIMUM_COLUMN_WIDTH
+                    ? newWidth
+                    : MINIMUM_COLUMN_WIDTH,
+            );
+            resetPosition();
+            setIsDragging(false);
+        }
+    };
 
     const thElement =
         headerRowRef.current &&
         (headerRowRef.current.querySelector(
             `th[data-field-name="${fieldName}"]`,
         ) as HTMLTableCellElement);
+
     const startWidth =
         thElement?.getBoundingClientRect().width ?? MINIMUM_COLUMN_WIDTH;
 
+    const bounds = {
+        left: MINIMUM_COLUMN_WIDTH - startWidth,
+        top: 0,
+        bottom: 0,
+    };
+
     return (
         <div>
             <Draggable
+                allowAnyClick={false}
                 axis="x"
                 position={position}
+                onStart={onStart}
                 onDrag={onDrag}
-                bounds={{
-                    left: MINIMUM_COLUMN_WIDTH - startWidth,
-                    top: 0,
-                    bottom: 0,
-                }}
-                onStop={(_, data) => {
-                    if (headerRowRef.current) {
-                        const newWidth = startWidth + data.x;
-
-                        onUpdateColumWidth(
-                            fieldName,
-                            newWidth > MINIMUM_COLUMN_WIDTH
-                                ? newWidth
-                                : MINIMUM_COLUMN_WIDTH,
-                        );
-                        resetPosition();
-                    }
-                }}
+                bounds={bounds}
+                onStop={onStop}
             >
                 <div css={dragAndDropStyle} />
             </Draggable>

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

@@ -102,6 +102,7 @@ export const WfoGroupedTable = <T extends object>({
                     uniqueRowIdToExpandedRowMap,
                 }}
                 onRowClick={({ groupName }) => toggleExpandedRow(groupName)}
+                appendFillerColumn={false}
             />
         </>
     );

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

@@ -16,7 +16,7 @@ import { DEFAULT_PAGE_SIZES } from '../utils/constants';
 import { WfoTableDataRows } from './WfoTableDataRows';
 import { WfoTableHeaderRow } from './WfoTableHeaderRow';
 import { getWfoTableStyles } from './styles';
-import { getSortedVisibleColumns } from './utils';
+import { getColumnWidthsFromConfig, getSortedVisibleColumns } from './utils';
 
 export type Pagination = {
     pageSize: number;
@@ -99,10 +99,11 @@ export type WfoTableProps<T extends object> = {
     onRowClick?: (row: T) => void;
     onUpdateDataSorting?: (updatedDataSorting: WfoDataSorting<T>) => void;
     onUpdateDataSearch?: (updatedDataSearch: WfoDataSearch<T>) => void;
+    appendFillerColumn?: boolean;
     className?: string;
 };
 
-type LocalColumnWidths = {
+export type LocalColumnWidths = {
     [key: string]: string;
 };
 
@@ -119,25 +120,24 @@ export const WfoTable = <T extends object>({
     onUpdateDataSorting,
     onUpdateDataSearch,
     onRowClick,
+    appendFillerColumn = true,
     className,
 }: WfoTableProps<T>) => {
-    const getColumnWidthsFromConfig = (
-        columnConfig: WfoTableColumnConfig<T>,
-    ): LocalColumnWidths => {
-        return Object.entries(columnConfig).reduce(
-            (columnWidths, [key, config]) => {
-                if (config.columnType === ColumnType.DATA) {
-                    columnWidths[key] = config.width ?? 'auto';
-                }
-                return columnWidths;
-            },
-            {} as LocalColumnWidths,
-        );
-    };
-
     const [localColumnWidths, setLocalColumnWidths] =
         useState<LocalColumnWidths>(getColumnWidthsFromConfig(columnConfig));
 
+    const columnConfigWithFiller: WfoTableColumnConfig<T> = appendFillerColumn
+        ? {
+              ...columnConfig,
+              filler: {
+                  columnType: ColumnType.CONTROL,
+                  label: '',
+                  width: '100%',
+                  renderControl: () => null,
+              },
+          }
+        : columnConfig;
+
     const {
         tableContainerStyle,
         tableStyle,
@@ -151,7 +151,7 @@ export const WfoTable = <T extends object>({
     const t = useTranslations('common');
 
     const sortedVisibleColumns = getSortedVisibleColumns(
-        columnConfig,
+        columnConfigWithFiller,
         columnOrder,
         hiddenColumns,
     );
@@ -166,7 +166,7 @@ export const WfoTable = <T extends object>({
     };
 
     const configWithLocalWidths: WfoTableColumnConfig<T> = Object.entries(
-        columnConfig,
+        columnConfigWithFiller,
     ).reduce((mergedConfig, [fieldName, fieldConfig]) => {
         const key = fieldName as keyof WfoTableColumnConfig<T>;
         if (fieldConfig.columnType === ColumnType.DATA) {

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

@@ -37,7 +37,7 @@ export const getWfoTableStyles = ({ theme, isDarkThemeActive }: WfoTheme) => {
     });
 
     const tableStyle = css({
-        width: 'auto',
+        width: '100%',
     });
 
     const headerStyle = css({
@@ -136,7 +136,7 @@ export const getWfoTableStyles = ({ theme, isDarkThemeActive }: WfoTheme) => {
         position: 'absolute',
         height: '100%',
         zIndex: theme.levels.menu,
-        '&:hover, &:active': {
+        '&:active, &:focus': {
             transition: 'background-color 0.15s',
             backgroundColor: isDarkThemeActive
                 ? theme.colors.mediumShade
@@ -152,7 +152,7 @@ export const getWfoTableStyles = ({ theme, isDarkThemeActive }: WfoTheme) => {
             opacity: 0.6,
             zIndex: theme.levels.navigation,
         },
-        '&:hover::after, &:active::after': {
+        '&:active::after': {
             transition: 'opacity 0.15s',
             opacity: 0,
         },

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

@@ -1,4 +1,4 @@
-import { TableColumnKeys } from '@/components';
+import { LocalColumnWidths, TableColumnKeys } from '@/components';
 import { SortOrder } from '@/types';
 import { toObjectWithSortedKeys } from '@/utils';
 
@@ -80,3 +80,16 @@ export function mapSortableAndFilterableValuesToTableColumnConfig<
 
     return Object.fromEntries(tableColumnConfigUpdatedEntries);
 }
+
+export const getColumnWidthsFromConfig = <T extends object>(
+    columnConfig: WfoTableColumnConfig<T>,
+): LocalColumnWidths => {
+    const columnEntries = Object.entries(columnConfig);
+
+    return columnEntries.reduce((columnWidths, [key, config]) => {
+        if (config.columnType === ColumnType.DATA) {
+            columnWidths[key] = config.width ?? 'auto';
+        }
+        return columnWidths;
+    }, {} as LocalColumnWidths);
+};

package/src/configuration/version.ts

@@ -1 +1 @@
-export const ORCHESTRATOR_UI_LIBRARY_VERSION = '3.5.2';
+export const ORCHESTRATOR_UI_LIBRARY_VERSION = '3.6.0';

package/src/icons/WfoQuestionCircle.tsx

@@ -24,8 +24,8 @@ export const WfoQuestionCircle: FC<WfoIconProps> = ({
         >
             <g id="icon/play-circle" fill="none" fillRule="nonzero">
                 <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
                     d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z"
                 />
             </g>

package/src/utils/optionalArray.spec.ts

@@ -1,4 +1,8 @@
-import { optionalArrayMapper, toOptionalArrayEntry } from './optionalArray';
+import {
+    optionalArrayMapper,
+    toOptionalArrayEntries,
+    toOptionalArrayEntry,
+} from './optionalArray';
 
 describe('toOptionalArrayEntry', () => {
     const testInput = { testField: 'testValue' };
@@ -16,6 +20,42 @@ describe('toOptionalArrayEntry', () => {
     });
 });
 
+describe('toOptionalArrayEntries', () => {
+    test('returns data as an array when condition is true and data is not an array', () => {
+        const result = toOptionalArrayEntries('singleItem', true);
+        expect(result).toEqual(['singleItem']);
+    });
+
+    test('returns data as it is when condition is true and data is already an array', () => {
+        const result = toOptionalArrayEntries(['item1', 'item2'], true);
+        expect(result).toEqual(['item1', 'item2']);
+    });
+
+    test('returns an empty array when condition is false regardless of data type', () => {
+        const resultWithSingleItem = toOptionalArrayEntries(
+            'singleItem',
+            false,
+        );
+        const resultWithArray = toOptionalArrayEntries(
+            ['item1', 'item2'],
+            false,
+        );
+
+        expect(resultWithSingleItem).toEqual([]);
+        expect(resultWithArray).toEqual([]);
+    });
+
+    test('does not mutate the original data', () => {
+        const singleItem = 'singleItem';
+        const arrayData = ['item1', 'item2'];
+        toOptionalArrayEntries(singleItem, true);
+        toOptionalArrayEntries(arrayData, true);
+
+        expect(singleItem).toBe('singleItem');
+        expect(arrayData).toEqual(['item1', 'item2']);
+    });
+});
+
 describe('optionalArrayMapper', () => {
     it('applies the mapper when data is defined', () => {
         const testData = [{ testField: 'testValue' }];

package/src/utils/optionalArray.ts

@@ -3,6 +3,11 @@ export const toOptionalArrayEntry = <T>(
     condition: boolean,
 ): [T] | [] => (condition ? [data] : []);
 
+export const toOptionalArrayEntries = <T>(
+    data: T | T[],
+    condition: boolean,
+): T[] => (condition ? (Array.isArray(data) ? data : [data]) : []);
+
 export const optionalArrayMapper = <T, U>(
     data: T[] | undefined = [],
     mapper: (input: T) => U,