mirror of
https://github.com/lensapp/lens.git
synced 2024-10-26 09:47:18 +03:00
fix: Fix formatting of custom resource sidebar items
- The titles should better handle being line wrapped Signed-off-by: Sebastian Malton <sebastian@malton.name>
This commit is contained in:
parent
d37a765ac2
commit
eb78edb226
@ -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,12 +3561,12 @@ 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>
|
||||
|
@ -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", () => {
|
||||
|
@ -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())),
|
||||
|
Loading…
Reference in New Issue
Block a user