jetstreamapp · paustint · Jul 2, 2023 · Jul 1, 2023
diff --git a/apps/jetstream/src/app/components/automation-control/AutomationControlEditorReviewModal.tsx b/apps/jetstream/src/app/components/automation-control/AutomationControlEditorReviewModal.tsx
@@ -5,8 +5,8 @@ import { SalesforceOrgUi } from '@jetstream/types';
 import { AutoFullHeightContainer, DataTable, Icon, Modal, Spinner } from '@jetstream/ui';
 import { Fragment, FunctionComponent, useCallback, useEffect, useMemo, useState } from 'react';
 import { Column } from 'react-data-grid';
-import { useAmplitude } from '../core/analytics';
 import ConfirmPageChange from '../core/ConfirmPageChange';
+import { useAmplitude } from '../core/analytics';
 import { deployMetadata, getAutomationTypeLabel, preparePayloads } from './automation-control-data-utils';
 import { AutomationDeployStatusRenderer, BooleanAndVersionRenderer } from './automation-control-table-renderers';
 import {
@@ -37,21 +37,21 @@ const COLUMNS: Column<DeploymentItemRow>[] = [
   {
     name: 'Old Value',
     key: 'isActiveInitialState',
-    formatter: BooleanAndVersionRenderer,
+    renderCell: BooleanAndVersionRenderer,
     width: 130,
     cellClass: 'bg-color-gray',
   },
   {
     name: 'New Value',
     key: 'isActive',
-    formatter: BooleanAndVersionRenderer,
+    renderCell: BooleanAndVersionRenderer,
     width: 130,
     cellClass: 'active-item-yellow-bg',
   },
   {
     name: 'Status',
     key: 'status',
-    formatter: AutomationDeployStatusRenderer,
+    renderCell: AutomationDeployStatusRenderer,
     width: 200,
   },
 ];

diff --git a/apps/jetstream/src/app/components/automation-control/AutomationControlEditorTable.tsx b/apps/jetstream/src/app/components/automation-control/AutomationControlEditorTable.tsx
@@ -43,7 +43,7 @@ export const AutomationControlEditorTable = forwardRef<any, AutomationControlEdi
           name: 'Automation Item',
           key: 'label',
           width: 400,
-          formatter: ({ column, row }) => {
+          renderCell: ({ column, row }) => {
             return (
               <ExpandingLabelRenderer
                 serverUrl={serverUrl}
@@ -67,7 +67,7 @@ export const AutomationControlEditorTable = forwardRef<any, AutomationControlEdi
           key: 'isActive',
           width: 110,
           cellClass: (row) => (!isTableRow(row) && row.isActive !== row.isActiveInitialState ? 'active-item-yellow-bg' : ''),
-          formatter: ({ row }) => {
+          renderCell: ({ row }) => {
             return <LoadingAndActiveRenderer row={row} updateIsActiveFlag={updateIsActiveFlag} />;
           },
         },
@@ -88,7 +88,7 @@ export const AutomationControlEditorTable = forwardRef<any, AutomationControlEdi
           width: 400,
           filters: null,
           sortable: false,
-          formatter: AdditionalDetailRenderer,
+          renderCell: AdditionalDetailRenderer,
         },
       ] as ColumnWithFilter<TableRowOrItemOrChild>[];
     }, []);

diff --git a/apps/jetstream/src/app/components/automation-control/automation-control-table-renderers.tsx b/apps/jetstream/src/app/components/automation-control/automation-control-table-renderers.tsx
@@ -5,7 +5,7 @@ import classNames from 'classnames';
 import isNumber from 'lodash/isNumber';
 import uniqueId from 'lodash/uniqueId';
 import { FunctionComponent } from 'react';
-import { CalculatedColumn, FormatterProps } from 'react-data-grid';
+import { CalculatedColumn, RenderCellProps } from 'react-data-grid';
 import { isTableRow, isTableRowChild, isTableRowItem } from './automation-control-data-utils';
 import { DeploymentItemRow, DeploymentItemStatus, MetadataCompositeResponseError, TableRowOrItemOrChild } from './automation-control-types';
 
@@ -104,7 +104,7 @@ export const LoadingAndActiveRenderer: FunctionComponent<{
   }
 };
 
-export const AdditionalDetailRenderer: FunctionComponent<FormatterProps<TableRowOrItemOrChild, unknown>> = ({ row }) => {
+export const AdditionalDetailRenderer: FunctionComponent<RenderCellProps<TableRowOrItemOrChild, unknown>> = ({ row }) => {
   if (!isTableRow(row) && Array.isArray(row.additionalData) && row.additionalData.length > 0) {
     return (
       <Grid vertical className="slds-line-height_reset">
@@ -132,7 +132,7 @@ export const AdditionalDetailRenderer: FunctionComponent<FormatterProps<TableRow
   return null;
 };
 
-export const BooleanAndVersionRenderer: FunctionComponent<FormatterProps<DeploymentItemRow, unknown>> = ({ column, row }) => {
+export const BooleanAndVersionRenderer: FunctionComponent<RenderCellProps<DeploymentItemRow, unknown>> = ({ column, row }) => {
   const metadata = row;
   const type = metadata.type;
   const value = metadata[column.key];
@@ -182,7 +182,7 @@ function getErrorMessageContentString(deployError: Maybe<MetadataCompositeRespon
   }
 }
 
-export const AutomationDeployStatusRenderer: FunctionComponent<FormatterProps<DeploymentItemRow, unknown>> = ({ row }) => {
+export const AutomationDeployStatusRenderer: FunctionComponent<RenderCellProps<DeploymentItemRow, unknown>> = ({ row }) => {
   const { status, deploy } = row;
   const { deployError } = deploy;
   const isLoading = loadingStatuses.includes(status);

diff --git a/apps/jetstream/src/app/components/core/ViewChildRecords.tsx b/apps/jetstream/src/app/components/core/ViewChildRecords.tsx
@@ -101,7 +101,7 @@ export const ViewChildRecords: FunctionComponent<ViewChildRecordsProps> = ({
         name: '',
         width: 40,
         frozen: true,
-        groupFormatter: ({ isExpanded }) => (
+        renderGroupCell: ({ isExpanded }) => (
           <Grid align="end" verticalAlign="center" className="h-100">
             <Icon
               icon={isExpanded ? 'chevrondown' : 'chevronright'}
@@ -116,7 +116,7 @@ export const ViewChildRecords: FunctionComponent<ViewChildRecordsProps> = ({
         ...setColumnFromType('Id', 'text'),
         key: 'Id',
         name: 'Id',
-        formatter: ({ row }) => {
+        renderCell: ({ row }) => {
           return (
             <Grid>
               <SalesforceLogin
@@ -131,7 +131,7 @@ export const ViewChildRecords: FunctionComponent<ViewChildRecordsProps> = ({
             </Grid>
           );
         },
-        groupFormatter: ({ toggleGroup, groupKey, childRows }) => (
+        renderGroupCell: ({ toggleGroup, groupKey, childRows }) => (
           <button
             css={css`
               white-space: nowrap;

diff --git a/apps/jetstream/src/app/components/debug-log-viewer/DebugLogViewerTable.tsx b/apps/jetstream/src/app/components/debug-log-viewer/DebugLogViewerTable.tsx
@@ -2,9 +2,9 @@ import { css } from '@emotion/react';
 import { ApexLogWithViewed } from '@jetstream/types';
 import { AutoFullHeightContainer, ColumnWithFilter, DataTable, Icon, setColumnFromType } from '@jetstream/ui';
 import { FunctionComponent, useEffect, useRef } from 'react';
-import { CellClickArgs, FormatterProps } from 'react-data-grid';
+import { CellClickArgs, RenderCellProps } from 'react-data-grid';
 
-export const LogViewedRenderer: FunctionComponent<FormatterProps<ApexLogWithViewed>> = ({ row }) => {
+export const LogViewedRenderer: FunctionComponent<RenderCellProps<ApexLogWithViewed>> = ({ row }) => {
   if (row?.viewed) {
     return (
       <Icon
@@ -27,7 +27,7 @@ const COLUMNS: ColumnWithFilter<ApexLogWithViewed>[] = [
     name: '',
     key: 'viewed',
     width: 12,
-    formatter: LogViewedRenderer,
+    renderCell: LogViewedRenderer,
     resizable: false,
     // TODO: filter for this
   },

diff --git a/...etstream/src/app/components/deploy/deploy-metadata-history/DeployMetadataHistoryTable.tsx b/...etstream/src/app/components/deploy/deploy-metadata-history/DeployMetadataHistoryTable.tsx
@@ -24,21 +24,21 @@ const COLUMNS: ColumnWithFilter<SalesforceDeployHistoryItem>[] = [
     name: 'Type',
     key: 'type',
     width: 165,
-    formatter: ({ column, row }) => TYPE_MAP[row[column.key]],
+    renderCell: ({ column, row }) => TYPE_MAP[row[column.key]],
   },
   {
     ...setColumnFromType('destinationOrg', 'text'),
     name: 'Deployed To Org',
     key: 'destinationOrg',
-    formatter: OrgRenderer,
+    renderCell: OrgRenderer,
     getValue: ({ row }) => row.destinationOrg?.label,
     width: 350,
   },
   {
     ...setColumnFromType('status', 'text'),
     name: 'Status',
     key: 'status',
-    formatter: StatusRenderer,
+    renderCell: StatusRenderer,
     width: 150,
   },
   {
@@ -47,7 +47,7 @@ const COLUMNS: ColumnWithFilter<SalesforceDeployHistoryItem>[] = [
     width: 220,
     sortable: false,
     resizable: false,
-    formatter: ActionRenderer,
+    renderCell: ActionRenderer,
   },
 ];
 

diff --git a/...src/app/components/deploy/deploy-metadata-history/DeployMetadataHistoryTableRenderers.tsx b/...src/app/components/deploy/deploy-metadata-history/DeployMetadataHistoryTableRenderers.tsx
@@ -3,13 +3,13 @@ import { IconName } from '@jetstream/icon-factory';
 import { SalesforceDeployHistoryItem } from '@jetstream/types';
 import { DataTableGenericContext, Grid, Icon } from '@jetstream/ui';
 import { Fragment, useContext } from 'react';
-import { FormatterProps } from 'react-data-grid';
+import { RenderCellProps } from 'react-data-grid';
 import OrgLabelBadge from '../../core/OrgLabelBadge';
 import { DeployHistoryTableContext } from '../deploy-metadata.types';
 
 const fallbackLabel = 'Unknown Org';
 
-export function OrgRenderer({ row: item }: FormatterProps<SalesforceDeployHistoryItem>) {
+export function OrgRenderer({ row: item }: RenderCellProps<SalesforceDeployHistoryItem>) {
   const { orgsById } = useContext(DataTableGenericContext) as DeployHistoryTableContext;
 
   const sourceOrg = item.sourceOrg ? orgsById[item.sourceOrg.uniqueId] : null;
@@ -54,7 +54,7 @@ export function OrgRenderer({ row: item }: FormatterProps<SalesforceDeployHistor
   );
 }
 
-export function StatusRenderer({ row: item }: FormatterProps<SalesforceDeployHistoryItem>) {
+export function StatusRenderer({ row: item }: RenderCellProps<SalesforceDeployHistoryItem>) {
   let status: string = item.status;
   let icon: IconName = 'success';
   let iconClassName = 'slds-icon slds-icon_x-small slds-icon-text-success';
@@ -82,7 +82,7 @@ export function StatusRenderer({ row: item }: FormatterProps<SalesforceDeployHis
   );
 }
 
-export function ActionRenderer({ row: item }: FormatterProps<SalesforceDeployHistoryItem>) {
+export function ActionRenderer({ row: item }: RenderCellProps<SalesforceDeployHistoryItem>) {
   const { onDownload, onView } = useContext(DataTableGenericContext) as DeployHistoryTableContext;
 
   return (

diff --git a/apps/jetstream/src/app/components/deploy/utils/deploy-metadata.utils.tsx b/apps/jetstream/src/app/components/deploy/utils/deploy-metadata.utils.tsx
@@ -28,7 +28,7 @@ import type { DeployOptions } from 'jsforce';
 import JSZip from 'jszip';
 import localforage from 'localforage';
 import isString from 'lodash/isString';
-import { SelectColumn, SELECT_COLUMN_KEY } from 'react-data-grid';
+import { SELECT_COLUMN_KEY, SelectColumn } from 'react-data-grid';
 import { composeQuery, getField, Query } from 'soql-parser-js';
 import { DeployMetadataTableRow } from '../deploy-metadata.types';
 
@@ -224,7 +224,7 @@ export function getColumnDefinitions(): ColumnWithFilter<DeployMetadataTableRow>
       ...SelectColumn,
       key: SELECT_COLUMN_KEY,
       resizable: false,
-      formatter: (args) => {
+      renderCell: (args) => {
         const { row } = args;
         if (row.loading) {
           return null;
@@ -237,8 +237,8 @@ export function getColumnDefinitions(): ColumnWithFilter<DeployMetadataTableRow>
         }
         return <SelectFormatter {...args} />;
       },
-      headerRenderer: SelectHeaderRenderer,
-      groupFormatter: (args) => {
+      renderHeaderCell: SelectHeaderRenderer,
+      renderGroupCell: (args) => {
         const { childRows } = args;
         // Don't allow selection if child rows are loading
         if (childRows.length === 0 || (childRows.length === 1 && (childRows[0].loading || !childRows[0].metadata))) {
@@ -262,7 +262,7 @@ export function getColumnDefinitions(): ColumnWithFilter<DeployMetadataTableRow>
       key: 'typeLabel',
       width: 40,
       frozen: true,
-      groupFormatter: ({ isExpanded }) => (
+      renderGroupCell: ({ isExpanded }) => (
         <Grid align="end" verticalAlign="center" className="h-100">
           <Icon
             icon={isExpanded ? 'chevrondown' : 'chevronright'}
@@ -278,8 +278,8 @@ export function getColumnDefinitions(): ColumnWithFilter<DeployMetadataTableRow>
       name: 'Name',
       key: 'fullName',
       frozen: true,
-      formatter: ({ row }) => (row.loading ? <Spinner size={'x-small'} /> : row.fullName),
-      groupFormatter: ({ toggleGroup, groupKey, childRows }) => (
+      renderCell: ({ row }) => (row.loading ? <Spinner size={'x-small'} /> : row.fullName),
+      renderGroupCell: ({ toggleGroup, groupKey, childRows }) => (
         <>
           <button className="slds-button" onClick={toggleGroup}>
             {groupKey as string}

diff --git a/...tream/src/app/components/load-records/components/load-results/LoadRecordsResultsModal.tsx b/...tream/src/app/components/load-records/components/load-results/LoadRecordsResultsModal.tsx
@@ -5,12 +5,12 @@ import {
   ColumnWithFilter,
   CopyToClipboardWithToolTip,
   DataTable,
+  getRowTypeFromValue,
   Icon,
   Modal,
   setColumnFromType,
   Spinner,
 } from '@jetstream/ui';
-import { getRowTypeFromValue } from 'libs/ui/src/lib/data-table/data-table-utils';
 import { FunctionComponent, useCallback, useEffect, useRef, useState } from 'react';
 import { RowHeightArgs } from 'react-data-grid';
 
@@ -75,7 +75,7 @@ export const LoadRecordsResultsModal: FunctionComponent<LoadRecordsResultsModalP
                       {row?._errors}
                     </p>
                   )
-                : baseColumn.formatter,
+                : baseColumn.renderCell,
           };
         })
       );

diff --git a/.../jetstream/src/app/components/manage-permissions/utils/permission-manager-table-utils.tsx b/.../jetstream/src/app/components/manage-permissions/utils/permission-manager-table-utils.tsx
@@ -18,7 +18,7 @@ import {
 } from '@jetstream/ui';
 import startCase from 'lodash/startCase';
 import { Fragment, FunctionComponent, useContext, useRef, useState } from 'react';
-import { FormatterProps, SummaryFormatterProps } from 'react-data-grid';
+import { RenderCellProps, RenderSummaryCellProps } from 'react-data-grid';
 import {
   BulkActionCheckbox,
   DirtyRow,
@@ -205,7 +205,7 @@ export function getObjectColumns(
         return data && `${data.label} (${data.apiName})`;
       },
       summaryCellClass: 'bg-color-gray-dark no-outline',
-      summaryFormatter: ({ row }) => {
+      renderSummaryCell: ({ row }) => {
         if (row.type === 'HEADING') {
           return <ColumnSearchFilterSummary />;
         } else if (row.type === 'ACTION') {
@@ -220,9 +220,9 @@ export function getObjectColumns(
       width: 100,
       resizable: false,
       frozen: true,
-      formatter: RowActionRenderer,
+      renderCell: RowActionRenderer,
       summaryCellClass: ({ type }) => (type === 'HEADING' ? 'bg-color-gray' : null),
-      summaryFormatter: ({ row }) => {
+      renderSummaryCell: ({ row }) => {
         if (row.type === 'ACTION') {
           return <BulkActionRenderer />;
         }
@@ -353,7 +353,7 @@ export function getFieldColumns(
       width: 85,
       cellClass: 'bg-color-gray-dark',
       summaryCellClass: 'bg-color-gray-dark',
-      groupFormatter: ({ isExpanded }) => (
+      renderGroupCell: ({ isExpanded }) => (
         <Grid align="end" verticalAlign="center" className="h-100">
           <Icon
             icon={isExpanded ? 'chevrondown' : 'chevronright'}
@@ -370,7 +370,7 @@ export function getFieldColumns(
       key: 'tableLabel',
       frozen: true,
       width: 300,
-      groupFormatter: ({ groupKey, childRows, toggleGroup }) => (
+      renderGroupCell: ({ groupKey, childRows, toggleGroup }) => (
         <>
           <button className="slds-button" onClick={toggleGroup}>
             {groupKey as string}
@@ -379,7 +379,7 @@ export function getFieldColumns(
         </>
       ),
       summaryCellClass: 'bg-color-gray-dark no-outline',
-      summaryFormatter: ({ row }) => {
+      renderSummaryCell: ({ row }) => {
         if (row.type === 'HEADING') {
           return <ColumnSearchFilterSummary />;
         } else if (row.type === 'ACTION') {
@@ -394,9 +394,9 @@ export function getFieldColumns(
       width: 100,
       resizable: false,
       frozen: true,
-      formatter: RowActionRenderer,
+      renderCell: RowActionRenderer,
       summaryCellClass: ({ type }) => (type === 'HEADING' ? 'bg-color-gray' : null),
-      summaryFormatter: ({ row }) => {
+      renderSummaryCell: ({ row }) => {
         if (row.type === 'ACTION') {
           return <BulkActionRenderer />;
         }
@@ -488,7 +488,7 @@ function getColumnForProfileOrPermSet<T extends PermissionType>({
       return '';
     },
     colSpan: (args) => (args.type === 'HEADER' && isFirstItem ? numItems : undefined),
-    formatter: ({ column, isCellSelected, row, onRowChange }) => {
+    renderCell: ({ row, onRowChange }) => {
       const errorMessage = row.permissions[id].errorMessage;
       const value = row.permissions[id][actionKey as any];
 
@@ -549,7 +549,7 @@ function getColumnForProfileOrPermSet<T extends PermissionType>({
     },
     getValue: ({ column, row }) => row.permissions[id][actionKey as any],
     summaryCellClass: ({ type }) => (type === 'HEADING' ? 'bg-color-gray' : null),
-    summaryFormatter: (args) => {
+    renderSummaryCell: (args) => {
       if (args.row.type === 'HEADING') {
         return <SummaryFilterRenderer columnKey={`${id}-${actionKey}`} label={actionType} />;
       }
@@ -780,8 +780,7 @@ export function updateRowsFromRowAction<TRows extends PermissionTableObjectCell
 /**
  * Pinned row selection renderer
  */
-//  export const IdLinkRenderer: FunctionComponent<FormatterProps<any, unknown>> = ({ column, row, onRowChange, isCellSelected }) => {
-export const PinnedSelectAllRendererWrapper: FunctionComponent<SummaryFormatterProps<any, unknown>> = ({ column }) => {
+export const PinnedSelectAllRendererWrapper: FunctionComponent<RenderSummaryCellProps<any, unknown>> = ({ column }) => {
   const { onColumnAction } = useContext(DataTableGenericContext) as PermissionManagerTableContext;
 
   function handleSelection(action: 'selectAll' | 'unselectAll' | 'reset') {
@@ -947,7 +946,7 @@ function getDirtyCount({
  *
  * This component provides a popover that the user can open to make changes that apply to an entire row
  */
-export const RowActionRenderer: FunctionComponent<FormatterProps<PermissionTableObjectCell | PermissionTableFieldCell>> = ({
+export const RowActionRenderer: FunctionComponent<RenderCellProps<PermissionTableObjectCell | PermissionTableFieldCell>> = ({
   column,
   onRowChange,
   row,