Add latest changes from gitlab-org/gitlab@14-9-stable-eev14.9.0-rc42

2 files changed, 33 insertions, 11 deletions

diff --git a/app/assets/javascripts/access_tokens/components/expires_at_field.vue b/app/assets/javascripts/access_tokens/components/expires_at_field.vue
index 1fec186f2fa..561b2617c5f 100644
--- a/app/assets/javascripts/access_tokens/components/expires_at_field.vue
+++ b/app/assets/javascripts/access_tokens/components/expires_at_field.vue
@@ -1,15 +1,31 @@
 <script>
-import { GlDatepicker, GlFormInput } from '@gitlab/ui';
+import { GlDatepicker, GlFormInput, GlFormGroup } from '@gitlab/ui';
+
+import { __ } from '~/locale';
 
 export default {
   name: 'ExpiresAtField',
-  components: { GlDatepicker, GlFormInput },
+  i18n: {
+    label: __('Expiration date'),
+  },
+  components: {
+    GlDatepicker,
+    GlFormInput,
+    GlFormGroup,
+    MaxExpirationDateMessage: () =>
+      import('ee_component/access_tokens/components/max_expiration_date_message.vue'),
+  },
   props: {
     inputAttrs: {
       type: Object,
       required: false,
       default: () => ({}),
     },
+    maxDate: {
+      type: Date,
+      required: false,
+      default: () => null,
+    },
   },
   data() {
     return {
@@ -20,13 +36,18 @@ export default {
 </script>
 
 <template>
-  <gl-datepicker :target="null" :min-date="minDate">
-    <gl-form-input
-      v-bind="inputAttrs"
-      class="datepicker gl-datepicker-input"
-      autocomplete="off"
-      inputmode="none"
-      data-qa-selector="expiry_date_field"
-    />
-  </gl-datepicker>
+  <gl-form-group :label="$options.i18n.label" :label-for="inputAttrs.id">
+    <gl-datepicker :target="null" :min-date="minDate" :max-date="maxDate">
+      <gl-form-input
+        v-bind="inputAttrs"
+        class="datepicker gl-datepicker-input"
+        autocomplete="off"
+        inputmode="none"
+        data-qa-selector="expiry_date_field"
+      />
+    </gl-datepicker>
+    <template #description>
+      <max-expiration-date-message :max-date="maxDate" />
+    </template>
+  </gl-form-group>
 </template>
diff --git a/app/assets/javascripts/access_tokens/components/tokens_app.vue b/app/assets/javascripts/access_tokens/components/tokens_app.vue
index 755991f64e0..10d4d62d803 100644
--- a/app/assets/javascripts/access_tokens/components/tokens_app.vue
+++ b/app/assets/javascripts/access_tokens/components/tokens_app.vue
@@ -100,6 +100,7 @@ export default {
             <gl-link
               :href="tokenData.resetPath"
               :data-confirm="$options.i18n[tokenType].resetConfirmMessage"
+              data-confirm-btn-variant="danger"
               data-method="put"
               >{{ content }}</gl-link
             >