Merge pull request #679 from ashera96/api-chat-new

Improve execution result view
wso2 · Apr 3, 2024 · 0e8bb88 · 0e8bb88
2 parents d27fa7b + 2eb34a7
commit 0e8bb88
Show file tree

Hide file tree

Showing 4 changed files with 140 additions and 20 deletions.
diff --git a/portals/devportal/src/main/webapp/package-lock.json b/portals/devportal/src/main/webapp/package-lock.json
diff --git a/portals/devportal/src/main/webapp/package.json b/portals/devportal/src/main/webapp/package.json
@@ -81,6 +81,7 @@
         "react-intl": "^6.6.2",
         "react-loadable": "^5.5.0",
         "react-markdown": "^8.0.5",
+        "react-monaco-editor": "^0.55.0",
         "react-resizable": "^3.0.5",
         "react-router": "^5.3.4",
         "react-router-dom": "^5.3.4",
@@ -91,7 +92,8 @@
         "subscriptions-transport-ws": "^0.11.0",
         "swagger-client": "^3.18.5",
         "swagger-ui-react": "^5.6.2",
-        "swagger2-postman2-converter": "0.0.3"
+        "swagger2-postman2-converter": "0.0.3",
+        "xml-formatter": "^3.6.2"
     },
     "devDependencies": {
         "@babel/core": "^7.22.15",

diff --git a/portals/devportal/src/main/webapp/source/src/app/components/Apis/Details/ApiChat/ApiChat.jsx b/portals/devportal/src/main/webapp/source/src/app/components/Apis/Details/ApiChat/ApiChat.jsx
@@ -483,11 +483,12 @@ const ApiChat = () => {
             }
 
             // If response is neither JSON nor XML
+            const text = await response.text().catch(() => 'Unable to render this Content-Type');
             return {
                 code: response.status,
                 path: fullPath,
                 headers: response.headers,
-                body: 'Unsupported Content-Type detected',
+                body: text,
             };
         } catch (error) {
             return {

diff --git a/...main/webapp/source/src/app/components/Apis/Details/ApiChat/components/ApiChatResponse.tsx b/...main/webapp/source/src/app/components/Apis/Details/ApiChat/components/ApiChatResponse.tsx
@@ -32,6 +32,8 @@ import Paper from '@mui/material/Paper';
 import Box from '@mui/material/Box';
 import { styled, alpha } from '@mui/material/styles';
 import { CircularProgress, Typography } from '@mui/material';
+import MonacoEditor from 'react-monaco-editor';
+import xmlFormat from 'xml-formatter';
 import Utils from 'AppData/Utils';
 import CustomIcon from 'AppComponents/Shared/CustomIcon';
 
@@ -156,6 +158,54 @@ const ApiChatResponse: React.FC<ApiChatResponseProps> = ({
         }
     }, []);
 
+    /**
+     * Renders the execution result body.
+     *
+     * @param {any} executionResult Execution result to render.
+     * @returns {JSX.Element} Execution result body to render.
+     */
+    const renderExecutionResultBody = (executionResult: any) => {
+        const contentType = executionResult.headers.get('Content-Type');
+        if (contentType.includes('application/json') && executionResult.body !== '') {
+            return (
+                <MonacoEditor
+                    width='100%'
+                    height='200'
+                    language='json'
+                    value={JSON.stringify(executionResult.body, null, 2)}
+                    options={{
+                        readOnly: true,
+                        minimap: { enabled: false },
+                        scrollBeyondLastLine: false,
+                        wordWrap: 'on',
+                    }}
+                />
+            );
+        } else if (contentType.includes('application/xml') && executionResult.body !== '') {
+            const formattedMessage = xmlFormat(executionResult.body);
+            return (
+                <MonacoEditor
+                    width='100%'
+                    height='200'
+                    language='xml'
+                    value={formattedMessage}
+                    options={{
+                        readOnly: true,
+                        minimap: { enabled: false },
+                        scrollBeyondLastLine: false,
+                        wordWrap: 'on',
+                    }}
+                />
+            );
+        } else {
+            return (
+                <Typography variant='body1'>
+                    {executionResult.body}
+                </Typography>
+            );
+        }
+    };
+
     return (
         <Root>
             <Box maxHeight='60%' overflow='auto' className={classes.lastQueryWrap}>
@@ -220,7 +270,7 @@ const ApiChatResponse: React.FC<ApiChatResponseProps> = ({
                                         </AccordionSummary>
                                         <AccordionDetails>
                                             <Typography variant='body1'>
-                                                {JSON.stringify(executionResult.body, null, 2)}
+                                                {renderExecutionResultBody(executionResult)}
                                             </Typography>
                                         </AccordionDetails>
                                     </Accordion>