Add latest changes from gitlab-org/gitlab@15-4-stable-eev15.4.0-rc42

4 files changed, 34 insertions, 20 deletions

diff --git a/app/assets/javascripts/access_tokens/components/access_token_table_app.vue b/app/assets/javascripts/access_tokens/components/access_token_table_app.vue
index 59f0e0dd17d..461b2dad479 100644
--- a/app/assets/javascripts/access_tokens/components/access_token_table_app.vue
+++ b/app/assets/javascripts/access_tokens/components/access_token_table_app.vue
@@ -140,6 +140,7 @@ export default {
 
         <template #cell(action)="{ item: { revokePath } }">
           <gl-button
+            v-if="revokePath"
             category="tertiary"
             :aria-label="$options.i18n.revokeButton"
             :data-confirm="modalMessage"
diff --git a/app/assets/javascripts/access_tokens/components/constants.js b/app/assets/javascripts/access_tokens/components/constants.js
index 84e50bc099f..9cd7cb5bb3a 100644
--- a/app/assets/javascripts/access_tokens/components/constants.js
+++ b/app/assets/javascripts/access_tokens/components/constants.js
@@ -12,8 +12,6 @@ export const FIELDS = [
     key: 'name',
     label: __('Token name'),
     sortable: true,
-    tdClass: `gl-text-black-normal`,
-    thClass: `gl-text-black-normal`,
   },
   {
     formatter(scopes) {
@@ -22,40 +20,30 @@ export const FIELDS = [
     key: 'scopes',
     label: __('Scopes'),
     sortable: true,
-    tdClass: `gl-text-black-normal`,
-    thClass: `gl-text-black-normal`,
   },
   {
     key: 'createdAt',
     label: s__('AccessTokens|Created'),
     sortable: true,
-    tdClass: `gl-text-black-normal`,
-    thClass: `gl-text-black-normal`,
   },
   {
     key: 'lastUsedAt',
     label: __('Last Used'),
     sortable: true,
-    tdClass: `gl-text-black-normal`,
-    thClass: `gl-text-black-normal`,
   },
   {
     key: 'expiresAt',
     label: __('Expires'),
     sortable: true,
-    tdClass: `gl-text-black-normal`,
-    thClass: `gl-text-black-normal`,
   },
   {
     key: 'role',
     label: __('Role'),
-    tdClass: `gl-text-black-normal`,
-    thClass: `gl-text-black-normal`,
     sortable: true,
   },
   {
     key: 'action',
     label: __('Action'),
-    thClass: `gl-text-black-normal`,
+    tdClass: 'gl-py-3!',
   },
 ];
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 5516fd0daf6..38501d63d3a 100644
--- a/app/assets/javascripts/access_tokens/components/expires_at_field.vue
+++ b/app/assets/javascripts/access_tokens/components/expires_at_field.vue
@@ -16,6 +16,16 @@ export default {
       import('ee_component/access_tokens/components/max_expiration_date_message.vue'),
   },
   props: {
+    defaultDateOffset: {
+      type: Number,
+      required: false,
+      default: 30,
+    },
+    description: {
+      type: String,
+      required: false,
+      default: null,
+    },
     inputAttrs: {
       type: Object,
       required: false,
@@ -33,9 +43,15 @@ export default {
     },
   },
   computed: {
-    in30Days() {
-      const today = new Date();
-      return getDateInFuture(today, 30);
+    defaultDate() {
+      const defaultDate = getDateInFuture(new Date(), this.defaultDateOffset);
+      // The maximum date can be set by admins. If the maximum date is sooner
+      // than the default expiration date we use the maximum date as default
+      // expiration date.
+      if (this.maxDate && this.maxDate < defaultDate) {
+        return this.maxDate;
+      }
+      return defaultDate;
     },
   },
 };
@@ -47,7 +63,7 @@ export default {
       :target="null"
       :min-date="minDate"
       :max-date="maxDate"
-      :default-date="in30Days"
+      :default-date="defaultDate"
       show-clear-button
       :input-name="inputAttrs.name"
       :input-id="inputAttrs.id"
@@ -55,7 +71,10 @@ export default {
       data-qa-selector="expiry_date_field"
     />
     <template #description>
-      <max-expiration-date-message :max-date="maxDate" />
+      <template v-if="description">
+        {{ description }}
+      </template>
+      <max-expiration-date-message v-else :max-date="maxDate" />
     </template>
   </gl-form-group>
 </template>
diff --git a/app/assets/javascripts/access_tokens/components/new_access_token_app.vue b/app/assets/javascripts/access_tokens/components/new_access_token_app.vue
index e111ae91e5c..6b52bd84656 100644
--- a/app/assets/javascripts/access_tokens/components/new_access_token_app.vue
+++ b/app/assets/javascripts/access_tokens/components/new_access_token_app.vue
@@ -42,7 +42,6 @@ export default {
     formInputGroupProps() {
       return {
         id: this.$options.tokenInputId,
-        class: 'qa-created-access-token',
         'data-qa-selector': 'created_access_token_field',
         name: this.$options.tokenInputId,
       };
@@ -82,7 +81,14 @@ export default {
 
       this.infoAlert = createAlert({ message: this.alertInfoMessage, variant: VARIANT_INFO });
 
-      this.form.reset();
+      // Selectively reset all input fields except for the date picker and submit.
+      // The form token creation is not controlled by Vue.
+      this.form.querySelectorAll('input[type=text]:not([id$=expires_at])').forEach((el) => {
+        el.value = '';
+      });
+      this.form.querySelectorAll('input[type=checkbox]').forEach((el) => {
+        el.checked = false;
+      });
     },
   },
 };