From d36055cbef1e5f2e9ffe1b0b9c1ad32e85bb5248 Mon Sep 17 00:00:00 2001
From: Mark Lapierre <mlapierre@gitlab.com>
Date: Wed, 26 Sep 2018 15:15:35 -0400
Subject: Add tests of adding file templates

Adds tests that adds new files via file templates via the Files view
and the Web IDE.

Includes changes to page objects and associated code

Fetches template content from the API rather than hardcoding strings
that will need to be updated if the templates change. Some of the
content is stored as flat files but we can't use them because they're
not included in the docker images gitlab-qa uses.
---
 .../javascripts/ide/components/commit_sidebar/form.vue       |  4 ++--
 app/assets/javascripts/ide/components/file_templates/bar.vue |  4 ++--
 .../javascripts/ide/components/file_templates/dropdown.vue   |  2 +-
 app/assets/javascripts/ide/components/ide_tree.vue           |  2 +-
 app/assets/javascripts/ide/components/ide_tree_list.vue      |  2 +-
 app/assets/javascripts/ide/components/new_dropdown/modal.vue |  4 ++--
 app/assets/javascripts/vue_shared/components/gl_modal.vue    | 12 ++++++++----
 7 files changed, 17 insertions(+), 13 deletions(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/ide/components/commit_sidebar/form.vue b/app/assets/javascripts/ide/components/commit_sidebar/form.vue
index ee8eb206980..802827fce76 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/form.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/form.vue
@@ -117,7 +117,7 @@ export default {
         <button
           :disabled="!hasChanges"
           type="button"
-          class="btn btn-primary btn-sm btn-block"
+          class="btn btn-primary btn-sm btn-block qa-begin-commit-button"
           @click="toggleIsSmall"
         >
           {{ __('Commit…') }}
@@ -147,7 +147,7 @@ export default {
           <loading-button
             :loading="submitCommitLoading"
             :label="commitButtonText"
-            container-class="btn btn-success btn-sm float-left"
+            container-class="btn btn-success btn-sm float-left qa-commit-button"
             @click="commitChanges"
           />
           <button
diff --git a/app/assets/javascripts/ide/components/file_templates/bar.vue b/app/assets/javascripts/ide/components/file_templates/bar.vue
index 23be5f45f16..3587626c580 100644
--- a/app/assets/javascripts/ide/components/file_templates/bar.vue
+++ b/app/assets/javascripts/ide/components/file_templates/bar.vue
@@ -47,7 +47,7 @@ export default {
 </script>
 
 <template>
-  <div class="d-flex align-items-center ide-file-templates">
+  <div class="d-flex align-items-center ide-file-templates qa-file-templates-bar">
     <strong class="append-right-default">
       {{ __('File templates') }}
     </strong>
@@ -63,7 +63,7 @@ export default {
       :is-async-data="true"
       :searchable="true"
       :title="__('File templates')"
-      class="mr-2"
+      class="mr-2 qa-file-template-dropdown"
       @click="selectTemplate"
     />
     <transition name="fade">
diff --git a/app/assets/javascripts/ide/components/file_templates/dropdown.vue b/app/assets/javascripts/ide/components/file_templates/dropdown.vue
index ef1f6de3a86..94222c08e91 100644
--- a/app/assets/javascripts/ide/components/file_templates/dropdown.vue
+++ b/app/assets/javascripts/ide/components/file_templates/dropdown.vue
@@ -92,7 +92,7 @@ export default {
           v-model="search"
           :placeholder="__('Filter...')"
           type="search"
-          class="dropdown-input-field"
+          class="dropdown-input-field qa-dropdown-filter-input"
         />
         <i
           aria-hidden="true"
diff --git a/app/assets/javascripts/ide/components/ide_tree.vue b/app/assets/javascripts/ide/components/ide_tree.vue
index 39d46a91731..9f9e638f1aa 100644
--- a/app/assets/javascripts/ide/components/ide_tree.vue
+++ b/app/assets/javascripts/ide/components/ide_tree.vue
@@ -45,7 +45,7 @@ export default {
         <new-entry-button
           :label="__('New file')"
           :show-label="false"
-          class="d-flex border-0 p-0 mr-3"
+          class="d-flex border-0 p-0 mr-3 qa-new-file"
           icon="doc-new"
           @click="openNewEntryModal({ type: 'blob' })"
         />
diff --git a/app/assets/javascripts/ide/components/ide_tree_list.vue b/app/assets/javascripts/ide/components/ide_tree_list.vue
index cfe25084b42..e88f01fb4f4 100644
--- a/app/assets/javascripts/ide/components/ide_tree_list.vue
+++ b/app/assets/javascripts/ide/components/ide_tree_list.vue
@@ -43,7 +43,7 @@ export default {
 
 <template>
   <div
-    class="ide-file-list"
+    class="ide-file-list qa-file-list"
   >
     <template v-if="showLoading">
       <div
diff --git a/app/assets/javascripts/ide/components/new_dropdown/modal.vue b/app/assets/javascripts/ide/components/new_dropdown/modal.vue
index bcd53ac1ba2..f0a04011a3e 100644
--- a/app/assets/javascripts/ide/components/new_dropdown/modal.vue
+++ b/app/assets/javascripts/ide/components/new_dropdown/modal.vue
@@ -110,12 +110,12 @@ export default {
           ref="fieldName"
           v-model="entryName"
           type="text"
-          class="form-control"
+          class="form-control qa-full-file-path"
           placeholder="/dir/file_name"
         />
         <ul
           v-if="isCreatingNew"
-          class="prepend-top-default list-inline"
+          class="prepend-top-default list-inline qa-template-list"
         >
           <li
             v-for="(template, index) in templateTypes"
diff --git a/app/assets/javascripts/vue_shared/components/gl_modal.vue b/app/assets/javascripts/vue_shared/components/gl_modal.vue
index b023c5cfeb1..b5444d43ded 100644
--- a/app/assets/javascripts/vue_shared/components/gl_modal.vue
+++ b/app/assets/javascripts/vue_shared/components/gl_modal.vue
@@ -41,10 +41,14 @@ export default {
     },
   },
   mounted() {
-    $(this.$el).on('shown.bs.modal', this.opened).on('hidden.bs.modal', this.closed);
+    $(this.$el)
+      .on('shown.bs.modal', this.opened)
+      .on('hidden.bs.modal', this.closed);
   },
   beforeDestroy() {
-    $(this.$el).off('shown.bs.modal', this.opened).off('hidden.bs.modal', this.closed);
+    $(this.$el)
+      .off('shown.bs.modal', this.opened)
+      .off('hidden.bs.modal', this.closed);
   },
   methods: {
     emitCancel(event) {
@@ -103,7 +107,7 @@ export default {
           <slot name="footer">
             <button
               type="button"
-              class="btn js-modal-cancel-action"
+              class="btn js-modal-cancel-action qa-modal-cancel-button"
               data-dismiss="modal"
               @click="emitCancel($event)"
             >
@@ -112,7 +116,7 @@ export default {
             <button
               :class="`btn-${footerPrimaryButtonVariant}`"
               type="button"
-              class="btn js-modal-primary-action"
+              class="btn js-modal-primary-action qa-modal-primary-button"
               data-dismiss="modal"
               @click="emitSubmit($event)"
             >
-- 
cgit v1.2.1


From 69b7c032ec7445730c02129d66146218833f47aa Mon Sep 17 00:00:00 2001
From: Mike Greiling <mike@pixelcog.com>
Date: Wed, 10 Oct 2018 01:20:53 -0500
Subject: Prettify ide modules

---
 .../components/commit_sidebar/list_collapsed.vue   | 14 ++--
 .../ide/components/commit_sidebar/stage_button.vue |  5 +-
 .../javascripts/ide/components/ide_side_bar.vue    |  8 +-
 .../ide/components/merge_requests/list.vue         |  8 +-
 .../ide/components/nav_dropdown_button.vue         |  4 +-
 .../javascripts/ide/components/panes/right.vue     | 17 +---
 .../javascripts/ide/components/repo_editor.vue     |  7 +-
 .../ide/components/shared/tokened_input.vue        |  4 +-
 app/assets/javascripts/ide/index.js                |  5 +-
 app/assets/javascripts/ide/lib/diff/diff.js        | 14 ++--
 app/assets/javascripts/ide/lib/diff/diff_worker.js |  2 +-
 .../ide/stores/actions/merge_request.js            | 94 +++++++++++-----------
 .../javascripts/ide/stores/actions/project.js      | 36 ++++-----
 .../ide/stores/modules/merge_requests/actions.js   |  3 +-
 14 files changed, 93 insertions(+), 128 deletions(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/ide/components/commit_sidebar/list_collapsed.vue b/app/assets/javascripts/ide/components/commit_sidebar/list_collapsed.vue
index d376a004e84..699fa7dc937 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/list_collapsed.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/list_collapsed.vue
@@ -38,14 +38,18 @@ export default {
       return this.modifiedFilesLength ? 'multi-file-modified' : '';
     },
     additionsTooltip() {
-      return sprintf(n__('1 %{type} addition', '%{count} %{type} additions', this.addedFilesLength), {
-        type: this.title.toLowerCase(),
-        count: this.addedFilesLength,
-      });
+      return sprintf(
+        n__('1 %{type} addition', '%{count} %{type} additions', this.addedFilesLength),
+        {
+          type: this.title.toLowerCase(),
+          count: this.addedFilesLength,
+        },
+      );
     },
     modifiedTooltip() {
       return sprintf(
-        n__('1 %{type} modification', '%{count} %{type} modifications', this.modifiedFilesLength), {
+        n__('1 %{type} modification', '%{count} %{type} modifications', this.modifiedFilesLength),
+        {
           type: this.title.toLowerCase(),
           count: this.modifiedFilesLength,
         },
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/stage_button.vue b/app/assets/javascripts/ide/components/commit_sidebar/stage_button.vue
index 8a1836a5c92..adf4b479c97 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/stage_button.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/stage_button.vue
@@ -25,10 +25,7 @@ export default {
       return `discard-file-${this.path}`;
     },
     modalTitle() {
-      return sprintf(
-        __('Discard changes to %{path}?'),
-        { path: this.path },
-      );
+      return sprintf(__('Discard changes to %{path}?'), { path: this.path });
     },
   },
   methods: {
diff --git a/app/assets/javascripts/ide/components/ide_side_bar.vue b/app/assets/javascripts/ide/components/ide_side_bar.vue
index f99ff6d6da8..dc84ee12f1e 100644
--- a/app/assets/javascripts/ide/components/ide_side_bar.vue
+++ b/app/assets/javascripts/ide/components/ide_side_bar.vue
@@ -24,13 +24,7 @@ export default {
     IdeProjectHeader,
   },
   computed: {
-    ...mapState([
-      'loading',
-      'currentActivityView',
-      'changedFiles',
-      'stagedFiles',
-      'lastCommitMsg',
-    ]),
+    ...mapState(['loading', 'currentActivityView', 'changedFiles', 'stagedFiles', 'lastCommitMsg']),
     ...mapGetters(['currentProject', 'someUncommitedChanges']),
     showSuccessMessage() {
       return (
diff --git a/app/assets/javascripts/ide/components/merge_requests/list.vue b/app/assets/javascripts/ide/components/merge_requests/list.vue
index c8343e77860..f5e42e87f1b 100644
--- a/app/assets/javascripts/ide/components/merge_requests/list.vue
+++ b/app/assets/javascripts/ide/components/merge_requests/list.vue
@@ -37,14 +37,10 @@ export default {
       return this.hasSearchFocus && !this.search && !this.currentSearchType;
     },
     type() {
-      return this.currentSearchType
-        ? this.currentSearchType.type
-        : '';
+      return this.currentSearchType ? this.currentSearchType.type : '';
     },
     searchTokens() {
-      return this.currentSearchType
-        ? [this.currentSearchType]
-        : [];
+      return this.currentSearchType ? [this.currentSearchType] : [];
     },
   },
   watch: {
diff --git a/app/assets/javascripts/ide/components/nav_dropdown_button.vue b/app/assets/javascripts/ide/components/nav_dropdown_button.vue
index 7f98769d484..6cee4e9a8f0 100644
--- a/app/assets/javascripts/ide/components/nav_dropdown_button.vue
+++ b/app/assets/javascripts/ide/components/nav_dropdown_button.vue
@@ -13,9 +13,7 @@ export default {
   computed: {
     ...mapState(['currentBranchId', 'currentMergeRequestId']),
     mergeRequestLabel() {
-      return this.currentMergeRequestId
-        ? `!${this.currentMergeRequestId}`
-        : EMPTY_LABEL;
+      return this.currentMergeRequestId ? `!${this.currentMergeRequestId}` : EMPTY_LABEL;
     },
     branchLabel() {
       return this.currentBranchId || EMPTY_LABEL;
diff --git a/app/assets/javascripts/ide/components/panes/right.vue b/app/assets/javascripts/ide/components/panes/right.vue
index bd07f372177..10aa96dffaf 100644
--- a/app/assets/javascripts/ide/components/panes/right.vue
+++ b/app/assets/javascripts/ide/components/panes/right.vue
@@ -43,34 +43,25 @@ export default {
         {
           show: this.currentMergeRequestId,
           title: __('Merge Request'),
-          views: [
-            rightSidebarViews.mergeRequestInfo,
-          ],
+          views: [rightSidebarViews.mergeRequestInfo],
           icon: 'text-description',
         },
         {
           show: true,
           title: __('Pipelines'),
-          views: [
-            rightSidebarViews.pipelines,
-            rightSidebarViews.jobsDetail,
-          ],
+          views: [rightSidebarViews.pipelines, rightSidebarViews.jobsDetail],
           icon: 'rocket',
         },
         {
           show: this.showLivePreview,
           title: __('Live preview'),
-          views: [
-            rightSidebarViews.clientSidePreview,
-          ],
+          views: [rightSidebarViews.clientSidePreview],
           icon: 'live-preview',
         },
       ];
     },
     tabs() {
-      return this.defaultTabs
-        .concat(this.extensionTabs)
-        .filter(tab => tab.show);
+      return this.defaultTabs.concat(this.extensionTabs).filter(tab => tab.show);
     },
     tabViews() {
       return _.flatten(this.tabs.map(tab => tab.views));
diff --git a/app/assets/javascripts/ide/components/repo_editor.vue b/app/assets/javascripts/ide/components/repo_editor.vue
index b2599128213..7b0f717962e 100644
--- a/app/assets/javascripts/ide/components/repo_editor.vue
+++ b/app/assets/javascripts/ide/components/repo_editor.vue
@@ -25,12 +25,7 @@ export default {
     ...mapState('rightPane', {
       rightPaneIsOpen: 'isOpen',
     }),
-    ...mapState([
-      'rightPanelCollapsed',
-      'viewer',
-      'panelResizing',
-      'currentActivityView',
-    ]),
+    ...mapState(['rightPanelCollapsed', 'viewer', 'panelResizing', 'currentActivityView']),
     ...mapGetters([
       'currentMergeRequest',
       'getStagedFile',
diff --git a/app/assets/javascripts/ide/components/shared/tokened_input.vue b/app/assets/javascripts/ide/components/shared/tokened_input.vue
index a7a12f6785d..30010957a16 100644
--- a/app/assets/javascripts/ide/components/shared/tokened_input.vue
+++ b/app/assets/javascripts/ide/components/shared/tokened_input.vue
@@ -30,9 +30,7 @@ export default {
   },
   computed: {
     placeholderText() {
-      return this.tokens.length
-        ? ''
-        : this.placeholder;
+      return this.tokens.length ? '' : this.placeholder;
     },
   },
   watch: {
diff --git a/app/assets/javascripts/ide/index.js b/app/assets/javascripts/ide/index.js
index c0550116633..7a5a227db30 100644
--- a/app/assets/javascripts/ide/index.js
+++ b/app/assets/javascripts/ide/index.js
@@ -21,10 +21,7 @@ Vue.use(Translate);
 export function initIde(el, options = {}) {
   if (!el) return null;
 
-  const {
-    extraInitialData = () => ({}),
-    rootComponent = ide,
-  } = options;
+  const { extraInitialData = () => ({}), rootComponent = ide } = options;
 
   return new Vue({
     el,
diff --git a/app/assets/javascripts/ide/lib/diff/diff.js b/app/assets/javascripts/ide/lib/diff/diff.js
index 0e37f5c4704..9b7ed68b893 100644
--- a/app/assets/javascripts/ide/lib/diff/diff.js
+++ b/app/assets/javascripts/ide/lib/diff/diff.js
@@ -11,14 +11,16 @@ export const computeDiff = (originalContent, newContent) => {
     if (findOnLine) {
       Object.assign(findOnLine, change, {
         modified: true,
-        endLineNumber: (lineNumber + change.count) - 1,
+        endLineNumber: lineNumber + change.count - 1,
       });
     } else if ('added' in change || 'removed' in change) {
-      acc.push(Object.assign({}, change, {
-        lineNumber,
-        modified: undefined,
-        endLineNumber: (lineNumber + change.count) - 1,
-      }));
+      acc.push(
+        Object.assign({}, change, {
+          lineNumber,
+          modified: undefined,
+          endLineNumber: lineNumber + change.count - 1,
+        }),
+      );
     }
 
     if (!change.removed) {
diff --git a/app/assets/javascripts/ide/lib/diff/diff_worker.js b/app/assets/javascripts/ide/lib/diff/diff_worker.js
index 78b2eab6399..77416a8de9d 100644
--- a/app/assets/javascripts/ide/lib/diff/diff_worker.js
+++ b/app/assets/javascripts/ide/lib/diff/diff_worker.js
@@ -1,7 +1,7 @@
 import { computeDiff } from './diff';
 
 // eslint-disable-next-line no-restricted-globals
-self.addEventListener('message', (e) => {
+self.addEventListener('message', e => {
   const { data } = e;
 
   // eslint-disable-next-line no-restricted-globals
diff --git a/app/assets/javascripts/ide/stores/actions/merge_request.js b/app/assets/javascripts/ide/stores/actions/merge_request.js
index 187f8c75d07..3ac2f8b3698 100644
--- a/app/assets/javascripts/ide/stores/actions/merge_request.js
+++ b/app/assets/javascripts/ide/stores/actions/merge_request.js
@@ -116,57 +116,57 @@ export const openMergeRequest = (
     targetProjectId,
     mergeRequestId,
   })
-  .then(mr => {
-    dispatch('setCurrentBranchId', mr.source_branch);
+    .then(mr => {
+      dispatch('setCurrentBranchId', mr.source_branch);
 
-    dispatch('getBranchData', {
-      projectId,
-      branchId: mr.source_branch,
-    });
+      dispatch('getBranchData', {
+        projectId,
+        branchId: mr.source_branch,
+      });
 
-    return dispatch('getFiles', {
-      projectId,
-      branchId: mr.source_branch,
-    });
-  })
-  .then(() =>
-    dispatch('getMergeRequestVersions', {
-      projectId,
-      targetProjectId,
-      mergeRequestId,
-    }),
-  )
-  .then(() =>
-    dispatch('getMergeRequestChanges', {
-      projectId,
-      targetProjectId,
-      mergeRequestId,
-    }),
-  )
-  .then(mrChanges => {
-    if (mrChanges.changes.length) {
-      dispatch('updateActivityBarView', activityBarViews.review);
-    }
+      return dispatch('getFiles', {
+        projectId,
+        branchId: mr.source_branch,
+      });
+    })
+    .then(() =>
+      dispatch('getMergeRequestVersions', {
+        projectId,
+        targetProjectId,
+        mergeRequestId,
+      }),
+    )
+    .then(() =>
+      dispatch('getMergeRequestChanges', {
+        projectId,
+        targetProjectId,
+        mergeRequestId,
+      }),
+    )
+    .then(mrChanges => {
+      if (mrChanges.changes.length) {
+        dispatch('updateActivityBarView', activityBarViews.review);
+      }
 
-    mrChanges.changes.forEach((change, ind) => {
-      const changeTreeEntry = state.entries[change.new_path];
+      mrChanges.changes.forEach((change, ind) => {
+        const changeTreeEntry = state.entries[change.new_path];
 
-      if (changeTreeEntry) {
-        dispatch('setFileMrChange', {
-          file: changeTreeEntry,
-          mrChange: change,
-        });
-
-        if (ind < 10) {
-          dispatch('getFileData', {
-            path: change.new_path,
-            makeFileActive: ind === 0,
+        if (changeTreeEntry) {
+          dispatch('setFileMrChange', {
+            file: changeTreeEntry,
+            mrChange: change,
           });
+
+          if (ind < 10) {
+            dispatch('getFileData', {
+              path: change.new_path,
+              makeFileActive: ind === 0,
+            });
+          }
         }
-      }
+      });
+    })
+    .catch(e => {
+      flash(__('Error while loading the merge request. Please try again.'));
+      throw e;
     });
-  })
-  .catch(e => {
-    flash(__('Error while loading the merge request. Please try again.'));
-    throw e;
-  });
diff --git a/app/assets/javascripts/ide/stores/actions/project.js b/app/assets/javascripts/ide/stores/actions/project.js
index 543dc6c0461..2cb08ab2945 100644
--- a/app/assets/javascripts/ide/stores/actions/project.js
+++ b/app/assets/javascripts/ide/stores/actions/project.js
@@ -125,10 +125,7 @@ export const showBranchNotFoundError = ({ dispatch }, branchId) => {
   });
 };
 
-export const openBranch = (
-  { dispatch, state },
-  { projectId, branchId, basePath },
-) => {
+export const openBranch = ({ dispatch, state }, { projectId, branchId, basePath }) => {
   dispatch('setCurrentBranchId', branchId);
 
   dispatch('getBranchData', {
@@ -136,23 +133,20 @@ export const openBranch = (
     branchId,
   });
 
-  return (
-    dispatch('getFiles', {
-      projectId,
-      branchId,
-    })
-    .then(() => {
-      if (basePath) {
-        const path = basePath.slice(-1) === '/' ? basePath.slice(0, -1) : basePath;
-        const treeEntryKey = Object.keys(state.entries).find(
-          key => key === path && !state.entries[key].pending,
-        );
-        const treeEntry = state.entries[treeEntryKey];
+  return dispatch('getFiles', {
+    projectId,
+    branchId,
+  }).then(() => {
+    if (basePath) {
+      const path = basePath.slice(-1) === '/' ? basePath.slice(0, -1) : basePath;
+      const treeEntryKey = Object.keys(state.entries).find(
+        key => key === path && !state.entries[key].pending,
+      );
+      const treeEntry = state.entries[treeEntryKey];
 
-        if (treeEntry) {
-          dispatch('handleTreeEntryAction', treeEntry);
-        }
+      if (treeEntry) {
+        dispatch('handleTreeEntryAction', treeEntry);
       }
-    })
-  );
+    }
+  });
 };
diff --git a/app/assets/javascripts/ide/stores/modules/merge_requests/actions.js b/app/assets/javascripts/ide/stores/modules/merge_requests/actions.js
index baa2497ec5b..4565c11a83f 100644
--- a/app/assets/javascripts/ide/stores/modules/merge_requests/actions.js
+++ b/app/assets/javascripts/ide/stores/modules/merge_requests/actions.js
@@ -3,8 +3,7 @@ import Api from '../../../../api';
 import { scopes } from './constants';
 import * as types from './mutation_types';
 
-export const requestMergeRequests = ({ commit }) =>
-  commit(types.REQUEST_MERGE_REQUESTS);
+export const requestMergeRequests = ({ commit }) => commit(types.REQUEST_MERGE_REQUESTS);
 export const receiveMergeRequestsError = ({ commit, dispatch }, { type, search }) => {
   dispatch(
     'setErrorMessage',
-- 
cgit v1.2.1


From 9867eaf3efb6102eb81704d815312737c7e444c1 Mon Sep 17 00:00:00 2001
From: Mike Greiling <mike@pixelcog.com>
Date: Wed, 10 Oct 2018 01:23:54 -0500
Subject: Prettify issue_show and jobs modules

---
 .../javascripts/issue_show/components/app.vue      | 516 ++++++++++-----------
 .../issue_show/components/description.vue          | 181 ++++----
 .../issue_show/components/edit_actions.vue         | 106 ++---
 .../javascripts/issue_show/components/edited.vue   |  51 +-
 .../issue_show/components/fields/description.vue   |  74 +--
 .../components/fields/description_template.vue     |  76 +--
 .../issue_show/components/fields/title.vue         |  18 +-
 .../javascripts/issue_show/components/form.vue     | 142 +++---
 .../issue_show/components/locked_warning.vue       |  12 +-
 app/assets/javascripts/issue_show/stores/index.js  |   6 +-
 .../jobs/components/artifacts_block.vue            |  42 +-
 .../javascripts/jobs/components/commit_block.vue   |  38 +-
 .../javascripts/jobs/components/empty_state.vue    |  64 +--
 .../jobs/components/environments_block.vue         | 210 ++++-----
 .../javascripts/jobs/components/erased_block.vue   |  40 +-
 app/assets/javascripts/jobs/components/job_log.vue |  24 +-
 .../jobs/components/job_log_controllers.vue        | 115 +++--
 .../javascripts/jobs/components/jobs_container.vue |  54 +--
 app/assets/javascripts/jobs/components/sidebar.vue | 202 ++++----
 .../jobs/components/sidebar_detail_row.vue         |  50 +-
 .../jobs/components/stages_dropdown.vue            |  80 ++--
 .../javascripts/jobs/components/trigger_block.vue  |  40 +-
 app/assets/javascripts/jobs/store/index.js         |  13 +-
 23 files changed, 1074 insertions(+), 1080 deletions(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/issue_show/components/app.vue b/app/assets/javascripts/issue_show/components/app.vue
index c6ad3aa3e0d..04c1cf021d9 100644
--- a/app/assets/javascripts/issue_show/components/app.vue
+++ b/app/assets/javascripts/issue_show/components/app.vue
@@ -1,281 +1,279 @@
 <script>
-  import Visibility from 'visibilityjs';
-  import { visitUrl } from '../../lib/utils/url_utility';
-  import Poll from '../../lib/utils/poll';
-  import eventHub from '../event_hub';
-  import Service from '../services/index';
-  import Store from '../stores';
-  import titleComponent from './title.vue';
-  import descriptionComponent from './description.vue';
-  import editedComponent from './edited.vue';
-  import formComponent from './form.vue';
-  import recaptchaModalImplementor from '../../vue_shared/mixins/recaptcha_modal_implementor';
+import Visibility from 'visibilityjs';
+import { visitUrl } from '../../lib/utils/url_utility';
+import Poll from '../../lib/utils/poll';
+import eventHub from '../event_hub';
+import Service from '../services/index';
+import Store from '../stores';
+import titleComponent from './title.vue';
+import descriptionComponent from './description.vue';
+import editedComponent from './edited.vue';
+import formComponent from './form.vue';
+import recaptchaModalImplementor from '../../vue_shared/mixins/recaptcha_modal_implementor';
 
-  export default {
-    components: {
-      descriptionComponent,
-      titleComponent,
-      editedComponent,
-      formComponent,
-    },
-    mixins: [
-      recaptchaModalImplementor,
-    ],
-    props: {
-      endpoint: {
-        required: true,
-        type: String,
-      },
-      updateEndpoint: {
-        required: true,
-        type: String,
-      },
-      canUpdate: {
-        required: true,
-        type: Boolean,
-      },
-      canDestroy: {
-        required: true,
-        type: Boolean,
-      },
-      showInlineEditButton: {
-        type: Boolean,
-        required: false,
-        default: true,
-      },
-      showDeleteButton: {
-        type: Boolean,
-        required: false,
-        default: true,
-      },
-      enableAutocomplete: {
-        type: Boolean,
-        required: false,
-        default: true,
-      },
-      issuableRef: {
-        type: String,
-        required: true,
-      },
-      initialTitleHtml: {
-        type: String,
-        required: true,
-      },
-      initialTitleText: {
-        type: String,
-        required: true,
-      },
-      initialDescriptionHtml: {
-        type: String,
-        required: false,
-        default: '',
-      },
-      initialDescriptionText: {
-        type: String,
-        required: false,
-        default: '',
-      },
-      initialTaskStatus: {
-        type: String,
-        required: false,
-        default: '',
-      },
-      updatedAt: {
-        type: String,
-        required: false,
-        default: '',
-      },
-      updatedByName: {
-        type: String,
-        required: false,
-        default: '',
-      },
-      updatedByPath: {
-        type: String,
-        required: false,
-        default: '',
-      },
-      issuableTemplates: {
-        type: Array,
-        required: false,
-        default: () => [],
-      },
-      markdownPreviewPath: {
-        type: String,
-        required: true,
-      },
-      markdownDocsPath: {
-        type: String,
-        required: true,
-      },
-      markdownVersion: {
-        type: Number,
-        required: false,
-        default: 0,
-      },
-      projectPath: {
-        type: String,
-        required: true,
-      },
-      projectNamespace: {
-        type: String,
-        required: true,
-      },
-      issuableType: {
-        type: String,
-        required: false,
-        default: 'issue',
-      },
-      canAttachFile: {
-        type: Boolean,
-        required: false,
-        default: true,
-      },
+export default {
+  components: {
+    descriptionComponent,
+    titleComponent,
+    editedComponent,
+    formComponent,
+  },
+  mixins: [recaptchaModalImplementor],
+  props: {
+    endpoint: {
+      required: true,
+      type: String,
     },
-    data() {
-      const store = new Store({
-        titleHtml: this.initialTitleHtml,
-        titleText: this.initialTitleText,
-        descriptionHtml: this.initialDescriptionHtml,
-        descriptionText: this.initialDescriptionText,
-        updatedAt: this.updatedAt,
-        updatedByName: this.updatedByName,
-        updatedByPath: this.updatedByPath,
-        taskStatus: this.initialTaskStatus,
-      });
+    updateEndpoint: {
+      required: true,
+      type: String,
+    },
+    canUpdate: {
+      required: true,
+      type: Boolean,
+    },
+    canDestroy: {
+      required: true,
+      type: Boolean,
+    },
+    showInlineEditButton: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    showDeleteButton: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    enableAutocomplete: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    issuableRef: {
+      type: String,
+      required: true,
+    },
+    initialTitleHtml: {
+      type: String,
+      required: true,
+    },
+    initialTitleText: {
+      type: String,
+      required: true,
+    },
+    initialDescriptionHtml: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    initialDescriptionText: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    initialTaskStatus: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    updatedAt: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    updatedByName: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    updatedByPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    issuableTemplates: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    markdownPreviewPath: {
+      type: String,
+      required: true,
+    },
+    markdownDocsPath: {
+      type: String,
+      required: true,
+    },
+    markdownVersion: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
+    projectPath: {
+      type: String,
+      required: true,
+    },
+    projectNamespace: {
+      type: String,
+      required: true,
+    },
+    issuableType: {
+      type: String,
+      required: false,
+      default: 'issue',
+    },
+    canAttachFile: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+  },
+  data() {
+    const store = new Store({
+      titleHtml: this.initialTitleHtml,
+      titleText: this.initialTitleText,
+      descriptionHtml: this.initialDescriptionHtml,
+      descriptionText: this.initialDescriptionText,
+      updatedAt: this.updatedAt,
+      updatedByName: this.updatedByName,
+      updatedByPath: this.updatedByPath,
+      taskStatus: this.initialTaskStatus,
+    });
 
-      return {
-        store,
-        state: store.state,
-        showForm: false,
-      };
-    },
-    computed: {
-      formState() {
-        return this.store.formState;
-      },
-      hasUpdated() {
-        return !!this.state.updatedAt;
-      },
-      issueChanged() {
-        const descriptionChanged =
-          this.initialDescriptionText !== this.store.formState.description;
-        const titleChanged =
-          this.initialTitleText !== this.store.formState.title;
-        return descriptionChanged || titleChanged;
-      },
+    return {
+      store,
+      state: store.state,
+      showForm: false,
+    };
+  },
+  computed: {
+    formState() {
+      return this.store.formState;
     },
-    created() {
-      this.service = new Service(this.endpoint);
-      this.poll = new Poll({
-        resource: this.service,
-        method: 'getData',
-        successCallback: res => this.store.updateState(res.data),
-        errorCallback(err) {
-          throw new Error(err);
-        },
-      });
+    hasUpdated() {
+      return !!this.state.updatedAt;
+    },
+    issueChanged() {
+      const descriptionChanged = this.initialDescriptionText !== this.store.formState.description;
+      const titleChanged = this.initialTitleText !== this.store.formState.title;
+      return descriptionChanged || titleChanged;
+    },
+  },
+  created() {
+    this.service = new Service(this.endpoint);
+    this.poll = new Poll({
+      resource: this.service,
+      method: 'getData',
+      successCallback: res => this.store.updateState(res.data),
+      errorCallback(err) {
+        throw new Error(err);
+      },
+    });
+
+    if (!Visibility.hidden()) {
+      this.poll.makeRequest();
+    }
 
+    Visibility.change(() => {
       if (!Visibility.hidden()) {
-        this.poll.makeRequest();
+        this.poll.restart();
+      } else {
+        this.poll.stop();
       }
+    });
 
-      Visibility.change(() => {
-        if (!Visibility.hidden()) {
-          this.poll.restart();
-        } else {
-          this.poll.stop();
-        }
-      });
-
-      window.addEventListener('beforeunload', this.handleBeforeUnloadEvent);
+    window.addEventListener('beforeunload', this.handleBeforeUnloadEvent);
 
-      eventHub.$on('delete.issuable', this.deleteIssuable);
-      eventHub.$on('update.issuable', this.updateIssuable);
-      eventHub.$on('close.form', this.closeForm);
-      eventHub.$on('open.form', this.openForm);
-    },
-    beforeDestroy() {
-      eventHub.$off('delete.issuable', this.deleteIssuable);
-      eventHub.$off('update.issuable', this.updateIssuable);
-      eventHub.$off('close.form', this.closeForm);
-      eventHub.$off('open.form', this.openForm);
-      window.removeEventListener('beforeunload', this.handleBeforeUnloadEvent);
-    },
-    methods: {
-      handleBeforeUnloadEvent(e) {
-        const event = e;
-        if (this.showForm && this.issueChanged) {
-          event.returnValue = 'Are you sure you want to lose your issue information?';
-        }
-        return undefined;
-      },
+    eventHub.$on('delete.issuable', this.deleteIssuable);
+    eventHub.$on('update.issuable', this.updateIssuable);
+    eventHub.$on('close.form', this.closeForm);
+    eventHub.$on('open.form', this.openForm);
+  },
+  beforeDestroy() {
+    eventHub.$off('delete.issuable', this.deleteIssuable);
+    eventHub.$off('update.issuable', this.updateIssuable);
+    eventHub.$off('close.form', this.closeForm);
+    eventHub.$off('open.form', this.openForm);
+    window.removeEventListener('beforeunload', this.handleBeforeUnloadEvent);
+  },
+  methods: {
+    handleBeforeUnloadEvent(e) {
+      const event = e;
+      if (this.showForm && this.issueChanged) {
+        event.returnValue = 'Are you sure you want to lose your issue information?';
+      }
+      return undefined;
+    },
 
-      openForm() {
-        if (!this.showForm) {
-          this.showForm = true;
-          this.store.setFormState({
-            title: this.state.titleText,
-            description: this.state.descriptionText,
-            lockedWarningVisible: false,
-            updateLoading: false,
-          });
-        }
-      },
-      closeForm() {
-        this.showForm = false;
-      },
+    openForm() {
+      if (!this.showForm) {
+        this.showForm = true;
+        this.store.setFormState({
+          title: this.state.titleText,
+          description: this.state.descriptionText,
+          lockedWarningVisible: false,
+          updateLoading: false,
+        });
+      }
+    },
+    closeForm() {
+      this.showForm = false;
+    },
 
-      updateIssuable() {
-        return this.service.updateIssuable(this.store.formState)
-          .then(res => res.data)
-          .then(data => this.checkForSpam(data))
-          .then((data) => {
-            if (window.location.pathname !== data.web_url) {
-              visitUrl(data.web_url);
-            }
+    updateIssuable() {
+      return this.service
+        .updateIssuable(this.store.formState)
+        .then(res => res.data)
+        .then(data => this.checkForSpam(data))
+        .then(data => {
+          if (window.location.pathname !== data.web_url) {
+            visitUrl(data.web_url);
+          }
 
-            return this.service.getData();
-          })
-          .then(res => res.data)
-          .then((data) => {
-            this.store.updateState(data);
+          return this.service.getData();
+        })
+        .then(res => res.data)
+        .then(data => {
+          this.store.updateState(data);
+          eventHub.$emit('close.form');
+        })
+        .catch(error => {
+          if (error && error.name === 'SpamError') {
+            this.openRecaptcha();
+          } else {
             eventHub.$emit('close.form');
-          })
-          .catch((error) => {
-            if (error && error.name === 'SpamError') {
-              this.openRecaptcha();
-            } else {
-              eventHub.$emit('close.form');
-              window.Flash(`Error updating ${this.issuableType}`);
-            }
-          });
-      },
-
-      closeRecaptchaModal() {
-        this.store.setFormState({
-          updateLoading: false,
+            window.Flash(`Error updating ${this.issuableType}`);
+          }
         });
+    },
 
-        this.closeRecaptcha();
-      },
+    closeRecaptchaModal() {
+      this.store.setFormState({
+        updateLoading: false,
+      });
 
-      deleteIssuable() {
-        this.service.deleteIssuable()
-          .then(res => res.data)
-          .then((data) => {
-            // Stop the poll so we don't get 404's with the issuable not existing
-            this.poll.stop();
+      this.closeRecaptcha();
+    },
 
-            visitUrl(data.web_url);
-          })
-          .catch(() => {
-            eventHub.$emit('close.form');
-            window.Flash(`Error deleting ${this.issuableType}`);
-          });
-      },
+    deleteIssuable() {
+      this.service
+        .deleteIssuable()
+        .then(res => res.data)
+        .then(data => {
+          // Stop the poll so we don't get 404's with the issuable not existing
+          this.poll.stop();
+
+          visitUrl(data.web_url);
+        })
+        .catch(() => {
+          eventHub.$emit('close.form');
+          window.Flash(`Error deleting ${this.issuableType}`);
+        });
     },
-  };
+  },
+};
 </script>
 
 <template>
diff --git a/app/assets/javascripts/issue_show/components/description.vue b/app/assets/javascripts/issue_show/components/description.vue
index 1174177f561..461cb3271b7 100644
--- a/app/assets/javascripts/issue_show/components/description.vue
+++ b/app/assets/javascripts/issue_show/components/description.vue
@@ -1,110 +1,105 @@
 <script>
-  import $ from 'jquery';
-  import animateMixin from '../mixins/animate';
-  import TaskList from '../../task_list';
-  import recaptchaModalImplementor from '../../vue_shared/mixins/recaptcha_modal_implementor';
+import $ from 'jquery';
+import animateMixin from '../mixins/animate';
+import TaskList from '../../task_list';
+import recaptchaModalImplementor from '../../vue_shared/mixins/recaptcha_modal_implementor';
 
-  export default {
-    mixins: [
-      animateMixin,
-      recaptchaModalImplementor,
-    ],
+export default {
+  mixins: [animateMixin, recaptchaModalImplementor],
 
-    props: {
-      canUpdate: {
-        type: Boolean,
-        required: true,
-      },
-      descriptionHtml: {
-        type: String,
-        required: true,
-      },
-      descriptionText: {
-        type: String,
-        required: true,
-      },
-      taskStatus: {
-        type: String,
-        required: false,
-        default: '',
-      },
-      issuableType: {
-        type: String,
-        required: false,
-        default: 'issue',
-      },
-      updateUrl: {
-        type: String,
-        required: false,
-        default: null,
-      },
+  props: {
+    canUpdate: {
+      type: Boolean,
+      required: true,
     },
-    data() {
-      return {
-        preAnimation: false,
-        pulseAnimation: false,
-      };
+    descriptionHtml: {
+      type: String,
+      required: true,
     },
-    watch: {
-      descriptionHtml() {
-        this.animateChange();
+    descriptionText: {
+      type: String,
+      required: true,
+    },
+    taskStatus: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    issuableType: {
+      type: String,
+      required: false,
+      default: 'issue',
+    },
+    updateUrl: {
+      type: String,
+      required: false,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      preAnimation: false,
+      pulseAnimation: false,
+    };
+  },
+  watch: {
+    descriptionHtml() {
+      this.animateChange();
 
-        this.$nextTick(() => {
-          this.renderGFM();
-        });
-      },
-      taskStatus() {
-        this.updateTaskStatusText();
-      },
+      this.$nextTick(() => {
+        this.renderGFM();
+      });
     },
-    mounted() {
-      this.renderGFM();
+    taskStatus() {
       this.updateTaskStatusText();
     },
-    methods: {
-      renderGFM() {
-        $(this.$refs['gfm-content']).renderGFM();
+  },
+  mounted() {
+    this.renderGFM();
+    this.updateTaskStatusText();
+  },
+  methods: {
+    renderGFM() {
+      $(this.$refs['gfm-content']).renderGFM();
 
-        if (this.canUpdate) {
-          // eslint-disable-next-line no-new
-          new TaskList({
-            dataType: this.issuableType,
-            fieldName: 'description',
-            selector: '.detail-page-description',
-            onSuccess: this.taskListUpdateSuccess.bind(this),
-          });
-        }
-      },
+      if (this.canUpdate) {
+        // eslint-disable-next-line no-new
+        new TaskList({
+          dataType: this.issuableType,
+          fieldName: 'description',
+          selector: '.detail-page-description',
+          onSuccess: this.taskListUpdateSuccess.bind(this),
+        });
+      }
+    },
 
-      taskListUpdateSuccess(data) {
-        try {
-          this.checkForSpam(data);
-          this.closeRecaptcha();
-        } catch (error) {
-          if (error && error.name === 'SpamError') this.openRecaptcha();
-        }
-      },
+    taskListUpdateSuccess(data) {
+      try {
+        this.checkForSpam(data);
+        this.closeRecaptcha();
+      } catch (error) {
+        if (error && error.name === 'SpamError') this.openRecaptcha();
+      }
+    },
 
-      updateTaskStatusText() {
-        const taskRegexMatches = this.taskStatus.match(/(\d+) of ((?!0)\d+)/);
-        const $issuableHeader = $('.issuable-meta');
-        const $tasks = $('#task_status', $issuableHeader);
-        const $tasksShort = $('#task_status_short', $issuableHeader);
+    updateTaskStatusText() {
+      const taskRegexMatches = this.taskStatus.match(/(\d+) of ((?!0)\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('');
-        }
-      },
+      if (taskRegexMatches) {
+        $tasks.text(this.taskStatus);
+        $tasksShort.text(
+          `${taskRegexMatches[1]}/${taskRegexMatches[2]} task${taskRegexMatches[2] > 1 ? 's' : ''}`,
+        );
+      } else {
+        $tasks.text('');
+        $tasksShort.text('');
+      }
     },
-  };
+  },
+};
 </script>
 
 <template>
diff --git a/app/assets/javascripts/issue_show/components/edit_actions.vue b/app/assets/javascripts/issue_show/components/edit_actions.vue
index c3d39082714..5dda35d64bb 100644
--- a/app/assets/javascripts/issue_show/components/edit_actions.vue
+++ b/app/assets/javascripts/issue_show/components/edit_actions.vue
@@ -1,64 +1,64 @@
 <script>
-  import { __, sprintf } from '~/locale';
-  import updateMixin from '../mixins/update';
-  import eventHub from '../event_hub';
+import { __, sprintf } from '~/locale';
+import updateMixin from '../mixins/update';
+import eventHub from '../event_hub';
 
-  const issuableTypes = {
-    issue: __('Issue'),
-    epic: __('Epic'),
-  };
+const issuableTypes = {
+  issue: __('Issue'),
+  epic: __('Epic'),
+};
 
-  export default {
-    mixins: [updateMixin],
-    props: {
-      canDestroy: {
-        type: Boolean,
-        required: true,
-      },
-      formState: {
-        type: Object,
-        required: true,
-      },
-      showDeleteButton: {
-        type: Boolean,
-        required: false,
-        default: true,
-      },
-      issuableType: {
-        type: String,
-        required: true,
-      },
+export default {
+  mixins: [updateMixin],
+  props: {
+    canDestroy: {
+      type: Boolean,
+      required: true,
     },
-    data() {
-      return {
-        deleteLoading: false,
-      };
+    formState: {
+      type: Object,
+      required: true,
     },
-    computed: {
-      isSubmitEnabled() {
-        return this.formState.title.trim() !== '';
-      },
-      shouldShowDeleteButton() {
-        return this.canDestroy && this.showDeleteButton;
-      },
+    showDeleteButton: {
+      type: Boolean,
+      required: false,
+      default: true,
     },
-    methods: {
-      closeForm() {
-        eventHub.$emit('close.form');
-      },
-      deleteIssuable() {
-        const confirmMessage = sprintf(__('%{issuableType} will be removed! Are you sure?'), {
-          issuableType: issuableTypes[this.issuableType],
-        });
-        // eslint-disable-next-line no-alert
-        if (window.confirm(confirmMessage)) {
-          this.deleteLoading = true;
+    issuableType: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      deleteLoading: false,
+    };
+  },
+  computed: {
+    isSubmitEnabled() {
+      return this.formState.title.trim() !== '';
+    },
+    shouldShowDeleteButton() {
+      return this.canDestroy && this.showDeleteButton;
+    },
+  },
+  methods: {
+    closeForm() {
+      eventHub.$emit('close.form');
+    },
+    deleteIssuable() {
+      const confirmMessage = sprintf(__('%{issuableType} will be removed! Are you sure?'), {
+        issuableType: issuableTypes[this.issuableType],
+      });
+      // eslint-disable-next-line no-alert
+      if (window.confirm(confirmMessage)) {
+        this.deleteLoading = true;
 
-          eventHub.$emit('delete.issuable');
-        }
-      },
+        eventHub.$emit('delete.issuable');
+      }
     },
-  };
+  },
+};
 </script>
 
 <template>
diff --git a/app/assets/javascripts/issue_show/components/edited.vue b/app/assets/javascripts/issue_show/components/edited.vue
index 05cd976f196..73ecb26c28d 100644
--- a/app/assets/javascripts/issue_show/components/edited.vue
+++ b/app/assets/javascripts/issue_show/components/edited.vue
@@ -1,33 +1,33 @@
 <script>
-  import timeAgoTooltip from '../../vue_shared/components/time_ago_tooltip.vue';
+import timeAgoTooltip from '../../vue_shared/components/time_ago_tooltip.vue';
 
-  export default {
-    components: {
-      timeAgoTooltip,
+export default {
+  components: {
+    timeAgoTooltip,
+  },
+  props: {
+    updatedAt: {
+      type: String,
+      required: false,
+      default: '',
     },
-    props: {
-      updatedAt: {
-        type: String,
-        required: false,
-        default: '',
-      },
-      updatedByName: {
-        type: String,
-        required: false,
-        default: '',
-      },
-      updatedByPath: {
-        type: String,
-        required: false,
-        default: '',
-      },
+    updatedByName: {
+      type: String,
+      required: false,
+      default: '',
     },
-    computed: {
-      hasUpdatedBy() {
-        return this.updatedByName && this.updatedByPath;
-      },
+    updatedByPath: {
+      type: String,
+      required: false,
+      default: '',
     },
-  };
+  },
+  computed: {
+    hasUpdatedBy() {
+      return this.updatedByName && this.updatedByPath;
+    },
+  },
+};
 </script>
 
 <template>
@@ -53,4 +53,3 @@
     </span>
   </small>
 </template>
-
diff --git a/app/assets/javascripts/issue_show/components/fields/description.vue b/app/assets/javascripts/issue_show/components/fields/description.vue
index 1a78c59d715..e9e96a985a7 100644
--- a/app/assets/javascripts/issue_show/components/fields/description.vue
+++ b/app/assets/javascripts/issue_show/components/fields/description.vue
@@ -1,45 +1,45 @@
 <script>
-  import updateMixin from '../../mixins/update';
-  import markdownField from '../../../vue_shared/components/markdown/field.vue';
+import updateMixin from '../../mixins/update';
+import markdownField from '../../../vue_shared/components/markdown/field.vue';
 
-  export default {
-    components: {
-      markdownField,
+export default {
+  components: {
+    markdownField,
+  },
+  mixins: [updateMixin],
+  props: {
+    formState: {
+      type: Object,
+      required: true,
     },
-    mixins: [updateMixin],
-    props: {
-      formState: {
-        type: Object,
-        required: true,
-      },
-      markdownPreviewPath: {
-        type: String,
-        required: true,
-      },
-      markdownDocsPath: {
-        type: String,
-        required: true,
-      },
-      markdownVersion: {
-        type: Number,
-        required: false,
-        default: 0,
-      },
-      canAttachFile: {
-        type: Boolean,
-        required: false,
-        default: true,
-      },
-      enableAutocomplete: {
-        type: Boolean,
-        required: false,
-        default: true,
-      },
+    markdownPreviewPath: {
+      type: String,
+      required: true,
     },
-    mounted() {
-      this.$refs.textarea.focus();
+    markdownDocsPath: {
+      type: String,
+      required: true,
     },
-  };
+    markdownVersion: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
+    canAttachFile: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    enableAutocomplete: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+  },
+  mounted() {
+    this.$refs.textarea.focus();
+  },
+};
 </script>
 
 <template>
diff --git a/app/assets/javascripts/issue_show/components/fields/description_template.vue b/app/assets/javascripts/issue_show/components/fields/description_template.vue
index e90d9fad94e..e433bf66cfc 100644
--- a/app/assets/javascripts/issue_show/components/fields/description_template.vue
+++ b/app/assets/javascripts/issue_show/components/fields/description_template.vue
@@ -1,46 +1,46 @@
 <script>
-  import $ from 'jquery';
-  import IssuableTemplateSelectors from '../../../templates/issuable_template_selectors';
+import $ from 'jquery';
+import IssuableTemplateSelectors from '../../../templates/issuable_template_selectors';
 
-  export default {
-    props: {
-      formState: {
-        type: Object,
-        required: true,
-      },
-      issuableTemplates: {
-        type: Array,
-        required: false,
-        default: () => [],
-      },
-      projectPath: {
-        type: String,
-        required: true,
-      },
-      projectNamespace: {
-        type: String,
-        required: true,
-      },
+export default {
+  props: {
+    formState: {
+      type: Object,
+      required: true,
     },
-    computed: {
-      issuableTemplatesJson() {
-        return JSON.stringify(this.issuableTemplates);
-      },
+    issuableTemplates: {
+      type: Array,
+      required: false,
+      default: () => [],
     },
-    mounted() {
-      // Create the editor for the template
-      const editor = document.querySelector('.detail-page-description .note-textarea') || {};
-      editor.setValue = (val) => {
-        this.formState.description = val;
-      };
-      editor.getValue = () => this.formState.description;
-
-      this.issuableTemplate = new IssuableTemplateSelectors({
-        $dropdowns: $(this.$refs.toggle),
-        editor,
-      });
+    projectPath: {
+      type: String,
+      required: true,
+    },
+    projectNamespace: {
+      type: String,
+      required: true,
     },
-  };
+  },
+  computed: {
+    issuableTemplatesJson() {
+      return JSON.stringify(this.issuableTemplates);
+    },
+  },
+  mounted() {
+    // Create the editor for the template
+    const editor = document.querySelector('.detail-page-description .note-textarea') || {};
+    editor.setValue = val => {
+      this.formState.description = val;
+    };
+    editor.getValue = () => this.formState.description;
+
+    this.issuableTemplate = new IssuableTemplateSelectors({
+      $dropdowns: $(this.$refs.toggle),
+      editor,
+    });
+  },
+};
 </script>
 
 <template>
diff --git a/app/assets/javascripts/issue_show/components/fields/title.vue b/app/assets/javascripts/issue_show/components/fields/title.vue
index b7f2b1a6050..11f4153b8d5 100644
--- a/app/assets/javascripts/issue_show/components/fields/title.vue
+++ b/app/assets/javascripts/issue_show/components/fields/title.vue
@@ -1,15 +1,15 @@
 <script>
-  import updateMixin from '../../mixins/update';
+import updateMixin from '../../mixins/update';
 
-  export default {
-    mixins: [updateMixin],
-    props: {
-      formState: {
-        type: Object,
-        required: true,
-      },
+export default {
+  mixins: [updateMixin],
+  props: {
+    formState: {
+      type: Object,
+      required: true,
     },
-  };
+  },
+};
 </script>
 
 <template>
diff --git a/app/assets/javascripts/issue_show/components/form.vue b/app/assets/javascripts/issue_show/components/form.vue
index 03d8d0ec67c..3b430d92912 100644
--- a/app/assets/javascripts/issue_show/components/form.vue
+++ b/app/assets/javascripts/issue_show/components/form.vue
@@ -1,79 +1,79 @@
 <script>
-  import lockedWarning from './locked_warning.vue';
-  import titleField from './fields/title.vue';
-  import descriptionField from './fields/description.vue';
-  import editActions from './edit_actions.vue';
-  import descriptionTemplate from './fields/description_template.vue';
+import lockedWarning from './locked_warning.vue';
+import titleField from './fields/title.vue';
+import descriptionField from './fields/description.vue';
+import editActions from './edit_actions.vue';
+import descriptionTemplate from './fields/description_template.vue';
 
-  export default {
-    components: {
-      lockedWarning,
-      titleField,
-      descriptionField,
-      descriptionTemplate,
-      editActions,
+export default {
+  components: {
+    lockedWarning,
+    titleField,
+    descriptionField,
+    descriptionTemplate,
+    editActions,
+  },
+  props: {
+    canDestroy: {
+      type: Boolean,
+      required: true,
     },
-    props: {
-      canDestroy: {
-        type: Boolean,
-        required: true,
-      },
-      formState: {
-        type: Object,
-        required: true,
-      },
-      issuableTemplates: {
-        type: Array,
-        required: false,
-        default: () => [],
-      },
-      issuableType: {
-        type: String,
-        required: true,
-      },
-      markdownPreviewPath: {
-        type: String,
-        required: true,
-      },
-      markdownDocsPath: {
-        type: String,
-        required: true,
-      },
-      markdownVersion: {
-        type: Number,
-        required: false,
-        default: 0,
-      },
-      projectPath: {
-        type: String,
-        required: true,
-      },
-      projectNamespace: {
-        type: String,
-        required: true,
-      },
-      showDeleteButton: {
-        type: Boolean,
-        required: false,
-        default: true,
-      },
-      canAttachFile: {
-        type: Boolean,
-        required: false,
-        default: true,
-      },
-      enableAutocomplete: {
-        type: Boolean,
-        required: false,
-        default: true,
-      },
+    formState: {
+      type: Object,
+      required: true,
     },
-    computed: {
-      hasIssuableTemplates() {
-        return this.issuableTemplates.length;
-      },
+    issuableTemplates: {
+      type: Array,
+      required: false,
+      default: () => [],
     },
-  };
+    issuableType: {
+      type: String,
+      required: true,
+    },
+    markdownPreviewPath: {
+      type: String,
+      required: true,
+    },
+    markdownDocsPath: {
+      type: String,
+      required: true,
+    },
+    markdownVersion: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
+    projectPath: {
+      type: String,
+      required: true,
+    },
+    projectNamespace: {
+      type: String,
+      required: true,
+    },
+    showDeleteButton: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    canAttachFile: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    enableAutocomplete: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+  },
+  computed: {
+    hasIssuableTemplates() {
+      return this.issuableTemplates.length;
+    },
+  },
+};
 </script>
 
 <template>
diff --git a/app/assets/javascripts/issue_show/components/locked_warning.vue b/app/assets/javascripts/issue_show/components/locked_warning.vue
index ad0d40faf32..0682c6f2a35 100644
--- a/app/assets/javascripts/issue_show/components/locked_warning.vue
+++ b/app/assets/javascripts/issue_show/components/locked_warning.vue
@@ -1,11 +1,11 @@
 <script>
-  export default {
-    computed: {
-      currentPath() {
-        return window.location.pathname;
-      },
+export default {
+  computed: {
+    currentPath() {
+      return window.location.pathname;
     },
-  };
+  },
+};
 </script>
 
 <template>
diff --git a/app/assets/javascripts/issue_show/stores/index.js b/app/assets/javascripts/issue_show/stores/index.js
index af8b0414266..32044d6da25 100644
--- a/app/assets/javascripts/issue_show/stores/index.js
+++ b/app/assets/javascripts/issue_show/stores/index.js
@@ -25,8 +25,10 @@ export default class Store {
   }
 
   stateShouldUpdate(data) {
-    return this.state.titleText !== data.title_text ||
-      this.state.descriptionText !== data.description_text;
+    return (
+      this.state.titleText !== data.title_text ||
+      this.state.descriptionText !== data.description_text
+    );
   }
 
   setFormState(state) {
diff --git a/app/assets/javascripts/jobs/components/artifacts_block.vue b/app/assets/javascripts/jobs/components/artifacts_block.vue
index d5866f9b9f1..17fd5321642 100644
--- a/app/assets/javascripts/jobs/components/artifacts_block.vue
+++ b/app/assets/javascripts/jobs/components/artifacts_block.vue
@@ -1,30 +1,28 @@
 <script>
-  import TimeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
-  import timeagoMixin from '~/vue_shared/mixins/timeago';
+import TimeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
+import timeagoMixin from '~/vue_shared/mixins/timeago';
 
-  export default {
-    components: {
-      TimeagoTooltip,
+export default {
+  components: {
+    TimeagoTooltip,
+  },
+  mixins: [timeagoMixin],
+  props: {
+    artifact: {
+      type: Object,
+      required: true,
     },
-    mixins: [
-      timeagoMixin,
-    ],
-    props: {
-      artifact: {
-        type: Object,
-        required: true,
-      },
+  },
+  computed: {
+    isExpired() {
+      return this.artifact.expired;
     },
-    computed: {
-      isExpired() {
-        return this.artifact.expired;
-      },
-      // Only when the key is `false` we can render this block
-      willExpire() {
-        return this.artifact.expired === false;
-      },
+    // Only when the key is `false` we can render this block
+    willExpire() {
+      return this.artifact.expired === false;
     },
-  };
+  },
+};
 </script>
 <template>
   <div class="block">
diff --git a/app/assets/javascripts/jobs/components/commit_block.vue b/app/assets/javascripts/jobs/components/commit_block.vue
index 4b1788a1c16..7d51f6afd10 100644
--- a/app/assets/javascripts/jobs/components/commit_block.vue
+++ b/app/assets/javascripts/jobs/components/commit_block.vue
@@ -1,26 +1,26 @@
 <script>
-  import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
+import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 
-  export default {
-    components: {
-      ClipboardButton,
+export default {
+  components: {
+    ClipboardButton,
+  },
+  props: {
+    commit: {
+      type: Object,
+      required: true,
     },
-    props: {
-      commit: {
-        type: Object,
-        required: true,
-      },
-      mergeRequest: {
-        type: Object,
-        required: false,
-        default: null,
-      },
-      isLastBlock: {
-        type: Boolean,
-        required: true,
-      },
+    mergeRequest: {
+      type: Object,
+      required: false,
+      default: null,
     },
-  };
+    isLastBlock: {
+      type: Boolean,
+      required: true,
+    },
+  },
+};
 </script>
 <template>
   <div
diff --git a/app/assets/javascripts/jobs/components/empty_state.vue b/app/assets/javascripts/jobs/components/empty_state.vue
index ff500eddddb..ee5ceb99b0a 100644
--- a/app/assets/javascripts/jobs/components/empty_state.vue
+++ b/app/assets/javascripts/jobs/components/empty_state.vue
@@ -1,38 +1,38 @@
 <script>
-  export default {
-    props: {
-      illustrationPath: {
-        type: String,
-        required: true,
-      },
-      illustrationSizeClass: {
-        type: String,
-        required: true,
-      },
-      title: {
-        type: String,
-        required: true,
-      },
-      content: {
-        type: String,
-        required: false,
-        default: null,
-      },
-      action: {
-        type: Object,
-        required: false,
-        default: null,
-        validator(value) {
-          return (
-            value === null ||
-            (Object.prototype.hasOwnProperty.call(value, 'path') &&
-              Object.prototype.hasOwnProperty.call(value, 'method') &&
-              Object.prototype.hasOwnProperty.call(value, 'button_title'))
-          );
-        },
+export default {
+  props: {
+    illustrationPath: {
+      type: String,
+      required: true,
+    },
+    illustrationSizeClass: {
+      type: String,
+      required: true,
+    },
+    title: {
+      type: String,
+      required: true,
+    },
+    content: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    action: {
+      type: Object,
+      required: false,
+      default: null,
+      validator(value) {
+        return (
+          value === null ||
+          (Object.prototype.hasOwnProperty.call(value, 'path') &&
+            Object.prototype.hasOwnProperty.call(value, 'method') &&
+            Object.prototype.hasOwnProperty.call(value, 'button_title'))
+        );
       },
     },
-  };
+  },
+};
 </script>
 <template>
   <div class="row empty-state">
diff --git a/app/assets/javascripts/jobs/components/environments_block.vue b/app/assets/javascripts/jobs/components/environments_block.vue
index e6e1d418194..6d1eb713886 100644
--- a/app/assets/javascripts/jobs/components/environments_block.vue
+++ b/app/assets/javascripts/jobs/components/environments_block.vue
@@ -1,129 +1,131 @@
 <script>
-  import _ from 'underscore';
-  import CiIcon from '~/vue_shared/components/ci_icon.vue';
-  import { sprintf, __ } from '../../locale';
+import _ from 'underscore';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
+import { sprintf, __ } from '../../locale';
 
-  export default {
-    components: {
-      CiIcon,
+export default {
+  components: {
+    CiIcon,
+  },
+  props: {
+    deploymentStatus: {
+      type: Object,
+      required: true,
     },
-    props: {
-      deploymentStatus: {
-        type: Object,
-        required: true,
-      },
-      iconStatus: {
-        type: Object,
-        required: true,
-      },
+    iconStatus: {
+      type: Object,
+      required: true,
     },
-    computed: {
-      environment() {
-        let environmentText;
-        switch (this.deploymentStatus.status) {
-          case 'last':
+  },
+  computed: {
+    environment() {
+      let environmentText;
+      switch (this.deploymentStatus.status) {
+        case 'last':
+          environmentText = sprintf(
+            __('This job is the most recent deployment to %{link}.'),
+            { link: this.environmentLink },
+            false,
+          );
+          break;
+        case 'out_of_date':
+          if (this.hasLastDeployment) {
             environmentText = sprintf(
-              __('This job is the most recent deployment to %{link}.'),
-              { link: this.environmentLink },
+              __(
+                'This job is an out-of-date deployment to %{environmentLink}. View the most recent deployment %{deploymentLink}.',
+              ),
+              {
+                environmentLink: this.environmentLink,
+                deploymentLink: this.deploymentLink(`#${this.lastDeployment.iid}`),
+              },
               false,
             );
-            break;
-          case 'out_of_date':
-            if (this.hasLastDeployment) {
-              environmentText = sprintf(
-                __(
-                  'This job is an out-of-date deployment to %{environmentLink}. View the most recent deployment %{deploymentLink}.',
-                ),
-                {
-                  environmentLink: this.environmentLink,
-                  deploymentLink: this.deploymentLink(`#${this.lastDeployment.iid}`),
-                },
-                false,
-              );
-            } else {
-              environmentText = sprintf(
-                __('This job is an out-of-date deployment to %{environmentLink}.'),
-                { environmentLink: this.environmentLink },
-                false,
-              );
-            }
-
-            break;
-          case 'failed':
+          } else {
             environmentText = sprintf(
-              __('The deployment of this job to %{environmentLink} did not succeed.'),
+              __('This job is an out-of-date deployment to %{environmentLink}.'),
               { environmentLink: this.environmentLink },
               false,
             );
-            break;
-          case 'creating':
-            if (this.hasLastDeployment) {
-              environmentText = sprintf(
-                __(
-                  'This job is creating a deployment to %{environmentLink} and will overwrite the %{deploymentLink}.',
-                ),
-                {
-                  environmentLink: this.environmentLink,
-                  deploymentLink: this.deploymentLink(__('latest deployment')),
-                },
-                false,
-              );
-            } else {
-              environmentText = sprintf(
-                __('This job is creating a deployment to %{environmentLink}.'),
-                { environmentLink: this.environmentLink },
-                false,
-              );
-            }
-            break;
-          default:
-            break;
-        }
-        return environmentText;
-      },
-      environmentLink() {
-        if (this.hasEnvironment) {
-          return sprintf(
-            '%{startLink}%{name}%{endLink}',
-            {
-              startLink: `<a href="${
-                this.deploymentStatus.environment.environment_path
-              }" class="js-environment-link">`,
-              name: _.escape(this.deploymentStatus.environment.name),
-              endLink: '</a>',
-            },
+          }
+
+          break;
+        case 'failed':
+          environmentText = sprintf(
+            __('The deployment of this job to %{environmentLink} did not succeed.'),
+            { environmentLink: this.environmentLink },
             false,
           );
-        }
-        return '';
-      },
-      hasLastDeployment() {
-        return this.hasEnvironment && this.deploymentStatus.environment.last_deployment;
-      },
-      lastDeployment() {
-        return this.hasLastDeployment ? this.deploymentStatus.environment.last_deployment : {};
-      },
-      hasEnvironment() {
-        return !_.isEmpty(this.deploymentStatus.environment);
-      },
-      lastDeploymentPath() {
-        return !_.isEmpty(this.lastDeployment.deployable) ? this.lastDeployment.deployable.build_path : '';
-      },
+          break;
+        case 'creating':
+          if (this.hasLastDeployment) {
+            environmentText = sprintf(
+              __(
+                'This job is creating a deployment to %{environmentLink} and will overwrite the %{deploymentLink}.',
+              ),
+              {
+                environmentLink: this.environmentLink,
+                deploymentLink: this.deploymentLink(__('latest deployment')),
+              },
+              false,
+            );
+          } else {
+            environmentText = sprintf(
+              __('This job is creating a deployment to %{environmentLink}.'),
+              { environmentLink: this.environmentLink },
+              false,
+            );
+          }
+          break;
+        default:
+          break;
+      }
+      return environmentText;
     },
-    methods: {
-      deploymentLink(name) {
+    environmentLink() {
+      if (this.hasEnvironment) {
         return sprintf(
           '%{startLink}%{name}%{endLink}',
           {
-            startLink: `<a href="${this.lastDeploymentPath}" class="js-job-deployment-link">`,
-            name,
+            startLink: `<a href="${
+              this.deploymentStatus.environment.environment_path
+            }" class="js-environment-link">`,
+            name: _.escape(this.deploymentStatus.environment.name),
             endLink: '</a>',
           },
           false,
         );
-      },
+      }
+      return '';
+    },
+    hasLastDeployment() {
+      return this.hasEnvironment && this.deploymentStatus.environment.last_deployment;
+    },
+    lastDeployment() {
+      return this.hasLastDeployment ? this.deploymentStatus.environment.last_deployment : {};
+    },
+    hasEnvironment() {
+      return !_.isEmpty(this.deploymentStatus.environment);
+    },
+    lastDeploymentPath() {
+      return !_.isEmpty(this.lastDeployment.deployable)
+        ? this.lastDeployment.deployable.build_path
+        : '';
+    },
+  },
+  methods: {
+    deploymentLink(name) {
+      return sprintf(
+        '%{startLink}%{name}%{endLink}',
+        {
+          startLink: `<a href="${this.lastDeploymentPath}" class="js-job-deployment-link">`,
+          name,
+          endLink: '</a>',
+        },
+        false,
+      );
     },
-  };
+  },
+};
 </script>
 <template>
   <div class="prepend-top-default js-environment-container">
diff --git a/app/assets/javascripts/jobs/components/erased_block.vue b/app/assets/javascripts/jobs/components/erased_block.vue
index 3d6d9ba4387..5ffbfb6e19a 100644
--- a/app/assets/javascripts/jobs/components/erased_block.vue
+++ b/app/assets/javascripts/jobs/components/erased_block.vue
@@ -1,28 +1,28 @@
 <script>
-  import _ from 'underscore';
-  import TimeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
+import _ from 'underscore';
+import TimeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 
-  export default {
-    components: {
-      TimeagoTooltip,
+export default {
+  components: {
+    TimeagoTooltip,
+  },
+  props: {
+    user: {
+      type: Object,
+      required: false,
+      default: () => ({}),
     },
-    props: {
-      user: {
-        type: Object,
-        required: false,
-        default: () => ({}),
-      },
-      erasedAt: {
-        type: String,
-        required: true,
-      },
+    erasedAt: {
+      type: String,
+      required: true,
     },
-    computed: {
-      isErasedByUser() {
-        return !_.isEmpty(this.user);
-      },
+  },
+  computed: {
+    isErasedByUser() {
+      return !_.isEmpty(this.user);
     },
-  };
+  },
+};
 </script>
 <template>
   <div class="prepend-top-default js-build-erased">
diff --git a/app/assets/javascripts/jobs/components/job_log.vue b/app/assets/javascripts/jobs/components/job_log.vue
index b12e963b60c..9d78d89239a 100644
--- a/app/assets/javascripts/jobs/components/job_log.vue
+++ b/app/assets/javascripts/jobs/components/job_log.vue
@@ -1,17 +1,17 @@
 <script>
-  export default {
-    name: 'JobLog',
-    props: {
-      trace: {
-        type: String,
-        required: true,
-      },
-      isComplete: {
-        type: Boolean,
-        required: true,
-      },
+export default {
+  name: 'JobLog',
+  props: {
+    trace: {
+      type: String,
+      required: true,
     },
-  };
+    isComplete: {
+      type: Boolean,
+      required: true,
+    },
+  },
+};
 </script>
 <template>
   <pre class="build-trace">
diff --git a/app/assets/javascripts/jobs/components/job_log_controllers.vue b/app/assets/javascripts/jobs/components/job_log_controllers.vue
index 3e62ababea3..35d40c6898e 100644
--- a/app/assets/javascripts/jobs/components/job_log_controllers.vue
+++ b/app/assets/javascripts/jobs/components/job_log_controllers.vue
@@ -1,69 +1,68 @@
 <script>
-  import { polyfillSticky } from '~/lib/utils/sticky';
-  import Icon from '~/vue_shared/components/icon.vue';
-  import tooltip from '~/vue_shared/directives/tooltip';
-  import { numberToHumanSize } from '~/lib/utils/number_utils';
-  import { sprintf } from '~/locale';
+import { polyfillSticky } from '~/lib/utils/sticky';
+import Icon from '~/vue_shared/components/icon.vue';
+import tooltip from '~/vue_shared/directives/tooltip';
+import { numberToHumanSize } from '~/lib/utils/number_utils';
+import { sprintf } from '~/locale';
 
-  export default {
-    components: {
-      Icon,
+export default {
+  components: {
+    Icon,
+  },
+  directives: {
+    tooltip,
+  },
+  props: {
+    erasePath: {
+      type: String,
+      required: false,
+      default: null,
     },
-    directives: {
-      tooltip,
+    size: {
+      type: Number,
+      required: true,
     },
-    props: {
-      erasePath: {
-        type: String,
-        required: false,
-        default: null,
-      },
-      size: {
-        type: Number,
-        required: true,
-      },
-      rawPath: {
-        type: String,
-        required: false,
-        default: null,
-      },
-      isScrollTopDisabled: {
-        type: Boolean,
-        required: true,
-      },
-      isScrollBottomDisabled: {
-        type: Boolean,
-        required: true,
-      },
-      isScrollingDown: {
-        type: Boolean,
-        required: true,
-      },
-      isTraceSizeVisible: {
-        type: Boolean,
-        required: true,
-      },
+    rawPath: {
+      type: String,
+      required: false,
+      default: null,
     },
-    computed: {
-      jobLogSize() {
-        return sprintf('Showing last %{size} of log -', {
-          size: numberToHumanSize(this.size),
-        });
-      },
+    isScrollTopDisabled: {
+      type: Boolean,
+      required: true,
     },
-    mounted() {
-      polyfillSticky(this.$el);
+    isScrollBottomDisabled: {
+      type: Boolean,
+      required: true,
     },
-    methods: {
-      handleScrollToTop() {
-        this.$emit('scrollJobLogTop');
-      },
-      handleScrollToBottom() {
-        this.$emit('scrollJobLogBottom');
-      },
+    isScrollingDown: {
+      type: Boolean,
+      required: true,
     },
-
-  };
+    isTraceSizeVisible: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  computed: {
+    jobLogSize() {
+      return sprintf('Showing last %{size} of log -', {
+        size: numberToHumanSize(this.size),
+      });
+    },
+  },
+  mounted() {
+    polyfillSticky(this.$el);
+  },
+  methods: {
+    handleScrollToTop() {
+      this.$emit('scrollJobLogTop');
+    },
+    handleScrollToBottom() {
+      this.$emit('scrollJobLogBottom');
+    },
+  },
+};
 </script>
 <template>
   <div class="top-bar">
diff --git a/app/assets/javascripts/jobs/components/jobs_container.vue b/app/assets/javascripts/jobs/components/jobs_container.vue
index 271b7790d75..03f36ec5c8b 100644
--- a/app/assets/javascripts/jobs/components/jobs_container.vue
+++ b/app/assets/javascripts/jobs/components/jobs_container.vue
@@ -1,36 +1,36 @@
 <script>
-  import _ from 'underscore';
-  import CiIcon from '~/vue_shared/components/ci_icon.vue';
-  import Icon from '~/vue_shared/components/icon.vue';
-  import tooltip from '~/vue_shared/directives/tooltip';
+import _ from 'underscore';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
+import Icon from '~/vue_shared/components/icon.vue';
+import tooltip from '~/vue_shared/directives/tooltip';
 
-  export default {
-    components: {
-      CiIcon,
-      Icon,
+export default {
+  components: {
+    CiIcon,
+    Icon,
+  },
+  directives: {
+    tooltip,
+  },
+  props: {
+    jobs: {
+      type: Array,
+      required: true,
     },
-    directives: {
-      tooltip,
+    jobId: {
+      type: Number,
+      required: true,
     },
-    props: {
-      jobs: {
-        type: Array,
-        required: true,
-      },
-      jobId: {
-        type: Number,
-        required: true,
-      },
+  },
+  methods: {
+    isJobActive(currentJobId) {
+      return this.jobId === currentJobId;
     },
-    methods: {
-      isJobActive(currentJobId) {
-        return this.jobId === currentJobId;
-      },
-      tooltipText(job) {
-        return `${_.escape(job.name)} - ${job.status.tooltip}`;
-      },
+    tooltipText(job) {
+      return `${_.escape(job.name)} - ${job.status.tooltip}`;
     },
-  };
+  },
+};
 </script>
 <template>
   <div class="js-jobs-container builds-container">
diff --git a/app/assets/javascripts/jobs/components/sidebar.vue b/app/assets/javascripts/jobs/components/sidebar.vue
index 22bcd402e72..7f0f301d72a 100644
--- a/app/assets/javascripts/jobs/components/sidebar.vue
+++ b/app/assets/javascripts/jobs/components/sidebar.vue
@@ -1,112 +1,112 @@
 <script>
-  import _ from 'underscore';
-  import { mapActions, mapState } from 'vuex';
-  import timeagoMixin from '~/vue_shared/mixins/timeago';
-  import { timeIntervalInWords } from '~/lib/utils/datetime_utility';
-  import Icon from '~/vue_shared/components/icon.vue';
-  import DetailRow from './sidebar_detail_row.vue';
-  import ArtifactsBlock from './artifacts_block.vue';
-  import TriggerBlock from './trigger_block.vue';
-  import CommitBlock from './commit_block.vue';
-  import StagesDropdown from './stages_dropdown.vue';
-  import JobsContainer from './jobs_container.vue';
+import _ from 'underscore';
+import { mapActions, mapState } from 'vuex';
+import timeagoMixin from '~/vue_shared/mixins/timeago';
+import { timeIntervalInWords } from '~/lib/utils/datetime_utility';
+import Icon from '~/vue_shared/components/icon.vue';
+import DetailRow from './sidebar_detail_row.vue';
+import ArtifactsBlock from './artifacts_block.vue';
+import TriggerBlock from './trigger_block.vue';
+import CommitBlock from './commit_block.vue';
+import StagesDropdown from './stages_dropdown.vue';
+import JobsContainer from './jobs_container.vue';
 
-  export default {
-    name: 'JobSidebar',
-    components: {
-      ArtifactsBlock,
-      CommitBlock,
-      DetailRow,
-      Icon,
-      TriggerBlock,
-      StagesDropdown,
-      JobsContainer,
+export default {
+  name: 'JobSidebar',
+  components: {
+    ArtifactsBlock,
+    CommitBlock,
+    DetailRow,
+    Icon,
+    TriggerBlock,
+    StagesDropdown,
+    JobsContainer,
+  },
+  mixins: [timeagoMixin],
+  props: {
+    runnerHelpUrl: {
+      type: String,
+      required: false,
+      default: '',
     },
-    mixins: [timeagoMixin],
-    props: {
-      runnerHelpUrl: {
-        type: String,
-        required: false,
-        default: '',
-      },
-      terminalPath: {
-        type: String,
-        required: false,
-        default: null,
-      },
+    terminalPath: {
+      type: String,
+      required: false,
+      default: null,
     },
-    computed: {
-      ...mapState(['job', 'isLoading', 'stages', 'jobs']),
-      coverage() {
-        return `${this.job.coverage}%`;
-      },
-      duration() {
-        return timeIntervalInWords(this.job.duration);
-      },
-      queued() {
-        return timeIntervalInWords(this.job.queued);
-      },
-      runnerId() {
-        return `${this.job.runner.description} (#${this.job.runner.id})`;
-      },
-      retryButtonClass() {
-        let className =
-          'js-retry-button float-right btn btn-retry d-none d-md-block d-lg-block d-xl-block';
-        className +=
-          this.job.status && this.job.recoverable ? ' btn-primary' : ' btn-inverted-secondary';
-        return className;
-      },
-      hasTimeout() {
-        return this.job.metadata != null && this.job.metadata.timeout_human_readable !== null;
-      },
-      timeout() {
-        if (this.job.metadata == null) {
-          return '';
-        }
+  },
+  computed: {
+    ...mapState(['job', 'isLoading', 'stages', 'jobs']),
+    coverage() {
+      return `${this.job.coverage}%`;
+    },
+    duration() {
+      return timeIntervalInWords(this.job.duration);
+    },
+    queued() {
+      return timeIntervalInWords(this.job.queued);
+    },
+    runnerId() {
+      return `${this.job.runner.description} (#${this.job.runner.id})`;
+    },
+    retryButtonClass() {
+      let className =
+        'js-retry-button float-right btn btn-retry d-none d-md-block d-lg-block d-xl-block';
+      className +=
+        this.job.status && this.job.recoverable ? ' btn-primary' : ' btn-inverted-secondary';
+      return className;
+    },
+    hasTimeout() {
+      return this.job.metadata != null && this.job.metadata.timeout_human_readable !== null;
+    },
+    timeout() {
+      if (this.job.metadata == null) {
+        return '';
+      }
 
-        let t = this.job.metadata.timeout_human_readable;
-        if (this.job.metadata.timeout_source !== '') {
-          t += ` (from ${this.job.metadata.timeout_source})`;
-        }
+      let t = this.job.metadata.timeout_human_readable;
+      if (this.job.metadata.timeout_source !== '') {
+        t += ` (from ${this.job.metadata.timeout_source})`;
+      }
 
-        return t;
-      },
-      renderBlock() {
-        return (
-          this.job.merge_request ||
-          this.job.duration ||
-          this.job.finished_data ||
-          this.job.erased_at ||
-          this.job.queued ||
-          this.job.runner ||
-          this.job.coverage ||
-          this.job.tags.length ||
-          this.job.cancel_path
-        );
-      },
-      hasArtifact() {
-        return !_.isEmpty(this.job.artifact);
-      },
-      hasTriggers() {
-        return !_.isEmpty(this.job.trigger);
-      },
-      hasStages() {
-        return (
-          (this.job &&
-            this.job.pipeline &&
-            this.job.pipeline.stages &&
-            this.job.pipeline.stages.length > 0) ||
-          false
-        );
-      },
-      commit() {
-        return this.job.pipeline.commit || {};
-      },
+      return t;
+    },
+    renderBlock() {
+      return (
+        this.job.merge_request ||
+        this.job.duration ||
+        this.job.finished_data ||
+        this.job.erased_at ||
+        this.job.queued ||
+        this.job.runner ||
+        this.job.coverage ||
+        this.job.tags.length ||
+        this.job.cancel_path
+      );
+    },
+    hasArtifact() {
+      return !_.isEmpty(this.job.artifact);
+    },
+    hasTriggers() {
+      return !_.isEmpty(this.job.trigger);
+    },
+    hasStages() {
+      return (
+        (this.job &&
+          this.job.pipeline &&
+          this.job.pipeline.stages &&
+          this.job.pipeline.stages.length > 0) ||
+        false
+      );
     },
-    methods: {
-      ...mapActions(['fetchJobsForStage']),
+    commit() {
+      return this.job.pipeline.commit || {};
     },
-  };
+  },
+  methods: {
+    ...mapActions(['fetchJobsForStage']),
+  },
+};
 </script>
 <template>
   <aside
diff --git a/app/assets/javascripts/jobs/components/sidebar_detail_row.vue b/app/assets/javascripts/jobs/components/sidebar_detail_row.vue
index 83560a8ff0e..aeafe98a70b 100644
--- a/app/assets/javascripts/jobs/components/sidebar_detail_row.vue
+++ b/app/assets/javascripts/jobs/components/sidebar_detail_row.vue
@@ -1,31 +1,31 @@
 <script>
-  export default {
-    name: 'SidebarDetailRow',
-    props: {
-      title: {
-        type: String,
-        required: false,
-        default: '',
-      },
-      value: {
-        type: String,
-        required: true,
-      },
-      helpUrl: {
-        type: String,
-        required: false,
-        default: '',
-      },
+export default {
+  name: 'SidebarDetailRow',
+  props: {
+    title: {
+      type: String,
+      required: false,
+      default: '',
     },
-    computed: {
-      hasTitle() {
-        return this.title.length > 0;
-      },
-      hasHelpURL() {
-        return this.helpUrl.length > 0;
-      },
+    value: {
+      type: String,
+      required: true,
     },
-  };
+    helpUrl: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  computed: {
+    hasTitle() {
+      return this.title.length > 0;
+    },
+    hasHelpURL() {
+      return this.helpUrl.length > 0;
+    },
+  },
+};
 </script>
 <template>
   <p class="build-detail-row">
diff --git a/app/assets/javascripts/jobs/components/stages_dropdown.vue b/app/assets/javascripts/jobs/components/stages_dropdown.vue
index 1c15af55a8b..34d47b3a3bb 100644
--- a/app/assets/javascripts/jobs/components/stages_dropdown.vue
+++ b/app/assets/javascripts/jobs/components/stages_dropdown.vue
@@ -1,50 +1,50 @@
 <script>
-  import _ from 'underscore';
-  import CiIcon from '~/vue_shared/components/ci_icon.vue';
-  import Icon from '~/vue_shared/components/icon.vue';
-  import { __ } from '~/locale';
+import _ from 'underscore';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
+import Icon from '~/vue_shared/components/icon.vue';
+import { __ } from '~/locale';
 
-  export default {
-    components: {
-      CiIcon,
-      Icon,
+export default {
+  components: {
+    CiIcon,
+    Icon,
+  },
+  props: {
+    pipeline: {
+      type: Object,
+      required: true,
     },
-    props: {
-      pipeline: {
-        type: Object,
-        required: true,
-      },
-      stages: {
-        type: Array,
-        required: true,
-      },
+    stages: {
+      type: Array,
+      required: true,
     },
-    data() {
-      return {
-        selectedStage: this.stages.length > 0 ? this.stages[0].name : __('More'),
-      };
+  },
+  data() {
+    return {
+      selectedStage: this.stages.length > 0 ? this.stages[0].name : __('More'),
+    };
+  },
+  computed: {
+    hasRef() {
+      return !_.isEmpty(this.pipeline.ref);
     },
-    computed: {
-      hasRef() {
-        return !_.isEmpty(this.pipeline.ref);
-      },
+  },
+  watch: {
+    // When the component is initially mounted it may start with an empty stages array.
+    // Once the prop is updated, we set the first stage as the selected one
+    stages(newVal) {
+      if (newVal.length) {
+        this.selectedStage = newVal[0].name;
+      }
     },
-    watch: {
-      // When the component is initially mounted it may start with an empty stages array.
-      // Once the prop is updated, we set the first stage as the selected one
-      stages(newVal) {
-        if (newVal.length) {
-          this.selectedStage = newVal[0].name;
-        }
-      },
+  },
+  methods: {
+    onStageClick(stage) {
+      this.$emit('requestSidebarStageDropdown', stage);
+      this.selectedStage = stage.name;
     },
-    methods: {
-      onStageClick(stage) {
-        this.$emit('requestSidebarStageDropdown', stage);
-        this.selectedStage = stage.name;
-      },
-    },
-  };
+  },
+};
 </script>
 <template>
   <div class="block-last dropdown">
diff --git a/app/assets/javascripts/jobs/components/trigger_block.vue b/app/assets/javascripts/jobs/components/trigger_block.vue
index d7b3c4fcb5b..41de4a6e85a 100644
--- a/app/assets/javascripts/jobs/components/trigger_block.vue
+++ b/app/assets/javascripts/jobs/components/trigger_block.vue
@@ -1,27 +1,27 @@
 <script>
-  export default {
-    props: {
-      trigger: {
-        type: Object,
-        required: true,
-      },
+export default {
+  props: {
+    trigger: {
+      type: Object,
+      required: true,
     },
-    data() {
-      return {
-        areVariablesVisible: false,
-      };
+  },
+  data() {
+    return {
+      areVariablesVisible: false,
+    };
+  },
+  computed: {
+    hasVariables() {
+      return this.trigger.variables && this.trigger.variables.length > 0;
     },
-    computed: {
-      hasVariables() {
-        return this.trigger.variables && this.trigger.variables.length > 0;
-      },
+  },
+  methods: {
+    revealVariables() {
+      this.areVariablesVisible = true;
     },
-    methods: {
-      revealVariables() {
-        this.areVariablesVisible = true;
-      },
-    },
-  };
+  },
+};
 </script>
 
 <template>
diff --git a/app/assets/javascripts/jobs/store/index.js b/app/assets/javascripts/jobs/store/index.js
index 96e38f9a2fa..bba01426af7 100644
--- a/app/assets/javascripts/jobs/store/index.js
+++ b/app/assets/javascripts/jobs/store/index.js
@@ -7,9 +7,10 @@ import mutations from './mutations';
 
 Vue.use(Vuex);
 
-export default () => new Vuex.Store({
-  actions,
-  mutations,
-  getters,
-  state: state(),
-});
+export default () =>
+  new Vuex.Store({
+    actions,
+    mutations,
+    getters,
+    state: state(),
+  });
-- 
cgit v1.2.1


From f7a3e8ff53449bc4ad4a19b3df5a6d19f391b180 Mon Sep 17 00:00:00 2001
From: Mike Greiling <mike@pixelcog.com>
Date: Wed, 10 Oct 2018 01:25:43 -0500
Subject: Prettify lib/utils modules

---
 app/assets/javascripts/lib/utils/ajax_cache.js     |  7 +-
 app/assets/javascripts/lib/utils/axios_utils.js    | 23 ++++---
 .../javascripts/lib/utils/bootstrap_linked_tabs.js | 10 ++-
 app/assets/javascripts/lib/utils/cache.js          |  2 +-
 app/assets/javascripts/lib/utils/datefix.js        |  7 +-
 app/assets/javascripts/lib/utils/notify.js         |  4 +-
 app/assets/javascripts/lib/utils/pretty_time.js    | 20 +++---
 app/assets/javascripts/lib/utils/regexp.js         |  3 +-
 app/assets/javascripts/lib/utils/simple_poll.js    |  2 +-
 app/assets/javascripts/lib/utils/sticky.js         | 24 +++++--
 app/assets/javascripts/lib/utils/text_markdown.js  | 74 ++++++++++++++--------
 app/assets/javascripts/lib/utils/text_utility.js   | 17 ++---
 app/assets/javascripts/lib/utils/tick_formats.js   |  2 +-
 app/assets/javascripts/lib/utils/users_cache.js    | 25 ++++----
 14 files changed, 131 insertions(+), 89 deletions(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/lib/utils/ajax_cache.js b/app/assets/javascripts/lib/utils/ajax_cache.js
index 616d8952ada..2d976dbdbbe 100644
--- a/app/assets/javascripts/lib/utils/ajax_cache.js
+++ b/app/assets/javascripts/lib/utils/ajax_cache.js
@@ -4,7 +4,7 @@ import Cache from './cache';
 class AjaxCache extends Cache {
   constructor() {
     super();
-    this.pendingRequests = { };
+    this.pendingRequests = {};
   }
 
   override(endpoint, data) {
@@ -19,12 +19,13 @@ class AjaxCache extends Cache {
     let pendingRequest = this.pendingRequests[endpoint];
 
     if (!pendingRequest) {
-      pendingRequest = axios.get(endpoint)
+      pendingRequest = axios
+        .get(endpoint)
         .then(({ data }) => {
           this.internalStorage[endpoint] = data;
           delete this.pendingRequests[endpoint];
         })
-        .catch((e) => {
+        .catch(e => {
           const error = new Error(`${endpoint}: ${e.message}`);
           error.textStatus = e.message;
 
diff --git a/app/assets/javascripts/lib/utils/axios_utils.js b/app/assets/javascripts/lib/utils/axios_utils.js
index 792871e2ecf..69159e2d741 100644
--- a/app/assets/javascripts/lib/utils/axios_utils.js
+++ b/app/assets/javascripts/lib/utils/axios_utils.js
@@ -7,7 +7,7 @@ axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
 
 // Maintain a global counter for active requests
 // see: spec/support/wait_for_requests.rb
-axios.interceptors.request.use((config) => {
+axios.interceptors.request.use(config => {
   window.activeVueResources = window.activeVueResources || 0;
   window.activeVueResources += 1;
 
@@ -15,15 +15,18 @@ axios.interceptors.request.use((config) => {
 });
 
 // Remove the global counter
-axios.interceptors.response.use((config) => {
-  window.activeVueResources -= 1;
-
-  return config;
-}, (e) => {
-  window.activeVueResources -= 1;
-
-  return Promise.reject(e);
-});
+axios.interceptors.response.use(
+  config => {
+    window.activeVueResources -= 1;
+
+    return config;
+  },
+  e => {
+    window.activeVueResources -= 1;
+
+    return Promise.reject(e);
+  },
+);
 
 export default axios;
 
diff --git a/app/assets/javascripts/lib/utils/bootstrap_linked_tabs.js b/app/assets/javascripts/lib/utils/bootstrap_linked_tabs.js
index c28ed04f94f..a24c71aeab1 100644
--- a/app/assets/javascripts/lib/utils/bootstrap_linked_tabs.js
+++ b/app/assets/javascripts/lib/utils/bootstrap_linked_tabs.js
@@ -93,9 +93,13 @@ export default class LinkedTabs {
 
     const newState = `${copySource}${this.currentLocation.search}${this.currentLocation.hash}`;
 
-    window.history.replaceState({
-      url: newState,
-    }, document.title, newState);
+    window.history.replaceState(
+      {
+        url: newState,
+      },
+      document.title,
+      newState,
+    );
     return newState;
   }
 
diff --git a/app/assets/javascripts/lib/utils/cache.js b/app/assets/javascripts/lib/utils/cache.js
index 596bd1e388a..45048145139 100644
--- a/app/assets/javascripts/lib/utils/cache.js
+++ b/app/assets/javascripts/lib/utils/cache.js
@@ -1,6 +1,6 @@
 export default class Cache {
   constructor() {
-    this.internalStorage = { };
+    this.internalStorage = {};
   }
 
   get(key) {
diff --git a/app/assets/javascripts/lib/utils/datefix.js b/app/assets/javascripts/lib/utils/datefix.js
index e98c9068367..19e4085dbbb 100644
--- a/app/assets/javascripts/lib/utils/datefix.js
+++ b/app/assets/javascripts/lib/utils/datefix.js
@@ -1,12 +1,11 @@
-
-export const pad = (val, len = 2) => (`0${val}`).slice(-len);
+export const pad = (val, len = 2) => `0${val}`.slice(-len);
 
 /**
  * Formats dates in Pickaday
  * @param {String} dateString Date in yyyy-mm-dd format
  * @return {Date} UTC format
  */
-export const parsePikadayDate = (dateString) => {
+export const parsePikadayDate = dateString => {
   const parts = dateString.split('-');
   const year = parseInt(parts[0], 10);
   const month = parseInt(parts[1] - 1, 10);
@@ -20,7 +19,7 @@ export const parsePikadayDate = (dateString) => {
  * @param {Date} date UTC format
  * @return {String} Date formated in yyyy-mm-dd
  */
-export const pikadayToString = (date) => {
+export const pikadayToString = date => {
   const day = pad(date.getDate());
   const month = pad(date.getMonth() + 1);
   const year = date.getFullYear();
diff --git a/app/assets/javascripts/lib/utils/notify.js b/app/assets/javascripts/lib/utils/notify.js
index f4eb652a41a..d93873e0214 100644
--- a/app/assets/javascripts/lib/utils/notify.js
+++ b/app/assets/javascripts/lib/utils/notify.js
@@ -8,7 +8,7 @@ function notificationGranted(message, opts, onclick) {
     return notification.close();
   }, 8000);
 
-  return notification.onclick = onclick || notification.close;
+  return (notification.onclick = onclick || notification.close);
 }
 
 function notifyPermissions() {
@@ -21,7 +21,7 @@ function notifyMe(message, body, icon, onclick) {
   var opts;
   opts = {
     body: body,
-    icon: icon
+    icon: icon,
   };
   // Let's check if the browser supports notifications
   if (!('Notification' in window)) {
diff --git a/app/assets/javascripts/lib/utils/pretty_time.js b/app/assets/javascripts/lib/utils/pretty_time.js
index b1ffd797f7e..d92b8a7179f 100644
--- a/app/assets/javascripts/lib/utils/pretty_time.js
+++ b/app/assets/javascripts/lib/utils/pretty_time.js
@@ -27,10 +27,10 @@ export function parseSeconds(seconds, { daysPerWeek = 5, hoursPerDay = 8 } = {})
 
   let unorderedMinutes = Math.abs(seconds / MINUTES_PER_HOUR);
 
-  return _.mapObject(timePeriodConstraints, (minutesPerPeriod) => {
+  return _.mapObject(timePeriodConstraints, minutesPerPeriod => {
     const periodCount = Math.floor(unorderedMinutes / minutesPerPeriod);
 
-    unorderedMinutes -= (periodCount * minutesPerPeriod);
+    unorderedMinutes -= periodCount * minutesPerPeriod;
 
     return periodCount;
   });
@@ -42,10 +42,14 @@ export function parseSeconds(seconds, { daysPerWeek = 5, hoursPerDay = 8 } = {})
 */
 
 export function stringifyTime(timeObject) {
-  const reducedTime = _.reduce(timeObject, (memo, unitValue, unitName) => {
-    const isNonZero = !!unitValue;
-    return isNonZero ? `${memo} ${unitValue}${unitName.charAt(0)}` : memo;
-  }, '').trim();
+  const reducedTime = _.reduce(
+    timeObject,
+    (memo, unitValue, unitName) => {
+      const isNonZero = !!unitValue;
+      return isNonZero ? `${memo} ${unitValue}${unitName.charAt(0)}` : memo;
+    },
+    '',
+  ).trim();
   return reducedTime.length ? reducedTime : '0m';
 }
 
@@ -55,7 +59,5 @@ export function stringifyTime(timeObject) {
 */
 
 export function abbreviateTime(timeStr) {
-  return timeStr.split(' ')
-    .filter(unitStr => unitStr.charAt(0) !== '0')[0];
+  return timeStr.split(' ').filter(unitStr => unitStr.charAt(0) !== '0')[0];
 }
-
diff --git a/app/assets/javascripts/lib/utils/regexp.js b/app/assets/javascripts/lib/utils/regexp.js
index baa0b51d59b..25b60dcd14a 100644
--- a/app/assets/javascripts/lib/utils/regexp.js
+++ b/app/assets/javascripts/lib/utils/regexp.js
@@ -5,6 +5,7 @@
 
 // Inspired by https://github.com/mishoo/UglifyJS/blob/2bc1d02363db3798d5df41fb5059a19edca9b7eb/lib/parse-js.js#L203
 // Unicode 6.1
-const unicodeLetters = '\\u0041-\\u005A\\u0061-\\u007A\\u00AA\\u00B5\\u00BA\\u00C0-\\u00D6\\u00D8-\\u00F6\\u00F8-\\u02C1\\u02C6-\\u02D1\\u02E0-\\u02E4\\u02EC\\u02EE\\u0370-\\u0374\\u0376\\u0377\\u037A-\\u037D\\u0386\\u0388-\\u038A\\u038C\\u038E-\\u03A1\\u03A3-\\u03F5\\u03F7-\\u0481\\u048A-\\u0527\\u0531-\\u0556\\u0559\\u0561-\\u0587\\u05D0-\\u05EA\\u05F0-\\u05F2\\u0620-\\u064A\\u066E\\u066F\\u0671-\\u06D3\\u06D5\\u06E5\\u06E6\\u06EE\\u06EF\\u06FA-\\u06FC\\u06FF\\u0710\\u0712-\\u072F\\u074D-\\u07A5\\u07B1\\u07CA-\\u07EA\\u07F4\\u07F5\\u07FA\\u0800-\\u0815\\u081A\\u0824\\u0828\\u0840-\\u0858\\u08A0\\u08A2-\\u08AC\\u0904-\\u0939\\u093D\\u0950\\u0958-\\u0961\\u0971-\\u0977\\u0979-\\u097F\\u0985-\\u098C\\u098F\\u0990\\u0993-\\u09A8\\u09AA-\\u09B0\\u09B2\\u09B6-\\u09B9\\u09BD\\u09CE\\u09DC\\u09DD\\u09DF-\\u09E1\\u09F0\\u09F1\\u0A05-\\u0A0A\\u0A0F\\u0A10\\u0A13-\\u0A28\\u0A2A-\\u0A30\\u0A32\\u0A33\\u0A35\\u0A36\\u0A38\\u0A39\\u0A59-\\u0A5C\\u0A5E\\u0A72-\\u0A74\\u0A85-\\u0A8D\\u0A8F-\\u0A91\\u0A93-\\u0AA8\\u0AAA-\\u0AB0\\u0AB2\\u0AB3\\u0AB5-\\u0AB9\\u0ABD\\u0AD0\\u0AE0\\u0AE1\\u0B05-\\u0B0C\\u0B0F\\u0B10\\u0B13-\\u0B28\\u0B2A-\\u0B30\\u0B32\\u0B33\\u0B35-\\u0B39\\u0B3D\\u0B5C\\u0B5D\\u0B5F-\\u0B61\\u0B71\\u0B83\\u0B85-\\u0B8A\\u0B8E-\\u0B90\\u0B92-\\u0B95\\u0B99\\u0B9A\\u0B9C\\u0B9E\\u0B9F\\u0BA3\\u0BA4\\u0BA8-\\u0BAA\\u0BAE-\\u0BB9\\u0BD0\\u0C05-\\u0C0C\\u0C0E-\\u0C10\\u0C12-\\u0C28\\u0C2A-\\u0C33\\u0C35-\\u0C39\\u0C3D\\u0C58\\u0C59\\u0C60\\u0C61\\u0C85-\\u0C8C\\u0C8E-\\u0C90\\u0C92-\\u0CA8\\u0CAA-\\u0CB3\\u0CB5-\\u0CB9\\u0CBD\\u0CDE\\u0CE0\\u0CE1\\u0CF1\\u0CF2\\u0D05-\\u0D0C\\u0D0E-\\u0D10\\u0D12-\\u0D3A\\u0D3D\\u0D4E\\u0D60\\u0D61\\u0D7A-\\u0D7F\\u0D85-\\u0D96\\u0D9A-\\u0DB1\\u0DB3-\\u0DBB\\u0DBD\\u0DC0-\\u0DC6\\u0E01-\\u0E30\\u0E32\\u0E33\\u0E40-\\u0E46\\u0E81\\u0E82\\u0E84\\u0E87\\u0E88\\u0E8A\\u0E8D\\u0E94-\\u0E97\\u0E99-\\u0E9F\\u0EA1-\\u0EA3\\u0EA5\\u0EA7\\u0EAA\\u0EAB\\u0EAD-\\u0EB0\\u0EB2\\u0EB3\\u0EBD\\u0EC0-\\u0EC4\\u0EC6\\u0EDC-\\u0EDF\\u0F00\\u0F40-\\u0F47\\u0F49-\\u0F6C\\u0F88-\\u0F8C\\u1000-\\u102A\\u103F\\u1050-\\u1055\\u105A-\\u105D\\u1061\\u1065\\u1066\\u106E-\\u1070\\u1075-\\u1081\\u108E\\u10A0-\\u10C5\\u10C7\\u10CD\\u10D0-\\u10FA\\u10FC-\\u1248\\u124A-\\u124D\\u1250-\\u1256\\u1258\\u125A-\\u125D\\u1260-\\u1288\\u128A-\\u128D\\u1290-\\u12B0\\u12B2-\\u12B5\\u12B8-\\u12BE\\u12C0\\u12C2-\\u12C5\\u12C8-\\u12D6\\u12D8-\\u1310\\u1312-\\u1315\\u1318-\\u135A\\u1380-\\u138F\\u13A0-\\u13F4\\u1401-\\u166C\\u166F-\\u167F\\u1681-\\u169A\\u16A0-\\u16EA\\u16EE-\\u16F0\\u1700-\\u170C\\u170E-\\u1711\\u1720-\\u1731\\u1740-\\u1751\\u1760-\\u176C\\u176E-\\u1770\\u1780-\\u17B3\\u17D7\\u17DC\\u1820-\\u1877\\u1880-\\u18A8\\u18AA\\u18B0-\\u18F5\\u1900-\\u191C\\u1950-\\u196D\\u1970-\\u1974\\u1980-\\u19AB\\u19C1-\\u19C7\\u1A00-\\u1A16\\u1A20-\\u1A54\\u1AA7\\u1B05-\\u1B33\\u1B45-\\u1B4B\\u1B83-\\u1BA0\\u1BAE\\u1BAF\\u1BBA-\\u1BE5\\u1C00-\\u1C23\\u1C4D-\\u1C4F\\u1C5A-\\u1C7D\\u1CE9-\\u1CEC\\u1CEE-\\u1CF1\\u1CF5\\u1CF6\\u1D00-\\u1DBF\\u1E00-\\u1F15\\u1F18-\\u1F1D\\u1F20-\\u1F45\\u1F48-\\u1F4D\\u1F50-\\u1F57\\u1F59\\u1F5B\\u1F5D\\u1F5F-\\u1F7D\\u1F80-\\u1FB4\\u1FB6-\\u1FBC\\u1FBE\\u1FC2-\\u1FC4\\u1FC6-\\u1FCC\\u1FD0-\\u1FD3\\u1FD6-\\u1FDB\\u1FE0-\\u1FEC\\u1FF2-\\u1FF4\\u1FF6-\\u1FFC\\u2071\\u207F\\u2090-\\u209C\\u2102\\u2107\\u210A-\\u2113\\u2115\\u2119-\\u211D\\u2124\\u2126\\u2128\\u212A-\\u212D\\u212F-\\u2139\\u213C-\\u213F\\u2145-\\u2149\\u214E\\u2160-\\u2188\\u2C00-\\u2C2E\\u2C30-\\u2C5E\\u2C60-\\u2CE4\\u2CEB-\\u2CEE\\u2CF2\\u2CF3\\u2D00-\\u2D25\\u2D27\\u2D2D\\u2D30-\\u2D67\\u2D6F\\u2D80-\\u2D96\\u2DA0-\\u2DA6\\u2DA8-\\u2DAE\\u2DB0-\\u2DB6\\u2DB8-\\u2DBE\\u2DC0-\\u2DC6\\u2DC8-\\u2DCE\\u2DD0-\\u2DD6\\u2DD8-\\u2DDE\\u2E2F\\u3005-\\u3007\\u3021-\\u3029\\u3031-\\u3035\\u3038-\\u303C\\u3041-\\u3096\\u309D-\\u309F\\u30A1-\\u30FA\\u30FC-\\u30FF\\u3105-\\u312D\\u3131-\\u318E\\u31A0-\\u31BA\\u31F0-\\u31FF\\u3400-\\u4DB5\\u4E00-\\u9FCC\\uA000-\\uA48C\\uA4D0-\\uA4FD\\uA500-\\uA60C\\uA610-\\uA61F\\uA62A\\uA62B\\uA640-\\uA66E\\uA67F-\\uA697\\uA6A0-\\uA6EF\\uA717-\\uA71F\\uA722-\\uA788\\uA78B-\\uA78E\\uA790-\\uA793\\uA7A0-\\uA7AA\\uA7F8-\\uA801\\uA803-\\uA805\\uA807-\\uA80A\\uA80C-\\uA822\\uA840-\\uA873\\uA882-\\uA8B3\\uA8F2-\\uA8F7\\uA8FB\\uA90A-\\uA925\\uA930-\\uA946\\uA960-\\uA97C\\uA984-\\uA9B2\\uA9CF\\uAA00-\\uAA28\\uAA40-\\uAA42\\uAA44-\\uAA4B\\uAA60-\\uAA76\\uAA7A\\uAA80-\\uAAAF\\uAAB1\\uAAB5\\uAAB6\\uAAB9-\\uAABD\\uAAC0\\uAAC2\\uAADB-\\uAADD\\uAAE0-\\uAAEA\\uAAF2-\\uAAF4\\uAB01-\\uAB06\\uAB09-\\uAB0E\\uAB11-\\uAB16\\uAB20-\\uAB26\\uAB28-\\uAB2E\\uABC0-\\uABE2\\uAC00-\\uD7A3\\uD7B0-\\uD7C6\\uD7CB-\\uD7FB\\uF900-\\uFA6D\\uFA70-\\uFAD9\\uFB00-\\uFB06\\uFB13-\\uFB17\\uFB1D\\uFB1F-\\uFB28\\uFB2A-\\uFB36\\uFB38-\\uFB3C\\uFB3E\\uFB40\\uFB41\\uFB43\\uFB44\\uFB46-\\uFBB1\\uFBD3-\\uFD3D\\uFD50-\\uFD8F\\uFD92-\\uFDC7\\uFDF0-\\uFDFB\\uFE70-\\uFE74\\uFE76-\\uFEFC\\uFF21-\\uFF3A\\uFF41-\\uFF5A\\uFF66-\\uFFBE\\uFFC2-\\uFFC7\\uFFCA-\\uFFCF\\uFFD2-\\uFFD7\\uFFDA-\\uFFDC';
+const unicodeLetters =
+  '\\u0041-\\u005A\\u0061-\\u007A\\u00AA\\u00B5\\u00BA\\u00C0-\\u00D6\\u00D8-\\u00F6\\u00F8-\\u02C1\\u02C6-\\u02D1\\u02E0-\\u02E4\\u02EC\\u02EE\\u0370-\\u0374\\u0376\\u0377\\u037A-\\u037D\\u0386\\u0388-\\u038A\\u038C\\u038E-\\u03A1\\u03A3-\\u03F5\\u03F7-\\u0481\\u048A-\\u0527\\u0531-\\u0556\\u0559\\u0561-\\u0587\\u05D0-\\u05EA\\u05F0-\\u05F2\\u0620-\\u064A\\u066E\\u066F\\u0671-\\u06D3\\u06D5\\u06E5\\u06E6\\u06EE\\u06EF\\u06FA-\\u06FC\\u06FF\\u0710\\u0712-\\u072F\\u074D-\\u07A5\\u07B1\\u07CA-\\u07EA\\u07F4\\u07F5\\u07FA\\u0800-\\u0815\\u081A\\u0824\\u0828\\u0840-\\u0858\\u08A0\\u08A2-\\u08AC\\u0904-\\u0939\\u093D\\u0950\\u0958-\\u0961\\u0971-\\u0977\\u0979-\\u097F\\u0985-\\u098C\\u098F\\u0990\\u0993-\\u09A8\\u09AA-\\u09B0\\u09B2\\u09B6-\\u09B9\\u09BD\\u09CE\\u09DC\\u09DD\\u09DF-\\u09E1\\u09F0\\u09F1\\u0A05-\\u0A0A\\u0A0F\\u0A10\\u0A13-\\u0A28\\u0A2A-\\u0A30\\u0A32\\u0A33\\u0A35\\u0A36\\u0A38\\u0A39\\u0A59-\\u0A5C\\u0A5E\\u0A72-\\u0A74\\u0A85-\\u0A8D\\u0A8F-\\u0A91\\u0A93-\\u0AA8\\u0AAA-\\u0AB0\\u0AB2\\u0AB3\\u0AB5-\\u0AB9\\u0ABD\\u0AD0\\u0AE0\\u0AE1\\u0B05-\\u0B0C\\u0B0F\\u0B10\\u0B13-\\u0B28\\u0B2A-\\u0B30\\u0B32\\u0B33\\u0B35-\\u0B39\\u0B3D\\u0B5C\\u0B5D\\u0B5F-\\u0B61\\u0B71\\u0B83\\u0B85-\\u0B8A\\u0B8E-\\u0B90\\u0B92-\\u0B95\\u0B99\\u0B9A\\u0B9C\\u0B9E\\u0B9F\\u0BA3\\u0BA4\\u0BA8-\\u0BAA\\u0BAE-\\u0BB9\\u0BD0\\u0C05-\\u0C0C\\u0C0E-\\u0C10\\u0C12-\\u0C28\\u0C2A-\\u0C33\\u0C35-\\u0C39\\u0C3D\\u0C58\\u0C59\\u0C60\\u0C61\\u0C85-\\u0C8C\\u0C8E-\\u0C90\\u0C92-\\u0CA8\\u0CAA-\\u0CB3\\u0CB5-\\u0CB9\\u0CBD\\u0CDE\\u0CE0\\u0CE1\\u0CF1\\u0CF2\\u0D05-\\u0D0C\\u0D0E-\\u0D10\\u0D12-\\u0D3A\\u0D3D\\u0D4E\\u0D60\\u0D61\\u0D7A-\\u0D7F\\u0D85-\\u0D96\\u0D9A-\\u0DB1\\u0DB3-\\u0DBB\\u0DBD\\u0DC0-\\u0DC6\\u0E01-\\u0E30\\u0E32\\u0E33\\u0E40-\\u0E46\\u0E81\\u0E82\\u0E84\\u0E87\\u0E88\\u0E8A\\u0E8D\\u0E94-\\u0E97\\u0E99-\\u0E9F\\u0EA1-\\u0EA3\\u0EA5\\u0EA7\\u0EAA\\u0EAB\\u0EAD-\\u0EB0\\u0EB2\\u0EB3\\u0EBD\\u0EC0-\\u0EC4\\u0EC6\\u0EDC-\\u0EDF\\u0F00\\u0F40-\\u0F47\\u0F49-\\u0F6C\\u0F88-\\u0F8C\\u1000-\\u102A\\u103F\\u1050-\\u1055\\u105A-\\u105D\\u1061\\u1065\\u1066\\u106E-\\u1070\\u1075-\\u1081\\u108E\\u10A0-\\u10C5\\u10C7\\u10CD\\u10D0-\\u10FA\\u10FC-\\u1248\\u124A-\\u124D\\u1250-\\u1256\\u1258\\u125A-\\u125D\\u1260-\\u1288\\u128A-\\u128D\\u1290-\\u12B0\\u12B2-\\u12B5\\u12B8-\\u12BE\\u12C0\\u12C2-\\u12C5\\u12C8-\\u12D6\\u12D8-\\u1310\\u1312-\\u1315\\u1318-\\u135A\\u1380-\\u138F\\u13A0-\\u13F4\\u1401-\\u166C\\u166F-\\u167F\\u1681-\\u169A\\u16A0-\\u16EA\\u16EE-\\u16F0\\u1700-\\u170C\\u170E-\\u1711\\u1720-\\u1731\\u1740-\\u1751\\u1760-\\u176C\\u176E-\\u1770\\u1780-\\u17B3\\u17D7\\u17DC\\u1820-\\u1877\\u1880-\\u18A8\\u18AA\\u18B0-\\u18F5\\u1900-\\u191C\\u1950-\\u196D\\u1970-\\u1974\\u1980-\\u19AB\\u19C1-\\u19C7\\u1A00-\\u1A16\\u1A20-\\u1A54\\u1AA7\\u1B05-\\u1B33\\u1B45-\\u1B4B\\u1B83-\\u1BA0\\u1BAE\\u1BAF\\u1BBA-\\u1BE5\\u1C00-\\u1C23\\u1C4D-\\u1C4F\\u1C5A-\\u1C7D\\u1CE9-\\u1CEC\\u1CEE-\\u1CF1\\u1CF5\\u1CF6\\u1D00-\\u1DBF\\u1E00-\\u1F15\\u1F18-\\u1F1D\\u1F20-\\u1F45\\u1F48-\\u1F4D\\u1F50-\\u1F57\\u1F59\\u1F5B\\u1F5D\\u1F5F-\\u1F7D\\u1F80-\\u1FB4\\u1FB6-\\u1FBC\\u1FBE\\u1FC2-\\u1FC4\\u1FC6-\\u1FCC\\u1FD0-\\u1FD3\\u1FD6-\\u1FDB\\u1FE0-\\u1FEC\\u1FF2-\\u1FF4\\u1FF6-\\u1FFC\\u2071\\u207F\\u2090-\\u209C\\u2102\\u2107\\u210A-\\u2113\\u2115\\u2119-\\u211D\\u2124\\u2126\\u2128\\u212A-\\u212D\\u212F-\\u2139\\u213C-\\u213F\\u2145-\\u2149\\u214E\\u2160-\\u2188\\u2C00-\\u2C2E\\u2C30-\\u2C5E\\u2C60-\\u2CE4\\u2CEB-\\u2CEE\\u2CF2\\u2CF3\\u2D00-\\u2D25\\u2D27\\u2D2D\\u2D30-\\u2D67\\u2D6F\\u2D80-\\u2D96\\u2DA0-\\u2DA6\\u2DA8-\\u2DAE\\u2DB0-\\u2DB6\\u2DB8-\\u2DBE\\u2DC0-\\u2DC6\\u2DC8-\\u2DCE\\u2DD0-\\u2DD6\\u2DD8-\\u2DDE\\u2E2F\\u3005-\\u3007\\u3021-\\u3029\\u3031-\\u3035\\u3038-\\u303C\\u3041-\\u3096\\u309D-\\u309F\\u30A1-\\u30FA\\u30FC-\\u30FF\\u3105-\\u312D\\u3131-\\u318E\\u31A0-\\u31BA\\u31F0-\\u31FF\\u3400-\\u4DB5\\u4E00-\\u9FCC\\uA000-\\uA48C\\uA4D0-\\uA4FD\\uA500-\\uA60C\\uA610-\\uA61F\\uA62A\\uA62B\\uA640-\\uA66E\\uA67F-\\uA697\\uA6A0-\\uA6EF\\uA717-\\uA71F\\uA722-\\uA788\\uA78B-\\uA78E\\uA790-\\uA793\\uA7A0-\\uA7AA\\uA7F8-\\uA801\\uA803-\\uA805\\uA807-\\uA80A\\uA80C-\\uA822\\uA840-\\uA873\\uA882-\\uA8B3\\uA8F2-\\uA8F7\\uA8FB\\uA90A-\\uA925\\uA930-\\uA946\\uA960-\\uA97C\\uA984-\\uA9B2\\uA9CF\\uAA00-\\uAA28\\uAA40-\\uAA42\\uAA44-\\uAA4B\\uAA60-\\uAA76\\uAA7A\\uAA80-\\uAAAF\\uAAB1\\uAAB5\\uAAB6\\uAAB9-\\uAABD\\uAAC0\\uAAC2\\uAADB-\\uAADD\\uAAE0-\\uAAEA\\uAAF2-\\uAAF4\\uAB01-\\uAB06\\uAB09-\\uAB0E\\uAB11-\\uAB16\\uAB20-\\uAB26\\uAB28-\\uAB2E\\uABC0-\\uABE2\\uAC00-\\uD7A3\\uD7B0-\\uD7C6\\uD7CB-\\uD7FB\\uF900-\\uFA6D\\uFA70-\\uFAD9\\uFB00-\\uFB06\\uFB13-\\uFB17\\uFB1D\\uFB1F-\\uFB28\\uFB2A-\\uFB36\\uFB38-\\uFB3C\\uFB3E\\uFB40\\uFB41\\uFB43\\uFB44\\uFB46-\\uFBB1\\uFBD3-\\uFD3D\\uFD50-\\uFD8F\\uFD92-\\uFDC7\\uFDF0-\\uFDFB\\uFE70-\\uFE74\\uFE76-\\uFEFC\\uFF21-\\uFF3A\\uFF41-\\uFF5A\\uFF66-\\uFFBE\\uFFC2-\\uFFC7\\uFFCA-\\uFFCF\\uFFD2-\\uFFD7\\uFFDA-\\uFFDC';
 
 export default { unicodeLetters };
diff --git a/app/assets/javascripts/lib/utils/simple_poll.js b/app/assets/javascripts/lib/utils/simple_poll.js
index 25ca98afbe7..473f179ad86 100644
--- a/app/assets/javascripts/lib/utils/simple_poll.js
+++ b/app/assets/javascripts/lib/utils/simple_poll.js
@@ -2,7 +2,7 @@ export default (fn, interval = 2000, timeout = 60000) => {
   const startTime = Date.now();
 
   return new Promise((resolve, reject) => {
-    const stop = arg => ((arg instanceof Error) ? reject(arg) : resolve(arg));
+    const stop = arg => (arg instanceof Error ? reject(arg) : resolve(arg));
     const next = () => {
       if (Date.now() - startTime < timeout) {
         setTimeout(fn.bind(null, next, stop), interval);
diff --git a/app/assets/javascripts/lib/utils/sticky.js b/app/assets/javascripts/lib/utils/sticky.js
index 15a4dd62012..f3244301350 100644
--- a/app/assets/javascripts/lib/utils/sticky.js
+++ b/app/assets/javascripts/lib/utils/sticky.js
@@ -24,7 +24,11 @@ export const isSticky = (el, scrollY, stickyTop, insertPlaceholder) => {
   } else if (top > stickyTop && el.classList.contains('is-stuck')) {
     el.classList.remove('is-stuck');
 
-    if (insertPlaceholder && el.nextElementSibling && el.nextElementSibling.classList.contains('sticky-placeholder')) {
+    if (
+      insertPlaceholder &&
+      el.nextElementSibling &&
+      el.nextElementSibling.classList.contains('sticky-placeholder')
+    ) {
       el.nextElementSibling.remove();
     }
   }
@@ -42,11 +46,19 @@ export const isSticky = (el, scrollY, stickyTop, insertPlaceholder) => {
 export const stickyMonitor = (el, stickyTop, insertPlaceholder = true) => {
   if (!el) return;
 
-  if (typeof CSS === 'undefined' || !(CSS.supports('(position: -webkit-sticky) or (position: sticky)'))) return;
+  if (
+    typeof CSS === 'undefined' ||
+    !CSS.supports('(position: -webkit-sticky) or (position: sticky)')
+  )
+    return;
 
-  document.addEventListener('scroll', () => isSticky(el, window.scrollY, stickyTop, insertPlaceholder), {
-    passive: true,
-  });
+  document.addEventListener(
+    'scroll',
+    () => isSticky(el, window.scrollY, stickyTop, insertPlaceholder),
+    {
+      passive: true,
+    },
+  );
 };
 
 /**
@@ -55,6 +67,6 @@ export const stickyMonitor = (el, stickyTop, insertPlaceholder = true) => {
  * - If the current environment supports `position: sticky`, do nothing.
  * - Can receive an iterable element list (NodeList, jQuery collection, etc.) or single HTMLElement.
  */
-export const polyfillSticky = (el) => {
+export const polyfillSticky = el => {
   StickyFill.add(el);
 };
diff --git a/app/assets/javascripts/lib/utils/text_markdown.js b/app/assets/javascripts/lib/utils/text_markdown.js
index df20785b178..e26a6b986be 100644
--- a/app/assets/javascripts/lib/utils/text_markdown.js
+++ b/app/assets/javascripts/lib/utils/text_markdown.js
@@ -8,12 +8,18 @@ function selectedText(text, textarea) {
 
 function lineBefore(text, textarea) {
   var split;
-  split = text.substring(0, textarea.selectionStart).trim().split('\n');
+  split = text
+    .substring(0, textarea.selectionStart)
+    .trim()
+    .split('\n');
   return split[split.length - 1];
 }
 
 function lineAfter(text, textarea) {
-  return text.substring(textarea.selectionEnd).trim().split('\n')[0];
+  return text
+    .substring(textarea.selectionEnd)
+    .trim()
+    .split('\n')[0];
 }
 
 function blockTagText(text, textArea, blockTag, selected) {
@@ -27,7 +33,7 @@ function blockTagText(text, textArea, blockTag, selected) {
     }
     return selected;
   } else {
-    return blockTag + "\n" + selected + "\n" + blockTag;
+    return blockTag + '\n' + selected + '\n' + blockTag;
   }
 }
 
@@ -58,7 +64,14 @@ function moveCursor({ textArea, tag, wrapped, removedLastNewLine, select }) {
 }
 
 export function insertMarkdownText({ textArea, text, tag, blockTag, selected, wrap, select }) {
-  var textToInsert, inserted, selectedSplit, startChar, removedLastNewLine, removedFirstNewLine, currentLineEmpty, lastNewLine;
+  var textToInsert,
+    inserted,
+    selectedSplit,
+    startChar,
+    removedLastNewLine,
+    removedFirstNewLine,
+    currentLineEmpty,
+    lastNewLine;
   removedLastNewLine = false;
   removedFirstNewLine = false;
   currentLineEmpty = false;
@@ -94,21 +107,23 @@ export function insertMarkdownText({ textArea, text, tag, blockTag, selected, wr
     if (blockTag != null && blockTag !== '') {
       textToInsert = blockTagText(text, textArea, blockTag, selected);
     } else {
-      textToInsert = selectedSplit.map(function(val) {
-        if (tag.indexOf(textPlaceholder) > -1) {
-          return tag.replace(textPlaceholder, val);
-        }
-        if (val.indexOf(tag) === 0) {
-          return "" + (val.replace(tag, ''));
-        } else {
-          return "" + tag + val;
-        }
-      }).join('\n');
+      textToInsert = selectedSplit
+        .map(function(val) {
+          if (tag.indexOf(textPlaceholder) > -1) {
+            return tag.replace(textPlaceholder, val);
+          }
+          if (val.indexOf(tag) === 0) {
+            return '' + val.replace(tag, '');
+          } else {
+            return '' + tag + val;
+          }
+        })
+        .join('\n');
     }
   } else if (tag.indexOf(textPlaceholder) > -1) {
     textToInsert = tag.replace(textPlaceholder, selected);
   } else {
-    textToInsert = "" + startChar + tag + selected + (wrap ? tag : ' ');
+    textToInsert = '' + startChar + tag + selected + (wrap ? tag : ' ');
   }
 
   if (removedFirstNewLine) {
@@ -120,7 +135,13 @@ export function insertMarkdownText({ textArea, text, tag, blockTag, selected, wr
   }
 
   insertText(textArea, textToInsert);
-  return moveCursor({ textArea, tag: tag.replace(textPlaceholder, selected), wrap, removedLastNewLine, select });
+  return moveCursor({
+    textArea,
+    tag: tag.replace(textPlaceholder, selected),
+    wrap,
+    removedLastNewLine,
+    select,
+  });
 }
 
 function updateText({ textArea, tag, blockTag, wrap, select }) {
@@ -138,15 +159,18 @@ function replaceRange(s, start, end, substitute) {
 }
 
 export function addMarkdownListeners(form) {
-  return $('.js-md', form).off('click').on('click', function() {
-    const $this = $(this);
-    return updateText({
-      textArea: $this.closest('.md-area').find('textarea'),
-      tag: $this.data('mdTag'),
-      blockTag: $this.data('mdBlock'),
-      wrap: !$this.data('mdPrepend'),
-      select: $this.data('mdSelect') });
-  });
+  return $('.js-md', form)
+    .off('click')
+    .on('click', function() {
+      const $this = $(this);
+      return updateText({
+        textArea: $this.closest('.md-area').find('textarea'),
+        tag: $this.data('mdTag'),
+        blockTag: $this.data('mdBlock'),
+        wrap: !$this.data('mdPrepend'),
+        select: $this.data('mdSelect'),
+      });
+    });
 }
 
 export function removeMarkdownListeners(form) {
diff --git a/app/assets/javascripts/lib/utils/text_utility.js b/app/assets/javascripts/lib/utils/text_utility.js
index 879f94a26ec..250980919dd 100644
--- a/app/assets/javascripts/lib/utils/text_utility.js
+++ b/app/assets/javascripts/lib/utils/text_utility.js
@@ -8,7 +8,7 @@
  * @returns {String}
  */
 export const addDelimiter = text =>
-  (text ? text.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') : text);
+  text ? text.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') : text;
 
 /**
  * Returns '99+' for numbers bigger than 99.
@@ -94,9 +94,7 @@ export function capitalizeFirstCharacter(text) {
  * @return {String}
  */
 export function getFirstCharacterCapitalized(text) {
-  return text
-    ? text.charAt(0).toUpperCase()
-    : '';
+  return text ? text.charAt(0).toUpperCase() : '';
 }
 
 /**
@@ -136,10 +134,9 @@ export const convertToSentenceCase = string => {
  * e.g. HelloWorld => Hello World
  *
  * @param {*} string
-*/
-export const splitCamelCase = string => (
+ */
+export const splitCamelCase = string =>
   string
-  .replace(/([A-Z]+)([A-Z][a-z])/g, ' $1 $2')
-  .replace(/([a-z\d])([A-Z])/g, '$1 $2')
-  .trim()
-);
+    .replace(/([A-Z]+)([A-Z][a-z])/g, ' $1 $2')
+    .replace(/([a-z\d])([A-Z])/g, '$1 $2')
+    .trim();
diff --git a/app/assets/javascripts/lib/utils/tick_formats.js b/app/assets/javascripts/lib/utils/tick_formats.js
index 0c10a85e336..af3ca714400 100644
--- a/app/assets/javascripts/lib/utils/tick_formats.js
+++ b/app/assets/javascripts/lib/utils/tick_formats.js
@@ -26,7 +26,7 @@ initDateFormats();
 
   see also https://github.com/d3/d3-3.x-api-reference/blob/master/SVG-Axes.md#tickFormat
   */
-export const dateTickFormat = (date) => {
+export const dateTickFormat = date => {
   if (date.getDate() !== 1) {
     return dateTimeFormats.dayFormat.format(date);
   }
diff --git a/app/assets/javascripts/lib/utils/users_cache.js b/app/assets/javascripts/lib/utils/users_cache.js
index b01ec6b81a3..c0d45e017b4 100644
--- a/app/assets/javascripts/lib/utils/users_cache.js
+++ b/app/assets/javascripts/lib/utils/users_cache.js
@@ -7,21 +7,20 @@ class UsersCache extends Cache {
       return Promise.resolve(this.get(username));
     }
 
-    return Api.users('', { username })
-      .then(({ data }) => {
-        if (!data.length) {
-          throw new Error(`User "${username}" could not be found!`);
-        }
+    return Api.users('', { username }).then(({ data }) => {
+      if (!data.length) {
+        throw new Error(`User "${username}" could not be found!`);
+      }
 
-        if (data.length > 1) {
-          throw new Error(`Expected username "${username}" to be unique!`);
-        }
+      if (data.length > 1) {
+        throw new Error(`Expected username "${username}" to be unique!`);
+      }
 
-        const user = data[0];
-        this.internalStorage[username] = user;
-        return user;
-      });
-      // missing catch is intentional, error handling depends on use case
+      const user = data[0];
+      this.internalStorage[username] = user;
+      return user;
+    });
+    // missing catch is intentional, error handling depends on use case
   }
 }
 
-- 
cgit v1.2.1


From 56914c1ac94c02ee336db5014649777d9d729711 Mon Sep 17 00:00:00 2001
From: Mike Greiling <mike@pixelcog.com>
Date: Wed, 10 Oct 2018 01:27:42 -0500
Subject: Prettify merge_conflicts monitoring and notebook modules

---
 .../merge_conflicts/components/diff_file_editor.js |  17 +--
 .../components/parallel_conflict_lines.js          |   2 +-
 .../merge_conflicts/merge_conflict_store.js        |  51 ++++----
 .../javascripts/monitoring/components/graph.vue    |  11 +-
 .../monitoring/components/graph/axis.vue           |  21 +---
 .../monitoring/components/graph/flag.vue           |   3 +-
 .../monitoring/components/graph/track_info.vue     |   1 -
 .../monitoring/components/graph/track_line.vue     |   1 -
 .../monitoring/mixins/monitoring_mixins.js         |   4 +-
 .../monitoring/services/monitoring_service.js      |  49 ++++----
 .../javascripts/monitoring/utils/measurements.js   |   6 +-
 .../monitoring/utils/multiple_time_series.js       |   7 +-
 .../javascripts/notebook/cells/code/index.vue      |  72 ++++++------
 app/assets/javascripts/notebook/cells/markdown.vue | 129 +++++++++++----------
 .../javascripts/notebook/cells/output/html.vue     |  44 ++++---
 .../javascripts/notebook/cells/output/image.vue    |  28 ++---
 .../javascripts/notebook/cells/output/index.vue    | 128 ++++++++++----------
 app/assets/javascripts/notebook/cells/prompt.vue   |  44 +++----
 app/assets/javascripts/notebook/index.vue          |  77 ++++++------
 19 files changed, 341 insertions(+), 354 deletions(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/merge_conflicts/components/diff_file_editor.js b/app/assets/javascripts/merge_conflicts/components/diff_file_editor.js
index c1832d034ef..425b806e9d6 100644
--- a/app/assets/javascripts/merge_conflicts/components/diff_file_editor.js
+++ b/app/assets/javascripts/merge_conflicts/components/diff_file_editor.js
@@ -6,7 +6,7 @@ import axios from '~/lib/utils/axios_utils';
 import flash from '~/flash';
 import { __ } from '~/locale';
 
-((global) => {
+(global => {
   global.mergeConflicts = global.mergeConflicts || {};
 
   global.mergeConflicts.diffFileEditor = Vue.extend({
@@ -35,10 +35,10 @@ import { __ } from '~/locale';
     computed: {
       classObject() {
         return {
-          'saved': this.saved,
-          'is-loading': this.loading
+          saved: this.saved,
+          'is-loading': this.loading,
         };
-      }
+      },
     },
     watch: {
       ['file.showEditor'](val) {
@@ -49,7 +49,7 @@ import { __ } from '~/locale';
         }
 
         this.loadEditor();
-      }
+      },
     },
     mounted() {
       if (this.file.loadEditor) {
@@ -60,7 +60,8 @@ import { __ } from '~/locale';
       loadEditor() {
         this.loading = true;
 
-        axios.get(this.file.content_path)
+        axios
+          .get(this.file.content_path)
           .then(({ data }) => {
             const content = this.$el.querySelector('pre');
             const fileContent = document.createTextNode(data.content);
@@ -101,7 +102,7 @@ import { __ } from '~/locale';
       },
       acceptDiscardConfirmation(file) {
         this.onAcceptDiscardConfirmation(file);
-      }
-    }
+      },
+    },
   });
 })(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/merge_conflicts/components/parallel_conflict_lines.js b/app/assets/javascripts/merge_conflicts/components/parallel_conflict_lines.js
index 69208ac2d36..c2de0379d23 100644
--- a/app/assets/javascripts/merge_conflicts/components/parallel_conflict_lines.js
+++ b/app/assets/javascripts/merge_conflicts/components/parallel_conflict_lines.js
@@ -4,7 +4,7 @@ import Vue from 'vue';
 import actionsMixin from '../mixins/line_conflict_actions';
 import utilsMixin from '../mixins/line_conflict_utils';
 
-((global) => {
+(global => {
   global.mergeConflicts = global.mergeConflicts || {};
 
   global.mergeConflicts.parallelConflictLines = Vue.extend({
diff --git a/app/assets/javascripts/merge_conflicts/merge_conflict_store.js b/app/assets/javascripts/merge_conflicts/merge_conflict_store.js
index 2cd70247bc6..0333335de06 100644
--- a/app/assets/javascripts/merge_conflicts/merge_conflict_store.js
+++ b/app/assets/javascripts/merge_conflicts/merge_conflict_store.js
@@ -4,7 +4,7 @@ import $ from 'jquery';
 import Vue from 'vue';
 import Cookies from 'js-cookie';
 
-((global) => {
+(global => {
   global.mergeConflicts = global.mergeConflicts || {};
 
   const diffViewType = Cookies.get('diff_view');
@@ -17,11 +17,11 @@ import Cookies from 'js-cookie';
   const DEFAULT_RESOLVE_MODE = INTERACTIVE_RESOLVE_MODE;
   const VIEW_TYPES = {
     INLINE: 'inline',
-    PARALLEL: 'parallel'
+    PARALLEL: 'parallel',
   };
   const CONFLICT_TYPES = {
     TEXT: 'text',
-    TEXT_EDITOR: 'text-editor'
+    TEXT_EDITOR: 'text-editor',
   };
 
   global.mergeConflicts.mergeConflictsStore = {
@@ -31,7 +31,7 @@ import Cookies from 'js-cookie';
       isSubmitting: false,
       isParallel: diffViewType === VIEW_TYPES.PARALLEL,
       diffViewType: diffViewType,
-      conflictsData: {}
+      conflictsData: {},
     },
 
     setConflictsData(data) {
@@ -47,7 +47,7 @@ import Cookies from 'js-cookie';
     },
 
     decorateFiles(files) {
-      files.forEach((file) => {
+      files.forEach(file => {
         file.content = '';
         file.resolutionData = {};
         file.promptDiscardConfirmation = false;
@@ -72,7 +72,7 @@ import Cookies from 'js-cookie';
     setInlineLine(file) {
       file.inlineLines = [];
 
-      file.sections.forEach((section) => {
+      file.sections.forEach(section => {
         let currentLineType = 'new';
         const { conflict, lines, id } = section;
 
@@ -80,7 +80,7 @@ import Cookies from 'js-cookie';
           file.inlineLines.push(this.getHeadHeaderLine(id));
         }
 
-        lines.forEach((line) => {
+        lines.forEach(line => {
           const { type } = line;
 
           if ((type === 'new' || type === 'old') && currentLineType !== type) {
@@ -102,7 +102,7 @@ import Cookies from 'js-cookie';
       file.parallelLines = [];
       const linesObj = { left: [], right: [] };
 
-      file.sections.forEach((section) => {
+      file.sections.forEach(section => {
         const { conflict, lines, id } = section;
 
         if (conflict) {
@@ -110,7 +110,7 @@ import Cookies from 'js-cookie';
           linesObj.right.push(this.getHeadHeaderLine(id));
         }
 
-        lines.forEach((line) => {
+        lines.forEach(line => {
           const { type } = line;
 
           if (conflict) {
@@ -131,10 +131,7 @@ import Cookies from 'js-cookie';
       });
 
       for (let i = 0, len = linesObj.left.length; i < len; i += 1) {
-        file.parallelLines.push([
-          linesObj.right[i],
-          linesObj.left[i]
-        ]);
+        file.parallelLines.push([linesObj.right[i], linesObj.left[i]]);
       }
     },
 
@@ -159,9 +156,9 @@ import Cookies from 'js-cookie';
       const { files } = this.state.conflictsData;
       let count = 0;
 
-      files.forEach((file) => {
+      files.forEach(file => {
         if (file.type === CONFLICT_TYPES.TEXT) {
-          file.sections.forEach((section) => {
+          file.sections.forEach(section => {
             if (section.conflict) {
               count += 1;
             }
@@ -198,7 +195,7 @@ import Cookies from 'js-cookie';
         isHeader: true,
         isHead: true,
         isSelected: false,
-        isUnselected: false
+        isUnselected: false,
       };
     },
 
@@ -229,7 +226,7 @@ import Cookies from 'js-cookie';
         section: isHead ? 'head' : 'origin',
         richText: rich_text,
         isSelected: false,
-        isUnselected: false
+        isUnselected: false,
       };
     },
 
@@ -243,7 +240,7 @@ import Cookies from 'js-cookie';
         isHeader: true,
         isOrigin: true,
         isSelected: false,
-        isUnselected: false
+        isUnselected: false,
       };
     },
 
@@ -290,14 +287,14 @@ import Cookies from 'js-cookie';
     },
 
     restoreFileLinesState(file) {
-      file.inlineLines.forEach((line) => {
+      file.inlineLines.forEach(line => {
         if (line.hasConflict || line.isHeader) {
           line.isSelected = false;
           line.isUnselected = false;
         }
       });
 
-      file.parallelLines.forEach((lines) => {
+      file.parallelLines.forEach(lines => {
         const left = lines[0];
         const right = lines[1];
         const isLeftMatch = left.hasConflict || left.isHeader;
@@ -354,7 +351,7 @@ import Cookies from 'js-cookie';
       const initial = 'Commit to source branch';
       const inProgress = 'Committing...';
 
-      return this.state ? this.state.isSubmitting ? inProgress : initial : initial;
+      return this.state ? (this.state.isSubmitting ? inProgress : initial) : initial;
     },
 
     getCommitData() {
@@ -362,13 +359,13 @@ import Cookies from 'js-cookie';
 
       commitData = {
         commit_message: this.state.conflictsData.commitMessage,
-        files: []
+        files: [],
       };
 
-      this.state.conflictsData.files.forEach((file) => {
+      this.state.conflictsData.files.forEach(file => {
         const addFile = {
           old_path: file.old_path,
-          new_path: file.new_path
+          new_path: file.new_path,
         };
 
         if (file.type === CONFLICT_TYPES.TEXT) {
@@ -391,13 +388,13 @@ import Cookies from 'js-cookie';
     handleSelected(file, sectionId, selection) {
       Vue.set(file.resolutionData, sectionId, selection);
 
-      file.inlineLines.forEach((line) => {
+      file.inlineLines.forEach(line => {
         if (line.id === sectionId && (line.hasConflict || line.isHeader)) {
           this.markLine(line, selection);
         }
       });
 
-      file.parallelLines.forEach((lines) => {
+      file.parallelLines.forEach(lines => {
         const left = lines[0];
         const right = lines[1];
         const hasSameId = right.id === sectionId || left.id === sectionId;
@@ -430,6 +427,6 @@ import Cookies from 'js-cookie';
 
     fileTextTypePresent() {
       return this.state.conflictsData.files.some(f => f.type === CONFLICT_TYPES.TEXT);
-    }
+    },
   };
 })(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/monitoring/components/graph.vue b/app/assets/javascripts/monitoring/components/graph.vue
index 3cccaf72ed7..ed5c8b15945 100644
--- a/app/assets/javascripts/monitoring/components/graph.vue
+++ b/app/assets/javascripts/monitoring/components/graph.vue
@@ -148,7 +148,7 @@ export default {
       point = point.matrixTransform(this.$refs.graphData.getScreenCTM().inverse());
       point.x += 7;
 
-      this.seriesUnderMouse = this.timeSeries.filter((series) => {
+      this.seriesUnderMouse = this.timeSeries.filter(series => {
         const mouseX = series.timeSeriesScaleX.invert(point.x);
         let minDistance = Infinity;
 
@@ -221,21 +221,18 @@ export default {
         .scale(axisYScale)
         .ticks(measurements.yTicks);
 
-      d3
-        .select(this.$refs.baseSvg)
+      d3.select(this.$refs.baseSvg)
         .select('.x-axis')
         .call(xAxis);
 
       const width = this.graphWidth;
-      d3
-        .select(this.$refs.baseSvg)
+      d3.select(this.$refs.baseSvg)
         .select('.y-axis')
         .call(yAxis)
         .selectAll('.tick')
         .each(function createTickLines(d, i) {
           if (i > 0) {
-            d3
-              .select(this)
+            d3.select(this)
               .select('line')
               .attr('x2', width)
               .attr('class', 'axis-tick');
diff --git a/app/assets/javascripts/monitoring/components/graph/axis.vue b/app/assets/javascripts/monitoring/components/graph/axis.vue
index 8a604a51eb2..616410ec34f 100644
--- a/app/assets/javascripts/monitoring/components/graph/axis.vue
+++ b/app/assets/javascripts/monitoring/components/graph/axis.vue
@@ -38,38 +38,25 @@ export default {
   computed: {
     textTransform() {
       const yCoordinate =
-        (this.graphHeight -
-          this.margin.top +
-          this.measurements.axisLabelLineOffset) /
-          2 || 0;
+        (this.graphHeight - this.margin.top + this.measurements.axisLabelLineOffset) / 2 || 0;
 
       return `translate(15, ${yCoordinate}) rotate(-90)`;
     },
 
     rectTransform() {
       const yCoordinate =
-        (this.graphHeight -
-          this.margin.top +
-          this.measurements.axisLabelLineOffset) /
-          2 +
+        (this.graphHeight - this.margin.top + this.measurements.axisLabelLineOffset) / 2 +
           this.yLabelWidth / 2 || 0;
 
       return `translate(0, ${yCoordinate}) rotate(-90)`;
     },
 
     xPosition() {
-      return (
-        (this.graphWidth + this.measurements.axisLabelLineOffset) / 2 -
-          this.margin.right || 0
-      );
+      return (this.graphWidth + this.measurements.axisLabelLineOffset) / 2 - this.margin.right || 0;
     },
 
     yPosition() {
-      return (
-        this.graphHeight -
-          this.margin.top +
-          this.measurements.axisLabelLineOffset || 0
-      );
+      return this.graphHeight - this.margin.top + this.measurements.axisLabelLineOffset || 0;
     },
 
     yAxisLabelSentenceCase() {
diff --git a/app/assets/javascripts/monitoring/components/graph/flag.vue b/app/assets/javascripts/monitoring/components/graph/flag.vue
index 5f00d20ca3f..1720476480e 100644
--- a/app/assets/javascripts/monitoring/components/graph/flag.vue
+++ b/app/assets/javascripts/monitoring/components/graph/flag.vue
@@ -92,7 +92,8 @@ export default {
   methods: {
     seriesMetricValue(seriesIndex, series) {
       const indexFromCoordinates = this.currentCoordinates[series.metricTag]
-      ? this.currentCoordinates[series.metricTag].currentDataIndex : 0;
+        ? this.currentCoordinates[series.metricTag].currentDataIndex
+        : 0;
       const index = this.deploymentFlagData
         ? this.deploymentFlagData.seriesIndex
         : indexFromCoordinates;
diff --git a/app/assets/javascripts/monitoring/components/graph/track_info.vue b/app/assets/javascripts/monitoring/components/graph/track_info.vue
index ec1c2222af9..3464067834f 100644
--- a/app/assets/javascripts/monitoring/components/graph/track_info.vue
+++ b/app/assets/javascripts/monitoring/components/graph/track_info.vue
@@ -26,4 +26,3 @@ export default {
     {{ summaryMetrics }}
   </span>
 </template>
-
diff --git a/app/assets/javascripts/monitoring/components/graph/track_line.vue b/app/assets/javascripts/monitoring/components/graph/track_line.vue
index ba3f93b39ff..e04fd9c1f35 100644
--- a/app/assets/javascripts/monitoring/components/graph/track_line.vue
+++ b/app/assets/javascripts/monitoring/components/graph/track_line.vue
@@ -33,4 +33,3 @@ export default {
     </svg>
   </td>
 </template>
-
diff --git a/app/assets/javascripts/monitoring/mixins/monitoring_mixins.js b/app/assets/javascripts/monitoring/mixins/monitoring_mixins.js
index 007451d5c7a..87c3d969de4 100644
--- a/app/assets/javascripts/monitoring/mixins/monitoring_mixins.js
+++ b/app/assets/javascripts/monitoring/mixins/monitoring_mixins.js
@@ -6,7 +6,7 @@ const mixins = {
       if (!this.reducedDeploymentData) return false;
 
       let dataFound = false;
-      this.reducedDeploymentData = this.reducedDeploymentData.map((d) => {
+      this.reducedDeploymentData = this.reducedDeploymentData.map(d => {
         const deployment = d;
         if (d.xPos >= mouseXPos - 10 && d.xPos <= mouseXPos + 10 && !dataFound) {
           dataFound = d.xPos + 1;
@@ -61,7 +61,7 @@ const mixins = {
 
       this.currentCoordinates = {};
 
-      this.seriesUnderMouse.forEach((series) => {
+      this.seriesUnderMouse.forEach(series => {
         const currentDataIndex = bisectDate(series.values, this.hoverData.hoveredDate);
         const currentData = series.values[currentDataIndex];
         const currentX = Math.floor(series.timeSeriesScaleX(currentData.time));
diff --git a/app/assets/javascripts/monitoring/services/monitoring_service.js b/app/assets/javascripts/monitoring/services/monitoring_service.js
index 260d424378e..24b4acaf6da 100644
--- a/app/assets/javascripts/monitoring/services/monitoring_service.js
+++ b/app/assets/javascripts/monitoring/services/monitoring_service.js
@@ -8,18 +8,20 @@ const MAX_REQUESTS = 3;
 function backOffRequest(makeRequestCallback) {
   let requestCounter = 0;
   return backOff((next, stop) => {
-    makeRequestCallback().then((resp) => {
-      if (resp.status === statusCodes.NO_CONTENT) {
-        requestCounter += 1;
-        if (requestCounter < MAX_REQUESTS) {
-          next();
+    makeRequestCallback()
+      .then(resp => {
+        if (resp.status === statusCodes.NO_CONTENT) {
+          requestCounter += 1;
+          if (requestCounter < MAX_REQUESTS) {
+            next();
+          } else {
+            stop(new Error('Failed to connect to the prometheus server'));
+          }
         } else {
-          stop(new Error('Failed to connect to the prometheus server'));
+          stop(resp);
         }
-      } else {
-        stop(resp);
-      }
-    }).catch(stop);
+      })
+      .catch(stop);
   });
 }
 
@@ -33,7 +35,7 @@ export default class MonitoringService {
   getGraphsData() {
     return backOffRequest(() => axios.get(this.metricsEndpoint))
       .then(resp => resp.data)
-      .then((response) => {
+      .then(response => {
         if (!response || !response.data) {
           throw new Error(s__('Metrics|Unexpected metrics data response from prometheus endpoint'));
         }
@@ -47,22 +49,27 @@ export default class MonitoringService {
     }
     return backOffRequest(() => axios.get(this.deploymentEndpoint))
       .then(resp => resp.data)
-      .then((response) => {
+      .then(response => {
         if (!response || !response.deployments) {
-          throw new Error(s__('Metrics|Unexpected deployment data response from prometheus endpoint'));
+          throw new Error(
+            s__('Metrics|Unexpected deployment data response from prometheus endpoint'),
+          );
         }
         return response.deployments;
       });
   }
 
   getEnvironmentsData() {
-    return axios.get(this.environmentsEndpoint)
-    .then(resp => resp.data)
-    .then((response) => {
-      if (!response || !response.environments) {
-        throw new Error(s__('Metrics|There was an error fetching the environments data, please try again'));
-      }
-      return response.environments;
-    });
+    return axios
+      .get(this.environmentsEndpoint)
+      .then(resp => resp.data)
+      .then(response => {
+        if (!response || !response.environments) {
+          throw new Error(
+            s__('Metrics|There was an error fetching the environments data, please try again'),
+          );
+        }
+        return response.environments;
+      });
   }
 }
diff --git a/app/assets/javascripts/monitoring/utils/measurements.js b/app/assets/javascripts/monitoring/utils/measurements.js
index ee866850e13..7c771f43eee 100644
--- a/app/assets/javascripts/monitoring/utils/measurements.js
+++ b/app/assets/javascripts/monitoring/utils/measurements.js
@@ -1,5 +1,6 @@
 export default {
-  small: { // Covers both xs and sm screen sizes
+  small: {
+    // Covers both xs and sm screen sizes
     margin: {
       top: 40,
       right: 40,
@@ -18,7 +19,8 @@ export default {
     },
     axisLabelLineOffset: -20,
   },
-  large: { // This covers both md and lg screen sizes
+  large: {
+    // This covers both md and lg screen sizes
     margin: {
       top: 80,
       right: 80,
diff --git a/app/assets/javascripts/monitoring/utils/multiple_time_series.js b/app/assets/javascripts/monitoring/utils/multiple_time_series.js
index d5971730e31..bb24a1acdb3 100644
--- a/app/assets/javascripts/monitoring/utils/multiple_time_series.js
+++ b/app/assets/javascripts/monitoring/utils/multiple_time_series.js
@@ -66,7 +66,8 @@ function queryTimeSeries(query, graphDrawData, lineStyle) {
   // offset the same amount as the original data
   const [minX, maxX] = graphDrawData.xDom;
   const offset = d3.timeMinute(minX) - Number(minX);
-  const datesWithoutGaps = d3.timeSecond.every(60)
+  const datesWithoutGaps = d3.timeSecond
+    .every(60)
     .range(d3.timeMinute.offset(minX, -1), maxX)
     .map(d => d - offset);
 
@@ -208,9 +209,7 @@ export default function createTimeSeries(queries, graphWidth, graphHeight, graph
 
   const timeSeries = queries.reduce((series, query, index) => {
     const lineStyle = defaultStyleOrder[index % defaultStyleOrder.length];
-    return series.concat(
-      queryTimeSeries(query, graphDrawData, lineStyle),
-    );
+    return series.concat(queryTimeSeries(query, graphDrawData, lineStyle));
   }, []);
 
   return {
diff --git a/app/assets/javascripts/notebook/cells/code/index.vue b/app/assets/javascripts/notebook/cells/code/index.vue
index 7d2a1a33b98..0691ba64f8e 100644
--- a/app/assets/javascripts/notebook/cells/code/index.vue
+++ b/app/assets/javascripts/notebook/cells/code/index.vue
@@ -1,45 +1,45 @@
 <script>
-  import Prism from '../../lib/highlight';
-  import Prompt from '../prompt.vue';
+import Prism from '../../lib/highlight';
+import Prompt from '../prompt.vue';
 
-  export default {
-    components: {
-      prompt: Prompt,
+export default {
+  components: {
+    prompt: Prompt,
+  },
+  props: {
+    count: {
+      type: Number,
+      required: false,
+      default: 0,
     },
-    props: {
-      count: {
-        type: Number,
-        required: false,
-        default: 0,
-      },
-      codeCssClass: {
-        type: String,
-        required: false,
-        default: '',
-      },
-      type: {
-        type: String,
-        required: true,
-      },
-      rawCode: {
-        type: String,
-        required: true,
-      },
+    codeCssClass: {
+      type: String,
+      required: false,
+      default: '',
     },
-    computed: {
-      code() {
-        return this.rawCode;
-      },
-      promptType() {
-        const type = this.type.split('put')[0];
-
-        return type.charAt(0).toUpperCase() + type.slice(1);
-      },
+    type: {
+      type: String,
+      required: true,
+    },
+    rawCode: {
+      type: String,
+      required: true,
     },
-    mounted() {
-      Prism.highlightElement(this.$refs.code);
+  },
+  computed: {
+    code() {
+      return this.rawCode;
+    },
+    promptType() {
+      const type = this.type.split('put')[0];
+
+      return type.charAt(0).toUpperCase() + type.slice(1);
     },
-  };
+  },
+  mounted() {
+    Prism.highlightElement(this.$refs.code);
+  },
+};
 </script>
 
 <template>
diff --git a/app/assets/javascripts/notebook/cells/markdown.vue b/app/assets/javascripts/notebook/cells/markdown.vue
index 3d09d24b6ab..5aa83db0986 100644
--- a/app/assets/javascripts/notebook/cells/markdown.vue
+++ b/app/assets/javascripts/notebook/cells/markdown.vue
@@ -1,12 +1,12 @@
 <script>
-  /* global katex */
-  import marked from 'marked';
-  import sanitize from 'sanitize-html';
-  import Prompt from './prompt.vue';
+/* global katex */
+import marked from 'marked';
+import sanitize from 'sanitize-html';
+import Prompt from './prompt.vue';
 
-  const renderer = new marked.Renderer();
+const renderer = new marked.Renderer();
 
-  /*
+/*
     Regex to match KaTex blocks.
 
     Supports the following:
@@ -17,7 +17,7 @@
 
     The matched text then goes through the KaTex renderer & then outputs the HTML
   */
-  const katexRegexString = `(
+const katexRegexString = `(
     ^\\\\begin{[a-zA-Z]+}\\s
     |
     ^\\$\\$
@@ -32,66 +32,69 @@
     |
     \\$
   )
-  `.replace(/\s/g, '').trim();
+  `
+  .replace(/\s/g, '')
+  .trim();
 
-  renderer.paragraph = (t) => {
-    let text = t;
-    let inline = false;
+renderer.paragraph = t => {
+  let text = t;
+  let inline = false;
 
-    if (typeof katex !== 'undefined') {
-      const katexString = text.replace(/&amp;/g, '&')
-        .replace(/&=&/g, '\\space=\\space')
-        .replace(/<(\/?)em>/g, '_');
-      const regex = new RegExp(katexRegexString, 'gi');
-      const matchLocation = katexString.search(regex);
-      const numberOfMatches = katexString.match(regex);
+  if (typeof katex !== 'undefined') {
+    const katexString = text
+      .replace(/&amp;/g, '&')
+      .replace(/&=&/g, '\\space=\\space')
+      .replace(/<(\/?)em>/g, '_');
+    const regex = new RegExp(katexRegexString, 'gi');
+    const matchLocation = katexString.search(regex);
+    const numberOfMatches = katexString.match(regex);
 
-      if (numberOfMatches && numberOfMatches.length !== 0) {
-        if (matchLocation > 0) {
-          let matches = regex.exec(katexString);
-          inline = true;
+    if (numberOfMatches && numberOfMatches.length !== 0) {
+      if (matchLocation > 0) {
+        let matches = regex.exec(katexString);
+        inline = true;
 
-          while (matches !== null) {
-            const renderedKatex = katex.renderToString(matches[0].replace(/\$/g, ''));
-            text = `${text.replace(matches[0], ` ${renderedKatex}`)}`;
-            matches = regex.exec(katexString);
-          }
-        } else {
-          const matches = regex.exec(katexString);
-          text = katex.renderToString(matches[2]);
+        while (matches !== null) {
+          const renderedKatex = katex.renderToString(matches[0].replace(/\$/g, ''));
+          text = `${text.replace(matches[0], ` ${renderedKatex}`)}`;
+          matches = regex.exec(katexString);
         }
+      } else {
+        const matches = regex.exec(katexString);
+        text = katex.renderToString(matches[2]);
       }
     }
+  }
 
-    return `<p class="${inline ? 'inline-katex' : ''}">${text}</p>`;
-  };
+  return `<p class="${inline ? 'inline-katex' : ''}">${text}</p>`;
+};
 
-  marked.setOptions({
-    sanitize: true,
-    renderer,
-  });
+marked.setOptions({
+  sanitize: true,
+  renderer,
+});
 
-  export default {
-    components: {
-      prompt: Prompt,
-    },
-    props: {
-      cell: {
-        type: Object,
-        required: true,
-      },
+export default {
+  components: {
+    prompt: Prompt,
+  },
+  props: {
+    cell: {
+      type: Object,
+      required: true,
     },
-    computed: {
-      markdown() {
-        return sanitize(marked(this.cell.source.join('').replace(/\\/g, '\\\\')), {
-          allowedTags: false,
-          allowedAttributes: {
-            '*': ['class'],
-          },
-        });
-      },
+  },
+  computed: {
+    markdown() {
+      return sanitize(marked(this.cell.source.join('').replace(/\\/g, '\\\\')), {
+        allowedTags: false,
+        allowedAttributes: {
+          '*': ['class'],
+        },
+      });
     },
-  };
+  },
+};
 </script>
 
 <template>
@@ -105,13 +108,13 @@
 </template>
 
 <style>
-  .markdown .katex {
-    display: block;
-    text-align: center;
-  }
+.markdown .katex {
+  display: block;
+  text-align: center;
+}
 
-  .markdown .inline-katex .katex {
-    display: inline;
-    text-align: initial;
-  }
+.markdown .inline-katex .katex {
+  display: inline;
+  text-align: initial;
+}
 </style>
diff --git a/app/assets/javascripts/notebook/cells/output/html.vue b/app/assets/javascripts/notebook/cells/output/html.vue
index 0535ee7afa8..c6fc786fa76 100644
--- a/app/assets/javascripts/notebook/cells/output/html.vue
+++ b/app/assets/javascripts/notebook/cells/output/html.vue
@@ -1,30 +1,28 @@
 <script>
-  import sanitize from 'sanitize-html';
-  import Prompt from '../prompt.vue';
+import sanitize from 'sanitize-html';
+import Prompt from '../prompt.vue';
 
-  export default {
-    components: {
-      prompt: Prompt,
+export default {
+  components: {
+    prompt: Prompt,
+  },
+  props: {
+    rawCode: {
+      type: String,
+      required: true,
     },
-    props: {
-      rawCode: {
-        type: String,
-        required: true,
-      },
+  },
+  computed: {
+    sanitizedOutput() {
+      return sanitize(this.rawCode, {
+        allowedTags: sanitize.defaults.allowedTags.concat(['img', 'svg']),
+        allowedAttributes: {
+          img: ['src'],
+        },
+      });
     },
-    computed: {
-      sanitizedOutput() {
-        return sanitize(this.rawCode, {
-          allowedTags: sanitize.defaults.allowedTags.concat([
-            'img', 'svg',
-          ]),
-          allowedAttributes: {
-            img: ['src'],
-          },
-        });
-      },
-    },
-  };
+  },
+};
 </script>
 
 <template>
diff --git a/app/assets/javascripts/notebook/cells/output/image.vue b/app/assets/javascripts/notebook/cells/output/image.vue
index 67d6c5ad12b..a17868963ce 100644
--- a/app/assets/javascripts/notebook/cells/output/image.vue
+++ b/app/assets/javascripts/notebook/cells/output/image.vue
@@ -1,21 +1,21 @@
 <script>
-  import Prompt from '../prompt.vue';
+import Prompt from '../prompt.vue';
 
-  export default {
-    components: {
-      prompt: Prompt,
+export default {
+  components: {
+    prompt: Prompt,
+  },
+  props: {
+    outputType: {
+      type: String,
+      required: true,
     },
-    props: {
-      outputType: {
-        type: String,
-        required: true,
-      },
-      rawCode: {
-        type: String,
-        required: true,
-      },
+    rawCode: {
+      type: String,
+      required: true,
     },
-  };
+  },
+};
 </script>
 
 <template>
diff --git a/app/assets/javascripts/notebook/cells/output/index.vue b/app/assets/javascripts/notebook/cells/output/index.vue
index 4183b976814..d9f8604ed10 100644
--- a/app/assets/javascripts/notebook/cells/output/index.vue
+++ b/app/assets/javascripts/notebook/cells/output/index.vue
@@ -1,78 +1,78 @@
 <script>
-  import CodeCell from '../code/index.vue';
-  import Html from './html.vue';
-  import Image from './image.vue';
+import CodeCell from '../code/index.vue';
+import Html from './html.vue';
+import Image from './image.vue';
 
-  export default {
-    components: {
-      'code-cell': CodeCell,
-      'html-output': Html,
-      'image-output': Image,
+export default {
+  components: {
+    'code-cell': CodeCell,
+    'html-output': Html,
+    'image-output': Image,
+  },
+  props: {
+    codeCssClass: {
+      type: String,
+      required: false,
+      default: '',
     },
-    props: {
-      codeCssClass: {
-        type: String,
-        required: false,
-        default: '',
-      },
-      count: {
-        type: Number,
-        required: false,
-        default: 0,
-      },
-      output: {
-        type: Object,
-        requred: true,
-        default: () => ({}),
-      },
+    count: {
+      type: Number,
+      required: false,
+      default: 0,
     },
-    computed: {
-      componentName() {
-        if (this.output.text) {
-          return 'code-cell';
-        } else if (this.output.data['image/png']) {
-          return 'image-output';
-        } else if (this.output.data['text/html']) {
-          return 'html-output';
-        } else if (this.output.data['image/svg+xml']) {
-          return 'html-output';
-        }
-
+    output: {
+      type: Object,
+      requred: true,
+      default: () => ({}),
+    },
+  },
+  computed: {
+    componentName() {
+      if (this.output.text) {
         return 'code-cell';
-      },
-      rawCode() {
-        if (this.output.text) {
-          return this.output.text.join('');
-        }
+      } else if (this.output.data['image/png']) {
+        return 'image-output';
+      } else if (this.output.data['text/html']) {
+        return 'html-output';
+      } else if (this.output.data['image/svg+xml']) {
+        return 'html-output';
+      }
 
-        return this.dataForType(this.outputType);
-      },
-      outputType() {
-        if (this.output.text) {
-          return '';
-        } else if (this.output.data['image/png']) {
-          return 'image/png';
-        } else if (this.output.data['text/html']) {
-          return 'text/html';
-        } else if (this.output.data['image/svg+xml']) {
-          return 'image/svg+xml';
-        }
+      return 'code-cell';
+    },
+    rawCode() {
+      if (this.output.text) {
+        return this.output.text.join('');
+      }
+
+      return this.dataForType(this.outputType);
+    },
+    outputType() {
+      if (this.output.text) {
+        return '';
+      } else if (this.output.data['image/png']) {
+        return 'image/png';
+      } else if (this.output.data['text/html']) {
+        return 'text/html';
+      } else if (this.output.data['image/svg+xml']) {
+        return 'image/svg+xml';
+      }
 
-        return 'text/plain';
-      },
+      return 'text/plain';
     },
-    methods: {
-      dataForType(type) {
-        let data = this.output.data[type];
+  },
+  methods: {
+    dataForType(type) {
+      let data = this.output.data[type];
 
-        if (typeof data === 'object') {
-          data = data.join('');
-        }
+      if (typeof data === 'object') {
+        data = data.join('');
+      }
 
-        return data;
-      },
+      return data;
     },
-  };
+  },
+};
 </script>
 
 <template>
diff --git a/app/assets/javascripts/notebook/cells/prompt.vue b/app/assets/javascripts/notebook/cells/prompt.vue
index fe1fc37e1dc..d96f701ee3e 100644
--- a/app/assets/javascripts/notebook/cells/prompt.vue
+++ b/app/assets/javascripts/notebook/cells/prompt.vue
@@ -1,23 +1,23 @@
 <script>
-  export default {
-    props: {
-      type: {
-        type: String,
-        required: false,
-        default: '',
-      },
-      count: {
-        type: Number,
-        required: false,
-        default: 0,
-      },
+export default {
+  props: {
+    type: {
+      type: String,
+      required: false,
+      default: '',
     },
-    computed: {
-      hasKeys() {
-        return this.type !== '' && this.count;
-      },
+    count: {
+      type: Number,
+      required: false,
+      default: 0,
     },
-  };
+  },
+  computed: {
+    hasKeys() {
+      return this.type !== '' && this.count;
+    },
+  },
+};
 </script>
 
 <template>
@@ -29,9 +29,9 @@
 </template>
 
 <style scoped>
-  .prompt {
-    padding: 0 10px;
-    min-width: 7em;
-    font-family: monospace;
-  }
+.prompt {
+  padding: 0 10px;
+  min-width: 7em;
+  font-family: monospace;
+}
 </style>
diff --git a/app/assets/javascripts/notebook/index.vue b/app/assets/javascripts/notebook/index.vue
index f241df9620d..c5cc8c97dda 100644
--- a/app/assets/javascripts/notebook/index.vue
+++ b/app/assets/javascripts/notebook/index.vue
@@ -1,51 +1,48 @@
 <script>
-  import {
-    MarkdownCell,
-    CodeCell,
-  } from './cells';
+import { MarkdownCell, CodeCell } from './cells';
 
-  export default {
-    components: {
-      'code-cell': CodeCell,
-      'markdown-cell': MarkdownCell,
+export default {
+  components: {
+    'code-cell': CodeCell,
+    'markdown-cell': MarkdownCell,
+  },
+  props: {
+    notebook: {
+      type: Object,
+      required: true,
     },
-    props: {
-      notebook: {
-        type: Object,
-        required: true,
-      },
-      codeCssClass: {
-        type: String,
-        required: false,
-        default: '',
-      },
+    codeCssClass: {
+      type: String,
+      required: false,
+      default: '',
     },
-    computed: {
-      cells() {
-        if (this.notebook.worksheets) {
-          const data = {
-            cells: [],
-          };
+  },
+  computed: {
+    cells() {
+      if (this.notebook.worksheets) {
+        const data = {
+          cells: [],
+        };
 
-          return this.notebook.worksheets.reduce((cellData, sheet) => {
-            const cellDataCopy = cellData;
-            cellDataCopy.cells = cellDataCopy.cells.concat(sheet.cells);
-            return cellDataCopy;
-          }, data).cells;
-        }
+        return this.notebook.worksheets.reduce((cellData, sheet) => {
+          const cellDataCopy = cellData;
+          cellDataCopy.cells = cellDataCopy.cells.concat(sheet.cells);
+          return cellDataCopy;
+        }, data).cells;
+      }
 
-        return this.notebook.cells;
-      },
-      hasNotebook() {
-        return Object.keys(this.notebook).length;
-      },
+      return this.notebook.cells;
     },
-    methods: {
-      cellType(type) {
-        return `${type}-cell`;
-      },
+    hasNotebook() {
+      return Object.keys(this.notebook).length;
     },
-  };
+  },
+  methods: {
+    cellType(type) {
+      return `${type}-cell`;
+    },
+  },
+};
 </script>
 
 <template>
-- 
cgit v1.2.1


From 8b7c86ea2e920b174be345fb4de25b57ad5a56ef Mon Sep 17 00:00:00 2001
From: Mike Greiling <mike@pixelcog.com>
Date: Wed, 10 Oct 2018 02:05:39 -0500
Subject: Prettify vue_merge_request_widget modules

---
 .../components/deployment.vue                      |   8 +-
 .../components/memory_usage.vue                    |  32 +++-
 .../components/mr_widget_author.vue                |  56 +++----
 .../components/mr_widget_author_time.vue           |  52 +++---
 .../components/mr_widget_merge_help.vue            |  36 +++--
 .../components/mr_widget_related_links.vue         |  50 +++---
 .../components/mr_widget_status_icon.vue           |  50 +++---
 .../components/source_branch_removal_status.vue    |  22 +--
 .../components/states/mr_widget_archived.vue       |  14 +-
 .../states/mr_widget_auto_merge_failed.vue         |  50 +++---
 .../components/states/mr_widget_checking.vue       |  14 +-
 .../components/states/mr_widget_closed.vue         |  32 ++--
 .../components/states/mr_widget_conflicts.vue      |  28 ++--
 .../mr_widget_merge_when_pipeline_succeeds.vue     | 142 ++++++++--------
 .../components/states/mr_widget_merged.vue         | 180 ++++++++++-----------
 .../components/states/mr_widget_merging.vue        |  26 +--
 .../components/states/mr_widget_missing_branch.vue |  68 ++++----
 .../components/states/mr_widget_not_allowed.vue    |  14 +-
 .../states/mr_widget_pipeline_blocked.vue          |  14 +-
 .../components/states/mr_widget_rebase.vue         | 142 ++++++++--------
 .../components/states/work_in_progress.vue         |   5 +-
 .../vue_merge_request_widget/mr_widget_options.vue |  35 ++--
 22 files changed, 550 insertions(+), 520 deletions(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue b/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue
index 70518ad73e8..9161f703697 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue
@@ -22,9 +22,7 @@ export default {
   directives: {
     tooltip,
   },
-  mixins: [
-    timeagoMixin,
-  ],
+  mixins: [timeagoMixin],
   props: {
     deployment: {
       type: Object,
@@ -50,7 +48,7 @@ export default {
       return !!(this.deployment.url && this.deployment.name);
     },
     hasMetrics() {
-      return !!(this.deployment.metrics_url);
+      return !!this.deployment.metrics_url;
     },
   },
   methods: {
@@ -63,7 +61,7 @@ export default {
 
         MRWidgetService.stopEnvironment(this.deployment.stop_url)
           .then(res => res.data)
-          .then((data) => {
+          .then(data => {
             if (data.redirect_url) {
               visitUrl(data.redirect_url);
             }
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/memory_usage.vue b/app/assets/javascripts/vue_merge_request_widget/components/memory_usage.vue
index 5e76f6b1cac..41dbc5c9cbb 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/memory_usage.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/memory_usage.vue
@@ -60,11 +60,29 @@ export default {
       let memoryUsageMsg = '';
 
       if (memoryTo > memoryFrom) {
-        memoryUsageMsg = sprintf(s__('mrWidget|%{metricsLinkStart} Memory %{metricsLinkEnd} usage %{emphasisStart} increased %{emphasisEnd} from %{memoryFrom}MB to %{memoryTo}MB'), messageProps, false);
+        memoryUsageMsg = sprintf(
+          s__(
+            'mrWidget|%{metricsLinkStart} Memory %{metricsLinkEnd} usage %{emphasisStart} increased %{emphasisEnd} from %{memoryFrom}MB to %{memoryTo}MB',
+          ),
+          messageProps,
+          false,
+        );
       } else if (memoryTo < memoryFrom) {
-        memoryUsageMsg = sprintf(s__('mrWidget|%{metricsLinkStart} Memory %{metricsLinkEnd} usage %{emphasisStart} decreased %{emphasisEnd} from %{memoryFrom}MB to %{memoryTo}MB'), messageProps, false);
+        memoryUsageMsg = sprintf(
+          s__(
+            'mrWidget|%{metricsLinkStart} Memory %{metricsLinkEnd} usage %{emphasisStart} decreased %{emphasisEnd} from %{memoryFrom}MB to %{memoryTo}MB',
+          ),
+          messageProps,
+          false,
+        );
       } else {
-        memoryUsageMsg = sprintf(s__('mrWidget|%{metricsLinkStart} Memory %{metricsLinkEnd} usage is %{emphasisStart} unchanged %{emphasisEnd} at %{memoryFrom}MB'), messageProps, false);
+        memoryUsageMsg = sprintf(
+          s__(
+            'mrWidget|%{metricsLinkStart} Memory %{metricsLinkEnd} usage is %{emphasisStart} unchanged %{emphasisEnd} at %{memoryFrom}MB',
+          ),
+          messageProps,
+          false,
+        );
       }
 
       return memoryUsageMsg;
@@ -77,7 +95,7 @@ export default {
   methods: {
     getMegabytes(bytesString) {
       const valueInBytes = Number(bytesString).toFixed(2);
-      return (bytesToMiB(valueInBytes)).toFixed(2);
+      return bytesToMiB(valueInBytes).toFixed(2);
     },
     computeGraphData(metrics, deploymentTime) {
       this.loadingMetrics = false;
@@ -103,7 +121,7 @@ export default {
     loadMetrics() {
       backOff((next, stop) => {
         MRWidgetService.fetchMetrics(this.metricsUrl)
-          .then((res) => {
+          .then(res => {
             if (res.status === statusCodes.NO_CONTENT) {
               this.backOffRequestCounter += 1;
               /* eslint-disable no-unused-expressions */
@@ -114,14 +132,14 @@ export default {
           })
           .catch(stop);
       })
-        .then((res) => {
+        .then(res => {
           if (res.status === statusCodes.NO_CONTENT) {
             return res;
           }
 
           return res.data;
         })
-        .then((data) => {
+        .then(data => {
           this.computeGraphData(data.metrics, data.deployment_time);
           return data;
         })
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_author.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_author.vue
index 22c2f74f900..2ad9e8be655 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_author.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_author.vue
@@ -1,36 +1,36 @@
 <script>
-  import tooltip from '../../vue_shared/directives/tooltip';
+import tooltip from '../../vue_shared/directives/tooltip';
 
-  export default {
-    name: 'MrWidgetAuthor',
-    directives: {
-      tooltip,
+export default {
+  name: 'MrWidgetAuthor',
+  directives: {
+    tooltip,
+  },
+  props: {
+    author: {
+      type: Object,
+      required: true,
     },
-    props: {
-      author: {
-        type: Object,
-        required: true,
-      },
-      showAuthorName: {
-        type: Boolean,
-        required: false,
-        default: true,
-      },
-      showAuthorTooltip: {
-        type: Boolean,
-        required: false,
-        default: false,
-      },
+    showAuthorName: {
+      type: Boolean,
+      required: false,
+      default: true,
     },
-    computed: {
-      authorUrl() {
-        return this.author.webUrl || this.author.web_url;
-      },
-      avatarUrl() {
-        return this.author.avatarUrl || this.author.avatar_url;
-      },
+    showAuthorTooltip: {
+      type: Boolean,
+      required: false,
+      default: false,
     },
-  };
+  },
+  computed: {
+    authorUrl() {
+      return this.author.webUrl || this.author.web_url;
+    },
+    avatarUrl() {
+      return this.author.avatarUrl || this.author.avatar_url;
+    },
+  },
+};
 </script>
 <template>
   <a
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_author_time.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_author_time.vue
index ba16cb9e2c8..1d902131f49 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_author_time.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_author_time.vue
@@ -1,34 +1,34 @@
 <script>
-  import tooltip from '~/vue_shared/directives/tooltip';
-  import MrWidgetAuthor from './mr_widget_author.vue';
+import tooltip from '~/vue_shared/directives/tooltip';
+import MrWidgetAuthor from './mr_widget_author.vue';
 
-  export default {
-    name: 'MrWidgetAuthorTime',
-    components: {
-      MrWidgetAuthor,
+export default {
+  name: 'MrWidgetAuthorTime',
+  components: {
+    MrWidgetAuthor,
+  },
+  directives: {
+    tooltip,
+  },
+  props: {
+    actionText: {
+      type: String,
+      required: true,
     },
-    directives: {
-      tooltip,
+    author: {
+      type: Object,
+      required: true,
     },
-    props: {
-      actionText: {
-        type: String,
-        required: true,
-      },
-      author: {
-        type: Object,
-        required: true,
-      },
-      dateTitle: {
-        type: String,
-        required: true,
-      },
-      dateReadable: {
-        type: String,
-        required: true,
-      },
+    dateTitle: {
+      type: String,
+      required: true,
     },
-  };
+    dateReadable: {
+      type: String,
+      required: true,
+    },
+  },
+};
 </script>
 <template>
   <h4 class="js-mr-widget-author">
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_merge_help.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_merge_help.vue
index 62b61e1f41f..37c6af13c03 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_merge_help.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_merge_help.vue
@@ -1,24 +1,26 @@
 <script>
-  import { sprintf, s__ } from '~/locale';
+import { sprintf, s__ } from '~/locale';
 
-  export default {
-    name: 'MRWidgetMergeHelp',
-    props: {
-      missingBranch: {
-        type: String,
-        required: false,
-        default: '',
-      },
+export default {
+  name: 'MRWidgetMergeHelp',
+  props: {
+    missingBranch: {
+      type: String,
+      required: false,
+      default: '',
     },
-    computed: {
-      missingBranchInfo() {
-        return sprintf(
-          s__('mrWidget|If the %{branch} branch exists in your local repository, you can merge this merge request manually using the'),
-          { branch: this.missingBranch },
-        );
-      },
+  },
+  computed: {
+    missingBranchInfo() {
+      return sprintf(
+        s__(
+          'mrWidget|If the %{branch} branch exists in your local repository, you can merge this merge request manually using the',
+        ),
+        { branch: this.missingBranch },
+      );
     },
-  };
+  },
+};
 </script>
 <template>
   <section class="mr-widget-help">
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_related_links.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_related_links.vue
index 88d0fcd70f5..cc77b96a589 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_related_links.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_related_links.vue
@@ -1,32 +1,32 @@
 <script>
-  import { s__ } from '~/locale';
+import { s__ } from '~/locale';
 
-  export default {
-    name: 'MRWidgetRelatedLinks',
-    props: {
-      relatedLinks: {
-        type: Object,
-        required: true,
-        default: () => ({}),
-      },
-      state: {
-        type: String,
-        required: false,
-        default: '',
-      },
+export default {
+  name: 'MRWidgetRelatedLinks',
+  props: {
+    relatedLinks: {
+      type: Object,
+      required: true,
+      default: () => ({}),
     },
-    computed: {
-      closesText() {
-        if (this.state === 'merged') {
-          return s__('mrWidget|Closed');
-        }
-        if (this.state === 'closed') {
-          return s__('mrWidget|Did not close');
-        }
-        return s__('mrWidget|Closes');
-      },
+    state: {
+      type: String,
+      required: false,
+      default: '',
     },
-  };
+  },
+  computed: {
+    closesText() {
+      if (this.state === 'merged') {
+        return s__('mrWidget|Closed');
+      }
+      if (this.state === 'closed') {
+        return s__('mrWidget|Did not close');
+      }
+      return s__('mrWidget|Closes');
+    },
+  },
+};
 </script>
 <template>
   <section class="mr-info-list mr-links">
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_status_icon.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_status_icon.vue
index 035ae791a1d..ba6a1687e51 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_status_icon.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_status_icon.vue
@@ -1,33 +1,33 @@
 <script>
-  import ciIcon from '../../vue_shared/components/ci_icon.vue';
+import ciIcon from '../../vue_shared/components/ci_icon.vue';
 
-  export default {
-    components: {
-      ciIcon,
+export default {
+  components: {
+    ciIcon,
+  },
+  props: {
+    status: {
+      type: String,
+      required: true,
     },
-    props: {
-      status: {
-        type: String,
-        required: true,
-      },
-      showDisabledButton: {
-        type: Boolean,
-        required: false,
-        default: false,
-      },
+    showDisabledButton: {
+      type: Boolean,
+      required: false,
+      default: false,
     },
-    computed: {
-      isLoading() {
-        return this.status === 'loading';
-      },
-      statusObj() {
-        return {
-          group: this.status,
-          icon: `status_${this.status}`,
-        };
-      },
+  },
+  computed: {
+    isLoading() {
+      return this.status === 'loading';
     },
-  };
+    statusObj() {
+      return {
+        group: this.status,
+        icon: `status_${this.status}`,
+      };
+    },
+  },
+};
 </script>
 <template>
   <div class="space-children d-flex append-right-10 widget-status-icon">
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/source_branch_removal_status.vue b/app/assets/javascripts/vue_merge_request_widget/components/source_branch_removal_status.vue
index 56879c04d16..01f707163d4 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/source_branch_removal_status.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/source_branch_removal_status.vue
@@ -1,16 +1,16 @@
 <script>
-  import tooltip from '../../vue_shared/directives/tooltip';
-  import { __ } from '../../locale';
+import tooltip from '../../vue_shared/directives/tooltip';
+import { __ } from '../../locale';
 
-  export default {
-    directives: {
-      tooltip,
-    },
-    created() {
-      this.removesBranchText = __('<strong>Removes</strong> source branch');
-      this.tooltipTitle = __('A user with write access to the source branch selected this option');
-    },
-  };
+export default {
+  directives: {
+    tooltip,
+  },
+  created() {
+    this.removesBranchText = __('<strong>Removes</strong> source branch');
+    this.tooltipTitle = __('A user with write access to the source branch selected this option');
+  },
+};
 </script>
 
 <template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_archived.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_archived.vue
index cfbd44d41b2..2a76a878448 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_archived.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_archived.vue
@@ -1,12 +1,12 @@
 <script>
-  import statusIcon from '../mr_widget_status_icon.vue';
+import statusIcon from '../mr_widget_status_icon.vue';
 
-  export default {
-    name: 'MRWidgetArchived',
-    components: {
-      statusIcon,
-    },
-  };
+export default {
+  name: 'MRWidgetArchived',
+  components: {
+    statusIcon,
+  },
+};
 </script>
 <template>
   <div class="mr-widget-body media">
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.vue
index 01294d5b40c..4f8b07484c0 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.vue
@@ -1,32 +1,32 @@
 <script>
-  import eventHub from '../../event_hub';
-  import statusIcon from '../mr_widget_status_icon.vue';
+import eventHub from '../../event_hub';
+import statusIcon from '../mr_widget_status_icon.vue';
 
-  export default {
-    name: 'MRWidgetAutoMergeFailed',
-    components: {
-      statusIcon,
+export default {
+  name: 'MRWidgetAutoMergeFailed',
+  components: {
+    statusIcon,
+  },
+  props: {
+    mr: {
+      type: Object,
+      required: true,
     },
-    props: {
-      mr: {
-        type: Object,
-        required: true,
-      },
+  },
+  data() {
+    return {
+      isRefreshing: false,
+    };
+  },
+  methods: {
+    refreshWidget() {
+      this.isRefreshing = true;
+      eventHub.$emit('MRWidgetUpdateRequested', () => {
+        this.isRefreshing = false;
+      });
     },
-    data() {
-      return {
-        isRefreshing: false,
-      };
-    },
-    methods: {
-      refreshWidget() {
-        this.isRefreshing = true;
-        eventHub.$emit('MRWidgetUpdateRequested', () => {
-          this.isRefreshing = false;
-        });
-      },
-    },
-  };
+  },
+};
 </script>
 <template>
   <div class="mr-widget-body media">
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_checking.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_checking.vue
index ae6630dcd6f..fdf0a9fd994 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_checking.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_checking.vue
@@ -1,12 +1,12 @@
 <script>
-  import statusIcon from '../mr_widget_status_icon.vue';
+import statusIcon from '../mr_widget_status_icon.vue';
 
-  export default {
-    name: 'MRWidgetChecking',
-    components: {
-      statusIcon,
-    },
-  };
+export default {
+  name: 'MRWidgetChecking',
+  components: {
+    statusIcon,
+  },
+};
 </script>
 <template>
   <div class="mr-widget-body media">
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_closed.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_closed.vue
index 25a57e520ee..f06eab95c7e 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_closed.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_closed.vue
@@ -1,23 +1,23 @@
 <script>
-  import MrWidgetAuthorTime from '../../components/mr_widget_author_time.vue';
-  import statusIcon from '../mr_widget_status_icon.vue';
+import MrWidgetAuthorTime from '../../components/mr_widget_author_time.vue';
+import statusIcon from '../mr_widget_status_icon.vue';
 
-  export default {
-    name: 'MRWidgetClosed',
-    components: {
-      MrWidgetAuthorTime,
-      statusIcon,
-    },
-    props: {
-      /* TODO: This is providing all store and service down when it
+export default {
+  name: 'MRWidgetClosed',
+  components: {
+    MrWidgetAuthorTime,
+    statusIcon,
+  },
+  props: {
+    /* TODO: This is providing all store and service down when it
       only needs metrics and targetBranch */
-      mr: {
-        type: Object,
-        required: true,
-        default: () => ({}),
-      },
+    mr: {
+      type: Object,
+      required: true,
+      default: () => ({}),
     },
-  };
+  },
+};
 </script>
 <template>
   <div class="mr-widget-body media">
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue
index dff9ec657b9..8c808296178 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue
@@ -1,21 +1,21 @@
 <script>
-  import statusIcon from '../mr_widget_status_icon.vue';
+import statusIcon from '../mr_widget_status_icon.vue';
 
-  export default {
-    name: 'MRWidgetConflicts',
-    components: {
-      statusIcon,
-    },
-    props: {
-      /* TODO: This is providing all store and service down when it
+export default {
+  name: 'MRWidgetConflicts',
+  components: {
+    statusIcon,
+  },
+  props: {
+    /* TODO: This is providing all store and service down when it
       only needs a few props */
-      mr: {
-        type: Object,
-        required: true,
-        default: () => ({}),
-      },
+    mr: {
+      type: Object,
+      required: true,
+      default: () => ({}),
     },
-  };
+  },
+};
 </script>
 <template>
   <div class="mr-widget-body media">
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.vue
index 97f4196b94d..484b5600d63 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.vue
@@ -1,82 +1,82 @@
 <script>
-  import Flash from '../../../flash';
-  import statusIcon from '../mr_widget_status_icon.vue';
-  import MrWidgetAuthor from '../../components/mr_widget_author.vue';
-  import eventHub from '../../event_hub';
+import Flash from '../../../flash';
+import statusIcon from '../mr_widget_status_icon.vue';
+import MrWidgetAuthor from '../../components/mr_widget_author.vue';
+import eventHub from '../../event_hub';
 
-  export default {
-    name: 'MRWidgetMergeWhenPipelineSucceeds',
-    components: {
-      MrWidgetAuthor,
-      statusIcon,
+export default {
+  name: 'MRWidgetMergeWhenPipelineSucceeds',
+  components: {
+    MrWidgetAuthor,
+    statusIcon,
+  },
+  props: {
+    mr: {
+      type: Object,
+      required: true,
+      default: () => ({}),
     },
-    props: {
-      mr: {
-        type: Object,
-        required: true,
-        default: () => ({}),
-      },
-      service: {
-        type: Object,
-        required: true,
-        default: () => ({}),
-      },
+    service: {
+      type: Object,
+      required: true,
+      default: () => ({}),
     },
-    data() {
-      return {
-        isCancellingAutoMerge: false,
-        isRemovingSourceBranch: false,
-      };
-    },
-    computed: {
-      canRemoveSourceBranch() {
-        const {
-          shouldRemoveSourceBranch,
-          canRemoveSourceBranch,
-          mergeUserId,
-          currentUserId,
-        } = this.mr;
+  },
+  data() {
+    return {
+      isCancellingAutoMerge: false,
+      isRemovingSourceBranch: false,
+    };
+  },
+  computed: {
+    canRemoveSourceBranch() {
+      const {
+        shouldRemoveSourceBranch,
+        canRemoveSourceBranch,
+        mergeUserId,
+        currentUserId,
+      } = this.mr;
 
-        return !shouldRemoveSourceBranch &&
-          canRemoveSourceBranch &&
-          mergeUserId === currentUserId;
-      },
+      return !shouldRemoveSourceBranch && canRemoveSourceBranch && mergeUserId === currentUserId;
     },
-    methods: {
-      cancelAutomaticMerge() {
-        this.isCancellingAutoMerge = true;
-        this.service.cancelAutomaticMerge()
-          .then(res => res.data)
-          .then((data) => {
-            eventHub.$emit('UpdateWidgetData', data);
-          })
-          .catch(() => {
-            this.isCancellingAutoMerge = false;
-            Flash('Something went wrong. Please try again.');
-          });
-      },
-      removeSourceBranch() {
-        const options = {
-          sha: this.mr.sha,
-          merge_when_pipeline_succeeds: true,
-          should_remove_source_branch: true,
-        };
+  },
+  methods: {
+    cancelAutomaticMerge() {
+      this.isCancellingAutoMerge = true;
+      this.service
+        .cancelAutomaticMerge()
+        .then(res => res.data)
+        .then(data => {
+          eventHub.$emit('UpdateWidgetData', data);
+        })
+        .catch(() => {
+          this.isCancellingAutoMerge = false;
+          Flash('Something went wrong. Please try again.');
+        });
+    },
+    removeSourceBranch() {
+      const options = {
+        sha: this.mr.sha,
+        merge_when_pipeline_succeeds: true,
+        should_remove_source_branch: true,
+      };
 
-        this.isRemovingSourceBranch = true;
-        this.service.merge(options)
-          .then(res => res.data)
-          .then((data) => {
-            if (data.status === 'merge_when_pipeline_succeeds') {
-              eventHub.$emit('MRWidgetUpdateRequested');
-            }
-          })
-          .catch(() => {
-            this.isRemovingSourceBranch = false;
-            Flash('Something went wrong. Please try again.');
-          });
-      },
+      this.isRemovingSourceBranch = true;
+      this.service
+        .merge(options)
+        .then(res => res.data)
+        .then(data => {
+          if (data.status === 'merge_when_pipeline_succeeds') {
+            eventHub.$emit('MRWidgetUpdateRequested');
+          }
+        })
+        .catch(() => {
+          this.isRemovingSourceBranch = false;
+          Flash('Something went wrong. Please try again.');
+        });
     },
-  };
+  },
+};
 </script>
 <template>
   <div class="mr-widget-body media">
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue
index 8184ef33022..dc7e544dd33 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue
@@ -1,106 +1,100 @@
 <script>
-  import Flash from '~/flash';
-  import tooltip from '~/vue_shared/directives/tooltip';
-  import { s__, __ } from '~/locale';
-  import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
-  import MrWidgetAuthorTime from '../../components/mr_widget_author_time.vue';
-  import statusIcon from '../mr_widget_status_icon.vue';
-  import eventHub from '../../event_hub';
+import Flash from '~/flash';
+import tooltip from '~/vue_shared/directives/tooltip';
+import { s__, __ } from '~/locale';
+import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
+import MrWidgetAuthorTime from '../../components/mr_widget_author_time.vue';
+import statusIcon from '../mr_widget_status_icon.vue';
+import eventHub from '../../event_hub';
 
-  export default {
-    name: 'MRWidgetMerged',
-    directives: {
-      tooltip,
+export default {
+  name: 'MRWidgetMerged',
+  directives: {
+    tooltip,
+  },
+  components: {
+    MrWidgetAuthorTime,
+    statusIcon,
+    ClipboardButton,
+  },
+  props: {
+    mr: {
+      type: Object,
+      required: true,
+      default: () => ({}),
     },
-    components: {
-      MrWidgetAuthorTime,
-      statusIcon,
-      ClipboardButton,
+    service: {
+      type: Object,
+      required: true,
+      default: () => ({}),
     },
-    props: {
-      mr: {
-        type: Object,
-        required: true,
-        default: () => ({}),
-      },
-      service: {
-        type: Object,
-        required: true,
-        default: () => ({}),
-      },
+  },
+  data() {
+    return {
+      isMakingRequest: false,
+    };
+  },
+  computed: {
+    shouldShowRemoveSourceBranch() {
+      const { sourceBranchRemoved, isRemovingSourceBranch, canRemoveSourceBranch } = this.mr;
+
+      return (
+        !sourceBranchRemoved &&
+        canRemoveSourceBranch &&
+        !this.isMakingRequest &&
+        !isRemovingSourceBranch
+      );
     },
-    data() {
-      return {
-        isMakingRequest: false,
-      };
+    shouldShowSourceBranchRemoving() {
+      const { sourceBranchRemoved, isRemovingSourceBranch } = this.mr;
+      return !sourceBranchRemoved && (isRemovingSourceBranch || this.isMakingRequest);
     },
-    computed: {
-      shouldShowRemoveSourceBranch() {
-        const {
-          sourceBranchRemoved,
-          isRemovingSourceBranch,
-          canRemoveSourceBranch,
-        } = this.mr;
-
-        return !sourceBranchRemoved &&
-          canRemoveSourceBranch &&
-          !this.isMakingRequest &&
-          !isRemovingSourceBranch;
-      },
-      shouldShowSourceBranchRemoving() {
-        const {
-          sourceBranchRemoved,
-          isRemovingSourceBranch,
-        } = this.mr;
-        return !sourceBranchRemoved &&
-          (isRemovingSourceBranch || this.isMakingRequest);
-      },
-      shouldShowMergedButtons() {
-        const {
-          canRevertInCurrentMR,
-          canCherryPickInCurrentMR,
-          revertInForkPath,
-          cherryPickInForkPath,
-        } = this.mr;
+    shouldShowMergedButtons() {
+      const {
+        canRevertInCurrentMR,
+        canCherryPickInCurrentMR,
+        revertInForkPath,
+        cherryPickInForkPath,
+      } = this.mr;
 
-        return canRevertInCurrentMR ||
-          canCherryPickInCurrentMR ||
-          revertInForkPath ||
-          cherryPickInForkPath;
-      },
-      revertTitle() {
-        return s__('mrWidget|Revert this merge request in a new merge request');
-      },
-      cherryPickTitle() {
-        return s__('mrWidget|Cherry-pick this merge request in a new merge request');
-      },
-      revertLabel() {
-        return s__('mrWidget|Revert');
-      },
-      cherryPickLabel() {
-        return s__('mrWidget|Cherry-pick');
-      },
+      return (
+        canRevertInCurrentMR || canCherryPickInCurrentMR || revertInForkPath || cherryPickInForkPath
+      );
+    },
+    revertTitle() {
+      return s__('mrWidget|Revert this merge request in a new merge request');
+    },
+    cherryPickTitle() {
+      return s__('mrWidget|Cherry-pick this merge request in a new merge request');
+    },
+    revertLabel() {
+      return s__('mrWidget|Revert');
+    },
+    cherryPickLabel() {
+      return s__('mrWidget|Cherry-pick');
     },
-    methods: {
-      removeSourceBranch() {
-        this.isMakingRequest = true;
+  },
+  methods: {
+    removeSourceBranch() {
+      this.isMakingRequest = true;
 
-        this.service.removeSourceBranch()
-          .then(res => res.data)
-          .then((data) => {
-            if (data.message === 'Branch was removed') {
-              eventHub.$emit('MRWidgetUpdateRequested', () => {
-                this.isMakingRequest = false;
-              });
-            }
-          })
-          .catch(() => {
-            this.isMakingRequest = false;
-            Flash(__('Something went wrong. Please try again.'));
-          });
-      },
+      this.service
+        .removeSourceBranch()
+        .then(res => res.data)
+        .then(data => {
+          if (data.message === 'Branch was removed') {
+            eventHub.$emit('MRWidgetUpdateRequested', () => {
+              this.isMakingRequest = false;
+            });
+          }
+        })
+        .catch(() => {
+          this.isMakingRequest = false;
+          Flash(__('Something went wrong. Please try again.'));
+        });
     },
-  };
+  },
+};
 </script>
 <template>
   <div class="mr-widget-body media">
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merging.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merging.vue
index 953ddf40a51..139e64d1878 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merging.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merging.vue
@@ -1,19 +1,19 @@
 <script>
-  import statusIcon from '../mr_widget_status_icon.vue';
+import statusIcon from '../mr_widget_status_icon.vue';
 
-  export default {
-    name: 'MRWidgetMerging',
-    components: {
-      statusIcon,
+export default {
+  name: 'MRWidgetMerging',
+  components: {
+    statusIcon,
+  },
+  props: {
+    mr: {
+      type: Object,
+      required: true,
+      default: () => ({}),
     },
-    props: {
-      mr: {
-        type: Object,
-        required: true,
-        default: () => ({}),
-      },
-    },
-  };
+  },
+};
 </script>
 <template>
   <div class="mr-widget-body mr-state-locked media">
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.vue
index b0e96f74626..227e9b85f9d 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.vue
@@ -1,40 +1,48 @@
 <script>
-  import { sprintf, s__ } from '~/locale';
-  import tooltip from '~/vue_shared/directives/tooltip';
-  import statusIcon from '../mr_widget_status_icon.vue';
-  import mrWidgetMergeHelp from '../../components/mr_widget_merge_help.vue';
+import { sprintf, s__ } from '~/locale';
+import tooltip from '~/vue_shared/directives/tooltip';
+import statusIcon from '../mr_widget_status_icon.vue';
+import mrWidgetMergeHelp from '../../components/mr_widget_merge_help.vue';
 
-  export default {
-    name: 'MRWidgetMissingBranch',
-    directives: {
-      tooltip,
+export default {
+  name: 'MRWidgetMissingBranch',
+  directives: {
+    tooltip,
+  },
+  components: {
+    mrWidgetMergeHelp,
+    statusIcon,
+  },
+  props: {
+    mr: {
+      type: Object,
+      required: true,
     },
-    components: {
-      mrWidgetMergeHelp,
-      statusIcon,
+  },
+  computed: {
+    missingBranchName() {
+      return this.mr.sourceBranchRemoved ? 'source' : 'target';
     },
-    props: {
-      mr: {
-        type: Object,
-        required: true,
-      },
-    },
-    computed: {
-      missingBranchName() {
-        return this.mr.sourceBranchRemoved ? 'source' : 'target';
-      },
-      missingBranchNameMessage() {
-        return sprintf(s__('mrWidget| Please restore it or use a different %{missingBranchName} branch'), {
+    missingBranchNameMessage() {
+      return sprintf(
+        s__('mrWidget| Please restore it or use a different %{missingBranchName} branch'),
+        {
           missingBranchName: this.missingBranchName,
-        });
-      },
-      message() {
-        return sprintf(s__('mrWidget|If the %{missingBranchName} branch exists in your local repository, you can merge this merge request manually using the command line'), {
+        },
+      );
+    },
+    message() {
+      return sprintf(
+        s__(
+          'mrWidget|If the %{missingBranchName} branch exists in your local repository, you can merge this merge request manually using the command line',
+        ),
+        {
           missingBranchName: this.missingBranchName,
-        });
-      },
+        },
+      );
     },
-  };
+  },
+};
 </script>
 <template>
   <div class="mr-widget-body media">
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_not_allowed.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_not_allowed.vue
index 92eee2cf5dd..360559ae0f0 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_not_allowed.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_not_allowed.vue
@@ -1,12 +1,12 @@
 <script>
-  import StatusIcon from '../mr_widget_status_icon.vue';
+import StatusIcon from '../mr_widget_status_icon.vue';
 
-  export default {
-    name: 'MRWidgetNotAllowed',
-    components: {
-      StatusIcon,
-    },
-  };
+export default {
+  name: 'MRWidgetNotAllowed',
+  components: {
+    StatusIcon,
+  },
+};
 </script>
 
 <template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_blocked.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_blocked.vue
index 37ee5215cea..a4eb5afb21c 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_blocked.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_blocked.vue
@@ -1,12 +1,12 @@
 <script>
-  import StatusIcon from '../mr_widget_status_icon.vue';
+import StatusIcon from '../mr_widget_status_icon.vue';
 
-  export default {
-    name: 'MRWidgetPipelineBlocked',
-    components: {
-      StatusIcon,
-    },
-  };
+export default {
+  name: 'MRWidgetPipelineBlocked',
+  components: {
+    StatusIcon,
+  },
+};
 </script>
 <template>
   <div class="mr-widget-body media">
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue
index f31c7a3edb8..041fa13a8f5 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue
@@ -1,85 +1,87 @@
 <script>
-  import simplePoll from '../../../lib/utils/simple_poll';
-  import eventHub from '../../event_hub';
-  import statusIcon from '../mr_widget_status_icon.vue';
-  import Flash from '../../../flash';
+import simplePoll from '../../../lib/utils/simple_poll';
+import eventHub from '../../event_hub';
+import statusIcon from '../mr_widget_status_icon.vue';
+import Flash from '../../../flash';
 
-  export default {
-    name: 'MRWidgetRebase',
-    components: {
-      statusIcon,
+export default {
+  name: 'MRWidgetRebase',
+  components: {
+    statusIcon,
+  },
+  props: {
+    mr: {
+      type: Object,
+      required: true,
     },
-    props: {
-      mr: {
-        type: Object,
-        required: true,
-      },
-      service: {
-        type: Object,
-        required: true,
-      },
+    service: {
+      type: Object,
+      required: true,
     },
-    data() {
-      return {
-        isMakingRequest: false,
-        rebasingError: null,
-      };
+  },
+  data() {
+    return {
+      isMakingRequest: false,
+      rebasingError: null,
+    };
+  },
+  computed: {
+    status() {
+      if (this.mr.rebaseInProgress || this.isMakingRequest) {
+        return 'loading';
+      }
+      if (!this.mr.canPushToSourceBranch && !this.mr.rebaseInProgress) {
+        return 'warning';
+      }
+      return 'success';
     },
-    computed: {
-      status() {
-        if (this.mr.rebaseInProgress || this.isMakingRequest) {
-          return 'loading';
-        }
-        if (!this.mr.canPushToSourceBranch && !this.mr.rebaseInProgress) {
-          return 'warning';
-        }
-        return 'success';
-      },
-      showDisabledButton() {
-        return ['failed', 'loading'].includes(this.status);
-      },
+    showDisabledButton() {
+      return ['failed', 'loading'].includes(this.status);
     },
-    methods: {
-      rebase() {
-        this.isMakingRequest = true;
-        this.rebasingError = null;
+  },
+  methods: {
+    rebase() {
+      this.isMakingRequest = true;
+      this.rebasingError = null;
 
-        this.service.rebase()
-          .then(() => {
-            simplePoll(this.checkRebaseStatus);
-          })
-          .catch((error) => {
-            this.rebasingError = error.merge_error;
+      this.service
+        .rebase()
+        .then(() => {
+          simplePoll(this.checkRebaseStatus);
+        })
+        .catch(error => {
+          this.rebasingError = error.merge_error;
+          this.isMakingRequest = false;
+          Flash('Something went wrong. Please try again.');
+        });
+    },
+    checkRebaseStatus(continuePolling, stopPolling) {
+      this.service
+        .poll()
+        .then(res => res.data)
+        .then(res => {
+          if (res.rebase_in_progress) {
+            continuePolling();
+          } else {
             this.isMakingRequest = false;
-            Flash('Something went wrong. Please try again.');
-          });
-      },
-      checkRebaseStatus(continuePolling, stopPolling) {
-        this.service.poll()
-          .then(res => res.data)
-          .then((res) => {
-            if (res.rebase_in_progress) {
-              continuePolling();
-            } else {
-              this.isMakingRequest = false;
-
-              if (res.merge_error && res.merge_error.length) {
-                this.rebasingError = res.merge_error;
-                Flash('Something went wrong. Please try again.');
-              }
 
-              eventHub.$emit('MRWidgetUpdateRequested');
-              stopPolling();
+            if (res.merge_error && res.merge_error.length) {
+              this.rebasingError = res.merge_error;
+              Flash('Something went wrong. Please try again.');
             }
-          })
-          .catch(() => {
-            this.isMakingRequest = false;
-            Flash('Something went wrong. Please try again.');
+
+            eventHub.$emit('MRWidgetUpdateRequested');
             stopPolling();
-          });
-      },
+          }
+        })
+        .catch(() => {
+          this.isMakingRequest = false;
+          Flash('Something went wrong. Please try again.');
+          stopPolling();
+        });
     },
-  };
+  },
+};
 </script>
 <template>
   <div class="mr-widget-body media">
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/work_in_progress.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/work_in_progress.vue
index 89c9a41f316..9129fcbb918 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/work_in_progress.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/work_in_progress.vue
@@ -24,9 +24,10 @@ export default {
   methods: {
     removeWIP() {
       this.isMakingRequest = true;
-      this.service.removeWIP()
+      this.service
+        .removeWIP()
         .then(res => res.data)
-        .then((data) => {
+        .then(data => {
           eventHub.$emit('UpdateWidgetData', data);
           new window.Flash('The merge request can now be merged.', 'notice'); // eslint-disable-line
           $('.merge-request .detail-page-description .title').text(this.mr.title);
diff --git a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
index 0e445a29de4..6fd826ddf38 100644
--- a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
@@ -1,5 +1,4 @@
 <script>
-
 import Project from '~/pages/projects/project';
 import SmartInterval from '~/smart_interval';
 import createFlash from '../flash';
@@ -100,8 +99,11 @@ export default {
       return !!this.mr.relatedLinks && !this.mr.isNothingToMergeState;
     },
     shouldRenderSourceBranchRemovalStatus() {
-      return !this.mr.canRemoveSourceBranch && this.mr.shouldRemoveSourceBranch &&
-        (!this.mr.isNothingToMergeState && !this.mr.isMergedState);
+      return (
+        !this.mr.canRemoveSourceBranch &&
+        this.mr.shouldRemoveSourceBranch &&
+        (!this.mr.isNothingToMergeState && !this.mr.isMergedState)
+      );
     },
   },
   created() {
@@ -133,9 +135,10 @@ export default {
       return new MRWidgetService(endpoints);
     },
     checkStatus(cb) {
-      return this.service.checkStatus()
+      return this.service
+        .checkStatus()
         .then(res => res.data)
-        .then((data) => {
+        .then(data => {
           this.handleNotification(data);
           this.mr.setData(data);
           this.setFaviconHelper();
@@ -172,20 +175,24 @@ export default {
       return Promise.resolve();
     },
     fetchDeployments() {
-      return this.service.fetchDeployments()
+      return this.service
+        .fetchDeployments()
         .then(res => res.data)
-        .then((data) => {
+        .then(data => {
           if (data.length) {
             this.mr.deployments = data;
           }
         })
         .catch(() => {
-          createFlash('Something went wrong while fetching the environments for this merge request. Please try again.');
+          createFlash(
+            'Something went wrong while fetching the environments for this merge request. Please try again.',
+          );
         });
     },
     fetchActionsContent() {
-      this.service.fetchMergeActionsContent()
-        .then((res) => {
+      this.service
+        .fetchMergeActionsContent()
+        .then(res => {
           if (res.data) {
             const el = document.createElement('div');
             el.innerHTML = res.data;
@@ -212,22 +219,22 @@ export default {
       this.pollingInterval.stopTimer();
     },
     bindEventHubListeners() {
-      eventHub.$on('MRWidgetUpdateRequested', (cb) => {
+      eventHub.$on('MRWidgetUpdateRequested', cb => {
         this.checkStatus(cb);
       });
 
       // `params` should be an Array contains a Boolean, like `[true]`
       // Passing parameter as Boolean didn't work.
-      eventHub.$on('SetBranchRemoveFlag', (params) => {
+      eventHub.$on('SetBranchRemoveFlag', params => {
         [this.mr.isRemovingSourceBranch] = params;
       });
 
-      eventHub.$on('FailedToMerge', (mergeError) => {
+      eventHub.$on('FailedToMerge', mergeError => {
         this.mr.state = 'failedToMerge';
         this.mr.mergeError = mergeError;
       });
 
-      eventHub.$on('UpdateWidgetData', (data) => {
+      eventHub.$on('UpdateWidgetData', data => {
         this.mr.setData(data);
       });
 
-- 
cgit v1.2.1


From 3271c5f0f53d57e26274382bd36c57322b6a45fb Mon Sep 17 00:00:00 2001
From: Mike Greiling <mike@pixelcog.com>
Date: Wed, 10 Oct 2018 02:06:25 -0500
Subject: Prettify vue_shared modules

---
 .../vue_shared/components/bar_chart.vue            |  10 +-
 .../vue_shared/components/deprecated_modal.vue     | 150 ++++++-------
 .../components/file_icon/file_icon_map.js          |   4 +-
 .../javascripts/vue_shared/components/gl_modal.vue |   8 +-
 .../javascripts/vue_shared/components/icon.vue     |   1 -
 .../vue_shared/components/issue/issue_warning.vue  |  50 ++---
 .../vue_shared/components/loading_button.vue       |  56 ++---
 .../vue_shared/components/markdown/field.vue       | 236 ++++++++++-----------
 .../vue_shared/components/markdown/header.vue      | 101 ++++-----
 .../vue_shared/components/markdown/toolbar.vue     |  48 ++---
 .../components/markdown/toolbar_button.vue         |  72 +++----
 .../vue_shared/components/memory_graph.vue         |   3 +-
 .../components/notes/placeholder_note.vue          |  68 +++---
 .../components/notes/placeholder_system_note.vue   |  32 +--
 .../vue_shared/components/panel_resizer.vue        | 156 +++++++-------
 .../javascripts/vue_shared/components/pikaday.vue  | 106 ++++-----
 .../vue_shared/components/project_avatar/image.vue | 123 ++++++-----
 .../vue_shared/components/recaptcha_modal.vue      |  94 ++++----
 .../vue_shared/components/sidebar/date_picker.vue  | 182 ++++++++--------
 .../vue_shared/components/table_pagination.vue     | 206 +++++++++---------
 .../vue_shared/components/time_ago_tooltip.vue     |   4 +-
 .../vue_shared/components/toggle_button.vue        |  94 ++++----
 .../components/user_avatar/user_avatar_link.vue    |   1 -
 .../components/user_avatar/user_avatar_svg.vue     |   2 -
 .../vue_shared/mixins/ci_pagination_api_mixin.js   |  19 +-
 app/assets/javascripts/vue_shared/models/label.js  |   2 +-
 app/assets/javascripts/vue_shared/translate.js     |   9 +-
 .../vue_shared/vue_resource_interceptor.js         |   2 +-
 28 files changed, 914 insertions(+), 925 deletions(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/vue_shared/components/bar_chart.vue b/app/assets/javascripts/vue_shared/components/bar_chart.vue
index 33af7a7f1df..690dd794ba4 100644
--- a/app/assets/javascripts/vue_shared/components/bar_chart.vue
+++ b/app/assets/javascripts/vue_shared/components/bar_chart.vue
@@ -118,7 +118,9 @@ export default {
         this.rectYAxisLabelDims.height != null ? this.rectYAxisLabelDims.height / 2 : 0;
       const yCoord = this.vbHeight / 2 + rectWidth - 5;
 
-      return `translate(${this.minX + this.yAxisTextTransformPadding}, ${yCoord}) rotate(-${this.yAxisTextRotation})`;
+      return `translate(${this.minX + this.yAxisTextTransformPadding}, ${yCoord}) rotate(-${
+        this.yAxisTextRotation
+      })`;
     },
   },
   mounted() {
@@ -207,8 +209,7 @@ export default {
 
       renderedYAxis.selectAll('.tick').each(function createTickLines(d, i) {
         if (i > 0) {
-          d3
-            .select(this)
+          d3.select(this)
             .select('line')
             .attr('x2', width)
             .attr('class', 'axis-tick');
@@ -217,8 +218,7 @@ export default {
 
       // Add the panning capabilities
       if (this.isPanAvailable) {
-        d3
-          .select(this.$refs.baseSvg)
+        d3.select(this.$refs.baseSvg)
           .call(this.zoom)
           .on('wheel.zoom', null); // This disables the pan of the graph with the scroll of the mouse wheel
       }
diff --git a/app/assets/javascripts/vue_shared/components/deprecated_modal.vue b/app/assets/javascripts/vue_shared/components/deprecated_modal.vue
index 9c1e5c68649..4d63296e332 100644
--- a/app/assets/javascripts/vue_shared/components/deprecated_modal.vue
+++ b/app/assets/javascripts/vue_shared/components/deprecated_modal.vue
@@ -1,85 +1,85 @@
 <script>
-  /* eslint-disable vue/require-default-prop */
-  export default {
-    name: 'DeprecatedModal', // use GlModal instead
+/* eslint-disable vue/require-default-prop */
+export default {
+  name: 'DeprecatedModal', // use GlModal instead
 
-    props: {
-      id: {
-        type: String,
-        required: false,
-      },
-      title: {
-        type: String,
-        required: false,
-      },
-      text: {
-        type: String,
-        required: false,
-      },
-      hideFooter: {
-        type: Boolean,
-        required: false,
-        default: false,
-      },
-      kind: {
-        type: String,
-        required: false,
-        default: 'primary',
-      },
-      modalDialogClass: {
-        type: String,
-        required: false,
-        default: '',
-      },
-      closeKind: {
-        type: String,
-        required: false,
-        default: 'default',
-      },
-      closeButtonLabel: {
-        type: String,
-        required: false,
-        default: 'Cancel',
-      },
-      primaryButtonLabel: {
-        type: String,
-        required: false,
-        default: '',
-      },
-      secondaryButtonLabel: {
-        type: String,
-        required: false,
-        default: '',
-      },
-      submitDisabled: {
-        type: Boolean,
-        required: false,
-        default: false,
-      },
+  props: {
+    id: {
+      type: String,
+      required: false,
     },
+    title: {
+      type: String,
+      required: false,
+    },
+    text: {
+      type: String,
+      required: false,
+    },
+    hideFooter: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    kind: {
+      type: String,
+      required: false,
+      default: 'primary',
+    },
+    modalDialogClass: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    closeKind: {
+      type: String,
+      required: false,
+      default: 'default',
+    },
+    closeButtonLabel: {
+      type: String,
+      required: false,
+      default: 'Cancel',
+    },
+    primaryButtonLabel: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    secondaryButtonLabel: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    submitDisabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
 
-    computed: {
-      btnKindClass() {
-        return {
-          [`btn-${this.kind}`]: true,
-        };
-      },
-      btnCancelKindClass() {
-        return {
-          [`btn-${this.closeKind}`]: true,
-        };
-      },
+  computed: {
+    btnKindClass() {
+      return {
+        [`btn-${this.kind}`]: true,
+      };
+    },
+    btnCancelKindClass() {
+      return {
+        [`btn-${this.closeKind}`]: true,
+      };
     },
+  },
 
-    methods: {
-      emitCancel(event) {
-        this.$emit('cancel', event);
-      },
-      emitSubmit(event) {
-        this.$emit('submit', event);
-      },
+  methods: {
+    emitCancel(event) {
+      this.$emit('cancel', event);
+    },
+    emitSubmit(event) {
+      this.$emit('submit', event);
     },
-  };
+  },
+};
 </script>
 
 <template>
diff --git a/app/assets/javascripts/vue_shared/components/file_icon/file_icon_map.js b/app/assets/javascripts/vue_shared/components/file_icon/file_icon_map.js
index 9bca1993ccc..19611b14be4 100644
--- a/app/assets/javascripts/vue_shared/components/file_icon/file_icon_map.js
+++ b/app/assets/javascripts/vue_shared/components/file_icon/file_icon_map.js
@@ -583,7 +583,5 @@ const fileNameIcons = {
 };
 
 export default function getIconForFile(name) {
-  return fileNameIcons[name] ||
-         fileExtensionIcons[name ? name.split('.').pop() : ''] ||
-         '';
+  return fileNameIcons[name] || fileExtensionIcons[name ? name.split('.').pop() : ''] || '';
 }
diff --git a/app/assets/javascripts/vue_shared/components/gl_modal.vue b/app/assets/javascripts/vue_shared/components/gl_modal.vue
index b023c5cfeb1..49b12e854b7 100644
--- a/app/assets/javascripts/vue_shared/components/gl_modal.vue
+++ b/app/assets/javascripts/vue_shared/components/gl_modal.vue
@@ -41,10 +41,14 @@ export default {
     },
   },
   mounted() {
-    $(this.$el).on('shown.bs.modal', this.opened).on('hidden.bs.modal', this.closed);
+    $(this.$el)
+      .on('shown.bs.modal', this.opened)
+      .on('hidden.bs.modal', this.closed);
   },
   beforeDestroy() {
-    $(this.$el).off('shown.bs.modal', this.opened).off('hidden.bs.modal', this.closed);
+    $(this.$el)
+      .off('shown.bs.modal', this.opened)
+      .off('hidden.bs.modal', this.closed);
   },
   methods: {
     emitCancel(event) {
diff --git a/app/assets/javascripts/vue_shared/components/icon.vue b/app/assets/javascripts/vue_shared/components/icon.vue
index 5e0e7315e99..e6a8ae65692 100644
--- a/app/assets/javascripts/vue_shared/components/icon.vue
+++ b/app/assets/javascripts/vue_shared/components/icon.vue
@@ -1,5 +1,4 @@
 <script>
-
 // only allow classes in images.scss e.g. s12
 const validSizes = [8, 10, 12, 16, 18, 24, 32, 48, 72];
 let iconValidator = () => true;
diff --git a/app/assets/javascripts/vue_shared/components/issue/issue_warning.vue b/app/assets/javascripts/vue_shared/components/issue/issue_warning.vue
index ca8ce554588..335a10ec78b 100644
--- a/app/assets/javascripts/vue_shared/components/issue/issue_warning.vue
+++ b/app/assets/javascripts/vue_shared/components/issue/issue_warning.vue
@@ -1,34 +1,34 @@
 <script>
-  import icon from '../../../vue_shared/components/icon.vue';
+import icon from '../../../vue_shared/components/icon.vue';
 
-  export default {
-    components: {
-      icon,
+export default {
+  components: {
+    icon,
+  },
+  props: {
+    isLocked: {
+      type: Boolean,
+      default: false,
+      required: false,
     },
-    props: {
-      isLocked: {
-        type: Boolean,
-        default: false,
-        required: false,
-      },
-      isConfidential: {
-        type: Boolean,
-        default: false,
-        required: false,
-      },
+    isConfidential: {
+      type: Boolean,
+      default: false,
+      required: false,
     },
-    computed: {
-      warningIcon() {
-        if (this.isConfidential) return 'eye-slash';
-        if (this.isLocked) return 'lock';
+  },
+  computed: {
+    warningIcon() {
+      if (this.isConfidential) return 'eye-slash';
+      if (this.isLocked) return 'lock';
 
-        return '';
-      },
-      isLockedAndConfidential() {
-        return this.isConfidential && this.isLocked;
-      },
+      return '';
     },
-  };
+    isLockedAndConfidential() {
+      return this.isConfidential && this.isLocked;
+    },
+  },
+};
 </script>
 <template>
   <div class="issuable-note-warning">
diff --git a/app/assets/javascripts/vue_shared/components/loading_button.vue b/app/assets/javascripts/vue_shared/components/loading_button.vue
index 4cbd3e6429d..f9b7fd5b1f9 100644
--- a/app/assets/javascripts/vue_shared/components/loading_button.vue
+++ b/app/assets/javascripts/vue_shared/components/loading_button.vue
@@ -1,6 +1,6 @@
 <script>
-  /* eslint-disable vue/require-default-prop */
-  /* This is a re-usable vue component for rendering a button
+/* eslint-disable vue/require-default-prop */
+/* This is a re-usable vue component for rendering a button
     that will probably be sending off ajax requests and need
     to show the loading status by setting the `loading` option.
     This can also be used for initial page load when you don't
@@ -17,34 +17,34 @@
 
   */
 
-  export default {
-    props: {
-      loading: {
-        type: Boolean,
-        required: false,
-        default: false,
-      },
-      disabled: {
-        type: Boolean,
-        required: false,
-        default: false,
-      },
-      label: {
-        type: String,
-        required: false,
-      },
-      containerClass: {
-        type: [String, Array, Object],
-        required: false,
-        default: 'btn btn-align-content',
-      },
+export default {
+  props: {
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false,
     },
-    methods: {
-      onClick(e) {
-        this.$emit('click', e);
-      },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false,
     },
-  };
+    label: {
+      type: String,
+      required: false,
+    },
+    containerClass: {
+      type: [String, Array, Object],
+      required: false,
+      default: 'btn btn-align-content',
+    },
+  },
+  methods: {
+    onClick(e) {
+      this.$emit('click', e);
+    },
+  },
+};
 </script>
 
 <template>
diff --git a/app/assets/javascripts/vue_shared/components/markdown/field.vue b/app/assets/javascripts/vue_shared/components/markdown/field.vue
index 10e8ddad9cd..4687de62614 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/field.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/field.vue
@@ -1,141 +1,141 @@
 <script>
-  import $ from 'jquery';
-  import { s__ } from '~/locale';
-  import Flash from '../../../flash';
-  import GLForm from '../../../gl_form';
-  import markdownHeader from './header.vue';
-  import markdownToolbar from './toolbar.vue';
-  import icon from '../icon.vue';
+import $ from 'jquery';
+import { s__ } from '~/locale';
+import Flash from '../../../flash';
+import GLForm from '../../../gl_form';
+import markdownHeader from './header.vue';
+import markdownToolbar from './toolbar.vue';
+import icon from '../icon.vue';
 
-  export default {
-    components: {
-      markdownHeader,
-      markdownToolbar,
-      icon,
+export default {
+  components: {
+    markdownHeader,
+    markdownToolbar,
+    icon,
+  },
+  props: {
+    markdownPreviewPath: {
+      type: String,
+      required: false,
+      default: '',
     },
-    props: {
-      markdownPreviewPath: {
-        type: String,
-        required: false,
-        default: '',
-      },
-      markdownDocsPath: {
-        type: String,
-        required: true,
-      },
-      markdownVersion: {
-        type: Number,
-        required: false,
-        default: 0,
-      },
-      addSpacingClasses: {
-        type: Boolean,
-        required: false,
-        default: true,
-      },
-      quickActionsDocsPath: {
-        type: String,
-        required: false,
-        default: '',
-      },
-      canAttachFile: {
-        type: Boolean,
-        required: false,
-        default: true,
-      },
-      enableAutocomplete: {
-        type: Boolean,
-        required: false,
-        default: true,
-      },
+    markdownDocsPath: {
+      type: String,
+      required: true,
     },
-    data() {
-      return {
-        markdownPreview: '',
-        referencedCommands: '',
-        referencedUsers: '',
-        markdownPreviewLoading: false,
-        previewMarkdown: false,
-      };
+    markdownVersion: {
+      type: Number,
+      required: false,
+      default: 0,
     },
-    computed: {
-      shouldShowReferencedUsers() {
-        const referencedUsersThreshold = 10;
-        return this.referencedUsers.length >= referencedUsersThreshold;
-      },
+    addSpacingClasses: {
+      type: Boolean,
+      required: false,
+      default: true,
     },
-    mounted() {
-      /*
-        GLForm class handles all the toolbar buttons
-      */
-      return new GLForm($(this.$refs['gl-form']), {
-        emojis: this.enableAutocomplete,
-        members: this.enableAutocomplete,
-        issues: this.enableAutocomplete,
-        mergeRequests: this.enableAutocomplete,
-        epics: this.enableAutocomplete,
-        milestones: this.enableAutocomplete,
-        labels: this.enableAutocomplete,
-        snippets: this.enableAutocomplete,
-      });
+    quickActionsDocsPath: {
+      type: String,
+      required: false,
+      default: '',
     },
-    beforeDestroy() {
-      const glForm = $(this.$refs['gl-form']).data('glForm');
-      if (glForm) {
-        glForm.destroy();
-      }
+    canAttachFile: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    enableAutocomplete: {
+      type: Boolean,
+      required: false,
+      default: true,
     },
-    methods: {
-      showPreviewTab() {
-        if (this.previewMarkdown) return;
+  },
+  data() {
+    return {
+      markdownPreview: '',
+      referencedCommands: '',
+      referencedUsers: '',
+      markdownPreviewLoading: false,
+      previewMarkdown: false,
+    };
+  },
+  computed: {
+    shouldShowReferencedUsers() {
+      const referencedUsersThreshold = 10;
+      return this.referencedUsers.length >= referencedUsersThreshold;
+    },
+  },
+  mounted() {
+    /*
+        GLForm class handles all the toolbar buttons
+      */
+    return new GLForm($(this.$refs['gl-form']), {
+      emojis: this.enableAutocomplete,
+      members: this.enableAutocomplete,
+      issues: this.enableAutocomplete,
+      mergeRequests: this.enableAutocomplete,
+      epics: this.enableAutocomplete,
+      milestones: this.enableAutocomplete,
+      labels: this.enableAutocomplete,
+      snippets: this.enableAutocomplete,
+    });
+  },
+  beforeDestroy() {
+    const glForm = $(this.$refs['gl-form']).data('glForm');
+    if (glForm) {
+      glForm.destroy();
+    }
+  },
+  methods: {
+    showPreviewTab() {
+      if (this.previewMarkdown) return;
 
-        this.previewMarkdown = true;
+      this.previewMarkdown = true;
 
-        /*
+      /*
           Can't use `$refs` as the component is technically in the parent component
           so we access the VNode & then get the element
         */
-        const text = this.$slots.textarea[0].elm.value;
+      const text = this.$slots.textarea[0].elm.value;
 
-        if (text) {
-          this.markdownPreviewLoading = true;
-          this.$http
-            .post(this.versionedPreviewPath(), { text })
-              .then(resp => resp.json())
-              .then(data => this.renderMarkdown(data))
-              .catch(() => new Flash(s__('Error loading markdown preview')));
-        } else {
-          this.renderMarkdown();
-        }
-      },
+      if (text) {
+        this.markdownPreviewLoading = true;
+        this.$http
+          .post(this.versionedPreviewPath(), { text })
+          .then(resp => resp.json())
+          .then(data => this.renderMarkdown(data))
+          .catch(() => new Flash(s__('Error loading markdown preview')));
+      } else {
+        this.renderMarkdown();
+      }
+    },
 
-      showWriteTab() {
-        this.markdownPreview = '';
-        this.previewMarkdown = false;
-      },
+    showWriteTab() {
+      this.markdownPreview = '';
+      this.previewMarkdown = false;
+    },
 
-      renderMarkdown(data = {}) {
-        this.markdownPreviewLoading = false;
-        this.markdownPreview = data.body || 'Nothing to preview.';
+    renderMarkdown(data = {}) {
+      this.markdownPreviewLoading = false;
+      this.markdownPreview = data.body || 'Nothing to preview.';
 
-        if (data.references) {
-          this.referencedCommands = data.references.commands;
-          this.referencedUsers = data.references.users;
-        }
+      if (data.references) {
+        this.referencedCommands = data.references.commands;
+        this.referencedUsers = data.references.users;
+      }
 
-        this.$nextTick(() => {
-          $(this.$refs['markdown-preview']).renderGFM();
-        });
-      },
+      this.$nextTick(() => {
+        $(this.$refs['markdown-preview']).renderGFM();
+      });
+    },
 
-      versionedPreviewPath() {
-        const { markdownPreviewPath, markdownVersion } = this;
-        return `${markdownPreviewPath}${
-          markdownPreviewPath.indexOf('?') === -1 ? '?' : '&'
-          }markdown_version=${markdownVersion}`;
-      },
+    versionedPreviewPath() {
+      const { markdownPreviewPath, markdownVersion } = this;
+      return `${markdownPreviewPath}${
+        markdownPreviewPath.indexOf('?') === -1 ? '?' : '&'
+      }markdown_version=${markdownVersion}`;
     },
-  };
+  },
+};
 </script>
 
 <template>
diff --git a/app/assets/javascripts/vue_shared/components/markdown/header.vue b/app/assets/javascripts/vue_shared/components/markdown/header.vue
index ccd53158820..704adf7864f 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/header.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/header.vue
@@ -1,63 +1,64 @@
 <script>
-  import $ from 'jquery';
-  import tooltip from '../../directives/tooltip';
-  import toolbarButton from './toolbar_button.vue';
-  import icon from '../icon.vue';
+import $ from 'jquery';
+import tooltip from '../../directives/tooltip';
+import toolbarButton from './toolbar_button.vue';
+import icon from '../icon.vue';
 
-  export default {
-    directives: {
-      tooltip,
+export default {
+  directives: {
+    tooltip,
+  },
+  components: {
+    toolbarButton,
+    icon,
+  },
+  props: {
+    previewMarkdown: {
+      type: Boolean,
+      required: true,
     },
-    components: {
-      toolbarButton,
-      icon,
+  },
+  computed: {
+    mdTable() {
+      return [
+        '| header | header |',
+        '| ------ | ------ |',
+        '| cell | cell |',
+        '| cell | cell |',
+      ].join('\n');
     },
-    props: {
-      previewMarkdown: {
-        type: Boolean,
-        required: true,
-      },
+  },
+  mounted() {
+    $(document).on('markdown-preview:show.vue', this.previewMarkdownTab);
+    $(document).on('markdown-preview:hide.vue', this.writeMarkdownTab);
+  },
+  beforeDestroy() {
+    $(document).off('markdown-preview:show.vue', this.previewMarkdownTab);
+    $(document).off('markdown-preview:hide.vue', this.writeMarkdownTab);
+  },
+  methods: {
+    isValid(form) {
+      return (
+        !form ||
+        (form.find('.js-vue-markdown-field').length && $(this.$el).closest('form')[0] === form[0])
+      );
     },
-    computed: {
-      mdTable() {
-        return [
-          '| header | header |',
-          '| ------ | ------ |',
-          '| cell | cell |',
-          '| cell | cell |',
-        ].join('\n');
-      },
-    },
-    mounted() {
-      $(document).on('markdown-preview:show.vue', this.previewMarkdownTab);
-      $(document).on('markdown-preview:hide.vue', this.writeMarkdownTab);
-    },
-    beforeDestroy() {
-      $(document).off('markdown-preview:show.vue', this.previewMarkdownTab);
-      $(document).off('markdown-preview:hide.vue', this.writeMarkdownTab);
-    },
-    methods: {
-      isValid(form) {
-        return !form ||
-          form.find('.js-vue-markdown-field').length &&
-          $(this.$el).closest('form')[0] === form[0];
-      },
 
-      previewMarkdownTab(event, form) {
-        if (event.target.blur) event.target.blur();
-        if (!this.isValid(form)) return;
+    previewMarkdownTab(event, form) {
+      if (event.target.blur) event.target.blur();
+      if (!this.isValid(form)) return;
 
-        this.$emit('preview-markdown');
-      },
+      this.$emit('preview-markdown');
+    },
 
-      writeMarkdownTab(event, form) {
-        if (event.target.blur) event.target.blur();
-        if (!this.isValid(form)) return;
+    writeMarkdownTab(event, form) {
+      if (event.target.blur) event.target.blur();
+      if (!this.isValid(form)) return;
 
-        this.$emit('write-markdown');
-      },
+      this.$emit('write-markdown');
     },
-  };
+  },
+};
 </script>
 
 <template>
diff --git a/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue b/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue
index c45dafa9807..feb7b8f227e 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue
@@ -1,32 +1,32 @@
 <script>
-  import { Link } from '@gitlab-org/gitlab-ui';
+import { Link } from '@gitlab-org/gitlab-ui';
 
-  export default {
-    components: {
-      'gl-link': Link,
+export default {
+  components: {
+    'gl-link': Link,
+  },
+  props: {
+    markdownDocsPath: {
+      type: String,
+      required: true,
     },
-    props: {
-      markdownDocsPath: {
-        type: String,
-        required: true,
-      },
-      quickActionsDocsPath: {
-        type: String,
-        required: false,
-        default: '',
-      },
-      canAttachFile: {
-        type: Boolean,
-        required: false,
-        default: true,
-      },
+    quickActionsDocsPath: {
+      type: String,
+      required: false,
+      default: '',
     },
-    computed: {
-      hasQuickActionsDocsPath() {
-        return this.quickActionsDocsPath !== '';
-      },
+    canAttachFile: {
+      type: Boolean,
+      required: false,
+      default: true,
     },
-  };
+  },
+  computed: {
+    hasQuickActionsDocsPath() {
+      return this.quickActionsDocsPath !== '';
+    },
+  },
+};
 </script>
 
 <template>
diff --git a/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue b/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue
index bda33636369..3e89e1c1e75 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue
@@ -1,44 +1,44 @@
 <script>
-  import tooltip from '../../directives/tooltip';
-  import icon from '../icon.vue';
+import tooltip from '../../directives/tooltip';
+import icon from '../icon.vue';
 
-  export default {
-    components: {
-      icon,
+export default {
+  components: {
+    icon,
+  },
+  directives: {
+    tooltip,
+  },
+  props: {
+    buttonTitle: {
+      type: String,
+      required: true,
     },
-    directives: {
-      tooltip,
+    icon: {
+      type: String,
+      required: true,
     },
-    props: {
-      buttonTitle: {
-        type: String,
-        required: true,
-      },
-      icon: {
-        type: String,
-        required: true,
-      },
-      tag: {
-        type: String,
-        required: true,
-      },
-      tagBlock: {
-        type: String,
-        required: false,
-        default: '',
-      },
-      tagSelect: {
-        type: String,
-        required: false,
-        default: '',
-      },
-      prepend: {
-        type: Boolean,
-        required: false,
-        default: false,
-      },
+    tag: {
+      type: String,
+      required: true,
     },
-  };
+    tagBlock: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    tagSelect: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    prepend: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+};
 </script>
 
 <template>
diff --git a/app/assets/javascripts/vue_shared/components/memory_graph.vue b/app/assets/javascripts/vue_shared/components/memory_graph.vue
index 552a92541be..964dedb38c4 100644
--- a/app/assets/javascripts/vue_shared/components/memory_graph.vue
+++ b/app/assets/javascripts/vue_shared/components/memory_graph.vue
@@ -41,7 +41,8 @@ export default {
       // Find metric timestamp which is closest to deploymentTime
       timestampDiff = Math.abs(metricTimestamps[0] - median);
       metricTimestamps.forEach((timestamp, index) => {
-        if (index === 0) { // Skip first element
+        if (index === 0) {
+          // Skip first element
           return;
         }
 
diff --git a/app/assets/javascripts/vue_shared/components/notes/placeholder_note.vue b/app/assets/javascripts/vue_shared/components/notes/placeholder_note.vue
index 38115f268bb..dcad79e521d 100644
--- a/app/assets/javascripts/vue_shared/components/notes/placeholder_note.vue
+++ b/app/assets/javascripts/vue_shared/components/notes/placeholder_note.vue
@@ -1,41 +1,39 @@
 <script>
-  /**
-   * Common component to render a placeholder note and user information.
-   *
-   * This component needs to be used with a vuex store.
-   * That vuex store needs to have a `getUserData` getter that contains
-   * {
-   *   path: String,
-   *   avatar_url: String,
-   *   name: String,
-   *   username: String,
-   * }
-   *
-   * @example
-   * <placeholder-note
-   *   :note="{body: 'This is a note'}"
-   *   />
-   */
-  import { mapGetters } from 'vuex';
-  import userAvatarLink from '../user_avatar/user_avatar_link.vue';
+/**
+ * Common component to render a placeholder note and user information.
+ *
+ * This component needs to be used with a vuex store.
+ * That vuex store needs to have a `getUserData` getter that contains
+ * {
+ *   path: String,
+ *   avatar_url: String,
+ *   name: String,
+ *   username: String,
+ * }
+ *
+ * @example
+ * <placeholder-note
+ *   :note="{body: 'This is a note'}"
+ *   />
+ */
+import { mapGetters } from 'vuex';
+import userAvatarLink from '../user_avatar/user_avatar_link.vue';
 
-  export default {
-    name: 'PlaceholderNote',
-    components: {
-      userAvatarLink,
+export default {
+  name: 'PlaceholderNote',
+  components: {
+    userAvatarLink,
+  },
+  props: {
+    note: {
+      type: Object,
+      required: true,
     },
-    props: {
-      note: {
-        type: Object,
-        required: true,
-      },
-    },
-    computed: {
-      ...mapGetters([
-        'getUserData',
-      ]),
-    },
-  };
+  },
+  computed: {
+    ...mapGetters(['getUserData']),
+  },
+};
 </script>
 
 <template>
diff --git a/app/assets/javascripts/vue_shared/components/notes/placeholder_system_note.vue b/app/assets/javascripts/vue_shared/components/notes/placeholder_system_note.vue
index 95e2b38e292..674f923478d 100644
--- a/app/assets/javascripts/vue_shared/components/notes/placeholder_system_note.vue
+++ b/app/assets/javascripts/vue_shared/components/notes/placeholder_system_note.vue
@@ -1,21 +1,21 @@
 <script>
-  /**
-   * Common component to render a placeholder system note.
-   *
-   * @example
-   * <placeholder-system-note
-   *  :note="{ body: 'Commands are being applied'}"
-   *  />
-   */
-  export default {
-    name: 'PlaceholderSystemNote',
-    props: {
-      note: {
-        type: Object,
-        required: true,
-      },
+/**
+ * Common component to render a placeholder system note.
+ *
+ * @example
+ * <placeholder-system-note
+ *  :note="{ body: 'Commands are being applied'}"
+ *  />
+ */
+export default {
+  name: 'PlaceholderSystemNote',
+  props: {
+    note: {
+      type: Object,
+      required: true,
     },
-  };
+  },
+};
 </script>
 
 <template>
diff --git a/app/assets/javascripts/vue_shared/components/panel_resizer.vue b/app/assets/javascripts/vue_shared/components/panel_resizer.vue
index 7947ae1e4da..bf736a378dd 100644
--- a/app/assets/javascripts/vue_shared/components/panel_resizer.vue
+++ b/app/assets/javascripts/vue_shared/components/panel_resizer.vue
@@ -1,90 +1,90 @@
 <script>
-  export default {
-    props: {
-      startSize: {
-        type: Number,
-        required: true,
-      },
-      side: {
-        type: String,
-        required: true,
-      },
-      minSize: {
-        type: Number,
-        required: false,
-        default: 0,
-      },
-      maxSize: {
-        type: Number,
-        required: false,
-        default: Number.MAX_VALUE,
-      },
-      enabled: {
-        type: Boolean,
-        required: false,
-        default: true,
-      },
+export default {
+  props: {
+    startSize: {
+      type: Number,
+      required: true,
     },
-    data() {
-      return {
-        size: this.startSize,
-      };
+    side: {
+      type: String,
+      required: true,
     },
-    computed: {
-      className() {
-        return `drag-${this.side}`;
-      },
-      cursorStyle() {
-        if (this.enabled) {
-          return { cursor: 'ew-resize' };
-        }
-        return {};
-      },
+    minSize: {
+      type: Number,
+      required: false,
+      default: 0,
     },
-    methods: {
-      resetSize(e) {
-        e.preventDefault();
-        this.$emit('resize-start', this.size);
+    maxSize: {
+      type: Number,
+      required: false,
+      default: Number.MAX_VALUE,
+    },
+    enabled: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      size: this.startSize,
+    };
+  },
+  computed: {
+    className() {
+      return `drag-${this.side}`;
+    },
+    cursorStyle() {
+      if (this.enabled) {
+        return { cursor: 'ew-resize' };
+      }
+      return {};
+    },
+  },
+  methods: {
+    resetSize(e) {
+      e.preventDefault();
+      this.$emit('resize-start', this.size);
 
-        this.size = this.startSize;
-        this.$emit('update:size', this.size);
+      this.size = this.startSize;
+      this.$emit('update:size', this.size);
 
-        // End resizing on next tick so that listeners can react to DOM changes
-        this.$nextTick(() => {
-          this.$emit('resize-end', this.size);
-        });
-      },
-      startDrag(e) {
-        if (this.enabled) {
-          e.preventDefault();
-          this.startPos = e.clientX;
-          this.currentStartSize = this.size;
-          document.addEventListener('mousemove', this.drag);
-          document.addEventListener('mouseup', this.endDrag, { once: true });
-          this.$emit('resize-start', this.size);
-        }
-      },
-      drag(e) {
+      // End resizing on next tick so that listeners can react to DOM changes
+      this.$nextTick(() => {
+        this.$emit('resize-end', this.size);
+      });
+    },
+    startDrag(e) {
+      if (this.enabled) {
         e.preventDefault();
-        let moved = e.clientX - this.startPos;
-        if (this.side === 'left') moved = -moved;
-        let newSize = this.currentStartSize + moved;
-        if (newSize < this.minSize) {
-          newSize = this.minSize;
-        } else if (newSize > this.maxSize) {
-          newSize = this.maxSize;
-        }
-        this.size = newSize;
+        this.startPos = e.clientX;
+        this.currentStartSize = this.size;
+        document.addEventListener('mousemove', this.drag);
+        document.addEventListener('mouseup', this.endDrag, { once: true });
+        this.$emit('resize-start', this.size);
+      }
+    },
+    drag(e) {
+      e.preventDefault();
+      let moved = e.clientX - this.startPos;
+      if (this.side === 'left') moved = -moved;
+      let newSize = this.currentStartSize + moved;
+      if (newSize < this.minSize) {
+        newSize = this.minSize;
+      } else if (newSize > this.maxSize) {
+        newSize = this.maxSize;
+      }
+      this.size = newSize;
 
-        this.$emit('update:size', newSize);
-      },
-      endDrag(e) {
-        e.preventDefault();
-        document.removeEventListener('mousemove', this.drag);
-        this.$emit('resize-end', this.size);
-      },
+      this.$emit('update:size', newSize);
+    },
+    endDrag(e) {
+      e.preventDefault();
+      document.removeEventListener('mousemove', this.drag);
+      this.$emit('resize-end', this.size);
     },
-  };
+  },
+};
 </script>
 
 <template>
diff --git a/app/assets/javascripts/vue_shared/components/pikaday.vue b/app/assets/javascripts/vue_shared/components/pikaday.vue
index bfeece12077..782d8e3abf6 100644
--- a/app/assets/javascripts/vue_shared/components/pikaday.vue
+++ b/app/assets/javascripts/vue_shared/components/pikaday.vue
@@ -1,62 +1,62 @@
 <script>
-  import Pikaday from 'pikaday';
-  import { parsePikadayDate, pikadayToString } from '../../lib/utils/datefix';
+import Pikaday from 'pikaday';
+import { parsePikadayDate, pikadayToString } from '../../lib/utils/datefix';
 
-  export default {
-    name: 'DatePicker',
-    props: {
-      label: {
-        type: String,
-        required: false,
-        default: 'Date picker',
-      },
-      selectedDate: {
-        type: Date,
-        required: false,
-        default: null,
-      },
-      minDate: {
-        type: Date,
-        required: false,
-        default: null,
-      },
-      maxDate: {
-        type: Date,
-        required: false,
-        default: null,
-      },
+export default {
+  name: 'DatePicker',
+  props: {
+    label: {
+      type: String,
+      required: false,
+      default: 'Date picker',
     },
-    mounted() {
-      this.calendar = new Pikaday({
-        field: this.$el.querySelector('.dropdown-menu-toggle'),
-        theme: 'gitlab-theme animate-picker',
-        format: 'yyyy-mm-dd',
-        container: this.$el,
-        defaultDate: this.selectedDate,
-        setDefaultDate: !!this.selectedDate,
-        minDate: this.minDate,
-        maxDate: this.maxDate,
-        parse: dateString => parsePikadayDate(dateString),
-        toString: date => pikadayToString(date),
-        onSelect: this.selected.bind(this),
-        onClose: this.toggled.bind(this),
-      });
-
-      this.$el.append(this.calendar.el);
-      this.calendar.show();
+    selectedDate: {
+      type: Date,
+      required: false,
+      default: null,
+    },
+    minDate: {
+      type: Date,
+      required: false,
+      default: null,
     },
-    beforeDestroy() {
-      this.calendar.destroy();
+    maxDate: {
+      type: Date,
+      required: false,
+      default: null,
+    },
+  },
+  mounted() {
+    this.calendar = new Pikaday({
+      field: this.$el.querySelector('.dropdown-menu-toggle'),
+      theme: 'gitlab-theme animate-picker',
+      format: 'yyyy-mm-dd',
+      container: this.$el,
+      defaultDate: this.selectedDate,
+      setDefaultDate: !!this.selectedDate,
+      minDate: this.minDate,
+      maxDate: this.maxDate,
+      parse: dateString => parsePikadayDate(dateString),
+      toString: date => pikadayToString(date),
+      onSelect: this.selected.bind(this),
+      onClose: this.toggled.bind(this),
+    });
+
+    this.$el.append(this.calendar.el);
+    this.calendar.show();
+  },
+  beforeDestroy() {
+    this.calendar.destroy();
+  },
+  methods: {
+    selected(dateText) {
+      this.$emit('newDateSelected', this.calendar.toString(dateText));
     },
-    methods: {
-      selected(dateText) {
-        this.$emit('newDateSelected', this.calendar.toString(dateText));
-      },
-      toggled() {
-        this.$emit('hidePicker');
-      },
+    toggled() {
+      this.$emit('hidePicker');
     },
-  };
+  },
+};
 </script>
 
 <template>
diff --git a/app/assets/javascripts/vue_shared/components/project_avatar/image.vue b/app/assets/javascripts/vue_shared/components/project_avatar/image.vue
index 97ca4d93bd7..1a2fd2ad985 100644
--- a/app/assets/javascripts/vue_shared/components/project_avatar/image.vue
+++ b/app/assets/javascripts/vue_shared/components/project_avatar/image.vue
@@ -1,6 +1,5 @@
 <script>
-
-  /* This is a re-usable vue component for rendering a project avatar that
+/* This is a re-usable vue component for rendering a project avatar that
     does not need to link to the project's profile. The image and an optional
     tooltip can be configured by props passed to this component.
 
@@ -16,70 +15,70 @@
 
   */
 
-  import defaultAvatarUrl from 'images/no_avatar.png';
-  import { placeholderImage } from '../../../lazy_loader';
-  import tooltip from '../../directives/tooltip';
+import defaultAvatarUrl from 'images/no_avatar.png';
+import { placeholderImage } from '../../../lazy_loader';
+import tooltip from '../../directives/tooltip';
 
-  export default {
-    name: 'ProjectAvatarImage',
-    directives: {
-      tooltip,
+export default {
+  name: 'ProjectAvatarImage',
+  directives: {
+    tooltip,
+  },
+  props: {
+    lazy: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    imgSrc: {
+      type: String,
+      required: false,
+      default: defaultAvatarUrl,
+    },
+    cssClasses: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    imgAlt: {
+      type: String,
+      required: false,
+      default: 'project avatar',
+    },
+    size: {
+      type: Number,
+      required: false,
+      default: 20,
+    },
+    tooltipText: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    tooltipPlacement: {
+      type: String,
+      required: false,
+      default: 'top',
+    },
+  },
+  computed: {
+    // API response sends null when gravatar is disabled and
+    // we provide an empty string when we use it inside project avatar link.
+    // In both cases we should render the defaultAvatarUrl
+    sanitizedSource() {
+      return this.imgSrc === '' || this.imgSrc === null ? defaultAvatarUrl : this.imgSrc;
+    },
+    resultantSrcAttribute() {
+      return this.lazy ? placeholderImage : this.sanitizedSource;
     },
-    props: {
-      lazy: {
-        type: Boolean,
-        required: false,
-        default: false,
-      },
-      imgSrc: {
-        type: String,
-        required: false,
-        default: defaultAvatarUrl,
-      },
-      cssClasses: {
-        type: String,
-        required: false,
-        default: '',
-      },
-      imgAlt: {
-        type: String,
-        required: false,
-        default: 'project avatar',
-      },
-      size: {
-        type: Number,
-        required: false,
-        default: 20,
-      },
-      tooltipText: {
-        type: String,
-        required: false,
-        default: '',
-      },
-      tooltipPlacement: {
-        type: String,
-        required: false,
-        default: 'top',
-      },
+    tooltipContainer() {
+      return this.tooltipText ? 'body' : null;
     },
-    computed: {
-      // API response sends null when gravatar is disabled and
-      // we provide an empty string when we use it inside project avatar link.
-      // In both cases we should render the defaultAvatarUrl
-      sanitizedSource() {
-        return this.imgSrc === '' || this.imgSrc === null ? defaultAvatarUrl : this.imgSrc;
-      },
-      resultantSrcAttribute() {
-        return this.lazy ? placeholderImage : this.sanitizedSource;
-      },
-      tooltipContainer() {
-        return this.tooltipText ? 'body' : null;
-      },
-      avatarSizeClass() {
-        return `s${this.size}`;
-      },
+    avatarSizeClass() {
+      return `s${this.size}`;
     },
-  };
+  },
+};
 </script>
 
 <template>
diff --git a/app/assets/javascripts/vue_shared/components/recaptcha_modal.vue b/app/assets/javascripts/vue_shared/components/recaptcha_modal.vue
index a2a9a5e6987..09394847b10 100644
--- a/app/assets/javascripts/vue_shared/components/recaptcha_modal.vue
+++ b/app/assets/javascripts/vue_shared/components/recaptcha_modal.vue
@@ -1,67 +1,67 @@
 <script>
-  import DeprecatedModal from './deprecated_modal.vue';
+import DeprecatedModal from './deprecated_modal.vue';
 
-  export default {
-    name: 'RecaptchaModal',
+export default {
+  name: 'RecaptchaModal',
 
-    components: {
-      DeprecatedModal,
-    },
+  components: {
+    DeprecatedModal,
+  },
 
-    props: {
-      html: {
-        type: String,
-        required: false,
-        default: '',
-      },
+  props: {
+    html: {
+      type: String,
+      required: false,
+      default: '',
     },
+  },
 
-    data() {
-      return {
-        script: {},
-        scriptSrc: 'https://www.google.com/recaptcha/api.js',
-      };
-    },
+  data() {
+    return {
+      script: {},
+      scriptSrc: 'https://www.google.com/recaptcha/api.js',
+    };
+  },
 
-    watch: {
-      html() {
-        this.appendRecaptchaScript();
-      },
+  watch: {
+    html() {
+      this.appendRecaptchaScript();
     },
+  },
 
-    mounted() {
-      window.recaptchaDialogCallback = this.submit.bind(this);
-    },
+  mounted() {
+    window.recaptchaDialogCallback = this.submit.bind(this);
+  },
 
-    methods: {
-      appendRecaptchaScript() {
-        this.removeRecaptchaScript();
+  methods: {
+    appendRecaptchaScript() {
+      this.removeRecaptchaScript();
 
-        const script = document.createElement('script');
-        script.src = this.scriptSrc;
-        script.classList.add('js-recaptcha-script');
-        script.async = true;
-        script.defer = true;
+      const script = document.createElement('script');
+      script.src = this.scriptSrc;
+      script.classList.add('js-recaptcha-script');
+      script.async = true;
+      script.defer = true;
 
-        this.script = script;
+      this.script = script;
 
-        document.body.appendChild(script);
-      },
+      document.body.appendChild(script);
+    },
 
-      removeRecaptchaScript() {
-        if (this.script instanceof Element) this.script.remove();
-      },
+    removeRecaptchaScript() {
+      if (this.script instanceof Element) this.script.remove();
+    },
 
-      close() {
-        this.removeRecaptchaScript();
-        this.$emit('close');
-      },
+    close() {
+      this.removeRecaptchaScript();
+      this.$emit('close');
+    },
 
-      submit() {
-        this.$el.querySelector('form').submit();
-      },
+    submit() {
+      this.$el.querySelector('form').submit();
     },
-  };
+  },
+};
 </script>
 
 <template>
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/date_picker.vue b/app/assets/javascripts/vue_shared/components/sidebar/date_picker.vue
index 9d757b27edc..500586302cf 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/date_picker.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/date_picker.vue
@@ -1,96 +1,96 @@
 <script>
-  import datePicker from '../pikaday.vue';
-  import toggleSidebar from './toggle_sidebar.vue';
-  import collapsedCalendarIcon from './collapsed_calendar_icon.vue';
-  import { dateInWords } from '../../../lib/utils/datetime_utility';
+import datePicker from '../pikaday.vue';
+import toggleSidebar from './toggle_sidebar.vue';
+import collapsedCalendarIcon from './collapsed_calendar_icon.vue';
+import { dateInWords } from '../../../lib/utils/datetime_utility';
 
-  export default {
-    name: 'SidebarDatePicker',
-    components: {
-      datePicker,
-      toggleSidebar,
-      collapsedCalendarIcon,
-    },
-    props: {
-      blockClass: {
-        type: String,
-        required: false,
-        default: '',
-      },
-      collapsed: {
-        type: Boolean,
-        required: false,
-        default: true,
-      },
-      showToggleSidebar: {
-        type: Boolean,
-        required: false,
-        default: false,
-      },
-      isLoading: {
-        type: Boolean,
-        required: false,
-        default: false,
-      },
-      editable: {
-        type: Boolean,
-        required: false,
-        default: false,
-      },
-      label: {
-        type: String,
-        required: false,
-        default: 'Date picker',
-      },
-      selectedDate: {
-        type: Date,
-        required: false,
-        default: null,
-      },
-      minDate: {
-        type: Date,
-        required: false,
-        default: null,
-      },
-      maxDate: {
-        type: Date,
-        required: false,
-        default: null,
-      },
-    },
-    data() {
-      return {
-        editing: false,
-      };
-    },
-    computed: {
-      selectedAndEditable() {
-        return this.selectedDate && this.editable;
-      },
-      selectedDateWords() {
-        return dateInWords(this.selectedDate, true);
-      },
-      collapsedText() {
-        return this.selectedDateWords ? this.selectedDateWords : 'None';
-      },
-    },
-    methods: {
-      stopEditing() {
-        this.editing = false;
-      },
-      toggleDatePicker() {
-        this.editing = !this.editing;
-      },
-      newDateSelected(date = null) {
-        this.date = date;
-        this.editing = false;
-        this.$emit('saveDate', date);
-      },
-      toggleSidebar() {
-        this.$emit('toggleCollapse');
-      },
-    },
-  };
+export default {
+  name: 'SidebarDatePicker',
+  components: {
+    datePicker,
+    toggleSidebar,
+    collapsedCalendarIcon,
+  },
+  props: {
+    blockClass: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    collapsed: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    showToggleSidebar: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    isLoading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    label: {
+      type: String,
+      required: false,
+      default: 'Date picker',
+    },
+    selectedDate: {
+      type: Date,
+      required: false,
+      default: null,
+    },
+    minDate: {
+      type: Date,
+      required: false,
+      default: null,
+    },
+    maxDate: {
+      type: Date,
+      required: false,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      editing: false,
+    };
+  },
+  computed: {
+    selectedAndEditable() {
+      return this.selectedDate && this.editable;
+    },
+    selectedDateWords() {
+      return dateInWords(this.selectedDate, true);
+    },
+    collapsedText() {
+      return this.selectedDateWords ? this.selectedDateWords : 'None';
+    },
+  },
+  methods: {
+    stopEditing() {
+      this.editing = false;
+    },
+    toggleDatePicker() {
+      this.editing = !this.editing;
+    },
+    newDateSelected(date = null) {
+      this.date = date;
+      this.editing = false;
+      this.$emit('saveDate', date);
+    },
+    toggleSidebar() {
+      this.$emit('toggleCollapse');
+    },
+  },
+};
 </script>
 
 <template>
diff --git a/app/assets/javascripts/vue_shared/components/table_pagination.vue b/app/assets/javascripts/vue_shared/components/table_pagination.vue
index 8e9621c956f..03a5a078879 100644
--- a/app/assets/javascripts/vue_shared/components/table_pagination.vue
+++ b/app/assets/javascripts/vue_shared/components/table_pagination.vue
@@ -1,17 +1,17 @@
 <script>
-  import { s__ } from '../../locale';
-
-  const PAGINATION_UI_BUTTON_LIMIT = 4;
-  const UI_LIMIT = 6;
-  const SPREAD = '...';
-  const PREV = s__('Pagination|Prev');
-  const NEXT = s__('Pagination|Next');
-  const FIRST = s__('Pagination|« First');
-  const LAST = s__('Pagination|Last »');
-
-  export default {
-    props: {
-      /**
+import { s__ } from '../../locale';
+
+const PAGINATION_UI_BUTTON_LIMIT = 4;
+const UI_LIMIT = 6;
+const SPREAD = '...';
+const PREV = s__('Pagination|Prev');
+const NEXT = s__('Pagination|Next');
+const FIRST = s__('Pagination|« First');
+const LAST = s__('Pagination|Last »');
+
+export default {
+  props: {
+    /**
         This function will take the information given by the pagination component
 
         Here is an example `change` method:
@@ -20,12 +20,12 @@
           gl.utils.visitUrl(`?page=${pagenum}`);
         },
       */
-      change: {
-        type: Function,
-        required: true,
-      },
+    change: {
+      type: Function,
+      required: true,
+    },
 
-      /**
+    /**
         pageInfo will come from the headers of the API call
         in the `.then` clause of the VueResource API call
         there should be a function that contructs the pageInfo for this component
@@ -41,94 +41,94 @@
           previousPage: +headers['X-Prev-Page'],
         });
       */
-      pageInfo: {
-        type: Object,
-        required: true,
-      },
+    pageInfo: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    prev() {
+      return this.pageInfo.previousPage;
+    },
+    next() {
+      return this.pageInfo.nextPage;
+    },
+    getItems() {
+      const total = this.pageInfo.totalPages;
+      const { page } = this.pageInfo;
+      const items = [];
+
+      if (page > 1) {
+        items.push({ title: FIRST, first: true });
+      }
+
+      if (page > 1) {
+        items.push({ title: PREV, prev: true });
+      } else {
+        items.push({ title: PREV, disabled: true, prev: true });
+      }
+
+      if (page > UI_LIMIT) items.push({ title: SPREAD, separator: true });
+
+      const start = Math.max(page - PAGINATION_UI_BUTTON_LIMIT, 1);
+      const end = Math.min(page + PAGINATION_UI_BUTTON_LIMIT, total);
+
+      for (let i = start; i <= end; i += 1) {
+        const isActive = i === page;
+        items.push({ title: i, active: isActive, page: true });
+      }
+
+      if (total - page > PAGINATION_UI_BUTTON_LIMIT) {
+        items.push({ title: SPREAD, separator: true, page: true });
+      }
+
+      if (page === total) {
+        items.push({ title: NEXT, disabled: true, next: true });
+      } else if (total - page >= 1) {
+        items.push({ title: NEXT, next: true });
+      }
+
+      if (total - page >= 1) {
+        items.push({ title: LAST, last: true });
+      }
+
+      return items;
+    },
+    showPagination() {
+      return this.pageInfo.totalPages > 1;
     },
-    computed: {
-      prev() {
-        return this.pageInfo.previousPage;
-      },
-      next() {
-        return this.pageInfo.nextPage;
-      },
-      getItems() {
-        const total = this.pageInfo.totalPages;
-        const { page } = this.pageInfo;
-        const items = [];
-
-        if (page > 1) {
-          items.push({ title: FIRST, first: true });
-        }
-
-        if (page > 1) {
-          items.push({ title: PREV, prev: true });
-        } else {
-          items.push({ title: PREV, disabled: true, prev: true });
-        }
-
-        if (page > UI_LIMIT) items.push({ title: SPREAD, separator: true });
-
-        const start = Math.max(page - PAGINATION_UI_BUTTON_LIMIT, 1);
-        const end = Math.min(page + PAGINATION_UI_BUTTON_LIMIT, total);
-
-        for (let i = start; i <= end; i += 1) {
-          const isActive = i === page;
-          items.push({ title: i, active: isActive, page: true });
-        }
-
-        if (total - page > PAGINATION_UI_BUTTON_LIMIT) {
-          items.push({ title: SPREAD, separator: true, page: true });
-        }
-
-        if (page === total) {
-          items.push({ title: NEXT, disabled: true, next: true });
-        } else if (total - page >= 1) {
-          items.push({ title: NEXT, next: true });
-        }
-
-        if (total - page >= 1) {
-          items.push({ title: LAST, last: true });
-        }
-
-        return items;
-      },
-      showPagination() {
-        return this.pageInfo.totalPages > 1;
-      },
+  },
+  methods: {
+    changePage(text, isDisabled) {
+      if (isDisabled) return;
+
+      const { totalPages, nextPage, previousPage } = this.pageInfo;
+
+      switch (text) {
+        case SPREAD:
+          break;
+        case LAST:
+          this.change(totalPages);
+          break;
+        case NEXT:
+          this.change(nextPage);
+          break;
+        case PREV:
+          this.change(previousPage);
+          break;
+        case FIRST:
+          this.change(1);
+          break;
+        default:
+          this.change(+text);
+          break;
+      }
     },
-    methods: {
-      changePage(text, isDisabled) {
-        if (isDisabled) return;
-
-        const { totalPages, nextPage, previousPage } = this.pageInfo;
-
-        switch (text) {
-          case SPREAD:
-            break;
-          case LAST:
-            this.change(totalPages);
-            break;
-          case NEXT:
-            this.change(nextPage);
-            break;
-          case PREV:
-            this.change(previousPage);
-            break;
-          case FIRST:
-            this.change(1);
-            break;
-          default:
-            this.change(+text);
-            break;
-        }
-      },
-      hideOnSmallScreen(item) {
-        return !item.first && !item.last && !item.next && !item.prev && !item.active;
-      },
+    hideOnSmallScreen(item) {
+      return !item.first && !item.last && !item.next && !item.prev && !item.active;
     },
-  };
+  },
+};
 </script>
 <template>
   <div
diff --git a/app/assets/javascripts/vue_shared/components/time_ago_tooltip.vue b/app/assets/javascripts/vue_shared/components/time_ago_tooltip.vue
index 368eeb6c453..d760263929a 100644
--- a/app/assets/javascripts/vue_shared/components/time_ago_tooltip.vue
+++ b/app/assets/javascripts/vue_shared/components/time_ago_tooltip.vue
@@ -11,9 +11,7 @@ export default {
   directives: {
     tooltip,
   },
-  mixins: [
-    timeagoMixin,
-  ],
+  mixins: [timeagoMixin],
   props: {
     time: {
       type: String,
diff --git a/app/assets/javascripts/vue_shared/components/toggle_button.vue b/app/assets/javascripts/vue_shared/components/toggle_button.vue
index 5b9c51786d6..4e9289cbed8 100644
--- a/app/assets/javascripts/vue_shared/components/toggle_button.vue
+++ b/app/assets/javascripts/vue_shared/components/toggle_button.vue
@@ -1,60 +1,60 @@
 <script>
-  import { s__ } from '../../locale';
-  import icon from './icon.vue';
+import { s__ } from '../../locale';
+import icon from './icon.vue';
 
-  const ICON_ON = 'status_success_borderless';
-  const ICON_OFF = 'status_failed_borderless';
-  const LABEL_ON = s__('ToggleButton|Toggle Status: ON');
-  const LABEL_OFF = s__('ToggleButton|Toggle Status: OFF');
+const ICON_ON = 'status_success_borderless';
+const ICON_OFF = 'status_failed_borderless';
+const LABEL_ON = s__('ToggleButton|Toggle Status: ON');
+const LABEL_OFF = s__('ToggleButton|Toggle Status: OFF');
 
-  export default {
-    components: {
-      icon,
-    },
+export default {
+  components: {
+    icon,
+  },
 
-    model: {
-      prop: 'value',
-      event: 'change',
-    },
+  model: {
+    prop: 'value',
+    event: 'change',
+  },
 
-    props: {
-      name: {
-        type: String,
-        required: false,
-        default: null,
-      },
-      value: {
-        type: Boolean,
-        required: false,
-        default: null,
-      },
-      disabledInput: {
-        type: Boolean,
-        required: false,
-        default: false,
-      },
-      isLoading: {
-        type: Boolean,
-        required: false,
-        default: false,
-      },
+  props: {
+    name: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    value: {
+      type: Boolean,
+      required: false,
+      default: null,
     },
+    disabledInput: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    isLoading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
 
-    computed: {
-      toggleIcon() {
-        return this.value ? ICON_ON : ICON_OFF;
-      },
-      ariaLabel() {
-        return this.value ? LABEL_ON : LABEL_OFF;
-      },
+  computed: {
+    toggleIcon() {
+      return this.value ? ICON_ON : ICON_OFF;
+    },
+    ariaLabel() {
+      return this.value ? LABEL_ON : LABEL_OFF;
     },
+  },
 
-    methods: {
-      toggleFeature() {
-        if (!this.disabledInput) this.$emit('change', !this.value);
-      },
+  methods: {
+    toggleFeature() {
+      if (!this.disabledInput) this.$emit('change', !this.value);
     },
-  };
+  },
+};
 </script>
 
 <template>
diff --git a/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_link.vue b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_link.vue
index ee3157bcb1b..14cb44b8619 100644
--- a/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_link.vue
+++ b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_link.vue
@@ -1,5 +1,4 @@
 <script>
-
 /* This is a re-usable vue component for rendering a user avatar wrapped in
   a clickable link (likely to the user's profile). The link, image, and
   tooltip can be configured by props passed to this component.
diff --git a/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_svg.vue b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_svg.vue
index ef3b16edf5f..8e460566d09 100644
--- a/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_svg.vue
+++ b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_svg.vue
@@ -1,5 +1,4 @@
 <script>
-
 /* This is a re-usable vue component for rendering a user avatar svg (typically
   for a blank state). It will receive styles comparable to the user avatar,
   but no image is loaded, it isn't wrapped in a link, and tooltips aren't supported.
@@ -42,4 +41,3 @@ export default {
     v-html="svg"
   />
 </template>
-
diff --git a/app/assets/javascripts/vue_shared/mixins/ci_pagination_api_mixin.js b/app/assets/javascripts/vue_shared/mixins/ci_pagination_api_mixin.js
index f94cc670edf..67a1632269e 100644
--- a/app/assets/javascripts/vue_shared/mixins/ci_pagination_api_mixin.js
+++ b/app/assets/javascripts/vue_shared/mixins/ci_pagination_api_mixin.js
@@ -4,10 +4,7 @@
  *
  * Components need to have `scope`, `page` and `requestData`
  */
-import {
-  historyPushState,
-  buildUrlWithCurrentLocation,
-} from '../../lib/utils/common_utils';
+import { historyPushState, buildUrlWithCurrentLocation } from '../../lib/utils/common_utils';
 
 export default {
   methods: {
@@ -24,12 +21,14 @@ export default {
       // stop polling
       this.poll.stop();
 
-      const queryString = Object.keys(parameters).map((parameter) => {
-        const value = parameters[parameter];
-        // update internal state for UI
-        this[parameter] = value;
-        return `${parameter}=${encodeURIComponent(value)}`;
-      }).join('&');
+      const queryString = Object.keys(parameters)
+        .map(parameter => {
+          const value = parameters[parameter];
+          // update internal state for UI
+          this[parameter] = value;
+          return `${parameter}=${encodeURIComponent(value)}`;
+        })
+        .join('&');
 
       // update polling parameters
       this.requestData = parameters;
diff --git a/app/assets/javascripts/vue_shared/models/label.js b/app/assets/javascripts/vue_shared/models/label.js
index d29c7fe973a..2d2732d0661 100644
--- a/app/assets/javascripts/vue_shared/models/label.js
+++ b/app/assets/javascripts/vue_shared/models/label.js
@@ -6,7 +6,7 @@ export default class ListLabel {
     this.color = obj.color;
     this.textColor = obj.text_color;
     this.description = obj.description;
-    this.priority = (obj.priority !== null) ? obj.priority : Infinity;
+    this.priority = obj.priority !== null ? obj.priority : Infinity;
   }
 }
 
diff --git a/app/assets/javascripts/vue_shared/translate.js b/app/assets/javascripts/vue_shared/translate.js
index 48c63373b77..e0baf03acc3 100644
--- a/app/assets/javascripts/vue_shared/translate.js
+++ b/app/assets/javascripts/vue_shared/translate.js
@@ -1,11 +1,6 @@
-import {
-  __,
-  n__,
-  s__,
-  sprintf,
-} from '../locale';
+import { __, n__, s__, sprintf } from '../locale';
 
-export default (Vue) => {
+export default Vue => {
   Vue.mixin({
     methods: {
       /**
diff --git a/app/assets/javascripts/vue_shared/vue_resource_interceptor.js b/app/assets/javascripts/vue_shared/vue_resource_interceptor.js
index b9693892f45..754025207c8 100644
--- a/app/assets/javascripts/vue_shared/vue_resource_interceptor.js
+++ b/app/assets/javascripts/vue_shared/vue_resource_interceptor.js
@@ -21,7 +21,7 @@ Vue.http.interceptors.push((request, next) => {
 Vue.http.interceptors.push((request, next) => {
   request.headers.set(csrf.headerKey, csrf.token);
 
-  next((response) => {
+  next(response => {
     // Headers object has a `forEach` property that iterates through all values.
     const headers = {};
 
-- 
cgit v1.2.1


From a01897446075beac31719ff44a9d742d81ce785d Mon Sep 17 00:00:00 2001
From: Mike Greiling <mike@pixelcog.com>
Date: Wed, 10 Oct 2018 17:08:43 +0000
Subject: Convert remaining issue board components into ES module syntax

---
 app/assets/javascripts/boards/components/board.js  | 29 +++++-----
 .../boards/components/board_blank_state.vue        | 15 +++--
 .../javascripts/boards/components/board_card.vue   |  9 ++-
 .../javascripts/boards/components/board_delete.js  | 14 ++---
 .../javascripts/boards/components/board_list.vue   | 67 ++++++++++++----------
 .../boards/components/board_new_issue.vue          |  7 +--
 .../javascripts/boards/components/board_sidebar.js | 18 +++---
 .../boards/components/issue_card_inner.vue         |  9 ++-
 .../javascripts/boards/components/modal/footer.vue |  3 +-
 .../boards/components/modal/lists_dropdown.vue     |  3 +-
 .../boards/components/new_list_dropdown.js         | 24 ++++----
 .../boards/components/sidebar/remove_issue.vue     |  5 +-
 .../javascripts/boards/filtered_search_boards.js   |  3 +-
 app/assets/javascripts/boards/index.js             | 62 ++++++++++----------
 .../boards/mixins/sortable_default_options.js      | 25 ++++----
 app/assets/javascripts/boards/models/issue.js      |  3 +-
 app/assets/javascripts/boards/models/list.js       |  9 +--
 .../javascripts/boards/stores/boards_store.js      | 19 ++++--
 app/assets/javascripts/due_date_select.js          |  7 ++-
 app/assets/javascripts/labels_select.js            |  9 +--
 app/assets/javascripts/milestone_select.js         |  7 ++-
 21 files changed, 174 insertions(+), 173 deletions(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/boards/components/board.js b/app/assets/javascripts/boards/components/board.js
index 1fc7a29f785..75477ebb3b3 100644
--- a/app/assets/javascripts/boards/components/board.js
+++ b/app/assets/javascripts/boards/components/board.js
@@ -4,20 +4,17 @@ import { n__ } from '~/locale';
 import Icon from '~/vue_shared/components/icon.vue';
 import Tooltip from '~/vue_shared/directives/tooltip';
 import AccessorUtilities from '../../lib/utils/accessor';
-import boardList from './board_list.vue';
 import BoardBlankState from './board_blank_state.vue';
-import './board_delete';
+import BoardDelete from './board_delete';
+import BoardList from './board_list.vue';
+import boardsStore from '../stores/boards_store';
+import { getBoardSortableDefaultOptions, sortableEnd } from '../mixins/sortable_default_options';
 
-const Store = gl.issueBoards.BoardsStore;
-
-window.gl = window.gl || {};
-window.gl.issueBoards = window.gl.issueBoards || {};
-
-gl.issueBoards.Board = Vue.extend({
+export default Vue.extend({
   components: {
-    boardList,
-    'board-delete': gl.issueBoards.BoardDelete,
     BoardBlankState,
+    BoardDelete,
+    BoardList,
     Icon,
   },
   directives: {
@@ -47,8 +44,8 @@ gl.issueBoards.Board = Vue.extend({
   },
   data () {
     return {
-      detailIssue: Store.detail,
-      filter: Store.filter,
+      detailIssue: boardsStore.detail,
+      filter: boardsStore.filter,
     };
   },
   computed: {
@@ -70,20 +67,20 @@ gl.issueBoards.Board = Vue.extend({
     }
   },
   mounted () {
-    this.sortableOptions = gl.issueBoards.getBoardSortableDefaultOptions({
+    this.sortableOptions = getBoardSortableDefaultOptions({
       disabled: this.disabled,
       group: 'boards',
       draggable: '.is-draggable',
       handle: '.js-board-handle',
       onEnd: (e) => {
-        gl.issueBoards.onEnd();
+        sortableEnd();
 
         if (e.newIndex !== undefined && e.oldIndex !== e.newIndex) {
           const order = this.sortable.toArray();
-          const list = Store.findList('id', parseInt(e.item.dataset.id, 10));
+          const list = boardsStore.findList('id', parseInt(e.item.dataset.id, 10));
 
           this.$nextTick(() => {
-            Store.moveList(list, order);
+            boardsStore.moveList(list, order);
           });
         }
       }
diff --git a/app/assets/javascripts/boards/components/board_blank_state.vue b/app/assets/javascripts/boards/components/board_blank_state.vue
index cde22725a89..38aaec73d7d 100644
--- a/app/assets/javascripts/boards/components/board_blank_state.vue
+++ b/app/assets/javascripts/boards/components/board_blank_state.vue
@@ -2,8 +2,7 @@
 /* global ListLabel */
 import _ from 'underscore';
 import Cookies from 'js-cookie';
-
-const Store = gl.issueBoards.BoardsStore;
+import boardsStore from '../stores/boards_store';
 
 export default {
   data() {
@@ -19,7 +18,7 @@ export default {
       this.clearBlankState();
 
       this.predefinedLabels.forEach((label, i) => {
-        Store.addList({
+        boardsStore.addList({
           title: label.title,
           position: i,
           list_type: 'label',
@@ -30,14 +29,14 @@ export default {
         });
       });
 
-      Store.state.lists = _.sortBy(Store.state.lists, 'position');
+      boardsStore.state.lists = _.sortBy(boardsStore.state.lists, 'position');
 
       // Save the labels
       gl.boardService.generateDefaultLists()
         .then(res => res.data)
         .then((data) => {
           data.forEach((listObj) => {
-            const list = Store.findList('title', listObj.title);
+            const list = boardsStore.findList('title', listObj.title);
 
             list.id = listObj.id;
             list.label.id = listObj.label.id;
@@ -48,14 +47,14 @@ export default {
           });
         })
         .catch(() => {
-          Store.removeList(undefined, 'label');
+          boardsStore.removeList(undefined, 'label');
           Cookies.remove('issue_board_welcome_hidden', {
             path: '',
           });
-          Store.addBlankState();
+          boardsStore.addBlankState();
         });
     },
-    clearBlankState: Store.removeBlankState.bind(Store),
+    clearBlankState: boardsStore.removeBlankState.bind(boardsStore),
   },
 };
 
diff --git a/app/assets/javascripts/boards/components/board_card.vue b/app/assets/javascripts/boards/components/board_card.vue
index 0398102ad02..843498f0d06 100644
--- a/app/assets/javascripts/boards/components/board_card.vue
+++ b/app/assets/javascripts/boards/components/board_card.vue
@@ -2,8 +2,7 @@
   /* eslint-disable vue/require-default-prop */
   import IssueCardInner from './issue_card_inner.vue';
   import eventHub from '../eventhub';
-
-  const Store = gl.issueBoards.BoardsStore;
+  import boardsStore from '../stores/boards_store';
 
   export default {
     name: 'BoardsIssueCard',
@@ -42,7 +41,7 @@
     data() {
       return {
         showDetail: false,
-        detailIssue: Store.detail,
+        detailIssue: boardsStore.detail,
       };
     },
     computed: {
@@ -63,11 +62,11 @@
         if (this.showDetail) {
           this.showDetail = false;
 
-          if (Store.detail.issue && Store.detail.issue.id === this.issue.id) {
+          if (boardsStore.detail.issue && boardsStore.detail.issue.id === this.issue.id) {
             eventHub.$emit('clearDetailIssue');
           } else {
             eventHub.$emit('newDetailIssue', this.issue);
-            Store.detail.list = this.list;
+            boardsStore.detail.list = this.list;
           }
         }
       },
diff --git a/app/assets/javascripts/boards/components/board_delete.js b/app/assets/javascripts/boards/components/board_delete.js
index 240d0911a31..a5f9d65e4d5 100644
--- a/app/assets/javascripts/boards/components/board_delete.js
+++ b/app/assets/javascripts/boards/components/board_delete.js
@@ -1,12 +1,7 @@
-/* eslint-disable no-alert */
-
 import $ from 'jquery';
 import Vue from 'vue';
 
-window.gl = window.gl || {};
-window.gl.issueBoards = window.gl.issueBoards || {};
-
-gl.issueBoards.BoardDelete = Vue.extend({
+export default Vue.extend({
   props: {
     list: {
       type: Object,
@@ -14,12 +9,13 @@ gl.issueBoards.BoardDelete = Vue.extend({
     },
   },
   methods: {
-    deleteBoard () {
+    deleteBoard() {
       $(this.$el).tooltip('hide');
 
+      // eslint-disable-next-line no-alert
       if (window.confirm('Are you sure you want to delete this list?')) {
         this.list.destroy();
       }
-    }
-  }
+    },
+  },
 });
diff --git a/app/assets/javascripts/boards/components/board_list.vue b/app/assets/javascripts/boards/components/board_list.vue
index 7ddb22ad824..4dc56c670f0 100644
--- a/app/assets/javascripts/boards/components/board_list.vue
+++ b/app/assets/javascripts/boards/components/board_list.vue
@@ -3,8 +3,8 @@ import Sortable from 'sortablejs';
 import boardNewIssue from './board_new_issue.vue';
 import boardCard from './board_card.vue';
 import eventHub from '../eventhub';
-
-const Store = gl.issueBoards.BoardsStore;
+import boardsStore from '../stores/boards_store';
+import { getBoardSortableDefaultOptions, sortableStart } from '../mixins/sortable_default_options';
 
 export default {
   name: 'BoardList',
@@ -46,7 +46,7 @@ export default {
   data() {
     return {
       scrollOffset: 250,
-      filters: Store.state.filters,
+      filters: boardsStore.state.filters,
       showCount: false,
       showIssueForm: false,
     };
@@ -61,13 +61,14 @@ export default {
     },
     issues() {
       this.$nextTick(() => {
-        if (this.scrollHeight() <= this.listHeight() &&
-          this.list.issuesSize > this.list.issues.length) {
+        if (
+          this.scrollHeight() <= this.listHeight() &&
+          this.list.issuesSize > this.list.issues.length
+        ) {
           this.list.page += 1;
-          this.list.getIssues(false)
-            .catch(() => {
-              // TODO: handle request error
-            });
+          this.list.getIssues(false).catch(() => {
+            // TODO: handle request error
+          });
         }
 
         if (this.scrollHeight() > Math.ceil(this.listHeight())) {
@@ -83,7 +84,7 @@ export default {
     eventHub.$on(`scroll-board-list-${this.list.id}`, this.scrollToTop);
   },
   mounted() {
-    const options = gl.issueBoards.getBoardSortableDefaultOptions({
+    const options = getBoardSortableDefaultOptions({
       scroll: true,
       disabled: this.disabled,
       filter: '.board-list-count, .is-disabled',
@@ -108,7 +109,8 @@ export default {
           // So from there, we can get reference to actual container
           // and thus the container type to enable Copy or Move
           if (e.target) {
-            const containerEl = e.target.closest('.js-board-list') || e.target.querySelector('.js-board-list');
+            const containerEl =
+              e.target.closest('.js-board-list') || e.target.querySelector('.js-board-list');
             const toBoardType = containerEl.dataset.boardType;
             const cloneActions = {
               label: ['milestone', 'assignee'],
@@ -120,8 +122,9 @@ export default {
               const fromBoardType = this.list.type;
               // For each list we check if the destination list is
               // a the list were we should clone the issue
-              const shouldClone = Object.entries(cloneActions).some(entry => (
-                 fromBoardType === entry[0] && entry[1].includes(toBoardType)));
+              const shouldClone = Object.entries(cloneActions).some(
+                entry => fromBoardType === entry[0] && entry[1].includes(toBoardType),
+              );
 
               if (shouldClone) {
                 return 'clone';
@@ -133,28 +136,36 @@ export default {
         },
         revertClone: true,
       },
-      onStart: (e) => {
+      onStart: e => {
         const card = this.$refs.issue[e.oldIndex];
 
         card.showDetail = false;
-        Store.moving.list = card.list;
-        Store.moving.issue = Store.moving.list.findIssue(+e.item.dataset.issueId);
+        boardsStore.moving.list = card.list;
+        boardsStore.moving.issue = boardsStore.moving.list.findIssue(+e.item.dataset.issueId);
 
-        gl.issueBoards.onStart();
+        sortableStart();
       },
-      onAdd: (e) => {
-        gl.issueBoards.BoardsStore
-          .moveIssueToList(Store.moving.list, this.list, Store.moving.issue, e.newIndex);
+      onAdd: e => {
+        boardsStore.moveIssueToList(
+          boardsStore.moving.list,
+          this.list,
+          boardsStore.moving.issue,
+          e.newIndex,
+        );
 
         this.$nextTick(() => {
           e.item.remove();
         });
       },
-      onUpdate: (e) => {
-        const sortedArray = this.sortable.toArray()
-          .filter(id => id !== '-1');
-        gl.issueBoards.BoardsStore
-          .moveIssueInList(this.list, Store.moving.issue, e.oldIndex, e.newIndex, sortedArray);
+      onUpdate: e => {
+        const sortedArray = this.sortable.toArray().filter(id => id !== '-1');
+        boardsStore.moveIssueInList(
+          this.list,
+          boardsStore.moving.issue,
+          e.oldIndex,
+          e.newIndex,
+          sortedArray,
+        );
       },
       onMove(e) {
         return !e.related.classList.contains('board-list-count');
@@ -192,16 +203,14 @@ export default {
 
       if (getIssues) {
         this.list.loadingMore = true;
-        getIssues
-          .then(loadingDone)
-          .catch(loadingDone);
+        getIssues.then(loadingDone).catch(loadingDone);
       }
     },
     toggleForm() {
       this.showIssueForm = !this.showIssueForm;
     },
     onScroll() {
-      if (!this.list.loadingMore && (this.scrollTop() > this.scrollHeight() - this.scrollOffset)) {
+      if (!this.list.loadingMore && this.scrollTop() > this.scrollHeight() - this.scrollOffset) {
         this.loadNextPage();
       }
     },
diff --git a/app/assets/javascripts/boards/components/board_new_issue.vue b/app/assets/javascripts/boards/components/board_new_issue.vue
index f7ce5128964..030288a1c9d 100644
--- a/app/assets/javascripts/boards/components/board_new_issue.vue
+++ b/app/assets/javascripts/boards/components/board_new_issue.vue
@@ -4,8 +4,7 @@ import { Button } from '@gitlab-org/gitlab-ui';
 import eventHub from '../eventhub';
 import ProjectSelect from './project_select.vue';
 import ListIssue from '../models/issue';
-
-const Store = gl.issueBoards.BoardsStore;
+import boardsStore from '../stores/boards_store';
 
 export default {
   name: 'BoardNewIssue',
@@ -68,8 +67,8 @@ export default {
           // Need this because our jQuery very kindly disables buttons on ALL form submissions
           $(this.$refs.submitButton).enable();
 
-          Store.detail.issue = issue;
-          Store.detail.list = this.list;
+          boardsStore.detail.issue = issue;
+          boardsStore.detail.list = this.list;
         })
         .catch(() => {
           // Need this because our jQuery very kindly disables buttons on ALL form submissions
diff --git a/app/assets/javascripts/boards/components/board_sidebar.js b/app/assets/javascripts/boards/components/board_sidebar.js
index df7efd3fa5c..62666954de0 100644
--- a/app/assets/javascripts/boards/components/board_sidebar.js
+++ b/app/assets/javascripts/boards/components/board_sidebar.js
@@ -14,13 +14,9 @@ import IssuableContext from '../../issuable_context';
 import LabelsSelect from '../../labels_select';
 import Subscriptions from '../../sidebar/components/subscriptions/subscriptions.vue';
 import MilestoneSelect from '../../milestone_select';
+import boardsStore from '../stores/boards_store';
 
-const Store = gl.issueBoards.BoardsStore;
-
-window.gl = window.gl || {};
-window.gl.issueBoards = window.gl.issueBoards || {};
-
-gl.issueBoards.BoardSidebar = Vue.extend({
+export default Vue.extend({
   components: {
     AssigneeTitle,
     Assignees,
@@ -35,7 +31,7 @@ gl.issueBoards.BoardSidebar = Vue.extend({
   },
   data() {
     return {
-      detail: Store.detail,
+      detail: boardsStore.detail,
       issue: {},
       list: {},
       loadingAssignees: false,
@@ -117,18 +113,18 @@ gl.issueBoards.BoardSidebar = Vue.extend({
       this.saveAssignees();
     },
     removeAssignee (a) {
-      gl.issueBoards.BoardsStore.detail.issue.removeAssignee(a);
+      boardsStore.detail.issue.removeAssignee(a);
     },
     addAssignee (a) {
-      gl.issueBoards.BoardsStore.detail.issue.addAssignee(a);
+      boardsStore.detail.issue.addAssignee(a);
     },
     removeAllAssignees () {
-      gl.issueBoards.BoardsStore.detail.issue.removeAllAssignees();
+      boardsStore.detail.issue.removeAllAssignees();
     },
     saveAssignees () {
       this.loadingAssignees = true;
 
-      gl.issueBoards.BoardsStore.detail.issue.update()
+      boardsStore.detail.issue.update()
         .then(() => {
           this.loadingAssignees = false;
         })
diff --git a/app/assets/javascripts/boards/components/issue_card_inner.vue b/app/assets/javascripts/boards/components/issue_card_inner.vue
index 8b5536200e1..28956c2f3c5 100644
--- a/app/assets/javascripts/boards/components/issue_card_inner.vue
+++ b/app/assets/javascripts/boards/components/issue_card_inner.vue
@@ -3,8 +3,7 @@
   import UserAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
   import eventHub from '../eventhub';
   import tooltip from '../../vue_shared/directives/tooltip';
-
-  const Store = gl.issueBoards.BoardsStore;
+  import boardsStore from '../stores/boards_store';
 
   export default {
     components: {
@@ -110,7 +109,7 @@
       filterByLabel(label, e) {
         if (!this.updateFilters) return;
 
-        const filterPath = gl.issueBoards.BoardsStore.filter.path.split('&');
+        const filterPath = boardsStore.filter.path.split('&');
         const labelTitle = encodeURIComponent(label.title);
         const param = `label_name[]=${labelTitle}`;
         const labelIndex = filterPath.indexOf(param);
@@ -122,9 +121,9 @@
           filterPath.splice(labelIndex, 1);
         }
 
-        gl.issueBoards.BoardsStore.filter.path = filterPath.join('&');
+        boardsStore.filter.path = filterPath.join('&');
 
-        Store.updateFiltersUrl();
+        boardsStore.updateFiltersUrl();
 
         eventHub.$emit('updateTokens');
       },
diff --git a/app/assets/javascripts/boards/components/modal/footer.vue b/app/assets/javascripts/boards/components/modal/footer.vue
index d4affc8c3de..268ca6bca13 100644
--- a/app/assets/javascripts/boards/components/modal/footer.vue
+++ b/app/assets/javascripts/boards/components/modal/footer.vue
@@ -5,6 +5,7 @@ import ListsDropdown from './lists_dropdown.vue';
 import { pluralize } from '../../../lib/utils/text_utility';
 import ModalStore from '../../stores/modal_store';
 import modalMixin from '../../mixins/modal_mixins';
+import boardsStore from '../../stores/boards_store';
 
 export default {
   components: {
@@ -14,7 +15,7 @@ export default {
   data() {
     return {
       modal: ModalStore.store,
-      state: gl.issueBoards.BoardsStore.state,
+      state: boardsStore.state,
     };
   },
   computed: {
diff --git a/app/assets/javascripts/boards/components/modal/lists_dropdown.vue b/app/assets/javascripts/boards/components/modal/lists_dropdown.vue
index 4f23e5db35c..4622fd28220 100644
--- a/app/assets/javascripts/boards/components/modal/lists_dropdown.vue
+++ b/app/assets/javascripts/boards/components/modal/lists_dropdown.vue
@@ -1,6 +1,7 @@
 <script>
 import { Link } from '@gitlab-org/gitlab-ui';
 import ModalStore from '../../stores/modal_store';
+import boardsStore from '../../stores/boards_store';
 
 export default {
   components: {
@@ -9,7 +10,7 @@ export default {
   data() {
     return {
       modal: ModalStore.store,
-      state: gl.issueBoards.BoardsStore.state,
+      state: boardsStore.state,
     };
   },
   computed: {
diff --git a/app/assets/javascripts/boards/components/new_list_dropdown.js b/app/assets/javascripts/boards/components/new_list_dropdown.js
index 448ab9ed135..2c2045f8901 100644
--- a/app/assets/javascripts/boards/components/new_list_dropdown.js
+++ b/app/assets/javascripts/boards/components/new_list_dropdown.js
@@ -4,16 +4,12 @@ import $ from 'jquery';
 import axios from '~/lib/utils/axios_utils';
 import _ from 'underscore';
 import CreateLabelDropdown from '../../create_label';
-
-window.gl = window.gl || {};
-window.gl.issueBoards = window.gl.issueBoards || {};
-
-const Store = gl.issueBoards.BoardsStore;
+import boardsStore from '../stores/boards_store';
 
 $(document).off('created.label').on('created.label', (e, label) => {
-  Store.new({
+  boardsStore.new({
     title: label.title,
-    position: Store.state.lists.length - 2,
+    position: boardsStore.state.lists.length - 2,
     list_type: 'label',
     label: {
       id: label.id,
@@ -23,7 +19,7 @@ $(document).off('created.label').on('created.label', (e, label) => {
   });
 });
 
-gl.issueBoards.newListDropdownInit = () => {
+export default function initNewListDropdown() {
   $('.js-new-board-list').each(function () {
     const $this = $(this);
     new CreateLabelDropdown($this.closest('.dropdown').find('.dropdown-new-label'), $this.data('namespacePath'), $this.data('projectPath'));
@@ -36,7 +32,7 @@ gl.issueBoards.newListDropdownInit = () => {
           });
       },
       renderRow (label) {
-        const active = Store.findList('title', label.title);
+        const active = boardsStore.findList('title', label.title);
         const $li = $('<li />');
         const $a = $('<a />', {
           class: (active ? `is-active js-board-list-${active.id}` : ''),
@@ -62,10 +58,10 @@ gl.issueBoards.newListDropdownInit = () => {
         const label = options.selectedObj;
         e.preventDefault();
 
-        if (!Store.findList('title', label.title)) {
-          Store.new({
+        if (!boardsStore.findList('title', label.title)) {
+          boardsStore.new({
             title: label.title,
-            position: Store.state.lists.length - 2,
+            position: boardsStore.state.lists.length - 2,
             list_type: 'label',
             label: {
               id: label.id,
@@ -74,9 +70,9 @@ gl.issueBoards.newListDropdownInit = () => {
             },
           });
 
-          Store.state.lists = _.sortBy(Store.state.lists, 'position');
+          boardsStore.state.lists = _.sortBy(boardsStore.state.lists, 'position');
         }
       },
     });
   });
-};
+}
diff --git a/app/assets/javascripts/boards/components/sidebar/remove_issue.vue b/app/assets/javascripts/boards/components/sidebar/remove_issue.vue
index 90d4c710daf..b8f2e324d43 100644
--- a/app/assets/javascripts/boards/components/sidebar/remove_issue.vue
+++ b/app/assets/javascripts/boards/components/sidebar/remove_issue.vue
@@ -2,8 +2,7 @@
   import Vue from 'vue';
   import Flash from '../../../flash';
   import { __ } from '../../../locale';
-
-  const Store = gl.issueBoards.BoardsStore;
+  import boardsStore from '../../stores/boards_store';
 
   export default Vue.extend({
     props: {
@@ -49,7 +48,7 @@
           list.removeIssue(issue);
         });
 
-        Store.detail.issue = {};
+        boardsStore.detail.issue = {};
       },
       /**
       * Build the default patch request.
diff --git a/app/assets/javascripts/boards/filtered_search_boards.js b/app/assets/javascripts/boards/filtered_search_boards.js
index 46d61ebbf24..acf41e5689e 100644
--- a/app/assets/javascripts/boards/filtered_search_boards.js
+++ b/app/assets/javascripts/boards/filtered_search_boards.js
@@ -1,5 +1,6 @@
 import FilteredSearchContainer from '../filtered_search/container';
 import FilteredSearchManager from '../filtered_search/filtered_search_manager';
+import boardsStore from './stores/boards_store';
 
 export default class FilteredSearchBoards extends FilteredSearchManager {
   constructor(store, updateUrl = false, cantEdit = []) {
@@ -23,7 +24,7 @@ export default class FilteredSearchBoards extends FilteredSearchManager {
     this.store.path = path.substr(1);
 
     if (this.updateUrl) {
-      gl.issueBoards.BoardsStore.updateFiltersUrl();
+      boardsStore.updateFiltersUrl();
     }
   }
 
diff --git a/app/assets/javascripts/boards/index.js b/app/assets/javascripts/boards/index.js
index caa6ce84335..91861f2f9ee 100644
--- a/app/assets/javascripts/boards/index.js
+++ b/app/assets/javascripts/boards/index.js
@@ -14,24 +14,22 @@ import './models/issue';
 import './models/list';
 import './models/milestone';
 import './models/project';
-import './stores/boards_store';
+import boardsStore from './stores/boards_store';
 import ModalStore from './stores/modal_store';
 import BoardService from './services/board_service';
 import modalMixin from './mixins/modal_mixins';
-import './mixins/sortable_default_options';
 import './filters/due_date_filters';
-import './components/board';
-import './components/board_sidebar';
-import './components/new_list_dropdown';
+import Board from './components/board';
+import BoardSidebar from './components/board_sidebar';
+import initNewListDropdown from './components/new_list_dropdown';
 import BoardAddIssuesModal from './components/modal/index.vue';
 import '~/vue_shared/vue_resource_interceptor';
 import { NavigationType } from '~/lib/utils/common_utils';
 
+let issueBoardsApp;
+
 export default () => {
   const $boardApp = document.getElementById('board-app');
-  const Store = gl.issueBoards.BoardsStore;
-
-  window.gl = window.gl || {};
 
   // check for browser back and trigger a hard reload to circumvent browser caching.
   window.addEventListener('pageshow', (event) => {
@@ -43,25 +41,21 @@ export default () => {
     }
   });
 
-  if (gl.IssueBoardsApp) {
-    gl.IssueBoardsApp.$destroy(true);
+  if (issueBoardsApp) {
+    issueBoardsApp.$destroy(true);
   }
 
-  Store.create();
-
-  // hack to allow sidebar scripts like milestone_select manipulate the BoardsStore
-  gl.issueBoards.boardStoreIssueSet = (...args) => Vue.set(Store.detail.issue, ...args);
-  gl.issueBoards.boardStoreIssueDelete = (...args) => Vue.delete(Store.detail.issue, ...args);
+  boardsStore.create();
 
-  gl.IssueBoardsApp = new Vue({
+  issueBoardsApp = new Vue({
     el: $boardApp,
     components: {
-      board: gl.issueBoards.Board,
-      'board-sidebar': gl.issueBoards.BoardSidebar,
+      Board,
+      BoardSidebar,
       BoardAddIssuesModal,
     },
     data: {
-      state: Store.state,
+      state: boardsStore.state,
       loading: true,
       boardsEndpoint: $boardApp.dataset.boardsEndpoint,
       listsEndpoint: $boardApp.dataset.listsEndpoint,
@@ -70,7 +64,7 @@ export default () => {
       issueLinkBase: $boardApp.dataset.issueLinkBase,
       rootPath: $boardApp.dataset.rootPath,
       bulkUpdatePath: $boardApp.dataset.bulkUpdatePath,
-      detailIssue: Store.detail,
+      detailIssue: boardsStore.detail,
       defaultAvatar: $boardApp.dataset.defaultAvatar,
     },
     computed: {
@@ -85,7 +79,7 @@ export default () => {
         bulkUpdatePath: this.bulkUpdatePath,
         boardId: this.boardId,
       });
-      Store.rootPath = this.boardsEndpoint;
+      boardsStore.rootPath = this.boardsEndpoint;
 
       eventHub.$on('updateTokens', this.updateTokens);
       eventHub.$on('newDetailIssue', this.updateDetailIssue);
@@ -99,16 +93,16 @@ export default () => {
       sidebarEventHub.$off('toggleSubscription', this.toggleSubscription);
     },
     mounted() {
-      this.filterManager = new FilteredSearchBoards(Store.filter, true, Store.cantEdit);
+      this.filterManager = new FilteredSearchBoards(boardsStore.filter, true, boardsStore.cantEdit);
       this.filterManager.setup();
 
-      Store.disabled = this.disabled;
+      boardsStore.disabled = this.disabled;
       gl.boardService
         .all()
         .then(res => res.data)
         .then(data => {
           data.forEach(board => {
-            const list = Store.addList(board, this.defaultAvatar);
+            const list = boardsStore.addList(board, this.defaultAvatar);
 
             if (list.type === 'closed') {
               list.position = Infinity;
@@ -119,7 +113,7 @@ export default () => {
 
           this.state.lists = _.sortBy(this.state.lists, 'position');
 
-          Store.addBlankState();
+          boardsStore.addBlankState();
           this.loading = false;
         })
         .catch(() => {
@@ -148,13 +142,13 @@ export default () => {
             });
         }
 
-        Store.detail.issue = newIssue;
+        boardsStore.detail.issue = newIssue;
       },
       clearDetailIssue() {
-        Store.detail.issue = {};
+        boardsStore.detail.issue = {};
       },
       toggleSubscription(id) {
-        const { issue } = Store.detail;
+        const { issue } = boardsStore.detail;
         if (issue.id === id && issue.toggleSubscriptionEndpoint) {
           issue.setFetchingState('subscriptions', true);
           BoardService.toggleIssueSubscription(issue.toggleSubscriptionEndpoint)
@@ -173,26 +167,28 @@ export default () => {
     },
   });
 
-  gl.IssueBoardsSearch = new Vue({
+  // eslint-disable-next-line no-new
+  new Vue({
     el: document.getElementById('js-add-list'),
     data: {
-      filters: Store.state.filters,
+      filters: boardsStore.state.filters,
     },
     mounted() {
-      gl.issueBoards.newListDropdownInit();
+      initNewListDropdown();
     },
   });
 
   const issueBoardsModal = document.getElementById('js-add-issues-btn');
 
   if (issueBoardsModal) {
-    gl.IssueBoardsModalAddBtn = new Vue({
+    // eslint-disable-next-line no-new
+    new Vue({
       el: issueBoardsModal,
       mixins: [modalMixin],
       data() {
         return {
           modal: ModalStore.store,
-          store: Store.state,
+          store: boardsStore.state,
           canAdminList: this.$options.el.hasAttribute('data-can-admin-list'),
         };
       },
diff --git a/app/assets/javascripts/boards/mixins/sortable_default_options.js b/app/assets/javascripts/boards/mixins/sortable_default_options.js
index a8df45fc473..c9cde4effb9 100644
--- a/app/assets/javascripts/boards/mixins/sortable_default_options.js
+++ b/app/assets/javascripts/boards/mixins/sortable_default_options.js
@@ -3,32 +3,29 @@
 import $ from 'jquery';
 import sortableConfig from '../../sortable/sortable_config';
 
-window.gl = window.gl || {};
-window.gl.issueBoards = window.gl.issueBoards || {};
-
-gl.issueBoards.onStart = () => {
+export function sortableStart() {
   $('.has-tooltip').tooltip('hide')
     .tooltip('disable');
   document.body.classList.add('is-dragging');
-};
+}
 
-gl.issueBoards.onEnd = () => {
+export function sortableEnd() {
   $('.has-tooltip').tooltip('enable');
   document.body.classList.remove('is-dragging');
-};
+}
 
-gl.issueBoards.touchEnabled = ('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch;
+export function getBoardSortableDefaultOptions(obj) {
+  const touchEnabled = ('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch;
 
-gl.issueBoards.getBoardSortableDefaultOptions = (obj) => {
   const defaultSortOptions = Object.assign({}, sortableConfig, {
     filter: '.board-delete, .btn',
-    delay: gl.issueBoards.touchEnabled ? 100 : 0,
-    scrollSensitivity: gl.issueBoards.touchEnabled ? 60 : 100,
+    delay: touchEnabled ? 100 : 0,
+    scrollSensitivity: touchEnabled ? 60 : 100,
     scrollSpeed: 20,
-    onStart: gl.issueBoards.onStart,
-    onEnd: gl.issueBoards.onEnd,
+    onStart: sortableStart,
+    onEnd: sortableEnd,
   });
 
   Object.keys(obj).forEach((key) => { defaultSortOptions[key] = obj[key]; });
   return defaultSortOptions;
-};
+}
diff --git a/app/assets/javascripts/boards/models/issue.js b/app/assets/javascripts/boards/models/issue.js
index 609659bdf93..52d04389b88 100644
--- a/app/assets/javascripts/boards/models/issue.js
+++ b/app/assets/javascripts/boards/models/issue.js
@@ -6,6 +6,7 @@
 import Vue from 'vue';
 import '~/vue_shared/models/label';
 import IssueProject from './project';
+import boardsStore from '../stores/boards_store';
 
 class ListIssue {
   constructor (obj, defaultAvatar) {
@@ -86,7 +87,7 @@ class ListIssue {
   }
 
   getLists () {
-    return gl.issueBoards.BoardsStore.state.lists.filter(list => list.findIssue(this.id));
+    return boardsStore.state.lists.filter(list => list.findIssue(this.id));
   }
 
   updateData(newData) {
diff --git a/app/assets/javascripts/boards/models/list.js b/app/assets/javascripts/boards/models/list.js
index 58e423fbd44..3161f1da8c9 100644
--- a/app/assets/javascripts/boards/models/list.js
+++ b/app/assets/javascripts/boards/models/list.js
@@ -5,6 +5,7 @@ import { __ } from '~/locale';
 import ListLabel from '~/vue_shared/models/label';
 import ListAssignee from '~/vue_shared/models/assignee';
 import { urlParamsToObject } from '~/lib/utils/common_utils';
+import boardsStore from '../stores/boards_store';
 
 const PER_PAGE = 20;
 
@@ -89,9 +90,9 @@ class List {
   }
 
   destroy() {
-    const index = gl.issueBoards.BoardsStore.state.lists.indexOf(this);
-    gl.issueBoards.BoardsStore.state.lists.splice(index, 1);
-    gl.issueBoards.BoardsStore.updateNewListDropdown(this.id);
+    const index = boardsStore.state.lists.indexOf(this);
+    boardsStore.state.lists.splice(index, 1);
+    boardsStore.updateNewListDropdown(this.id);
 
     gl.boardService.destroyList(this.id).catch(() => {
       // TODO: handle request error
@@ -116,7 +117,7 @@ class List {
 
   getIssues(emptyIssues = true) {
     const data = {
-      ...urlParamsToObject(gl.issueBoards.BoardsStore.filter.path),
+      ...urlParamsToObject(boardsStore.filter.path),
       page: this.page,
     };
 
diff --git a/app/assets/javascripts/boards/stores/boards_store.js b/app/assets/javascripts/boards/stores/boards_store.js
index bd181807e1f..471955747fd 100644
--- a/app/assets/javascripts/boards/stores/boards_store.js
+++ b/app/assets/javascripts/boards/stores/boards_store.js
@@ -3,13 +3,11 @@
 
 import $ from 'jquery';
 import _ from 'underscore';
+import Vue from 'vue';
 import Cookies from 'js-cookie';
 import { getUrlParamsArray } from '~/lib/utils/common_utils';
 
-window.gl = window.gl || {};
-window.gl.issueBoards = window.gl.issueBoards || {};
-
-gl.issueBoards.BoardsStore = {
+const boardsStore = {
   disabled: false,
   filter: {
     path: '',
@@ -167,3 +165,16 @@ gl.issueBoards.BoardsStore = {
     window.history.pushState(null, null, `?${this.filter.path}`);
   }
 };
+
+// hacks added in order to allow milestone_select to function properly
+// TODO: remove these
+
+export function boardStoreIssueSet(...args) {
+  Vue.set(boardsStore.detail.issue, ...args);
+}
+
+export function boardStoreIssueDelete(...args) {
+  Vue.delete(boardsStore.detail.issue, ...args);
+}
+
+export default boardsStore;
diff --git a/app/assets/javascripts/due_date_select.js b/app/assets/javascripts/due_date_select.js
index 8abd8bc581a..c7b5a35cc14 100644
--- a/app/assets/javascripts/due_date_select.js
+++ b/app/assets/javascripts/due_date_select.js
@@ -5,6 +5,7 @@ import { __ } from '~/locale';
 import axios from './lib/utils/axios_utils';
 import { timeFor } from './lib/utils/datetime_utility';
 import { parsePikadayDate, pikadayToString } from './lib/utils/datefix';
+import boardsStore from './boards/stores/boards_store';
 
 class DueDateSelect {
   constructor({ $dropdown, $loading } = {}) {
@@ -58,7 +59,7 @@ class DueDateSelect {
         $dueDateInput.val(calendar.toString(dateText));
 
         if (this.$dropdown.hasClass('js-issue-boards-due-date')) {
-          gl.issueBoards.BoardsStore.detail.issue.dueDate = $dueDateInput.val();
+          boardsStore.detail.issue.dueDate = $dueDateInput.val();
           this.updateIssueBoardIssue();
         } else {
           this.saveDueDate(true);
@@ -79,7 +80,7 @@ class DueDateSelect {
       calendar.setDate(null);
 
       if (this.$dropdown.hasClass('js-issue-boards-due-date')) {
-        gl.issueBoards.BoardsStore.detail.issue.dueDate = '';
+        boardsStore.detail.issue.dueDate = '';
         this.updateIssueBoardIssue();
       } else {
         $(`input[name='${this.fieldName}']`).val('');
@@ -123,7 +124,7 @@ class DueDateSelect {
       this.$loading.fadeOut();
     };
 
-    gl.issueBoards.BoardsStore.detail.issue
+    boardsStore.detail.issue
       .update(this.$dropdown.attr('data-issue-update'))
       .then(fadeOutLoader)
       .catch(fadeOutLoader);
diff --git a/app/assets/javascripts/labels_select.js b/app/assets/javascripts/labels_select.js
index 68ae1ca6842..3c38d998b6c 100644
--- a/app/assets/javascripts/labels_select.js
+++ b/app/assets/javascripts/labels_select.js
@@ -11,6 +11,7 @@ import DropdownUtils from './filtered_search/dropdown_utils';
 import CreateLabelDropdown from './create_label';
 import flash from './flash';
 import ModalStore from './boards/stores/modal_store';
+import boardsStore from './boards/stores/boards_store';
 
 export default class LabelsSelect {
   constructor(els, options = {}) {
@@ -378,7 +379,7 @@ export default class LabelsSelect {
           }
           else if ($dropdown.hasClass('js-issue-board-sidebar')) {
             if ($el.hasClass('is-active')) {
-              gl.issueBoards.BoardsStore.detail.issue.labels.push(new ListLabel({
+              boardsStore.detail.issue.labels.push(new ListLabel({
                 id: label.id,
                 title: label.title,
                 color: label.color[0],
@@ -386,16 +387,16 @@ export default class LabelsSelect {
               }));
             }
             else {
-              var { labels } = gl.issueBoards.BoardsStore.detail.issue;
+              var { labels } = boardsStore.detail.issue;
               labels = labels.filter(function (selectedLabel) {
                 return selectedLabel.id !== label.id;
               });
-              gl.issueBoards.BoardsStore.detail.issue.labels = labels;
+              boardsStore.detail.issue.labels = labels;
             }
 
             $loading.fadeIn();
 
-            gl.issueBoards.BoardsStore.detail.issue.update($dropdown.attr('data-issue-update'))
+            boardsStore.detail.issue.update($dropdown.attr('data-issue-update'))
               .then(fadeOutLoader)
               .catch(fadeOutLoader);
           }
diff --git a/app/assets/javascripts/milestone_select.js b/app/assets/javascripts/milestone_select.js
index 67c2d7909a2..42fb5c7177a 100644
--- a/app/assets/javascripts/milestone_select.js
+++ b/app/assets/javascripts/milestone_select.js
@@ -9,6 +9,7 @@ import '~/gl_dropdown';
 import axios from './lib/utils/axios_utils';
 import { timeFor } from './lib/utils/datetime_utility';
 import ModalStore from './boards/stores/modal_store';
+import boardsStore, { boardStoreIssueSet, boardStoreIssueDelete } from './boards/stores/boards_store';
 
 export default class MilestoneSelect {
   constructor(currentProject, els, options = {}) {
@@ -187,7 +188,7 @@ export default class MilestoneSelect {
             return $dropdown.closest('form').submit();
           } else if ($dropdown.hasClass('js-issue-board-sidebar')) {
             if (selected.id !== -1 && isSelecting) {
-              gl.issueBoards.boardStoreIssueSet(
+              boardStoreIssueSet(
                 'milestone',
                 new ListMilestone({
                   id: selected.id,
@@ -195,13 +196,13 @@ export default class MilestoneSelect {
                 }),
               );
             } else {
-              gl.issueBoards.boardStoreIssueDelete('milestone');
+              boardStoreIssueDelete('milestone');
             }
 
             $dropdown.trigger('loading.gl.dropdown');
             $loading.removeClass('hidden').fadeIn();
 
-            gl.issueBoards.BoardsStore.detail.issue
+            boardsStore.detail.issue
               .update($dropdown.attr('data-issue-update'))
               .then(() => {
                 $dropdown.trigger('loaded.gl.dropdown');
-- 
cgit v1.2.1


From 2fa9b1fe8bd77b0579ab1373146b21646a92c3e8 Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Mon, 8 Oct 2018 18:02:48 +0100
Subject: Fixes styling issues in test reports

In the Merge Request widget, the reports for tests
had an extra border.
The loading icon in the mr widget used in all
report sections had an extra margin causing text
to be misaligned.
This commit fixes both issues

Closes #52147
---
 .../javascripts/vue_merge_request_widget/mr_widget_options.vue    | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
index 0e445a29de4..eeb90294f3f 100644
--- a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
@@ -268,11 +268,11 @@ export default {
       :key="deployment.id"
       :deployment="deployment"
     />
+    <grouped-test-reports-app
+      v-if="mr.testResultsPath"
+      :endpoint="mr.testResultsPath"
+    />
     <div class="mr-section-container">
-      <grouped-test-reports-app
-        v-if="mr.testResultsPath"
-        :endpoint="mr.testResultsPath"
-      />
       <div class="mr-widget-section">
         <component
           :is="componentName"
-- 
cgit v1.2.1


From 5ea377a492e15ae78bff906b37a51e3b6169c35d Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Tue, 9 Oct 2018 10:42:17 +0100
Subject: Adds a `js-` class to allow for specs

Rspec was using a CSS class to check if the content
was being rendered. Since the CSS has changed, the specs failed
This commit replaces the CSS class with a `js-` prepended one
to guarantee changing CSS won't break a pipeline
---
 app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue | 1 +
 1 file changed, 1 insertion(+)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
index eeb90294f3f..c2971d662a6 100644
--- a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
@@ -270,6 +270,7 @@ export default {
     />
     <grouped-test-reports-app
       v-if="mr.testResultsPath"
+      class="js-reports-container"
       :endpoint="mr.testResultsPath"
     />
     <div class="mr-section-container">
-- 
cgit v1.2.1


From 0073be9bf70f79ece094a28ed4d897636ba8ddc8 Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Thu, 11 Oct 2018 13:39:20 +0100
Subject: Adds `.json` to the end of pipelines endpoint

When the job page is rendered we fetch the pipeline
endpoint to render the stages in the sidebar.
Without `.json` the response is cached, and when the
user goes back to the pipeline's page it renders the
json output instead of the Vue app
---
 app/assets/javascripts/jobs/store/actions.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/jobs/store/actions.js b/app/assets/javascripts/jobs/store/actions.js
index 298367c9342..c8e1090bcc5 100644
--- a/app/assets/javascripts/jobs/store/actions.js
+++ b/app/assets/javascripts/jobs/store/actions.js
@@ -139,7 +139,7 @@ export const fetchStages = ({ state, dispatch }) => {
   dispatch('requestStages');
 
   axios
-    .get(state.job.pipeline.path)
+    .get(`${state.job.pipeline.path}.json`)
     .then(({ data }) => {
       dispatch('receiveStagesSuccess', data.details.stages);
       dispatch('fetchJobsForStage', data.details.stages[0]);
-- 
cgit v1.2.1


From e63cbf4ecebe9b0e20bf4f9b327d39655d644bac Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Thu, 11 Oct 2018 15:14:40 +0000
Subject: Stuck block URL links to runners settings

---
 app/assets/javascripts/jobs/components/job_app.vue | 4 ++--
 app/assets/javascripts/jobs/job_details_bundle.js  | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/jobs/components/job_app.vue b/app/assets/javascripts/jobs/components/job_app.vue
index 047e55866ce..c149c0ae51e 100644
--- a/app/assets/javascripts/jobs/components/job_app.vue
+++ b/app/assets/javascripts/jobs/components/job_app.vue
@@ -18,7 +18,7 @@
       StuckBlock,
     },
     props: {
-      runnerHelpUrl: {
+      runnerSettingsUrl: {
         type: String,
         required: false,
         default: null,
@@ -76,7 +76,7 @@
         class="js-job-stuck"
         :has-no-runners-for-project="job.runners.available"
         :tags="job.tags"
-        :runners-path="runnerHelpUrl"
+        :runners-path="runnerSettingsUrl"
       />
 
       <environments-block
diff --git a/app/assets/javascripts/jobs/job_details_bundle.js b/app/assets/javascripts/jobs/job_details_bundle.js
index 3eb75e72506..22eef770687 100644
--- a/app/assets/javascripts/jobs/job_details_bundle.js
+++ b/app/assets/javascripts/jobs/job_details_bundle.js
@@ -33,7 +33,7 @@ export default () => {
         props: {
           isLoading: this.isLoading,
           job: this.job,
-          runnerHelpUrl: dataset.runnerHelpUrl,
+          runnerSettingsUrl: dataset.runnerSettingsUrl,
         },
       });
     },
-- 
cgit v1.2.1


From dd0806d095ca481ad2cc3f72feaf3de98cbf093a Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Thu, 11 Oct 2018 18:33:02 +0000
Subject: Fix erased block not being rendered when job was erased

---
 app/assets/javascripts/jobs/components/job_app.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/jobs/components/job_app.vue b/app/assets/javascripts/jobs/components/job_app.vue
index c149c0ae51e..acf91e2e9ed 100644
--- a/app/assets/javascripts/jobs/components/job_app.vue
+++ b/app/assets/javascripts/jobs/components/job_app.vue
@@ -87,8 +87,8 @@
       />
 
       <erased-block
-        v-if="job.erased"
-        class="js-job-erased"
+        v-if="job.erased_at"
+        class="js-job-erased-block"
         :user="job.erased_by"
         :erased-at="job.erased_at"
       />
-- 
cgit v1.2.1


From a577cfcbb29a43f0d9e7b31567e37a735e40f316 Mon Sep 17 00:00:00 2001
From: Jacques Erasmus <jerasmus@gitlab.com>
Date: Thu, 11 Oct 2018 22:32:28 +0000
Subject: Fix broken file name navigation on MRs

---
 app/assets/javascripts/diffs/components/diff_file_header.vue | 10 +++++++---
 app/assets/javascripts/notes/components/diff_with_note.vue   |  1 +
 2 files changed, 8 insertions(+), 3 deletions(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/diffs/components/diff_file_header.vue b/app/assets/javascripts/diffs/components/diff_file_header.vue
index 15b37243030..dcf1057eb84 100644
--- a/app/assets/javascripts/diffs/components/diff_file_header.vue
+++ b/app/assets/javascripts/diffs/components/diff_file_header.vue
@@ -20,6 +20,11 @@ export default {
     Tooltip,
   },
   props: {
+    discussionPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
     diffFile: {
       type: Object,
       required: true,
@@ -65,8 +70,7 @@ export default {
       if (this.diffFile.submodule) {
         return this.diffFile.submoduleTreeUrl || this.diffFile.submoduleLink;
       }
-
-      return `#${this.diffFile.fileHash}`;
+      return this.discussionPath;
     },
     filePath() {
       if (this.diffFile.submodule) {
@@ -152,7 +156,7 @@ export default {
         v-once
         ref="titleWrapper"
         :href="titleLink"
-        class="append-right-4"
+        class="append-right-4 js-title-wrapper"
       >
         <file-icon
           :file-name="filePath"
diff --git a/app/assets/javascripts/notes/components/diff_with_note.vue b/app/assets/javascripts/notes/components/diff_with_note.vue
index 353aa790743..d9e99603238 100644
--- a/app/assets/javascripts/notes/components/diff_with_note.vue
+++ b/app/assets/javascripts/notes/components/diff_with_note.vue
@@ -94,6 +94,7 @@ export default {
     class="diff-file file-holder"
   >
     <diff-file-header
+      :discussion-path="discussion.discussionPath"
       :diff-file="diffFile"
       :can-current-user-fork="false"
       :discussions-expanded="isDiscussionsExpanded"
-- 
cgit v1.2.1


From 52cf955b898ce53d76bf0da83a36bb2579986e5f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Lu=C3=ADs?= <aluis@gitlab.com>
Date: Wed, 10 Oct 2018 17:53:17 +0100
Subject: Improve MR file tree on small screens

---
 app/assets/javascripts/diffs/store/modules/diff_state.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/diffs/store/modules/diff_state.js b/app/assets/javascripts/diffs/store/modules/diff_state.js
index ae8930c8968..1c5c35071de 100644
--- a/app/assets/javascripts/diffs/store/modules/diff_state.js
+++ b/app/assets/javascripts/diffs/store/modules/diff_state.js
@@ -1,5 +1,6 @@
 import Cookies from 'js-cookie';
 import { getParameterValues } from '~/lib/utils/url_utility';
+import bp from '~/breakpoints';
 import { INLINE_DIFF_VIEW_TYPE, DIFF_VIEW_COOKIE_NAME, MR_TREE_SHOW_KEY } from '../../constants';
 
 const viewTypeFromQueryString = getParameterValues('view')[0];
@@ -20,6 +21,7 @@ export default () => ({
   diffViewType: viewTypeFromQueryString || viewTypeFromCookie || defaultViewType,
   tree: [],
   treeEntries: {},
-  showTreeList: storedTreeShow === null ? true : storedTreeShow === 'true',
+  showTreeList:
+    storedTreeShow === null ? bp.getBreakpointSize() !== 'xs' : storedTreeShow === 'true',
   currentDiffFileId: '',
 });
-- 
cgit v1.2.1


From cbb659cdb340176c4359ab0ee79e9d03782e00e9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Lu=C3=ADs?= <aluis@gitlab.com>
Date: Thu, 11 Oct 2018 17:49:45 +0100
Subject: Backport EE fixes to CE checking resolvability

EE branch: 7921-fix-batch-comments-resolution
fixes the checks to know whether discussion will
be resolved upon posting a comment or not. It
covers scenarios where Batch Comments are enabled
and disabled. To minimise risk of conflicts between
CE and EE, the checks have been backported.

this.shouldResolve() will not exist in CE.
---
 app/assets/javascripts/notes/components/note_form.vue | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/notes/components/note_form.vue b/app/assets/javascripts/notes/components/note_form.vue
index 33998394a69..38c43e5fe08 100644
--- a/app/assets/javascripts/notes/components/note_form.vue
+++ b/app/assets/javascripts/notes/components/note_form.vue
@@ -102,6 +102,18 @@ export default {
   },
   methods: {
     ...mapActions(['toggleResolveNote']),
+    shouldToggleResolved(shouldResolve, beforeSubmitDiscussionState) {
+      // shouldBeResolved() checks the actual resolution state,
+      // considering batchComments (EEP), if applicable/enabled.
+      const newResolvedStateAfterUpdate =
+        this.shouldBeResolved && this.shouldBeResolved(shouldResolve);
+
+      const shouldToggleState =
+        newResolvedStateAfterUpdate !== undefined &&
+        beforeSubmitDiscussionState !== newResolvedStateAfterUpdate;
+
+      return shouldResolve || shouldToggleState;
+    },
     handleUpdate(shouldResolve) {
       const beforeSubmitDiscussionState = this.discussionResolved;
       this.isSubmitting = true;
@@ -109,7 +121,7 @@ export default {
       this.$emit('handleFormUpdate', this.updatedNoteBody, this.$refs.editNoteForm, () => {
         this.isSubmitting = false;
 
-        if (shouldResolve) {
+        if (this.shouldToggleResolved(shouldResolve, beforeSubmitDiscussionState)) {
           this.resolveHandler(beforeSubmitDiscussionState);
         }
       });
-- 
cgit v1.2.1


From 06c24d497de3b2e22b1a2fc13ae1cd2cb0100b84 Mon Sep 17 00:00:00 2001
From: Luke Bennett <lbennett@gitlab.com>
Date: Fri, 12 Oct 2018 09:45:50 +0000
Subject: Revert "Merge branch 'ce-6983-promote-starting-a-gitlab-com-trial'
 into 'master'"

This reverts merge request !21551
---
 app/assets/javascripts/clusters/clusters_bundle.js | 10 ++-----
 app/assets/javascripts/clusters/clusters_index.js  |  5 ++--
 app/assets/javascripts/dismissable_callout.js      | 27 +++++++++++++++++
 app/assets/javascripts/pages/projects/index.js     |  6 ++--
 app/assets/javascripts/pages/root/index.js         |  5 ----
 app/assets/javascripts/persistent_user_callout.js  | 34 ----------------------
 6 files changed, 33 insertions(+), 54 deletions(-)
 create mode 100644 app/assets/javascripts/dismissable_callout.js
 delete mode 100644 app/assets/javascripts/pages/root/index.js
 delete mode 100644 app/assets/javascripts/persistent_user_callout.js

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/clusters/clusters_bundle.js b/app/assets/javascripts/clusters/clusters_bundle.js
index 65e7cee7039..ebf76af5966 100644
--- a/app/assets/javascripts/clusters/clusters_bundle.js
+++ b/app/assets/javascripts/clusters/clusters_bundle.js
@@ -1,6 +1,6 @@
 import Visibility from 'visibilityjs';
 import Vue from 'vue';
-import PersistentUserCallout from '../persistent_user_callout';
+import initDismissableCallout from '~/dismissable_callout';
 import { s__, sprintf } from '../locale';
 import Flash from '../flash';
 import Poll from '../lib/utils/poll';
@@ -62,7 +62,7 @@ export default class Clusters {
     this.showTokenButton = document.querySelector('.js-show-cluster-token');
     this.tokenField = document.querySelector('.js-cluster-token');
 
-    Clusters.initDismissableCallout();
+    initDismissableCallout('.js-cluster-security-warning');
     initSettingsPanels();
     setupToggleButtons(document.querySelector('.js-cluster-enable-toggle-area'));
     this.initApplications();
@@ -105,12 +105,6 @@ export default class Clusters {
     });
   }
 
-  static initDismissableCallout() {
-    const callout = document.querySelector('.js-cluster-security-warning');
-
-    if (callout) new PersistentUserCallout(callout); // eslint-disable-line no-new
-  }
-
   addListeners() {
     if (this.showTokenButton) this.showTokenButton.addEventListener('click', this.showToken);
     eventHub.$on('installApplication', this.installApplication);
diff --git a/app/assets/javascripts/clusters/clusters_index.js b/app/assets/javascripts/clusters/clusters_index.js
index e32d507d1f7..789c8360124 100644
--- a/app/assets/javascripts/clusters/clusters_index.js
+++ b/app/assets/javascripts/clusters/clusters_index.js
@@ -1,15 +1,14 @@
 import createFlash from '~/flash';
 import { __ } from '~/locale';
 import setupToggleButtons from '~/toggle_buttons';
-import PersistentUserCallout from '../persistent_user_callout';
+import initDismissableCallout from '~/dismissable_callout';
 
 import ClustersService from './services/clusters_service';
 
 export default () => {
   const clusterList = document.querySelector('.js-clusters-list');
 
-  const callout = document.querySelector('.gcp-signup-offer');
-  if (callout) new PersistentUserCallout(callout); // eslint-disable-line no-new
+  initDismissableCallout('.gcp-signup-offer');
 
   // The empty state won't have a clusterList
   if (clusterList) {
diff --git a/app/assets/javascripts/dismissable_callout.js b/app/assets/javascripts/dismissable_callout.js
new file mode 100644
index 00000000000..5185b019376
--- /dev/null
+++ b/app/assets/javascripts/dismissable_callout.js
@@ -0,0 +1,27 @@
+import $ from 'jquery';
+import axios from '~/lib/utils/axios_utils';
+import { __ } from '~/locale';
+import Flash from '~/flash';
+
+export default function initDismissableCallout(alertSelector) {
+  const alertEl = document.querySelector(alertSelector);
+  if (!alertEl) {
+    return;
+  }
+
+  const closeButtonEl = alertEl.getElementsByClassName('close')[0];
+  const { dismissEndpoint, featureId } = closeButtonEl.dataset;
+
+  closeButtonEl.addEventListener('click', () => {
+    axios
+      .post(dismissEndpoint, {
+        feature_name: featureId,
+      })
+      .then(() => {
+        $(alertEl).alert('close');
+      })
+      .catch(() => {
+        Flash(__('An error occurred while dismissing the alert. Refresh the page and try again.'));
+      });
+  });
+}
diff --git a/app/assets/javascripts/pages/projects/index.js b/app/assets/javascripts/pages/projects/index.js
index b0345b4e50d..5659e13981a 100644
--- a/app/assets/javascripts/pages/projects/index.js
+++ b/app/assets/javascripts/pages/projects/index.js
@@ -1,5 +1,5 @@
+import initDismissableCallout from '~/dismissable_callout';
 import initGkeDropdowns from '~/projects/gke_cluster_dropdowns';
-import PersistentUserCallout from '../../persistent_user_callout';
 import Project from './project';
 import ShortcutsNavigation from '../../behaviors/shortcuts/shortcuts_navigation';
 
@@ -12,9 +12,7 @@ document.addEventListener('DOMContentLoaded', () => {
   ];
 
   if (newClusterViews.indexOf(page) > -1) {
-    const callout = document.querySelector('.gcp-signup-offer');
-    if (callout) new PersistentUserCallout(callout); // eslint-disable-line no-new
-
+    initDismissableCallout('.gcp-signup-offer');
     initGkeDropdowns();
   }
 
diff --git a/app/assets/javascripts/pages/root/index.js b/app/assets/javascripts/pages/root/index.js
deleted file mode 100644
index 09f8185d3b5..00000000000
--- a/app/assets/javascripts/pages/root/index.js
+++ /dev/null
@@ -1,5 +0,0 @@
-// if the "projects dashboard" is a user's default dashboard, when they visit the
-// instance root index, the dashboard will be served by the root controller instead
-// of a dashboard controller. The root index redirects for all other default dashboards.
-
-import '../dashboard/projects/index';
diff --git a/app/assets/javascripts/persistent_user_callout.js b/app/assets/javascripts/persistent_user_callout.js
deleted file mode 100644
index 1e34e74a152..00000000000
--- a/app/assets/javascripts/persistent_user_callout.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import axios from './lib/utils/axios_utils';
-import { __ } from './locale';
-import Flash from './flash';
-
-export default class PersistentUserCallout {
-  constructor(container) {
-    const { dismissEndpoint, featureId } = container.dataset;
-    this.container = container;
-    this.dismissEndpoint = dismissEndpoint;
-    this.featureId = featureId;
-
-    this.init();
-  }
-
-  init() {
-    const closeButton = this.container.querySelector('.js-close');
-    closeButton.addEventListener('click', event => this.dismiss(event));
-  }
-
-  dismiss(event) {
-    event.preventDefault();
-
-    axios
-      .post(this.dismissEndpoint, {
-        feature_name: this.featureId,
-      })
-      .then(() => {
-        this.container.remove();
-      })
-      .catch(() => {
-        Flash(__('An error occurred while dismissing the alert. Refresh the page and try again.'));
-      });
-  }
-}
-- 
cgit v1.2.1


From a9d91ed20743b61d9e0361d7d7568d0781251817 Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Fri, 12 Oct 2018 09:36:42 +0100
Subject: Hide job sidebar on mobile

This commit adds back `js-` classes needed to
automatically collapse the sidebar on resize.
---
 app/assets/javascripts/jobs/components/job_log_controllers.vue | 2 +-
 app/assets/javascripts/jobs/components/sidebar.vue             | 2 +-
 app/assets/javascripts/jobs/job_details_bundle.js              | 6 ++++--
 3 files changed, 6 insertions(+), 4 deletions(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/jobs/components/job_log_controllers.vue b/app/assets/javascripts/jobs/components/job_log_controllers.vue
index 35d40c6898e..cc885ea8e1b 100644
--- a/app/assets/javascripts/jobs/components/job_log_controllers.vue
+++ b/app/assets/javascripts/jobs/components/job_log_controllers.vue
@@ -65,7 +65,7 @@ export default {
 };
 </script>
 <template>
-  <div class="top-bar">
+  <div class="top-bar affix js-top-bar">
     <!-- truncate information -->
     <div class="js-truncated-info truncated-info d-none d-sm-block float-left">
       <template v-if="isTraceSizeVisible">
diff --git a/app/assets/javascripts/jobs/components/sidebar.vue b/app/assets/javascripts/jobs/components/sidebar.vue
index 7f0f301d72a..047cc4fb663 100644
--- a/app/assets/javascripts/jobs/components/sidebar.vue
+++ b/app/assets/javascripts/jobs/components/sidebar.vue
@@ -110,7 +110,7 @@ export default {
 </script>
 <template>
   <aside
-    class="right-sidebar right-sidebar-expanded build-sidebar"
+    class="js-build-sidebar right-sidebar right-sidebar-expanded build-sidebar"
     data-offset-top="101"
     data-spy="affix"
   >
diff --git a/app/assets/javascripts/jobs/job_details_bundle.js b/app/assets/javascripts/jobs/job_details_bundle.js
index 22eef770687..15cd79b1c50 100644
--- a/app/assets/javascripts/jobs/job_details_bundle.js
+++ b/app/assets/javascripts/jobs/job_details_bundle.js
@@ -9,8 +9,7 @@ import createStore from './store';
 export default () => {
   const { dataset } = document.getElementById('js-job-details-vue');
 
-  // eslint-disable-next-line no-new
-  new Job();
+
 
   const store = createStore();
   store.dispatch('setJobEndpoint', dataset.endpoint);
@@ -71,4 +70,7 @@ export default () => {
       });
     },
   });
+
+  // eslint-disable-next-line no-new
+  new Job();
 };
-- 
cgit v1.2.1


From 97701019e6f159e0e01d415f39172104286ae3c2 Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Thu, 11 Oct 2018 18:45:11 +0100
Subject: Updates gitlab-svg dependency

---
 app/assets/javascripts/clusters/components/applications.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/clusters/components/applications.vue b/app/assets/javascripts/clusters/components/applications.vue
index a1069985178..6e7b5eb5526 100644
--- a/app/assets/javascripts/clusters/components/applications.vue
+++ b/app/assets/javascripts/clusters/components/applications.vue
@@ -1,6 +1,6 @@
 <script>
 import _ from 'underscore';
-import helmInstallIllustration from '@gitlab-org/gitlab-svgs/illustrations/kubernetes-installation.svg';
+import helmInstallIllustration from '@gitlab-org/gitlab-svgs/dist/illustrations/kubernetes-installation.svg';
 import elasticsearchLogo from 'images/cluster_app_logos/elasticsearch.png';
 import gitlabLogo from 'images/cluster_app_logos/gitlab.png';
 import helmLogo from 'images/cluster_app_logos/helm.png';
-- 
cgit v1.2.1


From 22d6ad7550a897e5a60249f3a5944883f1386fc1 Mon Sep 17 00:00:00 2001
From: Sean McGivern <sean@gitlab.com>
Date: Tue, 9 Oct 2018 12:13:28 +0100
Subject: Show if the host is a canary host in the perf bar

If the request came from a canary host, show this in the performance bar
by:

1. Adding a bird emoji.
2. Colouring the hostname yellow.
---
 .../performance_bar/components/performance_bar_app.vue    | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/performance_bar/components/performance_bar_app.vue b/app/assets/javascripts/performance_bar/components/performance_bar_app.vue
index 1522e2227e4..300d453c174 100644
--- a/app/assets/javascripts/performance_bar/components/performance_bar_app.vue
+++ b/app/assets/javascripts/performance_bar/components/performance_bar_app.vue
@@ -1,5 +1,6 @@
 <script>
 import $ from 'jquery';
+import { glEmojiTag } from '~/emoji';
 
 import detailedMetric from './detailed_metric.vue';
 import requestSelector from './request_selector.vue';
@@ -64,6 +65,16 @@ export default {
     lineProfileModal() {
       return $('#modal-peek-line-profile');
     },
+    hasHost() {
+      return this.currentRequest && this.currentRequest.details && this.currentRequest.details.host;
+    },
+    birdEmoji() {
+      if (this.hasHost && this.currentRequest.details.host.canary) {
+        return glEmojiTag('baby_chick');
+      }
+
+      return '';
+    },
   },
   mounted() {
     this.currentRequest = this.requestId;
@@ -93,9 +104,11 @@ export default {
         class="view"
       >
         <span
-          v-if="currentRequest.details"
+          v-if="hasHost"
           class="current-host"
+          :class="{ 'canary' : currentRequest.details.host.canary }"
         >
+          <span v-html="birdEmoji"></span>
           {{ currentRequest.details.host.hostname }}
         </span>
       </div>
-- 
cgit v1.2.1


From 85c30d742cec72466389a77a2df8d42e3c0075d7 Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Fri, 12 Oct 2018 16:26:04 +0100
Subject: Updates the check for started in job header

The function that was checking if the job was started or not
was expecting a boolean, however it was receiving a null.
During the refactor the condition was changed, causing the function
to break with null

This commit fixes the check
---
 app/assets/javascripts/jobs/components/job_app.vue | 4 ++--
 app/assets/javascripts/jobs/store/getters.js       | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/jobs/components/job_app.vue b/app/assets/javascripts/jobs/components/job_app.vue
index acf91e2e9ed..4e8d3ad24cc 100644
--- a/app/assets/javascripts/jobs/components/job_app.vue
+++ b/app/assets/javascripts/jobs/components/job_app.vue
@@ -30,7 +30,7 @@
         'headerActions',
         'headerTime',
         'shouldRenderCalloutMessage',
-        'jobHasStarted',
+        'shouldRenderTriggeredLabel',
         'hasEnvironment',
         'isJobStuck',
         'hasTrace',
@@ -58,7 +58,7 @@
             :user="job.user"
             :actions="headerActions"
             :has-sidebar-button="true"
-            :should-render-triggered-label="jobHasStarted"
+            :should-render-triggered-label="shouldRenderTriggeredLabel"
             :item-name="__('Job')"
           />
         </div>
diff --git a/app/assets/javascripts/jobs/store/getters.js b/app/assets/javascripts/jobs/store/getters.js
index afe5f88b292..9f4f372e3d2 100644
--- a/app/assets/javascripts/jobs/store/getters.js
+++ b/app/assets/javascripts/jobs/store/getters.js
@@ -22,10 +22,10 @@ export const shouldRenderCalloutMessage = state =>
   !_.isEmpty(state.job.status) && !_.isEmpty(state.job.callout_message);
 
 /**
- * When job has not started the key will be `false`
+ * When job has not started the key will be null
  * When job started the key will be a string with a date.
  */
-export const jobHasStarted = state => !(state.job.started === false);
+export const shouldRenderTriggeredLabel = state => _.isString(state.job.started);
 
 export const hasEnvironment = state => !_.isEmpty(state.job.deployment_status);
 
-- 
cgit v1.2.1


From 464655edb2bc1f78952fb86969405d3c19e35e6b Mon Sep 17 00:00:00 2001
From: Steve Azzopardi <sazzopardi@gitlab.com>
Date: Fri, 12 Oct 2018 17:13:41 +0000
Subject: Add stage name in job.json response

---
 app/assets/javascripts/jobs/components/sidebar.vue  |  3 ++-
 .../javascripts/jobs/components/stages_dropdown.vue | 21 +++++----------------
 app/assets/javascripts/jobs/store/actions.js        |  9 ++++++---
 app/assets/javascripts/jobs/store/mutations.js      | 13 ++++++++++++-
 app/assets/javascripts/jobs/store/state.js          |  4 +++-
 5 files changed, 28 insertions(+), 22 deletions(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/jobs/components/sidebar.vue b/app/assets/javascripts/jobs/components/sidebar.vue
index 047cc4fb663..8f3c6aced23 100644
--- a/app/assets/javascripts/jobs/components/sidebar.vue
+++ b/app/assets/javascripts/jobs/components/sidebar.vue
@@ -36,7 +36,7 @@ export default {
     },
   },
   computed: {
-    ...mapState(['job', 'isLoading', 'stages', 'jobs']),
+    ...mapState(['job', 'isLoading', 'stages', 'jobs', 'selectedStage']),
     coverage() {
       return `${this.job.coverage}%`;
     },
@@ -276,6 +276,7 @@ export default {
           <stages-dropdown
             :stages="stages"
             :pipeline="job.pipeline"
+            :selected-stage="selectedStage"
             @requestSidebarStageDropdown="fetchJobsForStage"
           />
 
diff --git a/app/assets/javascripts/jobs/components/stages_dropdown.vue b/app/assets/javascripts/jobs/components/stages_dropdown.vue
index 34d47b3a3bb..e5e1d56e287 100644
--- a/app/assets/javascripts/jobs/components/stages_dropdown.vue
+++ b/app/assets/javascripts/jobs/components/stages_dropdown.vue
@@ -2,7 +2,6 @@
 import _ from 'underscore';
 import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import Icon from '~/vue_shared/components/icon.vue';
-import { __ } from '~/locale';
 
 export default {
   components: {
@@ -18,30 +17,20 @@ export default {
       type: Array,
       required: true,
     },
+    selectedStage: {
+      type: String,
+      required: true,
+    },
   },
-  data() {
-    return {
-      selectedStage: this.stages.length > 0 ? this.stages[0].name : __('More'),
-    };
-  },
+
   computed: {
     hasRef() {
       return !_.isEmpty(this.pipeline.ref);
     },
   },
-  watch: {
-    // When the component is initially mounted it may start with an empty stages array.
-    // Once the prop is updated, we set the first stage as the selected one
-    stages(newVal) {
-      if (newVal.length) {
-        this.selectedStage = newVal[0].name;
-      }
-    },
-  },
   methods: {
     onStageClick(stage) {
       this.$emit('requestSidebarStageDropdown', stage);
-      this.selectedStage = stage.name;
     },
   },
 };
diff --git a/app/assets/javascripts/jobs/store/actions.js b/app/assets/javascripts/jobs/store/actions.js
index c8e1090bcc5..d0040161dc3 100644
--- a/app/assets/javascripts/jobs/store/actions.js
+++ b/app/assets/javascripts/jobs/store/actions.js
@@ -141,8 +141,10 @@ export const fetchStages = ({ state, dispatch }) => {
   axios
     .get(`${state.job.pipeline.path}.json`)
     .then(({ data }) => {
+      // Set selected stage
       dispatch('receiveStagesSuccess', data.details.stages);
-      dispatch('fetchJobsForStage', data.details.stages[0]);
+      const selectedStage = data.details.stages.find(stage => stage.name === state.selectedStage);
+      dispatch('fetchJobsForStage', selectedStage);
     })
     .catch(() => dispatch('receiveStagesError'));
 };
@@ -156,11 +158,12 @@ export const receiveStagesError = ({ commit }) => {
 /**
  * Jobs list on sidebar - depend on stages dropdown
  */
-export const requestJobsForStage = ({ commit }) => commit(types.REQUEST_JOBS_FOR_STAGE);
+export const requestJobsForStage = ({ commit }, stage) =>
+  commit(types.REQUEST_JOBS_FOR_STAGE, stage);
 
 // On stage click, set selected stage + fetch job
 export const fetchJobsForStage = ({ dispatch }, stage) => {
-  dispatch('requestJobsForStage');
+  dispatch('requestJobsForStage', stage);
 
   axios
     .get(stage.dropdown_path, {
diff --git a/app/assets/javascripts/jobs/store/mutations.js b/app/assets/javascripts/jobs/store/mutations.js
index c3f2359fa4d..f00e06e1a6c 100644
--- a/app/assets/javascripts/jobs/store/mutations.js
+++ b/app/assets/javascripts/jobs/store/mutations.js
@@ -53,6 +53,16 @@ export default {
     state.isLoading = false;
     state.hasError = false;
     state.job = job;
+
+    /**
+     * We only update it on the first request
+     * The dropdown can be changed by the user
+     * after the first request,
+     * and we do not want to hijack that
+     */
+    if (state.selectedStage === 'More' && job.stage) {
+      state.selectedStage = job.stage;
+    }
   },
   [types.RECEIVE_JOB_ERROR](state) {
     state.isLoading = false;
@@ -81,8 +91,9 @@ export default {
     state.stages = [];
   },
 
-  [types.REQUEST_JOBS_FOR_STAGE](state) {
+  [types.REQUEST_JOBS_FOR_STAGE](state, stage) {
     state.isLoadingJobs = true;
+    state.selectedStage = stage.name;
   },
   [types.RECEIVE_JOBS_FOR_STAGE_SUCCESS](state, jobs) {
     state.isLoadingJobs = false;
diff --git a/app/assets/javascripts/jobs/store/state.js b/app/assets/javascripts/jobs/store/state.js
index 509cb69a5d3..afbc959bb71 100644
--- a/app/assets/javascripts/jobs/store/state.js
+++ b/app/assets/javascripts/jobs/store/state.js
@@ -1,3 +1,5 @@
+import { __ } from '~/locale';
+
 export default () => ({
   jobEndpoint: null,
   traceEndpoint: null,
@@ -34,7 +36,7 @@ export default () => ({
   // sidebar dropdown
   isLoadingStages: false,
   isLoadingJobs: false,
-  selectedStage: null,
+  selectedStage: __('More'),
   stages: [],
   jobs: [],
 });
-- 
cgit v1.2.1


From 399056ed783e12337a9c47b06b4aae021198f1cd Mon Sep 17 00:00:00 2001
From: Zeger-Jan van de Weg <git@zjvandeweg.nl>
Date: Fri, 3 Aug 2018 15:24:26 +0200
Subject: Remove dependencies on Linguist

This saves about 128 MB of baseline RAM usage per Unicorn and
Sidekiq process (!).

Linguist wasn't detecting languages anymore from CE/EE since
9ae8b57467ac8b38f1fa9020a466d94a93cbb9dd. However, Linguist::BlobHelper
was still being depended on by BlobLike and others.

This removes the Linguist gem, given it isn't required anymore.
EscapeUtils were pulled in as dependency, but given Banzai depends on
it, it is now added explicitly.

Previously, Linguist was used to detect the best ACE mode. Instead,
we rely on ACE to guess the best mode based on the file extension.
---
 app/assets/javascripts/blob_edit/blob_bundle.js                   | 4 ++--
 app/assets/javascripts/blob_edit/edit_blob.js                     | 8 +++++---
 app/assets/javascripts/lib/ace.js                                 | 1 +
 app/assets/javascripts/lib/utils/ace_utils.js                     | 6 ++++++
 .../javascripts/merge_conflicts/components/diff_file_editor.js    | 3 ++-
 5 files changed, 16 insertions(+), 6 deletions(-)
 create mode 100644 app/assets/javascripts/lib/utils/ace_utils.js

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/blob_edit/blob_bundle.js b/app/assets/javascripts/blob_edit/blob_bundle.js
index 4e4598870fa..3cc89ff1955 100644
--- a/app/assets/javascripts/blob_edit/blob_bundle.js
+++ b/app/assets/javascripts/blob_edit/blob_bundle.js
@@ -13,11 +13,11 @@ export default () => {
   if (editBlobForm.length) {
     const urlRoot = editBlobForm.data('relativeUrlRoot');
     const assetsPath = editBlobForm.data('assetsPrefix');
-    const blobLanguage = editBlobForm.data('blobLanguage');
+    const filePath = editBlobForm.data('blobFilename')
     const currentAction = $('.js-file-title').data('currentAction');
     const projectId = editBlobForm.data('project-id');
 
-    new EditBlob(`${urlRoot}${assetsPath}`, blobLanguage, currentAction, projectId);
+    new EditBlob(`${urlRoot}${assetsPath}`, filePath, currentAction, projectId);
     new NewCommitForm(editBlobForm);
   }
 
diff --git a/app/assets/javascripts/blob_edit/edit_blob.js b/app/assets/javascripts/blob_edit/edit_blob.js
index ec2b130ab7d..6e19548eed2 100644
--- a/app/assets/javascripts/blob_edit/edit_blob.js
+++ b/app/assets/javascripts/blob_edit/edit_blob.js
@@ -5,6 +5,7 @@ import axios from '~/lib/utils/axios_utils';
 import createFlash from '~/flash';
 import { __ } from '~/locale';
 import TemplateSelectorMediator from '../blob/file_template_mediator';
+import getModeByFileExtension from '~/lib/utils/ace_utils';
 
 export default class EditBlob {
   constructor(assetsPath, aceMode, currentAction, projectId) {
@@ -14,9 +15,10 @@ export default class EditBlob {
     this.initFileSelectors(currentAction, projectId);
   }
 
-  configureAceEditor(aceMode, assetsPath) {
+  configureAceEditor(filePath, assetsPath) {
     ace.config.set('modePath', `${assetsPath}/ace`);
     ace.config.loadModule('ace/ext/searchbox');
+    ace.config.loadModule('ace/ext/modelist');
 
     this.editor = ace.edit('editor');
 
@@ -25,8 +27,8 @@ export default class EditBlob {
 
     this.editor.focus();
 
-    if (aceMode) {
-      this.editor.getSession().setMode(`ace/mode/${aceMode}`);
+    if (filePath) {
+      this.editor.getSession().setMode(getModeByFileExtension(filePath));
     }
   }
 
diff --git a/app/assets/javascripts/lib/ace.js b/app/assets/javascripts/lib/ace.js
index 9cdc0309503..e90b3d2eec7 100644
--- a/app/assets/javascripts/lib/ace.js
+++ b/app/assets/javascripts/lib/ace.js
@@ -1,3 +1,4 @@
 /*= require ace/ace */
+/*= require ace/ext-modelist */
 /*= require ace/ext-searchbox */
 /*= require ./ace/ace_config_paths */
diff --git a/app/assets/javascripts/lib/utils/ace_utils.js b/app/assets/javascripts/lib/utils/ace_utils.js
new file mode 100644
index 00000000000..efc4b2a8d94
--- /dev/null
+++ b/app/assets/javascripts/lib/utils/ace_utils.js
@@ -0,0 +1,6 @@
+/* global ace */
+
+export default function getModeByFileExtension(path) {
+  const modelist = ace.require("ace/ext/modelist");
+  return modelist.getModeForPath(path).mode;
+};
diff --git a/app/assets/javascripts/merge_conflicts/components/diff_file_editor.js b/app/assets/javascripts/merge_conflicts/components/diff_file_editor.js
index 425b806e9d6..a62ebe23646 100644
--- a/app/assets/javascripts/merge_conflicts/components/diff_file_editor.js
+++ b/app/assets/javascripts/merge_conflicts/components/diff_file_editor.js
@@ -5,6 +5,7 @@ import Vue from 'vue';
 import axios from '~/lib/utils/axios_utils';
 import flash from '~/flash';
 import { __ } from '~/locale';
+import getModeByFileExtension from '~/lib/utils/ace_utils';
 
 (global => {
   global.mergeConflicts = global.mergeConflicts || {};
@@ -72,7 +73,7 @@ import { __ } from '~/locale';
             this.fileLoaded = true;
             this.editor = ace.edit(content);
             this.editor.$blockScrolling = Infinity; // Turn off annoying warning
-            this.editor.getSession().setMode(`ace/mode/${data.blob_ace_mode}`);
+            this.editor.getSession().setMode(getModeByFileExtension(data.new_path));
             this.editor.on('change', () => {
               this.saveDiffResolution();
             });
-- 
cgit v1.2.1


From 27326ac62c9bef892ab0dcc255e6abc74573983d Mon Sep 17 00:00:00 2001
From: Stan Hu <stanhu@gmail.com>
Date: Sat, 13 Oct 2018 16:15:46 -0700
Subject: Associate Rakefile with Ruby icon in diffs

Closes https://gitlab.com/gitlab-org/gitlab-ce/issues/52654
---
 .../javascripts/vue_shared/components/file_icon/file_icon_map.js     | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/vue_shared/components/file_icon/file_icon_map.js b/app/assets/javascripts/vue_shared/components/file_icon/file_icon_map.js
index 9bca1993ccc..bffaa096210 100644
--- a/app/assets/javascripts/vue_shared/components/file_icon/file_icon_map.js
+++ b/app/assets/javascripts/vue_shared/components/file_icon/file_icon_map.js
@@ -549,6 +549,7 @@ const fileNameIcons = {
   jenkinsfile: 'jenkins',
   'firebase.json': 'firebase',
   '.firebaserc': 'firebase',
+  Rakefile: 'ruby',
   'rollup.config.js': 'rollup',
   'rollup.config.ts': 'rollup',
   'rollup-config.js': 'rollup',
@@ -583,7 +584,5 @@ const fileNameIcons = {
 };
 
 export default function getIconForFile(name) {
-  return fileNameIcons[name] ||
-         fileExtensionIcons[name ? name.split('.').pop() : ''] ||
-         '';
+  return fileNameIcons[name] || fileExtensionIcons[name ? name.split('.').pop() : ''] || '';
 }
-- 
cgit v1.2.1


From 05ec7b352fe777426a12a5962bb9c06b86d62961 Mon Sep 17 00:00:00 2001
From: Lukas Eipert <leipert@gitlab.com>
Date: Mon, 15 Oct 2018 07:55:41 +0200
Subject: Remove obsolete usage of gl.lazyLoader.loadCheck

In [!21565][0] we removed the loadCheck function from the LazyLoader for
images. The function seemed to be obsolete before anyhow, because we
make use of the MutationObserver in order to detect elements added /
removed from the DOM.

[0]: https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/21565
---
 app/assets/javascripts/main.js          | 1 -
 app/assets/javascripts/right_sidebar.js | 2 --
 2 files changed, 3 deletions(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js
index e8aac51a299..a88b575ad99 100644
--- a/app/assets/javascripts/main.js
+++ b/app/assets/javascripts/main.js
@@ -202,7 +202,6 @@ document.addEventListener('DOMContentLoaded', () => {
 
   $('.navbar-toggler').on('click', () => {
     $('.header-content').toggleClass('menu-expanded');
-    gl.lazyLoader.loadCheck();
   });
 
   // Show/hide comments on diff
diff --git a/app/assets/javascripts/right_sidebar.js b/app/assets/javascripts/right_sidebar.js
index 64f3dde5be7..6b3753f7966 100644
--- a/app/assets/javascripts/right_sidebar.js
+++ b/app/assets/javascripts/right_sidebar.js
@@ -57,8 +57,6 @@ Sidebar.prototype.sidebarToggleClicked = function (e, triggered) {
     $allGutterToggleIcons.removeClass('fa-angle-double-left').addClass('fa-angle-double-right');
     $('aside.right-sidebar').removeClass('right-sidebar-collapsed').addClass('right-sidebar-expanded');
     $('.layout-page').removeClass('right-sidebar-collapsed').addClass('right-sidebar-expanded');
-
-    if (gl.lazyLoader) gl.lazyLoader.loadCheck();
   }
 
   $this.attr('data-original-title', tooltipLabel);
-- 
cgit v1.2.1


From b4297573c0c55eb3bb66c98dfe1457028edfd5dc Mon Sep 17 00:00:00 2001
From: Mark Chao <mchao@gitlab.com>
Date: Mon, 15 Oct 2018 07:56:29 +0000
Subject: Only display merge commit SHA when it exists

---
 .../components/states/mr_widget_merged.vue         | 26 ++++++++++++----------
 1 file changed, 14 insertions(+), 12 deletions(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue
index 8184ef33022..c19b67f00fa 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue
@@ -162,18 +162,20 @@
           <span class="label-branch">
             <a :href="mr.targetBranchPath">{{ mr.targetBranch }}</a>
           </span>
-          with
-          <a
-            :href="mr.mergeCommitPath"
-            class="commit-sha js-mr-merged-commit-sha"
-            v-text="mr.shortMergeCommitSha"
-          >
-          </a>
-          <clipboard-button
-            :title="__('Copy commit SHA to clipboard')"
-            :text="mr.mergeCommitSha"
-            css-class="btn-default btn-transparent btn-clipboard js-mr-merged-copy-sha"
-          />
+          <template v-if="mr.mergeCommitSha">
+            with
+            <a
+              :href="mr.mergeCommitPath"
+              class="commit-sha js-mr-merged-commit-sha"
+              v-text="mr.shortMergeCommitSha"
+            >
+            </a>
+            <clipboard-button
+              :title="__('Copy commit SHA to clipboard')"
+              :text="mr.mergeCommitSha"
+              css-class="btn-default btn-transparent btn-clipboard js-mr-merged-copy-sha"
+            />
+          </template>
         </p>
         <p v-if="mr.sourceBranchRemoved">
           {{ s__("mrWidget|The source branch has been removed") }}
-- 
cgit v1.2.1


From ff55aa7ebb8a54e5dceee845904a8c75b46b3f1b Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Mon, 15 Oct 2018 10:02:40 +0100
Subject: Fixed file templates not clearing in Web IDE

This fixes a bug where the file templates would not be cleared
after changing the template type.
Previously the templates would get pushed into the array
creating a list of templates for the different types.
This changes that by clearing the templates array
when the template type gets changed.

Closes https://gitlab.com/gitlab-org/gitlab-ce/issues/52487
---
 app/assets/javascripts/ide/stores/modules/file_templates/mutations.js | 1 +
 1 file changed, 1 insertion(+)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/ide/stores/modules/file_templates/mutations.js b/app/assets/javascripts/ide/stores/modules/file_templates/mutations.js
index d519c033769..25a65b047f1 100644
--- a/app/assets/javascripts/ide/stores/modules/file_templates/mutations.js
+++ b/app/assets/javascripts/ide/stores/modules/file_templates/mutations.js
@@ -13,6 +13,7 @@ export default {
   },
   [types.SET_SELECTED_TEMPLATE_TYPE](state, type) {
     state.selectedTemplateType = type;
+    state.templates = [];
   },
   [types.SET_UPDATE_SUCCESS](state, success) {
     state.updateSuccess = success;
-- 
cgit v1.2.1


From 892f1257f4eac2ae5c9299449f2ea8b5b56f2c88 Mon Sep 17 00:00:00 2001
From: Martin Wortschack <mwortschack@gitlab.com>
Date: Mon, 15 Oct 2018 13:10:42 +0000
Subject: Resolve "Personal projects pagination in Profile Overview tab is
 broken"

---
 .../javascripts/pages/users/user_overview_block.js | 15 +++++++----
 app/assets/javascripts/pages/users/user_tabs.js    | 29 +++++++++++++++++-----
 2 files changed, 33 insertions(+), 11 deletions(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/pages/users/user_overview_block.js b/app/assets/javascripts/pages/users/user_overview_block.js
index 0009419cd0c..2ed177be558 100644
--- a/app/assets/javascripts/pages/users/user_overview_block.js
+++ b/app/assets/javascripts/pages/users/user_overview_block.js
@@ -1,10 +1,15 @@
 import axios from '~/lib/utils/axios_utils';
 
+const DEFAULT_LIMIT = 20;
+
 export default class UserOverviewBlock {
   constructor(options = {}) {
     this.container = options.container;
     this.url = options.url;
-    this.limit = options.limit || 20;
+    this.requestParams = {
+      limit: DEFAULT_LIMIT,
+      ...options.requestParams,
+    };
     this.loadData();
   }
 
@@ -15,9 +20,7 @@ export default class UserOverviewBlock {
 
     axios
       .get(this.url, {
-        params: {
-          limit: this.limit,
-        },
+        params: this.requestParams,
       })
       .then(({ data }) => this.render(data))
       .catch(() => loadingEl.classList.add('hide'));
@@ -34,7 +37,9 @@ export default class UserOverviewBlock {
     if (count && count > 0) {
       document.querySelector(`${this.container} .js-view-all`).classList.remove('hide');
     } else {
-      document.querySelector(`${this.container} .nothing-here-block`).classList.add('text-left', 'p-0');
+      document
+        .querySelector(`${this.container} .nothing-here-block`)
+        .classList.add('text-left', 'p-0');
     }
 
     loadingEl.classList.add('hide');
diff --git a/app/assets/javascripts/pages/users/user_tabs.js b/app/assets/javascripts/pages/users/user_tabs.js
index 23b0348a99f..1de9945baad 100644
--- a/app/assets/javascripts/pages/users/user_tabs.js
+++ b/app/assets/javascripts/pages/users/user_tabs.js
@@ -182,18 +182,22 @@ export default class UserTabs {
 
     this.loadActivityCalendar('overview');
 
-    UserTabs.renderMostRecentBlocks('#js-overview .activities-block', 5);
-    UserTabs.renderMostRecentBlocks('#js-overview .projects-block', 10);
+    UserTabs.renderMostRecentBlocks('#js-overview .activities-block', {
+      requestParams: { limit: 5 },
+    });
+    UserTabs.renderMostRecentBlocks('#js-overview .projects-block', {
+      requestParams: { limit: 10, skip_pagination: true },
+    });
 
     this.loaded.overview = true;
   }
 
-  static renderMostRecentBlocks(container, limit) {
+  static renderMostRecentBlocks(container, options) {
     // eslint-disable-next-line no-new
     new UserOverviewBlock({
       container,
       url: $(`${container} .overview-content-list`).data('href'),
-      limit,
+      ...options,
     });
   }
 
@@ -216,7 +220,12 @@ export default class UserTabs {
         let calendarHint = '';
 
         if (action === 'activity') {
-          calendarHint = sprintf(__('Summary of issues, merge requests, push events, and comments (Timezone: %{utcFormatted})'), { utcFormatted });
+          calendarHint = sprintf(
+            __(
+              'Summary of issues, merge requests, push events, and comments (Timezone: %{utcFormatted})',
+            ),
+            { utcFormatted },
+          );
         } else if (action === 'overview') {
           calendarHint = __('Issues, merge requests, pushes and comments.');
         }
@@ -224,7 +233,15 @@ export default class UserTabs {
         $calendarWrap.find('.calendar-hint').text(calendarHint);
 
         // eslint-disable-next-line no-new
-        new ActivityCalendar('.tab-pane.active .js-contrib-calendar', '.tab-pane.active .user-calendar-activities', data, calendarActivitiesPath, utcOffset, 0, monthsAgo);
+        new ActivityCalendar(
+          '.tab-pane.active .js-contrib-calendar',
+          '.tab-pane.active .user-calendar-activities',
+          data,
+          calendarActivitiesPath,
+          utcOffset,
+          0,
+          monthsAgo,
+        );
       })
       .catch(() => flash(__('There was an error loading users activity calendar.')));
   }
-- 
cgit v1.2.1


From d0191e294fd7ac8cafe5b59977de3d03cca5f056 Mon Sep 17 00:00:00 2001
From: Martin Wortschack <mwortschack@gitlab.com>
Date: Mon, 15 Oct 2018 15:32:47 +0200
Subject: Use literal instead of constructor for creating regex

---
 app/assets/javascripts/lib/utils/text_utility.js | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/lib/utils/text_utility.js b/app/assets/javascripts/lib/utils/text_utility.js
index 250980919dd..7cc7cd6d20e 100644
--- a/app/assets/javascripts/lib/utils/text_utility.js
+++ b/app/assets/javascripts/lib/utils/text_utility.js
@@ -53,10 +53,7 @@ export const slugify = str => str.trim().toLowerCase();
  * @param {String} str
  * @returns {String}
  */
-export const slugifyWithHyphens = str => {
-  const regex = new RegExp(/\s+/, 'g');
-  return str.toLowerCase().replace(regex, '-');
-};
+export const slugifyWithHyphens = str => str.toLowerCase().replace(/\s+/g, '-');
 
 /**
  * Truncates given text
-- 
cgit v1.2.1


From 7cf19c0b816bf7bc146a7f634c65d2e7484f26e1 Mon Sep 17 00:00:00 2001
From: Luke Bennett <lbennett@gitlab.com>
Date: Mon, 15 Oct 2018 13:36:19 +0000
Subject: Prioritize group settings, improve panel titles, disable submit
 without changes

---
 .../dirty_submit/dirty_submit_collection.js        | 13 ++++
 .../dirty_submit/dirty_submit_factory.js           |  9 +++
 .../javascripts/dirty_submit/dirty_submit_form.js  | 82 ++++++++++++++++++++++
 app/assets/javascripts/pages/groups/edit/index.js  |  4 ++
 app/assets/javascripts/settings_panels.js          |  5 +-
 5 files changed, 111 insertions(+), 2 deletions(-)
 create mode 100644 app/assets/javascripts/dirty_submit/dirty_submit_collection.js
 create mode 100644 app/assets/javascripts/dirty_submit/dirty_submit_factory.js
 create mode 100644 app/assets/javascripts/dirty_submit/dirty_submit_form.js

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/dirty_submit/dirty_submit_collection.js b/app/assets/javascripts/dirty_submit/dirty_submit_collection.js
new file mode 100644
index 00000000000..42b051b2270
--- /dev/null
+++ b/app/assets/javascripts/dirty_submit/dirty_submit_collection.js
@@ -0,0 +1,13 @@
+import DirtySubmitForm from './dirty_submit_form';
+
+class DirtySubmitCollection {
+  constructor(forms) {
+    this.forms = forms;
+
+    this.dirtySubmits = [];
+
+    this.forms.forEach(form => this.dirtySubmits.push(new DirtySubmitForm(form)));
+  }
+}
+
+export default DirtySubmitCollection;
diff --git a/app/assets/javascripts/dirty_submit/dirty_submit_factory.js b/app/assets/javascripts/dirty_submit/dirty_submit_factory.js
new file mode 100644
index 00000000000..95a896a7f0b
--- /dev/null
+++ b/app/assets/javascripts/dirty_submit/dirty_submit_factory.js
@@ -0,0 +1,9 @@
+import DirtySubmitCollection from './dirty_submit_collection';
+import DirtySubmitForm from './dirty_submit_form';
+
+export default function dirtySubmitFactory(formOrForms) {
+  const isCollection = formOrForms instanceof NodeList || formOrForms instanceof Array;
+  const DirtySubmitClass = isCollection ? DirtySubmitCollection : DirtySubmitForm;
+
+  return new DirtySubmitClass(formOrForms);
+}
diff --git a/app/assets/javascripts/dirty_submit/dirty_submit_form.js b/app/assets/javascripts/dirty_submit/dirty_submit_form.js
new file mode 100644
index 00000000000..5bea47f23c5
--- /dev/null
+++ b/app/assets/javascripts/dirty_submit/dirty_submit_form.js
@@ -0,0 +1,82 @@
+import _ from 'underscore';
+
+class DirtySubmitForm {
+  constructor(form) {
+    this.form = form;
+    this.dirtyInputs = [];
+    this.isDisabled = true;
+
+    this.init();
+  }
+
+  init() {
+    this.inputs = this.form.querySelectorAll('input, textarea, select');
+    this.submits = this.form.querySelectorAll('input[type=submit], button[type=submit]');
+
+    this.inputs.forEach(DirtySubmitForm.initInput);
+    this.toggleSubmission();
+
+    this.registerListeners();
+  }
+
+  registerListeners() {
+    const throttledUpdateDirtyInput = _.throttle(
+      event => this.updateDirtyInput(event),
+      DirtySubmitForm.THROTTLE_DURATION,
+    );
+    this.form.addEventListener('input', throttledUpdateDirtyInput);
+    this.form.addEventListener('submit', event => this.formSubmit(event));
+  }
+
+  updateDirtyInput(event) {
+    const input = event.target;
+
+    if (!input.dataset.dirtySubmitOriginalValue) return;
+
+    this.updateDirtyInputs(input);
+    this.toggleSubmission();
+  }
+
+  updateDirtyInputs(input) {
+    const { name } = input;
+    const isDirty =
+      input.dataset.dirtySubmitOriginalValue !== DirtySubmitForm.inputCurrentValue(input);
+    const indexOfInputName = this.dirtyInputs.indexOf(name);
+    const isExisting = indexOfInputName !== -1;
+
+    if (isDirty && !isExisting) this.dirtyInputs.push(name);
+    if (!isDirty && isExisting) this.dirtyInputs.splice(indexOfInputName, 1);
+  }
+
+  toggleSubmission() {
+    this.isDisabled = this.dirtyInputs.length === 0;
+    this.submits.forEach(element => {
+      element.disabled = this.isDisabled;
+    });
+  }
+
+  formSubmit(event) {
+    if (this.isDisabled) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+    }
+
+    return !this.isDisabled;
+  }
+
+  static initInput(element) {
+    element.dataset.dirtySubmitOriginalValue = DirtySubmitForm.inputCurrentValue(element);
+  }
+
+  static isInputCheckable(input) {
+    return input.type === 'checkbox' || input.type === 'radio';
+  }
+
+  static inputCurrentValue(input) {
+    return DirtySubmitForm.isInputCheckable(input) ? input.checked.toString() : input.value;
+  }
+}
+
+DirtySubmitForm.THROTTLE_DURATION = 500;
+
+export default DirtySubmitForm;
diff --git a/app/assets/javascripts/pages/groups/edit/index.js b/app/assets/javascripts/pages/groups/edit/index.js
index 002b2279fcc..d0bce857029 100644
--- a/app/assets/javascripts/pages/groups/edit/index.js
+++ b/app/assets/javascripts/pages/groups/edit/index.js
@@ -2,6 +2,7 @@ import groupAvatar from '~/group_avatar';
 import TransferDropdown from '~/groups/transfer_dropdown';
 import initConfirmDangerModal from '~/confirm_danger_modal';
 import initSettingsPanels from '~/settings_panels';
+import dirtySubmitFactory from '~/dirty_submit/dirty_submit_factory';
 import mountBadgeSettings from '~/pages/shared/mount_badge_settings';
 import { GROUP_BADGE } from '~/badges/constants';
 
@@ -10,5 +11,8 @@ document.addEventListener('DOMContentLoaded', () => {
   new TransferDropdown(); // eslint-disable-line no-new
   initConfirmDangerModal();
   initSettingsPanels();
+  dirtySubmitFactory(
+    document.querySelectorAll('.js-general-settings-form, .js-general-permissions-form'),
+  );
   mountBadgeSettings(GROUP_BADGE);
 });
diff --git a/app/assets/javascripts/settings_panels.js b/app/assets/javascripts/settings_panels.js
index 37b4a2a4c63..b38421bdf1c 100644
--- a/app/assets/javascripts/settings_panels.js
+++ b/app/assets/javascripts/settings_panels.js
@@ -1,7 +1,8 @@
 import $ from 'jquery';
+import { __ } from './locale';
 
 function expandSection($section) {
-  $section.find('.js-settings-toggle').text('Collapse');
+  $section.find('.js-settings-toggle:not(.js-settings-toggle-trigger-only)').text(__('Collapse'));
   $section.find('.settings-content').off('scroll.expandSection').scrollTop(0);
   $section.addClass('expanded');
   if (!$section.hasClass('no-animate')) {
@@ -11,7 +12,7 @@ function expandSection($section) {
 }
 
 function closeSection($section) {
-  $section.find('.js-settings-toggle').text('Expand');
+  $section.find('.js-settings-toggle:not(.js-settings-toggle-trigger-only)').text(__('Expand'));
   $section.find('.settings-content').on('scroll.expandSection', () => expandSection($section));
   $section.removeClass('expanded');
   if (!$section.hasClass('no-animate')) {
-- 
cgit v1.2.1


From 469dc95a95891e15c0c8417b8c5309ec9eb6dee5 Mon Sep 17 00:00:00 2001
From: George Tsiolis <tsiolis.g@gmail.com>
Date: Mon, 15 Oct 2018 18:35:00 +0000
Subject: Replace `<i>` in vue components with `<icon>`

---
 .../boards/components/issue_card_inner.vue         | 10 ++++---
 .../javascripts/boards/components/modal/list.vue   | 10 ++++---
 .../boards/components/modal/lists_dropdown.vue     |  6 +++-
 .../boards/components/project_select.vue           | 30 +++++++++----------
 .../cycle_analytics/components/banner.vue          | 11 ++++---
 .../diffs/components/compare_versions_dropdown.vue |  2 +-
 .../components/environment_actions.vue             |  8 ++---
 .../environments/components/environment_item.vue   | 34 +++++++++-------------
 .../components/frequent_items_search_input.vue     | 13 +++++----
 .../sidebar/components/lock/lock_issue_sidebar.vue |  3 --
 .../javascripts/vue_shared/components/icon.vue     |  1 +
 .../vue_shared/components/issue/issue_warning.vue  |  1 -
 .../vue_shared/components/notes/system_note.vue    |  2 +-
 13 files changed, 67 insertions(+), 64 deletions(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/boards/components/issue_card_inner.vue b/app/assets/javascripts/boards/components/issue_card_inner.vue
index 28956c2f3c5..aa98f35786e 100644
--- a/app/assets/javascripts/boards/components/issue_card_inner.vue
+++ b/app/assets/javascripts/boards/components/issue_card_inner.vue
@@ -1,5 +1,6 @@
 <script>
   import $ from 'jquery';
+  import Icon from '~/vue_shared/components/icon.vue';
   import UserAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
   import eventHub from '../eventhub';
   import tooltip from '../../vue_shared/directives/tooltip';
@@ -8,6 +9,7 @@
   export default {
     components: {
       UserAvatarLink,
+      Icon,
     },
     directives: {
       tooltip,
@@ -140,11 +142,11 @@
   <div>
     <div class="board-card-header">
       <h4 class="board-card-title">
-        <i
+        <icon
           v-if="issue.confidential"
-          class="fa fa-eye-slash confidential-icon"
-          aria-hidden="true"
-        ></i>
+          name="eye-slash"
+          class="confidential-icon"
+        />
         <a
           :href="issue.path"
           :title="issue.title"
diff --git a/app/assets/javascripts/boards/components/modal/list.vue b/app/assets/javascripts/boards/components/modal/list.vue
index a58b5afe970..c93fd9f415c 100644
--- a/app/assets/javascripts/boards/components/modal/list.vue
+++ b/app/assets/javascripts/boards/components/modal/list.vue
@@ -1,4 +1,5 @@
 <script>
+  import Icon from '~/vue_shared/components/icon.vue';
   import bp from '../../../breakpoints';
   import ModalStore from '../../stores/modal_store';
   import IssueCardInner from '../issue_card_inner.vue';
@@ -6,6 +7,7 @@
   export default {
     components: {
       IssueCardInner,
+      Icon,
     },
     props: {
       issueLinkBase: {
@@ -147,13 +149,13 @@
             :issue="issue"
             :issue-link-base="issueLinkBase"
             :root-path="rootPath"/>
-          <span
+          <icon
             v-if="issue.selected"
             :aria-label="'Issue #' + issue.id + ' selected'"
+            name="mobile-issue-close"
             aria-checked="true"
-            class="issue-card-selected text-center">
-            <i class="fa fa-check"></i>
-          </span>
+            class="issue-card-selected text-center"
+          />
         </div>
       </div>
     </div>
diff --git a/app/assets/javascripts/boards/components/modal/lists_dropdown.vue b/app/assets/javascripts/boards/components/modal/lists_dropdown.vue
index 4622fd28220..3baac08d411 100644
--- a/app/assets/javascripts/boards/components/modal/lists_dropdown.vue
+++ b/app/assets/javascripts/boards/components/modal/lists_dropdown.vue
@@ -1,11 +1,13 @@
 <script>
 import { Link } from '@gitlab-org/gitlab-ui';
+import Icon from '~/vue_shared/components/icon.vue';
 import ModalStore from '../../stores/modal_store';
 import boardsStore from '../../stores/boards_store';
 
 export default {
   components: {
     'gl-link': Link,
+    Icon,
   },
   data() {
     return {
@@ -35,7 +37,9 @@ export default {
         class="dropdown-label-box">
       </span>
       {{ selected.title }}
-      <i class="fa fa-chevron-down"></i>
+      <icon
+        name="chevron-down"
+      />
     </button>
     <div class="dropdown-menu dropdown-menu-selectable dropdown-menu-drop-up">
       <ul>
diff --git a/app/assets/javascripts/boards/components/project_select.vue b/app/assets/javascripts/boards/components/project_select.vue
index d4676914e02..4e8fe16160a 100644
--- a/app/assets/javascripts/boards/components/project_select.vue
+++ b/app/assets/javascripts/boards/components/project_select.vue
@@ -1,11 +1,15 @@
 <script>
 import $ from 'jquery';
 import _ from 'underscore';
+import Icon from '~/vue_shared/components/icon.vue';
 import eventHub from '../eventhub';
 import Api from '../../api';
 
 export default {
   name: 'BoardProjectSelect',
+  components: {
+    Icon,
+  },
   props: {
     groupId: {
       type: Number,
@@ -78,11 +82,9 @@ export default {
         aria-expanded="false"
       >
         {{ selectedProjectName }}
-        <i
-          class="fa fa-chevron-down"
-          aria-hidden="true"
-        >
-        </i>
+        <icon
+          name="chevron-down"
+        />
       </button>
       <div class="dropdown-menu dropdown-menu-selectable dropdown-menu-full-width">
         <div class="dropdown-title">
@@ -92,12 +94,11 @@ export default {
             type="button"
             class="dropdown-title-button dropdown-menu-close"
           >
-            <i
-              aria-hidden="true"
+            <icon
+              name="merge-request-close-m"
               data-hidden="true"
-              class="fa fa-times dropdown-menu-close-icon"
-            >
-            </i>
+              class="dropdown-menu-close-icon"
+            />
           </button>
         </div>
         <div class="dropdown-input">
@@ -106,12 +107,11 @@ export default {
             type="search"
             placeholder="Search projects"
           />
-          <i
-            aria-hidden="true"
+          <icon
+            name="search"
+            class="dropdown-input-search"
             data-hidden="true"
-            class="fa fa-search dropdown-input-search"
-          >
-          </i>
+          />
         </div>
         <div class="dropdown-content"></div>
         <div class="dropdown-loading">
diff --git a/app/assets/javascripts/cycle_analytics/components/banner.vue b/app/assets/javascripts/cycle_analytics/components/banner.vue
index 410d4873e55..88570160f26 100644
--- a/app/assets/javascripts/cycle_analytics/components/banner.vue
+++ b/app/assets/javascripts/cycle_analytics/components/banner.vue
@@ -1,7 +1,11 @@
 <script>
+  import Icon from '~/vue_shared/components/icon.vue';
   import iconCycleAnalyticsSplash from 'icons/_icon_cycle_analytics_splash.svg';
 
   export default {
+    components: {
+      Icon,
+    },
     props: {
       documentationLink: {
         type: String,
@@ -28,10 +32,9 @@
       type="button"
       @click="dismissOverviewDialog"
     >
-      <i
-        class="fa fa-times"
-        aria-hidden="true">
-      </i>
+      <icon
+        name="close"
+      />
     </button>
     <div
       class="svg-container"
diff --git a/app/assets/javascripts/diffs/components/compare_versions_dropdown.vue b/app/assets/javascripts/diffs/components/compare_versions_dropdown.vue
index c3acc352d5e..f4b333f3700 100644
--- a/app/assets/javascripts/diffs/components/compare_versions_dropdown.vue
+++ b/app/assets/javascripts/diffs/components/compare_versions_dropdown.vue
@@ -115,7 +115,7 @@ export default {
       <span>
         {{ selectedVersionName }}
       </span>
-      <Icon
+      <icon
         :size="12"
         name="angle-down"
         class="position-absolute"
diff --git a/app/assets/javascripts/environments/components/environment_actions.vue b/app/assets/javascripts/environments/components/environment_actions.vue
index e1f9248bc4c..2bc168a6b02 100644
--- a/app/assets/javascripts/environments/components/environment_actions.vue
+++ b/app/assets/javascripts/environments/components/environment_actions.vue
@@ -60,11 +60,9 @@ export default {
     >
       <span>
         <icon name="play" />
-        <i
-          class="fa fa-caret-down"
-          aria-hidden="true"
-        >
-        </i>
+        <icon
+          name="chevron-down"
+        />
         <gl-loading-icon v-if="isLoading" />
       </span>
     </button>
diff --git a/app/assets/javascripts/environments/components/environment_item.vue b/app/assets/javascripts/environments/components/environment_item.vue
index ad5d16874f3..bb9c139727e 100644
--- a/app/assets/javascripts/environments/components/environment_item.vue
+++ b/app/assets/javascripts/environments/components/environment_item.vue
@@ -4,6 +4,7 @@ import _ from 'underscore';
 import tooltip from '~/vue_shared/directives/tooltip';
 import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
 import { humanize } from '~/lib/utils/text_utility';
+import Icon from '~/vue_shared/components/icon.vue';
 import ActionsComponent from './environment_actions.vue';
 import ExternalUrlComponent from './environment_external_url.vue';
 import StopComponent from './environment_stop.vue';
@@ -24,6 +25,7 @@ export default {
   components: {
     UserAvatarLink,
     CommitComponent,
+    Icon,
     ActionsComponent,
     ExternalUrlComponent,
     StopComponent,
@@ -448,6 +450,10 @@ export default {
         this.canRetry
       );
     },
+
+    folderIconName() {
+      return this.model.isOpen ? 'chevron-down' : 'chevron-right';
+    },
   },
 
   methods: {
@@ -494,27 +500,15 @@ export default {
         role="button"
         @click="onClickFolder">
 
-        <span class="folder-icon">
-          <i
-            v-show="model.isOpen"
-            class="fa fa-caret-down"
-            aria-hidden="true"
-          >
-          </i>
-          <i
-            v-show="!model.isOpen"
-            class="fa fa-caret-right"
-            aria-hidden="true"
-          >
-          </i>
-        </span>
+        <icon
+          :name="folderIconName"
+          class="folder-icon"
+        />
 
-        <span class="folder-icon">
-          <i
-            class="fa fa-folder"
-            aria-hidden="true">
-          </i>
-        </span>
+        <icon
+          name="folder"
+          class="folder-icon"
+        />
 
         <span>
           {{ model.folderName }}
diff --git a/app/assets/javascripts/frequent_items/components/frequent_items_search_input.vue b/app/assets/javascripts/frequent_items/components/frequent_items_search_input.vue
index a6a265eb3fd..14c223c61a4 100644
--- a/app/assets/javascripts/frequent_items/components/frequent_items_search_input.vue
+++ b/app/assets/javascripts/frequent_items/components/frequent_items_search_input.vue
@@ -1,10 +1,14 @@
 <script>
 import _ from 'underscore';
 import { mapActions } from 'vuex';
+import Icon from '~/vue_shared/components/icon.vue';
 import eventHub from '../event_hub';
 import frequentItemsMixin from './frequent_items_mixin';
 
 export default {
+  components: {
+    Icon,
+  },
   mixins: [frequentItemsMixin],
   data() {
     return {
@@ -45,11 +49,10 @@ export default {
       type="search"
       class="form-control"
     />
-    <i
+    <icon
       v-if="!searchQuery"
-      class="search-icon fa fa-fw fa-search"
-      aria-hidden="true"
-    >
-    </i>
+      name="search"
+      class="search-icon"
+    />
   </div>
 </template>
diff --git a/app/assets/javascripts/sidebar/components/lock/lock_issue_sidebar.vue b/app/assets/javascripts/sidebar/components/lock/lock_issue_sidebar.vue
index ab7fab7e5ca..cdff4105335 100644
--- a/app/assets/javascripts/sidebar/components/lock/lock_issue_sidebar.vue
+++ b/app/assets/javascripts/sidebar/components/lock/lock_issue_sidebar.vue
@@ -102,7 +102,6 @@ export default {
     >
       <icon
         :name="lockIcon"
-        aria-hidden="true"
         class="sidebar-item-icon is-active"
       />
     </div>
@@ -134,7 +133,6 @@ export default {
         <icon
           :size="16"
           name="lock"
-          aria-hidden="true"
           class="sidebar-item-icon inline is-active"
         />
         {{ __('Locked') }}
@@ -147,7 +145,6 @@ export default {
         <icon
           :size="16"
           name="lock-open"
-          aria-hidden="true"
           class="sidebar-item-icon inline"
         />
         {{ __('Unlocked') }}
diff --git a/app/assets/javascripts/vue_shared/components/icon.vue b/app/assets/javascripts/vue_shared/components/icon.vue
index 5e0e7315e99..fc80e89d505 100644
--- a/app/assets/javascripts/vue_shared/components/icon.vue
+++ b/app/assets/javascripts/vue_shared/components/icon.vue
@@ -105,6 +105,7 @@ export default {
     :x="x"
     :y="y"
     :tabindex="tabIndex"
+    aria-hidden="true"
   >
     <use v-bind="{ 'xlink:href':spriteHref }"/>
   </svg>
diff --git a/app/assets/javascripts/vue_shared/components/issue/issue_warning.vue b/app/assets/javascripts/vue_shared/components/issue/issue_warning.vue
index ca8ce554588..62f1ab27c1e 100644
--- a/app/assets/javascripts/vue_shared/components/issue/issue_warning.vue
+++ b/app/assets/javascripts/vue_shared/components/issue/issue_warning.vue
@@ -37,7 +37,6 @@
       :name="warningIcon"
       :size="16"
       class="icon inline"
-      aria-hidden="true"
     />
 
     <span v-if="isLockedAndConfidential">
diff --git a/app/assets/javascripts/vue_shared/components/notes/system_note.vue b/app/assets/javascripts/vue_shared/components/notes/system_note.vue
index 2122d0a508e..de3c7a80365 100644
--- a/app/assets/javascripts/vue_shared/components/notes/system_note.vue
+++ b/app/assets/javascripts/vue_shared/components/notes/system_note.vue
@@ -109,7 +109,7 @@ export default {
               class="system-note-commit-list-toggler flex-row"
               @click="expanded = !expanded"
             >
-              <Icon
+              <icon
                 :name="toggleIcon"
                 :size="8"
                 class="append-right-5"
-- 
cgit v1.2.1


From 7fd4e21c77efeed91de330f57f325feca0a8dfba Mon Sep 17 00:00:00 2001
From: Mike Greiling <mike@pixelcog.com>
Date: Wed, 10 Oct 2018 01:09:55 -0500
Subject: Prettify blob behaviors and cycle_analytics modules

---
 .../javascripts/behaviors/copy_to_clipboard.js     |   2 +-
 .../javascripts/behaviors/details_behavior.js      |   8 +-
 .../javascripts/behaviors/markdown/copy_as_gfm.js  | 107 +++++++++++---------
 .../javascripts/behaviors/markdown/render_math.js  |   8 +-
 .../behaviors/markdown/render_mermaid.js           |  58 +++++------
 .../javascripts/behaviors/preview_markdown.js      | 111 ++++++++++++---------
 app/assets/javascripts/behaviors/quick_submit.js   |  40 ++++----
 app/assets/javascripts/behaviors/requires_input.js |   3 +-
 app/assets/javascripts/behaviors/secret_values.js  |   8 +-
 .../javascripts/behaviors/shortcuts/shortcuts.js   |  30 +++---
 .../javascripts/behaviors/toggler_behavior.js      |   4 +-
 app/assets/javascripts/blob/3d_viewer/index.js     |  58 +++--------
 .../javascripts/blob/3d_viewer/mesh_object.js      |  21 +---
 .../javascripts/blob/balsamiq/balsamiq_viewer.js   |   2 +-
 app/assets/javascripts/blob/blob_file_dropzone.js  |  28 ++++--
 .../blob/blob_line_permalink_updater.js            |  18 ++--
 .../javascripts/blob/file_template_selector.js     |   8 +-
 app/assets/javascripts/blob/notebook/index.js      |   7 +-
 app/assets/javascripts/blob/sketch/index.js        |   2 +-
 app/assets/javascripts/blob/stl_viewer.js          |   4 +-
 app/assets/javascripts/blob/template_selector.js   |   8 +-
 .../blob/template_selectors/license_selector.js    |   2 +-
 .../blob/template_selectors/type_selector.js       |   1 -
 app/assets/javascripts/blob/viewer/index.js        |  42 ++++----
 .../cycle_analytics/components/banner.vue          |  40 ++++----
 .../components/limit_warning_component.vue         |  22 ++--
 .../components/stage_code_component.vue            |  36 +++----
 .../cycle_analytics/components/stage_component.vue |  37 ++++---
 .../components/stage_plan_component.vue            |  47 +++++----
 .../components/stage_review_component.vue          |  40 ++++----
 .../components/stage_staging_component.vue         |  50 +++++-----
 .../components/stage_test_component.vue            |  54 +++++-----
 .../components/total_time_component.vue            |  24 ++---
 .../cycle_analytics/cycle_analytics_bundle.js      |  24 +++--
 .../cycle_analytics/cycle_analytics_service.js     |   5 +-
 .../cycle_analytics/cycle_analytics_store.js       |  36 +++++--
 36 files changed, 507 insertions(+), 488 deletions(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/behaviors/copy_to_clipboard.js b/app/assets/javascripts/behaviors/copy_to_clipboard.js
index 00419e80cbb..9a33a060c76 100644
--- a/app/assets/javascripts/behaviors/copy_to_clipboard.js
+++ b/app/assets/javascripts/behaviors/copy_to_clipboard.js
@@ -51,7 +51,7 @@ export default function initCopyToClipboard() {
    * the last minute to deconstruct this JSON hash and set the `text/plain` and `text/x-gfm` copy
    * data types to the intended values.
    */
-  $(document).on('copy', 'body > textarea[readonly]', (e) => {
+  $(document).on('copy', 'body > textarea[readonly]', e => {
     const { clipboardData } = e.originalEvent;
     if (!clipboardData) return;
 
diff --git a/app/assets/javascripts/behaviors/details_behavior.js b/app/assets/javascripts/behaviors/details_behavior.js
index 1d63f5baeee..9bdfc21c7e4 100644
--- a/app/assets/javascripts/behaviors/details_behavior.js
+++ b/app/assets/javascripts/behaviors/details_behavior.js
@@ -2,7 +2,9 @@ import $ from 'jquery';
 
 $(() => {
   $('body').on('click', '.js-details-target', function target() {
-    $(this).closest('.js-details-container').toggleClass('open');
+    $(this)
+      .closest('.js-details-container')
+      .toggleClass('open');
   });
 
   // Show details content. Hides link after click.
@@ -13,7 +15,9 @@ $(() => {
   //
   $('body').on('click', '.js-details-expand', function expand(e) {
     e.preventDefault();
-    $(this).next('.js-details-content').removeClass('hide');
+    $(this)
+      .next('.js-details-content')
+      .removeClass('hide');
     $(this).hide();
 
     const truncatedItem = $(this).siblings('.js-details-short');
diff --git a/app/assets/javascripts/behaviors/markdown/copy_as_gfm.js b/app/assets/javascripts/behaviors/markdown/copy_as_gfm.js
index 0d7e8a5a3cb..fe02096d903 100644
--- a/app/assets/javascripts/behaviors/markdown/copy_as_gfm.js
+++ b/app/assets/javascripts/behaviors/markdown/copy_as_gfm.js
@@ -34,7 +34,7 @@ const gfmRules = {
     },
   },
   AutolinkFilter: {
-    'a'(el, text) {
+    a(el, text) {
       // Fallback on the regular MarkdownFilter's `a` handler.
       if (text !== el.getAttribute('href')) return false;
 
@@ -60,7 +60,7 @@ const gfmRules = {
     },
   },
   ImageLazyLoadFilter: {
-    'img'(el, text) {
+    img(el, text) {
       return `![${el.getAttribute('alt')}](${el.getAttribute('src')})`;
     },
   },
@@ -71,7 +71,7 @@ const gfmRules = {
 
       return CopyAsGFM.nodeToGFM(videoEl);
     },
-    'video'(el) {
+    video(el) {
       return `![${el.dataset.title}](${el.getAttribute('src')})`;
     },
   },
@@ -118,11 +118,14 @@ const gfmRules = {
     'a[name]:not([href]):empty'(el) {
       return el.outerHTML;
     },
-    'dl'(el, text) {
-      let lines = text.replace(/\n\n/g, '\n').trim().split('\n');
+    dl(el, text) {
+      let lines = text
+        .replace(/\n\n/g, '\n')
+        .trim()
+        .split('\n');
       // Add two spaces to the front of subsequent list items lines,
       // or leave the line entirely blank.
-      lines = lines.map((l) => {
+      lines = lines.map(l => {
         const line = l.trim();
         if (line.length === 0) return '';
 
@@ -151,27 +154,30 @@ const gfmRules = {
 
       // Prefixes lines with 4 spaces if the code contains triple backticks
       if (lang === '' && text.match(/^```/gm)) {
-        return text.split('\n').map((l) => {
-          const line = l.trim();
-          if (line.length === 0) return '';
-
-          return `    ${line}`;
-        }).join('\n');
+        return text
+          .split('\n')
+          .map(l => {
+            const line = l.trim();
+            if (line.length === 0) return '';
+
+            return `    ${line}`;
+          })
+          .join('\n');
       }
 
       return `\`\`\`${lang}\n${text}\n\`\`\``;
     },
     'pre > code'(el, text) {
-       // Don't wrap code blocks in ``
+      // Don't wrap code blocks in ``
       return text;
     },
   },
   MarkdownFilter: {
-    'br'(el) {
+    br(el) {
       // Two spaces at the end of a line are turned into a BR
       return '  ';
     },
-    'code'(el, text) {
+    code(el, text) {
       let backtickCount = 1;
       const backtickMatch = text.match(/`+/);
       if (backtickMatch) {
@@ -183,27 +189,31 @@ const gfmRules = {
 
       return backticks + spaceOrNoSpace + text.trim() + spaceOrNoSpace + backticks;
     },
-    'blockquote'(el, text) {
-      return text.trim().split('\n').map(s => `> ${s}`.trim()).join('\n');
+    blockquote(el, text) {
+      return text
+        .trim()
+        .split('\n')
+        .map(s => `> ${s}`.trim())
+        .join('\n');
     },
-    'img'(el) {
+    img(el) {
       const imageSrc = el.src;
-      const imageUrl = imageSrc && imageSrc !== placeholderImage ? imageSrc : (el.dataset.src || '');
+      const imageUrl = imageSrc && imageSrc !== placeholderImage ? imageSrc : el.dataset.src || '';
       return `![${el.getAttribute('alt')}](${imageUrl})`;
     },
     'a.anchor'(el, text) {
       // Don't render a Markdown link for the anchor link inside a heading
       return text;
     },
-    'a'(el, text) {
+    a(el, text) {
       return `[${text}](${el.getAttribute('href')})`;
     },
-    'li'(el, text) {
+    li(el, text) {
       const lines = text.trim().split('\n');
       const firstLine = `- ${lines.shift()}`;
       // Add four spaces to the front of subsequent list items lines,
       // or leave the line entirely blank.
-      const nextLines = lines.map((s) => {
+      const nextLines = lines.map(s => {
         if (s.trim().length === 0) return '';
 
         return `    ${s}`;
@@ -211,49 +221,49 @@ const gfmRules = {
 
       return `${firstLine}\n${nextLines.join('\n')}`;
     },
-    'ul'(el, text) {
+    ul(el, text) {
       return text;
     },
-    'ol'(el, text) {
+    ol(el, text) {
       // LIs get a `- ` prefix by default, which we replace by `1. ` for ordered lists.
-      return text.replace(/^- /mg, '1. ');
+      return text.replace(/^- /gm, '1. ');
     },
-    'h1'(el, text) {
+    h1(el, text) {
       return `# ${text.trim()}\n`;
     },
-    'h2'(el, text) {
+    h2(el, text) {
       return `## ${text.trim()}\n`;
     },
-    'h3'(el, text) {
+    h3(el, text) {
       return `### ${text.trim()}\n`;
     },
-    'h4'(el, text) {
+    h4(el, text) {
       return `#### ${text.trim()}\n`;
     },
-    'h5'(el, text) {
+    h5(el, text) {
       return `##### ${text.trim()}\n`;
     },
-    'h6'(el, text) {
+    h6(el, text) {
       return `###### ${text.trim()}\n`;
     },
-    'strong'(el, text) {
+    strong(el, text) {
       return `**${text}**`;
     },
-    'em'(el, text) {
+    em(el, text) {
       return `_${text}_`;
     },
-    'del'(el, text) {
+    del(el, text) {
       return `~~${text}~~`;
     },
-    'hr'(el) {
+    hr(el) {
       // extra leading \n is to ensure that there is a blank line between
       // a list followed by an hr, otherwise this breaks old redcarpet rendering
       return '\n-----\n';
     },
-    'p'(el, text) {
+    p(el, text) {
       return `${text.trim()}\n`;
     },
-    'table'(el) {
+    table(el) {
       const theadEl = el.querySelector('thead');
       const tbodyEl = el.querySelector('tbody');
       if (!theadEl || !tbodyEl) return false;
@@ -263,8 +273,8 @@ const gfmRules = {
 
       return [theadText, tbodyText].join('\n');
     },
-    'thead'(el, text) {
-      const cells = _.map(el.querySelectorAll('th'), (cell) => {
+    thead(el, text) {
+      const cells = _.map(el.querySelectorAll('th'), cell => {
         let chars = CopyAsGFM.nodeToGFM(cell).length + 2;
 
         let before = '';
@@ -296,7 +306,7 @@ const gfmRules = {
 
       return [text, separatorRow].join('\n');
     },
-    'tr'(el) {
+    tr(el) {
       const cellEls = el.querySelectorAll('td, th');
       if (cellEls.length === 0) return false;
 
@@ -315,8 +325,12 @@ export class CopyAsGFM {
     const isIOS = /\b(iPad|iPhone|iPod)(?=;)/.test(userAgent);
     if (isIOS) return;
 
-    $(document).on('copy', '.md, .wiki', (e) => { CopyAsGFM.copyAsGFM(e, CopyAsGFM.transformGFMSelection); });
-    $(document).on('copy', 'pre.code.highlight, .diff-content .line_content', (e) => { CopyAsGFM.copyAsGFM(e, CopyAsGFM.transformCodeSelection); });
+    $(document).on('copy', '.md, .wiki', e => {
+      CopyAsGFM.copyAsGFM(e, CopyAsGFM.transformGFMSelection);
+    });
+    $(document).on('copy', 'pre.code.highlight, .diff-content .line_content', e => {
+      CopyAsGFM.copyAsGFM(e, CopyAsGFM.transformCodeSelection);
+    });
     $(document).on('paste', '.js-gfm-input', CopyAsGFM.pasteGFM);
   }
 
@@ -356,7 +370,7 @@ export class CopyAsGFM {
       // This will break down when the actual code block contains an uneven
       // number of backticks, but this is a rare edge case.
       const backtickMatch = textBefore.match(/`/g);
-      const insideCodeBlock = backtickMatch && (backtickMatch.length % 2) === 1;
+      const insideCodeBlock = backtickMatch && backtickMatch.length % 2 === 1;
 
       if (insideCodeBlock) {
         return text;
@@ -393,7 +407,9 @@ export class CopyAsGFM {
     let lineSelector = '.line';
 
     if (target) {
-      const lineClass = ['left-side', 'right-side'].filter(name => target.classList.contains(name))[0];
+      const lineClass = ['left-side', 'right-side'].filter(name =>
+        target.classList.contains(name),
+      )[0];
       if (lineClass) {
         lineSelector = `.line_content.${lineClass} ${lineSelector}`;
       }
@@ -436,7 +452,8 @@ export class CopyAsGFM {
       return node.textContent;
     }
 
-    const respectWhitespace = respectWhitespaceParam || (node.nodeName === 'PRE' || node.nodeName === 'CODE');
+    const respectWhitespace =
+      respectWhitespaceParam || (node.nodeName === 'PRE' || node.nodeName === 'CODE');
 
     const text = this.innerGFM(node, respectWhitespace);
 
diff --git a/app/assets/javascripts/behaviors/markdown/render_math.js b/app/assets/javascripts/behaviors/markdown/render_math.js
index eb4e59d12b1..a68936d79e2 100644
--- a/app/assets/javascripts/behaviors/markdown/render_math.js
+++ b/app/assets/javascripts/behaviors/markdown/render_math.js
@@ -32,7 +32,9 @@ export default function renderMath($els) {
   Promise.all([
     import(/* webpackChunkName: 'katex' */ 'katex'),
     import(/* webpackChunkName: 'katex' */ 'katex/dist/katex.min.css'),
-  ]).then(([katex]) => {
-    renderWithKaTeX($els, katex);
-  }).catch(() => flash(__('An error occurred while rendering KaTeX')));
+  ])
+    .then(([katex]) => {
+      renderWithKaTeX($els, katex);
+    })
+    .catch(() => flash(__('An error occurred while rendering KaTeX')));
 }
diff --git a/app/assets/javascripts/behaviors/markdown/render_mermaid.js b/app/assets/javascripts/behaviors/markdown/render_mermaid.js
index 56b1896e9f1..56f64f934a1 100644
--- a/app/assets/javascripts/behaviors/markdown/render_mermaid.js
+++ b/app/assets/javascripts/behaviors/markdown/render_mermaid.js
@@ -17,41 +17,43 @@ import flash from '~/flash';
 export default function renderMermaid($els) {
   if (!$els.length) return;
 
-  import(/* webpackChunkName: 'mermaid' */ 'blackst0ne-mermaid').then((mermaid) => {
-    mermaid.initialize({
-      // mermaid core options
-      mermaid: {
-        startOnLoad: false,
-      },
-      // mermaidAPI options
-      theme: 'neutral',
-    });
+  import(/* webpackChunkName: 'mermaid' */ 'blackst0ne-mermaid')
+    .then(mermaid => {
+      mermaid.initialize({
+        // mermaid core options
+        mermaid: {
+          startOnLoad: false,
+        },
+        // mermaidAPI options
+        theme: 'neutral',
+      });
 
-    $els.each((i, el) => {
-      const source = el.textContent;
+      $els.each((i, el) => {
+        const source = el.textContent;
 
-      // Remove any extra spans added by the backend syntax highlighting.
-      Object.assign(el, { textContent: source });
+        // Remove any extra spans added by the backend syntax highlighting.
+        Object.assign(el, { textContent: source });
 
-      mermaid.init(undefined, el, (id) => {
-        const svg = document.getElementById(id);
+        mermaid.init(undefined, el, id => {
+          const svg = document.getElementById(id);
 
-        svg.classList.add('mermaid');
+          svg.classList.add('mermaid');
 
-        // pre > code > svg
-        svg.closest('pre').replaceWith(svg);
+          // pre > code > svg
+          svg.closest('pre').replaceWith(svg);
 
-        // We need to add the original source into the DOM to allow Copy-as-GFM
-        // to access it.
-        const sourceEl = document.createElement('text');
-        sourceEl.classList.add('source');
-        sourceEl.setAttribute('display', 'none');
-        sourceEl.textContent = source;
+          // We need to add the original source into the DOM to allow Copy-as-GFM
+          // to access it.
+          const sourceEl = document.createElement('text');
+          sourceEl.classList.add('source');
+          sourceEl.setAttribute('display', 'none');
+          sourceEl.textContent = source;
 
-        svg.appendChild(sourceEl);
+          svg.appendChild(sourceEl);
+        });
       });
+    })
+    .catch(err => {
+      flash(`Can't load mermaid module: ${err}`);
     });
-  }).catch((err) => {
-    flash(`Can't load mermaid module: ${err}`);
-  });
 }
diff --git a/app/assets/javascripts/behaviors/preview_markdown.js b/app/assets/javascripts/behaviors/preview_markdown.js
index 0964baf8954..35f1bb6b080 100644
--- a/app/assets/javascripts/behaviors/preview_markdown.js
+++ b/app/assets/javascripts/behaviors/preview_markdown.js
@@ -26,7 +26,7 @@ MarkdownPreview.prototype.emptyMessage = 'Nothing to preview.';
 
 MarkdownPreview.prototype.ajaxCache = {};
 
-MarkdownPreview.prototype.showPreview = function ($form) {
+MarkdownPreview.prototype.showPreview = function($form) {
   var mdText;
   var markdownVersion;
   var url;
@@ -44,34 +44,40 @@ MarkdownPreview.prototype.showPreview = function ($form) {
     this.hideReferencedUsers($form);
   } else {
     preview.addClass('md-preview-loading').text('Loading...');
-    this.fetchMarkdownPreview(mdText, url, (function (response) {
-      var body;
-      if (response.body.length > 0) {
-        ({ body } = response);
-      } else {
-        body = this.emptyMessage;
-      }
-
-      preview.removeClass('md-preview-loading').html(body);
-      preview.renderGFM();
-      this.renderReferencedUsers(response.references.users, $form);
-
-      if (response.references.commands) {
-        this.renderReferencedCommands(response.references.commands, $form);
-      }
-    }).bind(this));
+    this.fetchMarkdownPreview(
+      mdText,
+      url,
+      function(response) {
+        var body;
+        if (response.body.length > 0) {
+          ({ body } = response);
+        } else {
+          body = this.emptyMessage;
+        }
+
+        preview.removeClass('md-preview-loading').html(body);
+        preview.renderGFM();
+        this.renderReferencedUsers(response.references.users, $form);
+
+        if (response.references.commands) {
+          this.renderReferencedCommands(response.references.commands, $form);
+        }
+      }.bind(this),
+    );
   }
 };
 
-MarkdownPreview.prototype.versionedPreviewPath = function (markdownPreviewPath, markdownVersion) {
+MarkdownPreview.prototype.versionedPreviewPath = function(markdownPreviewPath, markdownVersion) {
   if (typeof markdownVersion === 'undefined') {
     return markdownPreviewPath;
   }
 
-  return `${markdownPreviewPath}${markdownPreviewPath.indexOf('?') === -1 ? '?' : '&'}markdown_version=${markdownVersion}`;
+  return `${markdownPreviewPath}${
+    markdownPreviewPath.indexOf('?') === -1 ? '?' : '&'
+  }markdown_version=${markdownVersion}`;
 };
 
-MarkdownPreview.prototype.fetchMarkdownPreview = function (text, url, success) {
+MarkdownPreview.prototype.fetchMarkdownPreview = function(text, url, success) {
   if (!url) {
     return;
   }
@@ -79,24 +85,25 @@ MarkdownPreview.prototype.fetchMarkdownPreview = function (text, url, success) {
     success(this.ajaxCache.response);
     return;
   }
-  axios.post(url, {
-    text,
-  })
-  .then(({ data }) => {
-    this.ajaxCache = {
-      text: text,
-      response: data,
-    };
-    success(data);
-  })
-  .catch(() => flash(__('An error occurred while fetching markdown preview')));
+  axios
+    .post(url, {
+      text,
+    })
+    .then(({ data }) => {
+      this.ajaxCache = {
+        text: text,
+        response: data,
+      };
+      success(data);
+    })
+    .catch(() => flash(__('An error occurred while fetching markdown preview')));
 };
 
-MarkdownPreview.prototype.hideReferencedUsers = function ($form) {
+MarkdownPreview.prototype.hideReferencedUsers = function($form) {
   $form.find('.referenced-users').hide();
 };
 
-MarkdownPreview.prototype.renderReferencedUsers = function (users, $form) {
+MarkdownPreview.prototype.renderReferencedUsers = function(users, $form) {
   var referencedUsers;
   referencedUsers = $form.find('.referenced-users');
   if (referencedUsers.length) {
@@ -109,11 +116,11 @@ MarkdownPreview.prototype.renderReferencedUsers = function (users, $form) {
   }
 };
 
-MarkdownPreview.prototype.hideReferencedCommands = function ($form) {
+MarkdownPreview.prototype.hideReferencedCommands = function($form) {
   $form.find('.referenced-commands').hide();
 };
 
-MarkdownPreview.prototype.renderReferencedCommands = function (commands, $form) {
+MarkdownPreview.prototype.renderReferencedCommands = function(commands, $form) {
   var referencedCommands;
   referencedCommands = $form.find('.referenced-commands');
   if (commands.length > 0) {
@@ -132,14 +139,14 @@ writeButtonSelector = '.js-md-write-button';
 lastTextareaPreviewed = null;
 const markdownToolbar = $('.md-header-toolbar');
 
-$.fn.setupMarkdownPreview = function () {
+$.fn.setupMarkdownPreview = function() {
   var $form = $(this);
-  $form.find('textarea.markdown-area').on('input', function () {
+  $form.find('textarea.markdown-area').on('input', function() {
     markdownPreview.hideReferencedUsers($form);
   });
 };
 
-$(document).on('markdown-preview:show', function (e, $form) {
+$(document).on('markdown-preview:show', function(e, $form) {
   if (!$form) {
     return;
   }
@@ -148,8 +155,14 @@ $(document).on('markdown-preview:show', function (e, $form) {
   lastTextareaHeight = lastTextareaPreviewed.height();
 
   // toggle tabs
-  $form.find(writeButtonSelector).parent().removeClass('active');
-  $form.find(previewButtonSelector).parent().addClass('active');
+  $form
+    .find(writeButtonSelector)
+    .parent()
+    .removeClass('active');
+  $form
+    .find(previewButtonSelector)
+    .parent()
+    .addClass('active');
 
   // toggle content
   $form.find('.md-write-holder').hide();
@@ -158,7 +171,7 @@ $(document).on('markdown-preview:show', function (e, $form) {
   markdownPreview.showPreview($form);
 });
 
-$(document).on('markdown-preview:hide', function (e, $form) {
+$(document).on('markdown-preview:hide', function(e, $form) {
   if (!$form) {
     return;
   }
@@ -169,8 +182,14 @@ $(document).on('markdown-preview:hide', function (e, $form) {
   }
 
   // toggle tabs
-  $form.find(writeButtonSelector).parent().addClass('active');
-  $form.find(previewButtonSelector).parent().removeClass('active');
+  $form
+    .find(writeButtonSelector)
+    .parent()
+    .addClass('active');
+  $form
+    .find(previewButtonSelector)
+    .parent()
+    .removeClass('active');
 
   // toggle content
   $form.find('.md-write-holder').show();
@@ -181,7 +200,7 @@ $(document).on('markdown-preview:hide', function (e, $form) {
   markdownPreview.hideReferencedCommands($form);
 });
 
-$(document).on('markdown-preview:toggle', function (e, keyboardEvent) {
+$(document).on('markdown-preview:toggle', function(e, keyboardEvent) {
   var $target;
   $target = $(keyboardEvent.target);
   if ($target.is('textarea.markdown-area')) {
@@ -194,14 +213,14 @@ $(document).on('markdown-preview:toggle', function (e, keyboardEvent) {
   }
 });
 
-$(document).on('click', previewButtonSelector, function (e) {
+$(document).on('click', previewButtonSelector, function(e) {
   var $form;
   e.preventDefault();
   $form = $(this).closest('form');
   $(document).triggerHandler('markdown-preview:show', [$form]);
 });
 
-$(document).on('click', writeButtonSelector, function (e) {
+$(document).on('click', writeButtonSelector, function(e) {
   var $form;
   e.preventDefault();
   $form = $(this).closest('form');
diff --git a/app/assets/javascripts/behaviors/quick_submit.js b/app/assets/javascripts/behaviors/quick_submit.js
index b6e2781773c..c1ea67f9293 100644
--- a/app/assets/javascripts/behaviors/quick_submit.js
+++ b/app/assets/javascripts/behaviors/quick_submit.js
@@ -28,7 +28,7 @@ function keyCodeIs(e, keyCode) {
   return e.keyCode === keyCode;
 }
 
-$(document).on('keydown.quick_submit', '.js-quick-submit', (e) => {
+$(document).on('keydown.quick_submit', '.js-quick-submit', e => {
   // Enter
   if (!keyCodeIs(e, 13)) {
     return;
@@ -55,23 +55,25 @@ $(document).on('keydown.quick_submit', '.js-quick-submit', (e) => {
 
 // If the user tabs to a submit button on a `js-quick-submit` form, display a
 // tooltip to let them know they could've used the hotkey
-$(document).on('keyup.quick_submit', '.js-quick-submit input[type=submit], .js-quick-submit button[type=submit]', function displayTooltip(e) {
-  // Tab
-  if (!keyCodeIs(e, 9)) {
-    return;
-  }
+$(document).on(
+  'keyup.quick_submit',
+  '.js-quick-submit input[type=submit], .js-quick-submit button[type=submit]',
+  function displayTooltip(e) {
+    // Tab
+    if (!keyCodeIs(e, 9)) {
+      return;
+    }
 
-  const $this = $(this);
-  const title = isMac() ?
-    'You can also press &#8984;-Enter' :
-    'You can also press Ctrl-Enter';
+    const $this = $(this);
+    const title = isMac() ? 'You can also press &#8984;-Enter' : 'You can also press Ctrl-Enter';
 
-  $this.tooltip({
-    container: 'body',
-    html: 'true',
-    placement: 'top',
-    title,
-    trigger: 'manual',
-  });
-  $this.tooltip('show').one('blur click', () => $this.tooltip('hide'));
-});
+    $this.tooltip({
+      container: 'body',
+      html: 'true',
+      placement: 'top',
+      title,
+      trigger: 'manual',
+    });
+    $this.tooltip('show').one('blur click', () => $this.tooltip('hide'));
+  },
+);
diff --git a/app/assets/javascripts/behaviors/requires_input.js b/app/assets/javascripts/behaviors/requires_input.js
index a8b6dbf0948..c09d9ccddd6 100644
--- a/app/assets/javascripts/behaviors/requires_input.js
+++ b/app/assets/javascripts/behaviors/requires_input.js
@@ -18,7 +18,8 @@ import '../commons/bootstrap';
 $.fn.requiresInput = function requiresInput() {
   const $form = $(this);
   const $button = $('button[type=submit], input[type=submit]', $form);
-  const fieldSelector = 'input[required=required], select[required=required], textarea[required=required]';
+  const fieldSelector =
+    'input[required=required], select[required=required], textarea[required=required]';
 
   function requireInput() {
     // Collect the input values of *all* required fields
diff --git a/app/assets/javascripts/behaviors/secret_values.js b/app/assets/javascripts/behaviors/secret_values.js
index 0d6e0dbefcc..f6bf62d734e 100644
--- a/app/assets/javascripts/behaviors/secret_values.js
+++ b/app/assets/javascripts/behaviors/secret_values.js
@@ -32,16 +32,18 @@ export default class SecretValues {
 
   updateDom(isRevealed) {
     const values = this.container.querySelectorAll(this.valueSelector);
-    values.forEach((value) => {
+    values.forEach(value => {
       value.classList.toggle('hide', !isRevealed);
     });
 
     const placeholders = this.container.querySelectorAll(this.placeholderSelector);
-    placeholders.forEach((placeholder) => {
+    placeholders.forEach(placeholder => {
       placeholder.classList.toggle('hide', isRevealed);
     });
 
-    this.revealButton.textContent = isRevealed ? n__('Hide value', 'Hide values', values.length) : n__('Reveal value', 'Reveal values', values.length);
+    this.revealButton.textContent = isRevealed
+      ? n__('Hide value', 'Hide values', values.length)
+      : n__('Reveal value', 'Reveal values', values.length);
     this.revealButton.dataset.secretRevealStatus = isRevealed;
   }
 }
diff --git a/app/assets/javascripts/behaviors/shortcuts/shortcuts.js b/app/assets/javascripts/behaviors/shortcuts/shortcuts.js
index 6719bfd6d22..8b5a3c1c69d 100644
--- a/app/assets/javascripts/behaviors/shortcuts/shortcuts.js
+++ b/app/assets/javascripts/behaviors/shortcuts/shortcuts.js
@@ -88,22 +88,24 @@ export default class Shortcuts {
       return null;
     }
 
-    return axios.get(gon.shortcuts_path, {
-      responseType: 'text',
-    }).then(({ data }) => {
-      $.globalEval(data);
-
-      if (location && location.length > 0) {
-        const results = [];
-        for (let i = 0, len = location.length; i < len; i += 1) {
-          results.push($(location[i]).show());
+    return axios
+      .get(gon.shortcuts_path, {
+        responseType: 'text',
+      })
+      .then(({ data }) => {
+        $.globalEval(data);
+
+        if (location && location.length > 0) {
+          const results = [];
+          for (let i = 0, len = location.length; i < len; i += 1) {
+            results.push($(location[i]).show());
+          }
+          return results;
         }
-        return results;
-      }
 
-      $('.hidden-shortcut').show();
-      return $('.js-more-help-button').remove();
-    });
+        $('.hidden-shortcut').show();
+        return $('.js-more-help-button').remove();
+      });
   }
 
   focusFilter(e) {
diff --git a/app/assets/javascripts/behaviors/toggler_behavior.js b/app/assets/javascripts/behaviors/toggler_behavior.js
index 4446be0e52f..ef8b8788abf 100644
--- a/app/assets/javascripts/behaviors/toggler_behavior.js
+++ b/app/assets/javascripts/behaviors/toggler_behavior.js
@@ -18,9 +18,7 @@ $(() => {
       .toggleClass('fa-chevron-up', toggleState)
       .toggleClass('fa-chevron-down', toggleState !== undefined ? !toggleState : undefined);
 
-    $container
-      .find('.js-toggle-content')
-      .toggle(toggleState);
+    $container.find('.js-toggle-content').toggle(toggleState);
   }
 
   $('body').on('click', '.js-toggle-button', function toggleButton(e) {
diff --git a/app/assets/javascripts/blob/3d_viewer/index.js b/app/assets/javascripts/blob/3d_viewer/index.js
index 1bdf1aeb76c..2d4f45cc365 100644
--- a/app/assets/javascripts/blob/3d_viewer/index.js
+++ b/app/assets/javascripts/blob/3d_viewer/index.js
@@ -18,12 +18,7 @@ export default class Renderer {
     this.loader = new STLLoader();
 
     this.fov = 45;
-    this.camera = new THREE.PerspectiveCamera(
-      this.fov,
-      this.width / this.height,
-      1,
-      1000,
-    );
+    this.camera = new THREE.PerspectiveCamera(this.fov, this.width / this.height, 1, 1000);
 
     this.scene = new THREE.Scene();
 
@@ -35,10 +30,7 @@ export default class Renderer {
     this.setupLight();
 
     // Set up OrbitControls
-    this.controls = new OrbitControls(
-      this.camera,
-      this.renderer.domElement,
-    );
+    this.controls = new OrbitControls(this.camera, this.renderer.domElement);
     this.controls.minDistance = 5;
     this.controls.maxDistance = 30;
     this.controls.enableKeys = false;
@@ -51,47 +43,32 @@ export default class Renderer {
       antialias: true,
     });
 
-    this.renderer.setClearColor(0xFFFFFF);
+    this.renderer.setClearColor(0xffffff);
     this.renderer.setPixelRatio(window.devicePixelRatio);
-    this.renderer.setSize(
-      this.width,
-      this.height,
-    );
+    this.renderer.setSize(this.width, this.height);
   }
 
   setupLight() {
     // Point light illuminates the object
-    const pointLight = new THREE.PointLight(
-      0xFFFFFF,
-      2,
-      0,
-    );
+    const pointLight = new THREE.PointLight(0xffffff, 2, 0);
 
     pointLight.castShadow = true;
 
     this.camera.add(pointLight);
 
     // Ambient light illuminates the scene
-    const ambientLight = new THREE.AmbientLight(
-      0xFFFFFF,
-      1,
-    );
+    const ambientLight = new THREE.AmbientLight(0xffffff, 1);
     this.scene.add(ambientLight);
   }
 
   setupGrid() {
-    this.grid = new THREE.GridHelper(
-      20,
-      20,
-      0x000000,
-      0x000000,
-    );
+    this.grid = new THREE.GridHelper(20, 20, 0x000000, 0x000000);
 
     this.scene.add(this.grid);
   }
 
   loadFile() {
-    this.loader.load(this.container.dataset.endpoint, (geo) => {
+    this.loader.load(this.container.dataset.endpoint, geo => {
       const obj = new MeshObject(geo);
 
       this.objects.push(obj);
@@ -116,30 +93,23 @@ export default class Renderer {
   }
 
   render() {
-    this.renderer.render(
-      this.scene,
-      this.camera,
-    );
+    this.renderer.render(this.scene, this.camera);
 
     requestAnimationFrame(this.renderWrapper);
   }
 
   changeObjectMaterials(type) {
-    this.objects.forEach((obj) => {
+    this.objects.forEach(obj => {
       obj.changeMaterial(type);
     });
   }
 
   setDefaultCameraPosition() {
     const obj = this.objects[0];
-    const radius = (obj.geometry.boundingSphere.radius / 1.5);
-    const dist = radius / (Math.sin((this.fov * (Math.PI / 180)) / 2));
-
-    this.camera.position.set(
-      0,
-      dist + 1,
-      dist,
-    );
+    const radius = obj.geometry.boundingSphere.radius / 1.5;
+    const dist = radius / Math.sin((this.fov * (Math.PI / 180)) / 2);
+
+    this.camera.position.set(0, dist + 1, dist);
 
     this.camera.lookAt(this.grid);
     this.controls.update();
diff --git a/app/assets/javascripts/blob/3d_viewer/mesh_object.js b/app/assets/javascripts/blob/3d_viewer/mesh_object.js
index 96758884abf..cb7fcff8674 100644
--- a/app/assets/javascripts/blob/3d_viewer/mesh_object.js
+++ b/app/assets/javascripts/blob/3d_viewer/mesh_object.js
@@ -1,10 +1,6 @@
-import {
-  Matrix4,
-  MeshLambertMaterial,
-  Mesh,
-} from 'three/build/three.module';
+import { Matrix4, MeshLambertMaterial, Mesh } from 'three/build/three.module';
 
-const defaultColor = 0xE24329;
+const defaultColor = 0xe24329;
 const materials = {
   default: new MeshLambertMaterial({
     color: defaultColor,
@@ -17,10 +13,7 @@ const materials = {
 
 export default class MeshObject extends Mesh {
   constructor(geo) {
-    super(
-      geo,
-      materials.default,
-    );
+    super(geo, materials.default);
 
     this.geometry.computeBoundingSphere();
 
@@ -29,13 +22,7 @@ export default class MeshObject extends Mesh {
     if (this.geometry.boundingSphere.radius > 4) {
       const scale = 4 / this.geometry.boundingSphere.radius;
 
-      this.geometry.applyMatrix(
-        new Matrix4().makeScale(
-          scale,
-          scale,
-          scale,
-        ),
-      );
+      this.geometry.applyMatrix(new Matrix4().makeScale(scale, scale, scale));
       this.geometry.computeBoundingSphere();
 
       this.position.x = -this.geometry.boundingSphere.center.x;
diff --git a/app/assets/javascripts/blob/balsamiq/balsamiq_viewer.js b/app/assets/javascripts/blob/balsamiq/balsamiq_viewer.js
index 7986287f7e7..75777b910ca 100644
--- a/app/assets/javascripts/blob/balsamiq/balsamiq_viewer.js
+++ b/app/assets/javascripts/blob/balsamiq/balsamiq_viewer.js
@@ -42,7 +42,7 @@ class BalsamiqViewer {
     this.initDatabase(loadEvent.target.response);
 
     const previews = this.getPreviews();
-    previews.forEach((preview) => {
+    previews.forEach(preview => {
       const renderedPreview = this.renderPreview(preview);
 
       container.appendChild(renderedPreview);
diff --git a/app/assets/javascripts/blob/blob_file_dropzone.js b/app/assets/javascripts/blob/blob_file_dropzone.js
index ff1739b1679..cd3251ad1ca 100644
--- a/app/assets/javascripts/blob/blob_file_dropzone.js
+++ b/app/assets/javascripts/blob/blob_file_dropzone.js
@@ -41,39 +41,45 @@ export default class BlobFileDropzone {
       addRemoveLinks: true,
       previewsContainer: '.dropzone-previews',
       headers: csrf.headers,
-      init: function () {
-        this.on('addedfile', function () {
+      init: function() {
+        this.on('addedfile', function() {
           toggleLoading(submitButton, submitButtonLoadingIcon, false);
           dropzoneMessage.addClass(HIDDEN_CLASS);
-          $('.dropzone-alerts').html('').hide();
+          $('.dropzone-alerts')
+            .html('')
+            .hide();
         });
-        this.on('removedfile', function () {
+        this.on('removedfile', function() {
           toggleLoading(submitButton, submitButtonLoadingIcon, false);
           dropzoneMessage.removeClass(HIDDEN_CLASS);
         });
-        this.on('success', function (header, response) {
+        this.on('success', function(header, response) {
           $('#modal-upload-blob').modal('hide');
           visitUrl(response.filePath);
         });
-        this.on('maxfilesexceeded', function (file) {
+        this.on('maxfilesexceeded', function(file) {
           dropzoneMessage.addClass(HIDDEN_CLASS);
           this.removeFile(file);
         });
-        this.on('sending', function (file, xhr, formData) {
+        this.on('sending', function(file, xhr, formData) {
           formData.append('branch_name', form.find('.js-branch-name').val());
           formData.append('create_merge_request', form.find('.js-create-merge-request').val());
           formData.append('commit_message', form.find('.js-commit-message').val());
         });
       },
       // Override behavior of adding error underneath preview
-      error: function (file, errorMessage) {
-        const stripped = $('<div/>').html(errorMessage).text();
-        $('.dropzone-alerts').html(`Error uploading file: "${stripped}"`).show();
+      error: function(file, errorMessage) {
+        const stripped = $('<div/>')
+          .html(errorMessage)
+          .text();
+        $('.dropzone-alerts')
+          .html(`Error uploading file: "${stripped}"`)
+          .show();
         this.removeFile(file);
       },
     });
 
-    submitButton.on('click', (e) => {
+    submitButton.on('click', e => {
       e.preventDefault();
       e.stopPropagation();
       if (dropzone[0].dropzone.getQueuedFiles().length === 0) {
diff --git a/app/assets/javascripts/blob/blob_line_permalink_updater.js b/app/assets/javascripts/blob/blob_line_permalink_updater.js
index d36d9f0de2d..62f0a56ed75 100644
--- a/app/assets/javascripts/blob/blob_line_permalink_updater.js
+++ b/app/assets/javascripts/blob/blob_line_permalink_updater.js
@@ -2,17 +2,19 @@ import { getLocationHash } from '../lib/utils/url_utility';
 
 const lineNumberRe = /^L[0-9]+/;
 
-const updateLineNumbersOnBlobPermalinks = (linksToUpdate) => {
+const updateLineNumbersOnBlobPermalinks = linksToUpdate => {
   const hash = getLocationHash();
   if (hash && lineNumberRe.test(hash)) {
     const hashUrlString = `#${hash}`;
 
-    [].concat(Array.prototype.slice.call(linksToUpdate)).forEach((permalinkButton) => {
-      const baseHref = permalinkButton.getAttribute('data-original-href') || (() => {
-        const href = permalinkButton.getAttribute('href');
-        permalinkButton.setAttribute('data-original-href', href);
-        return href;
-      })();
+    [].concat(Array.prototype.slice.call(linksToUpdate)).forEach(permalinkButton => {
+      const baseHref =
+        permalinkButton.getAttribute('data-original-href') ||
+        (() => {
+          const href = permalinkButton.getAttribute('href');
+          permalinkButton.setAttribute('data-original-href', href);
+          return href;
+        })();
       permalinkButton.setAttribute('href', `${baseHref}${hashUrlString}`);
     });
   }
@@ -26,7 +28,7 @@ function BlobLinePermalinkUpdater(blobContentHolder, lineNumberSelector, element
     }, 0);
   };
 
-  blobContentHolder.addEventListener('click', (e) => {
+  blobContentHolder.addEventListener('click', e => {
     if (e.target.matches(lineNumberSelector)) {
       updateBlameAndBlobPermalinkCb();
     }
diff --git a/app/assets/javascripts/blob/file_template_selector.js b/app/assets/javascripts/blob/file_template_selector.js
index 02228434a29..476901aae75 100644
--- a/app/assets/javascripts/blob/file_template_selector.js
+++ b/app/assets/javascripts/blob/file_template_selector.js
@@ -45,15 +45,11 @@ export default class FileTemplateSelector {
   }
 
   renderLoading() {
-    this.$loadingIcon
-      .addClass('fa-spinner fa-spin')
-      .removeClass('fa-chevron-down');
+    this.$loadingIcon.addClass('fa-spinner fa-spin').removeClass('fa-chevron-down');
   }
 
   renderLoaded() {
-    this.$loadingIcon
-      .addClass('fa-chevron-down')
-      .removeClass('fa-spinner fa-spin');
+    this.$loadingIcon.addClass('fa-chevron-down').removeClass('fa-spinner fa-spin');
   }
 
   reportSelection(options) {
diff --git a/app/assets/javascripts/blob/notebook/index.js b/app/assets/javascripts/blob/notebook/index.js
index 6f1350e80fc..071022a9a75 100644
--- a/app/assets/javascripts/blob/notebook/index.js
+++ b/app/assets/javascripts/blob/notebook/index.js
@@ -40,13 +40,14 @@ export default () => {
     },
     methods: {
       loadFile() {
-        axios.get(el.dataset.endpoint)
+        axios
+          .get(el.dataset.endpoint)
           .then(res => res.data)
-          .then((data) => {
+          .then(data => {
             this.json = data;
             this.loading = false;
           })
-          .catch((e) => {
+          .catch(e => {
             if (e.status !== 200) {
               this.loadError = true;
             }
diff --git a/app/assets/javascripts/blob/sketch/index.js b/app/assets/javascripts/blob/sketch/index.js
index 13318c58006..57c1baa9886 100644
--- a/app/assets/javascripts/blob/sketch/index.js
+++ b/app/assets/javascripts/blob/sketch/index.js
@@ -13,7 +13,7 @@ export default class SketchLoader {
     return this.getZipFile()
       .then(data => JSZip.loadAsync(data))
       .then(asyncResult => asyncResult.files['previews/preview.png'].async('uint8array'))
-      .then((content) => {
+      .then(content => {
         const url = window.URL || window.webkitURL;
         const blob = new Blob([new Uint8Array(content)], {
           type: 'image/png',
diff --git a/app/assets/javascripts/blob/stl_viewer.js b/app/assets/javascripts/blob/stl_viewer.js
index 339906adc34..f129b6e631e 100644
--- a/app/assets/javascripts/blob/stl_viewer.js
+++ b/app/assets/javascripts/blob/stl_viewer.js
@@ -3,8 +3,8 @@ import Renderer from './3d_viewer';
 export default () => {
   const viewer = new Renderer(document.getElementById('js-stl-viewer'));
 
-  [].slice.call(document.querySelectorAll('.js-material-changer')).forEach((el) => {
-    el.addEventListener('click', (e) => {
+  [].slice.call(document.querySelectorAll('.js-material-changer')).forEach(el => {
+    el.addEventListener('click', e => {
       const { target } = e;
 
       e.preventDefault();
diff --git a/app/assets/javascripts/blob/template_selector.js b/app/assets/javascripts/blob/template_selector.js
index 9db1fa70ffb..37e348d93d3 100644
--- a/app/assets/javascripts/blob/template_selector.js
+++ b/app/assets/javascripts/blob/template_selector.js
@@ -81,14 +81,10 @@ export default class TemplateSelector {
   }
 
   startLoadingSpinner() {
-    this.$dropdownIcon
-      .addClass('fa-spinner fa-spin')
-      .removeClass('fa-chevron-down');
+    this.$dropdownIcon.addClass('fa-spinner fa-spin').removeClass('fa-chevron-down');
   }
 
   stopLoadingSpinner() {
-    this.$dropdownIcon
-      .addClass('fa-chevron-down')
-      .removeClass('fa-spinner fa-spin');
+    this.$dropdownIcon.addClass('fa-chevron-down').removeClass('fa-spinner fa-spin');
   }
 }
diff --git a/app/assets/javascripts/blob/template_selectors/license_selector.js b/app/assets/javascripts/blob/template_selectors/license_selector.js
index ac1fe95eee5..d01ab9257d6 100644
--- a/app/assets/javascripts/blob/template_selectors/license_selector.js
+++ b/app/assets/javascripts/blob/template_selectors/license_selector.js
@@ -22,7 +22,7 @@ export default class BlobLicenseSelector extends FileTemplateSelector {
       search: {
         fields: ['name'],
       },
-      clicked: (options) => {
+      clicked: options => {
         const { e } = options;
         const el = options.$el;
         const query = options.selectedObj;
diff --git a/app/assets/javascripts/blob/template_selectors/type_selector.js b/app/assets/javascripts/blob/template_selectors/type_selector.js
index a09381014a7..db3c144cbe3 100644
--- a/app/assets/javascripts/blob/template_selectors/type_selector.js
+++ b/app/assets/javascripts/blob/template_selectors/type_selector.js
@@ -21,5 +21,4 @@ export default class FileTemplateTypeSelector extends FileTemplateSelector {
       text: item => item.name,
     });
   }
-
 }
diff --git a/app/assets/javascripts/blob/viewer/index.js b/app/assets/javascripts/blob/viewer/index.js
index 5485248cfaf..befa1dc455f 100644
--- a/app/assets/javascripts/blob/viewer/index.js
+++ b/app/assets/javascripts/blob/viewer/index.js
@@ -22,9 +22,8 @@ export default class BlobViewer {
     const viewer = document.querySelector('.blob-viewer[data-type="rich"]');
     if (!viewer || !viewer.dataset.richType) return;
 
-    const initViewer = promise => promise
-      .then(module => module.default(viewer))
-      .catch((error) => {
+    const initViewer = promise =>
+      promise.then(module => module.default(viewer)).catch(error => {
         Flash('Error loading file viewer.');
         throw error;
       });
@@ -79,10 +78,9 @@ export default class BlobViewer {
 
   initBindings() {
     if (this.switcherBtns.length) {
-      Array.from(this.switcherBtns)
-        .forEach((el) => {
-          el.addEventListener('click', this.switchViewHandler.bind(this));
-        });
+      Array.from(this.switcherBtns).forEach(el => {
+        el.addEventListener('click', this.switchViewHandler.bind(this));
+      });
     }
 
     if (this.copySourceBtn) {
@@ -109,7 +107,10 @@ export default class BlobViewer {
       this.copySourceBtn.setAttribute('title', 'Copy source to clipboard');
       this.copySourceBtn.classList.remove('disabled');
     } else if (this.activeViewer === this.simpleViewer) {
-      this.copySourceBtn.setAttribute('title', 'Wait for the source to load to copy it to the clipboard');
+      this.copySourceBtn.setAttribute(
+        'title',
+        'Wait for the source to load to copy it to the clipboard',
+      );
       this.copySourceBtn.classList.add('disabled');
     } else {
       this.copySourceBtn.setAttribute('title', 'Switch to the source to copy it to the clipboard');
@@ -147,15 +148,15 @@ export default class BlobViewer {
     this.toggleCopyButtonState();
 
     BlobViewer.loadViewer(newViewer)
-    .then((viewer) => {
-      $(viewer).renderGFM();
+      .then(viewer => {
+        $(viewer).renderGFM();
 
-      this.$fileHolder.trigger('highlight:line');
-      handleLocationHash();
+        this.$fileHolder.trigger('highlight:line');
+        handleLocationHash();
 
-      this.toggleCopyButtonState();
-    })
-    .catch(() => new Flash('Error loading viewer'));
+        this.toggleCopyButtonState();
+      })
+      .catch(() => new Flash('Error loading viewer'));
   }
 
   static loadViewer(viewerParam) {
@@ -168,12 +169,11 @@ export default class BlobViewer {
 
     viewer.setAttribute('data-loading', 'true');
 
-    return axios.get(url)
-      .then(({ data }) => {
-        viewer.innerHTML = data.html;
-        viewer.setAttribute('data-loaded', 'true');
+    return axios.get(url).then(({ data }) => {
+      viewer.innerHTML = data.html;
+      viewer.setAttribute('data-loaded', 'true');
 
-        return viewer;
-      });
+      return viewer;
+    });
   }
 }
diff --git a/app/assets/javascripts/cycle_analytics/components/banner.vue b/app/assets/javascripts/cycle_analytics/components/banner.vue
index 88570160f26..82b0f523d2e 100644
--- a/app/assets/javascripts/cycle_analytics/components/banner.vue
+++ b/app/assets/javascripts/cycle_analytics/components/banner.vue
@@ -1,28 +1,28 @@
 <script>
-  import Icon from '~/vue_shared/components/icon.vue';
-  import iconCycleAnalyticsSplash from 'icons/_icon_cycle_analytics_splash.svg';
+import Icon from '~/vue_shared/components/icon.vue';
+import iconCycleAnalyticsSplash from 'icons/_icon_cycle_analytics_splash.svg';
 
-  export default {
-    components: {
-      Icon,
+export default {
+  components: {
+    Icon,
+  },
+  props: {
+    documentationLink: {
+      type: String,
+      required: true,
     },
-    props: {
-      documentationLink: {
-        type: String,
-        required: true,
-      },
+  },
+  computed: {
+    iconCycleAnalyticsSplash() {
+      return iconCycleAnalyticsSplash;
     },
-    computed: {
-      iconCycleAnalyticsSplash() {
-        return iconCycleAnalyticsSplash;
-      },
+  },
+  methods: {
+    dismissOverviewDialog() {
+      this.$emit('dismiss-overview-dialog');
     },
-    methods: {
-      dismissOverviewDialog() {
-        this.$emit('dismiss-overview-dialog');
-      },
-    },
-  };
+  },
+};
 </script>
 <template>
   <div class="landing content-block">
diff --git a/app/assets/javascripts/cycle_analytics/components/limit_warning_component.vue b/app/assets/javascripts/cycle_analytics/components/limit_warning_component.vue
index b626b187651..f6a7d9962eb 100644
--- a/app/assets/javascripts/cycle_analytics/components/limit_warning_component.vue
+++ b/app/assets/javascripts/cycle_analytics/components/limit_warning_component.vue
@@ -1,17 +1,17 @@
 <script>
-  import tooltip from '../../vue_shared/directives/tooltip';
+import tooltip from '../../vue_shared/directives/tooltip';
 
-  export default {
-    directives: {
-      tooltip,
+export default {
+  directives: {
+    tooltip,
+  },
+  props: {
+    count: {
+      type: Number,
+      required: true,
     },
-    props: {
-      count: {
-        type: Number,
-        required: true,
-      },
-    },
-  };
+  },
+};
 </script>
 <template>
   <span
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_code_component.vue b/app/assets/javascripts/cycle_analytics/components/stage_code_component.vue
index a71dcf78103..429fef176c3 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_code_component.vue
+++ b/app/assets/javascripts/cycle_analytics/components/stage_code_component.vue
@@ -1,25 +1,25 @@
 <script>
-  import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue';
-  import limitWarning from './limit_warning_component.vue';
-  import totalTime from './total_time_component.vue';
+import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue';
+import limitWarning from './limit_warning_component.vue';
+import totalTime from './total_time_component.vue';
 
-  export default {
-    components: {
-      userAvatarImage,
-      limitWarning,
-      totalTime,
+export default {
+  components: {
+    userAvatarImage,
+    limitWarning,
+    totalTime,
+  },
+  props: {
+    items: {
+      type: Array,
+      default: () => [],
     },
-    props: {
-      items: {
-        type: Array,
-        default: () => [],
-      },
-      stage: {
-        type: Object,
-        default: () => ({}),
-      },
+    stage: {
+      type: Object,
+      default: () => ({}),
     },
-  };
+  },
+};
 </script>
 <template>
   <div>
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_component.vue b/app/assets/javascripts/cycle_analytics/components/stage_component.vue
index 312fe75dde4..56e851fa528 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_component.vue
+++ b/app/assets/javascripts/cycle_analytics/components/stage_component.vue
@@ -1,25 +1,25 @@
 <script>
-  import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue';
-  import limitWarning from './limit_warning_component.vue';
-  import totalTime from './total_time_component.vue';
+import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue';
+import limitWarning from './limit_warning_component.vue';
+import totalTime from './total_time_component.vue';
 
-  export default {
-    components: {
-      userAvatarImage,
-      limitWarning,
-      totalTime,
+export default {
+  components: {
+    userAvatarImage,
+    limitWarning,
+    totalTime,
+  },
+  props: {
+    items: {
+      type: Array,
+      default: () => [],
     },
-    props: {
-      items: {
-        type: Array,
-        default: () => [],
-      },
-      stage: {
-        type: Object,
-        default: () => ({}),
-      },
+    stage: {
+      type: Object,
+      default: () => ({}),
     },
-  };
+  },
+};
 </script>
 <template>
   <div>
@@ -73,4 +73,3 @@
     </ul>
   </div>
 </template>
-
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_plan_component.vue b/app/assets/javascripts/cycle_analytics/components/stage_plan_component.vue
index cee294b4ac2..54b9da4983a 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_plan_component.vue
+++ b/app/assets/javascripts/cycle_analytics/components/stage_plan_component.vue
@@ -1,31 +1,31 @@
 <script>
-  import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue';
-  import iconCommit from '../svg/icon_commit.svg';
-  import limitWarning from './limit_warning_component.vue';
-  import totalTime from './total_time_component.vue';
+import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue';
+import iconCommit from '../svg/icon_commit.svg';
+import limitWarning from './limit_warning_component.vue';
+import totalTime from './total_time_component.vue';
 
-  export default {
-    components: {
-      userAvatarImage,
-      totalTime,
-      limitWarning,
+export default {
+  components: {
+    userAvatarImage,
+    totalTime,
+    limitWarning,
+  },
+  props: {
+    items: {
+      type: Array,
+      default: () => [],
     },
-    props: {
-      items: {
-        type: Array,
-        default: () => [],
-      },
-      stage: {
-        type: Object,
-        default: () => ({}),
-      },
+    stage: {
+      type: Object,
+      default: () => ({}),
     },
-    computed: {
-      iconCommit() {
-        return iconCommit;
-      },
+  },
+  computed: {
+    iconCommit() {
+      return iconCommit;
     },
-  };
+  },
+};
 </script>
 <template>
   <div>
@@ -74,4 +74,3 @@
     </ul>
   </div>
 </template>
-
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_review_component.vue b/app/assets/javascripts/cycle_analytics/components/stage_review_component.vue
index d4735d030fc..f9c80d237d7 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_review_component.vue
+++ b/app/assets/javascripts/cycle_analytics/components/stage_review_component.vue
@@ -1,27 +1,27 @@
 <script>
-  import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue';
-  import limitWarning from './limit_warning_component.vue';
-  import totalTime from './total_time_component.vue';
-  import icon from '../../vue_shared/components/icon.vue';
+import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue';
+import limitWarning from './limit_warning_component.vue';
+import totalTime from './total_time_component.vue';
+import icon from '../../vue_shared/components/icon.vue';
 
-  export default {
-    components: {
-      userAvatarImage,
-      totalTime,
-      limitWarning,
-      icon,
+export default {
+  components: {
+    userAvatarImage,
+    totalTime,
+    limitWarning,
+    icon,
+  },
+  props: {
+    items: {
+      type: Array,
+      default: () => [],
     },
-    props: {
-      items: {
-        type: Array,
-        default: () => [],
-      },
-      stage: {
-        type: Object,
-        default: () => ({}),
-      },
+    stage: {
+      type: Object,
+      default: () => ({}),
     },
-  };
+  },
+};
 </script>
 <template>
   <div>
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_staging_component.vue b/app/assets/javascripts/cycle_analytics/components/stage_staging_component.vue
index 22637485c01..e83b66eef86 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_staging_component.vue
+++ b/app/assets/javascripts/cycle_analytics/components/stage_staging_component.vue
@@ -1,33 +1,33 @@
 <script>
-  import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue';
-  import iconBranch from '../svg/icon_branch.svg';
-  import limitWarning from './limit_warning_component.vue';
-  import totalTime from './total_time_component.vue';
-  import icon from '../../vue_shared/components/icon.vue';
+import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue';
+import iconBranch from '../svg/icon_branch.svg';
+import limitWarning from './limit_warning_component.vue';
+import totalTime from './total_time_component.vue';
+import icon from '../../vue_shared/components/icon.vue';
 
-  export default {
-    components: {
-      userAvatarImage,
-      totalTime,
-      limitWarning,
-      icon,
+export default {
+  components: {
+    userAvatarImage,
+    totalTime,
+    limitWarning,
+    icon,
+  },
+  props: {
+    items: {
+      type: Array,
+      default: () => [],
     },
-    props: {
-      items: {
-        type: Array,
-        default: () => [],
-      },
-      stage: {
-        type: Object,
-        default: () => ({}),
-      },
+    stage: {
+      type: Object,
+      default: () => ({}),
     },
-    computed: {
-      iconBranch() {
-        return iconBranch;
-      },
+  },
+  computed: {
+    iconBranch() {
+      return iconBranch;
     },
-  };
+  },
+};
 </script>
 <template>
   <div>
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_test_component.vue b/app/assets/javascripts/cycle_analytics/components/stage_test_component.vue
index a0796f299e7..a8196dc879a 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_test_component.vue
+++ b/app/assets/javascripts/cycle_analytics/components/stage_test_component.vue
@@ -1,35 +1,35 @@
 <script>
-  import iconBuildStatus from '../svg/icon_build_status.svg';
-  import iconBranch from '../svg/icon_branch.svg';
-  import limitWarning from './limit_warning_component.vue';
-  import totalTime from './total_time_component.vue';
-  import icon from '../../vue_shared/components/icon.vue';
+import iconBuildStatus from '../svg/icon_build_status.svg';
+import iconBranch from '../svg/icon_branch.svg';
+import limitWarning from './limit_warning_component.vue';
+import totalTime from './total_time_component.vue';
+import icon from '../../vue_shared/components/icon.vue';
 
-  export default {
-    components: {
-      totalTime,
-      limitWarning,
-      icon,
+export default {
+  components: {
+    totalTime,
+    limitWarning,
+    icon,
+  },
+  props: {
+    items: {
+      type: Array,
+      default: () => [],
     },
-    props: {
-      items: {
-        type: Array,
-        default: () => [],
-      },
-      stage: {
-        type: Object,
-        default: () => ({}),
-      },
+    stage: {
+      type: Object,
+      default: () => ({}),
     },
-    computed: {
-      iconBuildStatus() {
-        return iconBuildStatus;
-      },
-      iconBranch() {
-        return iconBranch;
-      },
+  },
+  computed: {
+    iconBuildStatus() {
+      return iconBuildStatus;
     },
-  };
+    iconBranch() {
+      return iconBranch;
+    },
+  },
+};
 </script>
 <template>
   <div>
diff --git a/app/assets/javascripts/cycle_analytics/components/total_time_component.vue b/app/assets/javascripts/cycle_analytics/components/total_time_component.vue
index 7758bf0cb3f..4db50134208 100644
--- a/app/assets/javascripts/cycle_analytics/components/total_time_component.vue
+++ b/app/assets/javascripts/cycle_analytics/components/total_time_component.vue
@@ -1,18 +1,18 @@
 <script>
-  export default {
-    props: {
-      time: {
-        type: Object,
-        required: false,
-        default: () => ({}),
-      },
+export default {
+  props: {
+    time: {
+      type: Object,
+      required: false,
+      default: () => ({}),
     },
-    computed: {
-      hasData() {
-        return Object.keys(this.time).length;
-      },
+  },
+  computed: {
+    hasData() {
+      return Object.keys(this.time).length;
     },
-  };
+  },
+};
 </script>
 <template>
   <span class="total-time">
diff --git a/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js b/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js
index 1c43fc3cdc7..4de425b48e7 100644
--- a/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js
+++ b/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js
@@ -18,7 +18,8 @@ Vue.use(Translate);
 export default () => {
   const OVERVIEW_DIALOG_COOKIE = 'cycle_analytics_help_dismissed';
 
-  new Vue({ // eslint-disable-line no-new
+  // eslint-disable-next-line no-new
+  new Vue({
     el: '#cycle-analytics',
     name: 'CycleAnalytics',
     components: {
@@ -66,14 +67,17 @@ export default () => {
         const $dropdown = $('.js-ca-dropdown');
         const $label = $dropdown.find('.dropdown-label');
 
-        $dropdown.find('li a').off('click').on('click', (e) => {
-          e.preventDefault();
-          const $target = $(e.currentTarget);
-          this.startDate = $target.data('value');
+        $dropdown
+          .find('li a')
+          .off('click')
+          .on('click', e => {
+            e.preventDefault();
+            const $target = $(e.currentTarget);
+            this.startDate = $target.data('value');
 
-          $label.text($target.text().trim());
-          this.fetchCycleAnalyticsData({ startDate: this.startDate });
-        });
+            $label.text($target.text().trim());
+            this.fetchCycleAnalyticsData({ startDate: this.startDate });
+          });
       },
       fetchCycleAnalyticsData(options) {
         const fetchOptions = options || { startDate: this.startDate };
@@ -82,7 +86,7 @@ export default () => {
 
         this.service
           .fetchCycleAnalyticsData(fetchOptions)
-          .then((response) => {
+          .then(response => {
             this.store.setCycleAnalyticsData(response);
             this.selectDefaultStage();
             this.initDropdown();
@@ -115,7 +119,7 @@ export default () => {
             stage,
             startDate: this.startDate,
           })
-          .then((response) => {
+          .then(response => {
             this.isEmptyStage = !response.events.length;
             this.store.setStageEvents(response.events, stage);
             this.isLoadingStage = false;
diff --git a/app/assets/javascripts/cycle_analytics/cycle_analytics_service.js b/app/assets/javascripts/cycle_analytics/cycle_analytics_service.js
index 4cf416c50e5..a0426301a0a 100644
--- a/app/assets/javascripts/cycle_analytics/cycle_analytics_service.js
+++ b/app/assets/javascripts/cycle_analytics/cycle_analytics_service.js
@@ -18,10 +18,7 @@ export default class CycleAnalyticsService {
   }
 
   fetchStageData(options) {
-    const {
-      stage,
-      startDate,
-    } = options;
+    const { stage, startDate } = options;
 
     return this.axios
       .get(`events/${stage.name}.json`, {
diff --git a/app/assets/javascripts/cycle_analytics/cycle_analytics_store.js b/app/assets/javascripts/cycle_analytics/cycle_analytics_store.js
index a8cd8c20f8f..18fb57c8b4f 100644
--- a/app/assets/javascripts/cycle_analytics/cycle_analytics_store.js
+++ b/app/assets/javascripts/cycle_analytics/cycle_analytics_store.js
@@ -5,13 +5,27 @@ import { dasherize } from '../lib/utils/text_utility';
 import DEFAULT_EVENT_OBJECTS from './default_event_objects';
 
 const EMPTY_STAGE_TEXTS = {
-  issue: __('The issue stage shows the time it takes from creating an issue to assigning the issue to a milestone, or add the issue to a list on your Issue Board. Begin creating issues to see data for this stage.'),
-  plan: __('The planning stage shows the time from the previous step to pushing your first commit. This time will be added automatically once you push your first commit.'),
-  code: __('The coding stage shows the time from the first commit to creating the merge request. The data will automatically be added here once you create your first merge request.'),
-  test: __('The testing stage shows the time GitLab CI takes to run every pipeline for the related merge request. The data will automatically be added after your first pipeline finishes running.'),
-  review: __('The review stage shows the time from creating the merge request to merging it. The data will automatically be added after you merge your first merge request.'),
-  staging: __('The staging stage shows the time between merging the MR and deploying code to the production environment. The data will be automatically added once you deploy to production for the first time.'),
-  production: __('The production stage shows the total time it takes between creating an issue and deploying the code to production. The data will be automatically added once you have completed the full idea to production cycle.'),
+  issue: __(
+    'The issue stage shows the time it takes from creating an issue to assigning the issue to a milestone, or add the issue to a list on your Issue Board. Begin creating issues to see data for this stage.',
+  ),
+  plan: __(
+    'The planning stage shows the time from the previous step to pushing your first commit. This time will be added automatically once you push your first commit.',
+  ),
+  code: __(
+    'The coding stage shows the time from the first commit to creating the merge request. The data will automatically be added here once you create your first merge request.',
+  ),
+  test: __(
+    'The testing stage shows the time GitLab CI takes to run every pipeline for the related merge request. The data will automatically be added after your first pipeline finishes running.',
+  ),
+  review: __(
+    'The review stage shows the time from creating the merge request to merging it. The data will automatically be added after you merge your first merge request.',
+  ),
+  staging: __(
+    'The staging stage shows the time between merging the MR and deploying code to the production environment. The data will be automatically added once you deploy to production for the first time.',
+  ),
+  production: __(
+    'The production stage shows the total time it takes between creating an issue and deploying the code to production. The data will be automatically added once you have completed the full idea to production cycle.',
+  ),
 };
 
 export default {
@@ -31,11 +45,11 @@ export default {
     newData.stages = data.stats || [];
     newData.summary = data.summary || [];
 
-    newData.summary.forEach((item) => {
+    newData.summary.forEach(item => {
       item.value = item.value || '-';
     });
 
-    newData.stages.forEach((item) => {
+    newData.stages.forEach(item => {
       const stageSlug = dasherize(item.name.toLowerCase());
       item.active = false;
       item.isUserAllowed = data.permissions[stageSlug];
@@ -53,7 +67,7 @@ export default {
     this.state.hasError = state;
   },
   deactivateAllStages() {
-    this.state.stages.forEach((stage) => {
+    this.state.stages.forEach(stage => {
       stage.active = false;
     });
   },
@@ -67,7 +81,7 @@ export default {
   decorateEvents(events, stage) {
     const newEvents = [];
 
-    events.forEach((item) => {
+    events.forEach(item => {
       if (!item) return;
 
       const eventItem = Object.assign({}, DEFAULT_EVENT_OBJECTS[stage.slug], item);
-- 
cgit v1.2.1


From 4d0db16f9712f0adbe36b992c28f9d2ec20c301e Mon Sep 17 00:00:00 2001
From: Mike Greiling <mike@pixelcog.com>
Date: Wed, 10 Oct 2018 01:15:56 -0500
Subject: Prettify diff_notes diffs and droplab modules

---
 .../diff_notes/components/comment_resolve_btn.js   | 30 ++++++------
 .../diff_notes/components/diff_note_avatars.js     | 28 +++++++++---
 .../diff_notes/components/jump_to_discussion.js    | 35 +++++++-------
 .../diff_notes/components/resolve_count.js         | 10 ++--
 .../javascripts/diff_notes/mixins/discussion.js    | 10 ++--
 .../javascripts/diff_notes/models/discussion.js    | 18 ++++----
 .../javascripts/diff_notes/stores/comments.js      | 14 +++---
 .../javascripts/diffs/components/commit_item.vue   |  4 +-
 .../javascripts/diffs/components/diff_file.vue     |  8 ++--
 app/assets/javascripts/droplab/constants.js        |  9 +---
 app/assets/javascripts/droplab/drop_down.js        |  4 +-
 app/assets/javascripts/droplab/drop_lab.js         |  5 +-
 app/assets/javascripts/droplab/keyboard.js         | 53 +++++++++++++---------
 app/assets/javascripts/droplab/plugins/ajax.js     |  4 +-
 .../javascripts/droplab/plugins/ajax_filter.js     | 18 ++++----
 app/assets/javascripts/droplab/plugins/filter.js   | 39 ++++++++--------
 .../javascripts/droplab/plugins/input_setter.js    |  4 +-
 app/assets/javascripts/droplab/utils.js            | 15 ++++--
 18 files changed, 172 insertions(+), 136 deletions(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/diff_notes/components/comment_resolve_btn.js b/app/assets/javascripts/diff_notes/components/comment_resolve_btn.js
index 87621761500..4ae4ceabc21 100644
--- a/app/assets/javascripts/diff_notes/components/comment_resolve_btn.js
+++ b/app/assets/javascripts/diff_notes/components/comment_resolve_btn.js
@@ -18,52 +18,56 @@ const CommentAndResolveBtn = Vue.extend({
     };
   },
   computed: {
-    showButton: function () {
+    showButton: function() {
       if (this.discussion) {
         return this.discussion.isResolvable();
       } else {
         return false;
       }
     },
-    isDiscussionResolved: function () {
+    isDiscussionResolved: function() {
       return this.discussion.isResolved();
     },
-    buttonText: function () {
+    buttonText: function() {
       if (this.isDiscussionResolved) {
         if (this.textareaIsEmpty) {
-          return "Unresolve discussion";
+          return 'Unresolve discussion';
         } else {
-          return "Comment & unresolve discussion";
+          return 'Comment & unresolve discussion';
         }
       } else {
         if (this.textareaIsEmpty) {
-          return "Resolve discussion";
+          return 'Resolve discussion';
         } else {
-          return "Comment & resolve discussion";
+          return 'Comment & resolve discussion';
         }
       }
-    }
+    },
   },
   created() {
     if (this.discussionId) {
       this.discussion = CommentsStore.state[this.discussionId];
     }
   },
-  mounted: function () {
+  mounted: function() {
     if (!this.discussionId) return;
 
-    const $textarea = $(`.js-discussion-note-form[data-discussion-id=${this.discussionId}] .note-textarea`);
+    const $textarea = $(
+      `.js-discussion-note-form[data-discussion-id=${this.discussionId}] .note-textarea`,
+    );
     this.textareaIsEmpty = $textarea.val() === '';
 
     $textarea.on('input.comment-and-resolve-btn', () => {
       this.textareaIsEmpty = $textarea.val() === '';
     });
   },
-  destroyed: function () {
+  destroyed: function() {
     if (!this.discussionId) return;
 
-    $(`.js-discussion-note-form[data-discussion-id=${this.discussionId}] .note-textarea`).off('input.comment-and-resolve-btn');
-  }
+    $(`.js-discussion-note-form[data-discussion-id=${this.discussionId}] .note-textarea`).off(
+      'input.comment-and-resolve-btn',
+    );
+  },
 });
 
 Vue.component('comment-and-resolve-btn', CommentAndResolveBtn);
diff --git a/app/assets/javascripts/diff_notes/components/diff_note_avatars.js b/app/assets/javascripts/diff_notes/components/diff_note_avatars.js
index 5528d2a542b..5bdeaaade68 100644
--- a/app/assets/javascripts/diff_notes/components/diff_note_avatars.js
+++ b/app/assets/javascripts/diff_notes/components/diff_note_avatars.js
@@ -83,7 +83,11 @@ const DiffNoteAvatars = Vue.extend({
       this.addNoCommentClass();
       this.setDiscussionVisible();
 
-      this.lineType = $(this.$el).closest('.diff-line-num').hasClass('old_line') ? 'old' : 'new';
+      this.lineType = $(this.$el)
+        .closest('.diff-line-num')
+        .hasClass('old_line')
+        ? 'old'
+        : 'new';
     });
 
     $(document).on('toggle.comments', () => {
@@ -113,20 +117,30 @@ const DiffNoteAvatars = Vue.extend({
     addNoCommentClass() {
       const { notesCount } = this;
 
-      $(this.$el).closest('.js-avatar-container')
+      $(this.$el)
+        .closest('.js-avatar-container')
         .toggleClass('no-comment-btn', notesCount > 0)
         .nextUntil('.js-avatar-container')
         .toggleClass('no-comment-btn', notesCount > 0);
     },
     toggleDiscussionsToggleState() {
-      const $notesHolders = $(this.$el).closest('.code').find('.notes_holder');
+      const $notesHolders = $(this.$el)
+        .closest('.code')
+        .find('.notes_holder');
       const $visibleNotesHolders = $notesHolders.filter(':visible');
-      const $toggleDiffCommentsBtn = $(this.$el).closest('.diff-file').find('.js-toggle-diff-comments');
-
-      $toggleDiffCommentsBtn.toggleClass('active', $notesHolders.length === $visibleNotesHolders.length);
+      const $toggleDiffCommentsBtn = $(this.$el)
+        .closest('.diff-file')
+        .find('.js-toggle-diff-comments');
+
+      $toggleDiffCommentsBtn.toggleClass(
+        'active',
+        $notesHolders.length === $visibleNotesHolders.length,
+      );
     },
     setDiscussionVisible() {
-      this.isVisible = $(`.diffs .notes[data-discussion-id="${this.discussion.id}"]`).is(':visible');
+      this.isVisible = $(`.diffs .notes[data-discussion-id="${this.discussion.id}"]`).is(
+        ':visible',
+      );
     },
     getTooltipText(note) {
       return `${note.authorName}: ${note.noteTruncated}`;
diff --git a/app/assets/javascripts/diff_notes/components/jump_to_discussion.js b/app/assets/javascripts/diff_notes/components/jump_to_discussion.js
index 2b78bb58735..c0c21416275 100644
--- a/app/assets/javascripts/diff_notes/components/jump_to_discussion.js
+++ b/app/assets/javascripts/diff_notes/components/jump_to_discussion.js
@@ -14,24 +14,24 @@ const JumpToDiscussion = Vue.extend({
       required: true,
     },
   },
-  data: function () {
+  data: function() {
     return {
       discussions: CommentsStore.state,
       discussion: {},
     };
   },
   computed: {
-    buttonText: function () {
+    buttonText: function() {
       if (this.discussionId) {
         return 'Jump to next unresolved discussion';
       } else {
         return 'Jump to first unresolved discussion';
       }
     },
-    allResolved: function () {
+    allResolved: function() {
       return this.unresolvedDiscussionCount === 0;
     },
-    showButton: function () {
+    showButton: function() {
       if (this.discussionId) {
         if (this.unresolvedDiscussionCount > 1) {
           return true;
@@ -42,7 +42,7 @@ const JumpToDiscussion = Vue.extend({
         return this.unresolvedDiscussionCount >= 1;
       }
     },
-    lastResolvedId: function () {
+    lastResolvedId: function() {
       let lastId;
       for (const discussionId in this.discussions) {
         const discussion = this.discussions[discussionId];
@@ -52,13 +52,13 @@ const JumpToDiscussion = Vue.extend({
         }
       }
       return lastId;
-    }
+    },
   },
   created() {
     this.discussion = this.discussions[this.discussionId];
   },
   methods: {
-    jumpToNextUnresolvedDiscussion: function () {
+    jumpToNextUnresolvedDiscussion: function() {
       let discussionsSelector;
       let discussionIdsInScope;
       let firstUnresolvedDiscussionId;
@@ -68,9 +68,11 @@ const JumpToDiscussion = Vue.extend({
       let jumpToFirstDiscussion = !this.discussionId;
 
       const discussionIdsForElements = function(elements) {
-        return elements.map(function() {
-          return $(this).attr('data-discussion-id');
-        }).toArray();
+        return elements
+          .map(function() {
+            return $(this).attr('data-discussion-id');
+          })
+          .toArray();
       };
 
       const { discussions } = this;
@@ -144,8 +146,7 @@ const JumpToDiscussion = Vue.extend({
             if (!discussion.isResolved()) {
               nextUnresolvedDiscussionId = discussionId;
               break;
-            }
-            else {
+            } else {
               continue;
             }
           }
@@ -175,9 +176,9 @@ const JumpToDiscussion = Vue.extend({
         // Resolved discussions are hidden in the diffs tab by default.
         // If they are marked unresolved on the notes tab, they will still be hidden on the diffs tab.
         // When jumping between unresolved discussions on the diffs tab, we show them.
-        $target.closest(".content").show();
+        $target.closest('.content').show();
 
-        const $notesHolder = $target.closest("tr.notes_holder");
+        const $notesHolder = $target.closest('tr.notes_holder');
 
         // Image diff discussions does not use notes_holder
         // so we should keep original $target value in those cases
@@ -194,7 +195,7 @@ const JumpToDiscussion = Vue.extend({
           prevEl = $target.prev();
 
           // If the discussion doesn't have 4 lines above it, we'll have to do with fewer.
-          if (!prevEl.hasClass("line_holder")) {
+          if (!prevEl.hasClass('line_holder')) {
             break;
           }
 
@@ -203,9 +204,9 @@ const JumpToDiscussion = Vue.extend({
       }
 
       $.scrollTo($target, {
-        offset: -150
+        offset: -150,
       });
-    }
+    },
   },
 });
 
diff --git a/app/assets/javascripts/diff_notes/components/resolve_count.js b/app/assets/javascripts/diff_notes/components/resolve_count.js
index eb539c6b348..d8b056096f4 100644
--- a/app/assets/javascripts/diff_notes/components/resolve_count.js
+++ b/app/assets/javascripts/diff_notes/components/resolve_count.js
@@ -13,17 +13,17 @@ window.ResolveCount = Vue.extend({
       required: true,
     },
   },
-  data: function () {
+  data: function() {
     return {
-      discussions: CommentsStore.state
+      discussions: CommentsStore.state,
     };
   },
   computed: {
-    allResolved: function () {
+    allResolved: function() {
       return this.resolvedDiscussionCount === this.discussionCount;
     },
     resolvedCountText() {
       return this.discussionCount === 1 ? 'discussion' : 'discussions';
-    }
-  }
+    },
+  },
 });
diff --git a/app/assets/javascripts/diff_notes/mixins/discussion.js b/app/assets/javascripts/diff_notes/mixins/discussion.js
index 7589f9dd6e0..dea64dca132 100644
--- a/app/assets/javascripts/diff_notes/mixins/discussion.js
+++ b/app/assets/javascripts/diff_notes/mixins/discussion.js
@@ -2,10 +2,10 @@
 
 const DiscussionMixins = {
   computed: {
-    discussionCount: function () {
+    discussionCount: function() {
       return Object.keys(this.discussions).length;
     },
-    resolvedDiscussionCount: function () {
+    resolvedDiscussionCount: function() {
       let resolvedCount = 0;
 
       for (const discussionId in this.discussions) {
@@ -18,7 +18,7 @@ const DiscussionMixins = {
 
       return resolvedCount;
     },
-    unresolvedDiscussionCount: function () {
+    unresolvedDiscussionCount: function() {
       let unresolvedCount = 0;
 
       for (const discussionId in this.discussions) {
@@ -30,8 +30,8 @@ const DiscussionMixins = {
       }
 
       return unresolvedCount;
-    }
-  }
+    },
+  },
 };
 
 export default DiscussionMixins;
diff --git a/app/assets/javascripts/diff_notes/models/discussion.js b/app/assets/javascripts/diff_notes/models/discussion.js
index 787e6d8855f..daf61e5d467 100644
--- a/app/assets/javascripts/diff_notes/models/discussion.js
+++ b/app/assets/javascripts/diff_notes/models/discussion.js
@@ -6,22 +6,22 @@ import Vue from 'vue';
 import { localTimeAgo } from '../../lib/utils/datetime_utility';
 
 class DiscussionModel {
-  constructor (discussionId) {
+  constructor(discussionId) {
     this.id = discussionId;
     this.notes = {};
     this.loading = false;
     this.canResolve = false;
   }
 
-  createNote (noteObj) {
+  createNote(noteObj) {
     Vue.set(this.notes, noteObj.noteId, new NoteModel(this.id, noteObj));
   }
 
-  deleteNote (noteId) {
+  deleteNote(noteId) {
     Vue.delete(this.notes, noteId);
   }
 
-  getNote (noteId) {
+  getNote(noteId) {
     return this.notes[noteId];
   }
 
@@ -29,7 +29,7 @@ class DiscussionModel {
     return Object.keys(this.notes).length;
   }
 
-  isResolved () {
+  isResolved() {
     for (const noteId in this.notes) {
       const note = this.notes[noteId];
 
@@ -40,7 +40,7 @@ class DiscussionModel {
     return true;
   }
 
-  resolveAllNotes (resolved_by) {
+  resolveAllNotes(resolved_by) {
     for (const noteId in this.notes) {
       const note = this.notes[noteId];
 
@@ -51,7 +51,7 @@ class DiscussionModel {
     }
   }
 
-  unResolveAllNotes () {
+  unResolveAllNotes() {
     for (const noteId in this.notes) {
       const note = this.notes[noteId];
 
@@ -62,7 +62,7 @@ class DiscussionModel {
     }
   }
 
-  updateHeadline (data) {
+  updateHeadline(data) {
     const discussionSelector = `.discussion[data-discussion-id="${this.id}"]`;
     const $discussionHeadline = $(`${discussionSelector} .js-discussion-headline`);
 
@@ -79,7 +79,7 @@ class DiscussionModel {
     }
   }
 
-  isResolvable () {
+  isResolvable() {
     if (!this.canResolve) {
       return false;
     }
diff --git a/app/assets/javascripts/diff_notes/stores/comments.js b/app/assets/javascripts/diff_notes/stores/comments.js
index d012cd02d10..060bb044f78 100644
--- a/app/assets/javascripts/diff_notes/stores/comments.js
+++ b/app/assets/javascripts/diff_notes/stores/comments.js
@@ -5,10 +5,10 @@ import Vue from 'vue';
 
 window.CommentsStore = {
   state: {},
-  get: function (discussionId, noteId) {
+  get: function(discussionId, noteId) {
     return this.state[discussionId].getNote(noteId);
   },
-  createDiscussion: function (discussionId, canResolve) {
+  createDiscussion: function(discussionId, canResolve) {
     let discussion = this.state[discussionId];
     if (!this.state[discussionId]) {
       discussion = new DiscussionModel(discussionId);
@@ -21,18 +21,18 @@ window.CommentsStore = {
 
     return discussion;
   },
-  create: function (noteObj) {
+  create: function(noteObj) {
     const discussion = this.createDiscussion(noteObj.discussionId);
 
     discussion.createNote(noteObj);
   },
-  update: function (discussionId, noteId, resolved, resolved_by) {
+  update: function(discussionId, noteId, resolved, resolved_by) {
     const discussion = this.state[discussionId];
     const note = discussion.getNote(noteId);
     note.resolved = resolved;
     note.resolved_by = resolved_by;
   },
-  delete: function (discussionId, noteId) {
+  delete: function(discussionId, noteId) {
     const discussion = this.state[discussionId];
     discussion.deleteNote(noteId);
 
@@ -40,7 +40,7 @@ window.CommentsStore = {
       Vue.delete(this.state, discussionId);
     }
   },
-  unresolvedDiscussionIds: function () {
+  unresolvedDiscussionIds: function() {
     const ids = [];
 
     for (const discussionId in this.state) {
@@ -52,5 +52,5 @@ window.CommentsStore = {
     }
 
     return ids;
-  }
+  },
 };
diff --git a/app/assets/javascripts/diffs/components/commit_item.vue b/app/assets/javascripts/diffs/components/commit_item.vue
index 993206b2e73..23d0bad2ecb 100644
--- a/app/assets/javascripts/diffs/components/commit_item.vue
+++ b/app/assets/javascripts/diffs/components/commit_item.vue
@@ -43,7 +43,9 @@ export default {
       return (this.commit.author && this.commit.author.name) || this.commit.authorName;
     },
     authorUrl() {
-      return (this.commit.author && this.commit.author.webUrl) || `mailto:${this.commit.authorEmail}`;
+      return (
+        (this.commit.author && this.commit.author.webUrl) || `mailto:${this.commit.authorEmail}`
+      );
     },
     authorAvatar() {
       return (this.commit.author && this.commit.author.avatarUrl) || this.commit.authorGravatarUrl;
diff --git a/app/assets/javascripts/diffs/components/diff_file.vue b/app/assets/javascripts/diffs/components/diff_file.vue
index 4e04e50c52a..f72c7a84e5c 100644
--- a/app/assets/javascripts/diffs/components/diff_file.vue
+++ b/app/assets/javascripts/diffs/components/diff_file.vue
@@ -46,10 +46,10 @@ export default {
     showExpandMessage() {
       return (
         this.isCollapsed ||
-        !this.file.highlightedDiffLines &&
-        !this.isLoadingCollapsedDiff &&
-        !this.file.tooLarge &&
-        this.file.text
+        (!this.file.highlightedDiffLines &&
+          !this.isLoadingCollapsedDiff &&
+          !this.file.tooLarge &&
+          this.file.text)
       );
     },
     showLoadingIcon() {
diff --git a/app/assets/javascripts/droplab/constants.js b/app/assets/javascripts/droplab/constants.js
index 868d47e91b3..6451af49d36 100644
--- a/app/assets/javascripts/droplab/constants.js
+++ b/app/assets/javascripts/droplab/constants.js
@@ -6,11 +6,4 @@ const IGNORE_CLASS = 'droplab-item-ignore';
 // Matches `{{anything}}` and `{{ everything }}`.
 const TEMPLATE_REGEX = /\{\{(.+?)\}\}/g;
 
-export {
-  DATA_TRIGGER,
-  DATA_DROPDOWN,
-  SELECTED_CLASS,
-  ACTIVE_CLASS,
-  TEMPLATE_REGEX,
-  IGNORE_CLASS,
-};
+export { DATA_TRIGGER, DATA_DROPDOWN, SELECTED_CLASS, ACTIVE_CLASS, TEMPLATE_REGEX, IGNORE_CLASS };
diff --git a/app/assets/javascripts/droplab/drop_down.js b/app/assets/javascripts/droplab/drop_down.js
index 3cc316c3f3e..ccb3d56ed8c 100644
--- a/app/assets/javascripts/droplab/drop_down.js
+++ b/app/assets/javascripts/droplab/drop_down.js
@@ -2,7 +2,7 @@ import utils from './utils';
 import { SELECTED_CLASS, IGNORE_CLASS } from './constants';
 
 class DropDown {
-  constructor(list, config = { }) {
+  constructor(list, config = {}) {
     this.currentIndex = 0;
     this.hidden = true;
     this.list = typeof list === 'string' ? document.querySelector(list) : list;
@@ -157,7 +157,7 @@ class DropDown {
   static setImagesSrc(template) {
     const images = [...template.querySelectorAll('img[data-src]')];
 
-    images.forEach((image) => {
+    images.forEach(image => {
       const img = image;
 
       img.src = img.getAttribute('data-src');
diff --git a/app/assets/javascripts/droplab/drop_lab.js b/app/assets/javascripts/droplab/drop_lab.js
index 2a02ede72bf..1339e28d8b8 100644
--- a/app/assets/javascripts/droplab/drop_lab.js
+++ b/app/assets/javascripts/droplab/drop_lab.js
@@ -51,7 +51,7 @@ class DropLab {
   }
 
   processData(trigger, data, methodName) {
-    this.hooks.forEach((hook) => {
+    this.hooks.forEach(hook => {
       if (Array.isArray(trigger)) hook.list[methodName](trigger);
 
       if (hook.trigger.id === trigger) hook.list[methodName](data);
@@ -78,7 +78,8 @@ class DropLab {
   }
 
   changeHookList(trigger, list, plugins, config) {
-    const availableTrigger = typeof trigger === 'string' ? document.getElementById(trigger) : trigger;
+    const availableTrigger =
+      typeof trigger === 'string' ? document.getElementById(trigger) : trigger;
 
     this.hooks.forEach((hook, i) => {
       const aHook = hook;
diff --git a/app/assets/javascripts/droplab/keyboard.js b/app/assets/javascripts/droplab/keyboard.js
index 02f1b805ce4..40837ffdf8f 100644
--- a/app/assets/javascripts/droplab/keyboard.js
+++ b/app/assets/javascripts/droplab/keyboard.js
@@ -2,15 +2,18 @@
 
 import { ACTIVE_CLASS } from './constants';
 
-const Keyboard = function () {
+const Keyboard = function() {
   var currentKey;
   var currentFocus;
   var isUpArrow = false;
   var isDownArrow = false;
   var removeHighlight = function removeHighlight(list) {
-    var itemElements = Array.prototype.slice.call(list.list.querySelectorAll('li:not(.divider):not(.hidden)'), 0);
+    var itemElements = Array.prototype.slice.call(
+      list.list.querySelectorAll('li:not(.divider):not(.hidden)'),
+      0,
+    );
     var listItems = [];
-    for(var i = 0; i < itemElements.length; i++) {
+    for (var i = 0; i < itemElements.length; i++) {
       var listItem = itemElements[i];
       listItem.classList.remove(ACTIVE_CLASS);
 
@@ -23,13 +26,13 @@ const Keyboard = function () {
 
   var setMenuForArrows = function setMenuForArrows(list) {
     var listItems = removeHighlight(list);
-    if(list.currentIndex>0){
-      if(!listItems[list.currentIndex-1]){
-        list.currentIndex = list.currentIndex-1;
+    if (list.currentIndex > 0) {
+      if (!listItems[list.currentIndex - 1]) {
+        list.currentIndex = list.currentIndex - 1;
       }
 
-      if (listItems[list.currentIndex-1]) {
-        var el = listItems[list.currentIndex-1];
+      if (listItems[list.currentIndex - 1]) {
+        var el = listItems[list.currentIndex - 1];
         var filterDropdownEl = el.closest('.filter-dropdown');
         el.classList.add(ACTIVE_CLASS);
 
@@ -55,7 +58,7 @@ const Keyboard = function () {
   };
   var selectItem = function selectItem(list) {
     var listItems = removeHighlight(list);
-    var currentItem = listItems[list.currentIndex-1];
+    var currentItem = listItems[list.currentIndex - 1];
     var listEvent = new CustomEvent('click.dl', {
       detail: {
         list: list,
@@ -65,43 +68,49 @@ const Keyboard = function () {
     });
     list.list.dispatchEvent(listEvent);
     list.hide();
-  }
+  };
 
-  var keydown = function keydown(e){
+  var keydown = function keydown(e) {
     var typedOn = e.target;
     var list = e.detail.hook.list;
     var currentIndex = list.currentIndex;
     isUpArrow = false;
     isDownArrow = false;
 
-    if(e.detail.which){
+    if (e.detail.which) {
       currentKey = e.detail.which;
-      if(currentKey === 13){
+      if (currentKey === 13) {
         selectItem(e.detail.hook.list);
         return;
       }
-      if(currentKey === 38) {
+      if (currentKey === 38) {
         isUpArrow = true;
       }
-      if(currentKey === 40) {
+      if (currentKey === 40) {
         isDownArrow = true;
       }
-    } else if(e.detail.key) {
+    } else if (e.detail.key) {
       currentKey = e.detail.key;
-      if(currentKey === 'Enter'){
+      if (currentKey === 'Enter') {
         selectItem(e.detail.hook.list);
         return;
       }
-      if(currentKey === 'ArrowUp') {
+      if (currentKey === 'ArrowUp') {
         isUpArrow = true;
       }
-      if(currentKey === 'ArrowDown') {
+      if (currentKey === 'ArrowDown') {
         isDownArrow = true;
       }
     }
-    if(isUpArrow){ currentIndex--; }
-    if(isDownArrow){ currentIndex++; }
-    if(currentIndex < 0){ currentIndex = 0; }
+    if (isUpArrow) {
+      currentIndex--;
+    }
+    if (isDownArrow) {
+      currentIndex++;
+    }
+    if (currentIndex < 0) {
+      currentIndex = 0;
+    }
     list.currentIndex = currentIndex;
     setMenuForArrows(e.detail.hook.list);
   };
diff --git a/app/assets/javascripts/droplab/plugins/ajax.js b/app/assets/javascripts/droplab/plugins/ajax.js
index 267b53fa4f2..48b2a90c459 100644
--- a/app/assets/javascripts/droplab/plugins/ajax.js
+++ b/app/assets/javascripts/droplab/plugins/ajax.js
@@ -43,12 +43,12 @@ const Ajax = {
 
     return AjaxCache.retrieve(config.endpoint)
       .then(self.preprocessing.bind(null, config))
-      .then((data) => self._loadData(data, config, self))
+      .then(data => self._loadData(data, config, self))
       .catch(config.onError);
   },
   destroy: function() {
     this.destroyed = true;
-  }
+  },
 };
 
 export default Ajax;
diff --git a/app/assets/javascripts/droplab/plugins/ajax_filter.js b/app/assets/javascripts/droplab/plugins/ajax_filter.js
index 1db20227a16..66a52548417 100644
--- a/app/assets/javascripts/droplab/plugins/ajax_filter.js
+++ b/app/assets/javascripts/droplab/plugins/ajax_filter.js
@@ -41,8 +41,10 @@ const AjaxFilter = {
     if (config.searchValueFunction) {
       searchValue = config.searchValueFunction();
     }
-    if (config.loadingTemplate && this.hook.list.data === undefined ||
-      this.hook.list.data.length === 0) {
+    if (
+      (config.loadingTemplate && this.hook.list.data === undefined) ||
+      this.hook.list.data.length === 0
+    ) {
       var dynamicList = this.hook.list.list.querySelector('[data-dynamic]');
       var loadingTemplate = document.createElement('div');
       loadingTemplate.innerHTML = config.loadingTemplate;
@@ -61,7 +63,7 @@ const AjaxFilter = {
     params[config.searchKey] = searchValue;
     var url = config.endpoint + this.buildParams(params);
     return AjaxCache.retrieve(url)
-      .then((data) => {
+      .then(data => {
         this._loadData(data, config);
         if (config.onLoadingFinished) {
           config.onLoadingFinished(data);
@@ -72,8 +74,7 @@ const AjaxFilter = {
 
   _loadData(data, config) {
     const list = this.hook.list;
-    if (config.loadingTemplate && list.data === undefined ||
-      list.data.length === 0) {
+    if ((config.loadingTemplate && list.data === undefined) || list.data.length === 0) {
       const dataLoadingTemplate = list.list.querySelector('[data-loading-template]');
       if (dataLoadingTemplate) {
         dataLoadingTemplate.outerHTML = this.listTemplate;
@@ -81,7 +82,8 @@ const AjaxFilter = {
     }
     if (!this.destroyed) {
       var hookListChildren = list.list.children;
-      var onlyDynamicList = hookListChildren.length === 1 && hookListChildren[0].hasAttribute('data-dynamic');
+      var onlyDynamicList =
+        hookListChildren.length === 1 && hookListChildren[0].hasAttribute('data-dynamic');
       if (onlyDynamicList && data.length === 0) {
         list.hide();
       }
@@ -100,12 +102,12 @@ const AjaxFilter = {
   },
 
   destroy: function destroy() {
-    if (this.timeout)clearTimeout(this.timeout);
+    if (this.timeout) clearTimeout(this.timeout);
     this.destroyed = true;
 
     this.hook.trigger.removeEventListener('keydown.dl', this.eventWrapper.debounceTrigger);
     this.hook.trigger.removeEventListener('focus', this.eventWrapper.debounceTrigger);
-  }
+  },
 };
 
 export default AjaxFilter;
diff --git a/app/assets/javascripts/droplab/plugins/filter.js b/app/assets/javascripts/droplab/plugins/filter.js
index 404d707cf7a..6f1dc252d24 100644
--- a/app/assets/javascripts/droplab/plugins/filter.js
+++ b/app/assets/javascripts/droplab/plugins/filter.js
@@ -1,7 +1,7 @@
 /* eslint-disable */
 
 const Filter = {
-  keydown: function(e){
+  keydown: function(e) {
     if (this.destroyed) return;
 
     var hiddenCount = 0;
@@ -14,14 +14,14 @@ const Filter = {
     var matches = [];
     var filterFunction;
     // will only work on dynamically set data
-    if(!data){
+    if (!data) {
       return;
     }
 
     if (config && config.filterFunction && typeof config.filterFunction === 'function') {
       filterFunction = config.filterFunction;
     } else {
-      filterFunction = function(o){
+      filterFunction = function(o) {
         // cheap string search
         o.droplab_hidden = o[config.template].toLowerCase().indexOf(value) === -1;
         return o;
@@ -47,20 +47,23 @@ const Filter = {
   },
 
   debounceKeydown: function debounceKeydown(e) {
-    if ([
-      13, // enter
-      16, // shift
-      17, // ctrl
-      18, // alt
-      20, // caps lock
-      37, // left arrow
-      38, // up arrow
-      39, // right arrow
-      40, // down arrow
-      91, // left window
-      92, // right window
-      93, // select
-    ].indexOf(e.detail.which || e.detail.keyCode) > -1) return;
+    if (
+      [
+        13, // enter
+        16, // shift
+        17, // ctrl
+        18, // alt
+        20, // caps lock
+        37, // left arrow
+        38, // up arrow
+        39, // right arrow
+        40, // down arrow
+        91, // left window
+        92, // right window
+        93, // select
+      ].indexOf(e.detail.which || e.detail.keyCode) > -1
+    )
+      return;
 
     if (this.timeout) clearTimeout(this.timeout);
     this.timeout = setTimeout(this.keydown.bind(this, e), 200);
@@ -87,7 +90,7 @@ const Filter = {
 
     this.hook.trigger.removeEventListener('keydown.dl', this.eventWrapper.debounceKeydown);
     this.hook.trigger.removeEventListener('mousedown.dl', this.eventWrapper.debounceKeydown);
-  }
+  },
 };
 
 export default Filter;
diff --git a/app/assets/javascripts/droplab/plugins/input_setter.js b/app/assets/javascripts/droplab/plugins/input_setter.js
index d01fbc5830d..6cfc738a1e3 100644
--- a/app/assets/javascripts/droplab/plugins/input_setter.js
+++ b/app/assets/javascripts/droplab/plugins/input_setter.js
@@ -36,8 +36,8 @@ const InputSetter = {
     const inputAttribute = config.inputAttribute;
 
     if (input.hasAttribute(inputAttribute)) return input.setAttribute(inputAttribute, newValue);
-    if (input.tagName === 'INPUT') return input.value = newValue;
-    return input.textContent = newValue;
+    if (input.tagName === 'INPUT') return (input.value = newValue);
+    return (input.textContent = newValue);
   },
 
   destroy() {
diff --git a/app/assets/javascripts/droplab/utils.js b/app/assets/javascripts/droplab/utils.js
index bfe056a0fcc..5272778ce2d 100644
--- a/app/assets/javascripts/droplab/utils.js
+++ b/app/assets/javascripts/droplab/utils.js
@@ -5,7 +5,12 @@ import { DATA_TRIGGER, DATA_DROPDOWN, TEMPLATE_REGEX } from './constants';
 
 const utils = {
   toCamelCase(attr) {
-    return this.camelize(attr.split('-').slice(1).join(' '));
+    return this.camelize(
+      attr
+        .split('-')
+        .slice(1)
+        .join(' '),
+    );
   },
 
   template(templateString, data) {
@@ -17,9 +22,11 @@ const utils = {
   },
 
   camelize(str) {
-    return str.replace(/(?:^\w|[A-Z]|\b\w)/g, (letter, index) => {
-      return index === 0 ? letter.toLowerCase() : letter.toUpperCase();
-    }).replace(/\s+/g, '');
+    return str
+      .replace(/(?:^\w|[A-Z]|\b\w)/g, (letter, index) => {
+        return index === 0 ? letter.toLowerCase() : letter.toUpperCase();
+      })
+      .replace(/\s+/g, '');
   },
 
   closest(thisTag, stopTag) {
-- 
cgit v1.2.1


From 8b090caf82fedbb5b4ffa8169dfd8774c2416b2c Mon Sep 17 00:00:00 2001
From: Mike Greiling <mike@pixelcog.com>
Date: Wed, 10 Oct 2018 01:18:49 -0500
Subject: Prettify environments feature_highlight and filtered_search modules

---
 .../environments/components/container.vue          |  64 +++++-----
 .../environments/components/empty_state.vue        |  32 ++---
 .../components/environment_rollback.vue            |   4 +-
 .../folder/environments_folder_bundle.js           |  55 ++++-----
 .../folder/environments_folder_view.vue            |  71 ++++++-----
 app/assets/javascripts/environments/index.js       |  63 +++++-----
 .../environments/mixins/environments_mixin.js      |  20 ++--
 .../feature_highlight/feature_highlight.js         |  16 +--
 .../feature_highlight/feature_highlight_helper.js  |  18 ++-
 .../admin_runners_filtered_search_token_keys.js    |  33 +++---
 .../recent_searches_dropdown_content.vue           |   8 +-
 .../javascripts/filtered_search/dropdown_emoji.js  |  15 ++-
 .../javascripts/filtered_search/dropdown_hint.js   |  19 +--
 .../filtered_search/dropdown_non_user.js           |   8 +-
 .../javascripts/filtered_search/dropdown_utils.js  |  54 +++++----
 .../filtered_search/filtered_search_dropdown.js    |  12 +-
 .../filtered_search/filtered_search_token_keys.js  |  28 +++--
 .../filtered_search/filtered_search_tokenizer.js   |  63 +++++-----
 .../filtered_search_visual_tokens.js               | 125 ++++++++++---------
 .../issuable_filtered_search_token_keys.js         | 132 ++++++++++++---------
 .../filtered_search/recent_searches_root.js        |  11 +-
 .../stores/recent_searches_store.js                |  13 +-
 22 files changed, 459 insertions(+), 405 deletions(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/environments/components/container.vue b/app/assets/javascripts/environments/components/container.vue
index 9de851c9409..00d197d294f 100644
--- a/app/assets/javascripts/environments/components/container.vue
+++ b/app/assets/javascripts/environments/components/container.vue
@@ -1,40 +1,40 @@
 <script>
-  import tablePagination from '../../vue_shared/components/table_pagination.vue';
-  import environmentTable from '../components/environments_table.vue';
+import tablePagination from '../../vue_shared/components/table_pagination.vue';
+import environmentTable from '../components/environments_table.vue';
 
-  export default {
-    components: {
-      environmentTable,
-      tablePagination,
+export default {
+  components: {
+    environmentTable,
+    tablePagination,
+  },
+  props: {
+    isLoading: {
+      type: Boolean,
+      required: true,
     },
-    props: {
-      isLoading: {
-        type: Boolean,
-        required: true,
-      },
-      environments: {
-        type: Array,
-        required: true,
-      },
-      pagination: {
-        type: Object,
-        required: true,
-      },
-      canCreateDeployment: {
-        type: Boolean,
-        required: true,
-      },
-      canReadEnvironment: {
-        type: Boolean,
-        required: true,
-      },
+    environments: {
+      type: Array,
+      required: true,
     },
-    methods: {
-      onChangePage(page) {
-        this.$emit('onChangePage', page);
-      },
+    pagination: {
+      type: Object,
+      required: true,
     },
-  };
+    canCreateDeployment: {
+      type: Boolean,
+      required: true,
+    },
+    canReadEnvironment: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  methods: {
+    onChangePage(page) {
+      this.$emit('onChangePage', page);
+    },
+  },
+};
 </script>
 
 <template>
diff --git a/app/assets/javascripts/environments/components/empty_state.vue b/app/assets/javascripts/environments/components/empty_state.vue
index cf78f89981e..28d2dda9e43 100644
--- a/app/assets/javascripts/environments/components/empty_state.vue
+++ b/app/assets/javascripts/environments/components/empty_state.vue
@@ -1,21 +1,21 @@
 <script>
-  export default {
-    name: 'EnvironmentsEmptyState',
-    props: {
-      newPath: {
-        type: String,
-        required: true,
-      },
-      canCreateEnvironment: {
-        type: Boolean,
-        required: true,
-      },
-      helpPath: {
-        type: String,
-        required: true,
-      },
+export default {
+  name: 'EnvironmentsEmptyState',
+  props: {
+    newPath: {
+      type: String,
+      required: true,
     },
-  };
+    canCreateEnvironment: {
+      type: Boolean,
+      required: true,
+    },
+    helpPath: {
+      type: String,
+      required: true,
+    },
+  },
+};
 </script>
 <template>
   <div class="blank-state-row">
diff --git a/app/assets/javascripts/environments/components/environment_rollback.vue b/app/assets/javascripts/environments/components/environment_rollback.vue
index efbf88d0f11..9e137f79dcc 100644
--- a/app/assets/javascripts/environments/components/environment_rollback.vue
+++ b/app/assets/javascripts/environments/components/environment_rollback.vue
@@ -38,7 +38,9 @@ export default {
 
   computed: {
     title() {
-      return this.isLastDeployment ? s__('Environments|Re-deploy to environment') : s__('Environments|Rollback environment');
+      return this.isLastDeployment
+        ? s__('Environments|Re-deploy to environment')
+        : s__('Environments|Rollback environment');
     },
   },
 
diff --git a/app/assets/javascripts/environments/folder/environments_folder_bundle.js b/app/assets/javascripts/environments/folder/environments_folder_bundle.js
index de0fbdb2e91..f044d31c776 100644
--- a/app/assets/javascripts/environments/folder/environments_folder_bundle.js
+++ b/app/assets/javascripts/environments/folder/environments_folder_bundle.js
@@ -5,31 +5,32 @@ import Translate from '../../vue_shared/translate';
 
 Vue.use(Translate);
 
-export default () => new Vue({
-  el: '#environments-folder-list-view',
-  components: {
-    environmentsFolderApp,
-  },
-  data() {
-    const environmentsData = document.querySelector(this.$options.el).dataset;
+export default () =>
+  new Vue({
+    el: '#environments-folder-list-view',
+    components: {
+      environmentsFolderApp,
+    },
+    data() {
+      const environmentsData = document.querySelector(this.$options.el).dataset;
 
-    return {
-      endpoint: environmentsData.endpoint,
-      folderName: environmentsData.folderName,
-      cssContainerClass: environmentsData.cssClass,
-      canCreateDeployment: convertPermissionToBoolean(environmentsData.canCreateDeployment),
-      canReadEnvironment: convertPermissionToBoolean(environmentsData.canReadEnvironment),
-    };
-  },
-  render(createElement) {
-    return createElement('environments-folder-app', {
-      props: {
-        endpoint: this.endpoint,
-        folderName: this.folderName,
-        cssContainerClass: this.cssContainerClass,
-        canCreateDeployment: this.canCreateDeployment,
-        canReadEnvironment: this.canReadEnvironment,
-      },
-    });
-  },
-});
+      return {
+        endpoint: environmentsData.endpoint,
+        folderName: environmentsData.folderName,
+        cssContainerClass: environmentsData.cssClass,
+        canCreateDeployment: convertPermissionToBoolean(environmentsData.canCreateDeployment),
+        canReadEnvironment: convertPermissionToBoolean(environmentsData.canReadEnvironment),
+      };
+    },
+    render(createElement) {
+      return createElement('environments-folder-app', {
+        props: {
+          endpoint: this.endpoint,
+          folderName: this.folderName,
+          cssContainerClass: this.cssContainerClass,
+          canCreateDeployment: this.canCreateDeployment,
+          canReadEnvironment: this.canReadEnvironment,
+        },
+      });
+    },
+  });
diff --git a/app/assets/javascripts/environments/folder/environments_folder_view.vue b/app/assets/javascripts/environments/folder/environments_folder_view.vue
index e69bfa0b2cc..6be4845fe4c 100644
--- a/app/assets/javascripts/environments/folder/environments_folder_view.vue
+++ b/app/assets/javascripts/environments/folder/environments_folder_view.vue
@@ -1,46 +1,43 @@
 <script>
-  import environmentsMixin from '../mixins/environments_mixin';
-  import CIPaginationMixin from '../../vue_shared/mixins/ci_pagination_api_mixin';
-  import StopEnvironmentModal from '../components/stop_environment_modal.vue';
+import environmentsMixin from '../mixins/environments_mixin';
+import CIPaginationMixin from '../../vue_shared/mixins/ci_pagination_api_mixin';
+import StopEnvironmentModal from '../components/stop_environment_modal.vue';
 
-  export default {
-    components: {
-      StopEnvironmentModal,
-    },
+export default {
+  components: {
+    StopEnvironmentModal,
+  },
 
-    mixins: [
-      environmentsMixin,
-      CIPaginationMixin,
-    ],
+  mixins: [environmentsMixin, CIPaginationMixin],
 
-    props: {
-      endpoint: {
-        type: String,
-        required: true,
-      },
-      folderName: {
-        type: String,
-        required: true,
-      },
-      cssContainerClass: {
-        type: String,
-        required: true,
-      },
-      canCreateDeployment: {
-        type: Boolean,
-        required: true,
-      },
-      canReadEnvironment: {
-        type: Boolean,
-        required: true,
-      },
+  props: {
+    endpoint: {
+      type: String,
+      required: true,
+    },
+    folderName: {
+      type: String,
+      required: true,
+    },
+    cssContainerClass: {
+      type: String,
+      required: true,
+    },
+    canCreateDeployment: {
+      type: Boolean,
+      required: true,
+    },
+    canReadEnvironment: {
+      type: Boolean,
+      required: true,
     },
-    methods: {
-      successCallback(resp) {
-        this.saveData(resp);
-      },
+  },
+  methods: {
+    successCallback(resp) {
+      this.saveData(resp);
     },
-  };
+  },
+};
 </script>
 <template>
   <div :class="cssContainerClass">
diff --git a/app/assets/javascripts/environments/index.js b/app/assets/javascripts/environments/index.js
index afc4aba6554..5b6833fb15d 100644
--- a/app/assets/javascripts/environments/index.js
+++ b/app/assets/javascripts/environments/index.js
@@ -5,35 +5,36 @@ import Translate from '../vue_shared/translate';
 
 Vue.use(Translate);
 
-export default () => new Vue({
-  el: '#environments-list-view',
-  components: {
-    environmentsComponent,
-  },
-  data() {
-    const environmentsData = document.querySelector(this.$options.el).dataset;
+export default () =>
+  new Vue({
+    el: '#environments-list-view',
+    components: {
+      environmentsComponent,
+    },
+    data() {
+      const environmentsData = document.querySelector(this.$options.el).dataset;
 
-    return {
-      endpoint: environmentsData.environmentsDataEndpoint,
-      newEnvironmentPath: environmentsData.newEnvironmentPath,
-      helpPagePath: environmentsData.helpPagePath,
-      cssContainerClass: environmentsData.cssClass,
-      canCreateEnvironment: convertPermissionToBoolean(environmentsData.canCreateEnvironment),
-      canCreateDeployment: convertPermissionToBoolean(environmentsData.canCreateDeployment),
-      canReadEnvironment: convertPermissionToBoolean(environmentsData.canReadEnvironment),
-    };
-  },
-  render(createElement) {
-    return createElement('environments-component', {
-      props: {
-        endpoint: this.endpoint,
-        newEnvironmentPath: this.newEnvironmentPath,
-        helpPagePath: this.helpPagePath,
-        cssContainerClass: this.cssContainerClass,
-        canCreateEnvironment: this.canCreateEnvironment,
-        canCreateDeployment: this.canCreateDeployment,
-        canReadEnvironment: this.canReadEnvironment,
-      },
-    });
-  },
-});
+      return {
+        endpoint: environmentsData.environmentsDataEndpoint,
+        newEnvironmentPath: environmentsData.newEnvironmentPath,
+        helpPagePath: environmentsData.helpPagePath,
+        cssContainerClass: environmentsData.cssClass,
+        canCreateEnvironment: convertPermissionToBoolean(environmentsData.canCreateEnvironment),
+        canCreateDeployment: convertPermissionToBoolean(environmentsData.canCreateDeployment),
+        canReadEnvironment: convertPermissionToBoolean(environmentsData.canReadEnvironment),
+      };
+    },
+    render(createElement) {
+      return createElement('environments-component', {
+        props: {
+          endpoint: this.endpoint,
+          newEnvironmentPath: this.newEnvironmentPath,
+          helpPagePath: this.helpPagePath,
+          cssContainerClass: this.cssContainerClass,
+          canCreateEnvironment: this.canCreateEnvironment,
+          canCreateDeployment: this.canCreateDeployment,
+          canReadEnvironment: this.canReadEnvironment,
+        },
+      });
+    },
+  });
diff --git a/app/assets/javascripts/environments/mixins/environments_mixin.js b/app/assets/javascripts/environments/mixins/environments_mixin.js
index d71964612c5..96dc1f07cb9 100644
--- a/app/assets/javascripts/environments/mixins/environments_mixin.js
+++ b/app/assets/javascripts/environments/mixins/environments_mixin.js
@@ -4,9 +4,7 @@
 import _ from 'underscore';
 import Visibility from 'visibilityjs';
 import Poll from '../../lib/utils/poll';
-import {
-  getParameterByName,
-} from '../../lib/utils/common_utils';
+import { getParameterByName } from '../../lib/utils/common_utils';
 import { s__ } from '../../locale';
 import Flash from '../../flash';
 import eventHub from '../event_hub';
@@ -19,7 +17,6 @@ import tabs from '../../vue_shared/components/navigation_tabs.vue';
 import container from '../components/container.vue';
 
 export default {
-
   components: {
     environmentTable,
     container,
@@ -65,7 +62,8 @@ export default {
     updateContent(parameters) {
       this.updateInternalState(parameters);
       // fetch new data
-      return this.service.fetchEnvironments(this.requestData)
+      return this.service
+        .fetchEnvironments(this.requestData)
         .then(response => this.successCallback(response))
         .then(() => {
           // restart polling
@@ -88,7 +86,8 @@ export default {
       if (!this.isMakingRequest) {
         this.isLoading = true;
 
-        this.service.postAction(endpoint)
+        this.service
+          .postAction(endpoint)
           .then(() => this.fetchEnvironments())
           .catch(() => {
             this.isLoading = false;
@@ -100,7 +99,8 @@ export default {
     fetchEnvironments() {
       this.isLoading = true;
 
-      return this.service.fetchEnvironments(this.requestData)
+      return this.service
+        .fetchEnvironments(this.requestData)
         .then(this.successCallback)
         .catch(this.errorCallback);
     },
@@ -111,7 +111,9 @@ export default {
 
     stopEnvironment(environment) {
       const endpoint = environment.stop_path;
-      const errorMessage = s__('Environments|An error occurred while stopping the environment, please try again');
+      const errorMessage = s__(
+        'Environments|An error occurred while stopping the environment, please try again',
+      );
       this.postAction({ endpoint, errorMessage });
     },
   },
@@ -149,7 +151,7 @@ export default {
       data: this.requestData,
       successCallback: this.successCallback,
       errorCallback: this.errorCallback,
-      notificationCallback: (isMakingRequest) => {
+      notificationCallback: isMakingRequest => {
         this.isMakingRequest = isMakingRequest;
       },
     });
diff --git a/app/assets/javascripts/feature_highlight/feature_highlight.js b/app/assets/javascripts/feature_highlight/feature_highlight.js
index 03dfa942d69..173fe7c69de 100644
--- a/app/assets/javascripts/feature_highlight/feature_highlight.js
+++ b/app/assets/javascripts/feature_highlight/feature_highlight.js
@@ -1,13 +1,6 @@
 import $ from 'jquery';
-import {
-  getSelector,
-  inserted,
-} from './feature_highlight_helper';
-import {
-  togglePopover,
-  mouseenter,
-  debouncedMouseleave,
-} from '../shared/popover';
+import { getSelector, inserted } from './feature_highlight_helper';
+import { togglePopover, mouseenter, debouncedMouseleave } from '../shared/popover';
 
 export function setupFeatureHighlightPopover(id, debounceTimeout = 300) {
   const $selector = $(getSelector(id));
@@ -41,8 +34,9 @@ export function setupFeatureHighlightPopover(id, debounceTimeout = 300) {
 export function findHighestPriorityFeature() {
   let priorityFeature;
 
-  const sortedFeatureEls = [].slice.call(document.querySelectorAll('.js-feature-highlight')).sort((a, b) =>
-    (a.dataset.highlightPriority || 0) < (b.dataset.highlightPriority || 0));
+  const sortedFeatureEls = [].slice
+    .call(document.querySelectorAll('.js-feature-highlight'))
+    .sort((a, b) => (a.dataset.highlightPriority || 0) < (b.dataset.highlightPriority || 0));
 
   const [priorityFeatureEl] = sortedFeatureEls;
   if (priorityFeatureEl) {
diff --git a/app/assets/javascripts/feature_highlight/feature_highlight_helper.js b/app/assets/javascripts/feature_highlight/feature_highlight_helper.js
index d5b97ebb264..fd9433b625c 100644
--- a/app/assets/javascripts/feature_highlight/feature_highlight_helper.js
+++ b/app/assets/javascripts/feature_highlight/feature_highlight_helper.js
@@ -8,10 +8,17 @@ import { togglePopover } from '../shared/popover';
 export const getSelector = highlightId => `.js-feature-highlight[data-highlight=${highlightId}]`;
 
 export function dismiss(highlightId) {
-  axios.post(this.attr('data-dismiss-endpoint'), {
-    feature_name: highlightId,
-  })
-    .catch(() => Flash(__('An error occurred while dismissing the feature highlight. Refresh the page and try dismissing again.')));
+  axios
+    .post(this.attr('data-dismiss-endpoint'), {
+      feature_name: highlightId,
+    })
+    .catch(() =>
+      Flash(
+        __(
+          'An error occurred while dismissing the feature highlight. Refresh the page and try dismissing again.',
+        ),
+      ),
+    );
 
   togglePopover.call(this, false);
   this.hide();
@@ -23,8 +30,7 @@ export function inserted() {
   const $popover = $(this);
   const dismissWrapper = dismiss.bind($popover, highlightId);
 
-  $(`#${popoverId} .dismiss-feature-highlight`)
-    .on('click', dismissWrapper);
+  $(`#${popoverId} .dismiss-feature-highlight`).on('click', dismissWrapper);
 
   const lazyImg = $(`#${popoverId} .feature-highlight-illustration`)[0];
   if (lazyImg) {
diff --git a/app/assets/javascripts/filtered_search/admin_runners_filtered_search_token_keys.js b/app/assets/javascripts/filtered_search/admin_runners_filtered_search_token_keys.js
index d7aa4ce597f..934375023ba 100644
--- a/app/assets/javascripts/filtered_search/admin_runners_filtered_search_token_keys.js
+++ b/app/assets/javascripts/filtered_search/admin_runners_filtered_search_token_keys.js
@@ -1,20 +1,23 @@
 import FilteredSearchTokenKeys from './filtered_search_token_keys';
 
-const tokenKeys = [{
-  key: 'status',
-  type: 'string',
-  param: 'status',
-  symbol: '',
-  icon: 'messages',
-  tag: 'status',
-}, {
-  key: 'type',
-  type: 'string',
-  param: 'type',
-  symbol: '',
-  icon: 'cube',
-  tag: 'type',
-}];
+const tokenKeys = [
+  {
+    key: 'status',
+    type: 'string',
+    param: 'status',
+    symbol: '',
+    icon: 'messages',
+    tag: 'status',
+  },
+  {
+    key: 'type',
+    type: 'string',
+    param: 'type',
+    symbol: '',
+    icon: 'cube',
+    tag: 'type',
+  },
+];
 
 const AdminRunnersFilteredSearchTokenKeys = new FilteredSearchTokenKeys(tokenKeys);
 
diff --git a/app/assets/javascripts/filtered_search/components/recent_searches_dropdown_content.vue b/app/assets/javascripts/filtered_search/components/recent_searches_dropdown_content.vue
index 21b5ccdb613..b9bc5e6ed7f 100644
--- a/app/assets/javascripts/filtered_search/components/recent_searches_dropdown_content.vue
+++ b/app/assets/javascripts/filtered_search/components/recent_searches_dropdown_content.vue
@@ -21,9 +21,11 @@ export default {
   },
   computed: {
     processedItems() {
-      return this.items.map((item) => {
-        const { tokens, searchToken }
-          = FilteredSearchTokenizer.processTokens(item, this.allowedKeys);
+      return this.items.map(item => {
+        const { tokens, searchToken } = FilteredSearchTokenizer.processTokens(
+          item,
+          this.allowedKeys,
+        );
 
         const resultantTokens = tokens.map(token => ({
           prefix: `${token.key}:`,
diff --git a/app/assets/javascripts/filtered_search/dropdown_emoji.js b/app/assets/javascripts/filtered_search/dropdown_emoji.js
index 5ddd0e5e690..af7936a92fb 100644
--- a/app/assets/javascripts/filtered_search/dropdown_emoji.js
+++ b/app/assets/javascripts/filtered_search/dropdown_emoji.js
@@ -24,8 +24,12 @@ export default class DropdownEmoji extends FilteredSearchDropdown {
     };
 
     import(/* webpackChunkName: 'emoji' */ '~/emoji')
-      .then(({ glEmojiTag }) => { this.glEmojiTag = glEmojiTag; })
-      .catch(() => { /* ignore error and leave emoji name in the search bar */ });
+      .then(({ glEmojiTag }) => {
+        this.glEmojiTag = glEmojiTag;
+      })
+      .catch(() => {
+        /* ignore error and leave emoji name in the search bar */
+      });
 
     this.unbindEvents();
     this.bindEvents();
@@ -48,7 +52,7 @@ export default class DropdownEmoji extends FilteredSearchDropdown {
   }
 
   itemClicked(e) {
-    super.itemClicked(e, (selected) => {
+    super.itemClicked(e, selected => {
       const name = selected.querySelector('.js-data-value').innerText.trim();
       return DropdownUtils.getEscapedText(name);
     });
@@ -64,7 +68,7 @@ export default class DropdownEmoji extends FilteredSearchDropdown {
 
     // Replace empty gl-emoji tag to real content
     const dropdownItems = [...this.dropdown.querySelectorAll('.filter-dropdown-item')];
-    dropdownItems.forEach((dropdownItem) => {
+    dropdownItems.forEach(dropdownItem => {
       const name = dropdownItem.querySelector('.js-data-value').innerText;
       const emojiTag = this.glEmojiTag(name);
       const emojiElement = dropdownItem.querySelector('gl-emoji');
@@ -73,7 +77,6 @@ export default class DropdownEmoji extends FilteredSearchDropdown {
   }
 
   init() {
-    this.droplab
-      .addHook(this.input, this.dropdown, [Ajax, Filter], this.config).init();
+    this.droplab.addHook(this.input, this.dropdown, [Ajax, Filter], this.config).init();
   }
 }
diff --git a/app/assets/javascripts/filtered_search/dropdown_hint.js b/app/assets/javascripts/filtered_search/dropdown_hint.js
index c568f4e4ebf..1a1135ae929 100644
--- a/app/assets/javascripts/filtered_search/dropdown_hint.js
+++ b/app/assets/javascripts/filtered_search/dropdown_hint.js
@@ -41,8 +41,10 @@ export default class DropdownHint extends FilteredSearchDropdown {
           previousInputValues.forEach((value, index) => {
             searchTerms.push(value);
 
-            if (index === previousInputValues.length - 1
-              && token.indexOf(value.toLowerCase()) !== -1) {
+            if (
+              index === previousInputValues.length - 1 &&
+              token.indexOf(value.toLowerCase()) !== -1
+            ) {
               searchTerms.pop();
             }
           });
@@ -64,13 +66,12 @@ export default class DropdownHint extends FilteredSearchDropdown {
   }
 
   renderContent() {
-    const dropdownData = this.tokenKeys.get()
-      .map(tokenKey => ({
-        icon: `${gon.sprite_icons}#${tokenKey.icon}`,
-        hint: tokenKey.key,
-        tag: `:${tokenKey.tag}`,
-        type: tokenKey.type,
-      }));
+    const dropdownData = this.tokenKeys.get().map(tokenKey => ({
+      icon: `${gon.sprite_icons}#${tokenKey.icon}`,
+      hint: tokenKey.key,
+      tag: `:${tokenKey.tag}`,
+      type: tokenKey.type,
+    }));
 
     this.droplab.changeHookList(this.hookId, this.dropdown, [Filter], this.config);
     this.droplab.setData(this.hookId, dropdownData);
diff --git a/app/assets/javascripts/filtered_search/dropdown_non_user.js b/app/assets/javascripts/filtered_search/dropdown_non_user.js
index 2ffda7e2037..0264f934914 100644
--- a/app/assets/javascripts/filtered_search/dropdown_non_user.js
+++ b/app/assets/javascripts/filtered_search/dropdown_non_user.js
@@ -29,20 +29,18 @@ export default class DropdownNonUser extends FilteredSearchDropdown {
   }
 
   itemClicked(e) {
-    super.itemClicked(e, (selected) => {
+    super.itemClicked(e, selected => {
       const title = selected.querySelector('.js-data-value').innerText.trim();
       return `${this.symbol}${DropdownUtils.getEscapedText(title)}`;
     });
   }
 
   renderContent(forceShowList = false) {
-    this.droplab
-      .changeHookList(this.hookId, this.dropdown, [Ajax, Filter], this.config);
+    this.droplab.changeHookList(this.hookId, this.dropdown, [Ajax, Filter], this.config);
     super.renderContent(forceShowList);
   }
 
   init() {
-    this.droplab
-      .addHook(this.input, this.dropdown, [Ajax, Filter], this.config).init();
+    this.droplab.addHook(this.input, this.dropdown, [Ajax, Filter], this.config).init();
   }
 }
diff --git a/app/assets/javascripts/filtered_search/dropdown_utils.js b/app/assets/javascripts/filtered_search/dropdown_utils.js
index 6da6ca10008..1b79a3320c6 100644
--- a/app/assets/javascripts/filtered_search/dropdown_utils.js
+++ b/app/assets/javascripts/filtered_search/dropdown_utils.js
@@ -41,7 +41,7 @@ export default class DropdownUtils {
 
     // Removes the first character if it is a quotation so that we can search
     // with multiple words
-    if ((value[0] === '"' || value[0] === '\'') && title.indexOf(' ') !== -1) {
+    if ((value[0] === '"' || value[0] === "'") && title.indexOf(' ') !== -1) {
       value = value.slice(1);
     }
 
@@ -82,11 +82,13 @@ export default class DropdownUtils {
     // Reduce the colors to 4
     colors.length = Math.min(colors.length, 4);
 
-    const color = colors.map((c, i) => {
-      const percentFirst = Math.floor(spacing * i);
-      const percentSecond = Math.floor(spacing * (i + 1));
-      return `${c} ${percentFirst}%, ${c} ${percentSecond}%`;
-    }).join(', ');
+    const color = colors
+      .map((c, i) => {
+        const percentFirst = Math.floor(spacing * i);
+        const percentSecond = Math.floor(spacing * (i + 1));
+        return `${c} ${percentFirst}%, ${c} ${percentSecond}%`;
+      })
+      .join(', ');
 
     return `linear-gradient(${color})`;
   }
@@ -97,17 +99,16 @@ export default class DropdownUtils {
 
     data.forEach(DropdownUtils.mergeDuplicateLabels.bind(null, dataMap));
 
-    Object.keys(dataMap)
-      .forEach((key) => {
-        const label = dataMap[key];
+    Object.keys(dataMap).forEach(key => {
+      const label = dataMap[key];
 
-        if (label.multipleColors) {
-          label.color = DropdownUtils.duplicateLabelColor(label.multipleColors);
-          label.text_color = '#000000';
-        }
+      if (label.multipleColors) {
+        label.color = DropdownUtils.duplicateLabelColor(label.multipleColors);
+        label.text_color = '#000000';
+      }
 
-        results.push(label);
-      });
+      results.push(label);
+    });
 
     results.preprocessed = true;
 
@@ -118,8 +119,7 @@ export default class DropdownUtils {
     const { input, allowedKeys } = config;
     const updatedItem = item;
     const searchInput = DropdownUtils.getSearchQuery(input);
-    const { lastToken, tokens } =
-      FilteredSearchTokenizer.processTokens(searchInput, allowedKeys);
+    const { lastToken, tokens } = FilteredSearchTokenizer.processTokens(searchInput, allowedKeys);
     const lastKey = lastToken.key || lastToken || '';
     const allowMultiple = item.type === 'array';
     const itemInExistingTokens = tokens.some(t => t.key === item.hint);
@@ -154,7 +154,10 @@ export default class DropdownUtils {
 
   static getVisualTokenValues(visualToken) {
     const tokenName = visualToken && visualToken.querySelector('.name').textContent.trim();
-    let tokenValue = visualToken && visualToken.querySelector('.value') && visualToken.querySelector('.value').textContent.trim();
+    let tokenValue =
+      visualToken &&
+      visualToken.querySelector('.value') &&
+      visualToken.querySelector('.value').textContent.trim();
     if (tokenName === 'label' && tokenValue) {
       // remove leading symbol and wrapping quotes
       tokenValue = tokenValue.replace(/^~("|')?(.*)/, '$2').replace(/("|')$/, '');
@@ -174,7 +177,7 @@ export default class DropdownUtils {
       tokens.splice(inputIndex + 1);
     }
 
-    tokens.forEach((token) => {
+    tokens.forEach(token => {
       if (token.classList.contains('js-visual-token')) {
         const name = token.querySelector('.name');
         const value = token.querySelector('.value');
@@ -194,8 +197,9 @@ export default class DropdownUtils {
           values.push(name.innerText);
         }
       } else if (token.classList.contains('input-token')) {
-        const { isLastVisualTokenValid } =
-          FilteredSearchVisualTokens.getLastVisualTokenBeforeInput();
+        const {
+          isLastVisualTokenValid,
+        } = FilteredSearchVisualTokens.getLastVisualTokenBeforeInput();
 
         const input = FilteredSearchContainer.container.querySelector('.filtered-search');
         const inputValue = input && input.value;
@@ -209,9 +213,7 @@ export default class DropdownUtils {
       }
     });
 
-    return values
-      .map(value => value.trim())
-      .join(' ');
+    return values.map(value => value.trim()).join(' ');
   }
 
   static getSearchInput(filteredSearchInput) {
@@ -227,7 +229,9 @@ export default class DropdownUtils {
     // Replace all spaces inside quote marks with underscores
     // (will continue to match entire string until an end quote is found if any)
     // This helps with matching the beginning & end of a token:key
-    inputValue = inputValue.replace(/(('[^']*'{0,1})|("[^"]*"{0,1})|:\s+)/g, str => str.replace(/\s/g, '_'));
+    inputValue = inputValue.replace(/(('[^']*'{0,1})|("[^"]*"{0,1})|:\s+)/g, str =>
+      str.replace(/\s/g, '_'),
+    );
 
     // Get the right position for the word selected
     // Regex matches first space
diff --git a/app/assets/javascripts/filtered_search/filtered_search_dropdown.js b/app/assets/javascripts/filtered_search/filtered_search_dropdown.js
index fb4ae1d17dd..4eb67ff7649 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_dropdown.js
+++ b/app/assets/javascripts/filtered_search/filtered_search_dropdown.js
@@ -87,10 +87,12 @@ export default class FilteredSearchDropdown {
   dispatchInputEvent() {
     // Propogate input change to FilteredSearchDropdownManager
     // so that it can determine which dropdowns to open
-    this.input.dispatchEvent(new CustomEvent('input', {
-      bubbles: true,
-      cancelable: true,
-    }));
+    this.input.dispatchEvent(
+      new CustomEvent('input', {
+        bubbles: true,
+        cancelable: true,
+      }),
+    );
   }
 
   dispatchFormSubmitEvent() {
@@ -114,7 +116,7 @@ export default class FilteredSearchDropdown {
 
       if (!data) return;
 
-      const results = data.map((o) => {
+      const results = data.map(o => {
         const updated = o;
         updated.droplab_hidden = false;
         return updated;
diff --git a/app/assets/javascripts/filtered_search/filtered_search_token_keys.js b/app/assets/javascripts/filtered_search/filtered_search_token_keys.js
index a09ad3e4758..e01dedbb57c 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_token_keys.js
+++ b/app/assets/javascripts/filtered_search/filtered_search_token_keys.js
@@ -42,19 +42,21 @@ export default class FilteredSearchTokenKeys {
   }
 
   searchByKeyParam(keyParam) {
-    return this.tokenKeysWithAlternative.find((tokenKey) => {
-      let tokenKeyParam = tokenKey.key;
+    return (
+      this.tokenKeysWithAlternative.find(tokenKey => {
+        let tokenKeyParam = tokenKey.key;
 
-      // Replace hyphen with underscore to compare keyParam with tokenKeyParam
-      // e.g. 'my-reaction' => 'my_reaction'
-      tokenKeyParam = tokenKeyParam.replace('-', '_');
+        // Replace hyphen with underscore to compare keyParam with tokenKeyParam
+        // e.g. 'my-reaction' => 'my_reaction'
+        tokenKeyParam = tokenKeyParam.replace('-', '_');
 
-      if (tokenKey.param) {
-        tokenKeyParam += `_${tokenKey.param}`;
-      }
+        if (tokenKey.param) {
+          tokenKeyParam += `_${tokenKey.param}`;
+        }
 
-      return keyParam === tokenKeyParam;
-    }) || null;
+        return keyParam === tokenKeyParam;
+      }) || null
+    );
   }
 
   searchByConditionUrl(url) {
@@ -62,8 +64,10 @@ export default class FilteredSearchTokenKeys {
   }
 
   searchByConditionKeyValue(key, value) {
-    return this.conditions
-      .find(condition => condition.tokenKey === key && condition.value === value) || null;
+    return (
+      this.conditions.find(condition => condition.tokenKey === key && condition.value === value) ||
+      null
+    );
   }
 
   addExtraTokensForMergeRequests() {
diff --git a/app/assets/javascripts/filtered_search/filtered_search_tokenizer.js b/app/assets/javascripts/filtered_search/filtered_search_tokenizer.js
index d75610f6d68..b5c4cb15aac 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_tokenizer.js
+++ b/app/assets/javascripts/filtered_search/filtered_search_tokenizer.js
@@ -4,41 +4,48 @@ export default class FilteredSearchTokenizer {
   static processTokens(input, allowedKeys) {
     // Regex extracts `(token):(symbol)(value)`
     // Values that start with a double quote must end in a double quote (same for single)
-    const tokenRegex = new RegExp(`(${allowedKeys.join('|')}):([~%@]?)(?:('[^']*'{0,1})|("[^"]*"{0,1})|(\\S+))`, 'g');
+    const tokenRegex = new RegExp(
+      `(${allowedKeys.join('|')}):([~%@]?)(?:('[^']*'{0,1})|("[^"]*"{0,1})|(\\S+))`,
+      'g',
+    );
     const tokens = [];
     const tokenIndexes = []; // stores key+value for simple search
     let lastToken = null;
-    const searchToken = input.replace(tokenRegex, (match, key, symbol, v1, v2, v3) => {
-      let tokenValue = v1 || v2 || v3;
-      let tokenSymbol = symbol;
-      let tokenIndex = '';
-
-      if (tokenValue === '~' || tokenValue === '%' || tokenValue === '@') {
-        tokenSymbol = tokenValue;
-        tokenValue = '';
-      }
-
-      tokenIndex = `${key}:${tokenValue}`;
-
-      // Prevent adding duplicates
-      if (tokenIndexes.indexOf(tokenIndex) === -1) {
-        tokenIndexes.push(tokenIndex);
-
-        tokens.push({
-          key,
-          value: tokenValue || '',
-          symbol: tokenSymbol || '',
-        });
-      }
-
-      return '';
-    }).replace(/\s{2,}/g, ' ').trim() || '';
+    const searchToken =
+      input
+        .replace(tokenRegex, (match, key, symbol, v1, v2, v3) => {
+          let tokenValue = v1 || v2 || v3;
+          let tokenSymbol = symbol;
+          let tokenIndex = '';
+
+          if (tokenValue === '~' || tokenValue === '%' || tokenValue === '@') {
+            tokenSymbol = tokenValue;
+            tokenValue = '';
+          }
+
+          tokenIndex = `${key}:${tokenValue}`;
+
+          // Prevent adding duplicates
+          if (tokenIndexes.indexOf(tokenIndex) === -1) {
+            tokenIndexes.push(tokenIndex);
+
+            tokens.push({
+              key,
+              value: tokenValue || '',
+              symbol: tokenSymbol || '',
+            });
+          }
+
+          return '';
+        })
+        .replace(/\s{2,}/g, ' ')
+        .trim() || '';
 
     if (tokens.length > 0) {
       const last = tokens[tokens.length - 1];
       const lastString = `${last.key}:${last.symbol}${last.value}`;
-      lastToken = input.lastIndexOf(lastString) ===
-        input.length - lastString.length ? last : searchToken;
+      lastToken =
+        input.lastIndexOf(lastString) === input.length - lastString.length ? last : searchToken;
     } else {
       lastToken = searchToken;
     }
diff --git a/app/assets/javascripts/filtered_search/filtered_search_visual_tokens.js b/app/assets/javascripts/filtered_search/filtered_search_visual_tokens.js
index 0854c1822fb..c23d4c484a5 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_visual_tokens.js
+++ b/app/assets/javascripts/filtered_search/filtered_search_visual_tokens.js
@@ -13,7 +13,10 @@ export default class FilteredSearchVisualTokens {
 
     return {
       lastVisualToken,
-      isLastVisualTokenValid: lastVisualToken === null || lastVisualToken.className.indexOf('filtered-search-term') !== -1 || (lastVisualToken && lastVisualToken.querySelector('.value') !== null),
+      isLastVisualTokenValid:
+        lastVisualToken === null ||
+        lastVisualToken.className.indexOf('filtered-search-term') !== -1 ||
+        (lastVisualToken && lastVisualToken.querySelector('.value') !== null),
     };
   }
 
@@ -33,7 +36,9 @@ export default class FilteredSearchVisualTokens {
   }
 
   static unselectTokens() {
-    const otherTokens = FilteredSearchContainer.container.querySelectorAll('.js-visual-token .selectable.selected');
+    const otherTokens = FilteredSearchContainer.container.querySelectorAll(
+      '.js-visual-token .selectable.selected',
+    );
     [].forEach.call(otherTokens, t => t.classList.remove('selected'));
   }
 
@@ -56,11 +61,7 @@ export default class FilteredSearchVisualTokens {
   }
 
   static createVisualTokenElementHTML(options = {}) {
-    const {
-      canEdit = true,
-      uppercaseTokenName = false,
-      capitalizeTokenValue = false,
-    } = options;
+    const { canEdit = true, uppercaseTokenName = false, capitalizeTokenValue = false } = options;
 
     return `
       <div class="${canEdit ? 'selectable' : 'hidden'}" role="button">
@@ -115,15 +116,20 @@ export default class FilteredSearchVisualTokens {
 
     return AjaxCache.retrieve(labelsEndpoint)
       .then(FilteredSearchVisualTokens.preprocessLabel.bind(null, labelsEndpoint))
-      .then((labels) => {
-        const matchingLabel = (labels || []).find(label => `~${DropdownUtils.getEscapedText(label.title)}` === tokenValue);
+      .then(labels => {
+        const matchingLabel = (labels || []).find(
+          label => `~${DropdownUtils.getEscapedText(label.title)}` === tokenValue,
+        );
 
         if (!matchingLabel) {
           return;
         }
 
-        FilteredSearchVisualTokens
-          .setTokenStyle(tokenValueContainer, matchingLabel.color, matchingLabel.text_color);
+        FilteredSearchVisualTokens.setTokenStyle(
+          tokenValueContainer,
+          matchingLabel.color,
+          matchingLabel.text_color,
+        );
       })
       .catch(() => new Flash('An error occurred while fetching label colors.'));
   }
@@ -134,39 +140,43 @@ export default class FilteredSearchVisualTokens {
     }
 
     const username = tokenValue.replace(/^@/, '');
-    return UsersCache.retrieve(username)
-      .then((user) => {
-        if (!user) {
-          return;
-        }
-
-        /* eslint-disable no-param-reassign */
-        tokenValueContainer.dataset.originalValue = tokenValue;
-        tokenValueElement.innerHTML = `
+    return (
+      UsersCache.retrieve(username)
+        .then(user => {
+          if (!user) {
+            return;
+          }
+
+          /* eslint-disable no-param-reassign */
+          tokenValueContainer.dataset.originalValue = tokenValue;
+          tokenValueElement.innerHTML = `
           <img class="avatar s20" src="${user.avatar_url}" alt="">
           ${_.escape(user.name)}
         `;
-        /* eslint-enable no-param-reassign */
-      })
-      // ignore error and leave username in the search bar
-      .catch(() => { });
+          /* eslint-enable no-param-reassign */
+        })
+        // ignore error and leave username in the search bar
+        .catch(() => {})
+    );
   }
 
   static updateEmojiTokenAppearance(tokenValueContainer, tokenValueElement, tokenValue) {
     const container = tokenValueContainer;
     const element = tokenValueElement;
 
-    return import(/* webpackChunkName: 'emoji' */ '../emoji')
-      .then((Emoji) => {
-        if (!Emoji.isEmojiNameValid(tokenValue)) {
-          return;
-        }
-
-        container.dataset.originalValue = tokenValue;
-        element.innerHTML = Emoji.glEmojiTag(tokenValue);
-      })
-      // ignore error and leave emoji name in the search bar
-      .catch(() => { });
+    return (
+      import(/* webpackChunkName: 'emoji' */ '../emoji')
+        .then(Emoji => {
+          if (!Emoji.isEmojiNameValid(tokenValue)) {
+            return;
+          }
+
+          container.dataset.originalValue = tokenValue;
+          element.innerHTML = Emoji.glEmojiTag(tokenValue);
+        })
+        // ignore error and leave emoji name in the search bar
+        .catch(() => {})
+    );
   }
 
   static renderVisualTokenValue(parentElement, tokenName, tokenValue) {
@@ -177,24 +187,23 @@ export default class FilteredSearchVisualTokens {
     const tokenType = tokenName.toLowerCase();
     if (tokenType === 'label') {
       FilteredSearchVisualTokens.updateLabelTokenColor(tokenValueContainer, tokenValue);
-    } else if ((tokenType === 'author') || (tokenType === 'assignee')) {
+    } else if (tokenType === 'author' || tokenType === 'assignee') {
       FilteredSearchVisualTokens.updateUserTokenAppearance(
-        tokenValueContainer, tokenValueElement, tokenValue,
+        tokenValueContainer,
+        tokenValueElement,
+        tokenValue,
       );
     } else if (tokenType === 'my-reaction') {
       FilteredSearchVisualTokens.updateEmojiTokenAppearance(
-        tokenValueContainer, tokenValueElement, tokenValue,
+        tokenValueContainer,
+        tokenValueElement,
+        tokenValue,
       );
     }
   }
 
   static addVisualTokenElement(name, value, options = {}) {
-    const {
-      isSearchTerm = false,
-      canEdit,
-      uppercaseTokenName,
-      capitalizeTokenValue,
-    } = options;
+    const { isSearchTerm = false, canEdit, uppercaseTokenName, capitalizeTokenValue } = options;
     const li = document.createElement('li');
     li.classList.add('js-visual-token');
     li.classList.add(isSearchTerm ? 'filtered-search-term' : 'filtered-search-token');
@@ -217,8 +226,10 @@ export default class FilteredSearchVisualTokens {
   }
 
   static addValueToPreviousVisualTokenElement(value) {
-    const { lastVisualToken, isLastVisualTokenValid } =
-      FilteredSearchVisualTokens.getLastVisualTokenBeforeInput();
+    const {
+      lastVisualToken,
+      isLastVisualTokenValid,
+    } = FilteredSearchVisualTokens.getLastVisualTokenBeforeInput();
 
     if (!isLastVisualTokenValid && lastVisualToken.classList.contains('filtered-search-token')) {
       const name = FilteredSearchVisualTokens.getLastTokenPartial();
@@ -228,13 +239,15 @@ export default class FilteredSearchVisualTokens {
     }
   }
 
-  static addFilterVisualToken(tokenName, tokenValue, {
-    canEdit,
-    uppercaseTokenName = false,
-    capitalizeTokenValue = false,
-  } = {}) {
-    const { lastVisualToken, isLastVisualTokenValid }
-      = FilteredSearchVisualTokens.getLastVisualTokenBeforeInput();
+  static addFilterVisualToken(
+    tokenName,
+    tokenValue,
+    { canEdit, uppercaseTokenName = false, capitalizeTokenValue = false } = {},
+  ) {
+    const {
+      lastVisualToken,
+      isLastVisualTokenValid,
+    } = FilteredSearchVisualTokens.getLastVisualTokenBeforeInput();
     const { addVisualTokenElement } = FilteredSearchVisualTokens;
 
     if (isLastVisualTokenValid) {
@@ -308,8 +321,7 @@ export default class FilteredSearchVisualTokens {
 
   static tokenizeInput() {
     const input = FilteredSearchContainer.container.querySelector('.filtered-search');
-    const { isLastVisualTokenValid } =
-      FilteredSearchVisualTokens.getLastVisualTokenBeforeInput();
+    const { isLastVisualTokenValid } = FilteredSearchVisualTokens.getLastVisualTokenBeforeInput();
 
     if (input.value) {
       if (isLastVisualTokenValid) {
@@ -375,8 +387,7 @@ export default class FilteredSearchVisualTokens {
     FilteredSearchVisualTokens.tokenizeInput();
 
     if (!tokenContainer.lastElementChild.isEqualNode(inputLi)) {
-      const { isLastVisualTokenValid } =
-        FilteredSearchVisualTokens.getLastVisualTokenBeforeInput();
+      const { isLastVisualTokenValid } = FilteredSearchVisualTokens.getLastVisualTokenBeforeInput();
 
       if (!isLastVisualTokenValid) {
         const lastPartial = FilteredSearchVisualTokens.getLastTokenPartial();
diff --git a/app/assets/javascripts/filtered_search/issuable_filtered_search_token_keys.js b/app/assets/javascripts/filtered_search/issuable_filtered_search_token_keys.js
index cc7291c9f59..c4f0c41d3a8 100644
--- a/app/assets/javascripts/filtered_search/issuable_filtered_search_token_keys.js
+++ b/app/assets/javascripts/filtered_search/issuable_filtered_search_token_keys.js
@@ -1,34 +1,39 @@
 import FilteredSearchTokenKeys from './filtered_search_token_keys';
 
-export const tokenKeys = [{
-  key: 'author',
-  type: 'string',
-  param: 'username',
-  symbol: '@',
-  icon: 'pencil',
-  tag: '@author',
-}, {
-  key: 'assignee',
-  type: 'string',
-  param: 'username',
-  symbol: '@',
-  icon: 'user',
-  tag: '@assignee',
-}, {
-  key: 'milestone',
-  type: 'string',
-  param: 'title',
-  symbol: '%',
-  icon: 'clock',
-  tag: '%milestone',
-}, {
-  key: 'label',
-  type: 'array',
-  param: 'name[]',
-  symbol: '~',
-  icon: 'labels',
-  tag: '~label',
-}];
+export const tokenKeys = [
+  {
+    key: 'author',
+    type: 'string',
+    param: 'username',
+    symbol: '@',
+    icon: 'pencil',
+    tag: '@author',
+  },
+  {
+    key: 'assignee',
+    type: 'string',
+    param: 'username',
+    symbol: '@',
+    icon: 'user',
+    tag: '@assignee',
+  },
+  {
+    key: 'milestone',
+    type: 'string',
+    param: 'title',
+    symbol: '%',
+    icon: 'clock',
+    tag: '%milestone',
+  },
+  {
+    key: 'label',
+    type: 'array',
+    param: 'name[]',
+    symbol: '~',
+    icon: 'labels',
+    tag: '~label',
+  },
+];
 
 if (gon.current_user_id) {
   // Appending tokenkeys only logged-in
@@ -42,36 +47,47 @@ if (gon.current_user_id) {
   });
 }
 
-export const alternativeTokenKeys = [{
-  key: 'label',
-  type: 'string',
-  param: 'name',
-  symbol: '~',
-}];
+export const alternativeTokenKeys = [
+  {
+    key: 'label',
+    type: 'string',
+    param: 'name',
+    symbol: '~',
+  },
+];
 
-export const conditions = [{
-  url: 'assignee_id=0',
-  tokenKey: 'assignee',
-  value: 'none',
-}, {
-  url: 'milestone_title=No+Milestone',
-  tokenKey: 'milestone',
-  value: 'none',
-}, {
-  url: 'milestone_title=%23upcoming',
-  tokenKey: 'milestone',
-  value: 'upcoming',
-}, {
-  url: 'milestone_title=%23started',
-  tokenKey: 'milestone',
-  value: 'started',
-}, {
-  url: 'label_name[]=No+Label',
-  tokenKey: 'label',
-  value: 'none',
-}];
+export const conditions = [
+  {
+    url: 'assignee_id=0',
+    tokenKey: 'assignee',
+    value: 'none',
+  },
+  {
+    url: 'milestone_title=No+Milestone',
+    tokenKey: 'milestone',
+    value: 'none',
+  },
+  {
+    url: 'milestone_title=%23upcoming',
+    tokenKey: 'milestone',
+    value: 'upcoming',
+  },
+  {
+    url: 'milestone_title=%23started',
+    tokenKey: 'milestone',
+    value: 'started',
+  },
+  {
+    url: 'label_name[]=No+Label',
+    tokenKey: 'label',
+    value: 'none',
+  },
+];
 
-const IssuableFilteredSearchTokenKeys =
-  new FilteredSearchTokenKeys(tokenKeys, alternativeTokenKeys, conditions);
+const IssuableFilteredSearchTokenKeys = new FilteredSearchTokenKeys(
+  tokenKeys,
+  alternativeTokenKeys,
+  conditions,
+);
 
 export default IssuableFilteredSearchTokenKeys;
diff --git a/app/assets/javascripts/filtered_search/recent_searches_root.js b/app/assets/javascripts/filtered_search/recent_searches_root.js
index c1efa9c86f4..6c8e77a7fe5 100644
--- a/app/assets/javascripts/filtered_search/recent_searches_root.js
+++ b/app/assets/javascripts/filtered_search/recent_searches_root.js
@@ -3,11 +3,7 @@ import RecentSearchesDropdownContent from './components/recent_searches_dropdown
 import eventHub from './event_hub';
 
 class RecentSearchesRoot {
-  constructor(
-    recentSearchesStore,
-    recentSearchesService,
-    wrapperElement,
-  ) {
+  constructor(recentSearchesStore, recentSearchesService, wrapperElement) {
     this.store = recentSearchesStore;
     this.service = recentSearchesService;
     this.wrapperElement = wrapperElement;
@@ -35,7 +31,9 @@ class RecentSearchesRoot {
       components: {
         RecentSearchesDropdownContent,
       },
-      data() { return state; },
+      data() {
+        return state;
+      },
       template: `
         <recent-searches-dropdown-content
           :items="recentSearches"
@@ -57,7 +55,6 @@ class RecentSearchesRoot {
       this.vm.$destroy();
     }
   }
-
 }
 
 export default RecentSearchesRoot;
diff --git a/app/assets/javascripts/filtered_search/stores/recent_searches_store.js b/app/assets/javascripts/filtered_search/stores/recent_searches_store.js
index aaa0c349d93..76d40bfdaf8 100644
--- a/app/assets/javascripts/filtered_search/stores/recent_searches_store.js
+++ b/app/assets/javascripts/filtered_search/stores/recent_searches_store.js
@@ -2,11 +2,14 @@ import _ from 'underscore';
 
 class RecentSearchesStore {
   constructor(initialState = {}, allowedKeys) {
-    this.state = Object.assign({
-      isLocalStorageAvailable: true,
-      recentSearches: [],
-      allowedKeys,
-    }, initialState);
+    this.state = Object.assign(
+      {
+        isLocalStorageAvailable: true,
+        recentSearches: [],
+        allowedKeys,
+      },
+      initialState,
+    );
   }
 
   addRecentSearch(newSearch) {
-- 
cgit v1.2.1


From c559bcca03a83db3e6ce66d4ae3cd98f8b9d1cb0 Mon Sep 17 00:00:00 2001
From: Mike Greiling <mike@pixelcog.com>
Date: Wed, 10 Oct 2018 02:13:34 -0500
Subject: Prettify additional modules (I through Z)

---
 app/assets/javascripts/issuable_index.js           |    9 +-
 app/assets/javascripts/issue.js                    |   73 +-
 app/assets/javascripts/job.js                      |   28 +-
 app/assets/javascripts/label_manager.js            |   14 +-
 app/assets/javascripts/labels.js                   |    2 +-
 app/assets/javascripts/layout_nav.js               |   60 +-
 app/assets/javascripts/line_highlighter.js         |   28 +-
 app/assets/javascripts/locale/sprintf.js           |    2 +-
 app/assets/javascripts/member_expiration_date.js   |    8 +-
 app/assets/javascripts/merge_request.js            |   23 +-
 app/assets/javascripts/milestone.js                |   34 +-
 .../javascripts/mini_pipeline_graph_dropdown.js    |   17 +-
 app/assets/javascripts/namespace_select.js         |    8 +-
 app/assets/javascripts/network/branch_graph.js     |  162 +--
 app/assets/javascripts/network/raphael.js          |    2 +-
 app/assets/javascripts/new_branch_form.js          |   14 +-
 app/assets/javascripts/new_commit_form.js          |    4 +-
 app/assets/javascripts/notifications_dropdown.js   |    4 +-
 app/assets/javascripts/notifications_form.js       |   10 +-
 app/assets/javascripts/pager.js                    |   33 +-
 app/assets/javascripts/pdf/index.vue               |  103 +-
 app/assets/javascripts/pdf/page/index.vue          |  103 +-
 .../pipelines/components/pipelines_table_row.vue   |    5 +-
 app/assets/javascripts/project_find_file.js        |   95 +-
 app/assets/javascripts/project_import.js           |    1 -
 .../javascripts/project_label_subscription.js      |   43 +-
 app/assets/javascripts/project_select.js           |   49 +-
 .../javascripts/project_select_combo_button.js     |   27 +-
 app/assets/javascripts/project_visibility.js       |    5 +-
 .../prometheus_metrics/prometheus_metrics.js       |   36 +-
 app/assets/javascripts/raven/raven_config.js       |    2 +-
 app/assets/javascripts/ref_select_dropdown.js      |    5 +-
 app/assets/javascripts/settings_panels.js          |   11 +-
 app/assets/javascripts/single_file_diff.js         |   34 +-
 app/assets/javascripts/smart_interval.js           |   20 +-
 app/assets/javascripts/star.js                     |    8 +-
 app/assets/javascripts/task_list.js                |    9 +-
 .../templates/issuable_template_selector.js        |   18 +-
 app/assets/javascripts/terminal/terminal.js        |   12 +-
 app/assets/javascripts/test_utils/simulate_drag.js |   56 +-
 .../javascripts/test_utils/simulate_input.js       |    2 +-
 app/assets/javascripts/toggle_buttons.js           |    2 +-
 app/assets/javascripts/tree.js                     |   18 +-
 app/assets/javascripts/u2f/authenticate.js         |   14 +-
 app/assets/javascripts/u2f/register.js             |   13 +-
 app/assets/javascripts/u2f/util.js                 |    5 +-
 app/assets/javascripts/ui_development_kit.js       |   18 +-
 app/assets/javascripts/usage_ping_consent.js       |    5 +-
 app/assets/javascripts/users_select.js             | 1095 ++++++++++----------
 app/assets/javascripts/zen_mode.js                 |   32 +-
 50 files changed, 1330 insertions(+), 1051 deletions(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/issuable_index.js b/app/assets/javascripts/issuable_index.js
index 06ec4546164..ffcbd7cf28c 100644
--- a/app/assets/javascripts/issuable_index.js
+++ b/app/assets/javascripts/issuable_index.js
@@ -26,14 +26,17 @@ export default class IssuableIndex {
   static resetIncomingEmailToken() {
     const $resetToken = $('.incoming-email-token-reset');
 
-    $resetToken.on('click', (e) => {
+    $resetToken.on('click', e => {
       e.preventDefault();
 
       $resetToken.text('resetting...');
 
-      axios.put($resetToken.attr('href'))
+      axios
+        .put($resetToken.attr('href'))
         .then(({ data }) => {
-          $('#issuable_email').val(data.new_address).focus();
+          $('#issuable_email')
+            .val(data.new_address)
+            .focus();
 
           $resetToken.text('reset it');
         })
diff --git a/app/assets/javascripts/issue.js b/app/assets/javascripts/issue.js
index 4b4e9aa48ab..94b78907d9a 100644
--- a/app/assets/javascripts/issue.js
+++ b/app/assets/javascripts/issue.js
@@ -28,7 +28,7 @@ export default class Issue {
     }
 
     // Listen to state changes in the Vue app
-    document.addEventListener('issuable_vue_app:change', (event) => {
+    document.addEventListener('issuable_vue_app:change', event => {
       this.updateTopState(event.detail.isClosed, event.detail.data);
     });
   }
@@ -55,7 +55,13 @@ export default class Issue {
       $(document).trigger('issuable:change', isClosed);
       this.toggleCloseReopenButton(isClosed);
 
-      let numProjectIssues = Number(projectIssuesCounter.first().text().trim().replace(/[^\d]/, ''));
+      let numProjectIssues = Number(
+        projectIssuesCounter
+          .first()
+          .text()
+          .trim()
+          .replace(/[^\d]/, ''),
+      );
       numProjectIssues = isClosed ? numProjectIssues - 1 : numProjectIssues + 1;
       projectIssuesCounter.text(addDelimiter(numProjectIssues));
 
@@ -76,29 +82,34 @@ export default class Issue {
   initIssueBtnEventListeners() {
     const issueFailMessage = 'Unable to update this issue at this time.';
 
-    return $(document).on('click', '.js-issuable-actions a.btn-close, .js-issuable-actions a.btn-reopen', (e) => {
-      var $button, shouldSubmit, url;
-      e.preventDefault();
-      e.stopImmediatePropagation();
-      $button = $(e.currentTarget);
-      shouldSubmit = $button.hasClass('btn-comment');
-      if (shouldSubmit) {
-        Issue.submitNoteForm($button.closest('form'));
-      }
-
-      this.disableCloseReopenButton($button);
+    return $(document).on(
+      'click',
+      '.js-issuable-actions a.btn-close, .js-issuable-actions a.btn-reopen',
+      e => {
+        var $button, shouldSubmit, url;
+        e.preventDefault();
+        e.stopImmediatePropagation();
+        $button = $(e.currentTarget);
+        shouldSubmit = $button.hasClass('btn-comment');
+        if (shouldSubmit) {
+          Issue.submitNoteForm($button.closest('form'));
+        }
 
-      url = $button.attr('href');
-      return axios.put(url)
-      .then(({ data }) => {
-        const isClosed = $button.hasClass('btn-close');
-        this.updateTopState(isClosed, data);
-      })
-      .catch(() => flash(issueFailMessage))
-      .then(() => {
-        this.disableCloseReopenButton($button, false);
-      });
-    });
+        this.disableCloseReopenButton($button);
+
+        url = $button.attr('href');
+        return axios
+          .put(url)
+          .then(({ data }) => {
+            const isClosed = $button.hasClass('btn-close');
+            this.updateTopState(isClosed, data);
+          })
+          .catch(() => flash(issueFailMessage))
+          .then(() => {
+            this.disableCloseReopenButton($button, false);
+          });
+      },
+    );
   }
 
   initCloseReopenReport() {
@@ -124,7 +135,7 @@ export default class Issue {
 
   static submitNoteForm(form) {
     var noteText;
-    noteText = form.find("textarea.js-note-text").val();
+    noteText = form.find('textarea.js-note-text').val();
     if (noteText && noteText.trim().length > 0) {
       return form.submit();
     }
@@ -133,22 +144,26 @@ export default class Issue {
   static initMergeRequests() {
     var $container;
     $container = $('#merge-requests');
-    return axios.get($container.data('url'))
+    return axios
+      .get($container.data('url'))
       .then(({ data }) => {
         if ('html' in data) {
           $container.html(data.html);
         }
-      }).catch(() => flash('Failed to load referenced merge requests'));
+      })
+      .catch(() => flash('Failed to load referenced merge requests'));
   }
 
   static initRelatedBranches() {
     var $container;
     $container = $('#related-branches');
-    return axios.get($container.data('url'))
+    return axios
+      .get($container.data('url'))
       .then(({ data }) => {
         if ('html' in data) {
           $container.html(data.html);
         }
-      }).catch(() => flash('Failed to load related branches'));
+      })
+      .catch(() => flash('Failed to load related branches'));
   }
 }
diff --git a/app/assets/javascripts/job.js b/app/assets/javascripts/job.js
index 854445bd2a4..80ba43dca6f 100644
--- a/app/assets/javascripts/job.js
+++ b/app/assets/javascripts/job.js
@@ -42,16 +42,14 @@ export default class Job extends LogOutputBehaviours {
 
     this.scrollThrottled = _.throttle(this.toggleScroll.bind(this), 100);
 
-    this.$window
-      .off('scroll')
-      .on('scroll', () => {
-        if (!isScrolledToBottom()) {
-          this.toggleScrollAnimation(false);
-        } else if (isScrolledToBottom() && !this.isLogComplete) {
-          this.toggleScrollAnimation(true);
-        }
-        this.scrollThrottled();
-      });
+    this.$window.off('scroll').on('scroll', () => {
+      if (!isScrolledToBottom()) {
+        this.toggleScrollAnimation(false);
+      } else if (isScrolledToBottom() && !this.isLogComplete) {
+        this.toggleScrollAnimation(true);
+      }
+      this.scrollThrottled();
+    });
 
     this.$window
       .off('resize.build')
@@ -87,10 +85,11 @@ export default class Job extends LogOutputBehaviours {
   }
 
   getBuildTrace() {
-    return axios.get(`${this.pagePath}/trace.json`, {
-      params: { state: this.state },
-    })
-      .then((res) => {
+    return axios
+      .get(`${this.pagePath}/trace.json`, {
+        params: { state: this.state },
+      })
+      .then(res => {
         const log = res.data;
 
         if (!this.fetchingStatusFavicon) {
@@ -186,5 +185,4 @@ export default class Job extends LogOutputBehaviours {
   sidebarOnClick() {
     if (this.shouldHideSidebarForViewport()) this.toggleSidebar();
   }
-
 }
diff --git a/app/assets/javascripts/label_manager.js b/app/assets/javascripts/label_manager.js
index 2c995c5902f..062501d1d04 100644
--- a/app/assets/javascripts/label_manager.js
+++ b/app/assets/javascripts/label_manager.js
@@ -47,7 +47,10 @@ export default class LabelManager {
   }
 
   toggleEmptyState($label, $btn, action) {
-    this.emptyState.classList.toggle('hidden', !!this.prioritizedLabels[0].querySelector(':scope > li'));
+    this.emptyState.classList.toggle(
+      'hidden',
+      !!this.prioritizedLabels[0].querySelector(':scope > li'),
+    );
   }
 
   toggleLabelPriority($label, action, persistState) {
@@ -80,16 +83,14 @@ export default class LabelManager {
       return;
     }
     if (action === 'remove') {
-      axios.delete(url)
-        .catch(rollbackLabelPosition);
+      axios.delete(url).catch(rollbackLabelPosition);
 
       // Restore empty message
       if (!$from.find('li').length) {
         $from.find('.empty-message').removeClass('hidden');
       }
     } else {
-      this.savePrioritySort($label, action)
-        .catch(rollbackLabelPosition);
+      this.savePrioritySort($label, action).catch(rollbackLabelPosition);
     }
   }
 
@@ -102,8 +103,7 @@ export default class LabelManager {
   }
 
   onPrioritySortUpdate() {
-    this.savePrioritySort()
-      .catch(() => flash(this.errorMessage));
+    this.savePrioritySort().catch(() => flash(this.errorMessage));
   }
 
   savePrioritySort() {
diff --git a/app/assets/javascripts/labels.js b/app/assets/javascripts/labels.js
index d85ae851706..2bc09237495 100644
--- a/app/assets/javascripts/labels.js
+++ b/app/assets/javascripts/labels.js
@@ -22,7 +22,7 @@ export default class Labels {
   updateColorPreview() {
     const previewColor = $('input#label_color').val();
     return $('div.label-color-preview').css('background-color', previewColor);
-  // Updates the the preview color with the hex-color input
+    // Updates the the preview color with the hex-color input
   }
 
   // Updates the preview color with a click on a suggested color
diff --git a/app/assets/javascripts/layout_nav.js b/app/assets/javascripts/layout_nav.js
index e3177188772..b8c3c237eb3 100644
--- a/app/assets/javascripts/layout_nav.js
+++ b/app/assets/javascripts/layout_nav.js
@@ -5,7 +5,9 @@ import initFlyOutNav from './fly_out_nav';
 function hideEndFade($scrollingTabs) {
   $scrollingTabs.each(function scrollTabsLoop() {
     const $this = $(this);
-    $this.siblings('.fade-right').toggleClass('scrolling', Math.round($this.width()) < $this.prop('scrollWidth'));
+    $this
+      .siblings('.fade-right')
+      .toggleClass('scrolling', Math.round($this.width()) < $this.prop('scrollWidth'));
   });
 }
 
@@ -15,38 +17,42 @@ export default function initLayoutNav() {
 
   initFlyOutNav();
 
-  $(document).on('init.scrolling-tabs', () => {
-    const $scrollingTabs = $('.scrolling-tabs').not('.is-initialized');
-    $scrollingTabs.addClass('is-initialized');
+  $(document)
+    .on('init.scrolling-tabs', () => {
+      const $scrollingTabs = $('.scrolling-tabs').not('.is-initialized');
+      $scrollingTabs.addClass('is-initialized');
 
-    $(window).on('resize.nav', () => {
-      hideEndFade($scrollingTabs);
-    }).trigger('resize.nav');
+      $(window)
+        .on('resize.nav', () => {
+          hideEndFade($scrollingTabs);
+        })
+        .trigger('resize.nav');
 
-    $scrollingTabs.on('scroll', function tabsScrollEvent() {
-      const $this = $(this);
-      const currentPosition = $this.scrollLeft();
-      const maxPosition = $this.prop('scrollWidth') - $this.outerWidth();
+      $scrollingTabs.on('scroll', function tabsScrollEvent() {
+        const $this = $(this);
+        const currentPosition = $this.scrollLeft();
+        const maxPosition = $this.prop('scrollWidth') - $this.outerWidth();
 
-      $this.siblings('.fade-left').toggleClass('scrolling', currentPosition > 0);
-      $this.siblings('.fade-right').toggleClass('scrolling', currentPosition < maxPosition - 1);
-    });
+        $this.siblings('.fade-left').toggleClass('scrolling', currentPosition > 0);
+        $this.siblings('.fade-right').toggleClass('scrolling', currentPosition < maxPosition - 1);
+      });
 
-    $scrollingTabs.each(function scrollTabsEachLoop() {
-      const $this = $(this);
-      const scrollingTabWidth = $this.width();
-      const $active = $this.find('.active');
-      const activeWidth = $active.width();
+      $scrollingTabs.each(function scrollTabsEachLoop() {
+        const $this = $(this);
+        const scrollingTabWidth = $this.width();
+        const $active = $this.find('.active');
+        const activeWidth = $active.width();
 
-      if ($active.length) {
-        const offset = $active.offset().left + activeWidth;
+        if ($active.length) {
+          const offset = $active.offset().left + activeWidth;
 
-        if (offset > scrollingTabWidth - 30) {
-          const scrollLeft = (offset - (scrollingTabWidth / 2)) - (activeWidth / 2);
+          if (offset > scrollingTabWidth - 30) {
+            const scrollLeft = offset - scrollingTabWidth / 2 - activeWidth / 2;
 
-          $this.scrollLeft(scrollLeft);
+            $this.scrollLeft(scrollLeft);
+          }
         }
-      }
-    });
-  }).trigger('init.scrolling-tabs');
+      });
+    })
+    .trigger('init.scrolling-tabs');
 }
diff --git a/app/assets/javascripts/line_highlighter.js b/app/assets/javascripts/line_highlighter.js
index d58fd63bb33..4db63c841a9 100644
--- a/app/assets/javascripts/line_highlighter.js
+++ b/app/assets/javascripts/line_highlighter.js
@@ -70,7 +70,7 @@ LineHighlighter.prototype.highlightHash = function(newHash) {
       const scrollOptions = {
         // Scroll to the first highlighted line on initial load
         // Offset -50 for the sticky top bar, and another -100 for some context
-        offset: -150
+        offset: -150,
       };
       if (this.options.scrollFileHolder) {
         $(this.options.fileHolderSelector).scrollTo(lineSelector, scrollOptions);
@@ -85,7 +85,9 @@ LineHighlighter.prototype.clickHandler = function(event) {
   var current, lineNumber, range;
   event.preventDefault();
   this.clearHighlight();
-  lineNumber = $(event.target).closest('a').data('lineNumber');
+  lineNumber = $(event.target)
+    .closest('a')
+    .data('lineNumber');
   current = this.hashToRange(this._hash);
   if (!(current[0] && event.shiftKey)) {
     // If there's no current selection, or there is but Shift wasn't held,
@@ -104,7 +106,7 @@ LineHighlighter.prototype.clickHandler = function(event) {
 };
 
 LineHighlighter.prototype.clearHighlight = function() {
-  return $("." + this.highlightLineClass).removeClass(this.highlightLineClass);
+  return $('.' + this.highlightLineClass).removeClass(this.highlightLineClass);
 };
 
 // Convert a URL hash String into line numbers
@@ -135,7 +137,7 @@ LineHighlighter.prototype.hashToRange = function(hash) {
 //
 // lineNumber - Line number to highlight
 LineHighlighter.prototype.highlightLine = function(lineNumber) {
-  return $("#LC" + lineNumber).addClass(this.highlightLineClass);
+  return $('#LC' + lineNumber).addClass(this.highlightLineClass);
 };
 
 // Highlight all lines within a range
@@ -160,9 +162,9 @@ LineHighlighter.prototype.highlightRange = function(range) {
 LineHighlighter.prototype.setHash = function(firstLineNumber, lastLineNumber) {
   var hash;
   if (lastLineNumber) {
-    hash = "#L" + firstLineNumber + "-" + lastLineNumber;
+    hash = '#L' + firstLineNumber + '-' + lastLineNumber;
   } else {
-    hash = "#L" + firstLineNumber;
+    hash = '#L' + firstLineNumber;
   }
   this._hash = hash;
   return this.__setLocationHash__(hash);
@@ -172,11 +174,15 @@ LineHighlighter.prototype.setHash = function(firstLineNumber, lastLineNumber) {
 //
 // This method is stubbed in tests.
 LineHighlighter.prototype.__setLocationHash__ = function(value) {
-  return window.history.pushState({
-    url: value
-  // We're using pushState instead of assigning location.hash directly to
-  // prevent the page from scrolling on the hashchange event
-  }, document.title, value);
+  return window.history.pushState(
+    {
+      url: value,
+      // We're using pushState instead of assigning location.hash directly to
+      // prevent the page from scrolling on the hashchange event
+    },
+    document.title,
+    value,
+  );
 };
 
 export default LineHighlighter;
diff --git a/app/assets/javascripts/locale/sprintf.js b/app/assets/javascripts/locale/sprintf.js
index 599104dcfa0..5246c49842e 100644
--- a/app/assets/javascripts/locale/sprintf.js
+++ b/app/assets/javascripts/locale/sprintf.js
@@ -15,7 +15,7 @@ export default (input, parameters, escapeParameters = true) => {
   let output = input;
 
   if (parameters) {
-    Object.keys(parameters).forEach((parameterName) => {
+    Object.keys(parameters).forEach(parameterName => {
       const parameterValue = parameters[parameterName];
       const escapedParameterValue = escapeParameters ? _.escape(parameterValue) : parameterValue;
       output = output.replace(new RegExp(`%{${parameterName}}`, 'g'), escapedParameterValue);
diff --git a/app/assets/javascripts/member_expiration_date.js b/app/assets/javascripts/member_expiration_date.js
index d27922a2099..df5cd1b8c51 100644
--- a/app/assets/javascripts/member_expiration_date.js
+++ b/app/assets/javascripts/member_expiration_date.js
@@ -9,7 +9,9 @@ import { parsePikadayDate, pikadayToString } from './lib/utils/datefix';
 //
 export default function memberExpirationDate(selector = '.js-access-expiration-date') {
   function toggleClearInput() {
-    $(this).closest('.clearable-input').toggleClass('has-value', $(this).val() !== '');
+    $(this)
+      .closest('.clearable-input')
+      .toggleClass('has-value', $(this).val() !== '');
   }
   const inputs = $(selector);
 
@@ -40,7 +42,9 @@ export default function memberExpirationDate(selector = '.js-access-expiration-d
   inputs.next('.js-clear-input').on('click', function clicked(event) {
     event.preventDefault();
 
-    const input = $(this).closest('.clearable-input').find(selector);
+    const input = $(this)
+      .closest('.clearable-input')
+      .find(selector);
     const calendar = input.data('pikaday');
 
     calendar.setDate(null);
diff --git a/app/assets/javascripts/merge_request.js b/app/assets/javascripts/merge_request.js
index 9b6d7d1772f..0deae478deb 100644
--- a/app/assets/javascripts/merge_request.js
+++ b/app/assets/javascripts/merge_request.js
@@ -16,26 +16,29 @@ function MergeRequest(opts) {
   this.opts = opts != null ? opts : {};
   this.submitNoteForm = this.submitNoteForm.bind(this);
   this.$el = $('.merge-request');
-  this.$('.show-all-commits').on('click', (function(_this) {
-    return function() {
-      return _this.showAllCommits();
-    };
-  })(this));
+  this.$('.show-all-commits').on(
+    'click',
+    (function(_this) {
+      return function() {
+        return _this.showAllCommits();
+      };
+    })(this),
+  );
 
   this.initTabs();
   this.initMRBtnListeners();
   this.initCommitMessageListeners();
   this.closeReopenReportToggle = IssuablesHelper.initCloseReopenReport();
 
-  if ($("a.btn-close").length) {
+  if ($('a.btn-close').length) {
     this.taskList = new TaskList({
       dataType: 'merge_request',
       fieldName: 'description',
       selector: '.detail-page-description',
-      onSuccess: (result) => {
+      onSuccess: result => {
         document.querySelector('#task_status').innerText = result.task_status;
         document.querySelector('#task_status_short').innerText = result.task_status_short;
-      }
+      },
     });
   }
 }
@@ -84,7 +87,7 @@ MergeRequest.prototype.initMRBtnListeners = function() {
 
 MergeRequest.prototype.submitNoteForm = function(form, $button) {
   var noteText;
-  noteText = form.find("textarea.js-note-text").val();
+  noteText = form.find('textarea.js-note-text').val();
   if (noteText.trim().length > 0) {
     form.submit();
     $button.data('submitted', true);
@@ -122,7 +125,7 @@ MergeRequest.setStatusBoxToMerged = function() {
 
 MergeRequest.decreaseCounter = function(by = 1) {
   const $el = $('.js-merge-counter');
-  const count = Math.max((parseInt($el.text().replace(/[^\d]/, ''), 10) - by), 0);
+  const count = Math.max(parseInt($el.text().replace(/[^\d]/, ''), 10) - by, 0);
 
   $el.text(addDelimiter(count));
 };
diff --git a/app/assets/javascripts/milestone.js b/app/assets/javascripts/milestone.js
index 6da04020881..f211632cf24 100644
--- a/app/assets/javascripts/milestone.js
+++ b/app/assets/javascripts/milestone.js
@@ -15,7 +15,7 @@ export default class Milestone {
   }
 
   bindTabsSwitching() {
-    return $('a[data-toggle="tab"]').on('show.bs.tab', (e) => {
+    return $('a[data-toggle="tab"]').on('show.bs.tab', e => {
       const $target = $(e.target);
 
       window.location.hash = $target.attr('href');
@@ -36,7 +36,8 @@ export default class Milestone {
     const tabElId = $target.attr('href');
 
     if (endpoint && !$target.hasClass('is-loaded')) {
-      axios.get(endpoint)
+      axios
+        .get(endpoint)
         .then(({ data }) => {
           $(tabElId).html(data.html);
           $target.addClass('is-loaded');
@@ -46,23 +47,28 @@ export default class Milestone {
   }
 
   static initDeprecationMessage() {
-    const deprecationMesssageContainer = document.querySelector('.js-milestone-deprecation-message');
+    const deprecationMesssageContainer = document.querySelector(
+      '.js-milestone-deprecation-message',
+    );
 
     if (!deprecationMesssageContainer) return;
 
-    const deprecationMessage = deprecationMesssageContainer.querySelector('.js-milestone-deprecation-message-template').innerHTML;
+    const deprecationMessage = deprecationMesssageContainer.querySelector(
+      '.js-milestone-deprecation-message-template',
+    ).innerHTML;
     const $popover = $('.js-popover-link', deprecationMesssageContainer);
     const hideOnScroll = togglePopover.bind($popover, false);
 
-    $popover.popover({
-      content: deprecationMessage,
-      html: true,
-      placement: 'bottom',
-    })
-    .on('mouseenter', mouseenter)
-    .on('mouseleave', debouncedMouseleave())
-    .on('show.bs.popover', () => {
-      window.addEventListener('scroll', hideOnScroll, { once: true });
-    });
+    $popover
+      .popover({
+        content: deprecationMessage,
+        html: true,
+        placement: 'bottom',
+      })
+      .on('mouseenter', mouseenter)
+      .on('mouseleave', debouncedMouseleave())
+      .on('show.bs.popover', () => {
+        window.addEventListener('scroll', hideOnScroll, { once: true });
+      });
   }
 }
diff --git a/app/assets/javascripts/mini_pipeline_graph_dropdown.js b/app/assets/javascripts/mini_pipeline_graph_dropdown.js
index f8257b6abab..81ab9d8be4b 100644
--- a/app/assets/javascripts/mini_pipeline_graph_dropdown.js
+++ b/app/assets/javascripts/mini_pipeline_graph_dropdown.js
@@ -46,7 +46,7 @@ export default class MiniPipelineGraph {
     $(document).on(
       'click',
       `${this.container} .js-builds-dropdown-list a.mini-pipeline-graph-dropdown-item`,
-      (e) => {
+      e => {
         e.stopPropagation();
       },
     );
@@ -82,7 +82,8 @@ export default class MiniPipelineGraph {
     this.renderBuildsList(button, '');
     this.toggleLoading(button);
 
-    axios.get(endpoint)
+    axios
+      .get(endpoint)
       .then(({ data }) => {
         this.toggleLoading(button);
         this.renderBuildsList(button, data.html);
@@ -90,7 +91,11 @@ export default class MiniPipelineGraph {
       })
       .catch(() => {
         this.toggleLoading(button);
-        if ($(button).parent().hasClass('open')) {
+        if (
+          $(button)
+            .parent()
+            .hasClass('open')
+        ) {
           $(button).dropdown('toggle');
         }
         flash('An error occurred while fetching the builds.', 'alert');
@@ -104,8 +109,8 @@ export default class MiniPipelineGraph {
    * @return {type}
    */
   toggleLoading(stageContainer) {
-    stageContainer.parentElement.querySelector(
-      `${this.dropdownListSelector} .js-builds-dropdown-loading`,
-    ).classList.toggle('hidden');
+    stageContainer.parentElement
+      .querySelector(`${this.dropdownListSelector} .js-builds-dropdown-loading`)
+      .classList.toggle('hidden');
   }
 }
diff --git a/app/assets/javascripts/namespace_select.js b/app/assets/javascripts/namespace_select.js
index ec4c0910e92..cba6759ebf5 100644
--- a/app/assets/javascripts/namespace_select.js
+++ b/app/assets/javascripts/namespace_select.js
@@ -14,14 +14,14 @@ export default class NamespaceSelect {
       selectable: true,
       filterRemote: true,
       search: {
-        fields: ['path']
+        fields: ['path'],
       },
       fieldName: fieldName,
       toggleLabel: function(selected) {
         if (selected.id == null) {
           return selected.text;
         } else {
-          return selected.kind + ": " + selected.full_path;
+          return selected.kind + ': ' + selected.full_path;
         }
       },
       data: function(term, dataCallback) {
@@ -29,7 +29,7 @@ export default class NamespaceSelect {
           if (isFilter) {
             const anyNamespace = {
               text: 'Any namespace',
-              id: null
+              id: null,
             };
             namespaces.unshift(anyNamespace);
             namespaces.splice(1, 0, 'divider');
@@ -41,7 +41,7 @@ export default class NamespaceSelect {
         if (namespace.id == null) {
           return namespace.text;
         } else {
-          return namespace.kind + ": " + namespace.full_path;
+          return namespace.kind + ': ' + namespace.full_path;
         }
       },
       renderRow: this.renderRow,
diff --git a/app/assets/javascripts/network/branch_graph.js b/app/assets/javascripts/network/branch_graph.js
index ad7136adb8c..d1fa9f5e2a2 100644
--- a/app/assets/javascripts/network/branch_graph.js
+++ b/app/assets/javascripts/network/branch_graph.js
@@ -20,7 +20,7 @@ export default (function() {
     this.mtime = 0;
     this.mspace = 0;
     this.parents = {};
-    this.colors = ["#000"];
+    this.colors = ['#000'];
     this.offsetX = 150;
     this.offsetY = 20;
     this.unitTime = 30;
@@ -30,9 +30,10 @@ export default (function() {
   }
 
   BranchGraph.prototype.load = function() {
-    axios.get(this.options.url)
+    axios
+      .get(this.options.url)
       .then(({ data }) => {
-        $(".loading", this.element).hide();
+        $('.loading', this.element).hide();
         this.prepareData(data.days, data.commits);
         this.buildGraph();
       })
@@ -71,17 +72,19 @@ export default (function() {
       c = ref[j];
       this.mtime = Math.max(this.mtime, c.time);
       this.mspace = Math.max(this.mspace, c.space);
-      results.push((function() {
-        var l, len1, ref1, results1;
-        ref1 = c.parents;
-        results1 = [];
-        for (l = 0, len1 = ref1.length; l < len1; l += 1) {
-          p = ref1[l];
-          this.parents[p[0]] = true;
-          results1.push(this.mspace = Math.max(this.mspace, p[1]));
-        }
-        return results1;
-      }).call(this));
+      results.push(
+        function() {
+          var l, len1, ref1, results1;
+          ref1 = c.parents;
+          results1 = [];
+          for (l = 0, len1 = ref1.length; l < len1; l += 1) {
+            p = ref1[l];
+            this.parents[p[0]] = true;
+            results1.push((this.mspace = Math.max(this.mspace, p[1])));
+          }
+          return results1;
+        }.call(this),
+      );
     }
     return results;
   };
@@ -91,11 +94,11 @@ export default (function() {
     k = 0;
     results = [];
     while (k < this.mspace) {
-      this.colors.push(Raphael.getColor(.8));
+      this.colors.push(Raphael.getColor(0.8));
       // Skipping a few colors in the spectrum to get more contrast between colors
       Raphael.getColor();
       Raphael.getColor();
-      results.push(k += 1);
+      results.push((k += 1));
     }
     return results;
   };
@@ -104,12 +107,12 @@ export default (function() {
     var cuday, cumonth, day, j, len, mm, ref;
     const { r } = this;
     cuday = 0;
-    cumonth = "";
+    cumonth = '';
     r.rect(0, 0, 40, this.barHeight).attr({
-      fill: "#222"
+      fill: '#222',
     });
     r.rect(40, 0, 30, this.barHeight).attr({
-      fill: "#444"
+      fill: '#444',
     });
     ref = this.days;
 
@@ -118,16 +121,16 @@ export default (function() {
       if (cuday !== day[0] || cumonth !== day[1]) {
         // Dates
         r.text(55, this.offsetY + this.unitTime * mm, day[0]).attr({
-          font: "12px Monaco, monospace",
-          fill: "#BBB"
+          font: '12px Monaco, monospace',
+          fill: '#BBB',
         });
         [cuday] = day;
       }
       if (cumonth !== day[1]) {
         // Months
         r.text(20, this.offsetY + this.unitTime * mm, day[1]).attr({
-          font: "12px Monaco, monospace",
-          fill: "#EEE"
+          font: '12px Monaco, monospace',
+          fill: '#EEE',
         });
 
         // eslint-disable-next-line prefer-destructuring
@@ -173,11 +176,13 @@ export default (function() {
   BranchGraph.prototype.bindEvents = function() {
     const { element } = this;
 
-    return $(element).scroll((function(_this) {
-      return function(event) {
-        return _this.renderPartialGraph();
-      };
-    })(this));
+    return $(element).scroll(
+      (function(_this) {
+        return function(event) {
+          return _this.renderPartialGraph();
+        };
+      })(this),
+    );
   };
 
   BranchGraph.prototype.scrollDown = function() {
@@ -219,46 +224,53 @@ export default (function() {
     shortrefs = commit.refs;
     // Truncate if longer than 15 chars
     if (shortrefs.length > 17) {
-      shortrefs = shortrefs.substr(0, 15) + "…";
+      shortrefs = shortrefs.substr(0, 15) + '…';
     }
     text = r.text(x + 4, y, shortrefs).attr({
-      "text-anchor": "start",
-      font: "10px Monaco, monospace",
-      fill: "#FFF",
-      title: commit.refs
+      'text-anchor': 'start',
+      font: '10px Monaco, monospace',
+      fill: '#FFF',
+      title: commit.refs,
     });
     textbox = text.getBBox();
     // Create rectangle based on the size of the textbox
     rect = r.rect(x, y - 7, textbox.width + 5, textbox.height + 5, 4).attr({
-      fill: "#000",
-      "fill-opacity": .5,
-      stroke: "none"
+      fill: '#000',
+      'fill-opacity': 0.5,
+      stroke: 'none',
     });
-    triangle = r.path(["M", x - 5, y, "L", x - 15, y - 4, "L", x - 15, y + 4, "Z"]).attr({
-      fill: "#000",
-      "fill-opacity": .5,
-      stroke: "none"
+    triangle = r.path(['M', x - 5, y, 'L', x - 15, y - 4, 'L', x - 15, y + 4, 'Z']).attr({
+      fill: '#000',
+      'fill-opacity': 0.5,
+      stroke: 'none',
     });
     label = r.set(rect, text);
-    label.transform(["t", -rect.getBBox().width - 15, 0]);
+    label.transform(['t', -rect.getBBox().width - 15, 0]);
     // Set text to front
     return text.toFront();
   };
 
   BranchGraph.prototype.appendAnchor = function(x, y, commit) {
     const { r, top, options } = this;
-    const anchor = r.circle(x, y, 10).attr({
-      fill: "#000",
-      opacity: 0,
-      cursor: "pointer"
-    }).click(function() {
-      return window.open(options.commit_url.replace("%s", commit.id), "_blank");
-    }).hover(function() {
-      this.tooltip = r.commitTooltip(x + 5, y, commit);
-      return top.push(this.tooltip.insertBefore(this));
-    }, function() {
-      return this.tooltip && this.tooltip.remove() && delete this.tooltip;
-    });
+    const anchor = r
+      .circle(x, y, 10)
+      .attr({
+        fill: '#000',
+        opacity: 0,
+        cursor: 'pointer',
+      })
+      .click(function() {
+        return window.open(options.commit_url.replace('%s', commit.id), '_blank');
+      })
+      .hover(
+        function() {
+          this.tooltip = r.commitTooltip(x + 5, y, commit);
+          return top.push(this.tooltip.insertBefore(this));
+        },
+        function() {
+          return this.tooltip && this.tooltip.remove() && delete this.tooltip;
+        },
+      );
     return top.push(anchor);
   };
 
@@ -266,7 +278,7 @@ export default (function() {
     const { r } = this;
     r.circle(x, y, 3).attr({
       fill: this.colors[commit.space],
-      stroke: "none"
+      stroke: 'none',
     });
 
     const avatar_box_x = this.offsetX + this.unitSpace * this.mspace + 10;
@@ -274,13 +286,15 @@ export default (function() {
 
     r.rect(avatar_box_x, avatar_box_y, 20, 20).attr({
       stroke: this.colors[commit.space],
-      "stroke-width": 2
+      'stroke-width': 2,
     });
     r.image(commit.author.icon, avatar_box_x, avatar_box_y, 20, 20);
-    return r.text(this.offsetX + this.unitSpace * this.mspace + 35, y, commit.message.split("\n")[0]).attr({
-      "text-anchor": "start",
-      font: "14px Monaco, monospace"
-    });
+    return r
+      .text(this.offsetX + this.unitSpace * this.mspace + 35, y, commit.message.split('\n')[0])
+      .attr({
+        'text-anchor': 'start',
+        font: '14px Monaco, monospace',
+      });
   };
 
   BranchGraph.prototype.drawLines = function(x, y, commit) {
@@ -304,30 +318,32 @@ export default (function() {
       // Build line shape
       if (parent[1] === commit.space) {
         offset = [0, 5];
-        arrow = "l-2,5,4,0,-2,-5,0,5";
+        arrow = 'l-2,5,4,0,-2,-5,0,5';
       } else if (parent[1] < commit.space) {
         offset = [3, 3];
-        arrow = "l5,0,-2,4,-3,-4,4,2";
+        arrow = 'l5,0,-2,4,-3,-4,4,2';
       } else {
         offset = [-3, 3];
-        arrow = "l-5,0,2,4,3,-4,-4,2";
+        arrow = 'l-5,0,2,4,3,-4,-4,2';
       }
       // Start point
-      route = ["M", x + offset[0], y + offset[1]];
+      route = ['M', x + offset[0], y + offset[1]];
       // Add arrow if not first parent
       if (i > 0) {
         route.push(arrow);
       }
       // Circumvent if overlap
       if (commit.space !== parentCommit.space || commit.space !== parent[1]) {
-        route.push("L", parentX2, y + 10, "L", parentX2, parentY - 5);
+        route.push('L', parentX2, y + 10, 'L', parentX2, parentY - 5);
       }
       // End point
-      route.push("L", parentX1, parentY);
-      results.push(r.path(route).attr({
-        stroke: color,
-        "stroke-width": 2
-      }));
+      route.push('L', parentX1, parentY);
+      results.push(
+        r.path(route).attr({
+          stroke: color,
+          'stroke-width': 2,
+        }),
+      );
     }
     return results;
   };
@@ -337,10 +353,10 @@ export default (function() {
       const { r } = this;
       const x = this.offsetX + this.unitSpace * (this.mspace - commit.space);
       const y = this.offsetY + this.unitTime * commit.time;
-      r.path(["M", x + 5, y, "L", x + 15, y + 4, "L", x + 15, y - 4, "Z"]).attr({
-        fill: "#000",
-        "fill-opacity": .5,
-        stroke: "none"
+      r.path(['M', x + 5, y, 'L', x + 15, y + 4, 'L', x + 15, y - 4, 'Z']).attr({
+        fill: '#000',
+        'fill-opacity': 0.5,
+        stroke: 'none',
       });
       // Displayed in the center
       return this.element.scrollTop(y - this.graphHeight / 2);
diff --git a/app/assets/javascripts/network/raphael.js b/app/assets/javascripts/network/raphael.js
index 09dcf716148..22e06a35d91 100644
--- a/app/assets/javascripts/network/raphael.js
+++ b/app/assets/javascripts/network/raphael.js
@@ -49,7 +49,7 @@ Raphael.prototype.textWrap = function testWrap(t, width) {
   const s = [];
   for (let j = 0, len = words.length; j < len; j += 1) {
     const word = words[j];
-    if (x + (word.length * letterWidth) > width) {
+    if (x + word.length * letterWidth > width) {
       s.push('\n');
       x = 0;
     }
diff --git a/app/assets/javascripts/new_branch_form.js b/app/assets/javascripts/new_branch_form.js
index 8f6ea9e61c1..f338dbbb0a6 100644
--- a/app/assets/javascripts/new_branch_form.js
+++ b/app/assets/javascripts/new_branch_form.js
@@ -30,24 +30,24 @@ export default class NewBranchForm {
     startsWith = {
       pattern: /^(\/|\.)/g,
       prefix: "can't start with",
-      conjunction: "or"
+      conjunction: 'or',
     };
     endsWith = {
       pattern: /(\/|\.|\.lock)$/g,
       prefix: "can't end in",
-      conjunction: "or"
+      conjunction: 'or',
     };
     invalid = {
       pattern: /(\s|~|\^|:|\?|\*|\[|\\|\.\.|@\{|\/{2,}){1}/g,
       prefix: "can't contain",
-      conjunction: ", "
+      conjunction: ', ',
     };
     single = {
       pattern: /^@+$/g,
       prefix: "can't be",
-      conjunction: "or"
+      conjunction: 'or',
     };
-    return this.restrictions = [startsWith, invalid, endsWith, single];
+    return (this.restrictions = [startsWith, invalid, endsWith, single]);
   }
 
   validate() {
@@ -73,7 +73,7 @@ export default class NewBranchForm {
             return "'" + value + "'";
         }
       });
-      return restriction.prefix + " " + (formatted.join(restriction.conjunction));
+      return restriction.prefix + ' ' + formatted.join(restriction.conjunction);
     };
     validator = (function(_this) {
       return function(errors, restriction) {
@@ -88,7 +88,7 @@ export default class NewBranchForm {
     })(this);
     errors = this.restrictions.reduce(validator, []);
     if (errors.length > 0) {
-      errorMessage = $("<span/>").text(errors.join(', '));
+      errorMessage = $('<span/>').text(errors.join(', '));
       return this.branchNameError.append(errorMessage);
     }
   }
diff --git a/app/assets/javascripts/new_commit_form.js b/app/assets/javascripts/new_commit_form.js
index 17ec20f1cc1..b142f212eb0 100644
--- a/app/assets/javascripts/new_commit_form.js
+++ b/app/assets/javascripts/new_commit_form.js
@@ -6,9 +6,7 @@ export default class NewCommitForm {
     this.branchName = form.find('.js-branch-name');
     this.originalBranch = form.find('.js-original-branch');
     this.createMergeRequest = form.find('.js-create-merge-request');
-    this.createMergeRequestContainer = form.find(
-      '.js-create-merge-request-container',
-    );
+    this.createMergeRequestContainer = form.find('.js-create-merge-request-container');
     this.branchName.keyup(this.renderDestination);
     this.renderDestination();
   }
diff --git a/app/assets/javascripts/notifications_dropdown.js b/app/assets/javascripts/notifications_dropdown.js
index 8ff8bb446ad..c4c8cf86cb0 100644
--- a/app/assets/javascripts/notifications_dropdown.js
+++ b/app/assets/javascripts/notifications_dropdown.js
@@ -18,7 +18,9 @@ export default function notificationsDropdown() {
 
   $(document).on('ajax:success', '.notification-form', (e, data) => {
     if (data.saved) {
-      $(e.currentTarget).closest('.js-notification-dropdown').replaceWith(data.html);
+      $(e.currentTarget)
+        .closest('.js-notification-dropdown')
+        .replaceWith(data.html);
     } else {
       Flash('Failed to save new settings', 'alert');
     }
diff --git a/app/assets/javascripts/notifications_form.js b/app/assets/javascripts/notifications_form.js
index 00e27ca0e70..45f033f2822 100644
--- a/app/assets/javascripts/notifications_form.js
+++ b/app/assets/javascripts/notifications_form.js
@@ -22,7 +22,8 @@ export default class NotificationsForm {
 
   // eslint-disable-next-line class-methods-use-this
   showCheckboxLoadingSpinner($parent) {
-    $parent.addClass('is-loading')
+    $parent
+      .addClass('is-loading')
       .find('.custom-notification-event-loading')
       .removeClass('fa-check')
       .addClass('fa-spin fa-spinner')
@@ -38,9 +39,12 @@ export default class NotificationsForm {
       .then(({ data }) => {
         $checkbox.enable();
         if (data.saved) {
-          $parent.find('.custom-notification-event-loading').toggleClass('fa-spin fa-spinner fa-check is-done');
+          $parent
+            .find('.custom-notification-event-loading')
+            .toggleClass('fa-spin fa-spinner fa-check is-done');
           setTimeout(() => {
-            $parent.removeClass('is-loading')
+            $parent
+              .removeClass('is-loading')
               .find('.custom-notification-event-loading')
               .toggleClass('fa-spin fa-spinner fa-check is-done');
           }, 2000);
diff --git a/app/assets/javascripts/pager.js b/app/assets/javascripts/pager.js
index 86a43b66cc8..3b58c54b3f4 100644
--- a/app/assets/javascripts/pager.js
+++ b/app/assets/javascripts/pager.js
@@ -24,22 +24,25 @@ export default {
 
   getOld() {
     this.loading.show();
-    axios.get(this.url, {
-      params: {
-        limit: this.limit,
-        offset: this.offset,
-      },
-    }).then(({ data }) => {
-      this.append(data.count, this.prepareData(data.html));
-      this.callback();
+    axios
+      .get(this.url, {
+        params: {
+          limit: this.limit,
+          offset: this.offset,
+        },
+      })
+      .then(({ data }) => {
+        this.append(data.count, this.prepareData(data.html));
+        this.callback();
 
-      // keep loading until we've filled the viewport height
-      if (!this.disable && !this.isScrollable()) {
-        this.getOld();
-      } else {
-        this.loading.hide();
-      }
-    }).catch(() => this.loading.hide());
+        // keep loading until we've filled the viewport height
+        if (!this.disable && !this.isScrollable()) {
+          this.getOld();
+        } else {
+          this.loading.hide();
+        }
+      })
+      .catch(() => this.loading.hide());
   },
 
   append(count, html) {
diff --git a/app/assets/javascripts/pdf/index.vue b/app/assets/javascripts/pdf/index.vue
index 2f480ecdc69..7b079fe02d9 100644
--- a/app/assets/javascripts/pdf/index.vue
+++ b/app/assets/javascripts/pdf/index.vue
@@ -1,57 +1,58 @@
 <script>
-  import pdfjsLib from 'vendor/pdf';
-  import workerSrc from 'vendor/pdf.worker.min';
+import pdfjsLib from 'vendor/pdf';
+import workerSrc from 'vendor/pdf.worker.min';
 
-  import page from './page/index.vue';
+import page from './page/index.vue';
 
-  export default {
-    components: { page },
-    props: {
-      pdf: {
-        type: [String, Uint8Array],
-        required: true,
-      },
+export default {
+  components: { page },
+  props: {
+    pdf: {
+      type: [String, Uint8Array],
+      required: true,
     },
-    data() {
-      return {
-        loading: false,
-        pages: [],
-      };
+  },
+  data() {
+    return {
+      loading: false,
+      pages: [],
+    };
+  },
+  computed: {
+    document() {
+      return typeof this.pdf === 'string' ? this.pdf : { data: this.pdf };
     },
-    computed: {
-      document() {
-        return typeof this.pdf === 'string' ? this.pdf : { data: this.pdf };
-      },
-      hasPDF() {
-        return this.pdf && this.pdf.length > 0;
-      },
+    hasPDF() {
+      return this.pdf && this.pdf.length > 0;
     },
-    watch: { pdf: 'load' },
-    mounted() {
-      pdfjsLib.PDFJS.workerSrc = workerSrc;
-      if (this.hasPDF) this.load();
+  },
+  watch: { pdf: 'load' },
+  mounted() {
+    pdfjsLib.PDFJS.workerSrc = workerSrc;
+    if (this.hasPDF) this.load();
+  },
+  methods: {
+    load() {
+      this.pages = [];
+      return pdfjsLib
+        .getDocument(this.document)
+        .then(this.renderPages)
+        .then(() => this.$emit('pdflabload'))
+        .catch(error => this.$emit('pdflaberror', error))
+        .then(() => {
+          this.loading = false;
+        });
     },
-    methods: {
-      load() {
-        this.pages = [];
-        return pdfjsLib.getDocument(this.document)
-          .then(this.renderPages)
-          .then(() => this.$emit('pdflabload'))
-          .catch(error => this.$emit('pdflaberror', error))
-          .then(() => { this.loading = false; });
-      },
-      renderPages(pdf) {
-        const pagePromises = [];
-        this.loading = true;
-        for (let num = 1; num <= pdf.numPages; num += 1) {
-          pagePromises.push(
-            pdf.getPage(num).then(p => this.pages.push(p)),
-          );
-        }
-        return Promise.all(pagePromises);
-      },
+    renderPages(pdf) {
+      const pagePromises = [];
+      this.loading = true;
+      for (let num = 1; num <= pdf.numPages; num += 1) {
+        pagePromises.push(pdf.getPage(num).then(p => this.pages.push(p)));
+      }
+      return Promise.all(pagePromises);
     },
-  };
+  },
+};
 </script>
 
 <template>
@@ -69,9 +70,9 @@
 </template>
 
 <style>
-  .pdf-viewer {
-    background: url('./assets/img/bg.gif');
-    display: flex;
-    flex-flow: column nowrap;
-  }
+.pdf-viewer {
+  background: url('./assets/img/bg.gif');
+  display: flex;
+  flex-flow: column nowrap;
+}
 </style>
diff --git a/app/assets/javascripts/pdf/page/index.vue b/app/assets/javascripts/pdf/page/index.vue
index 9f06833d560..96aadf41653 100644
--- a/app/assets/javascripts/pdf/page/index.vue
+++ b/app/assets/javascripts/pdf/page/index.vue
@@ -1,44 +1,47 @@
 <script>
-  export default {
-    props: {
-      page: {
-        type: Object,
-        required: true,
-      },
-      number: {
-        type: Number,
-        required: true,
-      },
+export default {
+  props: {
+    page: {
+      type: Object,
+      required: true,
     },
-    data() {
-      return {
-        scale: 4,
-        rendering: false,
-      };
+    number: {
+      type: Number,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      scale: 4,
+      rendering: false,
+    };
+  },
+  computed: {
+    viewport() {
+      return this.page.getViewport(this.scale);
     },
-    computed: {
-      viewport() {
-        return this.page.getViewport(this.scale);
-      },
-      context() {
-        return this.$refs.canvas.getContext('2d');
-      },
-      renderContext() {
-        return {
-          canvasContext: this.context,
-          viewport: this.viewport,
-        };
-      },
+    context() {
+      return this.$refs.canvas.getContext('2d');
     },
-    mounted() {
-      this.$refs.canvas.height = this.viewport.height;
-      this.$refs.canvas.width = this.viewport.width;
-      this.rendering = true;
-      this.page.render(this.renderContext)
-        .then(() => { this.rendering = false; })
-        .catch(error => this.$emit('pdflaberror', error));
+    renderContext() {
+      return {
+        canvasContext: this.context,
+        viewport: this.viewport,
+      };
     },
-  };
+  },
+  mounted() {
+    this.$refs.canvas.height = this.viewport.height;
+    this.$refs.canvas.width = this.viewport.width;
+    this.rendering = true;
+    this.page
+      .render(this.renderContext)
+      .then(() => {
+        this.rendering = false;
+      })
+      .catch(error => this.$emit('pdflaberror', error));
+  },
+};
 </script>
 
 <template>
@@ -51,20 +54,20 @@
 </template>
 
 <style>
-  .pdf-page {
-    margin: 8px auto 0 auto;
-    border-top: 1px #ddd solid;
-    border-bottom: 1px #ddd solid;
-    width: 100%;
-  }
+.pdf-page {
+  margin: 8px auto 0 auto;
+  border-top: 1px #ddd solid;
+  border-bottom: 1px #ddd solid;
+  width: 100%;
+}
 
-  .pdf-page:first-child {
-    margin-top: 0px;
-    border-top: 0px;
-  }
+.pdf-page:first-child {
+  margin-top: 0px;
+  border-top: 0px;
+}
 
-  .pdf-page:last-child {
-    margin-bottom: 0px;
-    border-bottom: 0px;
-  }
+.pdf-page:last-child {
+  margin-bottom: 0px;
+  border-bottom: 0px;
+}
 </style>
diff --git a/app/assets/javascripts/pipelines/components/pipelines_table_row.vue b/app/assets/javascripts/pipelines/components/pipelines_table_row.vue
index b03438ddba1..4f89ee66023 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_table_row.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_table_row.vue
@@ -64,10 +64,7 @@ export default {
         return [];
       }
       const { details } = this.pipeline;
-      return [
-        ...(details.manual_actions || []),
-        ...(details.scheduled_actions || []),
-      ];
+      return [...(details.manual_actions || []), ...(details.scheduled_actions || [])];
     },
     /**
      * If provided, returns the commit tag.
diff --git a/app/assets/javascripts/project_find_file.js b/app/assets/javascripts/project_find_file.js
index 12cfa7de316..60d3d83a4b2 100644
--- a/app/assets/javascripts/project_find_file.js
+++ b/app/assets/javascripts/project_find_file.js
@@ -10,14 +10,14 @@ import { __ } from '~/locale';
 const highlighter = function(element, text, matches) {
   var highlightText, j, lastIndex, len, matchIndex, matchedChars, unmatched;
   lastIndex = 0;
-  highlightText = "";
+  highlightText = '';
   matchedChars = [];
   for (j = 0, len = matches.length; j < len; j += 1) {
     matchIndex = matches[j];
     unmatched = text.substring(lastIndex, matchIndex);
     if (unmatched) {
       if (matchedChars.length) {
-        element.append(matchedChars.join("").bold());
+        element.append(matchedChars.join('').bold());
       }
       matchedChars = [];
       element.append(document.createTextNode(unmatched));
@@ -26,7 +26,7 @@ const highlighter = function(element, text, matches) {
     lastIndex = matchIndex + 1;
   }
   if (matchedChars.length) {
-    element.append(matchedChars.join("").bold());
+    element.append(matchedChars.join('').bold());
   }
   return element.append(document.createTextNode(text.substring(lastIndex)));
 };
@@ -40,7 +40,7 @@ export default class ProjectFindFile {
     this.selectRowDown = this.selectRowDown.bind(this);
     this.selectRowUp = this.selectRowUp.bind(this);
     this.filePaths = {};
-    this.inputElement = this.element.find(".file-finder-input");
+    this.inputElement = this.element.find('.file-finder-input');
     // init event
     this.initEvent();
     // focus text input box
@@ -50,38 +50,51 @@ export default class ProjectFindFile {
   }
 
   initEvent() {
-    this.inputElement.off("keyup");
-    this.inputElement.on("keyup", (function(_this) {
-      return function(event) {
-        var oldValue, ref, target, value;
-        target = $(event.target);
-        value = target.val();
-        oldValue = (ref = target.data("oldValue")) != null ? ref : "";
-        if (value !== oldValue) {
-          target.data("oldValue", value);
-          _this.findFile();
-          return _this.element.find("tr.tree-item").eq(0).addClass("selected").focus();
-        }
-      };
-    })(this));
+    this.inputElement.off('keyup');
+    this.inputElement.on(
+      'keyup',
+      (function(_this) {
+        return function(event) {
+          var oldValue, ref, target, value;
+          target = $(event.target);
+          value = target.val();
+          oldValue = (ref = target.data('oldValue')) != null ? ref : '';
+          if (value !== oldValue) {
+            target.data('oldValue', value);
+            _this.findFile();
+            return _this.element
+              .find('tr.tree-item')
+              .eq(0)
+              .addClass('selected')
+              .focus();
+          }
+        };
+      })(this),
+    );
   }
 
   findFile() {
     var result, searchText;
     searchText = this.inputElement.val();
-    result = searchText.length > 0 ? fuzzaldrinPlus.filter(this.filePaths, searchText) : this.filePaths;
+    result =
+      searchText.length > 0 ? fuzzaldrinPlus.filter(this.filePaths, searchText) : this.filePaths;
     return this.renderList(result, searchText);
-  // find file
+    // find file
   }
 
   // files pathes load
   load(url) {
-    axios.get(url)
+    axios
+      .get(url)
       .then(({ data }) => {
         this.element.find('.loading').hide();
         this.filePaths = data;
         this.findFile();
-        this.element.find('.files-slider tr.tree-item').eq(0).addClass('selected').focus();
+        this.element
+          .find('.files-slider tr.tree-item')
+          .eq(0)
+          .addClass('selected')
+          .focus();
       })
       .catch(() => flash(__('An error occurred while loading filenames')));
   }
@@ -89,7 +102,7 @@ export default class ProjectFindFile {
   // render result
   renderList(filePaths, searchText) {
     var blobItemUrl, filePath, html, i, len, matches, results;
-    this.element.find(".tree-table > tbody").empty();
+    this.element.find('.tree-table > tbody').empty();
     results = [];
 
     for (i = 0, len = filePaths.length; i < len; i += 1) {
@@ -100,9 +113,9 @@ export default class ProjectFindFile {
       if (searchText) {
         matches = fuzzaldrinPlus.match(filePath, searchText);
       }
-      blobItemUrl = this.options.blobUrlTemplate + "/" + filePath;
+      blobItemUrl = this.options.blobUrlTemplate + '/' + filePath;
       html = ProjectFindFile.makeHtml(filePath, matches, blobItemUrl);
-      results.push(this.element.find(".tree-table > tbody").append(html));
+      results.push(this.element.find('.tree-table > tbody').append(html));
     }
     return results;
   }
@@ -110,52 +123,56 @@ export default class ProjectFindFile {
   // make tbody row html
   static makeHtml(filePath, matches, blobItemUrl) {
     var $tr;
-    $tr = $("<tr class='tree-item'><td class='tree-item-file-name link-container'><a><i class='fa fa-file-text-o fa-fw'></i><span class='str-truncated'></span></a></td></tr>");
+    $tr = $(
+      "<tr class='tree-item'><td class='tree-item-file-name link-container'><a><i class='fa fa-file-text-o fa-fw'></i><span class='str-truncated'></span></a></td></tr>",
+    );
     if (matches) {
-      $tr.find("a").replaceWith(highlighter($tr.find("a"), filePath, matches).attr("href", blobItemUrl));
+      $tr
+        .find('a')
+        .replaceWith(highlighter($tr.find('a'), filePath, matches).attr('href', blobItemUrl));
     } else {
-      $tr.find("a").attr("href", blobItemUrl);
-      $tr.find(".str-truncated").text(filePath);
+      $tr.find('a').attr('href', blobItemUrl);
+      $tr.find('.str-truncated').text(filePath);
     }
     return $tr;
   }
 
   selectRow(type) {
     var next, rows, selectedRow;
-    rows = this.element.find(".files-slider tr.tree-item");
-    selectedRow = this.element.find(".files-slider tr.tree-item.selected");
+    rows = this.element.find('.files-slider tr.tree-item');
+    selectedRow = this.element.find('.files-slider tr.tree-item.selected');
     if (rows && rows.length > 0) {
       if (selectedRow && selectedRow.length > 0) {
-        if (type === "UP") {
+        if (type === 'UP') {
           next = selectedRow.prev();
-        } else if (type === "DOWN") {
+        } else if (type === 'DOWN') {
           next = selectedRow.next();
         }
         if (next.length > 0) {
-          selectedRow.removeClass("selected");
+          selectedRow.removeClass('selected');
           selectedRow = next;
         }
       } else {
         selectedRow = rows.eq(0);
       }
-      return selectedRow.addClass("selected").focus();
+      return selectedRow.addClass('selected').focus();
     }
   }
 
   selectRowUp() {
-    return this.selectRow("UP");
+    return this.selectRow('UP');
   }
 
   selectRowDown() {
-    return this.selectRow("DOWN");
+    return this.selectRow('DOWN');
   }
 
   goToTree() {
-    return window.location.href = this.options.treeUrl;
+    return (window.location.href = this.options.treeUrl);
   }
 
   goToBlob() {
-    var $link = this.element.find(".tree-item.selected .tree-item-file-name a");
+    var $link = this.element.find('.tree-item.selected .tree-item-file-name a');
 
     if ($link.length) {
       $link.get(0).click();
diff --git a/app/assets/javascripts/project_import.js b/app/assets/javascripts/project_import.js
index 5a0d2b642eb..a51a2a2242f 100644
--- a/app/assets/javascripts/project_import.js
+++ b/app/assets/javascripts/project_import.js
@@ -5,4 +5,3 @@ export default function projectImport() {
     visitUrl(window.location.href);
   }, 5000);
 }
-
diff --git a/app/assets/javascripts/project_label_subscription.js b/app/assets/javascripts/project_label_subscription.js
index 9049f87e037..d3c604dcee1 100644
--- a/app/assets/javascripts/project_label_subscription.js
+++ b/app/assets/javascripts/project_label_subscription.js
@@ -31,32 +31,35 @@ export default class ProjectLabelSubscription {
 
     $btn.addClass('disabled');
 
-    axios.post(url).then(() => {
-      let newStatus;
-      let newAction;
+    axios
+      .post(url)
+      .then(() => {
+        let newStatus;
+        let newAction;
 
-      if (oldStatus === 'unsubscribed') {
-        [newStatus, newAction] = ['subscribed', 'Unsubscribe'];
-      } else {
-        [newStatus, newAction] = ['unsubscribed', 'Subscribe'];
-      }
+        if (oldStatus === 'unsubscribed') {
+          [newStatus, newAction] = ['subscribed', 'Unsubscribe'];
+        } else {
+          [newStatus, newAction] = ['unsubscribed', 'Subscribe'];
+        }
 
-      $btn.removeClass('disabled');
+        $btn.removeClass('disabled');
 
-      this.$buttons.attr('data-status', newStatus);
-      this.$buttons.find('> span').text(newAction);
+        this.$buttons.attr('data-status', newStatus);
+        this.$buttons.find('> span').text(newAction);
 
-      this.$buttons.map((i, button) => {
-        const $button = $(button);
-        const originalTitle = $button.attr('data-original-title');
+        this.$buttons.map((i, button) => {
+          const $button = $(button);
+          const originalTitle = $button.attr('data-original-title');
 
-        if (originalTitle) {
-          ProjectLabelSubscription.setNewTitle($button, originalTitle, newStatus, newAction);
-        }
+          if (originalTitle) {
+            ProjectLabelSubscription.setNewTitle($button, originalTitle, newStatus, newAction);
+          }
 
-        return button;
-      });
-    }).catch(() => flash(__('There was an error subscribing to this label.')));
+          return button;
+        });
+      })
+      .catch(() => flash(__('There was an error subscribing to this label.')));
   }
 
   static setNewTitle($button, originalTitle, newStatus) {
diff --git a/app/assets/javascripts/project_select.js b/app/assets/javascripts/project_select.js
index eaaeda8b339..f1fff173619 100644
--- a/app/assets/javascripts/project_select.js
+++ b/app/assets/javascripts/project_select.js
@@ -16,28 +16,28 @@ export default function projectSelect() {
     this.withMergeRequestsEnabled = $(select).data('withMergeRequestsEnabled');
     this.allowClear = $(select).data('allowClear') || false;
 
-    placeholder = "Search for project";
+    placeholder = 'Search for project';
     if (this.includeGroups) {
-      placeholder += " or group";
+      placeholder += ' or group';
     }
 
     $(select).select2({
       placeholder: placeholder,
       minimumInputLength: 0,
-      query: (function (_this) {
-        return function (query) {
+      query: (function(_this) {
+        return function(query) {
           var finalCallback, projectsCallback;
-          finalCallback = function (projects) {
+          finalCallback = function(projects) {
             var data;
             data = {
-              results: projects
+              results: projects,
             };
             return query.callback(data);
           };
           if (_this.includeGroups) {
-            projectsCallback = function (projects) {
+            projectsCallback = function(projects) {
               var groupsCallback;
-              groupsCallback = function (groups) {
+              groupsCallback = function(groups) {
                 var data;
                 data = groups.concat(projects);
                 return finalCallback(data);
@@ -48,17 +48,26 @@ export default function projectSelect() {
             projectsCallback = finalCallback;
           }
           if (_this.groupId) {
-            return Api.groupProjects(_this.groupId, query.term, {
-              with_issues_enabled: _this.withIssuesEnabled,
-              with_merge_requests_enabled: _this.withMergeRequestsEnabled,
-            }, projectsCallback);
+            return Api.groupProjects(
+              _this.groupId,
+              query.term,
+              {
+                with_issues_enabled: _this.withIssuesEnabled,
+                with_merge_requests_enabled: _this.withMergeRequestsEnabled,
+              },
+              projectsCallback,
+            );
           } else {
-            return Api.projects(query.term, {
-              order_by: _this.orderBy,
-              with_issues_enabled: _this.withIssuesEnabled,
-              with_merge_requests_enabled: _this.withMergeRequestsEnabled,
-              membership: !_this.allProjects,
-            }, projectsCallback);
+            return Api.projects(
+              query.term,
+              {
+                order_by: _this.orderBy,
+                with_issues_enabled: _this.withIssuesEnabled,
+                with_merge_requests_enabled: _this.withMergeRequestsEnabled,
+                membership: !_this.allProjects,
+              },
+              projectsCallback,
+            );
           }
         };
       })(this),
@@ -69,7 +78,7 @@ export default function projectSelect() {
           url: project.web_url,
         });
       },
-      text: function (project) {
+      text: function(project) {
         return project.name_with_namespace || project.name;
       },
 
@@ -79,7 +88,7 @@ export default function projectSelect() {
 
       allowClear: this.allowClear,
 
-      dropdownCssClass: "ajax-project-dropdown"
+      dropdownCssClass: 'ajax-project-dropdown',
     });
     if (simpleFilter) return select;
     return new ProjectSelectComboButton(select);
diff --git a/app/assets/javascripts/project_select_combo_button.js b/app/assets/javascripts/project_select_combo_button.js
index 9b404896e86..3dbac3ff942 100644
--- a/app/assets/javascripts/project_select_combo_button.js
+++ b/app/assets/javascripts/project_select_combo_button.js
@@ -14,10 +14,11 @@ export default class ProjectSelectComboButton {
   }
 
   bindEvents() {
-    this.projectSelectInput.siblings('.new-project-item-select-button')
+    this.projectSelectInput
+      .siblings('.new-project-item-select-button')
       .on('click', e => this.openDropdown(e));
 
-    this.newItemBtn.on('click', (e) => {
+    this.newItemBtn.on('click', e => {
       if (!this.getProjectFromLocalStorage()) {
         e.preventDefault();
         this.openDropdown(e);
@@ -31,14 +32,21 @@ export default class ProjectSelectComboButton {
     const localStorageIsSafe = AccessorUtilities.isLocalStorageAccessSafe();
 
     if (localStorageIsSafe) {
-      this.localStorageKey = ['group', this.groupId, this.formattedText.localStorageItemType, 'recent-project'].join('-');
+      this.localStorageKey = [
+        'group',
+        this.groupId,
+        this.formattedText.localStorageItemType,
+        'recent-project',
+      ].join('-');
       this.setBtnTextFromLocalStorage();
     }
   }
 
   // eslint-disable-next-line class-methods-use-this
   openDropdown(event) {
-    $(event.currentTarget).siblings('.project-item-select').select2('open');
+    $(event.currentTarget)
+      .siblings('.project-item-select')
+      .select2('open');
   }
 
   selectProject() {
@@ -86,8 +94,14 @@ export default class ProjectSelectComboButton {
     const defaultTextPrefix = this.resourceLabel;
 
     // the trailing slice call depluralizes each of these strings (e.g. new-issues -> new-issue)
-    const localStorageItemType = `new-${this.resourceType.split('_').join('-').slice(0, -1)}`;
-    const presetTextSuffix = this.resourceType.split('_').join(' ').slice(0, -1);
+    const localStorageItemType = `new-${this.resourceType
+      .split('_')
+      .join('-')
+      .slice(0, -1)}`;
+    const presetTextSuffix = this.resourceType
+      .split('_')
+      .join(' ')
+      .slice(0, -1);
 
     return {
       localStorageItemType, // new-issue / new-merge-request
@@ -96,4 +110,3 @@ export default class ProjectSelectComboButton {
     };
   }
 }
-
diff --git a/app/assets/javascripts/project_visibility.js b/app/assets/javascripts/project_visibility.js
index a52ac768e57..aaf6723c85c 100644
--- a/app/assets/javascripts/project_visibility.js
+++ b/app/assets/javascripts/project_visibility.js
@@ -7,7 +7,7 @@ function setVisibilityOptions(namespaceSelector) {
   const selectedNamespace = namespaceSelector.options[namespaceSelector.selectedIndex];
   const { name, visibility, visibilityLevel, showPath, editPath } = selectedNamespace.dataset;
 
-  document.querySelectorAll('.visibility-level-setting .form-check').forEach((option) => {
+  document.querySelectorAll('.visibility-level-setting .form-check').forEach(option => {
     const optionInput = option.querySelector('input[type=radio]');
     const optionValue = optionInput ? optionInput.value : 0;
     const optionTitle = option.querySelector('.option-title');
@@ -20,8 +20,7 @@ function setVisibilityOptions(namespaceSelector) {
         optionInput.disabled = true;
         const reason = option.querySelector('.option-disabled-reason');
         if (reason) {
-          reason.innerHTML =
-            `This project cannot be ${optionName} because the visibility of
+          reason.innerHTML = `This project cannot be ${optionName} because the visibility of
             <a href="${showPath}">${name}</a> is ${visibility}. To make this project
             ${optionName}, you must first <a href="${editPath}">change the visibility</a>
             of the parent group.`;
diff --git a/app/assets/javascripts/prometheus_metrics/prometheus_metrics.js b/app/assets/javascripts/prometheus_metrics/prometheus_metrics.js
index 078ccbbbac2..8380cfb6c59 100644
--- a/app/assets/javascripts/prometheus_metrics/prometheus_metrics.js
+++ b/app/assets/javascripts/prometheus_metrics/prometheus_metrics.js
@@ -65,10 +65,14 @@ export default class PrometheusMetrics {
     let totalMissingEnvVarMetrics = 0;
     let totalExporters = 0;
 
-    metrics.forEach((metric) => {
+    metrics.forEach(metric => {
       if (metric.active_metrics > 0) {
         totalExporters += 1;
-        this.$monitoredMetricsList.append(`<li>${_.escape(metric.group)}<span class="badge">${_.escape(metric.active_metrics)}</span></li>`);
+        this.$monitoredMetricsList.append(
+          `<li>${_.escape(metric.group)}<span class="badge">${_.escape(
+            metric.active_metrics,
+          )}</span></li>`,
+        );
         totalMonitoredMetrics += metric.active_metrics;
         if (metric.metrics_missing_requirements > 0) {
           this.$missingEnvVarMetricsList.append(`<li>${_.escape(metric.group)}</li>`);
@@ -78,17 +82,26 @@ export default class PrometheusMetrics {
     });
 
     if (totalMonitoredMetrics === 0) {
-      const emptyCommonMetricsText = sprintf(s__('PrometheusService|<p class="text-tertiary">No <a href="%{docsUrl}">common metrics</a> were found</p>'), {
-        docsUrl: this.helpMetricsPath,
-      }, false);
+      const emptyCommonMetricsText = sprintf(
+        s__(
+          'PrometheusService|<p class="text-tertiary">No <a href="%{docsUrl}">common metrics</a> were found</p>',
+        ),
+        {
+          docsUrl: this.helpMetricsPath,
+        },
+        false,
+      );
       this.$monitoredMetricsEmpty.empty();
       this.$monitoredMetricsEmpty.append(emptyCommonMetricsText);
       this.showMonitoringMetricsPanelState(PANEL_STATE.EMPTY);
     } else {
-      const metricsCountText = sprintf(s__('PrometheusService|%{exporters} with %{metrics} were found'), {
-        exporters: n__('%d exporter', '%d exporters', totalExporters),
-        metrics: n__('%d metric', '%d metrics', totalMonitoredMetrics),
-      });
+      const metricsCountText = sprintf(
+        s__('PrometheusService|%{exporters} with %{metrics} were found'),
+        {
+          exporters: n__('%d exporter', '%d exporters', totalExporters),
+          metrics: n__('%d metric', '%d metrics', totalMonitoredMetrics),
+        },
+      );
       this.$monitoredMetricsCount.text(metricsCountText);
       this.showMonitoringMetricsPanelState(PANEL_STATE.LIST);
 
@@ -102,7 +115,8 @@ export default class PrometheusMetrics {
   loadActiveMetrics() {
     this.showMonitoringMetricsPanelState(PANEL_STATE.LOADING);
     backOff((next, stop) => {
-      axios.get(this.activeMetricsEndpoint)
+      axios
+        .get(this.activeMetricsEndpoint)
         .then(({ data }) => {
           if (data && data.success) {
             stop(data);
@@ -117,7 +131,7 @@ export default class PrometheusMetrics {
         })
         .catch(stop);
     })
-      .then((res) => {
+      .then(res => {
         if (res && res.data && res.data.length) {
           this.populateActiveMetrics(res.data);
         } else {
diff --git a/app/assets/javascripts/raven/raven_config.js b/app/assets/javascripts/raven/raven_config.js
index 658caeecde1..338006ce2b9 100644
--- a/app/assets/javascripts/raven/raven_config.js
+++ b/app/assets/javascripts/raven/raven_config.js
@@ -9,7 +9,7 @@ const IGNORE_ERRORS = [
   'canvas.contentDocument',
   'MyApp_RemoveAllHighlights',
   'http://tt.epicplay.com',
-  'Can\'t find variable: ZiteReader',
+  "Can't find variable: ZiteReader",
   'jigsaw is not defined',
   'ComboSearch is not defined',
   'http://loading.retry.widdit.com/',
diff --git a/app/assets/javascripts/ref_select_dropdown.js b/app/assets/javascripts/ref_select_dropdown.js
index 95c5cf7b345..75bac035aca 100644
--- a/app/assets/javascripts/ref_select_dropdown.js
+++ b/app/assets/javascripts/ref_select_dropdown.js
@@ -2,7 +2,8 @@ import $ from 'jquery';
 
 class RefSelectDropdown {
   constructor($dropdownButton, availableRefs) {
-    const availableRefsValue = availableRefs || JSON.parse(document.getElementById('availableRefs').innerHTML);
+    const availableRefsValue =
+      availableRefs || JSON.parse(document.getElementById('availableRefs').innerHTML);
     $dropdownButton.glDropdown({
       data: availableRefsValue,
       filterable: true,
@@ -29,7 +30,7 @@ class RefSelectDropdown {
     const $fieldInput = $(`input[name="${$dropdownButton.data('fieldName')}"]`, $dropdownContainer);
     const $filterInput = $('input[type="search"]', $dropdownContainer);
 
-    $filterInput.on('keyup', (e) => {
+    $filterInput.on('keyup', e => {
       const keyCode = e.keyCode || e.which;
       if (keyCode !== 13) return;
 
diff --git a/app/assets/javascripts/settings_panels.js b/app/assets/javascripts/settings_panels.js
index b38421bdf1c..d22aca35e09 100644
--- a/app/assets/javascripts/settings_panels.js
+++ b/app/assets/javascripts/settings_panels.js
@@ -3,10 +3,14 @@ import { __ } from './locale';
 
 function expandSection($section) {
   $section.find('.js-settings-toggle:not(.js-settings-toggle-trigger-only)').text(__('Collapse'));
-  $section.find('.settings-content').off('scroll.expandSection').scrollTop(0);
+  $section
+    .find('.settings-content')
+    .off('scroll.expandSection')
+    .scrollTop(0);
   $section.addClass('expanded');
   if (!$section.hasClass('no-animate')) {
-    $section.addClass('animating')
+    $section
+      .addClass('animating')
       .one('animationend.animateSection', () => $section.removeClass('animating'));
   }
 }
@@ -16,7 +20,8 @@ function closeSection($section) {
   $section.find('.settings-content').on('scroll.expandSection', () => expandSection($section));
   $section.removeClass('expanded');
   if (!$section.hasClass('no-animate')) {
-    $section.addClass('animating')
+    $section
+      .addClass('animating')
       .one('animationend.animateSection', () => $section.removeClass('animating'));
   }
 }
diff --git a/app/assets/javascripts/single_file_diff.js b/app/assets/javascripts/single_file_diff.js
index 99c93952e2a..f2b9d75dd00 100644
--- a/app/assets/javascripts/single_file_diff.js
+++ b/app/assets/javascripts/single_file_diff.js
@@ -10,8 +10,10 @@ import syntaxHighlight from './syntax_highlight';
 
 const WRAPPER = '<div class="diff-content"></div>';
 const LOADING_HTML = '<i class="fa fa-spinner fa-spin"></i>';
-const ERROR_HTML = '<div class="nothing-here-block"><i class="fa fa-warning"></i> Could not load diff</div>';
-const COLLAPSED_HTML = '<div class="nothing-here-block diff-collapsed">This diff is collapsed. <button class="click-to-expand btn btn-link">Click to expand it.</button></div>';
+const ERROR_HTML =
+  '<div class="nothing-here-block"><i class="fa fa-warning"></i> Could not load diff</div>';
+const COLLAPSED_HTML =
+  '<div class="nothing-here-block diff-collapsed">This diff is collapsed. <button class="click-to-expand btn btn-link">Click to expand it.</button></div>';
 
 export default class SingleFileDiff {
   constructor(file) {
@@ -23,23 +25,36 @@ export default class SingleFileDiff {
     this.isOpen = !this.diffForPath;
     if (this.diffForPath) {
       this.collapsedContent = this.content;
-      this.loadingContent = $(WRAPPER).addClass('loading').html(LOADING_HTML).hide();
+      this.loadingContent = $(WRAPPER)
+        .addClass('loading')
+        .html(LOADING_HTML)
+        .hide();
       this.content = null;
       this.collapsedContent.after(this.loadingContent);
       this.$toggleIcon.addClass('fa-caret-right');
     } else {
-      this.collapsedContent = $(WRAPPER).html(COLLAPSED_HTML).hide();
+      this.collapsedContent = $(WRAPPER)
+        .html(COLLAPSED_HTML)
+        .hide();
       this.content.after(this.collapsedContent);
       this.$toggleIcon.addClass('fa-caret-down');
     }
 
-    $('.js-file-title, .click-to-expand', this.file).on('click', (function (e) {
-      this.toggleDiff($(e.target));
-    }).bind(this));
+    $('.js-file-title, .click-to-expand', this.file).on(
+      'click',
+      function(e) {
+        this.toggleDiff($(e.target));
+      }.bind(this),
+    );
   }
 
   toggleDiff($target, cb) {
-    if (!$target.hasClass('js-file-title') && !$target.hasClass('click-to-expand') && !$target.hasClass('diff-toggle-caret')) return;
+    if (
+      !$target.hasClass('js-file-title') &&
+      !$target.hasClass('click-to-expand') &&
+      !$target.hasClass('diff-toggle-caret')
+    )
+      return;
     this.isOpen = !this.isOpen;
     if (!this.isOpen && !this.hasError) {
       this.content.hide();
@@ -65,7 +80,8 @@ export default class SingleFileDiff {
     this.collapsedContent.hide();
     this.loadingContent.show();
 
-    axios.get(this.diffForPath)
+    axios
+      .get(this.diffForPath)
       .then(({ data }) => {
         this.loadingContent.hide();
         if (data.html) {
diff --git a/app/assets/javascripts/smart_interval.js b/app/assets/javascripts/smart_interval.js
index 5e385400747..8ca590123ae 100644
--- a/app/assets/javascripts/smart_interval.js
+++ b/app/assets/javascripts/smart_interval.js
@@ -93,7 +93,9 @@ export default class SmartInterval {
   destroy() {
     this.cancel();
     document.removeEventListener('visibilitychange', this.handleVisibilityChange);
-    $(document).off('visibilitychange').off('beforeunload');
+    $(document)
+      .off('visibilitychange')
+      .off('beforeunload');
   }
 
   /* private */
@@ -111,11 +113,12 @@ export default class SmartInterval {
 
   triggerCallback() {
     this.isLoading = true;
-    this.cfg.callback()
+    this.cfg
+      .callback()
       .then(() => {
         this.isLoading = false;
       })
-      .catch((err) => {
+      .catch(err => {
         this.isLoading = false;
         throw err;
       });
@@ -134,9 +137,9 @@ export default class SmartInterval {
 
   handleVisibilityChange(e) {
     this.state.pageVisibility = e.target.visibilityState;
-    const intervalAction = this.isPageVisible() ?
-      this.onVisibilityVisible :
-      this.onVisibilityHidden;
+    const intervalAction = this.isPageVisible()
+      ? this.onVisibilityVisible
+      : this.onVisibilityHidden;
 
     intervalAction.apply(this);
   }
@@ -162,7 +165,9 @@ export default class SmartInterval {
     this.setCurrentInterval(nextInterval);
   }
 
-  isPageVisible() { return this.state.pageVisibility === 'visible'; }
+  isPageVisible() {
+    return this.state.pageVisibility === 'visible';
+  }
 
   stopTimer() {
     const { state } = this;
@@ -170,4 +175,3 @@ export default class SmartInterval {
     state.intervalId = window.clearInterval(state.intervalId);
   }
 }
-
diff --git a/app/assets/javascripts/star.js b/app/assets/javascripts/star.js
index f5a7fdae5d7..007b83e1927 100644
--- a/app/assets/javascripts/star.js
+++ b/app/assets/javascripts/star.js
@@ -11,10 +11,14 @@ export default class Star {
       const $starSpan = $this.find('span');
       const $startIcon = $this.find('svg');
 
-      axios.post($this.data('endpoint'))
+      axios
+        .post($this.data('endpoint'))
         .then(({ data }) => {
           const isStarred = $starSpan.hasClass('starred');
-          $this.parent().find('.star-count').text(data.star_count);
+          $this
+            .parent()
+            .find('.star-count')
+            .text(data.star_count);
 
           if (isStarred) {
             $starSpan.removeClass('starred').text(s__('StarProject|Star'));
diff --git a/app/assets/javascripts/task_list.js b/app/assets/javascripts/task_list.js
index 48782e63b9b..edefb3735d7 100644
--- a/app/assets/javascripts/task_list.js
+++ b/app/assets/javascripts/task_list.js
@@ -26,7 +26,11 @@ export default class TaskList {
     // Prevent duplicate event bindings
     this.disable();
     $(`${this.selector} .js-task-list-container`).taskList('enable');
-    $(document).on('tasklist:changed', `${this.selector} .js-task-list-container`, this.update.bind(this));
+    $(document).on(
+      'tasklist:changed',
+      `${this.selector} .js-task-list-container`,
+      this.update.bind(this),
+    );
   }
 
   disable() {
@@ -41,7 +45,8 @@ export default class TaskList {
       [this.fieldName]: $target.val(),
     };
 
-    return axios.patch($target.data('updateUrl') || $('form.js-issuable-update').attr('action'), patchData)
+    return axios
+      .patch($target.data('updateUrl') || $('form.js-issuable-update').attr('action'), patchData)
       .then(({ data }) => this.onSuccess(data))
       .catch(err => this.onError(err));
   }
diff --git a/app/assets/javascripts/templates/issuable_template_selector.js b/app/assets/javascripts/templates/issuable_template_selector.js
index 74166313940..6065770e68d 100644
--- a/app/assets/javascripts/templates/issuable_template_selector.js
+++ b/app/assets/javascripts/templates/issuable_template_selector.js
@@ -31,12 +31,18 @@ export default class IssuableTemplateSelector extends TemplateSelector {
 
   requestFile(query) {
     this.startLoadingSpinner();
-    Api.issueTemplate(this.namespacePath, this.projectPath, query.name, this.issuableType, (err, currentTemplate) => {
-      this.currentTemplate = currentTemplate;
-      this.stopLoadingSpinner();
-      if (err) return; // Error handled by global AJAX error handler
-      this.setInputValueToTemplateContent();
-    });
+    Api.issueTemplate(
+      this.namespacePath,
+      this.projectPath,
+      query.name,
+      this.issuableType,
+      (err, currentTemplate) => {
+        this.currentTemplate = currentTemplate;
+        this.stopLoadingSpinner();
+        if (err) return; // Error handled by global AJAX error handler
+        this.setInputValueToTemplateContent();
+      },
+    );
     return;
   }
 
diff --git a/app/assets/javascripts/terminal/terminal.js b/app/assets/javascripts/terminal/terminal.js
index 74c5bbe45a4..b24aa8a3a34 100644
--- a/app/assets/javascripts/terminal/terminal.js
+++ b/app/assets/javascripts/terminal/terminal.js
@@ -4,10 +4,14 @@ import * as fit from 'xterm/lib/addons/fit/fit';
 
 export default class GLTerminal {
   constructor(options = {}) {
-    this.options = Object.assign({}, {
-      cursorBlink: true,
-      screenKeys: true,
-    }, options);
+    this.options = Object.assign(
+      {},
+      {
+        cursorBlink: true,
+        screenKeys: true,
+      },
+      options,
+    );
 
     this.container = document.querySelector(options.selector);
 
diff --git a/app/assets/javascripts/test_utils/simulate_drag.js b/app/assets/javascripts/test_utils/simulate_drag.js
index a5c18042ce7..be9ebc81c6b 100644
--- a/app/assets/javascripts/test_utils/simulate_drag.js
+++ b/app/assets/javascripts/test_utils/simulate_drag.js
@@ -4,15 +4,43 @@ function simulateEvent(el, type, options = {}) {
 
   if (/^mouse/.test(type)) {
     event = el.ownerDocument.createEvent('MouseEvents');
-    event.initMouseEvent(type, true, true, el.ownerDocument.defaultView,
-    options.button, options.screenX, options.screenY, options.clientX, options.clientY,
-    options.ctrlKey, options.altKey, options.shiftKey, options.metaKey, options.button, el);
+    event.initMouseEvent(
+      type,
+      true,
+      true,
+      el.ownerDocument.defaultView,
+      options.button,
+      options.screenX,
+      options.screenY,
+      options.clientX,
+      options.clientY,
+      options.ctrlKey,
+      options.altKey,
+      options.shiftKey,
+      options.metaKey,
+      options.button,
+      el,
+    );
   } else {
     event = el.ownerDocument.createEvent('CustomEvent');
 
-    event.initCustomEvent(type, true, true, el.ownerDocument.defaultView,
-    options.button, options.screenX, options.screenY, options.clientX, options.clientY,
-    options.ctrlKey, options.altKey, options.shiftKey, options.metaKey, options.button, el);
+    event.initCustomEvent(
+      type,
+      true,
+      true,
+      el.ownerDocument.defaultView,
+      options.button,
+      options.screenX,
+      options.screenY,
+      options.clientX,
+      options.clientY,
+      options.ctrlKey,
+      options.altKey,
+      options.shiftKey,
+      options.metaKey,
+      options.button,
+      el,
+    );
 
     event.dataTransfer = {
       data: {},
@@ -37,14 +65,16 @@ function simulateEvent(el, type, options = {}) {
 }
 
 function isLast(target) {
-  const el = typeof target.el === 'string' ? document.getElementById(target.el.substr(1)) : target.el;
+  const el =
+    typeof target.el === 'string' ? document.getElementById(target.el.substr(1)) : target.el;
   const { children } = el;
 
   return children.length - 1 === target.index;
 }
 
 function getTarget(target) {
-  const el = typeof target.el === 'string' ? document.getElementById(target.el.substr(1)) : target.el;
+  const el =
+    typeof target.el === 'string' ? document.getElementById(target.el.substr(1)) : target.el;
   const { children } = el;
 
   return (
@@ -58,13 +88,13 @@ function getTarget(target) {
 function getRect(el) {
   const rect = el.getBoundingClientRect();
   const width = rect.right - rect.left;
-  const height = (rect.bottom - rect.top) + 10;
+  const height = rect.bottom - rect.top + 10;
 
   return {
     x: rect.left,
     y: rect.top,
-    cx: rect.left + (width / 2),
-    cy: rect.top + (height / 2),
+    cx: rect.left + width / 2,
+    cy: rect.top + height / 2,
     w: width,
     h: height,
     hw: width / 2,
@@ -112,8 +142,8 @@ export default function simulateDrag(options) {
 
   const dragInterval = setInterval(() => {
     const progress = (new Date().getTime() - startTime) / duration;
-    const x = (fromRect.cx + ((toRect.cx - fromRect.cx) * progress));
-    const y = (fromRect.cy + ((toRect.cy - fromRect.cy) * progress));
+    const x = fromRect.cx + (toRect.cx - fromRect.cx) * progress;
+    const y = fromRect.cy + (toRect.cy - fromRect.cy) * progress;
     const overEl = fromEl.ownerDocument.elementFromPoint(x, y);
 
     simulateEvent(overEl, 'mousemove', {
diff --git a/app/assets/javascripts/test_utils/simulate_input.js b/app/assets/javascripts/test_utils/simulate_input.js
index 90c1b7cb57e..c300c806e6d 100644
--- a/app/assets/javascripts/test_utils/simulate_input.js
+++ b/app/assets/javascripts/test_utils/simulate_input.js
@@ -12,7 +12,7 @@ export default function simulateInput(target, text) {
   }
 
   if (text.length > 0) {
-    Array.prototype.forEach.call(text, (char) => {
+    Array.prototype.forEach.call(text, char => {
       input.value += char;
       triggerEvents(input);
     });
diff --git a/app/assets/javascripts/toggle_buttons.js b/app/assets/javascripts/toggle_buttons.js
index 199b14458ed..d83ffc7e211 100644
--- a/app/assets/javascripts/toggle_buttons.js
+++ b/app/assets/javascripts/toggle_buttons.js
@@ -49,7 +49,7 @@ function onToggleClicked(toggle, input, clickCallback) {
 export default function setupToggleButtons(container, clickCallback = () => {}) {
   const toggles = container.querySelectorAll('.js-project-feature-toggle');
 
-  toggles.forEach((toggle) => {
+  toggles.forEach(toggle => {
     const input = toggle.querySelector('.js-project-feature-toggle-input');
     const isOn = convertPermissionToBoolean(input.value);
 
diff --git a/app/assets/javascripts/tree.js b/app/assets/javascripts/tree.js
index 066fd6278a7..3e659c9e7ea 100644
--- a/app/assets/javascripts/tree.js
+++ b/app/assets/javascripts/tree.js
@@ -8,7 +8,7 @@ export default class TreeView {
     this.initKeyNav();
     // Code browser tree slider
     // Make the entire tree-item row clickable, but not if clicking another link (like a commit message)
-    $(".tree-content-holder .tree-item").on('click', function(e) {
+    $('.tree-content-holder .tree-item').on('click', function(e) {
       var $clickedEl, path;
       $clickedEl = $(e.target);
       path = $('.tree-item-file-name a', this).attr('href');
@@ -27,33 +27,33 @@ export default class TreeView {
 
   initKeyNav() {
     var li, liSelected;
-    li = $("tr.tree-item");
+    li = $('tr.tree-item');
     liSelected = null;
     return $('body').keydown(function(e) {
       var next, path;
-      if ($("input:focus").length > 0 && (e.which === 38 || e.which === 40)) {
+      if ($('input:focus').length > 0 && (e.which === 38 || e.which === 40)) {
         return false;
       }
       if (e.which === 40) {
         if (liSelected) {
           next = liSelected.next();
           if (next.length > 0) {
-            liSelected.removeClass("selected");
-            liSelected = next.addClass("selected");
+            liSelected.removeClass('selected');
+            liSelected = next.addClass('selected');
           }
         } else {
-          liSelected = li.eq(0).addClass("selected");
+          liSelected = li.eq(0).addClass('selected');
         }
         return $(liSelected).focus();
       } else if (e.which === 38) {
         if (liSelected) {
           next = liSelected.prev();
           if (next.length > 0) {
-            liSelected.removeClass("selected");
-            liSelected = next.addClass("selected");
+            liSelected.removeClass('selected');
+            liSelected = next.addClass('selected');
           }
         } else {
-          liSelected = li.last().addClass("selected");
+          liSelected = li.last().addClass('selected');
         }
         return $(liSelected).focus();
       } else if (e.which === 13) {
diff --git a/app/assets/javascripts/u2f/authenticate.js b/app/assets/javascripts/u2f/authenticate.js
index 78fd7ad441f..abfc81e681e 100644
--- a/app/assets/javascripts/u2f/authenticate.js
+++ b/app/assets/javascripts/u2f/authenticate.js
@@ -49,7 +49,7 @@ export default class U2FAuthenticate {
 
   start() {
     return importU2FLibrary()
-      .then((utils) => {
+      .then(utils => {
         this.u2fUtils = utils;
         this.renderInProgress();
       })
@@ -57,14 +57,19 @@ export default class U2FAuthenticate {
   }
 
   authenticate() {
-    return this.u2fUtils.sign(this.appId, this.challenge, this.signRequests,
-      (response) => {
+    return this.u2fUtils.sign(
+      this.appId,
+      this.challenge,
+      this.signRequests,
+      response => {
         if (response.errorCode) {
           const error = new U2FError(response.errorCode, 'authenticate');
           return this.renderError(error);
         }
         return this.renderAuthenticated(JSON.stringify(response));
-      }, 10);
+      },
+      10,
+    );
   }
 
   renderTemplate(name, params) {
@@ -99,5 +104,4 @@ export default class U2FAuthenticate {
     this.container[0].classList.add('hidden');
     this.fallbackUI.classList.remove('hidden');
   }
-
 }
diff --git a/app/assets/javascripts/u2f/register.js b/app/assets/javascripts/u2f/register.js
index 01e259a741d..43c814c8070 100644
--- a/app/assets/javascripts/u2f/register.js
+++ b/app/assets/javascripts/u2f/register.js
@@ -34,7 +34,7 @@ export default class U2FRegister {
 
   start() {
     return importU2FLibrary()
-      .then((utils) => {
+      .then(utils => {
         this.u2fUtils = utils;
         this.renderSetup();
       })
@@ -42,14 +42,19 @@ export default class U2FRegister {
   }
 
   register() {
-    return this.u2fUtils.register(this.appId, this.registerRequests, this.signRequests,
-      (response) => {
+    return this.u2fUtils.register(
+      this.appId,
+      this.registerRequests,
+      this.signRequests,
+      response => {
         if (response.errorCode) {
           const error = new U2FError(response.errorCode, 'register');
           return this.renderError(error);
         }
         return this.renderRegistered(JSON.stringify(response));
-      }, 10);
+      },
+      10,
+    );
   }
 
   renderTemplate(name, params) {
diff --git a/app/assets/javascripts/u2f/util.js b/app/assets/javascripts/u2f/util.js
index 5778f00332d..b706481c02f 100644
--- a/app/assets/javascripts/u2f/util.js
+++ b/app/assets/javascripts/u2f/util.js
@@ -19,11 +19,10 @@ function getChromeVersion(userAgent) {
 export function canInjectU2fApi(userAgent) {
   const isSupportedChrome = isChrome(userAgent) && getChromeVersion(userAgent) >= 41;
   const isSupportedOpera = isOpera(userAgent) && getOperaVersion(userAgent) >= 40;
-  const isMobile = (
+  const isMobile =
     userAgent.indexOf('droid') >= 0 ||
     userAgent.indexOf('CriOS') >= 0 ||
-    /\b(iPad|iPhone|iPod)(?=;)/.test(userAgent)
-  );
+    /\b(iPad|iPhone|iPod)(?=;)/.test(userAgent);
   return (isSupportedChrome || isSupportedOpera) && !isMobile;
 }
 
diff --git a/app/assets/javascripts/ui_development_kit.js b/app/assets/javascripts/ui_development_kit.js
index 9b242ea779d..be18ac5da24 100644
--- a/app/assets/javascripts/ui_development_kit.js
+++ b/app/assets/javascripts/ui_development_kit.js
@@ -4,13 +4,17 @@ import Api from './api';
 export default () => {
   $('#js-project-dropdown').glDropdown({
     data: (term, callback) => {
-      Api.projects(term, {
-        order_by: 'last_activity_at',
-      }, (data) => {
-        callback(data);
-      });
+      Api.projects(
+        term,
+        {
+          order_by: 'last_activity_at',
+        },
+        data => {
+          callback(data);
+        },
+      );
     },
-    text: project => (project.name_with_namespace || project.name),
+    text: project => project.name_with_namespace || project.name,
     selectable: true,
     fieldName: 'author_id',
     filterable: true,
@@ -18,6 +22,6 @@ export default () => {
       fields: ['name_with_namespace'],
     },
     id: data => data.id,
-    isSelected: data => (data.id === 2),
+    isSelected: data => data.id === 2,
   });
 };
diff --git a/app/assets/javascripts/usage_ping_consent.js b/app/assets/javascripts/usage_ping_consent.js
index ae3fde190e3..05607f09a7e 100644
--- a/app/assets/javascripts/usage_ping_consent.js
+++ b/app/assets/javascripts/usage_ping_consent.js
@@ -4,7 +4,7 @@ import Flash, { hideFlash } from './flash';
 import { convertPermissionToBoolean } from './lib/utils/common_utils';
 
 export default () => {
-  $('body').on('click', '.js-usage-consent-action', (e) => {
+  $('body').on('click', '.js-usage-consent-action', e => {
     e.preventDefault();
     e.stopImmediatePropagation(); // overwrite rails listener
 
@@ -18,7 +18,8 @@ export default () => {
 
     const hideConsentMessage = () => hideFlash(document.querySelector('.ping-consent-message'));
 
-    axios.put(url, data)
+    axios
+      .put(url, data)
       .then(() => {
         hideConsentMessage();
       })
diff --git a/app/assets/javascripts/users_select.js b/app/assets/javascripts/users_select.js
index e2259a8d07b..4b090212d83 100644
--- a/app/assets/javascripts/users_select.js
+++ b/app/assets/javascripts/users_select.js
@@ -15,8 +15,8 @@ function UsersSelect(currentUser, els, options = {}) {
   var $els;
   this.users = this.users.bind(this);
   this.user = this.user.bind(this);
-  this.usersPath = "/autocomplete/users.json";
-  this.userPath = "/autocomplete/users/:id.json";
+  this.usersPath = '/autocomplete/users.json';
+  this.userPath = '/autocomplete/users/:id.json';
   if (currentUser != null) {
     if (typeof currentUser === 'object') {
       this.currentUser = currentUser;
@@ -33,156 +33,180 @@ function UsersSelect(currentUser, els, options = {}) {
     $els = $('.js-user-search');
   }
 
-  $els.each((function(_this) {
-    return function(i, dropdown) {
-      var options = {};
-      var $block, $collapsedSidebar, $dropdown, $loading, $selectbox, $value, abilityName, assignTo, assigneeTemplate, collapsedAssigneeTemplate, defaultLabel, defaultNullUser, firstUser, issueURL, selectedId, selectedIdDefault, showAnyUser, showNullUser, showMenuAbove;
-      $dropdown = $(dropdown);
-      options.projectId = $dropdown.data('projectId');
-      options.groupId = $dropdown.data('groupId');
-      options.showCurrentUser = $dropdown.data('currentUser');
-      options.todoFilter = $dropdown.data('todoFilter');
-      options.todoStateFilter = $dropdown.data('todoStateFilter');
-      showNullUser = $dropdown.data('nullUser');
-      defaultNullUser = $dropdown.data('nullUserDefault');
-      showMenuAbove = $dropdown.data('showMenuAbove');
-      showAnyUser = $dropdown.data('anyUser');
-      firstUser = $dropdown.data('firstUser');
-      options.authorId = $dropdown.data('authorId');
-      defaultLabel = $dropdown.data('defaultLabel');
-      issueURL = $dropdown.data('issueUpdate');
-      $selectbox = $dropdown.closest('.selectbox');
-      $block = $selectbox.closest('.block');
-      abilityName = $dropdown.data('abilityName');
-      $value = $block.find('.value');
-      $collapsedSidebar = $block.find('.sidebar-collapsed-user');
-      $loading = $block.find('.block-loading').fadeOut();
-      selectedIdDefault = (defaultNullUser && showNullUser) ? 0 : null;
-      selectedId = $dropdown.data('selected');
-
-      if (selectedId === undefined) {
-        selectedId = selectedIdDefault;
-      }
-
-      const assignYourself = function () {
-        const unassignedSelected = $dropdown.closest('.selectbox')
-          .find(`input[name='${$dropdown.data('fieldName')}'][value=0]`);
-
-        if (unassignedSelected) {
-          unassignedSelected.remove();
+  $els.each(
+    (function(_this) {
+      return function(i, dropdown) {
+        var options = {};
+        var $block,
+          $collapsedSidebar,
+          $dropdown,
+          $loading,
+          $selectbox,
+          $value,
+          abilityName,
+          assignTo,
+          assigneeTemplate,
+          collapsedAssigneeTemplate,
+          defaultLabel,
+          defaultNullUser,
+          firstUser,
+          issueURL,
+          selectedId,
+          selectedIdDefault,
+          showAnyUser,
+          showNullUser,
+          showMenuAbove;
+        $dropdown = $(dropdown);
+        options.projectId = $dropdown.data('projectId');
+        options.groupId = $dropdown.data('groupId');
+        options.showCurrentUser = $dropdown.data('currentUser');
+        options.todoFilter = $dropdown.data('todoFilter');
+        options.todoStateFilter = $dropdown.data('todoStateFilter');
+        showNullUser = $dropdown.data('nullUser');
+        defaultNullUser = $dropdown.data('nullUserDefault');
+        showMenuAbove = $dropdown.data('showMenuAbove');
+        showAnyUser = $dropdown.data('anyUser');
+        firstUser = $dropdown.data('firstUser');
+        options.authorId = $dropdown.data('authorId');
+        defaultLabel = $dropdown.data('defaultLabel');
+        issueURL = $dropdown.data('issueUpdate');
+        $selectbox = $dropdown.closest('.selectbox');
+        $block = $selectbox.closest('.block');
+        abilityName = $dropdown.data('abilityName');
+        $value = $block.find('.value');
+        $collapsedSidebar = $block.find('.sidebar-collapsed-user');
+        $loading = $block.find('.block-loading').fadeOut();
+        selectedIdDefault = defaultNullUser && showNullUser ? 0 : null;
+        selectedId = $dropdown.data('selected');
+
+        if (selectedId === undefined) {
+          selectedId = selectedIdDefault;
         }
 
-        // Save current selected user to the DOM
-        const input = document.createElement('input');
-        input.type = 'hidden';
-        input.name = $dropdown.data('fieldName');
+        const assignYourself = function() {
+          const unassignedSelected = $dropdown
+            .closest('.selectbox')
+            .find(`input[name='${$dropdown.data('fieldName')}'][value=0]`);
 
-        const currentUserInfo = $dropdown.data('currentUserInfo');
-
-        if (currentUserInfo) {
-          input.value = currentUserInfo.id;
-          input.dataset.meta = _.escape(currentUserInfo.name);
-        } else if (_this.currentUser) {
-          input.value = _this.currentUser.id;
-        }
-
-        if ($selectbox) {
-          $dropdown.parent().before(input);
-        } else {
-          $dropdown.after(input);
-        }
-      };
-
-      if ($block[0]) {
-        $block[0].addEventListener('assignYourself', assignYourself);
-      }
-
-      const getSelectedUserInputs = function() {
-        return $selectbox
-          .find(`input[name="${$dropdown.data('fieldName')}"]`);
-      };
+          if (unassignedSelected) {
+            unassignedSelected.remove();
+          }
 
-      const getSelected = function() {
-        return getSelectedUserInputs()
-          .map((index, input) => parseInt(input.value, 10))
-          .get();
-      };
+          // Save current selected user to the DOM
+          const input = document.createElement('input');
+          input.type = 'hidden';
+          input.name = $dropdown.data('fieldName');
 
-      const checkMaxSelect = function() {
-        const maxSelect = $dropdown.data('maxSelect');
-        if (maxSelect) {
-          const selected = getSelected();
+          const currentUserInfo = $dropdown.data('currentUserInfo');
 
-          if (selected.length > maxSelect) {
-            const firstSelectedId = selected[0];
-            const firstSelected = $dropdown.closest('.selectbox')
-              .find(`input[name='${$dropdown.data('fieldName')}'][value=${firstSelectedId}]`);
+          if (currentUserInfo) {
+            input.value = currentUserInfo.id;
+            input.dataset.meta = _.escape(currentUserInfo.name);
+          } else if (_this.currentUser) {
+            input.value = _this.currentUser.id;
+          }
 
-            firstSelected.remove();
-            emitSidebarEvent('sidebar.removeAssignee', {
-              id: firstSelectedId,
-            });
+          if ($selectbox) {
+            $dropdown.parent().before(input);
+          } else {
+            $dropdown.after(input);
           }
-        }
-      };
+        };
 
-      const getMultiSelectDropdownTitle = function(selectedUser, isSelected) {
-        const selectedUsers = getSelected()
-          .filter(u => u !== 0);
-
-        const firstUser = getSelectedUserInputs()
-          .map((index, input) => ({
-            name: input.dataset.meta,
-            value: parseInt(input.value, 10),
-          }))
-          .filter(u => u.id !== 0)
-          .get(0);
-
-        if (selectedUsers.length === 0) {
-          return 'Unassigned';
-        } else if (selectedUsers.length === 1) {
-          return firstUser.name;
-        } else if (isSelected) {
-          const otherSelected = selectedUsers.filter(s => s !== selectedUser.id);
-          return `${selectedUser.name} + ${otherSelected.length} more`;
-        } else {
-          return `${firstUser.name} + ${selectedUsers.length - 1} more`;
+        if ($block[0]) {
+          $block[0].addEventListener('assignYourself', assignYourself);
         }
-      };
 
-      $('.assign-to-me-link').on('click', (e) => {
-        e.preventDefault();
-        $(e.currentTarget).hide();
+        const getSelectedUserInputs = function() {
+          return $selectbox.find(`input[name="${$dropdown.data('fieldName')}"]`);
+        };
+
+        const getSelected = function() {
+          return getSelectedUserInputs()
+            .map((index, input) => parseInt(input.value, 10))
+            .get();
+        };
+
+        const checkMaxSelect = function() {
+          const maxSelect = $dropdown.data('maxSelect');
+          if (maxSelect) {
+            const selected = getSelected();
+
+            if (selected.length > maxSelect) {
+              const firstSelectedId = selected[0];
+              const firstSelected = $dropdown
+                .closest('.selectbox')
+                .find(`input[name='${$dropdown.data('fieldName')}'][value=${firstSelectedId}]`);
+
+              firstSelected.remove();
+              emitSidebarEvent('sidebar.removeAssignee', {
+                id: firstSelectedId,
+              });
+            }
+          }
+        };
+
+        const getMultiSelectDropdownTitle = function(selectedUser, isSelected) {
+          const selectedUsers = getSelected().filter(u => u !== 0);
+
+          const firstUser = getSelectedUserInputs()
+            .map((index, input) => ({
+              name: input.dataset.meta,
+              value: parseInt(input.value, 10),
+            }))
+            .filter(u => u.id !== 0)
+            .get(0);
+
+          if (selectedUsers.length === 0) {
+            return 'Unassigned';
+          } else if (selectedUsers.length === 1) {
+            return firstUser.name;
+          } else if (isSelected) {
+            const otherSelected = selectedUsers.filter(s => s !== selectedUser.id);
+            return `${selectedUser.name} + ${otherSelected.length} more`;
+          } else {
+            return `${firstUser.name} + ${selectedUsers.length - 1} more`;
+          }
+        };
 
-        if ($dropdown.data('multiSelect')) {
-          assignYourself();
-          checkMaxSelect();
+        $('.assign-to-me-link').on('click', e => {
+          e.preventDefault();
+          $(e.currentTarget).hide();
 
-          const currentUserInfo = $dropdown.data('currentUserInfo');
-          $dropdown.find('.dropdown-toggle-text').text(getMultiSelectDropdownTitle(currentUserInfo)).removeClass('is-default');
-        } else {
-          const $input = $(`input[name="${$dropdown.data('fieldName')}"]`);
-          $input.val(gon.current_user_id);
-          selectedId = $input.val();
-          $dropdown.find('.dropdown-toggle-text').text(gon.current_user_fullname).removeClass('is-default');
-        }
-      });
-
-      $block.on('click', '.js-assign-yourself', (e) => {
-        e.preventDefault();
-        return assignTo(_this.currentUser.id);
-      });
-
-      assignTo = function(selected) {
-        var data;
-        data = {};
-        data[abilityName] = {};
-        data[abilityName].assignee_id = selected != null ? selected : null;
-        $loading.removeClass('hidden').fadeIn();
-        $dropdown.trigger('loading.gl.dropdown');
-
-        return axios.put(issueURL, data)
-          .then(({ data }) => {
+          if ($dropdown.data('multiSelect')) {
+            assignYourself();
+            checkMaxSelect();
+
+            const currentUserInfo = $dropdown.data('currentUserInfo');
+            $dropdown
+              .find('.dropdown-toggle-text')
+              .text(getMultiSelectDropdownTitle(currentUserInfo))
+              .removeClass('is-default');
+          } else {
+            const $input = $(`input[name="${$dropdown.data('fieldName')}"]`);
+            $input.val(gon.current_user_id);
+            selectedId = $input.val();
+            $dropdown
+              .find('.dropdown-toggle-text')
+              .text(gon.current_user_fullname)
+              .removeClass('is-default');
+          }
+        });
+
+        $block.on('click', '.js-assign-yourself', e => {
+          e.preventDefault();
+          return assignTo(_this.currentUser.id);
+        });
+
+        assignTo = function(selected) {
+          var data;
+          data = {};
+          data[abilityName] = {};
+          data[abilityName].assignee_id = selected != null ? selected : null;
+          $loading.removeClass('hidden').fadeIn();
+          $dropdown.trigger('loading.gl.dropdown');
+
+          return axios.put(issueURL, data).then(({ data }) => {
             var user, tooltipTitle;
             $dropdown.trigger('loaded.gl.dropdown');
             $loading.fadeOut();
@@ -190,14 +214,14 @@ function UsersSelect(currentUser, els, options = {}) {
               user = {
                 name: data.assignee.name,
                 username: data.assignee.username,
-                avatar: data.assignee.avatar_url
+                avatar: data.assignee.avatar_url,
               };
               tooltipTitle = _.escape(user.name);
             } else {
               user = {
                 name: 'Unassigned',
                 username: '',
-                avatar: ''
+                avatar: '',
               };
               tooltipTitle = __('Assignee');
             }
@@ -205,319 +229,341 @@ function UsersSelect(currentUser, els, options = {}) {
             $collapsedSidebar.attr('title', tooltipTitle).tooltip('_fixTitle');
             return $collapsedSidebar.html(collapsedAssigneeTemplate(user));
           });
-      };
-      collapsedAssigneeTemplate = _.template('<% if( avatar ) { %> <a class="author-link" href="/<%- username %>"> <img width="24" class="avatar avatar-inline s24" alt="" src="<%- avatar %>"> </a> <% } else { %> <i class="fa fa-user"></i> <% } %>');
-      assigneeTemplate = _.template('<% if (username) { %> <a class="author-link bold" href="/<%- username %>"> <% if( avatar ) { %> <img width="32" class="avatar avatar-inline s32" alt="" src="<%- avatar %>"> <% } %> <span class="author"><%- name %></span> <span class="username"> @<%- username %> </span> </a> <% } else { %> <span class="no-value assign-yourself"> No assignee - <a href="#" class="js-assign-yourself"> assign yourself </a> </span> <% } %>');
-      return $dropdown.glDropdown({
-        showMenuAbove: showMenuAbove,
-        data: function(term, callback) {
-          return _this.users(term, options, function(users) {
-            // GitLabDropdownFilter returns this.instance
-            // GitLabDropdownRemote returns this.options.instance
-            const glDropdown = this.instance || this.options.instance;
-            glDropdown.options.processData(term, users, callback);
-          }.bind(this));
-        },
-        processData: function(term, data, callback) {
-          let users = data;
-
-          // Only show assigned user list when there is no search term
-          if ($dropdown.hasClass('js-multiselect') && term.length === 0) {
-            const selectedInputs = getSelectedUserInputs();
-
-            // Potential duplicate entries when dealing with issue board
-            // because issue board is also managed by vue
-            const selectedUsers = _.uniq(selectedInputs, false, a => a.value)
-              .filter((input) => {
-                const userId = parseInt(input.value, 10);
-                const inUsersArray = users.find(u => u.id === userId);
-
-                return !inUsersArray && userId !== 0;
-              })
-              .map((input) => {
-                const userId = parseInt(input.value, 10);
-                const { avatarUrl, avatar_url, name, username } = input.dataset;
-                return {
-                  avatar_url: avatarUrl || avatar_url,
-                  id: userId,
-                  name,
-                  username,
-                };
-              });
+        };
+        collapsedAssigneeTemplate = _.template(
+          '<% if( avatar ) { %> <a class="author-link" href="/<%- username %>"> <img width="24" class="avatar avatar-inline s24" alt="" src="<%- avatar %>"> </a> <% } else { %> <i class="fa fa-user"></i> <% } %>',
+        );
+        assigneeTemplate = _.template(
+          '<% if (username) { %> <a class="author-link bold" href="/<%- username %>"> <% if( avatar ) { %> <img width="32" class="avatar avatar-inline s32" alt="" src="<%- avatar %>"> <% } %> <span class="author"><%- name %></span> <span class="username"> @<%- username %> </span> </a> <% } else { %> <span class="no-value assign-yourself"> No assignee - <a href="#" class="js-assign-yourself"> assign yourself </a> </span> <% } %>',
+        );
+        return $dropdown.glDropdown({
+          showMenuAbove: showMenuAbove,
+          data: function(term, callback) {
+            return _this.users(
+              term,
+              options,
+              function(users) {
+                // GitLabDropdownFilter returns this.instance
+                // GitLabDropdownRemote returns this.options.instance
+                const glDropdown = this.instance || this.options.instance;
+                glDropdown.options.processData(term, users, callback);
+              }.bind(this),
+            );
+          },
+          processData: function(term, data, callback) {
+            let users = data;
+
+            // Only show assigned user list when there is no search term
+            if ($dropdown.hasClass('js-multiselect') && term.length === 0) {
+              const selectedInputs = getSelectedUserInputs();
+
+              // Potential duplicate entries when dealing with issue board
+              // because issue board is also managed by vue
+              const selectedUsers = _.uniq(selectedInputs, false, a => a.value)
+                .filter(input => {
+                  const userId = parseInt(input.value, 10);
+                  const inUsersArray = users.find(u => u.id === userId);
+
+                  return !inUsersArray && userId !== 0;
+                })
+                .map(input => {
+                  const userId = parseInt(input.value, 10);
+                  const { avatarUrl, avatar_url, name, username } = input.dataset;
+                  return {
+                    avatar_url: avatarUrl || avatar_url,
+                    id: userId,
+                    name,
+                    username,
+                  };
+                });
 
-            users = data.concat(selectedUsers);
-          }
+              users = data.concat(selectedUsers);
+            }
 
-          let anyUser;
-          let index;
-          let len;
-          let name;
-          let obj;
-          let showDivider;
-          if (term.length === 0) {
-            showDivider = 0;
-            if (firstUser) {
-              // Move current user to the front of the list
-              for (index = 0, len = users.length; index < len; index += 1) {
-                obj = users[index];
-                if (obj.username === firstUser) {
-                  users.splice(index, 1);
-                  users.unshift(obj);
-                  break;
+            let anyUser;
+            let index;
+            let len;
+            let name;
+            let obj;
+            let showDivider;
+            if (term.length === 0) {
+              showDivider = 0;
+              if (firstUser) {
+                // Move current user to the front of the list
+                for (index = 0, len = users.length; index < len; index += 1) {
+                  obj = users[index];
+                  if (obj.username === firstUser) {
+                    users.splice(index, 1);
+                    users.unshift(obj);
+                    break;
+                  }
                 }
               }
-            }
-            if (showNullUser) {
-              showDivider += 1;
-              users.unshift({
-                beforeDivider: true,
-                name: 'Unassigned',
-                id: 0
-              });
-            }
-            if (showAnyUser) {
-              showDivider += 1;
-              name = showAnyUser;
-              if (name === true) {
-                name = 'Any User';
+              if (showNullUser) {
+                showDivider += 1;
+                users.unshift({
+                  beforeDivider: true,
+                  name: 'Unassigned',
+                  id: 0,
+                });
+              }
+              if (showAnyUser) {
+                showDivider += 1;
+                name = showAnyUser;
+                if (name === true) {
+                  name = 'Any User';
+                }
+                anyUser = {
+                  beforeDivider: true,
+                  name: name,
+                  id: null,
+                };
+                users.unshift(anyUser);
               }
-              anyUser = {
-                beforeDivider: true,
-                name: name,
-                id: null
-              };
-              users.unshift(anyUser);
-            }
 
-            if (showDivider) {
-              users.splice(showDivider, 0, 'divider');
-            }
+              if (showDivider) {
+                users.splice(showDivider, 0, 'divider');
+              }
 
-            if ($dropdown.hasClass('js-multiselect')) {
-              const selected = getSelected().filter(i => i !== 0);
+              if ($dropdown.hasClass('js-multiselect')) {
+                const selected = getSelected().filter(i => i !== 0);
 
-              if (selected.length > 0) {
-                if ($dropdown.data('dropdownHeader')) {
-                  showDivider += 1;
-                  users.splice(showDivider, 0, {
-                    header: $dropdown.data('dropdownHeader'),
-                  });
-                }
+                if (selected.length > 0) {
+                  if ($dropdown.data('dropdownHeader')) {
+                    showDivider += 1;
+                    users.splice(showDivider, 0, {
+                      header: $dropdown.data('dropdownHeader'),
+                    });
+                  }
 
-                const selectedUsers = users
-                  .filter(u => selected.indexOf(u.id) !== -1)
-                  .sort((a, b) => a.name > b.name);
+                  const selectedUsers = users
+                    .filter(u => selected.indexOf(u.id) !== -1)
+                    .sort((a, b) => a.name > b.name);
 
-                users = users.filter(u => selected.indexOf(u.id) === -1);
+                  users = users.filter(u => selected.indexOf(u.id) === -1);
 
-                selectedUsers.forEach((selectedUser) => {
-                  showDivider += 1;
-                  users.splice(showDivider, 0, selectedUser);
-                });
+                  selectedUsers.forEach(selectedUser => {
+                    showDivider += 1;
+                    users.splice(showDivider, 0, selectedUser);
+                  });
 
-                users.splice(showDivider + 1, 0, 'divider');
+                  users.splice(showDivider + 1, 0, 'divider');
+                }
               }
             }
-          }
 
-          callback(users);
-          if (showMenuAbove) {
-            $dropdown.data('glDropdown').positionMenuAbove();
-          }
-        },
-        filterable: true,
-        filterRemote: true,
-        search: {
-          fields: ['name', 'username']
-        },
-        selectable: true,
-        fieldName: $dropdown.data('fieldName'),
-        toggleLabel: function(selected, el, glDropdown) {
-          const inputValue = glDropdown.filterInput.val();
-
-          if (this.multiSelect && inputValue === '') {
-            // Remove non-users from the fullData array
-            const users = glDropdown.filteredFullData();
-            const callback = glDropdown.parseData.bind(glDropdown);
-
-            // Update the data model
-            this.processData(inputValue, users, callback);
-          }
+            callback(users);
+            if (showMenuAbove) {
+              $dropdown.data('glDropdown').positionMenuAbove();
+            }
+          },
+          filterable: true,
+          filterRemote: true,
+          search: {
+            fields: ['name', 'username'],
+          },
+          selectable: true,
+          fieldName: $dropdown.data('fieldName'),
+          toggleLabel: function(selected, el, glDropdown) {
+            const inputValue = glDropdown.filterInput.val();
+
+            if (this.multiSelect && inputValue === '') {
+              // Remove non-users from the fullData array
+              const users = glDropdown.filteredFullData();
+              const callback = glDropdown.parseData.bind(glDropdown);
+
+              // Update the data model
+              this.processData(inputValue, users, callback);
+            }
 
-          if (this.multiSelect) {
-            return getMultiSelectDropdownTitle(selected, $(el).hasClass('is-active'));
-          }
+            if (this.multiSelect) {
+              return getMultiSelectDropdownTitle(selected, $(el).hasClass('is-active'));
+            }
 
-          if (selected && 'id' in selected && $(el).hasClass('is-active')) {
-            $dropdown.find('.dropdown-toggle-text').removeClass('is-default');
-            if (selected.text) {
-              return selected.text;
+            if (selected && 'id' in selected && $(el).hasClass('is-active')) {
+              $dropdown.find('.dropdown-toggle-text').removeClass('is-default');
+              if (selected.text) {
+                return selected.text;
+              } else {
+                return selected.name;
+              }
             } else {
-              return selected.name;
+              $dropdown.find('.dropdown-toggle-text').addClass('is-default');
+              return defaultLabel;
+            }
+          },
+          defaultLabel: defaultLabel,
+          hidden: function(e) {
+            if ($dropdown.hasClass('js-multiselect')) {
+              emitSidebarEvent('sidebar.saveAssignees');
             }
-          } else {
-            $dropdown.find('.dropdown-toggle-text').addClass('is-default');
-            return defaultLabel;
-          }
-        },
-        defaultLabel: defaultLabel,
-        hidden: function(e) {
-          if ($dropdown.hasClass('js-multiselect')) {
-            emitSidebarEvent('sidebar.saveAssignees');
-          }
-
-          if (!$dropdown.data('alwaysShowSelectbox')) {
-            $selectbox.hide();
 
-            // Recalculate where .value is because vue might have changed it
-            $block = $selectbox.closest('.block');
-            $value = $block.find('.value');
-            // display:block overrides the hide-collapse rule
-            $value.css('display', '');
-          }
-        },
-        multiSelect: $dropdown.hasClass('js-multiselect'),
-        inputMeta: $dropdown.data('inputMeta'),
-        clicked: function(options) {
-          const { $el, e, isMarking } = options;
-          const user = options.selectedObj;
-
-          if ($dropdown.hasClass('js-multiselect')) {
-            const isActive = $el.hasClass('is-active');
-            const previouslySelected = $dropdown.closest('.selectbox')
-                .find("input[name='" + ($dropdown.data('fieldName')) + "'][value!=0]");
-
-            // Enables support for limiting the number of users selected
-            // Automatically removes the first on the list if more users are selected
-            checkMaxSelect();
+            if (!$dropdown.data('alwaysShowSelectbox')) {
+              $selectbox.hide();
 
-            if (user.beforeDivider && user.name.toLowerCase() === 'unassigned') {
-              // Unassigned selected
-              previouslySelected.each((index, element) => {
-                const id = parseInt(element.value, 10);
-                element.remove();
-              });
-              emitSidebarEvent('sidebar.removeAllAssignees');
-            } else if (isActive) {
-              // user selected
-              emitSidebarEvent('sidebar.addAssignee', user);
+              // Recalculate where .value is because vue might have changed it
+              $block = $selectbox.closest('.block');
+              $value = $block.find('.value');
+              // display:block overrides the hide-collapse rule
+              $value.css('display', '');
+            }
+          },
+          multiSelect: $dropdown.hasClass('js-multiselect'),
+          inputMeta: $dropdown.data('inputMeta'),
+          clicked: function(options) {
+            const { $el, e, isMarking } = options;
+            const user = options.selectedObj;
 
-              // Remove unassigned selection (if it was previously selected)
-              const unassignedSelected = $dropdown.closest('.selectbox')
-                .find("input[name='" + ($dropdown.data('fieldName')) + "'][value=0]");
+            if ($dropdown.hasClass('js-multiselect')) {
+              const isActive = $el.hasClass('is-active');
+              const previouslySelected = $dropdown
+                .closest('.selectbox')
+                .find("input[name='" + $dropdown.data('fieldName') + "'][value!=0]");
+
+              // Enables support for limiting the number of users selected
+              // Automatically removes the first on the list if more users are selected
+              checkMaxSelect();
+
+              if (user.beforeDivider && user.name.toLowerCase() === 'unassigned') {
+                // Unassigned selected
+                previouslySelected.each((index, element) => {
+                  const id = parseInt(element.value, 10);
+                  element.remove();
+                });
+                emitSidebarEvent('sidebar.removeAllAssignees');
+              } else if (isActive) {
+                // user selected
+                emitSidebarEvent('sidebar.addAssignee', user);
+
+                // Remove unassigned selection (if it was previously selected)
+                const unassignedSelected = $dropdown
+                  .closest('.selectbox')
+                  .find("input[name='" + $dropdown.data('fieldName') + "'][value=0]");
+
+                if (unassignedSelected) {
+                  unassignedSelected.remove();
+                }
+              } else {
+                if (previouslySelected.length === 0) {
+                  // Select unassigned because there is no more selected users
+                  this.addInput($dropdown.data('fieldName'), 0, {});
+                }
 
-              if (unassignedSelected) {
-                unassignedSelected.remove();
-              }
-            } else {
-              if (previouslySelected.length === 0) {
-              // Select unassigned because there is no more selected users
-                this.addInput($dropdown.data('fieldName'), 0, {});
+                // User unselected
+                emitSidebarEvent('sidebar.removeAssignee', user);
               }
 
-              // User unselected
-              emitSidebarEvent('sidebar.removeAssignee', user);
+              if (getSelected().find(u => u === gon.current_user_id)) {
+                $('.assign-to-me-link').hide();
+              } else {
+                $('.assign-to-me-link').show();
+              }
             }
 
-            if (getSelected().find(u => u === gon.current_user_id)) {
-              $('.assign-to-me-link').hide();
-            } else {
-              $('.assign-to-me-link').show();
+            var isIssueIndex, isMRIndex, page, selected;
+            page = $('body').attr('data-page');
+            isIssueIndex = page === 'projects:issues:index';
+            isMRIndex = page === page && page === 'projects:merge_requests:index';
+            if (
+              $dropdown.hasClass('js-filter-bulk-update') ||
+              $dropdown.hasClass('js-issuable-form-dropdown')
+            ) {
+              e.preventDefault();
+
+              const isSelecting = user.id !== selectedId;
+              selectedId = isSelecting ? user.id : selectedIdDefault;
+
+              if (selectedId === gon.current_user_id) {
+                $('.assign-to-me-link').hide();
+              } else {
+                $('.assign-to-me-link').show();
+              }
+              return;
+            }
+            if ($el.closest('.add-issues-modal').length) {
+              ModalStore.store.filter[$dropdown.data('fieldName')] = user.id;
+            } else if (handleClick) {
+              e.preventDefault();
+              handleClick(user, isMarking);
+            } else if ($dropdown.hasClass('js-filter-submit') && (isIssueIndex || isMRIndex)) {
+              return Issuable.filterResults($dropdown.closest('form'));
+            } else if ($dropdown.hasClass('js-filter-submit')) {
+              return $dropdown.closest('form').submit();
+            } else if (!$dropdown.hasClass('js-multiselect')) {
+              selected = $dropdown
+                .closest('.selectbox')
+                .find("input[name='" + $dropdown.data('fieldName') + "']")
+                .val();
+              return assignTo(selected);
             }
-          }
 
-          var isIssueIndex, isMRIndex, page, selected;
-          page = $('body').attr('data-page');
-          isIssueIndex = page === 'projects:issues:index';
-          isMRIndex = (page === page && page === 'projects:merge_requests:index');
-          if ($dropdown.hasClass('js-filter-bulk-update') || $dropdown.hasClass('js-issuable-form-dropdown')) {
-            e.preventDefault();
+            // Automatically close dropdown after assignee is selected
+            // since CE has no multiple assignees
+            // EE does not have a max-select
+            if (
+              $dropdown.data('maxSelect') &&
+              getSelected().length === $dropdown.data('maxSelect')
+            ) {
+              // Close the dropdown
+              $dropdown.dropdown('toggle');
+            }
+          },
+          id: function(user) {
+            return user.id;
+          },
+          opened: function(e) {
+            const $el = $(e.currentTarget);
+            const selected = getSelected();
+            if ($dropdown.hasClass('js-issue-board-sidebar') && selected.length === 0) {
+              this.addInput($dropdown.data('fieldName'), 0, {});
+            }
+            $el.find('.is-active').removeClass('is-active');
 
-            const isSelecting = (user.id !== selectedId);
-            selectedId = isSelecting ? user.id : selectedIdDefault;
+            function highlightSelected(id) {
+              $el.find(`li[data-user-id="${id}"] .dropdown-menu-user-link`).addClass('is-active');
+            }
 
-            if (selectedId === gon.current_user_id) {
-              $('.assign-to-me-link').hide();
+            if (selected.length > 0) {
+              getSelected().forEach(selectedId => highlightSelected(selectedId));
+            } else if ($dropdown.hasClass('js-issue-board-sidebar')) {
+              highlightSelected(0);
             } else {
-              $('.assign-to-me-link').show();
+              highlightSelected(selectedId);
             }
-            return;
-          }
-          if ($el.closest('.add-issues-modal').length) {
-            ModalStore.store.filter[$dropdown.data('fieldName')] = user.id;
-          } else if (handleClick) {
-            e.preventDefault();
-            handleClick(user, isMarking);
-          } else if ($dropdown.hasClass('js-filter-submit') && (isIssueIndex || isMRIndex)) {
-            return Issuable.filterResults($dropdown.closest('form'));
-          } else if ($dropdown.hasClass('js-filter-submit')) {
-            return $dropdown.closest('form').submit();
-          } else if (!$dropdown.hasClass('js-multiselect')) {
-            selected = $dropdown.closest('.selectbox').find("input[name='" + ($dropdown.data('fieldName')) + "']").val();
-            return assignTo(selected);
-          }
-
-          // Automatically close dropdown after assignee is selected
-          // since CE has no multiple assignees
-          // EE does not have a max-select
-          if ($dropdown.data('maxSelect') &&
-              getSelected().length === $dropdown.data('maxSelect')) {
-            // Close the dropdown
-            $dropdown.dropdown('toggle');
-          }
-        },
-        id: function (user) {
-          return user.id;
-        },
-        opened: function(e) {
-          const $el = $(e.currentTarget);
-          const selected = getSelected();
-          if ($dropdown.hasClass('js-issue-board-sidebar') && selected.length === 0) {
-            this.addInput($dropdown.data('fieldName'), 0, {});
-          }
-          $el.find('.is-active').removeClass('is-active');
-
-          function highlightSelected(id) {
-            $el.find(`li[data-user-id="${id}"] .dropdown-menu-user-link`).addClass('is-active');
-          }
+          },
+          updateLabel: $dropdown.data('dropdownTitle'),
+          renderRow: function(user) {
+            var avatar, img, listClosingTags, listWithName, listWithUserName, username;
+            username = user.username ? '@' + user.username : '';
+            avatar = user.avatar_url ? user.avatar_url : gon.default_avatar_url;
 
-          if (selected.length > 0) {
-            getSelected().forEach(selectedId => highlightSelected(selectedId));
-          } else if ($dropdown.hasClass('js-issue-board-sidebar')) {
-            highlightSelected(0);
-          } else {
-            highlightSelected(selectedId);
-          }
-        },
-        updateLabel: $dropdown.data('dropdownTitle'),
-        renderRow: function(user) {
-          var avatar, img, listClosingTags, listWithName, listWithUserName, username;
-          username = user.username ? "@" + user.username : "";
-          avatar = user.avatar_url ? user.avatar_url : gon.default_avatar_url;
+            let selected = false;
 
-          let selected = false;
+            if (this.multiSelect) {
+              selected = getSelected().find(u => user.id === u);
 
-          if (this.multiSelect) {
-            selected = getSelected().find(u => user.id === u);
+              const { fieldName } = this;
+              const field = $dropdown
+                .closest('.selectbox')
+                .find("input[name='" + fieldName + "'][value='" + user.id + "']");
 
-            const { fieldName } = this;
-            const field = $dropdown.closest('.selectbox').find("input[name='" + fieldName + "'][value='" + user.id + "']");
-
-            if (field.length) {
-              selected = true;
+              if (field.length) {
+                selected = true;
+              }
+            } else {
+              selected = user.id === selectedId;
             }
-          } else {
-            selected = user.id === selectedId;
-          }
 
-          img = "";
-          if (user.beforeDivider != null) {
-            `<li><a href='#' class='${selected === true ? 'is-active' : ''}'>${_.escape(user.name)}</a></li>`;
-          } else {
-            img = "<img src='" + avatar + "' class='avatar avatar-inline' width='32' />";
-          }
+            img = '';
+            if (user.beforeDivider != null) {
+              `<li><a href='#' class='${selected === true ? 'is-active' : ''}'>${_.escape(
+                user.name,
+              )}</a></li>`;
+            } else {
+              img = "<img src='" + avatar + "' class='avatar avatar-inline' width='32' />";
+            }
 
-          return `
+            return `
             <li data-user-id=${user.id}>
               <a href='#' class='dropdown-menu-user-link ${selected === true ? 'is-active' : ''}'>
                 ${img}
@@ -528,114 +574,117 @@ function UsersSelect(currentUser, els, options = {}) {
               </a>
             </li>
           `;
-        }
-      });
-    };
-  })(this));
-  $('.ajax-users-select').each((function(_this) {
-    return function(i, select) {
-      var firstUser, showAnyUser, showEmailUser, showNullUser;
-      var options = {};
-      options.skipLdap = $(select).hasClass('skip_ldap');
-      options.projectId = $(select).data('projectId');
-      options.groupId = $(select).data('groupId');
-      options.showCurrentUser = $(select).data('currentUser');
-      options.authorId = $(select).data('authorId');
-      options.skipUsers = $(select).data('skipUsers');
-      showNullUser = $(select).data('nullUser');
-      showAnyUser = $(select).data('anyUser');
-      showEmailUser = $(select).data('emailUser');
-      firstUser = $(select).data('firstUser');
-      return $(select).select2({
-        placeholder: "Search for a user",
-        multiple: $(select).hasClass('multiselect'),
-        minimumInputLength: 0,
-        query: function(query) {
-          return _this.users(query.term, options, function(users) {
-            var anyUser, data, emailUser, index, len, name, nullUser, obj, ref;
-            data = {
-              results: users
-            };
-            if (query.term.length === 0) {
-              if (firstUser) {
-                // Move current user to the front of the list
-                ref = data.results;
-
-                for (index = 0, len = ref.length; index < len; index += 1) {
-                  obj = ref[index];
-                  if (obj.username === firstUser) {
-                    data.results.splice(index, 1);
-                    data.results.unshift(obj);
-                    break;
+          },
+        });
+      };
+    })(this),
+  );
+  $('.ajax-users-select').each(
+    (function(_this) {
+      return function(i, select) {
+        var firstUser, showAnyUser, showEmailUser, showNullUser;
+        var options = {};
+        options.skipLdap = $(select).hasClass('skip_ldap');
+        options.projectId = $(select).data('projectId');
+        options.groupId = $(select).data('groupId');
+        options.showCurrentUser = $(select).data('currentUser');
+        options.authorId = $(select).data('authorId');
+        options.skipUsers = $(select).data('skipUsers');
+        showNullUser = $(select).data('nullUser');
+        showAnyUser = $(select).data('anyUser');
+        showEmailUser = $(select).data('emailUser');
+        firstUser = $(select).data('firstUser');
+        return $(select).select2({
+          placeholder: 'Search for a user',
+          multiple: $(select).hasClass('multiselect'),
+          minimumInputLength: 0,
+          query: function(query) {
+            return _this.users(query.term, options, function(users) {
+              var anyUser, data, emailUser, index, len, name, nullUser, obj, ref;
+              data = {
+                results: users,
+              };
+              if (query.term.length === 0) {
+                if (firstUser) {
+                  // Move current user to the front of the list
+                  ref = data.results;
+
+                  for (index = 0, len = ref.length; index < len; index += 1) {
+                    obj = ref[index];
+                    if (obj.username === firstUser) {
+                      data.results.splice(index, 1);
+                      data.results.unshift(obj);
+                      break;
+                    }
                   }
                 }
-              }
-              if (showNullUser) {
-                nullUser = {
-                  name: 'Unassigned',
-                  id: 0
-                };
-                data.results.unshift(nullUser);
-              }
-              if (showAnyUser) {
-                name = showAnyUser;
-                if (name === true) {
-                  name = 'Any User';
+                if (showNullUser) {
+                  nullUser = {
+                    name: 'Unassigned',
+                    id: 0,
+                  };
+                  data.results.unshift(nullUser);
                 }
-                anyUser = {
-                  name: name,
-                  id: null
+                if (showAnyUser) {
+                  name = showAnyUser;
+                  if (name === true) {
+                    name = 'Any User';
+                  }
+                  anyUser = {
+                    name: name,
+                    id: null,
+                  };
+                  data.results.unshift(anyUser);
+                }
+              }
+              if (showEmailUser && data.results.length === 0 && query.term.match(/^[^@]+@[^@]+$/)) {
+                var trimmed = query.term.trim();
+                emailUser = {
+                  name: 'Invite "' + trimmed + '" by email',
+                  username: trimmed,
+                  id: trimmed,
+                  invite: true,
                 };
-                data.results.unshift(anyUser);
+                data.results.unshift(emailUser);
               }
-            }
-            if (showEmailUser && data.results.length === 0 && query.term.match(/^[^@]+@[^@]+$/)) {
-              var trimmed = query.term.trim();
-              emailUser = {
-                name: "Invite \"" + trimmed + "\" by email",
-                username: trimmed,
-                id: trimmed,
-                invite: true
-              };
-              data.results.unshift(emailUser);
-            }
-            return query.callback(data);
-          });
-        },
-        initSelection: function() {
-          var args;
-          args = 1 <= arguments.length ? [].slice.call(arguments, 0) : [];
-          return _this.initSelection.apply(_this, args);
-        },
-        formatResult: function() {
-          var args;
-          args = 1 <= arguments.length ? [].slice.call(arguments, 0) : [];
-          return _this.formatResult.apply(_this, args);
-        },
-        formatSelection: function() {
-          var args;
-          args = 1 <= arguments.length ? [].slice.call(arguments, 0) : [];
-          return _this.formatSelection.apply(_this, args);
-        },
-        dropdownCssClass: "ajax-users-dropdown",
-        // we do not want to escape markup since we are displaying html in results
-        escapeMarkup: function(m) {
-          return m;
-        }
-      });
-    };
-  })(this));
+              return query.callback(data);
+            });
+          },
+          initSelection: function() {
+            var args;
+            args = 1 <= arguments.length ? [].slice.call(arguments, 0) : [];
+            return _this.initSelection.apply(_this, args);
+          },
+          formatResult: function() {
+            var args;
+            args = 1 <= arguments.length ? [].slice.call(arguments, 0) : [];
+            return _this.formatResult.apply(_this, args);
+          },
+          formatSelection: function() {
+            var args;
+            args = 1 <= arguments.length ? [].slice.call(arguments, 0) : [];
+            return _this.formatSelection.apply(_this, args);
+          },
+          dropdownCssClass: 'ajax-users-dropdown',
+          // we do not want to escape markup since we are displaying html in results
+          escapeMarkup: function(m) {
+            return m;
+          },
+        });
+      };
+    })(this),
+  );
 }
 
 UsersSelect.prototype.initSelection = function(element, callback) {
   var id, nullUser;
   id = $(element).val();
-  if (id === "0") {
+  if (id === '0') {
     nullUser = {
-      name: 'Unassigned'
+      name: 'Unassigned',
     };
     return callback(nullUser);
-  } else if (id !== "") {
+  } else if (id !== '') {
     return this.user(id, callback);
   }
 };
@@ -647,7 +696,17 @@ UsersSelect.prototype.formatResult = function(user) {
   } else {
     avatar = gon.default_avatar_url;
   }
-  return "<div class='user-result " + (!user.username ? 'no-username' : void 0) + "'> <div class='user-image'><img class='avatar avatar-inline s32' src='" + avatar + "'></div> <div class='user-name dropdown-menu-user-full-name'>" + _.escape(user.name) + "</div> <div class='user-username dropdown-menu-user-username'>" + (!user.invite ? "@" + _.escape(user.username) : "") + "</div> </div>";
+  return (
+    "<div class='user-result " +
+    (!user.username ? 'no-username' : void 0) +
+    "'> <div class='user-image'><img class='avatar avatar-inline s32' src='" +
+    avatar +
+    "'></div> <div class='user-name dropdown-menu-user-full-name'>" +
+    _.escape(user.name) +
+    "</div> <div class='user-username dropdown-menu-user-username'>" +
+    (!user.invite ? '@' + _.escape(user.username) : '') +
+    '</div> </div>'
+  );
 };
 
 UsersSelect.prototype.formatSelection = function(user) {
@@ -662,10 +721,9 @@ UsersSelect.prototype.user = function(user_id, callback) {
   var url;
   url = this.buildUrl(this.userPath);
   url = url.replace(':id', user_id);
-  return axios.get(url)
-    .then(({ data }) => {
-      callback(data);
-    });
+  return axios.get(url).then(({ data }) => {
+    callback(data);
+  });
 };
 
 // Return users list. Filtered by query
@@ -682,12 +740,11 @@ UsersSelect.prototype.users = function(query, options, callback) {
     todo_state_filter: options.todoStateFilter || null,
     current_user: options.showCurrentUser || null,
     author_id: options.authorId || null,
-    skip_users: options.skipUsers || null
+    skip_users: options.skipUsers || null,
   };
-  return axios.get(url, { params })
-    .then(({ data }) => {
-      callback(data);
-    });
+  return axios.get(url, { params }).then(({ data }) => {
+    callback(data);
+  });
 };
 
 UsersSelect.prototype.buildUrl = function(url) {
diff --git a/app/assets/javascripts/zen_mode.js b/app/assets/javascripts/zen_mode.js
index bdb2351c344..e98c4d7bf7a 100644
--- a/app/assets/javascripts/zen_mode.js
+++ b/app/assets/javascripts/zen_mode.js
@@ -47,16 +47,26 @@ export default class ZenMode {
       e.preventDefault();
       return $(e.currentTarget).trigger('zen_mode:leave');
     });
-    $(document).on('zen_mode:enter', (function(_this) {
-      return function(e) {
-        return _this.enter($(e.target).closest('.md-area').find('.zen-backdrop'));
-      };
-    })(this));
-    $(document).on('zen_mode:leave', (function(_this) {
-      return function(e) {
-        return _this.exit();
-      };
-    })(this));
+    $(document).on(
+      'zen_mode:enter',
+      (function(_this) {
+        return function(e) {
+          return _this.enter(
+            $(e.target)
+              .closest('.md-area')
+              .find('.zen-backdrop'),
+          );
+        };
+      })(this),
+    );
+    $(document).on(
+      'zen_mode:leave',
+      (function(_this) {
+        return function(e) {
+          return _this.exit();
+        };
+      })(this),
+    );
     $(document).on('keydown', function(e) {
       // Esc
       if (e.keyCode === 27) {
@@ -93,7 +103,7 @@ export default class ZenMode {
 
   scrollTo(zen_area) {
     return $.scrollTo(zen_area, 0, {
-      offset: -150
+      offset: -150,
     });
   }
 }
-- 
cgit v1.2.1


From 5ed91cf81bcc459ad65357c128b955e10ddce284 Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Wed, 17 Oct 2018 10:34:19 +0000
Subject: Resolve "Integrate new vue+vuex code base with new API and remove old
 haml code"

---
 app/assets/javascripts/job.js                      | 188 ------------
 app/assets/javascripts/jobs/components/job_app.vue | 273 +++++++++++++----
 app/assets/javascripts/jobs/components/job_log.vue |  54 +++-
 .../jobs/components/job_log_controllers.vue        |   8 +-
 app/assets/javascripts/jobs/components/sidebar.vue | 335 ++++++++++-----------
 app/assets/javascripts/jobs/index.js               |  26 ++
 app/assets/javascripts/jobs/job_details_bundle.js  |  76 -----
 app/assets/javascripts/jobs/store/actions.js       | 117 ++++---
 app/assets/javascripts/jobs/store/getters.js       |   8 +-
 .../javascripts/jobs/store/mutation_types.js       |  19 +-
 app/assets/javascripts/jobs/store/mutations.js     |  64 ++--
 app/assets/javascripts/jobs/store/state.js         |  29 +-
 app/assets/javascripts/jobs/svg/scroll_down.svg    |   5 +
 .../javascripts/pages/projects/jobs/show/index.js  |   2 +-
 .../vue_shared/components/header_ci_component.vue  |  31 +-
 15 files changed, 626 insertions(+), 609 deletions(-)
 delete mode 100644 app/assets/javascripts/job.js
 create mode 100644 app/assets/javascripts/jobs/index.js
 delete mode 100644 app/assets/javascripts/jobs/job_details_bundle.js
 create mode 100644 app/assets/javascripts/jobs/svg/scroll_down.svg

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/job.js b/app/assets/javascripts/job.js
deleted file mode 100644
index 80ba43dca6f..00000000000
--- a/app/assets/javascripts/job.js
+++ /dev/null
@@ -1,188 +0,0 @@
-import $ from 'jquery';
-import _ from 'underscore';
-import { polyfillSticky } from './lib/utils/sticky';
-import axios from './lib/utils/axios_utils';
-import { visitUrl } from './lib/utils/url_utility';
-import bp from './breakpoints';
-import { numberToHumanSize } from './lib/utils/number_utils';
-import { setCiStatusFavicon } from './lib/utils/common_utils';
-import { isScrolledToBottom, scrollDown, scrollUp } from './lib/utils/scroll_utils';
-import LogOutputBehaviours from './lib/utils/logoutput_behaviours';
-
-export default class Job extends LogOutputBehaviours {
-  constructor(options) {
-    super();
-    this.timeout = null;
-    this.state = null;
-    this.fetchingStatusFavicon = false;
-    this.options = options || $('.js-build-options').data();
-
-    this.pagePath = this.options.pagePath;
-    this.buildStatus = this.options.buildStatus;
-    this.state = this.options.logState;
-    this.buildStage = this.options.buildStage;
-    this.$document = $(document);
-    this.$window = $(window);
-    this.logBytes = 0;
-
-    this.$buildTrace = $('#build-trace');
-    this.$buildRefreshAnimation = $('.js-build-refresh');
-    this.$truncatedInfo = $('.js-truncated-info');
-    this.$buildTraceOutput = $('.js-build-output');
-    this.$topBar = $('.js-top-bar');
-
-    clearTimeout(this.timeout);
-
-    this.initSidebar();
-    this.sidebarOnResize();
-
-    this.$document
-      .off('click', '.js-sidebar-build-toggle')
-      .on('click', '.js-sidebar-build-toggle', this.sidebarOnClick.bind(this));
-
-    this.scrollThrottled = _.throttle(this.toggleScroll.bind(this), 100);
-
-    this.$window.off('scroll').on('scroll', () => {
-      if (!isScrolledToBottom()) {
-        this.toggleScrollAnimation(false);
-      } else if (isScrolledToBottom() && !this.isLogComplete) {
-        this.toggleScrollAnimation(true);
-      }
-      this.scrollThrottled();
-    });
-
-    this.$window
-      .off('resize.build')
-      .on('resize.build', _.throttle(this.sidebarOnResize.bind(this), 100));
-
-    this.initAffixTopArea();
-
-    this.getBuildTrace();
-  }
-
-  initAffixTopArea() {
-    polyfillSticky(this.$topBar);
-  }
-
-  scrollToBottom() {
-    scrollDown();
-    this.hasBeenScrolled = true;
-    this.toggleScroll();
-  }
-
-  scrollToTop() {
-    scrollUp();
-    this.hasBeenScrolled = true;
-    this.toggleScroll();
-  }
-
-  toggleScrollAnimation(toggle) {
-    this.$scrollBottomBtn.toggleClass('animate', toggle);
-  }
-
-  initSidebar() {
-    this.$sidebar = $('.js-build-sidebar');
-  }
-
-  getBuildTrace() {
-    return axios
-      .get(`${this.pagePath}/trace.json`, {
-        params: { state: this.state },
-      })
-      .then(res => {
-        const log = res.data;
-
-        if (!this.fetchingStatusFavicon) {
-          this.fetchingStatusFavicon = true;
-
-          setCiStatusFavicon(`${this.pagePath}/status.json`)
-            .then(() => {
-              this.fetchingStatusFavicon = false;
-            })
-            .catch(() => {
-              this.fetchingStatusFavicon = false;
-            });
-        }
-
-        if (log.state) {
-          this.state = log.state;
-        }
-
-        this.isScrollInBottom = isScrolledToBottom();
-
-        if (log.append) {
-          this.$buildTraceOutput.append(log.html);
-          this.logBytes += log.size;
-        } else {
-          this.$buildTraceOutput.html(log.html);
-          this.logBytes = log.size;
-        }
-
-        // if the incremental sum of logBytes we received is less than the total
-        // we need to show a message warning the user about that.
-        if (this.logBytes < log.total) {
-          // size is in bytes, we need to calculate KiB
-          const size = numberToHumanSize(this.logBytes);
-          $('.js-truncated-info-size').html(`${size}`);
-          this.$truncatedInfo.removeClass('hidden');
-        } else {
-          this.$truncatedInfo.addClass('hidden');
-        }
-        this.isLogComplete = log.complete;
-
-        if (log.complete === false) {
-          this.timeout = setTimeout(() => {
-            this.getBuildTrace();
-          }, 4000);
-        } else {
-          this.$buildRefreshAnimation.remove();
-          this.toggleScrollAnimation(false);
-        }
-
-        if (log.status !== this.buildStatus) {
-          visitUrl(this.pagePath);
-        }
-      })
-      .catch(() => {
-        this.$buildRefreshAnimation.remove();
-      })
-      .then(() => {
-        if (this.isScrollInBottom) {
-          scrollDown();
-        }
-      })
-      .then(() => this.toggleScroll());
-  }
-  // eslint-disable-next-line class-methods-use-this
-  shouldHideSidebarForViewport() {
-    const bootstrapBreakpoint = bp.getBreakpointSize();
-    return bootstrapBreakpoint === 'xs';
-  }
-
-  toggleSidebar(shouldHide) {
-    const shouldShow = typeof shouldHide === 'boolean' ? !shouldHide : undefined;
-    const $toggleButton = $('.js-sidebar-build-toggle-header');
-
-    this.$sidebar
-      .toggleClass('right-sidebar-expanded', shouldShow)
-      .toggleClass('right-sidebar-collapsed', shouldHide);
-
-    this.$topBar
-      .toggleClass('sidebar-expanded', shouldShow)
-      .toggleClass('sidebar-collapsed', shouldHide);
-
-    if (this.$sidebar.hasClass('right-sidebar-expanded')) {
-      $toggleButton.addClass('hidden');
-    } else {
-      $toggleButton.removeClass('hidden');
-    }
-  }
-
-  sidebarOnResize() {
-    this.toggleSidebar(this.shouldHideSidebarForViewport());
-  }
-
-  sidebarOnClick() {
-    if (this.shouldHideSidebarForViewport()) this.toggleSidebar();
-  }
-}
diff --git a/app/assets/javascripts/jobs/components/job_app.vue b/app/assets/javascripts/jobs/components/job_app.vue
index 4e8d3ad24cc..fa35b87ef2b 100644
--- a/app/assets/javascripts/jobs/components/job_app.vue
+++ b/app/assets/javascripts/jobs/components/job_app.vue
@@ -1,21 +1,32 @@
 <script>
-  import { mapGetters, mapState } from 'vuex';
+  import _ from 'underscore';
+  import { mapGetters, mapState, mapActions } from 'vuex';
+  import { isScrolledToBottom } from '~/lib/utils/scroll_utils';
+  import bp from '~/breakpoints';
   import CiHeader from '~/vue_shared/components/header_ci_component.vue';
   import Callout from '~/vue_shared/components/callout.vue';
+  import createStore from '../store';
   import EmptyState from './empty_state.vue';
   import EnvironmentsBlock from './environments_block.vue';
   import ErasedBlock from './erased_block.vue';
+  import Log from './job_log.vue';
+  import LogTopBar from './job_log_controllers.vue';
   import StuckBlock from './stuck_block.vue';
+  import Sidebar from './sidebar.vue';
 
   export default {
     name: 'JobPageApp',
+    store: createStore(),
     components: {
       CiHeader,
       Callout,
       EmptyState,
       EnvironmentsBlock,
       ErasedBlock,
+      Log,
+      LogTopBar,
       StuckBlock,
+      Sidebar,
     },
     props: {
       runnerSettingsUrl: {
@@ -23,9 +34,43 @@
         required: false,
         default: null,
       },
+      runnerHelpUrl: {
+        type: String,
+        required: false,
+        default: null,
+      },
+      endpoint: {
+        type: String,
+        required: true,
+      },
+      terminalPath: {
+        type: String,
+        required: false,
+        default: null,
+      },
+      pagePath: {
+        type: String,
+        required: true,
+      },
+      logState: {
+        type: String,
+        required: true,
+      },
     },
     computed: {
-      ...mapState(['isLoading', 'job']),
+      ...mapState([
+        'isLoading',
+        'job',
+        'isSidebarOpen',
+        'trace',
+        'isTraceComplete',
+        'traceSize',
+        'isTraceSizeVisible',
+        'isScrollBottomDisabled',
+        'isScrollTopDisabled',
+        'isScrolledToBottomBeforeReceivingTrace',
+        'hasError',
+      ]),
       ...mapGetters([
         'headerActions',
         'headerTime',
@@ -35,7 +80,83 @@
         'isJobStuck',
         'hasTrace',
         'emptyStateIllustration',
+        'isScrollingDown',
+        'emptyStateAction',
       ]),
+
+      shouldRenderContent() {
+        return !this.isLoading && !this.hasError;
+      }
+    },
+    watch: {
+      // Once the job log is loaded,
+      // fetch the stages for the dropdown on the sidebar
+      job(newVal, oldVal) {
+        if (_.isEmpty(oldVal) && !_.isEmpty(newVal.pipeline)) {
+          this.fetchStages();
+        }
+      },
+    },
+    created() {
+      this.throttled = _.throttle(this.toggleScrollButtons, 100);
+
+      this.setJobEndpoint(this.endpoint);
+      this.setTraceOptions({
+        logState: this.logState,
+        pagePath: this.pagePath,
+      });
+
+      this.fetchJob();
+      this.fetchTrace();
+
+      window.addEventListener('resize', this.onResize);
+      window.addEventListener('scroll', this.updateScroll);
+    },
+
+    mounted() {
+      this.updateSidebar();
+    },
+
+    destroyed() {
+      window.removeEventListener('resize', this.onResize);
+      window.removeEventListener('scroll', this.updateScroll);
+    },
+
+    methods: {
+      ...mapActions([
+        'setJobEndpoint',
+        'setTraceOptions',
+        'fetchJob',
+        'fetchStages',
+        'hideSidebar',
+        'showSidebar',
+        'toggleSidebar',
+        'fetchTrace',
+        'scrollBottom',
+        'scrollTop',
+        'toggleScrollButtons',
+        'toggleScrollAnimation',
+      ]),
+      onResize() {
+        this.updateSidebar();
+        this.updateScroll();
+      },
+      updateSidebar() {
+        if (bp.getBreakpointSize() === 'xs') {
+          this.hideSidebar();
+        } else if (!this.isSidebarOpen) {
+          this.showSidebar();
+        }
+      },
+      updateScroll() {
+        if (!isScrolledToBottom()) {
+          this.toggleScrollAnimation(false);
+        } else if (this.isScrollingDown) {
+          this.toggleScrollAnimation(true);
+        }
+
+        this.throttled();
+      },
     },
   };
 </script>
@@ -44,71 +165,107 @@
     <gl-loading-icon
       v-if="isLoading"
       :size="2"
-      class="prepend-top-20"
+      class="js-job-loading prepend-top-20"
     />
 
-    <template v-else>
-      <!-- Header Section -->
-      <header>
-        <div class="js-build-header build-header top-area">
-          <ci-header
-            :status="job.status"
-            :item-id="job.id"
-            :time="headerTime"
-            :user="job.user"
-            :actions="headerActions"
-            :has-sidebar-button="true"
-            :should-render-triggered-label="shouldRenderTriggeredLabel"
-            :item-name="__('Job')"
+    <template v-else-if="shouldRenderContent">
+      <div class="js-job-content build-page">
+        <!-- Header Section -->
+        <header>
+          <div class="js-build-header build-header top-area">
+            <ci-header
+              :status="job.status"
+              :item-id="job.id"
+              :time="headerTime"
+              :user="job.user"
+              :actions="headerActions"
+              :has-sidebar-button="true"
+              :should-render-triggered-label="shouldRenderTriggeredLabel"
+              :item-name="__('Job')"
+              @clickedSidebarButton="toggleSidebar"
+            />
+          </div>
+
+          <callout
+            v-if="shouldRenderCalloutMessage"
+            :message="job.callout_message"
+          />
+        </header>
+        <!-- EO Header Section -->
+
+        <!-- Body Section -->
+        <stuck-block
+          v-if="isJobStuck"
+          class="js-job-stuck"
+          :has-no-runners-for-project="job.runners.available"
+          :tags="job.tags"
+          :runners-path="runnerSettingsUrl"
+        />
+
+        <environments-block
+          v-if="hasEnvironment"
+          class="js-job-environment"
+          :deployment-status="job.deployment_status"
+          :icon-status="job.status"
+        />
+
+        <erased-block
+          v-if="job.erased_at"
+          class="js-job-erased-block"
+          :user="job.erased_by"
+          :erased-at="job.erased_at"
+        />
+
+        <!--job log -->
+        <div 
+          v-if="hasTrace" 
+          class="build-trace-container prepend-top-default">
+          <log-top-bar
+            :class="{
+              'sidebar-expanded': isSidebarOpen,
+              'sidebar-collapsed': !isSidebarOpen
+            }"
+            :erase-path="job.erase_path"
+            :size="traceSize"
+            :raw-path="job.raw_path"
+            :is-scroll-bottom-disabled="isScrollBottomDisabled"
+            :is-scroll-top-disabled="isScrollTopDisabled"
+            :is-trace-size-visible="isTraceSizeVisible"
+            :is-scrolling-down="isScrollingDown"
+            @scrollJobLogTop="scrollTop"
+            @scrollJobLogBottom="scrollBottom"
+          />
+          <log
+            :trace="trace"
+            :is-complete="isTraceComplete"
           />
         </div>
+        <!-- EO job log -->
 
-        <callout
-          v-if="shouldRenderCalloutMessage"
-          :message="job.callout_message"
+        <!--empty state -->
+        <empty-state
+          v-if="!hasTrace"
+          class="js-job-empty-state"
+          :illustration-path="emptyStateIllustration.image"
+          :illustration-size-class="emptyStateIllustration.size"
+          :title="emptyStateIllustration.title"
+          :content="emptyStateIllustration.content"
+          :action="emptyStateAction"
         />
-      </header>
-      <!-- EO Header Section -->
-
-      <!-- Body Section -->
-      <stuck-block
-        v-if="isJobStuck"
-        class="js-job-stuck"
-        :has-no-runners-for-project="job.runners.available"
-        :tags="job.tags"
-        :runners-path="runnerSettingsUrl"
-      />
-
-      <environments-block
-        v-if="hasEnvironment"
-        class="js-job-environment"
-        :deployment-status="job.deployment_status"
-        :icon-status="job.status"
-      />
-
-      <erased-block
-        v-if="job.erased_at"
-        class="js-job-erased-block"
-        :user="job.erased_by"
-        :erased-at="job.erased_at"
-      />
-
-      <!--job log -->
-      <!-- EO job log -->
-
-      <!--empty state -->
-      <empty-state
-        v-if="!hasTrace"
-        class="js-job-empty-state"
-        :illustration-path="emptyStateIllustration.image"
-        :illustration-size-class="emptyStateIllustration.size"
-        :title="emptyStateIllustration.title"
-        :content="emptyStateIllustration.content"
-        :action="job.status.action"
-      />
       <!-- EO empty state -->
 
       <!-- EO Body Section -->
+      </div>
     </template>
+
+    <sidebar
+      v-if="shouldRenderContent"
+      class="js-job-sidebar"
+      :class="{
+        'right-sidebar-expanded': isSidebarOpen,
+        'right-sidebar-collapsed': !isSidebarOpen
+      }"
+      :runner-help-url="runnerHelpUrl"
+    />
   </div>
 </template>
diff --git a/app/assets/javascripts/jobs/components/job_log.vue b/app/assets/javascripts/jobs/components/job_log.vue
index 9d78d89239a..accda5d1bd8 100644
--- a/app/assets/javascripts/jobs/components/job_log.vue
+++ b/app/assets/javascripts/jobs/components/job_log.vue
@@ -1,20 +1,48 @@
 <script>
-export default {
-  name: 'JobLog',
-  props: {
-    trace: {
-      type: String,
-      required: true,
+  import { mapState, mapActions } from 'vuex';
+
+  export default {
+    name: 'JobLog',
+    props: {
+      trace: {
+        type: String,
+        required: true,
+      },
+      isComplete: {
+        type: Boolean,
+        required: true,
+      },
+    },
+    computed: {
+      ...mapState(['isScrolledToBottomBeforeReceivingTrace']),
+    },
+    updated() {
+      this.$nextTick(() => this.handleScrollDown());
+    },
+    mounted() {
+      this.$nextTick(() => this.handleScrollDown());
     },
-    isComplete: {
-      type: Boolean,
-      required: true,
+    methods: {
+      ...mapActions(['scrollBottom']),
+      /**
+       * The job log is sent in HTML, which means we need to use `v-html` to render it
+       * Using the updated hook with $nextTick is not enough to wait for the DOM to be updated
+       * in this case because it runs before `v-html` has finished running, since there's no
+       * Vue binding.
+       * In order to scroll the page down after `v-html` has finished, we need to use setTimeout
+       */
+      handleScrollDown() {
+        if (this.isScrolledToBottomBeforeReceivingTrace) {
+          setTimeout(() => {
+            this.scrollBottom();
+          }, 0);
+        }
+      },
     },
-  },
-};
+  };
 </script>
 <template>
-  <pre class="build-trace">
+  <pre class="js-build-trace build-trace">
     <code
       class="bash"
       v-html="trace"
@@ -22,7 +50,7 @@ export default {
     </code>
 
     <div
-      v-if="isComplete"
+      v-if="!isComplete"
       class="js-log-animation build-loader-animation"
     >
       <div class="dot"></div>
diff --git a/app/assets/javascripts/jobs/components/job_log_controllers.vue b/app/assets/javascripts/jobs/components/job_log_controllers.vue
index cc885ea8e1b..94ab1b16c84 100644
--- a/app/assets/javascripts/jobs/components/job_log_controllers.vue
+++ b/app/assets/javascripts/jobs/components/job_log_controllers.vue
@@ -4,6 +4,7 @@ import Icon from '~/vue_shared/components/icon.vue';
 import tooltip from '~/vue_shared/directives/tooltip';
 import { numberToHumanSize } from '~/lib/utils/number_utils';
 import { sprintf } from '~/locale';
+import scrollDown from '../svg/scroll_down.svg';
 
 export default {
   components: {
@@ -12,6 +13,7 @@ export default {
   directives: {
     tooltip,
   },
+  scrollDown,
   props: {
     erasePath: {
       type: String,
@@ -65,7 +67,7 @@ export default {
 };
 </script>
 <template>
-  <div class="top-bar affix js-top-bar">
+  <div class="top-bar affix">
     <!-- truncate information -->
     <div class="js-truncated-info truncated-info d-none d-sm-block float-left">
       <template v-if="isTraceSizeVisible">
@@ -100,7 +102,7 @@ export default {
         v-tooltip
         :title="s__('Job|Erase job log')"
         :href="erasePath"
-        data-confirm="__('Are you sure you want to erase this build?')"
+        :data-confirm="__('Are you sure you want to erase this build?')"
         class="js-erase-link controllers-buttons"
         data-container="body"
         data-method="post"
@@ -138,8 +140,8 @@ export default {
           class="js-scroll-bottom btn-scroll btn-transparent btn-blank"
           :class="{ animate: isScrollingDown }"
           @click="handleScrollToBottom"
+          v-html="$options.scrollDown"
         >
-          <icon name="scroll_down"/>
         </button>
       </div>
       <!-- eo scroll buttons -->
diff --git a/app/assets/javascripts/jobs/components/sidebar.vue b/app/assets/javascripts/jobs/components/sidebar.vue
index 8f3c6aced23..906769ee6a2 100644
--- a/app/assets/javascripts/jobs/components/sidebar.vue
+++ b/app/assets/javascripts/jobs/components/sidebar.vue
@@ -29,14 +29,9 @@ export default {
       required: false,
       default: '',
     },
-    terminalPath: {
-      type: String,
-      required: false,
-      default: null,
-    },
   },
   computed: {
-    ...mapState(['job', 'isLoading', 'stages', 'jobs', 'selectedStage']),
+    ...mapState(['job', 'stages', 'jobs', 'selectedStage']),
     coverage() {
       return `${this.job.coverage}%`;
     },
@@ -64,10 +59,10 @@ export default {
         return '';
       }
 
-      let t = this.job.metadata.timeout_human_readable;
-      if (this.job.metadata.timeout_source !== '') {
-        t += ` (from ${this.job.metadata.timeout_source})`;
-      }
+    let t = this.job.metadata.timeout_human_readable;
+    if (this.job.metadata.timeout_source !== '') {
+      t += ` (from ${this.job.metadata.timeout_source})`;
+    }
 
       return t;
     },
@@ -100,196 +95,190 @@ export default {
       );
     },
     commit() {
-      return this.job.pipeline.commit || {};
+      return this.job.pipeline && this.job.pipeline.commit ? this.job.pipeline.commit : {};
     },
   },
   methods: {
-    ...mapActions(['fetchJobsForStage']),
+    ...mapActions(['fetchJobsForStage', 'toggleSidebar']),
   },
 };
 </script>
 <template>
   <aside
-    class="js-build-sidebar right-sidebar right-sidebar-expanded build-sidebar"
+    class="right-sidebar build-sidebar"
     data-offset-top="101"
     data-spy="affix"
   >
     <div class="sidebar-container">
       <div class="blocks-container">
-        <template v-if="!isLoading">
-          <div class="block">
-            <strong class="inline prepend-top-8">
-              {{ job.name }}
-            </strong>
-            <a
-              v-if="job.retry_path"
-              :class="retryButtonClass"
-              :href="job.retry_path"
-              data-method="post"
-              rel="nofollow"
-            >
-              {{ __('Retry') }}
-            </a>
-            <a
-              v-if="terminalPath"
-              :href="terminalPath"
-              class="js-terminal-link pull-right btn btn-primary
-        btn-inverted visible-md-block visible-lg-block"
-              target="_blank"
-            >
-              {{ __('Debug') }}
-              <icon name="external-link" />
-            </a>
-            <button
-              :aria-label="__('Toggle Sidebar')"
-              type="button"
-              class="btn btn-blank gutter-toggle
-          float-right d-block d-md-none js-sidebar-build-toggle"
-            >
-              <i
-                aria-hidden="true"
-                data-hidden="true"
-                class="fa fa-angle-double-right"
-              ></i>
-            </button>
-          </div>
-          <div
-            v-if="job.retry_path || job.new_issue_path"
-            class="block retry-link"
+        <div class="block">
+          <strong class="inline prepend-top-8">
+            {{ job.name }}
+          </strong>
+          <a
+            v-if="job.retry_path"
+            :class="retryButtonClass"
+            :href="job.retry_path"
+            data-method="post"
+            rel="nofollow"
           >
-            <a
-              v-if="job.new_issue_path"
-              :href="job.new_issue_path"
-              class="js-new-issue btn btn-success btn-inverted"
-            >
-              {{ __('New issue') }}
+            {{ __('Retry') }}
+          </a>
+          <a
+            v-if="job.terminal_path"
+            :href="job.terminal_path"
+            class="js-terminal-link pull-right btn btn-primary
+      btn-inverted visible-md-block visible-lg-block"
+            target="_blank"
+          >
+            {{ __('Debug') }}
+            <icon name="external-link" />
+          </a>
+          <button
+            :aria-label="__('Toggle Sidebar')"
+            type="button"
+            class="btn btn-blank gutter-toggle
+        float-right d-block d-md-none js-sidebar-build-toggle"
+            @click="toggleSidebar"
+          >
+            <i
+              aria-hidden="true"
+              data-hidden="true"
+              class="fa fa-angle-double-right"
+            ></i>
+          </button>
+        </div>
+        <div
+          v-if="job.retry_path || job.new_issue_path"
+          class="block retry-link"
+        >
+          <a
+            v-if="job.new_issue_path"
+            :href="job.new_issue_path"
+            class="js-new-issue btn btn-success btn-inverted"
+          >
+            {{ __('New issue') }}
+          </a>
+          <a
+            v-if="job.retry_path"
+            :href="job.retry_path"
+            class="js-retry-job btn btn-inverted-secondary"
+            data-method="post"
+            rel="nofollow"
+          >
+            {{ __('Retry') }}
+          </a>
+        </div>
+        <div :class="{ block : renderBlock }">
+          <p
+            v-if="job.merge_request"
+            class="build-detail-row js-job-mr"
+          >
+            <span class="build-light-text">
+              {{ __('Merge Request:') }}
+            </span>
+            <a :href="job.merge_request.path">
+              !{{ job.merge_request.iid }}
             </a>
+          </p>
+
+          <detail-row
+            v-if="job.duration"
+            :value="duration"
+            class="js-job-duration"
+            title="Duration"
+          />
+          <detail-row
+            v-if="job.finished_at"
+            :value="timeFormated(job.finished_at)"
+            class="js-job-finished"
+            title="Finished"
+          />
+          <detail-row
+            v-if="job.erased_at"
+            :value="timeFormated(job.erased_at)"
+            class="js-job-erased"
+            title="Erased"
+          />
+          <detail-row
+            v-if="job.queued"
+            :value="queued"
+            class="js-job-queued"
+            title="Queued"
+          />
+          <detail-row
+            v-if="hasTimeout"
+            :help-url="runnerHelpUrl"
+            :value="timeout"
+            class="js-job-timeout"
+            title="Timeout"
+          />
+          <detail-row
+            v-if="job.runner"
+            :value="runnerId"
+            class="js-job-runner"
+            title="Runner"
+          />
+          <detail-row
+            v-if="job.coverage"
+            :value="coverage"
+            class="js-job-coverage"
+            title="Coverage"
+          />
+          <p
+            v-if="job.tags.length"
+            class="build-detail-row js-job-tags"
+          >
+            <span class="build-light-text">
+              {{ __('Tags:') }}
+            </span>
+            <span
+              v-for="(tag, i) in job.tags"
+              :key="i"
+              class="label label-primary">
+              {{ tag }}
+            </span>
+          </p>
+
+          <div
+            v-if="job.cancel_path"
+            class="btn-group prepend-top-5"
+            role="group">
             <a
-              v-if="job.retry_path"
-              :href="job.retry_path"
-              class="js-retry-job btn btn-inverted-secondary"
+              :href="job.cancel_path"
+              class="js-cancel-job btn btn-sm btn-default"
               data-method="post"
               rel="nofollow"
             >
-              {{ __('Retry') }}
+              {{ __('Cancel') }}
             </a>
           </div>
-          <div :class="{ block : renderBlock }">
-            <p
-              v-if="job.merge_request"
-              class="build-detail-row js-job-mr"
-            >
-              <span class="build-light-text">
-                {{ __('Merge Request:') }}
-              </span>
-              <a :href="job.merge_request.path">
-                !{{ job.merge_request.iid }}
-              </a>
-            </p>
-
-            <detail-row
-              v-if="job.duration"
-              :value="duration"
-              class="js-job-duration"
-              title="Duration"
-            />
-            <detail-row
-              v-if="job.finished_at"
-              :value="timeFormated(job.finished_at)"
-              class="js-job-finished"
-              title="Finished"
-            />
-            <detail-row
-              v-if="job.erased_at"
-              :value="timeFormated(job.erased_at)"
-              class="js-job-erased"
-              title="Erased"
-            />
-            <detail-row
-              v-if="job.queued"
-              :value="queued"
-              class="js-job-queued"
-              title="Queued"
-            />
-            <detail-row
-              v-if="hasTimeout"
-              :help-url="runnerHelpUrl"
-              :value="timeout"
-              class="js-job-timeout"
-              title="Timeout"
-            />
-            <detail-row
-              v-if="job.runner"
-              :value="runnerId"
-              class="js-job-runner"
-              title="Runner"
-            />
-            <detail-row
-              v-if="job.coverage"
-              :value="coverage"
-              class="js-job-coverage"
-              title="Coverage"
-            />
-            <p
-              v-if="job.tags.length"
-              class="build-detail-row js-job-tags"
-            >
-              <span class="build-light-text">
-                {{ __('Tags:') }}
-              </span>
-              <span
-                v-for="(tag, i) in job.tags"
-                :key="i"
-                class="label label-primary">
-                {{ tag }}
-              </span>
-            </p>
-
-            <div
-              v-if="job.cancel_path"
-              class="btn-group prepend-top-5"
-              role="group">
-              <a
-                :href="job.cancel_path"
-                class="js-cancel-job btn btn-sm btn-default"
-                data-method="post"
-                rel="nofollow"
-              >
-                {{ __('Cancel') }}
-              </a>
-            </div>
-          </div>
-          <artifacts-block
-            v-if="hasArtifact"
-            :artifact="job.artifact"
-          />
-          <trigger-block
-            v-if="hasTriggers"
-            :trigger="job.trigger"
-          />
-          <commit-block
-            :is-last-block="hasStages"
-            :commit="commit"
-            :merge-request="job.merge_request"
-          />
+        </div>
 
-          <stages-dropdown
-            :stages="stages"
-            :pipeline="job.pipeline"
-            :selected-stage="selectedStage"
-            @requestSidebarStageDropdown="fetchJobsForStage"
-          />
+        <artifacts-block
+          v-if="hasArtifact"
+          :artifact="job.artifact"
+        />
+        <trigger-block
+          v-if="hasTriggers"
+          :trigger="job.trigger"
+        />
+        <commit-block
+          :is-last-block="hasStages"
+          :commit="commit"
+          :merge-request="job.merge_request"
+        />
 
-        </template>
-        <gl-loading-icon
-          v-else
-          :size="2"
-          class="prepend-top-10"
+        <stages-dropdown
+          :stages="stages"
+          :pipeline="job.pipeline"
+          :selected-stage="selectedStage"
+          @requestSidebarStageDropdown="fetchJobsForStage"
         />
       </div>
 
       <jobs-container
-        v-if="!isLoading && jobs.length"
+        v-if="jobs.length"
         :jobs="jobs"
         :job-id="job.id"
       />
diff --git a/app/assets/javascripts/jobs/index.js b/app/assets/javascripts/jobs/index.js
new file mode 100644
index 00000000000..ccd096a1da5
--- /dev/null
+++ b/app/assets/javascripts/jobs/index.js
@@ -0,0 +1,26 @@
+import Vue from 'vue';
+import JobApp from './components/job_app.vue';
+
+export default () => {
+  const element = document.getElementById('js-job-vue-app');
+
+  return new Vue({
+    el: element,
+    components: {
+      JobApp,
+    },
+    render(createElement) {
+      return createElement('job-app', {
+        props: {
+          runnerHelpUrl: element.dataset.runnerHelpUrl,
+          runnerSettingsUrl: element.dataset.runnerSettingsUrl,
+          endpoint: element.dataset.endpoint,
+          pagePath: element.dataset.buildOptionsPagePath,
+          logState: element.dataset.buildOptionsLogState,
+          buildStatus: element.dataset.buildOptionsBuildStatus,
+        },
+      });
+    },
+  });
+};
+
diff --git a/app/assets/javascripts/jobs/job_details_bundle.js b/app/assets/javascripts/jobs/job_details_bundle.js
deleted file mode 100644
index 15cd79b1c50..00000000000
--- a/app/assets/javascripts/jobs/job_details_bundle.js
+++ /dev/null
@@ -1,76 +0,0 @@
-import _ from 'underscore';
-import { mapState, mapActions } from 'vuex';
-import Vue from 'vue';
-import Job from '../job';
-import JobApp from './components/job_app.vue';
-import Sidebar from './components/sidebar.vue';
-import createStore from './store';
-
-export default () => {
-  const { dataset } = document.getElementById('js-job-details-vue');
-
-
-
-  const store = createStore();
-  store.dispatch('setJobEndpoint', dataset.endpoint);
-
-  store.dispatch('fetchJob');
-
-  // Header
-  // eslint-disable-next-line no-new
-  new Vue({
-    el: '#js-build-header-vue',
-    components: {
-      JobApp,
-    },
-    store,
-    computed: {
-      ...mapState(['job', 'isLoading']),
-    },
-    render(createElement) {
-      return createElement('job-app', {
-        props: {
-          isLoading: this.isLoading,
-          job: this.job,
-          runnerSettingsUrl: dataset.runnerSettingsUrl,
-        },
-      });
-    },
-  });
-
-  // Sidebar information block
-  const detailsBlockElement = document.getElementById('js-details-block-vue');
-  const detailsBlockDataset = detailsBlockElement.dataset;
-  // eslint-disable-next-line
-  new Vue({
-    el: detailsBlockElement,
-    components: {
-      Sidebar,
-    },
-    computed: {
-      ...mapState(['job']),
-    },
-    watch: {
-      job(newVal, oldVal) {
-        if (_.isEmpty(oldVal) && !_.isEmpty(newVal.pipeline)) {
-          this.fetchStages();
-        }
-      },
-    },
-    methods: {
-      ...mapActions(['fetchStages']),
-    },
-    store,
-    render(createElement) {
-      return createElement('sidebar', {
-        props: {
-          runnerHelpUrl: dataset.runnerHelpUrl,
-          terminalPath: detailsBlockDataset.terminalPath,
-        },
-      });
-    },
-  });
-
-  // eslint-disable-next-line no-new
-  new Job();
-};
diff --git a/app/assets/javascripts/jobs/store/actions.js b/app/assets/javascripts/jobs/store/actions.js
index d0040161dc3..54ed217572a 100644
--- a/app/assets/javascripts/jobs/store/actions.js
+++ b/app/assets/javascripts/jobs/store/actions.js
@@ -1,17 +1,32 @@
 import Visibility from 'visibilityjs';
 import * as types from './mutation_types';
-import axios from '../../lib/utils/axios_utils';
-import Poll from '../../lib/utils/poll';
-import { setCiStatusFavicon } from '../../lib/utils/common_utils';
-import flash from '../../flash';
-import { __ } from '../../locale';
+import axios from '~/lib/utils/axios_utils';
+import Poll from '~/lib/utils/poll';
+import { setFaviconOverlay, resetFavicon } from '~/lib/utils/common_utils';
+import flash from '~/flash';
+import { __ } from '~/locale';
+import {
+  canScroll,
+  isScrolledToBottom,
+  isScrolledToTop,
+  isScrolledToMiddle,
+  scrollDown,
+  scrollUp,
+} from '~/lib/utils/scroll_utils';
 
 export const setJobEndpoint = ({ commit }, endpoint) => commit(types.SET_JOB_ENDPOINT, endpoint);
-export const setTraceEndpoint = ({ commit }, endpoint) =>
-  commit(types.SET_TRACE_ENDPOINT, endpoint);
-export const setStagesEndpoint = ({ commit }, endpoint) =>
-  commit(types.SET_STAGES_ENDPOINT, endpoint);
-export const setJobsEndpoint = ({ commit }, endpoint) => commit(types.SET_JOBS_ENDPOINT, endpoint);
+export const setTraceOptions = ({ commit }, options) => commit(types.SET_TRACE_OPTIONS, options);
+
+export const hideSidebar = ({ commit }) => commit(types.HIDE_SIDEBAR);
+export const showSidebar = ({ commit }) => commit(types.SHOW_SIDEBAR);
+
+export const toggleSidebar = ({ dispatch, state }) => {
+  if (state.isSidebarOpen) {
+    dispatch('hideSidebar');
+  } else {
+    dispatch('showSidebar');
+  }
+};
 
 let eTagPoll;
 
@@ -62,41 +77,84 @@ export const fetchJob = ({ state, dispatch }) => {
   });
 };
 
-export const receiveJobSuccess = ({ commit }, data) => {
+export const receiveJobSuccess = ({ commit }, data = {}) => {
   commit(types.RECEIVE_JOB_SUCCESS, data);
+
+  if (data.favicon) {
+    setFaviconOverlay(data.favicon);
+  } else {
+    resetFavicon();
+  }
 };
 export const receiveJobError = ({ commit }) => {
   commit(types.RECEIVE_JOB_ERROR);
   flash(__('An error occurred while fetching the job.'));
+  resetFavicon();
 };
 
 /**
  * Job's Trace
  */
-export const scrollTop = ({ commit }) => {
-  commit(types.SCROLL_TO_TOP);
-  window.scrollTo({ top: 0 });
+export const scrollTop = ({ dispatch }) => {
+  scrollUp();
+  dispatch('toggleScrollButtons');
 };
 
-export const scrollBottom = ({ commit }) => {
-  commit(types.SCROLL_TO_BOTTOM);
-  window.scrollTo({ top: document.height });
+export const scrollBottom = ({ dispatch }) => {
+  scrollDown();
+  dispatch('toggleScrollButtons');
+};
+
+/**
+ * Responsible for toggling the disabled state of the scroll buttons
+ */
+export const toggleScrollButtons = ({ dispatch }) => {
+  if (canScroll()) {
+    if (isScrolledToMiddle()) {
+      dispatch('enableScrollTop');
+      dispatch('enableScrollBottom');
+    } else if (isScrolledToTop()) {
+      dispatch('disableScrollTop');
+      dispatch('enableScrollBottom');
+    } else if (isScrolledToBottom()) {
+      dispatch('disableScrollBottom');
+      dispatch('enableScrollTop');
+    }
+  } else {
+    dispatch('disableScrollBottom');
+    dispatch('disableScrollTop');
+  }
+};
+
+export const disableScrollBottom = ({ commit }) => commit(types.DISABLE_SCROLL_BOTTOM);
+export const disableScrollTop = ({ commit }) => commit(types.DISABLE_SCROLL_TOP);
+export const enableScrollBottom = ({ commit }) => commit(types.ENABLE_SCROLL_BOTTOM);
+export const enableScrollTop = ({ commit }) => commit(types.ENABLE_SCROLL_TOP);
+
+/**
+ * While the automatic scroll down is active,
+ * we show the scroll down button with an animation
+ */
+export const toggleScrollAnimation = ({ commit }, toggle) =>
+  commit(types.TOGGLE_SCROLL_ANIMATION, toggle);
+
+/**
+ * Responsible to handle automatic scroll
+ */
+export const toggleScrollisInBottom = ({ commit }, toggle) => {
+  commit(types.TOGGLE_IS_SCROLL_IN_BOTTOM_BEFORE_UPDATING_TRACE, toggle);
 };
 
 export const requestTrace = ({ commit }) => commit(types.REQUEST_TRACE);
 
 let traceTimeout;
-export const fetchTrace = ({ dispatch, state }) => {
-  dispatch('requestTrace');
-
+export const fetchTrace = ({ dispatch, state }) =>
   axios
     .get(`${state.traceEndpoint}/trace.json`, {
       params: { state: state.traceState },
     })
     .then(({ data }) => {
-      if (!state.fetchingStatusFavicon) {
-        dispatch('fetchFavicon');
-      }
+      dispatch('toggleScrollisInBottom', isScrolledToBottom());
       dispatch('receiveTraceSuccess', data);
 
       if (!data.complete) {
@@ -108,7 +166,7 @@ export const fetchTrace = ({ dispatch, state }) => {
       }
     })
     .catch(() => dispatch('receiveTraceError'));
-};
+
 export const stopPollingTrace = ({ commit }) => {
   commit(types.STOP_POLLING_TRACE);
   clearTimeout(traceTimeout);
@@ -120,17 +178,6 @@ export const receiveTraceError = ({ commit }) => {
   flash(__('An error occurred while fetching the job log.'));
 };
 
-export const fetchFavicon = ({ state, dispatch }) => {
-  dispatch('requestStatusFavicon');
-  setCiStatusFavicon(`${state.pagePath}/status.json`)
-    .then(() => dispatch('receiveStatusFaviconSuccess'))
-    .catch(() => dispatch('requestStatusFaviconError'));
-};
-export const requestStatusFavicon = ({ commit }) => commit(types.REQUEST_STATUS_FAVICON);
-export const receiveStatusFaviconSuccess = ({ commit }) =>
-  commit(types.RECEIVE_STATUS_FAVICON_SUCCESS);
-export const requestStatusFaviconError = ({ commit }) => commit(types.RECEIVE_STATUS_FAVICON_ERROR);
-
 /**
  * Stages dropdown on sidebar
  */
diff --git a/app/assets/javascripts/jobs/store/getters.js b/app/assets/javascripts/jobs/store/getters.js
index 9f4f372e3d2..4ce395a9106 100644
--- a/app/assets/javascripts/jobs/store/getters.js
+++ b/app/assets/javascripts/jobs/store/getters.js
@@ -1,5 +1,6 @@
 import _ from 'underscore';
 import { __ } from '~/locale';
+import { isScrolledToBottom } from '~/lib/utils/scroll_utils';
 
 export const headerActions = state => {
   if (state.job.new_issue_path) {
@@ -34,11 +35,12 @@ export const hasEnvironment = state => !_.isEmpty(state.job.deployment_status);
  * Used to check if it should render the job log or the empty state
  * @returns {Boolean}
  */
-export const hasTrace = state => state.job.has_trace || state.job.status.group === 'running';
+export const hasTrace = state => state.job.has_trace || (!_.isEmpty(state.job.status) && state.job.status.group === 'running');
 
 export const emptyStateIllustration = state =>
   (state.job && state.job.status && state.job.status.illustration) || {};
 
+export const emptyStateAction = state =>  (state.job && state.job.status && state.job.status.action) || {};
 /**
  * When the job is pending and there are no available runners
  * we need to render the stuck block;
@@ -46,8 +48,10 @@ export const emptyStateIllustration = state =>
  * @returns {Boolean}
  */
 export const isJobStuck = state =>
-  state.job.status.group === 'pending' &&
+  (!_.isEmpty(state.job.status) && state.job.status.group === 'pending') &&
   (!_.isEmpty(state.job.runners) && state.job.runners.available === false);
 
+export const isScrollingDown = state => isScrolledToBottom() && !state.isTraceComplete;
+
 // prevent babel-plugin-rewire from generating an invalid default during karma tests
 export default () => {};
diff --git a/app/assets/javascripts/jobs/store/mutation_types.js b/app/assets/javascripts/jobs/store/mutation_types.js
index e66e1d4f116..fd098f13e90 100644
--- a/app/assets/javascripts/jobs/store/mutation_types.js
+++ b/app/assets/javascripts/jobs/store/mutation_types.js
@@ -1,10 +1,19 @@
 export const SET_JOB_ENDPOINT = 'SET_JOB_ENDPOINT';
-export const SET_TRACE_ENDPOINT = 'SET_TRACE_ENDPOINT';
-export const SET_STAGES_ENDPOINT = 'SET_STAGES_ENDPOINT';
-export const SET_JOBS_ENDPOINT = 'SET_JOBS_ENDPOINT';
+export const SET_TRACE_OPTIONS = 'SET_TRACE_OPTIONS';
+
+export const HIDE_SIDEBAR = 'HIDE_SIDEBAR';
+export const SHOW_SIDEBAR = 'SHOW_SIDEBAR';
 
 export const SCROLL_TO_TOP = 'SCROLL_TO_TOP';
 export const SCROLL_TO_BOTTOM = 'SCROLL_TO_BOTTOM';
+export const DISABLE_SCROLL_BOTTOM = 'DISABLE_SCROLL_BOTTOM';
+export const DISABLE_SCROLL_TOP = 'DISABLE_SCROLL_TOP';
+export const ENABLE_SCROLL_BOTTOM = 'ENABLE_SCROLL_BOTTOM';
+export const ENABLE_SCROLL_TOP = 'ENABLE_SCROLL_TOP';
+// TODO
+export const TOGGLE_SCROLL_ANIMATION = 'TOGGLE_SCROLL_ANIMATION';
+
+export const TOGGLE_IS_SCROLL_IN_BOTTOM_BEFORE_UPDATING_TRACE = 'TOGGLE_IS_SCROLL_IN_BOTTOM';
 
 export const REQUEST_JOB = 'REQUEST_JOB';
 export const RECEIVE_JOB_SUCCESS = 'RECEIVE_JOB_SUCCESS';
@@ -15,10 +24,6 @@ export const STOP_POLLING_TRACE = 'STOP_POLLING_TRACE';
 export const RECEIVE_TRACE_SUCCESS = 'RECEIVE_TRACE_SUCCESS';
 export const RECEIVE_TRACE_ERROR = 'RECEIVE_TRACE_ERROR';
 
-export const REQUEST_STATUS_FAVICON = 'REQUEST_STATUS_FAVICON';
-export const RECEIVE_STATUS_FAVICON_SUCCESS = 'RECEIVE_STATUS_FAVICON_SUCCESS';
-export const RECEIVE_STATUS_FAVICON_ERROR = 'RECEIVE_STATUS_FAVICON_ERROR';
-
 export const REQUEST_STAGES = 'REQUEST_STAGES';
 export const RECEIVE_STAGES_SUCCESS = 'RECEIVE_STAGES_SUCCESS';
 export const RECEIVE_STAGES_ERROR = 'RECEIVE_STAGES_ERROR';
diff --git a/app/assets/javascripts/jobs/store/mutations.js b/app/assets/javascripts/jobs/store/mutations.js
index f00e06e1a6c..4195d787f12 100644
--- a/app/assets/javascripts/jobs/store/mutations.js
+++ b/app/assets/javascripts/jobs/store/mutations.js
@@ -4,14 +4,17 @@ export default {
   [types.SET_JOB_ENDPOINT](state, endpoint) {
     state.jobEndpoint = endpoint;
   },
-  [types.REQUEST_STATUS_FAVICON](state) {
-    state.fetchingStatusFavicon = true;
+
+  [types.SET_TRACE_OPTIONS](state, options = {}) {
+    state.traceEndpoint = options.pagePath;
+    state.traceState = options.logState;
   },
-  [types.RECEIVE_STATUS_FAVICON_SUCCESS](state) {
-    state.fetchingStatusFavicon = false;
+
+  [types.HIDE_SIDEBAR](state) {
+    state.isSidebarOpen = false;
   },
-  [types.RECEIVE_STATUS_FAVICON_ERROR](state) {
-    state.fetchingStatusFavicon = false;
+  [types.SHOW_SIDEBAR](state) {
+    state.isSidebarOpen = true;
   },
 
   [types.RECEIVE_TRACE_SUCCESS](state, log) {
@@ -23,8 +26,12 @@ export default {
       state.trace += log.html;
       state.traceSize += log.size;
     } else {
-      state.trace = log.html;
-      state.traceSize = log.size;
+      // When the job still does not have a trace
+      // the trace response will not have a defined
+      // html or size. We keep the old value otherwise these
+      // will be set to `undefined`
+      state.trace = log.html || state.trace;
+      state.traceSize = log.size || state.traceSize;
     }
 
     if (state.traceSize < log.total) {
@@ -33,25 +40,29 @@ export default {
       state.isTraceSizeVisible = false;
     }
 
-    state.isTraceComplete = log.complete;
-    state.hasTraceError = false;
+    state.isTraceComplete = log.complete || state.isTraceComplete;
   },
+
+  /**
+   * Will remove loading animation
+   */
   [types.STOP_POLLING_TRACE](state) {
     state.isTraceComplete = true;
   },
-  // todo_fl: check this.
+
+  /**
+   * Will remove loading animation
+   */
   [types.RECEIVE_TRACE_ERROR](state) {
-    state.isLoadingTrace = false;
     state.isTraceComplete = true;
-    state.hasTraceError = true;
   },
 
   [types.REQUEST_JOB](state) {
     state.isLoading = true;
   },
   [types.RECEIVE_JOB_SUCCESS](state, job) {
-    state.isLoading = false;
     state.hasError = false;
+    state.isLoading = false;
     state.job = job;
 
     /**
@@ -66,17 +77,28 @@ export default {
   },
   [types.RECEIVE_JOB_ERROR](state) {
     state.isLoading = false;
-    state.hasError = true;
     state.job = {};
+    state.hasError = true;
   },
 
-  [types.SCROLL_TO_TOP](state) {
-    state.isTraceScrolledToBottom = false;
-    state.hasBeenScrolled = true;
+  [types.ENABLE_SCROLL_TOP](state) {
+    state.isScrollTopDisabled = false;
+  },
+  [types.DISABLE_SCROLL_TOP](state) {
+    state.isScrollTopDisabled = true;
+  },
+  [types.ENABLE_SCROLL_BOTTOM](state) {
+    state.isScrollBottomDisabled = false;
   },
-  [types.SCROLL_TO_BOTTOM](state) {
-    state.isTraceScrolledToBottom = true;
-    state.hasBeenScrolled = true;
+  [types.DISABLE_SCROLL_BOTTOM](state) {
+    state.isScrollBottomDisabled = true;
+  },
+  [types.TOGGLE_SCROLL_ANIMATION](state, toggle) {
+    state.isScrollingDown = toggle;
+  },
+
+  [types.TOGGLE_IS_SCROLL_IN_BOTTOM_BEFORE_UPDATING_TRACE](state, toggle) {
+    state.isScrolledToBottomBeforeReceivingTrace = toggle;
   },
 
   [types.REQUEST_STAGES](state) {
diff --git a/app/assets/javascripts/jobs/store/state.js b/app/assets/javascripts/jobs/store/state.js
index afbc959bb71..0eb269ca38f 100644
--- a/app/assets/javascripts/jobs/store/state.js
+++ b/app/assets/javascripts/jobs/store/state.js
@@ -4,36 +4,29 @@ export default () => ({
   jobEndpoint: null,
   traceEndpoint: null,
 
-  // dropdown options
-  stagesEndpoint: null,
-  // list of jobs on sidebard
-  stageJobsEndpoint: null,
+  // sidebar
+  isSidebarOpen: true,
 
-  // job log
   isLoading: false,
   hasError: false,
   job: {},
 
-  // trace
-  isLoadingTrace: false,
-  hasTraceError: false,
+  // scroll buttons state
+  isScrollBottomDisabled: true,
+  isScrollTopDisabled: true,
 
-  trace: '',
-
-  isTraceScrolledToBottom: false,
-  hasBeenScrolled: false,
+  // Used to check if we should keep the automatic scroll
+  isScrolledToBottomBeforeReceivingTrace: true,
 
+  trace: '',
   isTraceComplete: false,
-  traceSize: 0, // todo_fl: needs to be converted into human readable format in components
+  traceSize: 0,
   isTraceSizeVisible: false,
 
-  fetchingStatusFavicon: false,
-  // used as a query parameter
+  // used as a query parameter to fetch the trace
   traceState: null,
-  // used to check if we need to redirect the user - todo_fl:  check if actually needed
-  traceStatus: null,
 
-  // sidebar dropdown
+  // sidebar dropdown & list of jobs
   isLoadingStages: false,
   isLoadingJobs: false,
   selectedStage: __('More'),
diff --git a/app/assets/javascripts/jobs/svg/scroll_down.svg b/app/assets/javascripts/jobs/svg/scroll_down.svg
new file mode 100644
index 00000000000..1d22870ec09
--- /dev/null
+++ b/app/assets/javascripts/jobs/svg/scroll_down.svg
@@ -0,0 +1,5 @@
+<svg width="12" height="16" viewBox="0 0 12 16" xmlns="http://www.w3.org/2000/svg">
+  <path class="first-triangle" d="M1.048 14.155a.508.508 0 0 0-.32.105c-.091.07-.136.154-.136.25v.71c0 .095.045.178.135.249.09.07.197.105.321.105h10.043c.124 0 .23-.035.321-.105.09-.07.136-.154.136-.25v-.71c0-.095-.045-.178-.136-.249a.508.508 0 0 0-.32-.105"/>
+  <path class="second-triangle" d="M.687 8.027c-.09-.087-.122-.16-.093-.22.028-.06.104-.09.228-.09h10.5c.123 0 .2.03.228.09.029.06-.002.133-.093.22L6.393 12.91a.458.458 0 0 1-.136.089h-.37a.626.626 0 0 1-.136-.09"/>
+  <path class="third-triangle" d="M.687 1.027C.597.94.565.867.594.807c.028-.06.104-.09.228-.09h10.5c.123 0 .2.03.228.09.029.06-.002.133-.093.22L6.393 5.91A.458.458 0 0 1 6.257 6h-.37a.626.626 0 0 1-.136-.09"/>
+</svg>
diff --git a/app/assets/javascripts/pages/projects/jobs/show/index.js b/app/assets/javascripts/pages/projects/jobs/show/index.js
index 3626f3ffec6..d57dbeb1242 100644
--- a/app/assets/javascripts/pages/projects/jobs/show/index.js
+++ b/app/assets/javascripts/pages/projects/jobs/show/index.js
@@ -1,3 +1,3 @@
-import initJobDetails from '~/jobs/job_details_bundle';
+import initJobDetails from '~/jobs';
 
 document.addEventListener('DOMContentLoaded', initJobDetails);
diff --git a/app/assets/javascripts/vue_shared/components/header_ci_component.vue b/app/assets/javascripts/vue_shared/components/header_ci_component.vue
index b371b6adf7e..aee88cae48d 100644
--- a/app/assets/javascripts/vue_shared/components/header_ci_component.vue
+++ b/app/assets/javascripts/vue_shared/components/header_ci_component.vue
@@ -69,6 +69,9 @@ export default {
     onClickAction(action) {
       this.$emit('actionClicked', action);
     },
+    onClickSidebarButton() {
+      this.$emit('clickedSidebarButton');
+    },
   },
 };
 </script>
@@ -161,21 +164,21 @@ export default {
           </i>
         </button>
       </template>
-      <button
-        v-if="hasSidebarButton"
-        id="toggleSidebar"
-        type="button"
-        class="btn btn-default d-block d-sm-none d-md-none
+    </section>
+    <button
+      v-if="hasSidebarButton"
+      id="toggleSidebar"
+      type="button"
+      class="btn btn-default d-block d-sm-none
 sidebar-toggle-btn js-sidebar-build-toggle js-sidebar-build-toggle-header"
-        aria-label="Toggle Sidebar"
+      @click="onClickSidebarButton"
+    >
+      <i
+        class="fa fa-angle-double-left"
+        aria-hidden="true"
+        aria-labelledby="toggleSidebar"
       >
-        <i
-          class="fa fa-angle-double-left"
-          aria-hidden="true"
-          aria-labelledby="toggleSidebar"
-        >
-        </i>
-      </button>
-    </section>
+      </i>
+    </button>
   </header>
 </template>
-- 
cgit v1.2.1


From d1fe07a2e5aeaa29d191eeab130335876fd07f85 Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Wed, 17 Oct 2018 11:48:41 +0100
Subject: Fixes broken borders in reports section MR widget

---
 .../reports/components/grouped_test_reports_app.vue           |  2 +-
 .../vue_merge_request_widget/mr_widget_options.vue            | 11 ++++++-----
 2 files changed, 7 insertions(+), 6 deletions(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/reports/components/grouped_test_reports_app.vue b/app/assets/javascripts/reports/components/grouped_test_reports_app.vue
index fb8c6402d02..b373d83a44b 100644
--- a/app/assets/javascripts/reports/components/grouped_test_reports_app.vue
+++ b/app/assets/javascripts/reports/components/grouped_test_reports_app.vue
@@ -82,7 +82,7 @@
     :loading-text="groupedSummaryText"
     :error-text="groupedSummaryText"
     :has-issues="reports.length > 0"
-    class="mr-widget-border-top grouped-security-reports mr-report"
+    class="mr-widget-section grouped-security-reports mr-report"
   >
     <div
       slot="body"
diff --git a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
index 7ac3fedb2e3..a599cc002d6 100644
--- a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
@@ -275,12 +275,13 @@ export default {
       :key="deployment.id"
       :deployment="deployment"
     />
-    <grouped-test-reports-app
-      v-if="mr.testResultsPath"
-      class="js-reports-container"
-      :endpoint="mr.testResultsPath"
-    />
     <div class="mr-section-container">
+      <grouped-test-reports-app
+        v-if="mr.testResultsPath"
+        class="js-reports-container"
+        :endpoint="mr.testResultsPath"
+      />
+
       <div class="mr-widget-section">
         <component
           :is="componentName"
-- 
cgit v1.2.1


From b01dacffffd4df3592611afb43e9309ec6cc7f9c Mon Sep 17 00:00:00 2001
From: Winnie Hellmann <winnie@gitlab.com>
Date: Wed, 17 Oct 2018 11:11:52 +0000
Subject: Replace job with group in frontend components to be consistent with
 backend

---
 .../components/graph/dropdown_job_component.vue    | 122 ------------------
 .../pipelines/components/graph/graph_component.vue |   2 +-
 .../pipelines/components/graph/job_component.vue   | 140 ---------------------
 .../components/graph/job_group_dropdown.vue        | 106 ++++++++++++++++
 .../pipelines/components/graph/job_item.vue        | 140 +++++++++++++++++++++
 .../components/graph/stage_column_component.vue    |  36 +++---
 .../javascripts/pipelines/components/stage.vue     |   6 +-
 7 files changed, 266 insertions(+), 286 deletions(-)
 delete mode 100644 app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue
 delete mode 100644 app/assets/javascripts/pipelines/components/graph/job_component.vue
 create mode 100644 app/assets/javascripts/pipelines/components/graph/job_group_dropdown.vue
 create mode 100644 app/assets/javascripts/pipelines/components/graph/job_item.vue

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue b/app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue
deleted file mode 100644
index 2ad66f4fe86..00000000000
--- a/app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue
+++ /dev/null
@@ -1,122 +0,0 @@
-<script>
-import $ from 'jquery';
-import JobNameComponent from './job_name_component.vue';
-import JobComponent from './job_component.vue';
-import tooltip from '../../../vue_shared/directives/tooltip';
-
-/**
- * Renders the dropdown for the pipeline graph.
- *
- * The following object should be provided as `job`:
- *
- * {
- *   "id": 4256,
- *   "name": "test",
- *   "status": {
- *     "icon": "status_success",
- *     "text": "passed",
- *     "label": "passed",
- *     "group": "success",
- *     "details_path": "/root/ci-mock/builds/4256",
- *     "action": {
- *       "icon": "retry",
- *       "title": "Retry",
- *       "path": "/root/ci-mock/builds/4256/retry",
- *       "method": "post"
- *     }
- *   }
- * }
- */
-export default {
-  directives: {
-    tooltip,
-  },
-
-  components: {
-    JobComponent,
-    JobNameComponent,
-  },
-
-  props: {
-    job: {
-      type: Object,
-      required: true,
-    },
-  },
-
-  computed: {
-    tooltipText() {
-      return `${this.job.name} - ${this.job.status.label}`;
-    },
-  },
-
-  mounted() {
-    this.stopDropdownClickPropagation();
-  },
-
-  methods: {
-    /**
-     * When the user right clicks or cmd/ctrl + click in the job name or the action icon
-     * the dropdown should not be closed so we stop propagation
-     * of the click event inside the dropdown.
-     *
-     * Since this component is rendered multiple times per page we need to guarantee we only
-     * target the click event of this component.
-     */
-    stopDropdownClickPropagation() {
-      $(
-        '.js-grouped-pipeline-dropdown button, .js-grouped-pipeline-dropdown a.mini-pipeline-graph-dropdown-item',
-        this.$el,
-      ).on('click', e => {
-        e.stopPropagation();
-      });
-    },
-
-    pipelineActionRequestComplete() {
-      this.$emit('pipelineActionRequestComplete');
-    },
-  },
-};
-</script>
-<template>
-  <div class="ci-job-dropdown-container dropdown dropright">
-    <button
-      v-tooltip
-      :title="tooltipText"
-      type="button"
-      data-toggle="dropdown"
-      data-container="body"
-      data-boundary="viewport"
-      data-display="static"
-      class="dropdown-menu-toggle build-content"
-    >
-
-      <job-name-component
-        :name="job.name"
-        :status="job.status"
-      />
-
-      <span class="dropdown-counter-badge">
-        {{ job.size }}
-      </span>
-    </button>
-
-    <ul class="dropdown-menu big-pipeline-graph-dropdown-menu js-grouped-pipeline-dropdown">
-      <li class="scrollable-menu">
-        <ul>
-          <li
-            v-for="(item, i) in job.jobs"
-            :key="i"
-          >
-            <job-component
-              :dropdown-length="job.size"
-              :job="item"
-              css-class-job-name="mini-pipeline-graph-dropdown-item"
-              @pipelineActionRequestComplete="pipelineActionRequestComplete"
-            />
-          </li>
-        </ul>
-      </li>
-    </ul>
-  </div>
-</template>
diff --git a/app/assets/javascripts/pipelines/components/graph/graph_component.vue b/app/assets/javascripts/pipelines/components/graph/graph_component.vue
index 9b4ba0c1a9a..23c0be7742e 100644
--- a/app/assets/javascripts/pipelines/components/graph/graph_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/graph_component.vue
@@ -70,7 +70,7 @@ export default {
           v-for="(stage, index) in graph"
           :key="stage.name"
           :title="capitalizeStageName(stage.name)"
-          :jobs="stage.groups"
+          :groups="stage.groups"
           :stage-connector-class="stageConnectorClass(index, stage)"
           :is-first-column="isFirstColumn(index)"
           @refreshPipelineGraph="refreshPipelineGraph"
diff --git a/app/assets/javascripts/pipelines/components/graph/job_component.vue b/app/assets/javascripts/pipelines/components/graph/job_component.vue
deleted file mode 100644
index a1504592bbc..00000000000
--- a/app/assets/javascripts/pipelines/components/graph/job_component.vue
+++ /dev/null
@@ -1,140 +0,0 @@
-<script>
-import ActionComponent from './action_component.vue';
-import JobNameComponent from './job_name_component.vue';
-import tooltip from '../../../vue_shared/directives/tooltip';
-
-/**
- * Renders the badge for the pipeline graph and the job's dropdown.
- *
- * The following object should be provided as `job`:
- *
- * {
- *   "id": 4256,
- *   "name": "test",
- *   "status": {
- *     "icon": "status_success",
- *     "text": "passed",
- *     "label": "passed",
- *     "group": "success",
- *     "tooltip": "passed",
- *     "details_path": "/root/ci-mock/builds/4256",
- *     "action": {
- *       "icon": "retry",
- *       "title": "Retry",
- *       "path": "/root/ci-mock/builds/4256/retry",
- *       "method": "post"
- *     }
- *   }
- * }
- */
-
-export default {
-  components: {
-    ActionComponent,
-    JobNameComponent,
-  },
-  directives: {
-    tooltip,
-  },
-  props: {
-    job: {
-      type: Object,
-      required: true,
-    },
-    cssClassJobName: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    dropdownLength: {
-      type: Number,
-      required: false,
-      default: Infinity,
-    },
-  },
-  computed: {
-    status() {
-      return this.job && this.job.status ? this.job.status : {};
-    },
-
-    tooltipText() {
-      const textBuilder = [];
-
-      if (this.job.name) {
-        textBuilder.push(this.job.name);
-      }
-
-      if (this.job.name && this.status.tooltip) {
-        textBuilder.push('-');
-      }
-
-      if (this.status.tooltip) {
-        textBuilder.push(this.job.status.tooltip);
-      }
-
-      return textBuilder.join(' ');
-    },
-
-    tooltipBoundary() {
-      return this.dropdownLength < 5 ? 'viewport' : null;
-    },
-
-    /**
-     * Verifies if the provided job has an action path
-     *
-     * @return {Boolean}
-     */
-    hasAction() {
-      return this.job.status && this.job.status.action && this.job.status.action.path;
-    },
-  },
-  methods: {
-    pipelineActionRequestComplete() {
-      this.$emit('pipelineActionRequestComplete');
-    },
-  },
-};
-</script>
-<template>
-  <div class="ci-job-component">
-    <a
-      v-if="status.has_details"
-      v-tooltip
-      :href="status.details_path"
-      :title="tooltipText"
-      :class="cssClassJobName"
-      :data-boundary="tooltipBoundary"
-      data-container="body"
-      class="js-pipeline-graph-job-link"
-    >
-
-      <job-name-component
-        :name="job.name"
-        :status="job.status"
-      />
-    </a>
-
-    <div
-      v-else
-      v-tooltip
-      :title="tooltipText"
-      :class="cssClassJobName"
-      class="js-job-component-tooltip non-details-job-component"
-      data-container="body"
-    >
-
-      <job-name-component
-        :name="job.name"
-        :status="job.status"
-      />
-    </div>
-
-    <action-component
-      v-if="hasAction"
-      :tooltip-text="status.action.title"
-      :link="status.action.path"
-      :action-icon="status.action.icon"
-      @pipelineActionRequestComplete="pipelineActionRequestComplete"
-    />
-  </div>
-</template>
diff --git a/app/assets/javascripts/pipelines/components/graph/job_group_dropdown.vue b/app/assets/javascripts/pipelines/components/graph/job_group_dropdown.vue
new file mode 100644
index 00000000000..34bada533df
--- /dev/null
+++ b/app/assets/javascripts/pipelines/components/graph/job_group_dropdown.vue
@@ -0,0 +1,106 @@
+<script>
+import $ from 'jquery';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
+import JobItem from './job_item.vue';
+import tooltip from '../../../vue_shared/directives/tooltip';
+
+/**
+ * Renders the dropdown for the pipeline graph.
+ *
+ * The object provided as `group` corresponds to app/serializers/job_group_entity.rb.
+ *
+ */
+export default {
+  directives: {
+    tooltip,
+  },
+
+  components: {
+    JobItem,
+    CiIcon,
+  },
+
+  props: {
+    group: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  computed: {
+    tooltipText() {
+      const { name, status } = this.group;
+      return `${name} - ${status.label}`;
+    },
+  },
+
+  mounted() {
+    this.stopDropdownClickPropagation();
+  },
+
+  methods: {
+    /**
+     * When the user right clicks or cmd/ctrl + click in the group name or the action icon
+     * the dropdown should not be closed so we stop propagation
+     * of the click event inside the dropdown.
+     *
+     * Since this component is rendered multiple times per page we need to guarantee we only
+     * target the click event of this component.
+     */
+    stopDropdownClickPropagation() {
+      $(
+        '.js-grouped-pipeline-dropdown button, .js-grouped-pipeline-dropdown a.mini-pipeline-graph-dropdown-item',
+        this.$el,
+      ).on('click', e => {
+        e.stopPropagation();
+      });
+    },
+
+    pipelineActionRequestComplete() {
+      this.$emit('pipelineActionRequestComplete');
+    },
+  },
+};
+</script>
+<template>
+  <div class="ci-job-dropdown-container dropdown dropright">
+    <button
+      v-tooltip
+      :title="tooltipText"
+      type="button"
+      data-toggle="dropdown"
+      data-container="body"
+      data-boundary="viewport"
+      data-display="static"
+      class="dropdown-menu-toggle build-content"
+    >
+      <ci-icon :status="group.status" />
+
+      <span class="ci-status-text">
+        {{ group.name }}
+      </span>
+
+      <span class="dropdown-counter-badge">
+        {{ group.size }}
+      </span>
+    </button>
+
+    <ul class="dropdown-menu big-pipeline-graph-dropdown-menu js-grouped-pipeline-dropdown">
+      <li class="scrollable-menu">
+        <ul>
+          <li
+            v-for="job in group.jobs"
+            :key="job.id"
+          >
+            <job-item
+              :dropdown-length="group.size"
+              :job="job"
+              css-class-job-name="mini-pipeline-graph-dropdown-item"
+              @pipelineActionRequestComplete="pipelineActionRequestComplete"
+            />
+          </li>
+        </ul>
+      </li>
+    </ul>
+  </div>
+</template>
diff --git a/app/assets/javascripts/pipelines/components/graph/job_item.vue b/app/assets/javascripts/pipelines/components/graph/job_item.vue
new file mode 100644
index 00000000000..a1504592bbc
--- /dev/null
+++ b/app/assets/javascripts/pipelines/components/graph/job_item.vue
@@ -0,0 +1,140 @@
+<script>
+import ActionComponent from './action_component.vue';
+import JobNameComponent from './job_name_component.vue';
+import tooltip from '../../../vue_shared/directives/tooltip';
+
+/**
+ * Renders the badge for the pipeline graph and the job's dropdown.
+ *
+ * The following object should be provided as `job`:
+ *
+ * {
+ *   "id": 4256,
+ *   "name": "test",
+ *   "status": {
+ *     "icon": "status_success",
+ *     "text": "passed",
+ *     "label": "passed",
+ *     "group": "success",
+ *     "tooltip": "passed",
+ *     "details_path": "/root/ci-mock/builds/4256",
+ *     "action": {
+ *       "icon": "retry",
+ *       "title": "Retry",
+ *       "path": "/root/ci-mock/builds/4256/retry",
+ *       "method": "post"
+ *     }
+ *   }
+ * }
+ */
+
+export default {
+  components: {
+    ActionComponent,
+    JobNameComponent,
+  },
+  directives: {
+    tooltip,
+  },
+  props: {
+    job: {
+      type: Object,
+      required: true,
+    },
+    cssClassJobName: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    dropdownLength: {
+      type: Number,
+      required: false,
+      default: Infinity,
+    },
+  },
+  computed: {
+    status() {
+      return this.job && this.job.status ? this.job.status : {};
+    },
+
+    tooltipText() {
+      const textBuilder = [];
+
+      if (this.job.name) {
+        textBuilder.push(this.job.name);
+      }
+
+      if (this.job.name && this.status.tooltip) {
+        textBuilder.push('-');
+      }
+
+      if (this.status.tooltip) {
+        textBuilder.push(this.job.status.tooltip);
+      }
+
+      return textBuilder.join(' ');
+    },
+
+    tooltipBoundary() {
+      return this.dropdownLength < 5 ? 'viewport' : null;
+    },
+
+    /**
+     * Verifies if the provided job has an action path
+     *
+     * @return {Boolean}
+     */
+    hasAction() {
+      return this.job.status && this.job.status.action && this.job.status.action.path;
+    },
+  },
+  methods: {
+    pipelineActionRequestComplete() {
+      this.$emit('pipelineActionRequestComplete');
+    },
+  },
+};
+</script>
+<template>
+  <div class="ci-job-component">
+    <a
+      v-if="status.has_details"
+      v-tooltip
+      :href="status.details_path"
+      :title="tooltipText"
+      :class="cssClassJobName"
+      :data-boundary="tooltipBoundary"
+      data-container="body"
+      class="js-pipeline-graph-job-link"
+    >
+
+      <job-name-component
+        :name="job.name"
+        :status="job.status"
+      />
+    </a>
+
+    <div
+      v-else
+      v-tooltip
+      :title="tooltipText"
+      :class="cssClassJobName"
+      class="js-job-component-tooltip non-details-job-component"
+      data-container="body"
+    >
+
+      <job-name-component
+        :name="job.name"
+        :status="job.status"
+      />
+    </div>
+
+    <action-component
+      v-if="hasAction"
+      :tooltip-text="status.action.title"
+      :link="status.action.path"
+      :action-icon="status.action.icon"
+      @pipelineActionRequestComplete="pipelineActionRequestComplete"
+    />
+  </div>
+</template>
diff --git a/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue b/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue
index 567ea119343..efbab51d200 100644
--- a/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue
@@ -1,12 +1,12 @@
 <script>
 import _ from 'underscore';
-import JobComponent from './job_component.vue';
-import DropdownJobComponent from './dropdown_job_component.vue';
+import JobItem from './job_item.vue';
+import JobGroupDropdown from './job_group_dropdown.vue';
 
 export default {
   components: {
-    JobComponent,
-    DropdownJobComponent,
+    JobItem,
+    JobGroupDropdown,
   },
   props: {
     title: {
@@ -14,7 +14,7 @@ export default {
       required: true,
     },
 
-    jobs: {
+    groups: {
       type: Array,
       required: true,
     },
@@ -33,12 +33,8 @@ export default {
   },
 
   methods: {
-    firstJob(list) {
-      return list[0];
-    },
-
-    jobId(job) {
-      return `ci-badge-${_.escape(job.name)}`;
+    groupId(group) {
+      return `ci-badge-${_.escape(group.name)}`;
     },
 
     buildConnnectorClass(index) {
@@ -61,25 +57,25 @@ export default {
     <div class="builds-container">
       <ul>
         <li
-          v-for="(job, index) in jobs"
-          :id="jobId(job)"
-          :key="job.id"
+          v-for="(group, index) in groups"
+          :id="groupId(group)"
+          :key="group.id"
           :class="buildConnnectorClass(index)"
           class="build"
         >
 
           <div class="curve"></div>
 
-          <job-component
-            v-if="job.size === 1"
-            :job="job"
+          <job-item
+            v-if="group.size === 1"
+            :job="group.jobs[0]"
             css-class-job-name="build-content"
             @pipelineActionRequestComplete="pipelineActionRequestComplete"
           />
 
-          <dropdown-job-component
-            v-if="job.size > 1"
-            :job="job"
+          <job-group-dropdown
+            v-if="group.size > 1"
+            :group="group"
             @pipelineActionRequestComplete="pipelineActionRequestComplete"
           />
 
diff --git a/app/assets/javascripts/pipelines/components/stage.vue b/app/assets/javascripts/pipelines/components/stage.vue
index 47c15b1a9c4..7ec55792850 100644
--- a/app/assets/javascripts/pipelines/components/stage.vue
+++ b/app/assets/javascripts/pipelines/components/stage.vue
@@ -18,14 +18,14 @@ import Flash from '../../flash';
 import axios from '../../lib/utils/axios_utils';
 import eventHub from '../event_hub';
 import Icon from '../../vue_shared/components/icon.vue';
-import JobComponent from './graph/job_component.vue';
+import JobItem from './graph/job_item.vue';
 import tooltip from '../../vue_shared/directives/tooltip';
 import { PIPELINES_TABLE } from '../constants';
 
 export default {
   components: {
     Icon,
-    JobComponent,
+    JobItem,
   },
 
   directives: {
@@ -198,7 +198,7 @@ export default {
           v-for="job in dropdownContent"
           :key="job.id"
         >
-          <job-component
+          <job-item
             :dropdown-length="dropdownContent.length"
             :job="job"
             css-class-job-name="mini-pipeline-graph-dropdown-item"
-- 
cgit v1.2.1


From ea75b72710d8fdbeaab89d5cb9fbf8f9ea7a83cd Mon Sep 17 00:00:00 2001
From: George Tsiolis <tsiolis.g@gmail.com>
Date: Thu, 11 Oct 2018 20:10:20 +0300
Subject: Update environments empty state

---
 .../environments/components/empty_state.vue        | 29 +++++++++++-----------
 1 file changed, 15 insertions(+), 14 deletions(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/environments/components/empty_state.vue b/app/assets/javascripts/environments/components/empty_state.vue
index 28d2dda9e43..2360a52645b 100644
--- a/app/assets/javascripts/environments/components/empty_state.vue
+++ b/app/assets/javascripts/environments/components/empty_state.vue
@@ -18,27 +18,28 @@ export default {
 };
 </script>
 <template>
-  <div class="blank-state-row">
-    <div class="blank-state-center">
-      <h2 class="blank-state-title js-blank-state-title">
-        {{ s__("Environments|You don't have any environments right now.") }}
-      </h2>
+  <div class="empty-state">
+    <div class="text-content">
+      <h4 class="blank-state-title js-blank-state-title">
+        {{ s__("Environments|You don't have any environments right now") }}
+      </h4>
       <p class="blank-state-text">
         {{ s__(`Environments|Environments are places where
-code gets deployed, such as staging or production.`) }}
-        <br />
+        code gets deployed, such as staging or production.`) }}
         <a :href="helpPath">
           {{ s__("Environments|Read more about environments") }}
         </a>
       </p>
 
-      <a
-        v-if="canCreateEnvironment"
-        :href="newPath"
-        class="btn btn-success js-new-environment-button"
-      >
-        {{ s__("Environments|New environment") }}
-      </a>
+      <div class="text-center">
+        <a
+          v-if="canCreateEnvironment"
+          :href="newPath"
+          class="btn btn-success js-new-environment-button"
+        >
+          {{ s__("Environments|New environment") }}
+        </a>
+      </div>
     </div>
   </div>
 </template>
-- 
cgit v1.2.1


From d4763515c1ec40f2dadf85736d51eecc80a8d18b Mon Sep 17 00:00:00 2001
From: Jose Vargas <jvargas@gitlab.com>
Date: Tue, 16 Oct 2018 16:56:07 -0500
Subject: Add missing state on the application row component

This fixes the application row component weird state when an
`updating` status is fetched, this causes apps to show as uninstalled
even though they are installed in the cluster.
---
 .../clusters/components/application_row.vue        | 293 +++++++++++----------
 app/assets/javascripts/clusters/constants.js       |   1 +
 2 files changed, 152 insertions(+), 142 deletions(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/clusters/components/application_row.vue b/app/assets/javascripts/clusters/components/application_row.vue
index 0452729d3ff..236bb1394c8 100644
--- a/app/assets/javascripts/clusters/components/application_row.vue
+++ b/app/assets/javascripts/clusters/components/application_row.vue
@@ -1,153 +1,162 @@
 <script>
-  /* eslint-disable vue/require-default-prop */
-  import { s__, sprintf } from '../../locale';
-  import eventHub from '../event_hub';
-  import identicon from '../../vue_shared/components/identicon.vue';
-  import loadingButton from '../../vue_shared/components/loading_button.vue';
-  import {
-    APPLICATION_STATUS,
-    REQUEST_LOADING,
-    REQUEST_SUCCESS,
-    REQUEST_FAILURE,
-  } from '../constants';
+/* eslint-disable vue/require-default-prop */
+import { s__, sprintf } from '../../locale';
+import eventHub from '../event_hub';
+import identicon from '../../vue_shared/components/identicon.vue';
+import loadingButton from '../../vue_shared/components/loading_button.vue';
+import {
+  APPLICATION_STATUS,
+  REQUEST_LOADING,
+  REQUEST_SUCCESS,
+  REQUEST_FAILURE,
+} from '../constants';
 
-  export default {
-    components: {
-      loadingButton,
-      identicon,
+export default {
+  components: {
+    loadingButton,
+    identicon,
+  },
+  props: {
+    id: {
+      type: String,
+      required: true,
     },
-    props: {
-      id: {
-        type: String,
-        required: true,
-      },
-      title: {
-        type: String,
-        required: true,
-      },
-      titleLink: {
-        type: String,
-        required: false,
-      },
-      manageLink: {
-        type: String,
-        required: false,
-      },
-      logoUrl: {
-        type: String,
-        required: false,
-        default: null,
-      },
-      disabled: {
-        type: Boolean,
-        required: false,
-        default: false,
-      },
-      status: {
-        type: String,
-        required: false,
-      },
-      statusReason: {
-        type: String,
-        required: false,
-      },
-      requestStatus: {
-        type: String,
-        required: false,
-      },
-      requestReason: {
-        type: String,
-        required: false,
-      },
-      installApplicationRequestParams: {
-        type: Object,
-        required: false,
-        default: () => ({}),
-      },
+    title: {
+      type: String,
+      required: true,
     },
-    computed: {
-      isUnknownStatus() {
-        return !this.isKnownStatus && this.status !== null;
-      },
-      isKnownStatus() {
-        return Object.values(APPLICATION_STATUS).includes(this.status);
-      },
-      isInstalled() {
-        return (
-          this.status === APPLICATION_STATUS.INSTALLED || this.status === APPLICATION_STATUS.UPDATED
-        );
-      },
-      hasLogo() {
-        return !!this.logoUrl;
-      },
-      identiconId() {
-        // generate a deterministic integer id for the identicon background
-        return this.id.charCodeAt(0);
-      },
-      rowJsClass() {
-        return `js-cluster-application-row-${this.id}`;
-      },
-      installButtonLoading() {
-        return !this.status ||
-          this.status === APPLICATION_STATUS.SCHEDULED ||
-          this.status === APPLICATION_STATUS.INSTALLING ||
-          this.requestStatus === REQUEST_LOADING;
-      },
-      installButtonDisabled() {
-        // Avoid the potential for the real-time data to say APPLICATION_STATUS.INSTALLABLE but
-        // we already made a request to install and are just waiting for the real-time
-        // to sync up.
-        return ((this.status !== APPLICATION_STATUS.INSTALLABLE
-          && this.status !== APPLICATION_STATUS.ERROR) ||
+    titleLink: {
+      type: String,
+      required: false,
+    },
+    manageLink: {
+      type: String,
+      required: false,
+    },
+    logoUrl: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    status: {
+      type: String,
+      required: false,
+    },
+    statusReason: {
+      type: String,
+      required: false,
+    },
+    requestStatus: {
+      type: String,
+      required: false,
+    },
+    requestReason: {
+      type: String,
+      required: false,
+    },
+    installApplicationRequestParams: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+  },
+  computed: {
+    isUnknownStatus() {
+      return !this.isKnownStatus && this.status !== null;
+    },
+    isKnownStatus() {
+      return Object.values(APPLICATION_STATUS).includes(this.status);
+    },
+    isInstalled() {
+      return (
+        this.status === APPLICATION_STATUS.INSTALLED ||
+        this.status === APPLICATION_STATUS.UPDATED ||
+        this.status === APPLICATION_STATUS.UPDATING
+      );
+    },
+    hasLogo() {
+      return !!this.logoUrl;
+    },
+    identiconId() {
+      // generate a deterministic integer id for the identicon background
+      return this.id.charCodeAt(0);
+    },
+    rowJsClass() {
+      return `js-cluster-application-row-${this.id}`;
+    },
+    installButtonLoading() {
+      return (
+        !this.status ||
+        this.status === APPLICATION_STATUS.SCHEDULED ||
+        this.status === APPLICATION_STATUS.INSTALLING ||
+        this.requestStatus === REQUEST_LOADING
+      );
+    },
+    installButtonDisabled() {
+      // Avoid the potential for the real-time data to say APPLICATION_STATUS.INSTALLABLE but
+      // we already made a request to install and are just waiting for the real-time
+      // to sync up.
+      return (
+        ((this.status !== APPLICATION_STATUS.INSTALLABLE &&
+          this.status !== APPLICATION_STATUS.ERROR) ||
           this.requestStatus === REQUEST_LOADING ||
-          this.requestStatus === REQUEST_SUCCESS) && this.isKnownStatus;
-      },
-      installButtonLabel() {
-        let label;
-        if (
-          this.status === APPLICATION_STATUS.NOT_INSTALLABLE ||
-          this.status === APPLICATION_STATUS.INSTALLABLE ||
-          this.status === APPLICATION_STATUS.ERROR ||
-          this.isUnknownStatus
-        ) {
-          label = s__('ClusterIntegration|Install');
-        } else if (this.status === APPLICATION_STATUS.SCHEDULED ||
-          this.status === APPLICATION_STATUS.INSTALLING) {
-          label = s__('ClusterIntegration|Installing');
-        } else if (this.status === APPLICATION_STATUS.INSTALLED ||
-          this.status === APPLICATION_STATUS.UPDATED) {
-          label = s__('ClusterIntegration|Installed');
-        }
+          this.requestStatus === REQUEST_SUCCESS) &&
+        this.isKnownStatus
+      );
+    },
+    installButtonLabel() {
+      let label;
+      if (
+        this.status === APPLICATION_STATUS.NOT_INSTALLABLE ||
+        this.status === APPLICATION_STATUS.INSTALLABLE ||
+        this.status === APPLICATION_STATUS.ERROR ||
+        this.isUnknownStatus
+      ) {
+        label = s__('ClusterIntegration|Install');
+      } else if (
+        this.status === APPLICATION_STATUS.SCHEDULED ||
+        this.status === APPLICATION_STATUS.INSTALLING
+      ) {
+        label = s__('ClusterIntegration|Installing');
+      } else if (
+        this.status === APPLICATION_STATUS.INSTALLED ||
+        this.status === APPLICATION_STATUS.UPDATED ||
+        this.status === APPLICATION_STATUS.UPDATING
+      ) {
+        label = s__('ClusterIntegration|Installed');
+      }
 
-        return label;
-      },
-      showManageButton() {
-        return this.manageLink && this.status === APPLICATION_STATUS.INSTALLED;
-      },
-      manageButtonLabel() {
-        return s__('ClusterIntegration|Manage');
-      },
-      hasError() {
-        return this.status === APPLICATION_STATUS.ERROR ||
-        this.requestStatus === REQUEST_FAILURE;
-      },
-      generalErrorDescription() {
-        return sprintf(
-          s__('ClusterIntegration|Something went wrong while installing %{title}'), {
-            title: this.title,
-          },
-        );
-      },
+      return label;
+    },
+    showManageButton() {
+      return this.manageLink && this.status === APPLICATION_STATUS.INSTALLED;
+    },
+    manageButtonLabel() {
+      return s__('ClusterIntegration|Manage');
+    },
+    hasError() {
+      return this.status === APPLICATION_STATUS.ERROR || this.requestStatus === REQUEST_FAILURE;
+    },
+    generalErrorDescription() {
+      return sprintf(s__('ClusterIntegration|Something went wrong while installing %{title}'), {
+        title: this.title,
+      });
     },
-    methods: {
-      installClicked() {
-        eventHub.$emit('installApplication', {
-          id: this.id,
-          params: this.installApplicationRequestParams,
-        });
-      },
+  },
+  methods: {
+    installClicked() {
+      eventHub.$emit('installApplication', {
+        id: this.id,
+        params: this.installApplicationRequestParams,
+      });
     },
-  };
+  },
+};
 </script>
 
 <template>
diff --git a/app/assets/javascripts/clusters/constants.js b/app/assets/javascripts/clusters/constants.js
index 72fc9355d82..24a49624583 100644
--- a/app/assets/javascripts/clusters/constants.js
+++ b/app/assets/javascripts/clusters/constants.js
@@ -6,6 +6,7 @@ export const APPLICATION_STATUS = {
   INSTALLING: 'installing',
   INSTALLED: 'installed',
   UPDATED: 'updated',
+  UPDATING: 'updating',
   ERROR: 'errored',
 };
 
-- 
cgit v1.2.1


From 105a8c177f7c2bfdd670180fe57d424d2c2de152 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9my=20Coutable?= <remy@rymai.me>
Date: Thu, 18 Oct 2018 10:00:42 +0200
Subject: [QA] Fix the 'clone using deploy key' tests
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Rémy Coutable <remy@rymai.me>
---
 app/assets/javascripts/jobs/components/job_app.vue             | 6 +++---
 app/assets/javascripts/jobs/components/job_log.vue             | 2 +-
 app/assets/javascripts/vue_shared/components/ci_badge_link.vue | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/jobs/components/job_app.vue b/app/assets/javascripts/jobs/components/job_app.vue
index fa35b87ef2b..ba14aaeed2c 100644
--- a/app/assets/javascripts/jobs/components/job_app.vue
+++ b/app/assets/javascripts/jobs/components/job_app.vue
@@ -165,7 +165,7 @@
     <gl-loading-icon
       v-if="isLoading"
       :size="2"
-      class="js-job-loading prepend-top-20"
+      class="js-job-loading qa-loading-animation prepend-top-20"
     />
 
     <template v-else-if="shouldRenderContent">
@@ -217,8 +217,8 @@
         />
 
         <!--job log -->
-        <div 
-          v-if="hasTrace" 
+        <div
+          v-if="hasTrace"
           class="build-trace-container prepend-top-default">
           <log-top-bar
             :class="{
diff --git a/app/assets/javascripts/jobs/components/job_log.vue b/app/assets/javascripts/jobs/components/job_log.vue
index accda5d1bd8..ffa6ada3e28 100644
--- a/app/assets/javascripts/jobs/components/job_log.vue
+++ b/app/assets/javascripts/jobs/components/job_log.vue
@@ -42,7 +42,7 @@
   };
 </script>
 <template>
-  <pre class="js-build-trace build-trace">
+  <pre class="js-build-trace build-trace qa-build-trace">
     <code
       class="bash"
       v-html="trace"
diff --git a/app/assets/javascripts/vue_shared/components/ci_badge_link.vue b/app/assets/javascripts/vue_shared/components/ci_badge_link.vue
index a2518e2a611..c60052fec50 100644
--- a/app/assets/javascripts/vue_shared/components/ci_badge_link.vue
+++ b/app/assets/javascripts/vue_shared/components/ci_badge_link.vue
@@ -43,7 +43,7 @@ export default {
   computed: {
     cssClass() {
       const className = this.status.group;
-      return className ? `ci-status ci-${className}` : 'ci-status';
+      return className ? `ci-status ci-${className} qa-status-badge` : 'ci-status qa-status-badge';
     },
   },
 };
-- 
cgit v1.2.1


From c9c1f2c68bbd383c3a1d52c35a07e16229b5a0a0 Mon Sep 17 00:00:00 2001
From: Winnie Hellmann <winnie@gitlab.com>
Date: Thu, 18 Oct 2018 16:00:41 +0200
Subject: Make app/assets/javascripts/jobs/components/job_app.vue prettier

---
 app/assets/javascripts/jobs/components/job_app.vue | 290 ++++++++++-----------
 1 file changed, 145 insertions(+), 145 deletions(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/jobs/components/job_app.vue b/app/assets/javascripts/jobs/components/job_app.vue
index fa35b87ef2b..c6bbc515fde 100644
--- a/app/assets/javascripts/jobs/components/job_app.vue
+++ b/app/assets/javascripts/jobs/components/job_app.vue
@@ -1,164 +1,164 @@
 <script>
-  import _ from 'underscore';
-  import { mapGetters, mapState, mapActions } from 'vuex';
-  import { isScrolledToBottom } from '~/lib/utils/scroll_utils';
-  import bp from '~/breakpoints';
-  import CiHeader from '~/vue_shared/components/header_ci_component.vue';
-  import Callout from '~/vue_shared/components/callout.vue';
-  import createStore from '../store';
-  import EmptyState from './empty_state.vue';
-  import EnvironmentsBlock from './environments_block.vue';
-  import ErasedBlock from './erased_block.vue';
-  import Log from './job_log.vue';
-  import LogTopBar from './job_log_controllers.vue';
-  import StuckBlock from './stuck_block.vue';
-  import Sidebar from './sidebar.vue';
+import _ from 'underscore';
+import { mapGetters, mapState, mapActions } from 'vuex';
+import { isScrolledToBottom } from '~/lib/utils/scroll_utils';
+import bp from '~/breakpoints';
+import CiHeader from '~/vue_shared/components/header_ci_component.vue';
+import Callout from '~/vue_shared/components/callout.vue';
+import createStore from '../store';
+import EmptyState from './empty_state.vue';
+import EnvironmentsBlock from './environments_block.vue';
+import ErasedBlock from './erased_block.vue';
+import Log from './job_log.vue';
+import LogTopBar from './job_log_controllers.vue';
+import StuckBlock from './stuck_block.vue';
+import Sidebar from './sidebar.vue';
 
-  export default {
-    name: 'JobPageApp',
-    store: createStore(),
-    components: {
-      CiHeader,
-      Callout,
-      EmptyState,
-      EnvironmentsBlock,
-      ErasedBlock,
-      Log,
-      LogTopBar,
-      StuckBlock,
-      Sidebar,
+export default {
+  name: 'JobPageApp',
+  store: createStore(),
+  components: {
+    CiHeader,
+    Callout,
+    EmptyState,
+    EnvironmentsBlock,
+    ErasedBlock,
+    Log,
+    LogTopBar,
+    StuckBlock,
+    Sidebar,
+  },
+  props: {
+    runnerSettingsUrl: {
+      type: String,
+      required: false,
+      default: null,
     },
-    props: {
-      runnerSettingsUrl: {
-        type: String,
-        required: false,
-        default: null,
-      },
-      runnerHelpUrl: {
-        type: String,
-        required: false,
-        default: null,
-      },
-      endpoint: {
-        type: String,
-        required: true,
-      },
-      terminalPath: {
-        type: String,
-        required: false,
-        default: null,
-      },
-      pagePath: {
-        type: String,
-        required: true,
-      },
-      logState: {
-        type: String,
-        required: true,
-      },
+    runnerHelpUrl: {
+      type: String,
+      required: false,
+      default: null,
     },
-    computed: {
-      ...mapState([
-        'isLoading',
-        'job',
-        'isSidebarOpen',
-        'trace',
-        'isTraceComplete',
-        'traceSize',
-        'isTraceSizeVisible',
-        'isScrollBottomDisabled',
-        'isScrollTopDisabled',
-        'isScrolledToBottomBeforeReceivingTrace',
-        'hasError',
-      ]),
-      ...mapGetters([
-        'headerActions',
-        'headerTime',
-        'shouldRenderCalloutMessage',
-        'shouldRenderTriggeredLabel',
-        'hasEnvironment',
-        'isJobStuck',
-        'hasTrace',
-        'emptyStateIllustration',
-        'isScrollingDown',
-        'emptyStateAction',
-      ]),
+    endpoint: {
+      type: String,
+      required: true,
+    },
+    terminalPath: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    pagePath: {
+      type: String,
+      required: true,
+    },
+    logState: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    ...mapState([
+      'isLoading',
+      'job',
+      'isSidebarOpen',
+      'trace',
+      'isTraceComplete',
+      'traceSize',
+      'isTraceSizeVisible',
+      'isScrollBottomDisabled',
+      'isScrollTopDisabled',
+      'isScrolledToBottomBeforeReceivingTrace',
+      'hasError',
+    ]),
+    ...mapGetters([
+      'headerActions',
+      'headerTime',
+      'shouldRenderCalloutMessage',
+      'shouldRenderTriggeredLabel',
+      'hasEnvironment',
+      'isJobStuck',
+      'hasTrace',
+      'emptyStateIllustration',
+      'isScrollingDown',
+      'emptyStateAction',
+    ]),
 
-      shouldRenderContent() {
-        return !this.isLoading && !this.hasError;
-      }
+    shouldRenderContent() {
+      return !this.isLoading && !this.hasError;
     },
-    watch: {
-      // Once the job log is loaded,
-      // fetch the stages for the dropdown on the sidebar
-      job(newVal, oldVal) {
-        if (_.isEmpty(oldVal) && !_.isEmpty(newVal.pipeline)) {
-          this.fetchStages();
-        }
-      },
+  },
+  watch: {
+    // Once the job log is loaded,
+    // fetch the stages for the dropdown on the sidebar
+    job(newVal, oldVal) {
+      if (_.isEmpty(oldVal) && !_.isEmpty(newVal.pipeline)) {
+        this.fetchStages();
+      }
     },
-    created() {
-      this.throttled = _.throttle(this.toggleScrollButtons, 100);
+  },
+  created() {
+    this.throttled = _.throttle(this.toggleScrollButtons, 100);
 
-      this.setJobEndpoint(this.endpoint);
-      this.setTraceOptions({
-        logState: this.logState,
-        pagePath: this.pagePath,
-      });
+    this.setJobEndpoint(this.endpoint);
+    this.setTraceOptions({
+      logState: this.logState,
+      pagePath: this.pagePath,
+    });
 
-      this.fetchJob();
-      this.fetchTrace();
+    this.fetchJob();
+    this.fetchTrace();
 
-      window.addEventListener('resize', this.onResize);
-      window.addEventListener('scroll', this.updateScroll);
-    },
+    window.addEventListener('resize', this.onResize);
+    window.addEventListener('scroll', this.updateScroll);
+  },
 
-    mounted() {
+  mounted() {
+    this.updateSidebar();
+  },
+
+  destroyed() {
+    window.removeEventListener('resize', this.onResize);
+    window.removeEventListener('scroll', this.updateScroll);
+  },
+
+  methods: {
+    ...mapActions([
+      'setJobEndpoint',
+      'setTraceOptions',
+      'fetchJob',
+      'fetchStages',
+      'hideSidebar',
+      'showSidebar',
+      'toggleSidebar',
+      'fetchTrace',
+      'scrollBottom',
+      'scrollTop',
+      'toggleScrollButtons',
+      'toggleScrollAnimation',
+    ]),
+    onResize() {
       this.updateSidebar();
+      this.updateScroll();
     },
-
-    destroyed() {
-      window.removeEventListener('resize', this.onResize);
-      window.removeEventListener('scroll', this.updateScroll);
+    updateSidebar() {
+      if (bp.getBreakpointSize() === 'xs') {
+        this.hideSidebar();
+      } else if (!this.isSidebarOpen) {
+        this.showSidebar();
+      }
     },
+    updateScroll() {
+      if (!isScrolledToBottom()) {
+        this.toggleScrollAnimation(false);
+      } else if (this.isScrollingDown) {
+        this.toggleScrollAnimation(true);
+      }
 
-    methods: {
-      ...mapActions([
-        'setJobEndpoint',
-        'setTraceOptions',
-        'fetchJob',
-        'fetchStages',
-        'hideSidebar',
-        'showSidebar',
-        'toggleSidebar',
-        'fetchTrace',
-        'scrollBottom',
-        'scrollTop',
-        'toggleScrollButtons',
-        'toggleScrollAnimation',
-      ]),
-      onResize() {
-        this.updateSidebar();
-        this.updateScroll();
-      },
-      updateSidebar() {
-        if (bp.getBreakpointSize() === 'xs') {
-          this.hideSidebar();
-        } else if (!this.isSidebarOpen) {
-          this.showSidebar();
-        }
-      },
-      updateScroll() {
-        if (!isScrolledToBottom()) {
-          this.toggleScrollAnimation(false);
-        } else if (this.isScrollingDown) {
-          this.toggleScrollAnimation(true);
-        }
-
-        this.throttled();
-      },
+      this.throttled();
     },
-  };
+  },
+};
 </script>
 <template>
   <div>
-- 
cgit v1.2.1


From 34480bb8501eaf1c5b71284fc9cd2bcdbf04fdea Mon Sep 17 00:00:00 2001
From: Nick Thomas <nick@gitlab.com>
Date: Wed, 26 Sep 2018 11:58:58 +0100
Subject: Backport CE to changes to support group-level file templates

When the feature is available, this setting allows admins to choose a
project as a source of custom file templates. This is in addition to
any instance-wide templates, whether custom or vendored into the GitLab
codebase.
---
 app/assets/javascripts/pages/groups/edit/index.js | 3 +++
 1 file changed, 3 insertions(+)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/pages/groups/edit/index.js b/app/assets/javascripts/pages/groups/edit/index.js
index d0bce857029..32b55575f95 100644
--- a/app/assets/javascripts/pages/groups/edit/index.js
+++ b/app/assets/javascripts/pages/groups/edit/index.js
@@ -5,6 +5,7 @@ import initSettingsPanels from '~/settings_panels';
 import dirtySubmitFactory from '~/dirty_submit/dirty_submit_factory';
 import mountBadgeSettings from '~/pages/shared/mount_badge_settings';
 import { GROUP_BADGE } from '~/badges/constants';
+import projectSelect from '~/project_select';
 
 document.addEventListener('DOMContentLoaded', () => {
   groupAvatar();
@@ -15,4 +16,6 @@ document.addEventListener('DOMContentLoaded', () => {
     document.querySelectorAll('.js-general-settings-form, .js-general-permissions-form'),
   );
   mountBadgeSettings(GROUP_BADGE);
+
+  projectSelect();
 });
-- 
cgit v1.2.1


From 369bb6fb144d5ff6dca24e7e14ea795deea9bb86 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Fri, 19 Oct 2018 10:37:42 +0100
Subject: Fixed merge request fill tree not respecting fluid width

This fixes a bug where the merge request fill tree
would not respect the users fluid width preference.

Closes https://gitlab.com/gitlab-org/gitlab-ce/issues/52916
---
 app/assets/javascripts/merge_request_tabs.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/merge_request_tabs.js b/app/assets/javascripts/merge_request_tabs.js
index 03f3bb42193..2950c2299ab 100644
--- a/app/assets/javascripts/merge_request_tabs.js
+++ b/app/assets/javascripts/merge_request_tabs.js
@@ -419,7 +419,7 @@ export default class MergeRequestTabs {
     if (this.diffViewType() === 'parallel' || removeLimited) {
       $wrapper.removeClass('container-limited');
     } else {
-      $wrapper.addClass('container-limited');
+      $wrapper.toggleClass('container-limited', this.fixedLayoutPref);
     }
   }
 
-- 
cgit v1.2.1


From 02719344cc0482c2ca15bfaa7388ed2be6fdf979 Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Fri, 19 Oct 2018 10:10:21 +0000
Subject: Revert "Merge branch 'winh-prettier-job-app' into 'master'"

This reverts merge request !22463
---
 app/assets/javascripts/jobs/components/job_app.vue | 290 ++++++++++-----------
 1 file changed, 145 insertions(+), 145 deletions(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/jobs/components/job_app.vue b/app/assets/javascripts/jobs/components/job_app.vue
index 355eadb512f..ba14aaeed2c 100644
--- a/app/assets/javascripts/jobs/components/job_app.vue
+++ b/app/assets/javascripts/jobs/components/job_app.vue
@@ -1,164 +1,164 @@
 <script>
-import _ from 'underscore';
-import { mapGetters, mapState, mapActions } from 'vuex';
-import { isScrolledToBottom } from '~/lib/utils/scroll_utils';
-import bp from '~/breakpoints';
-import CiHeader from '~/vue_shared/components/header_ci_component.vue';
-import Callout from '~/vue_shared/components/callout.vue';
-import createStore from '../store';
-import EmptyState from './empty_state.vue';
-import EnvironmentsBlock from './environments_block.vue';
-import ErasedBlock from './erased_block.vue';
-import Log from './job_log.vue';
-import LogTopBar from './job_log_controllers.vue';
-import StuckBlock from './stuck_block.vue';
-import Sidebar from './sidebar.vue';
+  import _ from 'underscore';
+  import { mapGetters, mapState, mapActions } from 'vuex';
+  import { isScrolledToBottom } from '~/lib/utils/scroll_utils';
+  import bp from '~/breakpoints';
+  import CiHeader from '~/vue_shared/components/header_ci_component.vue';
+  import Callout from '~/vue_shared/components/callout.vue';
+  import createStore from '../store';
+  import EmptyState from './empty_state.vue';
+  import EnvironmentsBlock from './environments_block.vue';
+  import ErasedBlock from './erased_block.vue';
+  import Log from './job_log.vue';
+  import LogTopBar from './job_log_controllers.vue';
+  import StuckBlock from './stuck_block.vue';
+  import Sidebar from './sidebar.vue';
 
-export default {
-  name: 'JobPageApp',
-  store: createStore(),
-  components: {
-    CiHeader,
-    Callout,
-    EmptyState,
-    EnvironmentsBlock,
-    ErasedBlock,
-    Log,
-    LogTopBar,
-    StuckBlock,
-    Sidebar,
-  },
-  props: {
-    runnerSettingsUrl: {
-      type: String,
-      required: false,
-      default: null,
+  export default {
+    name: 'JobPageApp',
+    store: createStore(),
+    components: {
+      CiHeader,
+      Callout,
+      EmptyState,
+      EnvironmentsBlock,
+      ErasedBlock,
+      Log,
+      LogTopBar,
+      StuckBlock,
+      Sidebar,
     },
-    runnerHelpUrl: {
-      type: String,
-      required: false,
-      default: null,
+    props: {
+      runnerSettingsUrl: {
+        type: String,
+        required: false,
+        default: null,
+      },
+      runnerHelpUrl: {
+        type: String,
+        required: false,
+        default: null,
+      },
+      endpoint: {
+        type: String,
+        required: true,
+      },
+      terminalPath: {
+        type: String,
+        required: false,
+        default: null,
+      },
+      pagePath: {
+        type: String,
+        required: true,
+      },
+      logState: {
+        type: String,
+        required: true,
+      },
     },
-    endpoint: {
-      type: String,
-      required: true,
-    },
-    terminalPath: {
-      type: String,
-      required: false,
-      default: null,
-    },
-    pagePath: {
-      type: String,
-      required: true,
-    },
-    logState: {
-      type: String,
-      required: true,
-    },
-  },
-  computed: {
-    ...mapState([
-      'isLoading',
-      'job',
-      'isSidebarOpen',
-      'trace',
-      'isTraceComplete',
-      'traceSize',
-      'isTraceSizeVisible',
-      'isScrollBottomDisabled',
-      'isScrollTopDisabled',
-      'isScrolledToBottomBeforeReceivingTrace',
-      'hasError',
-    ]),
-    ...mapGetters([
-      'headerActions',
-      'headerTime',
-      'shouldRenderCalloutMessage',
-      'shouldRenderTriggeredLabel',
-      'hasEnvironment',
-      'isJobStuck',
-      'hasTrace',
-      'emptyStateIllustration',
-      'isScrollingDown',
-      'emptyStateAction',
-    ]),
+    computed: {
+      ...mapState([
+        'isLoading',
+        'job',
+        'isSidebarOpen',
+        'trace',
+        'isTraceComplete',
+        'traceSize',
+        'isTraceSizeVisible',
+        'isScrollBottomDisabled',
+        'isScrollTopDisabled',
+        'isScrolledToBottomBeforeReceivingTrace',
+        'hasError',
+      ]),
+      ...mapGetters([
+        'headerActions',
+        'headerTime',
+        'shouldRenderCalloutMessage',
+        'shouldRenderTriggeredLabel',
+        'hasEnvironment',
+        'isJobStuck',
+        'hasTrace',
+        'emptyStateIllustration',
+        'isScrollingDown',
+        'emptyStateAction',
+      ]),
 
-    shouldRenderContent() {
-      return !this.isLoading && !this.hasError;
-    },
-  },
-  watch: {
-    // Once the job log is loaded,
-    // fetch the stages for the dropdown on the sidebar
-    job(newVal, oldVal) {
-      if (_.isEmpty(oldVal) && !_.isEmpty(newVal.pipeline)) {
-        this.fetchStages();
+      shouldRenderContent() {
+        return !this.isLoading && !this.hasError;
       }
     },
-  },
-  created() {
-    this.throttled = _.throttle(this.toggleScrollButtons, 100);
-
-    this.setJobEndpoint(this.endpoint);
-    this.setTraceOptions({
-      logState: this.logState,
-      pagePath: this.pagePath,
-    });
-
-    this.fetchJob();
-    this.fetchTrace();
+    watch: {
+      // Once the job log is loaded,
+      // fetch the stages for the dropdown on the sidebar
+      job(newVal, oldVal) {
+        if (_.isEmpty(oldVal) && !_.isEmpty(newVal.pipeline)) {
+          this.fetchStages();
+        }
+      },
+    },
+    created() {
+      this.throttled = _.throttle(this.toggleScrollButtons, 100);
 
-    window.addEventListener('resize', this.onResize);
-    window.addEventListener('scroll', this.updateScroll);
-  },
+      this.setJobEndpoint(this.endpoint);
+      this.setTraceOptions({
+        logState: this.logState,
+        pagePath: this.pagePath,
+      });
 
-  mounted() {
-    this.updateSidebar();
-  },
+      this.fetchJob();
+      this.fetchTrace();
 
-  destroyed() {
-    window.removeEventListener('resize', this.onResize);
-    window.removeEventListener('scroll', this.updateScroll);
-  },
+      window.addEventListener('resize', this.onResize);
+      window.addEventListener('scroll', this.updateScroll);
+    },
 
-  methods: {
-    ...mapActions([
-      'setJobEndpoint',
-      'setTraceOptions',
-      'fetchJob',
-      'fetchStages',
-      'hideSidebar',
-      'showSidebar',
-      'toggleSidebar',
-      'fetchTrace',
-      'scrollBottom',
-      'scrollTop',
-      'toggleScrollButtons',
-      'toggleScrollAnimation',
-    ]),
-    onResize() {
+    mounted() {
       this.updateSidebar();
-      this.updateScroll();
     },
-    updateSidebar() {
-      if (bp.getBreakpointSize() === 'xs') {
-        this.hideSidebar();
-      } else if (!this.isSidebarOpen) {
-        this.showSidebar();
-      }
+
+    destroyed() {
+      window.removeEventListener('resize', this.onResize);
+      window.removeEventListener('scroll', this.updateScroll);
     },
-    updateScroll() {
-      if (!isScrolledToBottom()) {
-        this.toggleScrollAnimation(false);
-      } else if (this.isScrollingDown) {
-        this.toggleScrollAnimation(true);
-      }
 
-      this.throttled();
+    methods: {
+      ...mapActions([
+        'setJobEndpoint',
+        'setTraceOptions',
+        'fetchJob',
+        'fetchStages',
+        'hideSidebar',
+        'showSidebar',
+        'toggleSidebar',
+        'fetchTrace',
+        'scrollBottom',
+        'scrollTop',
+        'toggleScrollButtons',
+        'toggleScrollAnimation',
+      ]),
+      onResize() {
+        this.updateSidebar();
+        this.updateScroll();
+      },
+      updateSidebar() {
+        if (bp.getBreakpointSize() === 'xs') {
+          this.hideSidebar();
+        } else if (!this.isSidebarOpen) {
+          this.showSidebar();
+        }
+      },
+      updateScroll() {
+        if (!isScrolledToBottom()) {
+          this.toggleScrollAnimation(false);
+        } else if (this.isScrollingDown) {
+          this.toggleScrollAnimation(true);
+        }
+
+        this.throttled();
+      },
     },
-  },
-};
+  };
 </script>
 <template>
   <div>
-- 
cgit v1.2.1


From 1af6ddffed5028b9e1f63e2d5760982a7b2ca473 Mon Sep 17 00:00:00 2001
From: George Tsiolis <tsiolis.g@gmail.com>
Date: Fri, 19 Oct 2018 11:35:33 +0000
Subject: Change markdown header tab anchor links to buttons

---
 .../vue_shared/components/markdown/header.vue      | 28 +++++++++++-----------
 1 file changed, 14 insertions(+), 14 deletions(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/vue_shared/components/markdown/header.vue b/app/assets/javascripts/vue_shared/components/markdown/header.vue
index 704adf7864f..3ddb39730c4 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/header.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/header.vue
@@ -1,16 +1,16 @@
 <script>
 import $ from 'jquery';
-import tooltip from '../../directives/tooltip';
-import toolbarButton from './toolbar_button.vue';
-import icon from '../icon.vue';
+import Tooltip from '../../directives/tooltip';
+import ToolbarButton from './toolbar_button.vue';
+import Icon from '../icon.vue';
 
 export default {
   directives: {
-    tooltip,
+    Tooltip,
   },
   components: {
-    toolbarButton,
-    icon,
+    ToolbarButton,
+    Icon,
   },
   props: {
     previewMarkdown: {
@@ -68,27 +68,27 @@ export default {
         :class="{ active: !previewMarkdown }"
         class="md-header-tab"
       >
-        <a
+        <button
           class="js-write-link"
-          href="#md-write-holder"
           tabindex="-1"
-          @click.prevent="writeMarkdownTab($event)"
+          type="button"
+          @click="writeMarkdownTab($event)"
         >
           Write
-        </a>
+        </button>
       </li>
       <li
         :class="{ active: previewMarkdown }"
         class="md-header-tab"
       >
-        <a
+        <button
           class="js-preview-link js-md-preview-button"
-          href="#md-preview-holder"
           tabindex="-1"
-          @click.prevent="previewMarkdownTab($event)"
+          type="button"
+          @click="previewMarkdownTab($event)"
         >
           Preview
-        </a>
+        </button>
       </li>
       <li
         :class="{ active: !previewMarkdown }"
-- 
cgit v1.2.1


From d1fb29e57318d8a20f3deb95496f4b7102de3f97 Mon Sep 17 00:00:00 2001
From: Jacques Erasmus <jerasmus@gitlab.com>
Date: Mon, 22 Oct 2018 08:28:36 +0000
Subject: Remove base64 encoding from files that contain plain text

---
 .../ide/components/new_dropdown/upload.vue         | 38 ++++++++++++++--------
 1 file changed, 25 insertions(+), 13 deletions(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/ide/components/new_dropdown/upload.vue b/app/assets/javascripts/ide/components/new_dropdown/upload.vue
index e2be805ed22..ec759043efc 100644
--- a/app/assets/javascripts/ide/components/new_dropdown/upload.vue
+++ b/app/assets/javascripts/ide/components/new_dropdown/upload.vue
@@ -25,14 +25,32 @@ export default {
     },
   },
   methods: {
-    createFile(target, file, isText) {
+    isText(content, fileType) {
+      const knownBinaryFileTypes = ['image/'];
+      const knownTextFileTypes = ['text/'];
+      const isKnownBinaryFileType = knownBinaryFileTypes.find(type => fileType.includes(type));
+      const isKnownTextFileType = knownTextFileTypes.find(type => fileType.includes(type));
+      const asciiRegex = /^[ -~\t\n\r]+$/; // tests whether a string contains ascii characters only (ranges from space to tilde, tabs and new lines)
+
+      if (isKnownBinaryFileType) {
+        return false;
+      }
+
+      if (isKnownTextFileType) {
+        return true;
+      }
+
+      // if it's not a known file type, determine the type by evaluating the file contents
+      return asciiRegex.test(content);
+    },
+    createFile(target, file) {
       const { name } = file;
       let { result } = target;
+      const encodedContent = result.split('base64,')[1];
+      const rawContent = encodedContent ? atob(encodedContent) : '';
+      const isText = this.isText(rawContent, file.type);
 
-      if (!isText) {
-        // eslint-disable-next-line prefer-destructuring
-        result = result.split('base64,')[1];
-      }
+      result = isText ? rawContent : encodedContent;
 
       this.$emit('create', {
         name: `${this.path ? `${this.path}/` : ''}${name}`,
@@ -43,15 +61,9 @@ export default {
     },
     readFile(file) {
       const reader = new FileReader();
-      const isText = file.type.match(/text.*/) !== null;
 
-      reader.addEventListener('load', e => this.createFile(e.target, file, isText), { once: true });
-
-      if (isText) {
-        reader.readAsText(file);
-      } else {
-        reader.readAsDataURL(file);
-      }
+      reader.addEventListener('load', e => this.createFile(e.target, file), { once: true });
+      reader.readAsDataURL(file);
     },
     openFile() {
       Array.from(this.$refs.fileUpload.files).forEach(file => this.readFile(file));
-- 
cgit v1.2.1


From 25170fbe7b004e368d68c3b73be9232611bda48d Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Mon, 22 Oct 2018 08:31:24 +0000
Subject: Frontend: Review app changes

---
 .../components/deployment.vue                      |  75 +++++++++--
 .../vue_merge_request_widget/mr_widget_options.vue |   7 +-
 .../components/filtered_search_dropdown.vue        | 143 +++++++++++++++++++++
 3 files changed, 208 insertions(+), 17 deletions(-)
 create mode 100644 app/assets/javascripts/vue_shared/components/filtered_search_dropdown.vue

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue b/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue
index 9161f703697..6c87287a4c4 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue
@@ -1,6 +1,7 @@
 <script>
 import Icon from '~/vue_shared/components/icon.vue';
 import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
+import FilteredSearchDropdown from '~/vue_shared/components/filtered_search_dropdown.vue';
 import timeagoMixin from '../../vue_shared/mixins/timeago';
 import tooltip from '../../vue_shared/directives/tooltip';
 import LoadingButton from '../../vue_shared/components/loading_button.vue';
@@ -18,6 +19,7 @@ export default {
     StatusIcon,
     Icon,
     TooltipOnTruncate,
+    FilteredSearchDropdown,
   },
   directives: {
     tooltip,
@@ -30,8 +32,10 @@ export default {
     },
   },
   data() {
+    const features = window.gon.features || {};
     return {
       isStopping: false,
+      enableCiEnvironmentsStatusChanges: features.ciEnvironmentsStatusChanges,
     };
   },
   computed: {
@@ -118,18 +122,65 @@ export default {
             />
           </div>
           <div>
-            <a
-              v-if="hasExternalUrls"
-              :href="deployment.external_url"
-              target="_blank"
-              rel="noopener noreferrer nofollow"
-              class="deploy-link js-deploy-url btn btn-default btn-sm inline"
-            >
-              <span>
-                View app
-                <icon name="external-link" />
-              </span>
-            </a>
+            <template v-if="hasExternalUrls">
+              <filtered-search-dropdown
+                v-if="enableCiEnvironmentsStatusChanges"
+                class="js-mr-wigdet-deployment-dropdown inline"
+                :items="deployment.changes"
+                :main-action-link="deployment.external_url"
+                filter-key="path"
+              >
+                <template
+                  slot="mainAction"
+                  slot-scope="slotProps"
+                >
+                  <a
+                    :href="deployment.external_url"
+                    target="_blank"
+                    rel="noopener noreferrer nofollow"
+                    class="deploy-link js-deploy-url inline"
+                    :class="slotProps.className"
+                  >
+                    <span>
+                      {{ __('View app') }}
+                      <icon name="external-link" />
+                    </span>
+                  </a>
+                </template>
+
+                <template
+                  slot="result"
+                  slot-scope="slotProps"
+                >
+                  <a
+                    :href="slotProps.result.external_url"
+                    target="_blank"
+                    rel="noopener noreferrer nofollow"
+                    class="menu-item"
+                  >
+                    <strong class="str-truncated-100 append-bottom-0 d-block">
+                      {{ slotProps.result.path }}
+                    </strong>
+
+                    <p class="text-secondary str-truncated-100 append-bottom-0 d-block">
+                      {{ slotProps.result.external_url }}
+                    </p>
+                  </a>
+                </template>
+              </filtered-search-dropdown>
+              <a
+                v-else
+                :href="deployment.external_url"
+                target="_blank"
+                rel="noopener noreferrer nofollow"
+                class="js-deploy-url js-deploy-url-feature-flag deploy-link btn btn-default btn-sm inline"
+              >
+                <span>
+                  {{ __('View app') }}
+                  <icon name="external-link" />
+                </span>
+              </a>
+            </template>
             <loading-button
               v-if="deployment.stop_url"
               :loading="isStopping"
diff --git a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
index a599cc002d6..8180f13a7cb 100644
--- a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
@@ -112,7 +112,8 @@ export default {
     eventHub.$on('mr.discussion.updated', this.checkStatus);
   },
   mounted() {
-    this.handleMounted();
+    this.setFaviconHelper();
+    this.initDeploymentsPolling();
   },
   beforeDestroy() {
     eventHub.$off('mr.discussion.updated', this.checkStatus);
@@ -250,10 +251,6 @@ export default {
         this.stopPolling();
       });
     },
-    handleMounted() {
-      this.setFaviconHelper();
-      this.initDeploymentsPolling();
-    },
   },
 };
 </script>
diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_dropdown.vue b/app/assets/javascripts/vue_shared/components/filtered_search_dropdown.vue
new file mode 100644
index 00000000000..460fa6ad72e
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/filtered_search_dropdown.vue
@@ -0,0 +1,143 @@
+<script>
+import $ from 'jquery';
+import Icon from '~/vue_shared/components/icon.vue';
+/**
+ * Renders a split dropdown with
+ * an input that allows to search through the given
+ * array of options.
+ */
+export default {
+  name: 'FilteredSearchDropdown',
+  components: {
+    Icon,
+  },
+  props: {
+    title: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    buttonType: {
+      required: false,
+      validator: value =>
+        ['primary', 'default', 'secondary', 'success', 'info', 'warning', 'danger'].indexOf(
+          value,
+        ) !== -1,
+      default: 'default',
+    },
+    size: {
+      required: false,
+      type: String,
+      default: 'sm',
+    },
+    items: {
+      type: Array,
+      required: true,
+    },
+    visibleItems: {
+      type: Number,
+      required: false,
+      default: 5,
+    },
+    filterKey: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      filter: '',
+    };
+  },
+  computed: {
+    className() {
+      return `btn btn-${this.buttonType} btn-${this.size}`;
+    },
+    filteredResults() {
+      if (this.filter !== '') {
+        return this.items.filter(
+          item => item[this.filterKey] && item[this.filterKey].toLowerCase().includes(this.filter.toLowerCase()),
+        );
+      }
+
+      return this.items.slice(0, this.visibleItems);
+    }
+  },
+  mounted() {
+    /**
+     * Resets the filter every time the user closes the dropdown
+     */
+    $(this.$el)
+      .on('shown.bs.dropdown', () => {
+        this.$nextTick(() => this.$refs.searchInput.focus());
+      })
+      .on('hidden.bs.dropdown', () => {
+        this.filter = '';
+      });
+  },
+};
+</script>
+<template>
+  <div class="dropdown">
+    <div class="btn-group">
+      <slot
+        name="mainAction"
+        :class-name="className"
+      >
+        <button
+          type="button"
+          :class="className"
+        >
+          {{ title }}
+        </button>
+      </slot>
+
+      <button
+        type="button"
+        :class="className"
+        class="dropdown-toggle dropdown-toggle-split"
+        data-toggle="dropdown"
+        aria-haspopup="true"
+        aria-expanded="false"
+        aria-label="Expand dropdown"
+      >
+        <icon
+          name="angle-down"
+          :size="12"
+        />
+      </button>
+      <div class="dropdown-menu dropdown-menu-right">
+        <div class="dropdown-input">
+          <input
+            ref="searchInput"
+            v-model="filter"
+            type="search"
+            placeholder="Filter"
+            class="js-filtered-dropdown-input dropdown-input-field"
+          />
+          <icon
+            class="dropdown-input-search"
+            name="search"
+          />
+        </div>
+
+        <div class="dropdown-content">
+          <ul>
+            <li
+              v-for="(result, i) in filteredResults"
+              :key="i"
+              class="js-filtered-dropdown-result"
+            >
+              <slot
+                name="result"
+                :result="result"
+              >
+                {{ result[filterKey] }}
+              </slot>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
-- 
cgit v1.2.1


From 63b2b1b426d29992b997eff536052f6073e38415 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Mon, 22 Oct 2018 10:29:46 +0100
Subject: Fixed source projects not filtering

Filtering source projects in the merge request creation form
would show a flash error because it is trying to filter remotely
to an undefined URL.

Closes https://gitlab.com/gitlab-org/gitlab-ce/issues/52728
---
 app/assets/javascripts/compare_autocomplete.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/compare_autocomplete.js b/app/assets/javascripts/compare_autocomplete.js
index 852d71f4e84..37a3ceb5341 100644
--- a/app/assets/javascripts/compare_autocomplete.js
+++ b/app/assets/javascripts/compare_autocomplete.js
@@ -40,7 +40,7 @@ export default function initCompareAutocomplete(limitTo = null, clickHandler = (
       },
       selectable: true,
       filterable: true,
-      filterRemote: true,
+      filterRemote: !!$dropdown.data('refsUrl'),
       fieldName: $dropdown.data('fieldName'),
       filterInput: 'input[type="search"]',
       renderRow: function(ref) {
-- 
cgit v1.2.1


From 60405bd373b74ca0d5ec557c35dbce95be2be639 Mon Sep 17 00:00:00 2001
From: Winnie Hellmann <winnie@gitlab.com>
Date: Mon, 22 Oct 2018 17:43:43 +0000
Subject: Extract JobContainerItem component

---
 .../jobs/components/job_container_item.vue         | 66 ++++++++++++++++++++++
 .../javascripts/jobs/components/jobs_container.vue | 53 +++--------------
 2 files changed, 73 insertions(+), 46 deletions(-)
 create mode 100644 app/assets/javascripts/jobs/components/job_container_item.vue

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/jobs/components/job_container_item.vue b/app/assets/javascripts/jobs/components/job_container_item.vue
new file mode 100644
index 00000000000..81cc0823792
--- /dev/null
+++ b/app/assets/javascripts/jobs/components/job_container_item.vue
@@ -0,0 +1,66 @@
+<script>
+import _ from 'underscore';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
+import Icon from '~/vue_shared/components/icon.vue';
+import tooltip from '~/vue_shared/directives/tooltip';
+
+export default {
+  components: {
+    CiIcon,
+    Icon,
+  },
+
+  directives: {
+    tooltip,
+  },
+
+  props: {
+    job: {
+      type: Object,
+      required: true,
+    },
+    isActive: {
+      type: Boolean,
+      required: true,
+    },
+  },
+
+  computed: {
+    tooltipText() {
+      return `${_.escape(this.job.name)} - ${this.job.status.tooltip}`;
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    class="build-job"
+    :class="{ retried: job.retried, active: isActive }"
+  >
+    <a
+      v-tooltip
+      :href="job.status.details_path"
+      :title="tooltipText"
+      data-container="body"
+      data-boundary="viewport"
+      class="js-job-link"
+    >
+      <icon
+        v-if="isActive"
+        name="arrow-right"
+        class="js-arrow-right icon-arrow-right"
+      />
+
+      <ci-icon :status="job.status" />
+
+      <span>{{ job.name ? job.name : job.id }}</span>
+
+      <icon
+        v-if="job.retried"
+        name="retry"
+        class="js-retry-icon"
+      />
+    </a>
+  </div>
+</template>
diff --git a/app/assets/javascripts/jobs/components/jobs_container.vue b/app/assets/javascripts/jobs/components/jobs_container.vue
index 03f36ec5c8b..951bcb36600 100644
--- a/app/assets/javascripts/jobs/components/jobs_container.vue
+++ b/app/assets/javascripts/jobs/components/jobs_container.vue
@@ -1,17 +1,11 @@
 <script>
-import _ from 'underscore';
-import CiIcon from '~/vue_shared/components/ci_icon.vue';
-import Icon from '~/vue_shared/components/icon.vue';
-import tooltip from '~/vue_shared/directives/tooltip';
+import JobContainerItem from './job_container_item.vue';
 
 export default {
   components: {
-    CiIcon,
-    Icon,
-  },
-  directives: {
-    tooltip,
+    JobContainerItem,
   },
+
   props: {
     jobs: {
       type: Array,
@@ -26,49 +20,16 @@ export default {
     isJobActive(currentJobId) {
       return this.jobId === currentJobId;
     },
-    tooltipText(job) {
-      return `${_.escape(job.name)} - ${job.status.tooltip}`;
-    },
   },
 };
 </script>
 <template>
   <div class="js-jobs-container builds-container">
-    <div
+    <job-container-item
       v-for="job in jobs"
       :key="job.id"
-      class="build-job"
-      :class="{ retried: job.retried, active: isJobActive(job.id) }"
-    >
-      <a
-        v-tooltip
-        :href="job.status.details_path"
-        :title="tooltipText(job)"
-        data-container="body"
-      >
-        <icon
-          v-if="isJobActive(job.id)"
-          name="arrow-right"
-          class="js-arrow-right icon-arrow-right"
-        />
-
-        <ci-icon :status="job.status" />
-
-        <span>
-          <template v-if="job.name">
-            {{ job.name }}
-          </template>
-          <template v-else>
-            {{ job.id }}
-          </template>
-        </span>
-
-        <icon
-          v-if="job.retried"
-          name="retry"
-          class="js-retry-icon"
-        />
-      </a>
-    </div>
+      :job="job"
+      :is-active="isJobActive(job.id)"
+    />
   </div>
 </template>
-- 
cgit v1.2.1