Merge pull request #650 from akto-api-security/fix/show_url_in_editor

Showing urls in editor of new ui and sample data bug fix
akto-api-security · Oct 12, 2023 · 29692aa · 29692aa
2 parents fd1309d + 0c016d0
commit 29692aa
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 11 deletions.
diff --git a/apps/dashboard/web/polaris_web/web/src/apps/dashboard/components/shared/customDiffEditor.js b/apps/dashboard/web/polaris_web/web/src/apps/dashboard/components/shared/customDiffEditor.js
@@ -77,7 +77,7 @@ const transform = {
             if(!isNaN(key)){
                 ret.push(parsedJson[key])
             }else{
-                ret.push({key: parsedJson[key]})
+                ret.push({[key]: parsedJson[key]})
             }
         })
         return JSON.stringify(ret, null, 2)

diff --git a/apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/test_editor/TestEditor.css b/apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/test_editor/TestEditor.css
@@ -58,4 +58,12 @@
 
 .editor-header .Polaris-Text--root{
     max-width: 30vw;
+}
+
+.req-resp-tabs .Polaris-LegacyTabs__Title{
+    padding: 8px 0 !important;
+} 
+
+.req-resp-tabs .Polaris-Box{
+    border: none !important;
 }
diff --git a/...shboard/web/polaris_web/web/src/apps/dashboard/pages/test_editor/components/SampleApi.jsx b/...shboard/web/polaris_web/web/src/apps/dashboard/pages/test_editor/components/SampleApi.jsx
@@ -1,6 +1,5 @@
-import { Box, Button, Divider, Frame, HorizontalStack, LegacyTabs, Modal, VerticalStack} from "@shopify/polaris"
-import { tokens } from "@shopify/polaris-tokens"
-import { UpdateInventoryMajor, ChevronUpMinor } from "@shopify/polaris-icons"
+import { Box, Button, Divider, Frame, HorizontalStack, LegacyTabs, Modal, Text, Tooltip} from "@shopify/polaris"
+import {ChevronUpMinor } from "@shopify/polaris-icons"
 
 import { useEffect, useRef, useState } from "react";
 
@@ -122,12 +121,12 @@ const SampleApi = () => {
 
     const handleTabChange = (selectedTabIndex) => {
         setSelected(selectedTabIndex)
-
         if (sampleData) {
+
             if (selectedTabIndex == 0) {
-                editorInstance.setValue(JSON.stringify(sampleData.requestJson["json"], null, 2))
+                editorInstance.setValue('\n' + sampleData?.requestJson["firstLine"] + '\n\n' + JSON.stringify(sampleData.requestJson["json"], null, 2))
             } else {
-                editorInstance.setValue(JSON.stringify(sampleData.responseJson["json"], null, 2))
+                editorInstance.setValue('\n' + sampleData?.responseJson["firstLine"] + '\n\n' + JSON.stringify(sampleData.responseJson["json"], null, 2))
             }
         }
     }
@@ -167,7 +166,7 @@ const SampleApi = () => {
                 setSampleData({ requestJson, responseJson })
 
                 if (editorInstance) {
-                    editorInstance.setValue(JSON.stringify(requestJson["json"], null, 2))
+                    editorInstance.setValue('\n' + requestJson["firstLine"] + '\n\n' + JSON.stringify(requestJson["json"], null, 2))
                 }
                 setTimeout(()=> {
                     setSampleDataList(sampleDataResponse.sampleDataList)
@@ -254,9 +253,19 @@ const SampleApi = () => {
     return (
         <div>
             <div className="editor-header">
-                <LegacyTabs tabs={tabs} selected={selected} onSelect={handleTabChange} fitted />
-                <Button id={"select-sample-api"} onClick={toggleSelectApiActive} size="slim">Select Sample API</Button>
-                <Button id={"run-test"} loading={loading} primary onClick={runTest} size="slim">Run Test</Button>
+                <div className="req-resp-tabs">
+                    <LegacyTabs tabs={tabs} selected={selected} onSelect={handleTabChange} fitted />
+                </div>
+                <HorizontalStack gap={2}>
+                    <Button id={"select-sample-api"} onClick={toggleSelectApiActive} size="slim">
+                        <Box maxWidth="200px">
+                            <Tooltip content={copySelectedApiEndpoint} hoverDelay={"100"}>
+                                <Text variant="bodyMd" truncate>{copySelectedApiEndpoint}</Text>
+                            </Tooltip>
+                        </Box>
+                    </Button>
+                    <Button id={"run-test"} loading={loading} primary onClick={runTest} size="slim">Run Test</Button>
+                </HorizontalStack>
             </div>
 
             <Divider />