1 files changed, 22 insertions, 7 deletions

diff --git a/app/assets/javascripts/ci/runner/admin_runners/admin_runners_app.vue b/app/assets/javascripts/ci/runner/admin_runners/admin_runners_app.vue
index 3bd20dff9cc..ce2c511ddd4 100644
--- a/app/assets/javascripts/ci/runner/admin_runners/admin_runners_app.vue
+++ b/app/assets/javascripts/ci/runner/admin_runners/admin_runners_app.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlLink } from '@gitlab/ui';
+import { GlButton, GlLink } from '@gitlab/ui';
 import { createAlert } from '~/flash';
 import { updateHistory } from '~/lib/utils/url_utility';
 import { fetchPolicies } from '~/lib/graphql';
@@ -33,12 +33,14 @@ import {
   INSTANCE_TYPE,
   I18N_FETCH_ERROR,
   FILTER_CSS_CLASSES,
+  JOBS_ROUTE_PATH,
 } from '../constants';
 import { captureException } from '../sentry_utils';
 
 export default {
   name: 'AdminRunnersApp',
   components: {
+    GlButton,
     GlLink,
     RegistrationDropdown,
     RunnerFilteredSearchBar,
@@ -54,6 +56,10 @@ export default {
   mixins: [glFeatureFlagMixin()],
   inject: ['emptyStateSvgPath', 'emptyStateFilteredSvgPath'],
   props: {
+    newRunnerPath: {
+      type: String,
+      required: true,
+    },
     registrationToken: {
       type: String,
       required: true,
@@ -121,6 +127,10 @@ export default {
     isSearchFiltered() {
       return isSearchFiltered(this.search);
     },
+    shouldShowCreateRunnerWorkflow() {
+      // create_runner_workflow feature flag
+      return this.glFeatures.createRunnerWorkflow;
+    },
   },
   watch: {
     search: {
@@ -141,7 +151,7 @@ export default {
   methods: {
     jobsUrl(runner) {
       const url = new URL(runner.adminUrl);
-      url.hash = '#/jobs';
+      url.hash = `#${JOBS_ROUTE_PATH}`;
 
       return url.href;
     },
@@ -183,7 +193,11 @@ export default {
         nav-class="gl-border-none!"
       />
 
+      <gl-button v-if="shouldShowCreateRunnerWorkflow" :href="newRunnerPath" variant="confirm">
+        {{ s__('Runners|New instance runner') }}
+      </gl-button>
       <registration-dropdown
+        v-else
         class="gl-w-full gl-sm-w-auto gl-mr-auto"
         :registration-token="registrationToken"
         :type="$options.INSTANCE_TYPE"
@@ -204,6 +218,7 @@ export default {
       v-if="noRunnersFound"
       :registration-token="registrationToken"
       :is-search-filtered="isSearchFiltered"
+      :new-runner-path="newRunnerPath"
       :svg-path="emptyStateSvgPath"
       :filtered-svg-path="emptyStateFilteredSvgPath"
     />
@@ -214,17 +229,17 @@ export default {
         :checkable="true"
         @deleted="onDeleted"
       >
-        <template #runner-name="{ runner }">
-          <gl-link :href="runner.adminUrl">
-            <runner-name :runner="runner" />
-          </gl-link>
-        </template>
         <template #runner-job-status-badge="{ runner }">
           <runner-job-status-badge
             :href="jobsUrl(runner)"
             :job-status="runner.jobExecutionStatus"
           />
         </template>
+        <template #runner-name="{ runner }">
+          <gl-link :href="runner.adminUrl">
+            <runner-name :runner="runner" />
+          </gl-link>
+        </template>
         <template #runner-actions-cell="{ runner }">
           <runner-actions-cell
             :runner="runner"