Add latest changes from gitlab-org/gitlab@master

4 files changed, 58 insertions, 1 deletions

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue
index 2aaba6e1c8a..7c71463c949 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue
@@ -77,7 +77,7 @@ export default {
 };
 </script>
 <template>
-  <div class="mr-source-target append-bottom-default">
+  <div class="d-flex mr-source-target append-bottom-default">
     <mr-widget-icon name="git-merge" />
     <div class="git-merge-container d-flex">
       <div class="normal">
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_suggest_pipeline.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_suggest_pipeline.vue
new file mode 100644
index 00000000000..f08bfb3a90f
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_suggest_pipeline.vue
@@ -0,0 +1,45 @@
+<script>
+import { GlLink, GlSprintf } from '@gitlab/ui';
+import MrWidgetIcon from './mr_widget_icon.vue';
+
+export default {
+  name: 'MRWidgetSuggestPipeline',
+  iconName: 'status_notfound',
+  components: {
+    GlLink,
+    GlSprintf,
+    MrWidgetIcon,
+  },
+  props: {
+    pipelinePath: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+<template>
+  <div class="d-flex mr-pipeline-suggest append-bottom-default">
+    <mr-widget-icon :name="$options.iconName" />
+    <gl-sprintf
+      class="js-no-pipeline-message"
+      :message="
+        s__(`mrWidget|%{prefixToLinkStart}No pipeline%{prefixToLinkEnd}
+          %{addPipelineLinkStart}Add the .gitlab-ci.yml file%{addPipelineLinkEnd}
+          to create one.`)
+      "
+    >
+      <template #prefixToLink="{content}">
+        <strong>
+          {{ content }}
+        </strong>
+      </template>
+      <template #addPipelineLink="{content}">
+        <gl-link :href="pipelinePath" class="ml-2">
+          {{ content }}
+        </gl-link>
+        &nbsp;
+      </template>
+    </gl-sprintf>
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
index 9085383e230..27f13ace779 100644
--- a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
@@ -9,6 +9,7 @@ import SmartInterval from '~/smart_interval';
 import createFlash from '../flash';
 import Loading from './components/loading.vue';
 import WidgetHeader from './components/mr_widget_header.vue';
+import WidgetSuggestPipeline from './components/mr_widget_suggest_pipeline.vue';
 import WidgetMergeHelp from './components/mr_widget_merge_help.vue';
 import MrWidgetPipelineContainer from './components/mr_widget_pipeline_container.vue';
 import Deployment from './components/deployment/deployment.vue';
@@ -46,6 +47,7 @@ export default {
   components: {
     Loading,
     'mr-widget-header': WidgetHeader,
+    'mr-widget-suggest-pipeline': WidgetSuggestPipeline,
     'mr-widget-merge-help': WidgetMergeHelp,
     MrWidgetPipelineContainer,
     Deployment,
@@ -99,6 +101,9 @@ export default {
     shouldRenderPipelines() {
       return this.mr.hasCI;
     },
+    shouldSuggestPipelines() {
+      return gon.features?.suggestPipeline && !this.mr.hasCI && this.mr.mergeRequestAddCiConfigPath;
+    },
     shouldRenderRelatedLinks() {
       return Boolean(this.mr.relatedLinks) && !this.mr.isNothingToMergeState;
     },
@@ -353,6 +358,11 @@ export default {
 <template>
   <div v-if="mr" class="mr-state-widget prepend-top-default">
     <mr-widget-header :mr="mr" />
+    <mr-widget-suggest-pipeline
+      v-if="shouldSuggestPipelines"
+      class="mr-widget-workflow"
+      :pipeline-path="mr.mergeRequestAddCiConfigPath"
+    />
     <mr-widget-pipeline-container
       v-if="shouldRenderPipelines"
       class="mr-widget-workflow"
diff --git a/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js b/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
index c7949fa264e..73a0b3cb673 100644
--- a/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
+++ b/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
@@ -175,6 +175,8 @@ export default class MergeRequestStore {
     this.securityApprovalsHelpPagePath = data.security_approvals_help_page_path;
     this.eligibleApproversDocsPath = data.eligible_approvers_docs_path;
     this.mergeImmediatelyDocsPath = data.merge_immediately_docs_path;
+    this.mergeRequestAddCiConfigPath = data.merge_request_add_ci_config_path;
+    this.humanAccess = data.human_access;
   }
 
   get isNothingToMergeState() {