mirror of
https://github.com/lensapp/lens.git
synced 2025-05-20 05:10:56 +00:00
chore: Add some behavioural tests for custom columns for custom resources
Signed-off-by: Sebastian Malton <sebastian@malton.name>
This commit is contained in:
Sebastian Malton
parent
2ca77ecfe8
commit
978015510a
@ -0,0 +1,663 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Viewing Custom Resources with extra columns renders 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="Animate slide-right Drawer KubeObjectDetails flex column right enter leave"
|
||||
style="--size: 725px; --enter-duration: 100ms; --leave-duration: 100ms;"
|
||||
>
|
||||
<div
|
||||
class="drawer-wrapper flex column"
|
||||
>
|
||||
<div
|
||||
class="drawer-title flex align-center"
|
||||
>
|
||||
<div
|
||||
class="drawer-title-text flex gaps align-center"
|
||||
>
|
||||
|
||||
</div>
|
||||
<i
|
||||
class="Icon material interactive focusable"
|
||||
tabindex="0"
|
||||
>
|
||||
<span
|
||||
class="icon"
|
||||
data-icon-name="close"
|
||||
>
|
||||
close
|
||||
</span>
|
||||
</i>
|
||||
<div>
|
||||
Close
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="drawer-content flex column box grow"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ResizingAnchor horizontal leading"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="Notifications flex column align-flex-end"
|
||||
/>
|
||||
<div
|
||||
class="mainLayout"
|
||||
style="--sidebar-width: 200px;"
|
||||
>
|
||||
<div
|
||||
class="sidebar"
|
||||
>
|
||||
<div
|
||||
class="flex flex-col"
|
||||
data-testid="cluster-sidebar"
|
||||
>
|
||||
<div
|
||||
class="SidebarCluster"
|
||||
>
|
||||
<div
|
||||
class="Avatar rounded loadingAvatar"
|
||||
style="width: 40px; height: 40px;"
|
||||
>
|
||||
??
|
||||
</div>
|
||||
<div
|
||||
class="loadingClusterName"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="sidebarNav sidebar-active-status"
|
||||
>
|
||||
<div
|
||||
class="SidebarItem"
|
||||
data-is-active-test="false"
|
||||
data-testid="sidebar-item-workloads"
|
||||
>
|
||||
<a
|
||||
class="navItem"
|
||||
data-testid="sidebar-item-link-for-workloads"
|
||||
href="/"
|
||||
>
|
||||
<i
|
||||
class="Icon svg focusable"
|
||||
>
|
||||
<span
|
||||
class="icon"
|
||||
/>
|
||||
</i>
|
||||
<span>
|
||||
Workloads
|
||||
</span>
|
||||
<i
|
||||
class="Icon expandIcon material focusable"
|
||||
>
|
||||
<span
|
||||
class="icon"
|
||||
data-icon-name="keyboard_arrow_down"
|
||||
>
|
||||
keyboard_arrow_down
|
||||
</span>
|
||||
</i>
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
class="SidebarItem"
|
||||
data-is-active-test="false"
|
||||
data-testid="sidebar-item-config"
|
||||
>
|
||||
<a
|
||||
class="navItem"
|
||||
data-testid="sidebar-item-link-for-config"
|
||||
href="/"
|
||||
>
|
||||
<i
|
||||
class="Icon material focusable"
|
||||
>
|
||||
<span
|
||||
class="icon"
|
||||
data-icon-name="list"
|
||||
>
|
||||
list
|
||||
</span>
|
||||
</i>
|
||||
<span>
|
||||
Config
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
class="SidebarItem"
|
||||
data-is-active-test="false"
|
||||
data-testid="sidebar-item-network"
|
||||
>
|
||||
<a
|
||||
class="navItem"
|
||||
data-testid="sidebar-item-link-for-network"
|
||||
href="/"
|
||||
>
|
||||
<i
|
||||
class="Icon material focusable"
|
||||
>
|
||||
<span
|
||||
class="icon"
|
||||
data-icon-name="device_hub"
|
||||
>
|
||||
device_hub
|
||||
</span>
|
||||
</i>
|
||||
<span>
|
||||
Network
|
||||
</span>
|
||||
<i
|
||||
class="Icon expandIcon material focusable"
|
||||
>
|
||||
<span
|
||||
class="icon"
|
||||
data-icon-name="keyboard_arrow_down"
|
||||
>
|
||||
keyboard_arrow_down
|
||||
</span>
|
||||
</i>
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
class="SidebarItem"
|
||||
data-is-active-test="false"
|
||||
data-testid="sidebar-item-storage"
|
||||
>
|
||||
<a
|
||||
class="navItem"
|
||||
data-testid="sidebar-item-link-for-storage"
|
||||
href="/"
|
||||
>
|
||||
<i
|
||||
class="Icon material focusable"
|
||||
>
|
||||
<span
|
||||
class="icon"
|
||||
data-icon-name="storage"
|
||||
>
|
||||
storage
|
||||
</span>
|
||||
</i>
|
||||
<span>
|
||||
Storage
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
class="SidebarItem"
|
||||
data-is-active-test="false"
|
||||
data-testid="sidebar-item-helm"
|
||||
>
|
||||
<a
|
||||
class="navItem"
|
||||
data-testid="sidebar-item-link-for-helm"
|
||||
href="/"
|
||||
>
|
||||
<i
|
||||
class="Icon svg focusable"
|
||||
>
|
||||
<span
|
||||
class="icon"
|
||||
/>
|
||||
</i>
|
||||
<span>
|
||||
Helm
|
||||
</span>
|
||||
<i
|
||||
class="Icon expandIcon material focusable"
|
||||
>
|
||||
<span
|
||||
class="icon"
|
||||
data-icon-name="keyboard_arrow_down"
|
||||
>
|
||||
keyboard_arrow_down
|
||||
</span>
|
||||
</i>
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
class="SidebarItem"
|
||||
data-is-active-test="false"
|
||||
data-testid="sidebar-item-user-management"
|
||||
>
|
||||
<a
|
||||
class="navItem"
|
||||
data-testid="sidebar-item-link-for-user-management"
|
||||
href="/"
|
||||
>
|
||||
<i
|
||||
class="Icon material focusable"
|
||||
>
|
||||
<span
|
||||
class="icon"
|
||||
data-icon-name="security"
|
||||
>
|
||||
security
|
||||
</span>
|
||||
</i>
|
||||
<span>
|
||||
Access Control
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
class="SidebarItem"
|
||||
data-is-active-test="true"
|
||||
data-testid="sidebar-item-custom-resources"
|
||||
>
|
||||
<a
|
||||
aria-current="page"
|
||||
class="navItem active"
|
||||
data-testid="sidebar-item-link-for-custom-resources"
|
||||
href="/"
|
||||
>
|
||||
<i
|
||||
class="Icon material focusable"
|
||||
>
|
||||
<span
|
||||
class="icon"
|
||||
data-icon-name="extension"
|
||||
>
|
||||
extension
|
||||
</span>
|
||||
</i>
|
||||
<span>
|
||||
Custom Resources
|
||||
</span>
|
||||
<i
|
||||
class="Icon expandIcon material focusable"
|
||||
>
|
||||
<span
|
||||
class="icon"
|
||||
data-icon-name="keyboard_arrow_down"
|
||||
>
|
||||
keyboard_arrow_down
|
||||
</span>
|
||||
</i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ResizingAnchor horizontal trailing"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="contents"
|
||||
>
|
||||
<div
|
||||
class="TabLayout"
|
||||
data-testid="tab-layout"
|
||||
>
|
||||
<main
|
||||
class=""
|
||||
>
|
||||
<div
|
||||
class="ItemListLayout flex column KubeObjectListLayout CrdResources"
|
||||
>
|
||||
<div
|
||||
class="header flex gaps align-center"
|
||||
>
|
||||
<h5
|
||||
class="title"
|
||||
>
|
||||
SomeResource
|
||||
</h5>
|
||||
<div
|
||||
class="info-panel box grow"
|
||||
>
|
||||
1 item
|
||||
</div>
|
||||
<div
|
||||
class="Input SearchInput focused"
|
||||
>
|
||||
<label
|
||||
class="input-area flex gaps align-center"
|
||||
id=""
|
||||
>
|
||||
<input
|
||||
class="input box grow"
|
||||
placeholder="SomeResource search ..."
|
||||
spellcheck="false"
|
||||
value=""
|
||||
/>
|
||||
<i
|
||||
class="Icon material focusable small"
|
||||
>
|
||||
<span
|
||||
class="icon"
|
||||
data-icon-name="search"
|
||||
>
|
||||
search
|
||||
</span>
|
||||
</i>
|
||||
</label>
|
||||
<div
|
||||
class="input-info flex gaps"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="items box grow flex column"
|
||||
>
|
||||
<div
|
||||
class="Table flex column KubeObjectListLayout CrdResources box grow dark selectable scrollable sortable autoSize virtual"
|
||||
>
|
||||
<div
|
||||
class="TableHead sticky nowrap topLine"
|
||||
>
|
||||
<div
|
||||
class="TableCell checkbox"
|
||||
>
|
||||
<label
|
||||
class="Checkbox flex align-center"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
/>
|
||||
<i
|
||||
class="box flex align-center"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
class="TableCell name nowrap sorting"
|
||||
id="name"
|
||||
>
|
||||
<div
|
||||
class="content"
|
||||
>
|
||||
Name
|
||||
</div>
|
||||
<i
|
||||
class="Icon sortIcon material focusable"
|
||||
>
|
||||
<span
|
||||
class="icon"
|
||||
data-icon-name="arrow_drop_down"
|
||||
>
|
||||
arrow_drop_down
|
||||
</span>
|
||||
</i>
|
||||
</div>
|
||||
<div
|
||||
class="TableCell some-column nowrap sorting"
|
||||
data-testid="custom-resource-column-title-some-column"
|
||||
id="Some Column"
|
||||
>
|
||||
<div
|
||||
class="content"
|
||||
>
|
||||
Some Column
|
||||
</div>
|
||||
<i
|
||||
class="Icon sortIcon material focusable"
|
||||
>
|
||||
<span
|
||||
class="icon"
|
||||
data-icon-name="arrow_drop_down"
|
||||
>
|
||||
arrow_drop_down
|
||||
</span>
|
||||
</i>
|
||||
</div>
|
||||
<div
|
||||
class="TableCell age nowrap sorting"
|
||||
id="age"
|
||||
>
|
||||
<div
|
||||
class="content"
|
||||
>
|
||||
Age
|
||||
</div>
|
||||
<i
|
||||
class="Icon sortIcon material focusable"
|
||||
>
|
||||
<span
|
||||
class="icon"
|
||||
data-icon-name="arrow_drop_down"
|
||||
>
|
||||
arrow_drop_down
|
||||
</span>
|
||||
</i>
|
||||
</div>
|
||||
<div
|
||||
class="TableCell menu nowrap"
|
||||
>
|
||||
<div
|
||||
class="content"
|
||||
>
|
||||
<i
|
||||
class="Icon material interactive focusable"
|
||||
id="menu-actions-for-item-object-list-content"
|
||||
tabindex="0"
|
||||
>
|
||||
<span
|
||||
class="icon"
|
||||
data-icon-name="more_vert"
|
||||
>
|
||||
more_vert
|
||||
</span>
|
||||
</i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="VirtualList KubeObjectListLayout CrdResources box grow dark"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
class="list"
|
||||
style="position: relative; height: 420000px; width: 100%; overflow: auto; will-change: transform; direction: ltr;"
|
||||
>
|
||||
<div
|
||||
style="height: 33px; width: 100%;"
|
||||
>
|
||||
<div
|
||||
style="position: absolute; left: 0px; top: 0px; height: 33px; width: 100%;"
|
||||
>
|
||||
<div
|
||||
class="TableRow nowrap"
|
||||
>
|
||||
<div
|
||||
class="TableCell checkbox"
|
||||
>
|
||||
<label
|
||||
class="Checkbox flex align-center"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
/>
|
||||
<i
|
||||
class="box flex align-center"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
class="TableCell name"
|
||||
>
|
||||
some-resource
|
||||
</div>
|
||||
<div
|
||||
class="TableCell"
|
||||
/>
|
||||
<div
|
||||
class="TableCell some-column"
|
||||
data-testid="custom-resource-column-cell-some-column-for-some-resource"
|
||||
>
|
||||
{"foo":"bar"}
|
||||
</div>
|
||||
<div
|
||||
class="TableCell age"
|
||||
>
|
||||
<unknown>
|
||||
</div>
|
||||
<div
|
||||
class="TableCell menu"
|
||||
>
|
||||
<div>
|
||||
<i
|
||||
class="Icon material interactive focusable"
|
||||
data-testid="icon-for-menu-actions-for-kube-object-menu-for-some-uid-2"
|
||||
id="menu-actions-for-kube-object-menu-for-some-uid-2"
|
||||
tabindex="0"
|
||||
>
|
||||
<span
|
||||
class="icon"
|
||||
data-icon-name="more_vert"
|
||||
>
|
||||
more_vert
|
||||
</span>
|
||||
</i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="AddRemoveButtons flex gaps"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="footer"
|
||||
>
|
||||
<div
|
||||
class="Dock"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
class="ResizingAnchor vertical leading"
|
||||
/>
|
||||
<div
|
||||
class="tabs-container flex align-center"
|
||||
>
|
||||
<div
|
||||
class="dockTabs"
|
||||
role="tablist"
|
||||
>
|
||||
<div
|
||||
class="Tabs tabs"
|
||||
>
|
||||
<div
|
||||
class="Tab flex gaps align-center DockTab TerminalTab active"
|
||||
data-testid="dock-tab-for-terminal"
|
||||
id="tab-terminal"
|
||||
role="tab"
|
||||
tabindex="0"
|
||||
>
|
||||
<i
|
||||
class="Icon material focusable"
|
||||
>
|
||||
<span
|
||||
class="icon"
|
||||
data-icon-name="terminal"
|
||||
>
|
||||
terminal
|
||||
</span>
|
||||
</i>
|
||||
<div
|
||||
class="label"
|
||||
>
|
||||
<div
|
||||
class="flex align-center"
|
||||
>
|
||||
<span
|
||||
class="title"
|
||||
>
|
||||
Terminal
|
||||
</span>
|
||||
<div
|
||||
class="close"
|
||||
>
|
||||
<i
|
||||
class="Icon material interactive focusable small"
|
||||
data-testid="dock-tab-close-for-terminal"
|
||||
tabindex="0"
|
||||
>
|
||||
<span
|
||||
class="icon"
|
||||
data-icon-name="close"
|
||||
>
|
||||
close
|
||||
</span>
|
||||
</i>
|
||||
<div
|
||||
data-testid="tooltip-content-for-dock-tab-close-for-terminal"
|
||||
>
|
||||
Close ⌘+W
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="toolbar flex gaps align-center box grow"
|
||||
>
|
||||
<div
|
||||
class="dock-menu box grow"
|
||||
>
|
||||
<i
|
||||
class="Icon new-dock-tab material interactive focusable"
|
||||
id="menu-actions-for-dock"
|
||||
tabindex="0"
|
||||
>
|
||||
<span
|
||||
class="icon"
|
||||
data-icon-name="add"
|
||||
>
|
||||
add
|
||||
</span>
|
||||
</i>
|
||||
<div>
|
||||
New tab
|
||||
</div>
|
||||
</div>
|
||||
<i
|
||||
class="Icon material interactive focusable"
|
||||
tabindex="0"
|
||||
>
|
||||
<span
|
||||
class="icon"
|
||||
data-icon-name="fullscreen"
|
||||
>
|
||||
fullscreen
|
||||
</span>
|
||||
</i>
|
||||
<div>
|
||||
Fit to window
|
||||
</div>
|
||||
<i
|
||||
class="Icon material interactive focusable"
|
||||
tabindex="0"
|
||||
>
|
||||
<span
|
||||
class="icon"
|
||||
data-icon-name="keyboard_arrow_up"
|
||||
>
|
||||
keyboard_arrow_up
|
||||
</span>
|
||||
</i>
|
||||
<div>
|
||||
Open
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -0,0 +1,123 @@
|
||||
/**
|
||||
* Copyright (c) OpenLens Authors. All rights reserved.
|
||||
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||
*/
|
||||
|
||||
import type { KubeObjectMetadata, KubeObjectScope } from "@k8slens/kube-object";
|
||||
import { KubeObject, CustomResourceDefinition } from "@k8slens/kube-object";
|
||||
import type { RenderResult } from "@testing-library/react";
|
||||
import navigateToCustomResourcesInjectable from "../../common/front-end-routing/routes/cluster/custom-resources/custom-resources/navigate-to-custom-resources.injectable";
|
||||
import apiManagerInjectable from "../../common/k8s-api/api-manager/manager.injectable";
|
||||
import type { CustomResourceStore } from "../../common/k8s-api/api-manager/resource.store";
|
||||
import type { CustomResourceDefinitionStore } from "../../renderer/components/custom-resources/definition.store";
|
||||
import customResourceDefinitionStoreInjectable from "../../renderer/components/custom-resources/definition.store.injectable";
|
||||
import type { ApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
|
||||
import { getApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
|
||||
|
||||
describe("Viewing Custom Resources with extra columns", () => {
|
||||
let builder: ApplicationBuilder;
|
||||
let result: RenderResult;
|
||||
let customResourceDefinitionStore: CustomResourceDefinitionStore;
|
||||
let customResourceStore: CustomResourceStore<KubeObject<KubeObjectMetadata<KubeObjectScope.Cluster>, void, { someColumn: Record<string, unknown> }>>;
|
||||
let customResource: CustomResourceDefinition;
|
||||
|
||||
beforeEach(async () => {
|
||||
builder = getApplicationBuilder();
|
||||
builder.setEnvironmentToClusterFrame();
|
||||
|
||||
builder.afterWindowStart(({ windowDi }) => {
|
||||
const apiManager = windowDi.inject(apiManagerInjectable);
|
||||
|
||||
customResourceDefinitionStore = windowDi.inject(customResourceDefinitionStoreInjectable);
|
||||
customResource = new CustomResourceDefinition({
|
||||
apiVersion: "apiextensions.k8s.io/v1",
|
||||
kind: "CustomResourceDefinition",
|
||||
metadata: {
|
||||
name: "some-crd",
|
||||
selfLink: "/apis/apiextensions.k8s.io/v1/customresourcedefinitions/some-crd",
|
||||
uid: "some-uid",
|
||||
resourceVersion: "1",
|
||||
},
|
||||
spec: {
|
||||
group: "some-group",
|
||||
scope: "Cluster",
|
||||
names: {
|
||||
kind: "SomeResource",
|
||||
plural: "some-resources",
|
||||
singular: "some-resource",
|
||||
},
|
||||
versions: [
|
||||
{
|
||||
storage: true,
|
||||
name: "v1",
|
||||
served: true,
|
||||
additionalPrinterColumns: [
|
||||
{
|
||||
name: "Some Column",
|
||||
type: "string",
|
||||
description: "Some description",
|
||||
jsonPath: ".spec.someColumn",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
|
||||
customResourceDefinitionStore.items.replace([
|
||||
customResource,
|
||||
]);
|
||||
|
||||
customResourceStore = apiManager.getStore(customResource.getResourceApiBase()) as typeof customResourceStore;
|
||||
|
||||
customResourceStore.items.replace([
|
||||
new KubeObject({
|
||||
apiVersion: "/some-group/v1",
|
||||
kind: "SomeResource",
|
||||
metadata: {
|
||||
name: "some-resource",
|
||||
selfLink: "/apis/some-group/v1/namespaces/default/some-resources/some-resource",
|
||||
uid: "some-uid-2",
|
||||
resourceVersion: "1",
|
||||
},
|
||||
spec: {
|
||||
someColumn: {
|
||||
"foo": "bar",
|
||||
},
|
||||
},
|
||||
}),
|
||||
]);
|
||||
});
|
||||
|
||||
result = await builder.render();
|
||||
|
||||
builder.allowKubeResource({
|
||||
group: "/apis/apiextensions.k8s.io/v1",
|
||||
apiName: "customresourcedefinitions",
|
||||
});
|
||||
|
||||
const windowDi = builder.applicationWindow.only.di;
|
||||
const navigateToCustomResources = windowDi.inject(navigateToCustomResourcesInjectable);
|
||||
|
||||
navigateToCustomResources({
|
||||
group: "some-group",
|
||||
name: "some-resources",
|
||||
});
|
||||
});
|
||||
|
||||
it("renders", () => {
|
||||
expect(result.container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("shows the table for the custom resource SomeResource", () => {
|
||||
expect(result.getByText("SomeResource")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("shows the 'some-column' column", () => {
|
||||
expect(result.getByTestId("custom-resource-column-title-some-column")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("shows some value for in the cells of 'some-column' column", () => {
|
||||
expect(result.getByTestId("custom-resource-column-cell-some-column-for-some-resource")).toHaveTextContent(JSON.stringify({ foo: "bar" }));
|
||||
});
|
||||
});
|
||||
@ -3,9 +3,9 @@
|
||||
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||
*/
|
||||
|
||||
import type { TableCellProps } from "@k8slens/list-layout";
|
||||
import type { StrictReactNode } from "@k8slens/utilities";
|
||||
import type { CatalogEntity } from "../../../common/catalog";
|
||||
import type { TableCellProps } from "../table";
|
||||
|
||||
/**
|
||||
* These are the supported props for the title cell
|
||||
|
||||
@ -20,6 +20,7 @@ import type { CustomResourceDefinitionStore } from "./definition.store";
|
||||
import apiManagerInjectable from "../../../common/k8s-api/api-manager/manager.injectable";
|
||||
import customResourceDefinitionStoreInjectable from "./definition.store.injectable";
|
||||
import { NamespaceSelectBadge } from "../namespaces/namespace-select-badge";
|
||||
import type { TableCellProps } from "@k8slens/list-layout";
|
||||
|
||||
enum columnId {
|
||||
name = "name",
|
||||
@ -95,9 +96,10 @@ class NonInjectedCustomResources extends React.Component<Dependencies> {
|
||||
: undefined,
|
||||
...extraColumns.map(({ name }) => ({
|
||||
title: name,
|
||||
className: name.toLowerCase(),
|
||||
className: name.toLowerCase().replace(/\s+/g, "-"),
|
||||
sortBy: name,
|
||||
id: name,
|
||||
"data-testid": `custom-resource-column-title-${name.toLowerCase().replace(/\s+/g, "-")}`,
|
||||
})),
|
||||
{ title: "Age", className: "age", sortBy: columnId.age, id: columnId.age },
|
||||
]}
|
||||
@ -106,11 +108,10 @@ class NonInjectedCustomResources extends React.Component<Dependencies> {
|
||||
isNamespaced && (
|
||||
<NamespaceSelectBadge namespace={customResource.getNs() as string} />
|
||||
),
|
||||
...(
|
||||
extraColumns
|
||||
.map((column) => safeJSONPathValue(customResource, column.jsonPath))
|
||||
.map(formatJSONValue)
|
||||
),
|
||||
...extraColumns.map((column): TableCellProps => ({
|
||||
"data-testid": `custom-resource-column-cell-${column.name.toLowerCase().replace(/\s+/g, "-")}-for-${customResource.getScopedName()}`,
|
||||
title: formatJSONValue(safeJSONPathValue(customResource, column.jsonPath)),
|
||||
})),
|
||||
<KubeObjectAge key="age" object={customResource} />,
|
||||
]}
|
||||
failedToLoadMessage={(
|
||||
|
||||
@ -10,7 +10,7 @@ import type { IComputedValue } from "mobx";
|
||||
import { computed, makeObservable } from "mobx";
|
||||
import { Observer, observer } from "mobx-react";
|
||||
import type { ConfirmDialogParams } from "../confirm-dialog";
|
||||
import type { TableCellProps, TableProps, TableRowProps, TableSortCallbacks } from "../table";
|
||||
import type { TableProps, TableRowProps, TableSortCallbacks } from "../table";
|
||||
import { Table, TableCell, TableHead, TableRow } from "../table";
|
||||
import type { IClassName, StrictReactNode } from "@k8slens/utilities";
|
||||
import { cssNames, isDefined, isReactNode, noop, prevDefault, stopPropagation } from "@k8slens/utilities";
|
||||
@ -18,7 +18,7 @@ import type { AddRemoveButtonsProps } from "../add-remove-buttons";
|
||||
import { AddRemoveButtons } from "../add-remove-buttons";
|
||||
import { NoItems } from "../no-items";
|
||||
import { Spinner } from "../spinner";
|
||||
import type { ItemObject } from "@k8slens/list-layout";
|
||||
import type { ItemObject, TableCellProps } from "@k8slens/list-layout";
|
||||
import type { Filter, PageFiltersStore } from "./page-filters/store";
|
||||
import type { LensTheme } from "../../themes/lens-theme";
|
||||
import { MenuActions } from "../menu/menu-actions";
|
||||
|
||||
@ -9,11 +9,11 @@ import React from "react";
|
||||
import type { IComputedValue } from "mobx";
|
||||
import { computed, makeObservable, untracked } from "mobx";
|
||||
import type { ConfirmDialogParams } from "../confirm-dialog";
|
||||
import type { TableCellProps, TableProps, TableRowProps, TableSortCallbacks } from "../table";
|
||||
import type { TableProps, TableRowProps, TableSortCallbacks } from "../table";
|
||||
import type { IClassName, StrictReactNode, SingleOrMany } from "@k8slens/utilities";
|
||||
import { cssNames, noop } from "@k8slens/utilities";
|
||||
import type { AddRemoveButtonsProps } from "../add-remove-buttons";
|
||||
import type { ItemObject } from "@k8slens/list-layout";
|
||||
import type { ItemObject, TableCellProps } from "@k8slens/list-layout";
|
||||
import type { SearchInputUrlProps } from "../input";
|
||||
import type { PageFiltersStore } from "./page-filters/store";
|
||||
import { FilterType } from "./page-filters/store";
|
||||
|
||||
@ -4,80 +4,16 @@
|
||||
*/
|
||||
|
||||
import "./table-cell.scss";
|
||||
import type { TableSortBy, TableSortParams } from "./table";
|
||||
|
||||
import React from "react";
|
||||
import type { StrictReactNode } from "@k8slens/utilities";
|
||||
import { cssNames } from "@k8slens/utilities";
|
||||
import { Icon } from "../icon";
|
||||
import { Checkbox } from "../checkbox";
|
||||
import autoBindReact from "auto-bind/react";
|
||||
import type { TableCellProps } from "@k8slens/list-layout";
|
||||
|
||||
export type TableCellElem = React.ReactElement<TableCellProps>;
|
||||
|
||||
export interface TableCellProps extends React.DOMAttributes<HTMLDivElement> {
|
||||
/**
|
||||
* used for configuration visibility of columns
|
||||
*/
|
||||
id?: string;
|
||||
|
||||
/**
|
||||
* Any css class names for this table cell. Only used if `title` is a "simple" react node
|
||||
*/
|
||||
className?: string;
|
||||
|
||||
/**
|
||||
* The actual value of the cell
|
||||
*/
|
||||
title?: StrictReactNode;
|
||||
|
||||
/**
|
||||
* content inside could be scrolled
|
||||
*/
|
||||
scrollable?: boolean;
|
||||
|
||||
/**
|
||||
* render cell with a checkbox
|
||||
*/
|
||||
checkbox?: boolean;
|
||||
|
||||
/**
|
||||
* mark checkbox as checked or not
|
||||
*/
|
||||
isChecked?: boolean;
|
||||
|
||||
/**
|
||||
* column name, must be same as key in sortable object `<Table sortable={}></Table>`
|
||||
*/
|
||||
sortBy?: TableSortBy;
|
||||
|
||||
/**
|
||||
* id of the column which follow same visibility rules
|
||||
*/
|
||||
showWithColumn?: string;
|
||||
|
||||
/**
|
||||
* @internal
|
||||
*/
|
||||
_sorting?: Partial<TableSortParams>;
|
||||
|
||||
/**
|
||||
* @internal
|
||||
*/
|
||||
_sort?(sortBy: TableSortBy): void;
|
||||
|
||||
/**
|
||||
* @internal
|
||||
* indicator, might come from parent <TableHead>, don't use this prop outside (!)
|
||||
*/
|
||||
_nowrap?: boolean;
|
||||
|
||||
/**
|
||||
* For passing in the testid
|
||||
*/
|
||||
"data-testid"?: string;
|
||||
}
|
||||
|
||||
export class TableCell extends React.Component<TableCellProps> {
|
||||
constructor(props: TableCellProps) {
|
||||
super(props);
|
||||
|
||||
@ -141,13 +141,6 @@ export class CustomResourceDefinition extends KubeObject<
|
||||
}
|
||||
|
||||
getPreferredVersion(): CustomResourceDefinitionVersion {
|
||||
return this.getPreferedVersion();
|
||||
}
|
||||
|
||||
/**
|
||||
* @deprecated Switch to using {@link getPreferredVersion} instead (which fixes the is a typo)
|
||||
*/
|
||||
getPreferedVersion(): CustomResourceDefinitionVersion {
|
||||
const { apiVersion } = this;
|
||||
|
||||
switch (apiVersion) {
|
||||
@ -179,8 +172,15 @@ export class CustomResourceDefinition extends KubeObject<
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* @deprecated Switch to using {@link getPreferredVersion} instead (which fixes the is a typo)
|
||||
*/
|
||||
getPreferedVersion(): CustomResourceDefinitionVersion {
|
||||
return this.getPreferredVersion();
|
||||
}
|
||||
|
||||
getVersion() {
|
||||
return this.getPreferedVersion().name;
|
||||
return this.getPreferredVersion().name;
|
||||
}
|
||||
|
||||
isNamespaced() {
|
||||
@ -200,13 +200,13 @@ export class CustomResourceDefinition extends KubeObject<
|
||||
}
|
||||
|
||||
getPrinterColumns(ignorePriority = true): AdditionalPrinterColumnsV1[] {
|
||||
const columns = this.getPreferedVersion().additionalPrinterColumns ?? [];
|
||||
const columns = this.getPreferredVersion().additionalPrinterColumns ?? [];
|
||||
|
||||
return columns.filter((column) => column.name.toLowerCase() !== "age" && (ignorePriority || !column.priority));
|
||||
}
|
||||
|
||||
getValidation() {
|
||||
return JSON.stringify(this.getPreferedVersion().schema, null, 2);
|
||||
return JSON.stringify(this.getPreferredVersion().schema, null, 2);
|
||||
}
|
||||
|
||||
getConditions() {
|
||||
|
||||
@ -54,7 +54,7 @@ export interface TableCellProps extends React.DOMAttributes<HTMLDivElement> {
|
||||
isChecked?: boolean;
|
||||
|
||||
/**
|
||||
* column name, must be same as key in sortable object <Table sortable={}/>
|
||||
* column name, must be same as key in sortable object `<Table sortable={}></Table>`
|
||||
*/
|
||||
sortBy?: TableSortBy;
|
||||
|
||||
@ -78,4 +78,9 @@ export interface TableCellProps extends React.DOMAttributes<HTMLDivElement> {
|
||||
* indicator, might come from parent <TableHead>, don't use this prop outside (!)
|
||||
*/
|
||||
_nowrap?: boolean;
|
||||
|
||||
/**
|
||||
* For passing in the testid
|
||||
*/
|
||||
"data-testid"?: string;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user