From c63f510d87c727116ac37388cb9cac0aec13c22b Mon Sep 17 00:00:00 2001
From: George Tsiolis <tsiolis.g@gmail.com>
Date: Sat, 28 Apr 2018 03:03:55 +0300
Subject: [PATCH] Update environment item action buttons icons

---
 .../components/environment_actions.vue         | 18 ++++++++++--------
 .../components/environment_external_url.vue    | 14 ++++++++------
 .../components/environment_monitoring.vue      | 15 ++++++++-------
 .../components/environment_rollback.vue        |  3 ---
 .../components/environment_terminal_button.vue | 18 ++++++++----------
 ...e-environment-item-action-buttons-icons.yml |  5 +++++
 6 files changed, 39 insertions(+), 34 deletions(-)
 create mode 100644 changelogs/unreleased/update-environment-item-action-buttons-icons.yml

diff --git a/app/assets/javascripts/environments/components/environment_actions.vue b/app/assets/javascripts/environments/components/environment_actions.vue
index 16bd2f5feb3..ab9e22037d0 100644
--- a/app/assets/javascripts/environments/components/environment_actions.vue
+++ b/app/assets/javascripts/environments/components/environment_actions.vue
@@ -1,5 +1,5 @@
 <script>
-  import playIconSvg from 'icons/_icon_play.svg';
+  import Icon from '~/vue_shared/components/icon.vue';
   import eventHub from '../event_hub';
   import loadingIcon from '../../vue_shared/components/loading_icon.vue';
   import tooltip from '../../vue_shared/directives/tooltip';
@@ -8,9 +8,9 @@
     directives: {
       tooltip,
     },
-
     components: {
       loadingIcon,
+      Icon,
     },
     props: {
       actions: {
@@ -19,20 +19,16 @@
         default: () => [],
       },
     },
-
     data() {
       return {
-        playIconSvg,
         isLoading: false,
       };
     },
-
     computed: {
       title() {
         return 'Deploy to...';
       },
     },
-
     methods: {
       onClickAction(endpoint) {
         this.isLoading = true;
@@ -65,7 +61,10 @@
       :disabled="isLoading"
     >
       <span>
-        <span v-html="playIconSvg"></span>
+        <icon
+          name="play"
+          :size="12"
+        />
         <i
           class="fa fa-caret-down"
           aria-hidden="true"
@@ -86,7 +85,10 @@
           :class="{ disabled: isActionDisabled(action) }"
           :disabled="isActionDisabled(action)"
         >
-          <span v-html="playIconSvg"></span>
+          <icon
+            name="play"
+            :size="12"
+          />
           <span>
             {{ action.name }}
           </span>
diff --git a/app/assets/javascripts/environments/components/environment_external_url.vue b/app/assets/javascripts/environments/components/environment_external_url.vue
index c9a68cface6..ea6f1168c68 100644
--- a/app/assets/javascripts/environments/components/environment_external_url.vue
+++ b/app/assets/javascripts/environments/components/environment_external_url.vue
@@ -1,4 +1,5 @@
 <script>
+  import Icon from '~/vue_shared/components/icon.vue';
   import tooltip from '../../vue_shared/directives/tooltip';
   import { s__ } from '../../locale';
 
@@ -6,6 +7,9 @@
   * Renders the external url link in environments table.
   */
   export default {
+    components: {
+      Icon,
+    },
     directives: {
       tooltip,
     },
@@ -15,7 +19,6 @@
         required: true,
       },
     },
-
     computed: {
       title() {
         return s__('Environments|Open');
@@ -34,10 +37,9 @@
     :aria-label="title"
     :href="externalUrl"
   >
-    <i
-      class="fa fa-external-link"
-      aria-hidden="true"
-    >
-    </i>
+    <icon
+      name="external-link"
+      :size="12"
+    />
   </a>
 </template>
diff --git a/app/assets/javascripts/environments/components/environment_monitoring.vue b/app/assets/javascripts/environments/components/environment_monitoring.vue
index 081537cf218..deada134b27 100644
--- a/app/assets/javascripts/environments/components/environment_monitoring.vue
+++ b/app/assets/javascripts/environments/components/environment_monitoring.vue
@@ -2,20 +2,22 @@
   /**
   * Renders the Monitoring (Metrics) link in environments table.
   */
+  import Icon from '~/vue_shared/components/icon.vue';
   import tooltip from '../../vue_shared/directives/tooltip';
 
   export default {
+    components: {
+      Icon,
+    },
     directives: {
       tooltip,
     },
-
     props: {
       monitoringUrl: {
         type: String,
         required: true,
       },
     },
-
     computed: {
       title() {
         return 'Monitoring';
@@ -33,10 +35,9 @@
     :title="title"
     :aria-label="title"
   >
-    <i
-      class="fa fa-area-chart"
-      aria-hidden="true"
-    >
-    </i>
+    <icon
+      name="chart"
+      :size="12"
+    />
   </a>
 </template>
diff --git a/app/assets/javascripts/environments/components/environment_rollback.vue b/app/assets/javascripts/environments/components/environment_rollback.vue
index 605a88e997e..c822fb1574c 100644
--- a/app/assets/javascripts/environments/components/environment_rollback.vue
+++ b/app/assets/javascripts/environments/components/environment_rollback.vue
@@ -12,7 +12,6 @@
     components: {
       loadingIcon,
     },
-
     props: {
       retryUrl: {
         type: String,
@@ -24,13 +23,11 @@
         default: true,
       },
     },
-
     data() {
       return {
         isLoading: false,
       };
     },
-
     methods: {
       onClick() {
         this.isLoading = true;
diff --git a/app/assets/javascripts/environments/components/environment_terminal_button.vue b/app/assets/javascripts/environments/components/environment_terminal_button.vue
index 407d5333c0e..e8469d088ef 100644
--- a/app/assets/javascripts/environments/components/environment_terminal_button.vue
+++ b/app/assets/javascripts/environments/components/environment_terminal_button.vue
@@ -3,14 +3,16 @@
   * Renders a terminal button to open a web terminal.
   * Used in environments table.
   */
-  import terminalIconSvg from 'icons/_icon_terminal.svg';
+  import Icon from '~/vue_shared/components/icon.vue';
   import tooltip from '../../vue_shared/directives/tooltip';
 
   export default {
+    components: {
+      Icon,
+    },
     directives: {
       tooltip,
     },
-
     props: {
       terminalPath: {
         type: String,
@@ -18,13 +20,6 @@
         default: '',
       },
     },
-
-    data() {
-      return {
-        terminalIconSvg,
-      };
-    },
-
     computed: {
       title() {
         return 'Terminal';
@@ -40,7 +35,10 @@
     :title="title"
     :aria-label="title"
     :href="terminalPath"
-    v-html="terminalIconSvg"
   >
+    <icon
+      name="terminal"
+      :size="12"
+    />
   </a>
 </template>
diff --git a/changelogs/unreleased/update-environment-item-action-buttons-icons.yml b/changelogs/unreleased/update-environment-item-action-buttons-icons.yml
new file mode 100644
index 00000000000..7f06022be3e
--- /dev/null
+++ b/changelogs/unreleased/update-environment-item-action-buttons-icons.yml
@@ -0,0 +1,5 @@
+---
+title: Update environment item action buttons icons
+merge_request: 18632
+author: George Tsiolis
+type: changed