@orchestrator-ui/orchestrator-ui-components 7.4.1 → 7.5.1

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

@@ -5,39 +5,31 @@ import { SortOrder } from '@/types';
 import { toObjectWithSortedKeys } from '@/utils';
 
 import {
-    ColumnType,
-    WfoTableColumnConfig,
-    WfoTableControlColumnConfigItem,
-    WfoTableDataColumnConfigItem,
+  ColumnType,
+  WfoTableColumnConfig,
+  WfoTableControlColumnConfigItem,
+  WfoTableDataColumnConfigItem,
 } from './WfoTable';
 
 export const getSortedVisibleColumns = <T extends object>(
-    columnConfig: WfoTableColumnConfig<T>,
-    columnOrder: TableColumnKeys<T>,
-    hiddenColumns: TableColumnKeys<T>,
+  columnConfig: WfoTableColumnConfig<T>,
+  columnOrder: TableColumnKeys<T>,
+  hiddenColumns: TableColumnKeys<T>,
 ) => {
-    const tableHeadersEntries: Array<
-        [
-            string,
-            (
-                | WfoTableControlColumnConfigItem<T>
-                | WfoTableDataColumnConfigItem<T, keyof T>
-            ),
-        ]
-    > = Object.entries(
-        toObjectWithSortedKeys(
-            columnConfig,
-            columnOrder.map((value) => value.toString()),
-        ),
-    );
+  const tableHeadersEntries: Array<
+    [string, WfoTableControlColumnConfigItem<T> | WfoTableDataColumnConfigItem<T, keyof T>]
+  > = Object.entries(
+    toObjectWithSortedKeys(
+      columnConfig,
+      columnOrder.map((value) => value.toString()),
+    ),
+  );
 
-    return tableHeadersEntries.filter(
-        ([columnId]) => !hiddenColumns.includes(columnId as keyof T),
-    );
+  return tableHeadersEntries.filter(([columnId]) => !hiddenColumns.includes(columnId as keyof T));
 };
 
 export const getUpdatedSortOrder = (currentSortOrder?: SortOrder) =>
-    currentSortOrder === SortOrder.ASC ? SortOrder.DESC : SortOrder.ASC;
+  currentSortOrder === SortOrder.ASC ? SortOrder.DESC : SortOrder.ASC;
 
 /**
  * Maps from WfoTableColumnConfig to WfoTableColumnConfig.
@@ -48,76 +40,65 @@ export const getUpdatedSortOrder = (currentSortOrder?: SortOrder) =>
  *
  * @returns updated WfoTableColumnConfig with isSortable and isFilterable set
  */
-export function mapSortableAndFilterableValuesToTableColumnConfig<
-    T extends object,
->(
-    tableColumnConfig: WfoTableColumnConfig<T>,
-    sortableFieldNames: string[] = [],
-    filterableFieldNames: string[] = [],
+export function mapSortableAndFilterableValuesToTableColumnConfig<T extends object>(
+  tableColumnConfig: WfoTableColumnConfig<T>,
+  sortableFieldNames: string[] = [],
+  filterableFieldNames: string[] = [],
 ): WfoTableColumnConfig<T> {
-    const tableColumnConfigEntries: [
-        string,
-        (
-            | WfoTableControlColumnConfigItem<T>
-            | WfoTableDataColumnConfigItem<T, keyof T>
-        ),
-    ][] = Object.entries(tableColumnConfig);
+  const tableColumnConfigEntries: [
+    string,
+    WfoTableControlColumnConfigItem<T> | WfoTableDataColumnConfigItem<T, keyof T>,
+  ][] = Object.entries(tableColumnConfig);
 
-    const tableColumnConfigUpdatedEntries = tableColumnConfigEntries.map(
-        ([key, value]) => {
-            if (value.columnType === ColumnType.DATA) {
-                return [
-                    key,
-                    {
-                        ...value,
-                        isSortable: sortableFieldNames.includes(key),
-                        isFilterable: filterableFieldNames.includes(key),
-                    },
-                ];
-            }
-
-            return [key, value];
+  const tableColumnConfigUpdatedEntries = tableColumnConfigEntries.map(([key, value]) => {
+    if (value.columnType === ColumnType.DATA) {
+      return [
+        key,
+        {
+          ...value,
+          isSortable: sortableFieldNames.includes(key),
+          isFilterable: filterableFieldNames.includes(key),
         },
-    );
+      ];
+    }
+
+    return [key, value];
+  });
 
-    return Object.fromEntries(tableColumnConfigUpdatedEntries);
+  return Object.fromEntries(tableColumnConfigUpdatedEntries);
 }
 
 export const getColumnWidthsFromConfig = <T extends object>(
-    columnConfig: WfoTableColumnConfig<T>,
+  columnConfig: WfoTableColumnConfig<T>,
 ): LocalColumnWidths => {
-    const columnEntries = Object.entries(columnConfig);
+  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);
+  return columnEntries.reduce((columnWidths, [key, config]) => {
+    if (config.columnType === ColumnType.DATA) {
+      columnWidths[key] = config.width ?? 'auto';
+    }
+    return columnWidths;
+  }, {} as LocalColumnWidths);
 };
 
 export const usePageIndexBoundsGuard = ({
-    dataLength,
-    isLoading,
-    pagination,
+  dataLength,
+  isLoading,
+  pagination,
 }: {
-    dataLength: number;
-    isLoading: boolean;
-    pagination?: Pagination;
+  dataLength: number;
+  isLoading: boolean;
+  pagination?: Pagination;
 }) => {
-    useEffect(() => {
-        if (!pagination) return;
+  useEffect(() => {
+    if (!pagination) return;
 
-        const { pageIndex, pageSize, totalItemCount, onChangePage } =
-            pagination;
+    const { pageIndex, pageSize, totalItemCount, onChangePage } = pagination;
 
-        const maxPage = Math.max(
-            0,
-            Math.floor(((totalItemCount ?? 1) - 1) / pageSize),
-        );
+    const maxPage = Math.max(0, Math.floor(((totalItemCount ?? 1) - 1) / pageSize));
 
-        if (!isLoading && dataLength === 0 && pageIndex > maxPage) {
-            onChangePage?.(maxPage);
-        }
-    }, [dataLength, isLoading, pagination]);
+    if (!isLoading && dataLength === 0 && pageIndex > maxPage) {
+      onChangePage?.(maxPage);
+    }
+  }, [dataLength, isLoading, pagination]);
 };

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

@@ -2,125 +2,102 @@ import React, { useState } from 'react';
 
 import { useTranslations } from 'next-intl';
 
-import {
-    EuiForm,
-    EuiFormRow,
-    EuiHorizontalRule,
-    EuiSelect,
-    EuiSpacer,
-    EuiSwitch,
-} from '@elastic/eui';
+import { EuiForm, EuiFormRow, EuiHorizontalRule, EuiSelect, EuiSpacer, EuiSwitch } from '@elastic/eui';
 
 import { WfoSettingsModal } from '@/components';
 import { getWfoTableSettingsModalStyles } from '@/components/WfoTable/WfoTableSettingsModal/styles';
 import { useWithOrchestratorTheme } from '@/hooks';
 
 export type TableSettingsColumnConfig<T> = {
-    field: keyof T;
-    name: string;
-    isVisible: boolean;
+  field: keyof T;
+  name: string;
+  isVisible: boolean;
 };
 
 export type TableSettingsConfig<T> = {
-    columns: TableSettingsColumnConfig<T>[];
-    selectedPageSize: number;
+  columns: TableSettingsColumnConfig<T>[];
+  selectedPageSize: number;
 };
 
 export type TableSettingsModalProps<T> = {
-    tableConfig: TableSettingsConfig<T>;
-    pageSizeOptions: number[];
-    onClose: () => void;
-    onUpdateTableConfig: (updatedTableConfig: TableSettingsConfig<T>) => void;
-    onResetToDefaults: () => void;
+  tableConfig: TableSettingsConfig<T>;
+  pageSizeOptions: number[];
+  onClose: () => void;
+  onUpdateTableConfig: (updatedTableConfig: TableSettingsConfig<T>) => void;
+  onResetToDefaults: () => void;
 };
 
 export const TableSettingsModal = <T,>({
-    tableConfig,
-    pageSizeOptions,
-    onUpdateTableConfig,
-    onResetToDefaults,
-    onClose,
+  tableConfig,
+  pageSizeOptions,
+  onUpdateTableConfig,
+  onResetToDefaults,
+  onClose,
 }: TableSettingsModalProps<T>) => {
-    const t = useTranslations('main');
-    const { formRowStyle, selectFieldStyle } = useWithOrchestratorTheme(
-        getWfoTableSettingsModalStyles,
-    );
+  const t = useTranslations('main');
+  const { formRowStyle, selectFieldStyle } = useWithOrchestratorTheme(getWfoTableSettingsModalStyles);
 
-    const [columns, setColumns] = useState(tableConfig.columns);
-    const [selectedPageSize, setSelectedPageSize] = useState(
-        tableConfig.selectedPageSize,
-    );
+  const [columns, setColumns] = useState(tableConfig.columns);
+  const [selectedPageSize, setSelectedPageSize] = useState(tableConfig.selectedPageSize);
 
-    const options = pageSizeOptions.map((pageSizeOption) => ({
-        value: pageSizeOption,
-        text: pageSizeOption.toString(),
-    }));
+  const options = pageSizeOptions.map((pageSizeOption) => ({
+    value: pageSizeOption,
+    text: pageSizeOption.toString(),
+  }));
 
-    const handleUpdateColumnVisibility = (field: keyof T) => {
-        const updatedColumns: TableSettingsColumnConfig<T>[] = columns.map(
-            (column) =>
-                column.field === field
-                    ? {
-                          ...column,
-                          isVisible: !column.isVisible,
-                      }
-                    : column,
-        );
-        setColumns(updatedColumns);
-    };
+  const handleUpdateColumnVisibility = (field: keyof T) => {
+    const updatedColumns: TableSettingsColumnConfig<T>[] = columns.map((column) =>
+      column.field === field ?
+        {
+          ...column,
+          isVisible: !column.isVisible,
+        }
+      : column,
+    );
+    setColumns(updatedColumns);
+  };
 
-    return (
-        <WfoSettingsModal
-            title={t('tableSettings')}
-            onClose={onClose}
-            onResetToDefaults={onResetToDefaults}
-            onUpdateTableConfig={() =>
-                onUpdateTableConfig({
-                    columns,
-                    selectedPageSize,
-                })
-            }
-        >
-            <EuiForm>
-                {columns.map(({ field, name, isVisible }) => (
-                    <div key={field.toString()}>
-                        <EuiFormRow
-                            display="columnCompressed"
-                            label={name}
-                            css={formRowStyle}
-                        >
-                            <EuiSwitch
-                                showLabel={false}
-                                label={name}
-                                checked={isVisible}
-                                onChange={() => {
-                                    handleUpdateColumnVisibility(field);
-                                }}
-                                compressed
-                            />
-                        </EuiFormRow>
-                        <EuiHorizontalRule margin="xs" />
-                    </div>
-                ))}
-                <EuiSpacer size="xs" />
+  return (
+    <WfoSettingsModal
+      title={t('tableSettings')}
+      onClose={onClose}
+      onResetToDefaults={onResetToDefaults}
+      onUpdateTableConfig={() =>
+        onUpdateTableConfig({
+          columns,
+          selectedPageSize,
+        })
+      }
+    >
+      <EuiForm>
+        {columns.map(({ field, name, isVisible }) => (
+          <div key={field.toString()}>
+            <EuiFormRow display="columnCompressed" label={name} css={formRowStyle}>
+              <EuiSwitch
+                showLabel={false}
+                label={name}
+                checked={isVisible}
+                onChange={() => {
+                  handleUpdateColumnVisibility(field);
+                }}
+                compressed
+              />
+            </EuiFormRow>
+            <EuiHorizontalRule margin="xs" />
+          </div>
+        ))}
+        <EuiSpacer size="xs" />
 
-                <EuiFormRow
-                    css={formRowStyle}
-                    hasEmptyLabelSpace
-                    label={t('numberOfRows')}
-                    display="columnCompressed"
-                >
-                    <EuiSelect
-                        css={selectFieldStyle}
-                        compressed
-                        onChange={(event) =>
-                            setSelectedPageSize(parseInt(event.target.value))
-                        }
-                        value={selectedPageSize}
-                        options={options}
-                    />
-                </EuiFormRow>
-            </EuiForm>
-        </WfoSettingsModal>
-    );
+        <EuiFormRow css={formRowStyle} hasEmptyLabelSpace label={t('numberOfRows')} display="columnCompressed">
+          <EuiSelect
+            css={selectFieldStyle}
+            compressed
+            onChange={(event) => setSelectedPageSize(parseInt(event.target.value))}
+            value={selectedPageSize}
+            options={options}
+          />
+        </EuiFormRow>
+      </EuiForm>
+    </WfoSettingsModal>
+  );
 };

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

@@ -3,20 +3,18 @@ import { css } from '@emotion/react';
 import { WfoThemeHelpers } from '@/hooks';
 import { getFormFieldsBaseStyle } from '@/theme';
 
-export const getWfoTableSettingsModalStyles = (
-    wfoThemeHelpers: WfoThemeHelpers,
-) => {
-    const { formFieldBaseStyle } = getFormFieldsBaseStyle(wfoThemeHelpers);
+export const getWfoTableSettingsModalStyles = (wfoThemeHelpers: WfoThemeHelpers) => {
+  const { formFieldBaseStyle } = getFormFieldsBaseStyle(wfoThemeHelpers);
 
-    const formRowStyle = css({
-        justifyContent: 'space-between',
-        '.euiFormLabel': {
-            color: wfoThemeHelpers.theme.colors.textParagraph,
-        },
-    });
+  const formRowStyle = css({
+    justifyContent: 'space-between',
+    '.euiFormLabel': {
+      color: wfoThemeHelpers.theme.colors.textParagraph,
+    },
+  });
 
-    return {
-        formRowStyle,
-        selectFieldStyle: formFieldBaseStyle,
-    };
+  return {
+    formRowStyle,
+    selectFieldStyle: formFieldBaseStyle,
+  };
 };

package/src/components/WfoTable/WfoTableWithFilter/updateQueryString.spec.ts

@@ -1,95 +1,93 @@
 import { updateQueryString } from './updateQueryString';
 
 describe('updateQueryString', () => {
-    it('adds a new field when the query string is empty', () => {
-        const queryString = '';
-        const fieldName = 'field1';
-        const value = 'value1';
+  it('adds a new field when the query string is empty', () => {
+    const queryString = '';
+    const fieldName = 'field1';
+    const value = 'value1';
 
-        const result = updateQueryString(queryString, fieldName, value);
+    const result = updateQueryString(queryString, fieldName, value);
 
-        expect(result).toBe('field1:value1');
-    });
+    expect(result).toBe('field1:value1');
+  });
 
-    it('adds a new field when the query string does not contain the field yet', () => {
-        const queryString = 'field1:value1';
-        const fieldName = 'field2';
-        const value = 'value2';
+  it('adds a new field when the query string does not contain the field yet', () => {
+    const queryString = 'field1:value1';
+    const fieldName = 'field2';
+    const value = 'value2';
 
-        const result = updateQueryString(queryString, fieldName, value);
+    const result = updateQueryString(queryString, fieldName, value);
 
-        expect(result).toBe('field1:value1 field2:value2');
-    });
+    expect(result).toBe('field1:value1 field2:value2');
+  });
 
-    it('updates an existing field with a single value in the query string', () => {
-        const queryString = 'field1:value1 field2:value2';
-        const fieldName = 'field1';
-        const value = 'value3';
+  it('updates an existing field with a single value in the query string', () => {
+    const queryString = 'field1:value1 field2:value2';
+    const fieldName = 'field1';
+    const value = 'value3';
 
-        const result = updateQueryString(queryString, fieldName, value);
+    const result = updateQueryString(queryString, fieldName, value);
 
-        expect(result).toBe('field1:(value1|value3) field2:value2');
-    });
+    expect(result).toBe('field1:(value1|value3) field2:value2');
+  });
 
-    it('updates an existing field with with already 2 values in the query string', () => {
-        const queryString = 'field1:(value1|value3) field2:value2';
-        const fieldName = 'field1';
-        const value = 'value4';
+  it('updates an existing field with with already 2 values in the query string', () => {
+    const queryString = 'field1:(value1|value3) field2:value2';
+    const fieldName = 'field1';
+    const value = 'value4';
 
-        const result = updateQueryString(queryString, fieldName, value);
+    const result = updateQueryString(queryString, fieldName, value);
 
-        expect(result).toBe('field1:(value1|value3|value4) field2:value2');
-    });
+    expect(result).toBe('field1:(value1|value3|value4) field2:value2');
+  });
 
-    it('uses quotes when the added value contains spaces', () => {
-        const queryString = 'field1:(value1|value3) field2:value2';
-        const fieldName = 'field1';
-        const value = 'value 4';
+  it('uses quotes when the added value contains spaces', () => {
+    const queryString = 'field1:(value1|value3) field2:value2';
+    const fieldName = 'field1';
+    const value = 'value 4';
 
-        const result = updateQueryString(queryString, fieldName, value);
+    const result = updateQueryString(queryString, fieldName, value);
 
-        expect(result).toBe('field1:(value1|value3|"value 4") field2:value2');
-    });
+    expect(result).toBe('field1:(value1|value3|"value 4") field2:value2');
+  });
 
-    it('adds a new value to an exising field where one existing value contains spaces', () => {
-        const queryString = 'field1:("value 1"|value3) field2:value2';
-        const fieldName = 'field1';
-        const value = 'value 4';
+  it('adds a new value to an exising field where one existing value contains spaces', () => {
+    const queryString = 'field1:("value 1"|value3) field2:value2';
+    const fieldName = 'field1';
+    const value = 'value 4';
 
-        const result = updateQueryString(queryString, fieldName, value);
+    const result = updateQueryString(queryString, fieldName, value);
 
-        expect(result).toBe(
-            'field1:("value 1"|value3|"value 4") field2:value2',
-        );
-    });
+    expect(result).toBe('field1:("value 1"|value3|"value 4") field2:value2');
+  });
 
-    it('returns the same query string when the given field name is an empty string', () => {
-        const queryString = 'field1:value1 field2:value2';
-        const fieldName = 'field1';
-        const value = '';
+  it('returns the same query string when the given field name is an empty string', () => {
+    const queryString = 'field1:value1 field2:value2';
+    const fieldName = 'field1';
+    const value = '';
 
-        const result = updateQueryString(queryString, fieldName, value);
+    const result = updateQueryString(queryString, fieldName, value);
 
-        expect(result).toBe('field1:value1 field2:value2');
-    });
+    expect(result).toBe('field1:value1 field2:value2');
+  });
 
-    it('returns the same query string when the given value is an empty string', () => {
-        const queryString = 'field1:value1 field2:value2';
-        const fieldName = '';
-        const value = 'value 3';
+  it('returns the same query string when the given value is an empty string', () => {
+    const queryString = 'field1:value1 field2:value2';
+    const fieldName = '';
+    const value = 'value 3';
 
-        const result = updateQueryString(queryString, fieldName, value);
+    const result = updateQueryString(queryString, fieldName, value);
 
-        expect(result).toBe('field1:value1 field2:value2');
-    });
+    expect(result).toBe('field1:value1 field2:value2');
+  });
 
-    it('updates an existing field ignoring case in the field name', () => {
-        const queryString = 'field1:value1 field2:value2';
-        const fieldName = 'Field1';
-        const value = 'value3';
+  it('updates an existing field ignoring case in the field name', () => {
+    const queryString = 'field1:value1 field2:value2';
+    const fieldName = 'Field1';
+    const value = 'value3';
 
-        const result = updateQueryString(queryString, fieldName, value);
+    const result = updateQueryString(queryString, fieldName, value);
 
-        expect(result).toBe('field1:(value1|value3) field2:value2');
-    });
+    expect(result).toBe('field1:(value1|value3) field2:value2');
+  });
 });