From d4a73257c017c3eca16acdc091bf7babf7c9913c Mon Sep 17 00:00:00 2001
From: Jeroen Nijhuis <jeroen.nijhuis@justeattakeaway.com>
Date: Wed, 7 Feb 2024 14:13:18 +0100
Subject: [PATCH] fix: don't crash with empty context

---
 src/components/ContextSwitcher.vue |  5 +++--
 src/components/Navigation.vue      |  4 ++++
 src/components/RouterViewport.vue  | 11 ++++++++++-
 src/components/ui/DataTable.vue    |  5 +++--
 src/router.ts                      |  3 +++
 src/views/NoContext.vue            |  5 +++++
 6 files changed, 28 insertions(+), 5 deletions(-)
 create mode 100644 src/views/NoContext.vue

diff --git a/src/components/ContextSwitcher.vue b/src/components/ContextSwitcher.vue
index 0f863e8..d4a4f1d 100644
--- a/src/components/ContextSwitcher.vue
+++ b/src/components/ContextSwitcher.vue
@@ -66,8 +66,9 @@ onMounted(() => {
       class="flex flex-col w-full text-xs border rounded-lg p-2 text-left hover:bg-background"
       @click="showSingleCommand('switch-context')"
     >
-      <span class="uppercase font-bold mb-1">{{ context }}</span>
-      <span>{{ namespace == "" ? "All namespaces" : namespace }}</span>
+      <span class="uppercase font-bold mb-1">{{ context || "No context" }}</span>
+      <span v-if="context">{{ namespace == "" ? "All namespaces" : namespace }}</span>
+      <span v-else>Click here to set context</span>
     </button>
   </div>
 </template>
diff --git a/src/components/Navigation.vue b/src/components/Navigation.vue
index 6ee1593..3ba996c 100644
--- a/src/components/Navigation.vue
+++ b/src/components/Navigation.vue
@@ -109,6 +109,10 @@ const formatResourceKind = (kind: string) => {
 };
 
 const fetchResources = () => {
+  if (context.value === '') {
+    return;
+  }
+
   clusterResources.value.clear();
   Kubernetes.getCoreApiVersions(context.value).then((results) => {
     results.forEach((version) => {
diff --git a/src/components/RouterViewport.vue b/src/components/RouterViewport.vue
index deb20e4..31e30ab 100644
--- a/src/components/RouterViewport.vue
+++ b/src/components/RouterViewport.vue
@@ -1,13 +1,22 @@
 <script setup lang="ts">
+import { KubeContextStateKey } from "@/providers/KubeContextProvider";
+import { injectStrict } from '@/lib/utils';
 import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 import TabOrchestrator from "@/components/TabOrchestrator.vue";
+import { useRoute } from "vue-router";
+import NoContext from "@/views/NoContext.vue";
+
+const { context } = injectStrict(KubeContextStateKey);
+const route = useRoute();
+
 </script>
 <template>
   <div class="flex flex-col max-h-screen relative router-viewport">
     <ScrollArea
       class="w-full flex flex-grow border-l border-[#232323] bg-[#0f0f0f]"
     >
-      <router-view />
+      <NoContext v-if="route.meta.requiresContext && context == ''" />
+      <router-view v-else />
       <ScrollBar orientation="horizontal" />
     </ScrollArea>
     <TabOrchestrator />
diff --git a/src/components/ui/DataTable.vue b/src/components/ui/DataTable.vue
index f60d996..9b487ea 100644
--- a/src/components/ui/DataTable.vue
+++ b/src/components/ui/DataTable.vue
@@ -7,6 +7,7 @@ import {
   ContextMenuTrigger,
   ContextMenuContent,
   ContextMenuItem,
+  ContextMenuCheckboxItem,
   ContextMenuSub,
   ContextMenuSubTrigger,
   ContextMenuSubContent,
@@ -85,7 +86,7 @@ const table = useVueTable({
         <ContextMenuSub>
           <ContextMenuSubTrigger>Columns</ContextMenuSubTrigger>
           <ContextMenuSubContent>
-            <ContextMenuItem
+            <ContextMenuCheckboxItem :checked="column.getIsVisible()"
               v-for="column in table.getAllColumns()"
               :key="column.id"
               @select="
@@ -95,7 +96,7 @@ const table = useVueTable({
               "
             >
               {{ column.columnDef.header }}
-            </ContextMenuItem>
+            </ContextMenuCheckboxItem>
           </ContextMenuSubContent>
         </ContextMenuSub>
       </ContextMenuContent>
diff --git a/src/router.ts b/src/router.ts
index 89a11ef..a416655 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -27,6 +27,9 @@ const routes: Array<RouteRecordRaw> = [
     path: "/pods",
     name: "Pods",
     component: () => import("./views/Pods.vue"),
+    meta: {
+      requiresContext: true
+    }
   },
   {
     path: "/deployments",
diff --git a/src/views/NoContext.vue b/src/views/NoContext.vue
new file mode 100644
index 0000000..dc8492e
--- /dev/null
+++ b/src/views/NoContext.vue
@@ -0,0 +1,5 @@
+<template>
+    <div class="w-full h-screen flex flex-col items-center justify-center text-muted-foreground">
+        <span>Please select a context</span>
+    </div>
+</template>
\ No newline at end of file