Add latest changes from gitlab-org/gitlab@15-2-stable-eev15.2.0-rc42

6 files changed, 189 insertions, 137 deletions

diff --git a/spec/frontend/repository/components/__snapshots__/last_commit_spec.js.snap b/spec/frontend/repository/components/__snapshots__/last_commit_spec.js.snap
index 4732d68c8c6..cb56f392ec9 100644
--- a/spec/frontend/repository/components/__snapshots__/last_commit_spec.js.snap
+++ b/spec/frontend/repository/components/__snapshots__/last_commit_spec.js.snap
@@ -17,7 +17,7 @@ exports[`Repository last commit component renders commit widget 1`] = `
   />
    
   <div
-    class="commit-detail flex-list"
+    class="commit-detail flex-list gl-display-flex gl-justify-content-space-between gl-align-items-flex-start gl-flex-grow-1 gl-min-w-0"
   >
     <div
       class="commit-content qa-commit-content"
diff --git a/spec/frontend/repository/components/blob_content_viewer_spec.js b/spec/frontend/repository/components/blob_content_viewer_spec.js
index d498b6f0c4f..2b70cb84c67 100644
--- a/spec/frontend/repository/components/blob_content_viewer_spec.js
+++ b/spec/frontend/repository/components/blob_content_viewer_spec.js
@@ -136,6 +136,7 @@ describe('Blob content viewer component', () => {
   const findBlobButtonGroup = () => wrapper.findComponent(BlobButtonGroup);
   const findForkSuggestion = () => wrapper.findComponent(ForkSuggestion);
   const findCodeIntelligence = () => wrapper.findComponent(CodeIntelligence);
+  const findSourceViewer = () => wrapper.findComponent(SourceViewer);
 
   beforeEach(() => {
     jest.spyOn(window, 'requestIdleCallback').mockImplementation(execImmediately);
@@ -197,6 +198,16 @@ describe('Blob content viewer component', () => {
         expect(mockAxios.history.get[0].url).toBe(legacyViewerUrl);
       });
 
+      it('loads a legacy viewer when the source viewer emits an error', async () => {
+        loadViewer.mockReturnValueOnce(SourceViewer);
+        await createComponent();
+        findSourceViewer().vm.$emit('error');
+        await waitForPromises();
+
+        expect(mockAxios.history.get).toHaveLength(1);
+        expect(mockAxios.history.get[0].url).toBe(legacyViewerUrl);
+      });
+
       it('loads a legacy viewer when a viewer component is not available', async () => {
         await createComponent({ blob: { ...simpleViewerMock, fileType: 'unknown' } });
 
diff --git a/spec/frontend/repository/components/last_commit_spec.js b/spec/frontend/repository/components/last_commit_spec.js
index cfbf74e34aa..3783b34e33a 100644
--- a/spec/frontend/repository/components/last_commit_spec.js
+++ b/spec/frontend/repository/components/last_commit_spec.js
@@ -1,179 +1,227 @@
+import Vue, { nextTick } from 'vue';
+import VueApollo from 'vue-apollo';
 import { GlLoadingIcon } from '@gitlab/ui';
-import { shallowMount } from '@vue/test-utils';
-import { nextTick } from 'vue';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import waitForPromises from 'helpers/wait_for_promises';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+
 import LastCommit from '~/repository/components/last_commit.vue';
 import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
-
-let vm;
-
-function createCommitData(data = {}) {
-  const defaultData = {
-    sha: '123456789',
-    title: 'Commit title',
-    titleHtml: 'Commit title',
-    message: 'Commit message',
-    webPath: '/commit/123',
-    authoredDate: '2019-01-01',
-    author: {
-      name: 'Test',
-      avatarUrl: 'https://test.com',
-      webPath: '/test',
-    },
-    pipeline: {
+import pathLastCommitQuery from 'shared_queries/repository/path_last_commit.query.graphql';
+import { refMock } from '../mock_data';
+
+let wrapper;
+let mockResolver;
+
+const findPipeline = () => wrapper.find('.js-commit-pipeline');
+const findTextExpander = () => wrapper.find('.text-expander');
+const findUserLink = () => wrapper.find('.js-user-link');
+const findUserAvatarLink = () => wrapper.findComponent(UserAvatarLink);
+const findLastCommitLabel = () => wrapper.findByTestId('last-commit-id-label');
+const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
+const findCommitRowDescription = () => wrapper.find('.commit-row-description');
+const findStatusBox = () => wrapper.find('.gpg-status-box');
+const findItemTitle = () => wrapper.find('.item-title');
+
+const defaultPipelineEdges = [
+  {
+    __typename: 'PipelineEdge',
+    node: {
+      __typename: 'Pipeline',
+      id: 'gid://gitlab/Ci::Pipeline/167',
       detailedStatus: {
+        __typename: 'DetailedStatus',
+        id: 'id',
         detailsPath: 'https://test.com/pipeline',
-        icon: 'failed',
+        icon: 'status_running',
         tooltip: 'failed',
         text: 'failed',
-        group: {},
+        group: 'failed',
       },
     },
-  };
-  return Object.assign(defaultData, data);
-}
-
-function factory(commit = createCommitData(), loading = false) {
-  vm = shallowMount(LastCommit, {
-    mocks: {
-      $apollo: {
-        queries: {
-          commit: {
-            loading: true,
+  },
+];
+
+const defaultAuthor = {
+  __typename: 'UserCore',
+  id: 'gid://gitlab/User/1',
+  name: 'Test',
+  avatarUrl: 'https://test.com',
+  webPath: '/test',
+};
+
+const defaultMessage = 'Commit title';
+
+const createCommitData = ({
+  pipelineEdges = defaultPipelineEdges,
+  author = defaultAuthor,
+  descriptionHtml = '',
+  signatureHtml = null,
+  message = defaultMessage,
+}) => {
+  return {
+    data: {
+      project: {
+        __typename: 'Project',
+        id: 'gid://gitlab/Project/6',
+        repository: {
+          __typename: 'Repository',
+          paginatedTree: {
+            __typename: 'TreeConnection',
+            nodes: [
+              {
+                __typename: 'Tree',
+                lastCommit: {
+                  __typename: 'Commit',
+                  id: 'gid://gitlab/CommitPresenter/123456789',
+                  sha: '123456789',
+                  title: 'Commit title',
+                  titleHtml: 'Commit title',
+                  descriptionHtml,
+                  message,
+                  webPath: '/commit/123',
+                  authoredDate: '2019-01-01',
+                  authorName: 'Test',
+                  authorGravatar: 'https://test.com',
+                  author,
+                  signatureHtml,
+                  pipelines: {
+                    __typename: 'PipelineConnection',
+                    edges: pipelineEdges,
+                  },
+                },
+              },
+            ],
           },
         },
       },
     },
-  });
-  // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
-  // eslint-disable-next-line no-restricted-syntax
-  vm.setData({ commit });
-  vm.vm.$apollo.queries.commit.loading = loading;
-}
+  };
+};
 
-const emptyMessageClass = 'font-italic';
+const createComponent = async (data = {}) => {
+  Vue.use(VueApollo);
 
-describe('Repository last commit component', () => {
-  afterEach(() => {
-    vm.destroy();
+  const currentPath = 'path';
+
+  mockResolver = jest.fn().mockResolvedValue(createCommitData(data));
+
+  wrapper = shallowMountExtended(LastCommit, {
+    apolloProvider: createMockApollo([[pathLastCommitQuery, mockResolver]]),
+    propsData: { currentPath },
+    mixins: [{ data: () => ({ ref: refMock }) }],
   });
+};
+
+afterEach(() => {
+  wrapper.destroy();
+  mockResolver = null;
+});
 
+describe('Repository last commit component', () => {
   it.each`
     loading  | label
     ${true}  | ${'shows'}
     ${false} | ${'hides'}
-  `('$label when loading icon $loading is true', async ({ loading }) => {
-    factory(createCommitData(), loading);
+  `('$label when loading icon is $loading', async ({ loading }) => {
+    createComponent();
 
-    await nextTick();
+    if (!loading) {
+      await waitForPromises();
+    }
 
-    expect(vm.find(GlLoadingIcon).exists()).toBe(loading);
+    expect(findLoadingIcon().exists()).toBe(loading);
   });
 
   it('renders commit widget', async () => {
-    factory();
+    createComponent();
+    await waitForPromises();
 
-    await nextTick();
-
-    expect(vm.element).toMatchSnapshot();
+    expect(wrapper.element).toMatchSnapshot();
   });
 
   it('renders short commit ID', async () => {
-    factory();
-
-    await nextTick();
+    createComponent();
+    await waitForPromises();
 
-    expect(vm.find('[data-testid="last-commit-id-label"]').text()).toEqual('12345678');
+    expect(findLastCommitLabel().text()).toBe('12345678');
   });
 
   it('hides pipeline components when pipeline does not exist', async () => {
-    factory(createCommitData({ pipeline: null }));
+    createComponent({ pipelineEdges: [] });
+    await waitForPromises();
 
-    await nextTick();
-
-    expect(vm.find('.js-commit-pipeline').exists()).toBe(false);
+    expect(findPipeline().exists()).toBe(false);
   });
 
-  it('renders pipeline components', async () => {
-    factory();
-
-    await nextTick();
+  it('renders pipeline components when pipeline exists', async () => {
+    createComponent();
+    await waitForPromises();
 
-    expect(vm.find('.js-commit-pipeline').exists()).toBe(true);
+    expect(findPipeline().exists()).toBe(true);
   });
 
   it('hides author component when author does not exist', async () => {
-    factory(createCommitData({ author: null }));
+    createComponent({ author: null });
+    await waitForPromises();
 
-    await nextTick();
-
-    expect(vm.find('.js-user-link').exists()).toBe(false);
-    expect(vm.find(UserAvatarLink).exists()).toBe(false);
+    expect(findUserLink().exists()).toBe(false);
+    expect(findUserAvatarLink().exists()).toBe(false);
   });
 
   it('does not render description expander when description is null', async () => {
-    factory(createCommitData({ descriptionHtml: null }));
-
-    await nextTick();
+    createComponent();
+    await waitForPromises();
 
-    expect(vm.find('.text-expander').exists()).toBe(false);
-    expect(vm.find('.commit-row-description').exists()).toBe(false);
+    expect(findTextExpander().exists()).toBe(false);
+    expect(findCommitRowDescription().exists()).toBe(false);
   });
 
-  it('expands commit description when clicking expander', async () => {
-    factory(createCommitData({ descriptionHtml: 'Test description' }));
-
-    await nextTick();
-
-    vm.find('.text-expander').vm.$emit('click');
-
-    await nextTick();
-
-    expect(vm.find('.commit-row-description').isVisible()).toBe(true);
-    expect(vm.find('.text-expander').classes('open')).toBe(true);
-  });
-
-  it('strips the first newline of the description', async () => {
-    factory(createCommitData({ descriptionHtml: '&#x000A;Update ADOPTERS.md' }));
-
-    await nextTick();
-
-    expect(vm.find('.commit-row-description').html()).toBe(
-      '<pre class="commit-row-description gl-mb-3">Update ADOPTERS.md</pre>',
-    );
+  describe('when the description is present', () => {
+    beforeEach(async () => {
+      createComponent({ descriptionHtml: '&#x000A;Update ADOPTERS.md' });
+      await waitForPromises();
+    });
+
+    it('strips the first newline of the description', () => {
+      expect(findCommitRowDescription().html()).toBe(
+        '<pre class="commit-row-description gl-mb-3">Update ADOPTERS.md</pre>',
+      );
+    });
+
+    it('expands commit description when clicking expander', async () => {
+      findTextExpander().vm.$emit('click');
+      await nextTick();
+
+      expect(findCommitRowDescription().isVisible()).toBe(true);
+      expect(findTextExpander().classes()).toContain('open');
+    });
   });
 
   it('renders the signature HTML as returned by the backend', async () => {
-    factory(
-      createCommitData({
-        signatureHtml: `<a
-        class="btn gpg-status-box valid"
-        data-content="signature-content"
-        data-html="true"
-        data-placement="top"
-        data-title="signature-title"
-        data-toggle="popover"
-        role="button"
-        tabindex="0"
-        >
-          Verified
-        </a>`,
-      }),
-    );
-
-    await nextTick();
-
-    expect(vm.find('.gpg-status-box').html()).toBe(
-      `<a class="btn gpg-status-box valid" data-content="signature-content" data-html="true" data-placement="top" data-title="signature-title" data-toggle="popover" role="button" tabindex="0">
-  Verified
-</a>`,
+    createComponent({
+      signatureHtml: `<a
+      class="btn gpg-status-box valid"
+      data-content="signature-content"
+      data-html="true"
+      data-placement="top"
+      data-title="signature-title"
+      data-toggle="popover"
+      role="button"
+      tabindex="0"
+      >Verified</a>`,
+    });
+    await waitForPromises();
+
+    expect(findStatusBox().html()).toBe(
+      `<a class="btn gpg-status-box valid" data-content="signature-content" data-html="true" data-placement="top" data-title="signature-title" data-toggle="popover" role="button" tabindex="0">Verified</a>`,
     );
   });
 
   it('sets correct CSS class if the commit message is empty', async () => {
-    factory(createCommitData({ message: '' }));
-
-    await nextTick();
+    createComponent({ message: '' });
+    await waitForPromises();
 
-    expect(vm.find('.item-title').classes()).toContain(emptyMessageClass);
+    expect(findItemTitle().classes()).toContain('font-italic');
   });
 });
diff --git a/spec/frontend/repository/components/table/row_spec.js b/spec/frontend/repository/components/table/row_spec.js
index 22570b2d6ed..13b09e57473 100644
--- a/spec/frontend/repository/components/table/row_spec.js
+++ b/spec/frontend/repository/components/table/row_spec.js
@@ -31,7 +31,7 @@ function factory(propsData = {}) {
       GlHoverLoad: createMockDirective(),
     },
     provide: {
-      glFeatures: { refactorBlobViewer: true, lazyLoadCommits: true },
+      glFeatures: { lazyLoadCommits: true },
     },
     mocks: {
       $router,
@@ -244,8 +244,6 @@ describe('Repository table row component', () => {
   });
 
   describe('row visibility', () => {
-    beforeAll(() => jest.useFakeTimers());
-
     beforeEach(() => {
       factory({
         id: '1',
@@ -260,12 +258,13 @@ describe('Repository table row component', () => {
     afterAll(() => jest.useRealTimers());
 
     it('emits a `row-appear` event', async () => {
+      const setTimeoutSpy = jest.spyOn(global, 'setTimeout');
       findIntersectionObserver().vm.$emit('appear');
 
       jest.runAllTimers();
 
-      expect(setTimeout).toHaveBeenCalledTimes(1);
-      expect(setTimeout).toHaveBeenLastCalledWith(expect.any(Function), ROW_APPEAR_DELAY);
+      expect(setTimeoutSpy).toHaveBeenCalledTimes(1);
+      expect(setTimeoutSpy).toHaveBeenLastCalledWith(expect.any(Function), ROW_APPEAR_DELAY);
       expect(vm.emitted('row-appear')).toEqual([[123]]);
     });
   });
diff --git a/spec/frontend/repository/log_tree_spec.js b/spec/frontend/repository/log_tree_spec.js
index 5186c9a8992..e3b4dcb8acc 100644
--- a/spec/frontend/repository/log_tree_spec.js
+++ b/spec/frontend/repository/log_tree_spec.js
@@ -16,19 +16,18 @@ const mockData = [
     commit_path: `https://test.com`,
     commit_title_html: 'commit title',
     file_name: 'index.js',
-    type: 'blob',
   },
 ];
 
 describe('resolveCommit', () => {
   it('calls resolve when commit found', () => {
     const resolver = {
-      entry: { name: 'index.js', type: 'blob' },
+      entry: { name: 'index.js' },
       resolve: jest.fn(),
     };
     const commits = [
-      { fileName: 'index.js', filePath: '/index.js', type: 'blob' },
-      { fileName: 'index.js', filePath: '/app/assets/index.js', type: 'blob' },
+      { fileName: 'index.js', filePath: '/index.js' },
+      { fileName: 'index.js', filePath: '/app/assets/index.js' },
     ];
 
     resolveCommit(commits, '', resolver);
@@ -36,7 +35,6 @@ describe('resolveCommit', () => {
     expect(resolver.resolve).toHaveBeenCalledWith({
       fileName: 'index.js',
       filePath: '/index.js',
-      type: 'blob',
     });
   });
 });
@@ -56,7 +54,7 @@ describe('fetchLogsTree', () => {
     global.gon = { relative_url_root: '' };
 
     resolver = {
-      entry: { name: 'index.js', type: 'blob' },
+      entry: { name: 'index.js' },
       resolve: jest.fn(),
     };
 
@@ -119,7 +117,6 @@ describe('fetchLogsTree', () => {
           filePath: '/index.js',
           message: 'testing message',
           sha: '123',
-          type: 'blob',
         }),
       );
     }));
@@ -136,7 +133,6 @@ describe('fetchLogsTree', () => {
           message: 'testing message',
           sha: '123',
           titleHtml: 'commit title',
-          type: 'blob',
         }),
       ],
     });
diff --git a/spec/frontend/repository/utils/commit_spec.js b/spec/frontend/repository/utils/commit_spec.js
index aaaa39f739f..b3dd5118308 100644
--- a/spec/frontend/repository/utils/commit_spec.js
+++ b/spec/frontend/repository/utils/commit_spec.js
@@ -10,7 +10,6 @@ const mockData = [
     commit_path: `https://test.com`,
     commit_title_html: 'testing message',
     file_name: 'index.js',
-    type: 'blob',
   },
 ];
 
@@ -24,7 +23,6 @@ describe('normalizeData', () => {
         commitPath: 'https://test.com',
         fileName: 'index.js',
         filePath: '/index.js',
-        type: 'blob',
         titleHtml: 'testing message',
         __typename: 'LogTreeCommit',
       },