Add latest changes from gitlab-org/gitlab@master

6 files changed, 48 insertions, 17 deletions

diff --git a/app/assets/javascripts/blob/file_template_mediator.js b/app/assets/javascripts/blob/file_template_mediator.js
index 0fb02ca5965..d2c0ef330e4 100644
--- a/app/assets/javascripts/blob/file_template_mediator.js
+++ b/app/assets/javascripts/blob/file_template_mediator.js
@@ -9,6 +9,7 @@ import GitignoreSelector from './template_selectors/gitignore_selector';
 import LicenseSelector from './template_selectors/license_selector';
 import toast from '~/vue_shared/plugins/global_toast';
 import { __ } from '~/locale';
+import initPopover from '~/blob/suggest_gitlab_ci_yml';
 
 export default class FileTemplateMediator {
   constructor({ editor, currentAction, projectId }) {
@@ -128,6 +129,7 @@ export default class FileTemplateMediator {
   selectTemplateFile(selector, query, data) {
     const self = this;
     const { name } = selector.config;
+    const suggestCommitChanges = document.querySelector('.js-suggest-gitlab-ci-yml-commit-changes');
 
     selector.renderLoading();
 
@@ -146,6 +148,10 @@ export default class FileTemplateMediator {
             },
           },
         });
+
+        if (suggestCommitChanges) {
+          initPopover(suggestCommitChanges);
+        }
       })
       .catch(err => new Flash(`An error occurred while fetching the template: ${err}`));
   }
diff --git a/app/assets/javascripts/blob/suggest_gitlab_ci_yml/components/popover.vue b/app/assets/javascripts/blob/suggest_gitlab_ci_yml/components/popover.vue
index fa3c19921df..d304ae7dbf6 100644
--- a/app/assets/javascripts/blob/suggest_gitlab_ci_yml/components/popover.vue
+++ b/app/assets/javascripts/blob/suggest_gitlab_ci_yml/components/popover.vue
@@ -1,10 +1,25 @@
 <script>
 import { GlPopover, GlSprintf, GlButton, GlIcon } from '@gitlab/ui';
 import Cookies from 'js-cookie';
-import { parseBoolean } from '~/lib/utils/common_utils';
+import { parseBoolean, scrollToElement } from '~/lib/utils/common_utils';
 import { s__ } from '~/locale';
 import { glEmojiTag } from '~/emoji';
 
+const popoverStates = {
+  suggest_gitlab_ci_yml: {
+    title: s__(`suggestPipeline|1/2: Choose a template`),
+    content: s__(
+      `suggestPipeline|We recommend the %{boldStart}Code Quality%{boldEnd} template, which will add a report widget to your Merge Requests. This way you’ll learn about code quality degradations much sooner. %{footerStart} Goodbye technical debt! %{footerEnd}`,
+    ),
+    emoji: glEmojiTag('wave'),
+  },
+  suggest_commit_first_project_gitlab_ci_yml: {
+    title: s__(`suggestPipeline|2/2: Commit your changes`),
+    content: s__(
+      `suggestPipeline|Commit the changes and your pipeline will automatically run for the first time.`,
+    ),
+  },
+};
 export default {
   components: {
     GlPopover,
@@ -17,7 +32,7 @@ export default {
       type: String,
       required: true,
     },
-    cssClass: {
+    trackLabel: {
       type: String,
       required: true,
     },
@@ -33,17 +48,19 @@ export default {
   },
   computed: {
     suggestTitle() {
-      return s__(`suggestPipeline|1/2: Choose a template`);
+      return popoverStates[this.trackLabel].title || '';
     },
     suggestContent() {
-      return s__(
-        `suggestPipeline|We recommend the %{boldStart}Code Quality%{boldEnd} template, which will add a report widget to your Merge Requests. This way you’ll learn about code quality degradations much sooner. %{footerStart} Goodbye technical debt! %{footerEnd}`,
-      );
+      return popoverStates[this.trackLabel].content || '';
     },
     emoji() {
-      return glEmojiTag('wave');
+      return popoverStates[this.trackLabel].emoji || '';
     },
   },
+  mounted() {
+    if (this.trackLabel === 'suggest_commit_first_project_gitlab_ci_yml' && !this.popoverDismissed)
+      scrollToElement(document.querySelector(this.target));
+  },
   methods: {
     onDismiss() {
       this.popoverDismissed = true;
@@ -61,13 +78,15 @@ export default {
     placement="rightbottom"
     trigger="manual"
     container="viewport"
-    :css-classes="[cssClass]"
+    :css-classes="['suggest-gitlab-ci-yml', 'ml-4']"
   >
     <template #title>
-      <gl-button :aria-label="__('Close')" class="btn-blank float-right" @click="onDismiss">
-        <gl-icon name="close" aria-hidden="true" />
-      </gl-button>
-      {{ suggestTitle }}
+      <span v-html="suggestTitle"></span>
+      <span class="ml-auto">
+        <gl-button :aria-label="__('Close')" class="btn-blank" @click="onDismiss">
+          <gl-icon name="close" aria-hidden="true" />
+        </gl-button>
+      </span>
     </template>
 
     <gl-sprintf :message="suggestContent">
diff --git a/app/assets/javascripts/blob/suggest_gitlab_ci_yml/index.js b/app/assets/javascripts/blob/suggest_gitlab_ci_yml/index.js
index f770000eb68..2cc342fb381 100644
--- a/app/assets/javascripts/blob/suggest_gitlab_ci_yml/index.js
+++ b/app/assets/javascripts/blob/suggest_gitlab_ci_yml/index.js
@@ -8,7 +8,7 @@ export default el =>
       return createElement(Popover, {
         props: {
           target: el.dataset.target,
-          cssClass: el.dataset.cssClass,
+          trackLabel: el.dataset.trackLabel,
           dismissKey: el.dataset.dismissKey,
         },
       });
diff --git a/app/assets/javascripts/blob_edit/blob_bundle.js b/app/assets/javascripts/blob_edit/blob_bundle.js
index 6aaf5bf7296..f4ce98037c8 100644
--- a/app/assets/javascripts/blob_edit/blob_bundle.js
+++ b/app/assets/javascripts/blob_edit/blob_bundle.js
@@ -4,11 +4,13 @@ import $ from 'jquery';
 import NewCommitForm from '../new_commit_form';
 import EditBlob from './edit_blob';
 import BlobFileDropzone from '../blob/blob_file_dropzone';
+import initPopover from '~/blob/suggest_gitlab_ci_yml';
 
 export default () => {
   const editBlobForm = $('.js-edit-blob-form');
   const uploadBlobForm = $('.js-upload-blob-form');
   const deleteBlobForm = $('.js-delete-blob-form');
+  const suggestEl = document.querySelector('.js-suggest-gitlab-ci-yml');
 
   if (editBlobForm.length) {
     const urlRoot = editBlobForm.data('relativeUrlRoot');
@@ -56,4 +58,8 @@ export default () => {
   if (deleteBlobForm.length) {
     new NewCommitForm(deleteBlobForm);
   }
+
+  if (suggestEl) {
+    initPopover(suggestEl);
+  }
 };
diff --git a/app/assets/javascripts/groups/components/group_item.vue b/app/assets/javascripts/groups/components/group_item.vue
index b192fb78631..1b8c75202fb 100644
--- a/app/assets/javascripts/groups/components/group_item.vue
+++ b/app/assets/javascripts/groups/components/group_item.vue
@@ -95,7 +95,7 @@ export default {
   <li :id="groupDomId" :class="rowClass" class="group-row" @click.stop="onClickRowGroup">
     <div
       :class="{ 'project-row-contents': !isGroup }"
-      class="group-row-contents d-flex align-items-center py-2"
+      class="group-row-contents d-flex align-items-center py-2 pr-3"
     >
       <div class="folder-toggle-wrap append-right-4 d-flex align-items-center">
         <item-caret :is-group-open="group.isOpen" />
@@ -103,8 +103,8 @@ export default {
       </div>
       <gl-loading-icon
         v-if="group.isChildrenLoading"
-        size="md"
-        class="d-none d-sm-inline-flex flex-shrink-0 append-right-10"
+        size="lg"
+        class="d-none d-sm-inline-flex flex-shrink-0 append-right-8"
       />
       <div
         :class="{ 'd-sm-flex': !group.isChildrenLoading }"
diff --git a/app/assets/javascripts/groups/components/item_actions.vue b/app/assets/javascripts/groups/components/item_actions.vue
index 4b569970204..5454480e61a 100644
--- a/app/assets/javascripts/groups/components/item_actions.vue
+++ b/app/assets/javascripts/groups/components/item_actions.vue
@@ -68,7 +68,7 @@ export default {
       data-placement="bottom"
       class="edit-group btn btn-xs no-expand"
     >
-      <icon name="settings" class="position-top-0" />
+      <icon name="settings" class="position-top-0 align-middle" />
     </a>
   </div>
 </template>