Add latest changes from gitlab-org/gitlab@13-7-stable-eev13.7.0-rc42

4 files changed, 173 insertions, 0 deletions

diff --git a/app/assets/javascripts/vue_shared/security_reports/components/constants.js b/app/assets/javascripts/vue_shared/security_reports/components/constants.js
new file mode 100644
index 00000000000..9b1cbfe218b
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/security_reports/components/constants.js
@@ -0,0 +1,8 @@
+export const SEVERITY_CLASS_NAME_MAP = {
+  critical: 'text-danger-800',
+  high: 'text-danger-600',
+  medium: 'text-warning-400',
+  low: 'text-warning-200',
+  info: 'text-primary-400',
+  unknown: 'text-secondary-400',
+};
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/components/security_report_download_dropdown.vue b/app/assets/javascripts/vue_shared/security_reports/components/security_report_download_dropdown.vue
new file mode 100644
index 00000000000..d7c1e27ff3e
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/security_reports/components/security_report_download_dropdown.vue
@@ -0,0 +1,48 @@
+<script>
+import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
+import { s__, sprintf } from '~/locale';
+
+export default {
+  name: 'SecurityReportDownloadDropdown',
+  components: {
+    GlDropdown,
+    GlDropdownItem,
+  },
+  props: {
+    artifacts: {
+      type: Array,
+      required: true,
+    },
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  methods: {
+    artifactText({ name }) {
+      return sprintf(s__('SecurityReports|Download %{artifactName}'), {
+        artifactName: name,
+      });
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-dropdown
+    :text="s__('SecurityReports|Download results')"
+    :loading="loading"
+    icon="download"
+    right
+  >
+    <gl-dropdown-item
+      v-for="artifact in artifacts"
+      :key="artifact.path"
+      :href="artifact.path"
+      download
+    >
+      {{ artifactText(artifact) }}
+    </gl-dropdown-item>
+  </gl-dropdown>
+</template>
diff --git a/app/assets/javascripts/vue_shared/security_reports/components/security_summary.vue b/app/assets/javascripts/vue_shared/security_reports/components/security_summary.vue
new file mode 100644
index 00000000000..babb9fddcf6
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/security_reports/components/security_summary.vue
@@ -0,0 +1,59 @@
+<script>
+import { GlSprintf } from '@gitlab/ui';
+import { SEVERITY_CLASS_NAME_MAP } from './constants';
+
+export default {
+  components: {
+    GlSprintf,
+  },
+  props: {
+    message: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    shouldShowCountMessage() {
+      return !this.message.status && Boolean(this.message.countMessage);
+    },
+  },
+  methods: {
+    getSeverityClass(severity) {
+      return SEVERITY_CLASS_NAME_MAP[severity];
+    },
+  },
+  slotNames: ['critical', 'high', 'other'],
+  spacingClasses: {
+    critical: 'gl-pl-4',
+    high: 'gl-px-2',
+    other: 'gl-px-2',
+  },
+};
+</script>
+
+<template>
+  <span>
+    <gl-sprintf :message="message.message">
+      <template #total="{content}">
+        <strong>{{ content }}</strong>
+      </template>
+    </gl-sprintf>
+    <span v-if="shouldShowCountMessage" class="gl-font-sm">
+      <gl-sprintf :message="message.countMessage">
+        <template v-for="slotName in $options.slotNames" #[slotName]="{content}">
+          <span :key="slotName">
+            <strong
+              v-if="message[slotName] > 0"
+              :class="[getSeverityClass(slotName), $options.spacingClasses[slotName]]"
+            >
+              {{ content }}
+            </strong>
+            <span v-else :class="$options.spacingClasses[slotName]">
+              {{ content }}
+            </span>
+          </span>
+        </template>
+      </gl-sprintf>
+    </span>
+  </span>
+</template>