From 995aa1f1a843d8b3239b0371e78835dc883a2264 Mon Sep 17 00:00:00 2001
From: Jeroen Nijhuis <jeroen.nijhuis@justeattakeaway.com>
Date: Thu, 11 Jan 2024 22:59:14 +0100
Subject: [PATCH] feat: added tab icons

---
 src/assets/icons/describe.svg      |  1 +
 src/assets/icons/edit.svg          |  1 +
 src/assets/icons/logs.svg          |  1 +
 src/assets/icons/shell.svg         |  1 +
 src/assets/icons/tab.svg           |  1 +
 src/components/TabIcon.vue         | 18 ++++++++++++++++++
 src/components/TabOrchestrator.vue |  2 ++
 src/providers/TabProvider.ts       | 18 ++++++++++++++++--
 src/views/Pods.vue                 | 20 ++++++++++++--------
 9 files changed, 53 insertions(+), 10 deletions(-)
 create mode 100644 src/assets/icons/describe.svg
 create mode 100644 src/assets/icons/edit.svg
 create mode 100644 src/assets/icons/logs.svg
 create mode 100644 src/assets/icons/shell.svg
 create mode 100644 src/assets/icons/tab.svg
 create mode 100644 src/components/TabIcon.vue

diff --git a/src/assets/icons/describe.svg b/src/assets/icons/describe.svg
new file mode 100644
index 0000000..0c4ff42
--- /dev/null
+++ b/src/assets/icons/describe.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M21 21H13V6C13 4.34315 14.3431 3 16 3H21C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21ZM11 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3H8C9.65685 3 11 4.34315 11 6V21ZM11 21H13V23H11V21Z"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/edit.svg b/src/assets/icons/edit.svg
new file mode 100644
index 0000000..2fba7c5
--- /dev/null
+++ b/src/assets/icons/edit.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M9.24264 18.9967H21V20.9967H3V16.754L12.8995 6.85453L17.1421 11.0972L9.24264 18.9967ZM14.3137 5.44032L16.435 3.319C16.8256 2.92848 17.4587 2.92848 17.8492 3.319L20.6777 6.14743C21.0682 6.53795 21.0682 7.17112 20.6777 7.56164L18.5563 9.68296L14.3137 5.44032Z"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/logs.svg b/src/assets/icons/logs.svg
new file mode 100644
index 0000000..9f3650e
--- /dev/null
+++ b/src/assets/icons/logs.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M19 22H5C3.34315 22 2 20.6569 2 19V3C2 2.44772 2.44772 2 3 2H17C17.5523 2 18 2.44772 18 3V15H22V19C22 20.6569 20.6569 22 19 22ZM18 17V19C18 19.5523 18.4477 20 19 20C19.5523 20 20 19.5523 20 19V17H18ZM6 7V9H14V7H6ZM6 11V13H14V11H6ZM6 15V17H11V15H6Z"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/shell.svg b/src/assets/icons/shell.svg
new file mode 100644
index 0000000..f3c334e
--- /dev/null
+++ b/src/assets/icons/shell.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M3 3H21C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3ZM12 15V17H18V15H12ZM8.41421 12L5.58579 14.8284L7 16.2426L11.2426 12L7 7.75736L5.58579 9.17157L8.41421 12Z"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/tab.svg b/src/assets/icons/tab.svg
new file mode 100644
index 0000000..dd66b32
--- /dev/null
+++ b/src/assets/icons/tab.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M3 3H21C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3ZM20 10H4V19H20V10ZM15 6V8H19V6H15Z"></path></svg>
\ No newline at end of file
diff --git a/src/components/TabIcon.vue b/src/components/TabIcon.vue
new file mode 100644
index 0000000..1198ef3
--- /dev/null
+++ b/src/components/TabIcon.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { defineAsyncComponent } from "vue";
+
+const props = defineProps({
+  name: {
+    type: String,
+    required: true,
+  },
+});
+
+const icon = defineAsyncComponent(
+  () => import(`@/assets/icons/${props.name}.svg`)
+);
+</script>
+
+<template>
+  <component :is="icon" class="w-[14px] min-w-[14px] content-center" />
+</template>
diff --git a/src/components/TabOrchestrator.vue b/src/components/TabOrchestrator.vue
index dd6dbc9..bfac4a6 100644
--- a/src/components/TabOrchestrator.vue
+++ b/src/components/TabOrchestrator.vue
@@ -4,6 +4,7 @@ import {
   TabProviderCloseTabKey,
 } from "@/providers/TabProvider";
 import { injectStrict } from "@/lib/utils";
+import TabIcon from "@/components/TabIcon.vue";
 import Expand from "@/assets/icons/expand.svg";
 import Close from "@/assets/icons/close.svg";
 import { SettingsContextStateKey } from "@/providers/SettingsContextProvider";
@@ -99,6 +100,7 @@ const closeAndSetActiveTab = (id: string) => {
           @click="setActiveTab(tab.id)"
           :title="tab.title"
         >
+          <tab-icon :name="tab.icon" class="mr-1" />
           <span class="truncate">{{ tab.title }}</span>
           <div
             @click="closeAndSetActiveTab(tab.id)"
diff --git a/src/providers/TabProvider.ts b/src/providers/TabProvider.ts
index 452f53c..5d59145 100644
--- a/src/providers/TabProvider.ts
+++ b/src/providers/TabProvider.ts
@@ -11,13 +11,20 @@ import {
 export const TabProviderStateKey: InjectionKey<ToRefs<TabProviderState>> =
   Symbol("TabProviderState");
 export const TabProviderAddTabKey: InjectionKey<
-  (id: string, title: string, component: any, props?: any) => void
+  (
+    id: string,
+    title: string,
+    component: any,
+    props?: any,
+    icon?: string
+  ) => void
 > = Symbol("TabProviderAddTab");
 export const TabProviderCloseTabKey: InjectionKey<(id: string) => void> =
   Symbol("TabProviderCloseTab");
 
 export interface Tab {
   id: string;
+  icon: string;
   title: string;
   component: any;
   props?: any;
@@ -37,7 +44,13 @@ export default {
 
     provide(TabProviderStateKey, toRefs(state));
 
-    const addTab = (id: string, title: string, component: any, props?: any) => {
+    const addTab = (
+      id: string,
+      title: string,
+      component: any,
+      props?: any,
+      icon: string = "tab"
+    ) => {
       if (state.tabs.find((tab) => tab.id === id)) {
         state.activeTabId = id;
         return;
@@ -45,6 +58,7 @@ export default {
 
       state.tabs.push({
         id,
+        icon,
         title,
         component: shallowRef(component),
         props,
diff --git a/src/views/Pods.vue b/src/views/Pods.vue
index 6a56e9e..fb4185c 100644
--- a/src/views/Pods.vue
+++ b/src/views/Pods.vue
@@ -28,13 +28,14 @@ const rowActions: RowAction<V1Pod>[] = [
     handler: (row) => {
       addTab(
         `edit_${row.metadata?.name}`,
-        `Edit ${row.metadata?.name}`,
+        `${row.metadata?.name}`,
         defineAsyncComponent(() => import("@/views/ObjectEditor.vue")),
         {
           context: context.value,
           namespace: namespace.value,
           object: `pods/${row.metadata?.name}`,
-        }
+        },
+        "edit"
       );
     },
   },
@@ -43,13 +44,14 @@ const rowActions: RowAction<V1Pod>[] = [
     handler: (row) => {
       addTab(
         `describe_${row.metadata?.name}`,
-        `Describe ${row.metadata?.name}`,
+        `${row.metadata?.name}`,
         defineAsyncComponent(() => import("@/views/Describe.vue")),
         {
           context: context.value,
           namespace: namespace.value,
           object: `pods/${row.metadata?.name}`,
-        }
+        },
+        "describe"
       );
     },
   },
@@ -61,14 +63,15 @@ const rowActions: RowAction<V1Pod>[] = [
         handler: () => {
           addTab(
             `shell_${row.metadata?.name}_${container.name}`,
-            `>_ ${row.metadata?.name}/${container.name}`,
+            `${row.metadata?.name}/${container.name}`,
             defineAsyncComponent(() => import("@/views/Shell.vue")),
             {
               context: context.value,
               namespace: namespace.value,
               pod: row,
               container: container,
-            }
+            },
+            "shell"
           );
         },
       }));
@@ -79,13 +82,14 @@ const rowActions: RowAction<V1Pod>[] = [
     handler: (row) => {
       addTab(
         `logs_${row.metadata?.name}`,
-        `Logs for ${row.metadata?.name}`,
+        `${row.metadata?.name}`,
         defineAsyncComponent(() => import("@/views/LogViewer.vue")),
         {
           context: context.value,
           namespace: namespace.value,
           pod: row.metadata?.name,
-        }
+        },
+        "logs"
       );
     },
   },