diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2023-08-02 21:10:41 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2023-08-02 21:10:41 +0300 |
commit | 93fdeb5a619e45cb64ff346c127ff4d68c619ffe (patch) | |
tree | 93a645322b77bec56bec7b7ecbed56a7f866cea0 /app/assets/javascripts/comment_templates | |
parent | b3432e3b6d3ad4baf73847907c4fea91b59288a5 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/comment_templates')
4 files changed, 63 insertions, 48 deletions
diff --git a/app/assets/javascripts/comment_templates/components/form.vue b/app/assets/javascripts/comment_templates/components/form.vue index fd305ac537c..334c67ca339 100644 --- a/app/assets/javascripts/comment_templates/components/form.vue +++ b/app/assets/javascripts/comment_templates/components/form.vue @@ -61,6 +61,13 @@ export default { }, }, methods: { + onCancel() { + if (this.id) { + this.$router.push({ path: '/' }); + } else { + this.$emit('cancel'); + } + }, onSubmit() { this.showValidation = true; @@ -178,6 +185,6 @@ export default { > {{ __('Save') }} </gl-button> - <gl-button v-if="id" :to="{ path: '/' }">{{ __('Cancel') }}</gl-button> + <gl-button @click="onCancel">{{ __('Cancel') }}</gl-button> </gl-form> </template> diff --git a/app/assets/javascripts/comment_templates/components/list.vue b/app/assets/javascripts/comment_templates/components/list.vue index 76a5b231d81..9c460297335 100644 --- a/app/assets/javascripts/comment_templates/components/list.vue +++ b/app/assets/javascripts/comment_templates/components/list.vue @@ -1,21 +1,14 @@ <!-- eslint-disable vue/multi-word-component-names --> <script> -import { GlKeysetPagination, GlLoadingIcon, GlSprintf } from '@gitlab/ui'; +import { GlKeysetPagination } from '@gitlab/ui'; import ListItem from './list_item.vue'; export default { components: { - GlLoadingIcon, GlKeysetPagination, - GlSprintf, ListItem, }, props: { - loading: { - type: Boolean, - required: false, - default: false, - }, savedReplies: { type: Array, required: true, @@ -24,10 +17,6 @@ export default { type: Object, required: true, }, - count: { - type: Number, - required: true, - }, }, methods: { prevPage() { @@ -45,28 +34,16 @@ export default { </script> <template> - <div class="settings-section"> - <gl-loading-icon v-if="loading" size="lg" /> - <template v-else> - <div class="settings-sticky-header"> - <div class="settings-sticky-header-inner"> - <h4 class="gl-my-0" data-testid="title"> - <gl-sprintf :message="__('My comment templates (%{count})')"> - <template #count>{{ count }}</template> - </gl-sprintf> - </h4> - </div> - </div> - <ul class="gl-list-style-none gl-p-0 gl-m-0"> - <list-item v-for="template in savedReplies" :key="template.id" :template="template" /> - </ul> - <gl-keyset-pagination - v-if="pageInfo.hasPreviousPage || pageInfo.hasNextPage" - v-bind="pageInfo" - class="gl-mt-4" - @prev="prevPage" - @next="nextPage" - /> - </template> + <div class="gl-new-card-content gl-p-0"> + <ul class="content-list"> + <list-item v-for="template in savedReplies" :key="template.id" :template="template" /> + </ul> + <gl-keyset-pagination + v-if="pageInfo.hasPreviousPage || pageInfo.hasNextPage" + v-bind="pageInfo" + class="gl-mt-4" + @prev="prevPage" + @next="nextPage" + /> </div> </template> diff --git a/app/assets/javascripts/comment_templates/components/list_item.vue b/app/assets/javascripts/comment_templates/components/list_item.vue index 70ba449113b..0619201e346 100644 --- a/app/assets/javascripts/comment_templates/components/list_item.vue +++ b/app/assets/javascripts/comment_templates/components/list_item.vue @@ -74,8 +74,8 @@ export default { </script> <template> - <li class="gl-pt-4 gl-pb-5 gl-border-b"> - <div class="gl-display-flex gl-align-items-center"> + <li class="gl-px-5! gl-py-4!"> + <div class="gl-display-flex"> <h6 class="gl-mr-3 gl-my-0" data-testid="comment-template-name">{{ template.name }}</h6> <div class="gl-ml-auto"> <gl-disclosure-dropdown @@ -94,7 +94,9 @@ export default { </gl-tooltip> </div> </div> - <div class="gl-mt-3 gl-font-monospace gl-white-space-pre-wrap">{{ template.content }}</div> + <div class="gl-font-monospace gl-white-space-pre-line gl-font-sm gl-mt-n5"> + {{ template.content }} + </div> <gl-modal ref="delete-modal" :title="__('Delete comment template')" diff --git a/app/assets/javascripts/comment_templates/pages/index.vue b/app/assets/javascripts/comment_templates/pages/index.vue index bbd6cf935f5..58fbe3574bc 100644 --- a/app/assets/javascripts/comment_templates/pages/index.vue +++ b/app/assets/javascripts/comment_templates/pages/index.vue @@ -1,5 +1,6 @@ <!-- eslint-disable vue/multi-word-component-names --> <script> +import { GlCard, GlLoadingIcon, GlIcon, GlButton } from '@gitlab/ui'; import { fetchPolicies } from '~/lib/graphql'; import CreateForm from '../components/form.vue'; import savedRepliesQuery from '../queries/saved_replies.query.graphql'; @@ -28,6 +29,10 @@ export default { }, }, components: { + GlCard, + GlButton, + GlLoadingIcon, + GlIcon, CreateForm, List, }, @@ -37,34 +42,58 @@ export default { count: 0, pageInfo: {}, pagination: {}, + showForm: false, }; }, methods: { refetchSavedReplies() { this.pagination = {}; this.$apollo.queries.savedReplies.refetch(); + this.toggleShowForm(); }, changePage(pageInfo) { this.pagination = pageInfo; }, + toggleShowForm() { + this.showForm = !this.showForm; + }, }, }; </script> <template> - <div> - <div class="settings-section"> - <h5 class="gl-mt-0 gl-font-lg"> - {{ __('Add new comment template') }} - </h5> - <create-form @saved="refetchSavedReplies" /> + <gl-card + class="gl-new-card gl-overflow-hidden" + header-class="gl-new-card-header" + body-class="gl-new-card-body gl-px-0" + > + <template #header> + <div class="gl-new-card-title-wrapper" data-testid="title"> + <h3 class="gl-new-card-title"> + {{ __('My comment templates') }} + </h3> + <div class="gl-new-card-count"> + <gl-icon name="comment-lines" class="gl-mr-2" /> + {{ count }} + </div> + </div> + <gl-button v-if="!showForm" size="small" class="gl-ml-3" @click="toggleShowForm"> + {{ __('Add new') }} + </gl-button> + </template> + <div v-if="showForm" class="gl-new-card-add-form gl-m-3 gl-mb-4"> + <h4 class="gl-mt-0">{{ __('Add new comment template') }}</h4> + <create-form @saved="refetchSavedReplies" @cancel="toggleShowForm" /> </div> + <gl-loading-icon v-if="$apollo.queries.savedReplies.loading" size="sm" class="gl-my-5" /> <list - :loading="$apollo.queries.savedReplies.loading" + v-else-if="savedReplies" :saved-replies="savedReplies" :page-info="pageInfo" - :count="count" @input="changePage" /> - </div> + <div v-else class="gl-new-card-empty gl-px-5 gl-py-4"> + {{ __('You have no saved replies yet.') }} + </div> + </gl-card> </template> |