mirror of
https://github.com/lensapp/lens.git
synced 2025-05-20 05:10:56 +00:00
Render specific extension tab in sidebar navigation
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev
parent
11e03910a4
commit
e3c88f3004
@ -1,5 +1,20 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`preferences - navigation to extension specific preferences given in preferences, when rendered given extension with registered tab shows extension tab in general area 1`] = `
|
||||
<div
|
||||
class="Tab flex gaps align-center"
|
||||
data-testid="tab-link-for-extension-specific-tab-navigation-item-license-extension-tab"
|
||||
role="tab"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="label"
|
||||
>
|
||||
License tab
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`preferences - navigation to extension specific preferences given in preferences, when rendered given multiple extensions with specific preferences, when navigating to extension specific preferences page renders 1`] = `
|
||||
<div>
|
||||
<div
|
||||
@ -44,30 +59,6 @@ exports[`preferences - navigation to extension specific preferences given in pre
|
||||
Proxy
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="Tab flex gaps align-center active"
|
||||
data-testid="tab-link-for-extension-some-test-extension-id"
|
||||
role="tab"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="label"
|
||||
>
|
||||
some-test-extension-id
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="Tab flex gaps align-center"
|
||||
data-testid="tab-link-for-extension-some-other-test-extension-id"
|
||||
role="tab"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="label"
|
||||
>
|
||||
some-other-test-extension-id
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="Tab flex gaps align-center"
|
||||
data-testid="tab-link-for-kubernetes"
|
||||
@ -104,6 +95,52 @@ exports[`preferences - navigation to extension specific preferences given in pre
|
||||
Terminal
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
data-testid="extension-settings"
|
||||
>
|
||||
<hr />
|
||||
<div
|
||||
class="header flex items-center"
|
||||
>
|
||||
<i
|
||||
class="Icon mr-3 material focusable smallest"
|
||||
>
|
||||
<span
|
||||
class="icon"
|
||||
data-icon-name="extension"
|
||||
>
|
||||
extension
|
||||
</span>
|
||||
</i>
|
||||
Extensions
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="Tab flex gaps align-center active"
|
||||
data-testid="tab-link-for-extension-some-test-extension-id"
|
||||
role="tab"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="label"
|
||||
>
|
||||
some-test-extension-id
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="Tab flex gaps align-center"
|
||||
data-testid="tab-link-for-extension-some-other-test-extension-id"
|
||||
role="tab"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="label"
|
||||
>
|
||||
some-other-test-extension-id
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
@ -118,7 +155,8 @@ exports[`preferences - navigation to extension specific preferences given in pre
|
||||
id="extensions"
|
||||
>
|
||||
<h2>
|
||||
Extensions
|
||||
some-test-extension-id
|
||||
preferences
|
||||
</h2>
|
||||
<section
|
||||
class="small"
|
||||
@ -763,18 +801,6 @@ exports[`preferences - navigation to extension specific preferences given in pre
|
||||
Proxy
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="Tab flex gaps align-center"
|
||||
data-testid="tab-link-for-extension-some-test-extension-id"
|
||||
role="tab"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="label"
|
||||
>
|
||||
some-test-extension-id
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="Tab flex gaps align-center"
|
||||
data-testid="tab-link-for-kubernetes"
|
||||
@ -811,6 +837,40 @@ exports[`preferences - navigation to extension specific preferences given in pre
|
||||
Terminal
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
data-testid="extension-settings"
|
||||
>
|
||||
<hr />
|
||||
<div
|
||||
class="header flex items-center"
|
||||
>
|
||||
<i
|
||||
class="Icon mr-3 material focusable smallest"
|
||||
>
|
||||
<span
|
||||
class="icon"
|
||||
data-icon-name="extension"
|
||||
>
|
||||
extension
|
||||
</span>
|
||||
</i>
|
||||
Extensions
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="Tab flex gaps align-center"
|
||||
data-testid="tab-link-for-extension-some-test-extension-id"
|
||||
role="tab"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="label"
|
||||
>
|
||||
some-test-extension-id
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
@ -843,7 +903,7 @@ exports[`preferences - navigation to extension specific preferences given in pre
|
||||
>
|
||||
<span
|
||||
class="css-1f43avz-a11yText-A11yText"
|
||||
id="react-select-14-live-region"
|
||||
id="react-select-34-live-region"
|
||||
/>
|
||||
<span
|
||||
aria-atomic="false"
|
||||
@ -859,7 +919,7 @@ exports[`preferences - navigation to extension specific preferences given in pre
|
||||
>
|
||||
<div
|
||||
class="Select__placeholder css-14el2xx-placeholder"
|
||||
id="react-select-14-placeholder"
|
||||
id="react-select-34-placeholder"
|
||||
>
|
||||
Select...
|
||||
</div>
|
||||
@ -869,7 +929,7 @@ exports[`preferences - navigation to extension specific preferences given in pre
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-describedby="react-select-14-placeholder"
|
||||
aria-describedby="react-select-34-placeholder"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
autocapitalize="none"
|
||||
@ -928,7 +988,7 @@ exports[`preferences - navigation to extension specific preferences given in pre
|
||||
>
|
||||
<span
|
||||
class="css-1f43avz-a11yText-A11yText"
|
||||
id="react-select-15-live-region"
|
||||
id="react-select-35-live-region"
|
||||
/>
|
||||
<span
|
||||
aria-atomic="false"
|
||||
@ -944,7 +1004,7 @@ exports[`preferences - navigation to extension specific preferences given in pre
|
||||
>
|
||||
<div
|
||||
class="Select__placeholder css-14el2xx-placeholder"
|
||||
id="react-select-15-placeholder"
|
||||
id="react-select-35-placeholder"
|
||||
>
|
||||
Select...
|
||||
</div>
|
||||
@ -954,7 +1014,7 @@ exports[`preferences - navigation to extension specific preferences given in pre
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-describedby="react-select-15-placeholder"
|
||||
aria-describedby="react-select-35-placeholder"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
autocapitalize="none"
|
||||
@ -1068,7 +1128,7 @@ exports[`preferences - navigation to extension specific preferences given in pre
|
||||
>
|
||||
<span
|
||||
class="css-1f43avz-a11yText-A11yText"
|
||||
id="react-select-16-live-region"
|
||||
id="react-select-36-live-region"
|
||||
/>
|
||||
<span
|
||||
aria-atomic="false"
|
||||
@ -1084,7 +1144,7 @@ exports[`preferences - navigation to extension specific preferences given in pre
|
||||
>
|
||||
<div
|
||||
class="Select__placeholder css-14el2xx-placeholder"
|
||||
id="react-select-16-placeholder"
|
||||
id="react-select-36-placeholder"
|
||||
>
|
||||
Select...
|
||||
</div>
|
||||
@ -1094,7 +1154,7 @@ exports[`preferences - navigation to extension specific preferences given in pre
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-describedby="react-select-16-placeholder"
|
||||
aria-describedby="react-select-36-placeholder"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
autocapitalize="none"
|
||||
@ -1153,7 +1213,7 @@ exports[`preferences - navigation to extension specific preferences given in pre
|
||||
>
|
||||
<span
|
||||
class="css-1f43avz-a11yText-A11yText"
|
||||
id="react-select-17-live-region"
|
||||
id="react-select-37-live-region"
|
||||
/>
|
||||
<span
|
||||
aria-atomic="false"
|
||||
@ -1169,7 +1229,7 @@ exports[`preferences - navigation to extension specific preferences given in pre
|
||||
>
|
||||
<div
|
||||
class="Select__placeholder css-14el2xx-placeholder"
|
||||
id="react-select-17-placeholder"
|
||||
id="react-select-37-placeholder"
|
||||
>
|
||||
Select...
|
||||
</div>
|
||||
@ -1179,7 +1239,7 @@ exports[`preferences - navigation to extension specific preferences given in pre
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-describedby="react-select-17-placeholder"
|
||||
aria-describedby="react-select-37-placeholder"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
autocapitalize="none"
|
||||
@ -1308,18 +1368,6 @@ exports[`preferences - navigation to extension specific preferences given in pre
|
||||
Proxy
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="Tab flex gaps align-center active"
|
||||
data-testid="tab-link-for-extension-some-test-extension-id"
|
||||
role="tab"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="label"
|
||||
>
|
||||
some-test-extension-id
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="Tab flex gaps align-center"
|
||||
data-testid="tab-link-for-kubernetes"
|
||||
@ -1356,6 +1404,40 @@ exports[`preferences - navigation to extension specific preferences given in pre
|
||||
Terminal
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
data-testid="extension-settings"
|
||||
>
|
||||
<hr />
|
||||
<div
|
||||
class="header flex items-center"
|
||||
>
|
||||
<i
|
||||
class="Icon mr-3 material focusable smallest"
|
||||
>
|
||||
<span
|
||||
class="icon"
|
||||
data-icon-name="extension"
|
||||
>
|
||||
extension
|
||||
</span>
|
||||
</i>
|
||||
Extensions
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="Tab flex gaps align-center active"
|
||||
data-testid="tab-link-for-extension-some-test-extension-id"
|
||||
role="tab"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="label"
|
||||
>
|
||||
some-test-extension-id
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
@ -1370,7 +1452,8 @@ exports[`preferences - navigation to extension specific preferences given in pre
|
||||
id="extensions"
|
||||
>
|
||||
<h2>
|
||||
Extensions
|
||||
some-test-extension-id
|
||||
preferences
|
||||
</h2>
|
||||
<section
|
||||
class="small"
|
||||
|
||||
@ -165,6 +165,26 @@ describe("preferences - navigation to extension specific preferences", () => {
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("given extension with registered tab", () => {
|
||||
beforeEach(async () => {
|
||||
const extension = getRendererExtensionFake(extensionStubWithWithRegisteredTab);
|
||||
|
||||
await applicationBuilder.addExtensions(extension);
|
||||
});
|
||||
|
||||
it("shows extension tab in general area", () => {
|
||||
const actual = rendered.getByTestId("tab-link-for-extension-specific-tab-navigation-item-license-extension-tab");
|
||||
|
||||
expect(actual).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("does not show custom settings block", () => {
|
||||
const actual = rendered.queryByTestId("extension-settings");
|
||||
|
||||
expect(actual).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@ -231,3 +251,46 @@ const extensionStubWithShowInPreferencesTab: Partial<LensRendererExtension> = {
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const extensionStubWithWithRegisteredTab: Partial<LensRendererExtension> = {
|
||||
id: "registered-tab-page-id",
|
||||
|
||||
appPreferences: [
|
||||
{
|
||||
title: "License item",
|
||||
id: "license-preference-item-id",
|
||||
showInPreferencesTab: "license-extension-tab",
|
||||
|
||||
components: {
|
||||
Hint: () => <div data-testid="license-preference-item-hint" />,
|
||||
Input: () => <div data-testid="license-preference-item-input" />,
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "Menu item",
|
||||
id: "menu-preference-item-id",
|
||||
showInPreferencesTab: "menu-extension-tab",
|
||||
|
||||
components: {
|
||||
Hint: () => <div data-testid="menu-preference-item-hint" />,
|
||||
Input: () => <div data-testid="menu-preference-item-input" />,
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "Survey item",
|
||||
id: "survey-preference-item-id",
|
||||
showInPreferencesTab: "survey-extension-tab",
|
||||
|
||||
components: {
|
||||
Hint: () => <div data-testid="survey-preference-item-hint" />,
|
||||
Input: () => <div data-testid="survey-preference-item-input" />,
|
||||
},
|
||||
},
|
||||
],
|
||||
|
||||
appPreferenceTabs: [{
|
||||
title: "License tab",
|
||||
id: "license-extension-tab",
|
||||
orderNumber: 100,
|
||||
}],
|
||||
};
|
||||
|
||||
@ -0,0 +1,59 @@
|
||||
/**
|
||||
* 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 { computed } from "mobx";
|
||||
import { map } from "lodash/fp";
|
||||
|
||||
import navigateToRouteInjectable from "../../../../main/navigate-to-route/navigate-to-route.injectable";
|
||||
import routeIsActiveInjectable from "../../../routes/route-is-active.injectable";
|
||||
import { preferenceNavigationItemInjectionToken } from "./preference-navigation-items.injectable";
|
||||
|
||||
import type { LensRendererExtension } from "../../../../extensions/lens-renderer-extension";
|
||||
import { extensionRegistratorInjectionToken } from "../../../../extensions/extension-loader/extension-registrator-injection-token";
|
||||
import { pipeline } from "@ogre-tools/fp";
|
||||
|
||||
const extensionSpecificTabNavigationItemRegistratorInjectable = getInjectable({
|
||||
id: "extension-specific-tab-preferences-navigation-items",
|
||||
|
||||
instantiate: (di) => {
|
||||
return (extension: LensRendererExtension) => {
|
||||
const navigateToRoute = di.inject(navigateToRouteInjectable);
|
||||
|
||||
const injectables = pipeline(
|
||||
extension.appPreferenceTabs,
|
||||
|
||||
map((tab) => {
|
||||
const id = `extension-specific-tab-navigation-item-${tab.id}`;
|
||||
const route = {
|
||||
path: `/preferences/${tab.id}`,
|
||||
clusterFrame: false,
|
||||
isEnabled: computed(() => true),
|
||||
};
|
||||
const routeIsActive = di.inject(routeIsActiveInjectable, route);
|
||||
|
||||
return getInjectable({
|
||||
id,
|
||||
injectionToken: preferenceNavigationItemInjectionToken,
|
||||
instantiate: () => ({
|
||||
id,
|
||||
label: tab.title,
|
||||
orderNumber: tab.orderNumber,
|
||||
navigate: () => navigateToRoute(route, {}),
|
||||
isVisible: computed(() => true),
|
||||
isActive: computed(() => routeIsActive.get()),
|
||||
}),
|
||||
});
|
||||
}),
|
||||
);
|
||||
|
||||
injectables.forEach(di.register);
|
||||
|
||||
return;
|
||||
};
|
||||
},
|
||||
injectionToken: extensionRegistratorInjectionToken,
|
||||
});
|
||||
|
||||
export default extensionSpecificTabNavigationItemRegistratorInjectable;
|
||||
Loading…
Reference in New Issue
Block a user