Add latest changes from gitlab-org/gitlab@master

5 files changed, 84 insertions, 67 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 d15c8e6e703..85b3c994e02 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
@@ -32,7 +32,6 @@ export default {
   i18n: {
     emptyField: __('Never'),
     expired: __('Expired'),
-    header: __('Active %{accessTokenTypePlural} (%{totalAccessTokens})'),
     modalMessage: __(
       'Are you sure you want to revoke this %{accessTokenType}? This action cannot be undone.',
     ),
@@ -45,7 +44,6 @@ export default {
     'initialActiveAccessTokens',
     'noActiveTokensMessage',
     'showRole',
-    'information',
   ],
   data() {
     return {
@@ -74,12 +72,6 @@ export default {
 
       return FIELDS.filter(({ key }) => !ignoredFields.includes(key));
     },
-    header() {
-      return sprintf(this.$options.i18n.header, {
-        accessTokenTypePlural: this.accessTokenTypePlural,
-        totalAccessTokens: this.activeAccessTokens.length,
-      });
-    },
     modalMessage() {
       return sprintf(this.$options.i18n.modalMessage, {
         accessTokenType: this.accessTokenType,
@@ -114,65 +106,66 @@ export default {
 
 <template>
   <dom-element-listener :selector="$options.FORM_SELECTOR" @[$options.EVENT_SUCCESS]="onSuccess">
-    <div class="gl-pt-6">
-      <h5>{{ header }}</h5>
-
-      <p v-if="information" data-testid="information-section">
-        {{ information }}
-      </p>
-
-      <gl-table
-        data-testid="active-tokens"
-        :empty-text="noActiveTokensMessage"
-        :fields="filteredFields"
-        :items="activeAccessTokens"
-        :per-page="$options.PAGE_SIZE"
-        :current-page="currentPage"
-        :sort-compare="sortingChanged"
-        show-empty
+    <div>
+      <div
+        class="gl-new-card-body gl-px-0 gl-overflow-hidden gl-bg-gray-10 gl-border-l gl-border-r gl-border-b gl-rounded-bottom-base gl-mb-5 gl-md-mb-0"
       >
-        <template #cell(createdAt)="{ item: { createdAt } }">
-          <user-date :date="createdAt" />
-        </template>
+        <gl-table
+          data-testid="active-tokens"
+          :empty-text="noActiveTokensMessage"
+          :fields="filteredFields"
+          :items="activeAccessTokens"
+          :per-page="$options.PAGE_SIZE"
+          :current-page="currentPage"
+          :sort-compare="sortingChanged"
+          show-empty
+          stacked="sm"
+        >
+          <template #cell(createdAt)="{ item: { createdAt } }">
+            <user-date :date="createdAt" />
+          </template>
 
-        <template #head(lastUsedAt)="{ label }">
-          <span>{{ label }}</span>
-          <gl-link :href="$options.lastUsedHelpLink"
-            ><gl-icon name="question-o" /><span class="gl-sr-only">{{
-              s__('AccessTokens|The last time a token was used')
-            }}</span></gl-link
-          >
-        </template>
+          <template #head(lastUsedAt)="{ label }">
+            <span>{{ label }}</span>
+            <gl-link :href="$options.lastUsedHelpLink"
+              ><gl-icon name="question-o" /><span class="gl-sr-only">{{
+                s__('AccessTokens|The last time a token was used')
+              }}</span></gl-link
+            >
+          </template>
 
-        <template #cell(lastUsedAt)="{ item: { lastUsedAt } }">
-          <time-ago-tooltip v-if="lastUsedAt" :time="lastUsedAt" />
-          <template v-else> {{ $options.i18n.emptyField }}</template>
-        </template>
+          <template #cell(lastUsedAt)="{ item: { lastUsedAt } }">
+            <time-ago-tooltip v-if="lastUsedAt" :time="lastUsedAt" />
+            <template v-else> {{ $options.i18n.emptyField }}</template>
+          </template>
 
-        <template #cell(expiresAt)="{ item: { expiresAt, expired, expiresSoon } }">
-          <template v-if="expiresAt">
-            <span v-if="expired" class="text-danger">{{ $options.i18n.expired }}</span>
-            <time-ago-tooltip v-else :class="{ 'text-warning': expiresSoon }" :time="expiresAt" />
+          <template #cell(expiresAt)="{ item: { expiresAt, expired, expiresSoon } }">
+            <template v-if="expiresAt">
+              <span v-if="expired" class="text-danger">{{ $options.i18n.expired }}</span>
+              <time-ago-tooltip v-else :class="{ 'text-warning': expiresSoon }" :time="expiresAt" />
+            </template>
+            <span v-else v-gl-tooltip :title="$options.i18n.tokenValidity">{{
+              $options.i18n.emptyField
+            }}</span>
           </template>
-          <span v-else v-gl-tooltip :title="$options.i18n.tokenValidity">{{
-            $options.i18n.emptyField
-          }}</span>
-        </template>
 
-        <template #cell(action)="{ item: { revokePath } }">
-          <gl-button
-            v-if="revokePath"
-            category="tertiary"
-            :aria-label="$options.i18n.revokeButton"
-            :data-confirm="modalMessage"
-            data-confirm-btn-variant="danger"
-            data-qa-selector="revoke_button"
-            data-method="put"
-            :href="revokePath"
-            icon="remove"
-          />
-        </template>
-      </gl-table>
+          <template #cell(action)="{ item: { revokePath } }">
+            <gl-button
+              v-if="revokePath"
+              category="tertiary"
+              :title="$options.i18n.revokeButton"
+              :aria-label="$options.i18n.revokeButton"
+              :data-confirm="modalMessage"
+              data-confirm-btn-variant="danger"
+              data-qa-selector="revoke_button"
+              data-method="put"
+              :href="revokePath"
+              icon="remove"
+              class="has-tooltip"
+            />
+          </template>
+        </gl-table>
+      </div>
       <gl-pagination
         v-if="showPagination"
         v-model="currentPage"
@@ -183,6 +176,7 @@ export default {
         :label-next-page="__('Go to next page')"
         :label-prev-page="__('Go to previous page')"
         align="center"
+        class="gl-mt-5"
       />
     </div>
   </dom-element-listener>
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 dfac423b65e..4b51b4333aa 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
@@ -93,6 +93,12 @@ export default {
       this.form.querySelectorAll('input[type=checkbox]').forEach((el) => {
         el.checked = false;
       });
+      document.querySelectorAll('.js-token-card').forEach((el) => {
+        el.querySelector('.js-add-new-token-form').style.display = '';
+        el.querySelector('.js-toggle-button').style.display = 'block';
+        el.querySelector('.js-token-count').innerText =
+          parseInt(el.querySelector('.js-token-count').innerText, 10) + 1;
+      });
     },
   },
 };
@@ -105,7 +111,12 @@ export default {
     @[$options.EVENT_SUCCESS]="onSuccess"
   >
     <div ref="container" data-testid="access-token-section" data-qa-selector="access_token_section">
-      <template v-if="newToken">
+      <gl-alert
+        v-if="newToken"
+        variant="success"
+        data-testid="success-message"
+        @dismiss="newToken = null"
+      >
         <input-copy-toggle-visibility
           :copy-button-title="copyButtonTitle"
           :label="label"
@@ -113,16 +124,22 @@ export default {
           :value="newToken"
           :form-input-group-props="formInputGroupProps"
           readonly
+          size="lg"
+          class="gl-mb-0"
         >
           <template #description>
             {{ $options.i18n.description }}
           </template>
         </input-copy-toggle-visibility>
-        <hr />
-      </template>
+      </gl-alert>
 
       <template v-if="errors">
-        <gl-alert :title="alertDangerTitle" variant="danger" @dismiss="errors = null">
+        <gl-alert
+          :title="alertDangerTitle"
+          variant="danger"
+          data-testid="error-message"
+          @dismiss="errors = null"
+        >
           <ul class="gl-m-0">
             <li v-for="error in errors" :key="error">
               {{ error }}
diff --git a/app/assets/javascripts/access_tokens/components/token.vue b/app/assets/javascripts/access_tokens/components/token.vue
index 09263d8e0ea..0e1e924bda3 100644
--- a/app/assets/javascripts/access_tokens/components/token.vue
+++ b/app/assets/javascripts/access_tokens/components/token.vue
@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import InputCopyToggleVisibility from '~/vue_shared/components/form/input_copy_toggle_visibility.vue';
 
@@ -20,6 +21,11 @@ export default {
       type: String,
       required: true,
     },
+    size: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   computed: {
     formInputGroupProps() {
@@ -40,6 +46,7 @@ export default {
       :value="token"
       :copy-button-title="copyButtonTitle"
       readonly
+      :size="size"
     >
       <template #description>
         <slot name="input-description"></slot>
diff --git a/app/assets/javascripts/access_tokens/components/tokens_app.vue b/app/assets/javascripts/access_tokens/components/tokens_app.vue
index 88119ed8a84..af26bf85941 100644
--- a/app/assets/javascripts/access_tokens/components/tokens_app.vue
+++ b/app/assets/javascripts/access_tokens/components/tokens_app.vue
@@ -88,6 +88,7 @@ export default {
       :input-label="$options.i18n[tokenType].label"
       :copy-button-title="$options.i18n[tokenType].copyButtonTitle"
       :data-testid="$options.htmlAttributes[tokenType].containerTestId"
+      size="md"
     >
       <template #title>
         <div class="settings-sticky-header">
diff --git a/app/assets/javascripts/access_tokens/index.js b/app/assets/javascripts/access_tokens/index.js
index 510f118bbb5..4e0acaa74da 100644
--- a/app/assets/javascripts/access_tokens/index.js
+++ b/app/assets/javascripts/access_tokens/index.js
@@ -20,7 +20,6 @@ export const initAccessTokenTableApp = () => {
   const {
     accessTokenType,
     accessTokenTypePlural,
-    information,
     initialActiveAccessTokens: initialActiveAccessTokensJson,
     noActiveTokensMessage: noTokensMessage,
   } = el.dataset;
@@ -39,7 +38,6 @@ export const initAccessTokenTableApp = () => {
     provide: {
       accessTokenType,
       accessTokenTypePlural,
-      information,
       initialActiveAccessTokens,
       noActiveTokensMessage,
       showRole,