Adjust aligment for the icons

app/assets/stylesheets/pages/merge_requests.scss

@@ -785,10 +785,6 @@
 }
 
 .mr-widget-code-quality {
-  .ci-status-icon-warning svg {
-    fill: $theme-gray-600;
-  }
-
   .code-quality-container {
     border-top: 1px solid $gray-darker;
     padding: $gl-padding-top;
@@ -805,10 +801,14 @@
 
     .mr-widget-code-quality-list {
       list-style: none;
-      padding: 0 12px;
+      padding: 0 9px;
       margin: 0;
       line-height: $code_line_height;
 
+      .mr-widget-code-quality-list-item {
+        display: flex;
+      }
+
       .failed .mr-widget-code-quality-icon {
         color: $red-500;
       }
@@ -822,13 +822,8 @@
       }
 
       .mr-widget-code-quality-icon {
-        margin-right: 12px;
+        margin: 3px 12px 0 0;
         fill: currentColor;
-
-        svg {
-          width: 10px;
-          height: 10px;
-        }
       }
     }
   }

ee/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_report_collapsible_section.vue

 <script>
-  /* eslint-disable vue/require-default-prop */
+  import { __ } from '~/locale';
   import statusIcon from '~/vue_merge_request_widget/components/mr_widget_status_icon.vue';
   import loadingIcon from '~/vue_shared/components/loading_icon.vue';
   import issuesBlock from './mr_widget_report_issues.vue';

ee/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_report_issues.vue

@@ -45,6 +45,15 @@
       fixedLabel() {
         return s__('ciReport|Fixed:');
       },
+      iconName() {
+        if (this.isStatusFailed) {
+          return 'status_failed_borderless';
+        } else if (this.isStatusSuccess) {
+          return 'status_success_borderless';
+        }
+
+        return 'status_created_borderless';
+      },
       isStatusFailed() {
         return this.status === 'failed';
       },
@@ -109,18 +118,13 @@
         success: isStatusSuccess,
         neutral: isStatusNeutral
       }"
+      class="mr-widget-code-quality-list-item"
       v-for="(issue, index) in issues"
       :key="index"
     >
       <icon
         class="mr-widget-code-quality-icon"
-        v-if="isStatusSuccess"
-        name="status_success_borderless"
-      />
-      <icon
-        v-else
-        class="mr-widget-code-quality-icon"
-        name="status_failed_borderless"
+        :name="iconName"
       />
 
       <template v-if="isStatusSuccess && isTypeQuality">{{ fixedLabel }}</template>

ee/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js

@@ -41,7 +41,6 @@ export default {
       return this.mr.sast;
     },
     shouldRenderDockerReport() {
-      return true;
       return this.mr.sastContainer;
     },
     shouldRenderDastReport() {
@@ -312,31 +311,9 @@ export default {
     if (this.shouldRenderSecurityReport) {
       this.fetchSecurity();
     }
-    this.mr.setDockerReport({
-      unapproved: [
-        'CVE-2017-12944',
-        'CVE-2017-16232'
-      ],
-      vulnerabilities: [
-        {
-          vulnerability: 'CVE-2017-12944',
-          namespace: 'debian:8',
-          severity: 'Medium'
-        },
-        {
-            vulnerability: 'CVE-2017-16232',
-            namespace: 'debian:8',
-            severity: 'Negligible'
-        },
-        {
-            vulnerability: 'CVE-2014-8130',
-            namespace: 'debian:8',
-            severity: 'Negligible'
-        }
-      ]
-    });
+
     if (this.shouldRenderDockerReport) {
-      //this.fetchDockerReport();
+      this.fetchDockerReport();
     }
 
     if (this.shouldRenderDastReport) {