Update admin runners spec

Updates the spec/features/admin/admin_runners_spec.rb specs to test
the features when the feature flag that migrates to Vue
(runner_detailed_view_vue_ui) is enabled.

This change is in preparation for the full replacement of the HAML based
UI.

app/assets/javascripts/runner/components/runner_filtered_search_bar.vue

 <script>
 import { cloneDeep } from 'lodash';
-import { __, s__ } from '~/locale';
+import { formatNumber, sprintf, __, s__ } from '~/locale';
 import { OPERATOR_IS_ONLY } from '~/vue_shared/components/filtered_search_bar/constants';
 import FilteredSearch from '~/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue';
 import BaseToken from '~/vue_shared/components/filtered_search_bar/tokens/base_token.vue';
@@ -58,6 +58,10 @@ export default {
       type: String,
       required: true,
     },
+    activeRunnersCount: {
+      type: Number,
+      required: true,
+    },
   },
   data() {
     // filtered_search_bar_root.vue may mutate the inital
@@ -119,6 +123,11 @@ export default {
         },
       ];
     },
+    activeRunnersMessage() {
+      return sprintf(__('Runners currently online: %{active_runners_count}'), {
+        active_runners_count: formatNumber(this.activeRunnersCount),
+      });
+    },
   },
   methods: {
     onFilter(filters) {
@@ -144,16 +153,20 @@ export default {
 };
 </script>
 <template>
-  <filtered-search
-    v-bind="$attrs"
-    :namespace="namespace"
-    recent-searches-storage-key="runners-search"
-    :sort-options="$options.sortOptions"
-    :initial-filter-value="initialFilterValue"
-    :initial-sort-by="initialSortBy"
-    :tokens="searchTokens"
-    :search-input-placeholder="__('Search or filter results...')"
-    @onFilter="onFilter"
-    @onSort="onSort"
-  />
+  <div>
+    <filtered-search
+      v-bind="$attrs"
+      :namespace="namespace"
+      recent-searches-storage-key="runners-search"
+      :sort-options="$options.sortOptions"
+      :initial-filter-value="initialFilterValue"
+      :initial-sort-by="initialSortBy"
+      :tokens="searchTokens"
+      :search-input-placeholder="__('Search or filter results...')"
+      data-testid="runners-filtered-search"
+      @onFilter="onFilter"
+      @onSort="onSort"
+    />
+    <div class="gl-text-right" data-testid="active-runners-message">{{ activeRunnersMessage }}</div>
+  </div>
 </template>

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

 <script>
 import { GlTable, GlTooltipDirective, GlSkeletonLoader } from '@gitlab/ui';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
-import { formatNumber, sprintf, __, s__ } from '~/locale';
+import { formatNumber, __, s__ } from '~/locale';
 import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
 import { RUNNER_JOB_COUNT_LIMIT } from '../constants';
 import RunnerActionsCell from './cells/runner_actions_cell.vue';
@@ -52,17 +52,6 @@ export default {
       type: Array,
       required: true,
     },
-    activeRunnersCount: {
-      type: Number,
-      required: true,
-    },
-  },
-  computed: {
-    activeRunnersMessage() {
-      return sprintf(__('Runners currently online: %{active_runners_count}'), {
-        active_runners_count: formatNumber(this.activeRunnersCount),
-      });
-    },
   },
   methods: {
     formatProjectCount(projectCount) {
@@ -101,12 +90,12 @@ export default {
 </script>
 <template>
   <div>
-    <div class="gl-text-right" data-testid="active-runners-message">{{ activeRunnersMessage }}</div>
     <gl-table
       :busy="loading"
       :items="runners"
       :fields="$options.fields"
       :tbody-tr-attr="runnerTrAttr"
+      data-testid="runner-list"
       stacked="md"
       fixed
     >

app/assets/javascripts/runner/runner_list/index.js

@@ -12,7 +12,8 @@ export const initRunnerList = (selector = '#js-runner-list') => {
     return null;
   }
 
-  // TODO `activeRunnersCount` should be implemented using a GraphQL API.
+  // TODO `activeRunnersCount` should be implemented using a GraphQL API
+  // https://gitlab.com/gitlab-org/gitlab/-/issues/333806
   const { activeRunnersCount, registrationToken, runnerInstallHelpPage } = el.dataset;
 
   const apolloProvider = new VueApollo({

app/assets/javascripts/runner/runner_list/runner_list_app.vue

@@ -116,17 +116,17 @@ export default {
       </div>
     </div>
 
-    <runner-filtered-search-bar v-model="search" namespace="admin_runners" />
+    <runner-filtered-search-bar
+      v-model="search"
+      namespace="admin_runners"
+      :active-runners-count="activeRunnersCount"
+    />
 
     <div v-if="noRunnersFound" class="gl-text-center gl-p-5">
       {{ __('No runners found') }}
     </div>
     <template v-else>
-      <runner-list
-        :runners="runners.items"
-        :loading="runnersLoading"
-        :active-runners-count="activeRunnersCount"
-      />
+      <runner-list :runners="runners.items" :loading="runnersLoading" />
       <runner-pagination v-model="search.pagination" :page-info="runners.pageInfo" />
     </template>
   </div>

spec/frontend/runner/components/runner_filtered_search_bar_spec.js

@@ -13,6 +13,7 @@ describe('RunnerList', () => {
   const findFilteredSearch = () => wrapper.findComponent(FilteredSearch);
   const findGlFilteredSearch = () => wrapper.findComponent(GlFilteredSearch);
   const findSortOptions = () => wrapper.findAllComponents(GlDropdownItem);
+  const findActiveRunnersMessage = () => wrapper.findByTestId('active-runners-message');
 
   const mockDefaultSort = 'CREATED_DESC';
   const mockOtherSort = 'CONTACTED_DESC';
@@ -20,6 +21,7 @@ describe('RunnerList', () => {
     { type: PARAM_KEY_STATUS, value: { data: 'ACTIVE', operator: '=' } },
     { type: 'filtered-search-term', value: { data: '' } },
   ];
+  const mockActiveRunnersCount = 2;
 
   const createComponent = ({ props = {}, options = {} } = {}) => {
     wrapper = extendedWrapper(
@@ -30,6 +32,7 @@ describe('RunnerList', () => {
             filters: [],
             sort: mockDefaultSort,
           },
+          activeRunnersCount: mockActiveRunnersCount,
           ...props,
         },
         stubs: {
@@ -55,6 +58,18 @@ describe('RunnerList', () => {
     expect(findFilteredSearch().props('namespace')).toBe('runners');
   });
 
+  it('Displays an active runner count', () => {
+    expect(findActiveRunnersMessage().text()).toBe(
+      `Runners currently online: ${mockActiveRunnersCount}`,
+    );
+  });
+
+  it('Displays a large active runner count', () => {
+    createComponent({ props: { activeRunnersCount: 2000 } });
+
+    expect(findActiveRunnersMessage().text()).toBe('Runners currently online: 2,000');
+  });
+
   it('sets sorting options', () => {
     const SORT_OPTIONS_COUNT = 2;
 

spec/frontend/runner/components/runner_list_spec.js

@@ -12,7 +12,6 @@ const mockActiveRunnersCount = mockRunners.length;
 describe('RunnerList', () => {
   let wrapper;
 
-  const findActiveRunnersMessage = () => wrapper.findByTestId('active-runners-message');
   const findSkeletonLoader = () => wrapper.findComponent(GlSkeletonLoader);
   const findTable = () => wrapper.findComponent(GlTable);
   const findHeaders = () => wrapper.findAll('th');
@@ -40,18 +39,6 @@ describe('RunnerList', () => {
     wrapper.destroy();
   });
 
-  it('Displays active runner count', () => {
-    expect(findActiveRunnersMessage().text()).toBe(
-      `Runners currently online: ${mockActiveRunnersCount}`,
-    );
-  });
-
-  it('Displays a large active runner count', () => {
-    createComponent({ props: { activeRunnersCount: 2000 } });
-
-    expect(findActiveRunnersMessage().text()).toBe('Runners currently online: 2,000');
-  });
-
   it('Displays headers', () => {
     const headerLabels = findHeaders().wrappers.map((w) => w.text());