Move responsibility of filtering selected to the grid itself to trigg…

…er item count correctly
dolittle · Sep 7, 2023 · b0f4074 · b0f4074
1 parent b41c2aa
commit b0f4074
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 10 deletions.
diff --git a/...ns/connection/connectionDetails/messages/changeMessage/components/MessageMappingTable.tsx b/...ns/connection/connectionDetails/messages/changeMessage/components/MessageMappingTable.tsx
@@ -4,7 +4,7 @@
 import React, { useMemo } from 'react';
 
 import { Box, Paper, Tooltip } from '@mui/material';
-import { DataGridPro, GridColDef, GridSelectionModel, GridRowId, useGridApiRef, GRID_CHECKBOX_SELECTION_COL_DEF } from '@mui/x-data-grid-pro';
+import { DataGridPro, GridColDef, GridSelectionModel, GridRowId, useGridApiRef, GRID_CHECKBOX_SELECTION_FIELD, GRID_CHECKBOX_SELECTION_COL_DEF } from '@mui/x-data-grid-pro';
 
 import { EditCell, EditTextFieldCell } from '@dolittle/design-system';
 
@@ -24,7 +24,7 @@ export type MessageMappingTableProps = {
     onSelectedIdsChanged: (newSelectedIds: GridSelectionModel) => void;
     disabledRows?: GridRowId[];
     isLoading: boolean;
-    hideUnselectedRows?: boolean;
+    showOnlySelected?: boolean;
     onFieldMapped: (m3Field: string, mappedFieldName) => void;
     quickFilterValue?: string;
 };
@@ -36,6 +36,7 @@ export const MessageMappingTable = ({
     disabledRows,
     isLoading,
     onFieldMapped,
+    showOnlySelected,
     quickFilterValue
 }: MessageMappingTableProps) => {
     const columns: GridColDef<DataGridTableListingEntry>[] = useMemo(() => [
@@ -74,6 +75,19 @@ export const MessageMappingTable = ({
         },
     ], [disabledRows]);
 
+    const gridFilters = useMemo(() => {
+        return {
+            items: showOnlySelected ? [
+                {
+                    columnField: GRID_CHECKBOX_SELECTION_FIELD,
+                    operatorValue: 'is',
+                    value: 'true',
+                }
+            ] : [],
+            quickFilterValues: [quickFilterValue?.trim() || undefined]
+        };
+    }, [quickFilterValue, showOnlySelected]);
+
     const gridApiRef = useGridApiRef();
 
     const generateUniqueFieldName = (gridApiRef, fieldName: string, m3ColumnName: string) => {
@@ -170,7 +184,7 @@ export const MessageMappingTable = ({
                 processRowUpdate={processRowUpdate}
                 onProcessRowUpdateError={error => console.log(error)}
                 experimentalFeatures={{ newEditingApi: true }}
-                filterModel={{ items: [], quickFilterValues: [quickFilterValue] }}
+                filterModel={gridFilters}
                 disableColumnReorder
                 disableColumnResize
                 disableColumnSelector

diff --git a/...egrations/connection/connectionDetails/messages/changeMessage/components/TableSection.tsx b/...egrations/connection/connectionDetails/messages/changeMessage/components/TableSection.tsx
@@ -6,7 +6,7 @@ import React, { useState, useMemo, useEffect } from 'react';
 import { Grid, LinearProgress, Box } from '@mui/material';
 import { GridSelectionModel } from '@mui/x-data-grid-pro';
 
-import { AlertBox, Button, ContentSection, NewSwitch, Switch, TextField } from '@dolittle/design-system/';
+import { AlertBox, Button, ContentSection, NewSwitch, TextField } from '@dolittle/design-system/';
 
 import { FieldMapping, MappedField } from '../../../../../../apis/integrations/generated';
 import { useConnectionsIdMessageMappingsTablesTableGet } from '../../../../../../apis/integrations/mappableTablesApi.hooks';
@@ -75,11 +75,6 @@ export const TableSection = ({ selectedTableName, initialSelectedFields, onBackT
         [allMappableTableColumns, mappedFields]
     );
 
-    const selectedTableColumns = useMemo(
-        () => gridMappableTableColumns.filter(column => selectedIds.includes(column.m3ColumnName)),
-        [gridMappableTableColumns, selectedIds]
-    );
-
     const updateMappedFieldsAndUpdateFormValue = (m3Field: string, mappedFieldName: any) => {
         setMappedFields(prevMappedFields => {
             const newMappedFields = new Map(prevMappedFields);
@@ -140,13 +135,14 @@ export const TableSection = ({ selectedTableName, initialSelectedFields, onBackT
                                 />
                             </Grid>
                             <MessageMappingTable
-                                dataGridListing={hideUnselectedRows ? selectedTableColumns : gridMappableTableColumns}
+                                dataGridListing={gridMappableTableColumns}
                                 isLoading={isLoading}
                                 selectedIds={selectedIds}
                                 disabledRows={requiredTableColumnIds}
                                 onSelectedIdsChanged={setSelectedRowIds}
                                 onFieldMapped={updateMappedFieldsAndUpdateFormValue}
                                 quickFilterValue={fieldSearchTerm}
+                                showOnlySelected={!hideUnselectedRows}
                             />
                         </>
                     )}