+
+
+ useSidePanel
+ .getState()
+ .openSidePanel(
+ GlobalSecondaryIndexLabels.NewGlobalSecondaryIndex,
+
+ );
+};
diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/GlobalSecondaryIndexTargetComponent.test.tsx b/src/Explorer/Controls/Settings/SettingsSubComponents/GlobalSecondaryIndexTargetComponent.test.tsx
new file mode 100644
index 000000000..6296cdab7
--- /dev/null
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/GlobalSecondaryIndexTargetComponent.test.tsx
@@ -0,0 +1,32 @@
+import { Text } from "@fluentui/react";
+import { Collection } from "Contracts/ViewModels";
+import { shallow } from "enzyme";
+import React from "react";
+import { collection } from "../TestUtils";
+import { GlobalSecondaryIndexTargetComponent } from "./GlobalSecondaryIndexTargetComponent";
+
+describe("GlobalSecondaryIndexTargetComponent", () => {
+ let testCollection: Collection;
+
+ beforeEach(() => {
+ testCollection = {
+ ...collection,
+ materializedViewDefinition: collection.materializedViewDefinition,
+ };
+ });
+
+ it("renders without crashing", () => {
+ const wrapper = shallow(
@@ -366,29 +366,6 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
});
};
- private minRUperGBSurvey = (): JSX.Element => {
- const href = `https://ncv.microsoft.com/vRBTO37jmO?ctx={"AzureSubscriptionId":"${userContext.subscriptionId}","CosmosDBAccountName":"${userContext.databaseAccount?.name}"}`;
- const oneTBinKB = 1000000000;
- const minRUperGB = 10;
- const featureFlagEnabled = userContext.features.showMinRUSurvey;
- const collectionIsEligible =
- userContext.subscriptionType !== SubscriptionType.Internal &&
- this.props.usageSizeInKB > oneTBinKB &&
- this.props.minimum >= usageInGB(this.props.usageSizeInKB) * minRUperGB;
- if (featureFlagEnabled || collectionIsEligible) {
- return (
-
- Need to scale below {this.props.minimum} RU/s? Reach out by filling{" "}
-
- this questionnaire
-
- .
-
- );
- }
- return undefined;
- };
-
private renderThroughputModeChoices = (): JSX.Element => {
const labelId = "settingsV2RadioButtonLabelId";
return (
@@ -399,22 +376,26 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
toolTipElement={getToolTipContainer(this.props.infoBubbleText)}
/>
- {this.overrideWithProvisionedThroughputSettings() && (
-
- {manualToAutoscaleDisclaimerElement}
-
+ {!this.props.isGlobalSecondaryIndex && (
+ <>
+ {this.overrideWithProvisionedThroughputSettings() && (
+
+ {manualToAutoscaleDisclaimerElement}
+
+ )}
+ {
- const sanitizedValue = getSanitizedInputValue(value);
- return sanitizedValue % 1000
- ? "Throughput value must be in increments of 1000"
- : this.props.throughputError;
- }}
- validateOnLoad={false}
- />
+
+ {/* Column 1: Minimum RU/s */}
+
+
+
+ Minimum RU/s
+
+
+
+ {AutoPilotUtils.getMinRUsBasedOnUserInput(this.props.maxAutoPilotThroughput)}
+
+
+
+ {/* Column 2: "x 10 =" Text */}
+
+ x 10 =
+
+
+ {/* Column 3: Maximum RU/s */}
+
+
+
+ Maximum RU/s
+
+
+ {
+ const sanitizedValue = getSanitizedInputValue(value);
+ return sanitizedValue % 1000
+ ? "Throughput value must be in increments of 1000"
+ : this.props.throughputError;
+ }}
+ validateOnLoad={false}
+ />
+
+
) : (
)}
- {this.minRUperGBSurvey()}
{this.props.spendAckVisible && (
-
+
+
+ Minimum RU/s
+
+
+
+ 400
+
+
+
+ x 10 =
+
+
+
+
+ Maximum RU/s
+
+
+
+
+
+
+ Change
+ partition key
+
+
+
+
+ Current
+ partition key
+
+
+ Partitioning
+
+
+
+
+ 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.
+
+
+`;
+
+exports[`PartitionKeyComponent renders read-only component and matches snapshot 1`] = `
+
+
+
+
+
+ Current
+ partition key
+
+
+ Partitioning
+
+
+
+
+ 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 db6960740..9d5471ccc 100644
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/SubSettingsComponent.test.tsx.snap
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/SubSettingsComponent.test.tsx.snap
@@ -231,6 +231,34 @@ exports[`SubSettingsComponent analyticalTimeToLive hidden 1`] = `
Non-hierarchically partitioned container.
+
+
`;
@@ -520,6 +548,34 @@ exports[`SubSettingsComponent analyticalTimeToLiveSeconds hidden 1`] = `
Non-hierarchically partitioned container.
+
+
`;
@@ -769,6 +825,34 @@ exports[`SubSettingsComponent changeFeedPolicy hidden 1`] = `
Non-hierarchically partitioned container.
+
+
`;
@@ -1083,6 +1167,34 @@ exports[`SubSettingsComponent renders 1`] = `
Non-hierarchically partitioned container.
+
+
`;
@@ -1371,5 +1483,33 @@ exports[`SubSettingsComponent timeToLiveSeconds hidden 1`] = `
Non-hierarchically partitioned container.
+
+
`;
diff --git a/src/Explorer/Controls/Settings/SettingsUtils.tsx b/src/Explorer/Controls/Settings/SettingsUtils.tsx
index fa8360b9b..2617af6ac 100644
--- a/src/Explorer/Controls/Settings/SettingsUtils.tsx
+++ b/src/Explorer/Controls/Settings/SettingsUtils.tsx
@@ -1,6 +1,7 @@
import * as Constants from "../../../Common/Constants";
import * as DataModels from "../../../Contracts/DataModels";
import * as ViewModels from "../../../Contracts/ViewModels";
+import { isFabricNative } from "../../../Platform/Fabric/FabricUtil";
import { MongoIndex } from "../../../Utils/arm/generatedClients/cosmos/types";
const zeroValue = 0;
@@ -11,7 +12,8 @@ export type isDirtyTypes =
| DataModels.IndexingPolicy
| DataModels.ComputedProperties
| DataModels.VectorEmbedding[]
- | DataModels.FullTextPolicy;
+ | DataModels.FullTextPolicy
+ | DataModels.ThroughputBucket[];
export const TtlOff = "off";
export const TtlOn = "on";
export const TtlOnNoDefault = "on-nodefault";
@@ -55,6 +57,8 @@ export enum SettingsV2TabTypes {
PartitionKeyTab,
ComputedPropertiesTab,
ContainerVectorPolicyTab,
+ ThroughputBucketsTab,
+ GlobalSecondaryIndexTab,
}
export enum ContainerPolicyTabTypes {
@@ -162,11 +166,15 @@ export const getTabTitle = (tab: SettingsV2TabTypes): string => {
case SettingsV2TabTypes.IndexingPolicyTab:
return "Indexing Policy";
case SettingsV2TabTypes.PartitionKeyTab:
- return "Partition Keys (preview)";
+ return isFabricNative() ? "Partition Keys" : "Partition Keys (preview)";
case SettingsV2TabTypes.ComputedPropertiesTab:
return "Computed Properties";
case SettingsV2TabTypes.ContainerVectorPolicyTab:
return "Container Policies";
+ case SettingsV2TabTypes.ThroughputBucketsTab:
+ return "Throughput Buckets";
+ case SettingsV2TabTypes.GlobalSecondaryIndexTab:
+ return "Global Secondary Index (Preview)";
default:
throw new Error(`Unknown tab ${tab}`);
}
diff --git a/src/Explorer/Controls/Settings/TestUtils.tsx b/src/Explorer/Controls/Settings/TestUtils.tsx
index c158e5cba..96dfbddb3 100644
--- a/src/Explorer/Controls/Settings/TestUtils.tsx
+++ b/src/Explorer/Controls/Settings/TestUtils.tsx
@@ -17,7 +17,15 @@ export const collection = {
includedPaths: [],
excludedPaths: [],
}),
- uniqueKeyPolicy: {} as DataModels.UniqueKeyPolicy,
+ rawDataModel: {
+ uniqueKeyPolicy: {
+ uniqueKeys: [
+ {
+ paths: ["/id"],
+ },
+ ],
+ },
+ },
usageSizeInKB: ko.observable(100),
offer: ko.observable({
autoscaleMaxThroughput: undefined,
@@ -48,6 +56,15 @@ export const collection = {
]),
vectorEmbeddingPolicy: ko.observable({} as DataModels.VectorEmbeddingPolicy),
fullTextPolicy: ko.observable({} as DataModels.FullTextPolicy),
+ materializedViews: ko.observable([
+ { id: "view1", _rid: "rid1" },
+ { id: "view2", _rid: "rid2" },
+ ]),
+ materializedViewDefinition: ko.observable({
+ definition: "SELECT * FROM c WHERE c.id = 1",
+ sourceCollectionId: "source1",
+ sourceCollectionRid: "rid123",
+ }),
readSettings: () => {
return;
},
diff --git a/src/Explorer/Controls/Settings/__snapshots__/SettingsComponent.test.tsx.snap b/src/Explorer/Controls/Settings/__snapshots__/SettingsComponent.test.tsx.snap
index ea6fe2864..732bdf3a7 100644
--- a/src/Explorer/Controls/Settings/__snapshots__/SettingsComponent.test.tsx.snap
+++ b/src/Explorer/Controls/Settings/__snapshots__/SettingsComponent.test.tsx.snap
@@ -60,6 +60,8 @@ exports[`SettingsComponent renders 1`] = `
"getDatabase": [Function],
"id": [Function],
"indexingPolicy": [Function],
+ "materializedViewDefinition": [Function],
+ "materializedViews": [Function],
"offer": [Function],
"partitionKey": {
"kind": "hash",
@@ -69,14 +71,25 @@ exports[`SettingsComponent renders 1`] = `
"partitionKeyProperties": [
"partitionKey",
],
+ "rawDataModel": {
+ "uniqueKeyPolicy": {
+ "uniqueKeys": [
+ {
+ "paths": [
+ "/id",
+ ],
+ },
+ ],
+ },
+ },
"readSettings": [Function],
- "uniqueKeyPolicy": {},
"usageSizeInKB": [Function],
"vectorEmbeddingPolicy": [Function],
}
}
isAutoPilotSelected={false}
isFixedContainer={false}
+ isGlobalSecondaryIndex={true}
onAutoPilotSelected={[Function]}
onMaxAutoPilotThroughputChange={[Function]}
onScaleDiscardableChange={[Function]}
@@ -139,6 +152,8 @@ exports[`SettingsComponent renders 1`] = `
"getDatabase": [Function],
"id": [Function],
"indexingPolicy": [Function],
+ "materializedViewDefinition": [Function],
+ "materializedViews": [Function],
"offer": [Function],
"partitionKey": {
"kind": "hash",
@@ -148,8 +163,18 @@ exports[`SettingsComponent renders 1`] = `
"partitionKeyProperties": [
"partitionKey",
],
+ "rawDataModel": {
+ "uniqueKeyPolicy": {
+ "uniqueKeys": [
+ {
+ "paths": [
+ "/id",
+ ],
+ },
+ ],
+ },
+ },
"readSettings": [Function],
- "uniqueKeyPolicy": {},
"usageSizeInKB": [Function],
"vectorEmbeddingPolicy": [Function],
}
@@ -173,6 +198,32 @@ exports[`SettingsComponent renders 1`] = `
timeToLiveSecondsBaseline={5}
/>
+
+
+
diff --git a/src/Explorer/Controls/ThroughputInput/CostEstimateText/CostEstimateText.tsx b/src/Explorer/Controls/ThroughputInput/CostEstimateText/CostEstimateText.tsx
index fbc469f47..4667a1a74 100644
--- a/src/Explorer/Controls/ThroughputInput/CostEstimateText/CostEstimateText.tsx
+++ b/src/Explorer/Controls/ThroughputInput/CostEstimateText/CostEstimateText.tsx
@@ -1,4 +1,4 @@
-import { Text } from "@fluentui/react";
+import { Stack, Text } from "@fluentui/react";
import React, { FunctionComponent } from "react";
import { InfoTooltip } from "../../../../Common/Tooltip/InfoTooltip";
import * as SharedConstants from "../../../../Shared/Constants";
@@ -44,33 +44,42 @@ export const CostEstimateText: FunctionComponent
+ handleOnChangeMode(e, "Autoscale")}
+ />
+
-
-
+ handleOnChangeMode(e, "Manual")}
+ />
+
+
+
- handleOnChangeMode(e, "Autoscale")}
- />
-
-
- handleOnChangeMode(e, "Manual")}
- />
-
-
-
-
+
- Container
- Max RU/s
+ x 10 =
-
-
-
+
-
+
+
+ Maximum RU/s
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 400
+
+
+
+
+
+
+
+ Minimum RU/s
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+ The minimum RU/s your container will scale to
+
+
+
+
+
+ 
+
+
+
+
+
+ Set the max RU/s to the highest RU/s you want your container to scale to. The container will scale between 10% of max RU/s to the max RU/s based on usage.
+
+
-
-
-
- 
-
-
-
-
-
-
-
+
- Set the max RU/s to the highest RU/s you want your container to scale to. The container will scale between 10% of max RU/s to the max RU/s based on usage.
+
+
+
+
+
+ Estimate your required RU/s withÂ
+
+
+
+ capacity calculator
+
+
+
+ .
+
+
+
+
-
+ aria-orientation="horizontal"
+ className="content-135"
+ role="separator"
+ />
-
-
- = ({ container }: Props) => {
);
}
- const rootStyle =
- configContext.platform === Platform.Fabric
- ? {
- root: {
- backgroundColor: "transparent",
- padding: "2px 8px 0px 8px",
- },
- }
- : {
- root: {
- backgroundColor: backgroundColor,
- },
- };
+ const rootStyle = isFabric()
+ ? {
+ root: {
+ backgroundColor: "transparent",
+ padding: "2px 8px 0px 8px",
+ },
+ }
+ : {
+ root: {
+ backgroundColor: backgroundColor,
+ },
+ };
const allButtons = staticButtons.concat(contextButtons).concat(controlButtons);
const keyboardHandlers = CommandBarUtil.createKeyboardHandlers(allButtons);
diff --git a/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.test.ts b/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.test.ts
index 0a4a805d2..8ac604ea2 100644
--- a/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.test.ts
+++ b/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.test.ts
@@ -37,21 +37,25 @@ describe("CommandBarComponentButtonFactory tests", () => {
expect(enableAzureSynapseLinkBtn).toBeDefined();
});
- it("Button should not be visible for Tables API", () => {
- updateUserContext({
- databaseAccount: {
- properties: {
- capabilities: [{ name: "EnableTable" }],
- },
- } as DatabaseAccount,
- });
-
- const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
- const enableAzureSynapseLinkBtn = buttons.find(
- (button) => button.commandButtonLabel === enableAzureSynapseLinkBtnLabel,
- );
- expect(enableAzureSynapseLinkBtn).toBeUndefined();
- });
+ // TODO: Now that Tables API supports dataplane RBAC, calling createStaticCommandBarButtons will enable the
+ // Entra ID Login button, which causes this test to fail due to "Invalid hook call.". This seems to be
+ // unsupported in jest and needs to be tested with react-hooks-testing-library.
+ //
+ // it("Button should not be visible for Tables API", () => {
+ // updateUserContext({
+ // databaseAccount: {
+ // properties: {
+ // capabilities: [{ name: "EnableTable" }],
+ // },
+ // } as DatabaseAccount,
+ // });
+ //
+ // const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
+ // const enableAzureSynapseLinkBtn = buttons.find(
+ // (button) => button.commandButtonLabel === enableAzureSynapseLinkBtnLabel,
+ // );
+ // expect(enableAzureSynapseLinkBtn).toBeUndefined();
+ //});
it("Button should not be visible for Cassandra API", () => {
updateUserContext({
diff --git a/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx b/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx
index 8c374a4c1..fbf1b4434 100644
--- a/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx
+++ b/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx
@@ -1,4 +1,5 @@
import { KeyboardAction } from "KeyboardShortcuts";
+import { isDataplaneRbacSupported } from "Utils/APITypeUtils";
import * as React from "react";
import { useEffect, useState } from "react";
import AddSqlQueryIcon from "../../../../images/AddSqlQuery_16x16.svg";
@@ -13,6 +14,7 @@ import OpenQueryFromDiskIcon from "../../../../images/OpenQueryFromDisk.svg";
import OpenInTabIcon from "../../../../images/open-in-tab.svg";
import SettingsIcon from "../../../../images/settings_15x15.svg";
import SynapseIcon from "../../../../images/synapse-link.svg";
+import VSCodeIcon from "../../../../images/vscode.svg";
import { AuthType } from "../../../AuthType";
import * as Constants from "../../../Common/Constants";
import { Platform, configContext } from "../../../ConfigContext";
@@ -59,9 +61,13 @@ export function createStaticCommandBarButtons(
addDivider();
buttons.push(addSynapseLink);
}
+ if (userContext.apiType !== "Gremlin") {
+ const addVsCode = createOpenVsCodeDialogButton(container);
+ buttons.push(addVsCode);
+ }
}
- if (userContext.apiType === "SQL") {
+ if (isDataplaneRbacSupported(userContext.apiType)) {
const [loginButtonProps, setLoginButtonProps] = useState(undefined);
const dataPlaneRbacEnabled = useDataPlaneRbac((state) => state.dataPlaneRbacEnabled);
const aadTokenUpdated = useDataPlaneRbac((state) => state.aadTokenUpdated);
@@ -125,13 +131,14 @@ export function createContextCommandBarButtons(
const buttons: CommandButtonComponentProps[] = [];
if (!selectedNodeState.isDatabaseNodeOrNoneSelected() && userContext.apiType === "Mongo") {
- const label = useNotebook.getState().isShellEnabled ? "Open Mongo Shell" : "New Shell";
+ const label =
+ useNotebook.getState().isShellEnabled || userContext.features.enableCloudShell ? "Open Mongo Shell" : "New Shell";
const newMongoShellBtn: CommandButtonComponentProps = {
iconSrc: HostedTerminalIcon,
iconAlt: label,
onCommandClick: () => {
const selectedCollection: ViewModels.Collection = selectedNodeState.findSelectedCollection();
- if (useNotebook.getState().isShellEnabled) {
+ if (useNotebook.getState().isShellEnabled || userContext.features.enableCloudShell) {
container.openNotebookTerminal(ViewModels.TerminalKind.Mongo);
} else {
selectedCollection && selectedCollection.onNewMongoShellClick();
@@ -145,7 +152,7 @@ export function createContextCommandBarButtons(
}
if (
- useNotebook.getState().isShellEnabled &&
+ (useNotebook.getState().isShellEnabled || userContext.features.enableCloudShell) &&
!selectedNodeState.isDatabaseNodeOrNoneSelected() &&
userContext.apiType === "Cassandra"
) {
@@ -266,6 +273,18 @@ function createOpenSynapseLinkDialogButton(container: Explorer): CommandButtonCo
};
}
+function createOpenVsCodeDialogButton(container: Explorer): CommandButtonComponentProps {
+ const label = "Visual Studio Code";
+ return {
+ iconSrc: VSCodeIcon,
+ iconAlt: label,
+ onCommandClick: () => container.openInVsCode(),
+ commandButtonLabel: label,
+ hasPopup: false,
+ ariaLabel: label,
+ };
+}
+
function createLoginForEntraIDButton(container: Explorer): CommandButtonComponentProps {
if (configContext.platform !== Platform.Portal) {
return undefined;
@@ -454,7 +473,7 @@ function createOpenTerminalButtonByKind(
iconSrc: HostedTerminalIcon,
iconAlt: label,
onCommandClick: () => {
- if (useNotebook.getState().isNotebookEnabled) {
+ if (useNotebook.getState().isNotebookEnabled || userContext.features.enableCloudShell) {
container.openNotebookTerminal(terminalKind);
}
},
@@ -498,6 +517,6 @@ export function createPostgreButtons(container: Explorer): CommandButtonComponen
export function createVCoreMongoButtons(container: Explorer): CommandButtonComponentProps[] {
const openVCoreMongoTerminalButton = createOpenTerminalButtonByKind(container, ViewModels.TerminalKind.VCoreMongo);
-
- return [openVCoreMongoTerminalButton];
+ const addVsCode = createOpenVsCodeDialogButton(container);
+ return [openVCoreMongoTerminalButton, addVsCode];
}
diff --git a/src/Explorer/Menus/NotificationConsole/ConsoleData.tsx b/src/Explorer/Menus/NotificationConsole/ConsoleData.tsx
index 2ede2f003..9307c164f 100644
--- a/src/Explorer/Menus/NotificationConsole/ConsoleData.tsx
+++ b/src/Explorer/Menus/NotificationConsole/ConsoleData.tsx
@@ -13,4 +13,5 @@ export enum ConsoleDataType {
Info = 0,
Error = 1,
InProgress = 2,
+ Warning = 3,
}
diff --git a/src/Explorer/Menus/NotificationConsole/NotificationConsole.less b/src/Explorer/Menus/NotificationConsole/NotificationConsole.less
index 2e9413020..fb5aed51c 100644
--- a/src/Explorer/Menus/NotificationConsole/NotificationConsole.less
+++ b/src/Explorer/Menus/NotificationConsole/NotificationConsole.less
@@ -36,6 +36,10 @@
&:active {
background-color:@NotificationHigh;
}
+
+ &:focus {
+ .focusedBorder();
+ }
.statusBar {
.dataTypeIcons {
@@ -169,8 +173,20 @@
.message {
flex-grow: 1;
white-space:pre-wrap;
+ overflow-wrap: break-word;
+ word-break: break-word;
}
}
}
}
+
+ @media (max-width: 768px) {
+ .notificationConsoleContents {
+ overflow-y: auto;
+
+ .notificationConsoleData {
+ overflow: visible;
+ }
+ }
+ }
}
\ No newline at end of file
diff --git a/src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx b/src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx
index e86f08320..1288ee5da 100644
--- a/src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx
+++ b/src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx
@@ -14,6 +14,7 @@ import ErrorRedIcon from "../../../../images/error_red.svg";
import infoBubbleIcon from "../../../../images/info-bubble-9x9.svg";
import InfoIcon from "../../../../images/info_color.svg";
import LoadingIcon from "../../../../images/loading.svg";
+import WarningIcon from "../../../../images/warning.svg";
import { ClientDefaults, KeyCodes } from "../../../Common/Constants";
import { userContext } from "../../../UserContext";
import { useNotificationConsole } from "../../../hooks/useNotificationConsole";
@@ -81,10 +82,6 @@ export class NotificationConsoleComponent extends React.Component<
}
}
- public setElememntRef = (element: HTMLElement): void => {
- this.consoleHeaderElement = element;
- };
-
public render(): JSX.Element {
const numInProgress = this.state.allConsoleData.filter(
(data: ConsoleData) => data.type === ConsoleDataType.InProgress,
@@ -95,13 +92,18 @@ export class NotificationConsoleComponent extends React.Component<
const numInfoItems = this.state.allConsoleData.filter(
(data: ConsoleData) => data.type === ConsoleDataType.Info,
).length;
+ const numWarningItems = this.state.allConsoleData.filter(
+ (data: ConsoleData) => data.type === ConsoleDataType.Warning,
+ ).length;
return (
this.expandCollapseConsole()}
onKeyDown={(event: React.KeyboardEvent) => this.onExpandCollapseKeyPress(event)}
tabIndex={0}
@@ -109,17 +111,21 @@ export class NotificationConsoleComponent extends React.Component<
}
{item.type === ConsoleDataType.Error && 
}
{item.type === ConsoleDataType.InProgress && 
}
+ {item.type === ConsoleDataType.Warning && 
}
{item.date}
{item.message}
@@ -259,9 +259,6 @@ export class NotificationConsoleComponent extends React.Component<
}
private onConsoleWasExpanded = (): void => {
- if (this.props.isConsoleExpanded && this.consoleHeaderElement) {
- this.consoleHeaderElement.focus();
- }
useNotificationConsole.getState().setConsoleAnimationFinished(true);
};
diff --git a/src/Explorer/Menus/NotificationConsole/__snapshots__/NotificationConsoleComponent.test.tsx.snap b/src/Explorer/Menus/NotificationConsole/__snapshots__/NotificationConsoleComponent.test.tsx.snap
index 57267f1e0..5d471f177 100644
--- a/src/Explorer/Menus/NotificationConsole/__snapshots__/NotificationConsoleComponent.test.tsx.snap
+++ b/src/Explorer/Menus/NotificationConsole/__snapshots__/NotificationConsoleComponent.test.tsx.snap
@@ -5,10 +5,13 @@ exports[`NotificationConsoleComponent renders the console 1`] = `
className="notificationConsoleContainer"
>
+
+
+
+ 0
+
+
![ChevronUpIcon]()
@@ -176,10 +188,13 @@ exports[`NotificationConsoleComponent renders the console 2`] = `
className="notificationConsoleContainer"
>
+
+
+
+ 0
+
+
![ChevronUpIcon]()
diff --git a/src/Explorer/Notebook/NotebookContainerClient.ts b/src/Explorer/Notebook/NotebookContainerClient.ts
index f58b0d53c..76d4ba2b8 100644
--- a/src/Explorer/Notebook/NotebookContainerClient.ts
+++ b/src/Explorer/Notebook/NotebookContainerClient.ts
@@ -2,7 +2,7 @@
* Notebook container related stuff
*/
import { useDialog } from "Explorer/Controls/Dialog";
-import promiseRetry, { AbortError } from "p-retry";
+import promiseRetry, { AbortError, Options } from "p-retry";
import { PhoenixClient } from "Phoenix/PhoenixClient";
import * as Constants from "../../Common/Constants";
import { ConnectionStatusType, HttpHeaders, HttpStatusCodes, Notebook, PoolIdType } from "../../Common/Constants";
@@ -19,7 +19,7 @@ export class NotebookContainerClient {
private clearReconnectionAttemptMessage? = () => {};
private isResettingWorkspace: boolean;
private phoenixClient: PhoenixClient;
- private retryOptions: promiseRetry.Options;
+ private retryOptions: Options;
private scheduleTimerId: NodeJS.Timeout;
constructor(private onConnectionLost: () => void) {
diff --git a/src/Explorer/Notebook/useNotebook.ts b/src/Explorer/Notebook/useNotebook.ts
index a0f6efbf0..64acb2e3f 100644
--- a/src/Explorer/Notebook/useNotebook.ts
+++ b/src/Explorer/Notebook/useNotebook.ts
@@ -1,6 +1,5 @@
import { isPublicInternetAccessAllowed } from "Common/DatabaseAccountUtility";
import { PhoenixClient } from "Phoenix/PhoenixClient";
-import { useNewPortalBackendEndpoint } from "Utils/EndpointUtils";
import { cloneDeep } from "lodash";
import create, { UseStore } from "zustand";
import { AuthType } from "../../AuthType";
@@ -128,9 +127,7 @@ export const useNotebook: UseStore = create((set, get) => ({
userContext.apiType === "Postgres" || userContext.apiType === "VCoreMongo"
? databaseAccount?.location
: databaseAccount?.properties?.writeLocations?.[0]?.locationName.toLowerCase();
- const disallowedLocationsUri: string = useNewPortalBackendEndpoint(Constants.BackendApi.DisallowedLocations)
- ? `${configContext.PORTAL_BACKEND_ENDPOINT}/api/disallowedlocations`
- : `${configContext.BACKEND_ENDPOINT}/api/disallowedLocations`;
+ const disallowedLocationsUri: string = `${configContext.PORTAL_BACKEND_ENDPOINT}/api/disallowedlocations`;
const authorizationHeader = getAuthorizationHeader();
try {
const response = await fetch(disallowedLocationsUri, {
diff --git a/src/Explorer/OpenActions/OpenActions.tsx b/src/Explorer/OpenActions/OpenActions.tsx
index f3ef288c8..b02a412db 100644
--- a/src/Explorer/OpenActions/OpenActions.tsx
+++ b/src/Explorer/OpenActions/OpenActions.tsx
@@ -1,5 +1,6 @@
// TODO convert this file to an action registry in order to have actions and their handlers be more tightly coupled.
import { useDatabases } from "Explorer/useDatabases";
+import { isFabricMirrored } from "Platform/Fabric/FabricUtil";
import React from "react";
import { ActionContracts } from "../../Contracts/ExplorerContracts";
import * as ViewModels from "../../Contracts/ViewModels";
@@ -56,6 +57,19 @@ function openCollectionTab(
continue;
}
+ if (
+ isFabricMirrored() &&
+ !(
+ // whitelist the tab kinds that are allowed to be opened in Fabric mirrored
+ (
+ action.tabKind === ActionContracts.TabKind.SQLDocuments ||
+ action.tabKind === ActionContracts.TabKind.SQLQuery
+ )
+ )
+ ) {
+ continue;
+ }
+
//expand database first if not expanded to load the collections
if (!database.isDatabaseExpanded?.()) {
database.expandDatabase?.();
@@ -121,10 +135,28 @@ function openCollectionTab(
action.tabKind === ActionContracts.TabKind.SQLQuery ||
action.tabKind === ActionContracts.TabKind[ActionContracts.TabKind.SQLQuery]
) {
+ const openQueryTabAction = action as ActionContracts.OpenQueryTab;
collection.onNewQueryClick(
collection,
undefined,
- generateQueryText(action as ActionContracts.OpenQueryTab, collection.partitionKeyProperties),
+ generateQueryText(openQueryTabAction, collection.partitionKeyProperties),
+ openQueryTabAction.splitterDirection,
+ openQueryTabAction.queryViewSizePercent,
+ );
+ break;
+ }
+
+ if (
+ action.tabKind === ActionContracts.TabKind.MongoQuery ||
+ action.tabKind === ActionContracts.TabKind[ActionContracts.TabKind.MongoQuery]
+ ) {
+ const openQueryTabAction = action as ActionContracts.OpenQueryTab;
+ collection.onNewMongoQueryClick(
+ collection,
+ undefined,
+ generateQueryText(openQueryTabAction, collection.partitionKeyProperties),
+ openQueryTabAction.splitterDirection,
+ openQueryTabAction.queryViewSizePercent,
);
break;
}
@@ -156,6 +188,11 @@ function openPane(action: ActionContracts.OpenPane, explorer: Explorer) {
action.paneKind === ActionContracts.PaneKind[ActionContracts.PaneKind.AddCollection]
) {
explorer.onNewCollectionClicked();
+ } else if (
+ action.paneKind === ActionContracts.PaneKind.QuickStart ||
+ action.paneKind === ActionContracts.PaneKind[ActionContracts.PaneKind.QuickStart]
+ ) {
+ explorer.onNewCollectionClicked({ isQuickstart: true });
} else if (
action.paneKind === ActionContracts.PaneKind.CassandraAddCollection ||
action.paneKind === ActionContracts.PaneKind[ActionContracts.PaneKind.CassandraAddCollection]
diff --git a/src/Explorer/Panes/AddCollectionPanel.test.tsx b/src/Explorer/Panes/AddCollectionPanel/AddCollectionPanel.test.tsx
similarity index 90%
rename from src/Explorer/Panes/AddCollectionPanel.test.tsx
rename to src/Explorer/Panes/AddCollectionPanel/AddCollectionPanel.test.tsx
index 0e87c61de..f075eb828 100644
--- a/src/Explorer/Panes/AddCollectionPanel.test.tsx
+++ b/src/Explorer/Panes/AddCollectionPanel/AddCollectionPanel.test.tsx
@@ -1,6 +1,6 @@
import { shallow } from "enzyme";
import React from "react";
-import Explorer from "../Explorer";
+import Explorer from "../../Explorer";
import { AddCollectionPanel } from "./AddCollectionPanel";
const props = {
diff --git a/src/Explorer/Panes/AddCollectionPanel.tsx b/src/Explorer/Panes/AddCollectionPanel/AddCollectionPanel.tsx
similarity index 75%
rename from src/Explorer/Panes/AddCollectionPanel.tsx
rename to src/Explorer/Panes/AddCollectionPanel/AddCollectionPanel.tsx
index 8a34545d2..323ed1bca 100644
--- a/src/Explorer/Panes/AddCollectionPanel.tsx
+++ b/src/Explorer/Panes/AddCollectionPanel/AddCollectionPanel.tsx
@@ -21,35 +21,46 @@ import { getNewDatabaseSharedThroughputDefault } from "Common/DatabaseUtility";
import { getErrorMessage, getErrorStack } from "Common/ErrorHandlingUtils";
import { configContext, Platform } from "ConfigContext";
import * as DataModels from "Contracts/DataModels";
-import {
- FullTextPoliciesComponent,
- getFullTextLanguageOptions,
-} from "Explorer/Controls/FullTextSeach/FullTextPoliciesComponent";
+import { FullTextPoliciesComponent } from "Explorer/Controls/FullTextSeach/FullTextPoliciesComponent";
import { VectorEmbeddingPoliciesComponent } from "Explorer/Controls/VectorSearch/VectorEmbeddingPoliciesComponent";
+import {
+ AllPropertiesIndexed,
+ AnalyticalStoreHeader,
+ ContainerVectorPolicyTooltipContent,
+ FullTextPolicyDefault,
+ getPartitionKey,
+ getPartitionKeyName,
+ getPartitionKeyPlaceHolder,
+ getPartitionKeyTooltipText,
+ isFreeTierAccount,
+ isSynapseLinkEnabled,
+ parseUniqueKeys,
+ scrollToSection,
+ SharedDatabaseDefault,
+ shouldShowAnalyticalStoreOptions,
+ UniqueKeysHeader,
+} from "Explorer/Panes/AddCollectionPanel/AddCollectionPanelUtility";
import { useSidePanel } from "hooks/useSidePanel";
import { useTeachingBubble } from "hooks/useTeachingBubble";
+import { isFabricNative } from "Platform/Fabric/FabricUtil";
import React from "react";
import { CollectionCreation } from "Shared/Constants";
import { Action } from "Shared/Telemetry/TelemetryConstants";
import * as TelemetryProcessor from "Shared/Telemetry/TelemetryProcessor";
import { userContext } from "UserContext";
import { getCollectionName } from "Utils/APITypeUtils";
-import {
- isCapabilityEnabled,
- isFullTextSearchEnabled,
- isServerlessAccount,
- isVectorSearchEnabled,
-} from "Utils/CapabilityUtils";
+import { isCapabilityEnabled, isServerlessAccount, isVectorSearchEnabled } from "Utils/CapabilityUtils";
import { getUpsellMessage } from "Utils/PricingUtils";
-import { CollapsibleSectionComponent } from "../Controls/CollapsiblePanel/CollapsibleSectionComponent";
-import { ThroughputInput } from "../Controls/ThroughputInput/ThroughputInput";
-import "../Controls/ThroughputInput/ThroughputInput.less";
-import { ContainerSampleGenerator } from "../DataSamples/ContainerSampleGenerator";
-import Explorer from "../Explorer";
-import { useDatabases } from "../useDatabases";
-import { PanelFooterComponent } from "./PanelFooterComponent";
-import { PanelInfoErrorComponent } from "./PanelInfoErrorComponent";
-import { PanelLoadingScreen } from "./PanelLoadingScreen";
+import { ValidCosmosDbIdDescription, ValidCosmosDbIdInputPattern } from "Utils/ValidationUtils";
+import * as AutoPilotUtils from "../../../Utils/AutoPilotUtils";
+import { CollapsibleSectionComponent } from "../../Controls/CollapsiblePanel/CollapsibleSectionComponent";
+import { ThroughputInput } from "../../Controls/ThroughputInput/ThroughputInput";
+import { ContainerSampleGenerator } from "../../DataSamples/ContainerSampleGenerator";
+import Explorer from "../../Explorer";
+import { useDatabases } from "../../useDatabases";
+import { PanelFooterComponent } from "../PanelFooterComponent";
+import { PanelInfoErrorComponent } from "../PanelInfoErrorComponent";
+import { PanelLoadingScreen } from "../PanelLoadingScreen";
export interface AddCollectionPanelProps {
explorer: Explorer;
@@ -57,40 +68,6 @@ export interface AddCollectionPanelProps {
isQuickstart?: boolean;
}
-const SharedDatabaseDefault: DataModels.IndexingPolicy = {
- indexingMode: "consistent",
- automatic: true,
- includedPaths: [],
- excludedPaths: [
- {
- path: "/*",
- },
- ],
-};
-
-export const AllPropertiesIndexed: DataModels.IndexingPolicy = {
- indexingMode: "consistent",
- automatic: true,
- includedPaths: [
- {
- path: "/*",
- indexes: [
- {
- kind: "Range",
- dataType: "Number",
- precision: -1,
- },
- {
- kind: "Range",
- dataType: "String",
- precision: -1,
- },
- ],
- },
- ],
- excludedPaths: [],
-};
-
export const DefaultVectorEmbeddingPolicy: DataModels.VectorEmbeddingPolicy = {
vectorEmbeddings: [],
};
@@ -129,6 +106,7 @@ export class AddCollectionPanel extends React.Component
-
-
- *
-
- Database {userContext.apiType === "Mongo" ? "name" : "id"}
-
-
-
+
+ *
+
+ Database {userContext.apiType === "Mongo" ? "name" : "id"}
+
+
-
-
- {configContext.platform !== Platform.Fabric && (
-
-
- )}
- {this.state.createNewDatabase && (
-
- ) =>
- this.setState({ newDatabaseId: event.target.value })
- }
- />
-
- {!isServerlessAccount() && (
-
- , isChecked: boolean) =>
- this.setState({ isSharedThroughputChecked: isChecked })
- }
+ {configContext.platform !== Platform.Fabric && (
+
+
+ )}
+
+ {this.state.createNewDatabase && (
+
+ ) =>
+ this.setState({ newDatabaseId: event.target.value })
+ }
+ />
+
+ {!isServerlessAccount() && (
+
+ , isChecked: boolean) =>
+ this.setState({ isSharedThroughputChecked: isChecked })
+ }
+ />
+
- )}
+ >
+
+ )}
- {!isServerlessAccount() && this.state.isSharedThroughputChecked && (
- (this.newDatabaseThroughput = throughput)}
- setIsAutoscale={(isAutoscale: boolean) => (this.isNewDatabaseAutoscale = isAutoscale)}
- setIsThroughputCapExceeded={(isThroughputCapExceeded: boolean) =>
- this.setState({ isThroughputCapExceeded })
- }
- onCostAcknowledgeChange={(isAcknowledge: boolean) => (this.isCostAcknowledged = isAcknowledge)}
- />
- )}
-
- )}
- {!this.state.createNewDatabase && (
- , database: IDropdownOption) =>
- this.setState({ selectedDatabaseId: database.key as string })
- }
- defaultSelectedKey={this.props.databaseId}
- responsiveMode={999}
- />
- )}
-
+ {!isServerlessAccount() && this.state.isSharedThroughputChecked && (
+ (this.newDatabaseThroughput = throughput)}
+ setIsAutoscale={(isAutoscale: boolean) => (this.isNewDatabaseAutoscale = isAutoscale)}
+ setIsThroughputCapExceeded={(isThroughputCapExceeded: boolean) =>
+ this.setState({ isThroughputCapExceeded })
+ }
+ onCostAcknowledgeChange={(isAcknowledge: boolean) => (this.isCostAcknowledged = isAcknowledge)}
+ />
+ )}
+
+ )}
+ {!this.state.createNewDatabase && (
+ , database: IDropdownOption) =>
+ this.setState({ selectedDatabaseId: database.key as string })
+ }
+ defaultSelectedKey={this.props.databaseId}
+ responsiveMode={999}
+ />
+ )}
+
-
+
*
{`${getCollectionName()} id`}
@@ -456,8 +437,8 @@ export class AddCollectionPanel extends React.Component
{this.shouldShowIndexingOptionsForFreeTierAccount() && (
-
+
*
Indexing
@@ -517,7 +499,7 @@ export class AddCollectionPanel extends React.Component
-
+
*
Sharding
@@ -573,20 +555,17 @@ export class AddCollectionPanel extends React.Component
-
+
*
- {this.getPartitionKeyName()}
+ {getPartitionKeyName()}
-
+
@@ -600,8 +579,8 @@ export class AddCollectionPanel extends React.Component {
return (
-
+
- 
+
{numInProgress}
- 
+
{numErroredItems}
- 
+
{numInfoItems}
+
+
+ {numWarningItems}
+
{userContext.features.pr &&
-
+
@@ -207,6 +206,7 @@ export class NotificationConsoleComponent extends React.Component<
{item.type === ConsoleDataType.Info &&
-
+
+
+
-
- Create new
+
+
+ Use existing
+
+ 0 ? 1 : 0}
className="panelTextField"
autoComplete="off"
- placeholder={this.getPartitionKeyPlaceHolder(index)}
- aria-label={this.getPartitionKeyName()}
+ placeholder={getPartitionKeyPlaceHolder(index)}
+ aria-label={getPartitionKeyName()}
pattern={".*"}
title={""}
value={subPartitionKey}
@@ -688,6 +667,7 @@ export class AddCollectionPanel extends React.Component
)}
+
)}
- {this.shouldShowCollectionThroughputInput() && (
+ {this.shouldShowCollectionThroughputInput() && !isFabricNative() && (
(this.collectionThroughput = throughput)}
setIsAutoscale={(isAutoscale: boolean) => (this.isCollectionAutoscale = isAutoscale)}
@@ -747,29 +727,9 @@ export class AddCollectionPanel extends React.Component
-
-
- Unique keys
-
-
-
-
-
+ {!isFabricNative() && userContext.apiType === "SQL" && (
+
+ {UniqueKeysHeader()}
{this.state.uniqueKeys.map((uniqueKey: string, i: number): JSX.Element => {
return (
@@ -782,7 +742,6 @@ export class AddCollectionPanel extends React.Component) => {
const uniqueKeys = this.state.uniqueKeys.map((uniqueKey: string, j: number) => {
@@ -817,31 +776,22 @@ export class AddCollectionPanel extends React.Component
)}
- {this.shouldShowAnalyticalStoreOptions() && (
-
-
-
- Analytical store
-
-
-
-
+ {!isFabricNative() && userContext.apiType === "SQL" && (
+
+
+ {AnalyticalStoreHeader()}
+
- {!this.isSynapseLinkEnabled() && (
+ {!isSynapseLinkEnabled() && (
Azure Synapse Link is required for creating an analytical store{" "}
- {getCollectionName().toLocaleLowerCase()}. Enable Synapse Link for this Cosmos DB account.{" "}
+ {getCollectionName().toLocaleLowerCase()}. Enable Synapse Link for this Cosmos DB account.
Learn more @@ -899,9 +850,9 @@ export class AddCollectionPanel extends React.Component {
- this.scrollToSection("collapsibleVectorPolicySectionContent");
+ scrollToSection("collapsibleVectorPolicySectionContent");
}}
- tooltipContent={this.getContainerVectorPolicyTooltipContent()}
+ tooltipContent={ContainerVectorPolicyTooltipContent()}
>
@@ -927,7 +878,7 @@ export class AddCollectionPanel extends React.Component {
- this.scrollToSection("collapsibleFullTextPolicySectionContent");
+ scrollToSection("collapsibleFullTextPolicySectionContent");
}}
//TODO: uncomment when learn more text becomes available
// tooltipContent={this.getContainerFullTextPolicyTooltipContent()}
@@ -949,13 +900,13 @@ export class AddCollectionPanel extends React.Component
)}
- {userContext.apiType !== "Tables" && (
+ {!isFabricNative() && userContext.apiType !== "Tables" && (
{
TelemetryProcessor.traceOpen(Action.ExpandAddCollectionPaneAdvancedSection);
- this.scrollToSection("collapsibleAdvancedSectionContent");
+ scrollToSection("collapsibleAdvancedSectionContent");
}}
>
@@ -1065,31 +1016,6 @@ export class AddCollectionPanel extends React.Component): void {
if (event.target.checked && !this.state.createNewDatabase) {
this.setState({
@@ -1177,48 +1103,12 @@ export class AddCollectionPanel extends React.Component
- Enable analytical store capability to perform near real-time analytics on your operational data, without
- impacting the performance of transactional workloads.{" "}
-
- Learn more
-
-
- );
- }
-
- private getContainerVectorPolicyTooltipContent(): JSX.Element {
- return (
-
- Describe any properties in your data that contain vectors, so that they can be made available for similarity
- queries.{" "}
-
- Learn more
-
-
- );
- }
-
//TODO: uncomment when learn more text becomes available
// private getContainerFullTextPolicyTooltipContent(): JSX.Element {
// return (
@@ -1284,7 +1150,7 @@ export class AddCollectionPanel extends React.Component capability.name === Constants.CapabilityNames.EnableStorageAnalytics,
- );
- }
-
private shouldShowVectorSearchParameters() {
return isVectorSearchEnabled() && (isServerlessAccount() || this.shouldShowCollectionThroughputInput());
}
private shouldShowFullTextSearchParameters() {
- return isFullTextSearchEnabled() && (isServerlessAccount() || this.shouldShowCollectionThroughputInput());
+ return !isFabricNative() && this.showFullTextSearch;
}
private parseUniqueKeys(): DataModels.UniqueKeyPolicy {
@@ -1406,11 +1239,11 @@ export class AddCollectionPanel extends React.Component
+
+ Unique keys
+
+
+
+
+ );
+}
+
+export function shouldShowAnalyticalStoreOptions(): boolean {
+ if (isFabricNative() || configContext.platform === Platform.Emulator) {
+ return false;
+ }
+
+ switch (userContext.apiType) {
+ case "SQL":
+ case "Mongo":
+ return true;
+ default:
+ return false;
+ }
+}
+
+export function AnalyticalStoreHeader(): JSX.Element {
+ const tooltipContent =
+ "Enable analytical store capability to perform near real-time analytics on your operational data, without impacting the performance of transactional workloads.";
+ return (
+
+
+ Analytical Store
+
+
+
+
+ );
+}
+
+export function AnalyticalStorageContent(): JSX.Element {
+ return (
+
+ Enable analytical store capability to perform near real-time analytics on your operational data, without impacting
+ the performance of transactional workloads.{" "}
+
+ Learn more
+
+
+ );
+}
+
+export function isSynapseLinkEnabled(): boolean {
+ if (!userContext.databaseAccount) {
+ return false;
+ }
+
+ const { properties } = userContext.databaseAccount;
+ if (!properties) {
+ return false;
+ }
+
+ if (properties.enableAnalyticalStorage) {
+ return true;
+ }
+
+ return properties.capabilities?.some(
+ (capability) => capability.name === Constants.CapabilityNames.EnableStorageAnalytics,
+ );
+}
+
+export function scrollToSection(id: string): void {
+ document.getElementById(id)?.scrollIntoView();
+}
+
+export function ContainerVectorPolicyTooltipContent(): JSX.Element {
+ return (
+
+ Describe any properties in your data that contain vectors, so that they can be made available for similarity
+ queries.{" "}
+
+ Learn more
+
+
+ );
+}
+
+export function parseUniqueKeys(uniqueKeys: string[]): DataModels.UniqueKeyPolicy {
+ if (uniqueKeys?.length === 0) {
+ return undefined;
+ }
+
+ const uniqueKeyPolicy: DataModels.UniqueKeyPolicy = { uniqueKeys: [] };
+ uniqueKeys.forEach((uniqueKey: string) => {
+ if (uniqueKey) {
+ const validPaths: string[] = uniqueKey.split(",")?.filter((path) => path?.length > 0);
+ const trimmedPaths: string[] = validPaths?.map((path) => path.trim());
+ if (trimmedPaths?.length > 0) {
+ if (userContext.apiType === "Mongo") {
+ trimmedPaths.map((path) => {
+ const transformedPath = path.split(".").join("/");
+ if (transformedPath[0] !== "/") {
+ return "/" + transformedPath;
+ }
+ return transformedPath;
+ });
+ }
+ uniqueKeyPolicy.uniqueKeys.push({ paths: trimmedPaths });
+ }
+ }
+ });
+
+ return uniqueKeyPolicy;
+}
+
+export const SharedDatabaseDefault: DataModels.IndexingPolicy = {
+ indexingMode: "consistent",
+ automatic: true,
+ includedPaths: [],
+ excludedPaths: [
+ {
+ path: "/*",
+ },
+ ],
+};
+
+export const FullTextPolicyDefault: DataModels.FullTextPolicy = {
+ defaultLanguage: getFullTextLanguageOptions()[0].key as never,
+ fullTextPaths: [],
+};
+
+export const AllPropertiesIndexed: DataModels.IndexingPolicy = {
+ indexingMode: "consistent",
+ automatic: true,
+ includedPaths: [
+ {
+ path: "/*",
+ indexes: [
+ {
+ kind: "Range",
+ dataType: "Number",
+ precision: -1,
+ },
+ {
+ kind: "Range",
+ dataType: "String",
+ precision: -1,
+ },
+ ],
+ },
+ ],
+ excludedPaths: [],
+};
diff --git a/src/Explorer/Panes/__snapshots__/AddCollectionPanel.test.tsx.snap b/src/Explorer/Panes/AddCollectionPanel/__snapshots__/AddCollectionPanel.test.tsx.snap
similarity index 79%
rename from src/Explorer/Panes/__snapshots__/AddCollectionPanel.test.tsx.snap
rename to src/Explorer/Panes/AddCollectionPanel/__snapshots__/AddCollectionPanel.test.tsx.snap
index fa2ae5a76..c4cfa4afa 100644
--- a/src/Explorer/Panes/__snapshots__/AddCollectionPanel.test.tsx.snap
+++ b/src/Explorer/Panes/AddCollectionPanel/__snapshots__/AddCollectionPanel.test.tsx.snap
@@ -11,6 +11,11 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
>
+
+
+
+
-
-
- Analytical store
-
-
- Enable analytical store capability to perform near real-time analytics on your operational data, without impacting the performance of transactional workloads.
-
-
- Learn more
-
-
+
-
-
+
+ Analytical Store
+
+
+
+
+
+
+
+
+
+
+
+
+
= ({
type="text"
aria-required="true"
autoComplete="off"
- pattern="[^/?#\\]*[^/?# \\]"
- title="May not end with space nor contain characters '\' '/' '#' '?'"
+ pattern={ValidCosmosDbIdInputPattern.source}
+ title={ValidCosmosDbIdDescription}
size={40}
aria-label={databaseIdLabel}
placeholder={databaseIdPlaceHolder}
diff --git a/src/Explorer/Panes/AddDatabasePanel/__snapshots__/AddDatabasePanel.test.tsx.snap b/src/Explorer/Panes/AddDatabasePanel/__snapshots__/AddDatabasePanel.test.tsx.snap
index 68a21f696..9afa9f981 100644
--- a/src/Explorer/Panes/AddDatabasePanel/__snapshots__/AddDatabasePanel.test.tsx.snap
+++ b/src/Explorer/Panes/AddDatabasePanel/__snapshots__/AddDatabasePanel.test.tsx.snap
@@ -39,7 +39,7 @@ exports[`AddDatabasePane Pane should render Default properly 1`] = `
data-lpignore={true}
id="database-id"
onChange={[Function]}
- pattern="[^/?#\\\\]*[^/?# \\\\]"
+ pattern="[^\\/?#\\\\]*[^\\/?# \\\\]"
placeholder="Type a new database id"
size={40}
styles={
diff --git a/src/Explorer/Panes/AddGlobalSecondaryIndexPanel/AddGlobalSecondaryIndexPanel.test.tsx b/src/Explorer/Panes/AddGlobalSecondaryIndexPanel/AddGlobalSecondaryIndexPanel.test.tsx
new file mode 100644
index 000000000..05eec133d
--- /dev/null
+++ b/src/Explorer/Panes/AddGlobalSecondaryIndexPanel/AddGlobalSecondaryIndexPanel.test.tsx
@@ -0,0 +1,28 @@
+import { shallow, ShallowWrapper } from "enzyme";
+import Explorer from "Explorer/Explorer";
+import {
+ AddGlobalSecondaryIndexPanel,
+ AddGlobalSecondaryIndexPanelProps,
+} from "Explorer/Panes/AddGlobalSecondaryIndexPanel/AddGlobalSecondaryIndexPanel";
+import React, { Component } from "react";
+
+const props: AddGlobalSecondaryIndexPanelProps = {
+ explorer: new Explorer(),
+};
+
+describe("AddGlobalSecondaryIndexPanel", () => {
+ it("render default panel", () => {
+ const wrapper: ShallowWrapper = shallow(
+ = shallow(
+ ();
+ const [selectedSourceContainer, setSelectedSourceContainer] = useState(sourceContainer);
+ const [globalSecondaryIndexId, setGlobalSecondaryIndexId] = useState();
+ const [definition, setDefinition] = useState();
+ const [partitionKey, setPartitionKey] = useState(getPartitionKey());
+ const [subPartitionKeys, setSubPartitionKeys] = useState([]);
+ const [useHashV1, setUseHashV1] = useState();
+ const [enableDedicatedThroughput, setEnabledDedicatedThroughput] = useState();
+ const [isThroughputCapExceeded, setIsThroughputCapExceeded] = useState();
+ const [enableAnalyticalStore, setEnableAnalyticalStore] = useState();
+ const [vectorEmbeddingPolicy, setVectorEmbeddingPolicy] = useState([]);
+ const [vectorIndexingPolicy, setVectorIndexingPolicy] = useState([]);
+ const [vectorPolicyValidated, setVectorPolicyValidated] = useState(true);
+ const [fullTextPolicy, setFullTextPolicy] = useState(FullTextPolicyDefault);
+ const [fullTextIndexes, setFullTextIndexes] = useState([]);
+ const [fullTextPolicyValidated, setFullTextPolicyValidated] = useState(true);
+ const [errorMessage, setErrorMessage] = useState();
+ const [showErrorDetails, setShowErrorDetails] = useState();
+ const [isExecuting, setIsExecuting] = useState();
+
+ const showFullTextSearch: MutableRefObject = useRef(userContext.apiType === "SQL");
+
+ useEffect(() => {
+ const sourceContainerOptions: IDropdownOption[] = [];
+ useDatabases.getState().databases.forEach((database: Database) => {
+ sourceContainerOptions.push({
+ key: database.rid,
+ text: database.id(),
+ itemType: DropdownMenuItemType.Header,
+ });
+
+ database.collections().forEach((collection: Collection) => {
+ const isGlobalSecondaryIndex: boolean = !!collection.materializedViewDefinition();
+ sourceContainerOptions.push({
+ key: collection.rid,
+ text: collection.id(),
+ disabled: isGlobalSecondaryIndex,
+ ...(isGlobalSecondaryIndex && {
+ title: "This is a global secondary index.",
+ }),
+ data: collection,
+ });
+ });
+ });
+
+ setSourceContainerOptions(sourceContainerOptions);
+ }, []);
+
+ useEffect(() => {
+ scrollToSection("panelContainer");
+ }, [errorMessage]);
+
+ let globalSecondaryIndexThroughput: number;
+ let isCostAcknowledged: boolean;
+
+ const globalSecondaryIndexThroughputOnChange = (globalSecondaryIndexThroughputValue: number): void => {
+ globalSecondaryIndexThroughput = globalSecondaryIndexThroughputValue;
+ };
+
+ const isCostAknowledgedOnChange = (isCostAcknowledgedValue: boolean): void => {
+ isCostAcknowledged = isCostAcknowledgedValue;
+ };
+
+ const isSelectedSourceContainerSharedThroughput = (): boolean => {
+ if (!selectedSourceContainer) {
+ return false;
+ }
+
+ return !!selectedSourceContainer.getDatabase().offer();
+ };
+
+ const showCollectionThroughputInput = (): boolean => {
+ if (isServerlessAccount()) {
+ return false;
+ }
+
+ if (enableDedicatedThroughput) {
+ return true;
+ }
+
+ return !!selectedSourceContainer && !isSelectedSourceContainerSharedThroughput();
+ };
+
+ const showVectorSearchParameters = (): boolean => {
+ return isVectorSearchEnabled() && (isServerlessAccount() || showCollectionThroughputInput());
+ };
+
+ const getAnalyticalStorageTtl = (): number => {
+ if (!isSynapseLinkEnabled()) {
+ return undefined;
+ }
+
+ if (!shouldShowAnalyticalStoreOptions()) {
+ return undefined;
+ }
+
+ if (enableAnalyticalStore) {
+ // TODO: always default to 90 days once the backend hotfix is deployed
+ return userContext.features.ttl90Days
+ ? Constants.AnalyticalStorageTtl.Days90
+ : Constants.AnalyticalStorageTtl.Infinite;
+ }
+
+ return Constants.AnalyticalStorageTtl.Disabled;
+ };
+
+ const validateInputs = (): boolean => {
+ if (!selectedSourceContainer) {
+ setErrorMessage("Please select a source container");
+ return false;
+ }
+
+ if (globalSecondaryIndexThroughput > CollectionCreation.DefaultCollectionRUs100K && !isCostAcknowledged) {
+ const errorMessage: string = "Please acknowledge the estimated monthly spend.";
+ setErrorMessage(errorMessage);
+ return false;
+ }
+
+ if (showVectorSearchParameters()) {
+ if (!vectorPolicyValidated) {
+ setErrorMessage("Please fix errors in container vector policy");
+ return false;
+ }
+
+ if (!fullTextPolicyValidated) {
+ setErrorMessage("Please fix errors in container full text search policy");
+ return false;
+ }
+ }
+
+ return true;
+ };
+
+ const submit = async (event?: React.FormEvent): Promise => {
+ event?.preventDefault();
+
+ if (!validateInputs()) {
+ return;
+ }
+
+ const globalSecondaryIdTrimmed: string = globalSecondaryIndexId.trim();
+
+ const globalSecondaryIndexDefinition: DataModels.MaterializedViewDefinition = {
+ sourceCollectionId: selectedSourceContainer.id(),
+ definition: definition,
+ };
+
+ const partitionKeyTrimmed: string = partitionKey.trim();
+
+ const partitionKeyVersion = useHashV1 ? undefined : 2;
+ const partitionKeyPaths: DataModels.PartitionKey = partitionKeyTrimmed
+ ? {
+ paths: [
+ partitionKeyTrimmed,
+ ...(userContext.apiType === "SQL" && subPartitionKeys.length > 0 ? subPartitionKeys : []),
+ ],
+ kind: userContext.apiType === "SQL" && subPartitionKeys.length > 0 ? "MultiHash" : "Hash",
+ version: partitionKeyVersion,
+ }
+ : undefined;
+
+ const indexingPolicy: DataModels.IndexingPolicy = AllPropertiesIndexed;
+ let vectorEmbeddingPolicyFinal: DataModels.VectorEmbeddingPolicy;
+
+ if (showVectorSearchParameters()) {
+ indexingPolicy.vectorIndexes = vectorIndexingPolicy;
+ vectorEmbeddingPolicyFinal = {
+ vectorEmbeddings: vectorEmbeddingPolicy,
+ };
+ }
+
+ if (showFullTextSearch) {
+ indexingPolicy.fullTextIndexes = fullTextIndexes;
+ }
+
+ const telemetryData: TelemetryProcessor.TelemetryData = {
+ database: {
+ id: selectedSourceContainer.databaseId,
+ shared: isSelectedSourceContainerSharedThroughput(),
+ },
+ collection: {
+ id: globalSecondaryIdTrimmed,
+ throughput: globalSecondaryIndexThroughput,
+ isAutoscale: true,
+ partitionKeyPaths,
+ collectionWithDedicatedThroughput: enableDedicatedThroughput,
+ },
+ subscriptionQuotaId: userContext.quotaId,
+ dataExplorerArea: Constants.Areas.ContextualPane,
+ };
+
+ const startKey: number = TelemetryProcessor.traceStart(Action.CreateCollection, telemetryData);
+ const databaseLevelThroughput: boolean = isSelectedSourceContainerSharedThroughput() && !enableDedicatedThroughput;
+
+ const createGlobalSecondaryIndexParams: DataModels.CreateMaterializedViewsParams = {
+ materializedViewId: globalSecondaryIdTrimmed,
+ materializedViewDefinition: globalSecondaryIndexDefinition,
+ databaseId: selectedSourceContainer.databaseId,
+ databaseLevelThroughput: databaseLevelThroughput,
+ ...(!databaseLevelThroughput && {
+ autoPilotMaxThroughput: globalSecondaryIndexThroughput,
+ }),
+ analyticalStorageTtl: getAnalyticalStorageTtl(),
+ indexingPolicy: indexingPolicy,
+ partitionKey: partitionKeyPaths,
+ vectorEmbeddingPolicy: vectorEmbeddingPolicyFinal,
+ fullTextPolicy: fullTextPolicy,
+ };
+
+ setIsExecuting(true);
+
+ try {
+ await createGlobalSecondaryIndex(createGlobalSecondaryIndexParams);
+ await explorer.refreshAllDatabases();
+ TelemetryProcessor.traceSuccess(Action.CreateGlobalSecondaryIndex, telemetryData, startKey);
+ useSidePanel.getState().closeSidePanel();
+ } catch (error) {
+ const errorMessage: string = getErrorMessage(error);
+ setErrorMessage(errorMessage);
+ setShowErrorDetails(true);
+ const failureTelemetryData = { ...telemetryData, error: errorMessage, errorStack: getErrorStack(error) };
+ TelemetryProcessor.traceFailure(Action.CreateGlobalSecondaryIndex, failureTelemetryData, startKey);
+ } finally {
+ setIsExecuting(false);
+ }
+ };
+
+ return (
+
+ );
+};
diff --git a/src/Explorer/Panes/AddGlobalSecondaryIndexPanel/AddGlobalSecondaryIndexPanelStyles.ts b/src/Explorer/Panes/AddGlobalSecondaryIndexPanel/AddGlobalSecondaryIndexPanelStyles.ts
new file mode 100644
index 000000000..cfb6da846
--- /dev/null
+++ b/src/Explorer/Panes/AddGlobalSecondaryIndexPanel/AddGlobalSecondaryIndexPanelStyles.ts
@@ -0,0 +1,15 @@
+import { IDropdownStyleProps, IDropdownStyles, IStyleFunctionOrObject } from "@fluentui/react";
+import { CSSProperties } from "react";
+
+export function chooseSourceContainerStyles(): IStyleFunctionOrObject {
+ return {
+ title: { height: 27, lineHeight: 27 },
+ dropdownItem: { fontSize: 12 },
+ dropdownItemDisabled: { fontSize: 12 },
+ dropdownItemSelected: { fontSize: 12 },
+ };
+}
+
+export function chooseSourceContainerStyle(): CSSProperties {
+ return { width: 300, fontSize: 12 };
+}
diff --git a/src/Explorer/Panes/AddGlobalSecondaryIndexPanel/Components/AdvancedComponent.tsx b/src/Explorer/Panes/AddGlobalSecondaryIndexPanel/Components/AdvancedComponent.tsx
new file mode 100644
index 000000000..17d1cb303
--- /dev/null
+++ b/src/Explorer/Panes/AddGlobalSecondaryIndexPanel/Components/AdvancedComponent.tsx
@@ -0,0 +1,54 @@
+import { Checkbox, Icon, Link, Stack, Text } from "@fluentui/react";
+import { CollapsibleSectionComponent } from "Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent";
+import { scrollToSection } from "Explorer/Panes/AddCollectionPanel/AddCollectionPanelUtility";
+import React from "react";
+import { Action } from "Shared/Telemetry/TelemetryConstants";
+import * as TelemetryProcessor from "Shared/Telemetry/TelemetryProcessor";
+
+export interface AdvancedComponentProps {
+ useHashV1: boolean;
+ setUseHashV1: React.Dispatch>;
+ setSubPartitionKeys: React.Dispatch>;
+}
+export const AdvancedComponent = (props: AdvancedComponentProps): JSX.Element => {
+ const { useHashV1, setUseHashV1, setSubPartitionKeys } = props;
+
+ const useHashV1CheckboxOnChange = (isChecked: boolean): void => {
+ setUseHashV1(isChecked);
+ setSubPartitionKeys([]);
+ };
+
+ return (
+ {
+ TelemetryProcessor.traceOpen(Action.ExpandAddGlobalSecondaryIndexPaneAdvancedSection);
+ scrollToSection("collapsibleAdvancedSectionContent");
+ }}
+ >
+
+ , isChecked: boolean) => {
+ useHashV1CheckboxOnChange(isChecked);
+ }}
+ />
+
+
+
+
+ );
+};
diff --git a/src/Explorer/Panes/AddGlobalSecondaryIndexPanel/Components/AnalyticalStoreComponent.tsx b/src/Explorer/Panes/AddGlobalSecondaryIndexPanel/Components/AnalyticalStoreComponent.tsx
new file mode 100644
index 000000000..46c28c6d8
--- /dev/null
+++ b/src/Explorer/Panes/AddGlobalSecondaryIndexPanel/Components/AnalyticalStoreComponent.tsx
@@ -0,0 +1,99 @@
+import { DefaultButton, Link, Stack, Text } from "@fluentui/react";
+import * as Constants from "Common/Constants";
+import Explorer from "Explorer/Explorer";
+import {
+ AnalyticalStorageContent,
+ isSynapseLinkEnabled,
+} from "Explorer/Panes/AddCollectionPanel/AddCollectionPanelUtility";
+import React from "react";
+import { getCollectionName } from "Utils/APITypeUtils";
+
+export interface AnalyticalStoreComponentProps {
+ explorer: Explorer;
+ enableAnalyticalStore: boolean;
+ setEnableAnalyticalStore: React.Dispatch>;
+}
+export const AnalyticalStoreComponent = (props: AnalyticalStoreComponentProps): JSX.Element => {
+ const { explorer, enableAnalyticalStore, setEnableAnalyticalStore } = props;
+
+ const onEnableAnalyticalStoreRadioButtonChange = (checked: boolean): void => {
+ if (checked && !enableAnalyticalStore) {
+ setEnableAnalyticalStore(true);
+ }
+ };
+
+ const onDisableAnalyticalStoreRadioButtonnChange = (checked: boolean): void => {
+ if (checked && enableAnalyticalStore) {
+ setEnableAnalyticalStore(false);
+ }
+ };
+
+ return (
+
+
+ {AnalyticalStorageContent()}
+
+
+
+
+
+ {!isSynapseLinkEnabled() && (
+
+
+ Azure Synapse Link is required for creating an analytical store {getCollectionName().toLocaleLowerCase()}.
+ Enable Synapse Link for this Cosmos DB account.{" "}
+
+ Learn more
+
+
+ explorer.openEnableSynapseLinkDialog()}
+ style={{ height: 27, width: 80 }}
+ styles={{ label: { fontSize: 12 } }}
+ />
+
+ )}
+
+ );
+};
diff --git a/src/Explorer/Panes/AddGlobalSecondaryIndexPanel/Components/FullTextSearchComponent.tsx b/src/Explorer/Panes/AddGlobalSecondaryIndexPanel/Components/FullTextSearchComponent.tsx
new file mode 100644
index 000000000..e02bce6ab
--- /dev/null
+++ b/src/Explorer/Panes/AddGlobalSecondaryIndexPanel/Components/FullTextSearchComponent.tsx
@@ -0,0 +1,45 @@
+import { Stack } from "@fluentui/react";
+import { FullTextIndex, FullTextPolicy } from "Contracts/DataModels";
+import { CollapsibleSectionComponent } from "Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent";
+import { FullTextPoliciesComponent } from "Explorer/Controls/FullTextSeach/FullTextPoliciesComponent";
+import { scrollToSection } from "Explorer/Panes/AddCollectionPanel/AddCollectionPanelUtility";
+import React from "react";
+
+export interface FullTextSearchComponentProps {
+ fullTextPolicy: FullTextPolicy;
+ setFullTextPolicy: React.Dispatch>;
+ setFullTextIndexes: React.Dispatch>;
+ setFullTextPolicyValidated: React.Dispatch>;
+}
+export const FullTextSearchComponent = (props: FullTextSearchComponentProps): JSX.Element => {
+ const { fullTextPolicy, setFullTextPolicy, setFullTextIndexes, setFullTextPolicyValidated } = props;
+
+ return (
+
+ {
+ scrollToSection("collapsibleFullTextPolicySectionContent");
+ }}
+ >
+
+
+ {
+ setFullTextPolicy(fullTextPolicy);
+ setFullTextIndexes(fullTextIndexes);
+ setFullTextPolicyValidated(fullTextPolicyValidated);
+ }}
+ />
+
+
+
+
+ );
+};
diff --git a/src/Explorer/Panes/AddGlobalSecondaryIndexPanel/Components/PartitionKeyComponent.tsx b/src/Explorer/Panes/AddGlobalSecondaryIndexPanel/Components/PartitionKeyComponent.tsx
new file mode 100644
index 000000000..f8f01c24b
--- /dev/null
+++ b/src/Explorer/Panes/AddGlobalSecondaryIndexPanel/Components/PartitionKeyComponent.tsx
@@ -0,0 +1,132 @@
+import { DefaultButton, DirectionalHint, Icon, IconButton, Link, Stack, Text, TooltipHost } from "@fluentui/react";
+import * as Constants from "Common/Constants";
+import {
+ getPartitionKeyName,
+ getPartitionKeyPlaceHolder,
+ getPartitionKeyTooltipText,
+} from "Explorer/Panes/AddCollectionPanel/AddCollectionPanelUtility";
+import React from "react";
+
+export interface PartitionKeyComponentProps {
+ partitionKey?: string;
+ setPartitionKey: React.Dispatch>;
+ subPartitionKeys: string[];
+ setSubPartitionKeys: React.Dispatch>;
+ useHashV1: boolean;
+}
+
+export const PartitionKeyComponent = (props: PartitionKeyComponentProps): JSX.Element => {
+ const { partitionKey, setPartitionKey, subPartitionKeys, setSubPartitionKeys, useHashV1 } = props;
+
+ const partitionKeyValueOnChange = (value: string): void => {
+ if (!partitionKey && !value.startsWith("/")) {
+ setPartitionKey("/" + value);
+ } else {
+ setPartitionKey(value);
+ }
+ };
+
+ const subPartitionKeysValueOnChange = (value: string, index: number): void => {
+ const updatedSubPartitionKeys: string[] = [...subPartitionKeys];
+ if (!updatedSubPartitionKeys[index] && !value.startsWith("/")) {
+ updatedSubPartitionKeys[index] = "/" + value.trim();
+ } else {
+ updatedSubPartitionKeys[index] = value.trim();
+ }
+ setSubPartitionKeys(updatedSubPartitionKeys);
+ };
+
+ return (
+
+
+ *
+
+ Partition key
+
+
+
+
+
+ ) => {
+ partitionKeyValueOnChange(event.target.value);
+ }}
+ />
+ {subPartitionKeys.map((subPartitionKey: string, subPartitionKeyIndex: number) => {
+ return (
+
+
+ 0 ? 1 : 0}
+ className="panelTextField"
+ autoComplete="off"
+ placeholder={getPartitionKeyPlaceHolder(subPartitionKeyIndex)}
+ aria-label={getPartitionKeyName()}
+ pattern={".*"}
+ title={""}
+ value={subPartitionKey}
+ onChange={(event: React.ChangeEvent) => {
+ subPartitionKeysValueOnChange(event.target.value, subPartitionKeyIndex);
+ }}
+ />
+ {
+ const updatedSubPartitionKeys = subPartitionKeys.filter(
+ (_, subPartitionKeyIndexToRemove) => subPartitionKeyIndex !== subPartitionKeyIndexToRemove,
+ );
+ setSubPartitionKeys(updatedSubPartitionKeys);
+ }}
+ />
+
+ );
+ })}
+
+ = Constants.BackendDefaults.maxNumMultiHashPartition}
+ onClick={() => setSubPartitionKeys([...subPartitionKeys, ""])}
+ >
+ Add hierarchical partition key
+
+ {subPartitionKeys.length > 0 && (
+
+
+ )}
+
+
+ );
+};
diff --git a/src/Explorer/Panes/AddGlobalSecondaryIndexPanel/Components/ThroughputComponent.tsx b/src/Explorer/Panes/AddGlobalSecondaryIndexPanel/Components/ThroughputComponent.tsx
new file mode 100644
index 000000000..d4f9934bc
--- /dev/null
+++ b/src/Explorer/Panes/AddGlobalSecondaryIndexPanel/Components/ThroughputComponent.tsx
@@ -0,0 +1,68 @@
+import { Checkbox, Stack } from "@fluentui/react";
+import { ThroughputInput } from "Explorer/Controls/ThroughputInput/ThroughputInput";
+import { isFreeTierAccount } from "Explorer/Panes/AddCollectionPanel/AddCollectionPanelUtility";
+import { useDatabases } from "Explorer/useDatabases";
+import React from "react";
+import { getCollectionName } from "Utils/APITypeUtils";
+import { isServerlessAccount } from "Utils/CapabilityUtils";
+
+export interface ThroughputComponentProps {
+ enableDedicatedThroughput: boolean;
+ setEnabledDedicatedThroughput: React.Dispatch>;
+ isSelectedSourceContainerSharedThroughput: () => boolean;
+ showCollectionThroughputInput: () => boolean;
+ globalSecondaryIndexThroughputOnChange: (globalSecondaryIndexThroughputValue: number) => void;
+ setIsThroughputCapExceeded: React.Dispatch>;
+ isCostAknowledgedOnChange: (isCostAknowledgedValue: boolean) => void;
+}
+
+export const ThroughputComponent = (props: ThroughputComponentProps): JSX.Element => {
+ const {
+ enableDedicatedThroughput,
+ setEnabledDedicatedThroughput,
+ isSelectedSourceContainerSharedThroughput,
+ showCollectionThroughputInput,
+ globalSecondaryIndexThroughputOnChange,
+ setIsThroughputCapExceeded,
+ isCostAknowledgedOnChange,
+ } = props;
+
+ return (
+
+ {!isServerlessAccount() && isSelectedSourceContainerSharedThroughput() && (
+
+ setEnabledDedicatedThroughput(isChecked)}
+ />
+
+ )}
+ {showCollectionThroughputInput() && (
+ {
+ globalSecondaryIndexThroughputOnChange(throughput);
+ }}
+ setIsAutoscale={() => {}}
+ setIsThroughputCapExceeded={(isThroughputCapExceeded: boolean) => {
+ setIsThroughputCapExceeded(isThroughputCapExceeded);
+ }}
+ onCostAcknowledgeChange={(isAcknowledged: boolean) => {
+ isCostAknowledgedOnChange(isAcknowledged);
+ }}
+ />
+ )}
+
+ );
+};
diff --git a/src/Explorer/Panes/AddGlobalSecondaryIndexPanel/Components/VectorSearchComponent.tsx b/src/Explorer/Panes/AddGlobalSecondaryIndexPanel/Components/VectorSearchComponent.tsx
new file mode 100644
index 000000000..8b5ad9a28
--- /dev/null
+++ b/src/Explorer/Panes/AddGlobalSecondaryIndexPanel/Components/VectorSearchComponent.tsx
@@ -0,0 +1,61 @@
+import { Stack } from "@fluentui/react";
+import { VectorEmbedding, VectorIndex } from "Contracts/DataModels";
+import { CollapsibleSectionComponent } from "Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent";
+import { VectorEmbeddingPoliciesComponent } from "Explorer/Controls/VectorSearch/VectorEmbeddingPoliciesComponent";
+import {
+ ContainerVectorPolicyTooltipContent,
+ scrollToSection,
+} from "Explorer/Panes/AddCollectionPanel/AddCollectionPanelUtility";
+import React from "react";
+
+export interface VectorSearchComponentProps {
+ vectorEmbeddingPolicy: VectorEmbedding[];
+ setVectorEmbeddingPolicy: React.Dispatch>;
+ vectorIndexingPolicy: VectorIndex[];
+ setVectorIndexingPolicy: React.Dispatch>;
+ setVectorPolicyValidated: React.Dispatch>;
+ isGlobalSecondaryIndex?: boolean;
+}
+
+export const VectorSearchComponent = (props: VectorSearchComponentProps): JSX.Element => {
+ const {
+ vectorEmbeddingPolicy,
+ setVectorEmbeddingPolicy,
+ vectorIndexingPolicy,
+ setVectorIndexingPolicy,
+ setVectorPolicyValidated,
+ isGlobalSecondaryIndex,
+ } = props;
+
+ return (
+
+ {
+ scrollToSection("collapsibleVectorPolicySectionContent");
+ }}
+ tooltipContent={ContainerVectorPolicyTooltipContent()}
+ >
+
+
+ {
+ setVectorEmbeddingPolicy(vectorEmbeddingPolicy);
+ setVectorIndexingPolicy(vectorIndexingPolicy);
+ setVectorPolicyValidated(vectorPolicyValidated);
+ }}
+ isGlobalSecondaryIndex={isGlobalSecondaryIndex}
+ />
+
+
+
+
+ );
+};
diff --git a/src/Explorer/Panes/AddGlobalSecondaryIndexPanel/__snapshots__/AddGlobalSecondaryIndexPanel.test.tsx.snap b/src/Explorer/Panes/AddGlobalSecondaryIndexPanel/__snapshots__/AddGlobalSecondaryIndexPanel.test.tsx.snap
new file mode 100644
index 000000000..dcc3834b1
--- /dev/null
+++ b/src/Explorer/Panes/AddGlobalSecondaryIndexPanel/__snapshots__/AddGlobalSecondaryIndexPanel.test.tsx.snap
@@ -0,0 +1,196 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AddGlobalSecondaryIndexPanel render default panel 1`] = `
+
+`;
diff --git a/src/Explorer/Panes/CassandraAddCollectionPane/CassandraAddCollectionPane.tsx b/src/Explorer/Panes/CassandraAddCollectionPane/CassandraAddCollectionPane.tsx
index 9332652e9..49fe95ca5 100644
--- a/src/Explorer/Panes/CassandraAddCollectionPane/CassandraAddCollectionPane.tsx
+++ b/src/Explorer/Panes/CassandraAddCollectionPane/CassandraAddCollectionPane.tsx
@@ -7,6 +7,7 @@ import { Action } from "Shared/Telemetry/TelemetryConstants";
import * as TelemetryProcessor from "Shared/Telemetry/TelemetryProcessor";
import { userContext } from "UserContext";
import { isServerlessAccount } from "Utils/CapabilityUtils";
+import { ValidCosmosDbIdDescription, ValidCosmosDbIdInputPattern } from "Utils/ValidationUtils";
import { useSidePanel } from "hooks/useSidePanel";
import React, { FunctionComponent, useState } from "react";
import { ThroughputInput } from "../../Controls/ThroughputInput/ThroughputInput";
@@ -202,8 +203,8 @@ export const CassandraAddCollectionPane: FunctionComponent = ({
aria-required
required
autoComplete="off"
- pattern="[^/?#\\]*[^/?# \\]"
- title="May not end with space nor contain characters '\' '/' '#' '?'"
+ pattern={ValidCosmosDbIdInputPattern.source}
+ title={ValidCosmosDbIdDescription}
placeholder={`e.g., ${getCollectionName()}1`}
size={40}
className="panelTextField"
diff --git a/src/Explorer/Panes/PanelComponent.less b/src/Explorer/Panes/PanelComponent.less
index 3a0ab9b3c..857794590 100644
--- a/src/Explorer/Panes/PanelComponent.less
+++ b/src/Explorer/Panes/PanelComponent.less
@@ -11,10 +11,10 @@
margin: 20px 0;
overflow-x: hidden;
- & > :not(.collapsibleSection) {
+ &> :not(.collapsibleSection) {
margin-bottom: @DefaultSpace;
- & > :not(:last-child) {
+ &> :not(:last-child) {
margin-bottom: @DefaultSpace;
}
}
@@ -56,6 +56,14 @@
transform: translate(-50%, -50%);
}
}
+
+ @media (max-width: 768px) {
+ .panelMainContent {
+ padding: 0 24px;
+ margin: 0;
+ overflow-x: auto;
+ }
+ }
}
.panelHeader {
@@ -94,6 +102,7 @@
padding-left: @MediumSpace;
.paneErrorLink {
+ color: @LinkColor;
cursor: pointer;
font-size: @mediumFontSize;
}
@@ -112,70 +121,87 @@
.deleteCollectionFeedback {
margin-top: 12px;
}
+
.addRemoveIcon {
margin-left: 4px !important;
}
+
.addRemoveIconLabel {
margin-top: 28px;
margin-left: 4px !important;
}
+
.addRemoveIcon [alt="editEntity"]:focus,
.addRemoveIconLabel [alt="editEntity"]:focus {
border: 1px dashed #605e5c;
}
+
.addNewParamStyle {
margin-top: 5px;
margin-left: 5px !important;
cursor: pointer;
}
-.panelGroupSpacing > :not(:last-child) {
+.panelGroupSpacing> :not(:last-child) {
margin-bottom: @DefaultSpace;
}
+
.fileUpload {
display: none !important;
}
+
.customFileUpload {
padding: 25px 0px 0px 10px;
cursor: pointer;
display: flex;
}
+
.fileIcon {
align-self: center;
}
+
.panelAddIconLabel {
font-size: 20px;
width: 20px;
margin: 30px 0 0 10px;
cursor: default;
}
+
.panelAddIcon {
font-size: 20px;
width: 20px;
margin: 30px 0 0 10px;
cursor: default;
}
+
.removeIcon {
color: @InfoIconColor;
}
+
.backImageIcon {
margin-top: 8px;
}
+
[alt="back"]:focus {
border: 1px solid #605e5c;
}
+
.addEntityDatePicker {
max-width: 145px;
}
+
.addEntityTextField {
width: 237px;
}
+
.addButtonEntiy {
width: 25%;
}
+
.column-select-view {
margin: 20px 0px 0px 0px;
}
+
.panelSeparator::before {
background-color: #edebe9;
-}
+}
\ No newline at end of file
diff --git a/src/Explorer/Panes/SettingsPane/SettingsPane.tsx b/src/Explorer/Panes/SettingsPane/SettingsPane.tsx
index 12b5a8c47..ac842a7d1 100644
--- a/src/Explorer/Panes/SettingsPane/SettingsPane.tsx
+++ b/src/Explorer/Panes/SettingsPane/SettingsPane.tsx
@@ -6,7 +6,9 @@ import {
Checkbox,
ChoiceGroup,
DefaultButton,
+ Dropdown,
IChoiceGroupOption,
+ IDropdownOption,
ISpinButtonStyles,
IToggleStyles,
Position,
@@ -21,7 +23,15 @@ import { InfoTooltip } from "Common/Tooltip/InfoTooltip";
import { Platform, configContext } from "ConfigContext";
import { useDialog } from "Explorer/Controls/Dialog";
import { useDatabases } from "Explorer/useDatabases";
-import { deleteAllStates } from "Shared/AppStatePersistenceUtility";
+import { isFabric, isFabricNative } from "Platform/Fabric/FabricUtil";
+import {
+ AppStateComponentNames,
+ deleteAllStates,
+ deleteState,
+ hasState,
+ loadState,
+ saveState,
+} from "Shared/AppStatePersistenceUtility";
import {
DefaultRUThreshold,
LocalStorageUtility,
@@ -32,10 +42,12 @@ import {
} from "Shared/StorageUtility";
import * as StringUtility from "Shared/StringUtility";
import { updateUserContext, userContext } from "UserContext";
+import { isDataplaneRbacSupported } from "Utils/APITypeUtils";
import { acquireMsalTokenForAccount } from "Utils/AuthorizationUtils";
import { logConsoleError, logConsoleInfo } from "Utils/NotificationConsoleUtils";
import * as PriorityBasedExecutionUtils from "Utils/PriorityBasedExecutionUtils";
import { getReadOnlyKeys, listKeys } from "Utils/arm/generatedClients/cosmos/databaseAccounts";
+import { useClientWriteEnabled } from "hooks/useClientWriteEnabled";
import { useQueryCopilot } from "hooks/useQueryCopilot";
import { useSidePanel } from "hooks/useSidePanel";
import React, { FunctionComponent, useState } from "react";
@@ -142,6 +154,17 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
? LocalStorageUtility.getEntryString(StorageKey.IsGraphAutoVizDisabled)
: "false",
);
+ const [selectedRegionalEndpoint, setSelectedRegionalEndpoint] = useState(
+ hasState({
+ componentName: AppStateComponentNames.SelectedRegionalEndpoint,
+ globalAccountName: userContext.databaseAccount?.name,
+ })
+ ? (loadState({
+ componentName: AppStateComponentNames.SelectedRegionalEndpoint,
+ globalAccountName: userContext.databaseAccount?.name,
+ }) as string)
+ : undefined,
+ );
const [retryAttempts, setRetryAttempts] = useState(
LocalStorageUtility.hasItem(StorageKey.RetryAttempts)
? LocalStorageUtility.getEntryNumber(StorageKey.RetryAttempts)
@@ -157,6 +180,11 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
? LocalStorageUtility.getEntryNumber(StorageKey.MaxWaitTimeInSeconds)
: Constants.Queries.DefaultMaxWaitTimeInSeconds,
);
+ const [queryControlEnabled, setQueryControlEnabled] = useState(
+ LocalStorageUtility.hasItem(StorageKey.QueryControlEnabled)
+ ? LocalStorageUtility.getEntryString(StorageKey.QueryControlEnabled) === "true"
+ : false,
+ );
const [maxDegreeOfParallelism, setMaxDegreeOfParallelism] = useState(
LocalStorageUtility.hasItem(StorageKey.MaxDegreeOfParellism)
? LocalStorageUtility.getEntryNumber(StorageKey.MaxDegreeOfParellism)
@@ -174,15 +202,65 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
const styles = useStyles();
const explorerVersion = configContext.gitSha;
+ const isEmulator = configContext.platform === Platform.Emulator;
const shouldShowQueryPageOptions = userContext.apiType === "SQL";
- const shouldShowGraphAutoVizOption = userContext.apiType === "Gremlin";
- const shouldShowCrossPartitionOption = userContext.apiType !== "Gremlin";
- const shouldShowParallelismOption = userContext.apiType !== "Gremlin";
- const shouldShowPriorityLevelOption = PriorityBasedExecutionUtils.isFeatureEnabled();
+ const showRetrySettings =
+ (userContext.apiType === "SQL" || userContext.apiType === "Tables" || userContext.apiType === "Gremlin") &&
+ !isEmulator;
+ const shouldShowGraphAutoVizOption = userContext.apiType === "Gremlin" && !isEmulator;
+ const shouldShowCrossPartitionOption = userContext.apiType !== "Gremlin" && !isEmulator;
+ const shouldShowEnhancedQueryControl = userContext.apiType === "SQL";
+ const shouldShowParallelismOption = userContext.apiType !== "Gremlin" && !isEmulator;
+ const showEnableEntraIdRbac =
+ isDataplaneRbacSupported(userContext.apiType) &&
+ userContext.authType === AuthType.AAD &&
+ configContext.platform !== Platform.Fabric &&
+ !isEmulator;
+ const shouldShowPriorityLevelOption = PriorityBasedExecutionUtils.isFeatureEnabled() && !isEmulator;
+
+ const uniqueAccountRegions = new Set();
+ const regionOptions: IDropdownOption[] = [];
+ regionOptions.push({
+ key: userContext?.databaseAccount?.properties?.documentEndpoint,
+ text: `Global (Default)`,
+ data: {
+ isGlobal: true,
+ writeEnabled: true,
+ },
+ });
+ userContext?.databaseAccount?.properties?.writeLocations?.forEach((loc) => {
+ if (!uniqueAccountRegions.has(loc.locationName)) {
+ uniqueAccountRegions.add(loc.locationName);
+ regionOptions.push({
+ key: loc.documentEndpoint,
+ text: `${loc.locationName} (Read/Write)`,
+ data: {
+ isGlobal: false,
+ writeEnabled: true,
+ },
+ });
+ }
+ });
+ userContext?.databaseAccount?.properties?.readLocations?.forEach((loc) => {
+ if (!uniqueAccountRegions.has(loc.locationName)) {
+ uniqueAccountRegions.add(loc.locationName);
+ regionOptions.push({
+ key: loc.documentEndpoint,
+ text: `${loc.locationName} (Read)`,
+ data: {
+ isGlobal: false,
+ writeEnabled: false,
+ },
+ });
+ }
+ });
+
const shouldShowCopilotSampleDBOption =
userContext.apiType === "SQL" &&
useQueryCopilot.getState().copilotEnabled &&
- useDatabases.getState().sampleDataResourceTokenCollection;
+ useDatabases.getState().sampleDataResourceTokenCollection &&
+ !isEmulator;
+
const handlerOnSubmit = async () => {
setIsExecuting(true);
@@ -193,6 +271,17 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
LocalStorageUtility.setEntryNumber(StorageKey.CustomItemPerPage, customItemPerPage);
+ if (
+ enableDataPlaneRBACOption !== LocalStorageUtility.getEntryString(StorageKey.DataPlaneRbacEnabled) ||
+ retryAttempts !== LocalStorageUtility.getEntryNumber(StorageKey.RetryAttempts) ||
+ retryInterval !== LocalStorageUtility.getEntryNumber(StorageKey.RetryInterval) ||
+ MaxWaitTimeInSeconds !== LocalStorageUtility.getEntryNumber(StorageKey.MaxWaitTimeInSeconds)
+ ) {
+ updateUserContext({
+ refreshCosmosClient: true,
+ });
+ }
+
if (configContext.platform !== Platform.Fabric) {
LocalStorageUtility.setEntryString(StorageKey.DataPlaneRbacEnabled, enableDataPlaneRBACOption);
if (
@@ -202,7 +291,6 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
) {
updateUserContext({
dataPlaneRbacEnabled: true,
- hasDataPlaneRbacSettingChanged: true,
});
useDataPlaneRbac.setState({ dataPlaneRbacEnabled: true });
try {
@@ -226,7 +314,6 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
} else {
updateUserContext({
dataPlaneRbacEnabled: false,
- hasDataPlaneRbacSettingChanged: true,
});
const { databaseAccount: account, subscriptionId, resourceGroup } = userContext;
if (!userContext.features.enableAadDataPlane && !userContext.masterKey) {
@@ -253,6 +340,46 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
}
}
+ const storedRegionalEndpoint = loadState({
+ componentName: AppStateComponentNames.SelectedRegionalEndpoint,
+ globalAccountName: userContext.databaseAccount?.name,
+ }) as string;
+ const selectedRegionIsGlobal =
+ selectedRegionalEndpoint === userContext?.databaseAccount?.properties?.documentEndpoint;
+ if (selectedRegionIsGlobal && storedRegionalEndpoint) {
+ deleteState({
+ componentName: AppStateComponentNames.SelectedRegionalEndpoint,
+ globalAccountName: userContext.databaseAccount?.name,
+ });
+ updateUserContext({
+ selectedRegionalEndpoint: undefined,
+ writeEnabledInSelectedRegion: true,
+ refreshCosmosClient: true,
+ });
+ useClientWriteEnabled.setState({ clientWriteEnabled: true });
+ } else if (
+ selectedRegionalEndpoint &&
+ !selectedRegionIsGlobal &&
+ selectedRegionalEndpoint !== storedRegionalEndpoint
+ ) {
+ saveState(
+ {
+ componentName: AppStateComponentNames.SelectedRegionalEndpoint,
+ globalAccountName: userContext.databaseAccount?.name,
+ },
+ selectedRegionalEndpoint,
+ );
+ const validWriteEndpoint = userContext.databaseAccount?.properties?.writeLocations?.find(
+ (loc) => loc.documentEndpoint === selectedRegionalEndpoint,
+ );
+ updateUserContext({
+ selectedRegionalEndpoint: selectedRegionalEndpoint,
+ writeEnabledInSelectedRegion: !!validWriteEndpoint,
+ refreshCosmosClient: true,
+ });
+ useClientWriteEnabled.setState({ clientWriteEnabled: !!validWriteEndpoint });
+ }
+
LocalStorageUtility.setEntryBoolean(StorageKey.RUThresholdEnabled, ruThresholdEnabled);
LocalStorageUtility.setEntryBoolean(StorageKey.QueryTimeoutEnabled, queryTimeoutEnabled);
LocalStorageUtility.setEntryNumber(StorageKey.RetryAttempts, retryAttempts);
@@ -260,6 +387,7 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
LocalStorageUtility.setEntryNumber(StorageKey.MaxWaitTimeInSeconds, MaxWaitTimeInSeconds);
LocalStorageUtility.setEntryString(StorageKey.ContainerPaginationEnabled, containerPaginationEnabled.toString());
LocalStorageUtility.setEntryString(StorageKey.IsCrossPartitionQueryEnabled, crossPartitionQueryEnabled.toString());
+ LocalStorageUtility.setEntryString(StorageKey.QueryControlEnabled, queryControlEnabled.toString());
LocalStorageUtility.setEntryNumber(StorageKey.MaxDegreeOfParellism, maxDegreeOfParallelism);
LocalStorageUtility.setEntryString(StorageKey.PriorityLevel, priorityLevel.toString());
LocalStorageUtility.setEntryString(StorageKey.CopilotSampleDBEnabled, copilotSampleDBEnabled.toString());
@@ -289,6 +417,7 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
`Updated items per page setting to ${LocalStorageUtility.getEntryNumber(StorageKey.ActualItemPerPage)}`,
);
logConsoleInfo(`${crossPartitionQueryEnabled ? "Enabled" : "Disabled"} cross-partition query feed option`);
+ logConsoleInfo(`${queryControlEnabled ? "Enabled" : "Disabled"} query control option`);
logConsoleInfo(
`Updated the max degree of parallelism query feed option to ${LocalStorageUtility.getEntryNumber(
StorageKey.MaxDegreeOfParellism,
@@ -304,9 +433,6 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
);
}
- logConsoleInfo(
- `Updated query setting to ${LocalStorageUtility.getEntryString(StorageKey.SetPartitionKeyUndefined)}`,
- );
refreshExplorer && (await explorer.refreshExplorer());
closeSidePanel();
};
@@ -402,6 +528,10 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
setDefaultQueryResultsView(option.key as SplitterDirection);
};
+ const handleOnSelectedRegionOptionChange = (ev: React.FormEvent, option: IDropdownOption): void => {
+ setSelectedRegionalEndpoint(option.key as string);
+ };
+
const handleOnQueryRetryAttemptsSpinButtonChange = (ev: React.MouseEvent, newValue?: string): void => {
const retryAttempts = Number(newValue);
if (!isNaN(retryAttempts)) {
@@ -482,59 +612,58 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
return (
+ )}
+ {!isEmulator && (
+
-
setContainerPaginationEnabled(!containerPaginationEnabled)}
+ label="Enable container pagination"
+ />
+
+
+
+ )}
+ {shouldShowCrossPartitionOption && (
+
+
+
+
+
+
+ )}
+ {shouldShowEnhancedQueryControl && (
+
+
+
+
+
+
+ )}
+ {shouldShowParallelismOption && (
+
+
+
+
+
+
+ )}
+ {shouldShowPriorityLevelOption && (
+
+
+
+
+
-
- )}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {shouldShowCrossPartitionOption && (
-
-
-
-
-
Learn more @@ -899,9 +850,9 @@ export class AddCollectionPanel extends React.Component
+ ) => {
+ onEnableAnalyticalStoreRadioButtonChange(event.target.checked);
+ }}
+ />
+ On
+
+ ) => {
+ onDisableAnalyticalStoreRadioButtonnChange(event.target.checked);
+ }}
+ />
+ Off
+
+
-
- {shouldShowQueryPageOptions && (
-
-
-
-
-
+
+ )}
+ {userContext.apiType === "SQL" && !isEmulator && (
+ <>
+
+
+
+
-
+ {queryTimeoutEnabled && (
+
+
+
+
+
+
-
+
+
+
+
+
+
+
+ )}
+
+ {showRetrySettings && (
+
-
+ Max retry attempts
+
+ Max number of retries to be performed for a request. Default value 9.
+
+
+ setRetryAttempts(parseInt(newValue) + 1 || retryAttempts)}
+ onDecrement={(newValue) => setRetryAttempts(parseInt(newValue) - 1 || retryAttempts)}
+ onValidate={(newValue) => setRetryAttempts(parseInt(newValue) || retryAttempts)}
+ styles={spinButtonStyles}
+ />
+ setRetryInterval(parseInt(newValue) + 1000 || retryInterval)}
+ onDecrement={(newValue) => setRetryInterval(parseInt(newValue) - 1000 || retryInterval)}
+ onValidate={(newValue) => setRetryInterval(parseInt(newValue) || retryInterval)}
+ styles={spinButtonStyles}
+ />
+
+ setMaxWaitTimeInSeconds(parseInt(newValue) + 1 || MaxWaitTimeInSeconds)
+ }
+ onDecrement={(newValue) =>
+ setMaxWaitTimeInSeconds(parseInt(newValue) - 1 || MaxWaitTimeInSeconds)
+ }
+ onValidate={(newValue) => setMaxWaitTimeInSeconds(parseInt(newValue) || MaxWaitTimeInSeconds)}
+ styles={spinButtonStyles}
/>
- {ruThresholdEnabled && (
- Page Options
-
-
-
- Choose Custom to specify a fixed amount of query results to show, or choose Unlimited to show as
- many query results per page.
-
-
- {isCustomPageOptionSelected() && (
-
)}
-
- {userContext.apiType === "SQL" && (
- <>
+ {userContext.apiType === "SQL" && userContext.authType === AuthType.AAD && !isFabric() && (
-
+ Select Region
+
+ Changes the account endpoint used to perform client operations.
+
+
+ option.key === selectedRegionalEndpoint)?.text
+ : regionOptions[0]?.text
+ }
+ onChange={handleOnSelectedRegionOptionChange}
+ options={regionOptions}
+ styles={{ root: { marginBottom: "10px" } }}
/>
- {queryTimeoutEnabled && (
+
- {
- setCustomItemPerPage(parseInt(newValue) + 1 || customItemPerPage);
- }}
- onDecrement={(newValue) => setCustomItemPerPage(parseInt(newValue) - 1 || customItemPerPage)}
- onValidate={(newValue) => setCustomItemPerPage(parseInt(newValue) || customItemPerPage)}
- min={1}
- step={1}
- className="textfontclr"
- incrementButtonAriaLabel="Increase value by 1"
- decrementButtonAriaLabel="Decrease value by 1"
- />
+ {!isFabricNative() && (
+
+ {shouldShowQueryPageOptions && (
+
+
+
+
+
-
- )}
- {userContext.apiType === "SQL" &&
- userContext.authType === AuthType.AAD &&
- configContext.platform !== Platform.Fabric && (
+
+
- Query results per page{" "}
-
- Enter the number of query results that should be shown per page.
-
-
-
- Page Options
+
+
-
+ Choose Custom to specify a fixed amount of query results to show, or choose Unlimited to show as
+ many query results per page.
- )}
-
+ {isCustomPageOptionSelected() && (
+
+
+
+ )}
+ {showEnableEntraIdRbac && (
+ {
+ setCustomItemPerPage(parseInt(newValue) + 1 || customItemPerPage);
+ }}
+ onDecrement={(newValue) => setCustomItemPerPage(parseInt(newValue) - 1 || customItemPerPage)}
+ onValidate={(newValue) => setCustomItemPerPage(parseInt(newValue) || customItemPerPage)}
+ min={1}
+ step={1}
+ className="textfontclr"
+ incrementButtonAriaLabel="Increase value by 1"
+ decrementButtonAriaLabel="Decrease value by 1"
+ />
+
+ )}
+
+ Query results per page{" "}
+
+ Enter the number of query results that should be shown per page.
+
+
+
+ Enable Entra ID RBAC
@@ -564,334 +693,397 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
Query Timeout
+ Region Selection
- When a query reaches a specified time limit, a popup with an option to cancel the query will show
- unless automatic cancellation has been enabled.
+ Changes region the Cosmos Client uses to access account.
- Query Timeout
+
-
- )}
-
+ When a query reaches a specified time limit, a popup with an option to cancel the query will
+ show unless automatic cancellation has been enabled.
+
+
+ )}
+
+
+ RU Limit
+
+
+ {ruThresholdEnabled && (
+
+ If a query exceeds a configured RU limit, the query will be aborted.
+
+
+
+ )}
+ Default Query Results View
+
+
+
+ Select the default view to use when displaying query results.
+
+ RU Limit
+ Retry Settings
- If a query exceeds a configured RU limit, the query will be aborted.
+ Retry policy associated with throttled requests during CosmosDB queries.
-
+ Fixed retry interval (ms)
+
+ Fixed retry interval in milliseconds to wait between each retry ignoring the retryAfter returned
+ as part of the response. Default value is 0 milliseconds.
+
+
+
+ Max wait time (s)
+
+ Max wait time in seconds to wait for a request while the retries are happening. Default value 30
+ seconds.
+
+
+
-
- )}
-
- Default Query Results View
+ Enable container pagination
- Select the default view to use when displaying query results.
+ Load 50 containers at a time. Currently, containers are not pulled in alphanumeric order.
+
+ Enable cross-partition query
+
+ setCrossPartitionQueryEnabled(!crossPartitionQueryEnabled)}
+ label="Enable cross-partition query"
+ />
+
+
+ Send more than one request while executing a query. More than one request is necessary if the
+ query is not scoped to single partition key value.
+
+ Enhanced query control
+
+ setQueryControlEnabled(!queryControlEnabled)}
+ label="Enable query control"
+ />
+
+
+ Query up to the max degree of parallelism.
+
+ {" "}
+ Learn more{" "}
+
+
+ Max degree of parallelism
+
+
+ setMaxDegreeOfParallelism(parseInt(newValue) + 1 || maxDegreeOfParallelism)
+ }
+ onDecrement={(newValue) =>
+ setMaxDegreeOfParallelism(parseInt(newValue) - 1 || maxDegreeOfParallelism)
+ }
+ onValidate={(newValue) => setMaxDegreeOfParallelism(parseInt(newValue) || maxDegreeOfParallelism)}
+ ariaLabel="Max degree of parallelism"
+ label="Max degree of parallelism"
+ />
+
+
+ Gets or sets the number of concurrent operations run client side during parallel query execution.
+ A positive property value limits the number of concurrent operations to the set value. If it is
+ set to less than 0, the system automatically decides the number of concurrent operations to run.
+
+ Priority Level
+
+
+ Sets the priority level for data-plane requests from Data Explorer when using Priority-Based
+ Execution. If "None" is selected, Data Explorer will not specify priority level, and the
+ server-side default priority level will be used.
Retry Settings
-
- setRetryAttempts(parseInt(newValue) + 1 || retryAttempts)}
- onDecrement={(newValue) => setRetryAttempts(parseInt(newValue) - 1 || retryAttempts)}
- onValidate={(newValue) => setRetryAttempts(parseInt(newValue) || retryAttempts)}
- styles={spinButtonStyles}
- />
- setRetryInterval(parseInt(newValue) + 1000 || retryInterval)}
- onDecrement={(newValue) => setRetryInterval(parseInt(newValue) - 1000 || retryInterval)}
- onValidate={(newValue) => setRetryInterval(parseInt(newValue) || retryInterval)}
- styles={spinButtonStyles}
- />
- setMaxWaitTimeInSeconds(parseInt(newValue) + 1 || MaxWaitTimeInSeconds)}
- onDecrement={(newValue) => setMaxWaitTimeInSeconds(parseInt(newValue) - 1 || MaxWaitTimeInSeconds)}
- onValidate={(newValue) => setMaxWaitTimeInSeconds(parseInt(newValue) || MaxWaitTimeInSeconds)}
- styles={spinButtonStyles}
- />
-
-
- Retry policy associated with throttled requests during CosmosDB queries.
-
-
- Max retry attempts
-
- Max number of retries to be performed for a request. Default value 9.
-
-
-
- Fixed retry interval (ms)
-
- Fixed retry interval in milliseconds to wait between each retry ignoring the retryAfter returned as
- part of the response. Default value is 0 milliseconds.
-
-
-
- Max wait time (s)
-
- Max wait time in seconds to wait for a request while the retries are happening. Default value 30
- seconds.
-
-
- Enable container pagination
-
- setContainerPaginationEnabled(!containerPaginationEnabled)}
- label="Enable container pagination"
- />
-
-
- Load 50 containers at a time. Currently, containers are not pulled in alphanumeric order.
-
- Enable cross-partition query
-
-
-
-
-
-
- Send more than one request while executing a query. More than one request is necessary if the query
- is not scoped to single partition key value.
+ )}
+ {shouldShowGraphAutoVizOption && (
+
+
+
+
+ setCrossPartitionQueryEnabled(!crossPartitionQueryEnabled)}
- label="Enable cross-partition query"
- />
-
-
-
- )}
-
- {shouldShowParallelismOption && (
- Display Gremlin query results as:
+
+
-
+ Select Graph to automatically visualize the query results as a Graph or JSON to display the
+ results as JSON.
+
+ Max degree of parallelism
-
-
-
-
-
-
-
- )}
-
- {shouldShowGraphAutoVizOption && (
-
-
-
-
-
-
- )}
-
- {shouldShowCopilotSampleDBOption && (
-
-
-
-
-
-
- )}
-
+
+
+ )}
+
+ )}
- Gets or sets the number of concurrent operations run client side during parallel query execution. A
- positive property value limits the number of concurrent operations to the set value. If it is set to
- less than 0, the system automatically decides the number of concurrent operations to run.
+
+
+ )}
+ {shouldShowCopilotSampleDBOption && (
+
+
+
+
+
- setMaxDegreeOfParallelism(parseInt(newValue) + 1 || maxDegreeOfParallelism)
- }
- onDecrement={(newValue) =>
- setMaxDegreeOfParallelism(parseInt(newValue) - 1 || maxDegreeOfParallelism)
- }
- onValidate={(newValue) => setMaxDegreeOfParallelism(parseInt(newValue) || maxDegreeOfParallelism)}
- ariaLabel="Max degree of parallelism"
- label="Max degree of parallelism"
- />
-
-
-
- )}
-
- {shouldShowPriorityLevelOption && (
- Enable sample database
+
+
-
+ This is a sample database and collection with synthetic product data you can use to explore using
+ NoSQL queries and Query Advisor. This will appear as another database in the Data Explorer UI, and
+ is created by, and maintained by Microsoft at no cost to you.
+
+ Priority Level
-
-
-
- Sets the priority level for data-plane requests from Data Explorer when using Priority-Based
- Execution. If "None" is selected, Data Explorer will not specify priority level, and the
- server-side default priority level will be used.
-
- Display Gremlin query results as:
-
-
-
- Select Graph to automatically visualize the query results as a Graph or JSON to display the results
- as JSON.
-
- Enable sample database
-
-
-
- This is a sample database and collection with synthetic product data you can use to explore using
- NoSQL queries and Query Advisor. This will appear as another database in the Data Explorer UI, and
- is created by, and maintained by Microsoft at no cost to you.
-
-
@@ -901,7 +1093,15 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
"Clear History",
undefined,
"Are you sure you want to proceed?",
- () => deleteAllStates(),
+ () => {
+ deleteAllStates();
+ updateUserContext({
+ selectedRegionalEndpoint: undefined,
+ writeEnabledInSelectedRegion: true,
+ refreshCosmosClient: true,
+ });
+ useClientWriteEnabled.setState({ clientWriteEnabled: true });
+ },
"Cancel",
undefined,
<>
@@ -912,6 +1112,7 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
Reset your customized tab layout, including the splitter positions
Erase your table column preferences, including any custom columns
Clear your filter history
+ Reset region selection to global
,
);
diff --git a/src/Explorer/Panes/SettingsPane/__snapshots__/SettingsPane.test.tsx.snap b/src/Explorer/Panes/SettingsPane/__snapshots__/SettingsPane.test.tsx.snap
index 8e7ffa387..41759f1c7 100644
--- a/src/Explorer/Panes/SettingsPane/__snapshots__/SettingsPane.test.tsx.snap
+++ b/src/Explorer/Panes/SettingsPane/__snapshots__/SettingsPane.test.tsx.snap
@@ -11,7 +11,8 @@ exports[`Settings Pane should render Default properly 1`] = `
className="paneMainContent ___133e6fg_0000000 f22iagw f1vx9l62 f1l02sjl"
>
+
+
+
+
+
+
+ Enhanced query control
+
+
+
+
+ Query up to the max degree of parallelism.
+
+
+ Learn more
+
+
+
+