Add some more options to logos preview (cncf#594)

Add some more options to logos preview Closes cncf#526 and cncf#506 Signed-off-by: Cintia Sanchez Garcia <[email protected]>
ShadowZXY · May 6, 2024 · 41e47b1 · 41e47b1
1 parent f5d6cfb
commit 41e47b1
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 2 deletions.
diff --git a/ui/webapp/src/layout/logos/Logos.module.css b/ui/webapp/src/layout/logos/Logos.module.css
@@ -4,7 +4,7 @@
 
 .select {
   box-shadow: 0 0 0 0.2rem var(--bs-gray-200);
-  margin: 0 0.2rem;
+  margin: 0.5rem 0.2rem 0 0.2rem;
 }
 
 .select:focus {

diff --git a/ui/webapp/src/layout/logos/index.tsx b/ui/webapp/src/layout/logos/index.tsx
@@ -18,6 +18,7 @@ const Logos = () => {
   const [selectedSuboptionValue, setSelectedSuboptionValue] = createSignal<string>();
   const [suboptions, setSuboptions] = createSignal<Option[]>();
   const [items, setItems] = createSignal<Item[]>();
+  const [hiddenNonPublicOrgs, setHiddenNonPublicOrgs] = createSignal<boolean>(false);
 
   const cleanDuplicatedItems = (itemsList: Item[]): Item[] => {
     const result: Item[] = [];
@@ -35,6 +36,18 @@ const Logos = () => {
     return result;
   };
 
+  const cleanItems = (itemsList: Item[]): Item[] => {
+    let result = cleanDuplicatedItems(itemsList);
+
+    const items = cleanDuplicatedItems(itemsList);
+    if (hiddenNonPublicOrgs()) {
+      const nonPublicOrgs = items.filter((item) => !item.name.startsWith('Non-Public Organization'));
+      result = nonPublicOrgs;
+    }
+
+    return result;
+  };
+
   const filterItems = () => {
     let list: Item[] = [];
     if (!isUndefined(selectedGroup())) {
@@ -62,6 +75,10 @@ const Logos = () => {
                 list = itemsDataGetter.getItemsByEndUser() || [];
                 break;
 
+              case 'allenduser':
+                list = itemsDataGetter.getAllEndUserItems() || [];
+                break;
+
               default:
                 break;
             }
@@ -72,7 +89,7 @@ const Logos = () => {
           break;
       }
     }
-    setItems(cleanDuplicatedItems(list));
+    setItems(cleanItems(list));
   };
 
   const getOptions = (): FilterOption[] => {
@@ -107,6 +124,14 @@ const Logos = () => {
     })
   );
 
+  createEffect(
+    on(hiddenNonPublicOrgs, () => {
+      if (!isUndefined(items())) {
+        filterItems();
+      }
+    })
+  );
+
   return (
     <>
       <main class="flex-grow-1 container-fluid px-3 px-lg-4 mainPadding position-relative">
@@ -116,6 +141,10 @@ const Logos = () => {
           <div class="position-relative mt-3">
             <Show when={!isUndefined(options())} fallback={<Loading />}>
               <div class="d-flex flex-column">
+                <div class={`text-uppercase text-muted fw-semibold mb-1 ${styles.labelSelect}`}>
+                  Select items to display
+                </div>
+
                 <div class="d-flex flex-row">
                   <For each={options()}>
                     {(option) => (
@@ -208,6 +237,21 @@ const Logos = () => {
                     </Show>
                   </div>
                 </Show>
+                <div class="mt-4">
+                  <div class="form-check form-switch">
+                    <input
+                      onInput={() => setHiddenNonPublicOrgs(!hiddenNonPublicOrgs())}
+                      checked={hiddenNonPublicOrgs()}
+                      class="form-check-input"
+                      type="checkbox"
+                      role="switch"
+                      id="visibleNonPublicOrgs"
+                    />
+                    <label class="form-check-label" for="visibleNonPublicOrgs">
+                      Hide non-public organizations
+                    </label>
+                  </div>
+                </div>
                 <div class="position-relative mt-5">
                   <Show when={!isUndefined(items())}>
                     <div class={styles.grid}>

diff --git a/ui/webapp/src/utils/itemsDataGetter.ts b/ui/webapp/src/utils/itemsDataGetter.ts
@@ -527,6 +527,16 @@ export class ItemsDataGetter {
     }
   }
 
+  // Get all end users
+  public getAllEndUserItems(): Item[] | undefined {
+    if (this.ready && this.landscapeData && this.landscapeData.items) {
+      return this.landscapeData.items.filter(
+        (i: Item) =>
+          (i.enduser && window.baseDS.members_category === i.category) || i.subcategory === 'End User Supporter'
+      );
+    }
+  }
+
   // Get maturity options
   public getMaturityOptions(): string[] {
     const maturity = window.baseDS.items.map((i: Item) => i.maturity);
@@ -613,6 +623,10 @@ export class ItemsDataGetter {
             value: 'enduser',
             name: 'End user members',
           },
+          {
+            value: 'allenduser',
+            name: 'All end users',
+          },
         ],
       });
     }