fix: Fix formatting of custom resource sidebar items

- The titles should better handle being line wrapped

Signed-off-by: Sebastian Malton <sebastian@malton.name>

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"
               >
                 <a
                   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="/"
                 >
                   <span>
-                    some-group
+                    some​.group​.com
                   </span>
                   <i
                     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
                       class="icon"
@@ -3533,19 +3533,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"
               >
                 <a
                   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="/"
                 >
                   <span>
-                    some-group
+                    some​.group​.com
                   </span>
                   <i
                     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
                       class="icon"
@@ -3561,16 +3561,16 @@ exports[`cluster - custom resources in sidebar when custom resource exists when
                   <div
                     class="SidebarItem"
                     data-is-active-test="false"
-                    data-parent-id-test="sidebar-item-custom-resource-group-some-group"
-                    data-testid="sidebar-item-custom-resource-group-some-group/some-resources"
+                    data-parent-id-test="sidebar-item-custom-resource-group-some.group.com"
+                    data-testid="sidebar-item-custom-resource-group-some.group.com/some-resources"
                   >
                     <a
                       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="/"
                     >
                       <span>
-                        SomeResource
+                        Some Resource
                       </span>
                     </a>
                   </div>

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", () => {

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())),