From df0a7a348b65c7b0c13ef807bfa167d0af0aea4c Mon Sep 17 00:00:00 2001
From: Muhsin Keloth <muhsinkeramam@gmail.com>
Date: Mon, 20 May 2024 17:05:07 +0530
Subject: [PATCH] chore: change link dropdown component

---
 .../components/ui/Dropdown/DropdownList.vue   |  7 ++-
 .../widgets/conversation/linear/LinkIssue.vue | 31 ++++++----
 .../widgets/conversation/linear/SearchBar.vue | 28 ----------
 .../conversation/linear/SearchIssue.vue       | 26 ---------
 .../conversation/linear/SearchIssueItem.vue   | 35 ------------
 .../linear/SearchListDropdown.vue             | 56 -------------------
 .../i18n/locale/en/integrations.json          |  2 +-
 7 files changed, 25 insertions(+), 160 deletions(-)
 delete mode 100644 app/javascript/dashboard/components/widgets/conversation/linear/SearchBar.vue
 delete mode 100644 app/javascript/dashboard/components/widgets/conversation/linear/SearchIssue.vue
 delete mode 100644 app/javascript/dashboard/components/widgets/conversation/linear/SearchIssueItem.vue
 delete mode 100644 app/javascript/dashboard/components/widgets/conversation/linear/SearchListDropdown.vue

diff --git a/app/javascript/dashboard/components/ui/Dropdown/DropdownList.vue b/app/javascript/dashboard/components/ui/Dropdown/DropdownList.vue
index 88efa5f39..0a1975427 100644
--- a/app/javascript/dashboard/components/ui/Dropdown/DropdownList.vue
+++ b/app/javascript/dashboard/components/ui/Dropdown/DropdownList.vue
@@ -19,7 +19,7 @@ const props = defineProps({
     default: '',
   },
   activeFilterId: {
-    type: Number,
+    type: [String, Number],
     default: null,
   },
   showClearFilter: {
@@ -28,10 +28,13 @@ const props = defineProps({
   },
 });
 
+const emits = defineEmits(['on-search']);
+
 const searchTerm = ref('');
 
 const onSearch = value => {
   searchTerm.value = value;
+  emits('on-search', value);
 };
 
 const filteredListItems = computed(() => {
@@ -55,7 +58,7 @@ const isFilterActive = id => {
   >
     <slot name="search">
       <dropdown-search
-        v-if="enableSearch && listItems.length"
+        v-if="enableSearch"
         :input-value="searchTerm"
         :input-placeholder="inputPlaceholder"
         :show-clear-filter="showClearFilter"
diff --git a/app/javascript/dashboard/components/widgets/conversation/linear/LinkIssue.vue b/app/javascript/dashboard/components/widgets/conversation/linear/LinkIssue.vue
index 22150a95a..404837fc7 100644
--- a/app/javascript/dashboard/components/widgets/conversation/linear/LinkIssue.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/linear/LinkIssue.vue
@@ -1,23 +1,30 @@
 <template>
-  <div class="flex flex-col">
-    <search-issue
-      :title="linkIssueTitle"
-      class="w-full bg-slate-50 dark:bg-slate-800 hover:bg-slate-75 dark:hover:bg-slate-800"
+  <div
+    class="flex flex-col justify-between"
+    :class="shouldShowDropdown ? 'h-[256px]' : 'gap-2'"
+  >
+    <filter-button
+      right-icon="chevron-down"
+      :button-text="linkIssueTitle"
+      class="justify-between w-full bg-slate-50 dark:bg-slate-800 hover:bg-slate-75 dark:hover:bg-slate-800"
       @click="toggleDropdown"
     >
       <template v-if="shouldShowDropdown" #dropdown>
-        <search-list-dropdown
+        <filter-list-dropdown
           v-if="issues"
           v-on-clickaway="toggleDropdown"
-          :items="issues"
-          :selected-id="selectedOption.id"
-          class="flex flex-col w-[240px] overflow-y-auto left-0 md:left-auto md:right-0 top-10"
+          :show-clear-filter="false"
+          :list-items="issues"
+          :active-filter-id="selectedOption.id"
+          :input-placeholder="$t('INTEGRATION_SETTINGS.LINEAR.LINK.SEARCH')"
+          enable-search
+          class="left-0 flex flex-col w-full overflow-y-auto h-fit max-h-[160px] md:left-auto md:right-0 top-10"
           @on-search="onSearch"
           @click="onSelectIssue"
         />
       </template>
-    </search-issue>
-    <div class="flex items-center justify-end w-full gap-2 mt-64">
+    </filter-button>
+    <div class="flex items-center justify-end w-full gap-2">
       <woot-button
         class="px-4 rounded-xl button clear outline-woot-200/50 outline"
         @click.prevent="onClose"
@@ -41,8 +48,8 @@ import { ref, computed } from 'vue';
 import { useI18n } from 'dashboard/composables/useI18n';
 import { useAlert } from 'dashboard/composables';
 import LinearAPI from 'dashboard/api/integrations/linear';
-import SearchIssue from './SearchIssue.vue';
-import SearchListDropdown from './SearchListDropdown.vue';
+import FilterButton from 'dashboard/components/ui/Dropdown/DropdownButton.vue';
+import FilterListDropdown from 'dashboard/components/ui/Dropdown/DropdownList.vue';
 
 const props = defineProps({
   conversationId: {
diff --git a/app/javascript/dashboard/components/widgets/conversation/linear/SearchBar.vue b/app/javascript/dashboard/components/widgets/conversation/linear/SearchBar.vue
deleted file mode 100644
index dd1a41920..000000000
--- a/app/javascript/dashboard/components/widgets/conversation/linear/SearchBar.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<script setup>
-defineProps({
-  inputValue: {
-    type: String,
-    default: '',
-  },
-});
-</script>
-<template>
-  <div
-    class="flex items-center justify-between h-10 min-h-[40px] sticky top-0 bg-white z-10 dark:bg-slate-800 gap-2 px-3 border-b rounded-t-xl border-slate-50 dark:border-slate-700"
-  >
-    <div class="flex items-center w-full gap-2">
-      <fluent-icon
-        icon="search"
-        size="18"
-        class="text-slate-400 dark:text-slate-400"
-      />
-      <input
-        type="text"
-        class="w-full mb-0 text-sm bg-white dark:bg-slate-800 text-slate-800 dark:text-slate-75 reset-base"
-        :placeholder="$t('INTEGRATION_SETTINGS.LINEAR.LINK.SEARCH')"
-        :value="inputValue"
-        @input="$emit('input', $event.target.value)"
-      />
-    </div>
-  </div>
-</template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/linear/SearchIssue.vue b/app/javascript/dashboard/components/widgets/conversation/linear/SearchIssue.vue
deleted file mode 100644
index 0d86127f9..000000000
--- a/app/javascript/dashboard/components/widgets/conversation/linear/SearchIssue.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<script setup>
-defineProps({
-  title: {
-    type: String,
-    default: '',
-  },
-});
-</script>
-<template>
-  <button
-    class="inline-flex relative justify-between p-1.5 w-fit h-8 gap-1.5 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-800 active:bg-slate-75 dark:active:bg-slate-800"
-    @click="$emit('click')"
-  >
-    <span
-      class="text-sm font-medium truncate text-slate-900 dark:text-slate-50"
-    >
-      {{ title }}
-    </span>
-    <fluent-icon
-      icon="chevron-down"
-      size="18"
-      class="flex-shrink-0 text-slate-900 dark:text-slate-50"
-    />
-    <slot name="dropdown" />
-  </button>
-</template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/linear/SearchIssueItem.vue b/app/javascript/dashboard/components/widgets/conversation/linear/SearchIssueItem.vue
deleted file mode 100644
index e46e9de33..000000000
--- a/app/javascript/dashboard/components/widgets/conversation/linear/SearchIssueItem.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<script setup>
-defineProps({
-  buttonText: {
-    type: String,
-    default: '',
-  },
-  isActive: {
-    type: Boolean,
-    default: false,
-  },
-});
-</script>
-<template>
-  <button
-    class="relative inline-flex items-center justify-start w-full p-3 border-0 rounded-none first:rounded-t-xl last:rounded-b-xl h-11 hover:bg-slate-50 dark:hover:bg-slate-700 active:bg-slate-75 dark:active:bg-slate-800"
-    @click.stop="$emit('click')"
-    @mouseenter="$emit('mouseenter')"
-    @mouseleave="$emit('mouseleave')"
-    @focus="$emit('focus')"
-  >
-    <div class="inline-flex items-center gap-3 overflow-hidden">
-      <span
-        class="text-sm font-medium truncate text-slate-900 dark:text-slate-50"
-      >
-        {{ buttonText }}
-      </span>
-      <fluent-icon
-        v-if="isActive"
-        icon="checkmark"
-        size="18"
-        class="flex-shrink-0 text-slate-900 dark:text-slate-50"
-      />
-    </div>
-  </button>
-</template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/linear/SearchListDropdown.vue b/app/javascript/dashboard/components/widgets/conversation/linear/SearchListDropdown.vue
deleted file mode 100644
index c8a13da0e..000000000
--- a/app/javascript/dashboard/components/widgets/conversation/linear/SearchListDropdown.vue
+++ /dev/null
@@ -1,56 +0,0 @@
-<script setup>
-import { ref, computed } from 'vue';
-import { picoSearch } from '@scmmishra/pico-search';
-import SearchIssueItem from './SearchIssueItem.vue';
-import SearchBar from './SearchBar.vue';
-
-const props = defineProps({
-  items: {
-    type: Array,
-    default: () => [],
-  },
-  selectedId: {
-    type: String,
-    default: null,
-  },
-});
-const emits = defineEmits(['on-search']);
-
-const searchTerm = ref('');
-
-const onSearch = value => {
-  searchTerm.value = value;
-  emits('on-search', value);
-};
-
-const filteredItems = computed(() => {
-  if (!searchTerm.value) return props.items;
-  return picoSearch(props.items, searchTerm.value, ['name']);
-});
-
-const isListEmpty = computed(() => {
-  return !filteredItems.value.length;
-});
-</script>
-<template>
-  <div
-    class="absolute z-20 w-full bg-white border shadow dark:bg-slate-800 rounded-xl border-slate-50 dark:border-slate-700/50 max-h-[400px]"
-    @click.stop
-  >
-    <search-bar :input-value="searchTerm" @input="onSearch" />
-
-    <div
-      v-if="isListEmpty"
-      class="flex items-center justify-center h-10 text-sm text-slate-500 dark:text-slate-300"
-    >
-      {{ $t('INTEGRATION_SETTINGS.LINEAR.LINK.EMPTY_LIST') }}
-    </div>
-    <search-issue-item
-      v-for="item in filteredItems"
-      :key="item.id"
-      :is-active="item.id === selectedId"
-      :button-text="item.name"
-      @click="$emit('click', item)"
-    />
-  </div>
-</template>
diff --git a/app/javascript/dashboard/i18n/locale/en/integrations.json b/app/javascript/dashboard/i18n/locale/en/integrations.json
index 7228b4812..84390d5b1 100644
--- a/app/javascript/dashboard/i18n/locale/en/integrations.json
+++ b/app/javascript/dashboard/i18n/locale/en/integrations.json
@@ -210,7 +210,7 @@
       "LOADING_ERROR": "There was an error fetching the linear issues, please try again",
       "CREATE": "Create",
       "LINK": {
-        "SEARCH": "Search linear issues",
+        "SEARCH": "Search issues",
         "SELECT": "Select issue",
         "TITLE": "Link",
         "EMPTY_LIST": "No linear issues found",