Add latest changes from gitlab-org/gitlab@15-5-stable-eev15.5.0-rc42

4 files changed, 38 insertions, 15 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 461b2dad479..57a237c3e84 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
@@ -45,16 +45,34 @@ export default {
     'initialActiveAccessTokens',
     'noActiveTokensMessage',
     'showRole',
+    'information',
   ],
   data() {
     return {
-      activeAccessTokens: this.initialActiveAccessTokens,
+      activeAccessTokens: convertObjectPropsToCamelCase(this.initialActiveAccessTokens, {
+        deep: true,
+      }),
       currentPage: INITIAL_PAGE,
     };
   },
   computed: {
     filteredFields() {
-      return this.showRole ? FIELDS : FIELDS.filter((field) => field.key !== 'role');
+      const ignoredFields = [];
+
+      // Show 'action' column only when there are no active tokens or when some of them have a revokePath
+      const showAction =
+        this.activeAccessTokens.length === 0 ||
+        this.activeAccessTokens.some((token) => token.revokePath);
+
+      if (!showAction) {
+        ignoredFields.push('action');
+      }
+
+      if (!this.showRole) {
+        ignoredFields.push('role');
+      }
+
+      return FIELDS.filter(({ key }) => !ignoredFields.includes(key));
     },
     header() {
       return sprintf(this.$options.i18n.header, {
@@ -100,6 +118,10 @@ export default {
       <hr />
       <h5>{{ header }}</h5>
 
+      <p v-if="information" data-testid="information-section">
+        {{ information }}
+      </p>
+
       <gl-table
         data-testid="active-tokens"
         :empty-text="noActiveTokensMessage"
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 6b52bd84656..ce5342ad1ea 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
@@ -2,10 +2,13 @@
 import { GlAlert } from '@gitlab/ui';
 import { createAlert, VARIANT_INFO } from '~/flash';
 import { __, n__, sprintf } from '~/locale';
+import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import DomElementListener from '~/vue_shared/components/dom_element_listener.vue';
 import InputCopyToggleVisibility from '~/vue_shared/components/form/input_copy_toggle_visibility.vue';
 import { EVENT_ERROR, EVENT_SUCCESS, FORM_SELECTOR } from './constants';
 
+const convertEventDetail = (event) => convertObjectPropsToCamelCase(event.detail, { deep: true });
+
 export default {
   EVENT_ERROR,
   EVENT_SUCCESS,
@@ -54,8 +57,8 @@ export default {
     /** @type {HTMLFormElement} */
     this.form = document.querySelector(FORM_SELECTOR);
 
-    /** @type {HTMLInputElement} */
-    this.submitButton = this.form.querySelector('input[type=submit]');
+    /** @type {HTMLButtonElement} */
+    this.submitButton = this.form.querySelector('[type=submit]');
   },
   methods: {
     beforeDisplayResults() {
@@ -68,20 +71,21 @@ export default {
     onError(event) {
       this.beforeDisplayResults();
 
-      const [{ errors }] = event.detail;
+      const [{ errors }] = convertEventDetail(event);
       this.errors = errors;
 
       this.submitButton.classList.remove('disabled');
+      this.submitButton.removeAttribute('disabled');
     },
     onSuccess(event) {
       this.beforeDisplayResults();
 
-      const [{ new_token: newToken }] = event.detail;
+      const [{ newToken }] = convertEventDetail(event);
       this.newToken = newToken;
 
       this.infoAlert = createAlert({ message: this.alertInfoMessage, variant: VARIANT_INFO });
 
-      // Selectively reset all input fields except for the date picker and submit.
+      // Selectively reset all input fields except for the date picker.
       // The form token creation is not controlled by Vue.
       this.form.querySelectorAll('input[type=text]:not([id$=expires_at])').forEach((el) => {
         el.value = '';
diff --git a/app/assets/javascripts/access_tokens/components/tokens_app.vue b/app/assets/javascripts/access_tokens/components/tokens_app.vue
index 10d4d62d803..1f72f5e19e2 100644
--- a/app/assets/javascripts/access_tokens/components/tokens_app.vue
+++ b/app/assets/javascripts/access_tokens/components/tokens_app.vue
@@ -79,7 +79,7 @@ export default {
 </script>
 
 <template>
-  <div>
+  <div class="js-search-settings-section">
     <token
       v-for="(tokenData, tokenType) in enabledTokenTypes"
       :key="tokenType"
diff --git a/app/assets/javascripts/access_tokens/index.js b/app/assets/javascripts/access_tokens/index.js
index f0c1b415157..510f118bbb5 100644
--- a/app/assets/javascripts/access_tokens/index.js
+++ b/app/assets/javascripts/access_tokens/index.js
@@ -20,6 +20,7 @@ export const initAccessTokenTableApp = () => {
   const {
     accessTokenType,
     accessTokenTypePlural,
+    information,
     initialActiveAccessTokens: initialActiveAccessTokensJson,
     noActiveTokensMessage: noTokensMessage,
   } = el.dataset;
@@ -30,12 +31,7 @@ export const initAccessTokenTableApp = () => {
     sprintf(__('This user has no active %{accessTokenTypePlural}.'), { accessTokenTypePlural });
   const showRole = 'showRole' in el.dataset;
 
-  const initialActiveAccessTokens = convertObjectPropsToCamelCase(
-    JSON.parse(initialActiveAccessTokensJson),
-    {
-      deep: true,
-    },
-  );
+  const initialActiveAccessTokens = JSON.parse(initialActiveAccessTokensJson);
 
   return new Vue({
     el,
@@ -43,6 +39,7 @@ export const initAccessTokenTableApp = () => {
     provide: {
       accessTokenType,
       accessTokenTypePlural,
+      information,
       initialActiveAccessTokens,
       noActiveTokensMessage,
       showRole,
@@ -103,7 +100,7 @@ export const initNewAccessTokenApp = () => {
 export const initTokensApp = () => {
   const el = document.getElementById('js-tokens-app');
 
-  if (!el) return false;
+  if (!el) return null;
 
   const tokensData = convertObjectPropsToCamelCase(JSON.parse(el.dataset.tokensData), {
     deep: true,