1 files changed, 49 insertions, 0 deletions
diff --git a/app/assets/javascripts/add_context_commits_modal/components/add_context_commits_modal_trigger.vue b/app/assets/javascripts/add_context_commits_modal/components/add_context_commits_modal_trigger.vue
new file mode 100644
index 00000000000..78a575ffe96
--- /dev/null
+++ b/app/assets/javascripts/add_context_commits_modal/components/add_context_commits_modal_trigger.vue
@@ -0,0 +1,49 @@
+<script>
+import { GlButton } from '@gitlab/ui';
+import { s__ } from '~/locale';
+import eventHub from '../event_hub';
+
+export default {
+  components: {
+    GlButton,
+  },
+  props: {
+    commitsEmpty: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    contextCommitsEmpty: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  computed: {
+    buttonText() {
+      return this.contextCommitsEmpty || this.commitsEmpty
+        ? s__('AddContextCommits|Add previously merged commits')
+        : s__('AddContextCommits|Add/remove');
+    },
+  },
+  methods: {
+    openModal() {
+      eventHub.$emit('openModal');
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-button
+    :class="[
+      {
+        'ml-3': !contextCommitsEmpty,
+        'mt-3': !commitsEmpty && contextCommitsEmpty,
+      },
+    ]"
+    :variant="commitsEmpty ? 'info' : 'default'"
+    @click="openModal"
+  >
+    {{ buttonText }}
+  </gl-button>
+</template>