[core] Improve the search on select components

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)
 

plugins/applications/src/components/page/ApplicationsToolbarItemClusters.tsx

@@ -25,9 +25,14 @@ const ToolbarItemClusters: React.FunctionComponent<IToolbarItemClustersProps> =
       onClear={(): void => selectCluster('')}
       selections={selectedClusters}
       isOpen={showOptions}
+      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>
   );

plugins/applications/src/components/page/ApplicationsToolbarItemNamespaces.tsx

@@ -43,9 +43,14 @@ const ToolbarItemNamespaces: React.FunctionComponent<IToolbarItemNamespacesProps
       onClear={(): void => selectNamespace('')}
       selections={selectedNamespaces}
       isOpen={showOptions}
+      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>
   );

plugins/flux/src/components/page/PageToolbarItemClusters.tsx

@@ -25,6 +25,11 @@ const ToolbarItemClusters: React.FunctionComponent<IToolbarItemClustersProps> =
       onClear={(): void => selectCluster('')}
       selections={selectedCluster}
       isOpen={showOptions}
+      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} />

plugins/kiali/src/components/page/PageToolbarNamespaces.tsx

@@ -54,11 +54,18 @@ const PageToolbarNamespaces: React.FunctionComponent<IPageToolbarNamespacesProps
       onClear={(): void => selectNamespace('')}
       selections={namespaces}
       isOpen={show}
+      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} />)
+          : []
+      }
     >
       {isError
         ? [<SelectOption key="error" isDisabled={true} value={error?.message || 'Could not get namespaces.'} />]
         : data
-        ? data.map((namespace, index) => <SelectOption key={index} value={namespace} />)
+        ? data.map((namespace) => <SelectOption key={namespace} value={namespace} />)
         : []}
     </Select>
   );

plugins/resources/src/components/page/PageToolbarItemClusters.tsx

@@ -25,9 +25,14 @@ const ToolbarItemClusters: React.FunctionComponent<IToolbarItemClustersProps> =
       onClear={(): void => selectCluster('')}
       selections={selectedClusters}
       isOpen={showOptions}
+      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>
   );

plugins/resources/src/components/page/PageToolbarItemNamespaces.tsx

@@ -43,9 +43,14 @@ const ToolbarItemNamespaces: React.FunctionComponent<IToolbarItemNamespacesProps
       onClear={(): void => selectNamespace('')}
       selections={selectedNamespaces}
       isOpen={showOptions}
+      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>
   );

plugins/resources/src/components/page/PageToolbarItemResources.tsx

@@ -27,6 +27,19 @@ const ToolbarItemResources: React.FunctionComponent<IToolbarItemResourcesProps>
       onClear={(): void => selectResource('')}
       selections={selectedResources}
       isOpen={showOptions}
+      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((key) => (
         <SelectOption