From a4d22b3d1360097508ce00e151b837ef43044360 Mon Sep 17 00:00:00 2001
From: Ayangade Adeoluwa <37867493+Irongade@users.noreply.github.com>
Date: Thu, 14 Apr 2022 08:23:07 +0100
Subject: [PATCH] Handle stringified json response and fix alignment issue
 (#12886)

---
 .../editorComponents/ApiResponseView.tsx           | 14 ++++++--------
 .../src/pages/Editor/APIEditor/ApiRightPane.tsx    |  4 +++-
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/app/client/src/components/editorComponents/ApiResponseView.tsx b/app/client/src/components/editorComponents/ApiResponseView.tsx
index 7d5345c979..364f840aa2 100644
--- a/app/client/src/components/editorComponents/ApiResponseView.tsx
+++ b/app/client/src/components/editorComponents/ApiResponseView.tsx
@@ -240,7 +240,7 @@ export const responseTabComponent = (
         folding
         height={"100%"}
         input={{
-          value: output ? JSON.stringify(output, null, 2) : "",
+          value: isString(output) ? output : JSON.stringify(output, null, 2),
         }}
         isReadOnly
       />
@@ -253,7 +253,7 @@ export const responseTabComponent = (
         folding
         height={"100%"}
         input={{
-          value: output ? JSON.stringify(output, null, 2) : "",
+          value: isString(output) ? output : JSON.stringify(output, null, 2),
         }}
         isRawView
         isReadOnly
@@ -390,7 +390,7 @@ function ApiResponseView(props: Props) {
               </NoResponseContainer>
             ) : (
               <ResponseBodyContainer>
-                {isString(response.body) && isHtml(response.body) && (
+                {isString(response.body) && isHtml(response.body) ? (
                   <ReadOnlyEditor
                     folding
                     height={"100%"}
@@ -399,11 +399,9 @@ function ApiResponseView(props: Props) {
                     }}
                     isReadOnly
                   />
-                )}
-                {!isString(response.body) &&
-                responseTabs &&
-                responseTabs.length > 0 &&
-                selectedTabIndex !== -1 ? (
+                ) : responseTabs &&
+                  responseTabs.length > 0 &&
+                  selectedTabIndex !== -1 ? (
                   <EntityBottomTabs
                     defaultIndex={selectedTabIndex}
                     onSelect={onResponseTabSelect}
diff --git a/app/client/src/pages/Editor/APIEditor/ApiRightPane.tsx b/app/client/src/pages/Editor/APIEditor/ApiRightPane.tsx
index 659813a590..59461a8a82 100644
--- a/app/client/src/pages/Editor/APIEditor/ApiRightPane.tsx
+++ b/app/client/src/pages/Editor/APIEditor/ApiRightPane.tsx
@@ -30,10 +30,12 @@ const EmptyDatasourceContainer = styled.div`
 `;
 
 const DatasourceContainer = styled.div`
-  .react-tabs__tab-list {
+  &&&&&&&&&&& .react-tabs__tab-list {
     padding: 0 16px !important;
     border-bottom: none;
     border-left: 2px solid #e8e8e8;
+    margin-left: 0px;
+    margin-right: 0px;
     .cs-icon {
       margin-right: 0;
     }