Add latest changes from gitlab-org/gitlab@15-1-stable-eev15.1.0-rc42

9 files changed, 131 insertions, 52 deletions

diff --git a/app/assets/javascripts/runner/components/cells/runner_status_cell.vue b/app/assets/javascripts/runner/components/cells/runner_status_cell.vue
index 93f86ae2a2c..a48db9f8ac8 100644
--- a/app/assets/javascripts/runner/components/cells/runner_status_cell.vue
+++ b/app/assets/javascripts/runner/components/cells/runner_status_cell.vue
@@ -7,6 +7,8 @@ import RunnerPausedBadge from '../runner_paused_badge.vue';
 export default {
   components: {
     RunnerStatusBadge,
+    RunnerUpgradeStatusBadge: () =>
+      import('ee_component/runner/components/runner_upgrade_status_badge.vue'),
     RunnerPausedBadge,
   },
   directives: {
@@ -33,6 +35,11 @@ export default {
       size="sm"
       class="gl-display-inline-block gl-max-w-full gl-text-truncate"
     />
+    <runner-upgrade-status-badge
+      :runner="runner"
+      size="sm"
+      class="gl-display-inline-block gl-max-w-full gl-text-truncate"
+    />
     <runner-paused-badge
       v-if="paused"
       size="sm"
diff --git a/app/assets/javascripts/runner/components/registration/registration_dropdown.vue b/app/assets/javascripts/runner/components/registration/registration_dropdown.vue
index bb2a8ddf151..212ad5fa5a0 100644
--- a/app/assets/javascripts/runner/components/registration/registration_dropdown.vue
+++ b/app/assets/javascripts/runner/components/registration/registration_dropdown.vue
@@ -1,11 +1,5 @@
 <script>
-import {
-  GlFormGroup,
-  GlDropdown,
-  GlDropdownForm,
-  GlDropdownItem,
-  GlDropdownDivider,
-} from '@gitlab/ui';
+import { GlDropdown, GlDropdownForm, GlDropdownItem, GlDropdownDivider } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import RunnerInstructionsModal from '~/vue_shared/components/runner_instructions/runner_instructions_modal.vue';
 import { INSTANCE_TYPE, GROUP_TYPE, PROJECT_TYPE } from '../../constants';
@@ -17,10 +11,8 @@ export default {
     showInstallationInstructions: s__(
       'Runners|Show runner installation and registration instructions',
     ),
-    registrationToken: s__('Runners|Registration token'),
   },
   components: {
-    GlFormGroup,
     GlDropdown,
     GlDropdownForm,
     GlDropdownItem,
@@ -45,7 +37,6 @@ export default {
   data() {
     return {
       currentRegistrationToken: this.registrationToken,
-      instructionsModalOpened: false,
     };
   },
   computed: {
@@ -64,15 +55,7 @@ export default {
   },
   methods: {
     onShowInstructionsClick() {
-      // Rendering the modal on demand, to avoid
-      // loading instructions prematurely from API.
-      this.instructionsModalOpened = true;
-
-      this.$nextTick(() => {
-        // $refs.runnerInstructionsModal is defined in
-        // the tick after the modal is rendered
-        this.$refs.runnerInstructionsModal.show();
-      });
+      this.$refs.runnerInstructionsModal.show();
     },
     onTokenReset(token) {
       this.currentRegistrationToken = token;
@@ -94,7 +77,6 @@ export default {
     <gl-dropdown-item @click.capture.native.stop="onShowInstructionsClick">
       {{ $options.i18n.showInstallationInstructions }}
       <runner-instructions-modal
-        v-if="instructionsModalOpened"
         ref="runnerInstructionsModal"
         :registration-token="currentRegistrationToken"
         data-testid="runner-instructions-modal"
@@ -102,9 +84,7 @@ export default {
     </gl-dropdown-item>
     <gl-dropdown-divider />
     <gl-dropdown-form class="gl-p-4!">
-      <gl-form-group class="gl-mb-0" :label="$options.i18n.registrationToken">
-        <registration-token :value="currentRegistrationToken" />
-      </gl-form-group>
+      <registration-token input-id="token-value" :value="currentRegistrationToken" />
     </gl-dropdown-form>
     <gl-dropdown-divider />
     <registration-token-reset-dropdown-item :type="type" @tokenReset="onTokenReset" />
diff --git a/app/assets/javascripts/runner/components/registration/registration_token.vue b/app/assets/javascripts/runner/components/registration/registration_token.vue
index 68c6429a056..6b4e6a929b7 100644
--- a/app/assets/javascripts/runner/components/registration/registration_token.vue
+++ b/app/assets/javascripts/runner/components/registration/registration_token.vue
@@ -6,13 +6,27 @@ export default {
   components: {
     InputCopyToggleVisibility,
   },
+  i18n: {
+    registrationToken: s__('Runners|Registration token'),
+  },
   props: {
+    inputId: {
+      type: String,
+      required: true,
+    },
     value: {
       type: String,
       required: false,
       default: '',
     },
   },
+  computed: {
+    formInputGroupProps() {
+      return {
+        id: this.inputId,
+      };
+    },
+  },
   methods: {
     onCopy() {
       // value already in the clipboard, simply notify the user
@@ -26,8 +40,10 @@ export default {
   <input-copy-toggle-visibility
     class="gl-m-0"
     :value="value"
-    data-testid="token-value"
+    :label="$options.i18n.registrationToken"
+    :label-for="inputId"
     :copy-button-title="$options.I18N_COPY_BUTTON_TITLE"
+    :form-input-group-props="formInputGroupProps"
     @copy="onCopy"
   />
 </template>
diff --git a/app/assets/javascripts/runner/components/runner_details.vue b/app/assets/javascripts/runner/components/runner_details.vue
index 3734f436034..75ddec6c716 100644
--- a/app/assets/javascripts/runner/components/runner_details.vue
+++ b/app/assets/javascripts/runner/components/runner_details.vue
@@ -1,26 +1,24 @@
 <script>
-import { GlBadge, GlTabs, GlTab, GlIntersperse } from '@gitlab/ui';
+import { GlTabs, GlTab, GlIntersperse } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
 import { timeIntervalInWords } from '~/lib/utils/datetime_utility';
 import { ACCESS_LEVEL_REF_PROTECTED, GROUP_TYPE, PROJECT_TYPE } from '../constants';
-import { formatJobCount } from '../utils';
 import RunnerDetail from './runner_detail.vue';
 import RunnerGroups from './runner_groups.vue';
 import RunnerProjects from './runner_projects.vue';
-import RunnerJobs from './runner_jobs.vue';
 import RunnerTags from './runner_tags.vue';
 
 export default {
   components: {
-    GlBadge,
     GlTabs,
     GlTab,
     GlIntersperse,
     RunnerDetail,
+    RunnerMaintenanceNoteDetail: () =>
+      import('ee_component/runner/components/runner_maintenance_note_detail.vue'),
     RunnerGroups,
     RunnerProjects,
-    RunnerJobs,
     RunnerTags,
     TimeAgo,
   },
@@ -57,9 +55,6 @@ export default {
     isProjectRunner() {
       return this.runner?.runnerType === PROJECT_TYPE;
     },
-    jobCount() {
-      return formatJobCount(this.runner?.jobCount);
-    },
   },
   ACCESS_LEVEL_REF_PROTECTED,
 };
@@ -106,6 +101,11 @@ export default {
                 />
               </template>
             </runner-detail>
+
+            <runner-maintenance-note-detail
+              class="gl-pt-4 gl-border-t-gray-100 gl-border-t-1 gl-border-t-solid"
+              :value="runner.maintenanceNoteHtml"
+            />
           </dl>
         </div>
 
@@ -113,15 +113,6 @@ export default {
         <runner-projects v-if="isProjectRunner" :runner="runner" />
       </template>
     </gl-tab>
-    <gl-tab>
-      <template #title>
-        {{ s__('Runners|Jobs') }}
-        <gl-badge v-if="jobCount" data-testid="job-count-badge" class="gl-ml-1" size="sm">
-          {{ jobCount }}
-        </gl-badge>
-      </template>
-
-      <runner-jobs v-if="runner" :runner="runner" />
-    </gl-tab>
+    <slot name="jobs-tab"></slot>
   </gl-tabs>
 </template>
diff --git a/app/assets/javascripts/runner/components/runner_jobs.vue b/app/assets/javascripts/runner/components/runner_jobs.vue
index 4eb1312b204..57afdc4b9be 100644
--- a/app/assets/javascripts/runner/components/runner_jobs.vue
+++ b/app/assets/javascripts/runner/components/runner_jobs.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlDeprecatedSkeletonLoading as GlSkeletonLoading } from '@gitlab/ui';
+import { GlSkeletonLoader } from '@gitlab/ui';
 import { createAlert } from '~/flash';
 import runnerJobsQuery from '../graphql/show/runner_jobs.query.graphql';
 import { I18N_FETCH_ERROR, I18N_NO_JOBS_FOUND, RUNNER_DETAILS_JOBS_PAGE_SIZE } from '../constants';
@@ -11,7 +11,7 @@ import RunnerPagination from './runner_pagination.vue';
 export default {
   name: 'RunnerJobs',
   components: {
-    GlSkeletonLoading,
+    GlSkeletonLoader,
     RunnerJobsTable,
     RunnerPagination,
   },
@@ -68,7 +68,9 @@ export default {
 
 <template>
   <div class="gl-pt-3">
-    <gl-skeleton-loading v-if="loading" class="gl-py-5" />
+    <div v-if="loading" class="gl-py-5">
+      <gl-skeleton-loader />
+    </div>
     <runner-jobs-table v-else-if="jobs.items.length" :jobs="jobs.items" />
     <p v-else>{{ $options.I18N_NO_JOBS_FOUND }}</p>
 
diff --git a/app/assets/javascripts/runner/components/runner_list.vue b/app/assets/javascripts/runner/components/runner_list.vue
index dcfd4b84dd2..f1f99c728c5 100644
--- a/app/assets/javascripts/runner/components/runner_list.vue
+++ b/app/assets/javascripts/runner/components/runner_list.vue
@@ -12,7 +12,7 @@ import RunnerStatusCell from './cells/runner_status_cell.vue';
 import RunnerTags from './runner_tags.vue';
 
 const defaultFields = [
-  tableField({ key: 'status', label: s__('Runners|Status') }),
+  tableField({ key: 'status', label: s__('Runners|Status'), thClasses: ['gl-w-15p'] }),
   tableField({ key: 'summary', label: s__('Runners|Runner'), thClasses: ['gl-lg-w-25p'] }),
   tableField({ key: 'version', label: __('Version') }),
   tableField({ key: 'jobCount', label: __('Jobs') }),
diff --git a/app/assets/javascripts/runner/components/runner_list_empty_state.vue b/app/assets/javascripts/runner/components/runner_list_empty_state.vue
new file mode 100644
index 00000000000..ab9cde6a401
--- /dev/null
+++ b/app/assets/javascripts/runner/components/runner_list_empty_state.vue
@@ -0,0 +1,75 @@
+<script>
+import { GlEmptyState, GlLink, GlSprintf, GlModalDirective } from '@gitlab/ui';
+import RunnerInstructionsModal from '~/vue_shared/components/runner_instructions/runner_instructions_modal.vue';
+
+export default {
+  components: {
+    GlEmptyState,
+    GlLink,
+    GlSprintf,
+    RunnerInstructionsModal,
+  },
+  directives: {
+    GlModal: GlModalDirective,
+  },
+  props: {
+    isSearchFiltered: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    svgPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    filteredSvgPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    registrationToken: {
+      type: String,
+      required: false,
+      default: null,
+    },
+  },
+  modalId: 'runners-empty-state-instructions-modal',
+  svgHeight: 145,
+};
+</script>
+
+<template>
+  <gl-empty-state
+    v-if="isSearchFiltered"
+    :title="s__('Runners|No results found')"
+    :svg-path="filteredSvgPath"
+    :svg-height="$options.svgHeight"
+    :description="s__('Runners|Edit your search and try again')"
+  />
+  <gl-empty-state
+    v-else
+    :title="s__('Runners|Get started with runners')"
+    :svg-path="svgPath"
+    :svg-height="$options.svgHeight"
+  >
+    <template #description>
+      <gl-sprintf
+        :message="
+          s__(
+            'Runners|Runners are the agents that run your CI/CD jobs. Follow the %{linkStart}installation and registration instructions%{linkEnd} to set up a runner.',
+          )
+        "
+      >
+        <template #link="{ content }">
+          <gl-link v-gl-modal="$options.modalId">{{ content }}</gl-link>
+        </template>
+      </gl-sprintf>
+
+      <runner-instructions-modal
+        :modal-id="$options.modalId"
+        :registration-token="registrationToken"
+      />
+    </template>
+  </gl-empty-state>
+</template>
diff --git a/app/assets/javascripts/runner/components/runner_projects.vue b/app/assets/javascripts/runner/components/runner_projects.vue
index daca718e2b5..c0c0c14e91e 100644
--- a/app/assets/javascripts/runner/components/runner_projects.vue
+++ b/app/assets/javascripts/runner/components/runner_projects.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlDeprecatedSkeletonLoading as GlSkeletonLoading } from '@gitlab/ui';
+import { GlSkeletonLoader } from '@gitlab/ui';
 import { sprintf, formatNumber } from '~/locale';
 import { createAlert } from '~/flash';
 import runnerProjectsQuery from '../graphql/show/runner_projects.query.graphql';
@@ -17,7 +17,7 @@ import RunnerPagination from './runner_pagination.vue';
 export default {
   name: 'RunnerProjects',
   components: {
-    GlSkeletonLoading,
+    GlSkeletonLoader,
     RunnerAssignedItem,
     RunnerPagination,
   },
@@ -86,7 +86,9 @@ export default {
       {{ heading }}
     </h3>
 
-    <gl-skeleton-loading v-if="loading" class="gl-py-5" />
+    <div v-if="loading" class="gl-py-5">
+      <gl-skeleton-loader />
+    </div>
     <template v-else-if="projects.items.length">
       <runner-assigned-item
         v-for="(project, i) in projects.items"
diff --git a/app/assets/javascripts/runner/components/runner_update_form.vue b/app/assets/javascripts/runner/components/runner_update_form.vue
index 56c9007a781..c613e2d2467 100644
--- a/app/assets/javascripts/runner/components/runner_update_form.vue
+++ b/app/assets/javascripts/runner/components/runner_update_form.vue
@@ -31,6 +31,8 @@ export default {
     GlFormGroup,
     GlFormInputGroup,
     GlSkeletonLoader,
+    RunnerMaintenanceNoteField: () =>
+      import('ee_component/runner/components/runner_maintenance_note_field.vue'),
     RunnerUpdateCostFactorFields: () =>
       import('ee_component/runner/components/runner_update_cost_factor_fields.vue'),
   },
@@ -115,9 +117,13 @@ export default {
     <h4 class="gl-font-lg gl-my-5">{{ s__('Runners|Details') }}</h4>
 
     <gl-skeleton-loader v-if="loading" />
-    <gl-form-group v-else :label="__('Description')" data-testid="runner-field-description">
-      <gl-form-input-group v-model="model.description" />
-    </gl-form-group>
+
+    <template v-else>
+      <gl-form-group :label="__('Description')" data-testid="runner-field-description">
+        <gl-form-input-group v-model="model.description" />
+      </gl-form-group>
+      <runner-maintenance-note-field v-model="model.maintenanceNote" />
+    </template>
 
     <hr />