lensapp/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2024-11-10 10:36:25 +03:00
Code Issues Projects Releases Wiki Activity

Expose a way to reactively control visibility of preference tabs and tray menu items through Extension API (#5789)

Browse Source
This commit is contained in:
Janne Savolainen 2022-07-06 15:51:59 +03:00 committed by GitHub
parent 544bbdc952
commit eb6cc70143
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
30 changed files with 1295 additions and 194 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/behaviours/cluster/__snapshots__/order-of-sidebar-items.test.tsx.snap
View File

@ -524,7 +524,7 @@ exports[`cluster - order of sidebar items when rendered renders 1`] = `
>
<i
class="Icon new-dock-tab material interactive focusable"
id="menu_actions_15"
id="menu-actions-for-dock"
tabindex="0"
>
<span
@ -538,7 +538,7 @@ exports[`cluster - order of sidebar items when rendered renders 1`] = `
</div>
<i
class="Icon material interactive focusable"
id="tooltip_target_17"
id="tooltip_target_16"
tabindex="0"
>
<span
@ -551,7 +551,7 @@ exports[`cluster - order of sidebar items when rendered renders 1`] = `
</i>
<i
class="Icon material interactive focusable"
id="tooltip_target_18"
id="tooltip_target_17"
tabindex="0"
>
<span
@ -1127,7 +1127,7 @@ exports[`cluster - order of sidebar items when rendered when parent is expanded
>
<i
class="Icon material interactive focusable small"
id="tooltip_target_54"
id="tooltip_target_52"
tabindex="0"
>
<span
@ -1152,7 +1152,7 @@ exports[`cluster - order of sidebar items when rendered when parent is expanded
>
<i
class="Icon new-dock-tab material interactive focusable"
id="menu_actions_55"
id="menu-actions-for-dock"
tabindex="0"
>
<span
@ -1166,7 +1166,7 @@ exports[`cluster - order of sidebar items when rendered when parent is expanded
</div>
<i
class="Icon material interactive focusable"
id="tooltip_target_57"
id="tooltip_target_54"
tabindex="0"
>
<span
@ -1179,7 +1179,7 @@ exports[`cluster - order of sidebar items when rendered when parent is expanded
</i>
<i
class="Icon material interactive focusable"
id="tooltip_target_58"
id="tooltip_target_55"
tabindex="0"
>
<span

54
src/behaviours/cluster/__snapshots__/sidebar-and-tab-navigation-for-core.test.tsx.snap
View File

@ -468,7 +468,7 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
>
<i
class="Icon material interactive focusable small"
id="tooltip_target_186"
id="tooltip_target_177"
tabindex="0"
>
<span
@ -493,7 +493,7 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
>
<i
class="Icon new-dock-tab material interactive focusable"
id="menu_actions_187"
id="menu-actions-for-dock"
tabindex="0"
>
<span
@ -507,7 +507,7 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
</div>
<i
class="Icon material interactive focusable"
id="tooltip_target_189"
id="tooltip_target_179"
tabindex="0"
>
<span
@ -520,7 +520,7 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
</i>
<i
class="Icon material interactive focusable"
id="tooltip_target_190"
id="tooltip_target_180"
tabindex="0"
>
<span
@ -1007,7 +1007,7 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
>
<i
class="Icon material interactive focusable small"
id="tooltip_target_226"
id="tooltip_target_215"
tabindex="0"
>
<span
@ -1032,7 +1032,7 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
>
<i
class="Icon new-dock-tab material interactive focusable"
id="menu_actions_227"
id="menu-actions-for-dock"
tabindex="0"
>
<span
@ -1046,7 +1046,7 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
</div>
<i
class="Icon material interactive focusable"
id="tooltip_target_229"
id="tooltip_target_217"
tabindex="0"
>
<span
@ -1059,7 +1059,7 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
</i>
<i
class="Icon material interactive focusable"
id="tooltip_target_230"
id="tooltip_target_218"
tabindex="0"
>
<span
@ -1568,7 +1568,7 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
>
<i
class="Icon material interactive focusable small"
id="tooltip_target_286"
id="tooltip_target_272"
tabindex="0"
>
<span
@ -1593,7 +1593,7 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
>
<i
class="Icon new-dock-tab material interactive focusable"
id="menu_actions_287"
id="menu-actions-for-dock"
tabindex="0"
>
<span
@ -1607,7 +1607,7 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
</div>
<i
class="Icon material interactive focusable"
id="tooltip_target_289"
id="tooltip_target_274"
tabindex="0"
>
<span
@ -1620,7 +1620,7 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
</i>
<i
class="Icon material interactive focusable"
id="tooltip_target_290"
id="tooltip_target_275"
tabindex="0"
>
<span
@ -2013,7 +2013,7 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
>
<i
class="Icon material interactive focusable small"
id="tooltip_target_349"
id="tooltip_target_332"
tabindex="0"
>
<span
@ -2038,7 +2038,7 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
>
<i
class="Icon new-dock-tab material interactive focusable"
id="menu_actions_350"
id="menu-actions-for-dock"
tabindex="0"
>
<span
@ -2052,7 +2052,7 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
</div>
<i
class="Icon material interactive focusable"
id="tooltip_target_352"
id="tooltip_target_334"
tabindex="0"
>
<span
@ -2065,7 +2065,7 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
</i>
<i
class="Icon material interactive focusable"
id="tooltip_target_353"
id="tooltip_target_335"
tabindex="0"
>
<span
@ -2460,7 +2460,7 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
>
<i
class="Icon new-dock-tab material interactive focusable"
id="menu_actions_15"
id="menu-actions-for-dock"
tabindex="0"
>
<span
@ -2474,7 +2474,7 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
</div>
<i
class="Icon material interactive focusable"
id="tooltip_target_17"
id="tooltip_target_16"
tabindex="0"
>
<span
@ -2487,7 +2487,7 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
</i>
<i
class="Icon material interactive focusable"
id="tooltip_target_18"
id="tooltip_target_17"
tabindex="0"
>
<span
@ -2996,7 +2996,7 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
>
<i
class="Icon material interactive focusable small"
id="tooltip_target_86"
id="tooltip_target_82"
tabindex="0"
>
<span
@ -3021,7 +3021,7 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
>
<i
class="Icon new-dock-tab material interactive focusable"
id="menu_actions_87"
id="menu-actions-for-dock"
tabindex="0"
>
<span
@ -3035,7 +3035,7 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
</div>
<i
class="Icon material interactive focusable"
id="tooltip_target_89"
id="tooltip_target_84"
tabindex="0"
>
<span
@ -3048,7 +3048,7 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
</i>
<i
class="Icon material interactive focusable"
id="tooltip_target_90"
id="tooltip_target_85"
tabindex="0"
>
<span
@ -3535,7 +3535,7 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
>
<i
class="Icon material interactive focusable small"
id="tooltip_target_146"
id="tooltip_target_139"
tabindex="0"
>
<span
@ -3560,7 +3560,7 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
>
<i
class="Icon new-dock-tab material interactive focusable"
id="menu_actions_147"
id="menu-actions-for-dock"
tabindex="0"
>
<span
@ -3574,7 +3574,7 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
</div>
<i
class="Icon material interactive focusable"
id="tooltip_target_149"
id="tooltip_target_141"
tabindex="0"
>
<span
@ -3587,7 +3587,7 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
</i>
<i
class="Icon material interactive focusable"
id="tooltip_target_150"
id="tooltip_target_142"
tabindex="0"
>
<span

16
src/behaviours/cluster/__snapshots__/sidebar-and-tab-navigation-for-extensions.test.tsx.snap
View File

@ -492,7 +492,7 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
>
<i
class="Icon new-dock-tab material interactive focusable"
id="menu_actions_10"
id="menu-actions-for-dock"
tabindex="0"
tooltip="New tab"
>
@ -1028,7 +1028,7 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
>
<i
class="Icon new-dock-tab material interactive focusable"
id="menu_actions_12"
id="menu-actions-for-dock"
tabindex="0"
tooltip="New tab"
>
@ -1604,7 +1604,7 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
>
<i
class="Icon new-dock-tab material interactive focusable"
id="menu_actions_15"
id="menu-actions-for-dock"
tabindex="0"
tooltip="New tab"
>
@ -2103,7 +2103,7 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
>
<i
class="Icon new-dock-tab material interactive focusable"
id="menu_actions_18"
id="menu-actions-for-dock"
tabindex="0"
tooltip="New tab"
>
@ -2602,7 +2602,7 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
>
<i
class="Icon new-dock-tab material interactive focusable"
id="menu_actions_27"
id="menu-actions-for-dock"
tabindex="0"
tooltip="New tab"
>
@ -3060,7 +3060,7 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
>
<i
class="Icon new-dock-tab material interactive focusable"
id="menu_actions_1"
id="menu-actions-for-dock"
tabindex="0"
tooltip="New tab"
>
@ -3636,7 +3636,7 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
>
<i
class="Icon new-dock-tab material interactive focusable"
id="menu_actions_5"
id="menu-actions-for-dock"
tabindex="0"
tooltip="New tab"
>
@ -4172,7 +4172,7 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
>
<i
class="Icon new-dock-tab material interactive focusable"
id="menu_actions_8"
id="menu-actions-for-dock"
tabindex="0"
tooltip="New tab"
>

14
src/behaviours/cluster/__snapshots__/visibility-of-sidebar-items.test.tsx.snap
View File

@ -463,7 +463,7 @@ exports[`cluster - visibility of sidebar items given kube resource for route is
>
<i
class="Icon new-dock-tab material interactive focusable"
id="menu_actions_14"
id="menu-actions-for-dock"
tabindex="0"
>
<span
@ -477,7 +477,7 @@ exports[`cluster - visibility of sidebar items given kube resource for route is
</div>
<i
class="Icon material interactive focusable"
id="tooltip_target_16"
id="tooltip_target_15"
tabindex="0"
>
<span
@ -490,7 +490,7 @@ exports[`cluster - visibility of sidebar items given kube resource for route is
</i>
<i
class="Icon material interactive focusable"
id="tooltip_target_17"
id="tooltip_target_16"
tabindex="0"
>
<span
@ -991,7 +991,7 @@ exports[`cluster - visibility of sidebar items given kube resource for route is
>
<i
class="Icon material interactive focusable small"
id="tooltip_target_51"
id="tooltip_target_49"
tabindex="0"
>
<span
@ -1016,7 +1016,7 @@ exports[`cluster - visibility of sidebar items given kube resource for route is
>
<i
class="Icon new-dock-tab material interactive focusable"
id="menu_actions_52"
id="menu-actions-for-dock"
tabindex="0"
>
<span
@ -1030,7 +1030,7 @@ exports[`cluster - visibility of sidebar items given kube resource for route is
</div>
<i
class="Icon material interactive focusable"
id="tooltip_target_54"
id="tooltip_target_51"
tabindex="0"
>
<span
@ -1043,7 +1043,7 @@ exports[`cluster - visibility of sidebar items given kube resource for route is
</i>
<i
class="Icon material interactive focusable"
id="tooltip_target_55"
id="tooltip_target_52"
tabindex="0"
>
<span

174
src/behaviours/cluster/sidebar-and-tab-navigation-for-extensions.test.tsx
View File

@ -16,10 +16,11 @@ import readJsonFileInjectable from "../../common/fs/read-json-file.injectable";
import type { DiContainer } from "@ogre-tools/injectable";
import { navigateToRouteInjectionToken } from "../../common/front-end-routing/navigate-to-route-injection-token";
import assert from "assert";
import type { FakeExtensionData } from "../../renderer/components/test-utils/get-renderer-extension-fake";
import { getRendererExtensionFakeFor } from "../../renderer/components/test-utils/get-renderer-extension-fake";
import hostedClusterIdInjectable from "../../renderer/cluster-frame-context/hosted-cluster-id.injectable";
import { advanceFakeTime, useFakeTime } from "../../common/test-utils/use-fake-time";
import { getExtensionFakeFor } from "../../renderer/components/test-utils/get-extension-fake";
import type { IObservableValue } from "mobx";
import { runInAction, computed, observable } from "mobx";
// TODO: Make tooltips free of side effects by making it deterministic
jest.mock("../../renderer/components/tooltip/withTooltip", () => ({
@ -50,11 +51,90 @@ describe("cluster - sidebar and tab navigation for extensions", () => {
});
describe("given extension with cluster pages and cluster page menus", () => {
beforeEach(() => {
const getRendererExtensionFake = getRendererExtensionFakeFor(applicationBuilder);
const testExtension = getRendererExtensionFake(extensionStubWithSidebarItems);
let someObservable: IObservableValue<boolean>;
applicationBuilder.extensions.renderer.enable(testExtension);
beforeEach(() => {
someObservable = observable.box(false);
const getExtensionFake = getExtensionFakeFor(applicationBuilder);
const testExtension = getExtensionFake({
id: "some-extension-id",
name: "some-extension-name",
rendererOptions: {
clusterPages: [
{
components: {
Page: () => {
throw new Error("should never come here");
},
},
},
{
id: "some-child-page-id",
components: {
Page: () => <div data-testid="some-child-page">Some child page</div>,
},
},
{
id: "some-other-child-page-id",
components: {
Page: () => (
<div data-testid="some-other-child-page">Some other child page</div>
),
},
},
],
clusterPageMenus: [
{
id: "some-parent-id",
title: "Parent",
components: {
Icon: () => <div>Some icon</div>,
},
},
{
id: "some-child-id",
target: { pageId: "some-child-page-id" },
parentId: "some-parent-id",
title: "Child 1",
components: {
Icon: null as never,
},
},
{
id: "some-other-child-id",
target: { pageId: "some-other-child-page-id" },
parentId: "some-parent-id",
title: "Child 2",
components: {
Icon: null as never,
},
},
{
id: "some-menu-with-controlled-visibility",
title: "Some menu with controlled visibility",
visible: computed(() => someObservable.get()),
components: {
Icon: () => <div>Some icon</div>,
},
},
],
},
});
applicationBuilder.extensions.enable(testExtension);
});
describe("given no state for expanded sidebar items exists, and navigated to child sidebar item, when rendered", () => {
@ -212,6 +292,26 @@ describe("cluster - sidebar and tab navigation for extensions", () => {
expect(child).toBeNull();
});
it("does not show the sidebar item that should be hidden", () => {
const child = rendered.queryByTestId(
"sidebar-item-some-extension-name-some-menu-with-controlled-visibility",
);
expect(child).not.toBeInTheDocument();
});
it("when sidebar item becomes visible, shows the sidebar item", () => {
runInAction(() => {
someObservable.set(true);
});
const child = rendered.queryByTestId(
"sidebar-item-some-extension-name-some-menu-with-controlled-visibility",
);
expect(child).toBeInTheDocument();
});
describe("when a parent sidebar item is expanded", () => {
beforeEach(() => {
const parentLink = rendered.getByTestId(
@ -355,65 +455,3 @@ describe("cluster - sidebar and tab navigation for extensions", () => {
});
});
});
const extensionStubWithSidebarItems: FakeExtensionData = {
id: "some-extension-id",
name: "some-extension-name",
clusterPages: [
{
components: {
Page: () => {
throw new Error("should never come here");
},
},
},
{
id: "some-child-page-id",
components: {
Page: () => <div data-testid="some-child-page">Some child page</div>,
},
},
{
id: "some-other-child-page-id",
components: {
Page: () => (
<div data-testid="some-other-child-page">Some other child page</div>
),
},
},
],
clusterPageMenus: [
{
id: "some-parent-id",
title: "Parent",
components: {
Icon: () => <div>Some icon</div>,
},
},
{
id: "some-child-id",
target: { pageId: "some-child-page-id" },
parentId: "some-parent-id",
title: "Child 1",
components: {
Icon: null as never,
},
},
{
id: "some-other-child-id",
target: { pageId: "some-other-child-page-id" },
parentId: "some-parent-id",
title: "Child 2",
components: {
Icon: null as never,
},
},
],
};

8
src/behaviours/helm-charts/__snapshots__/navigation-to-helm-charts.test.ts.snap
View File

@ -433,7 +433,7 @@ exports[`helm-charts - navigation to Helm charts when navigating to Helm charts
>
<i
class="Icon material interactive focusable"
id="menu_actions_27"
id="menu-actions-for-item-object-list-content"
tabindex="0"
>
<span
@ -541,7 +541,7 @@ exports[`helm-charts - navigation to Helm charts when navigating to Helm charts
>
<i
class="Icon new-dock-tab material interactive focusable"
id="menu_actions_14"
id="menu-actions-for-dock"
tabindex="0"
>
<span
@ -555,7 +555,7 @@ exports[`helm-charts - navigation to Helm charts when navigating to Helm charts
</div>
<i
class="Icon material interactive focusable"
id="tooltip_target_16"
id="tooltip_target_15"
tabindex="0"
>
<span
@ -568,7 +568,7 @@ exports[`helm-charts - navigation to Helm charts when navigating to Helm charts
</i>
<i
class="Icon material interactive focusable"
id="tooltip_target_17"
id="tooltip_target_16"
tabindex="0"
>
<span

665
src/behaviours/preferences/__snapshots__/extension-adding-preference-tabs.test.tsx.snap Normal file
View File

@ -0,0 +1,665 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`preferences: extension adding preference tabs given in preferences, when extension with preference tabs is enabled renders 1`] = `
<body>
<div>
<div
class="ClusterManager"
>
<div
class="topBar"
>
<div
class="items"
>
<i
class="Icon material interactive focusable"
data-testid="home-button"
tabindex="0"
>
<span
class="icon"
data-icon-name="home"
>
home
</span>
</i>
<i
class="Icon material interactive disabled focusable"
data-testid="history-back"
>
<span
class="icon"
data-icon-name="arrow_back"
>
arrow_back
</span>
</i>
<i
class="Icon material interactive disabled focusable"
data-testid="history-forward"
>
<span
class="icon"
data-icon-name="arrow_forward"
>
arrow_forward
</span>
</i>
</div>
<div
class="items"
/>
</div>
<main>
<div
id="lens-views"
/>
<div
class="SettingLayout showNavigation Preferences"
data-testid="application-preferences-page"
>
<nav
class="sidebarRegion"
>
<div
class="sidebar"
>
<div
class="Tabs flex column"
>
<div
class="header"
>
Preferences
</div>
<div
class="Tab flex gaps align-center"
data-testid="tab-link-for-extension-some-extension-nav-item-some-other-preference-tab-id"
role="tab"
tabindex="0"
>
<div
class="label"
>
Some other title
</div>
</div>
<div
class="Tab flex gaps align-center"
data-testid="tab-link-for-extension-some-extension-nav-item-some-preference-tab-id"
role="tab"
tabindex="0"
>
<div
class="label"
>
Some title
</div>
</div>
<div
class="Tab flex gaps align-center active"
data-testid="tab-link-for-application"
role="tab"
tabindex="0"
>
<div
class="label"
>
App
</div>
</div>
<div
class="Tab flex gaps align-center"
data-testid="tab-link-for-proxy"
role="tab"
tabindex="0"
>
<div
class="label"
>
Proxy
</div>
</div>
<div
class="Tab flex gaps align-center"
data-testid="tab-link-for-kubernetes"
role="tab"
tabindex="0"
>
<div
class="label"
>
Kubernetes
</div>
</div>
<div
class="Tab flex gaps align-center"
data-testid="tab-link-for-editor"
role="tab"
tabindex="0"
>
<div
class="label"
>
Editor
</div>
</div>
<div
class="Tab flex gaps align-center"
data-testid="tab-link-for-terminal"
role="tab"
tabindex="0"
>
<div
class="label"
>
Terminal
</div>
</div>
</div>
</div>
</nav>
<div
class="contentRegion"
id="ScrollSpyRoot"
>
<div
class="content"
>
<section
id="application"
>
<h2
data-testid="application-header"
>
Application
</h2>
<section
id="appearance"
>
<div
class="SubTitle"
>
Theme
</div>
<div
class="Select theme-lens css-b62m3t-container"
>
<span
class="css-1f43avz-a11yText-A11yText"
id="react-select-theme-input-live-region"
/>
<span
aria-atomic="false"
aria-live="polite"
aria-relevant="additions text"
class="css-1f43avz-a11yText-A11yText"
/>
<div
class="Select__control css-1s2u09g-control"
>
<div
class="Select__value-container css-319lph-ValueContainer"
>
<div
class="Select__placeholder css-14el2xx-placeholder"
id="react-select-theme-input-placeholder"
>
Select...
</div>
<div
class="Select__input-container css-6j8wv5-Input"
data-value=""
>
<input
aria-autocomplete="list"
aria-describedby="react-select-theme-input-placeholder"
aria-expanded="false"
aria-haspopup="true"
autocapitalize="none"
autocomplete="off"
autocorrect="off"
class="Select__input"
id="theme-input"
role="combobox"
spellcheck="false"
style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
tabindex="0"
type="text"
value=""
/>
</div>
</div>
<div
class="Select__indicators css-1hb7zxy-IndicatorsContainer"
>
<span
class="Select__indicator-separator css-1okebmr-indicatorSeparator"
/>
<div
aria-hidden="true"
class="Select__indicator Select__dropdown-indicator css-tlfecz-indicatorContainer"
>
<svg
aria-hidden="true"
class="css-tj5bde-Svg"
focusable="false"
height="20"
viewBox="0 0 20 20"
width="20"
>
<path
d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
/>
</svg>
</div>
</div>
</div>
</div>
</section>
<hr />
<section
id="extensionRegistryUrl"
>
<div
class="SubTitle"
>
Extension Install Registry
</div>
<div
class="Select theme-lens css-b62m3t-container"
>
<span
class="css-1f43avz-a11yText-A11yText"
id="react-select-extension-install-registry-input-live-region"
/>
<span
aria-atomic="false"
aria-live="polite"
aria-relevant="additions text"
class="css-1f43avz-a11yText-A11yText"
/>
<div
class="Select__control css-1s2u09g-control"
>
<div
class="Select__value-container css-319lph-ValueContainer"
>
<div
class="Select__placeholder css-14el2xx-placeholder"
id="react-select-extension-install-registry-input-placeholder"
>
Select...
</div>
<div
class="Select__input-container css-6j8wv5-Input"
data-value=""
>
<input
aria-autocomplete="list"
aria-describedby="react-select-extension-install-registry-input-placeholder"
aria-expanded="false"
aria-haspopup="true"
autocapitalize="none"
autocomplete="off"
autocorrect="off"
class="Select__input"
id="extension-install-registry-input"
role="combobox"
spellcheck="false"
style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
tabindex="0"
type="text"
value=""
/>
</div>
</div>
<div
class="Select__indicators css-1hb7zxy-IndicatorsContainer"
>
<span
class="Select__indicator-separator css-1okebmr-indicatorSeparator"
/>
<div
aria-hidden="true"
class="Select__indicator Select__dropdown-indicator css-tlfecz-indicatorContainer"
>
<svg
aria-hidden="true"
class="css-tj5bde-Svg"
focusable="false"
height="20"
viewBox="0 0 20 20"
width="20"
>
<path
d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
/>
</svg>
</div>
</div>
</div>
</div>
<p
class="mt-4 mb-5 leading-relaxed"
>
This setting is to change the registry URL for installing extensions by name.
If you are unable to access the default registry (https://registry.npmjs.org) you can change it in your
<b>
.npmrc
</b>
file or in the input below.
</p>
<div
class="Input theme round black disabled invalid"
>
<label
class="input-area flex gaps align-center"
id=""
>
<input
class="input box grow"
disabled=""
placeholder="Custom Extension Registry URL..."
spellcheck="false"
value="some-custom-url"
/>
</label>
<div
class="input-info flex gaps"
/>
</div>
</section>
<hr />
<section
id="other"
>
<div
class="SubTitle"
>
Start-up
</div>
<label
class="Switch"
data-testid="switch"
>
Automatically start Lens on login
<input
role="switch"
type="checkbox"
/>
</label>
</section>
<hr />
<section
id="update-channel"
>
<div
class="SubTitle"
>
Update Channel
</div>
<div
class="Select theme-lens css-b62m3t-container"
>
<span
class="css-1f43avz-a11yText-A11yText"
id="react-select-update-channel-input-live-region"
/>
<span
aria-atomic="false"
aria-live="polite"
aria-relevant="additions text"
class="css-1f43avz-a11yText-A11yText"
/>
<div
class="Select__control css-1s2u09g-control"
>
<div
class="Select__value-container Select__value-container--has-value css-319lph-ValueContainer"
>
<div
class="Select__single-value css-qc6sy-singleValue"
>
Stable
</div>
<div
class="Select__input-container css-6j8wv5-Input"
data-value=""
>
<input
aria-autocomplete="list"
aria-expanded="false"
aria-haspopup="true"
autocapitalize="none"
autocomplete="off"
autocorrect="off"
class="Select__input"
id="update-channel-input"
role="combobox"
spellcheck="false"
style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
tabindex="0"
type="text"
value=""
/>
</div>
</div>
<div
class="Select__indicators css-1hb7zxy-IndicatorsContainer"
>
<span
class="Select__indicator-separator css-1okebmr-indicatorSeparator"
/>
<div
aria-hidden="true"
class="Select__indicator Select__dropdown-indicator css-tlfecz-indicatorContainer"
>
<svg
aria-hidden="true"
class="css-tj5bde-Svg"
focusable="false"
height="20"
viewBox="0 0 20 20"
width="20"
>
<path
d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
/>
</svg>
</div>
</div>
</div>
</div>
</section>
<hr />
<section
id="locale"
>
<div
class="SubTitle"
>
Locale Timezone
</div>
<div
class="Select theme-lens css-b62m3t-container"
>
<span
class="css-1f43avz-a11yText-A11yText"
id="react-select-timezone-input-live-region"
/>
<span
aria-atomic="false"
aria-live="polite"
aria-relevant="additions text"
class="css-1f43avz-a11yText-A11yText"
/>
<div
class="Select__control css-1s2u09g-control"
>
<div
class="Select__value-container css-319lph-ValueContainer"
>
<div
class="Select__placeholder css-14el2xx-placeholder"
id="react-select-timezone-input-placeholder"
>
Select...
</div>
<div
class="Select__input-container css-6j8wv5-Input"
data-value=""
>
<input
aria-autocomplete="list"
aria-describedby="react-select-timezone-input-placeholder"
aria-expanded="false"
aria-haspopup="true"
autocapitalize="none"
autocomplete="off"
autocorrect="off"
class="Select__input"
id="timezone-input"
role="combobox"
spellcheck="false"
style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
tabindex="0"
type="text"
value=""
/>
</div>
</div>
<div
class="Select__indicators css-1hb7zxy-IndicatorsContainer"
>
<span
class="Select__indicator-separator css-1okebmr-indicatorSeparator"
/>
<div
aria-hidden="true"
class="Select__indicator Select__dropdown-indicator css-tlfecz-indicatorContainer"
>
<svg
aria-hidden="true"
class="css-tj5bde-Svg"
focusable="false"
height="20"
viewBox="0 0 20 20"
width="20"
>
<path
d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
/>
</svg>
</div>
</div>
</div>
</div>
</section>
</section>
</div>
<div
class="toolsRegion"
>
<div
class="fixed top-[60px]"
>
<div
data-testid="close-preferences"
>
<div
aria-label="Close"
class="closeButton"
role="button"
>
<i
class="Icon icon material focusable"
>
<span
class="icon"
data-icon-name="close"
>
close
</span>
</i>
</div>
<div
aria-hidden="true"
class="esc"
>
ESC
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<div
class="HotbarMenu flex column"
>
<div
class="HotbarItems flex column gaps"
/>
<div
class="HotbarSelector"
>
<i
class="Icon Icon previous material interactive focusable"
tabindex="0"
>
<span
class="icon"
data-icon-name="arrow_left"
>
arrow_left
</span>
</i>
<div
class="HotbarIndex"
>
<div
class="badge Badge small clickable"
id="hotbarIndex"
>
0
</div>
</div>
<i
class="Icon material interactive focusable"
tabindex="0"
>
<span
class="icon"
data-icon-name="arrow_right"
>
arrow_right
</span>
</i>
</div>
</div>
<div
class="StatusBar"
>
<div
class="leftSide"
data-testid="status-bar-left"
/>
<div
class="rightSide"
data-testid="status-bar-right"
/>
</div>
</div>
<div
class="Notifications flex column align-flex-end"
/>
</div>
</body>
`;

95
src/behaviours/preferences/extension-adding-preference-tabs.test.tsx Normal file
View File

@ -0,0 +1,95 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import type { RenderResult } from "@testing-library/react";
import type { IObservableValue } from "mobx";
import { runInAction, computed, observable } from "mobx";
import type { ApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
import { getApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
import { getExtensionFakeFor } from "../../renderer/components/test-utils/get-extension-fake";
describe("preferences: extension adding preference tabs", () => {
let builder: ApplicationBuilder;
beforeEach(() => {
builder = getApplicationBuilder();
});
describe("given in preferences, when extension with preference tabs is enabled", () => {
let rendered: RenderResult;
let someObservable: IObservableValue<boolean>;
beforeEach(async () => {
rendered = await builder.render();
builder.preferences.navigate();
const getExtensionFake = getExtensionFakeFor(builder);
someObservable = observable.box(false);
const testExtension = getExtensionFake({
id: "some-extension-id",
name: "some-extension",
rendererOptions: {
appPreferenceTabs: [
{
title: "Some title",
id: "some-preference-tab-id",
orderNumber: 2,
},
{
title: "Some other title",
id: "some-other-preference-tab-id",
orderNumber: 1,
},
{
title: "Some title for item with controlled visibility",
id: "some-preference-tab-id-with-controlled-visibility",
orderNumber: 3,
visible: computed(() => someObservable.get()),
},
],
},
});
builder.extensions.enable(testExtension);
});
it("renders", () => {
expect(rendered.baseElement).toMatchSnapshot();
});
it("shows tabs in order", () => {
const actual = rendered.queryAllByTestId(/tab-link-for-extension-some-extension-nav-item-(.*)/).map(x => x.dataset.testid);
expect(actual).toEqual([
"tab-link-for-extension-some-extension-nav-item-some-other-preference-tab-id",
"tab-link-for-extension-some-extension-nav-item-some-preference-tab-id",
]);
});
it("does not show hidden tab", () => {
const actual = rendered.queryByTestId(
"tab-link-for-extension-some-extension-nav-item-some-preference-tab-id-with-controlled-visibility",
);
expect(actual).not.toBeInTheDocument();
});
it("when item becomes visible, shows the tab", () => {
runInAction(() => {
someObservable.set(true);
});
const actual = rendered.queryByTestId(
"tab-link-for-extension-some-extension-nav-item-some-preference-tab-id-with-controlled-visibility",
);
expect(actual).toBeInTheDocument();
});
});
});

150
src/behaviours/tray/extension-adding-tray-items.test.tsx Normal file
View File

@ -0,0 +1,150 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import type { IObservableValue } from "mobx";
import { computed, runInAction, observable } from "mobx";
import type { ApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
import { getApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
import { getExtensionFakeFor } from "../../renderer/components/test-utils/get-extension-fake";
describe("preferences: extension adding tray items", () => {
describe("when extension with tray items is enabled", () => {
let builder: ApplicationBuilder;
let someObservableForVisibility: IObservableValue<boolean>;
let someObservableForEnabled: IObservableValue<boolean>;
beforeEach(async () => {
builder = getApplicationBuilder();
await builder.render();
builder.preferences.navigate();
const getExtensionFake = getExtensionFakeFor(builder);
someObservableForVisibility = observable.box(false);
someObservableForEnabled = observable.box(false);
const testExtension = getExtensionFake({
id: "some-extension-id",
name: "some-extension",
mainOptions: {
trayMenus: [
{
label: "some-controlled-visibility",
click: () => {},
visible: computed(() => someObservableForVisibility.get()),
},
{
label: "some-uncontrolled-visibility",
click: () => {},
},
{
label: "some-controlled-enabled",
click: () => {},
enabled: computed(() => someObservableForEnabled.get()),
},
{
label: "some-uncontrolled-enabled",
click: () => {},
},
{
label: "some-statically-enabled",
click: () => {},
enabled: true,
},
{
label: "some-statically-disabled",
click: () => {},
enabled: false,
},
],
},
});
builder.extensions.enable(testExtension);
});
it("shows item which doesn't control the visibility", () => {
expect(
builder.tray.get(
"some-uncontrolled-visibility-tray-menu-item-for-extension-some-extension",
),
).not.toBeNull();
});
it("does not show hidden item", () => {
expect(
builder.tray.get(
"some-controlled-visibility-tray-menu-item-for-extension-some-extension",
),
).toBeNull();
});
it("when item becomes visible, shows the item", () => {
runInAction(() => {
someObservableForVisibility.set(true);
});
expect(
builder.tray.get(
"some-controlled-visibility-tray-menu-item-for-extension-some-extension",
),
).not.toBeNull();
});
it("given item does not have enabled status, item is enabled by default", () => {
const item = builder.tray.get(
"some-uncontrolled-enabled-tray-menu-item-for-extension-some-extension",
);
expect(item?.enabled).toBe(true);
});
describe("given item has controlled enabled status and is disabled", () => {
it("is disabled", () => {
const item = builder.tray.get(
"some-controlled-enabled-tray-menu-item-for-extension-some-extension",
);
expect(item?.enabled).toBe(false);
});
it("when item becomes enabled, items is enabled", () => {
runInAction(() => {
someObservableForEnabled.set(true);
});
const item = builder.tray.get(
"some-controlled-enabled-tray-menu-item-for-extension-some-extension",
);
expect(item?.enabled).toBe(true);
});
});
it("given item is statically enabled, item is enabled", () => {
const item = builder.tray.get(
"some-statically-enabled-tray-menu-item-for-extension-some-extension",
);
expect(item?.enabled).toBe(true);
});
it("given item is statically disabled, item is disabled", () => {
const item = builder.tray.get(
"some-statically-disabled-tray-menu-item-for-extension-some-extension",
);
expect(item?.enabled).toBe(false);
});
});
});

2
src/extensions/registries/page-menu-registry.ts
View File

@ -7,6 +7,7 @@
import type { IconProps } from "../../renderer/components/icon";
import type React from "react";
import type { PageTarget } from "./page-registry";
import type { IComputedValue } from "mobx";
export interface ClusterPageMenuRegistration {
id?: string;
@ -14,6 +15,7 @@ export interface ClusterPageMenuRegistration {
target?: PageTarget;
title: React.ReactNode;
components: ClusterPageMenuComponents;
visible?: IComputedValue<boolean>;
}
export interface ClusterPageMenuComponents {

24
src/main/tray/tray-menu-item/tray-menu-item-registrator.injectable.ts
View File

@ -16,6 +16,7 @@ import { withErrorSuppression } from "../../../common/utils/with-error-suppressi
import type { WithErrorLoggingFor } from "../../../common/utils/with-error-logging/with-error-logging.injectable";
import withErrorLoggingInjectable from "../../../common/utils/with-error-logging/with-error-logging.injectable";
import getRandomIdInjectable from "../../../common/utils/get-random-id.injectable";
import { isBoolean } from "../../../common/utils";
const trayMenuItemRegistratorInjectable = getInjectable({
id: "tray-menu-item-registrator",
@ -64,14 +65,31 @@ const toItemInjectablesFor = (extension: LensMainExtension, withErrorLoggingFor:
// TODO: Find out how to improve typing so that instead of
// x => withErrorSuppression(x) there could only be withErrorSuppression
x => withErrorSuppression(x),
(x) => withErrorSuppression(x),
);
return decorated(registration);
},
enabled: computed(() => registration.enabled ?? true),
visible: computed(() => true),
enabled: computed(() => {
if (registration.enabled === undefined) {
return true;
}
if (isBoolean(registration.enabled)) {
return registration.enabled;
}
return registration.enabled.get();
}),
visible: computed(() => {
if (!registration.visible) {
return true;
}
return registration.visible.get();
}),
}),
injectionToken: trayMenuItemInjectionToken,

5
src/main/tray/tray-menu-registration.ts
View File

@ -3,12 +3,15 @@
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import type { IComputedValue } from "mobx";
export interface TrayMenuRegistration {
label?: string;
click?: (menuItem: TrayMenuRegistration) => void;
id?: string;
type?: "normal" | "separator" | "submenu";
toolTip?: string;
enabled?: boolean;
enabled?: boolean | IComputedValue<boolean>;
submenu?: TrayMenuRegistration[];
visible?: IComputedValue<boolean>;
}

1
src/renderer/components/+catalog/catalog-entity-drawer-menu.tsx
View File

@ -95,6 +95,7 @@ class NonInjectedCatalogEntityDrawerMenu<T extends CatalogEntity> extends React.
return (
<MenuActions
id="menu-actions-for-catalog-entity-drawer-menu"
className={cssNames("CatalogEntityDrawerMenu", className)}
toolbar
{...menuProps}

2
src/renderer/components/+catalog/catalog.tsx
View File

@ -198,7 +198,7 @@ class NonInjectedCatalog extends React.Component<Dependencies> {
};
return (
<MenuActions onOpen={onOpen}>
<MenuActions id="menu-actions-for-catalog" onOpen={onOpen}>
<MenuItem
key="open-details"
onClick={() => this.props.catalogEntityStore.selectedItemId.set(entity.getId())}

5
src/renderer/components/+extensions/installed-extensions.tsx
View File

@ -102,7 +102,10 @@ const NonInjectedInstalledExtensions = observer(({ extensionDiscovery, extension
</div>
),
actions: (
<MenuActions usePortal toolbar={false}>
<MenuActions
id="menu-actions-for-installed-extensions"
usePortal
toolbar={false}>
{isCompatible && (
<>
{isEnabled ? (

1
src/renderer/components/+helm-releases/release-menu.tsx
View File

@ -78,6 +78,7 @@ class NonInjectedHelmReleaseMenu extends React.Component<HelmReleaseMenuProps &
return (
<MenuActions
id="menu-actions-for-release-menu"
{...menuProps}
className={cssNames("HelmReleaseMenu", className)}
removeAction={this.remove}

9
src/renderer/components/+network-port-forwards/port-forward-menu.tsx
View File

@ -67,7 +67,7 @@ class NonInjectedPortForwardMenu<Props extends PortForwardMenuProps & Dependenci
<Icon
material="stop"
tooltip="Stop port-forward"
interactive={toolbar}
interactive={toolbar}
/>
<span className="title">Stop</span>
</MenuItem>
@ -79,7 +79,7 @@ class NonInjectedPortForwardMenu<Props extends PortForwardMenuProps & Dependenci
<Icon
material="play_arrow"
tooltip="Start port-forward"
interactive={toolbar}
interactive={toolbar}
/>
<span className="title">Start</span>
</MenuItem>
@ -98,7 +98,7 @@ class NonInjectedPortForwardMenu<Props extends PortForwardMenuProps & Dependenci
<Icon
material="open_in_browser"
interactive={toolbar}
tooltip="Open in browser"
tooltip="Open in browser"
/>
<span className="title">Open</span>
</MenuItem>
@ -107,7 +107,7 @@ class NonInjectedPortForwardMenu<Props extends PortForwardMenuProps & Dependenci
<Icon
material="edit"
tooltip="Change port or protocol"
interactive={toolbar}
interactive={toolbar}
/>
<span className="title">Edit</span>
</MenuItem>
@ -121,6 +121,7 @@ class NonInjectedPortForwardMenu<Props extends PortForwardMenuProps & Dependenci
return (
<MenuActions
id="menu-actions-for-port-forward-menu"
{...menuProps}
className={cssNames("PortForwardMenu", className)}
removeAction={this.remove}

3
src/renderer/components/+preferences/app-preference-tab/app-preference-tab-registration.ts
View File

@ -3,9 +3,12 @@
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import type { IComputedValue } from "mobx";
export interface AppPreferenceTabRegistration {
title: string;
id: string;
orderNumber?: number;
visible?: IComputedValue<boolean>;
}

10
src/renderer/components/+preferences/preferences-navigation/extension-tab-preferences-navigation-item.injectable.ts
View File

@ -46,7 +46,15 @@ const extensionSpecificTabNavigationItemRegistratorInjectable = getInjectable({
parent: "general",
orderNumber: tab.orderNumber || 100,
navigate: () => navigateToExtensionPreferences(extension.sanitizedExtensionId, tab.id),
isVisible: computed(() => true),
isVisible: computed(() => {
if (!tab.visible) {
return true;
}
return tab.visible.get();
}),
isActive,
}),
});

1
src/renderer/components/cluster-settings/components/cluster-icon-settings.tsx
View File

@ -89,6 +89,7 @@ export class ClusterIconSetting extends React.Component<ClusterIconSettingProps>
/>
</div>
<MenuActions
id="menu-actions-for-cluster-icon-settings"
toolbar={false}
autoCloseOnSelect={true}
triggerIcon={{ material: "more_horiz" }}

1
src/renderer/components/dock/dock.tsx
View File

@ -161,6 +161,7 @@ class NonInjectedDock extends React.Component<DockProps & Dependencies> {
<div className={cssNames("toolbar flex gaps align-center box grow", { "pl-0": tabs.length == 0 })}>
<div className="dock-menu box grow">
<MenuActions
id="menu-actions-for-dock"
usePortal
triggerIcon={{ material: "add", className: "new-dock-tab", tooltip: "New tab" }}
closeOnScroll={false}

1
src/renderer/components/item-object-list/content.tsx
View File

@ -343,6 +343,7 @@ class NonInjectedItemListLayoutContent<
return (
<MenuActions
id="menu-actions-for-item-object-list-content"
className="ItemListLayoutVisibilityMenu"
toolbar={false}
autoCloseOnSelect={false}

7
src/renderer/components/kube-object-menu/__snapshots__/kube-object-menu.test.tsx.snap
View File

@ -6,6 +6,7 @@ exports[`kube-object-menu given kube object renders 1`] = `
<div>
<ul
class="Menu MenuActions flex KubeObjectMenu toolbar gaps right bottom"
id="menu-actions-for-kube-object-menu-for-some-uid"
>
<li>
Some menu item
@ -45,6 +46,7 @@ exports[`kube-object-menu given kube object when removing kube object renders 1`
<div>
<ul
class="Menu MenuActions flex KubeObjectMenu toolbar gaps right bottom"
id="menu-actions-for-kube-object-menu-for-some-uid"
>
<li>
Some menu item
@ -136,6 +138,7 @@ exports[`kube-object-menu given kube object when rerendered with different kube
<div>
<ul
class="Menu MenuActions flex KubeObjectMenu toolbar gaps right bottom"
id="menu-actions-for-kube-object-menu-for-some-other-uid"
>
<li
class="MenuItem"
@ -172,6 +175,7 @@ exports[`kube-object-menu given kube object when rerendered with different kube
<div>
<ul
class="Menu MenuActions flex KubeObjectMenu toolbar gaps right bottom"
id="menu-actions-for-kube-object-menu-for-some-other-uid"
>
<li
class="MenuItem"
@ -260,6 +264,7 @@ exports[`kube-object-menu given kube object with namespace when removing kube ob
<div>
<ul
class="Menu MenuActions flex KubeObjectMenu toolbar gaps right bottom"
id="menu-actions-for-kube-object-menu-for-some-uid"
>
<li>
Some menu item
@ -351,6 +356,7 @@ exports[`kube-object-menu given kube object without namespace when removing kube
<div>
<ul
class="Menu MenuActions flex KubeObjectMenu toolbar gaps right bottom"
id="menu-actions-for-kube-object-menu-for-some-uid"
>
<li>
Some menu item
@ -441,6 +447,7 @@ exports[`kube-object-menu given no kube object, renders 1`] = `
<div>
<ul
class="Menu MenuActions flex KubeObjectMenu toolbar gaps right bottom"
id="menu-actions-for-kube-object-menu-for-undefined"
/>
</div>
</body>

1
src/renderer/components/kube-object-menu/kube-object-menu.tsx
View File

@ -187,6 +187,7 @@ class NonInjectedKubeObjectMenu<Kube extends KubeObject> extends React.Component
return (
<MenuActions
id={`menu-actions-for-kube-object-menu-for-${object?.getId()}`}
className={cssNames("KubeObjectMenu", className)}
onOpen={object ? () => this.emitOnContextMenuOpen(object) : undefined}
{...menuProps}

2
src/renderer/components/layout/extension-sidebar-item-registrator.injectable.tsx
View File

@ -49,6 +49,8 @@ const extensionSidebarItemRegistratorInjectable = getInjectable({
? `${extension.sanitizedExtensionId}-${registration.parentId}`
: null,
...(registration.visible ? { isVisible: registration.visible } : {}),
title: registration.title,
getIcon: registration.components.Icon
? () => <registration.components.Icon />

15
src/renderer/components/menu/menu-actions.tsx
View File

@ -13,12 +13,12 @@ import type { IconProps } from "../icon";
import { Icon } from "../icon";
import type { MenuProps } from "./menu";
import { Menu, MenuItem } from "./menu";
import uniqueId from "lodash/uniqueId";
import isString from "lodash/isString";
import type { TooltipDecoratorProps } from "../tooltip";
import type { OpenConfirmDialog } from "../confirm-dialog/open.injectable";
import { withInjectables } from "@ogre-tools/injectable-react";
import openConfirmDialogInjectable from "../confirm-dialog/open.injectable";
import getRandomIdInjectable from "../../../common/utils/get-random-id.injectable";
export interface MenuActionsProps extends Partial<MenuProps> {
className?: string;
@ -38,6 +38,7 @@ export interface MenuActionsProps extends Partial<MenuProps> {
*/
removeAction?: () => void | Promise<void>;
onOpen?: () => void;
id?: string;
}
interface Dependencies {
@ -50,9 +51,6 @@ class NonInjectedMenuActions extends React.Component<MenuActionsProps & Dependen
removeConfirmationMessage: "Remove item?",
};
// TODO: Make deterministic
public id = uniqueId("menu_actions_");
@observable isOpen = !!this.props.toolbar;
toggle = () => {
@ -100,10 +98,10 @@ class NonInjectedMenuActions extends React.Component<MenuActionsProps & Dependen
if (isValidElement<HTMLElement>(triggerIcon)) {
className = cssNames(triggerIcon.props.className, { active: this.isOpen });
return React.cloneElement(triggerIcon, { id: this.id, className });
return React.cloneElement(triggerIcon, { id: this.props.id, className });
}
const iconProps: IconProps & TooltipDecoratorProps = {
id: this.id,
id: this.props.id,
interactive: true,
material: isString(triggerIcon) ? triggerIcon : undefined,
active: this.isOpen,
@ -131,7 +129,7 @@ class NonInjectedMenuActions extends React.Component<MenuActionsProps & Dependen
{this.renderTriggerIcon()}
<Menu
htmlFor={this.id}
htmlFor={this.props.id}
isOpen={this.isOpen}
open={this.toggle}
close={this.toggle}
@ -175,7 +173,8 @@ class NonInjectedMenuActions extends React.Component<MenuActionsProps & Dependen
export const MenuActions = withInjectables<Dependencies, MenuActionsProps>(NonInjectedMenuActions, {
getProps: (di, props) => ({
...props,
id: di.inject(getRandomIdInjectable)(),
openConfirmDialog: di.inject(openConfirmDialogInjectable),
...props,
}),
});

32
src/renderer/components/test-utils/get-application-builder.tsx
View File

@ -78,6 +78,9 @@ export interface ApplicationBuilder {
enable: EnableExtensions<LensMainExtension>;
disable: DisableExtensions<LensMainExtension>;
};
enable: (...extensions: { renderer: LensRendererExtension; main: LensMainExtension }[]) => void;
disable: (...extensions: { renderer: LensRendererExtension; main: LensMainExtension }[]) => void;
};
allowKubeResource: (resourceName: KubeResource) => ApplicationBuilder;
@ -234,6 +237,11 @@ export const getApplicationBuilder = () => {
};
};
const enableRendererExtension = enableExtensionsFor(rendererExtensionsState, rendererDi);
const enableMainExtension = enableExtensionsFor(mainExtensionsState, mainDi);
const disableRendererExtension = disableExtensionsFor(rendererExtensionsState, rendererDi);
const disableMainExtension = disableExtensionsFor(mainExtensionsState, mainDi);
const builder: ApplicationBuilder = {
dis,
@ -400,13 +408,29 @@ export const getApplicationBuilder = () => {
extensions: {
renderer: {
enable: enableExtensionsFor(rendererExtensionsState, rendererDi),
disable: disableExtensionsFor(rendererExtensionsState, rendererDi),
enable: enableRendererExtension,
disable: disableRendererExtension,
},
main: {
enable: enableExtensionsFor(mainExtensionsState, mainDi),
disable: disableExtensionsFor(mainExtensionsState, mainDi),
enable: enableMainExtension,
disable: disableMainExtension,
},
enable: (...extensions) => {
const rendererExtensions = extensions.map(extension => extension.renderer);
const mainExtensions = extensions.map(extension => extension.main);
enableRendererExtension(...rendererExtensions);
enableMainExtension(...mainExtensions);
},
disable: (...extensions) => {
const rendererExtensions = extensions.map(extension => extension.renderer);
const mainExtensions = extensions.map(extension => extension.main);
disableRendererExtension(...rendererExtensions);
disableMainExtension(...mainExtensions);
},
},

103
src/renderer/components/test-utils/get-extension-fake.ts Normal file
View File

@ -0,0 +1,103 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import type { Mutable } from "type-fest";
import fileSystemProvisionerStoreInjectable from "../../../extensions/extension-loader/file-system-provisioner-store/file-system-provisioner-store.injectable";
import { lensExtensionDependencies } from "../../../extensions/lens-extension";
import type { ApplicationBuilder } from "./get-application-builder";
import { LensMainExtension } from "../../../extensions/lens-main-extension";
import navigateForExtensionInjectable from "../../../main/start-main-application/lens-window/navigate-for-extension.injectable";
import { LensRendererExtension } from "../../../extensions/lens-renderer-extension";
import catalogCategoryRegistryInjectable from "../../../common/catalog/category-registry.injectable";
import getExtensionPageParametersInjectable from "../../routes/get-extension-page-parameters.injectable";
import navigateToRouteInjectable from "../../routes/navigate-to-route.injectable";
import routesInjectable from "../../routes/routes.injectable";
import catalogEntityRegistryForMainInjectable from "../../../main/catalog/entity-registry.injectable";
import catalogEntityRegistryForRendererInjectable from "../../api/catalog/entity/registry.injectable";
import type { DiContainer } from "@ogre-tools/injectable";
export class TestExtensionMain extends LensMainExtension {}
export class TestExtensionRenderer extends LensRendererExtension {}
export interface FakeExtensionOptions {
id: string;
name: string;
rendererOptions?: Partial<LensRendererExtension>;
mainOptions?: Partial<LensMainExtension>;
}
export type GetExtensionFake = (arg: FakeExtensionOptions) => {
main: TestExtensionMain;
renderer: TestExtensionRenderer;
};
export const getExtensionFakeFor =
(builder: ApplicationBuilder): GetExtensionFake =>
({ id, name, mainOptions = {}, rendererOptions = {}}) => {
const mainInstance = getExtensionFakeForMain(builder.dis.mainDi, id, name, mainOptions);
const rendererInstance = getExtensionFakeForRenderer(builder.dis.rendererDi, id, name, rendererOptions);
return { main: mainInstance, renderer: rendererInstance };
};
const getExtensionFakeForMain = (di: DiContainer, id: string, name: string, options: Partial<LensMainExtension>) => {
const instance = new TestExtensionMain({
id,
absolutePath: "irrelevant",
isBundled: false,
isCompatible: false,
isEnabled: false,
manifest: {
name,
version: "1.0.0",
engines: {
lens: "^5.5.0",
},
},
manifestPath: "irrelevant",
});
Object.assign(instance, options);
(instance as Mutable<LensMainExtension>)[lensExtensionDependencies] = {
fileSystemProvisionerStore: di.inject(
fileSystemProvisionerStoreInjectable,
),
entityRegistry: di.inject(catalogEntityRegistryForMainInjectable),
navigate: di.inject(navigateForExtensionInjectable),
};
return instance;
};
const getExtensionFakeForRenderer = (di: DiContainer, id: string, name: string, options: Partial<LensRendererExtension>) => {
const instance = new TestExtensionRenderer({
id,
absolutePath: "irrelevant",
isBundled: false,
isCompatible: false,
isEnabled: false,
manifest: {
name,
version: "1.0.0",
engines: {
lens: "^5.5.0",
},
},
manifestPath: "irrelevant",
});
Object.assign(instance, options);
(instance as Mutable<LensRendererExtension>)[lensExtensionDependencies] = {
categoryRegistry: di.inject(catalogCategoryRegistryInjectable),
entityRegistry: di.inject(catalogEntityRegistryForRendererInjectable),
fileSystemProvisionerStore: di.inject(fileSystemProvisionerStoreInjectable),
getExtensionPageParameters: di.inject(getExtensionPageParametersInjectable),
navigateToRoute: di.inject(navigateToRouteInjectable),
routes: di.inject(routesInjectable),
};
return instance;
};

52
src/renderer/components/test-utils/get-renderer-extension-fake.ts
View File

@ -2,16 +2,10 @@
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import type { Mutable, SetRequired } from "type-fest";
import catalogCategoryRegistryInjectable from "../../../common/catalog/category-registry.injectable";
import fileSystemProvisionerStoreInjectable from "../../../extensions/extension-loader/file-system-provisioner-store/file-system-provisioner-store.injectable";
import { lensExtensionDependencies } from "../../../extensions/lens-extension";
import type { SetRequired } from "type-fest";
import { LensRendererExtension } from "../../../extensions/lens-renderer-extension";
import catalogEntityRegistryInjectable from "../../api/catalog/entity/registry.injectable";
import getExtensionPageParametersInjectable from "../../routes/get-extension-page-parameters.injectable";
import navigateToRouteInjectable from "../../routes/navigate-to-route.injectable";
import routesInjectable from "../../routes/routes.injectable";
import type { ApplicationBuilder } from "./get-application-builder";
import { getExtensionFakeFor } from "./get-extension-fake";
export class TestExtension extends LensRendererExtension {}
@ -19,36 +13,16 @@ export type FakeExtensionData = SetRequired<Partial<LensRendererExtension>, "id"
export type GetRendererExtensionFake = (fakeExtensionData: FakeExtensionData) => TestExtension;
export const getRendererExtensionFakeFor = (builder: ApplicationBuilder): GetRendererExtensionFake => (
function getRendererExtensionFake({ id, name, ...rest }) {
const instance = new TestExtension({
export const getRendererExtensionFakeFor = (
builder: ApplicationBuilder,
): GetRendererExtensionFake => {
const getExtensionFake = getExtensionFakeFor(builder);
return ({ id, name, ...rest }) =>
getExtensionFake({
id,
absolutePath: "irrelevant",
isBundled: false,
isCompatible: false,
isEnabled: false,
manifest: {
name,
version: "1.0.0",
engines: {
lens: "^5.5.0",
},
},
manifestPath: "irrelevant",
});
Object.assign(instance, rest);
(instance as Mutable<LensRendererExtension>)[lensExtensionDependencies] = {
categoryRegistry: builder.dis.rendererDi.inject(catalogCategoryRegistryInjectable),
entityRegistry: builder.dis.rendererDi.inject(catalogEntityRegistryInjectable),
fileSystemProvisionerStore: builder.dis.rendererDi.inject(fileSystemProvisionerStoreInjectable),
getExtensionPageParameters: builder.dis.rendererDi.inject(getExtensionPageParametersInjectable),
navigateToRoute: builder.dis.rendererDi.inject(navigateToRouteInjectable),
routes: builder.dis.rendererDi.inject(routesInjectable),
};
return instance;
}
);
name,
rendererOptions: rest,
}).renderer;
};

22
src/renderer/frames/cluster-frame/__snapshots__/cluster-frame.test.tsx.snap
View File

@ -402,7 +402,7 @@ exports[`<ClusterFrame /> given cluster with list nodes and namespaces permissio
>
<i
class="Icon material interactive focusable small"
id="tooltip_target_58"
id="tooltip_target_56"
tabindex="0"
>
<span
@ -427,7 +427,7 @@ exports[`<ClusterFrame /> given cluster with list nodes and namespaces permissio
>
<i
class="Icon new-dock-tab material interactive focusable"
id="menu_actions_59"
id="menu-actions-for-dock"
tabindex="0"
>
<span
@ -441,7 +441,7 @@ exports[`<ClusterFrame /> given cluster with list nodes and namespaces permissio
</div>
<i
class="Icon material interactive focusable"
id="tooltip_target_61"
id="tooltip_target_58"
tabindex="0"
>
<span
@ -454,7 +454,7 @@ exports[`<ClusterFrame /> given cluster with list nodes and namespaces permissio
</i>
<i
class="Icon material interactive focusable"
id="tooltip_target_62"
id="tooltip_target_59"
tabindex="0"
>
<span
@ -907,7 +907,7 @@ exports[`<ClusterFrame /> given cluster with list nodes and namespaces permissio
>
<i
class="Icon new-dock-tab material interactive focusable"
id="menu_actions_17"
id="menu-actions-for-dock"
tabindex="0"
>
<span
@ -921,7 +921,7 @@ exports[`<ClusterFrame /> given cluster with list nodes and namespaces permissio
</div>
<i
class="Icon material interactive focusable"
id="tooltip_target_19"
id="tooltip_target_18"
tabindex="0"
>
<span
@ -934,7 +934,7 @@ exports[`<ClusterFrame /> given cluster with list nodes and namespaces permissio
</i>
<i
class="Icon material interactive focusable"
id="tooltip_target_20"
id="tooltip_target_19"
tabindex="0"
>
<span
@ -1418,7 +1418,7 @@ exports[`<ClusterFrame /> given cluster without list nodes, but with namespaces
>
<i
class="Icon material interactive focusable small"
id="tooltip_target_98"
id="tooltip_target_94"
tabindex="0"
>
<span
@ -1443,7 +1443,7 @@ exports[`<ClusterFrame /> given cluster without list nodes, but with namespaces
>
<i
class="Icon new-dock-tab material interactive focusable"
id="menu_actions_99"
id="menu-actions-for-dock"
tabindex="0"
>
<span
@ -1457,7 +1457,7 @@ exports[`<ClusterFrame /> given cluster without list nodes, but with namespaces
</div>
<i
class="Icon material interactive focusable"
id="tooltip_target_101"
id="tooltip_target_96"
tabindex="0"
>
<span
@ -1470,7 +1470,7 @@ exports[`<ClusterFrame /> given cluster without list nodes, but with namespaces
</i>
<i
class="Icon material interactive focusable"
id="tooltip_target_102"
id="tooltip_target_97"
tabindex="0"
>
<span