From 151a393fb5b3a7636af769bedb942b0545dedc5b Mon Sep 17 00:00:00 2001
From: Sebastian Malton <sebastian@malton.name>
Date: Tue, 23 May 2023 10:12:18 -0400
Subject: [PATCH 01/16] feat: Improve UX of namespace select filter

- Add better support for thousands of namespaces

- Add support for mouse only multi-selection

Signed-off-by: Sebastian Malton <sebastian@malton.name>
---
 .../namespace-select-filter-model.tsx         | 150 ++++++------
 .../namespaces/namespace-select-filter.scss   | 117 +++++-----
 .../namespaces/namespace-select-filter.tsx    | 220 +++++++++++++-----
 .../renderer/components/namespaces/store.ts   |  14 ++
 .../window/event-listener.injectable.ts       |   4 +-
 .../utilities/src/type-narrowing.ts           |   3 +-
 6 files changed, 322 insertions(+), 186 deletions(-)

diff --git a/packages/core/src/renderer/components/namespaces/namespace-select-filter-model/namespace-select-filter-model.tsx b/packages/core/src/renderer/components/namespaces/namespace-select-filter-model/namespace-select-filter-model.tsx
index c0ad194dfbc1..8a3cac363c63 100644
--- a/packages/core/src/renderer/components/namespaces/namespace-select-filter-model/namespace-select-filter-model.tsx
+++ b/packages/core/src/renderer/components/namespaces/namespace-select-filter-model/namespace-select-filter-model.tsx
@@ -2,16 +2,14 @@
  * Copyright (c) OpenLens Authors. All rights reserved.
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
-import React from "react";
-import type { IComputedValue } from "mobx";
+import type React from "react";
+import type { IComputedValue, IObservableValue } from "mobx";
 import { observable, action, computed, comparer } from "mobx";
 import type { NamespaceStore } from "../store";
-import type { ActionMeta, MultiValue } from "react-select";
-import { Icon } from "@k8slens/icon";
-import type { SelectOption } from "../../select";
 import { observableCrate } from "@k8slens/utilities";
 import type { IsMultiSelectionKey } from "./is-selection-key.injectable";
 import type { ClusterContext } from "../../../cluster-frame-context/cluster-frame-context";
+import GlobToRegExp from "glob-to-regexp";
 
 interface Dependencies {
   context: ClusterContext;
@@ -22,22 +20,31 @@ interface Dependencies {
 export const selectAllNamespaces = Symbol("all-namespaces-selected");
 
 export type SelectAllNamespaces = typeof selectAllNamespaces;
-export type NamespaceSelectFilterOption = SelectOption<string | SelectAllNamespaces>;
+export interface NamespaceSelectFilterOption {
+  value: string | SelectAllNamespaces;
+  label: string;
+  id: string | SelectAllNamespaces;
+}
 
 export interface NamespaceSelectFilterModel {
-  readonly options: IComputedValue<readonly NamespaceSelectFilterOption[]>;
+  readonly options: IComputedValue<NamespaceSelectFilterOption[]>;
+  readonly filteredOptions: IComputedValue<NamespaceSelectFilterOption[]>;
+  readonly selectedOptions: IComputedValue<NamespaceSelectFilterOption[]>;
   readonly menu: {
     open: () => void;
     close: () => void;
+    toggle: () => void;
     readonly isOpen: IComputedValue<boolean>;
+    readonly hasSelectedAll: IComputedValue<boolean>;
+    onKeyDown: React.KeyboardEventHandler;
+    onKeyUp: React.KeyboardEventHandler;
   };
-  onChange: (newValue: MultiValue<NamespaceSelectFilterOption>, actionMeta: ActionMeta<NamespaceSelectFilterOption>) => void;
-  onClick: () => void;
-  onKeyDown: React.KeyboardEventHandler;
-  onKeyUp: React.KeyboardEventHandler;
+  onClick: (options: NamespaceSelectFilterOption) => void;
+  deselect: (namespace: string) => void;
+  select: (namespace: string) => void;
+  readonly filterText: IObservableValue<string>;
   reset: () => void;
   isOptionSelected: (option: NamespaceSelectFilterOption) => boolean;
-  formatOptionLabel: (option: NamespaceSelectFilterOption) => JSX.Element;
 }
 
 enum SelectMenuState {
@@ -45,6 +52,18 @@ enum SelectMenuState {
   Open = "open",
 }
 
+const filterBasedOnText = (filterText: string) => {
+  const regexp = new RegExp(GlobToRegExp(filterText, { extended: true, flags: "gi" }));
+
+  return (options: NamespaceSelectFilterOption) => {
+    if (options.value === selectAllNamespaces) {
+      return true;
+    }
+
+    return Boolean(options.value.match(regexp));
+  };
+};
+
 export function namespaceSelectFilterModelFor(dependencies: Dependencies): NamespaceSelectFilterModel {
   const { isMultiSelectionKey, namespaceStore, context } = dependencies;
 
@@ -58,6 +77,7 @@ export function namespaceSelectFilterModelFor(dependencies: Dependencies): Names
       didToggle = false;
     },
   }]);
+  const filterText = observable.box("");
   const selectedNames = computed(() => new Set(context.contextNamespaces), {
     equals: comparer.structural,
   });
@@ -74,7 +94,7 @@ export function namespaceSelectFilterModelFor(dependencies: Dependencies): Names
       ? 1
       : -1;
   };
-  const options = computed((): readonly NamespaceSelectFilterOption[] => [
+  const options = computed((): NamespaceSelectFilterOption[] => [
     {
       value: selectAllNamespaces,
       label: "All Namespaces",
@@ -89,6 +109,8 @@ export function namespaceSelectFilterModelFor(dependencies: Dependencies): Names
         id: namespace,
       })),
   ]);
+  const filteredOptions = computed(() => options.get().filter(filterBasedOnText(filterText.get())));
+  const selectedOptions = computed(() => options.get().filter(model.isOptionSelected));
   const menuIsOpen = computed(() => menuState.get() === SelectMenuState.Open);
   const isOptionSelected: NamespaceSelectFilterModel["isOptionSelected"] = (option) => {
     if (option.value === selectAllNamespaces) {
@@ -100,82 +122,66 @@ export function namespaceSelectFilterModelFor(dependencies: Dependencies): Names
 
   const model: NamespaceSelectFilterModel = {
     options,
+    filteredOptions,
+    selectedOptions,
     menu: {
       close: action(() => {
         menuState.set(SelectMenuState.Close);
+        filterText.set("");
       }),
       open: action(() => {
         menuState.set(SelectMenuState.Open);
       }),
+      toggle: () => {
+        if (menuIsOpen.get()) {
+          model.menu.close();
+        } else {
+          model.menu.open();
+        }
+      },
       isOpen: menuIsOpen,
-    },
-    onChange: (_, action) => {
-      switch (action.action) {
-        case "clear":
-          namespaceStore.selectAll();
-          break;
-        case "deselect-option":
-        case "select-option":
-          if (action.option) {
-            didToggle = true;
-
-            if (action.option.value === selectAllNamespaces) {
-              namespaceStore.selectAll();
-            } else if (isMultiSelection) {
-              namespaceStore.toggleSingle(action.option.value);
-            } else {
-              namespaceStore.selectSingle(action.option.value);
-            }
+      hasSelectedAll: computed(() => namespaceStore.areAllSelectedImplicitly),
+      onKeyDown: (event) => {
+        if (isMultiSelectionKey(event)) {
+          isMultiSelection = true;
+        } else if (event.key === "Escape") {
+          model.menu.close();
+        }
+      },
+      onKeyUp: (event) => {
+        if (isMultiSelectionKey(event)) {
+          isMultiSelection = false;
+
+          if (didToggle) {
+            model.menu.close();
           }
-          break;
-      }
+        }
+      },
     },
-    onClick: () => {
-      if (!menuIsOpen.get()) {
-        model.menu.open();
-      } else if (!isMultiSelection) {
+    onClick: action((option) => {
+      if (option.value === selectAllNamespaces) {
+        namespaceStore.selectAll();
+        model.menu.close();
+      } else if (isMultiSelection) {
+        didToggle = true;
+        namespaceStore.toggleSingle(option.value);
+      } else {
+        namespaceStore.selectSingle(option.value);
         model.menu.close();
       }
-    },
-    onKeyDown: (event) => {
-      if (isMultiSelectionKey(event)) {
-        isMultiSelection = true;
-      }
-    },
-    onKeyUp: (event) => {
-      if (isMultiSelectionKey(event)) {
-        isMultiSelection = false;
-
-        if (didToggle) {
-          model.menu.close();
-        }
-      }
-    },
+    }),
+    deselect: action((namespace) => {
+      namespaceStore.deselectSingle(namespace);
+    }),
+    select: action((namespace) => {
+      namespaceStore.includeSingle(namespace);
+    }),
+    filterText,
     reset: action(() => {
       isMultiSelection = false;
       model.menu.close();
     }),
     isOptionSelected,
-    formatOptionLabel: (option) => {
-      if (option.value === selectAllNamespaces) {
-        return <>All Namespaces</>;
-      }
-
-      return (
-        <div className="flex gaps align-center">
-          <Icon small material="layers" />
-          <span>{option.value}</span>
-          {isOptionSelected(option) && (
-            <Icon
-              small
-              material="check"
-              className="box right"
-              data-testid={`namespace-select-filter-option-${option.value}-selected`}
-            />
-          )}
-        </div>
-      );
-    },
   };
 
   return model;
diff --git a/packages/core/src/renderer/components/namespaces/namespace-select-filter.scss b/packages/core/src/renderer/components/namespaces/namespace-select-filter.scss
index f227976b46a7..2eead588e132 100644
--- a/packages/core/src/renderer/components/namespaces/namespace-select-filter.scss
+++ b/packages/core/src/renderer/components/namespaces/namespace-select-filter.scss
@@ -4,75 +4,86 @@
   }
 }
 
-.NamespaceSelectFilterParent {
-  max-width: 300px;
-}
+.namespace-select-filter {
+  width: 300px;
+  position: relative;
+
+  .list-container {
+    position: absolute;
+    top: 30px;
+    z-index: 10;
+    background: var(--mainBackground);
+    border-radius: var(--border-radius);
 
-.NamespaceSelectFilter {
-  --gradientColor: var(--select-menu-bgc);
+    li.option {
+      cursor: pointer;
+      padding: calc(var(--padding) / 2) var(--padding);
+      list-style: none;
 
-  .Select {
-    &__placeholder {
-      white-space: nowrap;
-      overflow: scroll hidden!important;
-      text-overflow: unset!important;
-      margin-left: -8px;
-      padding-left: 8px;
-      margin-right: -8px;
-      padding-right: 8px;
-      line-height: 1.1;
+      &:hover {
+        color: white;
+      }
+
+      .selected-icon:hover {
+        color: var(--buttonAccentBackground);
+      }
 
-      &::-webkit-scrollbar {
-        display: none;
+      .add-selection-icon:hover {
+        color: var(--colorSuccess);
       }
     }
+  }
+
+  .menu {
+    width: 300px;
+    border-radius: var(--border-radius);
+    border: 1px solid;
+    border-color: var(--halfGray);
+    padding: calc(var(--padding) / 2) var(--padding);
+    display: flex;
 
-    &__value-container {
+    .non-icon {
+      width: -webkit-fill-available;
       position: relative;
 
-      &::before, &::after {
-        content: ' ';
-        position: absolute;
-        z-index: 20;
-        display: block;
-        width: 8px;
-        height: var(--font-size);
+      input {
+        width: 100%;
+        background: transparent;
       }
 
-      &::before {
-        left: 0;
-        background: linear-gradient(to right, var(--gradientColor) 0px, transparent);
-      }
+      label {
+        white-space: nowrap;
+        overflow: scroll hidden!important;
+        text-overflow: unset!important;
+        margin-left: -16px;
+        padding-left: 8px;
+        padding-right: 8px;
+        width: calc(100% + 4px);
+        position: absolute;
+        left: 9px;
 
-      &::after {
-        right: 0;
-        background: linear-gradient(to left, var(--gradientColor) 0px, transparent);
+        &::-webkit-scrollbar {
+          display: none;
+        }
       }
-    }
-  }
-}
-
-.NamespaceSelectFilterMenu {
-  right: 0;
 
-  .Select {
-    &__menu-list {
-      max-width: 400px;
-    }
+      .gradient {
+        position: absolute;
+        width: 10px;
+        top: 0;
+        height: 20px;
+        z-index: 21;
 
-    &__option {
-      white-space: normal;
-      word-break: break-all;
-      padding: 4px 8px;
-      border-radius: 3px;
+        &.left {
+          left: -7px;
+          background: linear-gradient(to right, var(--contentColor) 0%, rgba(255, 255, 255, 0) 100%);
+        }
 
-      &--is-selected:not(&--is-focused) {
-        background: transparent;
+        &.right {
+          right: 2px;
+          background: linear-gradient(to left, var(--contentColor) 0%, rgba(255, 255, 255, 0) 100%);
+        }
       }
     }
   }
-
-  .Icon {
-    margin-right: $margin * 0.5;
-  }
 }
diff --git a/packages/core/src/renderer/components/namespaces/namespace-select-filter.tsx b/packages/core/src/renderer/components/namespaces/namespace-select-filter.tsx
index de1c2a8cd663..b22ba43114c0 100644
--- a/packages/core/src/renderer/components/namespaces/namespace-select-filter.tsx
+++ b/packages/core/src/renderer/components/namespaces/namespace-select-filter.tsx
@@ -5,16 +5,17 @@
 
 import "./namespace-select-filter.scss";
 
-import React from "react";
+import React, { useEffect, useRef } from "react";
 import { observer } from "mobx-react";
-import type { PlaceholderProps } from "react-select";
-import { components } from "react-select";
-import type { NamespaceStore } from "./store";
-import { Select } from "../select";
 import { withInjectables } from "@ogre-tools/injectable-react";
-import type { NamespaceSelectFilterModel, NamespaceSelectFilterOption, SelectAllNamespaces } from "./namespace-select-filter-model/namespace-select-filter-model";
+import type { NamespaceSelectFilterModel, NamespaceSelectFilterOption } from "./namespace-select-filter-model/namespace-select-filter-model";
+import { selectAllNamespaces } from "./namespace-select-filter-model/namespace-select-filter-model";
 import namespaceSelectFilterModelInjectable from "./namespace-select-filter-model/namespace-select-filter-model.injectable";
-import namespaceStoreInjectable from "./store.injectable";
+import { VariableSizeList } from "react-window";
+import { Icon } from "../icon";
+import { cssNames, prevDefault } from "@k8slens/utilities";
+import { addWindowEventListener } from "../../window/event-listener.injectable";
+import { TooltipPosition } from "@k8slens/tooltip";
 
 interface NamespaceSelectFilterProps {
   id: string;
@@ -24,72 +25,175 @@ interface Dependencies {
   model: NamespaceSelectFilterModel;
 }
 
-const NonInjectedNamespaceSelectFilter = observer(({ model, id }: Dependencies & NamespaceSelectFilterProps) => (
-  <div
-    onKeyUp={model.onKeyUp}
-    onKeyDown={model.onKeyDown}
-    onClick={model.onClick}
-    className="NamespaceSelectFilterParent"
-    data-testid="namespace-select-filter"
-  >
-    <Select<string | SelectAllNamespaces, NamespaceSelectFilterOption, true>
-      id={id}
-      isMulti={true}
-      isClearable={false}
-      menuIsOpen={model.menu.isOpen.get()}
-      components={{ Placeholder }}
-      closeMenuOnSelect={false}
-      controlShouldRenderValue={false}
-      onChange={model.onChange}
-      onBlur={model.reset}
-      formatOptionLabel={model.formatOptionLabel}
-      options={model.options.get()}
-      className="NamespaceSelect NamespaceSelectFilter"
-      menuClass="NamespaceSelectFilterMenu"
-      isOptionSelected={model.isOptionSelected}
-      hideSelectedOptions={false}
-    />
-  </div>
-));
+const Gradient = ({ type }: { type: "left" | "right" }) => (
+  <div className={cssNames("gradient", type)} />
+);
 
-export const NamespaceSelectFilter = withInjectables<Dependencies, NamespaceSelectFilterProps>(NonInjectedNamespaceSelectFilter, {
-  getProps: (di, props) => ({
-    model: di.inject(namespaceSelectFilterModelInjectable),
-    ...props,
-  }),
+const NamespaceSelectFilterMenu = observer(({ id, model }: Dependencies & NamespaceSelectFilterProps) => {
+  const selectedOptions = model.selectedOptions.get();
+  const prefix = selectedOptions.length === 1
+    ? "Namespace"
+    : "Namespaces";
+
+  return (
+    <div className="menu">
+      <div className="non-icon">
+        <input
+          type="text"
+          id={`${id}-filter`}
+          value={model.filterText.get()}
+          onChange={(event) => model.filterText.set(event.target.value)}
+          onClick={model.menu.open}
+        />
+        <Gradient type="left" />
+        <label htmlFor={`${id}-filter`}>
+          {(
+            model.filterText.get() !== ""
+              ? model.filterText.get()
+              : (
+                model.menu.hasSelectedAll.get()
+                  ? "All namespaces"
+                  : `${prefix}: ${selectedOptions.map(option => option.value).join(", ")}`
+              )
+          )}
+        </label>
+        <Gradient type="right" />
+      </div>
+      <Icon
+        className="expand-icon"
+        material={model.menu.isOpen.get() ? "expand_less" : "expand_more"}
+        onClick={model.menu.toggle}
+      />
+    </div>
+  );
 });
 
-export interface CustomPlaceholderProps extends PlaceholderProps<NamespaceSelectFilterOption, true> {}
+const rowHeight = 29;
 
-interface PlaceholderDependencies {
-  namespaceStore: NamespaceStore;
-}
+const NonInjectedNamespaceSelectFilter = observer(({ model, id }: Dependencies & NamespaceSelectFilterProps) => {
+  const divRef = useRef<HTMLDivElement | null>(null);
 
-const NonInjectedPlaceholder = observer(({ namespaceStore, ...props }: CustomPlaceholderProps & PlaceholderDependencies) => {
-  const getPlaceholder = () => {
-    const namespaces = namespaceStore.contextNamespaces;
+  useEffect(() => {
+    return addWindowEventListener("click", (event) => {
+      if (!model.menu.isOpen.get()) {
+        return;
+      }
 
-    if (namespaceStore.areAllSelectedImplicitly || namespaces.length === 0) {
-      return "All namespaces";
-    }
+      if (divRef.current?.contains(event.target as Node)) {
+        return;
+      }
 
-    const prefix = namespaces.length === 1
-      ? "Namespace"
-      : "Namespaces";
+      model.menu.close();
+    });
+  }, []);
 
-    return `${prefix}: ${namespaces.join(", ")}`;
+  return (
+    <div
+      onKeyUp={model.menu.onKeyUp}
+      onKeyDown={model.menu.onKeyDown}
+      className="namespace-select-filter"
+      data-testid="namespace-select-filter"
+      id={id}
+      ref={divRef}
+      tabIndex={1}
+    >
+      <NamespaceSelectFilterMenu model={model} id={id} />
+      {model.menu.isOpen.get() && (
+        <div
+          className="list-container"
+        >
+          <VariableSizeList
+            className="list"
+            width={300}
+            height={Math.min(model.filteredOptions.get().length * rowHeight, 300)}
+            itemSize={() => rowHeight}
+            itemCount={model.filteredOptions.get().length}
+            itemData={{
+              items: model.filteredOptions.get(),
+              model,
+            }}
+            overscanCount={5}
+            innerElementType={"ul"}
+          >
+            {NamespaceSelectFilterRow}
+          </VariableSizeList>
+        </div>
+      )}
+    </div>
+  );
+});
+
+interface FilterRowProps {
+  index: number;
+  style: React.CSSProperties;
+  data: {
+    model: NamespaceSelectFilterModel;
+    items: NamespaceSelectFilterOption[];
   };
+}
+
+const renderSingleOptionIcons = (namespace: string, option: NamespaceSelectFilterOption, model: NamespaceSelectFilterModel) => {
+  if (model.isOptionSelected(option)) {
+    return (
+      <Icon
+        small
+        material="check"
+        className="selected-icon box right"
+        data-testid={`namespace-select-filter-option-${namespace}-selected`}
+        tooltip={`Remove ${namespace} from selection`}
+        onClick={prevDefault(() => model.deselect(namespace))}
+      />
+    );
+  }
+
+  return (
+    <Icon
+      small
+      material="add_box"
+      className="add-selection-icon box right"
+      data-testid={`namespace-select-filter-option-${namespace}-add-to-selection`}
+      tooltip={`Add ${namespace} to selection`}
+      onClick={prevDefault(() => model.select(namespace))}
+    />
+  );
+};
+
+const NamespaceSelectFilterRow = observer(({ index, style, data: { model, items }}: FilterRowProps) => {
+  const option = items[index];
 
   return (
-    <components.Placeholder {...props}>
-      {getPlaceholder()}
-    </components.Placeholder>
+    <li
+      style={style}
+      className={cssNames("option", "flex gaps align-center", {
+        "all-namespaces": option.value === selectAllNamespaces,
+        "single-namespace": option.value !== selectAllNamespaces,
+      })}
+      onClick={() => model.onClick(option)}
+    >
+      {option.value === selectAllNamespaces
+        ? <span className="data">All Namespaces</span>
+        : (
+          <>
+            <Icon
+              small
+              material="layers"
+              onClick={prevDefault(() => model.onClick(option))}
+              tooltip={{
+                preferredPositions: TooltipPosition.LEFT,
+                children: `Select only ${option.value}`,
+              }}
+            />
+            <span className="data">{option.value}</span>
+            {renderSingleOptionIcons(option.value, option, model)}
+          </>
+        )}
+    </li>
   );
 });
 
-const Placeholder = withInjectables<PlaceholderDependencies, CustomPlaceholderProps>( NonInjectedPlaceholder, {
+export const NamespaceSelectFilter = withInjectables<Dependencies, NamespaceSelectFilterProps>(NonInjectedNamespaceSelectFilter, {
   getProps: (di, props) => ({
-    namespaceStore: di.inject(namespaceStoreInjectable),
+    model: di.inject(namespaceSelectFilterModelInjectable),
     ...props,
   }),
 });
diff --git a/packages/core/src/renderer/components/namespaces/store.ts b/packages/core/src/renderer/components/namespaces/store.ts
index 1bbb4446dd23..cce4a2e4c1e5 100644
--- a/packages/core/src/renderer/components/namespaces/store.ts
+++ b/packages/core/src/renderer/components/namespaces/store.ts
@@ -171,6 +171,20 @@ export class NamespaceStore extends KubeObjectStore<Namespace, NamespaceApi> {
     this.dependencies.storage.set([...nextState]);
   }
 
+  deselectSingle(namespace: string) {
+    const nextState = new Set(this.contextNamespaces);
+
+    nextState.delete(namespace);
+    this.dependencies.storage.set([...nextState]);
+  }
+
+  includeSingle(namespace: string) {
+    const nextState = new Set(this.contextNamespaces);
+
+    nextState.add(namespace);
+    this.dependencies.storage.set([...nextState]);
+  }
+
   /**
    * Makes the given namespace the sole selected namespace
    */
diff --git a/packages/core/src/renderer/window/event-listener.injectable.ts b/packages/core/src/renderer/window/event-listener.injectable.ts
index 631fec116e1f..4be1022424f6 100644
--- a/packages/core/src/renderer/window/event-listener.injectable.ts
+++ b/packages/core/src/renderer/window/event-listener.injectable.ts
@@ -9,10 +9,10 @@ import type { Disposer } from "@k8slens/utilities";
 export type AddWindowEventListener = typeof addWindowEventListener;
 export type WindowEventListener<K extends keyof WindowEventMap> = (this: Window, ev: WindowEventMap[K]) => any;
 
-function addWindowEventListener<K extends keyof WindowEventMap>(type: K, listener: WindowEventListener<K>, options?: boolean | AddEventListenerOptions): Disposer {
+export function addWindowEventListener<K extends keyof WindowEventMap>(type: K, listener: WindowEventListener<K>, options?: boolean | AddEventListenerOptions): Disposer {
   window.addEventListener(type, listener, options);
 
-  return () => void window.removeEventListener(type, listener);
+  return () => void window.removeEventListener(type, listener, options);
 }
 
 const windowAddEventListenerInjectable = getInjectable({
diff --git a/packages/utility-features/utilities/src/type-narrowing.ts b/packages/utility-features/utilities/src/type-narrowing.ts
index 68d526523768..8c545608df25 100644
--- a/packages/utility-features/utilities/src/type-narrowing.ts
+++ b/packages/utility-features/utilities/src/type-narrowing.ts
@@ -123,7 +123,8 @@ export function isDefined<T>(val: T | undefined | null): val is T {
   return val != null;
 }
 
-export function isFunction(val: unknown): val is (...args: unknown[]) => unknown {
+// @ts-expect-error 2677
+export function isFunction<T>(val: T): val is Extract<T, Function>  extends never ? ((...args: unknown[]) => unknown) : Extract<T, Function> {
   return typeof val === "function";
 }
 

From 5811695e492492af23bae7ef5d0de7bb7c5edecb Mon Sep 17 00:00:00 2001
From: Sebastian Malton <sebastian@malton.name>
Date: Wed, 24 May 2023 12:09:46 -0400
Subject: [PATCH 02/16] chore: Start moving namespace-select-filter to own
 folder

Signed-off-by: Sebastian Malton <sebastian@malton.name>
---
 .../src/extensions/renderer-api/components.ts   |  2 +-
 .../config-vertical-pod-autoscalers/vpa.tsx     |  4 ++--
 .../components/helm-releases/releases.tsx       |  2 +-
 .../kube-object-list-layout.tsx                 |  2 +-
 .../is-selection-key.injectable.ts              |  2 +-
 .../namespace-select-filter-model.injectable.ts |  4 ++--
 .../namespace-select-filter-model.tsx           |  4 ++--
 .../namespace-select-filter.scss                |  0
 .../namespace-select-filter.test.tsx            |  4 ++--
 .../namespace-select-filter.tsx                 |  6 +++---
 .../filter-by-namespace.injectable.ts           |  2 +-
 .../namespaces/namespace-select-badge.tsx       | 17 ++++++-----------
 .../components/workloads-overview/overview.tsx  |  2 +-
 13 files changed, 23 insertions(+), 28 deletions(-)
 rename packages/core/src/renderer/components/{namespaces/namespace-select-filter-model => namespace-select-filter}/is-selection-key.injectable.ts (89%)
 rename packages/core/src/renderer/components/{namespaces/namespace-select-filter-model => namespace-select-filter}/namespace-select-filter-model.injectable.ts (85%)
 rename packages/core/src/renderer/components/{namespaces/namespace-select-filter-model => namespace-select-filter}/namespace-select-filter-model.tsx (97%)
 rename packages/core/src/renderer/components/{namespaces => namespace-select-filter}/namespace-select-filter.scss (100%)
 rename packages/core/src/renderer/components/{namespaces => namespace-select-filter}/namespace-select-filter.test.tsx (98%)
 rename packages/core/src/renderer/components/{namespaces => namespace-select-filter}/namespace-select-filter.tsx (97%)
 rename packages/core/src/renderer/components/namespaces/{namespace-select-filter-model => }/filter-by-namespace.injectable.ts (90%)

diff --git a/packages/core/src/extensions/renderer-api/components.ts b/packages/core/src/extensions/renderer-api/components.ts
index 36ce3bba0a64..594c2751b991 100644
--- a/packages/core/src/extensions/renderer-api/components.ts
+++ b/packages/core/src/extensions/renderer-api/components.ts
@@ -94,7 +94,7 @@ export * from "../../renderer/components/stepper";
 export * from "../../renderer/components/wizard";
 export * from "../../renderer/components/workloads-pods/pod-details-list";
 export * from "../../renderer/components/namespaces/namespace-select";
-export * from "../../renderer/components/namespaces/namespace-select-filter";
+export * from "../../renderer/components/namespace-select-filter/namespace-select-filter";
 export * from "../../renderer/components/layout/sub-title";
 export * from "../../renderer/components/input/search-input";
 export * from "../../renderer/components/chart/bar-chart";
diff --git a/packages/core/src/renderer/components/config-vertical-pod-autoscalers/vpa.tsx b/packages/core/src/renderer/components/config-vertical-pod-autoscalers/vpa.tsx
index 242c66a7d247..9cffbd95acaf 100644
--- a/packages/core/src/renderer/components/config-vertical-pod-autoscalers/vpa.tsx
+++ b/packages/core/src/renderer/components/config-vertical-pod-autoscalers/vpa.tsx
@@ -14,9 +14,9 @@ import { KubeObjectStatusIcon } from "../kube-object-status-icon";
 import { SiblingsInTabLayout } from "../layout/siblings-in-tab-layout";
 import { KubeObjectAge } from "../kube-object/age";
 import type { VerticalPodAutoscalerStore } from "./store";
-import type { FilterByNamespace } from "../namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
+import type { FilterByNamespace } from "../namespaces/filter-by-namespace.injectable";
 import { withInjectables } from "@ogre-tools/injectable-react";
-import filterByNamespaceInjectable from "../namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
+import filterByNamespaceInjectable from "../namespaces/filter-by-namespace.injectable";
 import verticalPodAutoscalerStoreInjectable from "./store.injectable";
 
 enum columnId {
diff --git a/packages/core/src/renderer/components/helm-releases/releases.tsx b/packages/core/src/renderer/components/helm-releases/releases.tsx
index 514e7593e7bb..b6a58155e157 100644
--- a/packages/core/src/renderer/components/helm-releases/releases.tsx
+++ b/packages/core/src/renderer/components/helm-releases/releases.tsx
@@ -11,7 +11,7 @@ import type { HelmRelease } from "../../../common/k8s-api/endpoints/helm-release
 import { withInjectables } from "@ogre-tools/injectable-react";
 import type { ItemListStore } from "../item-object-list";
 import { ItemListLayout } from "../item-object-list";
-import { NamespaceSelectFilter } from "../namespaces/namespace-select-filter";
+import { NamespaceSelectFilter } from "../namespace-select-filter/namespace-select-filter";
 import { kebabCase } from "lodash/fp";
 import { HelmReleaseMenu } from "./release-menu";
 import { ReleaseRollbackDialog } from "./dialog/dialog";
diff --git a/packages/core/src/renderer/components/kube-object-list-layout/kube-object-list-layout.tsx b/packages/core/src/renderer/components/kube-object-list-layout/kube-object-list-layout.tsx
index 9280d55ac89e..52c79ccbe249 100644
--- a/packages/core/src/renderer/components/kube-object-list-layout/kube-object-list-layout.tsx
+++ b/packages/core/src/renderer/components/kube-object-list-layout/kube-object-list-layout.tsx
@@ -14,7 +14,7 @@ import type { KubeJsonApiDataFor, KubeObject } from "@k8slens/kube-object";
 import type { ItemListLayoutProps, ItemListStore } from "../item-object-list/list-layout";
 import { ItemListLayout } from "../item-object-list/list-layout";
 import { KubeObjectMenu } from "../kube-object-menu";
-import { NamespaceSelectFilter } from "../namespaces/namespace-select-filter";
+import { NamespaceSelectFilter } from "../namespace-select-filter/namespace-select-filter";
 import { ResourceKindMap, ResourceNames } from "../../utils/rbac";
 import { Icon } from "@k8slens/icon";
 import { TooltipPosition } from "@k8slens/tooltip";
diff --git a/packages/core/src/renderer/components/namespaces/namespace-select-filter-model/is-selection-key.injectable.ts b/packages/core/src/renderer/components/namespace-select-filter/is-selection-key.injectable.ts
similarity index 89%
rename from packages/core/src/renderer/components/namespaces/namespace-select-filter-model/is-selection-key.injectable.ts
rename to packages/core/src/renderer/components/namespace-select-filter/is-selection-key.injectable.ts
index 3562b8a1665b..28393ddc48fd 100644
--- a/packages/core/src/renderer/components/namespaces/namespace-select-filter-model/is-selection-key.injectable.ts
+++ b/packages/core/src/renderer/components/namespace-select-filter/is-selection-key.injectable.ts
@@ -4,7 +4,7 @@
  */
 import { getInjectable } from "@ogre-tools/injectable";
 import type React from "react";
-import isMacInjectable from "../../../../common/vars/is-mac.injectable";
+import isMacInjectable from "../../../common/vars/is-mac.injectable";
 
 export type IsMultiSelectionKey = (event: React.KeyboardEvent) => boolean;
 
diff --git a/packages/core/src/renderer/components/namespaces/namespace-select-filter-model/namespace-select-filter-model.injectable.ts b/packages/core/src/renderer/components/namespace-select-filter/namespace-select-filter-model.injectable.ts
similarity index 85%
rename from packages/core/src/renderer/components/namespaces/namespace-select-filter-model/namespace-select-filter-model.injectable.ts
rename to packages/core/src/renderer/components/namespace-select-filter/namespace-select-filter-model.injectable.ts
index d84292410b56..b73b339ff2bd 100644
--- a/packages/core/src/renderer/components/namespaces/namespace-select-filter-model/namespace-select-filter-model.injectable.ts
+++ b/packages/core/src/renderer/components/namespace-select-filter/namespace-select-filter-model.injectable.ts
@@ -4,9 +4,9 @@
  */
 import { namespaceSelectFilterModelFor } from "./namespace-select-filter-model";
 import { getInjectable } from "@ogre-tools/injectable";
-import namespaceStoreInjectable from "../store.injectable";
+import namespaceStoreInjectable from "../namespaces/store.injectable";
 import isMultiSelectionKeyInjectable from "./is-selection-key.injectable";
-import clusterFrameContextForNamespacedResourcesInjectable from "../../../cluster-frame-context/for-namespaced-resources.injectable";
+import clusterFrameContextForNamespacedResourcesInjectable from "../../cluster-frame-context/for-namespaced-resources.injectable";
 
 const namespaceSelectFilterModelInjectable = getInjectable({
   id: "namespace-select-filter-model",
diff --git a/packages/core/src/renderer/components/namespaces/namespace-select-filter-model/namespace-select-filter-model.tsx b/packages/core/src/renderer/components/namespace-select-filter/namespace-select-filter-model.tsx
similarity index 97%
rename from packages/core/src/renderer/components/namespaces/namespace-select-filter-model/namespace-select-filter-model.tsx
rename to packages/core/src/renderer/components/namespace-select-filter/namespace-select-filter-model.tsx
index 8a3cac363c63..ae56cdc40a4a 100644
--- a/packages/core/src/renderer/components/namespaces/namespace-select-filter-model/namespace-select-filter-model.tsx
+++ b/packages/core/src/renderer/components/namespace-select-filter/namespace-select-filter-model.tsx
@@ -5,10 +5,10 @@
 import type React from "react";
 import type { IComputedValue, IObservableValue } from "mobx";
 import { observable, action, computed, comparer } from "mobx";
-import type { NamespaceStore } from "../store";
+import type { NamespaceStore } from "../namespaces/store";
 import { observableCrate } from "@k8slens/utilities";
 import type { IsMultiSelectionKey } from "./is-selection-key.injectable";
-import type { ClusterContext } from "../../../cluster-frame-context/cluster-frame-context";
+import type { ClusterContext } from "../../cluster-frame-context/cluster-frame-context";
 import GlobToRegExp from "glob-to-regexp";
 
 interface Dependencies {
diff --git a/packages/core/src/renderer/components/namespaces/namespace-select-filter.scss b/packages/core/src/renderer/components/namespace-select-filter/namespace-select-filter.scss
similarity index 100%
rename from packages/core/src/renderer/components/namespaces/namespace-select-filter.scss
rename to packages/core/src/renderer/components/namespace-select-filter/namespace-select-filter.scss
diff --git a/packages/core/src/renderer/components/namespaces/namespace-select-filter.test.tsx b/packages/core/src/renderer/components/namespace-select-filter/namespace-select-filter.test.tsx
similarity index 98%
rename from packages/core/src/renderer/components/namespaces/namespace-select-filter.test.tsx
rename to packages/core/src/renderer/components/namespace-select-filter/namespace-select-filter.test.tsx
index a07bb6c981ac..c5567e2da658 100644
--- a/packages/core/src/renderer/components/namespaces/namespace-select-filter.test.tsx
+++ b/packages/core/src/renderer/components/namespace-select-filter/namespace-select-filter.test.tsx
@@ -24,8 +24,8 @@ import type { Disposer } from "@k8slens/utilities";
 import { disposer } from "@k8slens/utilities";
 import { renderFor } from "../test-utils/renderFor";
 import { NamespaceSelectFilter } from "./namespace-select-filter";
-import type { NamespaceStore } from "./store";
-import namespaceStoreInjectable from "./store.injectable";
+import type { NamespaceStore } from "../namespaces/store";
+import namespaceStoreInjectable from "../namespaces/store.injectable";
 
 function createNamespace(name: string): Namespace {
   return new Namespace({
diff --git a/packages/core/src/renderer/components/namespaces/namespace-select-filter.tsx b/packages/core/src/renderer/components/namespace-select-filter/namespace-select-filter.tsx
similarity index 97%
rename from packages/core/src/renderer/components/namespaces/namespace-select-filter.tsx
rename to packages/core/src/renderer/components/namespace-select-filter/namespace-select-filter.tsx
index b22ba43114c0..884188507d53 100644
--- a/packages/core/src/renderer/components/namespaces/namespace-select-filter.tsx
+++ b/packages/core/src/renderer/components/namespace-select-filter/namespace-select-filter.tsx
@@ -8,9 +8,9 @@ import "./namespace-select-filter.scss";
 import React, { useEffect, useRef } from "react";
 import { observer } from "mobx-react";
 import { withInjectables } from "@ogre-tools/injectable-react";
-import type { NamespaceSelectFilterModel, NamespaceSelectFilterOption } from "./namespace-select-filter-model/namespace-select-filter-model";
-import { selectAllNamespaces } from "./namespace-select-filter-model/namespace-select-filter-model";
-import namespaceSelectFilterModelInjectable from "./namespace-select-filter-model/namespace-select-filter-model.injectable";
+import type { NamespaceSelectFilterModel, NamespaceSelectFilterOption } from "./namespace-select-filter-model";
+import { selectAllNamespaces } from "./namespace-select-filter-model";
+import namespaceSelectFilterModelInjectable from "./namespace-select-filter-model.injectable";
 import { VariableSizeList } from "react-window";
 import { Icon } from "../icon";
 import { cssNames, prevDefault } from "@k8slens/utilities";
diff --git a/packages/core/src/renderer/components/namespaces/namespace-select-filter-model/filter-by-namespace.injectable.ts b/packages/core/src/renderer/components/namespaces/filter-by-namespace.injectable.ts
similarity index 90%
rename from packages/core/src/renderer/components/namespaces/namespace-select-filter-model/filter-by-namespace.injectable.ts
rename to packages/core/src/renderer/components/namespaces/filter-by-namespace.injectable.ts
index fff1c37202f8..4848cb562460 100644
--- a/packages/core/src/renderer/components/namespaces/namespace-select-filter-model/filter-by-namespace.injectable.ts
+++ b/packages/core/src/renderer/components/namespaces/filter-by-namespace.injectable.ts
@@ -3,7 +3,7 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 import { getInjectable } from "@ogre-tools/injectable";
-import namespaceStoreInjectable from "../store.injectable";
+import namespaceStoreInjectable from "./store.injectable";
 
 export type FilterByNamespace = (namespace: string) => void;
 
diff --git a/packages/core/src/renderer/components/namespaces/namespace-select-badge.tsx b/packages/core/src/renderer/components/namespaces/namespace-select-badge.tsx
index 088cfe603e97..97020e02887a 100644
--- a/packages/core/src/renderer/components/namespaces/namespace-select-badge.tsx
+++ b/packages/core/src/renderer/components/namespaces/namespace-select-badge.tsx
@@ -8,11 +8,8 @@ import React from "react";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import type { BadgeProps } from "../badge";
 import { Badge } from "../badge";
-import type {
-  FilterByNamespace,
-} from "./namespace-select-filter-model/filter-by-namespace.injectable";
-import filterByNamespaceInjectable
-  from "./namespace-select-filter-model/filter-by-namespace.injectable";
+import type { FilterByNamespace } from "./filter-by-namespace.injectable";
+import filterByNamespaceInjectable from "./filter-by-namespace.injectable";
 import { prevDefault, cssNames } from "@k8slens/utilities";
 
 export interface NamespaceSelectBadgeProps extends BadgeProps {
@@ -49,10 +46,8 @@ export function NamespaceSelectBadgeNonInjected(
 }
 
 export const NamespaceSelectBadge = withInjectables<Dependencies, NamespaceSelectBadgeProps>(NamespaceSelectBadgeNonInjected, {
-  getProps(di, props) {
-    return {
-      ...props,
-      filterByNamespace: di.inject(filterByNamespaceInjectable),
-    };
-  },
+  getProps: (di, props) => ({
+    ...props,
+    filterByNamespace: di.inject(filterByNamespaceInjectable),
+  }),
 });
diff --git a/packages/core/src/renderer/components/workloads-overview/overview.tsx b/packages/core/src/renderer/components/workloads-overview/overview.tsx
index 3ea0a8c2d71a..39d4601fefa4 100644
--- a/packages/core/src/renderer/components/workloads-overview/overview.tsx
+++ b/packages/core/src/renderer/components/workloads-overview/overview.tsx
@@ -13,7 +13,7 @@ import type { JobStore } from "../workloads-jobs/store";
 import type { CronJobStore } from "../workloads-cronjobs/store";
 import type { IComputedValue } from "mobx";
 import { makeObservable, observable, reaction } from "mobx";
-import { NamespaceSelectFilter } from "../namespaces/namespace-select-filter";
+import { NamespaceSelectFilter } from "../namespace-select-filter/namespace-select-filter";
 import { Icon } from "@k8slens/icon";
 import { TooltipPosition } from "@k8slens/tooltip";
 import { withInjectables } from "@ogre-tools/injectable-react";

From 8fc9fc7a6663f527446050da47a71fbed313f285 Mon Sep 17 00:00:00 2001
From: Sebastian Malton <sebastian@malton.name>
Date: Wed, 24 May 2023 12:10:27 -0400
Subject: [PATCH 03/16] chore: Refactor isSelectionKey

Signed-off-by: Sebastian Malton <sebastian@malton.name>
---
 .../namespace-select-filter/is-selection-key.injectable.ts   | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/core/src/renderer/components/namespace-select-filter/is-selection-key.injectable.ts b/packages/core/src/renderer/components/namespace-select-filter/is-selection-key.injectable.ts
index 28393ddc48fd..25779bcc521c 100644
--- a/packages/core/src/renderer/components/namespace-select-filter/is-selection-key.injectable.ts
+++ b/packages/core/src/renderer/components/namespace-select-filter/is-selection-key.injectable.ts
@@ -12,10 +12,9 @@ const isMultiSelectionKeyInjectable = getInjectable({
   id: "is-multi-selection-key",
   instantiate: (di): IsMultiSelectionKey => {
     const isMac = di.inject(isMacInjectable);
+    const specificKey = isMac ? "Meta" : "Control";
 
-    return isMac
-      ? ({ key }) => key === "Meta"
-      : ({ key }) => key === "Control";
+    return ({ key }) => key === specificKey;
   },
 });
 

From b619eb56d8c3e178b78973363613d128e7a656d5 Mon Sep 17 00:00:00 2001
From: Sebastian Malton <sebastian@malton.name>
Date: Wed, 24 May 2023 12:13:19 -0400
Subject: [PATCH 04/16] chore: Consolidate namespace-select-filter model into
 single file

Signed-off-by: Sebastian Malton <sebastian@malton.name>
---
 .../model.injectable.ts                       | 191 ++++++++++++++++++
 ...amespace-select-filter-model.injectable.ts |  21 --
 .../namespace-select-filter-model.tsx         | 188 -----------------
 .../namespace-select-filter.tsx               |   5 +-
 4 files changed, 193 insertions(+), 212 deletions(-)
 create mode 100644 packages/core/src/renderer/components/namespace-select-filter/model.injectable.ts
 delete mode 100644 packages/core/src/renderer/components/namespace-select-filter/namespace-select-filter-model.injectable.ts
 delete mode 100644 packages/core/src/renderer/components/namespace-select-filter/namespace-select-filter-model.tsx

diff --git a/packages/core/src/renderer/components/namespace-select-filter/model.injectable.ts b/packages/core/src/renderer/components/namespace-select-filter/model.injectable.ts
new file mode 100644
index 000000000000..7594de276fe4
--- /dev/null
+++ b/packages/core/src/renderer/components/namespace-select-filter/model.injectable.ts
@@ -0,0 +1,191 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import namespaceStoreInjectable from "../namespaces/store.injectable";
+import isMultiSelectionKeyInjectable from "./is-selection-key.injectable";
+import clusterFrameContextForNamespacedResourcesInjectable from "../../cluster-frame-context/for-namespaced-resources.injectable";
+import type { IComputedValue, IObservableValue } from "mobx";
+import { action, comparer, computed, observable } from "mobx";
+import GlobToRegExp from "glob-to-regexp";
+import { observableCrate } from "@k8slens/utilities";
+
+
+export const selectAllNamespaces = Symbol("all-namespaces-selected");
+
+export type SelectAllNamespaces = typeof selectAllNamespaces;
+export interface NamespaceSelectFilterOption {
+  value: string | SelectAllNamespaces;
+  label: string;
+  id: string | SelectAllNamespaces;
+}
+
+export interface NamespaceSelectFilterModel {
+  readonly options: IComputedValue<NamespaceSelectFilterOption[]>;
+  readonly filteredOptions: IComputedValue<NamespaceSelectFilterOption[]>;
+  readonly selectedOptions: IComputedValue<NamespaceSelectFilterOption[]>;
+  readonly menu: {
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+    readonly isOpen: IComputedValue<boolean>;
+    readonly hasSelectedAll: IComputedValue<boolean>;
+    onKeyDown: React.KeyboardEventHandler;
+    onKeyUp: React.KeyboardEventHandler;
+  };
+  onClick: (options: NamespaceSelectFilterOption) => void;
+  deselect: (namespace: string) => void;
+  select: (namespace: string) => void;
+  readonly filterText: IObservableValue<string>;
+  reset: () => void;
+  isOptionSelected: (option: NamespaceSelectFilterOption) => boolean;
+}
+
+enum SelectMenuState {
+  Close = "close",
+  Open = "open",
+}
+
+const filterBasedOnText = (filterText: string) => {
+  const regexp = new RegExp(GlobToRegExp(filterText, { extended: true, flags: "gi" }));
+
+  return (options: NamespaceSelectFilterOption) => {
+    if (options.value === selectAllNamespaces) {
+      return true;
+    }
+
+    return Boolean(options.value.match(regexp));
+  };
+};
+
+const namespaceSelectFilterModelInjectable = getInjectable({
+  id: "namespace-select-filter-model",
+
+  instantiate: (di) => {
+    const namespaceStore = di.inject(namespaceStoreInjectable);
+    const isMultiSelectionKey = di.inject(isMultiSelectionKeyInjectable);
+    const context = di.inject(clusterFrameContextForNamespacedResourcesInjectable);
+
+    let didToggle = false;
+    let isMultiSelection = false;
+    const menuState = observableCrate(SelectMenuState.Close, [{
+      from: SelectMenuState.Close,
+      to: SelectMenuState.Open,
+      onTransition: () => {
+        optionsSortingSelected.replace(selectedNames.get());
+        didToggle = false;
+      },
+    }]);
+    const filterText = observable.box("");
+    const selectedNames = computed(() => new Set(context.contextNamespaces), {
+      equals: comparer.structural,
+    });
+    const optionsSortingSelected = observable.set(selectedNames.get());
+    const sortNamespacesByIfTheyHaveBeenSelected = (left: string, right: string) => {
+      const isLeftSelected = optionsSortingSelected.has(left);
+      const isRightSelected = optionsSortingSelected.has(right);
+
+      if (isLeftSelected === isRightSelected) {
+        return 0;
+      }
+
+      return isRightSelected
+        ? 1
+        : -1;
+    };
+    const options = computed((): NamespaceSelectFilterOption[] => [
+      {
+        value: selectAllNamespaces,
+        label: "All Namespaces",
+        id: "all-namespaces",
+      },
+      ...context
+        .allNamespaces
+        .sort(sortNamespacesByIfTheyHaveBeenSelected)
+        .map(namespace => ({
+          value: namespace,
+          label: namespace,
+          id: namespace,
+        })),
+    ]);
+    const filteredOptions = computed(() => options.get().filter(filterBasedOnText(filterText.get())));
+    const selectedOptions = computed(() => options.get().filter(model.isOptionSelected));
+    const menuIsOpen = computed(() => menuState.get() === SelectMenuState.Open);
+    const isOptionSelected: NamespaceSelectFilterModel["isOptionSelected"] = (option) => {
+      if (option.value === selectAllNamespaces) {
+        return false;
+      }
+
+      return selectedNames.get().has(option.value);
+    };
+
+    const model: NamespaceSelectFilterModel = {
+      options,
+      filteredOptions,
+      selectedOptions,
+      menu: {
+        close: action(() => {
+          menuState.set(SelectMenuState.Close);
+          filterText.set("");
+        }),
+        open: action(() => {
+          menuState.set(SelectMenuState.Open);
+        }),
+        toggle: () => {
+          if (menuIsOpen.get()) {
+            model.menu.close();
+          } else {
+            model.menu.open();
+          }
+        },
+        isOpen: menuIsOpen,
+        hasSelectedAll: computed(() => namespaceStore.areAllSelectedImplicitly),
+        onKeyDown: (event) => {
+          if (isMultiSelectionKey(event)) {
+            isMultiSelection = true;
+          } else if (event.key === "Escape") {
+            model.menu.close();
+          }
+        },
+        onKeyUp: (event) => {
+          if (isMultiSelectionKey(event)) {
+            isMultiSelection = false;
+
+            if (didToggle) {
+              model.menu.close();
+            }
+          }
+        },
+      },
+      onClick: action((option) => {
+        if (option.value === selectAllNamespaces) {
+          namespaceStore.selectAll();
+          model.menu.close();
+        } else if (isMultiSelection) {
+          didToggle = true;
+          namespaceStore.toggleSingle(option.value);
+        } else {
+          namespaceStore.selectSingle(option.value);
+          model.menu.close();
+        }
+      }),
+      deselect: action((namespace) => {
+        namespaceStore.deselectSingle(namespace);
+      }),
+      select: action((namespace) => {
+        namespaceStore.includeSingle(namespace);
+      }),
+      filterText,
+      reset: action(() => {
+        isMultiSelection = false;
+        model.menu.close();
+      }),
+      isOptionSelected,
+    };
+
+    return model;
+  },
+});
+
+export default namespaceSelectFilterModelInjectable;
diff --git a/packages/core/src/renderer/components/namespace-select-filter/namespace-select-filter-model.injectable.ts b/packages/core/src/renderer/components/namespace-select-filter/namespace-select-filter-model.injectable.ts
deleted file mode 100644
index b73b339ff2bd..000000000000
--- a/packages/core/src/renderer/components/namespace-select-filter/namespace-select-filter-model.injectable.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-import { namespaceSelectFilterModelFor } from "./namespace-select-filter-model";
-import { getInjectable } from "@ogre-tools/injectable";
-import namespaceStoreInjectable from "../namespaces/store.injectable";
-import isMultiSelectionKeyInjectable from "./is-selection-key.injectable";
-import clusterFrameContextForNamespacedResourcesInjectable from "../../cluster-frame-context/for-namespaced-resources.injectable";
-
-const namespaceSelectFilterModelInjectable = getInjectable({
-  id: "namespace-select-filter-model",
-
-  instantiate: (di) => namespaceSelectFilterModelFor({
-    namespaceStore: di.inject(namespaceStoreInjectable),
-    isMultiSelectionKey: di.inject(isMultiSelectionKeyInjectable),
-    context: di.inject(clusterFrameContextForNamespacedResourcesInjectable),
-  }),
-});
-
-export default namespaceSelectFilterModelInjectable;
diff --git a/packages/core/src/renderer/components/namespace-select-filter/namespace-select-filter-model.tsx b/packages/core/src/renderer/components/namespace-select-filter/namespace-select-filter-model.tsx
deleted file mode 100644
index ae56cdc40a4a..000000000000
--- a/packages/core/src/renderer/components/namespace-select-filter/namespace-select-filter-model.tsx
+++ /dev/null
@@ -1,188 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-import type React from "react";
-import type { IComputedValue, IObservableValue } from "mobx";
-import { observable, action, computed, comparer } from "mobx";
-import type { NamespaceStore } from "../namespaces/store";
-import { observableCrate } from "@k8slens/utilities";
-import type { IsMultiSelectionKey } from "./is-selection-key.injectable";
-import type { ClusterContext } from "../../cluster-frame-context/cluster-frame-context";
-import GlobToRegExp from "glob-to-regexp";
-
-interface Dependencies {
-  context: ClusterContext;
-  namespaceStore: NamespaceStore;
-  isMultiSelectionKey: IsMultiSelectionKey;
-}
-
-export const selectAllNamespaces = Symbol("all-namespaces-selected");
-
-export type SelectAllNamespaces = typeof selectAllNamespaces;
-export interface NamespaceSelectFilterOption {
-  value: string | SelectAllNamespaces;
-  label: string;
-  id: string | SelectAllNamespaces;
-}
-
-export interface NamespaceSelectFilterModel {
-  readonly options: IComputedValue<NamespaceSelectFilterOption[]>;
-  readonly filteredOptions: IComputedValue<NamespaceSelectFilterOption[]>;
-  readonly selectedOptions: IComputedValue<NamespaceSelectFilterOption[]>;
-  readonly menu: {
-    open: () => void;
-    close: () => void;
-    toggle: () => void;
-    readonly isOpen: IComputedValue<boolean>;
-    readonly hasSelectedAll: IComputedValue<boolean>;
-    onKeyDown: React.KeyboardEventHandler;
-    onKeyUp: React.KeyboardEventHandler;
-  };
-  onClick: (options: NamespaceSelectFilterOption) => void;
-  deselect: (namespace: string) => void;
-  select: (namespace: string) => void;
-  readonly filterText: IObservableValue<string>;
-  reset: () => void;
-  isOptionSelected: (option: NamespaceSelectFilterOption) => boolean;
-}
-
-enum SelectMenuState {
-  Close = "close",
-  Open = "open",
-}
-
-const filterBasedOnText = (filterText: string) => {
-  const regexp = new RegExp(GlobToRegExp(filterText, { extended: true, flags: "gi" }));
-
-  return (options: NamespaceSelectFilterOption) => {
-    if (options.value === selectAllNamespaces) {
-      return true;
-    }
-
-    return Boolean(options.value.match(regexp));
-  };
-};
-
-export function namespaceSelectFilterModelFor(dependencies: Dependencies): NamespaceSelectFilterModel {
-  const { isMultiSelectionKey, namespaceStore, context } = dependencies;
-
-  let didToggle = false;
-  let isMultiSelection = false;
-  const menuState = observableCrate(SelectMenuState.Close, [{
-    from: SelectMenuState.Close,
-    to: SelectMenuState.Open,
-    onTransition: () => {
-      optionsSortingSelected.replace(selectedNames.get());
-      didToggle = false;
-    },
-  }]);
-  const filterText = observable.box("");
-  const selectedNames = computed(() => new Set(context.contextNamespaces), {
-    equals: comparer.structural,
-  });
-  const optionsSortingSelected = observable.set(selectedNames.get());
-  const sortNamespacesByIfTheyHaveBeenSelected = (left: string, right: string) => {
-    const isLeftSelected = optionsSortingSelected.has(left);
-    const isRightSelected = optionsSortingSelected.has(right);
-
-    if (isLeftSelected === isRightSelected) {
-      return 0;
-    }
-
-    return isRightSelected
-      ? 1
-      : -1;
-  };
-  const options = computed((): NamespaceSelectFilterOption[] => [
-    {
-      value: selectAllNamespaces,
-      label: "All Namespaces",
-      id: "all-namespaces",
-    },
-    ...context
-      .allNamespaces
-      .sort(sortNamespacesByIfTheyHaveBeenSelected)
-      .map(namespace => ({
-        value: namespace,
-        label: namespace,
-        id: namespace,
-      })),
-  ]);
-  const filteredOptions = computed(() => options.get().filter(filterBasedOnText(filterText.get())));
-  const selectedOptions = computed(() => options.get().filter(model.isOptionSelected));
-  const menuIsOpen = computed(() => menuState.get() === SelectMenuState.Open);
-  const isOptionSelected: NamespaceSelectFilterModel["isOptionSelected"] = (option) => {
-    if (option.value === selectAllNamespaces) {
-      return false;
-    }
-
-    return selectedNames.get().has(option.value);
-  };
-
-  const model: NamespaceSelectFilterModel = {
-    options,
-    filteredOptions,
-    selectedOptions,
-    menu: {
-      close: action(() => {
-        menuState.set(SelectMenuState.Close);
-        filterText.set("");
-      }),
-      open: action(() => {
-        menuState.set(SelectMenuState.Open);
-      }),
-      toggle: () => {
-        if (menuIsOpen.get()) {
-          model.menu.close();
-        } else {
-          model.menu.open();
-        }
-      },
-      isOpen: menuIsOpen,
-      hasSelectedAll: computed(() => namespaceStore.areAllSelectedImplicitly),
-      onKeyDown: (event) => {
-        if (isMultiSelectionKey(event)) {
-          isMultiSelection = true;
-        } else if (event.key === "Escape") {
-          model.menu.close();
-        }
-      },
-      onKeyUp: (event) => {
-        if (isMultiSelectionKey(event)) {
-          isMultiSelection = false;
-
-          if (didToggle) {
-            model.menu.close();
-          }
-        }
-      },
-    },
-    onClick: action((option) => {
-      if (option.value === selectAllNamespaces) {
-        namespaceStore.selectAll();
-        model.menu.close();
-      } else if (isMultiSelection) {
-        didToggle = true;
-        namespaceStore.toggleSingle(option.value);
-      } else {
-        namespaceStore.selectSingle(option.value);
-        model.menu.close();
-      }
-    }),
-    deselect: action((namespace) => {
-      namespaceStore.deselectSingle(namespace);
-    }),
-    select: action((namespace) => {
-      namespaceStore.includeSingle(namespace);
-    }),
-    filterText,
-    reset: action(() => {
-      isMultiSelection = false;
-      model.menu.close();
-    }),
-    isOptionSelected,
-  };
-
-  return model;
-}
diff --git a/packages/core/src/renderer/components/namespace-select-filter/namespace-select-filter.tsx b/packages/core/src/renderer/components/namespace-select-filter/namespace-select-filter.tsx
index 884188507d53..56c45cea5a40 100644
--- a/packages/core/src/renderer/components/namespace-select-filter/namespace-select-filter.tsx
+++ b/packages/core/src/renderer/components/namespace-select-filter/namespace-select-filter.tsx
@@ -8,9 +8,8 @@ import "./namespace-select-filter.scss";
 import React, { useEffect, useRef } from "react";
 import { observer } from "mobx-react";
 import { withInjectables } from "@ogre-tools/injectable-react";
-import type { NamespaceSelectFilterModel, NamespaceSelectFilterOption } from "./namespace-select-filter-model";
-import { selectAllNamespaces } from "./namespace-select-filter-model";
-import namespaceSelectFilterModelInjectable from "./namespace-select-filter-model.injectable";
+import type { NamespaceSelectFilterModel, NamespaceSelectFilterOption } from "./model.injectable";
+import namespaceSelectFilterModelInjectable, { selectAllNamespaces } from "./model.injectable";
 import { VariableSizeList } from "react-window";
 import { Icon } from "../icon";
 import { cssNames, prevDefault } from "@k8slens/utilities";

From ce11ef0a2e5fc054c3b856232bb6514447d7d442 Mon Sep 17 00:00:00 2001
From: Sebastian Malton <sebastian@malton.name>
Date: Wed, 24 May 2023 12:13:51 -0400
Subject: [PATCH 05/16] chore: Rename namespace-select-filter component file

Signed-off-by: Sebastian Malton <sebastian@malton.name>
---
 packages/core/src/extensions/renderer-api/components.ts         | 2 +-
 .../core/src/renderer/components/helm-releases/releases.tsx     | 2 +-
 .../kube-object-list-layout/kube-object-list-layout.tsx         | 2 +-
 .../{namespace-select-filter.tsx => component.tsx}              | 0
 .../namespace-select-filter/namespace-select-filter.test.tsx    | 2 +-
 .../src/renderer/components/workloads-overview/overview.tsx     | 2 +-
 6 files changed, 5 insertions(+), 5 deletions(-)
 rename packages/core/src/renderer/components/namespace-select-filter/{namespace-select-filter.tsx => component.tsx} (100%)

diff --git a/packages/core/src/extensions/renderer-api/components.ts b/packages/core/src/extensions/renderer-api/components.ts
index 594c2751b991..2d1a89112d2b 100644
--- a/packages/core/src/extensions/renderer-api/components.ts
+++ b/packages/core/src/extensions/renderer-api/components.ts
@@ -94,7 +94,7 @@ export * from "../../renderer/components/stepper";
 export * from "../../renderer/components/wizard";
 export * from "../../renderer/components/workloads-pods/pod-details-list";
 export * from "../../renderer/components/namespaces/namespace-select";
-export * from "../../renderer/components/namespace-select-filter/namespace-select-filter";
+export * from "../../renderer/components/namespace-select-filter/component";
 export * from "../../renderer/components/layout/sub-title";
 export * from "../../renderer/components/input/search-input";
 export * from "../../renderer/components/chart/bar-chart";
diff --git a/packages/core/src/renderer/components/helm-releases/releases.tsx b/packages/core/src/renderer/components/helm-releases/releases.tsx
index b6a58155e157..9a31a9e10b77 100644
--- a/packages/core/src/renderer/components/helm-releases/releases.tsx
+++ b/packages/core/src/renderer/components/helm-releases/releases.tsx
@@ -11,7 +11,7 @@ import type { HelmRelease } from "../../../common/k8s-api/endpoints/helm-release
 import { withInjectables } from "@ogre-tools/injectable-react";
 import type { ItemListStore } from "../item-object-list";
 import { ItemListLayout } from "../item-object-list";
-import { NamespaceSelectFilter } from "../namespace-select-filter/namespace-select-filter";
+import { NamespaceSelectFilter } from "../namespace-select-filter/component";
 import { kebabCase } from "lodash/fp";
 import { HelmReleaseMenu } from "./release-menu";
 import { ReleaseRollbackDialog } from "./dialog/dialog";
diff --git a/packages/core/src/renderer/components/kube-object-list-layout/kube-object-list-layout.tsx b/packages/core/src/renderer/components/kube-object-list-layout/kube-object-list-layout.tsx
index 52c79ccbe249..72e393fe73b7 100644
--- a/packages/core/src/renderer/components/kube-object-list-layout/kube-object-list-layout.tsx
+++ b/packages/core/src/renderer/components/kube-object-list-layout/kube-object-list-layout.tsx
@@ -14,7 +14,7 @@ import type { KubeJsonApiDataFor, KubeObject } from "@k8slens/kube-object";
 import type { ItemListLayoutProps, ItemListStore } from "../item-object-list/list-layout";
 import { ItemListLayout } from "../item-object-list/list-layout";
 import { KubeObjectMenu } from "../kube-object-menu";
-import { NamespaceSelectFilter } from "../namespace-select-filter/namespace-select-filter";
+import { NamespaceSelectFilter } from "../namespace-select-filter/component";
 import { ResourceKindMap, ResourceNames } from "../../utils/rbac";
 import { Icon } from "@k8slens/icon";
 import { TooltipPosition } from "@k8slens/tooltip";
diff --git a/packages/core/src/renderer/components/namespace-select-filter/namespace-select-filter.tsx b/packages/core/src/renderer/components/namespace-select-filter/component.tsx
similarity index 100%
rename from packages/core/src/renderer/components/namespace-select-filter/namespace-select-filter.tsx
rename to packages/core/src/renderer/components/namespace-select-filter/component.tsx
diff --git a/packages/core/src/renderer/components/namespace-select-filter/namespace-select-filter.test.tsx b/packages/core/src/renderer/components/namespace-select-filter/namespace-select-filter.test.tsx
index c5567e2da658..6f24d416ce59 100644
--- a/packages/core/src/renderer/components/namespace-select-filter/namespace-select-filter.test.tsx
+++ b/packages/core/src/renderer/components/namespace-select-filter/namespace-select-filter.test.tsx
@@ -23,7 +23,7 @@ import storesAndApisCanBeCreatedInjectable from "../../stores-apis-can-be-create
 import type { Disposer } from "@k8slens/utilities";
 import { disposer } from "@k8slens/utilities";
 import { renderFor } from "../test-utils/renderFor";
-import { NamespaceSelectFilter } from "./namespace-select-filter";
+import { NamespaceSelectFilter } from "./component";
 import type { NamespaceStore } from "../namespaces/store";
 import namespaceStoreInjectable from "../namespaces/store.injectable";
 
diff --git a/packages/core/src/renderer/components/workloads-overview/overview.tsx b/packages/core/src/renderer/components/workloads-overview/overview.tsx
index 39d4601fefa4..69c51d214efc 100644
--- a/packages/core/src/renderer/components/workloads-overview/overview.tsx
+++ b/packages/core/src/renderer/components/workloads-overview/overview.tsx
@@ -13,7 +13,7 @@ import type { JobStore } from "../workloads-jobs/store";
 import type { CronJobStore } from "../workloads-cronjobs/store";
 import type { IComputedValue } from "mobx";
 import { makeObservable, observable, reaction } from "mobx";
-import { NamespaceSelectFilter } from "../namespace-select-filter/namespace-select-filter";
+import { NamespaceSelectFilter } from "../namespace-select-filter/component";
 import { Icon } from "@k8slens/icon";
 import { TooltipPosition } from "@k8slens/tooltip";
 import { withInjectables } from "@ogre-tools/injectable-react";

From fa7bc2ee6bf2ce0c08d0187d00095954abb1e8e9 Mon Sep 17 00:00:00 2001
From: Sebastian Malton <sebastian@malton.name>
Date: Wed, 24 May 2023 14:07:49 -0400
Subject: [PATCH 06/16] chore: Fixup previous namespace-select-filter unit
 tests

Signed-off-by: Sebastian Malton <sebastian@malton.name>
---
 .../namespace-select-filter.test.tsx.snap     | 2014 +++++++++++++++++
 .../namespace-select-filter/component.tsx     |    3 +
 .../namespace-select-filter.test.tsx          |   54 +-
 .../namespace-select-filter.test.tsx.snap     | 1698 --------------
 4 files changed, 2045 insertions(+), 1724 deletions(-)
 create mode 100644 packages/core/src/renderer/components/namespace-select-filter/__snapshots__/namespace-select-filter.test.tsx.snap
 delete mode 100644 packages/core/src/renderer/components/namespaces/__snapshots__/namespace-select-filter.test.tsx.snap

diff --git a/packages/core/src/renderer/components/namespace-select-filter/__snapshots__/namespace-select-filter.test.tsx.snap b/packages/core/src/renderer/components/namespace-select-filter/__snapshots__/namespace-select-filter.test.tsx.snap
new file mode 100644
index 000000000000..b8662b524769
--- /dev/null
+++ b/packages/core/src/renderer/components/namespace-select-filter/__snapshots__/namespace-select-filter.test.tsx.snap
@@ -0,0 +1,2014 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<NamespaceSelectFilter /> once the subscribe resolves renders 1`] = `
+<body>
+  <div>
+    <div
+      class="namespace-select-filter"
+      data-testid="namespace-select-filter"
+      id="namespace-select-filter"
+      tabindex="1"
+    >
+      <div
+        class="menu"
+      >
+        <div
+          class="non-icon"
+        >
+          <input
+            data-testid="namespace-select-filter-input"
+            id="namespace-select-filter-filter"
+            type="text"
+            value=""
+          />
+          <div
+            class="gradient left"
+          />
+          <label
+            for="namespace-select-filter-filter"
+          >
+            All namespaces
+          </label>
+          <div
+            class="gradient right"
+          />
+        </div>
+        <i
+          class="Icon expand-icon material interactive focusable"
+          tabindex="0"
+        >
+          <span
+            class="icon"
+            data-icon-name="expand_more"
+          >
+            expand_more
+          </span>
+        </i>
+      </div>
+    </div>
+  </div>
+</body>
+`;
+
+exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked renders 1`] = `
+<body>
+  <div>
+    <div
+      class="namespace-select-filter"
+      data-testid="namespace-select-filter"
+      id="namespace-select-filter"
+      tabindex="1"
+    >
+      <div
+        class="menu"
+      >
+        <div
+          class="non-icon"
+        >
+          <input
+            data-testid="namespace-select-filter-input"
+            id="namespace-select-filter-filter"
+            type="text"
+            value=""
+          />
+          <div
+            class="gradient left"
+          />
+          <label
+            for="namespace-select-filter-filter"
+          >
+            All namespaces
+          </label>
+          <div
+            class="gradient right"
+          />
+        </div>
+        <i
+          class="Icon expand-icon material interactive focusable"
+          tabindex="0"
+        >
+          <span
+            class="icon"
+            data-icon-name="expand_less"
+          >
+            expand_less
+          </span>
+        </i>
+      </div>
+      <div
+        class="list-container"
+        data-testid="namespace-select-filter-list-container"
+      >
+        <div
+          class="list"
+          style="position: relative; height: 300px; width: 300px; overflow: auto; will-change: transform; direction: ltr;"
+        >
+          <ul
+            style="height: 406px; width: 100%;"
+          >
+            <li
+              class="option flex gaps align-center all-namespaces"
+              data-testid="namespace-select-filter-option-All Namespaces"
+              style="position: absolute; left: 0px; top: 0px; height: 29px; width: 100%;"
+            >
+              <span
+                class="data"
+              >
+                All Namespaces
+              </span>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-1"
+              style="position: absolute; left: 0px; top: 29px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div>
+                Select only test-1
+              </div>
+              <span
+                class="data"
+              >
+                test-1
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-1-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-1-selected"
+              >
+                Remove test-1 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-10"
+              style="position: absolute; left: 0px; top: 58px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div>
+                Select only test-10
+              </div>
+              <span
+                class="data"
+              >
+                test-10
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-10-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-10-selected"
+              >
+                Remove test-10 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-11"
+              style="position: absolute; left: 0px; top: 87px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div>
+                Select only test-11
+              </div>
+              <span
+                class="data"
+              >
+                test-11
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-11-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-11-selected"
+              >
+                Remove test-11 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-12"
+              style="position: absolute; left: 0px; top: 116px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div>
+                Select only test-12
+              </div>
+              <span
+                class="data"
+              >
+                test-12
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-12-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-12-selected"
+              >
+                Remove test-12 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-13"
+              style="position: absolute; left: 0px; top: 145px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div>
+                Select only test-13
+              </div>
+              <span
+                class="data"
+              >
+                test-13
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-13-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-13-selected"
+              >
+                Remove test-13 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-2"
+              style="position: absolute; left: 0px; top: 174px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div>
+                Select only test-2
+              </div>
+              <span
+                class="data"
+              >
+                test-2
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-2-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-2-selected"
+              >
+                Remove test-2 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-3"
+              style="position: absolute; left: 0px; top: 203px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div>
+                Select only test-3
+              </div>
+              <span
+                class="data"
+              >
+                test-3
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-3-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-3-selected"
+              >
+                Remove test-3 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-4"
+              style="position: absolute; left: 0px; top: 232px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div>
+                Select only test-4
+              </div>
+              <span
+                class="data"
+              >
+                test-4
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-4-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-4-selected"
+              >
+                Remove test-4 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-5"
+              style="position: absolute; left: 0px; top: 261px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div>
+                Select only test-5
+              </div>
+              <span
+                class="data"
+              >
+                test-5
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-5-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-5-selected"
+              >
+                Remove test-5 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-6"
+              style="position: absolute; left: 0px; top: 290px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div>
+                Select only test-6
+              </div>
+              <span
+                class="data"
+              >
+                test-6
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-6-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-6-selected"
+              >
+                Remove test-6 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-7"
+              style="position: absolute; left: 0px; top: 319px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div>
+                Select only test-7
+              </div>
+              <span
+                class="data"
+              >
+                test-7
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-7-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-7-selected"
+              >
+                Remove test-7 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-8"
+              style="position: absolute; left: 0px; top: 348px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div>
+                Select only test-8
+              </div>
+              <span
+                class="data"
+              >
+                test-8
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-8-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-8-selected"
+              >
+                Remove test-8 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-9"
+              style="position: absolute; left: 0px; top: 377px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div>
+                Select only test-9
+              </div>
+              <span
+                class="data"
+              >
+                test-9
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-9-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-9-selected"
+              >
+                Remove test-9 from selection
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+`;
+
+exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when 'test-2' is clicked renders 1`] = `
+<body>
+  <div>
+    <div
+      class="namespace-select-filter"
+      data-testid="namespace-select-filter"
+      id="namespace-select-filter"
+      tabindex="1"
+    >
+      <div
+        class="menu"
+      >
+        <div
+          class="non-icon"
+        >
+          <input
+            data-testid="namespace-select-filter-input"
+            id="namespace-select-filter-filter"
+            type="text"
+            value=""
+          />
+          <div
+            class="gradient left"
+          />
+          <label
+            for="namespace-select-filter-filter"
+          >
+            Namespace: test-2
+          </label>
+          <div
+            class="gradient right"
+          />
+        </div>
+        <i
+          class="Icon expand-icon material interactive focusable"
+          tabindex="0"
+        >
+          <span
+            class="icon"
+            data-icon-name="expand_more"
+          >
+            expand_more
+          </span>
+        </i>
+      </div>
+    </div>
+  </div>
+</body>
+`;
+
+exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when 'test-2' is clicked when clicked again renders 1`] = `
+<body>
+  <div>
+    <div
+      class="namespace-select-filter"
+      data-testid="namespace-select-filter"
+      id="namespace-select-filter"
+      tabindex="1"
+    >
+      <div
+        class="menu"
+      >
+        <div
+          class="non-icon"
+        >
+          <input
+            data-testid="namespace-select-filter-input"
+            id="namespace-select-filter-filter"
+            type="text"
+            value=""
+          />
+          <div
+            class="gradient left"
+          />
+          <label
+            for="namespace-select-filter-filter"
+          >
+            Namespace: test-2
+          </label>
+          <div
+            class="gradient right"
+          />
+        </div>
+        <i
+          class="Icon expand-icon material interactive focusable"
+          tabindex="0"
+        >
+          <span
+            class="icon"
+            data-icon-name="expand_less"
+          >
+            expand_less
+          </span>
+        </i>
+      </div>
+      <div
+        class="list-container"
+        data-testid="namespace-select-filter-list-container"
+      >
+        <div
+          class="list"
+          style="position: relative; height: 300px; width: 300px; overflow: auto; will-change: transform; direction: ltr;"
+        >
+          <ul
+            style="height: 406px; width: 100%;"
+          >
+            <li
+              class="option flex gaps align-center all-namespaces"
+              data-testid="namespace-select-filter-option-All Namespaces"
+              style="position: absolute; left: 0px; top: 0px; height: 29px; width: 100%;"
+            >
+              <span
+                class="data"
+              >
+                All Namespaces
+              </span>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-2"
+              style="position: absolute; left: 0px; top: 29px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div>
+                Select only test-2
+              </div>
+              <span
+                class="data"
+              >
+                test-2
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-2-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-2-selected"
+              >
+                Remove test-2 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-1"
+              style="position: absolute; left: 0px; top: 58px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div>
+                Select only test-1
+              </div>
+              <span
+                class="data"
+              >
+                test-1
+              </span>
+              <i
+                class="Icon add-selection-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-1-add-to-selection"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="add_box"
+                >
+                  add_box
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-1-add-to-selection"
+              >
+                Add test-1 to selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-10"
+              style="position: absolute; left: 0px; top: 87px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div>
+                Select only test-10
+              </div>
+              <span
+                class="data"
+              >
+                test-10
+              </span>
+              <i
+                class="Icon add-selection-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-10-add-to-selection"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="add_box"
+                >
+                  add_box
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-10-add-to-selection"
+              >
+                Add test-10 to selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-11"
+              style="position: absolute; left: 0px; top: 116px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div>
+                Select only test-11
+              </div>
+              <span
+                class="data"
+              >
+                test-11
+              </span>
+              <i
+                class="Icon add-selection-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-11-add-to-selection"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="add_box"
+                >
+                  add_box
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-11-add-to-selection"
+              >
+                Add test-11 to selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-12"
+              style="position: absolute; left: 0px; top: 145px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div>
+                Select only test-12
+              </div>
+              <span
+                class="data"
+              >
+                test-12
+              </span>
+              <i
+                class="Icon add-selection-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-12-add-to-selection"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="add_box"
+                >
+                  add_box
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-12-add-to-selection"
+              >
+                Add test-12 to selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-13"
+              style="position: absolute; left: 0px; top: 174px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div>
+                Select only test-13
+              </div>
+              <span
+                class="data"
+              >
+                test-13
+              </span>
+              <i
+                class="Icon add-selection-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-13-add-to-selection"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="add_box"
+                >
+                  add_box
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-13-add-to-selection"
+              >
+                Add test-13 to selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-3"
+              style="position: absolute; left: 0px; top: 203px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div>
+                Select only test-3
+              </div>
+              <span
+                class="data"
+              >
+                test-3
+              </span>
+              <i
+                class="Icon add-selection-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-3-add-to-selection"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="add_box"
+                >
+                  add_box
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-3-add-to-selection"
+              >
+                Add test-3 to selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-4"
+              style="position: absolute; left: 0px; top: 232px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div>
+                Select only test-4
+              </div>
+              <span
+                class="data"
+              >
+                test-4
+              </span>
+              <i
+                class="Icon add-selection-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-4-add-to-selection"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="add_box"
+                >
+                  add_box
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-4-add-to-selection"
+              >
+                Add test-4 to selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-5"
+              style="position: absolute; left: 0px; top: 261px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div>
+                Select only test-5
+              </div>
+              <span
+                class="data"
+              >
+                test-5
+              </span>
+              <i
+                class="Icon add-selection-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-5-add-to-selection"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="add_box"
+                >
+                  add_box
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-5-add-to-selection"
+              >
+                Add test-5 to selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-6"
+              style="position: absolute; left: 0px; top: 290px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div>
+                Select only test-6
+              </div>
+              <span
+                class="data"
+              >
+                test-6
+              </span>
+              <i
+                class="Icon add-selection-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-6-add-to-selection"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="add_box"
+                >
+                  add_box
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-6-add-to-selection"
+              >
+                Add test-6 to selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-7"
+              style="position: absolute; left: 0px; top: 319px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div>
+                Select only test-7
+              </div>
+              <span
+                class="data"
+              >
+                test-7
+              </span>
+              <i
+                class="Icon add-selection-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-7-add-to-selection"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="add_box"
+                >
+                  add_box
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-7-add-to-selection"
+              >
+                Add test-7 to selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-8"
+              style="position: absolute; left: 0px; top: 348px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div>
+                Select only test-8
+              </div>
+              <span
+                class="data"
+              >
+                test-8
+              </span>
+              <i
+                class="Icon add-selection-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-8-add-to-selection"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="add_box"
+                >
+                  add_box
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-8-add-to-selection"
+              >
+                Add test-8 to selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-9"
+              style="position: absolute; left: 0px; top: 377px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div>
+                Select only test-9
+              </div>
+              <span
+                class="data"
+              >
+                test-9
+              </span>
+              <i
+                class="Icon add-selection-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-9-add-to-selection"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="add_box"
+                >
+                  add_box
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-9-add-to-selection"
+              >
+                Add test-9 to selection
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+`;
+
+exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when 'test-2' is clicked when clicked again when 'test-1' is clicked renders 1`] = `
+<body>
+  <div>
+    <div
+      class="namespace-select-filter"
+      data-testid="namespace-select-filter"
+      id="namespace-select-filter"
+      tabindex="1"
+    >
+      <div
+        class="menu"
+      >
+        <div
+          class="non-icon"
+        >
+          <input
+            data-testid="namespace-select-filter-input"
+            id="namespace-select-filter-filter"
+            type="text"
+            value=""
+          />
+          <div
+            class="gradient left"
+          />
+          <label
+            for="namespace-select-filter-filter"
+          >
+            Namespace: test-1
+          </label>
+          <div
+            class="gradient right"
+          />
+        </div>
+        <i
+          class="Icon expand-icon material interactive focusable"
+          tabindex="0"
+        >
+          <span
+            class="icon"
+            data-icon-name="expand_more"
+          >
+            expand_more
+          </span>
+        </i>
+      </div>
+    </div>
+  </div>
+</body>
+`;
+
+exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when 'test-2' is clicked when clicked again when 'test-1' is clicked when clicked again, then holding down multi select key when 'test-3' is clicked renders 1`] = `
+<body>
+  <div>
+    <div
+      class="namespace-select-filter"
+      data-testid="namespace-select-filter"
+      id="namespace-select-filter"
+      tabindex="1"
+    >
+      <div
+        class="menu"
+      >
+        <div
+          class="non-icon"
+        >
+          <input
+            data-testid="namespace-select-filter-input"
+            id="namespace-select-filter-filter"
+            type="text"
+            value=""
+          />
+          <div
+            class="gradient left"
+          />
+          <label
+            for="namespace-select-filter-filter"
+          >
+            Namespaces: test-1, test-3
+          </label>
+          <div
+            class="gradient right"
+          />
+        </div>
+        <i
+          class="Icon expand-icon material interactive focusable"
+          tabindex="0"
+        >
+          <span
+            class="icon"
+            data-icon-name="expand_less"
+          >
+            expand_less
+          </span>
+        </i>
+      </div>
+      <div
+        class="list-container"
+        data-testid="namespace-select-filter-list-container"
+      >
+        <div
+          class="list"
+          style="position: relative; height: 300px; width: 300px; overflow: auto; will-change: transform; direction: ltr;"
+        >
+          <ul
+            style="height: 406px; width: 100%;"
+          >
+            <li
+              class="option flex gaps align-center all-namespaces"
+              data-testid="namespace-select-filter-option-All Namespaces"
+              style="position: absolute; left: 0px; top: 0px; height: 29px; width: 100%;"
+            >
+              <span
+                class="data"
+              >
+                All Namespaces
+              </span>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-1"
+              style="position: absolute; left: 0px; top: 29px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div>
+                Select only test-1
+              </div>
+              <span
+                class="data"
+              >
+                test-1
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-1-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-1-selected"
+              >
+                Remove test-1 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-2"
+              style="position: absolute; left: 0px; top: 58px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div>
+                Select only test-2
+              </div>
+              <span
+                class="data"
+              >
+                test-2
+              </span>
+              <i
+                class="Icon add-selection-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-2-add-to-selection"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="add_box"
+                >
+                  add_box
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-2-add-to-selection"
+              >
+                Add test-2 to selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-10"
+              style="position: absolute; left: 0px; top: 87px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div>
+                Select only test-10
+              </div>
+              <span
+                class="data"
+              >
+                test-10
+              </span>
+              <i
+                class="Icon add-selection-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-10-add-to-selection"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="add_box"
+                >
+                  add_box
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-10-add-to-selection"
+              >
+                Add test-10 to selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-11"
+              style="position: absolute; left: 0px; top: 116px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div>
+                Select only test-11
+              </div>
+              <span
+                class="data"
+              >
+                test-11
+              </span>
+              <i
+                class="Icon add-selection-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-11-add-to-selection"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="add_box"
+                >
+                  add_box
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-11-add-to-selection"
+              >
+                Add test-11 to selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-12"
+              style="position: absolute; left: 0px; top: 145px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div>
+                Select only test-12
+              </div>
+              <span
+                class="data"
+              >
+                test-12
+              </span>
+              <i
+                class="Icon add-selection-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-12-add-to-selection"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="add_box"
+                >
+                  add_box
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-12-add-to-selection"
+              >
+                Add test-12 to selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-13"
+              style="position: absolute; left: 0px; top: 174px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div>
+                Select only test-13
+              </div>
+              <span
+                class="data"
+              >
+                test-13
+              </span>
+              <i
+                class="Icon add-selection-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-13-add-to-selection"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="add_box"
+                >
+                  add_box
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-13-add-to-selection"
+              >
+                Add test-13 to selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-3"
+              style="position: absolute; left: 0px; top: 203px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div>
+                Select only test-3
+              </div>
+              <span
+                class="data"
+              >
+                test-3
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-3-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-3-selected"
+              >
+                Remove test-3 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-4"
+              style="position: absolute; left: 0px; top: 232px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div>
+                Select only test-4
+              </div>
+              <span
+                class="data"
+              >
+                test-4
+              </span>
+              <i
+                class="Icon add-selection-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-4-add-to-selection"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="add_box"
+                >
+                  add_box
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-4-add-to-selection"
+              >
+                Add test-4 to selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-5"
+              style="position: absolute; left: 0px; top: 261px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div>
+                Select only test-5
+              </div>
+              <span
+                class="data"
+              >
+                test-5
+              </span>
+              <i
+                class="Icon add-selection-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-5-add-to-selection"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="add_box"
+                >
+                  add_box
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-5-add-to-selection"
+              >
+                Add test-5 to selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-6"
+              style="position: absolute; left: 0px; top: 290px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div>
+                Select only test-6
+              </div>
+              <span
+                class="data"
+              >
+                test-6
+              </span>
+              <i
+                class="Icon add-selection-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-6-add-to-selection"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="add_box"
+                >
+                  add_box
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-6-add-to-selection"
+              >
+                Add test-6 to selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-7"
+              style="position: absolute; left: 0px; top: 319px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div>
+                Select only test-7
+              </div>
+              <span
+                class="data"
+              >
+                test-7
+              </span>
+              <i
+                class="Icon add-selection-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-7-add-to-selection"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="add_box"
+                >
+                  add_box
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-7-add-to-selection"
+              >
+                Add test-7 to selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-8"
+              style="position: absolute; left: 0px; top: 348px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div>
+                Select only test-8
+              </div>
+              <span
+                class="data"
+              >
+                test-8
+              </span>
+              <i
+                class="Icon add-selection-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-8-add-to-selection"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="add_box"
+                >
+                  add_box
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-8-add-to-selection"
+              >
+                Add test-8 to selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-9"
+              style="position: absolute; left: 0px; top: 377px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div>
+                Select only test-9
+              </div>
+              <span
+                class="data"
+              >
+                test-9
+              </span>
+              <i
+                class="Icon add-selection-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-9-add-to-selection"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="add_box"
+                >
+                  add_box
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-9-add-to-selection"
+              >
+                Add test-9 to selection
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+`;
diff --git a/packages/core/src/renderer/components/namespace-select-filter/component.tsx b/packages/core/src/renderer/components/namespace-select-filter/component.tsx
index 56c45cea5a40..379232b581ed 100644
--- a/packages/core/src/renderer/components/namespace-select-filter/component.tsx
+++ b/packages/core/src/renderer/components/namespace-select-filter/component.tsx
@@ -43,6 +43,7 @@ const NamespaceSelectFilterMenu = observer(({ id, model }: Dependencies & Namesp
           value={model.filterText.get()}
           onChange={(event) => model.filterText.set(event.target.value)}
           onClick={model.menu.open}
+          data-testid="namespace-select-filter-input"
         />
         <Gradient type="left" />
         <label htmlFor={`${id}-filter`}>
@@ -100,6 +101,7 @@ const NonInjectedNamespaceSelectFilter = observer(({ model, id }: Dependencies &
       {model.menu.isOpen.get() && (
         <div
           className="list-container"
+          data-testid="namespace-select-filter-list-container"
         >
           <VariableSizeList
             className="list"
@@ -168,6 +170,7 @@ const NamespaceSelectFilterRow = observer(({ index, style, data: { model, items
         "single-namespace": option.value !== selectAllNamespaces,
       })}
       onClick={() => model.onClick(option)}
+      data-testid={`namespace-select-filter-option-${option.label}`}
     >
       {option.value === selectAllNamespaces
         ? <span className="data">All Namespaces</span>
diff --git a/packages/core/src/renderer/components/namespace-select-filter/namespace-select-filter.test.tsx b/packages/core/src/renderer/components/namespace-select-filter/namespace-select-filter.test.tsx
index 6f24d416ce59..5b1ea870d84f 100644
--- a/packages/core/src/renderer/components/namespace-select-filter/namespace-select-filter.test.tsx
+++ b/packages/core/src/renderer/components/namespace-select-filter/namespace-select-filter.test.tsx
@@ -113,7 +113,7 @@ describe("<NamespaceSelectFilter />", () => {
 
     describe("when clicked", () => {
       beforeEach(() => {
-        result.getByTestId("namespace-select-filter").click();
+        result.getByTestId("namespace-select-filter-input").click();
       });
 
       it("renders", () => {
@@ -121,12 +121,12 @@ describe("<NamespaceSelectFilter />", () => {
       });
 
       it("opens menu", () => {
-        expect(result.baseElement.querySelector("#react-select-namespace-select-filter-listbox")).not.toBeNull();
+        expect(result.getByTestId("namespace-select-filter-list-container")).not.toBeNull();
       });
 
       describe("when 'test-2' is clicked", () => {
         beforeEach(() => {
-          result.getByText("test-2").click();
+          result.getByTestId("namespace-select-filter-option-test-2").click();
         });
 
         it("renders", () => {
@@ -138,12 +138,12 @@ describe("<NamespaceSelectFilter />", () => {
         });
 
         it("closes menu", () => {
-          expect(result.baseElement.querySelector("#react-select-namespace-select-filter-listbox")).toBeNull();
+          expect(result.queryByTestId("namespace-select-filter-list-container")).toBeNull();
         });
 
         describe("when clicked again", () => {
           beforeEach(() => {
-            result.getByTestId("namespace-select-filter").click();
+            result.getByTestId("namespace-select-filter-input").click();
           });
 
           it("renders", () => {
@@ -160,7 +160,7 @@ describe("<NamespaceSelectFilter />", () => {
 
           describe("when 'test-1' is clicked", () => {
             beforeEach(() => {
-              result.getByText("test-1").click();
+              result.getByTestId("namespace-select-filter-option-test-1").click();
             });
 
             it("renders", () => {
@@ -172,12 +172,12 @@ describe("<NamespaceSelectFilter />", () => {
             });
 
             it("closes menu", () => {
-              expect(result.baseElement.querySelector("#react-select-namespace-select-filter-listbox")).toBeNull();
+              expect(result.queryByTestId("namespace-select-filter-list-container")).toBeNull();
             });
 
             describe("when clicked again, then holding down multi select key", () => {
               beforeEach(() => {
-                const filter = result.getByTestId("namespace-select-filter");
+                const filter = result.getByTestId("namespace-select-filter-input");
 
                 filter.click();
                 fireEvent.keyDown(filter, { key: "Meta" });
@@ -185,7 +185,7 @@ describe("<NamespaceSelectFilter />", () => {
 
               describe("when 'test-3' is clicked", () => {
                 beforeEach(() => {
-                  result.getByText("test-3").click();
+                  result.getByTestId("namespace-select-filter-option-test-3").click();
                 });
 
                 it("renders", () => {
@@ -197,7 +197,7 @@ describe("<NamespaceSelectFilter />", () => {
                 });
 
                 it("keeps menu open", () => {
-                  expect(result.baseElement.querySelector("#react-select-namespace-select-filter-listbox")).not.toBeNull();
+                  expect(result.getByTestId("namespace-select-filter-list-container")).not.toBeNull();
                 });
 
                 it("does not show 'kube-system' as selected", () => {
@@ -206,42 +206,44 @@ describe("<NamespaceSelectFilter />", () => {
 
                 describe("when 'test-13' is clicked", () => {
                   beforeEach(() => {
-                    result.getByText("test-13").click();
+                    result.getByTestId("namespace-select-filter-option-test-13").click();
                   });
 
                   it("has all of 'test-1', 'test-3', and 'test-13' selected in the store", () => {
                     expect(new Set(namespaceStore.contextNamespaces)).toEqual(new Set(["test-1", "test-3", "test-13"]));
                   });
 
-                  it("'test-13' is not sorted to the top of the list", () => {
-                    const topLevelElement = result.getByText("test-13").parentElement?.parentElement as HTMLElement;
+                  it("keeps menu open", () => {
+                    expect(result.getByTestId("namespace-select-filter-list-container")).not.toBeNull();
+                  });
 
-                    expect(topLevelElement.previousSibling).not.toBe(null);
+                  it("'test-13' is not sorted to the top of the list", () => {
+                    expect(result.getByTestId("namespace-select-filter-option-test-13").previousSibling).not.toBe(null);
                   });
                 });
 
                 describe("when releasing multi select key", () => {
                   beforeEach(() => {
-                    const filter = result.getByTestId("namespace-select-filter");
+                    const filter = result.getByTestId("namespace-select-filter-input");
 
                     fireEvent.keyUp(filter, { key: "Meta" });
                   });
 
                   it("closes menu", () => {
-                    expect(result.baseElement.querySelector("#react-select-namespace-select-filter-listbox")).toBeNull();
+                    expect(result.queryByTestId("namespace-select-filter-list-container")).toBeNull();
                   });
                 });
               });
 
               describe("when releasing multi select key", () => {
                 beforeEach(() => {
-                  const filter = result.getByTestId("namespace-select-filter");
+                  const filter = result.getByTestId("namespace-select-filter-input");
 
                   fireEvent.keyUp(filter, { key: "Meta" });
                 });
 
                 it("keeps menu open", () => {
-                  expect(result.baseElement.querySelector("#react-select-namespace-select-filter-listbox")).not.toBeNull();
+                  expect(result.getByTestId("namespace-select-filter-list-container")).not.toBeNull();
                 });
               });
             });
@@ -251,42 +253,42 @@ describe("<NamespaceSelectFilter />", () => {
 
       describe("when multi-selection key is pressed", () => {
         beforeEach(() => {
-          const filter = result.getByTestId("namespace-select-filter");
+          const filter = result.getByTestId("namespace-select-filter-input");
 
           fireEvent.keyDown(filter, { key: "Meta" });
         });
 
         it("should show placeholder text as 'All namespaces'", () => {
-          expect(result.baseElement.querySelector("#react-select-namespace-select-filter-placeholder")).toHaveTextContent("All namespaces");
+          expect(result.getByTestId("namespace-select-filter")).toHaveTextContent("All namespaces");
         });
 
         describe("when 'test-2' is clicked", () => {
           beforeEach(() => {
-            result.getByText("test-2").click();
+            result.getByTestId("namespace-select-filter-option-test-2").click();
           });
 
           it("should not show placeholder text as 'All namespaces'", () => {
-            expect(result.baseElement.querySelector("#react-select-namespace-select-filter-placeholder")).not.toHaveTextContent("All namespaces");
+            expect(result.getByTestId("namespace-select-filter")).not.toHaveTextContent("All namespaces");
           });
 
           describe("when 'test-2' is clicked", () => {
             beforeEach(() => {
-              result.getByText("test-2").click();
+              result.getByTestId("namespace-select-filter-option-test-2").click();
             });
 
             it("should not show placeholder as 'All namespaces'", () => {
-              expect(result.baseElement.querySelector("#react-select-namespace-select-filter-placeholder")).not.toHaveTextContent("All namespaces");
+              expect(result.getByTestId("namespace-select-filter")).not.toHaveTextContent("All namespaces");
             });
 
             describe("when multi-selection key is raised", () => {
               beforeEach(() => {
-                const filter = result.getByTestId("namespace-select-filter");
+                const filter = result.getByTestId("namespace-select-filter-input");
 
                 fireEvent.keyUp(filter, { key: "Meta" });
               });
 
               it("should show placeholder text as 'All namespaces'", () => {
-                expect(result.baseElement.querySelector("#react-select-namespace-select-filter-placeholder")).not.toHaveTextContent("All namespaces");
+                expect(result.getByTestId("namespace-select-filter")).not.toHaveTextContent("All namespaces");
               });
             });
           });
diff --git a/packages/core/src/renderer/components/namespaces/__snapshots__/namespace-select-filter.test.tsx.snap b/packages/core/src/renderer/components/namespaces/__snapshots__/namespace-select-filter.test.tsx.snap
deleted file mode 100644
index a03fe634d7bc..000000000000
--- a/packages/core/src/renderer/components/namespaces/__snapshots__/namespace-select-filter.test.tsx.snap
+++ /dev/null
@@ -1,1698 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<NamespaceSelectFilter /> once the subscribe resolves renders 1`] = `
-<body>
-  <div>
-    <div
-      class="NamespaceSelectFilterParent"
-      data-testid="namespace-select-filter"
-    >
-      <div
-        class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
-      >
-        <span
-          class="css-1f43avz-a11yText-A11yText"
-          id="react-select-namespace-select-filter-live-region"
-        />
-        <span
-          aria-atomic="false"
-          aria-live="polite"
-          aria-relevant="additions text"
-          class="css-1f43avz-a11yText-A11yText"
-        />
-        <div
-          class="Select__control css-13cymwt-control"
-        >
-          <div
-            class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer"
-          >
-            <div
-              class="Select__placeholder css-1jqq78o-placeholder"
-              id="react-select-namespace-select-filter-placeholder"
-            >
-              All namespaces
-            </div>
-            <div
-              class="Select__input-container css-qbdosj-Input"
-              data-value=""
-            >
-              <input
-                aria-autocomplete="list"
-                aria-describedby="react-select-namespace-select-filter-placeholder"
-                aria-expanded="false"
-                aria-haspopup="true"
-                autocapitalize="none"
-                autocomplete="off"
-                autocorrect="off"
-                class="Select__input"
-                id="namespace-select-filter"
-                role="combobox"
-                spellcheck="false"
-                style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
-                tabindex="0"
-                type="text"
-                value=""
-              />
-            </div>
-          </div>
-          <div
-            class="Select__indicators css-1hb7zxy-IndicatorsContainer"
-          >
-            <span
-              class="Select__indicator-separator css-1u9des2-indicatorSeparator"
-            />
-            <div
-              aria-hidden="true"
-              class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
-            >
-              <svg
-                aria-hidden="true"
-                class="css-tj5bde-Svg"
-                focusable="false"
-                height="20"
-                viewBox="0 0 20 20"
-                width="20"
-              >
-                <path
-                  d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                />
-              </svg>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</body>
-`;
-
-exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked renders 1`] = `
-<body>
-  <div>
-    <div
-      class="NamespaceSelectFilterParent"
-      data-testid="namespace-select-filter"
-    >
-      <div
-        class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
-      >
-        <span
-          class="css-1f43avz-a11yText-A11yText"
-          id="react-select-namespace-select-filter-live-region"
-        />
-        <span
-          aria-atomic="false"
-          aria-live="polite"
-          aria-relevant="additions text"
-          class="css-1f43avz-a11yText-A11yText"
-        />
-        <div
-          class="Select__control Select__control--menu-is-open css-13cymwt-control"
-        >
-          <div
-            class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer"
-          >
-            <div
-              class="Select__placeholder css-1jqq78o-placeholder"
-              id="react-select-namespace-select-filter-placeholder"
-            >
-              All namespaces
-            </div>
-            <div
-              class="Select__input-container css-qbdosj-Input"
-              data-value=""
-            >
-              <input
-                aria-autocomplete="list"
-                aria-controls="react-select-namespace-select-filter-listbox"
-                aria-describedby="react-select-namespace-select-filter-placeholder"
-                aria-expanded="true"
-                aria-haspopup="true"
-                aria-owns="react-select-namespace-select-filter-listbox"
-                autocapitalize="none"
-                autocomplete="off"
-                autocorrect="off"
-                class="Select__input"
-                id="namespace-select-filter"
-                role="combobox"
-                spellcheck="false"
-                style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
-                tabindex="0"
-                type="text"
-                value=""
-              />
-            </div>
-          </div>
-          <div
-            class="Select__indicators css-1hb7zxy-IndicatorsContainer"
-          >
-            <span
-              class="Select__indicator-separator css-1u9des2-indicatorSeparator"
-            />
-            <div
-              aria-hidden="true"
-              class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
-            >
-              <svg
-                aria-hidden="true"
-                class="css-tj5bde-Svg"
-                focusable="false"
-                height="20"
-                viewBox="0 0 20 20"
-                width="20"
-              >
-                <path
-                  d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                />
-              </svg>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="Select__menu-portal css-1no2yl0-MenuPortal"
-  >
-    <div
-      class="NamespaceSelectFilterMenu theme-dark namespace-select-filter-options Select__menu css-1nmdiq5-menu"
-      id="react-select-namespace-select-filter-listbox"
-    >
-      <div
-        class="Select__menu-list Select__menu-list--is-multi css-1n6sfyn-MenuList"
-      >
-        <div
-          aria-disabled="false"
-          class="Select__option Select__option--is-focused css-d7l1ni-option"
-          id="react-select-namespace-select-filter-option-0"
-          tabindex="-1"
-        >
-          All Namespaces
-        </div>
-        <div
-          aria-disabled="false"
-          class="Select__option Select__option--is-selected css-tr4s17-option"
-          id="react-select-namespace-select-filter-option-1"
-          tabindex="-1"
-        >
-          <div
-            class="flex gaps align-center"
-          >
-            <i
-              class="Icon material focusable small"
-            >
-              <span
-                class="icon"
-                data-icon-name="layers"
-              >
-                layers
-              </span>
-            </i>
-            <span>
-              test-1
-            </span>
-            <i
-              class="Icon box right material focusable small"
-              data-testid="namespace-select-filter-option-test-1-selected"
-            >
-              <span
-                class="icon"
-                data-icon-name="check"
-              >
-                check
-              </span>
-            </i>
-          </div>
-        </div>
-        <div
-          aria-disabled="false"
-          class="Select__option Select__option--is-selected css-tr4s17-option"
-          id="react-select-namespace-select-filter-option-2"
-          tabindex="-1"
-        >
-          <div
-            class="flex gaps align-center"
-          >
-            <i
-              class="Icon material focusable small"
-            >
-              <span
-                class="icon"
-                data-icon-name="layers"
-              >
-                layers
-              </span>
-            </i>
-            <span>
-              test-10
-            </span>
-            <i
-              class="Icon box right material focusable small"
-              data-testid="namespace-select-filter-option-test-10-selected"
-            >
-              <span
-                class="icon"
-                data-icon-name="check"
-              >
-                check
-              </span>
-            </i>
-          </div>
-        </div>
-        <div
-          aria-disabled="false"
-          class="Select__option Select__option--is-selected css-tr4s17-option"
-          id="react-select-namespace-select-filter-option-3"
-          tabindex="-1"
-        >
-          <div
-            class="flex gaps align-center"
-          >
-            <i
-              class="Icon material focusable small"
-            >
-              <span
-                class="icon"
-                data-icon-name="layers"
-              >
-                layers
-              </span>
-            </i>
-            <span>
-              test-11
-            </span>
-            <i
-              class="Icon box right material focusable small"
-              data-testid="namespace-select-filter-option-test-11-selected"
-            >
-              <span
-                class="icon"
-                data-icon-name="check"
-              >
-                check
-              </span>
-            </i>
-          </div>
-        </div>
-        <div
-          aria-disabled="false"
-          class="Select__option Select__option--is-selected css-tr4s17-option"
-          id="react-select-namespace-select-filter-option-4"
-          tabindex="-1"
-        >
-          <div
-            class="flex gaps align-center"
-          >
-            <i
-              class="Icon material focusable small"
-            >
-              <span
-                class="icon"
-                data-icon-name="layers"
-              >
-                layers
-              </span>
-            </i>
-            <span>
-              test-12
-            </span>
-            <i
-              class="Icon box right material focusable small"
-              data-testid="namespace-select-filter-option-test-12-selected"
-            >
-              <span
-                class="icon"
-                data-icon-name="check"
-              >
-                check
-              </span>
-            </i>
-          </div>
-        </div>
-        <div
-          aria-disabled="false"
-          class="Select__option Select__option--is-selected css-tr4s17-option"
-          id="react-select-namespace-select-filter-option-5"
-          tabindex="-1"
-        >
-          <div
-            class="flex gaps align-center"
-          >
-            <i
-              class="Icon material focusable small"
-            >
-              <span
-                class="icon"
-                data-icon-name="layers"
-              >
-                layers
-              </span>
-            </i>
-            <span>
-              test-13
-            </span>
-            <i
-              class="Icon box right material focusable small"
-              data-testid="namespace-select-filter-option-test-13-selected"
-            >
-              <span
-                class="icon"
-                data-icon-name="check"
-              >
-                check
-              </span>
-            </i>
-          </div>
-        </div>
-        <div
-          aria-disabled="false"
-          class="Select__option Select__option--is-selected css-tr4s17-option"
-          id="react-select-namespace-select-filter-option-6"
-          tabindex="-1"
-        >
-          <div
-            class="flex gaps align-center"
-          >
-            <i
-              class="Icon material focusable small"
-            >
-              <span
-                class="icon"
-                data-icon-name="layers"
-              >
-                layers
-              </span>
-            </i>
-            <span>
-              test-2
-            </span>
-            <i
-              class="Icon box right material focusable small"
-              data-testid="namespace-select-filter-option-test-2-selected"
-            >
-              <span
-                class="icon"
-                data-icon-name="check"
-              >
-                check
-              </span>
-            </i>
-          </div>
-        </div>
-        <div
-          aria-disabled="false"
-          class="Select__option Select__option--is-selected css-tr4s17-option"
-          id="react-select-namespace-select-filter-option-7"
-          tabindex="-1"
-        >
-          <div
-            class="flex gaps align-center"
-          >
-            <i
-              class="Icon material focusable small"
-            >
-              <span
-                class="icon"
-                data-icon-name="layers"
-              >
-                layers
-              </span>
-            </i>
-            <span>
-              test-3
-            </span>
-            <i
-              class="Icon box right material focusable small"
-              data-testid="namespace-select-filter-option-test-3-selected"
-            >
-              <span
-                class="icon"
-                data-icon-name="check"
-              >
-                check
-              </span>
-            </i>
-          </div>
-        </div>
-        <div
-          aria-disabled="false"
-          class="Select__option Select__option--is-selected css-tr4s17-option"
-          id="react-select-namespace-select-filter-option-8"
-          tabindex="-1"
-        >
-          <div
-            class="flex gaps align-center"
-          >
-            <i
-              class="Icon material focusable small"
-            >
-              <span
-                class="icon"
-                data-icon-name="layers"
-              >
-                layers
-              </span>
-            </i>
-            <span>
-              test-4
-            </span>
-            <i
-              class="Icon box right material focusable small"
-              data-testid="namespace-select-filter-option-test-4-selected"
-            >
-              <span
-                class="icon"
-                data-icon-name="check"
-              >
-                check
-              </span>
-            </i>
-          </div>
-        </div>
-        <div
-          aria-disabled="false"
-          class="Select__option Select__option--is-selected css-tr4s17-option"
-          id="react-select-namespace-select-filter-option-9"
-          tabindex="-1"
-        >
-          <div
-            class="flex gaps align-center"
-          >
-            <i
-              class="Icon material focusable small"
-            >
-              <span
-                class="icon"
-                data-icon-name="layers"
-              >
-                layers
-              </span>
-            </i>
-            <span>
-              test-5
-            </span>
-            <i
-              class="Icon box right material focusable small"
-              data-testid="namespace-select-filter-option-test-5-selected"
-            >
-              <span
-                class="icon"
-                data-icon-name="check"
-              >
-                check
-              </span>
-            </i>
-          </div>
-        </div>
-        <div
-          aria-disabled="false"
-          class="Select__option Select__option--is-selected css-tr4s17-option"
-          id="react-select-namespace-select-filter-option-10"
-          tabindex="-1"
-        >
-          <div
-            class="flex gaps align-center"
-          >
-            <i
-              class="Icon material focusable small"
-            >
-              <span
-                class="icon"
-                data-icon-name="layers"
-              >
-                layers
-              </span>
-            </i>
-            <span>
-              test-6
-            </span>
-            <i
-              class="Icon box right material focusable small"
-              data-testid="namespace-select-filter-option-test-6-selected"
-            >
-              <span
-                class="icon"
-                data-icon-name="check"
-              >
-                check
-              </span>
-            </i>
-          </div>
-        </div>
-        <div
-          aria-disabled="false"
-          class="Select__option Select__option--is-selected css-tr4s17-option"
-          id="react-select-namespace-select-filter-option-11"
-          tabindex="-1"
-        >
-          <div
-            class="flex gaps align-center"
-          >
-            <i
-              class="Icon material focusable small"
-            >
-              <span
-                class="icon"
-                data-icon-name="layers"
-              >
-                layers
-              </span>
-            </i>
-            <span>
-              test-7
-            </span>
-            <i
-              class="Icon box right material focusable small"
-              data-testid="namespace-select-filter-option-test-7-selected"
-            >
-              <span
-                class="icon"
-                data-icon-name="check"
-              >
-                check
-              </span>
-            </i>
-          </div>
-        </div>
-        <div
-          aria-disabled="false"
-          class="Select__option Select__option--is-selected css-tr4s17-option"
-          id="react-select-namespace-select-filter-option-12"
-          tabindex="-1"
-        >
-          <div
-            class="flex gaps align-center"
-          >
-            <i
-              class="Icon material focusable small"
-            >
-              <span
-                class="icon"
-                data-icon-name="layers"
-              >
-                layers
-              </span>
-            </i>
-            <span>
-              test-8
-            </span>
-            <i
-              class="Icon box right material focusable small"
-              data-testid="namespace-select-filter-option-test-8-selected"
-            >
-              <span
-                class="icon"
-                data-icon-name="check"
-              >
-                check
-              </span>
-            </i>
-          </div>
-        </div>
-        <div
-          aria-disabled="false"
-          class="Select__option Select__option--is-selected css-tr4s17-option"
-          id="react-select-namespace-select-filter-option-13"
-          tabindex="-1"
-        >
-          <div
-            class="flex gaps align-center"
-          >
-            <i
-              class="Icon material focusable small"
-            >
-              <span
-                class="icon"
-                data-icon-name="layers"
-              >
-                layers
-              </span>
-            </i>
-            <span>
-              test-9
-            </span>
-            <i
-              class="Icon box right material focusable small"
-              data-testid="namespace-select-filter-option-test-9-selected"
-            >
-              <span
-                class="icon"
-                data-icon-name="check"
-              >
-                check
-              </span>
-            </i>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</body>
-`;
-
-exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when 'test-2' is clicked renders 1`] = `
-<body>
-  <div>
-    <div
-      class="NamespaceSelectFilterParent"
-      data-testid="namespace-select-filter"
-    >
-      <div
-        class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
-      >
-        <span
-          class="css-1f43avz-a11yText-A11yText"
-          id="react-select-namespace-select-filter-live-region"
-        />
-        <span
-          aria-atomic="false"
-          aria-live="polite"
-          aria-relevant="additions text"
-          class="css-1f43avz-a11yText-A11yText"
-        />
-        <div
-          class="Select__control css-13cymwt-control"
-        >
-          <div
-            class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer"
-          >
-            <div
-              class="Select__placeholder css-1jqq78o-placeholder"
-              id="react-select-namespace-select-filter-placeholder"
-            >
-              Namespace: test-2
-            </div>
-            <div
-              class="Select__input-container css-qbdosj-Input"
-              data-value=""
-            >
-              <input
-                aria-autocomplete="list"
-                aria-describedby="react-select-namespace-select-filter-placeholder"
-                aria-expanded="false"
-                aria-haspopup="true"
-                autocapitalize="none"
-                autocomplete="off"
-                autocorrect="off"
-                class="Select__input"
-                id="namespace-select-filter"
-                role="combobox"
-                spellcheck="false"
-                style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
-                tabindex="0"
-                type="text"
-                value=""
-              />
-            </div>
-          </div>
-          <div
-            class="Select__indicators css-1hb7zxy-IndicatorsContainer"
-          >
-            <span
-              class="Select__indicator-separator css-1u9des2-indicatorSeparator"
-            />
-            <div
-              aria-hidden="true"
-              class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
-            >
-              <svg
-                aria-hidden="true"
-                class="css-tj5bde-Svg"
-                focusable="false"
-                height="20"
-                viewBox="0 0 20 20"
-                width="20"
-              >
-                <path
-                  d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                />
-              </svg>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</body>
-`;
-
-exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when 'test-2' is clicked when clicked again renders 1`] = `
-<body>
-  <div>
-    <div
-      class="NamespaceSelectFilterParent"
-      data-testid="namespace-select-filter"
-    >
-      <div
-        class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
-      >
-        <span
-          class="css-1f43avz-a11yText-A11yText"
-          id="react-select-namespace-select-filter-live-region"
-        />
-        <span
-          aria-atomic="false"
-          aria-live="polite"
-          aria-relevant="additions text"
-          class="css-1f43avz-a11yText-A11yText"
-        />
-        <div
-          class="Select__control Select__control--menu-is-open css-13cymwt-control"
-        >
-          <div
-            class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer"
-          >
-            <div
-              class="Select__placeholder css-1jqq78o-placeholder"
-              id="react-select-namespace-select-filter-placeholder"
-            >
-              Namespace: test-2
-            </div>
-            <div
-              class="Select__input-container css-qbdosj-Input"
-              data-value=""
-            >
-              <input
-                aria-autocomplete="list"
-                aria-controls="react-select-namespace-select-filter-listbox"
-                aria-describedby="react-select-namespace-select-filter-placeholder"
-                aria-expanded="true"
-                aria-haspopup="true"
-                aria-owns="react-select-namespace-select-filter-listbox"
-                autocapitalize="none"
-                autocomplete="off"
-                autocorrect="off"
-                class="Select__input"
-                id="namespace-select-filter"
-                role="combobox"
-                spellcheck="false"
-                style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
-                tabindex="0"
-                type="text"
-                value=""
-              />
-            </div>
-          </div>
-          <div
-            class="Select__indicators css-1hb7zxy-IndicatorsContainer"
-          >
-            <span
-              class="Select__indicator-separator css-1u9des2-indicatorSeparator"
-            />
-            <div
-              aria-hidden="true"
-              class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
-            >
-              <svg
-                aria-hidden="true"
-                class="css-tj5bde-Svg"
-                focusable="false"
-                height="20"
-                viewBox="0 0 20 20"
-                width="20"
-              >
-                <path
-                  d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                />
-              </svg>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="Select__menu-portal css-1no2yl0-MenuPortal"
-  >
-    <div
-      class="NamespaceSelectFilterMenu theme-dark namespace-select-filter-options Select__menu css-1nmdiq5-menu"
-      id="react-select-namespace-select-filter-listbox"
-    >
-      <div
-        class="Select__menu-list Select__menu-list--is-multi css-1n6sfyn-MenuList"
-      >
-        <div
-          aria-disabled="false"
-          class="Select__option Select__option--is-focused css-d7l1ni-option"
-          id="react-select-namespace-select-filter-option-0"
-          tabindex="-1"
-        >
-          All Namespaces
-        </div>
-        <div
-          aria-disabled="false"
-          class="Select__option Select__option--is-selected css-tr4s17-option"
-          id="react-select-namespace-select-filter-option-1"
-          tabindex="-1"
-        >
-          <div
-            class="flex gaps align-center"
-          >
-            <i
-              class="Icon material focusable small"
-            >
-              <span
-                class="icon"
-                data-icon-name="layers"
-              >
-                layers
-              </span>
-            </i>
-            <span>
-              test-2
-            </span>
-            <i
-              class="Icon box right material focusable small"
-              data-testid="namespace-select-filter-option-test-2-selected"
-            >
-              <span
-                class="icon"
-                data-icon-name="check"
-              >
-                check
-              </span>
-            </i>
-          </div>
-        </div>
-        <div
-          aria-disabled="false"
-          class="Select__option css-10wo9uf-option"
-          id="react-select-namespace-select-filter-option-2"
-          tabindex="-1"
-        >
-          <div
-            class="flex gaps align-center"
-          >
-            <i
-              class="Icon material focusable small"
-            >
-              <span
-                class="icon"
-                data-icon-name="layers"
-              >
-                layers
-              </span>
-            </i>
-            <span>
-              test-1
-            </span>
-          </div>
-        </div>
-        <div
-          aria-disabled="false"
-          class="Select__option css-10wo9uf-option"
-          id="react-select-namespace-select-filter-option-3"
-          tabindex="-1"
-        >
-          <div
-            class="flex gaps align-center"
-          >
-            <i
-              class="Icon material focusable small"
-            >
-              <span
-                class="icon"
-                data-icon-name="layers"
-              >
-                layers
-              </span>
-            </i>
-            <span>
-              test-10
-            </span>
-          </div>
-        </div>
-        <div
-          aria-disabled="false"
-          class="Select__option css-10wo9uf-option"
-          id="react-select-namespace-select-filter-option-4"
-          tabindex="-1"
-        >
-          <div
-            class="flex gaps align-center"
-          >
-            <i
-              class="Icon material focusable small"
-            >
-              <span
-                class="icon"
-                data-icon-name="layers"
-              >
-                layers
-              </span>
-            </i>
-            <span>
-              test-11
-            </span>
-          </div>
-        </div>
-        <div
-          aria-disabled="false"
-          class="Select__option css-10wo9uf-option"
-          id="react-select-namespace-select-filter-option-5"
-          tabindex="-1"
-        >
-          <div
-            class="flex gaps align-center"
-          >
-            <i
-              class="Icon material focusable small"
-            >
-              <span
-                class="icon"
-                data-icon-name="layers"
-              >
-                layers
-              </span>
-            </i>
-            <span>
-              test-12
-            </span>
-          </div>
-        </div>
-        <div
-          aria-disabled="false"
-          class="Select__option css-10wo9uf-option"
-          id="react-select-namespace-select-filter-option-6"
-          tabindex="-1"
-        >
-          <div
-            class="flex gaps align-center"
-          >
-            <i
-              class="Icon material focusable small"
-            >
-              <span
-                class="icon"
-                data-icon-name="layers"
-              >
-                layers
-              </span>
-            </i>
-            <span>
-              test-13
-            </span>
-          </div>
-        </div>
-        <div
-          aria-disabled="false"
-          class="Select__option css-10wo9uf-option"
-          id="react-select-namespace-select-filter-option-7"
-          tabindex="-1"
-        >
-          <div
-            class="flex gaps align-center"
-          >
-            <i
-              class="Icon material focusable small"
-            >
-              <span
-                class="icon"
-                data-icon-name="layers"
-              >
-                layers
-              </span>
-            </i>
-            <span>
-              test-3
-            </span>
-          </div>
-        </div>
-        <div
-          aria-disabled="false"
-          class="Select__option css-10wo9uf-option"
-          id="react-select-namespace-select-filter-option-8"
-          tabindex="-1"
-        >
-          <div
-            class="flex gaps align-center"
-          >
-            <i
-              class="Icon material focusable small"
-            >
-              <span
-                class="icon"
-                data-icon-name="layers"
-              >
-                layers
-              </span>
-            </i>
-            <span>
-              test-4
-            </span>
-          </div>
-        </div>
-        <div
-          aria-disabled="false"
-          class="Select__option css-10wo9uf-option"
-          id="react-select-namespace-select-filter-option-9"
-          tabindex="-1"
-        >
-          <div
-            class="flex gaps align-center"
-          >
-            <i
-              class="Icon material focusable small"
-            >
-              <span
-                class="icon"
-                data-icon-name="layers"
-              >
-                layers
-              </span>
-            </i>
-            <span>
-              test-5
-            </span>
-          </div>
-        </div>
-        <div
-          aria-disabled="false"
-          class="Select__option css-10wo9uf-option"
-          id="react-select-namespace-select-filter-option-10"
-          tabindex="-1"
-        >
-          <div
-            class="flex gaps align-center"
-          >
-            <i
-              class="Icon material focusable small"
-            >
-              <span
-                class="icon"
-                data-icon-name="layers"
-              >
-                layers
-              </span>
-            </i>
-            <span>
-              test-6
-            </span>
-          </div>
-        </div>
-        <div
-          aria-disabled="false"
-          class="Select__option css-10wo9uf-option"
-          id="react-select-namespace-select-filter-option-11"
-          tabindex="-1"
-        >
-          <div
-            class="flex gaps align-center"
-          >
-            <i
-              class="Icon material focusable small"
-            >
-              <span
-                class="icon"
-                data-icon-name="layers"
-              >
-                layers
-              </span>
-            </i>
-            <span>
-              test-7
-            </span>
-          </div>
-        </div>
-        <div
-          aria-disabled="false"
-          class="Select__option css-10wo9uf-option"
-          id="react-select-namespace-select-filter-option-12"
-          tabindex="-1"
-        >
-          <div
-            class="flex gaps align-center"
-          >
-            <i
-              class="Icon material focusable small"
-            >
-              <span
-                class="icon"
-                data-icon-name="layers"
-              >
-                layers
-              </span>
-            </i>
-            <span>
-              test-8
-            </span>
-          </div>
-        </div>
-        <div
-          aria-disabled="false"
-          class="Select__option css-10wo9uf-option"
-          id="react-select-namespace-select-filter-option-13"
-          tabindex="-1"
-        >
-          <div
-            class="flex gaps align-center"
-          >
-            <i
-              class="Icon material focusable small"
-            >
-              <span
-                class="icon"
-                data-icon-name="layers"
-              >
-                layers
-              </span>
-            </i>
-            <span>
-              test-9
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</body>
-`;
-
-exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when 'test-2' is clicked when clicked again when 'test-1' is clicked renders 1`] = `
-<body>
-  <div>
-    <div
-      class="NamespaceSelectFilterParent"
-      data-testid="namespace-select-filter"
-    >
-      <div
-        class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
-      >
-        <span
-          class="css-1f43avz-a11yText-A11yText"
-          id="react-select-namespace-select-filter-live-region"
-        />
-        <span
-          aria-atomic="false"
-          aria-live="polite"
-          aria-relevant="additions text"
-          class="css-1f43avz-a11yText-A11yText"
-        />
-        <div
-          class="Select__control css-13cymwt-control"
-        >
-          <div
-            class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer"
-          >
-            <div
-              class="Select__placeholder css-1jqq78o-placeholder"
-              id="react-select-namespace-select-filter-placeholder"
-            >
-              Namespace: test-1
-            </div>
-            <div
-              class="Select__input-container css-qbdosj-Input"
-              data-value=""
-            >
-              <input
-                aria-autocomplete="list"
-                aria-describedby="react-select-namespace-select-filter-placeholder"
-                aria-expanded="false"
-                aria-haspopup="true"
-                autocapitalize="none"
-                autocomplete="off"
-                autocorrect="off"
-                class="Select__input"
-                id="namespace-select-filter"
-                role="combobox"
-                spellcheck="false"
-                style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
-                tabindex="0"
-                type="text"
-                value=""
-              />
-            </div>
-          </div>
-          <div
-            class="Select__indicators css-1hb7zxy-IndicatorsContainer"
-          >
-            <span
-              class="Select__indicator-separator css-1u9des2-indicatorSeparator"
-            />
-            <div
-              aria-hidden="true"
-              class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
-            >
-              <svg
-                aria-hidden="true"
-                class="css-tj5bde-Svg"
-                focusable="false"
-                height="20"
-                viewBox="0 0 20 20"
-                width="20"
-              >
-                <path
-                  d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                />
-              </svg>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</body>
-`;
-
-exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when 'test-2' is clicked when clicked again when 'test-1' is clicked when clicked again, then holding down multi select key when 'test-3' is clicked renders 1`] = `
-<body>
-  <div>
-    <div
-      class="NamespaceSelectFilterParent"
-      data-testid="namespace-select-filter"
-    >
-      <div
-        class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
-      >
-        <span
-          class="css-1f43avz-a11yText-A11yText"
-          id="react-select-namespace-select-filter-live-region"
-        />
-        <span
-          aria-atomic="false"
-          aria-live="polite"
-          aria-relevant="additions text"
-          class="css-1f43avz-a11yText-A11yText"
-        />
-        <div
-          class="Select__control Select__control--menu-is-open css-13cymwt-control"
-        >
-          <div
-            class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer"
-          >
-            <div
-              class="Select__placeholder css-1jqq78o-placeholder"
-              id="react-select-namespace-select-filter-placeholder"
-            >
-              Namespaces: test-1, test-3
-            </div>
-            <div
-              class="Select__input-container css-qbdosj-Input"
-              data-value=""
-            >
-              <input
-                aria-autocomplete="list"
-                aria-controls="react-select-namespace-select-filter-listbox"
-                aria-describedby="react-select-namespace-select-filter-placeholder"
-                aria-expanded="true"
-                aria-haspopup="true"
-                aria-owns="react-select-namespace-select-filter-listbox"
-                autocapitalize="none"
-                autocomplete="off"
-                autocorrect="off"
-                class="Select__input"
-                id="namespace-select-filter"
-                role="combobox"
-                spellcheck="false"
-                style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
-                tabindex="0"
-                type="text"
-                value=""
-              />
-            </div>
-          </div>
-          <div
-            class="Select__indicators css-1hb7zxy-IndicatorsContainer"
-          >
-            <span
-              class="Select__indicator-separator css-1u9des2-indicatorSeparator"
-            />
-            <div
-              aria-hidden="true"
-              class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
-            >
-              <svg
-                aria-hidden="true"
-                class="css-tj5bde-Svg"
-                focusable="false"
-                height="20"
-                viewBox="0 0 20 20"
-                width="20"
-              >
-                <path
-                  d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                />
-              </svg>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    class="Select__menu-portal css-1no2yl0-MenuPortal"
-  >
-    <div
-      class="NamespaceSelectFilterMenu theme-dark namespace-select-filter-options Select__menu css-1nmdiq5-menu"
-      id="react-select-namespace-select-filter-listbox"
-    >
-      <div
-        class="Select__menu-list Select__menu-list--is-multi css-1n6sfyn-MenuList"
-      >
-        <div
-          aria-disabled="false"
-          class="Select__option Select__option--is-focused css-d7l1ni-option"
-          id="react-select-namespace-select-filter-option-0"
-          tabindex="-1"
-        >
-          All Namespaces
-        </div>
-        <div
-          aria-disabled="false"
-          class="Select__option Select__option--is-selected css-tr4s17-option"
-          id="react-select-namespace-select-filter-option-1"
-          tabindex="-1"
-        >
-          <div
-            class="flex gaps align-center"
-          >
-            <i
-              class="Icon material focusable small"
-            >
-              <span
-                class="icon"
-                data-icon-name="layers"
-              >
-                layers
-              </span>
-            </i>
-            <span>
-              test-1
-            </span>
-            <i
-              class="Icon box right material focusable small"
-              data-testid="namespace-select-filter-option-test-1-selected"
-            >
-              <span
-                class="icon"
-                data-icon-name="check"
-              >
-                check
-              </span>
-            </i>
-          </div>
-        </div>
-        <div
-          aria-disabled="false"
-          class="Select__option css-10wo9uf-option"
-          id="react-select-namespace-select-filter-option-2"
-          tabindex="-1"
-        >
-          <div
-            class="flex gaps align-center"
-          >
-            <i
-              class="Icon material focusable small"
-            >
-              <span
-                class="icon"
-                data-icon-name="layers"
-              >
-                layers
-              </span>
-            </i>
-            <span>
-              test-2
-            </span>
-          </div>
-        </div>
-        <div
-          aria-disabled="false"
-          class="Select__option css-10wo9uf-option"
-          id="react-select-namespace-select-filter-option-3"
-          tabindex="-1"
-        >
-          <div
-            class="flex gaps align-center"
-          >
-            <i
-              class="Icon material focusable small"
-            >
-              <span
-                class="icon"
-                data-icon-name="layers"
-              >
-                layers
-              </span>
-            </i>
-            <span>
-              test-10
-            </span>
-          </div>
-        </div>
-        <div
-          aria-disabled="false"
-          class="Select__option css-10wo9uf-option"
-          id="react-select-namespace-select-filter-option-4"
-          tabindex="-1"
-        >
-          <div
-            class="flex gaps align-center"
-          >
-            <i
-              class="Icon material focusable small"
-            >
-              <span
-                class="icon"
-                data-icon-name="layers"
-              >
-                layers
-              </span>
-            </i>
-            <span>
-              test-11
-            </span>
-          </div>
-        </div>
-        <div
-          aria-disabled="false"
-          class="Select__option css-10wo9uf-option"
-          id="react-select-namespace-select-filter-option-5"
-          tabindex="-1"
-        >
-          <div
-            class="flex gaps align-center"
-          >
-            <i
-              class="Icon material focusable small"
-            >
-              <span
-                class="icon"
-                data-icon-name="layers"
-              >
-                layers
-              </span>
-            </i>
-            <span>
-              test-12
-            </span>
-          </div>
-        </div>
-        <div
-          aria-disabled="false"
-          class="Select__option css-10wo9uf-option"
-          id="react-select-namespace-select-filter-option-6"
-          tabindex="-1"
-        >
-          <div
-            class="flex gaps align-center"
-          >
-            <i
-              class="Icon material focusable small"
-            >
-              <span
-                class="icon"
-                data-icon-name="layers"
-              >
-                layers
-              </span>
-            </i>
-            <span>
-              test-13
-            </span>
-          </div>
-        </div>
-        <div
-          aria-disabled="false"
-          class="Select__option Select__option--is-selected css-tr4s17-option"
-          id="react-select-namespace-select-filter-option-7"
-          tabindex="-1"
-        >
-          <div
-            class="flex gaps align-center"
-          >
-            <i
-              class="Icon material focusable small"
-            >
-              <span
-                class="icon"
-                data-icon-name="layers"
-              >
-                layers
-              </span>
-            </i>
-            <span>
-              test-3
-            </span>
-            <i
-              class="Icon box right material focusable small"
-              data-testid="namespace-select-filter-option-test-3-selected"
-            >
-              <span
-                class="icon"
-                data-icon-name="check"
-              >
-                check
-              </span>
-            </i>
-          </div>
-        </div>
-        <div
-          aria-disabled="false"
-          class="Select__option css-10wo9uf-option"
-          id="react-select-namespace-select-filter-option-8"
-          tabindex="-1"
-        >
-          <div
-            class="flex gaps align-center"
-          >
-            <i
-              class="Icon material focusable small"
-            >
-              <span
-                class="icon"
-                data-icon-name="layers"
-              >
-                layers
-              </span>
-            </i>
-            <span>
-              test-4
-            </span>
-          </div>
-        </div>
-        <div
-          aria-disabled="false"
-          class="Select__option css-10wo9uf-option"
-          id="react-select-namespace-select-filter-option-9"
-          tabindex="-1"
-        >
-          <div
-            class="flex gaps align-center"
-          >
-            <i
-              class="Icon material focusable small"
-            >
-              <span
-                class="icon"
-                data-icon-name="layers"
-              >
-                layers
-              </span>
-            </i>
-            <span>
-              test-5
-            </span>
-          </div>
-        </div>
-        <div
-          aria-disabled="false"
-          class="Select__option css-10wo9uf-option"
-          id="react-select-namespace-select-filter-option-10"
-          tabindex="-1"
-        >
-          <div
-            class="flex gaps align-center"
-          >
-            <i
-              class="Icon material focusable small"
-            >
-              <span
-                class="icon"
-                data-icon-name="layers"
-              >
-                layers
-              </span>
-            </i>
-            <span>
-              test-6
-            </span>
-          </div>
-        </div>
-        <div
-          aria-disabled="false"
-          class="Select__option css-10wo9uf-option"
-          id="react-select-namespace-select-filter-option-11"
-          tabindex="-1"
-        >
-          <div
-            class="flex gaps align-center"
-          >
-            <i
-              class="Icon material focusable small"
-            >
-              <span
-                class="icon"
-                data-icon-name="layers"
-              >
-                layers
-              </span>
-            </i>
-            <span>
-              test-7
-            </span>
-          </div>
-        </div>
-        <div
-          aria-disabled="false"
-          class="Select__option css-10wo9uf-option"
-          id="react-select-namespace-select-filter-option-12"
-          tabindex="-1"
-        >
-          <div
-            class="flex gaps align-center"
-          >
-            <i
-              class="Icon material focusable small"
-            >
-              <span
-                class="icon"
-                data-icon-name="layers"
-              >
-                layers
-              </span>
-            </i>
-            <span>
-              test-8
-            </span>
-          </div>
-        </div>
-        <div
-          aria-disabled="false"
-          class="Select__option css-10wo9uf-option"
-          id="react-select-namespace-select-filter-option-13"
-          tabindex="-1"
-        >
-          <div
-            class="flex gaps align-center"
-          >
-            <i
-              class="Icon material focusable small"
-            >
-              <span
-                class="icon"
-                data-icon-name="layers"
-              >
-                layers
-              </span>
-            </i>
-            <span>
-              test-9
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</body>
-`;

From ec1b88b609cc7670bf523d88c21cdefcc9bf91d8 Mon Sep 17 00:00:00 2001
From: Sebastian Malton <sebastian@malton.name>
Date: Wed, 24 May 2023 15:14:58 -0400
Subject: [PATCH 07/16] chore: Add more test for namespace-select-filter to
 cover new behaviour

Signed-off-by: Sebastian Malton <sebastian@malton.name>
---
 .../namespace-select-filter.test.tsx.snap     | 4210 ++++++++++++++++-
 .../namespace-select-filter/component.tsx     |    2 +
 .../namespace-select-filter.test.tsx          |  193 +-
 3 files changed, 4361 insertions(+), 44 deletions(-)

diff --git a/packages/core/src/renderer/components/namespace-select-filter/__snapshots__/namespace-select-filter.test.tsx.snap b/packages/core/src/renderer/components/namespace-select-filter/__snapshots__/namespace-select-filter.test.tsx.snap
index b8662b524769..b06a45557f27 100644
--- a/packages/core/src/renderer/components/namespace-select-filter/__snapshots__/namespace-select-filter.test.tsx.snap
+++ b/packages/core/src/renderer/components/namespace-select-filter/__snapshots__/namespace-select-filter.test.tsx.snap
@@ -35,6 +35,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves renders 1`] = `
         </div>
         <i
           class="Icon expand-icon material interactive focusable"
+          data-testid="namespace-select-filter-expand-icon"
           tabindex="0"
         >
           <span
@@ -85,6 +86,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked rend
         </div>
         <i
           class="Icon expand-icon material interactive focusable"
+          data-testid="namespace-select-filter-expand-icon"
           tabindex="0"
         >
           <span
@@ -124,6 +126,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked rend
             >
               <i
                 class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-1-select-only"
                 tabindex="0"
               >
                 <span
@@ -133,7 +136,9 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked rend
                   layers
                 </span>
               </i>
-              <div>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-1-select-only"
+              >
                 Select only test-1
               </div>
               <span
@@ -166,6 +171,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked rend
             >
               <i
                 class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-10-select-only"
                 tabindex="0"
               >
                 <span
@@ -175,7 +181,9 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked rend
                   layers
                 </span>
               </i>
-              <div>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-10-select-only"
+              >
                 Select only test-10
               </div>
               <span
@@ -208,6 +216,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked rend
             >
               <i
                 class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-11-select-only"
                 tabindex="0"
               >
                 <span
@@ -217,7 +226,9 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked rend
                   layers
                 </span>
               </i>
-              <div>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-11-select-only"
+              >
                 Select only test-11
               </div>
               <span
@@ -250,6 +261,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked rend
             >
               <i
                 class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-12-select-only"
                 tabindex="0"
               >
                 <span
@@ -259,7 +271,9 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked rend
                   layers
                 </span>
               </i>
-              <div>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-12-select-only"
+              >
                 Select only test-12
               </div>
               <span
@@ -292,6 +306,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked rend
             >
               <i
                 class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-13-select-only"
                 tabindex="0"
               >
                 <span
@@ -301,7 +316,9 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked rend
                   layers
                 </span>
               </i>
-              <div>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-13-select-only"
+              >
                 Select only test-13
               </div>
               <span
@@ -334,6 +351,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked rend
             >
               <i
                 class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-2-select-only"
                 tabindex="0"
               >
                 <span
@@ -343,7 +361,9 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked rend
                   layers
                 </span>
               </i>
-              <div>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-2-select-only"
+              >
                 Select only test-2
               </div>
               <span
@@ -376,6 +396,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked rend
             >
               <i
                 class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-3-select-only"
                 tabindex="0"
               >
                 <span
@@ -385,7 +406,9 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked rend
                   layers
                 </span>
               </i>
-              <div>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-3-select-only"
+              >
                 Select only test-3
               </div>
               <span
@@ -418,6 +441,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked rend
             >
               <i
                 class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-4-select-only"
                 tabindex="0"
               >
                 <span
@@ -427,7 +451,9 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked rend
                   layers
                 </span>
               </i>
-              <div>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-4-select-only"
+              >
                 Select only test-4
               </div>
               <span
@@ -460,6 +486,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked rend
             >
               <i
                 class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-5-select-only"
                 tabindex="0"
               >
                 <span
@@ -469,7 +496,9 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked rend
                   layers
                 </span>
               </i>
-              <div>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-5-select-only"
+              >
                 Select only test-5
               </div>
               <span
@@ -502,6 +531,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked rend
             >
               <i
                 class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-6-select-only"
                 tabindex="0"
               >
                 <span
@@ -511,7 +541,9 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked rend
                   layers
                 </span>
               </i>
-              <div>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-6-select-only"
+              >
                 Select only test-6
               </div>
               <span
@@ -544,6 +576,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked rend
             >
               <i
                 class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-7-select-only"
                 tabindex="0"
               >
                 <span
@@ -553,7 +586,9 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked rend
                   layers
                 </span>
               </i>
-              <div>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-7-select-only"
+              >
                 Select only test-7
               </div>
               <span
@@ -586,6 +621,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked rend
             >
               <i
                 class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-8-select-only"
                 tabindex="0"
               >
                 <span
@@ -595,7 +631,9 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked rend
                   layers
                 </span>
               </i>
-              <div>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-8-select-only"
+              >
                 Select only test-8
               </div>
               <span
@@ -628,6 +666,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked rend
             >
               <i
                 class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-9-select-only"
                 tabindex="0"
               >
                 <span
@@ -637,7 +676,9 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked rend
                   layers
                 </span>
               </i>
-              <div>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-9-select-only"
+              >
                 Select only test-9
               </div>
               <span
@@ -706,6 +747,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
         </div>
         <i
           class="Icon expand-icon material interactive focusable"
+          data-testid="namespace-select-filter-expand-icon"
           tabindex="0"
         >
           <span
@@ -756,6 +798,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
         </div>
         <i
           class="Icon expand-icon material interactive focusable"
+          data-testid="namespace-select-filter-expand-icon"
           tabindex="0"
         >
           <span
@@ -795,6 +838,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
             >
               <i
                 class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-2-select-only"
                 tabindex="0"
               >
                 <span
@@ -804,7 +848,9 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
                   layers
                 </span>
               </i>
-              <div>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-2-select-only"
+              >
                 Select only test-2
               </div>
               <span
@@ -837,6 +883,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
             >
               <i
                 class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-1-select-only"
                 tabindex="0"
               >
                 <span
@@ -846,7 +893,9 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
                   layers
                 </span>
               </i>
-              <div>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-1-select-only"
+              >
                 Select only test-1
               </div>
               <span
@@ -879,6 +928,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
             >
               <i
                 class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-10-select-only"
                 tabindex="0"
               >
                 <span
@@ -888,7 +938,9 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
                   layers
                 </span>
               </i>
-              <div>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-10-select-only"
+              >
                 Select only test-10
               </div>
               <span
@@ -921,6 +973,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
             >
               <i
                 class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-11-select-only"
                 tabindex="0"
               >
                 <span
@@ -930,7 +983,9 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
                   layers
                 </span>
               </i>
-              <div>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-11-select-only"
+              >
                 Select only test-11
               </div>
               <span
@@ -963,6 +1018,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
             >
               <i
                 class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-12-select-only"
                 tabindex="0"
               >
                 <span
@@ -972,7 +1028,9 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
                   layers
                 </span>
               </i>
-              <div>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-12-select-only"
+              >
                 Select only test-12
               </div>
               <span
@@ -1005,6 +1063,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
             >
               <i
                 class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-13-select-only"
                 tabindex="0"
               >
                 <span
@@ -1014,7 +1073,9 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
                   layers
                 </span>
               </i>
-              <div>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-13-select-only"
+              >
                 Select only test-13
               </div>
               <span
@@ -1047,6 +1108,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
             >
               <i
                 class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-3-select-only"
                 tabindex="0"
               >
                 <span
@@ -1056,7 +1118,9 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
                   layers
                 </span>
               </i>
-              <div>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-3-select-only"
+              >
                 Select only test-3
               </div>
               <span
@@ -1089,6 +1153,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
             >
               <i
                 class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-4-select-only"
                 tabindex="0"
               >
                 <span
@@ -1098,7 +1163,9 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
                   layers
                 </span>
               </i>
-              <div>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-4-select-only"
+              >
                 Select only test-4
               </div>
               <span
@@ -1131,6 +1198,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
             >
               <i
                 class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-5-select-only"
                 tabindex="0"
               >
                 <span
@@ -1140,7 +1208,9 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
                   layers
                 </span>
               </i>
-              <div>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-5-select-only"
+              >
                 Select only test-5
               </div>
               <span
@@ -1173,6 +1243,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
             >
               <i
                 class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-6-select-only"
                 tabindex="0"
               >
                 <span
@@ -1182,7 +1253,9 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
                   layers
                 </span>
               </i>
-              <div>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-6-select-only"
+              >
                 Select only test-6
               </div>
               <span
@@ -1215,6 +1288,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
             >
               <i
                 class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-7-select-only"
                 tabindex="0"
               >
                 <span
@@ -1224,7 +1298,9 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
                   layers
                 </span>
               </i>
-              <div>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-7-select-only"
+              >
                 Select only test-7
               </div>
               <span
@@ -1257,6 +1333,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
             >
               <i
                 class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-8-select-only"
                 tabindex="0"
               >
                 <span
@@ -1266,7 +1343,9 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
                   layers
                 </span>
               </i>
-              <div>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-8-select-only"
+              >
                 Select only test-8
               </div>
               <span
@@ -1299,6 +1378,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
             >
               <i
                 class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-9-select-only"
                 tabindex="0"
               >
                 <span
@@ -1308,7 +1388,9 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
                   layers
                 </span>
               </i>
-              <div>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-9-select-only"
+              >
                 Select only test-9
               </div>
               <span
@@ -1377,6 +1459,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
         </div>
         <i
           class="Icon expand-icon material interactive focusable"
+          data-testid="namespace-select-filter-expand-icon"
           tabindex="0"
         >
           <span
@@ -1427,6 +1510,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
         </div>
         <i
           class="Icon expand-icon material interactive focusable"
+          data-testid="namespace-select-filter-expand-icon"
           tabindex="0"
         >
           <span
@@ -1466,6 +1550,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
             >
               <i
                 class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-1-select-only"
                 tabindex="0"
               >
                 <span
@@ -1475,7 +1560,9 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
                   layers
                 </span>
               </i>
-              <div>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-1-select-only"
+              >
                 Select only test-1
               </div>
               <span
@@ -1508,6 +1595,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
             >
               <i
                 class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-2-select-only"
                 tabindex="0"
               >
                 <span
@@ -1517,7 +1605,9 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
                   layers
                 </span>
               </i>
-              <div>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-2-select-only"
+              >
                 Select only test-2
               </div>
               <span
@@ -1550,6 +1640,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
             >
               <i
                 class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-10-select-only"
                 tabindex="0"
               >
                 <span
@@ -1559,7 +1650,9 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
                   layers
                 </span>
               </i>
-              <div>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-10-select-only"
+              >
                 Select only test-10
               </div>
               <span
@@ -1592,6 +1685,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
             >
               <i
                 class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-11-select-only"
                 tabindex="0"
               >
                 <span
@@ -1601,7 +1695,9 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
                   layers
                 </span>
               </i>
-              <div>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-11-select-only"
+              >
                 Select only test-11
               </div>
               <span
@@ -1634,6 +1730,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
             >
               <i
                 class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-12-select-only"
                 tabindex="0"
               >
                 <span
@@ -1643,7 +1740,9 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
                   layers
                 </span>
               </i>
-              <div>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-12-select-only"
+              >
                 Select only test-12
               </div>
               <span
@@ -1676,6 +1775,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
             >
               <i
                 class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-13-select-only"
                 tabindex="0"
               >
                 <span
@@ -1685,7 +1785,9 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
                   layers
                 </span>
               </i>
-              <div>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-13-select-only"
+              >
                 Select only test-13
               </div>
               <span
@@ -1718,6 +1820,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
             >
               <i
                 class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-3-select-only"
                 tabindex="0"
               >
                 <span
@@ -1727,7 +1830,9 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
                   layers
                 </span>
               </i>
-              <div>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-3-select-only"
+              >
                 Select only test-3
               </div>
               <span
@@ -1760,6 +1865,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
             >
               <i
                 class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-4-select-only"
                 tabindex="0"
               >
                 <span
@@ -1769,7 +1875,9 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
                   layers
                 </span>
               </i>
-              <div>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-4-select-only"
+              >
                 Select only test-4
               </div>
               <span
@@ -1802,6 +1910,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
             >
               <i
                 class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-5-select-only"
                 tabindex="0"
               >
                 <span
@@ -1811,7 +1920,9 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
                   layers
                 </span>
               </i>
-              <div>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-5-select-only"
+              >
                 Select only test-5
               </div>
               <span
@@ -1844,6 +1955,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
             >
               <i
                 class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-6-select-only"
                 tabindex="0"
               >
                 <span
@@ -1853,7 +1965,9 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
                   layers
                 </span>
               </i>
-              <div>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-6-select-only"
+              >
                 Select only test-6
               </div>
               <span
@@ -1886,6 +2000,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
             >
               <i
                 class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-7-select-only"
                 tabindex="0"
               >
                 <span
@@ -1895,7 +2010,9 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
                   layers
                 </span>
               </i>
-              <div>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-7-select-only"
+              >
                 Select only test-7
               </div>
               <span
@@ -1928,6 +2045,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
             >
               <i
                 class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-8-select-only"
                 tabindex="0"
               >
                 <span
@@ -1937,7 +2055,9 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
                   layers
                 </span>
               </i>
-              <div>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-8-select-only"
+              >
                 Select only test-8
               </div>
               <span
@@ -1970,6 +2090,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
             >
               <i
                 class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-9-select-only"
                 tabindex="0"
               >
                 <span
@@ -1979,7 +2100,9 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
                   layers
                 </span>
               </i>
-              <div>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-9-select-only"
+              >
                 Select only test-9
               </div>
               <span
@@ -2012,3 +2135,4012 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
   </div>
 </body>
 `;
+
+exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when clicked again renders 1`] = `
+<body>
+  <div>
+    <div
+      class="namespace-select-filter"
+      data-testid="namespace-select-filter"
+      id="namespace-select-filter"
+      tabindex="1"
+    >
+      <div
+        class="menu"
+      >
+        <div
+          class="non-icon"
+        >
+          <input
+            data-testid="namespace-select-filter-input"
+            id="namespace-select-filter-filter"
+            type="text"
+            value=""
+          />
+          <div
+            class="gradient left"
+          />
+          <label
+            for="namespace-select-filter-filter"
+          >
+            All namespaces
+          </label>
+          <div
+            class="gradient right"
+          />
+        </div>
+        <i
+          class="Icon expand-icon material interactive focusable"
+          data-testid="namespace-select-filter-expand-icon"
+          tabindex="0"
+        >
+          <span
+            class="icon"
+            data-icon-name="expand_less"
+          >
+            expand_less
+          </span>
+        </i>
+      </div>
+      <div
+        class="list-container"
+        data-testid="namespace-select-filter-list-container"
+      >
+        <div
+          class="list"
+          style="position: relative; height: 300px; width: 300px; overflow: auto; will-change: transform; direction: ltr;"
+        >
+          <ul
+            style="height: 406px; width: 100%;"
+          >
+            <li
+              class="option flex gaps align-center all-namespaces"
+              data-testid="namespace-select-filter-option-All Namespaces"
+              style="position: absolute; left: 0px; top: 0px; height: 29px; width: 100%;"
+            >
+              <span
+                class="data"
+              >
+                All Namespaces
+              </span>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-1"
+              style="position: absolute; left: 0px; top: 29px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-1-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-1-select-only"
+              >
+                Select only test-1
+              </div>
+              <span
+                class="data"
+              >
+                test-1
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-1-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-1-selected"
+              >
+                Remove test-1 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-10"
+              style="position: absolute; left: 0px; top: 58px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-10-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-10-select-only"
+              >
+                Select only test-10
+              </div>
+              <span
+                class="data"
+              >
+                test-10
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-10-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-10-selected"
+              >
+                Remove test-10 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-11"
+              style="position: absolute; left: 0px; top: 87px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-11-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-11-select-only"
+              >
+                Select only test-11
+              </div>
+              <span
+                class="data"
+              >
+                test-11
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-11-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-11-selected"
+              >
+                Remove test-11 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-12"
+              style="position: absolute; left: 0px; top: 116px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-12-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-12-select-only"
+              >
+                Select only test-12
+              </div>
+              <span
+                class="data"
+              >
+                test-12
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-12-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-12-selected"
+              >
+                Remove test-12 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-13"
+              style="position: absolute; left: 0px; top: 145px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-13-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-13-select-only"
+              >
+                Select only test-13
+              </div>
+              <span
+                class="data"
+              >
+                test-13
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-13-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-13-selected"
+              >
+                Remove test-13 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-2"
+              style="position: absolute; left: 0px; top: 174px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-2-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-2-select-only"
+              >
+                Select only test-2
+              </div>
+              <span
+                class="data"
+              >
+                test-2
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-2-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-2-selected"
+              >
+                Remove test-2 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-3"
+              style="position: absolute; left: 0px; top: 203px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-3-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-3-select-only"
+              >
+                Select only test-3
+              </div>
+              <span
+                class="data"
+              >
+                test-3
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-3-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-3-selected"
+              >
+                Remove test-3 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-4"
+              style="position: absolute; left: 0px; top: 232px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-4-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-4-select-only"
+              >
+                Select only test-4
+              </div>
+              <span
+                class="data"
+              >
+                test-4
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-4-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-4-selected"
+              >
+                Remove test-4 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-5"
+              style="position: absolute; left: 0px; top: 261px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-5-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-5-select-only"
+              >
+                Select only test-5
+              </div>
+              <span
+                class="data"
+              >
+                test-5
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-5-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-5-selected"
+              >
+                Remove test-5 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-6"
+              style="position: absolute; left: 0px; top: 290px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-6-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-6-select-only"
+              >
+                Select only test-6
+              </div>
+              <span
+                class="data"
+              >
+                test-6
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-6-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-6-selected"
+              >
+                Remove test-6 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-7"
+              style="position: absolute; left: 0px; top: 319px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-7-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-7-select-only"
+              >
+                Select only test-7
+              </div>
+              <span
+                class="data"
+              >
+                test-7
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-7-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-7-selected"
+              >
+                Remove test-7 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-8"
+              style="position: absolute; left: 0px; top: 348px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-8-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-8-select-only"
+              >
+                Select only test-8
+              </div>
+              <span
+                class="data"
+              >
+                test-8
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-8-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-8-selected"
+              >
+                Remove test-8 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-9"
+              style="position: absolute; left: 0px; top: 377px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-9-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-9-select-only"
+              >
+                Select only test-9
+              </div>
+              <span
+                class="data"
+              >
+                test-9
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-9-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-9-selected"
+              >
+                Remove test-9 from selection
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+`;
+
+exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when clicking the remove from selection button for 'test-2' renders 1`] = `
+<body>
+  <div>
+    <div
+      class="namespace-select-filter"
+      data-testid="namespace-select-filter"
+      id="namespace-select-filter"
+      tabindex="1"
+    >
+      <div
+        class="menu"
+      >
+        <div
+          class="non-icon"
+        >
+          <input
+            data-testid="namespace-select-filter-input"
+            id="namespace-select-filter-filter"
+            type="text"
+            value=""
+          />
+          <div
+            class="gradient left"
+          />
+          <label
+            for="namespace-select-filter-filter"
+          >
+            Namespaces: test-1, test-10, test-11, test-12, test-13, test-3, test-4, test-5, test-6, test-7, test-8, test-9
+          </label>
+          <div
+            class="gradient right"
+          />
+        </div>
+        <i
+          class="Icon expand-icon material interactive focusable"
+          data-testid="namespace-select-filter-expand-icon"
+          tabindex="0"
+        >
+          <span
+            class="icon"
+            data-icon-name="expand_less"
+          >
+            expand_less
+          </span>
+        </i>
+      </div>
+      <div
+        class="list-container"
+        data-testid="namespace-select-filter-list-container"
+      >
+        <div
+          class="list"
+          style="position: relative; height: 300px; width: 300px; overflow: auto; will-change: transform; direction: ltr;"
+        >
+          <ul
+            style="height: 406px; width: 100%;"
+          >
+            <li
+              class="option flex gaps align-center all-namespaces"
+              data-testid="namespace-select-filter-option-All Namespaces"
+              style="position: absolute; left: 0px; top: 0px; height: 29px; width: 100%;"
+            >
+              <span
+                class="data"
+              >
+                All Namespaces
+              </span>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-1"
+              style="position: absolute; left: 0px; top: 29px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-1-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-1-select-only"
+              >
+                Select only test-1
+              </div>
+              <span
+                class="data"
+              >
+                test-1
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-1-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-1-selected"
+              >
+                Remove test-1 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-10"
+              style="position: absolute; left: 0px; top: 58px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-10-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-10-select-only"
+              >
+                Select only test-10
+              </div>
+              <span
+                class="data"
+              >
+                test-10
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-10-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-10-selected"
+              >
+                Remove test-10 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-11"
+              style="position: absolute; left: 0px; top: 87px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-11-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-11-select-only"
+              >
+                Select only test-11
+              </div>
+              <span
+                class="data"
+              >
+                test-11
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-11-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-11-selected"
+              >
+                Remove test-11 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-12"
+              style="position: absolute; left: 0px; top: 116px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-12-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-12-select-only"
+              >
+                Select only test-12
+              </div>
+              <span
+                class="data"
+              >
+                test-12
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-12-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-12-selected"
+              >
+                Remove test-12 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-13"
+              style="position: absolute; left: 0px; top: 145px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-13-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-13-select-only"
+              >
+                Select only test-13
+              </div>
+              <span
+                class="data"
+              >
+                test-13
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-13-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-13-selected"
+              >
+                Remove test-13 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-2"
+              style="position: absolute; left: 0px; top: 174px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-2-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-2-select-only"
+              >
+                Select only test-2
+              </div>
+              <span
+                class="data"
+              >
+                test-2
+              </span>
+              <i
+                class="Icon add-selection-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-2-add-to-selection"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="add_box"
+                >
+                  add_box
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-2-add-to-selection"
+              >
+                Add test-2 to selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-3"
+              style="position: absolute; left: 0px; top: 203px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-3-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-3-select-only"
+              >
+                Select only test-3
+              </div>
+              <span
+                class="data"
+              >
+                test-3
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-3-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-3-selected"
+              >
+                Remove test-3 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-4"
+              style="position: absolute; left: 0px; top: 232px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-4-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-4-select-only"
+              >
+                Select only test-4
+              </div>
+              <span
+                class="data"
+              >
+                test-4
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-4-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-4-selected"
+              >
+                Remove test-4 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-5"
+              style="position: absolute; left: 0px; top: 261px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-5-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-5-select-only"
+              >
+                Select only test-5
+              </div>
+              <span
+                class="data"
+              >
+                test-5
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-5-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-5-selected"
+              >
+                Remove test-5 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-6"
+              style="position: absolute; left: 0px; top: 290px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-6-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-6-select-only"
+              >
+                Select only test-6
+              </div>
+              <span
+                class="data"
+              >
+                test-6
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-6-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-6-selected"
+              >
+                Remove test-6 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-7"
+              style="position: absolute; left: 0px; top: 319px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-7-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-7-select-only"
+              >
+                Select only test-7
+              </div>
+              <span
+                class="data"
+              >
+                test-7
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-7-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-7-selected"
+              >
+                Remove test-7 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-8"
+              style="position: absolute; left: 0px; top: 348px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-8-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-8-select-only"
+              >
+                Select only test-8
+              </div>
+              <span
+                class="data"
+              >
+                test-8
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-8-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-8-selected"
+              >
+                Remove test-8 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-9"
+              style="position: absolute; left: 0px; top: 377px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-9-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-9-select-only"
+              >
+                Select only test-9
+              </div>
+              <span
+                class="data"
+              >
+                test-9
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-9-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-9-selected"
+              >
+                Remove test-9 from selection
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+`;
+
+exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when clicking the remove from selection button for 'test-2' when clicking the remove from selection button for 'test-3' renders 1`] = `
+<body>
+  <div>
+    <div
+      class="namespace-select-filter"
+      data-testid="namespace-select-filter"
+      id="namespace-select-filter"
+      tabindex="1"
+    >
+      <div
+        class="menu"
+      >
+        <div
+          class="non-icon"
+        >
+          <input
+            data-testid="namespace-select-filter-input"
+            id="namespace-select-filter-filter"
+            type="text"
+            value=""
+          />
+          <div
+            class="gradient left"
+          />
+          <label
+            for="namespace-select-filter-filter"
+          >
+            Namespaces: test-1, test-10, test-11, test-12, test-13, test-4, test-5, test-6, test-7, test-8, test-9
+          </label>
+          <div
+            class="gradient right"
+          />
+        </div>
+        <i
+          class="Icon expand-icon material interactive focusable"
+          data-testid="namespace-select-filter-expand-icon"
+          tabindex="0"
+        >
+          <span
+            class="icon"
+            data-icon-name="expand_less"
+          >
+            expand_less
+          </span>
+        </i>
+      </div>
+      <div
+        class="list-container"
+        data-testid="namespace-select-filter-list-container"
+      >
+        <div
+          class="list"
+          style="position: relative; height: 300px; width: 300px; overflow: auto; will-change: transform; direction: ltr;"
+        >
+          <ul
+            style="height: 406px; width: 100%;"
+          >
+            <li
+              class="option flex gaps align-center all-namespaces"
+              data-testid="namespace-select-filter-option-All Namespaces"
+              style="position: absolute; left: 0px; top: 0px; height: 29px; width: 100%;"
+            >
+              <span
+                class="data"
+              >
+                All Namespaces
+              </span>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-1"
+              style="position: absolute; left: 0px; top: 29px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-1-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-1-select-only"
+              >
+                Select only test-1
+              </div>
+              <span
+                class="data"
+              >
+                test-1
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-1-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-1-selected"
+              >
+                Remove test-1 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-10"
+              style="position: absolute; left: 0px; top: 58px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-10-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-10-select-only"
+              >
+                Select only test-10
+              </div>
+              <span
+                class="data"
+              >
+                test-10
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-10-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-10-selected"
+              >
+                Remove test-10 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-11"
+              style="position: absolute; left: 0px; top: 87px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-11-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-11-select-only"
+              >
+                Select only test-11
+              </div>
+              <span
+                class="data"
+              >
+                test-11
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-11-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-11-selected"
+              >
+                Remove test-11 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-12"
+              style="position: absolute; left: 0px; top: 116px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-12-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-12-select-only"
+              >
+                Select only test-12
+              </div>
+              <span
+                class="data"
+              >
+                test-12
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-12-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-12-selected"
+              >
+                Remove test-12 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-13"
+              style="position: absolute; left: 0px; top: 145px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-13-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-13-select-only"
+              >
+                Select only test-13
+              </div>
+              <span
+                class="data"
+              >
+                test-13
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-13-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-13-selected"
+              >
+                Remove test-13 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-2"
+              style="position: absolute; left: 0px; top: 174px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-2-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-2-select-only"
+              >
+                Select only test-2
+              </div>
+              <span
+                class="data"
+              >
+                test-2
+              </span>
+              <i
+                class="Icon add-selection-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-2-add-to-selection"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="add_box"
+                >
+                  add_box
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-2-add-to-selection"
+              >
+                Add test-2 to selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-3"
+              style="position: absolute; left: 0px; top: 203px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-3-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-3-select-only"
+              >
+                Select only test-3
+              </div>
+              <span
+                class="data"
+              >
+                test-3
+              </span>
+              <i
+                class="Icon add-selection-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-3-add-to-selection"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="add_box"
+                >
+                  add_box
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-3-add-to-selection"
+              >
+                Add test-3 to selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-4"
+              style="position: absolute; left: 0px; top: 232px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-4-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-4-select-only"
+              >
+                Select only test-4
+              </div>
+              <span
+                class="data"
+              >
+                test-4
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-4-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-4-selected"
+              >
+                Remove test-4 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-5"
+              style="position: absolute; left: 0px; top: 261px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-5-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-5-select-only"
+              >
+                Select only test-5
+              </div>
+              <span
+                class="data"
+              >
+                test-5
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-5-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-5-selected"
+              >
+                Remove test-5 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-6"
+              style="position: absolute; left: 0px; top: 290px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-6-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-6-select-only"
+              >
+                Select only test-6
+              </div>
+              <span
+                class="data"
+              >
+                test-6
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-6-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-6-selected"
+              >
+                Remove test-6 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-7"
+              style="position: absolute; left: 0px; top: 319px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-7-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-7-select-only"
+              >
+                Select only test-7
+              </div>
+              <span
+                class="data"
+              >
+                test-7
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-7-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-7-selected"
+              >
+                Remove test-7 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-8"
+              style="position: absolute; left: 0px; top: 348px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-8-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-8-select-only"
+              >
+                Select only test-8
+              </div>
+              <span
+                class="data"
+              >
+                test-8
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-8-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-8-selected"
+              >
+                Remove test-8 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-9"
+              style="position: absolute; left: 0px; top: 377px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-9-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-9-select-only"
+              >
+                Select only test-9
+              </div>
+              <span
+                class="data"
+              >
+                test-9
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-9-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-9-selected"
+              >
+                Remove test-9 from selection
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+`;
+
+exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when clicking the remove from selection button for 'test-2' when clicking the remove from selection button for 'test-3' when clicking the add to selection button for 'test-2' renders 1`] = `
+<body>
+  <div>
+    <div
+      class="namespace-select-filter"
+      data-testid="namespace-select-filter"
+      id="namespace-select-filter"
+      tabindex="1"
+    >
+      <div
+        class="menu"
+      >
+        <div
+          class="non-icon"
+        >
+          <input
+            data-testid="namespace-select-filter-input"
+            id="namespace-select-filter-filter"
+            type="text"
+            value=""
+          />
+          <div
+            class="gradient left"
+          />
+          <label
+            for="namespace-select-filter-filter"
+          >
+            Namespaces: test-1, test-10, test-11, test-12, test-13, test-2, test-4, test-5, test-6, test-7, test-8, test-9
+          </label>
+          <div
+            class="gradient right"
+          />
+        </div>
+        <i
+          class="Icon expand-icon material interactive focusable"
+          data-testid="namespace-select-filter-expand-icon"
+          tabindex="0"
+        >
+          <span
+            class="icon"
+            data-icon-name="expand_less"
+          >
+            expand_less
+          </span>
+        </i>
+      </div>
+      <div
+        class="list-container"
+        data-testid="namespace-select-filter-list-container"
+      >
+        <div
+          class="list"
+          style="position: relative; height: 300px; width: 300px; overflow: auto; will-change: transform; direction: ltr;"
+        >
+          <ul
+            style="height: 406px; width: 100%;"
+          >
+            <li
+              class="option flex gaps align-center all-namespaces"
+              data-testid="namespace-select-filter-option-All Namespaces"
+              style="position: absolute; left: 0px; top: 0px; height: 29px; width: 100%;"
+            >
+              <span
+                class="data"
+              >
+                All Namespaces
+              </span>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-1"
+              style="position: absolute; left: 0px; top: 29px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-1-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-1-select-only"
+              >
+                Select only test-1
+              </div>
+              <span
+                class="data"
+              >
+                test-1
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-1-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-1-selected"
+              >
+                Remove test-1 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-10"
+              style="position: absolute; left: 0px; top: 58px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-10-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-10-select-only"
+              >
+                Select only test-10
+              </div>
+              <span
+                class="data"
+              >
+                test-10
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-10-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-10-selected"
+              >
+                Remove test-10 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-11"
+              style="position: absolute; left: 0px; top: 87px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-11-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-11-select-only"
+              >
+                Select only test-11
+              </div>
+              <span
+                class="data"
+              >
+                test-11
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-11-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-11-selected"
+              >
+                Remove test-11 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-12"
+              style="position: absolute; left: 0px; top: 116px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-12-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-12-select-only"
+              >
+                Select only test-12
+              </div>
+              <span
+                class="data"
+              >
+                test-12
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-12-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-12-selected"
+              >
+                Remove test-12 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-13"
+              style="position: absolute; left: 0px; top: 145px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-13-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-13-select-only"
+              >
+                Select only test-13
+              </div>
+              <span
+                class="data"
+              >
+                test-13
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-13-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-13-selected"
+              >
+                Remove test-13 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-2"
+              style="position: absolute; left: 0px; top: 174px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-2-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-2-select-only"
+              >
+                Select only test-2
+              </div>
+              <span
+                class="data"
+              >
+                test-2
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-2-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-2-selected"
+              >
+                Remove test-2 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-3"
+              style="position: absolute; left: 0px; top: 203px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-3-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-3-select-only"
+              >
+                Select only test-3
+              </div>
+              <span
+                class="data"
+              >
+                test-3
+              </span>
+              <i
+                class="Icon add-selection-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-3-add-to-selection"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="add_box"
+                >
+                  add_box
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-3-add-to-selection"
+              >
+                Add test-3 to selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-4"
+              style="position: absolute; left: 0px; top: 232px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-4-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-4-select-only"
+              >
+                Select only test-4
+              </div>
+              <span
+                class="data"
+              >
+                test-4
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-4-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-4-selected"
+              >
+                Remove test-4 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-5"
+              style="position: absolute; left: 0px; top: 261px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-5-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-5-select-only"
+              >
+                Select only test-5
+              </div>
+              <span
+                class="data"
+              >
+                test-5
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-5-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-5-selected"
+              >
+                Remove test-5 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-6"
+              style="position: absolute; left: 0px; top: 290px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-6-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-6-select-only"
+              >
+                Select only test-6
+              </div>
+              <span
+                class="data"
+              >
+                test-6
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-6-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-6-selected"
+              >
+                Remove test-6 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-7"
+              style="position: absolute; left: 0px; top: 319px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-7-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-7-select-only"
+              >
+                Select only test-7
+              </div>
+              <span
+                class="data"
+              >
+                test-7
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-7-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-7-selected"
+              >
+                Remove test-7 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-8"
+              style="position: absolute; left: 0px; top: 348px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-8-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-8-select-only"
+              >
+                Select only test-8
+              </div>
+              <span
+                class="data"
+              >
+                test-8
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-8-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-8-selected"
+              >
+                Remove test-8 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-9"
+              style="position: absolute; left: 0px; top: 377px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-9-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-9-select-only"
+              >
+                Select only test-9
+              </div>
+              <span
+                class="data"
+              >
+                test-9
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-9-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-9-selected"
+              >
+                Remove test-9 from selection
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+`;
+
+exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when clicking the remove from selection button for 'test-2' when clicking the remove from selection button for 'test-3' when clicking the add to selection button for 'test-2' when clicking the 'select only' button for 'test-5' renders 1`] = `
+<body>
+  <div>
+    <div
+      class="namespace-select-filter"
+      data-testid="namespace-select-filter"
+      id="namespace-select-filter"
+      tabindex="1"
+    >
+      <div
+        class="menu"
+      >
+        <div
+          class="non-icon"
+        >
+          <input
+            data-testid="namespace-select-filter-input"
+            id="namespace-select-filter-filter"
+            type="text"
+            value=""
+          />
+          <div
+            class="gradient left"
+          />
+          <label
+            for="namespace-select-filter-filter"
+          >
+            Namespace: test-5
+          </label>
+          <div
+            class="gradient right"
+          />
+        </div>
+        <i
+          class="Icon expand-icon material interactive focusable"
+          data-testid="namespace-select-filter-expand-icon"
+          tabindex="0"
+        >
+          <span
+            class="icon"
+            data-icon-name="expand_more"
+          >
+            expand_more
+          </span>
+        </i>
+      </div>
+    </div>
+  </div>
+</body>
+`;
+
+exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when typing a glob style filter into the filter input renders 1`] = `
+<body>
+  <div>
+    <div
+      class="namespace-select-filter"
+      data-testid="namespace-select-filter"
+      id="namespace-select-filter"
+      tabindex="1"
+    >
+      <div
+        class="menu"
+      >
+        <div
+          class="non-icon"
+        >
+          <input
+            data-testid="namespace-select-filter-input"
+            id="namespace-select-filter-filter"
+            type="text"
+            value="1*"
+          />
+          <div
+            class="gradient left"
+          />
+          <label
+            for="namespace-select-filter-filter"
+          >
+            1*
+          </label>
+          <div
+            class="gradient right"
+          />
+        </div>
+        <i
+          class="Icon expand-icon material interactive focusable"
+          data-testid="namespace-select-filter-expand-icon"
+          tabindex="0"
+        >
+          <span
+            class="icon"
+            data-icon-name="expand_less"
+          >
+            expand_less
+          </span>
+        </i>
+      </div>
+      <div
+        class="list-container"
+        data-testid="namespace-select-filter-list-container"
+      >
+        <div
+          class="list"
+          style="position: relative; height: 174px; width: 300px; overflow: auto; will-change: transform; direction: ltr;"
+        >
+          <ul
+            style="height: 174px; width: 100%;"
+          >
+            <li
+              class="option flex gaps align-center all-namespaces"
+              data-testid="namespace-select-filter-option-All Namespaces"
+              style="position: absolute; left: 0px; top: 0px; height: 29px; width: 100%;"
+            >
+              <span
+                class="data"
+              >
+                All Namespaces
+              </span>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-1"
+              style="position: absolute; left: 0px; top: 29px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-1-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-1-select-only"
+              >
+                Select only test-1
+              </div>
+              <span
+                class="data"
+              >
+                test-1
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-1-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-1-selected"
+              >
+                Remove test-1 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-10"
+              style="position: absolute; left: 0px; top: 58px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-10-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-10-select-only"
+              >
+                Select only test-10
+              </div>
+              <span
+                class="data"
+              >
+                test-10
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-10-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-10-selected"
+              >
+                Remove test-10 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-11"
+              style="position: absolute; left: 0px; top: 87px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-11-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-11-select-only"
+              >
+                Select only test-11
+              </div>
+              <span
+                class="data"
+              >
+                test-11
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-11-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-11-selected"
+              >
+                Remove test-11 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-12"
+              style="position: absolute; left: 0px; top: 116px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-12-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-12-select-only"
+              >
+                Select only test-12
+              </div>
+              <span
+                class="data"
+              >
+                test-12
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-12-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-12-selected"
+              >
+                Remove test-12 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-13"
+              style="position: absolute; left: 0px; top: 145px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-13-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-13-select-only"
+              >
+                Select only test-13
+              </div>
+              <span
+                class="data"
+              >
+                test-13
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-13-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-13-selected"
+              >
+                Remove test-13 from selection
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+`;
+
+exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when typing in the filter input renders 1`] = `
+<body>
+  <div>
+    <div
+      class="namespace-select-filter"
+      data-testid="namespace-select-filter"
+      id="namespace-select-filter"
+      tabindex="1"
+    >
+      <div
+        class="menu"
+      >
+        <div
+          class="non-icon"
+        >
+          <input
+            data-testid="namespace-select-filter-input"
+            id="namespace-select-filter-filter"
+            type="text"
+            value="1"
+          />
+          <div
+            class="gradient left"
+          />
+          <label
+            for="namespace-select-filter-filter"
+          >
+            1
+          </label>
+          <div
+            class="gradient right"
+          />
+        </div>
+        <i
+          class="Icon expand-icon material interactive focusable"
+          data-testid="namespace-select-filter-expand-icon"
+          tabindex="0"
+        >
+          <span
+            class="icon"
+            data-icon-name="expand_less"
+          >
+            expand_less
+          </span>
+        </i>
+      </div>
+      <div
+        class="list-container"
+        data-testid="namespace-select-filter-list-container"
+      >
+        <div
+          class="list"
+          style="position: relative; height: 174px; width: 300px; overflow: auto; will-change: transform; direction: ltr;"
+        >
+          <ul
+            style="height: 174px; width: 100%;"
+          >
+            <li
+              class="option flex gaps align-center all-namespaces"
+              data-testid="namespace-select-filter-option-All Namespaces"
+              style="position: absolute; left: 0px; top: 0px; height: 29px; width: 100%;"
+            >
+              <span
+                class="data"
+              >
+                All Namespaces
+              </span>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-1"
+              style="position: absolute; left: 0px; top: 29px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-1-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-1-select-only"
+              >
+                Select only test-1
+              </div>
+              <span
+                class="data"
+              >
+                test-1
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-1-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-1-selected"
+              >
+                Remove test-1 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-10"
+              style="position: absolute; left: 0px; top: 58px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-10-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-10-select-only"
+              >
+                Select only test-10
+              </div>
+              <span
+                class="data"
+              >
+                test-10
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-10-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-10-selected"
+              >
+                Remove test-10 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-11"
+              style="position: absolute; left: 0px; top: 87px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-11-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-11-select-only"
+              >
+                Select only test-11
+              </div>
+              <span
+                class="data"
+              >
+                test-11
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-11-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-11-selected"
+              >
+                Remove test-11 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-12"
+              style="position: absolute; left: 0px; top: 116px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-12-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-12-select-only"
+              >
+                Select only test-12
+              </div>
+              <span
+                class="data"
+              >
+                test-12
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-12-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-12-selected"
+              >
+                Remove test-12 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-13"
+              style="position: absolute; left: 0px; top: 145px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-13-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-13-select-only"
+              >
+                Select only test-13
+              </div>
+              <span
+                class="data"
+              >
+                test-13
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-13-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-13-selected"
+              >
+                Remove test-13 from selection
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+`;
+
+exports[`<NamespaceSelectFilter /> once the subscribe resolves when menu expand icon is clicked renders 1`] = `
+<body>
+  <div>
+    <div
+      class="namespace-select-filter"
+      data-testid="namespace-select-filter"
+      id="namespace-select-filter"
+      tabindex="1"
+    >
+      <div
+        class="menu"
+      >
+        <div
+          class="non-icon"
+        >
+          <input
+            data-testid="namespace-select-filter-input"
+            id="namespace-select-filter-filter"
+            type="text"
+            value=""
+          />
+          <div
+            class="gradient left"
+          />
+          <label
+            for="namespace-select-filter-filter"
+          >
+            All namespaces
+          </label>
+          <div
+            class="gradient right"
+          />
+        </div>
+        <i
+          class="Icon expand-icon material interactive focusable"
+          data-testid="namespace-select-filter-expand-icon"
+          tabindex="0"
+        >
+          <span
+            class="icon"
+            data-icon-name="expand_less"
+          >
+            expand_less
+          </span>
+        </i>
+      </div>
+      <div
+        class="list-container"
+        data-testid="namespace-select-filter-list-container"
+      >
+        <div
+          class="list"
+          style="position: relative; height: 300px; width: 300px; overflow: auto; will-change: transform; direction: ltr;"
+        >
+          <ul
+            style="height: 406px; width: 100%;"
+          >
+            <li
+              class="option flex gaps align-center all-namespaces"
+              data-testid="namespace-select-filter-option-All Namespaces"
+              style="position: absolute; left: 0px; top: 0px; height: 29px; width: 100%;"
+            >
+              <span
+                class="data"
+              >
+                All Namespaces
+              </span>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-1"
+              style="position: absolute; left: 0px; top: 29px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-1-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-1-select-only"
+              >
+                Select only test-1
+              </div>
+              <span
+                class="data"
+              >
+                test-1
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-1-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-1-selected"
+              >
+                Remove test-1 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-10"
+              style="position: absolute; left: 0px; top: 58px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-10-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-10-select-only"
+              >
+                Select only test-10
+              </div>
+              <span
+                class="data"
+              >
+                test-10
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-10-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-10-selected"
+              >
+                Remove test-10 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-11"
+              style="position: absolute; left: 0px; top: 87px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-11-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-11-select-only"
+              >
+                Select only test-11
+              </div>
+              <span
+                class="data"
+              >
+                test-11
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-11-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-11-selected"
+              >
+                Remove test-11 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-12"
+              style="position: absolute; left: 0px; top: 116px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-12-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-12-select-only"
+              >
+                Select only test-12
+              </div>
+              <span
+                class="data"
+              >
+                test-12
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-12-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-12-selected"
+              >
+                Remove test-12 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-13"
+              style="position: absolute; left: 0px; top: 145px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-13-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-13-select-only"
+              >
+                Select only test-13
+              </div>
+              <span
+                class="data"
+              >
+                test-13
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-13-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-13-selected"
+              >
+                Remove test-13 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-2"
+              style="position: absolute; left: 0px; top: 174px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-2-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-2-select-only"
+              >
+                Select only test-2
+              </div>
+              <span
+                class="data"
+              >
+                test-2
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-2-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-2-selected"
+              >
+                Remove test-2 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-3"
+              style="position: absolute; left: 0px; top: 203px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-3-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-3-select-only"
+              >
+                Select only test-3
+              </div>
+              <span
+                class="data"
+              >
+                test-3
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-3-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-3-selected"
+              >
+                Remove test-3 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-4"
+              style="position: absolute; left: 0px; top: 232px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-4-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-4-select-only"
+              >
+                Select only test-4
+              </div>
+              <span
+                class="data"
+              >
+                test-4
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-4-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-4-selected"
+              >
+                Remove test-4 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-5"
+              style="position: absolute; left: 0px; top: 261px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-5-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-5-select-only"
+              >
+                Select only test-5
+              </div>
+              <span
+                class="data"
+              >
+                test-5
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-5-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-5-selected"
+              >
+                Remove test-5 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-6"
+              style="position: absolute; left: 0px; top: 290px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-6-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-6-select-only"
+              >
+                Select only test-6
+              </div>
+              <span
+                class="data"
+              >
+                test-6
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-6-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-6-selected"
+              >
+                Remove test-6 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-7"
+              style="position: absolute; left: 0px; top: 319px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-7-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-7-select-only"
+              >
+                Select only test-7
+              </div>
+              <span
+                class="data"
+              >
+                test-7
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-7-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-7-selected"
+              >
+                Remove test-7 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-8"
+              style="position: absolute; left: 0px; top: 348px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-8-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-8-select-only"
+              >
+                Select only test-8
+              </div>
+              <span
+                class="data"
+              >
+                test-8
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-8-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-8-selected"
+              >
+                Remove test-8 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-9"
+              style="position: absolute; left: 0px; top: 377px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-9-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-9-select-only"
+              >
+                Select only test-9
+              </div>
+              <span
+                class="data"
+              >
+                test-9
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-9-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-9-selected"
+              >
+                Remove test-9 from selection
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+`;
+
+exports[`<NamespaceSelectFilter /> once the subscribe resolves when menu expand icon is clicked when menu expand icon is clicked again renders 1`] = `
+<body>
+  <div>
+    <div
+      class="namespace-select-filter"
+      data-testid="namespace-select-filter"
+      id="namespace-select-filter"
+      tabindex="1"
+    >
+      <div
+        class="menu"
+      >
+        <div
+          class="non-icon"
+        >
+          <input
+            data-testid="namespace-select-filter-input"
+            id="namespace-select-filter-filter"
+            type="text"
+            value=""
+          />
+          <div
+            class="gradient left"
+          />
+          <label
+            for="namespace-select-filter-filter"
+          >
+            All namespaces
+          </label>
+          <div
+            class="gradient right"
+          />
+        </div>
+        <i
+          class="Icon expand-icon material interactive focusable"
+          data-testid="namespace-select-filter-expand-icon"
+          tabindex="0"
+        >
+          <span
+            class="icon"
+            data-icon-name="expand_more"
+          >
+            expand_more
+          </span>
+        </i>
+      </div>
+    </div>
+  </div>
+</body>
+`;
diff --git a/packages/core/src/renderer/components/namespace-select-filter/component.tsx b/packages/core/src/renderer/components/namespace-select-filter/component.tsx
index 379232b581ed..1fa716ce656c 100644
--- a/packages/core/src/renderer/components/namespace-select-filter/component.tsx
+++ b/packages/core/src/renderer/components/namespace-select-filter/component.tsx
@@ -62,6 +62,7 @@ const NamespaceSelectFilterMenu = observer(({ id, model }: Dependencies & Namesp
       <Icon
         className="expand-icon"
         material={model.menu.isOpen.get() ? "expand_less" : "expand_more"}
+        data-testid="namespace-select-filter-expand-icon"
         onClick={model.menu.toggle}
       />
     </div>
@@ -184,6 +185,7 @@ const NamespaceSelectFilterRow = observer(({ index, style, data: { model, items
                 preferredPositions: TooltipPosition.LEFT,
                 children: `Select only ${option.value}`,
               }}
+              data-testid={`namespace-select-filter-option-${option.value}-select-only`}
             />
             <span className="data">{option.value}</span>
             {renderSingleOptionIcons(option.value, option, model)}
diff --git a/packages/core/src/renderer/components/namespace-select-filter/namespace-select-filter.test.tsx b/packages/core/src/renderer/components/namespace-select-filter/namespace-select-filter.test.tsx
index 5b1ea870d84f..8772ece9f1c8 100644
--- a/packages/core/src/renderer/components/namespace-select-filter/namespace-select-filter.test.tsx
+++ b/packages/core/src/renderer/components/namespace-select-filter/namespace-select-filter.test.tsx
@@ -26,6 +26,7 @@ import { renderFor } from "../test-utils/renderFor";
 import { NamespaceSelectFilter } from "./component";
 import type { NamespaceStore } from "../namespaces/store";
 import namespaceStoreInjectable from "../namespaces/store.injectable";
+import userEvent from "@testing-library/user-event";
 
 function createNamespace(name: string): Namespace {
   return new Namespace({
@@ -111,6 +112,34 @@ describe("<NamespaceSelectFilter />", () => {
       expect(result.baseElement).toMatchSnapshot();
     });
 
+    describe("when menu expand icon is clicked", () => {
+      beforeEach(() => {
+        result.getByTestId("namespace-select-filter-expand-icon").click();
+      });
+
+      it("renders", () => {
+        expect(result.baseElement).toMatchSnapshot();
+      });
+
+      it("menu is open", () => {
+        expect(result.getByTestId("namespace-select-filter-list-container")).toBeInTheDocument();
+      });
+
+      describe("when menu expand icon is clicked again", () => {
+        beforeEach(() => {
+          result.getByTestId("namespace-select-filter-expand-icon").click();
+        });
+
+        it("renders", () => {
+          expect(result.baseElement).toMatchSnapshot();
+        });
+
+        it("menu is closed", () => {
+          expect(result.queryByTestId("namespace-select-filter-list-container")).not.toBeInTheDocument();
+        });
+      });
+    });
+
     describe("when clicked", () => {
       beforeEach(() => {
         result.getByTestId("namespace-select-filter-input").click();
@@ -121,7 +150,11 @@ describe("<NamespaceSelectFilter />", () => {
       });
 
       it("opens menu", () => {
-        expect(result.getByTestId("namespace-select-filter-list-container")).not.toBeNull();
+        expect(result.getByTestId("namespace-select-filter-list-container")).toBeInTheDocument();
+      });
+
+      it("has all namespaces selected in the store", () => {
+        expect(namespaceStore.contextNamespaces.length).toBe(13);
       });
 
       describe("when 'test-2' is clicked", () => {
@@ -151,7 +184,7 @@ describe("<NamespaceSelectFilter />", () => {
           });
 
           it("shows 'test-2' as selected", () => {
-            expect(result.queryByTestId("namespace-select-filter-option-test-2-selected")).not.toBeNull();
+            expect(result.queryByTestId("namespace-select-filter-option-test-2-selected")).toBeInTheDocument();
           });
 
           it("does not show 'test-1' as selected", () => {
@@ -197,7 +230,7 @@ describe("<NamespaceSelectFilter />", () => {
                 });
 
                 it("keeps menu open", () => {
-                  expect(result.getByTestId("namespace-select-filter-list-container")).not.toBeNull();
+                  expect(result.getByTestId("namespace-select-filter-list-container")).toBeInTheDocument();
                 });
 
                 it("does not show 'kube-system' as selected", () => {
@@ -214,7 +247,7 @@ describe("<NamespaceSelectFilter />", () => {
                   });
 
                   it("keeps menu open", () => {
-                    expect(result.getByTestId("namespace-select-filter-list-container")).not.toBeNull();
+                    expect(result.getByTestId("namespace-select-filter-list-container")).toBeInTheDocument();
                   });
 
                   it("'test-13' is not sorted to the top of the list", () => {
@@ -243,7 +276,7 @@ describe("<NamespaceSelectFilter />", () => {
                 });
 
                 it("keeps menu open", () => {
-                  expect(result.getByTestId("namespace-select-filter-list-container")).not.toBeNull();
+                  expect(result.getByTestId("namespace-select-filter-list-container")).toBeInTheDocument();
                 });
               });
             });
@@ -294,6 +327,156 @@ describe("<NamespaceSelectFilter />", () => {
           });
         });
       });
+
+      describe("when clicked again", () => {
+        beforeEach(() => {
+          result.getByTestId("namespace-select-filter-input").click();
+        });
+
+        it("renders", () => {
+          expect(result.baseElement).toMatchSnapshot();
+        });
+
+        it("menu is still open", () => {
+          expect(result.getByTestId("namespace-select-filter-list-container")).toBeInTheDocument();
+        });
+      });
+
+      describe("when typing in the filter input", () => {
+        beforeEach(() => {
+          userEvent.type(result.getByTestId("namespace-select-filter-input"), "1");
+        });
+
+        it("renders", () => {
+          expect(result.baseElement).toMatchSnapshot();
+        });
+
+        it("menu is still open", () => {
+          expect(result.getByTestId("namespace-select-filter-list-container")).toBeInTheDocument();
+        });
+
+        it("shows 'test-1' option", () => {
+          expect(result.getByTestId("namespace-select-filter-option-test-1")).toBeInTheDocument();
+        });
+
+        it("shows 'test-10' option", () => {
+          expect(result.getByTestId("namespace-select-filter-option-test-10")).toBeInTheDocument();
+        });
+
+        it("does not show 'test-2' option", () => {
+          expect(result.queryByTestId("namespace-select-filter-option-test-2")).not.toBeInTheDocument();
+        });
+      });
+
+      describe("when typing a glob style filter into the filter input", () => {
+        beforeEach(() => {
+          userEvent.type(result.getByTestId("namespace-select-filter-input"), "1*");
+        });
+
+        it("renders", () => {
+          expect(result.baseElement).toMatchSnapshot();
+        });
+
+        it("menu is still open", () => {
+          expect(result.getByTestId("namespace-select-filter-list-container")).toBeInTheDocument();
+        });
+
+        it("shows 'test-1' option", () => {
+          expect(result.getByTestId("namespace-select-filter-option-test-1")).toBeInTheDocument();
+        });
+
+        it("shows 'test-10' option", () => {
+          expect(result.getByTestId("namespace-select-filter-option-test-10")).toBeInTheDocument();
+        });
+
+        it("does not show 'test-2' option", () => {
+          expect(result.queryByTestId("namespace-select-filter-option-test-2")).not.toBeInTheDocument();
+        });
+      });
+
+      describe("when clicking the remove from selection button for 'test-2'", () => {
+        beforeEach(() => {
+          result.getByTestId("namespace-select-filter-option-test-2-selected").click();
+        });
+
+        it("renders", () => {
+          expect(result.baseElement).toMatchSnapshot();
+        });
+
+        it("shows an 'add to selection' button for 'test-2'", () => {
+          expect(result.getByTestId("namespace-select-filter-option-test-2-add-to-selection")).toBeInTheDocument();
+        });
+
+        it("does not have 'test-2' as selected in the store", () => {
+          expect(namespaceStore.contextNamespaces.includes("test-2")).toBe(false);
+        });
+
+        it("menu is still open", () => {
+          expect(result.getByTestId("namespace-select-filter-list-container")).toBeInTheDocument();
+        });
+
+        describe("when clicking the remove from selection button for 'test-3'", () => {
+          beforeEach(() => {
+            result.getByTestId("namespace-select-filter-option-test-3-selected").click();
+          });
+
+          it("renders", () => {
+            expect(result.baseElement).toMatchSnapshot();
+          });
+
+          it("shows an 'add to selection' button for 'test-3'", () => {
+            expect(result.getByTestId("namespace-select-filter-option-test-3-add-to-selection")).toBeInTheDocument();
+          });
+
+          it("does not have 'test-3' as selected in the store", () => {
+            expect(namespaceStore.contextNamespaces.includes("test-3")).toBe(false);
+          });
+
+          it("menu is still open", () => {
+            expect(result.getByTestId("namespace-select-filter-list-container")).toBeInTheDocument();
+          });
+
+          describe("when clicking the add to selection button for 'test-2'", () => {
+            beforeEach(() => {
+              result.getByTestId("namespace-select-filter-option-test-2-add-to-selection").click();
+            });
+
+            it("renders", () => {
+              expect(result.baseElement).toMatchSnapshot();
+            });
+
+            it("shows a 'remove from selection' button for 'test-2'", () => {
+              expect(result.getByTestId("namespace-select-filter-option-test-2-selected")).toBeInTheDocument();
+            });
+
+            it("does have 'test-2' as selected in the store", () => {
+              expect(namespaceStore.contextNamespaces.includes("test-2")).toBe(true);
+            });
+
+            it("menu is still open", () => {
+              expect(result.getByTestId("namespace-select-filter-list-container")).toBeInTheDocument();
+            });
+
+            describe("when clicking the 'select only' button for 'test-5'", () => {
+              beforeEach(() => {
+                result.getByTestId("namespace-select-filter-option-test-5-select-only").click();
+              });
+
+              it("renders", () => {
+                expect(result.baseElement).toMatchSnapshot();
+              });
+
+              it("only has 'test-5' as selected in the store", () => {
+                expect(namespaceStore.contextNamespaces).toEqual(["test-5"]);
+              });
+
+              it("menu is now closed", () => {
+                expect(result.queryByTestId("namespace-select-filter-list-container")).not.toBeInTheDocument();
+              });
+            });
+          });
+        });
+      });
     });
   });
 });

From e528c729bdc7c16ffe5ad02d210895c426797e94 Mon Sep 17 00:00:00 2001
From: Sebastian Malton <sebastian@malton.name>
Date: Thu, 25 May 2023 11:25:45 -0400
Subject: [PATCH 08/16] chore: Add tests for large number of namespaces

Signed-off-by: Sebastian Malton <sebastian@malton.name>
---
 .../namespace-select-filter.test.tsx.snap     | 853 ++++++++++++++++++
 .../namespace-select-filter.test.tsx          |  55 +-
 2 files changed, 907 insertions(+), 1 deletion(-)

diff --git a/packages/core/src/renderer/components/namespace-select-filter/__snapshots__/namespace-select-filter.test.tsx.snap b/packages/core/src/renderer/components/namespace-select-filter/__snapshots__/namespace-select-filter.test.tsx.snap
index b06a45557f27..83f846442ef4 100644
--- a/packages/core/src/renderer/components/namespace-select-filter/__snapshots__/namespace-select-filter.test.tsx.snap
+++ b/packages/core/src/renderer/components/namespace-select-filter/__snapshots__/namespace-select-filter.test.tsx.snap
@@ -6144,3 +6144,856 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when menu expand
   </div>
 </body>
 `;
+
+exports[`<NamespaceSelectFilter /> once the subscribe resolves with thousands of namespaces renders 1`] = `
+<body>
+  <div>
+    <div
+      class="namespace-select-filter"
+      data-testid="namespace-select-filter"
+      id="namespace-select-filter"
+      tabindex="1"
+    >
+      <div
+        class="menu"
+      >
+        <div
+          class="non-icon"
+        >
+          <input
+            data-testid="namespace-select-filter-input"
+            id="namespace-select-filter-filter"
+            type="text"
+            value=""
+          />
+          <div
+            class="gradient left"
+          />
+          <label
+            for="namespace-select-filter-filter"
+          >
+            All namespaces
+          </label>
+          <div
+            class="gradient right"
+          />
+        </div>
+        <i
+          class="Icon expand-icon material interactive focusable"
+          data-testid="namespace-select-filter-expand-icon"
+          tabindex="0"
+        >
+          <span
+            class="icon"
+            data-icon-name="expand_more"
+          >
+            expand_more
+          </span>
+        </i>
+      </div>
+    </div>
+  </div>
+</body>
+`;
+
+exports[`<NamespaceSelectFilter /> once the subscribe resolves with thousands of namespaces when menu expand icon is clicked renders 1`] = `
+<body>
+  <div>
+    <div
+      class="namespace-select-filter"
+      data-testid="namespace-select-filter"
+      id="namespace-select-filter"
+      tabindex="1"
+    >
+      <div
+        class="menu"
+      >
+        <div
+          class="non-icon"
+        >
+          <input
+            data-testid="namespace-select-filter-input"
+            id="namespace-select-filter-filter"
+            type="text"
+            value=""
+          />
+          <div
+            class="gradient left"
+          />
+          <label
+            for="namespace-select-filter-filter"
+          >
+            All namespaces
+          </label>
+          <div
+            class="gradient right"
+          />
+        </div>
+        <i
+          class="Icon expand-icon material interactive focusable"
+          data-testid="namespace-select-filter-expand-icon"
+          tabindex="0"
+        >
+          <span
+            class="icon"
+            data-icon-name="expand_less"
+          >
+            expand_less
+          </span>
+        </i>
+      </div>
+      <div
+        class="list-container"
+        data-testid="namespace-select-filter-list-container"
+      >
+        <div
+          class="list"
+          style="position: relative; height: 300px; width: 300px; overflow: auto; will-change: transform; direction: ltr;"
+        >
+          <ul
+            style="height: 999714px; width: 100%;"
+          >
+            <li
+              class="option flex gaps align-center all-namespaces"
+              data-testid="namespace-select-filter-option-All Namespaces"
+              style="position: absolute; left: 0px; top: 0px; height: 29px; width: 100%;"
+            >
+              <span
+                class="data"
+              >
+                All Namespaces
+              </span>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-0"
+              style="position: absolute; left: 0px; top: 29px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-0-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-0-select-only"
+              >
+                Select only test-0
+              </div>
+              <span
+                class="data"
+              >
+                test-0
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-0-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-0-selected"
+              >
+                Remove test-0 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-1"
+              style="position: absolute; left: 0px; top: 58px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-1-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-1-select-only"
+              >
+                Select only test-1
+              </div>
+              <span
+                class="data"
+              >
+                test-1
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-1-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-1-selected"
+              >
+                Remove test-1 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-10"
+              style="position: absolute; left: 0px; top: 87px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-10-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-10-select-only"
+              >
+                Select only test-10
+              </div>
+              <span
+                class="data"
+              >
+                test-10
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-10-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-10-selected"
+              >
+                Remove test-10 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-100"
+              style="position: absolute; left: 0px; top: 116px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-100-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-100-select-only"
+              >
+                Select only test-100
+              </div>
+              <span
+                class="data"
+              >
+                test-100
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-100-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-100-selected"
+              >
+                Remove test-100 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-1000"
+              style="position: absolute; left: 0px; top: 145px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-1000-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-1000-select-only"
+              >
+                Select only test-1000
+              </div>
+              <span
+                class="data"
+              >
+                test-1000
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-1000-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-1000-selected"
+              >
+                Remove test-1000 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-10000"
+              style="position: absolute; left: 0px; top: 174px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-10000-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-10000-select-only"
+              >
+                Select only test-10000
+              </div>
+              <span
+                class="data"
+              >
+                test-10000
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-10000-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-10000-selected"
+              >
+                Remove test-10000 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-10001"
+              style="position: absolute; left: 0px; top: 203px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-10001-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-10001-select-only"
+              >
+                Select only test-10001
+              </div>
+              <span
+                class="data"
+              >
+                test-10001
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-10001-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-10001-selected"
+              >
+                Remove test-10001 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-10002"
+              style="position: absolute; left: 0px; top: 232px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-10002-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-10002-select-only"
+              >
+                Select only test-10002
+              </div>
+              <span
+                class="data"
+              >
+                test-10002
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-10002-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-10002-selected"
+              >
+                Remove test-10002 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-10003"
+              style="position: absolute; left: 0px; top: 261px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-10003-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-10003-select-only"
+              >
+                Select only test-10003
+              </div>
+              <span
+                class="data"
+              >
+                test-10003
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-10003-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-10003-selected"
+              >
+                Remove test-10003 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-10004"
+              style="position: absolute; left: 0px; top: 290px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-10004-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-10004-select-only"
+              >
+                Select only test-10004
+              </div>
+              <span
+                class="data"
+              >
+                test-10004
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-10004-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-10004-selected"
+              >
+                Remove test-10004 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-10005"
+              style="position: absolute; left: 0px; top: 319px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-10005-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-10005-select-only"
+              >
+                Select only test-10005
+              </div>
+              <span
+                class="data"
+              >
+                test-10005
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-10005-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-10005-selected"
+              >
+                Remove test-10005 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-10006"
+              style="position: absolute; left: 0px; top: 348px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-10006-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-10006-select-only"
+              >
+                Select only test-10006
+              </div>
+              <span
+                class="data"
+              >
+                test-10006
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-10006-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-10006-selected"
+              >
+                Remove test-10006 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-10007"
+              style="position: absolute; left: 0px; top: 377px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-10007-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-10007-select-only"
+              >
+                Select only test-10007
+              </div>
+              <span
+                class="data"
+              >
+                test-10007
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-10007-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-10007-selected"
+              >
+                Remove test-10007 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-10008"
+              style="position: absolute; left: 0px; top: 406px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-10008-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-10008-select-only"
+              >
+                Select only test-10008
+              </div>
+              <span
+                class="data"
+              >
+                test-10008
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-10008-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-10008-selected"
+              >
+                Remove test-10008 from selection
+              </div>
+            </li>
+            <li
+              class="option flex gaps align-center single-namespace"
+              data-testid="namespace-select-filter-option-test-10009"
+              style="position: absolute; left: 0px; top: 435px; height: 29px; width: 100%;"
+            >
+              <i
+                class="Icon material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-10009-select-only"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="layers"
+                >
+                  layers
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-10009-select-only"
+              >
+                Select only test-10009
+              </div>
+              <span
+                class="data"
+              >
+                test-10009
+              </span>
+              <i
+                class="Icon selected-icon box right material interactive focusable small"
+                data-testid="namespace-select-filter-option-test-10009-selected"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="check"
+                >
+                  check
+                </span>
+              </i>
+              <div
+                data-testid="tooltip-content-for-namespace-select-filter-option-test-10009-selected"
+              >
+                Remove test-10009 from selection
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+`;
+
+exports[`<NamespaceSelectFilter /> once the subscribe resolves with thousands of namespaces when menu expand icon is clicked when menu expand icon is clicked again renders 1`] = `
+<body>
+  <div>
+    <div
+      class="namespace-select-filter"
+      data-testid="namespace-select-filter"
+      id="namespace-select-filter"
+      tabindex="1"
+    >
+      <div
+        class="menu"
+      >
+        <div
+          class="non-icon"
+        >
+          <input
+            data-testid="namespace-select-filter-input"
+            id="namespace-select-filter-filter"
+            type="text"
+            value=""
+          />
+          <div
+            class="gradient left"
+          />
+          <label
+            for="namespace-select-filter-filter"
+          >
+            All namespaces
+          </label>
+          <div
+            class="gradient right"
+          />
+        </div>
+        <i
+          class="Icon expand-icon material interactive focusable"
+          data-testid="namespace-select-filter-expand-icon"
+          tabindex="0"
+        >
+          <span
+            class="icon"
+            data-icon-name="expand_more"
+          >
+            expand_more
+          </span>
+        </i>
+      </div>
+    </div>
+  </div>
+</body>
+`;
diff --git a/packages/core/src/renderer/components/namespace-select-filter/namespace-select-filter.test.tsx b/packages/core/src/renderer/components/namespace-select-filter/namespace-select-filter.test.tsx
index 8772ece9f1c8..4eb2ec4b5392 100644
--- a/packages/core/src/renderer/components/namespace-select-filter/namespace-select-filter.test.tsx
+++ b/packages/core/src/renderer/components/namespace-select-filter/namespace-select-filter.test.tsx
@@ -21,7 +21,7 @@ import { getDiForUnitTesting } from "../../getDiForUnitTesting";
 import subscribeStoresInjectable from "../../kube-watch-api/subscribe-stores.injectable";
 import storesAndApisCanBeCreatedInjectable from "../../stores-apis-can-be-created.injectable";
 import type { Disposer } from "@k8slens/utilities";
-import { disposer } from "@k8slens/utilities";
+import { array, disposer } from "@k8slens/utilities";
 import { renderFor } from "../test-utils/renderFor";
 import { NamespaceSelectFilter } from "./component";
 import type { NamespaceStore } from "../namespaces/store";
@@ -479,4 +479,57 @@ describe("<NamespaceSelectFilter />", () => {
       });
     });
   });
+
+  describe("once the subscribe resolves with thousands of namespaces", () => {
+    beforeEach(async () => {
+      await fetchMock.resolveSpecific([
+        "https://127.0.0.1:12345/api-kube/api/v1/namespaces",
+      ], createMockResponseFromString("https://127.0.0.1:12345/api-kube/api/v1/namespaces", JSON.stringify({
+        apiVersion: "v1",
+        kind: "NamespaceList",
+        metadata: {},
+        items: array.filled(20000, undefined).map((_, i) => createNamespace(`test-${i}`)),
+      })));
+    });
+
+    it("renders", () => {
+      expect(result.baseElement).toMatchSnapshot();
+    });
+
+    describe("when menu expand icon is clicked", () => {
+      beforeEach(() => {
+        result.getByTestId("namespace-select-filter-expand-icon").click();
+      });
+
+      it("renders", () => {
+        expect(result.baseElement).toMatchSnapshot();
+      });
+
+      it("menu is open", () => {
+        expect(result.getByTestId("namespace-select-filter-list-container")).toBeInTheDocument();
+      });
+
+      it("does not show all items in the DOM", () => {
+        expect(result.queryByTestId("namespace-select-filter-option-test-1500")).not.toBeInTheDocument();
+      });
+
+      it("does show some items in the DOM", () => {
+        expect(result.getByTestId("namespace-select-filter-option-test-10")).toBeInTheDocument();
+      });
+
+      describe("when menu expand icon is clicked again", () => {
+        beforeEach(() => {
+          result.getByTestId("namespace-select-filter-expand-icon").click();
+        });
+
+        it("renders", () => {
+          expect(result.baseElement).toMatchSnapshot();
+        });
+
+        it("menu is closed", () => {
+          expect(result.queryByTestId("namespace-select-filter-list-container")).not.toBeInTheDocument();
+        });
+      });
+    });
+  });
 });

From 839fa64f7df366b293fd70262598d4866b05f22f Mon Sep 17 00:00:00 2001
From: Sebastian Malton <sebastian@malton.name>
Date: Fri, 26 May 2023 08:41:13 -0400
Subject: [PATCH 09/16] chore: Update snapshots due to new behaviour of
 namespace-select-filter

Signed-off-by: Sebastian Malton <sebastian@malton.name>
---
 ...ing-cluster-frame-components.test.tsx.snap |   97 +-
 ...-and-tab-navigation-for-core.test.tsx.snap |  485 ++---
 ...ab-navigation-for-extensions.test.tsx.snap |  485 ++---
 .../visibility-of-sidebar-items.test.tsx.snap |  194 +-
 .../workload-overview.test.tsx.snap           |   97 +-
 ...when-cluster-is-not-relevant.test.tsx.snap |  194 +-
 ...when-cluster-is-not-relevant.test.tsx.snap |  291 +--
 ...when-cluster-is-not-relevant.test.tsx.snap |  291 +--
 ...hide-kube-object-detail-item.test.tsx.snap |  194 +-
 ...e-from-previously-opened-tab.test.tsx.snap |  194 +-
 .../__snapshots__/pods.test.tsx.snap          |  291 +--
 ...when-cluster-is-not-relevant.test.tsx.snap |  291 +--
 ...lling-helm-chart-from-new-tab.test.ts.snap |  194 +-
 ...rt-from-previously-opened-tab.test.ts.snap |  194 +-
 .../upgrade-chart-new-tab.test.ts.snap        |  679 ++-----
 ...wing-details-for-helm-release.test.ts.snap | 1746 ++++++-----------
 .../__snapshots__/download-logs.test.tsx.snap |  194 +-
 .../kube-object-list-layout.test.tsx.snap     |   97 +-
 .../__snapshots__/cluster-frame.test.tsx.snap |   97 +-
 19 files changed, 2015 insertions(+), 4290 deletions(-)

diff --git a/packages/core/src/features/cluster/__snapshots__/legacy-extension-adding-cluster-frame-components.test.tsx.snap b/packages/core/src/features/cluster/__snapshots__/legacy-extension-adding-cluster-frame-components.test.tsx.snap
index cfcea5deb305..e4a6cba0cbe1 100644
--- a/packages/core/src/features/cluster/__snapshots__/legacy-extension-adding-cluster-frame-components.test.tsx.snap
+++ b/packages/core/src/features/cluster/__snapshots__/legacy-extension-adding-cluster-frame-components.test.tsx.snap
@@ -293,82 +293,47 @@ exports[`legacy extension adding cluster frame components given custom component
                 Overview
               </h5>
               <div
-                class="NamespaceSelectFilterParent"
+                class="namespace-select-filter"
                 data-testid="namespace-select-filter"
+                id="overview-namespace-select-filter-input"
+                tabindex="1"
               >
                 <div
-                  class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
+                  class="menu"
                 >
-                  <span
-                    class="css-1f43avz-a11yText-A11yText"
-                    id="react-select-overview-namespace-select-filter-input-live-region"
-                  />
-                  <span
-                    aria-atomic="false"
-                    aria-live="polite"
-                    aria-relevant="additions text"
-                    class="css-1f43avz-a11yText-A11yText"
-                  />
                   <div
-                    class="Select__control css-13cymwt-control"
+                    class="non-icon"
                   >
+                    <input
+                      data-testid="namespace-select-filter-input"
+                      id="overview-namespace-select-filter-input-filter"
+                      type="text"
+                      value=""
+                    />
                     <div
-                      class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer"
+                      class="gradient left"
+                    />
+                    <label
+                      for="overview-namespace-select-filter-input-filter"
                     >
-                      <div
-                        class="Select__placeholder css-1jqq78o-placeholder"
-                        id="react-select-overview-namespace-select-filter-input-placeholder"
-                      >
-                        All namespaces
-                      </div>
-                      <div
-                        class="Select__input-container css-qbdosj-Input"
-                        data-value=""
-                      >
-                        <input
-                          aria-autocomplete="list"
-                          aria-describedby="react-select-overview-namespace-select-filter-input-placeholder"
-                          aria-expanded="false"
-                          aria-haspopup="true"
-                          autocapitalize="none"
-                          autocomplete="off"
-                          autocorrect="off"
-                          class="Select__input"
-                          id="overview-namespace-select-filter-input"
-                          role="combobox"
-                          spellcheck="false"
-                          style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
-                          tabindex="0"
-                          type="text"
-                          value=""
-                        />
-                      </div>
-                    </div>
+                      Namespaces: 
+                    </label>
                     <div
-                      class="Select__indicators css-1hb7zxy-IndicatorsContainer"
-                    >
-                      <span
-                        class="Select__indicator-separator css-1u9des2-indicatorSeparator"
-                      />
-                      <div
-                        aria-hidden="true"
-                        class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="css-tj5bde-Svg"
-                          focusable="false"
-                          height="20"
-                          viewBox="0 0 20 20"
-                          width="20"
-                        >
-                          <path
-                            d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                          />
-                        </svg>
-                      </div>
-                    </div>
+                      class="gradient right"
+                    />
                   </div>
+                  <i
+                    class="Icon expand-icon material interactive focusable"
+                    data-testid="namespace-select-filter-expand-icon"
+                    tabindex="0"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="expand_more"
+                    >
+                      expand_more
+                    </span>
+                  </i>
                 </div>
               </div>
             </div>
diff --git a/packages/core/src/features/cluster/__snapshots__/sidebar-and-tab-navigation-for-core.test.tsx.snap b/packages/core/src/features/cluster/__snapshots__/sidebar-and-tab-navigation-for-core.test.tsx.snap
index a27c6874174c..92b2def3c7f0 100644
--- a/packages/core/src/features/cluster/__snapshots__/sidebar-and-tab-navigation-for-core.test.tsx.snap
+++ b/packages/core/src/features/cluster/__snapshots__/sidebar-and-tab-navigation-for-core.test.tsx.snap
@@ -322,82 +322,47 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
                 Overview
               </h5>
               <div
-                class="NamespaceSelectFilterParent"
+                class="namespace-select-filter"
                 data-testid="namespace-select-filter"
+                id="overview-namespace-select-filter-input"
+                tabindex="1"
               >
                 <div
-                  class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
+                  class="menu"
                 >
-                  <span
-                    class="css-1f43avz-a11yText-A11yText"
-                    id="react-select-overview-namespace-select-filter-input-live-region"
-                  />
-                  <span
-                    aria-atomic="false"
-                    aria-live="polite"
-                    aria-relevant="additions text"
-                    class="css-1f43avz-a11yText-A11yText"
-                  />
                   <div
-                    class="Select__control css-13cymwt-control"
+                    class="non-icon"
                   >
+                    <input
+                      data-testid="namespace-select-filter-input"
+                      id="overview-namespace-select-filter-input-filter"
+                      type="text"
+                      value=""
+                    />
                     <div
-                      class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer"
+                      class="gradient left"
+                    />
+                    <label
+                      for="overview-namespace-select-filter-input-filter"
                     >
-                      <div
-                        class="Select__placeholder css-1jqq78o-placeholder"
-                        id="react-select-overview-namespace-select-filter-input-placeholder"
-                      >
-                        All namespaces
-                      </div>
-                      <div
-                        class="Select__input-container css-qbdosj-Input"
-                        data-value=""
-                      >
-                        <input
-                          aria-autocomplete="list"
-                          aria-describedby="react-select-overview-namespace-select-filter-input-placeholder"
-                          aria-expanded="false"
-                          aria-haspopup="true"
-                          autocapitalize="none"
-                          autocomplete="off"
-                          autocorrect="off"
-                          class="Select__input"
-                          id="overview-namespace-select-filter-input"
-                          role="combobox"
-                          spellcheck="false"
-                          style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
-                          tabindex="0"
-                          type="text"
-                          value=""
-                        />
-                      </div>
-                    </div>
+                      Namespaces: 
+                    </label>
                     <div
-                      class="Select__indicators css-1hb7zxy-IndicatorsContainer"
-                    >
-                      <span
-                        class="Select__indicator-separator css-1u9des2-indicatorSeparator"
-                      />
-                      <div
-                        aria-hidden="true"
-                        class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="css-tj5bde-Svg"
-                          focusable="false"
-                          height="20"
-                          viewBox="0 0 20 20"
-                          width="20"
-                        >
-                          <path
-                            d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                          />
-                        </svg>
-                      </div>
-                    </div>
+                      class="gradient right"
+                    />
                   </div>
+                  <i
+                    class="Icon expand-icon material interactive focusable"
+                    data-testid="namespace-select-filter-expand-icon"
+                    tabindex="0"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="expand_more"
+                    >
+                      expand_more
+                    </span>
+                  </i>
                 </div>
               </div>
             </div>
@@ -866,82 +831,47 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
                 Overview
               </h5>
               <div
-                class="NamespaceSelectFilterParent"
+                class="namespace-select-filter"
                 data-testid="namespace-select-filter"
+                id="overview-namespace-select-filter-input"
+                tabindex="1"
               >
                 <div
-                  class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
+                  class="menu"
                 >
-                  <span
-                    class="css-1f43avz-a11yText-A11yText"
-                    id="react-select-overview-namespace-select-filter-input-live-region"
-                  />
-                  <span
-                    aria-atomic="false"
-                    aria-live="polite"
-                    aria-relevant="additions text"
-                    class="css-1f43avz-a11yText-A11yText"
-                  />
                   <div
-                    class="Select__control css-13cymwt-control"
+                    class="non-icon"
                   >
+                    <input
+                      data-testid="namespace-select-filter-input"
+                      id="overview-namespace-select-filter-input-filter"
+                      type="text"
+                      value=""
+                    />
                     <div
-                      class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer"
+                      class="gradient left"
+                    />
+                    <label
+                      for="overview-namespace-select-filter-input-filter"
                     >
-                      <div
-                        class="Select__placeholder css-1jqq78o-placeholder"
-                        id="react-select-overview-namespace-select-filter-input-placeholder"
-                      >
-                        All namespaces
-                      </div>
-                      <div
-                        class="Select__input-container css-qbdosj-Input"
-                        data-value=""
-                      >
-                        <input
-                          aria-autocomplete="list"
-                          aria-describedby="react-select-overview-namespace-select-filter-input-placeholder"
-                          aria-expanded="false"
-                          aria-haspopup="true"
-                          autocapitalize="none"
-                          autocomplete="off"
-                          autocorrect="off"
-                          class="Select__input"
-                          id="overview-namespace-select-filter-input"
-                          role="combobox"
-                          spellcheck="false"
-                          style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
-                          tabindex="0"
-                          type="text"
-                          value=""
-                        />
-                      </div>
-                    </div>
+                      Namespaces: 
+                    </label>
                     <div
-                      class="Select__indicators css-1hb7zxy-IndicatorsContainer"
-                    >
-                      <span
-                        class="Select__indicator-separator css-1u9des2-indicatorSeparator"
-                      />
-                      <div
-                        aria-hidden="true"
-                        class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="css-tj5bde-Svg"
-                          focusable="false"
-                          height="20"
-                          viewBox="0 0 20 20"
-                          width="20"
-                        >
-                          <path
-                            d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                          />
-                        </svg>
-                      </div>
-                    </div>
+                      class="gradient right"
+                    />
                   </div>
+                  <i
+                    class="Icon expand-icon material interactive focusable"
+                    data-testid="namespace-select-filter-expand-icon"
+                    tabindex="0"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="expand_more"
+                    >
+                      expand_more
+                    </span>
+                  </i>
                 </div>
               </div>
             </div>
@@ -1430,82 +1360,47 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
                 Overview
               </h5>
               <div
-                class="NamespaceSelectFilterParent"
+                class="namespace-select-filter"
                 data-testid="namespace-select-filter"
+                id="overview-namespace-select-filter-input"
+                tabindex="1"
               >
                 <div
-                  class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
+                  class="menu"
                 >
-                  <span
-                    class="css-1f43avz-a11yText-A11yText"
-                    id="react-select-overview-namespace-select-filter-input-live-region"
-                  />
-                  <span
-                    aria-atomic="false"
-                    aria-live="polite"
-                    aria-relevant="additions text"
-                    class="css-1f43avz-a11yText-A11yText"
-                  />
                   <div
-                    class="Select__control css-13cymwt-control"
+                    class="non-icon"
                   >
+                    <input
+                      data-testid="namespace-select-filter-input"
+                      id="overview-namespace-select-filter-input-filter"
+                      type="text"
+                      value=""
+                    />
                     <div
-                      class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer"
+                      class="gradient left"
+                    />
+                    <label
+                      for="overview-namespace-select-filter-input-filter"
                     >
-                      <div
-                        class="Select__placeholder css-1jqq78o-placeholder"
-                        id="react-select-overview-namespace-select-filter-input-placeholder"
-                      >
-                        All namespaces
-                      </div>
-                      <div
-                        class="Select__input-container css-qbdosj-Input"
-                        data-value=""
-                      >
-                        <input
-                          aria-autocomplete="list"
-                          aria-describedby="react-select-overview-namespace-select-filter-input-placeholder"
-                          aria-expanded="false"
-                          aria-haspopup="true"
-                          autocapitalize="none"
-                          autocomplete="off"
-                          autocorrect="off"
-                          class="Select__input"
-                          id="overview-namespace-select-filter-input"
-                          role="combobox"
-                          spellcheck="false"
-                          style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
-                          tabindex="0"
-                          type="text"
-                          value=""
-                        />
-                      </div>
-                    </div>
+                      Namespaces: 
+                    </label>
                     <div
-                      class="Select__indicators css-1hb7zxy-IndicatorsContainer"
-                    >
-                      <span
-                        class="Select__indicator-separator css-1u9des2-indicatorSeparator"
-                      />
-                      <div
-                        aria-hidden="true"
-                        class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="css-tj5bde-Svg"
-                          focusable="false"
-                          height="20"
-                          viewBox="0 0 20 20"
-                          width="20"
-                        >
-                          <path
-                            d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                          />
-                        </svg>
-                      </div>
-                    </div>
+                      class="gradient right"
+                    />
                   </div>
+                  <i
+                    class="Icon expand-icon material interactive focusable"
+                    data-testid="namespace-select-filter-expand-icon"
+                    tabindex="0"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="expand_more"
+                    >
+                      expand_more
+                    </span>
+                  </i>
                 </div>
               </div>
             </div>
@@ -2857,82 +2752,47 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
                 Overview
               </h5>
               <div
-                class="NamespaceSelectFilterParent"
+                class="namespace-select-filter"
                 data-testid="namespace-select-filter"
+                id="overview-namespace-select-filter-input"
+                tabindex="1"
               >
                 <div
-                  class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
+                  class="menu"
                 >
-                  <span
-                    class="css-1f43avz-a11yText-A11yText"
-                    id="react-select-overview-namespace-select-filter-input-live-region"
-                  />
-                  <span
-                    aria-atomic="false"
-                    aria-live="polite"
-                    aria-relevant="additions text"
-                    class="css-1f43avz-a11yText-A11yText"
-                  />
                   <div
-                    class="Select__control css-13cymwt-control"
+                    class="non-icon"
                   >
+                    <input
+                      data-testid="namespace-select-filter-input"
+                      id="overview-namespace-select-filter-input-filter"
+                      type="text"
+                      value=""
+                    />
                     <div
-                      class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer"
+                      class="gradient left"
+                    />
+                    <label
+                      for="overview-namespace-select-filter-input-filter"
                     >
-                      <div
-                        class="Select__placeholder css-1jqq78o-placeholder"
-                        id="react-select-overview-namespace-select-filter-input-placeholder"
-                      >
-                        All namespaces
-                      </div>
-                      <div
-                        class="Select__input-container css-qbdosj-Input"
-                        data-value=""
-                      >
-                        <input
-                          aria-autocomplete="list"
-                          aria-describedby="react-select-overview-namespace-select-filter-input-placeholder"
-                          aria-expanded="false"
-                          aria-haspopup="true"
-                          autocapitalize="none"
-                          autocomplete="off"
-                          autocorrect="off"
-                          class="Select__input"
-                          id="overview-namespace-select-filter-input"
-                          role="combobox"
-                          spellcheck="false"
-                          style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
-                          tabindex="0"
-                          type="text"
-                          value=""
-                        />
-                      </div>
-                    </div>
+                      Namespaces: 
+                    </label>
                     <div
-                      class="Select__indicators css-1hb7zxy-IndicatorsContainer"
-                    >
-                      <span
-                        class="Select__indicator-separator css-1u9des2-indicatorSeparator"
-                      />
-                      <div
-                        aria-hidden="true"
-                        class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="css-tj5bde-Svg"
-                          focusable="false"
-                          height="20"
-                          viewBox="0 0 20 20"
-                          width="20"
-                        >
-                          <path
-                            d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                          />
-                        </svg>
-                      </div>
-                    </div>
+                      class="gradient right"
+                    />
                   </div>
+                  <i
+                    class="Icon expand-icon material interactive focusable"
+                    data-testid="namespace-select-filter-expand-icon"
+                    tabindex="0"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="expand_more"
+                    >
+                      expand_more
+                    </span>
+                  </i>
                 </div>
               </div>
             </div>
@@ -3401,82 +3261,47 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
                 Overview
               </h5>
               <div
-                class="NamespaceSelectFilterParent"
+                class="namespace-select-filter"
                 data-testid="namespace-select-filter"
+                id="overview-namespace-select-filter-input"
+                tabindex="1"
               >
                 <div
-                  class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
+                  class="menu"
                 >
-                  <span
-                    class="css-1f43avz-a11yText-A11yText"
-                    id="react-select-overview-namespace-select-filter-input-live-region"
-                  />
-                  <span
-                    aria-atomic="false"
-                    aria-live="polite"
-                    aria-relevant="additions text"
-                    class="css-1f43avz-a11yText-A11yText"
-                  />
                   <div
-                    class="Select__control css-13cymwt-control"
+                    class="non-icon"
                   >
+                    <input
+                      data-testid="namespace-select-filter-input"
+                      id="overview-namespace-select-filter-input-filter"
+                      type="text"
+                      value=""
+                    />
                     <div
-                      class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer"
+                      class="gradient left"
+                    />
+                    <label
+                      for="overview-namespace-select-filter-input-filter"
                     >
-                      <div
-                        class="Select__placeholder css-1jqq78o-placeholder"
-                        id="react-select-overview-namespace-select-filter-input-placeholder"
-                      >
-                        All namespaces
-                      </div>
-                      <div
-                        class="Select__input-container css-qbdosj-Input"
-                        data-value=""
-                      >
-                        <input
-                          aria-autocomplete="list"
-                          aria-describedby="react-select-overview-namespace-select-filter-input-placeholder"
-                          aria-expanded="false"
-                          aria-haspopup="true"
-                          autocapitalize="none"
-                          autocomplete="off"
-                          autocorrect="off"
-                          class="Select__input"
-                          id="overview-namespace-select-filter-input"
-                          role="combobox"
-                          spellcheck="false"
-                          style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
-                          tabindex="0"
-                          type="text"
-                          value=""
-                        />
-                      </div>
-                    </div>
+                      Namespaces: 
+                    </label>
                     <div
-                      class="Select__indicators css-1hb7zxy-IndicatorsContainer"
-                    >
-                      <span
-                        class="Select__indicator-separator css-1u9des2-indicatorSeparator"
-                      />
-                      <div
-                        aria-hidden="true"
-                        class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="css-tj5bde-Svg"
-                          focusable="false"
-                          height="20"
-                          viewBox="0 0 20 20"
-                          width="20"
-                        >
-                          <path
-                            d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                          />
-                        </svg>
-                      </div>
-                    </div>
+                      class="gradient right"
+                    />
                   </div>
+                  <i
+                    class="Icon expand-icon material interactive focusable"
+                    data-testid="namespace-select-filter-expand-icon"
+                    tabindex="0"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="expand_more"
+                    >
+                      expand_more
+                    </span>
+                  </i>
                 </div>
               </div>
             </div>
diff --git a/packages/core/src/features/cluster/__snapshots__/sidebar-and-tab-navigation-for-extensions.test.tsx.snap b/packages/core/src/features/cluster/__snapshots__/sidebar-and-tab-navigation-for-extensions.test.tsx.snap
index a64f9c2aa273..1f7d7bf3feec 100644
--- a/packages/core/src/features/cluster/__snapshots__/sidebar-and-tab-navigation-for-extensions.test.tsx.snap
+++ b/packages/core/src/features/cluster/__snapshots__/sidebar-and-tab-navigation-for-extensions.test.tsx.snap
@@ -322,82 +322,47 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
                 Overview
               </h5>
               <div
-                class="NamespaceSelectFilterParent"
+                class="namespace-select-filter"
                 data-testid="namespace-select-filter"
+                id="overview-namespace-select-filter-input"
+                tabindex="1"
               >
                 <div
-                  class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
+                  class="menu"
                 >
-                  <span
-                    class="css-1f43avz-a11yText-A11yText"
-                    id="react-select-overview-namespace-select-filter-input-live-region"
-                  />
-                  <span
-                    aria-atomic="false"
-                    aria-live="polite"
-                    aria-relevant="additions text"
-                    class="css-1f43avz-a11yText-A11yText"
-                  />
                   <div
-                    class="Select__control css-13cymwt-control"
+                    class="non-icon"
                   >
+                    <input
+                      data-testid="namespace-select-filter-input"
+                      id="overview-namespace-select-filter-input-filter"
+                      type="text"
+                      value=""
+                    />
                     <div
-                      class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer"
+                      class="gradient left"
+                    />
+                    <label
+                      for="overview-namespace-select-filter-input-filter"
                     >
-                      <div
-                        class="Select__placeholder css-1jqq78o-placeholder"
-                        id="react-select-overview-namespace-select-filter-input-placeholder"
-                      >
-                        All namespaces
-                      </div>
-                      <div
-                        class="Select__input-container css-qbdosj-Input"
-                        data-value=""
-                      >
-                        <input
-                          aria-autocomplete="list"
-                          aria-describedby="react-select-overview-namespace-select-filter-input-placeholder"
-                          aria-expanded="false"
-                          aria-haspopup="true"
-                          autocapitalize="none"
-                          autocomplete="off"
-                          autocorrect="off"
-                          class="Select__input"
-                          id="overview-namespace-select-filter-input"
-                          role="combobox"
-                          spellcheck="false"
-                          style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
-                          tabindex="0"
-                          type="text"
-                          value=""
-                        />
-                      </div>
-                    </div>
+                      Namespaces: 
+                    </label>
                     <div
-                      class="Select__indicators css-1hb7zxy-IndicatorsContainer"
-                    >
-                      <span
-                        class="Select__indicator-separator css-1u9des2-indicatorSeparator"
-                      />
-                      <div
-                        aria-hidden="true"
-                        class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="css-tj5bde-Svg"
-                          focusable="false"
-                          height="20"
-                          viewBox="0 0 20 20"
-                          width="20"
-                        >
-                          <path
-                            d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                          />
-                        </svg>
-                      </div>
-                    </div>
+                      class="gradient right"
+                    />
                   </div>
+                  <i
+                    class="Icon expand-icon material interactive focusable"
+                    data-testid="namespace-select-filter-expand-icon"
+                    tabindex="0"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="expand_more"
+                    >
+                      expand_more
+                    </span>
+                  </i>
                 </div>
               </div>
             </div>
@@ -866,82 +831,47 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
                 Overview
               </h5>
               <div
-                class="NamespaceSelectFilterParent"
+                class="namespace-select-filter"
                 data-testid="namespace-select-filter"
+                id="overview-namespace-select-filter-input"
+                tabindex="1"
               >
                 <div
-                  class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
+                  class="menu"
                 >
-                  <span
-                    class="css-1f43avz-a11yText-A11yText"
-                    id="react-select-overview-namespace-select-filter-input-live-region"
-                  />
-                  <span
-                    aria-atomic="false"
-                    aria-live="polite"
-                    aria-relevant="additions text"
-                    class="css-1f43avz-a11yText-A11yText"
-                  />
                   <div
-                    class="Select__control css-13cymwt-control"
+                    class="non-icon"
                   >
+                    <input
+                      data-testid="namespace-select-filter-input"
+                      id="overview-namespace-select-filter-input-filter"
+                      type="text"
+                      value=""
+                    />
                     <div
-                      class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer"
+                      class="gradient left"
+                    />
+                    <label
+                      for="overview-namespace-select-filter-input-filter"
                     >
-                      <div
-                        class="Select__placeholder css-1jqq78o-placeholder"
-                        id="react-select-overview-namespace-select-filter-input-placeholder"
-                      >
-                        All namespaces
-                      </div>
-                      <div
-                        class="Select__input-container css-qbdosj-Input"
-                        data-value=""
-                      >
-                        <input
-                          aria-autocomplete="list"
-                          aria-describedby="react-select-overview-namespace-select-filter-input-placeholder"
-                          aria-expanded="false"
-                          aria-haspopup="true"
-                          autocapitalize="none"
-                          autocomplete="off"
-                          autocorrect="off"
-                          class="Select__input"
-                          id="overview-namespace-select-filter-input"
-                          role="combobox"
-                          spellcheck="false"
-                          style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
-                          tabindex="0"
-                          type="text"
-                          value=""
-                        />
-                      </div>
-                    </div>
+                      Namespaces: 
+                    </label>
                     <div
-                      class="Select__indicators css-1hb7zxy-IndicatorsContainer"
-                    >
-                      <span
-                        class="Select__indicator-separator css-1u9des2-indicatorSeparator"
-                      />
-                      <div
-                        aria-hidden="true"
-                        class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="css-tj5bde-Svg"
-                          focusable="false"
-                          height="20"
-                          viewBox="0 0 20 20"
-                          width="20"
-                        >
-                          <path
-                            d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                          />
-                        </svg>
-                      </div>
-                    </div>
+                      class="gradient right"
+                    />
                   </div>
+                  <i
+                    class="Icon expand-icon material interactive focusable"
+                    data-testid="namespace-select-filter-expand-icon"
+                    tabindex="0"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="expand_more"
+                    >
+                      expand_more
+                    </span>
+                  </i>
                 </div>
               </div>
             </div>
@@ -1446,82 +1376,47 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
                 Overview
               </h5>
               <div
-                class="NamespaceSelectFilterParent"
+                class="namespace-select-filter"
                 data-testid="namespace-select-filter"
+                id="overview-namespace-select-filter-input"
+                tabindex="1"
               >
                 <div
-                  class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
+                  class="menu"
                 >
-                  <span
-                    class="css-1f43avz-a11yText-A11yText"
-                    id="react-select-overview-namespace-select-filter-input-live-region"
-                  />
-                  <span
-                    aria-atomic="false"
-                    aria-live="polite"
-                    aria-relevant="additions text"
-                    class="css-1f43avz-a11yText-A11yText"
-                  />
                   <div
-                    class="Select__control css-13cymwt-control"
+                    class="non-icon"
                   >
+                    <input
+                      data-testid="namespace-select-filter-input"
+                      id="overview-namespace-select-filter-input-filter"
+                      type="text"
+                      value=""
+                    />
                     <div
-                      class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer"
+                      class="gradient left"
+                    />
+                    <label
+                      for="overview-namespace-select-filter-input-filter"
                     >
-                      <div
-                        class="Select__placeholder css-1jqq78o-placeholder"
-                        id="react-select-overview-namespace-select-filter-input-placeholder"
-                      >
-                        All namespaces
-                      </div>
-                      <div
-                        class="Select__input-container css-qbdosj-Input"
-                        data-value=""
-                      >
-                        <input
-                          aria-autocomplete="list"
-                          aria-describedby="react-select-overview-namespace-select-filter-input-placeholder"
-                          aria-expanded="false"
-                          aria-haspopup="true"
-                          autocapitalize="none"
-                          autocomplete="off"
-                          autocorrect="off"
-                          class="Select__input"
-                          id="overview-namespace-select-filter-input"
-                          role="combobox"
-                          spellcheck="false"
-                          style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
-                          tabindex="0"
-                          type="text"
-                          value=""
-                        />
-                      </div>
-                    </div>
+                      Namespaces: 
+                    </label>
                     <div
-                      class="Select__indicators css-1hb7zxy-IndicatorsContainer"
-                    >
-                      <span
-                        class="Select__indicator-separator css-1u9des2-indicatorSeparator"
-                      />
-                      <div
-                        aria-hidden="true"
-                        class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="css-tj5bde-Svg"
-                          focusable="false"
-                          height="20"
-                          viewBox="0 0 20 20"
-                          width="20"
-                        >
-                          <path
-                            d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                          />
-                        </svg>
-                      </div>
-                    </div>
+                      class="gradient right"
+                    />
                   </div>
+                  <i
+                    class="Icon expand-icon material interactive focusable"
+                    data-testid="namespace-select-filter-expand-icon"
+                    tabindex="0"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="expand_more"
+                    >
+                      expand_more
+                    </span>
+                  </i>
                 </div>
               </div>
             </div>
@@ -3486,82 +3381,47 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
                 Overview
               </h5>
               <div
-                class="NamespaceSelectFilterParent"
+                class="namespace-select-filter"
                 data-testid="namespace-select-filter"
+                id="overview-namespace-select-filter-input"
+                tabindex="1"
               >
                 <div
-                  class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
+                  class="menu"
                 >
-                  <span
-                    class="css-1f43avz-a11yText-A11yText"
-                    id="react-select-overview-namespace-select-filter-input-live-region"
-                  />
-                  <span
-                    aria-atomic="false"
-                    aria-live="polite"
-                    aria-relevant="additions text"
-                    class="css-1f43avz-a11yText-A11yText"
-                  />
                   <div
-                    class="Select__control css-13cymwt-control"
+                    class="non-icon"
                   >
+                    <input
+                      data-testid="namespace-select-filter-input"
+                      id="overview-namespace-select-filter-input-filter"
+                      type="text"
+                      value=""
+                    />
                     <div
-                      class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer"
+                      class="gradient left"
+                    />
+                    <label
+                      for="overview-namespace-select-filter-input-filter"
                     >
-                      <div
-                        class="Select__placeholder css-1jqq78o-placeholder"
-                        id="react-select-overview-namespace-select-filter-input-placeholder"
-                      >
-                        All namespaces
-                      </div>
-                      <div
-                        class="Select__input-container css-qbdosj-Input"
-                        data-value=""
-                      >
-                        <input
-                          aria-autocomplete="list"
-                          aria-describedby="react-select-overview-namespace-select-filter-input-placeholder"
-                          aria-expanded="false"
-                          aria-haspopup="true"
-                          autocapitalize="none"
-                          autocomplete="off"
-                          autocorrect="off"
-                          class="Select__input"
-                          id="overview-namespace-select-filter-input"
-                          role="combobox"
-                          spellcheck="false"
-                          style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
-                          tabindex="0"
-                          type="text"
-                          value=""
-                        />
-                      </div>
-                    </div>
+                      Namespaces: 
+                    </label>
                     <div
-                      class="Select__indicators css-1hb7zxy-IndicatorsContainer"
-                    >
-                      <span
-                        class="Select__indicator-separator css-1u9des2-indicatorSeparator"
-                      />
-                      <div
-                        aria-hidden="true"
-                        class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="css-tj5bde-Svg"
-                          focusable="false"
-                          height="20"
-                          viewBox="0 0 20 20"
-                          width="20"
-                        >
-                          <path
-                            d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                          />
-                        </svg>
-                      </div>
-                    </div>
+                      class="gradient right"
+                    />
                   </div>
+                  <i
+                    class="Icon expand-icon material interactive focusable"
+                    data-testid="namespace-select-filter-expand-icon"
+                    tabindex="0"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="expand_more"
+                    >
+                      expand_more
+                    </span>
+                  </i>
                 </div>
               </div>
             </div>
@@ -4030,82 +3890,47 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
                 Overview
               </h5>
               <div
-                class="NamespaceSelectFilterParent"
+                class="namespace-select-filter"
                 data-testid="namespace-select-filter"
+                id="overview-namespace-select-filter-input"
+                tabindex="1"
               >
                 <div
-                  class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
+                  class="menu"
                 >
-                  <span
-                    class="css-1f43avz-a11yText-A11yText"
-                    id="react-select-overview-namespace-select-filter-input-live-region"
-                  />
-                  <span
-                    aria-atomic="false"
-                    aria-live="polite"
-                    aria-relevant="additions text"
-                    class="css-1f43avz-a11yText-A11yText"
-                  />
                   <div
-                    class="Select__control css-13cymwt-control"
+                    class="non-icon"
                   >
+                    <input
+                      data-testid="namespace-select-filter-input"
+                      id="overview-namespace-select-filter-input-filter"
+                      type="text"
+                      value=""
+                    />
                     <div
-                      class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer"
+                      class="gradient left"
+                    />
+                    <label
+                      for="overview-namespace-select-filter-input-filter"
                     >
-                      <div
-                        class="Select__placeholder css-1jqq78o-placeholder"
-                        id="react-select-overview-namespace-select-filter-input-placeholder"
-                      >
-                        All namespaces
-                      </div>
-                      <div
-                        class="Select__input-container css-qbdosj-Input"
-                        data-value=""
-                      >
-                        <input
-                          aria-autocomplete="list"
-                          aria-describedby="react-select-overview-namespace-select-filter-input-placeholder"
-                          aria-expanded="false"
-                          aria-haspopup="true"
-                          autocapitalize="none"
-                          autocomplete="off"
-                          autocorrect="off"
-                          class="Select__input"
-                          id="overview-namespace-select-filter-input"
-                          role="combobox"
-                          spellcheck="false"
-                          style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
-                          tabindex="0"
-                          type="text"
-                          value=""
-                        />
-                      </div>
-                    </div>
+                      Namespaces: 
+                    </label>
                     <div
-                      class="Select__indicators css-1hb7zxy-IndicatorsContainer"
-                    >
-                      <span
-                        class="Select__indicator-separator css-1u9des2-indicatorSeparator"
-                      />
-                      <div
-                        aria-hidden="true"
-                        class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="css-tj5bde-Svg"
-                          focusable="false"
-                          height="20"
-                          viewBox="0 0 20 20"
-                          width="20"
-                        >
-                          <path
-                            d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                          />
-                        </svg>
-                      </div>
-                    </div>
+                      class="gradient right"
+                    />
                   </div>
+                  <i
+                    class="Icon expand-icon material interactive focusable"
+                    data-testid="namespace-select-filter-expand-icon"
+                    tabindex="0"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="expand_more"
+                    >
+                      expand_more
+                    </span>
+                  </i>
                 </div>
               </div>
             </div>
diff --git a/packages/core/src/features/cluster/__snapshots__/visibility-of-sidebar-items.test.tsx.snap b/packages/core/src/features/cluster/__snapshots__/visibility-of-sidebar-items.test.tsx.snap
index 85601255c3c7..95428c026a9e 100644
--- a/packages/core/src/features/cluster/__snapshots__/visibility-of-sidebar-items.test.tsx.snap
+++ b/packages/core/src/features/cluster/__snapshots__/visibility-of-sidebar-items.test.tsx.snap
@@ -293,82 +293,47 @@ exports[`cluster - visibility of sidebar items given kube resource for route is
                 Overview
               </h5>
               <div
-                class="NamespaceSelectFilterParent"
+                class="namespace-select-filter"
                 data-testid="namespace-select-filter"
+                id="overview-namespace-select-filter-input"
+                tabindex="1"
               >
                 <div
-                  class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
+                  class="menu"
                 >
-                  <span
-                    class="css-1f43avz-a11yText-A11yText"
-                    id="react-select-overview-namespace-select-filter-input-live-region"
-                  />
-                  <span
-                    aria-atomic="false"
-                    aria-live="polite"
-                    aria-relevant="additions text"
-                    class="css-1f43avz-a11yText-A11yText"
-                  />
                   <div
-                    class="Select__control css-13cymwt-control"
+                    class="non-icon"
                   >
+                    <input
+                      data-testid="namespace-select-filter-input"
+                      id="overview-namespace-select-filter-input-filter"
+                      type="text"
+                      value=""
+                    />
                     <div
-                      class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer"
+                      class="gradient left"
+                    />
+                    <label
+                      for="overview-namespace-select-filter-input-filter"
                     >
-                      <div
-                        class="Select__placeholder css-1jqq78o-placeholder"
-                        id="react-select-overview-namespace-select-filter-input-placeholder"
-                      >
-                        All namespaces
-                      </div>
-                      <div
-                        class="Select__input-container css-qbdosj-Input"
-                        data-value=""
-                      >
-                        <input
-                          aria-autocomplete="list"
-                          aria-describedby="react-select-overview-namespace-select-filter-input-placeholder"
-                          aria-expanded="false"
-                          aria-haspopup="true"
-                          autocapitalize="none"
-                          autocomplete="off"
-                          autocorrect="off"
-                          class="Select__input"
-                          id="overview-namespace-select-filter-input"
-                          role="combobox"
-                          spellcheck="false"
-                          style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
-                          tabindex="0"
-                          type="text"
-                          value=""
-                        />
-                      </div>
-                    </div>
+                      Namespaces: 
+                    </label>
                     <div
-                      class="Select__indicators css-1hb7zxy-IndicatorsContainer"
-                    >
-                      <span
-                        class="Select__indicator-separator css-1u9des2-indicatorSeparator"
-                      />
-                      <div
-                        aria-hidden="true"
-                        class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="css-tj5bde-Svg"
-                          focusable="false"
-                          height="20"
-                          viewBox="0 0 20 20"
-                          width="20"
-                        >
-                          <path
-                            d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                          />
-                        </svg>
-                      </div>
-                    </div>
+                      class="gradient right"
+                    />
                   </div>
+                  <i
+                    class="Icon expand-icon material interactive focusable"
+                    data-testid="namespace-select-filter-expand-icon"
+                    tabindex="0"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="expand_more"
+                    >
+                      expand_more
+                    </span>
+                  </i>
                 </div>
               </div>
             </div>
@@ -848,82 +813,47 @@ exports[`cluster - visibility of sidebar items given kube resource for route is
                 Overview
               </h5>
               <div
-                class="NamespaceSelectFilterParent"
+                class="namespace-select-filter"
                 data-testid="namespace-select-filter"
+                id="overview-namespace-select-filter-input"
+                tabindex="1"
               >
                 <div
-                  class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
+                  class="menu"
                 >
-                  <span
-                    class="css-1f43avz-a11yText-A11yText"
-                    id="react-select-overview-namespace-select-filter-input-live-region"
-                  />
-                  <span
-                    aria-atomic="false"
-                    aria-live="polite"
-                    aria-relevant="additions text"
-                    class="css-1f43avz-a11yText-A11yText"
-                  />
                   <div
-                    class="Select__control css-13cymwt-control"
+                    class="non-icon"
                   >
+                    <input
+                      data-testid="namespace-select-filter-input"
+                      id="overview-namespace-select-filter-input-filter"
+                      type="text"
+                      value=""
+                    />
                     <div
-                      class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer"
+                      class="gradient left"
+                    />
+                    <label
+                      for="overview-namespace-select-filter-input-filter"
                     >
-                      <div
-                        class="Select__placeholder css-1jqq78o-placeholder"
-                        id="react-select-overview-namespace-select-filter-input-placeholder"
-                      >
-                        All namespaces
-                      </div>
-                      <div
-                        class="Select__input-container css-qbdosj-Input"
-                        data-value=""
-                      >
-                        <input
-                          aria-autocomplete="list"
-                          aria-describedby="react-select-overview-namespace-select-filter-input-placeholder"
-                          aria-expanded="false"
-                          aria-haspopup="true"
-                          autocapitalize="none"
-                          autocomplete="off"
-                          autocorrect="off"
-                          class="Select__input"
-                          id="overview-namespace-select-filter-input"
-                          role="combobox"
-                          spellcheck="false"
-                          style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
-                          tabindex="0"
-                          type="text"
-                          value=""
-                        />
-                      </div>
-                    </div>
+                      Namespaces: 
+                    </label>
                     <div
-                      class="Select__indicators css-1hb7zxy-IndicatorsContainer"
-                    >
-                      <span
-                        class="Select__indicator-separator css-1u9des2-indicatorSeparator"
-                      />
-                      <div
-                        aria-hidden="true"
-                        class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="css-tj5bde-Svg"
-                          focusable="false"
-                          height="20"
-                          viewBox="0 0 20 20"
-                          width="20"
-                        >
-                          <path
-                            d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                          />
-                        </svg>
-                      </div>
-                    </div>
+                      class="gradient right"
+                    />
                   </div>
+                  <i
+                    class="Icon expand-icon material interactive focusable"
+                    data-testid="namespace-select-filter-expand-icon"
+                    tabindex="0"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="expand_more"
+                    >
+                      expand_more
+                    </span>
+                  </i>
                 </div>
               </div>
             </div>
diff --git a/packages/core/src/features/cluster/__snapshots__/workload-overview.test.tsx.snap b/packages/core/src/features/cluster/__snapshots__/workload-overview.test.tsx.snap
index 1a4f905eaacc..422d35b7167a 100644
--- a/packages/core/src/features/cluster/__snapshots__/workload-overview.test.tsx.snap
+++ b/packages/core/src/features/cluster/__snapshots__/workload-overview.test.tsx.snap
@@ -307,82 +307,47 @@ exports[`workload overview when navigating to workload overview renders 1`] = `
                   Overview
                 </h5>
                 <div
-                  class="NamespaceSelectFilterParent"
+                  class="namespace-select-filter"
                   data-testid="namespace-select-filter"
+                  id="overview-namespace-select-filter-input"
+                  tabindex="1"
                 >
                   <div
-                    class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
+                    class="menu"
                   >
-                    <span
-                      class="css-1f43avz-a11yText-A11yText"
-                      id="react-select-overview-namespace-select-filter-input-live-region"
-                    />
-                    <span
-                      aria-atomic="false"
-                      aria-live="polite"
-                      aria-relevant="additions text"
-                      class="css-1f43avz-a11yText-A11yText"
-                    />
                     <div
-                      class="Select__control css-13cymwt-control"
+                      class="non-icon"
                     >
+                      <input
+                        data-testid="namespace-select-filter-input"
+                        id="overview-namespace-select-filter-input-filter"
+                        type="text"
+                        value=""
+                      />
                       <div
-                        class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer"
+                        class="gradient left"
+                      />
+                      <label
+                        for="overview-namespace-select-filter-input-filter"
                       >
-                        <div
-                          class="Select__placeholder css-1jqq78o-placeholder"
-                          id="react-select-overview-namespace-select-filter-input-placeholder"
-                        >
-                          All namespaces
-                        </div>
-                        <div
-                          class="Select__input-container css-qbdosj-Input"
-                          data-value=""
-                        >
-                          <input
-                            aria-autocomplete="list"
-                            aria-describedby="react-select-overview-namespace-select-filter-input-placeholder"
-                            aria-expanded="false"
-                            aria-haspopup="true"
-                            autocapitalize="none"
-                            autocomplete="off"
-                            autocorrect="off"
-                            class="Select__input"
-                            id="overview-namespace-select-filter-input"
-                            role="combobox"
-                            spellcheck="false"
-                            style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
-                            tabindex="0"
-                            type="text"
-                            value=""
-                          />
-                        </div>
-                      </div>
+                        Namespaces: 
+                      </label>
                       <div
-                        class="Select__indicators css-1hb7zxy-IndicatorsContainer"
-                      >
-                        <span
-                          class="Select__indicator-separator css-1u9des2-indicatorSeparator"
-                        />
-                        <div
-                          aria-hidden="true"
-                          class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="css-tj5bde-Svg"
-                            focusable="false"
-                            height="20"
-                            viewBox="0 0 20 20"
-                            width="20"
-                          >
-                            <path
-                              d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                            />
-                          </svg>
-                        </div>
-                      </div>
+                        class="gradient right"
+                      />
                     </div>
+                    <i
+                      class="Icon expand-icon material interactive focusable"
+                      data-testid="namespace-select-filter-expand-icon"
+                      tabindex="0"
+                    >
+                      <span
+                        class="icon"
+                        data-icon-name="expand_more"
+                      >
+                        expand_more
+                      </span>
+                    </i>
                   </div>
                 </div>
               </div>
diff --git a/packages/core/src/features/cluster/extension-api/__snapshots__/disable-cluster-pages-when-cluster-is-not-relevant.test.tsx.snap b/packages/core/src/features/cluster/extension-api/__snapshots__/disable-cluster-pages-when-cluster-is-not-relevant.test.tsx.snap
index 9e2aa77d4511..04e2307b3314 100644
--- a/packages/core/src/features/cluster/extension-api/__snapshots__/disable-cluster-pages-when-cluster-is-not-relevant.test.tsx.snap
+++ b/packages/core/src/features/cluster/extension-api/__snapshots__/disable-cluster-pages-when-cluster-is-not-relevant.test.tsx.snap
@@ -689,82 +689,47 @@ exports[`disable-cluster-pages-when-cluster-is-not-relevant given extension shou
                   Overview
                 </h5>
                 <div
-                  class="NamespaceSelectFilterParent"
+                  class="namespace-select-filter"
                   data-testid="namespace-select-filter"
+                  id="overview-namespace-select-filter-input"
+                  tabindex="1"
                 >
                   <div
-                    class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
+                    class="menu"
                   >
-                    <span
-                      class="css-1f43avz-a11yText-A11yText"
-                      id="react-select-overview-namespace-select-filter-input-live-region"
-                    />
-                    <span
-                      aria-atomic="false"
-                      aria-live="polite"
-                      aria-relevant="additions text"
-                      class="css-1f43avz-a11yText-A11yText"
-                    />
                     <div
-                      class="Select__control css-13cymwt-control"
+                      class="non-icon"
                     >
+                      <input
+                        data-testid="namespace-select-filter-input"
+                        id="overview-namespace-select-filter-input-filter"
+                        type="text"
+                        value=""
+                      />
                       <div
-                        class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer"
+                        class="gradient left"
+                      />
+                      <label
+                        for="overview-namespace-select-filter-input-filter"
                       >
-                        <div
-                          class="Select__placeholder css-1jqq78o-placeholder"
-                          id="react-select-overview-namespace-select-filter-input-placeholder"
-                        >
-                          All namespaces
-                        </div>
-                        <div
-                          class="Select__input-container css-qbdosj-Input"
-                          data-value=""
-                        >
-                          <input
-                            aria-autocomplete="list"
-                            aria-describedby="react-select-overview-namespace-select-filter-input-placeholder"
-                            aria-expanded="false"
-                            aria-haspopup="true"
-                            autocapitalize="none"
-                            autocomplete="off"
-                            autocorrect="off"
-                            class="Select__input"
-                            id="overview-namespace-select-filter-input"
-                            role="combobox"
-                            spellcheck="false"
-                            style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
-                            tabindex="0"
-                            type="text"
-                            value=""
-                          />
-                        </div>
-                      </div>
+                        Namespaces: 
+                      </label>
                       <div
-                        class="Select__indicators css-1hb7zxy-IndicatorsContainer"
-                      >
-                        <span
-                          class="Select__indicator-separator css-1u9des2-indicatorSeparator"
-                        />
-                        <div
-                          aria-hidden="true"
-                          class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="css-tj5bde-Svg"
-                            focusable="false"
-                            height="20"
-                            viewBox="0 0 20 20"
-                            width="20"
-                          >
-                            <path
-                              d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                            />
-                          </svg>
-                        </div>
-                      </div>
+                        class="gradient right"
+                      />
                     </div>
+                    <i
+                      class="Icon expand-icon material interactive focusable"
+                      data-testid="namespace-select-filter-expand-icon"
+                      tabindex="0"
+                    >
+                      <span
+                        class="icon"
+                        data-icon-name="expand_more"
+                      >
+                        expand_more
+                      </span>
+                    </i>
                   </div>
                 </div>
               </div>
@@ -1206,82 +1171,47 @@ exports[`disable-cluster-pages-when-cluster-is-not-relevant given not yet known
                   Overview
                 </h5>
                 <div
-                  class="NamespaceSelectFilterParent"
+                  class="namespace-select-filter"
                   data-testid="namespace-select-filter"
+                  id="overview-namespace-select-filter-input"
+                  tabindex="1"
                 >
                   <div
-                    class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
+                    class="menu"
                   >
-                    <span
-                      class="css-1f43avz-a11yText-A11yText"
-                      id="react-select-overview-namespace-select-filter-input-live-region"
-                    />
-                    <span
-                      aria-atomic="false"
-                      aria-live="polite"
-                      aria-relevant="additions text"
-                      class="css-1f43avz-a11yText-A11yText"
-                    />
                     <div
-                      class="Select__control css-13cymwt-control"
+                      class="non-icon"
                     >
+                      <input
+                        data-testid="namespace-select-filter-input"
+                        id="overview-namespace-select-filter-input-filter"
+                        type="text"
+                        value=""
+                      />
                       <div
-                        class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer"
+                        class="gradient left"
+                      />
+                      <label
+                        for="overview-namespace-select-filter-input-filter"
                       >
-                        <div
-                          class="Select__placeholder css-1jqq78o-placeholder"
-                          id="react-select-overview-namespace-select-filter-input-placeholder"
-                        >
-                          All namespaces
-                        </div>
-                        <div
-                          class="Select__input-container css-qbdosj-Input"
-                          data-value=""
-                        >
-                          <input
-                            aria-autocomplete="list"
-                            aria-describedby="react-select-overview-namespace-select-filter-input-placeholder"
-                            aria-expanded="false"
-                            aria-haspopup="true"
-                            autocapitalize="none"
-                            autocomplete="off"
-                            autocorrect="off"
-                            class="Select__input"
-                            id="overview-namespace-select-filter-input"
-                            role="combobox"
-                            spellcheck="false"
-                            style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
-                            tabindex="0"
-                            type="text"
-                            value=""
-                          />
-                        </div>
-                      </div>
+                        Namespaces: 
+                      </label>
                       <div
-                        class="Select__indicators css-1hb7zxy-IndicatorsContainer"
-                      >
-                        <span
-                          class="Select__indicator-separator css-1u9des2-indicatorSeparator"
-                        />
-                        <div
-                          aria-hidden="true"
-                          class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="css-tj5bde-Svg"
-                            focusable="false"
-                            height="20"
-                            viewBox="0 0 20 20"
-                            width="20"
-                          >
-                            <path
-                              d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                            />
-                          </svg>
-                        </div>
-                      </div>
+                        class="gradient right"
+                      />
                     </div>
+                    <i
+                      class="Icon expand-icon material interactive focusable"
+                      data-testid="namespace-select-filter-expand-icon"
+                      tabindex="0"
+                    >
+                      <span
+                        class="icon"
+                        data-icon-name="expand_more"
+                      >
+                        expand_more
+                      </span>
+                    </i>
                   </div>
                 </div>
               </div>
diff --git a/packages/core/src/features/cluster/extension-api/__snapshots__/disable-sidebar-items-when-cluster-is-not-relevant.test.tsx.snap b/packages/core/src/features/cluster/extension-api/__snapshots__/disable-sidebar-items-when-cluster-is-not-relevant.test.tsx.snap
index 62dc47d37c30..3d34f6be8881 100644
--- a/packages/core/src/features/cluster/extension-api/__snapshots__/disable-sidebar-items-when-cluster-is-not-relevant.test.tsx.snap
+++ b/packages/core/src/features/cluster/extension-api/__snapshots__/disable-sidebar-items-when-cluster-is-not-relevant.test.tsx.snap
@@ -312,82 +312,47 @@ exports[`disable sidebar items when cluster is not relevant given extension shou
                   Overview
                 </h5>
                 <div
-                  class="NamespaceSelectFilterParent"
+                  class="namespace-select-filter"
                   data-testid="namespace-select-filter"
+                  id="overview-namespace-select-filter-input"
+                  tabindex="1"
                 >
                   <div
-                    class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
+                    class="menu"
                   >
-                    <span
-                      class="css-1f43avz-a11yText-A11yText"
-                      id="react-select-overview-namespace-select-filter-input-live-region"
-                    />
-                    <span
-                      aria-atomic="false"
-                      aria-live="polite"
-                      aria-relevant="additions text"
-                      class="css-1f43avz-a11yText-A11yText"
-                    />
                     <div
-                      class="Select__control css-13cymwt-control"
+                      class="non-icon"
                     >
+                      <input
+                        data-testid="namespace-select-filter-input"
+                        id="overview-namespace-select-filter-input-filter"
+                        type="text"
+                        value=""
+                      />
                       <div
-                        class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer"
+                        class="gradient left"
+                      />
+                      <label
+                        for="overview-namespace-select-filter-input-filter"
                       >
-                        <div
-                          class="Select__placeholder css-1jqq78o-placeholder"
-                          id="react-select-overview-namespace-select-filter-input-placeholder"
-                        >
-                          All namespaces
-                        </div>
-                        <div
-                          class="Select__input-container css-qbdosj-Input"
-                          data-value=""
-                        >
-                          <input
-                            aria-autocomplete="list"
-                            aria-describedby="react-select-overview-namespace-select-filter-input-placeholder"
-                            aria-expanded="false"
-                            aria-haspopup="true"
-                            autocapitalize="none"
-                            autocomplete="off"
-                            autocorrect="off"
-                            class="Select__input"
-                            id="overview-namespace-select-filter-input"
-                            role="combobox"
-                            spellcheck="false"
-                            style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
-                            tabindex="0"
-                            type="text"
-                            value=""
-                          />
-                        </div>
-                      </div>
+                        Namespaces: 
+                      </label>
                       <div
-                        class="Select__indicators css-1hb7zxy-IndicatorsContainer"
-                      >
-                        <span
-                          class="Select__indicator-separator css-1u9des2-indicatorSeparator"
-                        />
-                        <div
-                          aria-hidden="true"
-                          class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="css-tj5bde-Svg"
-                            focusable="false"
-                            height="20"
-                            viewBox="0 0 20 20"
-                            width="20"
-                          >
-                            <path
-                              d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                            />
-                          </svg>
-                        </div>
-                      </div>
+                        class="gradient right"
+                      />
                     </div>
+                    <i
+                      class="Icon expand-icon material interactive focusable"
+                      data-testid="namespace-select-filter-expand-icon"
+                      tabindex="0"
+                    >
+                      <span
+                        class="icon"
+                        data-icon-name="expand_more"
+                      >
+                        expand_more
+                      </span>
+                    </i>
                   </div>
                 </div>
               </div>
@@ -829,82 +794,47 @@ exports[`disable sidebar items when cluster is not relevant given extension shou
                   Overview
                 </h5>
                 <div
-                  class="NamespaceSelectFilterParent"
+                  class="namespace-select-filter"
                   data-testid="namespace-select-filter"
+                  id="overview-namespace-select-filter-input"
+                  tabindex="1"
                 >
                   <div
-                    class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
+                    class="menu"
                   >
-                    <span
-                      class="css-1f43avz-a11yText-A11yText"
-                      id="react-select-overview-namespace-select-filter-input-live-region"
-                    />
-                    <span
-                      aria-atomic="false"
-                      aria-live="polite"
-                      aria-relevant="additions text"
-                      class="css-1f43avz-a11yText-A11yText"
-                    />
                     <div
-                      class="Select__control css-13cymwt-control"
+                      class="non-icon"
                     >
+                      <input
+                        data-testid="namespace-select-filter-input"
+                        id="overview-namespace-select-filter-input-filter"
+                        type="text"
+                        value=""
+                      />
                       <div
-                        class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer"
+                        class="gradient left"
+                      />
+                      <label
+                        for="overview-namespace-select-filter-input-filter"
                       >
-                        <div
-                          class="Select__placeholder css-1jqq78o-placeholder"
-                          id="react-select-overview-namespace-select-filter-input-placeholder"
-                        >
-                          All namespaces
-                        </div>
-                        <div
-                          class="Select__input-container css-qbdosj-Input"
-                          data-value=""
-                        >
-                          <input
-                            aria-autocomplete="list"
-                            aria-describedby="react-select-overview-namespace-select-filter-input-placeholder"
-                            aria-expanded="false"
-                            aria-haspopup="true"
-                            autocapitalize="none"
-                            autocomplete="off"
-                            autocorrect="off"
-                            class="Select__input"
-                            id="overview-namespace-select-filter-input"
-                            role="combobox"
-                            spellcheck="false"
-                            style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
-                            tabindex="0"
-                            type="text"
-                            value=""
-                          />
-                        </div>
-                      </div>
+                        Namespaces: 
+                      </label>
                       <div
-                        class="Select__indicators css-1hb7zxy-IndicatorsContainer"
-                      >
-                        <span
-                          class="Select__indicator-separator css-1u9des2-indicatorSeparator"
-                        />
-                        <div
-                          aria-hidden="true"
-                          class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="css-tj5bde-Svg"
-                            focusable="false"
-                            height="20"
-                            viewBox="0 0 20 20"
-                            width="20"
-                          >
-                            <path
-                              d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                            />
-                          </svg>
-                        </div>
-                      </div>
+                        class="gradient right"
+                      />
                     </div>
+                    <i
+                      class="Icon expand-icon material interactive focusable"
+                      data-testid="namespace-select-filter-expand-icon"
+                      tabindex="0"
+                    >
+                      <span
+                        class="icon"
+                        data-icon-name="expand_more"
+                      >
+                        expand_more
+                      </span>
+                    </i>
                   </div>
                 </div>
               </div>
@@ -1346,82 +1276,47 @@ exports[`disable sidebar items when cluster is not relevant given not yet known
                   Overview
                 </h5>
                 <div
-                  class="NamespaceSelectFilterParent"
+                  class="namespace-select-filter"
                   data-testid="namespace-select-filter"
+                  id="overview-namespace-select-filter-input"
+                  tabindex="1"
                 >
                   <div
-                    class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
+                    class="menu"
                   >
-                    <span
-                      class="css-1f43avz-a11yText-A11yText"
-                      id="react-select-overview-namespace-select-filter-input-live-region"
-                    />
-                    <span
-                      aria-atomic="false"
-                      aria-live="polite"
-                      aria-relevant="additions text"
-                      class="css-1f43avz-a11yText-A11yText"
-                    />
                     <div
-                      class="Select__control css-13cymwt-control"
+                      class="non-icon"
                     >
+                      <input
+                        data-testid="namespace-select-filter-input"
+                        id="overview-namespace-select-filter-input-filter"
+                        type="text"
+                        value=""
+                      />
                       <div
-                        class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer"
+                        class="gradient left"
+                      />
+                      <label
+                        for="overview-namespace-select-filter-input-filter"
                       >
-                        <div
-                          class="Select__placeholder css-1jqq78o-placeholder"
-                          id="react-select-overview-namespace-select-filter-input-placeholder"
-                        >
-                          All namespaces
-                        </div>
-                        <div
-                          class="Select__input-container css-qbdosj-Input"
-                          data-value=""
-                        >
-                          <input
-                            aria-autocomplete="list"
-                            aria-describedby="react-select-overview-namespace-select-filter-input-placeholder"
-                            aria-expanded="false"
-                            aria-haspopup="true"
-                            autocapitalize="none"
-                            autocomplete="off"
-                            autocorrect="off"
-                            class="Select__input"
-                            id="overview-namespace-select-filter-input"
-                            role="combobox"
-                            spellcheck="false"
-                            style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
-                            tabindex="0"
-                            type="text"
-                            value=""
-                          />
-                        </div>
-                      </div>
+                        Namespaces: 
+                      </label>
                       <div
-                        class="Select__indicators css-1hb7zxy-IndicatorsContainer"
-                      >
-                        <span
-                          class="Select__indicator-separator css-1u9des2-indicatorSeparator"
-                        />
-                        <div
-                          aria-hidden="true"
-                          class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="css-tj5bde-Svg"
-                            focusable="false"
-                            height="20"
-                            viewBox="0 0 20 20"
-                            width="20"
-                          >
-                            <path
-                              d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                            />
-                          </svg>
-                        </div>
-                      </div>
+                        class="gradient right"
+                      />
                     </div>
+                    <i
+                      class="Icon expand-icon material interactive focusable"
+                      data-testid="namespace-select-filter-expand-icon"
+                      tabindex="0"
+                    >
+                      <span
+                        class="icon"
+                        data-icon-name="expand_more"
+                      >
+                        expand_more
+                      </span>
+                    </i>
                   </div>
                 </div>
               </div>
diff --git a/packages/core/src/features/cluster/kube-object-details/extension-api/__snapshots__/disable-kube-object-detail-items-when-cluster-is-not-relevant.test.tsx.snap b/packages/core/src/features/cluster/kube-object-details/extension-api/__snapshots__/disable-kube-object-detail-items-when-cluster-is-not-relevant.test.tsx.snap
index 140d800d9905..a9d55b541616 100644
--- a/packages/core/src/features/cluster/kube-object-details/extension-api/__snapshots__/disable-kube-object-detail-items-when-cluster-is-not-relevant.test.tsx.snap
+++ b/packages/core/src/features/cluster/kube-object-details/extension-api/__snapshots__/disable-kube-object-detail-items-when-cluster-is-not-relevant.test.tsx.snap
@@ -365,82 +365,47 @@ exports[`disable kube object detail items when cluster is not relevant given ext
                   Overview
                 </h5>
                 <div
-                  class="NamespaceSelectFilterParent"
+                  class="namespace-select-filter"
                   data-testid="namespace-select-filter"
+                  id="overview-namespace-select-filter-input"
+                  tabindex="1"
                 >
                   <div
-                    class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
+                    class="menu"
                   >
-                    <span
-                      class="css-1f43avz-a11yText-A11yText"
-                      id="react-select-overview-namespace-select-filter-input-live-region"
-                    />
-                    <span
-                      aria-atomic="false"
-                      aria-live="polite"
-                      aria-relevant="additions text"
-                      class="css-1f43avz-a11yText-A11yText"
-                    />
                     <div
-                      class="Select__control css-13cymwt-control"
+                      class="non-icon"
                     >
+                      <input
+                        data-testid="namespace-select-filter-input"
+                        id="overview-namespace-select-filter-input-filter"
+                        type="text"
+                        value=""
+                      />
                       <div
-                        class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer"
+                        class="gradient left"
+                      />
+                      <label
+                        for="overview-namespace-select-filter-input-filter"
                       >
-                        <div
-                          class="Select__placeholder css-1jqq78o-placeholder"
-                          id="react-select-overview-namespace-select-filter-input-placeholder"
-                        >
-                          All namespaces
-                        </div>
-                        <div
-                          class="Select__input-container css-qbdosj-Input"
-                          data-value=""
-                        >
-                          <input
-                            aria-autocomplete="list"
-                            aria-describedby="react-select-overview-namespace-select-filter-input-placeholder"
-                            aria-expanded="false"
-                            aria-haspopup="true"
-                            autocapitalize="none"
-                            autocomplete="off"
-                            autocorrect="off"
-                            class="Select__input"
-                            id="overview-namespace-select-filter-input"
-                            role="combobox"
-                            spellcheck="false"
-                            style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
-                            tabindex="0"
-                            type="text"
-                            value=""
-                          />
-                        </div>
-                      </div>
+                        Namespaces: 
+                      </label>
                       <div
-                        class="Select__indicators css-1hb7zxy-IndicatorsContainer"
-                      >
-                        <span
-                          class="Select__indicator-separator css-1u9des2-indicatorSeparator"
-                        />
-                        <div
-                          aria-hidden="true"
-                          class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="css-tj5bde-Svg"
-                            focusable="false"
-                            height="20"
-                            viewBox="0 0 20 20"
-                            width="20"
-                          >
-                            <path
-                              d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                            />
-                          </svg>
-                        </div>
-                      </div>
+                        class="gradient right"
+                      />
                     </div>
+                    <i
+                      class="Icon expand-icon material interactive focusable"
+                      data-testid="namespace-select-filter-expand-icon"
+                      tabindex="0"
+                    >
+                      <span
+                        class="icon"
+                        data-icon-name="expand_more"
+                      >
+                        expand_more
+                      </span>
+                    </i>
                   </div>
                 </div>
               </div>
@@ -948,82 +913,47 @@ exports[`disable kube object detail items when cluster is not relevant given ext
                   Overview
                 </h5>
                 <div
-                  class="NamespaceSelectFilterParent"
+                  class="namespace-select-filter"
                   data-testid="namespace-select-filter"
+                  id="overview-namespace-select-filter-input"
+                  tabindex="1"
                 >
                   <div
-                    class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
+                    class="menu"
                   >
-                    <span
-                      class="css-1f43avz-a11yText-A11yText"
-                      id="react-select-overview-namespace-select-filter-input-live-region"
-                    />
-                    <span
-                      aria-atomic="false"
-                      aria-live="polite"
-                      aria-relevant="additions text"
-                      class="css-1f43avz-a11yText-A11yText"
-                    />
                     <div
-                      class="Select__control css-13cymwt-control"
+                      class="non-icon"
                     >
+                      <input
+                        data-testid="namespace-select-filter-input"
+                        id="overview-namespace-select-filter-input-filter"
+                        type="text"
+                        value=""
+                      />
                       <div
-                        class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer"
+                        class="gradient left"
+                      />
+                      <label
+                        for="overview-namespace-select-filter-input-filter"
                       >
-                        <div
-                          class="Select__placeholder css-1jqq78o-placeholder"
-                          id="react-select-overview-namespace-select-filter-input-placeholder"
-                        >
-                          All namespaces
-                        </div>
-                        <div
-                          class="Select__input-container css-qbdosj-Input"
-                          data-value=""
-                        >
-                          <input
-                            aria-autocomplete="list"
-                            aria-describedby="react-select-overview-namespace-select-filter-input-placeholder"
-                            aria-expanded="false"
-                            aria-haspopup="true"
-                            autocapitalize="none"
-                            autocomplete="off"
-                            autocorrect="off"
-                            class="Select__input"
-                            id="overview-namespace-select-filter-input"
-                            role="combobox"
-                            spellcheck="false"
-                            style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
-                            tabindex="0"
-                            type="text"
-                            value=""
-                          />
-                        </div>
-                      </div>
+                        Namespaces: 
+                      </label>
                       <div
-                        class="Select__indicators css-1hb7zxy-IndicatorsContainer"
-                      >
-                        <span
-                          class="Select__indicator-separator css-1u9des2-indicatorSeparator"
-                        />
-                        <div
-                          aria-hidden="true"
-                          class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="css-tj5bde-Svg"
-                            focusable="false"
-                            height="20"
-                            viewBox="0 0 20 20"
-                            width="20"
-                          >
-                            <path
-                              d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                            />
-                          </svg>
-                        </div>
-                      </div>
+                        class="gradient right"
+                      />
                     </div>
+                    <i
+                      class="Icon expand-icon material interactive focusable"
+                      data-testid="namespace-select-filter-expand-icon"
+                      tabindex="0"
+                    >
+                      <span
+                        class="icon"
+                        data-icon-name="expand_more"
+                      >
+                        expand_more
+                      </span>
+                    </i>
                   </div>
                 </div>
               </div>
@@ -1531,82 +1461,47 @@ exports[`disable kube object detail items when cluster is not relevant given not
                   Overview
                 </h5>
                 <div
-                  class="NamespaceSelectFilterParent"
+                  class="namespace-select-filter"
                   data-testid="namespace-select-filter"
+                  id="overview-namespace-select-filter-input"
+                  tabindex="1"
                 >
                   <div
-                    class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
+                    class="menu"
                   >
-                    <span
-                      class="css-1f43avz-a11yText-A11yText"
-                      id="react-select-overview-namespace-select-filter-input-live-region"
-                    />
-                    <span
-                      aria-atomic="false"
-                      aria-live="polite"
-                      aria-relevant="additions text"
-                      class="css-1f43avz-a11yText-A11yText"
-                    />
                     <div
-                      class="Select__control css-13cymwt-control"
+                      class="non-icon"
                     >
+                      <input
+                        data-testid="namespace-select-filter-input"
+                        id="overview-namespace-select-filter-input-filter"
+                        type="text"
+                        value=""
+                      />
                       <div
-                        class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer"
+                        class="gradient left"
+                      />
+                      <label
+                        for="overview-namespace-select-filter-input-filter"
                       >
-                        <div
-                          class="Select__placeholder css-1jqq78o-placeholder"
-                          id="react-select-overview-namespace-select-filter-input-placeholder"
-                        >
-                          All namespaces
-                        </div>
-                        <div
-                          class="Select__input-container css-qbdosj-Input"
-                          data-value=""
-                        >
-                          <input
-                            aria-autocomplete="list"
-                            aria-describedby="react-select-overview-namespace-select-filter-input-placeholder"
-                            aria-expanded="false"
-                            aria-haspopup="true"
-                            autocapitalize="none"
-                            autocomplete="off"
-                            autocorrect="off"
-                            class="Select__input"
-                            id="overview-namespace-select-filter-input"
-                            role="combobox"
-                            spellcheck="false"
-                            style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
-                            tabindex="0"
-                            type="text"
-                            value=""
-                          />
-                        </div>
-                      </div>
+                        Namespaces: 
+                      </label>
                       <div
-                        class="Select__indicators css-1hb7zxy-IndicatorsContainer"
-                      >
-                        <span
-                          class="Select__indicator-separator css-1u9des2-indicatorSeparator"
-                        />
-                        <div
-                          aria-hidden="true"
-                          class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="css-tj5bde-Svg"
-                            focusable="false"
-                            height="20"
-                            viewBox="0 0 20 20"
-                            width="20"
-                          >
-                            <path
-                              d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                            />
-                          </svg>
-                        </div>
-                      </div>
+                        class="gradient right"
+                      />
                     </div>
+                    <i
+                      class="Icon expand-icon material interactive focusable"
+                      data-testid="namespace-select-filter-expand-icon"
+                      tabindex="0"
+                    >
+                      <span
+                        class="icon"
+                        data-icon-name="expand_more"
+                      >
+                        expand_more
+                      </span>
+                    </i>
                   </div>
                 </div>
               </div>
diff --git a/packages/core/src/features/cluster/kube-object-details/extension-api/__snapshots__/reactively-hide-kube-object-detail-item.test.tsx.snap b/packages/core/src/features/cluster/kube-object-details/extension-api/__snapshots__/reactively-hide-kube-object-detail-item.test.tsx.snap
index aa580d82f69e..e9e3fc498d3c 100644
--- a/packages/core/src/features/cluster/kube-object-details/extension-api/__snapshots__/reactively-hide-kube-object-detail-item.test.tsx.snap
+++ b/packages/core/src/features/cluster/kube-object-details/extension-api/__snapshots__/reactively-hide-kube-object-detail-item.test.tsx.snap
@@ -360,82 +360,47 @@ exports[`reactively hide kube object detail item renders 1`] = `
                   Overview
                 </h5>
                 <div
-                  class="NamespaceSelectFilterParent"
+                  class="namespace-select-filter"
                   data-testid="namespace-select-filter"
+                  id="overview-namespace-select-filter-input"
+                  tabindex="1"
                 >
                   <div
-                    class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
+                    class="menu"
                   >
-                    <span
-                      class="css-1f43avz-a11yText-A11yText"
-                      id="react-select-overview-namespace-select-filter-input-live-region"
-                    />
-                    <span
-                      aria-atomic="false"
-                      aria-live="polite"
-                      aria-relevant="additions text"
-                      class="css-1f43avz-a11yText-A11yText"
-                    />
                     <div
-                      class="Select__control css-13cymwt-control"
+                      class="non-icon"
                     >
+                      <input
+                        data-testid="namespace-select-filter-input"
+                        id="overview-namespace-select-filter-input-filter"
+                        type="text"
+                        value=""
+                      />
                       <div
-                        class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer"
+                        class="gradient left"
+                      />
+                      <label
+                        for="overview-namespace-select-filter-input-filter"
                       >
-                        <div
-                          class="Select__placeholder css-1jqq78o-placeholder"
-                          id="react-select-overview-namespace-select-filter-input-placeholder"
-                        >
-                          All namespaces
-                        </div>
-                        <div
-                          class="Select__input-container css-qbdosj-Input"
-                          data-value=""
-                        >
-                          <input
-                            aria-autocomplete="list"
-                            aria-describedby="react-select-overview-namespace-select-filter-input-placeholder"
-                            aria-expanded="false"
-                            aria-haspopup="true"
-                            autocapitalize="none"
-                            autocomplete="off"
-                            autocorrect="off"
-                            class="Select__input"
-                            id="overview-namespace-select-filter-input"
-                            role="combobox"
-                            spellcheck="false"
-                            style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
-                            tabindex="0"
-                            type="text"
-                            value=""
-                          />
-                        </div>
-                      </div>
+                        Namespaces: 
+                      </label>
                       <div
-                        class="Select__indicators css-1hb7zxy-IndicatorsContainer"
-                      >
-                        <span
-                          class="Select__indicator-separator css-1u9des2-indicatorSeparator"
-                        />
-                        <div
-                          aria-hidden="true"
-                          class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="css-tj5bde-Svg"
-                            focusable="false"
-                            height="20"
-                            viewBox="0 0 20 20"
-                            width="20"
-                          >
-                            <path
-                              d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                            />
-                          </svg>
-                        </div>
-                      </div>
+                        class="gradient right"
+                      />
                     </div>
+                    <i
+                      class="Icon expand-icon material interactive focusable"
+                      data-testid="namespace-select-filter-expand-icon"
+                      tabindex="0"
+                    >
+                      <span
+                        class="icon"
+                        data-icon-name="expand_more"
+                      >
+                        expand_more
+                      </span>
+                    </i>
                   </div>
                 </div>
               </div>
@@ -948,82 +913,47 @@ exports[`reactively hide kube object detail item when the item is shown renders
                   Overview
                 </h5>
                 <div
-                  class="NamespaceSelectFilterParent"
+                  class="namespace-select-filter"
                   data-testid="namespace-select-filter"
+                  id="overview-namespace-select-filter-input"
+                  tabindex="1"
                 >
                   <div
-                    class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
+                    class="menu"
                   >
-                    <span
-                      class="css-1f43avz-a11yText-A11yText"
-                      id="react-select-overview-namespace-select-filter-input-live-region"
-                    />
-                    <span
-                      aria-atomic="false"
-                      aria-live="polite"
-                      aria-relevant="additions text"
-                      class="css-1f43avz-a11yText-A11yText"
-                    />
                     <div
-                      class="Select__control css-13cymwt-control"
+                      class="non-icon"
                     >
+                      <input
+                        data-testid="namespace-select-filter-input"
+                        id="overview-namespace-select-filter-input-filter"
+                        type="text"
+                        value=""
+                      />
                       <div
-                        class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer"
+                        class="gradient left"
+                      />
+                      <label
+                        for="overview-namespace-select-filter-input-filter"
                       >
-                        <div
-                          class="Select__placeholder css-1jqq78o-placeholder"
-                          id="react-select-overview-namespace-select-filter-input-placeholder"
-                        >
-                          All namespaces
-                        </div>
-                        <div
-                          class="Select__input-container css-qbdosj-Input"
-                          data-value=""
-                        >
-                          <input
-                            aria-autocomplete="list"
-                            aria-describedby="react-select-overview-namespace-select-filter-input-placeholder"
-                            aria-expanded="false"
-                            aria-haspopup="true"
-                            autocapitalize="none"
-                            autocomplete="off"
-                            autocorrect="off"
-                            class="Select__input"
-                            id="overview-namespace-select-filter-input"
-                            role="combobox"
-                            spellcheck="false"
-                            style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
-                            tabindex="0"
-                            type="text"
-                            value=""
-                          />
-                        </div>
-                      </div>
+                        Namespaces: 
+                      </label>
                       <div
-                        class="Select__indicators css-1hb7zxy-IndicatorsContainer"
-                      >
-                        <span
-                          class="Select__indicator-separator css-1u9des2-indicatorSeparator"
-                        />
-                        <div
-                          aria-hidden="true"
-                          class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="css-tj5bde-Svg"
-                            focusable="false"
-                            height="20"
-                            viewBox="0 0 20 20"
-                            width="20"
-                          >
-                            <path
-                              d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                            />
-                          </svg>
-                        </div>
-                      </div>
+                        class="gradient right"
+                      />
                     </div>
+                    <i
+                      class="Icon expand-icon material interactive focusable"
+                      data-testid="namespace-select-filter-expand-icon"
+                      tabindex="0"
+                    >
+                      <span
+                        class="icon"
+                        data-icon-name="expand_more"
+                      >
+                        expand_more
+                      </span>
+                    </i>
                   </div>
                 </div>
               </div>
diff --git a/packages/core/src/features/cluster/namespaces/__snapshots__/edit-namespace-from-previously-opened-tab.test.tsx.snap b/packages/core/src/features/cluster/namespaces/__snapshots__/edit-namespace-from-previously-opened-tab.test.tsx.snap
index af16c7648e53..32da53b4c1b8 100644
--- a/packages/core/src/features/cluster/namespaces/__snapshots__/edit-namespace-from-previously-opened-tab.test.tsx.snap
+++ b/packages/core/src/features/cluster/namespaces/__snapshots__/edit-namespace-from-previously-opened-tab.test.tsx.snap
@@ -319,82 +319,47 @@ exports[`cluster/namespaces - edit namespaces from previously opened tab given t
                   Overview
                 </h5>
                 <div
-                  class="NamespaceSelectFilterParent"
+                  class="namespace-select-filter"
                   data-testid="namespace-select-filter"
+                  id="overview-namespace-select-filter-input"
+                  tabindex="1"
                 >
                   <div
-                    class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
+                    class="menu"
                   >
-                    <span
-                      class="css-1f43avz-a11yText-A11yText"
-                      id="react-select-overview-namespace-select-filter-input-live-region"
-                    />
-                    <span
-                      aria-atomic="false"
-                      aria-live="polite"
-                      aria-relevant="additions text"
-                      class="css-1f43avz-a11yText-A11yText"
-                    />
                     <div
-                      class="Select__control css-13cymwt-control"
+                      class="non-icon"
                     >
+                      <input
+                        data-testid="namespace-select-filter-input"
+                        id="overview-namespace-select-filter-input-filter"
+                        type="text"
+                        value=""
+                      />
                       <div
-                        class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer"
+                        class="gradient left"
+                      />
+                      <label
+                        for="overview-namespace-select-filter-input-filter"
                       >
-                        <div
-                          class="Select__placeholder css-1jqq78o-placeholder"
-                          id="react-select-overview-namespace-select-filter-input-placeholder"
-                        >
-                          All namespaces
-                        </div>
-                        <div
-                          class="Select__input-container css-qbdosj-Input"
-                          data-value=""
-                        >
-                          <input
-                            aria-autocomplete="list"
-                            aria-describedby="react-select-overview-namespace-select-filter-input-placeholder"
-                            aria-expanded="false"
-                            aria-haspopup="true"
-                            autocapitalize="none"
-                            autocomplete="off"
-                            autocorrect="off"
-                            class="Select__input"
-                            id="overview-namespace-select-filter-input"
-                            role="combobox"
-                            spellcheck="false"
-                            style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
-                            tabindex="0"
-                            type="text"
-                            value=""
-                          />
-                        </div>
-                      </div>
+                        Namespaces: 
+                      </label>
                       <div
-                        class="Select__indicators css-1hb7zxy-IndicatorsContainer"
-                      >
-                        <span
-                          class="Select__indicator-separator css-1u9des2-indicatorSeparator"
-                        />
-                        <div
-                          aria-hidden="true"
-                          class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="css-tj5bde-Svg"
-                            focusable="false"
-                            height="20"
-                            viewBox="0 0 20 20"
-                            width="20"
-                          >
-                            <path
-                              d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                            />
-                          </svg>
-                        </div>
-                      </div>
+                        class="gradient right"
+                      />
                     </div>
+                    <i
+                      class="Icon expand-icon material interactive focusable"
+                      data-testid="namespace-select-filter-expand-icon"
+                      tabindex="0"
+                    >
+                      <span
+                        class="icon"
+                        data-icon-name="expand_more"
+                      >
+                        expand_more
+                      </span>
+                    </i>
                   </div>
                 </div>
               </div>
@@ -871,82 +836,47 @@ exports[`cluster/namespaces - edit namespaces from previously opened tab given t
                   Overview
                 </h5>
                 <div
-                  class="NamespaceSelectFilterParent"
+                  class="namespace-select-filter"
                   data-testid="namespace-select-filter"
+                  id="overview-namespace-select-filter-input"
+                  tabindex="1"
                 >
                   <div
-                    class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
+                    class="menu"
                   >
-                    <span
-                      class="css-1f43avz-a11yText-A11yText"
-                      id="react-select-overview-namespace-select-filter-input-live-region"
-                    />
-                    <span
-                      aria-atomic="false"
-                      aria-live="polite"
-                      aria-relevant="additions text"
-                      class="css-1f43avz-a11yText-A11yText"
-                    />
                     <div
-                      class="Select__control css-13cymwt-control"
+                      class="non-icon"
                     >
+                      <input
+                        data-testid="namespace-select-filter-input"
+                        id="overview-namespace-select-filter-input-filter"
+                        type="text"
+                        value=""
+                      />
                       <div
-                        class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer"
+                        class="gradient left"
+                      />
+                      <label
+                        for="overview-namespace-select-filter-input-filter"
                       >
-                        <div
-                          class="Select__placeholder css-1jqq78o-placeholder"
-                          id="react-select-overview-namespace-select-filter-input-placeholder"
-                        >
-                          All namespaces
-                        </div>
-                        <div
-                          class="Select__input-container css-qbdosj-Input"
-                          data-value=""
-                        >
-                          <input
-                            aria-autocomplete="list"
-                            aria-describedby="react-select-overview-namespace-select-filter-input-placeholder"
-                            aria-expanded="false"
-                            aria-haspopup="true"
-                            autocapitalize="none"
-                            autocomplete="off"
-                            autocorrect="off"
-                            class="Select__input"
-                            id="overview-namespace-select-filter-input"
-                            role="combobox"
-                            spellcheck="false"
-                            style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
-                            tabindex="0"
-                            type="text"
-                            value=""
-                          />
-                        </div>
-                      </div>
+                        Namespaces: 
+                      </label>
                       <div
-                        class="Select__indicators css-1hb7zxy-IndicatorsContainer"
-                      >
-                        <span
-                          class="Select__indicator-separator css-1u9des2-indicatorSeparator"
-                        />
-                        <div
-                          aria-hidden="true"
-                          class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="css-tj5bde-Svg"
-                            focusable="false"
-                            height="20"
-                            viewBox="0 0 20 20"
-                            width="20"
-                          >
-                            <path
-                              d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                            />
-                          </svg>
-                        </div>
-                      </div>
+                        class="gradient right"
+                      />
                     </div>
+                    <i
+                      class="Icon expand-icon material interactive focusable"
+                      data-testid="namespace-select-filter-expand-icon"
+                      tabindex="0"
+                    >
+                      <span
+                        class="icon"
+                        data-icon-name="expand_more"
+                      >
+                        expand_more
+                      </span>
+                    </i>
                   </div>
                 </div>
               </div>
diff --git a/packages/core/src/features/cluster/workloads/__snapshots__/pods.test.tsx.snap b/packages/core/src/features/cluster/workloads/__snapshots__/pods.test.tsx.snap
index d037610871a9..cc9bedf85fe3 100644
--- a/packages/core/src/features/cluster/workloads/__snapshots__/pods.test.tsx.snap
+++ b/packages/core/src/features/cluster/workloads/__snapshots__/pods.test.tsx.snap
@@ -311,82 +311,47 @@ exports[`workloads / pods when navigating to workloads / pods view given a names
                   1 item
                 </div>
                 <div
-                  class="NamespaceSelectFilterParent"
+                  class="namespace-select-filter"
                   data-testid="namespace-select-filter"
+                  id="kube-object-list-layout-namespace-select-input"
+                  tabindex="1"
                 >
                   <div
-                    class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
+                    class="menu"
                   >
-                    <span
-                      class="css-1f43avz-a11yText-A11yText"
-                      id="react-select-kube-object-list-layout-namespace-select-input-live-region"
-                    />
-                    <span
-                      aria-atomic="false"
-                      aria-live="polite"
-                      aria-relevant="additions text"
-                      class="css-1f43avz-a11yText-A11yText"
-                    />
                     <div
-                      class="Select__control css-13cymwt-control"
+                      class="non-icon"
                     >
+                      <input
+                        data-testid="namespace-select-filter-input"
+                        id="kube-object-list-layout-namespace-select-input-filter"
+                        type="text"
+                        value=""
+                      />
                       <div
-                        class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer"
+                        class="gradient left"
+                      />
+                      <label
+                        for="kube-object-list-layout-namespace-select-input-filter"
                       >
-                        <div
-                          class="Select__placeholder css-1jqq78o-placeholder"
-                          id="react-select-kube-object-list-layout-namespace-select-input-placeholder"
-                        >
-                          All namespaces
-                        </div>
-                        <div
-                          class="Select__input-container css-qbdosj-Input"
-                          data-value=""
-                        >
-                          <input
-                            aria-autocomplete="list"
-                            aria-describedby="react-select-kube-object-list-layout-namespace-select-input-placeholder"
-                            aria-expanded="false"
-                            aria-haspopup="true"
-                            autocapitalize="none"
-                            autocomplete="off"
-                            autocorrect="off"
-                            class="Select__input"
-                            id="kube-object-list-layout-namespace-select-input"
-                            role="combobox"
-                            spellcheck="false"
-                            style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
-                            tabindex="0"
-                            type="text"
-                            value=""
-                          />
-                        </div>
-                      </div>
+                        Namespace: default
+                      </label>
                       <div
-                        class="Select__indicators css-1hb7zxy-IndicatorsContainer"
-                      >
-                        <span
-                          class="Select__indicator-separator css-1u9des2-indicatorSeparator"
-                        />
-                        <div
-                          aria-hidden="true"
-                          class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="css-tj5bde-Svg"
-                            focusable="false"
-                            height="20"
-                            viewBox="0 0 20 20"
-                            width="20"
-                          >
-                            <path
-                              d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                            />
-                          </svg>
-                        </div>
-                      </div>
+                        class="gradient right"
+                      />
                     </div>
+                    <i
+                      class="Icon expand-icon material interactive focusable"
+                      data-testid="namespace-select-filter-expand-icon"
+                      tabindex="0"
+                    >
+                      <span
+                        class="icon"
+                        data-icon-name="expand_more"
+                      >
+                        expand_more
+                      </span>
+                    </i>
                   </div>
                 </div>
                 <div
@@ -1217,82 +1182,47 @@ exports[`workloads / pods when navigating to workloads / pods view given no pods
                   0 items
                 </div>
                 <div
-                  class="NamespaceSelectFilterParent"
+                  class="namespace-select-filter"
                   data-testid="namespace-select-filter"
+                  id="kube-object-list-layout-namespace-select-input"
+                  tabindex="1"
                 >
                   <div
-                    class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
+                    class="menu"
                   >
-                    <span
-                      class="css-1f43avz-a11yText-A11yText"
-                      id="react-select-kube-object-list-layout-namespace-select-input-live-region"
-                    />
-                    <span
-                      aria-atomic="false"
-                      aria-live="polite"
-                      aria-relevant="additions text"
-                      class="css-1f43avz-a11yText-A11yText"
-                    />
                     <div
-                      class="Select__control css-13cymwt-control"
+                      class="non-icon"
                     >
+                      <input
+                        data-testid="namespace-select-filter-input"
+                        id="kube-object-list-layout-namespace-select-input-filter"
+                        type="text"
+                        value=""
+                      />
                       <div
-                        class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer"
+                        class="gradient left"
+                      />
+                      <label
+                        for="kube-object-list-layout-namespace-select-input-filter"
                       >
-                        <div
-                          class="Select__placeholder css-1jqq78o-placeholder"
-                          id="react-select-kube-object-list-layout-namespace-select-input-placeholder"
-                        >
-                          All namespaces
-                        </div>
-                        <div
-                          class="Select__input-container css-qbdosj-Input"
-                          data-value=""
-                        >
-                          <input
-                            aria-autocomplete="list"
-                            aria-describedby="react-select-kube-object-list-layout-namespace-select-input-placeholder"
-                            aria-expanded="false"
-                            aria-haspopup="true"
-                            autocapitalize="none"
-                            autocomplete="off"
-                            autocorrect="off"
-                            class="Select__input"
-                            id="kube-object-list-layout-namespace-select-input"
-                            role="combobox"
-                            spellcheck="false"
-                            style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
-                            tabindex="0"
-                            type="text"
-                            value=""
-                          />
-                        </div>
-                      </div>
+                        Namespace: default
+                      </label>
                       <div
-                        class="Select__indicators css-1hb7zxy-IndicatorsContainer"
-                      >
-                        <span
-                          class="Select__indicator-separator css-1u9des2-indicatorSeparator"
-                        />
-                        <div
-                          aria-hidden="true"
-                          class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="css-tj5bde-Svg"
-                            focusable="false"
-                            height="20"
-                            viewBox="0 0 20 20"
-                            width="20"
-                          >
-                            <path
-                              d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                            />
-                          </svg>
-                        </div>
-                      </div>
+                        class="gradient right"
+                      />
                     </div>
+                    <i
+                      class="Icon expand-icon material interactive focusable"
+                      data-testid="namespace-select-filter-expand-icon"
+                      tabindex="0"
+                    >
+                      <span
+                        class="icon"
+                        data-icon-name="expand_more"
+                      >
+                        expand_more
+                      </span>
+                    </i>
                   </div>
                 </div>
                 <div
@@ -2017,82 +1947,47 @@ exports[`workloads / pods when navigating to workloads / pods view given pods ar
                   0 items
                 </div>
                 <div
-                  class="NamespaceSelectFilterParent"
+                  class="namespace-select-filter"
                   data-testid="namespace-select-filter"
+                  id="kube-object-list-layout-namespace-select-input"
+                  tabindex="1"
                 >
                   <div
-                    class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
+                    class="menu"
                   >
-                    <span
-                      class="css-1f43avz-a11yText-A11yText"
-                      id="react-select-kube-object-list-layout-namespace-select-input-live-region"
-                    />
-                    <span
-                      aria-atomic="false"
-                      aria-live="polite"
-                      aria-relevant="additions text"
-                      class="css-1f43avz-a11yText-A11yText"
-                    />
                     <div
-                      class="Select__control css-13cymwt-control"
+                      class="non-icon"
                     >
+                      <input
+                        data-testid="namespace-select-filter-input"
+                        id="kube-object-list-layout-namespace-select-input-filter"
+                        type="text"
+                        value=""
+                      />
                       <div
-                        class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer"
+                        class="gradient left"
+                      />
+                      <label
+                        for="kube-object-list-layout-namespace-select-input-filter"
                       >
-                        <div
-                          class="Select__placeholder css-1jqq78o-placeholder"
-                          id="react-select-kube-object-list-layout-namespace-select-input-placeholder"
-                        >
-                          All namespaces
-                        </div>
-                        <div
-                          class="Select__input-container css-qbdosj-Input"
-                          data-value=""
-                        >
-                          <input
-                            aria-autocomplete="list"
-                            aria-describedby="react-select-kube-object-list-layout-namespace-select-input-placeholder"
-                            aria-expanded="false"
-                            aria-haspopup="true"
-                            autocapitalize="none"
-                            autocomplete="off"
-                            autocorrect="off"
-                            class="Select__input"
-                            id="kube-object-list-layout-namespace-select-input"
-                            role="combobox"
-                            spellcheck="false"
-                            style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
-                            tabindex="0"
-                            type="text"
-                            value=""
-                          />
-                        </div>
-                      </div>
+                        Namespace: default
+                      </label>
                       <div
-                        class="Select__indicators css-1hb7zxy-IndicatorsContainer"
-                      >
-                        <span
-                          class="Select__indicator-separator css-1u9des2-indicatorSeparator"
-                        />
-                        <div
-                          aria-hidden="true"
-                          class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="css-tj5bde-Svg"
-                            focusable="false"
-                            height="20"
-                            viewBox="0 0 20 20"
-                            width="20"
-                          >
-                            <path
-                              d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                            />
-                          </svg>
-                        </div>
-                      </div>
+                        class="gradient right"
+                      />
                     </div>
+                    <i
+                      class="Icon expand-icon material interactive focusable"
+                      data-testid="namespace-select-filter-expand-icon"
+                      tabindex="0"
+                    >
+                      <span
+                        class="icon"
+                        data-icon-name="expand_more"
+                      >
+                        expand_more
+                      </span>
+                    </i>
                   </div>
                 </div>
                 <div
diff --git a/packages/core/src/features/cluster/workloads/overview/extension-api/__snapshots__/disable-workloads-overview-details-when-cluster-is-not-relevant.test.tsx.snap b/packages/core/src/features/cluster/workloads/overview/extension-api/__snapshots__/disable-workloads-overview-details-when-cluster-is-not-relevant.test.tsx.snap
index 5bd16160cd9f..a09770f43489 100644
--- a/packages/core/src/features/cluster/workloads/overview/extension-api/__snapshots__/disable-workloads-overview-details-when-cluster-is-not-relevant.test.tsx.snap
+++ b/packages/core/src/features/cluster/workloads/overview/extension-api/__snapshots__/disable-workloads-overview-details-when-cluster-is-not-relevant.test.tsx.snap
@@ -294,82 +294,47 @@ exports[`disable workloads overview details when cluster is not relevant given e
                   Overview
                 </h5>
                 <div
-                  class="NamespaceSelectFilterParent"
+                  class="namespace-select-filter"
                   data-testid="namespace-select-filter"
+                  id="overview-namespace-select-filter-input"
+                  tabindex="1"
                 >
                   <div
-                    class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
+                    class="menu"
                   >
-                    <span
-                      class="css-1f43avz-a11yText-A11yText"
-                      id="react-select-overview-namespace-select-filter-input-live-region"
-                    />
-                    <span
-                      aria-atomic="false"
-                      aria-live="polite"
-                      aria-relevant="additions text"
-                      class="css-1f43avz-a11yText-A11yText"
-                    />
                     <div
-                      class="Select__control css-13cymwt-control"
+                      class="non-icon"
                     >
+                      <input
+                        data-testid="namespace-select-filter-input"
+                        id="overview-namespace-select-filter-input-filter"
+                        type="text"
+                        value=""
+                      />
                       <div
-                        class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer"
+                        class="gradient left"
+                      />
+                      <label
+                        for="overview-namespace-select-filter-input-filter"
                       >
-                        <div
-                          class="Select__placeholder css-1jqq78o-placeholder"
-                          id="react-select-overview-namespace-select-filter-input-placeholder"
-                        >
-                          All namespaces
-                        </div>
-                        <div
-                          class="Select__input-container css-qbdosj-Input"
-                          data-value=""
-                        >
-                          <input
-                            aria-autocomplete="list"
-                            aria-describedby="react-select-overview-namespace-select-filter-input-placeholder"
-                            aria-expanded="false"
-                            aria-haspopup="true"
-                            autocapitalize="none"
-                            autocomplete="off"
-                            autocorrect="off"
-                            class="Select__input"
-                            id="overview-namespace-select-filter-input"
-                            role="combobox"
-                            spellcheck="false"
-                            style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
-                            tabindex="0"
-                            type="text"
-                            value=""
-                          />
-                        </div>
-                      </div>
+                        Namespaces: 
+                      </label>
                       <div
-                        class="Select__indicators css-1hb7zxy-IndicatorsContainer"
-                      >
-                        <span
-                          class="Select__indicator-separator css-1u9des2-indicatorSeparator"
-                        />
-                        <div
-                          aria-hidden="true"
-                          class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="css-tj5bde-Svg"
-                            focusable="false"
-                            height="20"
-                            viewBox="0 0 20 20"
-                            width="20"
-                          >
-                            <path
-                              d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                            />
-                          </svg>
-                        </div>
-                      </div>
+                        class="gradient right"
+                      />
                     </div>
+                    <i
+                      class="Icon expand-icon material interactive focusable"
+                      data-testid="namespace-select-filter-expand-icon"
+                      tabindex="0"
+                    >
+                      <span
+                        class="icon"
+                        data-icon-name="expand_more"
+                      >
+                        expand_more
+                      </span>
+                    </i>
                   </div>
                 </div>
               </div>
@@ -816,82 +781,47 @@ exports[`disable workloads overview details when cluster is not relevant given e
                   Overview
                 </h5>
                 <div
-                  class="NamespaceSelectFilterParent"
+                  class="namespace-select-filter"
                   data-testid="namespace-select-filter"
+                  id="overview-namespace-select-filter-input"
+                  tabindex="1"
                 >
                   <div
-                    class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
+                    class="menu"
                   >
-                    <span
-                      class="css-1f43avz-a11yText-A11yText"
-                      id="react-select-overview-namespace-select-filter-input-live-region"
-                    />
-                    <span
-                      aria-atomic="false"
-                      aria-live="polite"
-                      aria-relevant="additions text"
-                      class="css-1f43avz-a11yText-A11yText"
-                    />
                     <div
-                      class="Select__control css-13cymwt-control"
+                      class="non-icon"
                     >
+                      <input
+                        data-testid="namespace-select-filter-input"
+                        id="overview-namespace-select-filter-input-filter"
+                        type="text"
+                        value=""
+                      />
                       <div
-                        class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer"
+                        class="gradient left"
+                      />
+                      <label
+                        for="overview-namespace-select-filter-input-filter"
                       >
-                        <div
-                          class="Select__placeholder css-1jqq78o-placeholder"
-                          id="react-select-overview-namespace-select-filter-input-placeholder"
-                        >
-                          All namespaces
-                        </div>
-                        <div
-                          class="Select__input-container css-qbdosj-Input"
-                          data-value=""
-                        >
-                          <input
-                            aria-autocomplete="list"
-                            aria-describedby="react-select-overview-namespace-select-filter-input-placeholder"
-                            aria-expanded="false"
-                            aria-haspopup="true"
-                            autocapitalize="none"
-                            autocomplete="off"
-                            autocorrect="off"
-                            class="Select__input"
-                            id="overview-namespace-select-filter-input"
-                            role="combobox"
-                            spellcheck="false"
-                            style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
-                            tabindex="0"
-                            type="text"
-                            value=""
-                          />
-                        </div>
-                      </div>
+                        Namespaces: 
+                      </label>
                       <div
-                        class="Select__indicators css-1hb7zxy-IndicatorsContainer"
-                      >
-                        <span
-                          class="Select__indicator-separator css-1u9des2-indicatorSeparator"
-                        />
-                        <div
-                          aria-hidden="true"
-                          class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="css-tj5bde-Svg"
-                            focusable="false"
-                            height="20"
-                            viewBox="0 0 20 20"
-                            width="20"
-                          >
-                            <path
-                              d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                            />
-                          </svg>
-                        </div>
-                      </div>
+                        class="gradient right"
+                      />
                     </div>
+                    <i
+                      class="Icon expand-icon material interactive focusable"
+                      data-testid="namespace-select-filter-expand-icon"
+                      tabindex="0"
+                    >
+                      <span
+                        class="icon"
+                        data-icon-name="expand_more"
+                      >
+                        expand_more
+                      </span>
+                    </i>
                   </div>
                 </div>
               </div>
@@ -1333,82 +1263,47 @@ exports[`disable workloads overview details when cluster is not relevant given n
                   Overview
                 </h5>
                 <div
-                  class="NamespaceSelectFilterParent"
+                  class="namespace-select-filter"
                   data-testid="namespace-select-filter"
+                  id="overview-namespace-select-filter-input"
+                  tabindex="1"
                 >
                   <div
-                    class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
+                    class="menu"
                   >
-                    <span
-                      class="css-1f43avz-a11yText-A11yText"
-                      id="react-select-overview-namespace-select-filter-input-live-region"
-                    />
-                    <span
-                      aria-atomic="false"
-                      aria-live="polite"
-                      aria-relevant="additions text"
-                      class="css-1f43avz-a11yText-A11yText"
-                    />
                     <div
-                      class="Select__control css-13cymwt-control"
+                      class="non-icon"
                     >
+                      <input
+                        data-testid="namespace-select-filter-input"
+                        id="overview-namespace-select-filter-input-filter"
+                        type="text"
+                        value=""
+                      />
                       <div
-                        class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer"
+                        class="gradient left"
+                      />
+                      <label
+                        for="overview-namespace-select-filter-input-filter"
                       >
-                        <div
-                          class="Select__placeholder css-1jqq78o-placeholder"
-                          id="react-select-overview-namespace-select-filter-input-placeholder"
-                        >
-                          All namespaces
-                        </div>
-                        <div
-                          class="Select__input-container css-qbdosj-Input"
-                          data-value=""
-                        >
-                          <input
-                            aria-autocomplete="list"
-                            aria-describedby="react-select-overview-namespace-select-filter-input-placeholder"
-                            aria-expanded="false"
-                            aria-haspopup="true"
-                            autocapitalize="none"
-                            autocomplete="off"
-                            autocorrect="off"
-                            class="Select__input"
-                            id="overview-namespace-select-filter-input"
-                            role="combobox"
-                            spellcheck="false"
-                            style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
-                            tabindex="0"
-                            type="text"
-                            value=""
-                          />
-                        </div>
-                      </div>
+                        Namespaces: 
+                      </label>
                       <div
-                        class="Select__indicators css-1hb7zxy-IndicatorsContainer"
-                      >
-                        <span
-                          class="Select__indicator-separator css-1u9des2-indicatorSeparator"
-                        />
-                        <div
-                          aria-hidden="true"
-                          class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="css-tj5bde-Svg"
-                            focusable="false"
-                            height="20"
-                            viewBox="0 0 20 20"
-                            width="20"
-                          >
-                            <path
-                              d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                            />
-                          </svg>
-                        </div>
-                      </div>
+                        class="gradient right"
+                      />
                     </div>
+                    <i
+                      class="Icon expand-icon material interactive focusable"
+                      data-testid="namespace-select-filter-expand-icon"
+                      tabindex="0"
+                    >
+                      <span
+                        class="icon"
+                        data-icon-name="expand_more"
+                      >
+                        expand_more
+                      </span>
+                    </i>
                   </div>
                 </div>
               </div>
diff --git a/packages/core/src/features/helm-charts/installing-chart/__snapshots__/installing-helm-chart-from-new-tab.test.ts.snap b/packages/core/src/features/helm-charts/installing-chart/__snapshots__/installing-helm-chart-from-new-tab.test.ts.snap
index d7ca67d88416..58c699f745cd 100644
--- a/packages/core/src/features/helm-charts/installing-chart/__snapshots__/installing-helm-chart-from-new-tab.test.ts.snap
+++ b/packages/core/src/features/helm-charts/installing-chart/__snapshots__/installing-helm-chart-from-new-tab.test.ts.snap
@@ -294,82 +294,47 @@ exports[`installing helm chart from new tab given tab for installing chart was n
                   Overview
                 </h5>
                 <div
-                  class="NamespaceSelectFilterParent"
+                  class="namespace-select-filter"
                   data-testid="namespace-select-filter"
+                  id="overview-namespace-select-filter-input"
+                  tabindex="1"
                 >
                   <div
-                    class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
+                    class="menu"
                   >
-                    <span
-                      class="css-1f43avz-a11yText-A11yText"
-                      id="react-select-overview-namespace-select-filter-input-live-region"
-                    />
-                    <span
-                      aria-atomic="false"
-                      aria-live="polite"
-                      aria-relevant="additions text"
-                      class="css-1f43avz-a11yText-A11yText"
-                    />
                     <div
-                      class="Select__control css-13cymwt-control"
+                      class="non-icon"
                     >
+                      <input
+                        data-testid="namespace-select-filter-input"
+                        id="overview-namespace-select-filter-input-filter"
+                        type="text"
+                        value=""
+                      />
                       <div
-                        class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer"
+                        class="gradient left"
+                      />
+                      <label
+                        for="overview-namespace-select-filter-input-filter"
                       >
-                        <div
-                          class="Select__placeholder css-1jqq78o-placeholder"
-                          id="react-select-overview-namespace-select-filter-input-placeholder"
-                        >
-                          All namespaces
-                        </div>
-                        <div
-                          class="Select__input-container css-qbdosj-Input"
-                          data-value=""
-                        >
-                          <input
-                            aria-autocomplete="list"
-                            aria-describedby="react-select-overview-namespace-select-filter-input-placeholder"
-                            aria-expanded="false"
-                            aria-haspopup="true"
-                            autocapitalize="none"
-                            autocomplete="off"
-                            autocorrect="off"
-                            class="Select__input"
-                            id="overview-namespace-select-filter-input"
-                            role="combobox"
-                            spellcheck="false"
-                            style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
-                            tabindex="0"
-                            type="text"
-                            value=""
-                          />
-                        </div>
-                      </div>
+                        Namespaces: default, some-other-namespace
+                      </label>
                       <div
-                        class="Select__indicators css-1hb7zxy-IndicatorsContainer"
-                      >
-                        <span
-                          class="Select__indicator-separator css-1u9des2-indicatorSeparator"
-                        />
-                        <div
-                          aria-hidden="true"
-                          class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="css-tj5bde-Svg"
-                            focusable="false"
-                            height="20"
-                            viewBox="0 0 20 20"
-                            width="20"
-                          >
-                            <path
-                              d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                            />
-                          </svg>
-                        </div>
-                      </div>
+                        class="gradient right"
+                      />
                     </div>
+                    <i
+                      class="Icon expand-icon material interactive focusable"
+                      data-testid="namespace-select-filter-expand-icon"
+                      tabindex="0"
+                    >
+                      <span
+                        class="icon"
+                        data-icon-name="expand_more"
+                      >
+                        expand_more
+                      </span>
+                    </i>
                   </div>
                 </div>
               </div>
@@ -10437,82 +10402,47 @@ exports[`installing helm chart from new tab given tab for installing chart was n
                   0 items
                 </div>
                 <div
-                  class="NamespaceSelectFilterParent"
+                  class="namespace-select-filter"
                   data-testid="namespace-select-filter"
+                  id="namespace-select-filter"
+                  tabindex="1"
                 >
                   <div
-                    class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
+                    class="menu"
                   >
-                    <span
-                      class="css-1f43avz-a11yText-A11yText"
-                      id="react-select-namespace-select-filter-live-region"
-                    />
-                    <span
-                      aria-atomic="false"
-                      aria-live="polite"
-                      aria-relevant="additions text"
-                      class="css-1f43avz-a11yText-A11yText"
-                    />
                     <div
-                      class="Select__control css-13cymwt-control"
+                      class="non-icon"
                     >
+                      <input
+                        data-testid="namespace-select-filter-input"
+                        id="namespace-select-filter-filter"
+                        type="text"
+                        value=""
+                      />
                       <div
-                        class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer"
+                        class="gradient left"
+                      />
+                      <label
+                        for="namespace-select-filter-filter"
                       >
-                        <div
-                          class="Select__placeholder css-1jqq78o-placeholder"
-                          id="react-select-namespace-select-filter-placeholder"
-                        >
-                          All namespaces
-                        </div>
-                        <div
-                          class="Select__input-container css-qbdosj-Input"
-                          data-value=""
-                        >
-                          <input
-                            aria-autocomplete="list"
-                            aria-describedby="react-select-namespace-select-filter-placeholder"
-                            aria-expanded="false"
-                            aria-haspopup="true"
-                            autocapitalize="none"
-                            autocomplete="off"
-                            autocorrect="off"
-                            class="Select__input"
-                            id="namespace-select-filter"
-                            role="combobox"
-                            spellcheck="false"
-                            style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
-                            tabindex="0"
-                            type="text"
-                            value=""
-                          />
-                        </div>
-                      </div>
+                        Namespaces: default, some-other-namespace
+                      </label>
                       <div
-                        class="Select__indicators css-1hb7zxy-IndicatorsContainer"
-                      >
-                        <span
-                          class="Select__indicator-separator css-1u9des2-indicatorSeparator"
-                        />
-                        <div
-                          aria-hidden="true"
-                          class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="css-tj5bde-Svg"
-                            focusable="false"
-                            height="20"
-                            viewBox="0 0 20 20"
-                            width="20"
-                          >
-                            <path
-                              d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                            />
-                          </svg>
-                        </div>
-                      </div>
+                        class="gradient right"
+                      />
                     </div>
+                    <i
+                      class="Icon expand-icon material interactive focusable"
+                      data-testid="namespace-select-filter-expand-icon"
+                      tabindex="0"
+                    >
+                      <span
+                        class="icon"
+                        data-icon-name="expand_more"
+                      >
+                        expand_more
+                      </span>
+                    </i>
                   </div>
                 </div>
                 <div
diff --git a/packages/core/src/features/helm-charts/installing-chart/__snapshots__/installing-helm-chart-from-previously-opened-tab.test.ts.snap b/packages/core/src/features/helm-charts/installing-chart/__snapshots__/installing-helm-chart-from-previously-opened-tab.test.ts.snap
index 68773b462d9f..00dc4c51725a 100644
--- a/packages/core/src/features/helm-charts/installing-chart/__snapshots__/installing-helm-chart-from-previously-opened-tab.test.ts.snap
+++ b/packages/core/src/features/helm-charts/installing-chart/__snapshots__/installing-helm-chart-from-previously-opened-tab.test.ts.snap
@@ -294,82 +294,47 @@ exports[`installing helm chart from previously opened tab given tab for installi
                   Overview
                 </h5>
                 <div
-                  class="NamespaceSelectFilterParent"
+                  class="namespace-select-filter"
                   data-testid="namespace-select-filter"
+                  id="overview-namespace-select-filter-input"
+                  tabindex="1"
                 >
                   <div
-                    class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
+                    class="menu"
                   >
-                    <span
-                      class="css-1f43avz-a11yText-A11yText"
-                      id="react-select-overview-namespace-select-filter-input-live-region"
-                    />
-                    <span
-                      aria-atomic="false"
-                      aria-live="polite"
-                      aria-relevant="additions text"
-                      class="css-1f43avz-a11yText-A11yText"
-                    />
                     <div
-                      class="Select__control css-13cymwt-control"
+                      class="non-icon"
                     >
+                      <input
+                        data-testid="namespace-select-filter-input"
+                        id="overview-namespace-select-filter-input-filter"
+                        type="text"
+                        value=""
+                      />
                       <div
-                        class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer"
+                        class="gradient left"
+                      />
+                      <label
+                        for="overview-namespace-select-filter-input-filter"
                       >
-                        <div
-                          class="Select__placeholder css-1jqq78o-placeholder"
-                          id="react-select-overview-namespace-select-filter-input-placeholder"
-                        >
-                          All namespaces
-                        </div>
-                        <div
-                          class="Select__input-container css-qbdosj-Input"
-                          data-value=""
-                        >
-                          <input
-                            aria-autocomplete="list"
-                            aria-describedby="react-select-overview-namespace-select-filter-input-placeholder"
-                            aria-expanded="false"
-                            aria-haspopup="true"
-                            autocapitalize="none"
-                            autocomplete="off"
-                            autocorrect="off"
-                            class="Select__input"
-                            id="overview-namespace-select-filter-input"
-                            role="combobox"
-                            spellcheck="false"
-                            style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
-                            tabindex="0"
-                            type="text"
-                            value=""
-                          />
-                        </div>
-                      </div>
+                        Namespaces: default, some-other-namespace
+                      </label>
                       <div
-                        class="Select__indicators css-1hb7zxy-IndicatorsContainer"
-                      >
-                        <span
-                          class="Select__indicator-separator css-1u9des2-indicatorSeparator"
-                        />
-                        <div
-                          aria-hidden="true"
-                          class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="css-tj5bde-Svg"
-                            focusable="false"
-                            height="20"
-                            viewBox="0 0 20 20"
-                            width="20"
-                          >
-                            <path
-                              d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                            />
-                          </svg>
-                        </div>
-                      </div>
+                        class="gradient right"
+                      />
                     </div>
+                    <i
+                      class="Icon expand-icon material interactive focusable"
+                      data-testid="namespace-select-filter-expand-icon"
+                      tabindex="0"
+                    >
+                      <span
+                        class="icon"
+                        data-icon-name="expand_more"
+                      >
+                        expand_more
+                      </span>
+                    </i>
                   </div>
                 </div>
               </div>
@@ -821,82 +786,47 @@ exports[`installing helm chart from previously opened tab given tab for installi
                   Overview
                 </h5>
                 <div
-                  class="NamespaceSelectFilterParent"
+                  class="namespace-select-filter"
                   data-testid="namespace-select-filter"
+                  id="overview-namespace-select-filter-input"
+                  tabindex="1"
                 >
                   <div
-                    class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
+                    class="menu"
                   >
-                    <span
-                      class="css-1f43avz-a11yText-A11yText"
-                      id="react-select-overview-namespace-select-filter-input-live-region"
-                    />
-                    <span
-                      aria-atomic="false"
-                      aria-live="polite"
-                      aria-relevant="additions text"
-                      class="css-1f43avz-a11yText-A11yText"
-                    />
                     <div
-                      class="Select__control css-13cymwt-control"
+                      class="non-icon"
                     >
+                      <input
+                        data-testid="namespace-select-filter-input"
+                        id="overview-namespace-select-filter-input-filter"
+                        type="text"
+                        value=""
+                      />
                       <div
-                        class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer"
+                        class="gradient left"
+                      />
+                      <label
+                        for="overview-namespace-select-filter-input-filter"
                       >
-                        <div
-                          class="Select__placeholder css-1jqq78o-placeholder"
-                          id="react-select-overview-namespace-select-filter-input-placeholder"
-                        >
-                          All namespaces
-                        </div>
-                        <div
-                          class="Select__input-container css-qbdosj-Input"
-                          data-value=""
-                        >
-                          <input
-                            aria-autocomplete="list"
-                            aria-describedby="react-select-overview-namespace-select-filter-input-placeholder"
-                            aria-expanded="false"
-                            aria-haspopup="true"
-                            autocapitalize="none"
-                            autocomplete="off"
-                            autocorrect="off"
-                            class="Select__input"
-                            id="overview-namespace-select-filter-input"
-                            role="combobox"
-                            spellcheck="false"
-                            style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
-                            tabindex="0"
-                            type="text"
-                            value=""
-                          />
-                        </div>
-                      </div>
+                        Namespaces: default, some-other-namespace
+                      </label>
                       <div
-                        class="Select__indicators css-1hb7zxy-IndicatorsContainer"
-                      >
-                        <span
-                          class="Select__indicator-separator css-1u9des2-indicatorSeparator"
-                        />
-                        <div
-                          aria-hidden="true"
-                          class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="css-tj5bde-Svg"
-                            focusable="false"
-                            height="20"
-                            viewBox="0 0 20 20"
-                            width="20"
-                          >
-                            <path
-                              d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                            />
-                          </svg>
-                        </div>
-                      </div>
+                        class="gradient right"
+                      />
                     </div>
+                    <i
+                      class="Icon expand-icon material interactive focusable"
+                      data-testid="namespace-select-filter-expand-icon"
+                      tabindex="0"
+                    >
+                      <span
+                        class="icon"
+                        data-icon-name="expand_more"
+                      >
+                        expand_more
+                      </span>
+                    </i>
                   </div>
                 </div>
               </div>
diff --git a/packages/core/src/features/helm-charts/upgrade-chart/__snapshots__/upgrade-chart-new-tab.test.ts.snap b/packages/core/src/features/helm-charts/upgrade-chart/__snapshots__/upgrade-chart-new-tab.test.ts.snap
index 11789fe6bbc7..f12108a078a9 100644
--- a/packages/core/src/features/helm-charts/upgrade-chart/__snapshots__/upgrade-chart-new-tab.test.ts.snap
+++ b/packages/core/src/features/helm-charts/upgrade-chart/__snapshots__/upgrade-chart-new-tab.test.ts.snap
@@ -311,82 +311,47 @@ exports[`New Upgrade Helm Chart Dock Tab given a namespace is selected when navi
                   0 items
                 </div>
                 <div
-                  class="NamespaceSelectFilterParent"
+                  class="namespace-select-filter"
                   data-testid="namespace-select-filter"
+                  id="namespace-select-filter"
+                  tabindex="1"
                 >
                   <div
-                    class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
+                    class="menu"
                   >
-                    <span
-                      class="css-1f43avz-a11yText-A11yText"
-                      id="react-select-namespace-select-filter-live-region"
-                    />
-                    <span
-                      aria-atomic="false"
-                      aria-live="polite"
-                      aria-relevant="additions text"
-                      class="css-1f43avz-a11yText-A11yText"
-                    />
                     <div
-                      class="Select__control css-13cymwt-control"
+                      class="non-icon"
                     >
+                      <input
+                        data-testid="namespace-select-filter-input"
+                        id="namespace-select-filter-filter"
+                        type="text"
+                        value=""
+                      />
                       <div
-                        class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer"
+                        class="gradient left"
+                      />
+                      <label
+                        for="namespace-select-filter-filter"
                       >
-                        <div
-                          class="Select__placeholder css-1jqq78o-placeholder"
-                          id="react-select-namespace-select-filter-placeholder"
-                        >
-                          Namespace: my-second-namespace
-                        </div>
-                        <div
-                          class="Select__input-container css-qbdosj-Input"
-                          data-value=""
-                        >
-                          <input
-                            aria-autocomplete="list"
-                            aria-describedby="react-select-namespace-select-filter-placeholder"
-                            aria-expanded="false"
-                            aria-haspopup="true"
-                            autocapitalize="none"
-                            autocomplete="off"
-                            autocorrect="off"
-                            class="Select__input"
-                            id="namespace-select-filter"
-                            role="combobox"
-                            spellcheck="false"
-                            style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
-                            tabindex="0"
-                            type="text"
-                            value=""
-                          />
-                        </div>
-                      </div>
+                        Namespace: my-second-namespace
+                      </label>
                       <div
-                        class="Select__indicators css-1hb7zxy-IndicatorsContainer"
-                      >
-                        <span
-                          class="Select__indicator-separator css-1u9des2-indicatorSeparator"
-                        />
-                        <div
-                          aria-hidden="true"
-                          class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="css-tj5bde-Svg"
-                            focusable="false"
-                            height="20"
-                            viewBox="0 0 20 20"
-                            width="20"
-                          >
-                            <path
-                              d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                            />
-                          </svg>
-                        </div>
-                      </div>
+                        class="gradient right"
+                      />
                     </div>
+                    <i
+                      class="Icon expand-icon material interactive focusable"
+                      data-testid="namespace-select-filter-expand-icon"
+                      tabindex="0"
+                    >
+                      <span
+                        class="icon"
+                        data-icon-name="expand_more"
+                      >
+                        expand_more
+                      </span>
+                    </i>
                   </div>
                 </div>
                 <div
@@ -978,82 +943,47 @@ exports[`New Upgrade Helm Chart Dock Tab given a namespace is selected when navi
                   1 item
                 </div>
                 <div
-                  class="NamespaceSelectFilterParent"
+                  class="namespace-select-filter"
                   data-testid="namespace-select-filter"
+                  id="namespace-select-filter"
+                  tabindex="1"
                 >
                   <div
-                    class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
+                    class="menu"
                   >
-                    <span
-                      class="css-1f43avz-a11yText-A11yText"
-                      id="react-select-namespace-select-filter-live-region"
-                    />
-                    <span
-                      aria-atomic="false"
-                      aria-live="polite"
-                      aria-relevant="additions text"
-                      class="css-1f43avz-a11yText-A11yText"
-                    />
                     <div
-                      class="Select__control css-13cymwt-control"
+                      class="non-icon"
                     >
+                      <input
+                        data-testid="namespace-select-filter-input"
+                        id="namespace-select-filter-filter"
+                        type="text"
+                        value=""
+                      />
                       <div
-                        class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer"
+                        class="gradient left"
+                      />
+                      <label
+                        for="namespace-select-filter-filter"
                       >
-                        <div
-                          class="Select__placeholder css-1jqq78o-placeholder"
-                          id="react-select-namespace-select-filter-placeholder"
-                        >
-                          Namespace: my-second-namespace
-                        </div>
-                        <div
-                          class="Select__input-container css-qbdosj-Input"
-                          data-value=""
-                        >
-                          <input
-                            aria-autocomplete="list"
-                            aria-describedby="react-select-namespace-select-filter-placeholder"
-                            aria-expanded="false"
-                            aria-haspopup="true"
-                            autocapitalize="none"
-                            autocomplete="off"
-                            autocorrect="off"
-                            class="Select__input"
-                            id="namespace-select-filter"
-                            role="combobox"
-                            spellcheck="false"
-                            style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
-                            tabindex="0"
-                            type="text"
-                            value=""
-                          />
-                        </div>
-                      </div>
+                        Namespace: my-second-namespace
+                      </label>
                       <div
-                        class="Select__indicators css-1hb7zxy-IndicatorsContainer"
-                      >
-                        <span
-                          class="Select__indicator-separator css-1u9des2-indicatorSeparator"
-                        />
-                        <div
-                          aria-hidden="true"
-                          class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="css-tj5bde-Svg"
-                            focusable="false"
-                            height="20"
-                            viewBox="0 0 20 20"
-                            width="20"
-                          >
-                            <path
-                              d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                            />
-                          </svg>
-                        </div>
-                      </div>
+                        class="gradient right"
+                      />
                     </div>
+                    <i
+                      class="Icon expand-icon material interactive focusable"
+                      data-testid="namespace-select-filter-expand-icon"
+                      tabindex="0"
+                    >
+                      <span
+                        class="icon"
+                        data-icon-name="expand_more"
+                      >
+                        expand_more
+                      </span>
+                    </i>
                   </div>
                 </div>
                 <div
@@ -1748,82 +1678,47 @@ exports[`New Upgrade Helm Chart Dock Tab given a namespace is selected when navi
                   1 item
                 </div>
                 <div
-                  class="NamespaceSelectFilterParent"
+                  class="namespace-select-filter"
                   data-testid="namespace-select-filter"
+                  id="namespace-select-filter"
+                  tabindex="1"
                 >
                   <div
-                    class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
+                    class="menu"
                   >
-                    <span
-                      class="css-1f43avz-a11yText-A11yText"
-                      id="react-select-namespace-select-filter-live-region"
-                    />
-                    <span
-                      aria-atomic="false"
-                      aria-live="polite"
-                      aria-relevant="additions text"
-                      class="css-1f43avz-a11yText-A11yText"
-                    />
                     <div
-                      class="Select__control css-13cymwt-control"
+                      class="non-icon"
                     >
+                      <input
+                        data-testid="namespace-select-filter-input"
+                        id="namespace-select-filter-filter"
+                        type="text"
+                        value=""
+                      />
                       <div
-                        class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer"
+                        class="gradient left"
+                      />
+                      <label
+                        for="namespace-select-filter-filter"
                       >
-                        <div
-                          class="Select__placeholder css-1jqq78o-placeholder"
-                          id="react-select-namespace-select-filter-placeholder"
-                        >
-                          Namespace: my-second-namespace
-                        </div>
-                        <div
-                          class="Select__input-container css-qbdosj-Input"
-                          data-value=""
-                        >
-                          <input
-                            aria-autocomplete="list"
-                            aria-describedby="react-select-namespace-select-filter-placeholder"
-                            aria-expanded="false"
-                            aria-haspopup="true"
-                            autocapitalize="none"
-                            autocomplete="off"
-                            autocorrect="off"
-                            class="Select__input"
-                            id="namespace-select-filter"
-                            role="combobox"
-                            spellcheck="false"
-                            style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
-                            tabindex="0"
-                            type="text"
-                            value=""
-                          />
-                        </div>
-                      </div>
+                        Namespace: my-second-namespace
+                      </label>
                       <div
-                        class="Select__indicators css-1hb7zxy-IndicatorsContainer"
-                      >
-                        <span
-                          class="Select__indicator-separator css-1u9des2-indicatorSeparator"
-                        />
-                        <div
-                          aria-hidden="true"
-                          class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="css-tj5bde-Svg"
-                            focusable="false"
-                            height="20"
-                            viewBox="0 0 20 20"
-                            width="20"
-                          >
-                            <path
-                              d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                            />
-                          </svg>
-                        </div>
-                      </div>
+                        class="gradient right"
+                      />
                     </div>
+                    <i
+                      class="Icon expand-icon material interactive focusable"
+                      data-testid="namespace-select-filter-expand-icon"
+                      tabindex="0"
+                    >
+                      <span
+                        class="icon"
+                        data-icon-name="expand_more"
+                      >
+                        expand_more
+                      </span>
+                    </i>
                   </div>
                 </div>
                 <div
@@ -2534,82 +2429,47 @@ exports[`New Upgrade Helm Chart Dock Tab given a namespace is selected when navi
                   1 item
                 </div>
                 <div
-                  class="NamespaceSelectFilterParent"
+                  class="namespace-select-filter"
                   data-testid="namespace-select-filter"
+                  id="namespace-select-filter"
+                  tabindex="1"
                 >
                   <div
-                    class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
+                    class="menu"
                   >
-                    <span
-                      class="css-1f43avz-a11yText-A11yText"
-                      id="react-select-namespace-select-filter-live-region"
-                    />
-                    <span
-                      aria-atomic="false"
-                      aria-live="polite"
-                      aria-relevant="additions text"
-                      class="css-1f43avz-a11yText-A11yText"
-                    />
                     <div
-                      class="Select__control css-13cymwt-control"
+                      class="non-icon"
                     >
+                      <input
+                        data-testid="namespace-select-filter-input"
+                        id="namespace-select-filter-filter"
+                        type="text"
+                        value=""
+                      />
                       <div
-                        class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer"
+                        class="gradient left"
+                      />
+                      <label
+                        for="namespace-select-filter-filter"
                       >
-                        <div
-                          class="Select__placeholder css-1jqq78o-placeholder"
-                          id="react-select-namespace-select-filter-placeholder"
-                        >
-                          Namespace: my-second-namespace
-                        </div>
-                        <div
-                          class="Select__input-container css-qbdosj-Input"
-                          data-value=""
-                        >
-                          <input
-                            aria-autocomplete="list"
-                            aria-describedby="react-select-namespace-select-filter-placeholder"
-                            aria-expanded="false"
-                            aria-haspopup="true"
-                            autocapitalize="none"
-                            autocomplete="off"
-                            autocorrect="off"
-                            class="Select__input"
-                            id="namespace-select-filter"
-                            role="combobox"
-                            spellcheck="false"
-                            style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
-                            tabindex="0"
-                            type="text"
-                            value=""
-                          />
-                        </div>
-                      </div>
+                        Namespace: my-second-namespace
+                      </label>
                       <div
-                        class="Select__indicators css-1hb7zxy-IndicatorsContainer"
-                      >
-                        <span
-                          class="Select__indicator-separator css-1u9des2-indicatorSeparator"
-                        />
-                        <div
-                          aria-hidden="true"
-                          class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="css-tj5bde-Svg"
-                            focusable="false"
-                            height="20"
-                            viewBox="0 0 20 20"
-                            width="20"
-                          >
-                            <path
-                              d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                            />
-                          </svg>
-                        </div>
-                      </div>
+                        class="gradient right"
+                      />
                     </div>
+                    <i
+                      class="Icon expand-icon material interactive focusable"
+                      data-testid="namespace-select-filter-expand-icon"
+                      tabindex="0"
+                    >
+                      <span
+                        class="icon"
+                        data-icon-name="expand_more"
+                      >
+                        expand_more
+                      </span>
+                    </i>
                   </div>
                 </div>
                 <div
@@ -3356,82 +3216,47 @@ exports[`New Upgrade Helm Chart Dock Tab given a namespace is selected when navi
                   1 item
                 </div>
                 <div
-                  class="NamespaceSelectFilterParent"
+                  class="namespace-select-filter"
                   data-testid="namespace-select-filter"
+                  id="namespace-select-filter"
+                  tabindex="1"
                 >
                   <div
-                    class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
+                    class="menu"
                   >
-                    <span
-                      class="css-1f43avz-a11yText-A11yText"
-                      id="react-select-namespace-select-filter-live-region"
-                    />
-                    <span
-                      aria-atomic="false"
-                      aria-live="polite"
-                      aria-relevant="additions text"
-                      class="css-1f43avz-a11yText-A11yText"
-                    />
                     <div
-                      class="Select__control css-13cymwt-control"
+                      class="non-icon"
                     >
+                      <input
+                        data-testid="namespace-select-filter-input"
+                        id="namespace-select-filter-filter"
+                        type="text"
+                        value=""
+                      />
                       <div
-                        class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer"
+                        class="gradient left"
+                      />
+                      <label
+                        for="namespace-select-filter-filter"
                       >
-                        <div
-                          class="Select__placeholder css-1jqq78o-placeholder"
-                          id="react-select-namespace-select-filter-placeholder"
-                        >
-                          Namespace: my-second-namespace
-                        </div>
-                        <div
-                          class="Select__input-container css-qbdosj-Input"
-                          data-value=""
-                        >
-                          <input
-                            aria-autocomplete="list"
-                            aria-describedby="react-select-namespace-select-filter-placeholder"
-                            aria-expanded="false"
-                            aria-haspopup="true"
-                            autocapitalize="none"
-                            autocomplete="off"
-                            autocorrect="off"
-                            class="Select__input"
-                            id="namespace-select-filter"
-                            role="combobox"
-                            spellcheck="false"
-                            style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
-                            tabindex="0"
-                            type="text"
-                            value=""
-                          />
-                        </div>
-                      </div>
+                        Namespace: my-second-namespace
+                      </label>
                       <div
-                        class="Select__indicators css-1hb7zxy-IndicatorsContainer"
-                      >
-                        <span
-                          class="Select__indicator-separator css-1u9des2-indicatorSeparator"
-                        />
-                        <div
-                          aria-hidden="true"
-                          class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="css-tj5bde-Svg"
-                            focusable="false"
-                            height="20"
-                            viewBox="0 0 20 20"
-                            width="20"
-                          >
-                            <path
-                              d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                            />
-                          </svg>
-                        </div>
-                      </div>
+                        class="gradient right"
+                      />
                     </div>
+                    <i
+                      class="Icon expand-icon material interactive focusable"
+                      data-testid="namespace-select-filter-expand-icon"
+                      tabindex="0"
+                    >
+                      <span
+                        class="icon"
+                        data-icon-name="expand_more"
+                      >
+                        expand_more
+                      </span>
+                    </i>
                   </div>
                 </div>
                 <div
@@ -4318,82 +4143,47 @@ exports[`New Upgrade Helm Chart Dock Tab given a namespace is selected when navi
                   1 item
                 </div>
                 <div
-                  class="NamespaceSelectFilterParent"
+                  class="namespace-select-filter"
                   data-testid="namespace-select-filter"
+                  id="namespace-select-filter"
+                  tabindex="1"
                 >
                   <div
-                    class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
+                    class="menu"
                   >
-                    <span
-                      class="css-1f43avz-a11yText-A11yText"
-                      id="react-select-namespace-select-filter-live-region"
-                    />
-                    <span
-                      aria-atomic="false"
-                      aria-live="polite"
-                      aria-relevant="additions text"
-                      class="css-1f43avz-a11yText-A11yText"
-                    />
                     <div
-                      class="Select__control css-13cymwt-control"
+                      class="non-icon"
                     >
+                      <input
+                        data-testid="namespace-select-filter-input"
+                        id="namespace-select-filter-filter"
+                        type="text"
+                        value=""
+                      />
                       <div
-                        class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer"
+                        class="gradient left"
+                      />
+                      <label
+                        for="namespace-select-filter-filter"
                       >
-                        <div
-                          class="Select__placeholder css-1jqq78o-placeholder"
-                          id="react-select-namespace-select-filter-placeholder"
-                        >
-                          Namespace: my-second-namespace
-                        </div>
-                        <div
-                          class="Select__input-container css-qbdosj-Input"
-                          data-value=""
-                        >
-                          <input
-                            aria-autocomplete="list"
-                            aria-describedby="react-select-namespace-select-filter-placeholder"
-                            aria-expanded="false"
-                            aria-haspopup="true"
-                            autocapitalize="none"
-                            autocomplete="off"
-                            autocorrect="off"
-                            class="Select__input"
-                            id="namespace-select-filter"
-                            role="combobox"
-                            spellcheck="false"
-                            style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
-                            tabindex="0"
-                            type="text"
-                            value=""
-                          />
-                        </div>
-                      </div>
+                        Namespace: my-second-namespace
+                      </label>
                       <div
-                        class="Select__indicators css-1hb7zxy-IndicatorsContainer"
-                      >
-                        <span
-                          class="Select__indicator-separator css-1u9des2-indicatorSeparator"
-                        />
-                        <div
-                          aria-hidden="true"
-                          class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="css-tj5bde-Svg"
-                            focusable="false"
-                            height="20"
-                            viewBox="0 0 20 20"
-                            width="20"
-                          >
-                            <path
-                              d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                            />
-                          </svg>
-                        </div>
-                      </div>
+                        class="gradient right"
+                      />
                     </div>
+                    <i
+                      class="Icon expand-icon material interactive focusable"
+                      data-testid="namespace-select-filter-expand-icon"
+                      tabindex="0"
+                    >
+                      <span
+                        class="icon"
+                        data-icon-name="expand_more"
+                      >
+                        expand_more
+                      </span>
+                    </i>
                   </div>
                 </div>
                 <div
@@ -5282,82 +5072,47 @@ exports[`New Upgrade Helm Chart Dock Tab given a namespace is selected when navi
                   1 item
                 </div>
                 <div
-                  class="NamespaceSelectFilterParent"
+                  class="namespace-select-filter"
                   data-testid="namespace-select-filter"
+                  id="namespace-select-filter"
+                  tabindex="1"
                 >
                   <div
-                    class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
+                    class="menu"
                   >
-                    <span
-                      class="css-1f43avz-a11yText-A11yText"
-                      id="react-select-namespace-select-filter-live-region"
-                    />
-                    <span
-                      aria-atomic="false"
-                      aria-live="polite"
-                      aria-relevant="additions text"
-                      class="css-1f43avz-a11yText-A11yText"
-                    />
                     <div
-                      class="Select__control css-13cymwt-control"
+                      class="non-icon"
                     >
+                      <input
+                        data-testid="namespace-select-filter-input"
+                        id="namespace-select-filter-filter"
+                        type="text"
+                        value=""
+                      />
                       <div
-                        class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer"
+                        class="gradient left"
+                      />
+                      <label
+                        for="namespace-select-filter-filter"
                       >
-                        <div
-                          class="Select__placeholder css-1jqq78o-placeholder"
-                          id="react-select-namespace-select-filter-placeholder"
-                        >
-                          Namespace: my-second-namespace
-                        </div>
-                        <div
-                          class="Select__input-container css-qbdosj-Input"
-                          data-value=""
-                        >
-                          <input
-                            aria-autocomplete="list"
-                            aria-describedby="react-select-namespace-select-filter-placeholder"
-                            aria-expanded="false"
-                            aria-haspopup="true"
-                            autocapitalize="none"
-                            autocomplete="off"
-                            autocorrect="off"
-                            class="Select__input"
-                            id="namespace-select-filter"
-                            role="combobox"
-                            spellcheck="false"
-                            style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
-                            tabindex="0"
-                            type="text"
-                            value=""
-                          />
-                        </div>
-                      </div>
+                        Namespace: my-second-namespace
+                      </label>
                       <div
-                        class="Select__indicators css-1hb7zxy-IndicatorsContainer"
-                      >
-                        <span
-                          class="Select__indicator-separator css-1u9des2-indicatorSeparator"
-                        />
-                        <div
-                          aria-hidden="true"
-                          class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="css-tj5bde-Svg"
-                            focusable="false"
-                            height="20"
-                            viewBox="0 0 20 20"
-                            width="20"
-                          >
-                            <path
-                              d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                            />
-                          </svg>
-                        </div>
-                      </div>
+                        class="gradient right"
+                      />
                     </div>
+                    <i
+                      class="Icon expand-icon material interactive focusable"
+                      data-testid="namespace-select-filter-expand-icon"
+                      tabindex="0"
+                    >
+                      <span
+                        class="icon"
+                        data-icon-name="expand_more"
+                      >
+                        expand_more
+                      </span>
+                    </i>
                   </div>
                 </div>
                 <div
diff --git a/packages/core/src/features/helm-releases/__snapshots__/showing-details-for-helm-release.test.ts.snap b/packages/core/src/features/helm-releases/__snapshots__/showing-details-for-helm-release.test.ts.snap
index 95a6be0b9479..df337a4eb82a 100644
--- a/packages/core/src/features/helm-releases/__snapshots__/showing-details-for-helm-release.test.ts.snap
+++ b/packages/core/src/features/helm-releases/__snapshots__/showing-details-for-helm-release.test.ts.snap
@@ -311,82 +311,47 @@ exports[`showing details for helm release given application is started when navi
                   0 items
                 </div>
                 <div
-                  class="NamespaceSelectFilterParent"
+                  class="namespace-select-filter"
                   data-testid="namespace-select-filter"
+                  id="namespace-select-filter"
+                  tabindex="1"
                 >
                   <div
-                    class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
+                    class="menu"
                   >
-                    <span
-                      class="css-1f43avz-a11yText-A11yText"
-                      id="react-select-namespace-select-filter-live-region"
-                    />
-                    <span
-                      aria-atomic="false"
-                      aria-live="polite"
-                      aria-relevant="additions text"
-                      class="css-1f43avz-a11yText-A11yText"
-                    />
                     <div
-                      class="Select__control css-13cymwt-control"
+                      class="non-icon"
                     >
+                      <input
+                        data-testid="namespace-select-filter-input"
+                        id="namespace-select-filter-filter"
+                        type="text"
+                        value=""
+                      />
                       <div
-                        class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer"
+                        class="gradient left"
+                      />
+                      <label
+                        for="namespace-select-filter-filter"
                       >
-                        <div
-                          class="Select__placeholder css-1jqq78o-placeholder"
-                          id="react-select-namespace-select-filter-placeholder"
-                        >
-                          Namespaces: some-namespace, some-other-namespace
-                        </div>
-                        <div
-                          class="Select__input-container css-qbdosj-Input"
-                          data-value=""
-                        >
-                          <input
-                            aria-autocomplete="list"
-                            aria-describedby="react-select-namespace-select-filter-placeholder"
-                            aria-expanded="false"
-                            aria-haspopup="true"
-                            autocapitalize="none"
-                            autocomplete="off"
-                            autocorrect="off"
-                            class="Select__input"
-                            id="namespace-select-filter"
-                            role="combobox"
-                            spellcheck="false"
-                            style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
-                            tabindex="0"
-                            type="text"
-                            value=""
-                          />
-                        </div>
-                      </div>
+                        Namespaces: some-namespace, some-other-namespace
+                      </label>
                       <div
-                        class="Select__indicators css-1hb7zxy-IndicatorsContainer"
-                      >
-                        <span
-                          class="Select__indicator-separator css-1u9des2-indicatorSeparator"
-                        />
-                        <div
-                          aria-hidden="true"
-                          class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="css-tj5bde-Svg"
-                            focusable="false"
-                            height="20"
-                            viewBox="0 0 20 20"
-                            width="20"
-                          >
-                            <path
-                              d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                            />
-                          </svg>
-                        </div>
-                      </div>
+                        class="gradient right"
+                      />
                     </div>
+                    <i
+                      class="Icon expand-icon material interactive focusable"
+                      data-testid="namespace-select-filter-expand-icon"
+                      tabindex="0"
+                    >
+                      <span
+                        class="icon"
+                        data-icon-name="expand_more"
+                      >
+                        expand_more
+                      </span>
+                    </i>
                   </div>
                 </div>
                 <div
@@ -1059,82 +1024,47 @@ exports[`showing details for helm release given application is started when navi
                   0 items
                 </div>
                 <div
-                  class="NamespaceSelectFilterParent"
+                  class="namespace-select-filter"
                   data-testid="namespace-select-filter"
+                  id="namespace-select-filter"
+                  tabindex="1"
                 >
                   <div
-                    class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
+                    class="menu"
                   >
-                    <span
-                      class="css-1f43avz-a11yText-A11yText"
-                      id="react-select-namespace-select-filter-live-region"
-                    />
-                    <span
-                      aria-atomic="false"
-                      aria-live="polite"
-                      aria-relevant="additions text"
-                      class="css-1f43avz-a11yText-A11yText"
-                    />
                     <div
-                      class="Select__control css-13cymwt-control"
+                      class="non-icon"
                     >
+                      <input
+                        data-testid="namespace-select-filter-input"
+                        id="namespace-select-filter-filter"
+                        type="text"
+                        value=""
+                      />
                       <div
-                        class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer"
+                        class="gradient left"
+                      />
+                      <label
+                        for="namespace-select-filter-filter"
                       >
-                        <div
-                          class="Select__placeholder css-1jqq78o-placeholder"
-                          id="react-select-namespace-select-filter-placeholder"
-                        >
-                          Namespaces: some-namespace, some-other-namespace
-                        </div>
-                        <div
-                          class="Select__input-container css-qbdosj-Input"
-                          data-value=""
-                        >
-                          <input
-                            aria-autocomplete="list"
-                            aria-describedby="react-select-namespace-select-filter-placeholder"
-                            aria-expanded="false"
-                            aria-haspopup="true"
-                            autocapitalize="none"
-                            autocomplete="off"
-                            autocorrect="off"
-                            class="Select__input"
-                            id="namespace-select-filter"
-                            role="combobox"
-                            spellcheck="false"
-                            style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
-                            tabindex="0"
-                            type="text"
-                            value=""
-                          />
-                        </div>
-                      </div>
+                        Namespaces: some-namespace, some-other-namespace
+                      </label>
                       <div
-                        class="Select__indicators css-1hb7zxy-IndicatorsContainer"
-                      >
-                        <span
-                          class="Select__indicator-separator css-1u9des2-indicatorSeparator"
-                        />
-                        <div
-                          aria-hidden="true"
-                          class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="css-tj5bde-Svg"
-                            focusable="false"
-                            height="20"
-                            viewBox="0 0 20 20"
-                            width="20"
-                          >
-                            <path
-                              d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                            />
-                          </svg>
-                        </div>
-                      </div>
+                        class="gradient right"
+                      />
                     </div>
+                    <i
+                      class="Icon expand-icon material interactive focusable"
+                      data-testid="namespace-select-filter-expand-icon"
+                      tabindex="0"
+                    >
+                      <span
+                        class="icon"
+                        data-icon-name="expand_more"
+                      >
+                        expand_more
+                      </span>
+                    </i>
                   </div>
                 </div>
                 <div
@@ -1812,82 +1742,47 @@ exports[`showing details for helm release given application is started when navi
                   2 items
                 </div>
                 <div
-                  class="NamespaceSelectFilterParent"
+                  class="namespace-select-filter"
                   data-testid="namespace-select-filter"
+                  id="namespace-select-filter"
+                  tabindex="1"
                 >
                   <div
-                    class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
+                    class="menu"
                   >
-                    <span
-                      class="css-1f43avz-a11yText-A11yText"
-                      id="react-select-namespace-select-filter-live-region"
-                    />
-                    <span
-                      aria-atomic="false"
-                      aria-live="polite"
-                      aria-relevant="additions text"
-                      class="css-1f43avz-a11yText-A11yText"
-                    />
                     <div
-                      class="Select__control css-13cymwt-control"
+                      class="non-icon"
                     >
+                      <input
+                        data-testid="namespace-select-filter-input"
+                        id="namespace-select-filter-filter"
+                        type="text"
+                        value=""
+                      />
                       <div
-                        class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer"
+                        class="gradient left"
+                      />
+                      <label
+                        for="namespace-select-filter-filter"
                       >
-                        <div
-                          class="Select__placeholder css-1jqq78o-placeholder"
-                          id="react-select-namespace-select-filter-placeholder"
-                        >
-                          Namespaces: some-namespace, some-other-namespace
-                        </div>
-                        <div
-                          class="Select__input-container css-qbdosj-Input"
-                          data-value=""
-                        >
-                          <input
-                            aria-autocomplete="list"
-                            aria-describedby="react-select-namespace-select-filter-placeholder"
-                            aria-expanded="false"
-                            aria-haspopup="true"
-                            autocapitalize="none"
-                            autocomplete="off"
-                            autocorrect="off"
-                            class="Select__input"
-                            id="namespace-select-filter"
-                            role="combobox"
-                            spellcheck="false"
-                            style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
-                            tabindex="0"
-                            type="text"
-                            value=""
-                          />
-                        </div>
-                      </div>
+                        Namespaces: some-namespace, some-other-namespace
+                      </label>
                       <div
-                        class="Select__indicators css-1hb7zxy-IndicatorsContainer"
-                      >
-                        <span
-                          class="Select__indicator-separator css-1u9des2-indicatorSeparator"
-                        />
-                        <div
-                          aria-hidden="true"
-                          class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="css-tj5bde-Svg"
-                            focusable="false"
-                            height="20"
-                            viewBox="0 0 20 20"
-                            width="20"
-                          >
-                            <path
-                              d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                            />
-                          </svg>
-                        </div>
-                      </div>
+                        class="gradient right"
+                      />
                     </div>
+                    <i
+                      class="Icon expand-icon material interactive focusable"
+                      data-testid="namespace-select-filter-expand-icon"
+                      tabindex="0"
+                    >
+                      <span
+                        class="icon"
+                        data-icon-name="expand_more"
+                      >
+                        expand_more
+                      </span>
+                    </i>
                   </div>
                 </div>
                 <div
@@ -2755,82 +2650,47 @@ exports[`showing details for helm release given application is started when navi
                   2 items
                 </div>
                 <div
-                  class="NamespaceSelectFilterParent"
+                  class="namespace-select-filter"
                   data-testid="namespace-select-filter"
+                  id="namespace-select-filter"
+                  tabindex="1"
                 >
                   <div
-                    class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
+                    class="menu"
                   >
-                    <span
-                      class="css-1f43avz-a11yText-A11yText"
-                      id="react-select-namespace-select-filter-live-region"
-                    />
-                    <span
-                      aria-atomic="false"
-                      aria-live="polite"
-                      aria-relevant="additions text"
-                      class="css-1f43avz-a11yText-A11yText"
-                    />
                     <div
-                      class="Select__control css-13cymwt-control"
+                      class="non-icon"
                     >
+                      <input
+                        data-testid="namespace-select-filter-input"
+                        id="namespace-select-filter-filter"
+                        type="text"
+                        value=""
+                      />
                       <div
-                        class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer"
+                        class="gradient left"
+                      />
+                      <label
+                        for="namespace-select-filter-filter"
                       >
-                        <div
-                          class="Select__placeholder css-1jqq78o-placeholder"
-                          id="react-select-namespace-select-filter-placeholder"
-                        >
-                          Namespaces: some-namespace, some-other-namespace
-                        </div>
-                        <div
-                          class="Select__input-container css-qbdosj-Input"
-                          data-value=""
-                        >
-                          <input
-                            aria-autocomplete="list"
-                            aria-describedby="react-select-namespace-select-filter-placeholder"
-                            aria-expanded="false"
-                            aria-haspopup="true"
-                            autocapitalize="none"
-                            autocomplete="off"
-                            autocorrect="off"
-                            class="Select__input"
-                            id="namespace-select-filter"
-                            role="combobox"
-                            spellcheck="false"
-                            style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
-                            tabindex="0"
-                            type="text"
-                            value=""
-                          />
-                        </div>
-                      </div>
+                        Namespaces: some-namespace, some-other-namespace
+                      </label>
                       <div
-                        class="Select__indicators css-1hb7zxy-IndicatorsContainer"
-                      >
-                        <span
-                          class="Select__indicator-separator css-1u9des2-indicatorSeparator"
-                        />
-                        <div
-                          aria-hidden="true"
-                          class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="css-tj5bde-Svg"
-                            focusable="false"
-                            height="20"
-                            viewBox="0 0 20 20"
-                            width="20"
-                          >
-                            <path
-                              d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                            />
-                          </svg>
-                        </div>
-                      </div>
+                        class="gradient right"
+                      />
                     </div>
+                    <i
+                      class="Icon expand-icon material interactive focusable"
+                      data-testid="namespace-select-filter-expand-icon"
+                      tabindex="0"
+                    >
+                      <span
+                        class="icon"
+                        data-icon-name="expand_more"
+                      >
+                        expand_more
+                      </span>
+                    </i>
                   </div>
                 </div>
                 <div
@@ -3759,82 +3619,47 @@ exports[`showing details for helm release given application is started when navi
                   2 items
                 </div>
                 <div
-                  class="NamespaceSelectFilterParent"
+                  class="namespace-select-filter"
                   data-testid="namespace-select-filter"
+                  id="namespace-select-filter"
+                  tabindex="1"
                 >
                   <div
-                    class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
+                    class="menu"
                   >
-                    <span
-                      class="css-1f43avz-a11yText-A11yText"
-                      id="react-select-namespace-select-filter-live-region"
-                    />
-                    <span
-                      aria-atomic="false"
-                      aria-live="polite"
-                      aria-relevant="additions text"
-                      class="css-1f43avz-a11yText-A11yText"
-                    />
                     <div
-                      class="Select__control css-13cymwt-control"
+                      class="non-icon"
                     >
+                      <input
+                        data-testid="namespace-select-filter-input"
+                        id="namespace-select-filter-filter"
+                        type="text"
+                        value=""
+                      />
                       <div
-                        class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer"
+                        class="gradient left"
+                      />
+                      <label
+                        for="namespace-select-filter-filter"
                       >
-                        <div
-                          class="Select__placeholder css-1jqq78o-placeholder"
-                          id="react-select-namespace-select-filter-placeholder"
-                        >
-                          Namespaces: some-namespace, some-other-namespace
-                        </div>
-                        <div
-                          class="Select__input-container css-qbdosj-Input"
-                          data-value=""
-                        >
-                          <input
-                            aria-autocomplete="list"
-                            aria-describedby="react-select-namespace-select-filter-placeholder"
-                            aria-expanded="false"
-                            aria-haspopup="true"
-                            autocapitalize="none"
-                            autocomplete="off"
-                            autocorrect="off"
-                            class="Select__input"
-                            id="namespace-select-filter"
-                            role="combobox"
-                            spellcheck="false"
-                            style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
-                            tabindex="0"
-                            type="text"
-                            value=""
-                          />
-                        </div>
-                      </div>
+                        Namespaces: some-namespace, some-other-namespace
+                      </label>
                       <div
-                        class="Select__indicators css-1hb7zxy-IndicatorsContainer"
-                      >
-                        <span
-                          class="Select__indicator-separator css-1u9des2-indicatorSeparator"
-                        />
-                        <div
-                          aria-hidden="true"
-                          class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="css-tj5bde-Svg"
-                            focusable="false"
-                            height="20"
-                            viewBox="0 0 20 20"
-                            width="20"
-                          >
-                            <path
-                              d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                            />
-                          </svg>
-                        </div>
-                      </div>
+                        class="gradient right"
+                      />
                     </div>
+                    <i
+                      class="Icon expand-icon material interactive focusable"
+                      data-testid="namespace-select-filter-expand-icon"
+                      tabindex="0"
+                    >
+                      <span
+                        class="icon"
+                        data-icon-name="expand_more"
+                      >
+                        expand_more
+                      </span>
+                    </i>
                   </div>
                 </div>
                 <div
@@ -4763,82 +4588,47 @@ exports[`showing details for helm release given application is started when navi
                   2 items
                 </div>
                 <div
-                  class="NamespaceSelectFilterParent"
+                  class="namespace-select-filter"
                   data-testid="namespace-select-filter"
+                  id="namespace-select-filter"
+                  tabindex="1"
                 >
                   <div
-                    class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
+                    class="menu"
                   >
-                    <span
-                      class="css-1f43avz-a11yText-A11yText"
-                      id="react-select-namespace-select-filter-live-region"
-                    />
-                    <span
-                      aria-atomic="false"
-                      aria-live="polite"
-                      aria-relevant="additions text"
-                      class="css-1f43avz-a11yText-A11yText"
-                    />
                     <div
-                      class="Select__control css-13cymwt-control"
+                      class="non-icon"
                     >
+                      <input
+                        data-testid="namespace-select-filter-input"
+                        id="namespace-select-filter-filter"
+                        type="text"
+                        value=""
+                      />
                       <div
-                        class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer"
+                        class="gradient left"
+                      />
+                      <label
+                        for="namespace-select-filter-filter"
                       >
-                        <div
-                          class="Select__placeholder css-1jqq78o-placeholder"
-                          id="react-select-namespace-select-filter-placeholder"
-                        >
-                          Namespaces: some-namespace, some-other-namespace
-                        </div>
-                        <div
-                          class="Select__input-container css-qbdosj-Input"
-                          data-value=""
-                        >
-                          <input
-                            aria-autocomplete="list"
-                            aria-describedby="react-select-namespace-select-filter-placeholder"
-                            aria-expanded="false"
-                            aria-haspopup="true"
-                            autocapitalize="none"
-                            autocomplete="off"
-                            autocorrect="off"
-                            class="Select__input"
-                            id="namespace-select-filter"
-                            role="combobox"
-                            spellcheck="false"
-                            style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
-                            tabindex="0"
-                            type="text"
-                            value=""
-                          />
-                        </div>
-                      </div>
+                        Namespaces: some-namespace, some-other-namespace
+                      </label>
                       <div
-                        class="Select__indicators css-1hb7zxy-IndicatorsContainer"
-                      >
-                        <span
-                          class="Select__indicator-separator css-1u9des2-indicatorSeparator"
-                        />
-                        <div
-                          aria-hidden="true"
-                          class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="css-tj5bde-Svg"
-                            focusable="false"
-                            height="20"
-                            viewBox="0 0 20 20"
-                            width="20"
-                          >
-                            <path
-                              d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                            />
-                          </svg>
-                        </div>
-                      </div>
+                        class="gradient right"
+                      />
                     </div>
+                    <i
+                      class="Icon expand-icon material interactive focusable"
+                      data-testid="namespace-select-filter-expand-icon"
+                      tabindex="0"
+                    >
+                      <span
+                        class="icon"
+                        data-icon-name="expand_more"
+                      >
+                        expand_more
+                      </span>
+                    </i>
                   </div>
                 </div>
                 <div
@@ -6012,82 +5802,47 @@ exports[`showing details for helm release given application is started when navi
                   2 items
                 </div>
                 <div
-                  class="NamespaceSelectFilterParent"
+                  class="namespace-select-filter"
                   data-testid="namespace-select-filter"
+                  id="namespace-select-filter"
+                  tabindex="1"
                 >
                   <div
-                    class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
+                    class="menu"
                   >
-                    <span
-                      class="css-1f43avz-a11yText-A11yText"
-                      id="react-select-namespace-select-filter-live-region"
-                    />
-                    <span
-                      aria-atomic="false"
-                      aria-live="polite"
-                      aria-relevant="additions text"
-                      class="css-1f43avz-a11yText-A11yText"
-                    />
                     <div
-                      class="Select__control css-13cymwt-control"
+                      class="non-icon"
                     >
+                      <input
+                        data-testid="namespace-select-filter-input"
+                        id="namespace-select-filter-filter"
+                        type="text"
+                        value=""
+                      />
                       <div
-                        class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer"
+                        class="gradient left"
+                      />
+                      <label
+                        for="namespace-select-filter-filter"
                       >
-                        <div
-                          class="Select__placeholder css-1jqq78o-placeholder"
-                          id="react-select-namespace-select-filter-placeholder"
-                        >
-                          Namespaces: some-namespace, some-other-namespace
-                        </div>
-                        <div
-                          class="Select__input-container css-qbdosj-Input"
-                          data-value=""
-                        >
-                          <input
-                            aria-autocomplete="list"
-                            aria-describedby="react-select-namespace-select-filter-placeholder"
-                            aria-expanded="false"
-                            aria-haspopup="true"
-                            autocapitalize="none"
-                            autocomplete="off"
-                            autocorrect="off"
-                            class="Select__input"
-                            id="namespace-select-filter"
-                            role="combobox"
-                            spellcheck="false"
-                            style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
-                            tabindex="0"
-                            type="text"
-                            value=""
-                          />
-                        </div>
-                      </div>
+                        Namespaces: some-namespace, some-other-namespace
+                      </label>
                       <div
-                        class="Select__indicators css-1hb7zxy-IndicatorsContainer"
-                      >
-                        <span
-                          class="Select__indicator-separator css-1u9des2-indicatorSeparator"
-                        />
-                        <div
-                          aria-hidden="true"
-                          class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="css-tj5bde-Svg"
-                            focusable="false"
-                            height="20"
-                            viewBox="0 0 20 20"
-                            width="20"
-                          >
-                            <path
-                              d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                            />
-                          </svg>
-                        </div>
-                      </div>
+                        class="gradient right"
+                      />
                     </div>
+                    <i
+                      class="Icon expand-icon material interactive focusable"
+                      data-testid="namespace-select-filter-expand-icon"
+                      tabindex="0"
+                    >
+                      <span
+                        class="icon"
+                        data-icon-name="expand_more"
+                      >
+                        expand_more
+                      </span>
+                    </i>
                   </div>
                 </div>
                 <div
@@ -7261,82 +7016,47 @@ exports[`showing details for helm release given application is started when navi
                   2 items
                 </div>
                 <div
-                  class="NamespaceSelectFilterParent"
+                  class="namespace-select-filter"
                   data-testid="namespace-select-filter"
+                  id="namespace-select-filter"
+                  tabindex="1"
                 >
                   <div
-                    class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
+                    class="menu"
                   >
-                    <span
-                      class="css-1f43avz-a11yText-A11yText"
-                      id="react-select-namespace-select-filter-live-region"
-                    />
-                    <span
-                      aria-atomic="false"
-                      aria-live="polite"
-                      aria-relevant="additions text"
-                      class="css-1f43avz-a11yText-A11yText"
-                    />
                     <div
-                      class="Select__control css-13cymwt-control"
+                      class="non-icon"
                     >
+                      <input
+                        data-testid="namespace-select-filter-input"
+                        id="namespace-select-filter-filter"
+                        type="text"
+                        value=""
+                      />
                       <div
-                        class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer"
+                        class="gradient left"
+                      />
+                      <label
+                        for="namespace-select-filter-filter"
                       >
-                        <div
-                          class="Select__placeholder css-1jqq78o-placeholder"
-                          id="react-select-namespace-select-filter-placeholder"
-                        >
-                          Namespaces: some-namespace, some-other-namespace
-                        </div>
-                        <div
-                          class="Select__input-container css-qbdosj-Input"
-                          data-value=""
-                        >
-                          <input
-                            aria-autocomplete="list"
-                            aria-describedby="react-select-namespace-select-filter-placeholder"
-                            aria-expanded="false"
-                            aria-haspopup="true"
-                            autocapitalize="none"
-                            autocomplete="off"
-                            autocorrect="off"
-                            class="Select__input"
-                            id="namespace-select-filter"
-                            role="combobox"
-                            spellcheck="false"
-                            style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
-                            tabindex="0"
-                            type="text"
-                            value=""
-                          />
-                        </div>
-                      </div>
+                        Namespaces: some-namespace, some-other-namespace
+                      </label>
                       <div
-                        class="Select__indicators css-1hb7zxy-IndicatorsContainer"
-                      >
-                        <span
-                          class="Select__indicator-separator css-1u9des2-indicatorSeparator"
-                        />
-                        <div
-                          aria-hidden="true"
-                          class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="css-tj5bde-Svg"
-                            focusable="false"
-                            height="20"
-                            viewBox="0 0 20 20"
-                            width="20"
-                          >
-                            <path
-                              d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                            />
-                          </svg>
-                        </div>
-                      </div>
+                        class="gradient right"
+                      />
                     </div>
+                    <i
+                      class="Icon expand-icon material interactive focusable"
+                      data-testid="namespace-select-filter-expand-icon"
+                      tabindex="0"
+                    >
+                      <span
+                        class="icon"
+                        data-icon-name="expand_more"
+                      >
+                        expand_more
+                      </span>
+                    </i>
                   </div>
                 </div>
                 <div
@@ -8510,82 +8230,47 @@ exports[`showing details for helm release given application is started when navi
                   0 items
                 </div>
                 <div
-                  class="NamespaceSelectFilterParent"
+                  class="namespace-select-filter"
                   data-testid="namespace-select-filter"
+                  id="namespace-select-filter"
+                  tabindex="1"
                 >
                   <div
-                    class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
+                    class="menu"
                   >
-                    <span
-                      class="css-1f43avz-a11yText-A11yText"
-                      id="react-select-namespace-select-filter-live-region"
-                    />
-                    <span
-                      aria-atomic="false"
-                      aria-live="polite"
-                      aria-relevant="additions text"
-                      class="css-1f43avz-a11yText-A11yText"
-                    />
                     <div
-                      class="Select__control css-13cymwt-control"
+                      class="non-icon"
                     >
+                      <input
+                        data-testid="namespace-select-filter-input"
+                        id="namespace-select-filter-filter"
+                        type="text"
+                        value=""
+                      />
                       <div
-                        class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer"
+                        class="gradient left"
+                      />
+                      <label
+                        for="namespace-select-filter-filter"
                       >
-                        <div
-                          class="Select__placeholder css-1jqq78o-placeholder"
-                          id="react-select-namespace-select-filter-placeholder"
-                        >
-                          Namespaces: some-namespace, some-other-namespace
-                        </div>
-                        <div
-                          class="Select__input-container css-qbdosj-Input"
-                          data-value=""
-                        >
-                          <input
-                            aria-autocomplete="list"
-                            aria-describedby="react-select-namespace-select-filter-placeholder"
-                            aria-expanded="false"
-                            aria-haspopup="true"
-                            autocapitalize="none"
-                            autocomplete="off"
-                            autocorrect="off"
-                            class="Select__input"
-                            id="namespace-select-filter"
-                            role="combobox"
-                            spellcheck="false"
-                            style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
-                            tabindex="0"
-                            type="text"
-                            value=""
-                          />
-                        </div>
-                      </div>
+                        Namespaces: some-namespace, some-other-namespace
+                      </label>
                       <div
-                        class="Select__indicators css-1hb7zxy-IndicatorsContainer"
-                      >
-                        <span
-                          class="Select__indicator-separator css-1u9des2-indicatorSeparator"
-                        />
-                        <div
-                          aria-hidden="true"
-                          class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="css-tj5bde-Svg"
-                            focusable="false"
-                            height="20"
-                            viewBox="0 0 20 20"
-                            width="20"
-                          >
-                            <path
-                              d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                            />
-                          </svg>
-                        </div>
-                      </div>
+                        class="gradient right"
+                      />
                     </div>
+                    <i
+                      class="Icon expand-icon material interactive focusable"
+                      data-testid="namespace-select-filter-expand-icon"
+                      tabindex="0"
+                    >
+                      <span
+                        class="icon"
+                        data-icon-name="expand_more"
+                      >
+                        expand_more
+                      </span>
+                    </i>
                   </div>
                 </div>
                 <div
@@ -9564,82 +9249,47 @@ exports[`showing details for helm release given application is started when navi
                   0 items
                 </div>
                 <div
-                  class="NamespaceSelectFilterParent"
+                  class="namespace-select-filter"
                   data-testid="namespace-select-filter"
+                  id="namespace-select-filter"
+                  tabindex="1"
                 >
                   <div
-                    class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
+                    class="menu"
                   >
-                    <span
-                      class="css-1f43avz-a11yText-A11yText"
-                      id="react-select-namespace-select-filter-live-region"
-                    />
-                    <span
-                      aria-atomic="false"
-                      aria-live="polite"
-                      aria-relevant="additions text"
-                      class="css-1f43avz-a11yText-A11yText"
-                    />
                     <div
-                      class="Select__control css-13cymwt-control"
+                      class="non-icon"
                     >
+                      <input
+                        data-testid="namespace-select-filter-input"
+                        id="namespace-select-filter-filter"
+                        type="text"
+                        value=""
+                      />
                       <div
-                        class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer"
+                        class="gradient left"
+                      />
+                      <label
+                        for="namespace-select-filter-filter"
                       >
-                        <div
-                          class="Select__placeholder css-1jqq78o-placeholder"
-                          id="react-select-namespace-select-filter-placeholder"
-                        >
-                          Namespaces: some-namespace, some-other-namespace
-                        </div>
-                        <div
-                          class="Select__input-container css-qbdosj-Input"
-                          data-value=""
-                        >
-                          <input
-                            aria-autocomplete="list"
-                            aria-describedby="react-select-namespace-select-filter-placeholder"
-                            aria-expanded="false"
-                            aria-haspopup="true"
-                            autocapitalize="none"
-                            autocomplete="off"
-                            autocorrect="off"
-                            class="Select__input"
-                            id="namespace-select-filter"
-                            role="combobox"
-                            spellcheck="false"
-                            style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
-                            tabindex="0"
-                            type="text"
-                            value=""
-                          />
-                        </div>
-                      </div>
+                        Namespaces: some-namespace, some-other-namespace
+                      </label>
                       <div
-                        class="Select__indicators css-1hb7zxy-IndicatorsContainer"
-                      >
-                        <span
-                          class="Select__indicator-separator css-1u9des2-indicatorSeparator"
-                        />
-                        <div
-                          aria-hidden="true"
-                          class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="css-tj5bde-Svg"
-                            focusable="false"
-                            height="20"
-                            viewBox="0 0 20 20"
-                            width="20"
-                          >
-                            <path
-                              d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                            />
-                          </svg>
-                        </div>
-                      </div>
+                        class="gradient right"
+                      />
                     </div>
+                    <i
+                      class="Icon expand-icon material interactive focusable"
+                      data-testid="namespace-select-filter-expand-icon"
+                      tabindex="0"
+                    >
+                      <span
+                        class="icon"
+                        data-icon-name="expand_more"
+                      >
+                        expand_more
+                      </span>
+                    </i>
                   </div>
                 </div>
                 <div
@@ -10620,82 +10270,47 @@ exports[`showing details for helm release given application is started when navi
                   2 items
                 </div>
                 <div
-                  class="NamespaceSelectFilterParent"
+                  class="namespace-select-filter"
                   data-testid="namespace-select-filter"
+                  id="namespace-select-filter"
+                  tabindex="1"
                 >
                   <div
-                    class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
+                    class="menu"
                   >
-                    <span
-                      class="css-1f43avz-a11yText-A11yText"
-                      id="react-select-namespace-select-filter-live-region"
-                    />
-                    <span
-                      aria-atomic="false"
-                      aria-live="polite"
-                      aria-relevant="additions text"
-                      class="css-1f43avz-a11yText-A11yText"
-                    />
                     <div
-                      class="Select__control css-13cymwt-control"
+                      class="non-icon"
                     >
+                      <input
+                        data-testid="namespace-select-filter-input"
+                        id="namespace-select-filter-filter"
+                        type="text"
+                        value=""
+                      />
                       <div
-                        class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer"
+                        class="gradient left"
+                      />
+                      <label
+                        for="namespace-select-filter-filter"
                       >
-                        <div
-                          class="Select__placeholder css-1jqq78o-placeholder"
-                          id="react-select-namespace-select-filter-placeholder"
-                        >
-                          Namespaces: some-namespace, some-other-namespace
-                        </div>
-                        <div
-                          class="Select__input-container css-qbdosj-Input"
-                          data-value=""
-                        >
-                          <input
-                            aria-autocomplete="list"
-                            aria-describedby="react-select-namespace-select-filter-placeholder"
-                            aria-expanded="false"
-                            aria-haspopup="true"
-                            autocapitalize="none"
-                            autocomplete="off"
-                            autocorrect="off"
-                            class="Select__input"
-                            id="namespace-select-filter"
-                            role="combobox"
-                            spellcheck="false"
-                            style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
-                            tabindex="0"
-                            type="text"
-                            value=""
-                          />
-                        </div>
-                      </div>
+                        Namespaces: some-namespace, some-other-namespace
+                      </label>
                       <div
-                        class="Select__indicators css-1hb7zxy-IndicatorsContainer"
-                      >
-                        <span
-                          class="Select__indicator-separator css-1u9des2-indicatorSeparator"
-                        />
-                        <div
-                          aria-hidden="true"
-                          class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="css-tj5bde-Svg"
-                            focusable="false"
-                            height="20"
-                            viewBox="0 0 20 20"
-                            width="20"
-                          >
-                            <path
-                              d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                            />
-                          </svg>
-                        </div>
-                      </div>
+                        class="gradient right"
+                      />
                     </div>
+                    <i
+                      class="Icon expand-icon material interactive focusable"
+                      data-testid="namespace-select-filter-expand-icon"
+                      tabindex="0"
+                    >
+                      <span
+                        class="icon"
+                        data-icon-name="expand_more"
+                      >
+                        expand_more
+                      </span>
+                    </i>
                   </div>
                 </div>
                 <div
@@ -11869,82 +11484,47 @@ exports[`showing details for helm release given application is started when navi
                   2 items
                 </div>
                 <div
-                  class="NamespaceSelectFilterParent"
+                  class="namespace-select-filter"
                   data-testid="namespace-select-filter"
+                  id="namespace-select-filter"
+                  tabindex="1"
                 >
                   <div
-                    class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
+                    class="menu"
                   >
-                    <span
-                      class="css-1f43avz-a11yText-A11yText"
-                      id="react-select-namespace-select-filter-live-region"
-                    />
-                    <span
-                      aria-atomic="false"
-                      aria-live="polite"
-                      aria-relevant="additions text"
-                      class="css-1f43avz-a11yText-A11yText"
-                    />
                     <div
-                      class="Select__control css-13cymwt-control"
+                      class="non-icon"
                     >
+                      <input
+                        data-testid="namespace-select-filter-input"
+                        id="namespace-select-filter-filter"
+                        type="text"
+                        value=""
+                      />
                       <div
-                        class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer"
+                        class="gradient left"
+                      />
+                      <label
+                        for="namespace-select-filter-filter"
                       >
-                        <div
-                          class="Select__placeholder css-1jqq78o-placeholder"
-                          id="react-select-namespace-select-filter-placeholder"
-                        >
-                          Namespaces: some-namespace, some-other-namespace
-                        </div>
-                        <div
-                          class="Select__input-container css-qbdosj-Input"
-                          data-value=""
-                        >
-                          <input
-                            aria-autocomplete="list"
-                            aria-describedby="react-select-namespace-select-filter-placeholder"
-                            aria-expanded="false"
-                            aria-haspopup="true"
-                            autocapitalize="none"
-                            autocomplete="off"
-                            autocorrect="off"
-                            class="Select__input"
-                            id="namespace-select-filter"
-                            role="combobox"
-                            spellcheck="false"
-                            style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
-                            tabindex="0"
-                            type="text"
-                            value=""
-                          />
-                        </div>
-                      </div>
+                        Namespaces: some-namespace, some-other-namespace
+                      </label>
                       <div
-                        class="Select__indicators css-1hb7zxy-IndicatorsContainer"
-                      >
-                        <span
-                          class="Select__indicator-separator css-1u9des2-indicatorSeparator"
-                        />
-                        <div
-                          aria-hidden="true"
-                          class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="css-tj5bde-Svg"
-                            focusable="false"
-                            height="20"
-                            viewBox="0 0 20 20"
-                            width="20"
-                          >
-                            <path
-                              d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                            />
-                          </svg>
-                        </div>
-                      </div>
+                        class="gradient right"
+                      />
                     </div>
+                    <i
+                      class="Icon expand-icon material interactive focusable"
+                      data-testid="namespace-select-filter-expand-icon"
+                      tabindex="0"
+                    >
+                      <span
+                        class="icon"
+                        data-icon-name="expand_more"
+                      >
+                        expand_more
+                      </span>
+                    </i>
                   </div>
                 </div>
                 <div
@@ -12873,82 +12453,47 @@ exports[`showing details for helm release given application is started when navi
                   2 items
                 </div>
                 <div
-                  class="NamespaceSelectFilterParent"
+                  class="namespace-select-filter"
                   data-testid="namespace-select-filter"
+                  id="namespace-select-filter"
+                  tabindex="1"
                 >
                   <div
-                    class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
+                    class="menu"
                   >
-                    <span
-                      class="css-1f43avz-a11yText-A11yText"
-                      id="react-select-namespace-select-filter-live-region"
-                    />
-                    <span
-                      aria-atomic="false"
-                      aria-live="polite"
-                      aria-relevant="additions text"
-                      class="css-1f43avz-a11yText-A11yText"
-                    />
                     <div
-                      class="Select__control css-13cymwt-control"
+                      class="non-icon"
                     >
+                      <input
+                        data-testid="namespace-select-filter-input"
+                        id="namespace-select-filter-filter"
+                        type="text"
+                        value=""
+                      />
                       <div
-                        class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer"
+                        class="gradient left"
+                      />
+                      <label
+                        for="namespace-select-filter-filter"
                       >
-                        <div
-                          class="Select__placeholder css-1jqq78o-placeholder"
-                          id="react-select-namespace-select-filter-placeholder"
-                        >
-                          Namespaces: some-namespace, some-other-namespace
-                        </div>
-                        <div
-                          class="Select__input-container css-qbdosj-Input"
-                          data-value=""
-                        >
-                          <input
-                            aria-autocomplete="list"
-                            aria-describedby="react-select-namespace-select-filter-placeholder"
-                            aria-expanded="false"
-                            aria-haspopup="true"
-                            autocapitalize="none"
-                            autocomplete="off"
-                            autocorrect="off"
-                            class="Select__input"
-                            id="namespace-select-filter"
-                            role="combobox"
-                            spellcheck="false"
-                            style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
-                            tabindex="0"
-                            type="text"
-                            value=""
-                          />
-                        </div>
-                      </div>
+                        Namespaces: some-namespace, some-other-namespace
+                      </label>
                       <div
-                        class="Select__indicators css-1hb7zxy-IndicatorsContainer"
-                      >
-                        <span
-                          class="Select__indicator-separator css-1u9des2-indicatorSeparator"
-                        />
-                        <div
-                          aria-hidden="true"
-                          class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="css-tj5bde-Svg"
-                            focusable="false"
-                            height="20"
-                            viewBox="0 0 20 20"
-                            width="20"
-                          >
-                            <path
-                              d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                            />
-                          </svg>
-                        </div>
-                      </div>
+                        class="gradient right"
+                      />
                     </div>
+                    <i
+                      class="Icon expand-icon material interactive focusable"
+                      data-testid="namespace-select-filter-expand-icon"
+                      tabindex="0"
+                    >
+                      <span
+                        class="icon"
+                        data-icon-name="expand_more"
+                      >
+                        expand_more
+                      </span>
+                    </i>
                   </div>
                 </div>
                 <div
@@ -13880,82 +13425,47 @@ exports[`showing details for helm release given application is started when navi
                   2 items
                 </div>
                 <div
-                  class="NamespaceSelectFilterParent"
+                  class="namespace-select-filter"
                   data-testid="namespace-select-filter"
+                  id="namespace-select-filter"
+                  tabindex="1"
                 >
                   <div
-                    class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
+                    class="menu"
                   >
-                    <span
-                      class="css-1f43avz-a11yText-A11yText"
-                      id="react-select-namespace-select-filter-live-region"
-                    />
-                    <span
-                      aria-atomic="false"
-                      aria-live="polite"
-                      aria-relevant="additions text"
-                      class="css-1f43avz-a11yText-A11yText"
-                    />
                     <div
-                      class="Select__control css-13cymwt-control"
+                      class="non-icon"
                     >
+                      <input
+                        data-testid="namespace-select-filter-input"
+                        id="namespace-select-filter-filter"
+                        type="text"
+                        value=""
+                      />
                       <div
-                        class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer"
+                        class="gradient left"
+                      />
+                      <label
+                        for="namespace-select-filter-filter"
                       >
-                        <div
-                          class="Select__placeholder css-1jqq78o-placeholder"
-                          id="react-select-namespace-select-filter-placeholder"
-                        >
-                          Namespaces: some-namespace, some-other-namespace
-                        </div>
-                        <div
-                          class="Select__input-container css-qbdosj-Input"
-                          data-value=""
-                        >
-                          <input
-                            aria-autocomplete="list"
-                            aria-describedby="react-select-namespace-select-filter-placeholder"
-                            aria-expanded="false"
-                            aria-haspopup="true"
-                            autocapitalize="none"
-                            autocomplete="off"
-                            autocorrect="off"
-                            class="Select__input"
-                            id="namespace-select-filter"
-                            role="combobox"
-                            spellcheck="false"
-                            style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
-                            tabindex="0"
-                            type="text"
-                            value=""
-                          />
-                        </div>
-                      </div>
+                        Namespaces: some-namespace, some-other-namespace
+                      </label>
                       <div
-                        class="Select__indicators css-1hb7zxy-IndicatorsContainer"
-                      >
-                        <span
-                          class="Select__indicator-separator css-1u9des2-indicatorSeparator"
-                        />
-                        <div
-                          aria-hidden="true"
-                          class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="css-tj5bde-Svg"
-                            focusable="false"
-                            height="20"
-                            viewBox="0 0 20 20"
-                            width="20"
-                          >
-                            <path
-                              d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                            />
-                          </svg>
-                        </div>
-                      </div>
+                        class="gradient right"
+                      />
                     </div>
+                    <i
+                      class="Icon expand-icon material interactive focusable"
+                      data-testid="namespace-select-filter-expand-icon"
+                      tabindex="0"
+                    >
+                      <span
+                        class="icon"
+                        data-icon-name="expand_more"
+                      >
+                        expand_more
+                      </span>
+                    </i>
                   </div>
                 </div>
                 <div
@@ -14823,82 +14333,47 @@ exports[`showing details for helm release given application is started when navi
                   2 items
                 </div>
                 <div
-                  class="NamespaceSelectFilterParent"
+                  class="namespace-select-filter"
                   data-testid="namespace-select-filter"
+                  id="namespace-select-filter"
+                  tabindex="1"
                 >
                   <div
-                    class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
+                    class="menu"
                   >
-                    <span
-                      class="css-1f43avz-a11yText-A11yText"
-                      id="react-select-namespace-select-filter-live-region"
-                    />
-                    <span
-                      aria-atomic="false"
-                      aria-live="polite"
-                      aria-relevant="additions text"
-                      class="css-1f43avz-a11yText-A11yText"
-                    />
                     <div
-                      class="Select__control css-13cymwt-control"
+                      class="non-icon"
                     >
+                      <input
+                        data-testid="namespace-select-filter-input"
+                        id="namespace-select-filter-filter"
+                        type="text"
+                        value=""
+                      />
                       <div
-                        class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer"
+                        class="gradient left"
+                      />
+                      <label
+                        for="namespace-select-filter-filter"
                       >
-                        <div
-                          class="Select__placeholder css-1jqq78o-placeholder"
-                          id="react-select-namespace-select-filter-placeholder"
-                        >
-                          Namespaces: some-namespace, some-other-namespace
-                        </div>
-                        <div
-                          class="Select__input-container css-qbdosj-Input"
-                          data-value=""
-                        >
-                          <input
-                            aria-autocomplete="list"
-                            aria-describedby="react-select-namespace-select-filter-placeholder"
-                            aria-expanded="false"
-                            aria-haspopup="true"
-                            autocapitalize="none"
-                            autocomplete="off"
-                            autocorrect="off"
-                            class="Select__input"
-                            id="namespace-select-filter"
-                            role="combobox"
-                            spellcheck="false"
-                            style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
-                            tabindex="0"
-                            type="text"
-                            value=""
-                          />
-                        </div>
-                      </div>
+                        Namespaces: some-namespace, some-other-namespace
+                      </label>
                       <div
-                        class="Select__indicators css-1hb7zxy-IndicatorsContainer"
-                      >
-                        <span
-                          class="Select__indicator-separator css-1u9des2-indicatorSeparator"
-                        />
-                        <div
-                          aria-hidden="true"
-                          class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="css-tj5bde-Svg"
-                            focusable="false"
-                            height="20"
-                            viewBox="0 0 20 20"
-                            width="20"
-                          >
-                            <path
-                              d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                            />
-                          </svg>
-                        </div>
-                      </div>
+                        class="gradient right"
+                      />
                     </div>
+                    <i
+                      class="Icon expand-icon material interactive focusable"
+                      data-testid="namespace-select-filter-expand-icon"
+                      tabindex="0"
+                    >
+                      <span
+                        class="icon"
+                        data-icon-name="expand_more"
+                      >
+                        expand_more
+                      </span>
+                    </i>
                   </div>
                 </div>
                 <div
@@ -15827,82 +15302,47 @@ exports[`showing details for helm release given application is started when navi
                   2 items
                 </div>
                 <div
-                  class="NamespaceSelectFilterParent"
+                  class="namespace-select-filter"
                   data-testid="namespace-select-filter"
+                  id="namespace-select-filter"
+                  tabindex="1"
                 >
                   <div
-                    class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
+                    class="menu"
                   >
-                    <span
-                      class="css-1f43avz-a11yText-A11yText"
-                      id="react-select-namespace-select-filter-live-region"
-                    />
-                    <span
-                      aria-atomic="false"
-                      aria-live="polite"
-                      aria-relevant="additions text"
-                      class="css-1f43avz-a11yText-A11yText"
-                    />
                     <div
-                      class="Select__control css-13cymwt-control"
+                      class="non-icon"
                     >
+                      <input
+                        data-testid="namespace-select-filter-input"
+                        id="namespace-select-filter-filter"
+                        type="text"
+                        value=""
+                      />
                       <div
-                        class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer"
+                        class="gradient left"
+                      />
+                      <label
+                        for="namespace-select-filter-filter"
                       >
-                        <div
-                          class="Select__placeholder css-1jqq78o-placeholder"
-                          id="react-select-namespace-select-filter-placeholder"
-                        >
-                          Namespaces: some-namespace, some-other-namespace
-                        </div>
-                        <div
-                          class="Select__input-container css-qbdosj-Input"
-                          data-value=""
-                        >
-                          <input
-                            aria-autocomplete="list"
-                            aria-describedby="react-select-namespace-select-filter-placeholder"
-                            aria-expanded="false"
-                            aria-haspopup="true"
-                            autocapitalize="none"
-                            autocomplete="off"
-                            autocorrect="off"
-                            class="Select__input"
-                            id="namespace-select-filter"
-                            role="combobox"
-                            spellcheck="false"
-                            style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
-                            tabindex="0"
-                            type="text"
-                            value=""
-                          />
-                        </div>
-                      </div>
+                        Namespaces: some-namespace, some-other-namespace
+                      </label>
                       <div
-                        class="Select__indicators css-1hb7zxy-IndicatorsContainer"
-                      >
-                        <span
-                          class="Select__indicator-separator css-1u9des2-indicatorSeparator"
-                        />
-                        <div
-                          aria-hidden="true"
-                          class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="css-tj5bde-Svg"
-                            focusable="false"
-                            height="20"
-                            viewBox="0 0 20 20"
-                            width="20"
-                          >
-                            <path
-                              d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                            />
-                          </svg>
-                        </div>
-                      </div>
+                        class="gradient right"
+                      />
                     </div>
+                    <i
+                      class="Icon expand-icon material interactive focusable"
+                      data-testid="namespace-select-filter-expand-icon"
+                      tabindex="0"
+                    >
+                      <span
+                        class="icon"
+                        data-icon-name="expand_more"
+                      >
+                        expand_more
+                      </span>
+                    </i>
                   </div>
                 </div>
                 <div
@@ -16831,82 +16271,47 @@ exports[`showing details for helm release given application is started when navi
                   2 items
                 </div>
                 <div
-                  class="NamespaceSelectFilterParent"
+                  class="namespace-select-filter"
                   data-testid="namespace-select-filter"
+                  id="namespace-select-filter"
+                  tabindex="1"
                 >
                   <div
-                    class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
+                    class="menu"
                   >
-                    <span
-                      class="css-1f43avz-a11yText-A11yText"
-                      id="react-select-namespace-select-filter-live-region"
-                    />
-                    <span
-                      aria-atomic="false"
-                      aria-live="polite"
-                      aria-relevant="additions text"
-                      class="css-1f43avz-a11yText-A11yText"
-                    />
                     <div
-                      class="Select__control css-13cymwt-control"
+                      class="non-icon"
                     >
+                      <input
+                        data-testid="namespace-select-filter-input"
+                        id="namespace-select-filter-filter"
+                        type="text"
+                        value=""
+                      />
                       <div
-                        class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer"
+                        class="gradient left"
+                      />
+                      <label
+                        for="namespace-select-filter-filter"
                       >
-                        <div
-                          class="Select__placeholder css-1jqq78o-placeholder"
-                          id="react-select-namespace-select-filter-placeholder"
-                        >
-                          Namespaces: some-namespace, some-other-namespace
-                        </div>
-                        <div
-                          class="Select__input-container css-qbdosj-Input"
-                          data-value=""
-                        >
-                          <input
-                            aria-autocomplete="list"
-                            aria-describedby="react-select-namespace-select-filter-placeholder"
-                            aria-expanded="false"
-                            aria-haspopup="true"
-                            autocapitalize="none"
-                            autocomplete="off"
-                            autocorrect="off"
-                            class="Select__input"
-                            id="namespace-select-filter"
-                            role="combobox"
-                            spellcheck="false"
-                            style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
-                            tabindex="0"
-                            type="text"
-                            value=""
-                          />
-                        </div>
-                      </div>
+                        Namespaces: some-namespace, some-other-namespace
+                      </label>
                       <div
-                        class="Select__indicators css-1hb7zxy-IndicatorsContainer"
-                      >
-                        <span
-                          class="Select__indicator-separator css-1u9des2-indicatorSeparator"
-                        />
-                        <div
-                          aria-hidden="true"
-                          class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="css-tj5bde-Svg"
-                            focusable="false"
-                            height="20"
-                            viewBox="0 0 20 20"
-                            width="20"
-                          >
-                            <path
-                              d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                            />
-                          </svg>
-                        </div>
-                      </div>
+                        class="gradient right"
+                      />
                     </div>
+                    <i
+                      class="Icon expand-icon material interactive focusable"
+                      data-testid="namespace-select-filter-expand-icon"
+                      tabindex="0"
+                    >
+                      <span
+                        class="icon"
+                        data-icon-name="expand_more"
+                      >
+                        expand_more
+                      </span>
+                    </i>
                   </div>
                 </div>
                 <div
@@ -17835,82 +17240,47 @@ exports[`showing details for helm release given application is started when navi
                   2 items
                 </div>
                 <div
-                  class="NamespaceSelectFilterParent"
+                  class="namespace-select-filter"
                   data-testid="namespace-select-filter"
+                  id="namespace-select-filter"
+                  tabindex="1"
                 >
                   <div
-                    class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
+                    class="menu"
                   >
-                    <span
-                      class="css-1f43avz-a11yText-A11yText"
-                      id="react-select-namespace-select-filter-live-region"
-                    />
-                    <span
-                      aria-atomic="false"
-                      aria-live="polite"
-                      aria-relevant="additions text"
-                      class="css-1f43avz-a11yText-A11yText"
-                    />
                     <div
-                      class="Select__control css-13cymwt-control"
+                      class="non-icon"
                     >
+                      <input
+                        data-testid="namespace-select-filter-input"
+                        id="namespace-select-filter-filter"
+                        type="text"
+                        value=""
+                      />
                       <div
-                        class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer"
+                        class="gradient left"
+                      />
+                      <label
+                        for="namespace-select-filter-filter"
                       >
-                        <div
-                          class="Select__placeholder css-1jqq78o-placeholder"
-                          id="react-select-namespace-select-filter-placeholder"
-                        >
-                          Namespaces: some-namespace, some-other-namespace
-                        </div>
-                        <div
-                          class="Select__input-container css-qbdosj-Input"
-                          data-value=""
-                        >
-                          <input
-                            aria-autocomplete="list"
-                            aria-describedby="react-select-namespace-select-filter-placeholder"
-                            aria-expanded="false"
-                            aria-haspopup="true"
-                            autocapitalize="none"
-                            autocomplete="off"
-                            autocorrect="off"
-                            class="Select__input"
-                            id="namespace-select-filter"
-                            role="combobox"
-                            spellcheck="false"
-                            style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
-                            tabindex="0"
-                            type="text"
-                            value=""
-                          />
-                        </div>
-                      </div>
+                        Namespaces: some-namespace, some-other-namespace
+                      </label>
                       <div
-                        class="Select__indicators css-1hb7zxy-IndicatorsContainer"
-                      >
-                        <span
-                          class="Select__indicator-separator css-1u9des2-indicatorSeparator"
-                        />
-                        <div
-                          aria-hidden="true"
-                          class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="css-tj5bde-Svg"
-                            focusable="false"
-                            height="20"
-                            viewBox="0 0 20 20"
-                            width="20"
-                          >
-                            <path
-                              d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                            />
-                          </svg>
-                        </div>
-                      </div>
+                        class="gradient right"
+                      />
                     </div>
+                    <i
+                      class="Icon expand-icon material interactive focusable"
+                      data-testid="namespace-select-filter-expand-icon"
+                      tabindex="0"
+                    >
+                      <span
+                        class="icon"
+                        data-icon-name="expand_more"
+                      >
+                        expand_more
+                      </span>
+                    </i>
                   </div>
                 </div>
                 <div
diff --git a/packages/core/src/features/pod-logs/__snapshots__/download-logs.test.tsx.snap b/packages/core/src/features/pod-logs/__snapshots__/download-logs.test.tsx.snap
index a34802cb9d0a..f616293a6dff 100644
--- a/packages/core/src/features/pod-logs/__snapshots__/download-logs.test.tsx.snap
+++ b/packages/core/src/features/pod-logs/__snapshots__/download-logs.test.tsx.snap
@@ -294,82 +294,47 @@ exports[`download logs options in logs dock tab opening pod logs when logs avail
                   Overview
                 </h5>
                 <div
-                  class="NamespaceSelectFilterParent"
+                  class="namespace-select-filter"
                   data-testid="namespace-select-filter"
+                  id="overview-namespace-select-filter-input"
+                  tabindex="1"
                 >
                   <div
-                    class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
+                    class="menu"
                   >
-                    <span
-                      class="css-1f43avz-a11yText-A11yText"
-                      id="react-select-overview-namespace-select-filter-input-live-region"
-                    />
-                    <span
-                      aria-atomic="false"
-                      aria-live="polite"
-                      aria-relevant="additions text"
-                      class="css-1f43avz-a11yText-A11yText"
-                    />
                     <div
-                      class="Select__control css-13cymwt-control"
+                      class="non-icon"
                     >
+                      <input
+                        data-testid="namespace-select-filter-input"
+                        id="overview-namespace-select-filter-input-filter"
+                        type="text"
+                        value=""
+                      />
                       <div
-                        class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer"
+                        class="gradient left"
+                      />
+                      <label
+                        for="overview-namespace-select-filter-input-filter"
                       >
-                        <div
-                          class="Select__placeholder css-1jqq78o-placeholder"
-                          id="react-select-overview-namespace-select-filter-input-placeholder"
-                        >
-                          All namespaces
-                        </div>
-                        <div
-                          class="Select__input-container css-qbdosj-Input"
-                          data-value=""
-                        >
-                          <input
-                            aria-autocomplete="list"
-                            aria-describedby="react-select-overview-namespace-select-filter-input-placeholder"
-                            aria-expanded="false"
-                            aria-haspopup="true"
-                            autocapitalize="none"
-                            autocomplete="off"
-                            autocorrect="off"
-                            class="Select__input"
-                            id="overview-namespace-select-filter-input"
-                            role="combobox"
-                            spellcheck="false"
-                            style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
-                            tabindex="0"
-                            type="text"
-                            value=""
-                          />
-                        </div>
-                      </div>
+                        Namespaces: 
+                      </label>
                       <div
-                        class="Select__indicators css-1hb7zxy-IndicatorsContainer"
-                      >
-                        <span
-                          class="Select__indicator-separator css-1u9des2-indicatorSeparator"
-                        />
-                        <div
-                          aria-hidden="true"
-                          class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="css-tj5bde-Svg"
-                            focusable="false"
-                            height="20"
-                            viewBox="0 0 20 20"
-                            width="20"
-                          >
-                            <path
-                              d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                            />
-                          </svg>
-                        </div>
-                      </div>
+                        class="gradient right"
+                      />
                     </div>
+                    <i
+                      class="Icon expand-icon material interactive focusable"
+                      data-testid="namespace-select-filter-expand-icon"
+                      tabindex="0"
+                    >
+                      <span
+                        class="icon"
+                        data-icon-name="expand_more"
+                      >
+                        expand_more
+                      </span>
+                    </i>
                   </div>
                 </div>
               </div>
@@ -1154,82 +1119,47 @@ exports[`download logs options in logs dock tab opening pod logs when logs not a
                   Overview
                 </h5>
                 <div
-                  class="NamespaceSelectFilterParent"
+                  class="namespace-select-filter"
                   data-testid="namespace-select-filter"
+                  id="overview-namespace-select-filter-input"
+                  tabindex="1"
                 >
                   <div
-                    class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
+                    class="menu"
                   >
-                    <span
-                      class="css-1f43avz-a11yText-A11yText"
-                      id="react-select-overview-namespace-select-filter-input-live-region"
-                    />
-                    <span
-                      aria-atomic="false"
-                      aria-live="polite"
-                      aria-relevant="additions text"
-                      class="css-1f43avz-a11yText-A11yText"
-                    />
                     <div
-                      class="Select__control css-13cymwt-control"
+                      class="non-icon"
                     >
+                      <input
+                        data-testid="namespace-select-filter-input"
+                        id="overview-namespace-select-filter-input-filter"
+                        type="text"
+                        value=""
+                      />
                       <div
-                        class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer"
+                        class="gradient left"
+                      />
+                      <label
+                        for="overview-namespace-select-filter-input-filter"
                       >
-                        <div
-                          class="Select__placeholder css-1jqq78o-placeholder"
-                          id="react-select-overview-namespace-select-filter-input-placeholder"
-                        >
-                          All namespaces
-                        </div>
-                        <div
-                          class="Select__input-container css-qbdosj-Input"
-                          data-value=""
-                        >
-                          <input
-                            aria-autocomplete="list"
-                            aria-describedby="react-select-overview-namespace-select-filter-input-placeholder"
-                            aria-expanded="false"
-                            aria-haspopup="true"
-                            autocapitalize="none"
-                            autocomplete="off"
-                            autocorrect="off"
-                            class="Select__input"
-                            id="overview-namespace-select-filter-input"
-                            role="combobox"
-                            spellcheck="false"
-                            style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
-                            tabindex="0"
-                            type="text"
-                            value=""
-                          />
-                        </div>
-                      </div>
+                        Namespaces: 
+                      </label>
                       <div
-                        class="Select__indicators css-1hb7zxy-IndicatorsContainer"
-                      >
-                        <span
-                          class="Select__indicator-separator css-1u9des2-indicatorSeparator"
-                        />
-                        <div
-                          aria-hidden="true"
-                          class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="css-tj5bde-Svg"
-                            focusable="false"
-                            height="20"
-                            viewBox="0 0 20 20"
-                            width="20"
-                          >
-                            <path
-                              d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                            />
-                          </svg>
-                        </div>
-                      </div>
+                        class="gradient right"
+                      />
                     </div>
+                    <i
+                      class="Icon expand-icon material interactive focusable"
+                      data-testid="namespace-select-filter-expand-icon"
+                      tabindex="0"
+                    >
+                      <span
+                        class="icon"
+                        data-icon-name="expand_more"
+                      >
+                        expand_more
+                      </span>
+                    </i>
                   </div>
                 </div>
               </div>
diff --git a/packages/core/src/renderer/components/kube-object-list-layout/__snapshots__/kube-object-list-layout.test.tsx.snap b/packages/core/src/renderer/components/kube-object-list-layout/__snapshots__/kube-object-list-layout.test.tsx.snap
index 21c6b0c90fc2..1c36192d90e8 100644
--- a/packages/core/src/renderer/components/kube-object-list-layout/__snapshots__/kube-object-list-layout.test.tsx.snap
+++ b/packages/core/src/renderer/components/kube-object-list-layout/__snapshots__/kube-object-list-layout.test.tsx.snap
@@ -21,82 +21,47 @@ exports[`kube-object-list-layout given pod store renders 1`] = `
             0 items
           </div>
           <div
-            class="NamespaceSelectFilterParent"
+            class="namespace-select-filter"
             data-testid="namespace-select-filter"
+            id="kube-object-list-layout-namespace-select-input"
+            tabindex="1"
           >
             <div
-              class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
+              class="menu"
             >
-              <span
-                class="css-1f43avz-a11yText-A11yText"
-                id="react-select-kube-object-list-layout-namespace-select-input-live-region"
-              />
-              <span
-                aria-atomic="false"
-                aria-live="polite"
-                aria-relevant="additions text"
-                class="css-1f43avz-a11yText-A11yText"
-              />
               <div
-                class="Select__control css-13cymwt-control"
+                class="non-icon"
               >
+                <input
+                  data-testid="namespace-select-filter-input"
+                  id="kube-object-list-layout-namespace-select-input-filter"
+                  type="text"
+                  value=""
+                />
                 <div
-                  class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer"
+                  class="gradient left"
+                />
+                <label
+                  for="kube-object-list-layout-namespace-select-input-filter"
                 >
-                  <div
-                    class="Select__placeholder css-1jqq78o-placeholder"
-                    id="react-select-kube-object-list-layout-namespace-select-input-placeholder"
-                  >
-                    All namespaces
-                  </div>
-                  <div
-                    class="Select__input-container css-qbdosj-Input"
-                    data-value=""
-                  >
-                    <input
-                      aria-autocomplete="list"
-                      aria-describedby="react-select-kube-object-list-layout-namespace-select-input-placeholder"
-                      aria-expanded="false"
-                      aria-haspopup="true"
-                      autocapitalize="none"
-                      autocomplete="off"
-                      autocorrect="off"
-                      class="Select__input"
-                      id="kube-object-list-layout-namespace-select-input"
-                      role="combobox"
-                      spellcheck="false"
-                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
-                      tabindex="0"
-                      type="text"
-                      value=""
-                    />
-                  </div>
-                </div>
+                  All namespaces
+                </label>
                 <div
-                  class="Select__indicators css-1hb7zxy-IndicatorsContainer"
-                >
-                  <span
-                    class="Select__indicator-separator css-1u9des2-indicatorSeparator"
-                  />
-                  <div
-                    aria-hidden="true"
-                    class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="css-tj5bde-Svg"
-                      focusable="false"
-                      height="20"
-                      viewBox="0 0 20 20"
-                      width="20"
-                    >
-                      <path
-                        d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                      />
-                    </svg>
-                  </div>
-                </div>
+                  class="gradient right"
+                />
               </div>
+              <i
+                class="Icon expand-icon material interactive focusable"
+                data-testid="namespace-select-filter-expand-icon"
+                tabindex="0"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="expand_more"
+                >
+                  expand_more
+                </span>
+              </i>
             </div>
           </div>
         </div>
diff --git a/packages/core/src/renderer/frames/cluster-frame/__snapshots__/cluster-frame.test.tsx.snap b/packages/core/src/renderer/frames/cluster-frame/__snapshots__/cluster-frame.test.tsx.snap
index 3d12aff98752..9dce45f1df07 100644
--- a/packages/core/src/renderer/frames/cluster-frame/__snapshots__/cluster-frame.test.tsx.snap
+++ b/packages/core/src/renderer/frames/cluster-frame/__snapshots__/cluster-frame.test.tsx.snap
@@ -1323,82 +1323,47 @@ exports[`<ClusterFrame /> given cluster without list nodes, but with namespaces
                 Overview
               </h5>
               <div
-                class="NamespaceSelectFilterParent"
+                class="namespace-select-filter"
                 data-testid="namespace-select-filter"
+                id="overview-namespace-select-filter-input"
+                tabindex="1"
               >
                 <div
-                  class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
+                  class="menu"
                 >
-                  <span
-                    class="css-1f43avz-a11yText-A11yText"
-                    id="react-select-overview-namespace-select-filter-input-live-region"
-                  />
-                  <span
-                    aria-atomic="false"
-                    aria-live="polite"
-                    aria-relevant="additions text"
-                    class="css-1f43avz-a11yText-A11yText"
-                  />
                   <div
-                    class="Select__control css-13cymwt-control"
+                    class="non-icon"
                   >
+                    <input
+                      data-testid="namespace-select-filter-input"
+                      id="overview-namespace-select-filter-input-filter"
+                      type="text"
+                      value=""
+                    />
                     <div
-                      class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer"
+                      class="gradient left"
+                    />
+                    <label
+                      for="overview-namespace-select-filter-input-filter"
                     >
-                      <div
-                        class="Select__placeholder css-1jqq78o-placeholder"
-                        id="react-select-overview-namespace-select-filter-input-placeholder"
-                      >
-                        All namespaces
-                      </div>
-                      <div
-                        class="Select__input-container css-qbdosj-Input"
-                        data-value=""
-                      >
-                        <input
-                          aria-autocomplete="list"
-                          aria-describedby="react-select-overview-namespace-select-filter-input-placeholder"
-                          aria-expanded="false"
-                          aria-haspopup="true"
-                          autocapitalize="none"
-                          autocomplete="off"
-                          autocorrect="off"
-                          class="Select__input"
-                          id="overview-namespace-select-filter-input"
-                          role="combobox"
-                          spellcheck="false"
-                          style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
-                          tabindex="0"
-                          type="text"
-                          value=""
-                        />
-                      </div>
-                    </div>
+                      All namespaces
+                    </label>
                     <div
-                      class="Select__indicators css-1hb7zxy-IndicatorsContainer"
-                    >
-                      <span
-                        class="Select__indicator-separator css-1u9des2-indicatorSeparator"
-                      />
-                      <div
-                        aria-hidden="true"
-                        class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="css-tj5bde-Svg"
-                          focusable="false"
-                          height="20"
-                          viewBox="0 0 20 20"
-                          width="20"
-                        >
-                          <path
-                            d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                          />
-                        </svg>
-                      </div>
-                    </div>
+                      class="gradient right"
+                    />
                   </div>
+                  <i
+                    class="Icon expand-icon material interactive focusable"
+                    data-testid="namespace-select-filter-expand-icon"
+                    tabindex="0"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="expand_more"
+                    >
+                      expand_more
+                    </span>
+                  </i>
                 </div>
               </div>
             </div>

From b2d1adf2e83954f98f5179278092ce0079d27f58 Mon Sep 17 00:00:00 2001
From: Sebastian Malton <sebastian@malton.name>
Date: Fri, 26 May 2023 08:48:33 -0400
Subject: [PATCH 10/16] chore: Update smoke test to fix selector due to new
 namespace-select-filter behaviour

Signed-off-by: Sebastian Malton <sebastian@malton.name>
---
 open-lens/integration/__tests__/cluster-pages.tests.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/open-lens/integration/__tests__/cluster-pages.tests.ts b/open-lens/integration/__tests__/cluster-pages.tests.ts
index 30bbc79ed9a3..0b36193ea848 100644
--- a/open-lens/integration/__tests__/cluster-pages.tests.ts
+++ b/open-lens/integration/__tests__/cluster-pages.tests.ts
@@ -106,9 +106,7 @@ describeIf(minikubeReady(TEST_NAMESPACE))("Minikube based tests", () => {
 
       await navigateToPods(frame);
 
-      const namespacesSelector = await frame.waitForSelector(
-        ".NamespaceSelect",
-      );
+      const namespacesSelector = await frame.waitForSelector(".namespace-select-filter .menu .non-icon label");
 
       await namespacesSelector.click();
       await namespacesSelector.type(TEST_NAMESPACE);

From 5ae2f7dc8f9e9a57b5b581221c884c303d2e92f9 Mon Sep 17 00:00:00 2001
From: Sebastian Malton <sebastian@malton.name>
Date: Wed, 31 May 2023 09:47:28 -0400
Subject: [PATCH 11/16] chore: Fixup NamespaceSelectFilter after rebase

Signed-off-by: Sebastian Malton <sebastian@malton.name>
---
 .../renderer/components/namespace-select-filter/component.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/src/renderer/components/namespace-select-filter/component.tsx b/packages/core/src/renderer/components/namespace-select-filter/component.tsx
index 1fa716ce656c..bb1ed2276148 100644
--- a/packages/core/src/renderer/components/namespace-select-filter/component.tsx
+++ b/packages/core/src/renderer/components/namespace-select-filter/component.tsx
@@ -11,7 +11,7 @@ import { withInjectables } from "@ogre-tools/injectable-react";
 import type { NamespaceSelectFilterModel, NamespaceSelectFilterOption } from "./model.injectable";
 import namespaceSelectFilterModelInjectable, { selectAllNamespaces } from "./model.injectable";
 import { VariableSizeList } from "react-window";
-import { Icon } from "../icon";
+import { Icon } from "@k8slens/icon";
 import { cssNames, prevDefault } from "@k8slens/utilities";
 import { addWindowEventListener } from "../../window/event-listener.injectable";
 import { TooltipPosition } from "@k8slens/tooltip";

From 40bca3b14a55576645e428b417db27ad0cac7df9 Mon Sep 17 00:00:00 2001
From: Sebastian Malton <sebastian@malton.name>
Date: Wed, 31 May 2023 15:07:53 -0400
Subject: [PATCH 12/16] chore: Fix integration test because of new behaviour

Signed-off-by: Sebastian Malton <sebastian@malton.name>
---
 open-lens/integration/__tests__/cluster-pages.tests.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/open-lens/integration/__tests__/cluster-pages.tests.ts b/open-lens/integration/__tests__/cluster-pages.tests.ts
index 0b36193ea848..b5c72446613a 100644
--- a/open-lens/integration/__tests__/cluster-pages.tests.ts
+++ b/open-lens/integration/__tests__/cluster-pages.tests.ts
@@ -110,8 +110,9 @@ describeIf(minikubeReady(TEST_NAMESPACE))("Minikube based tests", () => {
 
       await namespacesSelector.click();
       await namespacesSelector.type(TEST_NAMESPACE);
-      await namespacesSelector.press("Enter");
-      await namespacesSelector.click();
+      await frame.page().keyboard.press("Tab", { delay: 10 });
+      await frame.page().keyboard.press("Tab", { delay: 10 });
+      await frame.page().keyboard.press("Enter", { delay: 10 });
 
       await frame.click(".Icon.new-dock-tab");
 

From 72a48417e47b5f6fa3d20301b784e51cf59e12d1 Mon Sep 17 00:00:00 2001
From: Sebastian Malton <sebastian@malton.name>
Date: Wed, 31 May 2023 16:07:48 -0400
Subject: [PATCH 13/16] fix: Filtering text of NamespaceSelectFilter shouldn't
 look bold

Signed-off-by: Sebastian Malton <sebastian@malton.name>
---
 .../namespace-select-filter.test.tsx.snap      | 18 ++++++++++++++++++
 .../namespace-select-filter/component.tsx      |  9 ++++++---
 .../namespace-select-filter.scss               |  6 ------
 .../namespace-select-filter.test.tsx           |  8 ++++++++
 4 files changed, 32 insertions(+), 9 deletions(-)

diff --git a/packages/core/src/renderer/components/namespace-select-filter/__snapshots__/namespace-select-filter.test.tsx.snap b/packages/core/src/renderer/components/namespace-select-filter/__snapshots__/namespace-select-filter.test.tsx.snap
index 83f846442ef4..b4d72bb7eb47 100644
--- a/packages/core/src/renderer/components/namespace-select-filter/__snapshots__/namespace-select-filter.test.tsx.snap
+++ b/packages/core/src/renderer/components/namespace-select-filter/__snapshots__/namespace-select-filter.test.tsx.snap
@@ -25,6 +25,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves renders 1`] = `
             class="gradient left"
           />
           <label
+            data-testid="namespace-select-filter-label"
             for="namespace-select-filter-filter"
           >
             All namespaces
@@ -76,6 +77,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked rend
             class="gradient left"
           />
           <label
+            data-testid="namespace-select-filter-label"
             for="namespace-select-filter-filter"
           >
             All namespaces
@@ -737,6 +739,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
             class="gradient left"
           />
           <label
+            data-testid="namespace-select-filter-label"
             for="namespace-select-filter-filter"
           >
             Namespace: test-2
@@ -788,6 +791,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
             class="gradient left"
           />
           <label
+            data-testid="namespace-select-filter-label"
             for="namespace-select-filter-filter"
           >
             Namespace: test-2
@@ -1449,6 +1453,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
             class="gradient left"
           />
           <label
+            data-testid="namespace-select-filter-label"
             for="namespace-select-filter-filter"
           >
             Namespace: test-1
@@ -1500,6 +1505,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
             class="gradient left"
           />
           <label
+            data-testid="namespace-select-filter-label"
             for="namespace-select-filter-filter"
           >
             Namespaces: test-1, test-3
@@ -2161,6 +2167,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
             class="gradient left"
           />
           <label
+            data-testid="namespace-select-filter-label"
             for="namespace-select-filter-filter"
           >
             All namespaces
@@ -2822,6 +2829,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
             class="gradient left"
           />
           <label
+            data-testid="namespace-select-filter-label"
             for="namespace-select-filter-filter"
           >
             Namespaces: test-1, test-10, test-11, test-12, test-13, test-3, test-4, test-5, test-6, test-7, test-8, test-9
@@ -3483,6 +3491,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
             class="gradient left"
           />
           <label
+            data-testid="namespace-select-filter-label"
             for="namespace-select-filter-filter"
           >
             Namespaces: test-1, test-10, test-11, test-12, test-13, test-4, test-5, test-6, test-7, test-8, test-9
@@ -4144,6 +4153,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
             class="gradient left"
           />
           <label
+            data-testid="namespace-select-filter-label"
             for="namespace-select-filter-filter"
           >
             Namespaces: test-1, test-10, test-11, test-12, test-13, test-2, test-4, test-5, test-6, test-7, test-8, test-9
@@ -4805,6 +4815,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
             class="gradient left"
           />
           <label
+            data-testid="namespace-select-filter-label"
             for="namespace-select-filter-filter"
           >
             Namespace: test-5
@@ -4856,6 +4867,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
             class="gradient left"
           />
           <label
+            data-testid="namespace-select-filter-label"
             for="namespace-select-filter-filter"
           >
             1*
@@ -5157,6 +5169,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
             class="gradient left"
           />
           <label
+            data-testid="namespace-select-filter-label"
             for="namespace-select-filter-filter"
           >
             1
@@ -5458,6 +5471,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when menu expand
             class="gradient left"
           />
           <label
+            data-testid="namespace-select-filter-label"
             for="namespace-select-filter-filter"
           >
             All namespaces
@@ -6119,6 +6133,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when menu expand
             class="gradient left"
           />
           <label
+            data-testid="namespace-select-filter-label"
             for="namespace-select-filter-filter"
           >
             All namespaces
@@ -6170,6 +6185,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves with thousands of
             class="gradient left"
           />
           <label
+            data-testid="namespace-select-filter-label"
             for="namespace-select-filter-filter"
           >
             All namespaces
@@ -6221,6 +6237,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves with thousands of
             class="gradient left"
           />
           <label
+            data-testid="namespace-select-filter-label"
             for="namespace-select-filter-filter"
           >
             All namespaces
@@ -6972,6 +6989,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves with thousands of
             class="gradient left"
           />
           <label
+            data-testid="namespace-select-filter-label"
             for="namespace-select-filter-filter"
           >
             All namespaces
diff --git a/packages/core/src/renderer/components/namespace-select-filter/component.tsx b/packages/core/src/renderer/components/namespace-select-filter/component.tsx
index bb1ed2276148..2bc1114e123e 100644
--- a/packages/core/src/renderer/components/namespace-select-filter/component.tsx
+++ b/packages/core/src/renderer/components/namespace-select-filter/component.tsx
@@ -39,17 +39,20 @@ const NamespaceSelectFilterMenu = observer(({ id, model }: Dependencies & Namesp
       <div className="non-icon">
         <input
           type="text"
-          id={`${id}-filter`}
+          id={`${id}-input`}
           value={model.filterText.get()}
           onChange={(event) => model.filterText.set(event.target.value)}
           onClick={model.menu.open}
           data-testid="namespace-select-filter-input"
         />
         <Gradient type="left" />
-        <label htmlFor={`${id}-filter`}>
+        <label
+          htmlFor={`${id}-input`}
+          data-testid="namespace-select-filter-label"
+        >
           {(
             model.filterText.get() !== ""
-              ? model.filterText.get()
+              ? ""
               : (
                 model.menu.hasSelectedAll.get()
                   ? "All namespaces"
diff --git a/packages/core/src/renderer/components/namespace-select-filter/namespace-select-filter.scss b/packages/core/src/renderer/components/namespace-select-filter/namespace-select-filter.scss
index 2eead588e132..268a3c69819e 100644
--- a/packages/core/src/renderer/components/namespace-select-filter/namespace-select-filter.scss
+++ b/packages/core/src/renderer/components/namespace-select-filter/namespace-select-filter.scss
@@ -1,9 +1,3 @@
-@include theme-light {
-  .NamespaceSelectFilter {
-    --gradientColor: white;
-  }
-}
-
 .namespace-select-filter {
   width: 300px;
   position: relative;
diff --git a/packages/core/src/renderer/components/namespace-select-filter/namespace-select-filter.test.tsx b/packages/core/src/renderer/components/namespace-select-filter/namespace-select-filter.test.tsx
index 4eb2ec4b5392..9260063cd644 100644
--- a/packages/core/src/renderer/components/namespace-select-filter/namespace-select-filter.test.tsx
+++ b/packages/core/src/renderer/components/namespace-select-filter/namespace-select-filter.test.tsx
@@ -351,6 +351,14 @@ describe("<NamespaceSelectFilter />", () => {
           expect(result.baseElement).toMatchSnapshot();
         });
 
+        it("does show something in the input", () => {
+          expect(result.getByTestId("namespace-select-filter-input")).toHaveValue("1");
+        });
+
+        it("doesn't show anything in the label", () => {
+          expect(result.getByTestId("namespace-select-filter-label")).toBeEmptyDOMElement();
+        });
+
         it("menu is still open", () => {
           expect(result.getByTestId("namespace-select-filter-list-container")).toBeInTheDocument();
         });

From adc4d400bb572e5c7a212a7d6c2eb27fca8acfc7 Mon Sep 17 00:00:00 2001
From: Sebastian Malton <sebastian@malton.name>
Date: Wed, 31 May 2023 16:19:16 -0400
Subject: [PATCH 14/16] feat: Add support for using 'Enter' to quickly switch
 to a filtered namespace

Signed-off-by: Sebastian Malton <sebastian@malton.name>
---
 .../namespace-select-filter.test.tsx.snap     | 132 ++++++++++++------
 .../namespace-select-filter/component.tsx     |   1 +
 .../model.injectable.ts                       |  14 ++
 .../namespace-select-filter.test.tsx          |  18 +++
 4 files changed, 123 insertions(+), 42 deletions(-)

diff --git a/packages/core/src/renderer/components/namespace-select-filter/__snapshots__/namespace-select-filter.test.tsx.snap b/packages/core/src/renderer/components/namespace-select-filter/__snapshots__/namespace-select-filter.test.tsx.snap
index b4d72bb7eb47..a7a0c15d6663 100644
--- a/packages/core/src/renderer/components/namespace-select-filter/__snapshots__/namespace-select-filter.test.tsx.snap
+++ b/packages/core/src/renderer/components/namespace-select-filter/__snapshots__/namespace-select-filter.test.tsx.snap
@@ -17,7 +17,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves renders 1`] = `
         >
           <input
             data-testid="namespace-select-filter-input"
-            id="namespace-select-filter-filter"
+            id="namespace-select-filter-input"
             type="text"
             value=""
           />
@@ -26,7 +26,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves renders 1`] = `
           />
           <label
             data-testid="namespace-select-filter-label"
-            for="namespace-select-filter-filter"
+            for="namespace-select-filter-input"
           >
             All namespaces
           </label>
@@ -69,7 +69,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked rend
         >
           <input
             data-testid="namespace-select-filter-input"
-            id="namespace-select-filter-filter"
+            id="namespace-select-filter-input"
             type="text"
             value=""
           />
@@ -78,7 +78,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked rend
           />
           <label
             data-testid="namespace-select-filter-label"
-            for="namespace-select-filter-filter"
+            for="namespace-select-filter-input"
           >
             All namespaces
           </label>
@@ -731,7 +731,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
         >
           <input
             data-testid="namespace-select-filter-input"
-            id="namespace-select-filter-filter"
+            id="namespace-select-filter-input"
             type="text"
             value=""
           />
@@ -740,7 +740,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
           />
           <label
             data-testid="namespace-select-filter-label"
-            for="namespace-select-filter-filter"
+            for="namespace-select-filter-input"
           >
             Namespace: test-2
           </label>
@@ -783,7 +783,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
         >
           <input
             data-testid="namespace-select-filter-input"
-            id="namespace-select-filter-filter"
+            id="namespace-select-filter-input"
             type="text"
             value=""
           />
@@ -792,7 +792,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
           />
           <label
             data-testid="namespace-select-filter-label"
-            for="namespace-select-filter-filter"
+            for="namespace-select-filter-input"
           >
             Namespace: test-2
           </label>
@@ -1445,7 +1445,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
         >
           <input
             data-testid="namespace-select-filter-input"
-            id="namespace-select-filter-filter"
+            id="namespace-select-filter-input"
             type="text"
             value=""
           />
@@ -1454,7 +1454,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
           />
           <label
             data-testid="namespace-select-filter-label"
-            for="namespace-select-filter-filter"
+            for="namespace-select-filter-input"
           >
             Namespace: test-1
           </label>
@@ -1497,7 +1497,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
         >
           <input
             data-testid="namespace-select-filter-input"
-            id="namespace-select-filter-filter"
+            id="namespace-select-filter-input"
             type="text"
             value=""
           />
@@ -1506,7 +1506,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
           />
           <label
             data-testid="namespace-select-filter-label"
-            for="namespace-select-filter-filter"
+            for="namespace-select-filter-input"
           >
             Namespaces: test-1, test-3
           </label>
@@ -2159,7 +2159,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
         >
           <input
             data-testid="namespace-select-filter-input"
-            id="namespace-select-filter-filter"
+            id="namespace-select-filter-input"
             type="text"
             value=""
           />
@@ -2168,7 +2168,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
           />
           <label
             data-testid="namespace-select-filter-label"
-            for="namespace-select-filter-filter"
+            for="namespace-select-filter-input"
           >
             All namespaces
           </label>
@@ -2821,7 +2821,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
         >
           <input
             data-testid="namespace-select-filter-input"
-            id="namespace-select-filter-filter"
+            id="namespace-select-filter-input"
             type="text"
             value=""
           />
@@ -2830,7 +2830,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
           />
           <label
             data-testid="namespace-select-filter-label"
-            for="namespace-select-filter-filter"
+            for="namespace-select-filter-input"
           >
             Namespaces: test-1, test-10, test-11, test-12, test-13, test-3, test-4, test-5, test-6, test-7, test-8, test-9
           </label>
@@ -3483,7 +3483,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
         >
           <input
             data-testid="namespace-select-filter-input"
-            id="namespace-select-filter-filter"
+            id="namespace-select-filter-input"
             type="text"
             value=""
           />
@@ -3492,7 +3492,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
           />
           <label
             data-testid="namespace-select-filter-label"
-            for="namespace-select-filter-filter"
+            for="namespace-select-filter-input"
           >
             Namespaces: test-1, test-10, test-11, test-12, test-13, test-4, test-5, test-6, test-7, test-8, test-9
           </label>
@@ -4145,7 +4145,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
         >
           <input
             data-testid="namespace-select-filter-input"
-            id="namespace-select-filter-filter"
+            id="namespace-select-filter-input"
             type="text"
             value=""
           />
@@ -4154,7 +4154,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
           />
           <label
             data-testid="namespace-select-filter-label"
-            for="namespace-select-filter-filter"
+            for="namespace-select-filter-input"
           >
             Namespaces: test-1, test-10, test-11, test-12, test-13, test-2, test-4, test-5, test-6, test-7, test-8, test-9
           </label>
@@ -4807,7 +4807,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
         >
           <input
             data-testid="namespace-select-filter-input"
-            id="namespace-select-filter-filter"
+            id="namespace-select-filter-input"
             type="text"
             value=""
           />
@@ -4816,7 +4816,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
           />
           <label
             data-testid="namespace-select-filter-label"
-            for="namespace-select-filter-filter"
+            for="namespace-select-filter-input"
           >
             Namespace: test-5
           </label>
@@ -4859,7 +4859,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
         >
           <input
             data-testid="namespace-select-filter-input"
-            id="namespace-select-filter-filter"
+            id="namespace-select-filter-input"
             type="text"
             value="1*"
           />
@@ -4868,10 +4868,8 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
           />
           <label
             data-testid="namespace-select-filter-label"
-            for="namespace-select-filter-filter"
-          >
-            1*
-          </label>
+            for="namespace-select-filter-input"
+          />
           <div
             class="gradient right"
           />
@@ -5161,7 +5159,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
         >
           <input
             data-testid="namespace-select-filter-input"
-            id="namespace-select-filter-filter"
+            id="namespace-select-filter-input"
             type="text"
             value="1"
           />
@@ -5170,10 +5168,8 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
           />
           <label
             data-testid="namespace-select-filter-label"
-            for="namespace-select-filter-filter"
-          >
-            1
-          </label>
+            for="namespace-select-filter-input"
+          />
           <div
             class="gradient right"
           />
@@ -5446,6 +5442,58 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when
 </body>
 `;
 
+exports[`<NamespaceSelectFilter /> once the subscribe resolves when clicked when typing in the filter input when pressing the 'Enter' key renders 1`] = `
+<body>
+  <div>
+    <div
+      class="namespace-select-filter"
+      data-testid="namespace-select-filter"
+      id="namespace-select-filter"
+      tabindex="1"
+    >
+      <div
+        class="menu"
+      >
+        <div
+          class="non-icon"
+        >
+          <input
+            data-testid="namespace-select-filter-input"
+            id="namespace-select-filter-input"
+            type="text"
+            value=""
+          />
+          <div
+            class="gradient left"
+          />
+          <label
+            data-testid="namespace-select-filter-label"
+            for="namespace-select-filter-input"
+          >
+            Namespace: test-1
+          </label>
+          <div
+            class="gradient right"
+          />
+        </div>
+        <i
+          class="Icon expand-icon material interactive focusable"
+          data-testid="namespace-select-filter-expand-icon"
+          tabindex="0"
+        >
+          <span
+            class="icon"
+            data-icon-name="expand_more"
+          >
+            expand_more
+          </span>
+        </i>
+      </div>
+    </div>
+  </div>
+</body>
+`;
+
 exports[`<NamespaceSelectFilter /> once the subscribe resolves when menu expand icon is clicked renders 1`] = `
 <body>
   <div>
@@ -5463,7 +5511,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when menu expand
         >
           <input
             data-testid="namespace-select-filter-input"
-            id="namespace-select-filter-filter"
+            id="namespace-select-filter-input"
             type="text"
             value=""
           />
@@ -5472,7 +5520,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when menu expand
           />
           <label
             data-testid="namespace-select-filter-label"
-            for="namespace-select-filter-filter"
+            for="namespace-select-filter-input"
           >
             All namespaces
           </label>
@@ -6125,7 +6173,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when menu expand
         >
           <input
             data-testid="namespace-select-filter-input"
-            id="namespace-select-filter-filter"
+            id="namespace-select-filter-input"
             type="text"
             value=""
           />
@@ -6134,7 +6182,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves when menu expand
           />
           <label
             data-testid="namespace-select-filter-label"
-            for="namespace-select-filter-filter"
+            for="namespace-select-filter-input"
           >
             All namespaces
           </label>
@@ -6177,7 +6225,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves with thousands of
         >
           <input
             data-testid="namespace-select-filter-input"
-            id="namespace-select-filter-filter"
+            id="namespace-select-filter-input"
             type="text"
             value=""
           />
@@ -6186,7 +6234,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves with thousands of
           />
           <label
             data-testid="namespace-select-filter-label"
-            for="namespace-select-filter-filter"
+            for="namespace-select-filter-input"
           >
             All namespaces
           </label>
@@ -6229,7 +6277,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves with thousands of
         >
           <input
             data-testid="namespace-select-filter-input"
-            id="namespace-select-filter-filter"
+            id="namespace-select-filter-input"
             type="text"
             value=""
           />
@@ -6238,7 +6286,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves with thousands of
           />
           <label
             data-testid="namespace-select-filter-label"
-            for="namespace-select-filter-filter"
+            for="namespace-select-filter-input"
           >
             All namespaces
           </label>
@@ -6981,7 +7029,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves with thousands of
         >
           <input
             data-testid="namespace-select-filter-input"
-            id="namespace-select-filter-filter"
+            id="namespace-select-filter-input"
             type="text"
             value=""
           />
@@ -6990,7 +7038,7 @@ exports[`<NamespaceSelectFilter /> once the subscribe resolves with thousands of
           />
           <label
             data-testid="namespace-select-filter-label"
-            for="namespace-select-filter-filter"
+            for="namespace-select-filter-input"
           >
             All namespaces
           </label>
diff --git a/packages/core/src/renderer/components/namespace-select-filter/component.tsx b/packages/core/src/renderer/components/namespace-select-filter/component.tsx
index 2bc1114e123e..fba7de3d300e 100644
--- a/packages/core/src/renderer/components/namespace-select-filter/component.tsx
+++ b/packages/core/src/renderer/components/namespace-select-filter/component.tsx
@@ -43,6 +43,7 @@ const NamespaceSelectFilterMenu = observer(({ id, model }: Dependencies & Namesp
           value={model.filterText.get()}
           onChange={(event) => model.filterText.set(event.target.value)}
           onClick={model.menu.open}
+          onKeyDown={model.input.onKeyDown}
           data-testid="namespace-select-filter-input"
         />
         <Gradient type="left" />
diff --git a/packages/core/src/renderer/components/namespace-select-filter/model.injectable.ts b/packages/core/src/renderer/components/namespace-select-filter/model.injectable.ts
index 7594de276fe4..ba0338bbd175 100644
--- a/packages/core/src/renderer/components/namespace-select-filter/model.injectable.ts
+++ b/packages/core/src/renderer/components/namespace-select-filter/model.injectable.ts
@@ -34,6 +34,9 @@ export interface NamespaceSelectFilterModel {
     onKeyDown: React.KeyboardEventHandler;
     onKeyUp: React.KeyboardEventHandler;
   };
+  readonly input: {
+    onKeyDown: React.KeyboardEventHandler;
+  };
   onClick: (options: NamespaceSelectFilterOption) => void;
   deselect: (namespace: string) => void;
   select: (namespace: string) => void;
@@ -158,6 +161,17 @@ const namespaceSelectFilterModelInjectable = getInjectable({
           }
         },
       },
+      input: {
+        onKeyDown: (event) => {
+          if (event.key === "Enter") {
+            const options = filteredOptions.get().slice(1);
+
+            if (options.length >= 1) {
+              model.onClick(options[0]);
+            }
+          }
+        },
+      },
       onClick: action((option) => {
         if (option.value === selectAllNamespaces) {
           namespaceStore.selectAll();
diff --git a/packages/core/src/renderer/components/namespace-select-filter/namespace-select-filter.test.tsx b/packages/core/src/renderer/components/namespace-select-filter/namespace-select-filter.test.tsx
index 9260063cd644..65c15a4ff122 100644
--- a/packages/core/src/renderer/components/namespace-select-filter/namespace-select-filter.test.tsx
+++ b/packages/core/src/renderer/components/namespace-select-filter/namespace-select-filter.test.tsx
@@ -374,6 +374,24 @@ describe("<NamespaceSelectFilter />", () => {
         it("does not show 'test-2' option", () => {
           expect(result.queryByTestId("namespace-select-filter-option-test-2")).not.toBeInTheDocument();
         });
+
+        describe("when pressing the 'Enter' key", () => {
+          beforeEach(() => {
+            userEvent.keyboard("{enter}");
+          });
+
+          it("renders", () => {
+            expect(result.baseElement).toMatchSnapshot();
+          });
+
+          it("closes the menu", () => {
+            expect(result.queryByTestId("namespace-select-filter-list-container")).not.toBeInTheDocument();
+          });
+
+          it("has only 'test-1' as selected in the store", () => {
+            expect(namespaceStore.contextNamespaces).toEqual(["test-1"]);
+          });
+        });
       });
 
       describe("when typing a glob style filter into the filter input", () => {

From 3a6539ef100e297a97808744759596d0ae56f15a Mon Sep 17 00:00:00 2001
From: Sebastian Malton <sebastian@malton.name>
Date: Wed, 31 May 2023 17:23:56 -0400
Subject: [PATCH 15/16] chore: Update snapshots

Signed-off-by: Sebastian Malton <sebastian@malton.name>
---
 ...ing-cluster-frame-components.test.tsx.snap |  5 +-
 ...-and-tab-navigation-for-core.test.tsx.snap | 25 +++---
 ...ab-navigation-for-extensions.test.tsx.snap | 25 +++---
 .../visibility-of-sidebar-items.test.tsx.snap | 10 ++-
 .../workload-overview.test.tsx.snap           |  5 +-
 ...when-cluster-is-not-relevant.test.tsx.snap | 10 ++-
 ...when-cluster-is-not-relevant.test.tsx.snap | 15 ++--
 ...when-cluster-is-not-relevant.test.tsx.snap | 15 ++--
 ...hide-kube-object-detail-item.test.tsx.snap | 10 ++-
 ...e-from-previously-opened-tab.test.tsx.snap | 10 ++-
 .../__snapshots__/pods.test.tsx.snap          | 15 ++--
 ...when-cluster-is-not-relevant.test.tsx.snap | 15 ++--
 ...lling-helm-chart-from-new-tab.test.ts.snap | 10 ++-
 ...rt-from-previously-opened-tab.test.ts.snap | 10 ++-
 .../upgrade-chart-new-tab.test.ts.snap        | 35 +++++---
 ...wing-details-for-helm-release.test.ts.snap | 90 +++++++++++--------
 .../__snapshots__/download-logs.test.tsx.snap | 10 ++-
 .../kube-object-list-layout.test.tsx.snap     |  5 +-
 .../__snapshots__/cluster-frame.test.tsx.snap |  5 +-
 19 files changed, 195 insertions(+), 130 deletions(-)

diff --git a/packages/core/src/features/cluster/__snapshots__/legacy-extension-adding-cluster-frame-components.test.tsx.snap b/packages/core/src/features/cluster/__snapshots__/legacy-extension-adding-cluster-frame-components.test.tsx.snap
index e4a6cba0cbe1..f3e9803053c5 100644
--- a/packages/core/src/features/cluster/__snapshots__/legacy-extension-adding-cluster-frame-components.test.tsx.snap
+++ b/packages/core/src/features/cluster/__snapshots__/legacy-extension-adding-cluster-frame-components.test.tsx.snap
@@ -306,7 +306,7 @@ exports[`legacy extension adding cluster frame components given custom component
                   >
                     <input
                       data-testid="namespace-select-filter-input"
-                      id="overview-namespace-select-filter-input-filter"
+                      id="overview-namespace-select-filter-input-input"
                       type="text"
                       value=""
                     />
@@ -314,7 +314,8 @@ exports[`legacy extension adding cluster frame components given custom component
                       class="gradient left"
                     />
                     <label
-                      for="overview-namespace-select-filter-input-filter"
+                      data-testid="namespace-select-filter-label"
+                      for="overview-namespace-select-filter-input-input"
                     >
                       Namespaces: 
                     </label>
diff --git a/packages/core/src/features/cluster/__snapshots__/sidebar-and-tab-navigation-for-core.test.tsx.snap b/packages/core/src/features/cluster/__snapshots__/sidebar-and-tab-navigation-for-core.test.tsx.snap
index 92b2def3c7f0..bd98267b2ba0 100644
--- a/packages/core/src/features/cluster/__snapshots__/sidebar-and-tab-navigation-for-core.test.tsx.snap
+++ b/packages/core/src/features/cluster/__snapshots__/sidebar-and-tab-navigation-for-core.test.tsx.snap
@@ -335,7 +335,7 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
                   >
                     <input
                       data-testid="namespace-select-filter-input"
-                      id="overview-namespace-select-filter-input-filter"
+                      id="overview-namespace-select-filter-input-input"
                       type="text"
                       value=""
                     />
@@ -343,7 +343,8 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
                       class="gradient left"
                     />
                     <label
-                      for="overview-namespace-select-filter-input-filter"
+                      data-testid="namespace-select-filter-label"
+                      for="overview-namespace-select-filter-input-input"
                     >
                       Namespaces: 
                     </label>
@@ -844,7 +845,7 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
                   >
                     <input
                       data-testid="namespace-select-filter-input"
-                      id="overview-namespace-select-filter-input-filter"
+                      id="overview-namespace-select-filter-input-input"
                       type="text"
                       value=""
                     />
@@ -852,7 +853,8 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
                       class="gradient left"
                     />
                     <label
-                      for="overview-namespace-select-filter-input-filter"
+                      data-testid="namespace-select-filter-label"
+                      for="overview-namespace-select-filter-input-input"
                     >
                       Namespaces: 
                     </label>
@@ -1373,7 +1375,7 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
                   >
                     <input
                       data-testid="namespace-select-filter-input"
-                      id="overview-namespace-select-filter-input-filter"
+                      id="overview-namespace-select-filter-input-input"
                       type="text"
                       value=""
                     />
@@ -1381,7 +1383,8 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
                       class="gradient left"
                     />
                     <label
-                      for="overview-namespace-select-filter-input-filter"
+                      data-testid="namespace-select-filter-label"
+                      for="overview-namespace-select-filter-input-input"
                     >
                       Namespaces: 
                     </label>
@@ -2765,7 +2768,7 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
                   >
                     <input
                       data-testid="namespace-select-filter-input"
-                      id="overview-namespace-select-filter-input-filter"
+                      id="overview-namespace-select-filter-input-input"
                       type="text"
                       value=""
                     />
@@ -2773,7 +2776,8 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
                       class="gradient left"
                     />
                     <label
-                      for="overview-namespace-select-filter-input-filter"
+                      data-testid="namespace-select-filter-label"
+                      for="overview-namespace-select-filter-input-input"
                     >
                       Namespaces: 
                     </label>
@@ -3274,7 +3278,7 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
                   >
                     <input
                       data-testid="namespace-select-filter-input"
-                      id="overview-namespace-select-filter-input-filter"
+                      id="overview-namespace-select-filter-input-input"
                       type="text"
                       value=""
                     />
@@ -3282,7 +3286,8 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
                       class="gradient left"
                     />
                     <label
-                      for="overview-namespace-select-filter-input-filter"
+                      data-testid="namespace-select-filter-label"
+                      for="overview-namespace-select-filter-input-input"
                     >
                       Namespaces: 
                     </label>
diff --git a/packages/core/src/features/cluster/__snapshots__/sidebar-and-tab-navigation-for-extensions.test.tsx.snap b/packages/core/src/features/cluster/__snapshots__/sidebar-and-tab-navigation-for-extensions.test.tsx.snap
index 1f7d7bf3feec..e3490380a3c0 100644
--- a/packages/core/src/features/cluster/__snapshots__/sidebar-and-tab-navigation-for-extensions.test.tsx.snap
+++ b/packages/core/src/features/cluster/__snapshots__/sidebar-and-tab-navigation-for-extensions.test.tsx.snap
@@ -335,7 +335,7 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
                   >
                     <input
                       data-testid="namespace-select-filter-input"
-                      id="overview-namespace-select-filter-input-filter"
+                      id="overview-namespace-select-filter-input-input"
                       type="text"
                       value=""
                     />
@@ -343,7 +343,8 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
                       class="gradient left"
                     />
                     <label
-                      for="overview-namespace-select-filter-input-filter"
+                      data-testid="namespace-select-filter-label"
+                      for="overview-namespace-select-filter-input-input"
                     >
                       Namespaces: 
                     </label>
@@ -844,7 +845,7 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
                   >
                     <input
                       data-testid="namespace-select-filter-input"
-                      id="overview-namespace-select-filter-input-filter"
+                      id="overview-namespace-select-filter-input-input"
                       type="text"
                       value=""
                     />
@@ -852,7 +853,8 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
                       class="gradient left"
                     />
                     <label
-                      for="overview-namespace-select-filter-input-filter"
+                      data-testid="namespace-select-filter-label"
+                      for="overview-namespace-select-filter-input-input"
                     >
                       Namespaces: 
                     </label>
@@ -1389,7 +1391,7 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
                   >
                     <input
                       data-testid="namespace-select-filter-input"
-                      id="overview-namespace-select-filter-input-filter"
+                      id="overview-namespace-select-filter-input-input"
                       type="text"
                       value=""
                     />
@@ -1397,7 +1399,8 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
                       class="gradient left"
                     />
                     <label
-                      for="overview-namespace-select-filter-input-filter"
+                      data-testid="namespace-select-filter-label"
+                      for="overview-namespace-select-filter-input-input"
                     >
                       Namespaces: 
                     </label>
@@ -3394,7 +3397,7 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
                   >
                     <input
                       data-testid="namespace-select-filter-input"
-                      id="overview-namespace-select-filter-input-filter"
+                      id="overview-namespace-select-filter-input-input"
                       type="text"
                       value=""
                     />
@@ -3402,7 +3405,8 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
                       class="gradient left"
                     />
                     <label
-                      for="overview-namespace-select-filter-input-filter"
+                      data-testid="namespace-select-filter-label"
+                      for="overview-namespace-select-filter-input-input"
                     >
                       Namespaces: 
                     </label>
@@ -3903,7 +3907,7 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
                   >
                     <input
                       data-testid="namespace-select-filter-input"
-                      id="overview-namespace-select-filter-input-filter"
+                      id="overview-namespace-select-filter-input-input"
                       type="text"
                       value=""
                     />
@@ -3911,7 +3915,8 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
                       class="gradient left"
                     />
                     <label
-                      for="overview-namespace-select-filter-input-filter"
+                      data-testid="namespace-select-filter-label"
+                      for="overview-namespace-select-filter-input-input"
                     >
                       Namespaces: 
                     </label>
diff --git a/packages/core/src/features/cluster/__snapshots__/visibility-of-sidebar-items.test.tsx.snap b/packages/core/src/features/cluster/__snapshots__/visibility-of-sidebar-items.test.tsx.snap
index 95428c026a9e..9972010a42e7 100644
--- a/packages/core/src/features/cluster/__snapshots__/visibility-of-sidebar-items.test.tsx.snap
+++ b/packages/core/src/features/cluster/__snapshots__/visibility-of-sidebar-items.test.tsx.snap
@@ -306,7 +306,7 @@ exports[`cluster - visibility of sidebar items given kube resource for route is
                   >
                     <input
                       data-testid="namespace-select-filter-input"
-                      id="overview-namespace-select-filter-input-filter"
+                      id="overview-namespace-select-filter-input-input"
                       type="text"
                       value=""
                     />
@@ -314,7 +314,8 @@ exports[`cluster - visibility of sidebar items given kube resource for route is
                       class="gradient left"
                     />
                     <label
-                      for="overview-namespace-select-filter-input-filter"
+                      data-testid="namespace-select-filter-label"
+                      for="overview-namespace-select-filter-input-input"
                     >
                       Namespaces: 
                     </label>
@@ -826,7 +827,7 @@ exports[`cluster - visibility of sidebar items given kube resource for route is
                   >
                     <input
                       data-testid="namespace-select-filter-input"
-                      id="overview-namespace-select-filter-input-filter"
+                      id="overview-namespace-select-filter-input-input"
                       type="text"
                       value=""
                     />
@@ -834,7 +835,8 @@ exports[`cluster - visibility of sidebar items given kube resource for route is
                       class="gradient left"
                     />
                     <label
-                      for="overview-namespace-select-filter-input-filter"
+                      data-testid="namespace-select-filter-label"
+                      for="overview-namespace-select-filter-input-input"
                     >
                       Namespaces: 
                     </label>
diff --git a/packages/core/src/features/cluster/__snapshots__/workload-overview.test.tsx.snap b/packages/core/src/features/cluster/__snapshots__/workload-overview.test.tsx.snap
index 422d35b7167a..17280877e33c 100644
--- a/packages/core/src/features/cluster/__snapshots__/workload-overview.test.tsx.snap
+++ b/packages/core/src/features/cluster/__snapshots__/workload-overview.test.tsx.snap
@@ -320,7 +320,7 @@ exports[`workload overview when navigating to workload overview renders 1`] = `
                     >
                       <input
                         data-testid="namespace-select-filter-input"
-                        id="overview-namespace-select-filter-input-filter"
+                        id="overview-namespace-select-filter-input-input"
                         type="text"
                         value=""
                       />
@@ -328,7 +328,8 @@ exports[`workload overview when navigating to workload overview renders 1`] = `
                         class="gradient left"
                       />
                       <label
-                        for="overview-namespace-select-filter-input-filter"
+                        data-testid="namespace-select-filter-label"
+                        for="overview-namespace-select-filter-input-input"
                       >
                         Namespaces: 
                       </label>
diff --git a/packages/core/src/features/cluster/extension-api/__snapshots__/disable-cluster-pages-when-cluster-is-not-relevant.test.tsx.snap b/packages/core/src/features/cluster/extension-api/__snapshots__/disable-cluster-pages-when-cluster-is-not-relevant.test.tsx.snap
index 04e2307b3314..516098a9c4da 100644
--- a/packages/core/src/features/cluster/extension-api/__snapshots__/disable-cluster-pages-when-cluster-is-not-relevant.test.tsx.snap
+++ b/packages/core/src/features/cluster/extension-api/__snapshots__/disable-cluster-pages-when-cluster-is-not-relevant.test.tsx.snap
@@ -702,7 +702,7 @@ exports[`disable-cluster-pages-when-cluster-is-not-relevant given extension shou
                     >
                       <input
                         data-testid="namespace-select-filter-input"
-                        id="overview-namespace-select-filter-input-filter"
+                        id="overview-namespace-select-filter-input-input"
                         type="text"
                         value=""
                       />
@@ -710,7 +710,8 @@ exports[`disable-cluster-pages-when-cluster-is-not-relevant given extension shou
                         class="gradient left"
                       />
                       <label
-                        for="overview-namespace-select-filter-input-filter"
+                        data-testid="namespace-select-filter-label"
+                        for="overview-namespace-select-filter-input-input"
                       >
                         Namespaces: 
                       </label>
@@ -1184,7 +1185,7 @@ exports[`disable-cluster-pages-when-cluster-is-not-relevant given not yet known
                     >
                       <input
                         data-testid="namespace-select-filter-input"
-                        id="overview-namespace-select-filter-input-filter"
+                        id="overview-namespace-select-filter-input-input"
                         type="text"
                         value=""
                       />
@@ -1192,7 +1193,8 @@ exports[`disable-cluster-pages-when-cluster-is-not-relevant given not yet known
                         class="gradient left"
                       />
                       <label
-                        for="overview-namespace-select-filter-input-filter"
+                        data-testid="namespace-select-filter-label"
+                        for="overview-namespace-select-filter-input-input"
                       >
                         Namespaces: 
                       </label>
diff --git a/packages/core/src/features/cluster/extension-api/__snapshots__/disable-sidebar-items-when-cluster-is-not-relevant.test.tsx.snap b/packages/core/src/features/cluster/extension-api/__snapshots__/disable-sidebar-items-when-cluster-is-not-relevant.test.tsx.snap
index 3d34f6be8881..b6c81d4d7d28 100644
--- a/packages/core/src/features/cluster/extension-api/__snapshots__/disable-sidebar-items-when-cluster-is-not-relevant.test.tsx.snap
+++ b/packages/core/src/features/cluster/extension-api/__snapshots__/disable-sidebar-items-when-cluster-is-not-relevant.test.tsx.snap
@@ -325,7 +325,7 @@ exports[`disable sidebar items when cluster is not relevant given extension shou
                     >
                       <input
                         data-testid="namespace-select-filter-input"
-                        id="overview-namespace-select-filter-input-filter"
+                        id="overview-namespace-select-filter-input-input"
                         type="text"
                         value=""
                       />
@@ -333,7 +333,8 @@ exports[`disable sidebar items when cluster is not relevant given extension shou
                         class="gradient left"
                       />
                       <label
-                        for="overview-namespace-select-filter-input-filter"
+                        data-testid="namespace-select-filter-label"
+                        for="overview-namespace-select-filter-input-input"
                       >
                         Namespaces: 
                       </label>
@@ -807,7 +808,7 @@ exports[`disable sidebar items when cluster is not relevant given extension shou
                     >
                       <input
                         data-testid="namespace-select-filter-input"
-                        id="overview-namespace-select-filter-input-filter"
+                        id="overview-namespace-select-filter-input-input"
                         type="text"
                         value=""
                       />
@@ -815,7 +816,8 @@ exports[`disable sidebar items when cluster is not relevant given extension shou
                         class="gradient left"
                       />
                       <label
-                        for="overview-namespace-select-filter-input-filter"
+                        data-testid="namespace-select-filter-label"
+                        for="overview-namespace-select-filter-input-input"
                       >
                         Namespaces: 
                       </label>
@@ -1289,7 +1291,7 @@ exports[`disable sidebar items when cluster is not relevant given not yet known
                     >
                       <input
                         data-testid="namespace-select-filter-input"
-                        id="overview-namespace-select-filter-input-filter"
+                        id="overview-namespace-select-filter-input-input"
                         type="text"
                         value=""
                       />
@@ -1297,7 +1299,8 @@ exports[`disable sidebar items when cluster is not relevant given not yet known
                         class="gradient left"
                       />
                       <label
-                        for="overview-namespace-select-filter-input-filter"
+                        data-testid="namespace-select-filter-label"
+                        for="overview-namespace-select-filter-input-input"
                       >
                         Namespaces: 
                       </label>
diff --git a/packages/core/src/features/cluster/kube-object-details/extension-api/__snapshots__/disable-kube-object-detail-items-when-cluster-is-not-relevant.test.tsx.snap b/packages/core/src/features/cluster/kube-object-details/extension-api/__snapshots__/disable-kube-object-detail-items-when-cluster-is-not-relevant.test.tsx.snap
index a9d55b541616..6ed73c49b310 100644
--- a/packages/core/src/features/cluster/kube-object-details/extension-api/__snapshots__/disable-kube-object-detail-items-when-cluster-is-not-relevant.test.tsx.snap
+++ b/packages/core/src/features/cluster/kube-object-details/extension-api/__snapshots__/disable-kube-object-detail-items-when-cluster-is-not-relevant.test.tsx.snap
@@ -378,7 +378,7 @@ exports[`disable kube object detail items when cluster is not relevant given ext
                     >
                       <input
                         data-testid="namespace-select-filter-input"
-                        id="overview-namespace-select-filter-input-filter"
+                        id="overview-namespace-select-filter-input-input"
                         type="text"
                         value=""
                       />
@@ -386,7 +386,8 @@ exports[`disable kube object detail items when cluster is not relevant given ext
                         class="gradient left"
                       />
                       <label
-                        for="overview-namespace-select-filter-input-filter"
+                        data-testid="namespace-select-filter-label"
+                        for="overview-namespace-select-filter-input-input"
                       >
                         Namespaces: 
                       </label>
@@ -926,7 +927,7 @@ exports[`disable kube object detail items when cluster is not relevant given ext
                     >
                       <input
                         data-testid="namespace-select-filter-input"
-                        id="overview-namespace-select-filter-input-filter"
+                        id="overview-namespace-select-filter-input-input"
                         type="text"
                         value=""
                       />
@@ -934,7 +935,8 @@ exports[`disable kube object detail items when cluster is not relevant given ext
                         class="gradient left"
                       />
                       <label
-                        for="overview-namespace-select-filter-input-filter"
+                        data-testid="namespace-select-filter-label"
+                        for="overview-namespace-select-filter-input-input"
                       >
                         Namespaces: 
                       </label>
@@ -1474,7 +1476,7 @@ exports[`disable kube object detail items when cluster is not relevant given not
                     >
                       <input
                         data-testid="namespace-select-filter-input"
-                        id="overview-namespace-select-filter-input-filter"
+                        id="overview-namespace-select-filter-input-input"
                         type="text"
                         value=""
                       />
@@ -1482,7 +1484,8 @@ exports[`disable kube object detail items when cluster is not relevant given not
                         class="gradient left"
                       />
                       <label
-                        for="overview-namespace-select-filter-input-filter"
+                        data-testid="namespace-select-filter-label"
+                        for="overview-namespace-select-filter-input-input"
                       >
                         Namespaces: 
                       </label>
diff --git a/packages/core/src/features/cluster/kube-object-details/extension-api/__snapshots__/reactively-hide-kube-object-detail-item.test.tsx.snap b/packages/core/src/features/cluster/kube-object-details/extension-api/__snapshots__/reactively-hide-kube-object-detail-item.test.tsx.snap
index e9e3fc498d3c..311a2e839a65 100644
--- a/packages/core/src/features/cluster/kube-object-details/extension-api/__snapshots__/reactively-hide-kube-object-detail-item.test.tsx.snap
+++ b/packages/core/src/features/cluster/kube-object-details/extension-api/__snapshots__/reactively-hide-kube-object-detail-item.test.tsx.snap
@@ -373,7 +373,7 @@ exports[`reactively hide kube object detail item renders 1`] = `
                     >
                       <input
                         data-testid="namespace-select-filter-input"
-                        id="overview-namespace-select-filter-input-filter"
+                        id="overview-namespace-select-filter-input-input"
                         type="text"
                         value=""
                       />
@@ -381,7 +381,8 @@ exports[`reactively hide kube object detail item renders 1`] = `
                         class="gradient left"
                       />
                       <label
-                        for="overview-namespace-select-filter-input-filter"
+                        data-testid="namespace-select-filter-label"
+                        for="overview-namespace-select-filter-input-input"
                       >
                         Namespaces: 
                       </label>
@@ -926,7 +927,7 @@ exports[`reactively hide kube object detail item when the item is shown renders
                     >
                       <input
                         data-testid="namespace-select-filter-input"
-                        id="overview-namespace-select-filter-input-filter"
+                        id="overview-namespace-select-filter-input-input"
                         type="text"
                         value=""
                       />
@@ -934,7 +935,8 @@ exports[`reactively hide kube object detail item when the item is shown renders
                         class="gradient left"
                       />
                       <label
-                        for="overview-namespace-select-filter-input-filter"
+                        data-testid="namespace-select-filter-label"
+                        for="overview-namespace-select-filter-input-input"
                       >
                         Namespaces: 
                       </label>
diff --git a/packages/core/src/features/cluster/namespaces/__snapshots__/edit-namespace-from-previously-opened-tab.test.tsx.snap b/packages/core/src/features/cluster/namespaces/__snapshots__/edit-namespace-from-previously-opened-tab.test.tsx.snap
index 32da53b4c1b8..26bb97969ec3 100644
--- a/packages/core/src/features/cluster/namespaces/__snapshots__/edit-namespace-from-previously-opened-tab.test.tsx.snap
+++ b/packages/core/src/features/cluster/namespaces/__snapshots__/edit-namespace-from-previously-opened-tab.test.tsx.snap
@@ -332,7 +332,7 @@ exports[`cluster/namespaces - edit namespaces from previously opened tab given t
                     >
                       <input
                         data-testid="namespace-select-filter-input"
-                        id="overview-namespace-select-filter-input-filter"
+                        id="overview-namespace-select-filter-input-input"
                         type="text"
                         value=""
                       />
@@ -340,7 +340,8 @@ exports[`cluster/namespaces - edit namespaces from previously opened tab given t
                         class="gradient left"
                       />
                       <label
-                        for="overview-namespace-select-filter-input-filter"
+                        data-testid="namespace-select-filter-label"
+                        for="overview-namespace-select-filter-input-input"
                       >
                         Namespaces: 
                       </label>
@@ -849,7 +850,7 @@ exports[`cluster/namespaces - edit namespaces from previously opened tab given t
                     >
                       <input
                         data-testid="namespace-select-filter-input"
-                        id="overview-namespace-select-filter-input-filter"
+                        id="overview-namespace-select-filter-input-input"
                         type="text"
                         value=""
                       />
@@ -857,7 +858,8 @@ exports[`cluster/namespaces - edit namespaces from previously opened tab given t
                         class="gradient left"
                       />
                       <label
-                        for="overview-namespace-select-filter-input-filter"
+                        data-testid="namespace-select-filter-label"
+                        for="overview-namespace-select-filter-input-input"
                       >
                         Namespaces: 
                       </label>
diff --git a/packages/core/src/features/cluster/workloads/__snapshots__/pods.test.tsx.snap b/packages/core/src/features/cluster/workloads/__snapshots__/pods.test.tsx.snap
index cc9bedf85fe3..1447bfb3f6b3 100644
--- a/packages/core/src/features/cluster/workloads/__snapshots__/pods.test.tsx.snap
+++ b/packages/core/src/features/cluster/workloads/__snapshots__/pods.test.tsx.snap
@@ -324,7 +324,7 @@ exports[`workloads / pods when navigating to workloads / pods view given a names
                     >
                       <input
                         data-testid="namespace-select-filter-input"
-                        id="kube-object-list-layout-namespace-select-input-filter"
+                        id="kube-object-list-layout-namespace-select-input-input"
                         type="text"
                         value=""
                       />
@@ -332,7 +332,8 @@ exports[`workloads / pods when navigating to workloads / pods view given a names
                         class="gradient left"
                       />
                       <label
-                        for="kube-object-list-layout-namespace-select-input-filter"
+                        data-testid="namespace-select-filter-label"
+                        for="kube-object-list-layout-namespace-select-input-input"
                       >
                         Namespace: default
                       </label>
@@ -1195,7 +1196,7 @@ exports[`workloads / pods when navigating to workloads / pods view given no pods
                     >
                       <input
                         data-testid="namespace-select-filter-input"
-                        id="kube-object-list-layout-namespace-select-input-filter"
+                        id="kube-object-list-layout-namespace-select-input-input"
                         type="text"
                         value=""
                       />
@@ -1203,7 +1204,8 @@ exports[`workloads / pods when navigating to workloads / pods view given no pods
                         class="gradient left"
                       />
                       <label
-                        for="kube-object-list-layout-namespace-select-input-filter"
+                        data-testid="namespace-select-filter-label"
+                        for="kube-object-list-layout-namespace-select-input-input"
                       >
                         Namespace: default
                       </label>
@@ -1960,7 +1962,7 @@ exports[`workloads / pods when navigating to workloads / pods view given pods ar
                     >
                       <input
                         data-testid="namespace-select-filter-input"
-                        id="kube-object-list-layout-namespace-select-input-filter"
+                        id="kube-object-list-layout-namespace-select-input-input"
                         type="text"
                         value=""
                       />
@@ -1968,7 +1970,8 @@ exports[`workloads / pods when navigating to workloads / pods view given pods ar
                         class="gradient left"
                       />
                       <label
-                        for="kube-object-list-layout-namespace-select-input-filter"
+                        data-testid="namespace-select-filter-label"
+                        for="kube-object-list-layout-namespace-select-input-input"
                       >
                         Namespace: default
                       </label>
diff --git a/packages/core/src/features/cluster/workloads/overview/extension-api/__snapshots__/disable-workloads-overview-details-when-cluster-is-not-relevant.test.tsx.snap b/packages/core/src/features/cluster/workloads/overview/extension-api/__snapshots__/disable-workloads-overview-details-when-cluster-is-not-relevant.test.tsx.snap
index a09770f43489..01cbf04ca919 100644
--- a/packages/core/src/features/cluster/workloads/overview/extension-api/__snapshots__/disable-workloads-overview-details-when-cluster-is-not-relevant.test.tsx.snap
+++ b/packages/core/src/features/cluster/workloads/overview/extension-api/__snapshots__/disable-workloads-overview-details-when-cluster-is-not-relevant.test.tsx.snap
@@ -307,7 +307,7 @@ exports[`disable workloads overview details when cluster is not relevant given e
                     >
                       <input
                         data-testid="namespace-select-filter-input"
-                        id="overview-namespace-select-filter-input-filter"
+                        id="overview-namespace-select-filter-input-input"
                         type="text"
                         value=""
                       />
@@ -315,7 +315,8 @@ exports[`disable workloads overview details when cluster is not relevant given e
                         class="gradient left"
                       />
                       <label
-                        for="overview-namespace-select-filter-input-filter"
+                        data-testid="namespace-select-filter-label"
+                        for="overview-namespace-select-filter-input-input"
                       >
                         Namespaces: 
                       </label>
@@ -794,7 +795,7 @@ exports[`disable workloads overview details when cluster is not relevant given e
                     >
                       <input
                         data-testid="namespace-select-filter-input"
-                        id="overview-namespace-select-filter-input-filter"
+                        id="overview-namespace-select-filter-input-input"
                         type="text"
                         value=""
                       />
@@ -802,7 +803,8 @@ exports[`disable workloads overview details when cluster is not relevant given e
                         class="gradient left"
                       />
                       <label
-                        for="overview-namespace-select-filter-input-filter"
+                        data-testid="namespace-select-filter-label"
+                        for="overview-namespace-select-filter-input-input"
                       >
                         Namespaces: 
                       </label>
@@ -1276,7 +1278,7 @@ exports[`disable workloads overview details when cluster is not relevant given n
                     >
                       <input
                         data-testid="namespace-select-filter-input"
-                        id="overview-namespace-select-filter-input-filter"
+                        id="overview-namespace-select-filter-input-input"
                         type="text"
                         value=""
                       />
@@ -1284,7 +1286,8 @@ exports[`disable workloads overview details when cluster is not relevant given n
                         class="gradient left"
                       />
                       <label
-                        for="overview-namespace-select-filter-input-filter"
+                        data-testid="namespace-select-filter-label"
+                        for="overview-namespace-select-filter-input-input"
                       >
                         Namespaces: 
                       </label>
diff --git a/packages/core/src/features/helm-charts/installing-chart/__snapshots__/installing-helm-chart-from-new-tab.test.ts.snap b/packages/core/src/features/helm-charts/installing-chart/__snapshots__/installing-helm-chart-from-new-tab.test.ts.snap
index 58c699f745cd..258dec4e874f 100644
--- a/packages/core/src/features/helm-charts/installing-chart/__snapshots__/installing-helm-chart-from-new-tab.test.ts.snap
+++ b/packages/core/src/features/helm-charts/installing-chart/__snapshots__/installing-helm-chart-from-new-tab.test.ts.snap
@@ -307,7 +307,7 @@ exports[`installing helm chart from new tab given tab for installing chart was n
                     >
                       <input
                         data-testid="namespace-select-filter-input"
-                        id="overview-namespace-select-filter-input-filter"
+                        id="overview-namespace-select-filter-input-input"
                         type="text"
                         value=""
                       />
@@ -315,7 +315,8 @@ exports[`installing helm chart from new tab given tab for installing chart was n
                         class="gradient left"
                       />
                       <label
-                        for="overview-namespace-select-filter-input-filter"
+                        data-testid="namespace-select-filter-label"
+                        for="overview-namespace-select-filter-input-input"
                       >
                         Namespaces: default, some-other-namespace
                       </label>
@@ -10415,7 +10416,7 @@ exports[`installing helm chart from new tab given tab for installing chart was n
                     >
                       <input
                         data-testid="namespace-select-filter-input"
-                        id="namespace-select-filter-filter"
+                        id="namespace-select-filter-input"
                         type="text"
                         value=""
                       />
@@ -10423,7 +10424,8 @@ exports[`installing helm chart from new tab given tab for installing chart was n
                         class="gradient left"
                       />
                       <label
-                        for="namespace-select-filter-filter"
+                        data-testid="namespace-select-filter-label"
+                        for="namespace-select-filter-input"
                       >
                         Namespaces: default, some-other-namespace
                       </label>
diff --git a/packages/core/src/features/helm-charts/installing-chart/__snapshots__/installing-helm-chart-from-previously-opened-tab.test.ts.snap b/packages/core/src/features/helm-charts/installing-chart/__snapshots__/installing-helm-chart-from-previously-opened-tab.test.ts.snap
index 00dc4c51725a..2cbb17cce719 100644
--- a/packages/core/src/features/helm-charts/installing-chart/__snapshots__/installing-helm-chart-from-previously-opened-tab.test.ts.snap
+++ b/packages/core/src/features/helm-charts/installing-chart/__snapshots__/installing-helm-chart-from-previously-opened-tab.test.ts.snap
@@ -307,7 +307,7 @@ exports[`installing helm chart from previously opened tab given tab for installi
                     >
                       <input
                         data-testid="namespace-select-filter-input"
-                        id="overview-namespace-select-filter-input-filter"
+                        id="overview-namespace-select-filter-input-input"
                         type="text"
                         value=""
                       />
@@ -315,7 +315,8 @@ exports[`installing helm chart from previously opened tab given tab for installi
                         class="gradient left"
                       />
                       <label
-                        for="overview-namespace-select-filter-input-filter"
+                        data-testid="namespace-select-filter-label"
+                        for="overview-namespace-select-filter-input-input"
                       >
                         Namespaces: default, some-other-namespace
                       </label>
@@ -799,7 +800,7 @@ exports[`installing helm chart from previously opened tab given tab for installi
                     >
                       <input
                         data-testid="namespace-select-filter-input"
-                        id="overview-namespace-select-filter-input-filter"
+                        id="overview-namespace-select-filter-input-input"
                         type="text"
                         value=""
                       />
@@ -807,7 +808,8 @@ exports[`installing helm chart from previously opened tab given tab for installi
                         class="gradient left"
                       />
                       <label
-                        for="overview-namespace-select-filter-input-filter"
+                        data-testid="namespace-select-filter-label"
+                        for="overview-namespace-select-filter-input-input"
                       >
                         Namespaces: default, some-other-namespace
                       </label>
diff --git a/packages/core/src/features/helm-charts/upgrade-chart/__snapshots__/upgrade-chart-new-tab.test.ts.snap b/packages/core/src/features/helm-charts/upgrade-chart/__snapshots__/upgrade-chart-new-tab.test.ts.snap
index f12108a078a9..49d7c61295cf 100644
--- a/packages/core/src/features/helm-charts/upgrade-chart/__snapshots__/upgrade-chart-new-tab.test.ts.snap
+++ b/packages/core/src/features/helm-charts/upgrade-chart/__snapshots__/upgrade-chart-new-tab.test.ts.snap
@@ -324,7 +324,7 @@ exports[`New Upgrade Helm Chart Dock Tab given a namespace is selected when navi
                     >
                       <input
                         data-testid="namespace-select-filter-input"
-                        id="namespace-select-filter-filter"
+                        id="namespace-select-filter-input"
                         type="text"
                         value=""
                       />
@@ -332,7 +332,8 @@ exports[`New Upgrade Helm Chart Dock Tab given a namespace is selected when navi
                         class="gradient left"
                       />
                       <label
-                        for="namespace-select-filter-filter"
+                        data-testid="namespace-select-filter-label"
+                        for="namespace-select-filter-input"
                       >
                         Namespace: my-second-namespace
                       </label>
@@ -956,7 +957,7 @@ exports[`New Upgrade Helm Chart Dock Tab given a namespace is selected when navi
                     >
                       <input
                         data-testid="namespace-select-filter-input"
-                        id="namespace-select-filter-filter"
+                        id="namespace-select-filter-input"
                         type="text"
                         value=""
                       />
@@ -964,7 +965,8 @@ exports[`New Upgrade Helm Chart Dock Tab given a namespace is selected when navi
                         class="gradient left"
                       />
                       <label
-                        for="namespace-select-filter-filter"
+                        data-testid="namespace-select-filter-label"
+                        for="namespace-select-filter-input"
                       >
                         Namespace: my-second-namespace
                       </label>
@@ -1691,7 +1693,7 @@ exports[`New Upgrade Helm Chart Dock Tab given a namespace is selected when navi
                     >
                       <input
                         data-testid="namespace-select-filter-input"
-                        id="namespace-select-filter-filter"
+                        id="namespace-select-filter-input"
                         type="text"
                         value=""
                       />
@@ -1699,7 +1701,8 @@ exports[`New Upgrade Helm Chart Dock Tab given a namespace is selected when navi
                         class="gradient left"
                       />
                       <label
-                        for="namespace-select-filter-filter"
+                        data-testid="namespace-select-filter-label"
+                        for="namespace-select-filter-input"
                       >
                         Namespace: my-second-namespace
                       </label>
@@ -2442,7 +2445,7 @@ exports[`New Upgrade Helm Chart Dock Tab given a namespace is selected when navi
                     >
                       <input
                         data-testid="namespace-select-filter-input"
-                        id="namespace-select-filter-filter"
+                        id="namespace-select-filter-input"
                         type="text"
                         value=""
                       />
@@ -2450,7 +2453,8 @@ exports[`New Upgrade Helm Chart Dock Tab given a namespace is selected when navi
                         class="gradient left"
                       />
                       <label
-                        for="namespace-select-filter-filter"
+                        data-testid="namespace-select-filter-label"
+                        for="namespace-select-filter-input"
                       >
                         Namespace: my-second-namespace
                       </label>
@@ -3229,7 +3233,7 @@ exports[`New Upgrade Helm Chart Dock Tab given a namespace is selected when navi
                     >
                       <input
                         data-testid="namespace-select-filter-input"
-                        id="namespace-select-filter-filter"
+                        id="namespace-select-filter-input"
                         type="text"
                         value=""
                       />
@@ -3237,7 +3241,8 @@ exports[`New Upgrade Helm Chart Dock Tab given a namespace is selected when navi
                         class="gradient left"
                       />
                       <label
-                        for="namespace-select-filter-filter"
+                        data-testid="namespace-select-filter-label"
+                        for="namespace-select-filter-input"
                       >
                         Namespace: my-second-namespace
                       </label>
@@ -4156,7 +4161,7 @@ exports[`New Upgrade Helm Chart Dock Tab given a namespace is selected when navi
                     >
                       <input
                         data-testid="namespace-select-filter-input"
-                        id="namespace-select-filter-filter"
+                        id="namespace-select-filter-input"
                         type="text"
                         value=""
                       />
@@ -4164,7 +4169,8 @@ exports[`New Upgrade Helm Chart Dock Tab given a namespace is selected when navi
                         class="gradient left"
                       />
                       <label
-                        for="namespace-select-filter-filter"
+                        data-testid="namespace-select-filter-label"
+                        for="namespace-select-filter-input"
                       >
                         Namespace: my-second-namespace
                       </label>
@@ -5085,7 +5091,7 @@ exports[`New Upgrade Helm Chart Dock Tab given a namespace is selected when navi
                     >
                       <input
                         data-testid="namespace-select-filter-input"
-                        id="namespace-select-filter-filter"
+                        id="namespace-select-filter-input"
                         type="text"
                         value=""
                       />
@@ -5093,7 +5099,8 @@ exports[`New Upgrade Helm Chart Dock Tab given a namespace is selected when navi
                         class="gradient left"
                       />
                       <label
-                        for="namespace-select-filter-filter"
+                        data-testid="namespace-select-filter-label"
+                        for="namespace-select-filter-input"
                       >
                         Namespace: my-second-namespace
                       </label>
diff --git a/packages/core/src/features/helm-releases/__snapshots__/showing-details-for-helm-release.test.ts.snap b/packages/core/src/features/helm-releases/__snapshots__/showing-details-for-helm-release.test.ts.snap
index df337a4eb82a..941969e97953 100644
--- a/packages/core/src/features/helm-releases/__snapshots__/showing-details-for-helm-release.test.ts.snap
+++ b/packages/core/src/features/helm-releases/__snapshots__/showing-details-for-helm-release.test.ts.snap
@@ -324,7 +324,7 @@ exports[`showing details for helm release given application is started when navi
                     >
                       <input
                         data-testid="namespace-select-filter-input"
-                        id="namespace-select-filter-filter"
+                        id="namespace-select-filter-input"
                         type="text"
                         value=""
                       />
@@ -332,7 +332,8 @@ exports[`showing details for helm release given application is started when navi
                         class="gradient left"
                       />
                       <label
-                        for="namespace-select-filter-filter"
+                        data-testid="namespace-select-filter-label"
+                        for="namespace-select-filter-input"
                       >
                         Namespaces: some-namespace, some-other-namespace
                       </label>
@@ -1037,7 +1038,7 @@ exports[`showing details for helm release given application is started when navi
                     >
                       <input
                         data-testid="namespace-select-filter-input"
-                        id="namespace-select-filter-filter"
+                        id="namespace-select-filter-input"
                         type="text"
                         value=""
                       />
@@ -1045,7 +1046,8 @@ exports[`showing details for helm release given application is started when navi
                         class="gradient left"
                       />
                       <label
-                        for="namespace-select-filter-filter"
+                        data-testid="namespace-select-filter-label"
+                        for="namespace-select-filter-input"
                       >
                         Namespaces: some-namespace, some-other-namespace
                       </label>
@@ -1755,7 +1757,7 @@ exports[`showing details for helm release given application is started when navi
                     >
                       <input
                         data-testid="namespace-select-filter-input"
-                        id="namespace-select-filter-filter"
+                        id="namespace-select-filter-input"
                         type="text"
                         value=""
                       />
@@ -1763,7 +1765,8 @@ exports[`showing details for helm release given application is started when navi
                         class="gradient left"
                       />
                       <label
-                        for="namespace-select-filter-filter"
+                        data-testid="namespace-select-filter-label"
+                        for="namespace-select-filter-input"
                       >
                         Namespaces: some-namespace, some-other-namespace
                       </label>
@@ -2663,7 +2666,7 @@ exports[`showing details for helm release given application is started when navi
                     >
                       <input
                         data-testid="namespace-select-filter-input"
-                        id="namespace-select-filter-filter"
+                        id="namespace-select-filter-input"
                         type="text"
                         value=""
                       />
@@ -2671,7 +2674,8 @@ exports[`showing details for helm release given application is started when navi
                         class="gradient left"
                       />
                       <label
-                        for="namespace-select-filter-filter"
+                        data-testid="namespace-select-filter-label"
+                        for="namespace-select-filter-input"
                       >
                         Namespaces: some-namespace, some-other-namespace
                       </label>
@@ -3632,7 +3636,7 @@ exports[`showing details for helm release given application is started when navi
                     >
                       <input
                         data-testid="namespace-select-filter-input"
-                        id="namespace-select-filter-filter"
+                        id="namespace-select-filter-input"
                         type="text"
                         value=""
                       />
@@ -3640,7 +3644,8 @@ exports[`showing details for helm release given application is started when navi
                         class="gradient left"
                       />
                       <label
-                        for="namespace-select-filter-filter"
+                        data-testid="namespace-select-filter-label"
+                        for="namespace-select-filter-input"
                       >
                         Namespaces: some-namespace, some-other-namespace
                       </label>
@@ -4601,7 +4606,7 @@ exports[`showing details for helm release given application is started when navi
                     >
                       <input
                         data-testid="namespace-select-filter-input"
-                        id="namespace-select-filter-filter"
+                        id="namespace-select-filter-input"
                         type="text"
                         value=""
                       />
@@ -4609,7 +4614,8 @@ exports[`showing details for helm release given application is started when navi
                         class="gradient left"
                       />
                       <label
-                        for="namespace-select-filter-filter"
+                        data-testid="namespace-select-filter-label"
+                        for="namespace-select-filter-input"
                       >
                         Namespaces: some-namespace, some-other-namespace
                       </label>
@@ -5815,7 +5821,7 @@ exports[`showing details for helm release given application is started when navi
                     >
                       <input
                         data-testid="namespace-select-filter-input"
-                        id="namespace-select-filter-filter"
+                        id="namespace-select-filter-input"
                         type="text"
                         value=""
                       />
@@ -5823,7 +5829,8 @@ exports[`showing details for helm release given application is started when navi
                         class="gradient left"
                       />
                       <label
-                        for="namespace-select-filter-filter"
+                        data-testid="namespace-select-filter-label"
+                        for="namespace-select-filter-input"
                       >
                         Namespaces: some-namespace, some-other-namespace
                       </label>
@@ -7029,7 +7036,7 @@ exports[`showing details for helm release given application is started when navi
                     >
                       <input
                         data-testid="namespace-select-filter-input"
-                        id="namespace-select-filter-filter"
+                        id="namespace-select-filter-input"
                         type="text"
                         value=""
                       />
@@ -7037,7 +7044,8 @@ exports[`showing details for helm release given application is started when navi
                         class="gradient left"
                       />
                       <label
-                        for="namespace-select-filter-filter"
+                        data-testid="namespace-select-filter-label"
+                        for="namespace-select-filter-input"
                       >
                         Namespaces: some-namespace, some-other-namespace
                       </label>
@@ -8243,7 +8251,7 @@ exports[`showing details for helm release given application is started when navi
                     >
                       <input
                         data-testid="namespace-select-filter-input"
-                        id="namespace-select-filter-filter"
+                        id="namespace-select-filter-input"
                         type="text"
                         value=""
                       />
@@ -8251,7 +8259,8 @@ exports[`showing details for helm release given application is started when navi
                         class="gradient left"
                       />
                       <label
-                        for="namespace-select-filter-filter"
+                        data-testid="namespace-select-filter-label"
+                        for="namespace-select-filter-input"
                       >
                         Namespaces: some-namespace, some-other-namespace
                       </label>
@@ -9262,7 +9271,7 @@ exports[`showing details for helm release given application is started when navi
                     >
                       <input
                         data-testid="namespace-select-filter-input"
-                        id="namespace-select-filter-filter"
+                        id="namespace-select-filter-input"
                         type="text"
                         value=""
                       />
@@ -9270,7 +9279,8 @@ exports[`showing details for helm release given application is started when navi
                         class="gradient left"
                       />
                       <label
-                        for="namespace-select-filter-filter"
+                        data-testid="namespace-select-filter-label"
+                        for="namespace-select-filter-input"
                       >
                         Namespaces: some-namespace, some-other-namespace
                       </label>
@@ -10283,7 +10293,7 @@ exports[`showing details for helm release given application is started when navi
                     >
                       <input
                         data-testid="namespace-select-filter-input"
-                        id="namespace-select-filter-filter"
+                        id="namespace-select-filter-input"
                         type="text"
                         value=""
                       />
@@ -10291,7 +10301,8 @@ exports[`showing details for helm release given application is started when navi
                         class="gradient left"
                       />
                       <label
-                        for="namespace-select-filter-filter"
+                        data-testid="namespace-select-filter-label"
+                        for="namespace-select-filter-input"
                       >
                         Namespaces: some-namespace, some-other-namespace
                       </label>
@@ -11497,7 +11508,7 @@ exports[`showing details for helm release given application is started when navi
                     >
                       <input
                         data-testid="namespace-select-filter-input"
-                        id="namespace-select-filter-filter"
+                        id="namespace-select-filter-input"
                         type="text"
                         value=""
                       />
@@ -11505,7 +11516,8 @@ exports[`showing details for helm release given application is started when navi
                         class="gradient left"
                       />
                       <label
-                        for="namespace-select-filter-filter"
+                        data-testid="namespace-select-filter-label"
+                        for="namespace-select-filter-input"
                       >
                         Namespaces: some-namespace, some-other-namespace
                       </label>
@@ -12466,7 +12478,7 @@ exports[`showing details for helm release given application is started when navi
                     >
                       <input
                         data-testid="namespace-select-filter-input"
-                        id="namespace-select-filter-filter"
+                        id="namespace-select-filter-input"
                         type="text"
                         value=""
                       />
@@ -12474,7 +12486,8 @@ exports[`showing details for helm release given application is started when navi
                         class="gradient left"
                       />
                       <label
-                        for="namespace-select-filter-filter"
+                        data-testid="namespace-select-filter-label"
+                        for="namespace-select-filter-input"
                       >
                         Namespaces: some-namespace, some-other-namespace
                       </label>
@@ -13438,7 +13451,7 @@ exports[`showing details for helm release given application is started when navi
                     >
                       <input
                         data-testid="namespace-select-filter-input"
-                        id="namespace-select-filter-filter"
+                        id="namespace-select-filter-input"
                         type="text"
                         value=""
                       />
@@ -13446,7 +13459,8 @@ exports[`showing details for helm release given application is started when navi
                         class="gradient left"
                       />
                       <label
-                        for="namespace-select-filter-filter"
+                        data-testid="namespace-select-filter-label"
+                        for="namespace-select-filter-input"
                       >
                         Namespaces: some-namespace, some-other-namespace
                       </label>
@@ -14346,7 +14360,7 @@ exports[`showing details for helm release given application is started when navi
                     >
                       <input
                         data-testid="namespace-select-filter-input"
-                        id="namespace-select-filter-filter"
+                        id="namespace-select-filter-input"
                         type="text"
                         value=""
                       />
@@ -14354,7 +14368,8 @@ exports[`showing details for helm release given application is started when navi
                         class="gradient left"
                       />
                       <label
-                        for="namespace-select-filter-filter"
+                        data-testid="namespace-select-filter-label"
+                        for="namespace-select-filter-input"
                       >
                         Namespaces: some-namespace, some-other-namespace
                       </label>
@@ -15315,7 +15330,7 @@ exports[`showing details for helm release given application is started when navi
                     >
                       <input
                         data-testid="namespace-select-filter-input"
-                        id="namespace-select-filter-filter"
+                        id="namespace-select-filter-input"
                         type="text"
                         value=""
                       />
@@ -15323,7 +15338,8 @@ exports[`showing details for helm release given application is started when navi
                         class="gradient left"
                       />
                       <label
-                        for="namespace-select-filter-filter"
+                        data-testid="namespace-select-filter-label"
+                        for="namespace-select-filter-input"
                       >
                         Namespaces: some-namespace, some-other-namespace
                       </label>
@@ -16284,7 +16300,7 @@ exports[`showing details for helm release given application is started when navi
                     >
                       <input
                         data-testid="namespace-select-filter-input"
-                        id="namespace-select-filter-filter"
+                        id="namespace-select-filter-input"
                         type="text"
                         value=""
                       />
@@ -16292,7 +16308,8 @@ exports[`showing details for helm release given application is started when navi
                         class="gradient left"
                       />
                       <label
-                        for="namespace-select-filter-filter"
+                        data-testid="namespace-select-filter-label"
+                        for="namespace-select-filter-input"
                       >
                         Namespaces: some-namespace, some-other-namespace
                       </label>
@@ -17253,7 +17270,7 @@ exports[`showing details for helm release given application is started when navi
                     >
                       <input
                         data-testid="namespace-select-filter-input"
-                        id="namespace-select-filter-filter"
+                        id="namespace-select-filter-input"
                         type="text"
                         value=""
                       />
@@ -17261,7 +17278,8 @@ exports[`showing details for helm release given application is started when navi
                         class="gradient left"
                       />
                       <label
-                        for="namespace-select-filter-filter"
+                        data-testid="namespace-select-filter-label"
+                        for="namespace-select-filter-input"
                       >
                         Namespaces: some-namespace, some-other-namespace
                       </label>
diff --git a/packages/core/src/features/pod-logs/__snapshots__/download-logs.test.tsx.snap b/packages/core/src/features/pod-logs/__snapshots__/download-logs.test.tsx.snap
index f616293a6dff..187610ae6c28 100644
--- a/packages/core/src/features/pod-logs/__snapshots__/download-logs.test.tsx.snap
+++ b/packages/core/src/features/pod-logs/__snapshots__/download-logs.test.tsx.snap
@@ -307,7 +307,7 @@ exports[`download logs options in logs dock tab opening pod logs when logs avail
                     >
                       <input
                         data-testid="namespace-select-filter-input"
-                        id="overview-namespace-select-filter-input-filter"
+                        id="overview-namespace-select-filter-input-input"
                         type="text"
                         value=""
                       />
@@ -315,7 +315,8 @@ exports[`download logs options in logs dock tab opening pod logs when logs avail
                         class="gradient left"
                       />
                       <label
-                        for="overview-namespace-select-filter-input-filter"
+                        data-testid="namespace-select-filter-label"
+                        for="overview-namespace-select-filter-input-input"
                       >
                         Namespaces: 
                       </label>
@@ -1132,7 +1133,7 @@ exports[`download logs options in logs dock tab opening pod logs when logs not a
                     >
                       <input
                         data-testid="namespace-select-filter-input"
-                        id="overview-namespace-select-filter-input-filter"
+                        id="overview-namespace-select-filter-input-input"
                         type="text"
                         value=""
                       />
@@ -1140,7 +1141,8 @@ exports[`download logs options in logs dock tab opening pod logs when logs not a
                         class="gradient left"
                       />
                       <label
-                        for="overview-namespace-select-filter-input-filter"
+                        data-testid="namespace-select-filter-label"
+                        for="overview-namespace-select-filter-input-input"
                       >
                         Namespaces: 
                       </label>
diff --git a/packages/core/src/renderer/components/kube-object-list-layout/__snapshots__/kube-object-list-layout.test.tsx.snap b/packages/core/src/renderer/components/kube-object-list-layout/__snapshots__/kube-object-list-layout.test.tsx.snap
index 1c36192d90e8..aed75cccc456 100644
--- a/packages/core/src/renderer/components/kube-object-list-layout/__snapshots__/kube-object-list-layout.test.tsx.snap
+++ b/packages/core/src/renderer/components/kube-object-list-layout/__snapshots__/kube-object-list-layout.test.tsx.snap
@@ -34,7 +34,7 @@ exports[`kube-object-list-layout given pod store renders 1`] = `
               >
                 <input
                   data-testid="namespace-select-filter-input"
-                  id="kube-object-list-layout-namespace-select-input-filter"
+                  id="kube-object-list-layout-namespace-select-input-input"
                   type="text"
                   value=""
                 />
@@ -42,7 +42,8 @@ exports[`kube-object-list-layout given pod store renders 1`] = `
                   class="gradient left"
                 />
                 <label
-                  for="kube-object-list-layout-namespace-select-input-filter"
+                  data-testid="namespace-select-filter-label"
+                  for="kube-object-list-layout-namespace-select-input-input"
                 >
                   All namespaces
                 </label>
diff --git a/packages/core/src/renderer/frames/cluster-frame/__snapshots__/cluster-frame.test.tsx.snap b/packages/core/src/renderer/frames/cluster-frame/__snapshots__/cluster-frame.test.tsx.snap
index 9dce45f1df07..b589c1b5ddfc 100644
--- a/packages/core/src/renderer/frames/cluster-frame/__snapshots__/cluster-frame.test.tsx.snap
+++ b/packages/core/src/renderer/frames/cluster-frame/__snapshots__/cluster-frame.test.tsx.snap
@@ -1336,7 +1336,7 @@ exports[`<ClusterFrame /> given cluster without list nodes, but with namespaces
                   >
                     <input
                       data-testid="namespace-select-filter-input"
-                      id="overview-namespace-select-filter-input-filter"
+                      id="overview-namespace-select-filter-input-input"
                       type="text"
                       value=""
                     />
@@ -1344,7 +1344,8 @@ exports[`<ClusterFrame /> given cluster without list nodes, but with namespaces
                       class="gradient left"
                     />
                     <label
-                      for="overview-namespace-select-filter-input-filter"
+                      data-testid="namespace-select-filter-label"
+                      for="overview-namespace-select-filter-input-input"
                     >
                       All namespaces
                     </label>

From 6d3342e789ad955394c02a709a771907098b55bf Mon Sep 17 00:00:00 2001
From: Sebastian Malton <sebastian@malton.name>
Date: Thu, 1 Jun 2023 09:43:54 -0400
Subject: [PATCH 16/16] chore: Update custom-resources-in-sidebar snapshots

Signed-off-by: Sebastian Malton <sebastian@malton.name>
---
 .../custom-resources-in-sidebar.test.tsx.snap | 784 ++++++------------
 1 file changed, 256 insertions(+), 528 deletions(-)

diff --git a/packages/core/src/features/cluster/__snapshots__/custom-resources-in-sidebar.test.tsx.snap b/packages/core/src/features/cluster/__snapshots__/custom-resources-in-sidebar.test.tsx.snap
index fb6f87ae7c51..74303d3ab114 100644
--- a/packages/core/src/features/cluster/__snapshots__/custom-resources-in-sidebar.test.tsx.snap
+++ b/packages/core/src/features/cluster/__snapshots__/custom-resources-in-sidebar.test.tsx.snap
@@ -293,82 +293,48 @@ exports[`cluster - custom resources in sidebar renders 1`] = `
                 Overview
               </h5>
               <div
-                class="NamespaceSelectFilterParent"
+                class="namespace-select-filter"
                 data-testid="namespace-select-filter"
+                id="overview-namespace-select-filter-input"
+                tabindex="1"
               >
                 <div
-                  class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
+                  class="menu"
                 >
-                  <span
-                    class="css-1f43avz-a11yText-A11yText"
-                    id="react-select-overview-namespace-select-filter-input-live-region"
-                  />
-                  <span
-                    aria-atomic="false"
-                    aria-live="polite"
-                    aria-relevant="additions text"
-                    class="css-1f43avz-a11yText-A11yText"
-                  />
                   <div
-                    class="Select__control css-13cymwt-control"
+                    class="non-icon"
                   >
+                    <input
+                      data-testid="namespace-select-filter-input"
+                      id="overview-namespace-select-filter-input-input"
+                      type="text"
+                      value=""
+                    />
                     <div
-                      class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer"
+                      class="gradient left"
+                    />
+                    <label
+                      data-testid="namespace-select-filter-label"
+                      for="overview-namespace-select-filter-input-input"
                     >
-                      <div
-                        class="Select__placeholder css-1jqq78o-placeholder"
-                        id="react-select-overview-namespace-select-filter-input-placeholder"
-                      >
-                        All namespaces
-                      </div>
-                      <div
-                        class="Select__input-container css-qbdosj-Input"
-                        data-value=""
-                      >
-                        <input
-                          aria-autocomplete="list"
-                          aria-describedby="react-select-overview-namespace-select-filter-input-placeholder"
-                          aria-expanded="false"
-                          aria-haspopup="true"
-                          autocapitalize="none"
-                          autocomplete="off"
-                          autocorrect="off"
-                          class="Select__input"
-                          id="overview-namespace-select-filter-input"
-                          role="combobox"
-                          spellcheck="false"
-                          style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
-                          tabindex="0"
-                          type="text"
-                          value=""
-                        />
-                      </div>
-                    </div>
+                      Namespaces: 
+                    </label>
                     <div
-                      class="Select__indicators css-1hb7zxy-IndicatorsContainer"
-                    >
-                      <span
-                        class="Select__indicator-separator css-1u9des2-indicatorSeparator"
-                      />
-                      <div
-                        aria-hidden="true"
-                        class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="css-tj5bde-Svg"
-                          focusable="false"
-                          height="20"
-                          viewBox="0 0 20 20"
-                          width="20"
-                        >
-                          <path
-                            d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                          />
-                        </svg>
-                      </div>
-                    </div>
+                      class="gradient right"
+                    />
                   </div>
+                  <i
+                    class="Icon expand-icon material interactive focusable"
+                    data-testid="namespace-select-filter-expand-icon"
+                    tabindex="0"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="expand_more"
+                    >
+                      expand_more
+                    </span>
+                  </i>
                 </div>
               </div>
             </div>
@@ -844,82 +810,48 @@ exports[`cluster - custom resources in sidebar when custom resource definitions
                 Overview
               </h5>
               <div
-                class="NamespaceSelectFilterParent"
+                class="namespace-select-filter"
                 data-testid="namespace-select-filter"
+                id="overview-namespace-select-filter-input"
+                tabindex="1"
               >
                 <div
-                  class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
+                  class="menu"
                 >
-                  <span
-                    class="css-1f43avz-a11yText-A11yText"
-                    id="react-select-overview-namespace-select-filter-input-live-region"
-                  />
-                  <span
-                    aria-atomic="false"
-                    aria-live="polite"
-                    aria-relevant="additions text"
-                    class="css-1f43avz-a11yText-A11yText"
-                  />
                   <div
-                    class="Select__control css-13cymwt-control"
+                    class="non-icon"
                   >
+                    <input
+                      data-testid="namespace-select-filter-input"
+                      id="overview-namespace-select-filter-input-input"
+                      type="text"
+                      value=""
+                    />
                     <div
-                      class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer"
+                      class="gradient left"
+                    />
+                    <label
+                      data-testid="namespace-select-filter-label"
+                      for="overview-namespace-select-filter-input-input"
                     >
-                      <div
-                        class="Select__placeholder css-1jqq78o-placeholder"
-                        id="react-select-overview-namespace-select-filter-input-placeholder"
-                      >
-                        All namespaces
-                      </div>
-                      <div
-                        class="Select__input-container css-qbdosj-Input"
-                        data-value=""
-                      >
-                        <input
-                          aria-autocomplete="list"
-                          aria-describedby="react-select-overview-namespace-select-filter-input-placeholder"
-                          aria-expanded="false"
-                          aria-haspopup="true"
-                          autocapitalize="none"
-                          autocomplete="off"
-                          autocorrect="off"
-                          class="Select__input"
-                          id="overview-namespace-select-filter-input"
-                          role="combobox"
-                          spellcheck="false"
-                          style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
-                          tabindex="0"
-                          type="text"
-                          value=""
-                        />
-                      </div>
-                    </div>
+                      Namespaces: 
+                    </label>
                     <div
-                      class="Select__indicators css-1hb7zxy-IndicatorsContainer"
-                    >
-                      <span
-                        class="Select__indicator-separator css-1u9des2-indicatorSeparator"
-                      />
-                      <div
-                        aria-hidden="true"
-                        class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="css-tj5bde-Svg"
-                          focusable="false"
-                          height="20"
-                          viewBox="0 0 20 20"
-                          width="20"
-                        >
-                          <path
-                            d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                          />
-                        </svg>
-                      </div>
-                    </div>
+                      class="gradient right"
+                    />
                   </div>
+                  <i
+                    class="Icon expand-icon material interactive focusable"
+                    data-testid="namespace-select-filter-expand-icon"
+                    tabindex="0"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="expand_more"
+                    >
+                      expand_more
+                    </span>
+                  </i>
                 </div>
               </div>
             </div>
@@ -1359,82 +1291,48 @@ exports[`cluster - custom resources in sidebar when custom resource exists rende
                 Overview
               </h5>
               <div
-                class="NamespaceSelectFilterParent"
+                class="namespace-select-filter"
                 data-testid="namespace-select-filter"
+                id="overview-namespace-select-filter-input"
+                tabindex="1"
               >
                 <div
-                  class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
+                  class="menu"
                 >
-                  <span
-                    class="css-1f43avz-a11yText-A11yText"
-                    id="react-select-overview-namespace-select-filter-input-live-region"
-                  />
-                  <span
-                    aria-atomic="false"
-                    aria-live="polite"
-                    aria-relevant="additions text"
-                    class="css-1f43avz-a11yText-A11yText"
-                  />
                   <div
-                    class="Select__control css-13cymwt-control"
+                    class="non-icon"
                   >
+                    <input
+                      data-testid="namespace-select-filter-input"
+                      id="overview-namespace-select-filter-input-input"
+                      type="text"
+                      value=""
+                    />
                     <div
-                      class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer"
+                      class="gradient left"
+                    />
+                    <label
+                      data-testid="namespace-select-filter-label"
+                      for="overview-namespace-select-filter-input-input"
                     >
-                      <div
-                        class="Select__placeholder css-1jqq78o-placeholder"
-                        id="react-select-overview-namespace-select-filter-input-placeholder"
-                      >
-                        All namespaces
-                      </div>
-                      <div
-                        class="Select__input-container css-qbdosj-Input"
-                        data-value=""
-                      >
-                        <input
-                          aria-autocomplete="list"
-                          aria-describedby="react-select-overview-namespace-select-filter-input-placeholder"
-                          aria-expanded="false"
-                          aria-haspopup="true"
-                          autocapitalize="none"
-                          autocomplete="off"
-                          autocorrect="off"
-                          class="Select__input"
-                          id="overview-namespace-select-filter-input"
-                          role="combobox"
-                          spellcheck="false"
-                          style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
-                          tabindex="0"
-                          type="text"
-                          value=""
-                        />
-                      </div>
-                    </div>
+                      Namespaces: 
+                    </label>
                     <div
-                      class="Select__indicators css-1hb7zxy-IndicatorsContainer"
-                    >
-                      <span
-                        class="Select__indicator-separator css-1u9des2-indicatorSeparator"
-                      />
-                      <div
-                        aria-hidden="true"
-                        class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="css-tj5bde-Svg"
-                          focusable="false"
-                          height="20"
-                          viewBox="0 0 20 20"
-                          width="20"
-                        >
-                          <path
-                            d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                          />
-                        </svg>
-                      </div>
-                    </div>
+                      class="gradient right"
+                    />
                   </div>
+                  <i
+                    class="Icon expand-icon material interactive focusable"
+                    data-testid="namespace-select-filter-expand-icon"
+                    tabindex="0"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="expand_more"
+                    >
+                      expand_more
+                    </span>
+                  </i>
                 </div>
               </div>
             </div>
@@ -1910,82 +1808,48 @@ exports[`cluster - custom resources in sidebar when custom resource exists when
                 Overview
               </h5>
               <div
-                class="NamespaceSelectFilterParent"
+                class="namespace-select-filter"
                 data-testid="namespace-select-filter"
+                id="overview-namespace-select-filter-input"
+                tabindex="1"
               >
                 <div
-                  class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
+                  class="menu"
                 >
-                  <span
-                    class="css-1f43avz-a11yText-A11yText"
-                    id="react-select-overview-namespace-select-filter-input-live-region"
-                  />
-                  <span
-                    aria-atomic="false"
-                    aria-live="polite"
-                    aria-relevant="additions text"
-                    class="css-1f43avz-a11yText-A11yText"
-                  />
                   <div
-                    class="Select__control css-13cymwt-control"
+                    class="non-icon"
                   >
+                    <input
+                      data-testid="namespace-select-filter-input"
+                      id="overview-namespace-select-filter-input-input"
+                      type="text"
+                      value=""
+                    />
                     <div
-                      class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer"
+                      class="gradient left"
+                    />
+                    <label
+                      data-testid="namespace-select-filter-label"
+                      for="overview-namespace-select-filter-input-input"
                     >
-                      <div
-                        class="Select__placeholder css-1jqq78o-placeholder"
-                        id="react-select-overview-namespace-select-filter-input-placeholder"
-                      >
-                        All namespaces
-                      </div>
-                      <div
-                        class="Select__input-container css-qbdosj-Input"
-                        data-value=""
-                      >
-                        <input
-                          aria-autocomplete="list"
-                          aria-describedby="react-select-overview-namespace-select-filter-input-placeholder"
-                          aria-expanded="false"
-                          aria-haspopup="true"
-                          autocapitalize="none"
-                          autocomplete="off"
-                          autocorrect="off"
-                          class="Select__input"
-                          id="overview-namespace-select-filter-input"
-                          role="combobox"
-                          spellcheck="false"
-                          style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
-                          tabindex="0"
-                          type="text"
-                          value=""
-                        />
-                      </div>
-                    </div>
+                      Namespaces: 
+                    </label>
                     <div
-                      class="Select__indicators css-1hb7zxy-IndicatorsContainer"
-                    >
-                      <span
-                        class="Select__indicator-separator css-1u9des2-indicatorSeparator"
-                      />
-                      <div
-                        aria-hidden="true"
-                        class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="css-tj5bde-Svg"
-                          focusable="false"
-                          height="20"
-                          viewBox="0 0 20 20"
-                          width="20"
-                        >
-                          <path
-                            d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                          />
-                        </svg>
-                      </div>
-                    </div>
+                      class="gradient right"
+                    />
                   </div>
+                  <i
+                    class="Icon expand-icon material interactive focusable"
+                    data-testid="namespace-select-filter-expand-icon"
+                    tabindex="0"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="expand_more"
+                    >
+                      expand_more
+                    </span>
+                  </i>
                 </div>
               </div>
             </div>
@@ -2481,82 +2345,48 @@ exports[`cluster - custom resources in sidebar when custom resource exists when
                 Overview
               </h5>
               <div
-                class="NamespaceSelectFilterParent"
+                class="namespace-select-filter"
                 data-testid="namespace-select-filter"
+                id="overview-namespace-select-filter-input"
+                tabindex="1"
               >
                 <div
-                  class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
+                  class="menu"
                 >
-                  <span
-                    class="css-1f43avz-a11yText-A11yText"
-                    id="react-select-overview-namespace-select-filter-input-live-region"
-                  />
-                  <span
-                    aria-atomic="false"
-                    aria-live="polite"
-                    aria-relevant="additions text"
-                    class="css-1f43avz-a11yText-A11yText"
-                  />
                   <div
-                    class="Select__control css-13cymwt-control"
+                    class="non-icon"
                   >
+                    <input
+                      data-testid="namespace-select-filter-input"
+                      id="overview-namespace-select-filter-input-input"
+                      type="text"
+                      value=""
+                    />
                     <div
-                      class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer"
+                      class="gradient left"
+                    />
+                    <label
+                      data-testid="namespace-select-filter-label"
+                      for="overview-namespace-select-filter-input-input"
                     >
-                      <div
-                        class="Select__placeholder css-1jqq78o-placeholder"
-                        id="react-select-overview-namespace-select-filter-input-placeholder"
-                      >
-                        All namespaces
-                      </div>
-                      <div
-                        class="Select__input-container css-qbdosj-Input"
-                        data-value=""
-                      >
-                        <input
-                          aria-autocomplete="list"
-                          aria-describedby="react-select-overview-namespace-select-filter-input-placeholder"
-                          aria-expanded="false"
-                          aria-haspopup="true"
-                          autocapitalize="none"
-                          autocomplete="off"
-                          autocorrect="off"
-                          class="Select__input"
-                          id="overview-namespace-select-filter-input"
-                          role="combobox"
-                          spellcheck="false"
-                          style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
-                          tabindex="0"
-                          type="text"
-                          value=""
-                        />
-                      </div>
-                    </div>
+                      Namespaces: 
+                    </label>
                     <div
-                      class="Select__indicators css-1hb7zxy-IndicatorsContainer"
-                    >
-                      <span
-                        class="Select__indicator-separator css-1u9des2-indicatorSeparator"
-                      />
-                      <div
-                        aria-hidden="true"
-                        class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="css-tj5bde-Svg"
-                          focusable="false"
-                          height="20"
-                          viewBox="0 0 20 20"
-                          width="20"
-                        >
-                          <path
-                            d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                          />
-                        </svg>
-                      </div>
-                    </div>
+                      class="gradient right"
+                    />
                   </div>
+                  <i
+                    class="Icon expand-icon material interactive focusable"
+                    data-testid="namespace-select-filter-expand-icon"
+                    tabindex="0"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="expand_more"
+                    >
+                      expand_more
+                    </span>
+                  </i>
                 </div>
               </div>
             </div>
@@ -3032,82 +2862,48 @@ exports[`cluster - custom resources in sidebar when custom resource exists when
                 Overview
               </h5>
               <div
-                class="NamespaceSelectFilterParent"
+                class="namespace-select-filter"
                 data-testid="namespace-select-filter"
+                id="overview-namespace-select-filter-input"
+                tabindex="1"
               >
                 <div
-                  class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
+                  class="menu"
                 >
-                  <span
-                    class="css-1f43avz-a11yText-A11yText"
-                    id="react-select-overview-namespace-select-filter-input-live-region"
-                  />
-                  <span
-                    aria-atomic="false"
-                    aria-live="polite"
-                    aria-relevant="additions text"
-                    class="css-1f43avz-a11yText-A11yText"
-                  />
                   <div
-                    class="Select__control css-13cymwt-control"
+                    class="non-icon"
                   >
+                    <input
+                      data-testid="namespace-select-filter-input"
+                      id="overview-namespace-select-filter-input-input"
+                      type="text"
+                      value=""
+                    />
                     <div
-                      class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer"
+                      class="gradient left"
+                    />
+                    <label
+                      data-testid="namespace-select-filter-label"
+                      for="overview-namespace-select-filter-input-input"
                     >
-                      <div
-                        class="Select__placeholder css-1jqq78o-placeholder"
-                        id="react-select-overview-namespace-select-filter-input-placeholder"
-                      >
-                        All namespaces
-                      </div>
-                      <div
-                        class="Select__input-container css-qbdosj-Input"
-                        data-value=""
-                      >
-                        <input
-                          aria-autocomplete="list"
-                          aria-describedby="react-select-overview-namespace-select-filter-input-placeholder"
-                          aria-expanded="false"
-                          aria-haspopup="true"
-                          autocapitalize="none"
-                          autocomplete="off"
-                          autocorrect="off"
-                          class="Select__input"
-                          id="overview-namespace-select-filter-input"
-                          role="combobox"
-                          spellcheck="false"
-                          style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
-                          tabindex="0"
-                          type="text"
-                          value=""
-                        />
-                      </div>
-                    </div>
+                      Namespaces: 
+                    </label>
                     <div
-                      class="Select__indicators css-1hb7zxy-IndicatorsContainer"
-                    >
-                      <span
-                        class="Select__indicator-separator css-1u9des2-indicatorSeparator"
-                      />
-                      <div
-                        aria-hidden="true"
-                        class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="css-tj5bde-Svg"
-                          focusable="false"
-                          height="20"
-                          viewBox="0 0 20 20"
-                          width="20"
-                        >
-                          <path
-                            d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                          />
-                        </svg>
-                      </div>
-                    </div>
+                      class="gradient right"
+                    />
                   </div>
+                  <i
+                    class="Icon expand-icon material interactive focusable"
+                    data-testid="namespace-select-filter-expand-icon"
+                    tabindex="0"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="expand_more"
+                    >
+                      expand_more
+                    </span>
+                  </i>
                 </div>
               </div>
             </div>
@@ -3614,82 +3410,48 @@ exports[`cluster - custom resources in sidebar when custom resource exists when
                 Overview
               </h5>
               <div
-                class="NamespaceSelectFilterParent"
+                class="namespace-select-filter"
                 data-testid="namespace-select-filter"
+                id="overview-namespace-select-filter-input"
+                tabindex="1"
               >
                 <div
-                  class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
+                  class="menu"
                 >
-                  <span
-                    class="css-1f43avz-a11yText-A11yText"
-                    id="react-select-overview-namespace-select-filter-input-live-region"
-                  />
-                  <span
-                    aria-atomic="false"
-                    aria-live="polite"
-                    aria-relevant="additions text"
-                    class="css-1f43avz-a11yText-A11yText"
-                  />
                   <div
-                    class="Select__control css-13cymwt-control"
+                    class="non-icon"
                   >
+                    <input
+                      data-testid="namespace-select-filter-input"
+                      id="overview-namespace-select-filter-input-input"
+                      type="text"
+                      value=""
+                    />
                     <div
-                      class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer"
+                      class="gradient left"
+                    />
+                    <label
+                      data-testid="namespace-select-filter-label"
+                      for="overview-namespace-select-filter-input-input"
                     >
-                      <div
-                        class="Select__placeholder css-1jqq78o-placeholder"
-                        id="react-select-overview-namespace-select-filter-input-placeholder"
-                      >
-                        All namespaces
-                      </div>
-                      <div
-                        class="Select__input-container css-qbdosj-Input"
-                        data-value=""
-                      >
-                        <input
-                          aria-autocomplete="list"
-                          aria-describedby="react-select-overview-namespace-select-filter-input-placeholder"
-                          aria-expanded="false"
-                          aria-haspopup="true"
-                          autocapitalize="none"
-                          autocomplete="off"
-                          autocorrect="off"
-                          class="Select__input"
-                          id="overview-namespace-select-filter-input"
-                          role="combobox"
-                          spellcheck="false"
-                          style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
-                          tabindex="0"
-                          type="text"
-                          value=""
-                        />
-                      </div>
-                    </div>
+                      Namespaces: 
+                    </label>
                     <div
-                      class="Select__indicators css-1hb7zxy-IndicatorsContainer"
-                    >
-                      <span
-                        class="Select__indicator-separator css-1u9des2-indicatorSeparator"
-                      />
-                      <div
-                        aria-hidden="true"
-                        class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="css-tj5bde-Svg"
-                          focusable="false"
-                          height="20"
-                          viewBox="0 0 20 20"
-                          width="20"
-                        >
-                          <path
-                            d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                          />
-                        </svg>
-                      </div>
-                    </div>
+                      class="gradient right"
+                    />
                   </div>
+                  <i
+                    class="Icon expand-icon material interactive focusable"
+                    data-testid="namespace-select-filter-expand-icon"
+                    tabindex="0"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="expand_more"
+                    >
+                      expand_more
+                    </span>
+                  </i>
                 </div>
               </div>
             </div>
@@ -4216,82 +3978,48 @@ exports[`cluster - custom resources in sidebar when custom resource exists when
                 Overview
               </h5>
               <div
-                class="NamespaceSelectFilterParent"
+                class="namespace-select-filter"
                 data-testid="namespace-select-filter"
+                id="overview-namespace-select-filter-input"
+                tabindex="1"
               >
                 <div
-                  class="Select theme-dark NamespaceSelect NamespaceSelectFilter css-b62m3t-container"
+                  class="menu"
                 >
-                  <span
-                    class="css-1f43avz-a11yText-A11yText"
-                    id="react-select-overview-namespace-select-filter-input-live-region"
-                  />
-                  <span
-                    aria-atomic="false"
-                    aria-live="polite"
-                    aria-relevant="additions text"
-                    class="css-1f43avz-a11yText-A11yText"
-                  />
                   <div
-                    class="Select__control css-13cymwt-control"
+                    class="non-icon"
                   >
+                    <input
+                      data-testid="namespace-select-filter-input"
+                      id="overview-namespace-select-filter-input-input"
+                      type="text"
+                      value=""
+                    />
                     <div
-                      class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer"
+                      class="gradient left"
+                    />
+                    <label
+                      data-testid="namespace-select-filter-label"
+                      for="overview-namespace-select-filter-input-input"
                     >
-                      <div
-                        class="Select__placeholder css-1jqq78o-placeholder"
-                        id="react-select-overview-namespace-select-filter-input-placeholder"
-                      >
-                        All namespaces
-                      </div>
-                      <div
-                        class="Select__input-container css-qbdosj-Input"
-                        data-value=""
-                      >
-                        <input
-                          aria-autocomplete="list"
-                          aria-describedby="react-select-overview-namespace-select-filter-input-placeholder"
-                          aria-expanded="false"
-                          aria-haspopup="true"
-                          autocapitalize="none"
-                          autocomplete="off"
-                          autocorrect="off"
-                          class="Select__input"
-                          id="overview-namespace-select-filter-input"
-                          role="combobox"
-                          spellcheck="false"
-                          style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
-                          tabindex="0"
-                          type="text"
-                          value=""
-                        />
-                      </div>
-                    </div>
+                      Namespaces: 
+                    </label>
                     <div
-                      class="Select__indicators css-1hb7zxy-IndicatorsContainer"
-                    >
-                      <span
-                        class="Select__indicator-separator css-1u9des2-indicatorSeparator"
-                      />
-                      <div
-                        aria-hidden="true"
-                        class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="css-tj5bde-Svg"
-                          focusable="false"
-                          height="20"
-                          viewBox="0 0 20 20"
-                          width="20"
-                        >
-                          <path
-                            d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                          />
-                        </svg>
-                      </div>
-                    </div>
+                      class="gradient right"
+                    />
                   </div>
+                  <i
+                    class="Icon expand-icon material interactive focusable"
+                    data-testid="namespace-select-filter-expand-icon"
+                    tabindex="0"
+                  >
+                    <span
+                      class="icon"
+                      data-icon-name="expand_more"
+                    >
+                      expand_more
+                    </span>
+                  </i>
                 </div>
               </div>
             </div>