dark mode for header

less/hostedexplorer.less

@@ -17,6 +17,38 @@
     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;
@@ -129,6 +161,65 @@ 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/ComputedPropertiesComponent.tsx

@@ -155,12 +155,7 @@ export class ComputedPropertiesComponent extends React.Component<
           </Link>
           &#160; about how to define computed properties and how to use them.
         </Text>
-        <div
+        <div className="settingsV2Editor" tabIndex={0} ref={this.computedPropertiesDiv}></div>
-          className="settingsV2Editor"
-          tabIndex={0}
-          ref={this.computedPropertiesDiv}
-          data-test="computed-properties-editor"
-        ></div>
       </Stack>
     );
   }

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/SubSettingsComponent.tsx

@@ -302,8 +302,8 @@ export class SubSettingsComponent extends React.Component<SubSettingsComponentPr
   );
 
   private geoSpatialConfigTypeChoiceGroupOptions: IChoiceGroupOption[] = [
-    { key: GeospatialConfigType.Geography, text: "Geography", ariaLabel: "geography-option" },
+    { key: GeospatialConfigType.Geography, text: "Geography" },
-    { key: GeospatialConfigType.Geometry, text: "Geometry", ariaLabel: "geometry-option" },
+    { key: GeospatialConfigType.Geometry, text: "Geometry" },
   ];
 
   private getGeoSpatialComponent = (): JSX.Element => (

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

@@ -31,7 +31,6 @@ exports[`ComputedPropertiesComponent renders 1`] = `
   </Text>
   <div
     className="settingsV2Editor"
-    data-test="computed-properties-editor"
     tabIndex={0}
   />
 </Stack>

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/Controls/Settings/SettingsSubComponents/__snapshots__/SubSettingsComponent.test.tsx.snap

@@ -167,12 +167,10 @@ exports[`SubSettingsComponent analyticalTimeToLive hidden 1`] = `
     options={
       [
         {
-          "ariaLabel": "geography-option",
           "key": "Geography",
           "text": "Geography",
         },
         {
-          "ariaLabel": "geometry-option",
           "key": "Geometry",
           "text": "Geometry",
         },
@@ -654,12 +652,10 @@ exports[`SubSettingsComponent analyticalTimeToLiveSeconds hidden 1`] = `
     options={
       [
         {
-          "ariaLabel": "geography-option",
           "key": "Geography",
           "text": "Geography",
         },
         {
-          "ariaLabel": "geometry-option",
           "key": "Geometry",
           "text": "Geometry",
         },
@@ -1228,12 +1224,10 @@ exports[`SubSettingsComponent changeFeedPolicy hidden 1`] = `
     options={
       [
         {
-          "ariaLabel": "geography-option",
           "key": "Geography",
           "text": "Geography",
         },
         {
-          "ariaLabel": "geometry-option",
           "key": "Geometry",
           "text": "Geometry",
         },
@@ -1766,12 +1760,10 @@ exports[`SubSettingsComponent renders 1`] = `
     options={
       [
         {
-          "ariaLabel": "geography-option",
           "key": "Geography",
           "text": "Geography",
         },
         {
-          "ariaLabel": "geometry-option",
           "key": "Geometry",
           "text": "Geometry",
         },
@@ -2338,12 +2330,10 @@ exports[`SubSettingsComponent timeToLiveSeconds hidden 1`] = `
     options={
       [
         {
-          "ariaLabel": "geography-option",
           "key": "Geography",
           "text": "Geography",
         },
         {
-          "ariaLabel": "geometry-option",
           "key": "Geometry",
           "text": "Geometry",
         },

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/Panes/UploadItemsPane/UploadItemsPane.tsx

@@ -205,7 +205,7 @@ export const UploadItemsPane: FunctionComponent<UploadItemsPaneProps> = ({ onUpl
           tooltip="Select one or more JSON files to upload. Each file can contain a single JSON document or an array of JSON documents. The combined size of all files in an individual upload operation must be less than 2 MB. You can perform multiple upload operations for larger data sets."
         />
         {uploadFileData?.length > 0 && (
-          <div className="fileUploadSummaryContainer" data-test="file-upload-status">
+          <div className="fileUploadSummaryContainer">
             <b style={{ color: "var(--colorNeutralForeground1)" }}>File upload status</b>
             <DetailsList
               items={uploadFileData}

src/HostedExplorer.tsx

@@ -1,5 +1,6 @@
 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";
@@ -21,9 +22,33 @@ 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,7 +125,10 @@ const App = (): JSX.Element => {
       <KeyboardShortcutRoot>
         <div className="flexContainer" aria-hidden="false">
           {userContext.features.enableContainerCopy && userContext.apiType === "SQL" ? (
-            <ContainerCopyPanel explorer={explorer} />
+            <>
+              <ContainerCopyPanel explorer={explorer} />
+              <SidePanel />
+            </>
           ) : (
             <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 } from "@fluentui/react";
+import { DefaultButton, IButtonStyles, IContextualMenuItem, IContextualMenuProps } from "@fluentui/react";
 import * as React from "react";
 import { FunctionComponent, useEffect, useState } from "react";
 import { StyleConstants } from "../../../Common/StyleConstants";
@@ -92,14 +92,16 @@ 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,9 +31,6 @@ 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,9 +30,6 @@ 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

@@ -326,7 +326,6 @@ type PanelOpenOptions = {
 export enum CommandBarButton {
   Save = "Save",
   ExecuteQuery = "Execute Query",
-  UploadItem = "Upload Item",
 }
 
 /** Helper class that provides locator methods for DataExplorer components, on top of a Frame */
@@ -471,6 +470,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/sql/document.spec.ts

@@ -1,17 +1,7 @@
 import { expect, test } from "@playwright/test";
 
-import { existsSync, unlinkSync, writeFileSync } from "fs";
+import { DataExplorer, DocumentsTab, TestAccount } from "../fx";
-import path from "path";
+import { retry, setPartitionKeys } from "../testData";
-import { CommandBarButton, DataExplorer, DocumentsTab, ONE_MINUTE_MS, TestAccount } from "../fx";
-import {
-  createTestSQLContainer,
-  itemsPerPartition,
-  partitionCount,
-  retry,
-  setPartitionKeys,
-  TestContainerContext,
-  TestData,
-} from "../testData";
 import { documentTestCases } from "./testCases";
 
 let explorer: DataExplorer = null!;
@@ -105,108 +95,3 @@ for (const { name, databaseId, containerId, documents } of documentTestCases) {
     }
   });
 }
-
-test.describe.serial("Upload Item", () => {
-  let context: TestContainerContext = null!;
-  const uploadDocumentFilePath: string = path.join(__dirname, "uploadDocument.json");
-
-  test.beforeEach("Create Test Database and Open documents tab", async ({ page }) => {
-    context = await createTestSQLContainer();
-    explorer = await DataExplorer.open(page, TestAccount.SQL);
-
-    const containerNode = await explorer.waitForContainerNode(context.database.id, context.container.id);
-    await containerNode.expand();
-
-    const containerMenuNode = await explorer.waitForContainerItemsNode(context.database.id, context.container.id);
-    await containerMenuNode.element.click();
-  });
-
-  test.afterEach("Delete Test Database and uploadDocument.json", async () => {
-    if (existsSync(uploadDocumentFilePath)) {
-      unlinkSync(uploadDocumentFilePath);
-    }
-    await context?.dispose();
-  });
-
-  test("upload document", async () => {
-    // Create file to upload
-    const TestDataJsonString: string = JSON.stringify(TestData, null, 2);
-    writeFileSync(uploadDocumentFilePath, TestDataJsonString);
-
-    const uploadItemCommandBar = explorer.commandBarButton(CommandBarButton.UploadItem);
-    await uploadItemCommandBar.click();
-
-    // Select file to upload
-    await explorer.frame.setInputFiles("#importFileInput", uploadDocumentFilePath);
-
-    const uploadButton = explorer.frame.getByTestId("Panel/OkButton");
-    await uploadButton.click();
-
-    // Verify upload success message
-    const fileUploadStatusExpected: string = `${partitionCount * itemsPerPartition} created, 0 throttled, 0 errors`;
-    const fileUploadStatus = explorer.frame.getByTestId("file-upload-status");
-    await expect(fileUploadStatus).toContainText(fileUploadStatusExpected, {
-      timeout: ONE_MINUTE_MS,
-    });
-  });
-
-  test("upload same document twice", async () => {
-    // Create file to upload
-    const TestDataJsonString: string = JSON.stringify(TestData, null, 2);
-    writeFileSync(uploadDocumentFilePath, TestDataJsonString);
-
-    const uploadItemCommandBar = explorer.commandBarButton(CommandBarButton.UploadItem);
-    await uploadItemCommandBar.click();
-
-    // Select file to upload
-    await explorer.frame.setInputFiles("#importFileInput", uploadDocumentFilePath);
-
-    const uploadButton = explorer.frame.getByTestId("Panel/OkButton");
-    await uploadButton.click();
-
-    // Verify upload success message
-    const fileUploadStatusExpected: string = `${partitionCount * itemsPerPartition} created, 0 throttled, 0 errors`;
-    const fileUploadStatus = explorer.frame.getByTestId("file-upload-status");
-    await expect(fileUploadStatus).toContainText(fileUploadStatusExpected, {
-      timeout: ONE_MINUTE_MS,
-    });
-
-    // Select file to upload again
-    await explorer.frame.setInputFiles("#importFileInput", uploadDocumentFilePath);
-    await uploadButton.click();
-
-    // Verify upload failure message
-    const errorIcon = explorer.frame.getByRole("img", { name: "error" });
-    await expect(errorIcon).toBeVisible({ timeout: ONE_MINUTE_MS });
-    await expect(fileUploadStatus).toContainText(
-      `0 created, 0 throttled, ${partitionCount * itemsPerPartition} errors`,
-      {
-        timeout: ONE_MINUTE_MS,
-      },
-    );
-  });
-
-  test("upload invalid json", async () => {
-    // Create file to upload
-    let TestDataJsonString: string = JSON.stringify(TestData, null, 2);
-    // Remove the first '[' so that it becomes invalid json
-    TestDataJsonString = TestDataJsonString.substring(1);
-    writeFileSync(uploadDocumentFilePath, TestDataJsonString);
-
-    const uploadItemCommandBar = explorer.commandBarButton(CommandBarButton.UploadItem);
-    await uploadItemCommandBar.click();
-
-    // Select file to upload
-    await explorer.frame.setInputFiles("#importFileInput", uploadDocumentFilePath);
-
-    const uploadButton = explorer.frame.getByTestId("Panel/OkButton");
-    await uploadButton.click();
-
-    // Verify upload failure message
-    const fileUploadStatusExpected: string = "Unexpected non-whitespace character after JSON";
-    const fileUploadErrorList = explorer.frame.getByLabel("error list");
-    await expect(fileUploadErrorList).toContainText(fileUploadStatusExpected, {
-      timeout: ONE_MINUTE_MS,
-    });
-  });
-});

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();
+  });
+
+  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/computedProperties.spec.ts

@@ -1,103 +0,0 @@
-import { expect, test } from "@playwright/test";
-import * as DataModels from "../../../src/Contracts/DataModels";
-import { CommandBarButton, DataExplorer, ONE_MINUTE_MS, TestAccount } from "../../fx";
-import { createTestSQLContainer, TestContainerContext } from "../../testData";
-
-test.describe("Computed Properties", () => {
-  let context: TestContainerContext = null!;
-  let explorer: DataExplorer = null!;
-
-  test.beforeAll("Create Test Database", async () => {
-    context = await createTestSQLContainer(true);
-  });
-
-  test.beforeEach("Open Settings tab under Scale & Settings", async ({ page }) => {
-    explorer = await DataExplorer.open(page, TestAccount.SQL);
-    const containerNode = await explorer.waitForContainerNode(context.database.id, context.container.id);
-    await containerNode.expand();
-
-    // Click Scale & Settings and open Settings tab
-    await explorer.openScaleAndSettings(context);
-    const computedPropertiesTab = explorer.frame.getByTestId("settings-tab-header/ComputedPropertiesTab");
-    await computedPropertiesTab.click();
-  });
-
-  test.afterAll("Delete Test Database", async () => {
-    await context?.dispose();
-  });
-
-  test("Add valid computed property", async ({ page }) => {
-    await clearComputedPropertiesTextBoxContent({ page });
-
-    // Create computed property
-    const computedProperties: DataModels.ComputedProperties = [
-      {
-        name: "cp_lowerName",
-        query: "SELECT VALUE LOWER(c.name) FROM c",
-      },
-    ];
-    const computedPropertiesString: string = JSON.stringify(computedProperties);
-    await page.keyboard.type(computedPropertiesString);
-
-    // Save changes
-    const saveButton = explorer.commandBarButton(CommandBarButton.Save);
-    await expect(saveButton).toBeEnabled();
-    await saveButton.click();
-    await expect(explorer.getConsoleMessage()).toContainText(`Successfully updated container ${context.container.id}`, {
-      timeout: ONE_MINUTE_MS,
-    });
-  });
-
-  test("Add computed property with invalid query", async ({ page }) => {
-    await clearComputedPropertiesTextBoxContent({ page });
-
-    // Create computed property with no VALUE keyword in query
-    const computedProperties: DataModels.ComputedProperties = [
-      {
-        name: "cp_lowerName",
-        query: "SELECT LOWER(c.name) FROM c",
-      },
-    ];
-    const computedPropertiesString: string = JSON.stringify(computedProperties);
-    await page.keyboard.type(computedPropertiesString);
-
-    // Save changes
-    const saveButton = explorer.commandBarButton(CommandBarButton.Save);
-    await expect(saveButton).toBeEnabled();
-    await saveButton.click();
-    await expect(explorer.getConsoleMessage()).toContainText(`Failed to update container ${context.container.id}`, {
-      timeout: ONE_MINUTE_MS,
-    });
-  });
-
-  test("Add computed property with invalid json", async ({ page }) => {
-    await clearComputedPropertiesTextBoxContent({ page });
-
-    // Create computed property with no VALUE keyword in query
-    const computedProperties: DataModels.ComputedProperties = [
-      {
-        name: "cp_lowerName",
-        query: "SELECT LOWER(c.name) FROM c",
-      },
-    ];
-    const computedPropertiesString: string = JSON.stringify(computedProperties);
-    await page.keyboard.type(computedPropertiesString + "]");
-
-    // Save button should remain disabled due to invalid json
-    const saveButton = explorer.commandBarButton(CommandBarButton.Save);
-    await expect(saveButton).toBeDisabled();
-  });
-
-  const clearComputedPropertiesTextBoxContent = async ({ page }): Promise<void> => {
-    // Get computed properties text box
-    const computedPropertiesTextBox = explorer.frame.getByRole("textbox", { name: "Computed properties" });
-    await computedPropertiesTextBox.waitFor();
-    const computedPropertiesEditor = explorer.frame.getByTestId("computed-properties-editor");
-    await computedPropertiesEditor.click();
-
-    // Clear existing content
-    const isMac: boolean = process.platform === "darwin";
-    await page.keyboard.press(isMac ? "Meta+A" : "Control+A");
-    await page.keyboard.press("Backspace");
-  };
-});

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(true);
+    context = await createTestSQLContainer({ includeTestData: 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(true);
+    context = await createTestSQLContainer({ includeTestData: true });
   });
 
   test.beforeEach("Open Settings tab under Scale & Settings", async ({ page }) => {
@@ -15,7 +15,7 @@ test.describe("Settings under Scale & Settings", () => {
     const containerNode = await explorer.waitForContainerNode(context.database.id, context.container.id);
     await containerNode.expand();
 
-    // Click Scale & Settings and open Settings tab
+    // Click Scale & Settings and open Scale tab
     await explorer.openScaleAndSettings(context);
     const settingsTab = explorer.frame.getByTestId("settings-tab-header/SubSettingsTab");
     await settingsTab.click();
@@ -25,86 +25,46 @@ test.describe("Settings under Scale & Settings", () => {
     await context?.dispose();
   });
 
-  test.describe("Set TTL", () => {
+  test("Update TTL to On (no default)", async () => {
-    test("Update TTL to On (no default)", async () => {
+    const ttlOnNoDefaultRadioButton = explorer.frame.getByRole("radio", { name: "ttl-on-no-default-option" });
-      const ttlOnNoDefaultRadioButton = explorer.frame.getByRole("radio", { name: "ttl-on-no-default-option" });
+    await ttlOnNoDefaultRadioButton.click();
-      await ttlOnNoDefaultRadioButton.click();
 
-      await explorer.commandBarButton(CommandBarButton.Save).click();
+    await explorer.commandBarButton(CommandBarButton.Save).click();
-      await expect(explorer.getConsoleMessage()).toContainText(
+    await expect(explorer.getConsoleMessage()).toContainText(`Successfully updated container ${context.container.id}`, {
-        `Successfully updated container ${context.container.id}`,
+      timeout: ONE_MINUTE_MS,
-        {
-          timeout: ONE_MINUTE_MS,
-        },
-      );
-    });
-
-    test("Update TTL to On (with user entry)", async () => {
-      const ttlOnRadioButton = explorer.frame.getByRole("radio", { name: "ttl-on-option" });
-      await ttlOnRadioButton.click();
-
-      // Enter TTL seconds
-      const ttlInput = explorer.frame.getByTestId("ttl-input");
-      await ttlInput.fill("30000");
-
-      await explorer.commandBarButton(CommandBarButton.Save).click();
-      await expect(explorer.getConsoleMessage()).toContainText(
-        `Successfully updated container ${context.container.id}`,
-        {
-          timeout: ONE_MINUTE_MS,
-        },
-      );
-    });
-
-    test("Update TTL to Off", async () => {
-      // By default TTL is set to off so we need to first set it to On
-      const ttlOnNoDefaultRadioButton = explorer.frame.getByRole("radio", { name: "ttl-on-no-default-option" });
-      await ttlOnNoDefaultRadioButton.click();
-      await explorer.commandBarButton(CommandBarButton.Save).click();
-      await expect(explorer.getConsoleMessage()).toContainText(
-        `Successfully updated container ${context.container.id}`,
-        {
-          timeout: ONE_MINUTE_MS,
-        },
-      );
-
-      // Set it to Off
-      const ttlOffRadioButton = explorer.frame.getByRole("radio", { name: "ttl-off-option" });
-      await ttlOffRadioButton.click();
-
-      await explorer.commandBarButton(CommandBarButton.Save).click();
-      await expect(explorer.getConsoleMessage()).toContainText(
-        `Successfully updated container ${context.container.id}`,
-        {
-          timeout: ONE_MINUTE_MS,
-        },
-      );
     });
   });
 
-  test.describe("Set Geospatial Config", () => {
+  test("Update TTL to On (with user entry)", async () => {
-    test("Set Geospatial Config to Geometry then Geography", async () => {
+    const ttlOnRadioButton = explorer.frame.getByRole("radio", { name: "ttl-on-option" });
-      const geometryRadioButton = explorer.frame.getByRole("radio", { name: "geometry-option" });
+    await ttlOnRadioButton.click();
-      await geometryRadioButton.click();
 
-      await explorer.commandBarButton(CommandBarButton.Save).click();
+    // Enter TTL seconds
-      await expect(explorer.getConsoleMessage()).toContainText(
+    const ttlInput = explorer.frame.getByTestId("ttl-input");
-        `Successfully updated container ${context.container.id}`,
+    await ttlInput.fill("30000");
-        {
-          timeout: ONE_MINUTE_MS,
-        },
-      );
 
-      const geographyRadioButton = explorer.frame.getByRole("radio", { name: "geography-option" });
+    await explorer.commandBarButton(CommandBarButton.Save).click();
-      await geographyRadioButton.click();
+    await expect(explorer.getConsoleMessage()).toContainText(`Successfully updated container ${context.container.id}`, {
+      timeout: ONE_MINUTE_MS,
+    });
+  });
 
-      await explorer.commandBarButton(CommandBarButton.Save).click();
+  test("Update TTL to Off", async () => {
-      await expect(explorer.getConsoleMessage()).toContainText(
+    // By default TTL is set to off so we need to first set it to On
-        `Successfully updated container ${context.container.id}`,
+    const ttlOnNoDefaultRadioButton = explorer.frame.getByRole("radio", { name: "ttl-on-no-default-option" });
-        {
+    await ttlOnNoDefaultRadioButton.click();
-          timeout: ONE_MINUTE_MS,
+    await explorer.commandBarButton(CommandBarButton.Save).click();
-        },
+    await expect(explorer.getConsoleMessage()).toContainText(`Successfully updated container ${context.container.id}`, {
-      );
+      timeout: ONE_MINUTE_MS,
+    });
+
+    // Set it to Off
+    const ttlOffRadioButton = explorer.frame.getByRole("radio", { name: "ttl-off-option" });
+    await ttlOffRadioButton.click();
+
+    await explorer.commandBarButton(CommandBarButton.Save).click();
+    await expect(explorer.getConsoleMessage()).toContainText(`Successfully updated container ${context.container.id}`, {
+      timeout: ONE_MINUTE_MS,
     });
   });
 });

test/testData.ts

@@ -37,35 +37,27 @@ export interface PartitionKey {
   value: string | null;
 }
 
-export const partitionCount = 4;
+const partitionCount = 4;
 
 // If we increase this number, we need to split bulk creates into multiple batches.
 // Bulk operations are limited to 100 items per partition.
-export const itemsPerPartition = 100;
+const itemsPerPartition = 100;
 
 function createTestItems(): TestItem[] {
   const items: TestItem[] = [];
   for (let i = 0; i < partitionCount; i++) {
     for (let j = 0; j < itemsPerPartition; j++) {
-      const id = createSafeRandomString(32);
+      const id = crypto.randomBytes(32).toString("base64");
       items.push({
         id,
         partitionKey: `partition_${i}`,
-        randomData: createSafeRandomString(32),
+        randomData: crypto.randomBytes(32).toString("base64"),
       });
     }
   }
   return items;
 }
 
-// Document IDs cannot contain '/', '\', or '#'
-function createSafeRandomString(byteLength: number): string {
-  return crypto
-    .randomBytes(byteLength)
-    .toString("base64")
-    .replace(/[/\\#]/g, "_");
-}
-
 export const TestData: TestItem[] = createTestItems();
 
 export class TestContainerContext {
@@ -82,8 +74,18 @@ export class TestContainerContext {
   }
 }
 
-export async function createTestSQLContainer(includeTestData?: boolean) {
+type createTestSqlContainerConfig = {
-  const databaseId = generateUniqueName("db");
+  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);
@@ -112,7 +114,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;