1 files changed, 92 insertions, 0 deletions
diff --git a/app/assets/javascripts/environments/components/environment_actions.vue b/app/assets/javascripts/environments/components/environment_actions.vue
new file mode 100644
index 00000000000..e7495677e7c
--- /dev/null
+++ b/app/assets/javascripts/environments/components/environment_actions.vue
@@ -0,0 +1,92 @@
+<script>
+import playIconSvg from 'icons/_icon_play.svg';
+import eventHub from '../event_hub';
+import loadingIcon from '../../vue_shared/components/loading_icon.vue';
+import tooltip from '../../vue_shared/directives/tooltip';
+
+export default {
+  props: {
+    actions: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+  },
+
+  directives: {
+    tooltip,
+  },
+
+  components: {
+    loadingIcon,
+  },
+
+  data() {
+    return {
+      playIconSvg,
+      isLoading: false,
+    };
+  },
+
+  computed: {
+    title() {
+      return 'Deploy to...';
+    },
+  },
+
+  methods: {
+    onClickAction(endpoint) {
+      this.isLoading = true;
+
+      eventHub.$emit('postAction', endpoint);
+    },
+
+    isActionDisabled(action) {
+      if (action.playable === undefined) {
+        return false;
+      }
+
+      return !action.playable;
+    },
+  },
+};
+</script>
+<template>
+  <div
+    class="btn-group"
+    role="group">
+    <button
+      v-tooltip
+      type="button"
+      class="dropdown btn btn-default dropdown-new js-dropdown-play-icon-container"
+      data-container="body"
+      data-toggle="dropdown"
+      :title="title"
+      :aria-label="title"
+      :disabled="isLoading">
+      <span>
+        <span v-html="playIconSvg"></span>
+        <i
+          class="fa fa-caret-down"
+          aria-hidden="true"/>
+        <loading-icon v-if="isLoading" />
+      </span>
+    </button>
+
+    <ul class="dropdown-menu dropdown-menu-align-right">
+      <li v-for="action in actions">
+        <button
+          type="button"
+          class="js-manual-action-link no-btn btn"
+          @click="onClickAction(action.play_path)"
+          :class="{ disabled: isActionDisabled(action) }"
+          :disabled="isActionDisabled(action)">
+          <span v-html="playIconSvg"></span>
+          <span>
+            {{action.name}}
+          </span>
+        </button>
+      </li>
+    </ul>
+  </div>
+</template>