fix copilot insertion so it doesn't wipe existing query text

* changed error message variable

* changed other error messages

* Added check in case responseJSON is missing

* created error const

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1 @@
+[Preview this branch](https://cosmos-explorer-preview.azurewebsites.net/pull/EDIT_THIS_NUMBER_IN_THE_PR_DESCRIPTION?feature.someFeatureFlagYouMightNeed=true)

.github/workflows/ci.yml

@@ -8,6 +8,9 @@ on:
   pull_request:
     branches:
       - master
+permissions:
+  id-token: write
+  contents: read
 jobs:
   codemetrics:
     runs-on: ubuntu-latest
@@ -101,12 +104,6 @@ jobs:
         run: az storage blob upload -c '$web' -f ./preview/config.json --account-name cosmosexplorerpreview --name "${{github.event.pull_request.head.sha || github.sha}}/config.json" --account-key="${PREVIEW_STORAGE_KEY}" --overwrite true
         env:
           PREVIEW_STORAGE_KEY: ${{ secrets.PREVIEW_STORAGE_KEY }}
-      - name: Post a comment with the preview URL
-        if: ${{ github.event_name == 'pull_request' }}
-        run: gh pr comment $PR_NUMBER --body "Build complete. You can now [preview this branch in the portal](https://cosmos-explorer-preview.azurewebsites.net/pull/$PR_NUMBER?feature.someFeatureFlagYouMightNeed=true)"
-        env:
-          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          PR_NUMBER: ${{ github.event.pull_request.number }}
   endtoendemulator:
     name: "End To End Emulator Tests"
     # Temporarily disabled. This test needs to be rewritten in playwright
@@ -140,7 +137,7 @@ jobs:
     runs-on: ubuntu-latest
     env:
       NODE_TLS_REJECT_UNAUTHORIZED: 0
-      NOTEBOOKS_TEST_RUNNER_CLIENT_SECRET: ${{ secrets.NOTEBOOKS_TEST_RUNNER_CLIENT_SECRET }}
+      AZURE_SUBSCRIPTION_ID: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
     strategy:
       fail-fast: false
       matrix:
@@ -151,11 +148,18 @@ jobs:
           - ./test/mongo/container.spec.ts
           - ./test/mongo/container32.spec.ts
           - ./test/selfServe/selfServeExample.spec.ts
-          # - ./test/notebooks/upload.spec.ts // TEMP disabled since notebooks service is off
           - ./test/sql/resourceToken.spec.ts
           - ./test/tables/container.spec.ts
     steps:
       - uses: actions/checkout@v4
+
+      - name: "Az CLI login"
+        uses: azure/login@v1
+        with:
+          client-id: ${{ secrets.AZURE_CLIENT_ID }}
+          tenant-id: ${{ secrets.AZURE_TENANT_ID }}
+          subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
+
       - name: Use Node.js 18.x
         uses: actions/setup-node@v4
         with:

.github/workflows/cleanup.yml

@@ -9,6 +9,10 @@ on:
     # Once every hour
     - cron: "0 15 * * *"
 
+permissions:
+  id-token: write
+  contents: read
+
 # A workflow run is made up of one or more jobs that can run sequentially or in parallel
 jobs:
   # This workflow contains a single job called "build"
@@ -16,10 +20,17 @@ jobs:
     name: "Cleanup Test Database Accounts"
     runs-on: ubuntu-latest
     env:
-      NOTEBOOKS_TEST_RUNNER_CLIENT_ID: ${{ secrets.NOTEBOOKS_TEST_RUNNER_CLIENT_ID }}
+      AZURE_SUBSCRIPTION_ID: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
-      NOTEBOOKS_TEST_RUNNER_CLIENT_SECRET: ${{ secrets.NOTEBOOKS_TEST_RUNNER_CLIENT_SECRET }}
     steps:
       - uses: actions/checkout@v2
+
+      - name: "Az CLI login"
+        uses: azure/login@v1
+        with:
+          client-id: ${{ secrets.AZURE_CLIENT_ID }}
+          tenant-id: ${{ secrets.AZURE_TENANT_ID }}
+          subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
+
       - name: Use Node.js 18.x
         uses: actions/setup-node@v1
         with:

src/Common/Constants.ts

@@ -124,8 +124,9 @@ export enum MongoBackendEndpointType {
   remote,
 }
 
-export enum BackendApi {
+export class BackendApi {
-  GenerateToken,
+  public static readonly GenerateToken: string = "GenerateToken";
+  public static readonly PortalSettings: string = "PortalSettings";
 }
 
 export class PortalBackendEndpoints {

src/Common/MongoProxyClient.ts

@@ -690,9 +690,16 @@ export function getARMCreateCollectionEndpoint(params: DataModels.MongoParameter
 }
 
 function useMongoProxyEndpoint(api: string): boolean {
-  const activeMongoProxyEndpoints: string[] = [MongoProxyEndpoints.Development, MongoProxyEndpoints.Mpac];
+  const activeMongoProxyEndpoints: string[] = [
+    MongoProxyEndpoints.Development,
+    MongoProxyEndpoints.Mpac,
+    MongoProxyEndpoints.Prod,
+  ];
   let canAccessMongoProxy: boolean = userContext.databaseAccount.properties.publicNetworkAccess === "Enabled";
-  if (userContext.databaseAccount.properties.ipRules?.length > 0) {
+  if (
+    configContext.MONGO_PROXY_ENDPOINT !== MongoProxyEndpoints.Development &&
+    userContext.databaseAccount.properties.ipRules?.length > 0
+  ) {
     canAccessMongoProxy = canAccessMongoProxy && configContext.MONGO_PROXY_OUTBOUND_IPS_ALLOWLISTED;
   }
 

src/ConfigContext.ts

@@ -99,7 +99,6 @@ let configContext: Readonly<ConfigContext> = {
   JUNO_ENDPOINT: JunoEndpoints.Prod,
   BACKEND_ENDPOINT: "https://main.documentdb.ext.azure.com",
   PORTAL_BACKEND_ENDPOINT: PortalBackendEndpoints.Prod,
-  NEW_BACKEND_APIS: [BackendApi.GenerateToken],
   MONGO_PROXY_ENDPOINT: MongoProxyEndpoints.Prod,
   NEW_MONGO_APIS: [
     "resourcelist",

src/Explorer/Controls/Editor/EditorReact.tsx

@@ -46,9 +46,25 @@ export class EditorReact extends React.Component<EditorReactProps, EditorReactSt
     }, 100);
   }
 
-  public componentDidUpdate(previous: EditorReactProps) {
+  public componentDidUpdate() {
-    if (this.props.content !== previous.content) {
+    if (!this.editor) {
-      this.editor?.setValue(this.props.content);
+      return;
+    }
+
+    const existingContent = this.editor.getModel().getValue();
+
+    if (this.props.content !== existingContent) {
+      if (this.props.isReadOnly) {
+        this.editor.setValue(this.props.content);
+      } else {
+        this.editor.pushUndoStop();
+        this.editor.executeEdits("", [
+          {
+            range: this.editor.getModel().getFullModelRange(),
+            text: this.props.content,
+          },
+        ]);
+      }
     }
   }
 
@@ -71,9 +87,14 @@ export class EditorReact extends React.Component<EditorReactProps, EditorReactSt
 
   protected configureEditor(editor: monaco.editor.IStandaloneCodeEditor) {
     this.editor = editor;
-    const queryEditorModel = this.editor.getModel();
     if (!this.props.isReadOnly && this.props.onContentChanged) {
-      queryEditorModel.onDidChangeContent(() => {
+      // 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());
       });

src/Explorer/Panes/CassandraAddCollectionPane/CassandraAddCollectionPane.tsx

@@ -202,8 +202,8 @@ export const CassandraAddCollectionPane: FunctionComponent<CassandraAddCollectio
                 required={true}
                 autoComplete="off"
                 styles={getTextFieldStyles()}
-                pattern="[^/?#\\]*[^/?# \\]"
+                pattern="[^/?#\\-]*[^/?#- \\]"
-                title="May not end with space nor contain characters '\' '/' '#' '?'"
+                title="May not end with space nor contain characters '\' '/' '#' '?' '-'"
                 placeholder="Type a new keyspace id"
                 size={40}
                 value={newKeyspaceId}
@@ -292,8 +292,8 @@ export const CassandraAddCollectionPane: FunctionComponent<CassandraAddCollectio
               required={true}
               ariaLabel="addCollection-table Id Create table"
               autoComplete="off"
-              pattern="[^/?#\\]*[^/?# \\]"
+              pattern="[^/?#\\-]*[^/?#- \\]"
-              title="May not end with space nor contain characters '\' '/' '#' '?'"
+              title="May not end with space nor contain characters '\' '/' '#' '?' '-'"
               placeholder="Enter table Id"
               size={20}
               value={tableId}

src/Explorer/Panes/Tables/AddTableEntityPanel.tsx

@@ -124,8 +124,8 @@ export const AddTableEntityPanel: FunctionComponent<AddTableEntityPanelProps> =
 
     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();

src/Explorer/QueryCopilot/QueryCopilotPromptbar.tsx

@@ -218,7 +218,7 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
             generateSQLQueryResponse.explanation ? generateSQLQueryResponse.explanation : "N/A"
           }\r\n`;
           const currentGeneratedQuery = queryExplanation + generateSQLQueryResponse.sql;
-          const lastQuery = generatedQuery && query ? `${query}\r\n` : "";
+          const lastQuery = query ? `${query}\r\n` : "";
           setQuery(`${lastQuery}${currentGeneratedQuery}`);
           setGeneratedQuery(generateSQLQueryResponse.sql);
           setGeneratedQueryComments(generateSQLQueryResponse.explanation);

src/Explorer/QueryCopilot/Shared/QueryCopilotClient.ts

@@ -1,6 +1,7 @@
 import { FeedOptions } from "@azure/cosmos";
 import {
   Areas,
+  BackendApi,
   ConnectionStatusType,
   ContainerStatusType,
   HttpStatusCodes,
@@ -30,6 +31,7 @@ import { Action } from "Shared/Telemetry/TelemetryConstants";
 import { traceFailure, traceStart, traceSuccess } from "Shared/Telemetry/TelemetryProcessor";
 import { userContext } from "UserContext";
 import { getAuthorizationHeader } from "Utils/AuthorizationUtils";
+import { useNewPortalBackendEndpoint } from "Utils/EndpointUtils";
 import { queryPagesUntilContentPresent } from "Utils/QueryUtils";
 import { QueryCopilotState, useQueryCopilot } from "hooks/useQueryCopilot";
 import { useTabs } from "hooks/useTabs";
@@ -80,7 +82,11 @@ export const isCopilotFeatureRegistered = async (subscriptionId: string): Promis
 };
 
 export const getCopilotEnabled = async (): Promise<boolean> => {
-  const url = `${configContext.BACKEND_ENDPOINT}/api/portalsettings/querycopilot`;
+  const backendEndpoint: string = useNewPortalBackendEndpoint(BackendApi.PortalSettings)
+    ? configContext.PORTAL_BACKEND_ENDPOINT
+    : configContext.BACKEND_ENDPOINT;
+
+  const url = `${backendEndpoint}/api/portalsettings/querycopilot`;
   const authorizationHeader: AuthorizationTokenHeaderMetadata = getAuthorizationHeader();
   const headers = { [authorizationHeader.header]: authorizationHeader.token };
 

src/Explorer/Tables/TableDataClient.ts

@@ -3,6 +3,7 @@ import * as ko from "knockout";
 import Q from "q";
 import { AuthType } from "../../AuthType";
 import * as Constants from "../../Common/Constants";
+import { CassandraProxyAPIs, CassandraProxyEndpoints } from "../../Common/Constants";
 import { handleError } from "../../Common/ErrorHandlingUtils";
 import * as HeadersUtility from "../../Common/HeadersUtility";
 import { createDocument } from "../../Common/dataAccess/createDocument";
@@ -19,7 +20,6 @@ import Explorer from "../Explorer";
 import * as TableConstants from "./Constants";
 import * as Entities from "./Entities";
 import * as TableEntityProcessor from "./TableEntityProcessor";
-import { CassandraProxyAPIs, CassandraProxyEndpoints } from "../../Common/Constants";
 
 export interface CassandraTableKeys {
   partitionKeys: CassandraTableKey[];
@@ -172,8 +172,9 @@ export class CassandraAPIDataClient extends TableDataClient {
           deferred.resolve(entity);
         },
         (error) => {
-          handleError(error, "AddRowCassandra", `Error while adding new row to table ${collection.id()}`);
+          const errorText = error.responseJSON?.message ?? JSON.stringify(error);
-          deferred.reject(error);
+          handleError(errorText, "AddRowCassandra", `Error while adding new row to table ${collection.id()}`);
+          deferred.reject(errorText);
         },
       )
       .finally(clearInProgressMessage);
@@ -406,12 +407,13 @@ export class CassandraAPIDataClient extends TableDataClient {
           deferred.resolve();
         },
         (error) => {
+          const errorText = error.responseJSON?.message ?? JSON.stringify(error);
           handleError(
-            error,
+            errorText,
             "CreateKeyspaceCassandra",
             `Error while creating a keyspace with query ${createKeyspaceQuery}`,
           );
-          deferred.reject(error);
+          deferred.reject(errorText);
         },
       )
       .finally(clearInProgressMessage);
@@ -444,8 +446,13 @@ export class CassandraAPIDataClient extends TableDataClient {
               deferred.resolve();
             },
             (error) => {
-              handleError(error, "CreateTableCassandra", `Error while creating a table with query ${createTableQuery}`);
+              const errorText = error.responseJSON?.message ?? JSON.stringify(error);
-              deferred.reject(error);
+              handleError(
+                errorText,
+                "CreateTableCassandra",
+                `Error while creating a table with query ${createTableQuery}`,
+              );
+              deferred.reject(errorText);
             },
           )
           .finally(clearInProgressMessage);
@@ -493,8 +500,9 @@ export class CassandraAPIDataClient extends TableDataClient {
           deferred.resolve(data);
         },
         (error: any) => {
-          handleError(error, "FetchKeysCassandra", `Error fetching keys for table ${collection.id()}`);
+          const errorText = error.responseJSON?.message ?? JSON.stringify(error);
-          deferred.reject(error);
+          handleError(errorText, "FetchKeysCassandra", `Error fetching keys for table ${collection.id()}`);
+          deferred.reject(errorText);
         },
       )
       .done(clearInProgressMessage);
@@ -533,8 +541,9 @@ export class CassandraAPIDataClient extends TableDataClient {
           deferred.resolve(data);
         },
         (error: any) => {
-          handleError(error, "FetchKeysCassandra", `Error fetching keys for table ${collection.id()}`);
+          const errorText = error.responseJSON?.message ?? JSON.stringify(error);
-          deferred.reject(error);
+          handleError(errorText, "FetchKeysCassandra", `Error fetching keys for table ${collection.id()}`);
+          deferred.reject(errorText);
         },
       )
       .done(clearInProgressMessage);
@@ -578,8 +587,9 @@ export class CassandraAPIDataClient extends TableDataClient {
           deferred.resolve(data.columns);
         },
         (error: any) => {
-          handleError(error, "FetchSchemaCassandra", `Error fetching schema for table ${collection.id()}`);
+          const errorText = error.responseJSON?.message ?? JSON.stringify(error);
-          deferred.reject(error);
+          handleError(errorText, "FetchSchemaCassandra", `Error fetching schema for table ${collection.id()}`);
+          deferred.reject(errorText);
         },
       )
       .done(clearInProgressMessage);
@@ -618,8 +628,9 @@ export class CassandraAPIDataClient extends TableDataClient {
           deferred.resolve(data.columns);
         },
         (error: any) => {
-          handleError(error, "FetchSchemaCassandra", `Error fetching schema for table ${collection.id()}`);
+          const errorText = error.responseJSON?.message ?? JSON.stringify(error);
-          deferred.reject(error);
+          handleError(errorText, "FetchSchemaCassandra", `Error fetching schema for table ${collection.id()}`);
+          deferred.reject(errorText);
         },
       )
       .done(clearInProgressMessage);
@@ -732,9 +743,16 @@ export class CassandraAPIDataClient extends TableDataClient {
   }
 
   private useCassandraProxyEndpoint(api: string): boolean {
-    const activeCassandraProxyEndpoints: string[] = [CassandraProxyEndpoints.Development, CassandraProxyEndpoints.Mpac];
+    const activeCassandraProxyEndpoints: string[] = [
+      CassandraProxyEndpoints.Development,
+      CassandraProxyEndpoints.Mpac,
+      CassandraProxyEndpoints.Prod,
+    ];
     let canAccessCassandraProxy: boolean = userContext.databaseAccount.properties.publicNetworkAccess === "Enabled";
-    if (userContext.databaseAccount.properties.ipRules?.length > 0) {
+    if (
+      configContext.CASSANDRA_PROXY_ENDPOINT !== CassandraProxyEndpoints.Development &&
+      userContext.databaseAccount.properties.ipRules?.length > 0
+    ) {
       canAccessCassandraProxy = canAccessCassandraProxy && configContext.CASSANDRA_PROXY_OUTBOUND_IPS_ALLOWLISTED;
     }
 

src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx

@@ -496,13 +496,16 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
   };
 
   public onChangeContent(newContent: string): void {
+    // The copilot store's active query takes precedence over the local state,
+    // and we can't update both states in a single operation.
+    // So, we update the copilot store's state first, then update the local state.
+    if (this.state.copilotActive) {
+      this.props.copilotStore?.setQuery(newContent);
+    }
     this.setState({
       sqlQueryEditorContent: newContent,
       queryCopilotGeneratedQuery: "",
     });
-    if (this.state.copilotActive) {
-      this.props.copilotStore?.setQuery(newContent);
-    }
     if (this.isPreferredApiMongoDB) {
       if (newContent.length > 0) {
         this.executeQueryButton = {
@@ -544,7 +547,7 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
     useCommandBar.getState().setContextButtons(this.getTabsButtons());
   }
 
-  public setEditorContent(): string {
+  public getEditorContent(): string {
     if (this.isCopilotTabActive && this.state.queryCopilotGeneratedQuery) {
       return this.state.queryCopilotGeneratedQuery;
     }
@@ -601,7 +604,7 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
                 <div className="queryEditor" style={{ height: "100%" }}>
                   <EditorReact
                     language={"sql"}
-                    content={this.setEditorContent()}
+                    content={this.getEditorContent()}
                     isReadOnly={false}
                     wordWrap={"on"}
                     ariaLabel={"Editing Query"}

src/Explorer/Tabs/Tabs.tsx

@@ -324,7 +324,12 @@ const getReactTabContent = (activeReactTab: ReactTabKind, explorer: Explorer): J
 
 const showMongoAndCassandraProxiesNetworkSettingsWarning = (): boolean => {
   const ipRules: IpRule[] = userContext.databaseAccount?.properties?.ipRules;
-  if ((userContext.apiType === "Mongo" || userContext.apiType === "Cassandra") && ipRules?.length) {
+  if (
+    ((userContext.apiType === "Mongo" && configContext.MONGO_PROXY_ENDPOINT !== MongoProxyEndpoints.Development) ||
+      (userContext.apiType === "Cassandra" &&
+        configContext.CASSANDRA_PROXY_ENDPOINT !== CassandraProxyEndpoints.Development)) &&
+    ipRules?.length
+  ) {
     const legacyPortalBackendIPs: string[] = PortalBackendIPs[configContext.BACKEND_ENDPOINT];
     const ipAddressesFromIPRules: string[] = ipRules.map((ipRule) => ipRule.ipAddressOrRange);
     const ipRulesIncludeLegacyPortalBackend: boolean = legacyPortalBackendIPs.every((legacyPortalBackendIP: string) =>

src/Main.tsx

@@ -1,3 +1,6 @@
+// Import this first, to ensure that the dev tools hook is copied before React is loaded.
+import "./ReactDevTools";
+
 // CSS Dependencies
 import { initializeIcons, loadTheme } from "@fluentui/react";
 import { QuickstartCarousel } from "Explorer/Quickstart/QuickstartCarousel";

src/Platform/Hosted/Components/ConnectExplorer.tsx

@@ -1,6 +1,6 @@
 import { useBoolean } from "@fluentui/react-hooks";
 import { userContext } from "UserContext";
-import { usePortalBackendEndpoint } from "Utils/EndpointUtils";
+import { useNewPortalBackendEndpoint } from "Utils/EndpointUtils";
 import * as React from "react";
 import ConnectImage from "../../../../images/HdeConnectCosmosDB.svg";
 import ErrorImage from "../../../../images/error.svg";
@@ -19,7 +19,7 @@ interface Props {
 }
 
 export const fetchEncryptedToken = async (connectionString: string): Promise<string> => {
-  if (!usePortalBackendEndpoint(BackendApi.GenerateToken)) {
+  if (!useNewPortalBackendEndpoint(BackendApi.GenerateToken)) {
     return await fetchEncryptedToken_ToBeDeprecated(connectionString);
   }
 

src/ReactDevTools.ts

@@ -1,3 +1,7 @@
 if (window.parent !== window) {
-  (window as any).__REACT_DEVTOOLS_GLOBAL_HOOK__ = (window.parent as any).__REACT_DEVTOOLS_GLOBAL_HOOK__;
+  try {
+    (window as any).__REACT_DEVTOOLS_GLOBAL_HOOK__ = (window.parent as any).__REACT_DEVTOOLS_GLOBAL_HOOK__;
+  } catch {
+    // No-op. We can throw here if the parent is not the same origin (such as in the Azure portal).
+  }
 }

src/Utils/EndpointUtils.ts

@@ -145,8 +145,22 @@ export const allowedJunoOrigins: ReadonlyArray<string> = [
 
 export const allowedNotebookServerUrls: ReadonlyArray<string> = [];
 
-export function usePortalBackendEndpoint(backendApi: BackendApi): boolean {
+//
-  const activePortalBackendEndpoints: string[] = [PortalBackendEndpoints.Development];
+// Temporary function to determine if a portal backend API is supported by the
-  const activeBackendApi: boolean = configContext.NEW_BACKEND_APIS?.includes(backendApi) || false;
+// new backend in this environment.
-  return activeBackendApi && activePortalBackendEndpoints.includes(configContext.PORTAL_BACKEND_ENDPOINT as string);
+//
+// TODO: Remove this function once new backend migration is completed for all environments.
+//
+export function useNewPortalBackendEndpoint(backendApi: string): boolean {
+  // This maps backend APIs to the environments supported by the new backend.
+  const newBackendApiEnvironmentMap: { [key: string]: string[] } = {
+    [BackendApi.GenerateToken]: [PortalBackendEndpoints.Development],
+    [BackendApi.PortalSettings]: [PortalBackendEndpoints.Development, PortalBackendEndpoints.Mpac],
+  };
+
+  if (!newBackendApiEnvironmentMap[backendApi] || !configContext.PORTAL_BACKEND_ENDPOINT) {
+    return false;
+  }
+
+  return newBackendApiEnvironmentMap[backendApi].includes(configContext.PORTAL_BACKEND_ENDPOINT);
 }

test/cassandra/container.spec.ts

@@ -1,15 +1,18 @@
 import { jest } from "@jest/globals";
 import "expect-playwright";
-import { generateUniqueName } from "../utils/shared";
+import { generateUniqueName, getAzureCLICredentialsToken } from "../utils/shared";
 import { waitForExplorer } from "../utils/waitForExplorer";
 jest.setTimeout(120000);
 
 test("Cassandra keyspace and table CRUD", async () => {
   const keyspaceId = generateUniqueName("keyspace");
   const tableId = generateUniqueName("table");
+
+  // We can't retrieve AZ CLI credentials from the browser so we get them here.
+  const token = await getAzureCLICredentialsToken();
   page.setDefaultTimeout(50000);
 
-  await page.goto("https://localhost:1234/testExplorer.html?accountName=portal-cassandra-runner");
+  await page.goto(`https://localhost:1234/testExplorer.html?accountName=portal-cassandra-runner&token=${token}`);
   await page.waitForSelector("iframe");
   const explorer = await waitForExplorer();
 

test/graph/container.spec.ts

@@ -1,15 +1,18 @@
 import { jest } from "@jest/globals";
 import "expect-playwright";
-import { generateDatabaseNameWithTimestamp, generateUniqueName } from "../utils/shared";
+import { generateDatabaseNameWithTimestamp, generateUniqueName, getAzureCLICredentialsToken } from "../utils/shared";
 import { waitForExplorer } from "../utils/waitForExplorer";
 jest.setTimeout(240000);
 
 test("Graph CRUD", async () => {
   const databaseId = generateDatabaseNameWithTimestamp();
   const containerId = generateUniqueName("container");
+
+  // We can't retrieve AZ CLI credentials from the browser so we get them here.
+  const token = await getAzureCLICredentialsToken();
   page.setDefaultTimeout(50000);
 
-  await page.goto("https://localhost:1234/testExplorer.html?accountName=portal-gremlin-runner");
+  await page.goto(`https://localhost:1234/testExplorer.html?accountName=portal-gremlin-runner&token=${token}`);
   const explorer = await waitForExplorer();
 
   // Create new database and graph

test/mongo/container.spec.ts

@@ -1,15 +1,18 @@
 import { jest } from "@jest/globals";
 import "expect-playwright";
-import { generateDatabaseNameWithTimestamp, generateUniqueName } from "../utils/shared";
+import { generateDatabaseNameWithTimestamp, generateUniqueName, getAzureCLICredentialsToken } from "../utils/shared";
 import { waitForExplorer } from "../utils/waitForExplorer";
 jest.setTimeout(240000);
 
 test("Mongo CRUD", async () => {
   const databaseId = generateDatabaseNameWithTimestamp();
   const containerId = generateUniqueName("container");
+
+  // We can't retrieve AZ CLI credentials from the browser so we get them here.
+  const token = await getAzureCLICredentialsToken();
   page.setDefaultTimeout(50000);
 
-  await page.goto("https://localhost:1234/testExplorer.html?accountName=portal-mongo-runner");
+  await page.goto(`https://localhost:1234/testExplorer.html?accountName=portal-mongo-runner&token=${token}`);
   const explorer = await waitForExplorer();
 
   // Create new database and collection

test/mongo/container32.spec.ts

@@ -1,15 +1,18 @@
 import { jest } from "@jest/globals";
 import "expect-playwright";
-import { generateDatabaseNameWithTimestamp, generateUniqueName } from "../utils/shared";
+import { generateDatabaseNameWithTimestamp, generateUniqueName, getAzureCLICredentialsToken } from "../utils/shared";
 import { waitForExplorer } from "../utils/waitForExplorer";
 jest.setTimeout(240000);
 
 test("Mongo CRUD", async () => {
   const databaseId = generateDatabaseNameWithTimestamp();
   const containerId = generateUniqueName("container");
+
+  // We can't retrieve AZ CLI credentials from the browser so we get them here.
+  const token = await getAzureCLICredentialsToken();
   page.setDefaultTimeout(50000);
 
-  await page.goto("https://localhost:1234/testExplorer.html?accountName=portal-mongo32-runner");
+  await page.goto(`https://localhost:1234/testExplorer.html?accountName=portal-mongo32-runner&token=${token}`);
   const explorer = await waitForExplorer();
 
   // Create new database and collection

test/selfServe/selfServeExample.spec.ts

@@ -1,5 +1,10 @@
+import { getAzureCLICredentialsToken } from "../utils/shared";
+
 test("Self Serve", async () => {
-  await page.goto("https://localhost:1234/testExplorer.html?iframeSrc=selfServe.html");
+  // We can't retrieve AZ CLI credentials from the browser so we get them here.
+  const token = await getAzureCLICredentialsToken();
+
+  await page.goto(`https://localhost:1234/testExplorer.html?iframeSrc=selfServe.html&token=${token}`);
   const handle = await page.waitForSelector("iframe");
   const frame = await handle.contentFrame();
 

test/sql/container.spec.ts

@@ -1,15 +1,18 @@
 import { jest } from "@jest/globals";
 import "expect-playwright";
-import { generateUniqueName } from "../utils/shared";
+import { generateUniqueName, getAzureCLICredentialsToken } from "../utils/shared";
 import { waitForExplorer } from "../utils/waitForExplorer";
 jest.setTimeout(120000);
 
 test("SQL CRUD", async () => {
   const databaseId = generateUniqueName("db");
   const containerId = generateUniqueName("container");
+
+  // We can't retrieve AZ CLI credentials from the browser so we get them here.
+  const token = await getAzureCLICredentialsToken();
   page.setDefaultTimeout(50000);
 
-  await page.goto("https://localhost:1234/testExplorer.html?accountName=portal-sql-runner-west-us");
+  await page.goto(`https://localhost:1234/testExplorer.html?accountName=portal-sql-runner-west-us&token=${token}`);
   const explorer = await waitForExplorer();
 
   await explorer.click('[data-test="New Container"]');

test/sql/resourceToken.spec.ts

@@ -1,19 +1,15 @@
 import { CosmosDBManagementClient } from "@azure/arm-cosmosdb";
 import { CosmosClient, PermissionMode } from "@azure/cosmos";
-import * as msRestNodeAuth from "@azure/ms-rest-nodeauth";
 import { jest } from "@jest/globals";
 import "expect-playwright";
-import { generateUniqueName } from "../utils/shared";
+import { generateUniqueName, getAzureCLICredentials } from "../utils/shared";
 jest.setTimeout(120000);
 
-const clientId = "fd8753b0-0707-4e32-84e9-2532af865fb4";
+const subscriptionId = process.env["AZURE_SUBSCRIPTION_ID"] ?? "";
-const secret = process.env["NOTEBOOKS_TEST_RUNNER_CLIENT_SECRET"];
-const tenantId = "72f988bf-86f1-41af-91ab-2d7cd011db47";
-const subscriptionId = "69e02f2d-f059-4409-9eac-97e8a276ae2c";
 const resourceGroupName = "runners";
 
 test("Resource token", async () => {
-  const credentials = await msRestNodeAuth.loginWithServicePrincipalSecret(clientId, secret, tenantId);
+  const credentials = await getAzureCLICredentials();
   const armClient = new CosmosDBManagementClient(credentials, subscriptionId);
   const account = await armClient.databaseAccounts.get(resourceGroupName, "portal-sql-runner-west-us");
   const keys = await armClient.databaseAccounts.listKeys(resourceGroupName, "portal-sql-runner-west-us");

test/tables/container.spec.ts

@@ -1,15 +1,17 @@
 import { jest } from "@jest/globals";
 import "expect-playwright";
-import { generateUniqueName } from "../utils/shared";
+import { generateUniqueName, getAzureCLICredentialsToken } from "../utils/shared";
 import { waitForExplorer } from "../utils/waitForExplorer";
 
 jest.setTimeout(120000);
 
 test("Tables CRUD", async () => {
   const tableId = generateUniqueName("table");
+  // We can't retrieve AZ CLI credentials from the browser so we get them here.
+  const token = await getAzureCLICredentialsToken();
   page.setDefaultTimeout(50000);
 
-  await page.goto("https://localhost:1234/testExplorer.html?accountName=portal-tables-runner");
+  await page.goto(`https://localhost:1234/testExplorer.html?accountName=portal-tables-runner&token=${token}`);
   const explorer = await waitForExplorer();
 
   await page.waitForSelector('text="Querying databases"', { state: "detached" });

test/testExplorer/TestExplorer.ts

@@ -1,5 +1,4 @@
 /* eslint-disable no-console */
-import { ClientSecretCredential } from "@azure/identity";
 import "../../less/hostedexplorer.less";
 import { DataExplorerInputsFrame } from "../../src/Contracts/ViewModels";
 import { updateUserContext } from "../../src/UserContext";
@@ -11,29 +10,13 @@ const urlSearchParams = new URLSearchParams(window.location.search);
 const accountName = urlSearchParams.get("accountName") || "portal-sql-runner-west-us";
 const selfServeType = urlSearchParams.get("selfServeType") || "example";
 const iframeSrc = urlSearchParams.get("iframeSrc") || "explorer.html?platform=Portal&disablePortalInitCache";
-
+const token = urlSearchParams.get("token");
-if (!process.env.AZURE_CLIENT_SECRET) {
-  throw new Error(
-    "process.env.AZURE_CLIENT_SECRET was not set! Set it in your .env file and restart webpack dev server",
-  );
-}
-
-// Azure SDK clients accept the credential as a parameter
-const credentials = new ClientSecretCredential(
-  process.env.AZURE_TENANT_ID,
-  process.env.AZURE_CLIENT_ID,
-  process.env.AZURE_CLIENT_SECRET,
-  {
-    authorityHost: "https://localhost:1234",
-  },
-);
 
 console.log("Resource Group:", resourceGroup);
 console.log("Subcription: ", subscriptionId);
 console.log("Account Name: ", accountName);
 
 const initTestExplorer = async (): Promise<void> => {
-  const { token } = await credentials.getToken("https://management.azure.com//.default");
   updateUserContext({
     authorizationToken: `bearer ${token}`,
   });
@@ -52,6 +35,9 @@ const initTestExplorer = async (): Promise<void> => {
       dnsSuffix: "documents.azure.com",
       serverId: "prod1",
       extensionEndpoint: "/proxy",
+      portalBackendEndpoint: "https://cdb-ms-mpac-pbe.cosmos.azure.com",
+      mongoProxyEndpoint: "https://cdb-ms-mpac-mp.cosmos.azure.com",
+      cassandraProxyEndpoint: "https://cdb-ms-mpac-cp.cosmos.azure.com",
       subscriptionType: 3,
       quotaId: "Internal_2014-09-01",
       isTryCosmosDBSubscription: false,

test/utils/shared.ts

@@ -1,3 +1,4 @@
+import { AzureCliCredentials } from "@azure/ms-rest-nodeauth";
 import crypto from "crypto";
 
 export function generateUniqueName(baseName = "", length = 4): string {
@@ -7,3 +8,13 @@ export function generateUniqueName(baseName = "", length = 4): string {
 export function generateDatabaseNameWithTimestamp(baseName = "db", length = 1): string {
   return `${baseName}${crypto.randomBytes(length).toString("hex")}-${Date.now()}`;
 }
+
+export async function getAzureCLICredentials(): Promise<AzureCliCredentials> {
+  return await AzureCliCredentials.create();
+}
+
+export async function getAzureCLICredentialsToken(): Promise<string> {
+  const credentials = await getAzureCLICredentials();
+  const token = (await credentials.getToken()).accessToken;
+  return token;
+}

utils/cleanupDBs.js

@@ -2,10 +2,7 @@ const msRestNodeAuth = require("@azure/ms-rest-nodeauth");
 const { CosmosDBManagementClient } = require("@azure/arm-cosmosdb");
 const ms = require("ms");
 
-const clientId = process.env["NOTEBOOKS_TEST_RUNNER_CLIENT_ID"];
+const subscriptionId = process.env["AZURE_SUBSCRIPTION_ID"];
-const secret = process.env["NOTEBOOKS_TEST_RUNNER_CLIENT_SECRET"];
-const tenantId = "72f988bf-86f1-41af-91ab-2d7cd011db47";
-const subscriptionId = "69e02f2d-f059-4409-9eac-97e8a276ae2c";
 const resourceGroupName = "runners";
 
 const thirtyMinutesAgo = new Date(Date.now() - 1000 * 60 * 30).getTime();
@@ -19,7 +16,7 @@ function friendlyTime(date) {
 }
 
 async function main() {
-  const credentials = await msRestNodeAuth.loginWithServicePrincipalSecret(clientId, secret, tenantId);
+  const credentials = await msRestNodeAuth.AzureCliCredentials.create();
   const client = new CosmosDBManagementClient(credentials, subscriptionId);
   const accounts = await client.databaseAccounts.list(resourceGroupName);
   for (const account of accounts) {
@@ -38,7 +35,7 @@ async function main() {
     } else if (account.capabilities.find((c) => c.name === "EnableCassandra")) {
       const cassandraDatabases = await client.cassandraResources.listCassandraKeyspaces(
         resourceGroupName,
-        account.name
+        account.name,
       );
       for (const database of cassandraDatabases) {
         const timestamp = Number(database.resource._ts) * 1000;