Mark resource token tests as failing

Enable column selection and sorting in DocumentsTab (with persistence) (#1881 )
* Initial implementation of saving split value to local storage * Make table columns generic (no more id and partition keys) * Save column width * Add column selection from right-click * Implement new menu for column selection with search. * Switch icons and search compare with lowercase. * Search uses string includes instead of startsWith * Only allow data fields that can be rendered (string and numbers) in column selection * Accumulate properties rather than replace for column definitions * Do not allow deselecting all columns * Move table values under its own property * Update choices of column when creating new or updating document * Rework column selection UI * Fix table size issue with some heuristics * Fix heuristic for size update * Don't allow unselecting last column * Implement column sorting * Fix format * Fix format, update snapshots * Add reset button to column selection and fix naming of openUploadItemsPanePane() * Fix unit tests * Fix unit test * Persist column selection * Persist column sorting * Save columns definition (schema) along with selected columns. * Merge branch 'master' into users/languy/save-documentstab-prefs * Revert "Merge branch 'master' into users/languy/save-documentstab-prefs" This reverts commit e5a82fd356. * Disable column selection for Mongo. Remove extra refresh button * Update test snapshots * Remove unused function * Fix table width * Add background color to "..." button for column selection * Label to indicate which field is a partition key in Column Selection Pane * Update unit test snapshot * Move column selection and sorting behind feature flag enableDocumentsTableColumnSelection * Cleanup checkbox styles
2026-01-05 18:47:41 +00:00 · 2024-09-05 11:03:20 -07:00 · 2024-09-05 17:43:40 +02:00 · 2024-09-05 08:33:39 -07:00 · 2024-09-05 10:57:55 -04:00 · 2024-09-05 11:51:32 +02:00
31 changed files with 2349 additions and 2493 deletions
--- a/less/documentDB.less
+++ b/less/documentDB.less
@@ -1906,8 +1906,14 @@ input::-webkit-calendar-picker-indicator::after {
 }

 .nav-tabs-margin {
-  padding-top: 5px;
+  height: 32px;
  background-color: #f2f2f2;
+
+  .nav-tabs {
+    display: flex;
+    align-items: flex-end;
+    height: 100%;
+  }
 }

 .navTabHeight {
--- a/less/documentDBFabric.less
+++ b/less/documentDBFabric.less
@@ -31,7 +31,6 @@ a:focus {
  margin-top: 0px;
  margin-bottom: 0px;
  background-color: #ffffff;
-  width: auto; // Override width: 100% coming from Allotment
 }

 .tabsManagerContainer {
--- a/package-lock.json
+++ b/package-lock.json
@@ -2527,13 +2527,13 @@
      }
    },
    "node_modules/@babel/preset-env/node_modules/babel-plugin-polyfill-corejs3": {
-      "version": "0.10.4",
-      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.10.4.tgz",
-      "integrity": "sha512-25J6I8NGfa5YkCDogHRID3fVCadIR8/pGl1/spvCkzb6lVn6SR3ojpx9nOn9iEBcUsjY24AmdKm5khcfKdylcg==",
+      "version": "0.10.6",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.10.6.tgz",
+      "integrity": "sha512-b37+KR2i/khY5sKmWNVQAnitvquQbNdWy6lJdsr0kmquCKEEUgMKK4SboVM3HtfnZilfjr4MMQ7vY58FVWDtIA==",
      "dev": true,
      "dependencies": {
-        "@babel/helper-define-polyfill-provider": "^0.6.1",
-        "core-js-compat": "^3.36.1"
+        "@babel/helper-define-polyfill-provider": "^0.6.2",
+        "core-js-compat": "^3.38.0"
      },
      "peerDependencies": {
        "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
@@ -2932,10 +2932,10 @@
      }
    },
    "node_modules/@floating-ui/core": {
-      "version": "1.6.3",
+      "version": "1.6.2",
      "license": "MIT",
      "dependencies": {
-        "@floating-ui/utils": "^0.2.3"
+        "@floating-ui/utils": "^0.2.0"
      }
    },
    "node_modules/@floating-ui/devtools": {
@@ -2945,15 +2945,15 @@
      }
    },
    "node_modules/@floating-ui/dom": {
-      "version": "1.6.6",
+      "version": "1.6.5",
      "license": "MIT",
      "dependencies": {
        "@floating-ui/core": "^1.0.0",
-        "@floating-ui/utils": "^0.2.3"
+        "@floating-ui/utils": "^0.2.0"
      }
    },
    "node_modules/@floating-ui/utils": {
-      "version": "0.2.3",
+      "version": "0.2.2",
      "license": "MIT"
    },
    "node_modules/@fluentui/date-time-utilities": {
@@ -3501,7 +3501,7 @@
      "resolved": "https://registry.npmjs.org/@fluentui/react-hooks/-/react-hooks-8.8.10.tgz",
      "integrity": "sha512-Xvnn6uKMsinMg/zo79KBNCDABnl0gpmArQYNQya9FCNRzvmHUCDvuQCqv4IKslvPvuC0Ya8mR2NORm2w0JoZiw==",
      "dependencies": {
-        "@fluentui/react-window-provider": "^2.2.27",
+        "@fluentui/react-window-provider": "^2.2.28",
        "@fluentui/set-version": "^8.2.23",
        "@fluentui/utilities": "^8.15.13",
        "tslib": "^2.1.0"
@@ -4426,9 +4426,9 @@
      }
    },
    "node_modules/@fluentui/react-window-provider": {
-      "version": "2.2.27",
-      "resolved": "https://registry.npmjs.org/@fluentui/react-window-provider/-/react-window-provider-2.2.27.tgz",
-      "integrity": "sha512-Dg0G9bizjryV0Q/r0CPtCVTPa2II/EsT9E6JT3jPSALjQADDLlW4/+ZXbcEC7geZ/40+KpZDmhplvk/AJSFBKg==",
+      "version": "2.2.28",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-window-provider/-/react-window-provider-2.2.28.tgz",
+      "integrity": "sha512-YdZ74HTaoDwlvLDzoBST80/17ExIl93tLJpTxnqK5jlJOAUVQ+mxLPF2HQEJq+SZr5IMXHsQ56w/KaZVRn72YA==",
      "dependencies": {
        "@fluentui/set-version": "^8.2.23",
        "tslib": "^2.1.0"
@@ -4512,7 +4512,7 @@
      "dependencies": {
        "@fluentui/dom-utilities": "^2.3.7",
        "@fluentui/merge-styles": "^8.6.12",
-        "@fluentui/react-window-provider": "^2.2.27",
+        "@fluentui/react-window-provider": "^2.2.28",
        "@fluentui/set-version": "^8.2.23",
        "tslib": "^2.1.0"
      },
@@ -14966,9 +14966,9 @@
      "license": "MIT"
    },
    "node_modules/browserslist": {
-      "version": "4.23.2",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.2.tgz",
-      "integrity": "sha512-qkqSyistMYdxAcw+CzbZwlBy8AGmS/eEWs+sEV5TnLRGDOL+C5M2EnH6tlZyg0YoAxGJAFKh61En9BR941GnHA==",
+      "version": "4.23.3",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.3.tgz",
+      "integrity": "sha512-btwCFJVjI4YWDNfau8RhZ+B1Q/VLoUITrm3RlP6y1tYGWIOa+InuYiRGXUBXo8nA1qKmHMyLB/iVQg5TT4eFoA==",
      "funding": [
        {
          "type": "opencollective",
@@ -14984,9 +14984,9 @@
        }
      ],
      "dependencies": {
-        "caniuse-lite": "^1.0.30001640",
-        "electron-to-chromium": "^1.4.820",
-        "node-releases": "^2.0.14",
+        "caniuse-lite": "^1.0.30001646",
+        "electron-to-chromium": "^1.5.4",
+        "node-releases": "^2.0.18",
        "update-browserslist-db": "^1.1.0"
      },
      "bin": {
@@ -15142,9 +15142,9 @@
      }
    },
    "node_modules/caniuse-lite": {
-      "version": "1.0.30001645",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001645.tgz",
-      "integrity": "sha512-GFtY2+qt91kzyMk6j48dJcwJVq5uTkk71XxE3RtScx7XWRLsO7bU44LOFkOZYR8w9YMS0UhPSYpN/6rAMImmLw==",
+      "version": "1.0.30001651",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001651.tgz",
+      "integrity": "sha512-9Cf+Xv1jJNe1xPZLGuUXLNkE1BoDkqRqYyFJ9TDYSqhduqA4hu4oR9HluGoWYQC/aj8WHjsGVV+bwkh0+tegRg==",
      "funding": [
        {
          "type": "opencollective",
@@ -16063,12 +16063,12 @@
      "license": "MIT"
    },
    "node_modules/core-js-compat": {
-      "version": "3.37.1",
-      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.37.1.tgz",
-      "integrity": "sha512-9TNiImhKvQqSUkOvk/mMRZzOANTiEVC7WaBNhHcKM7x+/5E1l5NvsysR19zuDQScE8k+kfQXWRN3AtS/eOSHpg==",
+      "version": "3.38.0",
+      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.38.0.tgz",
+      "integrity": "sha512-75LAicdLa4OJVwFxFbQR3NdnZjNgX6ILpVcVzcC4T2smerB5lELMrJQQQoWV6TiuC/vlaFqgU2tKQx9w5s0e0A==",
      "dev": true,
      "dependencies": {
-        "browserslist": "^4.23.0"
+        "browserslist": "^4.23.3"
      },
      "funding": {
        "type": "opencollective",
--- a/src/Common/MongoProxyClient.ts
+++ b/src/Common/MongoProxyClient.ts
@@ -723,16 +723,8 @@ export function useMongoProxyEndpoint(api: string): boolean {
    MongoProxyEndpoints.Fairfax,
    MongoProxyEndpoints.Mooncake,
  ];
-  let canAccessMongoProxy: boolean = userContext.databaseAccount.properties.publicNetworkAccess === "Enabled";
-  if (
-    configContext.MONGO_PROXY_ENDPOINT !== MongoProxyEndpoints.Local &&
-    userContext.databaseAccount.properties.ipRules?.length > 0
-  ) {
-    canAccessMongoProxy = canAccessMongoProxy && configContext.MONGO_PROXY_OUTBOUND_IPS_ALLOWLISTED;
-  }

  return (
-    canAccessMongoProxy &&
    configContext.NEW_MONGO_APIS?.includes(api) &&
    activeMongoProxyEndpoints.includes(configContext.MONGO_PROXY_ENDPOINT)
  );
--- a/src/Common/Tooltip/InfoTooltip.tsx
+++ b/src/Common/Tooltip/InfoTooltip.tsx
@@ -3,11 +3,12 @@ import * as React from "react";

 export interface TooltipProps {
  children: string;
+  className?: string;
 }

-export const InfoTooltip: React.FunctionComponent<TooltipProps> = ({ children }: TooltipProps) => {
+export const InfoTooltip: React.FunctionComponent<TooltipProps> = ({ children, className }: TooltipProps) => {
  return (
-    <span>
+    <span className={className}>
      <TooltipHost content={children}>
        <Icon iconName="Info" ariaLabel={children} className="panelInfoIcon" tabIndex={0} />
      </TooltipHost>
--- a/src/ConfigContext.ts
+++ b/src/ConfigContext.ts
@@ -53,10 +53,8 @@ export interface ConfigContext {
  NEW_BACKEND_APIS?: BackendApi[];
  MONGO_BACKEND_ENDPOINT?: string;
  MONGO_PROXY_ENDPOINT?: string;
-  MONGO_PROXY_OUTBOUND_IPS_ALLOWLISTED?: boolean;
  NEW_MONGO_APIS?: string[];
  CASSANDRA_PROXY_ENDPOINT?: string;
-  CASSANDRA_PROXY_OUTBOUND_IPS_ALLOWLISTED: boolean;
  NEW_CASSANDRA_APIS?: string[];
  PROXY_PATH?: string;
  JUNO_ENDPOINT: string;
@@ -87,7 +85,7 @@ let configContext: Readonly<ConfigContext> = {
    `^https:\\/\\/.*\\.analysis-df\\.net$`,
    `^https:\\/\\/.*\\.analysis-df\\.windows\\.net$`,
    `^https:\\/\\/.*\\.azure-test\\.net$`,
-    `^https:\\/\\/cosmos-explorer-preview\\.azurewebsites\\.net`,
+    `^https:\\/\\/cosmos-explorer-preview\\.azurewebsites\\.net$`,
  ], // Webpack injects this at build time
  gitSha: process.env.GIT_SHA,
  hostedExplorerURL: "https://cosmos.azure.com/",
@@ -119,10 +117,8 @@ let configContext: Readonly<ConfigContext> = {
    "legacyMongoShell",
    "bulkdelete",
  ],
-  MONGO_PROXY_OUTBOUND_IPS_ALLOWLISTED: false,
  CASSANDRA_PROXY_ENDPOINT: CassandraProxyEndpoints.Prod,
  NEW_CASSANDRA_APIS: ["postQuery", "createOrDelete", "getKeys", "getSchema"],
-  CASSANDRA_PROXY_OUTBOUND_IPS_ALLOWLISTED: false,
  isTerminalEnabled: false,
  isPhoenixEnabled: false,
 };
--- a/src/Explorer/Controls/TreeComponent/Styles.ts
+++ b/src/Explorer/Controls/TreeComponent/Styles.ts
@@ -17,7 +17,7 @@ export const useTreeStyles = makeStyles({
    minWidth: "100%",
    rowGap: "0px",
    paddingTop: "0px",
-    [treeIconWidth]: "20px",
+    [treeIconWidth]: "16px",
    [leafNodeSpacing]: "24px",
  },
  nodeIcon: {
@@ -32,7 +32,6 @@ export const useTreeStyles = makeStyles({
    fontSize: tokens.fontSizeBase300,
    height: tokens.layoutRowHeight,
    ...cosmosShorthands.borderBottom(),
-    paddingLeft: `calc(var(${treeItemLevelToken}, 1) * ${tokens.spacingHorizontalXXL})`,

    // Some sneaky CSS variables stuff to change the background color of the action button on hover.
    [actionButtonBackground]: tokens.colorNeutralBackground1,
--- a/src/Explorer/Controls/TreeComponent/TreeNodeComponent.tsx
+++ b/src/Explorer/Controls/TreeComponent/TreeNodeComponent.tsx
@@ -149,15 +149,16 @@ export const TreeNodeComponent: React.FC<TreeNodeComponentProps> = ({

  // We use the expandIcon slot to hold the node icon too.
  // We only show a node icon for leaf nodes, even if a branch node has an iconSrc.
-  const expandIcon = isLoading ? (
-    <Spinner size="extra-tiny" />
-  ) : !isBranch ? (
-    typeof node.iconSrc === "string" ? (
+  const treeIcon =
+    node.iconSrc === undefined ? undefined : typeof node.iconSrc === "string" ? (
      <img src={node.iconSrc} className={treeStyles.nodeIcon} alt="" />
    ) : (
      node.iconSrc
-    )
-  ) : openItems.includes(treeNodeId) ? (
+    );
+
+  const expandIcon = isLoading ? (
+    <Spinner size="extra-tiny" />
+  ) : !isBranch ? undefined : openItems.includes(treeNodeId) ? (
    <ChevronDown20Regular data-test="TreeNode/CollapseIcon" />
  ) : (
    <ChevronRight20Regular data-text="TreeNode/ExpandIcon" />
@@ -174,7 +175,6 @@ export const TreeNodeComponent: React.FC<TreeNodeComponentProps> = ({
      <TreeItemLayout
        className={mergeClasses(
          treeStyles.treeItemLayout,
-          expandIcon ? undefined : treeStyles.treeItemLayoutNoIcon,
          shouldShowAsSelected && treeStyles.selectedItem,
          node.className && treeStyles[node.className],
        )}
@@ -200,6 +200,7 @@ export const TreeNodeComponent: React.FC<TreeNodeComponentProps> = ({
            ),
          }
        }
+        iconBefore={treeIcon}
        expandIcon={expandIcon}
      >
        <span className={treeStyles.nodeLabel}>{node.label}</span>
--- a/src/Explorer/Controls/TreeComponent/snapshots/TreeNodeComponent.test.tsx.snap
+++ b/src/Explorer/Controls/TreeComponent/snapshots/TreeNodeComponent.test.tsx.snap
@@ -10,13 +10,20 @@ exports[`TreeNodeComponent does not render children if the node is loading 1`] =
 >
  <TreeItemLayout
    actions={false}
-    className="___1kqyw53_iy2icj0 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1k1erfc f1n8cmsf f1ktbui8 f1do9gdl"
+    className="___z7owk70_14ep1pe fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
    data-test="TreeNode:root"
    expandIcon={
      <ChevronRight20Regular
        data-text="TreeNode/ExpandIcon"
      />
    }
+    iconBefore={
+      <img
+        alt=""
+        className="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
+        src="rootIcon"
+      />
+    }
  >
    <span
      className="___1h29e9h_0000000 fz5stix"
@@ -156,7 +163,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
            "itemType": "branch",
            "layoutRef": {
              "current": <div
-                class="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_1vtp8mg fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
+                class="fui-TreeItemLayout r1bx0xiv ___9uolwu0_9b0r4g0 fk6fouc fkhj508 figsok6 f1i3iumi fo100m9 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
                data-test="TreeNode:root"
              >
                <div
@@ -179,6 +186,16 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                    />
                  </svg>
                </div>
+                <div
+                  aria-hidden="true"
+                  class="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
+                >
+                  <img
+                    alt=""
+                    class="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
+                    src="rootIcon"
+                  />
+                </div>
                <div
                  class="fui-TreeItemLayout__main rklbe47"
                >
@@ -208,7 +225,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                tabindex="-1"
              >
                <div
-                  class="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_1vtp8mg fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
+                  class="fui-TreeItemLayout r1bx0xiv ___9uolwu0_9b0r4g0 fk6fouc fkhj508 figsok6 f1i3iumi fo100m9 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
                  data-test="TreeNode:root"
                >
                  <div
@@ -231,6 +248,16 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                      />
                    </svg>
                  </div>
+                  <div
+                    aria-hidden="true"
+                    class="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
+                  >
+                    <img
+                      alt=""
+                      class="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
+                      src="rootIcon"
+                    />
+                  </div>
                  <div
                    class="fui-TreeItemLayout__main rklbe47"
                  >
@@ -242,7 +269,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                  </div>
                </div>
                <div
-                  class="fui-Tree rnv2ez3 ___jy13a00_lpffjy0 f1acs6jw f11qra4b fepn2xe f1nbblvp fhxm7u5 fzz4f4n"
+                  class="fui-Tree rnv2ez3 ___17a32do_7zrvj80 f1acs6jw f11qra4b fepn2xe f1nbblvp f19d5ny4 fzz4f4n"
                  data-test="Tree:root"
                  role="tree"
                >
@@ -256,7 +283,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                    tabindex="0"
                  >
                    <div
-                      class="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_1vtp8mg fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
+                      class="fui-TreeItemLayout r1bx0xiv ___9uolwu0_9b0r4g0 fk6fouc fkhj508 figsok6 f1i3iumi fo100m9 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
                      data-test="TreeNode:root/child1Label"
                    >
                      <div
@@ -279,6 +306,16 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                          />
                        </svg>
                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
+                      >
+                        <img
+                          alt=""
+                          class="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
+                          src="child1Icon"
+                        />
+                      </div>
                      <div
                        class="fui-TreeItemLayout__main rklbe47"
                      >
@@ -300,7 +337,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                    tabindex="-1"
                  >
                    <div
-                      class="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_1vtp8mg fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
+                      class="fui-TreeItemLayout r1bx0xiv ___9uolwu0_9b0r4g0 fk6fouc fkhj508 figsok6 f1i3iumi fo100m9 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
                      data-test="TreeNode:root/child2LoadingLabel"
                    >
                      <div
@@ -323,6 +360,16 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                          />
                        </svg>
                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
+                      >
+                        <img
+                          alt=""
+                          class="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
+                          src="child2LoadingIcon"
+                        />
+                      </div>
                      <div
                        class="fui-TreeItemLayout__main rklbe47"
                      >
@@ -343,7 +390,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                    tabindex="-1"
                  >
                    <div
-                      class="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_1vrg09j fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
+                      class="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_vz3p260 fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
                      data-test="TreeNode:root/child3ExpandingLabel"
                    >
                      <div
@@ -363,6 +410,16 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                          </span>
                        </div>
                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
+                      >
+                        <img
+                          alt=""
+                          class="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
+                          src="child3ExpandingIcon"
+                        />
+                      </div>
                      <div
                        class="fui-TreeItemLayout__main rklbe47"
                      >
@@ -383,16 +440,23 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
      >
        <TreeItemLayout
          actions={false}
-          className="___1kqyw53_iy2icj0 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1k1erfc f1n8cmsf f1ktbui8 f1do9gdl"
+          className="___z7owk70_14ep1pe fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
          data-test="TreeNode:root"
          expandIcon={
            <ChevronRight20Regular
              data-text="TreeNode/ExpandIcon"
            />
          }
+          iconBefore={
+            <img
+              alt=""
+              className="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
+              src="rootIcon"
+            />
+          }
        >
          <div
-            className="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_1vtp8mg fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
+            className="fui-TreeItemLayout r1bx0xiv ___9uolwu0_9b0r4g0 fk6fouc fkhj508 figsok6 f1i3iumi fo100m9 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
            data-test="TreeNode:root"
          >
            <div
@@ -419,6 +483,16 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                </svg>
              </ChevronRight20Regular>
            </div>
+            <div
+              aria-hidden={true}
+              className="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
+            >
+              <img
+                alt=""
+                className="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
+                src="rootIcon"
+              />
+            </div>
            <div
              className="fui-TreeItemLayout__main rklbe47"
            >
@@ -431,7 +505,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
          </div>
        </TreeItemLayout>
        <Tree
-          className="___jy13a00_0000000 f1acs6jw f11qra4b fepn2xe f1nbblvp fhxm7u5 fzz4f4n"
+          className="___17a32do_0000000 f1acs6jw f11qra4b fepn2xe f1nbblvp f19d5ny4 fzz4f4n"
          data-test="Tree:root"
        >
          <TreeProvider
@@ -499,7 +573,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
              }
            >
              <div
-                className="fui-Tree rnv2ez3 ___jy13a00_lpffjy0 f1acs6jw f11qra4b fepn2xe f1nbblvp fhxm7u5 fzz4f4n"
+                className="fui-Tree rnv2ez3 ___17a32do_7zrvj80 f1acs6jw f11qra4b fepn2xe f1nbblvp f19d5ny4 fzz4f4n"
                data-test="Tree:root"
                role="tree"
              >
@@ -587,7 +661,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                            "itemType": "branch",
                            "layoutRef": {
                              "current": <div
-                                class="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_1vtp8mg fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
+                                class="fui-TreeItemLayout r1bx0xiv ___9uolwu0_9b0r4g0 fk6fouc fkhj508 figsok6 f1i3iumi fo100m9 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
                                data-test="TreeNode:root/child1Label"
                              >
                                <div
@@ -610,6 +684,16 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                                    />
                                  </svg>
                                </div>
+                                <div
+                                  aria-hidden="true"
+                                  class="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
+                                >
+                                  <img
+                                    alt=""
+                                    class="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
+                                    src="child1Icon"
+                                  />
+                                </div>
                                <div
                                  class="fui-TreeItemLayout__main rklbe47"
                                >
@@ -639,7 +723,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                                tabindex="0"
                              >
                                <div
-                                  class="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_1vtp8mg fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
+                                  class="fui-TreeItemLayout r1bx0xiv ___9uolwu0_9b0r4g0 fk6fouc fkhj508 figsok6 f1i3iumi fo100m9 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
                                  data-test="TreeNode:root/child1Label"
                                >
                                  <div
@@ -662,6 +746,16 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                                      />
                                    </svg>
                                  </div>
+                                  <div
+                                    aria-hidden="true"
+                                    class="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
+                                  >
+                                    <img
+                                      alt=""
+                                      class="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
+                                      src="child1Icon"
+                                    />
+                                  </div>
                                  <div
                                    class="fui-TreeItemLayout__main rklbe47"
                                  >
@@ -680,16 +774,23 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                      >
                        <TreeItemLayout
                          actions={false}
-                          className="___1kqyw53_iy2icj0 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1k1erfc f1n8cmsf f1ktbui8 f1do9gdl"
+                          className="___z7owk70_14ep1pe fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
                          data-test="TreeNode:root/child1Label"
                          expandIcon={
                            <ChevronRight20Regular
                              data-text="TreeNode/ExpandIcon"
                            />
                          }
+                          iconBefore={
+                            <img
+                              alt=""
+                              className="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
+                              src="child1Icon"
+                            />
+                          }
                        >
                          <div
-                            className="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_1vtp8mg fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
+                            className="fui-TreeItemLayout r1bx0xiv ___9uolwu0_9b0r4g0 fk6fouc fkhj508 figsok6 f1i3iumi fo100m9 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
                            data-test="TreeNode:root/child1Label"
                          >
                            <div
@@ -716,6 +817,16 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                                </svg>
                              </ChevronRight20Regular>
                            </div>
+                            <div
+                              aria-hidden={true}
+                              className="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
+                            >
+                              <img
+                                alt=""
+                                className="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
+                                src="child1Icon"
+                              />
+                            </div>
                            <div
                              className="fui-TreeItemLayout__main rklbe47"
                            >
@@ -728,7 +839,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                          </div>
                        </TreeItemLayout>
                        <Tree
-                          className="___jy13a00_0000000 f1acs6jw f11qra4b fepn2xe f1nbblvp fhxm7u5 fzz4f4n"
+                          className="___17a32do_0000000 f1acs6jw f11qra4b fepn2xe f1nbblvp f19d5ny4 fzz4f4n"
                          data-test="Tree:root/child1Label"
                        >
                          <TreeProvider
@@ -821,7 +932,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                            "itemType": "branch",
                            "layoutRef": {
                              "current": <div
-                                class="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_1vtp8mg fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
+                                class="fui-TreeItemLayout r1bx0xiv ___9uolwu0_9b0r4g0 fk6fouc fkhj508 figsok6 f1i3iumi fo100m9 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
                                data-test="TreeNode:root/child2LoadingLabel"
                              >
                                <div
@@ -844,6 +955,16 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                                    />
                                  </svg>
                                </div>
+                                <div
+                                  aria-hidden="true"
+                                  class="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
+                                >
+                                  <img
+                                    alt=""
+                                    class="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
+                                    src="child2LoadingIcon"
+                                  />
+                                </div>
                                <div
                                  class="fui-TreeItemLayout__main rklbe47"
                                >
@@ -873,7 +994,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                                tabindex="-1"
                              >
                                <div
-                                  class="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_1vtp8mg fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
+                                  class="fui-TreeItemLayout r1bx0xiv ___9uolwu0_9b0r4g0 fk6fouc fkhj508 figsok6 f1i3iumi fo100m9 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
                                  data-test="TreeNode:root/child2LoadingLabel"
                                >
                                  <div
@@ -896,6 +1017,16 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                                      />
                                    </svg>
                                  </div>
+                                  <div
+                                    aria-hidden="true"
+                                    class="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
+                                  >
+                                    <img
+                                      alt=""
+                                      class="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
+                                      src="child2LoadingIcon"
+                                    />
+                                  </div>
                                  <div
                                    class="fui-TreeItemLayout__main rklbe47"
                                  >
@@ -914,16 +1045,23 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                      >
                        <TreeItemLayout
                          actions={false}
-                          className="___1kqyw53_iy2icj0 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1k1erfc f1n8cmsf f1ktbui8 f1do9gdl"
+                          className="___z7owk70_14ep1pe fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
                          data-test="TreeNode:root/child2LoadingLabel"
                          expandIcon={
                            <ChevronRight20Regular
                              data-text="TreeNode/ExpandIcon"
                            />
                          }
+                          iconBefore={
+                            <img
+                              alt=""
+                              className="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
+                              src="child2LoadingIcon"
+                            />
+                          }
                        >
                          <div
-                            className="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_1vtp8mg fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
+                            className="fui-TreeItemLayout r1bx0xiv ___9uolwu0_9b0r4g0 fk6fouc fkhj508 figsok6 f1i3iumi fo100m9 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
                            data-test="TreeNode:root/child2LoadingLabel"
                          >
                            <div
@@ -950,6 +1088,16 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                                </svg>
                              </ChevronRight20Regular>
                            </div>
+                            <div
+                              aria-hidden={true}
+                              className="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
+                            >
+                              <img
+                                alt=""
+                                className="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
+                                src="child2LoadingIcon"
+                              />
+                            </div>
                            <div
                              className="fui-TreeItemLayout__main rklbe47"
                            >
@@ -1039,7 +1187,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                            "itemType": "leaf",
                            "layoutRef": {
                              "current": <div
-                                class="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_1vrg09j fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
+                                class="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_vz3p260 fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
                                data-test="TreeNode:root/child3ExpandingLabel"
                              >
                                <div
@@ -1059,6 +1207,16 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                                    </span>
                                  </div>
                                </div>
+                                <div
+                                  aria-hidden="true"
+                                  class="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
+                                >
+                                  <img
+                                    alt=""
+                                    class="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
+                                    src="child3ExpandingIcon"
+                                  />
+                                </div>
                                <div
                                  class="fui-TreeItemLayout__main rklbe47"
                                >
@@ -1087,7 +1245,7 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                                tabindex="-1"
                              >
                                <div
-                                  class="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_1vrg09j fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
+                                  class="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_vz3p260 fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
                                  data-test="TreeNode:root/child3ExpandingLabel"
                                >
                                  <div
@@ -1107,6 +1265,16 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                                      </span>
                                    </div>
                                  </div>
+                                  <div
+                                    aria-hidden="true"
+                                    class="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
+                                  >
+                                    <img
+                                      alt=""
+                                      class="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
+                                      src="child3ExpandingIcon"
+                                    />
+                                  </div>
                                  <div
                                    class="fui-TreeItemLayout__main rklbe47"
                                  >
@@ -1125,9 +1293,9 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                      >
                        <TreeItemLayout
                          actions={false}
-                          className="___1kqyw53_iy2icj0 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1k1erfc f1n8cmsf f1ktbui8 f1do9gdl"
+                          className="___z7owk70_14ep1pe fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
                          data-test="TreeNode:root/child3ExpandingLabel"
-                          expandIcon={
+                          iconBefore={
                            <img
                              alt=""
                              className="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
@@ -1136,12 +1304,12 @@ exports[`TreeNodeComponent fully renders a tree 1`] = `
                          }
                        >
                          <div
-                            className="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_1vrg09j fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
+                            className="fui-TreeItemLayout r1bx0xiv ___dxcrnh0_vz3p260 fk6fouc fkhj508 figsok6 f1i3iumi f1k1erfc fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
                            data-test="TreeNode:root/child3ExpandingLabel"
                          >
                            <div
                              aria-hidden={true}
-                              className="fui-TreeItemLayout__expandIcon rh4pu5o"
+                              className="fui-TreeItemLayout__iconBefore rphzgg1 ___1lqnc2u_1hdcey2 f7x41pl"
                            >
                              <img
                                alt=""
@@ -1184,9 +1352,9 @@ exports[`TreeNodeComponent renders a loading spinner if the node is loading: loa
 >
  <TreeItemLayout
    actions={false}
-    className="___1kqyw53_iy2icj0 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1k1erfc f1n8cmsf f1ktbui8 f1do9gdl"
+    className="___z7owk70_14ep1pe fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
    data-test="TreeNode:root"
-    expandIcon={
+    iconBefore={
      <img
        alt=""
        className="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
@@ -1213,13 +1381,20 @@ exports[`TreeNodeComponent renders a loading spinner if the node is loading: loa
 >
  <TreeItemLayout
    actions={false}
-    className="___1kqyw53_iy2icj0 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1k1erfc f1n8cmsf f1ktbui8 f1do9gdl"
+    className="___z7owk70_14ep1pe fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
    data-test="TreeNode:root"
    expandIcon={
      <Spinner
        size="extra-tiny"
      />
    }
+    iconBefore={
+      <img
+        alt=""
+        className="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
+        src="rootIcon"
+      />
+    }
  >
    <span
      className="___1h29e9h_0000000 fz5stix"
@@ -1240,13 +1415,20 @@ exports[`TreeNodeComponent renders a node as expandable if it has empty, but def
 >
  <TreeItemLayout
    actions={false}
-    className="___1kqyw53_iy2icj0 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1k1erfc f1n8cmsf f1ktbui8 f1do9gdl"
+    className="___z7owk70_14ep1pe fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
    data-test="TreeNode:root"
    expandIcon={
      <ChevronRight20Regular
        data-text="TreeNode/ExpandIcon"
      />
    }
+    iconBefore={
+      <img
+        alt=""
+        className="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
+        src="rootIcon"
+      />
+    }
  >
    <span
      className="___1h29e9h_0000000 fz5stix"
@@ -1313,9 +1495,9 @@ exports[`TreeNodeComponent renders a node with a menu 1`] = `
            "className": "___1r8p62d_0000000 f1xg1ack f1e31b4d",
          }
        }
-        className="___1kqyw53_iy2icj0 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1k1erfc f1n8cmsf f1ktbui8 f1do9gdl"
+        className="___z7owk70_14ep1pe fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
        data-test="TreeNode:root"
-        expandIcon={
+        iconBefore={
          <img
            alt=""
            className="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
@@ -1363,9 +1545,9 @@ exports[`TreeNodeComponent renders a single node 1`] = `
 >
  <TreeItemLayout
    actions={false}
-    className="___1kqyw53_iy2icj0 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1k1erfc f1n8cmsf f1ktbui8 f1do9gdl"
+    className="___z7owk70_14ep1pe fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
    data-test="TreeNode:root"
-    expandIcon={
+    iconBefore={
      <img
        alt=""
        className="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
@@ -1392,9 +1574,9 @@ exports[`TreeNodeComponent renders an icon if the node has one 1`] = `
 >
  <TreeItemLayout
    actions={false}
-    className="___1kqyw53_iy2icj0 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1k1erfc f1n8cmsf f1ktbui8 f1do9gdl"
+    className="___z7owk70_14ep1pe fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
    data-test="TreeNode:root"
-    expandIcon={
+    iconBefore={
      <img
        alt=""
        className="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
@@ -1421,13 +1603,20 @@ exports[`TreeNodeComponent renders selected parent node as selected if no descen
 >
  <TreeItemLayout
    actions={false}
-    className="___kqkdor0_ihxn0o0 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1k1erfc f1n8cmsf f1ktbui8 f1nfm20t f1do9gdl"
+    className="___rq9vxg0_1ykn2d2 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1nfm20t f1do9gdl"
    data-test="TreeNode:root"
    expandIcon={
      <ChevronRight20Regular
        data-text="TreeNode/ExpandIcon"
      />
    }
+    iconBefore={
+      <img
+        alt=""
+        className="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
+        src="rootIcon"
+      />
+    }
  >
    <span
      className="___1h29e9h_0000000 fz5stix"
@@ -1436,7 +1625,7 @@ exports[`TreeNodeComponent renders selected parent node as selected if no descen
    </span>
  </TreeItemLayout>
  <Tree
-    className="___jy13a00_0000000 f1acs6jw f11qra4b fepn2xe f1nbblvp fhxm7u5 fzz4f4n"
+    className="___17a32do_0000000 f1acs6jw f11qra4b fepn2xe f1nbblvp f19d5ny4 fzz4f4n"
    data-test="Tree:root"
  >
    <TreeNodeComponent
@@ -1497,13 +1686,20 @@ exports[`TreeNodeComponent renders selected parent node as unselected if any des
 >
  <TreeItemLayout
    actions={false}
-    className="___1kqyw53_iy2icj0 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1k1erfc f1n8cmsf f1ktbui8 f1do9gdl"
+    className="___z7owk70_14ep1pe fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1do9gdl"
    data-test="TreeNode:root"
    expandIcon={
      <ChevronRight20Regular
        data-text="TreeNode/ExpandIcon"
      />
    }
+    iconBefore={
+      <img
+        alt=""
+        className="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
+        src="rootIcon"
+      />
+    }
  >
    <span
      className="___1h29e9h_0000000 fz5stix"
@@ -1512,7 +1708,7 @@ exports[`TreeNodeComponent renders selected parent node as unselected if any des
    </span>
  </TreeItemLayout>
  <Tree
-    className="___jy13a00_0000000 f1acs6jw f11qra4b fepn2xe f1nbblvp fhxm7u5 fzz4f4n"
+    className="___17a32do_0000000 f1acs6jw f11qra4b fepn2xe f1nbblvp f19d5ny4 fzz4f4n"
    data-test="Tree:root"
  >
    <TreeNodeComponent
@@ -1574,9 +1770,9 @@ exports[`TreeNodeComponent renders single selected leaf node as selected 1`] = `
 >
  <TreeItemLayout
    actions={false}
-    className="___kqkdor0_ihxn0o0 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1k1erfc f1n8cmsf f1ktbui8 f1nfm20t f1do9gdl"
+    className="___rq9vxg0_1ykn2d2 fkhj508 fbv8p0b f1f09k3d fg706s2 frpde29 f1n8cmsf f1ktbui8 f1nfm20t f1do9gdl"
    data-test="TreeNode:root"
-    expandIcon={
+    iconBefore={
      <img
        alt=""
        className="___i3nbrx0_0000000 f1do9gdl fbv8p0b"
--- a/src/Explorer/Explorer.tsx
+++ b/src/Explorer/Explorer.tsx
@@ -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 {
--- a/src/Explorer/Panes/SettingsPane/SettingsPane.tsx
+++ b/src/Explorer/Panes/SettingsPane/SettingsPane.tsx
@@ -5,15 +5,13 @@ import {
  IChoiceGroupOption,
  ISpinButtonStyles,
  IToggleStyles,
-  Icon,
  MessageBar,
  MessageBarType,
  Position,
  SpinButton,
  Toggle,
-  TooltipHost,
 } from "@fluentui/react";
-import { makeStyles } from "@fluentui/react-components";
+import { Accordion, AccordionHeader, AccordionItem, AccordionPanel, makeStyles } from "@fluentui/react-components";
 import { AuthType } from "AuthType";
 import * as Constants from "Common/Constants";
 import { SplitterDirection } from "Common/Splitter";
@@ -59,6 +57,32 @@ const useStyles = makeStyles({
    listStyleType: "disc",
    paddingLeft: "20px",
  },
+  container: {
+    display: "flex",
+    flexDirection: "column",
+    height: "100%",
+  },
+  firstItem: {
+    flex: "1",
+  },
+  header: {
+    marginRight: "5px",
+  },
+  headerIcon: {
+    paddingTop: "4px",
+    cursor: "pointer",
+  },
+  settingsSectionContainer: {
+    paddingLeft: "15px",
+  },
+  settingsSectionDescription: {
+    paddingBottom: "10px",
+    fontSize: "12px",
+  },
+  subHeader: {
+    marginRight: "5px",
+    fontSize: "12px",
+  },
 });

 export const useDataPlaneRbac: DataPlaneRbacStore = create(() => ({
@@ -444,82 +468,66 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({

  return (
    <RightPaneForm {...genericPaneProps}>
-      <div className="paneMainContent">
-        {shouldShowQueryPageOptions && (
-          <div className="settingsSection">
-            <div className="settingsSectionPart">
-              <fieldset>
-                <legend id="pageOptions" className="settingsSectionLabel legendLabel">
-                  Page Options
-                </legend>
-                <InfoTooltip>
-                  Choose Custom to specify a fixed amount of query results to show, or choose Unlimited to show as many
-                  query results per page.
-                </InfoTooltip>
-                <ChoiceGroup
-                  ariaLabelledBy="pageOptions"
-                  selectedKey={pageOption}
-                  options={pageOptionList}
-                  styles={choiceButtonStyles}
-                  onChange={handleOnPageOptionChange}
-                />
-              </fieldset>
-            </div>
-            <div className="tabs settingsSectionPart">
-              {isCustomPageOptionSelected() && (
-                <div className="tabcontent">
-                  <div className="settingsSectionLabel">
-                    Query results per page
-                    <InfoTooltip>Enter the number of query results that should be shown per page.</InfoTooltip>
+      <div className={`paneMainContent ${styles.container}`}>
+        <Accordion className={styles.firstItem}>
+          {shouldShowQueryPageOptions && (
+            <AccordionItem value="1">
+              <AccordionHeader>
+                <div className={styles.header}>Page Options</div>
+              </AccordionHeader>
+              <AccordionPanel>
+                <div className={styles.settingsSectionContainer}>
+                  <div className={styles.settingsSectionDescription}>
+                    Choose Custom to specify a fixed amount of query results to show, or choose Unlimited to show as
+                    many query results per page.
                  </div>
-
-                  <SpinButton
-                    ariaLabel="Custom query items per page"
-                    value={"" + customItemPerPage}
-                    onIncrement={(newValue) => {
-                      setCustomItemPerPage(parseInt(newValue) + 1 || customItemPerPage);
-                    }}
-                    onDecrement={(newValue) => setCustomItemPerPage(parseInt(newValue) - 1 || customItemPerPage)}
-                    onValidate={(newValue) => setCustomItemPerPage(parseInt(newValue) || customItemPerPage)}
-                    min={1}
-                    step={1}
-                    className="textfontclr"
-                    incrementButtonAriaLabel="Increase value by 1"
-                    decrementButtonAriaLabel="Decrease value by 1"
+                  <ChoiceGroup
+                    ariaLabelledBy="pageOptions"
+                    selectedKey={pageOption}
+                    options={pageOptionList}
+                    styles={choiceButtonStyles}
+                    onChange={handleOnPageOptionChange}
                  />
                </div>
-              )}
-            </div>
-          </div>
-        )}
-        {userContext.apiType === "SQL" &&
-          userContext.authType === AuthType.AAD &&
-          configContext.platform !== Platform.Fabric && (
-            <>
-              <div className="settingsSection">
-                <div className="settingsSectionPart">
-                  <fieldset>
-                    <legend id="enableDataPlaneRBACOptions" className="settingsSectionLabel legendLabel">
-                      Enable Entra ID RBAC
-                    </legend>
-                    <TooltipHost
-                      content={
-                        <>
-                          Choose Automatic to enable Entra ID RBAC automatically. True/False to force enable/disable
-                          Entra ID RBAC.
-                          <a
-                            href="https://learn.microsoft.com/en-us/azure/cosmos-db/how-to-setup-rbac#use-data-explorer"
-                            target="_blank"
-                            rel="noopener noreferrer"
-                          >
-                            {" "}
-                            Learn more{" "}
-                          </a>
-                        </>
-                      }
-                    >
-                      <Icon iconName="Info" ariaLabel="Info tooltip" className="panelInfoIcon" tabIndex={0} />
-                    </TooltipHost>
+                <div className={`tabs ${styles.settingsSectionContainer}`}>
+                  {isCustomPageOptionSelected() && (
+                    <div className="tabcontent">
+                      <div className={styles.settingsSectionDescription}>
+                        Query results per page{" "}
+                        <InfoTooltip className={styles.headerIcon}>
+                          Enter the number of query results that should be shown per page.
+                        </InfoTooltip>
+                      </div>
+
+                      <SpinButton
+                        ariaLabel="Custom query items per page"
+                        value={"" + customItemPerPage}
+                        onIncrement={(newValue) => {
+                          setCustomItemPerPage(parseInt(newValue) + 1 || customItemPerPage);
+                        }}
+                        onDecrement={(newValue) => setCustomItemPerPage(parseInt(newValue) - 1 || customItemPerPage)}
+                        onValidate={(newValue) => setCustomItemPerPage(parseInt(newValue) || customItemPerPage)}
+                        min={1}
+                        step={1}
+                        className="textfontclr"
+                        incrementButtonAriaLabel="Increase value by 1"
+                        decrementButtonAriaLabel="Decrease value by 1"
+                      />
+                    </div>
+                  )}
+                </div>
+              </AccordionPanel>
+            </AccordionItem>
+          )}
+          {userContext.apiType === "SQL" &&
+            userContext.authType === AuthType.AAD &&
+            configContext.platform !== Platform.Fabric && (
+              <AccordionItem value="2">
+                <AccordionHeader>
+                  <div className={styles.header}>Enable Entra ID RBAC</div>
+                </AccordionHeader>
+                <AccordionPanel>
+                  <div className={styles.settingsSectionContainer}>
                    {showDataPlaneRBACWarning && configContext.platform === Platform.Portal && (
                      <MessageBar
                        messageBarType={MessageBarType.warning}
@@ -531,6 +539,18 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
                        operations
                      </MessageBar>
                    )}
+                    <div className={styles.settingsSectionDescription}>
+                      Choose Automatic to enable Entra ID RBAC automatically. True/False to force enable/disable Entra
+                      ID RBAC.
+                      <a
+                        href="https://learn.microsoft.com/en-us/azure/cosmos-db/how-to-setup-rbac#use-data-explorer"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        {" "}
+                        Learn more{" "}
+                      </a>
+                    </div>
                    <ChoiceGroup
                      ariaLabelledBy="enableDataPlaneRBACOptions"
                      options={dataPlaneRBACOptionsList}
@@ -538,316 +558,339 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
                      selectedKey={enableDataPlaneRBACOption}
                      onChange={handleOnDataPlaneRBACOptionChange}
                    />
-                  </fieldset>
-                </div>
-              </div>
+                  </div>
+                </AccordionPanel>
+              </AccordionItem>
+            )}
+
+          {userContext.apiType === "SQL" && (
+            <>
+              <AccordionItem value="3">
+                <AccordionHeader>
+                  <div className={styles.header}>Query Timeout</div>
+                </AccordionHeader>
+                <AccordionPanel>
+                  <div className={styles.settingsSectionContainer}>
+                    <div className={styles.settingsSectionDescription}>
+                      When a query reaches a specified time limit, a popup with an option to cancel the query will show
+                      unless automatic cancellation has been enabled.
+                    </div>
+                    <Toggle
+                      styles={toggleStyles}
+                      label="Enable query timeout"
+                      onChange={handleOnQueryTimeoutToggleChange}
+                      defaultChecked={queryTimeoutEnabled}
+                    />
+                  </div>
+                  {queryTimeoutEnabled && (
+                    <div className={styles.settingsSectionContainer}>
+                      <SpinButton
+                        label="Query timeout (ms)"
+                        labelPosition={Position.top}
+                        defaultValue={(queryTimeout || 5000).toString()}
+                        min={100}
+                        step={1000}
+                        onChange={handleOnQueryTimeoutSpinButtonChange}
+                        incrementButtonAriaLabel="Increase value by 1000"
+                        decrementButtonAriaLabel="Decrease value by 1000"
+                        styles={spinButtonStyles}
+                      />
+                      <Toggle
+                        label="Automatically cancel query after timeout"
+                        styles={toggleStyles}
+                        onChange={handleOnAutomaticallyCancelQueryToggleChange}
+                        defaultChecked={automaticallyCancelQueryAfterTimeout}
+                      />
+                    </div>
+                  )}
+                </AccordionPanel>
+              </AccordionItem>
+
+              <AccordionItem value="4">
+                <AccordionHeader>
+                  <div className={styles.header}>RU Threshold</div>
+                </AccordionHeader>
+                <AccordionPanel>
+                  <div className={styles.settingsSectionContainer}>
+                    <div className={styles.settingsSectionDescription}>
+                      If a query exceeds a configured RU threshold, the query will be aborted.
+                    </div>
+                    <Toggle
+                      styles={toggleStyles}
+                      label="Enable RU threshold"
+                      onChange={handleOnRUThresholdToggleChange}
+                      defaultChecked={ruThresholdEnabled}
+                    />
+                  </div>
+                  {ruThresholdEnabled && (
+                    <div className={styles.settingsSectionContainer}>
+                      <SpinButton
+                        label="RU Threshold (RU)"
+                        labelPosition={Position.top}
+                        defaultValue={(ruThreshold || DefaultRUThreshold).toString()}
+                        min={1}
+                        step={1000}
+                        onChange={handleOnRUThresholdSpinButtonChange}
+                        incrementButtonAriaLabel="Increase value by 1000"
+                        decrementButtonAriaLabel="Decrease value by 1000"
+                        styles={spinButtonStyles}
+                      />
+                    </div>
+                  )}
+                </AccordionPanel>
+              </AccordionItem>
+
+              <AccordionItem value="5">
+                <AccordionHeader>
+                  <div className={styles.header}>Default Query Results View</div>
+                </AccordionHeader>
+                <AccordionPanel>
+                  <div className={styles.settingsSectionContainer}>
+                    <div className={styles.settingsSectionDescription}>
+                      Select the default view to use when displaying query results.
+                    </div>
+                    <ChoiceGroup
+                      ariaLabelledBy="defaultQueryResultsView"
+                      selectedKey={defaultQueryResultsView}
+                      options={defaultQueryResultsViewOptionList}
+                      styles={choiceButtonStyles}
+                      onChange={handleOnDefaultQueryResultsViewChange}
+                    />
+                  </div>
+                </AccordionPanel>
+              </AccordionItem>
            </>
          )}
-        {userContext.apiType === "SQL" && (
-          <>
-            <div className="settingsSection">
-              <div className="settingsSectionPart">
-                <div>
-                  <legend id="ruThresholdLabel" className="settingsSectionLabel legendLabel">
-                    RU Threshold
-                  </legend>
-                  <InfoTooltip>If a query exceeds a configured RU threshold, the query will be aborted.</InfoTooltip>
+
+          <AccordionItem value="6">
+            <AccordionHeader>
+              <div className={styles.header}>Retry Settings</div>
+            </AccordionHeader>
+            <AccordionPanel>
+              <div className={styles.settingsSectionContainer}>
+                <div className={styles.settingsSectionDescription}>
+                  Retry policy associated with throttled requests during CosmosDB queries.
                </div>
                <div>
-                  <Toggle
-                    styles={toggleStyles}
-                    label="Enable RU threshold"
-                    onChange={handleOnRUThresholdToggleChange}
-                    defaultChecked={ruThresholdEnabled}
-                  />
-                </div>
-                {ruThresholdEnabled && (
-                  <div>
-                    <SpinButton
-                      label="RU Threshold (RU)"
-                      labelPosition={Position.top}
-                      defaultValue={(ruThreshold || DefaultRUThreshold).toString()}
-                      min={1}
-                      step={1000}
-                      onChange={handleOnRUThresholdSpinButtonChange}
-                      incrementButtonAriaLabel="Increase value by 1000"
-                      decrementButtonAriaLabel="Decrease value by 1000"
-                      styles={spinButtonStyles}
-                    />
-                  </div>
-                )}
-              </div>
-            </div>
-            <div className="settingsSection">
-              <div className="settingsSectionPart">
-                <div>
-                  <legend id="queryTimeoutLabel" className="settingsSectionLabel legendLabel">
-                    Query Timeout
-                  </legend>
-                  <InfoTooltip>
-                    When a query reaches a specified time limit, a popup with an option to cancel the query will show
-                    unless automatic cancellation has been enabled
+                  <span className={styles.subHeader}>Max retry attempts</span>
+                  <InfoTooltip className={styles.headerIcon}>
+                    Max number of retries to be performed for a request. Default value 9.
                  </InfoTooltip>
                </div>
-                <div>
-                  <Toggle
-                    styles={toggleStyles}
-                    label="Enable query timeout"
-                    onChange={handleOnQueryTimeoutToggleChange}
-                    defaultChecked={queryTimeoutEnabled}
-                  />
-                </div>
-                {queryTimeoutEnabled && (
-                  <div>
-                    <SpinButton
-                      label="Query timeout (ms)"
-                      labelPosition={Position.top}
-                      defaultValue={(queryTimeout || 5000).toString()}
-                      min={100}
-                      step={1000}
-                      onChange={handleOnQueryTimeoutSpinButtonChange}
-                      incrementButtonAriaLabel="Increase value by 1000"
-                      decrementButtonAriaLabel="Decrease value by 1000"
-                      styles={spinButtonStyles}
-                    />
-                    <Toggle
-                      label="Automatically cancel query after timeout"
-                      styles={toggleStyles}
-                      onChange={handleOnAutomaticallyCancelQueryToggleChange}
-                      defaultChecked={automaticallyCancelQueryAfterTimeout}
-                    />
-                  </div>
-                )}
-              </div>
-            </div>
-            <div className="settingsSection">
-              <div className="settingsSectionPart">
-                <div>
-                  <legend id="defaultQueryResultsView" className="settingsSectionLabel legendLabel">
-                    Default Query Results View
-                  </legend>
-                  <InfoTooltip>Select the default view to use when displaying query results.</InfoTooltip>
-                </div>
-                <div>
-                  <ChoiceGroup
-                    ariaLabelledBy="defaultQueryResultsView"
-                    selectedKey={defaultQueryResultsView}
-                    options={defaultQueryResultsViewOptionList}
-                    styles={choiceButtonStyles}
-                    onChange={handleOnDefaultQueryResultsViewChange}
-                  />
-                </div>
-              </div>
-            </div>
-          </>
-        )}
-        <div className="settingsSection">
-          <div className="settingsSectionPart">
-            <div className="settingsSectionLabel">
-              Retry Settings
-              <InfoTooltip>Retry policy associated with throttled requests during CosmosDB queries.</InfoTooltip>
-            </div>
-            <div>
-              <legend id="queryRetryAttemptsLabel" className="settingsSectionLabel legendLabel">
-                Max retry attempts
-              </legend>
-              <InfoTooltip>Max number of retries to be performed for a request. Default value 9.</InfoTooltip>
-            </div>
-            <SpinButton
-              labelPosition={Position.top}
-              min={1}
-              step={1}
-              value={"" + retryAttempts}
-              onChange={handleOnQueryRetryAttemptsSpinButtonChange}
-              incrementButtonAriaLabel="Increase value by 1"
-              decrementButtonAriaLabel="Decrease value by 1"
-              onIncrement={(newValue) => setRetryAttempts(parseInt(newValue) + 1 || retryAttempts)}
-              onDecrement={(newValue) => setRetryAttempts(parseInt(newValue) - 1 || retryAttempts)}
-              onValidate={(newValue) => setRetryAttempts(parseInt(newValue) || retryAttempts)}
-              styles={spinButtonStyles}
-            />
-            <div>
-              <legend id="queryRetryAttemptsLabel" className="settingsSectionLabel legendLabel">
-                Fixed retry interval (ms)
-              </legend>
-              <InfoTooltip>
-                Fixed retry interval in milliseconds to wait between each retry ignoring the retryAfter returned as part
-                of the response. Default value is 0 milliseconds.
-              </InfoTooltip>
-            </div>
-            <SpinButton
-              labelPosition={Position.top}
-              min={1000}
-              step={1000}
-              value={"" + retryInterval}
-              onChange={handleOnRetryIntervalSpinButtonChange}
-              incrementButtonAriaLabel="Increase value by 1000"
-              decrementButtonAriaLabel="Decrease value by 1000"
-              onIncrement={(newValue) => setRetryInterval(parseInt(newValue) + 1000 || retryInterval)}
-              onDecrement={(newValue) => setRetryInterval(parseInt(newValue) - 1000 || retryInterval)}
-              onValidate={(newValue) => setRetryInterval(parseInt(newValue) || retryInterval)}
-              styles={spinButtonStyles}
-            />
-            <div>
-              <legend id="queryRetryAttemptsLabel" className="settingsSectionLabel legendLabel">
-                Max wait time (s)
-              </legend>
-              <InfoTooltip>
-                Max wait time in seconds to wait for a request while the retries are happening. Default value 30
-                seconds.
-              </InfoTooltip>
-            </div>
-            <SpinButton
-              labelPosition={Position.top}
-              min={1}
-              step={1}
-              value={"" + MaxWaitTimeInSeconds}
-              onChange={handleOnMaxWaitTimeSpinButtonChange}
-              incrementButtonAriaLabel="Increase value by 1"
-              decrementButtonAriaLabel="Decrease value by 1"
-              onIncrement={(newValue) => setMaxWaitTimeInSeconds(parseInt(newValue) + 1 || MaxWaitTimeInSeconds)}
-              onDecrement={(newValue) => setMaxWaitTimeInSeconds(parseInt(newValue) - 1 || MaxWaitTimeInSeconds)}
-              onValidate={(newValue) => setMaxWaitTimeInSeconds(parseInt(newValue) || MaxWaitTimeInSeconds)}
-              styles={spinButtonStyles}
-            />
-          </div>
-        </div>
-        <div className="settingsSection">
-          <div className="settingsSectionPart settingsSectionInlineCheckbox">
-            <div className="settingsSectionLabel">
-              Enable container pagination
-              <InfoTooltip>
-                Load 50 containers at a time. Currently, containers are not pulled in alphanumeric order.
-              </InfoTooltip>
-            </div>
-            <Checkbox
-              styles={{
-                label: { padding: 0 },
-              }}
-              className="padding"
-              ariaLabel="Enable container pagination"
-              checked={containerPaginationEnabled}
-              onChange={() => setContainerPaginationEnabled(!containerPaginationEnabled)}
-            />
-          </div>
-        </div>
-        {shouldShowCrossPartitionOption && (
-          <div className="settingsSection">
-            <div className="settingsSectionPart settingsSectionInlineCheckbox">
-              <div className="settingsSectionLabel">
-                Enable cross-partition query
-                <InfoTooltip>
-                  Send more than one request while executing a query. More than one request is necessary if the query is
-                  not scoped to single partition key value.
-                </InfoTooltip>
-              </div>
-
-              <Checkbox
-                styles={{
-                  label: { padding: 0 },
-                }}
-                className="padding"
-                ariaLabel="Enable cross partition query"
-                checked={crossPartitionQueryEnabled}
-                onChange={() => setCrossPartitionQueryEnabled(!crossPartitionQueryEnabled)}
-              />
-            </div>
-          </div>
-        )}
-        {shouldShowParallelismOption && (
-          <div className="settingsSection">
-            <div className="settingsSectionPart">
-              <div className="settingsSectionLabel">
-                Max degree of parallelism
-                <InfoTooltip>
-                  Gets or sets the number of concurrent operations run client side during parallel query execution. A
-                  positive property value limits the number of concurrent operations to the set value. If it is set to
-                  less than 0, the system automatically decides the number of concurrent operations to run.
-                </InfoTooltip>
-              </div>
-
-              <SpinButton
-                min={-1}
-                step={1}
-                className="textfontclr"
-                role="textbox"
-                id="max-degree"
-                value={"" + maxDegreeOfParallelism}
-                onIncrement={(newValue) => setMaxDegreeOfParallelism(parseInt(newValue) + 1 || maxDegreeOfParallelism)}
-                onDecrement={(newValue) => setMaxDegreeOfParallelism(parseInt(newValue) - 1 || maxDegreeOfParallelism)}
-                onValidate={(newValue) => setMaxDegreeOfParallelism(parseInt(newValue) || maxDegreeOfParallelism)}
-                ariaLabel="Max degree of parallelism"
-              />
-            </div>
-          </div>
-        )}
-        {shouldShowPriorityLevelOption && (
-          <div className="settingsSection">
-            <div className="settingsSectionPart">
-              <fieldset>
-                <legend id="priorityLevel" className="settingsSectionLabel legendLabel">
-                  Priority Level
-                </legend>
-                <InfoTooltip>
-                  Sets the priority level for data-plane requests from Data Explorer when using Priority-Based
-                  Execution. If &quot;None&quot; is selected, Data Explorer will not specify priority level, and the
-                  server-side default priority level will be used.
-                </InfoTooltip>
-                <ChoiceGroup
-                  ariaLabelledBy="priorityLevel"
-                  selectedKey={priorityLevel}
-                  options={priorityLevelOptionList}
-                  styles={choiceButtonStyles}
-                  onChange={handleOnPriorityLevelOptionChange}
+                <SpinButton
+                  labelPosition={Position.top}
+                  min={1}
+                  step={1}
+                  value={"" + retryAttempts}
+                  onChange={handleOnQueryRetryAttemptsSpinButtonChange}
+                  incrementButtonAriaLabel="Increase value by 1"
+                  decrementButtonAriaLabel="Decrease value by 1"
+                  onIncrement={(newValue) => setRetryAttempts(parseInt(newValue) + 1 || retryAttempts)}
+                  onDecrement={(newValue) => setRetryAttempts(parseInt(newValue) - 1 || retryAttempts)}
+                  onValidate={(newValue) => setRetryAttempts(parseInt(newValue) || retryAttempts)}
+                  styles={spinButtonStyles}
+                />
+                <div>
+                  <span className={styles.subHeader}>Fixed retry interval (ms)</span>
+                  <InfoTooltip className={styles.headerIcon}>
+                    Fixed retry interval in milliseconds to wait between each retry ignoring the retryAfter returned as
+                    part of the response. Default value is 0 milliseconds.
+                  </InfoTooltip>
+                </div>
+                <SpinButton
+                  labelPosition={Position.top}
+                  min={1000}
+                  step={1000}
+                  value={"" + retryInterval}
+                  onChange={handleOnRetryIntervalSpinButtonChange}
+                  incrementButtonAriaLabel="Increase value by 1000"
+                  decrementButtonAriaLabel="Decrease value by 1000"
+                  onIncrement={(newValue) => setRetryInterval(parseInt(newValue) + 1000 || retryInterval)}
+                  onDecrement={(newValue) => setRetryInterval(parseInt(newValue) - 1000 || retryInterval)}
+                  onValidate={(newValue) => setRetryInterval(parseInt(newValue) || retryInterval)}
+                  styles={spinButtonStyles}
+                />
+                <div>
+                  <span className={styles.subHeader}>Max wait time (s)</span>
+                  <InfoTooltip className={styles.headerIcon}>
+                    Max wait time in seconds to wait for a request while the retries are happening. Default value 30
+                    seconds.
+                  </InfoTooltip>
+                </div>
+                <SpinButton
+                  labelPosition={Position.top}
+                  min={1}
+                  step={1}
+                  value={"" + MaxWaitTimeInSeconds}
+                  onChange={handleOnMaxWaitTimeSpinButtonChange}
+                  incrementButtonAriaLabel="Increase value by 1"
+                  decrementButtonAriaLabel="Decrease value by 1"
+                  onIncrement={(newValue) => setMaxWaitTimeInSeconds(parseInt(newValue) + 1 || MaxWaitTimeInSeconds)}
+                  onDecrement={(newValue) => setMaxWaitTimeInSeconds(parseInt(newValue) - 1 || MaxWaitTimeInSeconds)}
+                  onValidate={(newValue) => setMaxWaitTimeInSeconds(parseInt(newValue) || MaxWaitTimeInSeconds)}
+                  styles={spinButtonStyles}
                />
-              </fieldset>
-            </div>
-          </div>
-        )}
-        {shouldShowGraphAutoVizOption && (
-          <div className="settingsSection">
-            <div className="settingsSectionPart">
-              <div className="settingsSectionLabel">
-                Display Gremlin query results as:&nbsp;
-                <InfoTooltip>
-                  Select Graph to automatically visualize the query results as a Graph or JSON to display the results as
-                  JSON.
-                </InfoTooltip>
              </div>
+            </AccordionPanel>
+          </AccordionItem>

-              <ChoiceGroup
-                selectedKey={graphAutoVizDisabled}
-                options={graphAutoOptionList}
-                onChange={handleOnGremlinChange}
-                aria-label="Graph Auto-visualization"
-              />
-            </div>
-          </div>
-        )}
-        {shouldShowCopilotSampleDBOption && (
-          <div className="settingsSection">
-            <div className="settingsSectionPart settingsSectionInlineCheckbox">
-              <div className="settingsSectionLabel">
-                Enable sample database
-                <InfoTooltip>
-                  This is a sample database and collection with synthetic product data you can use to explore using
-                  NoSQL queries and Query Advisor. This will appear as another database in the Data Explorer UI, and is
-                  created by, and maintained by Microsoft at no cost to you.
-                </InfoTooltip>
+          <AccordionItem value="7">
+            <AccordionHeader>
+              <div className={styles.header}>Enable container pagination</div>
+            </AccordionHeader>
+            <AccordionPanel>
+              <div className={styles.settingsSectionContainer}>
+                <div className={styles.settingsSectionDescription}>
+                  Load 50 containers at a time. Currently, containers are not pulled in alphanumeric order.
+                </div>
+                <Checkbox
+                  styles={{
+                    label: { padding: 0 },
+                  }}
+                  className="padding"
+                  ariaLabel="Enable container pagination"
+                  checked={containerPaginationEnabled}
+                  onChange={() => setContainerPaginationEnabled(!containerPaginationEnabled)}
+                  label="Enable container pagination"
+                />
              </div>
+            </AccordionPanel>
+          </AccordionItem>
+
+          {shouldShowCrossPartitionOption && (
+            <AccordionItem value="8">
+              <AccordionHeader>
+                <div className={styles.header}>Enable cross-partition query</div>
+              </AccordionHeader>
+              <AccordionPanel>
+                <div className={styles.settingsSectionContainer}>
+                  <div className={styles.settingsSectionDescription}>
+                    Send more than one request while executing a query. More than one request is necessary if the query
+                    is not scoped to single partition key value.
+                  </div>
+                  <Checkbox
+                    styles={{
+                      label: { padding: 0 },
+                    }}
+                    className="padding"
+                    ariaLabel="Enable cross partition query"
+                    checked={crossPartitionQueryEnabled}
+                    onChange={() => setCrossPartitionQueryEnabled(!crossPartitionQueryEnabled)}
+                    label="Enable cross-partition query"
+                  />
+                </div>
+              </AccordionPanel>
+            </AccordionItem>
+          )}
+
+          {shouldShowParallelismOption && (
+            <AccordionItem value="9">
+              <AccordionHeader>
+                <div className={styles.header}>Max degree of parallelism</div>
+              </AccordionHeader>
+              <AccordionPanel>
+                <div className={styles.settingsSectionContainer}>
+                  <div className={styles.settingsSectionDescription}>
+                    Gets or sets the number of concurrent operations run client side during parallel query execution. A
+                    positive property value limits the number of concurrent operations to the set value. If it is set to
+                    less than 0, the system automatically decides the number of concurrent operations to run.
+                  </div>
+                  <SpinButton
+                    min={-1}
+                    step={1}
+                    className="textfontclr"
+                    role="textbox"
+                    id="max-degree"
+                    value={"" + maxDegreeOfParallelism}
+                    onIncrement={(newValue) =>
+                      setMaxDegreeOfParallelism(parseInt(newValue) + 1 || maxDegreeOfParallelism)
+                    }
+                    onDecrement={(newValue) =>
+                      setMaxDegreeOfParallelism(parseInt(newValue) - 1 || maxDegreeOfParallelism)
+                    }
+                    onValidate={(newValue) => setMaxDegreeOfParallelism(parseInt(newValue) || maxDegreeOfParallelism)}
+                    ariaLabel="Max degree of parallelism"
+                    label="Max degree of parallelism"
+                  />
+                </div>
+              </AccordionPanel>
+            </AccordionItem>
+          )}
+
+          {shouldShowPriorityLevelOption && (
+            <AccordionItem value="10">
+              <AccordionHeader>
+                <div className={styles.header}>Priority Level</div>
+              </AccordionHeader>
+              <AccordionPanel>
+                <div className={styles.settingsSectionContainer}>
+                  <div className={styles.settingsSectionDescription}>
+                    Sets the priority level for data-plane requests from Data Explorer when using Priority-Based
+                    Execution. If &quot;None&quot; is selected, Data Explorer will not specify priority level, and the
+                    server-side default priority level will be used.
+                  </div>
+                  <ChoiceGroup
+                    ariaLabelledBy="priorityLevel"
+                    selectedKey={priorityLevel}
+                    options={priorityLevelOptionList}
+                    styles={choiceButtonStyles}
+                    onChange={handleOnPriorityLevelOptionChange}
+                  />
+                </div>
+              </AccordionPanel>
+            </AccordionItem>
+          )}
+
+          {shouldShowGraphAutoVizOption && (
+            <AccordionItem value="11">
+              <AccordionHeader>
+                <div className={styles.header}>Display Gremlin query results as:&nbsp;</div>
+              </AccordionHeader>
+              <AccordionPanel>
+                <div className={styles.settingsSectionContainer}>
+                  <div className={styles.settingsSectionDescription}>
+                    Select Graph to automatically visualize the query results as a Graph or JSON to display the results
+                    as JSON.
+                  </div>
+                  <ChoiceGroup
+                    selectedKey={graphAutoVizDisabled}
+                    options={graphAutoOptionList}
+                    onChange={handleOnGremlinChange}
+                    aria-label="Graph Auto-visualization"
+                  />
+                </div>
+              </AccordionPanel>
+            </AccordionItem>
+          )}
+
+          {shouldShowCopilotSampleDBOption && (
+            <AccordionItem value="12">
+              <AccordionHeader>
+                <div className={styles.header}>Enable sample database</div>
+              </AccordionHeader>
+              <AccordionPanel>
+                <div className={styles.settingsSectionContainer}>
+                  <div className={styles.settingsSectionDescription}>
+                    This is a sample database and collection with synthetic product data you can use to explore using
+                    NoSQL queries and Query Advisor. This will appear as another database in the Data Explorer UI, and
+                    is created by, and maintained by Microsoft at no cost to you.
+                  </div>
+                  <Checkbox
+                    styles={{
+                      label: { padding: 0 },
+                    }}
+                    className="padding"
+                    ariaLabel="Enable sample db for Query Advisor"
+                    checked={copilotSampleDBEnabled}
+                    onChange={handleSampleDatabaseChange}
+                    label="Enable sample database"
+                  />
+                </div>
+              </AccordionPanel>
+            </AccordionItem>
+          )}
+        </Accordion>

-              <Checkbox
-                styles={{
-                  label: { padding: 0 },
-                }}
-                className="padding"
-                ariaLabel="Enable sample db for Query Advisor"
-                checked={copilotSampleDBEnabled}
-                onChange={handleSampleDatabaseChange}
-              />
-            </div>
-          </div>
-        )}
        <div className="settingsSection">
          <div className="settingsSectionPart">
            <DefaultButton
--- a/src/Explorer/Panes/SettingsPane/snapshots/SettingsPane.test.tsx.snap
+++ b/src/Explorer/Panes/SettingsPane/snapshots/SettingsPane.test.tsx.snap
--- a/src/Explorer/Panes/TableColumnSelectionPane/TableColumnSelectionPane.tsx
+++ b/src/Explorer/Panes/TableColumnSelectionPane/TableColumnSelectionPane.tsx
@@ -0,0 +1,148 @@
+import {
+  Button,
+  Checkbox,
+  CheckboxOnChangeData,
+  InputOnChangeData,
+  makeStyles,
+  SearchBox,
+  SearchBoxChangeEvent,
+  Text,
+} from "@fluentui/react-components";
+import { configContext } from "ConfigContext";
+import { ColumnDefinition } from "Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent";
+import { CosmosFluentProvider, getPlatformTheme } from "Explorer/Theme/ThemeUtil";
+import React from "react";
+import { useSidePanel } from "../../../hooks/useSidePanel";
+
+const useColumnSelectionStyles = makeStyles({
+  paneContainer: {
+    height: "100%",
+    display: "flex",
+  },
+  searchBox: {
+    width: "100%",
+  },
+  checkboxContainer: {
+    display: "flex",
+    flexDirection: "column",
+    flex: 1,
+  },
+  checkboxLabel: {
+    padding: "4px 8px",
+    marginBottom: "0px",
+  },
+});
+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, []);
+  const [columnSearchText, setColumnSearchText] = React.useState<string>("");
+  const [newSelectedColumnIds, setNewSelectedColumnIds] = React.useState<string[]>(originalSelectedColumnIds);
+  const styles = useColumnSelectionStyles();
+
+  const selectedColumnIdsSet = new Set(newSelectedColumnIds);
+  const onCheckedValueChange = (id: string, checkedData?: CheckboxOnChangeData): void => {
+    const checked = checkedData?.checked;
+    if (checked === "mixed" || checked === undefined) {
+      return;
+    }
+
+    if (checked) {
+      selectedColumnIdsSet.add(id);
+    } else {
+      if (selectedColumnIdsSet.size === 1 && selectedColumnIdsSet.has(id)) {
+        // Don't allow unchecking the last column
+        return;
+      }
+      selectedColumnIdsSet.delete(id);
+    }
+    setNewSelectedColumnIds([...selectedColumnIdsSet]);
+  };
+
+  const onSave = (): void => {
+    onSelectionChange(newSelectedColumnIds);
+    closeSidePanel();
+  };
+
+  const onSearchChange: (event: SearchBoxChangeEvent, data: InputOnChangeData) => void = (_, data) =>
+    // eslint-disable-next-line react/prop-types
+    setColumnSearchText(data.value);
+
+  const theme = getPlatformTheme(configContext.platform);
+
+  // Filter and move partition keys to the top
+  const columnDefinitionList = columnDefinitions
+    .filter((def) => !columnSearchText || def.label.toLowerCase().includes(columnSearchText.toLowerCase()))
+    .sort((a, b) => {
+      const ID = "id";
+      // "id" always at the top, then partition keys, then everything else sorted
+      if (a.id === ID) {
+        return b.id === ID ? 0 : -1;
+      } else if (b.id === ID) {
+        return a.id === ID ? 0 : 1;
+      } else if (a.isPartitionKey && !b.isPartitionKey) {
+        return -1;
+      } else if (b.isPartitionKey && !a.isPartitionKey) {
+        return 1;
+      } else {
+        return a.label.localeCompare(b.label);
+      }
+    });
+
+  return (
+    <div className={styles.paneContainer}>
+      <CosmosFluentProvider>
+        <div className="panelFormWrapper">
+          <div className="panelMainContent" style={{ display: "flex", flexDirection: "column" }}>
+            <Text>Select which columns to display in your view of items in your container.</Text>
+            <div /* Wrap <SearchBox> to avoid margin-bottom set by panelMainContent css */>
+              <SearchBox
+                className={styles.searchBox}
+                value={columnSearchText}
+                onChange={onSearchChange}
+                placeholder="Search fields"
+              />
+            </div>
+
+            <div className={styles.checkboxContainer}>
+              {columnDefinitionList.map((columnDefinition) => (
+                <Checkbox
+                  style={{ marginBottom: 0 }}
+                  key={columnDefinition.id}
+                  label={{
+                    className: styles.checkboxLabel,
+                    children: `${columnDefinition.label}${columnDefinition.isPartitionKey ? " (partition key)" : ""}`,
+                  }}
+                  checked={selectedColumnIdsSet.has(columnDefinition.id)}
+                  onChange={(_, data) => onCheckedValueChange(columnDefinition.id, data)}
+                />
+              ))}
+            </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}>
+              Save
+            </Button>
+            <Button appearance="secondary" onClick={closeSidePanel}>
+              Cancel
+            </Button>
+          </div>
+        </div>
+      </CosmosFluentProvider>
+    </div>
+  );
+};
--- a/src/Explorer/Sidebar.tsx
+++ b/src/Explorer/Sidebar.tsx
@@ -26,7 +26,7 @@ import { getCollectionName, getDatabaseName } from "Utils/APITypeUtils";
 import { Allotment, AllotmentHandle } from "allotment";
 import { useSidePanel } from "hooks/useSidePanel";
 import { debounce } from "lodash";
-import React, { useCallback, useEffect, useMemo, useRef } from "react";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";

 const useSidebarStyles = makeStyles({
  sidebar: {
@@ -86,7 +86,7 @@ const useSidebarStyles = makeStyles({
    },
  },
  globalCommandsMenuButton: {
-    display: "initial",
+    display: "inline-flex",
    "@container (min-width: 250px)": {
      display: "none",
    },
@@ -113,6 +113,12 @@ interface GlobalCommand {

 const GlobalCommands: React.FC<GlobalCommandsProps> = ({ explorer }) => {
  const styles = useSidebarStyles();
+
+  // Since we have two buttons in the DOM (one for small screens and one for larger screens), we wrap the entire thing in a div.
+  // However, that messes with the Menu positioning, so we need to get a reference to the 'div' to pass to the Menu.
+  // We can't use a ref though, because it would be set after the Menu is rendered, so we use a state value to force a re-render.
+  const [globalCommandButton, setGlobalCommandButton] = useState<HTMLElement | null>(null);
+
  const actions = useMemo<GlobalCommand[]>(() => {
    if (
      configContext.platform === Platform.Fabric ||
@@ -182,10 +188,10 @@ const GlobalCommands: React.FC<GlobalCommandsProps> = ({ explorer }) => {
          {primaryAction.label}
        </Button>
      ) : (
-        <Menu positioning="below-end">
+        <Menu positioning={{ target: globalCommandButton, position: "below", align: "end" }}>
          <MenuTrigger disableButtonEnhancement>
            {(triggerProps: MenuButtonProps) => (
-              <>
+              <div ref={setGlobalCommandButton}>
                <SplitButton
                  menuButton={{ ...triggerProps, "aria-label": "More commands" }}
                  primaryActionButton={{ onClick: onPrimaryActionClick }}
@@ -197,7 +203,7 @@ const GlobalCommands: React.FC<GlobalCommandsProps> = ({ explorer }) => {
                <MenuButton {...triggerProps} icon={primaryAction.icon} className={styles.globalCommandsMenuButton}>
                  New...
                </MenuButton>
-              </>
+              </div>
            )}
          </MenuTrigger>
          <MenuPopover>
@@ -280,7 +286,7 @@ export const SidebarContainer: React.FC<SidebarProps> = ({ explorer }) => {
      {/* Collections Tree - Start */}
      {hasSidebar && (
        // When collapsed, we force the pane to 24 pixels wide and make it non-resizable.
-        <Allotment.Pane minSize={24} preferredSize={300}>
+        <Allotment.Pane minSize={24} preferredSize={250}>
          <CosmosFluentProvider className={mergeClasses(styles.sidebar)}>
            <div className={styles.sidebarContainer}>
              {loading && (
--- a/src/Explorer/Tables/TableDataClient.ts
+++ b/src/Explorer/Tables/TableDataClient.ts
@@ -753,17 +753,11 @@ export class CassandraAPIDataClient extends TableDataClient {
      CassandraProxyEndpoints.Development,
      CassandraProxyEndpoints.Mpac,
      CassandraProxyEndpoints.Prod,
+      CassandraProxyEndpoints.Fairfax,
+      CassandraProxyEndpoints.Mooncake,
    ];
-    let canAccessCassandraProxy: boolean = userContext.databaseAccount.properties.publicNetworkAccess === "Enabled";
-    if (
-      configContext.CASSANDRA_PROXY_ENDPOINT !== CassandraProxyEndpoints.Development &&
-      userContext.databaseAccount.properties.ipRules?.length > 0
-    ) {
-      canAccessCassandraProxy = canAccessCassandraProxy && configContext.CASSANDRA_PROXY_OUTBOUND_IPS_ALLOWLISTED;
-    }

    return (
-      canAccessCassandraProxy &&
      configContext.NEW_CASSANDRA_APIS?.includes(api) &&
      activeCassandraProxyEndpoints.includes(configContext.CASSANDRA_PROXY_ENDPOINT)
    );
--- a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabStateUtil.ts
+++ b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabStateUtil.ts
@@ -1,5 +1,6 @@
 // Definitions of State data

+import { ColumnDefinition } from "Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent";
 import { deleteState, loadState, saveState, saveStateDebounced } from "Shared/AppStatePersistenceUtility";
 import { userContext } from "UserContext";
 import * as ViewModels from "../../../Contracts/ViewModels";
@@ -11,11 +12,16 @@ export enum SubComponentName {
  ColumnSizes = "ColumnSizes",
  FilterHistory = "FilterHistory",
  MainTabDivider = "MainTabDivider",
+  ColumnsSelection = "ColumnsSelection",
+  ColumnSort = "ColumnSort",
 }

 export type ColumnSizesMap = { [columnId: string]: WidthDefinition };
+export type FilterHistory = string[];
 export type WidthDefinition = { widthPx: number };
 export type TabDivider = { leftPaneWidthPercent: number };
+export type ColumnsSelection = { selectedColumnIds: string[]; columnDefinitions: ColumnDefinition[] };
+export type ColumnSort = { columnId: string; direction: "ascending" | "descending" };

 /**
 *
--- a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.test.tsx
+++ b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.test.tsx
@@ -92,7 +92,13 @@ async function waitForComponentToPaint<P = unknown>(wrapper: ReactWrapper<P> | S
 describe("Documents tab (noSql API)", () => {
  describe("buildQuery", () => {
    it("should generate the right select query for SQL API", () => {
-      expect(buildQuery(false, "")).toContain("select");
+      expect(
+        buildQuery(false, "", ["pk"], {
+          paths: ["pk"],
+          kind: "Hash",
+          version: 2,
+        }),
+      ).toContain("select");
    });
  });

--- a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx
+++ b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx
@@ -1,10 +1,9 @@
 import { Item, ItemDefinition, PartitionKey, PartitionKeyDefinition, QueryIterator, Resource } from "@azure/cosmos";
 import { Button, Input, TableRowId, makeStyles, shorthands } from "@fluentui/react-components";
-import { ArrowClockwise16Filled, Dismiss16Filled } from "@fluentui/react-icons";
+import { Dismiss16Filled } from "@fluentui/react-icons";
 import { KeyCodes, QueryCopilotSampleContainerId, QueryCopilotSampleDatabaseId } from "Common/Constants";
 import { getErrorMessage, getErrorStack } from "Common/ErrorHandlingUtils";
 import MongoUtility from "Common/MongoUtility";
-import { StyleConstants } from "Common/StyleConstants";
 import { createDocument } from "Common/dataAccess/createDocument";
 import {
  deleteDocument as deleteNoSqlDocument,
@@ -21,11 +20,14 @@ import Explorer from "Explorer/Explorer";
 import { useCommandBar } from "Explorer/Menus/CommandBar/CommandBarComponentAdapter";
 import { querySampleDocuments, readSampleDocument } from "Explorer/QueryCopilot/QueryCopilotUtilities";
 import {
+  ColumnsSelection,
+  FilterHistory,
  SubComponentName,
  TabDivider,
  readSubComponentState,
  saveSubComponentState,
 } from "Explorer/Tabs/DocumentsTabV2/DocumentsTabStateUtil";
+import { usePrevious } from "Explorer/Tabs/DocumentsTabV2/SelectionHelper";
 import { CosmosFluentProvider, LayoutConstants, cosmosShorthands, tokens } from "Explorer/Theme/ThemeUtil";
 import { useSelectedNode } from "Explorer/useSelectedNode";
 import { KeyboardAction, KeyboardActionGroup, useKeyboardActionGroup } from "KeyboardShortcuts";
@@ -51,11 +53,11 @@ import * as ViewModels from "../../../Contracts/ViewModels";
 import { CollectionBase } from "../../../Contracts/ViewModels";
 import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
 import * as QueryUtils from "../../../Utils/QueryUtils";
-import { extractPartitionKeyValues } from "../../../Utils/QueryUtils";
+import { defaultQueryFields, extractPartitionKeyValues } from "../../../Utils/QueryUtils";
 import DocumentId from "../../Tree/DocumentId";
 import ObjectId from "../../Tree/ObjectId";
 import TabsBase from "../TabsBase";
-import { DocumentsTableComponent, DocumentsTableComponentItem } from "./DocumentsTableComponent";
+import { ColumnDefinition, DocumentsTableComponent, DocumentsTableComponentItem } from "./DocumentsTableComponent";

 const MAX_FILTER_HISTORY_COUNT = 100; // Datalist will become scrollable, so we can afford to keep more items than fit on the screen

@@ -101,17 +103,6 @@ export const useDocumentsTabStyles = makeStyles({
      ...shorthands.outline("1px", "dotted"),
    },
  },
-  floatingControlsContainer: {
-    position: "relative",
-  },
-  floatingControls: {
-    position: "absolute",
-    top: "6px",
-    right: 0,
-    float: "right",
-    backgroundColor: "white",
-    zIndex: 1,
-  },
 });

 export class DocumentsTabV2 extends TabsBase {
@@ -281,7 +272,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,
@@ -469,17 +460,33 @@ export const showPartitionKey = (collection: ViewModels.CollectionBase, isPrefer
 };

 // Export to expose to unit tests
+/**
+ * Build default query
+ * @param isMongo true if mongo api
+ * @param filter
+ * @param partitionKeyProperties optional for mongo
+ * @param partitionKey  optional for mongo
+ * @param additionalField
+ * @returns
+ */
 export const buildQuery = (
  isMongo: boolean,
  filter: string,
  partitionKeyProperties?: string[],
  partitionKey?: DataModels.PartitionKey,
+  additionalField?: string[],
 ): string => {
  if (isMongo) {
    return filter || "{}";
  }

-  return QueryUtils.buildDocumentsQuery(filter, partitionKeyProperties, partitionKey);
+  // Filter out fields starting with "/" (partition keys)
+  return QueryUtils.buildDocumentsQuery(
+    filter,
+    partitionKeyProperties,
+    partitionKey,
+    additionalField?.filter((f) => !f.startsWith("/")) || [],
+  );
 };

 /**
@@ -516,9 +523,18 @@ export interface IDocumentsTabComponentProps {

 const getUniqueId = (collection: ViewModels.CollectionBase): string => `${collection.databaseId}-${collection.id()}`;

-const defaultSqlFilters = ['WHERE c.id = "foo"', "ORDER BY c._ts DESC", 'WHERE c.id = "foo" ORDER BY c._ts DESC'];
+const getDefaultSqlFilters = (partitionKeys: string[]) =>
+  ['WHERE c.id = "foo"', "ORDER BY c._ts DESC", 'WHERE c.id = "foo" ORDER BY c._ts DESC', "ORDER BY c._ts ASC"].concat(
+    partitionKeys.map((partitionKey) => `WHERE c.${partitionKey} = "foo"`),
+  );
 const defaultMongoFilters = ['{"id":"foo"}', "{ qty: { $gte: 20 } }"];

+// Extend DocumentId to include fields displayed in the table
+type ExtendedDocumentId = DocumentId & { tableFields?: DocumentsTableComponentItem };
+
+// This is based on some heuristics
+const calculateOffset = (columnNumber: number): number => columnNumber * 16 - 29;
+
 // Export to expose to unit tests
 export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabComponentProps> = ({
  isPreferredApiMongoDB,
@@ -537,7 +553,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
  const [isFilterFocused, setIsFilterFocused] = useState<boolean>(false);
  const [appliedFilter, setAppliedFilter] = useState<string>("");
  const [filterContent, setFilterContent] = useState<string>("");
-  const [documentIds, setDocumentIds] = useState<DocumentId[]>([]);
+  const [documentIds, setDocumentIds] = useState<ExtendedDocumentId[]>([]);
  const [isExecuting, setIsExecuting] = useState<boolean>(false);
  const filterInput = useRef<HTMLInputElement>(null);
  const styles = useDocumentsTabStyles();
@@ -568,7 +584,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone

  // State
  const [tabStateData, setTabStateData] = useState<TabDivider>(() =>
-    readSubComponentState(SubComponentName.MainTabDivider, _collection, {
+    readSubComponentState<TabDivider>(SubComponentName.MainTabDivider, _collection, {
      leftPaneWidthPercent: 35,
    }),
  );
@@ -582,8 +598,8 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
  const [continuationToken, setContinuationToken] = useState<string>(undefined);

  // User's filter history
-  const [lastFilterContents, setLastFilterContents] = useState<string[]>(() =>
-    readSubComponentState(SubComponentName.FilterHistory, _collection, []),
+  const [lastFilterContents, setLastFilterContents] = useState<FilterHistory>(() =>
+    readSubComponentState<FilterHistory>(SubComponentName.FilterHistory, _collection, [] as FilterHistory),
  );

  const setKeyboardActions = useKeyboardActionGroup(KeyboardActionGroup.ACTIVE_TAB);
@@ -632,10 +648,37 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
    [partitionKeyPropertyHeaders],
  );

+  const getInitialColumnSelection = () => {
+    const defaultColumnsIds = ["id"];
+    if (showPartitionKey(_collection, isPreferredApiMongoDB)) {
+      defaultColumnsIds.push(...partitionKeyPropertyHeaders);
+    }
+
+    return defaultColumnsIds;
+  };
+
+  const [selectedColumnIds, setSelectedColumnIds] = useState<string[]>(() => {
+    const persistedColumnsSelection = readSubComponentState<ColumnsSelection>(
+      SubComponentName.ColumnsSelection,
+      _collection,
+      undefined,
+    );
+
+    if (!persistedColumnsSelection) {
+      return getInitialColumnSelection();
+    }
+
+    return persistedColumnsSelection.selectedColumnIds;
+  });
+
  // new DocumentId() requires a DocumentTab which we mock with only the required properties
  const newDocumentId = useCallback(
-    (rawDocument: DataModels.DocumentId, partitionKeyProperties: string[], partitionKeyValue: string[]) =>
-      new DocumentId(
+    (
+      rawDocument: DataModels.DocumentId,
+      partitionKeyProperties: string[],
+      partitionKeyValue: string[],
+    ): ExtendedDocumentId => {
+      const extendedDocumentId = new DocumentId(
        {
          partitionKey,
          partitionKeyProperties,
@@ -645,7 +688,10 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
        },
        rawDocument,
        partitionKeyValue,
-      ),
+      ) as ExtendedDocumentId;
+      extendedDocumentId.tableFields = { ...rawDocument };
+      return extendedDocumentId;
+    },
    [partitionKey],
  );

@@ -807,6 +853,10 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone

          setDocumentIds(ids);
          setEditorState(ViewModels.DocumentExplorerState.existingDocumentNoEdits);
+
+          // Update column choices
+          setColumnDefinitionsFromDocument(savedDocument);
+
          TelemetryProcessor.traceSuccess(
            Action.CreateDocument,
            {
@@ -889,6 +939,10 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
            },
            startKey,
          );
+
+          // Update column choices
+          selectedDocumentId.tableFields = { ...documentContent };
+          setColumnDefinitionsFromDocument(documentContent);
        },
        (error) => {
          onExecutionErrorChange(true);
@@ -1090,7 +1144,13 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
    const _queryAbortController = new AbortController();
    setQueryAbortController(_queryAbortController);
    const filter: string = filterContent.trim();
-    const query: string = buildQuery(isPreferredApiMongoDB, filter, partitionKeyProperties, partitionKey);
+    const query: string = buildQuery(
+      isPreferredApiMongoDB,
+      filter,
+      partitionKeyProperties,
+      partitionKey,
+      selectedColumnIds,
+    );
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    const options: any = {};
    // TODO: Property 'enableCrossPartitionQuery' does not exist on type 'FeedOptions'.
@@ -1113,6 +1173,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
    resourceTokenPartitionKey,
    isQueryCopilotSampleContainer,
    _collection,
+    selectedColumnIds,
  ]);

  const onHideFilterClick = (): void => {
@@ -1258,16 +1319,6 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
    documentsIterator, // loadNextPage: disabled as it will trigger a circular dependency and infinite loop
  ]);

-  const onRefreshKeyInput: KeyboardEventHandler<HTMLButtonElement> = (event) => {
-    if (event.key === " " || event.key === "Enter") {
-      const focusElement = event.target as HTMLElement;
-      refreshDocumentsGrid(false);
-      focusElement && focusElement.focus();
-      event.stopPropagation();
-      event.preventDefault();
-    }
-  };
-
  const onLoadMoreKeyInput: KeyboardEventHandler<HTMLAnchorElement> = (event) => {
    if (event.key === " " || event.key === "Enter") {
      const focusElement = event.target as HTMLElement;
@@ -1299,9 +1350,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone

  // Table config here
  const tableItems: DocumentsTableComponentItem[] = documentIds.map((documentId) => {
-    const item: Record<string, string> & { id: string } = {
-      id: documentId.id(),
-    };
+    const item: DocumentsTableComponentItem = documentId.tableFields || { id: documentId.id() };

    if (partitionKeyPropertyHeaders && documentId.stringPartitionKeyValues) {
      for (let i = 0; i < partitionKeyPropertyHeaders.length; i++) {
@@ -1312,6 +1361,44 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
    return item;
  });

+  const extractColumnDefinitionsFromDocument = (document: unknown): ColumnDefinition[] => {
+    let columnDefinitions: ColumnDefinition[] = Object.keys(document)
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      .filter((key) => typeof (document as any)[key] === "string" || typeof (document as any)[key] === "number") // Only allow safe types for displayable React children
+      .map((key) =>
+        key === "id"
+          ? { id: key, label: isPreferredApiMongoDB ? "_id" : "id", isPartitionKey: false }
+          : { id: key, label: key, isPartitionKey: false },
+      );
+
+    if (showPartitionKey(_collection, isPreferredApiMongoDB)) {
+      columnDefinitions.push(
+        ...partitionKeyPropertyHeaders.map((key) => ({ id: key, label: key, isPartitionKey: true })),
+      );
+
+      // Remove properties that are the partition keys, since they are already included
+      columnDefinitions = columnDefinitions.filter(
+        (columnDefinition) => !partitionKeyProperties.includes(columnDefinition.id),
+      );
+    }
+
+    return columnDefinitions;
+  };
+
+  /**
+   * Extract column definitions from document and add to the definitions
+   * @param document
+   */
+  const setColumnDefinitionsFromDocument = (document: unknown): void => {
+    const currentIds = new Set(columnDefinitions.map((columnDefinition) => columnDefinition.id));
+    extractColumnDefinitionsFromDocument(document).forEach((columnDefinition) => {
+      if (!currentIds.has(columnDefinition.id)) {
+        columnDefinitions.push(columnDefinition);
+      }
+    });
+    setColumnDefinitions([...columnDefinitions]);
+  };
+
  /**
   * replicate logic of selectedDocument.click();
   * Document has been clicked on in table
@@ -1327,6 +1414,9 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
    (_isQueryCopilotSampleContainer ? readSampleDocument(documentId) : readDocument(_collection, documentId)).then(
      (content) => {
        initDocumentEditor(documentId, content);
+
+        // Update columns
+        setColumnDefinitionsFromDocument(content);
      },
    );

@@ -1417,10 +1507,22 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
    return () => resizeObserver.disconnect(); // clean up
  }, []);

-  const columnHeaders = {
-    idHeader: isPreferredApiMongoDB ? "_id" : "id",
-    partitionKeyHeaders: (showPartitionKey(_collection, isPreferredApiMongoDB) && partitionKeyPropertyHeaders) || [],
-  };
+  // Column definition is a map<id, ColumnDefinition> to garantee uniqueness
+  const [columnDefinitions, setColumnDefinitions] = useState<ColumnDefinition[]>(() => {
+    const persistedColumnsSelection = readSubComponentState<ColumnsSelection>(
+      SubComponentName.ColumnsSelection,
+      _collection,
+      undefined,
+    );
+
+    if (!persistedColumnsSelection) {
+      return extractColumnDefinitionsFromDocument({
+        id: "id",
+      });
+    }
+
+    return persistedColumnsSelection.columnDefinitions;
+  });

  const onSelectedRowsChange = (selectedRows: Set<TableRowId>) => {
    confirmDiscardingChange(() => {
@@ -1652,7 +1754,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
      setIsExecuting(true);
      onExecutionErrorChange(false);
      const filter: string = filterContent.trim();
-      const query: string = buildQuery(isPreferredApiMongoDB, filter);
+      const query: string = buildQuery(isPreferredApiMongoDB, filter, selectedColumnIds);

      return MongoProxyClient.queryDocuments(
        _collection.databaseId,
@@ -1718,7 +1820,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
    const limitedLastFilterContents = lastFilterContents.slice(0, MAX_FILTER_HISTORY_COUNT);

    setLastFilterContents(limitedLastFilterContents);
-    saveSubComponentState(SubComponentName.FilterHistory, _collection, lastFilterContents);
+    saveSubComponentState<FilterHistory>(SubComponentName.FilterHistory, _collection, lastFilterContents);
  };

  const refreshDocumentsGrid = useCallback(
@@ -1751,6 +1853,41 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
    [createIterator, filterContent],
  );

+  const onColumnSelectionChange = (newSelectedColumnIds: string[]): void => {
+    // Do not allow to unselecting all columns
+    if (newSelectedColumnIds.length === 0) {
+      return;
+    }
+
+    setSelectedColumnIds(newSelectedColumnIds);
+
+    saveSubComponentState<ColumnsSelection>(SubComponentName.ColumnsSelection, _collection, {
+      selectedColumnIds: newSelectedColumnIds,
+      columnDefinitions,
+    });
+  };
+
+  const prevSelectedColumnIds = usePrevious({ selectedColumnIds, setSelectedColumnIds });
+
+  useEffect(() => {
+    // If we are adding a field, let's refresh to include the field in the query
+    let addedField = false;
+    for (const field of selectedColumnIds) {
+      if (
+        !defaultQueryFields.includes(field) &&
+        prevSelectedColumnIds &&
+        !prevSelectedColumnIds.selectedColumnIds.includes(field)
+      ) {
+        addedField = true;
+        break;
+      }
+    }
+
+    if (addedField) {
+      refreshDocumentsGrid(false);
+    }
+  }, [prevSelectedColumnIds, refreshDocumentsGrid, selectedColumnIds]);
+
  return (
    <CosmosFluentProvider className={styles.container}>
      <div className="tab-pane active" role="tabpanel" style={{ display: "flex" }}>
@@ -1800,7 +1937,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
                <datalist id={`filtersList-${getUniqueId(_collection)}`}>
                  {addStringsNoDuplicate(
                    lastFilterContents,
-                    isPreferredApiMongoDB ? defaultMongoFilters : defaultSqlFilters,
+                    isPreferredApiMongoDB ? defaultMongoFilters : getDefaultSqlFilters(partitionKeyProperties),
                  ).map((filter) => (
                    <option key={filter} value={filter} />
                  ))}
@@ -1845,42 +1982,40 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
          <Allotment
            onDragEnd={(sizes: number[]) => {
              tabStateData.leftPaneWidthPercent = (100 * sizes[0]) / (sizes[0] + sizes[1]);
-              saveSubComponentState(SubComponentName.MainTabDivider, _collection, tabStateData);
+              saveSubComponentState<TabDivider>(SubComponentName.MainTabDivider, _collection, tabStateData);
              setTabStateData(tabStateData);
            }}
          >
            <Allotment.Pane preferredSize={`${tabStateData.leftPaneWidthPercent}%`} minSize={55}>
              <div style={{ height: "100%", width: "100%", overflow: "hidden" }} ref={tableContainerRef}>
-                <div className={styles.floatingControlsContainer}>
-                  <div className={styles.floatingControls}>
-                    <Button
-                      appearance="transparent"
-                      aria-label="Refresh"
-                      size="small"
-                      icon={<ArrowClockwise16Filled />}
-                      style={{
-                        color: StyleConstants.AccentMedium,
-                      }}
-                      onClick={() => refreshDocumentsGrid(false)}
-                      onKeyDown={onRefreshKeyInput}
+                <div className={styles.tableContainer}>
+                  <div
+                    style={
+                      {
+                        height: "100%",
+                        width: `calc(100% + ${calculateOffset(selectedColumnIds.length)}px)`,
+                      } /* Fix to make table not resize beyond parent's width */
+                    }
+                  >
+                    <DocumentsTableComponent
+                      onRefreshTable={() => refreshDocumentsGrid(false)}
+                      items={tableItems}
+                      onItemClicked={(index) => onDocumentClicked(index, documentIds)}
+                      onSelectedRowsChange={onSelectedRowsChange}
+                      selectedRows={selectedRows}
+                      size={tableContainerSizePx}
+                      selectedColumnIds={selectedColumnIds}
+                      columnDefinitions={columnDefinitions}
+                      isRowSelectionDisabled={
+                        configContext.platform === Platform.Fabric && userContext.fabricContext?.isReadOnly
+                      }
+                      onColumnSelectionChange={onColumnSelectionChange}
+                      defaultColumnSelection={getInitialColumnSelection()}
+                      collection={_collection}
+                      isColumnSelectionDisabled={isPreferredApiMongoDB}
                    />
                  </div>
                </div>
-                <div className={styles.tableContainer}>
-                  <DocumentsTableComponent
-                    items={tableItems}
-                    onItemClicked={(index) => onDocumentClicked(index, documentIds)}
-                    onSelectedRowsChange={onSelectedRowsChange}
-                    selectedRows={selectedRows}
-                    size={tableContainerSizePx}
-                    columnHeaders={columnHeaders}
-                    isSelectionDisabled={
-                      (partitionKey.systemKey && !isPreferredApiMongoDB) ||
-                      (configContext.platform === Platform.Fabric && userContext.fabricContext?.isReadOnly)
-                    }
-                    collection={_collection}
-                  />
-                </div>
                {tableItems.length > 0 && (
                  <a
                    className={styles.loadMore}
--- a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.test.tsx
+++ b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.test.tsx
@@ -21,15 +21,19 @@ describe("DocumentsTableComponent", () => {
      height: 0,
      width: 0,
    },
-    columnHeaders: {
-      idHeader: ID_HEADER,
-      partitionKeyHeaders: [PARTITION_KEY_HEADER],
-    },
-    isSelectionDisabled: false,
+    columnDefinitions: [
+      { id: ID_HEADER, label: "ID", isPartitionKey: false },
+      { id: PARTITION_KEY_HEADER, label: "Partition Key", isPartitionKey: true },
+    ],
+    isRowSelectionDisabled: false,
    collection: {
      databaseId: "db",
      id: ((): string => "coll") as ko.Observable<string>,
    } as ViewModels.CollectionBase,
+    onRefreshTable: (): void => {
+      throw new Error("Function not implemented.");
+    },
+    selectedColumnIds: [],
  });

  it("should render documents and partition keys in header", () => {
@@ -40,7 +44,7 @@ describe("DocumentsTableComponent", () => {

  it("should not render selection column when isSelectionDisabled is true", () => {
    const props: IDocumentsTableComponentProps = createMockProps();
-    props.isSelectionDisabled = true;
+    props.isRowSelectionDisabled = true;
    const wrapper = mount(<DocumentsTableComponent {...props} />);
    expect(wrapper).toMatchSnapshot();
  });
--- a/src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx
+++ b/src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx
@@ -1,30 +1,48 @@
 import {
-  createTableColumn,
+  Button,
  Menu,
+  MenuDivider,
  MenuItem,
  MenuList,
  MenuPopover,
  MenuTrigger,
  TableRowData as RowStateBase,
+  SortDirection,
  Table,
  TableBody,
  TableCell,
  TableCellLayout,
  TableColumnDefinition,
+  TableColumnId,
  TableColumnSizingOptions,
  TableHeader,
  TableHeaderCell,
  TableRow,
  TableRowId,
  TableSelectionCell,
+  tokens,
  useArrowNavigationGroup,
  useTableColumnSizing_unstable,
  useTableFeatures,
  useTableSelection,
+  useTableSort,
 } from "@fluentui/react-components";
+import {
+  ArrowClockwise16Regular,
+  ArrowResetRegular,
+  DeleteRegular,
+  EditRegular,
+  MoreHorizontalRegular,
+  TableResizeColumnRegular,
+  TextSortAscendingRegular,
+  TextSortDescendingRegular,
+} from "@fluentui/react-icons";
 import { NormalizedEventKey } from "Common/Constants";
+import { TableColumnSelectionPane } from "Explorer/Panes/TableColumnSelectionPane/TableColumnSelectionPane";
 import {
  ColumnSizesMap,
+  ColumnSort,
+  deleteSubComponentState,
  readSubComponentState,
  saveSubComponentState,
  SubComponentName,
@@ -32,29 +50,37 @@ 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";
 import { FixedSizeList as List, ListChildComponentProps } from "react-window";
 import * as ViewModels from "../../../Contracts/ViewModels";

 export type DocumentsTableComponentItem = {
  id: string;
-} & Record<string, string>;
+} & Record<string, string | number>;

-export type ColumnHeaders = {
-  idHeader: string;
-  partitionKeyHeaders: string[];
+export type ColumnDefinition = {
+  id: string;
+  label: string;
+  isPartitionKey: boolean;
 };
 export interface IDocumentsTableComponentProps {
+  onRefreshTable: () => void;
  items: DocumentsTableComponentItem[];
  onItemClicked: (index: number) => void;
  onSelectedRowsChange: (selectedItemsIndices: Set<TableRowId>) => void;
  selectedRows: Set<TableRowId>;
  size: { height: number; width: number };
-  columnHeaders: ColumnHeaders;
+  selectedColumnIds: string[];
+  columnDefinitions: ColumnDefinition[];
  style?: React.CSSProperties;
-  isSelectionDisabled?: boolean;
+  isRowSelectionDisabled?: boolean;
  collection: ViewModels.CollectionBase;
+  onColumnSelectionChange?: (newSelectedColumnIds: string[]) => void;
+  defaultColumnSelection?: string[];
+  isColumnSelectionDisabled?: boolean;
 }

 interface TableRowData extends RowStateBase<DocumentsTableComponentItem> {
@@ -67,25 +93,33 @@ interface ReactWindowRenderFnProps extends ListChildComponentProps {
  data: TableRowData[];
 }

+const COLUMNS_MENU_NAME = "columnsMenu";
+
 const defaultSize = {
  idealWidth: 200,
  minWidth: 50,
 };
 export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> = ({
+  onRefreshTable,
  items,
  onSelectedRowsChange,
  selectedRows,
  style,
  size,
-  columnHeaders,
-  isSelectionDisabled,
+  selectedColumnIds,
+  columnDefinitions,
+  isRowSelectionDisabled: isSelectionDisabled,
  collection,
+  onColumnSelectionChange,
+  defaultColumnSelection,
+  isColumnSelectionDisabled,
 }: IDocumentsTableComponentProps) => {
+  const styles = useDocumentsTabStyles();
+
  const [columnSizingOptions, setColumnSizingOptions] = React.useState<TableColumnSizingOptions>(() => {
-    const columnIds = ["id"].concat(columnHeaders.partitionKeyHeaders);
    const columnSizesMap: ColumnSizesMap = readSubComponentState(SubComponentName.ColumnSizes, collection, {});
    const columnSizesPx: TableColumnSizingOptions = {};
-    columnIds.forEach((columnId) => {
+    selectedColumnIds.forEach((columnId) => {
      if (
        !columnSizesMap ||
        !columnSizesMap[columnId] ||
@@ -103,7 +137,24 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
    return columnSizesPx;
  });

-  const styles = useDocumentsTabStyles();
+  const [sortState, setSortState] = React.useState<{
+    sortDirection: "ascending" | "descending";
+    sortColumn: TableColumnId | undefined;
+  }>(() => {
+    const sort = readSubComponentState<ColumnSort>(SubComponentName.ColumnSort, collection, undefined);
+
+    if (!sort) {
+      return {
+        sortDirection: undefined,
+        sortColumn: undefined,
+      };
+    }
+
+    return {
+      sortDirection: sort.direction,
+      sortColumn: sort.columnId,
+    };
+  });

  const onColumnResize = React.useCallback((_, { columnId, width }: { columnId: string; width: number }) => {
    setColumnSizingOptions((state) => {
@@ -122,42 +173,123 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
        return acc;
      }, {} as ColumnSizesMap);

-      saveSubComponentState(SubComponentName.ColumnSizes, collection, persistentSizes, true);
+      saveSubComponentState<ColumnSizesMap>(SubComponentName.ColumnSizes, collection, persistentSizes, true);

      return newSizingOptions;
    });
  }, []);

+  // const restoreFocusTargetAttribute = useRestoreFocusTarget();
+
+  const onSortClick = (event: React.SyntheticEvent, columnId: string, direction: SortDirection) => {
+    setColumnSort(event, columnId, direction);
+
+    if (columnId === undefined || direction === undefined) {
+      deleteSubComponentState(SubComponentName.ColumnSort, collection);
+      return;
+    }
+
+    saveSubComponentState<ColumnSort>(SubComponentName.ColumnSort, collection, { columnId, direction });
+  };
+
  // 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(
    () =>
-      [
-        createTableColumn<DocumentsTableComponentItem>({
-          columnId: "id",
-          compare: (a, b) => a.id.localeCompare(b.id),
-          renderHeaderCell: () => columnHeaders.idHeader,
+      columnDefinitions
+        .filter((column) => selectedColumnIds.includes(column.id))
+        .map((column) => ({
+          columnId: column.id,
+          compare: (a, b) => {
+            if (typeof a[column.id] === "string") {
+              return (a[column.id] as string).localeCompare(b[column.id] as string);
+            } else if (typeof a[column.id] === "number") {
+              return (a[column.id] as number) - (b[column.id] as number);
+            } else {
+              // Should not happen
+              return 0;
+            }
+          },
+          renderHeaderCell: () => (
+            <>
+              <span title={column.label}>{column.label}</span>
+              <Menu>
+                <MenuTrigger disableButtonEnhancement>
+                  <Button
+                    // {...restoreFocusTargetAttribute}
+                    appearance="transparent"
+                    aria-label="Select column"
+                    size="small"
+                    icon={<MoreHorizontalRegular />}
+                    style={{ position: "absolute", right: 0, backgroundColor: tokens.colorNeutralBackground1 }}
+                  />
+                </MenuTrigger>
+                <MenuPopover>
+                  <MenuList>
+                    <MenuItem key="refresh" icon={<ArrowClockwise16Regular />} onClick={onRefreshTable}>
+                      Refresh
+                    </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>
+              </Menu>
+            </>
+          ),
          renderCell: (item) => (
-            <TableCellLayout truncate title={item.id}>
-              {item.id}
+            <TableCellLayout truncate title={`${item[column.id]}`}>
+              {item[column.id]}
            </TableCellLayout>
          ),
-        }),
-      ].concat(
-        columnHeaders.partitionKeyHeaders.map((pkHeader) =>
-          createTableColumn<DocumentsTableComponentItem>({
-            columnId: pkHeader,
-            compare: (a, b) => a[pkHeader].localeCompare(b[pkHeader]),
-            // Show Refresh button on last column
-            renderHeaderCell: () => <span title={pkHeader}>{pkHeader}</span>,
-            renderCell: (item) => (
-              <TableCellLayout truncate title={item[pkHeader]}>
-                {item[pkHeader]}
-              </TableCellLayout>
-            ),
-          }),
-        ),
-      ),
-    [columnHeaders],
+        })),
+    [columnDefinitions, onColumnSelectionChange, selectedColumnIds],
  );

  const [selectionStartIndex, setSelectionStartIndex] = React.useState<number>(INITIAL_SELECTED_ROW_INDEX);
@@ -247,6 +379,7 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
    columnSizing_unstable: columnSizing,
    tableRef,
    selection: { allRowsSelected, someRowsSelected, toggleAllRows, toggleRow, isRowSelected },
+    sort: { getSortDirection, setColumnSort, sort },
  } = useTableFeatures(
    {
      columns,
@@ -260,25 +393,36 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
        // eslint-disable-next-line react/prop-types
        onSelectionChange: (e, data) => onSelectedRowsChange(data.selectedItems),
      }),
+      useTableSort({
+        sortState,
+        onSortChange: (e, nextSortState) => setSortState(nextSortState),
+      }),
    ],
  );

-  const rows: TableRowData[] = getRows((row) => {
-    const selected = isRowSelected(row.rowId);
-    return {
-      ...row,
-      onClick: (e: React.MouseEvent) => toggleRow(e, row.rowId),
-      onKeyDown: (e: React.KeyboardEvent) => {
-        if (e.key === " ") {
-          e.preventDefault();
-          toggleRow(e, row.rowId);
-        }
-      },
-      selected,
-      appearance: selected ? ("brand" as const) : ("none" as const),
-    };
+  const headerSortProps = (columnId: TableColumnId) => ({
+    // onClick: (e: React.MouseEvent) => toggleColumnSort(e, columnId),
+    sortDirection: getSortDirection(columnId),
  });

+  const rows: TableRowData[] = sort(
+    getRows((row) => {
+      const selected = isRowSelected(row.rowId);
+      return {
+        ...row,
+        onClick: (e: React.MouseEvent) => toggleRow(e, row.rowId),
+        onKeyDown: (e: React.KeyboardEvent) => {
+          if (e.key === " ") {
+            e.preventDefault();
+            toggleRow(e, row.rowId);
+          }
+        },
+        selected,
+        appearance: selected ? ("brand" as const) : ("none" as const),
+      };
+    }),
+  );
+
  const toggleAllKeydown = React.useCallback(
    (e: React.KeyboardEvent<HTMLDivElement>) => {
      if (e.key === " ") {
@@ -304,37 +448,50 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
    ...style,
  };

+  const checkedValues: { [COLUMNS_MENU_NAME]: string[] } = {
+    [COLUMNS_MENU_NAME]: [],
+  };
+  columnDefinitions.forEach(
+    (columnDefinition) =>
+      selectedColumnIds.includes(columnDefinition.id) && checkedValues[COLUMNS_MENU_NAME].push(columnDefinition.id),
+  );
+
+  const openColumnSelectionPane = (): void => {
+    useSidePanel
+      .getState()
+      .openSidePanel(
+        "Select columns",
+        <TableColumnSelectionPane
+          selectedColumnIds={selectedColumnIds}
+          columnDefinitions={columnDefinitions}
+          onSelectionChange={onColumnSelectionChange}
+          defaultSelection={defaultColumnSelection}
+        />,
+      );
+  };
+
  return (
-    <Table noNativeElements {...tableProps}>
+    <Table noNativeElements sortable {...tableProps}>
      <TableHeader>
        <TableRow className={styles.tableRow} style={{ width: size ? size.width - 15 : "100%" }}>
          {!isSelectionDisabled && (
            <TableSelectionCell
+              key="selectcell"
              checked={allRowsSelected ? true : someRowsSelected ? "mixed" : false}
              onClick={toggleAllRows}
              onKeyDown={toggleAllKeydown}
              checkboxIndicator={{ "aria-label": "Select all rows " }}
            />
          )}
-          {columns.map((column /* index */) => (
-            <Menu openOnContext key={column.columnId}>
-              <MenuTrigger>
-                <TableHeaderCell
-                  className={styles.tableCell}
-                  key={column.columnId}
-                  {...columnSizing.getTableHeaderCellProps(column.columnId)}
-                >
-                  {column.renderHeaderCell()}
-                </TableHeaderCell>
-              </MenuTrigger>
-              <MenuPopover>
-                <MenuList>
-                  <MenuItem onClick={columnSizing.enableKeyboardMode(column.columnId)}>
-                    Keyboard Column Resizing
-                  </MenuItem>
-                </MenuList>
-              </MenuPopover>
-            </Menu>
+          {columns.map((column) => (
+            <TableHeaderCell
+              className={styles.tableCell}
+              key={column.columnId}
+              {...columnSizing.getTableHeaderCellProps(column.columnId)}
+              {...headerSortProps(column.columnId)}
+            >
+              {column.renderHeaderCell()}
+            </TableHeaderCell>
          ))}
        </TableRow>
      </TableHeader>
--- a/src/Explorer/Tabs/DocumentsTabV2/SelectionHelper.ts
+++ b/src/Explorer/Tabs/DocumentsTabV2/SelectionHelper.ts
@@ -1,3 +1,5 @@
+import { useEffect, useRef } from "react";
+
 /**
 * Utility class to help with selection.
 * This emulates File Explorer selection behavior.
@@ -90,3 +92,12 @@ export const selectionHelper = (
    }
  }
 };
+
+// To get previous values of a state in useEffect
+export const usePrevious = <T>(value: T): T | undefined => {
+  const ref = useRef<T>();
+  useEffect(() => {
+    ref.current = value;
+  });
+  return ref.current;
+};
--- a/src/Explorer/Tabs/DocumentsTabV2/snapshots/DocumentsTabV2.test.tsx.snap
+++ b/src/Explorer/Tabs/DocumentsTabV2/snapshots/DocumentsTabV2.test.tsx.snap
@@ -55,53 +55,57 @@ exports[`Documents tab (noSql API) when rendered should render the page 1`] = `
            }
          >
            <div
-              className="___77lcry0_0000000 f10pi13n"
+              className="___9o87uj0_0000000 ffefeo0"
            >
              <div
-                className="___1rwkz4r_0000000 f1euv43f f1l8gmrm f1e31b4d f150nix6 fy6ml6n f19g0ac"
+                style={
+                  {
+                    "height": "100%",
+                    "width": "calc(100% + -13px)",
+                  }
+                }
              >
-                <Button
-                  appearance="transparent"
-                  aria-label="Refresh"
-                  icon={<ArrowClockwise16Filled />}
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  size="small"
-                  style={
+                <DocumentsTableComponent
+                  collection={
                    {
-                      "color": undefined,
+                      "databaseId": "databaseId",
+                      "id": [Function],
+                    }
+                  }
+                  columnDefinitions={
+                    [
+                      {
+                        "id": "id",
+                        "isPartitionKey": false,
+                        "label": "id",
+                      },
+                    ]
+                  }
+                  defaultColumnSelection={
+                    [
+                      "id",
+                    ]
+                  }
+                  isColumnSelectionDisabled={false}
+                  isRowSelectionDisabled={true}
+                  items={[]}
+                  onColumnSelectionChange={[Function]}
+                  onItemClicked={[Function]}
+                  onRefreshTable={[Function]}
+                  onSelectedRowsChange={[Function]}
+                  selectedColumnIds={
+                    [
+                      "id",
+                    ]
+                  }
+                  selectedRows={
+                    Set {
+                      0,
                    }
                  }
                />
              </div>
            </div>
-            <div
-              className="___9o87uj0_0000000 ffefeo0"
-            >
-              <DocumentsTableComponent
-                collection={
-                  {
-                    "databaseId": "databaseId",
-                    "id": [Function],
-                  }
-                }
-                columnHeaders={
-                  {
-                    "idHeader": "id",
-                    "partitionKeyHeaders": [],
-                  }
-                }
-                isSelectionDisabled={true}
-                items={[]}
-                onItemClicked={[Function]}
-                onSelectedRowsChange={[Function]}
-                selectedRows={
-                  Set {
-                    0,
-                  }
-                }
-              />
-            </div>
          </div>
        </Allotment.Pane>
        <Allotment.Pane
--- a/src/Explorer/Tabs/DocumentsTabV2/snapshots/DocumentsTableComponent.test.tsx.snap
+++ b/src/Explorer/Tabs/DocumentsTabV2/snapshots/DocumentsTableComponent.test.tsx.snap
--- a/src/Explorer/Tabs/Tabs.tsx
+++ b/src/Explorer/Tabs/Tabs.tsx
@@ -1,7 +1,7 @@
 import { IMessageBarStyles, Link, MessageBar, MessageBarButton, MessageBarType } from "@fluentui/react";
 import { CassandraProxyEndpoints, MongoProxyEndpoints } from "Common/Constants";
 import { sendMessage } from "Common/MessageHandler";
-import { Platform, configContext, updateConfigContext } from "ConfigContext";
+import { Platform, configContext } from "ConfigContext";
 import { IpRule } from "Contracts/DataModels";
 import { MessageTypes } from "Contracts/ExplorerContracts";
 import { CollectionTabKind } from "Contracts/ViewModels";
@@ -100,8 +100,7 @@ export const Tabs = ({ explorer }: TabsProps): JSX.Element => {
            },
          }}
        >
-          {`To prevent queries from using excessive RUs, Data Explorer has a 5,000 RU default limit. To modify or remove
-          the limit, go to the Settings cog on the right and find "RU Threshold".`}
+          {`Data Explorer has a 5,000 RU default limit. To adjust the limit, go to the Settings page and find "RU Threshold".`}
          <Link
            className="underlinedLink"
            href="https://review.learn.microsoft.com/en-us/azure/cosmos-db/data-explorer?branch=main#configure-request-unit-threshold"
@@ -119,7 +118,7 @@ export const Tabs = ({ explorer }: TabsProps): JSX.Element => {
            setShowMongoAndCassandraProxiesNetworkSettingsWarningState(false);
          }}
        >
-          {`We are moving our middleware to new infrastructure. To avoid future issues with Data Explorer access, please
+          {`We have migrated our middleware to new infrastructure. To avoid issues with Data Explorer access, please
          re-enable "Allow access from Azure Portal" on the Networking blade for your account.`}
        </MessageBar>
      )}
@@ -398,12 +397,6 @@ const showMongoAndCassandraProxiesNetworkSettingsWarning = (): boolean => {
        ipAddressesFromIPRules.includes(mongoProxyOutboundIP),
      );

-      if (ipRulesIncludeMongoProxy) {
-        updateConfigContext({
-          MONGO_PROXY_OUTBOUND_IPS_ALLOWLISTED: true,
-        });
-      }
-
      return !ipRulesIncludeMongoProxy;
    } else if (userContext.apiType === "Cassandra") {
      const isProdOrMpacCassandraProxyEndpoint: boolean = [
@@ -422,12 +415,6 @@ const showMongoAndCassandraProxiesNetworkSettingsWarning = (): boolean => {
        (cassandraProxyOutboundIP: string) => ipAddressesFromIPRules.includes(cassandraProxyOutboundIP),
      );

-      if (ipRulesIncludeCassandraProxy) {
-        updateConfigContext({
-          CASSANDRA_PROXY_OUTBOUND_IPS_ALLOWLISTED: true,
-        });
-      }
-
      return !ipRulesIncludeCassandraProxy;
    }
  }
--- a/src/Explorer/Theme/ThemeUtil.tsx
+++ b/src/Explorer/Theme/ThemeUtil.tsx
@@ -16,7 +16,7 @@ import React from "react";
 import { appThemeFabricTealBrandRamp } from "../../Platform/Fabric/FabricTheme";

 export const LayoutConstants = {
-  rowHeight: 36,
+  rowHeight: 32,
 };

 // Our CosmosFluentProvider has the same props as a FluentProvider.
@@ -91,15 +91,30 @@ const appThemePortalBrandRamp: BrandVariants = {
  160: "#CDD8EF",
 };

-const cosmosThemeElements = {
-  layoutRowHeight: `${LayoutConstants.rowHeight}px`,
+export enum LayoutSize {
+  Compact,
+  // TODO: Cozy and Roomy layouts.
+}
+
+interface CosmosThemeElements {
+  layoutRowHeight: string;
+}
+
+export type CosmosTheme = Theme & CosmosThemeElements;
+
+const sizeMappings: Record<LayoutSize, Partial<Theme> & CosmosThemeElements> = {
+  [LayoutSize.Compact]: {
+    layoutRowHeight: "32px",
+    fontSizeBase300: "13px",
+  },
+};
+
+const cosmosTheme = {
  sidebarMinimumWidth: "200px",
  sidebarInitialWidth: "300px",
 };

-export type CosmosTheme = Theme & typeof cosmosThemeElements;
-
-export const tokens = themeToTokensObject({ ...webLightTheme, ...cosmosThemeElements });
+export const tokens = themeToTokensObject({ ...webLightTheme, ...cosmosTheme, ...sizeMappings[LayoutSize.Compact] });

 export const cosmosShorthands = {
  border: () => shorthands.border("1px", "solid", tokens.colorNeutralStroke2),
@@ -117,6 +132,7 @@ export function getPlatformTheme(platform: Platform): CosmosTheme {

  return {
    ...baseTheme,
-    ...cosmosThemeElements,
+    ...cosmosTheme,
+    ...sizeMappings[LayoutSize.Compact], // TODO: Allow for different layout sizes.
  };
 }
--- a/src/Explorer/Tree/snapshots/treeNodeUtil.test.ts.snap
+++ b/src/Explorer/Tree/snapshots/treeNodeUtil.test.ts.snap
@@ -30,6 +30,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Ca
            "styleClass": "deleteCollectionMenuItem",
          },
        ],
+        "iconSrc": <DocumentMultipleRegular
+          fontSize={16}
+        />,
        "isExpanded": true,
        "isSelected": [Function],
        "label": "standardCollection",
@@ -69,6 +72,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Ca
            "styleClass": "deleteCollectionMenuItem",
          },
        ],
+        "iconSrc": <DocumentMultipleRegular
+          fontSize={16}
+        />,
        "isExpanded": true,
        "isSelected": [Function],
        "label": "conflictsCollection",
@@ -92,6 +98,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Ca
        "styleClass": "deleteDatabaseMenuItem",
      },
    ],
+    "iconSrc": <DatabaseRegular
+      fontSize={16}
+    />,
    "isExpanded": true,
    "isSelected": [Function],
    "label": "standardDb",
@@ -102,6 +111,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Ca
  {
    "children": [
      {
+        "iconSrc": <SettingsRegular
+          fontSize={16}
+        />,
        "id": "",
        "isSelected": [Function],
        "label": "Scale",
@@ -133,6 +145,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Ca
            "styleClass": "deleteCollectionMenuItem",
          },
        ],
+        "iconSrc": <DocumentMultipleRegular
+          fontSize={16}
+        />,
        "isExpanded": true,
        "isSelected": [Function],
        "label": "sampleItemsCollection",
@@ -156,6 +171,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Ca
        "styleClass": "deleteDatabaseMenuItem",
      },
    ],
+    "iconSrc": <DatabaseRegular
+      fontSize={16}
+    />,
    "isExpanded": true,
    "isSelected": [Function],
    "label": "sharedDatabase",
@@ -246,6 +264,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Ca
            "styleClass": "deleteCollectionMenuItem",
          },
        ],
+        "iconSrc": <DocumentMultipleRegular
+          fontSize={16}
+        />,
        "isExpanded": true,
        "isSelected": [Function],
        "label": "schemaCollection",
@@ -274,6 +295,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Ca
        "styleClass": "deleteDatabaseMenuItem",
      },
    ],
+    "iconSrc": <DatabaseRegular
+      fontSize={16}
+    />,
    "isExpanded": true,
    "isSelected": [Function],
    "label": "giganticDatabase",
@@ -345,6 +369,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Mo
            "styleClass": "deleteCollectionMenuItem",
          },
        ],
+        "iconSrc": <DocumentMultipleRegular
+          fontSize={16}
+        />,
        "isExpanded": true,
        "isSelected": [Function],
        "label": "standardCollection",
@@ -415,6 +442,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Mo
            "styleClass": "deleteCollectionMenuItem",
          },
        ],
+        "iconSrc": <DocumentMultipleRegular
+          fontSize={16}
+        />,
        "isExpanded": true,
        "isSelected": [Function],
        "label": "conflictsCollection",
@@ -438,6 +468,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Mo
        "styleClass": "deleteDatabaseMenuItem",
      },
    ],
+    "iconSrc": <DatabaseRegular
+      fontSize={16}
+    />,
    "isExpanded": true,
    "isSelected": [Function],
    "label": "standardDb",
@@ -448,6 +481,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Mo
  {
    "children": [
      {
+        "iconSrc": <SettingsRegular
+          fontSize={16}
+        />,
        "id": "",
        "isSelected": [Function],
        "label": "Scale",
@@ -510,6 +546,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Mo
            "styleClass": "deleteCollectionMenuItem",
          },
        ],
+        "iconSrc": <DocumentMultipleRegular
+          fontSize={16}
+        />,
        "isExpanded": true,
        "isSelected": [Function],
        "label": "sampleItemsCollection",
@@ -533,6 +572,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Mo
        "styleClass": "deleteDatabaseMenuItem",
      },
    ],
+    "iconSrc": <DatabaseRegular
+      fontSize={16}
+    />,
    "isExpanded": true,
    "isSelected": [Function],
    "label": "sharedDatabase",
@@ -654,6 +696,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Mo
            "styleClass": "deleteCollectionMenuItem",
          },
        ],
+        "iconSrc": <DocumentMultipleRegular
+          fontSize={16}
+        />,
        "isExpanded": true,
        "isSelected": [Function],
        "label": "schemaCollection",
@@ -682,6 +727,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the Mo
        "styleClass": "deleteDatabaseMenuItem",
      },
    ],
+    "iconSrc": <DatabaseRegular
+      fontSize={16}
+    />,
    "isExpanded": true,
    "isSelected": [Function],
    "label": "giganticDatabase",
@@ -706,6 +754,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
            "onClick": [Function],
          },
        ],
+        "iconSrc": <DocumentMultipleRegular
+          fontSize={16}
+        />,
        "isExpanded": true,
        "isSelected": [Function],
        "label": "standardCollection",
@@ -724,6 +775,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
            "onClick": [Function],
          },
        ],
+        "iconSrc": <DocumentMultipleRegular
+          fontSize={16}
+        />,
        "isExpanded": true,
        "isSelected": [Function],
        "label": "conflictsCollection",
@@ -747,6 +801,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
        "styleClass": "deleteDatabaseMenuItem",
      },
    ],
+    "iconSrc": <DatabaseRegular
+      fontSize={16}
+    />,
    "isExpanded": true,
    "isSelected": [Function],
    "label": "standardDb",
@@ -766,6 +823,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
            "onClick": [Function],
          },
        ],
+        "iconSrc": <DocumentMultipleRegular
+          fontSize={16}
+        />,
        "isExpanded": true,
        "isSelected": [Function],
        "label": "sampleItemsCollection",
@@ -789,6 +849,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
        "styleClass": "deleteDatabaseMenuItem",
      },
    ],
+    "iconSrc": <DatabaseRegular
+      fontSize={16}
+    />,
    "isExpanded": true,
    "isSelected": [Function],
    "label": "sharedDatabase",
@@ -808,6 +871,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
            "onClick": [Function],
          },
        ],
+        "iconSrc": <DocumentMultipleRegular
+          fontSize={16}
+        />,
        "isExpanded": true,
        "isSelected": [Function],
        "label": "schemaCollection",
@@ -836,6 +902,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
        "styleClass": "deleteDatabaseMenuItem",
      },
    ],
+    "iconSrc": <DatabaseRegular
+      fontSize={16}
+    />,
    "isExpanded": true,
    "isSelected": [Function],
    "label": "giganticDatabase",
@@ -976,6 +1045,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
            "styleClass": "deleteCollectionMenuItem",
          },
        ],
+        "iconSrc": <DocumentMultipleRegular
+          fontSize={16}
+        />,
        "isExpanded": true,
        "isSelected": [Function],
        "label": "standardCollection",
@@ -1076,6 +1148,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
            "styleClass": "deleteCollectionMenuItem",
          },
        ],
+        "iconSrc": <DocumentMultipleRegular
+          fontSize={16}
+        />,
        "isExpanded": true,
        "isSelected": [Function],
        "label": "conflictsCollection",
@@ -1099,6 +1174,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
        "styleClass": "deleteDatabaseMenuItem",
      },
    ],
+    "iconSrc": <DatabaseRegular
+      fontSize={16}
+    />,
    "isExpanded": true,
    "isSelected": [Function],
    "label": "standardDb",
@@ -1109,6 +1187,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
  {
    "children": [
      {
+        "iconSrc": <SettingsRegular
+          fontSize={16}
+        />,
        "id": "",
        "isSelected": [Function],
        "label": "Scale",
@@ -1201,6 +1282,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
            "styleClass": "deleteCollectionMenuItem",
          },
        ],
+        "iconSrc": <DocumentMultipleRegular
+          fontSize={16}
+        />,
        "isExpanded": true,
        "isSelected": [Function],
        "label": "sampleItemsCollection",
@@ -1224,6 +1308,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
        "styleClass": "deleteDatabaseMenuItem",
      },
    ],
+    "iconSrc": <DatabaseRegular
+      fontSize={16}
+    />,
    "isExpanded": true,
    "isSelected": [Function],
    "label": "sharedDatabase",
@@ -1375,6 +1462,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
            "styleClass": "deleteCollectionMenuItem",
          },
        ],
+        "iconSrc": <DocumentMultipleRegular
+          fontSize={16}
+        />,
        "isExpanded": true,
        "isSelected": [Function],
        "label": "schemaCollection",
@@ -1403,6 +1493,9 @@ exports[`createDatabaseTreeNodes generates the correct tree structure for the SQ
        "styleClass": "deleteDatabaseMenuItem",
      },
    ],
+    "iconSrc": <DatabaseRegular
+      fontSize={16}
+    />,
    "isExpanded": true,
    "isSelected": [Function],
    "label": "giganticDatabase",
@@ -1543,6 +1636,9 @@ exports[`createDatabaseTreeNodes using NoSQL API on Hosted Platform creates expe
            "styleClass": "deleteCollectionMenuItem",
          },
        ],
+        "iconSrc": <DocumentMultipleRegular
+          fontSize={16}
+        />,
        "isExpanded": true,
        "isSelected": [Function],
        "label": "standardCollection",
@@ -1638,6 +1734,9 @@ exports[`createDatabaseTreeNodes using NoSQL API on Hosted Platform creates expe
            "styleClass": "deleteCollectionMenuItem",
          },
        ],
+        "iconSrc": <DocumentMultipleRegular
+          fontSize={16}
+        />,
        "isExpanded": true,
        "isSelected": [Function],
        "label": "conflictsCollection",
@@ -1661,6 +1760,9 @@ exports[`createDatabaseTreeNodes using NoSQL API on Hosted Platform creates expe
        "styleClass": "deleteDatabaseMenuItem",
      },
    ],
+    "iconSrc": <DatabaseRegular
+      fontSize={16}
+    />,
    "isExpanded": true,
    "isSelected": [Function],
    "label": "standardDb",
@@ -1671,6 +1773,9 @@ exports[`createDatabaseTreeNodes using NoSQL API on Hosted Platform creates expe
  {
    "children": [
      {
+        "iconSrc": <SettingsRegular
+          fontSize={16}
+        />,
        "id": "",
        "isSelected": [Function],
        "label": "Scale",
@@ -1763,6 +1868,9 @@ exports[`createDatabaseTreeNodes using NoSQL API on Hosted Platform creates expe
            "styleClass": "deleteCollectionMenuItem",
          },
        ],
+        "iconSrc": <DocumentMultipleRegular
+          fontSize={16}
+        />,
        "isExpanded": true,
        "isSelected": [Function],
        "label": "sampleItemsCollection",
@@ -1786,6 +1894,9 @@ exports[`createDatabaseTreeNodes using NoSQL API on Hosted Platform creates expe
        "styleClass": "deleteDatabaseMenuItem",
      },
    ],
+    "iconSrc": <DatabaseRegular
+      fontSize={16}
+    />,
    "isExpanded": true,
    "isSelected": [Function],
    "label": "sharedDatabase",
@@ -1937,6 +2048,9 @@ exports[`createDatabaseTreeNodes using NoSQL API on Hosted Platform creates expe
            "styleClass": "deleteCollectionMenuItem",
          },
        ],
+        "iconSrc": <DocumentMultipleRegular
+          fontSize={16}
+        />,
        "isExpanded": true,
        "isSelected": [Function],
        "label": "schemaCollection",
@@ -1965,6 +2079,9 @@ exports[`createDatabaseTreeNodes using NoSQL API on Hosted Platform creates expe
        "styleClass": "deleteDatabaseMenuItem",
      },
    ],
+    "iconSrc": <DatabaseRegular
+      fontSize={16}
+    />,
    "isExpanded": true,
    "isSelected": [Function],
    "label": "giganticDatabase",
@@ -1986,6 +2103,9 @@ exports[`createResourceTokenTreeNodes creates the expected tree nodes 1`] = `
      },
    ],
    "className": "collectionNode",
+    "iconSrc": <DocumentMultipleRegular
+      fontSize={16}
+    />,
    "isExpanded": true,
    "isSelected": [Function],
    "label": "testCollection",
@@ -2021,6 +2141,9 @@ exports[`createSampleDataTreeNodes creates the expected tree nodes 1`] = `
            "onClick": [Function],
          },
        ],
+        "iconSrc": <DocumentMultipleRegular
+          fontSize={16}
+        />,
        "isExpanded": false,
        "isSelected": [Function],
        "label": "testCollection",
--- a/src/Explorer/Tree/treeNodeUtil.tsx
+++ b/src/Explorer/Tree/treeNodeUtil.tsx
@@ -1,3 +1,4 @@
+import { DatabaseRegular, DocumentMultipleRegular, SettingsRegular } from "@fluentui/react-icons";
 import { TreeNode } from "Explorer/Controls/TreeComponent/TreeNodeComponent";
 import TabsBase from "Explorer/Tabs/TabsBase";
 import StoredProcedure from "Explorer/Tree/StoredProcedure";
@@ -7,6 +8,7 @@ import { useDatabases } from "Explorer/useDatabases";
 import { getItemName } from "Utils/APITypeUtils";
 import { isServerlessAccount } from "Utils/CapabilityUtils";
 import { useTabs } from "hooks/useTabs";
+import React from "react";
 import { isPublicInternetAccessAllowed } from "../../Common/DatabaseAccountUtility";
 import { Platform, configContext } from "../../ConfigContext";
 import * as DataModels from "../../Contracts/DataModels";
@@ -25,6 +27,10 @@ export const shouldShowScriptNodes = (): boolean => {
  );
 };

+const TreeDatabaseIcon = <DatabaseRegular fontSize={16} />;
+const TreeSettingsIcon = <SettingsRegular fontSize={16} />;
+const TreeCollectionIcon = <DocumentMultipleRegular fontSize={16} />;
+
 export const createSampleDataTreeNodes = (sampleDataResourceTokenCollection: ViewModels.CollectionBase): TreeNode[] => {
  const updatedSampleTree: TreeNode = {
    label: sampleDataResourceTokenCollection.databaseId,
@@ -36,6 +42,7 @@ export const createSampleDataTreeNodes = (sampleDataResourceTokenCollection: Vie
        isExpanded: false,
        className: "collectionNode",
        contextMenu: ResourceTreeContextMenuButtonFactory.createSampleCollectionContextMenuButton(),
+        iconSrc: TreeCollectionIcon,
        onClick: () => {
          useSelectedNode.getState().setSelectedNode(sampleDataResourceTokenCollection);
          useCommandBar.getState().setContextButtons([]);
@@ -104,6 +111,7 @@ export const createResourceTokenTreeNodes = (collection: ViewModels.CollectionBa
    isExpanded: true,
    children,
    className: "collectionNode",
+    iconSrc: TreeCollectionIcon,
    onClick: () => {
      // Rewritten version of expandCollapseCollection
      useSelectedNode.getState().setSelectedNode(collection);
@@ -133,6 +141,7 @@ export const createDatabaseTreeNodes = (
        databaseNode.children.push({
          id: database.isSampleDB ? "sampleScaleSettings" : "",
          label: "Scale",
+          iconSrc: TreeSettingsIcon,
          isSelected: () =>
            useSelectedNode
              .getState()
@@ -169,6 +178,7 @@ export const createDatabaseTreeNodes = (
      children: [],
      isSelected: () => useSelectedNode.getState().isDataNodeSelected(database.id()),
      contextMenu: ResourceTreeContextMenuButtonFactory.createDatabaseContextMenu(container, database.id()),
+      iconSrc: TreeDatabaseIcon,
      onExpanded: async () => {
        useSelectedNode.getState().setSelectedNode(database);
        if (!databaseNode.children || databaseNode.children?.length === 0) {
@@ -219,6 +229,7 @@ export const buildCollectionNode = (
    children: children,
    className: "collectionNode",
    contextMenu: ResourceTreeContextMenuButtonFactory.createCollectionContextMenuButton(container, collection),
+    iconSrc: TreeCollectionIcon,
    onClick: () => {
      useSelectedNode.getState().setSelectedNode(collection);
      collection.openTab();
--- 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"),
  };
 }

--- a/src/Shared/StorageUtility.ts
+++ b/src/Shared/StorageUtility.ts
@@ -29,6 +29,7 @@ export enum StorageKey {
  GalleryCalloutDismissed,
  VisitedAccounts,
  PriorityLevel,
+  DocumentsTabPrefs,
  DefaultQueryResultsView,
  AppState,
 }
--- a/src/Utils/QueryUtils.ts
+++ b/src/Utils/QueryUtils.ts
@@ -2,18 +2,28 @@ import { PartitionKey, PartitionKeyDefinition } from "@azure/cosmos";
 import * as DataModels from "../Contracts/DataModels";
 import * as ViewModels from "../Contracts/ViewModels";

+export const defaultQueryFields = ["id", "_self", "_rid", "_ts"];
+
 export function buildDocumentsQuery(
  filter: string,
  partitionKeyProperties: string[],
  partitionKey: DataModels.PartitionKey,
+  additionalField: string[] = [],
 ): string {
+  const fieldSet = new Set<string>(defaultQueryFields);
+  additionalField.forEach((prop) => fieldSet.add(prop));
+
+  const objectListSpec = [...fieldSet]
+    .filter((f) => !partitionKeyProperties.includes(f))
+    .map((prop) => `c.${prop}`)
+    .join(",");
  let query =
    partitionKeyProperties && partitionKeyProperties.length > 0
-      ? `select c.id, c._self, c._rid, c._ts, [${buildDocumentsQueryPartitionProjections(
+      ? `select ${objectListSpec}, [${buildDocumentsQueryPartitionProjections(
          "c",
          partitionKey,
        )}] as _partitionKeyValue from c`
-      : `select c.id, c._self, c._rid, c._ts from c`;
+      : `select ${objectListSpec} from c`;

  if (filter) {
    query += " " + filter;
--- a/test/sql/resourceToken.spec.ts
+++ b/test/sql/resourceToken.spec.ts
@@ -12,7 +12,11 @@ import {
  subscriptionId,
 } from "../fx";

-test("SQL account using Resource token", async ({ page }) => {
+// This test is currently failing because of issues with resource token auth in the backend.
+// Marking it as 'fail' means that it will still be run, but Playwright's reporting will be inverted (failing tests will be marked as passing and vice versa).
+// This allows us to detect when it starts working again, as the test will fail again.
+// At that point, we can remove the 'fail' marker and continue running the test as normal.
+test.fail("SQL account using Resource token", async ({ page }) => {
  const credentials = await getAzureCLICredentials();
  const armClient = new CosmosDBManagementClient(credentials, subscriptionId);
  const accountName = getAccountName(TestAccount.SQL);
@@ -34,9 +38,7 @@ test("SQL account using Resource token", async ({ page }) => {
  });
  await expect(containerPermission).toBeDefined();

-  const resourceTokenConnectionString = `AccountEndpoint=${account.documentEndpoint};DatabaseId=${
-    database.id
-  };CollectionId=${container.id};${containerPermission!._token}`;
+  const resourceTokenConnectionString = `AccountEndpoint=${account.documentEndpoint};DatabaseId=${database.id};CollectionId=${container.id};${containerPermission!._token}`;

  await page.goto("https://localhost:1234/hostedExplorer.html");
  const switchConnectionLink = page.getByTestId("Link:SwitchConnectionType");
Author	SHA1	Message	Date
Ashley Stanton-Nurse	4facfba0c1	Mark resource token tests as failing	2024-09-05 11:03:20 -07:00
Laurent Nguyen	7e95f5d8c8	Enable column selection and sorting in DocumentsTab (with persistence) (#1881 ) * Initial implementation of saving split value to local storage * Make table columns generic (no more id and partition keys) * Save column width * Add column selection from right-click * Implement new menu for column selection with search. * Switch icons and search compare with lowercase. * Search uses string includes instead of startsWith * Only allow data fields that can be rendered (string and numbers) in column selection * Accumulate properties rather than replace for column definitions * Do not allow deselecting all columns * Move table values under its own property * Update choices of column when creating new or updating document * Rework column selection UI * Fix table size issue with some heuristics * Fix heuristic for size update * Don't allow unselecting last column * Implement column sorting * Fix format * Fix format, update snapshots * Add reset button to column selection and fix naming of openUploadItemsPanePane() * Fix unit tests * Fix unit test * Persist column selection * Persist column sorting * Save columns definition (schema) along with selected columns. * Merge branch 'master' into users/languy/save-documentstab-prefs * Revert "Merge branch 'master' into users/languy/save-documentstab-prefs" This reverts commit `e5a82fd356`. * Disable column selection for Mongo. Remove extra refresh button * Update test snapshots * Remove unused function * Fix table width * Add background color to "..." button for column selection * Label to indicate which field is a partition key in Column Selection Pane * Update unit test snapshot * Move column selection and sorting behind feature flag enableDocumentsTableColumnSelection * Cleanup checkbox styles	2024-09-05 17:43:40 +02:00
Ashley Stanton-Nurse	1be221e106	fix rendering of global commands menu (#1953 ) * fix rendering of global commands menu * refmt	2024-09-05 08:33:39 -07:00
Asier Isayas	8e7a3db67e	Point DE to new Mongo and Cassandra Proxies only and activate Cassandra Proxy in FF/MC (#1958 ) Co-authored-by: Asier Isayas <aisayas@microsoft.com>	2024-09-05 10:57:55 -04:00
Laurent Nguyen	07c0ead523	Improve SettingsPane (#1945 ) * Use accordion in settingsPane * Fix format * Fix format for retry interval * Fix unit tests * Cosmetic changes * Move info tips into accordion section * Update snapshot	2024-09-05 11:51:32 +02:00
Laurent Nguyen	4296b5ae02	Add more default filters (#1955 )	2024-09-05 07:16:48 +02:00
Ashley Stanton-Nurse	e8a5658799	Reduce extra spacing in the new tree and items tab (#1951 ) * reduce layout row size and default font size * icons for the tree * refmt and update snapshots * remove commented out code	2024-09-04 13:07:27 -07:00
vchske	b4973e8367	Fixing regex on allowedParentFrameOrigins to address XSS (#1956 )	2024-09-04 11:35:32 -07:00