Commit 7105f280 authored by Kushal Pandya's avatar Kushal Pandya

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

Integrate new GlCard component

See merge request gitlab-org/gitlab!42112
parents d3f5f211 aecea436
...@@ -43,7 +43,7 @@ export default { ...@@ -43,7 +43,7 @@ export default {
}; };
</script> </script>
<template> <template>
<gl-card> <gl-card class="gl-mb-5">
<template #header> <template #header>
<strong ref="title">{{ title }}</strong> <strong ref="title">{{ title }}</strong>
</template> </template>
......
...@@ -85,7 +85,7 @@ export default { ...@@ -85,7 +85,7 @@ export default {
<template> <template>
<div class="prometheus-panel-builder"> <div class="prometheus-panel-builder">
<div class="gl-xs-flex-direction-column gl-display-flex gl-mx-n3"> <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> <template #header>
<h2 class="gl-font-size-h2 gl-my-3">{{ s__('Metrics|1. Define and preview panel') }}</h2> <h2 class="gl-font-size-h2 gl-my-3">{{ s__('Metrics|1. Define and preview panel') }}</h2>
</template> </template>
...@@ -124,7 +124,7 @@ export default { ...@@ -124,7 +124,7 @@ export default {
</gl-card> </gl-card>
<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" body-class="gl-display-flex gl-flex-direction-column"
> >
<template #header> <template #header>
......
...@@ -73,7 +73,7 @@ export default { ...@@ -73,7 +73,7 @@ export default {
<template> <template>
<gl-card <gl-card
v-show="numCharts > 0" 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" header-class="d-flex align-items-center border-bottom-0 py-2"
:body-class="bodyClass" :body-class="bodyClass"
> >
......
...@@ -27,7 +27,7 @@ export default { ...@@ -27,7 +27,7 @@ export default {
<h4 data-testid="test-coverage-header"> <h4 data-testid="test-coverage-header">
{{ $options.text.codeCoverageHeader }} {{ $options.text.codeCoverageHeader }}
</h4> </h4>
<test-coverage-table v-if="shouldShowCoverageReport" /> <test-coverage-table v-if="shouldShowCoverageReport" class="gl-mb-5" />
<download-test-coverage /> <download-test-coverage />
</div> </div>
</template> </template>
...@@ -100,7 +100,7 @@ export default { ...@@ -100,7 +100,7 @@ export default {
<template> <template>
<div v-if="showCards" class="row gl-mt-6"> <div v-if="showCards" class="row gl-mt-6">
<div v-for="(column, index) in columns" :key="index" class="col-sm-3"> <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>{{ column.title }}</span>
<span class="gl-font-size-h2 gl-font-weight-bold">{{ column.value }}</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" /> <gl-icon v-if="column.icon" name="issues" :size="12" class="gl-text-gray-500" />
......
...@@ -194,7 +194,7 @@ export default { ...@@ -194,7 +194,7 @@ export default {
</gl-alert> </gl-alert>
<template v-if="isLoadingProfiles"> <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> <template #header>
<gl-skeleton-loader :width="1248" :height="15"> <gl-skeleton-loader :width="1248" :height="15">
<rect x="0" y="0" width="300" height="15" rx="4" /> <rect x="0" y="0" width="300" height="15" rx="4" />
...@@ -211,6 +211,7 @@ export default { ...@@ -211,6 +211,7 @@ export default {
<template v-else-if="!failedToLoadProfiles"> <template v-else-if="!failedToLoadProfiles">
<on-demand-scans-scanner-profile-selector <on-demand-scans-scanner-profile-selector
v-model="form.dastScannerProfileId" v-model="form.dastScannerProfileId"
class="gl-mb-5"
:profiles="scannerProfiles" :profiles="scannerProfiles"
/> />
<on-demand-scans-site-profile-selector <on-demand-scans-site-profile-selector
......
...@@ -109,7 +109,7 @@ export default { ...@@ -109,7 +109,7 @@ export default {
<security-reports-summary <security-reports-summary
v-if="securityReportSummary" v-if="securityReportSummary"
:summary="securityReportSummary" :summary="securityReportSummary"
class="gl-mt-5" class="gl-my-5"
/> />
<security-dashboard <security-dashboard
:vulnerabilities-endpoint="vulnerabilitiesEndpoint" :vulnerabilities-endpoint="vulnerabilitiesEndpoint"
......
...@@ -2,22 +2,19 @@ ...@@ -2,22 +2,19 @@
exports[`GroupActivity component matches the snapshot 1`] = ` exports[`GroupActivity component matches the snapshot 1`] = `
<div <div
class="card" class="gl-card gl-mb-5"
> >
<!---->
<div <div
class="card-header" class="gl-card-header"
> >
<strong> <strong>
Recent activity (last 90 days) Recent activity (last 90 days)
</strong> </strong>
</div> </div>
<div <div
class="card-body" class="gl-card-body"
> >
<!---->
<!---->
<div <div
class="gl-display-flex" class="gl-display-flex"
> >
...@@ -76,9 +73,8 @@ exports[`GroupActivity component matches the snapshot 1`] = ` ...@@ -76,9 +73,8 @@ exports[`GroupActivity component matches the snapshot 1`] = `
</p> </p>
</div> </div>
</div> </div>
</div> </div>
<!---->
<!----> <!---->
</div> </div>
`; `;
...@@ -2,13 +2,12 @@ ...@@ -2,13 +2,12 @@
exports[`OnDemandScansScannerProfileSelector renders properly with profiles 1`] = ` exports[`OnDemandScansScannerProfileSelector renders properly with profiles 1`] = `
<div <div
class="card" class="gl-card"
data-foo="bar" data-foo="bar"
value="gid://gitlab/DastScannerProfile/1" value="gid://gitlab/DastScannerProfile/1"
> >
<!---->
<div <div
class="card-header" class="gl-card-header"
> >
<div <div
class="row" class="row"
...@@ -46,11 +45,10 @@ exports[`OnDemandScansScannerProfileSelector renders properly with profiles 1`] ...@@ -46,11 +45,10 @@ exports[`OnDemandScansScannerProfileSelector renders properly with profiles 1`]
</div> </div>
</div> </div>
</div> </div>
<div <div
class="card-body" class="gl-card-body"
> >
<!---->
<!---->
<fieldset <fieldset
class="form-group gl-form-group" class="form-group gl-form-group"
...@@ -318,21 +316,19 @@ exports[`OnDemandScansScannerProfileSelector renders properly with profiles 1`] ...@@ -318,21 +316,19 @@ exports[`OnDemandScansScannerProfileSelector renders properly with profiles 1`]
<!----> <!---->
</div> </div>
</fieldset> </fieldset>
</div> </div>
<!---->
<!----> <!---->
</div> </div>
`; `;
exports[`OnDemandScansScannerProfileSelector renders properly without profiles 1`] = ` exports[`OnDemandScansScannerProfileSelector renders properly without profiles 1`] = `
<div <div
class="card" class="gl-card"
data-foo="bar" data-foo="bar"
> >
<!---->
<div <div
class="card-header" class="gl-card-header"
> >
<div <div
class="row" class="row"
...@@ -371,11 +367,10 @@ exports[`OnDemandScansScannerProfileSelector renders properly without profiles 1 ...@@ -371,11 +367,10 @@ exports[`OnDemandScansScannerProfileSelector renders properly without profiles 1
</div> </div>
</div> </div>
</div> </div>
<div <div
class="card-body" class="gl-card-body"
> >
<!---->
<!---->
<p <p
class="gl-text-gray-700" class="gl-text-gray-700"
...@@ -398,9 +393,8 @@ exports[`OnDemandScansScannerProfileSelector renders properly without profiles 1 ...@@ -398,9 +393,8 @@ exports[`OnDemandScansScannerProfileSelector renders properly without profiles 1
Create a new scanner profile Create a new scanner profile
</span> </span>
</a> </a>
</div> </div>
<!---->
<!----> <!---->
</div> </div>
`; `;
...@@ -2,13 +2,12 @@ ...@@ -2,13 +2,12 @@
exports[`OnDemandScansSiteProfileSelector renders properly with profiles 1`] = ` exports[`OnDemandScansSiteProfileSelector renders properly with profiles 1`] = `
<div <div
class="card" class="gl-card"
data-foo="bar" data-foo="bar"
value="gid://gitlab/DastSiteProfile/1" value="gid://gitlab/DastSiteProfile/1"
> >
<!---->
<div <div
class="card-header" class="gl-card-header"
> >
<div <div
class="row" class="row"
...@@ -46,11 +45,10 @@ exports[`OnDemandScansSiteProfileSelector renders properly with profiles 1`] = ` ...@@ -46,11 +45,10 @@ exports[`OnDemandScansSiteProfileSelector renders properly with profiles 1`] = `
</div> </div>
</div> </div>
</div> </div>
<div <div
class="card-body" class="gl-card-body"
> >
<!---->
<!---->
<fieldset <fieldset
class="form-group gl-form-group" class="form-group gl-form-group"
...@@ -222,21 +220,19 @@ exports[`OnDemandScansSiteProfileSelector renders properly with profiles 1`] = ` ...@@ -222,21 +220,19 @@ exports[`OnDemandScansSiteProfileSelector renders properly with profiles 1`] = `
<!----> <!---->
</div> </div>
</fieldset> </fieldset>
</div> </div>
<!---->
<!----> <!---->
</div> </div>
`; `;
exports[`OnDemandScansSiteProfileSelector renders properly without profiles 1`] = ` exports[`OnDemandScansSiteProfileSelector renders properly without profiles 1`] = `
<div <div
class="card" class="gl-card"
data-foo="bar" data-foo="bar"
> >
<!---->
<div <div
class="card-header" class="gl-card-header"
> >
<div <div
class="row" class="row"
...@@ -275,11 +271,10 @@ exports[`OnDemandScansSiteProfileSelector renders properly without profiles 1`] ...@@ -275,11 +271,10 @@ exports[`OnDemandScansSiteProfileSelector renders properly without profiles 1`]
</div> </div>
</div> </div>
</div> </div>
<div <div
class="card-body" class="gl-card-body"
> >
<!---->
<!---->
<p <p
class="gl-text-gray-700" class="gl-text-gray-700"
...@@ -302,9 +297,8 @@ exports[`OnDemandScansSiteProfileSelector renders properly without profiles 1`] ...@@ -302,9 +297,8 @@ exports[`OnDemandScansSiteProfileSelector renders properly without profiles 1`]
Create a new site profile Create a new site profile
</span> </span>
</a> </a>
</div> </div>
<!---->
<!----> <!---->
</div> </div>
`; `;
...@@ -33,13 +33,13 @@ RSpec.describe 'Project > Settings > CI/CD > Container registry tag expiration p ...@@ -33,13 +33,13 @@ RSpec.describe 'Project > Settings > CI/CD > Container registry tag expiration p
subject subject
within '#js-registry-policies' do 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('7 days until tags are automatically removed', from: 'Expiration interval:')
select('Every day', from: 'Expiration schedule:') select('Every day', from: 'Expiration schedule:')
select('50 tags per image name', from: 'Number of tags to retain:') 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') fill_in('Tags with names matching this regex pattern will expire:', with: '.*-production')
end 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 expect(submit_button).not_to be_disabled
submit_button.click submit_button.click
end end
...@@ -51,10 +51,10 @@ RSpec.describe 'Project > Settings > CI/CD > Container registry tag expiration p ...@@ -51,10 +51,10 @@ RSpec.describe 'Project > Settings > CI/CD > Container registry tag expiration p
subject subject
within '#js-registry-policies' do 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') fill_in('Tags with names matching this regex pattern will expire:', with: '*-production')
end 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 expect(submit_button).not_to be_disabled
submit_button.click submit_button.click
end end
...@@ -85,7 +85,7 @@ RSpec.describe 'Project > Settings > CI/CD > Container registry tag expiration p ...@@ -85,7 +85,7 @@ RSpec.describe 'Project > Settings > CI/CD > Container registry tag expiration p
within '#js-registry-policies' do within '#js-registry-policies' do
case result case result
when :available_section 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 when :disabled_message
expect(find('.gl-alert-title')).to have_content('Cleanup policy for tags is disabled') expect(find('.gl-alert-title')).to have_content('Cleanup policy for tags is disabled')
end end
......
...@@ -73,7 +73,7 @@ describe('Embed Group', () => { ...@@ -73,7 +73,7 @@ describe('Embed Group', () => {
metricsWithDataGetter.mockReturnValue([1]); metricsWithDataGetter.mockReturnValue([1]);
mountComponent({ shallow: false, stubs: { MetricEmbed: true } }); 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 => { it('collapses when clicked', done => {
...@@ -83,7 +83,7 @@ describe('Embed Group', () => { ...@@ -83,7 +83,7 @@ describe('Embed Group', () => {
wrapper.find(GlButton).trigger('click'); wrapper.find(GlButton).trigger('click');
wrapper.vm.$nextTick(() => { wrapper.vm.$nextTick(() => {
expect(wrapper.find('.card-body').classes()).toContain('d-none'); expect(wrapper.find('.gl-card-body').classes()).toContain('d-none');
done(); done();
}); });
}); });
......
...@@ -866,10 +866,10 @@ ...@@ -866,10 +866,10 @@
resolved "https://registry.yarnpkg.com/@gitlab/svgs/-/svgs-1.175.0.tgz#734f341784af1cd1d62d160a17bcdfb61ff7b04d" resolved "https://registry.yarnpkg.com/@gitlab/svgs/-/svgs-1.175.0.tgz#734f341784af1cd1d62d160a17bcdfb61ff7b04d"
integrity sha512-gXpc87TGSXIzfAr4QER1Qw1v3P47pBO6BXkma52blgwXVmcFNe3nhQzqsqt66wKNzrIrk3lAcB4GUyPHbPVXpg== integrity sha512-gXpc87TGSXIzfAr4QER1Qw1v3P47pBO6BXkma52blgwXVmcFNe3nhQzqsqt66wKNzrIrk3lAcB4GUyPHbPVXpg==
"@gitlab/ui@22.0.3": "@gitlab/ui@23.0.0":
version "22.0.3" version "23.0.0"
resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-22.0.3.tgz#5c2cf8fa6cb95dea63b7ad390a310eb4b1dfc793" resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-23.0.0.tgz#c6b96220c0a7f8f249e06b8ad67ddf53ded89e33"
integrity sha512-mTVNQTZwWtHJW03EpJEhdP+ZHYHFuIzamrskH7Sa1VdLce86zIeagi79tu2xZvf70CaQ7QhVZfVZIl5kJYMtfg== integrity sha512-y5WIkDHq4VS3eFQDOkQNrfroDu8rNyWLVhTE89oZ1zxlOh228yXdql8FccNTnRaPhC1YbZLGcvDJzYsWXht58A==
dependencies: dependencies:
"@babel/standalone" "^7.0.0" "@babel/standalone" "^7.0.0"
"@gitlab/vue-toasted" "^1.3.0" "@gitlab/vue-toasted" "^1.3.0"
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment