Add latest changes from gitlab-org/gitlab@master

2 files changed, 79 insertions, 19 deletions

diff --git a/app/assets/javascripts/vue_shared/security_reports/components/help_icon.vue b/app/assets/javascripts/vue_shared/security_reports/components/help_icon.vue
new file mode 100644
index 00000000000..3c606283c7d
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/security_reports/components/help_icon.vue
@@ -0,0 +1,58 @@
+<script>
+import { GlButton, GlIcon, GlLink, GlPopover } from '@gitlab/ui';
+import { s__ } from '~/locale';
+
+export default {
+  components: {
+    GlButton,
+    GlIcon,
+    GlLink,
+    GlPopover,
+  },
+  props: {
+    helpPath: {
+      type: String,
+      required: true,
+    },
+    discoverProjectSecurityPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  i18n: {
+    securityReportsHelp: s__('SecurityReports|Security reports help page link'),
+    upgradeToManageVulnerabilities: s__('SecurityReports|Upgrade to manage vulnerabilities'),
+    upgradeToInteract: s__(
+      'SecurityReports|Upgrade to interact, track and shift left with vulnerability management features in the UI.',
+    ),
+  },
+};
+</script>
+
+<template>
+  <span v-if="discoverProjectSecurityPath">
+    <gl-button
+      ref="discoverProjectSecurity"
+      icon="information-o"
+      category="tertiary"
+      :aria-label="$options.i18n.upgradeToManageVulnerabilities"
+    />
+
+    <gl-popover
+      :target="() => $refs.discoverProjectSecurity.$el"
+      :title="$options.i18n.upgradeToManageVulnerabilities"
+      placement="top"
+      triggers="click blur"
+    >
+      {{ $options.i18n.upgradeToInteract }}
+      <gl-link :href="discoverProjectSecurityPath" target="_blank" class="gl-font-sm">{{
+        __('Learn more')
+      }}</gl-link>
+    </gl-popover>
+  </span>
+
+  <gl-link v-else target="_blank" :href="helpPath" :aria-label="$options.i18n.securityReportsHelp">
+    <gl-icon name="question" />
+  </gl-link>
+</template>
diff --git a/app/assets/javascripts/vue_shared/security_reports/security_reports_app.vue b/app/assets/javascripts/vue_shared/security_reports/security_reports_app.vue
index 3f4a790d24e..bdbf9957ad4 100644
--- a/app/assets/javascripts/vue_shared/security_reports/security_reports_app.vue
+++ b/app/assets/javascripts/vue_shared/security_reports/security_reports_app.vue
@@ -1,6 +1,6 @@
 <script>
 import { mapActions, mapGetters } from 'vuex';
-import { GlIcon, GlLink, GlSprintf } from '@gitlab/ui';
+import { GlLink, GlSprintf } from '@gitlab/ui';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import ReportSection from '~/reports/components/report_section.vue';
 import { LOADING, ERROR, SLOT_SUCCESS, SLOT_LOADING, SLOT_ERROR } from '~/reports/constants';
@@ -8,6 +8,7 @@ import { s__ } from '~/locale';
 import { normalizeHeaders, parseIntPagination } from '~/lib/utils/common_utils';
 import createFlash from '~/flash';
 import Api from '~/api';
+import HelpIcon from './components/help_icon.vue';
 import SecurityReportDownloadDropdown from './components/security_report_download_dropdown.vue';
 import SecuritySummary from './components/security_summary.vue';
 import store from './store';
@@ -23,10 +24,10 @@ import { extractSecurityReportArtifacts } from './utils';
 export default {
   store,
   components: {
-    GlIcon,
     GlLink,
     GlSprintf,
     ReportSection,
+    HelpIcon,
     SecurityReportDownloadDropdown,
     SecuritySummary,
   },
@@ -44,6 +45,11 @@ export default {
       type: String,
       required: true,
     },
+    discoverProjectSecurityPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
     sastComparisonPath: {
       type: String,
       required: false,
@@ -64,6 +70,11 @@ export default {
       required: false,
       default: 0,
     },
+    canDiscoverProjectSecurity: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -231,7 +242,6 @@ export default {
     downloadFromPipelineTab: s__(
       'SecurityReports|Go to the %{linkStart}pipelines tab%{linkEnd} to download the security reports',
     ),
-    securityReportsHelp: s__('SecurityReports|Security reports help page link'),
   },
   summarySlots: [SLOT_SUCCESS, SLOT_LOADING, SLOT_ERROR],
 };
@@ -248,14 +258,10 @@ export default {
       <span :key="slot">
         <security-summary :message="groupedSummaryText" />
 
-        <gl-link
-          target="_blank"
-          data-testid="help"
-          :href="securityReportsDocsPath"
-          :aria-label="$options.i18n.securityReportsHelp"
-        >
-          <gl-icon name="question" />
-        </gl-link>
+        <help-icon
+          :help-path="securityReportsDocsPath"
+          :discover-project-security-path="discoverProjectSecurityPath"
+        />
       </span>
     </template>
 
@@ -300,14 +306,10 @@ export default {
         </template>
       </gl-sprintf>
 
-      <gl-link
-        target="_blank"
-        data-testid="help"
-        :href="securityReportsDocsPath"
-        :aria-label="$options.i18n.securityReportsHelp"
-      >
-        <gl-icon name="question" />
-      </gl-link>
+      <help-icon
+        :help-path="securityReportsDocsPath"
+        :discover-project-security-path="discoverProjectSecurityPath"
+      />
     </template>
 
     <template v-if="canShowDownloads" #action-buttons>