From 6e5d349246357fdab80089cca0e3f55617b67e7d Mon Sep 17 00:00:00 2001
From: Sascha Eggenberger <seggenberger@gitlab.com>
Date: Wed, 26 Jul 2023 17:54:34 +0200
Subject: [PATCH] Settings badges: Use GlCard

Changelog: changed
---
 .../badges/components/badge_form.vue          |  66 ++++---
 .../badges/components/badge_list.vue          | 168 +++++++++++++++---
 .../badges/components/badge_list_row.vue      |  81 ---------
 .../badges/components/badge_settings.vue      |  89 ++++++++--
 app/assets/javascripts/badges/constants.js    |   2 +
 locale/gitlab.pot                             |  13 +-
 qa/qa/page/component/badges.rb                |   4 +-
 .../groups/settings/group_badges_spec.rb      |  41 +++--
 .../projects/settings/project_badges_spec.rb  |  41 +++--
 .../badges/components/badge_form_spec.js      |  14 +-
 .../badges/components/badge_list_row_spec.js  | 119 -------------
 .../badges/components/badge_list_spec.js      |  94 ++++++++--
 .../badges/components/badge_settings_spec.js  |  40 +++--
 13 files changed, 432 insertions(+), 340 deletions(-)
 delete mode 100644 app/assets/javascripts/badges/components/badge_list_row.vue
 delete mode 100644 spec/frontend/badges/components/badge_list_row_spec.js

diff --git a/app/assets/javascripts/badges/components/badge_form.vue b/app/assets/javascripts/badges/components/badge_form.vue
index 1a80030c7e6ef2..23873922618872 100644
--- a/app/assets/javascripts/badges/components/badge_form.vue
+++ b/app/assets/javascripts/badges/components/badge_form.vue
@@ -28,6 +28,11 @@ export default {
       type: Boolean,
       required: true,
     },
+    inModal: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -119,16 +124,28 @@ export default {
         exampleUrl,
       });
     },
+    cancelButtonType() {
+      return this.isEditing ? 'button' : 'reset';
+    },
+    saveText() {
+      return this.isEditing ? s__('Badges|Save changes') : s__('Badges|Add badge');
+    },
+  },
+  mounted() {
+    // declared here to make it cancel-able
+    this.debouncedPreview = debounce(function search() {
+      this.renderBadge();
+    }, badgePreviewDelayInMilliseconds);
   },
   methods: {
     ...mapActions(['addBadge', 'renderBadge', 'saveBadge', 'stopEditing', 'updateBadgeInForm']),
-    debouncedPreview: debounce(function preview() {
-      this.renderBadge();
-    }, badgePreviewDelayInMilliseconds),
-    onCancel() {
-      this.stopEditing();
+    updatePreview() {
+      this.debouncedPreview();
     },
     onSubmit() {
+      this.debouncedPreview.cancel();
+      this.renderBadge();
+
       const form = this.$el;
       if (!form.checkValidity()) {
         this.wasValidated = true;
@@ -161,6 +178,7 @@ export default {
             variant: VARIANT_INFO,
           });
           this.wasValidated = false;
+          this.$emit('close-add-form');
         })
         .catch((error) => {
           createAlert({
@@ -171,6 +189,17 @@ export default {
           throw error;
         });
     },
+    closeForm() {
+      this.$refs.form.reset();
+      this.$emit('close-add-form');
+    },
+    handleCancel() {
+      if (this.isEditing) {
+        this.stopEditing();
+      } else {
+        this.closeForm();
+      }
+    },
   },
   safeHtmlConfig: { ALLOW_TAGS: ['a', 'code'] },
 };
@@ -178,6 +207,7 @@ export default {
 
 <template>
   <form
+    ref="form"
     :class="{ 'was-validated': wasValidated }"
     class="gl-mt-3 gl-mb-3 needs-validation"
     novalidate
@@ -197,7 +227,7 @@ export default {
         type="URL"
         class="form-control gl-form-input"
         required
-        @input="debouncedPreview"
+        @input="updatePreview"
       />
       <div class="invalid-feedback">{{ s__('Badges|Enter a valid URL') }}</div>
       <span class="form-text text-muted">{{ badgeLinkUrlExample }}</span>
@@ -213,7 +243,7 @@ export default {
         type="URL"
         class="form-control gl-form-input"
         required
-        @input="debouncedPreview"
+        @input="updatePreview"
       />
       <div class="invalid-feedback">{{ s__('Badges|Enter a valid URL') }}</div>
       <span class="form-text text-muted">{{ badgeImageUrlExample }}</span>
@@ -235,29 +265,23 @@ export default {
       </p>
     </div>
 
-    <div v-if="isEditing" class="row-content-block">
-      <gl-button class="btn-cancel gl-mr-4" data-testid="cancelEditing" @click="onCancel">
-        {{ __('Cancel') }}
-      </gl-button>
+    <div v-if="!inModal" class="form-group" data-testid="action-buttons">
       <gl-button
         :loading="isSaving"
         type="submit"
         variant="confirm"
         category="primary"
-        data-testid="saveEditing"
+        data-qa-selector="add_badge_button"
+        class="gl-mr-3"
       >
-        {{ s__('Badges|Save changes') }}
+        {{ saveText }}
       </gl-button>
-    </div>
-    <div v-else class="form-group">
       <gl-button
-        :loading="isSaving"
-        type="submit"
-        variant="confirm"
-        category="primary"
-        data-qa-selector="add_badge_button"
+        :type="cancelButtonType"
+        data-qa-selector="cancel_badge_button"
+        @click="handleCancel"
       >
-        {{ s__('Badges|Add badge') }}
+        {{ __('Cancel') }}
       </gl-button>
     </div>
   </form>
diff --git a/app/assets/javascripts/badges/components/badge_list.vue b/app/assets/javascripts/badges/components/badge_list.vue
index 76625fe9a607bc..dbb692a389e290 100644
--- a/app/assets/javascripts/badges/components/badge_list.vue
+++ b/app/assets/javascripts/badges/components/badge_list.vue
@@ -1,15 +1,42 @@
 <script>
-import { GlLoadingIcon, GlBadge } from '@gitlab/ui';
-import { mapState } from 'vuex';
-import { GROUP_BADGE } from '../constants';
-import BadgeListRow from './badge_list_row.vue';
+import {
+  GlBadge,
+  GlLoadingIcon,
+  GlTable,
+  GlPagination,
+  GlButton,
+  GlModalDirective,
+} from '@gitlab/ui';
+import { mapActions, mapState } from 'vuex';
+import { __, s__ } from '~/locale';
+import { GROUP_BADGE, PROJECT_BADGE, INITIAL_PAGE, PAGE_SIZE } from '../constants';
+import Badge from './badge.vue';
 
 export default {
+  PAGE_SIZE,
+  INITIAL_PAGE,
   name: 'BadgeList',
   components: {
-    BadgeListRow,
-    GlLoadingIcon,
+    Badge,
     GlBadge,
+    GlLoadingIcon,
+    GlTable,
+    GlPagination,
+    GlButton,
+  },
+  directives: {
+    GlModal: GlModalDirective,
+  },
+  i18n: {
+    emptyGroupMessage: s__('Badges|This group has no badges, start by creating a new one above.'),
+    emptyProjectMessage: s__(
+      'Badges|This project has no badges, start by creating a new one above.',
+    ),
+  },
+  data() {
+    return {
+      currentPage: INITIAL_PAGE,
+    };
   },
   computed: {
     ...mapState(['badges', 'isLoading', 'kind']),
@@ -19,28 +46,123 @@ export default {
     isGroupBadge() {
       return this.kind === GROUP_BADGE;
     },
+    showPagination() {
+      return this.badges.length > PAGE_SIZE;
+    },
+    emptyMessage() {
+      return this.isGroupBadge
+        ? this.$options.i18n.emptyGroupMessage
+        : this.$options.i18n.emptyProjectMessage;
+    },
+    fields() {
+      return [
+        {
+          key: 'name',
+          label: __('Name'),
+          tdClass: 'gl-vertical-align-middle!',
+        },
+        {
+          key: 'badge',
+          label: __('Badge'),
+          tdClass: 'gl-vertical-align-middle!',
+        },
+        {
+          key: 'url',
+          label: __('URL'),
+          tdClass: 'gl-vertical-align-middle!',
+        },
+        {
+          key: 'actions',
+          label: __('Actions'),
+          thClass: 'gl-text-right',
+          tdClass: 'gl-text-right',
+        },
+      ];
+    },
+  },
+  methods: {
+    ...mapActions(['editBadge', 'updateBadgeInModal']),
+    badgeKindText(item) {
+      if (item.kind === PROJECT_BADGE) {
+        return s__('Badges|Project Badge');
+      }
+
+      return s__('Badges|Group Badge');
+    },
+    canEditBadge(item) {
+      return item.kind === this.kind;
+    },
   },
 };
 </script>
 
 <template>
-  <div class="card">
-    <div class="card-header">
-      {{ s__('Badges|Your badges') }}
-      <gl-badge v-show="!isLoading" size="sm">{{ badges.length }}</gl-badge>
-    </div>
-    <gl-loading-icon v-show="isLoading" size="lg" class="card-body" />
-    <div v-if="hasNoBadges" class="card-body">
-      <span v-if="isGroupBadge">{{ s__('Badges|This group has no badges') }}</span>
-      <span v-else>{{ s__('Badges|This project has no badges') }}</span>
-    </div>
-    <div v-else class="card-body" data-qa-selector="badge_list_content">
-      <badge-list-row
-        v-for="badge in badges"
-        :key="badge.id"
-        :badge="badge"
-        data-qa-selector="badge_list_row"
-        :data-qa-badge-name="badge.name"
+  <div>
+    <gl-loading-icon v-show="isLoading" size="md" />
+    <div data-qa-selector="badge_list_content">
+      <gl-table
+        :empty-text="emptyMessage"
+        :fields="fields"
+        :items="badges"
+        :per-page="$options.PAGE_SIZE"
+        :current-page="currentPage"
+        stacked="md"
+        show-empty
+        data-qa-selector="badge_list"
+      >
+        <template #cell(name)="{ item }">
+          <label class="label-bold str-truncated mb-0">{{ item.name }}</label>
+          <gl-badge size="sm">{{ badgeKindText(item) }}</gl-badge>
+        </template>
+
+        <template #cell(badge)="{ item }">
+          <badge :image-url="item.renderedImageUrl" :link-url="item.renderedLinkUrl" />
+        </template>
+
+        <template #cell(url)="{ item }">
+          {{ item.linkUrl }}
+        </template>
+
+        <template #cell(actions)="{ item }">
+          <div v-if="canEditBadge(item)" class="table-action-buttons" data-testid="badge-actions">
+            <gl-button
+              v-gl-modal.edit-badge-modal
+              :disabled="item.isDeleting"
+              class="gl-mr-3"
+              variant="default"
+              icon="pencil"
+              size="medium"
+              :aria-label="__('Edit')"
+              data-testid="edit-badge-button"
+              @click="editBadge(item)"
+            />
+            <gl-button
+              v-gl-modal.delete-badge-modal
+              :disabled="item.isDeleting"
+              category="secondary"
+              variant="danger"
+              icon="remove"
+              size="medium"
+              :aria-label="__('Delete')"
+              data-testid="delete-badge"
+              @click="updateBadgeInModal(item)"
+            />
+            <gl-loading-icon v-show="item.isDeleting" size="sm" :inline="true" />
+          </div>
+        </template>
+      </gl-table>
+
+      <gl-pagination
+        v-if="showPagination"
+        v-model="currentPage"
+        :per-page="$options.PAGE_SIZE"
+        :total-items="badges.length"
+        :prev-text="__('Prev')"
+        :next-text="__('Next')"
+        :label-next-page="__('Go to next page')"
+        :label-prev-page="__('Go to previous page')"
+        align="center"
+        class="gl-mt-5"
       />
     </div>
   </div>
diff --git a/app/assets/javascripts/badges/components/badge_list_row.vue b/app/assets/javascripts/badges/components/badge_list_row.vue
deleted file mode 100644
index 4c2b700c7ffc31..00000000000000
--- a/app/assets/javascripts/badges/components/badge_list_row.vue
+++ /dev/null
@@ -1,81 +0,0 @@
-<script>
-import { GlLoadingIcon, GlButton, GlModalDirective, GlBadge } from '@gitlab/ui';
-import { mapActions, mapState } from 'vuex';
-import { s__ } from '~/locale';
-import { PROJECT_BADGE } from '../constants';
-import Badge from './badge.vue';
-
-export default {
-  name: 'BadgeListRow',
-  components: {
-    Badge,
-    GlLoadingIcon,
-    GlButton,
-    GlBadge,
-  },
-  directives: {
-    GlModal: GlModalDirective,
-  },
-  props: {
-    badge: {
-      type: Object,
-      required: true,
-    },
-  },
-  computed: {
-    ...mapState(['kind']),
-    badgeKindText() {
-      if (this.badge.kind === PROJECT_BADGE) {
-        return s__('Badges|Project Badge');
-      }
-
-      return s__('Badges|Group Badge');
-    },
-    canEditBadge() {
-      return this.badge.kind === this.kind;
-    },
-  },
-  methods: {
-    ...mapActions(['editBadge', 'updateBadgeInModal']),
-  },
-};
-</script>
-
-<template>
-  <div class="gl-responsive-table-row-layout gl-responsive-table-row">
-    <badge
-      :image-url="badge.renderedImageUrl"
-      :link-url="badge.renderedLinkUrl"
-      class="table-section section-30"
-    />
-    <div class="table-section section-30">
-      <label class="label-bold str-truncated mb-0">{{ badge.name }}</label>
-      <gl-badge size="sm">{{ badgeKindText }}</gl-badge>
-    </div>
-    <span class="table-section section-30 str-truncated">{{ badge.linkUrl }}</span>
-    <div class="table-section section-10 table-button-footer">
-      <div v-if="canEditBadge" class="table-action-buttons">
-        <gl-button
-          :disabled="badge.isDeleting"
-          class="gl-mr-3"
-          variant="default"
-          icon="pencil"
-          size="medium"
-          :aria-label="__('Edit')"
-          @click="editBadge(badge)"
-        />
-        <gl-button
-          v-gl-modal.delete-badge-modal
-          :disabled="badge.isDeleting"
-          variant="danger"
-          icon="remove"
-          size="medium"
-          :aria-label="__('Delete')"
-          data-testid="delete-badge"
-          @click="updateBadgeInModal(badge)"
-        />
-        <gl-loading-icon v-show="badge.isDeleting" size="sm" :inline="true" />
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/app/assets/javascripts/badges/components/badge_settings.vue b/app/assets/javascripts/badges/components/badge_settings.vue
index 09f997d73aa2c1..6fe772e717c580 100644
--- a/app/assets/javascripts/badges/components/badge_settings.vue
+++ b/app/assets/javascripts/badges/components/badge_settings.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlSprintf, GlModal } from '@gitlab/ui';
+import { GlButton, GlCard, GlModal, GlIcon, GlSprintf } from '@gitlab/ui';
 import { mapState, mapActions } from 'vuex';
 import { createAlert, VARIANT_INFO } from '~/alert';
 import { __, s__ } from '~/locale';
@@ -13,17 +13,34 @@ export default {
     Badge,
     BadgeForm,
     BadgeList,
+    GlButton,
+    GlCard,
     GlModal,
+    GlIcon,
     GlSprintf,
   },
   i18n: {
+    title: s__('Badges|Your badges'),
+    addButton: s__('Badges|Add badge'),
+    addFormTitle: s__('Badges|Add new badge'),
     deleteModalText: s__(
       'Badges|You are going to delete this badge. Deleted badges %{strongStart}cannot%{strongEnd} be restored.',
     ),
   },
+  data() {
+    return {
+      addFormVisible: false,
+    };
+  },
   computed: {
-    ...mapState(['badgeInModal', 'isEditing']),
-    primaryProps() {
+    ...mapState(['badges', 'badgeInModal', 'isEditing']),
+    saveProps() {
+      return {
+        text: __('Save changes'),
+        attributes: { category: 'primary', variant: 'confirm' },
+      };
+    },
+    deleteProps() {
       return {
         text: __('Delete badge'),
         attributes: { category: 'primary', variant: 'danger' },
@@ -37,7 +54,16 @@ export default {
   },
   methods: {
     ...mapActions(['deleteBadge']),
-    onSubmitModal() {
+    showAddForm() {
+      this.addFormVisible = !this.addFormVisible;
+    },
+    closeAddForm() {
+      this.addFormVisible = false;
+    },
+    onSubmitEditModal() {
+      this.$refs.editForm.onSubmit();
+    },
+    onSubmitDeleteModal() {
       this.deleteBadge(this.badgeInModal)
         .then(() => {
           createAlert({
@@ -58,12 +84,58 @@ export default {
 
 <template>
   <div class="badge-settings">
+    <gl-card
+      class="gl-new-card"
+      header-class="gl-new-card-header"
+      body-class="gl-new-card-body gl-overflow-hidden gl-px-0"
+    >
+      <template #header>
+        <div class="gl-new-card-title-wrapper">
+          <h3 class="gl-new-card-title">{{ $options.i18n.title }}</h3>
+          <span class="gl-new-card-count">
+            <gl-icon name="labels" class="gl-mr-2" />
+            {{ badges.length }}
+          </span>
+        </div>
+        <div class="gl-new-card-actions">
+          <gl-button
+            v-if="!addFormVisible"
+            size="small"
+            data-testid="show-badge-add-form"
+            @click="showAddForm"
+            >{{ $options.i18n.addButton }}</gl-button
+          >
+        </div>
+      </template>
+
+      <div v-if="addFormVisible" class="gl-new-card-add-form gl-m-5">
+        <h4 class="gl-mt-0">{{ $options.i18n.addFormTitle }}</h4>
+        <badge-form
+          :is-editing="false"
+          data-testid="add-new-badge"
+          @close-add-form="closeAddForm"
+        />
+      </div>
+
+      <badge-list />
+    </gl-card>
+
+    <gl-modal
+      modal-id="edit-badge-modal"
+      :title="s__('Badges|Edit badge')"
+      :action-primary="saveProps"
+      :action-cancel="cancelProps"
+      @primary="onSubmitEditModal"
+    >
+      <badge-form ref="editForm" :is-editing="true" :in-modal="true" data-testid="edit-badge" />
+    </gl-modal>
+
     <gl-modal
       modal-id="delete-badge-modal"
       :title="s__('Badges|Delete badge?')"
-      :action-primary="primaryProps"
+      :action-primary="deleteProps"
       :action-cancel="cancelProps"
-      @primary="onSubmitModal"
+      @primary="onSubmitDeleteModal"
     >
       <div class="well">
         <badge
@@ -79,10 +151,5 @@ export default {
         </gl-sprintf>
       </p>
     </gl-modal>
-
-    <badge-form v-show="isEditing" :is-editing="true" data-testid="edit-badge" />
-
-    <badge-form v-show="!isEditing" :is-editing="false" data-testid="add-new-badge" />
-    <badge-list v-show="!isEditing" />
   </div>
 </template>
diff --git a/app/assets/javascripts/badges/constants.js b/app/assets/javascripts/badges/constants.js
index 709436abca6e5a..56b45abbe6bf07 100644
--- a/app/assets/javascripts/badges/constants.js
+++ b/app/assets/javascripts/badges/constants.js
@@ -8,3 +8,5 @@ export const PLACEHOLDERS = [
   'default_branch',
   'commit_sha',
 ];
+export const INITIAL_PAGE = 1;
+export const PAGE_SIZE = 10;
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index f710122c87b436..0c0948d55b3745 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -7066,12 +7066,18 @@ msgstr ""
 msgid "BackgroundMigrations|Started at"
 msgstr ""
 
+msgid "Badge"
+msgstr ""
+
 msgid "Badges"
 msgstr ""
 
 msgid "Badges|Add badge"
 msgstr ""
 
+msgid "Badges|Add new badge"
+msgstr ""
+
 msgid "Badges|Adding the badge failed, please check the entered URLs and try again."
 msgstr ""
 
@@ -7090,6 +7096,9 @@ msgstr ""
 msgid "Badges|Deleting the badge failed, please try again."
 msgstr ""
 
+msgid "Badges|Edit badge"
+msgstr ""
+
 msgid "Badges|Enter a valid URL"
 msgstr ""
 
@@ -7132,10 +7141,10 @@ msgstr ""
 msgid "Badges|The badge was deleted."
 msgstr ""
 
-msgid "Badges|This group has no badges"
+msgid "Badges|This group has no badges, start by creating a new one above."
 msgstr ""
 
-msgid "Badges|This project has no badges"
+msgid "Badges|This project has no badges, start by creating a new one above."
 msgstr ""
 
 msgid "Badges|You are going to delete this badge. Deleted badges %{strongStart}cannot%{strongEnd} be restored."
diff --git a/qa/qa/page/component/badges.rb b/qa/qa/page/component/badges.rb
index f2c5f809d8d0f9..b1dbd08dfa5157 100644
--- a/qa/qa/page/component/badges.rb
+++ b/qa/qa/page/component/badges.rb
@@ -13,7 +13,7 @@ class Badges < Page::Base
 
         view 'app/assets/javascripts/badges/components/badge_list.vue' do
           element :badge_list_content
-          element :badge_list_row
+          element :badge_list
         end
 
         view 'app/assets/javascripts/badges/components/badge.vue' do
@@ -38,7 +38,7 @@ def click_add_badge_button
 
         def has_badge?(badge_name)
           within_element(:badge_list_content) do
-            has_element?(:badge_list_row, badge_name: badge_name)
+            has_element?(:badge_list, badge_name: badge_name)
           end
         end
 
diff --git a/spec/features/groups/settings/group_badges_spec.rb b/spec/features/groups/settings/group_badges_spec.rb
index 4a4cb297fcfe57..1f16a288882299 100644
--- a/spec/features/groups/settings/group_badges_spec.rb
+++ b/spec/features/groups/settings/group_badges_spec.rb
@@ -24,7 +24,7 @@
     page.within '.badge-settings' do
       wait_for_requests
 
-      rows = all('.card-body > div')
+      rows = all('.gl-card-body tbody tr')
       expect(rows.length).to eq 2
       expect(rows[0]).to have_content badge_1.link_url
       expect(rows[1]).to have_content badge_2.link_url
@@ -33,6 +33,7 @@
 
   context 'adding a badge', :js do
     it 'user can preview a badge' do
+      click_button 'Add badge'
       page.within '.badge-settings form' do
         fill_in 'badge-link-url', with: badge_link_url
         fill_in 'badge-image-url', with: badge_image_url
@@ -44,6 +45,7 @@
     end
 
     it do
+      click_button 'Add badge'
       page.within '.badge-settings' do
         fill_in 'badge-link-url', with: badge_link_url
         fill_in 'badge-image-url', with: badge_image_url
@@ -51,7 +53,7 @@
         click_button 'Add badge'
         wait_for_requests
 
-        within '.card-body' do
+        within '.gl-card-body' do
           expect(find('a')[:href]).to eq badge_link_url
           expect(find('a img')[:src]).to eq badge_image_url
         end
@@ -63,32 +65,35 @@
     it 'form is shown when clicking edit button in list' do
       page.within '.badge-settings' do
         wait_for_requests
-        rows = all('.card-body > div')
+        rows = all('.gl-card-body tbody tr')
         expect(rows.length).to eq 2
         rows[1].find('[aria-label="Edit"]').click
+      end
 
-        within 'form' do
-          expect(find('#badge-link-url').value).to eq badge_2.link_url
-          expect(find('#badge-image-url').value).to eq badge_2.image_url
-        end
+      page.within '.gl-modal' do
+        expect(find('#badge-link-url').value).to eq badge_2.link_url
+        expect(find('#badge-image-url').value).to eq badge_2.image_url
       end
     end
 
     it 'updates a badge when submitting the edit form' do
       page.within '.badge-settings' do
         wait_for_requests
-        rows = all('.card-body > div')
+        rows = all('.gl-card-body tbody tr')
         expect(rows.length).to eq 2
         rows[1].find('[aria-label="Edit"]').click
-        within 'form' do
-          fill_in 'badge-link-url', with: badge_link_url
-          fill_in 'badge-image-url', with: badge_image_url
+      end
 
-          click_button 'Save changes'
-          wait_for_requests
-        end
+      page.within '.gl-modal' do
+        fill_in 'badge-link-url', with: badge_link_url
+        fill_in 'badge-image-url', with: badge_image_url
 
-        rows = all('.card-body > div')
+        click_button 'Save changes'
+        wait_for_requests
+      end
+
+      page.within '.badge-settings' do
+        rows = all('.gl-card-body tbody tr')
         expect(rows.length).to eq 2
         expect(rows[1]).to have_content badge_link_url
       end
@@ -102,7 +107,7 @@ def click_delete_button(badge_row)
 
     it 'shows a modal when deleting a badge' do
       wait_for_requests
-      rows = all('.card-body > div')
+      rows = all('.gl-card-body tbody tr')
       expect(rows.length).to eq 2
 
       click_delete_button(rows[1])
@@ -112,14 +117,14 @@ def click_delete_button(badge_row)
 
     it 'deletes a badge when confirming the modal' do
       wait_for_requests
-      rows = all('.card-body > div')
+      rows = all('.gl-card-body tbody tr')
       expect(rows.length).to eq 2
       click_delete_button(rows[1])
 
       find('.modal .btn-danger').click
       wait_for_requests
 
-      rows = all('.card-body > div')
+      rows = all('.gl-card-body tbody tr')
       expect(rows.length).to eq 1
       expect(rows[0]).to have_content badge_1.link_url
     end
diff --git a/spec/features/projects/settings/project_badges_spec.rb b/spec/features/projects/settings/project_badges_spec.rb
index 1f170300155eec..a66bf5cd3a934c 100644
--- a/spec/features/projects/settings/project_badges_spec.rb
+++ b/spec/features/projects/settings/project_badges_spec.rb
@@ -24,7 +24,7 @@
     page.within '.badge-settings' do
       wait_for_requests
 
-      rows = all('.card-body > div')
+      rows = all('.gl-card-body tbody tr')
       expect(rows.length).to eq 2
       expect(rows[0]).to have_content group_badge.link_url
       expect(rows[1]).to have_content project_badge.link_url
@@ -33,6 +33,7 @@
 
   context 'adding a badge', :js do
     it 'user can preview a badge' do
+      click_button 'Add badge'
       page.within '.badge-settings form' do
         fill_in 'badge-link-url', with: badge_link_url
         fill_in 'badge-image-url', with: badge_image_url
@@ -44,6 +45,7 @@
     end
 
     it do
+      click_button 'Add badge'
       page.within '.badge-settings' do
         fill_in 'badge-link-url', with: badge_link_url
         fill_in 'badge-image-url', with: badge_image_url
@@ -51,7 +53,7 @@
         click_button 'Add badge'
         wait_for_requests
 
-        within '.card-body' do
+        within '.gl-card-body' do
           expect(find('a')[:href]).to eq badge_link_url
           expect(find('a img')[:src]).to eq badge_image_url
         end
@@ -63,32 +65,35 @@
     it 'form is shown when clicking edit button in list' do
       page.within '.badge-settings' do
         wait_for_requests
-        rows = all('.card-body > div')
+        rows = all('.gl-card-body tbody tr')
         expect(rows.length).to eq 2
         rows[1].find('[aria-label="Edit"]').click
+      end
 
-        within 'form' do
-          expect(find('#badge-link-url').value).to eq project_badge.link_url
-          expect(find('#badge-image-url').value).to eq project_badge.image_url
-        end
+      page.within '.gl-modal' do
+        expect(find('#badge-link-url').value).to eq project_badge.link_url
+        expect(find('#badge-image-url').value).to eq project_badge.image_url
       end
     end
 
     it 'updates a badge when submitting the edit form' do
       page.within '.badge-settings' do
         wait_for_requests
-        rows = all('.card-body > div')
+        rows = all('.gl-card-body tbody tr')
         expect(rows.length).to eq 2
         rows[1].find('[aria-label="Edit"]').click
-        within 'form' do
-          fill_in 'badge-link-url', with: badge_link_url
-          fill_in 'badge-image-url', with: badge_image_url
+      end
 
-          click_button 'Save changes'
-          wait_for_requests
-        end
+      page.within '.gl-modal' do
+        fill_in 'badge-link-url', with: badge_link_url
+        fill_in 'badge-image-url', with: badge_image_url
 
-        rows = all('.card-body > div')
+        click_button 'Save changes'
+        wait_for_requests
+      end
+
+      page.within '.badge-settings' do
+        rows = all('.gl-card-body tbody tr')
         expect(rows.length).to eq 2
         expect(rows[1]).to have_content badge_link_url
       end
@@ -102,7 +107,7 @@ def click_delete_button(badge_row)
 
     it 'shows a modal when deleting a badge' do
       wait_for_requests
-      rows = all('.card-body > div')
+      rows = all('.gl-card-body tbody tr')
       expect(rows.length).to eq 2
 
       click_delete_button(rows[1])
@@ -112,14 +117,14 @@ def click_delete_button(badge_row)
 
     it 'deletes a badge when confirming the modal' do
       wait_for_requests
-      rows = all('.card-body > div')
+      rows = all('.gl-card-body tbody tr')
       expect(rows.length).to eq 2
       click_delete_button(rows[1])
 
       find('.modal .btn-danger').click
       wait_for_requests
 
-      rows = all('.card-body > div')
+      rows = all('.gl-card-body tbody tr')
       expect(rows.length).to eq 1
       expect(rows[0]).to have_content group_badge.link_url
     end
diff --git a/spec/frontend/badges/components/badge_form_spec.js b/spec/frontend/badges/components/badge_form_spec.js
index d7519f1f80df31..9609a29b7ed899 100644
--- a/spec/frontend/badges/components/badge_form_spec.js
+++ b/spec/frontend/badges/components/badge_form_spec.js
@@ -49,7 +49,7 @@ describe('BadgeForm component', () => {
   it('stops editing when cancel button is clicked', async () => {
     createComponent({ isEditing: true });
 
-    const cancelButton = wrapper.find('.row-content-block button');
+    const cancelButton = wrapper.findAll('[data-testid="action-buttons"] button').at(1);
 
     await cancelButton.trigger('click');
 
@@ -143,13 +143,13 @@ describe('BadgeForm component', () => {
   describe('if isEditing is false', () => {
     const props = { isEditing: false };
 
-    it('renders one button', () => {
+    it('renders two buttons', () => {
       createComponent(props);
 
       expect(wrapper.find('.row-content-block').exists()).toBe(false);
-      const buttons = wrapper.findAll('.form-group:last-of-type button');
+      const buttons = wrapper.findAll('[data-testid="action-buttons"] button');
 
-      expect(buttons).toHaveLength(1);
+      expect(buttons).toHaveLength(2);
       const buttonAddWrapper = buttons.at(0);
 
       expect(buttonAddWrapper.isVisible()).toBe(true);
@@ -164,15 +164,15 @@ describe('BadgeForm component', () => {
 
     it('renders two buttons', () => {
       createComponent(props);
-      const buttons = wrapper.findAll('.row-content-block button');
+      const buttons = wrapper.findAll('[data-testid="action-buttons"] button');
 
       expect(buttons).toHaveLength(2);
 
-      const saveButton = buttons.at(1);
+      const saveButton = buttons.at(0);
       expect(saveButton.isVisible()).toBe(true);
       expect(saveButton.text()).toBe('Save changes');
 
-      const cancelButton = buttons.at(0);
+      const cancelButton = buttons.at(1);
       expect(cancelButton.isVisible()).toBe(true);
       expect(cancelButton.text()).toBe('Cancel');
     });
diff --git a/spec/frontend/badges/components/badge_list_row_spec.js b/spec/frontend/badges/components/badge_list_row_spec.js
deleted file mode 100644
index cbbeb36ff33e9d..00000000000000
--- a/spec/frontend/badges/components/badge_list_row_spec.js
+++ /dev/null
@@ -1,119 +0,0 @@
-import Vue from 'vue';
-import Vuex from 'vuex';
-import { mount } from '@vue/test-utils';
-
-import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
-import BadgeListRow from '~/badges/components/badge_list_row.vue';
-import { GROUP_BADGE, PROJECT_BADGE } from '~/badges/constants';
-
-import createState from '~/badges/store/state';
-import mutations from '~/badges/store/mutations';
-import actions from '~/badges/store/actions';
-
-import { createDummyBadge } from '../dummy_badge';
-
-Vue.use(Vuex);
-
-describe('BadgeListRow component', () => {
-  let badge;
-  let wrapper;
-  let mockedActions;
-
-  const createComponent = (kind) => {
-    setHTMLFixture(`<div id="delete-badge-modal" class="modal"></div>`);
-
-    mockedActions = Object.fromEntries(Object.keys(actions).map((name) => [name, jest.fn()]));
-
-    const store = new Vuex.Store({
-      state: {
-        ...createState(),
-        kind: PROJECT_BADGE,
-      },
-      mutations,
-      actions: mockedActions,
-    });
-
-    badge = createDummyBadge();
-    badge.kind = kind;
-    wrapper = mount(BadgeListRow, {
-      attachTo: document.body,
-      store,
-      propsData: { badge },
-    });
-  };
-
-  afterEach(() => {
-    resetHTMLFixture();
-  });
-
-  describe('for a project badge', () => {
-    beforeEach(() => {
-      createComponent(PROJECT_BADGE);
-    });
-
-    it('renders the badge', () => {
-      const badgeImage = wrapper.find('.project-badge');
-
-      expect(badgeImage.exists()).toBe(true);
-      expect(badgeImage.attributes('src')).toBe(badge.renderedImageUrl);
-    });
-
-    it('renders the badge name', () => {
-      expect(wrapper.text()).toMatch(badge.name);
-    });
-
-    it('renders the badge link', () => {
-      expect(wrapper.text()).toMatch(badge.linkUrl);
-    });
-
-    it('renders the badge kind', () => {
-      expect(wrapper.text()).toMatch('Project Badge');
-    });
-
-    it('shows edit and delete buttons', () => {
-      const buttons = wrapper.findAll('.table-button-footer button');
-
-      expect(buttons).toHaveLength(2);
-      const editButton = buttons.at(0);
-
-      expect(editButton.isVisible()).toBe(true);
-      expect(editButton.element).toHaveSpriteIcon('pencil');
-
-      const deleteButton = buttons.at(1);
-      expect(deleteButton.isVisible()).toBe(true);
-      expect(deleteButton.element).toHaveSpriteIcon('remove');
-    });
-
-    it('calls editBadge when clicking then edit button', async () => {
-      const editButton = wrapper.find('.table-button-footer button:first-of-type');
-
-      await editButton.trigger('click');
-
-      expect(mockedActions.editBadge).toHaveBeenCalled();
-    });
-
-    it('calls updateBadgeInModal and shows modal when clicking then delete button', async () => {
-      const deleteButton = wrapper.find('.table-button-footer button:last-of-type');
-
-      await deleteButton.trigger('click');
-
-      expect(mockedActions.updateBadgeInModal).toHaveBeenCalled();
-    });
-  });
-
-  describe('for a group badge', () => {
-    beforeEach(() => {
-      createComponent(GROUP_BADGE);
-    });
-
-    it('renders the badge kind', () => {
-      expect(wrapper.text()).toMatch('Group Badge');
-    });
-
-    it('hides edit and delete buttons', () => {
-      const buttons = wrapper.findAll('.table-button-footer button');
-
-      expect(buttons).toHaveLength(0);
-    });
-  });
-});
diff --git a/spec/frontend/badges/components/badge_list_spec.js b/spec/frontend/badges/components/badge_list_spec.js
index 374b7b50af4faa..388e091d059b2b 100644
--- a/spec/frontend/badges/components/badge_list_spec.js
+++ b/spec/frontend/badges/components/badge_list_spec.js
@@ -1,14 +1,12 @@
+import { GlTable, GlButton } from '@gitlab/ui';
 import Vue from 'vue';
 import Vuex from 'vuex';
-import { mount } from '@vue/test-utils';
-
-import BadgeList from '~/badges/components/badge_list.vue';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
 import { GROUP_BADGE, PROJECT_BADGE } from '~/badges/constants';
-
 import createState from '~/badges/store/state';
 import mutations from '~/badges/store/mutations';
 import actions from '~/badges/store/actions';
-
+import BadgeList from '~/badges/components/badge_list.vue';
 import { createDummyBadge } from '../dummy_badge';
 
 Vue.use(Vuex);
@@ -21,9 +19,16 @@ const badges = Array.from({ length: numberOfDummyBadges }).map((_, idx) => ({
 
 describe('BadgeList component', () => {
   let wrapper;
+  let mockedActions;
+
+  const findTable = () => wrapper.findComponent(GlTable);
+  const findTableRow = (pos) => findTable().find('tbody').findAll('tr').at(pos);
+  const findButtons = () => wrapper.findByTestId('badge-actions').findAllComponents(GlButton);
+  const findEditButton = () => wrapper.findByTestId('edit-badge-button');
+  const findDeleteButton = () => wrapper.findByTestId('delete-badge');
 
   const createComponent = (customState) => {
-    const mockedActions = Object.fromEntries(Object.keys(actions).map((name) => [name, jest.fn()]));
+    mockedActions = Object.fromEntries(Object.keys(actions).map((name) => [name, jest.fn()]));
 
     const store = new Vuex.Store({
       state: {
@@ -35,28 +40,23 @@ describe('BadgeList component', () => {
       actions: mockedActions,
     });
 
-    wrapper = mount(BadgeList, { store });
+    wrapper = mountExtended(BadgeList, {
+      store,
+      stubs: {
+        GlTable,
+        GlButton,
+      },
+    });
   };
 
   describe('for project badges', () => {
-    it('renders a header with the badge count', () => {
-      createComponent({
-        kind: PROJECT_BADGE,
-        badges,
-      });
-
-      const header = wrapper.find('.card-header');
-
-      expect(header.text()).toMatchInterpolatedText('Your badges 3');
-    });
-
     it('renders a row for each badge', () => {
       createComponent({
         kind: PROJECT_BADGE,
         badges,
       });
 
-      const rows = wrapper.findAll('.gl-responsive-table-row');
+      const rows = findTable().find('tbody').findAll('tr');
 
       expect(rows).toHaveLength(numberOfDummyBadges);
     });
@@ -89,4 +89,60 @@ describe('BadgeList component', () => {
       expect(wrapper.text()).toMatch('This group has no badges');
     });
   });
+
+  describe('BadgeList item', () => {
+    beforeEach(() => {
+      createComponent({
+        kind: PROJECT_BADGE,
+        badges,
+      });
+    });
+
+    it('renders the badge', () => {
+      const badgeImage = wrapper.find('.project-badge');
+
+      expect(badgeImage.exists()).toBe(true);
+      expect(badgeImage.attributes('src')).toBe(badges[0].renderedImageUrl);
+    });
+
+    it('renders the badge name', () => {
+      const badgeCell = findTableRow(0).findAll('td').at(0);
+
+      expect(badgeCell.text()).toMatch(badges[0].name);
+    });
+
+    it('renders the badge link', () => {
+      expect(wrapper.text()).toMatch(badges[0].linkUrl);
+    });
+
+    it('renders the badge kind', () => {
+      expect(wrapper.text()).toMatch('Project Badge');
+    });
+
+    it('shows edit and delete buttons', () => {
+      expect(findButtons()).toHaveLength(2);
+
+      const editButton = findEditButton();
+
+      expect(editButton.isVisible()).toBe(true);
+      expect(editButton.element).toHaveSpriteIcon('pencil');
+
+      const deleteButton = findDeleteButton();
+
+      expect(deleteButton.isVisible()).toBe(true);
+      expect(deleteButton.element).toHaveSpriteIcon('remove');
+    });
+
+    it('calls editBadge when clicking then edit button', () => {
+      findEditButton().trigger('click');
+
+      expect(mockedActions.editBadge).toHaveBeenCalled();
+    });
+
+    it('calls updateBadgeInModal and shows modal when clicking then delete button', () => {
+      findDeleteButton().trigger('click');
+
+      expect(mockedActions.updateBadgeInModal).toHaveBeenCalled();
+    });
+  });
 });
diff --git a/spec/frontend/badges/components/badge_settings_spec.js b/spec/frontend/badges/components/badge_settings_spec.js
index 7ad2c99869c558..dcba895edf6125 100644
--- a/spec/frontend/badges/components/badge_settings_spec.js
+++ b/spec/frontend/badges/components/badge_settings_spec.js
@@ -1,10 +1,10 @@
-import { GlModal } from '@gitlab/ui';
+import { GlCard, GlTable } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import Vue, { nextTick } from 'vue';
+import Vue from 'vue';
 import Vuex from 'vuex';
-import BadgeList from '~/badges/components/badge_list.vue';
-import BadgeListRow from '~/badges/components/badge_list_row.vue';
 import BadgeSettings from '~/badges/components/badge_settings.vue';
+import BadgeList from '~/badges/components/badge_list.vue';
+import BadgeForm from '~/badges/components/badge_form.vue';
 import store from '~/badges/store';
 import { createDummyBadge } from '../dummy_badge';
 
@@ -22,8 +22,10 @@ describe('BadgeSettings component', () => {
     wrapper = shallowMount(BadgeSettings, {
       store,
       stubs: {
+        GlCard,
+        GlTable,
         'badge-list': BadgeList,
-        'badge-list-row': BadgeListRow,
+        'badge-form': BadgeForm,
       },
     });
   };
@@ -32,35 +34,35 @@ describe('BadgeSettings component', () => {
     createComponent();
   });
 
-  it('displays modal if button for deleting a badge is clicked', async () => {
-    const button = wrapper.find('[data-testid="delete-badge"]');
+  it('renders a header with the badge count', () => {
+    createComponent();
 
-    button.vm.$emit('click');
-    await nextTick();
+    const cardTitle = wrapper.find('.gl-new-card-title');
+    const cardCount = wrapper.find('.gl-new-card-count');
 
-    const modal = wrapper.findComponent(GlModal);
-    expect(modal.isVisible()).toBe(true);
+    expect(cardTitle.text()).toContain('Your badges');
+    expect(cardCount.text()).toContain('1');
   });
 
-  it('displays a form to add a badge', () => {
-    expect(wrapper.find('[data-testid="add-new-badge"]').isVisible()).toBe(true);
+  it('displays a table', () => {
+    expect(wrapper.findComponent(GlTable).isVisible()).toBe(true);
   });
 
-  it('displays badge list', () => {
+  it('renders badge add form', () => {
+    expect(wrapper.findComponent(BadgeForm).exists()).toBe(true);
+  });
+
+  it('renders badge list', () => {
     expect(wrapper.findComponent(BadgeList).isVisible()).toBe(true);
   });
 
   describe('when editing', () => {
     beforeEach(() => {
-      createComponent(true);
+      createComponent({ isEditing: true });
     });
 
     it('displays a form to edit a badge', () => {
       expect(wrapper.find('[data-testid="edit-badge"]').isVisible()).toBe(true);
     });
-
-    it('displays no badge list', () => {
-      expect(wrapper.findComponent(BadgeList).isVisible()).toBe(false);
-    });
   });
 });
-- 
GitLab