hiding deactivated collections from the dropdown search menu

akto-api-security · Dec 30, 2024 · 4fffdd1 · 4fffdd1
1 parent 5e02f5e
commit 4fffdd1
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 14 deletions.
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
@@ -16,12 +16,16 @@ function ConditionComponent(props) {
         }
     },[condition])
     const allCollections = PersistStore(state => state.allCollections);
-    const allCollectionsOptions = allCollections.map(collection => {
-        return {
-            label: collection.displayName,
-            value: collection.id
+    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 getApiEndpointsOptions = (data) => {
         return data.map(apiEndpoint => {
             let str = func.toMethodUrlString(apiEndpoint);
@@ -115,6 +119,8 @@ 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} = props
+    const { disabled, label, placeholder, optionsList, setSelected, value , avatarIcon, preSelected, allowMultiple, itemName, dropdownSearchKey, isNested, sliceMaxVal, dynamicTitle} = props
 
     const deselectedOptions = optionsList
     const [selectedOptions, setSelectedOptions] = useState(preSelected ? preSelected : []);
@@ -81,7 +81,7 @@ function DropdownSearch(props) {
                         );
 
                         resultOptions.push({
-                          title: opt.title,
+                          title: dynamicTitle ? `Showing ${options.length} result${func.addPlurality(options.length)} (type more to refine results)` : opt.title,
                           options,
                         });
                       });

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
@@ -19,6 +19,7 @@ function ApiGroupModal(props){
     const setCollectionsMap = PersistStore(state => state.setCollectionsMap)
     const allCollections = PersistStore(state => state.allCollections);
     const setAllCollections = PersistStore(state => state.setAllCollections)
+    const activatedGroupCollections = allCollections.filter((x) => { return (x.type === 'API_GROUP' && x.deactivated === false) })
 
     const [apiGroupName, setApiGroupName] = useState(currentApiGroupName)
 
@@ -65,14 +66,22 @@ function ApiGroupModal(props){
                     id={"select-api-group"}
                     label="Select API group"
                     placeholder="Select API group"
-                    optionsList={allCollections.filter((x) => { return x.type === 'API_GROUP' }).map((x) => {
-                        return {
-                            label: x.displayName,
-                            value: x.displayName
-                        }
-                    })
+                    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
+                                    }
+                                })
+                            }
+                        ]
                     }
                     setSelected={setApiGroupName}
+                    dynamicTitle={true}
+                    isNested={true}
                 />
             </Box>
         )

diff --git a/apps/dashboard/web/polaris_web/web/src/util/func.js b/apps/dashboard/web/polaris_web/web/src/util/func.js
@@ -1246,9 +1246,11 @@ getDeprecatedEndpoints(apiInfoList, unusedEndpoints, apiCollectionId) {
  getSearchItemsArr(allRoutes,allCollections){
   let combinedArr = []
 
+  const activatedColections = allCollections.filter((item) => item.deactivated === false)
+
   let initialStr = "/dashboard/observe/inventory/"
 
-  allCollections.forEach((item)=> {
+  activatedColections.forEach((item)=> {
     combinedArr.push({content: item.displayName, url: initialStr + item.id, type:'collection'})
   })