From f2db469c758264c7d1b0c6871952c0b3b54fcd44 Mon Sep 17 00:00:00 2001
From: Muhsin Keloth <muhsinkeramam@gmail.com>
Date: Fri, 10 May 2024 16:59:41 +0530
Subject: [PATCH] feat: add basic create issue feature

---
 .../dashboard/api/integrations/linear.js      |  42 +++
 app/javascript/dashboard/featureFlags.js      |   1 +
 .../i18n/locale/en/integrations.json          |  16 +
 app/javascript/dashboard/mixins/uiSettings.js |   1 +
 .../dashboard/conversation/ContactPanel.vue   |  24 +-
 .../conversation/linear/AddIssue.vue          | 306 ++++++++++++++++++
 .../conversation/linear/IssueItem.vue         | 144 +++++++++
 .../dashboard/conversation/linear/index.vue   | 108 +++++++
 8 files changed, 641 insertions(+), 1 deletion(-)
 create mode 100644 app/javascript/dashboard/api/integrations/linear.js
 create mode 100644 app/javascript/dashboard/routes/dashboard/conversation/linear/AddIssue.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/conversation/linear/IssueItem.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/conversation/linear/index.vue

diff --git a/app/javascript/dashboard/api/integrations/linear.js b/app/javascript/dashboard/api/integrations/linear.js
new file mode 100644
index 000000000..e4d3294b0
--- /dev/null
+++ b/app/javascript/dashboard/api/integrations/linear.js
@@ -0,0 +1,42 @@
+/* global axios */
+
+import ApiClient from '../ApiClient';
+
+class LinearAPI extends ApiClient {
+  constructor() {
+    super('integrations/linear', { accountScoped: true });
+  }
+
+  getTeams() {
+    return axios.get(`${this.url}/teams`);
+  }
+
+  getTeamEntities(teamId) {
+    return axios.get(`${this.url}/team_entities?team_id=${teamId}`);
+  }
+
+  createIssue(data) {
+    return axios.post(`${this.url}/create_issue`, data);
+  }
+
+  link_issue(conversationId, issueId) {
+    return axios.post(`${this.url}/link_issue`, {
+      issue_id: issueId,
+      conversation_id: conversationId,
+    });
+  }
+
+  getLinkedIssue(conversationId) {
+    return axios.get(
+      `${this.url}/linked_issue?conversation_id=${conversationId}`
+    );
+  }
+
+  unlinkIssue(linkId) {
+    return axios.post(`${this.url}/unlink_issue`, {
+      link_id: linkId,
+    });
+  }
+}
+
+export default new LinearAPI();
diff --git a/app/javascript/dashboard/featureFlags.js b/app/javascript/dashboard/featureFlags.js
index a0453b7d3..11d6c43de 100644
--- a/app/javascript/dashboard/featureFlags.js
+++ b/app/javascript/dashboard/featureFlags.js
@@ -30,4 +30,5 @@ export const FEATURE_FLAGS = {
   EMAIL_CONTINUITY_ON_API_CHANNEL: 'email_continuity_on_api_channel',
   INBOUND_EMAILS: 'inbound_emails',
   IP_LOOKUP: 'ip_lookup',
+  LINEAR: 'linear_integration',
 };
diff --git a/app/javascript/dashboard/i18n/locale/en/integrations.json b/app/javascript/dashboard/i18n/locale/en/integrations.json
index 008ae37b4..e1df12abd 100644
--- a/app/javascript/dashboard/i18n/locale/en/integrations.json
+++ b/app/javascript/dashboard/i18n/locale/en/integrations.json
@@ -205,6 +205,9 @@
       }
     },
     "LINEAR": {
+      "ADD_OR_LINK_BUTTON": "Create/Link Linear Issue",
+      "LOADING": "Fetching linear issues...",
+      "LOADING_ERROR": "There was an error fetching the linear issues, please try again",
       "ADD_OR_LINK": {
         "TITLE": "Create/link linear issue",
         "DESCRIPTION": "Create or link a linear issue to the conversation",
@@ -240,9 +243,22 @@
         },
         "CREATE": "Create",
         "CANCEL": "Cancel",
+        "CREATE_SUCCESS": "Issue created successfully",
         "CREATE_ERROR": "There was an error creating the issue, please try again",
         "LOADING_TEAM_ERROR": "There was an error fetching the teams, please try again",
         "LOADING_TEAM_ENTITIES_ERROR": "There was an error fetching the team entities, please try again"
+      },
+      "ISSUE": {
+        "STATUS": "Status",
+        "PRIORITY": "Priority",
+        "ASSIGNEE": "Assignee",
+        "LABELS": "Labels",
+        "CREATED_AT": "Created at"
+      },
+      "UNLINK": {
+        "TITLE": "Unlink",
+        "SUCCESS": "Issue unlinked successfully",
+        "ERROR": "There was an error unlinking the issue, please try again"
       }
     }
   }
diff --git a/app/javascript/dashboard/mixins/uiSettings.js b/app/javascript/dashboard/mixins/uiSettings.js
index 2c60db3cb..bb07a8274 100644
--- a/app/javascript/dashboard/mixins/uiSettings.js
+++ b/app/javascript/dashboard/mixins/uiSettings.js
@@ -7,6 +7,7 @@ export const DEFAULT_CONVERSATION_SIDEBAR_ITEMS_ORDER = [
   { name: 'contact_attributes' },
   { name: 'previous_conversation' },
   { name: 'conversation_participants' },
+  { name: 'linear' },
 ];
 export const DEFAULT_CONTACT_SIDEBAR_ITEMS_ORDER = [
   { name: 'contact_attributes' },
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue b/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
index aa5f5cc12..7c7b3b550 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
@@ -23,6 +23,18 @@
           :key="element.name"
           class="bg-white dark:bg-gray-800"
         >
+          <div
+            v-if="element.name === 'linear' && isLinearIntegrationEnabled"
+            class="conversation--actions"
+          >
+            <accordion-item
+              title="Linear"
+              :is-open="isContactSidebarItemOpen('is_linear_open')"
+              @click="value => toggleSidebarUIState('is_linear_open', value)"
+            >
+              <linear :conversation-id="conversationId" />
+            </accordion-item>
+          </div>
           <div
             v-if="element.name === 'conversation_actions'"
             class="conversation--actions"
@@ -145,7 +157,8 @@ import CustomAttributes from './customAttributes/CustomAttributes.vue';
 import draggable from 'vuedraggable';
 import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 import MacrosList from './Macros/List.vue';
-
+import { FEATURE_FLAGS } from 'dashboard/featureFlags';
+import Linear from './linear/index.vue';
 export default {
   components: {
     AccordionItem,
@@ -157,6 +170,7 @@ export default {
     ConversationParticipant,
     draggable,
     MacrosList,
+    Linear,
   },
   mixins: [alertMixin, uiSettingsMixin],
   props: {
@@ -185,6 +199,8 @@ export default {
       currentChat: 'getSelectedChat',
       currentUser: 'getCurrentUser',
       uiFlags: 'inboxAssignableAgents/getUIFlags',
+      accountId: 'getCurrentAccountId',
+      isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
     }),
     conversationAdditionalAttributes() {
       return this.currentConversationMetaData.additional_attributes || {};
@@ -210,6 +226,12 @@ export default {
       const { custom_attributes: customAttributes } = this.contact;
       return customAttributes && Object.keys(customAttributes).length;
     },
+    isLinearIntegrationEnabled() {
+      return this.isFeatureEnabledonAccount(
+        this.accountId,
+        FEATURE_FLAGS.LINEAR
+      );
+    },
   },
   watch: {
     conversationId(newConversationId, prevConversationId) {
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/linear/AddIssue.vue b/app/javascript/dashboard/routes/dashboard/conversation/linear/AddIssue.vue
new file mode 100644
index 000000000..af8386eca
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/conversation/linear/AddIssue.vue
@@ -0,0 +1,306 @@
+<template>
+  <div class="flex flex-col h-auto overflow-auto">
+    <woot-modal-header
+      :header-title="$t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.TITLE')"
+      :header-content="
+        $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.DESCRIPTION')
+      "
+    />
+
+    <div class="flex flex-col h-auto overflow-auto">
+      <div class="flex flex-col px-8 pb-4" @submit.prevent="onSubmit">
+        <woot-input
+          v-model="title"
+          :class="{ error: $v.title.$error }"
+          class="w-full"
+          :styles="inputStyles"
+          :label="
+            $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.TITLE.LABEL')
+          "
+          :placeholder="
+            $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.TITLE.PLACEHOLDER')
+          "
+          :error="
+            $v.title.$error
+              ? $t(
+                  'INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.TITLE.REQUIRED_ERROR'
+                )
+              : ''
+          "
+          @input="$v.title.$touch"
+        />
+        <label>
+          {{
+            $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.DESCRIPTION.LABEL')
+          }}
+          <textarea
+            v-model="description"
+            rows="3"
+            type="text"
+            class="text-sm"
+            :placeholder="
+              $t(
+                'INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.DESCRIPTION.PLACEHOLDER'
+              )
+            "
+          />
+        </label>
+        <label :class="{ error: $v.teamId.$error }">
+          {{ $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.TEAM.LABEL') }}
+          <select
+            v-model="teamId"
+            :styles="inputStyles"
+            @change="onChangeTeam($event)"
+          >
+            <option v-for="item in teams" :key="item.name" :value="item.id">
+              {{ item.name }}
+            </option>
+          </select>
+          <span v-if="$v.teamId.$error" class="message">
+            {{
+              $t(
+                'INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.TEAM.REQUIRED_ERROR'
+              )
+            }}
+          </span>
+        </label>
+        <label>
+          {{
+            $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.ASSIGNEE.LABEL')
+          }}
+          <select v-model="assigneeId" :styles="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="labelId" :styles="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="priority" :styles="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="projectId" :styles="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="stateId" :styles="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"
+            @click.prevent="onClose"
+          >
+            {{ $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.CANCEL') }}
+          </woot-button>
+          <woot-button
+            :is-disabled="isSubmitDisabled"
+            class="px-4 rounded-xl"
+            :is-loading="isCreating"
+            @click.prevent="createIssue"
+          >
+            {{ $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.CREATE') }}
+          </woot-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import alertMixin from 'shared/mixins/alertMixin';
+import LinearAPI from 'dashboard/api/integrations/linear';
+
+import validations from './validations';
+
+export default {
+  mixins: [alertMixin],
+  props: {
+    accountId: {
+      type: [Number, String],
+      required: true,
+    },
+    conversationId: {
+      type: [Number, String],
+      required: true,
+    },
+  },
+  data() {
+    return {
+      title: '',
+      description: '',
+      teamId: '',
+      assigneeId: '',
+      projectId: '',
+      stateId: '',
+      labelId: '',
+      priority: 0,
+      teams: [],
+      assignees: [],
+      projects: [],
+      labels: [],
+      statuses: [],
+      priorities: [
+        {
+          id: 0,
+          name: 'No priority',
+        },
+        {
+          id: 1,
+          name: 'Urgent',
+        },
+        {
+          id: 2,
+          name: 'High',
+        },
+        {
+          id: 3,
+          name: 'Normal',
+        },
+        {
+          id: 4,
+          name: 'Low',
+        },
+      ],
+      isCreating: false,
+      searchResults: [
+        {
+          id: 1,
+          title: 'Test',
+        },
+      ],
+      inputStyles: {
+        borderRadius: '12px',
+        padding: '6px 12px',
+        fontSize: '14px',
+      },
+    };
+  },
+  validations,
+  computed: {
+    isSubmitDisabled() {
+      return this.$v.title.$invalid || this.isCreating;
+    },
+  },
+  mounted() {
+    this.getTeams();
+  },
+  methods: {
+    onClose() {
+      this.$emit('close');
+    },
+    onChangeTeam(event) {
+      this.teamId = event.target.value;
+      this.assigneeId = '';
+      this.stateId = '';
+      this.labelId = '';
+      this.getTeamEntities();
+    },
+    async getTeams() {
+      try {
+        const response = await LinearAPI.getTeams();
+        this.teams = response.data;
+      } catch (error) {
+        this.showAlert(
+          this.$t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.LOADING_TEAM_ERROR')
+        );
+      } finally {
+        this.isLoading = false;
+      }
+    },
+    async getTeamEntities() {
+      try {
+        const response = await LinearAPI.getTeamEntities(this.teamId);
+        const { users, labels, projects, states } = response.data;
+        this.assignees = users;
+        this.labels = labels;
+        this.statuses = states;
+        this.projects = projects;
+      } catch (error) {
+        this.showAlert(
+          this.$t(
+            'INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.LOADING_TEAM_ENTITIES_ERROR'
+          )
+        );
+      } finally {
+        this.isLoading = false;
+      }
+    },
+    async createIssue() {
+      this.$v.$touch();
+      if (this.$v.$invalid) {
+        return;
+      }
+      const payload = {
+        team_id: this.teamId,
+        title: this.title,
+      };
+      if (this.description) {
+        payload.description = this.description;
+      }
+      if (this.assigneeId) {
+        payload.assignee_id = this.assigneeId;
+      }
+      if (this.projectId) {
+        payload.project_id = this.projectId;
+      }
+      if (this.stateId) {
+        payload.state_id = this.stateId;
+      }
+      if (this.priority) {
+        payload.priority = this.priority;
+      }
+      if (this.labelId) {
+        payload.label_ids = [this.labelId];
+      }
+      try {
+        this.isCreating = true;
+        const response = await LinearAPI.createIssue(payload);
+        const { id: issueId } = response.data;
+        await LinearAPI.link_issue(this.conversationId, issueId);
+        this.showAlert(
+          this.$t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.CREATE_SUCCESS')
+        );
+        this.onClose();
+      } catch (error) {
+        this.showAlert(
+          this.$t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.CREATE_ERROR')
+        );
+      } finally {
+        this.isCreating = false;
+      }
+    },
+  },
+};
+</script>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/linear/IssueItem.vue b/app/javascript/dashboard/routes/dashboard/conversation/linear/IssueItem.vue
new file mode 100644
index 000000000..d51868513
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/conversation/linear/IssueItem.vue
@@ -0,0 +1,144 @@
+<template>
+  <div class="flex flex-col gap-2">
+    <div class="flex flex-col gap-2">
+      <div class="flex items-center justify-between group">
+        <a
+          :href="issue.link"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="inline-block rounded-sm mb-0 break-all py-0.5 text-primary-600"
+        >
+          {{ `${issue.identifier}  ${issue.title}` }}
+        </a>
+        <woot-button
+          size="small"
+          variant="clear"
+          color-scheme="secondary"
+          class="!px-2 hover:!bg-transparent hidden dark:hover:!bg-transparent underline group-hover:block"
+          @click="unlinkIssue"
+        >
+          {{ $t('INTEGRATION_SETTINGS.LINEAR.UNLINK.TITLE') }}
+        </woot-button>
+      </div>
+
+      <span class="text-sm font-normal text-slate-900 dark:text-slate-25">
+        {{ issue.description }}
+      </span>
+    </div>
+
+    <div class="flex justify-between w-full">
+      <span
+        class="text-sm sticky top-0 h-fit font-normal tracking-[-0.6%] min-w-[140px] truncate text-slate-600 dark:text-slate-200"
+      >
+        {{ $t('INTEGRATION_SETTINGS.LINEAR.ISSUE.STATUS') }}
+      </span>
+      <div class="flex flex-col w-full gap-2">
+        <span
+          class="text-sm font-normal text-left text-slate-900 dark:text-slate-25 tabular-nums"
+        >
+          {{ issue.state.name }}
+        </span>
+      </div>
+    </div>
+
+    <div class="flex justify-between w-full">
+      <span
+        class="text-sm sticky top-0 h-fit font-normal tracking-[-0.6%] min-w-[140px] truncate text-slate-600 dark:text-slate-200"
+      >
+        {{ $t('INTEGRATION_SETTINGS.LINEAR.ISSUE.PRIORITY') }}
+      </span>
+      <div class="flex flex-col w-full gap-2">
+        <span
+          class="text-sm font-normal text-left text-slate-900 dark:text-slate-25 tabular-nums"
+        >
+          {{ priorityLabel }}
+        </span>
+      </div>
+    </div>
+    <div class="flex justify-between w-full">
+      <span
+        class="text-sm sticky top-0 h-fit font-normal tracking-[-0.6%] min-w-[140px] truncate text-slate-600 dark:text-slate-200"
+      >
+        {{ $t('INTEGRATION_SETTINGS.LINEAR.ISSUE.ASSIGNEE') }}
+      </span>
+      <div class="flex flex-col w-full gap-2">
+        <span
+          class="text-sm font-normal text-left text-slate-900 dark:text-slate-25 tabular-nums"
+        >
+          {{ assigneeName }}
+        </span>
+      </div>
+    </div>
+    <div class="flex justify-between w-full">
+      <span
+        class="text-sm sticky top-0 h-fit font-normal tracking-[-0.6%] min-w-[140px] truncate text-slate-600 dark:text-slate-200"
+      >
+        {{ $t('INTEGRATION_SETTINGS.LINEAR.ISSUE.LABELS') }}
+      </span>
+      <div class="flex flex-col w-full gap-2">
+        <span
+          class="text-sm font-normal text-left text-slate-900 dark:text-slate-25 tabular-nums"
+        >
+          {{ labels }}
+        </span>
+      </div>
+    </div>
+    <div class="flex justify-between w-full">
+      <span
+        class="text-sm sticky top-0 h-fit font-normal tracking-[-0.6%] min-w-[140px] truncate text-slate-600 dark:text-slate-200"
+      >
+        {{ $t('INTEGRATION_SETTINGS.LINEAR.ISSUE.CREATED_AT') }}
+      </span>
+      <div class="flex flex-col w-full gap-2">
+        <span
+          class="text-sm font-normal text-left text-slate-900 dark:text-slate-25 tabular-nums"
+        >
+          {{ formatDate(issue.createdAt) }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { format } from 'date-fns';
+const priorityMap = {
+  0: 'Low',
+  1: 'Medium',
+  2: 'High',
+  3: 'Urgent',
+};
+export default {
+  props: {
+    issue: {
+      type: Object,
+      required: true,
+    },
+    linkId: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    priorityLabel() {
+      return priorityMap[this.issue.priority];
+    },
+    assigneeName() {
+      return this.issue.assignee ? this.issue.assignee.name : '---';
+    },
+    labels() {
+      return this.issue.labels.nodes.length
+        ? this.issue.labels.nodes.map(label => label.name).join(', ')
+        : '---';
+    },
+  },
+  methods: {
+    unlinkIssue() {
+      this.$emit('unlink-issue', this.linkId);
+    },
+    formatDate(timestamp) {
+      return format(new Date(timestamp), 'MMM dd, hh:mm a');
+    },
+  },
+};
+</script>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/linear/index.vue b/app/javascript/dashboard/routes/dashboard/conversation/linear/index.vue
new file mode 100644
index 000000000..861b4b8f0
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/conversation/linear/index.vue
@@ -0,0 +1,108 @@
+<template>
+  <div class="flex flex-col">
+    <div class="flex flex-row gap-2">
+      <woot-button
+        v-if="!isLoading && !issues.length"
+        variant="smooth"
+        icon="add"
+        size="tiny"
+        @click="showCreateIssuePopup"
+      >
+        {{ $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK_BUTTON') }}
+      </woot-button>
+    </div>
+    <div v-if="isLoading" class="flex items-center justify-center">
+      <span class="text-sm font-medium text-slate-800 dark:text-slate-100">
+        {{ $t('INTEGRATION_SETTINGS.LINEAR.LOADING') }}
+      </span>
+    </div>
+
+    <div v-if="!isLoading && issues.length" class="flex flex-col gap-2">
+      <issue-item
+        v-for="issue in issues"
+        :key="issue.issue.id"
+        :issue="issue.issue"
+        :link-id="issue.id"
+        :conversation-id="conversationId"
+        @unlink-issue="unlinkIssue"
+      />
+    </div>
+    <woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">
+      <add-issue
+        :conversation-id="conversationId"
+        :account-id="currentAccountId"
+        @close="hideAddPopup"
+      />
+    </woot-modal>
+  </div>
+</template>
+<script>
+import { mapGetters } from 'vuex';
+import IssueItem from './IssueItem.vue';
+import accountMixin from 'dashboard/mixins/account.js';
+import alertMixin from 'shared/mixins/alertMixin';
+import AddIssue from './AddIssue.vue';
+import LinearAPI from 'dashboard/api/integrations/linear';
+
+export default {
+  components: {
+    IssueItem,
+    AddIssue,
+  },
+  mixins: [accountMixin, alertMixin],
+  props: {
+    conversationId: {
+      type: [Number, String],
+      required: true,
+    },
+  },
+  data() {
+    return {
+      isLoading: false,
+      showAddPopup: false,
+      issues: [],
+    };
+  },
+  computed: {
+    ...mapGetters({
+      currentAccountId: 'getCurrentAccountId',
+    }),
+  },
+  mounted() {
+    this.loadIssues();
+  },
+  methods: {
+    showCreateIssuePopup() {
+      this.showAddPopup = true;
+    },
+    hideAddPopup() {
+      this.showAddPopup = false;
+      this.loadIssues();
+    },
+    async loadIssues() {
+      try {
+        this.isLoading = true;
+        const response = await LinearAPI.getLinkedIssue(this.conversationId);
+        this.issues = response.data;
+      } catch (error) {
+        this.showAlert(
+          this.$t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.LOADING_ERROR')
+        );
+      } finally {
+        this.isLoading = false;
+      }
+    },
+    async unlinkIssue(linkId) {
+      try {
+        await LinearAPI.unlinkIssue(linkId);
+        this.issues = [];
+        this.showAlert(this.$t('INTEGRATION_SETTINGS.LINEAR.UNLINK.SUCCESS'));
+      } catch (error) {
+        this.showAlert(
+          this.$t('INTEGRATION_SETTINGS.LINEAR.UNLINK.DELETE_ERROR')
+        );
+      }
+    },
+  },
+};
+</script>