Add latest changes from gitlab-org/gitlab@master

11 files changed, 78 insertions, 22 deletions

diff --git a/spec/frontend/lib/utils/common_utils_spec.js b/spec/frontend/lib/utils/common_utils_spec.js
index c8dc90c9ace..11debfe12a1 100644
--- a/spec/frontend/lib/utils/common_utils_spec.js
+++ b/spec/frontend/lib/utils/common_utils_spec.js
@@ -1,4 +1,5 @@
 import * as commonUtils from '~/lib/utils/common_utils';
+import $ from 'jquery';
 
 describe('common_utils', () => {
   describe('parseUrl', () => {
@@ -211,6 +212,59 @@ describe('common_utils', () => {
     });
   });
 
+  describe('scrollToElement*', () => {
+    let elem;
+    const windowHeight = 1000;
+    const elemTop = 100;
+
+    beforeEach(() => {
+      elem = document.createElement('div');
+      window.innerHeight = windowHeight;
+      jest.spyOn($.fn, 'animate');
+      jest.spyOn($.fn, 'offset').mockReturnValue({ top: elemTop });
+    });
+
+    afterEach(() => {
+      $.fn.animate.mockRestore();
+      $.fn.offset.mockRestore();
+    });
+
+    describe('scrollToElement', () => {
+      it('scrolls to element', () => {
+        commonUtils.scrollToElement(elem);
+        expect($.fn.animate).toHaveBeenCalledWith(
+          {
+            scrollTop: elemTop,
+          },
+          expect.any(Number),
+        );
+      });
+
+      it('scrolls to element with offset', () => {
+        const offset = 50;
+        commonUtils.scrollToElement(elem, { offset });
+        expect($.fn.animate).toHaveBeenCalledWith(
+          {
+            scrollTop: elemTop + offset,
+          },
+          expect.any(Number),
+        );
+      });
+    });
+
+    describe('scrollToElementWithContext', () => {
+      it('scrolls with context', () => {
+        commonUtils.scrollToElementWithContext();
+        expect($.fn.animate).toHaveBeenCalledWith(
+          {
+            scrollTop: elemTop - windowHeight * 0.1,
+          },
+          expect.any(Number),
+        );
+      });
+    });
+  });
+
   describe('debounceByAnimationFrame', () => {
     it('debounces a function to allow a maximum of one call per animation frame', done => {
       const spy = jest.fn();
diff --git a/spec/frontend/notes/mixins/discussion_navigation_spec.js b/spec/frontend/notes/mixins/discussion_navigation_spec.js
index 120de023099..ae30a36fc81 100644
--- a/spec/frontend/notes/mixins/discussion_navigation_spec.js
+++ b/spec/frontend/notes/mixins/discussion_navigation_spec.js
@@ -41,7 +41,7 @@ describe('Discussion navigation mixin', () => {
         .join(''),
     );
 
-    jest.spyOn(utils, 'scrollToElement');
+    jest.spyOn(utils, 'scrollToElementWithContext');
 
     expandDiscussion = jest.fn();
     const { actions, ...notesRest } = notesModule();
@@ -102,7 +102,7 @@ describe('Discussion navigation mixin', () => {
         });
 
         it('scrolls to element', () => {
-          expect(utils.scrollToElement).toHaveBeenCalledWith(
+          expect(utils.scrollToElementWithContext).toHaveBeenCalledWith(
             findDiscussion('div.discussion', expected),
           );
         });
@@ -123,11 +123,13 @@ describe('Discussion navigation mixin', () => {
         });
 
         it('scrolls when scrollToDiscussion is emitted', () => {
-          expect(utils.scrollToElement).not.toHaveBeenCalled();
+          expect(utils.scrollToElementWithContext).not.toHaveBeenCalled();
 
           eventHub.$emit('scrollToDiscussion');
 
-          expect(utils.scrollToElement).toHaveBeenCalledWith(findDiscussion('ul.notes', expected));
+          expect(utils.scrollToElementWithContext).toHaveBeenCalledWith(
+            findDiscussion('ul.notes', expected),
+          );
         });
       });
 
@@ -167,7 +169,7 @@ describe('Discussion navigation mixin', () => {
           });
 
           it('scrolls to discussion', () => {
-            expect(utils.scrollToElement).toHaveBeenCalledWith(
+            expect(utils.scrollToElementWithContext).toHaveBeenCalledWith(
               findDiscussion('div.discussion', expected),
             );
           });
diff --git a/spec/frontend/registry/explorer/components/__snapshots__/group_empty_state_spec.js.snap b/spec/frontend/registry/explorer/components/list_page/__snapshots__/group_empty_state_spec.js.snap
index 3761369c944..3761369c944 100644
--- a/spec/frontend/registry/explorer/components/__snapshots__/group_empty_state_spec.js.snap
+++ b/spec/frontend/registry/explorer/components/list_page/__snapshots__/group_empty_state_spec.js.snap
diff --git a/spec/frontend/registry/explorer/components/__snapshots__/project_empty_state_spec.js.snap b/spec/frontend/registry/explorer/components/list_page/__snapshots__/project_empty_state_spec.js.snap
index d8ec9c3ca4d..d8ec9c3ca4d 100644
--- a/spec/frontend/registry/explorer/components/__snapshots__/project_empty_state_spec.js.snap
+++ b/spec/frontend/registry/explorer/components/list_page/__snapshots__/project_empty_state_spec.js.snap
diff --git a/spec/frontend/registry/explorer/components/cli_commands_spec.js b/spec/frontend/registry/explorer/components/list_page/cli_commands_spec.js
index 6f1cbf9d255..a556be12089 100644
--- a/spec/frontend/registry/explorer/components/cli_commands_spec.js
+++ b/spec/frontend/registry/explorer/components/list_page/cli_commands_spec.js
@@ -3,7 +3,7 @@ import { mount, createLocalVue } from '@vue/test-utils';
 import { GlDropdown, GlFormGroup, GlFormInputGroup } from '@gitlab/ui';
 import Tracking from '~/tracking';
 import * as getters from '~/registry/explorer/stores/getters';
-import QuickstartDropdown from '~/registry/explorer/components/cli_commands.vue';
+import QuickstartDropdown from '~/registry/explorer/components/list_page/cli_commands.vue';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 
 import {
diff --git a/spec/frontend/registry/explorer/components/group_empty_state_spec.js b/spec/frontend/registry/explorer/components/list_page/group_empty_state_spec.js
index 1b4de534317..2f51e875672 100644
--- a/spec/frontend/registry/explorer/components/group_empty_state_spec.js
+++ b/spec/frontend/registry/explorer/components/list_page/group_empty_state_spec.js
@@ -1,8 +1,8 @@
 import Vuex from 'vuex';
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import { GlSprintf } from '@gitlab/ui';
-import { GlEmptyState } from '../stubs';
-import groupEmptyState from '~/registry/explorer/components/group_empty_state.vue';
+import { GlEmptyState } from '../../stubs';
+import groupEmptyState from '~/registry/explorer/components/list_page/group_empty_state.vue';
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
diff --git a/spec/frontend/registry/explorer/components/image_list_row_spec.js b/spec/frontend/registry/explorer/components/list_page/image_list_row_spec.js
index a6c5d485051..78de35ae1dc 100644
--- a/spec/frontend/registry/explorer/components/image_list_row_spec.js
+++ b/spec/frontend/registry/explorer/components/list_page/image_list_row_spec.js
@@ -1,14 +1,14 @@
 import { shallowMount } from '@vue/test-utils';
 import { GlIcon, GlSprintf } from '@gitlab/ui';
 import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
-import Component from '~/registry/explorer/components/image_list_row.vue';
+import Component from '~/registry/explorer/components/list_page/image_list_row.vue';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import {
   ROW_SCHEDULED_FOR_DELETION,
   LIST_DELETE_BUTTON_DISABLED,
 } from '~/registry/explorer/constants';
-import { RouterLink } from '../stubs';
-import { imagesListResponse } from '../mock_data';
+import { RouterLink } from '../../stubs';
+import { imagesListResponse } from '../../mock_data';
 
 describe('Image List Row', () => {
   let wrapper;
diff --git a/spec/frontend/registry/explorer/components/image_list_spec.js b/spec/frontend/registry/explorer/components/list_page/image_list_spec.js
index f849e60a749..5786bb1f869 100644
--- a/spec/frontend/registry/explorer/components/image_list_spec.js
+++ b/spec/frontend/registry/explorer/components/list_page/image_list_spec.js
@@ -1,9 +1,9 @@
 import { shallowMount } from '@vue/test-utils';
 import { GlPagination } from '@gitlab/ui';
-import Component from '~/registry/explorer/components/image_list.vue';
-import ImageListRow from '~/registry/explorer/components/image_list_row.vue';
+import Component from '~/registry/explorer/components/list_page/image_list.vue';
+import ImageListRow from '~/registry/explorer/components/list_page/image_list_row.vue';
 
-import { imagesListResponse, imagePagination } from '../mock_data';
+import { imagesListResponse, imagePagination } from '../../mock_data';
 
 describe('Image List', () => {
   let wrapper;
diff --git a/spec/frontend/registry/explorer/components/project_empty_state_spec.js b/spec/frontend/registry/explorer/components/list_page/project_empty_state_spec.js
index 4b209646da9..73746c545cb 100644
--- a/spec/frontend/registry/explorer/components/project_empty_state_spec.js
+++ b/spec/frontend/registry/explorer/components/list_page/project_empty_state_spec.js
@@ -1,8 +1,8 @@
 import Vuex from 'vuex';
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import { GlSprintf } from '@gitlab/ui';
-import { GlEmptyState } from '../stubs';
-import projectEmptyState from '~/registry/explorer/components/project_empty_state.vue';
+import { GlEmptyState } from '../../stubs';
+import projectEmptyState from '~/registry/explorer/components/list_page/project_empty_state.vue';
 import * as getters from '~/registry/explorer/stores/getters';
 
 const localVue = createLocalVue();
diff --git a/spec/frontend/registry/explorer/components/registry_header_spec.js b/spec/frontend/registry/explorer/components/list_page/registry_header_spec.js
index 9ce2b505e44..7484fccbea7 100644
--- a/spec/frontend/registry/explorer/components/registry_header_spec.js
+++ b/spec/frontend/registry/explorer/components/list_page/registry_header_spec.js
@@ -1,6 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
 import { GlSprintf, GlLink } from '@gitlab/ui';
-import Component from '~/registry/explorer/components/registry_header.vue';
+import Component from '~/registry/explorer/components/list_page/registry_header.vue';
 import {
   CONTAINER_REGISTRY_TITLE,
   LIST_INTRO_TEXT,
diff --git a/spec/frontend/registry/explorer/pages/list_spec.js b/spec/frontend/registry/explorer/pages/list_spec.js
index c8d5e5bbd3c..3f51330d815 100644
--- a/spec/frontend/registry/explorer/pages/list_spec.js
+++ b/spec/frontend/registry/explorer/pages/list_spec.js
@@ -3,11 +3,11 @@ import { GlSkeletonLoader, GlSprintf, GlAlert, GlSearchBoxByClick } from '@gitla
 import Tracking from '~/tracking';
 import waitForPromises from 'helpers/wait_for_promises';
 import component from '~/registry/explorer/pages/list.vue';
-import CliCommands from '~/registry/explorer/components/cli_commands.vue';
-import GroupEmptyState from '~/registry/explorer/components/group_empty_state.vue';
-import ProjectEmptyState from '~/registry/explorer/components/project_empty_state.vue';
-import RegistryHeader from '~/registry/explorer/components/registry_header.vue';
-import ImageList from '~/registry/explorer/components/image_list.vue';
+import CliCommands from '~/registry/explorer/components/list_page/cli_commands.vue';
+import GroupEmptyState from '~/registry/explorer/components/list_page/group_empty_state.vue';
+import ProjectEmptyState from '~/registry/explorer/components/list_page/project_empty_state.vue';
+import RegistryHeader from '~/registry/explorer/components/list_page/registry_header.vue';
+import ImageList from '~/registry/explorer/components/list_page/image_list.vue';
 import { createStore } from '~/registry/explorer/stores/';
 import {
   SET_MAIN_LOADING,