Add runner read only admin view

This change adds a new read only admin view for runners.

The view is empty and behind a feature flag, no user-facing changes
done.

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

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

app/assets/javascripts/runner/runner_details/runner_details_app.vue → app/assets/javascripts/runner/admin_runner_edit/admin_runner_edit_app.vue

@@ -9,7 +9,7 @@ import getRunnerQuery from '../graphql/get_runner.query.graphql';
 import { captureException } from '../sentry_utils';
 
 export default {
-  name: 'RunnerDetailsApp',
+  name: 'AdminRunnerEditApp',
   components: {
     RunnerHeader,
     RunnerUpdateForm,

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

 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import createDefaultClient from '~/lib/graphql';
-import RunnerDetailsApp from './runner_details_app.vue';
+import AdminRunnerEditApp from './admin_runner_edit_app.vue';
 
 Vue.use(VueApollo);
 
-export const initRunnerDetail = (selector = '#js-runner-details') => {
+export const initAdminRunnerEdit = (selector = '#js-admin-runner-edit') => {
   const el = document.querySelector(selector);
 
   if (!el) {
@@ -22,7 +22,7 @@ export const initRunnerDetail = (selector = '#js-runner-details') => {
     el,
     apolloProvider,
     render(h) {
-      return h(RunnerDetailsApp, {
+      return h(AdminRunnerEditApp, {
         props: {
           runnerId,
         },

app/assets/javascripts/runner/components/cells/runner_actions_cell.vue

@@ -162,9 +162,9 @@ export default {
       See https://gitlab.com/gitlab-org/gitlab/-/issues/334802
     -->
     <gl-button
-      v-if="canUpdate && runner.adminUrl"
+      v-if="canUpdate && runner.editAdminUrl"
       v-gl-tooltip.hover.viewport="$options.I18N_EDIT"
-      :href="runner.adminUrl"
+      :href="runner.editAdminUrl"
       :aria-label="$options.I18N_EDIT"
       icon="pencil"
       data-testid="edit-runner"

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

@@ -10,7 +10,7 @@ import {
 import {
   modelToUpdateMutationVariables,
   runnerToModel,
-} from 'ee_else_ce/runner/runner_details/runner_update_form_utils';
+} from 'ee_else_ce/runner/runner_update_form_utils';
 import { createAlert, VARIANT_SUCCESS } from '~/flash';
 import { __ } from '~/locale';
 import { captureException } from '~/runner/sentry_utils';

app/assets/javascripts/runner/graphql/get_runners.query.graphql

@@ -26,6 +26,7 @@ query getRunners(
     nodes {
       ...RunnerNode
       adminUrl
+      editAdminUrl
     }
     pageInfo {
       ...PageInfo

app/controllers/admin/runners_controller.rb

@@ -15,7 +15,7 @@ class Admin::RunnersController < Admin::ApplicationController
     # future iterations. For now, this route will have a
     # redirect until this new view is developed. See more:
     # https://gitlab.com/gitlab-org/gitlab/-/issues/347856
-    redirect_to edit_admin_runner_path(runner)
+    redirect_to edit_admin_runner_path(runner) unless Feature.enabled?(:runner_read_only_admin_view, default_enabled: :yaml)
   end
 
   def edit

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

 - add_page_specific_style 'page_bundles/ci_status'
 
-- title = "##{@runner.id} (#{@runner.short_sha})"
-- breadcrumb_title title
-- page_title title
-- add_to_breadcrumbs _('Runners'), admin_runners_path
+- runner_name = "##{@runner.id} (#{@runner.short_sha})"
+- if Feature.enabled?(:runner_read_only_admin_view)
+  - breadcrumb_title _('Edit')
+  - page_title _('Edit'), runner_name
+  - add_to_breadcrumbs _('Runners'), admin_runners_path
+  - add_to_breadcrumbs runner_name, admin_runner_path(@runner)
+- else
+  - breadcrumb_title runner_name
+  - page_title runner_name
 
-#js-runner-details{ data: {runner_id: @runner.id} }
+#js-admin-runner-edit{ data: {runner_id: @runner.id} }
 
 .row
   .col-md-6

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

+- add_page_specific_style 'page_bundles/ci_status'
+
+- title = "##{@runner.id} (#{@runner.short_sha})"
+- breadcrumb_title title
+- page_title title
+- add_to_breadcrumbs _('Runners'), admin_runners_path
+
+-# Empty view in development behind feature flag runner_read_only_admin_view

config/feature_flags/development/runner_read_only_admin_view.yml

+---
+name: runner_read_only_admin_view
+introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/77682
+rollout_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/350164
+milestone: '14.7'
+type: development
+group: group::runner
+default_enabled: false

ee/app/assets/javascripts/runner/runner_details/runner_update_form_utils.js → ee/app/assets/javascripts/runner/runner_update_form_utils.js

 import {
   modelToUpdateMutationVariables as ceModelToUpdateMutationVariables,
   runnerToModel as ceRunnerToModel,
-} from '~/runner/runner_details/runner_update_form_utils';
+} from '~/runner/runner_update_form_utils';
 
 export const runnerToModel = (runner) => {
   return {

ee/spec/frontend/runner/runner_details/runner_update_form_utils_spec.js

-import {
-  modelToUpdateMutationVariables,
-  runnerToModel,
-} from 'ee/runner/runner_details/runner_update_form_utils';
+import { modelToUpdateMutationVariables, runnerToModel } from 'ee/runner/runner_update_form_utils';
 
 const mockRunnerId = 'gid://gitlab/Ci::Runner/1';
 const mockPrivateFactor = 1;
 const mockPublicFactor = 0.5;
 
-describe('ee/runner/runner_details/runner_update_form_utils', () => {
+describe('ee/runner/runner_update_form_utils', () => {
   describe('runnerToModel', () => {
     it('collects project minutes factor', () => {
       expect(

spec/controllers/admin/runners_controller_spec.rb

@@ -31,7 +31,16 @@ RSpec.describe Admin::RunnersController do
       create(:ci_build, runner: runner, project: project)
     end
 
-    it 'redirects to the runner edit page' do
+    it 'shows a runner show page' do
+      get :show, params: { id: runner.id }
+
+      expect(response).to have_gitlab_http_status(:ok)
+      expect(response).to render_template(:show)
+    end
+
+    it 'when runner_read_only_admin_view is off, redirects to the runner edit page' do
+      stub_feature_flags(runner_read_only_admin_view: false)
+
       get :show, params: { id: runner.id }
 
       expect(response).to have_gitlab_http_status(:redirect)

spec/features/admin/admin_runners_spec.rb

@@ -463,7 +463,8 @@ RSpec.describe "Admin Runners" do
     describe 'runner page breadcrumbs' do
       it 'contains the current runner id and token' do
         page.within '[data-testid="breadcrumb-links"]' do
-          expect(page.find('h2')).to have_content("##{runner.id} (#{runner.short_sha})")
+          expect(page).to have_link("##{runner.id} (#{runner.short_sha})")
+          expect(page.find('h2')).to have_content("Edit")
         end
       end
     end

spec/frontend/runner/runner_detail/runner_details_app_spec.js → spec/frontend/runner/admin_runner_edit/admin_runner_edit_app_spec.js

@@ -7,7 +7,7 @@ import { createAlert } from '~/flash';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import RunnerHeader from '~/runner/components/runner_header.vue';
 import getRunnerQuery from '~/runner/graphql/get_runner.query.graphql';
-import RunnerDetailsApp from '~/runner/runner_details/runner_details_app.vue';
+import AdminRunnerEditApp from '~//runner/admin_runner_edit/admin_runner_edit_app.vue';
 import { captureException } from '~/runner/sentry_utils';
 
 import { runnerData } from '../mock_data';
@@ -21,14 +21,14 @@ const mockRunnerId = `${getIdFromGraphQLId(mockRunnerGraphqlId)}`;
 const localVue = createLocalVue();
 localVue.use(VueApollo);
 
-describe('RunnerDetailsApp', () => {
+describe('AdminRunnerEditApp', () => {
   let wrapper;
   let mockRunnerQuery;
 
   const findRunnerHeader = () => wrapper.findComponent(RunnerHeader);
 
   const createComponentWithApollo = ({ props = {}, mountFn = shallowMount } = {}) => {
-    wrapper = mountFn(RunnerDetailsApp, {
+    wrapper = mountFn(AdminRunnerEditApp, {
       localVue,
       apolloProvider: createMockApollo([[getRunnerQuery, mockRunnerQuery]]),
       propsData: {
@@ -77,7 +77,7 @@ describe('RunnerDetailsApp', () => {
     it('error is reported to sentry', () => {
       expect(captureException).toHaveBeenCalledWith({
         error: new Error('Network error: Error!'),
-        component: 'RunnerDetailsApp',
+        component: 'AdminRunnerEditApp',
       });
     });
 

spec/frontend/runner/components/cells/runner_actions_cell_spec.js

@@ -47,7 +47,7 @@ describe('RunnerTypeCell', () => {
           runner: {
             id: mockRunner.id,
             shortSha: mockRunner.shortSha,
-            adminUrl: mockRunner.adminUrl,
+            editAdminUrl: mockRunner.editAdminUrl,
             userPermissions: mockRunner.userPermissions,
             active: mockRunner.active,
             ...runner,
@@ -103,7 +103,7 @@ describe('RunnerTypeCell', () => {
     it('Displays the runner edit link with the correct href', () => {
       createComponent();
 
-      expect(findEditBtn().attributes('href')).toBe(mockRunner.adminUrl);
+      expect(findEditBtn().attributes('href')).toBe(mockRunner.editAdminUrl);
     });
 
     it('Does not render the runner edit link when user cannot update', () => {
@@ -117,9 +117,9 @@ describe('RunnerTypeCell', () => {
       expect(findEditBtn().exists()).toBe(false);
     });
 
-    it('Does not render the runner edit link when adminUrl is not provided', () => {
+    it('Does not render the runner edit link when editAdminUrl is not provided', () => {
       createComponent({
-        adminUrl: null,
+        editAdminUrl: null,
       });
 
       expect(findEditBtn().exists()).toBe(false);

spec/frontend/runner/runner_detail/runner_update_form_utils_spec.js → spec/frontend/runner/runner_update_form_utils_spec.js

 import { ACCESS_LEVEL_NOT_PROTECTED } from '~/runner/constants';
-import {
-  modelToUpdateMutationVariables,
-  runnerToModel,
-} from '~/runner/runner_details/runner_update_form_utils';
+import { modelToUpdateMutationVariables, runnerToModel } from '~/runner/runner_update_form_utils';
 
 const mockId = 'gid://gitlab/Ci::Runner/1';
 const mockDescription = 'Runner Desc.';
@@ -23,7 +20,7 @@ const mockModel = {
   tagList: 'tag-1, tag-2',
 };
 
-describe('~/runner/runner_details/runner_update_form_utils', () => {
+describe('~/runner/runner_update_form_utils', () => {
   describe('runnerToModel', () => {
     it('collects all model data', () => {
       expect(runnerToModel(mockRunner)).toEqual(mockModel);