Add latest changes from gitlab-org/gitlab@master

4 files changed, 64 insertions, 3 deletions

diff --git a/app/assets/javascripts/runner/components/runner_detail.vue b/app/assets/javascripts/runner/components/runner_detail.vue
index 584f77b7648..c260670b517 100644
--- a/app/assets/javascripts/runner/components/runner_detail.vue
+++ b/app/assets/javascripts/runner/components/runner_detail.vue
@@ -21,7 +21,8 @@ export default {
   props: {
     label: {
       type: String,
-      required: true,
+      default: null,
+      required: false,
     },
     value: {
       type: String,
@@ -39,7 +40,11 @@ export default {
 
 <template>
   <div class="gl-display-contents">
-    <dt class="gl-mb-5 gl-mr-6 gl-max-w-26">{{ label }}</dt>
+    <dt class="gl-mb-5 gl-mr-6 gl-max-w-26">
+      <template v-if="label || $scopedSlots.label">
+        <slot name="label">{{ label }}</slot>
+      </template>
+    </dt>
     <dd class="gl-mb-5">
       <template v-if="value || $scopedSlots.value">
         <slot name="value">{{ value }}</slot>
diff --git a/app/assets/javascripts/runner/components/runner_details.vue b/app/assets/javascripts/runner/components/runner_details.vue
index d5222f39b81..79f934764c6 100644
--- a/app/assets/javascripts/runner/components/runner_details.vue
+++ b/app/assets/javascripts/runner/components/runner_details.vue
@@ -1,7 +1,10 @@
 <script>
-import { GlIntersperse } from '@gitlab/ui';
+import { GlIntersperse, GlLink } from '@gitlab/ui';
+import { helpPagePath } from '~/helpers/help_page_helper';
 import { s__ } from '~/locale';
+import HelpPopover from '~/vue_shared/components/help_popover.vue';
 import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
+import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { timeIntervalInWords } from '~/lib/utils/datetime_utility';
 import { ACCESS_LEVEL_REF_PROTECTED, GROUP_TYPE, PROJECT_TYPE } from '../constants';
 import RunnerDetail from './runner_detail.vue';
@@ -12,6 +15,8 @@ import RunnerTags from './runner_tags.vue';
 export default {
   components: {
     GlIntersperse,
+    GlLink,
+    HelpPopover,
     RunnerDetail,
     RunnerMaintenanceNoteDetail: () =>
       import('ee_component/runner/components/runner_maintenance_note_detail.vue'),
@@ -24,6 +29,7 @@ export default {
     RunnerTags,
     TimeAgo,
   },
+  mixins: [glFeatureFlagMixin()],
   props: {
     runner: {
       type: Object,
@@ -60,6 +66,16 @@ export default {
     isProjectRunner() {
       return this.runner?.runnerType === PROJECT_TYPE;
     },
+    tokenExpirationHelpPopoverOptions() {
+      return {
+        title: s__('Runners|Runner authentication token expiration'),
+      };
+    },
+    tokenExpirationHelpUrl() {
+      return helpPagePath('ci/runners/configure_runners', {
+        anchor: 'authentication-token-security',
+      });
+    },
   },
   ACCESS_LEVEL_REF_PROTECTED,
 };
@@ -101,6 +117,34 @@ export default {
           </template>
         </runner-detail>
         <runner-detail :label="s__('Runners|Maximum job timeout')" :value="maximumTimeout" />
+        <runner-detail
+          v-if="glFeatures.enforceRunnerTokenExpiresAt"
+          :empty-value="s__('Runners|Never expires')"
+        >
+          <template #label>
+            {{ s__('Runners|Token expiry') }}
+            <help-popover :options="tokenExpirationHelpPopoverOptions">
+              <p>
+                {{
+                  s__(
+                    'Runners|Runner authentication tokens will expire based on a set interval. They will automatically rotate once expired.',
+                  )
+                }}
+              </p>
+              <p class="gl-mb-0">
+                <gl-link
+                  :href="tokenExpirationHelpUrl"
+                  target="_blank"
+                  class="gl-reset-font-size"
+                  >{{ __('Learn more') }}</gl-link
+                >
+              </p>
+            </help-popover>
+          </template>
+          <template v-if="runner.tokenExpiresAt" #value>
+            <time-ago :time="runner.tokenExpiresAt" />
+          </template>
+        </runner-detail>
         <runner-detail :label="s__('Runners|Tags')">
           <template v-if="tagList.length" #value>
             <runner-tags class="gl-vertical-align-middle" :tag-list="tagList" size="sm" />
diff --git a/app/assets/javascripts/runner/graphql/show/runner_details_shared.fragment.graphql b/app/assets/javascripts/runner/graphql/show/runner_details_shared.fragment.graphql
index 499c0156770..b5689ff7687 100644
--- a/app/assets/javascripts/runner/graphql/show/runner_details_shared.fragment.graphql
+++ b/app/assets/javascripts/runner/graphql/show/runner_details_shared.fragment.graphql
@@ -17,6 +17,7 @@ fragment RunnerDetailsShared on CiRunner {
   createdAt
   status(legacyMode: null)
   contactedAt
+  tokenExpiresAt
   version
   editAdminUrl
   userPermissions {
diff --git a/app/assets/javascripts/runner/utils.js b/app/assets/javascripts/runner/utils.js
index cb2917a92fd..1ca0a9e86b5 100644
--- a/app/assets/javascripts/runner/utils.js
+++ b/app/assets/javascripts/runner/utils.js
@@ -70,3 +70,14 @@ export const getPaginationVariables = (pagination, pageSize = 10) => {
   // Get the first N items
   return { first: pageSize };
 };
+
+/**
+ * Turns a server-provided interval integer represented as a string into an
+ * integer that the frontend can use.
+ *
+ * @param {String} interval - String to convert
+ * @returns Parsed integer
+ */
+export const parseInterval = (interval) => {
+  return typeof interval === 'string' ? parseInt(interval, 10) : null;
+};