@orchestrator-ui/orchestrator-ui-components 1.38.2 → 2.0.0

package/src/utils/index.ts

@@ -1,15 +1,17 @@
 export * from './csvDownload';
 export * from './date';
 export * from './environmentVariables';
+export * from './filterData';
+export * from './getDefaultTableConfig';
 export * from './getEnvironmentVariables';
+export * from './getObjectKeys';
 export * from './getProductNamesFromProcess';
 export * from './getQueryVariablesForExport';
 export * from './getStatusBadgeColor';
 export * from './getTypedFieldFromObject';
 export * from './onlyUnique';
-export * from './uuid';
+export * from './optionalArray';
 export * from './resultFlattener';
 export * from './strings';
-export * from './optionalArray';
-export * from './filterData';
 export * from './toObjectWithSortedKeys';
+export * from './uuid';

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

@@ -1,194 +0,0 @@
-import React, { ReactNode } from 'react';
-
-import { useTranslations } from 'next-intl';
-
-import { EuiBasicTable, EuiBasicTableColumn, Pagination } from '@elastic/eui';
-import { Criteria } from '@elastic/eui/src/components/basic_table/basic_table';
-import { SerializedStyles } from '@emotion/react';
-
-import type {
-    TableColumnKeys,
-    WfoDataSearch,
-    WfoDataSorting,
-} from '@/components';
-import {
-    WFO_STATUS_COLOR_FIELD,
-    WfoTableControlColumnConfig,
-    WfoTableDataColumnConfig,
-} from '@/components';
-import { WfoStatusColorField } from '@/components';
-import { WfoTableHeaderCell } from '@/components';
-import { useOrchestratorTheme, useWithOrchestratorTheme } from '@/hooks';
-import { SortOrder } from '@/types';
-
-import { getWfoBasicTableStyles } from './styles';
-
-export type WfoBasicTableColumns<T extends object> = {
-    [Property in keyof T]: WfoTableDataColumnConfig<T, Property> & {
-        render?: (cellValue: T[Property], row: T) => ReactNode;
-    };
-};
-
-export type WfoBasicTableColumnsWithControlColumns<T extends object> =
-    WfoBasicTableColumns<T> & WfoTableControlColumnConfig<T>;
-
-export type WfoBasicTableProps<T extends object> = {
-    data: T[];
-    columns:
-        | WfoBasicTableColumnsWithControlColumns<T>
-        | WfoBasicTableColumns<T>;
-    hiddenColumns?: TableColumnKeys<T>;
-    dataSorting?: WfoDataSorting<T>;
-    pagination?: Pagination;
-    isLoading?: boolean;
-    onCriteriaChange?: (criteria: Criteria<T>) => void;
-    onUpdateDataSorting?: (updatedDataSorting: WfoDataSorting<T>) => void;
-    onDataSearch?: (updatedDataSearch: WfoDataSearch<T>) => void;
-    getStatusColorForRow?: (row: T) => string;
-    isExpandable?: boolean;
-    itemIdToExpandedRowMap?: Record<string, ReactNode>;
-    itemId?: string;
-    customTableStyle?: SerializedStyles;
-};
-
-export const WfoBasicTable = <T extends object>({
-    data,
-    columns,
-    hiddenColumns,
-    dataSorting,
-    pagination,
-    isLoading,
-    onCriteriaChange,
-    onUpdateDataSorting,
-    onDataSearch,
-    getStatusColorForRow,
-    isExpandable,
-    itemIdToExpandedRowMap,
-    itemId,
-    customTableStyle,
-}: WfoBasicTableProps<T>) => {
-    const { theme } = useOrchestratorTheme();
-    const { basicTableStyle } = useWithOrchestratorTheme(
-        getWfoBasicTableStyles,
-    );
-
-    const t = useTranslations('common');
-
-    const statusColorColumn: WfoTableControlColumnConfig<T> = {
-        statusColorField: {
-            field: WFO_STATUS_COLOR_FIELD,
-            name: '',
-            width: theme.size.xs,
-            render: (_, row) =>
-                getStatusColorForRow ? (
-                    <WfoStatusColorField color={getStatusColorForRow(row)} />
-                ) : (
-                    <></>
-                ),
-        },
-    };
-
-    const allTableColumns:
-        | WfoBasicTableColumnsWithControlColumns<T>
-        | WfoBasicTableColumns<T> = getStatusColorForRow
-        ? { ...statusColorColumn, ...columns }
-        : { ...columns };
-
-    const tableStyling = customTableStyle ?? basicTableStyle;
-
-    return (
-        <EuiBasicTable
-            css={tableStyling}
-            items={data}
-            noItemsMessage={isLoading ? t('loading') : t('noItemsFound')}
-            columns={mapWfoTableColumnsToEuiColumns(
-                allTableColumns,
-                hiddenColumns,
-                dataSorting,
-                onUpdateDataSorting,
-                onDataSearch,
-            )}
-            pagination={pagination}
-            onChange={onCriteriaChange}
-            loading={isLoading}
-            {...(isExpandable && {
-                isExpandable,
-                itemIdToExpandedRowMap,
-                itemId,
-            })}
-        />
-    );
-};
-
-function mapWfoTableColumnsToEuiColumns<T extends object>(
-    tableColumns: WfoBasicTableColumns<T>,
-    hiddenColumns?: TableColumnKeys<T>,
-    dataSorting?: WfoDataSorting<T>,
-    onDataSort?: (updatedDataSorting: WfoDataSorting<T>) => void,
-    onDataSearch?: (updatedDataSearch: WfoDataSearch<T>) => void,
-): EuiBasicTableColumn<T>[] {
-    function isVisibleColumn(columnKey: string) {
-        return !hiddenColumns?.includes(columnKey as keyof T);
-    }
-
-    function mapColumnKeyToEuiColumn(colKey: string): EuiBasicTableColumn<T> {
-        const typedColumnKey = colKey as keyof T;
-        const column: WfoBasicTableColumns<T>[keyof T] =
-            tableColumns[typedColumnKey];
-        const {
-            name,
-            render,
-            width,
-            description,
-            sortable,
-            filterable,
-            truncateText,
-        } = column;
-
-        // In most cases columns are sortable and filterable, making them optional saves some lines in configuring the table
-        const isSortable = sortable ?? true;
-        const isFilterable = filterable ?? true;
-
-        const sortOrder =
-            dataSorting?.field === colKey ? dataSorting.sortOrder : undefined;
-
-        const handleOnSetSortOrder = (updatedSortOrder: SortOrder) =>
-            onDataSort?.({
-                field: typedColumnKey,
-                sortOrder: updatedSortOrder,
-            });
-
-        const handleOnSearch = (searchText: string) =>
-            onDataSearch?.({
-                field: typedColumnKey,
-                searchText,
-            });
-
-        // Not spreading the column object here as it might contain additional props.
-        // EUI does not handle extra props well.
-        return {
-            render,
-            width,
-            description,
-            field: typedColumnKey,
-            name: name && (
-                <WfoTableHeaderCell
-                    fieldName={typedColumnKey.toString()}
-                    sortOrder={sortOrder}
-                    onSetSortOrder={
-                        isSortable ? handleOnSetSortOrder : undefined
-                    }
-                    onSearch={isFilterable ? handleOnSearch : undefined}
-                >
-                    {name}
-                </WfoTableHeaderCell>
-            ),
-            truncateText: truncateText ?? true,
-            textOnly: true,
-        };
-    }
-
-    return Object.keys(tableColumns)
-        .filter(isVisibleColumn)
-        .map(mapColumnKeyToEuiColumn);
-}

package/src/components/WfoTable/WfoBasicTable/WfoStatusColorField.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-
-import { EuiFlexItem, tint } from '@elastic/eui';
-
-export type WfoStatusColorFieldProps = {
-    color: string;
-};
-
-const toStatusColorFieldColor = (color: string) => tint(color, 0.3);
-
-export const WfoStatusColorField = ({ color }: WfoStatusColorFieldProps) => {
-    return (
-        <EuiFlexItem
-            css={{
-                backgroundColor: toStatusColorFieldColor(color),
-                height: '100%',
-                width: '100%',
-            }}
-        ></EuiFlexItem>
-    );
-};

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

@@ -1,5 +0,0 @@
-export * from './WfoBasicTable';
-export * from './WfoSortDirectionIcon';
-export * from './WfoTableHeaderCell';
-export * from './WfoStatusColorField';
-export * from './styles';

package/src/components/WfoTable/WfoDataGridTable/WfoDataGridTable.stories.tsx

@@ -1,136 +0,0 @@
-import React, { useState } from 'react';
-
-import type { Meta } from '@storybook/react';
-
-import { SortOrder } from '../../../types';
-import { WfoDataSorting } from '../utils/columns';
-import { WfoDataGridTable } from './WfoDataGridTable';
-
-const extractedArr = (arr, start, howMany) =>
-    arr.filter((_, index) => index >= start && index < howMany + start);
-
-const TableWithEvents = (args) => {
-    const [data, setData] = useState(
-        extractedArr(
-            args.data,
-            args.pagination.pageIndex,
-            args.pagination.pageSize,
-        ),
-    );
-    const [pageSize, setPageSize] = useState(args.pagination.pageSize);
-    const [pageIndex, setPageIndex] = useState(args.pagination.pageIndex);
-    const [sorting, setSorting] = useState(args.sorting);
-
-    const onChangePage = (updatedPageIndex: number) => {
-        const pageI = updatedPageIndex * pageSize;
-        setData(extractedArr(args.data, pageI, pageI + pageSize));
-        setPageIndex(updatedPageIndex);
-    };
-
-    const onChangeItemsPerPage = (updatedPageSize: number) => {
-        setData(
-            extractedArr(args.data, pageIndex, pageIndex + updatedPageSize),
-        );
-        setPageSize(updatedPageSize);
-    };
-
-    const updateDataSorting = (dataSorting: WfoDataSorting<unknown>) => {
-        setSorting(dataSorting);
-
-        const sortData = args.data.sort((a, b) => {
-            const aColumn = a[dataSorting.columnId];
-            const bColumn = b[dataSorting.columnId];
-            if (dataSorting.sortDirection === SortOrder.Asc) {
-                return aColumn > bColumn ? 1 : bColumn > aColumn ? -1 : 0;
-            }
-            return bColumn > aColumn ? 1 : aColumn > bColumn ? -1 : 0;
-        });
-        setData(extractedArr(sortData, pageIndex, pageIndex + pageSize));
-    };
-    return (
-        <WfoDataGridTable
-            {...args}
-            data={data}
-            pagination={{
-                ...args.pagination,
-                pageIndex,
-                pageSize,
-                onChangeItemsPerPage,
-                onChangePage,
-            }}
-            dataSorting={sorting}
-            updateDataSorting={updateDataSorting}
-        />
-    );
-};
-
-const Story: Meta<typeof WfoDataGridTable> = {
-    component: TableWithEvents,
-    title: 'Tables/WfoDataGridTable',
-    parameters: { actions: { argTypesRegex: '^on*' } },
-};
-export default Story;
-
-const columns = {
-    id: {
-        displayAsText: 'id',
-        initialWidth: 100,
-    },
-    title: {
-        displayAsText: 'title',
-        initialWidth: 200,
-    },
-    date: {
-        displayAsText: 'date',
-        initialWidth: 200,
-    },
-};
-
-const initialColumnOrder = ['id', 'title', 'date'];
-
-const date = new Date('2023-01-01');
-const data = [
-    { id: 1, title: 'test 1', date: date.toISOString().split('T')[0] },
-];
-
-for (let i = 2; i <= 110; i++) {
-    date.setDate(date.getDate() + 1);
-    data.push({
-        id: i,
-        title: `test ${i}`,
-        date: date.toISOString().split('T')[0],
-    });
-}
-
-const pagination = {
-    pageSize: 10,
-    pageIndex: 0,
-    pageSizeOptions: [5, 10, 15, 20, 25, 100],
-    totalRecords: data.length,
-};
-
-export const Primary = {
-    args: {
-        data,
-        columns,
-        initialColumnOrder,
-        pagination,
-        sorting: {
-            columnId: 'id',
-            sortDirection: 'ASC',
-        },
-    },
-};
-
-export const Secondary = {
-    args: {
-        data,
-        columns,
-        initialColumnOrder,
-        pagination,
-        sorting: {
-            columnId: 'id',
-            sortDirection: 'ASC',
-        },
-    },
-};

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

@@ -1,146 +0,0 @@
-import React from 'react';
-import { useRef, useState } from 'react';
-
-import {
-    EuiDataGrid,
-    EuiDataGridCellValueElementProps,
-    EuiDataGridStyle,
-} from '@elastic/eui';
-import {
-    EuiDataGridControlColumn,
-    EuiDataGridPaginationProps,
-} from '@elastic/eui/src/components/datagrid/data_grid_types';
-
-import { TableColumnKeys, WfoDataSorting } from '../utils/columns';
-import { DEFAULT_PAGE_SIZE } from '../utils/constants';
-import {
-    WfoControlColumn,
-    WfoDataGridTableColumns,
-    getInitialColumnOrder,
-    mapColumnSortToEuiDataGridSorting,
-} from './WfodataGridColumns';
-
-// Total height of grid button bar, table header and pagination bar
-const EUI_DATA_GRID_HEIGHT_OFFSET = 103;
-const EUI_DATA_GRID_ROW_HEIGHT = 40;
-
-const GRID_STYLE: EuiDataGridStyle = {
-    border: 'horizontal',
-    stripes: false,
-    rowHover: 'highlight',
-    header: 'shade',
-    cellPadding: 'l',
-    fontSize: 'm',
-    footer: 'overline',
-};
-
-export type Pagination = EuiDataGridPaginationProps & {
-    totalRecords: number;
-};
-
-export type WfoDataGridTableProps<T> = {
-    data: T[];
-    pagination: Pagination;
-    columns: WfoDataGridTableColumns<T>;
-    leadingControlColumns?: WfoControlColumn<T>[];
-    trailingControlColumns?: WfoControlColumn<T>[];
-    initialColumnOrder: TableColumnKeys<T>;
-    dataSorting?: WfoDataSorting<T>;
-    handleRowClick?: (row: T) => void;
-    updateDataSorting?: (updatedDataSorting: WfoDataSorting<T>) => void;
-};
-
-export const WfoDataGridTable = <T,>({
-    data,
-    pagination,
-    columns,
-    leadingControlColumns,
-    trailingControlColumns,
-    initialColumnOrder,
-    dataSorting,
-    handleRowClick,
-    updateDataSorting,
-}: WfoDataGridTableProps<T>) => {
-    const initialColumnOrderRef = useRef(
-        getInitialColumnOrder(columns, initialColumnOrder),
-    );
-
-    const defaultVisibleColumns: string[] = initialColumnOrder
-        .filter((columnId) => !columns[columnId].isHiddenByDefault)
-        .map((columnId) => columnId.toString());
-    const [visibleColumns, setVisibleColumns] = useState(defaultVisibleColumns);
-    const pageSize = pagination.pageSize ?? DEFAULT_PAGE_SIZE;
-    const { pageIndex } = pagination;
-
-    const renderCellValue = ({
-        rowIndex,
-        columnId,
-        setCellProps,
-    }: EuiDataGridCellValueElementProps) => {
-        const rowIndexOnPage = rowIndex - pageIndex * pageSize;
-
-        const dataRow = data[rowIndexOnPage];
-        if (!dataRow) {
-            return;
-        }
-
-        const column = columns[columnId as keyof T];
-        const cellValue = dataRow[columnId as keyof T];
-
-        if (handleRowClick) {
-            setCellProps({
-                css: { cursor: 'pointer' },
-                onClick: () => handleRowClick(dataRow),
-            });
-        }
-
-        return column.renderCell
-            ? column.renderCell(cellValue, dataRow)
-            : `${cellValue}`;
-    };
-
-    const mapControlColumnToEuiDataGridControlColumn: (
-        controlColumn: WfoControlColumn<T>,
-    ) => EuiDataGridControlColumn = ({ id, width, rowCellRender }) => ({
-        id,
-        width,
-        headerCellRender: () => null,
-        rowCellRender: ({ rowIndex }: { rowIndex: number }) => {
-            const rowIndexOnPage = rowIndex - pageIndex * pageSize;
-
-            const dataRow = data[rowIndexOnPage];
-
-            return rowCellRender(dataRow);
-        },
-    });
-
-    const euiDataGridLeadingControlColumns = leadingControlColumns?.map(
-        mapControlColumnToEuiDataGridControlColumn,
-    );
-
-    const euiDataGridTrailingControlColumns = trailingControlColumns?.map(
-        mapControlColumnToEuiDataGridControlColumn,
-    );
-
-    const gridHeightValue =
-        pageSize * EUI_DATA_GRID_ROW_HEIGHT + EUI_DATA_GRID_HEIGHT_OFFSET;
-
-    return (
-        <EuiDataGrid
-            aria-label="Data Grid"
-            columns={initialColumnOrderRef.current}
-            leadingControlColumns={euiDataGridLeadingControlColumns}
-            trailingControlColumns={euiDataGridTrailingControlColumns}
-            height={`${gridHeightValue}px`}
-            gridStyle={GRID_STYLE}
-            columnVisibility={{ visibleColumns, setVisibleColumns }}
-            pagination={pagination}
-            sorting={mapColumnSortToEuiDataGridSorting(
-                dataSorting,
-                updateDataSorting,
-            )}
-            rowCount={pagination.totalRecords}
-            renderCellValue={renderCellValue}
-        />
-    );
-};

package/src/components/WfoTable/WfoDataGridTable/WfodataGridColumns.spec.ts

@@ -1,113 +0,0 @@
-import { SortOrder } from '../../../types';
-import { WfoDataSorting } from '../utils/columns';
-import {
-    WfoDataGridTableColumns,
-    getInitialColumnOrder,
-    mapColumnSortToEuiDataGridSorting,
-} from './WfodataGridColumns';
-
-interface TestColumn {
-    id: string;
-    title: string;
-    date: string;
-}
-
-const columns: WfoDataGridTableColumns<TestColumn> = {
-    id: {
-        displayAsText: 'id',
-        initialWidth: 100,
-    },
-    title: {
-        displayAsText: 'title',
-        initialWidth: 200,
-    },
-    date: {
-        displayAsText: 'date',
-        initialWidth: 200,
-    },
-};
-
-describe('dataGridColumns', () => {
-    describe('getInitialColumnOrder', () => {
-        it('returns columns sorted by initialColumnOrder (id, title, date)', () => {
-            const initialColumnOrder: Array<keyof TestColumn> = [
-                'id',
-                'title',
-                'date',
-            ];
-
-            const result = getInitialColumnOrder(columns, initialColumnOrder);
-
-            expect(result).toEqual([
-                {
-                    displayAsText: 'id',
-                    id: 'id',
-                    initialWidth: 100,
-                    isExpandable: false,
-                },
-                {
-                    displayAsText: 'title',
-                    id: 'title',
-                    initialWidth: 200,
-                    isExpandable: false,
-                },
-                {
-                    displayAsText: 'date',
-                    id: 'date',
-                    initialWidth: 200,
-                    isExpandable: false,
-                },
-            ]);
-        });
-
-        it('should return columns sorted by (date, id, title)', () => {
-            const initialColumnOrder: Array<keyof TestColumn> = [
-                'date',
-                'id',
-                'title',
-            ];
-
-            const result = getInitialColumnOrder(columns, initialColumnOrder);
-
-            expect(result).toEqual([
-                {
-                    displayAsText: 'date',
-                    id: 'date',
-                    initialWidth: 200,
-                    isExpandable: false,
-                },
-                {
-                    displayAsText: 'id',
-                    id: 'id',
-                    initialWidth: 100,
-                    isExpandable: false,
-                },
-                {
-                    displayAsText: 'title',
-                    id: 'title',
-                    initialWidth: 200,
-                    isExpandable: false,
-                },
-            ]);
-        });
-    });
-
-    describe('columnSortToEuiDataGridSorting', () => {
-        it('should return sort dict with columns and onsort', () => {
-            const sortBy: WfoDataSorting<TestColumn> = {
-                field: 'id',
-                sortOrder: SortOrder.ASC,
-            };
-            const onSort = (dataSorting: WfoDataSorting<TestColumn>) => {
-                sortBy.field = dataSorting.field;
-                sortBy.sortOrder = dataSorting.sortOrder;
-            };
-
-            const sorting = mapColumnSortToEuiDataGridSorting(sortBy, onSort);
-            expect(sorting.columns).toEqual([{ id: 'id', direction: 'asc' }]);
-
-            sorting.onSort([{ id: 'id', direction: 'desc' }]);
-            expect(sortBy).toEqual({ field: 'id', sortOrder: 'DESC' });
-        });
-    });
-});