feat: migrate to tanstack table

libs/features/automation-control/src/AutomationControlEditor.tsx

@@ -66,12 +66,12 @@ export const AutomationControlEditor = () => {
 
   const {
     rows,
-    visibleRows,
+    treeRows,
+    getSubRows,
     hasError,
     loading,
     fetchData,
     refreshProcessBuilders,
-    toggleRowExpand,
     updateIsActiveFlag,
     toggleAll,
     resetChanges,
@@ -290,7 +290,6 @@ export const AutomationControlEditor = () => {
             <Icon type="utility" icon="refresh" className="slds-button__icon slds-button__icon_left" />
             Deselect All
           </button> */}
-          <SearchInput id="quick-filter" placeholder="Filter items..." className="slds-m-left_small" onChange={setQuickFilterText} />
         </ToolbarItemGroup>
         <ToolbarItemActions>
           <button
@@ -333,7 +332,8 @@ export const AutomationControlEditor = () => {
         <Grid>
           <Grid className="slds-grow slds-box_small slds-theme_default slds-is-relative" verticalAlign="center" wrap>
             {loading && <Spinner size="small"></Spinner>}
-            <ButtonGroupContainer>
+            <SearchInput id="quick-filter" placeholder="Filter items..." onChange={setQuickFilterText} />
+            <ButtonGroupContainer className="slds-m-horizontal_small">
               <button
                 className={classNames('slds-button slds-button_neutral')}
                 title="Enable All"
@@ -353,14 +353,16 @@ export const AutomationControlEditor = () => {
                 Disable All
               </button>
             </ButtonGroupContainer>
-            <Badge className="slds-m-left_x-small">
+            <Badge>
               {formatNumber(dirtyCount)} {pluralizeFromNumber('item', dirtyCount)} modified
             </Badge>
-            {selectedAutomationTypes.includes('FlowProcessBuilder') && (
-              <div className="slds-col_bump-left">
-                <AutomationControlLastRefreshedPopover onRefresh={handleRefreshProcessBuilders} />
-              </div>
-            )}
+            <div className="slds-col_bump-left">
+              {selectedAutomationTypes.includes('FlowProcessBuilder') && (
+                <div className="slds-m-left_small">
+                  <AutomationControlLastRefreshedPopover onRefresh={handleRefreshProcessBuilders} />
+                </div>
+              )}
+            </div>
           </Grid>
         </Grid>
       </div>
@@ -391,9 +393,9 @@ export const AutomationControlEditor = () => {
                 serverUrl={serverUrl}
                 skipFrontdoorLogin={skipFrontdoorLogin}
                 selectedOrg={selectedOrg}
-                rows={visibleRows}
+                rows={treeRows}
+                getSubRows={getSubRows}
                 quickFilterText={quickFilterText}
-                toggleRowExpand={toggleRowExpand}
                 updateIsActiveFlag={updateIsActiveFlag}
                 onSortedAndFilteredRowsChange={tableRowsChange}
               />

libs/features/automation-control/src/AutomationControlEditorReviewModal.tsx

@@ -2,10 +2,10 @@ import { css } from '@emotion/react';
 import { logger } from '@jetstream/shared/client-logger';
 import { ANALYTICS_KEYS } from '@jetstream/shared/constants';
 import { SalesforceOrgUi } from '@jetstream/types';
+import type { Column } from '@jetstream/ui';
 import { AutoFullHeightContainer, DataTable, Icon, Modal, Spinner } from '@jetstream/ui';
 import { ConfirmPageChange, useAmplitude } from '@jetstream/ui-core';
 import { Fragment, FunctionComponent, useCallback, useEffect, useMemo, useState } from 'react';
-import { Column } from 'react-data-grid';
 import { deployMetadata, getAutomationTypeLabel, preparePayloads } from './automation-control-data-utils';
 import { AutomationDeployStatusRenderer, BooleanAndVersionRenderer } from './automation-control-table-renderers';
 import {

libs/features/automation-control/src/AutomationControlEditorTable.tsx

@@ -9,12 +9,12 @@ import {
   copyGenericTableDataToClipboard,
   setColumnFromType,
 } from '@jetstream/ui';
-import { forwardRef, useCallback, useMemo } from 'react';
+import { ReactNode, forwardRef, useCallback, useMemo } from 'react';
 import { isTableRow } from './automation-control-data-utils';
 import { AdditionalDetailRenderer, ExpandingLabelRenderer, LoadingAndActiveRenderer } from './automation-control-table-renderers';
 import { TableRowOrItemOrChild } from './automation-control-types';
 
-const getRowHeight = (row: TableRowOrItemOrChild) => {
+const getRowHeight = ({ row }: { type: 'ROW' | 'GROUP'; row: TableRowOrItemOrChild }) => {
   if (isTableRow(row)) {
     return 28.5;
   }
@@ -38,24 +38,15 @@ export interface AutomationControlEditorTableProps {
   skipFrontdoorLogin: boolean;
   selectedOrg: SalesforceOrgUi;
   rows: TableRowOrItemOrChild[];
+  getSubRows: (row: TableRowOrItemOrChild, index: number) => TableRowOrItemOrChild[] | undefined;
   quickFilterText?: string | null;
-  toggleRowExpand: (row: TableRowOrItemOrChild, value: boolean) => void;
   updateIsActiveFlag: (row: TableRowOrItemOrChild, value: boolean) => void;
   onSortedAndFilteredRowsChange: (rows: readonly TableRowOrItemOrChild[]) => void;
 }
 
 export const AutomationControlEditorTable = forwardRef<any, AutomationControlEditorTableProps>(
   (
-    {
-      serverUrl,
-      skipFrontdoorLogin,
-      selectedOrg,
-      rows,
-      quickFilterText,
-      toggleRowExpand,
-      updateIsActiveFlag,
-      onSortedAndFilteredRowsChange,
-    },
+    { serverUrl, skipFrontdoorLogin, selectedOrg, rows, getSubRows, quickFilterText, updateIsActiveFlag, onSortedAndFilteredRowsChange },
     ref,
   ) => {
     const columns = useMemo(() => {
@@ -65,14 +56,17 @@ export const AutomationControlEditorTable = forwardRef<any, AutomationControlEdi
           name: 'Automation Item',
           key: 'label',
           width: 400,
-          renderCell: ({ column, row }) => {
+          renderCell: ({ row, value, depth, canExpand, isExpanded, toggleExpanded }) => {
             return (
               <ExpandingLabelRenderer
                 serverUrl={serverUrl}
                 selectedOrg={selectedOrg}
-                column={column}
                 row={row}
-                toggleRowExpand={toggleRowExpand}
+                value={value as ReactNode}
+                depth={depth}
+                canExpand={canExpand}
+                isExpanded={isExpanded}
+                toggleExpanded={toggleExpanded}
               />
             );
           },
@@ -113,7 +107,7 @@ export const AutomationControlEditorTable = forwardRef<any, AutomationControlEdi
           renderCell: AdditionalDetailRenderer,
         },
       ] as ColumnWithFilter<TableRowOrItemOrChild>[];
-    }, [serverUrl, selectedOrg, toggleRowExpand, updateIsActiveFlag]);
+    }, [serverUrl, selectedOrg, updateIsActiveFlag]);
 
     const fields = useMemo(() => columns.map((col) => col.key), [columns]);
 
@@ -132,6 +126,8 @@ export const AutomationControlEditorTable = forwardRef<any, AutomationControlEdi
           org={selectedOrg}
           data={rows}
           columns={columns}
+          getSubRows={getSubRows}
+          defaultExpanded
           rowClass={getRowClass}
           includeQuickFilter
           quickFilterText={quickFilterText}

libs/features/automation-control/src/automation-control-table-renderers.tsx

@@ -1,25 +1,30 @@
 import { css } from '@emotion/react';
 import { Maybe, SalesforceOrgUi } from '@jetstream/types';
-import { Checkbox, CopyToClipboard, Grid, GridCol, Icon, SalesforceLogin, Spinner, Tooltip } from '@jetstream/ui';
+import type { RenderCellProps } from '@jetstream/ui';
+import { Checkbox, CopyToClipboard, Grid, GridCol, Icon, SalesforceLogin, Spinner, Tooltip, TreeExpander } from '@jetstream/ui';
 import classNames from 'classnames';
 import isNumber from 'lodash/isNumber';
 import isString from 'lodash/isString';
 import uniqueId from 'lodash/uniqueId';
 import { FunctionComponent, ReactNode } from 'react';
-import { CalculatedColumn, RenderCellProps } from 'react-data-grid';
-import { isTableRow, isTableRowChild, isTableRowItem } from './automation-control-data-utils';
+import { isTableRow, isTableRowItem } from './automation-control-data-utils';
 import { DeploymentItemRow, DeploymentItemStatus, MetadataCompositeResponseError, TableRowOrItemOrChild } from './automation-control-types';
 
+/**
+ * Label cell for the automation-control tree. Indentation + the expand/collapse chevron come from the
+ * grid's native tree (`getSubRows`) via the shared `TreeExpander` — see the `depth`/`canExpand`/
+ * `isExpanded`/`toggleExpanded` props forwarded from `DataTableCellProps`.
+ */
 export const ExpandingLabelRenderer: FunctionComponent<{
   serverUrl: string;
   selectedOrg: SalesforceOrgUi;
-  column: CalculatedColumn<TableRowOrItemOrChild, unknown>;
   row: TableRowOrItemOrChild;
-  toggleRowExpand: (row: TableRowOrItemOrChild, value: boolean) => void;
-}> = ({ serverUrl, selectedOrg, column, row, toggleRowExpand }) => {
-  const value = row[column.key as keyof TableRowOrItemOrChild];
-  const leftMargin = isTableRowItem(row) ? 2 : isTableRowChild(row) ? 4.5 : 0;
-
+  value: ReactNode;
+  depth: number;
+  canExpand: boolean;
+  isExpanded: boolean;
+  toggleExpanded: () => void;
+}> = ({ serverUrl, selectedOrg, row, value, depth, canExpand, isExpanded, toggleExpanded }) => {
   const wrappedValue =
     !isTableRow(row) && row.link && serverUrl && selectedOrg ? (
       <SalesforceLogin
@@ -36,36 +41,18 @@ export const ExpandingLabelRenderer: FunctionComponent<{
       value
     );
 
-  if (isTableRow(row) || (isTableRowItem(row) && Array.isArray(row.children) && row.children.length)) {
-    return (
-      <Grid
-        verticalAlign="center"
+  return (
+    <TreeExpander depth={depth} canExpand={canExpand} isExpanded={isExpanded} onToggle={toggleExpanded}>
+      <div
         css={css`
-          margin-left: ${leftMargin}rem;
+          line-height: 1.5;
+          overflow-wrap: break-word;
+          white-space: normal;
         `}
       >
-        <button className="slds-button slds-button_icon slds-button_icon-container" onClick={() => toggleRowExpand(row, !row.isExpanded)}>
-          <Icon type="utility" icon={row.isExpanded ? 'chevrondown' : 'chevronright'} className="slds-button__icon" omitContainer />
-        </button>
-
-        <div>{wrappedValue}</div>
-      </Grid>
-    );
-  }
-
-  return (
-    <div
-      css={css`
-        margin-left: ${leftMargin}rem;
-        display: inline-block;
-        line-height: 1.5;
-        overflow-wrap: break-word;
-        white-space: normal;
-        text-align: justify;
-      `}
-    >
-      {wrappedValue}
-    </div>
+        {wrappedValue}
+      </div>
+    </TreeExpander>
   );
 };