From b8e4ef48b871c155af860d1354475545bcd99cb2 Mon Sep 17 00:00:00 2001
From: Jeroen Nijhuis <jeroen.nijhuis@justeattakeaway.com>
Date: Tue, 2 Jan 2024 14:49:34 +0100
Subject: [PATCH] wip: tabs

---
 package-lock.json                  | 37 ++++++++++++++--
 package.json                       |  1 +
 src/App.vue                        | 15 ++++---
 src/assets/icons/close.svg         |  1 +
 src/components/RouterViewport.vue  |  7 ++-
 src/components/TabOrchestrator.vue | 45 ++++++++++++++-----
 src/components/tables/pods.ts      |  2 +-
 src/providers/TabProvider.ts       | 69 ++++++++++++++++++++++++++++++
 src/views/LogViewer.vue            | 10 +++++
 src/views/Pods.vue                 | 13 +++++-
 10 files changed, 177 insertions(+), 23 deletions(-)
 create mode 100644 src/assets/icons/close.svg
 create mode 100644 src/providers/TabProvider.ts
 create mode 100644 src/views/LogViewer.vue

diff --git a/package-lock.json b/package-lock.json
index a6f52ce..3453b9d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,6 +20,7 @@
         "radix-vue": "^1.2.5",
         "tailwind-merge": "^2.1.0",
         "tailwindcss-animate": "^1.0.7",
+        "vite-plugin-dynamic-import": "^1.5.0",
         "vite-svg-loader": "^5.1.0",
         "vue": "3.3.4",
         "vue-router": "^4.2.5"
@@ -2671,7 +2672,6 @@
       "version": "8.11.2",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.2.tgz",
       "integrity": "sha512-nc0Axzp/0FILLEVsm4fNwLCwMttvhEI263QtVPQcbpfZZ3ts0hLsZGOpE6czNlid7CJ9MlyH8reXkpsf3YUY4w==",
-      "dev": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -4291,6 +4291,11 @@
         "is-arrayish": "^0.2.1"
       }
     },
+    "node_modules/es-module-lexer": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.4.1.tgz",
+      "integrity": "sha512-cXLGjP0c4T3flZJKQSuziYoq7MlT+rnvfZjfp7h+I7K9BNX54kP9nyWvdbwjQ4u1iWbOL4u96fgeZLToQlZC7w=="
+    },
     "node_modules/es6-error": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/es6-error/-/es6-error-4.1.1.tgz",
@@ -12604,6 +12609,17 @@
         "url": "https://opencollective.com/vitest"
       }
     },
+    "node_modules/vite-plugin-dynamic-import": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/vite-plugin-dynamic-import/-/vite-plugin-dynamic-import-1.5.0.tgz",
+      "integrity": "sha512-Qp85c+AVJmLa8MLni74U4BDiWpUeFNx7NJqbGZyR2XJOU7mgW0cb7nwlAMucFyM4arEd92Nfxp4j44xPi6Fu7g==",
+      "dependencies": {
+        "acorn": "^8.8.2",
+        "es-module-lexer": "^1.2.1",
+        "fast-glob": "^3.2.12",
+        "magic-string": "^0.30.1"
+      }
+    },
     "node_modules/vite-svg-loader": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/vite-svg-loader/-/vite-svg-loader-5.1.0.tgz",
@@ -14731,8 +14747,7 @@
     "acorn": {
       "version": "8.11.2",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.2.tgz",
-      "integrity": "sha512-nc0Axzp/0FILLEVsm4fNwLCwMttvhEI263QtVPQcbpfZZ3ts0hLsZGOpE6czNlid7CJ9MlyH8reXkpsf3YUY4w==",
-      "dev": true
+      "integrity": "sha512-nc0Axzp/0FILLEVsm4fNwLCwMttvhEI263QtVPQcbpfZZ3ts0hLsZGOpE6czNlid7CJ9MlyH8reXkpsf3YUY4w=="
     },
     "acorn-jsx": {
       "version": "5.3.2",
@@ -15926,6 +15941,11 @@
         "is-arrayish": "^0.2.1"
       }
     },
+    "es-module-lexer": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.4.1.tgz",
+      "integrity": "sha512-cXLGjP0c4T3flZJKQSuziYoq7MlT+rnvfZjfp7h+I7K9BNX54kP9nyWvdbwjQ4u1iWbOL4u96fgeZLToQlZC7w=="
+    },
     "es6-error": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/es6-error/-/es6-error-4.1.1.tgz",
@@ -21787,6 +21807,17 @@
         "vite": "^3.0.0 || ^4.0.0"
       }
     },
+    "vite-plugin-dynamic-import": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/vite-plugin-dynamic-import/-/vite-plugin-dynamic-import-1.5.0.tgz",
+      "integrity": "sha512-Qp85c+AVJmLa8MLni74U4BDiWpUeFNx7NJqbGZyR2XJOU7mgW0cb7nwlAMucFyM4arEd92Nfxp4j44xPi6Fu7g==",
+      "requires": {
+        "acorn": "^8.8.2",
+        "es-module-lexer": "^1.2.1",
+        "fast-glob": "^3.2.12",
+        "magic-string": "^0.30.1"
+      }
+    },
     "vite-svg-loader": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/vite-svg-loader/-/vite-svg-loader-5.1.0.tgz",
diff --git a/package.json b/package.json
index 5bbf01b..cb2afdb 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
     "radix-vue": "^1.2.5",
     "tailwind-merge": "^2.1.0",
     "tailwindcss-animate": "^1.0.7",
+    "vite-plugin-dynamic-import": "^1.5.0",
     "vite-svg-loader": "^5.1.0",
     "vue": "3.3.4",
     "vue-router": "^4.2.5"
diff --git a/src/App.vue b/src/App.vue
index 9c7bed2..93ec0c0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -9,6 +9,7 @@ import CommandPalette from "./components/CommandPalette.vue";
 import SettingsContextProvider from "./providers/SettingsContextProvider";
 import KubeContextProvider from "./providers/KubeContextProvider";
 import CommandPaletteProvider from "./providers/CommandPaletteProvider";
+import TabProvider from "./providers/TabProvider";
 </script>
 
 <template>
@@ -18,12 +19,14 @@ import CommandPaletteProvider from "./providers/CommandPaletteProvider";
     <Suspense>
       <SettingsContextProvider>
         <KubeContextProvider>
-          <CommandPaletteProvider>
-            <Navigation />
-            <RouterViewport />
-            <Toaster />
-            <CommandPalette />
-          </CommandPaletteProvider>
+          <TabProvider>
+            <CommandPaletteProvider>
+              <Navigation />
+              <RouterViewport />
+              <Toaster />
+              <CommandPalette />
+            </CommandPaletteProvider>
+          </TabProvider>
         </KubeContextProvider>
       </SettingsContextProvider>
     </Suspense>
diff --git a/src/assets/icons/close.svg b/src/assets/icons/close.svg
new file mode 100644
index 0000000..33045bb
--- /dev/null
+++ b/src/assets/icons/close.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z" fill="currentColor"></path></svg>
\ No newline at end of file
diff --git a/src/components/RouterViewport.vue b/src/components/RouterViewport.vue
index 4d377c7..deb20e4 100644
--- a/src/components/RouterViewport.vue
+++ b/src/components/RouterViewport.vue
@@ -3,7 +3,7 @@ import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 import TabOrchestrator from "@/components/TabOrchestrator.vue";
 </script>
 <template>
-  <div class="flex flex-col max-h-screen relative w-full">
+  <div class="flex flex-col max-h-screen relative router-viewport">
     <ScrollArea
       class="w-full flex flex-grow border-l border-[#232323] bg-[#0f0f0f]"
     >
@@ -13,3 +13,8 @@ import TabOrchestrator from "@/components/TabOrchestrator.vue";
     <TabOrchestrator />
   </div>
 </template>
+<style>
+.router-viewport {
+  width: calc(100vw - 200px);
+}
+</style>
diff --git a/src/components/TabOrchestrator.vue b/src/components/TabOrchestrator.vue
index 4ef4e89..0ac48ec 100644
--- a/src/components/TabOrchestrator.vue
+++ b/src/components/TabOrchestrator.vue
@@ -1,24 +1,43 @@
 <script setup lang="ts">
+import {
+  TabProviderStateKey,
+  TabProviderCloseTabKey,
+} from "@/providers/TabProvider";
+import { injectStrict } from "@/lib/utils";
 import Expand from "@/assets/icons/expand.svg";
+import Close from "@/assets/icons/close.svg";
+
+const { tabs, activeTabId } = injectStrict(TabProviderStateKey);
+const closeTab = injectStrict(TabProviderCloseTabKey);
 
 const state = reactive({
-  open: false,
+  open: true,
+});
+
+const activeTab = computed(() => {
+  return tabs.value.find((tab) => tab.id === activeTabId.value);
 });
 </script>
 <template>
-  <div class="border-t border-l bg-background">
+  <div class="border-t border-l bg-background" v-if="tabs.length > 0">
     <div class="flex items-center mb-0 text-xs py-1 px-1">
       <div class="flex space-x-3">
         <div
-          class="py-1 px-2 rounded cursor-pointer max-w-[200px] truncate hover:bg-border"
+          class="group relative flex items-center py-1 px-2 rounded cursor-pointer max-w-[200px] truncate hover:bg-border"
+          :class="{
+            'bg-border': activeTabId === tab.id,
+            'text-gray-400': activeTabId !== tab.id,
+          }"
+          v-for="tab in tabs"
+          @click="activeTabId = tab.id"
         >
-          Logs for minikube/default/countdown-b8dz2
-        </div>
-        <div class="py-1 px-2 rounded cursor-pointer hover:bg-border">
-          Tab 2
-        </div>
-        <div class="py-1 px-2 rounded cursor-pointer hover:bg-border">
-          Tab 3
+          <span class="truncate">{{ tab.title }}</span>
+          <div
+            @click="closeTab(tab.id)"
+            class="hidden group-hover:block absolute right-1 p-0.5 rounded-sm bg-opacity-50 bg-white hover:bg-white text-background"
+          >
+            <Close class="h-3" />
+          </div>
         </div>
       </div>
       <div
@@ -31,6 +50,10 @@ const state = reactive({
         />
       </div>
     </div>
-    <div class="" v-show="state.open">Test</div>
+    <div class="p-2" v-show="state.open">
+      <keep-alive>
+        <component :is="activeTab?.component" v-bind="activeTab?.props" />
+      </keep-alive>
+    </div>
   </div>
 </template>
diff --git a/src/components/tables/pods.ts b/src/components/tables/pods.ts
index 98daad0..42550b4 100644
--- a/src/components/tables/pods.ts
+++ b/src/components/tables/pods.ts
@@ -30,7 +30,7 @@ export const columns: ColumnDef<V1Pod>[] = [
   },
   {
     header: "IP",
-    accessorKey: "status.podIP",
+    accessorFn: (row) => row.status?.podIP || "",
   },
   {
     header: "Node",
diff --git a/src/providers/TabProvider.ts b/src/providers/TabProvider.ts
new file mode 100644
index 0000000..610d8a0
--- /dev/null
+++ b/src/providers/TabProvider.ts
@@ -0,0 +1,69 @@
+import {
+  provide,
+  reactive,
+  InjectionKey,
+  toRefs,
+  ToRefs,
+  shallowRef,
+} from "vue";
+
+export const TabProviderStateKey: InjectionKey<ToRefs<TabProviderState>> =
+  Symbol("TabProviderState");
+export const TabProviderAddTabKey: InjectionKey<
+  (id: string, title: string, component: any, props?: any) => void
+> = Symbol("TabProviderAddTab");
+export const TabProviderCloseTabKey: InjectionKey<(id: string) => void> =
+  Symbol("TabProviderCloseTab");
+
+export interface Tab {
+  id: string;
+  title: string;
+  component: any;
+  props?: any;
+}
+
+export interface TabProviderState {
+  tabs: Tab[];
+  activeTabId: string | null;
+}
+
+export default {
+  setup() {
+    const state: TabProviderState = reactive({
+      tabs: [],
+      activeTabId: null,
+    });
+
+    provide(TabProviderStateKey, toRefs(state));
+
+    const addTab = (id: string, title: string, component: any, props?: any) => {
+      if (state.tabs.find((tab) => tab.id === id)) {
+        state.activeTabId = id;
+        return;
+      }
+
+      state.tabs.push({
+        id,
+        title,
+        component: shallowRef(component),
+        props,
+      });
+
+      state.activeTabId = id;
+    };
+
+    const closeTab = (id: string) => {
+      const tabIndex = state.tabs.findIndex((tab) => tab.id === id);
+
+      if (tabIndex !== -1) {
+        state.tabs.splice(tabIndex, 1);
+      }
+    };
+
+    provide(TabProviderAddTabKey, addTab);
+    provide(TabProviderCloseTabKey, closeTab);
+  },
+  render(): any {
+    return this.$slots.default();
+  },
+};
diff --git a/src/views/LogViewer.vue b/src/views/LogViewer.vue
new file mode 100644
index 0000000..f1df57b
--- /dev/null
+++ b/src/views/LogViewer.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+const props = defineProps<{
+  context: string;
+  namespace: string;
+  pod: string;
+}>();
+</script>
+<template>
+  <div>Logs for {{ props }}</div>
+</template>
diff --git a/src/views/Pods.vue b/src/views/Pods.vue
index 5c8852b..f491622 100644
--- a/src/views/Pods.vue
+++ b/src/views/Pods.vue
@@ -12,8 +12,10 @@ import DataTable from "@/components/ui/DataTable.vue";
 import { RowAction } from "@/components/tables/types";
 import { columns } from "@/components/tables/pods";
 import { useDataRefresher } from "@/composables/refresher";
+import { TabProviderAddTabKey } from "@/providers/TabProvider";
 
 const { context, namespace } = injectStrict(KubeContextStateKey);
+const addTab = injectStrict(TabProviderAddTabKey);
 
 const { toast } = useToast();
 const router = useRouter();
@@ -36,7 +38,16 @@ const rowActions: RowAction<V1Pod>[] = [
   {
     label: "Logs",
     handler: (row) => {
-      router.push({ name: "PodLogs", params: { podName: row.metadata?.name } });
+      addTab(
+        `logs_${row.metadata?.name}`,
+        `Logs for ${row.metadata?.name}`,
+        defineAsyncComponent(() => import("@/views/LogViewer.vue")),
+        {
+          context: context.value,
+          namespace: namespace.value,
+          pod: row.metadata?.name,
+        }
+      );
     },
   },
 ];