@orchestrator-ui/orchestrator-ui-components 0.2.4 → 0.2.6

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

@@ -0,0 +1,31 @@
+import React, { FC } from 'react';
+
+import { useOrchestratorTheme } from '../../../hooks';
+import { WfoIconProps } from '../../../icons';
+import { getStyles } from './styles';
+
+export type WfoSortButtonProps = {
+    WfoIconComponent: FC<WfoIconProps>;
+    isActive: boolean;
+    onClick?: () => void;
+};
+
+export const WfoSortButton: FC<WfoSortButtonProps> = ({
+    WfoIconComponent,
+    isActive,
+    onClick,
+}) => {
+    const { theme } = useOrchestratorTheme();
+    const { getSortButtonStyle } = getStyles();
+
+    return (
+        <button
+            css={getSortButtonStyle(isActive)}
+            onClick={() => isActive && onClick?.()}
+        >
+            <WfoIconComponent
+                color={isActive ? theme.colors.title : theme.colors.lightShade}
+            />
+        </button>
+    );
+};

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

@@ -0,0 +1,33 @@
+import React, { FC } from 'react';
+
+import { WfoSortAsc, WfoSortDesc } from '../../../icons';
+import { SortOrder } from '../../../types';
+import { WfoSortButton } from './WfoSortButton';
+import { getStyles } from './styles';
+
+export type WfoSortButtonsProps = {
+    sortOrder?: SortOrder;
+    onChangeSortOrder: (updatedSortOrder: SortOrder) => void;
+};
+
+export const WfoSortButtons: FC<WfoSortButtonsProps> = ({
+    sortOrder,
+    onChangeSortOrder,
+}) => {
+    const { sortButtonsContainerStyle } = getStyles();
+
+    return (
+        <div css={sortButtonsContainerStyle}>
+            <WfoSortButton
+                WfoIconComponent={WfoSortAsc}
+                isActive={sortOrder !== SortOrder.ASC}
+                onClick={() => onChangeSortOrder(SortOrder.ASC)}
+            />
+            <WfoSortButton
+                WfoIconComponent={WfoSortDesc}
+                isActive={sortOrder !== SortOrder.DESC}
+                onClick={() => onChangeSortOrder(SortOrder.DESC)}
+            />
+        </div>
+    );
+};

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

@@ -0,0 +1,2 @@
+export * from './WfoSortButton';
+export * from './WfoSortButtons';

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

@@ -0,0 +1,20 @@
+import { css } from '@emotion/react';
+
+export const getStyles = () => {
+    const sortButtonsContainerStyle = css({
+        display: 'flex',
+        alignItems: 'center',
+    });
+
+    const getSortButtonStyle = (isActive: boolean) =>
+        css({
+            display: 'flex',
+            alignItems: 'center',
+            cursor: isActive ? 'pointer' : 'not-allowed',
+        });
+
+    return {
+        sortButtonsContainerStyle,
+        getSortButtonStyle,
+    };
+};

package/src/components/{WFOTable/WFOTableSettingsModal/WFOTableSettingsModal.tsx → WfoTable/WfoTableSettingsModal/WfoTableSettingsModal.tsx}

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+
 import {
     EuiForm,
     EuiFormRow,
@@ -7,7 +8,8 @@ import {
     EuiSpacer,
     EuiSwitch,
 } from '@elastic/eui';
-import { SettingsModal } from '../../WFOSettingsModal';
+
+import { WfoSettingsModal } from '../../WfoSettingsModal';
 
 export type ColumnConfig<T> = {
     field: keyof T;
@@ -58,7 +60,7 @@ export const TableSettingsModal = <T,>({
     };
 
     return (
-        <SettingsModal
+        <WfoSettingsModal
             title="Table settings"
             onClose={onClose}
             onResetToDefaults={onResetToDefaults}
@@ -109,6 +111,6 @@ export const TableSettingsModal = <T,>({
                     />
                 </EuiFormRow>
             </EuiForm>
-        </SettingsModal>
+        </WfoSettingsModal>
     );
 };

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

@@ -0,0 +1 @@
+export * from './WfoTableSettingsModal';

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

@@ -0,0 +1,253 @@
+import React, { useEffect, useState } from 'react';
+
+import {
+    Criteria,
+    EuiButton,
+    EuiFlexGroup,
+    EuiFlexItem,
+    EuiSpacer,
+    Pagination,
+} from '@elastic/eui';
+
+import { useOrchestratorTheme } from '../../../hooks';
+import { WfoArrowsExpand } from '../../../icons';
+import { getTypedFieldFromObject } from '../../../utils';
+import {
+    WfoKeyValueTable,
+    WfoKeyValueTableDataType,
+} from '../../WfoKeyValueTable/WfoKeyValueTable';
+import { WfoSearchField } from '../../WfoSearchBar';
+import { WfoInformationModal } from '../../WfoSettingsModal';
+import {
+    WfoBasicTable,
+    WfoBasicTableColumnsWithControlColumns,
+} from '../WfoBasicTable';
+import {
+    ColumnConfig,
+    TableConfig,
+    TableSettingsModal,
+} from '../WfoTableSettingsModal';
+import {
+    TableColumnKeys,
+    WfoDataSorting,
+    WfoTableColumns,
+    WfoTableControlColumnConfig,
+    WfoTableDataColumnConfig,
+} from '../utils/columns';
+import { DEFAULT_PAGE_SIZE, DEFAULT_PAGE_SIZES } from '../utils/constants';
+import {
+    clearTableConfigFromLocalStorage,
+    setTableConfigToLocalStorage,
+} from '../utils/tableConfigPersistence';
+
+export type WfoTableWithFilterProps<T> = {
+    data: T[];
+    tableColumns: WfoTableColumns<T>;
+    leadingControlColumns?: WfoTableControlColumnConfig<T>;
+    trailingControlColumns?: WfoTableControlColumnConfig<T>;
+    defaultHiddenColumns?: TableColumnKeys<T>;
+    dataSorting: WfoDataSorting<T>;
+    pagination: Pagination;
+    esQueryString?: string;
+    isLoading: boolean;
+    localStorageKey: string;
+    detailModal?: boolean;
+    detailModalTitle?: string;
+    onUpdateEsQueryString: (esQueryString: string) => void;
+    onUpdatePage: (criterion: Criteria<T>['page']) => void;
+    onUpdateDataSort: (dataSorting: WfoDataSorting<T>) => void;
+};
+
+export const WfoTableWithFilter = <T,>({
+    data,
+    tableColumns,
+    leadingControlColumns,
+    trailingControlColumns,
+    defaultHiddenColumns = [],
+    dataSorting,
+    pagination,
+    esQueryString,
+    isLoading,
+    localStorageKey,
+    detailModal = true,
+    detailModalTitle = 'Details',
+    onUpdateEsQueryString,
+    onUpdatePage,
+    onUpdateDataSort,
+}: WfoTableWithFilterProps<T>) => {
+    const { theme } = useOrchestratorTheme();
+
+    const defaultPageSize = pagination.pageSize;
+    const [hiddenColumns, setHiddenColumns] =
+        useState<TableColumnKeys<T>>(defaultHiddenColumns);
+    const [showSettingsModal, setShowSettingsModal] = useState(false);
+    const [selectedDataForDetailModal, setSelectedDataForDetailModal] =
+        useState<T | undefined>(undefined);
+
+    useEffect(() => {
+        if (defaultHiddenColumns) {
+            setHiddenColumns(defaultHiddenColumns);
+        }
+    }, [defaultHiddenColumns]);
+
+    const detailsIconColumn: WfoTableControlColumnConfig<T> = {
+        viewDetails: {
+            field: 'viewDetails',
+            width: '36px',
+            render: (_, row) => (
+                <EuiFlexItem
+                    css={{ cursor: 'pointer' }}
+                    onClick={() => setSelectedDataForDetailModal(row)}
+                >
+                    <WfoArrowsExpand color={theme.colors.mediumShade} />
+                </EuiFlexItem>
+            ),
+        },
+    };
+
+    const tableColumnsWithControlColumns: WfoBasicTableColumnsWithControlColumns<T> =
+        {
+            ...leadingControlColumns,
+            ...tableColumns,
+            ...trailingControlColumns,
+            ...(detailModal ? detailsIconColumn : []),
+        };
+
+    const tableSettingsColumns: ColumnConfig<T>[] = Object.entries<
+        WfoTableDataColumnConfig<T, keyof T>
+    >(tableColumns).map((keyValuePair) => {
+        const { field, name } = keyValuePair[1];
+        return {
+            field,
+            name,
+            isVisible: hiddenColumns.indexOf(field) === -1,
+        };
+    });
+
+    const rowDetailData: WfoKeyValueTableDataType[] | undefined =
+        selectedDataForDetailModal &&
+        Object.entries(tableColumns).map(([key]): WfoKeyValueTableDataType => {
+            const dataField = getTypedFieldFromObject(key, tableColumns);
+            if (dataField === null) {
+                return {
+                    key,
+                    value: undefined,
+                };
+            }
+
+            const { renderDetails, render, clipboardText, name } =
+                tableColumns[dataField];
+            const dataValue = selectedDataForDetailModal[dataField];
+            return {
+                key: name ?? dataField.toString(),
+                value: (renderDetails &&
+                    renderDetails(dataValue, selectedDataForDetailModal)) ??
+                    (render &&
+                        render(dataValue, selectedDataForDetailModal)) ?? (
+                        <>{dataValue}</>
+                    ),
+                textToCopy:
+                    clipboardText?.(dataValue, selectedDataForDetailModal) ??
+                    (typeof dataValue === 'string' ? dataValue : undefined),
+            };
+        });
+
+    const handleUpdateTableConfig = (updatedTableConfig: TableConfig<T>) => {
+        const updatedHiddenColumns = updatedTableConfig.columns
+            .filter((column) => !column.isVisible)
+            .map((hiddenColumn) => hiddenColumn.field);
+        setHiddenColumns(updatedHiddenColumns);
+        setShowSettingsModal(false);
+        setTableConfigToLocalStorage(localStorageKey, {
+            hiddenColumns: updatedHiddenColumns,
+            selectedPageSize: updatedTableConfig.selectedPageSize,
+        });
+        onUpdatePage({
+            index: 0,
+            size: updatedTableConfig.selectedPageSize,
+        });
+    };
+
+    const handleResetToDefaults = () => {
+        setHiddenColumns(defaultHiddenColumns);
+        setShowSettingsModal(false);
+        clearTableConfigFromLocalStorage(localStorageKey);
+        onUpdatePage({
+            index: 0,
+            size: defaultPageSize ?? DEFAULT_PAGE_SIZE,
+        });
+    };
+
+    const onCriteriaChange = (criterion: Criteria<T>) => {
+        if (criterion.page) {
+            onUpdatePage(criterion.page);
+        }
+    };
+
+    return (
+        <>
+            <EuiFlexGroup>
+                <EuiFlexItem>
+                    <WfoSearchField
+                        esQueryString={esQueryString}
+                        onUpdateEsQueryString={onUpdateEsQueryString}
+                    />
+                </EuiFlexItem>
+                <EuiButton onClick={() => setShowSettingsModal(true)}>
+                    Edit columns
+                </EuiButton>
+            </EuiFlexGroup>
+            <EuiSpacer size="m" />
+            <WfoBasicTable
+                data={data}
+                columns={tableColumnsWithControlColumns}
+                hiddenColumns={hiddenColumns}
+                dataSorting={dataSorting}
+                onUpdateDataSorting={onUpdateDataSort}
+                pagination={pagination}
+                isLoading={isLoading}
+                onCriteriaChange={onCriteriaChange}
+                onDataSearch={({ field, searchText }) => {
+                    // Todo: This is not the final implementation. Need to decide to use esquery in the frontend.
+                    // In that case, string concatenation is not the best solution
+                    // https://github.com/workfloworchestrator/orchestrator-ui/issues/81
+                    onUpdateEsQueryString(
+                        esQueryString
+                            ? esQueryString +
+                                  ' AND ' +
+                                  `${field.toString()}:"${searchText}"`
+                            : `${field.toString()}:"${searchText}"`,
+                    );
+                }}
+            />
+
+            {showSettingsModal && (
+                <TableSettingsModal
+                    tableConfig={{
+                        columns: tableSettingsColumns,
+                        selectedPageSize:
+                            pagination.pageSize ?? DEFAULT_PAGE_SIZE,
+                    }}
+                    pageSizeOptions={
+                        pagination.pageSizeOptions ?? DEFAULT_PAGE_SIZES
+                    }
+                    onClose={() => setShowSettingsModal(false)}
+                    onUpdateTableConfig={handleUpdateTableConfig}
+                    onResetToDefaults={handleResetToDefaults}
+                />
+            )}
+
+            {rowDetailData && (
+                <WfoInformationModal
+                    title={detailModalTitle}
+                    onClose={() => setSelectedDataForDetailModal(undefined)}
+                >
+                    <WfoKeyValueTable
+                        keyValues={rowDetailData}
+                        showCopyToClipboardIcon
+                    />
+                </WfoInformationModal>
+            )}
+        </>
+    );
+};

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

@@ -0,0 +1 @@
+export * from './WfoTableWithFilter';

package/src/components/WfoTable/index.ts

@@ -0,0 +1,15 @@
+export * from './WfoDataGridTable/WfoDataGridTable';
+export * from './WfoDataGridTable/WfodataGridColumns';
+
+export * from './WfoTableSettingsModal';
+
+export * from './utils/columns';
+export * from './utils/constants';
+
+export * from './utils/tableConfigPersistence';
+export * from './utils/tableUtils';
+
+export * from './WfoBasicTable';
+export * from './WfoTableWithFilter';
+
+export * from './WfoSortButtons';

package/src/components/{WFOTable → WfoTable}/utils/columns.ts

@@ -1,48 +1,59 @@
-import { EuiBasicTableColumn } from '@elastic/eui';
 import { ReactNode } from 'react';
+
+import { EuiBasicTableColumn } from '@elastic/eui';
+
 import { SortOrder } from '../../../types';
 
 // Todo need to Pick a few more props from EuiBasicTableColumn to prevent none-functioning props (truncateText)
 // https://github.com/workfloworchestrator/orchestrator-ui/issues/130
-export type WFOBasicTableColumn<T> = Omit<EuiBasicTableColumn<T>, 'render'>;
+export type WfoEuiBasicTableColumn<T> = Omit<EuiBasicTableColumn<T>, 'render'>;
 
-export type WFOTableDataColumnConfig<T, Property> = WFOBasicTableColumn<T> & {
-    field: Property;
-    name: string;
-};
+export type WfoTableDataColumnConfig<T, Property> =
+    WfoEuiBasicTableColumn<T> & {
+        field: Property;
+        name: string;
+        sortable?: boolean;
+        filterable?: boolean;
+    };
+
+export const WFO_STATUS_COLOR_FIELD = 'statusColorField';
 
 // Todo need to Pick a few props from EuiBasicTableColumn to prevent none-functioning props (truncateText)
-export type WFOTableColumnsWithExtraNonDataFields<T> = WFOTableColumns<T> & {
+export type WfoTableColumnsWithExtraNonDataFields<T> = WfoTableColumns<T> & {
     [key: string]: EuiBasicTableColumn<T> & {
         field: string;
         name?: string;
     };
 };
 
-export type WFOTableColumns<T> = {
-    [Property in keyof T]: WFOTableDataColumnConfig<T, Property> & {
+export type WfoTableColumns<T> = {
+    [Property in keyof T]: WfoTableDataColumnConfig<T, Property> & {
         render?: (cellValue: T[Property], row: T) => ReactNode;
+        renderDetails?: (cellValue: T[Property], row: T) => ReactNode;
+        clipboardText?: (cellValue: T[Property], row: T) => string;
     };
 };
 
-export type WFOTableControlColumnConfig<T> = {
-    [key: string]: WFOBasicTableColumn<T> & {
+export type WfoTableControlColumnConfig<T> = {
+    [key: string]: WfoEuiBasicTableColumn<T> & {
         field: string;
         name?: string;
-        render: (row: T) => ReactNode;
+        render: (cellValue: never, row: T) => ReactNode;
     };
 };
 
-export type WFOTableColumnsWithControlColumns<T> = WFOTableColumns<T> &
-    WFOTableControlColumnConfig<T>;
-
 export type TableColumnKeys<T> = Array<keyof T>;
 
-export type WFODataSorting<T> = {
+export type WfoDataSorting<T> = {
     field: keyof T;
     sortOrder: SortOrder;
 };
 
+export type WfoDataSearch<T> = {
+    field: keyof T;
+    searchText: string;
+};
+
 export const getSortDirectionFromString = (
     sortOrder?: string,
 ): SortOrder | undefined => {

package/src/components/{WFOTable → WfoTable}/utils/constants.ts

@@ -8,10 +8,12 @@ export const COMPLETED_PROCESSES_LIST_TABLE_LOCAL_STORAGE_KEY =
 
 export const METADATA_RESOURCE_TYPES_TABLE_LOCAL_STORAGE_KEY =
     'metadataResourceTypesTable';
-export const METADATA_PRODUCTBLOCKS_TABLE_LOCAL_STORAGE_KEY =
+export const METADATA_PRODUCT_BLOCKS_TABLE_LOCAL_STORAGE_KEY =
     'metadataProductBlocksTable';
 export const METADATA_PRODUCT_TABLE_LOCAL_STORAGE_KEY = 'metadataProductTable';
 export const METADATA_WORKFLOWS_TABLE_LOCAL_STORAGE_KEY =
     'metadataWorkflowsTable';
 
 export const SUBSCRIPTIONS_TABLE_LOCAL_STORAGE_KEY = 'subscriptionsTable';
+
+export const TASK_LIST_TABLE_LOCAL_STORAGE_KEY = 'taskListTable';

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

@@ -0,0 +1,52 @@
+import { WfoTableColumns } from './columns';
+import { mapSortableAndFilterableValuesToTableColumnConfig } from './mapSortableAndFilterableValuesToTableColumnConfig';
+
+type TestObject = {
+    name: string;
+    age: number;
+};
+
+const tableColumnConfig: WfoTableColumns<TestObject> = {
+    name: {
+        field: 'name',
+        name: 'tesName',
+    },
+    age: {
+        field: 'age',
+        name: 'testAge',
+    },
+};
+
+describe('mapSortableAndFilterableValuesToTableColumnConfig', () => {
+    it('sets the sortable and filterable properties for the columnConfig object to true when the colum name is specified in the list', () => {
+        const sortableFieldNames = ['name', 'age', 'nonExistingFieldName'];
+        const filterableFieldNames = ['name', 'age', 'nonExistingFieldName'];
+
+        const result = mapSortableAndFilterableValuesToTableColumnConfig(
+            tableColumnConfig,
+            sortableFieldNames,
+            filterableFieldNames,
+        );
+
+        expect(result.name.sortable).toEqual(true);
+        expect(result.name.filterable).toEqual(true);
+        expect(result.age.sortable).toEqual(true);
+        expect(result.age.filterable).toEqual(true);
+    });
+
+    it('sets the sortable and filterable properties for the columnConfig object to false when the colum name is not specified in the list', () => {
+        const sortableFieldNames = ['nonExistingFieldName'];
+        const filterableFieldNames: string[] = [];
+
+        const result = mapSortableAndFilterableValuesToTableColumnConfig(
+            tableColumnConfig,
+            sortableFieldNames,
+            filterableFieldNames,
+        );
+
+        expect(result.name.sortable).toEqual(false);
+        expect(result.name.filterable).toEqual(false);
+        expect(result.age.sortable).toEqual(false);
+        expect(result.age.filterable).toEqual(false);
+    });
+});

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

@@ -0,0 +1,21 @@
+import { WfoTableColumns, WfoTableDataColumnConfig } from './columns';
+
+export function mapSortableAndFilterableValuesToTableColumnConfig<T>(
+    tableColumnConfig: WfoTableColumns<T>,
+    sortableFieldNames: string[],
+    filterableFieldNames: string[],
+): WfoTableColumns<T> {
+    const tableConfigValues =
+        Object.values<WfoTableDataColumnConfig<T, keyof T>>(tableColumnConfig);
+
+    const updatedTableConfigEntries = tableConfigValues.map((value) => [
+        value.field,
+        {
+            ...value,
+            sortable: sortableFieldNames.includes(value.field.toString()),
+            filterable: filterableFieldNames.includes(value.field.toString()),
+        },
+    ]);
+
+    return Object.fromEntries(updatedTableConfigEntries);
+}

package/src/components/{WFOTable → WfoTable}/utils/tableConfigPersistence.spec.ts

@@ -1,14 +1,14 @@
 import {
+    StoredTableConfig,
     getTableConfigFromLocalStorage,
     isValidLocalStorageTableConfig,
-    LocalStorageTableConfig,
 } from './tableConfigPersistence';
 
 // Note: for some testcases a typecast is needed on the testObject to bypass TSC errors
 describe('tableConfigPersistence', () => {
     describe('isValidLocalStorageTableConfig', () => {
         it('returns true if the input-object does contain LocalStorageTableConfig properties', () => {
-            const testObject: LocalStorageTableConfig<unknown> = {
+            const testObject: StoredTableConfig<unknown> = {
                 hiddenColumns: [],
                 selectedPageSize: 10,
             };
@@ -20,13 +20,13 @@ describe('tableConfigPersistence', () => {
             const testObject = {
                 hiddenColumns: undefined,
                 selectedPageSize: undefined,
-            } as unknown as LocalStorageTableConfig<unknown>;
+            } as unknown as StoredTableConfig<unknown>;
             const result = isValidLocalStorageTableConfig(testObject);
             expect(result).toEqual(false);
         });
 
         it('returns false if the input-object does not contain LocalStorageTableConfig properties', () => {
-            const testObject = {} as LocalStorageTableConfig<unknown>;
+            const testObject = {} as StoredTableConfig<unknown>;
             const result = isValidLocalStorageTableConfig(testObject);
             expect(result).toEqual(false);
         });

package/src/components/{WFOTable → WfoTable}/utils/tableConfigPersistence.ts

@@ -1,13 +1,14 @@
 import { TableColumnKeys } from './columns';
 
-export type LocalStorageTableConfig<T> = {
+export type StoredTableConfig<T> = {
     hiddenColumns: TableColumnKeys<T>;
     selectedPageSize: number;
 };
 
 export const isValidLocalStorageTableConfig = <T>(
-    object: LocalStorageTableConfig<T>,
-): object is LocalStorageTableConfig<T> =>
+    object: StoredTableConfig<T>,
+): object is StoredTableConfig<T> =>
+    typeof object === 'object' &&
     'hiddenColumns' in object &&
     object.hiddenColumns !== undefined &&
     'selectedPageSize' in object &&
@@ -15,32 +16,27 @@ export const isValidLocalStorageTableConfig = <T>(
 
 export const getTableConfigFromLocalStorage = <T>(
     key: string,
-): LocalStorageTableConfig<T> | undefined => {
-    try {
+): StoredTableConfig<T> | undefined => {
+    if (typeof window !== 'undefined' && window.localStorage) {
         const parsedJson = JSON.parse(localStorage.getItem(key) ?? '{}');
         return isValidLocalStorageTableConfig(parsedJson)
             ? parsedJson
             : undefined;
-    } catch (e) {
-        return undefined;
     }
+    return undefined;
 };
 
 export const setTableConfigToLocalStorage = <T>(
     key: string,
-    updatedTableConfig: LocalStorageTableConfig<T>,
+    updatedTableConfig: StoredTableConfig<T>,
 ) => {
-    try {
+    if (typeof window !== 'undefined' && window.localStorage) {
         localStorage.setItem(key, JSON.stringify(updatedTableConfig));
-    } catch {
-        // Todo: implement error handling
-        // https://github.com/workfloworchestrator/orchestrator-ui/issues/134
-        console.error(
-            `An error occurred while updating the default table config for "${key}" in local storage`,
-        );
     }
 };
 
 export const clearTableConfigFromLocalStorage = (key: string) => {
-    localStorage.removeItem(key);
+    if (typeof window !== 'undefined' && window.localStorage) {
+        localStorage.removeItem(key);
+    }
 };

package/src/components/{WFOTable → WfoTable}/utils/tableUtils.spec.ts

@@ -1,5 +1,5 @@
-import { determinePageIndex, determineNewSortOrder } from './tableUtils';
 import { SortOrder } from '../../../types';
+import { determineNewSortOrder, determinePageIndex } from './tableUtils';
 
 describe('tableUtils', () => {
     describe('determinePageIndex()', () => {