Merge branch '4310-security-reports' into 'master'

Improve UI in security reports

See merge request gitlab-org/gitlab-ee!4124

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;
@@ -796,7 +792,7 @@
     margin: $gl-padding -16px -16px;
 
     .mr-widget-code-quality-info {
-      padding-left: 12px;
+      padding-left: 10px;
     }
 
     .mr-widget-dast-code {
@@ -805,34 +801,29 @@
 
     .mr-widget-code-quality-list {
       list-style: none;
-      padding: 0 12px;
+      padding: 0 2px 0 0;
       margin: 0;
       line-height: $code_line_height;
 
-      .mr-widget-code-quality-icon {
-        margin-right: 12px;
-        fill: currentColor;
-
-        svg {
-          width: 10px;
-          height: 10px;
-        }
+      .mr-widget-code-quality-list-item {
+        display: flex;
       }
 
-      .success {
-        color: $green-500;
+      .failed .mr-widget-code-quality-icon {
+        color: $red-500;
       }
 
-      .failed {
-        color: $red-500;
+      .success .mr-widget-code-quality-icon {
+        color: $green-500;
       }
 
-      .neutral {
-        color: $gl-gray-light;
+      .neutral .mr-widget-code-quality-icon {
+        color: $theme-gray-700;
       }
 
-      .modal-body {
-        color: $gl-text-color;
+      .mr-widget-code-quality-icon {
+        margin: -5px 4px 0 0;
+        fill: currentColor;
       }
     }
   }

changelogs/unreleased-ee/4310-security-reports.yml

+---
+title: Update UI for merge widget reports
+merge_request:
+author:
+type: changed

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';
@@ -52,6 +52,7 @@
       infoText: {
         type: String,
         required: false,
+        default: null,
       },
       hasPriority: {
         type: Boolean,
@@ -62,7 +63,7 @@
 
     data() {
       return {
-        collapseText: 'Expand',
+        collapseText: __('Expand'),
         isCollapsed: true,
       };
     },
@@ -92,7 +93,7 @@
       toggleCollapsed() {
         this.isCollapsed = !this.isCollapsed;
 
-        const text = this.isCollapsed ? 'Expand' : 'Collapse';
+        const text = this.isCollapsed ? __('Expand') : __('Collapse');
         this.collapseText = text;
       },
     },
@@ -103,28 +104,40 @@
 
     <div
       v-if="isLoading"
-      class="media">
-      <div class="mr-widget-icon">
+      class="media"
+    >
+      <div
+        class="mr-widget-icon"
+      >
         <loading-icon />
       </div>
-      <div class="media-body">
+      <div
+        class="media-body"
+      >
         {{ loadingText }}
       </div>
     </div>
 
     <div
       v-else-if="isSuccess"
-      class="media">
-      <status-icon :status="statusIconName" />
+      class="media"
+    >
+      <status-icon
+        :status="statusIconName"
+      />
 
-      <div class="media-body space-children">
-        <span class="js-code-text">
+      <div
+        class="media-body space-children"
+      >
+        <span
+          class="js-code-text"
+        >
           {{ successText }}
         </span>
 
         <button
           type="button"
-          class="btn-link btn-blank"
+          class="btn pull-right btn-sm"
           v-if="hasIssues"
           @click="toggleCollapsed"
         >

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

 <script>
   import { s__ } from '~/locale';
-  import { spriteIcon } from '~/lib/utils/common_utils';
+  import icon from '~/vue_shared/components/icon.vue';
   import modal from './mr_widget_dast_modal.vue';
 
   const modalDefaultData = {
@@ -15,6 +15,7 @@
     name: 'MrWidgetReportIssues',
     components: {
       modal,
+      icon,
     },
     props: {
       issues: {
@@ -41,15 +42,18 @@
       return modalDefaultData;
     },
     computed: {
-      icon() {
-        return this.isStatusSuccess ? spriteIcon('plus') : this.cutIcon;
-      },
-      cutIcon() {
-        return spriteIcon('cut');
-      },
       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';
       },
@@ -114,15 +118,15 @@
         success: isStatusSuccess,
         neutral: isStatusNeutral
       }"
+      class="mr-widget-code-quality-list-item"
       v-for="(issue, index) in issues"
       :key="index"
     >
-
-      <span
+      <icon
         class="mr-widget-code-quality-icon"
-        v-html="icon"
-      >
-      </span>
+        :name="iconName"
+        :size="32"
+      />
 
       <template v-if="isStatusSuccess && isTypeQuality">{{ fixedLabel }}</template>
       <template v-if="shouldRenderPriority(issue)">{{ issue.priority }}:</template>