From 08c8c40526e61b42dcaa72e90b974ddae6f72a02 Mon Sep 17 00:00:00 2001
From: Billy Figueroa <billy@defenseunicorns.com>
Date: Mon, 16 Sep 2024 12:13:38 -0400
Subject: [PATCH] fix(ui): fixing issue with table data being null (#320)

---
 .../components/k8s/DataTable/component.svelte | 104 ++++++++++--------
 ui/src/lib/features/k8s/store.ts              |  11 +-
 2 files changed, 67 insertions(+), 48 deletions(-)

diff --git a/ui/src/lib/components/k8s/DataTable/component.svelte b/ui/src/lib/components/k8s/DataTable/component.svelte
index 26de4929..f9644ee1 100644
--- a/ui/src/lib/components/k8s/DataTable/component.svelte
+++ b/ui/src/lib/components/k8s/DataTable/component.svelte
@@ -241,53 +241,65 @@
             </tr>
           </thead>
           <tbody>
-            {#each $rows as row}
-              <tr
-                id={row.resource.metadata?.uid}
-                on:click={() =>
-                  !disableRowClick && row.resource.metadata?.uid && goto(`${baseURL}/${row.resource.metadata?.uid}`)}
-                class:active={row.resource.metadata?.uid && pathName.includes(row.resource.metadata?.uid ?? '')}
-                class:cursor-pointer={!disableRowClick}
-              >
-                {#each columns as [key, style, modifier], idx}
-                  <!-- Check object to avoid issues with `false` values -->
-                  {@const value = Object.hasOwn(row.table, key) ? row.table[key] : ''}
-                  <td
-                    class={style || ''}
-                    data-testid={typeof value !== 'object' ? `${value}-testid-${idx + 1}` : `object-test-id-${idx + 1}`}
-                  >
-                    {#if value.component}
-                      <svelte:component this={value.component} {...value.props} />
-                    {:else if value.list}
-                      <ul class="line-clamp-4 mt-4 text-sm">
-                        {#each value.list as item}
-                          <li data-testid={`${item}-list-item-test-id`}>- {item}</li>
-                        {/each}
-                      </ul>
-                    {:else if modifier === 'link-external'}
-                      <Link href={value.href || ''} text={value.text || ''} target={'_blank'} />
-                    {:else if modifier === 'link-internal'}
-                      <Link href={value.href || ''} text={value.text || ''} target={''} />
-                    {:else if key === 'namespace'}
-                      <button
-                        on:click|stopPropagation={() => namespace.set(value)}
-                        class="text-blue-600 dark:text-blue-500 hover:underline pr-4 text-left"
-                      >
-                        {value}
-                      </button>
-                    {:else if style?.includes('truncate')}
-                      <Tooltip title={value}>
-                        <div class={`w-full ${style}`}>
-                          {value}
-                        </div>
-                      </Tooltip>
-                    {:else}
-                      {value.text || (value === 0 ? '0' : value) || '-'}
-                    {/if}
-                  </td>
-                {/each}
+            {#if $rows.length === 0 && isFiltering}
+              <tr class="!pointer-events-none !border-b-0">
+                <td class="text-center" colspan="9">No matching entries found</td>
               </tr>
-            {/each}
+            {:else if $rows.length === 0}
+              <tr class="!pointer-events-none !border-b-0">
+                <td class="text-center" colspan="9">No resources found</td>
+              </tr>
+            {:else}
+              {#each $rows as row}
+                <tr
+                  id={row.resource.metadata?.uid}
+                  on:click={() =>
+                    !disableRowClick && row.resource.metadata?.uid && goto(`${baseURL}/${row.resource.metadata?.uid}`)}
+                  class:active={row.resource.metadata?.uid && pathName.includes(row.resource.metadata?.uid ?? '')}
+                  class:cursor-pointer={!disableRowClick}
+                >
+                  {#each columns as [key, style, modifier], idx}
+                    <!-- Check object to avoid issues with `false` values -->
+                    {@const value = Object.hasOwn(row.table, key) ? row.table[key] : ''}
+                    <td
+                      class={style || ''}
+                      data-testid={typeof value !== 'object'
+                        ? `${value}-testid-${idx + 1}`
+                        : `object-test-id-${idx + 1}`}
+                    >
+                      {#if value.component}
+                        <svelte:component this={value.component} {...value.props} />
+                      {:else if value.list}
+                        <ul class="line-clamp-4 mt-4 text-sm">
+                          {#each value.list as item}
+                            <li data-testid={`${item}-list-item-test-id`}>- {item}</li>
+                          {/each}
+                        </ul>
+                      {:else if modifier === 'link-external'}
+                        <Link href={value.href || ''} text={value.text || ''} target={'_blank'} />
+                      {:else if modifier === 'link-internal'}
+                        <Link href={value.href || ''} text={value.text || ''} target={''} />
+                      {:else if key === 'namespace'}
+                        <button
+                          on:click|stopPropagation={() => namespace.set(value)}
+                          class="text-blue-600 dark:text-blue-500 hover:underline pr-4 text-left"
+                        >
+                          {value}
+                        </button>
+                      {:else if style?.includes('truncate')}
+                        <Tooltip title={value}>
+                          <div class={`w-full ${style}`}>
+                            {value}
+                          </div>
+                        </Tooltip>
+                      {:else}
+                        {value.text || (value === 0 ? '0' : value) || '-'}
+                      {/if}
+                    </td>
+                  {/each}
+                </tr>
+              {/each}
+            {/if}
           </tbody>
         </table>
       </div>
diff --git a/ui/src/lib/features/k8s/store.ts b/ui/src/lib/features/k8s/store.ts
index f28b9c83..013ea9fa 100644
--- a/ui/src/lib/features/k8s/store.ts
+++ b/ui/src/lib/features/k8s/store.ts
@@ -236,9 +236,15 @@ export function transformResource<T extends KubernetesObject, U extends CommonRo
   transformer: (r: T, c?: CommonRow) => Partial<U>,
 ) {
   // Return a function to transform KubernetesObject resources
-  return (resources: T[]) =>
+
+  return (resources: T[]) => {
+    // If we don't have resoure return empty array to avoid 'Cannot read properties of null (reading 'map')' error
+    if (!resources) {
+      return []
+    }
+
     // Map the resources to the common table format
-    resources.map<ResourceWithTable<T, U>>((r) => {
+    return resources.map<ResourceWithTable<T, U>>((r) => {
       // Convert common KubernetesObject rows
       const commonRows = {
         name: r.metadata?.name ?? '',
@@ -258,6 +264,7 @@ export function transformResource<T extends KubernetesObject, U extends CommonRo
         } as U,
       }
     })
+  }
 }
 
 function formatDetailedAge(timestamp: Date) {