Introduce Vue UI to the runner details

This MR adds a new feature flag called "runner_detailed_view_vue_ui"
which adds an alternative Vue UI for the runner details.

As a first iteration, it only renders the title and contains no calls
to the backend. This is simply an technical iteration at this step.

app/assets/javascripts/pages/admin/runners/show/index.js

+import { initRunnerDetail } from '~/runner/runner_details';
+
+initRunnerDetail();

app/assets/javascripts/runner/runner_details/constants.js

+import { s__ } from '~/locale';
+
+export const I18N_TITLE = s__('Runners|Runner #%{runner_id}');

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

+import Vue from 'vue';
+import RunnerDetailsApp from './runner_details_app.vue';
+
+export const initRunnerDetail = (selector = '#js-runner-detail') => {
+  const el = document.querySelector(selector);
+
+  if (!el) {
+    return null;
+  }
+
+  const { runnerId } = el.dataset;
+
+  return new Vue({
+    el,
+    render(h) {
+      return h(RunnerDetailsApp, {
+        props: {
+          runnerId,
+        },
+      });
+    },
+  });
+};

app/assets/javascripts/runner/runner_details/runner_details_app.vue

+<script>
+import { I18N_TITLE } from './constants';
+
+export default {
+  i18n: {
+    I18N_TITLE,
+  },
+  props: {
+    runnerId: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+<template>
+  <h2 class="page-title">
+    {{ sprintf($options.i18n.I18N_TITLE, { runner_id: runnerId }) }}
+  </h2>
+</template>

app/views/admin/runners/show.html.haml

@@ -4,8 +4,11 @@
 - add_to_breadcrumbs _('Runners'), admin_runners_path
 - breadcrumb_title page_title
 
-%h2.page-title
-  = sprintf(s_('Runners|Runner #%{runner_id}'), {runner_id: @runner.id})
+- if Feature.enabled?(:runner_detailed_view_vue_ui, current_user, default_enabled: :yaml)
+  #js-runner-detail{ data: {runner_id: @runner.id} }
+- else
+  %h2.page-title
+    = sprintf(s_('Runners|Runner #%{runner_id}'), {runner_id: @runner.id})
 
 - if @runner.instance_type?
   .bs-callout.bs-callout-success

config/feature_flags/development/runner_detailed_view_vue_ui.yml

+---
+name: runner_detailed_view_vue_ui
+introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/57256
+rollout_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/325737
+milestone: '13.11'
+type: development
+group: group::runner
+default_enabled: false

spec/features/admin/admin_runners_spec.rb

@@ -292,7 +292,7 @@ RSpec.describe "Admin Runners" do
       end
     end
 
-    describe 'runner page title' do
+    describe 'runner page title', :js do
       it 'contains the runner id' do
         expect(find('.page-title')).to have_content("Runner ##{runner.id}")
       end

spec/frontend/runner/runner_detail/runner_detail_app_spec.js

+import { shallowMount } from '@vue/test-utils';
+import RunnerDetailsApp from '~/runner/runner_details/runner_details_app.vue';
+
+const mockRunnerId = '55';
+
+describe('RunnerDetailsApp', () => {
+  let wrapper;
+
+  const createComponent = (props) => {
+    wrapper = shallowMount(RunnerDetailsApp, {
+      propsData: {
+        runnerId: mockRunnerId,
+        ...props,
+      },
+    });
+  };
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('displays the runner id', () => {
+    expect(wrapper.text()).toContain('Runner #55');
+  });
+});