Commit 812c859e authored by Nathan Friend's avatar Nathan Friend

Merge branch '207810-remove-css-in-js-for-the-secure-vue-files' into 'master'

Remove CSS in JS for the secure Vue files

See merge request gitlab-org/gitlab!29659
parents be162f0b 62be31c5
......@@ -85,6 +85,7 @@
.gl-bg-blue-50 { @include gl-bg-blue-50; }
.gl-bg-red-100 { @include gl-bg-red-100; }
.gl-bg-orange-100 { @include gl-bg-orange-100; }
.gl-bg-gray-50 { @include gl-bg-gray-50; }
.gl-bg-gray-100 { @include gl-bg-gray-100; }
.gl-bg-green-100 { @include gl-bg-green-100;}
.gl-bg-blue-500 { @include gl-bg-blue-500; }
......@@ -107,8 +108,14 @@
.gl-text-green-700 { @include gl-text-green-700; }
.gl-align-items-center { @include gl-align-items-center; }
.d-sm-table-column {
@include media-breakpoint-up(sm) {
display: table-column !important;
}
}
.gl-white-space-normal { @include gl-white-space-normal; }
.gl-word-break-all { @include gl-word-break-all; }
.gl-line-height-inherit { line-height: inherit; }
.gl-text-align-inherit { text-align: inherit; }
......@@ -58,7 +58,12 @@ export default {
<template>
<div class="dashboard-filter">
<strong class="js-name">{{ filter.name }}</strong>
<gl-dropdown ref="dropdown" class="d-block mt-1" menu-class="dropdown-extended-height">
<gl-dropdown
ref="dropdown"
class="d-block mt-1"
menu-class="dropdown-extended-height"
toggle-class="d-flex w-100 justify-content-between align-items-center"
>
<template slot="button-content">
<span class="text-truncate" :data-qa-selector="qaSelector">
{{ firstSelectedOption }}
......@@ -125,12 +130,3 @@ export default {
</gl-dropdown>
</div>
</template>
<style>
.dashboard-filter .dropdown-toggle {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
</style>
......@@ -63,10 +63,7 @@ export default {
<template>
<div class="ci-table js-security-dashboard-table" data-qa-selector="security_report_content">
<selection-summary v-if="isSelectingVulnerabilities" />
<div
class="gl-responsive-table-row table-row-header vulnerabilities-row-header px-2"
role="row"
>
<div class="gl-responsive-table-row table-row-header gl-bg-gray-50 text-2 px-2" role="row">
<div class="table-section">
<gl-form-checkbox
:checked="hasSelectedAllVulnerabilities"
......@@ -125,15 +122,3 @@ export default {
</template>
</div>
</template>
<style>
.vulnerabilities-row-header {
background-color: #fafafa;
font-size: 14px;
}
.vulnerabilities-row .section-10,
.vulnerabilities-row-header .section-10 {
min-width: 120px;
}
</style>
<script>
import { mapActions, mapState } from 'vuex';
import { GlDeprecatedButton, GlSkeletonLoading, GlFormCheckbox } from '@gitlab/ui';
import { GlDeprecatedButton, GlFormCheckbox, GlSkeletonLoading } from '@gitlab/ui';
import SeverityBadge from 'ee/vue_shared/security_reports/components/severity_badge.vue';
import Icon from '~/vue_shared/components/icon.vue';
import VulnerabilityActionButtons from './vulnerability_action_buttons.vue';
......@@ -36,7 +36,7 @@ export default {
severity() {
return this.vulnerability.severity || ' ';
},
vulnerabilityNamepace() {
vulnerabilityNamespace() {
const { project, location } = this.vulnerability;
if (this.dashboardType === DASHBOARD_TYPES.GROUP) {
return project && project.full_name;
......@@ -83,6 +83,7 @@ export default {
<div class="table-section">
<gl-form-checkbox
:checked="isSelected"
:inline="true"
class="my-0 ml-1 mr-3"
@change="toggleVulnerability"
/>
......@@ -90,19 +91,22 @@ export default {
<div class="table-section section-10">
<div class="table-mobile-header" role="rowheader">{{ s__('Reports|Severity') }}</div>
<div class="table-mobile-content"><severity-badge :severity="severity" /></div>
<div class="table-mobile-content">
<severity-badge :severity="severity" />
</div>
</div>
<div class="table-section flex-grow-1">
<div class="table-mobile-header" role="rowheader">{{ s__('Reports|Vulnerability') }}</div>
<div
class="table-mobile-content vulnerability-info"
class="table-mobile-content gl-white-space-normal"
data-qa-selector="vulnerability_info_content"
>
<gl-skeleton-loading v-if="isLoading" class="mt-2 js-skeleton-loader" :lines="2" />
<template v-else>
<gl-deprecated-button
class="vulnerability-title d-inline"
ref="vulnerability-title"
class="d-inline gl-line-height-inherit gl-text-align-inherit gl-white-space-normal"
variant="blank"
@click="openModal({ vulnerability })"
>{{ vulnerability.name }}</gl-deprecated-button
......@@ -124,9 +128,9 @@ export default {
:project-name="vulnerability.project.name"
/>
<br />
<span v-if="vulnerabilityNamepace" class="vulnerability-namespace">
{{ vulnerabilityNamepace }}
</span>
<small v-if="vulnerabilityNamespace" class="gl-text-gray-700 gl-word-break-all">
{{ vulnerabilityNamespace }}
</small>
</template>
</div>
</div>
......@@ -145,47 +149,3 @@ export default {
</div>
</div>
</template>
<style scoped>
@media (min-width: 768px) {
.vulnerabilities-row:last-child {
border-bottom: 1px solid transparent;
}
.vulnerabilities-row:hover,
.vulnerabilities-row:focus {
background: #f6fafd;
border-bottom: 1px solid #c1daf4;
border-top: 1px solid #c1daf4;
margin-top: -1px;
}
.vulnerabilities-row .action-buttons {
opacity: 0;
}
.vulnerabilities-row:hover .action-buttons,
.vulnerabilities-row:focus-within .action-buttons {
opacity: 1;
}
}
.vulnerability-info {
white-space: normal;
}
.vulnerability-title {
text-align: inherit;
white-space: normal;
line-height: inherit;
}
.vulnerability-namespace {
color: #707070;
font-size: 0.8em;
}
.dismissed .table-mobile-content:not(.action-buttons) {
opacity: 0.5;
}
</style>
.vulnerabilities-row {
&.dismissed .table-mobile-content:not(.action-buttons) {
opacity: 0.5;
}
@include media-breakpoint-up(md) {
.action-buttons {
opacity: 0;
}
&:hover,
&:focus,
&:focus-within {
background: $blue-50;
border-bottom: 1px solid $blue-200;
border-top: 1px solid $blue-200;
margin-top: -1px;
.action-buttons {
opacity: 1;
}
}
}
}
---
title: Fix checkbox alignment and responsive word-break for secure table rows
merge_request: 29659
author:
type: changed
......@@ -89,7 +89,7 @@ describe('Security Dashboard Table Row', () => {
it('should fire the openModal action when clicked', () => {
jest.spyOn(store, 'dispatch').mockImplementation();
const el = wrapper.find('.vulnerability-title');
const el = wrapper.find({ ref: 'vulnerability-title' });
el.trigger('click');
expect(store.dispatch).toHaveBeenCalledWith('vulnerabilities/openModal', {
......
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