Fix query tab view: respect default setting and add toggle behavior (#2516)

* Fix query tab view: respect default setting and add toggle behavior

- Use getDefaultQueryResultsView() when splitterDirection prop is not
  provided, so the user's configured default from Settings is respected
- Add onCommandClick to the View split button that toggles between
  Vertical and Horizontal layout when the main button is clicked

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

* Add Playwright E2E tests for query tab View toggle and dropdown

- Add View to CommandBarButton enum in test fixtures
- Add test: clicking main View button toggles between vertical/horizontal
- Add test: selecting options from View dropdown changes layout

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

* Add Playwright E2E tests for query tab View toggle and dropdown

- Add View to CommandBarButton enum in test fixtures
- Add test: clicking main View button toggles between vertical/horizontal
- Add test: selecting options from View dropdown changes layout

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

* Fix issue that was failing tests when using account keys for access.

* Remove commented code.

---------

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx

@@ -13,7 +13,7 @@ import { CosmosFluentProvider } from "Explorer/Theme/ThemeUtil";
 import { KeyboardAction } from "KeyboardShortcuts";
 import { Keys, t } from "Localization";
 import { QueryConstants } from "Shared/Constants";
-import { LocalStorageUtility, StorageKey } from "Shared/StorageUtility";
+import { LocalStorageUtility, StorageKey, getDefaultQueryResultsView } from "Shared/StorageUtility";
 import { Allotment } from "allotment";
 import { useClientWriteEnabled } from "hooks/useClientWriteEnabled";
 import { TabsState, useTabs } from "hooks/useTabs";
@@ -163,8 +163,11 @@ class QueryTabComponentImpl extends React.Component<QueryTabComponentImplProps,
       isExecuting: false,
       cancelQueryTimeoutID: undefined,
       currentTabActive: true,
-      queryResultsView:
-        props.splitterDirection === "vertical" ? SplitterDirection.Vertical : SplitterDirection.Horizontal,
+      queryResultsView: props.splitterDirection
+        ? props.splitterDirection === "vertical"
+          ? SplitterDirection.Vertical
+          : SplitterDirection.Horizontal
+        : getDefaultQueryResultsView(),
       queryViewSizePercent: props.queryViewSizePercent,
     };
     this.isCloseClicked = false;
@@ -486,6 +489,13 @@ class QueryTabComponentImpl extends React.Component<QueryTabComponentImplProps,
       commandButtonLabel: t(Keys.tabs.query.view),
       ariaLabel: t(Keys.tabs.query.view),
       hasPopup: true,
+      onCommandClick: () => {
+        const newDirection =
+          this.state.queryResultsView === SplitterDirection.Vertical
+            ? SplitterDirection.Horizontal
+            : SplitterDirection.Vertical;
+        this._setViewLayout(newDirection);
+      },
       children: [verticalButton, horizontalButton],
     };
   }

test/fx.ts

@@ -122,9 +122,6 @@ export async function getTestExplorerUrl(accountType: TestAccount, options?: Tes
   params.set("feature.enableCopilot", "false");
 
   const nosqlRbacToken = getNoSqlRbacToken();
-  if (!nosqlRbacToken) {
-    throw new Error("No NOSQL RBAC token found.");
-  }
 
   const nosqlReadOnlyRbacToken = process.env.NOSQL_READONLY_TESTACCOUNT_TOKEN;
   const nosqlContainerCopyRbacToken = process.env.NOSQL_CONTAINERCOPY_TESTACCOUNT_TOKEN;
@@ -411,6 +408,7 @@ export enum CommandBarButton {
   ExecuteQuery = "Execute Query",
   UploadItem = "Upload Item",
   NewDocument = "New Document",
+  View = "View",
 }
 
 /** Helper class that provides locator methods for DataExplorer components, on top of a Frame */

test/sql/query.spec.ts

@@ -91,3 +91,51 @@ test("Query errors", async () => {
   await expect(queryTab.errorList.getByTestId("Row:1/Column:code")).toHaveText("SC2005");
   await expect(queryTab.errorList.getByTestId("Row:1/Column:location")).toHaveText("Line 3");
 });
+
+test("View button toggles between vertical and horizontal layout", async () => {
+  // The default layout is Horizontal (Allotment vertical={true} → split-view-vertical class)
+  const allotment = queryTab.locator.locator(".split-view-vertical, .split-view-horizontal");
+  await expect(allotment).toBeAttached();
+  await expect(allotment).toHaveClass(/split-view-vertical/);
+
+  // Click the main View button (not the chevron) to toggle to Vertical layout
+  const viewButton = explorer.commandBarButton(CommandBarButton.View);
+  await viewButton.click();
+
+  // After toggle, Allotment should have split-view-horizontal class (Vertical direction)
+  const allotmentAfterToggle = queryTab.locator.locator(".split-view-vertical, .split-view-horizontal");
+  await expect(allotmentAfterToggle).toHaveClass(/split-view-horizontal/);
+
+  // Click again to toggle back to Horizontal
+  await viewButton.click();
+  const allotmentAfterSecondToggle = queryTab.locator.locator(".split-view-vertical, .split-view-horizontal");
+  await expect(allotmentAfterSecondToggle).toHaveClass(/split-view-vertical/);
+});
+
+test("View dropdown allows selecting vertical or horizontal layout", async () => {
+  // The default layout is Horizontal (split-view-vertical)
+  const allotment = queryTab.locator.locator(".split-view-vertical, .split-view-horizontal");
+  await expect(allotment).toHaveClass(/split-view-vertical/);
+
+  // Find the View split button's menu trigger (chevron).
+  // The primary button has data-test, so navigate to the split button container and find the menu button.
+  const viewPrimaryButton = explorer.commandBarButton(CommandBarButton.View);
+  const splitContainer = viewPrimaryButton.locator("..");
+  const menuButton = splitContainer.locator('[aria-haspopup="true"]');
+  await menuButton.click();
+
+  // Select "Vertical" from the dropdown menu
+  await explorer.frame.getByRole("menuitem", { name: "Vertical" }).click();
+
+  // Verify the layout changed to Vertical (split-view-horizontal)
+  const allotmentAfterVertical = queryTab.locator.locator(".split-view-vertical, .split-view-horizontal");
+  await expect(allotmentAfterVertical).toHaveClass(/split-view-horizontal/);
+
+  // Open dropdown again and select "Horizontal"
+  await menuButton.click();
+  await explorer.frame.getByRole("menuitem", { name: "Horizontal" }).click();
+
+  // Verify it reverted to Horizontal (split-view-vertical)
+  const allotmentAfterHorizontal = queryTab.locator.locator(".split-view-vertical, .split-view-horizontal");
+  await expect(allotmentAfterHorizontal).toHaveClass(/split-view-vertical/);
+});