mirror of
https://github.com/lensapp/lens.git
synced 2025-05-20 05:10:56 +00:00
feat: Add support for using 'Enter' to quickly switch to a filtered namespace
Signed-off-by: Sebastian Malton <sebastian@malton.name>
This commit is contained in:
Sebastian Malton
parent
72a48417e4
commit
adc4d400bb
@ -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>
|
||||
|
||||
@ -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" />
|
||||
|
||||
@ -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();
|
||||
|
||||
@ -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", () => {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user