chore: Add some behavioural tests for custom columns for custom resources

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

packages/core/src/renderer/components/catalog/custom-category-columns.ts

@@ -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

packages/core/src/renderer/components/custom-resources/crd-resources.tsx

@@ -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={(

packages/core/src/renderer/components/item-object-list/content.tsx

@@ -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";

packages/core/src/renderer/components/item-object-list/list-layout.tsx

@@ -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";

packages/core/src/renderer/components/table/table-cell.tsx

@@ -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);