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

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

@@ -8,130 +8,130 @@ export const HEADER_CELL_SORT_BUTTON_CLASS = 'headerCellSortButton';
 export const SORTABLE_ICON_CLASS = 'sortableIcon';
 
 export const getWfoBasicTableStyles = ({ theme }: WfoThemeHelpers) => {
-    const radius = theme.border.radius.medium;
-
-    const basicTableStyle = css({
-        table: {
-            backgroundColor: theme.colors.backgroundBaseNeutral,
-        },
-
-        // The lines between rows
-        'tr>td': {
-            borderColor: theme.colors.borderBaseSubdued,
-        },
-
+  const radius = theme.border.radius.medium;
+
+  const basicTableStyle = css({
+    table: {
+      backgroundColor: theme.colors.backgroundBaseNeutral,
+    },
+
+    // The lines between rows
+    'tr>td': {
+      borderColor: theme.colors.borderBaseSubdued,
+    },
+
+    '.euiTableCellContent__text': {
+      display: 'flex',
+      color: theme.colors.textParagraph,
+    },
+    thead: {
+      backgroundColor: theme.colors.borderBaseSubdued,
+      'tr>:first-child': {
+        borderTopLeftRadius: radius,
+      },
+      'tr>:last-child': {
+        borderTopRightRadius: radius,
+      },
+    },
+    tbody: {
+      'tr.euiTableRow:hover': {
+        backgroundColor: theme.colors.backgroundBasePlain,
+      },
+    },
+  });
+
+  const getStatusColumnStyle = (columnNumber: number) =>
+    css(basicTableStyle, {
+      [`tbody tr td:nth-child(${columnNumber}) .euiTableCellContent`]: {
+        padding: 0,
         '.euiTableCellContent__text': {
-            display: 'flex',
-            color: theme.colors.textParagraph,
-        },
-        thead: {
-            backgroundColor: theme.colors.borderBaseSubdued,
-            'tr>:first-child': {
-                borderTopLeftRadius: radius,
-            },
-            'tr>:last-child': {
-                borderTopRightRadius: radius,
-            },
-        },
-        tbody: {
-            'tr.euiTableRow:hover': {
-                backgroundColor: theme.colors.backgroundBasePlain,
-            },
-        },
-    });
-
-    const getStatusColumnStyle = (columnNumber: number) =>
-        css(basicTableStyle, {
-            [`tbody tr td:nth-child(${columnNumber}) .euiTableCellContent`]: {
-                padding: 0,
-                '.euiTableCellContent__text': {
-                    flex: 1,
-                    '> *': {
-                        paddingBlock: theme.base * 1.25,
-                    },
-                },
-            },
-        });
-
-    const dropDownTableStyle = css({
-        thead: {
-            backgroundColor: theme.colors.backgroundBasePlain,
-            'tr>:first-child': {
-                borderTopLeftRadius: 0,
-            },
-            'tr>:last-child': {
-                borderTopRightRadius: 0,
-            },
+          flex: 1,
+          '> *': {
+            paddingBlock: theme.base * 1.25,
+          },
         },
-        tbody: {
-            backgroundColor: theme.colors.backgroundBasePlain,
-        },
-    });
-
-    const expandableTableStyle = css([
-        basicTableStyle,
-        {
-            'tr.euiTableRow-isExpandedRow': {
-                backgroundColor: theme.colors.backgroundBasePlain,
-            },
-        },
-    ]);
-
-    const headerCellStyle = css({
-        display: 'flex',
-        justifyContent: 'flex-start',
-        alignItems: 'center',
-        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',
-        justifyContent: 'space-between',
-        alignItems: 'center',
+  const dropDownTableStyle = css({
+    thead: {
+      backgroundColor: theme.colors.backgroundBasePlain,
+      'tr>:first-child': {
+        borderTopLeftRadius: 0,
+      },
+      'tr>:last-child': {
+        borderTopRightRadius: 0,
+      },
+    },
+    tbody: {
+      backgroundColor: theme.colors.backgroundBasePlain,
+    },
+  });
+
+  const expandableTableStyle = css([
+    basicTableStyle,
+    {
+      'tr.euiTableRow-isExpandedRow': {
+        backgroundColor: theme.colors.backgroundBasePlain,
+      },
+    },
+  ]);
+
+  const headerCellStyle = css({
+    display: 'flex',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    overflow: 'hidden',
+  });
+
+  const getHeaderCellContentStyle = (isSortable: boolean) =>
+    css({
+      cursor: isSortable ? 'pointer' : 'not-allowed',
+      fontWeight: theme.font.weight.semiBold,
     });
 
-    const headerCellPopoverHeaderTitleStyle = css({
-        fontWeight: theme.font.weight.medium,
-    });
-
-    const headerCellPopoverContentStyle = css({
-        margin: theme.size.m,
-    });
-
-    const getTitleButtonStyle = (sortOrder?: SortOrder) =>
-        css({
-            flex: '0 1 auto',
-            overflow: sortOrder === undefined ? 'visible' : 'hidden',
-        });
-
-    const sortButtonStyle = css({
-        paddingLeft: theme.size.xxs,
-        display: 'flex',
-        flex: '0 0 auto',
-        alignItems: 'center',
-        [`&:focus-visible .${SORTABLE_ICON_CLASS}`]: {
-            visibility: 'visible',
-        },
+  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 getTitleButtonStyle = (sortOrder?: SortOrder) =>
+    css({
+      flex: '0 1 auto',
+      overflow: sortOrder === undefined ? 'visible' : 'hidden',
     });
 
-    return {
-        basicTableStyle,
-        headerCellStyle,
-        getHeaderCellContentStyle,
-        headerCellPopoverHeaderStyle,
-        headerCellPopoverHeaderTitleStyle,
-        headerCellPopoverContentStyle,
-        getTitleButtonStyle,
-        sortButtonStyle,
-        getStatusColumnStyle,
-        dropDownTableStyle,
-        expandableTableStyle,
-    };
+  const sortButtonStyle = css({
+    paddingLeft: theme.size.xxs,
+    display: 'flex',
+    flex: '0 0 auto',
+    alignItems: 'center',
+    [`&:focus-visible .${SORTABLE_ICON_CLASS}`]: {
+      visibility: 'visible',
+    },
+  });
+
+  return {
+    basicTableStyle,
+    headerCellStyle,
+    getHeaderCellContentStyle,
+    headerCellPopoverHeaderStyle,
+    headerCellPopoverHeaderTitleStyle,
+    headerCellPopoverContentStyle,
+    getTitleButtonStyle,
+    sortButtonStyle,
+    getStatusColumnStyle,
+    dropDownTableStyle,
+    expandableTableStyle,
+  };
 };

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

@@ -12,130 +12,103 @@ import { getSortedVisibleColumns } from './utils';
 export type onUpdateColumWidth = (fieldName: string, width: number) => void;
 
 export type WfoTableHeaderRowProps<T extends object> = Pick<
-    WfoTableProps<T>,
-    | 'columnConfig'
-    | 'hiddenColumns'
-    | 'columnOrder'
-    | 'dataSorting'
-    | 'onUpdateDataSorting'
-    | 'onUpdateDataSearch'
-    | 'className'
+  WfoTableProps<T>,
+  | 'columnConfig'
+  | 'hiddenColumns'
+  | 'columnOrder'
+  | 'dataSorting'
+  | 'onUpdateDataSorting'
+  | 'onUpdateDataSearch'
+  | 'className'
 > & {
-    onUpdateColumWidth?: onUpdateColumWidth;
+  onUpdateColumWidth?: onUpdateColumWidth;
 };
 
 export const WfoTableHeaderRow = <T extends object>({
-    columnConfig,
-    columnOrder = [],
-    hiddenColumns = [],
-    dataSorting = [],
-    onUpdateDataSorting,
-    onUpdateDataSearch,
-    onUpdateColumWidth,
-    className,
+  columnConfig,
+  columnOrder = [],
+  hiddenColumns = [],
+  dataSorting = [],
+  onUpdateDataSorting,
+  onUpdateDataSearch,
+  onUpdateColumWidth,
+  className,
 }: WfoTableHeaderRowProps<T>) => {
-    const {
-        cellStyle,
-        headerCellContainer,
-        sortableHeaderCellStyle,
-        rowStyle,
-        setWidth,
-    } = useWithOrchestratorTheme(getWfoTableStyles);
+  const { cellStyle, headerCellContainer, sortableHeaderCellStyle, rowStyle, setWidth } =
+    useWithOrchestratorTheme(getWfoTableStyles);
 
-    const sortedVisibleColumns = getSortedVisibleColumns(
-        columnConfig,
-        columnOrder,
-        hiddenColumns,
-    );
-    const headerRowRef = useRef<HTMLTableRowElement>(null);
-    return (
-        <tr className={className} css={rowStyle} ref={headerRowRef}>
-            {sortedVisibleColumns.map(([fieldName, columnConfig], index) => {
-                const dataSortingConfiguration = dataSorting.find(
-                    (dataSorting) => dataSorting.field === fieldName,
-                );
+  const sortedVisibleColumns = getSortedVisibleColumns(columnConfig, columnOrder, hiddenColumns);
+  const headerRowRef = useRef<HTMLTableRowElement>(null);
+  return (
+    <tr className={className} css={rowStyle} ref={headerRowRef}>
+      {sortedVisibleColumns.map(([fieldName, columnConfig], index) => {
+        const dataSortingConfiguration = dataSorting.find((dataSorting) => dataSorting.field === fieldName);
 
-                if (columnConfig.columnType === ColumnType.DATA) {
-                    return (
-                        <th
-                            colSpan={columnConfig.numberOfColumnsToSpan}
-                            key={fieldName}
-                            data-field-name={fieldName}
-                            css={[
-                                ...toOptionalArrayEntry(
-                                    cellStyle,
-                                    !columnConfig.disableDefaultCellStyle,
-                                ),
-                                ...toOptionalArrayEntry(
-                                    sortableHeaderCellStyle,
-                                    !!columnConfig.isSortable,
-                                ),
-                                setWidth(columnConfig.width),
-                            ]}
-                        >
-                            <div css={headerCellContainer}>
-                                <WfoTableHeaderCell
-                                    fieldName={fieldName}
-                                    sortOrder={
-                                        dataSortingConfiguration?.sortOrder
-                                    }
-                                    onSetSortOrder={
-                                        columnConfig.isSortable
-                                            ? (updatedSortOrder) =>
-                                                  onUpdateDataSorting?.({
-                                                      // Currently there is not a good way to tell Typescript that in some cases
-                                                      // key is of type "keyof T"
-                                                      field: fieldName as keyof T,
-                                                      sortOrder:
-                                                          updatedSortOrder,
-                                                  })
-                                            : undefined
-                                    }
-                                    onSearch={
-                                        columnConfig.isFilterable
-                                            ? (searchText) =>
-                                                  onUpdateDataSearch?.({
-                                                      field: fieldName as keyof T,
-                                                      searchText,
-                                                  })
-                                            : undefined
-                                    }
-                                >
-                                    {columnConfig.label?.toString()}
-                                </WfoTableHeaderCell>
-                                {typeof onUpdateColumWidth === 'function' &&
-                                    index !==
-                                        sortedVisibleColumns.length - 1 && (
-                                        <WfoDragHandler
-                                            headerRowRef={headerRowRef}
-                                            fieldName={fieldName}
-                                            onUpdateColumWidth={
-                                                onUpdateColumWidth
-                                            }
-                                        />
-                                    )}
-                            </div>
-                        </th>
-                    );
-                }
+        if (columnConfig.columnType === ColumnType.DATA) {
+          return (
+            <th
+              colSpan={columnConfig.numberOfColumnsToSpan}
+              key={fieldName}
+              data-field-name={fieldName}
+              css={[
+                ...toOptionalArrayEntry(cellStyle, !columnConfig.disableDefaultCellStyle),
+                ...toOptionalArrayEntry(sortableHeaderCellStyle, !!columnConfig.isSortable),
+                setWidth(columnConfig.width),
+              ]}
+            >
+              <div css={headerCellContainer}>
+                <WfoTableHeaderCell
+                  fieldName={fieldName}
+                  sortOrder={dataSortingConfiguration?.sortOrder}
+                  onSetSortOrder={
+                    columnConfig.isSortable ?
+                      (updatedSortOrder) =>
+                        onUpdateDataSorting?.({
+                          // Currently there is not a good way to tell Typescript that in some cases
+                          // key is of type "keyof T"
+                          field: fieldName as keyof T,
+                          sortOrder: updatedSortOrder,
+                        })
+                    : undefined
+                  }
+                  onSearch={
+                    columnConfig.isFilterable ?
+                      (searchText) =>
+                        onUpdateDataSearch?.({
+                          field: fieldName as keyof T,
+                          searchText,
+                        })
+                    : undefined
+                  }
+                >
+                  {columnConfig.label?.toString()}
+                </WfoTableHeaderCell>
+                {typeof onUpdateColumWidth === 'function' && index !== sortedVisibleColumns.length - 1 && (
+                  <WfoDragHandler
+                    headerRowRef={headerRowRef}
+                    fieldName={fieldName}
+                    onUpdateColumWidth={onUpdateColumWidth}
+                  />
+                )}
+              </div>
+            </th>
+          );
+        }
 
-                // Control column
-                return (
-                    <th
-                        key={fieldName}
-                        colSpan={columnConfig.numberOfColumnsToSpan}
-                        css={[
-                            ...toOptionalArrayEntry(
-                                cellStyle,
-                                !columnConfig.disableDefaultCellStyle,
-                            ),
-                            setWidth(columnConfig.width),
-                        ]}
-                    >
-                        <div>{columnConfig.label?.toString() || ''}</div>
-                    </th>
-                );
-            })}
-        </tr>
-    );
+        // Control column
+        return (
+          <th
+            key={fieldName}
+            colSpan={columnConfig.numberOfColumnsToSpan}
+            css={[
+              ...toOptionalArrayEntry(cellStyle, !columnConfig.disableDefaultCellStyle),
+              setWidth(columnConfig.width),
+            ]}
+          >
+            <div>{columnConfig.label?.toString() || ''}</div>
+          </th>
+        );
+      })}
+    </tr>
+  );
 };

package/src/components/WfoTable/WfoTable/WfoToolTip.tsx

@@ -3,27 +3,23 @@ import React, { FC, ReactNode } from 'react';
 import { EuiToolTip } from '@elastic/eui';
 
 interface WfoToolTipProps {
-    tooltipContent: ReactNode;
-    children: ReactNode;
-    className?: string;
+  tooltipContent: ReactNode;
+  children: ReactNode;
+  className?: string;
 }
 
-export const WfoToolTip: FC<WfoToolTipProps> = ({
-    tooltipContent,
-    children,
-    className,
-}) => {
-    return (
-        <EuiToolTip
-            className={className}
-            position="bottom"
-            delay="long"
-            content={tooltipContent}
-            css={{ maxWidth: 'fit-content' }}
-            repositionOnScroll
-            display="block"
-        >
-            <div css={{ width: '100%' }}>{children}</div>
-        </EuiToolTip>
-    );
+export const WfoToolTip: FC<WfoToolTipProps> = ({ tooltipContent, children, className }) => {
+  return (
+    <EuiToolTip
+      className={className}
+      position="bottom"
+      delay="long"
+      content={tooltipContent}
+      css={{ maxWidth: 'fit-content' }}
+      repositionOnScroll
+      display="block"
+    >
+      <div css={{ width: '100%' }}>{children}</div>
+    </EuiToolTip>
+  );
 };

package/src/components/WfoTable/WfoTable/WfoTruncateCell.tsx

@@ -1,23 +1,23 @@
 import React, { FC, ReactElement } from 'react';
 
 export type WfoTruncateCellProps = {
-    children?: ReactElement | string | null;
+  children?: ReactElement | string | null;
 };
 
 export const WfoTruncateCell: FC<WfoTruncateCellProps> = ({ children }) => {
-    if (!children) {
-        return null;
-    }
+  if (!children) {
+    return null;
+  }
 
-    return (
-        <p
-            css={{
-                textOverflow: 'ellipsis',
-                overflow: 'ellipsis',
-                whiteSpace: 'nowrap',
-            }}
-        >
-            {children}
-        </p>
-    );
+  return (
+    <p
+      css={{
+        textOverflow: 'ellipsis',
+        overflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+      }}
+    >
+      {children}
+    </p>
+  );
 };

package/src/components/WfoTable/WfoTable/WfoVirtualizedTableBody.tsx

@@ -3,60 +3,53 @@ import React, { useRef } from 'react';
 import { useVirtualizer } from '@tanstack/react-virtual';
 
 type Props<T> = {
-    data: T[];
-    height: number;
-    renderRow: (row: T, index: number) => React.ReactNode;
+  data: T[];
+  height: number;
+  renderRow: (row: T, index: number) => React.ReactNode;
 };
 
 const ESTIMATED_ROW_HEIGHT = 44;
 const OVERSCAN_COUNT = 10;
 
-export const WfoVirtualizedTableBody = <T,>({
-    data,
-    height,
-    renderRow,
-}: Props<T>) => {
-    const parentRef = useRef<HTMLDivElement>(null);
-
-    const rowVirtualizer = useVirtualizer({
-        count: data.length,
-        getScrollElement: () => parentRef.current,
-        estimateSize: () => ESTIMATED_ROW_HEIGHT,
-        overscan: OVERSCAN_COUNT,
-    });
-
-    const virtualItems = rowVirtualizer.getVirtualItems();
-    const totalSize = rowVirtualizer.getTotalSize();
-
-    const lastVirtualItemEnd =
-        virtualItems.length > 0 ? virtualItems[virtualItems.length - 1].end : 0;
-    const virtualTopSpacerHeight = virtualItems[0]?.start ?? 0;
-    const bottomSpacerHeight = totalSize - lastVirtualItemEnd;
-
-    return (
-        <div
-            ref={parentRef}
+export const WfoVirtualizedTableBody = <T,>({ data, height, renderRow }: Props<T>) => {
+  const parentRef = useRef<HTMLDivElement>(null);
+
+  const rowVirtualizer = useVirtualizer({
+    count: data.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => ESTIMATED_ROW_HEIGHT,
+    overscan: OVERSCAN_COUNT,
+  });
+
+  const virtualItems = rowVirtualizer.getVirtualItems();
+  const totalSize = rowVirtualizer.getTotalSize();
+
+  const lastVirtualItemEnd = virtualItems.length > 0 ? virtualItems[virtualItems.length - 1].end : 0;
+  const virtualTopSpacerHeight = virtualItems[0]?.start ?? 0;
+  const bottomSpacerHeight = totalSize - lastVirtualItemEnd;
+
+  return (
+    <div
+      ref={parentRef}
+      style={{
+        height,
+        overflowY: 'auto',
+        overflowX: 'hidden',
+      }}
+    >
+      <table style={{ width: '100%' }}>
+        <tbody style={{ position: 'relative' }}>
+          <tr style={{ height: virtualTopSpacerHeight }} />
+
+          {virtualItems.map((virtualRow) => renderRow(data[virtualRow.index], virtualRow.index))}
+
+          <tr
             style={{
-                height,
-                overflowY: 'auto',
-                overflowX: 'hidden',
+              height: bottomSpacerHeight,
             }}
-        >
-            <table style={{ width: '100%' }}>
-                <tbody style={{ position: 'relative' }}>
-                    <tr style={{ height: virtualTopSpacerHeight }} />
-
-                    {virtualItems.map((virtualRow) =>
-                        renderRow(data[virtualRow.index], virtualRow.index),
-                    )}
-
-                    <tr
-                        style={{
-                            height: bottomSpacerHeight,
-                        }}
-                    />
-                </tbody>
-            </table>
-        </div>
-    );
+          />
+        </tbody>
+      </table>
+    </div>
+  );
 };