Fix error with adding container to shared db test

less/hostedexplorer.less

@@ -17,38 +17,6 @@
     position: fixed;
     top: -200px;
 }
-body.isDarkMode .ms-Layer {
-    .ms-Callout-main {
-        background-color: @BaseHigh !important;
-    }
-
-    .ms-Callout-beak {
-        background-color: @BaseHigh !important;
-    }
-
-    .ms-ContextualMenu {
-        background-color: @BaseHigh !important;
-    }
-
-    .ms-Dropdown-items {
-        background-color: @BaseHigh !important;
-    }
-
-    .ms-Dropdown-item {
-        background-color: @BaseHigh !important;
-        color: @BaseLight !important;
-
-        &:hover {
-            background-color: @BaseMediumHigh !important;
-            color: @BaseLight !important;
-        }
-
-        &.is-selected {
-            background-color: @BaseMediumHigh !important;
-            color: @BaseLight !important;
-        }
-    }
-}
 
 html {
     font-family: wf_segoe-ui_normal, "Segoe UI", "Segoe WP", Tahoma, Arial, sans-serif;
@@ -161,65 +129,6 @@ body {
         }
     }
 
-    &.isDarkMode .accountSwitchContextualMenu {
-        background-color: @BaseHigh;
-
-        .ms-Callout-main {
-            background-color: @BaseHigh;
-        }
-
-        .ms-ContextualMenu-item {
-            background-color: @BaseHigh;
-        }
-
-        .ms-Dropdown {
-            .ms-Dropdown-title {
-                background-color: @BaseDark;
-                color: @BaseLight;
-                border-color: @BaseMediumHigh;
-            }
-
-            .ms-Dropdown-caretDownWrapper {
-                color: @BaseLight;
-            }
-
-            &:hover .ms-Dropdown-title {
-                background-color: @BaseHigh;
-                color: @BaseLight;
-                border-color: @BaseMedium;
-            }
-        }
-
-        .ms-Label {
-            color: @BaseLight;
-        }
-    }
-
-    &.isDarkMode .ms-Dropdown-callout {
-        .ms-Callout-main {
-            background-color: @BaseHigh;
-        }
-
-        .ms-Dropdown-items {
-            background-color: @BaseHigh;
-        }
-
-        .ms-Dropdown-item {
-            background-color: @BaseHigh;
-            color: @BaseLight;
-
-            &:hover {
-                background-color: @BaseMediumHigh;
-                color: @BaseLight;
-            }
-
-            &.is-selected {
-                background-color: @BaseMediumHigh;
-                color: @BaseLight;
-            }
-        }
-    }
-
     .fixedleftpane {
         background: @BaseLow;
         height: 100vh;

src/Explorer/Controls/Settings/SettingsSubComponents/PartitionKeyComponent.tsx

@@ -187,7 +187,7 @@ export const PartitionKeyComponent: React.FC<PartitionKeyComponentProps> = ({
             <Text styles={textSubHeadingStyle}>Current {partitionKeyName.toLowerCase()}</Text>
             <Text styles={textSubHeadingStyle}>Partitioning</Text>
           </Stack>
-          <Stack tokens={{ childrenGap: 5 }} data-test="partition-key-values">
+          <Stack tokens={{ childrenGap: 5 }}>
             <Text styles={textSubHeadingStyle1}>{partitionKeyValue}</Text>
             <Text styles={textSubHeadingStyle1}>
               {isHierarchicalPartitionedContainer() ? "Hierarchical" : "Non-hierarchical"}
@@ -199,7 +199,6 @@ export const PartitionKeyComponent: React.FC<PartitionKeyComponentProps> = ({
       {!isReadOnly && (
         <>
           <MessageBar
-            data-test="partition-key-warning"
             messageBarType={MessageBarType.warning}
             messageBarIconProps={{ iconName: "WarningSolid", className: "messageBarWarningIcon" }}
             styles={darkThemeMessageBarStyles}
@@ -221,7 +220,6 @@ export const PartitionKeyComponent: React.FC<PartitionKeyComponentProps> = ({
           </Text>
           {configContext.platform !== Platform.Emulator && (
             <PrimaryButton
-              data-test="change-partition-key-button"
               styles={{ root: { width: "fit-content" } }}
               text="Change"
               onClick={startPartitionkeyChangeWorkflow}

src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/PartitionKeyComponent.test.tsx.snap

@@ -78,7 +78,6 @@ exports[`PartitionKeyComponent renders default component and matches snapshot 1`
         </Text>
       </Stack>
       <Stack
-        data-test="partition-key-values"
         tokens={
           {
             "childrenGap": 5,
@@ -109,7 +108,6 @@ exports[`PartitionKeyComponent renders default component and matches snapshot 1`
     </Stack>
   </Stack>
   <StyledMessageBar
-    data-test="partition-key-warning"
     messageBarIconProps={
       {
         "className": "messageBarWarningIcon",
@@ -162,7 +160,6 @@ exports[`PartitionKeyComponent renders default component and matches snapshot 1`
     To change the partition key, a new destination container must be created or an existing destination container selected. Data will then be copied to the destination container.
   </Text>
   <CustomizedPrimaryButton
-    data-test="change-partition-key-button"
     onClick={[Function]}
     styles={
       {
@@ -240,7 +237,6 @@ exports[`PartitionKeyComponent renders read-only component and matches snapshot
         </Text>
       </Stack>
       <Stack
-        data-test="partition-key-values"
         tokens={
           {
             "childrenGap": 5,

src/Explorer/Panes/AddCollectionPanel/AddCollectionPanel.tsx

@@ -410,6 +410,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                   }
                   defaultSelectedKey={this.props.databaseId}
                   responsiveMode={999}
+                  onRenderOption={this.onRenderDatabaseOption}
                 />
               )}
               <Separator className="panelSeparator" style={{ marginTop: -4, marginBottom: -4 }} />
@@ -1473,4 +1474,19 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
       TelemetryProcessor.traceFailure(Action.CreateCollection, failureTelemetryData, startKey);
     }
   }
+
+  private onRenderDatabaseOption = (
+    option?: IDropdownOption,
+    defaultRender?: (props?: IDropdownOption) => JSX.Element,
+  ): JSX.Element | null => {
+    if (!option) {
+      return null;
+    }
+
+    return (
+      <div data-testid={`database-option-${option.key}`}>
+        {defaultRender ? defaultRender(option) : <span>{option.text}</span>}
+      </div>
+    );
+  };
 }

src/Explorer/Panes/ChangePartitionKeyPane/ChangePartitionKeyPane.tsx

@@ -208,7 +208,7 @@ export const ChangePartitionKeyPane: React.FC<ChangePartitionKeyPaneProps> = ({
           </div>
         </Stack>
         {createNewContainer ? (
-          <Stack data-test="create-new-container-form">
+          <Stack>
             <MessageBar>All configurations except for unique keys will be copied from the source container</MessageBar>
             <Stack className="panelGroupSpacing">
               <Stack horizontal>
@@ -230,7 +230,6 @@ export const ChangePartitionKeyPane: React.FC<ChangePartitionKeyPaneProps> = ({
                 </TooltipHost>
               </Stack>
               <input
-                data-test="new-container-id-input"
                 name="collectionId"
                 id="collectionId"
                 type="text"
@@ -272,7 +271,6 @@ export const ChangePartitionKeyPane: React.FC<ChangePartitionKeyPaneProps> = ({
 
               <input
                 type="text"
-                data-test="new-container-partition-key-input"
                 id="addCollection-partitionKeyValue"
                 aria-required
                 required
@@ -306,7 +304,6 @@ export const ChangePartitionKeyPane: React.FC<ChangePartitionKeyPaneProps> = ({
                       type="text"
                       id="addCollection-partitionKeyValue"
                       key={`addCollection-partitionKeyValue_${index}`}
-                      data-test={`new-container-sub-partition-key-input-${index}`}
                       aria-required
                       required
                       size={40}
@@ -330,8 +327,6 @@ export const ChangePartitionKeyPane: React.FC<ChangePartitionKeyPaneProps> = ({
                       }}
                     />
                     <IconButton
-                      data-test={`remove-sub-partition-key-button-${index}`}
-                      ariaLabel="Remove hierarchical partition key"
                       iconProps={{ iconName: "Delete" }}
                       style={{ height: 27 }}
                       onClick={() => {
@@ -344,7 +339,6 @@ export const ChangePartitionKeyPane: React.FC<ChangePartitionKeyPaneProps> = ({
               })}
               <Stack className="panelGroupSpacing">
                 <DefaultButton
-                  data-test="add-sub-partition-key-button"
                   styles={{ root: { padding: 0, width: 200, height: 30 }, label: { fontSize: 12 } }}
                   disabled={subPartitionKeys.length >= Constants.BackendDefaults.maxNumMultiHashPartition}
                   onClick={() => setSubPartitionKeys([...subPartitionKeys, ""])}
@@ -352,11 +346,7 @@ export const ChangePartitionKeyPane: React.FC<ChangePartitionKeyPaneProps> = ({
                   Add hierarchical partition key
                 </DefaultButton>
                 {subPartitionKeys.length > 0 && (
-                  <Text
-                    data-test="hierarchical-partitioning-info-text"
-                    variant="small"
-                    style={{ color: "var(--colorNeutralForeground1)" }}
-                  >
+                  <Text variant="small" style={{ color: "var(--colorNeutralForeground1)" }}>
                     <Icon iconName="InfoSolid" className="removeIcon" tabIndex={0} /> This feature allows you to
                     partition your data with up to three levels of keys for better data distribution. Requires .NET V3,
                     Java V4 SDK, or preview JavaScript V3 SDK.{" "}
@@ -369,7 +359,7 @@ export const ChangePartitionKeyPane: React.FC<ChangePartitionKeyPaneProps> = ({
             </Stack>
           </Stack>
         ) : (
-          <Stack data-test="use-existing-container-form">
+          <Stack>
             <Stack horizontal>
               <span className="mandatoryStar">*&nbsp;</span>
               <Text className="panelTextBold" variant="small">
@@ -400,7 +390,6 @@ export const ChangePartitionKeyPane: React.FC<ChangePartitionKeyPaneProps> = ({
               }}
               defaultSelectedKey={targetCollectionId}
               responsiveMode={999}
-              ariaLabel="Existing Containers"
             />
           </Stack>
         )}

src/HostedExplorer.tsx

@@ -1,6 +1,5 @@
 import { initializeIcons } from "@fluentui/react";
 import { useBoolean } from "@fluentui/react-hooks";
-import { MessageTypes } from "Contracts/MessageTypes";
 import { AadAuthorizationFailure } from "Platform/Hosted/Components/AadAuthorizationFailure";
 import * as React from "react";
 import { render } from "react-dom";
@@ -22,33 +21,9 @@ import "./Shared/appInsights";
 import { useAADAuth } from "./hooks/useAADAuth";
 import { useConfig } from "./hooks/useConfig";
 import { useTokenMetadata } from "./hooks/usePortalAccessToken";
-import { THEME_MODE_DARK, useThemeStore } from "./hooks/useTheme";
 
 initializeIcons();
 
-if (typeof window !== "undefined") {
-  window.addEventListener("message", (event) => {
-    const messageData = event.data?.data || event.data;
-    const messageType = messageData?.type;
-
-    if (messageType === MessageTypes.UpdateTheme) {
-      const themeData = messageData?.params?.theme || messageData?.theme;
-      if (themeData && themeData.mode !== undefined) {
-        const isDark = themeData.mode === THEME_MODE_DARK;
-        useThemeStore.setState({
-          isDarkMode: isDark,
-          themeMode: themeData.mode,
-        });
-        if (isDark) {
-          document.body.classList.add("isDarkMode");
-        } else {
-          document.body.classList.remove("isDarkMode");
-        }
-      }
-    }
-  });
-}
-
 const App: React.FunctionComponent = () => {
   // For handling encrypted portal tokens sent via query paramter
   const params = new URLSearchParams(window.location.search);

src/Main.tsx

@@ -125,10 +125,7 @@ const App = (): JSX.Element => {
       <KeyboardShortcutRoot>
         <div className="flexContainer" aria-hidden="false">
           {userContext.features.enableContainerCopy && userContext.apiType === "SQL" ? (
-            <>
-              <ContainerCopyPanel explorer={explorer} />
-              <SidePanel />
-            </>
+            <ContainerCopyPanel explorer={explorer} />
           ) : (
             <DivExplorer explorer={explorer} />
           )}

src/Platform/Hosted/Components/AccountSwitcher.tsx

@@ -1,7 +1,7 @@
 // TODO: Renable this rule for the file or turn it off everywhere
 /* eslint-disable react/display-name */
 
-import { DefaultButton, IButtonStyles, IContextualMenuItem, IContextualMenuProps } from "@fluentui/react";
+import { DefaultButton, IButtonStyles, IContextualMenuItem } from "@fluentui/react";
 import * as React from "react";
 import { FunctionComponent, useEffect, useState } from "react";
 import { StyleConstants } from "../../../Common/StyleConstants";
@@ -92,16 +92,14 @@ export const AccountSwitcher: FunctionComponent<Props> = ({ armToken, setDatabas
     },
   ];
 
-  const menuProps: IContextualMenuProps = {
-    directionalHintFixed: true,
-    className: "accountSwitchContextualMenu",
-    items,
-  };
-
   return (
     <DefaultButton
       text={buttonText}
-      menuProps={menuProps}
+      menuProps={{
+        directionalHintFixed: true,
+        className: "accountSwitchContextualMenu",
+        items,
+      }}
       styles={buttonStyles}
       className="accountSwitchButton"
       id="accountSwitchButton"

src/Platform/Hosted/Components/SwitchAccount.tsx

@@ -31,6 +31,9 @@ export const SwitchAccount: FunctionComponent<Props> = ({
       }}
       defaultSelectedKey={selectedAccount?.name}
       placeholder={accounts && accounts.length === 0 ? "No Accounts Found" : "Select an Account"}
+      styles={{
+        callout: "accountSwitchAccountDropdownMenu",
+      }}
     />
   );
 };

src/Platform/Hosted/Components/SwitchSubscription.tsx

@@ -30,6 +30,9 @@ export const SwitchSubscription: FunctionComponent<Props> = ({
       }}
       defaultSelectedKey={selectedSubscription?.subscriptionId}
       placeholder={subscriptions && subscriptions.length === 0 ? "No Subscriptions Found" : "Select a Subscription"}
+      styles={{
+        callout: "accountSwitchSubscriptionDropdownMenu",
+      }}
     />
   );
 };

test/fx.ts

@@ -56,7 +56,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;
 
@@ -470,15 +472,6 @@ export class DataExplorer {
     return this.frame.getByTestId("notification-console/header-status");
   }
 
-  async getDropdownItemByName(name: string, ariaLabel?: string): Promise<Locator> {
-    const dropdownItemsWrapper = this.frame.locator("div.ms-Dropdown-items");
-    if (ariaLabel) {
-      expect(await dropdownItemsWrapper.getAttribute("aria-label")).toEqual(ariaLabel);
-    }
-    const containerDropdownItems = dropdownItemsWrapper.locator("button.ms-Dropdown-item[role='option']");
-    return containerDropdownItems.filter({ hasText: name });
-  }
-
   /** Waits for the Data Explorer app to load */
   static async waitForExplorer(page: Page) {
     const iframeElement = await page.getByTestId("DataExplorerFrame").elementHandle();

test/sql/query.spec.ts

@@ -9,7 +9,7 @@ let queryTab: QueryTab = null!;
 let queryEditor: Editor = null!;
 
 test.beforeAll("Create Test Database", async () => {
-  context = await createTestSQLContainer({ includeTestData: true });
+  context = await createTestSQLContainer(true);
 });
 
 test.beforeEach("Open new query tab", async ({ page }) => {

test/sql/scaleAndSettings/changePartitionKey.spec.ts

@@ -1,98 +0,0 @@
-import { expect, Page, test } from "@playwright/test";
-import { DataExplorer, TestAccount } from "../../fx";
-import { createTestSQLContainer, TestContainerContext } from "../../testData";
-
-test.describe("Change Partition Key", () => {
-  let pageInstance: Page;
-  let context: TestContainerContext = null!;
-  let explorer: DataExplorer = null!;
-  const newPartitionKeyPath = "/newPartitionKey";
-  const newContainerId = "testcontainer_1";
-
-  test.beforeAll("Create Test Database", async () => {
-    context = await createTestSQLContainer();
-  });
-
-  test.beforeEach("Open container settings", async ({ page }) => {
-    pageInstance = page;
-    explorer = await DataExplorer.open(page, TestAccount.SQL);
-
-    // Click Scale & Settings and open Partition Key tab
-    await explorer.openScaleAndSettings(context);
-    const PartitionKeyTab = explorer.frame.getByTestId("settings-tab-header/PartitionKeyTab");
-    await PartitionKeyTab.click();
-  });
-
-  test.afterAll("Delete Test Database", async () => {
-    await context?.dispose();
-  });
-
-  test("Change partition key path", async () => {
-    await expect(explorer.frame.getByText("/partitionKey")).toBeVisible();
-    await expect(explorer.frame.getByText("Change partition key")).toBeVisible();
-    await expect(explorer.frame.getByText(/To safeguard the integrity of/)).toBeVisible();
-    await expect(explorer.frame.getByText(/To change the partition key/)).toBeVisible();
-
-    const changePartitionKeyButton = explorer.frame.getByTestId("change-partition-key-button");
-    expect(changePartitionKeyButton).toBeVisible();
-    await changePartitionKeyButton.click();
-
-    // Fill out new partition key form in the panel
-    const changePkPanel = explorer.frame.getByTestId(`Panel:Change partition key`);
-    await expect(changePkPanel.getByText(context.database.id)).toBeVisible();
-    await expect(explorer.frame.getByRole("heading", { name: "Change partition key" })).toBeVisible();
-    await expect(explorer.frame.getByText(/When changing a container/)).toBeVisible();
-
-    // Try to switch to new container
-    await expect(changePkPanel.getByText("New container")).toBeVisible();
-    await expect(changePkPanel.getByText("Existing container")).toBeVisible();
-    await expect(changePkPanel.getByTestId("new-container-id-input")).toBeVisible();
-
-    changePkPanel.getByTestId("new-container-id-input").fill(newContainerId);
-    await expect(changePkPanel.getByTestId("new-container-partition-key-input")).toBeVisible();
-    changePkPanel.getByTestId("new-container-partition-key-input").fill(newPartitionKeyPath);
-
-    await expect(changePkPanel.getByTestId("add-sub-partition-key-button")).toBeVisible();
-    changePkPanel.getByTestId("add-sub-partition-key-button").click();
-    await expect(changePkPanel.getByTestId("new-container-sub-partition-key-input-0")).toBeVisible();
-    await expect(changePkPanel.getByTestId("remove-sub-partition-key-button-0")).toBeVisible();
-    await expect(changePkPanel.getByTestId("hierarchical-partitioning-info-text")).toBeVisible();
-    changePkPanel.getByTestId("new-container-sub-partition-key-input-0").fill("/customerId");
-
-    await changePkPanel.getByTestId("Panel/OkButton").click();
-
-    await pageInstance.waitForLoadState("networkidle");
-    await expect(changePkPanel).not.toBeVisible({ timeout: 60 * 1000 });
-
-    // Verify partition key change job
-    const jobText = explorer.frame.getByText(/Partition key change job/);
-    await expect(jobText).toBeVisible();
-    await expect(explorer.frame.locator(".ms-ProgressIndicator-itemName")).toContainText("Portal_testcontainer_1");
-
-    const jobRow = explorer.frame.locator(".ms-ProgressIndicator-itemDescription");
-    await expect(jobRow.getByText("Completed")).toBeVisible({ timeout: 30 * 1000 });
-
-    const newContainerNode = await explorer.waitForContainerNode(context.database.id, newContainerId);
-    expect(newContainerNode).not.toBeNull();
-
-    // Now try to switch to existing container
-    await changePartitionKeyButton.click();
-    await changePkPanel.getByText("Existing container").click();
-    await changePkPanel.getByLabel("Use existing container").check();
-    await changePkPanel.getByText("Choose an existing container").click();
-
-    const containerDropdownItem = await explorer.getDropdownItemByName(newContainerId, "Existing Containers");
-    await containerDropdownItem.click();
-
-    await changePkPanel.getByTestId("Panel/OkButton").click();
-    await explorer.frame.getByRole("button", { name: "Cancel" }).click();
-
-    // Dismiss overlay if it appears
-    const overlayFrame = explorer.frame.locator("#webpack-dev-server-client-overlay").first();
-    if (await overlayFrame.count()) {
-      await overlayFrame.contentFrame().getByLabel("Dismiss").click();
-    }
-    const cancelledJobRow = explorer.frame.getByTestId("Tab:tab0");
-    await expect(cancelledJobRow.getByText("Cancelled")).toBeVisible({ timeout: 30 * 1000 });
-  });
-});

test/sql/scaleAndSettings/scale.spec.ts

@@ -14,7 +14,7 @@ test.describe("Autoscale and Manual throughput", () => {
   let explorer: DataExplorer = null!;
 
   test.beforeAll("Create Test Database", async () => {
-    context = await createTestSQLContainer({ includeTestData: true });
+    context = await createTestSQLContainer(true);
   });
 
   test.beforeEach("Open container settings", async ({ page }) => {

test/sql/scaleAndSettings/settings.spec.ts

@@ -7,7 +7,7 @@ test.describe("Settings under Scale & Settings", () => {
   let explorer: DataExplorer = null!;
 
   test.beforeAll("Create Test Database", async () => {
-    context = await createTestSQLContainer({ includeTestData: true });
+    context = await createTestSQLContainer(true);
   });
 
   test.beforeEach("Open Settings tab under Scale & Settings", async ({ page }) => {

test/sql/scaleAndSettings/sharedThroughput.spec.ts

@@ -0,0 +1,288 @@
+import { CosmosDBManagementClient } from "@azure/arm-cosmosdb";
+import { CosmosClient, CosmosClientOptions, Database } from "@azure/cosmos";
+import { AzureIdentityCredentialAdapter } from "@azure/ms-rest-js";
+import { Locator, expect, test } from "@playwright/test";
+import {
+  CommandBarButton,
+  DataExplorer,
+  ONE_MINUTE_MS,
+  TEST_AUTOSCALE_MAX_THROUGHPUT_RU_4K,
+  TEST_MANUAL_THROUGHPUT_RU,
+  TestAccount,
+  generateUniqueName,
+  getAccountName,
+  getAzureCLICredentials,
+  resourceGroupName,
+  subscriptionId,
+} from "../../fx";
+
+// Helper class for database context
+class TestDatabaseContext {
+  constructor(
+    public armClient: CosmosDBManagementClient,
+    public client: CosmosClient,
+    public database: Database,
+  ) {}
+
+  async dispose() {
+    await this.database.delete();
+  }
+}
+
+// Options for creating test database
+interface CreateTestDBOptions {
+  throughput?: number;
+  maxThroughput?: number; // For autoscale
+}
+
+// Helper function to create a test database with shared throughput
+async function createTestDB(options?: CreateTestDBOptions): Promise<TestDatabaseContext> {
+  const databaseId = generateUniqueName("db");
+  const credentials = getAzureCLICredentials();
+  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);
+
+  // 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);
+}
+
+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(async () => {
+    // Clean up: delete the created database
+    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
+      await explorer.frame.getByRole("button", { name: "New Container" }).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.getConsoleMessage()).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();
+
+      // Verify success message
+      await expect(explorer.getConsoleMessage()).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.getConsoleMessage()).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.getConsoleMessage()).toContainText(
+        `Successfully updated offer for database ${dbContext.database.id}`,
+        { timeout: 2 * ONE_MINUTE_MS },
+      );
+    });
+  });
+});

test/testData.ts

@@ -74,18 +74,62 @@ export class TestContainerContext {
   }
 }
 
-type createTestSqlContainerConfig = {
-  includeTestData?: boolean;
-  partitionKey?: string;
-  databaseName?: string;
-};
+export class TestDatabaseContext {
+  constructor(
+    public armClient: CosmosDBManagementClient,
+    public client: CosmosClient,
+    public database: Database,
+  ) {}
 
-export async function createTestSQLContainer({
-  includeTestData = false,
-  partitionKey = "/partitionKey",
-  databaseName = "",
-}: createTestSqlContainerConfig = {}) {
-  const databaseId = databaseName ? databaseName : generateUniqueName("db");
+  async dispose() {
+    await this.database.delete();
+  }
+}
+
+export interface CreateTestDBOptions {
+  throughput?: number;
+  maxThroughput?: number; // For autoscale
+}
+
+export async function createTestDB(options?: CreateTestDBOptions): Promise<TestDatabaseContext> {
+  const databaseId = generateUniqueName("db");
+  const credentials = getAzureCLICredentials();
+  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);
+
+  // 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);
+}
+
+export async function createTestSQLContainer(includeTestData?: boolean) {
+  const databaseId = generateUniqueName("db");
   const containerId = "testcontainer"; // A unique container name isn't needed because the database is unique
   const credentials = getAzureCLICredentials();
   const adaptedCredentials = new AzureIdentityCredentialAdapter(credentials);
@@ -114,7 +158,7 @@ export async function createTestSQLContainer({
   try {
     const { container } = await database.containers.createIfNotExists({
       id: containerId,
-      partitionKey,
+      partitionKey: "/partitionKey",
     });
     if (includeTestData) {
       const batchCount = TestData.length / 100;