From b5d655171ebc2add0f0696f8d5eb0ecf6f1c8656 Mon Sep 17 00:00:00 2001
From: Muhsin Keloth <muhsinkeramam@gmail.com>
Date: Mon, 20 May 2024 10:31:37 +0530
Subject: [PATCH] chore: refactor issue component

---
 .../conversation/linear/CreateIssue.vue       | 141 +++++++-----------
 .../widgets/conversation/linear/Issue.vue     |  57 ++-----
 .../conversation/linear/IssueHeader.vue       |  56 +++++++
 .../widgets/conversation/linear/LinkIssue.vue |   1 +
 4 files changed, 118 insertions(+), 137 deletions(-)
 create mode 100644 app/javascript/dashboard/components/widgets/conversation/linear/IssueHeader.vue

diff --git a/app/javascript/dashboard/components/widgets/conversation/linear/CreateIssue.vue b/app/javascript/dashboard/components/widgets/conversation/linear/CreateIssue.vue
index 8f30ebaab..cd3976ec4 100644
--- a/app/javascript/dashboard/components/widgets/conversation/linear/CreateIssue.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/linear/CreateIssue.vue
@@ -1,7 +1,7 @@
 <template>
   <div @submit.prevent="onSubmit">
     <woot-input
-      v-model="state.title"
+      v-model="formState.title"
       :class="{ error: v$.title.$error }"
       class="w-full"
       :styles="{ ...inputStyles, padding: '6px 12px' }"
@@ -15,10 +15,9 @@
     <label>
       {{ $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.DESCRIPTION.LABEL') }}
       <textarea
-        v-model="state.description"
+        v-model="formState.description"
         :style="{ ...inputStyles, padding: '8px 12px' }"
         rows="3"
-        type="text"
         class="text-sm"
         :placeholder="
           $t(
@@ -30,9 +29,9 @@
     <label :class="{ error: v$.teamId.$error }">
       {{ $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.TEAM.LABEL') }}
       <select
-        v-model="state.teamId"
+        v-model="formState.teamId"
         :style="inputStyles"
-        @change="onChangeTeam($event)"
+        @change="onChangeTeam"
       >
         <option v-for="item in teams" :key="item.name" :value="item.id">
           {{ item.name }}
@@ -44,49 +43,44 @@
     </label>
     <label>
       {{ $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.ASSIGNEE.LABEL') }}
-      <select v-model="state.assigneeId" :style="inputStyles">
+      <select v-model="formState.assigneeId" :style="inputStyles">
         <option v-for="item in assignees" :key="item.name" :value="item.id">
           {{ item.name }}
         </option>
       </select>
     </label>
-
     <label>
       {{ $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.LABEL.LABEL') }}
-      <select v-model="state.labelId" :style="inputStyles">
+      <select v-model="formState.labelId" :style="inputStyles">
         <option v-for="item in labels" :key="item.name" :value="item.id">
           {{ item.name }}
         </option>
       </select>
     </label>
-
     <label>
       {{ $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.PRIORITY.LABEL') }}
-      <select v-model="state.priority" :style="inputStyles">
+      <select v-model="formState.priority" :style="inputStyles">
         <option v-for="item in priorities" :key="item.name" :value="item.id">
           {{ item.name }}
         </option>
       </select>
     </label>
-
     <label>
       {{ $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.PROJECT.LABEL') }}
-      <select v-model="state.projectId" :style="inputStyles">
+      <select v-model="formState.projectId" :style="inputStyles">
         <option v-for="item in projects" :key="item.name" :value="item.id">
           {{ item.name }}
         </option>
       </select>
     </label>
-
     <label>
       {{ $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.STATUS.LABEL') }}
-      <select v-model="state.stateId" :style="inputStyles">
+      <select v-model="formState.stateId" :style="inputStyles">
         <option v-for="item in statuses" :key="item.name" :value="item.id">
           {{ item.name }}
         </option>
       </select>
     </label>
-
     <div class="flex items-center justify-end w-full gap-2 mt-8">
       <woot-button
         class="px-4 rounded-xl button clear outline-woot-200/50 outline"
@@ -105,12 +99,13 @@
     </div>
   </div>
 </template>
+
 <script setup>
-import LinearAPI from 'dashboard/api/integrations/linear';
 import { reactive, computed, onMounted, ref } from 'vue';
 import { useVuelidate } from '@vuelidate/core';
 import { useI18n } from 'dashboard/composables/useI18n';
 import { useAlert } from 'dashboard/composables';
+import LinearAPI from 'dashboard/api/integrations/linear';
 import validations from './validations';
 
 const props = defineProps({
@@ -124,6 +119,7 @@ const props = defineProps({
   },
 });
 
+const emit = defineEmits(['close']);
 const { t } = useI18n();
 
 const teams = ref([]);
@@ -133,37 +129,17 @@ const labels = ref([]);
 const statuses = ref([]);
 
 const priorities = [
-  {
-    id: 0,
-    name: 'No priority',
-  },
-  {
-    id: 1,
-    name: 'Urgent',
-  },
-  {
-    id: 2,
-    name: 'High',
-  },
-  {
-    id: 3,
-    name: 'Normal',
-  },
-  {
-    id: 4,
-    name: 'Low',
-  },
+  { id: 0, name: 'No priority' },
+  { id: 1, name: 'Urgent' },
+  { id: 2, name: 'High' },
+  { id: 3, name: 'Normal' },
+  { id: 4, name: 'Low' },
 ];
 
 const isCreating = ref(false);
+const inputStyles = { borderRadius: '12px', fontSize: '14px' };
 
-const inputStyles = {
-  borderRadius: '12px',
-  fontSize: '14px',
-};
-const emit = defineEmits(['close']);
-
-const state = reactive({
+const formState = reactive({
   title: '',
   description: '',
   teamId: '',
@@ -174,27 +150,24 @@ const state = reactive({
   projectId: '',
 });
 
-const v$ = useVuelidate(validations, state);
+const v$ = useVuelidate(validations, formState);
 
-const isSubmitDisabled = computed(() => {
-  return v$.value.title.$invalid || isCreating.value;
-});
-
-const nameError = computed(() => {
-  return v$.value.title.$error
+const isSubmitDisabled = computed(
+  () => v$.value.title.$invalid || isCreating.value
+);
+const nameError = computed(() =>
+  v$.value.title.$error
     ? t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.TITLE.REQUIRED_ERROR')
-    : '';
-});
-
-const teamError = computed(() => {
-  return v$.value.teamId.$error
+    : ''
+);
+const teamError = computed(() =>
+  v$.value.teamId.$error
     ? t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.TEAM.REQUIRED_ERROR')
-    : '';
-});
+    : ''
+);
+
+const onClose = () => emit('close');
 
-const onClose = () => {
-  emit('close');
-};
 const getTeams = async () => {
   try {
     const response = await LinearAPI.getTeams();
@@ -206,7 +179,7 @@ const getTeams = async () => {
 
 const getTeamEntities = async () => {
   try {
-    const response = await LinearAPI.getTeamEntities(state.teamId);
+    const response = await LinearAPI.getTeamEntities(formState.teamId);
     assignees.value = response.data.users;
     labels.value = response.data.labels;
     statuses.value = response.data.states;
@@ -219,40 +192,28 @@ const getTeamEntities = async () => {
 };
 
 const onChangeTeam = event => {
-  state.teamId = event.target.value;
-  state.assigneeId = '';
-  state.stateId = '';
-  state.labelId = '';
+  formState.teamId = event.target.value;
+  formState.assigneeId = '';
+  formState.stateId = '';
+  formState.labelId = '';
   getTeamEntities();
 };
 
 const createIssue = async () => {
   v$.value.$touch();
-  if (v$.value.$invalid) {
-    return;
-  }
+  if (v$.value.$invalid) return;
+
   const payload = {
-    team_id: state.teamId,
-    title: state.title,
+    team_id: formState.teamId,
+    title: formState.title,
+    description: formState.description || undefined,
+    assignee_id: formState.assigneeId || undefined,
+    project_id: formState.projectId || undefined,
+    state_id: formState.stateId || undefined,
+    priority: formState.priority || undefined,
+    label_ids: formState.labelId ? [formState.labelId] : undefined,
   };
-  if (state.description) {
-    payload.description = state.description;
-  }
-  if (state.assigneeId) {
-    payload.assignee_id = state.assigneeId;
-  }
-  if (state.projectId) {
-    payload.project_id = state.projectId;
-  }
-  if (state.stateId) {
-    payload.state_id = state.stateId;
-  }
-  if (state.priority) {
-    payload.priority = state.priority;
-  }
-  if (state.labelId) {
-    payload.label_ids = [state.labelId];
-  }
+
   try {
     isCreating.value = true;
     const response = await LinearAPI.createIssue(payload);
@@ -267,7 +228,5 @@ const createIssue = async () => {
   }
 };
 
-onMounted(() => {
-  getTeams();
-});
+onMounted(getTeams);
 </script>
diff --git a/app/javascript/dashboard/components/widgets/conversation/linear/Issue.vue b/app/javascript/dashboard/components/widgets/conversation/linear/Issue.vue
index 9410b3339..a5dfea150 100644
--- a/app/javascript/dashboard/components/widgets/conversation/linear/Issue.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/linear/Issue.vue
@@ -1,6 +1,7 @@
 <script setup>
 import { format } from 'date-fns';
 import UserAvatarWithName from 'dashboard/components/widgets/UserAvatarWithName.vue';
+import IssueHeader from './IssueHeader.vue';
 import { computed } from 'vue';
 
 const priorityMap = {
@@ -47,55 +48,19 @@ const priorityLabel = computed(() => {
 const unlinkIssue = () => {
   emit('unlink-issue', props.linkId);
 };
-
-const openIssue = () => {
-  window.open(props.issue.url, '_blank');
-};
 </script>
 
 <template>
   <div
-    class="absolute flex flex-col items-start bg-[#fdfdfd] dark:bg-slate-800 z-50 px-4 py-3 border border-solid border-slate-75 dark:border-slate-700 w-[384px] rounded-xl gap-4 max-h-96 overflow-auto"
+    class="absolute flex flex-col items-start bg-ash-50 dark:bg-slate-800 z-50 px-4 py-3 border border-solid border-ash-200 w-[384px] rounded-xl gap-4 max-h-96 overflow-auto"
   >
     <div class="flex flex-col w-full">
-      <div class="flex flex-row justify-between">
-        <div
-          class="flex items-center justify-center gap-1 h-[24px] px-2 py-1 border rounded-lg border-ash-200"
-        >
-          <fluent-icon
-            icon="linear"
-            size="19"
-            class="text-[#5E6AD2]"
-            view-box="0 0 19 19"
-          />
-          <span class="text-xs font-medium text-ash-900">
-            {{ issue.identifier }}
-          </span>
-        </div>
-        <div class="flex items-center gap-0.5">
-          <woot-button
-            variant="clear"
-            color-scheme="secondary"
-            class="h-[24px]"
-            @click="unlinkIssue"
-          >
-            <fluent-icon
-              icon="unlink"
-              size="12"
-              type="outline"
-              icon-lib="lucide"
-            />
-          </woot-button>
-          <woot-button
-            variant="clear"
-            class="h-[24px]"
-            color-scheme="secondary"
-            @click="openIssue"
-          >
-            <fluent-icon icon="arrow-up-right" size="14" />
-          </woot-button>
-        </div>
-      </div>
+      <issue-header
+        :identifier="issue.identifier"
+        :link-id="linkId"
+        :issue-url="issue.url"
+        @unlink-issue="unlinkIssue"
+      />
 
       <span class="mt-2 text-sm font-medium text-ash-900">
         {{ issue.title }}
@@ -109,14 +74,14 @@ const openIssue = () => {
     </div>
     <div class="flex flex-row items-center h-6 gap-2">
       <user-avatar-with-name v-if="assignee" :user="assignee" class="py-1" />
-      <div class="w-px h-3 bg-ash-200" />
+      <div v-if="assignee" class="w-px h-3 bg-ash-200" />
       <div class="flex items-center gap-1 py-1">
         <fluent-icon
           icon="status"
           size="14"
           :style="{ color: issue.state.color }"
         />
-        <h6 class="text-xs text-slate-600">
+        <h6 class="text-xs text-ash-900">
           {{ issue.state.name }}
         </h6>
       </div>
@@ -127,7 +92,7 @@ const openIssue = () => {
           size="14"
           view-box="0 0 12 12"
         />
-        <h6 class="text-xs text-slate-600">{{ priorityLabel }}</h6>
+        <h6 class="text-xs text-ash-900">{{ priorityLabel }}</h6>
       </div>
     </div>
     <div v-if="labels.length" class="flex flex-wrap items-center gap-1">
diff --git a/app/javascript/dashboard/components/widgets/conversation/linear/IssueHeader.vue b/app/javascript/dashboard/components/widgets/conversation/linear/IssueHeader.vue
new file mode 100644
index 000000000..bf907dc69
--- /dev/null
+++ b/app/javascript/dashboard/components/widgets/conversation/linear/IssueHeader.vue
@@ -0,0 +1,56 @@
+<template>
+  <div class="flex flex-row justify-between">
+    <div
+      class="flex items-center justify-center gap-1 h-[24px] px-2 py-1 border rounded-lg border-ash-200"
+    >
+      <fluent-icon
+        icon="linear"
+        size="19"
+        class="text-[#5E6AD2]"
+        view-box="0 0 19 19"
+      />
+      <span class="text-xs font-medium text-ash-900">{{ identifier }}</span>
+    </div>
+    <div class="flex items-center gap-0.5">
+      <woot-button
+        variant="clear"
+        color-scheme="secondary"
+        class="h-[24px]"
+        @click="unlinkIssue"
+      >
+        <fluent-icon icon="unlink" size="12" type="outline" icon-lib="lucide" />
+      </woot-button>
+      <woot-button
+        variant="clear"
+        class="h-[24px]"
+        color-scheme="secondary"
+        @click="openIssue"
+      >
+        <fluent-icon icon="arrow-up-right" size="14" />
+      </woot-button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  identifier: {
+    type: String,
+    required: true,
+  },
+  issueUrl: {
+    type: String,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['unlink-issue']);
+
+const unlinkIssue = () => {
+  emit('unlink-issue');
+};
+
+const openIssue = () => {
+  window.open(props.issueUrl, '_blank');
+};
+</script>
diff --git a/app/javascript/dashboard/components/widgets/conversation/linear/LinkIssue.vue b/app/javascript/dashboard/components/widgets/conversation/linear/LinkIssue.vue
index 511e0057c..dd66df228 100644
--- a/app/javascript/dashboard/components/widgets/conversation/linear/LinkIssue.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/linear/LinkIssue.vue
@@ -111,6 +111,7 @@ const linkIssue = async () => {
     await LinearAPI.link_issue(props.conversationId, issueId);
     useAlert(t('INTEGRATION_SETTINGS.LINEAR.LINK.LINK_SUCCESS'));
     searchQuery.value = '';
+    items.value = [];
     onClose();
   } catch (error) {
     useAlert(t('INTEGRATION_SETTINGS.LINEAR.LINK.LINK_ERROR'));