Merge pull request #1350 from akto-api-security/improve/dashboard_ux

Adding search in run test modal
akto-api-security · Aug 13, 2024 · 8f58a12 · 8f58a12
2 parents fa2b044 + c4014dd
commit 8f58a12
Showing 1 changed file with 22 additions and 6 deletions.
diff --git a/...ashboard/web/polaris_web/web/src/apps/dashboard/pages/observe/api_collections/RunTest.jsx b/...ashboard/web/polaris_web/web/src/apps/dashboard/pages/observe/api_collections/RunTest.jsx
@@ -1,5 +1,5 @@
-import { Box, Button, DataTable, Divider, Modal, Text, TextField, Icon, Checkbox, ButtonGroup, Badge, Banner,HorizontalGrid, HorizontalStack, Link, VerticalStack } from "@shopify/polaris";
-import { TickMinor, CancelMajor } from "@shopify/polaris-icons"
+import { Box, Button, DataTable, Divider, Modal, Text, TextField, Icon, Checkbox, Badge, Banner,HorizontalGrid, HorizontalStack, Link, VerticalStack, Tooltip } from "@shopify/polaris";
+import { TickMinor, CancelMajor, SearchMinor } from "@shopify/polaris-icons"
 import { useEffect, useRef, useState } from "react";
 import { default as observeApi } from "../api";
 import { default as testingApi } from "../../testing/api";
@@ -42,6 +42,8 @@ function RunTest({ endpoints, filtered, apiCollectionId, disabled, runTestFromOu
     const [active, setActive] = useState(runTestFromOutside || false);
 
     const runTestRef = useRef(null);
+    const [searchValue, setSearchValue] = useState('')
+    const [showSearch, setShowSearch] = useState(false)
 
     function nameSuffixes(tests) {
         return Object.entries(tests)
@@ -159,12 +161,16 @@ function RunTest({ endpoints, filtered, apiCollectionId, disabled, runTestFromOu
         </div>
     );
 
+    const resetSearchFunc = () => {
+        setShowSearch(false);
+        setSearchValue('');
+    }
+
     let categoryRows = [], testRows = []
 
     if (!loading) {
         categoryRows = testRun.categories.map(category => {
             const tests = testRun.tests[category.name]
-
             if (tests) {
                 let selected = 0
                 const total = tests.length
@@ -177,7 +183,7 @@ function RunTest({ endpoints, filtered, apiCollectionId, disabled, runTestFromOu
                 return ([(
                     <div
                         style={{ display: "grid", gridTemplateColumns: "auto max-content", alignItems: "center" }}
-                        onClick={() => setTestRun(prev => ({ ...prev, selectedCategory: category.name }))}>
+                        onClick={() => { setTestRun(prev => ({ ...prev, selectedCategory: category.name })); resetSearchFunc(); }}>
                         <div>
                             <Text variany="headingMd" fontWeight="bold" color={category.name === testRun.selectedCategory ? "success" : ""}>{category.displayName}</Text>
                             <Text>{selected} out of {total} selected</Text>
@@ -216,7 +222,7 @@ function RunTest({ endpoints, filtered, apiCollectionId, disabled, runTestFromOu
             }))
         }
 
-        testRows = testRun.tests[testRun.selectedCategory].map(test => {
+        testRows = testRun.tests[testRun.selectedCategory].filter(x=> x.label.toLowerCase().includes(searchValue.toLowerCase())).map(test => {
             const isCustom = test?.author !== "AKTO"
             const label = (
                 <span style={{display: 'flex', gap: '4px', alignItems: 'flex-start'}}>
@@ -393,6 +399,10 @@ function RunTest({ endpoints, filtered, apiCollectionId, disabled, runTestFromOu
         })
     }
 
+    const handleInputValue = (val) => {
+        setSearchValue(val);
+    }
+
     return (
         <div>
             {activator}
@@ -470,14 +480,20 @@ function RunTest({ endpoints, filtered, apiCollectionId, disabled, runTestFromOu
                                 </div>
                             </div>
                             <div>
-                                <div style={{ padding: "15px", alignItems: "center" }}>
+                                <div style={{ padding: !showSearch ? "13px" : "9px", alignItems: "center", justifyContent: 'space-between', display: 'flex' }}>
                                     <HorizontalStack gap={"2"}>
                                         <Checkbox
                                             checked={allTestsSelectedOfCategory}
                                             onChange={(val) => toggleTestsSelection(val)}
                                         />
                                         <Text variant="headingMd">Tests</Text>
                                     </HorizontalStack>
+                                    <HorizontalStack gap={"2"}>
+                                        {showSearch ? <TextField onChange={handleInputValue} value={searchValue} selectTextOnFocus/> : null}
+                                        <Tooltip content={"Click to search"} dismissOnMouseOut>
+                                            <Button size="slim" icon={SearchMinor} onClick={() => setShowSearch(!showSearch)}/>
+                                        </Tooltip>
+                                    </HorizontalStack>
                                 </div>
                                 <Divider />
                                 <div style={{ maxHeight: "35vh", overflowY: "auto", paddingTop: "5px" }}>