fix: properly render html responses (#11853)

* properly render html responses

* My empty commit with a message

* My empty commit with a message

* Remove package, use custom function

Co-authored-by: Adeoluwa Ayangade <adeoluwaayangade@Adeoluwas-MacBook-Pro.local>

app/client/src/components/editorComponents/ApiResponseView.tsx

@@ -10,7 +10,7 @@ import LoadingOverlayScreen from "components/editorComponents/LoadingOverlayScre
 import ReadOnlyEditor from "components/editorComponents/ReadOnlyEditor";
 import { getActionResponses } from "selectors/entitiesSelector";
 import { Colors } from "constants/Colors";
-import _ from "lodash";
+import _, { isString } from "lodash";
 import {
   CHECK_REQUEST_BODY,
   createMessage,
@@ -36,6 +36,7 @@ import Button, { Size } from "components/ads/Button";
 import EntityBottomTabs from "./EntityBottomTabs";
 import { DEBUGGER_TAB_KEYS } from "./Debugger/helpers";
 import { setCurrentTab } from "actions/debuggerActions";
+import { isHtml } from "./utils";
 
 type TextStyleProps = {
   accent: "primary" | "secondary" | "error";
@@ -240,6 +241,7 @@ function ApiResponseView(props: Props) {
 
   const messages = response?.messages;
   let responseHeaders;
+  let responseBody;
 
   // if no headers are present in the response, use the default body text.
   if (response.headers) {
@@ -248,6 +250,15 @@ function ApiResponseView(props: Props) {
     responseHeaders = {}; // if the response headers is empty show an empty object.
   }
 
+  if (response.body) {
+    // if the response is already a string and is of type html, do not stringify further but simply return the response string.
+    if (isString(response.body) && isHtml(response.body)) {
+      responseBody = response.body || "";
+    } else {
+      responseBody = JSON.stringify(response.body, null, 2);
+    }
+  }
+
   const tabs = [
     {
       key: "body",
@@ -298,9 +309,7 @@ function ApiResponseView(props: Props) {
                 folding
                 height={"100%"}
                 input={{
-                  value: response.body
+                  value: response.body ? (responseBody as string) : "",
-                    ? JSON.stringify(response.body, null, 2)
-                    : "",
                 }}
               />
             )}

app/client/src/components/editorComponents/utils.ts

@@ -0,0 +1,11 @@
+export const isHtml = (str: string) => {
+  const fragment = document.createRange().createContextualFragment(str);
+
+  // remove all non text nodes from fragment
+  fragment
+    .querySelectorAll("*")
+    .forEach((el: any) => el.parentNode.removeChild(el));
+
+  // if there is textContent, then its not a pure HTML
+  return !(fragment.textContent || "").trim();
+};