From 5ab405a202b621415eb3ce919ef8933f105a03f7 Mon Sep 17 00:00:00 2001
From: JeremyWuuuuu <jeremyw@jihulab.com>
Date: Thu, 9 Sep 2021 10:34:53 +0800
Subject: [PATCH 01/17] 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 ab2279da9e14ea2960a354adbede8e216e72a997 Mon Sep 17 00:00:00 2001
From: JeremyWuuuuu <jeremyw@jihulab.com>
Date: Thu, 16 Sep 2021 11:14:17 +0800
Subject: [PATCH 02/17] 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 ------------------
 .../sidebar/external_issues_sidebar_root.vue  | 170 --------------
 .../external_issues_show_bundle.js            |  43 ----
 .../issues_show/components/note.vue           |   5 +
 .../components/sidebar/assignee.vue           |   5 +-
 .../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
 .../__snapshots__/note_spec.js.snap           |  32 +++
 .../issues_show/components/note_spec.js       |  70 ++++++
 .../__snapshots__/assignee_spec.js.snap       |  76 ++++++
 .../components/sidebar/assignee_spec.js       | 121 ++++++++++
 .../components/sidebar/issue_due_date_spec.js |  69 ++++++
 .../sidebar/issue_field_dropdown_spec.js      |  57 +++++
 .../components/sidebar/issue_field_spec.js    | 117 ++++++++++
 .../external_issue/issues_show/mock_data.js   |  45 ++++
 .../sidebar/jira_issues_sidebar_root_spec.js  |   6 +
 19 files changed, 600 insertions(+), 472 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/sidebar/external_issues_sidebar_root.vue
 delete mode 100644 app/assets/javascripts/integrations/external_issue/issues_show/external_issues_show_bundle.js
 rename {app => ee/app}/assets/javascripts/integrations/external_issue/issues_show/components/note.vue (96%)
 rename {app => ee/app}/assets/javascripts/integrations/external_issue/issues_show/components/sidebar/assignee.vue (94%)
 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%)
 create mode 100644 ee/spec/frontend/integrations/external_issue/issues_show/components/__snapshots__/note_spec.js.snap
 create mode 100644 ee/spec/frontend/integrations/external_issue/issues_show/components/note_spec.js
 create mode 100644 ee/spec/frontend/integrations/external_issue/issues_show/components/sidebar/__snapshots__/assignee_spec.js.snap
 create mode 100644 ee/spec/frontend/integrations/external_issue/issues_show/components/sidebar/assignee_spec.js
 create mode 100644 ee/spec/frontend/integrations/external_issue/issues_show/components/sidebar/issue_due_date_spec.js
 create mode 100644 ee/spec/frontend/integrations/external_issue/issues_show/components/sidebar/issue_field_dropdown_spec.js
 create mode 100644 ee/spec/frontend/integrations/external_issue/issues_show/components/sidebar/issue_field_spec.js
 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/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/app/assets/javascripts/integrations/external_issue/issues_show/components/note.vue b/ee/app/assets/javascripts/integrations/external_issue/issues_show/components/note.vue
similarity index 96%
rename from app/assets/javascripts/integrations/external_issue/issues_show/components/note.vue
rename to ee/app/assets/javascripts/integrations/external_issue/issues_show/components/note.vue
index ff7fbd75ad4b05..43a53febb5eb5f 100644
--- a/app/assets/javascripts/integrations/external_issue/issues_show/components/note.vue
+++ b/ee/app/assets/javascripts/integrations/external_issue/issues_show/components/note.vue
@@ -42,6 +42,11 @@ export default {
       required: false,
       default: undefined,
     },
+    badgeText: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   computed: {
     noteAnchor() {
diff --git a/app/assets/javascripts/integrations/external_issue/issues_show/components/sidebar/assignee.vue b/ee/app/assets/javascripts/integrations/external_issue/issues_show/components/sidebar/assignee.vue
similarity index 94%
rename from app/assets/javascripts/integrations/external_issue/issues_show/components/sidebar/assignee.vue
rename to ee/app/assets/javascripts/integrations/external_issue/issues_show/components/sidebar/assignee.vue
index 81048183987d10..5e2a22789c7f66 100644
--- a/app/assets/javascripts/integrations/external_issue/issues_show/components/sidebar/assignee.vue
+++ b/ee/app/assets/javascripts/integrations/external_issue/issues_show/components/sidebar/assignee.vue
@@ -4,7 +4,7 @@ import { __ } from '~/locale';
 import AssigneeTitle from '~/sidebar/components/assignees/assignee_title.vue';
 
 export default {
-  name: 'ExternalIssuesSidebarAssignee',
+  name: 'JiraIssuesSidebarAssignee',
   components: {
     GlAvatarLabeled,
     GlAvatarLink,
@@ -15,7 +15,6 @@ export default {
   directives: {
     GlTooltip: GlTooltipDirective,
   },
-  inject: ['userTypeText'],
   props: {
     assignee: {
       type: Object,
@@ -61,7 +60,7 @@ export default {
           :alt="assignee.name"
           :entity-name="assignee.name"
           :label="assignee.name"
-          :sub-label="userTypeText"
+          :sub-label="__('Jira user')"
         />
       </gl-avatar-link>
       <span v-else class="gl-text-gray-500" data-testid="no-assignee-text">{{ __('None') }}</span>
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/spec/frontend/integrations/external_issue/issues_show/components/__snapshots__/note_spec.js.snap b/ee/spec/frontend/integrations/external_issue/issues_show/components/__snapshots__/note_spec.js.snap
new file mode 100644
index 00000000000000..e93474eaad6ac0
--- /dev/null
+++ b/ee/spec/frontend/integrations/external_issue/issues_show/components/__snapshots__/note_spec.js.snap
@@ -0,0 +1,32 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`JiraIssuesNote template renders note 1`] = `
+"<timeline-entry-item-stub class=\\"gl-p-5\\">
+  <timeline-icon-stub class=\\"gl-mr-5 gl-ml-2\\">
+    <gl-avatar-link-stub target=\\"_blank\\" href=\\"http://127.0.0.1:3000/root\\">
+      <gl-avatar-stub entityid=\\"0\\" entityname=\\"\\" src=\\"http://127.0.0.1:3000/uploads/-/system/user/avatar/1/avatar.png?width=90\\" alt=\\"Justin Ho\\" size=\\"32\\" shape=\\"circle\\"></gl-avatar-stub>
+    </gl-avatar-link-stub>
+  </timeline-icon-stub>
+  <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-stub href=\\"http://127.0.0.1:3000/root\\" class=\\"gl-text-black-normal gl-font-weight-bold gl-white-space-nowrap gl-mr-2\\">
+          Justin Ho
+        </gl-link-stub>
+        <!----> <span class=\\"gl-text-gray-500 gl-mr-2\\">·</span>
+        <gl-link-stub href=\\"#\\" data-testid=\\"time-ago-link\\" class=\\"gl-text-gray-500\\">
+          <time-ago-tooltip-stub time=\\"&quot;2021-02-01T04:04:40.833Z&quot;\\" tooltipplacement=\\"bottom\\" cssclass=\\"\\"></time-ago-tooltip-stub>
+        </gl-link-stub>
+      </div>
+      <div data-testid=\\"badges-container\\"></div>
+    </div>
+    <div>
+      <div class=\\"gl-overflow-x-auto gl-overflow-y-hidden\\">
+        <div class=\\"md\\">
+          <p>hi</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</timeline-entry-item-stub>"
+`;
diff --git a/ee/spec/frontend/integrations/external_issue/issues_show/components/note_spec.js b/ee/spec/frontend/integrations/external_issue/issues_show/components/note_spec.js
new file mode 100644
index 00000000000000..636d7179b91f13
--- /dev/null
+++ b/ee/spec/frontend/integrations/external_issue/issues_show/components/note_spec.js
@@ -0,0 +1,70 @@
+import { shallowMount } from '@vue/test-utils';
+import JiraIssueNote from 'ee/external_issues_show/components/note.vue';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+
+import { mockExternalIssueComment } from '../mock_data';
+
+describe('JiraIssuesNote', () => {
+  let wrapper;
+
+  const findTimeAgoLink = () => wrapper.findByTestId('time-ago-link');
+  const findBadgesContainer = () => wrapper.findByTestId('badges-container');
+  const findAuthorUsernameLink = () => wrapper.findByTestId('author-username');
+
+  const createComponent = ({ props, slots } = {}) => {
+    wrapper = extendedWrapper(
+      shallowMount(JiraIssueNote, {
+        propsData: {
+          authorName: mockExternalIssueComment.author.name,
+          authorWebUrl: mockExternalIssueComment.author.web_url,
+          authorAvatarUrl: mockExternalIssueComment.author.avatar_url,
+          noteCreatedAt: mockExternalIssueComment.created_at,
+          noteBodyHtml: mockExternalIssueComment.body_html,
+          ...props,
+        },
+        slots,
+      }),
+    );
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('template', () => {
+    it('renders note', () => {
+      createComponent();
+
+      expect(wrapper.html()).toMatchSnapshot();
+    });
+
+    it.each`
+      id           | expectedTimeAgoHref
+      ${undefined} | ${'#'}
+      ${'1234'}    | ${'#1234'}
+    `(
+      'sets "time ago" link to $expectedTimeAgoHref when id is $id',
+      ({ id, expectedTimeAgoHref }) => {
+        createComponent({ props: { id } });
+
+        expect(findTimeAgoLink().attributes('href')).toBe(expectedTimeAgoHref);
+      },
+    );
+
+    describe('with badge slot', () => {
+      it('renders slot content', () => {
+        createComponent({ slots: { badges: 'testing badges content' } });
+
+        expect(findBadgesContainer().html()).toContain('testing badges content');
+      });
+    });
+
+    describe('with author username', () => {
+      it('renders slot content', () => {
+        createComponent({ props: { authorUsername: 'testuser' } });
+
+        expect(findAuthorUsernameLink().html()).toContain('testuser');
+      });
+    });
+  });
+});
diff --git a/ee/spec/frontend/integrations/external_issue/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
new file mode 100644
index 00000000000000..3864ef3db13fe7
--- /dev/null
+++ b/ee/spec/frontend/integrations/external_issue/issues_show/components/sidebar/__snapshots__/assignee_spec.js.snap
@@ -0,0 +1,76 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ExternalIssuesSidebarAssignee with assignee template renders avatar components 1`] = `
+<div>
+  <div
+    class="hide-collapsed"
+  >
+    <assignee-title-stub
+      numberofassignees="1"
+    />
+     
+    <gl-avatar-link-stub
+      href="http://127.0.0.1:3000/root"
+      target="_blank"
+      title="Justin Ho"
+    >
+      <gl-avatar-labeled-stub
+        alt="Justin Ho"
+        entity-name="Justin Ho"
+        label="Justin Ho"
+        labellink=""
+        size="32"
+        src="http://127.0.0.1:3000/uploads/-/system/user/avatar/1/avatar.png?width=90"
+        sublabel="Jira user"
+        sublabellink=""
+      />
+    </gl-avatar-link-stub>
+  </div>
+   
+  <div
+    class="sidebar-collapsed-icon"
+    data-testid="sidebar-collapsed-icon-wrapper"
+    title="Justin Ho"
+  >
+    <gl-avatar-stub
+      alt="Justin Ho"
+      entityid="0"
+      entityname="Justin Ho"
+      shape="circle"
+      size="24"
+      src="http://127.0.0.1:3000/uploads/-/system/user/avatar/1/avatar.png?width=90"
+    />
+  </div>
+</div>
+`;
+
+exports[`ExternalIssuesSidebarAssignee with no assignee template renders template without avatar components (the "None" state) 1`] = `
+<div>
+  <div
+    class="hide-collapsed"
+  >
+    <assignee-title-stub
+      numberofassignees="0"
+    />
+     
+    <span
+      class="gl-text-gray-500"
+      data-testid="no-assignee-text"
+    >
+      None
+    </span>
+  </div>
+   
+  <div
+    class="sidebar-collapsed-icon"
+    data-testid="sidebar-collapsed-icon-wrapper"
+    title="No assignee"
+  >
+    <gl-icon-stub
+      data-testid="no-assignee-icon"
+      name="user"
+      size="16"
+    />
+  </div>
+</div>
+`;
diff --git a/ee/spec/frontend/integrations/external_issue/issues_show/components/sidebar/assignee_spec.js b/ee/spec/frontend/integrations/external_issue/issues_show/components/sidebar/assignee_spec.js
new file mode 100644
index 00000000000000..6cb80536449874
--- /dev/null
+++ b/ee/spec/frontend/integrations/external_issue/issues_show/components/sidebar/assignee_spec.js
@@ -0,0 +1,121 @@
+import { GlAvatarLabeled, GlAvatarLink, GlAvatar } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+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';
+
+import { mockExternalIssue } from '../../mock_data';
+
+const mockAssignee = convertObjectPropsToCamelCase(mockExternalIssue.assignees[0], { deep: true });
+
+describe('ExternalIssuesSidebarAssignee', () => {
+  let wrapper;
+
+  const findNoAssigneeText = () => wrapper.findByTestId('no-assignee-text');
+  const findNoAssigneeIcon = () => wrapper.findByTestId('no-assignee-text');
+  const findAvatar = () => wrapper.find(GlAvatar);
+  const findAvatarLabeled = () => wrapper.find(GlAvatarLabeled);
+  const findAvatarLink = () => wrapper.find(GlAvatarLink);
+  const findSidebarCollapsedIconWrapper = () =>
+    wrapper.findByTestId('sidebar-collapsed-icon-wrapper');
+
+  const createComponent = ({ assignee } = {}) => {
+    wrapper = extendedWrapper(
+      shallowMount(Assignee, {
+        propsData: {
+          assignee,
+        },
+      }),
+    );
+  };
+
+  afterEach(() => {
+    if (wrapper) {
+      wrapper.destroy();
+      wrapper = null;
+    }
+  });
+
+  describe('with assignee', () => {
+    beforeEach(() => {
+      createComponent({ assignee: mockAssignee });
+    });
+
+    describe('template', () => {
+      it('renders avatar components', () => {
+        expect(wrapper.element).toMatchSnapshot();
+      });
+
+      it('renders GlAvatarLink with correct props', () => {
+        const avatarLink = findAvatarLink();
+
+        expect(avatarLink.exists()).toBe(true);
+        expect(avatarLink.attributes()).toMatchObject({
+          href: mockAssignee.webUrl,
+          title: mockAssignee.name,
+        });
+      });
+
+      it('renders GlAvatarLabeled with correct props', () => {
+        const avatarLabeled = findAvatarLabeled();
+
+        expect(avatarLabeled.exists()).toBe(true);
+        expect(avatarLabeled.attributes()).toMatchObject({
+          src: mockAssignee.avatarUrl,
+          alt: mockAssignee.name,
+          'entity-name': mockAssignee.name,
+        });
+        expect(avatarLabeled.props('label')).toBe(mockAssignee.name);
+      });
+
+      it('renders GlAvatar with correct props', () => {
+        const avatar = findAvatar();
+
+        expect(avatar.exists()).toBe(true);
+        expect(avatar.attributes()).toMatchObject({
+          src: mockAssignee.avatarUrl,
+          alt: mockAssignee.name,
+        });
+        expect(avatar.props('entityName')).toBe(mockAssignee.name);
+      });
+
+      it('renders AssigneeTitle with correct props', () => {
+        const title = wrapper.find(AssigneeTitle);
+
+        expect(title.exists()).toBe(true);
+        expect(title.props('numberOfAssignees')).toBe(1);
+      });
+
+      it('does not render "No assignee" text', () => {
+        expect(findNoAssigneeText().exists()).toBe(false);
+      });
+
+      it('does not render "No assignee" icon', () => {
+        expect(findNoAssigneeIcon().exists()).toBe(false);
+      });
+
+      it('sets `title` attribute of collapsed sidebar wrapper correctly', () => {
+        const iconWrapper = findSidebarCollapsedIconWrapper();
+        expect(iconWrapper.attributes('title')).toBe(mockAssignee.name);
+      });
+    });
+  });
+
+  describe('with no assignee', () => {
+    beforeEach(() => {
+      createComponent({ assignee: undefined });
+    });
+
+    describe('template', () => {
+      it('renders template without avatar components (the "None" state)', () => {
+        expect(wrapper.element).toMatchSnapshot();
+      });
+
+      it('sets `title` attribute of collapsed sidebar wrapper correctly', () => {
+        const iconWrapper = findSidebarCollapsedIconWrapper();
+        expect(iconWrapper.attributes('title')).toBe('No assignee');
+      });
+    });
+  });
+});
diff --git a/ee/spec/frontend/integrations/external_issue/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
new file mode 100644
index 00000000000000..3c86b080dcf2f3
--- /dev/null
+++ b/ee/spec/frontend/integrations/external_issue/issues_show/components/sidebar/issue_due_date_spec.js
@@ -0,0 +1,69 @@
+import { shallowMount } from '@vue/test-utils';
+
+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';
+
+describe('IssueDueDate', () => {
+  let wrapper;
+
+  const createComponent = ({ props = {} } = {}) => {
+    wrapper = extendedWrapper(
+      shallowMount(IssueDueDate, {
+        propsData: props,
+      }),
+    );
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  const findDueDateCollapsed = () => wrapper.findByTestId('due-date-collapsed');
+  const findDueDateValue = () => wrapper.findByTestId('due-date-value');
+
+  describe('when dueDate is null', () => {
+    it('renders "None" as value', () => {
+      createComponent();
+
+      expect(findDueDateCollapsed().text()).toBe('None');
+      expect(findDueDateValue().text()).toBe('None');
+    });
+  });
+
+  describe('when dueDate is in the past', () => {
+    const dueDate = '2021-02-14T00:00:00.000Z';
+
+    useFakeDate(2021, 2, 18);
+
+    it('renders formatted dueDate', () => {
+      createComponent({
+        props: {
+          dueDate,
+        },
+      });
+
+      expect(findDueDateCollapsed().text()).toBe('Feb 14, 2021');
+      expect(findDueDateValue().text()).toBe('Feb 14, 2021 (Past due)');
+    });
+  });
+
+  describe('when dueDate is in the future', () => {
+    const dueDate = '2021-02-14T00:00:00.000Z';
+
+    useFakeDate(2020, 12, 20);
+
+    it('renders formatted dueDate', () => {
+      createComponent({
+        props: {
+          dueDate,
+        },
+      });
+
+      expect(findDueDateCollapsed().text()).toBe('Feb 14, 2021');
+      expect(findDueDateValue().text()).toBe('Feb 14, 2021');
+    });
+  });
+});
diff --git a/ee/spec/frontend/integrations/external_issue/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
new file mode 100644
index 00000000000000..c9be0498261104
--- /dev/null
+++ b/ee/spec/frontend/integrations/external_issue/issues_show/components/sidebar/issue_field_dropdown_spec.js
@@ -0,0 +1,57 @@
+import { GlDropdownItem, GlLoadingIcon } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+
+import IssueFieldDropdown from 'ee/external_issues_show/components/sidebar/issue_field_dropdown.vue';
+
+import { mockExternalIssueStatuses } from '../../mock_data';
+
+describe('IssueFieldDropdown', () => {
+  let wrapper;
+
+  const emptyText = 'empty text';
+  const defaultProps = {
+    emptyText,
+    text: 'issue field text',
+    title: 'issue field header text',
+  };
+
+  const createComponent = ({ props = {} } = {}) => {
+    wrapper = shallowMount(IssueFieldDropdown, {
+      propsData: { ...defaultProps, ...props },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  const findAllGlDropdownItems = () => wrapper.findAllComponents(GlDropdownItem);
+  const findGlLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
+
+  it.each`
+    loading  | items
+    ${true}  | ${[]}
+    ${true}  | ${mockExternalIssueStatuses}
+    ${false} | ${[]}
+    ${false} | ${mockExternalIssueStatuses}
+  `('with loading = $loading, items = $items', ({ loading, items }) => {
+    createComponent({
+      props: {
+        loading,
+        items,
+      },
+    });
+
+    expect(findGlLoadingIcon().exists()).toBe(loading);
+
+    if (!loading) {
+      if (items.length) {
+        findAllGlDropdownItems().wrappers.forEach((itemWrapper, index) => {
+          expect(itemWrapper.text()).toBe(mockExternalIssueStatuses[index].title);
+        });
+      } else {
+        expect(wrapper.text()).toBe(emptyText);
+      }
+    }
+  });
+});
diff --git a/ee/spec/frontend/integrations/external_issue/issues_show/components/sidebar/issue_field_spec.js b/ee/spec/frontend/integrations/external_issue/issues_show/components/sidebar/issue_field_spec.js
new file mode 100644
index 00000000000000..4efa0e173fd685
--- /dev/null
+++ b/ee/spec/frontend/integrations/external_issue/issues_show/components/sidebar/issue_field_spec.js
@@ -0,0 +1,117 @@
+import { GlButton, GlIcon } from '@gitlab/ui';
+
+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';
+
+import SidebarEditableItem from '~/sidebar/components/sidebar_editable_item.vue';
+
+describe('IssueField', () => {
+  let wrapper;
+
+  const defaultProps = {
+    icon: 'calendar',
+    title: 'Field Title',
+  };
+
+  const createComponent = ({ props = {} } = {}) => {
+    wrapper = shallowMountExtended(IssueField, {
+      directives: {
+        GlTooltip: createMockDirective(),
+      },
+      propsData: { ...defaultProps, ...props },
+      stubs: {
+        SidebarEditableItem,
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  const findEditableItem = () => wrapper.findComponent(SidebarEditableItem);
+  const findEditButton = () => wrapper.findComponent(GlButton);
+  const findFieldCollapsed = () => wrapper.findByTestId('field-collapsed');
+  const findFieldCollapsedTooltip = () => getBinding(findFieldCollapsed().element, 'gl-tooltip');
+  const findFieldValue = () => wrapper.findByTestId('field-value');
+  const findGlIcon = () => wrapper.findComponent(GlIcon);
+
+  describe('template', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('renders title', () => {
+      expect(findEditableItem().props('title')).toBe(defaultProps.title);
+    });
+
+    it('renders GlIcon (when collapsed)', () => {
+      expect(findGlIcon().props('name')).toBe(defaultProps.icon);
+    });
+
+    it('does not render "Edit" button', () => {
+      expect(findEditButton().exists()).toBe(false);
+    });
+  });
+
+  describe('without value prop', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('falls back to "None"', () => {
+      expect(findFieldValue().text()).toBe('None');
+    });
+
+    it('renders tooltip (when collapsed) with "value" = title', () => {
+      const tooltip = findFieldCollapsedTooltip();
+
+      expect(tooltip).toBeDefined();
+      expect(tooltip.value.title).toBe(defaultProps.title);
+    });
+  });
+
+  describe('with value prop', () => {
+    const value = 'field value';
+
+    beforeEach(() => {
+      createComponent({
+        props: { value },
+      });
+    });
+
+    it('renders the value', () => {
+      expect(findFieldValue().text()).toBe(value);
+    });
+
+    it('renders tooltip (when collapsed) with "value" = value', () => {
+      const tooltip = findFieldCollapsedTooltip();
+
+      expect(tooltip).toBeDefined();
+      expect(tooltip.value.title).toBe(value);
+    });
+  });
+
+  describe('with canUpdate = true', () => {
+    beforeEach(() => {
+      createComponent({
+        props: { canUpdate: true },
+      });
+    });
+
+    it('renders "Edit" button', () => {
+      expect(findEditButton().text()).toBe('Edit');
+    });
+
+    it('emits "issue-field-fetch" when dropdown is opened', () => {
+      wrapper.vm.$refs.dropdown.showDropdown = jest.fn();
+
+      findEditableItem().vm.$emit('open');
+
+      expect(wrapper.vm.$refs.dropdown.showDropdown).toHaveBeenCalled();
+      expect(wrapper.emitted('issue-field-fetch')).toHaveLength(1);
+    });
+  });
+});
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 f3c9e1c887a9da..c561583f001162 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,13 @@
 import { shallowMount } from '@vue/test-utils';
+<<<<<<< HEAD
 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 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';
+>>>>>>> 25008f18f53 (Extract common sub components from Jira)
 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 a598794ccf9934ab419301c49713b13dbee09fe0 Mon Sep 17 00:00:00 2001
From: JeremyWuuuuu <jeremyw@jihulab.com>
Date: Tue, 28 Sep 2021 14:12:49 +0800
Subject: [PATCH 03/17] Move external issues out from integrations

---
 .../issues_show/components/note.vue           | 105 -------------
 .../components/sidebar/assignee.vue           |  85 -----------
 .../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 --
 .../__snapshots__/note_spec.js.snap           |  32 ----
 .../issues_show/components/note_spec.js       |  70 ---------
 .../__snapshots__/assignee_spec.js.snap       |  76 ----------
 .../components/sidebar/assignee_spec.js       | 121 ---------------
 .../components/sidebar/issue_due_date_spec.js |  69 ---------
 .../sidebar/issue_field_dropdown_spec.js      |  57 -------
 .../components/sidebar/issue_field_spec.js    | 117 ---------------
 .../external_issue/issues_show/mock_data.js   |  45 ------
 .../sidebar/jira_issues_sidebar_root_spec.js  |   7 +-
 15 files changed, 1 insertion(+), 1079 deletions(-)
 delete mode 100644 ee/app/assets/javascripts/integrations/external_issue/issues_show/components/note.vue
 delete mode 100644 ee/app/assets/javascripts/integrations/external_issue/issues_show/components/sidebar/assignee.vue
 delete mode 100644 ee/app/assets/javascripts/integrations/external_issue/issues_show/components/sidebar/issue_due_date.vue
 delete mode 100644 ee/app/assets/javascripts/integrations/external_issue/issues_show/components/sidebar/issue_field.vue
 delete mode 100644 ee/app/assets/javascripts/integrations/external_issue/issues_show/components/sidebar/issue_field_dropdown.vue
 delete mode 100644 ee/app/assets/javascripts/integrations/external_issue/issues_show/constants.js
 delete mode 100644 ee/spec/frontend/integrations/external_issue/issues_show/components/__snapshots__/note_spec.js.snap
 delete mode 100644 ee/spec/frontend/integrations/external_issue/issues_show/components/note_spec.js
 delete mode 100644 ee/spec/frontend/integrations/external_issue/issues_show/components/sidebar/__snapshots__/assignee_spec.js.snap
 delete mode 100644 ee/spec/frontend/integrations/external_issue/issues_show/components/sidebar/assignee_spec.js
 delete mode 100644 ee/spec/frontend/integrations/external_issue/issues_show/components/sidebar/issue_due_date_spec.js
 delete mode 100644 ee/spec/frontend/integrations/external_issue/issues_show/components/sidebar/issue_field_dropdown_spec.js
 delete mode 100644 ee/spec/frontend/integrations/external_issue/issues_show/components/sidebar/issue_field_spec.js
 delete mode 100644 ee/spec/frontend/integrations/external_issue/issues_show/mock_data.js

diff --git a/ee/app/assets/javascripts/integrations/external_issue/issues_show/components/note.vue b/ee/app/assets/javascripts/integrations/external_issue/issues_show/components/note.vue
deleted file mode 100644
index 43a53febb5eb5f..00000000000000
--- a/ee/app/assets/javascripts/integrations/external_issue/issues_show/components/note.vue
+++ /dev/null
@@ -1,105 +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,
-    },
-    badgeText: {
-      type: String,
-      required: false,
-      default: '',
-    },
-  },
-  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/ee/app/assets/javascripts/integrations/external_issue/issues_show/components/sidebar/assignee.vue b/ee/app/assets/javascripts/integrations/external_issue/issues_show/components/sidebar/assignee.vue
deleted file mode 100644
index 5e2a22789c7f66..00000000000000
--- a/ee/app/assets/javascripts/integrations/external_issue/issues_show/components/sidebar/assignee.vue
+++ /dev/null
@@ -1,85 +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: 'JiraIssuesSidebarAssignee',
-  components: {
-    GlAvatarLabeled,
-    GlAvatarLink,
-    GlAvatar,
-    GlIcon,
-    AssigneeTitle,
-  },
-  directives: {
-    GlTooltip: GlTooltipDirective,
-  },
-  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="__('Jira user')"
-        />
-      </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/ee/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
deleted file mode 100644
index 66360feda1abfc..00000000000000
--- a/ee/app/assets/javascripts/integrations/external_issue/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/external_issue/issues_show/components/sidebar/issue_field.vue b/ee/app/assets/javascripts/integrations/external_issue/issues_show/components/sidebar/issue_field.vue
deleted file mode 100644
index 2e24d77632f9a4..00000000000000
--- a/ee/app/assets/javascripts/integrations/external_issue/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/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
deleted file mode 100644
index 37df42c80e5a52..00000000000000
--- a/ee/app/assets/javascripts/integrations/external_issue/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/external_issue/issues_show/constants.js b/ee/app/assets/javascripts/integrations/external_issue/issues_show/constants.js
deleted file mode 100644
index 29bb2dedfd2554..00000000000000
--- a/ee/app/assets/javascripts/integrations/external_issue/issues_show/constants.js
+++ /dev/null
@@ -1,13 +0,0 @@
-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/ee/spec/frontend/integrations/external_issue/issues_show/components/__snapshots__/note_spec.js.snap b/ee/spec/frontend/integrations/external_issue/issues_show/components/__snapshots__/note_spec.js.snap
deleted file mode 100644
index e93474eaad6ac0..00000000000000
--- a/ee/spec/frontend/integrations/external_issue/issues_show/components/__snapshots__/note_spec.js.snap
+++ /dev/null
@@ -1,32 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`JiraIssuesNote template renders note 1`] = `
-"<timeline-entry-item-stub class=\\"gl-p-5\\">
-  <timeline-icon-stub class=\\"gl-mr-5 gl-ml-2\\">
-    <gl-avatar-link-stub target=\\"_blank\\" href=\\"http://127.0.0.1:3000/root\\">
-      <gl-avatar-stub entityid=\\"0\\" entityname=\\"\\" src=\\"http://127.0.0.1:3000/uploads/-/system/user/avatar/1/avatar.png?width=90\\" alt=\\"Justin Ho\\" size=\\"32\\" shape=\\"circle\\"></gl-avatar-stub>
-    </gl-avatar-link-stub>
-  </timeline-icon-stub>
-  <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-stub href=\\"http://127.0.0.1:3000/root\\" class=\\"gl-text-black-normal gl-font-weight-bold gl-white-space-nowrap gl-mr-2\\">
-          Justin Ho
-        </gl-link-stub>
-        <!----> <span class=\\"gl-text-gray-500 gl-mr-2\\">·</span>
-        <gl-link-stub href=\\"#\\" data-testid=\\"time-ago-link\\" class=\\"gl-text-gray-500\\">
-          <time-ago-tooltip-stub time=\\"&quot;2021-02-01T04:04:40.833Z&quot;\\" tooltipplacement=\\"bottom\\" cssclass=\\"\\"></time-ago-tooltip-stub>
-        </gl-link-stub>
-      </div>
-      <div data-testid=\\"badges-container\\"></div>
-    </div>
-    <div>
-      <div class=\\"gl-overflow-x-auto gl-overflow-y-hidden\\">
-        <div class=\\"md\\">
-          <p>hi</p>
-        </div>
-      </div>
-    </div>
-  </div>
-</timeline-entry-item-stub>"
-`;
diff --git a/ee/spec/frontend/integrations/external_issue/issues_show/components/note_spec.js b/ee/spec/frontend/integrations/external_issue/issues_show/components/note_spec.js
deleted file mode 100644
index 636d7179b91f13..00000000000000
--- a/ee/spec/frontend/integrations/external_issue/issues_show/components/note_spec.js
+++ /dev/null
@@ -1,70 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import JiraIssueNote from 'ee/external_issues_show/components/note.vue';
-import { extendedWrapper } from 'helpers/vue_test_utils_helper';
-
-import { mockExternalIssueComment } from '../mock_data';
-
-describe('JiraIssuesNote', () => {
-  let wrapper;
-
-  const findTimeAgoLink = () => wrapper.findByTestId('time-ago-link');
-  const findBadgesContainer = () => wrapper.findByTestId('badges-container');
-  const findAuthorUsernameLink = () => wrapper.findByTestId('author-username');
-
-  const createComponent = ({ props, slots } = {}) => {
-    wrapper = extendedWrapper(
-      shallowMount(JiraIssueNote, {
-        propsData: {
-          authorName: mockExternalIssueComment.author.name,
-          authorWebUrl: mockExternalIssueComment.author.web_url,
-          authorAvatarUrl: mockExternalIssueComment.author.avatar_url,
-          noteCreatedAt: mockExternalIssueComment.created_at,
-          noteBodyHtml: mockExternalIssueComment.body_html,
-          ...props,
-        },
-        slots,
-      }),
-    );
-  };
-
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
-  describe('template', () => {
-    it('renders note', () => {
-      createComponent();
-
-      expect(wrapper.html()).toMatchSnapshot();
-    });
-
-    it.each`
-      id           | expectedTimeAgoHref
-      ${undefined} | ${'#'}
-      ${'1234'}    | ${'#1234'}
-    `(
-      'sets "time ago" link to $expectedTimeAgoHref when id is $id',
-      ({ id, expectedTimeAgoHref }) => {
-        createComponent({ props: { id } });
-
-        expect(findTimeAgoLink().attributes('href')).toBe(expectedTimeAgoHref);
-      },
-    );
-
-    describe('with badge slot', () => {
-      it('renders slot content', () => {
-        createComponent({ slots: { badges: 'testing badges content' } });
-
-        expect(findBadgesContainer().html()).toContain('testing badges content');
-      });
-    });
-
-    describe('with author username', () => {
-      it('renders slot content', () => {
-        createComponent({ props: { authorUsername: 'testuser' } });
-
-        expect(findAuthorUsernameLink().html()).toContain('testuser');
-      });
-    });
-  });
-});
diff --git a/ee/spec/frontend/integrations/external_issue/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
deleted file mode 100644
index 3864ef3db13fe7..00000000000000
--- a/ee/spec/frontend/integrations/external_issue/issues_show/components/sidebar/__snapshots__/assignee_spec.js.snap
+++ /dev/null
@@ -1,76 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ExternalIssuesSidebarAssignee with assignee template renders avatar components 1`] = `
-<div>
-  <div
-    class="hide-collapsed"
-  >
-    <assignee-title-stub
-      numberofassignees="1"
-    />
-     
-    <gl-avatar-link-stub
-      href="http://127.0.0.1:3000/root"
-      target="_blank"
-      title="Justin Ho"
-    >
-      <gl-avatar-labeled-stub
-        alt="Justin Ho"
-        entity-name="Justin Ho"
-        label="Justin Ho"
-        labellink=""
-        size="32"
-        src="http://127.0.0.1:3000/uploads/-/system/user/avatar/1/avatar.png?width=90"
-        sublabel="Jira user"
-        sublabellink=""
-      />
-    </gl-avatar-link-stub>
-  </div>
-   
-  <div
-    class="sidebar-collapsed-icon"
-    data-testid="sidebar-collapsed-icon-wrapper"
-    title="Justin Ho"
-  >
-    <gl-avatar-stub
-      alt="Justin Ho"
-      entityid="0"
-      entityname="Justin Ho"
-      shape="circle"
-      size="24"
-      src="http://127.0.0.1:3000/uploads/-/system/user/avatar/1/avatar.png?width=90"
-    />
-  </div>
-</div>
-`;
-
-exports[`ExternalIssuesSidebarAssignee with no assignee template renders template without avatar components (the "None" state) 1`] = `
-<div>
-  <div
-    class="hide-collapsed"
-  >
-    <assignee-title-stub
-      numberofassignees="0"
-    />
-     
-    <span
-      class="gl-text-gray-500"
-      data-testid="no-assignee-text"
-    >
-      None
-    </span>
-  </div>
-   
-  <div
-    class="sidebar-collapsed-icon"
-    data-testid="sidebar-collapsed-icon-wrapper"
-    title="No assignee"
-  >
-    <gl-icon-stub
-      data-testid="no-assignee-icon"
-      name="user"
-      size="16"
-    />
-  </div>
-</div>
-`;
diff --git a/ee/spec/frontend/integrations/external_issue/issues_show/components/sidebar/assignee_spec.js b/ee/spec/frontend/integrations/external_issue/issues_show/components/sidebar/assignee_spec.js
deleted file mode 100644
index 6cb80536449874..00000000000000
--- a/ee/spec/frontend/integrations/external_issue/issues_show/components/sidebar/assignee_spec.js
+++ /dev/null
@@ -1,121 +0,0 @@
-import { GlAvatarLabeled, GlAvatarLink, GlAvatar } from '@gitlab/ui';
-import { shallowMount } from '@vue/test-utils';
-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';
-
-import { mockExternalIssue } from '../../mock_data';
-
-const mockAssignee = convertObjectPropsToCamelCase(mockExternalIssue.assignees[0], { deep: true });
-
-describe('ExternalIssuesSidebarAssignee', () => {
-  let wrapper;
-
-  const findNoAssigneeText = () => wrapper.findByTestId('no-assignee-text');
-  const findNoAssigneeIcon = () => wrapper.findByTestId('no-assignee-text');
-  const findAvatar = () => wrapper.find(GlAvatar);
-  const findAvatarLabeled = () => wrapper.find(GlAvatarLabeled);
-  const findAvatarLink = () => wrapper.find(GlAvatarLink);
-  const findSidebarCollapsedIconWrapper = () =>
-    wrapper.findByTestId('sidebar-collapsed-icon-wrapper');
-
-  const createComponent = ({ assignee } = {}) => {
-    wrapper = extendedWrapper(
-      shallowMount(Assignee, {
-        propsData: {
-          assignee,
-        },
-      }),
-    );
-  };
-
-  afterEach(() => {
-    if (wrapper) {
-      wrapper.destroy();
-      wrapper = null;
-    }
-  });
-
-  describe('with assignee', () => {
-    beforeEach(() => {
-      createComponent({ assignee: mockAssignee });
-    });
-
-    describe('template', () => {
-      it('renders avatar components', () => {
-        expect(wrapper.element).toMatchSnapshot();
-      });
-
-      it('renders GlAvatarLink with correct props', () => {
-        const avatarLink = findAvatarLink();
-
-        expect(avatarLink.exists()).toBe(true);
-        expect(avatarLink.attributes()).toMatchObject({
-          href: mockAssignee.webUrl,
-          title: mockAssignee.name,
-        });
-      });
-
-      it('renders GlAvatarLabeled with correct props', () => {
-        const avatarLabeled = findAvatarLabeled();
-
-        expect(avatarLabeled.exists()).toBe(true);
-        expect(avatarLabeled.attributes()).toMatchObject({
-          src: mockAssignee.avatarUrl,
-          alt: mockAssignee.name,
-          'entity-name': mockAssignee.name,
-        });
-        expect(avatarLabeled.props('label')).toBe(mockAssignee.name);
-      });
-
-      it('renders GlAvatar with correct props', () => {
-        const avatar = findAvatar();
-
-        expect(avatar.exists()).toBe(true);
-        expect(avatar.attributes()).toMatchObject({
-          src: mockAssignee.avatarUrl,
-          alt: mockAssignee.name,
-        });
-        expect(avatar.props('entityName')).toBe(mockAssignee.name);
-      });
-
-      it('renders AssigneeTitle with correct props', () => {
-        const title = wrapper.find(AssigneeTitle);
-
-        expect(title.exists()).toBe(true);
-        expect(title.props('numberOfAssignees')).toBe(1);
-      });
-
-      it('does not render "No assignee" text', () => {
-        expect(findNoAssigneeText().exists()).toBe(false);
-      });
-
-      it('does not render "No assignee" icon', () => {
-        expect(findNoAssigneeIcon().exists()).toBe(false);
-      });
-
-      it('sets `title` attribute of collapsed sidebar wrapper correctly', () => {
-        const iconWrapper = findSidebarCollapsedIconWrapper();
-        expect(iconWrapper.attributes('title')).toBe(mockAssignee.name);
-      });
-    });
-  });
-
-  describe('with no assignee', () => {
-    beforeEach(() => {
-      createComponent({ assignee: undefined });
-    });
-
-    describe('template', () => {
-      it('renders template without avatar components (the "None" state)', () => {
-        expect(wrapper.element).toMatchSnapshot();
-      });
-
-      it('sets `title` attribute of collapsed sidebar wrapper correctly', () => {
-        const iconWrapper = findSidebarCollapsedIconWrapper();
-        expect(iconWrapper.attributes('title')).toBe('No assignee');
-      });
-    });
-  });
-});
diff --git a/ee/spec/frontend/integrations/external_issue/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
deleted file mode 100644
index 3c86b080dcf2f3..00000000000000
--- a/ee/spec/frontend/integrations/external_issue/issues_show/components/sidebar/issue_due_date_spec.js
+++ /dev/null
@@ -1,69 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-
-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';
-
-describe('IssueDueDate', () => {
-  let wrapper;
-
-  const createComponent = ({ props = {} } = {}) => {
-    wrapper = extendedWrapper(
-      shallowMount(IssueDueDate, {
-        propsData: props,
-      }),
-    );
-  };
-
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
-  const findDueDateCollapsed = () => wrapper.findByTestId('due-date-collapsed');
-  const findDueDateValue = () => wrapper.findByTestId('due-date-value');
-
-  describe('when dueDate is null', () => {
-    it('renders "None" as value', () => {
-      createComponent();
-
-      expect(findDueDateCollapsed().text()).toBe('None');
-      expect(findDueDateValue().text()).toBe('None');
-    });
-  });
-
-  describe('when dueDate is in the past', () => {
-    const dueDate = '2021-02-14T00:00:00.000Z';
-
-    useFakeDate(2021, 2, 18);
-
-    it('renders formatted dueDate', () => {
-      createComponent({
-        props: {
-          dueDate,
-        },
-      });
-
-      expect(findDueDateCollapsed().text()).toBe('Feb 14, 2021');
-      expect(findDueDateValue().text()).toBe('Feb 14, 2021 (Past due)');
-    });
-  });
-
-  describe('when dueDate is in the future', () => {
-    const dueDate = '2021-02-14T00:00:00.000Z';
-
-    useFakeDate(2020, 12, 20);
-
-    it('renders formatted dueDate', () => {
-      createComponent({
-        props: {
-          dueDate,
-        },
-      });
-
-      expect(findDueDateCollapsed().text()).toBe('Feb 14, 2021');
-      expect(findDueDateValue().text()).toBe('Feb 14, 2021');
-    });
-  });
-});
diff --git a/ee/spec/frontend/integrations/external_issue/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
deleted file mode 100644
index c9be0498261104..00000000000000
--- a/ee/spec/frontend/integrations/external_issue/issues_show/components/sidebar/issue_field_dropdown_spec.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import { GlDropdownItem, GlLoadingIcon } from '@gitlab/ui';
-import { shallowMount } from '@vue/test-utils';
-
-import IssueFieldDropdown from 'ee/external_issues_show/components/sidebar/issue_field_dropdown.vue';
-
-import { mockExternalIssueStatuses } from '../../mock_data';
-
-describe('IssueFieldDropdown', () => {
-  let wrapper;
-
-  const emptyText = 'empty text';
-  const defaultProps = {
-    emptyText,
-    text: 'issue field text',
-    title: 'issue field header text',
-  };
-
-  const createComponent = ({ props = {} } = {}) => {
-    wrapper = shallowMount(IssueFieldDropdown, {
-      propsData: { ...defaultProps, ...props },
-    });
-  };
-
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
-  const findAllGlDropdownItems = () => wrapper.findAllComponents(GlDropdownItem);
-  const findGlLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
-
-  it.each`
-    loading  | items
-    ${true}  | ${[]}
-    ${true}  | ${mockExternalIssueStatuses}
-    ${false} | ${[]}
-    ${false} | ${mockExternalIssueStatuses}
-  `('with loading = $loading, items = $items', ({ loading, items }) => {
-    createComponent({
-      props: {
-        loading,
-        items,
-      },
-    });
-
-    expect(findGlLoadingIcon().exists()).toBe(loading);
-
-    if (!loading) {
-      if (items.length) {
-        findAllGlDropdownItems().wrappers.forEach((itemWrapper, index) => {
-          expect(itemWrapper.text()).toBe(mockExternalIssueStatuses[index].title);
-        });
-      } else {
-        expect(wrapper.text()).toBe(emptyText);
-      }
-    }
-  });
-});
diff --git a/ee/spec/frontend/integrations/external_issue/issues_show/components/sidebar/issue_field_spec.js b/ee/spec/frontend/integrations/external_issue/issues_show/components/sidebar/issue_field_spec.js
deleted file mode 100644
index 4efa0e173fd685..00000000000000
--- a/ee/spec/frontend/integrations/external_issue/issues_show/components/sidebar/issue_field_spec.js
+++ /dev/null
@@ -1,117 +0,0 @@
-import { GlButton, GlIcon } from '@gitlab/ui';
-
-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';
-
-import SidebarEditableItem from '~/sidebar/components/sidebar_editable_item.vue';
-
-describe('IssueField', () => {
-  let wrapper;
-
-  const defaultProps = {
-    icon: 'calendar',
-    title: 'Field Title',
-  };
-
-  const createComponent = ({ props = {} } = {}) => {
-    wrapper = shallowMountExtended(IssueField, {
-      directives: {
-        GlTooltip: createMockDirective(),
-      },
-      propsData: { ...defaultProps, ...props },
-      stubs: {
-        SidebarEditableItem,
-      },
-    });
-  };
-
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
-  const findEditableItem = () => wrapper.findComponent(SidebarEditableItem);
-  const findEditButton = () => wrapper.findComponent(GlButton);
-  const findFieldCollapsed = () => wrapper.findByTestId('field-collapsed');
-  const findFieldCollapsedTooltip = () => getBinding(findFieldCollapsed().element, 'gl-tooltip');
-  const findFieldValue = () => wrapper.findByTestId('field-value');
-  const findGlIcon = () => wrapper.findComponent(GlIcon);
-
-  describe('template', () => {
-    beforeEach(() => {
-      createComponent();
-    });
-
-    it('renders title', () => {
-      expect(findEditableItem().props('title')).toBe(defaultProps.title);
-    });
-
-    it('renders GlIcon (when collapsed)', () => {
-      expect(findGlIcon().props('name')).toBe(defaultProps.icon);
-    });
-
-    it('does not render "Edit" button', () => {
-      expect(findEditButton().exists()).toBe(false);
-    });
-  });
-
-  describe('without value prop', () => {
-    beforeEach(() => {
-      createComponent();
-    });
-
-    it('falls back to "None"', () => {
-      expect(findFieldValue().text()).toBe('None');
-    });
-
-    it('renders tooltip (when collapsed) with "value" = title', () => {
-      const tooltip = findFieldCollapsedTooltip();
-
-      expect(tooltip).toBeDefined();
-      expect(tooltip.value.title).toBe(defaultProps.title);
-    });
-  });
-
-  describe('with value prop', () => {
-    const value = 'field value';
-
-    beforeEach(() => {
-      createComponent({
-        props: { value },
-      });
-    });
-
-    it('renders the value', () => {
-      expect(findFieldValue().text()).toBe(value);
-    });
-
-    it('renders tooltip (when collapsed) with "value" = value', () => {
-      const tooltip = findFieldCollapsedTooltip();
-
-      expect(tooltip).toBeDefined();
-      expect(tooltip.value.title).toBe(value);
-    });
-  });
-
-  describe('with canUpdate = true', () => {
-    beforeEach(() => {
-      createComponent({
-        props: { canUpdate: true },
-      });
-    });
-
-    it('renders "Edit" button', () => {
-      expect(findEditButton().text()).toBe('Edit');
-    });
-
-    it('emits "issue-field-fetch" when dropdown is opened', () => {
-      wrapper.vm.$refs.dropdown.showDropdown = jest.fn();
-
-      findEditableItem().vm.$emit('open');
-
-      expect(wrapper.vm.$refs.dropdown.showDropdown).toHaveBeenCalled();
-      expect(wrapper.emitted('issue-field-fetch')).toHaveLength(1);
-    });
-  });
-});
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
deleted file mode 100644
index 79c0c622e6de64..00000000000000
--- a/ee/spec/frontend/integrations/external_issue/issues_show/mock_data.js
+++ /dev/null
@@ -1,45 +0,0 @@
-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 c561583f001162..654ae5362256cb 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,13 +1,8 @@
 import { shallowMount } from '@vue/test-utils';
-<<<<<<< HEAD
+
 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 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';
->>>>>>> 25008f18f53 (Extract common sub components from Jira)
 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 00efc677fc6ae0ac5cf633a9eb8a88615ac52dd1 Mon Sep 17 00:00:00 2001
From: JeremyWuuuuu <jeremyw@jihulab.com>
Date: Thu, 9 Sep 2021 10:43:41 +0800
Subject: [PATCH 04/17] Feature ZenTao integration with external issue detail

Integrate ZenTao detail with External Issue detail component
Add test accordingly
---
 .../issues_show/zentao_issues_show_bundle.js  |  26 +++
 locale/gitlab.pot                             |  24 +++
 .../__snapshots__/assignee_spec.js.snap       |  76 +++++++
 .../components/sidebar/assignee_spec.js       | 124 ++++++++++++
 .../components/sidebar/issue_due_date_spec.js |  69 +++++++
 .../sidebar/issue_field_dropdown_spec.js      |  57 ++++++
 .../components/sidebar/issue_field_spec.js    | 117 +++++++++++
 .../zentao_issues_sidebar_root_spec.js        |  64 ++++++
 .../zentao_issues_show_root_spec.js           | 185 ++++++++++++++++++
 .../zentao/issues_show/mock_data.js           |  71 +++++++
 10 files changed, 813 insertions(+)
 create mode 100644 app/assets/javascripts/integrations/zentao/issues_show/zentao_issues_show_bundle.js
 create mode 100644 spec/frontend/integrations/zentao/issues_show/components/sidebar/__snapshots__/assignee_spec.js.snap
 create mode 100644 spec/frontend/integrations/zentao/issues_show/components/sidebar/assignee_spec.js
 create mode 100644 spec/frontend/integrations/zentao/issues_show/components/sidebar/issue_due_date_spec.js
 create mode 100644 spec/frontend/integrations/zentao/issues_show/components/sidebar/issue_field_dropdown_spec.js
 create mode 100644 spec/frontend/integrations/zentao/issues_show/components/sidebar/issue_field_spec.js
 create mode 100644 spec/frontend/integrations/zentao/issues_show/components/sidebar/zentao_issues_sidebar_root_spec.js
 create mode 100644 spec/frontend/integrations/zentao/issues_show/components/zentao_issues_show_root_spec.js
 create mode 100644 spec/frontend/integrations/zentao/issues_show/mock_data.js

diff --git a/app/assets/javascripts/integrations/zentao/issues_show/zentao_issues_show_bundle.js b/app/assets/javascripts/integrations/zentao/issues_show/zentao_issues_show_bundle.js
new file mode 100644
index 00000000000000..836f5c11c78701
--- /dev/null
+++ b/app/assets/javascripts/integrations/zentao/issues_show/zentao_issues_show_bundle.js
@@ -0,0 +1,26 @@
+import ExternalIssueShowFactory from '~/integrations/external_issue/issues_show/external_issues_show_bundle';
+import { __, s__ } from '~/locale';
+
+export default ExternalIssueShowFactory({
+  failFetchingIssueText: s__(
+    'ZenTaoIntegration|Failed to load ZenTao issue. View the issue in ZenTao, or reload the page.',
+  ),
+  failFetchingIssueStatusText: s__(
+    'ZenTaoIntegration|Failed to load ZenTao issue. View the issue in ZenTao, or reload the page.',
+  ),
+  failUpdatingIssueLabelsText: s__(
+    'ZenTaoIntegration|Failed to update ZenTao issue labels. View the issue in ZenTao, or reload the page.',
+  ),
+  failUpdatingIssueStatusText: s__(
+    'ZenTaoIntegration|Failed to update ZenTao issue status. View the issue in ZenTao, or reload the page.',
+  ),
+  featureFlagCanEditLabelKey: 'zentaoIssueDetailsEditLabels',
+  featureFlagCanEditStatusKey: 'zentaoIssueDetailsEditStatus',
+  seeMoreDetailText: s__(
+    `ZenTaoIntegration|Not all data may be displayed here. To view more details or make changes to this issue, go to %{linkStart}ZenTao%{linkEnd}.`,
+  ),
+  statusDropdownEmptyText: s__('ZenTaoIntegration|No available statuses'),
+  titleText: s__('ZenTaoIntegration|This issue is synchronized with ZenTao'),
+  userTypeText: __('ZenTao user'),
+  userTypeTooltipText: __('This is a ZenTao user.'),
+});
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 1603365d0af43c..2e1092ded404d7 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -34724,6 +34724,9 @@ msgstr ""
 msgid "This is a Jira user."
 msgstr ""
 
+msgid "This is a ZenTao user."
+msgstr ""
+
 msgid "This is a confidential %{noteableTypeText}."
 msgstr ""
 
@@ -39477,6 +39480,27 @@ msgstr[1] ""
 msgid "Your username is %{username}."
 msgstr ""
 
+msgid "ZenTao user"
+msgstr ""
+
+msgid "ZenTaoIntegration|Failed to load ZenTao issue. View the issue in ZenTao, or reload the page."
+msgstr ""
+
+msgid "ZenTaoIntegration|Failed to update ZenTao issue labels. View the issue in ZenTao, or reload the page."
+msgstr ""
+
+msgid "ZenTaoIntegration|Failed to update ZenTao issue status. View the issue in ZenTao, or reload the page."
+msgstr ""
+
+msgid "ZenTaoIntegration|No available statuses"
+msgstr ""
+
+msgid "ZenTaoIntegration|Not all data may be displayed here. To view more details or make changes to this issue, go to %{linkStart}ZenTao%{linkEnd}."
+msgstr ""
+
+msgid "ZenTaoIntegration|This issue is synchronized with ZenTao"
+msgstr ""
+
 msgid "ZentaoIntegration|Base URL of the Zentao instance."
 msgstr ""
 
diff --git a/spec/frontend/integrations/zentao/issues_show/components/sidebar/__snapshots__/assignee_spec.js.snap b/spec/frontend/integrations/zentao/issues_show/components/sidebar/__snapshots__/assignee_spec.js.snap
new file mode 100644
index 00000000000000..0c3b6bc14c977c
--- /dev/null
+++ b/spec/frontend/integrations/zentao/issues_show/components/sidebar/__snapshots__/assignee_spec.js.snap
@@ -0,0 +1,76 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ZentaoIssuesSidebarAssignee with assignee template renders avatar components 1`] = `
+<div>
+  <div
+    class="hide-collapsed"
+  >
+    <assignee-title-stub
+      numberofassignees="1"
+    />
+     
+    <gl-avatar-link-stub
+      href="http://127.0.0.1:3000/root"
+      target="_blank"
+      title="Justin Ho"
+    >
+      <gl-avatar-labeled-stub
+        alt="Justin Ho"
+        entity-name="Justin Ho"
+        label="Justin Ho"
+        labellink=""
+        size="32"
+        src="http://127.0.0.1:3000/uploads/-/system/user/avatar/1/avatar.png?width=90"
+        sublabel="ZenTao user"
+        sublabellink=""
+      />
+    </gl-avatar-link-stub>
+  </div>
+   
+  <div
+    class="sidebar-collapsed-icon"
+    data-testid="sidebar-collapsed-icon-wrapper"
+    title="Justin Ho"
+  >
+    <gl-avatar-stub
+      alt="Justin Ho"
+      entityid="0"
+      entityname="Justin Ho"
+      shape="circle"
+      size="24"
+      src="http://127.0.0.1:3000/uploads/-/system/user/avatar/1/avatar.png?width=90"
+    />
+  </div>
+</div>
+`;
+
+exports[`ZentaoIssuesSidebarAssignee with no assignee template renders template without avatar components (the "None" state) 1`] = `
+<div>
+  <div
+    class="hide-collapsed"
+  >
+    <assignee-title-stub
+      numberofassignees="0"
+    />
+     
+    <span
+      class="gl-text-gray-500"
+      data-testid="no-assignee-text"
+    >
+      None
+    </span>
+  </div>
+   
+  <div
+    class="sidebar-collapsed-icon"
+    data-testid="sidebar-collapsed-icon-wrapper"
+    title="No assignee"
+  >
+    <gl-icon-stub
+      data-testid="no-assignee-icon"
+      name="user"
+      size="16"
+    />
+  </div>
+</div>
+`;
diff --git a/spec/frontend/integrations/zentao/issues_show/components/sidebar/assignee_spec.js b/spec/frontend/integrations/zentao/issues_show/components/sidebar/assignee_spec.js
new file mode 100644
index 00000000000000..1013cbbf025f81
--- /dev/null
+++ b/spec/frontend/integrations/zentao/issues_show/components/sidebar/assignee_spec.js
@@ -0,0 +1,124 @@
+import { GlAvatarLabeled, GlAvatarLink, GlAvatar } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import Assignee from '~/integrations/external_issue/issues_show/components/sidebar/assignee.vue';
+import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
+import AssigneeTitle from '~/sidebar/components/assignees/assignee_title.vue';
+
+import { mockZentaoIssue, mockZentaoIssuesProvides } from '../../mock_data';
+
+const mockAssignee = convertObjectPropsToCamelCase(mockZentaoIssue.assignees[0], { deep: true });
+
+describe('ZentaoIssuesSidebarAssignee', () => {
+  let wrapper;
+
+  const findNoAssigneeText = () => wrapper.findByTestId('no-assignee-text');
+  const findNoAssigneeIcon = () => wrapper.findByTestId('no-assignee-text');
+  const findAvatar = () => wrapper.find(GlAvatar);
+  const findAvatarLabeled = () => wrapper.find(GlAvatarLabeled);
+  const findAvatarLink = () => wrapper.find(GlAvatarLink);
+  const findSidebarCollapsedIconWrapper = () =>
+    wrapper.findByTestId('sidebar-collapsed-icon-wrapper');
+
+  const createComponent = ({ assignee } = {}) => {
+    wrapper = extendedWrapper(
+      shallowMount(Assignee, {
+        propsData: {
+          assignee,
+        },
+        provide: {
+          userTypeText: mockZentaoIssuesProvides.userTypeText,
+        },
+      }),
+    );
+  };
+
+  afterEach(() => {
+    if (wrapper) {
+      wrapper.destroy();
+      wrapper = null;
+    }
+  });
+
+  describe('with assignee', () => {
+    beforeEach(() => {
+      createComponent({ assignee: mockAssignee });
+    });
+
+    describe('template', () => {
+      it('renders avatar components', () => {
+        expect(wrapper.element).toMatchSnapshot();
+      });
+
+      it('renders GlAvatarLink with correct props', () => {
+        const avatarLink = findAvatarLink();
+
+        expect(avatarLink.exists()).toBe(true);
+        expect(avatarLink.attributes()).toMatchObject({
+          href: mockAssignee.webUrl,
+          title: mockAssignee.name,
+        });
+      });
+
+      it('renders GlAvatarLabeled with correct props', () => {
+        const avatarLabeled = findAvatarLabeled();
+
+        expect(avatarLabeled.exists()).toBe(true);
+        expect(avatarLabeled.attributes()).toMatchObject({
+          src: mockAssignee.avatarUrl,
+          alt: mockAssignee.name,
+          'entity-name': mockAssignee.name,
+        });
+        expect(avatarLabeled.props('label')).toBe(mockAssignee.name);
+      });
+
+      it('renders GlAvatar with correct props', () => {
+        const avatar = findAvatar();
+
+        expect(avatar.exists()).toBe(true);
+        expect(avatar.attributes()).toMatchObject({
+          src: mockAssignee.avatarUrl,
+          alt: mockAssignee.name,
+        });
+        expect(avatar.props('entityName')).toBe(mockAssignee.name);
+      });
+
+      it('renders AssigneeTitle with correct props', () => {
+        const title = wrapper.find(AssigneeTitle);
+
+        expect(title.exists()).toBe(true);
+        expect(title.props('numberOfAssignees')).toBe(1);
+      });
+
+      it('does not render "No assignee" text', () => {
+        expect(findNoAssigneeText().exists()).toBe(false);
+      });
+
+      it('does not render "No assignee" icon', () => {
+        expect(findNoAssigneeIcon().exists()).toBe(false);
+      });
+
+      it('sets `title` attribute of collapsed sidebar wrapper correctly', () => {
+        const iconWrapper = findSidebarCollapsedIconWrapper();
+        expect(iconWrapper.attributes('title')).toBe(mockAssignee.name);
+      });
+    });
+  });
+
+  describe('with no assignee', () => {
+    beforeEach(() => {
+      createComponent({ assignee: undefined });
+    });
+
+    describe('template', () => {
+      it('renders template without avatar components (the "None" state)', () => {
+        expect(wrapper.element).toMatchSnapshot();
+      });
+
+      it('sets `title` attribute of collapsed sidebar wrapper correctly', () => {
+        const iconWrapper = findSidebarCollapsedIconWrapper();
+        expect(iconWrapper.attributes('title')).toBe('No assignee');
+      });
+    });
+  });
+});
diff --git a/spec/frontend/integrations/zentao/issues_show/components/sidebar/issue_due_date_spec.js b/spec/frontend/integrations/zentao/issues_show/components/sidebar/issue_due_date_spec.js
new file mode 100644
index 00000000000000..6281972c1f245a
--- /dev/null
+++ b/spec/frontend/integrations/zentao/issues_show/components/sidebar/issue_due_date_spec.js
@@ -0,0 +1,69 @@
+import { shallowMount } from '@vue/test-utils';
+
+import { useFakeDate } from 'helpers/fake_date';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+
+import IssueDueDate from '~/integrations/external_issue/issues_show/components/sidebar/issue_due_date.vue';
+
+describe('IssueDueDate', () => {
+  let wrapper;
+
+  const createComponent = ({ props = {} } = {}) => {
+    wrapper = extendedWrapper(
+      shallowMount(IssueDueDate, {
+        propsData: props,
+      }),
+    );
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  const findDueDateCollapsed = () => wrapper.findByTestId('due-date-collapsed');
+  const findDueDateValue = () => wrapper.findByTestId('due-date-value');
+
+  describe('when dueDate is null', () => {
+    it('renders "None" as value', () => {
+      createComponent();
+
+      expect(findDueDateCollapsed().text()).toBe('None');
+      expect(findDueDateValue().text()).toBe('None');
+    });
+  });
+
+  describe('when dueDate is in the past', () => {
+    const dueDate = '2021-02-14T00:00:00.000Z';
+
+    useFakeDate(2021, 2, 18);
+
+    it('renders formatted dueDate', () => {
+      createComponent({
+        props: {
+          dueDate,
+        },
+      });
+
+      expect(findDueDateCollapsed().text()).toBe('Feb 14, 2021');
+      expect(findDueDateValue().text()).toBe('Feb 14, 2021 (Past due)');
+    });
+  });
+
+  describe('when dueDate is in the future', () => {
+    const dueDate = '2021-02-14T00:00:00.000Z';
+
+    useFakeDate(2020, 12, 20);
+
+    it('renders formatted dueDate', () => {
+      createComponent({
+        props: {
+          dueDate,
+        },
+      });
+
+      expect(findDueDateCollapsed().text()).toBe('Feb 14, 2021');
+      expect(findDueDateValue().text()).toBe('Feb 14, 2021');
+    });
+  });
+});
diff --git a/spec/frontend/integrations/zentao/issues_show/components/sidebar/issue_field_dropdown_spec.js b/spec/frontend/integrations/zentao/issues_show/components/sidebar/issue_field_dropdown_spec.js
new file mode 100644
index 00000000000000..c1fbeb062aa36d
--- /dev/null
+++ b/spec/frontend/integrations/zentao/issues_show/components/sidebar/issue_field_dropdown_spec.js
@@ -0,0 +1,57 @@
+import { GlDropdownItem, GlLoadingIcon } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+
+import IssueFieldDropdown from '~/integrations/external_issue/issues_show/components/sidebar/issue_field_dropdown.vue';
+
+import { mockZentaoIssueStatuses } from '../../mock_data';
+
+describe('IssueFieldDropdown', () => {
+  let wrapper;
+
+  const emptyText = 'empty text';
+  const defaultProps = {
+    emptyText,
+    text: 'issue field text',
+    title: 'issue field header text',
+  };
+
+  const createComponent = ({ props = {} } = {}) => {
+    wrapper = shallowMount(IssueFieldDropdown, {
+      propsData: { ...defaultProps, ...props },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  const findAllGlDropdownItems = () => wrapper.findAllComponents(GlDropdownItem);
+  const findGlLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
+
+  it.each`
+    loading  | items
+    ${true}  | ${[]}
+    ${true}  | ${mockZentaoIssueStatuses}
+    ${false} | ${[]}
+    ${false} | ${mockZentaoIssueStatuses}
+  `('with loading = $loading, items = $items', ({ loading, items }) => {
+    createComponent({
+      props: {
+        loading,
+        items,
+      },
+    });
+
+    expect(findGlLoadingIcon().exists()).toBe(loading);
+
+    if (!loading) {
+      if (items.length) {
+        findAllGlDropdownItems().wrappers.forEach((itemWrapper, index) => {
+          expect(itemWrapper.text()).toBe(mockZentaoIssueStatuses[index].title);
+        });
+      } else {
+        expect(wrapper.text()).toBe(emptyText);
+      }
+    }
+  });
+});
diff --git a/spec/frontend/integrations/zentao/issues_show/components/sidebar/issue_field_spec.js b/spec/frontend/integrations/zentao/issues_show/components/sidebar/issue_field_spec.js
new file mode 100644
index 00000000000000..99a300ecd6af2a
--- /dev/null
+++ b/spec/frontend/integrations/zentao/issues_show/components/sidebar/issue_field_spec.js
@@ -0,0 +1,117 @@
+import { GlButton, GlIcon } from '@gitlab/ui';
+
+import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+
+import IssueField from '~/integrations/external_issue/issues_show/components/sidebar/issue_field.vue';
+
+import SidebarEditableItem from '~/sidebar/components/sidebar_editable_item.vue';
+
+describe('IssueField', () => {
+  let wrapper;
+
+  const defaultProps = {
+    icon: 'calendar',
+    title: 'Field Title',
+  };
+
+  const createComponent = ({ props = {} } = {}) => {
+    wrapper = shallowMountExtended(IssueField, {
+      directives: {
+        GlTooltip: createMockDirective(),
+      },
+      propsData: { ...defaultProps, ...props },
+      stubs: {
+        SidebarEditableItem,
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  const findEditableItem = () => wrapper.findComponent(SidebarEditableItem);
+  const findEditButton = () => wrapper.findComponent(GlButton);
+  const findFieldCollapsed = () => wrapper.findByTestId('field-collapsed');
+  const findFieldCollapsedTooltip = () => getBinding(findFieldCollapsed().element, 'gl-tooltip');
+  const findFieldValue = () => wrapper.findByTestId('field-value');
+  const findGlIcon = () => wrapper.findComponent(GlIcon);
+
+  describe('template', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('renders title', () => {
+      expect(findEditableItem().props('title')).toBe(defaultProps.title);
+    });
+
+    it('renders GlIcon (when collapsed)', () => {
+      expect(findGlIcon().props('name')).toBe(defaultProps.icon);
+    });
+
+    it('does not render "Edit" button', () => {
+      expect(findEditButton().exists()).toBe(false);
+    });
+  });
+
+  describe('without value prop', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('falls back to "None"', () => {
+      expect(findFieldValue().text()).toBe('None');
+    });
+
+    it('renders tooltip (when collapsed) with "value" = title', () => {
+      const tooltip = findFieldCollapsedTooltip();
+
+      expect(tooltip).toBeDefined();
+      expect(tooltip.value.title).toBe(defaultProps.title);
+    });
+  });
+
+  describe('with value prop', () => {
+    const value = 'field value';
+
+    beforeEach(() => {
+      createComponent({
+        props: { value },
+      });
+    });
+
+    it('renders the value', () => {
+      expect(findFieldValue().text()).toBe(value);
+    });
+
+    it('renders tooltip (when collapsed) with "value" = value', () => {
+      const tooltip = findFieldCollapsedTooltip();
+
+      expect(tooltip).toBeDefined();
+      expect(tooltip.value.title).toBe(value);
+    });
+  });
+
+  describe('with canUpdate = true', () => {
+    beforeEach(() => {
+      createComponent({
+        props: { canUpdate: true },
+      });
+    });
+
+    it('renders "Edit" button', () => {
+      expect(findEditButton().text()).toBe('Edit');
+    });
+
+    it('emits "issue-field-fetch" when dropdown is opened', () => {
+      wrapper.vm.$refs.dropdown.showDropdown = jest.fn();
+
+      findEditableItem().vm.$emit('open');
+
+      expect(wrapper.vm.$refs.dropdown.showDropdown).toHaveBeenCalled();
+      expect(wrapper.emitted('issue-field-fetch')).toHaveLength(1);
+    });
+  });
+});
diff --git a/spec/frontend/integrations/zentao/issues_show/components/sidebar/zentao_issues_sidebar_root_spec.js b/spec/frontend/integrations/zentao/issues_show/components/sidebar/zentao_issues_sidebar_root_spec.js
new file mode 100644
index 00000000000000..04ddf9922b0c18
--- /dev/null
+++ b/spec/frontend/integrations/zentao/issues_show/components/sidebar/zentao_issues_sidebar_root_spec.js
@@ -0,0 +1,64 @@
+import { shallowMount } from '@vue/test-utils';
+import Assignee from '~/integrations/external_issue/issues_show/components/sidebar/assignee.vue';
+import Sidebar from '~/integrations/external_issue/issues_show/components/sidebar/external_issues_sidebar_root.vue';
+import IssueDueDate from '~/integrations/external_issue/issues_show/components/sidebar/issue_due_date.vue';
+import IssueField from '~/integrations/external_issue/issues_show/components/sidebar/issue_field.vue';
+import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
+import LabelsSelect from '~/vue_shared/components/sidebar/labels_select_vue/labels_select_root.vue';
+import { mockZentaoIssue as mockZentaoIssueData, mockZentaoIssuesProvides } from '../../mock_data';
+
+const mockZentaoIssue = convertObjectPropsToCamelCase(mockZentaoIssueData, { deep: true });
+
+describe('ZentaoIssuesSidebar', () => {
+  let wrapper;
+
+  const defaultProps = {
+    sidebarExpanded: false,
+    issue: mockZentaoIssue,
+  };
+
+  const createComponent = ({ props = {} } = {}) => {
+    wrapper = shallowMount(Sidebar, {
+      propsData: { ...defaultProps, ...props },
+      provide: mockZentaoIssuesProvides,
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  const findLabelsSelect = () => wrapper.findComponent(LabelsSelect);
+  const findAssignee = () => wrapper.findComponent(Assignee);
+  const findIssueDueDate = () => wrapper.findComponent(IssueDueDate);
+  const findIssueField = () => wrapper.findComponent(IssueField);
+
+  it('renders Labels block', () => {
+    createComponent();
+
+    expect(findLabelsSelect().props('selectedLabels')).toBe(mockZentaoIssue.labels);
+  });
+
+  it('renders Assignee block', () => {
+    createComponent();
+    const assignee = findAssignee();
+
+    expect(assignee.props('assignee')).toBe(mockZentaoIssue.assignees[0]);
+  });
+
+  it('renders IssueDueDate', () => {
+    createComponent();
+    const dueDate = findIssueDueDate();
+
+    expect(dueDate.props('dueDate')).toBe(mockZentaoIssue.dueDate);
+  });
+
+  it('renders IssueField', () => {
+    createComponent();
+    const field = findIssueField();
+
+    expect(field.props('icon')).toBe('progress');
+    expect(field.props('title')).toBe('Status');
+    expect(field.props('value')).toBe(mockZentaoIssue.status);
+  });
+});
diff --git a/spec/frontend/integrations/zentao/issues_show/components/zentao_issues_show_root_spec.js b/spec/frontend/integrations/zentao/issues_show/components/zentao_issues_show_root_spec.js
new file mode 100644
index 00000000000000..b542a3f5ae0628
--- /dev/null
+++ b/spec/frontend/integrations/zentao/issues_show/components/zentao_issues_show_root_spec.js
@@ -0,0 +1,185 @@
+import { GlAlert, GlLoadingIcon } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import MockAdapter from 'axios-mock-adapter';
+
+import waitForPromises from 'helpers/wait_for_promises';
+import * as ZentaoIssuesShowApi from '~/integrations/external_issue/issues_show/api';
+import ZentaoIssuesShow from '~/integrations/external_issue/issues_show/components/external_issues_show_root.vue';
+import ZentaoIssueSidebar from '~/integrations/external_issue/issues_show/components/sidebar/external_issues_sidebar_root.vue';
+import { issueStates } from '~/integrations/external_issue/issues_show/constants';
+import IssuableHeader from '~/issuable_show/components/issuable_header.vue';
+import IssuableShow from '~/issuable_show/components/issuable_show_root.vue';
+import IssuableSidebar from '~/issuable_sidebar/components/issuable_sidebar_root.vue';
+import axios from '~/lib/utils/axios_utils';
+import { s__ } from '~/locale';
+import { mockZentaoIssue, mockZentaoIssuesProvides } from '../mock_data';
+
+const mockZentaoIssuesShowPath = 'zentao_issues_show_path';
+
+describe('ZentaoIssuesShow', () => {
+  let wrapper;
+  let mockAxios;
+
+  const findGlAlert = () => wrapper.findComponent(GlAlert);
+  const findGlLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
+  const findIssuableShow = () => wrapper.findComponent(IssuableShow);
+  const findZentaoIssueSidebar = () => wrapper.findComponent(ZentaoIssueSidebar);
+  const findIssuableShowStatusBadge = () =>
+    wrapper.findComponent(IssuableHeader).find('[data-testid="status"]');
+
+  const createComponent = () => {
+    wrapper = shallowMount(ZentaoIssuesShow, {
+      stubs: {
+        IssuableHeader,
+        IssuableShow,
+        IssuableSidebar,
+      },
+      provide: {
+        issuesShowPath: mockZentaoIssuesShowPath,
+        ...mockZentaoIssuesProvides,
+      },
+    });
+  };
+
+  beforeEach(() => {
+    mockAxios = new MockAdapter(axios);
+  });
+
+  afterEach(() => {
+    mockAxios.restore();
+    wrapper.destroy();
+  });
+
+  describe('when issue is loading', () => {
+    it('renders GlLoadingIcon', () => {
+      createComponent();
+
+      expect(findGlLoadingIcon().exists()).toBe(true);
+      expect(findGlAlert().exists()).toBe(false);
+      expect(findIssuableShow().exists()).toBe(false);
+    });
+  });
+
+  describe('when error occurs during fetch', () => {
+    it('renders error message', async () => {
+      mockAxios.onGet(mockZentaoIssuesShowPath).replyOnce(500);
+      createComponent();
+
+      await waitForPromises();
+
+      const alert = findGlAlert();
+
+      expect(findGlLoadingIcon().exists()).toBe(false);
+      expect(alert.exists()).toBe(true);
+      expect(alert.text()).toBe(
+        s__(
+          'ZenTaoIntegration|Failed to load ZenTao issue. View the issue in ZenTao, or reload the page.',
+        ),
+      );
+      expect(alert.props('variant')).toBe('danger');
+      expect(findIssuableShow().exists()).toBe(false);
+    });
+  });
+
+  it('renders IssuableShow', async () => {
+    mockAxios.onGet(mockZentaoIssuesShowPath).replyOnce(200, mockZentaoIssue);
+    createComponent();
+
+    await waitForPromises();
+
+    expect(findGlLoadingIcon().exists()).toBe(false);
+    expect(findIssuableShow().exists()).toBe(true);
+  });
+
+  describe.each`
+    state                 | statusIcon              | statusBadgeClass             | badgeText
+    ${issueStates.OPENED} | ${'issue-open-m'}       | ${'status-box-open'}         | ${'Open'}
+    ${issueStates.CLOSED} | ${'mobile-issue-close'} | ${'status-box-issue-closed'} | ${'Closed'}
+  `('when issue state is `$state`', ({ state, statusIcon, statusBadgeClass, badgeText }) => {
+    beforeEach(async () => {
+      mockAxios.onGet(mockZentaoIssuesShowPath).replyOnce(200, { ...mockZentaoIssue, state });
+      createComponent();
+
+      await waitForPromises();
+    });
+
+    it('sets `statusIcon` prop correctly', () => {
+      expect(findIssuableShow().props('statusIcon')).toBe(statusIcon);
+    });
+
+    it('sets `statusBadgeClass` prop correctly', () => {
+      expect(findIssuableShow().props('statusBadgeClass')).toBe(statusBadgeClass);
+    });
+
+    it('renders correct status badge text', () => {
+      expect(findIssuableShowStatusBadge().text()).toBe(badgeText);
+    });
+  });
+
+  describe('ZentaoIssueSidebar events', () => {
+    beforeEach(async () => {
+      mockAxios.onGet(mockZentaoIssuesShowPath).replyOnce(200, mockZentaoIssue);
+      createComponent();
+
+      await waitForPromises();
+    });
+
+    it('updates issue labels on issue-labels-updated', async () => {
+      const updateIssueSpy = jest.spyOn(ZentaoIssuesShowApi, 'updateIssue').mockResolvedValue();
+
+      const labels = [{ id: 'ecosystem' }];
+
+      findZentaoIssueSidebar().vm.$emit('issue-labels-updated', labels);
+      await wrapper.vm.$nextTick();
+
+      expect(updateIssueSpy).toHaveBeenCalledWith(expect.any(Object), { labels });
+      expect(findZentaoIssueSidebar().props('isUpdatingLabels')).toBe(true);
+
+      await waitForPromises();
+
+      expect(findZentaoIssueSidebar().props('isUpdatingLabels')).toBe(false);
+    });
+
+    it('fetches issue statuses on issue-status-fetch', async () => {
+      const fetchIssueStatusesSpy = jest
+        .spyOn(ZentaoIssuesShowApi, 'fetchIssueStatuses')
+        .mockResolvedValue();
+
+      findZentaoIssueSidebar().vm.$emit('issue-status-fetch');
+      await wrapper.vm.$nextTick();
+
+      expect(fetchIssueStatusesSpy).toHaveBeenCalled();
+      expect(findZentaoIssueSidebar().props('isLoadingStatus')).toBe(true);
+
+      await waitForPromises();
+
+      expect(findZentaoIssueSidebar().props('isLoadingStatus')).toBe(false);
+    });
+
+    it('updates issue status on issue-status-updated', async () => {
+      const updateIssueSpy = jest.spyOn(ZentaoIssuesShowApi, 'updateIssue').mockResolvedValue();
+
+      const status = 'In Review';
+
+      findZentaoIssueSidebar().vm.$emit('issue-status-updated', status);
+      await wrapper.vm.$nextTick();
+
+      expect(updateIssueSpy).toHaveBeenCalledWith(expect.any(Object), { status });
+      expect(findZentaoIssueSidebar().props('isUpdatingStatus')).toBe(true);
+
+      await waitForPromises();
+
+      expect(findZentaoIssueSidebar().props('isUpdatingStatus')).toBe(false);
+    });
+
+    it('updates `sidebarExpanded` prop on `sidebar-toggle` event', async () => {
+      const zentaoIssueSidebar = findZentaoIssueSidebar();
+      expect(zentaoIssueSidebar.props('sidebarExpanded')).toBe(true);
+
+      zentaoIssueSidebar.vm.$emit('sidebar-toggle');
+      await wrapper.vm.$nextTick();
+
+      expect(zentaoIssueSidebar.props('sidebarExpanded')).toBe(false);
+    });
+  });
+});
diff --git a/spec/frontend/integrations/zentao/issues_show/mock_data.js b/spec/frontend/integrations/zentao/issues_show/mock_data.js
new file mode 100644
index 00000000000000..394dcc39a44374
--- /dev/null
+++ b/spec/frontend/integrations/zentao/issues_show/mock_data.js
@@ -0,0 +1,71 @@
+import { s__, __ } from '~/locale';
+
+export const mockZentaoIssue = {
+  title: 'FE-2 The second FE issue on Zentao',
+  description_html:
+    '<a href="https://zentao.reali.sh:8080/projects/FE/issues/FE-2">FE-2</a> The second FE issue on Zentao',
+  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 mockZentaoIssueComment = {
+  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 mockZentaoIssueStatuses = [{ title: 'In Progress' }, { title: 'Done' }];
+
+export const mockZentaoIssuesProvides = {
+  failFetchingIssueText: s__(
+    'ZenTaoIntegration|Failed to load ZenTao issue. View the issue in ZenTao, or reload the page.',
+  ),
+  failFetchingIssueStatusText: s__(
+    'ZenTaoIntegration|Failed to load ZenTao issue. View the issue in ZenTao, or reload the page.',
+  ),
+  failUpdatingIssueLabelsText: s__(
+    'ZenTaoIntegration|Failed to update ZenTao issue labels. View the issue in ZenTao, or reload the page.',
+  ),
+  failUpdatingIssueStatusText: s__(
+    'ZenTaoIntegration|Failed to update ZenTao issue status. View the issue in ZenTao, or reload the page.',
+  ),
+  featureFlagCanEditLabelKey: 'zentaoIssueDetailsEditLabels',
+  featureFlagCanEditStatusKey: 'zentaoIssueDetailsEditStatus',
+  seeMoreDetailText: s__(
+    `ZenTaoIntegration|Not all data may be displayed here. To view more details or make changes to this issue, go to %{linkStart}ZenTao%{linkEnd}.`,
+  ),
+  statusDropdownEmptyText: s__('ZenTaoIntegration|No available statuses'),
+  titleText: s__('ZenTaoIntegration|This issue is synchronized with ZenTao'),
+  userTypeText: __('ZenTao user'),
+  userTypeTooltipText: __('This is a ZenTao user.'),
+};
-- 
GitLab


From 2d2ad7d8700388374ea17214571e9ab61f661d37 Mon Sep 17 00:00:00 2001
From: JeremyWuuuuu <jeremyw@jihulab.com>
Date: Thu, 16 Sep 2021 15:26:03 +0800
Subject: [PATCH 05/17] Integration with abstracted external detail

Update integration code with abstracted external detail
Update test against changes
---
 .../issues_show/zentao_issues_show_bundle.js  |  26 ---
 .../integrations/zentao/issues_show/api.js    |  37 +++
 .../sidebar/zentao_issues_sidebar_root.vue    | 166 +++++++++++++
 .../components/zentao_issues_show_root.vue    | 219 ++++++++++++++++++
 .../zentao/issues_show/constants.js           |  13 ++
 .../issues_show/zentao_issues_show_bundle.js  |  23 ++
 .../zentao_issues_sidebar_root_spec.js        |   8 +-
 .../zentao_issues_show_root_spec.js           |   8 +-
 .../zentao/issues_show/mock_data.js           |   0
 .../__snapshots__/assignee_spec.js.snap       |  76 ------
 .../components/sidebar/assignee_spec.js       | 124 ----------
 .../components/sidebar/issue_due_date_spec.js |  69 ------
 .../sidebar/issue_field_dropdown_spec.js      |  57 -----
 .../components/sidebar/issue_field_spec.js    | 117 ----------
 14 files changed, 466 insertions(+), 477 deletions(-)
 delete mode 100644 app/assets/javascripts/integrations/zentao/issues_show/zentao_issues_show_bundle.js
 create mode 100644 ee/app/assets/javascripts/integrations/zentao/issues_show/api.js
 create mode 100644 ee/app/assets/javascripts/integrations/zentao/issues_show/components/sidebar/zentao_issues_sidebar_root.vue
 create mode 100644 ee/app/assets/javascripts/integrations/zentao/issues_show/components/zentao_issues_show_root.vue
 create mode 100644 ee/app/assets/javascripts/integrations/zentao/issues_show/constants.js
 create mode 100644 ee/app/assets/javascripts/integrations/zentao/issues_show/zentao_issues_show_bundle.js
 rename {spec => ee/spec}/frontend/integrations/zentao/issues_show/components/sidebar/zentao_issues_sidebar_root_spec.js (81%)
 rename {spec => ee/spec}/frontend/integrations/zentao/issues_show/components/zentao_issues_show_root_spec.js (93%)
 rename {spec => ee/spec}/frontend/integrations/zentao/issues_show/mock_data.js (100%)
 delete mode 100644 spec/frontend/integrations/zentao/issues_show/components/sidebar/__snapshots__/assignee_spec.js.snap
 delete mode 100644 spec/frontend/integrations/zentao/issues_show/components/sidebar/assignee_spec.js
 delete mode 100644 spec/frontend/integrations/zentao/issues_show/components/sidebar/issue_due_date_spec.js
 delete mode 100644 spec/frontend/integrations/zentao/issues_show/components/sidebar/issue_field_dropdown_spec.js
 delete mode 100644 spec/frontend/integrations/zentao/issues_show/components/sidebar/issue_field_spec.js

diff --git a/app/assets/javascripts/integrations/zentao/issues_show/zentao_issues_show_bundle.js b/app/assets/javascripts/integrations/zentao/issues_show/zentao_issues_show_bundle.js
deleted file mode 100644
index 836f5c11c78701..00000000000000
--- a/app/assets/javascripts/integrations/zentao/issues_show/zentao_issues_show_bundle.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import ExternalIssueShowFactory from '~/integrations/external_issue/issues_show/external_issues_show_bundle';
-import { __, s__ } from '~/locale';
-
-export default ExternalIssueShowFactory({
-  failFetchingIssueText: s__(
-    'ZenTaoIntegration|Failed to load ZenTao issue. View the issue in ZenTao, or reload the page.',
-  ),
-  failFetchingIssueStatusText: s__(
-    'ZenTaoIntegration|Failed to load ZenTao issue. View the issue in ZenTao, or reload the page.',
-  ),
-  failUpdatingIssueLabelsText: s__(
-    'ZenTaoIntegration|Failed to update ZenTao issue labels. View the issue in ZenTao, or reload the page.',
-  ),
-  failUpdatingIssueStatusText: s__(
-    'ZenTaoIntegration|Failed to update ZenTao issue status. View the issue in ZenTao, or reload the page.',
-  ),
-  featureFlagCanEditLabelKey: 'zentaoIssueDetailsEditLabels',
-  featureFlagCanEditStatusKey: 'zentaoIssueDetailsEditStatus',
-  seeMoreDetailText: s__(
-    `ZenTaoIntegration|Not all data may be displayed here. To view more details or make changes to this issue, go to %{linkStart}ZenTao%{linkEnd}.`,
-  ),
-  statusDropdownEmptyText: s__('ZenTaoIntegration|No available statuses'),
-  titleText: s__('ZenTaoIntegration|This issue is synchronized with ZenTao'),
-  userTypeText: __('ZenTao user'),
-  userTypeTooltipText: __('This is a ZenTao user.'),
-});
diff --git a/ee/app/assets/javascripts/integrations/zentao/issues_show/api.js b/ee/app/assets/javascripts/integrations/zentao/issues_show/api.js
new file mode 100644
index 00000000000000..95fe28c90e2306
--- /dev/null
+++ b/ee/app/assets/javascripts/integrations/zentao/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/ee/app/assets/javascripts/integrations/zentao/issues_show/components/sidebar/zentao_issues_sidebar_root.vue b/ee/app/assets/javascripts/integrations/zentao/issues_show/components/sidebar/zentao_issues_sidebar_root.vue
new file mode 100644
index 00000000000000..ef7c1f96ae177d
--- /dev/null
+++ b/ee/app/assets/javascripts/integrations/zentao/issues_show/components/sidebar/zentao_issues_sidebar_root.vue
@@ -0,0 +1,166 @@
+<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/zentao/issues_show/constants';
+import { __, s__ } 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';
+
+export default {
+  name: 'ZentaoIssuesSidebar',
+  components: {
+    Assignee,
+    IssueDueDate,
+    IssueField,
+    LabelsSelect,
+  },
+  mixins: [glFeatureFlagsMixin()],
+  inject: {
+    issueLabelsPath: {
+      default: null,
+    },
+    issuesListPath: {
+      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];
+    },
+    reference() {
+      return this.issue.references?.relative;
+    },
+    canUpdateLabels() {
+      return this.glFeatures.zentaoIssueDetailsEditLabels;
+    },
+    canUpdateStatus() {
+      return this.glFeatures.zentaoIssueDetailsEditStatus;
+    },
+  },
+  labelsFilterParam,
+  i18n: {
+    statusTitle: __('Status'),
+    statusDropdownEmpty: s__('ZenTaoIntegration|No available statuses'),
+    statusDropdownTitle: __('Change status'),
+    referenceName: __('Reference'),
+  },
+  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="$options.i18n.statusDropdownEmpty"
+      :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/ee/app/assets/javascripts/integrations/zentao/issues_show/components/zentao_issues_show_root.vue b/ee/app/assets/javascripts/integrations/zentao/issues_show/components/zentao_issues_show_root.vue
new file mode 100644
index 00000000000000..d9ff755d98a84b
--- /dev/null
+++ b/ee/app/assets/javascripts/integrations/zentao/issues_show/components/zentao_issues_show_root.vue
@@ -0,0 +1,219 @@
+<script>
+import {
+  GlAlert,
+  GlSprintf,
+  GlLink,
+  GlLoadingIcon,
+  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/zentao/issues_show/api';
+import ZentaoIssueSidebar from 'ee/integrations/zentao/issues_show/components/sidebar/zentao_issues_sidebar_root.vue';
+import { issueStates, issueStateLabels } from 'ee/integrations/zentao/issues_show/constants';
+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';
+
+export default {
+  name: 'ExternalIssuesShow',
+  components: {
+    GlAlert,
+    GlSprintf,
+    GlLink,
+    GlBadge,
+    GlLoadingIcon,
+    IssuableShow,
+    ZentaoIssueSidebar,
+    Note,
+  },
+  directives: {
+    GlTooltip,
+  },
+  inject: {
+    issuesShowPath: {
+      default: '',
+    },
+  },
+  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 = s__(
+            'ZenTaoIntegration|Failed to load ZenTao issue. View the issue in ZenTao, or reload the page.',
+          );
+        })
+        .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: s__(
+              'ZenTaoIntegration|Failed to update ZenTao issue labels. View the issue in ZenTao, or reload the page.',
+            ),
+          });
+        })
+        .finally(() => {
+          this.isUpdatingLabels = false;
+        });
+    },
+    onIssueStatusFetch() {
+      this.isLoadingStatus = true;
+      fetchIssueStatuses()
+        .then((response) => {
+          this.statuses = response;
+        })
+        .catch(() => {
+          createFlash({
+            message: s__(
+              'ZenTaoIntegration|Failed to load ZenTao issue. View the issue in ZenTao, or reload the page.',
+            ),
+          });
+        })
+        .finally(() => {
+          this.isLoadingStatus = false;
+        });
+    },
+    onIssueStatusUpdated(status) {
+      this.isUpdatingStatus = true;
+      updateIssue(this.issue, { status })
+        .then((response) => {
+          this.issue.status = response.status;
+        })
+        .catch(() => {
+          createFlash({
+            message: s__(
+              'ZenTaoIntegration|Failed to update ZenTao issue status. View the issue in ZenTao, or reload the page.',
+            ),
+          });
+        })
+        .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="s__('ZenTaoIntegration|This issue is synchronized with ZenTao')"
+        class="gl-mb-2"
+      >
+        <gl-sprintf
+          :message="
+            s__(
+              `ZenTaoIntegration|Not all data may be displayed here. To view more details or make changes to this issue, go to %{linkStart}ZenTao%{linkEnd}.`,
+            )
+          "
+        >
+          <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 }">
+          <zentao-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: __('This is a ZenTao user.') }">
+                {{ __('ZenTao user') }}
+              </gl-badge>
+            </template>
+          </note>
+        </template>
+      </issuable-show>
+    </template>
+  </div>
+</template>
diff --git a/ee/app/assets/javascripts/integrations/zentao/issues_show/constants.js b/ee/app/assets/javascripts/integrations/zentao/issues_show/constants.js
new file mode 100644
index 00000000000000..29bb2dedfd2554
--- /dev/null
+++ b/ee/app/assets/javascripts/integrations/zentao/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/ee/app/assets/javascripts/integrations/zentao/issues_show/zentao_issues_show_bundle.js b/ee/app/assets/javascripts/integrations/zentao/issues_show/zentao_issues_show_bundle.js
new file mode 100644
index 00000000000000..54bdc4676b6d8a
--- /dev/null
+++ b/ee/app/assets/javascripts/integrations/zentao/issues_show/zentao_issues_show_bundle.js
@@ -0,0 +1,23 @@
+import Vue from 'vue';
+
+import ZentaoIssuesShowApp from './components/zentao_issues_show_root.vue';
+
+export default function initZentaoIssueShow({ mountPointSelector }) {
+  const mountPointEl = document.querySelector(mountPointSelector);
+
+  if (!mountPointEl) {
+    return null;
+  }
+
+  const { issueLabelsPath, issuesShowPath, issuesListPath } = mountPointEl.dataset;
+
+  return new Vue({
+    el: mountPointEl,
+    provide: {
+      issueLabelsPath,
+      issuesShowPath,
+      issuesListPath,
+    },
+    render: (createElement) => createElement(ZentaoIssuesShowApp),
+  });
+}
diff --git a/spec/frontend/integrations/zentao/issues_show/components/sidebar/zentao_issues_sidebar_root_spec.js b/ee/spec/frontend/integrations/zentao/issues_show/components/sidebar/zentao_issues_sidebar_root_spec.js
similarity index 81%
rename from spec/frontend/integrations/zentao/issues_show/components/sidebar/zentao_issues_sidebar_root_spec.js
rename to ee/spec/frontend/integrations/zentao/issues_show/components/sidebar/zentao_issues_sidebar_root_spec.js
index 04ddf9922b0c18..ce17d22dca5391 100644
--- a/spec/frontend/integrations/zentao/issues_show/components/sidebar/zentao_issues_sidebar_root_spec.js
+++ b/ee/spec/frontend/integrations/zentao/issues_show/components/sidebar/zentao_issues_sidebar_root_spec.js
@@ -1,8 +1,8 @@
 import { shallowMount } from '@vue/test-utils';
-import Assignee from '~/integrations/external_issue/issues_show/components/sidebar/assignee.vue';
-import Sidebar from '~/integrations/external_issue/issues_show/components/sidebar/external_issues_sidebar_root.vue';
-import IssueDueDate from '~/integrations/external_issue/issues_show/components/sidebar/issue_due_date.vue';
-import IssueField from '~/integrations/external_issue/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/zentao/issues_show/components/sidebar/zentao_issues_sidebar_root.vue';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import LabelsSelect from '~/vue_shared/components/sidebar/labels_select_vue/labels_select_root.vue';
 import { mockZentaoIssue as mockZentaoIssueData, mockZentaoIssuesProvides } from '../../mock_data';
diff --git a/spec/frontend/integrations/zentao/issues_show/components/zentao_issues_show_root_spec.js b/ee/spec/frontend/integrations/zentao/issues_show/components/zentao_issues_show_root_spec.js
similarity index 93%
rename from spec/frontend/integrations/zentao/issues_show/components/zentao_issues_show_root_spec.js
rename to ee/spec/frontend/integrations/zentao/issues_show/components/zentao_issues_show_root_spec.js
index b542a3f5ae0628..e138e20dea6c3c 100644
--- a/spec/frontend/integrations/zentao/issues_show/components/zentao_issues_show_root_spec.js
+++ b/ee/spec/frontend/integrations/zentao/issues_show/components/zentao_issues_show_root_spec.js
@@ -1,12 +1,12 @@
 import { GlAlert, GlLoadingIcon } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
+import { issueStates } from 'ee/integrations/external_issue/issues_show/constants';
+import * as ZentaoIssuesShowApi from 'ee/integrations/zentao/issues_show/api';
+import ZentaoIssueSidebar from 'ee/integrations/zentao/issues_show/components/sidebar/zentao_issues_sidebar_root.vue';
+import ZentaoIssuesShow from 'ee/integrations/zentao/issues_show/components/zentao_issues_show_root.vue';
 
 import waitForPromises from 'helpers/wait_for_promises';
-import * as ZentaoIssuesShowApi from '~/integrations/external_issue/issues_show/api';
-import ZentaoIssuesShow from '~/integrations/external_issue/issues_show/components/external_issues_show_root.vue';
-import ZentaoIssueSidebar from '~/integrations/external_issue/issues_show/components/sidebar/external_issues_sidebar_root.vue';
-import { issueStates } from '~/integrations/external_issue/issues_show/constants';
 import IssuableHeader from '~/issuable_show/components/issuable_header.vue';
 import IssuableShow from '~/issuable_show/components/issuable_show_root.vue';
 import IssuableSidebar from '~/issuable_sidebar/components/issuable_sidebar_root.vue';
diff --git a/spec/frontend/integrations/zentao/issues_show/mock_data.js b/ee/spec/frontend/integrations/zentao/issues_show/mock_data.js
similarity index 100%
rename from spec/frontend/integrations/zentao/issues_show/mock_data.js
rename to ee/spec/frontend/integrations/zentao/issues_show/mock_data.js
diff --git a/spec/frontend/integrations/zentao/issues_show/components/sidebar/__snapshots__/assignee_spec.js.snap b/spec/frontend/integrations/zentao/issues_show/components/sidebar/__snapshots__/assignee_spec.js.snap
deleted file mode 100644
index 0c3b6bc14c977c..00000000000000
--- a/spec/frontend/integrations/zentao/issues_show/components/sidebar/__snapshots__/assignee_spec.js.snap
+++ /dev/null
@@ -1,76 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ZentaoIssuesSidebarAssignee with assignee template renders avatar components 1`] = `
-<div>
-  <div
-    class="hide-collapsed"
-  >
-    <assignee-title-stub
-      numberofassignees="1"
-    />
-     
-    <gl-avatar-link-stub
-      href="http://127.0.0.1:3000/root"
-      target="_blank"
-      title="Justin Ho"
-    >
-      <gl-avatar-labeled-stub
-        alt="Justin Ho"
-        entity-name="Justin Ho"
-        label="Justin Ho"
-        labellink=""
-        size="32"
-        src="http://127.0.0.1:3000/uploads/-/system/user/avatar/1/avatar.png?width=90"
-        sublabel="ZenTao user"
-        sublabellink=""
-      />
-    </gl-avatar-link-stub>
-  </div>
-   
-  <div
-    class="sidebar-collapsed-icon"
-    data-testid="sidebar-collapsed-icon-wrapper"
-    title="Justin Ho"
-  >
-    <gl-avatar-stub
-      alt="Justin Ho"
-      entityid="0"
-      entityname="Justin Ho"
-      shape="circle"
-      size="24"
-      src="http://127.0.0.1:3000/uploads/-/system/user/avatar/1/avatar.png?width=90"
-    />
-  </div>
-</div>
-`;
-
-exports[`ZentaoIssuesSidebarAssignee with no assignee template renders template without avatar components (the "None" state) 1`] = `
-<div>
-  <div
-    class="hide-collapsed"
-  >
-    <assignee-title-stub
-      numberofassignees="0"
-    />
-     
-    <span
-      class="gl-text-gray-500"
-      data-testid="no-assignee-text"
-    >
-      None
-    </span>
-  </div>
-   
-  <div
-    class="sidebar-collapsed-icon"
-    data-testid="sidebar-collapsed-icon-wrapper"
-    title="No assignee"
-  >
-    <gl-icon-stub
-      data-testid="no-assignee-icon"
-      name="user"
-      size="16"
-    />
-  </div>
-</div>
-`;
diff --git a/spec/frontend/integrations/zentao/issues_show/components/sidebar/assignee_spec.js b/spec/frontend/integrations/zentao/issues_show/components/sidebar/assignee_spec.js
deleted file mode 100644
index 1013cbbf025f81..00000000000000
--- a/spec/frontend/integrations/zentao/issues_show/components/sidebar/assignee_spec.js
+++ /dev/null
@@ -1,124 +0,0 @@
-import { GlAvatarLabeled, GlAvatarLink, GlAvatar } from '@gitlab/ui';
-import { shallowMount } from '@vue/test-utils';
-import { extendedWrapper } from 'helpers/vue_test_utils_helper';
-import Assignee from '~/integrations/external_issue/issues_show/components/sidebar/assignee.vue';
-import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
-import AssigneeTitle from '~/sidebar/components/assignees/assignee_title.vue';
-
-import { mockZentaoIssue, mockZentaoIssuesProvides } from '../../mock_data';
-
-const mockAssignee = convertObjectPropsToCamelCase(mockZentaoIssue.assignees[0], { deep: true });
-
-describe('ZentaoIssuesSidebarAssignee', () => {
-  let wrapper;
-
-  const findNoAssigneeText = () => wrapper.findByTestId('no-assignee-text');
-  const findNoAssigneeIcon = () => wrapper.findByTestId('no-assignee-text');
-  const findAvatar = () => wrapper.find(GlAvatar);
-  const findAvatarLabeled = () => wrapper.find(GlAvatarLabeled);
-  const findAvatarLink = () => wrapper.find(GlAvatarLink);
-  const findSidebarCollapsedIconWrapper = () =>
-    wrapper.findByTestId('sidebar-collapsed-icon-wrapper');
-
-  const createComponent = ({ assignee } = {}) => {
-    wrapper = extendedWrapper(
-      shallowMount(Assignee, {
-        propsData: {
-          assignee,
-        },
-        provide: {
-          userTypeText: mockZentaoIssuesProvides.userTypeText,
-        },
-      }),
-    );
-  };
-
-  afterEach(() => {
-    if (wrapper) {
-      wrapper.destroy();
-      wrapper = null;
-    }
-  });
-
-  describe('with assignee', () => {
-    beforeEach(() => {
-      createComponent({ assignee: mockAssignee });
-    });
-
-    describe('template', () => {
-      it('renders avatar components', () => {
-        expect(wrapper.element).toMatchSnapshot();
-      });
-
-      it('renders GlAvatarLink with correct props', () => {
-        const avatarLink = findAvatarLink();
-
-        expect(avatarLink.exists()).toBe(true);
-        expect(avatarLink.attributes()).toMatchObject({
-          href: mockAssignee.webUrl,
-          title: mockAssignee.name,
-        });
-      });
-
-      it('renders GlAvatarLabeled with correct props', () => {
-        const avatarLabeled = findAvatarLabeled();
-
-        expect(avatarLabeled.exists()).toBe(true);
-        expect(avatarLabeled.attributes()).toMatchObject({
-          src: mockAssignee.avatarUrl,
-          alt: mockAssignee.name,
-          'entity-name': mockAssignee.name,
-        });
-        expect(avatarLabeled.props('label')).toBe(mockAssignee.name);
-      });
-
-      it('renders GlAvatar with correct props', () => {
-        const avatar = findAvatar();
-
-        expect(avatar.exists()).toBe(true);
-        expect(avatar.attributes()).toMatchObject({
-          src: mockAssignee.avatarUrl,
-          alt: mockAssignee.name,
-        });
-        expect(avatar.props('entityName')).toBe(mockAssignee.name);
-      });
-
-      it('renders AssigneeTitle with correct props', () => {
-        const title = wrapper.find(AssigneeTitle);
-
-        expect(title.exists()).toBe(true);
-        expect(title.props('numberOfAssignees')).toBe(1);
-      });
-
-      it('does not render "No assignee" text', () => {
-        expect(findNoAssigneeText().exists()).toBe(false);
-      });
-
-      it('does not render "No assignee" icon', () => {
-        expect(findNoAssigneeIcon().exists()).toBe(false);
-      });
-
-      it('sets `title` attribute of collapsed sidebar wrapper correctly', () => {
-        const iconWrapper = findSidebarCollapsedIconWrapper();
-        expect(iconWrapper.attributes('title')).toBe(mockAssignee.name);
-      });
-    });
-  });
-
-  describe('with no assignee', () => {
-    beforeEach(() => {
-      createComponent({ assignee: undefined });
-    });
-
-    describe('template', () => {
-      it('renders template without avatar components (the "None" state)', () => {
-        expect(wrapper.element).toMatchSnapshot();
-      });
-
-      it('sets `title` attribute of collapsed sidebar wrapper correctly', () => {
-        const iconWrapper = findSidebarCollapsedIconWrapper();
-        expect(iconWrapper.attributes('title')).toBe('No assignee');
-      });
-    });
-  });
-});
diff --git a/spec/frontend/integrations/zentao/issues_show/components/sidebar/issue_due_date_spec.js b/spec/frontend/integrations/zentao/issues_show/components/sidebar/issue_due_date_spec.js
deleted file mode 100644
index 6281972c1f245a..00000000000000
--- a/spec/frontend/integrations/zentao/issues_show/components/sidebar/issue_due_date_spec.js
+++ /dev/null
@@ -1,69 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-
-import { useFakeDate } from 'helpers/fake_date';
-import { extendedWrapper } from 'helpers/vue_test_utils_helper';
-
-import IssueDueDate from '~/integrations/external_issue/issues_show/components/sidebar/issue_due_date.vue';
-
-describe('IssueDueDate', () => {
-  let wrapper;
-
-  const createComponent = ({ props = {} } = {}) => {
-    wrapper = extendedWrapper(
-      shallowMount(IssueDueDate, {
-        propsData: props,
-      }),
-    );
-  };
-
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
-  const findDueDateCollapsed = () => wrapper.findByTestId('due-date-collapsed');
-  const findDueDateValue = () => wrapper.findByTestId('due-date-value');
-
-  describe('when dueDate is null', () => {
-    it('renders "None" as value', () => {
-      createComponent();
-
-      expect(findDueDateCollapsed().text()).toBe('None');
-      expect(findDueDateValue().text()).toBe('None');
-    });
-  });
-
-  describe('when dueDate is in the past', () => {
-    const dueDate = '2021-02-14T00:00:00.000Z';
-
-    useFakeDate(2021, 2, 18);
-
-    it('renders formatted dueDate', () => {
-      createComponent({
-        props: {
-          dueDate,
-        },
-      });
-
-      expect(findDueDateCollapsed().text()).toBe('Feb 14, 2021');
-      expect(findDueDateValue().text()).toBe('Feb 14, 2021 (Past due)');
-    });
-  });
-
-  describe('when dueDate is in the future', () => {
-    const dueDate = '2021-02-14T00:00:00.000Z';
-
-    useFakeDate(2020, 12, 20);
-
-    it('renders formatted dueDate', () => {
-      createComponent({
-        props: {
-          dueDate,
-        },
-      });
-
-      expect(findDueDateCollapsed().text()).toBe('Feb 14, 2021');
-      expect(findDueDateValue().text()).toBe('Feb 14, 2021');
-    });
-  });
-});
diff --git a/spec/frontend/integrations/zentao/issues_show/components/sidebar/issue_field_dropdown_spec.js b/spec/frontend/integrations/zentao/issues_show/components/sidebar/issue_field_dropdown_spec.js
deleted file mode 100644
index c1fbeb062aa36d..00000000000000
--- a/spec/frontend/integrations/zentao/issues_show/components/sidebar/issue_field_dropdown_spec.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import { GlDropdownItem, GlLoadingIcon } from '@gitlab/ui';
-import { shallowMount } from '@vue/test-utils';
-
-import IssueFieldDropdown from '~/integrations/external_issue/issues_show/components/sidebar/issue_field_dropdown.vue';
-
-import { mockZentaoIssueStatuses } from '../../mock_data';
-
-describe('IssueFieldDropdown', () => {
-  let wrapper;
-
-  const emptyText = 'empty text';
-  const defaultProps = {
-    emptyText,
-    text: 'issue field text',
-    title: 'issue field header text',
-  };
-
-  const createComponent = ({ props = {} } = {}) => {
-    wrapper = shallowMount(IssueFieldDropdown, {
-      propsData: { ...defaultProps, ...props },
-    });
-  };
-
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
-  const findAllGlDropdownItems = () => wrapper.findAllComponents(GlDropdownItem);
-  const findGlLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
-
-  it.each`
-    loading  | items
-    ${true}  | ${[]}
-    ${true}  | ${mockZentaoIssueStatuses}
-    ${false} | ${[]}
-    ${false} | ${mockZentaoIssueStatuses}
-  `('with loading = $loading, items = $items', ({ loading, items }) => {
-    createComponent({
-      props: {
-        loading,
-        items,
-      },
-    });
-
-    expect(findGlLoadingIcon().exists()).toBe(loading);
-
-    if (!loading) {
-      if (items.length) {
-        findAllGlDropdownItems().wrappers.forEach((itemWrapper, index) => {
-          expect(itemWrapper.text()).toBe(mockZentaoIssueStatuses[index].title);
-        });
-      } else {
-        expect(wrapper.text()).toBe(emptyText);
-      }
-    }
-  });
-});
diff --git a/spec/frontend/integrations/zentao/issues_show/components/sidebar/issue_field_spec.js b/spec/frontend/integrations/zentao/issues_show/components/sidebar/issue_field_spec.js
deleted file mode 100644
index 99a300ecd6af2a..00000000000000
--- a/spec/frontend/integrations/zentao/issues_show/components/sidebar/issue_field_spec.js
+++ /dev/null
@@ -1,117 +0,0 @@
-import { GlButton, GlIcon } from '@gitlab/ui';
-
-import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
-import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
-
-import IssueField from '~/integrations/external_issue/issues_show/components/sidebar/issue_field.vue';
-
-import SidebarEditableItem from '~/sidebar/components/sidebar_editable_item.vue';
-
-describe('IssueField', () => {
-  let wrapper;
-
-  const defaultProps = {
-    icon: 'calendar',
-    title: 'Field Title',
-  };
-
-  const createComponent = ({ props = {} } = {}) => {
-    wrapper = shallowMountExtended(IssueField, {
-      directives: {
-        GlTooltip: createMockDirective(),
-      },
-      propsData: { ...defaultProps, ...props },
-      stubs: {
-        SidebarEditableItem,
-      },
-    });
-  };
-
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
-  const findEditableItem = () => wrapper.findComponent(SidebarEditableItem);
-  const findEditButton = () => wrapper.findComponent(GlButton);
-  const findFieldCollapsed = () => wrapper.findByTestId('field-collapsed');
-  const findFieldCollapsedTooltip = () => getBinding(findFieldCollapsed().element, 'gl-tooltip');
-  const findFieldValue = () => wrapper.findByTestId('field-value');
-  const findGlIcon = () => wrapper.findComponent(GlIcon);
-
-  describe('template', () => {
-    beforeEach(() => {
-      createComponent();
-    });
-
-    it('renders title', () => {
-      expect(findEditableItem().props('title')).toBe(defaultProps.title);
-    });
-
-    it('renders GlIcon (when collapsed)', () => {
-      expect(findGlIcon().props('name')).toBe(defaultProps.icon);
-    });
-
-    it('does not render "Edit" button', () => {
-      expect(findEditButton().exists()).toBe(false);
-    });
-  });
-
-  describe('without value prop', () => {
-    beforeEach(() => {
-      createComponent();
-    });
-
-    it('falls back to "None"', () => {
-      expect(findFieldValue().text()).toBe('None');
-    });
-
-    it('renders tooltip (when collapsed) with "value" = title', () => {
-      const tooltip = findFieldCollapsedTooltip();
-
-      expect(tooltip).toBeDefined();
-      expect(tooltip.value.title).toBe(defaultProps.title);
-    });
-  });
-
-  describe('with value prop', () => {
-    const value = 'field value';
-
-    beforeEach(() => {
-      createComponent({
-        props: { value },
-      });
-    });
-
-    it('renders the value', () => {
-      expect(findFieldValue().text()).toBe(value);
-    });
-
-    it('renders tooltip (when collapsed) with "value" = value', () => {
-      const tooltip = findFieldCollapsedTooltip();
-
-      expect(tooltip).toBeDefined();
-      expect(tooltip.value.title).toBe(value);
-    });
-  });
-
-  describe('with canUpdate = true', () => {
-    beforeEach(() => {
-      createComponent({
-        props: { canUpdate: true },
-      });
-    });
-
-    it('renders "Edit" button', () => {
-      expect(findEditButton().text()).toBe('Edit');
-    });
-
-    it('emits "issue-field-fetch" when dropdown is opened', () => {
-      wrapper.vm.$refs.dropdown.showDropdown = jest.fn();
-
-      findEditableItem().vm.$emit('open');
-
-      expect(wrapper.vm.$refs.dropdown.showDropdown).toHaveBeenCalled();
-      expect(wrapper.emitted('issue-field-fetch')).toHaveLength(1);
-    });
-  });
-});
-- 
GitLab


From d238c6c0d2c77a034a77d9744b70da95588d9afc Mon Sep 17 00:00:00 2001
From: JeremyWuuuuu <jeremyw@jihulab.com>
Date: Tue, 28 Sep 2021 14:15:38 +0800
Subject: [PATCH 06/17] Add ZenTao init entry

---
 .../pages/projects/integrations/zentao/issues/show/index.js   | 4 ++++
 1 file changed, 4 insertions(+)
 create mode 100644 ee/app/assets/javascripts/pages/projects/integrations/zentao/issues/show/index.js

diff --git a/ee/app/assets/javascripts/pages/projects/integrations/zentao/issues/show/index.js b/ee/app/assets/javascripts/pages/projects/integrations/zentao/issues/show/index.js
new file mode 100644
index 00000000000000..cf7aad55f0654a
--- /dev/null
+++ b/ee/app/assets/javascripts/pages/projects/integrations/zentao/issues/show/index.js
@@ -0,0 +1,4 @@
+import initZentaoIssueShow from 'ee/integrations/zentao/issues_show/zentao_issues_show_bundle';
+// import initJiraIssueShow from 'ee/integrations/jira/issues_show/jira_issues_show_bundle';
+
+initZentaoIssueShow({ mountPointSelector: '.js-zentao-issues-show-app' });
-- 
GitLab


From 85169c6cea0c49991d86450a6dc4178f7ae0fe14 Mon Sep 17 00:00:00 2001
From: JeremyWuuuuu <jeremyw@jihulab.com>
Date: Thu, 30 Sep 2021 10:40:51 +0800
Subject: [PATCH 07/17] Remove unnecessary update issue part

---
 .../integrations/zentao/issues_show/api.js    | 20 ---------
 .../sidebar/zentao_issues_sidebar_root.vue    | 22 ++--------
 .../components/zentao_issues_show_root.vue    | 44 +------------------
 .../zentao_issues_sidebar_root_spec.js        |  6 +--
 .../zentao_issues_show_root_spec.js           | 34 +-------------
 5 files changed, 9 insertions(+), 117 deletions(-)

diff --git a/ee/app/assets/javascripts/integrations/zentao/issues_show/api.js b/ee/app/assets/javascripts/integrations/zentao/issues_show/api.js
index 95fe28c90e2306..b7382ee6c8f36f 100644
--- a/ee/app/assets/javascripts/integrations/zentao/issues_show/api.js
+++ b/ee/app/assets/javascripts/integrations/zentao/issues_show/api.js
@@ -15,23 +15,3 @@ export const fetchIssueStatuses = () => {
     }, 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/ee/app/assets/javascripts/integrations/zentao/issues_show/components/sidebar/zentao_issues_sidebar_root.vue b/ee/app/assets/javascripts/integrations/zentao/issues_show/components/sidebar/zentao_issues_sidebar_root.vue
index ef7c1f96ae177d..8adfa53946a0d0 100644
--- a/ee/app/assets/javascripts/integrations/zentao/issues_show/components/sidebar/zentao_issues_sidebar_root.vue
+++ b/ee/app/assets/javascripts/integrations/zentao/issues_show/components/sidebar/zentao_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/zentao/issues_show/constants';
 import { __, s__ } from '~/locale';
 import LabelsSelect from '~/vue_shared/components/sidebar/labels_select_vue/labels_select_root.vue';
@@ -67,12 +67,6 @@ export default {
     reference() {
       return this.issue.references?.relative;
     },
-    canUpdateLabels() {
-      return this.glFeatures.zentaoIssueDetailsEditLabels;
-    },
-    canUpdateStatus() {
-      return this.glFeatures.zentaoIssueDetailsEditStatus;
-    },
   },
   labelsFilterParam,
   i18n: {
@@ -113,15 +107,9 @@ export default {
         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>
@@ -132,7 +120,6 @@ export default {
     <issue-due-date :due-date="issue.dueDate" />
     <issue-field
       icon="progress"
-      :can-update="canUpdateStatus"
       :dropdown-title="$options.i18n.statusDropdownTitle"
       :dropdown-empty="$options.i18n.statusDropdownEmpty"
       :items="statuses"
@@ -142,10 +129,8 @@ export default {
       :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"
@@ -158,7 +143,6 @@ export default {
       class="block labels js-labels-block"
       @onDropdownClose="onIssueLabelsClose"
       @toggleCollapse="onIssueLabelsToggle"
-      @updateSelectedLabels="onIssueLabelsUpdated"
     >
       {{ __('None') }}
     </labels-select>
diff --git a/ee/app/assets/javascripts/integrations/zentao/issues_show/components/zentao_issues_show_root.vue b/ee/app/assets/javascripts/integrations/zentao/issues_show/components/zentao_issues_show_root.vue
index d9ff755d98a84b..dec9ee7d49d23b 100644
--- a/ee/app/assets/javascripts/integrations/zentao/issues_show/components/zentao_issues_show_root.vue
+++ b/ee/app/assets/javascripts/integrations/zentao/issues_show/components/zentao_issues_show_root.vue
@@ -8,12 +8,8 @@ import {
   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/zentao/issues_show/api';
+import Note from 'ee/external_issues_show/components/note.vue';
+import { fetchIssue, fetchIssueStatuses } from 'ee/integrations/zentao/issues_show/api';
 import ZentaoIssueSidebar from 'ee/integrations/zentao/issues_show/components/sidebar/zentao_issues_sidebar_root.vue';
 import { issueStates, issueStateLabels } from 'ee/integrations/zentao/issues_show/constants';
 import createFlash from '~/flash';
@@ -90,23 +86,6 @@ export default {
       return `external_note_${id}`;
     },
 
-    onIssueLabelsUpdated(labels) {
-      this.isUpdatingLabels = true;
-      updateIssue(this.issue, { labels })
-        .then((response) => {
-          this.issue.labels = response.labels;
-        })
-        .catch(() => {
-          createFlash({
-            message: s__(
-              'ZenTaoIntegration|Failed to update ZenTao issue labels. View the issue in ZenTao, or reload the page.',
-            ),
-          });
-        })
-        .finally(() => {
-          this.isUpdatingLabels = false;
-        });
-    },
     onIssueStatusFetch() {
       this.isLoadingStatus = true;
       fetchIssueStatuses()
@@ -124,23 +103,6 @@ export default {
           this.isLoadingStatus = false;
         });
     },
-    onIssueStatusUpdated(status) {
-      this.isUpdatingStatus = true;
-      updateIssue(this.issue, { status })
-        .then((response) => {
-          this.issue.status = response.status;
-        })
-        .catch(() => {
-          createFlash({
-            message: s__(
-              'ZenTaoIntegration|Failed to update ZenTao issue status. View the issue in ZenTao, or reload the page.',
-            ),
-          });
-        })
-        .finally(() => {
-          this.isUpdatingStatus = false;
-        });
-    },
   },
 };
 </script>
@@ -187,9 +149,7 @@ export default {
             :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>
diff --git a/ee/spec/frontend/integrations/zentao/issues_show/components/sidebar/zentao_issues_sidebar_root_spec.js b/ee/spec/frontend/integrations/zentao/issues_show/components/sidebar/zentao_issues_sidebar_root_spec.js
index ce17d22dca5391..8ffef958c8fc5f 100644
--- a/ee/spec/frontend/integrations/zentao/issues_show/components/sidebar/zentao_issues_sidebar_root_spec.js
+++ b/ee/spec/frontend/integrations/zentao/issues_show/components/sidebar/zentao_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/zentao/issues_show/components/sidebar/zentao_issues_sidebar_root.vue';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import LabelsSelect from '~/vue_shared/components/sidebar/labels_select_vue/labels_select_root.vue';
diff --git a/ee/spec/frontend/integrations/zentao/issues_show/components/zentao_issues_show_root_spec.js b/ee/spec/frontend/integrations/zentao/issues_show/components/zentao_issues_show_root_spec.js
index e138e20dea6c3c..bc2745f1f3bed9 100644
--- a/ee/spec/frontend/integrations/zentao/issues_show/components/zentao_issues_show_root_spec.js
+++ b/ee/spec/frontend/integrations/zentao/issues_show/components/zentao_issues_show_root_spec.js
@@ -1,7 +1,7 @@
 import { GlAlert, GlLoadingIcon } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
-import { issueStates } from 'ee/integrations/external_issue/issues_show/constants';
+import { issueStates } from 'ee/external_issues_show/constants';
 import * as ZentaoIssuesShowApi from 'ee/integrations/zentao/issues_show/api';
 import ZentaoIssueSidebar from 'ee/integrations/zentao/issues_show/components/sidebar/zentao_issues_sidebar_root.vue';
 import ZentaoIssuesShow from 'ee/integrations/zentao/issues_show/components/zentao_issues_show_root.vue';
@@ -124,22 +124,6 @@ describe('ZentaoIssuesShow', () => {
       await waitForPromises();
     });
 
-    it('updates issue labels on issue-labels-updated', async () => {
-      const updateIssueSpy = jest.spyOn(ZentaoIssuesShowApi, 'updateIssue').mockResolvedValue();
-
-      const labels = [{ id: 'ecosystem' }];
-
-      findZentaoIssueSidebar().vm.$emit('issue-labels-updated', labels);
-      await wrapper.vm.$nextTick();
-
-      expect(updateIssueSpy).toHaveBeenCalledWith(expect.any(Object), { labels });
-      expect(findZentaoIssueSidebar().props('isUpdatingLabels')).toBe(true);
-
-      await waitForPromises();
-
-      expect(findZentaoIssueSidebar().props('isUpdatingLabels')).toBe(false);
-    });
-
     it('fetches issue statuses on issue-status-fetch', async () => {
       const fetchIssueStatusesSpy = jest
         .spyOn(ZentaoIssuesShowApi, 'fetchIssueStatuses')
@@ -156,22 +140,6 @@ describe('ZentaoIssuesShow', () => {
       expect(findZentaoIssueSidebar().props('isLoadingStatus')).toBe(false);
     });
 
-    it('updates issue status on issue-status-updated', async () => {
-      const updateIssueSpy = jest.spyOn(ZentaoIssuesShowApi, 'updateIssue').mockResolvedValue();
-
-      const status = 'In Review';
-
-      findZentaoIssueSidebar().vm.$emit('issue-status-updated', status);
-      await wrapper.vm.$nextTick();
-
-      expect(updateIssueSpy).toHaveBeenCalledWith(expect.any(Object), { status });
-      expect(findZentaoIssueSidebar().props('isUpdatingStatus')).toBe(true);
-
-      await waitForPromises();
-
-      expect(findZentaoIssueSidebar().props('isUpdatingStatus')).toBe(false);
-    });
-
     it('updates `sidebarExpanded` prop on `sidebar-toggle` event', async () => {
       const zentaoIssueSidebar = findZentaoIssueSidebar();
       expect(zentaoIssueSidebar.props('sidebarExpanded')).toBe(true);
-- 
GitLab


From 5adf432d6121090a2da827d55295f4c8970c8e62 Mon Sep 17 00:00:00 2001
From: JeremyWuuuuu <jeremyw@jihulab.com>
Date: Thu, 30 Sep 2021 14:35:26 +0800
Subject: [PATCH 08/17] Remove unused code

---
 .../sidebar/zentao_issues_sidebar_root.vue    | 35 -------------------
 .../components/zentao_issues_show_root.vue    | 26 +-------------
 .../zentao_issues_show_root_spec.js           | 17 ---------
 3 files changed, 1 insertion(+), 77 deletions(-)

diff --git a/ee/app/assets/javascripts/integrations/zentao/issues_show/components/sidebar/zentao_issues_sidebar_root.vue b/ee/app/assets/javascripts/integrations/zentao/issues_show/components/sidebar/zentao_issues_sidebar_root.vue
index 8adfa53946a0d0..af3c54dc7454cf 100644
--- a/ee/app/assets/javascripts/integrations/zentao/issues_show/components/sidebar/zentao_issues_sidebar_root.vue
+++ b/ee/app/assets/javascripts/integrations/zentao/issues_show/components/sidebar/zentao_issues_sidebar_root.vue
@@ -82,34 +82,6 @@ export default {
     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;
-      });
-    },
-    onIssueStatusFetch() {
-      this.$emit('issue-status-fetch');
-    },
   },
 };
 </script>
@@ -125,10 +97,7 @@ export default {
       :items="statuses"
       :loading="isLoadingStatus"
       :title="$options.i18n.statusTitle"
-      :updating="isUpdatingStatus"
       :value="issue.status"
-      @expand-sidebar="expandSidebarAndOpenDropdown"
-      @issue-field-fetch="onIssueStatusFetch"
     />
     <labels-select
       :allow-multiselect="true"
@@ -137,12 +106,8 @@ export default {
       :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"
     >
       {{ __('None') }}
     </labels-select>
diff --git a/ee/app/assets/javascripts/integrations/zentao/issues_show/components/zentao_issues_show_root.vue b/ee/app/assets/javascripts/integrations/zentao/issues_show/components/zentao_issues_show_root.vue
index dec9ee7d49d23b..dd0ca8f198ac8c 100644
--- a/ee/app/assets/javascripts/integrations/zentao/issues_show/components/zentao_issues_show_root.vue
+++ b/ee/app/assets/javascripts/integrations/zentao/issues_show/components/zentao_issues_show_root.vue
@@ -9,10 +9,9 @@ import {
 } from '@gitlab/ui';
 
 import Note from 'ee/external_issues_show/components/note.vue';
-import { fetchIssue, fetchIssueStatuses } from 'ee/integrations/zentao/issues_show/api';
+import { fetchIssue } from 'ee/integrations/zentao/issues_show/api';
 import ZentaoIssueSidebar from 'ee/integrations/zentao/issues_show/components/sidebar/zentao_issues_sidebar_root.vue';
 import { issueStates, issueStateLabels } from 'ee/integrations/zentao/issues_show/constants';
-import createFlash from '~/flash';
 
 import IssuableShow from '~/issuable_show/components/issuable_show_root.vue';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
@@ -42,8 +41,6 @@ export default {
     return {
       isLoading: true,
       isLoadingStatus: false,
-      isUpdatingLabels: false,
-      isUpdatingStatus: false,
       errorMessage: null,
       issue: {},
       statuses: [],
@@ -85,24 +82,6 @@ export default {
     externalIssueCommentId(id) {
       return `external_note_${id}`;
     },
-
-    onIssueStatusFetch() {
-      this.isLoadingStatus = true;
-      fetchIssueStatuses()
-        .then((response) => {
-          this.statuses = response;
-        })
-        .catch(() => {
-          createFlash({
-            message: s__(
-              'ZenTaoIntegration|Failed to load ZenTao issue. View the issue in ZenTao, or reload the page.',
-            ),
-          });
-        })
-        .finally(() => {
-          this.isLoadingStatus = false;
-        });
-    },
   },
 };
 </script>
@@ -146,10 +125,7 @@ export default {
             :sidebar-expanded="sidebarExpanded"
             :issue="issue"
             :is-loading-status="isLoadingStatus"
-            :is-updating-labels="isUpdatingLabels"
-            :is-updating-status="isUpdatingStatus"
             :statuses="statuses"
-            @issue-status-fetch="onIssueStatusFetch"
             @sidebar-toggle="toggleSidebar"
           />
         </template>
diff --git a/ee/spec/frontend/integrations/zentao/issues_show/components/zentao_issues_show_root_spec.js b/ee/spec/frontend/integrations/zentao/issues_show/components/zentao_issues_show_root_spec.js
index bc2745f1f3bed9..3f15c5defbc749 100644
--- a/ee/spec/frontend/integrations/zentao/issues_show/components/zentao_issues_show_root_spec.js
+++ b/ee/spec/frontend/integrations/zentao/issues_show/components/zentao_issues_show_root_spec.js
@@ -2,7 +2,6 @@ import { GlAlert, GlLoadingIcon } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
 import { issueStates } from 'ee/external_issues_show/constants';
-import * as ZentaoIssuesShowApi from 'ee/integrations/zentao/issues_show/api';
 import ZentaoIssueSidebar from 'ee/integrations/zentao/issues_show/components/sidebar/zentao_issues_sidebar_root.vue';
 import ZentaoIssuesShow from 'ee/integrations/zentao/issues_show/components/zentao_issues_show_root.vue';
 
@@ -124,22 +123,6 @@ describe('ZentaoIssuesShow', () => {
       await waitForPromises();
     });
 
-    it('fetches issue statuses on issue-status-fetch', async () => {
-      const fetchIssueStatusesSpy = jest
-        .spyOn(ZentaoIssuesShowApi, 'fetchIssueStatuses')
-        .mockResolvedValue();
-
-      findZentaoIssueSidebar().vm.$emit('issue-status-fetch');
-      await wrapper.vm.$nextTick();
-
-      expect(fetchIssueStatusesSpy).toHaveBeenCalled();
-      expect(findZentaoIssueSidebar().props('isLoadingStatus')).toBe(true);
-
-      await waitForPromises();
-
-      expect(findZentaoIssueSidebar().props('isLoadingStatus')).toBe(false);
-    });
-
     it('updates `sidebarExpanded` prop on `sidebar-toggle` event', async () => {
       const zentaoIssueSidebar = findZentaoIssueSidebar();
       expect(zentaoIssueSidebar.props('sidebarExpanded')).toBe(true);
-- 
GitLab


From 088f92d7c4dff32b5b48e86af93064cbd7271746 Mon Sep 17 00:00:00 2001
From: JeremyWuuuuu <jeremyw@jihulab.com>
Date: Fri, 8 Oct 2021 09:38:32 +0800
Subject: [PATCH 09/17] Clean up ZenTao integration

---
 .../components/jira_issues_show_root.vue      |  2 +-
 .../sidebar/jira_issues_sidebar_root.vue      |  3 +-
 .../jira/issues_show/constants.js             | 13 ----
 .../integrations/zentao/issues_show/api.js    | 10 ---
 .../sidebar/zentao_issues_sidebar_root.vue    | 67 +------------------
 .../components/zentao_issues_show_root.vue    | 28 +++-----
 .../zentao/issues_show/constants.js           | 13 ----
 .../issues_show/zentao_issues_show_bundle.js  |  3 +-
 .../components/jira_issues_show_root_spec.js  |  2 +-
 .../zentao_issues_sidebar_root_spec.js        |  3 +-
 .../zentao_issues_show_root_spec.js           | 31 +--------
 .../zentao/issues_show/mock_data.js           | 28 --------
 locale/gitlab.pot                             | 17 ++---
 13 files changed, 25 insertions(+), 195 deletions(-)
 delete mode 100644 ee/app/assets/javascripts/integrations/jira/issues_show/constants.js
 delete mode 100644 ee/app/assets/javascripts/integrations/zentao/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 bec8bd9a5153ee..ba78ba0ba1e0ce 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
@@ -11,7 +11,7 @@ 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';
-import { issueStates, issueStateLabels } from 'ee/integrations/jira/issues_show/constants';
+import { issueStates, issueStateLabels } from 'ee/external_issues_show/constants';
 import createFlash from '~/flash';
 import IssuableShow from '~/issuable_show/components/issuable_show_root.vue';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
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 bdc2b28e1a70dd..f2604d34c5ebda 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
@@ -2,7 +2,8 @@
 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 { labelsFilterParam } from 'ee/external_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';
diff --git a/ee/app/assets/javascripts/integrations/jira/issues_show/constants.js b/ee/app/assets/javascripts/integrations/jira/issues_show/constants.js
deleted file mode 100644
index 29bb2dedfd2554..00000000000000
--- a/ee/app/assets/javascripts/integrations/jira/issues_show/constants.js
+++ /dev/null
@@ -1,13 +0,0 @@
-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/ee/app/assets/javascripts/integrations/zentao/issues_show/api.js b/ee/app/assets/javascripts/integrations/zentao/issues_show/api.js
index b7382ee6c8f36f..e49de73c06f326 100644
--- a/ee/app/assets/javascripts/integrations/zentao/issues_show/api.js
+++ b/ee/app/assets/javascripts/integrations/zentao/issues_show/api.js
@@ -5,13 +5,3 @@ export const fetchIssue = async (issuePath) => {
     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);
-  });
-};
diff --git a/ee/app/assets/javascripts/integrations/zentao/issues_show/components/sidebar/zentao_issues_sidebar_root.vue b/ee/app/assets/javascripts/integrations/zentao/issues_show/components/sidebar/zentao_issues_sidebar_root.vue
index af3c54dc7454cf..b90f243c2cb900 100644
--- a/ee/app/assets/javascripts/integrations/zentao/issues_show/components/sidebar/zentao_issues_sidebar_root.vue
+++ b/ee/app/assets/javascripts/integrations/zentao/issues_show/components/sidebar/zentao_issues_sidebar_root.vue
@@ -2,10 +2,8 @@
 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/zentao/issues_show/constants';
-import { __, s__ } from '~/locale';
+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';
 
 export default {
   name: 'ZentaoIssuesSidebar',
@@ -15,49 +13,11 @@ export default {
     IssueField,
     LabelsSelect,
   },
-  mixins: [glFeatureFlagsMixin()],
-  inject: {
-    issueLabelsPath: {
-      default: null,
-    },
-    issuesListPath: {
-      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() {
@@ -68,21 +28,10 @@ export default {
       return this.issue.references?.relative;
     },
   },
-  labelsFilterParam,
   i18n: {
     statusTitle: __('Status'),
-    statusDropdownEmpty: s__('ZenTaoIntegration|No available statuses'),
-    statusDropdownTitle: __('Change status'),
     referenceName: __('Reference'),
   },
-  mounted() {
-    this.sidebarEl = document.querySelector('aside.right-sidebar');
-  },
-  methods: {
-    toggleSidebar() {
-      this.$emit('sidebar-toggle');
-    },
-  },
 };
 </script>
 
@@ -90,22 +39,10 @@ export default {
   <div>
     <assignee class="block" :assignee="assignee" />
     <issue-due-date :due-date="issue.dueDate" />
-    <issue-field
-      icon="progress"
-      :dropdown-title="$options.i18n.statusDropdownTitle"
-      :dropdown-empty="$options.i18n.statusDropdownEmpty"
-      :items="statuses"
-      :loading="isLoadingStatus"
-      :title="$options.i18n.statusTitle"
-      :value="issue.status"
-    />
+    <issue-field icon="progress" :title="$options.i18n.statusTitle" :value="issue.status" />
     <labels-select
-      :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"
       variant="sidebar"
       class="block labels js-labels-block"
     >
diff --git a/ee/app/assets/javascripts/integrations/zentao/issues_show/components/zentao_issues_show_root.vue b/ee/app/assets/javascripts/integrations/zentao/issues_show/components/zentao_issues_show_root.vue
index dd0ca8f198ac8c..4927877df3a5f2 100644
--- a/ee/app/assets/javascripts/integrations/zentao/issues_show/components/zentao_issues_show_root.vue
+++ b/ee/app/assets/javascripts/integrations/zentao/issues_show/components/zentao_issues_show_root.vue
@@ -11,7 +11,7 @@ import {
 import Note from 'ee/external_issues_show/components/note.vue';
 import { fetchIssue } from 'ee/integrations/zentao/issues_show/api';
 import ZentaoIssueSidebar from 'ee/integrations/zentao/issues_show/components/sidebar/zentao_issues_sidebar_root.vue';
-import { issueStates, issueStateLabels } from 'ee/integrations/zentao/issues_show/constants';
+import { issueStates, issueStateLabels } from 'ee/external_issues_show/constants';
 
 import IssuableShow from '~/issuable_show/components/issuable_show_root.vue';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
@@ -40,10 +40,8 @@ export default {
   data() {
     return {
       isLoading: true,
-      isLoadingStatus: false,
       errorMessage: null,
       issue: {},
-      statuses: [],
     };
   },
   computed: {
@@ -70,19 +68,21 @@ export default {
           this.issue = convertObjectPropsToCamelCase(issue, { deep: true });
         })
         .catch(() => {
-          this.errorMessage = s__(
-            'ZenTaoIntegration|Failed to load ZenTao issue. View the issue in ZenTao, or reload the page.',
-          );
+          this.errorMessage = this.$options.i18n.defaultErrorMessage;
         })
         .finally(() => {
           this.isLoading = false;
         });
     },
-
     externalIssueCommentId(id) {
       return `external_note_${id}`;
     },
   },
+  i18n: {
+    defaultErrorMessage: s__(
+      'ZenTaoIntegration|Failed to load ZenTao issue. View the issue in ZenTao, or reload the page.',
+    ),
+  },
 };
 </script>
 
@@ -120,14 +120,8 @@ export default {
       >
         <template #status-badge>{{ statusBadgeText }}</template>
 
-        <template #right-sidebar-items="{ sidebarExpanded, toggleSidebar }">
-          <zentao-issue-sidebar
-            :sidebar-expanded="sidebarExpanded"
-            :issue="issue"
-            :is-loading-status="isLoadingStatus"
-            :statuses="statuses"
-            @sidebar-toggle="toggleSidebar"
-          />
+        <template #right-sidebar-items>
+          <zentao-issue-sidebar :issue="issue" />
         </template>
 
         <template #discussion>
@@ -143,8 +137,8 @@ export default {
             :note-created-at="comment.createdAt"
           >
             <template #badges>
-              <gl-badge v-gl-tooltip="{ title: __('This is a ZenTao user.') }">
-                {{ __('ZenTao user') }}
+              <gl-badge v-gl-tooltip="{ title: s__('ZenTaoIntegration|This is a ZenTao user.') }">
+                {{ s__('ZenTaoIntegration|ZenTao user') }}
               </gl-badge>
             </template>
           </note>
diff --git a/ee/app/assets/javascripts/integrations/zentao/issues_show/constants.js b/ee/app/assets/javascripts/integrations/zentao/issues_show/constants.js
deleted file mode 100644
index 29bb2dedfd2554..00000000000000
--- a/ee/app/assets/javascripts/integrations/zentao/issues_show/constants.js
+++ /dev/null
@@ -1,13 +0,0 @@
-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/ee/app/assets/javascripts/integrations/zentao/issues_show/zentao_issues_show_bundle.js b/ee/app/assets/javascripts/integrations/zentao/issues_show/zentao_issues_show_bundle.js
index 54bdc4676b6d8a..137de031eaced8 100644
--- a/ee/app/assets/javascripts/integrations/zentao/issues_show/zentao_issues_show_bundle.js
+++ b/ee/app/assets/javascripts/integrations/zentao/issues_show/zentao_issues_show_bundle.js
@@ -9,12 +9,11 @@ export default function initZentaoIssueShow({ mountPointSelector }) {
     return null;
   }
 
-  const { issueLabelsPath, issuesShowPath, issuesListPath } = mountPointEl.dataset;
+  const { issuesShowPath, issuesListPath } = mountPointEl.dataset;
 
   return new Vue({
     el: mountPointEl,
     provide: {
-      issueLabelsPath,
       issuesShowPath,
       issuesListPath,
     },
diff --git a/ee/spec/frontend/integrations/jira/issues_show/components/jira_issues_show_root_spec.js b/ee/spec/frontend/integrations/jira/issues_show/components/jira_issues_show_root_spec.js
index 28e2a0ddb9b6da..8d45a58557834b 100644
--- a/ee/spec/frontend/integrations/jira/issues_show/components/jira_issues_show_root_spec.js
+++ b/ee/spec/frontend/integrations/jira/issues_show/components/jira_issues_show_root_spec.js
@@ -5,7 +5,7 @@ import MockAdapter from 'axios-mock-adapter';
 import * as JiraIssuesShowApi from 'ee/integrations/jira/issues_show/api';
 import JiraIssuesShow from 'ee/integrations/jira/issues_show/components/jira_issues_show_root.vue';
 import JiraIssueSidebar from 'ee/integrations/jira/issues_show/components/sidebar/jira_issues_sidebar_root.vue';
-import { issueStates } from 'ee/integrations/jira/issues_show/constants';
+import { issueStates } from 'ee/external_issues_show/constants';
 import waitForPromises from 'helpers/wait_for_promises';
 import IssuableHeader from '~/issuable_show/components/issuable_header.vue';
 import IssuableShow from '~/issuable_show/components/issuable_show_root.vue';
diff --git a/ee/spec/frontend/integrations/zentao/issues_show/components/sidebar/zentao_issues_sidebar_root_spec.js b/ee/spec/frontend/integrations/zentao/issues_show/components/sidebar/zentao_issues_sidebar_root_spec.js
index 8ffef958c8fc5f..535a22a10506cf 100644
--- a/ee/spec/frontend/integrations/zentao/issues_show/components/sidebar/zentao_issues_sidebar_root_spec.js
+++ b/ee/spec/frontend/integrations/zentao/issues_show/components/sidebar/zentao_issues_sidebar_root_spec.js
@@ -5,7 +5,7 @@ import IssueField from 'ee/external_issues_show/components/sidebar/issue_field.v
 import Sidebar from 'ee/integrations/zentao/issues_show/components/sidebar/zentao_issues_sidebar_root.vue';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import LabelsSelect from '~/vue_shared/components/sidebar/labels_select_vue/labels_select_root.vue';
-import { mockZentaoIssue as mockZentaoIssueData, mockZentaoIssuesProvides } from '../../mock_data';
+import { mockZentaoIssue as mockZentaoIssueData } from '../../mock_data';
 
 const mockZentaoIssue = convertObjectPropsToCamelCase(mockZentaoIssueData, { deep: true });
 
@@ -20,7 +20,6 @@ describe('ZentaoIssuesSidebar', () => {
   const createComponent = ({ props = {} } = {}) => {
     wrapper = shallowMount(Sidebar, {
       propsData: { ...defaultProps, ...props },
-      provide: mockZentaoIssuesProvides,
     });
   };
 
diff --git a/ee/spec/frontend/integrations/zentao/issues_show/components/zentao_issues_show_root_spec.js b/ee/spec/frontend/integrations/zentao/issues_show/components/zentao_issues_show_root_spec.js
index 3f15c5defbc749..72c40da3495e33 100644
--- a/ee/spec/frontend/integrations/zentao/issues_show/components/zentao_issues_show_root_spec.js
+++ b/ee/spec/frontend/integrations/zentao/issues_show/components/zentao_issues_show_root_spec.js
@@ -2,7 +2,6 @@ import { GlAlert, GlLoadingIcon } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
 import { issueStates } from 'ee/external_issues_show/constants';
-import ZentaoIssueSidebar from 'ee/integrations/zentao/issues_show/components/sidebar/zentao_issues_sidebar_root.vue';
 import ZentaoIssuesShow from 'ee/integrations/zentao/issues_show/components/zentao_issues_show_root.vue';
 
 import waitForPromises from 'helpers/wait_for_promises';
@@ -10,8 +9,7 @@ import IssuableHeader from '~/issuable_show/components/issuable_header.vue';
 import IssuableShow from '~/issuable_show/components/issuable_show_root.vue';
 import IssuableSidebar from '~/issuable_sidebar/components/issuable_sidebar_root.vue';
 import axios from '~/lib/utils/axios_utils';
-import { s__ } from '~/locale';
-import { mockZentaoIssue, mockZentaoIssuesProvides } from '../mock_data';
+import { mockZentaoIssue } from '../mock_data';
 
 const mockZentaoIssuesShowPath = 'zentao_issues_show_path';
 
@@ -22,7 +20,6 @@ describe('ZentaoIssuesShow', () => {
   const findGlAlert = () => wrapper.findComponent(GlAlert);
   const findGlLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
   const findIssuableShow = () => wrapper.findComponent(IssuableShow);
-  const findZentaoIssueSidebar = () => wrapper.findComponent(ZentaoIssueSidebar);
   const findIssuableShowStatusBadge = () =>
     wrapper.findComponent(IssuableHeader).find('[data-testid="status"]');
 
@@ -35,7 +32,6 @@ describe('ZentaoIssuesShow', () => {
       },
       provide: {
         issuesShowPath: mockZentaoIssuesShowPath,
-        ...mockZentaoIssuesProvides,
       },
     });
   };
@@ -70,11 +66,7 @@ describe('ZentaoIssuesShow', () => {
 
       expect(findGlLoadingIcon().exists()).toBe(false);
       expect(alert.exists()).toBe(true);
-      expect(alert.text()).toBe(
-        s__(
-          'ZenTaoIntegration|Failed to load ZenTao issue. View the issue in ZenTao, or reload the page.',
-        ),
-      );
+      expect(alert.text()).toBe(ZentaoIssuesShow.i18n.defaultErrorMessage);
       expect(alert.props('variant')).toBe('danger');
       expect(findIssuableShow().exists()).toBe(false);
     });
@@ -114,23 +106,4 @@ describe('ZentaoIssuesShow', () => {
       expect(findIssuableShowStatusBadge().text()).toBe(badgeText);
     });
   });
-
-  describe('ZentaoIssueSidebar events', () => {
-    beforeEach(async () => {
-      mockAxios.onGet(mockZentaoIssuesShowPath).replyOnce(200, mockZentaoIssue);
-      createComponent();
-
-      await waitForPromises();
-    });
-
-    it('updates `sidebarExpanded` prop on `sidebar-toggle` event', async () => {
-      const zentaoIssueSidebar = findZentaoIssueSidebar();
-      expect(zentaoIssueSidebar.props('sidebarExpanded')).toBe(true);
-
-      zentaoIssueSidebar.vm.$emit('sidebar-toggle');
-      await wrapper.vm.$nextTick();
-
-      expect(zentaoIssueSidebar.props('sidebarExpanded')).toBe(false);
-    });
-  });
 });
diff --git a/ee/spec/frontend/integrations/zentao/issues_show/mock_data.js b/ee/spec/frontend/integrations/zentao/issues_show/mock_data.js
index 394dcc39a44374..fc6015040ea222 100644
--- a/ee/spec/frontend/integrations/zentao/issues_show/mock_data.js
+++ b/ee/spec/frontend/integrations/zentao/issues_show/mock_data.js
@@ -1,5 +1,3 @@
-import { s__, __ } from '~/locale';
-
 export const mockZentaoIssue = {
   title: 'FE-2 The second FE issue on Zentao',
   description_html:
@@ -43,29 +41,3 @@ export const mockZentaoIssueComment = {
   },
   id: 10000,
 };
-
-export const mockZentaoIssueStatuses = [{ title: 'In Progress' }, { title: 'Done' }];
-
-export const mockZentaoIssuesProvides = {
-  failFetchingIssueText: s__(
-    'ZenTaoIntegration|Failed to load ZenTao issue. View the issue in ZenTao, or reload the page.',
-  ),
-  failFetchingIssueStatusText: s__(
-    'ZenTaoIntegration|Failed to load ZenTao issue. View the issue in ZenTao, or reload the page.',
-  ),
-  failUpdatingIssueLabelsText: s__(
-    'ZenTaoIntegration|Failed to update ZenTao issue labels. View the issue in ZenTao, or reload the page.',
-  ),
-  failUpdatingIssueStatusText: s__(
-    'ZenTaoIntegration|Failed to update ZenTao issue status. View the issue in ZenTao, or reload the page.',
-  ),
-  featureFlagCanEditLabelKey: 'zentaoIssueDetailsEditLabels',
-  featureFlagCanEditStatusKey: 'zentaoIssueDetailsEditStatus',
-  seeMoreDetailText: s__(
-    `ZenTaoIntegration|Not all data may be displayed here. To view more details or make changes to this issue, go to %{linkStart}ZenTao%{linkEnd}.`,
-  ),
-  statusDropdownEmptyText: s__('ZenTaoIntegration|No available statuses'),
-  titleText: s__('ZenTaoIntegration|This issue is synchronized with ZenTao'),
-  userTypeText: __('ZenTao user'),
-  userTypeTooltipText: __('This is a ZenTao user.'),
-};
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 2e1092ded404d7..05d926f10368f1 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -34724,9 +34724,6 @@ msgstr ""
 msgid "This is a Jira user."
 msgstr ""
 
-msgid "This is a ZenTao user."
-msgstr ""
-
 msgid "This is a confidential %{noteableTypeText}."
 msgstr ""
 
@@ -39480,25 +39477,19 @@ msgstr[1] ""
 msgid "Your username is %{username}."
 msgstr ""
 
-msgid "ZenTao user"
-msgstr ""
-
 msgid "ZenTaoIntegration|Failed to load ZenTao issue. View the issue in ZenTao, or reload the page."
 msgstr ""
 
-msgid "ZenTaoIntegration|Failed to update ZenTao issue labels. View the issue in ZenTao, or reload the page."
-msgstr ""
-
-msgid "ZenTaoIntegration|Failed to update ZenTao issue status. View the issue in ZenTao, or reload the page."
+msgid "ZenTaoIntegration|Not all data may be displayed here. To view more details or make changes to this issue, go to %{linkStart}ZenTao%{linkEnd}."
 msgstr ""
 
-msgid "ZenTaoIntegration|No available statuses"
+msgid "ZenTaoIntegration|This is a ZenTao user."
 msgstr ""
 
-msgid "ZenTaoIntegration|Not all data may be displayed here. To view more details or make changes to this issue, go to %{linkStart}ZenTao%{linkEnd}."
+msgid "ZenTaoIntegration|This issue is synchronized with ZenTao"
 msgstr ""
 
-msgid "ZenTaoIntegration|This issue is synchronized with ZenTao"
+msgid "ZenTaoIntegration|ZenTao user"
 msgstr ""
 
 msgid "ZentaoIntegration|Base URL of the Zentao instance."
-- 
GitLab


From fa9ee2a5c47ccdff6f7abfacf4b226f277458fa4 Mon Sep 17 00:00:00 2001
From: JeremyWuuuuu <jeremyw@jihulab.com>
Date: Fri, 8 Oct 2021 09:43:22 +0800
Subject: [PATCH 10/17] Rename assignee component's name to make it appropriate

---
 .../external_issues_show/components/sidebar/assignee.vue        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ee/app/assets/javascripts/external_issues_show/components/sidebar/assignee.vue b/ee/app/assets/javascripts/external_issues_show/components/sidebar/assignee.vue
index 5e2a22789c7f66..5b6071c7241379 100644
--- a/ee/app/assets/javascripts/external_issues_show/components/sidebar/assignee.vue
+++ b/ee/app/assets/javascripts/external_issues_show/components/sidebar/assignee.vue
@@ -4,7 +4,7 @@ import { __ } from '~/locale';
 import AssigneeTitle from '~/sidebar/components/assignees/assignee_title.vue';
 
 export default {
-  name: 'JiraIssuesSidebarAssignee',
+  name: 'ExternalIssuesSidebarAssignee',
   components: {
     GlAvatarLabeled,
     GlAvatarLink,
-- 
GitLab


From 17bd5df86cf010aace017c841a005aa1f1b104a9 Mon Sep 17 00:00:00 2001
From: JeremyWuuuuu <jeremyw@jihulab.com>
Date: Fri, 8 Oct 2021 10:09:33 +0800
Subject: [PATCH 11/17] Remove unnecessary comments

---
 .../pages/projects/integrations/zentao/issues/show/index.js      | 1 -
 1 file changed, 1 deletion(-)

diff --git a/ee/app/assets/javascripts/pages/projects/integrations/zentao/issues/show/index.js b/ee/app/assets/javascripts/pages/projects/integrations/zentao/issues/show/index.js
index cf7aad55f0654a..b328a87396a572 100644
--- a/ee/app/assets/javascripts/pages/projects/integrations/zentao/issues/show/index.js
+++ b/ee/app/assets/javascripts/pages/projects/integrations/zentao/issues/show/index.js
@@ -1,4 +1,3 @@
 import initZentaoIssueShow from 'ee/integrations/zentao/issues_show/zentao_issues_show_bundle';
-// import initJiraIssueShow from 'ee/integrations/jira/issues_show/jira_issues_show_bundle';
 
 initZentaoIssueShow({ mountPointSelector: '.js-zentao-issues-show-app' });
-- 
GitLab


From 576e608d0c49cc2b9ba9c57c6b5c8855bbba7cc6 Mon Sep 17 00:00:00 2001
From: JeremyWuuuuu <jeremyw@jihulab.com>
Date: Sat, 9 Oct 2021 11:12:29 +0800
Subject: [PATCH 12/17] Address comments

---
 .../integrations/zentao/issues_show/api.js          |  2 +-
 .../components/zentao_issues_show_root.vue          |  2 +-
 .../sidebar/zentao_issues_sidebar_root_spec.js      | 13 ++++++-------
 .../components/zentao_issues_show_root_spec.js      |  9 ++++++---
 4 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/ee/app/assets/javascripts/integrations/zentao/issues_show/api.js b/ee/app/assets/javascripts/integrations/zentao/issues_show/api.js
index e49de73c06f326..3c54d84b5c312c 100644
--- a/ee/app/assets/javascripts/integrations/zentao/issues_show/api.js
+++ b/ee/app/assets/javascripts/integrations/zentao/issues_show/api.js
@@ -1,6 +1,6 @@
 import axios from '~/lib/utils/axios_utils';
 
-export const fetchIssue = async (issuePath) => {
+export const fetchIssue = (issuePath) => {
   return axios.get(issuePath).then(({ data }) => {
     return data;
   });
diff --git a/ee/app/assets/javascripts/integrations/zentao/issues_show/components/zentao_issues_show_root.vue b/ee/app/assets/javascripts/integrations/zentao/issues_show/components/zentao_issues_show_root.vue
index 4927877df3a5f2..491d39dc972039 100644
--- a/ee/app/assets/javascripts/integrations/zentao/issues_show/components/zentao_issues_show_root.vue
+++ b/ee/app/assets/javascripts/integrations/zentao/issues_show/components/zentao_issues_show_root.vue
@@ -18,7 +18,7 @@ import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import { s__ } from '~/locale';
 
 export default {
-  name: 'ExternalIssuesShow',
+  name: 'ZenTaoIssuesShow',
   components: {
     GlAlert,
     GlSprintf,
diff --git a/ee/spec/frontend/integrations/zentao/issues_show/components/sidebar/zentao_issues_sidebar_root_spec.js b/ee/spec/frontend/integrations/zentao/issues_show/components/sidebar/zentao_issues_sidebar_root_spec.js
index 535a22a10506cf..bebd9a064bb987 100644
--- a/ee/spec/frontend/integrations/zentao/issues_show/components/sidebar/zentao_issues_sidebar_root_spec.js
+++ b/ee/spec/frontend/integrations/zentao/issues_show/components/sidebar/zentao_issues_sidebar_root_spec.js
@@ -17,12 +17,16 @@ describe('ZentaoIssuesSidebar', () => {
     issue: mockZentaoIssue,
   };
 
-  const createComponent = ({ props = {} } = {}) => {
+  const createComponent = () => {
     wrapper = shallowMount(Sidebar, {
-      propsData: { ...defaultProps, ...props },
+      propsData: defaultProps,
     });
   };
 
+  beforeEach(() => {
+    createComponent();
+  });
+
   afterEach(() => {
     wrapper.destroy();
   });
@@ -33,27 +37,22 @@ describe('ZentaoIssuesSidebar', () => {
   const findIssueField = () => wrapper.findComponent(IssueField);
 
   it('renders Labels block', () => {
-    createComponent();
-
     expect(findLabelsSelect().props('selectedLabels')).toBe(mockZentaoIssue.labels);
   });
 
   it('renders Assignee block', () => {
-    createComponent();
     const assignee = findAssignee();
 
     expect(assignee.props('assignee')).toBe(mockZentaoIssue.assignees[0]);
   });
 
   it('renders IssueDueDate', () => {
-    createComponent();
     const dueDate = findIssueDueDate();
 
     expect(dueDate.props('dueDate')).toBe(mockZentaoIssue.dueDate);
   });
 
   it('renders IssueField', () => {
-    createComponent();
     const field = findIssueField();
 
     expect(field.props('icon')).toBe('progress');
diff --git a/ee/spec/frontend/integrations/zentao/issues_show/components/zentao_issues_show_root_spec.js b/ee/spec/frontend/integrations/zentao/issues_show/components/zentao_issues_show_root_spec.js
index 72c40da3495e33..7be711829a933a 100644
--- a/ee/spec/frontend/integrations/zentao/issues_show/components/zentao_issues_show_root_spec.js
+++ b/ee/spec/frontend/integrations/zentao/issues_show/components/zentao_issues_show_root_spec.js
@@ -9,6 +9,7 @@ import IssuableHeader from '~/issuable_show/components/issuable_header.vue';
 import IssuableShow from '~/issuable_show/components/issuable_show_root.vue';
 import IssuableSidebar from '~/issuable_sidebar/components/issuable_sidebar_root.vue';
 import axios from '~/lib/utils/axios_utils';
+import httpStatusCodes from '~/lib/utils/http_status';
 import { mockZentaoIssue } from '../mock_data';
 
 const mockZentaoIssuesShowPath = 'zentao_issues_show_path';
@@ -57,7 +58,7 @@ describe('ZentaoIssuesShow', () => {
 
   describe('when error occurs during fetch', () => {
     it('renders error message', async () => {
-      mockAxios.onGet(mockZentaoIssuesShowPath).replyOnce(500);
+      mockAxios.onGet(mockZentaoIssuesShowPath).replyOnce(httpStatusCodes.INTERNAL_SERVER_ERROR);
       createComponent();
 
       await waitForPromises();
@@ -73,7 +74,7 @@ describe('ZentaoIssuesShow', () => {
   });
 
   it('renders IssuableShow', async () => {
-    mockAxios.onGet(mockZentaoIssuesShowPath).replyOnce(200, mockZentaoIssue);
+    mockAxios.onGet(mockZentaoIssuesShowPath).replyOnce(httpStatusCodes.OK, mockZentaoIssue);
     createComponent();
 
     await waitForPromises();
@@ -88,7 +89,9 @@ describe('ZentaoIssuesShow', () => {
     ${issueStates.CLOSED} | ${'mobile-issue-close'} | ${'status-box-issue-closed'} | ${'Closed'}
   `('when issue state is `$state`', ({ state, statusIcon, statusBadgeClass, badgeText }) => {
     beforeEach(async () => {
-      mockAxios.onGet(mockZentaoIssuesShowPath).replyOnce(200, { ...mockZentaoIssue, state });
+      mockAxios
+        .onGet(mockZentaoIssuesShowPath)
+        .replyOnce(httpStatusCodes.OK, { ...mockZentaoIssue, state });
       createComponent();
 
       await waitForPromises();
-- 
GitLab


From 413c45e682ea8473bd046a07f4fb33eb2dbe8613 Mon Sep 17 00:00:00 2001
From: JeremyWuuuuu <jeremyw@jihulab.com>
Date: Mon, 11 Oct 2021 15:55:53 +0800
Subject: [PATCH 13/17] Address comments

---
 .../issues_show/components/zentao_issues_show_root.vue     | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/ee/app/assets/javascripts/integrations/zentao/issues_show/components/zentao_issues_show_root.vue b/ee/app/assets/javascripts/integrations/zentao/issues_show/components/zentao_issues_show_root.vue
index 491d39dc972039..52bcedc2550f72 100644
--- a/ee/app/assets/javascripts/integrations/zentao/issues_show/components/zentao_issues_show_root.vue
+++ b/ee/app/assets/javascripts/integrations/zentao/issues_show/components/zentao_issues_show_root.vue
@@ -52,7 +52,7 @@ export default {
       return this.isIssueOpen ? 'status-box-open' : 'status-box-issue-closed';
     },
     statusBadgeText() {
-      return issueStateLabels[this.issue.state];
+      return issueStateLabels[this.issue?.state];
     },
     statusIcon() {
       return this.isIssueOpen ? 'issue-open-m' : 'mobile-issue-close';
@@ -65,6 +65,9 @@ export default {
     loadIssue() {
       fetchIssue(this.issuesShowPath)
         .then((issue) => {
+          if (!issue) {
+            throw new Error();
+          }
           this.issue = convertObjectPropsToCamelCase(issue, { deep: true });
         })
         .catch(() => {
@@ -118,7 +121,7 @@ export default {
         :status-badge-class="statusBadgeClass"
         :status-icon="statusIcon"
       >
-        <template #status-badge>{{ statusBadgeText }}</template>
+        <template #status-badge v-if="statusBadgeText">{{ statusBadgeText }}</template>
 
         <template #right-sidebar-items>
           <zentao-issue-sidebar :issue="issue" />
-- 
GitLab


From 6a2e789fc57d6dda25ee9e34eb3c067bffc8231d Mon Sep 17 00:00:00 2001
From: JeremyWuuuuu <jeremyw@jihulab.com>
Date: Mon, 11 Oct 2021 17:24:31 +0800
Subject: [PATCH 14/17] Fix linter issue

---
 .../zentao/issues_show/components/zentao_issues_show_root.vue   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ee/app/assets/javascripts/integrations/zentao/issues_show/components/zentao_issues_show_root.vue b/ee/app/assets/javascripts/integrations/zentao/issues_show/components/zentao_issues_show_root.vue
index 52bcedc2550f72..c25d60903fd268 100644
--- a/ee/app/assets/javascripts/integrations/zentao/issues_show/components/zentao_issues_show_root.vue
+++ b/ee/app/assets/javascripts/integrations/zentao/issues_show/components/zentao_issues_show_root.vue
@@ -121,7 +121,7 @@ export default {
         :status-badge-class="statusBadgeClass"
         :status-icon="statusIcon"
       >
-        <template #status-badge v-if="statusBadgeText">{{ statusBadgeText }}</template>
+        <template v-if="statusBadgeText" #status-badge>{{ statusBadgeText }}</template>
 
         <template #right-sidebar-items>
           <zentao-issue-sidebar :issue="issue" />
-- 
GitLab


From d40f9e07199fe8483dc4c8c48b024c94b0e277d2 Mon Sep 17 00:00:00 2001
From: JeremyWuuuuu <jeremyw@jihulab.com>
Date: Tue, 12 Oct 2021 09:22:50 +0800
Subject: [PATCH 15/17] Remove unnecessary html class

---
 .../components/sidebar/zentao_issues_sidebar_root.vue           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ee/app/assets/javascripts/integrations/zentao/issues_show/components/sidebar/zentao_issues_sidebar_root.vue b/ee/app/assets/javascripts/integrations/zentao/issues_show/components/sidebar/zentao_issues_sidebar_root.vue
index b90f243c2cb900..d2db9dbe7e148b 100644
--- a/ee/app/assets/javascripts/integrations/zentao/issues_show/components/sidebar/zentao_issues_sidebar_root.vue
+++ b/ee/app/assets/javascripts/integrations/zentao/issues_show/components/sidebar/zentao_issues_sidebar_root.vue
@@ -44,7 +44,7 @@ export default {
       :allow-scoped-labels="true"
       :selected-labels="issue.labels"
       variant="sidebar"
-      class="block labels js-labels-block"
+      class="block labels"
     >
       {{ __('None') }}
     </labels-select>
-- 
GitLab


From 50ac34aa5e5aac9e1cafbd1763f3cefd90766514 Mon Sep 17 00:00:00 2001
From: JeremyWuuuuu <jeremyw@jihulab.com>
Date: Tue, 12 Oct 2021 14:46:58 +0800
Subject: [PATCH 16/17] Add test case for discussion tooltip component

---
 .../zentao_issues_show_root_spec.js           | 33 ++++++++++++++++---
 1 file changed, 29 insertions(+), 4 deletions(-)

diff --git a/ee/spec/frontend/integrations/zentao/issues_show/components/zentao_issues_show_root_spec.js b/ee/spec/frontend/integrations/zentao/issues_show/components/zentao_issues_show_root_spec.js
index 7be711829a933a..3afe335f9cc30c 100644
--- a/ee/spec/frontend/integrations/zentao/issues_show/components/zentao_issues_show_root_spec.js
+++ b/ee/spec/frontend/integrations/zentao/issues_show/components/zentao_issues_show_root_spec.js
@@ -1,16 +1,21 @@
-import { GlAlert, GlLoadingIcon } from '@gitlab/ui';
-import { shallowMount } from '@vue/test-utils';
+import { GlAlert, GlLoadingIcon, GlBadge } from '@gitlab/ui';
 import MockAdapter from 'axios-mock-adapter';
 import { issueStates } from 'ee/external_issues_show/constants';
 import ZentaoIssuesShow from 'ee/integrations/zentao/issues_show/components/zentao_issues_show_root.vue';
 
 import waitForPromises from 'helpers/wait_for_promises';
+import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import IssuableHeader from '~/issuable_show/components/issuable_header.vue';
 import IssuableShow from '~/issuable_show/components/issuable_show_root.vue';
+import IssuableDiscussion from '~/issuable_show/components/issuable_discussion.vue';
+import Note from 'ee/external_issues_show/components/note.vue';
 import IssuableSidebar from '~/issuable_sidebar/components/issuable_sidebar_root.vue';
 import axios from '~/lib/utils/axios_utils';
 import httpStatusCodes from '~/lib/utils/http_status';
-import { mockZentaoIssue } from '../mock_data';
+import { s__ } from '~/locale';
+
+import { mockZentaoIssue, mockZentaoIssueComment } from '../mock_data';
 
 const mockZentaoIssuesShowPath = 'zentao_issues_show_path';
 
@@ -25,11 +30,17 @@ describe('ZentaoIssuesShow', () => {
     wrapper.findComponent(IssuableHeader).find('[data-testid="status"]');
 
   const createComponent = () => {
-    wrapper = shallowMount(ZentaoIssuesShow, {
+    wrapper = shallowMountExtended(ZentaoIssuesShow, {
+      directives: {
+        GlTooltip: createMockDirective(),
+      },
       stubs: {
         IssuableHeader,
         IssuableShow,
         IssuableSidebar,
+        IssuableDiscussion,
+        Note,
+        GlBadge,
       },
       provide: {
         issuesShowPath: mockZentaoIssuesShowPath,
@@ -83,6 +94,20 @@ describe('ZentaoIssuesShow', () => {
     expect(findIssuableShow().exists()).toBe(true);
   });
 
+  it('displays a tooltip', async () => {
+    mockAxios.onGet(mockZentaoIssuesShowPath).replyOnce(httpStatusCodes.OK, {
+      ...mockZentaoIssue,
+      comments: [mockZentaoIssueComment],
+    });
+    createComponent();
+
+    await waitForPromises();
+    const issuableDiscussion = wrapper.findComponent(IssuableDiscussion).findComponent(GlBadge);
+    const tooltip = getBinding(issuableDiscussion.element, 'gl-tooltip');
+    expect(tooltip).toBeDefined();
+    expect(tooltip.value).toEqual({ title: s__('ZenTaoIntegration|This is a ZenTao user.') });
+  });
+
   describe.each`
     state                 | statusIcon              | statusBadgeClass             | badgeText
     ${issueStates.OPENED} | ${'issue-open-m'}       | ${'status-box-open'}         | ${'Open'}
-- 
GitLab


From eaa912a62b70bb82f7369f8891cafae1341e480d Mon Sep 17 00:00:00 2001
From: JeremyWuuuuu <jeremyw@jihulab.com>
Date: Wed, 13 Oct 2021 09:12:58 +0800
Subject: [PATCH 17/17] Remove i18n in test

---
 .../issues_show/components/zentao_issues_show_root_spec.js     | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/ee/spec/frontend/integrations/zentao/issues_show/components/zentao_issues_show_root_spec.js b/ee/spec/frontend/integrations/zentao/issues_show/components/zentao_issues_show_root_spec.js
index 3afe335f9cc30c..c4d136828bfcec 100644
--- a/ee/spec/frontend/integrations/zentao/issues_show/components/zentao_issues_show_root_spec.js
+++ b/ee/spec/frontend/integrations/zentao/issues_show/components/zentao_issues_show_root_spec.js
@@ -13,7 +13,6 @@ import Note from 'ee/external_issues_show/components/note.vue';
 import IssuableSidebar from '~/issuable_sidebar/components/issuable_sidebar_root.vue';
 import axios from '~/lib/utils/axios_utils';
 import httpStatusCodes from '~/lib/utils/http_status';
-import { s__ } from '~/locale';
 
 import { mockZentaoIssue, mockZentaoIssueComment } from '../mock_data';
 
@@ -105,7 +104,7 @@ describe('ZentaoIssuesShow', () => {
     const issuableDiscussion = wrapper.findComponent(IssuableDiscussion).findComponent(GlBadge);
     const tooltip = getBinding(issuableDiscussion.element, 'gl-tooltip');
     expect(tooltip).toBeDefined();
-    expect(tooltip.value).toEqual({ title: s__('ZenTaoIntegration|This is a ZenTao user.') });
+    expect(tooltip.value).toEqual({ title: 'This is a ZenTao user.' });
   });
 
   describe.each`
-- 
GitLab