From 721d35d02cf32db936ea1d7eebfa0afadfacd880 Mon Sep 17 00:00:00 2001
From: Sascha Eggenberger <seggenberger@gitlab.com>
Date: Fri, 4 Aug 2023 15:06:00 +0200
Subject: [PATCH] Status checks settings: Use GlCard

Changelog: changed
EE: true
---
 .../status_checks/components/actions.vue      | 25 ++++++----
 .../status_checks/components/modal_create.vue |  2 +-
 .../components/status_checks.vue              | 47 +++++++++++++++++--
 ...e_request_status_checks_settings.html.haml |  6 ---
 .../settings/merge_requests_settings_spec.rb  |  2 +-
 .../status_checks/components/actions_spec.js  | 12 ++---
 .../components/status_checks_spec.js          |  8 ++--
 ...t_status_checks_settings.html.haml_spec.rb |  9 ----
 locale/gitlab.pot                             |  5 +-
 9 files changed, 72 insertions(+), 44 deletions(-)

diff --git a/ee/app/assets/javascripts/status_checks/components/actions.vue b/ee/app/assets/javascripts/status_checks/components/actions.vue
index a6392b75cc2f50..0e10b0bbfa8678 100644
--- a/ee/app/assets/javascripts/status_checks/components/actions.vue
+++ b/ee/app/assets/javascripts/status_checks/components/actions.vue
@@ -15,22 +15,31 @@ export default {
   },
   i18n: {
     editButton: __('Edit'),
-    removeButton: __('Remove...'),
+    removeButton: __('Remove'),
   },
 };
 </script>
 
 <template>
-  <div class="gl-display-flex gl-justify-content-end">
-    <gl-button data-testid="edit-btn" @click="$emit('open-update-modal', statusCheck)">
-      {{ $options.i18n.editButton }}
-    </gl-button>
+  <div class="gl-display-flex gl-justify-content-end gl-mt-n2 gl-mb-n2">
     <gl-button
+      size="small"
+      icon="pencil"
+      :title="$options.i18n.editButton"
+      :aria-label="$options.i18n.editButton"
+      data-testid="edit-btn"
+      @click="$emit('open-update-modal', statusCheck)"
+    />
+    <gl-button
+      size="small"
+      category="secondary"
+      variant="danger"
+      icon="remove"
       class="gl-ml-3"
+      :title="$options.i18n.removeButton"
+      :aria-label="$options.i18n.removeButton"
       data-testid="remove-btn"
       @click="$emit('open-delete-modal', statusCheck)"
-    >
-      {{ $options.i18n.removeButton }}
-    </gl-button>
+    />
   </div>
 </template>
diff --git a/ee/app/assets/javascripts/status_checks/components/modal_create.vue b/ee/app/assets/javascripts/status_checks/components/modal_create.vue
index 19f2a07408ce48..b65ace762f0407 100644
--- a/ee/app/assets/javascripts/status_checks/components/modal_create.vue
+++ b/ee/app/assets/javascripts/status_checks/components/modal_create.vue
@@ -25,7 +25,7 @@ export default {
 
 <template>
   <div>
-    <gl-button category="secondary" variant="confirm" size="small" @click="show()">
+    <gl-button category="secondary" size="small" @click="show">
       {{ $options.i18n.addButton }}
     </gl-button>
     <shared-modal
diff --git a/ee/app/assets/javascripts/status_checks/components/status_checks.vue b/ee/app/assets/javascripts/status_checks/components/status_checks.vue
index c0cfa8e3b4abe7..511aa48da47078 100644
--- a/ee/app/assets/javascripts/status_checks/components/status_checks.vue
+++ b/ee/app/assets/javascripts/status_checks/components/status_checks.vue
@@ -1,7 +1,8 @@
 <script>
-import { GlTable } from '@gitlab/ui';
+import { GlCard, GlTable, GlIcon, GlLink, GlSprintf } from '@gitlab/ui';
 import { mapState } from 'vuex';
 import { thWidthPercent } from '~/lib/utils/table_utility';
+import { helpPagePath } from '~/helpers/help_page_helper';
 import { __, s__ } from '~/locale';
 import { EMPTY_STATUS_CHECK } from '../constants';
 import Actions from './actions.vue';
@@ -11,8 +12,13 @@ import ModalDelete from './modal_delete.vue';
 import ModalUpdate from './modal_update.vue';
 
 export const i18n = {
+  title: s__('StatusCheck|Status checks'),
+  description: s__(
+    'StatusCheck|Check for a status response in merge requests. %{linkStart}Learn more%{linkEnd}.',
+  ),
   apiHeader: __('API'),
   branchHeader: __('Target branch'),
+  actionsHeader: __('Actions'),
   emptyTableText: s__('StatusCheck|No status checks are defined yet.'),
   nameHeader: s__('StatusCheck|Service name'),
 };
@@ -21,7 +27,11 @@ export default {
   components: {
     Actions,
     Branch,
+    GlCard,
     GlTable,
+    GlIcon,
+    GlLink,
+    GlSprintf,
     ModalCreate,
     ModalDelete,
     ModalUpdate,
@@ -63,16 +73,44 @@ export default {
     },
     {
       key: 'actions',
-      label: '',
+      label: i18n.actionsHeader,
+      thClass: 'gl-text-right',
       tdClass: 'gl-text-right',
     },
   ],
+  helpUrl: helpPagePath('/user/project/merge_requests/status_checks'),
   i18n,
 };
 </script>
 
 <template>
-  <div>
+  <gl-card
+    class="gl-new-card"
+    header-class="gl-new-card-header"
+    body-class="gl-new-card-body gl-px-0"
+  >
+    <template #header>
+      <div class="gl-new-card-title-wrapper gl-flex-direction-column">
+        <h5 class="gl-new-card-title">
+          {{ $options.i18n.title }}
+          <span class="gl-new-card-count">
+            <gl-icon name="check-circle" class="gl-mr-2" />
+            {{ statusChecks.length }}
+          </span>
+        </h5>
+        <p class="gl-new-card-description">
+          <gl-sprintf :message="$options.i18n.description">
+            <template #link>
+              <gl-link class="gl-font-sm" :href="$options.helpUrl" target="_blank">{{
+                __('Learn more')
+              }}</gl-link>
+            </template>
+          </gl-sprintf>
+        </p>
+      </div>
+      <modal-create />
+    </template>
+
     <gl-table
       :items="statusChecks"
       :fields="$options.fields"
@@ -94,8 +132,7 @@ export default {
       </template>
     </gl-table>
 
-    <modal-create />
     <modal-delete ref="deleteModal" :status-check="statusCheckToDelete" />
     <modal-update ref="updateModal" :status-check="statusCheckToUpdate" />
-  </div>
+  </gl-card>
 </template>
diff --git a/ee/app/views/projects/_merge_request_status_checks_settings.html.haml b/ee/app/views/projects/_merge_request_status_checks_settings.html.haml
index 08368731e262de..4a9915a99f0474 100644
--- a/ee/app/views/projects/_merge_request_status_checks_settings.html.haml
+++ b/ee/app/views/projects/_merge_request_status_checks_settings.html.haml
@@ -1,9 +1,3 @@
 .form-group
-  %b= s_('StatusCheck|Status checks')
-  %p.text-secondary
-    - link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('user/project/merge_requests/status_checks') }
-
-    = s_('StatusCheck|Check for a status response in merge requests. %{link_start}Learn more%{link_end}.').html_safe % { link_start: link_start, link_end: '</a>'.html_safe }
-
   #js-status-checks-settings{ status_checks_app_data(@project) }
     = gl_loading_icon(size: 'md')
diff --git a/ee/spec/features/projects/settings/merge_requests_settings_spec.rb b/ee/spec/features/projects/settings/merge_requests_settings_spec.rb
index 5ee220a4bbc585..59e8b706d73ba5 100644
--- a/ee/spec/features/projects/settings/merge_requests_settings_spec.rb
+++ b/ee/spec/features/projects/settings/merge_requests_settings_spec.rb
@@ -78,7 +78,7 @@
           expect(find('[data-testid="status-checks-table"]')).to have_content(rule.name)
 
           within('[data-testid="status-checks-table"]') do
-            click_button 'Remove...'
+            click_button 'Remove'
           end
 
           within('.modal-content') do
diff --git a/ee/spec/frontend/status_checks/components/actions_spec.js b/ee/spec/frontend/status_checks/components/actions_spec.js
index 4081f75e0ce096..9fe1c2dfe4d38a 100644
--- a/ee/spec/frontend/status_checks/components/actions_spec.js
+++ b/ee/spec/frontend/status_checks/components/actions_spec.js
@@ -31,12 +31,12 @@ describe('Status checks actions', () => {
   const findRemoveBtn = () => wrapper.findByTestId('remove-btn');
 
   describe.each`
-    text           | button           | event
-    ${'Edit'}      | ${findEditBtn}   | ${'open-update-modal'}
-    ${'Remove...'} | ${findRemoveBtn} | ${'open-delete-modal'}
-  `('$text button', ({ text, button, event }) => {
-    it(`renders the button text as '${text}'`, () => {
-      expect(button().text()).toBe(text);
+    ariaLabel   | button           | event
+    ${'Edit'}   | ${findEditBtn}   | ${'open-update-modal'}
+    ${'Remove'} | ${findRemoveBtn} | ${'open-delete-modal'}
+  `('$text button', ({ ariaLabel, button, event }) => {
+    it(`renders the button with the aria-label '${ariaLabel}'`, () => {
+      expect(button().attributes('aria-label')).toBe(ariaLabel);
     });
 
     it(`sends the status check with the '${event}' event`, () => {
diff --git a/ee/spec/frontend/status_checks/components/status_checks_spec.js b/ee/spec/frontend/status_checks/components/status_checks_spec.js
index ef2c50f1fe9410..bfb66699d0931d 100644
--- a/ee/spec/frontend/status_checks/components/status_checks_spec.js
+++ b/ee/spec/frontend/status_checks/components/status_checks_spec.js
@@ -1,4 +1,4 @@
-import { GlTable } from '@gitlab/ui';
+import { GlCard, GlTable } from '@gitlab/ui';
 import { mount, shallowMount } from '@vue/test-utils';
 import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
@@ -56,13 +56,13 @@ describe('Status checks', () => {
     });
 
     it('creates the create modal', () => {
-      createWrapper(shallowMount);
+      createWrapper(shallowMount, { stubs: { GlCard } });
 
       expect(findCreateModal().exists()).toBe(true);
     });
 
     it('creates the update modal', () => {
-      createWrapper(shallowMount);
+      createWrapper(shallowMount, { stubs: { GlCard } });
 
       expect(findUpdateModal().exists()).toBe(true);
     });
@@ -79,7 +79,7 @@ describe('Status checks', () => {
       expect(findHeaders().at(0).text()).toBe(i18n.nameHeader);
       expect(findHeaders().at(1).text()).toBe(i18n.apiHeader);
       expect(findHeaders().at(2).text()).toBe(i18n.branchHeader);
-      expect(findHeaders().at(3).text()).toBe('');
+      expect(findHeaders().at(3).text()).toBe(i18n.actionsHeader);
     });
 
     describe.each(statusChecks)('status check %#', (statusCheck) => {
diff --git a/ee/spec/views/projects/_merge_request_status_checks_settings.html.haml_spec.rb b/ee/spec/views/projects/_merge_request_status_checks_settings.html.haml_spec.rb
index 348ad962495197..826f5625ca74dc 100644
--- a/ee/spec/views/projects/_merge_request_status_checks_settings.html.haml_spec.rb
+++ b/ee/spec/views/projects/_merge_request_status_checks_settings.html.haml_spec.rb
@@ -13,15 +13,6 @@
     render
   end
 
-  it 'renders the settings title' do
-    expect(rendered).to have_content 'Status checks'
-  end
-
-  it 'renders the settings description', :aggregate_failures do
-    expect(rendered).to have_content 'Check for a status response in merge requests. Learn more.'
-    expect(rendered).to have_link 'Learn more', href: '/help/user/project/merge_requests/status_checks'
-  end
-
   it 'renders the settings app element', :aggregate_failures do
     expect(rendered).to have_selector '#js-status-checks-settings'
     expect(rendered).to have_selector "[data-status-checks-path='status-checks/path']"
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 8a5a9b38db10bc..c5fa5f11baa659 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -39057,9 +39057,6 @@ msgstr ""
 msgid "Remove user from project"
 msgstr ""
 
-msgid "Remove..."
-msgstr ""
-
 msgid "Removed"
 msgstr ""
 
@@ -45104,7 +45101,7 @@ msgstr ""
 msgid "StatusCheck|Apply this status check to all branches or a specific protected branch."
 msgstr ""
 
-msgid "StatusCheck|Check for a status response in merge requests. %{link_start}Learn more%{link_end}."
+msgid "StatusCheck|Check for a status response in merge requests. %{linkStart}Learn more%{linkEnd}."
 msgstr ""
 
 msgid "StatusCheck|Examples: QA, Security."
-- 
GitLab