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 {
};
</script>
<template>
<gl-card>
<gl-card class="gl-mb-5">
<template #header>
<strong ref="title">{{ title }}</strong>
</template>
......
......@@ -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>
......
......@@ -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"
>
......
......@@ -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>
......@@ -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" />
......
......@@ -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
......
......@@ -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"
......
......@@ -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>
`;
......@@ -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,12 +45,11 @@ 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,12 +367,11 @@ 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>
`;
......@@ -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,12 +45,11 @@ 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,12 +271,11 @@ 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>
`;
......@@ -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
......
......@@ -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();
});
});
......
......@@ -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"
......
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