Fix resource table when working with lists (#2122)

dashboard/src/components/AppView/ResourceTable/ResourceTable.test.tsx

@@ -29,6 +29,7 @@ const sampleResourceRef = {
 } as ResourceRef;
 
 const deployment = {
+  kind: "Deployment",
   metadata: {
     name: "foo",
   },
@@ -135,3 +136,44 @@ it("renders a table with an error", () => {
   expect(row.name).toEqual("foo");
   expect(wrapper.text()).toContain("Error: Boom!");
 });
+
+it("do not fail if the resources are already populated but the refs not yet", () => {
+  const state = getStore({
+    kube: {
+      items: {
+        "deployment-foo": {
+          isFetching: false,
+          item: deployment as IResource,
+        },
+      },
+    },
+  });
+  const wrapper = mountWrapper(state, <ResourceTable {...defaultProps} resourceRefs={[]} />);
+  expect(wrapper.find(Table)).not.toExist();
+});
+
+it("renders the table with two entries with a list reference", () => {
+  const state = getStore({
+    kube: {
+      items: {
+        "deployment-foo": {
+          isFetching: false,
+          item: {
+            items: [
+              deployment as IResource,
+              { ...deployment, metadata: { name: "bar" } } as IResource,
+            ],
+          },
+        },
+      },
+    },
+  });
+  const wrapper = mountWrapper(
+    state,
+    <ResourceTable
+      {...defaultProps}
+      resourceRefs={[{ ...sampleResourceRef, name: "" } as ResourceRef]}
+    />,
+  );
+  expect(wrapper.find(Table).prop("data")).toHaveLength(2);
+});

dashboard/src/components/AppView/ResourceTable/ResourceTable.tsx

@@ -83,17 +83,25 @@ function ResourceTable({ id, title, resourceRefs }: IResourceTableProps) {
     flattenResources(resourceRefs, state.kube.items),
   );
 
-  const columns = useMemo(() => getColumns(resourceRefs[0]), [resourceRefs]);
+  const columns = useMemo(
+    () => (resourceRefs.length ? getColumns(resourceRefs[0]) : OtherResourceColumns),
+    [resourceRefs],
+  );
   const data = useMemo(
     () =>
-      resources.map((resource, index) =>
-        getData(
-          resourceRefs[index].name,
-          columns.map(c => c.accessor),
-          columns.map(c => c.getter),
-          resource,
-        ),
-      ),
+      resources.map((resource, index) => {
+        // When the resourceRef is a list, the list of references will be just one
+        const ref = resourceRefs.length === 1 ? resourceRefs[0] : resourceRefs[index];
+        if (ref) {
+          return getData(
+            ref.name,
+            columns.map(c => c.accessor),
+            columns.map(c => c.getter),
+            resource,
+          );
+        }
+        return {};
+      }),
     [columns, resourceRefs, resources],
   );