feat: Add composable table variant

src/components/TableToolsTable/TableToolsTable.js

@@ -1,23 +1,17 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import propTypes from 'prop-types';
 import { Pagination, PaginationVariant } from '@patternfly/react-core';
-import {
-  Table,
-  TableBody,
-  TableHeader,
-} from '@patternfly/react-table/deprecated';
-import {
-  SkeletonTable,
-  ColumnManagementModal,
-} from '@patternfly/react-component-groups';
-
-import PrimaryToolbar from '@redhat-cloud-services/frontend-components/PrimaryToolbar';
+import { ColumnManagementModal } from '@patternfly/react-component-groups';
 import TableToolbar from '@redhat-cloud-services/frontend-components/TableToolbar';
 
 import useTableTools from '~/hooks/useTableTools';
-import { TableStateProvider, FilterModal, TableViewToggle } from '~/components';
+import { TableContext } from '~/hooks/useTableContext/constants';
+import { TableStateProvider, FilterModal } from '~/components';
+
+import { variants, queryClient } from './constants';
 
 const TableToolsTable = ({
+  tableToolsTableVariant = 'table',
   loading: externalLoading,
   items: externalItems,
   error: externalError,
@@ -28,20 +22,16 @@
   // TODO I'm not sure if we need this level of customisation.
   // It might actually hurt in the long run. Consider removing until we really have the case where we need this
   toolbarProps: toolbarPropsProp,
-  tableHeaderProps,
-  tableBodyProps,
   tableToolbarProps,
   paginationProps,
   ...tablePropsRest
 }) => {
+  const { TableComponent, ToolbarComponent } = variants[tableToolsTableVariant];
   const {
-    view,
-    loading,
     toolbarProps,
-    tableProps,
     filterModalProps,
     columnManagerModalProps,
-    tableViewToggleProps,
+    ...tableToolsProps
   } = useTableTools(
     externalLoading,
     externalItems,
@@ -59,26 +49,9 @@
 
   return (
     <>
-      <PrimaryToolbar aria-label="Table toolbar" {...toolbarProps}>
-        {toolbarProps?.children}
-        {tableViewToggleProps && <TableViewToggle {...tableViewToggleProps} />}
-      </PrimaryToolbar>
+      <ToolbarComponent {...{ ...tableToolsProps, ...{ toolbarProps } }} />
 
-      {
-        // TODO This is a bit hackish. We should rather have an indicator if data necessary for the current view is loading.
-        (view === 'rows' || (view === 'tree' && !treeTable)) && loading ? (
-          <SkeletonTable
-            rowsCount={toolbarProps?.pagination?.perPage || 10}
-            // TODO use Th when migrating to PF composable tables
-            columns={columns.map(({ title }) => title)}
-          />
-        ) : (
-          <Table aria-label="Table" {...tableProps}>
-            <TableHeader {...tableHeaderProps} />
-            <TableBody {...tableBodyProps} />
-          </Table>
-        )
-      }
+      <TableComponent {...{ ...tableToolsProps, ...{ toolbarProps } }} />
 
       <TableToolbar isFooter {...tableToolbarProps}>
         {toolbarProps.pagination && (
@@ -101,6 +74,7 @@
 };
 
 TableToolsTable.propTypes = {
+  tableToolsTableVariant: propTypes.string,
   items: propTypes.oneOfType([propTypes.array, propTypes.func]).isRequired,
   columns: propTypes.arrayOf(
     propTypes.shape({

src/components/TableToolsTable/TableToolsTable.stories.js

@@ -37,6 +37,7 @@ const defaultOptions = {
 
 const argProps = {
   debug: propTypes.bool,
+  composable: propTypes.bool,
   columns: propTypes.array,
   filters: propTypes.array,
   filtered: propTypes.bool,
@@ -62,6 +63,7 @@ const meta = {
   title: 'TableToolsTable',
   args: {
     debug: true,
+    composable: false,
     columns,
     filters,
     filtered: true,
@@ -105,6 +107,7 @@ const emptyRows = (_kind, colSpan) => [
 
 const CommonExample = ({
   debug,
+  composable,
   columns,
   filters,
   filtered,
@@ -144,6 +147,11 @@ const CommonExample = ({
 
   return (
     <TableToolsTable
+      {...(composable
+        ? {
+            tableToolsTableVariant: 'composable',
+          }
+        : {})}
       loading={loading}
       items={data}
       total={total}

src/components/TableToolsTable/components/ComposableTable/ComposableTable.js

@@ -0,0 +1,67 @@
+import React, { useEffect } from 'react';
+import { Table, Th } from '@patternfly/react-table';
+import { SkeletonTable } from '@patternfly/react-component-groups';
+
+import TableHead from './components/TableHead';
+import TableBody from './components/TableBody';
+import useTableToolsForComposable from './hooks/useTableToolsForComposable';
+
+const ComposableTable = (props) => {
+  const composableTableProps = useTableToolsForComposable(props);
+  const {
+    columns,
+    rows,
+    view,
+    loading,
+    tableTree,
+    pagination,
+    bulkSelect,
+    expandable,
+    total,
+  } = composableTableProps;
+
+  useEffect(() => {
+    console.group('ComposableTable props');
+    console.warn(
+      'Note: The "composable" variant is considered experimental and not fully featured yet.',
+    );
+
+    console.log('props', props);
+    console.log('composableTableProps', composableTableProps);
+
+    console.groupEnd();
+  }, [composableTableProps, props]);
+
+  return (view === 'rows' || (view === 'tree' && !tableTree)) && loading ? (
+    <SkeletonTable
+      rowsCount={pagination?.perPage || 10}
+      columns={columns.map(({ title, sortable }) => (
+        <Th
+          key={title}
+          {...(sortable
+            ? { sort: { columnIndex: 0, sortBy: { property: sortable } } }
+            : {})}
+        >
+          {title}
+        </Th>
+      ))}
+    />
+  ) : (
+    <Table>
+      <TableHead
+        columns={columns}
+        hasBulkSelect={!!bulkSelect}
+        isExpandable={!!expandable}
+      />
+      <TableBody
+        columns={columns}
+        rows={rows}
+        total={total}
+        bulkSelect={bulkSelect}
+        expandable={expandable}
+      />
+    </Table>
+  );
+};
+
+export default ComposableTable;

src/components/TableToolsTable/components/ComposableTable/components/Cell.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import propTypes from 'prop-types';
+import { Td } from '@patternfly/react-table';
+
+const Cell = ({ row, column: { title, key, Component } }) => (
+  <Td>
+    {Component ? (
+      <Component {...row.item} />
+    ) : (
+      row.item[key || title?.toLowerCase()]
+    )}
+  </Td>
+);
+
+Cell.propTypes = {
+  row: propTypes.object,
+  column: propTypes.object,
+};
+
+export default Cell;

src/components/TableToolsTable/components/ComposableTable/components/TableBody.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import propTypes from 'prop-types';
+import { Tbody, Td, Tr } from '@patternfly/react-table';
+
+import NoResultsTable from '~/components/NoResultsTable';
+
+import Cell from './Cell';
+
+const TableBody = ({ total, columns, rows, bulkSelect, expandable }) => (
+  <Tbody>
+    {total === 0 ? (
+      <Tr>
+        <Td colSpan={columns?.length + (bulkSelect ? 1 : 0)}>
+          <NoResultsTable />
+        </Td>
+      </Tr>
+    ) : (
+      rows?.map((row, idx) => (
+        <Tr key={row?.item?.id || idx}>
+          {!!expandable && (
+            <Td
+              {...(expandable
+                ? {
+                    expand: {
+                      rowIndex: idx,
+                      isExpanded: expandable.isExpanded(row?.item?.itemId),
+                      onToggle: () => expandable.onToggle(row?.item?.itemId),
+                    },
+                  }
+                : {})}
+            />
+          )}
+          {!!bulkSelect && (
+            <Td
+              {...(bulkSelect
+                ? {
+                    select: {
+                      rowIndex: idx,
+                      onSelect: () => bulkSelect.selectOne(row?.item),
+                      isSelected: bulkSelect.isItemSelected(row?.item?.itemId),
+                    },
+                  }
+                : {})}
+            />
+          )}
+
+          {columns.map((column) => (
+            <Cell key={column.title + `-${idx}`} row={row} column={column} />
+          ))}
+        </Tr>
+      ))
+    )}
+  </Tbody>
+);
+
+TableBody.propTypes = {
+  rows: propTypes.array,
+  columns: propTypes.array,
+};
+
+export default TableBody;

src/components/TableToolsTable/components/ComposableTable/components/TableHead.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import propTypes from 'prop-types';
+import { Thead, Tr, Th } from '@patternfly/react-table';
+
+const TableHead = ({ columns, hasBulkSelect, isExpandable }) => (
+  <Thead>
+    <Tr>
+      {hasBulkSelect && <Th />}
+      {isExpandable && <Th />}
+      {columns.map(({ title, sortable }, idx) => (
+        <Th
+          key={title}
+          {...(sortable
+            ? {
+                sort: {
+                  columnIndex: idx,
+                  sortBy: { property: sortable },
+                  onSort: (_event, index, direction, ...args) => {
+                    console.log(_event, index, direction, ...args);
+                  },
+                },
+              }
+            : {})}
+        >
+          {title}
+        </Th>
+      ))}
+    </Tr>
+  </Thead>
+);
+
+TableHead.propTypes = {
+  columns: propTypes.object,
+  hasBulkSelect: propTypes.bool,
+};
+
+export default TableHead;

src/components/TableToolsTable/components/ComposableTable/hooks/useTableToolsForComposable.js

@@ -0,0 +1,51 @@
+import { useMemo } from 'react';
+
+/**
+ * This hook is an adapter to put required props into the right place and
+ * form to be consumable by the ComposableTable components
+ *
+ *  @param   {object} [options] AsyncTableTools options
+ *
+ *  @returns {object}
+ *
+ *  @group Hooks
+ *
+ */
+const useTableToolsForComposable = ({
+  loading,
+  view,
+  total,
+  bulkSelect,
+  expandable,
+  tableProps: { cells: columns, rows, tableTree },
+  toolbarProps: { pagination },
+}) => {
+  const composableReturn = useMemo(
+    () => ({
+      columns,
+      rows,
+      tableTree,
+      loading,
+      view,
+      pagination,
+      bulkSelect,
+      expandable,
+      total,
+    }),
+    [
+      columns,
+      rows,
+      tableTree,
+      loading,
+      view,
+      pagination,
+      bulkSelect,
+      total,
+      expandable,
+    ],
+  );
+
+  return composableReturn;
+};
+
+export default useTableToolsForComposable;