feat: unified response view component (#37897)

## Description
Common component for response tab view.

Fixes #37759 


## Automation

/ok-to-test tags="@tag.All"

### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/12242471397>
> Commit: 5263092
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=12242471397&attempt=2"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.All`
> Spec:
> <hr>Mon, 09 Dec 2024 21:00:53 UTC
<!-- end of auto-generated comment: Cypress test results  -->


## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [x] No


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Introduced a new `Response` component to handle and display action
responses in the plugin action editor.
- Streamlined response handling by consolidating components and updating
props for better performance and user experience.

- **Bug Fixes**
- Enhanced error handling and response display logic to improve clarity
and user interaction.

- **Documentation**
- Updated import paths and component references to reflect the new
structure and naming conventions.

- **Tests**
- Modified Cypress tests to utilize the new
`runQueryAndVerifyResponseViews` method for improved readability and
maintainability.
- Updated tests to replace direct interactions with UI elements by using
methods from the `BottomTabs` module for selecting response types.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

app/client/cypress/e2e/GSheet/AllAccess_Spec.ts

@@ -126,7 +126,7 @@ describe.skip(
         dataSourceName,
         spreadSheetName,
       );
-      dataSources.RunQueryNVerifyResponseViews(GSHEET_DATA.length);
+      dataSources.runQueryAndVerifyResponseViews({ count: GSHEET_DATA.length });
       dataSources.AssertQueryTableResponse(0, GSHEET_DATA[0].uniq_id);
       dataSources.AssertQueryTableResponse(1, "ホーンビィ 2014 カタログ"); // Asserting other language
       dataSources.AssertQueryTableResponse(2, "₹, $, €, ¥, £"); // Asserting different symbols
@@ -135,7 +135,7 @@ describe.skip(
       // Update query to fetch only 1 column and verify
       gsheetHelper.SelectMultiDropDownValue("Columns", "product_name");
       dataSources.RunQuery();
-      dataSources.RunQueryNVerifyResponseViews(GSHEET_DATA.length);
+      dataSources.runQueryAndVerifyResponseViews({ count: GSHEET_DATA.length });
       dataSources.AssertQueryTableResponse(0, GSHEET_DATA[0].product_name);
 
       //Remove column filter and add Sort By Ascending and verify
@@ -145,7 +145,7 @@ describe.skip(
         directInput: false,
         inputFieldName: "Sort By",
       });
-      dataSources.RunQueryNVerifyResponseViews(GSHEET_DATA.length);
+      dataSources.runQueryAndVerifyResponseViews({ count: GSHEET_DATA.length });
       dataSources.AssertQueryTableResponse(
         0,
         "5afbaf65680c9f378af5b3a3ae22427e",
@@ -161,7 +161,7 @@ describe.skip(
       dataSources.ClearSortByOption(); //clearing previous sort option
       dataSources.EnterSortByValues("price", "Descending");
       dataSources.RunQuery();
-      dataSources.RunQueryNVerifyResponseViews(GSHEET_DATA.length);
+      dataSources.runQueryAndVerifyResponseViews({ count: GSHEET_DATA.length });
       dataSources.AssertQueryTableResponse(
         1,
         "ホーンビー ゲージ ウェスタン エクスプレス デジタル トレイン セット (eLink および TTS ロコ トレイン セット付き)",
@@ -181,7 +181,7 @@ describe.skip(
         dataSources._nestedWhereClauseValue(0),
       );
       dataSources.RunQuery();
-      dataSources.RunQueryNVerifyResponseViews(8);
+      dataSources.runQueryAndVerifyResponseViews({ count: 8 });
       dataSources.AssertQueryTableResponse(
         0,
         "87bbb472ef9d90dcef140a551665c929",
@@ -199,7 +199,7 @@ describe.skip(
         inputFieldName: "Cell range",
       });
       dataSources.RunQuery();
-      dataSources.RunQueryNVerifyResponseViews(4);
+      dataSources.runQueryAndVerifyResponseViews({ count: 4 });
       dataSources.AssertQueryTableResponse(
         0,
         "eac7efa5dbd3d667f26eb3d3ab504464",
@@ -246,7 +246,7 @@ describe.skip(
         0,
         true,
       );
-      dataSources.RunQueryNVerifyResponseViews(10);
+      dataSources.runQueryAndVerifyResponseViews({ count: 10 });
       dataSources.AssertQueryTableResponse(
         0,
         "eac7efa5dbd3d667f26eb3d3ab504464",
@@ -281,7 +281,7 @@ describe.skip(
         true,
       ); // Converting the field to dropdown
       dataSources.ValidateNSelectDropdown("Sheet name", "", "Sheet1");
-      dataSources.RunQueryNVerifyResponseViews(10);
+      dataSources.runQueryAndVerifyResponseViews({ count: 10 });
       dataSources.AssertQueryTableResponse(
         0,
         "eac7efa5dbd3d667f26eb3d3ab504464",

app/client/cypress/e2e/GSheet/GsheetMisc_Spec.ts

@@ -90,7 +90,7 @@ describe.skip(
       dataSources.ValidateNSelectDropdown("Entity", "Sheet Row(s)");
       dataSources.ValidateNSelectDropdown("Spreadsheet", "", spreadSheetName);
       dataSources.ValidateNSelectDropdown("Sheet name", "", "Sheet1");
-      dataSources.RunQueryNVerifyResponseViews(GSHEET_DATA.length);
+      dataSources.runQueryAndVerifyResponseViews({ count: GSHEET_DATA.length });
       dataSources.AssertQueryResponseHeaders(columnHeaders);
       dataSources.AssertQueryTableResponse(0, GSHEET_DATA[0].uniq_id);
       dataSources.AssertQueryTableResponse(1, "ホーンビィ 2014 カタログ"); // Asserting other language
@@ -104,7 +104,7 @@ describe.skip(
       dataSources.ValidateNSelectDropdown("Entity", "Sheet Row(s)");
       dataSources.ValidateNSelectDropdown("Spreadsheet", "", spreadSheetName);
       dataSources.ValidateNSelectDropdown("Sheet name", "", "Sheet1");
-      dataSources.RunQueryNVerifyResponseViews(GSHEET_DATA.length);
+      dataSources.runQueryAndVerifyResponseViews({ count: GSHEET_DATA.length });
       dataSources.AssertQueryResponseHeaders(columnHeaders);
       dataSources.AssertQueryTableResponse(0, GSHEET_DATA[0].uniq_id);
       dataSources.AssertQueryTableResponse(1, "ホーンビィ 2014 カタログ"); // Asserting other language

app/client/cypress/e2e/GSheet/ReadNWrite_Access_Spec.ts

@@ -128,15 +128,15 @@ describe.skip(
         dataSourceName.readNWrite,
         spreadSheetName,
       );
-      dataSources.RunQueryNVerifyResponseViews(GSHEET_DATA.length);
+      dataSources.runQueryAndVerifyResponseViews({ count: GSHEET_DATA.length });
       dataSources.AssertQueryTableResponse(0, GSHEET_DATA[0].uniq_id);
       dataSources.AssertQueryTableResponse(1, "ホーンビィ 2014 カタログ"); // Asserting other language
       dataSources.AssertQueryTableResponse(2, "₹, $, €, ¥, £"); // Asserting different symbols
       dataSources.AssertQueryTableResponse(3, "!@#$%^&*"); // Asserting special chars
       // Update query to fetch only 1 column and verify
       gsheetHelper.SelectMultiDropDownValue("Columns", "product_name");
       dataSources.RunQuery();
-      dataSources.RunQueryNVerifyResponseViews(GSHEET_DATA.length);
+      dataSources.runQueryAndVerifyResponseViews({ count: GSHEET_DATA.length });
       dataSources.AssertQueryTableResponse(0, GSHEET_DATA[0].product_name);
       //Remove column filter and add Sort By Ascending and verify
       gsheetHelper.SelectMultiDropDownValue("Columns", "product_name"); //unselect the Columns dd value
@@ -145,7 +145,7 @@ describe.skip(
         directInput: false,
         inputFieldName: "Sort By",
       });
-      dataSources.RunQueryNVerifyResponseViews(GSHEET_DATA.length);
+      dataSources.runQueryAndVerifyResponseViews({ count: GSHEET_DATA.length });
       dataSources.AssertQueryTableResponse(
         0,
         "5afbaf65680c9f378af5b3a3ae22427e",
@@ -160,7 +160,7 @@ describe.skip(
       dataSources.ClearSortByOption(); //clearing previous sort option
       dataSources.EnterSortByValues("price", "Descending");
       dataSources.RunQuery();
-      dataSources.RunQueryNVerifyResponseViews(GSHEET_DATA.length);
+      dataSources.runQueryAndVerifyResponseViews({ count: GSHEET_DATA.length });
       dataSources.AssertQueryTableResponse(
         1,
         "ホーンビー ゲージ ウェスタン エクスプレス デジタル トレイン セット (eLink および TTS ロコ トレイン セット付き)",
@@ -179,7 +179,7 @@ describe.skip(
         dataSources._nestedWhereClauseValue(0),
       );
       dataSources.RunQuery();
-      dataSources.RunQueryNVerifyResponseViews(8);
+      dataSources.runQueryAndVerifyResponseViews({ count: 8 });
       dataSources.AssertQueryTableResponse(
         0,
         "87bbb472ef9d90dcef140a551665c929",
@@ -196,7 +196,7 @@ describe.skip(
         inputFieldName: "Cell range",
       });
       dataSources.RunQuery();
-      dataSources.RunQueryNVerifyResponseViews(4);
+      dataSources.runQueryAndVerifyResponseViews({ count: 4 });
       dataSources.AssertQueryTableResponse(
         0,
         "eac7efa5dbd3d667f26eb3d3ab504464",
@@ -242,7 +242,7 @@ describe.skip(
         0,
         true,
       );
-      dataSources.RunQueryNVerifyResponseViews(10);
+      dataSources.runQueryAndVerifyResponseViews({ count: 10 });
       dataSources.AssertQueryTableResponse(
         0,
         "eac7efa5dbd3d667f26eb3d3ab504464",
@@ -275,7 +275,7 @@ describe.skip(
         true,
       ); // Converting the field to dropdown
       dataSources.ValidateNSelectDropdown("Sheet name", "", "Sheet1");
-      dataSources.RunQueryNVerifyResponseViews(10);
+      dataSources.runQueryAndVerifyResponseViews({ count: 10 });
       dataSources.AssertQueryTableResponse(
         0,
         "eac7efa5dbd3d667f26eb3d3ab504464",

app/client/cypress/e2e/GSheet/ReadOnly_Access_Spec.ts

@@ -136,15 +136,15 @@ describe.skip(
         dataSourceName.readOnly,
         spreadSheetName,
       );
-      dataSources.RunQueryNVerifyResponseViews(GSHEET_DATA.length);
+      dataSources.runQueryAndVerifyResponseViews({ count: GSHEET_DATA.length });
       dataSources.AssertQueryTableResponse(0, GSHEET_DATA[0].uniq_id);
       dataSources.AssertQueryTableResponse(1, "ホーンビィ 2014 カタログ"); // Asserting other language
       dataSources.AssertQueryTableResponse(2, "₹, $, €, ¥, £"); // Asserting different symbols
       dataSources.AssertQueryTableResponse(3, "!@#$%^&*"); // Asserting special chars
       // Update query to fetch only 1 column and verify
       gsheetHelper.SelectMultiDropDownValue("Columns", "product_name");
       dataSources.RunQuery();
-      dataSources.RunQueryNVerifyResponseViews(GSHEET_DATA.length);
+      dataSources.runQueryAndVerifyResponseViews({ count: GSHEET_DATA.length });
       dataSources.AssertQueryTableResponse(0, GSHEET_DATA[0].product_name);
       //Remove column filter and add Sort By Ascending and verify
       gsheetHelper.SelectMultiDropDownValue("Columns", "product_name"); //unselect the Columns dd value
@@ -153,7 +153,7 @@ describe.skip(
         directInput: false,
         inputFieldName: "Sort By",
       });
-      dataSources.RunQueryNVerifyResponseViews(GSHEET_DATA.length);
+      dataSources.runQueryAndVerifyResponseViews({ count: GSHEET_DATA.length });
       dataSources.AssertQueryTableResponse(
         0,
         "5afbaf65680c9f378af5b3a3ae22427e",
@@ -168,7 +168,7 @@ describe.skip(
       dataSources.ClearSortByOption(); //clearing previous sort option
       dataSources.EnterSortByValues("price", "Descending");
       dataSources.RunQuery();
-      dataSources.RunQueryNVerifyResponseViews(GSHEET_DATA.length);
+      dataSources.runQueryAndVerifyResponseViews({ count: GSHEET_DATA.length });
       dataSources.AssertQueryTableResponse(
         1,
         "ホーンビー ゲージ ウェスタン エクスプレス デジタル トレイン セット (eLink および TTS ロコ トレイン セット付き)",
@@ -187,7 +187,7 @@ describe.skip(
         dataSources._nestedWhereClauseValue(0),
       );
       dataSources.RunQuery();
-      dataSources.RunQueryNVerifyResponseViews(8);
+      dataSources.runQueryAndVerifyResponseViews({ count: 8 });
       dataSources.AssertQueryTableResponse(
         0,
         "87bbb472ef9d90dcef140a551665c929",
@@ -204,7 +204,7 @@ describe.skip(
         inputFieldName: "Cell range",
       });
       dataSources.RunQuery();
-      dataSources.RunQueryNVerifyResponseViews(4);
+      dataSources.runQueryAndVerifyResponseViews({ count: 4 });
       dataSources.AssertQueryTableResponse(
         0,
         "eac7efa5dbd3d667f26eb3d3ab504464",
@@ -224,7 +224,7 @@ describe.skip(
         0,
         true,
       );
-      dataSources.RunQueryNVerifyResponseViews(10);
+      dataSources.runQueryAndVerifyResponseViews({ count: 10 });
       dataSources.AssertQueryTableResponse(
         0,
         "eac7efa5dbd3d667f26eb3d3ab504464",
@@ -257,7 +257,7 @@ describe.skip(
         true,
       ); // Converting the field to dropdown
       dataSources.ValidateNSelectDropdown("Sheet name", "", "Sheet1");
-      dataSources.RunQueryNVerifyResponseViews(10);
+      dataSources.runQueryAndVerifyResponseViews({ count: 10 });
       dataSources.AssertQueryTableResponse(
         0,
         "eac7efa5dbd3d667f26eb3d3ab504464",

app/client/cypress/e2e/GSheet/SelectedSheet_Access_Spec.ts

@@ -114,7 +114,7 @@ describe(
         dataSourceName,
         spreadSheetName,
       );
-      dataSources.RunQueryNVerifyResponseViews(GSHEET_DATA.length);
+      dataSources.runQueryAndVerifyResponseViews({ count: GSHEET_DATA.length });
       dataSources.AssertQueryTableResponse(0, GSHEET_DATA[0].uniq_id);
       dataSources.AssertQueryTableResponse(1, "ホーンビィ 2014 カタログ"); // Asserting other language
       dataSources.AssertQueryTableResponse(2, "₹, $, €, ¥, £"); // Asserting different symbols
@@ -123,7 +123,7 @@ describe(
       // Update query to fetch only 1 column and verify
       gsheetHelper.SelectMultiDropDownValue("Columns", "product_name");
       dataSources.RunQuery();
-      dataSources.RunQueryNVerifyResponseViews(GSHEET_DATA.length);
+      dataSources.runQueryAndVerifyResponseViews({ count: GSHEET_DATA.length });
       dataSources.AssertQueryTableResponse(0, GSHEET_DATA[0].product_name);
 
       //Remove column filter and add Sort By Ascending and verify
@@ -133,7 +133,7 @@ describe(
         directInput: false,
         inputFieldName: "Sort By",
       });
-      dataSources.RunQueryNVerifyResponseViews(GSHEET_DATA.length);
+      dataSources.runQueryAndVerifyResponseViews({ count: GSHEET_DATA.length });
       dataSources.AssertQueryTableResponse(
         0,
         "5afbaf65680c9f378af5b3a3ae22427e",
@@ -149,7 +149,7 @@ describe(
       dataSources.ClearSortByOption(); //clearing previous sort option
       dataSources.EnterSortByValues("price", "Descending");
       dataSources.RunQuery();
-      dataSources.RunQueryNVerifyResponseViews(GSHEET_DATA.length);
+      dataSources.runQueryAndVerifyResponseViews({ count: GSHEET_DATA.length });
       dataSources.AssertQueryTableResponse(
         1,
         "ホーンビー ゲージ ウェスタン エクスプレス デジタル トレイン セット (eLink および TTS ロコ トレイン セット付き)",
@@ -169,7 +169,7 @@ describe(
         dataSources._nestedWhereClauseValue(0),
       );
       dataSources.RunQuery();
-      dataSources.RunQueryNVerifyResponseViews(8);
+      dataSources.runQueryAndVerifyResponseViews({ count: 8 });
       dataSources.AssertQueryTableResponse(
         0,
         "87bbb472ef9d90dcef140a551665c929",
@@ -187,7 +187,7 @@ describe(
         inputFieldName: "Cell range",
       });
       dataSources.RunQuery();
-      dataSources.RunQueryNVerifyResponseViews(4);
+      dataSources.runQueryAndVerifyResponseViews({ count: 4 });
       dataSources.AssertQueryTableResponse(
         0,
         "eac7efa5dbd3d667f26eb3d3ab504464",
@@ -237,7 +237,7 @@ describe(
         0,
         true,
       );
-      dataSources.RunQueryNVerifyResponseViews(10);
+      dataSources.runQueryAndVerifyResponseViews({ count: 10 });
       dataSources.AssertQueryTableResponse(
         0,
         "eac7efa5dbd3d667f26eb3d3ab504464",
@@ -272,7 +272,7 @@ describe(
         true,
       ); // Converting the field to dropdown
       dataSources.ValidateNSelectDropdown("Sheet name", "", "Sheet1");
-      dataSources.RunQueryNVerifyResponseViews(10);
+      dataSources.runQueryAndVerifyResponseViews({ count: 10 });
       dataSources.AssertQueryTableResponse(
         0,
         "eac7efa5dbd3d667f26eb3d3ab504464",

app/client/cypress/e2e/GSheet/WidgetBinding_AllAccess_Spec.ts

@@ -57,7 +57,7 @@ describe.skip(
         dataSourceName,
         spreadSheetName,
       );
-      dataSources.RunQueryNVerifyResponseViews(10);
+      dataSources.runQueryAndVerifyResponseViews({ count: 10 });
 
       // Adding suggested widgets and verify
       dataSources.AddSuggestedWidget(Widgets.Table);

app/client/cypress/e2e/GSheet/WidgetBinding_SelectedAccess_Spec.ts

@@ -57,7 +57,7 @@ describe(
         dataSourceName,
         spreadSheetName,
       );
-      dataSources.RunQueryNVerifyResponseViews(10);
+      dataSources.runQueryAndVerifyResponseViews({ count: 10 });
 
       // Adding suggested widgets and verify
       dataSources.AddSuggestedWidget(Widgets.Table);

app/client/cypress/e2e/Regression/ClientSide/Binding/API_with_List_Widget_spec.js

@@ -12,6 +12,8 @@ import EditorNavigation, {
   EntityType,
 } from "../../../../support/Pages/EditorNavigation";
 
+import BottomTabs from "../../../../support/Pages/IDE/BottomTabs";
+
 describe(
   "Test Create Api and Bind to List widget",
   { tags: ["@tag.Binding"] },
@@ -24,7 +26,7 @@ describe(
     it("1. Test_Add users api and execute api", function () {
       apiPage.CreateAndFillApi(this.dataSet.userApi + "/mock-api?records=10");
       cy.RunAPI();
-      cy.get(apiLocators.jsonResponseTab).click();
+      BottomTabs.response.selectResponseResponseTypeFromMenu("JSON");
       cy.get(apiLocators.responseBody)
         .contains("name")
         .siblings("span")

app/client/cypress/e2e/Regression/ClientSide/Binding/Button_with_API_spec.js

@@ -6,6 +6,7 @@ const apiwidget = require("../../../../locators/apiWidgetslocator.json");
 const testdata = require("../../../../fixtures/testdata.json");
 import apiLocators from "../../../../locators/ApiEditor";
 import * as _ from "../../../../support/Objects/ObjectsCore";
+import BottomTabs from "../../../../support/Pages/IDE/BottomTabs";
 
 describe(
   "Bind a button and Api usecase",
@@ -28,7 +29,7 @@ describe(
         .click({ force: true })
         .type("{{Button1.text", { parseSpecialCharSequences: true });
       cy.RunAPI();
-      cy.get(apiLocators.jsonResponseTab).click();
+      BottomTabs.response.selectResponseResponseTypeFromMenu("JSON");
       cy.get(apiLocators.responseBody)
         .contains("name")
         .siblings("span")

app/client/cypress/e2e/Regression/ClientSide/Binding/JSObjectToListWidget_Spec.ts

@@ -19,7 +19,7 @@ describe(
         _.dataManager.dsValues[_.dataManager.defaultEnviorment].mockApiUrl,
       );
       _.apiPage.RunAPI();
-      BottomTabs.response.switchResponseType("JSON");
+      BottomTabs.response.selectResponseResponseTypeFromMenu("JSON");
       _.apiPage.ReadApiResponsebyKey("name");
       cy.get("@apiResp").then((value) => {
         valueToTest = value;

app/client/cypress/e2e/Regression/ClientSide/Binding/TableV2_Api_spec.js

@@ -9,6 +9,7 @@ import {
   agHelper,
   deployMode,
 } from "../../../../support/Objects/ObjectsCore";
+import BottomTabs from "../../../../support/Pages/IDE/BottomTabs";
 
 describe(
   "Test Create Api and Bind to Table widget V2",
@@ -21,7 +22,7 @@ describe(
     it("1. Test_Add users api and execute api", function () {
       cy.createAndFillApi(this.dataSet.userApi, "/mock-api?records=100");
       cy.RunAPI();
-      cy.get(apiPage.jsonResponseTab).click();
+      BottomTabs.response.selectResponseResponseTypeFromMenu("JSON");
       cy.get(apiPage.responseBody)
         .contains("name")
         .siblings("span")