Merge branch '420784-rename-runner-heading-configuration' into 'master'

Rename "Runner" header to "Runner configuration"

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/144216



Merged-by: Jose Ivan Vargas <jvargas@gitlab.com>
Approved-by: Jose Ivan Vargas <jvargas@gitlab.com>
Reviewed-by: Alex Pennells <apennells@gitlab.com>
Co-authored-by: Miguel Rincon <mrincon@gitlab.com>

app/assets/javascripts/ci/runner/components/runner_configuration_popover.vue

+<script>
+import { GlLink, GlSprintf } from '@gitlab/ui';
+import HelpPopover from '~/vue_shared/components/help_popover.vue';
+import { helpPagePath } from '~/helpers/help_page_helper';
+
+export default {
+  name: 'RunnerConfigurationPopover',
+  components: {
+    GlLink,
+    GlSprintf,
+    HelpPopover,
+  },
+  runnerEntryHelpPath: helpPagePath('/runner/configuration/advanced-configuration.md', {
+    anchor: 'the-runners-section',
+  }),
+};
+</script>
+
+<template>
+  <help-popover>
+    <gl-sprintf
+      :message="
+        s__(
+          'Runners|A runner configuration is where you configure runners based on your requirements. Each runner in this table represents a %{linkStart}single runner entry%{linkEnd} in the %{codeStart}config.toml%{codeEnd}. Multiple runners can be linked to the same configuration. When there are multiple runners in a configuration, the one that contacted GitLab most recently displays here.',
+        )
+      "
+    >
+      <template #link="{ content }"
+        ><gl-link :href="$options.runnerEntryHelpPath">{{ content }}</gl-link></template
+      >
+      <template #code="{ content }"
+        ><code>{{ content }}</code></template
+      >
+    </gl-sprintf>
+  </help-popover>
+</template>

app/assets/javascripts/ci/runner/components/runner_list.vue

@@ -7,13 +7,14 @@ import checkedRunnerIdsQuery from '../graphql/list/checked_runner_ids.query.grap
 import { tableField } from '../utils';
 import RunnerBulkDelete from './runner_bulk_delete.vue';
 import RunnerBulkDeleteCheckbox from './runner_bulk_delete_checkbox.vue';
+import RunnerConfigurationPopover from './runner_configuration_popover.vue';
 import RunnerSummaryCell from './cells/runner_summary_cell.vue';
 import RunnerStatusCell from './cells/runner_status_cell.vue';
 import RunnerOwnerCell from './cells/runner_owner_cell.vue';
 
 const defaultFields = [
   tableField({ key: 'status', label: s__('Runners|Status'), thClasses: ['gl-w-15p'] }),
-  tableField({ key: 'summary', label: s__('Runners|Runner') }),
+  tableField({ key: 'summary', label: s__('Runners|Runner configuration') }),
   tableField({ key: 'owner', label: s__('Runners|Owner'), thClasses: ['gl-w-20p'] }),
   tableField({ key: 'actions', label: '', thClasses: ['gl-w-15p'] }),
 ];
@@ -26,6 +27,7 @@ export default {
     HelpPopover,
     RunnerBulkDelete,
     RunnerBulkDeleteCheckbox,
+    RunnerConfigurationPopover,
     RunnerSummaryCell,
     RunnerStatusCell,
     RunnerOwnerCell,
@@ -151,6 +153,11 @@ export default {
         </runner-status-cell>
       </template>
 
+      <template #head(summary)="{ label }">
+        {{ label }}
+        <runner-configuration-popover />
+      </template>
+
       <template #cell(summary)="{ item }">
         <runner-summary-cell :runner="item">
           <template #runner-name="{ runner }">

locale/gitlab.pot

@@ -42340,6 +42340,9 @@ msgstr ""
 msgid "Runners|A periodic background task deletes runners that haven't contacted GitLab in more than %{elapsedTime}. Only runners registered in this group are deleted. Runners in subgroups and projects are not. %{linkStart}Can I view how many runners were deleted?%{linkEnd}"
 msgstr ""
+msgid "Runners|A runner configuration is where you configure runners based on your requirements. Each runner in this table represents a %{linkStart}single runner entry%{linkEnd} in the %{codeStart}config.toml%{codeEnd}. Multiple runners can be linked to the same configuration. When there are multiple runners in a configuration, the one that contacted GitLab most recently displays here."
+msgstr ""
+
 msgid "Runners|Active"
 msgstr ""
@@ -42889,6 +42892,9 @@ msgstr ""
 msgid "Runners|Runner authentication tokens will expire based on a set interval. They will automatically rotate once expired."
 msgstr ""
+msgid "Runners|Runner configuration"
+msgstr ""
+
 msgid "Runners|Runner created."
 msgstr ""

spec/frontend/ci/runner/components/runner_configuration_popover_spec.js

+import { GlLink, GlSprintf } from '@gitlab/ui';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import RunnerConfigurationPopover from '~/ci/runner/components/runner_configuration_popover.vue';
+import HelpPopover from '~/vue_shared/components/help_popover.vue';
+
+describe('RunnerConfigurationPopover', () => {
+  let wrapper;
+
+  const createComponent = () => {
+    wrapper = shallowMountExtended(RunnerConfigurationPopover, {
+      stubs: {
+        GlSprintf,
+      },
+    });
+  };
+
+  const findHelpPopover = () => wrapper.findComponent(HelpPopover);
+  const findHelpLink = () => findHelpPopover().findComponent(GlLink);
+  const findCode = () => findHelpPopover().find('code');
+
+  it('renders popover', () => {
+    createComponent();
+
+    expect(findHelpPopover().exists()).toBe(true);
+  });
+
+  it('renders help link', () => {
+    createComponent();
+
+    expect(findHelpLink().text()).toBe('single runner entry');
+    expect(findHelpLink().attributes('href')).toBe(
+      '/help/runner/configuration/advanced-configuration.md#the-runners-section',
+    );
+  });
+
+  it('renders code text', () => {
+    createComponent();
+
+    expect(findCode().text()).toBe('config.toml');
+  });
+});

spec/frontend/ci/runner/components/runner_list_spec.js

@@ -10,6 +10,7 @@ import { stubComponent } from 'helpers/stub_component';
 import RunnerList from '~/ci/runner/components/runner_list.vue';
 import RunnerBulkDelete from '~/ci/runner/components/runner_bulk_delete.vue';
 import RunnerBulkDeleteCheckbox from '~/ci/runner/components/runner_bulk_delete_checkbox.vue';
+import RunnerConfigurationPopover from '~/ci/runner/components/runner_configuration_popover.vue';
 
 import { I18N_PROJECT_TYPE, I18N_STATUS_NEVER_CONTACTED } from '~/ci/runner/constants';
 import { allRunnersData } from '../mock_data';
@@ -58,16 +59,19 @@ describe('RunnerList', () => {
       mountExtended,
     );
 
-    const headerLabels = findHeaders().wrappers.map((w) => w.text());
+    const headers = findHeaders().wrappers;
 
-    expect(findHeaders().at(2).findComponent(HelpPopover).exists()).toBe(true);
+    expect(headers).toHaveLength(4);
 
-    expect(headerLabels).toEqual([
-      s__('Runners|Status'),
-      s__('Runners|Runner'),
-      s__('Runners|Owner'),
-      '', // actions has no label
-    ]);
+    expect(headers[0].text()).toBe(s__('Runners|Status'));
+
+    expect(headers[1].findComponent(RunnerConfigurationPopover).exists()).toBe(true);
+    expect(headers[1].text()).toBe(s__('Runners|Runner configuration'));
+
+    expect(headers[2].findComponent(HelpPopover).exists()).toBe(true);
+    expect(headers[2].text()).toBe(s__('Runners|Owner'));
+
+    expect(headers[3].text()).toBe(''); // actions has no label
   });
 
   it('Sets runner id as a row key', () => {