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

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

@@ -0,0 +1,178 @@
+import React, { ReactNode } from 'react';
+
+import { EuiBasicTable, EuiBasicTableColumn, Pagination } from '@elastic/eui';
+import { Criteria } from '@elastic/eui/src/components/basic_table/basic_table';
+
+import { useOrchestratorTheme } from '../../../hooks';
+import { SortOrder } from '../../../types';
+import type {
+    TableColumnKeys,
+    WfoDataSearch,
+    WfoDataSorting,
+} from '../utils/columns';
+import {
+    WFO_STATUS_COLOR_FIELD,
+    WfoTableControlColumnConfig,
+    WfoTableDataColumnConfig,
+} from '../utils/columns';
+import { WfoStatusColorField } from './WfoStatusColorField';
+import { WfoTableHeaderCell } from './WfoTableHeaderCell';
+import { getStyles } from './styles';
+
+export type WfoBasicTableColumns<T> = {
+    [Property in keyof T]: WfoTableDataColumnConfig<T, Property> & {
+        render?: (cellValue: T[Property], row: T) => ReactNode;
+    };
+};
+
+export type WfoBasicTableColumnsWithControlColumns<T> =
+    WfoBasicTableColumns<T> & WfoTableControlColumnConfig<T>;
+
+export type WfoBasicTableProps<T> = {
+    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;
+};
+
+export const WfoBasicTable = <T,>({
+    data,
+    columns,
+    hiddenColumns,
+    dataSorting,
+    pagination,
+    isLoading,
+    onCriteriaChange,
+    onUpdateDataSorting,
+    onDataSearch,
+    getStatusColorForRow,
+    isExpandable,
+    itemIdToExpandedRowMap,
+    itemId,
+}: WfoBasicTableProps<T>) => {
+    const { theme } = useOrchestratorTheme();
+    const { basicTableStyle, getStatusColumnStyle } = getStyles(theme);
+
+    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 = getStatusColorForRow
+        ? [basicTableStyle, getStatusColumnStyle(1)]
+        : basicTableStyle;
+
+    return (
+        <EuiBasicTable
+            css={tableStyling}
+            items={data}
+            columns={mapWfoTableColumnsToEuiColumns(
+                allTableColumns,
+                hiddenColumns,
+                dataSorting,
+                onUpdateDataSorting,
+                onDataSearch,
+            )}
+            pagination={pagination}
+            onChange={onCriteriaChange}
+            loading={isLoading}
+            {...(isExpandable && {
+                isExpandable,
+                itemIdToExpandedRowMap,
+                itemId,
+            })}
+        />
+    );
+};
+
+function mapWfoTableColumnsToEuiColumns<T>(
+    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 } =
+            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: true,
+            textOnly: true,
+        };
+    }
+
+    return Object.keys(tableColumns)
+        .filter(isVisibleColumn)
+        .map(mapColumnKeyToEuiColumn);
+}

package/src/components/{WFOTable/WFOSortDirectionIcon.tsx → WfoTable/WfoBasicTable/WfoSortDirectionIcon.tsx}

@@ -1,26 +1,26 @@
 import React, { FC } from 'react';
-import { useOrchestratorTheme } from '../../hooks/useOrchestratorTheme';
-import { WFOArrowNarrowDown } from '../../icons/WFOArrowNarrowDown';
-import { WFOArrowNarrowUp } from '../../icons/WFOArrowNarrowUp';
-import { SortOrder } from '../../types';
 
-export type WFOSortDirectionIconProps = {
+import { useOrchestratorTheme } from '../../../hooks';
+import { WfoArrowNarrowDown, WfoArrowNarrowUp } from '../../../icons';
+import { SortOrder } from '../../../types';
+
+export type WfoSortDirectionIconProps = {
     sortDirection: SortOrder;
 };
 
-export const WFOSortDirectionIcon: FC<WFOSortDirectionIconProps> = ({
+export const WfoSortDirectionIcon: FC<WfoSortDirectionIconProps> = ({
     sortDirection,
 }) => {
     const { theme } = useOrchestratorTheme();
 
     return sortDirection === SortOrder.ASC ? (
-        <WFOArrowNarrowUp
+        <WfoArrowNarrowUp
             color={theme.colors.subduedText}
             height={24}
             width={24}
         />
     ) : (
-        <WFOArrowNarrowDown
+        <WfoArrowNarrowDown
             color={theme.colors.subduedText}
             height={24}
             width={24}

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

@@ -0,0 +1,21 @@
+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/WfoTableHeaderCell.tsx

@@ -0,0 +1,120 @@
+import React, { FC, useState } from 'react';
+
+import { useTranslations } from 'next-intl';
+
+import {
+    EuiFieldSearch,
+    EuiHorizontalRule,
+    EuiPopover,
+    EuiText,
+    useGeneratedHtmlId,
+} from '@elastic/eui';
+
+import { useWithOrchestratorTheme } from '../../../hooks';
+import { SortOrder } from '../../../types';
+import { WfoSortButtons } from '../WfoSortButtons';
+import { WfoSortDirectionIcon } from './WfoSortDirectionIcon';
+import { getStyles } from './styles';
+
+export type WfoTableHeaderCellProps = {
+    fieldName: string;
+    sortOrder?: SortOrder;
+    onSetSortOrder?: (updatedSortOrder: SortOrder) => void;
+    onSearch?: (searchText: string) => void;
+    children: string;
+};
+
+export const WfoTableHeaderCell: FC<WfoTableHeaderCellProps> = ({
+    fieldName,
+    sortOrder,
+    children,
+    onSetSortOrder,
+    onSearch,
+}) => {
+    const {
+        headerCellContentStyle,
+        headerCellPopoverHeaderStyle,
+        headerCellPopoverHeaderTitleStyle,
+        headerCellPopoverContentStyle,
+        getHeaderCellButtonStyle,
+    } = useWithOrchestratorTheme(getStyles);
+    const t = useTranslations('common');
+
+    const isSortable = !!onSetSortOrder;
+    const isFilterable = !!onSearch;
+    const shouldShowPopover = isSortable || isFilterable;
+
+    const smallContextMenuPopoverId = useGeneratedHtmlId({
+        prefix: 'smallContextMenuPopover',
+    });
+
+    const [isPopoverOpen, setPopover] = useState(false);
+    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>
+    );
+
+    const WfoPopoverHeader = () => (
+        <div css={headerCellPopoverHeaderStyle}>
+            <EuiText size="xs" css={headerCellPopoverHeaderTitleStyle}>
+                {children}
+            </EuiText>
+            {isSortable && (
+                <WfoSortButtons
+                    sortOrder={sortOrder}
+                    onChangeSortOrder={handleChangeSortOrder}
+                />
+            )}
+        </div>
+    );
+
+    const WfoPopoverContent = () => (
+        <div css={headerCellPopoverContentStyle}>
+            <EuiFieldSearch
+                className={fieldName}
+                placeholder={t('search')}
+                onSearch={handleSearch}
+                isClearable={false}
+            />
+        </div>
+    );
+
+    return (
+        <EuiPopover
+            initialFocus={`.euiPanel .euiFieldSearch.${fieldName}`}
+            id={smallContextMenuPopoverId}
+            button={<WfoHeaderCellContentButton />}
+            isOpen={isPopoverOpen}
+            closePopover={closePopover}
+            panelPaddingSize="none"
+            anchorPosition="downLeft"
+        >
+            <WfoPopoverHeader />
+            {isFilterable && (
+                <>
+                    <EuiHorizontalRule margin="none" />
+                    <WfoPopoverContent />
+                </>
+            )}
+        </EuiPopover>
+    );
+};

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

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

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

@@ -0,0 +1,73 @@
+import { EuiThemeComputed } from '@elastic/eui/src/services/theme/types';
+import { css } from '@emotion/react';
+
+export const getStyles = (theme: EuiThemeComputed) => {
+    const radius = theme.border.radius.medium;
+
+    const basicTableStyle = css({
+        '.euiTableCellContent__text': {
+            display: 'flex',
+        },
+        thead: {
+            backgroundColor: theme.colors.lightShade,
+            'tr>:first-child': {
+                borderTopLeftRadius: radius,
+            },
+            'tr>:last-child': {
+                borderTopRightRadius: radius,
+            },
+        },
+        'tr.euiTableRow:hover': {
+            backgroundColor: theme.colors.lightestShade,
+        },
+    });
+
+    const getStatusColumnStyle = (columnNumber: number) =>
+        css({
+            [`tbody tr td:nth-child(${columnNumber}) .euiTableCellContent`]: {
+                padding: 0,
+                '.euiTableCellContent__text': {
+                    flex: 1,
+                    '> *': {
+                        paddingBlock: theme.base * 1.25,
+                    },
+                },
+            },
+        });
+
+    const headerCellContentStyle = css({
+        fontWeight: theme.font.weight.semiBold,
+    });
+
+    const headerCellPopoverHeaderStyle = css({
+        margin: theme.size.m,
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+    });
+
+    const headerCellPopoverHeaderTitleStyle = css({
+        fontWeight: theme.font.weight.medium,
+    });
+
+    const headerCellPopoverContentStyle = css({
+        margin: theme.size.m,
+    });
+
+    const getHeaderCellButtonStyle = (isSortable: boolean) =>
+        css({
+            display: 'flex',
+            alignItems: 'center',
+            cursor: isSortable ? 'pointer' : 'not-allowed',
+        });
+
+    return {
+        basicTableStyle,
+        headerCellContentStyle,
+        headerCellPopoverHeaderStyle,
+        headerCellPopoverHeaderTitleStyle,
+        headerCellPopoverContentStyle,
+        getHeaderCellButtonStyle,
+        getStatusColumnStyle,
+    };
+};

package/src/components/{WFOTable/WFODataGridTable/WFODataGridTable.stories.tsx → WfoTable/WfoDataGridTable/WfoDataGridTable.stories.tsx}

@@ -1,8 +1,10 @@
-import type { Meta } from '@storybook/react';
 import React, { useState } from 'react';
-import { WFODataSorting } from '../utils/columns';
+
+import type { Meta } from '@storybook/react';
+
 import { SortOrder } from '../../../types';
-import { WFODataGridTable } from './WFODataGridTable';
+import { WfoDataSorting } from '../utils/columns';
+import { WfoDataGridTable } from './WfoDataGridTable';
 
 const extractedArr = (arr, start, howMany) =>
     arr.filter((_, index) => index >= start && index < howMany + start);
@@ -32,7 +34,7 @@ const TableWithEvents = (args) => {
         setPageSize(updatedPageSize);
     };
 
-    const updateDataSorting = (dataSorting: WFODataSorting<unknown>) => {
+    const updateDataSorting = (dataSorting: WfoDataSorting<unknown>) => {
         setSorting(dataSorting);
 
         const sortData = args.data.sort((a, b) => {
@@ -46,7 +48,7 @@ const TableWithEvents = (args) => {
         setData(extractedArr(sortData, pageIndex, pageIndex + pageSize));
     };
     return (
-        <WFODataGridTable
+        <WfoDataGridTable
             {...args}
             data={data}
             pagination={{
@@ -62,9 +64,9 @@ const TableWithEvents = (args) => {
     );
 };
 
-const Story: Meta<typeof WFODataGridTable> = {
+const Story: Meta<typeof WfoDataGridTable> = {
     component: TableWithEvents,
-    title: 'Tables/WFODataGridTable',
+    title: 'Tables/WfoDataGridTable',
     parameters: { actions: { argTypesRegex: '^on*' } },
 };
 export default Story;

package/src/components/{WFOTable/WFODataGridTable/WFODataGridTable.tsx → WfoTable/WfoDataGridTable/WfoDataGridTable.tsx}

@@ -1,21 +1,24 @@
 import React from 'react';
+import { useRef, useState } from 'react';
+
 import {
     EuiDataGrid,
     EuiDataGridCellValueElementProps,
     EuiDataGridStyle,
 } from '@elastic/eui';
-import { useRef, useState } from 'react';
-import {
-    mapColumnSortToEuiDataGridSorting,
-    WFOControlColumn,
-    getInitialColumnOrder,
-    WFODataGridTableColumns,
-} from './WFOdataGridColumns';
 import {
     EuiDataGridControlColumn,
     EuiDataGridPaginationProps,
 } from '@elastic/eui/src/components/datagrid/data_grid_types';
-import { WFODataSorting, TableColumnKeys } from '../utils/columns';
+
+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;
@@ -35,19 +38,19 @@ export type Pagination = EuiDataGridPaginationProps & {
     totalRecords: number;
 };
 
-export type WFODataGridTableProps<T> = {
+export type WfoDataGridTableProps<T> = {
     data: T[];
     pagination: Pagination;
-    columns: WFODataGridTableColumns<T>;
-    leadingControlColumns?: WFOControlColumn<T>[];
-    trailingControlColumns?: WFOControlColumn<T>[];
+    columns: WfoDataGridTableColumns<T>;
+    leadingControlColumns?: WfoControlColumn<T>[];
+    trailingControlColumns?: WfoControlColumn<T>[];
     initialColumnOrder: TableColumnKeys<T>;
-    dataSorting?: WFODataSorting<T>;
+    dataSorting?: WfoDataSorting<T>;
     handleRowClick?: (row: T) => void;
-    updateDataSorting?: (updatedDataSorting: WFODataSorting<T>) => void;
+    updateDataSorting?: (updatedDataSorting: WfoDataSorting<T>) => void;
 };
 
-export const WFODataGridTable = <T,>({
+export const WfoDataGridTable = <T,>({
     data,
     pagination,
     columns,
@@ -57,7 +60,7 @@ export const WFODataGridTable = <T,>({
     dataSorting,
     handleRowClick,
     updateDataSorting,
-}: WFODataGridTableProps<T>) => {
+}: WfoDataGridTableProps<T>) => {
     const initialColumnOrderRef = useRef(
         getInitialColumnOrder(columns, initialColumnOrder),
     );
@@ -66,13 +69,14 @@ export const WFODataGridTable = <T,>({
         .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 { pageSize, pageIndex } = pagination;
         const rowIndexOnPage = rowIndex - pageIndex * pageSize;
 
         const dataRow = data[rowIndexOnPage];
@@ -96,13 +100,12 @@ export const WFODataGridTable = <T,>({
     };
 
     const mapControlColumnToEuiDataGridControlColumn: (
-        controlColumn: WFOControlColumn<T>,
+        controlColumn: WfoControlColumn<T>,
     ) => EuiDataGridControlColumn = ({ id, width, rowCellRender }) => ({
         id,
         width,
         headerCellRender: () => null,
         rowCellRender: ({ rowIndex }: { rowIndex: number }) => {
-            const { pageSize, pageIndex } = pagination;
             const rowIndexOnPage = rowIndex - pageIndex * pageSize;
 
             const dataRow = data[rowIndexOnPage];
@@ -120,8 +123,7 @@ export const WFODataGridTable = <T,>({
     );
 
     const gridHeightValue =
-        pagination.pageSize * EUI_DATA_GRID_ROW_HEIGHT +
-        EUI_DATA_GRID_HEIGHT_OFFSET;
+        pageSize * EUI_DATA_GRID_ROW_HEIGHT + EUI_DATA_GRID_HEIGHT_OFFSET;
 
     return (
         <EuiDataGrid

package/src/components/{WFOTable/WFODataGridTable/WFOdataGridColumns.spec.ts → WfoTable/WfoDataGridTable/WfodataGridColumns.spec.ts}

@@ -1,10 +1,10 @@
+import { SortOrder } from '../../../types';
+import { WfoDataSorting } from '../utils/columns';
 import {
+    WfoDataGridTableColumns,
     getInitialColumnOrder,
     mapColumnSortToEuiDataGridSorting,
-    WFODataGridTableColumns,
-} from './WFOdataGridColumns';
-import { WFODataSorting } from '../utils/columns';
-import { SortOrder } from '../../../types';
+} from './WfodataGridColumns';
 
 interface TestColumn {
     id: string;
@@ -12,7 +12,7 @@ interface TestColumn {
     date: string;
 }
 
-const columns: WFODataGridTableColumns<TestColumn> = {
+const columns: WfoDataGridTableColumns<TestColumn> = {
     id: {
         displayAsText: 'id',
         initialWidth: 100,
@@ -94,11 +94,11 @@ describe('dataGridColumns', () => {
 
     describe('columnSortToEuiDataGridSorting', () => {
         it('should return sort dict with columns and onsort', () => {
-            const sortBy: WFODataSorting<TestColumn> = {
+            const sortBy: WfoDataSorting<TestColumn> = {
                 field: 'id',
                 sortOrder: SortOrder.ASC,
             };
-            const onSort = (dataSorting: WFODataSorting<TestColumn>) => {
+            const onSort = (dataSorting: WfoDataSorting<TestColumn>) => {
                 sortBy.field = dataSorting.field;
                 sortBy.sortOrder = dataSorting.sortOrder;
             };

package/src/components/{WFOTable/WFODataGridTable/WFOdataGridColumns.ts → WfoTable/WfoDataGridTable/WfodataGridColumns.ts}

@@ -1,21 +1,22 @@
-import { EuiDataGridColumn } from '@elastic/eui';
 import { ReactNode } from 'react';
+
+import { EuiDataGridColumn } from '@elastic/eui';
 import {
     EuiDataGridControlColumn,
     EuiDataGridSorting,
 } from '@elastic/eui/src/components/datagrid/data_grid_types';
 
-import { WFODataSorting, TableColumnKeys } from '../utils/columns';
 import { SortOrder } from '../../../types';
+import { TableColumnKeys, WfoDataSorting } from '../utils/columns';
 
-export type WFODataGridTableColumns<T> = {
+export type WfoDataGridTableColumns<T> = {
     [Property in keyof T]: Omit<EuiDataGridColumn, 'id'> & {
         renderCell?: (cellValue: T[Property], row: T) => ReactNode;
         isHiddenByDefault?: boolean;
     };
 };
 
-export type WFOControlColumn<T> = Omit<
+export type WfoControlColumn<T> = Omit<
     EuiDataGridControlColumn,
     | 'rowCellRender'
     | 'headerCellRender'
@@ -27,7 +28,7 @@ export type WFOControlColumn<T> = Omit<
 };
 
 export const getInitialColumnOrder = <T>(
-    columns: WFODataGridTableColumns<T>,
+    columns: WfoDataGridTableColumns<T>,
     initialColumnOrder: TableColumnKeys<T>,
 ) => {
     const euiDataGridColumns: EuiDataGridColumn[] = Object.keys(columns).map(
@@ -53,8 +54,8 @@ export const getInitialColumnOrder = <T>(
 };
 
 export const mapColumnSortToEuiDataGridSorting = <T>(
-    columnSort?: WFODataSorting<T>,
-    updateColumnSort?: (columnSort: WFODataSorting<T>) => void,
+    columnSort?: WfoDataSorting<T>,
+    updateColumnSort?: (columnSort: WfoDataSorting<T>) => void,
 ): EuiDataGridSorting => ({
     columns: columnSort
         ? [

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

@@ -0,0 +1,11 @@
+import React, { FC } from 'react';
+
+import { getFirstUuidPart } from '../../../utils';
+
+export type WfoFirstUUIDPartProps = {
+    UUID: string;
+};
+
+export const WfoFirstPartUUID: FC<WfoFirstUUIDPartProps> = ({ UUID }) => (
+    <span title={UUID}>{getFirstUuidPart(UUID)}</span>
+);

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

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