Add latest changes from gitlab-org/gitlab@master

4 files changed, 89 insertions, 13 deletions

diff --git a/app/assets/javascripts/security_configuration/components/constants.js b/app/assets/javascripts/security_configuration/components/constants.js
index 82cd96aa3b5..6db28ef0fad 100644
--- a/app/assets/javascripts/security_configuration/components/constants.js
+++ b/app/assets/javascripts/security_configuration/components/constants.js
@@ -50,11 +50,17 @@ export const SAST_IAC_CONFIG_HELP_PATH = helpPagePath(
 
 export const DAST_NAME = __('Dynamic Application Security Testing (DAST)');
 export const DAST_SHORT_NAME = s__('ciReport|DAST');
-export const DAST_DESCRIPTION = __('Analyze a review version of your web application.');
+export const DAST_DESCRIPTION = s__(
+  'ciReport|Analyze a deployed version of your web application for known vulnerabilities by examining it from the outside in. DAST works by simulating external attacks on your application while it is running.',
+);
 export const DAST_HELP_PATH = helpPagePath('user/application_security/dast/index');
 export const DAST_CONFIG_HELP_PATH = helpPagePath('user/application_security/dast/index', {
   anchor: 'enable-dast',
 });
+export const DAST_BADGE_TEXT = __('Available on-demand');
+export const DAST_BADGE_TOOLTIP = __(
+  'On-demand scans run outside of the DevOps cycle and find vulnerabilities in your projects',
+);
 
 export const DAST_PROFILES_NAME = __('DAST profiles');
 export const DAST_PROFILES_DESCRIPTION = s__(
@@ -171,18 +177,23 @@ export const securityFeatures = [
     type: REPORT_TYPE_SAST_IAC,
   },
   {
-    name: DAST_NAME,
-    shortName: DAST_SHORT_NAME,
-    description: DAST_DESCRIPTION,
-    helpPath: DAST_HELP_PATH,
-    configurationHelpPath: DAST_CONFIG_HELP_PATH,
-    type: REPORT_TYPE_DAST,
+    badge: {
+      text: DAST_BADGE_TEXT,
+      tooltipText: DAST_BADGE_TOOLTIP,
+      variant: 'info',
+    },
     secondary: {
       type: REPORT_TYPE_DAST_PROFILES,
       name: DAST_PROFILES_NAME,
       description: DAST_PROFILES_DESCRIPTION,
       configurationText: DAST_PROFILES_CONFIG_TEXT,
     },
+    name: DAST_NAME,
+    shortName: DAST_SHORT_NAME,
+    description: DAST_DESCRIPTION,
+    helpPath: DAST_HELP_PATH,
+    configurationHelpPath: DAST_CONFIG_HELP_PATH,
+    type: REPORT_TYPE_DAST,
   },
   {
     name: DEPENDENCY_SCANNING_NAME,
diff --git a/app/assets/javascripts/security_configuration/components/feature_card.vue b/app/assets/javascripts/security_configuration/components/feature_card.vue
index 4ce3c7cbc9a..309e5f21445 100644
--- a/app/assets/javascripts/security_configuration/components/feature_card.vue
+++ b/app/assets/javascripts/security_configuration/components/feature_card.vue
@@ -1,8 +1,9 @@
 <script>
 import { GlButton, GlCard, GlIcon, GlLink } from '@gitlab/ui';
 import { __, s__, sprintf } from '~/locale';
-import ManageViaMr from '~/vue_shared/security_configuration/components/manage_via_mr.vue';
 import { REPORT_TYPE_SAST_IAC } from '~/vue_shared/security_reports/constants';
+import ManageViaMr from '~/vue_shared/security_configuration/components/manage_via_mr.vue';
+import FeatureCardBadge from './feature_card_badge.vue';
 
 export default {
   components: {
@@ -10,6 +11,7 @@ export default {
     GlCard,
     GlIcon,
     GlLink,
+    FeatureCardBadge,
     ManageViaMr,
   },
   props: {
@@ -37,11 +39,14 @@ export default {
             text: this.$options.i18n.enableFeature,
           };
 
-      button.category = 'secondary';
+      button.category = this.feature.category || 'secondary';
       button.text = sprintf(button.text, { feature: this.shortName });
 
       return button;
     },
+    manageViaMrButtonCategory() {
+      return this.feature.category || 'secondary';
+    },
     showManageViaMr() {
       return ManageViaMr.canRender(this.feature);
     },
@@ -49,13 +54,17 @@ export default {
       return { 'gl-bg-gray-10': !this.available };
     },
     statusClasses() {
-      const { enabled } = this;
+      const { enabled, hasBadge } = this;
 
       return {
         'gl-ml-auto': true,
         'gl-flex-shrink-0': true,
         'gl-text-gray-500': !enabled,
         'gl-text-green-500': enabled,
+        'gl-w-full': hasBadge,
+        'gl-justify-content-space-between': hasBadge,
+        'gl-display-flex': hasBadge,
+        'gl-mb-4': hasBadge,
       };
     },
     hasSecondary() {
@@ -68,6 +77,9 @@ export default {
     isNotSastIACTemporaryHack() {
       return this.feature.type !== REPORT_TYPE_SAST_IAC;
     },
+    hasBadge() {
+      return Boolean(this.available && this.feature.badge?.text);
+    },
   },
   methods: {
     onError(message) {
@@ -88,7 +100,10 @@ export default {
 
 <template>
   <gl-card :class="cardClasses">
-    <div class="gl-display-flex gl-align-items-baseline">
+    <div
+      class="gl-display-flex gl-align-items-baseline"
+      :class="{ 'gl-flex-direction-column-reverse': hasBadge }"
+    >
       <h3 class="gl-font-lg gl-m-0 gl-mr-3">{{ feature.name }}</h3>
 
       <div
@@ -97,13 +112,19 @@ export default {
         data-testid="feature-status"
         :data-qa-selector="`${feature.type}_status`"
       >
+        <feature-card-badge
+          v-if="hasBadge"
+          :badge="feature.badge"
+          :badge-href="feature.badge.badgeHref"
+        />
+
         <template v-if="enabled">
           <gl-icon name="check-circle-filled" />
           <span class="gl-text-green-700">{{ $options.i18n.enabled }}</span>
         </template>
 
         <template v-else-if="available">
-          {{ $options.i18n.notEnabled }}
+          <span>{{ $options.i18n.notEnabled }}</span>
         </template>
 
         <template v-else>
@@ -133,7 +154,7 @@ export default {
         v-else-if="showManageViaMr"
         :feature="feature"
         variant="confirm"
-        category="secondary"
+        :category="manageViaMrButtonCategory"
         class="gl-mt-5"
         :data-qa-selector="`${feature.type}_mr_button`"
         @error="onError"
diff --git a/app/assets/javascripts/security_configuration/components/feature_card_badge.vue b/app/assets/javascripts/security_configuration/components/feature_card_badge.vue
new file mode 100644
index 00000000000..0907e33c8e2
--- /dev/null
+++ b/app/assets/javascripts/security_configuration/components/feature_card_badge.vue
@@ -0,0 +1,40 @@
+<script>
+import { GlBadge, GlTooltip } from '@gitlab/ui';
+
+export default {
+  components: {
+    GlBadge,
+    GlTooltip,
+  },
+  props: {
+    badge: {
+      type: Object,
+      required: true,
+    },
+    badgeHref: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+};
+</script>
+
+<template>
+  <span>
+    <gl-tooltip
+      v-if="badge.tooltipText"
+      placement="top"
+      boundary="window"
+      title="Tooltip title"
+      :target="() => $refs.badge"
+    >
+      {{ badge.tooltipText }}
+    </gl-tooltip>
+    <span ref="badge">
+      <gl-badge size="sm" :href="badgeHref" :variant="badge.variant">
+        {{ badge.text }}
+      </gl-badge>
+    </span>
+  </span>
+</template>
diff --git a/app/assets/javascripts/security_configuration/utils.js b/app/assets/javascripts/security_configuration/utils.js
index 173560f8370..df23698ba7e 100644
--- a/app/assets/javascripts/security_configuration/utils.js
+++ b/app/assets/javascripts/security_configuration/utils.js
@@ -30,6 +30,10 @@ export const augmentFeatures = (securityFeatures, complianceFeatures, features =
       augmented.secondary = { ...augmented.secondary, ...featuresByType[feature.secondary.type] };
     }
 
+    if (augmented.badge && augmented.metaInfoPath) {
+      augmented.badge.badgeHref = augmented.metaInfoPath;
+    }
+
     return augmented;
   };