Merge branch '36483-move-the-confidence-column-in-the-security-dashboard' into 'master'

Resolve "Move the confidence column in the security dashboard"

Closes #36483

See merge request gitlab-org/gitlab!20435

changelogs/unreleased/36483-move-the-confidence-column-in-the-security-dashboard.yml

+---
+title: Move confidence column in the security dashboard
+merge_request: 20435
+author: Dheeraj Joshi
+type: changed

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

@@ -59,12 +59,12 @@ export default {
       role="row"
     >
       <div class="table-section section-10" role="rowheader">{{ s__('Reports|Severity') }}</div>
-      <div class="table-section flex-grow-1" role="rowheader">
-        {{ s__('Reports|Vulnerability') }}
-      </div>
       <div class="table-section section-10 ml-md-2" role="rowheader">
         {{ s__('Reports|Confidence') }}
       </div>
+      <div class="table-section flex-grow-1" role="rowheader">
+        {{ s__('Reports|Vulnerability') }}
+      </div>
       <div class="table-section section-20" role="rowheader"></div>
     </div>
 

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

@@ -69,6 +69,11 @@ export default {
       <div class="table-mobile-content"><severity-badge :severity="severity" /></div>
     </div>
 
+    <div class="table-section section-10 ml-md-2">
+      <div class="table-mobile-header" role="rowheader">{{ s__('Reports|Confidence') }}</div>
+      <div class="table-mobile-content text-capitalize">{{ confidence }}</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">
@@ -104,11 +109,6 @@ export default {
       </div>
     </div>
 
-    <div class="table-section section-10 ml-md-2">
-      <div class="table-mobile-header" role="rowheader">{{ s__('Reports|Confidence') }}</div>
-      <div class="table-mobile-content text-capitalize">{{ confidence }}</div>
-    </div>
-
     <div class="table-section section-20">
       <div class="table-mobile-header" role="rowheader">{{ s__('Reports|Actions') }}</div>
       <div class="table-mobile-content action-buttons d-flex justify-content-end">

ee/spec/javascripts/security_dashboard/components/security_dashboard_table_row_spec.js

@@ -31,7 +31,7 @@ describe('Security Dashboard Table Row', () => {
 
     it('should render a `–` for confidence', () => {
       expect(vm.confidence).toEqual('–');
-      expect(vm.$el.querySelectorAll('.table-mobile-content')[2].textContent).toContain('–');
+      expect(vm.$el.querySelectorAll('.table-mobile-content')[1].textContent).toContain('–');
     });
 
     it('should not render action buttons', () => {
@@ -63,19 +63,19 @@ describe('Security Dashboard Table Row', () => {
 
     it('should render the confidence', () => {
       expect(
-        vm.$el.querySelectorAll('.table-mobile-content')[2].textContent.toLowerCase(),
+        vm.$el.querySelectorAll('.table-mobile-content')[1].textContent.toLowerCase(),
       ).toContain(props.vulnerability.confidence);
     });
 
     describe('the project name', () => {
       it('should render the name', () => {
-        expect(vm.$el.querySelectorAll('.table-mobile-content')[1].textContent).toContain(
+        expect(vm.$el.querySelectorAll('.table-mobile-content')[2].textContent).toContain(
           props.vulnerability.name,
         );
       });
 
       it('should render the project namespace', () => {
-        expect(vm.$el.querySelectorAll('.table-mobile-content')[1].textContent).toContain(
+        expect(vm.$el.querySelectorAll('.table-mobile-content')[2].textContent).toContain(
           props.vulnerability.project.full_name,
         );
       });