Add latest changes from gitlab-org/gitlab@master

3 files changed, 207 insertions, 0 deletions

diff --git a/app/assets/javascripts/admin/application_settings/runner_token_expiration/components/expiration_interval_description.vue b/app/assets/javascripts/admin/application_settings/runner_token_expiration/components/expiration_interval_description.vue
new file mode 100644
index 00000000000..2f74b44625f
--- /dev/null
+++ b/app/assets/javascripts/admin/application_settings/runner_token_expiration/components/expiration_interval_description.vue
@@ -0,0 +1,52 @@
+<script>
+import { GlLink, GlSprintf } from '@gitlab/ui';
+import { helpPagePath } from '~/helpers/help_page_helper';
+import { s__ } from '~/locale';
+
+export default {
+  components: {
+    GlLink,
+    GlSprintf,
+  },
+  props: {
+    message: {
+      type: String,
+      required: true,
+    },
+  },
+  i18n: {
+    fieldHelpText: s__(
+      'AdminSettings|If no unit is written, it defaults to seconds. For example, these are all equivalent: %{oneDayInSeconds}, %{oneDayInHoursHumanReadable}, or %{oneDayHumanReadable}. Minimum value is two hours. %{linkStart}Learn more.%{linkEnd}',
+    ),
+  },
+  computed: {
+    helpUrl() {
+      return helpPagePath('ci/runners/configure_runners', {
+        anchor: 'authentication-token-security',
+      });
+    },
+  },
+};
+</script>
+<template>
+  <p>
+    {{ message }}
+    <gl-sprintf :message="$options.i18n.fieldHelpText">
+      <template #oneDayInSeconds>
+        <!-- eslint-disable-next-line @gitlab/vue-require-i18n-strings -->
+        <code>86400</code>
+      </template>
+      <template #oneDayInHoursHumanReadable>
+        <!-- eslint-disable-next-line @gitlab/vue-require-i18n-strings -->
+        <code>24 hours</code>
+      </template>
+      <template #oneDayHumanReadable>
+        <!-- eslint-disable-next-line @gitlab/vue-require-i18n-strings -->
+        <code>1 day</code>
+      </template>
+      <template #link>
+        <gl-link :href="helpUrl" target="_blank">{{ __('Learn more.') }}</gl-link>
+      </template>
+    </gl-sprintf>
+  </p>
+</template>
diff --git a/app/assets/javascripts/admin/application_settings/runner_token_expiration/components/expiration_intervals.vue b/app/assets/javascripts/admin/application_settings/runner_token_expiration/components/expiration_intervals.vue
new file mode 100644
index 00000000000..371a26d2664
--- /dev/null
+++ b/app/assets/javascripts/admin/application_settings/runner_token_expiration/components/expiration_intervals.vue
@@ -0,0 +1,123 @@
+<script>
+import { GlFormGroup } from '@gitlab/ui';
+import { s__ } from '~/locale';
+import ChronicDurationInput from '~/vue_shared/components/chronic_duration_input.vue';
+import ExpirationIntervalDescription from './expiration_interval_description.vue';
+
+export default {
+  components: {
+    ChronicDurationInput,
+    ExpirationIntervalDescription,
+    GlFormGroup,
+  },
+  props: {
+    instanceRunnerExpirationInterval: {
+      type: Number,
+      required: false,
+      default: null,
+    },
+    groupRunnerExpirationInterval: {
+      type: Number,
+      required: false,
+      default: null,
+    },
+    projectRunnerExpirationInterval: {
+      type: Number,
+      required: false,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      perInput: {
+        instance: {
+          value: this.instanceRunnerExpirationInterval,
+          valid: null,
+          feedback: '',
+        },
+        group: {
+          value: this.groupRunnerExpirationInterval,
+          valid: null,
+          feedback: '',
+        },
+        project: {
+          value: this.projectRunnerExpirationInterval,
+          valid: null,
+          feedback: '',
+        },
+      },
+    };
+  },
+  methods: {
+    updateValidity(obj, event) {
+      /* eslint-disable no-param-reassign */
+      obj.valid = event.valid;
+      obj.feedback = event.feedback;
+      /* eslint-enable no-param-reassign */
+    },
+  },
+  i18n: {
+    instanceRunnerTitle: s__('AdminSettings|Instance runners expiration'),
+    instanceRunnerDescription: s__(
+      'AdminSettings|Set the expiration time of authentication tokens of newly registered instance runners. Authentication tokens are automatically reset at these intervals.',
+    ),
+    groupRunnerTitle: s__('AdminSettings|Group runners expiration'),
+    groupRunnerDescription: s__(
+      'AdminSettings|Set the expiration time of authentication tokens of newly registered group runners.',
+    ),
+    projectRunnerTitle: s__('AdminSettings|Project runners expiration'),
+    projectRunnerDescription: s__(
+      'AdminSettings|Set the expiration time of authentication tokens of newly registered project runners.',
+    ),
+  },
+};
+</script>
+<template>
+  <div>
+    <gl-form-group
+      :label="$options.i18n.instanceRunnerTitle"
+      :invalid-feedback="perInput.instance.feedback"
+      :state="perInput.instance.valid"
+    >
+      <template #description>
+        <expiration-interval-description :message="$options.i18n.instanceRunnerDescription" />
+      </template>
+      <chronic-duration-input
+        v-model="perInput.instance.value"
+        name="application_setting[runner_token_expiration_interval]"
+        :state="perInput.instance.valid"
+        @valid="updateValidity(perInput.instance, $event)"
+      />
+    </gl-form-group>
+    <gl-form-group
+      :label="$options.i18n.groupRunnerTitle"
+      :invalid-feedback="perInput.group.feedback"
+      :state="perInput.group.valid"
+    >
+      <template #description>
+        <expiration-interval-description :message="$options.i18n.groupRunnerDescription" />
+      </template>
+      <chronic-duration-input
+        v-model="perInput.group.value"
+        name="application_setting[group_runner_token_expiration_interval]"
+        :state="perInput.group.valid"
+        @valid="updateValidity(perInput.group, $event)"
+      />
+    </gl-form-group>
+    <gl-form-group
+      :label="$options.i18n.projectRunnerTitle"
+      :invalid-feedback="perInput.project.feedback"
+      :state="perInput.project.valid"
+    >
+      <template #description>
+        <expiration-interval-description :message="$options.i18n.projectRunnerDescription" />
+      </template>
+      <chronic-duration-input
+        v-model="perInput.project.value"
+        name="application_setting[project_runner_token_expiration_interval]"
+        :state="perInput.project.valid"
+        @valid="updateValidity(perInput.project, $event)"
+      />
+    </gl-form-group>
+  </div>
+</template>
diff --git a/app/assets/javascripts/admin/application_settings/runner_token_expiration/index.js b/app/assets/javascripts/admin/application_settings/runner_token_expiration/index.js
new file mode 100644
index 00000000000..79d7ff0451a
--- /dev/null
+++ b/app/assets/javascripts/admin/application_settings/runner_token_expiration/index.js
@@ -0,0 +1,32 @@
+import Vue from 'vue';
+import { parseInterval } from '~/runner/utils';
+import ExpirationIntervals from './components/expiration_intervals.vue';
+
+const initRunnerTokenExpirationIntervals = (selector = '#js-runner-token-expiration-intervals') => {
+  const el = document.querySelector(selector);
+
+  if (!el) {
+    return null;
+  }
+
+  const {
+    instanceRunnerTokenExpirationInterval,
+    groupRunnerTokenExpirationInterval,
+    projectRunnerTokenExpirationInterval,
+  } = el.dataset;
+
+  return new Vue({
+    el,
+    render(h) {
+      return h(ExpirationIntervals, {
+        props: {
+          instanceRunnerExpirationInterval: parseInterval(instanceRunnerTokenExpirationInterval),
+          groupRunnerExpirationInterval: parseInterval(groupRunnerTokenExpirationInterval),
+          projectRunnerExpirationInterval: parseInterval(projectRunnerTokenExpirationInterval),
+        },
+      });
+    },
+  });
+};
+
+export default initRunnerTokenExpirationIntervals;