1 files changed, 62 insertions, 0 deletions
diff --git a/app/assets/javascripts/sidebar/components/lock/edit_form.vue b/app/assets/javascripts/sidebar/components/lock/edit_form.vue
new file mode 100644
index 00000000000..616abec4d5e
--- /dev/null
+++ b/app/assets/javascripts/sidebar/components/lock/edit_form.vue
@@ -0,0 +1,62 @@
+<script>
+import editFormButtons from './edit_form_buttons.vue';
+import issuableMixin from '../../../vue_shared/mixins/issuable';
+
+export default {
+  props: {
+    isLocked: {
+      required: true,
+      type: Boolean,
+    },
+
+    toggleForm: {
+      required: true,
+      type: Function,
+    },
+
+    updateLockedAttribute: {
+      required: true,
+      type: Function,
+    },
+
+    issuableType: {
+      required: true,
+      type: String,
+    },
+  },
+
+  mixins: [
+    issuableMixin,
+  ],
+
+  components: {
+    editFormButtons,
+  },
+};
+</script>
+
+<template>
+  <div class="dropdown open">
+    <div class="dropdown-menu sidebar-item-warning-message">
+      <div>
+        <p v-if="isLocked">
+          {{ __(`Unlock this ${issuableDisplayName(issuableType)}?`) }}
+          <strong>{{ __('Everyone') }}</strong>
+          {{ __('will be able to comment.') }}
+        </p>
+
+        <p v-else>
+          {{ __(`Lock this ${issuableDisplayName(issuableType)}? Only`) }}
+          <strong>{{ __('project members') }}</strong>
+          {{ __('will be able to comment.') }}
+        </p>
+
+        <edit-form-buttons
+          :is-locked="isLocked"
+          :toggle-form="toggleForm"
+          :update-locked-attribute="updateLockedAttribute"
+        />
+      </div>
+    </div>
+  </div>
+</template>