From f83af33b87e8e06cc4497063a1929ddba2b5ff25 Mon Sep 17 00:00:00 2001
From: Muhsin Keloth <muhsinkeramam@gmail.com>
Date: Thu, 23 May 2024 13:32:41 +0530
Subject: [PATCH] feat: Add title while linking the linear issue (#9529)

---
 .../dashboard/api/integrations/linear.js      |  3 ++-
 .../conversation/linear/CreateIssue.vue       |  6 ++++-
 .../conversation/linear/CreateOrLinkIssue.vue | 25 ++++++++++++++-----
 .../widgets/conversation/linear/LinkIssue.vue |  6 ++++-
 .../widgets/conversation/linear/index.vue     |  8 ++++--
 .../i18n/locale/en/integrations.json          |  3 ++-
 6 files changed, 39 insertions(+), 12 deletions(-)

diff --git a/app/javascript/dashboard/api/integrations/linear.js b/app/javascript/dashboard/api/integrations/linear.js
index 600f169d6..2ac0940aa 100644
--- a/app/javascript/dashboard/api/integrations/linear.js
+++ b/app/javascript/dashboard/api/integrations/linear.js
@@ -19,10 +19,11 @@ class LinearAPI extends ApiClient {
     return axios.post(`${this.url}/create_issue`, data);
   }
 
-  link_issue(conversationId, issueId) {
+  link_issue(conversationId, issueId, title) {
     return axios.post(`${this.url}/link_issue`, {
       issue_id: issueId,
       conversation_id: conversationId,
+      title: title,
     });
   }
 
diff --git a/app/javascript/dashboard/components/widgets/conversation/linear/CreateIssue.vue b/app/javascript/dashboard/components/widgets/conversation/linear/CreateIssue.vue
index cd3976ec4..5c3575c44 100644
--- a/app/javascript/dashboard/components/widgets/conversation/linear/CreateIssue.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/linear/CreateIssue.vue
@@ -117,6 +117,10 @@ const props = defineProps({
     type: [Number, String],
     required: true,
   },
+  title: {
+    type: String,
+    default: null,
+  },
 });
 
 const emit = defineEmits(['close']);
@@ -218,7 +222,7 @@ const createIssue = async () => {
     isCreating.value = true;
     const response = await LinearAPI.createIssue(payload);
     const { id: issueId } = response.data;
-    await LinearAPI.link_issue(props.conversationId, issueId);
+    await LinearAPI.link_issue(props.conversationId, issueId, props.title);
     useAlert(t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.CREATE_SUCCESS'));
     onClose();
   } catch (error) {
diff --git a/app/javascript/dashboard/components/widgets/conversation/linear/CreateOrLinkIssue.vue b/app/javascript/dashboard/components/widgets/conversation/linear/CreateOrLinkIssue.vue
index f15b40409..589178853 100644
--- a/app/javascript/dashboard/components/widgets/conversation/linear/CreateOrLinkIssue.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/linear/CreateOrLinkIssue.vue
@@ -25,30 +25,35 @@
       <div v-if="selectedTabIndex === 0" class="flex flex-col px-8 pb-4">
         <create-issue
           :account-id="accountId"
-          :conversation-id="conversationId"
+          :conversation-id="conversation.id"
+          :title="title"
           @close="onClose"
         />
       </div>
 
       <div v-else class="flex flex-col px-8 pb-4">
-        <link-issue :conversation-id="conversationId" @close="onClose" />
+        <link-issue
+          :conversation-id="conversation.id"
+          :title="title"
+          @close="onClose"
+        />
       </div>
     </div>
   </div>
 </template>
 <script setup>
 import { useI18n } from 'dashboard/composables/useI18n';
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 import LinkIssue from './LinkIssue.vue';
 import CreateIssue from './CreateIssue.vue';
 
-defineProps({
+const props = defineProps({
   accountId: {
     type: [Number, String],
     required: true,
   },
-  conversationId: {
-    type: [Number, String],
+  conversation: {
+    type: Object,
     required: true,
   },
 });
@@ -57,6 +62,14 @@ const { t } = useI18n();
 
 const selectedTabIndex = ref(0);
 
+const title = computed(() => {
+  const { meta: { sender: { name = null } = {} } = {} } = props.conversation;
+  return t('INTEGRATION_SETTINGS.LINEAR.LINK.LINK_TITLE', {
+    conversationId: props.conversation.id,
+    name,
+  });
+});
+
 const emits = defineEmits(['close']);
 
 const tabs = ref([
diff --git a/app/javascript/dashboard/components/widgets/conversation/linear/LinkIssue.vue b/app/javascript/dashboard/components/widgets/conversation/linear/LinkIssue.vue
index 404837fc7..c9eed4a70 100644
--- a/app/javascript/dashboard/components/widgets/conversation/linear/LinkIssue.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/linear/LinkIssue.vue
@@ -56,6 +56,10 @@ const props = defineProps({
     type: [Number, String],
     required: true,
   },
+  title: {
+    type: String,
+    default: null,
+  },
 });
 
 const emits = defineEmits(['close']);
@@ -113,7 +117,7 @@ const linkIssue = async () => {
   const { id: issueId } = selectedOption.value;
   try {
     isLinking.value = true;
-    await LinearAPI.link_issue(props.conversationId, issueId);
+    await LinearAPI.link_issue(props.conversationId, issueId, props.title);
     useAlert(t('INTEGRATION_SETTINGS.LINEAR.LINK.LINK_SUCCESS'));
     searchQuery.value = '';
     issues.value = [];
diff --git a/app/javascript/dashboard/components/widgets/conversation/linear/index.vue b/app/javascript/dashboard/components/widgets/conversation/linear/index.vue
index ffb98db9e..652972448 100644
--- a/app/javascript/dashboard/components/widgets/conversation/linear/index.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/linear/index.vue
@@ -30,7 +30,7 @@
       class="!items-start [&>div]:!top-12"
     >
       <create-or-link-issue
-        :conversation-id="conversationId"
+        :conversation="conversation"
         :account-id="currentAccountId"
         @close="closePopup"
       />
@@ -63,6 +63,10 @@ const shouldShowPopup = ref(false);
 
 const currentAccountId = getters.getCurrentAccountId;
 
+const conversation = computed(() =>
+  getters.getConversationById.value(props.conversationId)
+);
+
 const tooltipText = computed(() => {
   return linkedIssue.value === null
     ? t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK_BUTTON')
@@ -86,7 +90,7 @@ const unlinkIssue = async linkId => {
     linkedIssue.value = null;
     useAlert(t('INTEGRATION_SETTINGS.LINEAR.UNLINK.SUCCESS'));
   } catch (error) {
-    useAlert(t('INTEGRATION_SETTINGS.LINEAR.UNLINK.DELETE_ERROR'));
+    useAlert(t('INTEGRATION_SETTINGS.LINEAR.UNLINK.ERROR'));
   }
 };
 
diff --git a/app/javascript/dashboard/i18n/locale/en/integrations.json b/app/javascript/dashboard/i18n/locale/en/integrations.json
index 84390d5b1..e30fe3852 100644
--- a/app/javascript/dashboard/i18n/locale/en/integrations.json
+++ b/app/javascript/dashboard/i18n/locale/en/integrations.json
@@ -217,7 +217,8 @@
         "LOADING": "Loading",
         "ERROR": "There was an error fetching the linear issues, please try again",
         "LINK_SUCCESS": "Issue linked successfully",
-        "LINK_ERROR": "There was an error linking the issue, please try again"
+        "LINK_ERROR": "There was an error linking the issue, please try again",
+        "LINK_TITLE": "#%{conversationId}: %{name}"
       },
       "ADD_OR_LINK": {
         "TITLE": "Create/link linear issue",