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

Handle duplicated registered tabs

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2022-05-11 11:55:48 +03:00
parent 5a86076040
commit 5fec0581ec
3 changed files with 520 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

378
src/behaviours/preferences/__snapshots__/navigation-to-extension-specific-preferences.test.tsx.snap
View File

@ -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`] = ` 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 <div
class="Tab flex gaps align-center" 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" role="tab"
tabindex="0" tabindex="0"
> >
@ -97,7 +97,7 @@ exports[`preferences - navigation to extension specific preferences given in pre
</div> </div>
<div <div
class="Tab flex gaps align-center active" 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" role="tab"
tabindex="0" tabindex="0"
> >
@ -190,6 +190,380 @@ exports[`preferences - navigation to extension specific preferences given in pre
</div> </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`] = ` 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>
<div <div

145
src/behaviours/preferences/navigation-to-extension-specific-preferences.test.tsx
View File

@ -174,7 +174,7 @@ describe("preferences - navigation to extension specific preferences", () => {
}); });
it("shows extension tab in general area", () => { 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(); expect(actual).toMatchSnapshot();
}); });
@ -187,7 +187,7 @@ describe("preferences - navigation to extension specific preferences", () => {
describe("when navigating to specific extension tab", () => { describe("when navigating to specific extension tab", () => {
beforeEach(() => { 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", () => { it("renders", () => {
expect(rendered.container).toMatchSnapshot(); 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, 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,
}],
};

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

@ -32,7 +32,7 @@ const extensionSpecificTabNavigationItemRegistratorInjectable = getInjectable({
extension.appPreferenceTabs, extension.appPreferenceTabs,
map((tab) => { 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); const isActive = computed(() => routeIsActive.get() && pathParameters.get().tabId === tab.id);
return getInjectable({ return getInjectable({