Add latest changes from gitlab-org/gitlab@master

9 files changed, 111 insertions, 64 deletions

diff --git a/spec/frontend/ci/runner/components/cells/runner_summary_cell_spec.js b/spec/frontend/ci/runner/components/cells/runner_summary_cell_spec.js
index 585a03c0811..23ec170961a 100644
--- a/spec/frontend/ci/runner/components/cells/runner_summary_cell_spec.js
+++ b/spec/frontend/ci/runner/components/cells/runner_summary_cell_spec.js
@@ -1,5 +1,6 @@
-import { __ } from '~/locale';
+import { __, sprintf } from '~/locale';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
+import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
 import RunnerSummaryCell from '~/ci/runner/components/cells/runner_summary_cell.vue';
 import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
 import RunnerTags from '~/ci/runner/components/runner_tags.vue';
@@ -11,11 +12,13 @@ import {
   I18N_INSTANCE_TYPE,
   PROJECT_TYPE,
   I18N_NO_DESCRIPTION,
+  I18N_CREATED_AT_LABEL,
+  I18N_CREATED_AT_BY_LABEL,
 } from '~/ci/runner/constants';
 
-import { allRunnersData } from '../../mock_data';
+import { allRunnersWithCreatorData } from '../../mock_data';
 
-const mockRunner = allRunnersData.data.runners.nodes[0];
+const mockRunner = allRunnersWithCreatorData.data.runners.nodes[0];
 
 describe('RunnerTypeCell', () => {
   let wrapper;
@@ -142,10 +145,42 @@ describe('RunnerTypeCell', () => {
     expect(findRunnerSummaryField('pipeline').text()).toContain('1,000+');
   });
 
-  it('Displays created at', () => {
-    expect(findRunnerSummaryField('calendar').findComponent(TimeAgo).props('time')).toBe(
-      mockRunner.createdAt,
-    );
+  describe('Displays creation info', () => {
+    const findCreatedTime = () => findRunnerSummaryField('calendar').findComponent(TimeAgo);
+
+    it('Displays created at ...', () => {
+      createComponent({
+        createdBy: null,
+      });
+
+      expect(findRunnerSummaryField('calendar').text()).toMatchInterpolatedText(
+        sprintf(I18N_CREATED_AT_LABEL, {
+          timeAgo: findCreatedTime().text(),
+        }),
+      );
+      expect(findCreatedTime().props('time')).toBe(mockRunner.createdAt);
+    });
+
+    it('Displays created at ... by ...', () => {
+      expect(findRunnerSummaryField('calendar').text()).toMatchInterpolatedText(
+        sprintf(I18N_CREATED_AT_BY_LABEL, {
+          timeAgo: findCreatedTime().text(),
+          avatar: mockRunner.createdBy.username,
+        }),
+      );
+      expect(findCreatedTime().props('time')).toBe(mockRunner.createdAt);
+    });
+
+    it('Displays creator avatar', () => {
+      const { name, avatarUrl, webUrl, username } = mockRunner.createdBy;
+
+      expect(wrapper.findComponent(UserAvatarLink).props()).toMatchObject({
+        imgAlt: expect.stringContaining(name),
+        imgSrc: avatarUrl,
+        linkHref: webUrl,
+        tooltipText: username,
+      });
+    });
   });
 
   it('Displays tag list', () => {
diff --git a/spec/frontend/ci/runner/mock_data.js b/spec/frontend/ci/runner/mock_data.js
index f1e200ce808..196005c9882 100644
--- a/spec/frontend/ci/runner/mock_data.js
+++ b/spec/frontend/ci/runner/mock_data.js
@@ -1,5 +1,14 @@
 // Fixtures generated by: spec/frontend/fixtures/runner.rb
 
+// List queries
+import allRunnersData from 'test_fixtures/graphql/ci/runner/list/all_runners.query.graphql.json';
+import allRunnersDataPaginated from 'test_fixtures/graphql/ci/runner/list/all_runners.query.graphql.paginated.json';
+import allRunnersWithCreatorData from 'test_fixtures/graphql/ci/runner/list/all_runners.query.graphql.with_creator.json';
+import runnersCountData from 'test_fixtures/graphql/ci/runner/list/all_runners_count.query.graphql.json';
+import groupRunnersData from 'test_fixtures/graphql/ci/runner/list/group_runners.query.graphql.json';
+import groupRunnersDataPaginated from 'test_fixtures/graphql/ci/runner/list/group_runners.query.graphql.paginated.json';
+import groupRunnersCountData from 'test_fixtures/graphql/ci/runner/list/group_runners_count.query.graphql.json';
+
 // Register runner queries
 import runnerForRegistration from 'test_fixtures/graphql/ci/runner/register/runner_for_registration.query.graphql.json';
 
@@ -14,15 +23,6 @@ import runnerJobsData from 'test_fixtures/graphql/ci/runner/show/runner_jobs.que
 import runnerFormData from 'test_fixtures/graphql/ci/runner/edit/runner_form.query.graphql.json';
 
 // New runner queries
-
-// List queries
-import allRunnersData from 'test_fixtures/graphql/ci/runner/list/all_runners.query.graphql.json';
-import allRunnersDataPaginated from 'test_fixtures/graphql/ci/runner/list/all_runners.query.graphql.paginated.json';
-import runnersCountData from 'test_fixtures/graphql/ci/runner/list/all_runners_count.query.graphql.json';
-import groupRunnersData from 'test_fixtures/graphql/ci/runner/list/group_runners.query.graphql.json';
-import groupRunnersDataPaginated from 'test_fixtures/graphql/ci/runner/list/group_runners.query.graphql.paginated.json';
-import groupRunnersCountData from 'test_fixtures/graphql/ci/runner/list/group_runners_count.query.graphql.json';
-
 import {
   DEFAULT_MEMBERSHIP,
   INSTANCE_TYPE,
@@ -327,6 +327,7 @@ export const emptyStateFilteredSvgPath = 'emptyStateFilteredSvgPath.svg';
 
 export {
   allRunnersData,
+  allRunnersWithCreatorData,
   allRunnersDataPaginated,
   runnersCountData,
   groupRunnersData,
diff --git a/spec/frontend/design_management/components/toolbar/design_navigation_spec.js b/spec/frontend/design_management/components/toolbar/design_navigation_spec.js
index 46eb4c16af8..28d6b7118be 100644
--- a/spec/frontend/design_management/components/toolbar/design_navigation_spec.js
+++ b/spec/frontend/design_management/components/toolbar/design_navigation_spec.js
@@ -9,7 +9,10 @@ import { DESIGN_ROUTE_NAME } from '~/design_management/router/constants';
 import getDesignListQuery from 'shared_queries/design_management/get_design_list.query.graphql';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
-import { designListQueryResponse, designListQueryResponseNodes } from '../../mock_data/apollo_mock';
+import {
+  getDesignListQueryResponse,
+  designListQueryResponseNodes,
+} from '../../mock_data/apollo_mock';
 
 const push = jest.fn();
 const $router = {
@@ -25,8 +28,7 @@ describe('Design management pagination component', () => {
   let wrapper;
 
   const buildMockHandler = (nodes = designListQueryResponseNodes) => {
-    designListQueryResponse.data.project.issue.designCollection.designs.nodes = nodes;
-    return jest.fn().mockResolvedValue(designListQueryResponse);
+    return jest.fn().mockResolvedValue(getDesignListQueryResponse({ designs: nodes }));
   };
 
   const createMockApolloProvider = (handler) => {
diff --git a/spec/frontend/design_management/components/upload/design_version_dropdown_spec.js b/spec/frontend/design_management/components/upload/design_version_dropdown_spec.js
index cdfff61ba4f..3ee68f80538 100644
--- a/spec/frontend/design_management/components/upload/design_version_dropdown_spec.js
+++ b/spec/frontend/design_management/components/upload/design_version_dropdown_spec.js
@@ -1,9 +1,14 @@
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
 import { GlAvatar, GlCollapsibleListbox, GlListboxItem } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import { nextTick } from 'vue';
+import getDesignListQuery from 'shared_queries/design_management/get_design_list.query.graphql';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import waitForPromises from 'helpers/wait_for_promises';
 import DesignVersionDropdown from '~/design_management/components/upload/design_version_dropdown.vue';
 import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
-import mockAllVersions from './mock_data/all_versions';
+import mockAllVersions from '../../mock_data/all_versions';
+import { getDesignListQueryResponse } from '../../mock_data/apollo_mock';
 
 const LATEST_VERSION_ID = 1;
 const PREVIOUS_VERSION_ID = 2;
@@ -20,11 +25,20 @@ const MOCK_ROUTE = {
   query: {},
 };
 
+Vue.use(VueApollo);
+
 describe('Design management design version dropdown component', () => {
   let wrapper;
 
   function createComponent({ maxVersions = -1, $route = MOCK_ROUTE } = {}) {
+    const designVersions =
+      maxVersions > -1 ? mockAllVersions.slice(0, maxVersions) : mockAllVersions;
+    const designListHandler = jest
+      .fn()
+      .mockResolvedValue(getDesignListQueryResponse({ versions: designVersions }));
+
     wrapper = shallowMount(DesignVersionDropdown, {
+      apolloProvider: createMockApollo([[getDesignListQuery, designListHandler]]),
       propsData: {
         projectPath: '',
         issueIid: '',
@@ -34,12 +48,6 @@ describe('Design management design version dropdown component', () => {
       },
       stubs: { GlAvatar: true, GlCollapsibleListbox },
     });
-
-    // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
-    // eslint-disable-next-line no-restricted-syntax
-    wrapper.setData({
-      allVersions: maxVersions > -1 ? mockAllVersions.slice(0, maxVersions) : mockAllVersions,
-    });
   }
 
   const findListbox = () => wrapper.findComponent(GlCollapsibleListbox);
@@ -52,7 +60,7 @@ describe('Design management design version dropdown component', () => {
 
     beforeEach(async () => {
       createComponent();
-      await nextTick();
+      await waitForPromises();
       listItem = findAllListboxItems().at(0);
     });
 
@@ -74,7 +82,8 @@ describe('Design management design version dropdown component', () => {
     it('has "latest" on most recent version item', async () => {
       createComponent();
 
-      await nextTick();
+      await waitForPromises();
+
       expect(findVersionLink(0).text()).toContain('latest');
     });
   });
@@ -83,7 +92,7 @@ describe('Design management design version dropdown component', () => {
     it('displays latest version text by default', async () => {
       createComponent();
 
-      await nextTick();
+      await waitForPromises();
 
       expect(findListbox().props('toggleText')).toBe('Showing latest version');
     });
@@ -91,35 +100,39 @@ describe('Design management design version dropdown component', () => {
     it('displays latest version text when only 1 version is present', async () => {
       createComponent({ maxVersions: 1 });
 
-      await nextTick();
+      await waitForPromises();
+
       expect(findListbox().props('toggleText')).toBe('Showing latest version');
     });
 
     it('displays version text when the current version is not the latest', async () => {
       createComponent({ $route: designRouteFactory(PREVIOUS_VERSION_ID) });
 
-      await nextTick();
+      await waitForPromises();
+
       expect(findListbox().props('toggleText')).toBe(`Showing version #1`);
     });
 
     it('displays latest version text when the current version is the latest', async () => {
       createComponent({ $route: designRouteFactory(LATEST_VERSION_ID) });
 
-      await nextTick();
+      await waitForPromises();
+
       expect(findListbox().props('toggleText')).toBe('Showing latest version');
     });
 
     it('should have the same length as apollo query', async () => {
       createComponent();
 
-      await nextTick();
+      await waitForPromises();
+
       expect(findAllListboxItems()).toHaveLength(wrapper.vm.allVersions.length);
     });
 
     it('should render TimeAgo', async () => {
       createComponent();
 
-      await nextTick();
+      await waitForPromises();
 
       expect(wrapper.findAllComponents(TimeAgo)).toHaveLength(wrapper.vm.allVersions.length);
     });
diff --git a/spec/frontend/design_management/components/upload/mock_data/all_versions.js b/spec/frontend/design_management/components/upload/mock_data/all_versions.js
deleted file mode 100644
index 24c59ce1a75..00000000000
--- a/spec/frontend/design_management/components/upload/mock_data/all_versions.js
+++ /dev/null
@@ -1,20 +0,0 @@
-export default [
-  {
-    id: 'gid://gitlab/DesignManagement::Version/1',
-    sha: 'b389071a06c153509e11da1f582005b316667001',
-    createdAt: '2021-08-09T06:05:00Z',
-    author: {
-      id: 'gid://gitlab/User/1',
-      name: 'Adminstrator',
-    },
-  },
-  {
-    id: 'gid://gitlab/DesignManagement::Version/2',
-    sha: 'b389071a06c153509e11da1f582005b316667021',
-    createdAt: '2021-08-09T06:05:00Z',
-    author: {
-      id: 'gid://gitlab/User/1',
-      name: 'Adminstrator',
-    },
-  },
-];
diff --git a/spec/frontend/design_management/mock_data/all_versions.js b/spec/frontend/design_management/mock_data/all_versions.js
index f4026da7dfd..36f611247a9 100644
--- a/spec/frontend/design_management/mock_data/all_versions.js
+++ b/spec/frontend/design_management/mock_data/all_versions.js
@@ -1,20 +1,26 @@
 export default [
   {
+    __typename: 'DesignVersion',
     id: 'gid://gitlab/DesignManagement::Version/1',
     sha: 'b389071a06c153509e11da1f582005b316667001',
     createdAt: '2021-08-09T06:05:00Z',
     author: {
+      __typename: 'UserCore',
       id: 'gid://gitlab/User/1',
       name: 'Adminstrator',
+      avatarUrl: 'avatar.png',
     },
   },
   {
-    id: 'gid://gitlab/DesignManagement::Version/1',
+    __typename: 'DesignVersion',
+    id: 'gid://gitlab/DesignManagement::Version/2',
     sha: 'b389071a06c153509e11da1f582005b316667021',
     createdAt: '2021-08-09T06:05:00Z',
     author: {
+      __typename: 'UserCore',
       id: 'gid://gitlab/User/1',
       name: 'Adminstrator',
+      avatarUrl: 'avatar.png',
     },
   },
 ];
diff --git a/spec/frontend/design_management/mock_data/apollo_mock.js b/spec/frontend/design_management/mock_data/apollo_mock.js
index f8214558d74..18e08ecd729 100644
--- a/spec/frontend/design_management/mock_data/apollo_mock.js
+++ b/spec/frontend/design_management/mock_data/apollo_mock.js
@@ -40,7 +40,10 @@ export const designListQueryResponseNodes = [
   },
 ];
 
-export const designListQueryResponse = {
+export const getDesignListQueryResponse = ({
+  versions = [],
+  designs = designListQueryResponseNodes,
+} = {}) => ({
   data: {
     project: {
       __typename: 'Project',
@@ -53,17 +56,17 @@ export const designListQueryResponse = {
           copyState: 'READY',
           designs: {
             __typename: 'DesignConnection',
-            nodes: designListQueryResponseNodes,
+            nodes: designs,
           },
           versions: {
-            __typename: 'DesignVersion',
-            nodes: [],
+            __typename: 'DesignVersionConnection',
+            nodes: versions,
           },
         },
       },
     },
   },
-};
+});
 
 export const designUploadMutationCreatedResponse = {
   data: {
diff --git a/spec/frontend/design_management/pages/index_spec.js b/spec/frontend/design_management/pages/index_spec.js
index 23c6cb944bc..1a6403d3b87 100644
--- a/spec/frontend/design_management/pages/index_spec.js
+++ b/spec/frontend/design_management/pages/index_spec.js
@@ -32,7 +32,7 @@ import {
 import { createAlert } from '~/alert';
 import DesignDropzone from '~/vue_shared/components/upload_dropzone/upload_dropzone.vue';
 import {
-  designListQueryResponse,
+  getDesignListQueryResponse,
   designUploadMutationCreatedResponse,
   designUploadMutationUpdatedResponse,
   getPermissionsQueryResponse,
@@ -183,7 +183,7 @@ describe('Design management index page', () => {
     moveDesignHandler = moveHandler;
 
     const requestHandlers = [
-      [getDesignListQuery, jest.fn().mockResolvedValue(designListQueryResponse)],
+      [getDesignListQuery, jest.fn().mockResolvedValue(getDesignListQueryResponse())],
       [permissionsQuery, permissionsQueryHandler],
       [moveDesignMutation, moveDesignHandler],
     ];
diff --git a/spec/frontend/fixtures/runner.rb b/spec/frontend/fixtures/runner.rb
index dae210d990d..099df607487 100644
--- a/spec/frontend/fixtures/runner.rb
+++ b/spec/frontend/fixtures/runner.rb
@@ -13,7 +13,7 @@ RSpec.describe 'Runner (JavaScript fixtures)', feature_category: :runner_fleet d
   let_it_be(:project) { create(:project, :repository, :public) }
   let_it_be(:project_2) { create(:project, :repository, :public) }
 
-  let_it_be(:runner) { create(:ci_runner, :instance, description: 'My Runner', version: '1.0.0') }
+  let_it_be(:runner) { create(:ci_runner, :instance, description: 'My Runner', creator: admin, version: '1.0.0') }
   let_it_be(:group_runner) { create(:ci_runner, :group, groups: [group], version: '2.0.0') }
   let_it_be(:group_runner_2) { create(:ci_runner, :group, groups: [group], version: '2.0.0') }
   let_it_be(:project_runner) { create(:ci_runner, :project, projects: [project, project_2], version: '2.0.0') }
@@ -58,6 +58,13 @@ RSpec.describe 'Runner (JavaScript fixtures)', feature_category: :runner_fleet d
 
         expect_graphql_errors_to_be_empty
       end
+
+      it "#{fixtures_path}#{all_runners_query}.with_creator.json" do
+        # "last: 1" fetches the first runner created, with admin as "creator"
+        post_graphql(query, current_user: admin, variables: { last: 1 })
+
+        expect_graphql_errors_to_be_empty
+      end
     end
 
     describe 'all_runners_count.query.graphql', type: :request do