1 files changed, 57 insertions, 0 deletions
diff --git a/app/assets/javascripts/ide/components/repo_edit_button.vue b/app/assets/javascripts/ide/components/repo_edit_button.vue
new file mode 100644
index 00000000000..37bd9003e96
--- /dev/null
+++ b/app/assets/javascripts/ide/components/repo_edit_button.vue
@@ -0,0 +1,57 @@
+<script>
+import { mapGetters, mapActions, mapState } from 'vuex';
+import modal from '../../vue_shared/components/modal.vue';
+
+export default {
+  components: {
+    modal,
+  },
+  computed: {
+    ...mapState([
+      'editMode',
+      'discardPopupOpen',
+    ]),
+    ...mapGetters([
+      'canEditFile',
+    ]),
+    buttonLabel() {
+      return this.editMode ? this.__('Cancel edit') : this.__('Edit');
+    },
+  },
+  methods: {
+    ...mapActions([
+      'toggleEditMode',
+      'closeDiscardPopup',
+    ]),
+  },
+};
+</script>
+
+<template>
+  <div class="editable-mode">
+    <button
+      v-if="canEditFile"
+      class="btn btn-default"
+      type="button"
+      @click.prevent="toggleEditMode()">
+      <i
+        v-if="!editMode"
+        class="fa fa-pencil"
+        aria-hidden="true">
+      </i>
+      <span>
+        {{buttonLabel}}
+      </span>
+    </button>
+    <modal
+      v-if="discardPopupOpen"
+      class="text-left"
+      :primary-button-label="__('Discard changes')"
+      kind="warning"
+      :title="__('Are you sure?')"
+      :text="__('Are you sure you want to discard your changes?')"
+      @toggle="closeDiscardPopup"
+      @submit="toggleEditMode(true)"
+    />
+  </div>
+</template>