Commit 584642fb authored by Miguel Rincon's avatar Miguel Rincon

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.
parent c624b1e0
import { initRunnerDetail } from '~/runner/runner_details';
initRunnerDetail();
import { s__ } from '~/locale';
export const I18N_TITLE = s__('Runners|Runner #%{runner_id}');
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,
},
});
},
});
};
<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>
......@@ -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
......
---
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
......@@ -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
......
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');
});
});
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment