1 files changed, 127 insertions, 0 deletions
diff --git a/app/assets/javascripts/security_configuration/components/continuous_vulnerability_scan.vue b/app/assets/javascripts/security_configuration/components/continuous_vulnerability_scan.vue
new file mode 100644
index 00000000000..61cbde2107c
--- /dev/null
+++ b/app/assets/javascripts/security_configuration/components/continuous_vulnerability_scan.vue
@@ -0,0 +1,127 @@
+<script>
+import { GlBadge, GlIcon, GlToggle, GlLink, GlSprintf, GlAlert } from '@gitlab/ui';
+import ProjectSetContinuousVulnerabilityScanning from '~/security_configuration/graphql/project_set_continuous_vulnerability_scanning.graphql';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import { __, s__ } from '~/locale';
+import { helpPagePath } from '~/helpers/help_page_helper';
+
+export default {
+  name: 'ContinuousVulnerabilityscan',
+  components: { GlBadge, GlIcon, GlToggle, GlLink, GlSprintf, GlAlert },
+  mixins: [glFeatureFlagsMixin()],
+  inject: ['continuousVulnerabilityScansEnabled', 'projectFullPath'],
+  i18n: {
+    badgeLabel: __('Experiment'),
+    title: s__('CVS|Continuous Vulnerability Scan'),
+    description: s__(
+      'CVS|Detect vulnerabilities outside a pipeline as new data is added to the GitLab Advisory Database.',
+    ),
+    learnMore: __('Learn more'),
+    testingAgreementMessage: s__(
+      'CVS|By enabling this feature, you accept the %{linkStart}Testing Terms of Use%{linkEnd}',
+    ),
+  },
+  props: {
+    feature: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      toggleValue: this.continuousVulnerabilityScansEnabled,
+      errorMessage: '',
+      isAlertDismissed: false,
+    };
+  },
+  computed: {
+    isFeatureConfigured() {
+      return this.feature.available && this.feature.configured;
+    },
+    shouldShowAlert() {
+      return this.errorMessage && !this.isAlertDismissed;
+    },
+  },
+  methods: {
+    reportError(error) {
+      this.errorMessage = error;
+      this.isAlertDismissed = false;
+    },
+    async toggleCVS(checked) {
+      try {
+        const { data } = await this.$apollo.mutate({
+          mutation: ProjectSetContinuousVulnerabilityScanning,
+          variables: {
+            input: {
+              projectPath: this.projectFullPath,
+              enable: checked,
+            },
+          },
+        });
+
+        const { errors } = data.projectSetContinuousVulnerabilityScanning;
+
+        if (errors.length > 0) {
+          this.reportError(errors[0].message);
+        }
+        if (data.projectSetContinuousVulnerabilityScanning !== null) {
+          this.toggleValue = checked;
+        }
+      } catch (error) {
+        this.reportError(error);
+      }
+    },
+  },
+  CVSHelpPagePath: helpPagePath(
+    'user/application_security/continuous_vulnerability_scanning/index',
+  ),
+  experimentHelpPagePath: helpPagePath('policy/experiment-beta-support', { anchor: 'experiment' }),
+};
+</script>
+
+<template>
+  <div v-if="glFeatures.dependencyScanningOnAdvisoryIngestion">
+    <h4 class="gl-font-base gl-m-0 gl-mt-6">
+      {{ $options.i18n.title }}
+      <gl-badge
+        ref="badge"
+        :href="$options.experimentHelpPagePath"
+        target="_blank"
+        size="sm"
+        variant="neutral"
+        class="gl-cursor-pointer"
+        >{{ $options.i18n.badgeLabel }}</gl-badge
+      >
+    </h4>
+    <gl-alert
+      v-if="shouldShowAlert"
+      class="gl-mb-5 gl-mt-2"
+      variant="danger"
+      @dismiss="isAlertDismissed = true"
+      >{{ errorMessage }}</gl-alert
+    >
+    <gl-toggle
+      class="gl-mt-5"
+      :disabled="!isFeatureConfigured"
+      :value="toggleValue"
+      :label="s__('CVS|Toggle CVS')"
+      label-position="hidden"
+      @change="toggleCVS"
+    />
+
+    <p class="gl-mb-0 gl-mt-5">
+      {{ $options.i18n.description }}
+      <gl-link :href="$options.CVSHelpPagePath" target="_blank">{{
+        $options.i18n.learnMore
+      }}</gl-link>
+      <br />
+      <gl-sprintf :message="$options.i18n.testingAgreementMessage">
+        <template #link="{ content }">
+          <gl-link href="https://about.gitlab.com/handbook/legal/testing-agreement" target="_blank">
+            {{ content }} <gl-icon name="external-link" />
+          </gl-link>
+        </template>
+      </gl-sprintf>
+    </p>
+  </div>
+</template>