Skip to content

Integrate new GlCard component

What does this MR do?

Integration branch for gitlab-ui!1314 (merged)

Migrates <gl-card> occurrences in:

  • integrations/edit/components/jira_issues_fields.vue
  • registry/settings/components/settings_form.vue
  • monitoring/components/dashboard_panel_builder.vue
  • monitoring/components/embeds/embed_group.vue
  • analytics/shared/components/metric_card.vue
  • security_configuration/dast_site_profiles_form/components/dast_site_validation.vue
  • security_configuration/components/auto_fix_settings.vue
  • security_dashboard/components/security_reports_summary.vue
  • on_demand_scans/components/profile_selector/profile_selector.vue
  • on_demand_scans/components/on_demand_scans_form.vue
  • iterations/components/iteration_report_summary.vue
  • analytics/repository_analytics/components/test_coverage_table.vue
  • analytics/repository_analytics/components/download_test_coverage.vue

How to integrate those changes?

The only difference is that the new GlCard component doesn't have a 16px bottom margin anymore, which results in some layouts looking a bit off when there are elements below a GlCard component. When that happens, we should add the .gl-mb-5 utility class where appropriate to restore the necessary spacing between elements.

Screenshots

Area Before After
integrations/edit/components/jira_issues_fields.vue Screen_Shot_2020-10-27_at_2.33.53_PM Screen_Shot_2020-10-27_at_2.34.47_PM
registry/settings/components/settings_form.vue before after
monitoring/components/dashboard_panel_builder.vue before after
monitoring/components/embeds/embed_group.vue See discussion after
analytics/shared/components/metric_card.vue before after
security_configuration/dast_site_profiles_form/components/dast_site_validation.vue before after
security_configuration/components/auto_fix_settings.vue before after
security_dashboard/components/security_reports_summary.vue before after
on_demand_scans/components/profile_selector/profile_selector.vue before after
on_demand_scans/components/on_demand_scans_form.vue Same as above Same as above
iterations/components/iteration_report_summary.vue before after
analytics/repository_analytics/components/test_coverage_table.vue before after
analytics/repository_analytics/components/download_test_coverage.vue before after

Does this MR meet the acceptance criteria?

Conformity

Availability and Testing

Security

If this MR contains changes to processing or storing of credentials or tokens, authorization and authentication methods and other items described in the security review guidelines:

  • Label as security and @ mention @gitlab-com/gl-security/appsec
  • The MR includes necessary changes to maintain consistency between UI, API, email, or other methods
  • Security reports checked/validated by a reviewer from the AppSec team
Edited by Paul Gascou-Vaillancourt

Merge request reports