feat: update response tab UI

app/client/cypress/e2e/Regression/ClientSide/BugTests/Binding_Bug28287_Spec.ts

@@ -45,9 +45,9 @@ describe(
         EditorNavigation.SelectEntityByName(queryName, EntityType.Query);
 
         BottomPane.response.switchToResponseTab();
-
+        BottomPane.response.openResponseTypeMenu();
         agHelper.AssertElementVisibility(
-          BottomPane.response.getResponseTypeSelector("TABLE"),
+          BottomPane.response.locators.responseTypeMenuItem("TABLE"),
         );
       });
     });

app/client/cypress/e2e/Regression/ServerSide/Datasources/Redis_Basic_Spec.ts

@@ -30,32 +30,32 @@ describe(
       //Add HSET
       dataSources.CreateQueryAfterDSSaved();
       dataSources.EnterQuery(hSetReceipe);
-      dataSources.RunQueryNVerifyResponseViews(1); //verify all views are returned!
+      dataSources.runQueryAndVerifyResponseViews(1); //verify all views are returned!
       dataSources.AssertQueryTableResponse(0, "4"); //Success response for 4 keys inserted via above HSET!
 
       //Read only one key from above HSET
       dataSources.EnterQuery(hGetKeys);
-      dataSources.RunQueryNVerifyResponseViews(1); //verify all views are returned!
+      dataSources.runQueryAndVerifyResponseViews(1); //verify all views are returned!
       dataSources.AssertQueryTableResponse(0, "Vegetable Stir Fry");
 
       //Read more than one key from above HSET
       dataSources.EnterQuery(hMGet);
-      dataSources.RunQueryNVerifyResponseViews(2);
+      dataSources.runQueryAndVerifyResponseViews(2);
       dataSources.AssertQueryTableResponse(0, "easy");
       dataSources.AssertQueryTableResponse(1, "Vegetable Stir Fry");
 
       //Update key value in HSET
       dataSources.EnterQuery(hUpdate);
-      dataSources.RunQueryNVerifyResponseViews(1); //verify all views are returned!
+      dataSources.runQueryAndVerifyResponseViews(1); //verify all views are returned!
 
       //validate updated key
       dataSources.EnterQuery(getUpdatedKey);
-      dataSources.RunQueryNVerifyResponseViews(1);
+      dataSources.runQueryAndVerifyResponseViews(1);
       dataSources.AssertQueryTableResponse(0, "medium");
 
       //Get All keys from HSET
       dataSources.EnterQuery(getAll);
-      dataSources.RunQueryNVerifyResponseViews(8); //4 keys, 4 values
+      dataSources.runQueryAndVerifyResponseViews(8); //4 keys, 4 values
       dataSources.ReadQueryTableResponse(0).then(($cellData: any) => {
         expect($cellData).to.be.oneOf([
           "name",
@@ -70,11 +70,11 @@ describe(
 
       //Ading one more key/value to HSET
       dataSources.EnterQuery(addNewKeyValue);
-      dataSources.RunQueryNVerifyResponseViews(1);
+      dataSources.runQueryAndVerifyResponseViews(1);
 
       //Verify new key/value also added to HSET
       dataSources.EnterQuery(getAll);
-      dataSources.RunQueryNVerifyResponseViews(10); //5 keys, 5 values
+      dataSources.runQueryAndVerifyResponseViews(10); //5 keys, 5 values
       dataSources.ReadQueryTableResponse(0).then(($cellData: any) => {
         expect($cellData).to.be.oneOf([
           "name",
@@ -87,11 +87,11 @@ describe(
 
       //Deleting the Hash key
       dataSources.EnterQuery(deletehKey);
-      dataSources.RunQueryNVerifyResponseViews(1);
+      dataSources.runQueryAndVerifyResponseViews(1);
 
       //Verify Deletion is success
       dataSources.EnterQuery(hGetKeys);
-      dataSources.RunQueryNVerifyResponseViews(); //5 keys, 5 values
+      dataSources.runQueryAndVerifyResponseViews(); //5 keys, 5 values
       dataSources.AssertQueryTableResponse(0, "null");
 
       // Delete the query & datasource

app/client/cypress/e2e/Regression/ServerSide/GenerateCRUD/MySQL1_Spec.ts

@@ -163,7 +163,7 @@ describe(
       agHelper.FocusElement(locators._codeMirrorTextArea);
       //agHelper.VerifyEvaluatedValue(tableCreateQuery); //failing sometimes!
 
-      dataSources.RunQueryNVerifyResponseViews();
+      dataSources.runQueryAndVerifyResponseViews();
       dataSources.AssertTableInVirtuosoList(dsName, "productlines");
 
       agHelper.ActionContextMenuWithInPane({
@@ -279,7 +279,7 @@ describe(
       agHelper.FocusElement(locators._codeMirrorTextArea);
       //agHelper.VerifyEvaluatedValue(tableCreateQuery);
 
-      dataSources.RunQueryNVerifyResponseViews();
+      dataSources.runQueryAndVerifyResponseViews();
       dataSources.AssertTableInVirtuosoList(dsName, "Stores", false);
     });
 

app/client/cypress/e2e/Regression/ServerSide/GenerateCRUD/MySQL2_Spec.ts

@@ -68,7 +68,7 @@ describe(
       agHelper.FocusElement(locators._codeMirrorTextArea);
       //agHelper.VerifyEvaluatedValue(tableCreateQuery);
 
-      dataSources.RunQueryNVerifyResponseViews();
+      dataSources.runQueryAndVerifyResponseViews();
       dataSources.AssertTableInVirtuosoList(dsName, "Stores");
 
       agHelper.ActionContextMenuWithInPane({
@@ -79,7 +79,7 @@ describe(
 
     it("2. Validate Select record from Postgress datasource & verify query response", () => {
       dataSources.CreateQueryForDS(dsName, "SELECT * FROM Stores LIMIT 10");
-      dataSources.RunQueryNVerifyResponseViews(10);
+      dataSources.runQueryAndVerifyResponseViews(10);
       dataSources.AssertQueryTableResponse(5, "2112");
       dataSources.AssertQueryTableResponse(6, "Mike's Liquors");
       // Commenting this deletion of query to make the generate crud work on the new page instead of the current page
@@ -375,7 +375,7 @@ describe(
       agHelper.FocusElement(locators._codeMirrorTextArea);
       //agHelper.VerifyEvaluatedValue(tableCreateQuery);
 
-      dataSources.RunQueryNVerifyResponseViews();
+      dataSources.runQueryAndVerifyResponseViews();
       dataSources.AssertTableInVirtuosoList(dsName, "Stores", false);
 
       agHelper.ActionContextMenuWithInPane({

app/client/cypress/e2e/Regression/ServerSide/GenerateCRUD/Postgres2_Spec.ts

@@ -61,7 +61,7 @@ describe(
       agHelper.FocusElement(locators._codeMirrorTextArea);
       //agHelper.VerifyEvaluatedValue(tableCreateQuery); //failing sometimes!
 
-      dataSources.RunQueryNVerifyResponseViews();
+      dataSources.runQueryAndVerifyResponseViews();
     });
 
     it("2. Validate Select record from Postgress datasource & verify query response", () => {
@@ -70,7 +70,7 @@ describe(
         "public.vessels",
         "Select",
       );
-      dataSources.RunQueryNVerifyResponseViews(10);
+      dataSources.runQueryAndVerifyResponseViews(10);
       dataSources.AssertQueryTableResponse(0, "371681");
       dataSources.AssertQueryTableResponse(6, "Passenger");
       agHelper.ActionContextMenuWithInPane({
@@ -617,7 +617,7 @@ describe(
       dataSources.CreateQueryForDS(dsName, deleteTblQuery, "DropVessels");
       agHelper.FocusElement(locators._codeMirrorTextArea);
 
-      dataSources.RunQueryNVerifyResponseViews();
+      dataSources.runQueryAndVerifyResponseViews();
       dataSources.AssertTableInVirtuosoList(dsName, "public.vessels", false);
     });
 

app/client/cypress/e2e/Regression/ServerSide/Postgres_DataTypes/UUID_Spec.ts

@@ -259,7 +259,7 @@ describe(
       //Validating use of extention
       query = `CREATE EXTENSION IF NOT EXISTS "uuid-ossp"; CREATE EXTENSION IF NOT EXISTS "pgcrypto"`;
       dataSources.CreateQueryForDS(dsName, query, "verifyUUIDFunctions");
-      dataSources.RunQueryNVerifyResponseViews(1);
+      dataSources.runQueryAndVerifyResponseViews(1);
       dataSources.AssertQueryResponseHeaders(["affectedRows"]);
       dataSources.ReadQueryTableResponse(0).then(($cellData) => {
         expect($cellData).to.eq("0");
@@ -297,7 +297,7 @@ describe(
       //Validating Addition of new column taking default value form package method
       query = `ALTER TABLE uuidtype ADD COLUMN newUUID uuid DEFAULT uuid_generate_v4();`;
       dataSources.EnterQuery(query);
-      dataSources.RunQueryNVerifyResponseViews(1);
+      dataSources.runQueryAndVerifyResponseViews(1);
       dataSources.AssertQueryResponseHeaders(["affectedRows"]);
       dataSources.ReadQueryTableResponse(0).then(($cellData) => {
         expect($cellData).to.eq("0");
@@ -314,7 +314,7 @@ describe(
       //Validating altering the new column default value to generate id from pgcrypto package
       query = `ALTER TABLE uuidtype ALTER COLUMN newUUID SET DEFAULT gen_random_uuid();`;
       dataSources.EnterQuery(query);
-      dataSources.RunQueryNVerifyResponseViews(1);
+      dataSources.runQueryAndVerifyResponseViews(1);
       dataSources.AssertQueryResponseHeaders(["affectedRows"]);
       dataSources.ReadQueryTableResponse(0).then(($cellData) => {
         expect($cellData).to.eq("0");

app/client/cypress/e2e/Regression/ServerSide/QueryPane/Mongo1_spec.ts

@@ -333,7 +333,7 @@ describe(
         "Find",
       );
       dataSources.ValidateNSelectDropdown("Command", "Find document(s)");
-      dataSources.RunQueryNVerifyResponseViews(1, false);
+      dataSources.runQueryAndVerifyResponseViews(1, false);
       agHelper.ActionContextMenuWithInPane({
         action: "Delete",
         entityType: entityItems.Query,
@@ -352,7 +352,7 @@ describe(
         directInput: false,
         inputFieldName: "Query",
       });
-      dataSources.RunQueryNVerifyResponseViews(1, false);
+      dataSources.runQueryAndVerifyResponseViews(1, false);
       agHelper.ActionContextMenuWithInPane({
         action: "Delete",
         entityType: entityItems.Query,
@@ -738,7 +738,7 @@ describe(
         "Aggregate",
       );
       dataSources.ValidateNSelectDropdown("Command", "Aggregate");
-      dataSources.RunQueryNVerifyResponseViews(7, false);
+      dataSources.runQueryAndVerifyResponseViews(7, false);
       agHelper.ActionContextMenuWithInPane({
         action: "Delete",
         entityType: entityItems.Query,
@@ -899,7 +899,7 @@ describe(
         "Find",
       );
       dataSources.ValidateNSelectDropdown("Command", "Find document(s)");
-      dataSources.RunQueryNVerifyResponseViews(4, false);
+      dataSources.runQueryAndVerifyResponseViews(4, false);
       agHelper.ActionContextMenuWithInPane({
         action: "Delete",
         entityType: entityItems.Query,

app/client/cypress/e2e/Regression/ServerSide/QueryPane/S3_1_spec.js

@@ -77,7 +77,7 @@ describe(
         "List files",
       );
 
-      dataSources.RunQueryNVerifyResponseViews(100);
+      dataSources.runQueryAndVerifyResponseViews(100);
       agHelper.ActionContextMenuWithInPane({
         action: "Delete",
         entityType: entityItems.Query,
@@ -191,8 +191,7 @@ describe(
       cy.typeValueNValidate(fileName, formControls.s3ListPrefix);
       dataSources.RunQuery({ toValidateResponse: false });
 
-      BottomPane.response.switchResponseType("TABLE");
-      BottomPane.response.switchResponseType("JSON");
+      BottomPane.response.selectResponseResponseTypeFromMenu("JSON");
 
       cy.wait("@postExecute").then(({ response }) => {
         expect(response.body.data.isExecutionSuccess).to.eq(true);

app/client/cypress/e2e/Sanity/Datasources/Arango_Basic_Spec.ts

@@ -219,7 +219,7 @@ if (CURRENT_REPO == REPO.CE) {
     }
     INTO ${collectionName}`;
         dataSources.EnterQuery(query);
-        dataSources.RunQueryNVerifyResponseViews();
+        dataSources.runQueryAndVerifyResponseViews();
         dataSources.AssertQueryResponseHeaders([
           "writesExecuted",
           "writesIgnored",
@@ -232,7 +232,7 @@ if (CURRENT_REPO == REPO.CE) {
       FILTER place.type == "Natural"
         RETURN { country: doc.country, name: place.name }`;
         dataSources.EnterQuery(query);
-        dataSources.RunQueryNVerifyResponseViews(5); //Verify all records are filtered
+        dataSources.runQueryAndVerifyResponseViews(5); //Verify all records are filtered
         dataSources.AssertQueryTableResponse(0, "Japan");
         dataSources.AssertQueryTableResponse(1, "Mount Fuji");
         dataSources.AssertQueryTableResponse(6, "Brazil"); //Widget binding is verified here
@@ -265,7 +265,7 @@ if (CURRENT_REPO == REPO.CE) {
     }
     IN ${collectionName}`;
         dataSources.EnterQuery(query);
-        dataSources.RunQueryNVerifyResponseViews();
+        dataSources.runQueryAndVerifyResponseViews();
 
         dataSources.createQueryWithDatasourceSchemaTemplate(
           dsName,
@@ -276,7 +276,7 @@ if (CURRENT_REPO == REPO.CE) {
     FILTER document._key == "1"
     RETURN document`;
         dataSources.EnterQuery(query);
-        dataSources.RunQueryNVerifyResponseViews(1);
+        dataSources.runQueryAndVerifyResponseViews(1);
         dataSources.AssertQueryTableResponse(3, "Australia");
 
         //Delete record from collection
@@ -287,7 +287,7 @@ if (CURRENT_REPO == REPO.CE) {
         );
         query = `REMOVE "1" in ${collectionName}`;
         dataSources.EnterQuery(query);
-        dataSources.RunQueryNVerifyResponseViews(1); //Removing Australia
+        dataSources.runQueryAndVerifyResponseViews(1); //Removing Australia
 
         //Verify no records return for the deleted key
         query = `FOR document IN ${collectionName}

app/client/cypress/e2e/Sanity/Datasources/MockDBs_Spec.ts

@@ -42,7 +42,7 @@ describe(
           'SELECT * FROM public."users" LIMIT 10;',
         );
 
-        dataSources.RunQueryNVerifyResponseViews(); //minimum 1 rows are expected
+        dataSources.runQueryAndVerifyResponseViews(); //minimum 1 rows are expected
         AppSidebar.navigate(AppSidebarButton.Data);
         dataSources
           .getDatasourceListItemDescription(mockDBName)
@@ -57,7 +57,7 @@ describe(
           expect(interception.request.body.source).to.equal("SELF");
         });
 
-        dataSources.RunQueryNVerifyResponseViews(); //minimum 1 rows are expected
+        dataSources.runQueryAndVerifyResponseViews(); //minimum 1 rows are expected
         AppSidebar.navigate(AppSidebarButton.Data);
         dataSources
           .getDatasourceListItemDescription(mockDBName)

app/client/cypress/support/Pages/DataSources.ts

@@ -1133,6 +1133,7 @@ export class DataSources {
     this.assertHelper.AssertNetworkStatus("@saveAction", 200);
   }
 
+  /** @deprecated */
   public RunQueryNVerifyResponseViews(
     expectedRecordsCount = 1,
     tableCheck = true,
@@ -1152,6 +1153,29 @@ export class DataSources {
     BottomPane.response.validateRecordCount(expectedRecordsCount);
   }
 
+  public runQueryAndVerifyResponseViews(
+    expectedRecordsCount = 1,
+    tableCheck = true,
+  ) {
+    this.RunQuery();
+    if (tableCheck) {
+      BottomPane.response.openResponseTypeMenu();
+
+      this.agHelper.AssertElementVisibility(
+        BottomPane.response.locators.responseTypeMenuItem("TABLE"),
+      );
+      this.agHelper.AssertElementVisibility(
+        BottomPane.response.locators.responseTypeMenuItem("JSON"),
+      );
+      this.agHelper.AssertElementVisibility(
+        BottomPane.response.locators.responseTypeMenuItem("RAW"),
+      );
+
+      BottomPane.response.closeResponseTypeMenu();
+    }
+    BottomPane.response.validateRecordCount(expectedRecordsCount);
+  }
+
   public CreateDataSource(
     dsType:
       | "Postgres"

app/client/cypress/support/Pages/IDE/BottomPane/Response.ts

@@ -1,17 +1,45 @@
 class Response {
-  private ResponseTab = "//button[@data-testid='t--tab-RESPONSE_TAB']";
+  public locators = {
+    responseTab: "[data-testid='t--tab-RESPONSE_TAB']",
+    responseDataContainer: "[data-testid='t--query-response-data-container']",
+    responseTypeMenuTrigger: "[data-testid='t--query-response-type-trigger']",
+
+    /** @deprecated */
+    responseType(type: string): string {
+      return `//div[@data-testid='t--response-tab-segmented-control']//span[text()='${type}']`;
+    },
+
+    responseTypeMenuItem(type: string) {
+      return `div[data-testid="t--query-response-type-menu-item"][data-value="${type}"]`;
+    },
+  };
+
+  /** @deprecated */
+  public getResponseTypeSelector = this.locators.responseType;
+
+  /** @deprecated */
+  public switchResponseType(type: string): void {
+    this.switchToResponseTab();
+    cy.xpath(this.locators.responseType(type)).click({ force: true });
+  }
 
   public switchToResponseTab(): void {
-    cy.xpath(this.ResponseTab).click({ force: true });
+    cy.get(this.locators.responseTab).click({ force: true });
   }
 
-  public getResponseTypeSelector(type: string): string {
-    return `//div[@data-testid='t--response-tab-segmented-control']//span[text()='${type}']`;
+  public openResponseTypeMenu() {
+    cy.get(this.locators.responseDataContainer).realHover();
+    cy.get(this.locators.responseTypeMenuTrigger).realClick();
   }
 
-  public switchResponseType(type: string): void {
+  public selectResponseResponseTypeFromMenu(type: string): void {
     this.switchToResponseTab();
-    cy.xpath(this.getResponseTypeSelector(type)).click({ force: true });
+    this.openResponseTypeMenu();
+    cy.get(this.locators.responseTypeMenuItem(type)).realClick();
+  }
+
+  public closeResponseTypeMenu() {
+    cy.get("body").realClick({ x: 0, y: 0 });
   }
 
   // TODO: Implement this method when response UI is ready