this.setRef(elt)}
/>
@@ -71,9 +92,14 @@ export class EditorReact extends React.Component {
+ // Hooking the model's onDidChangeContent event because of some event ordering issues.
+ // If a single user input causes BOTH the editor content to change AND the cursor selection to change (which is likely),
+ // then there are some inconsistencies as to which event fires first.
+ // But the editor.onDidChangeModelContent event seems to always fire before the cursor selection event.
+ // (This is NOT true for the model's onDidChangeContent event, which sometimes fires after the cursor selection event.)
+ // If the cursor selection event fires first, then the calling component may re-render the component with old content, so we want to ensure the model content changed event always fires first.
+ this.editor.onDidChangeModelContent(() => {
const queryEditorModel = this.editor.getModel();
this.props.onContentChanged(queryEditorModel.getValue());
});
@@ -98,7 +124,7 @@ export class EditorReact extends React.Component
this.setState({ isMongoIndexingPolicyDiscardable });
+ private onComputedPropertiesContentChange = (newComputedProperties: DataModels.ComputedProperties): void =>
+ this.setState({ computedPropertiesContent: newComputedProperties });
+
+ private resetShouldDiscardComputedProperties = (): void => this.setState({ shouldDiscardComputedProperties: false });
+
+ private logComputedPropertiesSuccessMessage = (): void => {
+ if (this.props.settingsTab.onLoadStartKey) {
+ traceSuccess(
+ Action.Tab,
+ {
+ databaseName: this.collection.databaseId,
+ collectionName: this.collection.id(),
+
+ dataExplorerArea: Constants.Areas.Tab,
+ tabTitle: this.props.settingsTab.tabTitle(),
+ },
+ this.props.settingsTab.onLoadStartKey,
+ );
+ this.props.settingsTab.onLoadStartKey = undefined;
+ }
+ };
+
+ private onComputedPropertiesDirtyChange = (isComputedPropertiesDirty: boolean): void =>
+ this.setState({ isComputedPropertiesDirty: isComputedPropertiesDirty });
+
private calculateTotalThroughputUsed = (): void => {
this.totalThroughputUsed = 0;
(useDatabases.getState().databases || []).forEach(async (database) => {
@@ -636,7 +696,6 @@ export class SettingsComponent extends React.Component => {
const newCollection: DataModels.Collection = { ...this.collection.rawDataModel };
- if (this.state.isSubSettingsSaveable || this.state.isIndexingPolicyDirty || this.state.isConflictResolutionDirty) {
+ if (
+ this.state.isSubSettingsSaveable ||
+ this.state.isIndexingPolicyDirty ||
+ this.state.isConflictResolutionDirty ||
+ this.state.isComputedPropertiesDirty
+ ) {
let defaultTtl: number;
switch (this.state.timeToLive) {
case TtlType.On:
@@ -825,6 +897,10 @@ export class SettingsComponent extends React.Component
- You have not saved the latest changes made to your indexing policy. Please click save to confirm the changes.
+ You have not saved the latest changes made to your{" "}
+ {editor === "indexPolicy" ? "indexing policy" : "computed properties"}. Please click save to confirm the changes.
);
diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/ComputedPropertiesComponent.test.tsx b/src/Explorer/Controls/Settings/SettingsSubComponents/ComputedPropertiesComponent.test.tsx
new file mode 100644
index 000000000..811bc17ba
--- /dev/null
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/ComputedPropertiesComponent.test.tsx
@@ -0,0 +1,56 @@
+import * as DataModels from "Contracts/DataModels";
+import { shallow } from "enzyme";
+import React from "react";
+import { ComputedPropertiesComponent, ComputedPropertiesComponentProps } from "./ComputedPropertiesComponent";
+
+describe("ComputedPropertiesComponent", () => {
+ const initialComputedPropertiesContent: DataModels.ComputedProperties = [
+ {
+ name: "prop1",
+ query: "query1",
+ },
+ ];
+ const baseProps: ComputedPropertiesComponentProps = {
+ computedPropertiesContent: initialComputedPropertiesContent,
+ computedPropertiesContentBaseline: initialComputedPropertiesContent,
+ logComputedPropertiesSuccessMessage: () => {
+ return;
+ },
+ onComputedPropertiesContentChange: () => {
+ return;
+ },
+ onComputedPropertiesDirtyChange: () => {
+ return;
+ },
+ resetShouldDiscardComputedProperties: () => {
+ return;
+ },
+ shouldDiscardComputedProperties: false,
+ };
+
+ it("renders", () => {
+ const wrapper = shallow(();
+ private computedPropertiesEditor: monaco.editor.IStandaloneCodeEditor;
+
+ constructor(props: ComputedPropertiesComponentProps) {
+ super(props);
+ this.state = {
+ computedPropertiesContentIsValid: true,
+ };
+ }
+
+ componentDidUpdate(): void {
+ if (this.props.shouldDiscardComputedProperties) {
+ this.resetComputedPropertiesEditor();
+ this.props.resetShouldDiscardComputedProperties();
+ }
+ this.onComponentUpdate();
+ }
+
+ componentDidMount(): void {
+ this.resetComputedPropertiesEditor();
+ this.onComponentUpdate();
+ }
+
+ public resetComputedPropertiesEditor = (): void => {
+ if (!this.computedPropertiesEditor) {
+ this.createComputedPropertiesEditor();
+ } else {
+ const indexingPolicyEditorModel = this.computedPropertiesEditor.getModel();
+ const value: string = JSON.stringify(this.props.computedPropertiesContent, undefined, 4);
+ indexingPolicyEditorModel.setValue(value);
+ }
+ this.onComponentUpdate();
+ };
+
+ private onComponentUpdate = (): void => {
+ if (!this.shouldCheckComponentIsDirty) {
+ this.shouldCheckComponentIsDirty = true;
+ return;
+ }
+ this.props.onComputedPropertiesDirtyChange(this.IsComponentDirty());
+ this.shouldCheckComponentIsDirty = false;
+ };
+
+ public IsComponentDirty = (): boolean => {
+ if (
+ isDirty(this.props.computedPropertiesContent, this.props.computedPropertiesContentBaseline) &&
+ this.state.computedPropertiesContentIsValid
+ ) {
+ return true;
+ }
+
+ return false;
+ };
+
+ private async createComputedPropertiesEditor(): Promise {
+ const value: string = JSON.stringify(this.props.computedPropertiesContent, undefined, 4);
+ const monaco = await loadMonaco();
+ this.computedPropertiesEditor = monaco.editor.create(this.computedPropertiesDiv.current, {
+ value: value,
+ language: "json",
+ ariaLabel: "Computed properties",
+ });
+ if (this.computedPropertiesEditor) {
+ const computedPropertiesEditorModel = this.computedPropertiesEditor.getModel();
+ computedPropertiesEditorModel.onDidChangeContent(this.onEditorContentChange.bind(this));
+ this.props.logComputedPropertiesSuccessMessage();
+ }
+ }
+
+ private onEditorContentChange = (): void => {
+ const computedPropertiesEditorModel = this.computedPropertiesEditor.getModel();
+ try {
+ const newComputedPropertiesContent = JSON.parse(
+ computedPropertiesEditorModel.getValue(),
+ ) as DataModels.ComputedProperties;
+ this.props.onComputedPropertiesContentChange(newComputedPropertiesContent);
+ this.setState({ computedPropertiesContentIsValid: true });
+ } catch (e) {
+ this.setState({ computedPropertiesContentIsValid: false });
+ }
+ };
+
+ public render(): JSX.Element {
+ return (
+
+ {isDirty(this.props.computedPropertiesContent, this.props.computedPropertiesContentBaseline) && (
+
+ {unsavedEditorWarningMessage("computedProperties")}
+
+ )}
+
+
+ {"Learn more"}
+
+
+ );
+ }
+}
diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/ContainerVectorPolicyComponent.tsx b/src/Explorer/Controls/Settings/SettingsSubComponents/ContainerVectorPolicyComponent.tsx
new file mode 100644
index 000000000..ca4d63a04
--- /dev/null
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/ContainerVectorPolicyComponent.tsx
@@ -0,0 +1,30 @@
+import { Stack } from "@fluentui/react";
+import { VectorEmbeddingPolicy } from "Contracts/DataModels";
+import { EditorReact } from "Explorer/Controls/Editor/EditorReact";
+import { titleAndInputStackProps } from "Explorer/Controls/Settings/SettingsRenderUtils";
+import React from "react";
+
+export interface ContainerVectorPolicyComponentProps {
+ vectorEmbeddingPolicy: VectorEmbeddingPolicy;
+}
+
+export const ContainerVectorPolicyComponent: React.FC = ({
+ vectorEmbeddingPolicy,
+}) => {
+ return (
+
+
+ );
+};
diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyComponent.tsx b/src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyComponent.tsx
index 1f216b241..bc5de93a4 100644
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyComponent.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyComponent.tsx
@@ -3,7 +3,7 @@ import * as monaco from "monaco-editor";
import * as React from "react";
import * as DataModels from "../../../../Contracts/DataModels";
import { loadMonaco } from "../../../LazyMonaco";
-import { indexingPolicynUnsavedWarningMessage, titleAndInputStackProps } from "../SettingsRenderUtils";
+import { titleAndInputStackProps, unsavedEditorWarningMessage } from "../SettingsRenderUtils";
import { isDirty, isIndexTransforming } from "../SettingsUtils";
import { IndexingPolicyRefreshComponent } from "./IndexingPolicyRefresh/IndexingPolicyRefreshComponent";
@@ -16,6 +16,7 @@ export interface IndexingPolicyComponentProps {
logIndexingPolicySuccessMessage: () => void;
indexTransformationProgress: number;
refreshIndexTransformationProgress: () => Promise;
+ isVectorSearchEnabled?: boolean;
onIndexingPolicyDirtyChange: (isIndexingPolicyDirty: boolean) => void;
}
@@ -119,10 +120,15 @@ export class IndexingPolicyComponent extends React.Component<
indexTransformationProgress={this.props.indexTransformationProgress}
refreshIndexTransformationProgress={this.props.refreshIndexTransformationProgress}
/>
- {isDirty(this.props.indexingPolicyContent, this.props.indexingPolicyContentBaseline) && (
- {indexingPolicynUnsavedWarningMessage}
+ {this.props.isVectorSearchEnabled && (
+
+ Container vector policies and vector indexes are not modifiable after container creation
+
)}
-
+ {isDirty(this.props.indexingPolicyContent, this.props.indexingPolicyContentBaseline) && (
+ {unsavedEditorWarningMessage("indexPolicy")}
+ )}
+
);
}
diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/MongoIndexingPolicyComponent.tsx b/src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/MongoIndexingPolicyComponent.tsx
index c3b09286e..a55630532 100644
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/MongoIndexingPolicyComponent.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/MongoIndexingPolicyComponent.tsx
@@ -19,7 +19,6 @@ import {
addMongoIndexStackProps,
createAndAddMongoIndexStackProps,
customDetailsListStyles,
- indexingPolicynUnsavedWarningMessage,
infoAndToolTipTextStyle,
mediumWidthStackStyles,
mongoCompoundIndexNotSupportedMessage,
@@ -27,15 +26,16 @@ import {
onRenderRow,
separatorStyles,
subComponentStackProps,
+ unsavedEditorWarningMessage,
} from "../../SettingsRenderUtils";
import {
AddMongoIndexProps,
- getMongoIndexType,
- getMongoIndexTypeText,
- isIndexTransforming,
MongoIndexIdField,
MongoIndexTypes,
MongoNotificationType,
+ getMongoIndexType,
+ getMongoIndexTypeText,
+ isIndexTransforming,
} from "../../SettingsUtils";
import { IndexingPolicyRefreshComponent } from "../IndexingPolicyRefresh/IndexingPolicyRefreshComponent";
import { AddMongoIndexComponent } from "./AddMongoIndexComponent";
@@ -297,7 +297,7 @@ export class MongoIndexingPolicyComponent extends React.Component = ({ database, collection, explorer }) => {
+ const { dataTransferJobs } = useDataTransferJobs();
+ const [portalDataTransferJob, setPortalDataTransferJob] = React.useState(null);
+
+ React.useEffect(() => {
+ const loadDataTransferJobs = refreshDataTransferOperations;
+ loadDataTransferJobs();
+ }, []);
+
+ React.useEffect(() => {
+ const currentJob = findPortalDataTransferJob();
+ setPortalDataTransferJob(currentJob);
+ startPollingforUpdate(currentJob);
+ }, [dataTransferJobs]);
+
+ const isHierarchicalPartitionedContainer = (): boolean => collection.partitionKey?.kind === "MultiHash";
+
+ const getPartitionKeyValue = (): string => {
+ return (collection.partitionKeyProperties || []).map((property) => "/" + property).join(", ");
+ };
+
+ const partitionKeyName = "Partition key";
+ const partitionKeyValue = getPartitionKeyValue();
+
+ const textHeadingStyle = {
+ root: { fontWeight: FontWeights.semibold, fontSize: 16 },
+ };
+
+ const textSubHeadingStyle = {
+ root: { fontWeight: FontWeights.semibold },
+ };
+
+ const startPollingforUpdate = (currentJob: DataTransferJobGetResults) => {
+ if (isCurrentJobInProgress(currentJob)) {
+ const jobName = currentJob?.properties?.jobName;
+ try {
+ pollDataTransferJob(
+ jobName,
+ userContext.subscriptionId,
+ userContext.resourceGroup,
+ userContext.databaseAccount.name,
+ );
+ } catch (error) {
+ handleError(error, "ChangePartitionKey", `Failed to complete data transfer job ${jobName}`);
+ }
+ }
+ };
+
+ const cancelRunningDataTransferJob = async (currentJob: DataTransferJobGetResults) => {
+ await cancelDataTransferJob(
+ userContext.subscriptionId,
+ userContext.resourceGroup,
+ userContext.databaseAccount.name,
+ currentJob?.properties?.jobName,
+ );
+ };
+
+ const isCurrentJobInProgress = (currentJob: DataTransferJobGetResults) => {
+ const jobStatus = currentJob?.properties?.status;
+ return (
+ jobStatus &&
+ jobStatus !== "Completed" &&
+ jobStatus !== "Cancelled" &&
+ jobStatus !== "Failed" &&
+ jobStatus !== "Faulted"
+ );
+ };
+
+ const refreshDataTransferOperations = async () => {
+ await refreshDataTransferJobs(
+ userContext.subscriptionId,
+ userContext.resourceGroup,
+ userContext.databaseAccount.name,
+ );
+ };
+
+ const findPortalDataTransferJob = (): DataTransferJobGetResults => {
+ return dataTransferJobs.find((feed: DataTransferJobGetResults) => {
+ const sourceSink: CosmosSqlDataTransferDataSourceSink = feed?.properties
+ ?.source as CosmosSqlDataTransferDataSourceSink;
+ return sourceSink.databaseName === collection.databaseId && sourceSink.containerName === collection.id();
+ });
+ };
+
+ const getProgressDescription = (): string => {
+ const processedCount = portalDataTransferJob?.properties?.processedCount;
+ const totalCount = portalDataTransferJob?.properties?.totalCount;
+ const processedCountString = totalCount > 0 ? `(${processedCount} of ${totalCount} documents processed)` : "";
+ return `${portalDataTransferJob?.properties?.status} ${processedCountString}`;
+ };
+
+ const startPartitionkeyChangeWorkflow = () => {
+ useSidePanel
+ .getState()
+ .openSidePanel(
+ "Change partition key",
+
+
+ Change {partitionKeyName.toLowerCase()}
+
+
+ Current {partitionKeyName.toLowerCase()}
+ Partitioning
+
+
+ {partitionKeyValue}
+ {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.
+
+
+ {partitionKeyName} change job
+
+ cancelRunningDataTransferJob(portalDataTransferJob)} />
+ )}
+
+
+ )}
+
+ );
+};
diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.tsx b/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.tsx
index 6346e8733..664ae01c7 100644
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.tsx
@@ -306,7 +306,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
};
const costElement = (): JSX.Element => {
- const prices: PriceBreakdown = getRuPriceBreakdown(throughput, serverId, numberOfRegions, isMultimaster, true);
+ const prices: PriceBreakdown = getRuPriceBreakdown(throughput, serverId, numberOfRegions, isMultimaster, false);
return (
{newThroughput && newThroughputCostElement()}
diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/__snapshots__/ThroughputInputAutoPilotV3Component.test.tsx.snap b/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/__snapshots__/ThroughputInputAutoPilotV3Component.test.tsx.snap
index 6a0f9efd1..605732141 100644
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/__snapshots__/ThroughputInputAutoPilotV3Component.test.tsx.snap
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/__snapshots__/ThroughputInputAutoPilotV3Component.test.tsx.snap
@@ -917,7 +917,7 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
>
$
- 0.012
+ 0.0080
/hr
$
- 0.29
+ 0.19
/day
$
- 8.76
+ 5.84
/mo
@@ -1354,7 +1354,7 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
>
$
- 0.012
+ 0.0080
/hr
$
- 0.29
+ 0.19
/day
$
- 8.76
+ 5.84
/mo
diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/ComputedPropertiesComponent.test.tsx.snap b/src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/ComputedPropertiesComponent.test.tsx.snap
new file mode 100644
index 000000000..2f67d7d70
--- /dev/null
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/ComputedPropertiesComponent.test.tsx.snap
@@ -0,0 +1,36 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ComputedPropertiesComponent renders 1`] = `
+
+
+
+ Learn more
+
+
+ Â about how to define computed properties and how to use them.
+
+
+
+`;
diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/IndexingPolicyComponent.test.tsx.snap b/src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/IndexingPolicyComponent.test.tsx.snap
index 1f66324f5..93516dd7e 100644
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/IndexingPolicyComponent.test.tsx.snap
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/IndexingPolicyComponent.test.tsx.snap
@@ -12,7 +12,7 @@ exports[`IndexingPolicyComponent renders 1`] = `
refreshIndexTransformationProgress={[Function]}
/>
diff --git a/src/Explorer/Controls/Settings/SettingsUtils.tsx b/src/Explorer/Controls/Settings/SettingsUtils.tsx
index a533b6446..cff7d1f74 100644
--- a/src/Explorer/Controls/Settings/SettingsUtils.tsx
+++ b/src/Explorer/Controls/Settings/SettingsUtils.tsx
@@ -4,7 +4,7 @@ import * as ViewModels from "../../../Contracts/ViewModels";
import { MongoIndex } from "../../../Utils/arm/generatedClients/cosmos/types";
const zeroValue = 0;
-export type isDirtyTypes = boolean | string | number | DataModels.IndexingPolicy;
+export type isDirtyTypes = boolean | string | number | DataModels.IndexingPolicy | DataModels.ComputedProperties;
export const TtlOff = "off";
export const TtlOn = "on";
export const TtlOnNoDefault = "on-nodefault";
@@ -45,6 +45,9 @@ export enum SettingsV2TabTypes {
ConflictResolutionTab,
SubSettingsTab,
IndexingPolicyTab,
+ PartitionKeyTab,
+ ComputedPropertiesTab,
+ ContainerVectorPolicyTab,
}
export interface IsComponentDirtyResult {
@@ -146,6 +149,12 @@ export const getTabTitle = (tab: SettingsV2TabTypes): string => {
return "Settings";
case SettingsV2TabTypes.IndexingPolicyTab:
return "Indexing Policy";
+ case SettingsV2TabTypes.PartitionKeyTab:
+ return "Partition Keys (preview)";
+ case SettingsV2TabTypes.ComputedPropertiesTab:
+ return "Computed Properties";
+ case SettingsV2TabTypes.ContainerVectorPolicyTab:
+ return "Container Vector Policy (preview)";
default:
throw new Error(`Unknown tab ${tab}`);
}
@@ -199,3 +208,49 @@ export const getMongoIndexTypeText = (index: MongoIndexTypes): string => {
export const isIndexTransforming = (indexTransformationProgress: number): boolean =>
// index transformation progress can be 0
indexTransformationProgress !== undefined && indexTransformationProgress !== 100;
+
+export const getPartitionKeyName = (apiType: string, isLowerCase?: boolean): string => {
+ const partitionKeyName = apiType === "Mongo" ? "Shard key" : "Partition key";
+ return isLowerCase ? partitionKeyName.toLocaleLowerCase() : partitionKeyName;
+};
+
+export const getPartitionKeyTooltipText = (apiType: string): string => {
+ if (apiType === "Mongo") {
+ return "The shard key (field) is used to split your data across many replica sets (shards) to achieve unlimited scalability. It’s critical to choose a field that will evenly distribute your data.";
+ }
+ let tooltipText = `The ${getPartitionKeyName(
+ apiType,
+ true,
+ )} is used to automatically distribute data across partitions for scalability. Choose a property in your JSON document that has a wide range of values and evenly distributes request volume.`;
+ if (apiType === "SQL") {
+ tooltipText += " For small read-heavy workloads or write-heavy workloads of any size, id is often a good choice.";
+ }
+ return tooltipText;
+};
+
+export const getPartitionKeySubtext = (partitionKeyDefault: boolean, apiType: string): string => {
+ if (partitionKeyDefault && (apiType === "SQL" || apiType === "Mongo")) {
+ const subtext = "For small workloads, the item ID is a suitable choice for the partition key.";
+ return subtext;
+ }
+ return "";
+};
+
+export const getPartitionKeyPlaceHolder = (apiType: string, index?: number): string => {
+ switch (apiType) {
+ case "Mongo":
+ return "e.g., categoryId";
+ case "Gremlin":
+ return "e.g., /address";
+ case "SQL":
+ return `${
+ index === undefined
+ ? "Required - first partition key e.g., /TenantId"
+ : index === 0
+ ? "second partition key e.g., /UserId"
+ : "third partition key e.g., /SessionId"
+ }`;
+ default:
+ return "e.g., /address/zipCode";
+ }
+};
diff --git a/src/Explorer/Controls/Settings/TestUtils.tsx b/src/Explorer/Controls/Settings/TestUtils.tsx
index 41b11ca68..d0c794025 100644
--- a/src/Explorer/Controls/Settings/TestUtils.tsx
+++ b/src/Explorer/Controls/Settings/TestUtils.tsx
@@ -40,6 +40,12 @@ export const collection = {
version: 2,
},
partitionKeyProperties: ["partitionKey"],
+ computedProperties: ko.observable([
+ {
+ name: "queryName",
+ query: "query",
+ },
+ ]),
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 5e905e786..561368bdd 100644
--- a/src/Explorer/Controls/Settings/__snapshots__/SettingsComponent.test.tsx.snap
+++ b/src/Explorer/Controls/Settings/__snapshots__/SettingsComponent.test.tsx.snap
@@ -26,10 +26,10 @@ exports[`SettingsComponent renders 1`] = `
Object {
"analyticalStorageTtl": [Function],
"changeFeedPolicy": [Function],
+ "computedProperties": [Function],
"conflictResolutionPolicy": [Function],
"container": Explorer {
"_isInitializingNotebooks": false,
- "_resetNotebookWorkspace": [Function],
"isFixedCollectionWithSharedThroughputSupported": [Function],
"isTabsContentExpanded": [Function],
"onRefreshDatabasesKeyPress": [Function],
@@ -103,10 +103,10 @@ exports[`SettingsComponent renders 1`] = `
Object {
"analyticalStorageTtl": [Function],
"changeFeedPolicy": [Function],
+ "computedProperties": [Function],
"conflictResolutionPolicy": [Function],
"container": Explorer {
"_isInitializingNotebooks": false,
- "_resetNotebookWorkspace": [Function],
"isFixedCollectionWithSharedThroughputSupported": [Function],
"isTabsContentExpanded": [Function],
"onRefreshDatabasesKeyPress": [Function],
@@ -196,6 +196,7 @@ exports[`SettingsComponent renders 1`] = `
"indexingMode": "consistent",
}
}
+ isVectorSearchEnabled={false}
logIndexingPolicySuccessMessage={[Function]}
onIndexingPolicyContentChange={[Function]}
onIndexingPolicyDirtyChange={[Function]}
@@ -204,6 +205,131 @@ exports[`SettingsComponent renders 1`] = `
shouldDiscardIndexingPolicy={false}
/>
+
+
+
+
diff --git a/src/Explorer/Controls/Settings/__snapshots__/SettingsRenderUtils.test.tsx.snap b/src/Explorer/Controls/Settings/__snapshots__/SettingsRenderUtils.test.tsx.snap
index 004862ffe..5a71353cd 100644
--- a/src/Explorer/Controls/Settings/__snapshots__/SettingsRenderUtils.test.tsx.snap
+++ b/src/Explorer/Controls/Settings/__snapshots__/SettingsRenderUtils.test.tsx.snap
@@ -99,18 +99,6 @@ exports[`SettingsUtils functions render 1`] = `
.
-
-
);
}
}
/* Tree node is a react component */
-interface TreeNodeComponentProps {
- node: TreeNode;
+interface LegacyTreeNodeComponentProps {
+ node: LegacyTreeNode;
generation: number;
paddingLeft: number;
}
-interface TreeNodeComponentState {
+interface LegacyTreeNodeComponentState {
isExpanded: boolean;
isMenuShowing: boolean;
}
-export class TreeNodeComponent extends React.Component
{this.renderCollapseExpandIcon(node)}
{node.iconSrc && 
}
@@ -195,10 +192,13 @@ export class TreeNodeComponent extends React.Component
{node.children && (
-
- {TreeNodeComponent.getSortedChildren(node).map((childNode: TreeNode) => (
- (
+
- previous || (child.isSelected && child.isSelected()) || TreeNodeComponent.isAnyDescendantSelected(child),
+ (previous: boolean, child: LegacyTreeNode) =>
+ previous ||
+ (child.isSelected && child.isSelected()) ||
+ LegacyTreeNodeComponent.isAnyDescendantSelected(child),
false,
)
);
@@ -232,10 +234,10 @@ export class TreeNodeComponent extends React.Component {
- this.contextMenuRef.current.firstChild.dispatchEvent(TreeNodeComponent.createClickEvent());
+ this.contextMenuRef.current.firstChild.dispatchEvent(LegacyTreeNodeComponent.createClickEvent());
};
- private renderContextMenuButton(node: TreeNode): JSX.Element {
+ private renderContextMenuButton(node: LegacyTreeNode): JSX.Element {
const menuItemLabel = "More";
const buttonStyles: Partial = {
rootFocused: { outline: `1px dashed ${StyleConstants.FocusColor}` },
@@ -247,7 +249,7 @@ export class TreeNodeComponent extends React.Component this.setState({ isMenuShowing: false }),
contextualMenuItemAs: (props: IContextualMenuItemProps) => (
e.target.dispatchEvent(TreeNodeComponent.createClickEvent())}
+ onContextMenu={(e) => e.target.dispatchEvent(LegacyTreeNodeComponent.createClickEvent())}
>
{props.item.onRenderIcon()}
;
}
@@ -314,12 +316,12 @@ export class TreeNodeComponent extends React.Component, node: TreeNode): void => {
+ private onNodeClick = (event: React.MouseEvent, node: LegacyTreeNode): void => {
event.stopPropagation();
if (node.children) {
const isExpanded = !this.state.isExpanded;
// Prevent collapsing if node header is blank
- if (!(TreeNodeComponent.isNodeHeaderBlank(node) && !isExpanded)) {
+ if (!(LegacyTreeNodeComponent.isNodeHeaderBlank(node) && !isExpanded)) {
this.setState({ isExpanded });
}
}
@@ -327,14 +329,14 @@ export class TreeNodeComponent extends React.Component, node: TreeNode): void => {
+ private onNodeKeyPress = (event: React.KeyboardEvent, node: LegacyTreeNode): void => {
if (event.charCode === Constants.KeyCodes.Space || event.charCode === Constants.KeyCodes.Enter) {
event.stopPropagation();
this.props.node.onClick && this.props.node.onClick(this.state.isExpanded);
}
};
- private onCollapseExpandIconKeyPress = (event: React.KeyboardEvent, node: TreeNode): void => {
+ private onCollapseExpandIconKeyPress = (event: React.KeyboardEvent, node: LegacyTreeNode): void => {
if (event.charCode === Constants.KeyCodes.Space || event.charCode === Constants.KeyCodes.Enter) {
event.stopPropagation();
if (node.children) {
diff --git a/src/Explorer/Controls/TreeComponent/TreeNodeComponent.test.tsx b/src/Explorer/Controls/TreeComponent/TreeNodeComponent.test.tsx
new file mode 100644
index 000000000..e0cdf5700
--- /dev/null
+++ b/src/Explorer/Controls/TreeComponent/TreeNodeComponent.test.tsx
@@ -0,0 +1,194 @@
+import { TreeItem, TreeItemLayout, tokens } from "@fluentui/react-components";
+import PromiseSource from "Utils/PromiseSource";
+import { mount, shallow } from "enzyme";
+import React from "react";
+import { act } from "react-dom/test-utils";
+import { TreeNode, TreeNodeComponent } from "./TreeNodeComponent";
+
+function generateTestNode(id: string, additionalProps?: Partial): TreeNode {
+ const node: TreeNode = {
+ id,
+ label: `${id}Label`,
+ className: `${id}Class`,
+ iconSrc: `${id}Icon`,
+ onClick: jest.fn().mockName(`${id}Click`),
+ ...additionalProps,
+ };
+ return node;
+}
+
+describe("TreeNodeComponent", () => {
+ it("renders a single node", () => {
+ const node = generateTestNode("root");
+ const component = shallow(;
+ onCollapsed?: () => void;
+ onContextMenuOpen?: () => void;
+}
+
+export interface TreeNodeComponentProps {
+ node: TreeNode;
+ className?: string;
+ treeNodeId: string;
+}
+
+/** Function that returns true if any descendant (at any depth) of this node is selected. */
+function isAnyDescendantSelected(node: TreeNode): boolean {
+ return (
+ node.children &&
+ node.children.reduce(
+ (previous: boolean, child: TreeNode) =>
+ previous || (child.isSelected && child.isSelected()) || isAnyDescendantSelected(child),
+ false,
+ )
+ );
+}
+
+const getTreeIcon = (iconSrc: string): JSX.Element => 
;
+
+export const TreeNodeComponent: React.FC = ({
+ node,
+ treeNodeId,
+}: TreeNodeComponentProps): JSX.Element => {
+ const [isLoading, setIsLoading] = React.useState(false);
+
+ const getSortedChildren = (treeNode: TreeNode): TreeNode[] => {
+ if (!treeNode || !treeNode.children) {
+ return undefined;
+ }
+
+ const compareFct = (a: TreeNode, b: TreeNode) => a.label.localeCompare(b.label);
+
+ let unsortedChildren;
+ if (treeNode.isLeavesParentsSeparate) {
+ // Separate parents and leave
+ const parents: TreeNode[] = treeNode.children.filter((node) => node.children);
+ const leaves: TreeNode[] = treeNode.children.filter((node) => !node.children);
+
+ if (treeNode.isAlphaSorted) {
+ parents.sort(compareFct);
+ leaves.sort(compareFct);
+ }
+
+ unsortedChildren = parents.concat(leaves);
+ } else {
+ unsortedChildren = treeNode.isAlphaSorted ? treeNode.children.sort(compareFct) : treeNode.children;
+ }
+
+ return unsortedChildren;
+ };
+
+ // A branch node is any node with a defined children array, even if the array is empty.
+ const isBranch = !!node.children;
+
+ const onOpenChange = useCallback(
+ (_: TreeOpenChangeEvent, data: TreeOpenChangeData) => {
+ if (data.type === "Click" && !isBranch && node.onClick) {
+ node.onClick();
+ }
+ if (!node.isExpanded && data.open && node.onExpanded) {
+ // Catch the transition non-expanded to expanded
+ setIsLoading(true);
+ node.onExpanded?.().then(() => setIsLoading(false));
+ } else if (node.isExpanded && !data.open && node.onCollapsed) {
+ // Catch the transition expanded to non-expanded
+ node.onCollapsed?.();
+ }
+ },
+ [isBranch, node, setIsLoading],
+ );
+
+ const onMenuOpenChange = useCallback(
+ (e: MenuOpenEvent, data: MenuOpenChangeData) => {
+ if (data.open) {
+ node.onContextMenuOpen?.();
+ }
+ },
+ [node],
+ );
+
+ // We show a node as selected if it is selected AND no descendant is selected.
+ // We want to show only the deepest selected node as selected.
+ const isCurrentNodeSelected = node.isSelected && node.isSelected();
+ const shouldShowAsSelected = isCurrentNodeSelected && !isAnyDescendantSelected(node);
+
+ const contextMenuItems = (node.contextMenu ?? []).map((menuItem) => (
+
+ ));
+
+ const treeItem = (
+
+ 0 && (
+
+ )
+ }
+ expandIcon={isLoading ?
+ {!node.isLoading && node.children?.length > 0 && (
+
+ {getSortedChildren(node).map((childNode: TreeNode) => (
+
+ )}
+
+ );
+
+ if (contextMenuItems.length === 0) {
+ return treeItem;
+ }
+
+ // For accessibility, it's highly recommended that any 'actions' also be available in the context menu.
+ // See https://react.fluentui.dev/?path=/docs/components-tree--default#actions
+ return (
+
+ );
+};
diff --git a/src/Explorer/Controls/TreeComponent/__snapshots__/TreeComponent.test.tsx.snap b/src/Explorer/Controls/TreeComponent/__snapshots__/LegacyTreeComponent.test.tsx.snap
similarity index 91%
rename from src/Explorer/Controls/TreeComponent/__snapshots__/TreeComponent.test.tsx.snap
rename to src/Explorer/Controls/TreeComponent/__snapshots__/LegacyTreeComponent.test.tsx.snap
index f85616372..ef0420f81 100644
--- a/src/Explorer/Controls/TreeComponent/__snapshots__/TreeComponent.test.tsx.snap
+++ b/src/Explorer/Controls/TreeComponent/__snapshots__/LegacyTreeComponent.test.tsx.snap
@@ -1,11 +1,11 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`TreeComponent renders a simple tree 1`] = `
+exports[`LegacyTreeComponent renders a simple tree 1`] = `
-
`;
-exports[`TreeNodeComponent does not render children by default 1`] = `
+exports[`LegacyTreeNodeComponent does not render children by default 1`] = `
-
`;
-exports[`TreeNodeComponent renders a simple node (sorted children, expanded) 1`] = `
+exports[`LegacyTreeNodeComponent renders a simple node (sorted children, expanded) 1`] = `
-
`;
-exports[`TreeNodeComponent renders loading icon 1`] = `
+exports[`LegacyTreeNodeComponent renders loading icon 1`] = `
diff --git a/src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx b/src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx
index 191a91c62..9a5f222a3 100644
--- a/src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx
+++ b/src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx
@@ -5,6 +5,7 @@
*/
import { CommandBar as FluentCommandBar, ICommandBarItemProps } from "@fluentui/react";
import { useNotebook } from "Explorer/Notebook/useNotebook";
+import { KeyboardActionGroup, useKeyboardActionGroup } from "KeyboardShortcuts";
import { userContext } from "UserContext";
import * as React from "react";
import create, { UseStore } from "zustand";
@@ -24,17 +25,23 @@ interface Props {
export interface CommandBarStore {
contextButtons: CommandButtonComponentProps[];
setContextButtons: (contextButtons: CommandButtonComponentProps[]) => void;
+ isHidden: boolean;
+ setIsHidden: (isHidden: boolean) => void;
}
export const useCommandBar: UseStore = create((set) => ({
contextButtons: [],
setContextButtons: (contextButtons: CommandButtonComponentProps[]) => set((state) => ({ ...state, contextButtons })),
+ isHidden: false,
+ setIsHidden: (isHidden: boolean) => set((state) => ({ ...state, isHidden })),
}));
export const CommandBar: React.FC = ({ container }: Props) => {
const selectedNodeState = useSelectedNode();
const buttons = useCommandBar((state) => state.contextButtons);
+ const isHidden = useCommandBar((state) => state.isHidden);
const backgroundColor = StyleConstants.BaseLight;
+ const setKeyboardHandlers = useKeyboardActionGroup(KeyboardActionGroup.COMMAND_BAR);
if (userContext.apiType === "Postgres" || userContext.apiType === "VCoreMongo") {
const buttons =
@@ -42,7 +49,7 @@ export const CommandBar: React.FC = ({ container }: Props) => {
? CommandBarComponentButtonFactory.createPostgreButtons(container)
: CommandBarComponentButtonFactory.createVCoreMongoButtons(container);
return (
-
`;
-exports[`TreeNodeComponent renders sorted children, expanded, leaves and parents separated 1`] = `
+exports[`LegacyTreeNodeComponent renders sorted children, expanded, leaves and parents separated 1`] = `
-
`;
-exports[`TreeNodeComponent renders unsorted children by default 1`] = `
+exports[`LegacyTreeNodeComponent renders unsorted children by default 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`TreeNodeComponent renders a loading spinner if the node is loading: loaded 1`] = `
+
+
+`;
+
+exports[`TreeNodeComponent renders a loading spinner if the node is loading: loading 1`] = `
+
+ 
+ }
+ style={
+ Object {
+ "backgroundColor": undefined,
+ }
+ }
+ >
+ rootLabel
+
+
+`;
+
+exports[`TreeNodeComponent renders a node as expandable if it has empty, but defined, children array 1`] = `
+
+
+`;
+
+exports[`TreeNodeComponent renders a node with a menu 1`] = `
+
+ }
+ className="rootClass"
+ data-test="TreeNode:root"
+ iconBefore={
+
+ }
+ style={
+ Object {
+ "backgroundColor": undefined,
+ }
+ }
+ >
+ rootLabel
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`TreeNodeComponent renders a single node 1`] = `
+
+
+`;
+
+exports[`TreeNodeComponent renders an icon if the node has one 1`] = `
+
+
+`;
+
+exports[`TreeNodeComponent renders selected parent node as selected if no descendant nodes are selected 1`] = `
+
+
+
+
+`;
+
+exports[`TreeNodeComponent renders selected parent node as unselected if any descendant node is selected 1`] = `
+
+
+
+
+`;
+
+exports[`TreeNodeComponent renders single selected leaf node as selected 1`] = `
+
+
+`;
diff --git a/src/Explorer/Controls/TreeComponent2/TreeNode2Component.tsx b/src/Explorer/Controls/TreeComponent2/TreeNode2Component.tsx
deleted file mode 100644
index 14c66db12..000000000
--- a/src/Explorer/Controls/TreeComponent2/TreeNode2Component.tsx
+++ /dev/null
@@ -1,147 +0,0 @@
-import {
- Button,
- Menu,
- MenuItem,
- MenuList,
- MenuPopover,
- MenuTrigger,
- Spinner,
- Tree,
- TreeItem,
- TreeItemLayout,
- TreeOpenChangeData,
- TreeOpenChangeEvent,
-} from "@fluentui/react-components";
-import { MoreHorizontal20Regular } from "@fluentui/react-icons";
-import { tokens } from "@fluentui/react-theme";
-import * as React from "react";
-
-export interface TreeNode2MenuItem {
- label: string;
- onClick: () => void;
- iconSrc?: string;
- isDisabled?: boolean;
- styleClass?: string;
-}
-
-export interface TreeNode2 {
- label: string;
- id?: string;
- children?: TreeNode2[];
- contextMenu?: TreeNode2MenuItem[];
- iconSrc?: string;
- isExpanded?: boolean;
- className?: string;
- isAlphaSorted?: boolean;
- // data?: any; // Piece of data corresponding to this node
- timestamp?: number;
- isLeavesParentsSeparate?: boolean; // Display parents together first, then leaves
- isLoading?: boolean;
- isScrollable?: boolean;
- isSelected?: () => boolean;
- onClick?: () => void; // Only if a leaf, other click will expand/collapse
- onExpanded?: () => Promise;
- onCollapsed?: () => void;
- onContextMenuOpen?: () => void;
-}
-
-export interface TreeNode2ComponentProps {
- node: TreeNode2;
- className?: string;
- treeNodeId: string;
-}
-
-const getTreeIcon = (iconSrc: string): JSX.Element => ;
-
-export const TreeNode2Component: React.FC = ({
- node,
- treeNodeId,
-}: TreeNode2ComponentProps): JSX.Element => {
- const [isLoading, setIsLoading] = React.useState(false);
-
- const getSortedChildren = (treeNode: TreeNode2): TreeNode2[] => {
- if (!treeNode || !treeNode.children) {
- return undefined;
- }
-
- const compareFct = (a: TreeNode2, b: TreeNode2) => a.label.localeCompare(b.label);
-
- let unsortedChildren;
- if (treeNode.isLeavesParentsSeparate) {
- // Separate parents and leave
- const parents: TreeNode2[] = treeNode.children.filter((node) => node.children);
- const leaves: TreeNode2[] = treeNode.children.filter((node) => !node.children);
-
- if (treeNode.isAlphaSorted) {
- parents.sort(compareFct);
- leaves.sort(compareFct);
- }
-
- unsortedChildren = parents.concat(leaves);
- } else {
- unsortedChildren = treeNode.isAlphaSorted ? treeNode.children.sort(compareFct) : treeNode.children;
- }
-
- return unsortedChildren;
- };
-
- const onOpenChange = (_: TreeOpenChangeEvent, data: TreeOpenChangeData) => {
- if (!node.isExpanded && data.open && node.onExpanded) {
- // Catch the transition non-expanded to expanded
- setIsLoading(true);
- node.onExpanded?.().then(() => setIsLoading(false));
- } else if (node.isExpanded && !data.open && node.onCollapsed) {
- // Catch the transition expanded to non-expanded
- node.onCollapsed?.();
- }
- };
-
- return (
-
-
-
- } />
-
-
-
- {node.contextMenu.map((menuItem) => (
-
- ))}
-
-
-
- )
- }
- expandIcon={isLoading ?
- {!node.isLoading && node.children?.length > 0 && (
-
- {getSortedChildren(node).map((childNode: TreeNode2) => (
-
- )}
-
- );
-};
diff --git a/src/Explorer/Explorer.tsx b/src/Explorer/Explorer.tsx
index f159c6ac1..bb198e6c3 100644
--- a/src/Explorer/Explorer.tsx
+++ b/src/Explorer/Explorer.tsx
@@ -3,10 +3,11 @@ import { isPublicInternetAccessAllowed } from "Common/DatabaseAccountUtility";
import { sendMessage } from "Common/MessageHandler";
import { Platform, configContext } from "ConfigContext";
import { MessageTypes } from "Contracts/ExplorerContracts";
-import { getCopilotEnabled } from "Explorer/QueryCopilot/Shared/QueryCopilotClient";
+import { getCopilotEnabled, isCopilotFeatureRegistered } from "Explorer/QueryCopilot/Shared/QueryCopilotClient";
import { IGalleryItem } from "Juno/JunoClient";
-import { requestDatabaseResourceTokens } from "Platform/Fabric/FabricUtil";
-import { allowedNotebookServerUrls, validateEndpoint } from "Utils/EndpointValidation";
+import { scheduleRefreshDatabaseResourceToken } from "Platform/Fabric/FabricUtil";
+import { LocalStorageUtility, StorageKey } from "Shared/StorageUtility";
+import { allowedNotebookServerUrls, validateEndpoint } from "Utils/EndpointUtils";
import { useQueryCopilot } from "hooks/useQueryCopilot";
import * as ko from "knockout";
import React from "react";
@@ -37,7 +38,6 @@ import { fromContentUri, toRawContentUri } from "../Utils/GitHubUtils";
import * as NotificationConsoleUtils from "../Utils/NotificationConsoleUtils";
import { logConsoleError, logConsoleInfo, logConsoleProgress } from "../Utils/NotificationConsoleUtils";
import { update } from "../Utils/arm/generatedClients/cosmos/databaseAccounts";
-import { listByDatabaseAccount } from "../Utils/arm/generatedClients/cosmosNotebooks/notebookWorkspaces";
import { useSidePanel } from "../hooks/useSidePanel";
import { useTabs } from "../hooks/useTabs";
import "./ComponentRegisterer";
@@ -55,7 +55,6 @@ import { AddCollectionPanel } from "./Panes/AddCollectionPanel";
import { CassandraAddCollectionPane } from "./Panes/CassandraAddCollectionPane/CassandraAddCollectionPane";
import { ExecuteSprocParamsPane } from "./Panes/ExecuteSprocParamsPane/ExecuteSprocParamsPane";
import { StringInputPane } from "./Panes/StringInputPane/StringInputPane";
-import { UploadFilePane } from "./Panes/UploadFilePane/UploadFilePane";
import { UploadItemsPane } from "./Panes/UploadItemsPane/UploadItemsPane";
import { CassandraAPIDataClient, TableDataClient, TablesAPIDataClient } from "./Tables/TableDataClient";
import NotebookV2Tab, { NotebookTabOptions } from "./Tabs/NotebookV2Tab";
@@ -137,14 +136,6 @@ export default class Explorer {
this.isTabsContentExpanded = ko.observable(false);
- document.addEventListener(
- "contextmenu",
- (e) => {
- e.preventDefault();
- },
- false,
- );
-
$(() => {
$(document.body).click(() => $(".commandDropdownContainer").hide());
});
@@ -264,61 +255,43 @@ export default class Explorer {
// TODO: return result
}
- private getRandomInt(max: number) {
- return Math.floor(Math.random() * max);
- }
-
public openNPSSurveyDialog(): void {
if (!Platform.Portal) {
return;
}
- const NINETY_DAYS_IN_MS = 7776000000;
const ONE_DAY_IN_MS = 86400000;
- const THREE_DAYS_IN_MS = 259200000;
- const isAccountNewerThanNinetyDays = isAccountNewerThanThresholdInMs(
- userContext.databaseAccount?.systemData?.createdAt || "",
- NINETY_DAYS_IN_MS,
- );
- const lastSubmitted: string = localStorage.getItem("lastSubmitted");
-
- if (lastSubmitted !== null) {
- let lastSubmittedDate: number = parseInt(lastSubmitted);
- if (isNaN(lastSubmittedDate)) {
- lastSubmittedDate = 0;
- }
-
- const nowMs: number = Date.now();
- const millisecsSinceLastSubmitted = nowMs - lastSubmittedDate;
- if (millisecsSinceLastSubmitted < NINETY_DAYS_IN_MS) {
- return;
- }
- }
+ const SEVEN_DAYS_IN_MS = 604800000;
// Try Cosmos DB subscription - survey shown to 100% of users at day 1 in Data Explorer.
if (userContext.isTryCosmosDBSubscription) {
if (isAccountNewerThanThresholdInMs(userContext.databaseAccount?.systemData?.createdAt || "", ONE_DAY_IN_MS)) {
- this.sendNPSMessage();
+ Logger.logInfo(
+ `Sending message to Portal to check if NPS Survey can be displayed in Try Cosmos DB ${userContext.apiType}`,
+ "Explorer/openNPSSurveyDialog",
+ );
+ sendMessage({ type: MessageTypes.DisplayNPSSurvey });
}
} else {
- // An existing account is older than 3 days but less than 90 days old. For existing account show to 100% of users in Data Explorer.
+ // Show survey when an existing account is older than 7 days
if (
- !isAccountNewerThanThresholdInMs(userContext.databaseAccount?.systemData?.createdAt || "", THREE_DAYS_IN_MS) &&
- isAccountNewerThanNinetyDays
+ !isAccountNewerThanThresholdInMs(userContext.databaseAccount?.systemData?.createdAt || "", SEVEN_DAYS_IN_MS)
) {
- this.sendNPSMessage();
- } else {
- // An existing account is greater than 90 days. For existing account show to random 33% of users in Data Explorer.
- if (this.getRandomInt(100) < 33) {
- this.sendNPSMessage();
- }
+ Logger.logInfo(
+ `Sending message to Portal to check if NPS Survey can be displayed for existing ${userContext.apiType} account older than 7 days`,
+ "Explorer/openNPSSurveyDialog",
+ );
+ sendMessage({ type: MessageTypes.DisplayNPSSurvey });
}
}
}
- private sendNPSMessage() {
- sendMessage({ type: MessageTypes.DisplayNPSSurvey });
- localStorage.setItem("lastSubmitted", Date.now().toString());
+ public async openCESCVAFeedbackBlade(): Promise {
+ sendMessage({ type: MessageTypes.OpenCESCVAFeedbackBlade });
+ Logger.logInfo(
+ `CES CVA Feedback logging current date when survey is shown ${Date.now().toString()}`,
+ "Explorer/openCESCVAFeedbackBlade",
+ );
}
public async refreshDatabaseForResourceToken(): Promise {
@@ -383,9 +356,7 @@ export default class Explorer {
public onRefreshResourcesClick = (): void => {
if (configContext.platform === Platform.Fabric) {
- // Requesting the tokens will trigger a refresh of the databases
- // TODO: Once the id is returned from Fabric, we can await this call and then refresh the databases here
- requestDatabaseResourceTokens();
+ scheduleRefreshDatabaseResourceToken(true).then(() => this.refreshAllDatabases());
return;
}
@@ -529,104 +500,6 @@ export default class Explorer {
.then((memoryUsageInfo) => useNotebook.getState().setMemoryUsageInfo(memoryUsageInfo));
}
- public resetNotebookWorkspace(): void {
- if (!useNotebook.getState().isNotebookEnabled || !this.notebookManager?.notebookClient) {
- handleError(
- "Attempt to reset notebook workspace, but notebook is not enabled",
- "Explorer/resetNotebookWorkspace",
- );
- return;
- }
- const dialogContent = useNotebook.getState().isPhoenixNotebooks
- ? "Notebooks saved in the temporary workspace will be deleted. Do you want to proceed?"
- : "This lets you keep your notebook files and the workspace will be restored to default. Proceed anyway?";
-
- const resetConfirmationDialogProps: DialogProps = {
- isModal: true,
- title: "Reset Workspace",
- subText: dialogContent,
- primaryButtonText: "OK",
- secondaryButtonText: "Cancel",
- onPrimaryButtonClick: this._resetNotebookWorkspace,
- onSecondaryButtonClick: () => useDialog.getState().closeDialog(),
- };
- useDialog.getState().openDialog(resetConfirmationDialogProps);
- }
-
- private async _containsDefaultNotebookWorkspace(databaseAccount: DataModels.DatabaseAccount): Promise {
- if (!databaseAccount) {
- return false;
- }
- try {
- const { value: workspaces } = await listByDatabaseAccount(
- userContext.subscriptionId,
- userContext.resourceGroup,
- userContext.databaseAccount.name,
- );
- return workspaces && workspaces.length > 0 && workspaces.some((workspace) => workspace.name === "default");
- } catch (error) {
- Logger.logError(getErrorMessage(error), "Explorer/_containsDefaultNotebookWorkspace");
- return false;
- }
- }
-
- private _resetNotebookWorkspace = async () => {
- useDialog.getState().closeDialog();
- const clearInProgressMessage = logConsoleProgress("Resetting notebook workspace");
- let connectionStatus: ContainerConnectionInfo;
- try {
- const notebookServerInfo = useNotebook.getState().notebookServerInfo;
- if (!notebookServerInfo || !notebookServerInfo.notebookServerEndpoint) {
- const error = "No server endpoint detected";
- Logger.logError(error, "NotebookContainerClient/resetWorkspace");
- logConsoleError(error);
- return;
- }
- TelemetryProcessor.traceStart(Action.PhoenixResetWorkspace, {
- dataExplorerArea: Areas.Notebook,
- });
- if (useNotebook.getState().isPhoenixNotebooks) {
- useTabs.getState().closeAllNotebookTabs(true);
- connectionStatus = {
- status: ConnectionStatusType.Connecting,
- };
- useNotebook.getState().setConnectionInfo(connectionStatus);
- }
- const connectionInfo = await this.notebookManager?.notebookClient.resetWorkspace();
- if (connectionInfo?.status !== HttpStatusCodes.OK) {
- throw new Error(`Reset Workspace: Received status code- ${connectionInfo?.status}`);
- }
- if (!connectionInfo?.data?.phoenixServiceUrl) {
- throw new Error(`Reset Workspace: PhoenixServiceUrl is invalid!`);
- }
- if (useNotebook.getState().isPhoenixNotebooks) {
- await this.setNotebookInfo(true, connectionInfo, connectionStatus);
- useNotebook.getState().setIsRefreshed(!useNotebook.getState().isRefreshed);
- }
- logConsoleInfo("Successfully reset notebook workspace");
- TelemetryProcessor.traceSuccess(Action.PhoenixResetWorkspace, {
- dataExplorerArea: Areas.Notebook,
- });
- } catch (error) {
- logConsoleError(`Failed to reset notebook workspace: ${error}`);
- TelemetryProcessor.traceFailure(Action.PhoenixResetWorkspace, {
- dataExplorerArea: Areas.Notebook,
- error: getErrorMessage(error),
- errorStack: getErrorStack(error),
- });
- if (useNotebook.getState().isPhoenixNotebooks) {
- connectionStatus = {
- status: ConnectionStatusType.Failed,
- };
- useNotebook.getState().resetContainerConnection(connectionStatus);
- useNotebook.getState().setIsRefreshed(!useNotebook.getState().isRefreshed);
- }
- throw error;
- } finally {
- clearInProgressMessage();
- }
- };
-
private getDeltaDatabases(
updatedDatabaseList: DataModels.Database[],
databases: ViewModels.Database[],
@@ -1029,92 +902,6 @@ export default class Explorer {
);
}
- /**
- * This creates a new notebook file, then opens the notebook
- */
- public async onNewNotebookClicked(parent?: NotebookContentItem, isGithubTree?: boolean): Promise {
- if (!useNotebook.getState().isNotebookEnabled || !this.notebookManager?.notebookContentClient) {
- const error = "Attempt to create new notebook, but notebook is not enabled";
- handleError(error, "Explorer/onNewNotebookClicked");
- throw new Error(error);
- }
- if (useNotebook.getState().isPhoenixNotebooks) {
- if (isGithubTree) {
- await this.allocateContainer(PoolIdType.DefaultPoolId);
- parent = parent || this.resourceTree.myNotebooksContentRoot;
- this.createNewNoteBook(parent, isGithubTree);
- } else {
- useDialog.getState().showOkCancelModalDialog(
- Notebook.newNotebookModalTitle,
- undefined,
- "Create",
- async () => {
- await this.allocateContainer(PoolIdType.DefaultPoolId);
- parent = parent || this.resourceTree.myNotebooksContentRoot;
- this.createNewNoteBook(parent, isGithubTree);
- },
- "Cancel",
- undefined,
- this.getNewNoteWarningText(),
- );
- }
- } else {
- parent = parent || this.resourceTree.myNotebooksContentRoot;
- this.createNewNoteBook(parent, isGithubTree);
- }
- }
-
- private getNewNoteWarningText(): JSX.Element {
- return (
- <>
-
- {
if (!useNotebook.getState().isNotebookEnabled || !this.notebookManager?.notebookContentClient) {
@@ -1149,10 +936,6 @@ export default class Explorer {
let title: string;
switch (kind) {
- case ViewModels.TerminalKind.Default:
- title = "Terminal";
- break;
-
case ViewModels.TerminalKind.Mongo:
title = "Mongo Shell";
break;
@@ -1306,36 +1089,6 @@ export default class Explorer {
.openSidePanel("Input parameters", this.uploadFile(name, content, parent)} />,
- );
- }
-
public getDownloadModalConent(fileName: string): JSX.Element {
if (useNotebook.getState().isPhoenixNotebooks) {
return (
@@ -1389,27 +1142,40 @@ export default class Explorer {
if (userContext.apiType !== "SQL" || !userContext.subscriptionId) {
return;
}
- const copilotEnabled = await getCopilotEnabled();
- useQueryCopilot.getState().setCopilotEnabled(copilotEnabled);
- useQueryCopilot.getState().setCopilotUserDBEnabled(copilotEnabled);
+ const copilotEnabledPromise = getCopilotEnabled();
+ const copilotUserDBEnabledPromise = isCopilotFeatureRegistered(userContext.subscriptionId);
+ const [copilotEnabled, copilotUserDBEnabled] = await Promise.all([
+ copilotEnabledPromise,
+ copilotUserDBEnabledPromise,
+ ]);
+ const copilotSampleDBEnabled = LocalStorageUtility.getEntryString(StorageKey.CopilotSampleDBEnabled) === "true";
+ useQueryCopilot.getState().setCopilotEnabled(copilotEnabled && copilotUserDBEnabled);
+ useQueryCopilot.getState().setCopilotUserDBEnabled(copilotUserDBEnabled);
+ useQueryCopilot
+ .getState()
+ .setCopilotSampleDBEnabled(copilotEnabled && copilotUserDBEnabled && copilotSampleDBEnabled);
}
public async refreshSampleData(): Promise {
- if (!userContext.sampleDataConnectionInfo) {
+ try {
+ if (!userContext.sampleDataConnectionInfo) {
+ return;
+ }
+ const collection: DataModels.Collection = await readSampleCollection();
+ if (!collection) {
+ return;
+ }
+
+ const databaseId = userContext.sampleDataConnectionInfo?.databaseId;
+ if (!databaseId) {
+ return;
+ }
+
+ const sampleDataResourceTokenCollection = new ResourceTokenCollection(this, databaseId, collection, true);
+ useDatabases.setState({ sampleDataResourceTokenCollection });
+ } catch (error) {
+ Logger.logError(getErrorMessage(error), "Explorer");
return;
}
-
- const collection: DataModels.Collection = await readSampleCollection();
- if (!collection) {
- return;
- }
-
- const databaseId = userContext.sampleDataConnectionInfo?.databaseId;
- if (!databaseId) {
- return;
- }
-
- const sampleDataResourceTokenCollection = new ResourceTokenCollection(this, databaseId, collection, true);
- useDatabases.setState({ sampleDataResourceTokenCollection });
}
}
diff --git a/src/Explorer/Graph/GraphExplorerComponent/GraphUtil.ts b/src/Explorer/Graph/GraphExplorerComponent/GraphUtil.ts
index 3be076000..c16e9aa30 100644
--- a/src/Explorer/Graph/GraphExplorerComponent/GraphUtil.ts
+++ b/src/Explorer/Graph/GraphExplorerComponent/GraphUtil.ts
@@ -162,7 +162,7 @@ export const addRootChildToGraph = (
* @param value
*/
export const escapeDoubleQuotes = (value: string): string => {
- return value === undefined ? value : value.replace(/"/g, '\\"');
+ return value === undefined ? value : value.replace(/\\/g, "\\\\").replace(/"/g, '\\"');
};
/**
@@ -186,5 +186,5 @@ export const getQuotedPropValue = (ip: ViewModels.InputPropertyValue): string =>
* @param value
*/
export const escapeSingleQuotes = (value: string): string => {
- return value === undefined ? value : value.replace(/'/g, "\\'");
+ return value === undefined ? value : value.replace(/\\/g, "\\\\").replace(/'/g, "\\'");
};
diff --git a/src/Explorer/Graph/GraphExplorerComponent/NodePropertiesComponent.tsx b/src/Explorer/Graph/GraphExplorerComponent/NodePropertiesComponent.tsx
index 6b0472649..f67425696 100644
--- a/src/Explorer/Graph/GraphExplorerComponent/NodePropertiesComponent.tsx
+++ b/src/Explorer/Graph/GraphExplorerComponent/NodePropertiesComponent.tsx
@@ -349,7 +349,7 @@ export class NodePropertiesComponent extends React.Component<
onActivated={this.setIsDeleteConfirm.bind(this, true)}
aria-label="Delete this vertex"
>
- 
+
);
} else {
@@ -406,7 +406,7 @@ export class NodePropertiesComponent extends React.Component<
aria-label="Edit properties"
onActivated={expandClickHandler}
>
- 
+
)}
diff --git a/src/Explorer/Graph/NewVertexComponent/NewVertexComponent.tsx b/src/Explorer/Graph/NewVertexComponent/NewVertexComponent.tsx
index de357989a..6b20cfcb0 100644
--- a/src/Explorer/Graph/NewVertexComponent/NewVertexComponent.tsx
+++ b/src/Explorer/Graph/NewVertexComponent/NewVertexComponent.tsx
@@ -184,12 +184,18 @@ export const NewVertexComponent: FunctionComponent = (
className="rightPaneTrashIcon rightPaneBtns"
tabIndex={0}
role="button"
+ aria-label={`Delete ${data.key}`}
onClick={(event: React.MouseEvent) => removeNewVertexProperty(event, index)}
onKeyPress={(event: React.KeyboardEvent) =>
removeNewVertexPropertyKeyPress(event, index)
}
>
-
+
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
,
+ },
+ "isActionsVisible": false,
+ "isAsideVisible": false,
+ "itemType": "branch",
+ "layoutRef": Object {
+ "current":
+
+
+
,
+ },
+ "open": false,
+ "selectionRef": Object {
+ "current": null,
+ },
+ "subtreeRef": Object {
+ "current": null,
+ },
+ "treeItemRef": Object {
+ "current":
+ rootLabel
+
+
+
,
+ },
+ "value": "root",
+ }
+ }
+ >
+
+
+
+
+
+ rootLabel
+
+
+
+
+
+
+
+
+
+
+ child1Label
+
+
+
+
+
+
+
+
+ child2LoadingLabel
+
+
+
+
+
+
+
+
+ child3ExpandingLabel
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ rootLabel
+
+
+
+
+
+
+
+
+
+
,
+ },
+ "isActionsVisible": false,
+ "isAsideVisible": false,
+ "itemType": "branch",
+ "layoutRef": Object {
+ "current":
+
+
+
,
+ },
+ "open": false,
+ "selectionRef": Object {
+ "current": null,
+ },
+ "subtreeRef": Object {
+ "current": null,
+ },
+ "treeItemRef": Object {
+ "current":
+ child1Label
+
+
+
,
+ },
+ "value": "root/child1Label",
+ }
+ }
+ >
+
+
+
+
+
+ child1Label
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ child1Label
+
+
+
,
+ },
+ "isActionsVisible": false,
+ "isAsideVisible": false,
+ "itemType": "branch",
+ "layoutRef": Object {
+ "current":
+
+
+
,
+ },
+ "open": false,
+ "selectionRef": Object {
+ "current": null,
+ },
+ "subtreeRef": Object {
+ "current": null,
+ },
+ "treeItemRef": Object {
+ "current":
+ child2LoadingLabel
+
+
+
,
+ },
+ "value": "root/child2LoadingLabel",
+ }
+ }
+ >
+
+
+
+
+
+ child2LoadingLabel
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ child2LoadingLabel
+
+
+
,
+ },
+ "isActionsVisible": false,
+ "isAsideVisible": false,
+ "itemType": "leaf",
+ "layoutRef": Object {
+ "current":
+
+
+
,
+ },
+ "open": false,
+ "selectionRef": Object {
+ "current": null,
+ },
+ "subtreeRef": Object {
+ "current": null,
+ },
+ "treeItemRef": Object {
+ "current":
+ child3ExpandingLabel
+
+
+
,
+ },
+ "value": "root/child3ExpandingLabel",
+ }
+ }
+ >
+
+
+
+
+
+ child3ExpandingLabel
+
+
+
+
+
+
+ 
+
+
+ child3ExpandingLabel
+
+ {Notebook.newNotebookModalContent1}
--
- {Notebook.newNotebookModalContent2} - - {Notebook.learnMore} - -
- - ); - } - - private createNewNoteBook(parent?: NotebookContentItem, isGithubTree?: boolean): void { - const clearInProgressMessage = logConsoleProgress(`Creating new notebook in ${parent.path}`); - const startKey: number = TelemetryProcessor.traceStart(Action.CreateNewNotebook, { - dataExplorerArea: Constants.Areas.Notebook, - }); - - this.notebookManager?.notebookContentClient - .createNewNotebookFile(parent, isGithubTree) - .then((newFile: NotebookContentItem) => { - logConsoleInfo(`Successfully created: ${newFile.name}`); - TelemetryProcessor.traceSuccess( - Action.CreateNewNotebook, - { - dataExplorerArea: Constants.Areas.Notebook, - }, - startKey, - ); - return this.openNotebook(newFile); - }) - .then(() => this.resourceTree.triggerRender()) - .catch((error) => { - const errorMessage = `Failed to create a new notebook: ${getErrorMessage(error)}`; - logConsoleError(errorMessage); - TelemetryProcessor.traceFailure( - Action.CreateNewNotebook, - { - dataExplorerArea: Constants.Areas.Notebook, - error: errorMessage, - errorStack: getErrorStack(error), - }, - startKey, - ); - }) - .finally(clearInProgressMessage); - } - // TODO: Delete this function when ResourceTreeAdapter is removed. public async refreshContentItem(item: NotebookContentItem): Promise
+
= ({ container }: Props) => {
? {
root: {
backgroundColor: "transparent",
- padding: "0px 14px 0px 14px",
+ padding: "2px 8px 0px 8px",
},
}
: {
@@ -100,8 +107,12 @@ export const CommandBar: React.FC = ({ container }: Props) => {
},
};
+ const allButtons = staticButtons.concat(contextButtons).concat(controlButtons);
+ const keyboardHandlers = CommandBarUtil.createKeyboardHandlers(allButtons);
+ setKeyboardHandlers(keyboardHandlers);
+
return (
-
+
{
});
});
- describe("Enable notebook button", () => {
- const enableNotebookBtnLabel = "Enable Notebooks (Preview)";
- const selectedNodeState = useSelectedNode.getState();
-
- beforeAll(() => {
- mockExplorer = {} as Explorer;
- updateUserContext({
- portalEnv: "prod",
- databaseAccount: {
- properties: {
- capabilities: [{ name: "EnableTable" }],
- },
- } as DatabaseAccount,
- });
- });
-
- afterEach(() => {
- updateUserContext({
- portalEnv: "prod",
- });
- useNotebook.getState().setIsNotebookEnabled(false);
- useNotebook.getState().setIsNotebooksEnabledForAccount(false);
- });
-
- it("Notebooks is already enabled - button should be hidden", () => {
- useNotebook.getState().setIsNotebookEnabled(true);
- useNotebook.getState().setIsNotebooksEnabledForAccount(true);
-
- const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
- const enableNotebookBtn = buttons.find((button) => button.commandButtonLabel === enableNotebookBtnLabel);
- expect(enableNotebookBtn).toBeUndefined();
- });
-
- it("Account is running on one of the national clouds - button should be hidden", () => {
- updateUserContext({
- portalEnv: "mooncake",
- });
-
- const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
- const enableNotebookBtn = buttons.find((button) => button.commandButtonLabel === enableNotebookBtnLabel);
- expect(enableNotebookBtn).toBeUndefined();
- });
-
- it("Notebooks is not enabled but is available - button should be shown and enabled", () => {
- useNotebook.getState().setIsNotebooksEnabledForAccount(true);
-
- const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
- const enableNotebookBtn = buttons.find((button) => button.commandButtonLabel === enableNotebookBtnLabel);
-
- //TODO: modify once notebooks are available
- expect(enableNotebookBtn).toBeUndefined();
- //expect(enableNotebookBtn).toBeDefined();
- //expect(enableNotebookBtn.disabled).toBe(false);
- //expect(enableNotebookBtn.tooltipText).toBe("");
- });
-
- it("Notebooks is not enabled and is unavailable - button should be shown and disabled", () => {
- const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
- const enableNotebookBtn = buttons.find((button) => button.commandButtonLabel === enableNotebookBtnLabel);
-
- //TODO: modify once notebooks are available
- expect(enableNotebookBtn).toBeUndefined();
- //expect(enableNotebookBtn).toBeDefined();
- //expect(enableNotebookBtn.disabled).toBe(true);
- //expect(enableNotebookBtn.tooltipText).toBe(
- // "Notebooks are not yet available in your account's region. View supported regions here: https://aka.ms/cosmos-enable-notebooks."
- //);
- });
- });
-
- describe("Open Mongo shell button", () => {
- const openMongoShellBtnLabel = "Open Mongo shell";
- const selectedNodeState = useSelectedNode.getState();
-
- beforeAll(() => {
- mockExplorer = {} as Explorer;
- updateUserContext({
- databaseAccount: {
- properties: {
- capabilities: [{ name: "EnableTable" }],
- },
- } as DatabaseAccount,
- });
- });
-
- afterAll(() => {
- updateUserContext({
- apiType: "SQL",
- });
- useNotebook.getState().setIsShellEnabled(false);
- });
-
- beforeEach(() => {
- updateUserContext({
- apiType: "Mongo",
- });
- useNotebook.getState().setIsShellEnabled(true);
- });
-
- afterEach(() => {
- useNotebook.getState().setIsNotebookEnabled(false);
- useNotebook.getState().setIsNotebooksEnabledForAccount(false);
- });
-
- it("Mongo Api not available - button should be hidden", () => {
- updateUserContext({
- apiType: "SQL",
- });
- const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
- const openMongoShellBtn = buttons.find((button) => button.commandButtonLabel === openMongoShellBtnLabel);
- expect(openMongoShellBtn).toBeUndefined();
- });
-
- it("Running on a national cloud - button should be hidden", () => {
- updateUserContext({
- portalEnv: "mooncake",
- });
-
- const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
- const openMongoShellBtn = buttons.find((button) => button.commandButtonLabel === openMongoShellBtnLabel);
- expect(openMongoShellBtn).toBeUndefined();
- });
-
- it("Notebooks is not enabled and is unavailable - button should be hidden", () => {
- const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
- const openMongoShellBtn = buttons.find((button) => button.commandButtonLabel === openMongoShellBtnLabel);
- expect(openMongoShellBtn).toBeUndefined();
- });
-
- it("Notebooks is not enabled and is available - button should be hidden", () => {
- useNotebook.getState().setIsNotebooksEnabledForAccount(true);
-
- const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
- const openMongoShellBtn = buttons.find((button) => button.commandButtonLabel === openMongoShellBtnLabel);
- expect(openMongoShellBtn).toBeUndefined();
- });
-
- it("Notebooks is enabled and is unavailable - button should be shown and enabled", () => {
- useNotebook.getState().setIsNotebookEnabled(true);
-
- const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
- const openMongoShellBtn = buttons.find((button) => button.commandButtonLabel === openMongoShellBtnLabel);
- expect(openMongoShellBtn).toBeDefined();
-
- //TODO: modify once notebooks are available
- expect(openMongoShellBtn.disabled).toBe(true);
- //expect(openMongoShellBtn.disabled).toBe(false);
- //expect(openMongoShellBtn.tooltipText).toBe("");
- });
-
- it("Notebooks is enabled and is available - button should be shown and enabled", () => {
- useNotebook.getState().setIsNotebookEnabled(true);
- useNotebook.getState().setIsNotebooksEnabledForAccount(true);
-
- const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
- const openMongoShellBtn = buttons.find((button) => button.commandButtonLabel === openMongoShellBtnLabel);
- expect(openMongoShellBtn).toBeDefined();
-
- //TODO: modify once notebooks are available
- expect(openMongoShellBtn.disabled).toBe(true);
- //expect(openMongoShellBtn.disabled).toBe(false);
- //expect(openMongoShellBtn.tooltipText).toBe("");
- });
-
- it("Notebooks is enabled and is available, terminal is unavailable due to ipRules - button should be hidden", () => {
- useNotebook.getState().setIsNotebookEnabled(true);
- useNotebook.getState().setIsNotebooksEnabledForAccount(true);
- useNotebook.getState().setIsShellEnabled(false);
-
- const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
- const openMongoShellBtn = buttons.find((button) => button.commandButtonLabel === openMongoShellBtnLabel);
- expect(openMongoShellBtn).toBeUndefined();
- });
- });
-
describe("Open Cassandra shell button", () => {
const openCassandraShellBtnLabel = "Open Cassandra shell";
const selectedNodeState = useSelectedNode.getState();
@@ -305,42 +128,6 @@ describe("CommandBarComponentButtonFactory tests", () => {
const openCassandraShellBtn = buttons.find((button) => button.commandButtonLabel === openCassandraShellBtnLabel);
expect(openCassandraShellBtn).toBeUndefined();
});
-
- it("Notebooks is not enabled and is available - button should be shown and enabled", () => {
- useNotebook.getState().setIsNotebooksEnabledForAccount(true);
-
- const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
- const openCassandraShellBtn = buttons.find((button) => button.commandButtonLabel === openCassandraShellBtnLabel);
- expect(openCassandraShellBtn).toBeUndefined();
- });
-
- it("Notebooks is enabled and is unavailable - button should be shown and enabled", () => {
- useNotebook.getState().setIsNotebookEnabled(true);
-
- const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
- const openCassandraShellBtn = buttons.find((button) => button.commandButtonLabel === openCassandraShellBtnLabel);
-
- expect(openCassandraShellBtn).toBeDefined();
-
- //TODO: modify once notebooks are available
- expect(openCassandraShellBtn.disabled).toBe(true);
- //expect(openCassandraShellBtn.disabled).toBe(false);
- //expect(openCassandraShellBtn.tooltipText).toBe("");
- });
-
- it("Notebooks is enabled and is available - button should be shown and enabled", () => {
- useNotebook.getState().setIsNotebookEnabled(true);
- useNotebook.getState().setIsNotebooksEnabledForAccount(true);
-
- const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
- const openCassandraShellBtn = buttons.find((button) => button.commandButtonLabel === openCassandraShellBtnLabel);
- expect(openCassandraShellBtn).toBeDefined();
-
- //TODO: modify once notebooks are available
- expect(openCassandraShellBtn.disabled).toBe(true);
- //expect(openCassandraShellBtn.disabled).toBe(false);
- //expect(openCassandraShellBtn.tooltipText).toBe("");
- });
});
describe("Open Postgres and vCore Mongo buttons", () => {
@@ -368,62 +155,6 @@ describe("CommandBarComponentButtonFactory tests", () => {
});
});
- describe("GitHub buttons", () => {
- const connectToGitHubBtnLabel = "Connect to GitHub";
- const manageGitHubSettingsBtnLabel = "Manage GitHub settings";
- const selectedNodeState = useSelectedNode.getState();
-
- beforeAll(() => {
- mockExplorer = {} as Explorer;
- updateUserContext({
- databaseAccount: {
- properties: {
- capabilities: [{ name: "EnableTable" }],
- },
- } as DatabaseAccount,
- });
-
- mockExplorer.notebookManager = new NotebookManager();
- mockExplorer.notebookManager.gitHubOAuthService = new GitHubOAuthService(undefined);
- });
-
- afterEach(() => {
- jest.resetAllMocks();
- useNotebook.getState().setIsNotebookEnabled(false);
- });
-
- it("Notebooks is enabled and GitHubOAuthService is not logged in - connect to github button should be visible", () => {
- useNotebook.getState().setIsNotebookEnabled(true);
-
- const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
- const connectToGitHubBtn = buttons.find((button) => button.commandButtonLabel === connectToGitHubBtnLabel);
- expect(connectToGitHubBtn).toBeDefined();
- });
-
- it("Notebooks is enabled and GitHubOAuthService is logged in - manage github settings button should be visible", () => {
- useNotebook.getState().setIsNotebookEnabled(true);
- mockExplorer.notebookManager.gitHubOAuthService.isLoggedIn = jest.fn().mockReturnValue(true);
-
- const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
- const manageGitHubSettingsBtn = buttons.find(
- (button) => button.commandButtonLabel === manageGitHubSettingsBtnLabel,
- );
- expect(manageGitHubSettingsBtn).toBeDefined();
- });
-
- it("Notebooks is not enabled - connect to github and manage github settings buttons should be hidden", () => {
- const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
-
- const connectToGitHubBtn = buttons.find((button) => button.commandButtonLabel === connectToGitHubBtnLabel);
- expect(connectToGitHubBtn).toBeUndefined();
-
- const manageGitHubSettingsBtn = buttons.find(
- (button) => button.commandButtonLabel === manageGitHubSettingsBtnLabel,
- );
- expect(manageGitHubSettingsBtn).toBeUndefined();
- });
- });
-
describe("Resource token", () => {
const mockCollection = { id: ko.observable("test") } as CollectionBase;
useSelectedNode.getState().setSelectedNode(mockCollection);
diff --git a/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx b/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx
index 5e9de9cde..a1aa3e49b 100644
--- a/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx
+++ b/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx
@@ -1,3 +1,5 @@
+import { KeyboardAction } from "KeyboardShortcuts";
+import { ReactTabKind, useTabs } from "hooks/useTabs";
import * as React from "react";
import AddCollectionIcon from "../../../../images/AddCollection.svg";
import AddDatabaseIcon from "../../../../images/AddDatabase.svg";
@@ -6,13 +8,10 @@ import AddStoredProcedureIcon from "../../../../images/AddStoredProcedure.svg";
import AddTriggerIcon from "../../../../images/AddTrigger.svg";
import AddUdfIcon from "../../../../images/AddUdf.svg";
import BrowseQueriesIcon from "../../../../images/BrowseQuery.svg";
-import CosmosTerminalIcon from "../../../../images/Cosmos-Terminal.svg";
import FeedbackIcon from "../../../../images/Feedback-Command.svg";
+import HomeIcon from "../../../../images/Home_16.svg";
import HostedTerminalIcon from "../../../../images/Hosted-Terminal.svg";
import OpenQueryFromDiskIcon from "../../../../images/OpenQueryFromDisk.svg";
-import GitHubIcon from "../../../../images/github.svg";
-import NewNotebookIcon from "../../../../images/notebook/Notebook-new.svg";
-import ResetWorkspaceIcon from "../../../../images/notebook/Notebook-reset-workspace.svg";
import OpenInTabIcon from "../../../../images/open-in-tab.svg";
import SettingsIcon from "../../../../images/settings_15x15.svg";
import SynapseIcon from "../../../../images/synapse-link.svg";
@@ -20,7 +19,6 @@ import { AuthType } from "../../../AuthType";
import * as Constants from "../../../Common/Constants";
import { Platform, configContext } from "../../../ConfigContext";
import * as ViewModels from "../../../Contracts/ViewModels";
-import { JunoClient } from "../../../Juno/JunoClient";
import { userContext } from "../../../UserContext";
import { getCollectionName, getDatabaseName } from "../../../Utils/APITypeUtils";
import { isRunningOnNationalCloud } from "../../../Utils/CloudUtils";
@@ -31,7 +29,6 @@ import { useNotebook } from "../../Notebook/useNotebook";
import { OpenFullScreen } from "../../OpenFullScreen";
import { AddDatabasePanel } from "../../Panes/AddDatabasePanel/AddDatabasePanel";
import { BrowseQueriesPane } from "../../Panes/BrowseQueriesPane/BrowseQueriesPane";
-import { GitHubReposPanel } from "../../Panes/GitHubReposPanel/GitHubReposPanel";
import { LoadQueryPane } from "../../Panes/LoadQueryPane/LoadQueryPane";
import { SettingsPane } from "../../Panes/SettingsPane/SettingsPane";
import { useDatabases } from "../../useDatabases";
@@ -57,7 +54,11 @@ export function createStaticCommandBarButtons(
};
if (configContext.platform !== Platform.Fabric) {
+ const homeBtn = createHomeButton();
+ buttons.push(homeBtn);
+
const newCollectionBtn = createNewCollectionGroup(container);
+ newCollectionBtn.keyboardAction = KeyboardAction.NEW_COLLECTION; // Just for the root button, not the child version we create below.
buttons.push(newCollectionBtn);
if (userContext.apiType !== "Tables" && userContext.apiType !== "Cassandra") {
const addSynapseLink = createOpenSynapseLinkDialogButton(container);
@@ -75,57 +76,6 @@ export function createStaticCommandBarButtons(
}
}
- if (useNotebook.getState().isNotebookEnabled) {
- addDivider();
- const notebookButtons: CommandButtonComponentProps[] = [];
-
- const newNotebookButton = createNewNotebookButton(container);
- newNotebookButton.children = [createNewNotebookButton(container), createuploadNotebookButton(container)];
- notebookButtons.push(newNotebookButton);
-
- if (container.notebookManager?.gitHubOAuthService) {
- notebookButtons.push(createManageGitHubAccountButton(container));
- }
- if (useNotebook.getState().isPhoenixFeatures && configContext.isTerminalEnabled) {
- notebookButtons.push(createOpenTerminalButton(container));
- }
- if (useNotebook.getState().isPhoenixNotebooks && selectedNodeState.isConnectedToContainer()) {
- notebookButtons.push(createNotebookWorkspaceResetButton(container));
- }
- if (
- (userContext.apiType === "Mongo" &&
- useNotebook.getState().isShellEnabled &&
- selectedNodeState.isDatabaseNodeOrNoneSelected()) ||
- userContext.apiType === "Cassandra"
- ) {
- notebookButtons.push(createDivider());
- if (userContext.apiType === "Cassandra") {
- notebookButtons.push(createOpenTerminalButtonByKind(container, ViewModels.TerminalKind.Cassandra));
- } else {
- notebookButtons.push(createOpenTerminalButtonByKind(container, ViewModels.TerminalKind.Mongo));
- }
- }
-
- notebookButtons.forEach((btn) => {
- if (btn.commandButtonLabel.indexOf("Cassandra") !== -1) {
- if (!useNotebook.getState().isPhoenixFeatures) {
- applyNotebooksTemporarilyDownStyle(btn, Constants.Notebook.cassandraShellTemporarilyDownMsg);
- }
- } else if (btn.commandButtonLabel.indexOf("Mongo") !== -1) {
- if (!useNotebook.getState().isPhoenixFeatures) {
- applyNotebooksTemporarilyDownStyle(btn, Constants.Notebook.mongoShellTemporarilyDownMsg);
- }
- } else if (btn.commandButtonLabel.indexOf("Open Terminal") !== -1) {
- if (!useNotebook.getState().isPhoenixFeatures) {
- applyNotebooksTemporarilyDownStyle(btn, Constants.Notebook.temporarilyDownMsg);
- }
- } else if (!useNotebook.getState().isPhoenixNotebooks) {
- applyNotebooksTemporarilyDownStyle(btn, Constants.Notebook.temporarilyDownMsg);
- }
- buttons.push(btn);
- });
- }
-
if (!selectedNodeState.isDatabaseNodeOrNoneSelected()) {
const isQuerySupported = userContext.apiType === "SQL" || userContext.apiType === "Gremlin";
@@ -135,7 +85,7 @@ export function createStaticCommandBarButtons(
buttons.push(newSqlQueryBtn);
}
- if (isQuerySupported && selectedNodeState.findSelectedCollection()) {
+ if (isQuerySupported && selectedNodeState.findSelectedCollection() && configContext.platform !== Platform.Fabric) {
const openQueryBtn = createOpenQueryButton(container);
openQueryBtn.children = [createOpenQueryButton(container), createOpenQueryFromDiskButton()];
buttons.push(openQueryBtn);
@@ -146,6 +96,7 @@ export function createStaticCommandBarButtons(
const newStoredProcedureBtn: CommandButtonComponentProps = {
iconSrc: AddStoredProcedureIcon,
iconAlt: label,
+ keyboardAction: KeyboardAction.NEW_SPROC,
onCommandClick: () => {
const selectedCollection: ViewModels.Collection = selectedNodeState.findSelectedCollection();
selectedCollection && selectedCollection.onNewStoredProcedureClick(selectedCollection);
@@ -196,18 +147,22 @@ export function createContextCommandBarButtons(
}
export function createControlCommandBarButtons(container: Explorer): CommandButtonComponentProps[] {
- const buttons: CommandButtonComponentProps[] = [
- {
- iconSrc: SettingsIcon,
- iconAlt: "Settings",
- onCommandClick: () => useSidePanel.getState().openSidePanel("Settings", | React.KeyboardEvent) => {
- btn.onCommandClick(ev);
- let copilotEnabled = false;
- if (useQueryCopilot.getState().copilotEnabled && useQueryCopilot.getState().copilotUserDBEnabled) {
- copilotEnabled = useQueryCopilot.getState().copilotEnabledforExecution;
- }
- TelemetryProcessor.trace(Action.ClickCommandBarButton, ActionModifiers.Mark, { label, copilotEnabled });
- },
+ onClick: btn.onCommandClick
+ ? (ev?: React.MouseEvent | React.KeyboardEvent) => {
+ btn.onCommandClick(ev);
+ let copilotEnabled = false;
+ if (useQueryCopilot.getState().copilotEnabled && useQueryCopilot.getState().copilotUserDBEnabled) {
+ copilotEnabled = useQueryCopilot.getState().copilotEnabledforExecution;
+ }
+ TelemetryProcessor.trace(Action.ClickCommandBarButton, ActionModifiers.Mark, { label, copilotEnabled });
+ }
+ : undefined,
key: `${btn.commandButtonLabel}${index}`,
text: label,
- "data-test": label,
title: btn.tooltipText,
name: label,
disabled: btn.disabled,
ariaLabel: btn.ariaLabel,
+ "data-test": `CommandBar/Button:${label}`,
buttonStyles: {
root: {
backgroundColor: backgroundColor,
@@ -93,7 +99,12 @@ export const convertButton = (btns: CommandButtonComponentProps[], backgroundCol
},
width: 16,
},
- label: { fontSize: StyleConstants.mediumFontSize },
+ label: {
+ fontSize:
+ configContext.platform == Platform.Fabric
+ ? StyleConstants.DefaultFontSize
+ : StyleConstants.mediumFontSize,
+ },
rootHovered: { backgroundColor: hoverColor },
rootPressed: { backgroundColor: hoverColor },
splitButtonMenuButtonExpanded: {
@@ -112,6 +123,7 @@ export const convertButton = (btns: CommandButtonComponentProps[], backgroundCol
splitButtonContainer: {
marginLeft: 5,
marginRight: 5,
+ height: buttonHeightPx,
},
},
className: btn.className,
@@ -129,7 +141,12 @@ export const convertButton = (btns: CommandButtonComponentProps[], backgroundCol
// TODO Figure out how to do it the proper way with subComponentStyles.
// TODO Remove all this crazy styling once we adopt Ui-Fabric Azure themes
selectors: {
- ".ms-ContextualMenu-itemText": { fontSize: StyleConstants.mediumFontSize },
+ ".ms-ContextualMenu-itemText": {
+ fontSize:
+ configContext.platform == Platform.Fabric
+ ? StyleConstants.DefaultFontSize
+ : StyleConstants.mediumFontSize,
+ },
".ms-ContextualMenu-link:hover": { backgroundColor: hoverColor },
".ms-ContextualMenu-icon": { width: 16, height: 16 },
},
@@ -219,3 +236,28 @@ export const createConnectionStatus = (container: Explorer, poolId: PoolIdType,
onRender: () => ) => this.onClearNotificationsKeyPress(event)}
tabIndex={0}
+ style={{ border: "1px solid black", borderRadius: "2px" }}
>
Clear Notifications
diff --git a/src/Explorer/Menus/NotificationConsole/__snapshots__/NotificationConsoleComponent.test.tsx.snap b/src/Explorer/Menus/NotificationConsole/__snapshots__/NotificationConsoleComponent.test.tsx.snap
index 8b8b2bdeb..f702107b8 100644
--- a/src/Explorer/Menus/NotificationConsole/__snapshots__/NotificationConsoleComponent.test.tsx.snap
+++ b/src/Explorer/Menus/NotificationConsole/__snapshots__/NotificationConsoleComponent.test.tsx.snap
@@ -146,6 +146,12 @@ exports[`NotificationConsoleComponent renders the console 1`] = `
onClick={[Function]}
onKeyDown={[Function]}
role="button"
+ style={
+ Object {
+ "border": "1px solid black",
+ "borderRadius": "2px",
+ }
+ }
tabIndex={0}
>
![]()
![]()
{
- if (!action.collectionResourceId && collections.length === 0) {
- subscription.dispose();
- openCollectionTab(action, databases, ++i);
- return;
- }
-
- for (let j = 0; j < collections.length; j++) {
- const collection: ViewModels.Collection = collections[j];
- if (!!action.collectionResourceId && collection.id() !== action.collectionResourceId) {
- continue;
- }
-
- // select the collection
- collection.expandCollection();
-
- if (
- action.tabKind === ActionContracts.TabKind.SQLDocuments ||
- action.tabKind === ActionContracts.TabKind[ActionContracts.TabKind.SQLDocuments]
- ) {
- collection.onDocumentDBDocumentsClick();
- break;
- }
-
- if (
- action.tabKind === ActionContracts.TabKind.MongoDocuments ||
- action.tabKind === ActionContracts.TabKind[ActionContracts.TabKind.MongoDocuments]
- ) {
- collection.onMongoDBDocumentsClick();
- break;
- }
-
- if (
- action.tabKind === ActionContracts.TabKind.SchemaAnalyzer ||
- action.tabKind === ActionContracts.TabKind[ActionContracts.TabKind.SchemaAnalyzer]
- ) {
- collection.onSchemaAnalyzerClick();
- break;
- }
-
- if (
- action.tabKind === ActionContracts.TabKind.TableEntities ||
- action.tabKind === ActionContracts.TabKind[ActionContracts.TabKind.TableEntities]
- ) {
- collection.onTableEntitiesClick();
- break;
- }
-
- if (
- action.tabKind === ActionContracts.TabKind.Graph ||
- action.tabKind === ActionContracts.TabKind[ActionContracts.TabKind.Graph]
- ) {
- collection.onGraphDocumentsClick();
- break;
- }
-
- if (
- action.tabKind === ActionContracts.TabKind.SQLQuery ||
- action.tabKind === ActionContracts.TabKind[ActionContracts.TabKind.SQLQuery]
- ) {
- collection.onNewQueryClick(
- collection,
- undefined,
- generateQueryText(action as ActionContracts.OpenQueryTab, collection.partitionKeyProperties),
- );
- break;
- }
-
- if (
- action.tabKind === ActionContracts.TabKind.ScaleSettings ||
- action.tabKind === ActionContracts.TabKind[ActionContracts.TabKind.ScaleSettings]
- ) {
- collection.onSettingsClick();
- break;
- }
- }
- subscription.dispose();
+ //if databases are not yet loaded, wait until loaded
+ if (!databases || databases.length === 0) {
+ const databaseActionHandler = (databases: ViewModels.Database[]) => {
+ databasesUnsubscription();
+ openCollectionTab(action, databases, 0);
+ return;
};
+ const databasesUnsubscription = useDatabases.subscribe(databaseActionHandler, (state) => state.databases);
+ } else {
+ for (let i = initialDatabaseIndex; i < databases.length; i++) {
+ const database: ViewModels.Database = databases[i];
+ if (!!action.databaseResourceId && database.id() !== action.databaseResourceId) {
+ continue;
+ }
- const subscription = database.collections.subscribe((collections) => collectionActionHandler(collections));
- if (database.collections && database.collections() && database.collections().length) {
- collectionActionHandler(database.collections());
+ //expand database first if not expanded to load the collections
+ if (!database.isDatabaseExpanded?.()) {
+ database.expandDatabase?.();
+ }
+
+ const collectionActionHandler = (collections: ViewModels.Collection[]) => {
+ if (!action.collectionResourceId && collections.length === 0) {
+ subscription.dispose();
+ openCollectionTab(action, databases, ++i);
+ return;
+ }
+
+ for (let j = 0; j < collections.length; j++) {
+ const collection: ViewModels.Collection = collections[j];
+ if (!!action.collectionResourceId && collection.id() !== action.collectionResourceId) {
+ continue;
+ }
+
+ // select the collection
+ collection.expandCollection();
+
+ if (
+ action.tabKind === ActionContracts.TabKind.SQLDocuments ||
+ action.tabKind === ActionContracts.TabKind[ActionContracts.TabKind.SQLDocuments]
+ ) {
+ collection.onDocumentDBDocumentsClick();
+ break;
+ }
+
+ if (
+ action.tabKind === ActionContracts.TabKind.MongoDocuments ||
+ action.tabKind === ActionContracts.TabKind[ActionContracts.TabKind.MongoDocuments]
+ ) {
+ collection.onMongoDBDocumentsClick();
+ break;
+ }
+
+ if (
+ action.tabKind === ActionContracts.TabKind.SchemaAnalyzer ||
+ action.tabKind === ActionContracts.TabKind[ActionContracts.TabKind.SchemaAnalyzer]
+ ) {
+ collection.onSchemaAnalyzerClick();
+ break;
+ }
+
+ if (
+ action.tabKind === ActionContracts.TabKind.TableEntities ||
+ action.tabKind === ActionContracts.TabKind[ActionContracts.TabKind.TableEntities]
+ ) {
+ collection.onTableEntitiesClick();
+ break;
+ }
+
+ if (
+ action.tabKind === ActionContracts.TabKind.Graph ||
+ action.tabKind === ActionContracts.TabKind[ActionContracts.TabKind.Graph]
+ ) {
+ collection.onGraphDocumentsClick();
+ break;
+ }
+
+ if (
+ action.tabKind === ActionContracts.TabKind.SQLQuery ||
+ action.tabKind === ActionContracts.TabKind[ActionContracts.TabKind.SQLQuery]
+ ) {
+ collection.onNewQueryClick(
+ collection,
+ undefined,
+ generateQueryText(action as ActionContracts.OpenQueryTab, collection.partitionKeyProperties),
+ );
+ break;
+ }
+
+ if (
+ action.tabKind === ActionContracts.TabKind.ScaleSettings ||
+ action.tabKind === ActionContracts.TabKind[ActionContracts.TabKind.ScaleSettings]
+ ) {
+ collection.onSettingsClick();
+ break;
+ }
+ }
+ subscription.dispose();
+ };
+
+ const subscription = database.collections.subscribe((collections) => collectionActionHandler(collections));
+ if (database.collections && database.collections() && database.collections().length) {
+ collectionActionHandler(database.collections());
+ }
+
+ break;
}
-
- break;
}
}
@@ -154,7 +170,7 @@ function openPane(action: ActionContracts.OpenPane, explorer: Explorer) {
action.paneKind === ActionContracts.PaneKind.GlobalSettings ||
action.paneKind === ActionContracts.PaneKind[ActionContracts.PaneKind.GlobalSettings]
) {
- useSidePanel.getState().openSidePanel("Settings", {
@@ -136,6 +144,9 @@ export class AddCollectionPanel extends React.Component
+
+
`;
diff --git a/src/Explorer/Panes/DeleteDatabaseConfirmationPanel.tsx b/src/Explorer/Panes/DeleteDatabaseConfirmationPanel.tsx
index 8e0f6c2a1..af291bba6 100644
--- a/src/Explorer/Panes/DeleteDatabaseConfirmationPanel.tsx
+++ b/src/Explorer/Panes/DeleteDatabaseConfirmationPanel.tsx
@@ -9,6 +9,7 @@ import { DefaultExperienceUtility } from "Shared/DefaultExperienceUtility";
import { Action, ActionModifiers } from "Shared/Telemetry/TelemetryConstants";
import * as TelemetryProcessor from "Shared/Telemetry/TelemetryProcessor";
import { userContext } from "UserContext";
+import { getDatabaseName } from "Utils/APITypeUtils";
import { logConsoleError } from "Utils/NotificationConsoleUtils";
import { useSidePanel } from "hooks/useSidePanel";
import { useTabs } from "hooks/useTabs";
@@ -37,11 +38,11 @@ export const DeleteDatabaseConfirmationPanel: FunctionComponent => {
if (selectedDatabase?.id() && databaseInput !== selectedDatabase.id()) {
setFormError(
- `Input database name "${databaseInput}" does not match the selected database "${selectedDatabase.id()}"`,
+ `Input ${getDatabaseName()} name "${databaseInput}" does not match the selected ${getDatabaseName()} "${selectedDatabase.id()}"`,
);
- logConsoleError(`Error while deleting collection ${selectedDatabase && selectedDatabase.id()}`);
+ logConsoleError(`Error while deleting ${getDatabaseName()} ${selectedDatabase && selectedDatabase.id()}`);
logConsoleError(
- `Input database name "${databaseInput}" does not match the selected database "${selectedDatabase.id()}"`,
+ `Input ${getDatabaseName()} name "${databaseInput}" does not match the selected ${getDatabaseName()} "${selectedDatabase.id()}"`,
);
return;
}
@@ -123,17 +124,18 @@ export const DeleteDatabaseConfirmationPanel: FunctionComponent
{!formError &&
*
- Confirm by typing the database id
+ Confirm by typing the {getDatabaseName()} id
{
@@ -149,7 +151,7 @@ export const DeleteDatabaseConfirmationPanel: FunctionComponent
- What is the reason why you are deleting this database?
+ What is the reason why you are deleting this {getDatabaseName()}?
+
`;
diff --git a/src/Explorer/Panes/GitHubReposPanel/__snapshots__/GitHubReposPanel.test.tsx.snap b/src/Explorer/Panes/GitHubReposPanel/__snapshots__/GitHubReposPanel.test.tsx.snap
index 4a3a8942e..19f98d5c6 100644
--- a/src/Explorer/Panes/GitHubReposPanel/__snapshots__/GitHubReposPanel.test.tsx.snap
+++ b/src/Explorer/Panes/GitHubReposPanel/__snapshots__/GitHubReposPanel.test.tsx.snap
@@ -18,7 +18,6 @@ exports[`GitHub Repos Panel should render Default properly 1`] = `
Object {
"container": Explorer {
"_isInitializingNotebooks": false,
- "_resetNotebookWorkspace": [Function],
"isFixedCollectionWithSharedThroughputSupported": [Function],
"isTabsContentExpanded": [Function],
"onRefreshDatabasesKeyPress": [Function],
diff --git a/src/Explorer/Panes/PanelComponent.less b/src/Explorer/Panes/PanelComponent.less
index 481c6ee64..3a0ab9b3c 100644
--- a/src/Explorer/Panes/PanelComponent.less
+++ b/src/Explorer/Panes/PanelComponent.less
@@ -48,6 +48,13 @@
font-size: @mediumFontSize;
padding: 0 @LargeSpace 0 @SmallSpace;
}
+
+ .panelSectionSpinner {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ }
}
}
diff --git a/src/Explorer/Panes/PanelContainerComponent.tsx b/src/Explorer/Panes/PanelContainerComponent.tsx
index fa2db4f42..5795ec941 100644
--- a/src/Explorer/Panes/PanelContainerComponent.tsx
+++ b/src/Explorer/Panes/PanelContainerComponent.tsx
@@ -53,12 +53,13 @@ export class PanelContainerComponent extends React.Component = (
= ({
const handleOnSubmit = (event: React.FormEvent) => {
event.preventDefault();
onSubmit();
+ const screenReaderStatusElement = document.getElementById("screenReaderStatus");
+ if (screenReaderStatusElement) {
+ screenReaderStatusElement.innerHTML = labelToLoadingItemName[submitButtonText] || "Loading";
+ }
};
return (
@@ -42,6 +47,7 @@ export const RightPaneForm: FunctionComponent = ({
/>
)}
+
{isExecuting &&
+
`;
diff --git a/src/Explorer/Panes/SettingsPane/SettingsPane.test.tsx b/src/Explorer/Panes/SettingsPane/SettingsPane.test.tsx
index 4838ca858..25b0167f5 100644
--- a/src/Explorer/Panes/SettingsPane/SettingsPane.test.tsx
+++ b/src/Explorer/Panes/SettingsPane/SettingsPane.test.tsx
@@ -6,7 +6,7 @@ import { SettingsPane } from "./SettingsPane";
describe("Settings Pane", () => {
it("should render Default properly", () => {
- const wrapper = shallow((false);
+ const [refreshExplorer, setRefreshExplorer] = useState(false);
const [pageOption, setPageOption] = useState(
LocalStorageUtility.getEntryNumber(StorageKey.ActualItemPerPage) === Constants.Queries.unlimitedItemsPerPage
? Constants.Queries.UnlimitedPageOption
: Constants.Queries.CustomPageOption,
);
+ const [ruThresholdEnabled, setRUThresholdEnabled] = useState(isRUThresholdEnabled());
+ const [ruThreshold, setRUThreshold] = useState(getRUThreshold());
const [queryTimeoutEnabled, setQueryTimeoutEnabled] = useState(
LocalStorageUtility.getEntryBoolean(StorageKey.QueryTimeoutEnabled),
);
const [queryTimeout, setQueryTimeout] = useState(LocalStorageUtility.getEntryNumber(StorageKey.QueryTimeout));
+ const [defaultQueryResultsView, setDefaultQueryResultsView] = useState(
+ getDefaultQueryResultsView(),
+ );
const [automaticallyCancelQueryAfterTimeout, setAutomaticallyCancelQueryAfterTimeout] = useState(
LocalStorageUtility.getEntryBoolean(StorageKey.AutomaticallyCancelQueryAfterTimeout),
);
@@ -78,13 +99,20 @@ export const SettingsPane: FunctionComponent = () => {
? LocalStorageUtility.getEntryString(StorageKey.PriorityLevel)
: Constants.PriorityLevel.Default,
);
+ const [copilotSampleDBEnabled, setCopilotSampleDBEnabled] = useState(
+ LocalStorageUtility.getEntryString(StorageKey.CopilotSampleDBEnabled) === "true",
+ );
const explorerVersion = configContext.gitSha;
const shouldShowQueryPageOptions = userContext.apiType === "SQL";
const shouldShowGraphAutoVizOption = userContext.apiType === "Gremlin";
const shouldShowCrossPartitionOption = userContext.apiType !== "Gremlin";
const shouldShowParallelismOption = userContext.apiType !== "Gremlin";
const shouldShowPriorityLevelOption = PriorityBasedExecutionUtils.isFeatureEnabled();
- const handlerOnSubmit = () => {
+ const shouldShowCopilotSampleDBOption =
+ userContext.apiType === "SQL" &&
+ useQueryCopilot.getState().copilotEnabled &&
+ useDatabases.getState().sampleDataResourceTokenCollection;
+ const handlerOnSubmit = async () => {
setIsExecuting(true);
LocalStorageUtility.setEntryNumber(
@@ -92,6 +120,7 @@ export const SettingsPane: FunctionComponent = () => {
isCustomPageOptionSelected() ? customItemPerPage : Constants.Queries.unlimitedItemsPerPage,
);
LocalStorageUtility.setEntryNumber(StorageKey.CustomItemPerPage, customItemPerPage);
+ LocalStorageUtility.setEntryBoolean(StorageKey.RUThresholdEnabled, ruThresholdEnabled);
LocalStorageUtility.setEntryBoolean(StorageKey.QueryTimeoutEnabled, queryTimeoutEnabled);
LocalStorageUtility.setEntryNumber(StorageKey.RetryAttempts, retryAttempts);
LocalStorageUtility.setEntryNumber(StorageKey.RetryInterval, retryInterval);
@@ -100,6 +129,8 @@ export const SettingsPane: FunctionComponent = () => {
LocalStorageUtility.setEntryString(StorageKey.IsCrossPartitionQueryEnabled, crossPartitionQueryEnabled.toString());
LocalStorageUtility.setEntryNumber(StorageKey.MaxDegreeOfParellism, maxDegreeOfParallelism);
LocalStorageUtility.setEntryString(StorageKey.PriorityLevel, priorityLevel.toString());
+ LocalStorageUtility.setEntryString(StorageKey.CopilotSampleDBEnabled, copilotSampleDBEnabled.toString());
+ LocalStorageUtility.setEntryString(StorageKey.DefaultQueryResultsView, defaultQueryResultsView);
if (shouldShowGraphAutoVizOption) {
LocalStorageUtility.setEntryBoolean(
@@ -108,6 +139,10 @@ export const SettingsPane: FunctionComponent = () => {
);
}
+ if (ruThresholdEnabled) {
+ LocalStorageUtility.setEntryNumber(StorageKey.RUThreshold, ruThreshold);
+ }
+
if (queryTimeoutEnabled) {
LocalStorageUtility.setEntryNumber(StorageKey.QueryTimeout, queryTimeout);
LocalStorageUtility.setEntryBoolean(
@@ -139,6 +174,7 @@ export const SettingsPane: FunctionComponent = () => {
logConsoleInfo(
`Updated query setting to ${LocalStorageUtility.getEntryString(StorageKey.SetPartitionKeyUndefined)}`,
);
+ refreshExplorer && (await explorer.refreshExplorer());
closeSidePanel();
};
@@ -171,6 +207,11 @@ export const SettingsPane: FunctionComponent = () => {
{ key: Constants.PriorityLevel.High, text: "High" },
];
+ const defaultQueryResultsViewOptionList: IChoiceGroupOption[] = [
+ { key: SplitterDirection.Vertical, text: "Vertical" },
+ { key: SplitterDirection.Horizontal, text: "Horizontal" },
+ ];
+
const handleOnPriorityLevelOptionChange = (
ev: React.FormEvent,
option: IChoiceGroupOption,
@@ -182,6 +223,17 @@ export const SettingsPane: FunctionComponent = () => {
setPageOption(option.key);
};
+ const handleOnRUThresholdToggleChange = (ev: React.MouseEvent, checked?: boolean): void => {
+ setRUThresholdEnabled(checked);
+ };
+
+ const handleOnRUThresholdSpinButtonChange = (ev: React.MouseEvent, newValue?: string): void => {
+ const ruThreshold = Number(newValue);
+ if (!isNaN(ruThreshold)) {
+ setRUThreshold(ruThreshold);
+ }
+ };
+
const handleOnQueryTimeoutToggleChange = (ev: React.MouseEvent, checked?: boolean): void => {
setQueryTimeoutEnabled(checked);
};
@@ -197,6 +249,13 @@ export const SettingsPane: FunctionComponent = () => {
}
};
+ const handleOnDefaultQueryResultsViewChange = (
+ ev: React.MouseEvent,
+ option: IChoiceGroupOption,
+ ): void => {
+ setDefaultQueryResultsView(option.key as SplitterDirection);
+ };
+
const handleOnQueryRetryAttemptsSpinButtonChange = (ev: React.MouseEvent, newValue?: string): void => {
const retryAttempts = Number(newValue);
if (!isNaN(retryAttempts)) {
@@ -218,6 +277,12 @@ export const SettingsPane: FunctionComponent = () => {
}
};
+ const handleSampleDatabaseChange = async (ev: React.MouseEvent, checked?: boolean): Promise => {
+ setCopilotSampleDBEnabled(checked);
+ useQueryCopilot.getState().setCopilotSampleDBEnabled(checked);
+ setRefreshExplorer(false);
+ };
+
const choiceButtonStyles = {
root: {
clear: "both",
@@ -240,7 +305,7 @@ export const SettingsPane: FunctionComponent = () => {
],
};
- const queryTimeoutToggleStyles: IToggleStyles = {
+ const toggleStyles: IToggleStyles = {
label: {
fontSize: 12,
fontWeight: 400,
@@ -253,7 +318,7 @@ export const SettingsPane: FunctionComponent = () => {
text: {},
};
- const queryTimeoutSpinButtonStyles: ISpinButtonStyles = {
+ const spinButtonStyles: ISpinButtonStyles = {
label: {
fontSize: 12,
fontWeight: 400,
@@ -319,48 +384,102 @@ export const SettingsPane: FunctionComponent = () => {
)}
{userContext.apiType === "SQL" && (
-
-
-
+
-
-
- 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
-
-
-
-
- {queryTimeoutEnabled && (
+ <>
+
+
-
+
+
+ If a query exceeds a configured RU threshold, the query will be aborted.
+
-
- )}
+ {ruThresholdEnabled && (
+
+
+ )}
+
+
+
+
+
+
+
+ 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
+
+
+
+
+ {queryTimeoutEnabled && (
+
+
+ )}
+
+
+
)}
+
+
+
+ Select the default view to use when displaying query results.
+
+
+
+
@@ -385,7 +504,7 @@ export const SettingsPane: FunctionComponent = () => {
onIncrement={(newValue) => setRetryAttempts(parseInt(newValue) + 1 || retryAttempts)}
onDecrement={(newValue) => setRetryAttempts(parseInt(newValue) - 1 || retryAttempts)}
onValidate={(newValue) => setRetryAttempts(parseInt(newValue) || retryAttempts)}
- styles={queryTimeoutSpinButtonStyles}
+ styles={spinButtonStyles}
/>
-
+
+
Enable container pagination
@@ -454,7 +573,7 @@ export const SettingsPane: FunctionComponent = () => {
{shouldShowCrossPartitionOption && (
-
+
)}
+ {shouldShowCopilotSampleDBOption && (
+
+
Enable cross-partition query
@@ -545,6 +664,30 @@ export const SettingsPane: FunctionComponent = () => {
+
+ )}
+
+
+ Enable sample database
+
+ This is a sample database and collection with synthetic product data you can use to explore using
+ NoSQL queries and Query Advisor. This will appear as another database in the Data Explorer UI, and is
+ created by, and maintained by Microsoft at no cost to you.
+
+
+
+ Explorer Version
diff --git a/src/Explorer/Panes/SettingsPane/__snapshots__/SettingsPane.test.tsx.snap b/src/Explorer/Panes/SettingsPane/__snapshots__/SettingsPane.test.tsx.snap
index 8898bae23..f887a53dd 100644
--- a/src/Explorer/Panes/SettingsPane/__snapshots__/SettingsPane.test.tsx.snap
+++ b/src/Explorer/Panes/SettingsPane/__snapshots__/SettingsPane.test.tsx.snap
@@ -97,6 +97,74 @@ exports[`Settings Pane should render Default properly 1`] = `
+
+
+
+
+
+ If a query exceeds a configured RU threshold, the query will be aborted.
+
+
+
+
+
+
+
@@ -137,6 +205,67 @@ exports[`Settings Pane should render Default properly 1`] = `
+
+
+
+
+
+ Select the default view to use when displaying query results.
+
+
+
+
+
@@ -274,7 +403,7 @@ exports[`Settings Pane should render Default properly 1`] = `
className="settingsSection"
>
+
`;
diff --git a/src/Explorer/Panes/Tables/AddTableEntityPanel.tsx b/src/Explorer/Panes/Tables/AddTableEntityPanel.tsx
index c9d9bda10..7d73ccc1f 100644
--- a/src/Explorer/Panes/Tables/AddTableEntityPanel.tsx
+++ b/src/Explorer/Panes/Tables/AddTableEntityPanel.tsx
@@ -1,5 +1,6 @@
import { IDropdownOption, Image, Label, Stack, Text, TextField } from "@fluentui/react";
import { useBoolean } from "@fluentui/react-hooks";
+import { logConsoleError } from "Utils/NotificationConsoleUtils";
import React, { FunctionComponent, useEffect, useState } from "react";
import * as _ from "underscore";
import AddPropertyIcon from "../../../../images/Add-property.svg";
@@ -97,9 +98,19 @@ export const AddTableEntityPanel: FunctionComponent =
/* Add new entity attribute */
const onSubmit = async (): Promise => {
for (let i = 0; i < entities.length; i++) {
- const { property, type } = entities[i];
- if (property === "" || property === undefined) {
- setFormError(`Property name cannot be empty. Please enter a property name`);
+ const { property, type, value } = entities[i];
+ if ((property === "PartitionKey" && value === "") || (property === "RowKey" && value === "")) {
+ logConsoleError(`${property} cannot be empty. Please input a value for ${property}`);
+ setFormError(`${property} cannot be empty. Please input a value for ${property}`);
+ return;
+ }
+
+ if (
+ (property === "PartitionKey" && containsAnyWhiteSpace(value) === true) ||
+ (property === "RowKey" && containsAnyWhiteSpace(value) === true)
+ ) {
+ logConsoleError(`${property} cannot have whitespace. Please input a value for ${property} without whitespace`);
+ setFormError(`${property} cannot have whitespace. Please input a value for ${property} without whitespace`);
return;
}
@@ -107,12 +118,14 @@ export const AddTableEntityPanel: FunctionComponent =
setFormError(`Property type cannot be empty. Please select a type from the dropdown for property ${property}`);
return;
}
+
+ setFormError("");
}
setIsExecuting(true);
const entity: Entities.ITableEntity = entityFromAttributes(entities);
- const newEntity: Entities.ITableEntity = await tableDataClient.createDocument(queryTablesTab.collection, entity);
try {
+ const newEntity: Entities.ITableEntity = await tableDataClient.createDocument(queryTablesTab.collection, entity);
await tableEntityListViewModel.addEntityToCache(newEntity);
if (!tryInsertNewHeaders(tableEntityListViewModel, newEntity)) {
tableEntityListViewModel.redrawTableThrottled();
@@ -127,6 +140,13 @@ export const AddTableEntityPanel: FunctionComponent =
}
};
+ const containsAnyWhiteSpace = (entityValue: string) => {
+ if (/\s/.test(entityValue)) {
+ return true;
+ }
+ return false;
+ };
+
const tryInsertNewHeaders = (viewModel: TableEntityListViewModel, newEntity: Entities.ITableEntity): boolean => {
let newHeaders: string[] = [];
const keys = Object.keys(newEntity);
@@ -182,9 +202,14 @@ export const AddTableEntityPanel: FunctionComponent =
const entityChange = (value: string | Date, indexOfInput: number, key: string): void => {
const cloneEntities: EntityRowType[] = [...entities];
if (key === "property") {
- cloneEntities[indexOfInput].property = value.toString();
+ cloneEntities[indexOfInput].property = value.toString().trim();
} else if (key === "time") {
cloneEntities[indexOfInput].entityTimeValue = value.toString();
+ } else if (
+ cloneEntities[indexOfInput].property === "PartitionKey" ||
+ cloneEntities[indexOfInput].property === "RowKey"
+ ) {
+ cloneEntities[indexOfInput].value = value.toString().trim();
} else {
cloneEntities[indexOfInput].value = value.toString();
}
@@ -236,6 +261,7 @@ export const AddTableEntityPanel: FunctionComponent =
{
entityChange(newInput, selectedRow, "value");
diff --git a/src/Explorer/Panes/Tables/EditTableEntityPanel.tsx b/src/Explorer/Panes/Tables/EditTableEntityPanel.tsx
index be2f982e0..e59fceee9 100644
--- a/src/Explorer/Panes/Tables/EditTableEntityPanel.tsx
+++ b/src/Explorer/Panes/Tables/EditTableEntityPanel.tsx
@@ -1,5 +1,6 @@
import { IDropdownOption, Image, Label, Stack, Text, TextField } from "@fluentui/react";
import { useBoolean } from "@fluentui/react-hooks";
+import { logConsoleError } from "Utils/NotificationConsoleUtils";
import React, { FunctionComponent, useEffect, useState } from "react";
import * as _ from "underscore";
import AddPropertyIcon from "../../../../images/Add-property.svg";
@@ -190,7 +191,7 @@ export const EditTableEntityPanel: FunctionComponent
const onSubmit = async (): Promise => {
for (let i = 0; i < entities.length; i++) {
- const { property, type } = entities[i];
+ const { property, type, value } = entities[i];
if (property === "" || property === undefined) {
setFormError(`Property name cannot be empty. Please enter a property name`);
return;
@@ -200,6 +201,17 @@ export const EditTableEntityPanel: FunctionComponent
setFormError(`Property type cannot be empty. Please select a type from the dropdown for property ${property}`);
return;
}
+
+ if (
+ (property === "PartitionKey" && value === "") ||
+ (property === "PartitionKey" && value === undefined) ||
+ (property === "RowKey" && value === "") ||
+ (property === "RowKey" && value === undefined)
+ ) {
+ logConsoleError(`${property} cannot be empty. Please input a value for ${property}`);
+ setFormError(`${property} cannot be empty. Please input a value for ${property}`);
+ return;
+ }
}
setIsExecuting(true);
@@ -359,7 +371,7 @@ export const EditTableEntityPanel: FunctionComponent
selectedKey={entity.type}
entityPropertyPlaceHolder={detailedHelp}
entityValuePlaceholder={entity.entityValuePlaceholder}
- entityValue={entity.value?.toString()}
+ entityValue={entity.value.toString()}
isEntityTypeDate={entity.isEntityTypeDate}
entityTimeValue={entity.entityTimeValue}
isEntityValueDisable={entity.isEntityValueDisable}
diff --git a/src/Explorer/Panes/Tables/TableQuerySelectPanel/__snapshots__/TableQuerySelectPanel.test.tsx.snap b/src/Explorer/Panes/Tables/TableQuerySelectPanel/__snapshots__/TableQuerySelectPanel.test.tsx.snap
index ca5c6c926..c1e269786 100644
--- a/src/Explorer/Panes/Tables/TableQuerySelectPanel/__snapshots__/TableQuerySelectPanel.test.tsx.snap
+++ b/src/Explorer/Panes/Tables/TableQuerySelectPanel/__snapshots__/TableQuerySelectPanel.test.tsx.snap
@@ -1258,6 +1258,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
>
+
`;
diff --git a/src/Explorer/Panes/Tables/__snapshots__/AddTableEntityPanel.test.tsx.snap b/src/Explorer/Panes/Tables/__snapshots__/AddTableEntityPanel.test.tsx.snap
index 80d494808..100c5a7ae 100644
--- a/src/Explorer/Panes/Tables/__snapshots__/AddTableEntityPanel.test.tsx.snap
+++ b/src/Explorer/Panes/Tables/__snapshots__/AddTableEntityPanel.test.tsx.snap
@@ -369,6 +369,7 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
>
+
`;
diff --git a/src/Explorer/Panes/Tables/__snapshots__/EditTableEntityPanel.test.tsx.snap b/src/Explorer/Panes/Tables/__snapshots__/EditTableEntityPanel.test.tsx.snap
index da5c0c722..ffab606a2 100644
--- a/src/Explorer/Panes/Tables/__snapshots__/EditTableEntityPanel.test.tsx.snap
+++ b/src/Explorer/Panes/Tables/__snapshots__/EditTableEntityPanel.test.tsx.snap
@@ -375,6 +375,7 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
>
+
`;
diff --git a/src/Explorer/Panes/UploadFilePane/UploadFilePane.tsx b/src/Explorer/Panes/UploadFilePane/UploadFilePane.tsx
deleted file mode 100644
index d9b1d9792..000000000
--- a/src/Explorer/Panes/UploadFilePane/UploadFilePane.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import { Upload } from "Common/Upload/Upload";
-import { useSidePanel } from "hooks/useSidePanel";
-import React, { ChangeEvent, FunctionComponent, useState } from "react";
-import { logConsoleError, logConsoleInfo, logConsoleProgress } from "Utils/NotificationConsoleUtils";
-import { NotebookContentItem } from "../../Notebook/NotebookContentItem";
-import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";
-
-export interface UploadFilePanelProps {
- uploadFile: (name: string, content: string) => Promise;
-}
-
-export const UploadFilePane: FunctionComponent = ({ uploadFile }: UploadFilePanelProps) => {
- const closeSidePanel = useSidePanel((state) => state.closeSidePanel);
- const extensions: string = undefined; //ex. ".ipynb"
- const errorMessage = "Could not upload file";
- const inProgressMessage = "Uploading file to notebook server";
- const successMessage = "Successfully uploaded file to notebook server";
-
- const [files, setFiles] = useState();
- const [formErrors, setFormErrors] = useState("");
- const [isExecuting, setIsExecuting] = useState(false);
-
- const submit = () => {
- setFormErrors("");
- if (!files || files.length === 0) {
- setFormErrors("No file specified. Please input a file.");
- logConsoleError(`${errorMessage} -- No file specified. Please input a file.`);
- return;
- }
-
- const file: File = files.item(0);
-
- const clearMessage = logConsoleProgress(`${inProgressMessage}: ${file.name}`);
-
- setIsExecuting(true);
-
- onSubmit(files.item(0))
- .then(
- () => {
- logConsoleInfo(`${successMessage} ${file.name}`);
- closeSidePanel();
- },
- (error: string) => {
- setFormErrors(errorMessage);
- logConsoleError(`${errorMessage} ${file.name}: ${error}`);
- },
- )
- .finally(() => {
- setIsExecuting(false);
- clearMessage();
- });
- };
-
- const updateSelectedFiles = (event: ChangeEvent): void => {
- setFiles(event.target.files);
- };
-
- const onSubmit = async (file: File): Promise => {
- const readFileAsText = (inputFile: File): Promise => {
- const reader = new FileReader();
- return new Promise((resolve, reject) => {
- reader.onerror = () => {
- reader.abort();
- reject(`Problem parsing file: ${inputFile}`);
- };
- reader.onload = () => {
- resolve(reader.result as string);
- };
- reader.readAsText(inputFile);
- });
- };
-
- const fileContent = await readFileAsText(file);
- return uploadFile(file.name, fileContent);
- };
-
- const props: RightPaneFormProps = {
- formError: formErrors,
- isExecuting: isExecuting,
- submitButtonText: "Upload",
- onSubmit: submit,
- };
-
- return (
-
-
- );
-};
diff --git a/src/Explorer/Panes/VectorSearchPanel/AddVectorEmbeddingPolicyForm.test.tsx b/src/Explorer/Panes/VectorSearchPanel/AddVectorEmbeddingPolicyForm.test.tsx
new file mode 100644
index 000000000..400725749
--- /dev/null
+++ b/src/Explorer/Panes/VectorSearchPanel/AddVectorEmbeddingPolicyForm.test.tsx
@@ -0,0 +1,84 @@
+import "@testing-library/jest-dom/extend-expect";
+import { RenderResult, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { VectorEmbedding, VectorIndex } from "Contracts/DataModels";
+import React from "react";
+import { AddVectorEmbeddingPolicyForm } from "./AddVectorEmbeddingPolicyForm";
+
+const mockVectorEmbedding: VectorEmbedding[] = [
+ { path: "/vector1", dataType: "float32", distanceFunction: "euclidean", dimensions: 0 },
+];
+
+const mockVectorIndex: VectorIndex[] = [{ path: "/vector1", type: "flat" }];
+
+const mockOnVectorEmbeddingChange = jest.fn();
+
+describe("AddVectorEmbeddingPolicyForm", () => {
+ let component: RenderResult;
+
+ beforeEach(() => {
+ component = render(
+ = {
+ fieldGroup: {
+ height: 27,
+ },
+ field: {
+ fontSize: 12,
+ padding: "0 8px",
+ },
+};
+
+const dropdownStyles = {
+ title: {
+ height: 27,
+ lineHeight: "24px",
+ fontSize: 12,
+ },
+ dropdown: {
+ height: 27,
+ lineHeight: "24px",
+ },
+ dropdownItem: {
+ fontSize: 12,
+ },
+};
+
+export const AddVectorEmbeddingPolicyForm: FunctionComponent = ({
+ vectorEmbedding,
+ vectorIndex,
+ onVectorEmbeddingChange,
+}): JSX.Element => {
+ const onVectorEmbeddingPathError = (path: string, index?: number): string => {
+ let error = "";
+ if (!path) {
+ error = "Vector embedding path should not be empty";
+ }
+ if (
+ index >= 0 &&
+ vectorEmbeddingPolicyData?.find(
+ (vectorEmbedding: VectorEmbeddingPolicyData, dataIndex: number) =>
+ dataIndex !== index && vectorEmbedding.path === path,
+ )
+ ) {
+ error = "Vector embedding path is already defined";
+ }
+ return error;
+ };
+
+ const onVectorEmbeddingDimensionError = (dimension: number, indexType: VectorIndex["type"] | "none"): string => {
+ let error = "";
+ if (dimension <= 0 || dimension > 4096) {
+ error = "Vector embedding dimension must be greater than 0 and less than or equal 4096";
+ }
+ if (indexType === "flat" && dimension > 505) {
+ error = "Maximum allowed dimension for flat index is 505";
+ }
+ return error;
+ };
+
+ const initializeData = (vectorEmbedding: VectorEmbedding[], vectorIndex: VectorIndex[]) => {
+ const mergedData: VectorEmbeddingPolicyData[] = [];
+ vectorEmbedding.forEach((embedding) => {
+ const matchingIndex = vectorIndex.find((index) => index.path === embedding.path);
+ mergedData.push({
+ ...embedding,
+ indexType: matchingIndex?.type || "none",
+ pathError: onVectorEmbeddingPathError(embedding.path),
+ dimensionsError: onVectorEmbeddingDimensionError(embedding.dimensions, matchingIndex?.type || "none"),
+ });
+ });
+ return mergedData;
+ };
+
+ const [vectorEmbeddingPolicyData, setVectorEmbeddingPolicyData] = useState(
+ initializeData(vectorEmbedding, vectorIndex),
+ );
+
+ React.useEffect(() => {
+ propagateData();
+ }, [vectorEmbeddingPolicyData]);
+
+ const propagateData = () => {
+ const vectorEmbeddings: VectorEmbedding[] = vectorEmbeddingPolicyData.map((policy: VectorEmbeddingPolicyData) => ({
+ dataType: policy.dataType,
+ dimensions: policy.dimensions,
+ distanceFunction: policy.distanceFunction,
+ path: policy.path,
+ }));
+ const vectorIndexingPolicies: VectorIndex[] = vectorEmbeddingPolicyData
+ .filter((policy: VectorEmbeddingPolicyData) => policy.indexType !== "none")
+ .map(
+ (policy) =>
+ ({
+ path: policy.path,
+ type: policy.indexType,
+ }) as VectorIndex,
+ );
+ const validationPassed = vectorEmbeddingPolicyData.every(
+ (policy: VectorEmbeddingPolicyData) => policy.pathError === "" && policy.dimensionsError === "",
+ );
+ onVectorEmbeddingChange(vectorEmbeddings, vectorIndexingPolicies, validationPassed);
+ };
+
+ const onVectorEmbeddingPathChange = (index: number, event: React.ChangeEvent) => {
+ const value = event.target.value.trim();
+ const vectorEmbeddings = [...vectorEmbeddingPolicyData];
+ if (!vectorEmbeddings[index]?.path && !value.startsWith("/")) {
+ vectorEmbeddings[index].path = "/" + value;
+ } else {
+ vectorEmbeddings[index].path = value;
+ }
+ const error = onVectorEmbeddingPathError(value, index);
+ vectorEmbeddings[index].pathError = error;
+ setVectorEmbeddingPolicyData(vectorEmbeddings);
+ };
+
+ const onVectorEmbeddingDimensionsChange = (index: number, event: React.ChangeEvent) => {
+ const value = parseInt(event.target.value.trim()) || 0;
+ const vectorEmbeddings = [...vectorEmbeddingPolicyData];
+ const vectorEmbedding = vectorEmbeddings[index];
+ vectorEmbeddings[index].dimensions = value;
+ const error = onVectorEmbeddingDimensionError(value, vectorEmbedding.indexType);
+ vectorEmbeddings[index].dimensionsError = error;
+ setVectorEmbeddingPolicyData(vectorEmbeddings);
+ };
+
+ const onVectorEmbeddingIndexTypeChange = (index: number, option: IDropdownOption): void => {
+ const vectorEmbeddings = [...vectorEmbeddingPolicyData];
+ const vectorEmbedding = vectorEmbeddings[index];
+ vectorEmbeddings[index].indexType = option.key as never;
+ const error = onVectorEmbeddingDimensionError(vectorEmbedding.dimensions, vectorEmbedding.indexType);
+ vectorEmbeddings[index].dimensionsError = error;
+ setVectorEmbeddingPolicyData(vectorEmbeddings);
+ };
+
+ const onVectorEmbeddingPolicyChange = (
+ index: number,
+ option: IDropdownOption,
+ property: VectorEmbeddingPolicyProperty,
+ ): void => {
+ const vectorEmbeddings = [...vectorEmbeddingPolicyData];
+ vectorEmbeddings[index][property] = option.key as never;
+ setVectorEmbeddingPolicyData(vectorEmbeddings);
+ };
+
+ const onAdd = () => {
+ setVectorEmbeddingPolicyData([
+ ...vectorEmbeddingPolicyData,
+ {
+ path: "",
+ dataType: "float32",
+ distanceFunction: "euclidean",
+ dimensions: 0,
+ indexType: "none",
+ pathError: onVectorEmbeddingPathError(""),
+ dimensionsError: onVectorEmbeddingDimensionError(0, "none"),
+ },
+ ]);
+ };
+
+ const onDelete = (index: number) => {
+ const vectorEmbeddings = vectorEmbeddingPolicyData.filter((_uniqueKey, j) => index !== j);
+ setVectorEmbeddingPolicyData(vectorEmbeddings);
+ };
+
+ return (
+
+ {vectorEmbeddingPolicyData.length > 0 &&
+ vectorEmbeddingPolicyData.map((vectorEmbeddingPolicy: VectorEmbeddingPolicyData, index: number) => (
+
+
+
+
+
+ ) => onVectorEmbeddingPathChange(index, event)}
+ value={vectorEmbeddingPolicy.path || ""}
+ errorMessage={vectorEmbeddingPolicy.pathError}
+ />
+
+
+
+ , option: IDropdownOption) =>
+ onVectorEmbeddingPolicyChange(index, option, "dataType")
+ }
+ >
+
+
+
+ , option: IDropdownOption) =>
+ onVectorEmbeddingPolicyChange(index, option, "distanceFunction")
+ }
+ >
+
+
+
+ ) =>
+ onVectorEmbeddingDimensionsChange(index, event)
+ }
+ errorMessage={vectorEmbeddingPolicy.dimensionsError}
+ />
+
+
+
+ , option: IDropdownOption) =>
+ onVectorEmbeddingIndexTypeChange(index, option)
+ }
+ >
+
+
+ onDelete(index)}
+ />
+
+
+ ))}
+
+ Add vector embedding
+
+
+ );
+};
diff --git a/src/Explorer/Panes/VectorSearchPanel/VectorSearchUtils.ts b/src/Explorer/Panes/VectorSearchPanel/VectorSearchUtils.ts
new file mode 100644
index 000000000..0f5547aa7
--- /dev/null
+++ b/src/Explorer/Panes/VectorSearchPanel/VectorSearchUtils.ts
@@ -0,0 +1,16 @@
+import { IDropdownOption } from "@fluentui/react";
+
+const dataTypes = ["float32", "uint8", "int8"];
+const distanceFunctions = ["euclidean", "cosine", "dotproduct"];
+const indexTypes = ["none", "flat", "diskANN", "quantizedFlat"];
+
+export const getDataTypeOptions = (): IDropdownOption[] => createDropdownOptionsFromLiterals(dataTypes);
+export const getDistanceFunctionOptions = (): IDropdownOption[] => createDropdownOptionsFromLiterals(distanceFunctions);
+export const getIndexTypeOptions = (): IDropdownOption[] => createDropdownOptionsFromLiterals(indexTypes);
+
+function createDropdownOptionsFromLiterals(literals: T[]): IDropdownOption[] {
+ return literals.map((value) => ({
+ key: value,
+ text: value,
+ }));
+}
diff --git a/src/Explorer/Panes/__snapshots__/AddCollectionPanel.test.tsx.snap b/src/Explorer/Panes/__snapshots__/AddCollectionPanel.test.tsx.snap
index 0a19a654b..93f52c6ce 100644
--- a/src/Explorer/Panes/__snapshots__/AddCollectionPanel.test.tsx.snap
+++ b/src/Explorer/Panes/__snapshots__/AddCollectionPanel.test.tsx.snap
@@ -3,6 +3,7 @@
exports[`AddCollectionPanel should render Default properly 1`] = `
-
-