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

fix: Fix formatting of custom resource sidebar items

Browse Source 
- The titles should better handle being line wrapped

Signed-off-by: Sebastian Malton <sebastian@malton.name>
This commit is contained in:
Sebastian Malton 2023-05-15 11:16:32 -04:00
parent e907fd6fb5
commit e87d7146d9
3 changed files with 41 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3025,19 +3025,19 @@ exports[`cluster - custom resources in sidebar when custom resource exists when
class="SidebarItem" class="SidebarItem"
data-is-active-test="false" data-is-active-test="false"
data-parent-id-test="sidebar-item-custom-resources" data-parent-id-test="sidebar-item-custom-resources"
data-testid="sidebar-item-custom-resource-group-some-group" data-testid="sidebar-item-custom-resource-group-some.group.com"
> >
<a <a
class="navItem" class="navItem"
data-testid="link-for-sidebar-item-custom-resource-group-some-group" data-testid="link-for-sidebar-item-custom-resource-group-some.group.com"
href="/" href="/"
> >
<span> <span>
some-group some​.group​.com
</span> </span>
<i <i
class="Icon expandIcon material focusable" class="Icon expandIcon material focusable"
data-testid="expand-icon-for-sidebar-item-custom-resource-group-some-group" data-testid="expand-icon-for-sidebar-item-custom-resource-group-some.group.com"
> >
<span <span
class="icon" class="icon"
@ -3533,19 +3533,19 @@ exports[`cluster - custom resources in sidebar when custom resource exists when
class="SidebarItem" class="SidebarItem"
data-is-active-test="false" data-is-active-test="false"
data-parent-id-test="sidebar-item-custom-resources" data-parent-id-test="sidebar-item-custom-resources"
data-testid="sidebar-item-custom-resource-group-some-group" data-testid="sidebar-item-custom-resource-group-some.group.com"
> >
<a <a
class="navItem" class="navItem"
data-testid="link-for-sidebar-item-custom-resource-group-some-group" data-testid="link-for-sidebar-item-custom-resource-group-some.group.com"
href="/" href="/"
> >
<span> <span>
some-group some​.group​.com
</span> </span>
<i <i
class="Icon expandIcon material focusable" class="Icon expandIcon material focusable"
data-testid="expand-icon-for-sidebar-item-custom-resource-group-some-group" data-testid="expand-icon-for-sidebar-item-custom-resource-group-some.group.com"
> >
<span <span
class="icon" class="icon"
@ -3561,16 +3561,16 @@ exports[`cluster - custom resources in sidebar when custom resource exists when
<div <div
class="SidebarItem" class="SidebarItem"
data-is-active-test="false" data-is-active-test="false"
data-parent-id-test="sidebar-item-custom-resource-group-some-group" data-parent-id-test="sidebar-item-custom-resource-group-some.group.com"
data-testid="sidebar-item-custom-resource-group-some-group/some-resources" data-testid="sidebar-item-custom-resource-group-some.group.com/some-resources"
> >
<a <a
class="navItem" class="navItem"
data-testid="link-for-sidebar-item-custom-resource-group-some-group/some-resources" data-testid="link-for-sidebar-item-custom-resource-group-some.group.com/some-resources"
href="/" href="/"
> >
<span> <span>
SomeResource Some Resource
</span> </span>
</a> </a>
</div> </div>

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

@ -32,7 +32,7 @@ describe("cluster - custom resources in sidebar", () => {
resourceVersion: "1", resourceVersion: "1",
}, },
spec: { spec: {
group: "some-group", group: "some.group.com",
scope: "Cluster", scope: "Cluster",
names: { names: {
kind: "SomeResource", kind: "SomeResource",
@ -92,7 +92,7 @@ describe("cluster - custom resources in sidebar", () => {
beforeEach(() => { beforeEach(() => {
builder.allowKubeResource({ builder.allowKubeResource({
apiName: "some-resources", apiName: "some-resources",
group: "some-group", group: "some.group.com",
}); });
}); });
@ -109,7 +109,7 @@ describe("cluster - custom resources in sidebar", () => {
}); });
it("does not show SomeResources sidebar", () => { it("does not show SomeResources sidebar", () => {
expect(result.queryByTestId("sidebar-item-custom-resource-group-some-group")).not.toBeInTheDocument(); expect(result.queryByTestId("sidebar-item-custom-resource-group-some.group.com")).not.toBeInTheDocument();
}); });
it("does not show Custom Resources Definitions sidebar", () => { it("does not show Custom Resources Definitions sidebar", () => {
@ -133,8 +133,8 @@ describe("cluster - custom resources in sidebar", () => {
expect(result.getByTestId("expand-icon-for-sidebar-item-custom-resources")).toBeInTheDocument(); expect(result.getByTestId("expand-icon-for-sidebar-item-custom-resources")).toBeInTheDocument();
}); });
it("shows some-group group sidebar item", () => { it("shows some.group.com group sidebar item", () => {
expect(result.getByTestId("sidebar-item-custom-resource-group-some-group")).toBeInTheDocument(); expect(result.getByTestId("sidebar-item-custom-resource-group-some.group.com")).toBeInTheDocument();
}); });
it("does not show Custom Resources Definitions sidebar", () => { it("does not show Custom Resources Definitions sidebar", () => {
@ -143,19 +143,29 @@ describe("cluster - custom resources in sidebar", () => {
describe("when custom resources group sidebar item is expanded", () => { describe("when custom resources group sidebar item is expanded", () => {
beforeEach(() => { beforeEach(() => {
result.getByTestId("expand-icon-for-sidebar-item-custom-resource-group-some-group").click(); result.getByTestId("expand-icon-for-sidebar-item-custom-resource-group-some.group.com").click();
}); });
it("renders", () => { it("renders", () => {
expect(result.container).toMatchSnapshot(); expect(result.container).toMatchSnapshot();
}); });
it("shows some-group group sidebar item", () => { it("shows some.group.com group sidebar item", () => {
expect(result.getByTestId("sidebar-item-custom-resource-group-some-group")).toBeInTheDocument(); expect(result.getByTestId("sidebar-item-custom-resource-group-some.group.com")).toBeInTheDocument();
});
it("formats the some.group.com sidebar item title correctly", () => {
expect(result.getByTestId("link-for-sidebar-item-custom-resource-group-some.group.com").firstChild).toHaveTextContent("some\u200b.group\u200b.com", {
normalizeWhitespace: false,
});
}); });
it("shows some-resources group sidebar item", () => { it("shows some-resources group sidebar item", () => {
expect(result.getByTestId("sidebar-item-custom-resource-group-some-group/some-resources")).toBeInTheDocument(); expect(result.getByTestId("sidebar-item-custom-resource-group-some.group.com/some-resources")).toBeInTheDocument();
});
it("formats the some-resources sidebar item title correctly", () => {
expect(result.getByTestId("sidebar-item-custom-resource-group-some.group.com/some-resources")).toHaveTextContent("Some Resource");
}); });
}); });
}); });
@ -182,7 +192,7 @@ describe("cluster - custom resources in sidebar", () => {
}); });
it("does not show SomeResources sidebar", () => { it("does not show SomeResources sidebar", () => {
expect(result.queryByTestId("sidebar-item-custom-resource-group-some-group")).not.toBeInTheDocument(); expect(result.queryByTestId("sidebar-item-custom-resource-group-some.group.com")).not.toBeInTheDocument();
}); });
it("does not show Custom Resources Definitions sidebar", () => { it("does not show Custom Resources Definitions sidebar", () => {
@ -207,7 +217,7 @@ describe("cluster - custom resources in sidebar", () => {
}); });
it("does not show SomeResources sidebar", () => { it("does not show SomeResources sidebar", () => {
expect(result.queryByTestId("sidebar-item-custom-resource-group-some-group")).not.toBeInTheDocument(); expect(result.queryByTestId("sidebar-item-custom-resource-group-some.group.com")).not.toBeInTheDocument();
}); });
it("shows Custom Resources Definitions sidebar", () => { it("shows Custom Resources Definitions sidebar", () => {

10
packages/core/src/renderer/components/custom-resources/custom-resource-definition-groups-sidebar-items-computed.injectable.ts
View File

@ -17,6 +17,12 @@ import routePathParametersInjectable from "../../routes/route-path-parameters.in
import customResourcesSidebarItemInjectable from "./custom-resources-sidebar-item.injectable"; import customResourcesSidebarItemInjectable from "./custom-resources-sidebar-item.injectable";
import customResourceDefinitionsInjectable from "./custom-resources.injectable"; import customResourceDefinitionsInjectable from "./custom-resources.injectable";
const titleCaseSplitRegex = /(?<=[a-z])(?=[A-Z])|(?<=[A-Z])(?=[A-Z][a-z])/;
const formatResourceKind = (resourceKind: string) => (
resourceKind.split(titleCaseSplitRegex).join(" ")
);
const customResourceDefinitionGroupsSidebarItemsComputedInjectable = getInjectable({ const customResourceDefinitionGroupsSidebarItemsComputedInjectable = getInjectable({
id: "custom-resource-definition-groups-sidebar-items-computed", id: "custom-resource-definition-groups-sidebar-items-computed",
instantiate: (di) => { instantiate: (di) => {
@ -31,7 +37,7 @@ const customResourceDefinitionGroupsSidebarItemsComputedInjectable = getInjectab
instantiate: (): SidebarItemRegistration => ({ instantiate: (): SidebarItemRegistration => ({
parentId: customResourcesSidebarItemInjectable.id, parentId: customResourcesSidebarItemInjectable.id,
onClick: noop, onClick: noop,
title: group, title: group.replaceAll(".", "\u200b."), // Replace dots with zero-width spaces to allow line breaks
orderNumber: 10 * index, orderNumber: 10 * index,
}), }),
injectionToken: sidebarItemInjectionToken, injectionToken: sidebarItemInjectionToken,
@ -47,7 +53,7 @@ const customResourceDefinitionGroupsSidebarItemsComputedInjectable = getInjectab
instantiate: (di): SidebarItemRegistration => ({ instantiate: (di): SidebarItemRegistration => ({
parentId: customResourceGroupSidebarItem.id, parentId: customResourceGroupSidebarItem.id,
onClick: () => navigateToCustomResources(parameters), onClick: () => navigateToCustomResources(parameters),
title: definition.getResourceKind(), title: formatResourceKind(definition.getResourceKind()),
isActive: computedAnd( isActive: computedAnd(
di.inject(routeIsActiveInjectable, customResourcesRoute), di.inject(routeIsActiveInjectable, customResourcesRoute),
computed(() => matches(parameters)(pathParameters.get())), computed(() => matches(parameters)(pathParameters.get())),