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],
     };
   }