- {label}
+
+ {label}
+
{tooltip && {tooltip} }
-
+`;
+
+exports[`LoadingOverlay should render loading overlay when isLoading is true 1`] = `
+
+
+
+
+ This is a very long loading message that might span multiple lines and should still render correctly in the loading overlay component
+
+
+
+`;
+
+exports[`LoadingOverlay should render loading overlay with custom label 1`] = `
+
+
+
+
+ Loading...
+
+
+
+`;
+
+exports[`LoadingOverlay should render loading overlay with empty label 1`] = `
+
+
+
+
+ Processing your request...
+
+
+
+`;
diff --git a/src/Contracts/MessageTypes.ts b/src/Contracts/MessageTypes.ts
index 658499525..70c431501 100644
--- a/src/Contracts/MessageTypes.ts
+++ b/src/Contracts/MessageTypes.ts
@@ -50,4 +50,5 @@ export enum MessageTypes {
OpenCESCVAFeedbackBlade,
ActivateTab,
OpenContainerCopyFeedbackBlade,
+ UpdateTheme,
}
diff --git a/src/Contracts/ViewModels.ts b/src/Contracts/ViewModels.ts
index 99ff76f9d..a84afe9c2 100644
--- a/src/Contracts/ViewModels.ts
+++ b/src/Contracts/ViewModels.ts
@@ -7,7 +7,7 @@ import {
TriggerDefinition,
UserDefinedFunctionDefinition,
} from "@azure/cosmos";
-import Explorer from "../Explorer/Explorer";
+import type Explorer from "../Explorer/Explorer";
import { ConsoleData } from "../Explorer/Menus/NotificationConsole/ConsoleData";
import { CassandraTableKey, CassandraTableKeys } from "../Explorer/Tables/TableDataClient";
import ConflictId from "../Explorer/Tree/ConflictId";
@@ -447,6 +447,9 @@ export interface DataExplorerInputsFrame {
aadToken?: string;
containerCopyEnabled?: boolean;
sessionId?: string;
+ theme?: {
+ mode: number;
+ };
}
export interface SelfServeFrameInputs {
@@ -480,3 +483,6 @@ export interface DropdownOption
+
+
+
+CopyJobCommandBar
;
+ };
+ MockCopyJobCommandBar.displayName = "CopyJobCommandBar";
+ return MockCopyJobCommandBar;
+});
+
+jest.mock("./MonitorCopyJobs/MonitorCopyJobs", () => {
+ const React = jest.requireActual("react");
+ const MockMonitorCopyJobs = React.forwardRef((_props: any, ref: any) => {
+ React.useImperativeHandle(ref, () => ({
+ refreshJobList: jest.fn(),
+ }));
+ return MonitorCopyJobs
;
+ });
+ MockMonitorCopyJobs.displayName = "MonitorCopyJobs";
+ return MockMonitorCopyJobs;
+});
+
+jest.mock("./MonitorCopyJobs/MonitorCopyJobRefState", () => ({
+ MonitorCopyJobsRefState: {
+ getState: jest.fn(() => ({
+ setRef: jest.fn(),
+ })),
+ },
+}));
+
+describe("ContainerCopyPanel", () => {
+ let mockExplorer: Explorer;
+ let mockSetRef: jest.Mock;
+
+ beforeEach(() => {
+ mockExplorer = {} as Explorer;
+
+ mockSetRef = jest.fn();
+ (MonitorCopyJobsRefState.getState as jest.Mock).mockReturnValue({
+ setRef: mockSetRef,
+ });
+ });
+
+ afterEach(() => {
+ jest.clearAllMocks();
+ });
+
+ it("renders the component with correct structure", () => {
+ render(Test Child
+ Component 2
;
+ };
+
+ render(
+ {content}
;
+ };
+ MockInfoTooltip.displayName = "MockInfoTooltip";
+ return MockInfoTooltip;
+});
+
+jest.mock("../Components/PopoverContainer", () => {
+ const MockPopoverContainer = ({
+ isLoading,
+ visible,
+ title,
+ onCancel,
+ onPrimary,
+ children,
+ }: {
+ isLoading?: boolean;
+ visible: boolean;
+ title: string;
+ onCancel: () => void;
+ onPrimary: () => void;
+ children: React.ReactNode;
+ }) => {
+ if (!visible) {
+ return null;
+ }
+ return (
+
+
+ );
+ };
+ MockPopoverContainer.displayName = "MockPopoverContainer";
+ return MockPopoverContainer;
+});
+
+jest.mock("./hooks/useToggle", () => {
+ return jest.fn();
+});
+
+import { Subscription } from "Contracts/DataModels";
+import { CopyJobMigrationType } from "Explorer/ContainerCopy/Enums/CopyJobEnums";
+import { logError } from "../../../../../Common/Logger";
+import { assignRole, RoleAssignmentType } from "../../../../../Utils/arm/RbacUtils";
+import { getAccountDetailsFromResourceId } from "../../../CopyJobUtils";
+import useToggle from "./hooks/useToggle";
+
+describe("AddReadPermissionToDefaultIdentity Component", () => {
+ const mockUseToggle = useToggle as jest.MockedFunction{title}
+ {children}
+
+
+
+ Loading...
+
+ );
+ };
+ MockShimmerTree.displayName = "MockShimmerTree";
+ return MockShimmerTree;
+});
+
+jest.mock("./AddManagedIdentity", () => {
+ const MockAddManagedIdentity = () => {
+ return Add Managed Identity Component
;
+ };
+ MockAddManagedIdentity.displayName = "MockAddManagedIdentity";
+ return MockAddManagedIdentity;
+});
+
+jest.mock("./AddReadPermissionToDefaultIdentity", () => {
+ const MockAddReadPermissionToDefaultIdentity = () => {
+ return Add Read Permission Component
;
+ };
+ MockAddReadPermissionToDefaultIdentity.displayName = "MockAddReadPermissionToDefaultIdentity";
+ return MockAddReadPermissionToDefaultIdentity;
+});
+
+jest.mock("./DefaultManagedIdentity", () => {
+ const MockDefaultManagedIdentity = () => {
+ return Default Managed Identity Component
;
+ };
+ MockDefaultManagedIdentity.displayName = "MockDefaultManagedIdentity";
+ return MockDefaultManagedIdentity;
+});
+
+jest.mock("./OnlineCopyEnabled", () => {
+ const MockOnlineCopyEnabled = () => {
+ return Online Copy Enabled Component
;
+ };
+ MockOnlineCopyEnabled.displayName = "MockOnlineCopyEnabled";
+ return MockOnlineCopyEnabled;
+});
+
+jest.mock("./PointInTimeRestore", () => {
+ const MockPointInTimeRestore = () => {
+ return Point In Time Restore Component
;
+ };
+ MockPointInTimeRestore.displayName = "MockPointInTimeRestore";
+ return MockPointInTimeRestore;
+});
+
+jest.mock("../../../../../../images/successfulPopup.svg", () => "checkmark-icon");
+jest.mock("../../../../../../images/warning.svg", () => "warning-icon");
+
+describe("AssignPermissions Component", () => {
+ const mockExplorer = {} as any;
+
+ const createMockCopyJobState = (overrides: PartialAdd Managed Identity Component
,
+ disabled: false,
+ completed: true,
+ },
+ {
+ id: "readPermissionAssigned",
+ title: "Read Permission Assigned",
+ Component: () => Add Read Permission Component
,
+ disabled: false,
+ completed: false,
+ },
+ ],
+ },
+ ]);
+
+ const copyJobState = createMockCopyJobState();
+ const { container } = renderWithContext(copyJobState);
+
+ expect(container).toMatchSnapshot();
+ });
+
+ it("should render online migration specific groups", async () => {
+ const mockUsePermissionSections = (await import("./hooks/usePermissionsSection")).default as jest.Mock;
+ mockUsePermissionSections.mockReturnValue([
+ {
+ id: "onlineConfigs",
+ title: "Online Configuration",
+ description: "Configure settings for online migration",
+ sections: [
+ {
+ id: "pointInTimeRestore",
+ title: "Point In Time Restore",
+ Component: () => Point In Time Restore Component
,
+ disabled: false,
+ completed: true,
+ },
+ {
+ id: "onlineCopyEnabled",
+ title: "Online Copy Enabled",
+ Component: () => Online Copy Enabled Component
,
+ disabled: false,
+ completed: false,
+ },
+ ],
+ },
+ ]);
+
+ const copyJobState = createMockCopyJobState({
+ migrationType: CopyJobMigrationType.Online,
+ });
+ const { container } = renderWithContext(copyJobState);
+
+ expect(container).toMatchSnapshot();
+ });
+
+ it("should render multiple permission groups", async () => {
+ const mockUsePermissionSections = (await import("./hooks/usePermissionsSection")).default as jest.Mock;
+ mockUsePermissionSections.mockReturnValue([
+ {
+ id: "crossAccountConfigs",
+ title: "Cross Account Configuration",
+ description: "Configure permissions for cross-account copy",
+ sections: [
+ {
+ id: "addManagedIdentity",
+ title: "Add Managed Identity",
+ Component: () => Add Managed Identity Component
,
+ disabled: false,
+ completed: true,
+ },
+ ],
+ },
+ {
+ id: "onlineConfigs",
+ title: "Online Configuration",
+ description: "Configure settings for online migration",
+ sections: [
+ {
+ id: "onlineCopyEnabled",
+ title: "Online Copy Enabled",
+ Component: () => Online Copy Enabled Component
,
+ disabled: false,
+ completed: false,
+ },
+ ],
+ },
+ ]);
+
+ const copyJobState = createMockCopyJobState({
+ migrationType: CopyJobMigrationType.Online,
+ });
+ const { container, getByText } = renderWithContext(copyJobState);
+
+ expect(getByText("Cross Account Configuration")).toBeInTheDocument();
+ expect(getByText("Online Configuration")).toBeInTheDocument();
+ expect(container).toMatchSnapshot();
+ });
+ });
+
+ describe("Accordion Behavior", () => {
+ it("should render accordion sections with proper status icons", async () => {
+ const mockUsePermissionSections = (await import("./hooks/usePermissionsSection")).default as jest.Mock;
+ mockUsePermissionSections.mockReturnValue([
+ {
+ id: "testGroup",
+ title: "Test Group",
+ description: "Test Description",
+ sections: [
+ {
+ id: "completedSection",
+ title: "Completed Section",
+ Component: () => Completed Component
,
+ disabled: false,
+ completed: true,
+ },
+ {
+ id: "incompleteSection",
+ title: "Incomplete Section",
+ Component: () => Incomplete Component
,
+ disabled: false,
+ completed: false,
+ },
+ {
+ id: "disabledSection",
+ title: "Disabled Section",
+ Component: () => Disabled Component
,
+ disabled: true,
+ completed: false,
+ },
+ ],
+ },
+ ]);
+
+ const copyJobState = createMockCopyJobState();
+ const { container, getByText, getAllByRole } = renderWithContext(copyJobState);
+
+ expect(getByText("Completed Section")).toBeInTheDocument();
+ expect(getByText("Incomplete Section")).toBeInTheDocument();
+ expect(getByText("Disabled Section")).toBeInTheDocument();
+
+ const images = getAllByRole("img");
+ expect(images.length).toBeGreaterThan(0);
+
+ expect(container).toMatchSnapshot();
+ });
+ });
+
+ describe("Edge Cases", () => {
+ it("should handle missing account names", () => {
+ const copyJobState = createMockCopyJobState({
+ source: {
+ subscription: { subscriptionId: "source-sub" } as any,
+ account: { id: "source-account" } as any,
+ databaseId: "source-db",
+ containerId: "source-container",
+ },
+ });
+
+ const { container } = renderWithContext(copyJobState);
+ expect(container).toMatchSnapshot();
+ });
+
+ it("should calculate correct indent levels for offline migration", () => {
+ const copyJobState = createMockCopyJobState({
+ migrationType: CopyJobMigrationType.Offline,
+ });
+
+ const { container } = renderWithContext(copyJobState);
+ expect(container).toMatchSnapshot();
+ });
+
+ it("should calculate correct indent levels for online migration", () => {
+ const copyJobState = createMockCopyJobState({
+ migrationType: CopyJobMigrationType.Online,
+ });
+
+ const { container } = renderWithContext(copyJobState);
+ expect(container).toMatchSnapshot();
+ });
+ });
+});
diff --git a/src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/DefaultManagedIdentity.test.tsx b/src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/DefaultManagedIdentity.test.tsx
new file mode 100644
index 000000000..93418859f
--- /dev/null
+++ b/src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/DefaultManagedIdentity.test.tsx
@@ -0,0 +1,355 @@
+import "@testing-library/jest-dom";
+import { fireEvent, render, screen } from "@testing-library/react";
+import React from "react";
+import { updateDefaultIdentity } from "../../../../../Utils/arm/identityUtils";
+import ContainerCopyMessages from "../../../ContainerCopyMessages";
+import { CopyJobContext } from "../../../Context/CopyJobContext";
+import DefaultManagedIdentity from "./DefaultManagedIdentity";
+
+jest.mock("./hooks/useManagedIdentity");
+jest.mock("./hooks/useToggle");
+
+jest.mock("../../../../../Utils/arm/identityUtils", () => ({
+ updateDefaultIdentity: jest.fn(),
+}));
+
+jest.mock("../Components/InfoTooltip", () => {
+ const MockInfoTooltip = ({ content }: { content: React.ReactNode }) => {
+ return {content}
;
+ };
+ MockInfoTooltip.displayName = "MockInfoTooltip";
+ return MockInfoTooltip;
+});
+
+jest.mock("../Components/PopoverContainer", () => {
+ const MockPopoverContainer = ({
+ children,
+ isLoading,
+ visible,
+ title,
+ onCancel,
+ onPrimary,
+ }: {
+ children: React.ReactNode;
+ isLoading: boolean;
+ visible: boolean;
+ title: string;
+ onCancel: () => void;
+ onPrimary: () => void;
+ }) => {
+ if (!visible) {
+ return null;
+ }
+ return (
+
+
+ );
+ };
+ MockPopoverContainer.displayName = "MockPopoverContainer";
+ return MockPopoverContainer;
+});
+
+import { DatabaseAccount } from "Contracts/DataModels";
+import { CopyJobContextProviderType } from "Explorer/ContainerCopy/Types/CopyJobTypes";
+import useManagedIdentity from "./hooks/useManagedIdentity";
+import useToggle from "./hooks/useToggle";
+
+const mockUseManagedIdentity = useManagedIdentity as jest.MockedFunction{title}
+ {children}
+ {isLoading ? "Loading" : "Not Loading"}
+
+
+
- {ContainerCopyMessages.defaultManagedIdentity.description(copyJobState?.target?.account.name)}
+ {ContainerCopyMessages.defaultManagedIdentity.description(copyJobState?.target?.account?.name)}
{label}
: null;
+ };
+ MockLoadingOverlay.displayName = "MockLoadingOverlay";
+ return MockLoadingOverlay;
+});
+
+const mockFetchDatabaseAccount = fetchDatabaseAccount as jest.MockedFunction
+
+ A system-assigned managed identity is restricted to one per resource and is tied to the lifecycle of this resource. Once enabled, you can grant permissions to the managed identity by using Azure role-based access control (Azure RBAC). The managed identity is authenticated with Microsoft Entra ID, so you don’t have to store any credentials in code.
+
+
+ Learn more about Managed identities.
+
+
+
+
+`;
+
+exports[`AddManagedIdentity Snapshot Tests renders loading state 1`] = `
+
+
+
+
+ 
+
+
+
+ Learn more about
+
+
+ Managed Identities.
+
+
+
+
+
+
+
+
+
+
+
+ A system-assigned managed identity is restricted to one per resource and is tied to the lifecycle of this resource. Once enabled, you can grant permissions to the managed identity by using Azure role-based access control (Azure RBAC). The managed identity is authenticated with Microsoft Entra ID, so you don’t have to store any credentials in code.
+
+
+ Learn more about Managed identities.
+
+
+
+
+`;
+
+exports[`AddManagedIdentity Snapshot Tests renders with toggle on and popover visible 1`] = `
+
+
+
+
+
+
+
+
+ Learn more about
+
+
+ Managed Identities.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Enable system assigned managed identity
+
+
+ Enable system-assigned managed identity on the test-target-account. To confirm, click the "Yes" button.
+
+
+
+
+
+ Please wait while we process your request...
+
+
+
+
+
+
+
+ A system-assigned managed identity is restricted to one per resource and is tied to the lifecycle of this resource. Once enabled, you can grant permissions to the managed identity by using Azure role-based access control (Azure RBAC). The managed identity is authenticated with Microsoft Entra ID, so you don’t have to store any credentials in code.
+
+
+ Learn more about Managed identities.
+
+
+
+
+`;
diff --git a/src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/__snapshots__/AddReadPermissionToDefaultIdentity.test.tsx.snap b/src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/__snapshots__/AddReadPermissionToDefaultIdentity.test.tsx.snap
new file mode 100644
index 000000000..e461c2058
--- /dev/null
+++ b/src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/__snapshots__/AddReadPermissionToDefaultIdentity.test.tsx.snap
@@ -0,0 +1,398 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AddReadPermissionToDefaultIdentity Component Edge Cases should handle missing source account 1`] = `
+
+
+
+
+
+
+
+
+ Learn more about
+
+
+ Managed Identities.
+
+
+
+
+
+
+
+
+
+
+
+ Enable system assigned managed identity
+
+
+ Enable system-assigned managed identity on the test-target-account. To confirm, click the "Yes" button.
+
+
+
+
+
+
+
+
+`;
+
+exports[`AddReadPermissionToDefaultIdentity Component Edge Cases should handle missing target account identity 1`] = `
+
+
+ To allow data copy from source to the destination container, provide read access of the source account to the default identity of the destination account.
+
+
+
+
+ Learn more about
+
+
+ Read permissions.
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`AddReadPermissionToDefaultIdentity Component Rendering should render correctly when sourceReadAccessFromTarget is true 1`] = `
+
+
+ To allow data copy from source to the destination container, provide read access of the source account to the default identity of the destination account.
+
+
+
+
+ Learn more about
+
+
+ Read permissions.
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`AddReadPermissionToDefaultIdentity Component Rendering should render correctly when toggle is on 1`] = `
+
+
+ To allow data copy from source to the destination container, provide read access of the source account to the default identity of the destination account.
+
+
+
+
+ Learn more about
+
+
+ Read permissions.
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`AddReadPermissionToDefaultIdentity Component Rendering should render correctly with default state 1`] = `
+
+
+ To allow data copy from source to the destination container, provide read access of the source account to the default identity of the destination account.
+
+
+
+
+ Learn more about
+
+
+ Read permissions.
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Read permissions assigned to default identity.
+
+
+ Assign read permissions of the source account to the default identity of the destination account. To confirm click the “Yes” button.
+
+
+
+
+
+`;
+
+exports[`AddReadPermissionToDefaultIdentity Component Rendering should render correctly with different context states 1`] = `
+
+
+ To allow data copy from source to the destination container, provide read access of the source account to the default identity of the destination account.
+
+
+
+
+ Learn more about
+
+
+ Read permissions.
+
+
+
+
+
+
+
+
+
+
+
+
+`;
diff --git a/src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/__snapshots__/AssignPermissions.test.tsx.snap b/src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/__snapshots__/AssignPermissions.test.tsx.snap
new file mode 100644
index 000000000..a6d76c3f3
--- /dev/null
+++ b/src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/__snapshots__/AssignPermissions.test.tsx.snap
@@ -0,0 +1,1301 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AssignPermissions Component Accordion Behavior should render accordion sections with proper status icons 1`] = `
+
+
+ To allow data copy from source to the destination container, provide read access of the source account to the default identity of the destination account.
+
+
+
+
+ Learn more about
+
+
+ Read permissions.
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`AssignPermissions Component Edge Cases should calculate correct indent levels for offline migration 1`] = `
+
+
+ To copy data from the source to the destination container, ensure that the managed identity of the destination account has read access to the source account by completing the following steps.
+
+
+
+
+
+
+
+
+ Test Group
+
+
+ Test Description
+
+
+
+
+
+`;
+
+exports[`AssignPermissions Component Edge Cases should calculate correct indent levels for online migration 1`] = `
+
+
+ To copy data from the source to the destination container, ensure that the managed identity of the destination account has read access to the source account by completing the following steps.
+
+
+
+
+
+
+
+
+ Test Group
+
+
+ Test Description
+
+
+
+
+
+`;
+
+exports[`AssignPermissions Component Edge Cases should handle missing account names 1`] = `
+
+
+ Follow the steps below to enable online copy on your "Source Account" account.
+
+
+
+
+
+
+
+
+ Test Group
+
+
+ Test Description
+
+
+
+
+
+`;
+
+exports[`AssignPermissions Component Permission Groups should render multiple permission groups 1`] = `
+
+
+ To copy data from the source to the destination container, ensure that the managed identity of the destination account has read access to the source account by completing the following steps.
+
+
+
+
+
+
+
+
+ Test Group
+
+
+ Test Description
+
+
+
+
+
+`;
+
+exports[`AssignPermissions Component Permission Groups should render online migration specific groups 1`] = `
+
+
+ Follow the steps below to enable online copy on your "Source Account" account.
+
+
+
+
+
+
+
+
+ Cross Account Configuration
+
+
+ Configure permissions for cross-account copy
+
+
+
+
+
+
+
+ Online Configuration
+
+
+ Configure settings for online migration
+
+
+
+
+
+`;
+
+exports[`AssignPermissions Component Permission Groups should render permission groups when available 1`] = `
+
+
+ Follow the steps below to enable online copy on your "Source Account" account.
+
+
+
+
+
+
+
+
+ Online Configuration
+
+
+ Configure settings for online migration
+
+
+
+
+
+`;
+
+exports[`AssignPermissions Component Rendering should render without crashing with offline migration 1`] = `
+
+
+ To copy data from the source to the destination container, ensure that the managed identity of the destination account has read access to the source account by completing the following steps.
+
+
+
+
+
+
+
+
+ Cross Account Configuration
+
+
+ Configure permissions for cross-account copy
+
+
+
+
+
+`;
+
+exports[`AssignPermissions Component Rendering should render without crashing with online migration 1`] = `
+
+
+ To copy data from the source to the destination container, ensure that the managed identity of the destination account has read access to the source account by completing the following steps.
+
+
+
+ Loading...
+
+
+
+`;
diff --git a/src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/__snapshots__/DefaultManagedIdentity.test.tsx.snap b/src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/__snapshots__/DefaultManagedIdentity.test.tsx.snap
new file mode 100644
index 000000000..631e60100
--- /dev/null
+++ b/src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/__snapshots__/DefaultManagedIdentity.test.tsx.snap
@@ -0,0 +1,369 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DefaultManagedIdentity Edge Cases should handle missing account name gracefully 1`] = `
+
+
+ To copy data from the source to the destination container, ensure that the managed identity of the destination account has read access to the source account by completing the following steps.
+
+
+
+ Loading...
+
+
+
+`;
+
+exports[`DefaultManagedIdentity Edge Cases should handle null account 1`] = `
+
+
+
+ Set the system-assigned managed identity as default for "" by switching it on.
+
+
+
+
+ Learn more about
+
+
+ Default Managed Identities.
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`DefaultManagedIdentity Loading States should render loading state snapshot 1`] = `
+
+
+
+ Set the system-assigned managed identity as default for "undefined" by switching it on.
+
+
+
+
+ Learn more about
+
+
+ Default Managed Identities.
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`DefaultManagedIdentity Rendering should render correctly with default state 1`] = `
+
+
+
+ Set the system-assigned managed identity as default for "test-cosmos-account" by switching it on.
+
+
+
+
+ Learn more about
+
+
+ Default Managed Identities.
+
+
+
+
+
+
+
+
+
+
+
+
+ System assigned managed identity set as default
+
+
+ Assign the system-assigned managed identity as the default for "test-cosmos-account". To confirm, click the "Yes" button.
+
+
+ Loading
+
+
+
+
+
+`;
+
+exports[`DefaultManagedIdentity Toggle Interactions should render toggle with checked state when toggle is true 1`] = `
+
+
+
+ Set the system-assigned managed identity as default for "test-cosmos-account" by switching it on.
+
+
+
+
+ Learn more about
+
+
+ Default Managed Identities.
+
+
+
+
+
+
+
+
+
+
+
+`;
diff --git a/src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/__snapshots__/OnlineCopyEnabled.test.tsx.snap b/src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/__snapshots__/OnlineCopyEnabled.test.tsx.snap
new file mode 100644
index 000000000..bc2151ac8
--- /dev/null
+++ b/src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/__snapshots__/OnlineCopyEnabled.test.tsx.snap
@@ -0,0 +1,193 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`OnlineCopyEnabled Edge Cases should handle account with existing online copy capability 1`] = `
+
+
+
+ Set the system-assigned managed identity as default for "test-cosmos-account" by switching it on.
+
+
+
+
+ Learn more about
+
+
+ Default Managed Identities.
+
+
+
+
+
+
+
+
+
+
+
+
+ System assigned managed identity set as default
+
+
+ Assign the system-assigned managed identity as the default for "test-cosmos-account". To confirm, click the "Yes" button.
+
+
+ Not Loading
+
+
+
+
+
+`;
+
+exports[`OnlineCopyEnabled Edge Cases should handle missing account name gracefully 1`] = `
+
+
+
+
+
+
+
+
+`;
+
+exports[`OnlineCopyEnabled Edge Cases should handle null account 1`] = `
+
+
+
+
+
+
+
+
+`;
+
+exports[`OnlineCopyEnabled Rendering should render correctly with initial state 1`] = `
+
+
+
+
+
+
+
+
+`;
diff --git a/src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/__snapshots__/PointInTimeRestore.test.tsx.snap b/src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/__snapshots__/PointInTimeRestore.test.tsx.snap
new file mode 100644
index 000000000..83fe4df8e
--- /dev/null
+++ b/src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/__snapshots__/PointInTimeRestore.test.tsx.snap
@@ -0,0 +1,333 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PointInTimeRestore Edge Cases should handle missing account ID gracefully 1`] = ``;
+
+exports[`PointInTimeRestore Edge Cases should handle missing source account gracefully 1`] = ``;
+
+exports[`PointInTimeRestore Initial Render should render correctly with default props 1`] = `
+
+
+
+
+
+
+
+
+`;
+
+exports[`PointInTimeRestore Initial Render should render with empty account name gracefully 1`] = `
+
+
+
+ To facilitate online container copy jobs, please update your "test-account" backup policy from periodic to continuous backup. Enabling continuous backup is required for this functionality.
+
+
+
+
+
+
+
+
+
+ Learn more about
+
+
+ Continuous Backup
+
+
+
+
+
+
+
+
+`;
+
+exports[`PointInTimeRestore Snapshots should match snapshot in loading state 1`] = `
+
+
+
+ To facilitate online container copy jobs, please update your "" backup policy from periodic to continuous backup. Enabling continuous backup is required for this functionality.
+
+
+
+
+
+
+
+
+
+ Learn more about
+
+
+ Continuous Backup
+
+
+
+
+
+
+
+
+`;
+
+exports[`PointInTimeRestore Snapshots should match snapshot with refresh button 1`] = `
+
+
+
+
+
+
+
+
+ Please wait while we process your request...
+
+
+ To facilitate online container copy jobs, please update your "test-account" backup policy from periodic to continuous backup. Enabling continuous backup is required for this functionality.
+
+
+
+
+
+
+
+
+
+ Learn more about
+
+
+ Continuous Backup
+
+
+
+
+
+
+
+
+`;
diff --git a/src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/hooks/useManagedIdentity.test.tsx b/src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/hooks/useManagedIdentity.test.tsx
new file mode 100644
index 000000000..2a91c8c69
--- /dev/null
+++ b/src/Explorer/ContainerCopy/CreateCopyJob/Screens/AssignPermissions/hooks/useManagedIdentity.test.tsx
@@ -0,0 +1,255 @@
+import "@testing-library/jest-dom";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import React from "react";
+import { logError } from "../../../../../../Common/Logger";
+import { DatabaseAccount } from "../../../../../../Contracts/DataModels";
+import Explorer from "../../../../../Explorer";
+import CopyJobContextProvider, { useCopyJobContext } from "../../../../Context/CopyJobContext";
+import { getAccountDetailsFromResourceId } from "../../../../CopyJobUtils";
+import useManagedIdentity from "./useManagedIdentity";
+
+jest.mock("../../../../CopyJobUtils");
+jest.mock("../../../../../../Common/Logger");
+
+const mockGetAccountDetailsFromResourceId = getAccountDetailsFromResourceId as jest.MockedFunction<
+ typeof getAccountDetailsFromResourceId
+>;
+const mockLogError = logError as jest.MockedFunction
+
+
+ To facilitate online container copy jobs, please update your "test-account" backup policy from periodic to continuous backup. Enabling continuous backup is required for this functionality.
+
+
+
+
+
+
+
+
+
+ Learn more about
+
+
+ Continuous Backup
+
+
+
+
+
+
+
+
+
+ );
+};
+
+const TestWrapper: React.FC{loading ? "true" : "false"}
+ {contextError && {contextError}
}
+ AddManagedIdentity
;
+ };
+ MockAddManagedIdentity.displayName = "MockAddManagedIdentity";
+ return MockAddManagedIdentity;
+});
+
+jest.mock("../AddReadPermissionToDefaultIdentity", () => {
+ const MockAddReadPermissionToDefaultIdentity = () => {
+ return AddReadPermissionToDefaultIdentity
;
+ };
+ MockAddReadPermissionToDefaultIdentity.displayName = "MockAddReadPermissionToDefaultIdentity";
+ return MockAddReadPermissionToDefaultIdentity;
+});
+
+jest.mock("../DefaultManagedIdentity", () => {
+ const MockDefaultManagedIdentity = () => {
+ return DefaultManagedIdentity
;
+ };
+ MockDefaultManagedIdentity.displayName = "MockDefaultManagedIdentity";
+ return MockDefaultManagedIdentity;
+});
+
+jest.mock("../OnlineCopyEnabled", () => {
+ const MockOnlineCopyEnabled = () => {
+ return OnlineCopyEnabled
;
+ };
+ MockOnlineCopyEnabled.displayName = "MockOnlineCopyEnabled";
+ return MockOnlineCopyEnabled;
+});
+
+jest.mock("../PointInTimeRestore", () => {
+ const MockPointInTimeRestore = () => {
+ return PointInTimeRestore
;
+ };
+ MockPointInTimeRestore.displayName = "MockPointInTimeRestore";
+ return MockPointInTimeRestore;
+});
+
+const mockedRbacUtils = RbacUtils as jest.Mocked
+
+ );
+};
+
+describe("usePermissionsSection", () => {
+ let mockValidationCache: Map{result.length}
+ {result.map((group) => (
+
+
+ ))}
+ {group.title}
+{group.description}
+ {group.sections.map((section) => ( +
+
+ {section.completed?.toString() || "undefined"}
+
+ {section.disabled.toString()}
+
+ ))}
+
+ {state ? "true" : "false"}
+
+
+
+
+ );
+};
+
+describe("useToggle hook", () => {
+ it("should initialize with false as default", () => {
+ render(
+ {state ? "true" : "false"}
+
+
+ );
+ };
+
+ render({mockChildContent}
+
+ Nested content
+
+
+ );
+
+ render(
+ {mockChildContent}
+ {mockChildContent}
+ {mockChildContent}
+ {mockChildContent}
+ {mockChildContent}
+ {mockChildContent}
+ {mockChildContent}
+
+
+
+
+
+
+
+ Section Title
+Section description goes here
+
+ Important: This is a JSX tooltip
+
+ );
+
+ const { container } = render(Test content
,
+ };
+
+ beforeEach(() => {
+ jest.clearAllMocks();
+ });
+
+ describe("Rendering", () => {
+ it("should render correctly when visible", () => {
+ const { container } = render(
+
+ );
+ const { container } = render(First paragraph
+Second paragraph
+
+
+ );
+ render(Heading
+-
+
- Item 1 +
- Item 2 +
+
+`;
+
+exports[`FieldRow Snapshot Testing matches snapshot with custom className 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`FieldRow Snapshot Testing matches snapshot with empty label 1`] = `
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`FieldRow Snapshot Testing matches snapshot with label only 1`] = `
+
+
+
+
+
+`;
+
+exports[`FieldRow Snapshot Testing matches snapshot with minimal props 1`] = `
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`FieldRow Snapshot Testing matches snapshot with no label 1`] = `
+
+
+
+
+
+
+`;
diff --git a/src/Explorer/ContainerCopy/CreateCopyJob/Screens/Components/__snapshots__/InfoTooltip.test.tsx.snap b/src/Explorer/ContainerCopy/CreateCopyJob/Screens/Components/__snapshots__/InfoTooltip.test.tsx.snap
new file mode 100644
index 000000000..8b79c2b74
--- /dev/null
+++ b/src/Explorer/ContainerCopy/CreateCopyJob/Screens/Components/__snapshots__/InfoTooltip.test.tsx.snap
@@ -0,0 +1,60 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`InfoTooltip Component Rendering should render tooltip with image when content is provided 1`] = `
+
+
+
+
+ + Section Title +
++ Section description goes here +
+
+
+`;
+
+exports[`InfoTooltip Component Rendering should render with JSX element content 1`] = `
+
+
+
+
+
+
+ Test tooltip content
+
+
+
+`;
diff --git a/src/Explorer/ContainerCopy/CreateCopyJob/Screens/Components/__snapshots__/PopoverContainer.test.tsx.snap b/src/Explorer/ContainerCopy/CreateCopyJob/Screens/Components/__snapshots__/PopoverContainer.test.tsx.snap
new file mode 100644
index 000000000..978f38f5b
--- /dev/null
+++ b/src/Explorer/ContainerCopy/CreateCopyJob/Screens/Components/__snapshots__/PopoverContainer.test.tsx.snap
@@ -0,0 +1,552 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PopoverMessage Component Edge Cases should handle empty string title 1`] = `
+
+
+
+
+
+
+
+
+
+ Important:
+
+ This is a JSX tooltip
+
+
+
+`;
+
+exports[`PopoverMessage Component Edge Cases should handle null children 1`] = `
+
+
+
+
+
+ Test content
+
+
+
+
+
+
+
+
+`;
+
+exports[`PopoverMessage Component Edge Cases should handle undefined children 1`] = `
+
+
+ Test Title
+
+
+
+
+
+
+
+
+`;
+
+exports[`PopoverMessage Component Edge Cases should handle very long title 1`] = `
+
+
+ Test Title
+
+
+
+
+
+
+
+
+`;
+
+exports[`PopoverMessage Component Rendering should render correctly when not visible 1`] = ``;
+
+exports[`PopoverMessage Component Rendering should render correctly when visible 1`] = `
+
+
+ This is a very long title that might cause layout issues or text wrapping in the popover component
+
+
+
+
+ Test content
+
+
+
+
+
+
+
+
+`;
+
+exports[`PopoverMessage Component Rendering should render correctly with different children content 1`] = `
+
+
+ Test Title
+
+
+
+
+ Test content
+
+
+
+
+
+
+
+
+`;
+
+exports[`PopoverMessage Component Rendering should render correctly with different title 1`] = `
+
+
+ Test Title
+
+
+
+
+
+
+ + First paragraph +
++ Second paragraph +
+
+
+
+
+
+
+`;
+
+exports[`PopoverMessage Component Rendering should render correctly with loading state 1`] = `
+
+
+ Custom Title
+
+
+
+
+ Test content
+
+
+
+
+
+
+
+
+`;
diff --git a/src/Explorer/ContainerCopy/CreateCopyJob/Screens/CreateContainer/AddCollectionPanelWrapper.test.tsx b/src/Explorer/ContainerCopy/CreateCopyJob/Screens/CreateContainer/AddCollectionPanelWrapper.test.tsx
new file mode 100644
index 000000000..226ea15af
--- /dev/null
+++ b/src/Explorer/ContainerCopy/CreateCopyJob/Screens/CreateContainer/AddCollectionPanelWrapper.test.tsx
@@ -0,0 +1,261 @@
+import "@testing-library/jest-dom";
+import { render, screen, waitFor } from "@testing-library/react";
+import { CopyJobMigrationType } from "Explorer/ContainerCopy/Enums/CopyJobEnums";
+import { CopyJobContextProviderType } from "Explorer/ContainerCopy/Types/CopyJobTypes";
+import Explorer from "Explorer/Explorer";
+import { useSidePanel } from "hooks/useSidePanel";
+import React from "react";
+import ContainerCopyMessages from "../../../ContainerCopyMessages";
+import { useCopyJobContext } from "../../../Context/CopyJobContext";
+import AddCollectionPanelWrapper from "./AddCollectionPanelWrapper";
+
+jest.mock("hooks/useSidePanel");
+jest.mock("../../../Context/CopyJobContext");
+
+jest.mock("../../../../Panes/AddCollectionPanel/AddCollectionPanel", () => ({
+ AddCollectionPanel: ({
+ explorer,
+ isCopyJobFlow,
+ onSubmitSuccess,
+ }: {
+ explorer?: Explorer;
+ isCopyJobFlow: boolean;
+ onSubmitSuccess: (data: { databaseId: string; collectionId: string }) => void;
+ }) => (
+
+
+
+ Test Title
+
+
+
+
+ Test content
+
+
+
+
+
+
+
+
+ ),
+}));
+
+jest.mock("immer", () => ({
+ produce: jest.fn((updater) => (state: any) => {
+ const draft = { ...state };
+ updater(draft);
+ return draft;
+ }),
+}));
+
+const mockUseSidePanel = useSidePanel as jest.MockedFunction{explorer ? "explorer-present" : "no-explorer"}
+ {isCopyJobFlow ? "true" : "false"}
+
+
+
+`;
+
+exports[`AddCollectionPanelWrapper Component Rendering should match snapshot with both props 1`] = `
+
+
+
+
+ Select the properties for your container.
+
+
+
+
+
+
+
+ no-explorer
+
+
+ true
+
+
+
+
+`;
+
+exports[`AddCollectionPanelWrapper Component Rendering should match snapshot with explorer prop 1`] = `
+
+
+
+
+ Select the properties for your container.
+
+
+
+
+
+
+
+ explorer-present
+
+
+ true
+
+
+
+
+`;
+
+exports[`AddCollectionPanelWrapper Component Rendering should match snapshot with goBack prop 1`] = `
+
+
+
+
+ Select the properties for your container.
+
+
+
+
+
+
+
+ explorer-present
+
+
+ true
+
+
+
+
+`;
diff --git a/src/Explorer/ContainerCopy/CreateCopyJob/Screens/CreateCopyJobScreens.test.tsx b/src/Explorer/ContainerCopy/CreateCopyJob/Screens/CreateCopyJobScreens.test.tsx
new file mode 100644
index 000000000..bbff5758e
--- /dev/null
+++ b/src/Explorer/ContainerCopy/CreateCopyJob/Screens/CreateCopyJobScreens.test.tsx
@@ -0,0 +1,426 @@
+import "@testing-library/jest-dom";
+import { fireEvent, render, screen } from "@testing-library/react";
+import React from "react";
+import CreateCopyJobScreens from "./CreateCopyJobScreens";
+
+jest.mock("../../Context/CopyJobContext", () => ({
+ useCopyJobContext: jest.fn(),
+}));
+
+jest.mock("../Utils/useCopyJobNavigation", () => ({
+ useCopyJobNavigation: jest.fn(),
+}));
+
+jest.mock("./Components/NavigationControls", () => {
+ const MockedNavigationControls = ({
+ primaryBtnText,
+ onPrimary,
+ onPrevious,
+ onCancel,
+ isPrimaryDisabled,
+ isPreviousDisabled,
+ }: {
+ primaryBtnText: string;
+ onPrimary: () => void;
+ onPrevious: () => void;
+ onCancel: () => void;
+ isPrimaryDisabled: boolean;
+ isPreviousDisabled: boolean;
+ }) => (
+
+
+
+
+ Select the properties for your container.
+
+
+
+
+
+
+
+ no-explorer
+
+
+ true
+
+
+
+
+
+
+
+ );
+ return MockedNavigationControls;
+});
+
+import { useCopyJobContext } from "../../Context/CopyJobContext";
+import { useCopyJobNavigation } from "../Utils/useCopyJobNavigation";
+
+const createMockNavigationHook = (overrides = {}) => ({
+ currentScreen: {
+ key: "SelectAccount",
+ component: Mock Screen Component
,
+ },
+ isPrimaryDisabled: false,
+ isPreviousDisabled: true,
+ handlePrimary: jest.fn(),
+ handlePrevious: jest.fn(),
+ handleCancel: jest.fn(),
+ primaryBtnText: "Next",
+ showAddCollectionPanel: jest.fn(),
+ ...overrides,
+});
+
+const createMockContext = (overrides = {}) => ({
+ contextError: "",
+ setContextError: jest.fn(),
+ copyJobState: {},
+ setCopyJobState: jest.fn(),
+ flow: {},
+ setFlow: jest.fn(),
+ resetCopyJobState: jest.fn(),
+ explorer: {},
+ ...overrides,
+});
+
+describe("CreateCopyJobScreens", () => {
+ const mockNavigationHook = createMockNavigationHook();
+ const mockContext = createMockContext();
+
+ beforeEach(() => {
+ jest.clearAllMocks();
+ (useCopyJobNavigation as jest.Mock).mockReturnValue(mockNavigationHook);
+ (useCopyJobContext as jest.Mock).mockReturnValue(mockContext);
+ });
+
+ describe("Rendering", () => {
+ test("should render without error", () => {
+ render(Custom Screen Content
;
+ (useCopyJobNavigation as jest.Mock).mockReturnValue(
+ createMockNavigationHook({
+ currentScreen: { component: customScreen },
+ }),
+ );
+
+ render(
+
+
+ );
+
+ (useCopyJobNavigation as jest.Mock).mockReturnValue(
+ createMockNavigationHook({
+ currentScreen: { component: Simple Screen
;
+
+ (useCopyJobNavigation as jest.Mock).mockReturnValue(
+ createMockNavigationHook({
+ currentScreen: { component: Valid Screen
,
+ },
+ }),
+ );
+
+ expect(() => render(
+ {children}
+
+ ),
+}));
+
+jest.mock("./CreateCopyJobScreens", () => ({
+ __esModule: true,
+ default: () => CreateCopyJobScreens
,
+}));
+
+const mockExplorer = {
+ databaseAccount: {
+ id: "test-account",
+ name: "test-account-name",
+ location: "East US",
+ type: "DocumentDB",
+ kind: "GlobalDocumentDB",
+ properties: {
+ documentEndpoint: "https://test-account.documents.azure.com:443/",
+ gremlinEndpoint: "https://test-account.gremlin.cosmosdb.azure.com:443/",
+ tableEndpoint: "https://test-account.table.cosmosdb.azure.com:443/",
+ cassandraEndpoint: "https://test-account.cassandra.cosmosdb.azure.com:443/",
+ },
+ },
+ subscriptionId: "test-subscription-id",
+ resourceGroup: "test-resource-group",
+} as unknown as Explorer;
+
+describe("CreateCopyJobScreensProvider", () => {
+ beforeEach(() => {
+ jest.clearAllMocks();
+ });
+
+ it("should render with explorer prop", () => {
+ const wrapper = shallow(
+
+`;
+
+exports[`PreviewCopyJob should render component with cross-subscription setup 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Source subscription
+
+
+ Test Subscription
+
+
+
+
+ Source account
+
+
+ test-account
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Source Database
+
+
+
+
+
+
+
+
+ Source Container
+
+
+
+
+
+
+
+
+ Destination Database
+
+
+
+
+
+
+
+
+ Destination Container
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ test-db_with@special#chars
+
+
+ test-container_with@special#chars
+
+
+ target-db_with@special#chars
+
+
+ target-container_with@special#chars
+
+
+
+`;
+
+exports[`PreviewCopyJob should render with default state and empty job name 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Source subscription
+
+
+ Test Subscription
+
+
+
+
+ Source account
+
+
+ test-account
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Source Database
+
+
+
+
+
+
+
+
+ Source Container
+
+
+
+
+
+
+
+
+ Destination Database
+
+
+
+
+
+
+
+
+ Destination Container
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ source-database
+
+
+ source-container
+
+
+ target-database
+
+
+ target-container
+
+
+
+`;
+
+exports[`PreviewCopyJob should render with long subscription and account names 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Source subscription
+
+
+ Test Subscription
+
+
+
+
+ Source account
+
+
+ test-account
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Source Database
+
+
+
+
+
+
+
+
+ Source Container
+
+
+
+
+
+
+
+
+ Destination Database
+
+
+
+
+
+
+
+
+ Destination Container
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ source-database
+
+
+ source-container
+
+
+ target-database
+
+
+ target-container
+
+
+
+`;
+
+exports[`PreviewCopyJob should render with missing source account information 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Source subscription
+
+
+ This is a very long subscription name that might cause display issues if not handled properly
+
+
+
+
+ Source account
+
+
+ this-is-a-very-long-database-account-name-that-might-cause-display-issues
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Source Database
+
+
+
+
+
+
+
+
+ Source Container
+
+
+
+
+
+
+
+
+ Destination Database
+
+
+
+
+
+
+
+
+ Destination Container
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ long-database-name-for-testing-purposes
+
+
+ long-container-name-for-testing-purposes
+
+
+ target-database
+
+
+ target-container
+
+
+
+`;
+
+exports[`PreviewCopyJob should render with missing source subscription information 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Source subscription
+
+
+ Test Subscription
+
+
+
+
+ Source account
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Source Database
+
+
+
+
+
+
+
+
+ Source Container
+
+
+
+
+
+
+
+
+ Destination Database
+
+
+
+
+
+
+
+
+ Destination Container
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ source-database
+
+
+ source-container
+
+
+ target-database
+
+
+ target-container
+
+
+
+`;
+
+exports[`PreviewCopyJob should render with online migration type 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Source subscription
+
+
+
+
+ Source account
+
+
+ test-account
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Source Database
+
+
+
+
+
+
+
+
+ Source Container
+
+
+
+
+
+
+
+
+ Destination Database
+
+
+
+
+
+
+
+
+ Destination Container
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ source-database
+
+
+ source-container
+
+
+ target-database
+
+
+ target-container
+
+
+
+`;
+
+exports[`PreviewCopyJob should render with pre-filled job name 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Source subscription
+
+
+ Test Subscription
+
+
+
+
+ Source account
+
+
+ test-account
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Source Database
+
+
+
+
+
+
+
+
+ Source Container
+
+
+
+
+
+
+
+
+ Destination Database
+
+
+
+
+
+
+
+
+ Destination Container
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ source-database
+
+
+ source-container
+
+
+ target-database
+
+
+ target-container
+
+
+
+`;
+
+exports[`PreviewCopyJob should render with undefined database and container names 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Source subscription
+
+
+ Test Subscription
+
+
+
+
+ Source account
+
+
+ test-account
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Source Database
+
+
+
+
+
+
+
+
+ Source Container
+
+
+
+
+
+
+
+
+ Destination Database
+
+
+
+
+
+
+
+
+ Destination Container
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ source-database
+
+
+ source-container
+
+
+ target-database
+
+
+ target-container
+
+
+
+`;
diff --git a/src/Explorer/ContainerCopy/CreateCopyJob/Screens/SelectAccount/Components/AccountDropdown.test.tsx b/src/Explorer/ContainerCopy/CreateCopyJob/Screens/SelectAccount/Components/AccountDropdown.test.tsx
new file mode 100644
index 000000000..a25663813
--- /dev/null
+++ b/src/Explorer/ContainerCopy/CreateCopyJob/Screens/SelectAccount/Components/AccountDropdown.test.tsx
@@ -0,0 +1,409 @@
+import "@testing-library/jest-dom";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import React from "react";
+import { configContext, Platform } from "../../../../../../ConfigContext";
+import { DatabaseAccount } from "../../../../../../Contracts/DataModels";
+import * as useDatabaseAccountsHook from "../../../../../../hooks/useDatabaseAccounts";
+import { apiType, userContext } from "../../../../../../UserContext";
+import ContainerCopyMessages from "../../../../ContainerCopyMessages";
+import { CopyJobContext } from "../../../../Context/CopyJobContext";
+import { CopyJobMigrationType } from "../../../../Enums/CopyJobEnums";
+import { CopyJobContextProviderType, CopyJobContextState } from "../../../../Types/CopyJobTypes";
+import { AccountDropdown } from "./AccountDropdown";
+
+jest.mock("../../../../../../hooks/useDatabaseAccounts");
+jest.mock("../../../../../../UserContext", () => ({
+ userContext: {
+ databaseAccount: null as DatabaseAccount | null,
+ },
+ apiType: jest.fn(),
+}));
+jest.mock("../../../../../../ConfigContext", () => ({
+ configContext: {
+ platform: "Portal",
+ },
+ Platform: {
+ Portal: "Portal",
+ Hosted: "Hosted",
+ },
+}));
+
+const mockUseDatabaseAccounts = useDatabaseAccountsHook.useDatabaseAccounts as jest.MockedFunction<
+ typeof useDatabaseAccountsHook.useDatabaseAccounts
+>;
+
+describe("AccountDropdown", () => {
+ const mockSetCopyJobState = jest.fn();
+ const mockCopyJobState = {
+ jobName: "",
+ migrationType: CopyJobMigrationType.Offline,
+ source: {
+ subscription: {
+ subscriptionId: "test-subscription-id",
+ displayName: "Test Subscription",
+ },
+ account: null,
+ databaseId: "",
+ containerId: "",
+ },
+ target: {
+ subscriptionId: "",
+ account: null,
+ databaseId: "",
+ containerId: "",
+ },
+ sourceReadAccessFromTarget: false,
+ } as CopyJobContextState;
+
+ const mockCopyJobContextValue = {
+ copyJobState: mockCopyJobState,
+ setCopyJobState: mockSetCopyJobState,
+ flow: null,
+ setFlow: jest.fn(),
+ contextError: null,
+ setContextError: jest.fn(),
+ resetCopyJobState: jest.fn(),
+ } as CopyJobContextProviderType;
+
+ const mockDatabaseAccount1: DatabaseAccount = {
+ id: "/subscriptions/test-sub/resourceGroups/test-rg/providers/Microsoft.DocumentDb/databaseAccounts/account1",
+ name: "test-account-1",
+ kind: "GlobalDocumentDB",
+ location: "East US",
+ type: "Microsoft.DocumentDB/databaseAccounts",
+ tags: {},
+ properties: {
+ documentEndpoint: "https://account1.documents.azure.com:443/",
+ capabilities: [],
+ enableMultipleWriteLocations: false,
+ },
+ };
+
+ const mockDatabaseAccount2: DatabaseAccount = {
+ id: "/subscriptions/test-sub/resourceGroups/test-rg/providers/Microsoft.DocumentDb/databaseAccounts/account2",
+ name: "test-account-2",
+ kind: "GlobalDocumentDB",
+ location: "West US",
+ type: "Microsoft.DocumentDB/databaseAccounts",
+ tags: {},
+ properties: {
+ documentEndpoint: "https://account2.documents.azure.com:443/",
+ capabilities: [],
+ enableMultipleWriteLocations: false,
+ },
+ };
+
+ const mockNonSqlAccount: DatabaseAccount = {
+ id: "/subscriptions/test-sub/resourceGroups/test-rg/providers/Microsoft.DocumentDb/databaseAccounts/mongo-account",
+ name: "mongo-account",
+ kind: "MongoDB",
+ location: "Central US",
+ type: "Microsoft.DocumentDB/databaseAccounts",
+ tags: {},
+ properties: {
+ documentEndpoint: "https://mongo-account.documents.azure.com:443/",
+ capabilities: [],
+ enableMultipleWriteLocations: false,
+ },
+ };
+
+ const renderWithContext = (contextValue = mockCopyJobContextValue) => {
+ return render(
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Source subscription
+
+
+ Test Subscription
+
+
+
+
+ Source account
+
+
+ test-account
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Source Database
+
+
+
+
+
+
+
+
+ Source Container
+
+
+
+
+
+
+
+
+ Destination Database
+
+
+
+
+
+
+
+
+ Destination Container
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ test-account-1
+
+
+
+
+
+
+
+`;
diff --git a/src/Explorer/ContainerCopy/CreateCopyJob/Screens/SelectAccount/Components/__snapshots__/MigrationTypeCheckbox.test.tsx.snap b/src/Explorer/ContainerCopy/CreateCopyJob/Screens/SelectAccount/Components/__snapshots__/MigrationTypeCheckbox.test.tsx.snap
new file mode 100644
index 000000000..4e1c653ef
--- /dev/null
+++ b/src/Explorer/ContainerCopy/CreateCopyJob/Screens/SelectAccount/Components/__snapshots__/MigrationTypeCheckbox.test.tsx.snap
@@ -0,0 +1,80 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MigrationTypeCheckbox Component Rendering should render in checked state 1`] = `
+
+
+`;
+
+exports[`MigrationTypeCheckbox Component Rendering should render with default props (unchecked state) 1`] = `
+
+
+
+
+
+
+`;
diff --git a/src/Explorer/ContainerCopy/CreateCopyJob/Screens/SelectAccount/SelectAccount.test.tsx b/src/Explorer/ContainerCopy/CreateCopyJob/Screens/SelectAccount/SelectAccount.test.tsx
new file mode 100644
index 000000000..5fb556c3c
--- /dev/null
+++ b/src/Explorer/ContainerCopy/CreateCopyJob/Screens/SelectAccount/SelectAccount.test.tsx
@@ -0,0 +1,170 @@
+import "@testing-library/jest-dom";
+import { fireEvent, render, screen } from "@testing-library/react";
+import React from "react";
+import { useCopyJobContext } from "../../../Context/CopyJobContext";
+import { CopyJobMigrationType } from "../../../Enums/CopyJobEnums";
+import { CopyJobContextProviderType } from "../../../Types/CopyJobTypes";
+import SelectAccount from "./SelectAccount";
+
+jest.mock("../../../Context/CopyJobContext", () => ({
+ useCopyJobContext: jest.fn(),
+}));
+
+jest.mock("./Components/SubscriptionDropdown", () => ({
+ SubscriptionDropdown: jest.fn(() =>
+
+
+
+Subscription Dropdown
),
+}));
+
+jest.mock("./Components/AccountDropdown", () => ({
+ AccountDropdown: jest.fn(() => Account Dropdown
),
+}));
+
+jest.mock("./Components/MigrationTypeCheckbox", () => ({
+ MigrationTypeCheckbox: jest.fn(({ checked, onChange }: { checked: boolean; onChange: () => void }) => (
+
+
+ Copy container in offline mode
+
+ )),
+}));
+
+describe("SelectAccount", () => {
+ const mockSetCopyJobState = jest.fn();
+
+ const defaultContextValue: CopyJobContextProviderType = {
+ copyJobState: {
+ jobName: "",
+ migrationType: CopyJobMigrationType.Online,
+ source: {
+ subscription: null as any,
+ account: null as any,
+ databaseId: "",
+ containerId: "",
+ },
+ target: {
+ subscriptionId: "",
+ account: null as any,
+ databaseId: "",
+ containerId: "",
+ },
+ sourceReadAccessFromTarget: false,
+ },
+ setCopyJobState: mockSetCopyJobState,
+ flow: { currentScreen: "selectAccount" },
+ setFlow: jest.fn(),
+ contextError: null,
+ setContextError: jest.fn(),
+ explorer: {} as any,
+ resetCopyJobState: jest.fn(),
+ };
+
+ beforeEach(() => {
+ jest.clearAllMocks();
+ (useCopyJobContext as jest.Mock).mockReturnValue(defaultContextValue);
+ });
+
+ afterEach(() => {
+ jest.clearAllMocks();
+ });
+
+ describe("Component Rendering", () => {
+ it("should render the component with all required elements", () => {
+ const { container } = render(
+
+ Please select a source account from which to copy.
+
+
+`;
diff --git a/src/Explorer/ContainerCopy/CreateCopyJob/Screens/SelectSourceAndTargetContainers/Events/DropDownChangeHandler.test.tsx b/src/Explorer/ContainerCopy/CreateCopyJob/Screens/SelectSourceAndTargetContainers/Events/DropDownChangeHandler.test.tsx
new file mode 100644
index 000000000..4cf137ea4
--- /dev/null
+++ b/src/Explorer/ContainerCopy/CreateCopyJob/Screens/SelectSourceAndTargetContainers/Events/DropDownChangeHandler.test.tsx
@@ -0,0 +1,330 @@
+import { fireEvent, render } from "@testing-library/react";
+import React from "react";
+import { CopyJobMigrationType } from "../../../../Enums/CopyJobEnums";
+import { CopyJobContextState, DropdownOptionType } from "../../../../Types/CopyJobTypes";
+import { dropDownChangeHandler } from "./DropDownChangeHandler";
+
+const createMockInitialState = (): CopyJobContextState => ({
+ jobName: "test-job",
+ migrationType: CopyJobMigrationType.Offline,
+ sourceReadAccessFromTarget: false,
+ source: {
+ subscription: {
+ subscriptionId: "source-sub-id",
+ displayName: "Source Subscription",
+ state: "Enabled",
+ subscriptionPolicies: {
+ locationPlacementId: "test",
+ quotaId: "test",
+ spendingLimit: "Off",
+ },
+ authorizationSource: "test",
+ },
+ account: {
+ id: "source-account-id",
+ name: "source-account",
+ location: "East US",
+ type: "Microsoft.DocumentDB/databaseAccounts",
+ kind: "DocumentDB",
+ properties: {
+ documentEndpoint: "https://source.documents.azure.com:443/",
+ cassandraEndpoint: undefined,
+ gremlinEndpoint: undefined,
+ tableEndpoint: undefined,
+ writeLocations: [],
+ readLocations: [],
+ enableMultipleWriteLocations: false,
+ isVirtualNetworkFilterEnabled: false,
+ enableFreeTier: false,
+ enableAnalyticalStorage: false,
+ backupPolicy: undefined,
+ disableLocalAuth: false,
+ capacity: undefined,
+ enablePriorityBasedExecution: false,
+ publicNetworkAccess: "Enabled",
+ enableMaterializedViews: false,
+ },
+ systemData: undefined,
+ },
+ databaseId: "source-db",
+ containerId: "source-container",
+ },
+ target: {
+ subscriptionId: "target-sub-id",
+ account: {
+ id: "target-account-id",
+ name: "target-account",
+ location: "West US",
+ type: "Microsoft.DocumentDB/databaseAccounts",
+ kind: "DocumentDB",
+ properties: {
+ documentEndpoint: "https://target.documents.azure.com:443/",
+ cassandraEndpoint: undefined,
+ gremlinEndpoint: undefined,
+ tableEndpoint: undefined,
+ writeLocations: [],
+ readLocations: [],
+ enableMultipleWriteLocations: false,
+ isVirtualNetworkFilterEnabled: false,
+ enableFreeTier: false,
+ enableAnalyticalStorage: false,
+ backupPolicy: undefined,
+ disableLocalAuth: false,
+ capacity: undefined,
+ enablePriorityBasedExecution: false,
+ publicNetworkAccess: "Enabled",
+ enableMaterializedViews: false,
+ },
+ systemData: undefined,
+ },
+ databaseId: "target-db",
+ containerId: "target-container",
+ },
+});
+
+interface TestComponentProps {
+ initialState: CopyJobContextState;
+ onStateChange: (state: CopyJobContextState) => void;
+}
+
+const TestComponent: React.FC
+ Subscription Dropdown
+
+
+ Account Dropdown
+
+
+
+ Copy container in offline mode
+
+
+
+
+
+
+
+ );
+};
+
+describe("dropDownChangeHandler", () => {
+ let capturedState: CopyJobContextState;
+ let initialState: CopyJobContextState;
+
+ beforeEach(() => {
+ initialState = createMockInitialState();
+ capturedState = initialState;
+ });
+
+ const renderTestComponent = () => {
+ return render(
+
+
+
+`;
+
+exports[`DatabaseContainerSection Snapshot Testing matches snapshot with disabled states 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+ Database 2
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Container 2
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`DatabaseContainerSection Snapshot Testing matches snapshot with empty options 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+ Database 1
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Container 1
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`DatabaseContainerSection Snapshot Testing matches snapshot with minimal props 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+ Select a database
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Select a container
+
+
+
+
+
+
+
+
+
+
+`;
diff --git a/src/Explorer/ContainerCopy/CreateCopyJob/Screens/SelectSourceAndTargetContainers/memoizedData.test.tsx b/src/Explorer/ContainerCopy/CreateCopyJob/Screens/SelectSourceAndTargetContainers/memoizedData.test.tsx
new file mode 100644
index 000000000..85de409cb
--- /dev/null
+++ b/src/Explorer/ContainerCopy/CreateCopyJob/Screens/SelectSourceAndTargetContainers/memoizedData.test.tsx
@@ -0,0 +1,387 @@
+import "@testing-library/jest-dom";
+import { render } from "@testing-library/react";
+import React from "react";
+import { DatabaseAccount, Subscription } from "../../../../../Contracts/DataModels";
+import { CopyJobMigrationType } from "../../../Enums/CopyJobEnums";
+import { CopyJobContextState } from "../../../Types/CopyJobTypes";
+import { useSourceAndTargetData } from "./memoizedData";
+
+jest.mock("../../../CopyJobUtils", () => ({
+ getAccountDetailsFromResourceId: jest.fn(),
+}));
+
+import { getAccountDetailsFromResourceId } from "../../../CopyJobUtils";
+
+const mockGetAccountDetailsFromResourceId = getAccountDetailsFromResourceId as jest.MockedFunction<
+ typeof getAccountDetailsFromResourceId
+>;
+
+interface TestComponentProps {
+ copyJobState: CopyJobContextState | null;
+ onResult?: (result: any) => void;
+}
+
+const TestComponent: React.FC
+
+
+
+
+
+
+
+
+
+
+ Database 1
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Container 1
+
+
+
+
+
+
+
+ Test Component
;
+};
+
+describe("useSourceAndTargetData", () => {
+ const mockSubscription: Subscription = {
+ subscriptionId: "test-subscription-id",
+ displayName: "Test Subscription",
+ state: "Enabled",
+ subscriptionPolicies: null,
+ authorizationSource: "RoleBased",
+ };
+
+ const mockSourceAccount: DatabaseAccount = {
+ id: "/subscriptions/source-sub-id/resourceGroups/source-rg/providers/Microsoft.DocumentDB/databaseAccounts/source-account",
+ name: "source-account",
+ location: "East US",
+ type: "Microsoft.DocumentDB/databaseAccounts",
+ kind: "GlobalDocumentDB",
+ properties: {
+ documentEndpoint: "https://source-account.documents.azure.com:443/",
+ capabilities: [],
+ locations: [],
+ },
+ };
+
+ const mockTargetAccount: DatabaseAccount = {
+ id: "/subscriptions/target-sub-id/resourceGroups/target-rg/providers/Microsoft.DocumentDB/databaseAccounts/target-account",
+ name: "target-account",
+ location: "West US",
+ type: "Microsoft.DocumentDB/databaseAccounts",
+ kind: "GlobalDocumentDB",
+ properties: {
+ documentEndpoint: "https://target-account.documents.azure.com:443/",
+ capabilities: [],
+ locations: [],
+ },
+ };
+
+ const mockCopyJobState: CopyJobContextState = {
+ jobName: "test-job",
+ migrationType: CopyJobMigrationType.Offline,
+ sourceReadAccessFromTarget: false,
+ source: {
+ subscription: mockSubscription,
+ account: mockSourceAccount,
+ databaseId: "source-db",
+ containerId: "source-container",
+ },
+ target: {
+ subscriptionId: "target-subscription-id",
+ account: mockTargetAccount,
+ databaseId: "target-db",
+ containerId: "target-container",
+ },
+ };
+
+ beforeEach(() => {
+ mockGetAccountDetailsFromResourceId.mockImplementation((accountId) => {
+ if (accountId === mockSourceAccount.id) {
+ return {
+ subscriptionId: "source-sub-id",
+ resourceGroup: "source-rg",
+ accountName: "source-account",
+ };
+ } else if (accountId === mockTargetAccount.id) {
+ return {
+ subscriptionId: "target-sub-id",
+ resourceGroup: "target-rg",
+ accountName: "target-account",
+ };
+ }
+ return null;
+ });
+ });
+
+ afterEach(() => {
+ jest.clearAllMocks();
+ });
+
+ describe("Hook Execution", () => {
+ it("should return correct data structure when copyJobState is provided", () => {
+ let hookResult: any = null;
+ const onResult = jest.fn((result) => {
+ hookResult = result;
+ });
+
+ render(
+
+ );
+};
+
+describe("useCopyJobNavigation", () => {
+ const createMockCopyJobState = (overrides?: Partial{hookResult.currentScreen?.key}
+ {hookResult.isPrimaryDisabled.toString()}
+ {hookResult.isPreviousDisabled.toString()}
+ {hookResult.primaryBtnText}
+
+
+
+ {hookResult.currentScreen?.key === SCREEN_KEYS.SelectSourceAndTargetContainers && (
+
+ )}
+ {key} Screen
,
+ validations,
+ });
+
+ const mockResetCopyJobState = jest.fn();
+ const mockSetContextError = jest.fn();
+ const mockCloseSidePanel = jest.fn();
+ const mockCopyJobState = createMockCopyJobState();
+ const mockValidationCache = new Map([
+ ["validation1", true],
+ ["validation2", true],
+ ]);
+
+ const setupMocks = (screensList: any[] = [], isIntraAccount = false) => {
+ (useCopyJobContext as jest.Mock).mockReturnValue({
+ copyJobState: mockCopyJobState,
+ resetCopyJobState: mockResetCopyJobState,
+ setContextError: mockSetContextError,
+ });
+
+ (useCopyJobPrerequisitesCache as unknown as jest.Mock).mockReturnValue({
+ validationCache: mockValidationCache,
+ });
+
+ (useCreateCopyJobScreensList as jest.Mock).mockReturnValue(
+ screensList.length > 0 ? screensList : [createMockScreen(SCREEN_KEYS.SelectAccount)],
+ );
+
+ (useSidePanel.getState as jest.Mock).mockReturnValue({
+ closeSidePanel: mockCloseSidePanel,
+ });
+
+ (getContainerIdentifiers as jest.Mock).mockImplementation((container) => ({
+ accountId: container.account?.id,
+ databaseId: container.databaseId,
+ containerId: container.containerId,
+ }));
+
+ (isIntraAccountCopy as jest.Mock).mockReturnValue(isIntraAccount);
+ };
+
+ const clickPrimaryButton = () => fireEvent.click(screen.getByTestId("primary-btn"));
+ const clickPreviousButton = () => fireEvent.click(screen.getByTestId("previous-btn"));
+
+ const expectScreen = (screenKey: string) => {
+ expect(screen.getByTestId("current-screen")).toHaveTextContent(screenKey);
+ };
+
+ const expectPrimaryButtonText = (text: string) => {
+ expect(screen.getByTestId("primary-btn-text")).toHaveTextContent(text);
+ };
+
+ const expectPrimaryDisabled = (disabled: boolean) => {
+ expect(screen.getByTestId("primary-disabled")).toHaveTextContent(disabled.toString());
+ };
+
+ const navigateToScreen = (screenKey: string, clicks: number) => {
+ for (let i = 0; i < clicks; i++) {
+ clickPrimaryButton();
+ }
+ expectScreen(screenKey);
+ };
+
+ beforeEach(() => {
+ jest.clearAllMocks();
+ setupMocks();
+ });
+
+ describe("Initial state and navigation", () => {
+ test("should start with SelectAccount screen and disable previous button", () => {
+ render(
+ {hookResult.validationCache.size}
+
+
+
+ );
+ };
+
+ afterEach(() => {
+ if (hookResult) {
+ act(() => {
+ hookResult.setValidationCache(new MapFirst
;
+ };
+
+ const SecondComponent = (): JSX.Element => {
+ secondHookResult = useCopyJobPrerequisitesCache();
+ return Second
;
+ };
+
+ render(
+
+
,
+ );
+
+ const testCache = new Map
+
,
+ );
+
+ act(() => {
+ screen.getByTestId("first-update").click();
+ });
+
+ expect(secondHookResult.validationCache.get("key-from-first")).toBe(true);
+
+ act(() => {
+ screen.getByTestId("second-update").click();
+ });
+
+ expect(firstHookResult.validationCache.get("key-from-second")).toBe(false);
+ expect(firstHookResult.validationCache.get("key-from-first")).toBeUndefined();
+ });
+
+ it("should handle complex validation scenarios", () => {
+ const ComplexTestComponent = (): JSX.Element => {
+ hookResult = useCopyJobPrerequisitesCache();
+
+ const handleComplexUpdate = () => {
+ const complexCache = new Map
+
+
+ {hookResult.validationCache.get("test-key")?.toString()}
+
+ );
+ };
+
+ render(AssignPermissions
;
+ };
+ MockAssignPermissions.displayName = "MockAssignPermissions";
+ return MockAssignPermissions;
+});
+
+jest.mock("../Screens/CreateContainer/AddCollectionPanelWrapper", () => {
+ const MockAddCollectionPanelWrapper = () => {
+ return AddCollectionPanelWrapper
;
+ };
+ MockAddCollectionPanelWrapper.displayName = "MockAddCollectionPanelWrapper";
+ return MockAddCollectionPanelWrapper;
+});
+
+jest.mock("../Screens/PreviewCopyJob/PreviewCopyJob", () => {
+ const MockPreviewCopyJob = () => {
+ return PreviewCopyJob
;
+ };
+ MockPreviewCopyJob.displayName = "MockPreviewCopyJob";
+ return MockPreviewCopyJob;
+});
+
+jest.mock("../Screens/SelectAccount/SelectAccount", () => {
+ const MockSelectAccount = () => {
+ return SelectAccount
;
+ };
+ MockSelectAccount.displayName = "MockSelectAccount";
+ return MockSelectAccount;
+});
+
+jest.mock("../Screens/SelectSourceAndTargetContainers/SelectSourceAndTargetContainers", () => {
+ const MockSelectSourceAndTargetContainers = () => {
+ return SelectSourceAndTargetContainers
;
+ };
+ MockSelectSourceAndTargetContainers.displayName = "MockSelectSourceAndTargetContainers";
+ return MockSelectSourceAndTargetContainers;
+});
+
+const TestHookComponent: React.FC<{ goBack: () => void }> = ({ goBack }) => {
+ const screens = useCreateCopyJobScreensList(goBack);
+
+ return (
+
+ {screens.map((screen, index) => (
+
+ );
+};
+
+describe("useCreateCopyJobScreensList", () => {
+ const mockExplorer = {} as Explorer;
+ const mockGoBack = jest.fn();
+ beforeEach(() => {
+ jest.clearAllMocks();
+ (useCopyJobContext as jest.Mock).mockReturnValue({
+ explorer: mockExplorer,
+ });
+ });
+
+ const renderWithContext = (component: React.ReactElement) => {
+ return render(
+
+ ))}
+ {screen.key}
+ {screen.component}
+
+ {JSON.stringify(screen.validations.map((v) => v.message))}
+
+ {isValid ? "valid" : "invalid"}
;
+ };
+
+ renderWithContext({isValid ? "valid" : "invalid"}
;
+ };
+
+ renderWithContext({isValid ? "valid" : "invalid"}
;
+ };
+
+ renderWithContext({isValid ? "valid" : "invalid"}
;
+ };
+
+ renderWithContext({isValid ? "valid" : "invalid"}
;
+ };
+
+ renderWithContext({isValid ? "valid" : "invalid"}
;
+ };
+
+ renderWithContext({isValid ? "valid" : "invalid"}
;
+ };
+
+ renderWithContext({isValid ? "valid" : "invalid"}
;
+ };
+
+ renderWithContext({isValid ? "valid" : "invalid"}
;
+ };
+
+ renderWithContext({isValid ? "valid" : "invalid"}
;
+ };
+
+ renderWithContext(Action Menu
;
+ };
+ MockCopyJobActionMenu.displayName = "MockCopyJobActionMenu";
+ return MockCopyJobActionMenu;
+});
+
+jest.mock("./CopyJobStatusWithIcon", () => {
+ const MockCopyJobStatusWithIcon = ({ status }: { status: CopyJobStatusType }) => {
+ return Status: {status}
;
+ };
+ MockCopyJobStatusWithIcon.displayName = "MockCopyJobStatusWithIcon";
+ return MockCopyJobStatusWithIcon;
+});
+
+describe("CopyJobColumns", () => {
+ type OnColumnClickType = IColumn & { onColumnClick: () => void };
+ const mockHandleSort = jest.fn();
+ const mockHandleActionClick: HandleJobActionClickType = jest.fn();
+
+ const mockJob = {
+ ID: "test-job-id",
+ Mode: "Online",
+ Name: "Test Job Name",
+ Status: CopyJobStatusType.InProgress,
+ CompletionPercentage: 75,
+ Duration: "00:05:30",
+ LastUpdatedTime: "2024-12-01T10:30:00Z",
+ timestamp: 1701426600000,
+ Source: {
+ databaseName: "test-source-db",
+ containerName: "test-source-container",
+ component: "CosmosDBSql",
+ },
+ Destination: {
+ databaseName: "test-dest-db",
+ containerName: "test-dest-container",
+ component: "CosmosDBSql",
+ },
+ } as CopyJobType;
+
+ beforeEach(() => {
+ jest.clearAllMocks();
+ });
+
+ describe("getColumns", () => {
+ it("should return an array of IColumn objects", () => {
+ const columns = getColumns(mockHandleSort, mockHandleActionClick, undefined, false);
+
+ expect(columns).toBeDefined();
+ expect(Array.isArray(columns)).toBe(true);
+ expect(columns.length).toBe(6);
+
+ columns.forEach((column: IColumn) => {
+ expect(column).toHaveProperty("key");
+ expect(column).toHaveProperty("name");
+ expect(column).toHaveProperty("minWidth");
+ expect(column).toHaveProperty("maxWidth");
+ expect(column).toHaveProperty("isResizable");
+ });
+ });
+
+ it("should have correct column keys", () => {
+ const columns = getColumns(mockHandleSort, mockHandleActionClick, undefined, false);
+
+ const expectedKeys = ["LastUpdatedTime", "Name", "Mode", "CompletionPercentage", "CopyJobStatus", "Actions"];
+ const actualKeys = columns.map((column) => column.key);
+
+ expect(actualKeys).toEqual(expectedKeys);
+ });
+
+ it("should have correct column names from ContainerCopyMessages", () => {
+ const columns = getColumns(mockHandleSort, mockHandleActionClick, undefined, false);
+
+ expect(columns[0].name).toBe(ContainerCopyMessages.MonitorJobs.Columns.lastUpdatedTime);
+ expect(columns[1].name).toBe(ContainerCopyMessages.MonitorJobs.Columns.name);
+ expect(columns[2].name).toBe(ContainerCopyMessages.MonitorJobs.Columns.mode);
+ expect(columns[3].name).toBe(ContainerCopyMessages.MonitorJobs.Columns.completionPercentage);
+ expect(columns[4].name).toBe(ContainerCopyMessages.MonitorJobs.Columns.status);
+ expect(columns[5].name).toBe("");
+ });
+
+ it("should configure sortable columns correctly when no sort is applied", () => {
+ const columns = getColumns(mockHandleSort, mockHandleActionClick, undefined, false);
+
+ expect(columns[0].isSorted).toBe(false); // LastUpdatedTime
+ expect(columns[1].isSorted).toBe(false); // Name
+ expect(columns[2].isSorted).toBe(false); // Mode
+ expect(columns[3].isSorted).toBe(false); // CompletionPercentage
+ expect(columns[4].isSorted).toBe(false); // CopyJobStatus
+ });
+
+ it("should configure sorted column correctly when sort is applied", () => {
+ const columns = getColumns(mockHandleSort, mockHandleActionClick, "Name", true);
+
+ expect(columns[1].isSorted).toBe(true);
+ expect(columns[1].isSortedDescending).toBe(true);
+
+ expect(columns[0].isSorted).toBe(false);
+ expect(columns[2].isSorted).toBe(false);
+ expect(columns[3].isSorted).toBe(false);
+ expect(columns[4].isSorted).toBe(false);
+ });
+
+ it("should handle timestamp sorting for LastUpdatedTime column", () => {
+ const columns = getColumns(mockHandleSort, mockHandleActionClick, "timestamp", false);
+
+ expect(columns[0].isSorted).toBe(true);
+ expect(columns[0].isSortedDescending).toBe(false);
+ });
+
+ it("should call handleSort with correct column keys when column headers are clicked", () => {
+ const columns = getColumns(mockHandleSort, mockHandleActionClick, undefined, false);
+
+ (columns[0] as OnColumnClickType).onColumnClick?.();
+ expect(mockHandleSort).toHaveBeenCalledWith("timestamp");
+
+ (columns[1] as OnColumnClickType).onColumnClick();
+ expect(mockHandleSort).toHaveBeenCalledWith("Name");
+
+ (columns[2] as OnColumnClickType).onColumnClick();
+ expect(mockHandleSort).toHaveBeenCalledWith("Mode");
+
+ (columns[3] as OnColumnClickType).onColumnClick();
+ expect(mockHandleSort).toHaveBeenCalledWith("CompletionPercentage");
+
+ (columns[4] as OnColumnClickType).onColumnClick();
+ expect(mockHandleSort).toHaveBeenCalledWith("Status");
+
+ expect(mockHandleSort).toHaveBeenCalledTimes(5);
+ });
+
+ it("should have correct column widths and resizability", () => {
+ const columns = getColumns(mockHandleSort, mockHandleActionClick, undefined, false);
+
+ expect(columns[0].minWidth).toBe(140); // LastUpdatedTime
+ expect(columns[0].maxWidth).toBe(300);
+ expect(columns[0].isResizable).toBe(true);
+
+ expect(columns[1].minWidth).toBe(140); // Name
+ expect(columns[1].maxWidth).toBe(300);
+ expect(columns[1].isResizable).toBe(true);
+
+ expect(columns[2].minWidth).toBe(90); // Mode
+ expect(columns[2].maxWidth).toBe(200);
+ expect(columns[2].isResizable).toBe(true);
+
+ expect(columns[3].minWidth).toBe(110); // CompletionPercentage
+ expect(columns[3].maxWidth).toBe(200);
+ expect(columns[3].isResizable).toBe(true);
+
+ expect(columns[4].minWidth).toBe(130); // CopyJobStatus
+ expect(columns[4].maxWidth).toBe(200);
+ expect(columns[4].isResizable).toBe(true);
+
+ expect(columns[5].minWidth).toBe(80); // Actions
+ expect(columns[5].maxWidth).toBe(200);
+ expect(columns[5].isResizable).toBe(true);
+ });
+ });
+
+ describe("Column Render Functions", () => {
+ let columns: IColumn[];
+
+ beforeEach(() => {
+ columns = getColumns(mockHandleSort, mockHandleActionClick, undefined, false);
+ });
+
+ describe("Name column render function", () => {
+ it("should render job name with correct styling", () => {
+ const nameColumn = columns.find((col) => col.key === "Name");
+ expect(nameColumn?.onRender).toBeDefined();
+
+ const rendered = nameColumn?.onRender?.(mockJob);
+ const { container } = render({rendered}
);
+
+ const jobNameElement = container.querySelector(".jobNameLink");
+ expect(jobNameElement).toBeInTheDocument();
+ expect(jobNameElement).toHaveTextContent("Test Job Name");
+ });
+
+ it("should handle empty job name", () => {
+ const nameColumn = columns.find((col) => col.key === "Name");
+ const jobWithEmptyName = { ...mockJob, Name: "" };
+
+ const rendered = nameColumn?.onRender?.(jobWithEmptyName);
+ const { container } = render({rendered}
);
+
+ const jobNameElement = container.querySelector(".jobNameLink");
+ expect(jobNameElement).toBeInTheDocument();
+ expect(jobNameElement).toHaveTextContent("");
+ });
+
+ it("should handle special characters in job name", () => {
+ const nameColumn = columns.find((col) => col.key === "Name");
+ const jobWithSpecialName = { ...mockJob, Name: "Test & {rendered}
);
+
+ const jobNameElement = container.querySelector(".jobNameLink");
+ expect(jobNameElement).toBeInTheDocument();
+ expect(jobNameElement).toHaveTextContent("Test & {rendered}
);
+
+ const statusIcon = container.querySelector(`[data-testid="status-icon-${mockJob.Status}"]`);
+ expect(statusIcon).toBeInTheDocument();
+ expect(statusIcon).toHaveTextContent(`Status: ${mockJob.Status}`);
+ });
+
+ it("should handle different job statuses", () => {
+ const statusColumn = columns.find((col) => col.key === "CopyJobStatus");
+
+ Object.values(CopyJobStatusType).forEach((status) => {
+ const jobWithStatus = { ...mockJob, Status: status };
+ const rendered = statusColumn?.onRender?.(jobWithStatus);
+ const { container } = render({rendered}
);
+
+ const statusIcon = container.querySelector(`[data-testid="status-icon-${status}"]`);
+ expect(statusIcon).toBeInTheDocument();
+ });
+ });
+ });
+
+ describe("Actions column render function", () => {
+ it("should render CopyJobActionMenu component", () => {
+ const actionsColumn = columns.find((col) => col.key === "Actions");
+ expect(actionsColumn?.onRender).toBeDefined();
+
+ const rendered = actionsColumn?.onRender?.(mockJob);
+ const { container } = render({rendered}
);
+
+ const actionMenu = container.querySelector(`[data-testid="action-menu-${mockJob.Name}"]`);
+ expect(actionMenu).toBeInTheDocument();
+ expect(actionMenu).toHaveTextContent("Action Menu");
+ });
+
+ it("should pass correct props to CopyJobActionMenu", () => {
+ const actionsColumn = columns.find((col) => col.key === "Actions");
+ const rendered = actionsColumn?.onRender?.(mockJob);
+
+ expect(rendered).toBeDefined();
+ expect(React.isValidElement(rendered)).toBe(true);
+ });
+ });
+ });
+
+ describe("Column Field Names", () => {
+ it("should have correct fieldName properties", () => {
+ const columns = getColumns(mockHandleSort, mockHandleActionClick, undefined, false);
+
+ expect(columns[0].fieldName).toBe("LastUpdatedTime");
+ expect(columns[1].fieldName).toBe("Name");
+ expect(columns[2].fieldName).toBe("Mode");
+ expect(columns[3].fieldName).toBe("CompletionPercentage");
+ expect(columns[4].fieldName).toBe("Status");
+ expect(columns[5].fieldName).toBeUndefined(); // Actions column doesn't have fieldName
+ });
+ });
+
+ describe("Different Sort Configurations", () => {
+ it("should handle ascending sort", () => {
+ const columns = getColumns(mockHandleSort, mockHandleActionClick, "Name", false);
+
+ const nameColumn = columns.find((col) => col.key === "Name");
+ expect(nameColumn?.isSorted).toBe(true);
+ expect(nameColumn?.isSortedDescending).toBe(false);
+ });
+
+ it("should handle descending sort", () => {
+ const columns = getColumns(mockHandleSort, mockHandleActionClick, "Mode", true);
+
+ const modeColumn = columns.find((col) => col.key === "Mode");
+ expect(modeColumn?.isSorted).toBe(true);
+ expect(modeColumn?.isSortedDescending).toBe(true);
+ });
+
+ it("should handle sort on CompletionPercentage column", () => {
+ const columns = getColumns(mockHandleSort, mockHandleActionClick, "CompletionPercentage", false);
+
+ const completionColumn = columns.find((col) => col.key === "CompletionPercentage");
+ expect(completionColumn?.isSorted).toBe(true);
+ expect(completionColumn?.isSortedDescending).toBe(false);
+
+ const nameColumn = columns.find((col) => col.key === "Name");
+ expect(nameColumn?.isSorted).toBe(false);
+ });
+
+ it("should handle sort on Status column", () => {
+ const columns = getColumns(mockHandleSort, mockHandleActionClick, "Status", true);
+
+ const statusColumn = columns.find((col) => col.key === "CopyJobStatus");
+ expect(statusColumn?.isSorted).toBe(true);
+ expect(statusColumn?.isSortedDescending).toBe(true);
+ });
+ });
+
+ describe("Edge Cases", () => {
+ it("should handle undefined sortedColumnKey", () => {
+ const columns = getColumns(mockHandleSort, mockHandleActionClick, undefined, false);
+
+ const sortableColumns = columns.filter((col) => col.key !== "Actions");
+ sortableColumns.forEach((column) => {
+ expect(column.isSorted).toBe(false);
+ });
+ });
+
+ it("should handle null job object in render functions gracefully", () => {
+ const columns = getColumns(mockHandleSort, mockHandleActionClick, undefined, false);
+
+ const nameColumn = columns.find((col) => col.key === "Name");
+ expect(() => {
+ nameColumn?.onRender?.(null as any);
+ }).toThrow();
+
+ const completionColumn = columns.find((col) => col.key === "CompletionPercentage");
+ expect(() => {
+ completionColumn?.onRender?.(null as any);
+ }).toThrow();
+ });
+
+ it("should handle job object with missing properties", () => {
+ const incompleteJob = {
+ Name: "Incomplete Job",
+ } as CopyJobType;
+
+ const columns = getColumns(mockHandleSort, mockHandleActionClick, undefined, false);
+
+ const nameColumn = columns.find((col) => col.key === "Name");
+ const rendered = nameColumn?.onRender?.(incompleteJob);
+ const { container } = render({rendered}
);
+
+ const jobNameElement = container.querySelector(".jobNameLink");
+ expect(jobNameElement).toHaveTextContent("Incomplete Job");
+ });
+
+ it("should handle unknown sortedColumnKey", () => {
+ const columns = getColumns(mockHandleSort, mockHandleActionClick, "UnknownColumn", false);
+
+ const sortableColumns = columns.filter((col) => col.key !== "Actions");
+ sortableColumns.forEach((column) => {
+ expect(column.isSorted).toBe(false);
+ });
+ });
+ });
+
+ describe("Accessibility", () => {
+ it("should have Actions column without name for accessibility", () => {
+ const columns = getColumns(mockHandleSort, mockHandleActionClick, undefined, false);
+
+ const actionsColumn = columns.find((col) => col.key === "Actions");
+ expect(actionsColumn?.name).toBe("");
+ });
+
+ it("should maintain column structure for screen readers", () => {
+ const columns = getColumns(mockHandleSort, mockHandleActionClick, undefined, false);
+
+ const columnsWithNames = columns.filter((col) => col.key !== "Actions");
+ columnsWithNames.forEach((column) => {
+ expect(column.name).toBeTruthy();
+ expect(typeof column.name).toBe("string");
+ expect(column.name.length).toBeGreaterThan(0);
+ });
+ });
+ });
+
+ describe("Function References", () => {
+ it("should maintain function reference stability", () => {
+ const columns1 = getColumns(mockHandleSort, mockHandleActionClick, undefined, false);
+ const columns2 = getColumns(mockHandleSort, mockHandleActionClick, undefined, false);
+
+ (columns1[0] as OnColumnClickType).onColumnClick?.();
+ (columns2[0] as OnColumnClickType).onColumnClick?.();
+
+ expect(mockHandleSort).toHaveBeenCalledTimes(2);
+ expect(mockHandleSort).toHaveBeenNthCalledWith(1, "timestamp");
+ expect(mockHandleSort).toHaveBeenNthCalledWith(2, "timestamp");
+ });
+
+ it("should call handleActionClick when action menu is rendered", () => {
+ const columns = getColumns(mockHandleSort, mockHandleActionClick, undefined, false);
+ const actionsColumn = columns.find((col) => col.key === "Actions");
+
+ const rendered = actionsColumn?.onRender?.(mockJob);
+ expect(React.isValidElement(rendered)).toBe(true);
+ });
+ });
+});
diff --git a/src/Explorer/ContainerCopy/MonitorCopyJobs/Components/CopyJobDetails.test.tsx b/src/Explorer/ContainerCopy/MonitorCopyJobs/Components/CopyJobDetails.test.tsx
new file mode 100644
index 000000000..1aa57ebca
--- /dev/null
+++ b/src/Explorer/ContainerCopy/MonitorCopyJobs/Components/CopyJobDetails.test.tsx
@@ -0,0 +1,383 @@
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+import React from "react";
+import { CopyJobStatusType } from "../../Enums/CopyJobEnums";
+import { CopyJobType } from "../../Types/CopyJobTypes";
+import CopyJobDetails from "./CopyJobDetails";
+
+jest.mock("./CopyJobStatusWithIcon", () => {
+ const MockCopyJobStatusWithIcon = ({ status }: { status: CopyJobStatusType }) => {
+ return {status};
+ };
+ MockCopyJobStatusWithIcon.displayName = "MockCopyJobStatusWithIcon";
+ return MockCopyJobStatusWithIcon;
+});
+
+jest.mock("../../ContainerCopyMessages", () => ({
+ errorTitle: "Error Details",
+ sourceDatabaseLabel: "Source Database",
+ sourceContainerLabel: "Source Container",
+ targetDatabaseLabel: "Destination Database",
+ targetContainerLabel: "Destination Container",
+ sourceAccountLabel: "Source Account",
+ MonitorJobs: {
+ Columns: {
+ lastUpdatedTime: "Date & time",
+ status: "Status",
+ mode: "Mode",
+ },
+ },
+}));
+
+describe("CopyJobDetails", () => {
+ const mockBasicJob: CopyJobType = {
+ ID: "test-job-1",
+ Mode: "Offline",
+ Name: "test-job-1",
+ Status: CopyJobStatusType.InProgress,
+ CompletionPercentage: 50,
+ Duration: "10 minutes",
+ LastUpdatedTime: "2024-01-01T10:00:00Z",
+ timestamp: 1704110400000,
+ Source: {
+ component: "CosmosDBSql",
+ databaseName: "sourceDb",
+ containerName: "sourceContainer",
+ remoteAccountName: "sourceAccount",
+ },
+ Destination: {
+ component: "CosmosDBSql",
+ databaseName: "targetDb",
+ containerName: "targetContainer",
+ remoteAccountName: "targetAccount",
+ },
+ };
+
+ const mockJobWithError: CopyJobType = {
+ ...mockBasicJob,
+ ID: "test-job-error",
+ Status: CopyJobStatusType.Failed,
+ Error: {
+ message: "Failed to connect to source database",
+ code: "CONNECTION_ERROR",
+ },
+ };
+
+ const mockJobWithNullValues: CopyJobType = {
+ ...mockBasicJob,
+ ID: "test-job-null",
+ Source: {
+ component: "CosmosDBSql",
+ databaseName: undefined,
+ containerName: undefined,
+ remoteAccountName: undefined,
+ },
+ Destination: {
+ component: "CosmosDBSql",
+ databaseName: undefined,
+ containerName: undefined,
+ remoteAccountName: undefined,
+ },
+ };
+
+ describe("Basic Rendering", () => {
+ it("renders the component with correct structure", () => {
+ render(
+
+`;
+
+exports[`CopyJobStatusWithIcon Spinner Status Types renders Partitioning with spinner and expected text 1`] = `
+
+
+
+
+ Running
+
+
+
+`;
+
+exports[`CopyJobStatusWithIcon Spinner Status Types renders Running with spinner and expected text 1`] = `
+
+
+
+
+ Running
+
+
+
+`;
+
+exports[`CopyJobStatusWithIcon Static Icon Status Types - Snapshot Tests renders Cancelled status correctly 1`] = `
+
+
+
+
+ Running
+
+
+
+
+
+
+ Cancelled
+
+
+`;
+
+exports[`CopyJobStatusWithIcon Static Icon Status Types - Snapshot Tests renders Completed status correctly 1`] = `
+
+
+
+
+
+ Completed
+
+
+`;
+
+exports[`CopyJobStatusWithIcon Static Icon Status Types - Snapshot Tests renders Failed status correctly 1`] = `
+
+
+
+
+
+ Failed
+
+
+`;
+
+exports[`CopyJobStatusWithIcon Static Icon Status Types - Snapshot Tests renders Faulted status correctly 1`] = `
+
+
+
+
+
+ Failed
+
+
+`;
+
+exports[`CopyJobStatusWithIcon Static Icon Status Types - Snapshot Tests renders Paused status correctly 1`] = `
+
+
+
+
+
+ Paused
+
+
+`;
+
+exports[`CopyJobStatusWithIcon Static Icon Status Types - Snapshot Tests renders Pending status correctly 1`] = `
+
+
+
+
+
+ Queued
+
+
+`;
+
+exports[`CopyJobStatusWithIcon Static Icon Status Types - Snapshot Tests renders Skipped status correctly 1`] = `
+
+
+
+
+
+ Cancelled
+
+
+`;
diff --git a/src/Explorer/ContainerCopy/MonitorCopyJobs/MonitorCopyJobRefState.test.tsx b/src/Explorer/ContainerCopy/MonitorCopyJobs/MonitorCopyJobRefState.test.tsx
new file mode 100644
index 000000000..afdb419df
--- /dev/null
+++ b/src/Explorer/ContainerCopy/MonitorCopyJobs/MonitorCopyJobRefState.test.tsx
@@ -0,0 +1,122 @@
+import { MonitorCopyJobsRefState } from "./MonitorCopyJobRefState";
+import { MonitorCopyJobsRef } from "./MonitorCopyJobs";
+
+describe("MonitorCopyJobsRefState", () => {
+ beforeEach(() => {
+ MonitorCopyJobsRefState.setState({ ref: null });
+ });
+
+ afterEach(() => {
+ jest.clearAllMocks();
+ });
+
+ it("should initialize with null ref", () => {
+ const state = MonitorCopyJobsRefState.getState();
+ expect(state.ref).toBeNull();
+ });
+
+ it("should set ref using setRef", () => {
+ const mockRef: MonitorCopyJobsRef = {
+ refreshJobList: jest.fn(),
+ };
+
+ const state = MonitorCopyJobsRefState.getState();
+ state.setRef(mockRef);
+
+ const updatedState = MonitorCopyJobsRefState.getState();
+ expect(updatedState.ref).toBe(mockRef);
+ expect(updatedState.ref).toEqual(mockRef);
+ });
+
+ it("should allow setting ref to null", () => {
+ const mockRef: MonitorCopyJobsRef = {
+ refreshJobList: jest.fn(),
+ };
+
+ MonitorCopyJobsRefState.getState().setRef(mockRef);
+ expect(MonitorCopyJobsRefState.getState().ref).toBe(mockRef);
+
+ MonitorCopyJobsRefState.getState().setRef(null);
+ expect(MonitorCopyJobsRefState.getState().ref).toBeNull();
+ });
+
+ it("should call refreshJobList method on the stored ref", () => {
+ const mockRefreshJobList = jest.fn();
+ const mockRef: MonitorCopyJobsRef = {
+ refreshJobList: mockRefreshJobList,
+ };
+
+ MonitorCopyJobsRefState.getState().setRef(mockRef);
+
+ const state = MonitorCopyJobsRefState.getState();
+ state.ref?.refreshJobList();
+
+ expect(mockRefreshJobList).toHaveBeenCalledTimes(1);
+ });
+
+ it("should handle calling refreshJobList when ref is null", () => {
+ MonitorCopyJobsRefState.setState({ ref: null });
+
+ const state = MonitorCopyJobsRefState.getState();
+ expect(state.ref).toBeNull();
+
+ expect(() => {
+ state.ref?.refreshJobList();
+ }).not.toThrow();
+ });
+
+ it("should allow partial state updates", () => {
+ const mockRef: MonitorCopyJobsRef = {
+ refreshJobList: jest.fn(),
+ };
+
+ MonitorCopyJobsRefState.setState({ ref: mockRef });
+ const state1 = MonitorCopyJobsRefState.getState();
+ expect(state1.ref).toBe(mockRef);
+ expect(state1.setRef).toBeDefined();
+
+ const newMockRef: MonitorCopyJobsRef = {
+ refreshJobList: jest.fn(),
+ };
+ MonitorCopyJobsRefState.setState({ ref: newMockRef });
+ const state2 = MonitorCopyJobsRefState.getState();
+ expect(state2.ref).toBe(newMockRef);
+ expect(state2.setRef).toBeDefined();
+ });
+
+ it("should handle multiple subscribers", () => {
+ const mockSubscriber1 = jest.fn();
+ const mockSubscriber2 = jest.fn();
+
+ const unsubscribe1 = MonitorCopyJobsRefState.subscribe(mockSubscriber1);
+ const unsubscribe2 = MonitorCopyJobsRefState.subscribe(mockSubscriber2);
+
+ const mockRef: MonitorCopyJobsRef = {
+ refreshJobList: jest.fn(),
+ };
+
+ MonitorCopyJobsRefState.getState().setRef(mockRef);
+
+ expect(mockSubscriber1).toHaveBeenCalled();
+ expect(mockSubscriber2).toHaveBeenCalled();
+
+ unsubscribe1();
+ unsubscribe2();
+ });
+
+ it("should not notify unsubscribed listeners", () => {
+ const mockSubscriber = jest.fn();
+
+ const unsubscribe = MonitorCopyJobsRefState.subscribe(mockSubscriber);
+ unsubscribe();
+
+ const mockRef: MonitorCopyJobsRef = {
+ refreshJobList: jest.fn(),
+ };
+
+ mockSubscriber.mockClear();
+ MonitorCopyJobsRefState.getState().setRef(mockRef);
+
+ expect(mockSubscriber).not.toHaveBeenCalled();
+ });
+});
diff --git a/src/Explorer/ContainerCopy/MonitorCopyJobs/MonitorCopyJobs.test.tsx b/src/Explorer/ContainerCopy/MonitorCopyJobs/MonitorCopyJobs.test.tsx
new file mode 100644
index 000000000..a59ebf687
--- /dev/null
+++ b/src/Explorer/ContainerCopy/MonitorCopyJobs/MonitorCopyJobs.test.tsx
@@ -0,0 +1,435 @@
+import "@testing-library/jest-dom";
+import { act, render, screen, waitFor } from "@testing-library/react";
+import React from "react";
+import { DataTransferJobGetResults } from "Utils/arm/generatedClients/dataTransferService/types";
+import Explorer from "../../Explorer";
+import * as CopyJobActions from "../Actions/CopyJobActions";
+import { CopyJobStatusType } from "../Enums/CopyJobEnums";
+import { CopyJobType } from "../Types/CopyJobTypes";
+import MonitorCopyJobs from "./MonitorCopyJobs";
+
+jest.mock("Common/ShimmerTree/ShimmerTree", () => {
+ const MockShimmerTree = () => {
+ return Loading...
;
+ };
+ MockShimmerTree.displayName = "MockShimmerTree";
+ return MockShimmerTree;
+});
+
+jest.mock("./Components/CopyJobsList", () => {
+ const MockCopyJobsList = ({ jobs }: any) => {
+ return Jobs: {jobs.length}
;
+ };
+ MockCopyJobsList.displayName = "MockCopyJobsList";
+ return MockCopyJobsList;
+});
+
+jest.mock("./Components/CopyJobs.NotFound", () => {
+ const MockCopyJobsNotFound = () => {
+ return No jobs found
;
+ };
+ MockCopyJobsNotFound.displayName = "MockCopyJobsNotFound";
+ return MockCopyJobsNotFound;
+});
+
+jest.mock("../Actions/CopyJobActions", () => ({
+ getCopyJobs: jest.fn(),
+ updateCopyJobStatus: jest.fn(),
+}));
+
+describe("MonitorCopyJobs", () => {
+ let mockExplorer: Explorer;
+ const mockGetCopyJobs = CopyJobActions.getCopyJobs as jest.MockedFunction
diff --git a/src/Explorer/Controls/Dialog.tsx b/src/Explorer/Controls/Dialog.tsx
index a4c50a3fd..d02eb1120 100644
--- a/src/Explorer/Controls/Dialog.tsx
+++ b/src/Explorer/Controls/Dialog.tsx
@@ -179,8 +179,18 @@ export const Dialog: FC = () => {
title,
subText,
styles: {
- title: { fontSize: DIALOG_TITLE_FONT_SIZE, fontWeight: DIALOG_TITLE_FONT_WEIGHT },
- subText: { fontSize: DIALOG_SUBTEXT_FONT_SIZE },
+ title: {
+ fontSize: DIALOG_TITLE_FONT_SIZE,
+ fontWeight: DIALOG_TITLE_FONT_WEIGHT,
+ },
+ subText: {
+ fontSize: DIALOG_SUBTEXT_FONT_SIZE,
+ color: "var(--colorNeutralForeground2)",
+ },
+ content: {
+ backgroundColor: "var(--colorNeutralBackground1)",
+ color: "var(--colorNeutralForeground1)",
+ },
},
showCloseButton: showCloseButton || false,
onDismiss,
@@ -188,18 +198,60 @@ export const Dialog: FC = () => {
modalProps: { isBlocking: isModal, isDarkOverlay: false },
minWidth: DIALOG_MIN_WIDTH,
maxWidth: DIALOG_MAX_WIDTH,
+ styles: {
+ main: {
+ backgroundColor: "var(--colorNeutralBackground1)",
+ selectors: {
+ ".ms-Dialog-title": { color: "var(--colorNeutralForeground1)" },
+ },
+ },
+ },
};
const primaryButtonProps: IButtonProps = {
text: primaryButtonText,
disabled: primaryButtonDisabled || false,
onClick: onPrimaryButtonClick,
+ styles: {
+ root: {
+ backgroundColor: "var(--colorBrandBackground)",
+ color: "var(--colorNeutralForegroundOnBrand)",
+ selectors: {
+ ":hover": {
+ backgroundColor: "var(--colorBrandBackgroundHover)",
+ color: "var(--colorNeutralForegroundOnBrand)",
+ },
+ ":active": {
+ backgroundColor: "var(--colorBrandBackgroundPressed)",
+ color: "var(--colorNeutralForegroundOnBrand)",
+ },
+ },
+ },
+ },
};
const secondaryButtonProps: IButtonProps =
secondaryButtonText && onSecondaryButtonClick
? {
text: secondaryButtonText,
onClick: onSecondaryButtonClick,
+ styles: {
+ root: {
+ backgroundColor: "var(--colorNeutralBackground2)",
+ color: "var(--colorNeutralForeground1)",
+ borderColor: "var(--colorNeutralStroke1)",
+ selectors: {
+ ":hover": {
+ backgroundColor: "var(--colorNeutralBackground3)",
+ color: "var(--colorNeutralForeground1)",
+ },
+ ":active": {
+ backgroundColor: "var(--colorNeutralBackground3)",
+ color: "var(--colorNeutralForeground1)",
+ borderColor: "var(--colorCompoundBrandStroke1)",
+ },
+ },
+ },
+ },
}
: undefined;
return visible ? (
diff --git a/src/Explorer/Controls/Editor/EditorReact.tsx b/src/Explorer/Controls/Editor/EditorReact.tsx
index 9ca544631..bfd3f103a 100644
--- a/src/Explorer/Controls/Editor/EditorReact.tsx
+++ b/src/Explorer/Controls/Editor/EditorReact.tsx
@@ -1,4 +1,5 @@
import { Spinner, SpinnerSize } from "@fluentui/react";
+import { monacoTheme, useThemeStore } from "hooks/useTheme";
import * as React from "react";
import { loadMonaco, monaco } from "../../LazyMonaco";
// import "./EditorReact.less";
@@ -66,6 +67,7 @@ export class EditorReact extends React.Component void;
monacoApi: {
default: typeof monaco;
Emitter: typeof monaco.Emitter;
@@ -94,6 +96,13 @@ export class EditorReact extends React.Component {
+ if (this.editor) {
+ const newTheme = state.isDarkMode ? "vs-dark" : "vs";
+ this.monacoApi?.editor.setTheme(newTheme);
+ }
+ });
+
setTimeout(() => {
const suggestionWidget = this.editor?.getDomNode()?.querySelector(".suggest-widget") as HTMLElement;
if (suggestionWidget) {
@@ -128,6 +137,7 @@ export class EditorReact extends React.Component = {
fieldGroup: {
height: 27,
+ backgroundColor: "var(--colorNeutralBackground2)",
+ borderColor: "var(--colorNeutralStroke1)",
},
field: {
fontSize: 12,
padding: "0 8px",
+ color: "var(--colorNeutralForeground1)",
+ backgroundColor: "var(--colorNeutralBackground2)",
+ },
+ root: {
+ selectors: {
+ input: {
+ backgroundColor: "var(--colorNeutralBackground2)",
+ color: "var(--colorNeutralForeground1)",
+ },
+ "input:hover": {
+ backgroundColor: "var(--colorNeutralBackground2)",
+ borderColor: "var(--colorNeutralStroke1)",
+ },
+ "input:focus": {
+ backgroundColor: "var(--colorNeutralBackground2)",
+ borderColor: "var(--colorBrandBackground)",
+ },
+ },
},
};
-const dropdownStyles = {
- title: {
- height: 27,
- lineHeight: "24px",
- fontSize: 12,
+const dropdownStyles: Partial = {
+ root: {
+ width: "40%",
+ marginTop: "10px",
+ selectors: {
+ "&:hover .ms-Dropdown-title": {
+ color: "var(--colorNeutralForeground1)",
+ backgroundColor: "var(--colorNeutralBackground2)",
+ borderColor: "var(--colorNeutralStroke1)",
+ },
+ "&:hover span.ms-Dropdown-title": {
+ color: "var(--colorNeutralForeground1)",
+ },
+ "&:focus .ms-Dropdown-title": {
+ color: "var(--colorNeutralForeground1)",
+ backgroundColor: "var(--colorNeutralBackground2)",
+ },
+ "&:focus span.ms-Dropdown-title": {
+ color: "var(--colorNeutralForeground1)",
+ },
+ },
+ },
+ label: {
+ color: "var(--colorNeutralForeground1)",
},
dropdown: {
- height: 27,
- lineHeight: "24px",
+ backgroundColor: "var(--colorNeutralBackground2)",
+ borderColor: "var(--colorNeutralStroke1)",
+ color: "var(--colorNeutralForeground1)",
+ },
+ title: {
+ backgroundColor: "var(--colorNeutralBackground2)",
+ color: "var(--colorNeutralForeground1)",
+ borderColor: "var(--colorNeutralStroke1)",
+ selectors: {
+ "&:hover": {
+ backgroundColor: "var(--colorNeutralBackground2)",
+ color: "var(--colorNeutralForeground1)",
+ },
+ "&:focus": {
+ backgroundColor: "var(--colorNeutralBackground2)",
+ color: "var(--colorNeutralForeground1)",
+ },
+ "&:hover .ms-Dropdown-titleText": {
+ color: "var(--colorNeutralForeground1)",
+ },
+ "&:focus .ms-Dropdown-titleText": {
+ color: "var(--colorNeutralForeground1)",
+ },
+ "& .ms-Dropdown-titleText": {
+ color: "var(--colorNeutralForeground1)",
+ },
+ "&.ms-Dropdown-title--hasPlaceholder": {
+ color: "var(--colorNeutralForeground2)",
+ },
+ },
+ },
+ errorMessage: {
+ color: "var(--colorNeutralForeground1)",
+ },
+ caretDown: {
+ color: "var(--colorNeutralForeground1)",
+ },
+ callout: {
+ backgroundColor: "var(--colorNeutralBackground2)",
+ border: "1px solid var(--colorNeutralStroke1)",
+ },
+ dropdownItems: {
+ backgroundColor: "var(--colorNeutralBackground2)",
},
dropdownItem: {
- fontSize: 12,
+ backgroundColor: "transparent",
+ color: "var(--colorNeutralForeground1)",
+ minHeight: "36px",
+ lineHeight: "36px",
+ selectors: {
+ "&:hover": {
+ backgroundColor: "rgba(255, 255, 255, 0.1)",
+ color: "var(--colorNeutralForeground1)",
+ },
+ "&:hover .ms-Dropdown-optionText": {
+ color: "var(--colorNeutralForeground1)",
+ },
+ "&:focus": {
+ backgroundColor: "rgba(255, 255, 255, 0.1)",
+ color: "var(--colorNeutralForeground1)",
+ },
+ "&:active": {
+ backgroundColor: "rgba(255, 255, 255, 0.15)",
+ color: "var(--colorNeutralForeground1)",
+ },
+ "& .ms-Dropdown-optionText": {
+ color: "var(--colorNeutralForeground1)",
+ },
+ },
+ },
+ dropdownItemSelected: {
+ backgroundColor: "rgba(255, 255, 255, 0.08)",
+ color: "var(--colorNeutralForeground1)",
+ minHeight: "36px",
+ lineHeight: "36px",
+ selectors: {
+ "&:hover": {
+ backgroundColor: "rgba(255, 255, 255, 0.1)",
+ color: "var(--colorNeutralForeground1)",
+ },
+ "&:hover .ms-Dropdown-optionText": {
+ color: "var(--colorNeutralForeground1)",
+ },
+ "&:focus": {
+ backgroundColor: "rgba(255, 255, 255, 0.1)",
+ color: "var(--colorNeutralForeground1)",
+ },
+ "&:active": {
+ backgroundColor: "rgba(255, 255, 255, 0.15)",
+ color: "var(--colorNeutralForeground1)",
+ },
+ "& .ms-Dropdown-optionText": {
+ color: "var(--colorNeutralForeground1)",
+ },
+ },
+ },
+ dropdownOptionText: {
+ color: "var(--colorNeutralForeground1)",
+ },
+ dropdownItemHeader: {
+ color: "var(--colorNeutralForeground1)",
},
};
@@ -226,7 +363,32 @@ export const FullTextPoliciesComponent: React.FunctionComponent
))}
-
+
Add full text path
diff --git a/src/Explorer/Controls/Settings/SettingsComponent.less b/src/Explorer/Controls/Settings/SettingsComponent.less
index 5eb2b13be..85b4b4373 100644
--- a/src/Explorer/Controls/Settings/SettingsComponent.less
+++ b/src/Explorer/Controls/Settings/SettingsComponent.less
@@ -4,6 +4,8 @@
height: 100%;
overflow-y: auto;
width: 100%;
+ background-color: var(--colorNeutralBackground1);
+ color: var(--colorNeutralForeground1);
}
.settingsV2ToolTip {
@@ -23,6 +25,8 @@
overflow-y: auto;
width: 100%;
font-family: @DataExplorerFont;
+ background-color: var(--colorNeutralBackground1);
+ color: var(--colorNeutralForeground1);
}
.settingsV2Editor {
diff --git a/src/Explorer/Controls/Settings/SettingsComponent.tsx b/src/Explorer/Controls/Settings/SettingsComponent.tsx
index 9a87f5b0c..0802fc863 100644
--- a/src/Explorer/Controls/Settings/SettingsComponent.tsx
+++ b/src/Explorer/Controls/Settings/SettingsComponent.tsx
@@ -1,4 +1,4 @@
-import { IPivotItemProps, IPivotProps, Pivot, PivotItem } from "@fluentui/react";
+import { IPivotItemProps, IPivotProps, Pivot, PivotItem, Stack } from "@fluentui/react";
import { sendMessage } from "Common/MessageHandler";
import { FabricMessageTypes } from "Contracts/FabricMessageTypes";
import {
@@ -1477,31 +1477,111 @@ export class SettingsComponent extends React.Component {
- const pivotItemProps: IPivotItemProps = {
- itemKey: SettingsV2TabTypes[tab.tab],
- style: { marginTop: 20 },
- headerText: getTabTitle(tab.tab),
- headerButtonProps: {
- "data-test": `settings-tab-header/${SettingsV2TabTypes[tab.tab]}`,
+ const pivotStyles = {
+ root: {
+ backgroundColor: "var(--colorNeutralBackground1)",
+ color: "var(--colorNeutralForeground1)",
+ selectors: {
+ "& .ms-Pivot-link": {
+ color: "var(--colorNeutralForeground1)",
+ },
+ "& .ms-Pivot-link.is-selected::before": {
+ backgroundColor: "var(--colorCompoundBrandBackground)",
+ },
},
- };
+ },
+ link: {
+ backgroundColor: "var(--colorNeutralBackground1)",
+ color: "var(--colorNeutralForeground1)",
+ selectors: {
+ "&:hover": {
+ backgroundColor: "var(--colorNeutralBackground1)",
+ color: "var(--colorNeutralForeground1)",
+ },
+ "&:active": {
+ backgroundColor: "var(--colorNeutralBackground1)",
+ color: "var(--colorNeutralForeground1)",
+ },
+ '&[aria-selected="true"]': {
+ backgroundColor: "var(--colorNeutralBackground1)",
+ color: "var(--colorNeutralForeground1)",
+ selectors: {
+ "&:hover": {
+ backgroundColor: "var(--colorNeutralBackground1)",
+ color: "var(--colorNeutralForeground1)",
+ },
+ "&:active": {
+ backgroundColor: "var(--colorNeutralBackground1)",
+ color: "var(--colorNeutralForeground1)",
+ },
+ },
+ },
+ },
+ },
- return (
-
- {tab.content}
-
- );
- });
+ itemContainer: {
+ // padding: '20px 24px',
+ backgroundColor: "var(--colorNeutralBackground1)",
+ color: "var(--colorNeutralForeground1)",
+ },
+ };
+
+ const contentStyles = {
+ root: {
+ backgroundColor: "var(--colorNeutralBackground1)",
+ color: "var(--colorNeutralForeground1)",
+ // padding: '20px 24px'
+ },
+ };
return (
-
+
{this.shouldShowKeyspaceSharedThroughputMessage() && (
= { root: { paddingLeft: 10, width: 210 } };
+export const shortWidthTextFieldStyles: Partial = {
+ root: { paddingLeft: 10, width: 210 },
+ fieldGroup: {
+ backgroundColor: "var(--colorNeutralBackground2)",
+ borderColor: "var(--colorNeutralStroke1)",
+ },
+ field: {
+ color: "var(--colorNeutralForeground1)",
+ backgroundColor: "var(--colorNeutralBackground2)",
+ },
+};
-export const shortWidthDropDownStyles: Partial = { dropdown: { paddingleft: 10, width: 202 } };
+export const shortWidthDropDownStyles: Partial = {
+ dropdown: { paddingLeft: 10, width: 202 },
+ title: {
+ backgroundColor: "var(--colorNeutralBackground2)",
+ color: "var(--colorNeutralForeground1)",
+ borderColor: "var(--colorNeutralStroke1)",
+ },
+ caretDown: {
+ color: "var(--colorNeutralForeground1)",
+ },
+ callout: {
+ backgroundColor: "var(--colorNeutralBackground2)",
+ border: "1px solid var(--colorNeutralStroke1)",
+ },
+ dropdownItems: {
+ backgroundColor: "var(--colorNeutralBackground2)",
+ },
+ dropdownItem: {
+ backgroundColor: "transparent",
+ color: "var(--colorNeutralForeground1)",
+ selectors: {
+ "&:hover": {
+ backgroundColor: "rgba(255, 255, 255, 0.1)",
+ color: "var(--colorNeutralForeground1)",
+ },
+ "&:focus": {
+ backgroundColor: "rgba(255, 255, 255, 0.1)",
+ color: "var(--colorNeutralForeground1)",
+ },
+ },
+ },
+ dropdownItemSelected: {
+ backgroundColor: "rgba(255, 255, 255, 0.08)",
+ color: "var(--colorNeutralForeground1)",
+ selectors: {
+ "&:hover": {
+ backgroundColor: "rgba(255, 255, 255, 0.1)",
+ color: "var(--colorNeutralForeground1)",
+ },
+ },
+ },
+ dropdownOptionText: {
+ color: "var(--colorNeutralForeground1)",
+ },
+};
export const transparentDetailsRowStyles: Partial = {
root: {
+ backgroundColor: "var(--colorNeutralBackground1)",
+ color: "var(--colorNeutralForeground1)",
selectors: {
":hover": {
- background: "transparent",
+ backgroundColor: "var(--colorNeutralBackground1Hover)",
+ color: "var(--colorNeutralForeground1)",
+ },
+ ":hover .ms-DetailsRow-cell": {
+ backgroundColor: "var(--colorNeutralBackground1Hover)",
+ color: "var(--colorNeutralForeground1)",
+ },
+ "&.ms-DetailsRow": {
+ backgroundColor: "var(--colorNeutralBackground1)",
+ },
+ },
+ },
+ cell: {
+ backgroundColor: "var(--colorNeutralBackground1)",
+ color: "var(--colorNeutralForeground1)",
+ selectors: {
+ ":hover": {
+ backgroundColor: "var(--colorNeutralBackground1Hover)",
+ color: "var(--colorNeutralForeground1)",
},
},
},
@@ -135,9 +209,11 @@ export const transparentDetailsRowStyles: Partial = {
export const transparentDetailsHeaderStyle: Partial = {
root: {
+ color: "var(--colorNeutralForeground1)",
selectors: {
":hover": {
- background: "transparent",
+ background: "var(--colorNeutralBackground1Hover)",
+ color: "var(--colorNeutralForeground1)",
},
},
},
@@ -149,6 +225,35 @@ export const customDetailsListStyles: Partial = {
".ms-FocusZone": {
paddingTop: 0,
},
+ ".ms-DetailsHeader": {
+ backgroundColor: "var(--colorNeutralBackground1)",
+ },
+ ".ms-DetailsHeader-cell": {
+ color: "var(--colorNeutralForeground1)",
+ backgroundColor: "var(--colorNeutralBackground1)",
+ selectors: {
+ ":hover": {
+ backgroundColor: "var(--colorNeutralBackground1Hover)",
+ color: "var(--colorNeutralForeground1)",
+ },
+ },
+ },
+ ".ms-DetailsHeader-cellTitle": {
+ color: "var(--colorNeutralForeground1)",
+ },
+ ".ms-DetailsRow": {
+ color: "var(--colorNeutralForeground1)",
+ },
+ ".ms-DetailsRow-cell": {
+ color: "var(--colorNeutralForeground1)",
+ },
+ // Tooltip styling for cells
+ ".ms-TooltipHost": {
+ color: "var(--colorNeutralForeground1)",
+ },
+ ".ms-DetailsRow-cell .ms-TooltipHost": {
+ color: "var(--colorNeutralForeground1)",
+ },
},
},
};
@@ -166,7 +271,18 @@ export const separatorStyles: Partial = {
};
export const messageBarStyles: Partial = {
- root: { marginTop: "5px", backgroundColor: "white" },
+ root: {
+ marginTop: "5px",
+ backgroundColor: "var(--colorNeutralBackground1)",
+ selectors: {
+ "&.ms-MessageBar--severeWarning": {
+ backgroundColor: "var(--colorNeutralBackground4)",
+ },
+ "&.ms-MessageBar--warning": {
+ backgroundColor: "var(--colorNeutralBackground3)",
+ },
+ },
+ },
text: { fontSize: 14 },
};
@@ -222,9 +338,11 @@ export const getEstimatedSpendingElement = (
const ruRange: string = isAutoscale ? throughput / 10 + " RU/s - " : "";
return (
- Cost estimate*
+ Cost estimate*
{costElement}
- How we calculate this
+
+ How we calculate this
+
{numberOfRegions} region{numberOfRegions > 1 && s}
@@ -238,7 +356,7 @@ export const getEstimatedSpendingElement = (
{priceBreakdown.pricePerRu}/RU
-
+
*{estimatedCostDisclaimer}
@@ -285,7 +403,7 @@ export const updateThroughputDelayedApplyWarningMessage: JSX.Element = (
export const getUpdateThroughputBeyondInstantLimitMessage = (instantMaximumThroughput: number): JSX.Element => {
return (
-
+
Scaling up will take 4-6 hours as it exceeds what Azure Cosmos DB can instantly support currently based on your
number of physical partitions. You can increase your throughput to {instantMaximumThroughput} instantly or proceed
with this value and wait until the scale-up is completed.
@@ -303,7 +421,7 @@ export const getUpdateThroughputBeyondSupportLimitMessage = (
Your request to increase throughput exceeds the pre-allocated capacity which may take longer than expected.
There are three options you can choose from to proceed:
-
This table shared throughput is configured at the keyspace
)}
-
- {pivotItems}
+
);
diff --git a/src/Explorer/Controls/Settings/SettingsRenderUtils.tsx b/src/Explorer/Controls/Settings/SettingsRenderUtils.tsx
index a703771c7..730372b8b 100644
--- a/src/Explorer/Controls/Settings/SettingsRenderUtils.tsx
+++ b/src/Explorer/Controls/Settings/SettingsRenderUtils.tsx
@@ -63,7 +63,7 @@ export interface PriceBreakdown {
export type editorType = "indexPolicy" | "computedProperties" | "dataMasking";
-export const infoAndToolTipTextStyle: ITextStyles = { root: { fontSize: 14, color: "windowtext" } };
+export const infoAndToolTipTextStyle: ITextStyles = { root: { fontSize: 14, color: "var(--colorNeutralForeground1)" } };
export const noLeftPaddingCheckBoxStyle: ICheckboxStyles = {
label: {
@@ -119,15 +119,89 @@ export const addMongoIndexSubElementsTokens: IStackTokens = {
export const mediumWidthStackStyles: IStackStyles = { root: { width: 600 } };
-export const shortWidthTextFieldStyles: Partial
+
+ {tabs.map((tab) => {
+ const pivotItemProps: IPivotItemProps = {
+ itemKey: SettingsV2TabTypes[tab.tab],
+ style: {
+ marginTop: 20,
+ backgroundColor: "var(--colorNeutralBackground1)",
+ color: "var(--colorNeutralForeground1)",
+ },
+ headerText: getTabTitle(tab.tab),
+ headerButtonProps: {
+ "data-test": `settings-tab-header/${SettingsV2TabTypes[tab.tab]}`,
+ },
+ };
+
+ return (
+
+ {tab.content}
+
+ );
+ })}
+
-
+
- You can instantly scale up to {instantMaximumThroughput} RU/s. {instantMaximumThroughput < maximumThroughput && (
- You can asynchronously scale up to any value under {maximumThroughput} RU/s in 4-6 hours. @@ -339,7 +457,7 @@ export const getUpdateThroughputBelowMinimumMessage = (minimum: number): JSX.Ele }; export const saveThroughputWarningMessage: JSX.Element = ( -
-
+
{isVectorSearchEnabled && (
@@ -128,7 +174,7 @@ export const ContainerPolicyComponent: React.FC =
{isFullTextSearchEnabled && (
@@ -144,7 +190,27 @@ export const ContainerPolicyComponent: React.FC =
) : (
{
checkAndSendFullTextPolicyToSettings({
defaultLanguage: getFullTextLanguageOptions()[0].key as never,
diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyComponent.tsx b/src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyComponent.tsx
index b2e7e12c2..8990f7c93 100644
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyComponent.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyComponent.tsx
@@ -1,4 +1,5 @@
-import { MessageBar, MessageBarType, Stack } from "@fluentui/react";
+import { IMessageBarStyles, MessageBar, MessageBarType, Stack } from "@fluentui/react";
+import { monacoTheme, useThemeStore } from "hooks/useTheme";
import * as monaco from "monaco-editor";
import * as React from "react";
import * as DataModels from "../../../../Contracts/DataModels";
@@ -6,7 +7,6 @@ import { loadMonaco } from "../../../LazyMonaco";
import { titleAndInputStackProps, unsavedEditorWarningMessage } from "../SettingsRenderUtils";
import { isDirty, isIndexTransforming } from "../SettingsUtils";
import { IndexingPolicyRefreshComponent } from "./IndexingPolicyRefresh/IndexingPolicyRefreshComponent";
-
export interface IndexingPolicyComponentProps {
shouldDiscardIndexingPolicy: boolean;
resetShouldDiscardIndexingPolicy: () => void;
@@ -31,6 +31,24 @@ export class IndexingPolicyComponent extends React.Component<
private shouldCheckComponentIsDirty = true;
private indexingPolicyDiv = React.createRef();
private indexingPolicyEditor: monaco.editor.IStandaloneCodeEditor;
+ private themeUnsubscribe: () => void;
+
+ private darkThemeMessageBarStyles: Partial = {
+ root: {
+ selectors: {
+ "&.ms-MessageBar--warning": {
+ backgroundColor: "var(--colorStatusWarningBackground1)",
+ border: "1px solid var(--colorStatusWarningBorder1)",
+ },
+ ".ms-MessageBar-icon": {
+ color: "var(--colorNeutralForeground1)",
+ },
+ ".ms-MessageBar-text": {
+ color: "var(--colorNeutralForeground1)",
+ },
+ },
+ },
+ };
constructor(props: IndexingPolicyComponentProps) {
super(props);
@@ -52,6 +70,10 @@ export class IndexingPolicyComponent extends React.Component<
this.onComponentUpdate();
}
+ componentWillUnmount(): void {
+ this.themeUnsubscribe && this.themeUnsubscribe();
+ }
+
public resetIndexingPolicyEditor = (): void => {
if (!this.indexingPolicyEditor) {
this.createIndexingPolicyEditor();
@@ -87,18 +109,30 @@ export class IndexingPolicyComponent extends React.Component<
};
private async createIndexingPolicyEditor(): Promise {
+ if (!this.indexingPolicyDiv.current) {
+ return;
+ }
const value: string = JSON.stringify(this.props.indexingPolicyContent, undefined, 4);
const monaco = await loadMonaco();
- this.indexingPolicyEditor = monaco.editor.create(this.indexingPolicyDiv.current, {
- value: value,
- language: "json",
- readOnly: isIndexTransforming(this.props.indexTransformationProgress),
- ariaLabel: "Indexing Policy",
- });
- if (this.indexingPolicyEditor) {
- const indexingPolicyEditorModel = this.indexingPolicyEditor.getModel();
- indexingPolicyEditorModel.onDidChangeContent(this.onEditorContentChange.bind(this));
- this.props.logIndexingPolicySuccessMessage();
+ if (this.indexingPolicyDiv.current) {
+ this.indexingPolicyEditor = monaco.editor.create(this.indexingPolicyDiv.current, {
+ value: value,
+ language: "json",
+ readOnly: isIndexTransforming(this.props.indexTransformationProgress),
+ ariaLabel: "Indexing Policy",
+ theme: monacoTheme(),
+ });
+ if (this.indexingPolicyEditor) {
+ this.themeUnsubscribe = useThemeStore.subscribe(() => {
+ if (this.indexingPolicyEditor) {
+ monaco.editor.setTheme(monacoTheme());
+ }
+ });
+
+ const indexingPolicyEditorModel = this.indexingPolicyEditor.getModel();
+ indexingPolicyEditorModel.onDidChangeContent(this.onEditorContentChange.bind(this));
+ this.props.logIndexingPolicySuccessMessage();
+ }
}
}
@@ -121,7 +155,13 @@ export class IndexingPolicyComponent extends React.Component<
refreshIndexTransformationProgress={this.props.refreshIndexTransformationProgress}
/>
{isDirty(this.props.indexingPolicyContent, this.props.indexingPolicyContentBaseline) && (
- {unsavedEditorWarningMessage("indexPolicy")}
+
+ {unsavedEditorWarningMessage("indexPolicy")}
+
)}
diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyRefresh/__snapshots__/IndexingPolicyRefreshComponent.test.tsx.snap b/src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyRefresh/__snapshots__/IndexingPolicyRefreshComponent.test.tsx.snap
index c658dd978..813b86e05 100644
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyRefresh/__snapshots__/IndexingPolicyRefreshComponent.test.tsx.snap
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyRefresh/__snapshots__/IndexingPolicyRefreshComponent.test.tsx.snap
@@ -8,7 +8,7 @@ exports[`IndexingPolicyRefreshComponent renders 1`] = `
styles={
{
"root": {
- "color": "windowtext",
+ "color": "var(--colorNeutralForeground1)",
"fontSize": 14,
},
}
diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/MongoIndexingPolicyComponent.tsx b/src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/MongoIndexingPolicyComponent.tsx
index a55630532..36e999049 100644
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/MongoIndexingPolicyComponent.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/MongoIndexingPolicyComponent.tsx
@@ -3,6 +3,7 @@ import {
DetailsListLayoutMode,
IColumn,
IconButton,
+ IMessageBarStyles,
MessageBar,
MessageBarType,
SelectionMode,
@@ -30,12 +31,12 @@ import {
} from "../../SettingsRenderUtils";
import {
AddMongoIndexProps,
- MongoIndexIdField,
- MongoIndexTypes,
- MongoNotificationType,
getMongoIndexType,
getMongoIndexTypeText,
isIndexTransforming,
+ MongoIndexIdField,
+ MongoIndexTypes,
+ MongoNotificationType,
} from "../../SettingsUtils";
import { IndexingPolicyRefreshComponent } from "../IndexingPolicyRefresh/IndexingPolicyRefreshComponent";
import { AddMongoIndexComponent } from "./AddMongoIndexComponent";
@@ -63,6 +64,24 @@ interface MongoIndexDisplayProps {
export class MongoIndexingPolicyComponent extends React.Component {
private shouldCheckComponentIsDirty = true;
private addMongoIndexComponentRefs: React.RefObject[] = [];
+
+ private darkThemeMessageBarStyles: Partial = {
+ root: {
+ selectors: {
+ "&.ms-MessageBar--warning": {
+ backgroundColor: "var(--colorStatusWarningBackground1)",
+ border: "1px solid var(--colorStatusWarningBorder1)",
+ },
+ ".ms-MessageBar-icon": {
+ color: "var(--colorNeutralForeground1)",
+ },
+ ".ms-MessageBar-text": {
+ color: "var(--colorNeutralForeground1)",
+ },
+ },
+ },
+ };
+
private initialIndexesColumns: IColumn[] = [
{ key: "definition", name: "Definition", fieldName: "definition", minWidth: 100, maxWidth: 200, isResizable: true },
{ key: "type", name: "Type", fieldName: "type", minWidth: 100, maxWidth: 200, isResizable: true },
@@ -171,8 +190,8 @@ export class MongoIndexingPolicyComponent extends React.Component{definition},
- type: {getMongoIndexTypeText(type)} ,
+ definition: {definition} ,
+ type: {getMongoIndexTypeText(type)} ,
actionButton: definition === MongoIndexIdField ? <> : this.getActionButton(arrayPosition, isCurrentIndex),
};
}
@@ -306,7 +325,15 @@ export class MongoIndexingPolicyComponent extends React.Component{warningMessage} }
+ {warningMessage && (
+
+ {warningMessage}
+
+ )}
);
};
diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/__snapshots__/AddMongoIndexComponent.test.tsx.snap b/src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/__snapshots__/AddMongoIndexComponent.test.tsx.snap
index 32fd68bfb..dbe7d78f4 100644
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/__snapshots__/AddMongoIndexComponent.test.tsx.snap
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/__snapshots__/AddMongoIndexComponent.test.tsx.snap
@@ -22,6 +22,14 @@ exports[`AddMongoIndexComponent renders 1`] = `
onChange={[Function]}
styles={
{
+ "field": {
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "color": "var(--colorNeutralForeground1)",
+ },
+ "fieldGroup": {
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "borderColor": "var(--colorNeutralStroke1)",
+ },
"root": {
"paddingLeft": 10,
"width": 210,
@@ -49,10 +57,52 @@ exports[`AddMongoIndexComponent renders 1`] = `
selectedKey="Single"
styles={
{
+ "callout": {
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "border": "1px solid var(--colorNeutralStroke1)",
+ },
+ "caretDown": {
+ "color": "var(--colorNeutralForeground1)",
+ },
"dropdown": {
- "paddingleft": 10,
+ "paddingLeft": 10,
"width": 202,
},
+ "dropdownItem": {
+ "backgroundColor": "transparent",
+ "color": "var(--colorNeutralForeground1)",
+ "selectors": {
+ "&:focus": {
+ "backgroundColor": "rgba(255, 255, 255, 0.1)",
+ "color": "var(--colorNeutralForeground1)",
+ },
+ "&:hover": {
+ "backgroundColor": "rgba(255, 255, 255, 0.1)",
+ "color": "var(--colorNeutralForeground1)",
+ },
+ },
+ },
+ "dropdownItemSelected": {
+ "backgroundColor": "rgba(255, 255, 255, 0.08)",
+ "color": "var(--colorNeutralForeground1)",
+ "selectors": {
+ "&:hover": {
+ "backgroundColor": "rgba(255, 255, 255, 0.1)",
+ "color": "var(--colorNeutralForeground1)",
+ },
+ },
+ },
+ "dropdownItems": {
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ },
+ "dropdownOptionText": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ "title": {
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "borderColor": "var(--colorNeutralStroke1)",
+ "color": "var(--colorNeutralForeground1)",
+ },
}
}
/>
diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/__snapshots__/MongoIndexingPolicyComponent.test.tsx.snap b/src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/__snapshots__/MongoIndexingPolicyComponent.test.tsx.snap
index 7a200006c..10b87a214 100644
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/__snapshots__/MongoIndexingPolicyComponent.test.tsx.snap
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/__snapshots__/MongoIndexingPolicyComponent.test.tsx.snap
@@ -1,7 +1,13 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`MongoIndexingPolicyComponent error shown for collection with compound indexes 1`] = `
-
+
Collections with compound indexes are not yet supported in the indexing editor. To modify indexing policy for this collection, use the Mongo Shell.
`;
@@ -17,10 +23,21 @@ exports[`MongoIndexingPolicyComponent renders 1`] = `
+
For queries that filter on multiple properties, create multiple single field indexes instead of a compound index.
Compound indexes
@@ -83,9 +100,37 @@ exports[`MongoIndexingPolicyComponent renders 1`] = `
{
"root": {
"selectors": {
+ ".ms-DetailsHeader": {
+ "backgroundColor": "var(--colorNeutralBackground1)",
+ },
+ ".ms-DetailsHeader-cell": {
+ "backgroundColor": "var(--colorNeutralBackground1)",
+ "color": "var(--colorNeutralForeground1)",
+ "selectors": {
+ ":hover": {
+ "backgroundColor": "var(--colorNeutralBackground1Hover)",
+ "color": "var(--colorNeutralForeground1)",
+ },
+ },
+ },
+ ".ms-DetailsHeader-cellTitle": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-DetailsRow": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-DetailsRow-cell": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-DetailsRow-cell .ms-TooltipHost": {
+ "color": "var(--colorNeutralForeground1)",
+ },
".ms-FocusZone": {
"paddingTop": 0,
},
+ ".ms-TooltipHost": {
+ "color": "var(--colorNeutralForeground1)",
+ },
},
},
}
diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/PartitionKeyComponent.tsx b/src/Explorer/Controls/Settings/SettingsSubComponents/PartitionKeyComponent.tsx
index 89810bcb6..a58bf50cd 100644
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/PartitionKeyComponent.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/PartitionKeyComponent.tsx
@@ -1,6 +1,7 @@
import {
DefaultButton,
FontWeights,
+ IMessageBarStyles,
Link,
MessageBar,
MessageBarType,
@@ -32,6 +33,23 @@ export interface PartitionKeyComponentProps {
isReadOnly?: boolean; // true: cannot change partition key
}
+const darkThemeMessageBarStyles: Partial = {
+ root: {
+ selectors: {
+ "&.ms-MessageBar--warning": {
+ backgroundColor: "var(--colorStatusWarningBackground1)",
+ border: "1px solid var(--colorStatusWarningBorder1)",
+ },
+ ".ms-MessageBar-icon": {
+ color: "var(--colorNeutralForeground1)",
+ },
+ ".ms-MessageBar-text": {
+ color: "var(--colorNeutralForeground1)",
+ },
+ },
+ },
+};
+
export const PartitionKeyComponent: React.FC = ({
database,
collection,
@@ -66,13 +84,15 @@ export const PartitionKeyComponent: React.FC = ({
const partitionKeyValue = getPartitionKeyValue();
const textHeadingStyle = {
- root: { fontWeight: FontWeights.semibold, fontSize: 16 },
+ root: { fontWeight: FontWeights.semibold, fontSize: 16, color: "var(--colorNeutralForeground1)" },
};
const textSubHeadingStyle = {
- root: { fontWeight: FontWeights.semibold },
+ root: { fontWeight: FontWeights.semibold, color: "var(--colorNeutralForeground1)" },
+ };
+ const textSubHeadingStyle1 = {
+ root: { color: "var(--colorNeutralForeground1)" },
};
-
const startPollingforUpdate = (currentJob: DataTransferJobGetResults) => {
if (isCurrentJobInProgress(currentJob)) {
const jobName = currentJob?.properties?.jobName;
@@ -168,26 +188,33 @@ export const PartitionKeyComponent: React.FC = ({
Partitioning
- {partitionKeyValue}
- {isHierarchicalPartitionedContainer() ? "Hierarchical" : "Non-hierarchical"}
+ {partitionKeyValue}
+
+ {isHierarchicalPartitionedContainer() ? "Hierarchical" : "Non-hierarchical"}
+
{!isReadOnly && (
<>
-
+
To safeguard the integrity of the data being copied to the new container, ensure that no updates are made to
the source container for the entire duration of the partition key change process.
Learn more
-
+
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.
diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/SubSettingsComponent.tsx b/src/Explorer/Controls/Settings/SettingsSubComponents/SubSettingsComponent.tsx
index c2a0322c5..e2da4db0b 100644
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/SubSettingsComponent.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/SubSettingsComponent.tsx
@@ -1,4 +1,15 @@
-import { ChoiceGroup, IChoiceGroupOption, Label, Link, MessageBar, Stack, Text, TextField } from "@fluentui/react";
+import {
+ ChoiceGroup,
+ IChoiceGroupOption,
+ Label,
+ Link,
+ MessageBar,
+ Stack,
+ Text,
+ TextField,
+ TooltipHost,
+ mergeStyleSets,
+} from "@fluentui/react";
import * as React from "react";
import * as ViewModels from "../../../../Contracts/ViewModels";
import { userContext } from "../../../../UserContext";
@@ -25,6 +36,11 @@ import {
} from "../SettingsUtils";
import { ToolTipLabelComponent } from "./ToolTipLabelComponent";
+const classNames = mergeStyleSets({
+ hintText: {
+ color: "var(--colorNeutralForeground1)", // theme-aware
+ },
+});
export interface SubSettingsComponentProps {
collection: ViewModels.Collection;
timeToLive: TtlType;
@@ -185,13 +201,31 @@ export class SubSettingsComponent extends React.Component
- To enable time-to-live (TTL) for your collection/documents,
-
- create a TTL index
-
- .
+
+ To enable time-to-live (TTL) for your collection/documents,{" "}
+
+ create a TTL index
+
+ .
+
) : (
@@ -319,23 +353,34 @@ export class SubSettingsComponent extends React.Component (
{this.getPartitionKeyVisible() && (
-
+
)}
{userContext.apiType === "SQL" && this.isLargePartitionKeyEnabled() && (
- Large {this.partitionKeyName.toLowerCase()} has been enabled.
+ Large {this.partitionKeyName.toLowerCase()} has been enabled.
)}
{userContext.apiType === "SQL" &&
(this.isHierarchicalPartitionedContainer() ? (
- Hierarchically partitioned container.
+ Hierarchically partitioned container.
) : (
- Non-hierarchically partitioned container.
+ Non-hierarchically partitioned container.
))}
);
diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputBucketsComponent.tsx b/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputBucketsComponent.tsx
index a0b85cabf..f49d60967 100644
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputBucketsComponent.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputBucketsComponent.tsx
@@ -65,7 +65,7 @@ export const ThroughputBucketsComponent: FC = (
return (
-
+
{throughputBuckets?.map((bucket) => (
@@ -77,7 +77,15 @@ export const ThroughputBucketsComponent: FC = (
onChange={(newValue) => handleBucketChange(bucket.id, newValue)}
showValue={false}
label={`Bucket ${bucket.id}${bucket.id === 1 ? " (Data Explorer Query Bucket)" : ""}`}
- styles={{ root: { flex: 2, maxWidth: 400 } }}
+ styles={{
+ root: { flex: 2, maxWidth: 400 },
+ titleLabel: {
+ color:
+ bucket.maxThroughputPercentage === 100
+ ? "var(--colorNeutralForeground4)"
+ : "var(--colorNeutralForeground1)",
+ },
+ }}
disabled={bucket.maxThroughputPercentage === 100}
/>
- Updated cost per month
+
+ Updated cost per month
+
-
+
{newPrices.currencySign} {calculateEstimateNumber(newPrices.monthlyPrice / 10)} min
-
+
{newPrices.currencySign} {calculateEstimateNumber(newPrices.monthlyPrice)} max
@@ -254,12 +273,24 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
return (
{newThroughput && newThroughputCostElement()}
- Current cost per month
-
-
+
+ Current cost per month
+
+
+
{prices.currencySign} {calculateEstimateNumber(prices.monthlyPrice / 10)} min
-
+
{prices.currencySign} {calculateEstimateNumber(prices.monthlyPrice)} max
@@ -269,7 +300,12 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
return getEstimatedSpendingElement(costElement(), newThroughput ?? throughput, numberOfRegions, prices, true);
};
-
+ settingsAndScaleStyle = {
+ root: {
+ width: ThroughputInputAutoPilotV3Component.TEXT_WIDTH_33,
+ color: ThroughputInputAutoPilotV3Component.TEXT_COLOR_PRIMARY,
+ },
+ };
private getEstimatedManualSpendElement = (
throughput: number,
serverId: string,
@@ -289,15 +325,17 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
);
return (
- Updated cost per month
+
+ Updated cost per month
+
-
+
{newPrices.currencySign} {calculateEstimateNumber(newPrices.hourlyPrice)}/hr
-
+
{newPrices.currencySign} {calculateEstimateNumber(newPrices.dailyPrice)}/day
-
+
{newPrices.currencySign} {calculateEstimateNumber(newPrices.monthlyPrice)}/mo
@@ -310,15 +348,17 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
return (
{newThroughput && newThroughputCostElement()}
- Current cost per month
+
+ Current cost per month
+
-
+
{prices.currencySign} {calculateEstimateNumber(prices.hourlyPrice)}/hr
-
+
{prices.currencySign} {calculateEstimateNumber(prices.dailyPrice)}/day
-
+
{prices.currencySign} {calculateEstimateNumber(prices.monthlyPrice)}/mo
@@ -381,7 +421,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
{this.overrideWithProvisionedThroughputSettings() && (
{manualToAutoscaleDisclaimerElement}
@@ -407,8 +447,8 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
const capacity: string = this.props.isFixed ? "Fixed" : "Unlimited";
return (
-
- {capacity}
+
+ {capacity}
);
};
@@ -418,7 +458,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
{
selectors: {
"::before": {
- backgroundColor: "rgb(200, 200, 200)",
+ backgroundColor: "var(--colorNeutralStroke2)",
height: "3px",
marginTop: "-1px",
},
@@ -457,10 +497,10 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
{
backgroundColor:
this.getCurrentRuRange() === "instant"
- ? "rgb(0, 120, 212)"
+ ? "var(--colorBrandBackground)"
: this.getCurrentRuRange() === "delayed"
- ? "rgb(255 216 109)"
- : "rgb(251, 217, 203)",
+ ? "var(--colorStatusWarningBackground1)"
+ : "var(--colorStatusDangerBackground1)",
},
],
});
@@ -497,14 +537,17 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
- {this.props.minimum.toLocaleString()}
+ {this.props.minimum.toLocaleString(ThroughputInputAutoPilotV3Component.LOCALE_EN_US)}
- {this.props.instantMaximumThroughput.toLocaleString()}
+ {this.props.instantMaximumThroughput.toLocaleString(ThroughputInputAutoPilotV3Component.LOCALE_EN_US)}
+
+
+ {this.props.softAllowedMaximumThroughput.toLocaleString(ThroughputInputAutoPilotV3Component.LOCALE_EN_US)}
- {this.props.softAllowedMaximumThroughput.toLocaleString()}
+ {this.props.softAllowedMaximumThroughput.toLocaleString(ThroughputInputAutoPilotV3Component.LOCALE_EN_US)}
@@ -547,12 +590,41 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
}
};
+ private darkThemeMessageBarStyles: Partial = {
+ root: {
+ marginTop: "5px",
+ selectors: {
+ "&.ms-MessageBar--severeWarning": {
+ backgroundColor: "var(--colorStatusDangerBackground1)",
+ border: "1px solid var(--colorStatusDangerBorder1)",
+ },
+ "&.ms-MessageBar--warning": {
+ backgroundColor: "var(--colorStatusWarningBackground1)",
+ border: "1px solid var(--colorStatusWarningBorder1)",
+ },
+ "&.ms-MessageBar--info": {
+ backgroundColor: "var(--colorNeutralBackground3)",
+ border: "1px solid var(--colorNeutralStroke1)",
+ },
+ ".ms-MessageBar-icon": {
+ color: "var(--colorNeutralForeground1)",
+ },
+ ".ms-MessageBar-text": {
+ color: "var(--colorNeutralForeground1)",
+ },
+ },
+ },
+ };
+
private getThroughputWarningMessageBar = (): JSX.Element => {
const isSevereWarning: boolean =
this.currentThroughputValue() > this.props.softAllowedMaximumThroughput ||
this.currentThroughputValue() < this.props.minimum;
return (
-
+
{this.getThroughputWarningMessageText()}
);
@@ -565,10 +637,13 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
{/* Column 1: Minimum RU/s */}
-
+
Minimum RU/s
-
{AutoPilotUtils.getMinRUsBasedOnUserInput(this.props.maxAutoPilotThroughput)}
@@ -596,6 +672,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
fontSize: 12,
fontWeight: 400,
paddingBottom: 6,
+ color: "var(--colorNeutralForeground1)",
}}
>
x 10 =
@@ -604,10 +681,13 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
{/* Column 3: Maximum RU/s */}
-
+
Maximum RU/s
-
)}
{this.props.isAutoPilotSelected ? (
-
+
Based on usage, your {this.props.collectionName ? "container" : "database"} throughput will scale from{" "}
{AutoPilotUtils.getMinRUsBasedOnUserInput(this.props.maxAutoPilotThroughput)} RU/s (10% of max RU/s) -{" "}
@@ -687,7 +784,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
{this.state.exceedFreeTierThroughput && (
{`Billing will apply if you provision more than ${SharedConstants.FreeTierLimits.RU} RU/s of manual throughput, or if the resource scales beyond ${SharedConstants.FreeTierLimits.RU} RU/s with autoscale.`}
@@ -696,7 +793,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
)}
{!this.overrideWithProvisionedThroughputSettings() && (
-
+
Estimate your required RU/s with
{` capacity calculator`}
{warningMessage}
diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/__snapshots__/ThroughputInputAutoPilotV3Component.test.tsx.snap b/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/__snapshots__/ThroughputInputAutoPilotV3Component.test.tsx.snap
index 7b144745e..8955b7589 100644
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/__snapshots__/ThroughputInputAutoPilotV3Component.test.tsx.snap
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/__snapshots__/ThroughputInputAutoPilotV3Component.test.tsx.snap
@@ -16,17 +16,35 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
}
}
role="alert"
- >
-
+ }
+ >
+
Your bill will be affected as you update your throughput settings. Please review the updated cost estimate below before saving your changes
@@ -41,7 +59,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
styles={
{
"root": {
- "color": "windowtext",
+ "color": "var(--colorNeutralForeground1)",
"fontSize": 14,
},
}
@@ -62,11 +80,27 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
styles={
{
"root": {
- "backgroundColor": "white",
"marginTop": "5px",
- },
- "text": {
- "fontSize": 14,
+ "selectors": {
+ "&.ms-MessageBar--info": {
+ "backgroundColor": "var(--colorNeutralBackground3)",
+ "border": "1px solid var(--colorNeutralStroke1)",
+ },
+ "&.ms-MessageBar--severeWarning": {
+ "backgroundColor": "var(--colorStatusDangerBackground1)",
+ "border": "1px solid var(--colorStatusDangerBorder1)",
+ },
+ "&.ms-MessageBar--warning": {
+ "backgroundColor": "var(--colorStatusWarningBackground1)",
+ "border": "1px solid var(--colorStatusWarningBorder1)",
+ },
+ ".ms-MessageBar-icon": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-MessageBar-text": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ },
},
}
}
@@ -76,7 +110,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
styles={
{
"root": {
- "color": "windowtext",
+ "color": "var(--colorNeutralForeground1)",
"fontSize": 14,
},
}
@@ -121,15 +155,47 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
".ms-ChoiceField-field.is-checked::before": {
"borderColor": undefined,
},
+ ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
".ms-ChoiceField-wrapper label": {
+ "color": "var(--colorNeutralForeground1)",
"fontFamily": undefined,
"fontSize": 14,
"padding": "2px 5px",
"whiteSpace": "nowrap",
},
+ ".ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceFieldLabel:hover": {
+ "color": "var(--colorNeutralForeground1)",
+ },
},
},
],
+ "label": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ "root": {
+ "selectors": {
+ ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceField-innerField": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceField:hover .ms-ChoiceField-innerField": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceField:hover .ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ },
+ },
}
}
/>
@@ -185,6 +251,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
1,000,000
+
+ 1,000,000
+
-
+
Storage capacity
-
+
Unlimited
@@ -500,6 +643,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
-
+
Estimate your required RU/s with
-
+
Storage capacity
-
+
Unlimited
@@ -991,6 +1267,7 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
-
+
Estimate your required RU/s with
-
+
Storage capacity
-
+
Unlimited
@@ -1431,6 +1837,7 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
- {this.props.label && {this.props.label} }
+ {this.props.label && (
+ {this.props.label}
+ )}
{this.props.toolTipElement && (
+
Non-hierarchical
To safeguard the integrity of the data being copied to the new container, ensure that no updates are made to the source container for the entire duration of the partition key change process.
Learn more
-
+
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.
-
+
Non-hierarchical
diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/SubSettingsComponent.test.tsx.snap b/src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/SubSettingsComponent.test.tsx.snap
index e6b66c4c9..10bf3b17a 100644
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/SubSettingsComponent.test.tsx.snap
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/SubSettingsComponent.test.tsx.snap
@@ -52,15 +52,47 @@ exports[`SubSettingsComponent analyticalTimeToLive hidden 1`] = `
".ms-ChoiceField-field.is-checked::before": {
"borderColor": "",
},
+ ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
".ms-ChoiceField-wrapper label": {
+ "color": "var(--colorNeutralForeground1)",
"fontFamily": undefined,
"fontSize": 14,
"padding": "2px 5px",
"whiteSpace": "nowrap",
},
+ ".ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceFieldLabel:hover": {
+ "color": "var(--colorNeutralForeground1)",
+ },
},
},
],
+ "label": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ "root": {
+ "selectors": {
+ ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceField-innerField": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceField:hover .ms-ChoiceField-innerField": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceField:hover .ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ },
+ },
}
}
/>
@@ -74,17 +106,53 @@ exports[`SubSettingsComponent analyticalTimeToLive hidden 1`] = `
required={true}
styles={
{
+ "field": {
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "color": "var(--colorNeutralForeground1)",
+ "selectors": {
+ ":disabled": {
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "color": "var(--colorNeutralForeground2)",
+ },
+ },
+ },
"fieldGroup": {
- "borderColor": "",
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "borderColor": "var(--colorNeutralStroke1)",
"height": 25,
"selectors": {
":disabled": {
- "backgroundColor": undefined,
- "borderColor": undefined,
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "borderColor": "var(--colorNeutralStroke1)",
+ "color": "var(--colorNeutralForeground2)",
+ },
+ "input": {
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "color": "var(--colorNeutralForeground1)",
+ },
+ "input#autopilotInput": {
+ "backgroundColor": "var(--colorNeutralBackground4)",
+ "color": "var(--colorNeutralForeground1)",
+ },
+ "input:disabled": {
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "color": "var(--colorNeutralForeground2)",
},
},
"width": 300,
},
+ "subComponentStyles": {
+ "label": {
+ "root": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ },
+ },
+ "suffix": {
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "border": "1px solid var(--colorNeutralStroke1)",
+ "color": "var(--colorNeutralForeground1)",
+ },
}
}
suffix="second(s)"
@@ -122,15 +190,47 @@ exports[`SubSettingsComponent analyticalTimeToLive hidden 1`] = `
".ms-ChoiceField-field.is-checked::before": {
"borderColor": "",
},
+ ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
".ms-ChoiceField-wrapper label": {
+ "color": "var(--colorNeutralForeground1)",
"fontFamily": undefined,
"fontSize": 14,
"padding": "2px 5px",
"whiteSpace": "nowrap",
},
+ ".ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceFieldLabel:hover": {
+ "color": "var(--colorNeutralForeground1)",
+ },
},
},
],
+ "label": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ "root": {
+ "selectors": {
+ ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceField-innerField": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceField:hover .ms-ChoiceField-innerField": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceField:hover .ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ },
+ },
}
}
/>
@@ -145,7 +245,7 @@ exports[`SubSettingsComponent analyticalTimeToLive hidden 1`] = `
styles={
{
"root": {
- "color": "windowtext",
+ "color": "var(--colorNeutralForeground1)",
"fontSize": 14,
},
}
@@ -186,15 +286,47 @@ exports[`SubSettingsComponent analyticalTimeToLive hidden 1`] = `
".ms-ChoiceField-field.is-checked::before": {
"borderColor": "",
},
+ ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
".ms-ChoiceField-wrapper label": {
+ "color": "var(--colorNeutralForeground1)",
"fontFamily": undefined,
"fontSize": 14,
"padding": "2px 5px",
"whiteSpace": "nowrap",
},
+ ".ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceFieldLabel:hover": {
+ "color": "var(--colorNeutralForeground1)",
+ },
},
},
],
+ "label": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ "root": {
+ "selectors": {
+ ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceField-innerField": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceField:hover .ms-ChoiceField-innerField": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceField:hover .ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ },
+ },
}
}
/>
@@ -206,32 +338,83 @@ exports[`SubSettingsComponent analyticalTimeToLive hidden 1`] = `
}
}
>
-
+ >
+
Large
partition key
has been enabled.
-
+
Non-hierarchically partitioned container.
@@ -248,17 +431,53 @@ exports[`SubSettingsComponent analyticalTimeToLive hidden 1`] = `
label="Unique keys"
styles={
{
+ "field": {
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "color": "var(--colorNeutralForeground1)",
+ "selectors": {
+ ":disabled": {
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "color": "var(--colorNeutralForeground2)",
+ },
+ },
+ },
"fieldGroup": {
- "borderColor": "",
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "borderColor": "var(--colorNeutralStroke1)",
"height": 25,
"selectors": {
":disabled": {
- "backgroundColor": undefined,
- "borderColor": undefined,
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "borderColor": "var(--colorNeutralStroke1)",
+ "color": "var(--colorNeutralForeground2)",
+ },
+ "input": {
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "color": "var(--colorNeutralForeground1)",
+ },
+ "input#autopilotInput": {
+ "backgroundColor": "var(--colorNeutralBackground4)",
+ "color": "var(--colorNeutralForeground1)",
+ },
+ "input:disabled": {
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "color": "var(--colorNeutralForeground2)",
},
},
"width": 300,
},
+ "subComponentStyles": {
+ "label": {
+ "root": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ },
+ },
+ "suffix": {
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "border": "1px solid var(--colorNeutralStroke1)",
+ "color": "var(--colorNeutralForeground1)",
+ },
}
}
/>
@@ -318,15 +537,47 @@ exports[`SubSettingsComponent analyticalTimeToLiveSeconds hidden 1`] = `
".ms-ChoiceField-field.is-checked::before": {
"borderColor": "",
},
+ ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
".ms-ChoiceField-wrapper label": {
+ "color": "var(--colorNeutralForeground1)",
"fontFamily": undefined,
"fontSize": 14,
"padding": "2px 5px",
"whiteSpace": "nowrap",
},
+ ".ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceFieldLabel:hover": {
+ "color": "var(--colorNeutralForeground1)",
+ },
},
},
],
+ "label": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ "root": {
+ "selectors": {
+ ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceField-innerField": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceField:hover .ms-ChoiceField-innerField": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceField:hover .ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ },
+ },
}
}
/>
@@ -340,17 +591,53 @@ exports[`SubSettingsComponent analyticalTimeToLiveSeconds hidden 1`] = `
required={true}
styles={
{
+ "field": {
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "color": "var(--colorNeutralForeground1)",
+ "selectors": {
+ ":disabled": {
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "color": "var(--colorNeutralForeground2)",
+ },
+ },
+ },
"fieldGroup": {
- "borderColor": "",
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "borderColor": "var(--colorNeutralStroke1)",
"height": 25,
"selectors": {
":disabled": {
- "backgroundColor": undefined,
- "borderColor": undefined,
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "borderColor": "var(--colorNeutralStroke1)",
+ "color": "var(--colorNeutralForeground2)",
+ },
+ "input": {
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "color": "var(--colorNeutralForeground1)",
+ },
+ "input#autopilotInput": {
+ "backgroundColor": "var(--colorNeutralBackground4)",
+ "color": "var(--colorNeutralForeground1)",
+ },
+ "input:disabled": {
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "color": "var(--colorNeutralForeground2)",
},
},
"width": 300,
},
+ "subComponentStyles": {
+ "label": {
+ "root": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ },
+ },
+ "suffix": {
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "border": "1px solid var(--colorNeutralStroke1)",
+ "color": "var(--colorNeutralForeground1)",
+ },
}
}
suffix="second(s)"
@@ -388,15 +675,47 @@ exports[`SubSettingsComponent analyticalTimeToLiveSeconds hidden 1`] = `
".ms-ChoiceField-field.is-checked::before": {
"borderColor": "",
},
+ ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
".ms-ChoiceField-wrapper label": {
+ "color": "var(--colorNeutralForeground1)",
"fontFamily": undefined,
"fontSize": 14,
"padding": "2px 5px",
"whiteSpace": "nowrap",
},
+ ".ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceFieldLabel:hover": {
+ "color": "var(--colorNeutralForeground1)",
+ },
},
},
],
+ "label": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ "root": {
+ "selectors": {
+ ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceField-innerField": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceField:hover .ms-ChoiceField-innerField": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceField:hover .ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ },
+ },
}
}
/>
@@ -442,15 +761,47 @@ exports[`SubSettingsComponent analyticalTimeToLiveSeconds hidden 1`] = `
".ms-ChoiceField-field.is-checked::before": {
"borderColor": undefined,
},
+ ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
".ms-ChoiceField-wrapper label": {
+ "color": "var(--colorNeutralForeground1)",
"fontFamily": undefined,
"fontSize": 14,
"padding": "2px 5px",
"whiteSpace": "nowrap",
},
+ ".ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceFieldLabel:hover": {
+ "color": "var(--colorNeutralForeground1)",
+ },
},
},
],
+ "label": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ "root": {
+ "selectors": {
+ ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceField-innerField": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceField:hover .ms-ChoiceField-innerField": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceField:hover .ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ },
+ },
}
}
/>
@@ -466,7 +817,7 @@ exports[`SubSettingsComponent analyticalTimeToLiveSeconds hidden 1`] = `
styles={
{
"root": {
- "color": "windowtext",
+ "color": "var(--colorNeutralForeground1)",
"fontSize": 14,
},
}
@@ -507,15 +858,47 @@ exports[`SubSettingsComponent analyticalTimeToLiveSeconds hidden 1`] = `
".ms-ChoiceField-field.is-checked::before": {
"borderColor": "",
},
+ ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
".ms-ChoiceField-wrapper label": {
+ "color": "var(--colorNeutralForeground1)",
"fontFamily": undefined,
"fontSize": 14,
"padding": "2px 5px",
"whiteSpace": "nowrap",
},
+ ".ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceFieldLabel:hover": {
+ "color": "var(--colorNeutralForeground1)",
+ },
},
},
],
+ "label": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ "root": {
+ "selectors": {
+ ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceField-innerField": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceField:hover .ms-ChoiceField-innerField": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceField:hover .ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ },
+ },
}
}
/>
@@ -527,32 +910,83 @@ exports[`SubSettingsComponent analyticalTimeToLiveSeconds hidden 1`] = `
}
}
>
-
+ >
+
Large
partition key
has been enabled.
-
+
Non-hierarchically partitioned container.
@@ -569,17 +1003,53 @@ exports[`SubSettingsComponent analyticalTimeToLiveSeconds hidden 1`] = `
label="Unique keys"
styles={
{
+ "field": {
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "color": "var(--colorNeutralForeground1)",
+ "selectors": {
+ ":disabled": {
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "color": "var(--colorNeutralForeground2)",
+ },
+ },
+ },
"fieldGroup": {
- "borderColor": "",
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "borderColor": "var(--colorNeutralStroke1)",
"height": 25,
"selectors": {
":disabled": {
- "backgroundColor": undefined,
- "borderColor": undefined,
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "borderColor": "var(--colorNeutralStroke1)",
+ "color": "var(--colorNeutralForeground2)",
+ },
+ "input": {
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "color": "var(--colorNeutralForeground1)",
+ },
+ "input#autopilotInput": {
+ "backgroundColor": "var(--colorNeutralBackground4)",
+ "color": "var(--colorNeutralForeground1)",
+ },
+ "input:disabled": {
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "color": "var(--colorNeutralForeground2)",
},
},
"width": 300,
},
+ "subComponentStyles": {
+ "label": {
+ "root": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ },
+ },
+ "suffix": {
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "border": "1px solid var(--colorNeutralStroke1)",
+ "color": "var(--colorNeutralForeground1)",
+ },
}
}
/>
@@ -639,15 +1109,47 @@ exports[`SubSettingsComponent changeFeedPolicy hidden 1`] = `
".ms-ChoiceField-field.is-checked::before": {
"borderColor": "",
},
+ ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
".ms-ChoiceField-wrapper label": {
+ "color": "var(--colorNeutralForeground1)",
"fontFamily": undefined,
"fontSize": 14,
"padding": "2px 5px",
"whiteSpace": "nowrap",
},
+ ".ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceFieldLabel:hover": {
+ "color": "var(--colorNeutralForeground1)",
+ },
},
},
],
+ "label": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ "root": {
+ "selectors": {
+ ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceField-innerField": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceField:hover .ms-ChoiceField-innerField": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceField:hover .ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ },
+ },
}
}
/>
@@ -661,17 +1163,53 @@ exports[`SubSettingsComponent changeFeedPolicy hidden 1`] = `
required={true}
styles={
{
+ "field": {
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "color": "var(--colorNeutralForeground1)",
+ "selectors": {
+ ":disabled": {
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "color": "var(--colorNeutralForeground2)",
+ },
+ },
+ },
"fieldGroup": {
- "borderColor": "",
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "borderColor": "var(--colorNeutralStroke1)",
"height": 25,
"selectors": {
":disabled": {
- "backgroundColor": undefined,
- "borderColor": undefined,
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "borderColor": "var(--colorNeutralStroke1)",
+ "color": "var(--colorNeutralForeground2)",
+ },
+ "input": {
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "color": "var(--colorNeutralForeground1)",
+ },
+ "input#autopilotInput": {
+ "backgroundColor": "var(--colorNeutralBackground4)",
+ "color": "var(--colorNeutralForeground1)",
+ },
+ "input:disabled": {
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "color": "var(--colorNeutralForeground2)",
},
},
"width": 300,
},
+ "subComponentStyles": {
+ "label": {
+ "root": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ },
+ },
+ "suffix": {
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "border": "1px solid var(--colorNeutralStroke1)",
+ "color": "var(--colorNeutralForeground1)",
+ },
}
}
suffix="second(s)"
@@ -709,15 +1247,47 @@ exports[`SubSettingsComponent changeFeedPolicy hidden 1`] = `
".ms-ChoiceField-field.is-checked::before": {
"borderColor": "",
},
+ ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
".ms-ChoiceField-wrapper label": {
+ "color": "var(--colorNeutralForeground1)",
"fontFamily": undefined,
"fontSize": 14,
"padding": "2px 5px",
"whiteSpace": "nowrap",
},
+ ".ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceFieldLabel:hover": {
+ "color": "var(--colorNeutralForeground1)",
+ },
},
},
],
+ "label": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ "root": {
+ "selectors": {
+ ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceField-innerField": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceField:hover .ms-ChoiceField-innerField": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceField:hover .ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ },
+ },
}
}
/>
@@ -763,15 +1333,47 @@ exports[`SubSettingsComponent changeFeedPolicy hidden 1`] = `
".ms-ChoiceField-field.is-checked::before": {
"borderColor": "",
},
+ ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
".ms-ChoiceField-wrapper label": {
+ "color": "var(--colorNeutralForeground1)",
"fontFamily": undefined,
"fontSize": 14,
"padding": "2px 5px",
"whiteSpace": "nowrap",
},
+ ".ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceFieldLabel:hover": {
+ "color": "var(--colorNeutralForeground1)",
+ },
},
},
],
+ "label": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ "root": {
+ "selectors": {
+ ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceField-innerField": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceField:hover .ms-ChoiceField-innerField": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceField:hover .ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ },
+ },
}
}
/>
@@ -783,17 +1385,53 @@ exports[`SubSettingsComponent changeFeedPolicy hidden 1`] = `
required={true}
styles={
{
+ "field": {
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "color": "var(--colorNeutralForeground1)",
+ "selectors": {
+ ":disabled": {
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "color": "var(--colorNeutralForeground2)",
+ },
+ },
+ },
"fieldGroup": {
- "borderColor": "",
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "borderColor": "var(--colorNeutralStroke1)",
"height": 25,
"selectors": {
":disabled": {
- "backgroundColor": undefined,
- "borderColor": undefined,
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "borderColor": "var(--colorNeutralStroke1)",
+ "color": "var(--colorNeutralForeground2)",
+ },
+ "input": {
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "color": "var(--colorNeutralForeground1)",
+ },
+ "input#autopilotInput": {
+ "backgroundColor": "var(--colorNeutralBackground4)",
+ "color": "var(--colorNeutralForeground1)",
+ },
+ "input:disabled": {
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "color": "var(--colorNeutralForeground2)",
},
},
"width": 300,
},
+ "subComponentStyles": {
+ "label": {
+ "root": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ },
+ },
+ "suffix": {
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "border": "1px solid var(--colorNeutralStroke1)",
+ "color": "var(--colorNeutralForeground1)",
+ },
}
}
suffix="second(s)"
@@ -808,32 +1446,83 @@ exports[`SubSettingsComponent changeFeedPolicy hidden 1`] = `
}
}
>
-
+ >
+
Large
partition key
has been enabled.
-
+
Non-hierarchically partitioned container.
@@ -850,17 +1539,53 @@ exports[`SubSettingsComponent changeFeedPolicy hidden 1`] = `
label="Unique keys"
styles={
{
+ "field": {
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "color": "var(--colorNeutralForeground1)",
+ "selectors": {
+ ":disabled": {
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "color": "var(--colorNeutralForeground2)",
+ },
+ },
+ },
"fieldGroup": {
- "borderColor": "",
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "borderColor": "var(--colorNeutralStroke1)",
"height": 25,
"selectors": {
":disabled": {
- "backgroundColor": undefined,
- "borderColor": undefined,
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "borderColor": "var(--colorNeutralStroke1)",
+ "color": "var(--colorNeutralForeground2)",
+ },
+ "input": {
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "color": "var(--colorNeutralForeground1)",
+ },
+ "input#autopilotInput": {
+ "backgroundColor": "var(--colorNeutralBackground4)",
+ "color": "var(--colorNeutralForeground1)",
+ },
+ "input:disabled": {
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "color": "var(--colorNeutralForeground2)",
},
},
"width": 300,
},
+ "subComponentStyles": {
+ "label": {
+ "root": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ },
+ },
+ "suffix": {
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "border": "1px solid var(--colorNeutralStroke1)",
+ "color": "var(--colorNeutralForeground1)",
+ },
}
}
/>
@@ -920,15 +1645,47 @@ exports[`SubSettingsComponent renders 1`] = `
".ms-ChoiceField-field.is-checked::before": {
"borderColor": "",
},
+ ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
".ms-ChoiceField-wrapper label": {
+ "color": "var(--colorNeutralForeground1)",
"fontFamily": undefined,
"fontSize": 14,
"padding": "2px 5px",
"whiteSpace": "nowrap",
},
+ ".ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceFieldLabel:hover": {
+ "color": "var(--colorNeutralForeground1)",
+ },
},
},
],
+ "label": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ "root": {
+ "selectors": {
+ ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceField-innerField": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceField:hover .ms-ChoiceField-innerField": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceField:hover .ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ },
+ },
}
}
/>
@@ -942,17 +1699,53 @@ exports[`SubSettingsComponent renders 1`] = `
required={true}
styles={
{
+ "field": {
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "color": "var(--colorNeutralForeground1)",
+ "selectors": {
+ ":disabled": {
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "color": "var(--colorNeutralForeground2)",
+ },
+ },
+ },
"fieldGroup": {
- "borderColor": "",
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "borderColor": "var(--colorNeutralStroke1)",
"height": 25,
"selectors": {
":disabled": {
- "backgroundColor": undefined,
- "borderColor": undefined,
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "borderColor": "var(--colorNeutralStroke1)",
+ "color": "var(--colorNeutralForeground2)",
+ },
+ "input": {
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "color": "var(--colorNeutralForeground1)",
+ },
+ "input#autopilotInput": {
+ "backgroundColor": "var(--colorNeutralBackground4)",
+ "color": "var(--colorNeutralForeground1)",
+ },
+ "input:disabled": {
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "color": "var(--colorNeutralForeground2)",
},
},
"width": 300,
},
+ "subComponentStyles": {
+ "label": {
+ "root": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ },
+ },
+ "suffix": {
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "border": "1px solid var(--colorNeutralStroke1)",
+ "color": "var(--colorNeutralForeground1)",
+ },
}
}
suffix="second(s)"
@@ -990,15 +1783,47 @@ exports[`SubSettingsComponent renders 1`] = `
".ms-ChoiceField-field.is-checked::before": {
"borderColor": "",
},
+ ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
".ms-ChoiceField-wrapper label": {
+ "color": "var(--colorNeutralForeground1)",
"fontFamily": undefined,
"fontSize": 14,
"padding": "2px 5px",
"whiteSpace": "nowrap",
},
+ ".ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceFieldLabel:hover": {
+ "color": "var(--colorNeutralForeground1)",
+ },
},
},
],
+ "label": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ "root": {
+ "selectors": {
+ ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceField-innerField": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceField:hover .ms-ChoiceField-innerField": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceField:hover .ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ },
+ },
}
}
/>
@@ -1044,15 +1869,47 @@ exports[`SubSettingsComponent renders 1`] = `
".ms-ChoiceField-field.is-checked::before": {
"borderColor": "",
},
+ ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
".ms-ChoiceField-wrapper label": {
+ "color": "var(--colorNeutralForeground1)",
"fontFamily": undefined,
"fontSize": 14,
"padding": "2px 5px",
"whiteSpace": "nowrap",
},
+ ".ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceFieldLabel:hover": {
+ "color": "var(--colorNeutralForeground1)",
+ },
},
},
],
+ "label": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ "root": {
+ "selectors": {
+ ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceField-innerField": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceField:hover .ms-ChoiceField-innerField": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceField:hover .ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ },
+ },
}
}
/>
@@ -1064,17 +1921,53 @@ exports[`SubSettingsComponent renders 1`] = `
required={true}
styles={
{
+ "field": {
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "color": "var(--colorNeutralForeground1)",
+ "selectors": {
+ ":disabled": {
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "color": "var(--colorNeutralForeground2)",
+ },
+ },
+ },
"fieldGroup": {
- "borderColor": "",
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "borderColor": "var(--colorNeutralStroke1)",
"height": 25,
"selectors": {
":disabled": {
- "backgroundColor": undefined,
- "borderColor": undefined,
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "borderColor": "var(--colorNeutralStroke1)",
+ "color": "var(--colorNeutralForeground2)",
+ },
+ "input": {
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "color": "var(--colorNeutralForeground1)",
+ },
+ "input#autopilotInput": {
+ "backgroundColor": "var(--colorNeutralBackground4)",
+ "color": "var(--colorNeutralForeground1)",
+ },
+ "input:disabled": {
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "color": "var(--colorNeutralForeground2)",
},
},
"width": 300,
},
+ "subComponentStyles": {
+ "label": {
+ "root": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ },
+ },
+ "suffix": {
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "border": "1px solid var(--colorNeutralStroke1)",
+ "color": "var(--colorNeutralForeground1)",
+ },
}
}
suffix="second(s)"
@@ -1093,7 +1986,7 @@ exports[`SubSettingsComponent renders 1`] = `
styles={
{
"root": {
- "color": "windowtext",
+ "color": "var(--colorNeutralForeground1)",
"fontSize": 14,
},
}
@@ -1134,15 +2027,47 @@ exports[`SubSettingsComponent renders 1`] = `
".ms-ChoiceField-field.is-checked::before": {
"borderColor": "",
},
+ ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
".ms-ChoiceField-wrapper label": {
+ "color": "var(--colorNeutralForeground1)",
"fontFamily": undefined,
"fontSize": 14,
"padding": "2px 5px",
"whiteSpace": "nowrap",
},
+ ".ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceFieldLabel:hover": {
+ "color": "var(--colorNeutralForeground1)",
+ },
},
},
],
+ "label": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ "root": {
+ "selectors": {
+ ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceField-innerField": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceField:hover .ms-ChoiceField-innerField": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceField:hover .ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ },
+ },
}
}
/>
@@ -1154,32 +2079,83 @@ exports[`SubSettingsComponent renders 1`] = `
}
}
>
-
+ >
+
Large
partition key
has been enabled.
-
+
Non-hierarchically partitioned container.
@@ -1196,17 +2172,53 @@ exports[`SubSettingsComponent renders 1`] = `
label="Unique keys"
styles={
{
+ "field": {
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "color": "var(--colorNeutralForeground1)",
+ "selectors": {
+ ":disabled": {
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "color": "var(--colorNeutralForeground2)",
+ },
+ },
+ },
"fieldGroup": {
- "borderColor": "",
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "borderColor": "var(--colorNeutralStroke1)",
"height": 25,
"selectors": {
":disabled": {
- "backgroundColor": undefined,
- "borderColor": undefined,
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "borderColor": "var(--colorNeutralStroke1)",
+ "color": "var(--colorNeutralForeground2)",
+ },
+ "input": {
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "color": "var(--colorNeutralForeground1)",
+ },
+ "input#autopilotInput": {
+ "backgroundColor": "var(--colorNeutralBackground4)",
+ "color": "var(--colorNeutralForeground1)",
+ },
+ "input:disabled": {
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "color": "var(--colorNeutralForeground2)",
},
},
"width": 300,
},
+ "subComponentStyles": {
+ "label": {
+ "root": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ },
+ },
+ "suffix": {
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "border": "1px solid var(--colorNeutralStroke1)",
+ "color": "var(--colorNeutralForeground1)",
+ },
}
}
/>
@@ -1266,15 +2278,47 @@ exports[`SubSettingsComponent timeToLiveSeconds hidden 1`] = `
".ms-ChoiceField-field.is-checked::before": {
"borderColor": undefined,
},
+ ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
".ms-ChoiceField-wrapper label": {
+ "color": "var(--colorNeutralForeground1)",
"fontFamily": undefined,
"fontSize": 14,
"padding": "2px 5px",
"whiteSpace": "nowrap",
},
+ ".ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceFieldLabel:hover": {
+ "color": "var(--colorNeutralForeground1)",
+ },
},
},
],
+ "label": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ "root": {
+ "selectors": {
+ ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceField-innerField": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceField:hover .ms-ChoiceField-innerField": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceField:hover .ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ },
+ },
}
}
/>
@@ -1309,15 +2353,47 @@ exports[`SubSettingsComponent timeToLiveSeconds hidden 1`] = `
".ms-ChoiceField-field.is-checked::before": {
"borderColor": "",
},
+ ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
".ms-ChoiceField-wrapper label": {
+ "color": "var(--colorNeutralForeground1)",
"fontFamily": undefined,
"fontSize": 14,
"padding": "2px 5px",
"whiteSpace": "nowrap",
},
+ ".ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceFieldLabel:hover": {
+ "color": "var(--colorNeutralForeground1)",
+ },
},
},
],
+ "label": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ "root": {
+ "selectors": {
+ ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceField-innerField": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceField:hover .ms-ChoiceField-innerField": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceField:hover .ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ },
+ },
}
}
/>
@@ -1363,15 +2439,47 @@ exports[`SubSettingsComponent timeToLiveSeconds hidden 1`] = `
".ms-ChoiceField-field.is-checked::before": {
"borderColor": "",
},
+ ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
".ms-ChoiceField-wrapper label": {
+ "color": "var(--colorNeutralForeground1)",
"fontFamily": undefined,
"fontSize": 14,
"padding": "2px 5px",
"whiteSpace": "nowrap",
},
+ ".ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceFieldLabel:hover": {
+ "color": "var(--colorNeutralForeground1)",
+ },
},
},
],
+ "label": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ "root": {
+ "selectors": {
+ ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceField-innerField": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceField:hover .ms-ChoiceField-innerField": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceField:hover .ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ },
+ },
}
}
/>
@@ -1383,17 +2491,53 @@ exports[`SubSettingsComponent timeToLiveSeconds hidden 1`] = `
required={true}
styles={
{
+ "field": {
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "color": "var(--colorNeutralForeground1)",
+ "selectors": {
+ ":disabled": {
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "color": "var(--colorNeutralForeground2)",
+ },
+ },
+ },
"fieldGroup": {
- "borderColor": "",
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "borderColor": "var(--colorNeutralStroke1)",
"height": 25,
"selectors": {
":disabled": {
- "backgroundColor": undefined,
- "borderColor": undefined,
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "borderColor": "var(--colorNeutralStroke1)",
+ "color": "var(--colorNeutralForeground2)",
+ },
+ "input": {
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "color": "var(--colorNeutralForeground1)",
+ },
+ "input#autopilotInput": {
+ "backgroundColor": "var(--colorNeutralBackground4)",
+ "color": "var(--colorNeutralForeground1)",
+ },
+ "input:disabled": {
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "color": "var(--colorNeutralForeground2)",
},
},
"width": 300,
},
+ "subComponentStyles": {
+ "label": {
+ "root": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ },
+ },
+ "suffix": {
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "border": "1px solid var(--colorNeutralStroke1)",
+ "color": "var(--colorNeutralForeground1)",
+ },
}
}
suffix="second(s)"
@@ -1412,7 +2556,7 @@ exports[`SubSettingsComponent timeToLiveSeconds hidden 1`] = `
styles={
{
"root": {
- "color": "windowtext",
+ "color": "var(--colorNeutralForeground1)",
"fontSize": 14,
},
}
@@ -1453,15 +2597,47 @@ exports[`SubSettingsComponent timeToLiveSeconds hidden 1`] = `
".ms-ChoiceField-field.is-checked::before": {
"borderColor": "",
},
+ ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
".ms-ChoiceField-wrapper label": {
+ "color": "var(--colorNeutralForeground1)",
"fontFamily": undefined,
"fontSize": 14,
"padding": "2px 5px",
"whiteSpace": "nowrap",
},
+ ".ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceFieldLabel:hover": {
+ "color": "var(--colorNeutralForeground1)",
+ },
},
},
],
+ "label": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ "root": {
+ "selectors": {
+ ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceField-innerField": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceField:hover .ms-ChoiceField-innerField": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceField:hover .ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ ".ms-ChoiceFieldLabel": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ },
+ },
}
}
/>
@@ -1473,32 +2649,83 @@ exports[`SubSettingsComponent timeToLiveSeconds hidden 1`] = `
}
}
>
-
+ >
+
Large
partition key
has been enabled.
-
+
Non-hierarchically partitioned container.
@@ -1515,17 +2742,53 @@ exports[`SubSettingsComponent timeToLiveSeconds hidden 1`] = `
label="Unique keys"
styles={
{
+ "field": {
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "color": "var(--colorNeutralForeground1)",
+ "selectors": {
+ ":disabled": {
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "color": "var(--colorNeutralForeground2)",
+ },
+ },
+ },
"fieldGroup": {
- "borderColor": "",
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "borderColor": "var(--colorNeutralStroke1)",
"height": 25,
"selectors": {
":disabled": {
- "backgroundColor": undefined,
- "borderColor": undefined,
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "borderColor": "var(--colorNeutralStroke1)",
+ "color": "var(--colorNeutralForeground2)",
+ },
+ "input": {
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "color": "var(--colorNeutralForeground1)",
+ },
+ "input#autopilotInput": {
+ "backgroundColor": "var(--colorNeutralBackground4)",
+ "color": "var(--colorNeutralForeground1)",
+ },
+ "input:disabled": {
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "color": "var(--colorNeutralForeground2)",
},
},
"width": 300,
},
+ "subComponentStyles": {
+ "label": {
+ "root": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ },
+ },
+ "suffix": {
+ "backgroundColor": "var(--colorNeutralBackground2)",
+ "border": "1px solid var(--colorNeutralStroke1)",
+ "color": "var(--colorNeutralForeground1)",
+ },
}
}
/>
diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/ToolTipLabelComponent.test.tsx.snap b/src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/ToolTipLabelComponent.test.tsx.snap
index fa801675f..1c082a553 100644
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/ToolTipLabelComponent.test.tsx.snap
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/ToolTipLabelComponent.test.tsx.snap
@@ -14,6 +14,7 @@ exports[`ToolTipLabelComponent renders 1`] = `
-
-
-
+
-
+
-
+
-
-
+
diff --git a/src/Explorer/Controls/Settings/__snapshots__/SettingsRenderUtils.test.tsx.snap b/src/Explorer/Controls/Settings/__snapshots__/SettingsRenderUtils.test.tsx.snap
index 3399ab9a3..baae4ef02 100644
--- a/src/Explorer/Controls/Settings/__snapshots__/SettingsRenderUtils.test.tsx.snap
+++ b/src/Explorer/Controls/Settings/__snapshots__/SettingsRenderUtils.test.tsx.snap
@@ -6,6 +6,7 @@ exports[`SettingsUtils functions render 1`] = `
Enable change feed log retention policy to retain last 10 minutes of history for items in the container by default. To support this, the request unit (RU) charge for this container will be multiplied by a factor of two for writes. Reads are unaffected.
-
+
For queries that filter on multiple properties, create multiple single field indexes instead of a compound index.
Compound indexes
@@ -256,7 +270,7 @@ exports[`SettingsUtils functions render 1`] = `
styles={
{
"root": {
- "color": "windowtext",
+ "color": "var(--colorNeutralForeground1)",
"fontSize": 14,
},
}
@@ -272,7 +286,7 @@ exports[`SettingsUtils functions render 1`] = `
styles={
{
"root": {
- "color": "windowtext",
+ "color": "var(--colorNeutralForeground1)",
"fontSize": 14,
},
}
@@ -289,7 +303,7 @@ exports[`SettingsUtils functions render 1`] = `
styles={
{
"root": {
- "color": "windowtext",
+ "color": "var(--colorNeutralForeground1)",
"fontSize": 14,
},
}
diff --git a/src/Explorer/Controls/ThroughputInput/CostEstimateText/CostEstimateText.tsx b/src/Explorer/Controls/ThroughputInput/CostEstimateText/CostEstimateText.tsx
index 4667a1a74..d5a4b9291 100644
--- a/src/Explorer/Controls/ThroughputInput/CostEstimateText/CostEstimateText.tsx
+++ b/src/Explorer/Controls/ThroughputInput/CostEstimateText/CostEstimateText.tsx
@@ -54,8 +54,8 @@ export const CostEstimateText: FunctionComponent = ({
if (isAutoscale) {
return (
-
-
+
+
{estimatedMonthlyCost} ({currency}){iconWithEstimatedCostDisclaimer}:{" "}
{currencySign + calculateEstimateNumber(monthlyPrice / 10)} -{" "}
@@ -70,7 +70,7 @@ export const CostEstimateText: FunctionComponent = ({
return (
-
+
Estimated cost ({currency}){iconWithEstimatedCostDisclaimer}:{" "}
{currencySign + calculateEstimateNumber(hourlyPrice)} hourly /{" "}
diff --git a/src/Explorer/Controls/ThroughputInput/ThroughputInput.less b/src/Explorer/Controls/ThroughputInput/ThroughputInput.less
index 059b210f6..816145a00 100644
--- a/src/Explorer/Controls/ThroughputInput/ThroughputInput.less
+++ b/src/Explorer/Controls/ThroughputInput/ThroughputInput.less
@@ -10,9 +10,13 @@
font-size: @mediumFontSize;
padding: 0 @LargeSpace 0 @SmallSpace;
}
+// .throughputInputSpacing{
+// color: "var(--colorNeutralForeground1)";
+// }
.throughputInputSpacing > :not(:last-child) {
margin-bottom: @DefaultSpace;
+ color: "var(--colorNeutralForeground1)";
}
.capacitycalculator-link:focus {
@@ -28,3 +32,16 @@
.deleteQuery:focus::after {
outline: none !important;
}
+
+// Override Fluent UI TextField focus styles
+.throughputInputContainer {
+ :global {
+ .ms-TextField {
+ .ms-TextField-fieldGroup {
+ &:focus-within {
+ border-color: var(--colorCompoundBrandStroke1, @SelectionColor);
+ }
+ }
+ }
+ }
+}
diff --git a/src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx b/src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx
index 02b6853ca..6d71eb9c2 100644
--- a/src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx
+++ b/src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx
@@ -193,7 +193,11 @@ export const ThroughputInput: FunctionComponent = ({
*
-
+
{getThroughputLabelText()}
{PricingUtils.getRuToolTipText()}
@@ -236,14 +240,17 @@ export const ThroughputInput: FunctionComponent = ({
{isAutoscaleSelected && (
-
+
Your container throughput will automatically scale up to the maximum value you select, from a minimum of 10%
of that value.
-
+
Minimum RU/s
The minimum RU/s your container will scale to
@@ -260,6 +267,7 @@ export const ThroughputInput: FunctionComponent = ({
display: "flex",
alignItems: "center",
justifyContent: "center",
+ color: "var(--colorNeutralForeground1)",
}}
>
{Math.round(throughput / 10).toString()}
@@ -272,6 +280,7 @@ export const ThroughputInput: FunctionComponent = ({
fontSize: 12,
fontWeight: 400,
paddingBottom: 6,
+ color: "var(--colorNeutralForeground1)",
}}
>
x 10 =
@@ -279,7 +288,10 @@ export const ThroughputInput: FunctionComponent = ({
-
+
Maximum RU/s
{getAutoScaleTooltip()}
@@ -290,7 +302,7 @@ export const ThroughputInput: FunctionComponent = ({
type="number"
styles={{
fieldGroup: { width: 100, height: 27, flexShrink: 0 },
- field: { fontSize: 14, fontWeight: 400 },
+ field: { fontSize: 14, fontWeight: 400, color: "var(--colorNeutralForeground1)" },
}}
onChange={(_event, newInput?: string) => onThroughputValueChange(newInput)}
step={AutoPilotUtils.autoPilotIncrementStep}
@@ -306,7 +318,7 @@ export const ThroughputInput: FunctionComponent = ({
-
+
Estimate your required RU/s with
= ({
{!isAutoscaleSelected && (
-
+
Estimate your required RU/s with
= ({
.
-
+
{isDatabase ? "Database" : getCollectionName()} Required RU/s
{getAutoScaleTooltip()}
diff --git a/src/Explorer/Controls/ThroughputInput/__snapshots__/ThroughputInput.test.tsx.snap b/src/Explorer/Controls/ThroughputInput/__snapshots__/ThroughputInput.test.tsx.snap
index 35028368a..db631aae0 100644
--- a/src/Explorer/Controls/ThroughputInput/__snapshots__/ThroughputInput.test.tsx.snap
+++ b/src/Explorer/Controls/ThroughputInput/__snapshots__/ThroughputInput.test.tsx.snap
@@ -31,6 +31,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
key=".0:$.$.1"
style={
{
+ "color": "var(--colorNeutralForeground1)",
"fontWeight": 600,
"lineHeight": "20px",
}
@@ -42,6 +43,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
className="css-110"
style={
{
+ "color": "var(--colorNeutralForeground1)",
"fontWeight": 600,
"lineHeight": "20px",
}
@@ -724,6 +726,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
key=".0:$.$.0"
style={
{
+ "color": "var(--colorNeutralForeground1)",
"fontSize": 12,
"marginTop": -2,
}
@@ -733,6 +736,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
className="css-117"
style={
{
+ "color": "var(--colorNeutralForeground1)",
"fontSize": 12,
"marginTop": -2,
}
@@ -782,6 +786,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
key=".0:$.$.0"
style={
{
+ "color": "var(--colorNeutralForeground1)",
"fontWeight": 600,
"lineHeight": "20px",
}
@@ -792,6 +797,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
className="css-110"
style={
{
+ "color": "var(--colorNeutralForeground1)",
"fontWeight": 600,
"lineHeight": "20px",
}
@@ -1423,6 +1429,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
"alignItems": "center",
"backgroundColor": "transparent",
"border": "none",
+ "color": "var(--colorNeutralForeground1)",
"display": "flex",
"fontFamily": "Segoe UI",
"fontSize": 14,
@@ -1440,6 +1447,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
"alignItems": "center",
"backgroundColor": "transparent",
"border": "none",
+ "color": "var(--colorNeutralForeground1)",
"display": "flex",
"fontFamily": "Segoe UI",
"fontSize": 14,
@@ -1459,6 +1467,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
key=".0:$.$.1"
style={
{
+ "color": "var(--colorNeutralForeground1)",
"fontFamily": "Segoe UI",
"fontSize": 12,
"fontWeight": 400,
@@ -1470,6 +1479,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
className="css-117"
style={
{
+ "color": "var(--colorNeutralForeground1)",
"fontFamily": "Segoe UI",
"fontSize": 12,
"fontWeight": 400,
@@ -1508,6 +1518,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
key=".0:$.$.0"
style={
{
+ "color": "var(--colorNeutralForeground1)",
"fontWeight": 600,
"lineHeight": "20px",
}
@@ -1518,6 +1529,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
className="css-110"
style={
{
+ "color": "var(--colorNeutralForeground1)",
"fontWeight": 600,
"lineHeight": "20px",
}
@@ -2156,6 +2168,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
styles={
{
"field": {
+ "color": "var(--colorNeutralForeground1)",
"fontSize": 14,
"fontWeight": 400,
},
@@ -2509,11 +2522,21 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
Estimate your required RU/s with
) => void;
+ disabled?: boolean;
+ type?: "button" | "submit" | "reset";
+};
+
+const useStyles = makeStyles({
+ button: {
+ backgroundColor: tokens.colorNeutralBackground1,
+ color: tokens.colorNeutralForeground1,
+ "&:hover": {
+ backgroundColor: tokens.colorNeutralBackground1Hover,
+ color: tokens.colorNeutralForeground1Hover,
+ },
+ "&:active": {
+ backgroundColor: tokens.colorNeutralBackground1Pressed,
+ color: tokens.colorNeutralForeground1Pressed,
+ },
+ },
+ primary: {
+ backgroundColor: tokens.colorBrandBackground,
+ color: tokens.colorNeutralForegroundOnBrand,
+ "&:hover": {
+ backgroundColor: tokens.colorBrandBackgroundHover,
+ },
+ "&:active": {
+ backgroundColor: tokens.colorBrandBackgroundPressed,
+ },
+ },
+});
+
+export const Button = React.forwardRef(({ primary, ...props }, ref) => {
+ const baseStyles = useStyles();
+ const buttonClassName = primary ? baseStyles.primary : baseStyles.button;
+
+ return (
+ = () => {
+ const styles = useStyles();
+
+ return (
+ {
+ public state: State = {
+ hasError: false,
+ error: null,
+ };
+
+ public static getDerivedStateFromError(error: Error): State {
+ return { hasError: true, error };
+ }
+
+ public componentDidCatch(error: Error): void {
+ console.error("Error caught in boundary:", error);
+ }
+
+ public render() {
+ if (this.state.hasError) {
+ return (
+ {
+ // Start DatabaseLoad scenario before fetching databases
+ if (userContext.apiType !== "Postgres" && userContext.apiType !== "VCoreMongo") {
+ scenarioMonitor.start(MetricScenario.DatabaseLoad);
+ }
+
if (userContext.apiType !== "Postgres" && userContext.apiType !== "VCoreMongo") {
userContext.authType === AuthType.ResourceToken
? this.refreshDatabaseForResourceToken()
diff --git a/src/Explorer/Menus/CommandBar/CommandBarComponent.less b/src/Explorer/Menus/CommandBar/CommandBarComponent.less
index b94c0b265..8c83d4e87 100644
--- a/src/Explorer/Menus/CommandBar/CommandBarComponent.less
+++ b/src/Explorer/Menus/CommandBar/CommandBarComponent.less
@@ -4,11 +4,10 @@
padding: @SmallSpace 0px @SmallSpace 0px;
.flex-display();
span {
- border-left: @ButtonBorderWidth solid @BaseMediumHigh;
margin: 0 10px 0 10px;
}
}
.commandBarContainer {
- border-bottom: 1px solid @BaseMedium;
+ border-bottom: 1px solid var(--colorNeutralStroke1);
}
diff --git a/src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx b/src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx
index b65310691..675d00564 100644
--- a/src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx
+++ b/src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx
@@ -4,6 +4,7 @@
* and update any knockout observables passed from the parent.
*/
import { CommandBar as FluentCommandBar, ICommandBarItemProps } from "@fluentui/react";
+import { makeStyles, useFluent } from "@fluentui/react-components";
import { useNotebook } from "Explorer/Notebook/useNotebook";
import { useDataPlaneRbac } from "Explorer/Panes/SettingsPane/SettingsPane";
import { KeyboardActionGroup, useKeyboardActionGroup } from "KeyboardShortcuts";
@@ -12,7 +13,6 @@ import { userContext } from "UserContext";
import * as React from "react";
import create, { UseStore } from "zustand";
import { ConnectionStatusType, PoolIdType } from "../../../Common/Constants";
-import { StyleConstants } from "../../../Common/StyleConstants";
import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
import Explorer from "../../Explorer";
import { useSelectedNode } from "../../useSelectedNode";
@@ -37,12 +37,49 @@ export const useCommandBar: UseStore = create((set) => ({
setIsHidden: (isHidden: boolean) => set((state) => ({ ...state, isHidden })),
}));
+const useStyles = makeStyles({
+ commandBarContainer: {
+ borderBottom: "1px solid var(--colorNeutralStroke1)",
+ // backgroundColor: "var(--colorNeutralBackground1)",
+ },
+ toolbarButton: {
+ backgroundColor: "transparent",
+ "&:hover": {
+ backgroundColor: "var(--colorNeutralBackground2)",
+ },
+ "&:active": {
+ backgroundColor: "var(--colorNeutralBackground3)",
+ },
+ },
+ buttonIcon: {
+ width: "16px",
+ height: "16px",
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+ "& img": {
+ width: "100%",
+ height: "100%",
+ objectFit: "contain",
+ },
+ },
+});
+
export const CommandBar: React.FC = ({ container }: Props) => {
const selectedNodeState = useSelectedNode();
const buttons = useCommandBar((state) => state.contextButtons);
const isHidden = useCommandBar((state) => state.isHidden);
- const backgroundColor = StyleConstants.BaseLight;
+ // targetDocument is used by referenced components
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
+ const { targetDocument } = useFluent();
const setKeyboardHandlers = useKeyboardActionGroup(KeyboardActionGroup.COMMAND_BAR);
+ const styles = useStyles();
+
+ const { connectionInfo, isPhoenixNotebooks, isPhoenixFeatures } = useNotebook((state) => ({
+ connectionInfo: state.connectionInfo,
+ isPhoenixNotebooks: state.isPhoenixNotebooks,
+ isPhoenixFeatures: state.isPhoenixFeatures,
+ }));
// Subscribe to the store changes that affect button creation
const dataPlaneRbacEnabled = useDataPlaneRbac((state) => state.dataPlaneRbacEnabled);
@@ -59,12 +96,15 @@ export const CommandBar: React.FC = ({ container }: Props) => {
? CommandBarComponentButtonFactory.createPostgreButtons(container)
: CommandBarComponentButtonFactory.createVCoreMongoButtons(container);
return (
-
= ({
{
useDialog.getState().showOkCancelModalDialog(
"Clear History",
@@ -1223,7 +1353,7 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
+
+ );
+};
diff --git a/src/Explorer/ErrorBoundary.tsx b/src/Explorer/ErrorBoundary.tsx
new file mode 100644
index 000000000..d92325b59
--- /dev/null
+++ b/src/Explorer/ErrorBoundary.tsx
@@ -0,0 +1,38 @@
+import React, { Component, ReactNode } from "react";
+
+interface Props {
+ children: ReactNode;
+}
+
+interface State {
+ hasError: boolean;
+ error: Error | null;
+}
+
+export class ErrorBoundary extends ComponentData Explorer Content
+
+
+ );
+ }
+
+ return this.props.children;
+ }
+}
diff --git a/src/Explorer/Explorer.tsx b/src/Explorer/Explorer.tsx
index 75abd2f47..0b32b3ded 100644
--- a/src/Explorer/Explorer.tsx
+++ b/src/Explorer/Explorer.tsx
@@ -38,6 +38,9 @@ import { ContainerConnectionInfo, IPhoenixServiceInfo, IProvisionData, IResponse
import * as ViewModels from "../Contracts/ViewModels";
import { UploadDetailsRecord } from "../Contracts/ViewModels";
import { GitHubOAuthService } from "../GitHub/GitHubOAuthService";
+import MetricScenario from "../Metrics/MetricEvents";
+import { ApplicationMetricPhase } from "../Metrics/ScenarioConfig";
+import { scenarioMonitor } from "../Metrics/ScenarioMonitor";
import { PhoenixClient } from "../Phoenix/PhoenixClient";
import * as ExplorerSettings from "../Shared/ExplorerSettings";
import { Action, ActionModifiers } from "../Shared/Telemetry/TelemetryConstants";
@@ -402,7 +405,9 @@ export default class Explorer {
updatedDatabases = [...updatedDatabases, ...deltaDatabases.toAdd].sort((db1, db2) =>
db1.id().localeCompare(db2.id()),
);
- useDatabases.setState({ databases: updatedDatabases });
+ useDatabases.setState({ databases: updatedDatabases, databasesFetchedSuccessfully: true });
+ scenarioMonitor.completePhase(MetricScenario.DatabaseLoad, ApplicationMetricPhase.DatabasesFetched);
+
await this.refreshAndExpandNewDatabases(deltaDatabases.toAdd, updatedDatabases);
} catch (error) {
const errorMessage = getErrorMessage(error);
@@ -416,6 +421,8 @@ export default class Explorer {
startKey,
);
logConsoleError(`Error while refreshing databases: ${errorMessage}`);
+ useDatabases.setState({ databasesFetchedSuccessfully: false });
+ scenarioMonitor.failPhase(MetricScenario.DatabaseLoad, ApplicationMetricPhase.DatabasesFetched);
}
}
@@ -1183,6 +1190,11 @@ export default class Explorer {
}
public async refreshExplorer(): PromiseSomething went wrong.
+{this.state.error && this.state.error.toString()}
+
+
= ({ container }: Props) => {
);
const controlButtons = CommandBarComponentButtonFactory.createControlCommandBarButtons(container);
- const uiFabricStaticButtons = CommandBarUtil.convertButton(staticButtons, backgroundColor);
+ const uiFabricStaticButtons = CommandBarUtil.convertButton(staticButtons, "var(--colorNeutralBackground1)");
if (buttons && buttons.length > 0) {
uiFabricStaticButtons.forEach((btn: ICommandBarItemProps) => (btn.iconOnly = true));
}
- const uiFabricTabsButtons: ICommandBarItemProps[] = CommandBarUtil.convertButton(contextButtons, backgroundColor);
+ const uiFabricTabsButtons: ICommandBarItemProps[] = CommandBarUtil.convertButton(
+ contextButtons,
+ "var(--colorNeutralBackground1)",
+ );
if (uiFabricTabsButtons.length > 0) {
uiFabricStaticButtons.push(CommandBarUtil.createDivider("commandBarDivider"));
}
- const uiFabricControlButtons = CommandBarUtil.convertButton(controlButtons, backgroundColor);
+ const uiFabricControlButtons = CommandBarUtil.convertButton(controlButtons, "var(--colorNeutralBackground1)");
uiFabricControlButtons.forEach((btn: ICommandBarItemProps) => (btn.iconOnly = true));
- const connectionInfo = useNotebook((state) => state.connectionInfo);
-
- if (
- (useNotebook.getState().isPhoenixNotebooks || useNotebook.getState().isPhoenixFeatures) &&
- connectionInfo?.status !== ConnectionStatusType.Connect
- ) {
+ // Add connection status if needed (using the hook values we got at the top level)
+ if ((isPhoenixNotebooks || isPhoenixFeatures) && connectionInfo?.status !== ConnectionStatusType.Connect) {
uiFabricControlButtons.unshift(
CommandBarUtil.createConnectionStatus(container, PoolIdType.DefaultPoolId, "connectionStatus"),
);
}
- const rootStyle = isFabric()
- ? {
- root: {
- backgroundColor: "transparent",
- padding: "2px 8px 0px 8px",
+ const rootStyle = {
+ root: {
+ backgroundColor: "var(--colorNeutralBackground1)",
+ color: "var(--colorNeutralForeground1)",
+ padding: isFabric() ? "2px 8px 0px 8px" : undefined,
+ },
+ button: {
+ backgroundColor: "var(--colorNeutralBackground1)",
+ color: "var(--colorNeutralForeground1)",
+ selectors: {
+ ":hover": {
+ backgroundColor: "var(--colorNeutralBackground2)",
+ color: "var(--colorNeutralForeground1)",
},
- }
- : {
- root: {
- backgroundColor: backgroundColor,
+ ":active": {
+ backgroundColor: "var(--colorNeutralBackground3)",
+ color: "var(--colorNeutralForeground1)",
},
- };
+ },
+ },
+ menuIcon: {
+ color: "var(--colorNeutralForeground1)",
+ },
+ item: {
+ backgroundColor: "var(--colorNeutralBackground1)",
+ color: "var(--colorNeutralForeground1)",
+ },
+ link: {
+ backgroundColor: "var(--colorNeutralBackground1)",
+ color: "var(--colorNeutralForeground1)",
+ },
+ };
const allButtons = staticButtons.concat(contextButtons).concat(controlButtons);
const keyboardHandlers = CommandBarUtil.createKeyboardHandlers(allButtons);
setKeyboardHandlers(keyboardHandlers);
return (
-
@@ -1132,7 +1222,9 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
ariaLabel="Enable sample db for query exploration"
checked={copilotSampleDBEnabled}
onChange={handleSampleDatabaseChange}
- label="Enable sample database"
+ onRenderLabel={() => (
+ Enable sample database
+ )}
/>
@@ -1167,7 +1259,29 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
+
{
+ const [darkMode, setDarkMode] = React.useState(useThemeStore.getState().isDarkMode);
+
+ React.useEffect(() => {
+ const unsubscribe = useThemeStore.subscribe((state) => {
+ setDarkMode(state.isDarkMode);
+ });
+ return unsubscribe;
+ }, []);
+
+ const tooltipText = darkMode ? "Switch to Light Theme" : "Switch to Dark Theme";
+
+ return {
+ iconSrc: darkMode ? SunIcon : MoonIcon,
+ iconAlt: "Theme Toggle",
+ onCommandClick: useThemeStore.getState().toggleTheme,
+ commandButtonLabel: undefined,
+ ariaLabel: tooltipText,
+ tooltipText: tooltipText,
+ hasPopup: false,
+ disabled: false,
+ };
+};
diff --git a/src/Explorer/Menus/NotificationConsole/NotificationConsole.less b/src/Explorer/Menus/NotificationConsole/NotificationConsole.less
index fb5aed51c..3277e7234 100644
--- a/src/Explorer/Menus/NotificationConsole/NotificationConsole.less
+++ b/src/Explorer/Menus/NotificationConsole/NotificationConsole.less
@@ -30,11 +30,11 @@
flex-shrink:0;
&:hover {
- background-color:@NotificationHigh;
+ background-color: @NotificationHigh;
}
&:active {
- background-color:@NotificationHigh;
+ background-color: @NotificationHigh;
}
&:focus {
@@ -189,4 +189,44 @@
}
}
}
+}
+
+// Dark theme specific overrides
+body.isDarkMode {
+ .notificationConsoleContainer {
+ .notificationConsoleHeader {
+ background-color: var(--colorNeutralBackground2);
+ color: var(--colorNeutralForeground1);
+
+ &:hover {
+ background-color: var(--colorNeutralBackground3);
+ color: var(--colorNeutralForeground1);
+ }
+
+ &:active {
+ background-color: var(--colorNeutralBackground4);
+ color: var(--colorNeutralForeground1);
+ }
+ }
+
+ .notificationConsoleContents {
+ background-color: var(--colorNeutralBackground1);
+ color: var(--colorNeutralForeground1);
+
+ .clearNotificationsButton {
+ border: @ButtonBorderWidth solid var(--colorNeutralStroke1);
+
+ &:hover {
+ background-color: var(--colorNeutralBackground3);
+ color: var(--colorNeutralForeground1);
+ }
+
+ &:active {
+ border: @ButtonBorderWidth dashed var(--colorBrandForeground1);
+ background-color: var(--colorBrandBackground);
+ color: var(--colorNeutralForegroundOnBrand);
+ }
+ }
+ }
+ }
}
\ No newline at end of file
diff --git a/src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx b/src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx
index e3dda1418..98cc63758 100644
--- a/src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx
+++ b/src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx
@@ -152,6 +152,82 @@ export class NotificationConsoleComponent extends React.Component<
selectedKey={this.state.selectedFilter}
options={NotificationConsoleComponent.FilterOptions}
onChange={this.onFilterSelected.bind(this)}
+ styles={{
+ root: {
+ color: "var(--colorNeutralForeground1)",
+ },
+ label: {
+ color: "var(--colorNeutralForeground1)",
+ },
+ dropdown: {
+ backgroundColor: "var(--colorNeutralBackground2)",
+ borderColor: "var(--colorNeutralStroke1)",
+ color: "var(--colorNeutralForeground1)",
+ },
+ title: {
+ backgroundColor: "var(--colorNeutralBackground2)",
+ color: "var(--colorNeutralForeground1)",
+ borderColor: "var(--colorNeutralStroke1)",
+ fontSize: "14px",
+ selectors: {
+ "&:hover": {
+ backgroundColor: "var(--colorNeutralBackground3)",
+ color: "var(--colorNeutralForeground1)",
+ borderColor: "var(--colorNeutralStroke1)",
+ },
+ "&:focus": {
+ backgroundColor: "var(--colorNeutralBackground2)",
+ color: "var(--colorNeutralForeground1)",
+ borderColor: "var(--colorBrandStroke1)",
+ },
+ "&:after": {
+ borderColor: "var(--colorNeutralStroke1)",
+ },
+ span: {
+ color: "var(--colorNeutralForeground1)",
+ },
+ },
+ },
+ caretDown: {
+ color: "var(--colorNeutralForeground1)",
+ },
+ callout: {
+ backgroundColor: "var(--colorNeutralBackground2)",
+ border: "1px solid var(--colorNeutralStroke1)",
+ },
+ dropdownItems: {
+ backgroundColor: "var(--colorNeutralBackground2)",
+ },
+ dropdownItem: {
+ backgroundColor: "transparent",
+ color: "var(--colorNeutralForeground1)",
+ selectors: {
+ "&:hover": {
+ backgroundColor: "var(--colorNeutralBackground4)",
+ color: "var(--colorNeutralForeground1)",
+ },
+ "&:focus": {
+ backgroundColor: "var(--colorNeutralBackground4)",
+ color: "var(--colorNeutralForeground1)",
+ },
+ ".ms-Dropdown-optionText": {
+ color: "var(--colorNeutralForeground1)",
+ },
+ },
+ },
+ dropdownItemSelected: {
+ backgroundColor: "var(--colorBrandBackground)",
+ color: "var(--colorNeutralForegroundOnBrand)",
+ selectors: {
+ ".ms-Dropdown-optionText": {
+ color: "var(--colorNeutralForegroundOnBrand)",
+ },
+ },
+ },
+ dropdownOptionText: {
+ color: "var(--colorNeutralForeground1)",
+ },
+ }}
/>
{
<>
-
+
Open this database account in a new browser tab with Cosmos DB Explorer. You can connect using your
Microsoft account or a connection string.
diff --git a/src/Explorer/Panes/AddCollectionPanel/AddCollectionPanel.tsx b/src/Explorer/Panes/AddCollectionPanel/AddCollectionPanel.tsx
index 58d7037b6..4a1009ba2 100644
--- a/src/Explorer/Panes/AddCollectionPanel/AddCollectionPanel.tsx
+++ b/src/Explorer/Panes/AddCollectionPanel/AddCollectionPanel.tsx
@@ -350,9 +350,14 @@ export class AddCollectionPanel extends React.Component, isChecked: boolean) =>
this.setState({ isSharedThroughputChecked: isChecked })
@@ -649,7 +654,27 @@ export class AddCollectionPanel extends React.Component
= Constants.BackendDefaults.maxNumMultiHashPartition}
onClick={() => this.setState({ subPartitionKeys: [...this.state.subPartitionKeys, ""] })}
@@ -657,7 +682,7 @@ export class AddCollectionPanel extends React.Component
{this.state.subPartitionKeys.length > 0 && (
-
+
, isChecked: boolean) =>
this.setState({ enableDedicatedThroughput: isChecked })
@@ -769,7 +799,7 @@ export class AddCollectionPanel extends React.Component this.setState({ uniqueKeys: [...this.state.uniqueKeys, ""] })}
>
Add unique key
@@ -937,9 +967,14 @@ export class AddCollectionPanel extends React.Component, isChecked: boolean) =>
this.setState({ createMongoWildCardIndex: isChecked })
@@ -954,15 +989,20 @@ export class AddCollectionPanel extends React.Component, isChecked: boolean) =>
this.setState({ useHashV1: isChecked, subPartitionKeys: [] })
}
/>
-
+
= ({
label="My application uses an older Cosmos .NET or Java SDK version (.NET V1 or Java V2)"
checked={useHashV1}
styles={{
- text: { fontSize: 12 },
+ text: { fontSize: 12, color: "var(--colorNeutralForeground1)" },
checkbox: { width: 12, height: 12 },
label: { padding: 0, alignItems: "center", wordWrap: "break-word", whiteSpace: "break-spaces" },
+ root: {
+ selectors: {
+ ":hover .ms-Checkbox-text": { color: "var(--colorNeutralForeground1)" },
+ },
+ },
}}
onChange={(ev: React.FormEvent, isChecked: boolean) => {
useHashV1CheckboxOnChange(isChecked);
}}
/>
-
+
{subPartitionKeys.length > 0 && (
-
+
= ({
return (
-
+
When changing a container’s partition key, you will need to create a destination container with the correct
partition key. You may also select an existing destination container.
= ({
Add hierarchical partition key
{subPartitionKeys.length > 0 && (
-
+
@@ -997,7 +1082,9 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
ariaLabel="Enable cross partition query"
checked={crossPartitionQueryEnabled}
onChange={() => setCrossPartitionQueryEnabled(!crossPartitionQueryEnabled)}
- label="Enable cross-partition query"
+ onRenderLabel={() => (
+ Enable cross-partition query
+ )}
/>
@@ -1029,7 +1116,9 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
ariaLabel="EnableQueryControl"
checked={queryControlEnabled}
onChange={() => setQueryControlEnabled(!queryControlEnabled)}
- label="Enable query control"
+ onRenderLabel={() => (
+ Enable query control
+ )}
/>
@@ -1063,6 +1152,7 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
onValidate={(newValue) => setMaxDegreeOfParallelism(parseInt(newValue) || maxDegreeOfParallelism)}
ariaLabel="Max degree of parallelism"
label="Max degree of parallelism"
+ styles={spinButtonStyles}
/>
-
+
diff --git a/src/Explorer/Panes/SettingsPane/__snapshots__/SettingsPane.test.tsx.snap b/src/Explorer/Panes/SettingsPane/__snapshots__/SettingsPane.test.tsx.snap
index ca0243ec7..af4dbbd11 100644
--- a/src/Explorer/Panes/SettingsPane/__snapshots__/SettingsPane.test.tsx.snap
+++ b/src/Explorer/Panes/SettingsPane/__snapshots__/SettingsPane.test.tsx.snap
@@ -19,14 +19,14 @@ exports[`Settings Pane should render Default properly 1`] = `
>
@@ -112,14 +176,14 @@ exports[`Settings Pane should render Default properly 1`] = `
>
@@ -580,14 +799,14 @@ exports[`Settings Pane should render Default properly 1`] = `
>
Clear History
@@ -639,7 +894,7 @@ exports[`Settings Pane should render Default properly 1`] = `
className="settingsSection"
>
Clear History
@@ -964,7 +1322,7 @@ exports[`Settings Pane should render Gremlin properly 1`] = `
className="settingsSection"
>
Explorer Version
{explorerVersion}
Page Options
Query Timeout
RU Limit
Default Query Results View
Retry Settings
Enable container pagination
Enable cross-partition query
Enhanced query control
Max degree of parallelism
Advanced Settings
Retry Settings
Enable container pagination
Display Gremlin query results as:
Advanced Settings