From 84c336ea4ec7036acf7a6f7cfcaabebe4b6eddb5 Mon Sep 17 00:00:00 2001
From: Annabel Dunstone Gray <annabel.dunstone@gmail.com>
Date: Wed, 19 Jul 2023 14:55:32 -0600
Subject: [PATCH 1/5] Move comment templates into card view

Changelog: changed
---
 .../comment_templates/components/list.vue     | 60 ++++++++++++-------
 .../components/list_item.vue                  |  6 +-
 locale/gitlab.pot                             |  5 +-
 .../list_users_comment_template_spec.rb       |  2 +-
 .../user_creates_comment_template_spec.rb     |  2 +-
 5 files changed, 50 insertions(+), 25 deletions(-)

diff --git a/app/assets/javascripts/comment_templates/components/list.vue b/app/assets/javascripts/comment_templates/components/list.vue
index 46d6b49297d9c0..1de9c72f939818 100644
--- a/app/assets/javascripts/comment_templates/components/list.vue
+++ b/app/assets/javascripts/comment_templates/components/list.vue
@@ -1,12 +1,15 @@
 <script>
-import { GlKeysetPagination, GlLoadingIcon, GlSprintf } from '@gitlab/ui';
+import { GlButton, GlCard, GlIcon, GlKeysetPagination, GlLoadingIcon } from '@gitlab/ui';
+import { __ } from '~/locale';
 import ListItem from './list_item.vue';
 
 export default {
   components: {
+    GlButton,
+    GlCard,
+    GlIcon,
     GlLoadingIcon,
     GlKeysetPagination,
-    GlSprintf,
     ListItem,
   },
   props: {
@@ -40,6 +43,10 @@ export default {
       });
     },
   },
+  i18n: {
+    commentTemplateHeader: __('My comment templates'),
+    addNewButton: __('Add new'),
+  },
 };
 </script>
 
@@ -47,25 +54,38 @@ export default {
   <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>
+      <gl-card
+        class="gl-new-card gl-overflow-hidden"
+        header-class="gl-new-card-header"
+        body-class="gl-new-card-body"
+      >
+        <template #header>
+          <div class="gl-new-card-title-wrapper">
+            <h3 class="gl-new-card-title" data-testid="title">
+              {{ $options.i18n.commentTemplateHeader }}
+            </h3>
+            <div class="gl-new-card-count js-related-issues-header-issue-count">
+              <gl-icon name="comment-lines" class="gl-mr-2" />
+              {{ count }}
+            </div>
+          </div>
+          <gl-button size="small" class="gl-ml-3">
+            {{ $options.i18n.addNewButton }}
+          </gl-button>
+        </template>
+        <div class="gl-new-card-content gl-pt-0 gl-px-3">
+          <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>
-      </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"
-      />
+      </gl-card>
     </template>
   </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 70ba449113bdba..64ed68fafd8757 100644
--- a/app/assets/javascripts/comment_templates/components/list_item.vue
+++ b/app/assets/javascripts/comment_templates/components/list_item.vue
@@ -74,7 +74,7 @@ export default {
 </script>
 
 <template>
-  <li class="gl-pt-4 gl-pb-5 gl-border-b">
+  <li class="gl-py-5!">
     <div class="gl-display-flex gl-align-items-center">
       <h6 class="gl-mr-3 gl-my-0" data-testid="comment-template-name">{{ template.name }}</h6>
       <div class="gl-ml-auto">
@@ -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-mt-2 gl-font-monospace gl-white-space-pre-wrap gl-font-sm">{{
+      template.content
+    }}</div>
     <gl-modal
       ref="delete-modal"
       :title="__('Delete comment template')"
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 96fb9d44511d2f..05954fba3e5b8a 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -2866,6 +2866,9 @@ msgstr ""
 msgid "Add list"
 msgstr ""
 
+msgid "Add new"
+msgstr ""
+
 msgid "Add new application"
 msgstr ""
 
@@ -30110,7 +30113,7 @@ msgstr ""
 msgid "My awesome group"
 msgstr ""
 
-msgid "My comment templates (%{count})"
+msgid "My comment templates"
 msgstr ""
 
 msgid "My company or team"
diff --git a/spec/features/profiles/list_users_comment_template_spec.rb b/spec/features/profiles/list_users_comment_template_spec.rb
index 85e455ba98810d..b2faee3ae045eb 100644
--- a/spec/features/profiles/list_users_comment_template_spec.rb
+++ b/spec/features/profiles/list_users_comment_template_spec.rb
@@ -14,7 +14,7 @@
   it 'shows the user a list of their comment templates' do
     visit profile_comment_templates_path
 
-    expect(page).to have_content('My comment templates (1)')
+    expect(page).to have_content('My comment templates')
     expect(page).to have_content(saved_reply.name)
     expect(page).to have_content(saved_reply.content)
   end
diff --git a/spec/features/profiles/user_creates_comment_template_spec.rb b/spec/features/profiles/user_creates_comment_template_spec.rb
index 44e2b932c008f8..dce07acdf08068 100644
--- a/spec/features/profiles/user_creates_comment_template_spec.rb
+++ b/spec/features/profiles/user_creates_comment_template_spec.rb
@@ -22,7 +22,7 @@
 
     wait_for_requests
 
-    expect(page).to have_content('My comment templates (1)')
+    expect(page).to have_content('My comment templates')
     expect(page).to have_content('test')
     expect(page).to have_content('Test content')
   end
-- 
GitLab


From 9544360e3eb9eaefbff61e4bdcd02300bbd82d2d Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Thu, 27 Jul 2023 10:35:19 +0100
Subject: [PATCH 2/5] Moved form into the gl-card component

---
 .../comment_templates/components/form.vue     |  9 ++-
 .../comment_templates/components/list.vue     | 67 ++++---------------
 .../components/list_item.vue                  |  6 +-
 .../comment_templates/pages/index.vue         | 49 ++++++++++----
 4 files changed, 58 insertions(+), 73 deletions(-)

diff --git a/app/assets/javascripts/comment_templates/components/form.vue b/app/assets/javascripts/comment_templates/components/form.vue
index 6bdf1b313cb76e..877fb54fba769a 100644
--- a/app/assets/javascripts/comment_templates/components/form.vue
+++ b/app/assets/javascripts/comment_templates/components/form.vue
@@ -60,6 +60,13 @@ export default {
     },
   },
   methods: {
+    onCancel() {
+      if (this.id) {
+        this.$router.push({ path: '/' });
+      } else {
+        this.$emit('cancel');
+      }
+    },
     onSubmit() {
       this.showValidation = true;
 
@@ -177,6 +184,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 1de9c72f939818..b0397472358b63 100644
--- a/app/assets/javascripts/comment_templates/components/list.vue
+++ b/app/assets/javascripts/comment_templates/components/list.vue
@@ -1,23 +1,13 @@
 <script>
-import { GlButton, GlCard, GlIcon, GlKeysetPagination, GlLoadingIcon } from '@gitlab/ui';
-import { __ } from '~/locale';
+import { GlKeysetPagination } from '@gitlab/ui';
 import ListItem from './list_item.vue';
 
 export default {
   components: {
-    GlButton,
-    GlCard,
-    GlIcon,
-    GlLoadingIcon,
     GlKeysetPagination,
     ListItem,
   },
   props: {
-    loading: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
     savedReplies: {
       type: Array,
       required: true,
@@ -26,10 +16,6 @@ export default {
       type: Object,
       required: true,
     },
-    count: {
-      type: Number,
-      required: true,
-    },
   },
   methods: {
     prevPage() {
@@ -43,49 +29,20 @@ export default {
       });
     },
   },
-  i18n: {
-    commentTemplateHeader: __('My comment templates'),
-    addNewButton: __('Add new'),
-  },
 };
 </script>
 
 <template>
-  <div class="settings-section">
-    <gl-loading-icon v-if="loading" size="lg" />
-    <template v-else>
-      <gl-card
-        class="gl-new-card gl-overflow-hidden"
-        header-class="gl-new-card-header"
-        body-class="gl-new-card-body"
-      >
-        <template #header>
-          <div class="gl-new-card-title-wrapper">
-            <h3 class="gl-new-card-title" data-testid="title">
-              {{ $options.i18n.commentTemplateHeader }}
-            </h3>
-            <div class="gl-new-card-count js-related-issues-header-issue-count">
-              <gl-icon name="comment-lines" class="gl-mr-2" />
-              {{ count }}
-            </div>
-          </div>
-          <gl-button size="small" class="gl-ml-3">
-            {{ $options.i18n.addNewButton }}
-          </gl-button>
-        </template>
-        <div class="gl-new-card-content gl-pt-0 gl-px-3">
-          <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>
-      </gl-card>
-    </template>
+  <div class="gl-new-card-content gl-pt-0 gl-px-3">
+    <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 64ed68fafd8757..eb861de0a51f52 100644
--- a/app/assets/javascripts/comment_templates/components/list_item.vue
+++ b/app/assets/javascripts/comment_templates/components/list_item.vue
@@ -94,9 +94,9 @@ export default {
         </gl-tooltip>
       </div>
     </div>
-    <div class="gl-mt-2 gl-font-monospace gl-white-space-pre-wrap gl-font-sm">{{
-      template.content
-    }}</div>
+    <div class="gl-mt-2 gl-font-monospace gl-white-space-pre-wrap gl-font-sm">
+      {{ 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 daa4ba689a73a6..91d0deb1723836 100644
--- a/app/assets/javascripts/comment_templates/pages/index.vue
+++ b/app/assets/javascripts/comment_templates/pages/index.vue
@@ -1,4 +1,5 @@
 <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';
@@ -27,6 +28,10 @@ export default {
     },
   },
   components: {
+    GlCard,
+    GlButton,
+    GlLoadingIcon,
+    GlIcon,
     CreateForm,
     List,
   },
@@ -36,34 +41,50 @@ 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"
+  >
+    <template #header>
+      <div class="gl-new-card-title-wrapper">
+        <h3 class="gl-new-card-title" data-testid="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>
-    <list
-      :loading="$apollo.queries.savedReplies.loading"
-      :saved-replies="savedReplies"
-      :page-info="pageInfo"
-      :count="count"
-      @input="changePage"
-    />
-  </div>
+    <gl-loading-icon v-if="$apollo.queries.savedReplies.loading" size="lg" class="gl-my-5" />
+    <list v-else :saved-replies="savedReplies" :page-info="pageInfo" @input="changePage" />
+  </gl-card>
 </template>
-- 
GitLab


From d6195708446229425cd378d6b2cf9b38bddaeee9 Mon Sep 17 00:00:00 2001
From: Annabel Dunstone Gray <annabel.dunstone@gmail.com>
Date: Fri, 28 Jul 2023 10:46:13 -0600
Subject: [PATCH 3/5] Fix specs and alignment

---
 .../javascripts/comment_templates/components/list.vue       | 2 +-
 .../javascripts/comment_templates/components/list_item.vue  | 4 ++--
 .../features/profiles/user_creates_comment_template_spec.rb | 1 +
 .../components/__snapshots__/list_item_spec.js.snap         | 6 ++++--
 4 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/app/assets/javascripts/comment_templates/components/list.vue b/app/assets/javascripts/comment_templates/components/list.vue
index b0397472358b63..aac3b48b868d43 100644
--- a/app/assets/javascripts/comment_templates/components/list.vue
+++ b/app/assets/javascripts/comment_templates/components/list.vue
@@ -33,7 +33,7 @@ export default {
 </script>
 
 <template>
-  <div class="gl-new-card-content gl-pt-0 gl-px-3">
+  <div class="gl-new-card-content gl-py-0 gl-px-3">
     <ul class="content-list">
       <list-item v-for="template in savedReplies" :key="template.id" :template="template" />
     </ul>
diff --git a/app/assets/javascripts/comment_templates/components/list_item.vue b/app/assets/javascripts/comment_templates/components/list_item.vue
index eb861de0a51f52..f1622f91b2a816 100644
--- a/app/assets/javascripts/comment_templates/components/list_item.vue
+++ b/app/assets/javascripts/comment_templates/components/list_item.vue
@@ -74,7 +74,7 @@ export default {
 </script>
 
 <template>
-  <li class="gl-py-5!">
+  <li class="gl-pb-5! gl-pt-3!">
     <div class="gl-display-flex gl-align-items-center">
       <h6 class="gl-mr-3 gl-my-0" data-testid="comment-template-name">{{ template.name }}</h6>
       <div class="gl-ml-auto">
@@ -94,7 +94,7 @@ export default {
         </gl-tooltip>
       </div>
     </div>
-    <div class="gl-mt-2 gl-font-monospace gl-white-space-pre-wrap gl-font-sm">
+    <div class="gl-font-monospace gl-white-space-pre-line gl-font-sm">
       {{ template.content }}
     </div>
     <gl-modal
diff --git a/spec/features/profiles/user_creates_comment_template_spec.rb b/spec/features/profiles/user_creates_comment_template_spec.rb
index dce07acdf08068..dcaf47088b02d4 100644
--- a/spec/features/profiles/user_creates_comment_template_spec.rb
+++ b/spec/features/profiles/user_creates_comment_template_spec.rb
@@ -15,6 +15,7 @@
   end
 
   it 'shows the user a list of their saved replies' do
+    click_button 'Add new'
     find('[data-testid="comment-template-name-input"]').set('test')
     find('[data-testid="comment-template-content-input"]').set('Test content')
 
diff --git a/spec/frontend/comment_templates/components/__snapshots__/list_item_spec.js.snap b/spec/frontend/comment_templates/components/__snapshots__/list_item_spec.js.snap
index d0bc7a55f8e188..d41004803cab7b 100644
--- a/spec/frontend/comment_templates/components/__snapshots__/list_item_spec.js.snap
+++ b/spec/frontend/comment_templates/components/__snapshots__/list_item_spec.js.snap
@@ -2,7 +2,7 @@
 
 exports[`Comment templates list item component renders list item 1`] = `
 <li
-  class="gl-pt-4 gl-pb-5 gl-border-b"
+  class="gl-pb-5! gl-pt-3!"
 >
   <div
     class="gl-display-flex gl-align-items-center"
@@ -130,9 +130,11 @@ exports[`Comment templates list item component renders list item 1`] = `
   </div>
    
   <div
-    class="gl-mt-3 gl-font-monospace gl-white-space-pre-wrap"
+    class="gl-font-monospace gl-white-space-pre-line gl-font-sm"
   >
+    
     /assign_reviewer
+  
   </div>
    
   <!---->
-- 
GitLab


From e7afb586368c942740e9ed20e7296fe8ebe1de65 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Mon, 31 Jul 2023 10:29:39 +0100
Subject: [PATCH 4/5] Fixed failing specs

---
 app/assets/javascripts/comment_templates/pages/index.vue | 4 ++--
 spec/frontend/comment_templates/components/list_spec.js  | 6 ------
 spec/frontend/comment_templates/pages/index_spec.js      | 9 +++++++++
 3 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/app/assets/javascripts/comment_templates/pages/index.vue b/app/assets/javascripts/comment_templates/pages/index.vue
index 91d0deb1723836..86926ade42b6aa 100644
--- a/app/assets/javascripts/comment_templates/pages/index.vue
+++ b/app/assets/javascripts/comment_templates/pages/index.vue
@@ -67,8 +67,8 @@ export default {
     body-class="gl-new-card-body"
   >
     <template #header>
-      <div class="gl-new-card-title-wrapper">
-        <h3 class="gl-new-card-title" data-testid="title">
+      <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">
diff --git a/spec/frontend/comment_templates/components/list_spec.js b/spec/frontend/comment_templates/components/list_spec.js
index 8b0daf2fe2f513..8973857c33855b 100644
--- a/spec/frontend/comment_templates/components/list_spec.js
+++ b/spec/frontend/comment_templates/components/list_spec.js
@@ -25,12 +25,6 @@ describe('Comment templates list component', () => {
     expect(wrapper.findAllComponents(ListItem).length).toBe(0);
   });
 
-  it('render comment templates count', () => {
-    wrapper = createComponent(savedRepliesResponse);
-
-    expect(wrapper.find('[data-testid="title"]').text()).toEqual('My comment templates (2)');
-  });
-
   it('renders list of comment templates', () => {
     const savedReplies = savedRepliesResponse.data.currentUser.savedReplies.nodes;
     wrapper = createComponent(savedRepliesResponse);
diff --git a/spec/frontend/comment_templates/pages/index_spec.js b/spec/frontend/comment_templates/pages/index_spec.js
index 6dbec3ef4a450c..fa195ec8281aeb 100644
--- a/spec/frontend/comment_templates/pages/index_spec.js
+++ b/spec/frontend/comment_templates/pages/index_spec.js
@@ -42,4 +42,13 @@ describe('Comment templates index page component', () => {
       expect.objectContaining(savedReplies[1]),
     );
   });
+
+  it('render comment templates count', async () => {
+    const mockApollo = createMockApolloProvider(savedRepliesResponse);
+    wrapper = createComponent({ mockApollo });
+
+    await waitForPromises();
+
+    expect(wrapper.find('[data-testid="title"]').text()).toContain('2');
+  });
 });
-- 
GitLab


From 3d9d090afb63960fc9dfb3ff66a43de28eca449d Mon Sep 17 00:00:00 2001
From: Annabel Dunstone Gray <annabel.dunstone@gmail.com>
Date: Mon, 31 Jul 2023 09:10:34 -0600
Subject: [PATCH 5/5] Update styling

---
 .../comment_templates/components/list.vue          |  2 +-
 .../comment_templates/components/list_item.vue     |  6 +++---
 .../javascripts/comment_templates/pages/index.vue  | 14 +++++++++++---
 locale/gitlab.pot                                  |  3 +++
 .../__snapshots__/list_item_spec.js.snap           |  6 +++---
 5 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/app/assets/javascripts/comment_templates/components/list.vue b/app/assets/javascripts/comment_templates/components/list.vue
index aac3b48b868d43..4e2f5fdfdafdae 100644
--- a/app/assets/javascripts/comment_templates/components/list.vue
+++ b/app/assets/javascripts/comment_templates/components/list.vue
@@ -33,7 +33,7 @@ export default {
 </script>
 
 <template>
-  <div class="gl-new-card-content gl-py-0 gl-px-3">
+  <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>
diff --git a/app/assets/javascripts/comment_templates/components/list_item.vue b/app/assets/javascripts/comment_templates/components/list_item.vue
index f1622f91b2a816..0619201e3463de 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-pb-5! gl-pt-3!">
-    <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,7 @@ export default {
         </gl-tooltip>
       </div>
     </div>
-    <div class="gl-font-monospace gl-white-space-pre-line gl-font-sm">
+    <div class="gl-font-monospace gl-white-space-pre-line gl-font-sm gl-mt-n5">
       {{ template.content }}
     </div>
     <gl-modal
diff --git a/app/assets/javascripts/comment_templates/pages/index.vue b/app/assets/javascripts/comment_templates/pages/index.vue
index 86926ade42b6aa..b881708855144e 100644
--- a/app/assets/javascripts/comment_templates/pages/index.vue
+++ b/app/assets/javascripts/comment_templates/pages/index.vue
@@ -64,7 +64,7 @@ export default {
   <gl-card
     class="gl-new-card gl-overflow-hidden"
     header-class="gl-new-card-header"
-    body-class="gl-new-card-body"
+    body-class="gl-new-card-body gl-px-0"
   >
     <template #header>
       <div class="gl-new-card-title-wrapper" data-testid="title">
@@ -84,7 +84,15 @@ export default {
       <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="lg" class="gl-my-5" />
-    <list v-else :saved-replies="savedReplies" :page-info="pageInfo" @input="changePage" />
+    <gl-loading-icon v-if="$apollo.queries.savedReplies.loading" size="sm" class="gl-my-5" />
+    <list
+      v-else-if="savedReplies"
+      :saved-replies="savedReplies"
+      :page-info="pageInfo"
+      @input="changePage"
+    />
+    <div v-else class="gl-new-card-empty gl-px-5 gl-py-4">
+      {{ __('You have no saved replies yet.') }}
+    </div>
   </gl-card>
 </template>
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 05954fba3e5b8a..b57256e51c519c 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -53598,6 +53598,9 @@ msgstr ""
 msgid "You have no permissions"
 msgstr ""
 
+msgid "You have no saved replies yet."
+msgstr ""
+
 msgid "You have not added any approvers. Start by adding users or groups."
 msgstr ""
 
diff --git a/spec/frontend/comment_templates/components/__snapshots__/list_item_spec.js.snap b/spec/frontend/comment_templates/components/__snapshots__/list_item_spec.js.snap
index d41004803cab7b..c5704d6866031b 100644
--- a/spec/frontend/comment_templates/components/__snapshots__/list_item_spec.js.snap
+++ b/spec/frontend/comment_templates/components/__snapshots__/list_item_spec.js.snap
@@ -2,10 +2,10 @@
 
 exports[`Comment templates list item component renders list item 1`] = `
 <li
-  class="gl-pb-5! gl-pt-3!"
+  class="gl-px-5! gl-py-4!"
 >
   <div
-    class="gl-display-flex gl-align-items-center"
+    class="gl-display-flex"
   >
     <h6
       class="gl-mr-3 gl-my-0"
@@ -130,7 +130,7 @@ exports[`Comment templates list item component renders list item 1`] = `
   </div>
    
   <div
-    class="gl-font-monospace gl-white-space-pre-line gl-font-sm"
+    class="gl-font-monospace gl-white-space-pre-line gl-font-sm gl-mt-n5"
   >
     
     /assign_reviewer
-- 
GitLab