feat: add or link issue

app/javascript/dashboard/api/integrations/linear.js

@@ -37,6 +37,10 @@ class LinearAPI extends ApiClient {
       link_id: linkId,
     });
   }
+
+  searchIssues(query) {
+    return axios.get(`${this.url}/search_issue?q=${query}`);
+  }
 }
 
 export default new LinearAPI();

app/javascript/dashboard/i18n/locale/en/integrations.json

@@ -208,6 +208,8 @@
       "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",
+      "CREATE": "Create",
+      "LINK": "Link",
       "ADD_OR_LINK": {
         "TITLE": "Create/link linear issue",
         "DESCRIPTION": "Create or link a linear issue to the conversation",

app/javascript/dashboard/routes/dashboard/conversation/linear/CreateIssue.vue

@@ -0,0 +1,286 @@
+<template>
+  <div @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>
+</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: [],
+      selectedTabIndex: 0,
+      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');
+    },
+    onClickTabChange(index) {
+      this.selectedTabIndex = index;
+    },
+    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;
+      }
+    },
+    handleAgentsFilterSelection() {},
+  },
+};
+</script>

app/javascript/dashboard/routes/dashboard/conversation/linear/CreateOrLinkIssue.vue

@@ -8,131 +8,28 @@
     />
 
     <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'
-              )
-            "
+      <div class="flex flex-col px-8 pb-4">
+        <woot-tabs :index="selectedTabIndex" @change="onClickTabChange">
+          <woot-tabs-item
+            v-for="tab in tabs"
+            :key="tab.key"
+            :name="tab.name"
+            :show-badge="false"
           />
-        </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>
+        </woot-tabs>
+      </div>
+      <div v-if="selectedTabIndex === 0" class="flex flex-col px-8 pb-4">
+        <create-issue
+          :account-id="accountId"
+          :conversation-id="conversationId"
+        />
+      </div>
 
-        <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 v-if="selectedTabIndex === 1" class="flex flex-col px-8 pb-4">
+        <link-issue
+          :conversation-id="conversationId"
+          @agents-filter-selection="handleAgentsFilterSelection"
+        />
       </div>
     </div>
   </div>
@@ -141,10 +38,16 @@
 <script>
 import alertMixin from 'shared/mixins/alertMixin';
 import LinearAPI from 'dashboard/api/integrations/linear';
+import LinkIssue from './LinkIssue';
+import CreateIssue from './CreateIssue';
 
 import validations from './validations';
 
 export default {
+  components: {
+    LinkIssue,
+    CreateIssue,
+  },
   mixins: [alertMixin],
   props: {
     accountId: {
@@ -171,6 +74,7 @@ export default {
       projects: [],
       labels: [],
       statuses: [],
+      selectedTabIndex: 0,
       priorities: [
         {
           id: 0,
@@ -212,6 +116,18 @@ export default {
     isSubmitDisabled() {
       return this.$v.title.$invalid || this.isCreating;
     },
+    tabs() {
+      return [
+        {
+          key: 0,
+          name: this.$t('INTEGRATION_SETTINGS.LINEAR.CREATE'),
+        },
+        {
+          key: 1,
+          name: this.$t('INTEGRATION_SETTINGS.LINEAR.LINK'),
+        },
+      ];
+    },
   },
   mounted() {
     this.getTeams();
@@ -220,6 +136,9 @@ export default {
     onClose() {
       this.$emit('close');
     },
+    onClickTabChange(index) {
+      this.selectedTabIndex = index;
+    },
     onChangeTeam(event) {
       this.teamId = event.target.value;
       this.assigneeId = '';
@@ -301,6 +220,7 @@ export default {
         this.isCreating = false;
       }
     },
+    handleAgentsFilterSelection() {},
   },
 };
 </script>

app/javascript/dashboard/routes/dashboard/conversation/linear/LinkIssue.vue

@@ -0,0 +1,123 @@
+<template>
+  <div>
+    <div class="multiselect-wrap--small">
+      <multiselect
+        v-model="selectedOptions"
+        class="no-margin"
+        placeholder="Type to search"
+        select-label="Select issue"
+        label="name"
+        track-by="id"
+        :options="options"
+        :option-height="24"
+        :show-labels="false"
+        @search-change="handleSearchChange"
+        @select="handleInput"
+      >
+        <template #noResult>
+          {{ emptyText }}
+        </template>
+        <template #noOptions> No options </template>
+      </multiselect>
+    </div>
+    <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="isLinking"
+        @click.prevent="linkIssue"
+      >
+        {{ $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.CREATE') }}
+      </woot-button>
+    </div>
+  </div>
+</template>
+<script>
+import alertMixin from 'shared/mixins/alertMixin';
+import LinearAPI from 'dashboard/api/integrations/linear';
+
+export default {
+  mixins: [alertMixin],
+  props: {
+    conversationId: {
+      type: [Number, String],
+      required: true,
+    },
+  },
+  data() {
+    return {
+      selectedOptions: [],
+      options: [],
+      inputStyles: {
+        borderRadius: '12px',
+        padding: '6px 12px',
+        fontSize: '14px',
+      },
+      isFetching: false,
+      isLinking: false,
+    };
+  },
+  computed: {
+    emptyText() {
+      if (this.isFetching) {
+        return 'Loading...';
+      }
+      return 'No results found';
+    },
+    isSubmitDisabled() {
+      return !this.selectedOptions || this.isLinking;
+    },
+  },
+  methods: {
+    onClose() {
+      this.$emit('close');
+    },
+    async handleSearchChange(value) {
+      if (!value) return;
+
+      try {
+        this.isFetching = true;
+        const response = await LinearAPI.searchIssues(value);
+        const options = response.data.map(issue => ({
+          id: issue.id,
+          name: issue.title,
+          description: issue.description,
+        }));
+        this.options = options;
+      } catch (error) {
+        this.showAlert(
+          this.$t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.LOADING_TEAM_ERROR')
+        );
+      } finally {
+        this.isFetching = false;
+      }
+    },
+    handleInput() {
+      this.$emit('agents-filter-selection', this.selectedOptions);
+    },
+    async linkIssue() {
+      const { id: issueId } = this.selectedOptions;
+      try {
+        this.isLinking = true;
+        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.isLinking = false;
+      }
+    },
+  },
+};
+</script>

app/javascript/dashboard/routes/dashboard/conversation/linear/index.vue

@@ -28,7 +28,7 @@
       />
     </div>
     <woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">
-      <add-issue
+      <create-or-link-issue
         :conversation-id="conversationId"
         :account-id="currentAccountId"
         @close="hideAddPopup"
@@ -41,13 +41,13 @@ 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 CreateOrLinkIssue from './CreateOrLinkIssue.vue';
 import LinearAPI from 'dashboard/api/integrations/linear';
 
 export default {
   components: {
     IssueItem,
-    AddIssue,
+    CreateOrLinkIssue,
   },
   mixins: [accountMixin, alertMixin],
   props: {