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] 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 b4d72bb7eb..a7a0c15d66 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 2bc1114e12..fba7de3d30 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 7594de276f..ba0338bbd1 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 9260063cd6..65c15a4ff1 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", () => {