Add latest changes from gitlab-org/gitlab@master

9 files changed, 112 insertions, 16 deletions

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/added_commit_message.vue b/app/assets/javascripts/vue_merge_request_widget/components/added_commit_message.vue
index 492e68b636f..437d035fbf5 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/added_commit_message.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/added_commit_message.vue
@@ -12,6 +12,11 @@ export default {
   },
   mixins: [glFeatureFlagMixin()],
   props: {
+    state: {
+      type: String,
+      required: false,
+      default: '',
+    },
     isSquashEnabled: {
       type: Boolean,
       required: false,
@@ -30,8 +35,16 @@ export default {
       type: String,
       required: true,
     },
+    mergeCommitSha: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   computed: {
+    isMerged() {
+      return this.state === 'merged';
+    },
     targetBranchEscaped() {
       return escape(this.targetBranch);
     },
@@ -39,6 +52,22 @@ export default {
       return n__('%d commit', '%d commits', this.isSquashEnabled ? 1 : this.commitsCount);
     },
     message() {
+      if (this.glFeatures.restructuredMrWidget) {
+        if (this.state === 'closed') {
+          return s__('mrWidgetCommitsAdded|The changes were not merged into %{targetBranch}.');
+        } else if (this.isMerged) {
+          return s__(
+            'mrWidgetCommitsAdded|Changes merged into %{targetBranch} with %{mergeCommitSha}%{squashedCommits}.',
+          );
+        }
+
+        return this.isFastForwardEnabled
+          ? s__('mrWidgetCommitsAdded|%{commitCount} will be added to %{targetBranch}.')
+          : s__(
+              'mrWidgetCommitsAdded|%{commitCount} and %{mergeCommitCount} will be added to %{targetBranch}%{squashedCommits}.',
+            );
+      }
+
       return this.isFastForwardEnabled
         ? s__('mrWidgetCommitsAdded|Adds %{commitCount} to %{targetBranch}.')
         : s__(
@@ -48,6 +77,13 @@ export default {
     textDecorativeComponent() {
       return this.glFeatures.restructuredMrWidget ? 'span' : 'strong';
     },
+    squashCommitMessage() {
+      if (this.isMerged) {
+        return s__('mergedCommitsAdded|(commits were squashed)');
+      }
+
+      return n__('(squashes %d commit)', '(squashes %d commits)', this.commitsCount);
+    },
   },
   mergeCommitCount,
 };
@@ -69,9 +105,14 @@ export default {
       </template>
       <template #squashedCommits>
         <template v-if="glFeatures.restructuredMrWidget && isSquashEnabled">
-          {{ n__('(squashes %d commit)', '(squashes %d commits)', commitsCount) }}</template
+          {{ squashCommitMessage }}</template
         ></template
       >
+      <template #mergeCommitSha>
+        <template v-if="glFeatures.restructuredMrWidget"
+          ><span class="label-branch">{{ mergeCommitSha }}</span></template
+        >
+      </template>
     </gl-sprintf>
   </span>
 </template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue b/app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue
index f1b89c42fb5..efd277c1756 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue
@@ -47,6 +47,8 @@ export default {
       fullData: [],
       isCollapsed: true,
       showFade: false,
+      modalData: undefined,
+      modalName: undefined,
     };
   },
   computed: {
@@ -116,6 +118,9 @@ export default {
 
       return summary;
     },
+    modalId() {
+      return this.modalName || `modal${this.$options.name}`;
+    },
   },
   watch: {
     isCollapsed(newVal) {
@@ -311,7 +316,12 @@ export default {
                 @appear="appear(index)"
                 @disappear="disappear(index)"
               >
-                <child-content :data="item" :widget-label="widgetLabel" :level="2" />
+                <child-content
+                  :data="item"
+                  :widget-label="widgetLabel"
+                  :modal-id="modalId"
+                  :level="2"
+                />
               </gl-intersection-observer>
             </div>
           </dynamic-scroller-item>
@@ -322,5 +332,8 @@ export default {
         class="fade mr-extenson-scrim gl-absolute gl-left-0 gl-bottom-0 gl-w-full gl-h-7 gl-pointer-events-none"
       ></div>
     </div>
+    <div v-if="$options.modalComponent && modalData">
+      <component :is="$options.modalComponent" :modal-id="modalId" v-bind="modalData" />
+    </div>
   </section>
 </template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/extensions/child_content.vue b/app/assets/javascripts/vue_merge_request_widget/components/extensions/child_content.vue
index 5cfee21dd5e..0ca4c92a5ae 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/extensions/child_content.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/extensions/child_content.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlBadge, GlLink, GlSafeHtmlDirective } from '@gitlab/ui';
+import { GlBadge, GlLink, GlSafeHtmlDirective, GlModalDirective } from '@gitlab/ui';
 import StatusIcon from './status_icon.vue';
 import Actions from './actions.vue';
 import { generateText } from './utils';
@@ -14,6 +14,7 @@ export default {
   },
   directives: {
     SafeHtml: GlSafeHtmlDirective,
+    GlModal: GlModalDirective,
   },
   props: {
     data: {
@@ -24,6 +25,11 @@ export default {
       type: String,
       required: true,
     },
+    modalId: {
+      type: String,
+      required: false,
+      default: null,
+    },
     level: {
       type: Number,
       required: true,
@@ -63,6 +69,11 @@ export default {
             <div v-if="data.link">
               <gl-link :href="data.link.href">{{ data.link.text }}</gl-link>
             </div>
+            <div v-if="data.modal">
+              <gl-link v-gl-modal="modalId" @click="data.modal.onClick">
+                {{ data.modal.text }}
+              </gl-link>
+            </div>
             <div v-if="data.supportingText">
               <p v-safe-html="generateText(data.supportingText)" class="gl-m-0"></p>
             </div>
@@ -87,6 +98,7 @@ export default {
             :key="childData.id"
             :data="childData"
             :widget-label="widgetLabel"
+            :modal-id="modalId"
             :level="3"
             data-testid="child-content"
           />
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/extensions/index.js b/app/assets/javascripts/vue_merge_request_widget/components/extensions/index.js
index 8438f3492b2..65273678fb9 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/extensions/index.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/extensions/index.js
@@ -14,6 +14,7 @@ export const registerExtension = (extension) => {
     i18n: extension.i18n,
     expandEvent: extension.expandEvent,
     enablePolling: extension.enablePolling,
+    modalComponent: extension.modalComponent,
     computed: {
       ...Object.keys(extension.computed).reduce(
         (acc, computedKey) => ({
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_enabled.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_enabled.vue
index a44caf886a4..aabbeac564a 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_enabled.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_enabled.vue
@@ -175,7 +175,7 @@ export default {
             {{ cancelButtonText }}
           </gl-button>
         </h4>
-        <section class="mr-info-list">
+        <section v-if="!glFeatures.restructuredMrWidget" class="mr-info-list">
           <p v-if="shouldRemoveSourceBranch">
             {{ s__('mrWidget|Deletes the source branch') }}
           </p>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_closed.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_closed.vue
index 6d5ca58aa20..d50e52f5ac1 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_closed.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_closed.vue
@@ -1,4 +1,5 @@
 <script>
+import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import MrWidgetAuthorTime from '../mr_widget_author_time.vue';
 import statusIcon from '../mr_widget_status_icon.vue';
 
@@ -8,6 +9,7 @@ export default {
     MrWidgetAuthorTime,
     statusIcon,
   },
+  mixins: [glFeatureFlagMixin()],
   props: {
     /* TODO: This is providing all store and service down when it
       only needs metrics and targetBranch */
@@ -29,7 +31,7 @@ export default {
         :date-readable="mr.metrics.readableClosedAt"
       />
 
-      <section class="mr-info-list">
+      <section v-if="!glFeatures.restructuredMrWidget" class="mr-info-list">
         <p>
           {{ s__('mrWidget|The changes were not merged into') }}
           <a :href="mr.targetBranchPath" class="label-branch"> {{ mr.targetBranch }} </a>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue
index 84dac95ce74..bf036f562ed 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue
@@ -1,6 +1,7 @@
 <script>
 /* eslint-disable @gitlab/vue-require-i18n-strings */
 import { GlLoadingIcon, GlButton, GlTooltipDirective, GlIcon } from '@gitlab/ui';
+import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import api from '~/api';
 import createFlash from '~/flash';
 import { s__, __ } from '~/locale';
@@ -22,6 +23,7 @@ export default {
     GlLoadingIcon,
     GlButton,
   },
+  mixins: [glFeatureFlagMixin()],
   props: {
     mr: {
       type: Object,
@@ -181,7 +183,11 @@ export default {
           {{ s__('mrWidget|Delete source branch') }}
         </gl-button>
       </div>
-      <section class="mr-info-list" data-qa-selector="merged_status_content">
+      <section
+        v-if="!glFeatures.restructuredMrWidget"
+        class="mr-info-list"
+        data-qa-selector="merged_status_content"
+      >
         <p>
           {{ s__('mrWidget|The changes were merged into') }}
           <span class="label-branch">
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merging.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merging.vue
index 887d1aab524..b86ab69af3f 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merging.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merging.vue
@@ -1,5 +1,6 @@
 <script>
 import { refreshUserMergeRequestCounts } from '~/commons/nav/user_merge_requests';
+import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import simplePoll from '~/lib/utils/simple_poll';
 import MergeRequest from '~/merge_request';
 import eventHub from '../../event_hub';
@@ -14,6 +15,7 @@ export default {
   components: {
     statusIcon,
   },
+  mixins: [glFeatureFlagMixin()],
   props: {
     mr: {
       type: Object,
@@ -88,7 +90,7 @@ export default {
         {{ mergeStatus.message }}
         <gl-emoji :data-name="mergeStatus.emoji" />
       </h4>
-      <section class="mr-info-list">
+      <section v-if="!glFeatures.restructuredMrWidget" class="mr-info-list">
         <p>
           {{ s__('mrWidget|Merges changes into') }}
           <span class="label-branch">
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue
index 4f8faeb877f..f350572a1f9 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue
@@ -322,11 +322,33 @@ export default {
     },
     restructuredWidgetShowMergeButtons() {
       if (this.glFeatures.restructuredMrWidget) {
-        return this.isMergeAllowed && this.state.userPermissions.canMerge;
+        return (
+          this.isMergeAllowed &&
+          this.state.userPermissions.canMerge &&
+          !this.mr.mergeOngoing &&
+          !this.mr.autoMergeEnabled
+        );
       }
 
       return true;
     },
+    sourceBranchDeletedText() {
+      if (this.glFeatures.restructuredMrWidget) {
+        if (this.removeSourceBranch) {
+          return this.mr.state === 'merged'
+            ? __('Deleted the source branch.')
+            : __('Source branch will be deleted.');
+        }
+
+        return this.mr.state === 'merged'
+          ? __('Did not delete the source branch.')
+          : __('Source branch will not be deleted.');
+      }
+
+      return this.removeSourceBranch
+        ? __('Deletes the source branch.')
+        : __('Does not delete the source branch.');
+    },
   },
   mounted() {
     if (this.glFeatures.mergeRequestWidgetGraphql) {
@@ -686,25 +708,22 @@ export default {
                 v-if="!restructuredWidgetShowMergeButtons"
                 class="gl-w-full gl-order-n1 gl-text-gray-500"
               >
-                <strong>
+                <strong v-if="mr.state !== 'closed'">
                   {{ __('Merge details') }}
                 </strong>
                 <ul class="gl-pl-4 gl-m-0">
                   <li class="gl-line-height-normal">
                     <added-commit-message
+                      :state="mr.state"
+                      :merge-commit-sha="mr.shortMergeCommitSha"
                       :is-squash-enabled="squashBeforeMerge"
                       :is-fast-forward-enabled="!shouldShowMergeEdit"
                       :commits-count="commitsCount"
                       :target-branch="stateData.targetBranch"
                     />
                   </li>
-                  <li class="gl-line-height-normal">
-                    <template v-if="removeSourceBranch">
-                      {{ __('Deletes the source branch.') }}
-                    </template>
-                    <template v-else>
-                      {{ __('Does not delete the source branch.') }}
-                    </template>
+                  <li v-if="mr.state !== 'closed'" class="gl-line-height-normal">
+                    {{ sourceBranchDeletedText }}
                   </li>
                   <li v-if="mr.relatedLinks" class="gl-line-height-normal">
                     <related-links