1 files changed, 53 insertions, 0 deletions
diff --git a/app/assets/javascripts/integrations/edit/components/active_toggle.vue b/app/assets/javascripts/integrations/edit/components/active_toggle.vue
new file mode 100644
index 00000000000..2b0aa2586e4
--- /dev/null
+++ b/app/assets/javascripts/integrations/edit/components/active_toggle.vue
@@ -0,0 +1,53 @@
+<script>
+import eventHub from '../event_hub';
+import { GlToggle } from '@gitlab/ui';
+
+export default {
+  name: 'ActiveToggle',
+  components: {
+    GlToggle,
+  },
+  props: {
+    initialActivated: {
+      type: Boolean,
+      required: true,
+    },
+    disabled: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      activated: this.initialActivated,
+    };
+  },
+  mounted() {
+    // Initialize view
+    this.$nextTick(() => {
+      this.onToggle(this.activated);
+    });
+  },
+  methods: {
+    onToggle(e) {
+      eventHub.$emit('toggle', e);
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div class="form-group row" role="group">
+      <label for="service[active]" class="col-form-label col-sm-2">{{ __('Active') }}</label>
+      <div class="col-sm-10 pt-1">
+        <gl-toggle
+          v-model="activated"
+          :disabled="disabled"
+          name="service[active]"
+          @change="onToggle"
+        />
+      </div>
+    </div>
+  </div>
+</template>