Add latest changes from gitlab-org/gitlab@master

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>