diff --git a/packages/core/src/features/cluster/__snapshots__/custom-resources-in-sidebar.test.tsx.snap b/packages/core/src/features/cluster/__snapshots__/custom-resources-in-sidebar.test.tsx.snap index d71a106fae..8c9c3e6eb5 100644 --- a/packages/core/src/features/cluster/__snapshots__/custom-resources-in-sidebar.test.tsx.snap +++ b/packages/core/src/features/cluster/__snapshots__/custom-resources-in-sidebar.test.tsx.snap @@ -3025,19 +3025,19 @@ exports[`cluster - custom resources in sidebar when custom resource exists when class="SidebarItem" data-is-active-test="false" 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" > - some-group + some​.group​.com - some-group + some​.group​.com - SomeResource + Some Resource diff --git a/packages/core/src/features/cluster/custom-resources-in-sidebar.test.tsx b/packages/core/src/features/cluster/custom-resources-in-sidebar.test.tsx index 368f6ec6a0..332015ed2d 100644 --- a/packages/core/src/features/cluster/custom-resources-in-sidebar.test.tsx +++ b/packages/core/src/features/cluster/custom-resources-in-sidebar.test.tsx @@ -32,7 +32,7 @@ describe("cluster - custom resources in sidebar", () => { resourceVersion: "1", }, spec: { - group: "some-group", + group: "some.group.com", scope: "Cluster", names: { kind: "SomeResource", @@ -92,7 +92,7 @@ describe("cluster - custom resources in sidebar", () => { beforeEach(() => { builder.allowKubeResource({ 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", () => { - 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", () => { @@ -133,8 +133,8 @@ describe("cluster - custom resources in sidebar", () => { expect(result.getByTestId("expand-icon-for-sidebar-item-custom-resources")).toBeInTheDocument(); }); - it("shows some-group group sidebar item", () => { - expect(result.getByTestId("sidebar-item-custom-resource-group-some-group")).toBeInTheDocument(); + it("shows some.group.com group sidebar item", () => { + expect(result.getByTestId("sidebar-item-custom-resource-group-some.group.com")).toBeInTheDocument(); }); 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", () => { 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", () => { expect(result.container).toMatchSnapshot(); }); - it("shows some-group group sidebar item", () => { - expect(result.getByTestId("sidebar-item-custom-resource-group-some-group")).toBeInTheDocument(); + it("shows some.group.com group sidebar item", () => { + 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", () => { - 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", () => { - 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", () => { @@ -207,7 +217,7 @@ describe("cluster - custom resources in 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", () => { diff --git a/packages/core/src/renderer/components/custom-resources/custom-resource-definition-groups-sidebar-items-computed.injectable.ts b/packages/core/src/renderer/components/custom-resources/custom-resource-definition-groups-sidebar-items-computed.injectable.ts index 28dec2e4ab..d482644e1b 100644 --- a/packages/core/src/renderer/components/custom-resources/custom-resource-definition-groups-sidebar-items-computed.injectable.ts +++ b/packages/core/src/renderer/components/custom-resources/custom-resource-definition-groups-sidebar-items-computed.injectable.ts @@ -17,6 +17,12 @@ import routePathParametersInjectable from "../../routes/route-path-parameters.in import customResourcesSidebarItemInjectable from "./custom-resources-sidebar-item.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({ id: "custom-resource-definition-groups-sidebar-items-computed", instantiate: (di) => { @@ -31,7 +37,7 @@ const customResourceDefinitionGroupsSidebarItemsComputedInjectable = getInjectab instantiate: (): SidebarItemRegistration => ({ parentId: customResourcesSidebarItemInjectable.id, onClick: noop, - title: group, + title: group.replaceAll(".", "\u200b."), // Replace dots with zero-width spaces to allow line breaks orderNumber: 10 * index, }), injectionToken: sidebarItemInjectionToken, @@ -47,7 +53,7 @@ const customResourceDefinitionGroupsSidebarItemsComputedInjectable = getInjectab instantiate: (di): SidebarItemRegistration => ({ parentId: customResourceGroupSidebarItem.id, onClick: () => navigateToCustomResources(parameters), - title: definition.getResourceKind(), + title: formatResourceKind(definition.getResourceKind()), isActive: computedAnd( di.inject(routeIsActiveInjectable, customResourcesRoute), computed(() => matches(parameters)(pathParameters.get())),