From 2139382928b4e218296b1ed9811a128eb3eb00ce Mon Sep 17 00:00:00 2001
From: sneha122 <sneha@appsmith.com>
Date: Wed, 19 Oct 2022 11:30:04 +0530
Subject: [PATCH] fix: table does not show data issue fixed (#17459)

---
 .../ApiTests/API_Response_View_spec.js        | 30 +++++++++++++++++++
 .../editorComponents/ApiResponseView.tsx      | 20 ++++++++++---
 2 files changed, 46 insertions(+), 4 deletions(-)
 create mode 100644 app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/ApiTests/API_Response_View_spec.js

diff --git a/app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/ApiTests/API_Response_View_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/ApiTests/API_Response_View_spec.js
new file mode 100644
index 0000000000..957330d287
--- /dev/null
+++ b/app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/ApiTests/API_Response_View_spec.js
@@ -0,0 +1,30 @@
+const testdata = require("../../../../fixtures/testdata.json");
+import { ObjectsRegistry } from "../../../../support/Objects/Registry";
+import apiEditor from "../../../../locators/ApiEditor";
+const testUrl1 = "http://localhost:5001/v1/dynamicrecords/getstudents";
+const agHelper = ObjectsRegistry.AggregateHelper,
+  apiPage = ObjectsRegistry.ApiPage;
+
+describe("Bug 14666: Api Response Test Functionality ", function() {
+  it("Test table loading when data is in array format", function() {
+    cy.log("Login Successful");
+    cy.NavigateToAPI_Panel();
+    cy.log("Navigation to API Panel screen successful");
+    apiPage.CreateAndFillApi(testUrl1, "TableTestAPI");
+    agHelper.AssertAutoSave();
+    apiPage.RunAPI();
+    cy.get(apiEditor.tableResponseTab).should('exist');
+    cy.DeleteAPI();
+  });
+
+  it("Test table loading when data is not in array format", function() {
+    cy.log("Login Successful");
+    cy.NavigateToAPI_Panel();
+    cy.log("Navigation to API Panel screen successful");
+    apiPage.CreateAndFillApi(testdata.baseUrl + testdata.methods, "TableTestAPI");
+    agHelper.AssertAutoSave();
+    apiPage.RunAPI();
+    cy.get(apiEditor.tableResponseTab).should('not.exist');
+    cy.DeleteAPI();
+  });
+});
diff --git a/app/client/src/components/editorComponents/ApiResponseView.tsx b/app/client/src/components/editorComponents/ApiResponseView.tsx
index af2a812449..3b6eaa754b 100644
--- a/app/client/src/components/editorComponents/ApiResponseView.tsx
+++ b/app/client/src/components/editorComponents/ApiResponseView.tsx
@@ -369,9 +369,21 @@ function ApiResponseView(props: Props) {
     });
   };
 
+  let filteredResponseDataTypes: { key: string; title: string }[] = [
+    ...responseDataTypes,
+  ];
+  if (!!response.body && !isArray(response.body)) {
+    filteredResponseDataTypes = responseDataTypes.filter(
+      (item) => item.key !== API_RESPONSE_TYPE_OPTIONS.TABLE,
+    );
+    if (responseDisplayFormat.title === API_RESPONSE_TYPE_OPTIONS.TABLE) {
+      onResponseTabSelect(filteredResponseDataTypes[0]?.title);
+    }
+  }
+
   const selectedTabIndex =
-    responseDataTypes &&
-    responseDataTypes.findIndex(
+    filteredResponseDataTypes &&
+    filteredResponseDataTypes.findIndex(
       (dataType) => dataType.title === responseDisplayFormat?.title,
     );
 
@@ -386,8 +398,8 @@ function ApiResponseView(props: Props) {
   }, []);
 
   const responseTabs =
-    responseDataTypes &&
-    responseDataTypes.map((dataType, index) => {
+    filteredResponseDataTypes &&
+    filteredResponseDataTypes.map((dataType, index) => {
       return {
         index: index,
         key: dataType.key,