mirror of
https://github.com/lensapp/lens.git
synced 2025-05-20 05:10:56 +00:00
Handle duplicated registered tabs
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev
parent
5a86076040
commit
5fec0581ec
@ -3,7 +3,7 @@
|
||||
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-metrics-extension-tab"
|
||||
data-testid="tab-link-for-extension-registered-tab-page-id-nav-item-metrics-extension-tab"
|
||||
role="tab"
|
||||
tabindex="0"
|
||||
>
|
||||
@ -97,7 +97,7 @@ exports[`preferences - navigation to extension specific preferences given in pre
|
||||
</div>
|
||||
<div
|
||||
class="Tab flex gaps align-center active"
|
||||
data-testid="tab-link-for-extension-specific-tab-navigation-item-metrics-extension-tab"
|
||||
data-testid="tab-link-for-extension-registered-tab-page-id-nav-item-metrics-extension-tab"
|
||||
role="tab"
|
||||
tabindex="0"
|
||||
>
|
||||
@ -190,6 +190,380 @@ exports[`preferences - navigation to extension specific preferences given in pre
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`preferences - navigation to extension specific preferences given in preferences, when rendered given extensions with tabs having same id when navigating to first extension tab renders 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="SettingLayout showNavigation Preferences"
|
||||
data-testid="extension-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-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
|
||||
class="Tab flex gaps align-center active"
|
||||
data-testid="tab-link-for-extension-registered-tab-page-id-nav-item-metrics-extension-tab"
|
||||
role="tab"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="label"
|
||||
>
|
||||
Metrics tab
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="Tab flex gaps align-center active"
|
||||
data-testid="tab-link-for-extension-duplicated-tab-page-id-nav-item-metrics-extension-tab"
|
||||
role="tab"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="label"
|
||||
>
|
||||
Metrics tab
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<div
|
||||
class="contentRegion"
|
||||
id="ScrollSpyRoot"
|
||||
>
|
||||
<div
|
||||
class="content"
|
||||
>
|
||||
<section
|
||||
id="extensions"
|
||||
>
|
||||
<h2>
|
||||
registered-tab-page-id
|
||||
preferences
|
||||
</h2>
|
||||
<section
|
||||
class="small"
|
||||
data-testid="extension-preference-item-for-metrics-preference-item-id"
|
||||
id="metrics-preference-item-id"
|
||||
>
|
||||
<div
|
||||
class="SubTitle"
|
||||
>
|
||||
License item
|
||||
|
||||
</div>
|
||||
<div
|
||||
data-testid="metrics-preference-item-input"
|
||||
/>
|
||||
<div
|
||||
class="hint"
|
||||
>
|
||||
<div
|
||||
data-testid="metrics-preference-item-hint"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
<hr
|
||||
class="small"
|
||||
/>
|
||||
</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>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`preferences - navigation to extension specific preferences given in preferences, when rendered given extensions with tabs having same id when navigating to second extension tab renders 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="SettingLayout showNavigation Preferences"
|
||||
data-testid="extension-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-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
|
||||
class="Tab flex gaps align-center active"
|
||||
data-testid="tab-link-for-extension-registered-tab-page-id-nav-item-metrics-extension-tab"
|
||||
role="tab"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="label"
|
||||
>
|
||||
Metrics tab
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="Tab flex gaps align-center active"
|
||||
data-testid="tab-link-for-extension-duplicated-tab-page-id-nav-item-metrics-extension-tab"
|
||||
role="tab"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="label"
|
||||
>
|
||||
Metrics tab
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<div
|
||||
class="contentRegion"
|
||||
id="ScrollSpyRoot"
|
||||
>
|
||||
<div
|
||||
class="content"
|
||||
>
|
||||
<section
|
||||
id="extensions"
|
||||
>
|
||||
<h2>
|
||||
duplicated-tab-page-id
|
||||
preferences
|
||||
</h2>
|
||||
<section
|
||||
class="small"
|
||||
data-testid="extension-preference-item-for-another-metrics-preference-item-id"
|
||||
id="another-metrics-preference-item-id"
|
||||
>
|
||||
<div
|
||||
class="SubTitle"
|
||||
>
|
||||
Another metrics
|
||||
|
||||
</div>
|
||||
<div
|
||||
data-testid="another-metrics-preference-item-input"
|
||||
/>
|
||||
<div
|
||||
class="hint"
|
||||
>
|
||||
<div
|
||||
data-testid="another-metrics-preference-item-hint"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
<hr
|
||||
class="small"
|
||||
/>
|
||||
</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>
|
||||
</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
|
||||
|
||||
@ -174,7 +174,7 @@ describe("preferences - navigation to extension specific preferences", () => {
|
||||
});
|
||||
|
||||
it("shows extension tab in general area", () => {
|
||||
const actual = rendered.getByTestId("tab-link-for-extension-specific-tab-navigation-item-metrics-extension-tab");
|
||||
const actual = rendered.getByTestId("tab-link-for-extension-registered-tab-page-id-nav-item-metrics-extension-tab");
|
||||
|
||||
expect(actual).toMatchSnapshot();
|
||||
});
|
||||
@ -187,7 +187,7 @@ describe("preferences - navigation to extension specific preferences", () => {
|
||||
|
||||
describe("when navigating to specific extension tab", () => {
|
||||
beforeEach(() => {
|
||||
applicationBuilder.preferences.navigation.click("extension-specific-tab-navigation-item-metrics-extension-tab");
|
||||
applicationBuilder.preferences.navigation.click("extension-registered-tab-page-id-nav-item-metrics-extension-tab");
|
||||
});
|
||||
it("renders", () => {
|
||||
expect(rendered.container).toMatchSnapshot();
|
||||
@ -204,6 +204,87 @@ describe("preferences - navigation to extension specific preferences", () => {
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("given extension with few registered tabs", () => {
|
||||
beforeEach(async () => {
|
||||
const extension = getRendererExtensionFake(extensionStubWithWithRegisteredTabs);
|
||||
|
||||
await applicationBuilder.addExtensions(extension);
|
||||
});
|
||||
|
||||
it("shows each of registered tabs in general area", () => {
|
||||
const helloTab = rendered.getByTestId("tab-link-for-extension-hello-world-tab-page-id-nav-item-hello-extension-tab");
|
||||
const logsTab = rendered.getByTestId("tab-link-for-extension-hello-world-tab-page-id-nav-item-logs-extension-tab");
|
||||
|
||||
expect(helloTab).toBeInTheDocument();
|
||||
expect(logsTab).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe("given extensions with tabs having same id", () => {
|
||||
beforeEach(async () => {
|
||||
const extension = getRendererExtensionFake(extensionStubWithWithRegisteredTab);
|
||||
const otherExtension = getRendererExtensionFake(extensionStubWithWithSameRegisteredTab);
|
||||
|
||||
await applicationBuilder.addExtensions(extension, otherExtension);
|
||||
});
|
||||
|
||||
it("shows tab from the first extension", () => {
|
||||
const actual = rendered.getByTestId("tab-link-for-extension-registered-tab-page-id-nav-item-metrics-extension-tab");
|
||||
|
||||
expect(actual).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("shows tab from the second extension", () => {
|
||||
const actual = rendered.getByTestId("tab-link-for-extension-duplicated-tab-page-id-nav-item-metrics-extension-tab");
|
||||
|
||||
expect(actual).toBeInTheDocument();
|
||||
});
|
||||
|
||||
describe("when navigating to first extension tab", () => {
|
||||
beforeEach(() => {
|
||||
applicationBuilder.preferences.navigation.click("extension-registered-tab-page-id-nav-item-metrics-extension-tab");
|
||||
});
|
||||
|
||||
it("renders", () => {
|
||||
expect(rendered.container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("shows related preferences for this tab", () => {
|
||||
const actual = rendered.getByTestId("metrics-preference-item-hint");
|
||||
|
||||
expect(actual).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("does not show unrelated preferences for this tab", () => {
|
||||
const actual = rendered.queryByTestId("another-metrics-preference-item-hint");
|
||||
|
||||
expect(actual).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe("when navigating to second extension tab", () => {
|
||||
beforeEach(() => {
|
||||
applicationBuilder.preferences.navigation.click("extension-duplicated-tab-page-id-nav-item-metrics-extension-tab");
|
||||
});
|
||||
|
||||
it("renders", () => {
|
||||
expect(rendered.container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("shows related preferences for this tab", () => {
|
||||
const actual = rendered.getByTestId("another-metrics-preference-item-hint");
|
||||
|
||||
expect(actual).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("does not show unrelated preferences for this tab", () => {
|
||||
const actual = rendered.queryByTestId("metrics-preference-item-hint");
|
||||
|
||||
expect(actual).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@ -313,3 +394,63 @@ const extensionStubWithWithRegisteredTab: Partial<LensRendererExtension> = {
|
||||
orderNumber: 100,
|
||||
}],
|
||||
};
|
||||
|
||||
const extensionStubWithWithRegisteredTabs: Partial<LensRendererExtension> = {
|
||||
id: "hello-world-tab-page-id",
|
||||
|
||||
appPreferences: [
|
||||
{
|
||||
title: "Hello world",
|
||||
id: "hello-preference-item-id",
|
||||
showInPreferencesTab: "hello-extension-tab",
|
||||
|
||||
components: {
|
||||
Hint: () => <div data-testid="hello-preference-item-hint" />,
|
||||
Input: () => <div data-testid="hello-preference-item-input" />,
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "Logs",
|
||||
id: "logs-preference-item-id",
|
||||
showInPreferencesTab: "logs-extension-tab",
|
||||
|
||||
components: {
|
||||
Hint: () => <div data-testid="logs-preference-item-hint" />,
|
||||
Input: () => <div data-testid="logs-preference-item-input" />,
|
||||
},
|
||||
},
|
||||
],
|
||||
|
||||
appPreferenceTabs: [{
|
||||
title: "Metrics tab",
|
||||
id: "hello-extension-tab",
|
||||
orderNumber: 100,
|
||||
}, {
|
||||
title: "Logs tab",
|
||||
id: "logs-extension-tab",
|
||||
orderNumber: 200,
|
||||
}],
|
||||
};
|
||||
|
||||
const extensionStubWithWithSameRegisteredTab: Partial<LensRendererExtension> = {
|
||||
id: "duplicated-tab-page-id",
|
||||
|
||||
appPreferences: [
|
||||
{
|
||||
title: "Another metrics",
|
||||
id: "another-metrics-preference-item-id",
|
||||
showInPreferencesTab: "metrics-extension-tab",
|
||||
|
||||
components: {
|
||||
Hint: () => <div data-testid="another-metrics-preference-item-hint" />,
|
||||
Input: () => <div data-testid="another-metrics-preference-item-input" />,
|
||||
},
|
||||
},
|
||||
],
|
||||
|
||||
appPreferenceTabs: [{
|
||||
title: "Metrics tab",
|
||||
id: "metrics-extension-tab",
|
||||
orderNumber: 100,
|
||||
}],
|
||||
};
|
||||
|
||||
@ -32,7 +32,7 @@ const extensionSpecificTabNavigationItemRegistratorInjectable = getInjectable({
|
||||
extension.appPreferenceTabs,
|
||||
|
||||
map((tab) => {
|
||||
const id = `extension-specific-tab-navigation-item-${tab.id}`;
|
||||
const id = `extension-${extension.sanitizedExtensionId}-nav-item-${tab.id}`;
|
||||
const isActive = computed(() => routeIsActive.get() && pathParameters.get().tabId === tab.id);
|
||||
|
||||
return getInjectable({
|
||||
|
||||
Loading…
Reference in New Issue
Block a user