From 8bc4c93f30d314fc9b5a27b0747eacb23ad10eda Mon Sep 17 00:00:00 2001
From: Muhsin Keloth <muhsinkeramam@gmail.com>
Date: Thu, 30 May 2024 14:23:25 +0530
Subject: [PATCH] feat: add status in linear search item

---
 .../components/ui/Dropdown/DropdownList.vue      |  2 ++
 .../ui/Dropdown/DropdownListItemButton.vue       | 16 +++++++++++++++-
 .../widgets/conversation/linear/LinkIssue.vue    |  2 ++
 lib/linear/queries.rb                            |  4 ++++
 4 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/app/javascript/dashboard/components/ui/Dropdown/DropdownList.vue b/app/javascript/dashboard/components/ui/Dropdown/DropdownList.vue
index 0c6942e1b..6103e6cd9 100644
--- a/app/javascript/dashboard/components/ui/Dropdown/DropdownList.vue
+++ b/app/javascript/dashboard/components/ui/Dropdown/DropdownList.vue
@@ -100,6 +100,8 @@ const shouldShowEmptyState = computed(() => {
         :key="item.id"
         :is-active="isFilterActive(item.id)"
         :button-text="item.name"
+        :left-icon="item.leftIcon"
+        :left-icon-color="item.leftIconColor"
         @click="$emit('click', item)"
       />
     </slot>
diff --git a/app/javascript/dashboard/components/ui/Dropdown/DropdownListItemButton.vue b/app/javascript/dashboard/components/ui/Dropdown/DropdownListItemButton.vue
index 3566686e1..75011140f 100644
--- a/app/javascript/dashboard/components/ui/Dropdown/DropdownListItemButton.vue
+++ b/app/javascript/dashboard/components/ui/Dropdown/DropdownListItemButton.vue
@@ -8,6 +8,14 @@ defineProps({
     type: Boolean,
     default: false,
   },
+  leftIcon: {
+    type: String,
+    default: '',
+  },
+  leftIconColor: {
+    type: String,
+    default: '',
+  },
 });
 </script>
 <template>
@@ -18,7 +26,13 @@ defineProps({
     @mouseleave="$emit('mouseleave')"
     @focus="$emit('focus')"
   >
-    <div class="inline-flex items-center gap-3 overflow-hidden">
+    <div class="inline-flex items-center gap-2 overflow-hidden">
+      <fluent-icon
+        v-if="leftIcon"
+        icon="status"
+        size="18"
+        :style="{ color: leftIconColor }"
+      />
       <span
         class="text-sm font-medium truncate text-slate-900 dark:text-slate-50"
       >
diff --git a/app/javascript/dashboard/components/widgets/conversation/linear/LinkIssue.vue b/app/javascript/dashboard/components/widgets/conversation/linear/LinkIssue.vue
index a8ec71df1..df39f01cb 100644
--- a/app/javascript/dashboard/components/widgets/conversation/linear/LinkIssue.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/linear/LinkIssue.vue
@@ -109,6 +109,8 @@ const onSearch = async value => {
     issues.value = response.data.map(issue => ({
       id: issue.id,
       name: `${issue.identifier} ${issue.title}`,
+      leftIcon: 'status',
+      leftIconColor: issue.state.color,
     }));
   } catch (error) {
     const errorMessage = parseLinearAPIErrorResponse(
diff --git a/lib/linear/queries.rb b/lib/linear/queries.rb
index 78b2108f9..54daaf30c 100644
--- a/lib/linear/queries.rb
+++ b/lib/linear/queries.rb
@@ -54,6 +54,10 @@ module Linear::Queries
             title
             description
             identifier
+            state {
+              name
+              color
+            }
           }
         }
       }