From 0e11dac4715b10f918b7bcabc4c1b97bcf3f83fb Mon Sep 17 00:00:00 2001
From: Muhsin Keloth <muhsinkeramam@gmail.com>
Date: Fri, 17 May 2024 12:06:19 +0530
Subject: [PATCH] feat: create basic front end

---
 .../conversation/ConversationHeader.vue       |  15 +++
 .../conversation/linear/CreateIssue.vue       |   0
 .../conversation/linear/CreateOrLinkIssue.vue |   0
 .../conversation/linear/IssueItem.vue         |   4 +-
 .../linear/LinearIssueDetails.vue             | 100 ++++++++++++++++++
 .../conversation/linear/LinkIssue.vue         |   0
 .../widgets}/conversation/linear/index.vue    |  77 ++++++--------
 .../conversation/linear/validations.js        |   0
 .../dashboard/conversation/ContactPanel.vue   |  21 ----
 .../FluentIcon/dashboard-icons.json           |   4 +-
 lib/linear_queries.rb                         |   5 +-
 .../images/dashboard/integration/linear.svg   |   0
 12 files changed, 157 insertions(+), 69 deletions(-)
 rename app/javascript/dashboard/{routes/dashboard => components/widgets}/conversation/linear/CreateIssue.vue (100%)
 rename app/javascript/dashboard/{routes/dashboard => components/widgets}/conversation/linear/CreateOrLinkIssue.vue (100%)
 rename app/javascript/dashboard/{routes/dashboard => components/widgets}/conversation/linear/IssueItem.vue (97%)
 create mode 100644 app/javascript/dashboard/components/widgets/conversation/linear/LinearIssueDetails.vue
 rename app/javascript/dashboard/{routes/dashboard => components/widgets}/conversation/linear/LinkIssue.vue (100%)
 rename app/javascript/dashboard/{routes/dashboard => components/widgets}/conversation/linear/index.vue (59%)
 rename app/javascript/dashboard/{routes/dashboard => components/widgets}/conversation/linear/validations.js (100%)
 create mode 100644 public/assets/images/dashboard/integration/linear.svg

diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
index fc936e683..ae60c956d 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
@@ -71,6 +71,10 @@
         :class="{ 'justify-end': isContactPanelOpen }"
       >
         <SLA-card-label v-if="hasSlaPolicyId" :chat="chat" show-extended-info />
+        <linear
+          v-if="isLinearIntegrationEnabled"
+          :conversation-id="currentChat.id"
+        />
         <more-actions :conversation-id="currentChat.id" />
       </div>
     </div>
@@ -89,6 +93,8 @@ import SLACardLabel from './components/SLACardLabel.vue';
 import wootConstants from 'dashboard/constants/globals';
 import { conversationListPageURL } from 'dashboard/helper/URLHelper';
 import { snoozedReopenTime } from 'dashboard/helper/snoozeHelpers';
+import { FEATURE_FLAGS } from 'dashboard/featureFlags';
+import Linear from './linear/index.vue';
 
 export default {
   components: {
@@ -97,6 +103,7 @@ export default {
     MoreActions,
     Thumbnail,
     SLACardLabel,
+    Linear,
   },
   mixins: [inboxMixin, agentMixin, keyboardEventListenerMixins],
   props: {
@@ -121,6 +128,8 @@ export default {
     ...mapGetters({
       uiFlags: 'inboxAssignableAgents/getUIFlags',
       currentChat: 'getSelectedChat',
+      accountId: 'getCurrentAccountId',
+      isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
     }),
     chatMetadata() {
       return this.chat.meta;
@@ -178,6 +187,12 @@ export default {
     hasSlaPolicyId() {
       return this.chat?.sla_policy_id;
     },
+    isLinearIntegrationEnabled() {
+      return this.isFeatureEnabledonAccount(
+        this.accountId,
+        FEATURE_FLAGS.LINEAR
+      );
+    },
   },
 
   methods: {
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/linear/CreateIssue.vue b/app/javascript/dashboard/components/widgets/conversation/linear/CreateIssue.vue
similarity index 100%
rename from app/javascript/dashboard/routes/dashboard/conversation/linear/CreateIssue.vue
rename to app/javascript/dashboard/components/widgets/conversation/linear/CreateIssue.vue
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/linear/CreateOrLinkIssue.vue b/app/javascript/dashboard/components/widgets/conversation/linear/CreateOrLinkIssue.vue
similarity index 100%
rename from app/javascript/dashboard/routes/dashboard/conversation/linear/CreateOrLinkIssue.vue
rename to app/javascript/dashboard/components/widgets/conversation/linear/CreateOrLinkIssue.vue
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/linear/IssueItem.vue b/app/javascript/dashboard/components/widgets/conversation/linear/IssueItem.vue
similarity index 97%
rename from app/javascript/dashboard/routes/dashboard/conversation/linear/IssueItem.vue
rename to app/javascript/dashboard/components/widgets/conversation/linear/IssueItem.vue
index 0e1adb935..5410a54ce 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/linear/IssueItem.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/linear/IssueItem.vue
@@ -21,9 +21,9 @@
         </woot-button>
       </div>
 
-      <span class="text-sm font-normal text-slate-900 dark:text-slate-25">
+      <!-- <span class="text-sm font-normal text-slate-900 dark:text-slate-25">
         {{ issue.description }}
-      </span>
+      </span> -->
     </div>
 
     <div class="flex justify-between w-full">
diff --git a/app/javascript/dashboard/components/widgets/conversation/linear/LinearIssueDetails.vue b/app/javascript/dashboard/components/widgets/conversation/linear/LinearIssueDetails.vue
new file mode 100644
index 000000000..0374a3ee7
--- /dev/null
+++ b/app/javascript/dashboard/components/widgets/conversation/linear/LinearIssueDetails.vue
@@ -0,0 +1,100 @@
+<script setup>
+import { format } from 'date-fns';
+import UserAvatarWithName from 'dashboard/components/widgets/UserAvatarWithName.vue';
+import { computed } from 'vue';
+const priorityMap = {
+  0: 'Low',
+  1: 'Medium',
+  2: 'High',
+  3: 'Urgent',
+};
+const props = defineProps({
+  issue: {
+    type: Object,
+    required: true,
+  },
+});
+
+const formattedDate = computed(() => {
+  return format(new Date(props.issue.createdAt), 'hh:mm a, MMM dd');
+});
+
+const assignee = computed(() => {
+  if (!props.issue.assignee) {
+    return null;
+  }
+  return {
+    name: props.issue.assignee.name,
+    thumbnail: props.issue.assignee.avatarUrl,
+  };
+});
+
+const labels = computed(() => {
+  if (props.issue.labels.nodes.length) {
+    return props.issue.labels.nodes;
+  }
+  return [];
+});
+const priorityLabel = computed(() => {
+  return priorityMap[props.issue.priority];
+});
+</script>
+<template>
+  <div
+    class="absolute flex flex-col items-start bg-[#fdfdfd] dark:bg-slate-800 z-50 p-4 border border-solid border-slate-75 dark:border-slate-700 w-[384px] rounded-xl gap-4 max-h-96 overflow-auto"
+  >
+    <div class="flex flex-col items-start gap-2">
+      <div
+        class="flex items-center justify-center gap-1 px-2 py-1 font-medium 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>
+      <span class="text-sm font-medium text-ash-900">
+        {{ issue.title }}
+      </span>
+      <span class="text-sm text-ash-800">
+        {{
+          issue.description.length > 130
+            ? issue.description.slice(0, 130) + '...'
+            : issue.description
+        }}
+      </span>
+    </div>
+    <div class="flex flex-row gap-2 divide-x divide-ash-200">
+      <user-avatar-with-name v-if="assignee" :user="assignee" />
+      <div class="flex items-center gap-1 px-2">
+        <fluent-icon icon="status" size="14" />
+        <h6 class="my-0 text-xs text-slate-600">{{ issue.state.name }}</h6>
+      </div>
+      <div class="flex items-center gap-1 px-2">
+        <fluent-icon icon="priority-high" size="14" view-box="0 0 14 14" />
+        <h6 class="my-0 text-xs text-slate-600">{{ priorityLabel }}</h6>
+      </div>
+    </div>
+    <div v-if="labels.length" class="flex items-center gap-1">
+      <woot-label
+        v-for="label in labels"
+        :key="label.id"
+        :title="label.name"
+        :description="label.description"
+        :color="label.color"
+        variant="smooth"
+        small
+      />
+    </div>
+
+    <div class="flex items-center">
+      <span class="text-xs text-ash-800">
+        {{ `Created at ${formattedDate}` }}
+      </span>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/linear/LinkIssue.vue b/app/javascript/dashboard/components/widgets/conversation/linear/LinkIssue.vue
similarity index 100%
rename from app/javascript/dashboard/routes/dashboard/conversation/linear/LinkIssue.vue
rename to app/javascript/dashboard/components/widgets/conversation/linear/LinkIssue.vue
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/linear/index.vue b/app/javascript/dashboard/components/widgets/conversation/linear/index.vue
similarity index 59%
rename from app/javascript/dashboard/routes/dashboard/conversation/linear/index.vue
rename to app/javascript/dashboard/components/widgets/conversation/linear/index.vue
index 94172d1dc..735dd73a8 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/linear/index.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/linear/index.vue
@@ -1,30 +1,23 @@
 <template>
-  <div class="flex flex-col">
-    <div class="flex flex-row gap-2">
-      <woot-button
-        v-if="shouldShowAddButton"
-        variant="smooth"
-        icon="add"
-        size="tiny"
-        @click="showCreateIssuePopup"
-      >
-        {{ $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK_BUTTON') }}
-      </woot-button>
-    </div>
-    <div v-if="isFetching" 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="shouldShowItem" class="flex flex-col gap-2">
-      <issue-item
-        :issue="linkedIssue.issue"
-        :link-id="linkedIssue.id"
-        :conversation-id="conversationId"
-        @unlink-issue="unlinkIssue"
+  <div class="relative" @mouseover="openSlaPopover()">
+    <woot-button
+      v-on-clickaway="closeSlaPopover"
+      variant="clear"
+      color-scheme="secondary"
+      @click="openSlaPopover()"
+    >
+      <fluent-icon
+        icon="linear"
+        size="19"
+        class="text-[#5E6AD2]"
+        view-box="0 0 19 19"
       />
-    </div>
+    </woot-button>
+    <linear-issue-details
+      v-if="showSlaPopoverCard"
+      :issue="linkedIssue.issue"
+      class="absolute right-0 top-[46px]"
+    />
     <woot-modal
       :show.sync="showPopup"
       :on-close="closePopup"
@@ -38,20 +31,18 @@
     </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 CreateOrLinkIssue from './CreateOrLinkIssue.vue';
+import LinearIssueDetails from './LinearIssueDetails.vue';
 import LinearAPI from 'dashboard/api/integrations/linear';
+import CreateOrLinkIssue from './CreateOrLinkIssue.vue';
 
 export default {
   components: {
-    IssueItem,
+    LinearIssueDetails,
     CreateOrLinkIssue,
   },
-  mixins: [accountMixin, alertMixin],
   props: {
     conversationId: {
       type: [Number, String],
@@ -60,20 +51,17 @@ export default {
   },
   data() {
     return {
-      isFetching: false,
-      showPopup: false,
       linkedIssue: null,
+      showSlaPopover: false,
+      showPopup: false,
     };
   },
   computed: {
     ...mapGetters({
       currentAccountId: 'getCurrentAccountId',
     }),
-    shouldShowAddButton() {
-      return !this.isFetching && !this.linkedIssue;
-    },
-    shouldShowItem() {
-      return !this.isFetching && this.linkedIssue;
+    showSlaPopoverCard() {
+      return this.showSlaPopover && this.linkedIssue;
     },
   },
   watch: {
@@ -87,23 +75,17 @@ export default {
     this.loadLinkedIssue();
   },
   methods: {
-    showCreateIssuePopup() {
-      this.showPopup = true;
-    },
     closePopup() {
       this.showPopup = false;
       this.loadLinkedIssue();
     },
     async loadLinkedIssue() {
       try {
-        this.isFetching = true;
         const response = await LinearAPI.getLinkedIssue(this.conversationId);
         const issues = response.data;
         this.linkedIssue = issues && issues.length ? issues[0] : null;
       } catch (error) {
         this.showAlert(this.$t('INTEGRATION_SETTINGS.LINEAR.LOADING_ERROR'));
-      } finally {
-        this.isFetching = false;
       }
     },
     async unlinkIssue(linkId) {
@@ -117,6 +99,13 @@ export default {
         );
       }
     },
+    openSlaPopover() {
+      if (!this.linkedIssue) this.showPopup = true;
+      this.showSlaPopover = true;
+    },
+    closeSlaPopover() {
+      this.showSlaPopover = false;
+    },
   },
 };
 </script>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/linear/validations.js b/app/javascript/dashboard/components/widgets/conversation/linear/validations.js
similarity index 100%
rename from app/javascript/dashboard/routes/dashboard/conversation/linear/validations.js
rename to app/javascript/dashboard/components/widgets/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 7c7b3b550..564bf8db5 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
@@ -23,18 +23,6 @@
           :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"
@@ -157,8 +145,6 @@ 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,
@@ -170,7 +156,6 @@ export default {
     ConversationParticipant,
     draggable,
     MacrosList,
-    Linear,
   },
   mixins: [alertMixin, uiSettingsMixin],
   props: {
@@ -226,12 +211,6 @@ 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/shared/components/FluentIcon/dashboard-icons.json b/app/javascript/shared/components/FluentIcon/dashboard-icons.json
index 60c691b7d..d13808a25 100644
--- a/app/javascript/shared/components/FluentIcon/dashboard-icons.json
+++ b/app/javascript/shared/components/FluentIcon/dashboard-icons.json
@@ -275,5 +275,7 @@
   "chevrons-right-outline": ["m6 17 5-5-5-5", "m13 17 5-5-5-5"],
   "chevron-right-single-outline": "m9 18 6-6-6-6",
   "avatar-upload-outline": "M19.754 11a.75.75 0 0 1 .743.648l.007.102v7a3.25 3.25 0 0 1-3.065 3.246l-.185.005h-11a3.25 3.25 0 0 1-3.244-3.066l-.006-.184V11.75a.75.75 0 0 1 1.494-.102l.006.102v7a1.75 1.75 0 0 0 1.607 1.745l.143.006h11A1.75 1.75 0 0 0 19 18.894l.005-.143V11.75a.75.75 0 0 1 .75-.75ZM6.22 7.216l4.996-4.996a.75.75 0 0 1 .976-.073l.084.072l5.005 4.997a.75.75 0 0 1-.976 1.134l-.084-.073l-3.723-3.716l.001 11.694a.75.75 0 0 1-.648.743l-.102.007a.75.75 0 0 1-.743-.648L11 16.255V4.558L7.28 8.277a.75.75 0 0 1-.976.073l-.084-.073a.75.75 0 0 1-.073-.977l.073-.084l4.996-4.996L6.22 7.216Z",
-  "text-copy-outline": "M5.503 4.627L5.5 6.75v10.504a3.25 3.25 0 0 0 3.25 3.25h8.616a2.25 2.25 0 0 1-2.122 1.5H8.75A4.75 4.75 0 0 1 4 17.254V6.75c0-.98.627-1.815 1.503-2.123M17.75 2A2.25 2.25 0 0 1 20 4.25v13a2.25 2.25 0 0 1-2.25 2.25h-9a2.25 2.25 0 0 1-2.25-2.25v-13A2.25 2.25 0 0 1 8.75 2zm0 1.5h-9a.75.75 0 0 0-.75.75v13c0 .414.336.75.75.75h9a.75.75 0 0 0 .75-.75v-13a.75.75 0 0 0-.75-.75"
+  "text-copy-outline": "M5.503 4.627L5.5 6.75v10.504a3.25 3.25 0 0 0 3.25 3.25h8.616a2.25 2.25 0 0 1-2.122 1.5H8.75A4.75 4.75 0 0 1 4 17.254V6.75c0-.98.627-1.815 1.503-2.123M17.75 2A2.25 2.25 0 0 1 20 4.25v13a2.25 2.25 0 0 1-2.25 2.25h-9a2.25 2.25 0 0 1-2.25-2.25v-13A2.25 2.25 0 0 1 8.75 2zm0 1.5h-9a.75.75 0 0 0-.75.75v13c0 .414.336.75.75.75h9a.75.75 0 0 0 .75-.75v-13a.75.75 0 0 0-.75-.75",
+  "linear-outline": "M1.17156 10.4618C1.14041 10.329 1.2986 10.2454 1.39505 10.3418L6.50679 15.4536C6.60323 15.55 6.5196 15.7082 6.38681 15.6771C3.80721 15.0719 1.77669 13.0414 1.17156 10.4618ZM1.00026 8.4131C0.997795 8.45277 1.01271 8.49149 1.0408 8.51959L8.32904 15.8078C8.35714 15.8359 8.39586 15.8509 8.43553 15.8484C8.76721 15.8277 9.09266 15.784 9.41026 15.7187C9.51729 15.6968 9.55447 15.5653 9.47721 15.488L1.36063 7.37142C1.28337 7.29416 1.15187 7.33134 1.12989 7.43837C1.06466 7.75597 1.02092 8.08142 1.00026 8.4131ZM1.58953 6.00739C1.56622 6.05972 1.57809 6.12087 1.6186 6.16139L10.6872 15.23C10.7278 15.2705 10.7889 15.2824 10.8412 15.2591C11.0913 15.1477 11.3336 15.0221 11.5672 14.8833C11.6445 14.8374 11.6564 14.7312 11.5929 14.6676L2.18099 5.25577C2.11742 5.1922 2.01121 5.20412 1.96529 5.28142C1.8265 5.51499 1.70091 5.75733 1.58953 6.00739ZM2.77222 4.37899C2.7204 4.32718 2.7172 4.24407 2.76602 4.18942C4.04913 2.75294 5.9156 1.84863 7.99327 1.84863C11.863 1.84863 15 4.98565 15 8.85536C15 10.933 14.0957 12.7995 12.6592 14.0826C12.6046 14.1314 12.5215 14.1282 12.4696 14.0764L2.77222 4.37899Z",
+  "status-outline":"m8.462 6.81l3.284 13.616c.178.737 1.211.775 1.443.054l3.257-10.122l.586 2.095a.75.75 0 0 0 .722.548h3.494a.75.75 0 0 0 0-1.5h-2.925l-1.105-3.95c-.2-.717-1.208-.736-1.436-.028l-3.203 9.957L9.224 3.574c-.182-.757-1.255-.769-1.454-.016l-2.1 7.943H2.75a.75.75 0 0 0 0 1.5h3.496a.75.75 0 0 0 .725-.558z"
 }
diff --git a/lib/linear_queries.rb b/lib/linear_queries.rb
index fb84885e6..4a467bd3e 100644
--- a/lib/linear_queries.rb
+++ b/lib/linear_queries.rb
@@ -74,8 +74,9 @@ module LinearQueries
               priority
               createdAt
               url
-              state {
+              assignee {
                 name
+                avatarUrl
               }
               state {
                 name
@@ -87,6 +88,8 @@ module LinearQueries
                 nodes{
                   id
                   name
+                  color
+                  description
                 }
               }
             }
diff --git a/public/assets/images/dashboard/integration/linear.svg b/public/assets/images/dashboard/integration/linear.svg
new file mode 100644
index 000000000..e69de29bb