Merge branch 'ide-row-hover-scroll' into 'master'

Fixed IDE file row jumping into view on hover

Closes #50751

See merge request gitlab-org/gitlab-ce!21403

app/assets/javascripts/ide/components/repo_file.vue

@@ -95,16 +95,18 @@ export default {
       return this.file.changed || this.file.tempFile || this.file.staged;
     },
   },
+  watch: {
+    'file.active': function fileActiveWatch(active) {
+      if (this.file.type === 'blob' && active) {
+        this.scrollIntoView();
+      }
+    },
+  },
   mounted() {
     if (this.hasPathAtCurrentRoute()) {
       this.scrollIntoView(true);
     }
   },
-  updated() {
-    if (this.file.type === 'blob' && this.file.active) {
-      this.scrollIntoView();
-    }
-  },
   methods: {
     ...mapActions(['toggleTreeOpen']),
     clickFile() {

changelogs/unreleased/ide-row-hover-scroll.yml

+---
+title: Fixed IDE file row scrolling into view when hovering
+merge_request:
+author:
+type: fixed

spec/javascripts/ide/components/repo_file_spec.js

@@ -121,4 +121,25 @@ describe('RepoFile', () => {
       ).toContain('Locked by testuser');
     });
   });
+
+  it('calls scrollIntoView if made active', done => {
+    createComponent({
+      file: {
+        ...file(),
+        type: 'blob',
+        active: false,
+      },
+      level: 0,
+    });
+
+    spyOn(vm, 'scrollIntoView');
+
+    vm.file.active = true;
+
+    vm.$nextTick(() => {
+      expect(vm.scrollIntoView).toHaveBeenCalled();
+
+      done();
+    });
+  });
 });