Merge pull request #626 from jetstreamapp/react-data-grid/7.0.0-beta.41

Upgrade React Data Grid
jetstreamapp · Nov 26, 2023 · 890ef29 · 890ef29
2 parents f1e3ee2 + 36c4800
commit 890ef29
Show file tree

Hide file tree

Showing 19 changed files with 594 additions and 442 deletions.
diff --git a/apps/jetstream/src/app/components/core/ViewChildRecords.tsx b/apps/jetstream/src/app/components/core/ViewChildRecords.tsx
@@ -9,7 +9,7 @@ import { Maybe, Record, SalesforceOrgUi } from '@jetstream/types';
 import {
   AutoFullHeightContainer,
   ColumnWithFilter,
-  DataTable,
+  DataTree,
   Grid,
   Icon,
   PopoverErrorButton,
@@ -346,7 +346,7 @@ export const ViewChildRecords: FunctionComponent<ViewChildRecordsProps> = ({
         </Tooltip>
       </Grid>
       <AutoFullHeightContainer fillHeight setHeightAttr bottomBuffer={155}>
-        <DataTable
+        <DataTree
           columns={columns}
           data={rows}
           getRowKey={getRowId}

diff --git a/apps/jetstream/src/app/components/debug-log-viewer/DebugLogViewerTable.tsx b/apps/jetstream/src/app/components/debug-log-viewer/DebugLogViewerTable.tsx
@@ -29,43 +29,48 @@ const COLUMNS: ColumnWithFilter<ApexLogWithViewed>[] = [
     width: 12,
     renderCell: LogViewedRenderer,
     resizable: false,
-    // TODO: filter for this
   },
   {
     ...setColumnFromType('LogUser.Name', 'text'),
     name: 'User',
     key: 'LogUser.Name',
     width: 125,
+    draggable: true,
   },
   {
     ...setColumnFromType('Application', 'text'),
     name: 'Application',
     key: 'Application',
     width: 125,
+    draggable: true,
   },
   {
     ...setColumnFromType('Operation', 'text'),
     name: 'Operation',
     key: 'Operation',
     width: 125,
+    draggable: true,
   },
   {
     ...setColumnFromType('Status', 'text'),
     name: 'Status',
     key: 'Status',
     width: 125,
+    draggable: true,
   },
   {
     ...setColumnFromType('LogLength', 'text'),
     name: 'Size',
     key: 'LogLength',
     width: 125,
+    draggable: true,
   },
   {
     ...setColumnFromType('LastModifiedDate', 'date'),
     name: 'Time',
     key: 'LastModifiedDate',
     width: 202,
+    draggable: true,
   },
 ];
 
@@ -96,7 +101,7 @@ export const DebugLogViewerTable: FunctionComponent<DebugLogViewerTableProps> =
 
   return (
     <AutoFullHeightContainer fillHeight setHeightAttr bottomBuffer={75}>
-      <DataTable allowReorder columns={COLUMNS} data={logs} getRowKey={getRowId} onCellClick={handleSelectionChanged} />
+      <DataTable columns={COLUMNS} data={logs} getRowKey={getRowId} onCellClick={handleSelectionChanged} />
     </AutoFullHeightContainer>
   );
 };

diff --git a/apps/jetstream/src/app/components/deploy/DeployMetadataDeploymentTable.tsx b/apps/jetstream/src/app/components/deploy/DeployMetadataDeploymentTable.tsx
@@ -1,5 +1,5 @@
 import { formatNumber } from '@jetstream/shared/ui-utils';
-import { AutoFullHeightContainer, ColumnWithFilter, DataTable, DataTableSelectedContext, Grid, Icon, SearchInput } from '@jetstream/ui';
+import { AutoFullHeightContainer, ColumnWithFilter, DataTableSelectedContext, DataTree, Grid, Icon, SearchInput } from '@jetstream/ui';
 import groupBy from 'lodash/groupBy';
 import { FunctionComponent, useEffect, useState } from 'react';
 import { DeployMetadataTableRow } from './deploy-metadata.types';
@@ -60,7 +60,7 @@ export const DeployMetadataDeploymentTable: FunctionComponent<DeployMetadataDepl
         </Grid>
       )}
       <AutoFullHeightContainer fillHeight setHeightAttr delayForSecondTopCalc bottomBuffer={15}>
-        <DataTable
+        <DataTree
           columns={columns}
           data={rows}
           getRowKey={getRowId}

diff --git a/...etstream/src/app/components/deploy/deploy-metadata-history/DeployMetadataHistoryTable.tsx b/...etstream/src/app/components/deploy/deploy-metadata-history/DeployMetadataHistoryTable.tsx
@@ -18,18 +18,21 @@ const COLUMNS: ColumnWithFilter<SalesforceDeployHistoryItem>[] = [
     name: 'Started',
     key: 'start',
     width: 200,
+    draggable: true,
   },
   {
     ...setColumnFromType('type', 'text'),
     name: 'Type',
     key: 'type',
     width: 165,
+    draggable: true,
     renderCell: ({ column, row }) => TYPE_MAP[row[column.key]],
   },
   {
     ...setColumnFromType('destinationOrg', 'text'),
     name: 'Deployed To Org',
     key: 'destinationOrg',
+    draggable: true,
     renderCell: OrgRenderer,
     getValue: ({ row }) => row.destinationOrg?.label,
     width: 350,
@@ -38,6 +41,7 @@ const COLUMNS: ColumnWithFilter<SalesforceDeployHistoryItem>[] = [
     ...setColumnFromType('status', 'text'),
     name: 'Status',
     key: 'status',
+    draggable: true,
     renderCell: StatusRenderer,
     width: 150,
   },
@@ -47,6 +51,7 @@ const COLUMNS: ColumnWithFilter<SalesforceDeployHistoryItem>[] = [
     width: 220,
     sortable: false,
     resizable: false,
+    draggable: true,
     renderCell: ActionRenderer,
   },
 ];
@@ -89,7 +94,7 @@ export const DeployMetadataHistoryTable: FunctionComponent<DeployMetadataHistory
     [orgsById, modalRef, onView, onDownload]
   );
   const getRowHeightFn = useMemo(() => getRowHeight(orgsById), [orgsById]);
-  return <DataTable allowReorder columns={COLUMNS} data={items} getRowKey={getRowId} context={context} rowHeight={getRowHeightFn} />;
+  return <DataTable columns={COLUMNS} data={items} getRowKey={getRowId} context={context} rowHeight={getRowHeightFn} />;
 };
 
 export default DeployMetadataHistoryTable;
diff --git a/apps/jetstream/src/app/components/manage-permissions/ManagePermissionsEditorFieldTable.tsx b/apps/jetstream/src/app/components/manage-permissions/ManagePermissionsEditorFieldTable.tsx
@@ -1,6 +1,6 @@
 import { useNonInitialEffect } from '@jetstream/shared/ui-utils';
 import { MapOf } from '@jetstream/types';
-import { AutoFullHeightContainer, ColumnWithFilter, DataTable } from '@jetstream/ui';
+import { AutoFullHeightContainer, ColumnWithFilter, DataTree } from '@jetstream/ui';
 import groupBy from 'lodash/groupBy';
 import { forwardRef, useCallback, useImperativeHandle, useState } from 'react';
 import { RowHeightArgs } from 'react-data-grid';
@@ -69,7 +69,7 @@ export const ManagePermissionsEditorFieldTable = forwardRef<any, ManagePermissio
     return (
       <div>
         <AutoFullHeightContainer fillHeight setHeightAttr bottomBuffer={15}>
-          <DataTable
+          <DataTree
             columns={columns}
             data={rows}
             getRowKey={getRowKey}

diff --git a/apps/jetstream/src/app/components/platform-event-monitor/PlatformEventMonitorEvents.tsx b/apps/jetstream/src/app/components/platform-event-monitor/PlatformEventMonitorEvents.tsx
@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
 import { orderStringsBy } from '@jetstream/shared/utils';
-import { AutoFullHeightContainer, ColumnWithFilter, DataTable } from '@jetstream/ui';
+import { AutoFullHeightContainer, ColumnWithFilter, DataTree } from '@jetstream/ui';
 import groupBy from 'lodash/groupBy';
 import { FunctionComponent, useEffect, useState } from 'react';
 import { RenderCellProps, RowHeightArgs } from 'react-data-grid';
@@ -40,18 +40,21 @@ const columns: ColumnWithFilter<PlatformEventRow>[] = [
     // autoHeight: true,
     renderCell: WrappedTextFormatter,
     cellClass: 'break-all',
+    draggable: true,
   },
   {
     name: 'UUID',
     key: 'uuid',
     width: 160,
     // tooltipField: 'uuid',
+    draggable: true,
   },
   {
     name: 'Replay Id',
     key: 'replayId',
     width: 120,
     // tooltipField: 'replayId',
+    draggable: true,
   },
 ];
 
@@ -107,8 +110,7 @@ export const PlatformEventMonitorEvents: FunctionComponent<PlatformEventMonitorE
 
   return (
     <AutoFullHeightContainer fillHeight setHeightAttr delayForSecondTopCalc bottomBuffer={25}>
-      <DataTable
-        allowReorder
+      <DataTree
         columns={columns}
         data={rows}
         getRowKey={getRowId}

diff --git a/apps/jetstream/src/app/components/salesforce-api/SalesforceApiExamplesModal.tsx b/apps/jetstream/src/app/components/salesforce-api/SalesforceApiExamplesModal.tsx
@@ -3,7 +3,7 @@ import { logger } from '@jetstream/shared/client-logger';
 import { ANALYTICS_KEYS } from '@jetstream/shared/constants';
 import { salesforceApiReq } from '@jetstream/shared/data';
 import { SalesforceApiRequest } from '@jetstream/types';
-import { AutoFullHeightContainer, ColumnWithFilter, DataTable, Grid, Icon, Modal, setColumnFromType, Spinner } from '@jetstream/ui';
+import { AutoFullHeightContainer, ColumnWithFilter, DataTree, Grid, Icon, Modal, setColumnFromType, Spinner } from '@jetstream/ui';
 import groupBy from 'lodash/groupBy';
 import { FunctionComponent, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
@@ -63,12 +63,12 @@ export const SalesforceApiExamplesModal: FunctionComponent<SalesforceApiExamples
         name: 'Group',
         key: 'groupName',
         width: 150,
-        preventReorder: true,
       },
       {
         name: 'action',
         key: 'action',
         width: 150,
+        draggable: true,
         renderCell: ({ row }) => {
           return (
             <button className={'slds-button slds-text-link_reset slds-text-link'} onClick={() => handleExecute(row)}>
@@ -77,9 +77,9 @@ export const SalesforceApiExamplesModal: FunctionComponent<SalesforceApiExamples
           );
         },
       },
-      { ...setColumnFromType('name', 'text'), name: 'Name', key: 'name', width: 250 },
-      { ...setColumnFromType('method', 'text'), name: 'Method', key: 'method', width: 110 },
-      { ...setColumnFromType('url', 'text'), name: 'url', key: 'url' /** flex: 1 */ },
+      { ...setColumnFromType('name', 'text'), name: 'Name', key: 'name', width: 250, draggable: true },
+      { ...setColumnFromType('method', 'text'), name: 'Method', key: 'method', width: 110, draggable: true },
+      { ...setColumnFromType('url', 'text'), name: 'url', key: 'url', draggable: true /** flex: 1 */ },
     ];
     return columns;
   }, []);
@@ -131,8 +131,7 @@ export const SalesforceApiExamplesModal: FunctionComponent<SalesforceApiExamples
           >
             {isLoading && <Spinner />}
             <AutoFullHeightContainer fillHeight setHeightAttr bottomBuffer={250}>
-              <DataTable
-                allowReorder
+              <DataTree
                 columns={COLUMNS}
                 data={requests}
                 getRowKey={(row: SalesforceApiRequest) => row.id}

diff --git a/libs/ui/src/index.ts b/libs/ui/src/index.ts
@@ -10,6 +10,7 @@ export * from './lib/color-picker/ColorSwatches';
 export * from './lib/confirmation-dialog/ConfirmationDialog';
 export * from './lib/data-table/DataTable';
 export * from './lib/data-table/DataTableRenderers';
+export * from './lib/data-table/DataTree';
 export * from './lib/data-table/SalesforceRecordDataTable';
 export * from './lib/data-table/data-table-context';
 export * from './lib/data-table/data-table-formatters';