Fix crash in <CephFs />

- Add some basic unit tests

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

src/common/k8s-api/endpoints/pod.api.ts

@@ -294,8 +294,10 @@ export interface CephfsSource {
   secretRef?: SecretReference;
   /**
    * Whether the filesystem is used as readOnly.
+   *
+   * @default false
    */
-  readOnly: boolean;
+  readOnly?: boolean;
 }
 
 export interface CinderSource {

src/renderer/components/+workloads-pods/details/volumes/variants/__tests__/__snapshots__/ceph-fs.test.tsx.snap

@@ -0,0 +1,226 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<CephFs /> should render 'false' for Readonly when false is provided 1`] = `
+<div>
+  <div
+    class="DrawerItem"
+  >
+    <span
+      class="name"
+    >
+      Monitors
+    </span>
+    <span
+      class="value"
+    >
+      <ul />
+    </span>
+  </div>
+  <div
+    class="DrawerItem"
+  >
+    <span
+      class="name"
+    >
+      Mount Path
+    </span>
+    <span
+      class="value"
+    >
+      /
+    </span>
+  </div>
+  <div
+    class="DrawerItem"
+  >
+    <span
+      class="name"
+    >
+      Username
+    </span>
+    <span
+      class="value"
+    >
+      admin
+    </span>
+  </div>
+  <div
+    class="DrawerItem"
+  >
+    <span
+      class="name"
+    >
+      Secret Filepath
+    </span>
+    <span
+      class="value"
+    >
+      /etc/ceph/user.secret
+    </span>
+  </div>
+  <div
+    class="DrawerItem"
+  >
+    <span
+      class="name"
+    >
+      Readonly
+    </span>
+    <span
+      class="value"
+    >
+      false
+    </span>
+  </div>
+</div>
+`;
+
+exports[`<CephFs /> should render 'false' for Readonly when not provided 1`] = `
+<div>
+  <div
+    class="DrawerItem"
+  >
+    <span
+      class="name"
+    >
+      Monitors
+    </span>
+    <span
+      class="value"
+    >
+      <ul />
+    </span>
+  </div>
+  <div
+    class="DrawerItem"
+  >
+    <span
+      class="name"
+    >
+      Mount Path
+    </span>
+    <span
+      class="value"
+    >
+      /
+    </span>
+  </div>
+  <div
+    class="DrawerItem"
+  >
+    <span
+      class="name"
+    >
+      Username
+    </span>
+    <span
+      class="value"
+    >
+      admin
+    </span>
+  </div>
+  <div
+    class="DrawerItem"
+  >
+    <span
+      class="name"
+    >
+      Secret Filepath
+    </span>
+    <span
+      class="value"
+    >
+      /etc/ceph/user.secret
+    </span>
+  </div>
+  <div
+    class="DrawerItem"
+  >
+    <span
+      class="name"
+    >
+      Readonly
+    </span>
+    <span
+      class="value"
+    >
+      false
+    </span>
+  </div>
+</div>
+`;
+
+exports[`<CephFs /> should render 'true' for Readonly when true is provided 1`] = `
+<div>
+  <div
+    class="DrawerItem"
+  >
+    <span
+      class="name"
+    >
+      Monitors
+    </span>
+    <span
+      class="value"
+    >
+      <ul />
+    </span>
+  </div>
+  <div
+    class="DrawerItem"
+  >
+    <span
+      class="name"
+    >
+      Mount Path
+    </span>
+    <span
+      class="value"
+    >
+      /
+    </span>
+  </div>
+  <div
+    class="DrawerItem"
+  >
+    <span
+      class="name"
+    >
+      Username
+    </span>
+    <span
+      class="value"
+    >
+      admin
+    </span>
+  </div>
+  <div
+    class="DrawerItem"
+  >
+    <span
+      class="name"
+    >
+      Secret Filepath
+    </span>
+    <span
+      class="value"
+    >
+      /etc/ceph/user.secret
+    </span>
+  </div>
+  <div
+    class="DrawerItem"
+  >
+    <span
+      class="name"
+    >
+      Readonly
+    </span>
+    <span
+      class="value"
+    >
+      true
+    </span>
+  </div>
+</div>
+`;

src/renderer/components/+workloads-pods/details/volumes/variants/__tests__/ceph-fs.test.tsx

@@ -0,0 +1,116 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import { render } from "@testing-library/react";
+import React from "react";
+import type { CephfsSource } from "../../../../../../../common/k8s-api/endpoints";
+import { Pod } from "../../../../../../../common/k8s-api/endpoints";
+import { CephFs } from "../ceph-fs";
+
+describe("<CephFs />", () => {
+  it("should render 'false' for Readonly when not provided", () => {
+    const cephfsName = "my-ceph";
+    const cephfsVolume: CephfsSource = {
+      monitors: [],
+    };
+    const pod = new Pod({
+      apiVersion: "v1",
+      kind: "Pod",
+      metadata: {
+        name: "my-pod",
+        namespace: "default",
+        resourceVersion: "1",
+        uid: "123",
+        selfLink: "/api/v1/pod/default/my-pod",
+      },
+      spec: {
+        volumes: [{
+          name: cephfsName,
+          cephfs: cephfsVolume,
+        }],
+      },
+    });
+    const result = render((
+      <CephFs
+        pod={pod}
+        variant={cephfsVolume}
+        volumeName={cephfsName}
+      />
+    ));
+
+    expect(result.container).toMatchSnapshot();
+    expect(result.getByTestId("cephfs-readonly").innerText).toBe("false");
+  });
+
+  it("should render 'false' for Readonly when false is provided", () => {
+    const cephfsName = "my-ceph";
+    const cephfsVolume: CephfsSource = {
+      monitors: [],
+      readOnly: false,
+    };
+    const pod = new Pod({
+      apiVersion: "v1",
+      kind: "Pod",
+      metadata: {
+        name: "my-pod",
+        namespace: "default",
+        resourceVersion: "1",
+        uid: "123",
+        selfLink: "/api/v1/pod/default/my-pod",
+      },
+      spec: {
+        volumes: [{
+          name: cephfsName,
+          cephfs: cephfsVolume,
+        }],
+      },
+    });
+    const result = render((
+      <CephFs
+        pod={pod}
+        variant={cephfsVolume}
+        volumeName={cephfsName}
+      />
+    ));
+
+    expect(result.container).toMatchSnapshot();
+    expect(result.getByTestId("cephfs-readonly").innerText).toBe("false");
+  });
+
+  it("should render 'true' for Readonly when true is provided", () => {
+    const cephfsName = "my-ceph";
+    const cephfsVolume: CephfsSource = {
+      monitors: [],
+      readOnly: true,
+    };
+    const pod = new Pod({
+      apiVersion: "v1",
+      kind: "Pod",
+      metadata: {
+        name: "my-pod",
+        namespace: "default",
+        resourceVersion: "1",
+        uid: "123",
+        selfLink: "/api/v1/pod/default/my-pod",
+      },
+      spec: {
+        volumes: [{
+          name: cephfsName,
+          cephfs: cephfsVolume,
+        }],
+      },
+    });
+    const result = render((
+      <CephFs
+        pod={pod}
+        variant={cephfsVolume}
+        volumeName={cephfsName}
+      />
+    ));
+
+    expect(result.container).toMatchSnapshot();
+    expect(result.getByTestId("cephfs-readonly").innerText).toBe("true");
+  });
+});

src/renderer/components/+workloads-pods/details/volumes/variants/ceph-fs.tsx

@@ -10,7 +10,7 @@ import type { VolumeVariantComponent } from "../variant-helpers";
 import { LocalRef } from "../variant-helpers";
 
 export const CephFs: VolumeVariantComponent<"cephfs"> = (
-  ({ pod, variant: { monitors, path = "/", user = "admin", secretFile = "/etc/ceph/user.secret", secretRef, readOnly }}) => (
+  ({ pod, variant: { monitors, path = "/", user = "admin", secretFile = "/etc/ceph/user.secret", secretRef, readOnly = false }}) => (
     <>
       <DrawerItem name="Monitors">
         <ul>
@@ -39,7 +39,7 @@ export const CephFs: VolumeVariantComponent<"cephfs"> = (
             </DrawerItem>
           )
       }
-      <DrawerItem name="Readonly">
+      <DrawerItem name="Readonly" valueTestId="cephfs-readonly">
         {readOnly.toString()}
       </DrawerItem>
     </>

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

@@ -13,6 +13,7 @@ export interface DrawerItemProps extends React.HTMLAttributes<HTMLDivElement> {
   labelsOnly?: boolean;
   hidden?: boolean;
   renderBoolean?: boolean; // show "true" or "false" for all of the children elements are "typeof boolean"
+  valueTestId?: string;
 }
 
 export function DrawerItem({
@@ -23,6 +24,7 @@ export function DrawerItem({
   hidden = false,
   className,
   renderBoolean,
+  valueTestId,
   ...elemProps
 }: DrawerItemProps) {
   if (hidden) {
@@ -36,7 +38,7 @@ export function DrawerItem({
       title={title}
     >
       <span className="name">{name}</span>
-      <span className="value">{displayBooleans(renderBoolean, children)}</span>
+      <span className="value" data-testId={valueTestId}>{displayBooleans(renderBoolean, children)}</span>
     </div>
   );
 }