chore: code cleanup

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

@@ -26,14 +26,12 @@
         <create-issue
           :account-id="accountId"
           :conversation-id="conversationId"
+          @close="onClose"
         />
       </div>
 
-      <div v-if="selectedTabIndex === 1" class="flex flex-col px-8 pb-4">
-        <link-issue
-          :conversation-id="conversationId"
-          @agents-filter-selection="handleAgentsFilterSelection"
-        />
+      <div v-else class="flex flex-col px-8 pb-4">
+        <link-issue :conversation-id="conversationId" @close="onClose" />
       </div>
     </div>
   </div>
@@ -41,7 +39,6 @@
 
 <script>
 import alertMixin from 'shared/mixins/alertMixin';
-import LinearAPI from 'dashboard/api/integrations/linear';
 import LinkIssue from './LinkIssue';
 import CreateIssue from './CreateIssue';
 
@@ -65,61 +62,11 @@ export default {
   },
   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;
-    },
     tabs() {
       return [
         {
@@ -133,9 +80,6 @@ export default {
       ];
     },
   },
-  mounted() {
-    this.getTeams();
-  },
   methods: {
     onClose() {
       this.$emit('close');
@@ -143,88 +87,6 @@ export default {
     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/LinkIssue.vue

@@ -61,6 +61,7 @@ export default {
       },
       isFetching: false,
       isLinking: false,
+      searchQuery: '',
     };
   },
   computed: {
@@ -68,6 +69,9 @@ export default {
       if (this.isFetching) {
         return 'Loading...';
       }
+      if (this.searchQuery) {
+        return '';
+      }
       return 'No results found';
     },
     isSubmitDisabled() {
@@ -80,7 +84,7 @@ export default {
     },
     async handleSearchChange(value) {
       if (!value) return;
-
+      this.searchQuery = value;
       try {
         this.isFetching = true;
         const response = await LinearAPI.searchIssues(value);
@@ -109,6 +113,7 @@ export default {
         this.showAlert(
           this.$t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.CREATE_SUCCESS')
         );
+        this.searchQuery = '';
         this.onClose();
       } catch (error) {
         this.showAlert(

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

@@ -2,7 +2,7 @@
   <div class="flex flex-col">
     <div class="flex flex-row gap-2">
       <woot-button
-        v-if="!isLoading && !issues.length"
+        v-if="shouldShowAddButton"
         variant="smooth"
         icon="add"
         size="tiny"
@@ -11,31 +11,29 @@
         {{ $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK_BUTTON') }}
       </woot-button>
     </div>
-    <div v-if="isLoading" class="flex items-center justify-center">
+    <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="!isLoading && issues.length" class="flex flex-col gap-2">
+    <div v-if="shouldShowItem" class="flex flex-col gap-2">
       <issue-item
-        v-for="issue in issues"
-        :key="issue.issue.id"
-        :issue="issue.issue"
-        :link-id="issue.id"
+        :issue="linkedIssue.issue"
+        :link-id="linkedIssue.id"
         :conversation-id="conversationId"
         @unlink-issue="unlinkIssue"
       />
     </div>
     <woot-modal
-      :show.sync="showAddPopup"
-      :on-close="hideAddPopup"
+      :show.sync="showPopup"
+      :on-close="closePopup"
       class="!items-start [&>div]:!top-12"
     >
       <create-or-link-issue
         :conversation-id="conversationId"
         :account-id="currentAccountId"
-        @close="hideAddPopup"
+        @close="closePopup"
       />
     </woot-modal>
   </div>
@@ -62,44 +60,51 @@ export default {
   },
   data() {
     return {
-      isLoading: false,
-      showAddPopup: false,
-      issues: [],
+      isFetching: false,
+      showPopup: false,
+      linkedIssue: null,
     };
   },
   computed: {
     ...mapGetters({
       currentAccountId: 'getCurrentAccountId',
     }),
+    shouldShowAddButton() {
+      return !this.isFetching && !this.linkedIssue;
+    },
+    shouldShowItem() {
+      return !this.isFetching && this.linkedIssue;
+    },
   },
   mounted() {
-    this.loadIssues();
+    this.loadLinkedIssue();
   },
   methods: {
     showCreateIssuePopup() {
-      this.showAddPopup = true;
+      this.showPopup = true;
     },
-    hideAddPopup() {
-      this.showAddPopup = false;
-      this.loadIssues();
+    closePopup() {
+      this.showPopup = false;
+      this.loadLinkedIssue();
     },
-    async loadIssues() {
+    async loadLinkedIssue() {
       try {
-        this.isLoading = true;
+        this.isFetching = true;
         const response = await LinearAPI.getLinkedIssue(this.conversationId);
-        this.issues = response.data;
+        const { issues } = response.data;
+        this.linkedIssue = issues.length ? issues[0] : null;
       } catch (error) {
         this.showAlert(
           this.$t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.LOADING_ERROR')
         );
       } finally {
-        this.isLoading = false;
+        this.isFetching = false;
       }
     },
     async unlinkIssue(linkId) {
       try {
         await LinearAPI.unlinkIssue(linkId);
-        this.issues = [];
+        this.linkedIssue = null;
         this.showAlert(this.$t('INTEGRATION_SETTINGS.LINEAR.UNLINK.SUCCESS'));
       } catch (error) {
         this.showAlert(