1 files changed, 51 insertions, 0 deletions
diff --git a/app/assets/javascripts/projects/permissions/components/project_feature_toggle.vue b/app/assets/javascripts/projects/permissions/components/project_feature_toggle.vue
new file mode 100644
index 00000000000..2403c60186a
--- /dev/null
+++ b/app/assets/javascripts/projects/permissions/components/project_feature_toggle.vue
@@ -0,0 +1,51 @@
+<script>
+export default {
+  props: {
+    name: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    value: {
+      type: Boolean,
+      required: true,
+    },
+    disabledInput: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+
+  model: {
+    prop: 'value',
+    event: 'change',
+  },
+
+  methods: {
+    toggleFeature() {
+      if (!this.disabledInput) this.$emit('change', !this.value);
+    },
+  },
+};
+</script>
+
+<template>
+  <label class="toggle-wrapper">
+    <input
+      v-if="name"
+      type="hidden"
+      :name="name"
+      :value="value"
+    />
+    <button
+      type="button"
+      aria-label="Toggle"
+      class="project-feature-toggle"
+      data-enabled-text="Enabled"
+      data-disabled-text="Disabled"
+      :class="{ checked: value, disabled: disabledInput }"
+      @click="toggleFeature"
+    />
+  </label>
+</template>