Remove legacy renderBooleans prop (#5483)

src/renderer/components/+custom-resources/__tests__/__snapshots__/custom-resource-details.test.tsx.snap

@@ -0,0 +1,225 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<CustomResourceDetails /> with a CRD with a boolean field should display false in an additionalPrinterColumn as 'false' 1`] = `
+<div>
+  <div
+    class="CrdResourceDetails MyCrd"
+  >
+    <div
+      class="DrawerItem"
+    >
+      <span
+        class="name"
+      >
+        Created
+      </span>
+      <span
+        class="value"
+      >
+        &lt;unknown&gt;
+         ago 
+      </span>
+    </div>
+    <div
+      class="DrawerItem"
+    >
+      <span
+        class="name"
+      >
+        Name
+      </span>
+      <span
+        class="value"
+      >
+        first-crd
+      </span>
+    </div>
+    <div
+      class="DrawerItem"
+    >
+      <span
+        class="name"
+      >
+        MyField
+      </span>
+      <span
+        class="value"
+      >
+        <ul>
+          <li>
+            false
+          </li>
+        </ul>
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<CustomResourceDetails /> with a CRD with a boolean field should display true in an additionalPrinterColumn as 'true' 1`] = `
+<div>
+  <div
+    class="CrdResourceDetails MyCrd"
+  >
+    <div
+      class="DrawerItem"
+    >
+      <span
+        class="name"
+      >
+        Created
+      </span>
+      <span
+        class="value"
+      >
+        &lt;unknown&gt;
+         ago 
+      </span>
+    </div>
+    <div
+      class="DrawerItem"
+    >
+      <span
+        class="name"
+      >
+        Name
+      </span>
+      <span
+        class="value"
+      >
+        first-crd
+      </span>
+    </div>
+    <div
+      class="DrawerItem"
+    >
+      <span
+        class="name"
+      >
+        MyField
+      </span>
+      <span
+        class="value"
+      >
+        <ul>
+          <li>
+            true
+          </li>
+        </ul>
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<CustomResourceDetails /> with a CRD with a number field should display 0 in an additionalPrinterColumn as '0' 1`] = `
+<div>
+  <div
+    class="CrdResourceDetails MyCrd"
+  >
+    <div
+      class="DrawerItem"
+    >
+      <span
+        class="name"
+      >
+        Created
+      </span>
+      <span
+        class="value"
+      >
+        &lt;unknown&gt;
+         ago 
+      </span>
+    </div>
+    <div
+      class="DrawerItem"
+    >
+      <span
+        class="name"
+      >
+        Name
+      </span>
+      <span
+        class="value"
+      >
+        first-crd
+      </span>
+    </div>
+    <div
+      class="DrawerItem"
+    >
+      <span
+        class="name"
+      >
+        MyField
+      </span>
+      <span
+        class="value"
+      >
+        <ul>
+          <li>
+            0
+          </li>
+        </ul>
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<CustomResourceDetails /> with a CRD with a number field should display 1234 in an additionalPrinterColumn as '1234' 1`] = `
+<div>
+  <div
+    class="CrdResourceDetails MyCrd"
+  >
+    <div
+      class="DrawerItem"
+    >
+      <span
+        class="name"
+      >
+        Created
+      </span>
+      <span
+        class="value"
+      >
+        &lt;unknown&gt;
+         ago 
+      </span>
+    </div>
+    <div
+      class="DrawerItem"
+    >
+      <span
+        class="name"
+      >
+        Name
+      </span>
+      <span
+        class="value"
+      >
+        first-crd
+      </span>
+    </div>
+    <div
+      class="DrawerItem"
+    >
+      <span
+        class="name"
+      >
+        MyField
+      </span>
+      <span
+        class="value"
+      >
+        <ul>
+          <li>
+            1234
+          </li>
+        </ul>
+      </span>
+    </div>
+  </div>
+</div>
+`;

src/renderer/components/+custom-resources/__tests__/custom-resource-details.test.tsx

@@ -0,0 +1,206 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import React from "react";
+import { CustomResourceDefinition } from "../../../../common/k8s-api/endpoints";
+import { KubeObject } from "../../../../common/k8s-api/kube-object";
+import { getDiForUnitTesting } from "../../../getDiForUnitTesting";
+import type { DiRender } from "../../test-utils/renderFor";
+import { renderFor } from "../../test-utils/renderFor";
+import { CustomResourceDetails } from "../crd-resource-details";
+
+describe("<CustomResourceDetails />", () => {
+  let render: DiRender;
+
+  beforeEach(() => {
+    const di = getDiForUnitTesting({ doGeneralOverrides: true });
+
+    render = renderFor(di);
+  });
+
+  describe("with a CRD with a boolean field", () => {
+    let crd: CustomResourceDefinition;
+
+    beforeEach(() => {
+      crd = new CustomResourceDefinition({
+        apiVersion: "apiextensions.k8s.io/v1",
+        kind: "CustomResourceDefinition",
+        metadata: {
+          name: "my-crd",
+          resourceVersion: "1",
+          selfLink: "/apis/apiextensions.k8s.io/v1/customresourcedefinitions/my-crd",
+          uid: "1",
+        },
+        spec: {
+          versions: [{
+            name: "v1",
+            served: true,
+            storage: true,
+            schema: {
+              openAPIV3Schema: {
+                type: "object",
+                properties: {
+                  spec: {
+                    type: "object",
+                    properties: {
+                      "my-field": {
+                        type: "boolean",
+                      },
+                    },
+                  },
+                },
+              },
+            },
+            additionalPrinterColumns: [
+              {
+                name: "MyField",
+                jsonPath: ".spec.my-field",
+                type: "boolean",
+              },
+            ],
+          }],
+          group: "stable.lens.dev",
+          names: {
+            kind: "MyCrd",
+            plural: "my-crds",
+          },
+          scope: "Cluster",
+        },
+      });
+    });
+
+    it("should display false in an additionalPrinterColumn as 'false'", () => {
+      const cr = new KubeObject({
+        apiVersion: "stable.lens.dev/v1",
+        kind: "MyCrd",
+        metadata: {
+          name: "first-crd",
+          resourceVersion: "1",
+          selfLink: "stable.lens.dev/v1/first-crd",
+          uid: "2",
+        },
+        spec: {
+          "my-field": false,
+        },
+      });
+      const result = render(<CustomResourceDetails crd={crd} object={cr} />);
+
+      expect(result.container).toMatchSnapshot();
+      expect(result.getByText("false")).toBeTruthy();
+    });
+
+    it("should display true in an additionalPrinterColumn as 'true'", () => {
+      const cr = new KubeObject({
+        apiVersion: "stable.lens.dev/v1",
+        kind: "MyCrd",
+        metadata: {
+          name: "first-crd",
+          resourceVersion: "1",
+          selfLink: "stable.lens.dev/v1/first-crd",
+          uid: "2",
+        },
+        spec: {
+          "my-field": true,
+        },
+      });
+      const result = render(<CustomResourceDetails crd={crd} object={cr} />);
+
+      expect(result.container).toMatchSnapshot();
+      expect(result.getByText("true")).toBeTruthy();
+    });
+  });
+
+  describe("with a CRD with a number field", () => {
+    let crd: CustomResourceDefinition;
+
+    beforeEach(() => {
+      crd = new CustomResourceDefinition({
+        apiVersion: "apiextensions.k8s.io/v1",
+        kind: "CustomResourceDefinition",
+        metadata: {
+          name: "my-crd",
+          resourceVersion: "1",
+          selfLink: "/apis/apiextensions.k8s.io/v1/customresourcedefinitions/my-crd",
+          uid: "1",
+        },
+        spec: {
+          versions: [{
+            name: "v1",
+            served: true,
+            storage: true,
+            schema: {
+              openAPIV3Schema: {
+                type: "object",
+                properties: {
+                  spec: {
+                    type: "object",
+                    properties: {
+                      "my-field": {
+                        type: "number",
+                      },
+                    },
+                  },
+                },
+              },
+            },
+            additionalPrinterColumns: [
+              {
+                name: "MyField",
+                jsonPath: ".spec.my-field",
+                type: "number",
+              },
+            ],
+          }],
+          group: "stable.lens.dev",
+          names: {
+            kind: "MyCrd",
+            plural: "my-crds",
+          },
+          scope: "Cluster",
+        },
+      });
+    });
+
+    it("should display 0 in an additionalPrinterColumn as '0'", () => {
+      const cr = new KubeObject({
+        apiVersion: "stable.lens.dev/v1",
+        kind: "MyCrd",
+        metadata: {
+          name: "first-crd",
+          resourceVersion: "1",
+          selfLink: "stable.lens.dev/v1/first-crd",
+          uid: "2",
+        },
+        spec: {
+          "my-field": 0,
+        },
+      });
+      const result = render(<CustomResourceDetails crd={crd} object={cr} />);
+
+      expect(result.container).toMatchSnapshot();
+      expect(result.getByText("0")).toBeTruthy();
+    });
+
+    it("should display 1234 in an additionalPrinterColumn as '1234'", () => {
+      const cr = new KubeObject({
+        apiVersion: "stable.lens.dev/v1",
+        kind: "MyCrd",
+        metadata: {
+          name: "first-crd",
+          resourceVersion: "1",
+          selfLink: "stable.lens.dev/v1/first-crd",
+          uid: "2",
+        },
+        spec: {
+          "my-field": 1234,
+        },
+      });
+      const result = render(<CustomResourceDetails crd={crd} object={cr} />);
+
+      expect(result.container).toMatchSnapshot();
+      expect(result.getByText("1234")).toBeTruthy();
+    });
+  });
+});

src/renderer/components/+custom-resources/crd-resource-details.tsx

@@ -25,7 +25,7 @@ export interface CustomResourceDetailsProps extends KubeObjectDetailsProps<KubeO
   crd: CustomResourceDefinition;
 }
 
-function convertSpecValue(value: any): any {
+function convertSpecValue(value: unknown): React.ReactNode {
   if (Array.isArray(value)) {
     return (
       <ul>
@@ -50,18 +50,22 @@ function convertSpecValue(value: any): any {
     );
   }
 
-  return value;
+  if (
+    typeof value === "boolean"
+    || typeof value === "string"
+    || typeof value === "number"
+  ) {
+    return value.toString();
+  }
+
+  return null;
 }
 
 @observer
 export class CustomResourceDetails extends React.Component<CustomResourceDetailsProps> {
   renderAdditionalColumns(resource: KubeObject, columns: AdditionalPrinterColumnsV1[]) {
     return columns.map(({ name, jsonPath }) => (
-      <DrawerItem
-        key={name}
-        name={name}
-        renderBoolean
-      >
+      <DrawerItem key={name} name={name}>
         {convertSpecValue(JSONPath.query(resource, convertKubectlJsonPathToNodeJsonPath(jsonPath)))}
       </DrawerItem>
     ));

src/renderer/components/drawer/drawer-item.tsx

@@ -5,14 +5,20 @@
 
 import "./drawer-item.scss";
 import React from "react";
-import { cssNames, displayBooleans } from "../../utils";
+import { cssNames } from "../../utils";
 
 export interface DrawerItemProps extends React.HTMLAttributes<HTMLDivElement> {
   name: React.ReactNode;
   title?: string;
   labelsOnly?: boolean;
   hidden?: boolean;
-  renderBoolean?: boolean; // show "true" or "false" for all of the children elements are "typeof boolean"
+
+  /**
+   * @deprecated This prop is no longer used, you should stringify the booleans yourself.
+   *
+   * This was only meant to be an internal prop anyway.
+   */
+  renderBooleans?: boolean;
 }
 
 export function DrawerItem({
@@ -22,7 +28,6 @@ export function DrawerItem({
   children,
   hidden = false,
   className,
-  renderBoolean,
   ...elemProps
 }: DrawerItemProps) {
   if (hidden) {
@@ -36,7 +41,7 @@ export function DrawerItem({
       title={title}
     >
       <span className="name">{name}</span>
-      <span className="value">{displayBooleans(renderBoolean, children)}</span>
+      <span className="value">{children}</span>
     </div>
   );
 }

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

@@ -8,7 +8,7 @@ import type { TableSortBy, TableSortParams } from "./table";
 
 import type { ReactNode } from "react";
 import React from "react";
-import { autoBind, cssNames, displayBooleans } from "../../utils";
+import { autoBind, cssNames } from "../../utils";
 import { Icon } from "../icon";
 import { Checkbox } from "../checkbox";
 
@@ -45,11 +45,6 @@ export interface TableCellProps extends React.DOMAttributes<HTMLDivElement> {
    */
   isChecked?: boolean;
 
-  /**
-   * show "true" or "false" for all of the children elements are "typeof boolean"
-   */
-  renderBoolean?: boolean;
-
   /**
    * column name, must be same as key in sortable object <Table sortable={}/>
    */
@@ -136,7 +131,6 @@ export class TableCell extends React.Component<TableCellProps> {
       _nowrap,
       children,
       title,
-      renderBoolean: displayBoolean = false,
       showWithColumn,
       ...cellProps
     } = this.props;
@@ -147,7 +141,7 @@ export class TableCell extends React.Component<TableCellProps> {
       nowrap: _nowrap,
       sorting: _sort && typeof sortBy === "string",
     });
-    const content = displayBooleans(displayBoolean, title || children);
+    const content = title || children;
 
     return (
       <div

src/renderer/utils/__tests__/display-booleans.test.tsx

@@ -1,23 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-
-import React from "react";
-import { displayBooleans } from "../display-booleans";
-
-describe("displayBooleans tests", () => {
-  it("should not do anything to div's if shouldShow is false", () => {
-    expect(displayBooleans(false, <div></div>)).toStrictEqual(<div></div>);
-  });
-
-  it("should not do anything to booleans's if shouldShow is false", () => {
-    expect(displayBooleans(false, true)).toStrictEqual(true);
-    expect(displayBooleans(false, false)).toStrictEqual(false);
-  });
-
-  it("should stringify booleans when shouldShow is true", () => {
-    expect(displayBooleans(true, true)).toStrictEqual("true");
-    expect(displayBooleans(true, false)).toStrictEqual("false");
-  });
-});

src/renderer/utils/display-booleans.ts

@@ -1,20 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-
-import type React from "react";
-
-export function displayBooleans(shouldShow: boolean | undefined, from: React.ReactNode): React.ReactNode {
-  if (shouldShow) {
-    if (typeof from === "boolean") {
-      return from.toString();
-    }
-
-    if (Array.isArray(from)) {
-      return from.map(node => displayBooleans(shouldShow, node));
-    }
-  }
-
-  return from;
-}

src/renderer/utils/index.ts

@@ -9,7 +9,6 @@ export * from "../../common/event-emitter";
 
 export * from "./cssNames";
 export * from "./cssVar";
-export * from "./display-booleans";
 export * from "./display-mode";
 export * from "./interval";
 export * from "./isMiddleClick";