Gemfile

@@ -145,12 +145,12 @@ gem 'acts-as-taggable-on', '~> 4.0'
 # Background jobs
 gem 'sidekiq', '~> 5.0'
-gem 'sidekiq-cron', '~> 0.4.4'
+gem 'sidekiq-cron', '~> 0.6.0'
 gem 'redis-namespace', '~> 1.5.2'
 gem 'sidekiq-limit_fetch', '~> 3.4'
 # Cron Parser
-gem 'rufus-scheduler', '~> 3.1.10'
+gem 'rufus-scheduler', '~> 3.4'
 # HTTP requests
 gem 'httparty', '~> 0.13.3'

Gemfile.lock

@@ -181,6 +181,8 @@ GEM
     equalizer (0.0.11)
     erubis (2.7.0)
     escape_utils (1.1.1)
+    et-orbi (1.0.3)
+      tzinfo
     eventmachine (1.0.8)
     excon (0.55.0)
     execjs (2.6.0)
@@ -697,7 +699,8 @@ GEM
     rubyntlm (0.5.2)
     rubypants (0.2.0)
     rubyzip (1.2.1)
-    rufus-scheduler (3.1.10)
+    rufus-scheduler (3.4.0)
+      et-orbi (~> 1.0)
     rugged (0.25.1.1)
     safe_yaml (1.0.4)
     sanitize (2.1.0)
@@ -734,9 +737,8 @@ GEM
       connection_pool (~> 2.2, >= 2.2.0)
       rack-protection (>= 1.5.0)
       redis (~> 3.3, >= 3.3.3)
-    sidekiq-cron (0.4.4)
-      redis-namespace (>= 1.5.2)
-      rufus-scheduler (>= 2.0.24)
+    sidekiq-cron (0.6.0)
+      rufus-scheduler (>= 3.3.0)
       sidekiq (>= 4.2.1)
     sidekiq-limit_fetch (3.4.0)
       sidekiq (>= 4)
@@ -1013,7 +1015,7 @@ DEPENDENCIES
   ruby-fogbugz (~> 0.2.1)
   ruby-prof (~> 0.16.2)
   ruby_parser (~> 3.8.4)
-  rufus-scheduler (~> 3.1.10)
+  rufus-scheduler (~> 3.4)
   rugged (~> 0.25.1.1)
   sanitize (~> 2.0)
   sass-rails (~> 5.0.6)
@@ -1025,7 +1027,7 @@ DEPENDENCIES
   sham_rack (~> 1.3.6)
   shoulda-matchers (~> 2.8.0)
   sidekiq (~> 5.0)
-  sidekiq-cron (~> 0.4.4)
+  sidekiq-cron (~> 0.6.0)
   sidekiq-limit_fetch (~> 3.4)
   simplecov (~> 0.14.0)
   slack-notifier (~> 1.5.1)

app/assets/javascripts/blob/viewer/index.js

@@ -8,7 +8,10 @@ export default class BlobViewer {
     this.richViewer = document.querySelector('.blob-viewer[data-type="rich"]');
     this.$fileHolder = $('.file-holder');
-    let initialViewerName = document.querySelector('.blob-viewer:not(.hidden)').getAttribute('data-type');
+    const initialViewer = document.querySelector('.blob-viewer:not(.hidden)');
+    if (!initialViewer) return;
+
+    let initialViewerName = initialViewer.getAttribute('data-type');
     this.initBindings();

app/assets/javascripts/boards/components/board_list.js

@@ -2,6 +2,7 @@
 import boardNewIssue from './board_new_issue';
 import boardCard from './board_card';
 import eventHub from '../eventhub';
+import loadingIcon from '../../vue_shared/components/loading_icon.vue';
 const Store = gl.issueBoards.BoardsStore;
@@ -44,6 +45,7 @@ export default {
   components: {
     boardCard,
     boardNewIssue,
+    loadingIcon,
   },
   methods: {
     listHeight() {
@@ -156,10 +158,7 @@ export default {
         class="board-list-loading text-center"
         aria-label="Loading issues"
         v-if="loading">
-        <i
-          class="fa fa-spinner fa-spin"
-          aria-hidden="true">
-        </i>
+        <loading-icon />
       </div>
       <board-new-issue
         :list="list"
@@ -184,12 +183,12 @@ export default {
           class="board-list-count text-center"
           v-if="showCount"
           data-id="-1">
-          <i
-            class="fa fa-spinner fa-spin"
-            aria-label="Loading more issues"
-            aria-hidden="true"
-            v-show="list.loadingMore">
-          </i>
+
+          <loading-icon
+            v-show="list.loadingMore"
+            label="Loading more issues"
+            />
+
           <span v-if="list.issues.length === list.issuesSize">
             Showing all issues
           </span>

app/assets/javascripts/boards/components/board_sidebar.js

@@ -36,6 +36,9 @@ gl.issueBoards.BoardSidebar = Vue.extend({
     },
     assigneeId() {
       return this.issue.assignee ? this.issue.assignee.id : 0;
+    },
+    milestoneTitle() {
+      return this.issue.milestone ? this.issue.milestone.title : 'No Milestone';
     }
   },
   watch: {

app/assets/javascripts/boards/components/modal/index.js

@@ -2,6 +2,7 @@
 import Vue from 'vue';
 import queryData from '../../utils/query_data';
+import loadingIcon from '../../../vue_shared/components/loading_icon.vue';
 require('./header');
 require('./list');
@@ -137,6 +138,7 @@ gl.issueBoards.IssuesModal = Vue.extend({
     'modal-list': gl.issueBoards.ModalList,
     'modal-footer': gl.issueBoards.ModalFooter,
     'empty-state': gl.issueBoards.ModalEmptyState,
+    loadingIcon,
   },
   template: `
     <div
@@ -161,7 +163,7 @@ gl.issueBoards.IssuesModal = Vue.extend({
           class="add-issues-list text-center"
           v-if="loading || filterLoading">
           <div class="add-issues-list-loading">
-            <i class="fa fa-spinner fa-spin"></i>
+            <loading-icon />
           </div>
         </section>
         <modal-footer></modal-footer>

app/assets/javascripts/commit/pipelines/pipelines_table.js

@@ -6,6 +6,7 @@ import PipelineStore from '../../pipelines/stores/pipelines_store';
 import eventHub from '../../pipelines/event_hub';
 import EmptyState from '../../pipelines/components/empty_state.vue';
 import ErrorState from '../../pipelines/components/error_state.vue';
+import loadingIcon from '../../vue_shared/components/loading_icon.vue';
 import '../../lib/utils/common_utils';
 import '../../vue_shared/vue_resource_interceptor';
 import Poll from '../../lib/utils/poll';
@@ -17,8 +18,6 @@ import Poll from '../../lib/utils/poll';
  * We need a store to store the received environemnts.
  * We need a service to communicate with the server.
  *
- * Necessary SVG in the table are provided as props. This should be refactored
- * as soon as we have Webpack and can load them directly into JS files.
  */
 export default Vue.component('pipelines-table', {
@@ -27,6 +26,7 @@ export default Vue.component('pipelines-table', {
     'pipelines-table-component': PipelinesTableComponent,
     'error-state': ErrorState,
     'empty-state': EmptyState,
+    loadingIcon,
   },
   /**
@@ -151,13 +151,12 @@ export default Vue.component('pipelines-table', {
   template: `
     <div class="content-list pipelines">
-      <div
-        class="realtime-loading"
-        v-if="isLoading">
-        <i
-          class="fa fa-spinner fa-spin"
-          aria-hidden="true" />
-      </div>
+
+      <loading-icon
+        label="Loading pipelines"
+        size="3"
+        v-if="isLoading"
+        />
       <empty-state
         v-if="shouldRenderEmptyState"

app/assets/javascripts/deploy_keys/components/action_btn.vue

 <script>
   import eventHub from '../eventhub';
+  import loadingIcon from '../../vue_shared/components/loading_icon.vue';
   export default {
     data() {
@@ -22,6 +23,11 @@
         default: 'btn-default',
       },
     },
+
+    components: {
+      loadingIcon,
+    },
+
     methods: {
       doAction() {
         this.isLoading = true;
@@ -44,11 +50,6 @@
     :disabled="isLoading"
     @click="doAction">
     {{ text }}
-    <i
-      v-if="isLoading"
-      class="fa fa-spinner fa-spin"
-      aria-hidden="true"
-      aria-label="Loading">
-    </i>
+    <loading-icon v-if="isLoading" />
   </button>
 </template>

app/assets/javascripts/deploy_keys/components/app.vue

@@ -4,6 +4,7 @@
   import DeployKeysService from '../service';
   import DeployKeysStore from '../store';
   import keysPanel from './keys_panel.vue';
+  import loadingIcon from '../../vue_shared/components/loading_icon.vue';
   export default {
     data() {
@@ -28,6 +29,7 @@
     },
     components: {
       keysPanel,
+      loadingIcon,
     },
     methods: {
       fetchKeys() {
@@ -74,15 +76,11 @@
 <template>
   <div class="col-lg-9 col-lg-offset-3 append-bottom-default deploy-keys">
-    <div
-      class="text-center"
-      v-if="isLoading && !hasKeys">
-      <i
-        class="fa fa-spinner fa-spin fa-2x"
-        aria-hidden="true"
-        aria-label="Loading deploy keys">
-      </i>
-    </div>
+    <loading-icon
+      v-if="isLoading && !hasKeys"
+      size="2"
+      label="Loading deploy keys"
+      />
     <div v-else-if="hasKeys">
       <keys-panel
         title="Enabled deploy keys for this project"

app/assets/javascripts/dispatcher.js

@@ -246,6 +246,7 @@ const ShortcutsBlob = require('./shortcuts_blob');
           new NotificationsForm();
           if ($('#tree-slider').length) {
             new TreeView();
+            new BlobViewer();
           }
           break;
         case 'projects:pipelines:builds':
@@ -300,6 +301,7 @@ const ShortcutsBlob = require('./shortcuts_blob');
         case 'projects:tree:show':
           shortcut_handler = new ShortcutsNavigation();
           new TreeView();
+          new BlobViewer();
           gl.TargetBranchDropDown.bootstrap();
           break;
         case 'projects:find_file:show':

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

@@ -3,6 +3,7 @@
 import EnvironmentsService from '../services/environments_service';
 import environmentTable from './environments_table.vue';
 import EnvironmentsStore from '../stores/environments_store';
+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';
@@ -12,6 +13,7 @@ export default {
   components: {
     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

@@ -3,6 +3,7 @@
 import EnvironmentsService from '../services/environments_service';
 import environmentTable from '../components/environments_table.vue';
 import EnvironmentsStore from '../stores/environments_store';
+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';
@@ -11,6 +12,7 @@ export default {
   components: {
     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/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 */
+import { isObject } from './lib/utils/type_utility';
 var GitLabDropdown, GitLabDropdownFilter, GitLabDropdownRemote;
@@ -93,7 +94,7 @@ GitLabDropdownFilter = (function() {
           //     { prop: 'def' }
           //   ]
           // }
-          if (gl.utils.isObject(data)) {
+          if (isObject(data)) {
             results = {};
             for (key in data) {
               group = data[key];
@@ -396,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];
@@ -608,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';

app/assets/javascripts/lib/utils/type_utility.js

-/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, no-param-reassign, no-cond-assign, no-return-assign, max-len */
-(function() {
-  (function(w) {
-    var base;
-    if (w.gl == null) {
-      w.gl = {};
-    }
-    if ((base = w.gl).utils == null) {
-      base.utils = {};
-    }
-    return w.gl.utils.isObject = function(obj) {
-      return (obj != null) && (obj.constructor === Object);
-    };
-  })(window);
-}).call(window);
+// eslint-disable-next-line import/prefer-default-export
+export const isObject = obj => obj && obj.constructor === Object;

app/assets/javascripts/main.js

@@ -59,7 +59,6 @@ import './lib/utils/datetime_utility';
 import './lib/utils/notify';
 import './lib/utils/pretty_time';
 import './lib/utils/text_utility';
-import './lib/utils/type_utility';
 import './lib/utils/url_utility';
 // u2f