1 files changed, 104 insertions, 0 deletions
diff --git a/app/assets/javascripts/projects/permissions/components/project_feature_setting.vue b/app/assets/javascripts/projects/permissions/components/project_feature_setting.vue
new file mode 100644
index 00000000000..80c5d39f736
--- /dev/null
+++ b/app/assets/javascripts/projects/permissions/components/project_feature_setting.vue
@@ -0,0 +1,104 @@
+<script>
+import projectFeatureToggle from './project_feature_toggle.vue';
+
+export default {
+  props: {
+    name: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    options: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    value: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
+    disabledInput: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+
+  components: {
+    projectFeatureToggle,
+  },
+
+  computed: {
+    featureEnabled() {
+      return this.value !== 0;
+    },
+
+    displayOptions() {
+      if (this.featureEnabled) {
+        return this.options;
+      }
+      return [
+        [0, 'Enable feature to choose access level'],
+      ];
+    },
+
+    displaySelectInput() {
+      return this.disabledInput || !this.featureEnabled || this.displayOptions.length < 2;
+    },
+  },
+
+  model: {
+    prop: 'value',
+    event: 'change',
+  },
+
+  methods: {
+    toggleFeature(featureEnabled) {
+      if (featureEnabled === false || this.options.length < 1) {
+        this.$emit('change', 0);
+      } else {
+        const [firstOptionValue] = this.options[this.options.length - 1];
+        this.$emit('change', firstOptionValue);
+      }
+    },
+
+    selectOption(e) {
+      this.$emit('change', Number(e.target.value));
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="project-feature-controls" :data-for="name">
+    <input
+      v-if="name"
+      type="hidden"
+      :name="name"
+      :value="value"
+    />
+    <project-feature-toggle
+      :value="featureEnabled"
+      @change="toggleFeature"
+      :disabledInput="disabledInput"
+    />
+    <div class="select-wrapper">
+      <select
+        class="form-control project-repo-select select-control"
+        @change="selectOption"
+        :disabled="displaySelectInput"
+      >
+        <option
+          v-for="[optionValue, optionName] in displayOptions"
+          :key="optionValue"
+          :value="optionValue"
+          :selected="optionValue === value"
+        >
+          {{optionName}}
+        </option>
+      </select>
+      <i aria-hidden="true" class="fa fa-chevron-down"></i>
+    </div>
+  </div>
+</template>