Switch to failedToLoadMessage as ReactNode and added test

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

src/common/k8s-api/__tests__/crd.test.ts

@@ -51,7 +51,7 @@ describe("Crds", () => {
       expect(() => crd.getVersion()).toThrowError("Failed to find a version for CustomResourceDefinition foo");
     });
 
-    it("should should get the version that is both served and stored", () => {
+    it("should get the version that is both served and stored", () => {
       const crd = new CustomResourceDefinition({
         apiVersion: "apiextensions.k8s.io/v1",
         kind: "CustomResourceDefinition",
@@ -79,7 +79,35 @@ describe("Crds", () => {
       expect(crd.getVersion()).toBe("123");
     });
 
-    it("should should get the version that is both served and stored even with version field", () => {
+    it("should get the version that is only stored", () => {
+      const crd = new CustomResourceDefinition({
+        apiVersion: "apiextensions.k8s.io/v1",
+        kind: "CustomResourceDefinition",
+        metadata: {
+          name: "foo",
+          resourceVersion: "12345",
+          uid: "12345",
+        },
+        spec: {
+          versions: [
+            {
+              name: "123",
+              served: false,
+              storage: true,
+            },
+            {
+              name: "1234",
+              served: false,
+              storage: false,
+            },
+          ],
+        },
+      });
+
+      expect(crd.getVersion()).toBe("123");
+    });
+
+    it("should get the version that is both served and stored even with version field", () => {
       const crd = new CustomResourceDefinition({
         apiVersion: "apiextensions.k8s.io/v1",
         kind: "CustomResourceDefinition",

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

@@ -78,6 +78,17 @@ export class CrdResources extends React.Component<Props> {
       sortingCallbacks[column.name] = item => jsonPath.value(item, parseJsonPath(column.jsonPath.slice(1)));
     });
 
+    const version = crd.getPreferedVersion();
+    const loadFailedPrefix = <p>Failed to load {crd.getPluralName()}</p>;
+    const failedToLoadMessage = version.served
+      ? loadFailedPrefix
+      : (
+        <>
+          {loadFailedPrefix}
+          <p>Prefered version ({crd.getGroup()}/{version.name}) is not served</p>
+        </>
+      );
+
     return (
       <KubeObjectListLayout
         isConfigurable
@@ -129,15 +140,7 @@ export class CrdResources extends React.Component<Props> {
           }),
           crdInstance.getAge(),
         ]}
-        renderFailedToLoadDetails={() => {
+        failedToLoadMessage={failedToLoadMessage}
-          if (!crd.getPreferedVersion().served) {
-            return (
-              <p>Prefered version is not served.</p>
-            );
-          }
-
-          return undefined;
-        }}
       />
     );
   }

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

@@ -97,7 +97,13 @@ export interface ItemListLayoutProps<I extends ItemObject> {
   // other
   customizeRemoveDialog?: (selectedItems: I[]) => Partial<ConfirmDialogParams>;
   renderFooter?: (parent: ItemListLayout<I>) => React.ReactNode;
-  renderFailedToLoadDetails?: () => React.ReactNode;
+
+  /**
+   * Message to display when a store failed to load
+   *
+   * @default "Failed to load items"
+   */
+  failedToLoadMessage?: React.ReactNode;
 
   filterCallbacks?: ItemsFilters<I>;
 }
@@ -115,7 +121,8 @@ const defaultProps: Partial<ItemListLayoutProps<ItemObject>> = {
   hasDetailsView: true,
   onDetails: noop,
   virtual: true,
-  customizeTableRowProps: () => ({} as TableRowProps),
+  customizeTableRowProps: () => ({}),
+  failedToLoadMessage: "Failed to load items",
 };
 
 @observer
@@ -323,7 +330,7 @@ export class ItemListLayout<I extends ItemObject> extends React.Component<ItemLi
 
   renderNoItems() {
     if (this.failedToLoad) {
-      return <NoItems>Failed to load items.{this.props.renderFailedToLoadDetails?.()}</NoItems>;
+      return <NoItems>{this.props.failedToLoadMessage}</NoItems>;
     }
 
     if (!this.isReady) {