Merge branch '24651-environments-list-buttons' into 'master'

Improves the environments list action buttons

Closes #24651

See merge request !9424

app/assets/javascripts/environments/components/environment_actions.js.es6

@@ -15,12 +15,12 @@ module.exports = Vue.component('actions-component', {
   },
 
   template: `
-    <div class="inline">
-      <div class="dropdown">
-        <a class="dropdown-new btn btn-default" data-toggle="dropdown">
+    <div class="btn-group" role="group">
+      <button class="dropdown btn btn-default dropdown-new" data-toggle="dropdown">
+        <span>
           <span class="js-dropdown-play-icon-container" v-html="playIconSvg"></span>
           <i class="fa fa-caret-down"></i>
-        </a>
+        </span>
 
       <ul class="dropdown-menu dropdown-menu-align-right">
         <li v-for="action in actions">
@@ -37,7 +37,7 @@ module.exports = Vue.component('actions-component', {
           </a>
         </li>
       </ul>
-      </div>
+    </button>
   </div>
   `,
 });

app/assets/javascripts/environments/components/environment_item.js.es6

@@ -505,39 +505,26 @@ module.exports = Vue.component('environment-item', {
 
       <td class="hidden-xs">
         <div v-if="!model.isFolder">
-          <div v-if="hasManualActions && canCreateDeployment"
-            class="inline js-manual-actions-container">
-            <actions-component
+          <div class="btn-group" role="group">
+            <actions-component v-if="hasManualActions && canCreateDeployment"
               :play-icon-svg="playIconSvg"
               :actions="manualActions">
             </actions-component>
-          </div>
 
-          <div v-if="externalURL && canReadEnvironment"
-            class="inline js-external-url-container">
-            <external-url-component
+            <external-url-component v-if="externalURL && canReadEnvironment"
               :external-url="externalURL">
             </external-url-component>
-          </div>
 
-          <div v-if="hasStopAction && canCreateDeployment"
-            class="inline js-stop-component-container">
-            <stop-component
+            <stop-component v-if="hasStopAction && canCreateDeployment"
               :stop-url="model.stop_path">
             </stop-component>
-          </div>
 
-          <div v-if="model && model.terminal_path"
-            class="inline js-terminal-button-container">
-            <terminal-button-component
+            <terminal-button-component v-if="model && model.terminal_path"
               :terminal-icon-svg="terminalIconSvg"
               :terminal-path="model.terminal_path">
             </terminal-button-component>
-          </div>
 
-          <div v-if="canRetry && canCreateDeployment"
-            class="inline js-rollback-component-container">
-            <rollback-component
+            <rollback-component v-if="canRetry && canCreateDeployment"
               :is-last-deployment="isLastDeployment"
               :retry-url="retryUrl">
               </rollback-component>

app/assets/stylesheets/pages/environments.scss

@@ -35,7 +35,6 @@
     display: table-cell;
   }
 
-  .environments-name,
   .environments-commit,
   .environments-actions {
     width: 20%;
@@ -45,6 +44,7 @@
     width: 10%;
   }
 
+  .environments-name,
   .environments-deploy,
   .environments-build {
     width: 15%;
@@ -62,6 +62,22 @@
     }
   }
 
+  .btn-group {
+
+    > a {
+      color: $gl-text-color-secondary;
+    }
+
+    svg path {
+      fill: $gl-text-color-secondary;
+    }
+
+    .dropdown {
+      outline: none;
+    }
+  }
+
+
   .commit-title {
     margin: 0;
   }