Improve e2e stability (#949)

src/Common/dataAccess/createCollection.test.ts

@@ -1,7 +1,10 @@
 jest.mock("../../Utils/arm/request");
 jest.mock("../CosmosClient");
+import ko from "knockout";
 import { AuthType } from "../../AuthType";
 import { CreateCollectionParams, DatabaseAccount } from "../../Contracts/DataModels";
+import { Database } from "../../Contracts/ViewModels";
+import { useDatabases } from "../../Explorer/useDatabases";
 import { updateUserContext } from "../../UserContext";
 import { armRequest } from "../../Utils/arm/request";
 import { client } from "../CosmosClient";
@@ -23,6 +26,15 @@ describe("createCollection", () => {
       } as DatabaseAccount,
       apiType: "SQL",
     });
+    useDatabases.setState({
+      databases: [
+        {
+          id: ko.observable("testDatabase"),
+          loadCollections: () => undefined,
+          collections: ko.observableArray([]),
+        } as Database,
+      ],
+    });
   });
 
   it("should call ARM if logged in with AAD", async () => {

src/Common/dataAccess/createCollection.ts

@@ -4,20 +4,16 @@ import { ContainerRequest } from "@azure/cosmos/dist-esm/client/Container/Contai
 import { DatabaseRequest } from "@azure/cosmos/dist-esm/client/Database/DatabaseRequest";
 import { AuthType } from "../../AuthType";
 import * as DataModels from "../../Contracts/DataModels";
+import { useDatabases } from "../../Explorer/useDatabases";
 import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import { userContext } from "../../UserContext";
-import {
+import { getCollectionName } from "../../Utils/APITypeUtils";
-  createUpdateCassandraTable,
+import { createUpdateCassandraTable } from "../../Utils/arm/generatedClients/cosmos/cassandraResources";
-  getCassandraTable,
+import { createUpdateGremlinGraph } from "../../Utils/arm/generatedClients/cosmos/gremlinResources";
-} from "../../Utils/arm/generatedClients/cosmos/cassandraResources";
+import { createUpdateMongoDBCollection } from "../../Utils/arm/generatedClients/cosmos/mongoDBResources";
-import { createUpdateGremlinGraph, getGremlinGraph } from "../../Utils/arm/generatedClients/cosmos/gremlinResources";
+import { createUpdateSqlContainer } from "../../Utils/arm/generatedClients/cosmos/sqlResources";
-import {
+import { createUpdateTable } from "../../Utils/arm/generatedClients/cosmos/tableResources";
-  createUpdateMongoDBCollection,
-  getMongoDBCollection,
-} from "../../Utils/arm/generatedClients/cosmos/mongoDBResources";
-import { createUpdateSqlContainer, getSqlContainer } from "../../Utils/arm/generatedClients/cosmos/sqlResources";
-import { createUpdateTable, getTable } from "../../Utils/arm/generatedClients/cosmos/tableResources";
 import * as ARMTypes from "../../Utils/arm/generatedClients/cosmos/types";
 import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { client } from "../CosmosClient";
@@ -59,6 +55,16 @@ export const createCollection = async (params: DataModels.CreateCollectionParams
 };
 
 const createCollectionWithARM = async (params: DataModels.CreateCollectionParams): Promise<DataModels.Collection> => {
+  if (!params.createNewDatabase) {
+    const isValid = await useDatabases.getState().validateCollectionId(params.databaseId, params.collectionId);
+    if (!isValid) {
+      const collectionName = getCollectionName().toLocaleLowerCase();
+      throw new Error(
+        `Create ${collectionName} failed: ${collectionName} with id ${params.collectionId} already exists`
+      );
+    }
+  }
+
   const { apiType } = userContext;
   switch (apiType) {
     case "SQL":
@@ -77,23 +83,6 @@ const createCollectionWithARM = async (params: DataModels.CreateCollectionParams
 };
 
 const createSqlContainer = async (params: DataModels.CreateCollectionParams): Promise<DataModels.Collection> => {
-  try {
-    const getResponse = await getSqlContainer(
-      userContext.subscriptionId,
-      userContext.resourceGroup,
-      userContext.databaseAccount.name,
-      params.databaseId,
-      params.collectionId
-    );
-    if (getResponse?.properties?.resource) {
-      throw new Error(`Create container failed: container with id ${params.collectionId} already exists`);
-    }
-  } catch (error) {
-    if (error.code !== "NotFound") {
-      throw error;
-    }
-  }
-
   const options: ARMTypes.CreateUpdateOptions = constructRpOptions(params);
   const resource: ARMTypes.SqlContainerResource = {
     id: params.collectionId,
@@ -131,23 +120,6 @@ const createSqlContainer = async (params: DataModels.CreateCollectionParams): Pr
 
 const createMongoCollection = async (params: DataModels.CreateCollectionParams): Promise<DataModels.Collection> => {
   const mongoWildcardIndexOnAllFields: ARMTypes.MongoIndex[] = [{ key: { keys: ["$**"] } }, { key: { keys: ["_id"] } }];
-  try {
-    const getResponse = await getMongoDBCollection(
-      userContext.subscriptionId,
-      userContext.resourceGroup,
-      userContext.databaseAccount.name,
-      params.databaseId,
-      params.collectionId
-    );
-    if (getResponse?.properties?.resource) {
-      throw new Error(`Create collection failed: collection with id ${params.collectionId} already exists`);
-    }
-  } catch (error) {
-    if (error.code !== "NotFound") {
-      throw error;
-    }
-  }
-
   const options: ARMTypes.CreateUpdateOptions = constructRpOptions(params);
   const resource: ARMTypes.MongoDBCollectionResource = {
     id: params.collectionId,
@@ -189,23 +161,6 @@ const createMongoCollection = async (params: DataModels.CreateCollectionParams):
 };
 
 const createCassandraTable = async (params: DataModels.CreateCollectionParams): Promise<DataModels.Collection> => {
-  try {
-    const getResponse = await getCassandraTable(
-      userContext.subscriptionId,
-      userContext.resourceGroup,
-      userContext.databaseAccount.name,
-      params.databaseId,
-      params.collectionId
-    );
-    if (getResponse?.properties?.resource) {
-      throw new Error(`Create table failed: table with id ${params.collectionId} already exists`);
-    }
-  } catch (error) {
-    if (error.code !== "NotFound") {
-      throw error;
-    }
-  }
-
   const options: ARMTypes.CreateUpdateOptions = constructRpOptions(params);
   const resource: ARMTypes.CassandraTableResource = {
     id: params.collectionId,
@@ -233,23 +188,6 @@ const createCassandraTable = async (params: DataModels.CreateCollectionParams):
 };
 
 const createGraph = async (params: DataModels.CreateCollectionParams): Promise<DataModels.Collection> => {
-  try {
-    const getResponse = await getGremlinGraph(
-      userContext.subscriptionId,
-      userContext.resourceGroup,
-      userContext.databaseAccount.name,
-      params.databaseId,
-      params.collectionId
-    );
-    if (getResponse?.properties?.resource) {
-      throw new Error(`Create graph failed: graph with id ${params.collectionId} already exists`);
-    }
-  } catch (error) {
-    if (error.code !== "NotFound") {
-      throw error;
-    }
-  }
-
   const options: ARMTypes.CreateUpdateOptions = constructRpOptions(params);
   const resource: ARMTypes.GremlinGraphResource = {
     id: params.collectionId,
@@ -284,22 +222,6 @@ const createGraph = async (params: DataModels.CreateCollectionParams): Promise<D
 };
 
 const createTable = async (params: DataModels.CreateCollectionParams): Promise<DataModels.Collection> => {
-  try {
-    const getResponse = await getTable(
-      userContext.subscriptionId,
-      userContext.resourceGroup,
-      userContext.databaseAccount.name,
-      params.collectionId
-    );
-    if (getResponse?.properties?.resource) {
-      throw new Error(`Create table failed: table with id ${params.collectionId} already exists`);
-    }
-  } catch (error) {
-    if (error.code !== "NotFound") {
-      throw error;
-    }
-  }
-
   const options: ARMTypes.CreateUpdateOptions = constructRpOptions(params);
   const resource: ARMTypes.TableResource = {
     id: params.collectionId,

src/Common/dataAccess/createDatabase.ts

@@ -2,20 +2,13 @@ import { DatabaseResponse } from "@azure/cosmos";
 import { DatabaseRequest } from "@azure/cosmos/dist-esm/client/Database/DatabaseRequest";
 import { AuthType } from "../../AuthType";
 import * as DataModels from "../../Contracts/DataModels";
+import { useDatabases } from "../../Explorer/useDatabases";
 import { userContext } from "../../UserContext";
-import {
+import { getDatabaseName } from "../../Utils/APITypeUtils";
-  createUpdateCassandraKeyspace,
+import { createUpdateCassandraKeyspace } from "../../Utils/arm/generatedClients/cosmos/cassandraResources";
-  getCassandraKeyspace,
+import { createUpdateGremlinDatabase } from "../../Utils/arm/generatedClients/cosmos/gremlinResources";
-} from "../../Utils/arm/generatedClients/cosmos/cassandraResources";
+import { createUpdateMongoDBDatabase } from "../../Utils/arm/generatedClients/cosmos/mongoDBResources";
-import {
+import { createUpdateSqlDatabase } from "../../Utils/arm/generatedClients/cosmos/sqlResources";
-  createUpdateGremlinDatabase,
-  getGremlinDatabase,
-} from "../../Utils/arm/generatedClients/cosmos/gremlinResources";
-import {
-  createUpdateMongoDBDatabase,
-  getMongoDBDatabase,
-} from "../../Utils/arm/generatedClients/cosmos/mongoDBResources";
-import { createUpdateSqlDatabase, getSqlDatabase } from "../../Utils/arm/generatedClients/cosmos/sqlResources";
 import {
   CassandraKeyspaceCreateUpdateParameters,
   CreateUpdateOptions,
@@ -48,6 +41,11 @@ export async function createDatabase(params: DataModels.CreateDatabaseParams): P
 }
 
 async function createDatabaseWithARM(params: DataModels.CreateDatabaseParams): Promise<DataModels.Database> {
+  if (!useDatabases.getState().validateDatabaseId(params.databaseId)) {
+    const databaseName = getDatabaseName().toLocaleLowerCase();
+    throw new Error(`Create ${databaseName} failed: ${databaseName} with id ${params.databaseId} already exists`);
+  }
+
   const { apiType } = userContext;
 
   switch (apiType) {
@@ -65,22 +63,6 @@ async function createDatabaseWithARM(params: DataModels.CreateDatabaseParams): P
 }
 
 async function createSqlDatabase(params: DataModels.CreateDatabaseParams): Promise<DataModels.Database> {
-  try {
-    const getResponse = await getSqlDatabase(
-      userContext.subscriptionId,
-      userContext.resourceGroup,
-      userContext.databaseAccount.name,
-      params.databaseId
-    );
-    if (getResponse?.properties?.resource) {
-      throw new Error(`Create database failed: database with id ${params.databaseId} already exists`);
-    }
-  } catch (error) {
-    if (error.code !== "NotFound") {
-      throw error;
-    }
-  }
-
   const options: CreateUpdateOptions = constructRpOptions(params);
   const rpPayload: SqlDatabaseCreateUpdateParameters = {
     properties: {
@@ -101,22 +83,6 @@ async function createSqlDatabase(params: DataModels.CreateDatabaseParams): Promi
 }
 
 async function createMongoDatabase(params: DataModels.CreateDatabaseParams): Promise<DataModels.Database> {
-  try {
-    const getResponse = await getMongoDBDatabase(
-      userContext.subscriptionId,
-      userContext.resourceGroup,
-      userContext.databaseAccount.name,
-      params.databaseId
-    );
-    if (getResponse?.properties?.resource) {
-      throw new Error(`Create database failed: database with id ${params.databaseId} already exists`);
-    }
-  } catch (error) {
-    if (error.code !== "NotFound") {
-      throw error;
-    }
-  }
-
   const options: CreateUpdateOptions = constructRpOptions(params);
   const rpPayload: MongoDBDatabaseCreateUpdateParameters = {
     properties: {
@@ -137,22 +103,6 @@ async function createMongoDatabase(params: DataModels.CreateDatabaseParams): Pro
 }
 
 async function createCassandraKeyspace(params: DataModels.CreateDatabaseParams): Promise<DataModels.Database> {
-  try {
-    const getResponse = await getCassandraKeyspace(
-      userContext.subscriptionId,
-      userContext.resourceGroup,
-      userContext.databaseAccount.name,
-      params.databaseId
-    );
-    if (getResponse?.properties?.resource) {
-      throw new Error(`Create database failed: database with id ${params.databaseId} already exists`);
-    }
-  } catch (error) {
-    if (error.code !== "NotFound") {
-      throw error;
-    }
-  }
-
   const options: CreateUpdateOptions = constructRpOptions(params);
   const rpPayload: CassandraKeyspaceCreateUpdateParameters = {
     properties: {
@@ -173,22 +123,6 @@ async function createCassandraKeyspace(params: DataModels.CreateDatabaseParams):
 }
 
 async function createGremlineDatabase(params: DataModels.CreateDatabaseParams): Promise<DataModels.Database> {
-  try {
-    const getResponse = await getGremlinDatabase(
-      userContext.subscriptionId,
-      userContext.resourceGroup,
-      userContext.databaseAccount.name,
-      params.databaseId
-    );
-    if (getResponse?.properties?.resource) {
-      throw new Error(`Create database failed: database with id ${params.databaseId} already exists`);
-    }
-  } catch (error) {
-    if (error.code !== "NotFound") {
-      throw error;
-    }
-  }
-
   const options: CreateUpdateOptions = constructRpOptions(params);
   const rpPayload: GremlinDatabaseCreateUpdateParameters = {
     properties: {

src/Explorer/useDatabases.ts

@@ -19,6 +19,8 @@ interface DatabasesState {
   loadDatabaseOffers: () => Promise<void>;
   isFirstResourceCreated: () => boolean;
   findSelectedDatabase: () => ViewModels.Database;
+  validateDatabaseId: (id: string) => boolean;
+  validateCollectionId: (databaseId: string, collectionId: string) => Promise<boolean>;
 }
 
 export const useDatabases: UseStore<DatabasesState> = create((set, get) => ({
@@ -129,4 +131,12 @@ export const useDatabases: UseStore<DatabasesState> = create((set, get) => ({
 
     return selectedNode.collection?.database;
   },
+  validateDatabaseId: (id: string): boolean => {
+    return !get().databases.some((database) => database.id() === id);
+  },
+  validateCollectionId: async (databaseId: string, collectionId: string): Promise<boolean> => {
+    const database = get().databases.find((db) => db.id() === databaseId);
+    await database.loadCollections();
+    return !database.collections().some((collection) => collection.id() === collectionId);
+  },
 }));

test/cassandra/container.spec.ts

@@ -1,17 +1,17 @@
 import { jest } from "@jest/globals";
 import "expect-playwright";
 import { generateUniqueName } 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");
+  page.setDefaultTimeout(50000);
 
   await page.goto("https://localhost:1234/testExplorer.html?accountName=portal-cassandra-runner");
   await page.waitForSelector("iframe");
-  const explorer = page.frame({
+  const explorer = await waitForExplorer();
-    name: "explorer",
-  });
 
   await explorer.click('[data-test="New Table"]');
   await explorer.click('[aria-label="Keyspace id"]');
@@ -19,7 +19,7 @@ test("Cassandra keyspace and table CRUD", async () => {
   await explorer.click('[aria-label="addCollection-tableId"]');
   await explorer.fill('[aria-label="addCollection-tableId"]', tableId);
   await explorer.click("#sidePanelOkButton");
-  await explorer.click(`.nodeItem >> text=${keyspaceId}`, { timeout: 50000 });
+  await explorer.click(`.nodeItem >> text=${keyspaceId}`);
   await explorer.click(`[data-test="${tableId}"] [aria-label="More"]`);
   await explorer.click('button[role="menuitem"]:has-text("Delete Table")');
   await explorer.fill('text=* Confirm by typing the table id >> input[type="text"]', tableId);

test/graph/container.spec.ts

@@ -1,17 +1,16 @@
 import { jest } from "@jest/globals";
 import "expect-playwright";
 import { generateDatabaseNameWithTimestamp, generateUniqueName } from "../utils/shared";
+import { waitForExplorer } from "../utils/waitForExplorer";
 jest.setTimeout(240000);
 
 test("Graph CRUD", async () => {
   const databaseId = generateDatabaseNameWithTimestamp();
   const containerId = generateUniqueName("container");
+  page.setDefaultTimeout(50000);
 
   await page.goto("https://localhost:1234/testExplorer.html?accountName=portal-gremlin-runner");
-  await page.waitForSelector("iframe");
+  const explorer = await waitForExplorer();
-  const explorer = page.frame({
-    name: "explorer",
-  });
 
   // Create new database and graph
   await explorer.click('[data-test="New Graph"]');
@@ -19,7 +18,7 @@ test("Graph CRUD", async () => {
   await explorer.fill('[aria-label="Graph id"]', containerId);
   await explorer.fill('[aria-label="Partition key"]', "/pk");
   await explorer.click("#sidePanelOkButton");
-  await explorer.click(`.nodeItem >> text=${databaseId}`, { timeout: 50000 });
+  await explorer.click(`.nodeItem >> text=${databaseId}`);
   await explorer.click(`.nodeItem >> text=${containerId}`);
   // Delete database and graph
   await explorer.click(`[data-test="${containerId}"] [aria-label="More"]`);

test/mongo/container.spec.ts

@@ -1,17 +1,16 @@
 import { jest } from "@jest/globals";
 import "expect-playwright";
 import { generateDatabaseNameWithTimestamp, generateUniqueName } from "../utils/shared";
+import { waitForExplorer } from "../utils/waitForExplorer";
 jest.setTimeout(240000);
 
 test("Mongo CRUD", async () => {
   const databaseId = generateDatabaseNameWithTimestamp();
   const containerId = generateUniqueName("container");
+  page.setDefaultTimeout(50000);
 
   await page.goto("https://localhost:1234/testExplorer.html?accountName=portal-mongo-runner");
-  await page.waitForSelector("iframe");
+  const explorer = await waitForExplorer();
-  const explorer = page.frame({
-    name: "explorer",
-  });
 
   // Create new database and collection
   await explorer.click('[data-test="New Collection"]');
@@ -19,7 +18,7 @@ test("Mongo CRUD", async () => {
   await explorer.fill('[aria-label="Collection id"]', containerId);
   await explorer.fill('[aria-label="Shard key"]', "/pk");
   await explorer.click("#sidePanelOkButton");
-  await explorer.click(`.nodeItem >> text=${databaseId}`, { timeout: 50000 });
+  await explorer.click(`.nodeItem >> text=${databaseId}`);
   await explorer.click(`.nodeItem >> text=${containerId}`);
   // Create indexing policy
   await explorer.click(".nodeItem >> text=Settings");

test/mongo/container32.spec.ts

@@ -1,17 +1,16 @@
 import { jest } from "@jest/globals";
 import "expect-playwright";
 import { generateDatabaseNameWithTimestamp, generateUniqueName } from "../utils/shared";
+import { waitForExplorer } from "../utils/waitForExplorer";
 jest.setTimeout(240000);
 
 test("Mongo CRUD", async () => {
   const databaseId = generateDatabaseNameWithTimestamp();
   const containerId = generateUniqueName("container");
+  page.setDefaultTimeout(50000);
 
   await page.goto("https://localhost:1234/testExplorer.html?accountName=portal-mongo32-runner");
-  await page.waitForSelector("iframe");
+  const explorer = await waitForExplorer();
-  const explorer = page.frame({
-    name: "explorer",
-  });
 
   // Create new database and collection
   await explorer.click('[data-test="New Collection"]');
@@ -19,7 +18,7 @@ test("Mongo CRUD", async () => {
   await explorer.fill('[aria-label="Collection id"]', containerId);
   await explorer.fill('[aria-label="Shard key"]', "pk");
   await explorer.click("#sidePanelOkButton");
-  explorer.click(`.nodeItem >> text=${databaseId}`, { timeout: 50000 });
+  explorer.click(`.nodeItem >> text=${databaseId}`);
   explorer.click(`.nodeItem >> text=${containerId}`);
   // Delete database and collection
   explorer.click(`[data-test="${containerId}"] [aria-label="More"]`);

test/notebooks/upload.spec.ts

@@ -2,6 +2,7 @@ import { jest } from "@jest/globals";
 import "expect-playwright";
 import fs from "fs";
 import path from "path";
+import { waitForExplorer } from "../utils/waitForExplorer";
 jest.setTimeout(240000);
 
 const filename = "GettingStarted.ipynb";
@@ -11,10 +12,7 @@ fs.copyFileSync(path.join(__dirname, filename), path.join(__dirname, fileToUploa
 
 test("Notebooks", async () => {
   await page.goto("https://localhost:1234/testExplorer.html?accountName=portal-sql-runner");
-  await page.waitForSelector("iframe");
+  const explorer = await waitForExplorer();
-  const explorer = page.frame({
-    name: "explorer",
-  });
   // Upload and Delete Notebook
   await explorer.click('[data-test="My Notebooks"] [aria-label="More"]');
   await explorer.click('button[role="menuitem"]:has-text("Upload File")');

test/sql/container.spec.ts

@@ -1,24 +1,22 @@
 import { jest } from "@jest/globals";
 import "expect-playwright";
 import { generateUniqueName } from "../utils/shared";
+import { waitForExplorer } from "../utils/waitForExplorer";
 jest.setTimeout(120000);
 
 test("SQL CRUD", async () => {
   const databaseId = generateUniqueName("db");
   const containerId = generateUniqueName("container");
+  page.setDefaultTimeout(50000);
 
   await page.goto("https://localhost:1234/testExplorer.html?accountName=portal-sql-runner");
-  await page.waitForSelector("iframe");
+  const explorer = await waitForExplorer();
-  const explorer = page.frame({
-    name: "explorer",
-  });
-
   await explorer.click('[data-test="New Container"]');
   await explorer.fill('[aria-label="New database id"]', databaseId);
   await explorer.fill('[aria-label="Container id"]', containerId);
   await explorer.fill('[aria-label="Partition key"]', "/pk");
   await explorer.click("#sidePanelOkButton");
-  await explorer.click(`.nodeItem >> text=${databaseId}`, { timeout: 50000 });
+  await explorer.click(`.nodeItem >> text=${databaseId}`);
   await explorer.click(`[data-test="${containerId}"] [aria-label="More"]`);
   await explorer.click('button[role="menuitem"]:has-text("Delete Container")');
   await explorer.fill('text=* Confirm by typing the container id >> input[type="text"]', containerId);

test/tables/container.spec.ts

@@ -1,22 +1,22 @@
 import { jest } from "@jest/globals";
 import "expect-playwright";
 import { generateUniqueName } from "../utils/shared";
+import { waitForExplorer } from "../utils/waitForExplorer";
 
 jest.setTimeout(120000);
 
 test("Tables CRUD", async () => {
   const tableId = generateUniqueName("table");
+  page.setDefaultTimeout(50000);
 
   await page.goto("https://localhost:1234/testExplorer.html?accountName=portal-tables-runner");
-  await page.waitForSelector("iframe");
+  const explorer = await waitForExplorer();
-  const explorer = page.frame({
-    name: "explorer",
-  });
 
+  await page.waitForSelector('text="Querying databases"', { state: "detached" });
   await explorer.click('[data-test="New Table"]');
   await explorer.fill('[aria-label="Table id"]', tableId);
   await explorer.click("#sidePanelOkButton");
-  await explorer.click(`[data-test="TablesDB"]`, { timeout: 50000 });
+  await explorer.click(`[data-test="TablesDB"]`);
   await explorer.click(`[data-test="${tableId}"] [aria-label="More"]`);
   await explorer.click('button[role="menuitem"]:has-text("Delete Table")');
   await explorer.fill('text=* Confirm by typing the table id >> input[type="text"]', tableId);

test/utils/waitForExplorer.ts

@@ -0,0 +1,9 @@
+import { Frame } from "playwright";
+
+export const waitForExplorer = async (): Promise<Frame> => {
+  await page.waitForSelector("iframe");
+  await page.waitForTimeout(5000);
+  return page.frame({
+    name: "explorer",
+  });
+};