hiding deactivated collections from the test editor's dropdown search…

… menu and showing title directly inside dropdown comp
akto-api-security · Dec 30, 2024 · 43c4309 · 43c4309
1 parent 0ea0127
commit 43c4309
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 31 deletions.
diff --git a/apps/dashboard/web/polaris_web/web/src/apps/dashboard/components/CollectionComponent.jsx b/apps/dashboard/web/polaris_web/web/src/apps/dashboard/components/CollectionComponent.jsx
@@ -34,7 +34,8 @@ function CollectionComponent(props) {
     }, [condition])
 
     const allCollections = PersistStore(state => state.allCollections);
-    const allCollectionsOptions = allCollections.filter(x => x.type !== "API_GROUP")
+    const activatedCollections = allCollections.filter(collection => collection.deactivated === false)
+    const allCollectionsOptions = activatedCollections.filter(x => x.type !== "API_GROUP")
         .map(collection => {
             return {
                 label: collection.displayName,

diff --git a/apps/dashboard/web/polaris_web/web/src/apps/dashboard/components/ConditionComponent.jsx b/apps/dashboard/web/polaris_web/web/src/apps/dashboard/components/ConditionComponent.jsx
@@ -17,15 +17,10 @@ function ConditionComponent(props) {
     },[condition])
     const allCollections = PersistStore(state => state.allCollections);
     const activatedCollections = allCollections.filter(collection => collection.deactivated === false)
-    const allCollectionsOptions = [
-        {
-            title: `Search from ${activatedCollections.length} Collection${func.addPlurality(activatedCollections.length)} (type more to refine results)`,
-            options: activatedCollections.map(collection => ({
-                label: collection.displayName,
-                value: collection.id
-            }))
-        }
-    ]
+    const allCollectionsOptions = activatedCollections.map(collection => ({
+        label: collection.displayName,
+        value: collection.id
+    }))
     const getApiEndpointsOptions = (data) => {
         return data.map(apiEndpoint => {
             let str = func.toMethodUrlString(apiEndpoint);
@@ -119,8 +114,6 @@ function ConditionComponent(props) {
                     setSelected={(collectionId) => handleCollectionSelected(collectionId)}
                     preSelected={[Number(getCollectionId(field))]}
                     value={mapCollectionIdToName[getCollectionId(field)]}
-                    isNested={true}
-                    dynamicTitle={true}
                 />
                 </div>
                 <div style={{flexGrow:"1"}}>

diff --git a/apps/dashboard/web/polaris_web/web/src/apps/dashboard/components/shared/DropdownSearch.jsx b/apps/dashboard/web/polaris_web/web/src/apps/dashboard/components/shared/DropdownSearch.jsx
@@ -6,7 +6,7 @@ function DropdownSearch(props) {
 
     const id = props.id ? props.id : "dropdown-search"
 
-    const { disabled, label, placeholder, optionsList, setSelected, value , avatarIcon, preSelected, allowMultiple, itemName, dropdownSearchKey, isNested, sliceMaxVal, dynamicTitle} = props
+    const { disabled, label, placeholder, optionsList, setSelected, value , avatarIcon, preSelected, allowMultiple, itemName, dropdownSearchKey, isNested, sliceMaxVal} = props
 
     const deselectedOptions = optionsList
     const [selectedOptions, setSelectedOptions] = useState(preSelected ? preSelected : []);
@@ -78,17 +78,27 @@ function DropdownSearch(props) {
                     deselectedOptions.forEach((opt) => {
                         const options = opt.options.filter((option) =>
                           option[searchKey].match(filterRegex),
-                        ).slice(0, sliceMaxVal || 20);
+                        );
 
                         resultOptions.push({
-                          title: dynamicTitle ? `Showing ${options.length} result${func.addPlurality(options.length)} (type more to refine results)` : opt.title,
+                          title: opt.title,
                           options,
                         });
                       });
                 }else{
+                    const defaultSliceValue = sliceMaxVal || 20
                     resultOptions = deselectedOptions.filter((option) =>
-                    option[searchKey].match(filterRegex)
-                );
+                        option[searchKey].match(filterRegex)
+                    ).slice(0, defaultSliceValue);
+
+                    const title = resultOptions.length >= defaultSliceValue
+                        ? `Showing ${resultOptions.length} result${func.addPlurality(resultOptions.length)} only. (type more to refine results)`
+                        : "Showing all results";
+
+                    resultOptions = [{
+                        title: title,
+                        options: resultOptions
+                    }]
                 }
                 setOptions(resultOptions);
                 setLoading(false);

diff --git a/...rd/web/polaris_web/web/src/apps/dashboard/pages/observe/api_collections/ApiGroupModal.jsx b/...rd/web/polaris_web/web/src/apps/dashboard/pages/observe/api_collections/ApiGroupModal.jsx
@@ -67,21 +67,14 @@ function ApiGroupModal(props){
                     label="Select API group"
                     placeholder="Select API group"
                     optionsList={
-                        [
-                            {
-                                title: `Search from ${activatedGroupCollections.length} Group${func.addPlurality(activatedGroupCollections.length)} (type more to refine results)`,
-                                options: allCollections.filter((x) => { return (x.type === 'API_GROUP' && x.deactivated === false) }).map((x) => {
-                                    return {
-                                        label: x.displayName,
-                                        value: x.displayName
-                                    }
-                                })
+                        allCollections.filter((x) => { return (x.type === 'API_GROUP' && x.deactivated === false) }).map((x) => {
+                            return {
+                                label: x.displayName,
+                                value: x.displayName
                             }
-                        ]
+                        })
                     }
                     setSelected={setApiGroupName}
-                    dynamicTitle={true}
-                    isNested={true}
                 />
             </Box>
         )

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
@@ -154,7 +154,8 @@ const SampleApi = () => {
     }
 
 
-    const allCollectionsOptions = allCollections.map(collection => {
+    const activatedCollections = allCollections.filter(collection => collection.deactivated === false)
+    const allCollectionsOptions = activatedCollections.map(collection => {
         return {
             label: collection.displayName,
             value: collection.id

diff --git a/...polaris_web/web/src/apps/dashboard/pages/testing/TestRunsPage/TestrunsBannerComponent.jsx b/...polaris_web/web/src/apps/dashboard/pages/testing/TestRunsPage/TestrunsBannerComponent.jsx
@@ -12,7 +12,7 @@ function SelectCollectionComponent() {
     const allCollections = PersistStore(state => state.allCollections);
     const navigate = useNavigate()
     let urlsCount = 0
-    const allCollectionsOptions = allCollections.filter(x => x.type !== "API_GROUP")
+    const allCollectionsOptions = allCollections.filter(x => (x.type !== "API_GROUP" && x.deactivated === false))
         .map(collection => {
             urlsCount += collection.urlsCount
             return {