1 files changed, 29 insertions, 6 deletions
diff --git a/app/assets/javascripts/vue_shared/security_configuration/components/manage_via_mr.vue b/app/assets/javascripts/vue_shared/security_configuration/components/manage_via_mr.vue
index 12e5f634a08..0ff858e6afc 100644
--- a/app/assets/javascripts/vue_shared/security_configuration/components/manage_via_mr.vue
+++ b/app/assets/javascripts/vue_shared/security_configuration/components/manage_via_mr.vue
@@ -5,6 +5,10 @@ import { redirectTo } from '~/lib/utils/url_utility';
 import { sprintf, s__ } from '~/locale';
 import apolloProvider from '../provider';
 
+function mutationSettingsForFeatureType(type) {
+  return featureToMutationMap[type];
+}
+
 export default {
   apolloProvider,
   components: {
@@ -19,7 +23,7 @@ export default {
     variant: {
       type: String,
       required: false,
-      default: 'success',
+      default: 'confirm',
     },
     category: {
       type: String,
@@ -33,17 +37,19 @@ export default {
     };
   },
   computed: {
-    featureSettings() {
-      return featureToMutationMap[this.feature.type];
+    mutationSettings() {
+      return mutationSettingsForFeatureType(this.feature.type);
     },
   },
   methods: {
     async mutate() {
       this.isLoading = true;
       try {
-        const mutation = this.featureSettings;
-        const { data } = await this.$apollo.mutate(mutation.getMutationPayload(this.projectPath));
-        const { errors, successPath } = data[mutation.mutationId];
+        const { mutationSettings } = this;
+        const { data } = await this.$apollo.mutate(
+          mutationSettings.getMutationPayload(this.projectPath),
+        );
+        const { errors, successPath } = data[mutationSettings.mutationId];
 
         if (errors.length > 0) {
           throw new Error(errors[0]);
@@ -62,6 +68,22 @@ export default {
       }
     },
   },
+  /**
+   * Returns a boolean representing whether this component can be rendered for
+   * the given feature. Useful for parent components to determine whether or
+   * not to render this component.
+   * @param {Object} feature The feature to check.
+   * @returns {boolean}
+   */
+  canRender(feature) {
+    const { available, configured, canEnableByMergeRequest, type } = feature;
+    return (
+      canEnableByMergeRequest &&
+      available &&
+      !configured &&
+      Boolean(mutationSettingsForFeatureType(type))
+    );
+  },
   i18n: {
     buttonLabel: s__('SecurityConfiguration|Configure via Merge Request'),
     noSuccessPathError: s__(
@@ -74,6 +96,7 @@ export default {
 <template>
   <gl-button
     v-if="!feature.configured"
+    data-testid="configure-via-mr-button"
     :loading="isLoading"
     :variant="variant"
     :category="category"