Check response type if html to show html example of using dd() function (#383)

Author: rawahamid

ui/src/components/ApiAction.tsx

@@ -1,16 +1,18 @@
-import React, { useEffect, useState } from 'react';
+// noinspection t
+
+import React, {useEffect, useState} from 'react';
 
 import useLocalStorage from 'react-use-localstorage';
-import {makeCurlCommand } from '../libs/strings'
-import type {IAPIInfo, LRDResponse, IConfig} from '../libs/types'
+import {makeCurlCommand} from '../libs/strings'
+import type {IAPIInfo, IConfig, LRDResponse} from '../libs/types'
 import ApiActionResponse from './elements/ApiActionResponse'
 import ApiActionRequest from './elements/ApiActionRequest'
 import ApiActionTabs from './elements/ApiActionTabs'
 import ApiActionInfo from './elements/ApiActionInfo'
 import ApiActionSQL from './elements/ApiActionSQL'
 import ApiActionLog from './elements/ApiActionLog'
 import ApiActionEvents from './elements/ApiActionEvents'
-import { objectToFormData } from '../libs/object';
+import {objectToFormData} from '../libs/object';
 
 interface Props {
     lrdDocsItem: IAPIInfo,

ui/src/components/elements/ApiActionResponse.tsx

@@ -1,15 +1,15 @@
-import React, { useEffect } from 'react';
+// noinspection t
+
+import React, {useEffect, useState} from 'react';
 import "ace-builds";
 import jsonWorkerUrl from 'ace-builds/src-min-noconflict/worker-json?url';
-
-ace.config.setModuleUrl('ace/mode/json_worker', jsonWorkerUrl);
-
 import AceEditor from 'react-ace';
 import "ace-builds/src-noconflict/mode-json";
 import "ace-builds/src-noconflict/theme-one_dark";
 import "ace-builds/src-noconflict/ext-language_tools";
 import useLocalStorage from 'react-use-localstorage';
 
+ace.config.setModuleUrl('ace/mode/json_worker', jsonWorkerUrl);
 
 interface Props {
     responseData: string,
@@ -25,7 +25,12 @@ export default function ApiActionResponse(props: Props) {
     const { responseHeaders, responseData, timeTaken, responseStatus, serverMemory, requestUri, method } = props
     const [savePreviousResponse] = useLocalStorage('savePreviousResponse', 'false');
     const [previousResponse, setPreviousResponse] = useLocalStorage('previousResponse' + requestUri + method, '');
+    const [isHtml, setIsHtml] = useState(false);
     useEffect(() => {
+        if (JSON.parse(responseHeaders)['content-type'].split(';')[0] === 'text/html') {
+            setIsHtml(true)
+        }
+
         if (responseData && savePreviousResponse === 'true') {
             setPreviousResponse(responseData)
         }
@@ -36,7 +41,7 @@ export default function ApiActionResponse(props: Props) {
             {responseHeaders && (
                 <>
                     <div className="collapse collapse-arrow">
-                        <input type="checkbox" />
+                        <input type="checkbox"/>
                         <div className="collapse-title text-sm text-slate-500 pl-0">
                             Show Response Headers
                         </div>
@@ -49,14 +54,18 @@ export default function ApiActionResponse(props: Props) {
                                 wrapEnabled={true}
                                 value={responseHeaders}
                                 theme="one_dark"
-                                onLoad={function (editor) { editor.renderer.setPadding(0); editor.renderer.setScrollMargin(5, 5, 5, 5); editor.renderer.setShowPrintMargin(false); }}
+                                onLoad={function (editor) {
+                                    editor.renderer.setPadding(0);
+                                    editor.renderer.setScrollMargin(5, 5, 5, 5);
+                                    editor.renderer.setShowPrintMargin(false);
+                                }}
                                 editorProps={{
                                     $blockScrolling: true
                                 }}
                             />
                         </div>
                     </div>
-                    <br />
+                    <br/>
                 </>
             )}
             {(!responseData && !previousResponse) && (
@@ -67,41 +76,55 @@ export default function ApiActionResponse(props: Props) {
             {(!responseData && previousResponse) && (
                 <div className="mockup-code mb-5">
                     <span className='pl-5 text-sm text-warning'>Previous Response</span>
-                    <AceEditor
-                        maxLines={50}
-                        width='100%'
-                        mode="json"
-                        wrapEnabled={true}
-                        readOnly={true}
-                        value={previousResponse}
-                        theme="one_dark"
-                        onLoad={function (editor) { editor.renderer.setPadding(0); editor.renderer.setScrollMargin(5, 5, 5, 5); editor.renderer.setShowPrintMargin(false); }}
-                        editorProps={{
-                            $blockScrolling: true
-                        }}
-                    />
+                    {! isHtml ? (
+                        <AceEditor
+                            maxLines={50}
+                            width='100%'
+                            mode="json"
+                            wrapEnabled={true}
+                            readOnly={true}
+                            value={previousResponse}
+                            theme="one_dark"
+                            onLoad={function (editor) {
+                                editor.renderer.setPadding(0);
+                                editor.renderer.setScrollMargin(5, 5, 5, 5);
+                                editor.renderer.setShowPrintMargin(false);
+                            }}
+                            editorProps={{
+                                $blockScrolling: true
+                            }}
+                        />
+                    ) : (<div dangerouslySetInnerHTML={{__html: responseData}} />)}
                 </div>
             )}
             {responseData && (
                 <div className="mockup-code">
                     <span className='pl-5 text-sm text-slate-500'>RESPONSE</span>
-                    <br />
-                    <span className='pl-5 text-sm'>Time taken: <b>{timeTaken}ms</b>, Status Code: <b>{responseStatus}</b>, Server memory: <b>{serverMemory}</b></span>
-                    <AceEditor
-                        maxLines={50}
-                        width='100%'
-                        mode="json"
-                        wrapEnabled={true}
-                        readOnly={true}
-                        value={responseData}
-                        theme="one_dark"
-                        onLoad={function (editor) { editor.renderer.setPadding(0); editor.renderer.setScrollMargin(5, 5, 5, 5); editor.renderer.setShowPrintMargin(false); }}
-                        editorProps={{
-                            $blockScrolling: true
-                        }}
-                    />
-                </div>
-            )}
-        </>
+                    <br/>
+                    <span
+                        className='pl-5 text-sm'>Time taken: <b>{timeTaken}ms</b>, Status Code: <b>{responseStatus}</b>, Server memory: <b>{serverMemory}</b></span>
+                    {! isHtml ? (
+                        <AceEditor
+                            maxLines={50}
+                            width='100%'
+                            mode="json"
+                            wrapEnabled={true}
+                            readOnly={true}
+                            value={responseData}
+                            theme="one_dark"
+                            onLoad={function (editor) {
+                                editor.renderer.setPadding(0);
+                                editor.renderer.setScrollMargin(5, 5, 5, 5);
+                                editor.renderer.setShowPrintMargin(false);
+                            }}
+                            editorProps={{
+                                $blockScrolling: true
+                            }}
+                        />
+                    ) : (<div dangerouslySetInnerHTML={{__html: responseData}} />)}
+        </div>
     )
 }
+</>
+)
+}