Add latest changes from gitlab-org/gitlab@16-5-stable-eev16.5.0-rc42

4 files changed, 157 insertions, 176 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 3f901dc61b8..1a5301c5525 100644
--- a/spec/frontend/repository/components/__snapshots__/last_commit_spec.js.snap
+++ b/spec/frontend/repository/components/__snapshots__/last_commit_spec.js.snap
@@ -1,97 +1,50 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Repository last commit component renders commit widget 1`] = `
-<div
-  class="commit gl-display-flex gl-p-5 gl-w-full well-segment"
+<commit-info-stub
+  commit="[object Object]"
 >
-  <user-avatar-link-stub
-    class="gl-mr-4 gl-my-2"
-    imgalt=""
-    imgcssclasses=""
-    imgcsswrapperclasses=""
-    imgsize="32"
-    imgsrc="https://test.com"
-    linkhref="/test"
-    popoveruserid=""
-    popoverusername=""
-    tooltipplacement="top"
-    tooltiptext=""
-    username=""
-  />
   <div
-    class="commit-detail flex-list gl-align-items-center gl-display-flex gl-flex-grow-1 gl-justify-content-space-between gl-min-w-0"
+    class="commit-actions gl-align-items-center gl-display-flex gl-flex-align gl-flex-direction-row"
   >
     <div
-      class="commit-content"
-      data-qa-selector="commit_content"
+      class="ci-status-link"
     >
-      <gl-link-stub
-        class="commit-row-message item-title"
-        href="/commit/123"
-      >
-        Commit title
-      </gl-link-stub>
-      <div
-        class="committer"
-      >
-        <gl-link-stub
-          class="commit-author-link js-user-link"
-          href="/test"
-        >
-          Test
-        </gl-link-stub>
-        authored
-        <timeago-tooltip-stub
-          cssclass=""
-          datetimeformat="DATE_WITH_TIME_FORMAT"
-          time="2019-01-01"
-          tooltipplacement="bottom"
-        />
-      </div>
+      <ci-badge-link-stub
+        aria-label="Pipeline: failed"
+        class="js-commit-pipeline"
+        details-path="https://test.com/pipeline"
+        showtooltip="true"
+        size="md"
+        status="[object Object]"
+        uselink="true"
+      />
     </div>
-    <div
-      class="gl-flex-grow-1"
-    />
-    <div
-      class="commit-actions gl-align-items-center gl-display-flex gl-flex-align gl-flex-direction-row"
+    <gl-button-group-stub
+      class="gl-ml-4 js-commit-sha-group"
     >
-      <div
-        class="ci-status-link"
-      >
-        <ci-badge-link-stub
-          aria-label="Pipeline: failed"
-          class="js-commit-pipeline"
-          details-path="https://test.com/pipeline"
-          size="lg"
-          status="[object Object]"
-        />
-      </div>
-      <gl-button-group-stub
-        class="gl-ml-4 js-commit-sha-group"
+      <gl-button-stub
+        buttontextclasses=""
+        category="primary"
+        class="gl-font-monospace"
+        data-testid="last-commit-id-label"
+        icon=""
+        label="true"
+        size="medium"
+        variant="default"
       >
-        <gl-button-stub
-          buttontextclasses=""
-          category="primary"
-          class="gl-font-monospace"
-          data-testid="last-commit-id-label"
-          icon=""
-          label="true"
-          size="medium"
-          variant="default"
-        >
-          12345678
-        </gl-button-stub>
-        <clipboard-button-stub
-          category="secondary"
-          class="input-group-text"
-          size="medium"
-          text="123456789"
-          title="Copy commit SHA"
-          tooltipplacement="top"
-          variant="default"
-        />
-      </gl-button-group-stub>
-    </div>
+        12345678
+      </gl-button-stub>
+      <clipboard-button-stub
+        category="secondary"
+        class="input-group-text"
+        size="medium"
+        text="123456789"
+        title="Copy commit SHA"
+        tooltipplacement="top"
+        variant="default"
+      />
+    </gl-button-group-stub>
   </div>
-</div>
+</commit-info-stub>
 `;
diff --git a/spec/frontend/repository/components/commit_info_spec.js b/spec/frontend/repository/components/commit_info_spec.js
new file mode 100644
index 00000000000..34e941aa858
--- /dev/null
+++ b/spec/frontend/repository/components/commit_info_spec.js
@@ -0,0 +1,87 @@
+import { nextTick } from 'vue';
+import { GlButton } from '@gitlab/ui';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import CommitInfo from '~/repository/components/commit_info.vue';
+import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
+
+let wrapper;
+const commit = {
+  title: 'Commit title',
+  titleHtml: 'Commit title html',
+  message: 'Commit message',
+  authoredDate: '2019-01-01',
+  authorName: 'Test authorName',
+  author: { name: 'Test name', avatarUrl: 'https://test.com', webPath: '/test' },
+};
+
+const findTextExpander = () => wrapper.findComponent(GlButton);
+const findUserLink = () => wrapper.findByText(commit.author.name);
+const findUserAvatarLink = () => wrapper.findComponent(UserAvatarLink);
+const findAuthorName = () => wrapper.findByText(`${commit.authorName} authored`);
+const findCommitRowDescription = () => wrapper.find('pre');
+const findTitleHtml = () => wrapper.findByText(commit.titleHtml);
+
+const createComponent = async ({ commitMock = {} } = {}) => {
+  wrapper = shallowMountExtended(CommitInfo, {
+    propsData: { commit: { ...commit, ...commitMock } },
+  });
+
+  await nextTick();
+};
+
+describe('Repository last commit component', () => {
+  it('renders author info', () => {
+    createComponent();
+
+    expect(findUserLink().exists()).toBe(true);
+    expect(findUserAvatarLink().exists()).toBe(true);
+  });
+
+  it('hides author component when author does not exist', () => {
+    createComponent({ commitMock: { author: null } });
+
+    expect(findUserLink().exists()).toBe(false);
+    expect(findUserAvatarLink().exists()).toBe(false);
+    expect(findAuthorName().exists()).toBe(true);
+  });
+
+  it('does not render description expander when description is null', () => {
+    createComponent();
+
+    expect(findTextExpander().exists()).toBe(false);
+    expect(findCommitRowDescription().exists()).toBe(false);
+  });
+
+  describe('when the description is present', () => {
+    beforeEach(() => {
+      createComponent({ commitMock: { descriptionHtml: '&#x000A;Update ADOPTERS.md' } });
+    });
+
+    it('strips the first newline of the description', () => {
+      expect(findCommitRowDescription().html()).toBe(
+        '<pre class="commit-row-description gl-mb-3 gl-white-space-pre-line">Update ADOPTERS.md</pre>',
+      );
+    });
+
+    it('renders commit description collapsed by default', () => {
+      expect(findCommitRowDescription().classes('gl-display-block!')).toBe(false);
+      expect(findTextExpander().classes('open')).toBe(false);
+      expect(findTextExpander().props('selected')).toBe(false);
+    });
+
+    it('expands commit description when clicking expander', async () => {
+      findTextExpander().vm.$emit('click');
+      await nextTick();
+
+      expect(findCommitRowDescription().classes('gl-display-block!')).toBe(true);
+      expect(findTextExpander().classes('open')).toBe(true);
+      expect(findTextExpander().props('selected')).toBe(true);
+    });
+  });
+
+  it('sets correct CSS class if the commit message is empty', () => {
+    createComponent({ commitMock: { message: '' } });
+
+    expect(findTitleHtml().classes()).toContain('gl-font-style-italic');
+  });
+});
diff --git a/spec/frontend/repository/components/last_commit_spec.js b/spec/frontend/repository/components/last_commit_spec.js
index c207d32d61d..d5ec34b1f6d 100644
--- a/spec/frontend/repository/components/last_commit_spec.js
+++ b/spec/frontend/repository/components/last_commit_spec.js
@@ -1,29 +1,26 @@
 import Vue, { nextTick } from 'vue';
-import VueApollo from 'vue-apollo';
 import { GlLoadingIcon } from '@gitlab/ui';
+import VueApollo from 'vue-apollo';
 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 CommitInfo from '~/repository/components/commit_info.vue';
 import SignatureBadge from '~/commit/components/signature_badge.vue';
-import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
 import eventHub from '~/repository/event_hub';
 import pathLastCommitQuery from 'shared_queries/repository/path_last_commit.query.graphql';
 import { FORK_UPDATED_EVENT } from '~/repository/constants';
 import { refMock } from '../mock_data';
 
 let wrapper;
+let commitData;
 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.findComponent(SignatureBadge);
-const findItemTitle = () => wrapper.find('.item-title');
+const findCommitInfo = () => wrapper.findComponent(CommitInfo);
 
 const defaultPipelineEdges = [
   {
@@ -44,23 +41,7 @@ const defaultPipelineEdges = [
   },
 ];
 
-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 = '',
-  signature = null,
-  message = defaultMessage,
-}) => {
+const createCommitData = ({ pipelineEdges = defaultPipelineEdges, signature = null }) => {
   return {
     data: {
       project: {
@@ -79,13 +60,19 @@ const createCommitData = ({
                   sha: '123456789',
                   title: 'Commit title',
                   titleHtml: 'Commit title',
-                  descriptionHtml,
-                  message,
+                  descriptionHtml: '',
+                  message: '',
                   webPath: '/commit/123',
                   authoredDate: '2019-01-01',
                   authorName: 'Test',
                   authorGravatar: 'https://test.com',
-                  author,
+                  author: {
+                    __typename: 'UserCore',
+                    id: 'gid://gitlab/User/1',
+                    name: 'Test',
+                    avatarUrl: 'https://test.com',
+                    webPath: '/test',
+                  },
                   signature,
                   pipelines: {
                     __typename: 'PipelineConnection',
@@ -101,12 +88,13 @@ const createCommitData = ({
   };
 };
 
-const createComponent = (data = {}) => {
+const createComponent = async (data = {}) => {
   Vue.use(VueApollo);
 
   const currentPath = 'path';
 
-  mockResolver = jest.fn().mockResolvedValue(createCommitData(data));
+  commitData = createCommitData(data);
+  mockResolver = jest.fn().mockResolvedValue(commitData);
 
   wrapper = shallowMountExtended(LastCommit, {
     apolloProvider: createMockApollo([[pathLastCommitQuery, mockResolver]]),
@@ -116,8 +104,13 @@ const createComponent = (data = {}) => {
       SignatureBadge,
     },
   });
+
+  await waitForPromises();
+  await nextTick();
 };
 
+beforeEach(() => createComponent());
+
 afterEach(() => {
   mockResolver = null;
 });
@@ -137,17 +130,17 @@ describe('Repository last commit component', () => {
     expect(findLoadingIcon().exists()).toBe(loading);
   });
 
-  it('renders commit widget', async () => {
-    createComponent();
-    await waitForPromises();
+  it('renders a CommitInfo component', () => {
+    const commit = { ...commitData.project?.repository.paginatedTree.nodes[0].lastCommit };
 
-    expect(wrapper.element).toMatchSnapshot();
+    expect(findCommitInfo().props().commit).toMatchObject(commit);
   });
 
-  it('renders short commit ID', async () => {
-    createComponent();
-    await waitForPromises();
+  it('renders commit widget', () => {
+    expect(wrapper.element).toMatchSnapshot();
+  });
 
+  it('renders short commit ID', () => {
     expect(findLastCommitLabel().text()).toBe('12345678');
   });
 
@@ -158,29 +151,10 @@ describe('Repository last commit component', () => {
     expect(findPipeline().exists()).toBe(false);
   });
 
-  it('renders pipeline components when pipeline exists', async () => {
-    createComponent();
-    await waitForPromises();
-
+  it('renders pipeline components when pipeline exists', () => {
     expect(findPipeline().exists()).toBe(true);
   });
 
-  it('hides author component when author does not exist', async () => {
-    createComponent({ author: null });
-    await waitForPromises();
-
-    expect(findUserLink().exists()).toBe(false);
-    expect(findUserAvatarLink().exists()).toBe(false);
-  });
-
-  it('does not render description expander when description is null', async () => {
-    createComponent();
-    await waitForPromises();
-
-    expect(findTextExpander().exists()).toBe(false);
-    expect(findCommitRowDescription().exists()).toBe(false);
-  });
-
   describe('created', () => {
     it('binds `epicsListScrolled` event listener via eventHub', () => {
       jest.spyOn(eventHub, '$on').mockImplementation(() => {});
@@ -200,32 +174,6 @@ describe('Repository last commit component', () => {
     });
   });
 
-  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 gl-white-space-pre-line">Update ADOPTERS.md</pre>',
-      );
-    });
-
-    it('expands commit description when clicking expander', async () => {
-      expect(findCommitRowDescription().classes('d-block')).toBe(false);
-      expect(findTextExpander().classes('open')).toBe(false);
-      expect(findTextExpander().props('selected')).toBe(false);
-
-      findTextExpander().vm.$emit('click');
-      await nextTick();
-
-      expect(findCommitRowDescription().classes('d-block')).toBe(true);
-      expect(findTextExpander().classes('open')).toBe(true);
-      expect(findTextExpander().props('selected')).toBe(true);
-    });
-  });
-
   it('renders the signature HTML as returned by the backend', async () => {
     const signatureResponse = {
       __typename: 'GpgSignature',
@@ -241,11 +189,4 @@ describe('Repository last commit component', () => {
 
     expect(findStatusBox().props()).toMatchObject({ signature: signatureResponse });
   });
-
-  it('sets correct CSS class if the commit message is empty', async () => {
-    createComponent({ message: '' });
-    await waitForPromises();
-
-    expect(findItemTitle().classes()).toContain('font-italic');
-  });
 });
diff --git a/spec/frontend/repository/components/table/__snapshots__/row_spec.js.snap b/spec/frontend/repository/components/table/__snapshots__/row_spec.js.snap
index 17ebdf8725d..af7eca6a52d 100644
--- a/spec/frontend/repository/components/table/__snapshots__/row_spec.js.snap
+++ b/spec/frontend/repository/components/table/__snapshots__/row_spec.js.snap
@@ -9,7 +9,7 @@ exports[`Repository table row component renders a symlink table row 1`] = `
   >
     <a
       class="str-truncated tree-item-link"
-      data-qa-selector="file_name_link"
+      data-testid="file-name-link"
       href="https://test.com"
       title="test"
     >
@@ -65,7 +65,7 @@ exports[`Repository table row component renders table row 1`] = `
   >
     <a
       class="str-truncated tree-item-link"
-      data-qa-selector="file_name_link"
+      data-testid="file-name-link"
       href="https://test.com"
       title="test"
     >
@@ -121,7 +121,7 @@ exports[`Repository table row component renders table row for path with special
   >
     <a
       class="str-truncated tree-item-link"
-      data-qa-selector="file_name_link"
+      data-testid="file-name-link"
       href="https://test.com"
       title="test"
     >