From 91633ee85c8d2f6faaf8fce396f9443eb5dd6ddf Mon Sep 17 00:00:00 2001
From: Laurent Nguyen <laurent.nguyen@microsoft.com>
Date: Wed, 27 Mar 2024 18:42:38 +0100
Subject: [PATCH] Fix multi delete

---
 .../Tabs/DocumentsTabV2/DocumentsTabV2.tsx    | 45 ++++++++-----------
 .../DocumentsTableComponent.tsx               | 19 +++-----
 2 files changed, 24 insertions(+), 40 deletions(-)

diff --git a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx
index 1f569c767..ebd6ec45f 100644
--- a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx
+++ b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx
@@ -7,7 +7,7 @@ import {
   QueryIterator,
   Resource,
 } from "@azure/cosmos";
-import { FluentProvider } from "@fluentui/react-components";
+import { FluentProvider, TableRowId } from "@fluentui/react-components";
 import Split from "@uiw/react-split";
 import { KeyCodes, QueryCopilotSampleContainerId, QueryCopilotSampleDatabaseId } from "Common/Constants";
 import { getErrorMessage, getErrorStack } from "Common/ErrorHandlingUtils";
@@ -132,7 +132,8 @@ const DocumentsTabComponent: React.FunctionComponent<{
   const [selectedDocumentContentBaseline, setSelectedDocumentContentBaseline] = useState<string>(undefined);
 
   const [selectedDocumentId, setSelectedDocumentId] = useState<DocumentId>(undefined);
-  const [multiSelectedDocumentIds, setMultiSelectedDocumentIds] = useState<DocumentId[]>([]);
+  // Table selection
+  const [selectedRows, setSelectedRows] = React.useState<Set<TableRowId>>(() => new Set<TableRowId>([0]));
 
   // Command buttons
   const [editorState, setEditorState] = useState<ViewModels.DocumentExplorerState>(
@@ -331,7 +332,7 @@ const DocumentsTabComponent: React.FunctionComponent<{
   // TODO Put whatever the buttons callback use in the dependency array
   useEffect(
     () => updateNavbarWithTabsButtons(),
-    [editorState, selectedDocumentContent, initialDocumentContent, multiSelectedDocumentIds, documentIds],
+    [editorState, selectedDocumentContent, initialDocumentContent, selectedRows, documentIds],
   );
 
   useEffect(() => {
@@ -495,14 +496,14 @@ const DocumentsTabComponent: React.FunctionComponent<{
     // const selectedDocumentId = this.selectedDocumentId();
 
     // TODO: Rework this for localization
-    const isPlural = multiSelectedDocumentIds.length > 1;
+    const isPlural = selectedRows.size > 1;
     const documentName = !isPreferredApiMongoDB
       ? isPlural
-        ? `the selected ${multiSelectedDocumentIds.length} items`
+        ? `the selected ${selectedRows.size} items`
         : "the selected item"
       : isPlural
-        ? `the selected ${multiSelectedDocumentIds.length} documents`
-        : "the selected document";
+      ? `the selected ${selectedRows.size} documents`
+      : "the selected document";
     const msg = `Are you sure you want to delete ${documentName}?`;
 
     useDialog.getState().showOkCancelModalDialog(
@@ -510,7 +511,7 @@ const DocumentsTabComponent: React.FunctionComponent<{
       msg,
       "Delete",
       // async () => await _deleteDocuments(selectedDocumentId),
-      () => deleteDocuments(multiSelectedDocumentIds),
+      () => deleteDocuments(Array.from(selectedRows).map((index) => documentIds[index as number])),
       "Cancel",
       undefined,
     );
@@ -536,7 +537,7 @@ const DocumentsTabComponent: React.FunctionComponent<{
 
         setSelectedDocumentContent(undefined);
         setSelectedDocumentId(undefined);
-        setMultiSelectedDocumentIds([]);
+        setSelectedRows(new Set());
         setEditorState(ViewModels.DocumentExplorerState.noDocumentSelected);
       })
       .finally(() => setIsExecuting(false));
@@ -1012,17 +1013,6 @@ const DocumentsTabComponent: React.FunctionComponent<{
     }
   };
 
-  const onDocumentsSelectionChange = useCallback(
-    (selectedItemsIndices: Set<number>) => {
-      if (documentIds.length === 0) {
-        return;
-      }
-
-      setMultiSelectedDocumentIds(Array.from(selectedItemsIndices).map((index) => documentIds[index]));
-    },
-    [documentIds],
-  );
-
   const loadDocument = (documentId: DocumentId) =>
     (_isQueryCopilotSampleContainer ? readSampleDocument(documentId) : readDocument(props.collection, documentId)).then(
       (content) => {
@@ -1142,7 +1132,7 @@ const DocumentsTabComponent: React.FunctionComponent<{
                 <button
                   className="filterbtnstyle queryButton"
                   onClick={onShowFilterClick}
-                /*data-bind="click: onShowFilterClick"*/
+                  /*data-bind="click: onShowFilterClick"*/
                 >
                   Edit Filter
                 </button>
@@ -1192,7 +1182,7 @@ const DocumentsTabComponent: React.FunctionComponent<{
                       }
                       value={filterContent}
                       onChange={(e) => setFilterContent(e.target.value)}
-                    /*
+                      /*
 data-bind="
       W  attr:{
             placeholder:isPreferredApiMongoDB?'Type a query predicate (e.g., {´a´:´foo´}), or choose one from the drop down list, or leave empty to query all documents.':'Type a query predicate (e.g., WHERE c.id=´1´), or choose one from the drop down list, or leave empty to query all documents.'
@@ -1245,7 +1235,7 @@ data-bind="
                       tabIndex={0}
                       onClick={onHideFilterClick}
                       onKeyDown={onCloseButtonKeyDown}
-                    /*data-bind="click: onHideFilterClick, event: { keydown: onCloseButtonKeyDown }"*/
+                      /*data-bind="click: onHideFilterClick, event: { keydown: onCloseButtonKeyDown }"*/
                     >
                       <img src={CloseIcon} style={{ height: 14, width: 14 }} alt="Hide filter" />
                     </span>
@@ -1266,7 +1256,8 @@ data-bind="
                 style={{ width: 200 }}
                 items={tableItems}
                 onItemClicked={onDocumentClicked}
-                onSelectedItemsChange={onDocumentsSelectionChange}
+                onSelectedRowsChange={setSelectedRows}
+                selectedRows={selectedRows}
                 size={tableContainerSizePx}
                 columnHeaders={columnHeaders}
                 onRefreshClicked={refreshDocumentsGrid}
@@ -1276,7 +1267,7 @@ data-bind="
               </a>
             </div>
             <div style={{ minWidth: "20%", width: "100%" }}>
-              {selectedDocumentContent && multiSelectedDocumentIds.length === 1 && (
+              {selectedDocumentContent && selectedRows.size === 1 && (
                 <EditorReact
                   language={"json"}
                   content={selectedDocumentContent}
@@ -1287,8 +1278,8 @@ data-bind="
                   onContentChanged={_onEditorContentChange}
                 />
               )}
-              {multiSelectedDocumentIds.length > 1 && (
-                <span style={{ margin: 10 }}>Number of selected documents: {multiSelectedDocumentIds.length}</span>
+              {selectedRows.size > 1 && (
+                <span style={{ margin: 10 }}>Number of selected documents: {selectedRows.size}</span>
               )}
             </div>
           </Split>
diff --git a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx
index d44e976e6..967cc288a 100644
--- a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx
+++ b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx
@@ -40,7 +40,8 @@ export type ColumnHeaders = {
 export interface IDocumentsTableComponentProps {
   items: DocumentsTableComponentItem[];
   onItemClicked: (index: number) => void;
-  onSelectedItemsChange: (selectedItemsIndices: Set<number>) => void;
+  onSelectedRowsChange: (selectedItemsIndices: Set<TableRowId>) => void;
+  selectedRows: Set<TableRowId>;
   size: { height: number; width: number };
   columnHeaders: ColumnHeaders;
   onRefreshClicked: () => void;
@@ -60,7 +61,8 @@ interface ReactWindowRenderFnProps extends ListChildComponentProps {
 export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> = ({
   items,
   onItemClicked,
-  onSelectedItemsChange,
+  onSelectedRowsChange,
+  selectedRows,
   style,
   size,
   columnHeaders,
@@ -96,15 +98,6 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
     }));
   }, []);
 
-  const [selectedRows, setSelectedRows] = React.useState<Set<TableRowId>>(() => new Set<TableRowId>([0]));
-
-  // If selected rows change, call props
-  useEffect(() => {
-    if (onSelectedItemsChange) {
-      onSelectedItemsChange(selectedRows);
-    }
-  }, [selectedRows, onSelectedItemsChange]);
-
   // Columns must be a static object and cannot change on re-renders otherwise React will complain about too many refreshes
   const columns: TableColumnDefinition<DocumentsTableComponentItem>[] = useMemo(
     () =>
@@ -159,7 +152,7 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
         {columns.map((column) => (
           <TableCell
             key={column.columnId}
-            onClick={(/* e */) => setSelectedRows(new Set<TableRowId>([index]))}
+            onClick={(/* e */) => onSelectedRowsChange(new Set<TableRowId>([index]))}
             onKeyDown={onKeyDown}
             {...columnSizing.getTableCellProps(column.columnId)}
           >
@@ -185,7 +178,7 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
       useTableSelection({
         selectionMode: "multiselect",
         selectedItems: selectedRows,
-        onSelectionChange: (e, data) => setSelectedRows(data.selectedItems),
+        onSelectionChange: (e, data) => onSelectedRowsChange(data.selectedItems),
       }),
     ],
   );