Changes after review

app/views/projects/pipelines/_with_tabs.html.haml

@@ -6,21 +6,21 @@
 .tabs-holder
   %ul.pipelines-tabs.nav-links.no-top.no-bottom.mobile-separator
     %li.js-pipeline-tab-link
-      = link_to project_pipeline_path(@project, @pipeline), data: { target: 'div#js-tab-pipeline', action: 'pipelines', toggle: 'tab' },  class: 'pipeline-tab' do
-        Pipeline
+      = link_to project_pipeline_path(@project, @pipeline), data: { target: '#js-tab-pipeline', action: 'pipelines', toggle: 'tab' }, class: 'pipeline-tab' do
+        = _("Pipeline")
     %li.js-builds-tab-link
-      = link_to builds_project_pipeline_path(@project, @pipeline), data: {target: 'div#js-tab-builds', action: 'builds', toggle: 'tab' }, class: 'builds-tab' do
-        Jobs
+      = link_to builds_project_pipeline_path(@project, @pipeline), data: { target: '#js-tab-builds', action: 'builds', toggle: 'tab' }, class: 'builds-tab' do
+        = _("Jobs")
         %span.badge.js-builds-counter= pipeline.total_size
     - if failed_builds.present?
       %li.js-failures-tab-link
-        = link_to failures_project_pipeline_path(@project, @pipeline), data: {target: 'div#js-tab-failures', action: 'failures', toggle: 'tab' }, class: 'failures-tab' do
-          Failed Jobs
+        = link_to failures_project_pipeline_path(@project, @pipeline), data: { target: '#js-tab-failures', action: 'failures', toggle: 'tab' }, class: 'failures-tab' do
+          = _("Failed Jobs")
           %span.badge.js-failures-counter= failed_builds.count
     - if sast_artifact
       %li.js-security-tab-link
-        = link_to security_project_pipeline_path(@project, @pipeline), data: {target: 'div#js-tab-security', action: 'security', toggle: 'tab' }, class: 'security-tab' do
-          Security Report
+        = link_to _("Security report"), security_project_pipeline_path(@project, @pipeline), data: { target: '#js-tab-security', action: 'security', toggle: 'tab' }, class: 'security-tab'
+
 
 .tab-content
   #js-tab-pipeline.tab-pane

ee/app/assets/javascripts/vue_shared/security_reports/components/report_section.vue

@@ -159,7 +159,7 @@
 
         <button
           type="button"
-          class="js-collapse-btn btn pull-right btn-sm"
+          class="js-collapse-btn btn bt-default pull-right btn-sm"
           v-if="isCollapsible && hasIssues"
           @click="toggleCollapsed"
         >

ee/app/assets/javascripts/vue_shared/security_reports/components/report_summary.vue

-<script>
-  import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
-
-  export default {
-    name: 'ReportSummary',
-    components: {
-      LoadingIcon,
-    },
-    props: {
-      // security | codequality | performance | docker
-      type: {
-        type: String,
-        required: true,
-      },
-      // loading | success | error
-      status: {
-        type: String,
-        required: true,
-      },
-      loadingText: {
-        type: String,
-        required: true,
-      },
-      errorText: {
-        type: String,
-        required: true,
-      },
-      successText: {
-        type: String,
-        required: true,
-      },
-      hasCollapseButton: {
-        type: Boolean,
-        required: false,
-        default: false,
-      },
-    },
-
-    computed: {
-      isLoading() {
-        return this.status === 'loading';
-      },
-      loadingFailed() {
-        return this.status === 'error';
-      },
-      isSuccess() {
-        return this.status === 'success';
-      },
-      statusIconName() {
-        if (this.loadingFailed || this.unresolvedIssues.length) {
-          return 'warning';
-        }
-        return 'success';
-      },
-    },
-
-    methods: {
-      toggleCollapsed() {
-        this.$emit('toggleCollapsed');
-      },
-    },
-  };
-</script>
-<template>
-  <div>
-    <div
-      v-if="isLoading"
-      class="media"
-    >
-      <div
-        class="mr-widget-icon"
-      >
-        <loading-icon />
-      </div>
-      <div
-        class="media-body"
-      >
-        {{ loadingText }}
-      </div>
-    </div>
-
-    <div
-      v-else-if="isSuccess"
-      class="media"
-    >
-      <status-icon
-        :status="statusIconName"
-      />
-
-      <div
-        class="media-body space-children"
-      >
-        <span
-          class="js-code-text"
-        >
-          {{ successText }}
-        </span>
-
-        <button
-          type="button"
-          class="btn pull-right btn-sm"
-          v-if="hasCollapseButton"
-          @click="toggleCollapsed"
-        >
-          {{ collapseText }}
-        </button>
-      </div>
-    </div>
-  </div>
-
-</template>

ee/app/assets/javascripts/vue_shared/security_reports/mixins/security_report_mixin.js

@@ -38,8 +38,8 @@ export default {
 
     translateText(type) {
       return {
-        error: s__(`ciReport|Failed to load ${type} report`),
-        loading: s__(`ciReport|Loading ${type} report`),
+        error: sprintf(s__('ciReport|Failed to load %{reportName} report'), { reportName: type }),
+        loading: sprintf(s__('ciReport|Loading %{report} report'), { reportName: type }),
       };
     },
 

ee/app/assets/stylesheets/pages/security_reports.scss

@@ -3,51 +3,51 @@
     border-top: 1px solid $gray-darker;
     padding: $gl-padding-top;
     background-color: $gray-light;
-    margin: $gl-padding -16px -16px;
+    margin: $gl-padding -$gl-padding -$gl-padding;
+  }
+
+  .report-block-info {
+    padding-left: 10px;
+  }
+
+  .report-block-dast-code {
+    margin-left: 26px;
+  }
+
+  .report-block-list {
+    list-style: none;
+    padding: 0 1px;
+    margin: 0;
+    line-height: $code_line_height;
+
+    .btn-open-modal {
+      padding: 0 5px 4px;
+    }
+
+    .report-block-list-item {
+      display: flex;
+    }
+
+    .report-block-list-item-modal {
+      display: flex;
+      flex-wrap: wrap;
+    }
+
+    .failed .report-block-icon {
+      color: $red-500;
+    }
 
-    .report-block-info {
-      padding-left: 10px;
+    .success .report-block-icon {
+      color: $green-500;
     }
 
-    .report-block-dast-code {
-      margin-left: 26px;
+    .neutral .report-block-icon {
+      color: $theme-gray-700;
     }
 
-    .report-block-list {
-      list-style: none;
-      padding: 0 1px;
-      margin: 0;
-      line-height: $code_line_height;
-
-      .btn-open-modal {
-        padding: 0 5px 4px;
-      }
-
-      .report-block-list-item {
-        display: flex;
-      }
-
-      .report-block-list-item-modal {
-        display: flex;
-        flex-wrap: wrap;
-      }
-
-      .failed .report-block-icon {
-        color: $red-500;
-      }
-
-      .success .report-block-icon {
-        color: $green-500;
-      }
-
-      .neutral .report-block-icon {
-        color: $theme-gray-700;
-      }
-
-      .report-block-icon {
-        margin: -5px 4px 0 0;
-        fill: currentColor;
-      }
+    .report-block-icon {
+      margin: -5px 4px 0 0;
+      fill: currentColor;
     }
   }
 }