From 19410dfa3db1c23e3158f24817051fa6eb100133 Mon Sep 17 00:00:00 2001
From: Muhsin Keloth <muhsinkeramam@gmail.com>
Date: Mon, 29 Apr 2024 13:27:18 +0530
Subject: [PATCH] feat: add linear

---
 .../dashboard/conversation/ContactPanel.vue   |  11 +
 .../conversation/linear/AddIssue.vue          | 242 ++++++++++++++++++
 .../conversation/linear/IssueItem.vue         | 132 ++++++++++
 .../dashboard/conversation/linear/index.vue   | 147 +++++++++++
 .../conversation/linear/validations.js        |  12 +
 5 files changed, 544 insertions(+)
 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
 create mode 100644 app/javascript/dashboard/routes/dashboard/conversation/linear/validations.js

diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue b/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
index aa5f5cc12..2955b86f6 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
@@ -23,6 +23,15 @@
           :key="element.name"
           class="bg-white dark:bg-gray-800"
         >
+          <div v-if="element.name === 'linear'" 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,6 +154,7 @@ import CustomAttributes from './customAttributes/CustomAttributes.vue';
 import draggable from 'vuedraggable';
 import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 import MacrosList from './Macros/List.vue';
+import Linear from './linear/index.vue';
 
 export default {
   components: {
@@ -157,6 +167,7 @@ export default {
     ConversationParticipant,
     draggable,
     MacrosList,
+    Linear,
   },
   mixins: [alertMixin, uiSettingsMixin],
   props: {
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..c9155c621
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/conversation/linear/AddIssue.vue
@@ -0,0 +1,242 @@
+<template>
+  <div class="flex flex-col h-auto overflow-auto">
+    <woot-modal-header
+      header-title="Create/link linear issue"
+      header-content="Quickly create/link a linear issue from this conversation"
+    />
+
+    <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"
+          label="Title"
+          class="w-full"
+          placeholder="Enter title"
+          type="text"
+          @blur="$v.title.$touch"
+        />
+        <label>
+          Description
+          <textarea
+            v-model="description"
+            rows="6"
+            type="text"
+            placeholder="Enter description"
+            @blur="$v.description.$touch"
+          />
+        </label>
+
+        <label>
+          Team
+          <select v-model="teamId" @change="onChangeTeam($event)">
+            <option v-for="item in teams" :key="item.name" :value="item.id">
+              {{ item.name }}
+            </option>
+          </select>
+        </label>
+        <label>
+          Assignee
+          <select v-model="assigneeId">
+            <option v-for="item in assignees" :key="item.id" :value="item.id">
+              {{ item.name }}
+            </option>
+          </select>
+        </label>
+
+        <label>
+          Priority
+          <select v-model="priority">
+            <option v-for="item in priorities" :key="item.id" :value="item.id">
+              {{ item.name }}
+            </option>
+          </select>
+        </label>
+
+        <label>
+          Label
+          <select v-model="labelId">
+            <option v-for="item in labels" :key="item.id" :value="item.id">
+              {{ item.name }}
+            </option>
+          </select>
+        </label>
+
+        <label>
+          Status
+          <select v-model="stateId">
+            <option v-for="item in statuses" :key="item.id" :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('SLA.FORM.CANCEL') }}
+          </woot-button>
+          <woot-button
+            :is-disabled="isSubmitDisabled"
+            class="px-4 rounded-xl"
+            :is-loading="isCreating"
+            @click.prevent="createIssue"
+          >
+            Create
+          </woot-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import alertMixin from 'shared/mixins/alertMixin';
+import { frontendURL, conversationUrl } from 'dashboard/helper/URLHelper.js';
+import { LinearClient } from '@linear/sdk';
+
+// const chatwootAPIKey = '';
+const localAPIKey = '';
+const linearClient = new LinearClient({
+  apiKey: localAPIKey,
+});
+// const BASE_URL = 'https:app.chatwoot.com';
+const BASE_URL = 'http://localhost:3000';
+
+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: '',
+      stateId: '',
+      labelId: '',
+      priority: 0,
+      teams: [],
+      assignees: [],
+      labels: [],
+      statuses: [],
+      searchTerm: '',
+      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',
+        },
+      ],
+    };
+  },
+  validations,
+  computed: {
+    isSubmitDisabled() {
+      return this.$v.title.$invalid || this.isCreating;
+    },
+  },
+  mounted() {
+    this.getTeams();
+    this.getAssignees();
+    this.getLabels();
+    this.getWorkflowStates();
+  },
+  methods: {
+    onClose() {
+      this.$emit('close');
+    },
+    onChangeTeam(event) {
+      this.teamId = event.target.value;
+      this.getLabels();
+      this.getWorkflowStates();
+      this.getAssignees();
+    },
+    async getTeams() {
+      const teams = await linearClient.teams();
+      this.teams = teams.nodes;
+    },
+    async getAssignees() {
+      const assignees = await linearClient.users();
+      this.assignees = assignees.nodes;
+    },
+    async getLabels() {
+      const labels = await linearClient.issueLabels({
+        teamId: this.teamId,
+      });
+      this.labels = labels.nodes;
+    },
+    async getWorkflowStates() {
+      const states = await linearClient.workflowStates();
+      this.statuses = states.nodes;
+    },
+    async createIssue() {
+      this.isCreating = true;
+      const response = await linearClient.createIssue({
+        teamId: this.teamId,
+        title: this.title,
+        description: this.description,
+        assigneeId: this.assigneeId,
+        priority: this.priority,
+        labelIds: this.labelId ? [this.labelId] : [],
+      });
+      const stringifyResponse = JSON.stringify(response);
+      const {
+        _issue: { id: issueId },
+      } = JSON.parse(stringifyResponse);
+      this.attachmentLinkURL(issueId);
+      this.showAlert('Linear issue created successfully');
+    },
+    async attachmentLinkURL(issueId) {
+      const url =
+        BASE_URL +
+        frontendURL(
+          conversationUrl({
+            accountId: this.accountId,
+            id: this.conversationId,
+          })
+        );
+      await linearClient.attachmentLinkURL(issueId, url);
+      this.isCreating = false;
+      this.onClose();
+    },
+
+    openSearch() {
+      this.showSearchBox = true;
+    },
+  },
+};
+</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..feaa48603
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/conversation/linear/IssueItem.vue
@@ -0,0 +1,132 @@
+<template>
+  <div class="flex flex-col gap-2">
+    <div class="flex flex-col">
+      <div class="flex items-center gap-1">
+        <!-- <woot-button
+          size="tiny"
+          variant="link"
+          color-scheme="secondary"
+          icon="delete"
+          @click="deleteIssue(issue)"
+        /> -->
+        <a
+          :href="issue.link"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="inline-block rounded-sm mb-0 break-all py-0.5 text-woot-600"
+        >
+          {{ issue.identifier }}
+        </a>
+        <woot-button
+          size="small"
+          variant="clear"
+          color-scheme="primary"
+          class="!px-2 hover:!bg-transparent dark:hover:!bg-transparent underline"
+          @click="deleteIssue(issue)"
+        >
+          Unlink
+        </woot-button>
+      </div>
+
+      <span class="text-sm font-medium text-slate-900 dark:text-slate-25">
+        {{ issue.title }}
+      </span>
+
+      <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"
+      >
+        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"
+        >
+          Todo
+        </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"
+      >
+        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"
+        >
+          {{ issue.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"
+      >
+        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"
+        >
+          Muhsin
+        </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"
+      >
+        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"
+        >
+          ---
+        </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"
+      >
+        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';
+export default {
+  props: {
+    issue: {
+      type: Object,
+      required: true,
+    },
+  },
+  methods: {
+    deleteIssue(issue) {
+      this.$emit('delete', issue);
+    },
+    formatDate(timestamp) {
+      return format(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..1ace24a49
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/conversation/linear/index.vue
@@ -0,0 +1,147 @@
+<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="shoeCreateIssuePopup"
+      >
+        Create or Link Issue
+      </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">
+        Loading..
+      </span>
+    </div>
+
+    <div v-if="!isLoading && issues.length" class="flex flex-col gap-2">
+      <issue-item
+        v-for="issue in issues"
+        :key="issue.id"
+        :issue="issue"
+        :conversation-id="conversationId"
+        @delete="deleteIssue"
+      />
+    </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 { LinearClient } from '@linear/sdk';
+
+import { mapGetters } from 'vuex';
+import IssueItem from './IssueItem.vue';
+import accountMixin from 'dashboard/mixins/account.js';
+import AddIssue from './AddIssue.vue';
+
+import { frontendURL, conversationUrl } from 'dashboard/helper/URLHelper.js';
+
+// const chatwootAPIKey = '';
+const localAPIKey = '';
+const linearClient = new LinearClient({
+  apiKey: localAPIKey,
+});
+// const BASE_URL = 'https:app.chatwoot.com';
+const BASE_URL = 'http://localhost:3000';
+
+export default {
+  components: {
+    IssueItem,
+    AddIssue,
+  },
+  mixins: [accountMixin],
+  props: {
+    conversationId: {
+      type: [Number, String],
+      required: true,
+    },
+  },
+  data() {
+    return {
+      isLoading: false,
+      showAddPopup: false,
+      issues: [],
+    };
+  },
+  computed: {
+    ...mapGetters({
+      currentAccountId: 'getCurrentAccountId',
+    }),
+  },
+  mounted() {
+    this.loadIssues();
+  },
+  methods: {
+    shoeCreateIssuePopup() {
+      this.showAddPopup = true;
+    },
+    hideAddPopup() {
+      this.showAddPopup = false;
+      this.loadIssues();
+    },
+    async loadIssues() {
+      const url =
+        BASE_URL +
+        frontendURL(
+          conversationUrl({
+            accountId: this.accountId,
+            id: this.conversationId,
+          })
+        );
+      this.isLoading = true;
+      linearClient.attachmentsForURL(url).then(issues => {
+        if (issues.nodes.length) {
+          issues.nodes.map(issue1 => {
+            const linearIssueId = issue1._issue.id;
+            const attachmentId = issue1.id;
+            if (linearIssueId) {
+              linearClient.issue(linearIssueId).then(issue2 => {
+                console.log('Issue:', issue2, attachmentId);
+                this.issues.push({
+                  id: issue2.id,
+                  title: issue2.title,
+                  link: issue2.url,
+                  identifier: issue2.identifier,
+                  attachmentId,
+                  ...issue2,
+                });
+                this.isLoading = false;
+              });
+            }
+          });
+        } else {
+          this.isLoading = false;
+          console.log('No issues');
+        }
+      });
+    },
+    async deleteIssue(issue) {
+      const index = this.issues.findIndex(i => i.id === issue.id);
+      if (index > -1) {
+        this.issues.splice(index, 1);
+      }
+      await linearClient.deleteAttachment(issue.attachmentId);
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.macros_list--empty-state {
+  padding: var(--space-slab);
+  p {
+    margin: 0;
+  }
+}
+.macros_add-button {
+  margin: var(--space-small) auto 0;
+}
+</style>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/linear/validations.js b/app/javascript/dashboard/routes/dashboard/conversation/linear/validations.js
new file mode 100644
index 000000000..9eba950bc
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/conversation/linear/validations.js
@@ -0,0 +1,12 @@
+import { required } from 'vuelidate/lib/validators';
+
+export default {
+  title: {
+    required,
+  },
+  description: {
+    required,
+  },
+  teamId: {},
+  assigneeId: {},
+};