Fix filtering of "Not connected" runners

This change (hack) replaces the space with a special space char in the
"Not connected" option that filters runners.

This change is needed because the version with quotes ("") does not
locate the right value in the options list to pass to the filters
and the URL.

Changelog: fixed

app/assets/javascripts/runner/components/search_tokens/status_token_config.js

@@ -10,23 +10,29 @@ import {
   PARAM_KEY_STATUS,
 } from '../../constants';
 
+const options = [
+  { value: STATUS_ACTIVE, title: s__('Runners|Active') },
+  { value: STATUS_PAUSED, title: s__('Runners|Paused') },
+  { value: STATUS_ONLINE, title: s__('Runners|Online') },
+  { value: STATUS_OFFLINE, title: s__('Runners|Offline') },
+  { value: STATUS_NOT_CONNECTED, title: s__('Runners|Not connected') },
+];
+
 export const statusTokenConfig = {
   icon: 'status',
   title: __('Status'),
   type: PARAM_KEY_STATUS,
   token: BaseToken,
   unique: true,
-  options: [
-    { value: STATUS_ACTIVE, title: s__('Runners|Active') },
-    { value: STATUS_PAUSED, title: s__('Runners|Paused') },
-    { value: STATUS_ONLINE, title: s__('Runners|Online') },
-    { value: STATUS_OFFLINE, title: s__('Runners|Offline') },
-
-    // Added extra quotes in this title to avoid splitting this value:
+  options: options.map(({ value, title }) => ({
+    value,
+    // Replace whitespace with a special character to avoid
+    // splitting this value.
+    // Replacing in each option, as translations may also
+    // contain spaces!
+    // see: https://gitlab.com/gitlab-org/gitlab/-/issues/344142
     // see: https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1438
-    { value: STATUS_NOT_CONNECTED, title: `"${s__('Runners|Not connected')}"` },
-  ],
-  // TODO In principle we could support more complex search rules,
-  // this can be added to a separate issue.
+    title: title.replace(' ', '\u00a0'),
+  })),
   operators: OPERATOR_IS_ONLY,
 };

spec/features/admin/admin_runners_spec.rb

@@ -137,6 +137,19 @@ RSpec.describe "Admin Runners" do
           expect(page).not_to have_content 'runner-b-1'
           expect(page).not_to have_content 'runner-a-2'
         end
+
+        it 'shows correct runner when type is selected and search term is entered' do
+          create(:ci_runner, :instance, description: 'runner-connected', contacted_at: Time.now)
+          create(:ci_runner, :instance, description: 'runner-not-connected', contacted_at: nil)
+
+          visit admin_runners_path
+
+          # use the string "Not" to avoid using space and trigger an early selection
+          input_filtered_search_filter_is_only('Status', 'Not')
+
+          expect(page).not_to have_content 'runner-connected'
+          expect(page).to have_content 'runner-not-connected'
+        end
       end
 
       describe 'filter by type' do