kobsio · ricoberger · Jul 2, 2022 · Jul 2, 2022
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -44,6 +44,7 @@ NOTE: As semantic versioning states all 0.y.z releases can contain breaking chan
 - [#371](https://github.com/kobsio/kobs/pull/#371): [app] Change toolbar handling by replacing the Patternfly `Toolbar` and `ToolbarItem` components with a custom `Toolbar` and `ToolbarItem` component.
 - [#372](https://github.com/kobsio/kobs/pull/#372): [app] Change `hasDivider` property to `PageContentSection` component to explicit enable / disable the diver.
 - [#373](https://github.com/kobsio/kobs/pull/#373): [app] Change behaviour of drawer panels on pages with dashboards.
+- [#377](https://github.com/kobsio/kobs/pull/#377): [app] Change filter for select boxes by always comparing the lower case values.
 
 ## [v0.8.0](https://github.com/kobsio/kobs/releases/tag/v0.8.0) (2022-03-24)
 

diff --git a/plugins/app/src/components/applications/ApplicationsToolbarTags.tsx b/plugins/app/src/components/applications/ApplicationsToolbarTags.tsx
@@ -46,7 +46,7 @@ const ApplicationsToolbarTags: React.FunctionComponent<IApplicationsToolbarTagsP
       onFilter={(e: React.ChangeEvent<HTMLInputElement> | null, value: string): React.ReactElement[] =>
         data
           ? data
-              .filter((tag) => !value || tag.tag.includes(value))
+              .filter((tag) => !value || tag.tag.toLowerCase().includes(value.toLowerCase()))
               .map((tag: ITag) => <SelectOption key={tag.tag} value={tag.tag} />)
           : []
       }

diff --git a/plugins/app/src/components/dashboards/DashboardToolbarVariable.tsx b/plugins/app/src/components/dashboards/DashboardToolbarVariable.tsx
@@ -31,7 +31,7 @@ const DashboardToolbarVariable: React.FunctionComponent<IDashboardToolbarVariabl
       return [
         <SelectGroup label={variable.label || variable.name} key="variable">
           {variable.values
-            .filter((item) => item.includes(value))
+            .filter((item) => item.toLowerCase().includes(value.toLowerCase()))
             .map((item, index) => (
               <SelectOption key={index} value={item} />
             ))}

diff --git a/plugins/app/src/components/resources/ResourcesToolbarClusters.tsx b/plugins/app/src/components/resources/ResourcesToolbarClusters.tsx
@@ -42,7 +42,9 @@ const ResourcesToolbarClusters: React.FunctionComponent<IResourcesToolbarCluster
       const satellites = Object.keys(data);
 
       for (const satellite of satellites) {
-        const filteredClusters = data[satellite].filter((cluster) => cluster.cluster.includes(value));
+        const filteredClusters = data[satellite].filter((cluster) =>
+          cluster.cluster.toLowerCase().includes(value.toLowerCase()),
+        );
         if (filteredClusters.length > 0) {
           clusters.push(
             <SelectGroup label={satellite} key={satellite}>

diff --git a/plugins/app/src/components/resources/ResourcesToolbarNamespaces.tsx b/plugins/app/src/components/resources/ResourcesToolbarNamespaces.tsx
@@ -48,7 +48,7 @@ const ResourcesToolbarNamespaces: React.FunctionComponent<IResourcesToolbarNames
       onFilter={(e: React.ChangeEvent<HTMLInputElement> | null, value: string): React.ReactElement[] =>
         data
           ? data
-              .filter((namespace) => !value || namespace.includes(value))
+              .filter((namespace) => !value || namespace.toLowerCase().includes(value.toLowerCase()))
               .map((namespace: string) => (
                 <SelectOption key={namespace} value={namespace}>
                   {namespace}

diff --git a/plugins/app/src/components/resources/ResourcesToolbarResources.tsx b/plugins/app/src/components/resources/ResourcesToolbarResources.tsx
@@ -46,7 +46,7 @@ const ResourcesToolbarNamespaces: React.FunctionComponent<IResourcesToolbarNames
       onFilter={(e: React.ChangeEvent<HTMLInputElement> | null, value: string): React.ReactElement[] =>
         data
           ? data
-              .filter((resource) => !value || resource.title.includes(value))
+              .filter((resource) => !value || resource.id.toLowerCase().includes(value.toLowerCase()))
               .map((resource: IResource) => (
                 <SelectOption
                   key={resource.id}

diff --git a/plugins/plugin-azure/src/components/costmanagement/CostManagementToolbarItemScope.tsx b/plugins/plugin-azure/src/components/costmanagement/CostManagementToolbarItemScope.tsx
@@ -27,7 +27,7 @@ const CostManagementToolbarItemScope: React.FunctionComponent<ICostManagementToo
       onSelect={(e, value): void => setScope(value as string)}
       onFilter={(e: React.ChangeEvent<HTMLInputElement> | null, value: string): React.ReactElement[] =>
         resourceGroups
-          .filter((resourceGroup) => !value || resourceGroup.includes(value))
+          .filter((resourceGroup) => !value || resourceGroup.toLowerCase().includes(value.toLowerCase()))
           .map((resourceGroup: string) => <SelectOption key={resourceGroup} value={resourceGroup} />)
       }
       selections={scope}

diff --git a/...ugin-azure/src/components/virtualmachinescalesets/DetailsMetricsVirtualMachineToolbar.tsx b/...ugin-azure/src/components/virtualmachinescalesets/DetailsMetricsVirtualMachineToolbar.tsx
@@ -41,7 +41,7 @@ const DetailsMetricsVirtualMachineToolbar: React.FunctionComponent<IDetailsMetri
             onSelect={(e, value): void => changeSelectedVirtualMachine(value as string)}
             onFilter={(e: React.ChangeEvent<HTMLInputElement> | null, value: string): React.ReactElement[] =>
               virtualMachines
-                .filter((virtualMachine) => !value || virtualMachine.includes(value))
+                .filter((virtualMachine) => !value || virtualMachine.toLowerCase().includes(value.toLowerCase()))
                 .map((virtualMachine: string) => (
                   <SelectOption key={virtualMachine} value={virtualMachine}>
                     {virtualMachine}

diff --git a/plugins/plugin-flux/src/components/page/PageToolbarItemClusters.tsx b/plugins/plugin-flux/src/components/page/PageToolbarItemClusters.tsx
@@ -54,7 +54,7 @@ const PageToolbarItemClusters: React.FunctionComponent<IPageToolbarItemClustersP
       onFilter={(e: React.ChangeEvent<HTMLInputElement> | null, value: string): React.ReactElement[] =>
         data
           ? data
-              .filter((cluster) => !value || cluster.includes(value))
+              .filter((cluster) => !value || cluster.toLowerCase().includes(value.toLowerCase()))
               .map((cluster: string) => (
                 <SelectOption key={cluster} value={cluster}>
                   {cluster}

diff --git a/plugins/plugin-flux/src/components/page/PageToolbarItemNamespaces.tsx b/plugins/plugin-flux/src/components/page/PageToolbarItemNamespaces.tsx
@@ -56,7 +56,7 @@ const ResourcesToolbarNamespaces: React.FunctionComponent<IResourcesToolbarNames
       onFilter={(e: React.ChangeEvent<HTMLInputElement> | null, value: string): React.ReactElement[] =>
         data
           ? data
-              .filter((namespace) => !value || namespace.includes(value))
+              .filter((namespace) => !value || namespace.toLowerCase().includes(value.toLowerCase()))
               .map((namespace: string) => (
                 <SelectOption key={namespace} value={namespace}>
                   {namespace}

diff --git a/plugins/plugin-helm/src/components/page/PageToolbarItemClusters.tsx b/plugins/plugin-helm/src/components/page/PageToolbarItemClusters.tsx
@@ -54,7 +54,7 @@ const PageToolbarItemClusters: React.FunctionComponent<IPageToolbarItemClustersP
       onFilter={(e: React.ChangeEvent<HTMLInputElement> | null, value: string): React.ReactElement[] =>
         data
           ? data
-              .filter((cluster) => !value || cluster.includes(value))
+              .filter((cluster) => !value || cluster.toLowerCase().includes(value.toLowerCase()))
               .map((cluster: string) => (
                 <SelectOption key={cluster} value={cluster}>
                   {cluster}

diff --git a/plugins/plugin-helm/src/components/page/PageToolbarItemNamespaces.tsx b/plugins/plugin-helm/src/components/page/PageToolbarItemNamespaces.tsx
@@ -58,7 +58,7 @@ const ResourcesToolbarNamespaces: React.FunctionComponent<IResourcesToolbarNames
       onFilter={(e: React.ChangeEvent<HTMLInputElement> | null, value: string): React.ReactElement[] =>
         data
           ? data
-              .filter((namespace) => !value || namespace.includes(value))
+              .filter((namespace) => !value || namespace.toLowerCase().includes(value.toLowerCase()))
               .map((namespace: string) => (
                 <SelectOption key={namespace} value={namespace}>
                   {namespace}

diff --git a/plugins/plugin-istio/src/components/page/ApplicationsToolbar.tsx b/plugins/plugin-istio/src/components/page/ApplicationsToolbar.tsx
@@ -82,7 +82,7 @@ const PageToolbar: React.FunctionComponent<IPageToolbarProps> = ({
           onFilter={(e: React.ChangeEvent<HTMLInputElement> | null, value: string): React.ReactElement[] =>
             data
               ? data
-                  .filter((namespace) => !value || namespace.includes(value))
+                  .filter((namespace) => !value || namespace.toLowerCase().includes(value.toLowerCase()))
                   .map((namespace: string) => <SelectOption key={namespace} value={namespace} />)
               : []
           }

diff --git a/plugins/plugin-kiali/src/components/page/PageToolbarNamespaces.tsx b/plugins/plugin-kiali/src/components/page/PageToolbarNamespaces.tsx
@@ -54,7 +54,7 @@ const PageToolbarNamespaces: React.FunctionComponent<IPageToolbarNamespacesProps
       onFilter={(e: React.ChangeEvent<HTMLInputElement> | null, value: string): React.ReactElement[] =>
         data
           ? data
-              .filter((ns) => !value || ns.includes(value))
+              .filter((ns) => !value || ns.toLowerCase().includes(value.toLowerCase()))
               .map((namespace: string) => <SelectOption key={namespace} value={namespace} />)
           : []
       }