3 files changed, 24 insertions, 5 deletions
diff --git a/app/assets/javascripts/reports/components/grouped_test_reports_app.vue b/app/assets/javascripts/reports/components/grouped_test_reports_app.vue
index b8a8cb940e7..47f04019595 100644
--- a/app/assets/javascripts/reports/components/grouped_test_reports_app.vue
+++ b/app/assets/javascripts/reports/components/grouped_test_reports_app.vue
@@ -1,12 +1,12 @@
 <script>
 import { mapActions, mapGetters, mapState } from 'vuex';
+import { GlButton } from '@gitlab/ui';
 import { sprintf, s__ } from '~/locale';
 import { componentNames } from './issue_body';
 import ReportSection from './report_section.vue';
 import SummaryRow from './summary_row.vue';
 import IssuesList from './issues_list.vue';
 import Modal from './modal.vue';
-import { GlButton } from '@gitlab/ui';
 import createStore from '../store';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { summaryTextBuilder, reportTextBuilder, statusIcon } from '../store/utils';
@@ -56,7 +56,7 @@ export default {
       return `${this.pipelinePath}/test_report`;
     },
     showViewFullReport() {
-      return Boolean(this.glFeatures.junitPipelineView) && this.pipelinePath.length;
+      return this.pipelinePath.length;
     },
   },
   created() {
@@ -116,6 +116,7 @@ export default {
     <template v-if="showViewFullReport" #actionButtons>
       <gl-button
         :href="testTabURL"
+        target="_blank"
         icon="external-link"
         data-testid="group-test-reports-full-link"
         class="gl-mr-3"
diff --git a/app/assets/javascripts/reports/components/modal.vue b/app/assets/javascripts/reports/components/modal.vue
index 78c355ecb76..ca95db6c826 100644
--- a/app/assets/javascripts/reports/components/modal.vue
+++ b/app/assets/javascripts/reports/components/modal.vue
@@ -33,7 +33,7 @@ export default {
         v-for="(field, key, index) in modalData"
         v-if="field.value"
         :key="index"
-        class="row prepend-top-10 append-bottom-10"
+        class="row gl-mt-3 gl-mb-3"
       >
         <strong class="col-sm-3 text-right"> {{ field.text }}: </strong>
 
diff --git a/app/assets/javascripts/reports/components/modal_open_name.vue b/app/assets/javascripts/reports/components/modal_open_name.vue
index 4f81cee2a38..78e1fcb205b 100644
--- a/app/assets/javascripts/reports/components/modal_open_name.vue
+++ b/app/assets/javascripts/reports/components/modal_open_name.vue
@@ -1,7 +1,12 @@
 <script>
+import { GlTooltipDirective, GlResizeObserverDirective } from '@gitlab/ui';
 import { mapActions } from 'vuex';
 
 export default {
+  directives: {
+    GlTooltip: GlTooltipDirective,
+    GlResizeObserverDirective,
+  },
   props: {
     issue: {
       type: Object,
@@ -13,19 +18,32 @@ export default {
       required: true,
     },
   },
+  data: () => ({
+    tooltipTitle: '',
+  }),
+  mounted() {
+    this.updateTooltipTitle();
+  },
   methods: {
     ...mapActions(['openModal']),
     handleIssueClick() {
       const { issue, status, openModal } = this;
       openModal({ issue, status });
     },
+    updateTooltipTitle() {
+      // Only show the tooltip if the text is truncated with an ellipsis.
+      this.tooltipTitle = this.$el.offsetWidth < this.$el.scrollWidth ? this.issue.title : '';
+    },
   },
 };
 </script>
 <template>
   <button
-    type="button"
-    class="btn-link btn-blank text-left break-link vulnerability-name-button"
+    v-gl-tooltip="{ boundary: 'viewport' }"
+    v-gl-resize-observer-directive="updateTooltipTitle"
+    class="btn-link gl-text-truncate"
+    :aria-label="s__('Reports|Vulnerability Name')"
+    :title="tooltipTitle"
     @click="handleIssueClick()"
   >
     {{ issue.title }}