From e23ba02561f63486d8da79522ea290b157dd2662 Mon Sep 17 00:00:00 2001
From: Laurent Nguyen <laurent.nguyen@microsoft.com>
Date: Mon, 2 Sep 2024 12:31:39 +0200
Subject: [PATCH] Move column selection and sorting behind feature flag
 enableDocumentsTableColumnSelection

---
 .../DocumentsTableComponent.tsx               | 95 ++++++++++---------
 src/Platform/Hosted/extractFeatures.ts        |  2 +
 2 files changed, 52 insertions(+), 45 deletions(-)

diff --git a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx
index 1b301fd14..df68a2c0d 100644
--- a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx
+++ b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx
@@ -50,6 +50,7 @@ import {
 import { INITIAL_SELECTED_ROW_INDEX, useDocumentsTabStyles } from "Explorer/Tabs/DocumentsTabV2/DocumentsTabV2";
 import { selectionHelper } from "Explorer/Tabs/DocumentsTabV2/SelectionHelper";
 import { LayoutConstants } from "Explorer/Theme/ThemeUtil";
+import { userContext } from "UserContext";
 import { isEnvironmentCtrlPressed, isEnvironmentShiftPressed } from "Utils/KeyboardUtils";
 import { useSidePanel } from "hooks/useSidePanel";
 import React, { useCallback, useMemo } from "react";
@@ -227,51 +228,55 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
                     <MenuItem key="refresh" icon={<ArrowClockwise16Regular />} onClick={onRefreshTable}>
                       Refresh
                     </MenuItem>
-                    <MenuItem
-                      icon={<TextSortAscendingRegular />}
-                      onClick={(e) => onSortClick(e, column.id, "ascending")}
-                    >
-                      Sort ascending
-                    </MenuItem>
-                    <MenuItem
-                      icon={<TextSortDescendingRegular />}
-                      onClick={(e) => onSortClick(e, column.id, "descending")}
-                    >
-                      Sort descending
-                    </MenuItem>
-                    <MenuItem icon={<ArrowResetRegular />} onClick={(e) => onSortClick(e, undefined, undefined)}>
-                      Reset sorting
-                    </MenuItem>
-                    {!isColumnSelectionDisabled && (
-                      <MenuItem key="editcolumns" icon={<EditRegular />} onClick={openColumnSelectionPane}>
-                        Edit columns
-                      </MenuItem>
-                    )}
-                    <MenuDivider />
-                    <MenuItem
-                      key="keyboardresize"
-                      icon={<TableResizeColumnRegular />}
-                      onClick={columnSizing.enableKeyboardMode(column.id)}
-                    >
-                      Resize with left/right arrow keys
-                    </MenuItem>
-                    {!isColumnSelectionDisabled && (
-                      <MenuItem
-                        key="remove"
-                        icon={<DeleteRegular />}
-                        onClick={() => {
-                          // Remove column id from selectedColumnIds
-                          const index = selectedColumnIds.indexOf(column.id);
-                          if (index === -1) {
-                            return;
-                          }
-                          const newSelectedColumnIds = [...selectedColumnIds];
-                          newSelectedColumnIds.splice(index, 1);
-                          onColumnSelectionChange(newSelectedColumnIds);
-                        }}
-                      >
-                        Remove column
-                      </MenuItem>
+                    {userContext.features.enableDocumentsTableColumnSelection && (
+                      <>
+                        <MenuItem
+                          icon={<TextSortAscendingRegular />}
+                          onClick={(e) => onSortClick(e, column.id, "ascending")}
+                        >
+                          Sort ascending
+                        </MenuItem>
+                        <MenuItem
+                          icon={<TextSortDescendingRegular />}
+                          onClick={(e) => onSortClick(e, column.id, "descending")}
+                        >
+                          Sort descending
+                        </MenuItem>
+                        <MenuItem icon={<ArrowResetRegular />} onClick={(e) => onSortClick(e, undefined, undefined)}>
+                          Reset sorting
+                        </MenuItem>
+                        {!isColumnSelectionDisabled && (
+                          <MenuItem key="editcolumns" icon={<EditRegular />} onClick={openColumnSelectionPane}>
+                            Edit columns
+                          </MenuItem>
+                        )}
+                        <MenuDivider />
+                        <MenuItem
+                          key="keyboardresize"
+                          icon={<TableResizeColumnRegular />}
+                          onClick={columnSizing.enableKeyboardMode(column.id)}
+                        >
+                          Resize with left/right arrow keys
+                        </MenuItem>
+                        {!isColumnSelectionDisabled && (
+                          <MenuItem
+                            key="remove"
+                            icon={<DeleteRegular />}
+                            onClick={() => {
+                              // Remove column id from selectedColumnIds
+                              const index = selectedColumnIds.indexOf(column.id);
+                              if (index === -1) {
+                                return;
+                              }
+                              const newSelectedColumnIds = [...selectedColumnIds];
+                              newSelectedColumnIds.splice(index, 1);
+                              onColumnSelectionChange(newSelectedColumnIds);
+                            }}
+                          >
+                            Remove column
+                          </MenuItem>
+                        )}
+                      </>
                     )}
                   </MenuList>
                 </MenuPopover>
diff --git a/src/Platform/Hosted/extractFeatures.ts b/src/Platform/Hosted/extractFeatures.ts
index 5bd84516e..2ae14e59e 100644
--- a/src/Platform/Hosted/extractFeatures.ts
+++ b/src/Platform/Hosted/extractFeatures.ts
@@ -38,6 +38,7 @@ export type Features = {
   readonly copilotChatFixedMonacoEditorHeight: boolean;
   readonly enablePriorityBasedExecution: boolean;
   readonly disableConnectionStringLogin: boolean;
+  readonly enableDocumentsTableColumnSelection: boolean;
 
   // can be set via both flight and feature flag
   autoscaleDefault: boolean;
@@ -108,6 +109,7 @@ export function extractFeatures(given = new URLSearchParams(window.location.sear
     copilotChatFixedMonacoEditorHeight: "true" === get("copilotchatfixedmonacoeditorheight"),
     enablePriorityBasedExecution: "true" === get("enableprioritybasedexecution"),
     disableConnectionStringLogin: "true" === get("disableconnectionstringlogin"),
+    enableDocumentsTableColumnSelection: "true" === get("enabledocumentstablecolumnselection"),
   };
 }