hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Merge 6d3342e789 into f1a960fd78

Browse Source
This commit is contained in:
Sebastian Malton 2023-08-09 16:04:10 +00:00 committed by GitHub
commit 51dc862921
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
43 changed files with 10495 additions and 7219 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
open-lens/integration/__tests__/cluster-pages.tests.ts
View File

@ -106,14 +106,13 @@ describeIf(minikubeReady(TEST_NAMESPACE))("Minikube based tests", () => {
await navigateToPods(frame); await navigateToPods(frame);
const namespacesSelector = await frame.waitForSelector( const namespacesSelector = await frame.waitForSelector(".namespace-select-filter .menu .non-icon label");
".NamespaceSelect",
);
await namespacesSelector.click(); await namespacesSelector.click();
await namespacesSelector.type(TEST_NAMESPACE); await namespacesSelector.type(TEST_NAMESPACE);
await namespacesSelector.press("Enter"); await frame.page().keyboard.press("Tab", { delay: 10 });
await namespacesSelector.click(); await frame.page().keyboard.press("Tab", { delay: 10 });
await frame.page().keyboard.press("Enter", { delay: 10 });
await frame.click(".Icon.new-dock-tab"); await frame.click(".Icon.new-dock-tab");

2
packages/core/src/extensions/renderer-api/components.ts
View File

@ -97,7 +97,7 @@ export * from "../../renderer/components/stepper";
export * from "../../renderer/components/wizard"; export * from "../../renderer/components/wizard";
export * from "../../renderer/components/workloads-pods/pod-details-list"; export * from "../../renderer/components/workloads-pods/pod-details-list";
export * from "../../renderer/components/namespaces/namespace-select"; export * from "../../renderer/components/namespaces/namespace-select";
export * from "../../renderer/components/namespaces/namespace-select-filter"; export * from "../../renderer/components/namespace-select-filter/component";
export * from "../../renderer/components/layout/sub-title"; export * from "../../renderer/components/layout/sub-title";
export * from "../../renderer/components/input/search-input"; export * from "../../renderer/components/input/search-input";
export * from "../../renderer/components/chart/bar-chart"; export * from "../../renderer/components/chart/bar-chart";

720
packages/core/src/features/cluster/__snapshots__/custom-resources-in-sidebar.test.tsx.snap
View File

@ -293,82 +293,48 @@ exports[`cluster - custom resources in sidebar renders 1`] = `
Overview Overview
</h5> </h5>
<div <div
class="NamespaceSelectFilterParent" class="namespace-select-filter"
data-testid="namespace-select-filter" data-testid="namespace-select-filter"
id="overview-namespace-select-filter-input"
tabindex="1"
> >
<div <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"
> >
<div <div
class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer" class="non-icon"
>
<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 <input
aria-autocomplete="list" data-testid="namespace-select-filter-input"
aria-describedby="react-select-overview-namespace-select-filter-input-placeholder" id="overview-namespace-select-filter-input-input"
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" type="text"
value="" value=""
/> />
</div>
</div>
<div <div
class="Select__indicators css-1hb7zxy-IndicatorsContainer" class="gradient left"
/>
<label
data-testid="namespace-select-filter-label"
for="overview-namespace-select-filter-input-input"
>
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 <span
class="Select__indicator-separator css-1u9des2-indicatorSeparator" class="icon"
/> data-icon-name="expand_more"
<div
aria-hidden="true"
class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
> >
<svg expand_more
aria-hidden="true" </span>
class="css-tj5bde-Svg" </i>
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>
</div> </div>
@ -844,82 +810,48 @@ exports[`cluster - custom resources in sidebar when custom resource definitions
Overview Overview
</h5> </h5>
<div <div
class="NamespaceSelectFilterParent" class="namespace-select-filter"
data-testid="namespace-select-filter" data-testid="namespace-select-filter"
id="overview-namespace-select-filter-input"
tabindex="1"
> >
<div <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"
> >
<div <div
class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer" class="non-icon"
>
<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 <input
aria-autocomplete="list" data-testid="namespace-select-filter-input"
aria-describedby="react-select-overview-namespace-select-filter-input-placeholder" id="overview-namespace-select-filter-input-input"
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" type="text"
value="" value=""
/> />
</div>
</div>
<div <div
class="Select__indicators css-1hb7zxy-IndicatorsContainer" class="gradient left"
/>
<label
data-testid="namespace-select-filter-label"
for="overview-namespace-select-filter-input-input"
>
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 <span
class="Select__indicator-separator css-1u9des2-indicatorSeparator" class="icon"
/> data-icon-name="expand_more"
<div
aria-hidden="true"
class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
> >
<svg expand_more
aria-hidden="true" </span>
class="css-tj5bde-Svg" </i>
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>
</div> </div>
@ -1359,82 +1291,48 @@ exports[`cluster - custom resources in sidebar when custom resource exists rende
Overview Overview
</h5> </h5>
<div <div
class="NamespaceSelectFilterParent" class="namespace-select-filter"
data-testid="namespace-select-filter" data-testid="namespace-select-filter"
id="overview-namespace-select-filter-input"
tabindex="1"
> >
<div <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"
> >
<div <div
class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer" class="non-icon"
>
<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 <input
aria-autocomplete="list" data-testid="namespace-select-filter-input"
aria-describedby="react-select-overview-namespace-select-filter-input-placeholder" id="overview-namespace-select-filter-input-input"
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" type="text"
value="" value=""
/> />
</div>
</div>
<div <div
class="Select__indicators css-1hb7zxy-IndicatorsContainer" class="gradient left"
/>
<label
data-testid="namespace-select-filter-label"
for="overview-namespace-select-filter-input-input"
>
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 <span
class="Select__indicator-separator css-1u9des2-indicatorSeparator" class="icon"
/> data-icon-name="expand_more"
<div
aria-hidden="true"
class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
> >
<svg expand_more
aria-hidden="true" </span>
class="css-tj5bde-Svg" </i>
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>
</div> </div>
@ -1910,82 +1808,48 @@ exports[`cluster - custom resources in sidebar when custom resource exists when
Overview Overview
</h5> </h5>
<div <div
class="NamespaceSelectFilterParent" class="namespace-select-filter"
data-testid="namespace-select-filter" data-testid="namespace-select-filter"
id="overview-namespace-select-filter-input"
tabindex="1"
> >
<div <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"
> >
<div <div
class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer" class="non-icon"
>
<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 <input
aria-autocomplete="list" data-testid="namespace-select-filter-input"
aria-describedby="react-select-overview-namespace-select-filter-input-placeholder" id="overview-namespace-select-filter-input-input"
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" type="text"
value="" value=""
/> />
</div>
</div>
<div <div
class="Select__indicators css-1hb7zxy-IndicatorsContainer" class="gradient left"
/>
<label
data-testid="namespace-select-filter-label"
for="overview-namespace-select-filter-input-input"
>
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 <span
class="Select__indicator-separator css-1u9des2-indicatorSeparator" class="icon"
/> data-icon-name="expand_more"
<div
aria-hidden="true"
class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
> >
<svg expand_more
aria-hidden="true" </span>
class="css-tj5bde-Svg" </i>
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>
</div> </div>
@ -2481,82 +2345,48 @@ exports[`cluster - custom resources in sidebar when custom resource exists when
Overview Overview
</h5> </h5>
<div <div
class="NamespaceSelectFilterParent" class="namespace-select-filter"
data-testid="namespace-select-filter" data-testid="namespace-select-filter"
id="overview-namespace-select-filter-input"
tabindex="1"
> >
<div <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"
> >
<div <div
class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer" class="non-icon"
>
<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 <input
aria-autocomplete="list" data-testid="namespace-select-filter-input"
aria-describedby="react-select-overview-namespace-select-filter-input-placeholder" id="overview-namespace-select-filter-input-input"
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" type="text"
value="" value=""
/> />
</div>
</div>
<div <div
class="Select__indicators css-1hb7zxy-IndicatorsContainer" class="gradient left"
/>
<label
data-testid="namespace-select-filter-label"
for="overview-namespace-select-filter-input-input"
>
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 <span
class="Select__indicator-separator css-1u9des2-indicatorSeparator" class="icon"
/> data-icon-name="expand_more"
<div
aria-hidden="true"
class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
> >
<svg expand_more
aria-hidden="true" </span>
class="css-tj5bde-Svg" </i>
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>
</div> </div>
@ -3032,82 +2862,48 @@ exports[`cluster - custom resources in sidebar when custom resource exists when
Overview Overview
</h5> </h5>
<div <div
class="NamespaceSelectFilterParent" class="namespace-select-filter"
data-testid="namespace-select-filter" data-testid="namespace-select-filter"
id="overview-namespace-select-filter-input"
tabindex="1"
> >
<div <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"
> >
<div <div
class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer" class="non-icon"
>
<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 <input
aria-autocomplete="list" data-testid="namespace-select-filter-input"
aria-describedby="react-select-overview-namespace-select-filter-input-placeholder" id="overview-namespace-select-filter-input-input"
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" type="text"
value="" value=""
/> />
</div>
</div>
<div <div
class="Select__indicators css-1hb7zxy-IndicatorsContainer" class="gradient left"
/>
<label
data-testid="namespace-select-filter-label"
for="overview-namespace-select-filter-input-input"
>
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 <span
class="Select__indicator-separator css-1u9des2-indicatorSeparator" class="icon"
/> data-icon-name="expand_more"
<div
aria-hidden="true"
class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
> >
<svg expand_more
aria-hidden="true" </span>
class="css-tj5bde-Svg" </i>
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>
</div> </div>
@ -3614,82 +3410,48 @@ exports[`cluster - custom resources in sidebar when custom resource exists when
Overview Overview
</h5> </h5>
<div <div
class="NamespaceSelectFilterParent" class="namespace-select-filter"
data-testid="namespace-select-filter" data-testid="namespace-select-filter"
id="overview-namespace-select-filter-input"
tabindex="1"
> >
<div <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"
> >
<div <div
class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer" class="non-icon"
>
<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 <input
aria-autocomplete="list" data-testid="namespace-select-filter-input"
aria-describedby="react-select-overview-namespace-select-filter-input-placeholder" id="overview-namespace-select-filter-input-input"
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" type="text"
value="" value=""
/> />
</div>
</div>
<div <div
class="Select__indicators css-1hb7zxy-IndicatorsContainer" class="gradient left"
/>
<label
data-testid="namespace-select-filter-label"
for="overview-namespace-select-filter-input-input"
>
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 <span
class="Select__indicator-separator css-1u9des2-indicatorSeparator" class="icon"
/> data-icon-name="expand_more"
<div
aria-hidden="true"
class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
> >
<svg expand_more
aria-hidden="true" </span>
class="css-tj5bde-Svg" </i>
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>
</div> </div>
@ -4216,82 +3978,48 @@ exports[`cluster - custom resources in sidebar when custom resource exists when
Overview Overview
</h5> </h5>
<div <div
class="NamespaceSelectFilterParent" class="namespace-select-filter"
data-testid="namespace-select-filter" data-testid="namespace-select-filter"
id="overview-namespace-select-filter-input"
tabindex="1"
> >
<div <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"
> >
<div <div
class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer" class="non-icon"
>
<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 <input
aria-autocomplete="list" data-testid="namespace-select-filter-input"
aria-describedby="react-select-overview-namespace-select-filter-input-placeholder" id="overview-namespace-select-filter-input-input"
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" type="text"
value="" value=""
/> />
</div>
</div>
<div <div
class="Select__indicators css-1hb7zxy-IndicatorsContainer" class="gradient left"
/>
<label
data-testid="namespace-select-filter-label"
for="overview-namespace-select-filter-input-input"
>
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 <span
class="Select__indicator-separator css-1u9des2-indicatorSeparator" class="icon"
/> data-icon-name="expand_more"
<div
aria-hidden="true"
class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
> >
<svg expand_more
aria-hidden="true" </span>
class="css-tj5bde-Svg" </i>
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>
</div> </div>

90
packages/core/src/features/cluster/__snapshots__/legacy-extension-adding-cluster-frame-components.test.tsx.snap
View File

@ -293,82 +293,48 @@ exports[`legacy extension adding cluster frame components given custom component
Overview Overview
</h5> </h5>
<div <div
class="NamespaceSelectFilterParent" class="namespace-select-filter"
data-testid="namespace-select-filter" data-testid="namespace-select-filter"
id="overview-namespace-select-filter-input"
tabindex="1"
> >
<div <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"
> >
<div <div
class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer" class="non-icon"
>
<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 <input
aria-autocomplete="list" data-testid="namespace-select-filter-input"
aria-describedby="react-select-overview-namespace-select-filter-input-placeholder" id="overview-namespace-select-filter-input-input"
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" type="text"
value="" value=""
/> />
</div>
</div>
<div <div
class="Select__indicators css-1hb7zxy-IndicatorsContainer" class="gradient left"
/>
<label
data-testid="namespace-select-filter-label"
for="overview-namespace-select-filter-input-input"
>
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 <span
class="Select__indicator-separator css-1u9des2-indicatorSeparator" class="icon"
/> data-icon-name="expand_more"
<div
aria-hidden="true"
class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
> >
<svg expand_more
aria-hidden="true" </span>
class="css-tj5bde-Svg" </i>
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>
</div> </div>

450
packages/core/src/features/cluster/__snapshots__/sidebar-and-tab-navigation-for-core.test.tsx.snap
View File

@ -322,82 +322,48 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
Overview Overview
</h5> </h5>
<div <div
class="NamespaceSelectFilterParent" class="namespace-select-filter"
data-testid="namespace-select-filter" data-testid="namespace-select-filter"
id="overview-namespace-select-filter-input"
tabindex="1"
> >
<div <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"
> >
<div <div
class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer" class="non-icon"
>
<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 <input
aria-autocomplete="list" data-testid="namespace-select-filter-input"
aria-describedby="react-select-overview-namespace-select-filter-input-placeholder" id="overview-namespace-select-filter-input-input"
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" type="text"
value="" value=""
/> />
</div>
</div>
<div <div
class="Select__indicators css-1hb7zxy-IndicatorsContainer" class="gradient left"
/>
<label
data-testid="namespace-select-filter-label"
for="overview-namespace-select-filter-input-input"
>
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 <span
class="Select__indicator-separator css-1u9des2-indicatorSeparator" class="icon"
/> data-icon-name="expand_more"
<div
aria-hidden="true"
class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
> >
<svg expand_more
aria-hidden="true" </span>
class="css-tj5bde-Svg" </i>
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>
</div> </div>
@ -866,82 +832,48 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
Overview Overview
</h5> </h5>
<div <div
class="NamespaceSelectFilterParent" class="namespace-select-filter"
data-testid="namespace-select-filter" data-testid="namespace-select-filter"
id="overview-namespace-select-filter-input"
tabindex="1"
> >
<div <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"
> >
<div <div
class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer" class="non-icon"
>
<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 <input
aria-autocomplete="list" data-testid="namespace-select-filter-input"
aria-describedby="react-select-overview-namespace-select-filter-input-placeholder" id="overview-namespace-select-filter-input-input"
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" type="text"
value="" value=""
/> />
</div>
</div>
<div <div
class="Select__indicators css-1hb7zxy-IndicatorsContainer" class="gradient left"
/>
<label
data-testid="namespace-select-filter-label"
for="overview-namespace-select-filter-input-input"
>
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 <span
class="Select__indicator-separator css-1u9des2-indicatorSeparator" class="icon"
/> data-icon-name="expand_more"
<div
aria-hidden="true"
class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
> >
<svg expand_more
aria-hidden="true" </span>
class="css-tj5bde-Svg" </i>
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>
</div> </div>
@ -1430,82 +1362,48 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
Overview Overview
</h5> </h5>
<div <div
class="NamespaceSelectFilterParent" class="namespace-select-filter"
data-testid="namespace-select-filter" data-testid="namespace-select-filter"
id="overview-namespace-select-filter-input"
tabindex="1"
> >
<div <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"
> >
<div <div
class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer" class="non-icon"
>
<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 <input
aria-autocomplete="list" data-testid="namespace-select-filter-input"
aria-describedby="react-select-overview-namespace-select-filter-input-placeholder" id="overview-namespace-select-filter-input-input"
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" type="text"
value="" value=""
/> />
</div>
</div>
<div <div
class="Select__indicators css-1hb7zxy-IndicatorsContainer" class="gradient left"
/>
<label
data-testid="namespace-select-filter-label"
for="overview-namespace-select-filter-input-input"
>
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 <span
class="Select__indicator-separator css-1u9des2-indicatorSeparator" class="icon"
/> data-icon-name="expand_more"
<div
aria-hidden="true"
class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
> >
<svg expand_more
aria-hidden="true" </span>
class="css-tj5bde-Svg" </i>
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>
</div> </div>
@ -2857,82 +2755,48 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
Overview Overview
</h5> </h5>
<div <div
class="NamespaceSelectFilterParent" class="namespace-select-filter"
data-testid="namespace-select-filter" data-testid="namespace-select-filter"
id="overview-namespace-select-filter-input"
tabindex="1"
> >
<div <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"
> >
<div <div
class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer" class="non-icon"
>
<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 <input
aria-autocomplete="list" data-testid="namespace-select-filter-input"
aria-describedby="react-select-overview-namespace-select-filter-input-placeholder" id="overview-namespace-select-filter-input-input"
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" type="text"
value="" value=""
/> />
</div>
</div>
<div <div
class="Select__indicators css-1hb7zxy-IndicatorsContainer" class="gradient left"
/>
<label
data-testid="namespace-select-filter-label"
for="overview-namespace-select-filter-input-input"
>
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 <span
class="Select__indicator-separator css-1u9des2-indicatorSeparator" class="icon"
/> data-icon-name="expand_more"
<div
aria-hidden="true"
class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
> >
<svg expand_more
aria-hidden="true" </span>
class="css-tj5bde-Svg" </i>
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>
</div> </div>
@ -3401,82 +3265,48 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
Overview Overview
</h5> </h5>
<div <div
class="NamespaceSelectFilterParent" class="namespace-select-filter"
data-testid="namespace-select-filter" data-testid="namespace-select-filter"
id="overview-namespace-select-filter-input"
tabindex="1"
> >
<div <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"
> >
<div <div
class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer" class="non-icon"
>
<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 <input
aria-autocomplete="list" data-testid="namespace-select-filter-input"
aria-describedby="react-select-overview-namespace-select-filter-input-placeholder" id="overview-namespace-select-filter-input-input"
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" type="text"
value="" value=""
/> />
</div>
</div>
<div <div
class="Select__indicators css-1hb7zxy-IndicatorsContainer" class="gradient left"
/>
<label
data-testid="namespace-select-filter-label"
for="overview-namespace-select-filter-input-input"
>
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 <span
class="Select__indicator-separator css-1u9des2-indicatorSeparator" class="icon"
/> data-icon-name="expand_more"
<div
aria-hidden="true"
class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
> >
<svg expand_more
aria-hidden="true" </span>
class="css-tj5bde-Svg" </i>
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>
</div> </div>

450
packages/core/src/features/cluster/__snapshots__/sidebar-and-tab-navigation-for-extensions.test.tsx.snap
View File

@ -322,82 +322,48 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
Overview Overview
</h5> </h5>
<div <div
class="NamespaceSelectFilterParent" class="namespace-select-filter"
data-testid="namespace-select-filter" data-testid="namespace-select-filter"
id="overview-namespace-select-filter-input"
tabindex="1"
> >
<div <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"
> >
<div <div
class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer" class="non-icon"
>
<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 <input
aria-autocomplete="list" data-testid="namespace-select-filter-input"
aria-describedby="react-select-overview-namespace-select-filter-input-placeholder" id="overview-namespace-select-filter-input-input"
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" type="text"
value="" value=""
/> />
</div>
</div>
<div <div
class="Select__indicators css-1hb7zxy-IndicatorsContainer" class="gradient left"
/>
<label
data-testid="namespace-select-filter-label"
for="overview-namespace-select-filter-input-input"
>
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 <span
class="Select__indicator-separator css-1u9des2-indicatorSeparator" class="icon"
/> data-icon-name="expand_more"
<div
aria-hidden="true"
class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
> >
<svg expand_more
aria-hidden="true" </span>
class="css-tj5bde-Svg" </i>
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>
</div> </div>
@ -866,82 +832,48 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
Overview Overview
</h5> </h5>
<div <div
class="NamespaceSelectFilterParent" class="namespace-select-filter"
data-testid="namespace-select-filter" data-testid="namespace-select-filter"
id="overview-namespace-select-filter-input"
tabindex="1"
> >
<div <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"
> >
<div <div
class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer" class="non-icon"
>
<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 <input
aria-autocomplete="list" data-testid="namespace-select-filter-input"
aria-describedby="react-select-overview-namespace-select-filter-input-placeholder" id="overview-namespace-select-filter-input-input"
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" type="text"
value="" value=""
/> />
</div>
</div>
<div <div
class="Select__indicators css-1hb7zxy-IndicatorsContainer" class="gradient left"
/>
<label
data-testid="namespace-select-filter-label"
for="overview-namespace-select-filter-input-input"
>
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 <span
class="Select__indicator-separator css-1u9des2-indicatorSeparator" class="icon"
/> data-icon-name="expand_more"
<div
aria-hidden="true"
class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
> >
<svg expand_more
aria-hidden="true" </span>
class="css-tj5bde-Svg" </i>
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>
</div> </div>
@ -1446,82 +1378,48 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
Overview Overview
</h5> </h5>
<div <div
class="NamespaceSelectFilterParent" class="namespace-select-filter"
data-testid="namespace-select-filter" data-testid="namespace-select-filter"
id="overview-namespace-select-filter-input"
tabindex="1"
> >
<div <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"
> >
<div <div
class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer" class="non-icon"
>
<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 <input
aria-autocomplete="list" data-testid="namespace-select-filter-input"
aria-describedby="react-select-overview-namespace-select-filter-input-placeholder" id="overview-namespace-select-filter-input-input"
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" type="text"
value="" value=""
/> />
</div>
</div>
<div <div
class="Select__indicators css-1hb7zxy-IndicatorsContainer" class="gradient left"
/>
<label
data-testid="namespace-select-filter-label"
for="overview-namespace-select-filter-input-input"
>
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 <span
class="Select__indicator-separator css-1u9des2-indicatorSeparator" class="icon"
/> data-icon-name="expand_more"
<div
aria-hidden="true"
class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
> >
<svg expand_more
aria-hidden="true" </span>
class="css-tj5bde-Svg" </i>
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>
</div> </div>
@ -3486,82 +3384,48 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
Overview Overview
</h5> </h5>
<div <div
class="NamespaceSelectFilterParent" class="namespace-select-filter"
data-testid="namespace-select-filter" data-testid="namespace-select-filter"
id="overview-namespace-select-filter-input"
tabindex="1"
> >
<div <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"
> >
<div <div
class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer" class="non-icon"
>
<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 <input
aria-autocomplete="list" data-testid="namespace-select-filter-input"
aria-describedby="react-select-overview-namespace-select-filter-input-placeholder" id="overview-namespace-select-filter-input-input"
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" type="text"
value="" value=""
/> />
</div>
</div>
<div <div
class="Select__indicators css-1hb7zxy-IndicatorsContainer" class="gradient left"
/>
<label
data-testid="namespace-select-filter-label"
for="overview-namespace-select-filter-input-input"
>
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 <span
class="Select__indicator-separator css-1u9des2-indicatorSeparator" class="icon"
/> data-icon-name="expand_more"
<div
aria-hidden="true"
class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
> >
<svg expand_more
aria-hidden="true" </span>
class="css-tj5bde-Svg" </i>
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>
</div> </div>
@ -4030,82 +3894,48 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
Overview Overview
</h5> </h5>
<div <div
class="NamespaceSelectFilterParent" class="namespace-select-filter"
data-testid="namespace-select-filter" data-testid="namespace-select-filter"
id="overview-namespace-select-filter-input"
tabindex="1"
> >
<div <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"
> >
<div <div
class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer" class="non-icon"
>
<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 <input
aria-autocomplete="list" data-testid="namespace-select-filter-input"
aria-describedby="react-select-overview-namespace-select-filter-input-placeholder" id="overview-namespace-select-filter-input-input"
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" type="text"
value="" value=""
/> />
</div>
</div>
<div <div
class="Select__indicators css-1hb7zxy-IndicatorsContainer" class="gradient left"
/>
<label
data-testid="namespace-select-filter-label"
for="overview-namespace-select-filter-input-input"
>
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 <span
class="Select__indicator-separator css-1u9des2-indicatorSeparator" class="icon"
/> data-icon-name="expand_more"
<div
aria-hidden="true"
class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
> >
<svg expand_more
aria-hidden="true" </span>
class="css-tj5bde-Svg" </i>
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>
</div> </div>

180
packages/core/src/features/cluster/__snapshots__/visibility-of-sidebar-items.test.tsx.snap
View File

@ -293,82 +293,48 @@ exports[`cluster - visibility of sidebar items given kube resource for route is
Overview Overview
</h5> </h5>
<div <div
class="NamespaceSelectFilterParent" class="namespace-select-filter"
data-testid="namespace-select-filter" data-testid="namespace-select-filter"
id="overview-namespace-select-filter-input"
tabindex="1"
> >
<div <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"
> >
<div <div
class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer" class="non-icon"
>
<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 <input
aria-autocomplete="list" data-testid="namespace-select-filter-input"
aria-describedby="react-select-overview-namespace-select-filter-input-placeholder" id="overview-namespace-select-filter-input-input"
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" type="text"
value="" value=""
/> />
</div>
</div>
<div <div
class="Select__indicators css-1hb7zxy-IndicatorsContainer" class="gradient left"
/>
<label
data-testid="namespace-select-filter-label"
for="overview-namespace-select-filter-input-input"
>
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 <span
class="Select__indicator-separator css-1u9des2-indicatorSeparator" class="icon"
/> data-icon-name="expand_more"
<div
aria-hidden="true"
class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
> >
<svg expand_more
aria-hidden="true" </span>
class="css-tj5bde-Svg" </i>
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>
</div> </div>
@ -848,82 +814,48 @@ exports[`cluster - visibility of sidebar items given kube resource for route is
Overview Overview
</h5> </h5>
<div <div
class="NamespaceSelectFilterParent" class="namespace-select-filter"
data-testid="namespace-select-filter" data-testid="namespace-select-filter"
id="overview-namespace-select-filter-input"
tabindex="1"
> >
<div <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"
> >
<div <div
class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer" class="non-icon"
>
<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 <input
aria-autocomplete="list" data-testid="namespace-select-filter-input"
aria-describedby="react-select-overview-namespace-select-filter-input-placeholder" id="overview-namespace-select-filter-input-input"
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" type="text"
value="" value=""
/> />
</div>
</div>
<div <div
class="Select__indicators css-1hb7zxy-IndicatorsContainer" class="gradient left"
/>
<label
data-testid="namespace-select-filter-label"
for="overview-namespace-select-filter-input-input"
>
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 <span
class="Select__indicator-separator css-1u9des2-indicatorSeparator" class="icon"
/> data-icon-name="expand_more"
<div
aria-hidden="true"
class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
> >
<svg expand_more
aria-hidden="true" </span>
class="css-tj5bde-Svg" </i>
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>
</div> </div>

90
packages/core/src/features/cluster/__snapshots__/workload-overview.test.tsx.snap
View File

@ -307,82 +307,48 @@ exports[`workload overview when navigating to workload overview renders 1`] = `
Overview Overview
</h5> </h5>
<div <div
class="NamespaceSelectFilterParent" class="namespace-select-filter"
data-testid="namespace-select-filter" data-testid="namespace-select-filter"
id="overview-namespace-select-filter-input"
tabindex="1"
> >
<div <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"
> >
<div <div
class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer" class="non-icon"
>
<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 <input
aria-autocomplete="list" data-testid="namespace-select-filter-input"
aria-describedby="react-select-overview-namespace-select-filter-input-placeholder" id="overview-namespace-select-filter-input-input"
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" type="text"
value="" value=""
/> />
</div>
</div>
<div <div
class="Select__indicators css-1hb7zxy-IndicatorsContainer" class="gradient left"
/>
<label
data-testid="namespace-select-filter-label"
for="overview-namespace-select-filter-input-input"
>
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 <span
class="Select__indicator-separator css-1u9des2-indicatorSeparator" class="icon"
/> data-icon-name="expand_more"
<div
aria-hidden="true"
class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
> >
<svg expand_more
aria-hidden="true" </span>
class="css-tj5bde-Svg" </i>
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>
</div> </div>

180
packages/core/src/features/cluster/extension-api/__snapshots__/disable-cluster-pages-when-cluster-is-not-relevant.test.tsx.snap
View File

@ -689,82 +689,48 @@ exports[`disable-cluster-pages-when-cluster-is-not-relevant given extension shou
Overview Overview
</h5> </h5>
<div <div
class="NamespaceSelectFilterParent" class="namespace-select-filter"
data-testid="namespace-select-filter" data-testid="namespace-select-filter"
id="overview-namespace-select-filter-input"
tabindex="1"
> >
<div <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"
> >
<div <div
class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer" class="non-icon"
>
<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 <input
aria-autocomplete="list" data-testid="namespace-select-filter-input"
aria-describedby="react-select-overview-namespace-select-filter-input-placeholder" id="overview-namespace-select-filter-input-input"
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" type="text"
value="" value=""
/> />
</div>
</div>
<div <div
class="Select__indicators css-1hb7zxy-IndicatorsContainer" class="gradient left"
/>
<label
data-testid="namespace-select-filter-label"
for="overview-namespace-select-filter-input-input"
>
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 <span
class="Select__indicator-separator css-1u9des2-indicatorSeparator" class="icon"
/> data-icon-name="expand_more"
<div
aria-hidden="true"
class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
> >
<svg expand_more
aria-hidden="true" </span>
class="css-tj5bde-Svg" </i>
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>
</div> </div>
@ -1206,82 +1172,48 @@ exports[`disable-cluster-pages-when-cluster-is-not-relevant given not yet known
Overview Overview
</h5> </h5>
<div <div
class="NamespaceSelectFilterParent" class="namespace-select-filter"
data-testid="namespace-select-filter" data-testid="namespace-select-filter"
id="overview-namespace-select-filter-input"
tabindex="1"
> >
<div <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"
> >
<div <div
class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer" class="non-icon"
>
<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 <input
aria-autocomplete="list" data-testid="namespace-select-filter-input"
aria-describedby="react-select-overview-namespace-select-filter-input-placeholder" id="overview-namespace-select-filter-input-input"
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" type="text"
value="" value=""
/> />
</div>
</div>
<div <div
class="Select__indicators css-1hb7zxy-IndicatorsContainer" class="gradient left"
/>
<label
data-testid="namespace-select-filter-label"
for="overview-namespace-select-filter-input-input"
>
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 <span
class="Select__indicator-separator css-1u9des2-indicatorSeparator" class="icon"
/> data-icon-name="expand_more"
<div
aria-hidden="true"
class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
> >
<svg expand_more
aria-hidden="true" </span>
class="css-tj5bde-Svg" </i>
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>
</div> </div>

270
packages/core/src/features/cluster/extension-api/__snapshots__/disable-sidebar-items-when-cluster-is-not-relevant.test.tsx.snap
View File

@ -312,82 +312,48 @@ exports[`disable sidebar items when cluster is not relevant given extension shou
Overview Overview
</h5> </h5>
<div <div
class="NamespaceSelectFilterParent" class="namespace-select-filter"
data-testid="namespace-select-filter" data-testid="namespace-select-filter"
id="overview-namespace-select-filter-input"
tabindex="1"
> >
<div <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"
> >
<div <div
class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer" class="non-icon"
>
<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 <input
aria-autocomplete="list" data-testid="namespace-select-filter-input"
aria-describedby="react-select-overview-namespace-select-filter-input-placeholder" id="overview-namespace-select-filter-input-input"
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" type="text"
value="" value=""
/> />
</div>
</div>
<div <div
class="Select__indicators css-1hb7zxy-IndicatorsContainer" class="gradient left"
/>
<label
data-testid="namespace-select-filter-label"
for="overview-namespace-select-filter-input-input"
>
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 <span
class="Select__indicator-separator css-1u9des2-indicatorSeparator" class="icon"
/> data-icon-name="expand_more"
<div
aria-hidden="true"
class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
> >
<svg expand_more
aria-hidden="true" </span>
class="css-tj5bde-Svg" </i>
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>
</div> </div>
@ -829,82 +795,48 @@ exports[`disable sidebar items when cluster is not relevant given extension shou
Overview Overview
</h5> </h5>
<div <div
class="NamespaceSelectFilterParent" class="namespace-select-filter"
data-testid="namespace-select-filter" data-testid="namespace-select-filter"
id="overview-namespace-select-filter-input"
tabindex="1"
> >
<div <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"
> >
<div <div
class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer" class="non-icon"
>
<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 <input
aria-autocomplete="list" data-testid="namespace-select-filter-input"
aria-describedby="react-select-overview-namespace-select-filter-input-placeholder" id="overview-namespace-select-filter-input-input"
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" type="text"
value="" value=""
/> />
</div>
</div>
<div <div
class="Select__indicators css-1hb7zxy-IndicatorsContainer" class="gradient left"
/>
<label
data-testid="namespace-select-filter-label"
for="overview-namespace-select-filter-input-input"
>
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 <span
class="Select__indicator-separator css-1u9des2-indicatorSeparator" class="icon"
/> data-icon-name="expand_more"
<div
aria-hidden="true"
class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
> >
<svg expand_more
aria-hidden="true" </span>
class="css-tj5bde-Svg" </i>
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>
</div> </div>
@ -1346,82 +1278,48 @@ exports[`disable sidebar items when cluster is not relevant given not yet known
Overview Overview
</h5> </h5>
<div <div
class="NamespaceSelectFilterParent" class="namespace-select-filter"
data-testid="namespace-select-filter" data-testid="namespace-select-filter"
id="overview-namespace-select-filter-input"
tabindex="1"
> >
<div <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"
> >
<div <div
class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer" class="non-icon"
>
<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 <input
aria-autocomplete="list" data-testid="namespace-select-filter-input"
aria-describedby="react-select-overview-namespace-select-filter-input-placeholder" id="overview-namespace-select-filter-input-input"
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" type="text"
value="" value=""
/> />
</div>
</div>
<div <div
class="Select__indicators css-1hb7zxy-IndicatorsContainer" class="gradient left"
/>
<label
data-testid="namespace-select-filter-label"
for="overview-namespace-select-filter-input-input"
>
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 <span
class="Select__indicator-separator css-1u9des2-indicatorSeparator" class="icon"
/> data-icon-name="expand_more"
<div
aria-hidden="true"
class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
> >
<svg expand_more
aria-hidden="true" </span>
class="css-tj5bde-Svg" </i>
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>
</div> </div>

270
packages/core/src/features/cluster/kube-object-details/extension-api/__snapshots__/disable-kube-object-detail-items-when-cluster-is-not-relevant.test.tsx.snap
View File

@ -365,82 +365,48 @@ exports[`disable kube object detail items when cluster is not relevant given ext
Overview Overview
</h5> </h5>
<div <div
class="NamespaceSelectFilterParent" class="namespace-select-filter"
data-testid="namespace-select-filter" data-testid="namespace-select-filter"
id="overview-namespace-select-filter-input"
tabindex="1"
> >
<div <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"
> >
<div <div
class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer" class="non-icon"
>
<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 <input
aria-autocomplete="list" data-testid="namespace-select-filter-input"
aria-describedby="react-select-overview-namespace-select-filter-input-placeholder" id="overview-namespace-select-filter-input-input"
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" type="text"
value="" value=""
/> />
</div>
</div>
<div <div
class="Select__indicators css-1hb7zxy-IndicatorsContainer" class="gradient left"
/>
<label
data-testid="namespace-select-filter-label"
for="overview-namespace-select-filter-input-input"
>
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 <span
class="Select__indicator-separator css-1u9des2-indicatorSeparator" class="icon"
/> data-icon-name="expand_more"
<div
aria-hidden="true"
class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
> >
<svg expand_more
aria-hidden="true" </span>
class="css-tj5bde-Svg" </i>
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>
</div> </div>
@ -948,82 +914,48 @@ exports[`disable kube object detail items when cluster is not relevant given ext
Overview Overview
</h5> </h5>
<div <div
class="NamespaceSelectFilterParent" class="namespace-select-filter"
data-testid="namespace-select-filter" data-testid="namespace-select-filter"
id="overview-namespace-select-filter-input"
tabindex="1"
> >
<div <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"
> >
<div <div
class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer" class="non-icon"
>
<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 <input
aria-autocomplete="list" data-testid="namespace-select-filter-input"
aria-describedby="react-select-overview-namespace-select-filter-input-placeholder" id="overview-namespace-select-filter-input-input"
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" type="text"
value="" value=""
/> />
</div>
</div>
<div <div
class="Select__indicators css-1hb7zxy-IndicatorsContainer" class="gradient left"
/>
<label
data-testid="namespace-select-filter-label"
for="overview-namespace-select-filter-input-input"
>
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 <span
class="Select__indicator-separator css-1u9des2-indicatorSeparator" class="icon"
/> data-icon-name="expand_more"
<div
aria-hidden="true"
class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
> >
<svg expand_more
aria-hidden="true" </span>
class="css-tj5bde-Svg" </i>
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>
</div> </div>
@ -1531,82 +1463,48 @@ exports[`disable kube object detail items when cluster is not relevant given not
Overview Overview
</h5> </h5>
<div <div
class="NamespaceSelectFilterParent" class="namespace-select-filter"
data-testid="namespace-select-filter" data-testid="namespace-select-filter"
id="overview-namespace-select-filter-input"
tabindex="1"
> >
<div <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"
> >
<div <div
class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer" class="non-icon"
>
<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 <input
aria-autocomplete="list" data-testid="namespace-select-filter-input"
aria-describedby="react-select-overview-namespace-select-filter-input-placeholder" id="overview-namespace-select-filter-input-input"
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" type="text"
value="" value=""
/> />
</div>
</div>
<div <div
class="Select__indicators css-1hb7zxy-IndicatorsContainer" class="gradient left"
/>
<label
data-testid="namespace-select-filter-label"
for="overview-namespace-select-filter-input-input"
>
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 <span
class="Select__indicator-separator css-1u9des2-indicatorSeparator" class="icon"
/> data-icon-name="expand_more"
<div
aria-hidden="true"
class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
> >
<svg expand_more
aria-hidden="true" </span>
class="css-tj5bde-Svg" </i>
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>
</div> </div>

180
packages/core/src/features/cluster/kube-object-details/extension-api/__snapshots__/reactively-hide-kube-object-detail-item.test.tsx.snap
View File

@ -360,82 +360,48 @@ exports[`reactively hide kube object detail item renders 1`] = `
Overview Overview
</h5> </h5>
<div <div
class="NamespaceSelectFilterParent" class="namespace-select-filter"
data-testid="namespace-select-filter" data-testid="namespace-select-filter"
id="overview-namespace-select-filter-input"
tabindex="1"
> >
<div <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"
> >
<div <div
class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer" class="non-icon"
>
<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 <input
aria-autocomplete="list" data-testid="namespace-select-filter-input"
aria-describedby="react-select-overview-namespace-select-filter-input-placeholder" id="overview-namespace-select-filter-input-input"
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" type="text"
value="" value=""
/> />
</div>
</div>
<div <div
class="Select__indicators css-1hb7zxy-IndicatorsContainer" class="gradient left"
/>
<label
data-testid="namespace-select-filter-label"
for="overview-namespace-select-filter-input-input"
>
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 <span
class="Select__indicator-separator css-1u9des2-indicatorSeparator" class="icon"
/> data-icon-name="expand_more"
<div
aria-hidden="true"
class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
> >
<svg expand_more
aria-hidden="true" </span>
class="css-tj5bde-Svg" </i>
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>
</div> </div>
@ -948,82 +914,48 @@ exports[`reactively hide kube object detail item when the item is shown renders
Overview Overview
</h5> </h5>
<div <div
class="NamespaceSelectFilterParent" class="namespace-select-filter"
data-testid="namespace-select-filter" data-testid="namespace-select-filter"
id="overview-namespace-select-filter-input"
tabindex="1"
> >
<div <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"
> >
<div <div
class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer" class="non-icon"
>
<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 <input
aria-autocomplete="list" data-testid="namespace-select-filter-input"
aria-describedby="react-select-overview-namespace-select-filter-input-placeholder" id="overview-namespace-select-filter-input-input"
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" type="text"
value="" value=""
/> />
</div>
</div>
<div <div
class="Select__indicators css-1hb7zxy-IndicatorsContainer" class="gradient left"
/>
<label
data-testid="namespace-select-filter-label"
for="overview-namespace-select-filter-input-input"
>
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 <span
class="Select__indicator-separator css-1u9des2-indicatorSeparator" class="icon"
/> data-icon-name="expand_more"
<div
aria-hidden="true"
class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
> >
<svg expand_more
aria-hidden="true" </span>
class="css-tj5bde-Svg" </i>
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>
</div> </div>

180
packages/core/src/features/cluster/namespaces/__snapshots__/edit-namespace-from-previously-opened-tab.test.tsx.snap
View File

@ -319,82 +319,48 @@ exports[`cluster/namespaces - edit namespaces from previously opened tab given t
Overview Overview
</h5> </h5>
<div <div
class="NamespaceSelectFilterParent" class="namespace-select-filter"
data-testid="namespace-select-filter" data-testid="namespace-select-filter"
id="overview-namespace-select-filter-input"
tabindex="1"
> >
<div <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"
> >
<div <div
class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer" class="non-icon"
>
<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 <input
aria-autocomplete="list" data-testid="namespace-select-filter-input"
aria-describedby="react-select-overview-namespace-select-filter-input-placeholder" id="overview-namespace-select-filter-input-input"
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" type="text"
value="" value=""
/> />
</div>
</div>
<div <div
class="Select__indicators css-1hb7zxy-IndicatorsContainer" class="gradient left"
/>
<label
data-testid="namespace-select-filter-label"
for="overview-namespace-select-filter-input-input"
>
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 <span
class="Select__indicator-separator css-1u9des2-indicatorSeparator" class="icon"
/> data-icon-name="expand_more"
<div
aria-hidden="true"
class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
> >
<svg expand_more
aria-hidden="true" </span>
class="css-tj5bde-Svg" </i>
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>
</div> </div>
@ -871,82 +837,48 @@ exports[`cluster/namespaces - edit namespaces from previously opened tab given t
Overview Overview
</h5> </h5>
<div <div
class="NamespaceSelectFilterParent" class="namespace-select-filter"
data-testid="namespace-select-filter" data-testid="namespace-select-filter"
id="overview-namespace-select-filter-input"
tabindex="1"
> >
<div <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"
> >
<div <div
class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer" class="non-icon"
>
<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 <input
aria-autocomplete="list" data-testid="namespace-select-filter-input"
aria-describedby="react-select-overview-namespace-select-filter-input-placeholder" id="overview-namespace-select-filter-input-input"
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" type="text"
value="" value=""
/> />
</div>
</div>
<div <div
class="Select__indicators css-1hb7zxy-IndicatorsContainer" class="gradient left"
/>
<label
data-testid="namespace-select-filter-label"
for="overview-namespace-select-filter-input-input"
>
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 <span
class="Select__indicator-separator css-1u9des2-indicatorSeparator" class="icon"
/> data-icon-name="expand_more"
<div
aria-hidden="true"
class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
> >
<svg expand_more
aria-hidden="true" </span>
class="css-tj5bde-Svg" </i>
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>
</div> </div>

270
packages/core/src/features/cluster/workloads/__snapshots__/pods.test.tsx.snap
View File

@ -311,82 +311,48 @@ exports[`workloads / pods when navigating to workloads / pods view given a names
1 item 1 item
</div> </div>
<div <div
class="NamespaceSelectFilterParent" class="namespace-select-filter"
data-testid="namespace-select-filter" data-testid="namespace-select-filter"
id="kube-object-list-layout-namespace-select-input"
tabindex="1"
> >
<div <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"
> >
<div <div
class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer" class="non-icon"
>
<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 <input
aria-autocomplete="list" data-testid="namespace-select-filter-input"
aria-describedby="react-select-kube-object-list-layout-namespace-select-input-placeholder" id="kube-object-list-layout-namespace-select-input-input"
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" type="text"
value="" value=""
/> />
</div>
</div>
<div <div
class="Select__indicators css-1hb7zxy-IndicatorsContainer" class="gradient left"
/>
<label
data-testid="namespace-select-filter-label"
for="kube-object-list-layout-namespace-select-input-input"
>
Namespace: default
</label>
<div
class="gradient right"
/>
</div>
<i
class="Icon expand-icon material interactive focusable"
data-testid="namespace-select-filter-expand-icon"
tabindex="0"
> >
<span <span
class="Select__indicator-separator css-1u9des2-indicatorSeparator" class="icon"
/> data-icon-name="expand_more"
<div
aria-hidden="true"
class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
> >
<svg expand_more
aria-hidden="true" </span>
class="css-tj5bde-Svg" </i>
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>
<div <div
@ -1217,82 +1183,48 @@ exports[`workloads / pods when navigating to workloads / pods view given no pods
0 items 0 items
</div> </div>
<div <div
class="NamespaceSelectFilterParent" class="namespace-select-filter"
data-testid="namespace-select-filter" data-testid="namespace-select-filter"
id="kube-object-list-layout-namespace-select-input"
tabindex="1"
> >
<div <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"
> >
<div <div
class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer" class="non-icon"
>
<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 <input
aria-autocomplete="list" data-testid="namespace-select-filter-input"
aria-describedby="react-select-kube-object-list-layout-namespace-select-input-placeholder" id="kube-object-list-layout-namespace-select-input-input"
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" type="text"
value="" value=""
/> />
</div>
</div>
<div <div
class="Select__indicators css-1hb7zxy-IndicatorsContainer" class="gradient left"
/>
<label
data-testid="namespace-select-filter-label"
for="kube-object-list-layout-namespace-select-input-input"
>
Namespace: default
</label>
<div
class="gradient right"
/>
</div>
<i
class="Icon expand-icon material interactive focusable"
data-testid="namespace-select-filter-expand-icon"
tabindex="0"
> >
<span <span
class="Select__indicator-separator css-1u9des2-indicatorSeparator" class="icon"
/> data-icon-name="expand_more"
<div
aria-hidden="true"
class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
> >
<svg expand_more
aria-hidden="true" </span>
class="css-tj5bde-Svg" </i>
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>
<div <div
@ -2017,82 +1949,48 @@ exports[`workloads / pods when navigating to workloads / pods view given pods ar
0 items 0 items
</div> </div>
<div <div
class="NamespaceSelectFilterParent" class="namespace-select-filter"
data-testid="namespace-select-filter" data-testid="namespace-select-filter"
id="kube-object-list-layout-namespace-select-input"
tabindex="1"
> >
<div <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"
> >
<div <div
class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer" class="non-icon"
>
<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 <input
aria-autocomplete="list" data-testid="namespace-select-filter-input"
aria-describedby="react-select-kube-object-list-layout-namespace-select-input-placeholder" id="kube-object-list-layout-namespace-select-input-input"
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" type="text"
value="" value=""
/> />
</div>
</div>
<div <div
class="Select__indicators css-1hb7zxy-IndicatorsContainer" class="gradient left"
/>
<label
data-testid="namespace-select-filter-label"
for="kube-object-list-layout-namespace-select-input-input"
>
Namespace: default
</label>
<div
class="gradient right"
/>
</div>
<i
class="Icon expand-icon material interactive focusable"
data-testid="namespace-select-filter-expand-icon"
tabindex="0"
> >
<span <span
class="Select__indicator-separator css-1u9des2-indicatorSeparator" class="icon"
/> data-icon-name="expand_more"
<div
aria-hidden="true"
class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
> >
<svg expand_more
aria-hidden="true" </span>
class="css-tj5bde-Svg" </i>
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>
<div <div

270
packages/core/src/features/cluster/workloads/overview/extension-api/__snapshots__/disable-workloads-overview-details-when-cluster-is-not-relevant.test.tsx.snap
View File

@ -294,82 +294,48 @@ exports[`disable workloads overview details when cluster is not relevant given e
Overview Overview
</h5> </h5>
<div <div
class="NamespaceSelectFilterParent" class="namespace-select-filter"
data-testid="namespace-select-filter" data-testid="namespace-select-filter"
id="overview-namespace-select-filter-input"
tabindex="1"
> >
<div <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"
> >
<div <div
class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer" class="non-icon"
>
<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 <input
aria-autocomplete="list" data-testid="namespace-select-filter-input"
aria-describedby="react-select-overview-namespace-select-filter-input-placeholder" id="overview-namespace-select-filter-input-input"
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" type="text"
value="" value=""
/> />
</div>
</div>
<div <div
class="Select__indicators css-1hb7zxy-IndicatorsContainer" class="gradient left"
/>
<label
data-testid="namespace-select-filter-label"
for="overview-namespace-select-filter-input-input"
>
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 <span
class="Select__indicator-separator css-1u9des2-indicatorSeparator" class="icon"
/> data-icon-name="expand_more"
<div
aria-hidden="true"
class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
> >
<svg expand_more
aria-hidden="true" </span>
class="css-tj5bde-Svg" </i>
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>
</div> </div>
@ -816,82 +782,48 @@ exports[`disable workloads overview details when cluster is not relevant given e
Overview Overview
</h5> </h5>
<div <div
class="NamespaceSelectFilterParent" class="namespace-select-filter"
data-testid="namespace-select-filter" data-testid="namespace-select-filter"
id="overview-namespace-select-filter-input"
tabindex="1"
> >
<div <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"
> >
<div <div
class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer" class="non-icon"
>
<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 <input
aria-autocomplete="list" data-testid="namespace-select-filter-input"
aria-describedby="react-select-overview-namespace-select-filter-input-placeholder" id="overview-namespace-select-filter-input-input"
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" type="text"
value="" value=""
/> />
</div>
</div>
<div <div
class="Select__indicators css-1hb7zxy-IndicatorsContainer" class="gradient left"
/>
<label
data-testid="namespace-select-filter-label"
for="overview-namespace-select-filter-input-input"
>
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 <span
class="Select__indicator-separator css-1u9des2-indicatorSeparator" class="icon"
/> data-icon-name="expand_more"
<div
aria-hidden="true"
class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
> >
<svg expand_more
aria-hidden="true" </span>
class="css-tj5bde-Svg" </i>
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>
</div> </div>
@ -1333,82 +1265,48 @@ exports[`disable workloads overview details when cluster is not relevant given n
Overview Overview
</h5> </h5>
<div <div
class="NamespaceSelectFilterParent" class="namespace-select-filter"
data-testid="namespace-select-filter" data-testid="namespace-select-filter"
id="overview-namespace-select-filter-input"
tabindex="1"
> >
<div <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"
> >
<div <div
class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer" class="non-icon"
>
<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 <input
aria-autocomplete="list" data-testid="namespace-select-filter-input"
aria-describedby="react-select-overview-namespace-select-filter-input-placeholder" id="overview-namespace-select-filter-input-input"
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" type="text"
value="" value=""
/> />
</div>
</div>
<div <div
class="Select__indicators css-1hb7zxy-IndicatorsContainer" class="gradient left"
/>
<label
data-testid="namespace-select-filter-label"
for="overview-namespace-select-filter-input-input"
>
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 <span
class="Select__indicator-separator css-1u9des2-indicatorSeparator" class="icon"
/> data-icon-name="expand_more"
<div
aria-hidden="true"
class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
> >
<svg expand_more
aria-hidden="true" </span>
class="css-tj5bde-Svg" </i>
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>
</div> </div>

180
packages/core/src/features/helm-charts/installing-chart/__snapshots__/installing-helm-chart-from-new-tab.test.ts.snap
View File

@ -294,82 +294,48 @@ exports[`installing helm chart from new tab given tab for installing chart was n
Overview Overview
</h5> </h5>
<div <div
class="NamespaceSelectFilterParent" class="namespace-select-filter"
data-testid="namespace-select-filter" data-testid="namespace-select-filter"
id="overview-namespace-select-filter-input"
tabindex="1"
> >
<div <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"
> >
<div <div
class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer" class="non-icon"
>
<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 <input
aria-autocomplete="list" data-testid="namespace-select-filter-input"
aria-describedby="react-select-overview-namespace-select-filter-input-placeholder" id="overview-namespace-select-filter-input-input"
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" type="text"
value="" value=""
/> />
</div>
</div>
<div <div
class="Select__indicators css-1hb7zxy-IndicatorsContainer" class="gradient left"
/>
<label
data-testid="namespace-select-filter-label"
for="overview-namespace-select-filter-input-input"
>
Namespaces: default, some-other-namespace
</label>
<div
class="gradient right"
/>
</div>
<i
class="Icon expand-icon material interactive focusable"
data-testid="namespace-select-filter-expand-icon"
tabindex="0"
> >
<span <span
class="Select__indicator-separator css-1u9des2-indicatorSeparator" class="icon"
/> data-icon-name="expand_more"
<div
aria-hidden="true"
class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
> >
<svg expand_more
aria-hidden="true" </span>
class="css-tj5bde-Svg" </i>
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>
</div> </div>
@ -10437,82 +10403,48 @@ exports[`installing helm chart from new tab given tab for installing chart was n
0 items 0 items
</div> </div>
<div <div
class="NamespaceSelectFilterParent" class="namespace-select-filter"
data-testid="namespace-select-filter" data-testid="namespace-select-filter"
id="namespace-select-filter"
tabindex="1"
> >
<div <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"
> >
<div <div
class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer" class="non-icon"
>
<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 <input
aria-autocomplete="list" data-testid="namespace-select-filter-input"
aria-describedby="react-select-namespace-select-filter-placeholder" id="namespace-select-filter-input"
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" type="text"
value="" value=""
/> />
</div>
</div>
<div <div
class="Select__indicators css-1hb7zxy-IndicatorsContainer" class="gradient left"
/>
<label
data-testid="namespace-select-filter-label"
for="namespace-select-filter-input"
>
Namespaces: default, some-other-namespace
</label>
<div
class="gradient right"
/>
</div>
<i
class="Icon expand-icon material interactive focusable"
data-testid="namespace-select-filter-expand-icon"
tabindex="0"
> >
<span <span
class="Select__indicator-separator css-1u9des2-indicatorSeparator" class="icon"
/> data-icon-name="expand_more"
<div
aria-hidden="true"
class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
> >
<svg expand_more
aria-hidden="true" </span>
class="css-tj5bde-Svg" </i>
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>
<div <div

180
packages/core/src/features/helm-charts/installing-chart/__snapshots__/installing-helm-chart-from-previously-opened-tab.test.ts.snap
View File

@ -294,82 +294,48 @@ exports[`installing helm chart from previously opened tab given tab for installi
Overview Overview
</h5> </h5>
<div <div
class="NamespaceSelectFilterParent" class="namespace-select-filter"
data-testid="namespace-select-filter" data-testid="namespace-select-filter"
id="overview-namespace-select-filter-input"
tabindex="1"
> >
<div <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"
> >
<div <div
class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer" class="non-icon"
>
<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 <input
aria-autocomplete="list" data-testid="namespace-select-filter-input"
aria-describedby="react-select-overview-namespace-select-filter-input-placeholder" id="overview-namespace-select-filter-input-input"
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" type="text"
value="" value=""
/> />
</div>
</div>
<div <div
class="Select__indicators css-1hb7zxy-IndicatorsContainer" class="gradient left"
/>
<label
data-testid="namespace-select-filter-label"
for="overview-namespace-select-filter-input-input"
>
Namespaces: default, some-other-namespace
</label>
<div
class="gradient right"
/>
</div>
<i
class="Icon expand-icon material interactive focusable"
data-testid="namespace-select-filter-expand-icon"
tabindex="0"
> >
<span <span
class="Select__indicator-separator css-1u9des2-indicatorSeparator" class="icon"
/> data-icon-name="expand_more"
<div
aria-hidden="true"
class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
> >
<svg expand_more
aria-hidden="true" </span>
class="css-tj5bde-Svg" </i>
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>
</div> </div>
@ -821,82 +787,48 @@ exports[`installing helm chart from previously opened tab given tab for installi
Overview Overview
</h5> </h5>
<div <div
class="NamespaceSelectFilterParent" class="namespace-select-filter"
data-testid="namespace-select-filter" data-testid="namespace-select-filter"
id="overview-namespace-select-filter-input"
tabindex="1"
> >
<div <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"
> >
<div <div
class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer" class="non-icon"
>
<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 <input
aria-autocomplete="list" data-testid="namespace-select-filter-input"
aria-describedby="react-select-overview-namespace-select-filter-input-placeholder" id="overview-namespace-select-filter-input-input"
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" type="text"
value="" value=""
/> />
</div>
</div>
<div <div
class="Select__indicators css-1hb7zxy-IndicatorsContainer" class="gradient left"
/>
<label
data-testid="namespace-select-filter-label"
for="overview-namespace-select-filter-input-input"
>
Namespaces: default, some-other-namespace
</label>
<div
class="gradient right"
/>
</div>
<i
class="Icon expand-icon material interactive focusable"
data-testid="namespace-select-filter-expand-icon"
tabindex="0"
> >
<span <span
class="Select__indicator-separator css-1u9des2-indicatorSeparator" class="icon"
/> data-icon-name="expand_more"
<div
aria-hidden="true"
class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
> >
<svg expand_more
aria-hidden="true" </span>
class="css-tj5bde-Svg" </i>
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>
</div> </div>

630
packages/core/src/features/helm-charts/upgrade-chart/__snapshots__/upgrade-chart-new-tab.test.ts.snap
View File

@ -311,82 +311,48 @@ exports[`New Upgrade Helm Chart Dock Tab given a namespace is selected when navi
0 items 0 items
</div> </div>
<div <div
class="NamespaceSelectFilterParent" class="namespace-select-filter"
data-testid="namespace-select-filter" data-testid="namespace-select-filter"
id="namespace-select-filter"
tabindex="1"
> >
<div <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"
> >
<div <div
class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer" class="non-icon"
>
<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 <input
aria-autocomplete="list" data-testid="namespace-select-filter-input"
aria-describedby="react-select-namespace-select-filter-placeholder" id="namespace-select-filter-input"
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" type="text"
value="" value=""
/> />
</div>
</div>
<div <div
class="Select__indicators css-1hb7zxy-IndicatorsContainer" class="gradient left"
/>
<label
data-testid="namespace-select-filter-label"
for="namespace-select-filter-input"
>
Namespace: my-second-namespace
</label>
<div
class="gradient right"
/>
</div>
<i
class="Icon expand-icon material interactive focusable"
data-testid="namespace-select-filter-expand-icon"
tabindex="0"
> >
<span <span
class="Select__indicator-separator css-1u9des2-indicatorSeparator" class="icon"
/> data-icon-name="expand_more"
<div
aria-hidden="true"
class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
> >
<svg expand_more
aria-hidden="true" </span>
class="css-tj5bde-Svg" </i>
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>
<div <div
@ -978,82 +944,48 @@ exports[`New Upgrade Helm Chart Dock Tab given a namespace is selected when navi
1 item 1 item
</div> </div>
<div <div
class="NamespaceSelectFilterParent" class="namespace-select-filter"
data-testid="namespace-select-filter" data-testid="namespace-select-filter"
id="namespace-select-filter"
tabindex="1"
> >
<div <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"
> >
<div <div
class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer" class="non-icon"
>
<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 <input
aria-autocomplete="list" data-testid="namespace-select-filter-input"
aria-describedby="react-select-namespace-select-filter-placeholder" id="namespace-select-filter-input"
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" type="text"
value="" value=""
/> />
</div>
</div>
<div <div
class="Select__indicators css-1hb7zxy-IndicatorsContainer" class="gradient left"
/>
<label
data-testid="namespace-select-filter-label"
for="namespace-select-filter-input"
>
Namespace: my-second-namespace
</label>
<div
class="gradient right"
/>
</div>
<i
class="Icon expand-icon material interactive focusable"
data-testid="namespace-select-filter-expand-icon"
tabindex="0"
> >
<span <span
class="Select__indicator-separator css-1u9des2-indicatorSeparator" class="icon"
/> data-icon-name="expand_more"
<div
aria-hidden="true"
class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
> >
<svg expand_more
aria-hidden="true" </span>
class="css-tj5bde-Svg" </i>
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>
<div <div
@ -1748,82 +1680,48 @@ exports[`New Upgrade Helm Chart Dock Tab given a namespace is selected when navi
1 item 1 item
</div> </div>
<div <div
class="NamespaceSelectFilterParent" class="namespace-select-filter"
data-testid="namespace-select-filter" data-testid="namespace-select-filter"
id="namespace-select-filter"
tabindex="1"
> >
<div <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"
> >
<div <div
class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer" class="non-icon"
>
<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 <input
aria-autocomplete="list" data-testid="namespace-select-filter-input"
aria-describedby="react-select-namespace-select-filter-placeholder" id="namespace-select-filter-input"
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" type="text"
value="" value=""
/> />
</div>
</div>
<div <div
class="Select__indicators css-1hb7zxy-IndicatorsContainer" class="gradient left"
/>
<label
data-testid="namespace-select-filter-label"
for="namespace-select-filter-input"
>
Namespace: my-second-namespace
</label>
<div
class="gradient right"
/>
</div>
<i
class="Icon expand-icon material interactive focusable"
data-testid="namespace-select-filter-expand-icon"
tabindex="0"
> >
<span <span
class="Select__indicator-separator css-1u9des2-indicatorSeparator" class="icon"
/> data-icon-name="expand_more"
<div
aria-hidden="true"
class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
> >
<svg expand_more
aria-hidden="true" </span>
class="css-tj5bde-Svg" </i>
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>
<div <div
@ -2534,82 +2432,48 @@ exports[`New Upgrade Helm Chart Dock Tab given a namespace is selected when navi
1 item 1 item
</div> </div>
<div <div
class="NamespaceSelectFilterParent" class="namespace-select-filter"
data-testid="namespace-select-filter" data-testid="namespace-select-filter"
id="namespace-select-filter"
tabindex="1"
> >
<div <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"
> >
<div <div
class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer" class="non-icon"
>
<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 <input
aria-autocomplete="list" data-testid="namespace-select-filter-input"
aria-describedby="react-select-namespace-select-filter-placeholder" id="namespace-select-filter-input"
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" type="text"
value="" value=""
/> />
</div>
</div>
<div <div
class="Select__indicators css-1hb7zxy-IndicatorsContainer" class="gradient left"
/>
<label
data-testid="namespace-select-filter-label"
for="namespace-select-filter-input"
>
Namespace: my-second-namespace
</label>
<div
class="gradient right"
/>
</div>
<i
class="Icon expand-icon material interactive focusable"
data-testid="namespace-select-filter-expand-icon"
tabindex="0"
> >
<span <span
class="Select__indicator-separator css-1u9des2-indicatorSeparator" class="icon"
/> data-icon-name="expand_more"
<div
aria-hidden="true"
class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
> >
<svg expand_more
aria-hidden="true" </span>
class="css-tj5bde-Svg" </i>
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>
<div <div
@ -3356,82 +3220,48 @@ exports[`New Upgrade Helm Chart Dock Tab given a namespace is selected when navi
1 item 1 item
</div> </div>
<div <div
class="NamespaceSelectFilterParent" class="namespace-select-filter"
data-testid="namespace-select-filter" data-testid="namespace-select-filter"
id="namespace-select-filter"
tabindex="1"
> >
<div <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"
> >
<div <div
class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer" class="non-icon"
>
<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 <input
aria-autocomplete="list" data-testid="namespace-select-filter-input"
aria-describedby="react-select-namespace-select-filter-placeholder" id="namespace-select-filter-input"
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" type="text"
value="" value=""
/> />
</div>
</div>
<div <div
class="Select__indicators css-1hb7zxy-IndicatorsContainer" class="gradient left"
/>
<label
data-testid="namespace-select-filter-label"
for="namespace-select-filter-input"
>
Namespace: my-second-namespace
</label>
<div
class="gradient right"
/>
</div>
<i
class="Icon expand-icon material interactive focusable"
data-testid="namespace-select-filter-expand-icon"
tabindex="0"
> >
<span <span
class="Select__indicator-separator css-1u9des2-indicatorSeparator" class="icon"
/> data-icon-name="expand_more"
<div
aria-hidden="true"
class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
> >
<svg expand_more
aria-hidden="true" </span>
class="css-tj5bde-Svg" </i>
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>
<div <div
@ -4318,82 +4148,48 @@ exports[`New Upgrade Helm Chart Dock Tab given a namespace is selected when navi
1 item 1 item
</div> </div>
<div <div
class="NamespaceSelectFilterParent" class="namespace-select-filter"
data-testid="namespace-select-filter" data-testid="namespace-select-filter"
id="namespace-select-filter"
tabindex="1"
> >
<div <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"
> >
<div <div
class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer" class="non-icon"
>
<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 <input
aria-autocomplete="list" data-testid="namespace-select-filter-input"
aria-describedby="react-select-namespace-select-filter-placeholder" id="namespace-select-filter-input"
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" type="text"
value="" value=""
/> />
</div>
</div>
<div <div
class="Select__indicators css-1hb7zxy-IndicatorsContainer" class="gradient left"
/>
<label
data-testid="namespace-select-filter-label"
for="namespace-select-filter-input"
>
Namespace: my-second-namespace
</label>
<div
class="gradient right"
/>
</div>
<i
class="Icon expand-icon material interactive focusable"
data-testid="namespace-select-filter-expand-icon"
tabindex="0"
> >
<span <span
class="Select__indicator-separator css-1u9des2-indicatorSeparator" class="icon"
/> data-icon-name="expand_more"
<div
aria-hidden="true"
class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
> >
<svg expand_more
aria-hidden="true" </span>
class="css-tj5bde-Svg" </i>
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>
<div <div
@ -5282,82 +5078,48 @@ exports[`New Upgrade Helm Chart Dock Tab given a namespace is selected when navi
1 item 1 item
</div> </div>
<div <div
class="NamespaceSelectFilterParent" class="namespace-select-filter"
data-testid="namespace-select-filter" data-testid="namespace-select-filter"
id="namespace-select-filter"
tabindex="1"
> >
<div <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"
> >
<div <div
class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer" class="non-icon"
>
<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 <input
aria-autocomplete="list" data-testid="namespace-select-filter-input"
aria-describedby="react-select-namespace-select-filter-placeholder" id="namespace-select-filter-input"
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" type="text"
value="" value=""
/> />
</div>
</div>
<div <div
class="Select__indicators css-1hb7zxy-IndicatorsContainer" class="gradient left"
/>
<label
data-testid="namespace-select-filter-label"
for="namespace-select-filter-input"
>
Namespace: my-second-namespace
</label>
<div
class="gradient right"
/>
</div>
<i
class="Icon expand-icon material interactive focusable"
data-testid="namespace-select-filter-expand-icon"
tabindex="0"
> >
<span <span
class="Select__indicator-separator css-1u9des2-indicatorSeparator" class="icon"
/> data-icon-name="expand_more"
<div
aria-hidden="true"
class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
> >
<svg expand_more
aria-hidden="true" </span>
class="css-tj5bde-Svg" </i>
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>
<div <div

1620
packages/core/src/features/helm-releases/__snapshots__/showing-details-for-helm-release.test.ts.snap
View File

File diff suppressed because it is too large Load Diff

180
packages/core/src/features/pod-logs/__snapshots__/download-logs.test.tsx.snap
View File

@ -294,82 +294,48 @@ exports[`download logs options in logs dock tab opening pod logs when logs avail
Overview Overview
</h5> </h5>
<div <div
class="NamespaceSelectFilterParent" class="namespace-select-filter"
data-testid="namespace-select-filter" data-testid="namespace-select-filter"
id="overview-namespace-select-filter-input"
tabindex="1"
> >
<div <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"
> >
<div <div
class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer" class="non-icon"
>
<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 <input
aria-autocomplete="list" data-testid="namespace-select-filter-input"
aria-describedby="react-select-overview-namespace-select-filter-input-placeholder" id="overview-namespace-select-filter-input-input"
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" type="text"
value="" value=""
/> />
</div>
</div>
<div <div
class="Select__indicators css-1hb7zxy-IndicatorsContainer" class="gradient left"
/>
<label
data-testid="namespace-select-filter-label"
for="overview-namespace-select-filter-input-input"
>
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 <span
class="Select__indicator-separator css-1u9des2-indicatorSeparator" class="icon"
/> data-icon-name="expand_more"
<div
aria-hidden="true"
class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
> >
<svg expand_more
aria-hidden="true" </span>
class="css-tj5bde-Svg" </i>
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>
</div> </div>
@ -1154,82 +1120,48 @@ exports[`download logs options in logs dock tab opening pod logs when logs not a
Overview Overview
</h5> </h5>
<div <div
class="NamespaceSelectFilterParent" class="namespace-select-filter"
data-testid="namespace-select-filter" data-testid="namespace-select-filter"
id="overview-namespace-select-filter-input"
tabindex="1"
> >
<div <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"
> >
<div <div
class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer" class="non-icon"
>
<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 <input
aria-autocomplete="list" data-testid="namespace-select-filter-input"
aria-describedby="react-select-overview-namespace-select-filter-input-placeholder" id="overview-namespace-select-filter-input-input"
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" type="text"
value="" value=""
/> />
</div>
</div>
<div <div
class="Select__indicators css-1hb7zxy-IndicatorsContainer" class="gradient left"
/>
<label
data-testid="namespace-select-filter-label"
for="overview-namespace-select-filter-input-input"
>
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 <span
class="Select__indicator-separator css-1u9des2-indicatorSeparator" class="icon"
/> data-icon-name="expand_more"
<div
aria-hidden="true"
class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
> >
<svg expand_more
aria-hidden="true" </span>
class="css-tj5bde-Svg" </i>
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>
</div> </div>

4
packages/core/src/renderer/components/config-vertical-pod-autoscalers/vpa.tsx
View File

@ -14,9 +14,9 @@ import { KubeObjectStatusIcon } from "../kube-object-status-icon";
import { SiblingsInTabLayout } from "../layout/siblings-in-tab-layout"; import { SiblingsInTabLayout } from "../layout/siblings-in-tab-layout";
import { KubeObjectAge } from "../kube-object/age"; import { KubeObjectAge } from "../kube-object/age";
import type { VerticalPodAutoscalerStore } from "./store"; 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 { 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"; import verticalPodAutoscalerStoreInjectable from "./store.injectable";
enum columnId { enum columnId {

2
packages/core/src/renderer/components/helm-releases/releases.tsx
View File

@ -11,7 +11,7 @@ import type { HelmRelease } from "../../../common/k8s-api/endpoints/helm-release
import { withInjectables } from "@ogre-tools/injectable-react"; import { withInjectables } from "@ogre-tools/injectable-react";
import type { ItemListStore } from "../item-object-list"; import type { ItemListStore } from "../item-object-list";
import { ItemListLayout } from "../item-object-list"; import { ItemListLayout } from "../item-object-list";
import { NamespaceSelectFilter } from "../namespaces/namespace-select-filter"; import { NamespaceSelectFilter } from "../namespace-select-filter/component";
import { kebabCase } from "lodash/fp"; import { kebabCase } from "lodash/fp";
import { HelmReleaseMenu } from "./release-menu"; import { HelmReleaseMenu } from "./release-menu";
import { ReleaseRollbackDialog } from "./dialog/dialog"; import { ReleaseRollbackDialog } from "./dialog/dialog";

90
packages/core/src/renderer/components/kube-object-list-layout/__snapshots__/kube-object-list-layout.test.tsx.snap
View File

@ -21,82 +21,48 @@ exports[`kube-object-list-layout given pod store renders 1`] = `
0 items 0 items
</div> </div>
<div <div
class="NamespaceSelectFilterParent" class="namespace-select-filter"
data-testid="namespace-select-filter" data-testid="namespace-select-filter"
id="kube-object-list-layout-namespace-select-input"
tabindex="1"
> >
<div <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"
> >
<div <div
class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer" class="non-icon"
>
<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 <input
aria-autocomplete="list" data-testid="namespace-select-filter-input"
aria-describedby="react-select-kube-object-list-layout-namespace-select-input-placeholder" id="kube-object-list-layout-namespace-select-input-input"
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" type="text"
value="" value=""
/> />
</div>
</div>
<div <div
class="Select__indicators css-1hb7zxy-IndicatorsContainer" class="gradient left"
/>
<label
data-testid="namespace-select-filter-label"
for="kube-object-list-layout-namespace-select-input-input"
>
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 <span
class="Select__indicator-separator css-1u9des2-indicatorSeparator" class="icon"
/> data-icon-name="expand_more"
<div
aria-hidden="true"
class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
> >
<svg expand_more
aria-hidden="true" </span>
class="css-tj5bde-Svg" </i>
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>
</div> </div>

2
packages/core/src/renderer/components/kube-object-list-layout/kube-object-list-layout.tsx
View File

@ -14,7 +14,7 @@ import type { KubeJsonApiDataFor, KubeObject } from "@k8slens/kube-object";
import type { ItemListLayoutProps, ItemListStore } from "../item-object-list/list-layout"; import type { ItemListLayoutProps, ItemListStore } from "../item-object-list/list-layout";
import { ItemListLayout } from "../item-object-list/list-layout"; import { ItemListLayout } from "../item-object-list/list-layout";
import { KubeObjectMenu } from "../kube-object-menu"; import { KubeObjectMenu } from "../kube-object-menu";
import { NamespaceSelectFilter } from "../namespaces/namespace-select-filter"; import { NamespaceSelectFilter } from "../namespace-select-filter/component";
import { ResourceKindMap, ResourceNames } from "../../utils/rbac"; import { ResourceKindMap, ResourceNames } from "../../utils/rbac";
import { Icon } from "@k8slens/icon"; import { Icon } from "@k8slens/icon";
import { TooltipPosition } from "@k8slens/tooltip"; import { TooltipPosition } from "@k8slens/tooltip";

7065
packages/core/src/renderer/components/namespace-select-filter/__snapshots__/namespace-select-filter.test.tsx.snap Normal file
View File

File diff suppressed because it is too large Load Diff

207
packages/core/src/renderer/components/namespace-select-filter/component.tsx Normal file
View File

@ -0,0 +1,207 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
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 "./model.injectable";
import namespaceSelectFilterModelInjectable, { selectAllNamespaces } from "./model.injectable";
import { VariableSizeList } from "react-window";
import { Icon } from "@k8slens/icon";
import { cssNames, prevDefault } from "@k8slens/utilities";
import { addWindowEventListener } from "../../window/event-listener.injectable";
import { TooltipPosition } from "@k8slens/tooltip";
interface NamespaceSelectFilterProps {
id: string;
}
interface Dependencies {
model: NamespaceSelectFilterModel;
}
const Gradient = ({ type }: { type: "left" | "right" }) => (
<div className={cssNames("gradient", type)} />
);
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}-input`}
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" />
<label
htmlFor={`${id}-input`}
data-testid="namespace-select-filter-label"
>
{(
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"}
data-testid="namespace-select-filter-expand-icon"
onClick={model.menu.toggle}
/>
</div>
);
});
const rowHeight = 29;
const NonInjectedNamespaceSelectFilter = observer(({ model, id }: Dependencies & NamespaceSelectFilterProps) => {
const divRef = useRef<HTMLDivElement | null>(null);
useEffect(() => {
return addWindowEventListener("click", (event) => {
if (!model.menu.isOpen.get()) {
return;
}
if (divRef.current?.contains(event.target as Node)) {
return;
}
model.menu.close();
});
}, []);
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"
data-testid="namespace-select-filter-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 (
<li
style={style}
className={cssNames("option", "flex gaps align-center", {
"all-namespaces": option.value === selectAllNamespaces,
"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>
: (
<>
<Icon
small
material="layers"
onClick={prevDefault(() => model.onClick(option))}
tooltip={{
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)}
</>
)}
</li>
);
});
export const NamespaceSelectFilter = withInjectables<Dependencies, NamespaceSelectFilterProps>(NonInjectedNamespaceSelectFilter, {
getProps: (di, props) => ({
model: di.inject(namespaceSelectFilterModelInjectable),
...props,
}),
});

7
packages/core/src/renderer/components/namespaces/namespace-select-filter-model/is-selection-key.injectable.ts → packages/core/src/renderer/components/namespace-select-filter/is-selection-key.injectable.ts
View File

@ -4,7 +4,7 @@
*/ */
import { getInjectable } from "@ogre-tools/injectable"; import { getInjectable } from "@ogre-tools/injectable";
import type React from "react"; 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; export type IsMultiSelectionKey = (event: React.KeyboardEvent) => boolean;
@ -12,10 +12,9 @@ const isMultiSelectionKeyInjectable = getInjectable({
id: "is-multi-selection-key", id: "is-multi-selection-key",
instantiate: (di): IsMultiSelectionKey => { instantiate: (di): IsMultiSelectionKey => {
const isMac = di.inject(isMacInjectable); const isMac = di.inject(isMacInjectable);
const specificKey = isMac ? "Meta" : "Control";
return isMac return ({ key }) => key === specificKey;
? ({ key }) => key === "Meta"
: ({ key }) => key === "Control";
}, },
}); });

205
packages/core/src/renderer/components/namespace-select-filter/model.injectable.ts Normal file
View File

@ -0,0 +1,205 @@
/**
* 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;
};
readonly input: {
onKeyDown: 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();
}
}
},
},
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();
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;

83
packages/core/src/renderer/components/namespace-select-filter/namespace-select-filter.scss Normal file
View File

@ -0,0 +1,83 @@
.namespace-select-filter {
width: 300px;
position: relative;
.list-container {
position: absolute;
top: 30px;
z-index: 10;
background: var(--mainBackground);
border-radius: var(--border-radius);
li.option {
cursor: pointer;
padding: calc(var(--padding) / 2) var(--padding);
list-style: none;
&:hover {
color: white;
}
.selected-icon:hover {
color: var(--buttonAccentBackground);
}
.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;
.non-icon {
width: -webkit-fill-available;
position: relative;
input {
width: 100%;
background: 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;
&::-webkit-scrollbar {
display: none;
}
}
.gradient {
position: absolute;
width: 10px;
top: 0;
height: 20px;
z-index: 21;
&.left {
left: -7px;
background: linear-gradient(to right, var(--contentColor) 0%, rgba(255, 255, 255, 0) 100%);
}
&.right {
right: 2px;
background: linear-gradient(to left, var(--contentColor) 0%, rgba(255, 255, 255, 0) 100%);
}
}
}
}
}

561
packages/core/src/renderer/components/namespace-select-filter/namespace-select-filter.test.tsx Normal file
View File

@ -0,0 +1,561 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import type { AsyncFnMock } from "@async-fn/jest";
import asyncFn from "@async-fn/jest";
import type { DiContainer } from "@ogre-tools/injectable";
import type { RenderResult } from "@testing-library/react";
import { fireEvent } from "@testing-library/react";
import React from "react";
import directoryForKubeConfigsInjectable from "../../../common/app-paths/directory-for-kube-configs/directory-for-kube-configs.injectable";
import directoryForUserDataInjectable from "../../../common/app-paths/directory-for-user-data/directory-for-user-data.injectable";
import { Cluster } from "../../../common/cluster/cluster";
import type { Fetch } from "../../../common/fetch/fetch.injectable";
import fetchInjectable from "../../../common/fetch/fetch.injectable";
import { Namespace } from "@k8slens/kube-object";
import { createMockResponseFromString } from "../../../test-utils/mock-responses";
import hostedClusterInjectable from "../../cluster-frame-context/hosted-cluster.injectable";
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 { array, disposer } from "@k8slens/utilities";
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({
apiVersion: "v1",
kind: "Namespace",
metadata: {
name,
resourceVersion: "1",
selfLink: `/api/v1/namespaces/${name}`,
uid: `${name}-1`,
},
});
}
describe("<NamespaceSelectFilter />", () => {
let di: DiContainer;
let namespaceStore: NamespaceStore;
let fetchMock: AsyncFnMock<Fetch>;
let result: RenderResult;
let cleanup: Disposer;
beforeEach(() => {
di = getDiForUnitTesting();
di.unoverride(subscribeStoresInjectable);
di.override(directoryForUserDataInjectable, () => "/some-user-store-path");
di.override(directoryForKubeConfigsInjectable, () => "/some-kube-configs");
di.override(storesAndApisCanBeCreatedInjectable, () => true);
fetchMock = asyncFn();
di.override(fetchInjectable, () => fetchMock);
di.override(hostedClusterInjectable, () => new Cluster({
contextName: "some-context-name",
id: "some-cluster-id",
kubeConfigPath: "/some-path-to-a-kubeconfig",
}));
namespaceStore = di.inject(namespaceStoreInjectable);
const subscribeStores = di.inject(subscribeStoresInjectable);
cleanup = disposer(subscribeStores([namespaceStore]));
const render = renderFor(di);
result = render((
<NamespaceSelectFilter id="namespace-select-filter" />
));
});
afterEach(() => {
cleanup();
});
describe("once the subscribe resolves", () => {
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: [
createNamespace("test-1"),
createNamespace("test-2"),
createNamespace("test-3"),
createNamespace("test-4"),
createNamespace("test-5"),
createNamespace("test-6"),
createNamespace("test-7"),
createNamespace("test-8"),
createNamespace("test-9"),
createNamespace("test-10"),
createNamespace("test-11"),
createNamespace("test-12"),
createNamespace("test-13"),
],
})));
});
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();
});
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();
});
it("renders", () => {
expect(result.baseElement).toMatchSnapshot();
});
it("opens menu", () => {
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", () => {
beforeEach(() => {
result.getByTestId("namespace-select-filter-option-test-2").click();
});
it("renders", () => {
expect(result.baseElement).toMatchSnapshot();
});
it("has only 'test-2' is selected in the store", () => {
expect(namespaceStore.contextNamespaces).toEqual(["test-2"]);
});
it("closes menu", () => {
expect(result.queryByTestId("namespace-select-filter-list-container")).toBeNull();
});
describe("when clicked again", () => {
beforeEach(() => {
result.getByTestId("namespace-select-filter-input").click();
});
it("renders", () => {
expect(result.baseElement).toMatchSnapshot();
});
it("shows 'test-2' as selected", () => {
expect(result.queryByTestId("namespace-select-filter-option-test-2-selected")).toBeInTheDocument();
});
it("does not show 'test-1' as selected", () => {
expect(result.queryByTestId("namespace-select-filter-option-test-1-selected")).toBeNull();
});
describe("when 'test-1' is clicked", () => {
beforeEach(() => {
result.getByTestId("namespace-select-filter-option-test-1").click();
});
it("renders", () => {
expect(result.baseElement).toMatchSnapshot();
});
it("has only 'test-1' is selected in the store", () => {
expect(namespaceStore.contextNamespaces).toEqual(["test-1"]);
});
it("closes menu", () => {
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-input");
filter.click();
fireEvent.keyDown(filter, { key: "Meta" });
});
describe("when 'test-3' is clicked", () => {
beforeEach(() => {
result.getByTestId("namespace-select-filter-option-test-3").click();
});
it("renders", () => {
expect(result.baseElement).toMatchSnapshot();
});
it("has both 'test-1' and 'test-3' as selected in the store", () => {
expect(new Set(namespaceStore.contextNamespaces)).toEqual(new Set(["test-1", "test-3"]));
});
it("keeps menu open", () => {
expect(result.getByTestId("namespace-select-filter-list-container")).toBeInTheDocument();
});
it("does not show 'kube-system' as selected", () => {
expect(result.queryByTestId("namespace-select-filter-option-kube-system-selected")).toBeNull();
});
describe("when 'test-13' is clicked", () => {
beforeEach(() => {
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("keeps menu open", () => {
expect(result.getByTestId("namespace-select-filter-list-container")).toBeInTheDocument();
});
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-input");
fireEvent.keyUp(filter, { key: "Meta" });
});
it("closes menu", () => {
expect(result.queryByTestId("namespace-select-filter-list-container")).toBeNull();
});
});
});
describe("when releasing multi select key", () => {
beforeEach(() => {
const filter = result.getByTestId("namespace-select-filter-input");
fireEvent.keyUp(filter, { key: "Meta" });
});
it("keeps menu open", () => {
expect(result.getByTestId("namespace-select-filter-list-container")).toBeInTheDocument();
});
});
});
});
});
});
describe("when multi-selection key is pressed", () => {
beforeEach(() => {
const filter = result.getByTestId("namespace-select-filter-input");
fireEvent.keyDown(filter, { key: "Meta" });
});
it("should show placeholder text as 'All namespaces'", () => {
expect(result.getByTestId("namespace-select-filter")).toHaveTextContent("All namespaces");
});
describe("when 'test-2' is clicked", () => {
beforeEach(() => {
result.getByTestId("namespace-select-filter-option-test-2").click();
});
it("should not show placeholder text as 'All namespaces'", () => {
expect(result.getByTestId("namespace-select-filter")).not.toHaveTextContent("All namespaces");
});
describe("when 'test-2' is clicked", () => {
beforeEach(() => {
result.getByTestId("namespace-select-filter-option-test-2").click();
});
it("should not show placeholder as '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-input");
fireEvent.keyUp(filter, { key: "Meta" });
});
it("should show placeholder text as 'All namespaces'", () => {
expect(result.getByTestId("namespace-select-filter")).not.toHaveTextContent("All namespaces");
});
});
});
});
});
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("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();
});
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 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", () => {
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();
});
});
});
});
});
});
});
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();
});
});
});
});
});

1698
packages/core/src/renderer/components/namespaces/__snapshots__/namespace-select-filter.test.tsx.snap
View File

File diff suppressed because it is too large Load Diff

2
packages/core/src/renderer/components/namespaces/namespace-select-filter-model/filter-by-namespace.injectable.ts → packages/core/src/renderer/components/namespaces/filter-by-namespace.injectable.ts
View File

@ -3,7 +3,7 @@
* Licensed under MIT License. See LICENSE in root directory for more information. * Licensed under MIT License. See LICENSE in root directory for more information.
*/ */
import { getInjectable } from "@ogre-tools/injectable"; import { getInjectable } from "@ogre-tools/injectable";
import namespaceStoreInjectable from "../store.injectable"; import namespaceStoreInjectable from "./store.injectable";
export type FilterByNamespace = (namespace: string) => void; export type FilterByNamespace = (namespace: string) => void;

13
packages/core/src/renderer/components/namespaces/namespace-select-badge.tsx
View File

@ -8,11 +8,8 @@ import React from "react";
import { withInjectables } from "@ogre-tools/injectable-react"; import { withInjectables } from "@ogre-tools/injectable-react";
import type { BadgeProps } from "../badge"; import type { BadgeProps } from "../badge";
import { Badge } from "../badge"; import { Badge } from "../badge";
import type { import type { FilterByNamespace } from "./filter-by-namespace.injectable";
FilterByNamespace, import filterByNamespaceInjectable from "./filter-by-namespace.injectable";
} from "./namespace-select-filter-model/filter-by-namespace.injectable";
import filterByNamespaceInjectable
from "./namespace-select-filter-model/filter-by-namespace.injectable";
import { prevDefault, cssNames } from "@k8slens/utilities"; import { prevDefault, cssNames } from "@k8slens/utilities";
export interface NamespaceSelectBadgeProps extends BadgeProps { export interface NamespaceSelectBadgeProps extends BadgeProps {
@ -49,10 +46,8 @@ export function NamespaceSelectBadgeNonInjected(
} }
export const NamespaceSelectBadge = withInjectables<Dependencies, NamespaceSelectBadgeProps>(NamespaceSelectBadgeNonInjected, { export const NamespaceSelectBadge = withInjectables<Dependencies, NamespaceSelectBadgeProps>(NamespaceSelectBadgeNonInjected, {
getProps(di, props) { getProps: (di, props) => ({
return {
...props, ...props,
filterByNamespace: di.inject(filterByNamespaceInjectable), filterByNamespace: di.inject(filterByNamespaceInjectable),
}; }),
},
}); });

21
packages/core/src/renderer/components/namespaces/namespace-select-filter-model/namespace-select-filter-model.injectable.ts
View File

@ -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 "../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;

182
packages/core/src/renderer/components/namespaces/namespace-select-filter-model/namespace-select-filter-model.tsx
View File

@ -1,182 +0,0 @@
/**
* 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 { 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";
interface Dependencies {
context: ClusterContext;
namespaceStore: NamespaceStore;
isMultiSelectionKey: IsMultiSelectionKey;
}
export const selectAllNamespaces = Symbol("all-namespaces-selected");
export type SelectAllNamespaces = typeof selectAllNamespaces;
export type NamespaceSelectFilterOption = SelectOption<string | SelectAllNamespaces>;
export interface NamespaceSelectFilterModel {
readonly options: IComputedValue<readonly NamespaceSelectFilterOption[]>;
readonly menu: {
open: () => void;
close: () => void;
readonly isOpen: IComputedValue<boolean>;
};
onChange: (newValue: MultiValue<NamespaceSelectFilterOption>, actionMeta: ActionMeta<NamespaceSelectFilterOption>) => void;
onClick: () => void;
onKeyDown: React.KeyboardEventHandler;
onKeyUp: React.KeyboardEventHandler;
reset: () => void;
isOptionSelected: (option: NamespaceSelectFilterOption) => boolean;
formatOptionLabel: (option: NamespaceSelectFilterOption) => JSX.Element;
}
enum SelectMenuState {
Close = "close",
Open = "open",
}
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 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((): readonly NamespaceSelectFilterOption[] => [
{
value: selectAllNamespaces,
label: "All Namespaces",
id: "all-namespaces",
},
...context
.allNamespaces
.sort(sortNamespacesByIfTheyHaveBeenSelected)
.map(namespace => ({
value: namespace,
label: namespace,
id: namespace,
})),
]);
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,
menu: {
close: action(() => {
menuState.set(SelectMenuState.Close);
}),
open: action(() => {
menuState.set(SelectMenuState.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);
}
}
break;
}
},
onClick: () => {
if (!menuIsOpen.get()) {
model.menu.open();
} else if (!isMultiSelection) {
model.menu.close();
}
},
onKeyDown: (event) => {
if (isMultiSelectionKey(event)) {
isMultiSelection = true;
}
},
onKeyUp: (event) => {
if (isMultiSelectionKey(event)) {
isMultiSelection = false;
if (didToggle) {
model.menu.close();
}
}
},
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;
}

78
packages/core/src/renderer/components/namespaces/namespace-select-filter.scss
View File

@ -1,78 +0,0 @@
@include theme-light {
.NamespaceSelectFilter {
--gradientColor: white;
}
}
.NamespaceSelectFilterParent {
max-width: 300px;
}
.NamespaceSelectFilter {
--gradientColor: var(--select-menu-bgc);
.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;
&::-webkit-scrollbar {
display: none;
}
}
&__value-container {
position: relative;
&::before, &::after {
content: ' ';
position: absolute;
z-index: 20;
display: block;
width: 8px;
height: var(--font-size);
}
&::before {
left: 0;
background: linear-gradient(to right, var(--gradientColor) 0px, transparent);
}
&::after {
right: 0;
background: linear-gradient(to left, var(--gradientColor) 0px, transparent);
}
}
}
}
.NamespaceSelectFilterMenu {
right: 0;
.Select {
&__menu-list {
max-width: 400px;
}
&__option {
white-space: normal;
word-break: break-all;
padding: 4px 8px;
border-radius: 3px;
&--is-selected:not(&--is-focused) {
background: transparent;
}
}
}
.Icon {
margin-right: $margin * 0.5;
}
}

297
packages/core/src/renderer/components/namespaces/namespace-select-filter.test.tsx
View File

@ -1,297 +0,0 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import type { AsyncFnMock } from "@async-fn/jest";
import asyncFn from "@async-fn/jest";
import type { DiContainer } from "@ogre-tools/injectable";
import type { RenderResult } from "@testing-library/react";
import { fireEvent } from "@testing-library/react";
import React from "react";
import directoryForKubeConfigsInjectable from "../../../common/app-paths/directory-for-kube-configs/directory-for-kube-configs.injectable";
import directoryForUserDataInjectable from "../../../common/app-paths/directory-for-user-data/directory-for-user-data.injectable";
import { Cluster } from "../../../common/cluster/cluster";
import type { Fetch } from "../../../common/fetch/fetch.injectable";
import fetchInjectable from "../../../common/fetch/fetch.injectable";
import { Namespace } from "@k8slens/kube-object";
import { createMockResponseFromString } from "../../../test-utils/mock-responses";
import hostedClusterInjectable from "../../cluster-frame-context/hosted-cluster.injectable";
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 { renderFor } from "../test-utils/renderFor";
import { NamespaceSelectFilter } from "./namespace-select-filter";
import type { NamespaceStore } from "./store";
import namespaceStoreInjectable from "./store.injectable";
function createNamespace(name: string): Namespace {
return new Namespace({
apiVersion: "v1",
kind: "Namespace",
metadata: {
name,
resourceVersion: "1",
selfLink: `/api/v1/namespaces/${name}`,
uid: `${name}-1`,
},
});
}
describe("<NamespaceSelectFilter />", () => {
let di: DiContainer;
let namespaceStore: NamespaceStore;
let fetchMock: AsyncFnMock<Fetch>;
let result: RenderResult;
let cleanup: Disposer;
beforeEach(() => {
di = getDiForUnitTesting();
di.unoverride(subscribeStoresInjectable);
di.override(directoryForUserDataInjectable, () => "/some-user-store-path");
di.override(directoryForKubeConfigsInjectable, () => "/some-kube-configs");
di.override(storesAndApisCanBeCreatedInjectable, () => true);
fetchMock = asyncFn();
di.override(fetchInjectable, () => fetchMock);
di.override(hostedClusterInjectable, () => new Cluster({
contextName: "some-context-name",
id: "some-cluster-id",
kubeConfigPath: "/some-path-to-a-kubeconfig",
}));
namespaceStore = di.inject(namespaceStoreInjectable);
const subscribeStores = di.inject(subscribeStoresInjectable);
cleanup = disposer(subscribeStores([namespaceStore]));
const render = renderFor(di);
result = render((
<NamespaceSelectFilter id="namespace-select-filter" />
));
});
afterEach(() => {
cleanup();
});
describe("once the subscribe resolves", () => {
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: [
createNamespace("test-1"),
createNamespace("test-2"),
createNamespace("test-3"),
createNamespace("test-4"),
createNamespace("test-5"),
createNamespace("test-6"),
createNamespace("test-7"),
createNamespace("test-8"),
createNamespace("test-9"),
createNamespace("test-10"),
createNamespace("test-11"),
createNamespace("test-12"),
createNamespace("test-13"),
],
})));
});
it("renders", () => {
expect(result.baseElement).toMatchSnapshot();
});
describe("when clicked", () => {
beforeEach(() => {
result.getByTestId("namespace-select-filter").click();
});
it("renders", () => {
expect(result.baseElement).toMatchSnapshot();
});
it("opens menu", () => {
expect(result.baseElement.querySelector("#react-select-namespace-select-filter-listbox")).not.toBeNull();
});
describe("when 'test-2' is clicked", () => {
beforeEach(() => {
result.getByText("test-2").click();
});
it("renders", () => {
expect(result.baseElement).toMatchSnapshot();
});
it("has only 'test-2' is selected in the store", () => {
expect(namespaceStore.contextNamespaces).toEqual(["test-2"]);
});
it("closes menu", () => {
expect(result.baseElement.querySelector("#react-select-namespace-select-filter-listbox")).toBeNull();
});
describe("when clicked again", () => {
beforeEach(() => {
result.getByTestId("namespace-select-filter").click();
});
it("renders", () => {
expect(result.baseElement).toMatchSnapshot();
});
it("shows 'test-2' as selected", () => {
expect(result.queryByTestId("namespace-select-filter-option-test-2-selected")).not.toBeNull();
});
it("does not show 'test-1' as selected", () => {
expect(result.queryByTestId("namespace-select-filter-option-test-1-selected")).toBeNull();
});
describe("when 'test-1' is clicked", () => {
beforeEach(() => {
result.getByText("test-1").click();
});
it("renders", () => {
expect(result.baseElement).toMatchSnapshot();
});
it("has only 'test-1' is selected in the store", () => {
expect(namespaceStore.contextNamespaces).toEqual(["test-1"]);
});
it("closes menu", () => {
expect(result.baseElement.querySelector("#react-select-namespace-select-filter-listbox")).toBeNull();
});
describe("when clicked again, then holding down multi select key", () => {
beforeEach(() => {
const filter = result.getByTestId("namespace-select-filter");
filter.click();
fireEvent.keyDown(filter, { key: "Meta" });
});
describe("when 'test-3' is clicked", () => {
beforeEach(() => {
result.getByText("test-3").click();
});
it("renders", () => {
expect(result.baseElement).toMatchSnapshot();
});
it("has both 'test-1' and 'test-3' as selected in the store", () => {
expect(new Set(namespaceStore.contextNamespaces)).toEqual(new Set(["test-1", "test-3"]));
});
it("keeps menu open", () => {
expect(result.baseElement.querySelector("#react-select-namespace-select-filter-listbox")).not.toBeNull();
});
it("does not show 'kube-system' as selected", () => {
expect(result.queryByTestId("namespace-select-filter-option-kube-system-selected")).toBeNull();
});
describe("when 'test-13' is clicked", () => {
beforeEach(() => {
result.getByText("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;
expect(topLevelElement.previousSibling).not.toBe(null);
});
});
describe("when releasing multi select key", () => {
beforeEach(() => {
const filter = result.getByTestId("namespace-select-filter");
fireEvent.keyUp(filter, { key: "Meta" });
});
it("closes menu", () => {
expect(result.baseElement.querySelector("#react-select-namespace-select-filter-listbox")).toBeNull();
});
});
});
describe("when releasing multi select key", () => {
beforeEach(() => {
const filter = result.getByTestId("namespace-select-filter");
fireEvent.keyUp(filter, { key: "Meta" });
});
it("keeps menu open", () => {
expect(result.baseElement.querySelector("#react-select-namespace-select-filter-listbox")).not.toBeNull();
});
});
});
});
});
});
describe("when multi-selection key is pressed", () => {
beforeEach(() => {
const filter = result.getByTestId("namespace-select-filter");
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");
});
describe("when 'test-2' is clicked", () => {
beforeEach(() => {
result.getByText("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");
});
describe("when 'test-2' is clicked", () => {
beforeEach(() => {
result.getByText("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");
});
describe("when multi-selection key is raised", () => {
beforeEach(() => {
const filter = result.getByTestId("namespace-select-filter");
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");
});
});
});
});
});
});
});
});

95
packages/core/src/renderer/components/namespaces/namespace-select-filter.tsx
View File

@ -1,95 +0,0 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import "./namespace-select-filter.scss";
import React 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 namespaceSelectFilterModelInjectable from "./namespace-select-filter-model/namespace-select-filter-model.injectable";
import namespaceStoreInjectable from "./store.injectable";
interface NamespaceSelectFilterProps {
id: string;
}
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>
));
export const NamespaceSelectFilter = withInjectables<Dependencies, NamespaceSelectFilterProps>(NonInjectedNamespaceSelectFilter, {
getProps: (di, props) => ({
model: di.inject(namespaceSelectFilterModelInjectable),
...props,
}),
});
export interface CustomPlaceholderProps extends PlaceholderProps<NamespaceSelectFilterOption, true> {}
interface PlaceholderDependencies {
namespaceStore: NamespaceStore;
}
const NonInjectedPlaceholder = observer(({ namespaceStore, ...props }: CustomPlaceholderProps & PlaceholderDependencies) => {
const getPlaceholder = () => {
const namespaces = namespaceStore.contextNamespaces;
if (namespaceStore.areAllSelectedImplicitly || namespaces.length === 0) {
return "All namespaces";
}
const prefix = namespaces.length === 1
? "Namespace"
: "Namespaces";
return `${prefix}: ${namespaces.join(", ")}`;
};
return (
<components.Placeholder {...props}>
{getPlaceholder()}
</components.Placeholder>
);
});
const Placeholder = withInjectables<PlaceholderDependencies, CustomPlaceholderProps>( NonInjectedPlaceholder, {
getProps: (di, props) => ({
namespaceStore: di.inject(namespaceStoreInjectable),
...props,
}),
});

14
packages/core/src/renderer/components/namespaces/store.ts
View File

@ -171,6 +171,20 @@ export class NamespaceStore extends KubeObjectStore<Namespace, NamespaceApi> {
this.dependencies.storage.set([...nextState]); 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 * Makes the given namespace the sole selected namespace
*/ */

2
packages/core/src/renderer/components/workloads-overview/overview.tsx
View File

@ -13,7 +13,7 @@ import type { JobStore } from "../workloads-jobs/store";
import type { CronJobStore } from "../workloads-cronjobs/store"; import type { CronJobStore } from "../workloads-cronjobs/store";
import type { IComputedValue } from "mobx"; import type { IComputedValue } from "mobx";
import { makeObservable, observable, reaction } from "mobx"; import { makeObservable, observable, reaction } from "mobx";
import { NamespaceSelectFilter } from "../namespaces/namespace-select-filter"; import { NamespaceSelectFilter } from "../namespace-select-filter/component";
import { Icon } from "@k8slens/icon"; import { Icon } from "@k8slens/icon";
import { TooltipPosition } from "@k8slens/tooltip"; import { TooltipPosition } from "@k8slens/tooltip";
import { withInjectables } from "@ogre-tools/injectable-react"; import { withInjectables } from "@ogre-tools/injectable-react";

90
packages/core/src/renderer/frames/cluster-frame/__snapshots__/cluster-frame.test.tsx.snap
View File

@ -1323,82 +1323,48 @@ exports[`<ClusterFrame /> given cluster without list nodes, but with namespaces
Overview Overview
</h5> </h5>
<div <div
class="NamespaceSelectFilterParent" class="namespace-select-filter"
data-testid="namespace-select-filter" data-testid="namespace-select-filter"
id="overview-namespace-select-filter-input"
tabindex="1"
> >
<div <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"
> >
<div <div
class="Select__value-container Select__value-container--is-multi css-1fdsijx-ValueContainer" class="non-icon"
>
<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 <input
aria-autocomplete="list" data-testid="namespace-select-filter-input"
aria-describedby="react-select-overview-namespace-select-filter-input-placeholder" id="overview-namespace-select-filter-input-input"
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" type="text"
value="" value=""
/> />
</div>
</div>
<div <div
class="Select__indicators css-1hb7zxy-IndicatorsContainer" class="gradient left"
/>
<label
data-testid="namespace-select-filter-label"
for="overview-namespace-select-filter-input-input"
>
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 <span
class="Select__indicator-separator css-1u9des2-indicatorSeparator" class="icon"
/> data-icon-name="expand_more"
<div
aria-hidden="true"
class="Select__indicator Select__dropdown-indicator css-1xc3v61-indicatorContainer"
> >
<svg expand_more
aria-hidden="true" </span>
class="css-tj5bde-Svg" </i>
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>
</div> </div>

4
packages/core/src/renderer/window/event-listener.injectable.ts
View File

@ -9,10 +9,10 @@ import type { Disposer } from "@k8slens/utilities";
export type AddWindowEventListener = typeof addWindowEventListener; export type AddWindowEventListener = typeof addWindowEventListener;
export type WindowEventListener<K extends keyof WindowEventMap> = (this: Window, ev: WindowEventMap[K]) => any; 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); window.addEventListener(type, listener, options);
return () => void window.removeEventListener(type, listener); return () => void window.removeEventListener(type, listener, options);
} }
const windowAddEventListenerInjectable = getInjectable({ const windowAddEventListenerInjectable = getInjectable({

3
packages/utility-features/utilities/src/type-narrowing.ts
View File

@ -123,7 +123,8 @@ export function isDefined<T>(val: T | undefined | null): val is T {
return val != null; 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"; return typeof val === "function";
} }