Add latest changes from gitlab-org/gitlab@master

app/assets/javascripts/diffs/components/diff_file_row.vue

@@ -5,12 +5,14 @@
  */
 import FileRow from '~/vue_shared/components/file_row.vue';
 import FileRowStats from './file_row_stats.vue';
+import ChangedFileIcon from '~/vue_shared/components/changed_file_icon.vue';
 export default {
   name: 'DiffFileRow',
   components: {
     FileRow,
     FileRowStats,
+    ChangedFileIcon,
   },
   props: {
     file: {
@@ -31,7 +33,8 @@ export default {
 </script>
 <template>
-  <file-row :file="file" :hide-file-stats="hideFileStats" v-bind="$attrs" v-on="$listeners">
-    <file-row-stats v-if="showFileRowStats" :file="file" />
+  <file-row :file="file" v-bind="$attrs" v-on="$listeners">
+    <file-row-stats v-if="showFileRowStats" :file="file" class="mr-1" />
+    <changed-file-icon :file="file" :size="16" />
   </file-row>
 </template>

app/assets/javascripts/diffs/components/tree_list.vue

@@ -95,8 +95,6 @@ export default {
           :file="file"
           :level="0"
           :hide-file-stats="hideFileStats"
-          :hide-extra-on-tree="true"
-          :show-changed-icon="true"
           :file-row-component="$options.DiffFileRow"
           @toggleTreeOpen="toggleTreeOpen"
           @clickFile="scrollToFile"

app/assets/javascripts/self_monitor/components/self_monitor_form.vue

@@ -106,7 +106,7 @@ export default {
     saveChangesSelfMonitorProject() {
       if (this.projectCreated && !this.projectEnabled) {
         this.showSelfMonitorModal();
-      } else {
+      } else if (!this.projectCreated && !this.loading) {
         this.createProject();
       }
     },

app/assets/javascripts/user_popovers.js

@@ -60,43 +60,45 @@ export default (elements = document.querySelectorAll('.js-user-link')) => {
   const userLinks = Array.from(elements);
   const UserPopoverComponent = Vue.extend(UserPopover);
-  return userLinks.map(el => {
-    if (initializedPopovers.has(el)) {
-      return initializedPopovers.get(el);
-    }
-
-    const user = {
-      location: null,
-      bio: null,
-      organization: null,
-      status: null,
-      loaded: false,
-    };
-    const renderedPopover = new UserPopoverComponent({
-      propsData: {
-        target: el,
-        user,
-      },
-    });
-
-    initializedPopovers.set(el, renderedPopover);
-
-    renderedPopover.$mount();
-
-    el.addEventListener('mouseenter', ({ target }) => {
-      removeTitle(target);
-      const preloadedUserInfo = getPreloadedUserInfo(target.dataset);
-
-      Object.assign(user, preloadedUserInfo);
-
-      if (preloadedUserInfo.userId) {
-        populateUserInfo(user);
+  return userLinks
+    .filter(({ dataset }) => dataset.user || dataset.userId)
+    .map(el => {
+      if (initializedPopovers.has(el)) {
+        return initializedPopovers.get(el);
       }
-    });
-    el.addEventListener('mouseleave', ({ target }) => {
-      target.removeAttribute('aria-describedby');
-    });
-    return renderedPopover;
-  });
+      const user = {
+        location: null,
+        bio: null,
+        organization: null,
+        status: null,
+        loaded: false,
+      };
+      const renderedPopover = new UserPopoverComponent({
+        propsData: {
+          target: el,
+          user,
+        },
+      });
+
+      initializedPopovers.set(el, renderedPopover);
+
+      renderedPopover.$mount();
+
+      el.addEventListener('mouseenter', ({ target }) => {
+        removeTitle(target);
+        const preloadedUserInfo = getPreloadedUserInfo(target.dataset);
+
+        Object.assign(user, preloadedUserInfo);
+
+        if (preloadedUserInfo.userId) {
+          populateUserInfo(user);
+        }
+      });
+      el.addEventListener('mouseleave', ({ target }) => {
+        target.removeAttribute('aria-describedby');
+      });
+
+      return renderedPopover;
+    });
 };

app/assets/javascripts/vue_shared/components/file_row.vue

 <script>
 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';
 export default {
   name: 'FileRow',
   components: {
     FileHeader,
     FileIcon,
-    ChangedFileIcon,
   },
   props: {
     file: {
@@ -19,11 +17,6 @@ export default {
       type: Number,
       required: true,
     },
-    showChangedIcon: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
   },
   computed: {
     isTree() {
@@ -121,15 +114,14 @@ export default {
     <div class="file-row-name-container">
       <span ref="textOutput" :style="levelIndentation" class="file-row-name str-truncated">
         <file-icon
-          v-if="!showChangedIcon || file.type === 'tree'"
           class="file-row-icon"
+          :class="{ 'text-secondary': file.type === 'tree' }"
           :file-name="file.name"
           :loading="file.loading"
           :folder="isTree"
           :opened="file.opened"
           :size="16"
         />
-        <changed-file-icon v-else :file="file" :size="16" class="append-right-5" />
         {{ file.name }}
       </span>
       <slot></slot>

changelogs/unreleased/118442-step2-restyle-changes-header-and-file-tree.yml

+---
+title: Restyle Merge Request diffs file tree
+merge_request: 24342
+author:
+type: changed

spec/frontend/diffs/components/diff_file_row_spec.js

@@ -2,6 +2,7 @@ import { shallowMount } from '@vue/test-utils';
 import DiffFileRow from '~/diffs/components/diff_file_row.vue';
 import FileRow from '~/vue_shared/components/file_row.vue';
 import FileRowStats from '~/diffs/components/file_row_stats.vue';
+import ChangedFileIcon from '~/vue_shared/components/changed_file_icon.vue';
 describe('Diff File Row component', () => {
   let wrapper;
@@ -38,6 +39,21 @@ describe('Diff File Row component', () => {
     );
   });
+  it('renders ChangedFileIcon component', () => {
+    createComponent({
+      level: 4,
+      file: {},
+      hideFileStats: false,
+    });
+
+    expect(wrapper.find(ChangedFileIcon).props()).toEqual(
+      expect.objectContaining({
+        file: {},
+        size: 16,
+      }),
+    );
+  });
+
   describe('FileRowStats components', () => {
     it.each`
       type      | hideFileStats | value    | desc

spec/frontend/fixtures/merge_requests.rb

@@ -10,20 +10,24 @@ describe Projects::MergeRequestsController, '(JavaScript fixtures)', type: :cont
   let(:project) { create(:project, :repository, namespace: namespace, path: 'merge-requests-project') }
   # rubocop: disable Layout/TrailingWhitespace
+  let(:description) do
+    <<~MARKDOWN.strip_heredoc
+    - [ ] Task List Item
+    - [ ]   
+    - [ ] Task List Item 2
+    MARKDOWN
+  end
+  # rubocop: enable Layout/TrailingWhitespace
+
   let(:merge_request) do
     create(
       :merge_request,
       :with_diffs,
       source_project: project,
       target_project: project,
-      description: <<~MARKDOWN.strip_heredoc
-      - [ ] Task List Item
-      - [ ]   
-      - [ ] Task List Item 2
-      MARKDOWN
+      description: description
     )
   end
-  # rubocop: enable Layout/TrailingWhitespace
   let(:merged_merge_request) { create(:merge_request, :merged, source_project: project, target_project: project) }
   let(:pipeline) do
@@ -122,6 +126,15 @@ describe Projects::MergeRequestsController, '(JavaScript fixtures)', type: :cont
     end
   end
+  context 'with mentions' do
+    let(:group) { create(:group) }
+    let(:description) { "@#{group.full_path} @all @#{admin.username}" }
+
+    it 'merge_requests/merge_request_with_mentions.html' do
+      render_merge_request(merge_request)
+    end
+  end
+
   private
   def render_discussions_json(merge_request)

spec/javascripts/user_popovers_spec.js

@@ -2,10 +2,10 @@ import initUserPopovers from '~/user_popovers';
 import UsersCache from '~/lib/utils/users_cache';
 describe('User Popovers', () => {
-  const fixtureTemplate = 'merge_requests/diff_comment.html';
+  const fixtureTemplate = 'merge_requests/merge_request_with_mentions.html';
   preloadFixtures(fixtureTemplate);
-  const selector = '.js-user-link';
+  const selector = '.js-user-link, .gfm-project_member';
   const dummyUser = { name: 'root' };
   const dummyUserStatus = { message: 'active' };
@@ -34,8 +34,12 @@ describe('User Popovers', () => {
     popovers = initUserPopovers(document.querySelectorAll(selector));
   });
-  it('initializes a popover for each js-user-link element found in the document', () => {
-    expect(document.querySelectorAll(selector).length).toBe(popovers.length);
+  it('initializes a popover for each user link with a user id', () => {
+    const linksWithUsers = Array.from(document.querySelectorAll(selector)).filter(
+      ({ dataset }) => dataset.user || dataset.userId,
+    );
+
+    expect(linksWithUsers.length).toBe(popovers.length);
   });
   it('does not initialize the user popovers twice for the same element', () => {