Add latest changes from gitlab-org/gitlab@master

12 files changed, 132 insertions, 44 deletions

diff --git a/app/assets/javascripts/diffs/components/diff_file_row.vue b/app/assets/javascripts/diffs/components/diff_file_row.vue
index f41337762fd..5aaed0d40db 100644
--- a/app/assets/javascripts/diffs/components/diff_file_row.vue
+++ b/app/assets/javascripts/diffs/components/diff_file_row.vue
@@ -4,14 +4,34 @@
  * https://gitlab.com/gitlab-org/gitlab/-/merge_requests/23720
  */
 import FileRow from '~/vue_shared/components/file_row.vue';
+import FileRowStats from './file_row_stats.vue';
 
 export default {
+  name: 'DiffFileRow',
   components: {
     FileRow,
+    FileRowStats,
+  },
+  props: {
+    file: {
+      type: Object,
+      required: true,
+    },
+    hideFileStats: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  computed: {
+    showFileRowStats() {
+      return !this.hideFileStats && this.file.type === 'blob';
+    },
   },
 };
 </script>
 
 <template>
-  <file-row v-bind="$attrs" v-on="$listeners" />
+  <file-row :file="file" :hide-file-stats="hideFileStats" v-bind="$attrs" v-on="$listeners">
+    <file-row-stats v-if="showFileRowStats" :file="file" />
+  </file-row>
 </template>
diff --git a/app/assets/javascripts/diffs/components/tree_list.vue b/app/assets/javascripts/diffs/components/tree_list.vue
index 18c3002825e..1eac3430a20 100644
--- a/app/assets/javascripts/diffs/components/tree_list.vue
+++ b/app/assets/javascripts/diffs/components/tree_list.vue
@@ -5,7 +5,6 @@ import { s__, sprintf } from '~/locale';
 import Icon from '~/vue_shared/components/icon.vue';
 import FileTree from '~/vue_shared/components/file_tree.vue';
 import DiffFileRow from './diff_file_row.vue';
-import FileRowStats from './file_row_stats.vue';
 
 export default {
   directives: {
@@ -49,9 +48,6 @@ export default {
         return acc;
       }, []);
     },
-    fileRowExtraComponent() {
-      return this.hideFileStats ? null : FileRowStats;
-    },
   },
   methods: {
     ...mapActions('diffs', ['toggleTreeOpen', 'scrollToFile']),
@@ -98,8 +94,8 @@ export default {
           :key="file.key"
           :file="file"
           :level="0"
+          :hide-file-stats="hideFileStats"
           :hide-extra-on-tree="true"
-          :extra-component="fileRowExtraComponent"
           :show-changed-icon="true"
           :file-row-component="$options.DiffFileRow"
           @toggleTreeOpen="toggleTreeOpen"
diff --git a/app/assets/javascripts/gfm_auto_complete.js b/app/assets/javascripts/gfm_auto_complete.js
index 6f486e1a539..fa2e3f94f87 100644
--- a/app/assets/javascripts/gfm_auto_complete.js
+++ b/app/assets/javascripts/gfm_auto_complete.js
@@ -719,7 +719,7 @@ GfmAutoComplete.Milestones = {
 };
 GfmAutoComplete.Loading = {
   template:
-    '<li style="pointer-events: none;"><i class="fa fa-spinner fa-spin"></i> Loading...</li>',
+    '<li style="pointer-events: none;"><span class="spinner align-text-bottom mr-1"></span>Loading...</li>',
 };
 
 export default GfmAutoComplete;
diff --git a/app/assets/javascripts/ide/components/ide_file_row.vue b/app/assets/javascripts/ide/components/ide_file_row.vue
index f41337762fd..b777d89f0bb 100644
--- a/app/assets/javascripts/ide/components/ide_file_row.vue
+++ b/app/assets/javascripts/ide/components/ide_file_row.vue
@@ -4,14 +4,35 @@
  * https://gitlab.com/gitlab-org/gitlab/-/merge_requests/23720
  */
 import FileRow from '~/vue_shared/components/file_row.vue';
+import FileRowExtra from './file_row_extra.vue';
 
 export default {
+  name: 'IdeFileRow',
   components: {
     FileRow,
+    FileRowExtra,
+  },
+  props: {
+    file: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      dropdownOpen: false,
+    };
+  },
+  methods: {
+    toggleDropdown(val) {
+      this.dropdownOpen = val;
+    },
   },
 };
 </script>
 
 <template>
-  <file-row v-bind="$attrs" v-on="$listeners" />
+  <file-row :file="file" v-bind="$attrs" @mouseleave="toggleDropdown(false)" v-on="$listeners">
+    <file-row-extra :file="file" :dropdown-open="dropdownOpen" @toggle="toggleDropdown($event)" />
+  </file-row>
 </template>
diff --git a/app/assets/javascripts/ide/components/ide_tree_list.vue b/app/assets/javascripts/ide/components/ide_tree_list.vue
index 151f7f0c421..36e8951bea3 100644
--- a/app/assets/javascripts/ide/components/ide_tree_list.vue
+++ b/app/assets/javascripts/ide/components/ide_tree_list.vue
@@ -4,7 +4,6 @@ import { GlSkeletonLoading } from '@gitlab/ui';
 import FileTree from '~/vue_shared/components/file_tree.vue';
 import IdeFileRow from './ide_file_row.vue';
 import NavDropdown from './nav_dropdown.vue';
-import FileRowExtra from './file_row_extra.vue';
 
 export default {
   components: {
@@ -36,7 +35,6 @@ export default {
   methods: {
     ...mapActions(['updateViewer', 'toggleTreeOpen']),
   },
-  FileRowExtra,
   IdeFileRow,
 };
 </script>
@@ -60,7 +58,6 @@ export default {
             :key="file.key"
             :file="file"
             :level="0"
-            :extra-component="$options.FileRowExtra"
             :file-row-component="$options.IdeFileRow"
             @toggleTreeOpen="toggleTreeOpen"
           />
diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js
index 8fb973b1c1f..5b645b032ed 100644
--- a/app/assets/javascripts/main.js
+++ b/app/assets/javascripts/main.js
@@ -201,9 +201,15 @@ document.addEventListener('DOMContentLoaded', () => {
   });
 
   if (bootstrapBreakpoint === 'sm' || bootstrapBreakpoint === 'xs') {
-    const $rightSidebar = $('aside.right-sidebar, .layout-page');
+    const $rightSidebar = $('aside.right-sidebar');
+    const $layoutPage = $('.layout-page');
 
-    $rightSidebar.removeClass('right-sidebar-expanded').addClass('right-sidebar-collapsed');
+    if ($rightSidebar.length > 0) {
+      $rightSidebar.removeClass('right-sidebar-expanded').addClass('right-sidebar-collapsed');
+      $layoutPage.removeClass('right-sidebar-expanded').addClass('right-sidebar-collapsed');
+    } else {
+      $layoutPage.removeClass('right-sidebar-expanded right-sidebar-collapsed');
+    }
   }
 
   // prevent default action for disabled buttons
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() {
diff --git a/app/assets/javascripts/vue_shared/components/file_row.vue b/app/assets/javascripts/vue_shared/components/file_row.vue
index d962f644ff8..1ea6eb2628b 100644
--- a/app/assets/javascripts/vue_shared/components/file_row.vue
+++ b/app/assets/javascripts/vue_shared/components/file_row.vue
@@ -1,5 +1,4 @@
 <script>
-import Icon from '~/vue_shared/components/icon.vue';
 import FileHeader from '~/vue_shared/components/file_row_header.vue';
 import FileIcon from '~/vue_shared/components/file_icon.vue';
 import ChangedFileIcon from '~/vue_shared/components/changed_file_icon.vue';
@@ -9,7 +8,6 @@ export default {
   components: {
     FileHeader,
     FileIcon,
-    Icon,
     ChangedFileIcon,
   },
   props: {
@@ -21,27 +19,12 @@ export default {
       type: Number,
       required: true,
     },
-    extraComponent: {
-      type: Object,
-      required: false,
-      default: null,
-    },
-    hideExtraOnTree: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
     showChangedIcon: {
       type: Boolean,
       required: false,
       default: false,
     },
   },
-  data() {
-    return {
-      dropdownOpen: false,
-    };
-  },
   computed: {
     isTree() {
       return this.file.type === 'tree';
@@ -120,9 +103,6 @@ export default {
 
       return this.$router.currentRoute.path === `/project${this.file.url}`;
     },
-    toggleDropdown(val) {
-      this.dropdownOpen = val;
-    },
   },
 };
 </script>
@@ -136,7 +116,7 @@ export default {
     class="file-row"
     role="button"
     @click="clickFile"
-    @mouseleave="toggleDropdown(false)"
+    @mouseleave="$emit('mouseleave', $event)"
   >
     <div class="file-row-name-container">
       <span ref="textOutput" :style="levelIndentation" class="file-row-name str-truncated">
@@ -152,13 +132,7 @@ export default {
         <changed-file-icon v-else :file="file" :size="16" class="append-right-5" />
         {{ file.name }}
       </span>
-      <component
-        :is="extraComponent"
-        v-if="extraComponent && !(hideExtraOnTree && file.type === 'tree')"
-        :file="file"
-        :dropdown-open="dropdownOpen"
-        @toggle="toggleDropdown($event)"
-      />
+      <slot></slot>
     </div>
   </div>
 </template>
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index 84daec4fb43..5ca75c28ac3 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -3,6 +3,8 @@
  *
  */
 
+$mr-widget-min-height: 69px;
+
 .space-children {
   @include clearfix;
 
@@ -555,12 +557,11 @@
 }
 
 .mr-source-target {
-  display: flex;
   flex-wrap: wrap;
   border-radius: $border-radius-default;
   padding: $gl-padding;
   border: 1px solid $border-color;
-  min-height: 69px;
+  min-height: $mr-widget-min-height;
 
   @include media-breakpoint-up(md) {
     align-items: center;
@@ -599,6 +600,22 @@
   }
 }
 
+.mr-pipeline-suggest {
+  flex-wrap: wrap;
+  border-radius: $border-radius-default;
+  padding: $gl-padding;
+  border: 1px solid $border-color;
+  min-height: $mr-widget-min-height;
+
+  @include media-breakpoint-up(md) {
+    align-items: center;
+  }
+
+  .circle-icon-container {
+    color: $gl-text-color-quaternary;
+  }
+}
+
 .card-new-merge-request {
   .card-header {
     padding: 5px 10px;