From 9045aa734936e91633256692a9d9850312cc25b5 Mon Sep 17 00:00:00 2001
From: Robert Hecht <robert.hecht@staffbase.com>
Date: Thu, 16 Dec 2021 13:27:58 +0100
Subject: [PATCH 1/2] add onFilter property on selects

---
 .../page/ApplicationsToolbarItemClusters.tsx  |  6 ++++
 .../ApplicationsToolbarItemNamespaces.tsx     |  6 ++++
 .../page/PageToolbarItemClusters.tsx          |  7 +++++
 .../components/page/PageToolbarNamespaces.tsx | 28 +++++++++++++++----
 .../page/PageToolbarItemClusters.tsx          |  6 ++++
 .../page/PageToolbarItemNamespaces.tsx        |  6 ++++
 .../page/PageToolbarItemResources.tsx         | 24 ++++++++++------
 7 files changed, 69 insertions(+), 14 deletions(-)

diff --git a/plugins/applications/src/components/page/ApplicationsToolbarItemClusters.tsx b/plugins/applications/src/components/page/ApplicationsToolbarItemClusters.tsx
index 93a5a20fa..f5d0e1376 100644
--- a/plugins/applications/src/components/page/ApplicationsToolbarItemClusters.tsx
+++ b/plugins/applications/src/components/page/ApplicationsToolbarItemClusters.tsx
@@ -25,6 +25,12 @@ const ToolbarItemClusters: React.FunctionComponent<IToolbarItemClustersProps> =
       onClear={(): void => selectCluster('')}
       selections={selectedClusters}
       isOpen={showOptions}
+      onFilter={(_, v) => (
+        clusters.filter(c => !v || c.includes(v)).
+        map((cluster: string, index: number) => (
+          <SelectOption key={index} value={cluster} />
+        ))
+      )}
     >
       {clusters.map((cluster, index) => (
         <SelectOption key={index} value={cluster} />
diff --git a/plugins/applications/src/components/page/ApplicationsToolbarItemNamespaces.tsx b/plugins/applications/src/components/page/ApplicationsToolbarItemNamespaces.tsx
index 058986c3a..3c038651f 100644
--- a/plugins/applications/src/components/page/ApplicationsToolbarItemNamespaces.tsx
+++ b/plugins/applications/src/components/page/ApplicationsToolbarItemNamespaces.tsx
@@ -43,6 +43,12 @@ const ToolbarItemNamespaces: React.FunctionComponent<IToolbarItemNamespacesProps
       onClear={(): void => selectNamespace('')}
       selections={selectedNamespaces}
       isOpen={showOptions}
+      onFilter={(_, v) => (
+        namespaces.filter(ns => !v || ns.includes(v)).
+        map((namespace: string, index: number) => (
+          <SelectOption key={index} value={namespace} />
+        ))
+      )}
     >
       {namespaces.map((namespace, index) => (
         <SelectOption key={index} value={namespace} />
diff --git a/plugins/flux/src/components/page/PageToolbarItemClusters.tsx b/plugins/flux/src/components/page/PageToolbarItemClusters.tsx
index 167e5b0f6..a7262b2a1 100644
--- a/plugins/flux/src/components/page/PageToolbarItemClusters.tsx
+++ b/plugins/flux/src/components/page/PageToolbarItemClusters.tsx
@@ -25,6 +25,13 @@ const ToolbarItemClusters: React.FunctionComponent<IToolbarItemClustersProps> =
       onClear={(): void => selectCluster('')}
       selections={selectedCluster}
       isOpen={showOptions}
+      onFilter={(_, v) => (
+        clusters.filter(c => !v || c.includes(v)).
+        map((cluster: string, index: number) => (
+          <SelectOption key={index} value={cluster} />
+          ))
+        )
+      }
     >
       {clusters.map((cluster, index) => (
         <SelectOption key={index} value={cluster} />
diff --git a/plugins/kiali/src/components/page/PageToolbarNamespaces.tsx b/plugins/kiali/src/components/page/PageToolbarNamespaces.tsx
index 944a66317..d771cb7aa 100644
--- a/plugins/kiali/src/components/page/PageToolbarNamespaces.tsx
+++ b/plugins/kiali/src/components/page/PageToolbarNamespaces.tsx
@@ -44,6 +44,22 @@ const PageToolbarNamespaces: React.FunctionComponent<IPageToolbarNamespacesProps
     );
   }
 
+  if (isError) {
+    <Select
+      variant={SelectVariant.typeaheadMulti}
+      typeAheadAriaLabel="Namespaces"
+      placeholderText="Namespaces"
+      onToggle={(): void => setShow(!show)}
+      onSelect={(e, value): void => selectNamespace(value as string)}
+      onClear={(): void => selectNamespace('')}
+      selections={namespaces}
+      isOpen={show}
+    >
+      {[<SelectOption key="error" isDisabled={true} value={error?.message || 'Could not get namespaces.'} />]}
+    </Select>
+  }
+  
+  const dat = (data ?? [])
   return (
     <Select
       variant={SelectVariant.typeaheadMulti}
@@ -54,12 +70,14 @@ const PageToolbarNamespaces: React.FunctionComponent<IPageToolbarNamespacesProps
       onClear={(): void => selectNamespace('')}
       selections={namespaces}
       isOpen={show}
+      onFilter={(_,v) => (
+        dat.filter(ns => !v || ns.includes(v)).
+        map((namespace, index) => (
+          <SelectOption key={index} value={namespace} />
+        ))
+      )}
     >
-      {isError
-        ? [<SelectOption key="error" isDisabled={true} value={error?.message || 'Could not get namespaces.'} />]
-        : data
-        ? data.map((namespace, index) => <SelectOption key={index} value={namespace} />)
-        : []}
+      {dat.map((namespace, index) => <SelectOption key={index} value={namespace} />)}
     </Select>
   );
 };
diff --git a/plugins/resources/src/components/page/PageToolbarItemClusters.tsx b/plugins/resources/src/components/page/PageToolbarItemClusters.tsx
index 93a5a20fa..f5d0e1376 100644
--- a/plugins/resources/src/components/page/PageToolbarItemClusters.tsx
+++ b/plugins/resources/src/components/page/PageToolbarItemClusters.tsx
@@ -25,6 +25,12 @@ const ToolbarItemClusters: React.FunctionComponent<IToolbarItemClustersProps> =
       onClear={(): void => selectCluster('')}
       selections={selectedClusters}
       isOpen={showOptions}
+      onFilter={(_, v) => (
+        clusters.filter(c => !v || c.includes(v)).
+        map((cluster: string, index: number) => (
+          <SelectOption key={index} value={cluster} />
+        ))
+      )}
     >
       {clusters.map((cluster, index) => (
         <SelectOption key={index} value={cluster} />
diff --git a/plugins/resources/src/components/page/PageToolbarItemNamespaces.tsx b/plugins/resources/src/components/page/PageToolbarItemNamespaces.tsx
index 058986c3a..3c038651f 100644
--- a/plugins/resources/src/components/page/PageToolbarItemNamespaces.tsx
+++ b/plugins/resources/src/components/page/PageToolbarItemNamespaces.tsx
@@ -43,6 +43,12 @@ const ToolbarItemNamespaces: React.FunctionComponent<IToolbarItemNamespacesProps
       onClear={(): void => selectNamespace('')}
       selections={selectedNamespaces}
       isOpen={showOptions}
+      onFilter={(_, v) => (
+        namespaces.filter(ns => !v || ns.includes(v)).
+        map((namespace: string, index: number) => (
+          <SelectOption key={index} value={namespace} />
+        ))
+      )}
     >
       {namespaces.map((namespace, index) => (
         <SelectOption key={index} value={namespace} />
diff --git a/plugins/resources/src/components/page/PageToolbarItemResources.tsx b/plugins/resources/src/components/page/PageToolbarItemResources.tsx
index 64d37cf1b..a8a64193c 100644
--- a/plugins/resources/src/components/page/PageToolbarItemResources.tsx
+++ b/plugins/resources/src/components/page/PageToolbarItemResources.tsx
@@ -27,18 +27,24 @@ const ToolbarItemResources: React.FunctionComponent<IToolbarItemResourcesProps>
       onClear={(): void => selectResource('')}
       selections={selectedResources}
       isOpen={showOptions}
+      onFilter={(_, v) => (
+        Object.keys(resources).filter(c => !v || c.includes(v)).
+        map(renderOptions(resources))
+      )}
     >
-      {Object.keys(resources).map((key) => (
-        <SelectOption
-          key={key}
-          value={key}
-          description={resources[key].isCRD ? `${resources[key].resource}.${resources[key].path}` : undefined}
-        >
-          {resources[key].title}
-        </SelectOption>
-      ))}
+      {Object.keys(resources).map(renderOptions(resources))}
     </Select>
   );
 };
 
+const renderOptions = (resources: IResources) => (key: string) => (
+  <SelectOption
+    key={key}
+    value={key}
+    description={resources[key].isCRD ? `${resources[key].resource}.${resources[key].path}` : undefined}
+  >
+    {resources[key].title}
+  </SelectOption>
+)
+
 export default ToolbarItemResources;

From c131c53aed3ff6cd48c2404e7fe2ff82b4abb75f Mon Sep 17 00:00:00 2001
From: ricoberger <mail@ricoberger.de>
Date: Thu, 23 Dec 2021 19:13:48 +0100
Subject: [PATCH 2/2] [core] Improve filtering in select components

This improves the filtering in select components, so that also entries
are matched, which are containing a string but do not start with the
search string provided by the user.

This commit runs prittier in the fixed files and fixes some eslint
errors. I also changed the key property on most of the components to
improve the rendering.
---
 CHANGELOG.md                                  |  1 +
 .../page/ApplicationsToolbarItemClusters.tsx  | 15 ++++----
 .../ApplicationsToolbarItemNamespaces.tsx     | 15 ++++----
 .../page/PageToolbarItemClusters.tsx          | 10 ++---
 .../components/page/PageToolbarNamespaces.tsx | 35 ++++++------------
 .../page/PageToolbarItemClusters.tsx          | 15 ++++----
 .../page/PageToolbarItemNamespaces.tsx        | 15 ++++----
 .../page/PageToolbarItemResources.tsx         | 37 +++++++++++--------
 8 files changed, 67 insertions(+), 76 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e377ef32b..fbbc160e8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -43,6 +43,7 @@ NOTE: As semantic versioning states all 0.y.z releases can contain breaking chan
 - [#238](https://github.com/kobsio/kobs/pull/238): [core] Refactor frontend code for plugins (change options handling, use `setDetails` instead of `showDetails` and rename plugins options in panels to `pluginOptions`).
 - [#240](https://github.com/kobsio/kobs/pull/240): [core] Switch from `github.com/sirupsen/logrus` to `go.uber.org/zap` for logging and enrich log lines via `context.Context`.
 - [#241](https://github.com/kobsio/kobs/pull/241): [core] :warning: _Breaking change:_ :warning: Rework authentication / authorization middleware and adjust the Custom Resource Definition for Users and Teams.
+- [#236](https://github.com/kobsio/kobs/pull/236): [core] Improve filtering in select components for various plugins.
 
 ## [v0.7.0](https://github.com/kobsio/kobs/releases/tag/v0.7.0) (2021-11-19)
 
diff --git a/plugins/applications/src/components/page/ApplicationsToolbarItemClusters.tsx b/plugins/applications/src/components/page/ApplicationsToolbarItemClusters.tsx
index f5d0e1376..0f454f2fb 100644
--- a/plugins/applications/src/components/page/ApplicationsToolbarItemClusters.tsx
+++ b/plugins/applications/src/components/page/ApplicationsToolbarItemClusters.tsx
@@ -25,15 +25,14 @@ const ToolbarItemClusters: React.FunctionComponent<IToolbarItemClustersProps> =
       onClear={(): void => selectCluster('')}
       selections={selectedClusters}
       isOpen={showOptions}
-      onFilter={(_, v) => (
-        clusters.filter(c => !v || c.includes(v)).
-        map((cluster: string, index: number) => (
-          <SelectOption key={index} value={cluster} />
-        ))
-      )}
+      onFilter={(e: React.ChangeEvent<HTMLInputElement> | null, value: string): React.ReactElement[] =>
+        clusters
+          .filter((c) => !value || c.includes(value))
+          .map((cluster: string) => <SelectOption key={cluster} value={cluster} />)
+      }
     >
-      {clusters.map((cluster, index) => (
-        <SelectOption key={index} value={cluster} />
+      {clusters.map((cluster) => (
+        <SelectOption key={cluster} value={cluster} />
       ))}
     </Select>
   );
diff --git a/plugins/applications/src/components/page/ApplicationsToolbarItemNamespaces.tsx b/plugins/applications/src/components/page/ApplicationsToolbarItemNamespaces.tsx
index 3c038651f..80c0d61a0 100644
--- a/plugins/applications/src/components/page/ApplicationsToolbarItemNamespaces.tsx
+++ b/plugins/applications/src/components/page/ApplicationsToolbarItemNamespaces.tsx
@@ -43,15 +43,14 @@ const ToolbarItemNamespaces: React.FunctionComponent<IToolbarItemNamespacesProps
       onClear={(): void => selectNamespace('')}
       selections={selectedNamespaces}
       isOpen={showOptions}
-      onFilter={(_, v) => (
-        namespaces.filter(ns => !v || ns.includes(v)).
-        map((namespace: string, index: number) => (
-          <SelectOption key={index} value={namespace} />
-        ))
-      )}
+      onFilter={(e: React.ChangeEvent<HTMLInputElement> | null, value: string): React.ReactElement[] =>
+        namespaces
+          .filter((ns) => !value || ns.includes(value))
+          .map((namespace: string) => <SelectOption key={namespace} value={namespace} />)
+      }
     >
-      {namespaces.map((namespace, index) => (
-        <SelectOption key={index} value={namespace} />
+      {namespaces.map((namespace) => (
+        <SelectOption key={namespace} value={namespace} />
       ))}
     </Select>
   );
diff --git a/plugins/flux/src/components/page/PageToolbarItemClusters.tsx b/plugins/flux/src/components/page/PageToolbarItemClusters.tsx
index a7262b2a1..a8ff49120 100644
--- a/plugins/flux/src/components/page/PageToolbarItemClusters.tsx
+++ b/plugins/flux/src/components/page/PageToolbarItemClusters.tsx
@@ -25,12 +25,10 @@ const ToolbarItemClusters: React.FunctionComponent<IToolbarItemClustersProps> =
       onClear={(): void => selectCluster('')}
       selections={selectedCluster}
       isOpen={showOptions}
-      onFilter={(_, v) => (
-        clusters.filter(c => !v || c.includes(v)).
-        map((cluster: string, index: number) => (
-          <SelectOption key={index} value={cluster} />
-          ))
-        )
+      onFilter={(e: React.ChangeEvent<HTMLInputElement> | null, value: string): React.ReactElement[] =>
+        clusters
+          .filter((c) => !value || c.includes(value))
+          .map((cluster: string) => <SelectOption key={cluster} value={cluster} />)
       }
     >
       {clusters.map((cluster, index) => (
diff --git a/plugins/kiali/src/components/page/PageToolbarNamespaces.tsx b/plugins/kiali/src/components/page/PageToolbarNamespaces.tsx
index 4bce825f5..13add7dec 100644
--- a/plugins/kiali/src/components/page/PageToolbarNamespaces.tsx
+++ b/plugins/kiali/src/components/page/PageToolbarNamespaces.tsx
@@ -44,22 +44,6 @@ const PageToolbarNamespaces: React.FunctionComponent<IPageToolbarNamespacesProps
     );
   }
 
-  if (isError) {
-    <Select
-      variant={SelectVariant.typeaheadMulti}
-      typeAheadAriaLabel="Namespaces"
-      placeholderText="Namespaces"
-      onToggle={(): void => setShow(!show)}
-      onSelect={(e, value): void => selectNamespace(value as string)}
-      onClear={(): void => selectNamespace('')}
-      selections={namespaces}
-      isOpen={show}
-    >
-      {[<SelectOption key="error" isDisabled={true} value={error?.message || 'Could not get namespaces.'} />]}
-    </Select>
-  }
-  
-  const dat = (data ?? [])
   return (
     <Select
       variant={SelectVariant.typeaheadMulti}
@@ -70,14 +54,19 @@ const PageToolbarNamespaces: React.FunctionComponent<IPageToolbarNamespacesProps
       onClear={(): void => selectNamespace('')}
       selections={namespaces}
       isOpen={show}
-      onFilter={(_,v) => (
-        dat.filter(ns => !v || ns.includes(v)).
-        map((namespace, index) => (
-          <SelectOption key={index} value={namespace} />
-        ))
-      )}
+      onFilter={(e: React.ChangeEvent<HTMLInputElement> | null, value: string): React.ReactElement[] =>
+        data
+          ? data
+              .filter((ns) => !value || ns.includes(value))
+              .map((namespace: string) => <SelectOption key={namespace} value={namespace} />)
+          : []
+      }
     >
-      {dat.map((namespace, index) => <SelectOption key={index} value={namespace} />)}
+      {isError
+        ? [<SelectOption key="error" isDisabled={true} value={error?.message || 'Could not get namespaces.'} />]
+        : data
+        ? data.map((namespace) => <SelectOption key={namespace} value={namespace} />)
+        : []}
     </Select>
   );
 };
diff --git a/plugins/resources/src/components/page/PageToolbarItemClusters.tsx b/plugins/resources/src/components/page/PageToolbarItemClusters.tsx
index f5d0e1376..0f454f2fb 100644
--- a/plugins/resources/src/components/page/PageToolbarItemClusters.tsx
+++ b/plugins/resources/src/components/page/PageToolbarItemClusters.tsx
@@ -25,15 +25,14 @@ const ToolbarItemClusters: React.FunctionComponent<IToolbarItemClustersProps> =
       onClear={(): void => selectCluster('')}
       selections={selectedClusters}
       isOpen={showOptions}
-      onFilter={(_, v) => (
-        clusters.filter(c => !v || c.includes(v)).
-        map((cluster: string, index: number) => (
-          <SelectOption key={index} value={cluster} />
-        ))
-      )}
+      onFilter={(e: React.ChangeEvent<HTMLInputElement> | null, value: string): React.ReactElement[] =>
+        clusters
+          .filter((c) => !value || c.includes(value))
+          .map((cluster: string) => <SelectOption key={cluster} value={cluster} />)
+      }
     >
-      {clusters.map((cluster, index) => (
-        <SelectOption key={index} value={cluster} />
+      {clusters.map((cluster) => (
+        <SelectOption key={cluster} value={cluster} />
       ))}
     </Select>
   );
diff --git a/plugins/resources/src/components/page/PageToolbarItemNamespaces.tsx b/plugins/resources/src/components/page/PageToolbarItemNamespaces.tsx
index 3c038651f..80c0d61a0 100644
--- a/plugins/resources/src/components/page/PageToolbarItemNamespaces.tsx
+++ b/plugins/resources/src/components/page/PageToolbarItemNamespaces.tsx
@@ -43,15 +43,14 @@ const ToolbarItemNamespaces: React.FunctionComponent<IToolbarItemNamespacesProps
       onClear={(): void => selectNamespace('')}
       selections={selectedNamespaces}
       isOpen={showOptions}
-      onFilter={(_, v) => (
-        namespaces.filter(ns => !v || ns.includes(v)).
-        map((namespace: string, index: number) => (
-          <SelectOption key={index} value={namespace} />
-        ))
-      )}
+      onFilter={(e: React.ChangeEvent<HTMLInputElement> | null, value: string): React.ReactElement[] =>
+        namespaces
+          .filter((ns) => !value || ns.includes(value))
+          .map((namespace: string) => <SelectOption key={namespace} value={namespace} />)
+      }
     >
-      {namespaces.map((namespace, index) => (
-        <SelectOption key={index} value={namespace} />
+      {namespaces.map((namespace) => (
+        <SelectOption key={namespace} value={namespace} />
       ))}
     </Select>
   );
diff --git a/plugins/resources/src/components/page/PageToolbarItemResources.tsx b/plugins/resources/src/components/page/PageToolbarItemResources.tsx
index a8a64193c..6c39ec45b 100644
--- a/plugins/resources/src/components/page/PageToolbarItemResources.tsx
+++ b/plugins/resources/src/components/page/PageToolbarItemResources.tsx
@@ -27,24 +27,31 @@ const ToolbarItemResources: React.FunctionComponent<IToolbarItemResourcesProps>
       onClear={(): void => selectResource('')}
       selections={selectedResources}
       isOpen={showOptions}
-      onFilter={(_, v) => (
-        Object.keys(resources).filter(c => !v || c.includes(v)).
-        map(renderOptions(resources))
-      )}
+      onFilter={(e: React.ChangeEvent<HTMLInputElement> | null, value: string): React.ReactElement[] =>
+        Object.keys(resources)
+          .filter((key) => !value || key.includes(value))
+          .map((key) => (
+            <SelectOption
+              key={key}
+              value={key}
+              description={resources[key].isCRD ? `${resources[key].resource}.${resources[key].path}` : undefined}
+            >
+              {resources[key].title}
+            </SelectOption>
+          ))
+      }
     >
-      {Object.keys(resources).map(renderOptions(resources))}
+      {Object.keys(resources).map((key) => (
+        <SelectOption
+          key={key}
+          value={key}
+          description={resources[key].isCRD ? `${resources[key].resource}.${resources[key].path}` : undefined}
+        >
+          {resources[key].title}
+        </SelectOption>
+      ))}
     </Select>
   );
 };
 
-const renderOptions = (resources: IResources) => (key: string) => (
-  <SelectOption
-    key={key}
-    value={key}
-    description={resources[key].isCRD ? `${resources[key].resource}.${resources[key].path}` : undefined}
-  >
-    {resources[key].title}
-  </SelectOption>
-)
-
 export default ToolbarItemResources;