From b3312220a8ff4c1f1d6dabda9f605215768687b7 Mon Sep 17 00:00:00 2001
From: JeremyWuuuuu <jeremyw@jihulab.com>
Date: Thu, 9 Sep 2021 10:34:53 +0800
Subject: [PATCH 1/4] Feature ZenTao integration: Extract Issue Detail Part

Extract duplicate code for Issue Detail component
---
 .../external_issue/issues_show/api.js         |  37 +++
 .../components/external_issues_show_root.vue  | 219 ++++++++++++++++++
 .../issues_show/components/note.vue           | 100 ++++++++
 .../components/sidebar/assignee.vue           |  86 +++++++
 .../sidebar/external_issues_sidebar_root.vue  | 170 ++++++++++++++
 .../components/sidebar/issue_due_date.vue     |  76 ++++++
 .../components/sidebar/issue_field.vue        | 141 +++++++++++
 .../sidebar/issue_field_dropdown.vue          |  66 ++++++
 .../external_issue/issues_show/constants.js   |  13 ++
 .../external_issues_show_bundle.js            |  43 ++++
 10 files changed, 951 insertions(+)
 create mode 100644 app/assets/javascripts/integrations/external_issue/issues_show/api.js
 create mode 100644 app/assets/javascripts/integrations/external_issue/issues_show/components/external_issues_show_root.vue
 create mode 100644 app/assets/javascripts/integrations/external_issue/issues_show/components/note.vue
 create mode 100644 app/assets/javascripts/integrations/external_issue/issues_show/components/sidebar/assignee.vue
 create mode 100644 app/assets/javascripts/integrations/external_issue/issues_show/components/sidebar/external_issues_sidebar_root.vue
 create mode 100644 app/assets/javascripts/integrations/external_issue/issues_show/components/sidebar/issue_due_date.vue
 create mode 100644 app/assets/javascripts/integrations/external_issue/issues_show/components/sidebar/issue_field.vue
 create mode 100644 app/assets/javascripts/integrations/external_issue/issues_show/components/sidebar/issue_field_dropdown.vue
 create mode 100644 app/assets/javascripts/integrations/external_issue/issues_show/constants.js
 create mode 100644 app/assets/javascripts/integrations/external_issue/issues_show/external_issues_show_bundle.js

diff --git a/app/assets/javascripts/integrations/external_issue/issues_show/api.js b/app/assets/javascripts/integrations/external_issue/issues_show/api.js
new file mode 100644
index 00000000000000..95fe28c90e2306
--- /dev/null
+++ b/app/assets/javascripts/integrations/external_issue/issues_show/api.js
@@ -0,0 +1,37 @@
+import axios from '~/lib/utils/axios_utils';
+
+export const fetchIssue = async (issuePath) => {
+  return axios.get(issuePath).then(({ data }) => {
+    return data;
+  });
+};
+
+export const fetchIssueStatuses = () => {
+  // We are using mock data here which should come from the backend
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      // eslint-disable-next-line @gitlab/require-i18n-strings
+      resolve([{ title: 'In Progress' }, { title: 'Done' }]);
+    }, 1000);
+  });
+};
+
+export const updateIssue = (issue, { labels = [], status = undefined }) => {
+  // We are using mock call here which should become a backend call
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      const addedLabels = labels.filter((label) => label.set);
+      const removedLabelsIds = labels.filter((label) => !label.set).map((label) => label.id);
+
+      const finalLabels = [...issue.labels, ...addedLabels].filter(
+        (label) => !removedLabelsIds.includes(label.id),
+      );
+
+      resolve({
+        ...issue,
+        ...(status ? { status } : {}),
+        labels: finalLabels,
+      });
+    }, 1000);
+  });
+};
diff --git a/app/assets/javascripts/integrations/external_issue/issues_show/components/external_issues_show_root.vue b/app/assets/javascripts/integrations/external_issue/issues_show/components/external_issues_show_root.vue
new file mode 100644
index 00000000000000..77d736fcc2fb24
--- /dev/null
+++ b/app/assets/javascripts/integrations/external_issue/issues_show/components/external_issues_show_root.vue
@@ -0,0 +1,219 @@
+<script>
+import {
+  GlAlert,
+  GlSprintf,
+  GlLink,
+  GlLoadingIcon,
+  GlBadge,
+  GlTooltipDirective as GlTooltip,
+} from '@gitlab/ui';
+import createFlash from '~/flash';
+import {
+  fetchIssue,
+  fetchIssueStatuses,
+  updateIssue,
+} from '~/integrations/external_issue/issues_show/api';
+
+import ExternalIssueSidebar from '~/integrations/external_issue/issues_show/components/sidebar/external_issues_sidebar_root.vue';
+import { issueStates, issueStateLabels } from '~/integrations/external_issue/issues_show/constants';
+import IssuableShow from '~/issuable_show/components/issuable_show_root.vue';
+import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
+import Note from './note.vue';
+
+export default {
+  name: 'ExternalIssuesShow',
+  components: {
+    GlAlert,
+    GlSprintf,
+    GlLink,
+    GlBadge,
+    GlLoadingIcon,
+    IssuableShow,
+    ExternalIssueSidebar,
+    Note,
+  },
+  directives: {
+    GlTooltip,
+  },
+  inject: {
+    userTypeText: {
+      default: null,
+    },
+    userTypeTooltipText: {
+      default: null,
+    },
+    failFetchingIssueText: {
+      default: null,
+    },
+    failFetchingIssueStatusText: {
+      default: null,
+    },
+    failUpdatingIssueStatusText: {
+      default: null,
+    },
+    issuesShowPath: {
+      default: '',
+    },
+    seeMoreDetailText: {
+      default: null,
+    },
+    titleText: {
+      default: null,
+    },
+  },
+  data() {
+    return {
+      isLoading: true,
+      isLoadingStatus: false,
+      isUpdatingLabels: false,
+      isUpdatingStatus: false,
+      errorMessage: null,
+      issue: {},
+      statuses: [],
+    };
+  },
+  computed: {
+    isIssueOpen() {
+      return this.issue.state === issueStates.OPENED;
+    },
+    statusBadgeClass() {
+      return this.isIssueOpen ? 'status-box-open' : 'status-box-issue-closed';
+    },
+    statusBadgeText() {
+      return issueStateLabels[this.issue.state];
+    },
+    statusIcon() {
+      return this.isIssueOpen ? 'issue-open-m' : 'mobile-issue-close';
+    },
+  },
+  mounted() {
+    this.loadIssue();
+  },
+  methods: {
+    loadIssue() {
+      fetchIssue(this.issuesShowPath)
+        .then((issue) => {
+          this.issue = convertObjectPropsToCamelCase(issue, { deep: true });
+        })
+        .catch(() => {
+          this.errorMessage = this.failFetchingIssueText;
+        })
+        .finally(() => {
+          this.isLoading = false;
+        });
+    },
+
+    externalIssueCommentId(id) {
+      return `external_note_${id}`;
+    },
+
+    onIssueLabelsUpdated(labels) {
+      this.isUpdatingLabels = true;
+      updateIssue(this.issue, { labels })
+        .then((response) => {
+          this.issue.labels = response.labels;
+        })
+        .catch(() => {
+          createFlash({
+            message: this.failUpdatingIssueLabelsText,
+          });
+        })
+        .finally(() => {
+          this.isUpdatingLabels = false;
+        });
+    },
+    onIssueStatusFetch() {
+      this.isLoadingStatus = true;
+      fetchIssueStatuses()
+        .then((response) => {
+          this.statuses = response;
+        })
+        .catch(() => {
+          createFlash({
+            message: this.failFetchingIssueStatusText,
+          });
+        })
+        .finally(() => {
+          this.isLoadingStatus = false;
+        });
+    },
+    onIssueStatusUpdated(status) {
+      this.isUpdatingStatus = true;
+      updateIssue(this.issue, { status })
+        .then((response) => {
+          this.issue.status = response.status;
+        })
+        .catch(() => {
+          createFlash({
+            message: this.failUpdatingIssueStatusText,
+          });
+        })
+        .finally(() => {
+          this.isUpdatingStatus = false;
+        });
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="gl-mt-5">
+    <gl-loading-icon v-if="isLoading" size="lg" />
+    <gl-alert v-else-if="errorMessage" variant="danger" :dismissible="false">
+      {{ errorMessage }}
+    </gl-alert>
+    <template v-else>
+      <gl-alert variant="info" :dismissible="false" :title="titleText" class="gl-mb-2">
+        <gl-sprintf :message="seeMoreDetailText">
+          <template #link="{ content }">
+            <gl-link :href="issue.webUrl" target="_blank">{{ content }}</gl-link>
+          </template>
+        </gl-sprintf>
+      </gl-alert>
+
+      <issuable-show
+        :issuable="issue"
+        :enable-edit="false"
+        :status-badge-class="statusBadgeClass"
+        :status-icon="statusIcon"
+      >
+        <template #status-badge>{{ statusBadgeText }}</template>
+
+        <template #right-sidebar-items="{ sidebarExpanded, toggleSidebar }">
+          <external-issue-sidebar
+            :sidebar-expanded="sidebarExpanded"
+            :issue="issue"
+            :is-loading-status="isLoadingStatus"
+            :is-updating-labels="isUpdatingLabels"
+            :is-updating-status="isUpdatingStatus"
+            :statuses="statuses"
+            @issue-labels-updated="onIssueLabelsUpdated"
+            @issue-status-fetch="onIssueStatusFetch"
+            @issue-status-updated="onIssueStatusUpdated"
+            @sidebar-toggle="toggleSidebar"
+          />
+        </template>
+
+        <template #discussion>
+          <note
+            v-for="comment in issue.comments"
+            :id="externalIssueCommentId(comment.id)"
+            :key="comment.id"
+            :author-avatar-url="comment.author.avatarUrl"
+            :author-web-url="comment.author.webUrl"
+            :author-name="comment.author.name"
+            :author-username="comment.author.username"
+            :note-body-html="comment.bodyHtml"
+            :note-created-at="comment.createdAt"
+          >
+            <template #badges>
+              <gl-badge v-gl-tooltip="{ title: userTypeTooltipText }">
+                {{ userTypeText }}
+              </gl-badge>
+            </template>
+          </note>
+        </template>
+      </issuable-show>
+    </template>
+  </div>
+</template>
diff --git a/app/assets/javascripts/integrations/external_issue/issues_show/components/note.vue b/app/assets/javascripts/integrations/external_issue/issues_show/components/note.vue
new file mode 100644
index 00000000000000..ff7fbd75ad4b05
--- /dev/null
+++ b/app/assets/javascripts/integrations/external_issue/issues_show/components/note.vue
@@ -0,0 +1,100 @@
+<script>
+import { GlAvatarLink, GlAvatar, GlLink, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
+import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue';
+import TimelineIcon from '~/vue_shared/components/notes/timeline_icon.vue';
+import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
+
+export default {
+  components: {
+    GlAvatarLink,
+    GlAvatar,
+    GlLink,
+    TimelineEntryItem,
+    TimelineIcon,
+    TimeAgoTooltip,
+  },
+  directives: {
+    SafeHtml,
+  },
+  props: {
+    authorAvatarUrl: {
+      type: String,
+      required: true,
+    },
+    authorWebUrl: {
+      type: String,
+      required: true,
+    },
+    authorName: {
+      type: String,
+      required: true,
+    },
+    noteBodyHtml: {
+      type: String,
+      required: true,
+    },
+    noteCreatedAt: {
+      type: String,
+      required: true,
+    },
+    authorUsername: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+  },
+  computed: {
+    noteAnchor() {
+      return `#${this.$attrs.id || ''}`;
+    },
+  },
+};
+</script>
+
+<template>
+  <timeline-entry-item class="gl-p-5">
+    <timeline-icon class="gl-mr-5 gl-ml-2">
+      <gl-avatar-link target="_blank" :href="authorWebUrl">
+        <gl-avatar :size="32" :src="authorAvatarUrl" :alt="authorName" />
+      </gl-avatar-link>
+    </timeline-icon>
+
+    <div>
+      <div class="gl-display-flex gl-justify-content-space-between">
+        <div class="gl-display-flex gl-align-items-center gl-mb-3">
+          <gl-link
+            :href="authorWebUrl"
+            class="gl-text-black-normal gl-font-weight-bold gl-white-space-nowrap gl-mr-2"
+          >
+            {{ authorName }}
+          </gl-link>
+
+          <gl-link
+            v-if="authorUsername"
+            :href="authorWebUrl"
+            class="gl-text-gray-500 gl-mr-2 gl-white-space-nowrap"
+            data-testid="author-username"
+          >
+            @{{ authorUsername }}
+          </gl-link>
+
+          <span class="gl-text-gray-500 gl-mr-2">·</span>
+
+          <gl-link class="gl-text-gray-500" :href="noteAnchor" data-testid="time-ago-link">
+            <time-ago-tooltip :time="noteCreatedAt" tooltip-placement="bottom" />
+          </gl-link>
+        </div>
+
+        <div data-testid="badges-container">
+          <slot name="badges"></slot>
+        </div>
+      </div>
+
+      <div>
+        <div class="gl-overflow-x-auto gl-overflow-y-hidden">
+          <div v-safe-html="noteBodyHtml" class="md"></div>
+        </div>
+      </div>
+    </div>
+  </timeline-entry-item>
+</template>
diff --git a/app/assets/javascripts/integrations/external_issue/issues_show/components/sidebar/assignee.vue b/app/assets/javascripts/integrations/external_issue/issues_show/components/sidebar/assignee.vue
new file mode 100644
index 00000000000000..81048183987d10
--- /dev/null
+++ b/app/assets/javascripts/integrations/external_issue/issues_show/components/sidebar/assignee.vue
@@ -0,0 +1,86 @@
+<script>
+import { GlAvatarLabeled, GlAvatarLink, GlAvatar, GlIcon, GlTooltipDirective } from '@gitlab/ui';
+import { __ } from '~/locale';
+import AssigneeTitle from '~/sidebar/components/assignees/assignee_title.vue';
+
+export default {
+  name: 'ExternalIssuesSidebarAssignee',
+  components: {
+    GlAvatarLabeled,
+    GlAvatarLink,
+    GlAvatar,
+    GlIcon,
+    AssigneeTitle,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  inject: ['userTypeText'],
+  props: {
+    assignee: {
+      type: Object,
+      required: false,
+      default: null,
+    },
+  },
+  computed: {
+    tooltipTitle() {
+      return this.assignee?.name || __('No assignee');
+    },
+    numberOfAssignees() {
+      return this.assignee ? 1 : 0;
+    },
+  },
+  tooltipOptions: {
+    container: 'body',
+    placement: 'left',
+    boundary: 'viewport',
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div class="hide-collapsed">
+      <assignee-title
+        :number-of-assignees="numberOfAssignees"
+        :editable="false"
+        :show-toggle="false"
+        :changing="false"
+      />
+      <gl-avatar-link
+        v-if="assignee"
+        v-gl-tooltip="$options.tooltipOptions"
+        target="_blank"
+        :href="assignee.webUrl"
+        :title="tooltipTitle"
+      >
+        <gl-avatar-labeled
+          :size="32"
+          :src="assignee.avatarUrl"
+          :alt="assignee.name"
+          :entity-name="assignee.name"
+          :label="assignee.name"
+          :sub-label="userTypeText"
+        />
+      </gl-avatar-link>
+      <span v-else class="gl-text-gray-500" data-testid="no-assignee-text">{{ __('None') }}</span>
+    </div>
+
+    <div
+      v-gl-tooltip="$options.tooltipOptions"
+      class="sidebar-collapsed-icon"
+      :title="tooltipTitle"
+      data-testid="sidebar-collapsed-icon-wrapper"
+    >
+      <gl-avatar
+        v-if="assignee"
+        :size="24"
+        :src="assignee.avatarUrl"
+        :alt="assignee.name"
+        :entity-name="assignee.name"
+      />
+      <gl-icon v-else name="user" data-testid="no-assignee-icon" />
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/integrations/external_issue/issues_show/components/sidebar/external_issues_sidebar_root.vue b/app/assets/javascripts/integrations/external_issue/issues_show/components/sidebar/external_issues_sidebar_root.vue
new file mode 100644
index 00000000000000..f255bc7468a82f
--- /dev/null
+++ b/app/assets/javascripts/integrations/external_issue/issues_show/components/sidebar/external_issues_sidebar_root.vue
@@ -0,0 +1,170 @@
+<script>
+import { labelsFilterParam } from '~/integrations/external_issue/issues_show/constants';
+import { __ } from '~/locale';
+import LabelsSelect from '~/vue_shared/components/sidebar/labels_select_vue/labels_select_root.vue';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import Assignee from './assignee.vue';
+import IssueDueDate from './issue_due_date.vue';
+import IssueField from './issue_field.vue';
+
+export default {
+  name: 'ExternalIssuesSidebar',
+  components: {
+    Assignee,
+    IssueDueDate,
+    IssueField,
+    LabelsSelect,
+  },
+  mixins: [glFeatureFlagsMixin()],
+  inject: {
+    issueLabelsPath: {
+      default: null,
+    },
+    issuesListPath: {
+      default: null,
+    },
+    statusDropdownEmptyText: {
+      default: null,
+    },
+    featureFlagCanEditLabelKey: {
+      default: null,
+    },
+    featureFlagCanEditStatusKey: {
+      default: null,
+    },
+  },
+  props: {
+    sidebarExpanded: {
+      type: Boolean,
+      required: true,
+    },
+    issue: {
+      type: Object,
+      required: true,
+    },
+    isLoadingStatus: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    isUpdatingLabels: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    isUpdatingStatus: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    statuses: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      isEditingLabels: false,
+    };
+  },
+  computed: {
+    assignee() {
+      // Zentao issues have at most 1 assignee
+      return (this.issue.assignees || [])[0];
+    },
+    canUpdateLabels() {
+      return this.glFeatures[this.featureFlagCanEditLabelKey];
+    },
+    canUpdateStatus() {
+      return this.glFeatures[this.featureFlagCanEditStatusKey];
+    },
+  },
+  labelsFilterParam,
+  i18n: {
+    statusTitle: __('Status'),
+    statusDropdownTitle: __('Change status'),
+  },
+  mounted() {
+    this.sidebarEl = document.querySelector('aside.right-sidebar');
+  },
+  methods: {
+    toggleSidebar() {
+      this.$emit('sidebar-toggle');
+    },
+    afterSidebarTransitioned(callback) {
+      // Wait for sidebar expand animation to complete
+      this.sidebarEl.addEventListener('transitionend', callback, { once: true });
+    },
+    expandSidebarAndOpenDropdown(dropdownRef = null) {
+      // Expand the sidebar if not already expanded.
+      if (!this.sidebarExpanded) {
+        this.toggleSidebar();
+      }
+
+      if (dropdownRef) {
+        this.afterSidebarTransitioned(() => {
+          dropdownRef.expand();
+        });
+      }
+    },
+    onIssueLabelsClose() {
+      this.isEditingLabels = false;
+    },
+    onIssueLabelsToggle() {
+      this.expandSidebarAndOpenDropdown();
+      this.afterSidebarTransitioned(() => {
+        this.isEditingLabels = true;
+      });
+    },
+    onIssueLabelsUpdated(labels) {
+      this.$emit('issue-labels-updated', labels);
+    },
+    onIssueStatusFetch() {
+      this.$emit('issue-status-fetch');
+    },
+    onIssueStatusUpdated(status) {
+      this.$emit('issue-status-updated', status);
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <assignee class="block" :assignee="assignee" />
+    <issue-due-date :due-date="issue.dueDate" />
+    <issue-field
+      icon="progress"
+      :can-update="canUpdateStatus"
+      :dropdown-title="$options.i18n.statusDropdownTitle"
+      :dropdown-empty="statusDropdownEmptyText"
+      :items="statuses"
+      :loading="isLoadingStatus"
+      :title="$options.i18n.statusTitle"
+      :updating="isUpdatingStatus"
+      :value="issue.status"
+      @expand-sidebar="expandSidebarAndOpenDropdown"
+      @issue-field-fetch="onIssueStatusFetch"
+      @issue-field-updated="onIssueStatusUpdated"
+    />
+    <labels-select
+      :allow-label-edit="canUpdateLabels"
+      :allow-multiselect="true"
+      :allow-scoped-labels="true"
+      :selected-labels="issue.labels"
+      :labels-fetch-path="issueLabelsPath"
+      :labels-filter-base-path="issuesListPath"
+      :labels-filter-param="$options.labelsFilterParam"
+      :labels-select-in-progress="isUpdatingLabels"
+      :is-editing="isEditingLabels"
+      variant="sidebar"
+      class="block labels js-labels-block"
+      @onDropdownClose="onIssueLabelsClose"
+      @toggleCollapse="onIssueLabelsToggle"
+      @updateSelectedLabels="onIssueLabelsUpdated"
+    >
+      {{ __('None') }}
+    </labels-select>
+  </div>
+</template>
diff --git a/app/assets/javascripts/integrations/external_issue/issues_show/components/sidebar/issue_due_date.vue b/app/assets/javascripts/integrations/external_issue/issues_show/components/sidebar/issue_due_date.vue
new file mode 100644
index 00000000000000..66360feda1abfc
--- /dev/null
+++ b/app/assets/javascripts/integrations/external_issue/issues_show/components/sidebar/issue_due_date.vue
@@ -0,0 +1,76 @@
+<script>
+import { GlIcon, GlTooltipDirective } from '@gitlab/ui';
+import { dateInWords, getDayDifference, parsePikadayDate } from '~/lib/utils/datetime_utility';
+import { __ } from '~/locale';
+
+export default {
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  components: {
+    GlIcon,
+  },
+  props: {
+    dueDate: {
+      type: String,
+      required: false,
+      default: null,
+    },
+  },
+  computed: {
+    dueDateInWords() {
+      const date = parsePikadayDate(this.dueDate);
+
+      return dateInWords(date, true);
+    },
+    formattedDueDate() {
+      const today = new Date();
+      const date = parsePikadayDate(this.dueDate);
+      const isPastDue = getDayDifference(today, date) < 0;
+
+      let formattedDate = this.dueDateInWords;
+
+      if (isPastDue) {
+        formattedDate += ` (${__('Past due')})`;
+      }
+
+      return formattedDate;
+    },
+    dueDateTooltipProps() {
+      return {
+        boundary: 'viewport',
+        placement: 'left',
+        title: this.dueDate
+          ? `${this.$options.i18n.dueDateTitle}<br>${this.formattedDueDate}`
+          : this.$options.i18n.dueDateTitle,
+      };
+    },
+  },
+  i18n: {
+    dueDateTitle: __('Due date'),
+    none: __('None'),
+  },
+};
+</script>
+
+<template>
+  <div class="block">
+    <div
+      v-gl-tooltip.html="dueDateTooltipProps"
+      class="sidebar-collapsed-icon"
+      data-testid="due-date-collapsed"
+    >
+      <gl-icon name="calendar" />
+      <span v-if="dueDate">{{ dueDateInWords }}</span>
+      <span v-else>{{ $options.i18n.none }}</span>
+    </div>
+
+    <div class="hide-collapsed">
+      <div class="title">{{ $options.i18n.dueDateTitle }}</div>
+      <div class="value" data-testid="due-date-value">
+        <strong v-if="dueDate">{{ formattedDueDate }}</strong>
+        <span v-else class="no-value">{{ $options.i18n.none }}</span>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/integrations/external_issue/issues_show/components/sidebar/issue_field.vue b/app/assets/javascripts/integrations/external_issue/issues_show/components/sidebar/issue_field.vue
new file mode 100644
index 00000000000000..2e24d77632f9a4
--- /dev/null
+++ b/app/assets/javascripts/integrations/external_issue/issues_show/components/sidebar/issue_field.vue
@@ -0,0 +1,141 @@
+<script>
+import { GlIcon, GlTooltipDirective } from '@gitlab/ui';
+import { __ } from '~/locale';
+import SidebarEditableItem from '~/sidebar/components/sidebar_editable_item.vue';
+import IssueFieldDropdown from './issue_field_dropdown.vue';
+
+export default {
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  components: {
+    GlIcon,
+    IssueFieldDropdown,
+    SidebarEditableItem,
+  },
+  provide() {
+    return {
+      isClassicSidebar: true,
+      canUpdate: this.canUpdate,
+    };
+  },
+  props: {
+    canUpdate: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    dropdownEmpty: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    dropdownTitle: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    icon: {
+      type: String,
+      required: true,
+    },
+    items: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    updating: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    title: {
+      type: String,
+      required: true,
+    },
+    value: {
+      type: String,
+      required: false,
+      default: null,
+    },
+  },
+  computed: {
+    tooltipProps() {
+      return {
+        boundary: 'viewport',
+        placement: 'left',
+        title: this.value || this.title,
+      };
+    },
+    valueWithFallback() {
+      return this.value || this.$options.i18n.none;
+    },
+    valueClass() {
+      return {
+        'no-value': !this.value,
+      };
+    },
+  },
+  i18n: {
+    none: __('None'),
+  },
+  methods: {
+    showDropdown() {
+      this.$refs.dropdown.showDropdown();
+      this.$emit('issue-field-fetch');
+    },
+    expandSidebarAndOpenDropdown() {
+      this.$emit('expand-sidebar', this.$refs.editableItem);
+    },
+    onIssueFieldUpdated(value) {
+      this.$emit('issue-field-updated', value);
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="block">
+    <sidebar-editable-item
+      ref="editableItem"
+      :loading="updating"
+      :title="title"
+      @open="showDropdown"
+    >
+      <template #collapsed>
+        <div
+          v-gl-tooltip="tooltipProps"
+          class="sidebar-collapsed-icon"
+          data-testid="field-collapsed"
+          @click="expandSidebarAndOpenDropdown"
+        >
+          <gl-icon :name="icon" />
+        </div>
+
+        <div class="hide-collapsed">
+          <div class="value" data-testid="field-value">
+            <span :class="valueClass">{{ valueWithFallback }}</span>
+          </div>
+        </div>
+      </template>
+
+      <template #default>
+        <issue-field-dropdown
+          v-if="canUpdate"
+          ref="dropdown"
+          :empty-text="dropdownEmpty"
+          :items="items"
+          :loading="loading"
+          :text="valueWithFallback"
+          :title="dropdownTitle"
+          @issue-field-updated="onIssueFieldUpdated"
+        />
+      </template>
+    </sidebar-editable-item>
+  </div>
+</template>
diff --git a/app/assets/javascripts/integrations/external_issue/issues_show/components/sidebar/issue_field_dropdown.vue b/app/assets/javascripts/integrations/external_issue/issues_show/components/sidebar/issue_field_dropdown.vue
new file mode 100644
index 00000000000000..37df42c80e5a52
--- /dev/null
+++ b/app/assets/javascripts/integrations/external_issue/issues_show/components/sidebar/issue_field_dropdown.vue
@@ -0,0 +1,66 @@
+<script>
+import { GlDropdown, GlDropdownItem, GlDropdownText, GlLoadingIcon } from '@gitlab/ui';
+
+export default {
+  components: {
+    GlDropdown,
+    GlDropdownItem,
+    GlDropdownText,
+    GlLoadingIcon,
+  },
+  props: {
+    emptyText: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    items: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    loading: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    text: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    title: {
+      type: String,
+      required: false,
+      default: null,
+    },
+  },
+  computed: {
+    noItems() {
+      return this.items.length === 0;
+    },
+  },
+  methods: {
+    showDropdown() {
+      this.$refs.dropdown.show();
+    },
+    selectItem(item) {
+      this.$emit('issue-field-updated', item.title);
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-dropdown ref="dropdown" :text="text" :header-text="title" block lazy>
+    <div v-if="loading" class="gl-h-13">
+      <gl-loading-icon size="md" />
+    </div>
+    <div v-else>
+      <gl-dropdown-text v-if="noItems">{{ emptyText }}</gl-dropdown-text>
+      <gl-dropdown-item v-for="item in items" :key="item.title" @click="selectItem(item)">
+        {{ item.title }}
+      </gl-dropdown-item>
+    </div>
+  </gl-dropdown>
+</template>
diff --git a/app/assets/javascripts/integrations/external_issue/issues_show/constants.js b/app/assets/javascripts/integrations/external_issue/issues_show/constants.js
new file mode 100644
index 00000000000000..29bb2dedfd2554
--- /dev/null
+++ b/app/assets/javascripts/integrations/external_issue/issues_show/constants.js
@@ -0,0 +1,13 @@
+import { __ } from '~/locale';
+
+export const issueStates = {
+  OPENED: 'opened',
+  CLOSED: 'closed',
+};
+
+export const issueStateLabels = {
+  [issueStates.OPENED]: __('Open'),
+  [issueStates.CLOSED]: __('Closed'),
+};
+
+export const labelsFilterParam = 'labels';
diff --git a/app/assets/javascripts/integrations/external_issue/issues_show/external_issues_show_bundle.js b/app/assets/javascripts/integrations/external_issue/issues_show/external_issues_show_bundle.js
new file mode 100644
index 00000000000000..d00307ebeb052c
--- /dev/null
+++ b/app/assets/javascripts/integrations/external_issue/issues_show/external_issues_show_bundle.js
@@ -0,0 +1,43 @@
+import Vue from 'vue';
+
+import ExternalIssueShowRoot from './components/external_issues_show_root.vue';
+
+/**
+ *
+ * @param @required {Object} provides
+ *  @type provides: {
+ *    failFetchingIssueText: string
+ *    failFetchingIssueStatusText: string
+ *    failUpdatingIssueLabelsText: string
+ *    failUpdatingIssueStatusText: string
+ *    featureFlagCanEditLabelKey: string
+ *    featureFlagCanEditStatusKey: string
+ *    seeMoreDetailText: string
+ *    statusDropdownEmptyText: string
+ *    titleText: string
+ *    userTypeText: string
+ *    userTypeTooltipText: string
+ *  }
+ */
+
+export default function ExternalIssueShowFactory(provides) {
+  return function initZentaoIssueShow({ mountPointSelector }) {
+    const mountPointEl = document.querySelector(mountPointSelector);
+
+    if (!mountPointEl) {
+      return null;
+    }
+
+    const { issuesShowPath, issuesListPath } = mountPointEl.dataset;
+
+    return new Vue({
+      el: mountPointEl,
+      provide: {
+        issuesShowPath,
+        issuesListPath,
+        ...provides,
+      },
+      render: (createElement) => createElement(ExternalIssueShowRoot),
+    });
+  };
+}
-- 
GitLab


From 25008f18f5331301e01edab38b1fc056781c2aef Mon Sep 17 00:00:00 2001
From: JeremyWuuuuu <jeremyw@jihulab.com>
Date: Thu, 16 Sep 2021 11:14:17 +0800
Subject: [PATCH 2/4] Extract common sub components from Jira

Integration Jira with External Issue
Update test cases against the change
Rebase upstream
---
 .../external_issue/issues_show/api.js         |  37 ---
 .../components/external_issues_show_root.vue  | 219 ------------------
 .../issues_show/components/note.vue           | 100 --------
 .../components/sidebar/assignee.vue           |  86 -------
 .../sidebar/external_issues_sidebar_root.vue  | 170 --------------
 .../external_issues_show_bundle.js            |  43 ----
 .../issues_show/components/note.vue           |  10 +
 .../components/sidebar/assignee.vue           |   0
 .../components/sidebar/issue_due_date.vue     |   0
 .../components/sidebar/issue_field.vue        |   0
 .../sidebar/issue_field_dropdown.vue          |   0
 .../external_issue/issues_show/constants.js   |   0
 .../components/jira_issues_show_root.vue      |   2 +-
 .../components/sidebar/issue_due_date.vue     |  76 ------
 .../components/sidebar/issue_field.vue        | 141 -----------
 .../sidebar/issue_field_dropdown.vue          |  66 ------
 .../sidebar/jira_issues_sidebar_root.vue      |   6 +-
 .../__snapshots__/note_spec.js.snap           |   0
 .../issues_show/components/note_spec.js       |  14 +-
 .../__snapshots__/assignee_spec.js.snap       |   4 +-
 .../components/sidebar/assignee_spec.js       |   8 +-
 .../components/sidebar/issue_due_date_spec.js |   2 +-
 .../sidebar/issue_field_dropdown_spec.js      |  10 +-
 .../components/sidebar/issue_field_spec.js    |   2 +-
 .../external_issue/issues_show/mock_data.js   |  45 ++++
 .../sidebar/jira_issues_sidebar_root_spec.js  |   6 +-
 26 files changed, 82 insertions(+), 965 deletions(-)
 delete mode 100644 app/assets/javascripts/integrations/external_issue/issues_show/api.js
 delete mode 100644 app/assets/javascripts/integrations/external_issue/issues_show/components/external_issues_show_root.vue
 delete mode 100644 app/assets/javascripts/integrations/external_issue/issues_show/components/note.vue
 delete mode 100644 app/assets/javascripts/integrations/external_issue/issues_show/components/sidebar/assignee.vue
 delete mode 100644 app/assets/javascripts/integrations/external_issue/issues_show/components/sidebar/external_issues_sidebar_root.vue
 delete mode 100644 app/assets/javascripts/integrations/external_issue/issues_show/external_issues_show_bundle.js
 rename ee/app/assets/javascripts/integrations/{jira => external_issue}/issues_show/components/note.vue (93%)
 rename ee/app/assets/javascripts/integrations/{jira => external_issue}/issues_show/components/sidebar/assignee.vue (100%)
 rename {app => ee/app}/assets/javascripts/integrations/external_issue/issues_show/components/sidebar/issue_due_date.vue (100%)
 rename {app => ee/app}/assets/javascripts/integrations/external_issue/issues_show/components/sidebar/issue_field.vue (100%)
 rename {app => ee/app}/assets/javascripts/integrations/external_issue/issues_show/components/sidebar/issue_field_dropdown.vue (100%)
 rename {app => ee/app}/assets/javascripts/integrations/external_issue/issues_show/constants.js (100%)
 delete mode 100644 ee/app/assets/javascripts/integrations/jira/issues_show/components/sidebar/issue_due_date.vue
 delete mode 100644 ee/app/assets/javascripts/integrations/jira/issues_show/components/sidebar/issue_field.vue
 delete mode 100644 ee/app/assets/javascripts/integrations/jira/issues_show/components/sidebar/issue_field_dropdown.vue
 rename ee/spec/frontend/integrations/{jira => external_issue}/issues_show/components/__snapshots__/note_spec.js.snap (100%)
 rename ee/spec/frontend/integrations/{jira => external_issue}/issues_show/components/note_spec.js (78%)
 rename ee/spec/frontend/integrations/{jira => external_issue}/issues_show/components/sidebar/__snapshots__/assignee_spec.js.snap (86%)
 rename ee/spec/frontend/integrations/{jira => external_issue}/issues_show/components/sidebar/assignee_spec.js (92%)
 rename ee/spec/frontend/integrations/{jira => external_issue}/issues_show/components/sidebar/issue_due_date_spec.js (93%)
 rename ee/spec/frontend/integrations/{jira => external_issue}/issues_show/components/sidebar/issue_field_dropdown_spec.js (77%)
 rename ee/spec/frontend/integrations/{jira => external_issue}/issues_show/components/sidebar/issue_field_spec.js (96%)
 create mode 100644 ee/spec/frontend/integrations/external_issue/issues_show/mock_data.js

diff --git a/app/assets/javascripts/integrations/external_issue/issues_show/api.js b/app/assets/javascripts/integrations/external_issue/issues_show/api.js
deleted file mode 100644
index 95fe28c90e2306..00000000000000
--- a/app/assets/javascripts/integrations/external_issue/issues_show/api.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import axios from '~/lib/utils/axios_utils';
-
-export const fetchIssue = async (issuePath) => {
-  return axios.get(issuePath).then(({ data }) => {
-    return data;
-  });
-};
-
-export const fetchIssueStatuses = () => {
-  // We are using mock data here which should come from the backend
-  return new Promise((resolve) => {
-    setTimeout(() => {
-      // eslint-disable-next-line @gitlab/require-i18n-strings
-      resolve([{ title: 'In Progress' }, { title: 'Done' }]);
-    }, 1000);
-  });
-};
-
-export const updateIssue = (issue, { labels = [], status = undefined }) => {
-  // We are using mock call here which should become a backend call
-  return new Promise((resolve) => {
-    setTimeout(() => {
-      const addedLabels = labels.filter((label) => label.set);
-      const removedLabelsIds = labels.filter((label) => !label.set).map((label) => label.id);
-
-      const finalLabels = [...issue.labels, ...addedLabels].filter(
-        (label) => !removedLabelsIds.includes(label.id),
-      );
-
-      resolve({
-        ...issue,
-        ...(status ? { status } : {}),
-        labels: finalLabels,
-      });
-    }, 1000);
-  });
-};
diff --git a/app/assets/javascripts/integrations/external_issue/issues_show/components/external_issues_show_root.vue b/app/assets/javascripts/integrations/external_issue/issues_show/components/external_issues_show_root.vue
deleted file mode 100644
index 77d736fcc2fb24..00000000000000
--- a/app/assets/javascripts/integrations/external_issue/issues_show/components/external_issues_show_root.vue
+++ /dev/null
@@ -1,219 +0,0 @@
-<script>
-import {
-  GlAlert,
-  GlSprintf,
-  GlLink,
-  GlLoadingIcon,
-  GlBadge,
-  GlTooltipDirective as GlTooltip,
-} from '@gitlab/ui';
-import createFlash from '~/flash';
-import {
-  fetchIssue,
-  fetchIssueStatuses,
-  updateIssue,
-} from '~/integrations/external_issue/issues_show/api';
-
-import ExternalIssueSidebar from '~/integrations/external_issue/issues_show/components/sidebar/external_issues_sidebar_root.vue';
-import { issueStates, issueStateLabels } from '~/integrations/external_issue/issues_show/constants';
-import IssuableShow from '~/issuable_show/components/issuable_show_root.vue';
-import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
-import Note from './note.vue';
-
-export default {
-  name: 'ExternalIssuesShow',
-  components: {
-    GlAlert,
-    GlSprintf,
-    GlLink,
-    GlBadge,
-    GlLoadingIcon,
-    IssuableShow,
-    ExternalIssueSidebar,
-    Note,
-  },
-  directives: {
-    GlTooltip,
-  },
-  inject: {
-    userTypeText: {
-      default: null,
-    },
-    userTypeTooltipText: {
-      default: null,
-    },
-    failFetchingIssueText: {
-      default: null,
-    },
-    failFetchingIssueStatusText: {
-      default: null,
-    },
-    failUpdatingIssueStatusText: {
-      default: null,
-    },
-    issuesShowPath: {
-      default: '',
-    },
-    seeMoreDetailText: {
-      default: null,
-    },
-    titleText: {
-      default: null,
-    },
-  },
-  data() {
-    return {
-      isLoading: true,
-      isLoadingStatus: false,
-      isUpdatingLabels: false,
-      isUpdatingStatus: false,
-      errorMessage: null,
-      issue: {},
-      statuses: [],
-    };
-  },
-  computed: {
-    isIssueOpen() {
-      return this.issue.state === issueStates.OPENED;
-    },
-    statusBadgeClass() {
-      return this.isIssueOpen ? 'status-box-open' : 'status-box-issue-closed';
-    },
-    statusBadgeText() {
-      return issueStateLabels[this.issue.state];
-    },
-    statusIcon() {
-      return this.isIssueOpen ? 'issue-open-m' : 'mobile-issue-close';
-    },
-  },
-  mounted() {
-    this.loadIssue();
-  },
-  methods: {
-    loadIssue() {
-      fetchIssue(this.issuesShowPath)
-        .then((issue) => {
-          this.issue = convertObjectPropsToCamelCase(issue, { deep: true });
-        })
-        .catch(() => {
-          this.errorMessage = this.failFetchingIssueText;
-        })
-        .finally(() => {
-          this.isLoading = false;
-        });
-    },
-
-    externalIssueCommentId(id) {
-      return `external_note_${id}`;
-    },
-
-    onIssueLabelsUpdated(labels) {
-      this.isUpdatingLabels = true;
-      updateIssue(this.issue, { labels })
-        .then((response) => {
-          this.issue.labels = response.labels;
-        })
-        .catch(() => {
-          createFlash({
-            message: this.failUpdatingIssueLabelsText,
-          });
-        })
-        .finally(() => {
-          this.isUpdatingLabels = false;
-        });
-    },
-    onIssueStatusFetch() {
-      this.isLoadingStatus = true;
-      fetchIssueStatuses()
-        .then((response) => {
-          this.statuses = response;
-        })
-        .catch(() => {
-          createFlash({
-            message: this.failFetchingIssueStatusText,
-          });
-        })
-        .finally(() => {
-          this.isLoadingStatus = false;
-        });
-    },
-    onIssueStatusUpdated(status) {
-      this.isUpdatingStatus = true;
-      updateIssue(this.issue, { status })
-        .then((response) => {
-          this.issue.status = response.status;
-        })
-        .catch(() => {
-          createFlash({
-            message: this.failUpdatingIssueStatusText,
-          });
-        })
-        .finally(() => {
-          this.isUpdatingStatus = false;
-        });
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="gl-mt-5">
-    <gl-loading-icon v-if="isLoading" size="lg" />
-    <gl-alert v-else-if="errorMessage" variant="danger" :dismissible="false">
-      {{ errorMessage }}
-    </gl-alert>
-    <template v-else>
-      <gl-alert variant="info" :dismissible="false" :title="titleText" class="gl-mb-2">
-        <gl-sprintf :message="seeMoreDetailText">
-          <template #link="{ content }">
-            <gl-link :href="issue.webUrl" target="_blank">{{ content }}</gl-link>
-          </template>
-        </gl-sprintf>
-      </gl-alert>
-
-      <issuable-show
-        :issuable="issue"
-        :enable-edit="false"
-        :status-badge-class="statusBadgeClass"
-        :status-icon="statusIcon"
-      >
-        <template #status-badge>{{ statusBadgeText }}</template>
-
-        <template #right-sidebar-items="{ sidebarExpanded, toggleSidebar }">
-          <external-issue-sidebar
-            :sidebar-expanded="sidebarExpanded"
-            :issue="issue"
-            :is-loading-status="isLoadingStatus"
-            :is-updating-labels="isUpdatingLabels"
-            :is-updating-status="isUpdatingStatus"
-            :statuses="statuses"
-            @issue-labels-updated="onIssueLabelsUpdated"
-            @issue-status-fetch="onIssueStatusFetch"
-            @issue-status-updated="onIssueStatusUpdated"
-            @sidebar-toggle="toggleSidebar"
-          />
-        </template>
-
-        <template #discussion>
-          <note
-            v-for="comment in issue.comments"
-            :id="externalIssueCommentId(comment.id)"
-            :key="comment.id"
-            :author-avatar-url="comment.author.avatarUrl"
-            :author-web-url="comment.author.webUrl"
-            :author-name="comment.author.name"
-            :author-username="comment.author.username"
-            :note-body-html="comment.bodyHtml"
-            :note-created-at="comment.createdAt"
-          >
-            <template #badges>
-              <gl-badge v-gl-tooltip="{ title: userTypeTooltipText }">
-                {{ userTypeText }}
-              </gl-badge>
-            </template>
-          </note>
-        </template>
-      </issuable-show>
-    </template>
-  </div>
-</template>
diff --git a/app/assets/javascripts/integrations/external_issue/issues_show/components/note.vue b/app/assets/javascripts/integrations/external_issue/issues_show/components/note.vue
deleted file mode 100644
index ff7fbd75ad4b05..00000000000000
--- a/app/assets/javascripts/integrations/external_issue/issues_show/components/note.vue
+++ /dev/null
@@ -1,100 +0,0 @@
-<script>
-import { GlAvatarLink, GlAvatar, GlLink, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
-import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue';
-import TimelineIcon from '~/vue_shared/components/notes/timeline_icon.vue';
-import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
-
-export default {
-  components: {
-    GlAvatarLink,
-    GlAvatar,
-    GlLink,
-    TimelineEntryItem,
-    TimelineIcon,
-    TimeAgoTooltip,
-  },
-  directives: {
-    SafeHtml,
-  },
-  props: {
-    authorAvatarUrl: {
-      type: String,
-      required: true,
-    },
-    authorWebUrl: {
-      type: String,
-      required: true,
-    },
-    authorName: {
-      type: String,
-      required: true,
-    },
-    noteBodyHtml: {
-      type: String,
-      required: true,
-    },
-    noteCreatedAt: {
-      type: String,
-      required: true,
-    },
-    authorUsername: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
-  },
-  computed: {
-    noteAnchor() {
-      return `#${this.$attrs.id || ''}`;
-    },
-  },
-};
-</script>
-
-<template>
-  <timeline-entry-item class="gl-p-5">
-    <timeline-icon class="gl-mr-5 gl-ml-2">
-      <gl-avatar-link target="_blank" :href="authorWebUrl">
-        <gl-avatar :size="32" :src="authorAvatarUrl" :alt="authorName" />
-      </gl-avatar-link>
-    </timeline-icon>
-
-    <div>
-      <div class="gl-display-flex gl-justify-content-space-between">
-        <div class="gl-display-flex gl-align-items-center gl-mb-3">
-          <gl-link
-            :href="authorWebUrl"
-            class="gl-text-black-normal gl-font-weight-bold gl-white-space-nowrap gl-mr-2"
-          >
-            {{ authorName }}
-          </gl-link>
-
-          <gl-link
-            v-if="authorUsername"
-            :href="authorWebUrl"
-            class="gl-text-gray-500 gl-mr-2 gl-white-space-nowrap"
-            data-testid="author-username"
-          >
-            @{{ authorUsername }}
-          </gl-link>
-
-          <span class="gl-text-gray-500 gl-mr-2">·</span>
-
-          <gl-link class="gl-text-gray-500" :href="noteAnchor" data-testid="time-ago-link">
-            <time-ago-tooltip :time="noteCreatedAt" tooltip-placement="bottom" />
-          </gl-link>
-        </div>
-
-        <div data-testid="badges-container">
-          <slot name="badges"></slot>
-        </div>
-      </div>
-
-      <div>
-        <div class="gl-overflow-x-auto gl-overflow-y-hidden">
-          <div v-safe-html="noteBodyHtml" class="md"></div>
-        </div>
-      </div>
-    </div>
-  </timeline-entry-item>
-</template>
diff --git a/app/assets/javascripts/integrations/external_issue/issues_show/components/sidebar/assignee.vue b/app/assets/javascripts/integrations/external_issue/issues_show/components/sidebar/assignee.vue
deleted file mode 100644
index 81048183987d10..00000000000000
--- a/app/assets/javascripts/integrations/external_issue/issues_show/components/sidebar/assignee.vue
+++ /dev/null
@@ -1,86 +0,0 @@
-<script>
-import { GlAvatarLabeled, GlAvatarLink, GlAvatar, GlIcon, GlTooltipDirective } from '@gitlab/ui';
-import { __ } from '~/locale';
-import AssigneeTitle from '~/sidebar/components/assignees/assignee_title.vue';
-
-export default {
-  name: 'ExternalIssuesSidebarAssignee',
-  components: {
-    GlAvatarLabeled,
-    GlAvatarLink,
-    GlAvatar,
-    GlIcon,
-    AssigneeTitle,
-  },
-  directives: {
-    GlTooltip: GlTooltipDirective,
-  },
-  inject: ['userTypeText'],
-  props: {
-    assignee: {
-      type: Object,
-      required: false,
-      default: null,
-    },
-  },
-  computed: {
-    tooltipTitle() {
-      return this.assignee?.name || __('No assignee');
-    },
-    numberOfAssignees() {
-      return this.assignee ? 1 : 0;
-    },
-  },
-  tooltipOptions: {
-    container: 'body',
-    placement: 'left',
-    boundary: 'viewport',
-  },
-};
-</script>
-
-<template>
-  <div>
-    <div class="hide-collapsed">
-      <assignee-title
-        :number-of-assignees="numberOfAssignees"
-        :editable="false"
-        :show-toggle="false"
-        :changing="false"
-      />
-      <gl-avatar-link
-        v-if="assignee"
-        v-gl-tooltip="$options.tooltipOptions"
-        target="_blank"
-        :href="assignee.webUrl"
-        :title="tooltipTitle"
-      >
-        <gl-avatar-labeled
-          :size="32"
-          :src="assignee.avatarUrl"
-          :alt="assignee.name"
-          :entity-name="assignee.name"
-          :label="assignee.name"
-          :sub-label="userTypeText"
-        />
-      </gl-avatar-link>
-      <span v-else class="gl-text-gray-500" data-testid="no-assignee-text">{{ __('None') }}</span>
-    </div>
-
-    <div
-      v-gl-tooltip="$options.tooltipOptions"
-      class="sidebar-collapsed-icon"
-      :title="tooltipTitle"
-      data-testid="sidebar-collapsed-icon-wrapper"
-    >
-      <gl-avatar
-        v-if="assignee"
-        :size="24"
-        :src="assignee.avatarUrl"
-        :alt="assignee.name"
-        :entity-name="assignee.name"
-      />
-      <gl-icon v-else name="user" data-testid="no-assignee-icon" />
-    </div>
-  </div>
-</template>
diff --git a/app/assets/javascripts/integrations/external_issue/issues_show/components/sidebar/external_issues_sidebar_root.vue b/app/assets/javascripts/integrations/external_issue/issues_show/components/sidebar/external_issues_sidebar_root.vue
deleted file mode 100644
index f255bc7468a82f..00000000000000
--- a/app/assets/javascripts/integrations/external_issue/issues_show/components/sidebar/external_issues_sidebar_root.vue
+++ /dev/null
@@ -1,170 +0,0 @@
-<script>
-import { labelsFilterParam } from '~/integrations/external_issue/issues_show/constants';
-import { __ } from '~/locale';
-import LabelsSelect from '~/vue_shared/components/sidebar/labels_select_vue/labels_select_root.vue';
-import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
-import Assignee from './assignee.vue';
-import IssueDueDate from './issue_due_date.vue';
-import IssueField from './issue_field.vue';
-
-export default {
-  name: 'ExternalIssuesSidebar',
-  components: {
-    Assignee,
-    IssueDueDate,
-    IssueField,
-    LabelsSelect,
-  },
-  mixins: [glFeatureFlagsMixin()],
-  inject: {
-    issueLabelsPath: {
-      default: null,
-    },
-    issuesListPath: {
-      default: null,
-    },
-    statusDropdownEmptyText: {
-      default: null,
-    },
-    featureFlagCanEditLabelKey: {
-      default: null,
-    },
-    featureFlagCanEditStatusKey: {
-      default: null,
-    },
-  },
-  props: {
-    sidebarExpanded: {
-      type: Boolean,
-      required: true,
-    },
-    issue: {
-      type: Object,
-      required: true,
-    },
-    isLoadingStatus: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    isUpdatingLabels: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    isUpdatingStatus: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    statuses: {
-      type: Array,
-      required: false,
-      default: () => [],
-    },
-  },
-  data() {
-    return {
-      isEditingLabels: false,
-    };
-  },
-  computed: {
-    assignee() {
-      // Zentao issues have at most 1 assignee
-      return (this.issue.assignees || [])[0];
-    },
-    canUpdateLabels() {
-      return this.glFeatures[this.featureFlagCanEditLabelKey];
-    },
-    canUpdateStatus() {
-      return this.glFeatures[this.featureFlagCanEditStatusKey];
-    },
-  },
-  labelsFilterParam,
-  i18n: {
-    statusTitle: __('Status'),
-    statusDropdownTitle: __('Change status'),
-  },
-  mounted() {
-    this.sidebarEl = document.querySelector('aside.right-sidebar');
-  },
-  methods: {
-    toggleSidebar() {
-      this.$emit('sidebar-toggle');
-    },
-    afterSidebarTransitioned(callback) {
-      // Wait for sidebar expand animation to complete
-      this.sidebarEl.addEventListener('transitionend', callback, { once: true });
-    },
-    expandSidebarAndOpenDropdown(dropdownRef = null) {
-      // Expand the sidebar if not already expanded.
-      if (!this.sidebarExpanded) {
-        this.toggleSidebar();
-      }
-
-      if (dropdownRef) {
-        this.afterSidebarTransitioned(() => {
-          dropdownRef.expand();
-        });
-      }
-    },
-    onIssueLabelsClose() {
-      this.isEditingLabels = false;
-    },
-    onIssueLabelsToggle() {
-      this.expandSidebarAndOpenDropdown();
-      this.afterSidebarTransitioned(() => {
-        this.isEditingLabels = true;
-      });
-    },
-    onIssueLabelsUpdated(labels) {
-      this.$emit('issue-labels-updated', labels);
-    },
-    onIssueStatusFetch() {
-      this.$emit('issue-status-fetch');
-    },
-    onIssueStatusUpdated(status) {
-      this.$emit('issue-status-updated', status);
-    },
-  },
-};
-</script>
-
-<template>
-  <div>
-    <assignee class="block" :assignee="assignee" />
-    <issue-due-date :due-date="issue.dueDate" />
-    <issue-field
-      icon="progress"
-      :can-update="canUpdateStatus"
-      :dropdown-title="$options.i18n.statusDropdownTitle"
-      :dropdown-empty="statusDropdownEmptyText"
-      :items="statuses"
-      :loading="isLoadingStatus"
-      :title="$options.i18n.statusTitle"
-      :updating="isUpdatingStatus"
-      :value="issue.status"
-      @expand-sidebar="expandSidebarAndOpenDropdown"
-      @issue-field-fetch="onIssueStatusFetch"
-      @issue-field-updated="onIssueStatusUpdated"
-    />
-    <labels-select
-      :allow-label-edit="canUpdateLabels"
-      :allow-multiselect="true"
-      :allow-scoped-labels="true"
-      :selected-labels="issue.labels"
-      :labels-fetch-path="issueLabelsPath"
-      :labels-filter-base-path="issuesListPath"
-      :labels-filter-param="$options.labelsFilterParam"
-      :labels-select-in-progress="isUpdatingLabels"
-      :is-editing="isEditingLabels"
-      variant="sidebar"
-      class="block labels js-labels-block"
-      @onDropdownClose="onIssueLabelsClose"
-      @toggleCollapse="onIssueLabelsToggle"
-      @updateSelectedLabels="onIssueLabelsUpdated"
-    >
-      {{ __('None') }}
-    </labels-select>
-  </div>
-</template>
diff --git a/app/assets/javascripts/integrations/external_issue/issues_show/external_issues_show_bundle.js b/app/assets/javascripts/integrations/external_issue/issues_show/external_issues_show_bundle.js
deleted file mode 100644
index d00307ebeb052c..00000000000000
--- a/app/assets/javascripts/integrations/external_issue/issues_show/external_issues_show_bundle.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import Vue from 'vue';
-
-import ExternalIssueShowRoot from './components/external_issues_show_root.vue';
-
-/**
- *
- * @param @required {Object} provides
- *  @type provides: {
- *    failFetchingIssueText: string
- *    failFetchingIssueStatusText: string
- *    failUpdatingIssueLabelsText: string
- *    failUpdatingIssueStatusText: string
- *    featureFlagCanEditLabelKey: string
- *    featureFlagCanEditStatusKey: string
- *    seeMoreDetailText: string
- *    statusDropdownEmptyText: string
- *    titleText: string
- *    userTypeText: string
- *    userTypeTooltipText: string
- *  }
- */
-
-export default function ExternalIssueShowFactory(provides) {
-  return function initZentaoIssueShow({ mountPointSelector }) {
-    const mountPointEl = document.querySelector(mountPointSelector);
-
-    if (!mountPointEl) {
-      return null;
-    }
-
-    const { issuesShowPath, issuesListPath } = mountPointEl.dataset;
-
-    return new Vue({
-      el: mountPointEl,
-      provide: {
-        issuesShowPath,
-        issuesListPath,
-        ...provides,
-      },
-      render: (createElement) => createElement(ExternalIssueShowRoot),
-    });
-  };
-}
diff --git a/ee/app/assets/javascripts/integrations/jira/issues_show/components/note.vue b/ee/app/assets/javascripts/integrations/external_issue/issues_show/components/note.vue
similarity index 93%
rename from ee/app/assets/javascripts/integrations/jira/issues_show/components/note.vue
rename to ee/app/assets/javascripts/integrations/external_issue/issues_show/components/note.vue
index ff7fbd75ad4b05..80f70418a10283 100644
--- a/ee/app/assets/javascripts/integrations/jira/issues_show/components/note.vue
+++ b/ee/app/assets/javascripts/integrations/external_issue/issues_show/components/note.vue
@@ -42,6 +42,16 @@ export default {
       required: false,
       default: undefined,
     },
+    badgeTooltipText: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    badgeText: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   computed: {
     noteAnchor() {
diff --git a/ee/app/assets/javascripts/integrations/jira/issues_show/components/sidebar/assignee.vue b/ee/app/assets/javascripts/integrations/external_issue/issues_show/components/sidebar/assignee.vue
similarity index 100%
rename from ee/app/assets/javascripts/integrations/jira/issues_show/components/sidebar/assignee.vue
rename to ee/app/assets/javascripts/integrations/external_issue/issues_show/components/sidebar/assignee.vue
diff --git a/app/assets/javascripts/integrations/external_issue/issues_show/components/sidebar/issue_due_date.vue b/ee/app/assets/javascripts/integrations/external_issue/issues_show/components/sidebar/issue_due_date.vue
similarity index 100%
rename from app/assets/javascripts/integrations/external_issue/issues_show/components/sidebar/issue_due_date.vue
rename to ee/app/assets/javascripts/integrations/external_issue/issues_show/components/sidebar/issue_due_date.vue
diff --git a/app/assets/javascripts/integrations/external_issue/issues_show/components/sidebar/issue_field.vue b/ee/app/assets/javascripts/integrations/external_issue/issues_show/components/sidebar/issue_field.vue
similarity index 100%
rename from app/assets/javascripts/integrations/external_issue/issues_show/components/sidebar/issue_field.vue
rename to ee/app/assets/javascripts/integrations/external_issue/issues_show/components/sidebar/issue_field.vue
diff --git a/app/assets/javascripts/integrations/external_issue/issues_show/components/sidebar/issue_field_dropdown.vue b/ee/app/assets/javascripts/integrations/external_issue/issues_show/components/sidebar/issue_field_dropdown.vue
similarity index 100%
rename from app/assets/javascripts/integrations/external_issue/issues_show/components/sidebar/issue_field_dropdown.vue
rename to ee/app/assets/javascripts/integrations/external_issue/issues_show/components/sidebar/issue_field_dropdown.vue
diff --git a/app/assets/javascripts/integrations/external_issue/issues_show/constants.js b/ee/app/assets/javascripts/integrations/external_issue/issues_show/constants.js
similarity index 100%
rename from app/assets/javascripts/integrations/external_issue/issues_show/constants.js
rename to ee/app/assets/javascripts/integrations/external_issue/issues_show/constants.js
diff --git a/ee/app/assets/javascripts/integrations/jira/issues_show/components/jira_issues_show_root.vue b/ee/app/assets/javascripts/integrations/jira/issues_show/components/jira_issues_show_root.vue
index 760ef5e8b8ff86..228048cbbfe9b6 100644
--- a/ee/app/assets/javascripts/integrations/jira/issues_show/components/jira_issues_show_root.vue
+++ b/ee/app/assets/javascripts/integrations/jira/issues_show/components/jira_issues_show_root.vue
@@ -7,6 +7,7 @@ import {
   GlBadge,
   GlTooltipDirective as GlTooltip,
 } from '@gitlab/ui';
+import Note from 'ee/integrations/external_issue/issues_show/components/note.vue';
 import { fetchIssue, fetchIssueStatuses, updateIssue } from 'ee/integrations/jira/issues_show/api';
 
 import JiraIssueSidebar from 'ee/integrations/jira/issues_show/components/sidebar/jira_issues_sidebar_root.vue';
@@ -15,7 +16,6 @@ import createFlash from '~/flash';
 import IssuableShow from '~/issuable_show/components/issuable_show_root.vue';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import { s__ } from '~/locale';
-import Note from './note.vue';
 
 export default {
   name: 'JiraIssuesShow',
diff --git a/ee/app/assets/javascripts/integrations/jira/issues_show/components/sidebar/issue_due_date.vue b/ee/app/assets/javascripts/integrations/jira/issues_show/components/sidebar/issue_due_date.vue
deleted file mode 100644
index 66360feda1abfc..00000000000000
--- a/ee/app/assets/javascripts/integrations/jira/issues_show/components/sidebar/issue_due_date.vue
+++ /dev/null
@@ -1,76 +0,0 @@
-<script>
-import { GlIcon, GlTooltipDirective } from '@gitlab/ui';
-import { dateInWords, getDayDifference, parsePikadayDate } from '~/lib/utils/datetime_utility';
-import { __ } from '~/locale';
-
-export default {
-  directives: {
-    GlTooltip: GlTooltipDirective,
-  },
-  components: {
-    GlIcon,
-  },
-  props: {
-    dueDate: {
-      type: String,
-      required: false,
-      default: null,
-    },
-  },
-  computed: {
-    dueDateInWords() {
-      const date = parsePikadayDate(this.dueDate);
-
-      return dateInWords(date, true);
-    },
-    formattedDueDate() {
-      const today = new Date();
-      const date = parsePikadayDate(this.dueDate);
-      const isPastDue = getDayDifference(today, date) < 0;
-
-      let formattedDate = this.dueDateInWords;
-
-      if (isPastDue) {
-        formattedDate += ` (${__('Past due')})`;
-      }
-
-      return formattedDate;
-    },
-    dueDateTooltipProps() {
-      return {
-        boundary: 'viewport',
-        placement: 'left',
-        title: this.dueDate
-          ? `${this.$options.i18n.dueDateTitle}<br>${this.formattedDueDate}`
-          : this.$options.i18n.dueDateTitle,
-      };
-    },
-  },
-  i18n: {
-    dueDateTitle: __('Due date'),
-    none: __('None'),
-  },
-};
-</script>
-
-<template>
-  <div class="block">
-    <div
-      v-gl-tooltip.html="dueDateTooltipProps"
-      class="sidebar-collapsed-icon"
-      data-testid="due-date-collapsed"
-    >
-      <gl-icon name="calendar" />
-      <span v-if="dueDate">{{ dueDateInWords }}</span>
-      <span v-else>{{ $options.i18n.none }}</span>
-    </div>
-
-    <div class="hide-collapsed">
-      <div class="title">{{ $options.i18n.dueDateTitle }}</div>
-      <div class="value" data-testid="due-date-value">
-        <strong v-if="dueDate">{{ formattedDueDate }}</strong>
-        <span v-else class="no-value">{{ $options.i18n.none }}</span>
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/ee/app/assets/javascripts/integrations/jira/issues_show/components/sidebar/issue_field.vue b/ee/app/assets/javascripts/integrations/jira/issues_show/components/sidebar/issue_field.vue
deleted file mode 100644
index 2e24d77632f9a4..00000000000000
--- a/ee/app/assets/javascripts/integrations/jira/issues_show/components/sidebar/issue_field.vue
+++ /dev/null
@@ -1,141 +0,0 @@
-<script>
-import { GlIcon, GlTooltipDirective } from '@gitlab/ui';
-import { __ } from '~/locale';
-import SidebarEditableItem from '~/sidebar/components/sidebar_editable_item.vue';
-import IssueFieldDropdown from './issue_field_dropdown.vue';
-
-export default {
-  directives: {
-    GlTooltip: GlTooltipDirective,
-  },
-  components: {
-    GlIcon,
-    IssueFieldDropdown,
-    SidebarEditableItem,
-  },
-  provide() {
-    return {
-      isClassicSidebar: true,
-      canUpdate: this.canUpdate,
-    };
-  },
-  props: {
-    canUpdate: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    dropdownEmpty: {
-      type: String,
-      required: false,
-      default: null,
-    },
-    dropdownTitle: {
-      type: String,
-      required: false,
-      default: null,
-    },
-    icon: {
-      type: String,
-      required: true,
-    },
-    items: {
-      type: Array,
-      required: false,
-      default: () => [],
-    },
-    loading: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    updating: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    title: {
-      type: String,
-      required: true,
-    },
-    value: {
-      type: String,
-      required: false,
-      default: null,
-    },
-  },
-  computed: {
-    tooltipProps() {
-      return {
-        boundary: 'viewport',
-        placement: 'left',
-        title: this.value || this.title,
-      };
-    },
-    valueWithFallback() {
-      return this.value || this.$options.i18n.none;
-    },
-    valueClass() {
-      return {
-        'no-value': !this.value,
-      };
-    },
-  },
-  i18n: {
-    none: __('None'),
-  },
-  methods: {
-    showDropdown() {
-      this.$refs.dropdown.showDropdown();
-      this.$emit('issue-field-fetch');
-    },
-    expandSidebarAndOpenDropdown() {
-      this.$emit('expand-sidebar', this.$refs.editableItem);
-    },
-    onIssueFieldUpdated(value) {
-      this.$emit('issue-field-updated', value);
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="block">
-    <sidebar-editable-item
-      ref="editableItem"
-      :loading="updating"
-      :title="title"
-      @open="showDropdown"
-    >
-      <template #collapsed>
-        <div
-          v-gl-tooltip="tooltipProps"
-          class="sidebar-collapsed-icon"
-          data-testid="field-collapsed"
-          @click="expandSidebarAndOpenDropdown"
-        >
-          <gl-icon :name="icon" />
-        </div>
-
-        <div class="hide-collapsed">
-          <div class="value" data-testid="field-value">
-            <span :class="valueClass">{{ valueWithFallback }}</span>
-          </div>
-        </div>
-      </template>
-
-      <template #default>
-        <issue-field-dropdown
-          v-if="canUpdate"
-          ref="dropdown"
-          :empty-text="dropdownEmpty"
-          :items="items"
-          :loading="loading"
-          :text="valueWithFallback"
-          :title="dropdownTitle"
-          @issue-field-updated="onIssueFieldUpdated"
-        />
-      </template>
-    </sidebar-editable-item>
-  </div>
-</template>
diff --git a/ee/app/assets/javascripts/integrations/jira/issues_show/components/sidebar/issue_field_dropdown.vue b/ee/app/assets/javascripts/integrations/jira/issues_show/components/sidebar/issue_field_dropdown.vue
deleted file mode 100644
index 37df42c80e5a52..00000000000000
--- a/ee/app/assets/javascripts/integrations/jira/issues_show/components/sidebar/issue_field_dropdown.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<script>
-import { GlDropdown, GlDropdownItem, GlDropdownText, GlLoadingIcon } from '@gitlab/ui';
-
-export default {
-  components: {
-    GlDropdown,
-    GlDropdownItem,
-    GlDropdownText,
-    GlLoadingIcon,
-  },
-  props: {
-    emptyText: {
-      type: String,
-      required: false,
-      default: null,
-    },
-    items: {
-      type: Array,
-      required: false,
-      default: () => [],
-    },
-    loading: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
-    text: {
-      type: String,
-      required: false,
-      default: null,
-    },
-    title: {
-      type: String,
-      required: false,
-      default: null,
-    },
-  },
-  computed: {
-    noItems() {
-      return this.items.length === 0;
-    },
-  },
-  methods: {
-    showDropdown() {
-      this.$refs.dropdown.show();
-    },
-    selectItem(item) {
-      this.$emit('issue-field-updated', item.title);
-    },
-  },
-};
-</script>
-
-<template>
-  <gl-dropdown ref="dropdown" :text="text" :header-text="title" block lazy>
-    <div v-if="loading" class="gl-h-13">
-      <gl-loading-icon size="md" />
-    </div>
-    <div v-else>
-      <gl-dropdown-text v-if="noItems">{{ emptyText }}</gl-dropdown-text>
-      <gl-dropdown-item v-for="item in items" :key="item.title" @click="selectItem(item)">
-        {{ item.title }}
-      </gl-dropdown-item>
-    </div>
-  </gl-dropdown>
-</template>
diff --git a/ee/app/assets/javascripts/integrations/jira/issues_show/components/sidebar/jira_issues_sidebar_root.vue b/ee/app/assets/javascripts/integrations/jira/issues_show/components/sidebar/jira_issues_sidebar_root.vue
index d99938d1b58434..c6062d4b46a784 100644
--- a/ee/app/assets/javascripts/integrations/jira/issues_show/components/sidebar/jira_issues_sidebar_root.vue
+++ b/ee/app/assets/javascripts/integrations/jira/issues_show/components/sidebar/jira_issues_sidebar_root.vue
@@ -1,12 +1,12 @@
 <script>
+import Assignee from 'ee/integrations/external_issue/issues_show/components/sidebar/assignee.vue';
+import IssueDueDate from 'ee/integrations/external_issue/issues_show/components/sidebar/issue_due_date.vue';
+import IssueField from 'ee/integrations/external_issue/issues_show/components/sidebar/issue_field.vue';
 import { labelsFilterParam } from 'ee/integrations/jira/issues_show/constants';
 import { __, s__ } from '~/locale';
 import CopyableField from '~/vue_shared/components/sidebar/copyable_field.vue';
 import LabelsSelect from '~/vue_shared/components/sidebar/labels_select_vue/labels_select_root.vue';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
-import Assignee from './assignee.vue';
-import IssueDueDate from './issue_due_date.vue';
-import IssueField from './issue_field.vue';
 
 export default {
   name: 'JiraIssuesSidebar',
diff --git a/ee/spec/frontend/integrations/jira/issues_show/components/__snapshots__/note_spec.js.snap b/ee/spec/frontend/integrations/external_issue/issues_show/components/__snapshots__/note_spec.js.snap
similarity index 100%
rename from ee/spec/frontend/integrations/jira/issues_show/components/__snapshots__/note_spec.js.snap
rename to ee/spec/frontend/integrations/external_issue/issues_show/components/__snapshots__/note_spec.js.snap
diff --git a/ee/spec/frontend/integrations/jira/issues_show/components/note_spec.js b/ee/spec/frontend/integrations/external_issue/issues_show/components/note_spec.js
similarity index 78%
rename from ee/spec/frontend/integrations/jira/issues_show/components/note_spec.js
rename to ee/spec/frontend/integrations/external_issue/issues_show/components/note_spec.js
index c708560cd39af9..da71b2355b67c3 100644
--- a/ee/spec/frontend/integrations/jira/issues_show/components/note_spec.js
+++ b/ee/spec/frontend/integrations/external_issue/issues_show/components/note_spec.js
@@ -1,8 +1,8 @@
 import { shallowMount } from '@vue/test-utils';
-import JiraIssueNote from 'ee/integrations/jira/issues_show/components/note.vue';
+import JiraIssueNote from 'ee/integrations/external_issue/issues_show/components/note.vue';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 
-import { mockJiraIssueComment } from '../mock_data';
+import { mockExternalIssueComment } from '../mock_data';
 
 describe('JiraIssuesNote', () => {
   let wrapper;
@@ -15,11 +15,11 @@ describe('JiraIssuesNote', () => {
     wrapper = extendedWrapper(
       shallowMount(JiraIssueNote, {
         propsData: {
-          authorName: mockJiraIssueComment.author.name,
-          authorWebUrl: mockJiraIssueComment.author.web_url,
-          authorAvatarUrl: mockJiraIssueComment.author.avatar_url,
-          noteCreatedAt: mockJiraIssueComment.created_at,
-          noteBodyHtml: mockJiraIssueComment.body_html,
+          authorName: mockExternalIssueComment.author.name,
+          authorWebUrl: mockExternalIssueComment.author.web_url,
+          authorAvatarUrl: mockExternalIssueComment.author.avatar_url,
+          noteCreatedAt: mockExternalIssueComment.created_at,
+          noteBodyHtml: mockExternalIssueComment.body_html,
           ...props,
         },
         slots,
diff --git a/ee/spec/frontend/integrations/jira/issues_show/components/sidebar/__snapshots__/assignee_spec.js.snap b/ee/spec/frontend/integrations/external_issue/issues_show/components/sidebar/__snapshots__/assignee_spec.js.snap
similarity index 86%
rename from ee/spec/frontend/integrations/jira/issues_show/components/sidebar/__snapshots__/assignee_spec.js.snap
rename to ee/spec/frontend/integrations/external_issue/issues_show/components/sidebar/__snapshots__/assignee_spec.js.snap
index 3ac59e533ac99d..3864ef3db13fe7 100644
--- a/ee/spec/frontend/integrations/jira/issues_show/components/sidebar/__snapshots__/assignee_spec.js.snap
+++ b/ee/spec/frontend/integrations/external_issue/issues_show/components/sidebar/__snapshots__/assignee_spec.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`JiraIssuesSidebarAssignee with assignee template renders avatar components 1`] = `
+exports[`ExternalIssuesSidebarAssignee with assignee template renders avatar components 1`] = `
 <div>
   <div
     class="hide-collapsed"
@@ -44,7 +44,7 @@ exports[`JiraIssuesSidebarAssignee with assignee template renders avatar compone
 </div>
 `;
 
-exports[`JiraIssuesSidebarAssignee with no assignee template renders template without avatar components (the "None" state) 1`] = `
+exports[`ExternalIssuesSidebarAssignee with no assignee template renders template without avatar components (the "None" state) 1`] = `
 <div>
   <div
     class="hide-collapsed"
diff --git a/ee/spec/frontend/integrations/jira/issues_show/components/sidebar/assignee_spec.js b/ee/spec/frontend/integrations/external_issue/issues_show/components/sidebar/assignee_spec.js
similarity index 92%
rename from ee/spec/frontend/integrations/jira/issues_show/components/sidebar/assignee_spec.js
rename to ee/spec/frontend/integrations/external_issue/issues_show/components/sidebar/assignee_spec.js
index c66df42f0f60ae..b587ddd96d284d 100644
--- a/ee/spec/frontend/integrations/jira/issues_show/components/sidebar/assignee_spec.js
+++ b/ee/spec/frontend/integrations/external_issue/issues_show/components/sidebar/assignee_spec.js
@@ -1,15 +1,15 @@
 import { GlAvatarLabeled, GlAvatarLink, GlAvatar } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import Assignee from 'ee/integrations/jira/issues_show/components/sidebar/assignee.vue';
+import Assignee from 'ee/integrations/external_issue/issues_show/components/sidebar/assignee.vue';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import AssigneeTitle from '~/sidebar/components/assignees/assignee_title.vue';
 
-import { mockJiraIssue } from '../../mock_data';
+import { mockExternalIssue } from '../../mock_data';
 
-const mockAssignee = convertObjectPropsToCamelCase(mockJiraIssue.assignees[0], { deep: true });
+const mockAssignee = convertObjectPropsToCamelCase(mockExternalIssue.assignees[0], { deep: true });
 
-describe('JiraIssuesSidebarAssignee', () => {
+describe('ExternalIssuesSidebarAssignee', () => {
   let wrapper;
 
   const findNoAssigneeText = () => wrapper.findByTestId('no-assignee-text');
diff --git a/ee/spec/frontend/integrations/jira/issues_show/components/sidebar/issue_due_date_spec.js b/ee/spec/frontend/integrations/external_issue/issues_show/components/sidebar/issue_due_date_spec.js
similarity index 93%
rename from ee/spec/frontend/integrations/jira/issues_show/components/sidebar/issue_due_date_spec.js
rename to ee/spec/frontend/integrations/external_issue/issues_show/components/sidebar/issue_due_date_spec.js
index 3d24e4198edf3a..5f9db1ab78fc57 100644
--- a/ee/spec/frontend/integrations/jira/issues_show/components/sidebar/issue_due_date_spec.js
+++ b/ee/spec/frontend/integrations/external_issue/issues_show/components/sidebar/issue_due_date_spec.js
@@ -1,6 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
 
-import IssueDueDate from 'ee/integrations/jira/issues_show/components/sidebar/issue_due_date.vue';
+import IssueDueDate from 'ee/integrations/external_issue/issues_show/components/sidebar/issue_due_date.vue';
 
 import { useFakeDate } from 'helpers/fake_date';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
diff --git a/ee/spec/frontend/integrations/jira/issues_show/components/sidebar/issue_field_dropdown_spec.js b/ee/spec/frontend/integrations/external_issue/issues_show/components/sidebar/issue_field_dropdown_spec.js
similarity index 77%
rename from ee/spec/frontend/integrations/jira/issues_show/components/sidebar/issue_field_dropdown_spec.js
rename to ee/spec/frontend/integrations/external_issue/issues_show/components/sidebar/issue_field_dropdown_spec.js
index 6c159bcf5adf22..e063d807520334 100644
--- a/ee/spec/frontend/integrations/jira/issues_show/components/sidebar/issue_field_dropdown_spec.js
+++ b/ee/spec/frontend/integrations/external_issue/issues_show/components/sidebar/issue_field_dropdown_spec.js
@@ -1,9 +1,9 @@
 import { GlDropdownItem, GlLoadingIcon } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 
-import IssueFieldDropdown from 'ee/integrations/jira/issues_show/components/sidebar/issue_field_dropdown.vue';
+import IssueFieldDropdown from 'ee/integrations/external_issue/issues_show/components/sidebar/issue_field_dropdown.vue';
 
-import { mockJiraIssueStatuses } from '../../mock_data';
+import { mockExternalIssueStatuses } from '../../mock_data';
 
 describe('IssueFieldDropdown', () => {
   let wrapper;
@@ -31,9 +31,9 @@ describe('IssueFieldDropdown', () => {
   it.each`
     loading  | items
     ${true}  | ${[]}
-    ${true}  | ${mockJiraIssueStatuses}
+    ${true}  | ${mockExternalIssueStatuses}
     ${false} | ${[]}
-    ${false} | ${mockJiraIssueStatuses}
+    ${false} | ${mockExternalIssueStatuses}
   `('with loading = $loading, items = $items', ({ loading, items }) => {
     createComponent({
       props: {
@@ -47,7 +47,7 @@ describe('IssueFieldDropdown', () => {
     if (!loading) {
       if (items.length) {
         findAllGlDropdownItems().wrappers.forEach((itemWrapper, index) => {
-          expect(itemWrapper.text()).toBe(mockJiraIssueStatuses[index].title);
+          expect(itemWrapper.text()).toBe(mockExternalIssueStatuses[index].title);
         });
       } else {
         expect(wrapper.text()).toBe(emptyText);
diff --git a/ee/spec/frontend/integrations/jira/issues_show/components/sidebar/issue_field_spec.js b/ee/spec/frontend/integrations/external_issue/issues_show/components/sidebar/issue_field_spec.js
similarity index 96%
rename from ee/spec/frontend/integrations/jira/issues_show/components/sidebar/issue_field_spec.js
rename to ee/spec/frontend/integrations/external_issue/issues_show/components/sidebar/issue_field_spec.js
index 16066663ed6375..ced012d4521fd5 100644
--- a/ee/spec/frontend/integrations/jira/issues_show/components/sidebar/issue_field_spec.js
+++ b/ee/spec/frontend/integrations/external_issue/issues_show/components/sidebar/issue_field_spec.js
@@ -1,6 +1,6 @@
 import { GlButton, GlIcon } from '@gitlab/ui';
 
-import IssueField from 'ee/integrations/jira/issues_show/components/sidebar/issue_field.vue';
+import IssueField from 'ee/integrations/external_issue/issues_show/components/sidebar/issue_field.vue';
 
 import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
diff --git a/ee/spec/frontend/integrations/external_issue/issues_show/mock_data.js b/ee/spec/frontend/integrations/external_issue/issues_show/mock_data.js
new file mode 100644
index 00000000000000..79c0c622e6de64
--- /dev/null
+++ b/ee/spec/frontend/integrations/external_issue/issues_show/mock_data.js
@@ -0,0 +1,45 @@
+export const mockExternalIssue = {
+  title: 'FE-2 The second FE issue on Jira',
+  description_html:
+    '<a href="https://jira.reali.sh:8080/projects/FE/issues/FE-2">FE-2</a> The second FE issue on Jira',
+  created_at: '"2021-02-01T04:04:40.833Z"',
+  author: {
+    name: 'Justin Ho',
+    web_url: 'http://127.0.0.1:3000/root',
+    avatar_url: 'http://127.0.0.1:3000/uploads/-/system/user/avatar/1/avatar.png?width=90',
+  },
+  assignees: [
+    {
+      name: 'Justin Ho',
+      web_url: 'http://127.0.0.1:3000/root',
+      avatar_url: 'http://127.0.0.1:3000/uploads/-/system/user/avatar/1/avatar.png?width=90',
+    },
+  ],
+  due_date: '2021-02-14T00:00:00.000Z',
+  labels: [
+    {
+      title: 'In Progress',
+      description: 'Work that is still in progress',
+      color: '#0052CC',
+      text_color: '#FFFFFF',
+    },
+  ],
+  references: {
+    relative: 'FE-2',
+  },
+  state: 'opened',
+  status: 'In Progress',
+};
+
+export const mockExternalIssueComment = {
+  body_html: '<p>hi</p>',
+  created_at: '"2021-02-01T04:04:40.833Z"',
+  author: {
+    name: 'Justin Ho',
+    web_url: 'http://127.0.0.1:3000/root',
+    avatar_url: 'http://127.0.0.1:3000/uploads/-/system/user/avatar/1/avatar.png?width=90',
+  },
+  id: 10000,
+};
+
+export const mockExternalIssueStatuses = [{ title: 'In Progress' }, { title: 'Done' }];
diff --git a/ee/spec/frontend/integrations/jira/issues_show/components/sidebar/jira_issues_sidebar_root_spec.js b/ee/spec/frontend/integrations/jira/issues_show/components/sidebar/jira_issues_sidebar_root_spec.js
index 901e29856dfa33..21baad5a982c97 100644
--- a/ee/spec/frontend/integrations/jira/issues_show/components/sidebar/jira_issues_sidebar_root_spec.js
+++ b/ee/spec/frontend/integrations/jira/issues_show/components/sidebar/jira_issues_sidebar_root_spec.js
@@ -1,7 +1,7 @@
 import { shallowMount } from '@vue/test-utils';
-import Assignee from 'ee/integrations/jira/issues_show/components/sidebar/assignee.vue';
-import IssueDueDate from 'ee/integrations/jira/issues_show/components/sidebar/issue_due_date.vue';
-import IssueField from 'ee/integrations/jira/issues_show/components/sidebar/issue_field.vue';
+import Assignee from 'ee/integrations/external_issue/issues_show/components/sidebar/assignee.vue';
+import IssueDueDate from 'ee/integrations/external_issue/issues_show/components/sidebar/issue_due_date.vue';
+import IssueField from 'ee/integrations/external_issue/issues_show/components/sidebar/issue_field.vue';
 import Sidebar from 'ee/integrations/jira/issues_show/components/sidebar/jira_issues_sidebar_root.vue';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import CopyableField from '~/vue_shared/components/sidebar/copyable_field.vue';
-- 
GitLab


From e41a65570c3c1ebd36864a062a890abc2e437e2e Mon Sep 17 00:00:00 2001
From: JeremyWuuuuu <jeremyw@jihulab.com>
Date: Tue, 28 Sep 2021 14:12:49 +0800
Subject: [PATCH 3/4] Move external issues out from integrations

---
 .../components/note.vue                                     | 0
 .../components/sidebar/assignee.vue                         | 0
 .../components/sidebar/issue_due_date.vue                   | 0
 .../components/sidebar/issue_field.vue                      | 0
 .../components/sidebar/issue_field_dropdown.vue             | 0
 .../issues_show => external_issues_show}/constants.js       | 0
 .../jira/issues_show/components/jira_issues_show_root.vue   | 2 +-
 .../components/sidebar/jira_issues_sidebar_root.vue         | 6 +++---
 .../components/__snapshots__/note_spec.js.snap              | 0
 .../components/note_spec.js                                 | 2 +-
 .../components/sidebar/__snapshots__/assignee_spec.js.snap  | 0
 .../components/sidebar/assignee_spec.js                     | 2 +-
 .../components/sidebar/issue_due_date_spec.js               | 2 +-
 .../components/sidebar/issue_field_dropdown_spec.js         | 2 +-
 .../components/sidebar/issue_field_spec.js                  | 2 +-
 .../issues_show => external_issues_show}/mock_data.js       | 0
 .../components/sidebar/jira_issues_sidebar_root_spec.js     | 6 +++---
 17 files changed, 12 insertions(+), 12 deletions(-)
 rename ee/app/assets/javascripts/{integrations/external_issue/issues_show => external_issues_show}/components/note.vue (100%)
 rename ee/app/assets/javascripts/{integrations/external_issue/issues_show => external_issues_show}/components/sidebar/assignee.vue (100%)
 rename ee/app/assets/javascripts/{integrations/external_issue/issues_show => external_issues_show}/components/sidebar/issue_due_date.vue (100%)
 rename ee/app/assets/javascripts/{integrations/external_issue/issues_show => external_issues_show}/components/sidebar/issue_field.vue (100%)
 rename ee/app/assets/javascripts/{integrations/external_issue/issues_show => external_issues_show}/components/sidebar/issue_field_dropdown.vue (100%)
 rename ee/app/assets/javascripts/{integrations/external_issue/issues_show => external_issues_show}/constants.js (100%)
 rename ee/spec/frontend/{integrations/external_issue/issues_show => external_issues_show}/components/__snapshots__/note_spec.js.snap (100%)
 rename ee/spec/frontend/{integrations/external_issue/issues_show => external_issues_show}/components/note_spec.js (95%)
 rename ee/spec/frontend/{integrations/external_issue/issues_show => external_issues_show}/components/sidebar/__snapshots__/assignee_spec.js.snap (100%)
 rename ee/spec/frontend/{integrations/external_issue/issues_show => external_issues_show}/components/sidebar/assignee_spec.js (97%)
 rename ee/spec/frontend/{integrations/external_issue/issues_show => external_issues_show}/components/sidebar/issue_due_date_spec.js (93%)
 rename ee/spec/frontend/{integrations/external_issue/issues_show => external_issues_show}/components/sidebar/issue_field_dropdown_spec.js (92%)
 rename ee/spec/frontend/{integrations/external_issue/issues_show => external_issues_show}/components/sidebar/issue_field_spec.js (96%)
 rename ee/spec/frontend/{integrations/external_issue/issues_show => external_issues_show}/mock_data.js (100%)

diff --git a/ee/app/assets/javascripts/integrations/external_issue/issues_show/components/note.vue b/ee/app/assets/javascripts/external_issues_show/components/note.vue
similarity index 100%
rename from ee/app/assets/javascripts/integrations/external_issue/issues_show/components/note.vue
rename to ee/app/assets/javascripts/external_issues_show/components/note.vue
diff --git a/ee/app/assets/javascripts/integrations/external_issue/issues_show/components/sidebar/assignee.vue b/ee/app/assets/javascripts/external_issues_show/components/sidebar/assignee.vue
similarity index 100%
rename from ee/app/assets/javascripts/integrations/external_issue/issues_show/components/sidebar/assignee.vue
rename to ee/app/assets/javascripts/external_issues_show/components/sidebar/assignee.vue
diff --git a/ee/app/assets/javascripts/integrations/external_issue/issues_show/components/sidebar/issue_due_date.vue b/ee/app/assets/javascripts/external_issues_show/components/sidebar/issue_due_date.vue
similarity index 100%
rename from ee/app/assets/javascripts/integrations/external_issue/issues_show/components/sidebar/issue_due_date.vue
rename to ee/app/assets/javascripts/external_issues_show/components/sidebar/issue_due_date.vue
diff --git a/ee/app/assets/javascripts/integrations/external_issue/issues_show/components/sidebar/issue_field.vue b/ee/app/assets/javascripts/external_issues_show/components/sidebar/issue_field.vue
similarity index 100%
rename from ee/app/assets/javascripts/integrations/external_issue/issues_show/components/sidebar/issue_field.vue
rename to ee/app/assets/javascripts/external_issues_show/components/sidebar/issue_field.vue
diff --git a/ee/app/assets/javascripts/integrations/external_issue/issues_show/components/sidebar/issue_field_dropdown.vue b/ee/app/assets/javascripts/external_issues_show/components/sidebar/issue_field_dropdown.vue
similarity index 100%
rename from ee/app/assets/javascripts/integrations/external_issue/issues_show/components/sidebar/issue_field_dropdown.vue
rename to ee/app/assets/javascripts/external_issues_show/components/sidebar/issue_field_dropdown.vue
diff --git a/ee/app/assets/javascripts/integrations/external_issue/issues_show/constants.js b/ee/app/assets/javascripts/external_issues_show/constants.js
similarity index 100%
rename from ee/app/assets/javascripts/integrations/external_issue/issues_show/constants.js
rename to ee/app/assets/javascripts/external_issues_show/constants.js
diff --git a/ee/app/assets/javascripts/integrations/jira/issues_show/components/jira_issues_show_root.vue b/ee/app/assets/javascripts/integrations/jira/issues_show/components/jira_issues_show_root.vue
index 228048cbbfe9b6..bec8bd9a5153ee 100644
--- a/ee/app/assets/javascripts/integrations/jira/issues_show/components/jira_issues_show_root.vue
+++ b/ee/app/assets/javascripts/integrations/jira/issues_show/components/jira_issues_show_root.vue
@@ -7,7 +7,7 @@ import {
   GlBadge,
   GlTooltipDirective as GlTooltip,
 } from '@gitlab/ui';
-import Note from 'ee/integrations/external_issue/issues_show/components/note.vue';
+import Note from 'ee/external_issues_show/components/note.vue';
 import { fetchIssue, fetchIssueStatuses, updateIssue } from 'ee/integrations/jira/issues_show/api';
 
 import JiraIssueSidebar from 'ee/integrations/jira/issues_show/components/sidebar/jira_issues_sidebar_root.vue';
diff --git a/ee/app/assets/javascripts/integrations/jira/issues_show/components/sidebar/jira_issues_sidebar_root.vue b/ee/app/assets/javascripts/integrations/jira/issues_show/components/sidebar/jira_issues_sidebar_root.vue
index c6062d4b46a784..bdc2b28e1a70dd 100644
--- a/ee/app/assets/javascripts/integrations/jira/issues_show/components/sidebar/jira_issues_sidebar_root.vue
+++ b/ee/app/assets/javascripts/integrations/jira/issues_show/components/sidebar/jira_issues_sidebar_root.vue
@@ -1,7 +1,7 @@
 <script>
-import Assignee from 'ee/integrations/external_issue/issues_show/components/sidebar/assignee.vue';
-import IssueDueDate from 'ee/integrations/external_issue/issues_show/components/sidebar/issue_due_date.vue';
-import IssueField from 'ee/integrations/external_issue/issues_show/components/sidebar/issue_field.vue';
+import Assignee from 'ee/external_issues_show/components/sidebar/assignee.vue';
+import IssueDueDate from 'ee/external_issues_show/components/sidebar/issue_due_date.vue';
+import IssueField from 'ee/external_issues_show/components/sidebar/issue_field.vue';
 import { labelsFilterParam } from 'ee/integrations/jira/issues_show/constants';
 import { __, s__ } from '~/locale';
 import CopyableField from '~/vue_shared/components/sidebar/copyable_field.vue';
diff --git a/ee/spec/frontend/integrations/external_issue/issues_show/components/__snapshots__/note_spec.js.snap b/ee/spec/frontend/external_issues_show/components/__snapshots__/note_spec.js.snap
similarity index 100%
rename from ee/spec/frontend/integrations/external_issue/issues_show/components/__snapshots__/note_spec.js.snap
rename to ee/spec/frontend/external_issues_show/components/__snapshots__/note_spec.js.snap
diff --git a/ee/spec/frontend/integrations/external_issue/issues_show/components/note_spec.js b/ee/spec/frontend/external_issues_show/components/note_spec.js
similarity index 95%
rename from ee/spec/frontend/integrations/external_issue/issues_show/components/note_spec.js
rename to ee/spec/frontend/external_issues_show/components/note_spec.js
index da71b2355b67c3..636d7179b91f13 100644
--- a/ee/spec/frontend/integrations/external_issue/issues_show/components/note_spec.js
+++ b/ee/spec/frontend/external_issues_show/components/note_spec.js
@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import JiraIssueNote from 'ee/integrations/external_issue/issues_show/components/note.vue';
+import JiraIssueNote from 'ee/external_issues_show/components/note.vue';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 
 import { mockExternalIssueComment } from '../mock_data';
diff --git a/ee/spec/frontend/integrations/external_issue/issues_show/components/sidebar/__snapshots__/assignee_spec.js.snap b/ee/spec/frontend/external_issues_show/components/sidebar/__snapshots__/assignee_spec.js.snap
similarity index 100%
rename from ee/spec/frontend/integrations/external_issue/issues_show/components/sidebar/__snapshots__/assignee_spec.js.snap
rename to ee/spec/frontend/external_issues_show/components/sidebar/__snapshots__/assignee_spec.js.snap
diff --git a/ee/spec/frontend/integrations/external_issue/issues_show/components/sidebar/assignee_spec.js b/ee/spec/frontend/external_issues_show/components/sidebar/assignee_spec.js
similarity index 97%
rename from ee/spec/frontend/integrations/external_issue/issues_show/components/sidebar/assignee_spec.js
rename to ee/spec/frontend/external_issues_show/components/sidebar/assignee_spec.js
index b587ddd96d284d..6cb80536449874 100644
--- a/ee/spec/frontend/integrations/external_issue/issues_show/components/sidebar/assignee_spec.js
+++ b/ee/spec/frontend/external_issues_show/components/sidebar/assignee_spec.js
@@ -1,6 +1,6 @@
 import { GlAvatarLabeled, GlAvatarLink, GlAvatar } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import Assignee from 'ee/integrations/external_issue/issues_show/components/sidebar/assignee.vue';
+import Assignee from 'ee/external_issues_show/components/sidebar/assignee.vue';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import AssigneeTitle from '~/sidebar/components/assignees/assignee_title.vue';
diff --git a/ee/spec/frontend/integrations/external_issue/issues_show/components/sidebar/issue_due_date_spec.js b/ee/spec/frontend/external_issues_show/components/sidebar/issue_due_date_spec.js
similarity index 93%
rename from ee/spec/frontend/integrations/external_issue/issues_show/components/sidebar/issue_due_date_spec.js
rename to ee/spec/frontend/external_issues_show/components/sidebar/issue_due_date_spec.js
index 5f9db1ab78fc57..3c86b080dcf2f3 100644
--- a/ee/spec/frontend/integrations/external_issue/issues_show/components/sidebar/issue_due_date_spec.js
+++ b/ee/spec/frontend/external_issues_show/components/sidebar/issue_due_date_spec.js
@@ -1,6 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
 
-import IssueDueDate from 'ee/integrations/external_issue/issues_show/components/sidebar/issue_due_date.vue';
+import IssueDueDate from 'ee/external_issues_show/components/sidebar/issue_due_date.vue';
 
 import { useFakeDate } from 'helpers/fake_date';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
diff --git a/ee/spec/frontend/integrations/external_issue/issues_show/components/sidebar/issue_field_dropdown_spec.js b/ee/spec/frontend/external_issues_show/components/sidebar/issue_field_dropdown_spec.js
similarity index 92%
rename from ee/spec/frontend/integrations/external_issue/issues_show/components/sidebar/issue_field_dropdown_spec.js
rename to ee/spec/frontend/external_issues_show/components/sidebar/issue_field_dropdown_spec.js
index e063d807520334..c9be0498261104 100644
--- a/ee/spec/frontend/integrations/external_issue/issues_show/components/sidebar/issue_field_dropdown_spec.js
+++ b/ee/spec/frontend/external_issues_show/components/sidebar/issue_field_dropdown_spec.js
@@ -1,7 +1,7 @@
 import { GlDropdownItem, GlLoadingIcon } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 
-import IssueFieldDropdown from 'ee/integrations/external_issue/issues_show/components/sidebar/issue_field_dropdown.vue';
+import IssueFieldDropdown from 'ee/external_issues_show/components/sidebar/issue_field_dropdown.vue';
 
 import { mockExternalIssueStatuses } from '../../mock_data';
 
diff --git a/ee/spec/frontend/integrations/external_issue/issues_show/components/sidebar/issue_field_spec.js b/ee/spec/frontend/external_issues_show/components/sidebar/issue_field_spec.js
similarity index 96%
rename from ee/spec/frontend/integrations/external_issue/issues_show/components/sidebar/issue_field_spec.js
rename to ee/spec/frontend/external_issues_show/components/sidebar/issue_field_spec.js
index ced012d4521fd5..4efa0e173fd685 100644
--- a/ee/spec/frontend/integrations/external_issue/issues_show/components/sidebar/issue_field_spec.js
+++ b/ee/spec/frontend/external_issues_show/components/sidebar/issue_field_spec.js
@@ -1,6 +1,6 @@
 import { GlButton, GlIcon } from '@gitlab/ui';
 
-import IssueField from 'ee/integrations/external_issue/issues_show/components/sidebar/issue_field.vue';
+import IssueField from 'ee/external_issues_show/components/sidebar/issue_field.vue';
 
 import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
diff --git a/ee/spec/frontend/integrations/external_issue/issues_show/mock_data.js b/ee/spec/frontend/external_issues_show/mock_data.js
similarity index 100%
rename from ee/spec/frontend/integrations/external_issue/issues_show/mock_data.js
rename to ee/spec/frontend/external_issues_show/mock_data.js
diff --git a/ee/spec/frontend/integrations/jira/issues_show/components/sidebar/jira_issues_sidebar_root_spec.js b/ee/spec/frontend/integrations/jira/issues_show/components/sidebar/jira_issues_sidebar_root_spec.js
index 21baad5a982c97..f3c9e1c887a9da 100644
--- a/ee/spec/frontend/integrations/jira/issues_show/components/sidebar/jira_issues_sidebar_root_spec.js
+++ b/ee/spec/frontend/integrations/jira/issues_show/components/sidebar/jira_issues_sidebar_root_spec.js
@@ -1,7 +1,7 @@
 import { shallowMount } from '@vue/test-utils';
-import Assignee from 'ee/integrations/external_issue/issues_show/components/sidebar/assignee.vue';
-import IssueDueDate from 'ee/integrations/external_issue/issues_show/components/sidebar/issue_due_date.vue';
-import IssueField from 'ee/integrations/external_issue/issues_show/components/sidebar/issue_field.vue';
+import Assignee from 'ee/external_issues_show/components/sidebar/assignee.vue';
+import IssueDueDate from 'ee/external_issues_show/components/sidebar/issue_due_date.vue';
+import IssueField from 'ee/external_issues_show/components/sidebar/issue_field.vue';
 import Sidebar from 'ee/integrations/jira/issues_show/components/sidebar/jira_issues_sidebar_root.vue';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import CopyableField from '~/vue_shared/components/sidebar/copyable_field.vue';
-- 
GitLab


From df7681483780cd19d5236ada556ee93c146e063f Mon Sep 17 00:00:00 2001
From: JeremyWuuuuu <jeremyw@jihulab.com>
Date: Wed, 29 Sep 2021 09:09:26 +0800
Subject: [PATCH 4/4] Remove unused injection

---
 .../javascripts/external_issues_show/components/note.vue     | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/ee/app/assets/javascripts/external_issues_show/components/note.vue b/ee/app/assets/javascripts/external_issues_show/components/note.vue
index 80f70418a10283..43a53febb5eb5f 100644
--- a/ee/app/assets/javascripts/external_issues_show/components/note.vue
+++ b/ee/app/assets/javascripts/external_issues_show/components/note.vue
@@ -42,11 +42,6 @@ export default {
       required: false,
       default: undefined,
     },
-    badgeTooltipText: {
-      type: String,
-      required: false,
-      default: '',
-    },
     badgeText: {
       type: String,
       required: false,
-- 
GitLab