app/assets/javascripts/droplab/drop_down.js

-/* eslint-disable */
-
 import utils from './utils';
 import { SELECTED_CLASS, IGNORE_CLASS } from './constants';
-var DropDown = function(list) {
-  this.currentIndex = 0;
-  this.hidden = true;
-  this.list = typeof list === 'string' ? document.querySelector(list) : list;
-  this.items = [];
-  this.eventWrapper = {};
-  this.getItems();
-  this.initTemplateString();
-  this.addEvents();
-  this.initialState = list.innerHTML;
-};
-Object.assign(DropDown.prototype, {
-  getItems: function() {
+class DropDown {
+  constructor(list) {
+    this.currentIndex = 0;
+    this.hidden = true;
+    this.list = typeof list === 'string' ? document.querySelector(list) : list;
+    this.items = [];
+    this.eventWrapper = {};
+    this.getItems();
+    this.initTemplateString();
+    this.addEvents();
+    this.initialState = list.innerHTML;
+  }
+  getItems() {
     this.items = [].slice.call(this.list.querySelectorAll('li'));
     return this.items;
-  },
-  initTemplateString: function() {
-    var items = this.items || this.getItems();
-    var templateString = '';
+  }
+  initTemplateString() {
+    const items = this.items || this.getItems();
+    let templateString = '';
     if (items.length > 0) templateString = items[items.length - 1].outerHTML;
     this.templateString = templateString;
     return this.templateString;
-  },
-  clickEvent: function(e) {
+  }
+  clickEvent(e) {
     if (e.target.tagName === 'UL') return;
     if (e.target.classList.contains(IGNORE_CLASS)) return;
-    var selected = utils.closest(e.target, 'LI');
+    const selected = utils.closest(e.target, 'LI');
     if (!selected) return;
     this.addSelectedClass(selected);
@@ -46,95 +44,95 @@ Object.assign(DropDown.prototype, {
     e.preventDefault();
     this.hide();
-    var listEvent = new CustomEvent('click.dl', {
+    const listEvent = new CustomEvent('click.dl', {
       detail: {
         list: this,
-        selected: selected,
+        selected,
         data: e.target.dataset,
       },
     });
     this.list.dispatchEvent(listEvent);
-  },
-  addSelectedClass: function (selected) {
+  }
+  addSelectedClass(selected) {
     this.removeSelectedClasses();
     selected.classList.add(SELECTED_CLASS);
-  },
-  removeSelectedClasses: function () {
+  }
+  removeSelectedClasses() {
     const items = this.items || this.getItems();
     items.forEach(item => item.classList.remove(SELECTED_CLASS));
-  },
-  addEvents: function() {
-    this.eventWrapper.clickEvent = this.clickEvent.bind(this)
+  }
+  addEvents() {
+    this.eventWrapper.clickEvent = this.clickEvent.bind(this);
     this.list.addEventListener('click', this.eventWrapper.clickEvent);
-  },
-
-  toggle: function() {
-    this.hidden ? this.show() : this.hide();
-  },
-  setData: function(data) {
+  }
+  setData(data) {
     this.data = data;
     this.render(data);
-  },
-  addData: function(data) {
+  }
+  addData(data) {
     this.data = (this.data || []).concat(data);
     this.render(this.data);
-  },
-  render: function(data) {
+  }
+  render(data) {
     const children = data ? data.map(this.renderChildren.bind(this)) : [];
     const renderableList = this.list.querySelector('ul[data-dynamic]') || this.list;
     renderableList.innerHTML = children.join('');
-  },
-  renderChildren: function(data) {
-    var html = utils.template(this.templateString, data);
-    var template = document.createElement('div');
+  }
+  renderChildren(data) {
+    const html = utils.template(this.templateString, data);
+    const template = document.createElement('div');
     template.innerHTML = html;
-    this.setImagesSrc(template);
+    DropDown.setImagesSrc(template);
     template.firstChild.style.display = data.droplab_hidden ? 'none' : 'block';
     return template.firstChild.outerHTML;
-  },
-
-  setImagesSrc: function(template) {
-    const images = [].slice.call(template.querySelectorAll('img[data-src]'));
-
-    images.forEach((image) => {
-      image.src = image.getAttribute('data-src');
-      image.removeAttribute('data-src');
-    });
-  },
-  show: function() {
+  }
+  show() {
     if (!this.hidden) return;
     this.list.style.display = 'block';
     this.currentIndex = 0;
     this.hidden = false;
-  },
-  hide: function() {
+  }
+  hide() {
     if (this.hidden) return;
     this.list.style.display = 'none';
     this.currentIndex = 0;
     this.hidden = true;
-  },
-  toggle: function () {
-    this.hidden ? this.show() : this.hide();
-  },
-  destroy: function() {
+  }
+  toggle() {
+    if (this.hidden) return this.show();
+    return this.hide();
+  }
+
+  destroy() {
     this.hide();
     this.list.removeEventListener('click', this.eventWrapper.clickEvent);
   }
-});
+
+  static setImagesSrc(template) {
+    const images = [...template.querySelectorAll('img[data-src]')];
+
+    images.forEach((image) => {
+      const img = image;
+
+      img.src = img.getAttribute('data-src');
+      img.removeAttribute('data-src');
+    });
+  }
+}
 export default DropDown;

app/assets/javascripts/droplab/drop_lab.js

-/* eslint-disable */
-
 import HookButton from './hook_button';
 import HookInput from './hook_input';
 import utils from './utils';
 import Keyboard from './keyboard';
 import { DATA_TRIGGER } from './constants';
-var DropLab = function() {
-  this.ready = false;
-  this.hooks = [];
-  this.queuedData = [];
-  this.config = {};
-  this.eventWrapper = {};
-};
-Object.assign(DropLab.prototype, {
-  loadStatic: function(){
-    var dropdownTriggers = [].slice.apply(document.querySelectorAll(`[${DATA_TRIGGER}]`));
+class DropLab {
+  constructor() {
+    this.ready = false;
+    this.hooks = [];
+    this.queuedData = [];
+    this.config = {};
+    this.eventWrapper = {};
+  }
+  loadStatic() {
+    const dropdownTriggers = [].slice.apply(document.querySelectorAll(`[${DATA_TRIGGER}]`));
     this.addHooks(dropdownTriggers);
-  },
-  addData: function () {
-    var args = [].slice.apply(arguments);
-    this.applyArgs(args, '_addData');
-  },
-  setData: function() {
-    var args = [].slice.apply(arguments);
-    this.applyArgs(args, '_setData');
-  },
-  destroy: function() {
+  }
+  addData(...args) {
+    this.applyArgs(args, 'processAddData');
+  }
+  setData(...args) {
+    this.applyArgs(args, 'processSetData');
+  }
+  destroy() {
     this.hooks.forEach(hook => hook.destroy());
     this.hooks = [];
     this.removeEvents();
-  },
-  applyArgs: function(args, methodName) {
-    if (this.ready) return this[methodName].apply(this, args);
+  }
+  applyArgs(args, methodName) {
+    if (this.ready) return this[methodName](...args);
     this.queuedData = this.queuedData || [];
     this.queuedData.push(args);
-  },
-  _addData: function(trigger, data) {
-    this._processData(trigger, data, 'addData');
-  },
-  _setData: function(trigger, data) {
-    this._processData(trigger, data, 'setData');
-  },
-  _processData: function(trigger, data, methodName) {
+    return this.ready;
+  }
+
+  processAddData(trigger, data) {
+    this.processData(trigger, data, 'addData');
+  }
+  processSetData(trigger, data) {
+    this.processData(trigger, data, 'setData');
+  }
+  processData(trigger, data, methodName) {
     this.hooks.forEach((hook) => {
       if (Array.isArray(trigger)) hook.list[methodName](trigger);
       if (hook.trigger.id === trigger) hook.list[methodName](data);
     });
-  },
-  addEvents: function() {
-    this.eventWrapper.documentClicked = this.documentClicked.bind(this)
+  }
+  addEvents() {
+    this.eventWrapper.documentClicked = this.documentClicked.bind(this);
     document.addEventListener('click', this.eventWrapper.documentClicked);
-  },
-  documentClicked: function(e) {
+  }
+  documentClicked(e) {
     let thisTag = e.target;
     if (thisTag.tagName !== 'UL') thisTag = utils.closest(thisTag, 'UL');
-    if (utils.isDropDownParts(thisTag, this.hooks) || utils.isDropDownParts(e.target, this.hooks)) return;
+    if (utils.isDropDownParts(thisTag, this.hooks)) return;
+    if (utils.isDropDownParts(e.target, this.hooks)) return;
     this.hooks.forEach(hook => hook.list.hide());
-  },
-  removeEvents: function(){
+  }
+  removeEvents() {
     document.removeEventListener('click', this.eventWrapper.documentClicked);
-  },
-
-  changeHookList: function(trigger, list, plugins, config) {
-    const availableTrigger =  typeof trigger === 'string' ? document.getElementById(trigger) : trigger;
+  }
+  changeHookList(trigger, list, plugins, config) {
+    const availableTrigger = typeof trigger === 'string' ? document.getElementById(trigger) : trigger;
     this.hooks.forEach((hook, i) => {
-      hook.list.list.dataset.dropdownActive = false;
-      if (hook.trigger !== availableTrigger) return;
-      hook.destroy();
+      const aHook = hook;
+
+      aHook.list.list.dataset.dropdownActive = false;
+      if (aHook.trigger !== availableTrigger) return;
+      aHook.destroy();
       this.hooks.splice(i, 1);
       this.addHook(availableTrigger, list, plugins, config);
     });
-  },
-  addHook: function(hook, list, plugins, config) {
+  }
+  addHook(hook, list, plugins, config) {
     const availableHook = typeof hook === 'string' ? document.querySelector(hook) : hook;
     let availableList;
@@ -111,18 +111,18 @@ Object.assign(DropLab.prototype, {
     this.hooks.push(new HookObject(availableHook, availableList, plugins, config));
     return this;
-  },
-  addHooks: function(hooks, plugins, config) {
+  }
+  addHooks(hooks, plugins, config) {
     hooks.forEach(hook => this.addHook(hook, null, plugins, config));
     return this;
-  },
-  setConfig: function(obj){
+  }
+  setConfig(obj) {
     this.config = obj;
-  },
-  fireReady: function() {
+  }
+  fireReady() {
     const readyEvent = new CustomEvent('ready.dl', {
       detail: {
         dropdown: this,
@@ -131,10 +131,14 @@ Object.assign(DropLab.prototype, {
     document.dispatchEvent(readyEvent);
     this.ready = true;
-  },
-  init: function (hook, list, plugins, config) {
-    hook ? this.addHook(hook, list, plugins, config) : this.loadStatic();
+  }
+  init(hook, list, plugins, config) {
+    if (hook) {
+      this.addHook(hook, list, plugins, config);
+    } else {
+      this.loadStatic();
+    }
     this.addEvents();
@@ -146,7 +150,7 @@ Object.assign(DropLab.prototype, {
     this.queuedData = [];
     return this;
-  },
-});
+  }
+}
 export default DropLab;

app/assets/javascripts/droplab/hook.js

-/* eslint-disable */
-
 import DropDown from './drop_down';
-var Hook = function(trigger, list, plugins, config){
-  this.trigger = trigger;
-  this.list = new DropDown(list);
-  this.type = 'Hook';
-  this.event = 'click';
-  this.plugins = plugins || [];
-  this.config = config || {};
-  this.id = trigger.id;
-};
-
-Object.assign(Hook.prototype, {
-
-  addEvents: function(){},
-
-  constructor: Hook,
-});
+class Hook {
+  constructor(trigger, list, plugins, config) {
+    this.trigger = trigger;
+    this.list = new DropDown(list);
+    this.type = 'Hook';
+    this.event = 'click';
+    this.plugins = plugins || [];
+    this.config = config || {};
+    this.id = trigger.id;
+  }
+}
 export default Hook;

app/assets/javascripts/droplab/hook_button.js

-/* eslint-disable */
-
 import Hook from './hook';
-var HookButton = function(trigger, list, plugins, config) {
-  Hook.call(this, trigger, list, plugins, config);
-
-  this.type = 'button';
-  this.event = 'click';
-  this.eventWrapper = {};
-  this.addEvents();
-  this.addPlugins();
-};
-HookButton.prototype = Object.create(Hook.prototype);
-Object.assign(HookButton.prototype, {
-  addPlugins: function() {
+class HookButton extends Hook {
+  constructor(trigger, list, plugins, config) {
+    super(trigger, list, plugins, config);
+    this.type = 'button';
+    this.event = 'click';
+    this.eventWrapper = {};
+    this.addEvents();
+    this.addPlugins();
+  }
+  addPlugins() {
     this.plugins.forEach(plugin => plugin.init(this));
-  },
-  clicked: function(e){
-    var buttonEvent = new CustomEvent('click.dl', {
+  }
+  clicked(e) {
+    const buttonEvent = new CustomEvent('click.dl', {
       detail: {
         hook: this,
       },
       bubbles: true,
-      cancelable: true
+      cancelable: true,
     });
     e.target.dispatchEvent(buttonEvent);
     this.list.toggle();
-  },
-  addEvents: function(){
+  }
+  addEvents() {
     this.eventWrapper.clicked = this.clicked.bind(this);
     this.trigger.addEventListener('click', this.eventWrapper.clicked);
-  },
-  removeEvents: function(){
+  }
+  removeEvents() {
     this.trigger.removeEventListener('click', this.eventWrapper.clicked);
-  },
-  restoreInitialState: function() {
+  }
+  restoreInitialState() {
     this.list.list.innerHTML = this.list.initialState;
-  },
-  removePlugins: function() {
+  }
+  removePlugins() {
     this.plugins.forEach(plugin => plugin.destroy());
-  },
-  destroy: function() {
+  }
+  destroy() {
     this.restoreInitialState();
     this.removeEvents();
     this.removePlugins();
-  },
-
-  constructor: HookButton,
-});
-
+  }
+}
 export default HookButton;

app/assets/javascripts/droplab/hook_input.js

-/* eslint-disable */
-
 import Hook from './hook';
-var HookInput = function(trigger, list, plugins, config) {
-  Hook.call(this, trigger, list, plugins, config);
-  this.type = 'input';
-  this.event = 'input';
-  this.eventWrapper = {};
-  this.addEvents();
-  this.addPlugins();
-};
-Object.assign(HookInput.prototype, {
-  addPlugins: function() {
+class HookInput extends Hook {
+  constructor(trigger, list, plugins, config) {
+    super(trigger, list, plugins, config);
+    this.type = 'input';
+    this.event = 'input';
+    this.eventWrapper = {};
+    this.addEvents();
+    this.addPlugins();
+  }
+  addPlugins() {
     this.plugins.forEach(plugin => plugin.init(this));
-  },
-  addEvents: function(){
+  }
+  addEvents() {
     this.eventWrapper.mousedown = this.mousedown.bind(this);
     this.eventWrapper.input = this.input.bind(this);
     this.eventWrapper.keyup = this.keyup.bind(this);
@@ -29,19 +27,19 @@ Object.assign(HookInput.prototype, {
     this.trigger.addEventListener('input', this.eventWrapper.input);
     this.trigger.addEventListener('keyup', this.eventWrapper.keyup);
     this.trigger.addEventListener('keydown', this.eventWrapper.keydown);
-  },
-  removeEvents: function() {
+  }
+  removeEvents() {
     this.hasRemovedEvents = true;
     this.trigger.removeEventListener('mousedown', this.eventWrapper.mousedown);
     this.trigger.removeEventListener('input', this.eventWrapper.input);
     this.trigger.removeEventListener('keyup', this.eventWrapper.keyup);
     this.trigger.removeEventListener('keydown', this.eventWrapper.keydown);
-  },
-  input: function(e) {
-    if(this.hasRemovedEvents) return;
+  }
+  input(e) {
+    if (this.hasRemovedEvents) return;
     this.list.show();
@@ -51,12 +49,12 @@ Object.assign(HookInput.prototype, {
         text: e.target.value,
       },
       bubbles: true,
-      cancelable: true
+      cancelable: true,
     });
     e.target.dispatchEvent(inputEvent);
-  },
-  mousedown: function(e) {
+  }
+  mousedown(e) {
     if (this.hasRemovedEvents) return;
     const mouseEvent = new CustomEvent('mousedown.dl', {
@@ -68,21 +66,21 @@ Object.assign(HookInput.prototype, {
       cancelable: true,
     });
     e.target.dispatchEvent(mouseEvent);
-  },
-  keyup: function(e) {
+  }
+  keyup(e) {
     if (this.hasRemovedEvents) return;
     this.keyEvent(e, 'keyup.dl');
-  },
-  keydown: function(e) {
+  }
+  keydown(e) {
     if (this.hasRemovedEvents) return;
     this.keyEvent(e, 'keydown.dl');
-  },
-  keyEvent: function(e, eventName) {
+  }
+  keyEvent(e, eventName) {
     this.list.show();
     const keyEvent = new CustomEvent(eventName, {
@@ -96,17 +94,17 @@ Object.assign(HookInput.prototype, {
       cancelable: true,
     });
     e.target.dispatchEvent(keyEvent);
-  },
-  restoreInitialState: function() {
+  }
+  restoreInitialState() {
     this.list.list.innerHTML = this.list.initialState;
-  },
-  removePlugins: function() {
+  }
+  removePlugins() {
     this.plugins.forEach(plugin => plugin.destroy());
-  },
-  destroy: function() {
+  }
+  destroy() {
     this.restoreInitialState();
     this.removeEvents();
@@ -114,6 +112,6 @@ Object.assign(HookInput.prototype, {
     this.list.destroy();
   }
-});
+}
 export default HookInput;

app/assets/javascripts/environments/components/environment.vue

 <script>
 /* global Flash */
 import EnvironmentsService from '../services/environments_service';
-import EnvironmentTable from './environments_table.vue';
+import environmentTable from './environments_table.vue';
 import EnvironmentsStore from '../stores/environments_store';
-import TablePaginationComponent from '../../vue_shared/components/table_pagination';
+import loadingIcon from '../../vue_shared/components/loading_icon.vue';
+import tablePagination from '../../vue_shared/components/table_pagination.vue';
 import '../../lib/utils/common_utils';
 import eventHub from '../event_hub';
 export default {
   components: {
-    'environment-table': EnvironmentTable,
-    'table-pagination': TablePaginationComponent,
+    environmentTable,
+    tablePagination,
+    loadingIcon,
   },
   data() {
@@ -186,14 +188,11 @@ export default {
     </div>
     <div class="content-list environments-container">
-      <div
-          class="environments-list-loading text-center"
-          v-if="isLoading">
-
-        <i
-          class="fa fa-spinner fa-spin"
-          aria-hidden="true" />
-      </div>
+      <loading-icon
+        label="Loading environments"
+        size="3"
+        v-if="isLoading"
+        />
       <div
         class="blank-state blank-state-no-icon"

app/assets/javascripts/environments/components/environment_actions.vue

 <script>
 import playIconSvg from 'icons/_icon_play.svg';
 import eventHub from '../event_hub';
+import loadingIcon from '../../vue_shared/components/loading_icon.vue';
 export default {
   props: {
@@ -11,6 +12,10 @@ export default {
     },
   },
+  components: {
+    loadingIcon,
+  },
+
   data() {
     return {
       playIconSvg,
@@ -61,10 +66,7 @@ export default {
         <i
           class="fa fa-caret-down"
           aria-hidden="true"/>
-        <i
-          v-if="isLoading"
-          class="fa fa-spinner fa-spin"
-          aria-hidden="true"/>
+        <loading-icon v-if="isLoading" />
       </span>
     </button>

app/assets/javascripts/environments/components/environment_item.vue

 <script>
 import Timeago from 'timeago.js';
+import _ from 'underscore';
 import '../../lib/utils/text_utility';
 import ActionsComponent from './environment_actions.vue';
 import ExternalUrlComponent from './environment_external_url.vue';
@@ -59,7 +60,7 @@ export default {
     hasLastDeploymentKey() {
       if (this.model &&
         this.model.last_deployment &&
-        !this.$options.isObjectEmpty(this.model.last_deployment)) {
+        !_.isEmpty(this.model.last_deployment)) {
         return true;
       }
       return false;
@@ -310,8 +311,8 @@ export default {
      */
     deploymentHasUser() {
       return this.model &&
-        !this.$options.isObjectEmpty(this.model.last_deployment) &&
-        !this.$options.isObjectEmpty(this.model.last_deployment.user);
+        !_.isEmpty(this.model.last_deployment) &&
+        !_.isEmpty(this.model.last_deployment.user);
     },
     /**
@@ -322,8 +323,8 @@ export default {
      */
     deploymentUser() {
       if (this.model &&
-        !this.$options.isObjectEmpty(this.model.last_deployment) &&
-        !this.$options.isObjectEmpty(this.model.last_deployment.user)) {
+        !_.isEmpty(this.model.last_deployment) &&
+        !_.isEmpty(this.model.last_deployment.user)) {
         return this.model.last_deployment.user;
       }
       return {};
@@ -338,8 +339,8 @@ export default {
      */
     shouldRenderBuildName() {
       return !this.model.isFolder &&
-        !this.$options.isObjectEmpty(this.model.last_deployment) &&
-        !this.$options.isObjectEmpty(this.model.last_deployment.deployable);
+        !_.isEmpty(this.model.last_deployment) &&
+        !_.isEmpty(this.model.last_deployment.deployable);
     },
     /**
@@ -380,7 +381,7 @@ export default {
      */
     shouldRenderDeploymentID() {
       return !this.model.isFolder &&
-        !this.$options.isObjectEmpty(this.model.last_deployment) &&
+        !_.isEmpty(this.model.last_deployment) &&
         this.model.last_deployment.iid !== undefined;
     },
@@ -410,21 +411,6 @@ export default {
     },
   },
-  /**
-   * Helper to verify if certain given object are empty.
-   * Should be replaced by lodash _.isEmpty - https://lodash.com/docs/4.17.2#isEmpty
-   * @param  {Object} object
-   * @returns {Bollean}
-   */
-  isObjectEmpty(object) {
-    for (const key in object) { // eslint-disable-line
-      if (hasOwnProperty.call(object, key)) {
-        return false;
-      }
-    }
-    return true;
-  },
-
   methods: {
     onClickFolder() {
       eventHub.$emit('toggleFolder', this.model, this.folderUrl);

app/assets/javascripts/environments/components/environment_rollback.vue

@@ -6,6 +6,7 @@
  * Makes a post request when the button is clicked.
  */
 import eventHub from '../event_hub';
+import loadingIcon from '../../vue_shared/components/loading_icon.vue';
 export default {
   props: {
@@ -20,6 +21,10 @@ export default {
     },
   },
+  components: {
+    loadingIcon,
+  },
+
   data() {
     return {
       isLoading: false,
@@ -49,9 +54,6 @@ export default {
       Rollback
     </span>
-    <i
-      v-if="isLoading"
-      class="fa fa-spinner fa-spin"
-      aria-hidden="true" />
+    <loading-icon v-if="isLoading" />
   </button>
 </template>

app/assets/javascripts/environments/components/environment_stop.vue

@@ -4,6 +4,7 @@
  * Used in environments table.
  */
 import eventHub from '../event_hub';
+import loadingIcon from '../../vue_shared/components/loading_icon.vue';
 export default {
   props: {
@@ -19,6 +20,10 @@ export default {
     };
   },
+  components: {
+    loadingIcon,
+  },
+
   computed: {
     title() {
       return 'Stop';
@@ -51,9 +56,6 @@ export default {
     <i
       class="fa fa-stop stop-env-icon"
       aria-hidden="true" />
-    <i
-      v-if="isLoading"
-      class="fa fa-spinner fa-spin"
-      aria-hidden="true" />
+    <loading-icon v-if="isLoading" />
   </button>
 </template>

app/assets/javascripts/environments/components/environments_table.vue

@@ -3,10 +3,12 @@
  * Render environments table.
  */
 import EnvironmentTableRowComponent from './environment_item.vue';
+import loadingIcon from '../../vue_shared/components/loading_icon.vue';
 export default {
   components: {
     'environment-item': EnvironmentTableRowComponent,
+    loadingIcon,
   },
   props: {
@@ -77,10 +79,8 @@ export default {
         <template v-if="model.isFolder && model.isOpen && model.children && model.children.length > 0">
           <tr v-if="isLoadingFolderContent">
-            <td colspan="6" class="text-center">
-              <i
-                class="fa fa-spin fa-spinner fa-2x"
-                aria-hidden="true" />
+            <td colspan="6">
+              <loading-icon size="2" />
             </td>
           </tr>

app/assets/javascripts/environments/folder/environments_folder_view.vue

 <script>
 /* global Flash */
 import EnvironmentsService from '../services/environments_service';
-import EnvironmentTable from '../components/environments_table.vue';
+import environmentTable from '../components/environments_table.vue';
 import EnvironmentsStore from '../stores/environments_store';
-import TablePaginationComponent from '../../vue_shared/components/table_pagination';
+import loadingIcon from '../../vue_shared/components/loading_icon.vue';
+import tablePagination from '../../vue_shared/components/table_pagination.vue';
 import '../../lib/utils/common_utils';
 import '../../vue_shared/vue_resource_interceptor';
 export default {
   components: {
-    'environment-table': EnvironmentTable,
-    'table-pagination': TablePaginationComponent,
+    environmentTable,
+    tablePagination,
+    loadingIcon,
   },
   data() {
@@ -153,13 +155,12 @@ export default {
     </div>
     <div class="environments-container">
-      <div
-        class="environments-list-loading text-center"
-        v-if="isLoading">
-        <i
-          class="fa fa-spinner fa-spin"
-          aria-hidden="true"/>
-      </div>
+
+      <loading-icon
+        label="Loading environments"
+        v-if="isLoading"
+        size="3"
+        />
       <div
         class="table-holder"

app/assets/javascripts/files_comment_button.js

@@ -3,7 +3,6 @@
 /* global notes */
 let $commentButtonTemplate;
-var bind = function(fn, me) { return function() { return fn.apply(me, arguments); }; };
 window.FilesCommentButton = (function() {
   var COMMENT_BUTTON_CLASS, EMPTY_CELL_CLASS, LINE_COLUMN_CLASSES, LINE_CONTENT_CLASS, LINE_HOLDER_CLASS, LINE_NUMBER_CLASS, OLD_LINE_CLASS, TEXT_FILE_SELECTOR, UNFOLDABLE_LINE_CLASS;
@@ -27,8 +26,8 @@ window.FilesCommentButton = (function() {
   TEXT_FILE_SELECTOR = '.text-file';
   function FilesCommentButton(filesContainerElement) {
-    this.render = bind(this.render, this);
-    this.hideButton = bind(this.hideButton, this);
+    this.render = this.render.bind(this);
+    this.hideButton = this.hideButton.bind(this);
     this.isParallelView = notes.isParallelView();
     filesContainerElement.on('mouseover', LINE_COLUMN_CLASSES, this.render)
       .on('mouseleave', LINE_COLUMN_CLASSES, this.hideButton);

app/assets/javascripts/gl_dropdown.js

 /* eslint-disable func-names, space-before-function-paren, no-var, one-var, one-var-declaration-per-line, prefer-rest-params, max-len, vars-on-top, wrap-iife, no-unused-vars, quotes, no-shadow, no-cond-assign, prefer-arrow-callback, no-return-assign, no-else-return, camelcase, comma-dangle, no-lonely-if, guard-for-in, no-restricted-syntax, consistent-return, prefer-template, no-param-reassign, no-loop-func, no-mixed-operators */
 /* global fuzzaldrinPlus */
-var GitLabDropdown, GitLabDropdownFilter, GitLabDropdownRemote,
-  bind = function(fn, me) { return function() { return fn.apply(me, arguments); }; },
-  indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i += 1) { if (i in this && this[i] === item) return i; } return -1; };
+import { isObject } from './lib/utils/type_utility';
+var GitLabDropdown, GitLabDropdownFilter, GitLabDropdownRemote;
 GitLabDropdownFilter = (function() {
   var ARROW_KEY_CODES, BLUR_KEYCODES, HAS_VALUE_CLASS;
@@ -95,7 +94,7 @@ GitLabDropdownFilter = (function() {
           //     { prop: 'def' }
           //   ]
           // }
-          if (gl.utils.isObject(data)) {
+          if (isObject(data)) {
             results = {};
             for (key in data) {
               group = data[key];
@@ -213,10 +212,10 @@ GitLabDropdown = (function() {
     var searchFields, selector, self;
     this.el = el1;
     this.options = options;
-    this.updateLabel = bind(this.updateLabel, this);
-    this.hidden = bind(this.hidden, this);
-    this.opened = bind(this.opened, this);
-    this.shouldPropagate = bind(this.shouldPropagate, this);
+    this.updateLabel = this.updateLabel.bind(this);
+    this.hidden = this.hidden.bind(this);
+    this.opened = this.opened.bind(this);
+    this.shouldPropagate = this.shouldPropagate.bind(this);
     self = this;
     selector = $(this.el).data("target");
     this.dropdown = selector != null ? $(selector) : $(this.el).parent();
@@ -398,7 +397,7 @@ GitLabDropdown = (function() {
       html = [this.noResults()];
     } else {
       // Handle array groups
-      if (gl.utils.isObject(data)) {
+      if (isObject(data)) {
         html = [];
         for (name in data) {
           groupData = data[name];
@@ -610,7 +609,12 @@ GitLabDropdown = (function() {
       var link = document.createElement('a');
       link.href = url;
-      link.innerHTML = text;
+
+      if (this.highlight) {
+        link.innerHTML = text;
+      } else {
+        link.textContent = text;
+      }
       if (selected) {
         link.className = 'is-active';
@@ -627,8 +631,8 @@ GitLabDropdown = (function() {
   };
   GitLabDropdown.prototype.highlightTextMatches = function(text, term) {
-    var occurrences;
-    occurrences = fuzzaldrinPlus.match(text, term);
+    const occurrences = fuzzaldrinPlus.match(text, term);
+    const indexOf = [].indexOf;
     return text.split('').map(function(character, i) {
       if (indexOf.call(occurrences, i) !== -1) {
         return "<b>" + character + "</b>";

app/assets/javascripts/graphs/stat_graph_contributors_graph.js

@@ -2,7 +2,6 @@
 import d3 from 'd3';
-const bind = function(fn, me) { return function() { return fn.apply(me, arguments); }; };
 const extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
 const hasProp = {}.hasOwnProperty;
@@ -95,7 +94,7 @@ export const ContributorsMasterGraph = (function(superClass) {
   function ContributorsMasterGraph(data1) {
     this.data = data1;
-    this.update_content = bind(this.update_content, this);
+    this.update_content = this.update_content.bind(this);
     this.width = $('.content').width() - 70;
     this.height = 200;
     this.x = null;

app/assets/javascripts/issuable_context.js

 /* eslint-disable func-names, space-before-function-paren, wrap-iife, no-new, comma-dangle, quotes, prefer-arrow-callback, consistent-return, one-var, no-var, one-var-declaration-per-line, no-underscore-dangle, max-len */
-/* global UsersSelect */
 /* global bp */
 import Cookies from 'js-cookie';
+import UsersSelect from './users_select';
 (function() {
   this.IssuableContext = (function() {

app/assets/javascripts/issuable_form.js

 /* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, no-use-before-define, no-useless-escape, no-new, quotes, object-shorthand, no-unused-vars, comma-dangle, no-alert, consistent-return, no-else-return, prefer-template, one-var, one-var-declaration-per-line, curly, max-len */
 /* global GitLab */
-/* global UsersSelect */
 /* global ZenMode */
 /* global Autosave */
 /* global dateFormat */
 /* global Pikaday */
-(function() {
-  var bind = function(fn, me) { return function() { return fn.apply(me, arguments); }; };
+import UsersSelect from './users_select';
+(function() {
   this.IssuableForm = (function() {
     IssuableForm.prototype.issueMoveConfirmMsg = 'Are you sure you want to move this issue to another project?';
@@ -17,10 +16,10 @@
     function IssuableForm(form) {
       var $issuableDueDate, calendar;
       this.form = form;
-      this.toggleWip = bind(this.toggleWip, this);
-      this.renderWipExplanation = bind(this.renderWipExplanation, this);
-      this.resetAutosave = bind(this.resetAutosave, this);
-      this.handleSubmit = bind(this.handleSubmit, this);
+      this.toggleWip = this.toggleWip.bind(this);
+      this.renderWipExplanation = this.renderWipExplanation.bind(this);
+      this.resetAutosave = this.resetAutosave.bind(this);
+      this.handleSubmit = this.handleSubmit.bind(this);
       gl.GfmAutoComplete.setup();
       new UsersSelect();
       new ZenMode();

app/assets/javascripts/issue_show/actions/tasks.js

-export default (newStateData, tasks) => {
-  const $tasks = $('#task_status');
-  const $tasksShort = $('#task_status_short');
-  const $issueableHeader = $('.issuable-header');
-  const tasksStates = { newState: null, currentState: null };
-
-  if ($tasks.length === 0) {
-    if (!(newStateData.task_status.indexOf('0 of 0') === 0)) {
-      $issueableHeader.append(`<span id="task_status">${newStateData.task_status}</span>`);
-    } else {
-      $issueableHeader.append('<span id="task_status"></span>');
-    }
-  } else {
-    tasksStates.newState = newStateData.task_status.indexOf('0 of 0') === 0;
-    tasksStates.currentState = tasks.indexOf('0 of 0') === 0;
-  }
-
-  if ($tasks.length !== 0 && !tasksStates.newState) {
-    $tasks.text(newStateData.task_status);
-    $tasksShort.text(newStateData.task_status);
-  } else if (tasksStates.currentState) {
-    $issueableHeader.append(`<span id="task_status">${newStateData.task_status}</span>`);
-  } else if (tasksStates.newState) {
-    $tasks.remove();
-    $tasksShort.remove();
-  }
-};

app/assets/javascripts/issue_show/components/app.vue

+<script>
+import Visibility from 'visibilityjs';
+import Poll from '../../lib/utils/poll';
+import Service from '../services/index';
+import Store from '../stores';
+import titleComponent from './title.vue';
+import descriptionComponent from './description.vue';
+
+export default {
+  props: {
+    endpoint: {
+      required: true,
+      type: String,
+    },
+    canUpdate: {
+      required: true,
+      type: Boolean,
+    },
+    issuableRef: {
+      type: String,
+      required: true,
+    },
+    initialTitle: {
+      type: String,
+      required: true,
+    },
+    initialDescriptionHtml: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    initialDescriptionText: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  data() {
+    const store = new Store({
+      titleHtml: this.initialTitle,
+      descriptionHtml: this.initialDescriptionHtml,
+      descriptionText: this.initialDescriptionText,
+    });
+
+    return {
+      store,
+      state: store.state,
+    };
+  },
+  components: {
+    descriptionComponent,
+    titleComponent,
+  },
+  created() {
+    const resource = new Service(this.endpoint);
+    const poll = new Poll({
+      resource,
+      method: 'getData',
+      successCallback: (res) => {
+        this.store.updateState(res.json());
+      },
+      errorCallback(err) {
+        throw new Error(err);
+      },
+    });
+
+    if (!Visibility.hidden()) {
+      poll.makeRequest();
+    }
+
+    Visibility.change(() => {
+      if (!Visibility.hidden()) {
+        poll.restart();
+      } else {
+        poll.stop();
+      }
+    });
+  },
+};
+</script>
+
+<template>
+  <div>
+    <title-component
+      :issuable-ref="issuableRef"
+      :title-html="state.titleHtml"
+      :title-text="state.titleText" />
+    <description-component
+      v-if="state.descriptionHtml"
+      :can-update="canUpdate"
+      :description-html="state.descriptionHtml"
+      :description-text="state.descriptionText"
+      :updated-at="state.updatedAt"
+      :task-status="state.taskStatus" />
+  </div>
+</template>

app/assets/javascripts/issue_show/components/description.vue

+<script>
+  import animateMixin from '../mixins/animate';
+
+  export default {
+    mixins: [animateMixin],
+    props: {
+      canUpdate: {
+        type: Boolean,
+        required: true,
+      },
+      descriptionHtml: {
+        type: String,
+        required: true,
+      },
+      descriptionText: {
+        type: String,
+        required: true,
+      },
+      updatedAt: {
+        type: String,
+        required: true,
+      },
+      taskStatus: {
+        type: String,
+        required: true,
+      },
+    },
+    data() {
+      return {
+        preAnimation: false,
+        pulseAnimation: false,
+        timeAgoEl: $('.js-issue-edited-ago'),
+      };
+    },
+    watch: {
+      descriptionHtml() {
+        this.animateChange();
+
+        this.$nextTick(() => {
+          const toolTipTime = gl.utils.formatDate(this.updatedAt);
+
+          this.timeAgoEl.attr('datetime', this.updatedAt)
+            .attr('title', toolTipTime)
+            .tooltip('fixTitle');
+
+          this.renderGFM();
+        });
+      },
+      taskStatus() {
+        const taskRegexMatches = this.taskStatus.match(/(\d+) of (\d+)/);
+        const $issuableHeader = $('.issuable-meta');
+        const $tasks = $('#task_status', $issuableHeader);
+        const $tasksShort = $('#task_status_short', $issuableHeader);
+
+        if (taskRegexMatches) {
+          $tasks.text(this.taskStatus);
+          $tasksShort.text(`${taskRegexMatches[1]}/${taskRegexMatches[2]} task${taskRegexMatches[2] > 1 ? 's' : ''}`);
+        } else {
+          $tasks.text('');
+          $tasksShort.text('');
+        }
+      },
+    },
+    methods: {
+      renderGFM() {
+        $(this.$refs['gfm-entry-content']).renderGFM();
+
+        if (this.canUpdate) {
+          // eslint-disable-next-line no-new
+          new gl.TaskList({
+            dataType: 'issue',
+            fieldName: 'description',
+            selector: '.detail-page-description',
+          });
+        }
+      },
+    },
+    mounted() {
+      this.renderGFM();
+    },
+  };
+</script>
+
+<template>
+  <div
+    class="description"
+    :class="{
+      'js-task-list-container': canUpdate
+    }">
+    <div
+      class="wiki"
+      :class="{
+        'issue-realtime-pre-pulse': preAnimation,
+        'issue-realtime-trigger-pulse': pulseAnimation
+      }"
+      v-html="descriptionHtml"
+      ref="gfm-content">
+    </div>
+    <textarea
+      class="hidden js-task-list-field"
+      v-if="descriptionText"
+      v-model="descriptionText">
+    </textarea>
+  </div>
+</template>