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

package/package.json

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

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

@@ -10,6 +10,9 @@ export type WfoSortButtonsProps = {
     onChangeSortOrder: (updatedSortOrder: SortOrder) => void;
 };
 
+/**
+ * @deprecated This component is not used anymore and will be removed in the next major version.
+ */
 export const WfoSortButtons: FC<WfoSortButtonsProps> = ({
     sortOrder,
     onChangeSortOrder,

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

@@ -1,11 +1,13 @@
 import React, { FC } from 'react';
 
 import { useOrchestratorTheme } from '@/hooks';
-import { WfoArrowNarrowDown, WfoArrowNarrowUp } from '@/icons';
+import { WfoArrowNarrowDown, WfoArrowNarrowUp, WfoArrowsUpDown } from '@/icons';
 import { SortOrder } from '@/types';
 
+import { SORTABLE_ICON_CLASS } from './styles';
+
 export type WfoSortDirectionIconProps = {
-    sortDirection: SortOrder;
+    sortDirection?: SortOrder;
 };
 
 export const WfoSortDirectionIcon: FC<WfoSortDirectionIconProps> = ({
@@ -13,6 +15,16 @@ export const WfoSortDirectionIcon: FC<WfoSortDirectionIconProps> = ({
 }) => {
     const { theme } = useOrchestratorTheme();
 
+    if (!sortDirection) {
+        return (
+            <WfoArrowsUpDown
+                className={SORTABLE_ICON_CLASS}
+                css={{ visibility: 'hidden' }}
+                color={theme.colors.subduedText}
+            />
+        );
+    }
+
     return sortDirection === SortOrder.ASC ? (
         <WfoArrowNarrowUp
             color={theme.colors.subduedText}

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

@@ -10,12 +10,16 @@ import {
     useGeneratedHtmlId,
 } from '@elastic/eui';
 
-import { WfoSortButtons } from '@/components';
+import { getUpdatedSortOrder } from '@/components/WfoTable/WfoTable/utils';
 import { useWithOrchestratorTheme } from '@/hooks';
 import { SortOrder } from '@/types';
 
 import { WfoSortDirectionIcon } from './WfoSortDirectionIcon';
-import { getWfoBasicTableStyles } from './styles';
+import {
+    HEADER_CELL_SORT_BUTTON_CLASS,
+    HEADER_CELL_TITLE_BUTTON_CLASS,
+    getWfoBasicTableStyles,
+} from './styles';
 
 export type WfoTableHeaderCellProps = {
     fieldName: string;
@@ -33,17 +37,18 @@ export const WfoTableHeaderCell: FC<WfoTableHeaderCellProps> = ({
     onSearch,
 }) => {
     const {
-        headerCellContentStyle,
+        headerCellStyle,
+        getHeaderCellContentStyle,
         headerCellPopoverHeaderStyle,
         headerCellPopoverHeaderTitleStyle,
         headerCellPopoverContentStyle,
-        getHeaderCellButtonStyle,
+        getTitleButtonStyle,
+        sortButtonStyle,
     } = useWithOrchestratorTheme(getWfoBasicTableStyles);
     const t = useTranslations('common');
 
     const isSortable = !!onSetSortOrder;
     const isFilterable = !!onSearch;
-    const shouldShowPopover = isSortable || isFilterable;
 
     const smallContextMenuPopoverId = useGeneratedHtmlId({
         prefix: 'smallContextMenuPopover',
@@ -53,24 +58,14 @@ export const WfoTableHeaderCell: FC<WfoTableHeaderCellProps> = ({
     const handleButtonClick = () => setPopover(!isPopoverOpen);
     const closePopover = () => setPopover(false);
 
-    const handleChangeSortOrder = (updatedSortOrder: SortOrder) => {
-        onSetSortOrder?.(updatedSortOrder);
-        closePopover();
-    };
-
     const handleSearch = (searchText: string) => {
         onSearch?.(searchText);
         closePopover();
     };
 
     const WfoHeaderCellContentButton = () => (
-        <button onClick={handleButtonClick} disabled={!shouldShowPopover}>
-            <div css={getHeaderCellButtonStyle(shouldShowPopover)}>
-                <div css={headerCellContentStyle}>{children}</div>
-                {sortOrder && (
-                    <WfoSortDirectionIcon sortDirection={sortOrder} />
-                )}
-            </div>
+        <button onClick={handleButtonClick} disabled={!isFilterable}>
+            <div css={getHeaderCellContentStyle(isFilterable)}>{children}</div>
         </button>
     );
 
@@ -79,12 +74,6 @@ export const WfoTableHeaderCell: FC<WfoTableHeaderCellProps> = ({
             <EuiText size="xs" css={headerCellPopoverHeaderTitleStyle}>
                 {children}
             </EuiText>
-            {isSortable && (
-                <WfoSortButtons
-                    sortOrder={sortOrder}
-                    onChangeSortOrder={handleChangeSortOrder}
-                />
-            )}
         </div>
     );
 
@@ -100,22 +89,34 @@ export const WfoTableHeaderCell: FC<WfoTableHeaderCellProps> = ({
     );
 
     return (
-        <EuiPopover
-            initialFocus={`.euiPanel .euiFieldSearch.${fieldName}`}
-            id={smallContextMenuPopoverId}
-            button={<WfoHeaderCellContentButton />}
-            isOpen={isPopoverOpen}
-            closePopover={closePopover}
-            panelPaddingSize="none"
-            anchorPosition="downLeft"
-        >
-            <WfoPopoverHeader />
-            {isFilterable && (
-                <>
-                    <EuiHorizontalRule margin="none" />
-                    <WfoPopoverContent />
-                </>
+        <div css={headerCellStyle}>
+            <EuiPopover
+                className={HEADER_CELL_TITLE_BUTTON_CLASS}
+                css={getTitleButtonStyle(sortOrder)}
+                initialFocus={`.euiPanel .euiFieldSearch.${fieldName}`}
+                id={smallContextMenuPopoverId}
+                button={<WfoHeaderCellContentButton />}
+                isOpen={isPopoverOpen}
+                closePopover={closePopover}
+                panelPaddingSize="none"
+                anchorPosition="downLeft"
+            >
+                <WfoPopoverHeader />
+                <EuiHorizontalRule margin="none" />
+                <WfoPopoverContent />
+            </EuiPopover>
+
+            {isSortable && (
+                <button
+                    className={HEADER_CELL_SORT_BUTTON_CLASS}
+                    css={sortButtonStyle}
+                    onClick={() =>
+                        onSetSortOrder(getUpdatedSortOrder(sortOrder))
+                    }
+                >
+                    <WfoSortDirectionIcon sortDirection={sortOrder} />
+                </button>
             )}
-        </EuiPopover>
+        </div>
     );
 };

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

@@ -1,6 +1,11 @@
 import { css } from '@emotion/react';
 
 import { WfoTheme } from '@/hooks';
+import { SortOrder } from '@/types';
+
+export const HEADER_CELL_TITLE_BUTTON_CLASS = 'headerCellTitleButton';
+export const HEADER_CELL_SORT_BUTTON_CLASS = 'headerCellSortButton';
+export const SORTABLE_ICON_CLASS = 'sortableIcon';
 
 export const getWfoBasicTableStyles = ({ theme }: WfoTheme) => {
     const radius = theme.border.radius.medium;
@@ -72,10 +77,23 @@ export const getWfoBasicTableStyles = ({ theme }: WfoTheme) => {
         },
     ]);
 
-    const headerCellContentStyle = css({
-        fontWeight: theme.font.weight.semiBold,
+    const headerCellStyle = css({
+        display: 'flex',
+        justifyContent: 'flex-start',
+        alignItems: 'center',
+
+        [`.${HEADER_CELL_TITLE_BUTTON_CLASS}:has(+ .${HEADER_CELL_SORT_BUTTON_CLASS}:focus-visible)`]:
+            {
+                overflow: 'hidden',
+            },
     });
 
+    const getHeaderCellContentStyle = (isSortable: boolean) =>
+        css({
+            cursor: isSortable ? 'pointer' : 'not-allowed',
+            fontWeight: theme.font.weight.semiBold,
+        });
+
     const headerCellPopoverHeaderStyle = css({
         margin: theme.size.m,
         display: 'flex',
@@ -91,20 +109,30 @@ export const getWfoBasicTableStyles = ({ theme }: WfoTheme) => {
         margin: theme.size.m,
     });
 
-    const getHeaderCellButtonStyle = (isSortable: boolean) =>
+    const getTitleButtonStyle = (sortOrder?: SortOrder) =>
         css({
-            display: 'flex',
-            alignItems: 'center',
-            cursor: isSortable ? 'pointer' : 'not-allowed',
+            flex: '0 1 auto',
+            overflow: sortOrder === undefined ? 'visible' : 'hidden',
         });
 
+    const sortButtonStyle = css({
+        display: 'flex',
+        flex: '0 0 auto',
+        alignItems: 'center',
+        [`&:focus-visible .${SORTABLE_ICON_CLASS}`]: {
+            visibility: 'visible',
+        },
+    });
+
     return {
         basicTableStyle,
-        headerCellContentStyle,
+        headerCellStyle,
+        getHeaderCellContentStyle,
         headerCellPopoverHeaderStyle,
         headerCellPopoverHeaderTitleStyle,
         headerCellPopoverContentStyle,
-        getHeaderCellButtonStyle,
+        getTitleButtonStyle,
+        sortButtonStyle,
         getStatusColumnStyle,
         dropDownTableStyle,
         expandableTableStyle,

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

@@ -28,7 +28,7 @@ export const WfoTableHeaderRow = <T extends object>({
     onUpdateDataSearch,
     className,
 }: WfoTableHeaderRowProps<T>) => {
-    const { cellStyle, rowStyle, setWidth } =
+    const { cellStyle, headerCellStyle, rowStyle, setWidth } =
         useWithOrchestratorTheme(getWfoTableStyles);
 
     const sortedVisibleColumns = getSortedVisibleColumns(
@@ -55,6 +55,10 @@ export const WfoTableHeaderRow = <T extends object>({
                                         cellStyle,
                                         !columnConfig.disableDefaultCellStyle,
                                     ),
+                                    ...toOptionalArrayEntry(
+                                        headerCellStyle,
+                                        !!columnConfig.isSortable,
+                                    ),
                                     setWidth(columnConfig.width),
                                 ]}
                             >

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

@@ -2,9 +2,14 @@ import { CSSProperties } from 'react';
 
 import { css, keyframes } from '@emotion/react';
 
-import { TABLE_ROW_HEIGHT } from '@/components/WfoTable';
 import { WfoTheme } from '@/hooks';
 
+import {
+    HEADER_CELL_TITLE_BUTTON_CLASS,
+    SORTABLE_ICON_CLASS,
+} from './WfoTableHeaderCell/styles';
+import { TABLE_ROW_HEIGHT } from './constants';
+
 export const getWfoTableStyles = ({ theme }: WfoTheme) => {
     const radius = theme.border.radius.medium;
 
@@ -77,6 +82,17 @@ export const getWfoTableStyles = ({ theme }: WfoTheme) => {
         backgroundColor: theme.colors.lightestShade,
     });
 
+    const headerCellStyle = css({
+        [`&:hover`]: {
+            [`.${SORTABLE_ICON_CLASS}`]: {
+                visibility: 'visible',
+            },
+            [`.${HEADER_CELL_TITLE_BUTTON_CLASS}`]: {
+                overflow: 'hidden',
+            },
+        },
+    });
+
     const cellStyle = css({
         paddingLeft: theme.size.m,
         paddingRight: theme.size.m,
@@ -109,6 +125,7 @@ export const getWfoTableStyles = ({ theme }: WfoTheme) => {
         rowStyle,
         dataRowStyle,
         expandedRowStyle,
+        headerCellStyle,
         cellStyle,
         emptyTableMessageStyle,
         clickableStyle,

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

@@ -2,8 +2,12 @@ import {
     ColumnType,
     WfoTableColumnConfig,
 } from '@/components/WfoTable/WfoTable/WfoTable';
+import { SortOrder } from '@/types';
 
-import { mapSortableAndFilterableValuesToTableColumnConfig } from './utils';
+import {
+    getUpdatedSortOrder,
+    mapSortableAndFilterableValuesToTableColumnConfig,
+} from './utils';
 
 type TestObject = {
     name: string;
@@ -21,59 +25,83 @@ const tableColumnConfig: WfoTableColumnConfig<TestObject> = {
     },
 };
 
-describe('mapSortableAndFilterableValuesToTableColumnConfig', () => {
-    it('sets the sortable and filterable properties for the columnConfig object to true when the colum name is specified in the list', () => {
-        // Given
-        const sortableFieldNames = ['name', 'age', 'nonExistingFieldName'];
-        const filterableFieldNames = ['name', 'age', 'nonExistingFieldName'];
+describe('utils', () => {
+    describe('getUpdatedSortOrder()', () => {
+        it('returns SortOrder.DESC if the currentSortOrder is SortOrder.ASC', () => {
+            const currentSortOrder = SortOrder.ASC;
+            const result = getUpdatedSortOrder(currentSortOrder);
+            expect(result).toBe(SortOrder.DESC);
+        });
+        it('returns SortOrder.ASC if the currentSortOrder is SortOrder.DESC', () => {
+            const currentSortOrder = SortOrder.DESC;
+            const result = getUpdatedSortOrder(currentSortOrder);
+            expect(result).toBe(SortOrder.ASC);
+        });
+        it('returns SortOrder.ASC if the currentSortOrder is undefined', () => {
+            const currentSortOrder = undefined;
+            const result = getUpdatedSortOrder(currentSortOrder);
+            expect(result).toBe(SortOrder.ASC);
+        });
+    });
+
+    describe('mapSortableAndFilterableValuesToTableColumnConfig()', () => {
+        it('sets the sortable and filterable properties for the columnConfig object to true when the colum name is specified in the list', () => {
+            // Given
+            const sortableFieldNames = ['name', 'age', 'nonExistingFieldName'];
+            const filterableFieldNames = [
+                'name',
+                'age',
+                'nonExistingFieldName',
+            ];
 
-        // When
-        const result =
-            mapSortableAndFilterableValuesToTableColumnConfig<TestObject>(
-                tableColumnConfig,
-                sortableFieldNames,
-                filterableFieldNames,
-            );
+            // When
+            const result =
+                mapSortableAndFilterableValuesToTableColumnConfig<TestObject>(
+                    tableColumnConfig,
+                    sortableFieldNames,
+                    filterableFieldNames,
+                );
 
-        // Then
-        if (
-            result.name?.columnType === ColumnType.DATA &&
-            result.age?.columnType === ColumnType.DATA
-        ) {
-            expect(result.name.isSortable).toEqual(true);
-            expect(result.name.isFilterable).toEqual(true);
-            expect(result.age.isSortable).toEqual(true);
-            expect(result.age.isFilterable).toEqual(true);
-        } else {
-            // Preventing silently skipping above expects
-            throw Error('Some of the fields are not data fields');
-        }
-    });
-    it('sets the sortable and filterable properties for the columnConfig object to false when the colum name is not specified in the list', () => {
-        // Given
-        const sortableFieldNames = ['nonExistingFieldName'];
-        const filterableFieldNames: string[] = [];
+            // Then
+            if (
+                result.name?.columnType === ColumnType.DATA &&
+                result.age?.columnType === ColumnType.DATA
+            ) {
+                expect(result.name.isSortable).toEqual(true);
+                expect(result.name.isFilterable).toEqual(true);
+                expect(result.age.isSortable).toEqual(true);
+                expect(result.age.isFilterable).toEqual(true);
+            } else {
+                // Preventing silently skipping above expects
+                throw Error('Some of the fields are not data fields');
+            }
+        });
+        it('sets the sortable and filterable properties for the columnConfig object to false when the colum name is not specified in the list', () => {
+            // Given
+            const sortableFieldNames = ['nonExistingFieldName'];
+            const filterableFieldNames: string[] = [];
 
-        // When
-        const result =
-            mapSortableAndFilterableValuesToTableColumnConfig<TestObject>(
-                tableColumnConfig,
-                sortableFieldNames,
-                filterableFieldNames,
-            );
+            // When
+            const result =
+                mapSortableAndFilterableValuesToTableColumnConfig<TestObject>(
+                    tableColumnConfig,
+                    sortableFieldNames,
+                    filterableFieldNames,
+                );
 
-        // Then
-        if (
-            result.name?.columnType === ColumnType.DATA &&
-            result.age?.columnType === ColumnType.DATA
-        ) {
-            expect(result.name.isSortable).toEqual(false);
-            expect(result.name.isFilterable).toEqual(false);
-            expect(result.age.isSortable).toEqual(false);
-            expect(result.age.isFilterable).toEqual(false);
-        } else {
-            // Preventing silently skipping above expects
-            throw Error('Some of the fields are not data fields');
-        }
+            // Then
+            if (
+                result.name?.columnType === ColumnType.DATA &&
+                result.age?.columnType === ColumnType.DATA
+            ) {
+                expect(result.name.isSortable).toEqual(false);
+                expect(result.name.isFilterable).toEqual(false);
+                expect(result.age.isSortable).toEqual(false);
+                expect(result.age.isFilterable).toEqual(false);
+            } else {
+                // Preventing silently skipping above expects
+                throw Error('Some of the fields are not data fields');
+            }
+        });
     });
 });

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

@@ -1,4 +1,5 @@
 import { TableColumnKeys } from '@/components';
+import { SortOrder } from '@/types';
 import { toObjectWithSortedKeys } from '@/utils';
 
 import {
@@ -33,6 +34,9 @@ export const getSortedVisibleColumns = <T extends object>(
     );
 };
 
+export const getUpdatedSortOrder = (currentSortOrder?: SortOrder) =>
+    currentSortOrder === SortOrder.ASC ? SortOrder.DESC : SortOrder.ASC;
+
 /**
  * Maps from WfoTableColumnConfig to WfoTableColumnConfig.
  * A generic type must be provided to prevent type errors

package/src/configuration/version.ts

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

package/src/icons/heroicons/WfoArrowsUpDown.tsx

@@ -0,0 +1,27 @@
+import React, { FC } from 'react';
+
+import { WfoIconProps } from '@/icons/WfoIconProps';
+
+import { withWfoHeroIconsWrapper } from './WfoHeroIconsWrapper';
+
+const WfoArrowsUpDownSvg: FC<WfoIconProps> = ({
+    width = 20,
+    height = 20,
+    color = '#000000',
+}) => (
+    <svg
+        width={width}
+        height={height}
+        viewBox="0 0 24 24"
+        fill={color}
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path
+            fillRule="evenodd"
+            d="M6.97 2.47a.75.75 0 0 1 1.06 0l4.5 4.5a.75.75 0 0 1-1.06 1.06L8.25 4.81V16.5a.75.75 0 0 1-1.5 0V4.81L3.53 8.03a.75.75 0 0 1-1.06-1.06l4.5-4.5Zm9.53 4.28a.75.75 0 0 1 .75.75v11.69l3.22-3.22a.75.75 0 1 1 1.06 1.06l-4.5 4.5a.75.75 0 0 1-1.06 0l-4.5-4.5a.75.75 0 1 1 1.06-1.06l3.22 3.22V7.5a.75.75 0 0 1 .75-.75Z"
+            clipRule="evenodd"
+        />
+    </svg>
+);
+
+export const WfoArrowsUpDown = withWfoHeroIconsWrapper(WfoArrowsUpDownSvg);

package/src/icons/heroicons/WfoHeroIconsWrapper.tsx

@@ -0,0 +1,43 @@
+import React, { FC, ReactElement } from 'react';
+
+import { useOrchestratorTheme } from '@/hooks';
+import { WfoIconProps } from '@/icons';
+
+export type WfoHeroIconsWrapperProps = {
+    children: ReactElement;
+    className?: string;
+};
+
+export const WfoHeroIconsWrapper: FC<WfoHeroIconsWrapperProps> = ({
+    children,
+    className,
+}) => {
+    const { theme } = useOrchestratorTheme();
+
+    return (
+        <div
+            className={className}
+            css={{
+                marginLeft: theme.size.xs,
+                marginRight: theme.size.xs,
+                display: 'flex',
+                alignItems: 'center',
+            }}
+        >
+            {children}
+        </div>
+    );
+};
+
+export const withWfoHeroIconsWrapper = (Icon: FC<WfoIconProps>) => {
+    const wfoHeroIconsWrapperWithIcon = ({
+        className,
+        ...iconProps
+    }: WfoIconProps & Omit<WfoHeroIconsWrapperProps, 'children'>) => (
+        <WfoHeroIconsWrapper className={className}>
+            <Icon {...iconProps} />
+        </WfoHeroIconsWrapper>
+    );
+    wfoHeroIconsWrapperWithIcon.displayName = 'WfoHeroIconsWrapper';
+    return wfoHeroIconsWrapperWithIcon;
+};

package/src/icons/heroicons/index.ts

@@ -0,0 +1,2 @@
+export * from './WfoArrowsUpDown';
+export * from './WfoHeroIconsWrapper';

package/src/icons/index.ts

@@ -1,3 +1,5 @@
+export * from './heroicons';
+
 export * from './WfoXCircleFill';
 export * from './WfoArrowsExpand';
 export * from './WfoStatusDotIcon';