when disposing of database during playwright test, refresh tree to remove deleted database

* fixed bottom border for fabric

* fixed scrollbar

* reverted last

* updated the review comments

* Fixed scroll , updated the home page UI box shadow, header font weight, margin between boxed , subtab underline for fabric fixed

---------

Co-authored-by: Sakshi Gupta <sakshig@microsoft.com>

.github/workflows/ci.yml

@@ -164,8 +164,8 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        shardIndex: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]
-        shardTotal: [16]
+        shardIndex: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
+        shardTotal: [20]
     steps:
       - uses: actions/checkout@v4
       - name: Use Node.js 18.x
@@ -198,18 +198,18 @@ jobs:
             GREMLIN_TESTACCOUNT_TOKEN=$(az account get-access-token --scope "https://github-e2etests-gremlin.documents.azure.com/.default" -o tsv --query accessToken)
             echo "::add-mask::$GREMLIN_TESTACCOUNT_TOKEN"
             echo GREMLIN_TESTACCOUNT_TOKEN=$GREMLIN_TESTACCOUNT_TOKEN >> $GITHUB_ENV
-            CASSANDRA_TESTACCOUNT_TOKEN=$(az account get-access-token --scope "https://github-e2etests-cassandra.documents.azure.com/.default" -o tsv --query accessToken)
-            echo "::add-mask::$CASSANDRA_TESTACCOUNT_TOKEN"
-            echo CASSANDRA_TESTACCOUNT_TOKEN=$CASSANDRA_TESTACCOUNT_TOKEN >> $GITHUB_ENV
-            MONGO_TESTACCOUNT_TOKEN=$(az account get-access-token --scope "https://github-e2etests-mongo.documents.azure.com/.default" -o tsv --query accessToken)
-            echo "::add-mask::$MONGO_TESTACCOUNT_TOKEN"
-            echo MONGO_TESTACCOUNT_TOKEN=$MONGO_TESTACCOUNT_TOKEN >> $GITHUB_ENV
-            MONGO32_TESTACCOUNT_TOKEN=$(az account get-access-token --scope "https://github-e2etests-mongo32.documents.azure.com/.default" -o tsv --query accessToken)
-            echo "::add-mask::$MONGO32_TESTACCOUNT_TOKEN"
-            echo MONGO32_TESTACCOUNT_TOKEN=$MONGO32_TESTACCOUNT_TOKEN >> $GITHUB_ENV
-            MONGO_READONLY_TESTACCOUNT_TOKEN=$(az account get-access-token --scope "https://github-e2etests-mongo-readonly.documents.azure.com/.default" -o tsv --query accessToken)
-            echo "::add-mask::$MONGO_READONLY_TESTACCOUNT_TOKEN"
-            echo MONGO_READONLY_TESTACCOUNT_TOKEN=$MONGO_READONLY_TESTACCOUNT_TOKEN >> $GITHUB_ENV
+            # CASSANDRA_TESTACCOUNT_TOKEN=$(az account get-access-token --scope "https://github-e2etests-cassandra.documents.azure.com/.default" -o tsv --query accessToken)
+            # echo "::add-mask::$CASSANDRA_TESTACCOUNT_TOKEN"
+            # echo CASSANDRA_TESTACCOUNT_TOKEN=$CASSANDRA_TESTACCOUNT_TOKEN >> $GITHUB_ENV
+            # MONGO_TESTACCOUNT_TOKEN=$(az account get-access-token --scope "https://github-e2etests-mongo.documents.azure.com/.default" -o tsv --query accessToken)
+            # echo "::add-mask::$MONGO_TESTACCOUNT_TOKEN"
+            # echo MONGO_TESTACCOUNT_TOKEN=$MONGO_TESTACCOUNT_TOKEN >> $GITHUB_ENV
+            # MONGO32_TESTACCOUNT_TOKEN=$(az account get-access-token --scope "https://github-e2etests-mongo32.documents.azure.com/.default" -o tsv --query accessToken)
+            # echo "::add-mask::$MONGO32_TESTACCOUNT_TOKEN"
+            # echo MONGO32_TESTACCOUNT_TOKEN=$MONGO32_TESTACCOUNT_TOKEN >> $GITHUB_ENV
+            # MONGO_READONLY_TESTACCOUNT_TOKEN=$(az account get-access-token --scope "https://github-e2etests-mongo-readonly.documents.azure.com/.default" -o tsv --query accessToken)
+            # echo "::add-mask::$MONGO_READONLY_TESTACCOUNT_TOKEN"
+            # echo MONGO_READONLY_TESTACCOUNT_TOKEN=$MONGO_READONLY_TESTACCOUNT_TOKEN >> $GITHUB_ENV
       - name: Run test shard ${{ matrix['shardIndex'] }} of ${{ matrix['shardTotal']}}
         run: npx playwright test --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }} --workers=3
       - name: Upload blob report to GitHub Actions Artifacts

less/Common/Constants.less

@@ -128,7 +128,7 @@
 @provisionDatabaseThroughputInfo: 200px;
 
 //tabs container
-@ActiveTabHeight: 31px;
+@ActiveTabHeight: 32px;
 @ActiveTabWidth: 141px;
 @TabsHeight: 30px;
 @TabsWidth: 140px;

less/documentDB.less

@@ -2643,7 +2643,7 @@ a:link {
 
 .tabPanesContainer {
   flex-grow: 1;
-  overflow-y: scroll;
+  overflow: hidden;
   background-color: var(--colorNeutralBackground1);
   color: var(--colorNeutralForeground1);
 }
@@ -2651,6 +2651,7 @@ a:link {
 .tabs-container {
   height: 100%;
   width: 100%;
+  overflow-y: auto;
 }
 
 .paddingspan4 {
@@ -2677,7 +2678,7 @@ a:link {
   width: @ActiveTabWidth;
 }
 
-.nav-tabs > li.active .contentWrapper {
+.nav-tabs > li.active .contentWrapper .tabNavText  {
   border-bottom: 2px solid var(--colorCompoundBrandBackground);
 }
 

less/documentDBFabric.less

@@ -7,6 +7,7 @@ html {
 body {
   font-family: @FabricFont;
   background-color: #f5f5f5;
+  --colorCompoundBrandBackground: @FabricAccentMedium;
 }
 
 a {
@@ -41,7 +42,7 @@ a:focus {
 }
 
 .nav-tabs-margin {
-  padding-top: 5px;
+  padding-top: 0px;
   background-color: #ffffff;
 }
 
@@ -68,17 +69,20 @@ a:focus {
 }
 
 .nav-tabs > li > .tabNavContentContainer > .tab_Content:hover {
-  border-bottom: 2px solid #e0e0e0;
+  border-bottom: none;
 }
 
 .nav-tabs > li.active > .tabNavContentContainer > .tab_Content,
 .nav-tabs > li.active > .tabNavContentContainer > .tab_Content:hover {
-  border-bottom: 2px solid @FabricAccentMedium;
+  border-bottom: none;
 }
 
 .nav-tabs > li.active > .tabNavContentContainer > .tab_Content > .contentWrapper > .tabNavText {
   border-bottom: 0px none transparent;
 }
+.nav-tabs > li.active .contentWrapper .tabNavText  {
+  border-bottom: 2px solid @FabricAccentMedium;
+}
 
 .tabNavContentContainer {
   padding: @SmallSpace 0px @SmallSpace 0px;

package-lock.json

@@ -116,8 +116,8 @@
         "tinykeys": "2.1.0",
         "underscore": "1.12.1",
         "utility-types": "3.10.0",
-        "web-vitals": "4.2.4",
         "uuid": "9.0.0",
+        "web-vitals": "4.2.4",
         "zustand": "3.5.0"
       },
       "devDependencies": {

playwright.config.ts

@@ -11,8 +11,8 @@ export default defineConfig({
   reporter: process.env.CI ? "blob" : "html",
   timeout: 10 * 60 * 1000,
   use: {
-    trace: "off",
-    video: "off",
+    trace: "on-all-retries",
+    video: "on-first-retry",
     screenshot: "on",
     testIdAttribute: "data-test",
     contextOptions: {

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 }}>
+          <Stack tokens={{ childrenGap: 5 }} data-test="partition-key-values">
             <Text styles={textSubHeadingStyle1}>{partitionKeyValue}</Text>
             <Text styles={textSubHeadingStyle1}>
               {isHierarchicalPartitionedContainer() ? "Hierarchical" : "Non-hierarchical"}
@@ -199,6 +199,7 @@ export const PartitionKeyComponent: React.FC<PartitionKeyComponentProps> = ({
       {!isReadOnly && (
         <>
           <MessageBar
+            data-test="partition-key-warning"
             messageBarType={MessageBarType.warning}
             messageBarIconProps={{ iconName: "WarningSolid", className: "messageBarWarningIcon" }}
             styles={darkThemeMessageBarStyles}
@@ -220,6 +221,7 @@ 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,6 +78,7 @@ exports[`PartitionKeyComponent renders default component and matches snapshot 1`
         </Text>
       </Stack>
       <Stack
+        data-test="partition-key-values"
         tokens={
           {
             "childrenGap": 5,
@@ -108,6 +109,7 @@ exports[`PartitionKeyComponent renders default component and matches snapshot 1`
     </Stack>
   </Stack>
   <StyledMessageBar
+    data-test="partition-key-warning"
     messageBarIconProps={
       {
         "className": "messageBarWarningIcon",
@@ -160,6 +162,7 @@ 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={
       {
@@ -237,6 +240,7 @@ exports[`PartitionKeyComponent renders read-only component and matches snapshot
         </Text>
       </Stack>
       <Stack
+        data-test="partition-key-values"
         tokens={
           {
             "childrenGap": 5,

src/Explorer/Panes/ChangePartitionKeyPane/ChangePartitionKeyPane.tsx

@@ -208,7 +208,7 @@ export const ChangePartitionKeyPane: React.FC<ChangePartitionKeyPaneProps> = ({
           </div>
         </Stack>
         {createNewContainer ? (
-          <Stack>
+          <Stack data-test="create-new-container-form">
             <MessageBar>All configurations except for unique keys will be copied from the source container</MessageBar>
             <Stack className="panelGroupSpacing">
               <Stack horizontal>
@@ -230,6 +230,7 @@ export const ChangePartitionKeyPane: React.FC<ChangePartitionKeyPaneProps> = ({
                 </TooltipHost>
               </Stack>
               <input
+                data-test="new-container-id-input"
                 name="collectionId"
                 id="collectionId"
                 type="text"
@@ -271,6 +272,7 @@ export const ChangePartitionKeyPane: React.FC<ChangePartitionKeyPaneProps> = ({
 
               <input
                 type="text"
+                data-test="new-container-partition-key-input"
                 id="addCollection-partitionKeyValue"
                 aria-required
                 required
@@ -304,6 +306,7 @@ 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}
@@ -327,6 +330,8 @@ 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={() => {
@@ -339,6 +344,7 @@ 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, ""])}
@@ -346,7 +352,11 @@ export const ChangePartitionKeyPane: React.FC<ChangePartitionKeyPaneProps> = ({
                   Add hierarchical partition key
                 </DefaultButton>
                 {subPartitionKeys.length > 0 && (
-                  <Text variant="small" style={{ color: "var(--colorNeutralForeground1)" }}>
+                  <Text
+                    data-test="hierarchical-partitioning-info-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.{" "}
@@ -359,7 +369,7 @@ export const ChangePartitionKeyPane: React.FC<ChangePartitionKeyPaneProps> = ({
             </Stack>
           </Stack>
         ) : (
-          <Stack>
+          <Stack data-test="use-existing-container-form">
             <Stack horizontal>
               <span className="mandatoryStar">*&nbsp;</span>
               <Text className="panelTextBold" variant="small">
@@ -390,6 +400,7 @@ export const ChangePartitionKeyPane: React.FC<ChangePartitionKeyPaneProps> = ({
               }}
               defaultSelectedKey={targetCollectionId}
               responsiveMode={999}
+              ariaLabel="Existing Containers"
             />
           </Stack>
         )}

src/Explorer/SplashScreen/SplashScreen.tsx

@@ -61,7 +61,8 @@ const useStyles = makeStyles({
     display: "flex",
     flexDirection: "column",
     alignItems: "center",
-    minHeight: "100vh",
+    height: "100%",
+    overflowY: "auto",
     backgroundColor: "var(--colorNeutralBackground1)",
     color: "var(--colorNeutralForeground1)",
   },
@@ -73,20 +74,19 @@ const useStyles = makeStyles({
   },
   title: {
     fontSize: "48px",
-    fontWeight: "500",
+    fontWeight: "400",
     margin: "16px auto",
     color: "var(--colorNeutralForeground1)",
   },
   subtitle: {
     fontSize: "18px",
-    marginBottom: "40px",
     color: "var(--colorNeutralForeground2)",
   },
   cardContainer: {
     display: "grid",
     gridTemplateColumns: "repeat(2, 1fr)",
     gap: "16px",
-    width: "66%",
+    width: "60%",
     margin: "0 auto",
     backgroundColor: "var(--colorNeutralBackground1)",
     color: "var(--colorNeutralForeground1)",
@@ -100,7 +100,7 @@ const useStyles = makeStyles({
     color: "var(--colorNeutralForeground1)",
     border: "1px solid var(--colorNeutralStroke1)",
     borderRadius: "4px",
-    boxShadow: "var(--shadow4)",
+    boxShadow: "rgba(0, 0, 0, 0.25) 0px 4px 4px",
     cursor: "pointer",
     minHeight: "150px",
     "&:hover": {
@@ -128,11 +128,10 @@ const useStyles = makeStyles({
     textAlign: "left",
   },
   moreStuffContainer: {
-    display: "grid",
-    gridTemplateColumns: "repeat(3, 1fr)",
+    display: "flex",
+    justifyContent: "space-between",
     gap: "32px",
-    width: "66%",
-    margin: "40px auto",
+    width: "90%",
   },
   moreStuffColumn: {
     display: "flex",
@@ -227,7 +226,7 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
       return (
         <Stack
           className="splashStackContainer"
-          style={{ width: "66%", cursor: "pointer", margin: "40px auto" }}
+          style={{ width: "60%", cursor: "pointer", margin: "40px auto" }}
           tokens={{ childrenGap: 16 }}
         >
           <Stack className="splashStackRow" horizontal>
@@ -903,9 +902,9 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
   return (
     <div className={styles.splashScreenContainer}>
       <div className={styles.splashScreen}>
-        <h1 className={styles.title} role="heading" aria-label="Welcome to Azure Cosmos DB">
+        <h2 className={styles.title} role="heading" aria-label="Welcome to Azure Cosmos DB">
           Welcome to Azure Cosmos DB<span className="activePatch"></span>
-        </h1>
+        </h2>
         <div className={styles.subtitle}>Globally distributed, multi-model database service for any scale</div>
         {getSplashScreenButtons()}
         {useCarousel.getState().showCoachMark && (

src/Explorer/SplashScreen/SplashScreenButton.tsx

@@ -15,7 +15,7 @@ const useStyles = makeStyles({
   button: {
     border: "1px solid var(--colorNeutralStroke1)",
     boxSizing: "border-box",
-    boxShadow: "var(--shadow4)",
+    boxShadow: "rgba(0, 0, 0, 0.25) 0px 4px 4px",
     borderRadius: "4px",
     padding: "32px 16px",
     backgroundColor: "var(--colorNeutralBackground1)",

test/cassandra/container.spec.ts

@@ -8,7 +8,8 @@ test("Cassandra keyspace and table CRUD", async ({ page }) => {
 
   const explorer = await DataExplorer.open(page, TestAccount.Cassandra);
 
-  await explorer.globalCommandButton("New Table").click();
+  const newTableButton = await explorer.globalCommandButton("New Table");
+  await newTableButton.click();
   await explorer.whilePanelOpen(
     "Add Table",
     async (panel, okButton) => {

test/fx.ts

@@ -352,8 +352,9 @@ export class DataExplorer {
    *
    * There's only a single "primary" button, but we still require you to pass the label to confirm you're selecting the right button.
    */
-  globalCommandButton(label: string): Locator {
-    return this.frame.getByTestId("GlobalCommands").getByText(label);
+  async globalCommandButton(label: string): Promise<Locator> {
+    await this.frame.getByTestId("GlobalCommands").click();
+    return this.frame.getByRole("menuitem", { name: label });
   }
 
   /** Select the command bar button with the specified label */
@@ -470,6 +471,15 @@ 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/gremlin/container.spec.ts

@@ -9,7 +9,8 @@ test("Gremlin graph CRUD", async ({ page }) => {
   const explorer = await DataExplorer.open(page, TestAccount.Gremlin);
 
   // Create new database and graph
-  await explorer.globalCommandButton("New Graph").click();
+  const newGraphButton = await explorer.globalCommandButton("New Graph");
+  await newGraphButton.click();
   await explorer.whilePanelOpen(
     "New Graph",
     async (panel, okButton) => {

test/mongo/container.spec.ts

@@ -14,7 +14,8 @@ import { DataExplorer, TEST_AUTOSCALE_THROUGHPUT_RU, TestAccount, generateUnique
 
     const explorer = await DataExplorer.open(page, accountType);
 
-    await explorer.globalCommandButton("New Collection").click();
+    const newCollectionButton = await explorer.globalCommandButton("New Collection");
+    await newCollectionButton.click();
     await explorer.whilePanelOpen(
       "New Collection",
       async (panel, okButton) => {

test/sql/container.spec.ts

@@ -8,7 +8,8 @@ test("SQL database and container CRUD", async ({ page }) => {
 
   const explorer = await DataExplorer.open(page, TestAccount.SQL);
 
-  await explorer.globalCommandButton("New Container").click();
+  const newContainerButton = await explorer.globalCommandButton("New Container");
+  await newContainerButton.click();
   await explorer.whilePanelOpen(
     "New Container",
     async (panel, okButton) => {

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(true);
+  context = await createTestSQLContainer({ includeTestData: true });
 });
 
 test.beforeEach("Open new query tab", async ({ page }) => {

test/sql/scaleAndSettings/changePartitionKey.spec.ts

@@ -0,0 +1,98 @@
+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(explorer);
+  });
+
+  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

@@ -13,11 +13,8 @@ test.describe("Autoscale and Manual throughput", () => {
   let context: TestContainerContext = null!;
   let explorer: DataExplorer = null!;
 
-  test.beforeAll("Create Test Database", async () => {
-    context = await createTestSQLContainer(true);
-  });
-
-  test.beforeEach("Open container settings", async ({ page }) => {
+  test.beforeEach("Create Test Database & Open container settings", async ({ page }) => {
+    context = await createTestSQLContainer();
     explorer = await DataExplorer.open(page, TestAccount.SQL);
 
     // Click Scale & Settings and open Scale tab
@@ -26,8 +23,8 @@ test.describe("Autoscale and Manual throughput", () => {
     await scaleTab.click();
   });
 
-  test.afterAll("Delete Test Database", async () => {
-    await context?.dispose();
+  test.afterEach("Delete Test Database", async () => {
+    await context?.dispose(explorer);
   });
 
   test("Update autoscale max throughput", async () => {
@@ -126,4 +123,4 @@ test.describe("Autoscale and Manual throughput", () => {
       },
     );
   };
-});
+});

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(true);
+    context = await createTestSQLContainer();
   });
 
   test.beforeEach("Open Settings tab under Scale & Settings", async ({ page }) => {

test/tables/container.spec.ts

@@ -7,7 +7,8 @@ test("Tables CRUD", async ({ page }) => {
 
   const explorer = await DataExplorer.open(page, TestAccount.Tables);
 
-  await explorer.globalCommandButton("New Table").click();
+  const newTableButton = explorer.frame.getByTestId("GlobalCommands").getByRole("button", { name: "New Table" });
+  await newTableButton.click();
   await explorer.whilePanelOpen(
     "New Table",
     async (panel, okButton) => {

test/testData.ts

@@ -5,6 +5,7 @@ import { BulkOperationType, Container, CosmosClient, CosmosClientOptions, Databa
 import { AzureIdentityCredentialAdapter } from "@azure/ms-rest-js";
 
 import {
+  DataExplorer,
   generateUniqueName,
   getAccountName,
   getAzureCLICredentials,
@@ -69,13 +70,29 @@ export class TestContainerContext {
     public testData: Map<string, TestItem>,
   ) {}
 
-  async dispose() {
+  async dispose(explorer: DataExplorer) {
     await this.database.delete();
+
+    // refresh tree to remove deleted database
+    if (explorer) {
+      const refreshButton = explorer.frame.getByTestId("Sidebar/RefreshButton");
+      await refreshButton.click();
+    }
   }
 }
 
-export async function createTestSQLContainer(includeTestData?: boolean) {
-  const databaseId = generateUniqueName("db");
+type createTestSqlContainerConfig = {
+  includeTestData?: boolean;
+  partitionKey?: string;
+  databaseName?: string;
+};
+
+export async function createTestSQLContainer({
+  includeTestData = false,
+  partitionKey = "/partitionKey",
+  databaseName = "",
+}: 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 adaptedCredentials = new AzureIdentityCredentialAdapter(credentials);
@@ -104,7 +121,7 @@ export async function createTestSQLContainer(includeTestData?: boolean) {
   try {
     const { container } = await database.containers.createIfNotExists({
       id: containerId,
-      partitionKey: "/partitionKey",
+      partitionKey,
     });
     if (includeTestData) {
       const batchCount = TestData.length / 100;