From 218f51233e03ace3ceea56f0a164ba1abccae06e Mon Sep 17 00:00:00 2001 From: Austin Turner Date: Mon, 27 Nov 2023 20:54:50 -0700 Subject: [PATCH] Fix datatable bugs Deploy metadata did not set columns on first render which caused the data table to not render properly. This was fixed in the useDataTable to make sure that the columnOrder was reset properly and also fixed in the metadata data table to ensure the columns were available on the first render. Updated rowHeight functions for regular data tables to match changes with latest version of react data table (only TreeGrid has a type property) Increased column width on the automation control component Fix incorrect use of isMatch with dateFns when loading time fields --- .../AutomationControlEditorTable.tsx | 7 ++--- .../deploy/DeployMetadataDeploymentTable.tsx | 11 +++---- .../DeployMetadataHistoryTable.tsx | 29 ++++++++----------- .../components/LoadRecordsDataPreview.tsx | 12 +++++--- .../load-results/LoadRecordsResultsModal.tsx | 5 ++-- .../ManagePermissionsEditorObjectTable.tsx | 10 +------ libs/shared/utils/src/lib/utils.ts | 4 +-- libs/ui/src/index.ts | 2 +- libs/ui/src/lib/data-table/useDataTable.tsx | 1 + 9 files changed, 34 insertions(+), 47 deletions(-) diff --git a/apps/jetstream/src/app/components/automation-control/AutomationControlEditorTable.tsx b/apps/jetstream/src/app/components/automation-control/AutomationControlEditorTable.tsx index 17a306a74..94554d26a 100644 --- a/apps/jetstream/src/app/components/automation-control/AutomationControlEditorTable.tsx +++ b/apps/jetstream/src/app/components/automation-control/AutomationControlEditorTable.tsx @@ -1,13 +1,12 @@ import { SalesforceOrgUi } from '@jetstream/types'; import { ColumnWithFilter, DataTable, setColumnFromType } from '@jetstream/ui'; import { forwardRef, useMemo } from 'react'; -import { RowHeightArgs } from 'react-data-grid'; 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, type }: RowHeightArgs) => { - if (type === 'GROUP' || isTableRow(row)) { +const getRowHeight = (row: TableRowOrItemOrChild) => { + if (isTableRow(row)) { return 28.5; } if (row.additionalData.length > 1) { @@ -85,7 +84,7 @@ export const AutomationControlEditorTable = forwardRef = ({ rows, hasSelectedRows, onSelectedRows, onViewOrCompareOpen, }) => { - const [columns, setColumns] = useState[]>([]); const [visibleRows, setVisibleRows] = useState(rows); const [globalFilter, setGlobalFilter] = useState(null); const [selectedRowIds, setSelectedRowIds] = useState(new Set()); @@ -35,10 +36,6 @@ export const DeployMetadataDeploymentTable: FunctionComponent typeLabel))); }, [rows]); - useEffect(() => { - setColumns(getColumnDefinitions()); - }, []); - useEffect(() => { onSelectedRows(new Set(rows.filter((row) => selectedRowIds.has(getRowId(row))))); }, [onSelectedRows, rows, selectedRowIds]); @@ -61,7 +58,7 @@ export const DeployMetadataDeploymentTable: FunctionComponent [] = [ }, ]; -const getRowHeight = - (orgsById: MapOf) => - ({ row: item, type }: RowHeightArgs) => { - const rowHeight = 27.5; - let numberOfRows = 3; - if (type === 'ROW') { - if (item.type === 'orgToOrg') { - /** we need 3 rows plus a little buffer */ - numberOfRows = 3.5; - } else if (item.fileKey || (item.sourceOrg && orgsById[item.sourceOrg.uniqueId])) { - /** we need 3 rows */ - return 27.5 * 3; - } - } - return rowHeight * numberOfRows; - }; +const getRowHeight = (orgsById: MapOf) => (row: SalesforceDeployHistoryItem) => { + const rowHeight = 27.5; + let numberOfRows = 3; + if (row.type === 'orgToOrg') { + /** we need 3 rows plus a little buffer */ + numberOfRows = 3.5; + } else if (row.fileKey || (row.sourceOrg && orgsById[row.sourceOrg.uniqueId])) { + /** we need 3 rows */ + return 27.5 * 3; + } + return rowHeight * numberOfRows; +}; const getRowId = ({ key }: SalesforceDeployHistoryItem) => key; export interface DeployMetadataHistoryTableProps { diff --git a/apps/jetstream/src/app/components/load-records/components/LoadRecordsDataPreview.tsx b/apps/jetstream/src/app/components/load-records/components/LoadRecordsDataPreview.tsx index 480a44c80..ce1a6dde1 100644 --- a/apps/jetstream/src/app/components/load-records/components/LoadRecordsDataPreview.tsx +++ b/apps/jetstream/src/app/components/load-records/components/LoadRecordsDataPreview.tsx @@ -9,7 +9,9 @@ import type { DescribeGlobalSObjectResult } from 'jsforce'; import isNil from 'lodash/isNil'; import { FunctionComponent, useEffect, useRef, useState } from 'react'; import { Column } from 'react-data-grid'; +import { ErrorBoundary } from 'react-error-boundary'; import { useRecoilState } from 'recoil'; +import ErrorBoundaryFallback from '../../core/ErrorBoundaryFallback'; import * as fromLoadRecordsState from '../load-records.state'; const MAX_RECORD_FOR_PREVIEW = 100_000; @@ -180,7 +182,7 @@ export const LoadRecordsDataPreview: FunctionComponent {tooLargeToShowPreview &&

Your file is too large to show a preview

} - {columns && rows && ( + {Array.isArray(columns) && Array.isArray(rows) && (

File Preview

- - - + + + + +
)} diff --git a/apps/jetstream/src/app/components/load-records/components/load-results/LoadRecordsResultsModal.tsx b/apps/jetstream/src/app/components/load-records/components/load-results/LoadRecordsResultsModal.tsx index e0b3645c3..4aa53964e 100644 --- a/apps/jetstream/src/app/components/load-records/components/load-results/LoadRecordsResultsModal.tsx +++ b/apps/jetstream/src/app/components/load-records/components/load-results/LoadRecordsResultsModal.tsx @@ -12,7 +12,6 @@ import { Spinner, } from '@jetstream/ui'; import { FunctionComponent, useCallback, useEffect, useRef, useState } from 'react'; -import { RowHeightArgs } from 'react-data-grid'; const COL_WIDTH_MAP = { _id: 195, @@ -20,7 +19,7 @@ const COL_WIDTH_MAP = { _errors: 450, }; -const getRowHeight = ({ row, type }: RowHeightArgs) => (type === 'ROW' && row?._errors ? 75 : 25); +const getRowHeight = (row: any) => (row?._errors ? 75 : 25); export interface LoadRecordsResultsModalProps { type: 'results' | 'failures'; @@ -117,7 +116,7 @@ export const LoadRecordsResultsModal: FunctionComponent {loading && } - {rows && columns && ( + {Array.isArray(rows) && Array.isArray(columns) && ( ) { - if (type === 'ROW') { - return 24; - } - return 34; -} - // summary row is just a placeholder for rendered content const SUMMARY_ROWS: PermissionTableSummaryRow[] = [{ type: 'HEADING' }, { type: 'ACTION' }]; @@ -83,7 +75,7 @@ export const ManagePermissionsEditorObjectTable = forwardRef diff --git a/libs/shared/utils/src/lib/utils.ts b/libs/shared/utils/src/lib/utils.ts index e32cb1717..03708060b 100644 --- a/libs/shared/utils/src/lib/utils.ts +++ b/libs/shared/utils/src/lib/utils.ts @@ -524,7 +524,7 @@ const DATE_ERR_MESSAGE = 'There was an error reading one or more date fields in your file. Ensure date fields are properly formatted with a four character year.'; const TIME_ERR_MESSAGE = - 'There was an error reading one or more time fields in your file. Ensure date fields are properly formatted with a four character year.'; + 'There was an error reading one or more time fields in your file. Ensure time fields are properly formatted using or 00:00:00Z or 00:00:00.000Z.'; function transformDate(value: any, dateFormat: string): Maybe { if (!value) { @@ -609,7 +609,7 @@ function transformTime(value: string | null) { try { // Already in proper format - if (isMatch('HH:mm:ss.SSSZ', value) || isMatch('HH:mm:ssZ', value)) { + if (isMatch(value, `HH:mm:ss.SSS'Z'`) || isMatch(value, `HH:mm:ss'Z'`)) { return value; } // match local format first and convert to ISO diff --git a/libs/ui/src/index.ts b/libs/ui/src/index.ts index 26e2ac254..765c5fb1f 100644 --- a/libs/ui/src/index.ts +++ b/libs/ui/src/index.ts @@ -14,7 +14,7 @@ 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'; -export type { ColumnWithFilter, RowWithKey } from './lib/data-table/data-table-types'; +export type { ColumnWithFilter, ContextAction, ContextMenuActionData, RowWithKey } from './lib/data-table/data-table-types'; export { getColumnsForGenericTable, getRowTypeFromValue, getSfdcRetUrl, setColumnFromType } from './lib/data-table/data-table-utils'; export * from './lib/docked-composer/DockedComposer'; export * from './lib/expression-group/ExpressionContainer'; diff --git a/libs/ui/src/lib/data-table/useDataTable.tsx b/libs/ui/src/lib/data-table/useDataTable.tsx index 6ecc982c5..ac07fb572 100644 --- a/libs/ui/src/lib/data-table/useDataTable.tsx +++ b/libs/ui/src/lib/data-table/useDataTable.tsx @@ -108,6 +108,7 @@ export function useDataTable({ useNonInitialEffect(() => { setColumns(_columns); + setColumnsOrder(_columns.map((_, index) => index)); }, [_columns]); useNonInitialEffect(() => {