Add reset button to column selection and fix naming of openUploadItemsPanePane()

src/Explorer/Explorer.tsx

@@ -1,19 +1,21 @@
+import * as msal from "@azure/msal-browser";
 import { Link } from "@fluentui/react/lib/Link";
 import { isPublicInternetAccessAllowed } from "Common/DatabaseAccountUtility";
 import { sendMessage } from "Common/MessageHandler";
 import { Platform, configContext } from "ConfigContext";
 import { MessageTypes } from "Contracts/ExplorerContracts";
+import { useDataPlaneRbac } from "Explorer/Panes/SettingsPane/SettingsPane";
 import { getCopilotEnabled, isCopilotFeatureRegistered } from "Explorer/QueryCopilot/Shared/QueryCopilotClient";
 import { IGalleryItem } from "Juno/JunoClient";
 import { scheduleRefreshDatabaseResourceToken } from "Platform/Fabric/FabricUtil";
 import { LocalStorageUtility, StorageKey } from "Shared/StorageUtility";
 import { acquireTokenWithMsal, getMsalInstance } from "Utils/AuthorizationUtils";
 import { allowedNotebookServerUrls, validateEndpoint } from "Utils/EndpointUtils";
+import { update } from "Utils/arm/generatedClients/cosmos/databaseAccounts";
 import { useQueryCopilot } from "hooks/useQueryCopilot";
 import * as ko from "knockout";
 import React from "react";
 import _ from "underscore";
-import * as msal from "@azure/msal-browser";
 import shallow from "zustand/shallow";
 import { AuthType } from "../AuthType";
 import { BindingHandlersRegisterer } from "../Bindings/BindingHandlersRegisterer";
@@ -67,8 +69,6 @@ import { ResourceTreeAdapter } from "./Tree/ResourceTreeAdapter";
 import StoredProcedure from "./Tree/StoredProcedure";
 import { useDatabases } from "./useDatabases";
 import { useSelectedNode } from "./useSelectedNode";
-import { update } from "Utils/arm/generatedClients/cosmos/databaseAccounts";
-import { useDataPlaneRbac } from "Explorer/Panes/SettingsPane/SettingsPane";
 
 BindingHandlersRegisterer.registerBindingHandlers();
 
@@ -1119,7 +1119,7 @@ export default class Explorer {
     }
   }
 
-  public openUploadItemsPanePane(): void {
+  public openUploadItemsPane(): void {
     useSidePanel.getState().openSidePanel("Upload " + getUploadName(), <UploadItemsPane />);
   }
   public openExecuteSprocParamsPanel(storedProcedure: StoredProcedure): void {

src/Explorer/Panes/TableColumnSelectionPane/TableColumnSelectionPane.tsx

@@ -18,12 +18,14 @@ export interface TableColumnSelectionPaneProps {
   columnDefinitions: ColumnDefinition[];
   selectedColumnIds: string[];
   onSelectionChange: (newSelectedColumnIds: string[]) => void;
+  defaultSelection: string[];
 }
 
 export const TableColumnSelectionPane: React.FC<TableColumnSelectionPaneProps> = ({
   columnDefinitions,
   selectedColumnIds,
   onSelectionChange,
+  defaultSelection,
 }: TableColumnSelectionPaneProps): JSX.Element => {
   const closeSidePanel = useSidePanel((state) => state.closeSidePanel);
   const originalSelectedColumnIds = React.useMemo(() => selectedColumnIds, []);
@@ -88,15 +90,20 @@ export const TableColumnSelectionPane: React.FC<TableColumnSelectionPaneProps> =
             />
           </div>
 
-          {columnDefinitionList.map((columnDefinition) => (
+          <div style={{ flex: 1 }}>
-            <Checkbox
+            {columnDefinitionList.map((columnDefinition) => (
-              className="tableColumnSelectionCheckbox"
+              <Checkbox
-              key={columnDefinition.id}
+                className="tableColumnSelectionCheckbox"
-              label={columnDefinition.label}
+                key={columnDefinition.id}
-              checked={selectedColumnIdsSet.has(columnDefinition.id)}
+                label={columnDefinition.label}
-              onChange={(_, checked) => onCheckedValueChange(columnDefinition.id, checked)}
+                checked={selectedColumnIdsSet.has(columnDefinition.id)}
-            />
+                onChange={(_, checked) => onCheckedValueChange(columnDefinition.id, checked)}
-          ))}
+              />
+            ))}
+          </div>
+          <Button appearance="secondary" size="small" onClick={() => setNewSelectedColumnIds(defaultSelection)}>
+            Reset
+          </Button>
         </div>
         <div className="panelFooter" style={{ display: "flex", gap: theme.spacingHorizontalS }}>
           <Button appearance="primary" onClick={onSave}>

src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx

@@ -278,7 +278,7 @@ const createUploadButton = (container: Explorer): CommandButtonComponentProps =>
     iconAlt: label,
     onCommandClick: () => {
       const selectedCollection: ViewModels.Collection = useSelectedNode.getState().findSelectedCollection();
-      selectedCollection && container.openUploadItemsPanePane();
+      selectedCollection && container.openUploadItemsPane();
     },
     commandButtonLabel: label,
     ariaLabel: label,
@@ -612,13 +612,15 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
     [partitionKeyPropertyHeaders],
   );
 
-  const [selectedColumnIds, setSelectedColumnIds] = useState<string[]>(() => {
+  const getInitialColumnSelection = () => {
     const columnsIds = ["id"];
     if (showPartitionKey(_collection, isPreferredApiMongoDB)) {
       columnsIds.push(...partitionKeyPropertyHeaders);
     }
     return columnsIds;
-  });
+  };
+
+  const [selectedColumnIds, setSelectedColumnIds] = useState<string[]>(getInitialColumnSelection);
 
   // new DocumentId() requires a DocumentTab which we mock with only the required properties
   const newDocumentId = useCallback(
@@ -1993,6 +1995,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
                       }
                       onColumnResize={onTableColumnResize}
                       onColumnSelectionChange={onColumnSelectionChange}
+                      defaultColumnSelection={getInitialColumnSelection()}
                     />
                   </div>
                 </div>

src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx

@@ -68,6 +68,7 @@ export interface IDocumentsTableComponentProps {
   isSelectionDisabled?: boolean;
   onColumnResize?: (columnId: string, width: number) => void;
   onColumnSelectionChange?: (newSelectedColumnIds: string[]) => void;
+  defaultColumnSelection?: string[];
 }
 
 interface TableRowData extends RowStateBase<DocumentsTableComponentItem> {
@@ -96,6 +97,7 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
   isSelectionDisabled,
   onColumnResize: _onColumnResize,
   onColumnSelectionChange,
+  defaultColumnSelection,
 }: IDocumentsTableComponentProps) => {
   const styles = useDocumentsTabStyles();
 
@@ -392,11 +394,12 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
     useSidePanel
       .getState()
       .openSidePanel(
-        "Save Query",
+        "Select columns",
         <TableColumnSelectionPane
           selectedColumnIds={selectedColumnIds}
           columnDefinitions={columnDefinitions}
           onSelectionChange={onColumnSelectionChange}
+          defaultSelection={defaultColumnSelection}
         />,
       );
   };