diff --git a/src/Explorer/Controls/Dialog.tsx b/src/Explorer/Controls/Dialog.tsx
index 9f69d4761..a4c50a3fd 100644
--- a/src/Explorer/Controls/Dialog.tsx
+++ b/src/Explorer/Controls/Dialog.tsx
@@ -214,8 +214,10 @@ export const Dialog: FC = () => {
{contentHtml}
{progressIndicatorProps &&
-
) : (
diff --git a/src/Explorer/Controls/InputDataList/InputDataList.tsx b/src/Explorer/Controls/InputDataList/InputDataList.tsx
index cd31db53b..2f483d362 100644
--- a/src/Explorer/Controls/InputDataList/InputDataList.tsx
+++ b/src/Explorer/Controls/InputDataList/InputDataList.tsx
@@ -193,6 +193,7 @@ export const InputDataList: FC = ({
<>
{
it("should save throughput bucket changes when Save button is clicked", async () => {
updateUserContext({
apiType: "SQL",
- features: { enableThroughputBuckets: true } as Features,
+ throughputBucketsEnabled: true,
authType: AuthType.AAD,
});
diff --git a/src/Explorer/Controls/Settings/SettingsComponent.tsx b/src/Explorer/Controls/Settings/SettingsComponent.tsx
index 7aca73f57..7aeb2e285 100644
--- a/src/Explorer/Controls/Settings/SettingsComponent.tsx
+++ b/src/Explorer/Controls/Settings/SettingsComponent.tsx
@@ -1,18 +1,19 @@
-import { IPivotItemProps, IPivotProps, Pivot, PivotItem, Stack, getTheme } from "@fluentui/react";
+import { IPivotItemProps, IPivotProps, Pivot, PivotItem, Stack } from "@fluentui/react";
import {
- ComputedPropertiesComponent,
- ComputedPropertiesComponentProps,
+ ComputedPropertiesComponent,
+ ComputedPropertiesComponentProps,
} from "Explorer/Controls/Settings/SettingsSubComponents/ComputedPropertiesComponent";
import {
- ContainerPolicyComponent,
- ContainerPolicyComponentProps,
+ ContainerPolicyComponent,
+ ContainerPolicyComponentProps,
} from "Explorer/Controls/Settings/SettingsSubComponents/ContainerPolicyComponent";
import {
- ThroughputBucketsComponent,
- ThroughputBucketsComponentProps,
+ ThroughputBucketsComponent,
+ ThroughputBucketsComponentProps,
} from "Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputBucketsComponent";
import { useDatabases } from "Explorer/useDatabases";
-import { isFullTextSearchEnabled, isVectorSearchEnabled } from "Utils/CapabilityUtils";
+import { isFabricNative } from "Platform/Fabric/FabricUtil";
+import { isVectorSearchEnabled } from "Utils/CapabilityUtils";
import { isRunningOnPublicCloud } from "Utils/CloudUtils";
import * as React from "react";
import DiscardIcon from "../../../../images/discard.svg";
@@ -33,37 +34,41 @@ import * as AutoPilotUtils from "../../../Utils/AutoPilotUtils";
import { MongoDBCollectionResource, MongoIndex } from "../../../Utils/arm/generatedClients/cosmos/types";
import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
import {
- PartitionKeyComponent,
- PartitionKeyComponentProps,
+ PartitionKeyComponent,
+ PartitionKeyComponentProps,
} from "../../Controls/Settings/SettingsSubComponents/PartitionKeyComponent";
import { useCommandBar } from "../../Menus/CommandBar/CommandBarComponentAdapter";
import { SettingsTabV2 } from "../../Tabs/SettingsTabV2";
import "./SettingsComponent.less";
import { mongoIndexingPolicyAADError } from "./SettingsRenderUtils";
import {
- ConflictResolutionComponent,
- ConflictResolutionComponentProps,
+ ConflictResolutionComponent,
+ ConflictResolutionComponentProps,
} from "./SettingsSubComponents/ConflictResolutionComponent";
+import {
+ GlobalSecondaryIndexComponent,
+ GlobalSecondaryIndexComponentProps,
+} from "./SettingsSubComponents/GlobalSecondaryIndexComponent";
import { IndexingPolicyComponent, IndexingPolicyComponentProps } from "./SettingsSubComponents/IndexingPolicyComponent";
import {
- MongoIndexingPolicyComponent,
- MongoIndexingPolicyComponentProps,
+ MongoIndexingPolicyComponent,
+ MongoIndexingPolicyComponentProps,
} from "./SettingsSubComponents/MongoIndexingPolicy/MongoIndexingPolicyComponent";
import { ScaleComponent, ScaleComponentProps } from "./SettingsSubComponents/ScaleComponent";
import { SubSettingsComponent, SubSettingsComponentProps } from "./SettingsSubComponents/SubSettingsComponent";
import {
- AddMongoIndexProps,
- ChangeFeedPolicyState,
- GeospatialConfigType,
- MongoIndexTypes,
- SettingsV2TabTypes,
- TtlType,
- getMongoNotification,
- getTabTitle,
- hasDatabaseSharedThroughput,
- isDirty,
- parseConflictResolutionMode,
- parseConflictResolutionProcedure,
+ AddMongoIndexProps,
+ ChangeFeedPolicyState,
+ GeospatialConfigType,
+ MongoIndexTypes,
+ SettingsV2TabTypes,
+ TtlType,
+ getMongoNotification,
+ getTabTitle,
+ hasDatabaseSharedThroughput,
+ isDirty,
+ parseConflictResolutionMode,
+ parseConflictResolutionProcedure,
} from "./SettingsUtils";
interface SettingsV2TabInfo {
@@ -162,6 +167,7 @@ export class SettingsComponent extends React.Component
+
+
+
-
-
-
-
-
- Your
- container
- throughput will automatically scale from
-
-
- 400
- RU/s (10% of max RU/s) -
- 4000
- RU/s
-
-
- based on usage.
-
-
+
+
-
{this.shouldShowKeyspaceSharedThroughputMessage() && (
- This table shared throughput is configured at the keyspace
)}
-
+
{tabs.map((tab) => {
const pivotItemProps: IPivotItemProps = {
itemKey: SettingsV2TabTypes[tab.tab],
- style: {
+ style: {
marginTop: 20,
- backgroundColor: 'var(--colorNeutralBackground1)',
- color: 'var(--colorNeutralForeground1)'
+ backgroundColor: "var(--colorNeutralBackground1)",
+ color: "var(--colorNeutralForeground1)",
},
headerText: getTabTitle(tab.tab),
};
return (
-
- {tab.content}
-
+ {tab.content}
);
})}
diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/ComputedPropertiesComponent.tsx b/src/Explorer/Controls/Settings/SettingsSubComponents/ComputedPropertiesComponent.tsx
index 34dd1fa5a..bb277bd21 100644
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/ComputedPropertiesComponent.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/ComputedPropertiesComponent.tsx
@@ -86,7 +86,7 @@ export class ComputedPropertiesComponent extends React.Component<
value: value,
language: "json",
ariaLabel: "Computed properties",
- theme:monacoTheme,
+ theme: monacoTheme,
});
if (this.computedPropertiesEditor) {
const computedPropertiesEditorModel = this.computedPropertiesEditor.getModel();
diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/ContainerPolicyComponent.tsx b/src/Explorer/Controls/Settings/SettingsSubComponents/ContainerPolicyComponent.tsx
index f4db62ec6..1257d4a65 100644
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/ContainerPolicyComponent.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/ContainerPolicyComponent.tsx
@@ -22,6 +22,7 @@ export interface ContainerPolicyComponentProps {
isFullTextSearchEnabled: boolean;
shouldDiscardContainerPolicies: boolean;
resetShouldDiscardContainerPolicyChange: () => void;
+ isGlobalSecondaryIndex?: boolean;
}
export const ContainerPolicyComponent: React.FC = ({
diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/GlobalSecondaryIndexComponent.test.tsx b/src/Explorer/Controls/Settings/SettingsSubComponents/GlobalSecondaryIndexComponent.test.tsx
new file mode 100644
index 000000000..ac290f93c
--- /dev/null
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/GlobalSecondaryIndexComponent.test.tsx
@@ -0,0 +1,46 @@
+import { shallow } from "enzyme";
+import React from "react";
+import { collection, container } from "../TestUtils";
+import { GlobalSecondaryIndexComponent } from "./GlobalSecondaryIndexComponent";
+import { GlobalSecondaryIndexSourceComponent } from "./GlobalSecondaryIndexSourceComponent";
+import { GlobalSecondaryIndexTargetComponent } from "./GlobalSecondaryIndexTargetComponent";
+
+describe("GlobalSecondaryIndexComponent", () => {
+ let testCollection: typeof collection;
+ let testExplorer: typeof container;
+
+ beforeEach(() => {
+ testCollection = { ...collection };
+ });
+
+ it("renders only the source component when materializedViewDefinition is missing", () => {
+ testCollection.materializedViews([
+ { id: "view1", _rid: "rid1" },
+ { id: "view2", _rid: "rid2" },
+ ]);
+ testCollection.materializedViewDefinition(null);
+ const wrapper = shallow( = ({
+ collection,
+ explorer,
+}) => {
+ const isTargetContainer = !!collection?.materializedViewDefinition();
+ const isSourceContainer = !!collection?.materializedViews();
+
+ return (
+
+
+ {isSourceContainer && (
+ This container has the following indexes defined for it.
+ )}
+
+
+ Learn more
+
+
+ {isSourceContainer &&
+ );
+};
diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/GlobalSecondaryIndexSourceComponent.test.tsx b/src/Explorer/Controls/Settings/SettingsSubComponents/GlobalSecondaryIndexSourceComponent.test.tsx
new file mode 100644
index 000000000..30ac800b9
--- /dev/null
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/GlobalSecondaryIndexSourceComponent.test.tsx
@@ -0,0 +1,42 @@
+import { PrimaryButton } from "@fluentui/react";
+import { shallow } from "enzyme";
+import React from "react";
+import { collection, container } from "../TestUtils";
+import { GlobalSecondaryIndexSourceComponent } from "./GlobalSecondaryIndexSourceComponent";
+
+describe("GlobalSecondaryIndexSourceComponent", () => {
+ let testCollection: typeof collection;
+ let testExplorer: typeof container;
+
+ beforeEach(() => {
+ testCollection = { ...collection };
+ });
+
+ it("renders without crashing", () => {
+ const wrapper = shallow(
+ = ({
+ collection,
+ explorer,
+}) => {
+ const editorContainerRef = useRef(null);
+ const editorRef = useRef(null);
+
+ const globalSecondaryIndexes: MaterializedView[] = collection?.materializedViews() ?? [];
+
+ // Helper function to fetch the definition and partition key of targetContainer by traversing through all collections and matching id from MaterializedView[] with collection id.
+ const getViewDetails = (viewId: string): { definition: string; partitionKey: string[] } => {
+ let definition = "";
+ let partitionKey: string[] = [];
+
+ useDatabases.getState().databases.find((database) => {
+ const collection = database.collections().find((collection) => collection.id() === viewId);
+ if (collection) {
+ const globalSecondaryIndexDefinition = collection.materializedViewDefinition();
+ globalSecondaryIndexDefinition && (definition = globalSecondaryIndexDefinition.definition);
+ collection.partitionKey?.paths && (partitionKey = collection.partitionKey.paths);
+ }
+ });
+
+ return { definition, partitionKey };
+ };
+
+ //JSON value for the editor using the fetched id and definitions.
+ const jsonValue = JSON.stringify(
+ globalSecondaryIndexes.map((view) => {
+ const { definition, partitionKey } = getViewDetails(view.id);
+ return {
+ name: view.id,
+ partitionKey: partitionKey.join(", "),
+ definition,
+ };
+ }),
+ null,
+ 2,
+ );
+
+ // Initialize Monaco editor with the computed JSON value.
+ useEffect(() => {
+ let disposed = false;
+ const initMonaco = async () => {
+ const monacoInstance = await loadMonaco();
+ if (disposed || !editorContainerRef.current) {
+ return;
+ }
+
+ editorRef.current = monacoInstance.editor.create(editorContainerRef.current, {
+ value: jsonValue,
+ language: "json",
+ ariaLabel: "Global Secondary Index JSON",
+ readOnly: true,
+ });
+ };
+
+ initMonaco();
+ return () => {
+ disposed = true;
+ editorRef.current?.dispose();
+ };
+ }, [jsonValue]);
+
+ // Update the editor when the jsonValue changes.
+ useEffect(() => {
+ if (editorRef.current) {
+ editorRef.current.setValue(jsonValue);
+ }
+ }, [jsonValue]);
+
+ return (
+ = ({
+ collection,
+}) => {
+ const globalSecondaryIndexDefinition = collection?.materializedViewDefinition();
+
+ const textHeadingStyle = {
+ root: { fontWeight: "600", fontSize: 16 },
+ };
+
+ const valueBoxStyle = {
+ root: {
+ backgroundColor: "#f3f3f3",
+ padding: "5px 10px",
+ borderRadius: "4px",
+ },
+ };
+
+ return (
+
+ Global Secondary Index Settings
+
+
+ Source container
+
+ {globalSecondaryIndexDefinition?.sourceCollectionId}
+
+
+
+
+ Global secondary index definition
+
+ {globalSecondaryIndexDefinition?.definition}
+
+
+
+ );
+};
diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyComponent.tsx b/src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyComponent.tsx
index 5bb92d7b1..632459fa8 100644
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyComponent.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyComponent.tsx
@@ -107,50 +107,50 @@ export class IndexingPolicyComponent extends React.Component<
}
}
}
-// private async createIndexingPolicyEditor(): Promise {
-// const isDarkMode = true;
-// const monacoThemeName = "fluent-theme";
+ // private async createIndexingPolicyEditor(): Promise {
+ // const isDarkMode = true;
+ // const monacoThemeName = "fluent-theme";
-// if (!this.indexingPolicyDiv.current) return;
+ // if (!this.indexingPolicyDiv.current) return;
-// const value: string = JSON.stringify(this.props.indexingPolicyContent, undefined, 4);
-// const monaco = await loadMonaco();
+ // const value: string = JSON.stringify(this.props.indexingPolicyContent, undefined, 4);
+ // const monaco = await loadMonaco();
-// // Safely get Fluent UI theme colors
-// const bodyStyles = getComputedStyle(document.body);
-// const backgroundColor = bodyStyles.getPropertyValue("--colorNeutralBackground1").trim() || "#1b1a19";
-// const foregroundColor = bodyStyles.getPropertyValue("--colorNeutralForeground1").trim() || "#ffffff";
+ // // Safely get Fluent UI theme colors
+ // const bodyStyles = getComputedStyle(document.body);
+ // const backgroundColor = bodyStyles.getPropertyValue("--colorNeutralBackground1").trim() || "#1b1a19";
+ // const foregroundColor = bodyStyles.getPropertyValue("--colorNeutralForeground1").trim() || "#ffffff";
-// // Define Monaco theme using Fluent UI colors
-// monaco.editor.defineTheme(monacoThemeName, {
-// base: isDarkMode ? "vs-dark" : "vs",
-// inherit: true,
-// rules: [],
-// colors: {
-// "editor.background": backgroundColor,
-// "editor.foreground": foregroundColor,
-// "editorCursor.foreground": "#ffcc00",
-// "editorLineNumber.foreground": "#aaaaaa",
-// "editor.selectionBackground": "#666666",
-// "editor.lineHighlightBackground": "#333333"
-// }
-// });
+ // // Define Monaco theme using Fluent UI colors
+ // monaco.editor.defineTheme(monacoThemeName, {
+ // base: isDarkMode ? "vs-dark" : "vs",
+ // inherit: true,
+ // rules: [],
+ // colors: {
+ // "editor.background": backgroundColor,
+ // "editor.foreground": foregroundColor,
+ // "editorCursor.foreground": "#ffcc00",
+ // "editorLineNumber.foreground": "#aaaaaa",
+ // "editor.selectionBackground": "#666666",
+ // "editor.lineHighlightBackground": "#333333"
+ // }
+ // });
-// // Create the editor with the custom theme
-// this.indexingPolicyEditor = monaco.editor.create(this.indexingPolicyDiv.current, {
-// value,
-// language: "json",
-// readOnly: isIndexTransforming(this.props.indexTransformationProgress),
-// ariaLabel: "Indexing Policy",
-// theme: monacoThemeName
-// });
+ // // Create the editor with the custom theme
+ // this.indexingPolicyEditor = monaco.editor.create(this.indexingPolicyDiv.current, {
+ // value,
+ // language: "json",
+ // readOnly: isIndexTransforming(this.props.indexTransformationProgress),
+ // ariaLabel: "Indexing Policy",
+ // theme: monacoThemeName
+ // });
-// if (this.indexingPolicyEditor) {
-// const indexingPolicyEditorModel = this.indexingPolicyEditor.getModel();
-// indexingPolicyEditorModel?.onDidChangeContent(this.onEditorContentChange.bind(this));
-// this.props.logIndexingPolicySuccessMessage();
-// }
-// }
+ // if (this.indexingPolicyEditor) {
+ // const indexingPolicyEditorModel = this.indexingPolicyEditor.getModel();
+ // indexingPolicyEditorModel?.onDidChangeContent(this.onEditorContentChange.bind(this));
+ // this.props.logIndexingPolicySuccessMessage();
+ // }
+ // }
private onEditorContentChange = (): void => {
diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/PartitionKeyComponent.test.tsx b/src/Explorer/Controls/Settings/SettingsSubComponents/PartitionKeyComponent.test.tsx
new file mode 100644
index 000000000..dfde4ec78
--- /dev/null
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/PartitionKeyComponent.test.tsx
@@ -0,0 +1,41 @@
+import { shallow } from "enzyme";
+import {
+ PartitionKeyComponent,
+ PartitionKeyComponentProps,
+} from "Explorer/Controls/Settings/SettingsSubComponents/PartitionKeyComponent";
+import Explorer from "Explorer/Explorer";
+import React from "react";
+
+describe("PartitionKeyComponent", () => {
+ // Create a test setup function to get fresh instances for each test
+ const setupTest = () => {
+ // Create an instance of the mocked Explorer
+ const explorer = new Explorer();
+ // Create minimal mock objects for database and collection
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ const mockDatabase = {} as any as import("../../../../Contracts/ViewModels").Database;
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ const mockCollection = {} as any as import("../../../../Contracts/ViewModels").Collection;
+
+ // Create props with the mocked Explorer instance
+ const props: PartitionKeyComponentProps = {
+ database: mockDatabase,
+ collection: mockCollection,
+ explorer,
+ };
+
+ return { explorer, props };
+ };
+
+ it("renders default component and matches snapshot", () => {
+ const { props } = setupTest();
+ const wrapper = shallow( = ({ database, collection, explorer }) => {
+export const PartitionKeyComponent: React.FC = ({
+ database,
+ collection,
+ explorer,
+ isReadOnly,
+}) => {
const { dataTransferJobs } = useDataTransferJobs();
const [portalDataTransferJob, setPortalDataTransferJob] = React.useState(null);
React.useEffect(() => {
+ if (isReadOnly) {
+ return;
+ }
+
const loadDataTransferJobs = refreshDataTransferOperations;
loadDataTransferJobs();
- }, []);
+ }, [isReadOnly]);
React.useEffect(() => {
const currentJob = findPortalDataTransferJob();
@@ -56,14 +66,14 @@ export const PartitionKeyComponent: React.FC = ({ da
const partitionKeyValue = getPartitionKeyValue();
const textHeadingStyle = {
- root: { fontWeight: FontWeights.semibold, fontSize: 16, color: 'var(--colorNeutralForeground1)' },
+ root: { fontWeight: FontWeights.semibold, fontSize: 16, color: "var(--colorNeutralForeground1)" },
};
const textSubHeadingStyle = {
- root: { fontWeight: FontWeights.semibold , color: 'var(--colorNeutralForeground1)' },
+ root: { fontWeight: FontWeights.semibold, color: "var(--colorNeutralForeground1)" },
};
const textSubHeadingStyle1 = {
- root: {color: 'var(--colorNeutralForeground1)' },
+ root: { color: "var(--colorNeutralForeground1)" },
};
const startPollingforUpdate = (currentJob: DataTransferJobGetResults) => {
if (isCurrentJobInProgress(currentJob)) {
@@ -153,7 +163,7 @@ export const PartitionKeyComponent: React.FC = ({ da
return (
- Change {partitionKeyName.toLowerCase()}
+ {!isReadOnly && Change {partitionKeyName.toLowerCase()} }
Current {partitionKeyName.toLowerCase()}
@@ -161,60 +171,67 @@ export const PartitionKeyComponent: React.FC = ({ da
{partitionKeyValue}
- {isHierarchicalPartitionedContainer() ? "Hierarchical" : "Non-hierarchical"}
+
+ {isHierarchicalPartitionedContainer() ? "Hierarchical" : "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.
-
- {configContext.platform !== Platform.Emulator && (
-
- {partitionKeyName} change job
-
- cancelRunningDataTransferJob(portalDataTransferJob)} />
- )}
-
-
+
+ {!isReadOnly && (
+ <>
+
+ To safeguard the integrity of the data being copied to the new container, ensure that no updates are made to
+ the source container for the entire duration of the partition key change process.
+
+ Learn more
+
+
+
+ To change the partition key, a new destination container must be created or an existing destination
+ container selected. Data will then be copied to the destination container.
+
+ {configContext.platform !== Platform.Emulator && (
+
+ {partitionKeyName} change job
+
+ cancelRunningDataTransferJob(portalDataTransferJob)} />
+ )}
+
+
+ )}
+
)}
);
diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/ScaleComponent.test.tsx b/src/Explorer/Controls/Settings/SettingsSubComponents/ScaleComponent.test.tsx
index b0a9e1739..e54f1459c 100644
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/ScaleComponent.test.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/ScaleComponent.test.tsx
@@ -9,6 +9,7 @@ describe("ScaleComponent", () => {
collection: collection,
database: undefined,
isFixedContainer: false,
+ isGlobalSecondaryIndex: false,
onThroughputChange: () => {
return;
},
diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/ScaleComponent.tsx b/src/Explorer/Controls/Settings/SettingsSubComponents/ScaleComponent.tsx
index 251a3b841..1928a68e6 100644
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/ScaleComponent.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/ScaleComponent.tsx
@@ -22,6 +22,7 @@ export interface ScaleComponentProps {
collection: ViewModels.Collection;
database: ViewModels.Database;
isFixedContainer: boolean;
+ isGlobalSecondaryIndex: boolean;
onThroughputChange: (newThroughput: number) => void;
throughput: number;
throughputBaseline: number;
@@ -143,6 +144,7 @@ export class ScaleComponent extends React.Component {
throughputError={this.props.throughputError}
instantMaximumThroughput={this.offer?.instantMaximumThroughput}
softAllowedMaximumThroughput={this.offer?.softAllowedMaximumThroughput}
+ isGlobalSecondaryIndex={this.props.isGlobalSecondaryIndex}
/>
);
diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/SubSettingsComponent.test.tsx b/src/Explorer/Controls/Settings/SettingsSubComponents/SubSettingsComponent.test.tsx
index 4658a969a..f9c710cb3 100644
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/SubSettingsComponent.test.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/SubSettingsComponent.test.tsx
@@ -143,4 +143,39 @@ describe("SubSettingsComponent", () => {
expect(subSettingsComponentInstance.getTtlValue(TtlType.On)).toEqual(TtlOn);
expect(subSettingsComponentInstance.getTtlValue(TtlType.Off)).toEqual(TtlOff);
});
+
+ it("uniqueKey is visible", () => {
+ updateUserContext({
+ databaseAccount: {
+ properties: {
+ capabilities: [{ name: "EnableSQL" }],
+ },
+ } as DatabaseAccount,
+ });
+ const subSettingsComponent = new SubSettingsComponent(baseProps);
+ expect(subSettingsComponent.getUniqueKeyVisible()).toEqual(true);
+ });
+
+ it("uniqueKey not visible due to no keys", () => {
+ const props = {
+ ...baseProps,
+ ...(baseProps.collection.rawDataModel.uniqueKeyPolicy.uniqueKeys = []),
+ };
+ const subSettingsComponent = new SubSettingsComponent(props);
+ expect(subSettingsComponent.getUniqueKeyVisible()).toEqual(false);
+ });
+
+ it("uniqueKey not visible for API", () => {
+ const newContainer = new Explorer();
+ updateUserContext({
+ databaseAccount: {
+ properties: {
+ capabilities: [{ name: "EnableMongo" }],
+ },
+ } as DatabaseAccount,
+ });
+ const props = { ...baseProps, container: newContainer };
+ const subSettingsComponent = new SubSettingsComponent(props);
+ expect(subSettingsComponent.getUniqueKeyVisible()).toEqual(false);
+ });
});
diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/SubSettingsComponent.tsx b/src/Explorer/Controls/Settings/SettingsSubComponents/SubSettingsComponent.tsx
index a58b4517f..ed05a8960 100644
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/SubSettingsComponent.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/SubSettingsComponent.tsx
@@ -1,4 +1,15 @@
-import { ChoiceGroup, IChoiceGroupOption, Label, Link, MessageBar, Stack, Text, TextField, getTheme, mergeStyleSets } from "@fluentui/react";
+import {
+ ChoiceGroup,
+ IChoiceGroupOption,
+ Label,
+ Link,
+ MessageBar,
+ Stack,
+ Text,
+ TextField,
+ getTheme,
+ mergeStyleSets,
+} from "@fluentui/react";
import * as React from "react";
import * as ViewModels from "../../../../Contracts/ViewModels";
import { userContext } from "../../../../UserContext";
@@ -29,7 +40,7 @@ const theme = getTheme();
const classNames = mergeStyleSets({
hintText: {
- color: 'var(--colorNeutralForeground1)', // theme-aware
+ color: "var(--colorNeutralForeground1)", // theme-aware
},
});
export interface SubSettingsComponentProps {
@@ -70,12 +81,16 @@ export class SubSettingsComponent extends React.Component
) : (
- Hierarchically partitioned container.
- ) : (
- Non-hierarchically partitioned container.
+ ) : (
+ Non-hierarchically partitioned container.
))}
);
@@ -370,6 +385,28 @@ export class SubSettingsComponent extends React.Component this.props.collection.partitionKey?.version >= 2;
public isHierarchicalPartitionedContainer = (): boolean => this.props.collection.partitionKey?.kind === "MultiHash";
+ public getUniqueKeyVisible = (): boolean => {
+ return this.props.collection.rawDataModel.uniqueKeyPolicy?.uniqueKeys.length > 0 && userContext.apiType === "SQL";
+ };
+
+ private getUniqueKeyValue = (): string => {
+ const paths = this.props.collection.rawDataModel.uniqueKeyPolicy?.uniqueKeys?.[0]?.paths;
+ return paths?.join(", ") || "";
+ };
+
+ private getUniqueKeyComponent = (): JSX.Element => (
+
+ {this.getUniqueKeyVisible() && (
+
+ );
+
public render(): JSX.Element {
return (
@@ -382,6 +419,8 @@ export class SubSettingsComponent extends React.Component
);
}
diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputBucketsComponent.test.tsx b/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputBucketsComponent.test.tsx
index 460dfa252..2ad5c819e 100644
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputBucketsComponent.test.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputBucketsComponent.test.tsx
@@ -26,7 +26,7 @@ describe("ThroughputBucketsComponent", () => {
it("renders the correct number of buckets", () => {
render( = (
value={bucket.maxThroughputPercentage}
onChange={(newValue) => handleBucketChange(bucket.id, newValue)}
showValue={false}
- label={`Group ${bucket.id}${bucket.id === 1 ? " (Data Explorer Query Bucket)" : ""}`}
+ label={`Bucket ${bucket.id}${bucket.id === 1 ? " (Data Explorer Query Bucket)" : ""}`}
styles={{ root: { flex: 2, maxWidth: 400 } }}
disabled={bucket.maxThroughputPercentage === 100}
/>
diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.test.tsx b/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.test.tsx
index ff7b715b3..a02d907b3 100644
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.test.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.test.tsx
@@ -44,6 +44,7 @@ describe("ThroughputInputAutoPilotV3Component", () => {
},
instantMaximumThroughput: 5000,
softAllowedMaximumThroughput: 1000000,
+ isGlobalSecondaryIndex: false,
};
it("throughput input visible", () => {
diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.tsx b/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.tsx
index 9284454c6..3f086a7d9 100644
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.tsx
@@ -80,6 +80,7 @@ export interface ThroughputInputAutoPilotV3Props {
throughputError?: string;
instantMaximumThroughput: number;
softAllowedMaximumThroughput: number;
+ isGlobalSecondaryIndex: boolean;
}
interface ThroughputInputAutoPilotV3State {
@@ -235,12 +236,12 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
);
return (
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 = ({
const currencySign: string = getCurrencySign(serverId);
const multiplier = getMultimasterMultiplier(numberOfRegions, multimasterEnabled);
const pricePerRu = isAutoscale ? getAutoscalePricePerRu(serverId, multiplier) : getPricePerRu(serverId, multiplier);
+ const estimatedMonthlyCost = "Estimated monthly cost";
- const iconWithEstimatedCostDisclaimer: JSX.Element = {estimatedCostDisclaimer} ;
+ const iconWithEstimatedCostDisclaimer: JSX.Element = (
+
+ {estimatedCostDisclaimer}
+
+ );
if (isAutoscale) {
return (
-
- Estimated monthly cost ({currency}){iconWithEstimatedCostDisclaimer}:{" "}
-
- {currencySign + calculateEstimateNumber(monthlyPrice / 10)} -{" "}
- {currencySign + calculateEstimateNumber(monthlyPrice)}{" "}
-
- ({numberOfRegions + (numberOfRegions === 1 ? " region" : " regions")}, {requestUnits / 10} - {requestUnits}{" "}
- RU/s, {currencySign + pricePerRu}/RU)
-
+
+
+ {estimatedMonthlyCost} ({currency}){iconWithEstimatedCostDisclaimer}:{" "}
+
+ {currencySign + calculateEstimateNumber(monthlyPrice / 10)} -{" "}
+ {currencySign + calculateEstimateNumber(monthlyPrice)}{" "}
+
+ ({numberOfRegions + (numberOfRegions === 1 ? " region" : " regions")}, {requestUnits / 10} - {requestUnits}{" "}
+ RU/s, {currencySign + pricePerRu}/RU)
+
+
);
}
return (
-
- Estimated cost ({currency}){iconWithEstimatedCostDisclaimer}:{" "}
-
- {currencySign + calculateEstimateNumber(hourlyPrice)} hourly /{" "}
- {currencySign + calculateEstimateNumber(dailyPrice)} daily /{" "}
- {currencySign + calculateEstimateNumber(monthlyPrice)} monthly{" "}
-
- ({numberOfRegions + (numberOfRegions === 1 ? " region" : " regions")}, {requestUnits}RU/s,{" "}
- {currencySign + pricePerRu}/RU)
-
+
+
+ Estimated cost ({currency}){iconWithEstimatedCostDisclaimer}:{" "}
+
+ {currencySign + calculateEstimateNumber(hourlyPrice)} hourly /{" "}
+ {currencySign + calculateEstimateNumber(dailyPrice)} daily /{" "}
+ {currencySign + calculateEstimateNumber(monthlyPrice)} monthly{" "}
+
+ ({numberOfRegions + (numberOfRegions === 1 ? " region" : " regions")}, {requestUnits}RU/s,{" "}
+ {currencySign + pricePerRu}/RU)
+
+
);
};
diff --git a/src/Explorer/Controls/ThroughputInput/ThroughputInput.less b/src/Explorer/Controls/ThroughputInput/ThroughputInput.less
index 059b210f6..52feab10a 100644
--- a/src/Explorer/Controls/ThroughputInput/ThroughputInput.less
+++ b/src/Explorer/Controls/ThroughputInput/ThroughputInput.less
@@ -28,3 +28,16 @@
.deleteQuery:focus::after {
outline: none !important;
}
+
+// Override Fluent UI TextField focus styles
+.throughputInputContainer {
+ :global {
+ .ms-TextField {
+ .ms-TextField-fieldGroup {
+ &:focus-within {
+ border-color: var(--colorCompoundBrandStroke1, @SelectionColor) !important;
+ }
+ }
+ }
+ }
+}
diff --git a/src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx b/src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx
index 9fb5b28f9..13a0923f3 100644
--- a/src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx
+++ b/src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx
@@ -1,15 +1,16 @@
-import { Checkbox, DirectionalHint, Link, Stack, Text, TextField, TooltipHost } from "@fluentui/react";
+import { Checkbox, DirectionalHint, Link, Separator, Stack, Text, TextField, TooltipHost } from "@fluentui/react";
import { getWorkloadType } from "Common/DatabaseAccountUtility";
+import { CostEstimateText } from "Explorer/Controls/ThroughputInput/CostEstimateText/CostEstimateText";
import { useDatabases } from "Explorer/useDatabases";
import React, { FunctionComponent, useEffect, useState } from "react";
import * as Constants from "../../../Common/Constants";
import { InfoTooltip } from "../../../Common/Tooltip/InfoTooltip";
+import { isFabricNative } from "../../../Platform/Fabric/FabricUtil";
import * as SharedConstants from "../../../Shared/Constants";
import { userContext } from "../../../UserContext";
import { getCollectionName } from "../../../Utils/APITypeUtils";
import * as AutoPilotUtils from "../../../Utils/AutoPilotUtils";
import * as PricingUtils from "../../../Utils/PricingUtils";
-import { CostEstimateText } from "./CostEstimateText/CostEstimateText";
import "./ThroughputInput.less";
export interface ThroughputInputProps {
@@ -18,6 +19,7 @@ export interface ThroughputInputProps {
isFreeTier: boolean;
showFreeTierExceedThroughputTooltip: boolean;
isQuickstart?: boolean;
+ isGlobalSecondaryIndex?: boolean;
setThroughputValue: (throughput: number) => void;
setIsAutoscale: (isAutoscale: boolean) => void;
setIsThroughputCapExceeded: (isThroughputCapExceeded: boolean) => void;
@@ -30,6 +32,7 @@ export const ThroughputInput: FunctionComponent = ({
isFreeTier,
showFreeTierExceedThroughputTooltip,
isQuickstart,
+ isGlobalSecondaryIndex,
setThroughputValue,
setIsAutoscale,
setIsThroughputCapExceeded,
@@ -38,7 +41,9 @@ export const ThroughputInput: FunctionComponent = ({
let defaultThroughput: number;
const workloadType: Constants.WorkloadType = getWorkloadType();
- if (
+ if (isFabricNative()) {
+ defaultThroughput = AutoPilotUtils.autoPilotThroughput5K;
+ } else if (
isFreeTier ||
isQuickstart ||
[Constants.WorkloadType.Learning, Constants.WorkloadType.DevelopmentTesting].includes(workloadType)
@@ -193,88 +198,127 @@ export const ThroughputInput: FunctionComponent = ({
{PricingUtils.getRuToolTipText()}
+ {!isGlobalSecondaryIndex && (
+
+
+ )}
{isAutoscaleSelected && (
-
- Estimate your required RU/s with{" "}
-
- capacity calculator
-
- .
+
+ Your container throughput will automatically scale up to the maximum value you select, from a minimum of 10%
+ of that value.
+
+
+
+
+ Minimum RU/s
+
+ The minimum RU/s your container will scale to
+
+
+ {Math.round(throughput / 10).toString()}
+
+
-
-
- {isDatabase ? "Database" : getCollectionName()} Max RU/s
+
+ x 10 =
- {getAutoScaleTooltip()}
+
+
+
+
+ Maximum RU/s
+
+ {getAutoScaleTooltip()}
+
+ onThroughputValueChange(newInput)}
+ step={AutoPilotUtils.autoPilotIncrementStep}
+ min={AutoPilotUtils.autoPilotThroughput1K}
+ max={isSharded ? Number.MAX_SAFE_INTEGER.toString() : "10000"}
+ value={throughput.toString()}
+ ariaLabel={`${isDatabase ? "Database" : getCollectionName()} max RU/s`}
+ required={true}
+ errorMessage={throughputError}
+ />
+
- onThroughputValueChange(newInput)}
- step={AutoPilotUtils.autoPilotIncrementStep}
- min={AutoPilotUtils.autoPilotThroughput1K}
- max={isSharded ? Number.MAX_SAFE_INTEGER.toString() : "10000"}
- value={throughput.toString()}
- ariaLabel={`${isDatabase ? "Database" : getCollectionName()} max RU/s`}
- required={true}
- errorMessage={throughputError}
- />
-
-
- Your {isDatabase ? "database" : getCollectionName().toLocaleLowerCase()} throughput will automatically scale
- from{" "}
-
- {AutoPilotUtils.getMinRUsBasedOnUserInput(throughput)} RU/s (10% of max RU/s) - {throughput} RU/s
- {" "}
- based on usage.
-
+
+
+ Estimate your required RU/s with
+
+ capacity calculator
+
+ .
+
+
+
)}
@@ -298,7 +342,6 @@ export const ThroughputInput: FunctionComponent = ({
{getAutoScaleTooltip()}
-
= ({
errorMessage={throughputError}
/>
+
- Estimate your required RU/s with
-
-
-
-
- capacity calculator
-
-
-
- .
+ Your container throughput will automatically scale up to the maximum value you select, from a minimum of 10% of that value.
+
+
+
+
+
+
+
+ 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(
- Updated cost per month
+ Updated cost per month
-
+
{newPrices.currencySign} {calculateEstimateNumber(newPrices.monthlyPrice / 10)} min
-
+
{newPrices.currencySign} {calculateEstimateNumber(newPrices.monthlyPrice)} max
@@ -253,12 +254,12 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
return (
{newThroughput && newThroughputCostElement()}
- Current cost per month
-
-
+ Current cost per month
+
+
{prices.currencySign} {calculateEstimateNumber(prices.monthlyPrice / 10)} min
-
+
{prices.currencySign} {calculateEstimateNumber(prices.monthlyPrice)} max
@@ -269,8 +270,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
return getEstimatedSpendingElement(costElement(), newThroughput ?? throughput, numberOfRegions, prices, true);
};
settingsAndScaleStyle = {
- root: { width: "33%",
- color: 'var(--colorNeutralForeground1)' },
+ root: { width: "33%", color: "var(--colorNeutralForeground1)" },
};
private getEstimatedManualSpendElement = (
throughput: number,
@@ -287,40 +287,40 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
serverId,
numberOfRegions,
isMultimaster,
- true,
+ false,
);
return (
{newThroughput && newThroughputCostElement()}
- Current cost per month
+ Current cost per month
-
+
{prices.currencySign} {calculateEstimateNumber(prices.hourlyPrice)}/hr
-
+
{prices.currencySign} {calculateEstimateNumber(prices.dailyPrice)}/day
-
+
{prices.currencySign} {calculateEstimateNumber(prices.monthlyPrice)}/mo
@@ -378,22 +378,26 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
toolTipElement={getToolTipContainer(this.props.infoBubbleText)}
/>
- {this.overrideWithProvisionedThroughputSettings() && (
-
- {manualToAutoscaleDisclaimerElement}
-
+ {!this.props.isGlobalSecondaryIndex && (
+ <>
+ {this.overrideWithProvisionedThroughputSettings() && (
+
+ {manualToAutoscaleDisclaimerElement}
+
+ )}
+
);
};
@@ -405,8 +409,8 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
const capacity: string = this.props.isFixed ? "Fixed" : "Unlimited";
return (
-
- {capacity}
+
+ {capacity}
);
};
@@ -557,26 +561,81 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
private getThroughputTextField = (): JSX.Element => (
<>
{this.props.isAutoPilotSelected ? (
- {
- 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.props.isAutoPilotSelected ? (
-
+
Based on usage, your {this.props.collectionName ? "container" : "database"} throughput will scale from{" "}
{AutoPilotUtils.getMinRUsBasedOnUserInput(this.props.maxAutoPilotThroughput)} RU/s (10% of max RU/s) -{" "}
@@ -633,7 +692,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
)}
{!this.overrideWithProvisionedThroughputSettings() && (
-
+
Estimate your required RU/s with
{` capacity calculator`}
+
+
+ Minimum RU/s
+
+
+
+ 400
+
+
+
+ x 10 =
+
+
+
+
+ Maximum RU/s
+
+
+
+
- {this.props.label && {this.props.label} }
+ {this.props.label && (
+ {this.props.label}
+ )}
{this.props.toolTipElement && (
+
+
+ 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 900ad6ab0..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;
@@ -57,6 +58,7 @@ export enum SettingsV2TabTypes {
ComputedPropertiesTab,
ContainerVectorPolicyTab,
ThroughputBucketsTab,
+ GlobalSecondaryIndexTab,
}
export enum ContainerPolicyTabTypes {
@@ -164,13 +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}
/>
+
+
+
- Updated cost per month
+ Updated cost per month
-
+
{newPrices.currencySign} {calculateEstimateNumber(newPrices.hourlyPrice)}/hr
-
+
{newPrices.currencySign} {calculateEstimateNumber(newPrices.dailyPrice)}/day
-
+
{newPrices.currencySign} {calculateEstimateNumber(newPrices.monthlyPrice)}/mo
);
};
-
+
const costElement = (): JSX.Element => {
const prices: PriceBreakdown = getRuPriceBreakdown(throughput, serverId, numberOfRegions, isMultimaster, false);
return (
+ 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"
+ />
-
-
- Data Explorer Content
diff --git a/src/Explorer/DataSamples/ContainerSampleGenerator.ts b/src/Explorer/DataSamples/ContainerSampleGenerator.ts
index ace021718..7613b7a07 100644
--- a/src/Explorer/DataSamples/ContainerSampleGenerator.ts
+++ b/src/Explorer/DataSamples/ContainerSampleGenerator.ts
@@ -1,3 +1,4 @@
+import { useDataplaneRbacAuthorization } from "Utils/AuthorizationUtils";
import { createCollection } from "../../Common/dataAccess/createCollection";
import { createDocument } from "../../Common/dataAccess/createDocument";
import { createDocument as createMongoDocument } from "../../Common/MongoProxyClient";
@@ -90,12 +91,13 @@ export class ContainerSampleGenerator {
}
const { databaseAccount: account } = userContext;
const databaseId = collection.databaseId;
+
const gremlinClient = new GremlinClient();
gremlinClient.initialize({
endpoint: `wss://${GraphTab.getGremlinEndpoint(account)}`,
databaseId: databaseId,
collectionId: collection.id(),
- masterKey: userContext.masterKey || "",
+ password: useDataplaneRbacAuthorization(userContext) ? userContext.aadToken : userContext.masterKey || "",
maxResultSize: 100,
});
diff --git a/src/Explorer/DataSamples/DataSamplesUtil.ts b/src/Explorer/DataSamples/DataSamplesUtil.ts
index d28ef0426..514322fed 100644
--- a/src/Explorer/DataSamples/DataSamplesUtil.ts
+++ b/src/Explorer/DataSamples/DataSamplesUtil.ts
@@ -6,6 +6,7 @@ import Explorer from "../Explorer";
import { useDatabases } from "../useDatabases";
import { ContainerSampleGenerator } from "./ContainerSampleGenerator";
+// TODO: this does not seem to be used. Remove?
export class DataSamplesUtil {
private static readonly DialogTitle = "Create Sample Container";
constructor(private container: Explorer) {}
diff --git a/src/Explorer/ErrorBoundary.tsx b/src/Explorer/ErrorBoundary.tsx
index 68bd62b00..d92325b59 100644
--- a/src/Explorer/ErrorBoundary.tsx
+++ b/src/Explorer/ErrorBoundary.tsx
@@ -1,4 +1,4 @@
-import React, { Component, ErrorInfo, ReactNode } from "react";
+import React, { Component, ReactNode } from "react";
interface Props {
children: ReactNode;
@@ -19,7 +19,8 @@ export class ErrorBoundary extends Component
@@ -118,6 +122,10 @@ export class NotificationConsoleComponent extends React.Component<
{numInfoItems}
+
+ 
+ {numWarningItems}
+
{userContext.features.pr && 
}
{item.type === ConsoleDataType.Error && 
}
{item.type === ConsoleDataType.InProgress && 
}
+ {item.type === ConsoleDataType.Warning && }
{item.date}
{item.message}
diff --git a/src/Explorer/Menus/NotificationConsole/__snapshots__/NotificationConsoleComponent.test.tsx.snap b/src/Explorer/Menus/NotificationConsole/__snapshots__/NotificationConsoleComponent.test.tsx.snap
index b2672aeec..5d471f177 100644
--- a/src/Explorer/Menus/NotificationConsole/__snapshots__/NotificationConsoleComponent.test.tsx.snap
+++ b/src/Explorer/Menus/NotificationConsole/__snapshots__/NotificationConsoleComponent.test.tsx.snap
@@ -59,6 +59,19 @@ exports[`NotificationConsoleComponent renders the console 1`] = `
0
+
+ 
+
+ 0
+
+
+
+
+
+ 0
+
+
)}
- {!this.state.errorMessage && this.isFreeTierAccount() && (
+ {!this.state.errorMessage && isFreeTierAccount() && (
{!(isFabricNative() && this.props.databaseId !== undefined) && (
-
+
*
@@ -358,7 +336,6 @@ export class AddCollectionPanel extends React.Component) =>
@@ -400,10 +377,10 @@ export class AddCollectionPanel extends React.Component (this.newDatabaseThroughput = throughput)}
setIsAutoscale={(isAutoscale: boolean) => (this.isNewDatabaseAutoscale = isAutoscale)}
@@ -429,12 +406,12 @@ export class AddCollectionPanel extends React.Component
)}
-
+
*
{`${getCollectionName()} id`}
@@ -471,11 +448,12 @@ export class AddCollectionPanel extends React.Component
{this.shouldShowIndexingOptionsForFreeTierAccount() && (
-
+
*
Indexing
@@ -521,7 +499,7 @@ export class AddCollectionPanel extends React.Component
-
+
*
Sharding
@@ -577,20 +555,17 @@ export class AddCollectionPanel extends React.Component
-
+
*
- {this.getPartitionKeyName()}
+ {getPartitionKeyName()}
-
+
@@ -604,8 +579,8 @@ export class AddCollectionPanel extends React.Component {
return (
-
+
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}
@@ -670,7 +645,7 @@ export class AddCollectionPanel extends React.Component
);
})}
- {!isFabricNative() && userContext.apiType === "SQL" && (
+ {userContext.apiType === "SQL" && (
)}
+
)}
@@ -733,12 +709,12 @@ export class AddCollectionPanel extends React.Component
)}
- {this.shouldShowCollectionThroughputInput() && (
+ {this.shouldShowCollectionThroughputInput() && !isFabricNative() && (
(this.collectionThroughput = throughput)}
setIsAutoscale={(isAutoscale: boolean) => (this.isCollectionAutoscale = isAutoscale)}
@@ -752,28 +728,8 @@ export class AddCollectionPanel extends React.Component
-
-
- Unique keys
-
-
-
-
-
+
+ {UniqueKeysHeader()}
{this.state.uniqueKeys.map((uniqueKey: string, i: number): JSX.Element => {
return (
@@ -786,7 +742,6 @@ export class AddCollectionPanel extends React.Component) => {
const uniqueKeys = this.state.uniqueKeys.map((uniqueKey: string, j: number) => {
@@ -821,10 +776,14 @@ export class AddCollectionPanel extends React.Component
)}
- {this.shouldShowAnalyticalStoreOptions() && (
-
+ {!isFabricNative() && userContext.apiType === "SQL" && (
+
- {this.getAnalyticalStorageContent()}
+ {AnalyticalStoreHeader()}
@@ -832,7 +791,7 @@ export class AddCollectionPanel extends React.Component
- {!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.
{ - this.scrollToSection("collapsibleVectorPolicySectionContent"); + scrollToSection("collapsibleVectorPolicySectionContent"); }} - tooltipContent={this.getContainerVectorPolicyTooltipContent()} + tooltipContent={ContainerVectorPolicyTooltipContent()} >
@@ -919,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()}
@@ -947,7 +906,7 @@ export class AddCollectionPanel extends React.Component {
TelemetryProcessor.traceOpen(Action.ExpandAddCollectionPaneAdvancedSection);
- this.scrollToSection("collapsibleAdvancedSectionContent");
+ scrollToSection("collapsibleAdvancedSectionContent");
}}
>
@@ -1057,31 +1016,6 @@ export class AddCollectionPanel extends React.Component): void {
if (event.target.checked && !this.state.createNewDatabase) {
this.setState({
@@ -1169,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 (
@@ -1264,7 +1134,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 {
@@ -1402,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 80%
rename from src/Explorer/Panes/__snapshots__/AddCollectionPanel.test.tsx.snap
rename to src/Explorer/Panes/AddCollectionPanel/__snapshots__/AddCollectionPanel.test.tsx.snap
index fd13dcd23..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`] = `
>
+
+
+
+
-
- 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
+
+
+
+
+
+
+
+
+
+
+
+
{
+ 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/PanelComponent.less b/src/Explorer/Panes/PanelComponent.less
index e52a8c947..640f4ff9f 100644
--- a/src/Explorer/Panes/PanelComponent.less
+++ b/src/Explorer/Panes/PanelComponent.less
@@ -13,10 +13,10 @@
margin: 20px 0;
overflow-x: hidden;
- & > :not(.collapsibleSection) {
+ &> :not(.collapsibleSection) {
margin-bottom: @DefaultSpace;
- & > :not(:last-child) {
+ &> :not(:last-child) {
margin-bottom: @DefaultSpace;
}
}
@@ -114,6 +114,14 @@
color: var(--colorNeutralForeground1, @BaseHigh);
}
}
+
+ @media (max-width: 768px) {
+ .panelMainContent {
+ padding: 0 24px;
+ margin: 0;
+ overflow-x: auto;
+ }
+ }
}
.panelHeader {
@@ -178,237 +186,89 @@
.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;
+ border: 1px dashed var(--colorNeutralStroke1, #605e5c);
+ outline: none;
}
+
.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;
+ border: 1px solid var(--colorCompoundBrandStroke1, @SelectionColor);
+ outline: none;
}
+
.addEntityDatePicker {
max-width: 145px;
}
+
.addEntityTextField {
width: 237px;
}
+
.addButtonEntiy {
width: 25%;
}
+
.column-select-view {
margin: 20px 0px 0px 0px;
}
+
.panelSeparator::before {
- background-color: var(--colorNeutralStroke1, #edebe9);
-}
-
-// Override mandatory star color using theme variables
-.mandatoryStar {
- color: var(--colorPaletteRedForeground1, #d13438) !important;
-}
-
-// Override Fluent UI Panel component to use theme variables consistently
-.ms-Panel {
- background-color: var(--colorNeutralBackground1, @BaseLight);
- color: var(--colorNeutralForeground1, @BaseHigh);
-
- .ms-Panel-main {
- background-color: var(--colorNeutralBackground1, @BaseLight);
- }
-
- .ms-Panel-contentInner {
- background-color: var(--colorNeutralBackground1, @BaseLight);
- }
-
- .ms-Panel-header {
- background-color: var(--colorNeutralBackground1, @BaseLight);
- color: var(--colorNeutralForeground1, @BaseHigh);
- }
-
- .ms-Panel-headerText {
- color: var(--colorNeutralForeground1, @BaseHigh);
- }
-
- .ms-Panel-closeButton {
- color: var(--colorNeutralForeground1, @BaseHigh);
-
- &:hover {
- background-color: var(--colorNeutralBackground1Hover, @BaseLow);
- }
- }
-}
-
-// Dark theme overrides when body has isDarkMode class
-body.isDarkMode {
- .panelFormWrapper {
- background-color: var(--colorNeutralBackground1, #1e1e1e);
- color: var(--colorNeutralForeground1, #ffffff);
-
- .panelMainContent {
- .panelInfoIcon {
- color: var(--colorNeutralForeground1, #ffffff);
- }
-
- .panelTextBold {
- color: var(--colorNeutralForeground1, #ffffff);
- }
-
- .panelTextField {
- border: 1px solid var(--colorNeutralStroke1, #484848);
- color: var(--colorNeutralForeground1, #ffffff);
- background-color: var(--colorNeutralBackground2, #2d2d2d);
-
- &::placeholder {
- color: var(--colorNeutralForeground3, #a0a0a0);
- }
-
- &:focus {
- border-color: var(--colorCompoundBrandStroke1, #4db6e8);
- }
- }
-
- .panelRadioBtnLabel {
- color: var(--colorNeutralForeground1, #ffffff);
- }
-
- // Dark theme Fluent UI component overrides
- .ms-Dropdown {
- .ms-Dropdown-title {
- background-color: var(--colorNeutralBackground2, #2d2d2d);
- border-color: var(--colorNeutralStroke1, #484848);
- color: var(--colorNeutralForeground1, #ffffff);
- }
-
- .ms-Dropdown-caretDownWrapper {
- color: var(--colorNeutralForeground1, #ffffff);
- }
- }
-
- .ms-Checkbox {
- .ms-Checkbox-label {
- color: var(--colorNeutralForeground1, #ffffff);
- }
- }
-
- .ms-TextField {
- .ms-TextField-fieldGroup {
- background-color: var(--colorNeutralBackground2, #2d2d2d);
- border-color: var(--colorNeutralStroke1, #484848);
- }
-
- .ms-TextField-field {
- background-color: var(--colorNeutralBackground2, #2d2d2d);
- color: var(--colorNeutralForeground1, #ffffff);
-
- &::placeholder {
- color: var(--colorNeutralForeground3, #a0a0a0);
- }
- }
- }
-
- .ms-Text {
- color: var(--colorNeutralForeground1, #ffffff);
- }
-
- span, label {
- color: var(--colorNeutralForeground1, #ffffff);
- }
- }
- }
-
- .panelHeader {
- color: var(--colorNeutralForeground1, #ffffff);
- }
-
- .panelInfoErrorContainer {
- background-color: var(--colorNeutralBackground3, #404040);
- color: var(--colorNeutralForeground1, #ffffff);
-
- .panelWarningErrorDetailsLinkContainer {
- .panelWarningErrorMessage {
- color: var(--colorNeutralForeground1, #ffffff);
- }
- }
- }
-
- .panelFooter {
- background-color: var(--colorNeutralBackground1, #1e1e1e);
- color: var(--colorNeutralForeground1, #ffffff);
- border-top: solid 1px var(--colorNeutralStroke1, #484848);
- }
-
- // Dark theme Panel component overrides
- .ms-Panel {
- background-color: var(--colorNeutralBackground1, #1e1e1e);
- color: var(--colorNeutralForeground1, #ffffff);
-
- .ms-Panel-main {
- background-color: var(--colorNeutralBackground1, #1e1e1e);
- }
-
- .ms-Panel-contentInner {
- background-color: var(--colorNeutralBackground1, #1e1e1e);
- }
-
- .ms-Panel-header {
- background-color: var(--colorNeutralBackground1, #1e1e1e);
- color: var(--colorNeutralForeground1, #ffffff);
- }
-
- .ms-Panel-headerText {
- color: var(--colorNeutralForeground1, #ffffff);
- }
-
- .ms-Panel-closeButton {
- color: var(--colorNeutralForeground1, #ffffff);
-
- &:hover {
- background-color: var(--colorNeutralBackground1Hover, #404040);
- }
- }
- }
+ 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 1626f09d1..881ed0d84 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,
@@ -37,6 +47,7 @@ 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";
@@ -44,6 +55,26 @@ import create, { UseStore } from "zustand";
import Explorer from "../../Explorer";
import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";
+const spinButtonStyles: ISpinButtonStyles = {
+ label: {
+ fontSize: 12,
+ fontWeight: 400,
+ color: "inherit",
+ },
+ root: {
+ paddingBottom: 10,
+ },
+ labelWrapper: {
+ color: "inherit",
+ },
+ icon: {},
+ spinButtonWrapper: {},
+ input: {
+ color: "inherit",
+ },
+ arrowButtonsContainer: {},
+};
+
export interface DataPlaneRbacState {
dataPlaneRbacEnabled: boolean;
aadTokenUpdated: boolean;
@@ -60,6 +91,7 @@ const useStyles = makeStyles({
bulletList: {
listStyleType: "disc",
paddingLeft: "20px",
+ color: "var(--colorNeutralForeground1)",
},
container: {
display: "flex",
@@ -71,6 +103,7 @@ const useStyles = makeStyles({
},
header: {
marginRight: "5px",
+ color: "var(--colorNeutralForeground1)",
},
headerIcon: {
paddingTop: "4px",
@@ -78,6 +111,7 @@ const useStyles = makeStyles({
},
settingsSectionContainer: {
paddingLeft: "15px",
+ color: "var(--colorNeutralForeground1)",
},
settingsSectionDescription: {
paddingBottom: "10px",
@@ -143,6 +177,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)
@@ -158,6 +203,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)
@@ -172,6 +222,12 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
LocalStorageUtility.getEntryString(StorageKey.CopilotSampleDBEnabled) === "true",
);
+ const [mongoGuidRepresentation, setMongoGuidRepresentation] = useState(
+ LocalStorageUtility.hasItem(StorageKey.MongoGuidRepresentation)
+ ? (LocalStorageUtility.getEntryString(StorageKey.MongoGuidRepresentation) as Constants.MongoGuidRepresentation)
+ : Constants.MongoGuidRepresentation.CSharpLegacy,
+ );
+
const styles = useStyles();
const explorerVersion = configContext.gitSha;
@@ -182,6 +238,7 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
!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) &&
@@ -189,12 +246,52 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
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 &&
!isEmulator;
+ const shouldShowMongoGuidRepresentationOption = userContext.apiType === "Mongo";
+
const handlerOnSubmit = async () => {
setIsExecuting(true);
@@ -274,6 +371,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);
@@ -281,6 +418,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());
@@ -305,11 +443,16 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
);
}
+ if (shouldShowMongoGuidRepresentationOption) {
+ LocalStorageUtility.setEntryString(StorageKey.MongoGuidRepresentation, mongoGuidRepresentation);
+ }
+
setIsExecuting(false);
logConsoleInfo(
`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,
@@ -325,9 +468,14 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
);
}
- logConsoleInfo(
- `Updated query setting to ${LocalStorageUtility.getEntryString(StorageKey.SetPartitionKeyUndefined)}`,
- );
+ if (shouldShowMongoGuidRepresentationOption) {
+ logConsoleInfo(
+ `Updated Mongo Guid Representation to ${LocalStorageUtility.getEntryString(
+ StorageKey.MongoGuidRepresentation,
+ )}`,
+ );
+ }
+
refreshExplorer && (await explorer.refreshExplorer());
closeSidePanel();
};
@@ -372,6 +520,13 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
{ key: SplitterDirection.Horizontal, text: "Horizontal" },
];
+ const mongoGuidRepresentationDropdownOptions: IDropdownOption[] = [
+ { key: Constants.MongoGuidRepresentation.CSharpLegacy, text: Constants.MongoGuidRepresentation.CSharpLegacy },
+ { key: Constants.MongoGuidRepresentation.JavaLegacy, text: Constants.MongoGuidRepresentation.JavaLegacy },
+ { key: Constants.MongoGuidRepresentation.PythonLegacy, text: Constants.MongoGuidRepresentation.PythonLegacy },
+ { key: Constants.MongoGuidRepresentation.Standard, text: Constants.MongoGuidRepresentation.Standard },
+ ];
+
const handleOnPriorityLevelOptionChange = (
ev: React.FormEvent,
option: IChoiceGroupOption,
@@ -423,6 +578,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)) {
@@ -450,6 +609,13 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
setRefreshExplorer(false);
};
+ const handleOnMongoGuidRepresentationOptionChange = (
+ ev: React.FormEvent,
+ option: IDropdownOption,
+ ): void => {
+ setMongoGuidRepresentation(option.key as Constants.MongoGuidRepresentation);
+ };
+
const choiceButtonStyles = {
root: {
clear: "both",
@@ -463,9 +629,35 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
".ms-ChoiceField-wrapper label": {
fontSize: 12,
paddingTop: 0,
+ color: "inherit",
},
".ms-ChoiceField": {
marginTop: 0,
+ color: "inherit",
+ },
+ ".ms-ChoiceField-field": {
+ color: "inherit",
+ },
+ ".ms-ChoiceField-field:hover": {
+ color: "inherit",
+ },
+ ".ms-ChoiceField-field:hover .ms-ChoiceField-labelWrapper": {
+ color: "inherit",
+ },
+ ".ms-ChoiceField-field:hover span": {
+ color: "inherit",
+ },
+ ".ms-ChoiceField-wrapper": {
+ color: "inherit",
+ },
+ ".ms-ChoiceField-wrapper:hover": {
+ color: "inherit",
+ },
+ ".ms-ChoiceField-labelWrapper": {
+ color: "inherit",
+ },
+ ".ms-ChoiceField-labelWrapper:hover": {
+ color: "inherit",
},
},
},
@@ -477,6 +669,7 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
fontSize: 12,
fontWeight: 400,
display: "block",
+ color: "inherit",
},
root: {},
container: {},
@@ -489,434 +682,614 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
label: {
fontSize: 12,
fontWeight: 400,
+ color: "inherit",
},
root: {
paddingBottom: 10,
},
- labelWrapper: {},
+ labelWrapper: {
+ color: "inherit",
+ },
icon: {},
spinButtonWrapper: {},
- input: {},
+ input: {
+ color: "#000000",
+ selectors: {
+ "::placeholder": {
+ color: "#000000",
+ },
+ },
+ },
arrowButtonsContainer: {},
};
+ const checkboxStyles = {
+ root: {
+ selectors: {
+ ".ms-Checkbox-label": {
+ color: "var(--colorNeutralForeground1)",
+ },
+ ".ms-Checkbox-text": {
+ color: "var(--colorNeutralForeground1)",
+ },
+ ":hover .ms-Checkbox-label": {
+ color: "var(--colorNeutralForeground1)",
+ },
+ ":hover .ms-Checkbox-text": {
+ color: "var(--colorNeutralForeground1)",
+ },
+ ".is-checked": {
+ selectors: {
+ ".ms-Checkbox-checkbox": {
+ backgroundColor: "var(--colorNeutralBackground1)",
+ borderColor: "var(--colorNeutralStroke1)",
+ },
+ "&:hover .ms-Checkbox-checkbox": {
+ backgroundColor: "var(--colorNeutralBackground1Hover)",
+ borderColor: "var(--colorNeutralStroke1Hover)",
+ },
+ },
+ },
+ },
+ },
+ label: {
+ padding: 0,
+ color: "var(--colorNeutralForeground1)",
+ selectors: {
+ ".ms-Checkbox-text": {
+ color: "var(--colorNeutralForeground1)",
+ },
+ ":hover": {
+ color: "var(--colorNeutralForeground1)",
+ },
+ },
+ },
+ checkbox: {
+ backgroundColor: "var(--colorNeutralBackground1)",
+ borderColor: "var(--colorNeutralStroke1)",
+ selectors: {
+ ":hover": {
+ backgroundColor: "var(--colorNeutralBackground1Hover)",
+ borderColor: "var(--colorNeutralStroke1Hover)",
+ },
+ },
+ },
+ checkmark: {
+ color: "var(--colorNeutralForeground1)",
+ selectors: {
+ ":hover": {
+ color: "var(--colorNeutralForeground1)",
+ },
+ },
+ },
+ };
+
return (
{ - this.scrollToSection("collapsibleVectorPolicySectionContent"); + scrollToSection("collapsibleVectorPolicySectionContent"); }} - tooltipContent={this.getContainerVectorPolicyTooltipContent()} + tooltipContent={ContainerVectorPolicyTooltipContent()} >
+ ) => {
+ onEnableAnalyticalStoreRadioButtonChange(event.target.checked);
+ }}
+ />
+ On
+
+ ) => {
+ onDisableAnalyticalStoreRadioButtonnChange(event.target.checked);
+ }}
+ />
+ Off
+
+
-
- {shouldShowQueryPageOptions && (
-
-
-
-
-
-
- )}
- {showEnableEntraIdRbac && (
-
-
-
-
-
-
- )}
- {userContext.apiType === "SQL" && !isEmulator && (
- <>
-
+ {!isFabricNative() && (
+
+ {shouldShowQueryPageOptions && (
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+ )}
+ {showEnableEntraIdRbac && (
+
+
+
+
+
-
- )}
- {showRetrySettings && (
-
-
-
-
-
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() && (
-
-
- {
- 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
-
-
-
- Choose Automatic to enable Entra ID RBAC automatically. True/False to force enable/disable Entra ID
- RBAC.
-
- {" "}
- Learn more{" "}
-
-
- Query Timeout
+ Page Options
- 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.
+ Choose Custom to specify a fixed amount of query results to show, or choose Unlimited to show as
+ many query results per page.
+ {isCustomPageOptionSelected() && (
+
+
+ {
+ 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
+
+
+ Choose Automatic to enable Entra ID RBAC automatically. True/False to force enable/disable Entra
+ ID RBAC.
+
+ {" "}
+ Learn more{" "}
+
+
+ Retry Settings
-
-
- Retry policy associated with throttled requests during CosmosDB queries.
+ )}
+ {userContext.apiType === "SQL" && userContext.authType === AuthType.AAD && !isFabric() && (
+
+
+
+
+
Region Selection
+
+ option.key === selectedRegionalEndpoint)?.text
+ : regionOptions[0]?.text
+ }
+ onChange={handleOnSelectedRegionOptionChange}
+ options={regionOptions}
+ styles={{ root: { marginBottom: "10px" } }}
+ />
-
+ Changes region the Cosmos Client uses to access account.
+
+
+ Select Region
+
+ Changes the account endpoint used to perform client operations.
+
+
+
- Max retry attempts
-
- Max number of retries to be performed for a request. Default value 9.
-
+
+
+ )}
+ {userContext.apiType === "SQL" && !isEmulator && (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+ {showRetrySettings && (
+
+
+
+
+ setRetryAttempts(parseInt(newValue) + 1 || retryAttempts)}
- onDecrement={(newValue) => setRetryAttempts(parseInt(newValue) - 1 || retryAttempts)}
- onValidate={(newValue) => setRetryAttempts(parseInt(newValue) || retryAttempts)}
- styles={spinButtonStyles}
- />
-
Query Timeout
+
+
+ {queryTimeoutEnabled && (
+
+ 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.
+
+ 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.
+
+
+
- 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.
-
+
+
+ )}
+ {!isEmulator && (
+
+
+
+
+ setRetryInterval(parseInt(newValue) + 1000 || retryInterval)}
- onDecrement={(newValue) => setRetryInterval(parseInt(newValue) - 1000 || retryInterval)}
- onValidate={(newValue) => setRetryInterval(parseInt(newValue) || retryInterval)}
- styles={spinButtonStyles}
- />
-
-
- )}
- {!isEmulator && (
-
-
-
-
-
Enable container pagination
+
+ setContainerPaginationEnabled(!containerPaginationEnabled)}
+ label="Enable container pagination"
+ />
-
+ Load 50 containers at a time. Currently, containers are not pulled in alphanumeric order.
+
+
- Max wait time (s)
-
- Max wait time in seconds to wait for a request while the retries are happening. Default value 30
- seconds.
-
+
+
+ )}
+ {shouldShowCrossPartitionOption && (
+
+
+
+
+ setMaxWaitTimeInSeconds(parseInt(newValue) + 1 || MaxWaitTimeInSeconds)}
- onDecrement={(newValue) => setMaxWaitTimeInSeconds(parseInt(newValue) - 1 || MaxWaitTimeInSeconds)}
- onValidate={(newValue) => setMaxWaitTimeInSeconds(parseInt(newValue) || MaxWaitTimeInSeconds)}
- styles={spinButtonStyles}
- />
-
- 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.
+
+ Enable container pagination
-
-
-
-
-
-
- Load 50 containers at a time. Currently, containers are not pulled in alphanumeric order.
+
+
+ )}
+ {shouldShowEnhancedQueryControl && (
+
+
+
+
+ setContainerPaginationEnabled(!containerPaginationEnabled)}
- label="Enable container pagination"
- />
-
-
-
- )}
- {shouldShowCrossPartitionOption && (
- Enhanced query control
+
+ setQueryControlEnabled(!queryControlEnabled)}
+ label="Enable query control"
+ />
-
+ Query up to the max degree of parallelism.
+
+ {" "}
+ Learn more{" "}
+
+
+ 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.
+
+
+ )}
+ {shouldShowParallelismOption && (
+
+
+
+
+ setCrossPartitionQueryEnabled(!crossPartitionQueryEnabled)}
- label="Enable cross-partition query"
- />
-
-
-
- )}
- {shouldShowParallelismOption && (
- 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.
+
+ 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.
+
+
+ )}
+ {shouldShowPriorityLevelOption && (
+
+
+
+
+
- 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 && (
- 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.
+
+ 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.
+
+
+ )}
+ {shouldShowGraphAutoVizOption && (
+
+
+
+
+
-
-
- )}
- {shouldShowGraphAutoVizOption && (
- Display Gremlin query results as:
+
+
-
+ Select Graph to automatically visualize the query results as a Graph or JSON to display the
+ results as JSON.
+
+ Display Gremlin query results as:
-
-
-
-
-
-
- Select Graph to automatically visualize the query results as a Graph or JSON to display the results
- as JSON.
+
+
+ )}
+ {shouldShowCopilotSampleDBOption && (
+
+
+
+
+
-
-
- )}
- {shouldShowCopilotSampleDBOption && (
- Enable sample database
+
+
-
+ This is a sample database and collection with synthetic product data you can use to explore using
+ NoSQL queries. This will appear as another database in the Data Explorer UI, and is created by,
+ and maintained by Microsoft at no cost to you.
+
+ Enable sample database
-
-
{
useDialog.getState().showOkCancelModalDialog(
"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,
<>
@@ -927,6 +1300,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
,
);
@@ -937,7 +1311,7 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
- 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.
+
+
+ )}
+ {shouldShowMongoGuidRepresentationOption && (
+
+
+
+
+
-
-
- )}
-
+
+
+ )}
+
+ )}
Guid Representation
+
+
-
+ GuidRepresentation in MongoDB refers to how Globally Unique Identifiers (GUIDs) are serialized and
+ deserialized when stored in BSON documents. This will apply to all document operations.
+
+
-
+
diff --git a/src/Explorer/Panes/SettingsPane/__snapshots__/SettingsPane.test.tsx.snap b/src/Explorer/Panes/SettingsPane/__snapshots__/SettingsPane.test.tsx.snap
index e89ee345b..41759f1c7 100644
--- a/src/Explorer/Panes/SettingsPane/__snapshots__/SettingsPane.test.tsx.snap
+++ b/src/Explorer/Panes/SettingsPane/__snapshots__/SettingsPane.test.tsx.snap
@@ -12,6 +12,7 @@ exports[`Settings Pane should render Default properly 1`] = `
>
+
+
+
+
+
+
Explorer Version
{explorerVersion}
+ Enhanced query control
+
+
+
+
+ Query up to the max degree of parallelism.
+
+
+ Learn more
+
+
+
+