1 files changed, 57 insertions, 0 deletions
diff --git a/app/assets/javascripts/security_configuration/components/manage_sast.vue b/app/assets/javascripts/security_configuration/components/manage_sast.vue
new file mode 100644
index 00000000000..5169096d563
--- /dev/null
+++ b/app/assets/javascripts/security_configuration/components/manage_sast.vue
@@ -0,0 +1,57 @@
+<script>
+import { GlButton } from '@gitlab/ui';
+import { redirectTo } from '~/lib/utils/url_utility';
+import { s__ } from '~/locale';
+import configureSastMutation from '~/security_configuration/graphql/configure_sast.mutation.graphql';
+
+export default {
+  components: {
+    GlButton,
+  },
+  inject: {
+    projectPath: {
+      from: 'projectPath',
+      default: '',
+    },
+  },
+  data: () => ({
+    isLoading: false,
+  }),
+  methods: {
+    async mutate() {
+      this.isLoading = true;
+      try {
+        const { data } = await this.$apollo.mutate({
+          mutation: configureSastMutation,
+          variables: {
+            input: {
+              projectPath: this.projectPath,
+              configuration: { global: [], pipeline: [], analyzers: [] },
+            },
+          },
+        });
+        const { errors, successPath } = data.configureSast;
+
+        if (errors.length > 0) {
+          throw new Error(errors[0]);
+        }
+
+        if (!successPath) {
+          throw new Error(s__('SecurityConfiguration|SAST merge request creation mutation failed'));
+        }
+
+        redirectTo(successPath);
+      } catch (e) {
+        this.$emit('error', e.message);
+        this.isLoading = false;
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-button :loading="isLoading" variant="success" category="secondary" @click="mutate">{{
+    s__('SecurityConfiguration|Configure via Merge Request')
+  }}</gl-button>
+</template>