Merge branch '287-card-component-gitlab-ui-integration-test' into 'master'

Integrate new GlCard component

See merge request gitlab-org/gitlab!42112

app/assets/javascripts/analytics/shared/components/metric_card.vue

@@ -43,7 +43,7 @@ export default {
 };
 </script>
 <template>
-  <gl-card>
+  <gl-card class="gl-mb-5">
     <template #header>
       <strong ref="title">{{ title }}</strong>
     </template>

app/assets/javascripts/monitoring/components/dashboard_panel_builder.vue

@@ -85,7 +85,7 @@ export default {
 <template>
   <div class="prometheus-panel-builder">
     <div class="gl-xs-flex-direction-column gl-display-flex gl-mx-n3">
-      <gl-card class="gl-flex-grow-1 gl-flex-basis-0 gl-mx-3">
+      <gl-card class="gl-flex-grow-1 gl-flex-basis-0 gl-mx-3 gl-mb-5">
         <template #header>
           <h2 class="gl-font-size-h2 gl-my-3">{{ s__('Metrics|1. Define and preview panel') }}</h2>
         </template>
@@ -124,7 +124,7 @@ export default {
       </gl-card>
 
       <gl-card
-        class="gl-flex-grow-1 gl-flex-basis-0 gl-mx-3"
+        class="gl-flex-grow-1 gl-flex-basis-0 gl-mx-3 gl-mb-5"
         body-class="gl-display-flex gl-flex-direction-column"
       >
         <template #header>

app/assets/javascripts/monitoring/components/embeds/embed_group.vue

@@ -73,7 +73,7 @@ export default {
 <template>
   <gl-card
     v-show="numCharts > 0"
-    class="collapsible-card border p-0 mb-3"
+    class="collapsible-card border p-0 gl-mb-5"
     header-class="d-flex align-items-center border-bottom-0 py-2"
     :body-class="bodyClass"
   >

ee/app/assets/javascripts/analytics/repository_analytics/components/group_repository_analytics.vue

@@ -27,7 +27,7 @@ export default {
     <h4 data-testid="test-coverage-header">
       {{ $options.text.codeCoverageHeader }}
     </h4>
-    <test-coverage-table v-if="shouldShowCoverageReport" />
+    <test-coverage-table v-if="shouldShowCoverageReport" class="gl-mb-5" />
     <download-test-coverage />
   </div>
 </template>

ee/app/assets/javascripts/iterations/components/iteration_report_summary.vue

@@ -100,7 +100,7 @@ export default {
 <template>
   <div v-if="showCards" class="row gl-mt-6">
     <div v-for="(column, index) in columns" :key="index" class="col-sm-3">
-      <gl-card :class="$options.cardClass" :body-class="$options.cardBodyClass">
+      <gl-card :class="$options.cardClass" :body-class="$options.cardBodyClass" class="gl-mb-5">
         <span>{{ column.title }}</span>
         <span class="gl-font-size-h2 gl-font-weight-bold">{{ column.value }}</span>
         <gl-icon v-if="column.icon" name="issues" :size="12" class="gl-text-gray-500" />

ee/app/assets/javascripts/on_demand_scans/components/on_demand_scans_form.vue

@@ -194,7 +194,7 @@ export default {
     </gl-alert>
 
     <template v-if="isLoadingProfiles">
-      <gl-card v-for="i in 2" :key="i">
+      <gl-card v-for="i in 2" :key="i" class="gl-mb-5">
         <template #header>
           <gl-skeleton-loader :width="1248" :height="15">
             <rect x="0" y="0" width="300" height="15" rx="4" />
@@ -211,6 +211,7 @@ export default {
     <template v-else-if="!failedToLoadProfiles">
       <on-demand-scans-scanner-profile-selector
         v-model="form.dastScannerProfileId"
+        class="gl-mb-5"
         :profiles="scannerProfiles"
       />
       <on-demand-scans-site-profile-selector

ee/app/assets/javascripts/security_dashboard/components/pipeline_security_dashboard.vue

@@ -109,7 +109,7 @@ export default {
     <security-reports-summary
       v-if="securityReportSummary"
       :summary="securityReportSummary"
-      class="gl-mt-5"
+      class="gl-my-5"
     />
     <security-dashboard
       :vulnerabilities-endpoint="vulnerabilitiesEndpoint"

ee/spec/frontend/analytics/group_analytics/components/__snapshots__/group_activity_card_spec.js.snap

@@ -2,22 +2,19 @@
 
 exports[`GroupActivity component matches the snapshot 1`] = `
 <div
-  class="card"
+  class="gl-card gl-mb-5"
 >
-  <!---->
   <div
-    class="card-header"
+    class="gl-card-header"
   >
     <strong>
       Recent activity (last 90 days)
     </strong>
   </div>
+   
   <div
-    class="card-body"
+    class="gl-card-body"
   >
-    <!---->
-    <!---->
-     
     <div
       class="gl-display-flex"
     >
@@ -76,9 +73,8 @@ exports[`GroupActivity component matches the snapshot 1`] = `
         </p>
       </div>
     </div>
-     
   </div>
-  <!---->
+   
   <!---->
 </div>
 `;

ee/spec/frontend/on_demand_scans/components/profile_selector/__snapshots__/scanner_profile_selector_spec.js.snap

@@ -2,13 +2,12 @@
 
 exports[`OnDemandScansScannerProfileSelector renders properly with profiles 1`] = `
 <div
-  class="card"
+  class="gl-card"
   data-foo="bar"
   value="gid://gitlab/DastScannerProfile/1"
 >
-  <!---->
   <div
-    class="card-header"
+    class="gl-card-header"
   >
     <div
       class="row"
@@ -46,11 +45,10 @@ exports[`OnDemandScansScannerProfileSelector renders properly with profiles 1`]
       </div>
     </div>
   </div>
+   
   <div
-    class="card-body"
+    class="gl-card-body"
   >
-    <!---->
-    <!---->
      
     <fieldset
       class="form-group gl-form-group"
@@ -318,21 +316,19 @@ exports[`OnDemandScansScannerProfileSelector renders properly with profiles 1`]
         <!---->
       </div>
     </fieldset>
-     
   </div>
-  <!---->
+   
   <!---->
 </div>
 `;
 
 exports[`OnDemandScansScannerProfileSelector renders properly without profiles 1`] = `
 <div
-  class="card"
+  class="gl-card"
   data-foo="bar"
 >
-  <!---->
   <div
-    class="card-header"
+    class="gl-card-header"
   >
     <div
       class="row"
@@ -371,11 +367,10 @@ exports[`OnDemandScansScannerProfileSelector renders properly without profiles 1
       </div>
     </div>
   </div>
+   
   <div
-    class="card-body"
+    class="gl-card-body"
   >
-    <!---->
-    <!---->
      
     <p
       class="gl-text-gray-700"
@@ -398,9 +393,8 @@ exports[`OnDemandScansScannerProfileSelector renders properly without profiles 1
         Create a new scanner profile
       </span>
     </a>
-     
   </div>
-  <!---->
+   
   <!---->
 </div>
 `;

ee/spec/frontend/on_demand_scans/components/profile_selector/__snapshots__/site_profile_selector_spec.js.snap

@@ -2,13 +2,12 @@
 
 exports[`OnDemandScansSiteProfileSelector renders properly with profiles 1`] = `
 <div
-  class="card"
+  class="gl-card"
   data-foo="bar"
   value="gid://gitlab/DastSiteProfile/1"
 >
-  <!---->
   <div
-    class="card-header"
+    class="gl-card-header"
   >
     <div
       class="row"
@@ -46,11 +45,10 @@ exports[`OnDemandScansSiteProfileSelector renders properly with profiles 1`] = `
       </div>
     </div>
   </div>
+   
   <div
-    class="card-body"
+    class="gl-card-body"
   >
-    <!---->
-    <!---->
      
     <fieldset
       class="form-group gl-form-group"
@@ -222,21 +220,19 @@ exports[`OnDemandScansSiteProfileSelector renders properly with profiles 1`] = `
         <!---->
       </div>
     </fieldset>
-     
   </div>
-  <!---->
+   
   <!---->
 </div>
 `;
 
 exports[`OnDemandScansSiteProfileSelector renders properly without profiles 1`] = `
 <div
-  class="card"
+  class="gl-card"
   data-foo="bar"
 >
-  <!---->
   <div
-    class="card-header"
+    class="gl-card-header"
   >
     <div
       class="row"
@@ -275,11 +271,10 @@ exports[`OnDemandScansSiteProfileSelector renders properly without profiles 1`]
       </div>
     </div>
   </div>
+   
   <div
-    class="card-body"
+    class="gl-card-body"
   >
-    <!---->
-    <!---->
      
     <p
       class="gl-text-gray-700"
@@ -302,9 +297,8 @@ exports[`OnDemandScansSiteProfileSelector renders properly without profiles 1`]
         Create a new site profile
       </span>
     </a>
-     
   </div>
-  <!---->
+   
   <!---->
 </div>
 `;

package.json

@@ -44,7 +44,7 @@
     "@babel/preset-env": "^7.10.1",
     "@gitlab/at.js": "1.5.5",
     "@gitlab/svgs": "1.175.0",
-    "@gitlab/ui": "22.0.3",
+    "@gitlab/ui": "23.0.0",
     "@gitlab/visual-review-tools": "1.6.1",
     "@rails/actioncable": "^6.0.3-3",
     "@rails/ujs": "^6.0.3-2",

spec/features/projects/settings/registry_settings_spec.rb

@@ -33,13 +33,13 @@ RSpec.describe 'Project > Settings > CI/CD > Container registry tag expiration p
       subject
 
       within '#js-registry-policies' do
-        within '.card-body' do
+        within '.gl-card-body' do
           select('7 days until tags are automatically removed', from: 'Expiration interval:')
           select('Every day', from: 'Expiration schedule:')
           select('50 tags per image name', from: 'Number of tags to retain:')
           fill_in('Tags with names matching this regex pattern will expire:', with: '.*-production')
         end
-        submit_button = find('.card-footer .btn.btn-success')
+        submit_button = find('.gl-card-footer .btn.btn-success')
         expect(submit_button).not_to be_disabled
         submit_button.click
       end
@@ -51,10 +51,10 @@ RSpec.describe 'Project > Settings > CI/CD > Container registry tag expiration p
       subject
 
       within '#js-registry-policies' do
-        within '.card-body' do
+        within '.gl-card-body' do
           fill_in('Tags with names matching this regex pattern will expire:', with: '*-production')
         end
-        submit_button = find('.card-footer .btn.btn-success')
+        submit_button = find('.gl-card-footer .btn.btn-success')
         expect(submit_button).not_to be_disabled
         submit_button.click
       end
@@ -85,7 +85,7 @@ RSpec.describe 'Project > Settings > CI/CD > Container registry tag expiration p
         within '#js-registry-policies' do
           case result
           when :available_section
-            expect(find('.card-header')).to have_content('Tag expiration policy')
+            expect(find('.gl-card-header')).to have_content('Tag expiration policy')
           when :disabled_message
             expect(find('.gl-alert-title')).to have_content('Cleanup policy for tags is disabled')
           end

spec/frontend/monitoring/components/embeds/embed_group_spec.js

@@ -73,7 +73,7 @@ describe('Embed Group', () => {
       metricsWithDataGetter.mockReturnValue([1]);
       mountComponent({ shallow: false, stubs: { MetricEmbed: true } });
 
-      expect(wrapper.find('.card-body').classes()).not.toContain('d-none');
+      expect(wrapper.find('.gl-card-body').classes()).not.toContain('d-none');
     });
 
     it('collapses when clicked', done => {
@@ -83,7 +83,7 @@ describe('Embed Group', () => {
       wrapper.find(GlButton).trigger('click');
 
       wrapper.vm.$nextTick(() => {
-        expect(wrapper.find('.card-body').classes()).toContain('d-none');
+        expect(wrapper.find('.gl-card-body').classes()).toContain('d-none');
         done();
       });
     });

yarn.lock

@@ -866,10 +866,10 @@
   resolved "https://registry.yarnpkg.com/@gitlab/svgs/-/svgs-1.175.0.tgz#734f341784af1cd1d62d160a17bcdfb61ff7b04d"
   integrity sha512-gXpc87TGSXIzfAr4QER1Qw1v3P47pBO6BXkma52blgwXVmcFNe3nhQzqsqt66wKNzrIrk3lAcB4GUyPHbPVXpg==
 
-"@gitlab/ui@22.0.3":
-  version "22.0.3"
-  resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-22.0.3.tgz#5c2cf8fa6cb95dea63b7ad390a310eb4b1dfc793"
-  integrity sha512-mTVNQTZwWtHJW03EpJEhdP+ZHYHFuIzamrskH7Sa1VdLce86zIeagi79tu2xZvf70CaQ7QhVZfVZIl5kJYMtfg==
+"@gitlab/ui@23.0.0":
+  version "23.0.0"
+  resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-23.0.0.tgz#c6b96220c0a7f8f249e06b8ad67ddf53ded89e33"
+  integrity sha512-y5WIkDHq4VS3eFQDOkQNrfroDu8rNyWLVhTE89oZ1zxlOh228yXdql8FccNTnRaPhC1YbZLGcvDJzYsWXht58A==
   dependencies:
     "@babel/standalone" "^7.0.0"
     "@gitlab/vue-toasted" "^1.3.0"