1 files changed, 61 insertions, 37 deletions

diff --git a/app/assets/javascripts/environments/components/environment_item.vue b/app/assets/javascripts/environments/components/environment_item.vue
index d12863ee742..db01d455b2b 100644
--- a/app/assets/javascripts/environments/components/environment_item.vue
+++ b/app/assets/javascripts/environments/components/environment_item.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlTooltipDirective, GlIcon, GlLink, GlSprintf } from '@gitlab/ui';
+import { GlDropdown, GlTooltipDirective, GlIcon, GlLink, GlSprintf } from '@gitlab/ui';
 import { isEmpty } from 'lodash';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import { __, s__, sprintf } from '~/locale';
@@ -29,6 +29,7 @@ export default {
     ActionsComponent,
     CommitComponent,
     ExternalUrlComponent,
+    GlDropdown,
     GlIcon,
     GlLink,
     GlSprintf,
@@ -521,6 +522,10 @@ export default {
       return this.model.metrics_path || '';
     },
 
+    terminalPath() {
+      return this.model?.terminal_path ?? '';
+    },
+
     autoStopUrl() {
       return this.model.cancel_auto_stop_path || '';
     },
@@ -549,6 +554,15 @@ export default {
     tableNameSpacingClass() {
       return this.isFolder ? 'section-100' : this.tableData.name.spacing;
     },
+    hasExtraActions() {
+      return Boolean(
+        this.canRetry ||
+          this.canShowAutoStopDate ||
+          this.monitoringUrl ||
+          this.terminalPath ||
+          this.canDeleteEnvironment,
+      );
+    },
   },
 
   methods: {
@@ -776,13 +790,6 @@ export default {
       role="gridcell"
     >
       <div class="btn-group table-action-buttons" role="group">
-        <pin-component
-          v-if="canShowAutoStopDate"
-          :auto-stop-url="autoStopUrl"
-          data-track-action="click_button"
-          data-track-label="environment_pin"
-        />
-
         <external-url-component
           v-if="externalURL"
           :external-url="externalURL"
@@ -790,13 +797,6 @@ export default {
           data-track-label="environment_url"
         />
 
-        <monitoring-button-component
-          v-if="monitoringUrl"
-          :monitoring-url="monitoringUrl"
-          data-track-action="click_button"
-          data-track-label="environment_monitoring"
-        />
-
         <actions-component
           v-if="actions.length > 0"
           :actions="actions"
@@ -804,35 +804,59 @@ export default {
           data-track-label="environment_actions"
         />
 
-        <terminal-button-component
-          v-if="model && model.terminal_path"
-          :terminal-path="model.terminal_path"
-          data-track-action="click_button"
-          data-track-label="environment_terminal"
-        />
-
-        <rollback-component
-          v-if="canRetry"
-          :environment="model"
-          :is-last-deployment="isLastDeployment"
-          :retry-url="retryUrl"
-          data-track-action="click_button"
-          data-track-label="environment_rollback"
-        />
-
         <stop-component
           v-if="canStopEnvironment"
           :environment="model"
+          class="gl-z-index-2"
           data-track-action="click_button"
           data-track-label="environment_stop"
         />
 
-        <delete-component
-          v-if="canDeleteEnvironment"
-          :environment="model"
-          data-track-action="click_button"
-          data-track-label="environment_delete"
-        />
+        <gl-dropdown
+          v-if="hasExtraActions"
+          icon="ellipsis_v"
+          text-sr-only
+          :text="__('More actions')"
+          category="secondary"
+          no-caret
+        >
+          <rollback-component
+            v-if="canRetry"
+            :environment="model"
+            :is-last-deployment="isLastDeployment"
+            :retry-url="retryUrl"
+            data-track-action="click_button"
+            data-track-label="environment_rollback"
+          />
+
+          <pin-component
+            v-if="canShowAutoStopDate"
+            :auto-stop-url="autoStopUrl"
+            data-track-action="click_button"
+            data-track-label="environment_pin"
+          />
+
+          <monitoring-button-component
+            v-if="monitoringUrl"
+            :monitoring-url="monitoringUrl"
+            data-track-action="click_button"
+            data-track-label="environment_monitoring"
+          />
+
+          <terminal-button-component
+            v-if="terminalPath"
+            :terminal-path="terminalPath"
+            data-track-action="click_button"
+            data-track-label="environment_terminal"
+          />
+
+          <delete-component
+            v-if="canDeleteEnvironment"
+            :environment="model"
+            data-track-action="click_button"
+            data-track-label="environment_delete"
+          />
+        </gl-dropdown>
       </div>
     </div>
   </div>