Add latest changes from gitlab-org/gitlab@master

2 files changed, 118 insertions, 53 deletions

diff --git a/app/assets/javascripts/releases/components/issuable_stats.vue b/app/assets/javascripts/releases/components/issuable_stats.vue
new file mode 100644
index 00000000000..5f28331c543
--- /dev/null
+++ b/app/assets/javascripts/releases/components/issuable_stats.vue
@@ -0,0 +1,99 @@
+<script>
+import { GlLink, GlBadge, GlSprintf } from '@gitlab/ui';
+
+export default {
+  name: 'IssuableStats',
+  components: {
+    GlLink,
+    GlBadge,
+    GlSprintf,
+  },
+  props: {
+    label: {
+      type: String,
+      required: true,
+    },
+    total: {
+      type: Number,
+      required: true,
+    },
+    closed: {
+      type: Number,
+      required: true,
+    },
+    merged: {
+      type: Number,
+      required: false,
+      default: null,
+    },
+    openPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    closedPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    mergedPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  computed: {
+    open() {
+      return this.total - (this.closed + (this.merged || 0));
+    },
+    showMerged() {
+      return this.merged != null;
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    class="gl-display-flex gl-flex-direction-column gl-flex-shrink-0 gl-mr-6 gl-mb-5 js-issues-container"
+  >
+    <span class="gl-mb-2">
+      {{ label }}
+      <gl-badge variant="muted" size="sm">{{ total }}</gl-badge>
+    </span>
+    <div class="gl-display-flex">
+      <span class="gl-white-space-pre-wrap" data-testid="open-stat">
+        <gl-sprintf :message="__('Open: %{open}')">
+          <template #open>
+            <gl-link v-if="openPath" :href="openPath">{{ open }}</gl-link>
+            <template v-else>{{ open }}</template>
+          </template>
+        </gl-sprintf>
+      </span>
+
+      <template v-if="showMerged">
+        <span class="gl-mx-2">&bull;</span>
+
+        <span class="gl-white-space-pre-wrap" data-testid="merged-stat">
+          <gl-sprintf :message="__('Merged: %{merged}')">
+            <template #merged>
+              <gl-link v-if="mergedPath" :href="mergedPath">{{ merged }}</gl-link>
+              <template v-else>{{ merged }}</template>
+            </template>
+          </gl-sprintf>
+        </span>
+      </template>
+
+      <span class="gl-mx-2">&bull;</span>
+
+      <span class="gl-white-space-pre-wrap" data-testid="closed-stat">
+        <gl-sprintf :message="__('Closed: %{closed}')">
+          <template #closed>
+            <gl-link v-if="closedPath" :href="closedPath">{{ closed }}</gl-link>
+            <template v-else>{{ closed }}</template>
+          </template>
+        </gl-sprintf>
+      </span>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/releases/components/release_block_milestone_info.vue b/app/assets/javascripts/releases/components/release_block_milestone_info.vue
index deff673cc17..30598a5eec1 100644
--- a/app/assets/javascripts/releases/components/release_block_milestone_info.vue
+++ b/app/assets/javascripts/releases/components/release_block_milestone_info.vue
@@ -1,24 +1,17 @@
 <script>
-import {
-  GlProgressBar,
-  GlLink,
-  GlBadge,
-  GlButton,
-  GlTooltipDirective,
-  GlSprintf,
-} from '@gitlab/ui';
+import { GlProgressBar, GlLink, GlButton, GlTooltipDirective } from '@gitlab/ui';
 import { sum } from 'lodash';
 import { __, n__, sprintf } from '~/locale';
 import { MAX_MILESTONES_TO_DISPLAY } from '../constants';
+import IssuableStats from './issuable_stats.vue';
 
 export default {
   name: 'ReleaseBlockMilestoneInfo',
   components: {
     GlProgressBar,
     GlLink,
-    GlBadge,
     GlButton,
-    GlSprintf,
+    IssuableStats,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -64,18 +57,9 @@ export default {
     closedIssuesCount() {
       return sum(this.allIssueStats.map(stats => stats.closed || 0));
     },
-    openIssuesCount() {
-      return this.totalIssuesCount - this.closedIssuesCount;
-    },
     milestoneLabelText() {
       return n__('Milestone', 'Milestones', this.milestones.length);
     },
-    issueCountsText() {
-      return sprintf(__('Open: %{open} • Closed: %{closed}'), {
-        open: this.openIssuesCount,
-        closed: this.closedIssuesCount,
-      });
-    },
     milestonesToDisplay() {
       return this.showAllMilestones
         ? this.milestones
@@ -106,20 +90,22 @@ export default {
 };
 </script>
 <template>
-  <div class="release-block-milestone-info d-flex align-items-start flex-wrap">
+  <div class="release-block-milestone-info gl-display-flex gl-flex-wrap">
     <div
       v-gl-tooltip
-      class="milestone-progress-bar-container js-milestone-progress-bar-container d-flex flex-column align-items-start flex-shrink-1 mr-4 mb-3"
+      class="milestone-progress-bar-container js-milestone-progress-bar-container gl-display-flex gl-flex-direction-column gl-mr-6 gl-mb-5"
       :title="__('Closed issues')"
     >
-      <span class="mb-2">{{ percentCompleteText }}</span>
-      <span class="w-100">
+      <span class="gl-mb-3">{{ percentCompleteText }}</span>
+      <span class="gl-w-full">
         <gl-progress-bar :value="closedIssuesCount" :max="totalIssuesCount" variant="success" />
       </span>
     </div>
-    <div class="d-flex flex-column align-items-start mr-4 mb-3 js-milestone-list-container">
-      <span class="mb-1">{{ milestoneLabelText }}</span>
-      <div class="d-flex flex-wrap align-items-end">
+    <div
+      class="gl-display-flex gl-flex-direction-column gl-mr-6 gl-mb-5 js-milestone-list-container"
+    >
+      <span class="gl-mb-2">{{ milestoneLabelText }}</span>
+      <div class="gl-display-flex gl-flex-wrap gl-align-items-flex-end">
         <template v-for="(milestone, index) in milestonesToDisplay">
           <gl-link
             :key="milestone.id"
@@ -141,32 +127,12 @@ export default {
         </template>
       </div>
     </div>
-    <div class="d-flex flex-column align-items-start flex-shrink-0 mr-4 mb-3 js-issues-container">
-      <span class="mb-1">
-        {{ __('Issues') }}
-        <gl-badge variant="muted" size="sm">{{ totalIssuesCount }}</gl-badge>
-      </span>
-      <div class="d-flex">
-        <gl-link v-if="openIssuesPath" ref="openIssuesLink" :href="openIssuesPath">
-          <gl-sprintf :message="__('Open: %{openIssuesCount}')">
-            <template #openIssuesCount>{{ openIssuesCount }}</template>
-          </gl-sprintf>
-        </gl-link>
-        <span v-else ref="openIssuesText">
-          {{ sprintf(__('Open: %{openIssuesCount}'), { openIssuesCount }) }}
-        </span>
-
-        <span class="mx-1">&bull;</span>
-
-        <gl-link v-if="closedIssuesPath" ref="closedIssuesLink" :href="closedIssuesPath">
-          <gl-sprintf :message="__('Closed: %{closedIssuesCount}')">
-            <template #closedIssuesCount>{{ closedIssuesCount }}</template>
-          </gl-sprintf>
-        </gl-link>
-        <span v-else ref="closedIssuesText">
-          {{ sprintf(__('Closed: %{closedIssuesCount}'), { closedIssuesCount }) }}
-        </span>
-      </div>
-    </div>
+    <issuable-stats
+      :label="__('Issues')"
+      :total="totalIssuesCount"
+      :closed="closedIssuesCount"
+      :open-path="openIssuesPath"
+      :closed-path="closedIssuesPath"
+    />
   </div>
 </template>