diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2023-08-02 18:07:15 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2023-08-02 18:07:15 +0300 |
commit | b3432e3b6d3ad4baf73847907c4fea91b59288a5 (patch) | |
tree | 67faa17d1769222861e9ff11568ca770d38766e1 /app/assets/javascripts/access_tokens | |
parent | 7069eb1ee6cd6af1fa769df5a1175dffc4e3ddb1 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/access_tokens')
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, |