10 files changed, 191 insertions, 84 deletions

diff --git a/spec/frontend/runner/admin_runners/admin_runners_app_spec.js b/spec/frontend/runner/admin_runners/admin_runners_app_spec.js
index 3292f635f6b..33e9c122080 100644
--- a/spec/frontend/runner/admin_runners/admin_runners_app_spec.js
+++ b/spec/frontend/runner/admin_runners/admin_runners_app_spec.js
@@ -1,3 +1,4 @@
+import { GlLink } from '@gitlab/ui';
 import { createLocalVue, mount, shallowMount } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
@@ -5,6 +6,7 @@ import setWindowLocation from 'helpers/set_window_location_helper';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import createFlash from '~/flash';
+import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { updateHistory } from '~/lib/utils/url_utility';
 
 import AdminRunnersApp from '~/runner/admin_runners/admin_runners_app.vue';
@@ -12,7 +14,6 @@ import RunnerFilteredSearchBar from '~/runner/components/runner_filtered_search_
 import RunnerList from '~/runner/components/runner_list.vue';
 import RunnerManualSetupHelp from '~/runner/components/runner_manual_setup_help.vue';
 import RunnerPagination from '~/runner/components/runner_pagination.vue';
-import RunnerTypeHelp from '~/runner/components/runner_type_help.vue';
 
 import {
   ADMIN_FILTERED_SEARCH_NAMESPACE,
@@ -49,7 +50,6 @@ describe('AdminRunnersApp', () => {
   let wrapper;
   let mockRunnersQuery;
 
-  const findRunnerTypeHelp = () => wrapper.findComponent(RunnerTypeHelp);
   const findRunnerManualSetupHelp = () => wrapper.findComponent(RunnerManualSetupHelp);
   const findRunnerList = () => wrapper.findComponent(RunnerList);
   const findRunnerPagination = () => extendedWrapper(wrapper.findComponent(RunnerPagination));
@@ -86,10 +86,6 @@ describe('AdminRunnersApp', () => {
     wrapper.destroy();
   });
 
-  it('shows the runner type help', () => {
-    expect(findRunnerTypeHelp().exists()).toBe(true);
-  });
-
   it('shows the runner setup instructions', () => {
     expect(findRunnerManualSetupHelp().props('registrationToken')).toBe(mockRegistrationToken);
   });
@@ -98,6 +94,20 @@ describe('AdminRunnersApp', () => {
     expect(findRunnerList().props('runners')).toEqual(runnersData.data.runners.nodes);
   });
 
+  it('runner item links to the runner admin page', async () => {
+    createComponent({ mountFn: mount });
+
+    await waitForPromises();
+
+    const { id, shortSha } = runnersData.data.runners.nodes[0];
+    const numericId = getIdFromGraphQLId(id);
+
+    const runnerLink = wrapper.find('tr [data-testid="td-summary"]').find(GlLink);
+
+    expect(runnerLink.text()).toBe(`#${numericId} (${shortSha})`);
+    expect(runnerLink.attributes('href')).toBe(`http://localhost/admin/runners/${numericId}`);
+  });
+
   it('requests the runners with no filters', () => {
     expect(mockRunnersQuery).toHaveBeenLastCalledWith({
       status: undefined,
diff --git a/spec/frontend/runner/components/cells/runner_actions_cell_spec.js b/spec/frontend/runner/components/cells/runner_actions_cell_spec.js
index 95f7c38cafc..5aa3879ac3e 100644
--- a/spec/frontend/runner/components/cells/runner_actions_cell_spec.js
+++ b/spec/frontend/runner/components/cells/runner_actions_cell_spec.js
@@ -5,15 +5,18 @@ import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import createFlash from '~/flash';
 import RunnerActionCell from '~/runner/components/cells/runner_actions_cell.vue';
+import getGroupRunnersQuery from '~/runner/graphql/get_group_runners.query.graphql';
 import getRunnersQuery from '~/runner/graphql/get_runners.query.graphql';
 import runnerDeleteMutation from '~/runner/graphql/runner_delete.mutation.graphql';
 import runnerUpdateMutation from '~/runner/graphql/runner_update.mutation.graphql';
 import { captureException } from '~/runner/sentry_utils';
-import { runnerData } from '../../mock_data';
+import { runnersData, runnerData } from '../../mock_data';
 
-const mockRunner = runnerData.data.runner;
+const mockRunner = runnersData.data.runners.nodes[0];
+const mockRunnerDetails = runnerData.data.runner;
 
 const getRunnersQueryName = getRunnersQuery.definitions[0].name.value;
+const getGroupRunnersQueryName = getGroupRunnersQuery.definitions[0].name.value;
 
 const localVue = createLocalVue();
 localVue.use(VueApollo);
@@ -36,6 +39,7 @@ describe('RunnerTypeCell', () => {
         propsData: {
           runner: {
             id: mockRunner.id,
+            adminUrl: mockRunner.adminUrl,
             active,
           },
         },
@@ -61,7 +65,7 @@ describe('RunnerTypeCell', () => {
     runnerUpdateMutationHandler.mockResolvedValue({
       data: {
         runnerUpdate: {
-          runner: runnerData.data.runner,
+          runner: mockRunnerDetails,
           errors: [],
         },
       },
@@ -78,7 +82,7 @@ describe('RunnerTypeCell', () => {
   it('Displays the runner edit link with the correct href', () => {
     createComponent();
 
-    expect(findEditBtn().attributes('href')).toBe('/admin/runners/1');
+    expect(findEditBtn().attributes('href')).toBe(mockRunner.adminUrl);
   });
 
   describe.each`
@@ -231,7 +235,7 @@ describe('RunnerTypeCell', () => {
             },
           },
           awaitRefetchQueries: true,
-          refetchQueries: [getRunnersQueryName],
+          refetchQueries: [getRunnersQueryName, getGroupRunnersQueryName],
         });
       });
 
diff --git a/spec/frontend/runner/components/cells/runner_name_cell_spec.js b/spec/frontend/runner/components/cells/runner_summary_cell_spec.js
index 26055fc0faf..1c9282e0acd 100644
--- a/spec/frontend/runner/components/cells/runner_name_cell_spec.js
+++ b/spec/frontend/runner/components/cells/runner_summary_cell_spec.js
@@ -1,6 +1,5 @@
-import { GlLink } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
-import RunnerNameCell from '~/runner/components/cells/runner_name_cell.vue';
+import RunnerSummaryCell from '~/runner/components/cells/runner_summary_cell.vue';
 
 const mockId = '1';
 const mockShortSha = '2P6oDVDm';
@@ -9,10 +8,8 @@ const mockDescription = 'runner-1';
 describe('RunnerTypeCell', () => {
   let wrapper;
 
-  const findLink = () => wrapper.findComponent(GlLink);
-
-  const createComponent = () => {
-    wrapper = mount(RunnerNameCell, {
+  const createComponent = (options) => {
+    wrapper = mount(RunnerSummaryCell, {
       propsData: {
         runner: {
           id: `gid://gitlab/Ci::Runner/${mockId}`,
@@ -20,6 +17,7 @@ describe('RunnerTypeCell', () => {
           description: mockDescription,
         },
       },
+      ...options,
     });
   };
 
@@ -31,12 +29,23 @@ describe('RunnerTypeCell', () => {
     wrapper.destroy();
   });
 
-  it('Displays the runner link with id and short token', () => {
-    expect(findLink().text()).toBe(`#${mockId} (${mockShortSha})`);
-    expect(findLink().attributes('href')).toBe(`/admin/runners/${mockId}`);
+  it('Displays the runner name as id and short token', () => {
+    expect(wrapper.text()).toContain(`#${mockId} (${mockShortSha})`);
   });
 
   it('Displays the runner description', () => {
     expect(wrapper.text()).toContain(mockDescription);
   });
+
+  it('Displays a custom slot', () => {
+    const slotContent = 'My custom runner summary';
+
+    createComponent({
+      slots: {
+        'runner-name': slotContent,
+      },
+    });
+
+    expect(wrapper.text()).toContain(slotContent);
+  });
 });
diff --git a/spec/frontend/runner/components/runner_list_spec.js b/spec/frontend/runner/components/runner_list_spec.js
index 344d1e5c150..e24dffea1eb 100644
--- a/spec/frontend/runner/components/runner_list_spec.js
+++ b/spec/frontend/runner/components/runner_list_spec.js
@@ -1,4 +1,4 @@
-import { GlLink, GlTable, GlSkeletonLoader } from '@gitlab/ui';
+import { GlTable, GlSkeletonLoader } from '@gitlab/ui';
 import { mount, shallowMount } from '@vue/test-utils';
 import { cloneDeep } from 'lodash';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
@@ -67,11 +67,11 @@ describe('RunnerList', () => {
     // Badges
     expect(findCell({ fieldKey: 'type' }).text()).toMatchInterpolatedText('specific paused');
 
-    // Runner identifier
-    expect(findCell({ fieldKey: 'name' }).text()).toContain(
+    // Runner summary
+    expect(findCell({ fieldKey: 'summary' }).text()).toContain(
       `#${getIdFromGraphQLId(id)} (${shortSha})`,
     );
-    expect(findCell({ fieldKey: 'name' }).text()).toContain(description);
+    expect(findCell({ fieldKey: 'summary' }).text()).toContain(description);
 
     // Other fields
     expect(findCell({ fieldKey: 'version' }).text()).toBe(version);
@@ -136,12 +136,11 @@ describe('RunnerList', () => {
     });
   });
 
-  it('Links to the runner page', () => {
-    const { id } = mockRunners[0];
+  it('Shows runner identifier', () => {
+    const { id, shortSha } = mockRunners[0];
+    const numericId = getIdFromGraphQLId(id);
 
-    expect(findCell({ fieldKey: 'name' }).find(GlLink).attributes('href')).toBe(
-      `/admin/runners/${getIdFromGraphQLId(id)}`,
-    );
+    expect(findCell({ fieldKey: 'summary' }).text()).toContain(`#${numericId} (${shortSha})`);
   });
 
   describe('When data is loading', () => {
diff --git a/spec/frontend/runner/components/runner_state_locked_badge_spec.js b/spec/frontend/runner/components/runner_state_locked_badge_spec.js
new file mode 100644
index 00000000000..e92b671f5a1
--- /dev/null
+++ b/spec/frontend/runner/components/runner_state_locked_badge_spec.js
@@ -0,0 +1,45 @@
+import { GlBadge } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import RunnerStateLockedBadge from '~/runner/components/runner_state_locked_badge.vue';
+import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
+
+describe('RunnerTypeBadge', () => {
+  let wrapper;
+
+  const findBadge = () => wrapper.findComponent(GlBadge);
+  const getTooltip = () => getBinding(findBadge().element, 'gl-tooltip');
+
+  const createComponent = ({ props = {} } = {}) => {
+    wrapper = shallowMount(RunnerStateLockedBadge, {
+      propsData: {
+        ...props,
+      },
+      directives: {
+        GlTooltip: createMockDirective(),
+      },
+    });
+  };
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders locked state', () => {
+    expect(wrapper.text()).toBe('locked');
+    expect(findBadge().props('variant')).toBe('warning');
+  });
+
+  it('renders tooltip', () => {
+    expect(getTooltip().value).toBeDefined();
+  });
+
+  it('passes arbitrary attributes to the badge', () => {
+    createComponent({ props: { size: 'sm' } });
+
+    expect(findBadge().props('size')).toBe('sm');
+  });
+});
diff --git a/spec/frontend/runner/components/runner_state_paused_badge_spec.js b/spec/frontend/runner/components/runner_state_paused_badge_spec.js
new file mode 100644
index 00000000000..8df56d6e3f3
--- /dev/null
+++ b/spec/frontend/runner/components/runner_state_paused_badge_spec.js
@@ -0,0 +1,45 @@
+import { GlBadge } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import RunnerStatePausedBadge from '~/runner/components/runner_state_paused_badge.vue';
+import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
+
+describe('RunnerTypeBadge', () => {
+  let wrapper;
+
+  const findBadge = () => wrapper.findComponent(GlBadge);
+  const getTooltip = () => getBinding(findBadge().element, 'gl-tooltip');
+
+  const createComponent = ({ props = {} } = {}) => {
+    wrapper = shallowMount(RunnerStatePausedBadge, {
+      propsData: {
+        ...props,
+      },
+      directives: {
+        GlTooltip: createMockDirective(),
+      },
+    });
+  };
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders paused state', () => {
+    expect(wrapper.text()).toBe('paused');
+    expect(findBadge().props('variant')).toBe('danger');
+  });
+
+  it('renders tooltip', () => {
+    expect(getTooltip().value).toBeDefined();
+  });
+
+  it('passes arbitrary attributes to the badge', () => {
+    createComponent({ props: { size: 'sm' } });
+
+    expect(findBadge().props('size')).toBe('sm');
+  });
+});
diff --git a/spec/frontend/runner/components/runner_type_badge_spec.js b/spec/frontend/runner/components/runner_type_badge_spec.js
index ab5ccf6390f..fb344e65389 100644
--- a/spec/frontend/runner/components/runner_type_badge_spec.js
+++ b/spec/frontend/runner/components/runner_type_badge_spec.js
@@ -1,18 +1,23 @@
 import { GlBadge } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import RunnerTypeBadge from '~/runner/components/runner_type_badge.vue';
+import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 import { INSTANCE_TYPE, GROUP_TYPE, PROJECT_TYPE } from '~/runner/constants';
 
 describe('RunnerTypeBadge', () => {
   let wrapper;
 
   const findBadge = () => wrapper.findComponent(GlBadge);
+  const getTooltip = () => getBinding(findBadge().element, 'gl-tooltip');
 
   const createComponent = ({ props = {} } = {}) => {
     wrapper = shallowMount(RunnerTypeBadge, {
       propsData: {
         ...props,
       },
+      directives: {
+        GlTooltip: createMockDirective(),
+      },
     });
   };
 
@@ -20,16 +25,24 @@ describe('RunnerTypeBadge', () => {
     wrapper.destroy();
   });
 
-  it.each`
+  describe.each`
     type             | text          | variant
     ${INSTANCE_TYPE} | ${'shared'}   | ${'success'}
     ${GROUP_TYPE}    | ${'group'}    | ${'success'}
     ${PROJECT_TYPE}  | ${'specific'} | ${'info'}
-  `('displays $type runner with as "$text" with a $variant variant ', ({ type, text, variant }) => {
-    createComponent({ props: { type } });
+  `('displays $type runner', ({ type, text, variant }) => {
+    beforeEach(() => {
+      createComponent({ props: { type } });
+    });
 
-    expect(findBadge().text()).toBe(text);
-    expect(findBadge().props('variant')).toBe(variant);
+    it(`as "${text}" with a ${variant} variant`, () => {
+      expect(findBadge().text()).toBe(text);
+      expect(findBadge().props('variant')).toBe(variant);
+    });
+
+    it('with a tooltip', () => {
+      expect(getTooltip().value).toBeDefined();
+    });
   });
 
   it('validation fails for an incorrect type', () => {
diff --git a/spec/frontend/runner/components/runner_type_help_spec.js b/spec/frontend/runner/components/runner_type_help_spec.js
deleted file mode 100644
index f0d03282f8e..00000000000
--- a/spec/frontend/runner/components/runner_type_help_spec.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import { GlBadge } from '@gitlab/ui';
-import { mount } from '@vue/test-utils';
-import RunnerTypeHelp from '~/runner/components/runner_type_help.vue';
-
-describe('RunnerTypeHelp', () => {
-  let wrapper;
-
-  const findBadges = () => wrapper.findAllComponents(GlBadge);
-
-  const createComponent = () => {
-    wrapper = mount(RunnerTypeHelp);
-  };
-
-  beforeEach(() => {
-    createComponent();
-  });
-
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
-  it('Displays each of the runner types', () => {
-    expect(findBadges().at(0).text()).toBe('shared');
-    expect(findBadges().at(1).text()).toBe('group');
-    expect(findBadges().at(2).text()).toBe('specific');
-  });
-
-  it('Displays runner states', () => {
-    expect(findBadges().at(3).text()).toBe('locked');
-    expect(findBadges().at(4).text()).toBe('paused');
-  });
-});
diff --git a/spec/frontend/runner/group_runners/group_runners_app_spec.js b/spec/frontend/runner/group_runners/group_runners_app_spec.js
index e80da40e3bd..5f3aabd4bc3 100644
--- a/spec/frontend/runner/group_runners/group_runners_app_spec.js
+++ b/spec/frontend/runner/group_runners/group_runners_app_spec.js
@@ -1,3 +1,4 @@
+import { GlLink } from '@gitlab/ui';
 import { createLocalVue, shallowMount, mount } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
@@ -5,13 +6,13 @@ import setWindowLocation from 'helpers/set_window_location_helper';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import createFlash from '~/flash';
+import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { updateHistory } from '~/lib/utils/url_utility';
 
 import RunnerFilteredSearchBar from '~/runner/components/runner_filtered_search_bar.vue';
 import RunnerList from '~/runner/components/runner_list.vue';
 import RunnerManualSetupHelp from '~/runner/components/runner_manual_setup_help.vue';
 import RunnerPagination from '~/runner/components/runner_pagination.vue';
-import RunnerTypeHelp from '~/runner/components/runner_type_help.vue';
 
 import {
   CREATED_ASC,
@@ -34,8 +35,7 @@ localVue.use(VueApollo);
 
 const mockGroupFullPath = 'group1';
 const mockRegistrationToken = 'AABBCC';
-const mockRunners = groupRunnersData.data.group.runners.nodes;
-const mockGroupRunnersLimitedCount = mockRunners.length;
+const mockGroupRunnersLimitedCount = groupRunnersData.data.group.runners.edges.length;
 
 jest.mock('~/flash');
 jest.mock('~/runner/sentry_utils');
@@ -48,7 +48,6 @@ describe('GroupRunnersApp', () => {
   let wrapper;
   let mockGroupRunnersQuery;
 
-  const findRunnerTypeHelp = () => wrapper.findComponent(RunnerTypeHelp);
   const findRunnerManualSetupHelp = () => wrapper.findComponent(RunnerManualSetupHelp);
   const findRunnerList = () => wrapper.findComponent(RunnerList);
   const findRunnerPagination = () => extendedWrapper(wrapper.findComponent(RunnerPagination));
@@ -82,16 +81,27 @@ describe('GroupRunnersApp', () => {
     await waitForPromises();
   });
 
-  it('shows the runner type help', () => {
-    expect(findRunnerTypeHelp().exists()).toBe(true);
-  });
-
   it('shows the runner setup instructions', () => {
     expect(findRunnerManualSetupHelp().props('registrationToken')).toBe(mockRegistrationToken);
   });
 
   it('shows the runners list', () => {
-    expect(findRunnerList().props('runners')).toEqual(groupRunnersData.data.group.runners.nodes);
+    expect(findRunnerList().props('runners')).toEqual(
+      groupRunnersData.data.group.runners.edges.map(({ node }) => node),
+    );
+  });
+
+  it('runner item links to the runner group page', async () => {
+    const { webUrl, node } = groupRunnersData.data.group.runners.edges[0];
+    const { id, shortSha } = node;
+
+    createComponent({ mountFn: mount });
+
+    await waitForPromises();
+
+    const runnerLink = wrapper.find('tr [data-testid="td-summary"]').find(GlLink);
+    expect(runnerLink.text()).toBe(`#${getIdFromGraphQLId(id)} (${shortSha})`);
+    expect(runnerLink.attributes('href')).toBe(webUrl);
   });
 
   it('requests the runners with group path and no other filters', () => {
diff --git a/spec/frontend/runner/mock_data.js b/spec/frontend/runner/mock_data.js
index c90b9a4c426..b8d0f1273c7 100644
--- a/spec/frontend/runner/mock_data.js
+++ b/spec/frontend/runner/mock_data.js
@@ -1,14 +1,18 @@
-const runnerFixture = (filename) => getJSONFixture(`graphql/runner/${filename}`);
-
 // Fixtures generated by: spec/frontend/fixtures/runner.rb
 
 // Admin queries
-export const runnersData = runnerFixture('get_runners.query.graphql.json');
-export const runnersDataPaginated = runnerFixture('get_runners.query.graphql.paginated.json');
-export const runnerData = runnerFixture('get_runner.query.graphql.json');
+import runnersData from 'test_fixtures/graphql/runner/get_runners.query.graphql.json';
+import runnersDataPaginated from 'test_fixtures/graphql/runner/get_runners.query.graphql.paginated.json';
+import runnerData from 'test_fixtures/graphql/runner/get_runner.query.graphql.json';
 
 // Group queries
-export const groupRunnersData = runnerFixture('get_group_runners.query.graphql.json');
-export const groupRunnersDataPaginated = runnerFixture(
-  'get_group_runners.query.graphql.paginated.json',
-);
+import groupRunnersData from 'test_fixtures/graphql/runner/get_group_runners.query.graphql.json';
+import groupRunnersDataPaginated from 'test_fixtures/graphql/runner/get_group_runners.query.graphql.paginated.json';
+
+export {
+  runnerData,
+  runnersDataPaginated,
+  runnersData,
+  groupRunnersData,
+  groupRunnersDataPaginated,
+};