format fix

* Add sharedThroughput db tests

* Run npm commands

* Run npm format

* Fix error with adding container to shared db test

* Add changes for Load more option to work

* Remove localhost

* Add Mongo Pagination tests

* Run npm format

* Revert "Add Mongo Pagination tests"

This reverts commit 50a244e6f9.

* Minor fixes

* Fix errors

* Minor fix

* Fix tests

* Address comments

* Address comments

src/Common/SearchableDropdown.styles.ts

@@ -0,0 +1,78 @@
+import { IButtonStyles, IStackStyles, ITextStyles } from "@fluentui/react";
+import * as React from "react";
+
+export const getDropdownButtonStyles = (disabled: boolean): IButtonStyles => ({
+  root: {
+    width: "100%",
+    height: "32px",
+    padding: "0 28px 0 8px",
+    border: "1px solid #8a8886",
+    background: "#fff",
+    color: "#323130",
+    textAlign: "left",
+    cursor: disabled ? "not-allowed" : "pointer",
+    position: "relative",
+  },
+  flexContainer: {
+    justifyContent: "flex-start",
+  },
+  label: {
+    fontWeight: "normal",
+    fontSize: "14px",
+    textAlign: "left",
+  },
+});
+
+export const buttonLabelStyles: ITextStyles = {
+  root: {
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    display: "block",
+    textAlign: "left",
+  },
+};
+
+export const buttonWrapperStyles: React.CSSProperties = {
+  position: "relative",
+  width: "100%",
+};
+
+export const chevronStyles: React.CSSProperties = {
+  position: "absolute",
+  right: "8px",
+  top: "50%",
+  transform: "translateY(-50%)",
+  pointerEvents: "none",
+  fontSize: "12px",
+};
+
+export const calloutContentStyles: IStackStyles = {
+  root: {
+    display: "flex",
+    flexDirection: "column",
+  },
+};
+
+export const listContainerStyles: IStackStyles = {
+  root: {
+    maxHeight: "300px",
+    overflowY: "auto",
+  },
+};
+
+export const getItemStyles = (isSelected: boolean): React.CSSProperties => ({
+  padding: "8px 12px",
+  cursor: "pointer",
+  fontSize: "14px",
+  backgroundColor: isSelected ? "#e6e6e6" : "transparent",
+  textAlign: "left",
+});
+
+export const emptyMessageStyles: ITextStyles = {
+  root: {
+    padding: "8px 12px",
+    color: "#605e5c",
+    textAlign: "left",
+  },
+};

src/Common/SearchableDropdown.test.tsx

@@ -0,0 +1,200 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import React from "react";
+import { SearchableDropdown } from "./SearchableDropdown";
+
+interface TestItem {
+  id: string;
+  name: string;
+}
+
+describe("SearchableDropdown", () => {
+  const mockItems: TestItem[] = [
+    { id: "1", name: "Item One" },
+    { id: "2", name: "Item Two" },
+    { id: "3", name: "Item Three" },
+  ];
+
+  const defaultProps = {
+    label: "Test Label",
+    items: mockItems,
+    selectedItem: null as TestItem | null,
+    onSelect: jest.fn(),
+    getKey: (item: TestItem) => item.id,
+    getDisplayText: (item: TestItem) => item.name,
+    placeholder: "Select an item",
+    filterPlaceholder: "Filter items",
+    className: "test-dropdown",
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("should render with label and placeholder", () => {
+    render(<SearchableDropdown {...defaultProps} />);
+    expect(screen.getByText("Test Label")).toBeInTheDocument();
+    expect(screen.getByText("Select an item")).toBeInTheDocument();
+  });
+
+  it("should display selected item", () => {
+    const propsWithSelection = {
+      ...defaultProps,
+      selectedItem: mockItems[0],
+    };
+    render(<SearchableDropdown {...propsWithSelection} />);
+    expect(screen.getByText("Item One")).toBeInTheDocument();
+  });
+
+  it("should show 'No items found' when items array is empty", () => {
+    const propsWithEmptyItems = {
+      ...defaultProps,
+      items: [] as TestItem[],
+    };
+    render(<SearchableDropdown {...propsWithEmptyItems} />);
+    expect(screen.getByText("No Test Labels Found")).toBeInTheDocument();
+  });
+
+  it("should open dropdown when button is clicked", () => {
+    render(<SearchableDropdown {...defaultProps} />);
+    const button = screen.getByText("Select an item");
+    fireEvent.click(button);
+    expect(screen.getByPlaceholderText("Filter items")).toBeInTheDocument();
+  });
+
+  it("should filter items based on search text", () => {
+    render(<SearchableDropdown {...defaultProps} />);
+    const button = screen.getByText("Select an item");
+    fireEvent.click(button);
+
+    const searchBox = screen.getByPlaceholderText("Filter items");
+    fireEvent.change(searchBox, { target: { value: "Two" } });
+
+    expect(screen.getByText("Item Two")).toBeInTheDocument();
+    expect(screen.queryByText("Item One")).not.toBeInTheDocument();
+    expect(screen.queryByText("Item Three")).not.toBeInTheDocument();
+  });
+
+  it("should call onSelect when an item is clicked", () => {
+    const onSelectMock = jest.fn();
+    const propsWithMock = {
+      ...defaultProps,
+      onSelect: onSelectMock,
+    };
+    render(<SearchableDropdown {...propsWithMock} />);
+
+    const button = screen.getByText("Select an item");
+    fireEvent.click(button);
+
+    const item = screen.getByText("Item Two");
+    fireEvent.click(item);
+
+    expect(onSelectMock).toHaveBeenCalledWith(mockItems[1]);
+  });
+
+  it("should close dropdown after selecting an item", () => {
+    render(<SearchableDropdown {...defaultProps} />);
+
+    const button = screen.getByText("Select an item");
+    fireEvent.click(button);
+
+    expect(screen.getByPlaceholderText("Filter items")).toBeInTheDocument();
+
+    const item = screen.getByText("Item One");
+    fireEvent.click(item);
+
+    expect(screen.queryByPlaceholderText("Filter items")).not.toBeInTheDocument();
+  });
+
+  it("should disable button when disabled prop is true", () => {
+    const propsWithDisabled = {
+      ...defaultProps,
+      disabled: true,
+    };
+    render(<SearchableDropdown {...propsWithDisabled} />);
+
+    const button = screen.getByRole("button");
+    expect(button).toBeDisabled();
+  });
+
+  it("should not open dropdown when disabled", () => {
+    const propsWithDisabled = {
+      ...defaultProps,
+      disabled: true,
+    };
+    render(<SearchableDropdown {...propsWithDisabled} />);
+
+    const button = screen.getByRole("button");
+    fireEvent.click(button);
+
+    expect(screen.queryByPlaceholderText("Filter items")).not.toBeInTheDocument();
+  });
+
+  it("should show 'No items found' when search yields no results", () => {
+    render(<SearchableDropdown {...defaultProps} />);
+
+    const button = screen.getByText("Select an item");
+    fireEvent.click(button);
+
+    const searchBox = screen.getByPlaceholderText("Filter items");
+    fireEvent.change(searchBox, { target: { value: "Nonexistent" } });
+
+    expect(screen.getByText("No items found")).toBeInTheDocument();
+  });
+
+  it("should handle case-insensitive filtering", () => {
+    render(<SearchableDropdown {...defaultProps} />);
+
+    const button = screen.getByText("Select an item");
+    fireEvent.click(button);
+
+    const searchBox = screen.getByPlaceholderText("Filter items");
+    fireEvent.change(searchBox, { target: { value: "two" } });
+
+    expect(screen.getByText("Item Two")).toBeInTheDocument();
+    expect(screen.queryByText("Item One")).not.toBeInTheDocument();
+  });
+
+  it("should clear filter text when dropdown is closed and reopened", () => {
+    render(<SearchableDropdown {...defaultProps} />);
+
+    const button = screen.getByText("Select an item");
+    fireEvent.click(button);
+
+    const searchBox = screen.getByPlaceholderText("Filter items");
+    fireEvent.change(searchBox, { target: { value: "Two" } });
+
+    // Close dropdown by selecting an item
+    const item = screen.getByText("Item Two");
+    fireEvent.click(item);
+
+    // Reopen dropdown
+    fireEvent.click(button);
+
+    // Filter text should be cleared
+    const reopenedSearchBox = screen.getByPlaceholderText("Filter items");
+    expect(reopenedSearchBox).toHaveValue("");
+  });
+
+  it("should use custom placeholder text", () => {
+    const propsWithCustomPlaceholder = {
+      ...defaultProps,
+      placeholder: "Choose an option",
+    };
+    render(<SearchableDropdown {...propsWithCustomPlaceholder} />);
+    expect(screen.getByText("Choose an option")).toBeInTheDocument();
+  });
+
+  it("should use custom filter placeholder text", () => {
+    const propsWithCustomFilterPlaceholder = {
+      ...defaultProps,
+      filterPlaceholder: "Search here",
+    };
+    render(<SearchableDropdown {...propsWithCustomFilterPlaceholder} />);
+
+    const button = screen.getByText("Select an item");
+    fireEvent.click(button);
+
+    expect(screen.getByPlaceholderText("Search here")).toBeInTheDocument();
+  });
+});

src/Common/SearchableDropdown.tsx

@@ -0,0 +1,157 @@
+import {
+  Callout,
+  DefaultButton,
+  DirectionalHint,
+  Icon,
+  ISearchBoxStyles,
+  Label,
+  SearchBox,
+  Stack,
+  Text,
+} from "@fluentui/react";
+import * as React from "react";
+import { useCallback, useMemo, useRef, useState } from "react";
+import {
+  buttonLabelStyles,
+  buttonWrapperStyles,
+  calloutContentStyles,
+  chevronStyles,
+  emptyMessageStyles,
+  getDropdownButtonStyles,
+  getItemStyles,
+  listContainerStyles,
+} from "./SearchableDropdown.styles";
+
+interface SearchableDropdownProps<T> {
+  label: string;
+  items: T[];
+  selectedItem: T | null;
+  onSelect: (item: T) => void;
+  getKey: (item: T) => string;
+  getDisplayText: (item: T) => string;
+  placeholder?: string;
+  filterPlaceholder?: string;
+  className?: string;
+  disabled?: boolean;
+  onDismiss?: () => void;
+  searchBoxStyles?: Partial<ISearchBoxStyles>;
+}
+
+export const SearchableDropdown = <T,>({
+  label,
+  items,
+  selectedItem,
+  onSelect,
+  getKey,
+  getDisplayText,
+  placeholder = "Select an item",
+  filterPlaceholder = "Filter items",
+  className,
+  disabled = false,
+  onDismiss,
+  searchBoxStyles: customSearchBoxStyles,
+}: SearchableDropdownProps<T>): React.ReactElement => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [filterText, setFilterText] = useState("");
+  const buttonRef = useRef<HTMLDivElement>(null);
+
+  const closeDropdown = useCallback(() => {
+    setIsOpen(false);
+    setFilterText("");
+  }, []);
+
+  const filteredItems = useMemo(
+    () => items?.filter((item) => getDisplayText(item).toLowerCase().includes(filterText.toLowerCase())),
+    [items, filterText, getDisplayText],
+  );
+
+  const handleDismiss = useCallback(() => {
+    closeDropdown();
+    onDismiss?.();
+  }, [closeDropdown, onDismiss]);
+
+  const handleButtonClick = useCallback(() => {
+    if (disabled) {
+      return;
+    }
+
+    setIsOpen(!isOpen);
+  }, [isOpen, disabled]);
+
+  const handleSelect = useCallback(
+    (item: T) => {
+      onSelect(item);
+      closeDropdown();
+    },
+    [onSelect, closeDropdown],
+  );
+
+  const buttonLabel = selectedItem
+    ? getDisplayText(selectedItem)
+    : items?.length === 0
+    ? `No ${label}s Found`
+    : placeholder;
+
+  const buttonId = `${className}-button`;
+  const buttonStyles = getDropdownButtonStyles(disabled);
+
+  return (
+    <Stack>
+      <Label htmlFor={buttonId}>{label}</Label>
+      <div ref={buttonRef} style={buttonWrapperStyles}>
+        <DefaultButton
+          id={buttonId}
+          className={className}
+          onClick={handleButtonClick}
+          styles={buttonStyles}
+          disabled={disabled}
+        >
+          <Text styles={buttonLabelStyles}>{buttonLabel}</Text>
+        </DefaultButton>
+        <Icon iconName="ChevronDown" style={chevronStyles} />
+      </div>
+      {isOpen && (
+        <Callout
+          target={buttonRef.current}
+          onDismiss={handleDismiss}
+          directionalHint={DirectionalHint.bottomLeftEdge}
+          isBeakVisible={false}
+          gapSpace={0}
+          setInitialFocus
+        >
+          <Stack styles={calloutContentStyles} style={{ width: buttonRef.current?.offsetWidth || 300 }}>
+            <SearchBox
+              placeholder={filterPlaceholder}
+              value={filterText}
+              onChange={(_, newValue) => setFilterText(newValue || "")}
+              styles={customSearchBoxStyles}
+            />
+            <Stack styles={listContainerStyles}>
+              {filteredItems && filteredItems.length > 0 ? (
+                filteredItems.map((item) => {
+                  const key = getKey(item);
+                  const isSelected = selectedItem ? getKey(selectedItem) === key : false;
+                  return (
+                    <div
+                      key={key}
+                      onClick={() => handleSelect(item)}
+                      style={getItemStyles(isSelected)}
+                      onMouseEnter={(e) => (e.currentTarget.style.backgroundColor = "#f3f2f1")}
+                      onMouseLeave={(e) =>
+                        (e.currentTarget.style.backgroundColor = isSelected ? "#e6e6e6" : "transparent")
+                      }
+                    >
+                      <Text>{getDisplayText(item)}</Text>
+                    </div>
+                  );
+                })
+              ) : (
+                <Text styles={emptyMessageStyles}>No items found</Text>
+              )}
+            </Stack>
+          </Stack>
+        </Callout>
+      )}
+    </Stack>
+  );
+};

src/Platform/Hosted/Components/SwitchAccount.tsx

@@ -1,6 +1,6 @@
-import { Dropdown } from "@fluentui/react";
 import * as React from "react";
 import { FunctionComponent } from "react";
+import { SearchableDropdown } from "../../../Common/SearchableDropdown";
 import { DatabaseAccount } from "../../../Contracts/DataModels";
 
 interface Props {
@@ -17,23 +17,18 @@ export const SwitchAccount: FunctionComponent<Props> = ({
   dismissMenu,
 }: Props) => {
   return (
-    <Dropdown
+    <SearchableDropdown<DatabaseAccount>
       label="Cosmos DB Account Name"
+      items={accounts}
+      selectedItem={selectedAccount}
+      onSelect={(account) => setSelectedAccountName(account.name)}
+      getKey={(account) => account.name}
+      getDisplayText={(account) => account.name}
+      placeholder="Select an Account"
+      filterPlaceholder="Filter accounts"
       className="accountSwitchAccountDropdown"
-      options={accounts?.map((account) => ({
+      disabled={!accounts || accounts.length === 0}
-        key: account.name,
+      onDismiss={dismissMenu}
-        text: account.name,
-        data: account,
-      }))}
-      onChange={(_, option) => {
-        setSelectedAccountName(String(option?.key));
-        dismissMenu();
-      }}
-      defaultSelectedKey={selectedAccount?.name}
-      placeholder={accounts && accounts.length === 0 ? "No Accounts Found" : "Select an Account"}
-      styles={{
-        callout: "accountSwitchAccountDropdownMenu",
-      }}
     />
   );
 };

src/Platform/Hosted/Components/SwitchSubscription.tsx

@@ -1,6 +1,6 @@
-import { Dropdown } from "@fluentui/react";
 import * as React from "react";
 import { FunctionComponent } from "react";
+import { SearchableDropdown } from "../../../Common/SearchableDropdown";
 import { Subscription } from "../../../Contracts/DataModels";
 
 interface Props {
@@ -15,24 +15,16 @@ export const SwitchSubscription: FunctionComponent<Props> = ({
   selectedSubscription,
 }: Props) => {
   return (
-    <Dropdown
+    <SearchableDropdown<Subscription>
       label="Subscription"
+      items={subscriptions}
+      selectedItem={selectedSubscription}
+      onSelect={(sub) => setSelectedSubscriptionId(sub.subscriptionId)}
+      getKey={(sub) => sub.subscriptionId}
+      getDisplayText={(sub) => sub.displayName}
+      placeholder="Select a Subscription"
+      filterPlaceholder="Filter subscriptions"
       className="accountSwitchSubscriptionDropdown"
-      options={subscriptions?.map((sub) => {
-        return {
-          key: sub.subscriptionId,
-          text: sub.displayName,
-          data: sub,
-        };
-      })}
-      onChange={(_, option) => {
-        setSelectedSubscriptionId(String(option?.key));
-      }}
-      defaultSelectedKey={selectedSubscription?.subscriptionId}
-      placeholder={subscriptions && subscriptions.length === 0 ? "No Subscriptions Found" : "Select a Subscription"}
-      styles={{
-        callout: "accountSwitchSubscriptionDropdownMenu",
-      }}
     />
   );
 };

test/fx.ts

@@ -58,7 +58,9 @@ export const defaultAccounts: Record<TestAccount, string> = {
 export const resourceGroupName = process.env.DE_TEST_RESOURCE_GROUP ?? "de-e2e-tests";
 export const subscriptionId = process.env.DE_TEST_SUBSCRIPTION_ID ?? "69e02f2d-f059-4409-9eac-97e8a276ae2c";
 export const TEST_AUTOSCALE_THROUGHPUT_RU = 1000;
+export const TEST_MANUAL_THROUGHPUT_RU = 800;
 export const TEST_AUTOSCALE_MAX_THROUGHPUT_RU_2K = 2000;
+export const TEST_AUTOSCALE_MAX_THROUGHPUT_RU_4K = 4000;
 export const TEST_MANUAL_THROUGHPUT_RU_2K = 2000;
 export const ONE_MINUTE_MS: number = 60 * 1000;
 

test/sql/scaleAndSettings/sharedThroughput.spec.ts

@@ -0,0 +1,229 @@
+import { Locator, expect, test } from "@playwright/test";
+import {
+  CommandBarButton,
+  DataExplorer,
+  ONE_MINUTE_MS,
+  TEST_AUTOSCALE_MAX_THROUGHPUT_RU_4K,
+  TEST_MANUAL_THROUGHPUT_RU,
+  TestAccount,
+} from "../../fx";
+import { TestDatabaseContext, createTestDB } from "../../testData";
+
+test.describe("Database with Shared Throughput", () => {
+  let dbContext: TestDatabaseContext = null!;
+  let explorer: DataExplorer = null!;
+  const containerId = "sharedcontainer";
+
+  // Helper methods
+  const getThroughputInput = (type: "manual" | "autopilot"): Locator => {
+    return explorer.frame.getByTestId(`${type}-throughput-input`);
+  };
+
+  test.afterEach("Delete Test Database", async () => {
+    await dbContext?.dispose();
+  });
+
+  test.describe("Manual Throughput Tests", () => {
+    test.beforeEach(async ({ page }) => {
+      explorer = await DataExplorer.open(page, TestAccount.SQL);
+    });
+
+    test("Create database with shared manual throughput and verify Scale node in UI", async () => {
+      test.setTimeout(120000); // 2 minutes timeout
+      // Create database with shared manual throughput (400 RU/s)
+      dbContext = await createTestDB({ throughput: 400 });
+
+      // Verify database node appears in the tree
+      const databaseNode = await explorer.waitForNode(dbContext.database.id);
+      expect(databaseNode).toBeDefined();
+
+      // Expand the database node to see child nodes
+      await databaseNode.expand();
+
+      // Verify that "Scale" node appears under the database
+      const scaleNode = await explorer.waitForNode(`${dbContext.database.id}/Scale`);
+      expect(scaleNode).toBeDefined();
+      await expect(scaleNode.element).toBeVisible();
+    });
+
+    test("Add container to shared database without dedicated throughput", async () => {
+      // Create database with shared manual throughput
+      dbContext = await createTestDB({ throughput: 400 });
+
+      // Wait for the database to appear in the tree
+      await explorer.waitForNode(dbContext.database.id);
+
+      // Add a container to the shared database via UI
+      const newContainerButton = await explorer.globalCommandButton("New Container");
+      await newContainerButton.click();
+
+      await explorer.whilePanelOpen(
+        "New Container",
+        async (panel, okButton) => {
+          // Select "Use existing" database
+          const useExistingRadio = panel.getByRole("radio", { name: /Use existing/i });
+          await useExistingRadio.click();
+
+          // Select the database from dropdown using the new data-testid
+          const databaseDropdown = panel.getByRole("combobox", { name: "Choose an existing database" });
+          await databaseDropdown.click();
+
+          await explorer.frame.getByRole("option", { name: dbContext.database.id }).click();
+          // Now you can target the specific database option by its data-testid
+          //await panel.getByTestId(`database-option-${dbContext.database.id}`).click();
+          // Fill container id
+          await panel.getByRole("textbox", { name: "Container id, Example Container1" }).fill(containerId);
+
+          // Fill partition key
+          await panel.getByRole("textbox", { name: "Partition key" }).fill("/pk");
+
+          // Ensure "Provision dedicated throughput" is NOT checked
+          const dedicatedThroughputCheckbox = panel.getByRole("checkbox", {
+            name: /Provision dedicated throughput for this container/i,
+          });
+
+          if (await dedicatedThroughputCheckbox.isVisible()) {
+            const isChecked = await dedicatedThroughputCheckbox.isChecked();
+            if (isChecked) {
+              await dedicatedThroughputCheckbox.uncheck();
+            }
+          }
+
+          await okButton.click();
+        },
+        { closeTimeout: 5 * ONE_MINUTE_MS },
+      );
+
+      // Verify container was created under the database
+      const containerNode = await explorer.waitForContainerNode(dbContext.database.id, containerId);
+      expect(containerNode).toBeDefined();
+    });
+
+    test("Scale shared database manual throughput", async () => {
+      // Create database with shared manual throughput (400 RU/s)
+      dbContext = await createTestDB({ throughput: 400 });
+
+      // Navigate to the scale settings by clicking the "Scale" node in the tree
+      const databaseNode = await explorer.waitForNode(dbContext.database.id);
+      await databaseNode.expand();
+      const scaleNode = await explorer.waitForNode(`${dbContext.database.id}/Scale`);
+      await scaleNode.element.click();
+
+      // Update manual throughput from 400 to 800
+      await getThroughputInput("manual").fill(TEST_MANUAL_THROUGHPUT_RU.toString());
+
+      // Save changes
+      await explorer.commandBarButton(CommandBarButton.Save).click();
+
+      // Verify success message
+      await expect(explorer.getConsoleHeaderStatus()).toContainText(
+        `Successfully updated offer for database ${dbContext.database.id}`,
+        {
+          timeout: 2 * ONE_MINUTE_MS,
+        },
+      );
+    });
+
+    test("Scale shared database from manual to autoscale", async () => {
+      // Create database with shared manual throughput (400 RU/s)
+      dbContext = await createTestDB({ throughput: 400 });
+
+      // Open database settings by clicking the "Scale" node
+      const databaseNode = await explorer.waitForNode(dbContext.database.id);
+      await databaseNode.expand();
+      const scaleNode = await explorer.waitForNode(`${dbContext.database.id}/Scale`);
+      await scaleNode.element.click();
+
+      // Switch to Autoscale
+      const autoscaleRadio = explorer.frame.getByText("Autoscale", { exact: true });
+      await autoscaleRadio.click();
+
+      // Set autoscale max throughput to 1000
+      //await getThroughputInput("autopilot").fill(TEST_AUTOSCALE_THROUGHPUT_RU.toString());
+
+      // Save changes
+      await explorer.commandBarButton(CommandBarButton.Save).click();
+
+      await expect(explorer.getConsoleHeaderStatus()).toContainText(
+        `Successfully updated offer for database ${dbContext.database.id}`,
+        {
+          timeout: 2 * ONE_MINUTE_MS,
+        },
+      );
+    });
+  });
+
+  test.describe("Autoscale Throughput Tests", () => {
+    test.beforeEach(async ({ page }) => {
+      explorer = await DataExplorer.open(page, TestAccount.SQL);
+    });
+
+    test("Create database with shared autoscale throughput and verify Scale node in UI", async () => {
+      test.setTimeout(120000); // 2 minutes timeout
+
+      // Create database with shared autoscale throughput (max 1000 RU/s)
+      dbContext = await createTestDB({ maxThroughput: 1000 });
+
+      // Verify database node appears
+      const databaseNode = await explorer.waitForNode(dbContext.database.id);
+      expect(databaseNode).toBeDefined();
+
+      // Expand the database node to see child nodes
+      await databaseNode.expand();
+
+      // Verify that "Scale" node appears under the database
+      const scaleNode = await explorer.waitForNode(`${dbContext.database.id}/Scale`);
+      expect(scaleNode).toBeDefined();
+      await expect(scaleNode.element).toBeVisible();
+    });
+
+    test("Scale shared database autoscale throughput", async () => {
+      // Create database with shared autoscale throughput (max 1000 RU/s)
+      dbContext = await createTestDB({ maxThroughput: 1000 });
+
+      // Open database settings
+      const databaseNode = await explorer.waitForNode(dbContext.database.id);
+      await databaseNode.expand();
+      const scaleNode = await explorer.waitForNode(`${dbContext.database.id}/Scale`);
+      await scaleNode.element.click();
+
+      // Update autoscale max throughput from 1000 to 4000
+      await getThroughputInput("autopilot").fill(TEST_AUTOSCALE_MAX_THROUGHPUT_RU_4K.toString());
+
+      // Save changes
+      await explorer.commandBarButton(CommandBarButton.Save).click();
+
+      // Verify success message
+      await expect(explorer.getConsoleHeaderStatus()).toContainText(
+        `Successfully updated offer for database ${dbContext.database.id}`,
+        {
+          timeout: 2 * ONE_MINUTE_MS,
+        },
+      );
+    });
+
+    test("Scale shared database from autoscale to manual", async () => {
+      // Create database with shared autoscale throughput (max 1000 RU/s)
+      dbContext = await createTestDB({ maxThroughput: 1000 });
+
+      // Open database settings
+      const databaseNode = await explorer.waitForNode(dbContext.database.id);
+      await databaseNode.expand();
+      const scaleNode = await explorer.waitForNode(`${dbContext.database.id}/Scale`);
+      await scaleNode.element.click();
+
+      // Switch to Manual
+      const manualRadio = explorer.frame.getByText("Manual", { exact: true });
+      await manualRadio.click();
+
+      // Save changes
+      await explorer.commandBarButton(CommandBarButton.Save).click();
+
+      // Verify success message
+      await expect(explorer.getConsoleHeaderStatus()).toContainText(
+        `Successfully updated offer for database ${dbContext.database.id}`,
+        { timeout: 2 * ONE_MINUTE_MS },
+      );
+    });
+  });
+});

test/testData.ts

@@ -82,6 +82,75 @@ export class TestContainerContext {
   }
 }
 
+export class TestDatabaseContext {
+  constructor(
+    public armClient: CosmosDBManagementClient,
+    public client: CosmosClient,
+    public database: Database,
+  ) {}
+
+  async dispose() {
+    await this.database.delete();
+  }
+}
+
+export interface CreateTestDBOptions {
+  throughput?: number;
+  maxThroughput?: number; // For autoscale
+}
+
+// Helper function to create ARM client and Cosmos client for SQL account
+async function createCosmosClientForSQLAccount(
+  accountType: TestAccount.SQL | TestAccount.SQLContainerCopyOnly = TestAccount.SQL,
+): Promise<{ armClient: CosmosDBManagementClient; client: CosmosClient }> {
+  const credentials = getAzureCLICredentials();
+  const adaptedCredentials = new AzureIdentityCredentialAdapter(credentials);
+  const armClient = new CosmosDBManagementClient(adaptedCredentials, subscriptionId);
+  const accountName = getAccountName(accountType);
+  const account = await armClient.databaseAccounts.get(resourceGroupName, accountName);
+
+  const clientOptions: CosmosClientOptions = {
+    endpoint: account.documentEndpoint!,
+  };
+
+  const rbacToken =
+    accountType === TestAccount.SQL
+      ? process.env.NOSQL_TESTACCOUNT_TOKEN
+      : accountType === TestAccount.SQLContainerCopyOnly
+      ? process.env.NOSQL_CONTAINERCOPY_TESTACCOUNT_TOKEN
+      : "";
+
+  if (rbacToken) {
+    clientOptions.tokenProvider = async (): Promise<string> => {
+      const AUTH_PREFIX = `type=aad&ver=1.0&sig=`;
+      const authorizationToken = `${AUTH_PREFIX}${rbacToken}`;
+      return authorizationToken;
+    };
+  } else {
+    const keys = await armClient.databaseAccounts.listKeys(resourceGroupName, accountName);
+    clientOptions.key = keys.primaryMasterKey;
+  }
+
+  const client = new CosmosClient(clientOptions);
+
+  return { armClient, client };
+}
+
+export async function createTestDB(options?: CreateTestDBOptions): Promise<TestDatabaseContext> {
+  const databaseId = generateUniqueName("db");
+  const { armClient, client } = await createCosmosClientForSQLAccount();
+
+  // Create database with provisioned throughput (shared throughput)
+  // This checks the "Provision database throughput" option
+  const { database } = await client.databases.create({
+    id: databaseId,
+    throughput: options?.throughput, // Manual throughput (e.g., 400)
+    maxThroughput: options?.maxThroughput, // Autoscale max throughput (e.g., 1000)
+  });
+
+  return new TestDatabaseContext(armClient, client, database);
+}
+
 type createTestSqlContainerConfig = {
   includeTestData?: boolean;
   partitionKey?: string;
@@ -104,34 +173,7 @@ export async function createMultipleTestContainers({
   const creationPromises: Promise<TestContainerContext>[] = [];
 
   const databaseId = databaseName ? databaseName : generateUniqueName("db");
-  const credentials = getAzureCLICredentials();
+  const { armClient, client } = await createCosmosClientForSQLAccount(accountType);
-  const adaptedCredentials = new AzureIdentityCredentialAdapter(credentials);
-  const armClient = new CosmosDBManagementClient(adaptedCredentials, subscriptionId);
-  const accountName = getAccountName(accountType);
-  const account = await armClient.databaseAccounts.get(resourceGroupName, accountName);
-
-  const clientOptions: CosmosClientOptions = {
-    endpoint: account.documentEndpoint!,
-  };
-
-  const rbacToken =
-    accountType === TestAccount.SQL
-      ? process.env.NOSQL_TESTACCOUNT_TOKEN
-      : accountType === TestAccount.SQLContainerCopyOnly
-      ? process.env.NOSQL_CONTAINERCOPY_TESTACCOUNT_TOKEN
-      : "";
-  if (rbacToken) {
-    clientOptions.tokenProvider = async (): Promise<string> => {
-      const AUTH_PREFIX = `type=aad&ver=1.0&sig=`;
-      const authorizationToken = `${AUTH_PREFIX}${rbacToken}`;
-      return authorizationToken;
-    };
-  } else {
-    const keys = await armClient.databaseAccounts.listKeys(resourceGroupName, accountName);
-    clientOptions.key = keys.primaryMasterKey;
-  }
-
-  const client = new CosmosClient(clientOptions);
   const { database } = await client.databases.createIfNotExists({ id: databaseId });
 
   try {
@@ -158,29 +200,8 @@ export async function createTestSQLContainer({
 }: createTestSqlContainerConfig = {}) {
   const databaseId = databaseName ? databaseName : generateUniqueName("db");
   const containerId = "testcontainer"; // A unique container name isn't needed because the database is unique
-  const credentials = getAzureCLICredentials();
+  const { armClient, client } = await createCosmosClientForSQLAccount();
-  const adaptedCredentials = new AzureIdentityCredentialAdapter(credentials);
-  const armClient = new CosmosDBManagementClient(adaptedCredentials, subscriptionId);
-  const accountName = getAccountName(TestAccount.SQL);
-  const account = await armClient.databaseAccounts.get(resourceGroupName, accountName);
 
-  const clientOptions: CosmosClientOptions = {
-    endpoint: account.documentEndpoint!,
-  };
-
-  const nosqlAccountRbacToken = process.env.NOSQL_TESTACCOUNT_TOKEN;
-  if (nosqlAccountRbacToken) {
-    clientOptions.tokenProvider = async (): Promise<string> => {
-      const AUTH_PREFIX = `type=aad&ver=1.0&sig=`;
-      const authorizationToken = `${AUTH_PREFIX}${nosqlAccountRbacToken}`;
-      return authorizationToken;
-    };
-  } else {
-    const keys = await armClient.databaseAccounts.listKeys(resourceGroupName, accountName);
-    clientOptions.key = keys.primaryMasterKey;
-  }
-
-  const client = new CosmosClient(clientOptions);
   const { database } = await client.databases.createIfNotExists({ id: databaseId });
   try {
     const { container } = await database.containers.createIfNotExists({