diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2023-08-07 21:10:22 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2023-08-07 21:10:22 +0300 |
commit | 4d18bba787186aeb5bf8a0463fd145fae48b3234 (patch) | |
tree | daa26f7daa8bf303ef0cfcc1bfe68d13eae74537 /app/assets/javascripts/token_access | |
parent | 33c86930e0a657e1519082a9a00faae260a44882 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/token_access')
3 files changed, 75 insertions, 41 deletions
diff --git a/app/assets/javascripts/token_access/components/inbound_token_access.vue b/app/assets/javascripts/token_access/components/inbound_token_access.vue index ac359b4f901..234ac0505b2 100644 --- a/app/assets/javascripts/token_access/components/inbound_token_access.vue +++ b/app/assets/javascripts/token_access/components/inbound_token_access.vue @@ -5,6 +5,7 @@ import { GlCard, GlFormInput, GlLink, + GlIcon, GlLoadingIcon, GlSprintf, GlToggle, @@ -64,6 +65,7 @@ export default { GlCard, GlFormInput, GlLink, + GlIcon, GlLoadingIcon, GlSprintf, GlToggle, @@ -109,6 +111,7 @@ export default { inboundJobTokenScopeEnabled: null, targetProjectPath: '', projects: [], + isAddFormVisible: false, }; }, computed: { @@ -193,10 +196,14 @@ export default { }, clearTargetProjectPath() { this.targetProjectPath = ''; + this.isAddFormVisible = false; }, getProjects() { this.$apollo.queries.projects.refetch(); }, + showAddForm() { + this.isAddFormVisible = true; + }, }, }; </script> @@ -228,22 +235,55 @@ export default { </gl-toggle> <div> - <gl-card class="gl-mt-5 gl-mb-3"> + <gl-card + class="gl-new-card" + header-class="gl-new-card-header" + body-class="gl-new-card-body gl-px-0" + > <template #header> - <h5 class="gl-my-0">{{ $options.i18n.cardHeaderTitle }}</h5> + <div class="gl-new-card-title-wrapper"> + <h5 class="gl-new-card-title">{{ $options.i18n.cardHeaderTitle }}</h5> + <span class="gl-new-card-count"> + <gl-icon name="project" class="gl-mr-2" /> + {{ projects.length }} + </span> + </div> + <div class="gl-new-card-actions"> + <gl-button + v-if="!isAddFormVisible" + size="small" + data-testid="toggle-form-btn" + @click="showAddForm" + >{{ $options.i18n.addProject }}</gl-button + > + </div> </template> - <template #default> + + <div v-if="isAddFormVisible" class="gl-new-card-add-form gl-m-3"> + <h4 class="gl-mt-0">{{ $options.i18n.addProject }}</h4> <gl-form-input v-model="targetProjectPath" :placeholder="$options.i18n.addProjectPlaceholder" /> - </template> - <template #footer> - <gl-button variant="confirm" :disabled="isProjectPathEmpty" @click="addProject"> - {{ $options.i18n.addProject }} - </gl-button> - <gl-button @click="clearTargetProjectPath">{{ $options.i18n.cancel }}</gl-button> - </template> + <div class="gl-display-flex gl-mt-5"> + <gl-button + variant="confirm" + :disabled="isProjectPathEmpty" + class="gl-mr-3" + data-testid="add-project-btn" + @click="addProject" + > + {{ $options.i18n.addProject }} + </gl-button> + <gl-button @click="clearTargetProjectPath">{{ $options.i18n.cancel }}</gl-button> + </div> + </div> + + <token-projects-table + :projects="projects" + :table-fields="$options.fields" + @removeProject="removeProject" + /> </gl-card> <gl-alert v-if="!inboundJobTokenScopeEnabled" @@ -254,11 +294,6 @@ export default { > {{ $options.i18n.settingDisabledMessage }} </gl-alert> - <token-projects-table - :projects="projects" - :table-fields="$options.fields" - @removeProject="removeProject" - /> </div> </template> </div> diff --git a/app/assets/javascripts/token_access/components/outbound_token_access.vue b/app/assets/javascripts/token_access/components/outbound_token_access.vue index cad1fff062a..7e1e6cc445c 100644 --- a/app/assets/javascripts/token_access/components/outbound_token_access.vue +++ b/app/assets/javascripts/token_access/components/outbound_token_access.vue @@ -3,8 +3,8 @@ import { GlAlert, GlButton, GlCard, - GlFormInput, GlLink, + GlIcon, GlLoadingIcon, GlSprintf, GlToggle, @@ -71,8 +71,8 @@ export default { GlAlert, GlButton, GlCard, - GlFormInput, GlLink, + GlIcon, GlLoadingIcon, GlSprintf, GlToggle, @@ -221,7 +221,7 @@ export default { <gl-loading-icon v-if="$apollo.loading" size="lg" class="gl-mt-5" /> <template v-else> <gl-alert - class="gl-mb-3" + class="gl-mt-5 gl-mb-3" variant="warning" :dismissible="false" :show-icon="false" @@ -268,30 +268,29 @@ export default { </gl-toggle> <div> - <gl-card class="gl-mt-5 gl-mb-3"> + <gl-card + class="gl-new-card" + header-class="gl-new-card-header" + body-class="gl-new-card-body gl-px-0" + > <template #header> - <h5 class="gl-my-0">{{ $options.i18n.cardHeaderTitle }}</h5> - </template> - <template #default> - <gl-form-input - v-model="targetProjectPath" - :disabled="true" - :placeholder="$options.i18n.addProjectPlaceholder" - data-testid="project-path-input" - /> - </template> - <template #footer> - <gl-button variant="confirm" :disabled="isProjectPathEmpty" @click="addProject"> - {{ $options.i18n.addProject }} - </gl-button> - <gl-button @click="clearTargetProjectPath">{{ $options.i18n.cancel }}</gl-button> + <div class="gl-new-card-title-wrapper"> + <h5 class="gl-new-card-title">{{ $options.i18n.cardHeaderTitle }}</h5> + <span class="gl-new-card-count"> + <gl-icon name="project" class="gl-mr-2" /> + {{ projects.length }} + </span> + </div> + <div class="gl-new-card-actions"> + <gl-button size="small" disabled>{{ $options.i18n.addProject }}</gl-button> + </div> </template> + <token-projects-table + :projects="projects" + :table-fields="$options.fields" + @removeProject="removeProject" + /> </gl-card> - <token-projects-table - :projects="projects" - :table-fields="$options.fields" - @removeProject="removeProject" - /> </div> </template> </div> diff --git a/app/assets/javascripts/token_access/components/token_access_app.vue b/app/assets/javascripts/token_access/components/token_access_app.vue index 167eebc8d9b..d2d5e6b2a5a 100644 --- a/app/assets/javascripts/token_access/components/token_access_app.vue +++ b/app/assets/javascripts/token_access/components/token_access_app.vue @@ -12,7 +12,7 @@ export default { </script> <template> <div> - <inbound-token-access class="gl-pb-5" /> - <outbound-token-access class="gl-py-5" /> + <inbound-token-access /> + <outbound-token-access /> </div> </template> |