Hide filters options that produce no results

ui/webapp/src/layout/explore/filters/index.tsx

@@ -20,7 +20,7 @@ import {
   ViewMode,
 } from '../../../types';
 import getFoundationNameLabel from '../../../utils/getFoundationNameLabel';
-import getFiltersPerGroup, { FiltersPerGroup } from '../../../utils/prepareFilters';
+import getFiltersPerGroup, { FiltersOptions, FiltersPerGroup } from '../../../utils/prepareFilters';
 import Section from '../../common/Section';
 import { useViewMode } from '../../stores/viewMode';
 import styles from './Filters.module.css';
@@ -51,6 +51,10 @@ const Filters = (props: Props) => {
   const [filtersFromData, setFiltersFromData] = createSignal<FiltersPerGroup | undefined>();
   const [filters, setFilters] = createSignal<FilterSection[]>([]);
   const [visibleTitles, setVisibleTitles] = createSignal<FilterTitle[]>([]);
+  const [filtersOptions, setFiltersOptions] = createSignal<FiltersOptions>({
+    itemsWithoutMaturity: true,
+    itemsWithoutLicense: true,
+  });
 
   // Keep only available filters in selected group filters
   const cleanInitialActiveFilters = (): ActiveFilters => {
@@ -80,7 +84,8 @@ const Filters = (props: Props) => {
           const f = getFiltersPerGroup();
           if (!isEmpty(f)) {
             setFiltersFromData(f);
-            setFilters(f[props.initialSelectedGroup() || ALL_OPTION]);
+            setFilters(f[props.initialSelectedGroup() || ALL_OPTION].filters);
+            setFiltersOptions(f[props.initialSelectedGroup() || ALL_OPTION].options);
           }
         }
         setTmpActiveFilters(cleanInitialActiveFilters());
@@ -99,7 +104,8 @@ const Filters = (props: Props) => {
   createEffect(
     on(props.initialSelectedGroup, () => {
       if (!isUndefined(filtersFromData())) {
-        setFilters(filtersFromData()![props.initialSelectedGroup() || ALL_OPTION]);
+        setFilters(filtersFromData()![props.initialSelectedGroup() || ALL_OPTION].filters);
+        setFiltersOptions(filtersFromData()![props.initialSelectedGroup() || ALL_OPTION].options);
       }
     })
   );
@@ -137,8 +143,17 @@ const Filters = (props: Props) => {
     return;
   };
 
-  const getSectionInPredefinedFilters = (id: FilterCategory): FilterSection | undefined => {
-    const section = FILTERS.find((sec: FilterSection) => sec.value === id);
+  const getSectionInPredefinedFilters = (id: FilterCategory, visibleNonOption?: boolean): FilterSection | undefined => {
+    const originalSection = FILTERS.find((sec: FilterSection) => sec.value === id);
+    let section;
+    if (!isUndefined(originalSection)) {
+      if (!isUndefined(visibleNonOption) && !visibleNonOption) {
+        const options = originalSection.options.filter((opt: FilterOption) => !opt.value.startsWith('non-'));
+        section = { ...originalSection, options: options } as FilterSection;
+      } else {
+        section = originalSection;
+      }
+    }
     let availableExtraOptions: boolean = true;
     if ([FilterCategory.Maturity, FilterCategory.OrgType, FilterCategory.License].includes(id)) {
       const activeOpts = getSection(id);
@@ -318,7 +333,10 @@ const Filters = (props: Props) => {
               <div class="row g-4 g-lg-5 mb-4 mb-lg-5">
                 <Section
                   title="Status"
-                  section={getSectionInPredefinedFilters(FilterCategory.Maturity)}
+                  section={getSectionInPredefinedFilters(
+                    FilterCategory.Maturity,
+                    filtersOptions().itemsWithoutMaturity
+                  )}
                   extraOptions={{ [getFoundationNameLabel()]: getSection(FilterCategory.Maturity) }}
                   activeFilters={{ ...tmpActiveFilters() }[FilterCategory.Maturity]}
                   updateActiveFilters={updateActiveFilters}
@@ -336,7 +354,10 @@ const Filters = (props: Props) => {
                 <Show when={!isUndefined(getSection(FilterCategory.License))}>
                   <Section
                     title="License"
-                    section={getSectionInPredefinedFilters(FilterCategory.License)}
+                    section={getSectionInPredefinedFilters(
+                      FilterCategory.License,
+                      filtersOptions().itemsWithoutLicense
+                    )}
                     extraOptions={{ oss: getSection(FilterCategory.License)! }}
                     activeFilters={{ ...tmpActiveFilters() }[FilterCategory.License]}
                     updateActiveFilters={updateActiveFilters}

ui/webapp/src/utils/itemsDataGetter.ts

@@ -474,6 +474,7 @@ export class ItemsDataGetter {
         }
       });
     });
+
     return sortedData;
   };
 

ui/webapp/src/utils/prepareFilters.ts

@@ -1,4 +1,5 @@
 import { capitalizeFirstLetter, formatTAGName } from 'common';
+import isUndefined from 'lodash/isUndefined';
 
 import { FilterCategory, FilterSection, Item, Repository } from '../types';
 import checkIfCategoryInGroup from './checkIfCategoryInGroup';
@@ -10,21 +11,31 @@ const cleanValue = (t: string): string => {
 };
 
 export interface FiltersPerGroup {
-  [key: string]: FilterSection[];
+  [key: string]: PreparedFilters;
+}
+
+export interface FiltersOptions {
+  itemsWithoutMaturity: boolean;
+  itemsWithoutLicense: boolean;
+}
+
+interface PreparedFilters {
+  filters: FilterSection[];
+  options: FiltersOptions;
 }
 
 const getFiltersPerGroup = () => {
   const groups: FiltersPerGroup = {};
 
   const groupedItems = itemsDataGetter.getGroupedData();
   Object.keys(groupedItems).forEach((group: string) => {
-    groups[group] = prepareFilters(groupedItems[group], group);
+    groups[group] = { ...prepareFilters(groupedItems[group], group) };
   });
 
   return groups;
 };
 
-const prepareFilters = (items: Item[], group: string): FilterSection[] => {
+const prepareFilters = (items: Item[], group: string): PreparedFilters => {
   const filters: FilterSection[] = [];
 
   const maturityTypes: string[] = [];
@@ -36,10 +47,14 @@ const prepareFilters = (items: Item[], group: string): FilterSection[] => {
   const extraTypes: string[] = [];
   const categories: string[] = [];
   let industry: string[] = [];
+  let itemsWithoutMaturity: boolean = false;
+  let nonOss: boolean = false;
 
   items.forEach((i: Item) => {
     if (i.maturity) {
       maturityTypes.push(i.maturity);
+    } else {
+      itemsWithoutMaturity = true;
     }
 
     if (i.tag) {
@@ -91,6 +106,10 @@ const prepareFilters = (items: Item[], group: string): FilterSection[] => {
         }
       });
     }
+
+    if (isUndefined(i.oss)) {
+      nonOss = true;
+    }
   });
 
   if (maturityTypes.length > 0) {
@@ -207,7 +226,7 @@ const prepareFilters = (items: Item[], group: string): FilterSection[] => {
     }
   }
 
-  return filters;
+  return { filters: filters, options: { itemsWithoutMaturity: itemsWithoutMaturity, itemsWithoutLicense: nonOss } };
 };
 
 export default getFiltersPerGroup;