Add unique keys feature back

* Added feature flags to the components

* Remove config.json

package-lock.json

@@ -443,15 +443,9 @@
       "license": "0BSD"
     },
     "node_modules/@azure/cosmos": {
-<<<<<<< HEAD
-      "version": "4.2.0-beta.1",
-      "resolved": "https://registry.npmjs.org/@azure/cosmos/-/cosmos-4.2.0-beta.1.tgz",
-      "integrity": "sha512-mREONehm1DxjEKXGaNU6Wmpf9Ckb9IrhKFXhDFVs45pxmoEb3y2s/Ub0owuFmqlphpcS1zgtYQn5exn+lwnJuQ==",
-=======
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/@azure/cosmos/-/cosmos-4.5.0.tgz",
       "integrity": "sha512-JsTh4twb6FcwP7rJwxQiNZQ/LGtuF6gmciaxY9Rnp6/A325Lhsw/SH4R2ArpT0yCvozbZpweIwdPfUkXVBtp5w==",
->>>>>>> master
       "license": "MIT",
       "dependencies": {
         "@azure/abort-controller": "^2.1.2",
@@ -499,12 +493,7 @@
     "node_modules/@azure/cosmos/node_modules/tslib": {
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
-<<<<<<< HEAD
-      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
-      "license": "0BSD"
-=======
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="
->>>>>>> master
     },
     "node_modules/@azure/identity": {
       "version": "4.5.0",

src/Common/CosmosClient.ts

@@ -36,7 +36,7 @@ export const tokenProvider = async (requestInfo: Cosmos.RequestInfo) => {
     return authorizationToken;
   }
 
-  if (configContext.platform === Platform.Emulator) {
+  if (configContext.platform === Platform.Emulator || configContext.platform === Platform.VNextEmulator) {
     // TODO This SDK method mutates the headers object. Find a better one or fix the SDK.
     await Cosmos.setAuthorizationTokenHeaderUsingMasterKey(verb, resourceId, resourceType, headers, EmulatorMasterKey);
     return decodeURIComponent(headers.authorization);
@@ -119,7 +119,7 @@ export const requestPlugin: Cosmos.Plugin<any> = async (requestContext, diagnost
 };
 
 export const endpoint = () => {
-  if (configContext.platform === Platform.Emulator) {
+  if (configContext.platform === Platform.Emulator || configContext.platform === Platform.VNextEmulator) {
     // In worker scope, _global(self).parent does not exist
     const location = _global.parent ? _global.parent.location : _global.location;
     return configContext.EMULATOR_ENDPOINT || location.origin;

src/ConfigContext.ts

@@ -19,6 +19,7 @@ export enum Platform {
   Hosted = "Hosted",
   Emulator = "Emulator",
   Fabric = "Fabric",
+  VNextEmulator = "VNextEmulator",
 }
 
 export interface ConfigContext {
@@ -215,7 +216,7 @@ export async function initializeConfiguration(): Promise<ConfigContext> {
       const AAD_ENDPOINT = params.get("aadEndpoint") || "";
       updateConfigContext({ AAD_ENDPOINT });
     }
-    if (params.has("platform")) {
+    if (params.has("platform") && configContext.platform !== Platform.VNextEmulator) {
       const platform = params.get("platform");
       switch (platform) {
         default:

src/Explorer/ContextMenuButtonFactory.tsx

@@ -10,6 +10,7 @@ import { useDatabases } from "Explorer/useDatabases";
 import { isFabric, isFabricNative } from "Platform/Fabric/FabricUtil";
 import { Action } from "Shared/Telemetry/TelemetryConstants";
 import { traceOpen } from "Shared/Telemetry/TelemetryProcessor";
+import { areAdvancedScriptsSupported } from "Utils/PlatformFeatureUtils";
 import { ReactTabKind, useTabs } from "hooks/useTabs";
 import React from "react";
 import AddCollectionIcon from "../../images/AddCollection.svg";
@@ -130,6 +131,7 @@ export const createCollectionContextMenuButton = (
   }
 
   if (
+    areAdvancedScriptsSupported(configContext.platform) &&
     configContext.platform !== Platform.Fabric &&
     (userContext.apiType === "SQL" || userContext.apiType === "Gremlin")
   ) {

src/Explorer/Controls/Settings/SettingsComponent.tsx

@@ -15,6 +15,7 @@ import { useDatabases } from "Explorer/useDatabases";
 import { isFabricNative } from "Platform/Fabric/FabricUtil";
 import { isVectorSearchEnabled } from "Utils/CapabilityUtils";
 import { isRunningOnPublicCloud } from "Utils/CloudUtils";
+import { isFeatureSupported, PlatformFeature } from "Utils/PlatformFeatureUtils";
 import * as React from "react";
 import DiscardIcon from "../../../../images/discard.svg";
 import SaveIcon from "../../../../images/save-cosmos.svg";
@@ -60,15 +61,15 @@ import {
   AddMongoIndexProps,
   ChangeFeedPolicyState,
   GeospatialConfigType,
-  MongoIndexTypes,
-  SettingsV2TabTypes,
-  TtlType,
   getMongoNotification,
   getTabTitle,
   hasDatabaseSharedThroughput,
   isDirty,
+  MongoIndexTypes,
   parseConflictResolutionMode,
   parseConflictResolutionProcedure,
+  SettingsV2TabTypes,
+  TtlType,
 } from "./SettingsUtils";
 
 interface SettingsV2TabInfo {
@@ -276,14 +277,14 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
     this.saveSettingsButton = {
       isEnabled: this.isSaveSettingsButtonEnabled,
       isVisible: () => {
-        return true;
+        return isFeatureSupported(PlatformFeature.UpdateCollection);
       },
     };
 
     this.discardSettingsChangesButton = {
       isEnabled: this.isDiscardSettingsButtonEnabled,
       isVisible: () => {
-        return true;
+        return isFeatureSupported(PlatformFeature.UpdateCollection);
       },
     };
 
@@ -1335,7 +1336,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       });
     }
 
-    if (this.shouldShowComputedPropertiesEditor) {
+    if (isFeatureSupported(PlatformFeature.ComputedProperties) && this.shouldShowComputedPropertiesEditor) {
       tabs.push({
         tab: SettingsV2TabTypes.ComputedPropertiesTab,
         content: <ComputedPropertiesComponent {...computedPropertiesComponentProps} />,

src/Explorer/Controls/Settings/SettingsSubComponents/ScaleComponent.tsx

@@ -45,7 +45,7 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
 
   constructor(props: ScaleComponentProps) {
     super(props);
-    this.isEmulator = configContext.platform === Platform.Emulator;
+    this.isEmulator = configContext.platform === Platform.Emulator || configContext.platform === Platform.VNextEmulator;
     this.offer = this.props.database?.offer() || this.props.collection?.offer();
     this.databaseId = this.props.database?.id() || this.props.collection.databaseId;
     this.collectionId = this.props.collection?.id();

src/Explorer/Explorer.tsx

@@ -3,7 +3,7 @@ import { Link } from "@fluentui/react/lib/Link";
 import { isPublicInternetAccessAllowed } from "Common/DatabaseAccountUtility";
 import { Environment, getEnvironment } from "Common/EnvironmentUtility";
 import { sendMessage } from "Common/MessageHandler";
-import { Platform, configContext } from "ConfigContext";
+import { configContext, Platform } from "ConfigContext";
 import { MessageTypes } from "Contracts/ExplorerContracts";
 import { useDataPlaneRbac } from "Explorer/Panes/SettingsPane/SettingsPane";
 import { getCopilotEnabled, isCopilotFeatureRegistered } from "Explorer/QueryCopilot/Shared/QueryCopilotClient";
@@ -18,6 +18,7 @@ import { LocalStorageUtility, StorageKey } from "Shared/StorageUtility";
 import { acquireMsalTokenForAccount } from "Utils/AuthorizationUtils";
 import { allowedNotebookServerUrls, validateEndpoint } from "Utils/EndpointUtils";
 import { featureRegistered } from "Utils/FeatureRegistrationUtils";
+import { isFeatureSupported, PlatformFeature } from "Utils/PlatformFeatureUtils";
 import { update } from "Utils/arm/generatedClients/cosmos/databaseAccounts";
 import { useQueryCopilot } from "hooks/useQueryCopilot";
 import * as ko from "knockout";
@@ -1187,6 +1188,7 @@ export default class Explorer {
 
     // TODO: remove reference to isNotebookEnabled and isNotebooksEnabledForAccount
     const isNotebookEnabled =
+      isFeatureSupported(PlatformFeature.Notebooks) &&
       configContext.platform !== Platform.Fabric &&
       (userContext.features.notebooksDownBanner ||
         useNotebook.getState().isPhoenixNotebooks ||
@@ -1194,7 +1196,11 @@ export default class Explorer {
     useNotebook.getState().setIsNotebookEnabled(isNotebookEnabled);
     useNotebook
       .getState()
-      .setIsShellEnabled(useNotebook.getState().isPhoenixFeatures && isPublicInternetAccessAllowed());
+      .setIsShellEnabled(
+        isFeatureSupported(PlatformFeature.CloudShell) &&
+          useNotebook.getState().isPhoenixFeatures &&
+          isPublicInternetAccessAllowed(),
+      );
 
     TelemetryProcessor.trace(Action.NotebookEnabled, ActionModifiers.Mark, {
       isNotebookEnabled,
@@ -1215,6 +1221,7 @@ export default class Explorer {
 
   public async configureCopilot(): Promise<void> {
     if (
+      !isFeatureSupported(PlatformFeature.Copilot) ||
       userContext.apiType !== "SQL" ||
       !userContext.subscriptionId ||
       ![Environment.Development, Environment.Mpac, Environment.Prod].includes(getEnvironment())

src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx

@@ -1,5 +1,6 @@
 import { KeyboardAction } from "KeyboardShortcuts";
 import { isDataplaneRbacSupported } from "Utils/APITypeUtils";
+import { areAdvancedScriptsSupported, isFeatureSupported, PlatformFeature } from "Utils/PlatformFeatureUtils";
 import * as React from "react";
 import { useEffect, useState } from "react";
 import AddSqlQueryIcon from "../../../../images/AddSqlQuery_16x16.svg";
@@ -17,7 +18,7 @@ import SynapseIcon from "../../../../images/synapse-link.svg";
 import VSCodeIcon from "../../../../images/vscode.svg";
 import { AuthType } from "../../../AuthType";
 import * as Constants from "../../../Common/Constants";
-import { Platform, configContext } from "../../../ConfigContext";
+import { configContext, Platform } from "../../../ConfigContext";
 import * as ViewModels from "../../../Contracts/ViewModels";
 import { userContext } from "../../../UserContext";
 import { isRunningOnNationalCloud } from "../../../Utils/CloudUtils";
@@ -52,6 +53,7 @@ export function createStaticCommandBarButtons(
   };
 
   if (
+    isFeatureSupported(PlatformFeature.SynapseLink) &&
     configContext.platform !== Platform.Fabric &&
     userContext.apiType !== "Tables" &&
     userContext.apiType !== "Cassandra"
@@ -63,7 +65,9 @@ export function createStaticCommandBarButtons(
     }
     if (userContext.apiType !== "Gremlin") {
       const addVsCode = createOpenVsCodeDialogButton(container);
-      buttons.push(addVsCode);
+      if (addVsCode) {
+        buttons.push(addVsCode);
+      }
     }
   }
 
@@ -242,11 +246,17 @@ export function createDivider(): CommandButtonComponentProps {
 
 function areScriptsSupported(): boolean {
   return (
-    configContext.platform !== Platform.Fabric && (userContext.apiType === "SQL" || userContext.apiType === "Gremlin")
+    areAdvancedScriptsSupported() &&
+    configContext.platform !== Platform.Fabric &&
+    (userContext.apiType === "SQL" || userContext.apiType === "Gremlin")
   );
 }
 
 function createOpenSynapseLinkDialogButton(container: Explorer): CommandButtonComponentProps {
+  if (!isFeatureSupported(PlatformFeature.SynapseLink)) {
+    return undefined;
+  }
+
   if (configContext.platform === Platform.Emulator) {
     return undefined;
   }
@@ -274,6 +284,10 @@ function createOpenSynapseLinkDialogButton(container: Explorer): CommandButtonCo
 }
 
 function createOpenVsCodeDialogButton(container: Explorer): CommandButtonComponentProps {
+  if (!isFeatureSupported(PlatformFeature.VSCodeIntegration)) {
+    return undefined;
+  }
+
   const label = "Visual Studio Code";
   return {
     iconSrc: VSCodeIcon,

src/Explorer/Panes/AddCollectionPanel/AddCollectionPanel.tsx

@@ -50,6 +50,7 @@ import * as TelemetryProcessor from "Shared/Telemetry/TelemetryProcessor";
 import { userContext } from "UserContext";
 import { getCollectionName } from "Utils/APITypeUtils";
 import { isCapabilityEnabled, isServerlessAccount, isVectorSearchEnabled } from "Utils/CapabilityUtils";
+import { isFeatureSupported, PlatformFeature } from "Utils/PlatformFeatureUtils";
 import { getUpsellMessage } from "Utils/PricingUtils";
 import { ValidCosmosDbIdDescription, ValidCosmosDbIdInputPattern } from "Utils/ValidationUtils";
 import * as AutoPilotUtils from "../../../Utils/AutoPilotUtils";
@@ -727,7 +728,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
             />
           )}
 
-          {!isFabricNative() && userContext.apiType === "SQL" && (
+          {isFeatureSupported(PlatformFeature.UniqueKeys) && !isFabricNative() && userContext.apiType === "SQL" && (
             <Stack style={{ marginTop: -2, marginBottom: -4 }}>
               {UniqueKeysHeader()}
               {this.state.uniqueKeys.map((uniqueKey: string, i: number): JSX.Element => {
@@ -900,78 +901,86 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
               </CollapsibleSectionComponent>
             </Stack>
           )}
-          {!isFabricNative() && userContext.apiType !== "Tables" && (
-            <CollapsibleSectionComponent
-              title="Advanced"
-              isExpandedByDefault={false}
-              onExpand={() => {
-                TelemetryProcessor.traceOpen(Action.ExpandAddCollectionPaneAdvancedSection);
-                scrollToSection("collapsibleAdvancedSectionContent");
-              }}
-            >
-              <Stack className="panelGroupSpacing" id="collapsibleAdvancedSectionContent">
-                {isCapabilityEnabled("EnableMongo") && !isCapabilityEnabled("EnableMongo16MBDocumentSupport") && (
-                  <Stack className="panelGroupSpacing">
-                    <Stack horizontal>
-                      <span className="mandatoryStar">*&nbsp;</span>
-                      <Text className="panelTextBold" variant="small">
-                        Indexing
-                      </Text>
-                      <TooltipHost
-                        directionalHint={DirectionalHint.bottomLeftEdge}
-                        content="The _id field is indexed by default. Creating a wildcard index for all fields will optimize queries and is recommended for development."
-                      >
-                        <Icon
-                          iconName="Info"
-                          className="panelInfoIcon"
-                          tabIndex={0}
-                          ariaLabel="The _id field is indexed by default. Creating a wildcard index for all fields will optimize queries and is recommended for development."
-                        />
-                      </TooltipHost>
+          {isFeatureSupported(PlatformFeature.AdvancedContainerSettings) &&
+            !isFabricNative() &&
+            userContext.apiType !== "Tables" && (
+              <CollapsibleSectionComponent
+                title="Advanced"
+                isExpandedByDefault={false}
+                onExpand={() => {
+                  TelemetryProcessor.traceOpen(Action.ExpandAddCollectionPaneAdvancedSection);
+                  scrollToSection("collapsibleAdvancedSectionContent");
+                }}
+              >
+                <Stack className="panelGroupSpacing" id="collapsibleAdvancedSectionContent">
+                  {isCapabilityEnabled("EnableMongo") && !isCapabilityEnabled("EnableMongo16MBDocumentSupport") && (
+                    <Stack className="panelGroupSpacing">
+                      <Stack horizontal>
+                        <span className="mandatoryStar">*&nbsp;</span>
+                        <Text className="panelTextBold" variant="small">
+                          Indexing
+                        </Text>
+                        <TooltipHost
+                          directionalHint={DirectionalHint.bottomLeftEdge}
+                          content="The _id field is indexed by default. Creating a wildcard index for all fields will optimize queries and is recommended for development."
+                        >
+                          <Icon
+                            iconName="Info"
+                            className="panelInfoIcon"
+                            tabIndex={0}
+                            ariaLabel="The _id field is indexed by default. Creating a wildcard index for all fields will optimize queries and is recommended for development."
+                          />
+                        </TooltipHost>
+                      </Stack>
+
+                      <Checkbox
+                        label="Create a Wildcard Index on all fields"
+                        checked={this.state.createMongoWildCardIndex}
+                        styles={{
+                          text: { fontSize: 12 },
+                          checkbox: { width: 12, height: 12 },
+                          label: { padding: 0, alignItems: "center" },
+                        }}
+                        onChange={(ev: React.FormEvent<HTMLElement>, isChecked: boolean) =>
+                          this.setState({ createMongoWildCardIndex: isChecked })
+                        }
+                      />
                     </Stack>
+                  )}
 
-                    <Checkbox
-                      label="Create a Wildcard Index on all fields"
-                      checked={this.state.createMongoWildCardIndex}
-                      styles={{
-                        text: { fontSize: 12 },
-                        checkbox: { width: 12, height: 12 },
-                        label: { padding: 0, alignItems: "center" },
-                      }}
-                      onChange={(ev: React.FormEvent<HTMLElement>, isChecked: boolean) =>
-                        this.setState({ createMongoWildCardIndex: isChecked })
-                      }
-                    />
-                  </Stack>
-                )}
-
-                {userContext.apiType === "SQL" && (
-                  <Stack className="panelGroupSpacing">
-                    <Checkbox
-                      label="My application uses an older Cosmos .NET or Java SDK version (.NET V1 or Java V2)"
-                      checked={this.state.useHashV1}
-                      styles={{
-                        text: { fontSize: 12 },
-                        checkbox: { width: 12, height: 12 },
-                        label: { padding: 0, alignItems: "center", wordWrap: "break-word", whiteSpace: "break-spaces" },
-                      }}
-                      onChange={(ev: React.FormEvent<HTMLElement>, isChecked: boolean) =>
-                        this.setState({ useHashV1: isChecked, subPartitionKeys: [] })
-                      }
-                    />
-                    <Text variant="small">
-                      <Icon iconName="InfoSolid" className="removeIcon" /> To ensure compatibility with older SDKs, the
-                      created container will use a legacy partitioning scheme that supports partition key values of size
-                      only up to 101 bytes. If this is enabled, you will not be able to use hierarchical partition keys.{" "}
-                      <Link href="https://aka.ms/cosmos-large-pk" target="_blank">
-                        Learn more
-                      </Link>
-                    </Text>
-                  </Stack>
-                )}
-              </Stack>
-            </CollapsibleSectionComponent>
-          )}
+                  {userContext.apiType === "SQL" && (
+                    <Stack className="panelGroupSpacing">
+                      <Checkbox
+                        label="My application uses an older Cosmos .NET or Java SDK version (.NET V1 or Java V2)"
+                        checked={this.state.useHashV1}
+                        styles={{
+                          text: { fontSize: 12 },
+                          checkbox: { width: 12, height: 12 },
+                          label: {
+                            padding: 0,
+                            alignItems: "center",
+                            wordWrap: "break-word",
+                            whiteSpace: "break-spaces",
+                          },
+                        }}
+                        onChange={(ev: React.FormEvent<HTMLElement>, isChecked: boolean) =>
+                          this.setState({ useHashV1: isChecked, subPartitionKeys: [] })
+                        }
+                      />
+                      <Text variant="small">
+                        <Icon iconName="InfoSolid" className="removeIcon" /> To ensure compatibility with older SDKs,
+                        the created container will use a legacy partitioning scheme that supports partition key values
+                        of size only up to 101 bytes. If this is enabled, you will not be able to use hierarchical
+                        partition keys.{" "}
+                        <Link href="https://aka.ms/cosmos-large-pk" target="_blank">
+                          Learn more
+                        </Link>
+                      </Text>
+                    </Stack>
+                  )}
+                </Stack>
+              </CollapsibleSectionComponent>
+            )}
         </div>
 
         <PanelFooterComponent buttonLabel="OK" isButtonDisabled={this.state.isThroughputCapExceeded} />
@@ -1134,6 +1143,10 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
   // }
 
   private shouldShowCollectionThroughputInput(): boolean {
+    if (!isFeatureSupported(PlatformFeature.ContainerThroughput)) {
+      return false;
+    }
+
     if (isServerlessAccount()) {
       return false;
     }
@@ -1160,11 +1173,15 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
   }
 
   private shouldShowVectorSearchParameters() {
-    return isVectorSearchEnabled() && (isServerlessAccount() || this.shouldShowCollectionThroughputInput());
+    return (
+      isFeatureSupported(PlatformFeature.VectorSearch) &&
+      isVectorSearchEnabled() &&
+      (isServerlessAccount() || this.shouldShowCollectionThroughputInput())
+    );
   }
 
   private shouldShowFullTextSearchParameters() {
-    return !isFabricNative() && this.showFullTextSearch;
+    return isFeatureSupported(PlatformFeature.FullTextSearch) && !isFabricNative() && this.showFullTextSearch;
   }
 
   private parseUniqueKeys(): DataModels.UniqueKeyPolicy {

src/Explorer/Panes/AddCollectionPanel/AddCollectionPanelUtility.tsx

@@ -6,6 +6,7 @@ import { getFullTextLanguageOptions } from "Explorer/Controls/FullTextSeach/Full
 import { isFabricNative } from "Platform/Fabric/FabricUtil";
 import React from "react";
 import { userContext } from "UserContext";
+import { isFeatureSupported, PlatformFeature } from "Utils/PlatformFeatureUtils";
 
 export function getPartitionKeyTooltipText(): string {
   if (userContext.apiType === "Mongo") {
@@ -85,7 +86,11 @@ export function UniqueKeysHeader(): JSX.Element {
 }
 
 export function shouldShowAnalyticalStoreOptions(): boolean {
-  if (isFabricNative() || configContext.platform === Platform.Emulator) {
+  if (
+    !isFeatureSupported(PlatformFeature.AnalyticalStore) ||
+    isFabricNative() ||
+    configContext.platform === Platform.Emulator
+  ) {
     return false;
   }
 

src/Explorer/Panes/SettingsPane/SettingsPane.tsx

@@ -202,7 +202,7 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
   const styles = useStyles();
 
   const explorerVersion = configContext.gitSha;
-  const isEmulator = configContext.platform === Platform.Emulator;
+  const isEmulator = configContext.platform === Platform.Emulator || configContext.platform === Platform.VNextEmulator;
   const shouldShowQueryPageOptions = userContext.apiType === "SQL";
   const showRetrySettings =
     (userContext.apiType === "SQL" || userContext.apiType === "Tables" || userContext.apiType === "Gremlin") &&

src/Explorer/Tree/treeNodeUtil.tsx

@@ -21,7 +21,12 @@ import { useCommandBar } from "../Menus/CommandBar/CommandBarComponentAdapter";
 import { useSelectedNode } from "../useSelectedNode";
 
 export const shouldShowScriptNodes = (): boolean => {
-  return !isFabric() && configContext.platform !== Platform.Emulator && (userContext.apiType === "SQL" || userContext.apiType === "Gremlin");
+  return (
+    !isFabric() &&
+    configContext.platform !== Platform.Emulator &&
+    configContext.platform !== Platform.VNextEmulator &&
+    (userContext.apiType === "SQL" || userContext.apiType === "Gremlin")
+  );
 };
 
 const TreeDatabaseIcon = <DatabaseRegular fontSize={16} />;

src/Utils/PlatformFeatureUtils.ts

@@ -0,0 +1,116 @@
+import { Platform, configContext } from "../ConfigContext";
+
+/**
+ * Feature flags enumeration - centralized feature definitions
+ */
+export enum PlatformFeature {
+  // UI/Core Features
+  Queries = "Queries",
+  Notebooks = "Notebooks",
+  SynapseLink = "SynapseLink",
+  VSCodeIntegration = "VSCodeIntegration",
+  GlobalSecondaryIndex = "GlobalSecondaryIndex",
+  DataPlaneRbac = "DataPlaneRbac",
+  EntraIDLogin = "EntraIDLogin",
+  EntreIDRbac = "EntreIDRbac",
+  RetrySettings = "RetrySettings",
+  GraphAutoVizOption = "GraphAutoVizOption",
+  CrossPartitionOption = "CrossPartitionOption",
+  EnhancedQueryControl = "EnhancedQueryControl",
+  ParallelismOption = "ParallelismOption",
+  EnableEntraIdRbac = "EnableEntraIdRbac",
+  PriorityBasedExecution = "PriorityBasedExecution",
+  RegionSelection = "RegionSelection",
+  Copilot = "Copilot",
+  CloudShell = "CloudShell",
+  ContainerPagination = "ContainerPagination",
+  FullTextSearch = "FullTextSearch",
+  VectorSearch = "VectorSearch",
+  ThroughputBucketing = "ThroughputBucketing",
+  ComputedProperties = "ComputedProperties",
+  AnalyticalStore = "AnalyticalStore",
+  UniqueKeys = "UniqueKeys",
+  ContainerThroughput = "ContainerThroughput",
+  AdvancedContainerSettings = "AdvancedContainerSettings",
+
+  // CRUD Operations - Database
+  CreateDatabase = "CreateDatabase",
+  ReadDatabase = "ReadDatabase",
+  DeleteDatabase = "DeleteDatabase",
+
+  // CRUD Operations - Collection
+  CreateCollection = "CreateCollection",
+  ReadCollection = "ReadCollection",
+  UpdateCollection = "UpdateCollection",
+  DeleteCollection = "DeleteCollection",
+
+  // CRUD Operations - Document
+  CreateDocument = "CreateDocument",
+  ReadDocument = "ReadDocument",
+  UpdateDocument = "UpdateDocument",
+  DeleteDocument = "DeleteDocument",
+
+  // Advanced Database Features
+  StoredProcedures = "StoredProcedures",
+  UDF = "UDF",
+  Trigger = "Trigger",
+}
+
+/**
+ * Feature matrix per platform.
+ * - Only list platforms that have restrictions. If a platform is not present, all features are considered supported.
+ * - Start with VNextEmulator today; add more platforms/flags here later without touching calling code.
+ */
+const FEATURE_MATRIX: ReadonlyMap<Platform, ReadonlySet<PlatformFeature>> = new Map([
+  [
+    Platform.VNextEmulator,
+    new Set<PlatformFeature>([
+      PlatformFeature.Queries,
+      PlatformFeature.UniqueKeys,
+
+      PlatformFeature.CreateDatabase,
+      PlatformFeature.ReadDatabase,
+      PlatformFeature.DeleteDatabase,
+
+      PlatformFeature.CreateCollection,
+      PlatformFeature.ReadCollection,
+      PlatformFeature.UpdateCollection,
+      PlatformFeature.DeleteCollection,
+
+      PlatformFeature.CreateDocument,
+      PlatformFeature.ReadDocument,
+      PlatformFeature.UpdateDocument,
+      PlatformFeature.DeleteDocument,
+    ]),
+  ],
+]);
+
+/**
+ * Central feature flag function - checks if a feature is enabled for current platform
+ * @param feature The feature to check
+ * @param platform Optional platform override, defaults to current platform
+ * @returns True if the feature is enabled for the platform, false otherwise
+ */
+export const isFeatureSupported = (feature: PlatformFeature, platform?: Platform): boolean => {
+  const currentPlatform = platform ?? configContext.platform;
+  if (currentPlatform !== Platform.VNextEmulator) {
+    return true;
+  }
+  // VNextEmulator: check from the feature matrix
+  const vnextFeatures = FEATURE_MATRIX.get(Platform.VNextEmulator);
+  return vnextFeatures?.has(feature) ?? false;
+};
+
+export const areAdvancedScriptsSupported = (platform?: Platform): boolean => {
+  const currentPlatform = platform ?? configContext.platform;
+  if (currentPlatform !== Platform.VNextEmulator) {
+    return true;
+  }
+
+  // Otherwise, require all script features to be enabled
+  return (
+    isFeatureSupported(PlatformFeature.StoredProcedures, currentPlatform) &&
+    isFeatureSupported(PlatformFeature.UDF, currentPlatform) &&
+    isFeatureSupported(PlatformFeature.Trigger, currentPlatform)
+  );
+};

src/Utils/QueryUtils.ts

@@ -1,4 +1,5 @@
 import { PartitionKey, PartitionKeyDefinition } from "@azure/cosmos";
+import { configContext, Platform } from "ConfigContext";
 import { getRUThreshold, ruThresholdEnabled } from "Shared/StorageUtility";
 import { userContext } from "UserContext";
 import { logConsoleWarning } from "Utils/NotificationConsoleUtils";
@@ -66,7 +67,11 @@ export function buildDocumentsQueryPartitionProjections(
       }
     });
     const fullAccess = `${collectionAlias}${projectedProperty}`;
-    if (!isSystemPartitionKey) {
+    if (
+      !isSystemPartitionKey &&
+      configContext.platform !== Platform.Emulator &&
+      configContext.platform !== Platform.VNextEmulator
+    ) {
       const wrappedProjection = `IIF(IS_DEFINED(${fullAccess}), ${fullAccess}, {})`;
       projections.push(wrappedProjection);
     } else {

src/hooks/useKnockoutExplorer.ts

@@ -86,7 +86,7 @@ export function useKnockoutExplorer(platform: Platform): Explorer {
         let explorer: Explorer;
         if (platform === Platform.Hosted) {
           explorer = await configureHosted();
-        } else if (platform === Platform.Emulator) {
+        } else if (platform === Platform.Emulator || platform === Platform.VNextEmulator) {
           explorer = configureEmulator();
         } else if (platform === Platform.Portal) {
           explorer = await configurePortal();

src/quickstart-sql-only-http.html

@@ -35,214 +35,92 @@
       <div class="container-fluid">
         <ul class="nav nav-tabs qslevel">
           <li class="active">
-            <a data-toggle="tab" href="#net"
-              ><img class="qsmenuicons" src="../images/dotnet.png" alt=".NET platform" />.NET</a
-            >
+            <a data-toggle="tab" href="#net">
+              <img class="qsmenuicons" src="../images/dotnet.png" alt=".NET" /> .NET
+            </a>
           </li>
           <li>
-            <a data-toggle="tab" href="#corenet"
-              ><img class="qsmenuicons" src="../images/dotnet.png" alt=".NET Core platform" />.NET Core</a
-            >
+            <a data-toggle="tab" href="#java"> <img class="qsmenuicons" src="../images/java.png" alt="Java" /> Java </a>
           </li>
           <li>
-            <a data-toggle="tab" href="#Java"
-              ><img class="qsmenuicons" src="../images/java.png" alt="Java platform" />Java</a
-            >
+            <a data-toggle="tab" href="#nodejs">
+              <img class="qsmenuicons" src="../images/nodejs.png" alt="Node.js" /> Node.js
+            </a>
           </li>
           <li>
-            <a data-toggle="tab" href="#NodeJs"
-              ><img class="qsmenuicons" src="../images/nodejs.png" alt="Node.js platform" />Node.js</a
-            >
+            <a data-toggle="tab" href="#python">
+              <img class="qsmenuicons" src="../images/python.png" alt="Python" /> Python
+            </a>
           </li>
           <li>
-            <a data-toggle="tab" href="#Python"
-              ><img class="qsmenuicons" src="../images/python.png" alt="Python platform" />Python</a
-            >
+            <a data-toggle="tab" href="#go"> <img class="qsmenuicons" src="../images/golang.svg" alt="Go" /> Go </a>
+          </li>
+          <li>
+            <a data-toggle="tab" href="#springboot">
+              <img class="qsmenuicons" src="../images/springboot.svg" alt="Spring Boot" /> Spring Boot
+            </a>
           </li>
         </ul>
-        <div class="tab-content tab-content-override">
+
+        <div class="tab-content">
           <div id="net" class="tab-pane fade in active">
-            <div class="netApp">
+            <div class="sampleApp">
               <div class="numbersize numbersizePadding">1</div>
               <div class="numberheading">
-                Open and run a sample .NET app
+                Create a new .NET app
                 <p>
-                  We created a sample .NET app connected to your Azure Cosmos DB Emulator instance. Download, extract,
-                  build and run the app.
+                  Follow this
+                  <a href="https://learn.microsoft.com/azure/cosmos-db/nosql/quickstart-dotnet" target="_blank"
+                    >tutorial
+                  </a>
+                  to create a new .NET app connected to Azure Cosmos DB.
                 </p>
-                <a href="quickstart/DocumentDB-Quickstart-DotNet.zip"
-                  ><button class="btncreatecoll">Download</button></a
-                >
-              </div>
-            </div>
-
-            <div class="netApp">
-              <div class="numbersize">2</div>
-              <div class="numberheading">
-                Learn more about Azure Cosmos DB
-                <ul>
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/samples/dotnet"
-                      >Code Samples</a
-                    >
-                  </li>
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/docs">Documentation</a>
-                  </li>
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/pricing">Pricing</a>
-                  </li>
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/capacity-planner"
-                      >Capacity Planner</a
-                    >
-                  </li>
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/stackoverflow">Forum</a>
-                  </li>
-                </ul>
-              </div>
-            </div>
-          </div>
-          <div id="corenet" class="tab-pane fade">
-            <div class="netApp">
-              <div class="numbersize numbersizePadding">1</div>
-              <div class="numberheading">
-                Open and run a sample .NET Core app
-                <p>
-                  We created a sample .NET Core app connected to your Azure Cosmos DB Emulator instance. Download,
-                  extract, build and run the app.
-                </p>
-                <a href="quickstart/DocumentDB-Quickstart-DotNetCore.zip"
-                  ><button class="btncreatecoll">Download</button></a
-                >
-              </div>
-            </div>
-
-            <div class="netApp">
-              <div class="numbersize">2</div>
-              <div class="numberheading">
-                Learn more about Azure Cosmos DB.
-                <ul>
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/samples/dotnet"
-                      >Code Samples</a
-                    >
-                  </li>
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/docs">Documentation</a>
-                  </li>
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/pricing">Pricing</a>
-                  </li>
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/capacity-planner"
-                      >Capacity Planner</a
-                    >
-                  </li>
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/stackoverflow">Forum</a>
-                  </li>
-                </ul>
               </div>
             </div>
+            <div class="learn-more"></div>
           </div>
 
-          <div id="Java" class="tab-pane fade">
-            <div class="step1">
+          <div id="java" class="tab-pane fade">
+            <div class="sampleApp">
               <div class="numbersize numbersizePadding">1</div>
               <div class="numberheading">
-                Open and run a sample Java app
+                Create a new Java app
                 <p>
-                  We created a sample Java app connected to your Azure Cosmos DB Emulator instance. Download, extract,
-                  build and run the app.
-                </p>
-                <a href="quickstart/DocumentDB-Quickstart-Java.zip"><button class="btncreatecoll">Download</button></a>
-                <p>
-                  Follow instructions in the readme.md to setup prerequisites needed to run Java web apps, if you
-                  haven’t already.
+                  Follow this
+                  <a href="https://learn.microsoft.com/azure/cosmos-db/nosql/quickstart-java" target="_blank"
+                    >tutorial
+                  </a>
+                  to create a new Java app connected to Azure Cosmos DB.
                 </p>
               </div>
             </div>
-
-            <div class="step1">
-              <div class="numbersize">2</div>
-              <div class="numberheading">
-                Learn more about Azure Cosmos DB.
-                <ul>
-                  <!--<li><a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/samples/java">Code Samples</a></li>-->
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/docs">Documentation</a>
-                  </li>
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/pricing">Pricing</a>
-                  </li>
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/capacity-planner"
-                      >Capacity Planner</a
-                    >
-                  </li>
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/stackoverflow">Forum</a>
-                  </li>
-                </ul>
-              </div>
-            </div>
+            <div class="learn-more"></div>
           </div>
 
-          <div id="NodeJs" class="tab-pane fade">
-            <div class="step1">
+          <div id="nodejs" class="tab-pane fade">
+            <div class="sampleApp">
               <div class="numbersize numbersizePadding">1</div>
               <div class="numberheading">
-                Open and run a sample Node.js app
+                Create a new Node.js app
                 <p>
-                  We created a sample Node.js app connected to your Azure Cosmos DB Emulator instance. Download,
-                  extract, build and run the app.
-                </p>
-                <a href="quickstart/DocumentDB-Quickstart-NodeJs.zip"
-                  ><button class="btncreatecoll">Download</button></a
-                >
-                <p>
-                  Run <strong>npm install</strong> and <strong>npm start</strong>, and navigate to
-                  <a href="http://localhost:3000" _targe="blank">http://localhost:3000</a>.
+                  Follow this
+                  <a
+                    href="https://learn.microsoft.com/azure/cosmos-db/nosql/quickstart-nodejs?pivots=programming-language-ts"
+                    target="_blank"
+                    >tutorial
+                  </a>
+                  to create a new Node.js app connected to Azure Cosmos DB.
                 </p>
               </div>
             </div>
-
-            <div class="step1">
-              <div class="numbersize">2</div>
-              <div class="numberheading">
-                Learn more about Azure Cosmos DB.
-                <ul>
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/samples/nodejs"
-                      >Code Samples</a
-                    >
-                  </li>
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/docs">Documentation</a>
-                  </li>
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/pricing">Pricing</a>
-                  </li>
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/capacity-planner"
-                      >Capacity Planner</a
-                    >
-                  </li>
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/stackoverflow">Forum</a>
-                  </li>
-                </ul>
-              </div>
-            </div>
+            <div class="learn-more"></div>
           </div>
 
-          <div id="Python" class="tab-pane fade">
-            <div class="pythonApp">
+          <div id="python" class="tab-pane fade">
+            <div class="sampleApp">
               <div class="numbersize numbersizePadding">1</div>
               <div class="numberheading">
-                Create a new Python app.
+                Create a new Python app
                 <p>
                   Follow this
                   <a href="https://aka.ms/cosmos-db-emulator/tutorial/python" target="_blank">tutorial</a>
@@ -250,42 +128,73 @@
                 </p>
               </div>
             </div>
+            <div class="learn-more"></div>
+          </div>
 
-            <div class="pythonApp">
-              <div class="numbersize">2</div>
+          <div id="go" class="tab-pane fade">
+            <div class="sampleApp">
+              <div class="numbersize numbersizePadding">1</div>
               <div class="numberheading">
-                Learn more about Azure Cosmos DB.
-                <ul>
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/samples/python"
-                      >Code Samples</a
-                    >
-                  </li>
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/docs">Documentation</a>
-                  </li>
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/pricing">Pricing</a>
-                  </li>
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/capacity-planner"
-                      >Capacity planner</a
-                    >
-                  </li>
-                  <li>
-                    <a
-                      target="_blank"
-                      class="atags"
-                      href="https://social.msdn.microsoft.com/forums/azure/home?forum=AzureDocumentDB"
-                      >Forum</a
-                    >
-                  </li>
-                </ul>
+                Create a new Go app
+                <p>
+                  Follow this
+                  <a href="https://learn.microsoft.com/azure/cosmos-db/nosql/quickstart-go" target="_blank">tutorial</a>
+                  to create a new Go app connected to Azure Cosmos DB.
+                </p>
               </div>
             </div>
+            <div class="learn-more"></div>
+          </div>
+
+          <div id="springboot" class="tab-pane fade">
+            <div class="sampleApp">
+              <div class="numbersize numbersizePadding">1</div>
+              <div class="numberheading">
+                Create a new Spring Boot app
+                <p>
+                  Follow this
+                  <a
+                    href="https://learn.microsoft.com/azure/cosmos-db/nosql/tutorial-springboot-azure-kubernetes-service"
+                    target="_blank"
+                    >tutorial</a
+                  >
+                  to create a new Spring Boot app connected to Azure Cosmos DB.
+                </p>
+              </div>
+            </div>
+            <div class="learn-more"></div>
           </div>
         </div>
       </div>
     </div>
+
+    <template id="learnMoreTpl">
+      <div class="app-block">
+        <div class="numbersize">2</div>
+        <div class="numberheading">
+          Learn more about Azure Cosmos DB
+          <ul>
+            <li>
+              <a href="https://azurecosmosdb.github.io/gallery/?tags=example" target="_blank" class="atags"
+                >Code Samples</a
+              >
+            </li>
+            <li><a href="https://aka.ms/cosmos-db-emulator/docs" target="_blank" class="atags">Documentation</a></li>
+            <li><a href="https://aka.ms/cosmos-db-emulator/pricing" target="_blank" class="atags">Pricing</a></li>
+            <li>
+              <a href="https://cosmos.azure.com/capacitycalculator/" target="_blank" class="atags">Capacity planner</a>
+            </li>
+            <li><a href="https://aka.ms/cosmos-db-emulator/stackoverflow" target="_blank" class="atags">Forum</a></li>
+          </ul>
+        </div>
+      </div>
+    </template>
+
+    <script>
+      document.querySelectorAll(".learn-more").forEach((slot) => {
+        const node = document.getElementById("learnMoreTpl").content.cloneNode(true);
+        slot.appendChild(node);
+      });
+    </script>
   </body>
 </html>

src/quickstart-sql-only.html

@@ -35,214 +35,92 @@
       <div class="container-fluid">
         <ul class="nav nav-tabs qslevel">
           <li class="active">
-            <a data-toggle="tab" href="#net"
-              ><img class="qsmenuicons" src="../images/dotnet.png" alt=".NET platform" />.NET</a
-            >
+            <a data-toggle="tab" href="#net">
+              <img class="qsmenuicons" src="../images/dotnet.png" alt=".NET" /> .NET
+            </a>
           </li>
           <li>
-            <a data-toggle="tab" href="#corenet"
-              ><img class="qsmenuicons" src="../images/dotnet.png" alt=".NET Core platform" />.NET Core</a
-            >
+            <a data-toggle="tab" href="#java"> <img class="qsmenuicons" src="../images/java.png" alt="Java" /> Java </a>
           </li>
           <li>
-            <a data-toggle="tab" href="#Java"
-              ><img class="qsmenuicons" src="../images/java.png" alt="Java platform" />Java</a
-            >
+            <a data-toggle="tab" href="#nodejs">
+              <img class="qsmenuicons" src="../images/nodejs.png" alt="Node.js" /> Node.js
+            </a>
           </li>
           <li>
-            <a data-toggle="tab" href="#NodeJs"
-              ><img class="qsmenuicons" src="../images/nodejs.png" alt="Node.js platform" />Node.js</a
-            >
+            <a data-toggle="tab" href="#python">
+              <img class="qsmenuicons" src="../images/python.png" alt="Python" /> Python
+            </a>
           </li>
           <li>
-            <a data-toggle="tab" href="#Python"
-              ><img class="qsmenuicons" src="../images/python.png" alt="Python platform" />Python</a
-            >
+            <a data-toggle="tab" href="#go"> <img class="qsmenuicons" src="../images/golang.svg" alt="Go" /> Go </a>
+          </li>
+          <li>
+            <a data-toggle="tab" href="#springboot">
+              <img class="qsmenuicons" src="../images/springboot.svg" alt="Spring Boot" /> Spring Boot
+            </a>
           </li>
         </ul>
-        <div class="tab-content tab-content-override">
+
+        <div class="tab-content">
           <div id="net" class="tab-pane fade in active">
-            <div class="netApp">
+            <div class="sampleApp">
               <div class="numbersize numbersizePadding">1</div>
               <div class="numberheading">
-                Open and run a sample .NET app
+                Create a new .NET app
                 <p>
-                  We created a sample .NET app connected to your Azure Cosmos DB Emulator instance. Download, extract,
-                  build and run the app.
+                  Follow this
+                  <a href="https://learn.microsoft.com/azure/cosmos-db/nosql/quickstart-dotnet" target="_blank"
+                    >tutorial
+                  </a>
+                  to create a new .NET app connected to Azure Cosmos DB.
                 </p>
-                <a href="quickstart/DocumentDB-Quickstart-DotNet.zip"
-                  ><button class="btncreatecoll">Download</button></a
-                >
-              </div>
-            </div>
-
-            <div class="netApp">
-              <div class="numbersize">2</div>
-              <div class="numberheading">
-                Learn more about Azure Cosmos DB
-                <ul>
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/samples/dotnet"
-                      >Code Samples</a
-                    >
-                  </li>
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/docs">Documentation</a>
-                  </li>
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/pricing">Pricing</a>
-                  </li>
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/capacity-planner"
-                      >Capacity Planner</a
-                    >
-                  </li>
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/stackoverflow">Forum</a>
-                  </li>
-                </ul>
-              </div>
-            </div>
-          </div>
-          <div id="corenet" class="tab-pane fade">
-            <div class="netApp">
-              <div class="numbersize numbersizePadding">1</div>
-              <div class="numberheading">
-                Open and run a sample .NET Core app
-                <p>
-                  We created a sample .NET Core app connected to your Azure Cosmos DB Emulator instance. Download,
-                  extract, build and run the app.
-                </p>
-                <a href="quickstart/DocumentDB-Quickstart-DotNetCore.zip"
-                  ><button class="btncreatecoll">Download</button></a
-                >
-              </div>
-            </div>
-
-            <div class="netApp">
-              <div class="numbersize">2</div>
-              <div class="numberheading">
-                Learn more about Azure Cosmos DB.
-                <ul>
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/samples/dotnet"
-                      >Code Samples</a
-                    >
-                  </li>
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/docs">Documentation</a>
-                  </li>
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/pricing">Pricing</a>
-                  </li>
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/capacity-planner"
-                      >Capacity Planner</a
-                    >
-                  </li>
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/stackoverflow">Forum</a>
-                  </li>
-                </ul>
               </div>
             </div>
+            <div class="learn-more"></div>
           </div>
 
-          <div id="Java" class="tab-pane fade">
-            <div class="step1">
+          <div id="java" class="tab-pane fade">
+            <div class="sampleApp">
               <div class="numbersize numbersizePadding">1</div>
               <div class="numberheading">
-                Open and run a sample Java app
+                Create a new Java app
                 <p>
-                  We created a sample Java app connected to your Azure Cosmos DB Emulator instance. Download, extract,
-                  build and run the app.
-                </p>
-                <a href="quickstart/DocumentDB-Quickstart-Java.zip"><button class="btncreatecoll">Download</button></a>
-                <p>
-                  Follow instructions in the readme.md to setup prerequisites needed to run Java web apps, if you
-                  haven’t already.
+                  Follow this
+                  <a href="https://learn.microsoft.com/azure/cosmos-db/nosql/quickstart-java" target="_blank"
+                    >tutorial
+                  </a>
+                  to create a new Java app connected to Azure Cosmos DB.
                 </p>
               </div>
             </div>
-
-            <div class="step1">
-              <div class="numbersize">2</div>
-              <div class="numberheading">
-                Learn more about Azure Cosmos DB.
-                <ul>
-                  <!--<li><a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/samples/java">Code Samples</a></li>-->
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/docs">Documentation</a>
-                  </li>
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/pricing">Pricing</a>
-                  </li>
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/capacity-planner"
-                      >Capacity Planner</a
-                    >
-                  </li>
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/stackoverflow">Forum</a>
-                  </li>
-                </ul>
-              </div>
-            </div>
+            <div class="learn-more"></div>
           </div>
 
-          <div id="NodeJs" class="tab-pane fade">
-            <div class="step1">
+          <div id="nodejs" class="tab-pane fade">
+            <div class="sampleApp">
               <div class="numbersize numbersizePadding">1</div>
               <div class="numberheading">
-                Open and run a sample Node.js app
+                Create a new Node.js app
                 <p>
-                  We created a sample Node.js app connected to your Azure Cosmos DB Emulator instance. Download,
-                  extract, build and run the app.
-                </p>
-                <a href="quickstart/DocumentDB-Quickstart-NodeJs.zip"
-                  ><button class="btncreatecoll">Download</button></a
-                >
-                <p>
-                  Run <strong>npm install</strong> and <strong>npm start</strong>, and navigate to
-                  <a href="http://localhost:3000" _targe="blank">http://localhost:3000</a>.
+                  Follow this
+                  <a
+                    href="https://learn.microsoft.com/azure/cosmos-db/nosql/quickstart-nodejs?pivots=programming-language-ts"
+                    target="_blank"
+                    >tutorial
+                  </a>
+                  to create a new Node.js app connected to Azure Cosmos DB.
                 </p>
               </div>
             </div>
-
-            <div class="step1">
-              <div class="numbersize">2</div>
-              <div class="numberheading">
-                Learn more about Azure Cosmos DB.
-                <ul>
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/samples/nodejs"
-                      >Code Samples</a
-                    >
-                  </li>
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/docs">Documentation</a>
-                  </li>
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/pricing">Pricing</a>
-                  </li>
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/capacity-planner"
-                      >Capacity Planner</a
-                    >
-                  </li>
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/stackoverflow">Forum</a>
-                  </li>
-                </ul>
-              </div>
-            </div>
+            <div class="learn-more"></div>
           </div>
 
-          <div id="Python" class="tab-pane fade">
-            <div class="pythonApp">
+          <div id="python" class="tab-pane fade">
+            <div class="sampleApp">
               <div class="numbersize numbersizePadding">1</div>
               <div class="numberheading">
-                Create a new Python app.
+                Create a new Python app
                 <p>
                   Follow this
                   <a href="https://aka.ms/cosmos-db-emulator/tutorial/python" target="_blank">tutorial</a>
@@ -250,42 +128,73 @@
                 </p>
               </div>
             </div>
+            <div class="learn-more"></div>
+          </div>
 
-            <div class="pythonApp">
-              <div class="numbersize">2</div>
+          <div id="go" class="tab-pane fade">
+            <div class="sampleApp">
+              <div class="numbersize numbersizePadding">1</div>
               <div class="numberheading">
-                Learn more about Azure Cosmos DB.
-                <ul>
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/samples/python"
-                      >Code Samples</a
-                    >
-                  </li>
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/docs">Documentation</a>
-                  </li>
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/pricing">Pricing</a>
-                  </li>
-                  <li>
-                    <a target="_blank" class="atags" href="https://aka.ms/cosmos-db-emulator/capacity-planner"
-                      >Capacity planner</a
-                    >
-                  </li>
-                  <li>
-                    <a
-                      target="_blank"
-                      class="atags"
-                      href="https://social.msdn.microsoft.com/forums/azure/home?forum=AzureDocumentDB"
-                      >Forum</a
-                    >
-                  </li>
-                </ul>
+                Create a new Go app
+                <p>
+                  Follow this
+                  <a href="https://learn.microsoft.com/azure/cosmos-db/nosql/quickstart-go" target="_blank">tutorial</a>
+                  to create a new Go app connected to Azure Cosmos DB.
+                </p>
               </div>
             </div>
+            <div class="learn-more"></div>
+          </div>
+
+          <div id="springboot" class="tab-pane fade">
+            <div class="sampleApp">
+              <div class="numbersize numbersizePadding">1</div>
+              <div class="numberheading">
+                Create a new Spring Boot app
+                <p>
+                  Follow this
+                  <a
+                    href="https://learn.microsoft.com/azure/cosmos-db/nosql/tutorial-springboot-azure-kubernetes-service"
+                    target="_blank"
+                    >tutorial</a
+                  >
+                  to create a new Spring Boot app connected to Azure Cosmos DB.
+                </p>
+              </div>
+            </div>
+            <div class="learn-more"></div>
           </div>
         </div>
       </div>
     </div>
+
+    <template id="learnMoreTpl">
+      <div class="app-block">
+        <div class="numbersize">2</div>
+        <div class="numberheading">
+          Learn more about Azure Cosmos DB
+          <ul>
+            <li>
+              <a href="https://azurecosmosdb.github.io/gallery/?tags=example" target="_blank" class="atags"
+                >Code Samples</a
+              >
+            </li>
+            <li><a href="https://aka.ms/cosmos-db-emulator/docs" target="_blank" class="atags">Documentation</a></li>
+            <li><a href="https://aka.ms/cosmos-db-emulator/pricing" target="_blank" class="atags">Pricing</a></li>
+            <li>
+              <a href="https://cosmos.azure.com/capacitycalculator/" target="_blank" class="atags">Capacity planner</a>
+            </li>
+            <li><a href="https://aka.ms/cosmos-db-emulator/stackoverflow" target="_blank" class="atags">Forum</a></li>
+          </ul>
+        </div>
+      </div>
+    </template>
+
+    <script>
+      document.querySelectorAll(".learn-more").forEach((slot) => {
+        const node = document.getElementById("learnMoreTpl").content.cloneNode(true);
+        slot.appendChild(node);
+      });
+    </script>
   </body>
 </html>

src/quickstart-sql.template.ejs

@@ -0,0 +1,179 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0" />
+    <title>Azure Cosmos DB Emulator (SQL)</title>
+  </head>
+  <body>
+    <div id="divQuickStart">
+      <div class="Introlines">
+        <p class="Introline1">Congratulations! Your Azure Cosmos DB emulator is running.</p>
+        <p class="Introline2">Now, let's connect a sample app to it.</p>
+        <div id="divQuickStartConnections">
+          <p class="Introline2">URI</p>
+          <input type="text" class="codeblock" readonly value="<%= endpointUri %>" />
+          <p class="Introline2">Primary Key</p>
+          <input type="text" class="codeblock" readonly value="<%= primaryKey %>" />
+          <p class="Introline2">Primary Connection String</p>
+          <input type="text" class="codeblock" readonly value="<%= primaryConnString %>" />
+        </div>
+        <p class="Introline3"><b>Choose a platform</b></p>
+      </div>
+      <div class="container-fluid">
+        <ul class="nav nav-tabs qslevel">
+          <li class="active">
+            <a data-toggle="tab" href="#net"> <img class="qsmenuicons" src="images/dotnet.png" alt=".NET" /> .NET </a>
+          </li>
+          <li>
+            <a data-toggle="tab" href="#java"><img class="qsmenuicons" src="images/java.png" alt="Java" /> Java</a>
+          </li>
+          <li>
+            <a data-toggle="tab" href="#nodejs"
+              ><img class="qsmenuicons" src="images/nodejs.png" alt="Node.js" /> Node.js</a
+            >
+          </li>
+          <li>
+            <a data-toggle="tab" href="#python"
+              ><img class="qsmenuicons" src="images/python.png" alt="Python" /> Python</a
+            >
+          </li>
+          <li>
+            <a data-toggle="tab" href="#go"><img class="qsmenuicons" src="images/golang.svg" alt="Go" /> Go</a>
+          </li>
+          <li>
+            <a data-toggle="tab" href="#springboot"
+              ><img class="qsmenuicons" src="images/springboot.svg" alt="Spring Boot" /> Spring Boot</a
+            >
+          </li>
+        </ul>
+        <div class="tab-content">
+          <div id="net" class="tab-pane fade in active">
+            <div class="sampleApp">
+              <div class="numbersize numbersizePadding">1</div>
+              <div class="numberheading">
+                Create a new .NET app
+                <p>
+                  Follow this
+                  <a href="https://learn.microsoft.com/azure/cosmos-db/nosql/quickstart-dotnet" target="_blank"
+                    >tutorial</a
+                  >
+                  to create a new .NET app connected to Azure Cosmos DB.
+                </p>
+              </div>
+            </div>
+            <div class="learn-more"></div>
+          </div>
+          <div id="java" class="tab-pane fade">
+            <div class="sampleApp">
+              <div class="numbersize numbersizePadding">1</div>
+              <div class="numberheading">
+                Create a new Java app
+                <p>
+                  Follow this
+                  <a href="https://learn.microsoft.com/azure/cosmos-db/nosql/quickstart-java" target="_blank"
+                    >tutorial</a
+                  >
+                  to create a new Java app connected to Azure Cosmos DB.
+                </p>
+              </div>
+            </div>
+            <div class="learn-more"></div>
+          </div>
+          <div id="nodejs" class="tab-pane fade">
+            <div class="sampleApp">
+              <div class="numbersize numbersizePadding">1</div>
+              <div class="numberheading">
+                Create a new Node.js app
+                <p>
+                  Follow this
+                  <a
+                    href="https://learn.microsoft.com/azure/cosmos-db/nosql/quickstart-nodejs?pivots=programming-language-ts"
+                    target="_blank"
+                    >tutorial</a
+                  >
+                  to create a new Node.js app connected to Azure Cosmos DB.
+                </p>
+              </div>
+            </div>
+            <div class="learn-more"></div>
+          </div>
+          <div id="python" class="tab-pane fade">
+            <div class="sampleApp">
+              <div class="numbersize numbersizePadding">1</div>
+              <div class="numberheading">
+                Create a new Python app
+                <p>
+                  Follow this <a href="https://aka.ms/cosmos-db-emulator/tutorial/python" target="_blank">tutorial</a>
+                  to create a new Python app connected to Azure Cosmos DB.
+                </p>
+              </div>
+            </div>
+            <div class="learn-more"></div>
+          </div>
+          <div id="go" class="tab-pane fade">
+            <div class="sampleApp">
+              <div class="numbersize numbersizePadding">1</div>
+              <div class="numberheading">
+                Create a new Go app
+                <p>
+                  Follow this
+                  <a href="https://learn.microsoft.com/azure/cosmos-db/nosql/quickstart-go" target="_blank">tutorial</a>
+                  to create a new Go app connected to Azure Cosmos DB.
+                </p>
+              </div>
+            </div>
+            <div class="learn-more"></div>
+          </div>
+          <div id="springboot" class="tab-pane fade">
+            <div class="sampleApp">
+              <div class="numbersize numbersizePadding">1</div>
+              <div class="numberheading">
+                Create a new Spring Boot app
+                <p>
+                  Follow this
+                  <a
+                    href="https://learn.microsoft.com/azure/cosmos-db/nosql/tutorial-springboot-azure-kubernetes-service"
+                    target="_blank"
+                    >tutorial</a
+                  >
+                  to create a new Spring Boot app connected to Azure Cosmos DB.
+                </p>
+              </div>
+            </div>
+            <div class="learn-more"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <template id="learnMoreTpl">
+      <div class="app-block">
+        <div class="numbersize">2</div>
+        <div class="numberheading">
+          Learn more about Azure Cosmos DB
+          <ul>
+            <li>
+              <a href="https://azurecosmosdb.github.io/gallery/?tags=example" target="_blank" class="atags"
+                >Code Samples</a
+              >
+            </li>
+            <li><a href="https://aka.ms/cosmos-db-emulator/docs" target="_blank" class="atags">Documentation</a></li>
+            <li><a href="https://aka.ms/cosmos-db-emulator/pricing" target="_blank" class="atags">Pricing</a></li>
+            <li>
+              <a href="https://cosmos.azure.com/capacitycalculator/" target="_blank" class="atags">Capacity planner</a>
+            </li>
+            <li><a href="https://aka.ms/cosmos-db-emulator/stackoverflow" target="_blank" class="atags">Forum</a></li>
+          </ul>
+        </div>
+      </div>
+    </template>
+
+    <script>
+      document.querySelectorAll(".learn-more").forEach((slot) => {
+        const node = document.getElementById("learnMoreTpl").content.cloneNode(true);
+        slot.appendChild(node);
+      });
+    </script>
+  </body>
+</html>

utils/local-proxy/index.js

@@ -121,6 +121,7 @@ app.get("/_ready", (_, res) => {
 const appConf = {
   PROXY_PATH: "/proxy",
   EMULATOR_ENDPOINT: conf.EMULATOR_ENDPOINT,
+  platform: "VNextEmulator",
 };
 app.get("/config.json", (_, res) => {
   res.status(200).json(appConf).end();

webpack.config.js

@@ -122,6 +122,23 @@ module.exports = function (_env = {}, argv = {}) {
     ...(mode !== "production" && { testExplorer: "./test/testExplorer/TestExplorer.ts" }),
   };
 
+  // Derive emulator endpoint components from EMULATOR_ENDPOINT (fallback to localhost defaults)
+  const rawEndpoint = process.env.EMULATOR_ENDPOINT || (ishttps ? "https://localhost:8081/" : "http://localhost:8081/");
+  let endpointProtocol = ishttps ? "https" : "http";
+  let endpointHost = "localhost";
+  let endpointPort = "8081";
+  try {
+    const u = new URL(rawEndpoint);
+    endpointProtocol = u.protocol.replace(":", "");
+    endpointHost = u.hostname;
+    endpointPort = u.port || (endpointProtocol === "https" ? "443" : "80");
+  } catch (e) {
+    // Ignore parse errors and keep defaults
+  }
+  const endpointUri = `${endpointProtocol}://${endpointHost}:${endpointPort}`;
+  const primaryKeyConst = "C2y6yDjf5/R+ob0N8A7Cgv30VRDJIWEHLM+4QDU5DE2nQ9nDuVTqobD4b8mGGyPMbIZnqyMsEcaGQy67XIw/Jw==";
+  const primaryConnString = `AccountEndpoint=${endpointUri}/;AccountKey=${primaryKeyConst}`;
+
   const htmlWebpackPlugins = [
     new HtmlWebpackPlugin({
       filename: "explorer.html",
@@ -134,17 +151,16 @@ module.exports = function (_env = {}, argv = {}) {
       chunks: ["terminal"],
     }),
     //todo - dynamically include apis
-    ishttps
-      ? new HtmlWebpackPlugin({
-          filename: "quickstart.html",
-          template: "src/quickstart-sql-only.html",
-          chunks: ["quickstart"],
-        })
-      : new HtmlWebpackPlugin({
-          filename: "quickstart.html",
-          template: "src/quickstart-sql-only-http.html",
-          chunks: ["quickstart"],
-        }),
+    new HtmlWebpackPlugin({
+      filename: "quickstart.html",
+      template: "src/quickstart-sql.template.ejs",
+      chunks: ["quickstart"],
+      templateParameters: {
+        endpointUri,
+        primaryKey: primaryKeyConst,
+        primaryConnString,
+      },
+    }),
     new HtmlWebpackPlugin({
       filename: "index.html",
       template: "src/index.html",
@@ -220,6 +236,7 @@ module.exports = function (_env = {}, argv = {}) {
         { from: "DataExplorer.proj" },
         { from: "web.config" },
         { from: "quickstart/*.zip" },
+        { from: "images", to: "images" },
       ],
     }),
     new EnvironmentPlugin(envVars),