From 4757693673df25ca8e77ecd6a59860ca434d732f Mon Sep 17 00:00:00 2001
From: Sabu Siyad <hello@ssiyad.com>
Date: Mon, 19 Jun 2023 12:50:28 +0530
Subject: [PATCH 1/3] feat(ui): sidebar: beta badge

---
 desk/src/components/desk/sidebar/SideBar.vue  |  2 +
 .../components/desk/sidebar/SidebarLink.vue   | 37 ++++++++++++-------
 2 files changed, 25 insertions(+), 14 deletions(-)

diff --git a/desk/src/components/desk/sidebar/SideBar.vue b/desk/src/components/desk/sidebar/SideBar.vue
index 1ef0551be..96125dbd9 100644
--- a/desk/src/components/desk/sidebar/SideBar.vue
+++ b/desk/src/components/desk/sidebar/SideBar.vue
@@ -75,6 +75,7 @@ const menuOptions = computed(() => [
     label: "Knowledge base",
     icon: IconKnowledgeBase,
     to: "DeskKBHome",
+    isBeta: true,
   },
   {
     label: showExtra.value ? "Less" : "More",
@@ -108,6 +109,7 @@ const extraOptions = [
     label: "Canned responses",
     icon: IconCannedResponse,
     to: AGENT_PORTAL_CANNED_RESPONSE_LIST,
+    isBeta: true,
   },
   {
     label: "Customers",
diff --git a/desk/src/components/desk/sidebar/SidebarLink.vue b/desk/src/components/desk/sidebar/SidebarLink.vue
index ab2c10362..345dc61ed 100644
--- a/desk/src/components/desk/sidebar/SidebarLink.vue
+++ b/desk/src/components/desk/sidebar/SidebarLink.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex h-7 cursor-pointer items-center rounded-lg px-1.5 text-gray-700 transition-all duration-300 ease-in-out"
+    class="flex h-7 cursor-pointer items-center justify-between rounded-lg px-1.5 text-gray-700 transition-all duration-300 ease-in-out"
     :class="{
       'w-full': sidebarStore.isExpanded,
       'w-7': !sidebarStore.isExpanded,
@@ -10,33 +10,42 @@
     }"
     @click="handle"
   >
-    <component :is="icon" class="h-4 w-4 shrink-0"></component>
-    <div
-      class="ml-2 shrink-0 text-base transition-all duration-300 ease-in-out"
-      :class="{
-        'opacity-100': sidebarStore.isExpanded,
-        'opacity-0': !sidebarStore.isExpanded,
-        '-z-50': !sidebarStore.isExpanded,
-      }"
-    >
-      {{ label }}
+    <div class="flex items-center">
+      <component :is="icon" class="h-4 w-4 shrink-0"></component>
+      <div
+        class="ml-2 shrink-0 text-base transition-all duration-300 ease-in-out"
+        :class="{
+          'opacity-100': sidebarStore.isExpanded,
+          'opacity-0': !sidebarStore.isExpanded,
+          '-z-50': !sidebarStore.isExpanded,
+        }"
+      >
+        {{ label }}
+      </div>
     </div>
+    <Badge v-if="isBeta" theme="blue" variant="subtle">beta</Badge>
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed } from "vue";
+import { Badge } from "frappe-ui";
 import { useRoute, useRouter } from "vue-router";
 import { useSidebarStore } from "@/stores/sidebar";
 
 const props = defineProps({
+  icon: {
+    type: Object,
+    required: true,
+  },
   label: {
     type: String,
     required: true,
   },
-  icon: {
-    type: Object,
-    required: true,
+  isBeta: {
+    type: Boolean,
+    required: false,
+    default: false,
   },
   to: {
     type: String,

From 7ef603c7e0aa7795b92415fcd8ff57df0bc6c21f Mon Sep 17 00:00:00 2001
From: Sabu Siyad <hello@ssiyad.com>
Date: Mon, 19 Jun 2023 17:36:50 +0530
Subject: [PATCH 2/3] fix: change badge color

---
 .../components/desk/sidebar/SidebarLink.vue   | 26 +++++++++----------
 1 file changed, 12 insertions(+), 14 deletions(-)

diff --git a/desk/src/components/desk/sidebar/SidebarLink.vue b/desk/src/components/desk/sidebar/SidebarLink.vue
index 345dc61ed..a98e94d33 100644
--- a/desk/src/components/desk/sidebar/SidebarLink.vue
+++ b/desk/src/components/desk/sidebar/SidebarLink.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex h-7 cursor-pointer items-center justify-between rounded-lg px-1.5 text-gray-700 transition-all duration-300 ease-in-out"
+    class="flex h-7 cursor-pointer items-center rounded-lg px-1.5 text-gray-700 transition-all duration-300 ease-in-out"
     :class="{
       'w-full': sidebarStore.isExpanded,
       'w-7': !sidebarStore.isExpanded,
@@ -10,20 +10,18 @@
     }"
     @click="handle"
   >
-    <div class="flex items-center">
-      <component :is="icon" class="h-4 w-4 shrink-0"></component>
-      <div
-        class="ml-2 shrink-0 text-base transition-all duration-300 ease-in-out"
-        :class="{
-          'opacity-100': sidebarStore.isExpanded,
-          'opacity-0': !sidebarStore.isExpanded,
-          '-z-50': !sidebarStore.isExpanded,
-        }"
-      >
-        {{ label }}
-      </div>
+    <component :is="icon" class="h-4 w-4 shrink-0"></component>
+    <div
+      class="ml-2 flex shrink-0 grow items-center justify-between text-base transition-all duration-300 ease-in-out"
+      :class="{
+        'opacity-100': sidebarStore.isExpanded,
+        'opacity-0': !sidebarStore.isExpanded,
+        '-z-50': !sidebarStore.isExpanded,
+      }"
+    >
+      {{ label }}
+      <Badge v-if="isBeta" theme="orange" variant="subtle">beta</Badge>
     </div>
-    <Badge v-if="isBeta" theme="blue" variant="subtle">beta</Badge>
   </div>
 </template>
 

From a722f9e31898c65048ff05a10b446206b468ac1d Mon Sep 17 00:00:00 2001
From: Sabu Siyad <hello@ssiyad.com>
Date: Mon, 19 Jun 2023 17:40:02 +0530
Subject: [PATCH 3/3] chore: add a tooltip explaining what `beta` is

---
 desk/src/components/desk/sidebar/SidebarLink.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/desk/src/components/desk/sidebar/SidebarLink.vue b/desk/src/components/desk/sidebar/SidebarLink.vue
index a98e94d33..76a7d22ea 100644
--- a/desk/src/components/desk/sidebar/SidebarLink.vue
+++ b/desk/src/components/desk/sidebar/SidebarLink.vue
@@ -20,15 +20,17 @@
       }"
     >
       {{ label }}
-      <Badge v-if="isBeta" theme="orange" variant="subtle">beta</Badge>
+      <Tooltip :text="betaText">
+        <Badge v-if="isBeta" theme="orange" variant="subtle">beta</Badge>
+      </Tooltip>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed } from "vue";
-import { Badge } from "frappe-ui";
 import { useRoute, useRouter } from "vue-router";
+import { Badge, Tooltip } from "frappe-ui";
 import { useSidebarStore } from "@/stores/sidebar";
 
 const props = defineProps({
@@ -61,6 +63,7 @@ const route = useRoute();
 const router = useRouter();
 const sidebarStore = useSidebarStore();
 const isActive = computed(() => props.to.includes(route.name.toString()));
+const betaText = "This feature is a work in progress. Use with caution";
 
 function handle() {
   props.onClick();