@scality/core-ui 0.115.0

package/src/lib/components/tablev2/TableCommon.tsx

@@ -0,0 +1,102 @@
+import { ComponentType, LegacyRef, useCallback, useState } from 'react';
+import { Row } from 'react-table';
+import AutoSizer from 'react-virtualized-auto-sizer';
+import {
+  FixedSizeList,
+  FixedSizeList as List,
+  ListChildComponentProps,
+  ListItemKeySelector,
+} from 'react-window';
+import {
+  convertRemToPixels,
+  TableHeightKeyType,
+  tableRowHeight,
+} from './TableUtils';
+
+type VirtualizedRowsType<
+  DATA_ROW extends Record<string, unknown> = Record<string, unknown>,
+> = {
+  rows: Row<DATA_ROW>[];
+  RenderRow: ComponentType<ListChildComponentProps<Row<DATA_ROW>[]>>;
+  rowHeight: TableHeightKeyType;
+  setHasScrollbar: React.Dispatch<React.SetStateAction<boolean>>;
+  hasScrollbar?: boolean;
+  itemKey?: ListItemKeySelector<Row<DATA_ROW>[]>;
+  onBottom?: (rowLength: number) => void;
+  onBottomOffset?: number;
+  listRef?: LegacyRef<FixedSizeList<Row<DATA_ROW>[]>>;
+};
+
+export const VirtualizedRows = <
+  DATA_ROW extends Record<string, unknown> = Record<string, unknown>,
+>({
+  rows,
+  rowHeight,
+  setHasScrollbar,
+  onBottom,
+  onBottomOffset,
+  RenderRow,
+  listRef,
+  itemKey,
+}: VirtualizedRowsType<DATA_ROW>) => (
+  <AutoSizer>
+    {({ height, width }) => {
+      return (
+        <List
+          height={height}
+          itemCount={rows.length} // how many items we are going to render
+          itemSize={convertRemToPixels(tableRowHeight[rowHeight])} // height of each row in pixel
+          width={width}
+          itemKey={itemKey}
+          itemData={rows}
+          ref={listRef}
+          onItemsRendered={({
+            visibleStartIndex,
+            visibleStopIndex,
+            overscanStopIndex,
+          }) => {
+            setHasScrollbar(
+              visibleStopIndex - visibleStartIndex < overscanStopIndex,
+            );
+
+            if (
+              onBottom &&
+              onBottomOffset != null &&
+              overscanStopIndex >= rows.length - 1 - onBottomOffset
+            ) {
+              onBottom(rows.length);
+            }
+          }}
+        >
+          {RenderRow}
+        </List>
+      );
+    }}
+  </AutoSizer>
+);
+
+export const useTableScrollbar = () => {
+  const [hasScrollbar, setHasScrollbar] = useState(false);
+  const [scrollBarWidth, setScrollBarWidth] = useState(0);
+
+  const handleScrollbarWidth = useCallback((node) => {
+    if (node) {
+      const scrollDiv = document.createElement('div');
+      scrollDiv.setAttribute(
+        'style',
+        'width: 100px; height: 100px; overflow: scroll; position:absolute; top:-9999px;',
+      );
+      node.appendChild(scrollDiv);
+      const scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
+      node.removeChild(scrollDiv);
+      setScrollBarWidth(scrollbarWidth);
+    }
+  }, []);
+
+  return {
+    hasScrollbar,
+    setHasScrollbar,
+    scrollBarWidth,
+    handleScrollbarWidth,
+  };
+};

package/src/lib/components/tablev2/TableUtils.test.ts

@@ -0,0 +1,17 @@
+import { compareHealth } from './TableUtils';
+it('should return 0 for the equal status', () => {
+  const result = compareHealth('healthy', 'healthy');
+  expect(result).toEqual(0);
+});
+it('should return -1 or 1 to sort the status', () => {
+  const result = compareHealth('critical', 'healthy');
+  const result2 = compareHealth('warning', 'critical');
+  expect(result).toEqual(1);
+  expect(result2).toEqual(-1);
+});
+it('should return undefine for the unknown status', () => {
+  const result = compareHealth('invalidStatus', 'healthy');
+  const result2 = compareHealth('none', 'invalidStatus');
+  expect(result).toEqual(undefined);
+  expect(result2).toEqual(undefined);
+});

package/src/lib/components/tablev2/TableUtils.ts

@@ -0,0 +1,60 @@
+const STATUS_CRITICAL = 'critical';
+const STATUS_WARNING = 'warning';
+const STATUS_NONE = 'none';
+const STATUS_HEALTH = 'healthy';
+
+type StatusType =
+  | typeof STATUS_CRITICAL
+  | typeof STATUS_WARNING
+  | typeof STATUS_NONE
+  | typeof STATUS_HEALTH;
+
+// some common customized sortTypes
+export function compareHealth(
+  status1: StatusType,
+  status2: StatusType,
+): number | undefined {
+  if (
+    ![STATUS_WARNING, STATUS_CRITICAL, STATUS_NONE, STATUS_HEALTH].includes(
+      status1,
+    ) ||
+    ![STATUS_WARNING, STATUS_CRITICAL, STATUS_NONE, STATUS_HEALTH].includes(
+      status2,
+    )
+  ) {
+    console.error('Invalid health status');
+    return;
+  }
+
+  const weights = {};
+  weights[STATUS_CRITICAL] = 3;
+  weights[STATUS_WARNING] = 2;
+  weights[STATUS_NONE] = 1;
+  weights[STATUS_HEALTH] = 0;
+  return weights[status1] === weights[status2]
+    ? 0
+    : weights[status1] > weights[status2]
+    ? 1
+    : -1;
+}
+
+export function convertRemToPixels(rem) {
+  return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
+}
+export type TableLocalType = 'en' | 'fr';
+
+export type TableHeightKeyType = 'h32' | 'h40' | 'h48' | 'h64';
+
+export type TableVariantType =
+  | 'backgroundLevel1'
+  | 'backgroundLevel2'
+  | 'backgroundLevel3'
+  | 'backgroundLevel4';
+
+// in rem unit
+export const tableRowHeight = {
+  h32: '2.286', //1 line
+  h40: '2.858', //2 line
+  h48: '3.428', //2 line
+  h64: '4.572', //3 line
+};

package/src/lib/components/tablev2/Tablestyle.tsx

@@ -0,0 +1,184 @@
+import styled, { css } from 'styled-components';
+
+import { spacing } from '../../style/theme';
+import {
+  TableHeightKeyType,
+  tableRowHeight,
+  TableVariantType,
+} from './TableUtils';
+import { HeaderGroup } from 'react-table';
+import { Icon } from '../icon/Icon.component';
+
+const borderSize = '4px';
+export const SortIncentive = styled.span`
+  position: absolute;
+  display: none;
+`;
+export const SortCaretWrapper = styled.span`
+  padding-left: ${spacing.sp4};
+  position: absolute;
+`;
+export const TableHeader = styled.div<{ headerHeight?: number | string }>`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: ${(props) => props.headerHeight};
+  &:hover {
+    ${SortIncentive} {
+      display: block;
+    }
+  }
+`;
+
+type HeadRowType = {
+  hasScrollBar: boolean;
+  scrollBarWidth: number;
+  rowHeight: TableHeightKeyType;
+};
+
+export const HeadRow = styled.div<HeadRowType>`
+  display: flex;
+  align-items: center;
+  height: 2.286rem;
+  width: ${(props) =>
+    props.hasScrollBar
+      ? `calc(100% - ${props.scrollBarWidth}px - ${borderSize} )!important;` // -4px for border
+      : `calc(100% - ${borderSize} ) !important;`}
+  height: ${(props) => tableRowHeight[props.rowHeight]}rem;
+  table-layout: fixed;
+  cursor: pointer;
+  color: ${(props) => props.theme.textPrimary};
+  font-weight: bold;
+  overflow: hidden;
+`;
+
+type TableRowType = {
+  isSelected: boolean;
+  selectedId?: string;
+  separationLineVariant: TableVariantType;
+  backgroundVariant: TableVariantType;
+};
+export const TableRow = styled.div<TableRowType>`
+  color: ${(props) => props.theme.textPrimary};
+  border-top: 1px solid ${(props) => props.theme[props.separationLineVariant]};
+  :last-child {
+    border-bottom: 1px solid
+      ${(props) => props.theme[props.separationLineVariant]};
+  }
+  cursor: default;
+  box-sizing: border-box;
+
+  // single selectable case
+  ${(props) => {
+    if (props.selectedId) {
+      return css`
+        &:hover,
+        &:focus {
+          background-color: ${(props) => props.theme.highlight};
+          outline: none;
+          cursor: pointer;
+        }
+      `;
+    }
+  }}
+
+  ${(props) => {
+    if (props.selectedId && props.isSelected) {
+      return css`
+        background-color: ${props.theme.highlight};
+        border-right: ${borderSize} solid ${props.theme.selectedActive};
+      `;
+    } else {
+      const color = props.theme[props.backgroundVariant];
+      return css`
+        border-right: ${borderSize} solid ${color};
+      `;
+    }
+  }}
+`;
+
+type TableRowMultiSelectableType = {
+  isSelected: boolean;
+  separationLineVariant: TableVariantType;
+  backgroundVariant: TableVariantType;
+};
+export const TableRowMultiSelectable = styled.div<TableRowMultiSelectableType>`
+  color: ${(props) => props.theme.textPrimary};
+  border-top: 1px solid ${(props) => props.theme[props.separationLineVariant]};
+  :last-child {
+    border-bottom: 1px solid
+      ${(props) => props.theme[props.separationLineVariant]};
+  }
+
+  box-sizing: border-box;
+
+  &:hover,
+  &:focus {
+    background-color: ${(props) => props.theme.highlight};
+    outline: none;
+    cursor: pointer;
+  }
+
+  ${(props) => {
+    if (props.isSelected) {
+      return css`
+        background-color: ${(props) => props.theme.highlight};
+        border-right: ${borderSize} solid ${props.theme.selectedActive};
+      `;
+    } else {
+      const color = props.theme[props.backgroundVariant];
+      return css`
+        border-right: ${borderSize} solid ${color};
+      `;
+    }
+  }}
+`;
+
+export const TableBody = styled.div`
+  display: block;
+  flex-grow: 1;
+  height: 100%;
+`;
+export const TableWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+`;
+export const TooltipContent = styled.div`
+  color: ${(props) => props.theme.textSecondary};
+  font-weight: bold;
+  min-width: 60px;
+`;
+
+export const NoResult = styled.div`
+  display: flex;
+  justify-content: center;
+  color: ${(props) => props.theme.textSecondary};
+  padding-top: ${spacing.sp8};
+  border-top: 1px solid ${(props) => props.theme.backgroundLevel3};
+`;
+
+export const SortCaret = <
+  DATA_ROW extends Record<string, unknown> = Record<string, unknown>,
+>({
+  column,
+}: {
+  column: HeaderGroup<DATA_ROW>;
+}) => {
+  return !column.disableSortBy ? (
+    <SortCaretWrapper>
+      {column.isSorted ? (
+        column.isSortedDesc ? (
+          <Icon name="Sort-down" />
+        ) : (
+          <Icon name="Sort-up" />
+        )
+      ) : (
+        <SortIncentive>
+          <Icon name="Sort" />
+        </SortIncentive>
+      )}
+    </SortCaretWrapper>
+  ) : null;
+};

package/src/lib/components/tablev2/Tablev2.component.tsx

@@ -0,0 +1,316 @@
+/// <reference path="react-table-config.ts" />
+import * as React from 'react';
+import { useEffect } from 'react';
+import {
+  Column as TableColumn,
+  CellProps as TableCellProps,
+  CoreUIColumn,
+  HeaderGroup,
+  IdType,
+  Row,
+  SortByFn,
+  TableBodyPropGetter,
+  TableBodyProps,
+  useBlockLayout,
+  useExpanded,
+  useFilters,
+  useGlobalFilter,
+  useRowSelect,
+  useSortBy,
+  useTable,
+  defaultColumn,
+} from 'react-table';
+import { useMemoCompare } from '../../hooks';
+import { Box } from '../box/Box';
+import { ConstrainedText } from '../constrainedtext/Constrainedtext.component';
+import { Tooltip } from '../tooltip/Tooltip.component';
+
+import { MultiSelectableContent } from './MultiSelectableContent';
+import { TableSearch as Search } from './Search';
+import { SearchWithQueryParams } from './SearchWithQueryParams';
+import { SingleSelectableContent } from './SingleSelectableContent';
+import { TableWrapper, TooltipContent } from './Tablestyle';
+import { compareHealth, TableHeightKeyType } from './TableUtils';
+import { useCheckbox } from './useCheckbox';
+import { Icon } from '../icon/Icon.component';
+
+type UpdateTableData<
+  DATA_ROW extends Record<string, unknown> = Record<string, unknown>,
+> = {
+  updateTableData?: <DATA_ROW_KEY extends keyof DATA_ROW>(
+    rowId: string,
+    columnName: DATA_ROW_KEY,
+    value: DATA_ROW[DATA_ROW_KEY],
+  ) => void;
+};
+export type Column<D extends Record<string, unknown>> = CoreUIColumn<D>;
+export type CellProps<
+  D extends Record<string, unknown>,
+  V = unknown,
+> = TableCellProps<D, V> & UpdateTableData<D>;
+
+export type TableProps<
+  DATA_ROW extends Record<string, unknown> = Record<string, unknown>,
+> = {
+  columns: Array<Column<DATA_ROW>>;
+  defaultSortingKey?: string;
+  // We don't display the default sort key in the URL, so we need to specify here
+  data: DATA_ROW[];
+  children: JSX.Element | JSX.Element[];
+  getRowId?: (
+    originalRow: DATA_ROW,
+    relativeIndex: number,
+    parent?: Row<DATA_ROW>,
+  ) => string;
+  sortTypes?: Record<string, SortByFn<DATA_ROW>>;
+  globalFilter?: string;
+  onBottom?: (rowLength: number) => void;
+  onBottomOffset?: number;
+  allFilters?: { id: string; value: string }[];
+  initiallySelectedRowsIds?: Set<string | number>;
+  //To call it from the Cell renderer to update the original data
+} & UpdateTableData<DATA_ROW>;
+
+type setHiddenColumnFuncType = (oldHidden: string[]) => string[];
+
+type TableContextType<
+  DATA_ROW extends Record<string, unknown> = Record<string, unknown>,
+> = {
+  headerGroups: HeaderGroup<DATA_ROW>[];
+  rows: Row<DATA_ROW>[];
+  prepareRow: (row: Row<DATA_ROW>) => void;
+  getTableBodyProps: (
+    propGetter?: TableBodyPropGetter<DATA_ROW>,
+  ) => TableBodyProps;
+  rowHeight: TableHeightKeyType;
+  setRowHeight: (rowHeight: TableHeightKeyType) => void;
+  selectedRowIds: Record<string, boolean>;
+  selectedFlatRows: Row<DATA_ROW>[];
+  preGlobalFilteredRows: Row<DATA_ROW>[];
+  setGlobalFilter: (filterValue: string) => void;
+  globalFilter: any;
+  setFilter: (columnId: string, updater: any) => void;
+  onBottom?: (rowLength: number) => void;
+  onBottomOffset?: number;
+  setHiddenColumns: (param: string[] | setHiddenColumnFuncType) => void;
+  isAllRowsSelected?: boolean;
+  toggleAllRowsSelected: (value?: boolean) => void;
+};
+const TableContext = React.createContext<TableContextType | null>(null);
+
+export const useTableContext = <
+  DATA_ROW extends Record<string, unknown> = Record<string, unknown>,
+>() => {
+  const tableProps = React.useContext(TableContext);
+
+  if (!tableProps) {
+    throw new Error(
+      'The useTableContext hook can only be used within the <TableContext.Provider/>',
+    );
+  }
+
+  return tableProps as TableContextType<DATA_ROW>; //Todo figure out a way to transfer the type to the context provider
+};
+
+export const EmptyCell = ({
+  tooltipContent,
+  mr = 4,
+}: {
+  tooltipContent?: string | JSX.Element;
+  mr?: number;
+}) => {
+  return (
+    <Box mr={mr}>
+      <Tooltip
+        overlay={<TooltipContent>{tooltipContent || 'unknown'}</TooltipContent>}
+      >
+        <Icon name="Minus" />
+      </Tooltip>
+    </Box>
+  );
+};
+
+const DefaultRenderer = ({ value }) => {
+  const { rowHeight } = useTableContext();
+
+  if (!value && value !== 0) {
+    return <EmptyCell />;
+  }
+
+  if (typeof value === 'string') {
+    const lineClamp =
+      rowHeight === 'h32'
+        ? 1
+        : rowHeight === 'h40' || rowHeight === 'h48'
+        ? 2
+        : 3;
+    return (
+      <Box mr={4}>
+        <ConstrainedText text={value} lineClamp={lineClamp} />
+      </Box>
+    );
+  }
+
+  return value;
+};
+function Table<
+  DATA_ROW extends Record<string, unknown> = Record<string, unknown>,
+>({
+  columns,
+  data,
+  defaultSortingKey,
+  getRowId,
+  children,
+  sortTypes,
+  globalFilter,
+  allFilters,
+  onBottom,
+  onBottomOffset = 10,
+  initiallySelectedRowsIds,
+  updateTableData,
+}: TableProps<DATA_ROW>) {
+  sortTypes = {
+    health: (row1, row2) => {
+      return compareHealth(row2.values.health, row1.values.health) || 0;
+    },
+    ...sortTypes,
+  };
+
+  const stringifyFilter = React.useMemo(() => {
+    return (rows: Row<object>[], columnIds: string[], value) => {
+      const filteredRows = rows.filter((row) => {
+        // we stringify the object to make sure we can match the value
+        return JSON.stringify(row.values)
+          .toLowerCase()
+          .includes((value || '').toLowerCase());
+      });
+      return filteredRows;
+    };
+  }, []);
+
+  const formattedInitiallySelectedRows = React.useMemo(() => {
+    if (initiallySelectedRowsIds) {
+      return Array.from(initiallySelectedRowsIds).reduce(
+        (accumulatedValue, currentValue) => ({
+          ...accumulatedValue,
+          [currentValue]: true,
+        }),
+        {},
+      );
+    }
+    return {};
+  }, []) as Record<IdType<DATA_ROW>, boolean>;
+
+  const [rowHeight, setRowHeight] = React.useState<TableHeightKeyType>('h40');
+
+  const {
+    headerGroups,
+    rows,
+    prepareRow,
+    selectedFlatRows,
+    getTableBodyProps,
+    state: { selectedRowIds },
+    preGlobalFilteredRows,
+    setGlobalFilter,
+    setFilter,
+    setAllFilters,
+    setHiddenColumns,
+    isAllRowsSelected,
+    toggleAllRowsSelected,
+  } = useTable<DATA_ROW>(
+    {
+      defaultColumn: {
+        ...(defaultColumn as TableColumn<DATA_ROW>),
+        Cell: DefaultRenderer,
+      },
+      columns: columns as TableColumn<DATA_ROW>[],
+      data,
+      getRowId,
+      initialState: {
+        sortBy: defaultSortingKey
+          ? [
+              {
+                id: defaultSortingKey,
+                desc: false,
+              },
+            ]
+          : [],
+        selectedRowIds: formattedInitiallySelectedRows,
+        hiddenColumns: ['selection'],
+      },
+      disableMultiSort: true,
+      autoResetSortBy: false,
+      sortTypes,
+      //@ts-ignore TODO investigate why this type is not matching
+      globalFilter: stringifyFilter,
+      autoResetHiddenColumns: false,
+      updateTableData,
+    },
+    useBlockLayout,
+    useFilters,
+    useGlobalFilter,
+    useSortBy,
+    useExpanded,
+    useRowSelect,
+    useCheckbox,
+  );
+
+  useEffect(() => {
+    if (globalFilter !== undefined && globalFilter !== null) {
+      setGlobalFilter(globalFilter);
+    }
+  }, [globalFilter, setGlobalFilter, data]);
+
+  const filters = useMemoCompare(
+    allFilters,
+    (previous, next) =>
+      !previous || JSON.stringify(previous) === JSON.stringify(next),
+  );
+
+  useEffect(() => {
+    if (!filters) {
+      setAllFilters([]);
+    } else {
+      const validFilters = filters.filter(
+        (filter) => filter.id && filter.value !== undefined,
+      );
+      setAllFilters(validFilters.length > 0 ? validFilters : []);
+    }
+  }, [filters, setAllFilters]);
+
+  const contextValue: TableContextType<DATA_ROW> = {
+    headerGroups,
+    rows,
+    prepareRow,
+    getTableBodyProps,
+    selectedRowIds,
+    selectedFlatRows,
+    preGlobalFilteredRows,
+    setGlobalFilter,
+    rowHeight,
+    setRowHeight,
+    globalFilter,
+    setFilter,
+    onBottom,
+    onBottomOffset,
+    setHiddenColumns,
+    isAllRowsSelected,
+    toggleAllRowsSelected,
+  };
+  return (
+    <TableContext.Provider
+      //@ts-ignore
+      value={contextValue}
+    >
+      <TableWrapper role="grid" className="table">
+        {children}
+      </TableWrapper>
+    </TableContext.Provider>
+  );
+}
+
+Table.SingleSelectableContent = SingleSelectableContent;
+Table.MultiSelectableContent = MultiSelectableContent;
+Table.Search = Search;
+Table.SearchWithQueryParams = SearchWithQueryParams;
+export { Table };