1 files changed, 40 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/commit_edit.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/commit_edit.vue
new file mode 100644
index 00000000000..a38f25cce35
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/commit_edit.vue
@@ -0,0 +1,40 @@
+<script>
+export default {
+  props: {
+    value: {
+      type: String,
+      required: true,
+    },
+    label: {
+      type: String,
+      required: true,
+    },
+    inputId: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <li>
+    <div class="commit-message-editor">
+      <div class="d-flex flex-wrap align-items-center justify-content-between">
+        <label class="col-form-label" :for="inputId">
+          <strong>{{ label }}</strong>
+        </label>
+        <slot name="header"></slot>
+      </div>
+      <textarea
+        :id="inputId"
+        :value="value"
+        class="form-control js-gfm-input append-bottom-default commit-message-edit"
+        required="required"
+        rows="7"
+        @input="$emit('input', $event.target.value)"
+      ></textarea>
+      <slot name="checkbox"></slot>
+    </div>
+  </li>
+</template>