Merge pull request #1005 from akto-api-security/fix/fix_editor_dashbo…

…ard_ux fixing test editor experience
akto-api-security · Apr 13, 2024 · e66f1f3 · e66f1f3
2 parents 6efbeb0 + 07418cd
commit e66f1f3
Show file tree

Hide file tree

Showing 8 changed files with 19 additions and 22 deletions.
diff --git a/apps/dashboard/web/polaris_web/web/src/apps/dashboard/components/shared/style.css b/apps/dashboard/web/polaris_web/web/src/apps/dashboard/components/shared/style.css
@@ -44,10 +44,6 @@
     padding-left: 10px ;
 }
 
-.new-diff .view-lines{
-    background: #FAFBFB !important;
-}
-
 .new-diff .monaco-hover{
     background-color: #FFF5EA !important;
     border-radius: 2px;

diff --git a/apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/dashboard.css b/apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/dashboard.css
@@ -114,6 +114,10 @@
     word-break: break-all !important;
 }
 
+.test-title .Polaris-Text--break {
+    word-break: normal !important;
+}
+
 .Polaris-Frame__Skip{
     visibility: hidden !important;
 }

diff --git a/apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/test_editor/TestEditor.jsx b/apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/test_editor/TestEditor.jsx
@@ -25,6 +25,7 @@ const TestEditor = () => {
     const setVulnerableRequestMap = TestEditorStore(state => state.setVulnerableRequestMap)
     const setDefaultRequest = TestEditorStore(state => state.setDefaultRequest)
     const setActive = PersistStore(state => state.setActive)
+    const selectedSampleApi = TestEditorStore(state => state.selectedSampleApi)
 
     const [loading, setLoading] = useState(true)
 

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
@@ -35,15 +35,15 @@ const SampleApi = () => {
     const selectedTest = TestEditorStore(state => state.selectedTest)
     const vulnerableRequestsObj = TestEditorStore(state => state.vulnerableRequestsMap)
     const defaultRequest = TestEditorStore(state => state.defaultRequest)
-    const selectedSampleApi = TestEditorStore(state => state.selectedSampleApi)
-    const setSelectedSampleApi = TestEditorStore(state => state.setSelectedSampleApi)
+    const selectedSampleApi = PersistStore(state => state.selectedSampleApi)
+    const setSelectedSampleApi = PersistStore(state => state.setSelectedSampleApi)
 
     const tabs = [{ id: 'request', content: 'Request' }, { id: 'response', content: 'Response'}];
     const mapCollectionIdToName = func.mapCollectionIdToName(allCollections)
 
     useEffect(()=>{
         let testId = selectedTest.value
-        let selectedUrl = selectedSampleApi.hasOwnProperty(testId) ? selectedSampleApi[testId] : vulnerableRequestsObj?.[testId]
+        let selectedUrl = Object.keys(selectedSampleApi).length > 0 ? selectedSampleApi : vulnerableRequestsObj?.[testId]
         setSelectedCollectionId(null)
         setCopyCollectionId(null)
         setTestResult(null)
@@ -95,6 +95,8 @@ const SampleApi = () => {
                 localEditorData = transform.formatData(sampleData?.responseJson, "http")
             }
             setEditorData({message: localEditorData})
+        }else{
+            setEditorData({message: ''})
         }
     }
 
@@ -137,23 +139,26 @@ const SampleApi = () => {
                 },0)
 
                 setSelected(0)
+            }else{
+                setEditorData({message: ''})
             }
+        }else{
+            setEditorData({message: ''})
         }
     }
 
     const toggleSelectApiActive = () => setSelectApiActive(prev => !prev)
     const saveFunc = () =>{
         setSelectedApiEndpoint(copySelectedApiEndpoint)
-        let copySampleApiObj = {...selectedSampleApi}
         const urlObj = func.toMethodUrlObject(copySelectedApiEndpoint)
-        copySampleApiObj[selectedTest.value] = {
+        const sampleApi = {
             apiCollectionId :copyCollectionId, 
             url: urlObj.url,
             method:{
                 "_name": urlObj.method
             }
         }
-        setSelectedSampleApi(copySampleApiObj)
+        setSelectedSampleApi(sampleApi)
         setSelectedCollectionId(copyCollectionId)
         toggleSelectApiActive()
     }

diff --git a/...hboard/web/polaris_web/web/src/apps/dashboard/pages/test_editor/components/YamlEditor.jsx b/...hboard/web/polaris_web/web/src/apps/dashboard/pages/test_editor/components/YamlEditor.jsx
@@ -41,9 +41,6 @@ const YamlEditor = ({ fetchAllTests }) => {
     const setTestsObj = TestEditorStore(state => state.setTestsObj)
     const setCurrentContent = TestEditorStore(state => state.setCurrentContent)
 
-    const selectedSampleApi = TestEditorStore(state => state.selectedSampleApi)
-    const setSelectedSampleApi = TestEditorStore(state => state.setSelectedSampleApi)
-
     const [ isEdited, setIsEdited ] = useState(false)
     const [ editorInstance, _setEditorInstance ] = useState()
     const editorInstanceRef = useRef(editorInstance)
@@ -72,9 +69,6 @@ const YamlEditor = ({ fetchAllTests }) => {
                 isError: false,
                 message: "Test saved successfully!"
             })
-            let newUrlObj = {...selectedSampleApi}
-            newUrlObj[addTestTemplateResponse.finalTestId] = selectedSampleApi[selectedTest.value];
-            setSelectedSampleApi(newUrlObj);
             navigate(`/dashboard/test-editor/${addTestTemplateResponse.finalTestId}`) 
             fetchAllTests()
         } catch(error) {

diff --git a/apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/test_editor/testEditorStore.js b/apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/test_editor/testEditorStore.js
@@ -26,9 +26,6 @@ let testEditorStore = (set)=>({
     setCurrentContent:(currentContent)=>{
         set({currentContent: currentContent})
     },
-
-    selectedSampleApi: {},
-    setSelectedSampleApi: (selectedSampleApi) => set({selectedSampleApi: selectedSampleApi})
 })
 
 testEditorStore = devtools(testEditorStore)

diff --git a/...olaris_web/web/src/apps/dashboard/pages/testing/TestRunResultPage/TestRunResultFlyout.jsx b/...olaris_web/web/src/apps/dashboard/pages/testing/TestRunResultPage/TestRunResultFlyout.jsx
@@ -118,7 +118,7 @@ function TestRunResultFlyout(props) {
             <div style={{display: 'flex', justifyContent: "space-between", gap:"24px", padding: "16px", paddingTop: '0px'}}>
                 <VerticalStack gap={"2"}>
                     <Box width="100%">
-                        <div style={{display: 'flex', gap: '4px'}}>
+                        <div style={{display: 'flex', gap: '4px'}} className='test-title'>
                             <Text variant="headingSm" alignment="start" breakWord>{selectedTestRunResult?.name}</Text>
                             {severity.length > 0 ? <Box><Badge size="small" status={func.getTestResultStatus(severity)}>{severity}</Badge></Box> : null}
                         </div>

diff --git a/apps/dashboard/web/polaris_web/web/src/apps/main/PersistStore.js b/apps/dashboard/web/polaris_web/web/src/apps/main/PersistStore.js
@@ -20,7 +20,7 @@ const initialState = {
     lastFetchedSeverityResp: {},
     lastCalledSensitiveInfo: 0,
     lastFetchedSensitiveResp: [],
-    // selectedSampleApi: {},
+    selectedSampleApi: {},
     coverageMap:{},
 };
 
@@ -40,7 +40,7 @@ let persistStore = (set) => ({
     setLastFetchedSeverityResp: (lastFetchedSeverityResp) => set({ lastFetchedSeverityResp }),
     setLastCalledSensitiveInfo: (lastCalledSensitiveInfo) => set({ lastCalledSensitiveInfo }),
     setLastFetchedSensitiveResp: (lastFetchedSensitiveResp) => set({ lastFetchedSensitiveResp }),
-    // setSelectedSampleApi: (selectedSampleApi) => set({selectedSampleApi: selectedSampleApi}),
+    setSelectedSampleApi: (selectedSampleApi) => set({selectedSampleApi: selectedSampleApi}),
     setCoverageMap:(coverageMap)=>{set({coverageMap: coverageMap})},
 
     resetAll: () => set(initialState), // Reset function