From 3d2917bf2e4799a7ba9bcb518c39605eca0a4b1d Mon Sep 17 00:00:00 2001
From: Jarka Kadlecova <jarka@gitlab.com>
Date: Thu, 31 Aug 2017 12:38:43 +0200
Subject: Add the possibility to lock issuables from the frontend

---
 app/assets/javascripts/discussion_lock.js       | 46 +++++++++++++++++++++++++
 app/assets/javascripts/init_issuable_sidebar.js |  1 +
 app/assets/javascripts/main.js                  |  1 +
 3 files changed, 48 insertions(+)
 create mode 100644 app/assets/javascripts/discussion_lock.js

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/discussion_lock.js b/app/assets/javascripts/discussion_lock.js
new file mode 100644
index 00000000000..7bf83e9b8a0
--- /dev/null
+++ b/app/assets/javascripts/discussion_lock.js
@@ -0,0 +1,46 @@
+class DiscussionLock {
+  constructor(containerElm) {
+    this.containerElm = containerElm;
+
+    const lockButton = containerElm.querySelector('.js-discussion-lock-button');
+    console.log(lockButton);
+    if (lockButton) {
+      // remove class so we don't bind twice
+      lockButton.classList.remove('js-discussion-lock-button');
+      console.log(lockButton);
+      lockButton.addEventListener('click', this.toggleDiscussionLock.bind(this));
+    }
+  }
+
+  toggleDiscussionLock(event) {
+    const button = event.currentTarget;
+    const buttonSpan = button.querySelector('span');
+    if (!buttonSpan || button.classList.contains('disabled')) {
+      return;
+    }
+    button.classList.add('disabled');
+
+    const url = this.containerElm.dataset.url;
+    const lock = this.containerElm.dataset.lock;
+    const issuableType = this.containerElm.dataset.issuableType;
+
+    const data = {}
+    data[issuableType] = {}
+    data[issuableType].discussion_locked = lock
+
+    $.ajax({
+      url,
+      data: data,
+      type: 'PUT'
+    }).done((data) => {
+      button.classList.remove('disabled');
+    });
+  }
+
+  static bindAll(selector) {
+    [].forEach.call(document.querySelectorAll(selector), elm => new DiscussionLock(elm));
+  }
+}
+
+window.gl = window.gl || {};
+window.gl.DiscussionLock = DiscussionLock;
diff --git a/app/assets/javascripts/init_issuable_sidebar.js b/app/assets/javascripts/init_issuable_sidebar.js
index 29e3d2ea94e..8857601f530 100644
--- a/app/assets/javascripts/init_issuable_sidebar.js
+++ b/app/assets/javascripts/init_issuable_sidebar.js
@@ -13,6 +13,7 @@ export default () => {
   new LabelsSelect();
   new IssuableContext(sidebarOptions.currentUser);
   gl.Subscription.bindAll('.subscription');
+  gl.DiscussionLock.bindAll('.discussion-lock');
   new gl.DueDateSelectors();
   window.sidebar = new Sidebar();
 };
diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js
index 0bc31a56684..ea1d50de965 100644
--- a/app/assets/javascripts/main.js
+++ b/app/assets/javascripts/main.js
@@ -80,6 +80,7 @@ import './copy_as_gfm';
 import './copy_to_clipboard';
 import './create_label';
 import './diff';
+import './discussion_lock';
 import './dropzone_input';
 import './due_date_select';
 import './files_comment_button';
-- 
cgit v1.2.3


From a319418d9c050097a797fbf4f890cebd5256ed43 Mon Sep 17 00:00:00 2001
From: "Luke \"Jared\" Bennett" <lbennett@gitlab.com>
Date: Thu, 14 Sep 2017 12:01:07 +0100
Subject: Merge FE

---
 .../notes/components/issue_comment_form.vue        |  27 ++++--
 .../notes/components/issue_note_form.vue           |  20 ++--
 .../javascripts/notes/mixins/issuable_state.js     |  15 +++
 .../confidential/confidential_issue_sidebar.vue    |  14 +--
 .../sidebar/components/confidential/edit_form.vue  |   9 +-
 .../components/confidential/edit_form_buttons.vue  |   6 +-
 .../sidebar/components/lock/edit_form.vue          |  62 ++++++++++++
 .../sidebar/components/lock/edit_form_buttons.vue  |  50 ++++++++++
 .../sidebar/components/lock/lock_issue_sidebar.vue | 108 +++++++++++++++++++++
 app/assets/javascripts/sidebar/sidebar_bundle.js   |  70 +++++++++----
 .../javascripts/sidebar/stores/sidebar_store.js    |   1 +
 .../issue/confidential_issue_warning.vue           |  16 ---
 .../vue_shared/components/issue/issue_warning.vue  |  53 ++++++++++
 .../javascripts/vue_shared/mixins/issuable.js      |   7 ++
 14 files changed, 394 insertions(+), 64 deletions(-)
 create mode 100644 app/assets/javascripts/notes/mixins/issuable_state.js
 create mode 100644 app/assets/javascripts/sidebar/components/lock/edit_form.vue
 create mode 100644 app/assets/javascripts/sidebar/components/lock/edit_form_buttons.vue
 create mode 100644 app/assets/javascripts/sidebar/components/lock/lock_issue_sidebar.vue
 delete mode 100644 app/assets/javascripts/vue_shared/components/issue/confidential_issue_warning.vue
 create mode 100644 app/assets/javascripts/vue_shared/components/issue/issue_warning.vue
 create mode 100644 app/assets/javascripts/vue_shared/mixins/issuable.js

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/notes/components/issue_comment_form.vue b/app/assets/javascripts/notes/components/issue_comment_form.vue
index 16f4e22aa9b..391a1960eae 100644
--- a/app/assets/javascripts/notes/components/issue_comment_form.vue
+++ b/app/assets/javascripts/notes/components/issue_comment_form.vue
@@ -6,10 +6,11 @@
   import TaskList from '../../task_list';
   import * as constants from '../constants';
   import eventHub from '../event_hub';
-  import confidentialIssue from '../../vue_shared/components/issue/confidential_issue_warning.vue';
+  import issueWarning from '../../vue_shared/components/issue/issue_warning.vue';
   import issueNoteSignedOutWidget from './issue_note_signed_out_widget.vue';
   import markdownField from '../../vue_shared/components/markdown/field.vue';
   import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
+  import issuableStateMixin from '../mixins/issuable_state';
 
   export default {
     name: 'issueCommentForm',
@@ -25,7 +26,7 @@
       };
     },
     components: {
-      confidentialIssue,
+      issueWarning,
       issueNoteSignedOutWidget,
       markdownField,
       userAvatarLink,
@@ -54,6 +55,9 @@
       isIssueOpen() {
         return this.issueState === constants.OPENED || this.issueState === constants.REOPENED;
       },
+      canCreate() {
+        return this.getIssueData.current_user.can_create_note;
+      },
       issueActionButtonTitle() {
         if (this.note.length) {
           const actionText = this.isIssueOpen ? 'close' : 'reopen';
@@ -89,9 +93,6 @@
       endpoint() {
         return this.getIssueData.create_note_path;
       },
-      isConfidentialIssue() {
-        return this.getIssueData.confidential;
-      },
     },
     methods: {
       ...mapActions([
@@ -206,6 +207,9 @@
         });
       },
     },
+    mixins: [
+      issuableStateMixin,
+    ],
     mounted() {
       // jQuery is needed here because it is a custom event being dispatched with jQuery.
       $(document).on('issuable:change', (e, isClosed) => {
@@ -239,15 +243,22 @@
           <div class="timeline-content timeline-content-form">
             <form
               ref="commentForm"
-              class="new-note js-quick-submit common-note-form gfm-form js-main-target-form">
-              <confidentialIssue v-if="isConfidentialIssue" />
+              class="new-note js-quick-submit common-note-form gfm-form js-main-target-form"
+            >
+
+              <issue-warning
+                v-if="hasIssueWarning(getIssueData)"
+                :is-locked="isIssueLocked(getIssueData)"
+                :is-confidential="isIssueConfidential(getIssueData)"
+              />
+
               <div class="error-alert"></div>
               <markdown-field
                 :markdown-preview-path="markdownPreviewPath"
                 :markdown-docs-path="markdownDocsPath"
                 :quick-actions-docs-path="quickActionsDocsPath"
                 :add-spacing-classes="false"
-                :is-confidential-issue="isConfidentialIssue">
+                :is-confidential-issue="isIssueConfidential(getIssueData)">
                 <textarea
                   id="note-body"
                   name="note[note]"
diff --git a/app/assets/javascripts/notes/components/issue_note_form.vue b/app/assets/javascripts/notes/components/issue_note_form.vue
index 626c0f2ce18..f78289e68aa 100644
--- a/app/assets/javascripts/notes/components/issue_note_form.vue
+++ b/app/assets/javascripts/notes/components/issue_note_form.vue
@@ -1,8 +1,9 @@
 <script>
   import { mapGetters } from 'vuex';
   import eventHub from '../event_hub';
-  import confidentialIssue from '../../vue_shared/components/issue/confidential_issue_warning.vue';
+  import issueWarning from '../../vue_shared/components/issue/issue_warning.vue';
   import markdownField from '../../vue_shared/components/markdown/field.vue';
+  import issuableStateMixin from '../mixins/issuable_state';
 
   export default {
     name: 'issueNoteForm',
@@ -39,12 +40,13 @@
       };
     },
     components: {
-      confidentialIssue,
+      issueWarning,
       markdownField,
     },
     computed: {
       ...mapGetters([
         'getDiscussionLastNote',
+        'getIssueData',
         'getIssueDataByProp',
         'getNotesDataByProp',
         'getUserDataByProp',
@@ -67,9 +69,6 @@
       isDisabled() {
         return !this.note.length || this.isSubmitting;
       },
-      isConfidentialIssue() {
-        return this.getIssueDataByProp('confidential');
-      },
     },
     methods: {
       handleUpdate() {
@@ -95,6 +94,9 @@
         this.$emit('cancelFormEdition', shouldConfirm, this.noteBody !== this.note);
       },
     },
+    mixins: [
+      issuableStateMixin,
+    ],
     mounted() {
       this.$refs.textarea.focus();
     },
@@ -125,7 +127,13 @@
     <div class="flash-container timeline-content"></div>
     <form
       class="edit-note common-note-form js-quick-submit gfm-form">
-      <confidentialIssue v-if="isConfidentialIssue" />
+
+      <issue-warning
+        v-if="hasIssueWarning(getIssueData)"
+        :is-locked="isIssueLocked(getIssueData)"
+        :is-confidential="isIssueConfidential(getIssueData)"
+      />
+
       <markdown-field
         :markdown-preview-path="markdownPreviewPath"
         :markdown-docs-path="markdownDocsPath"
diff --git a/app/assets/javascripts/notes/mixins/issuable_state.js b/app/assets/javascripts/notes/mixins/issuable_state.js
new file mode 100644
index 00000000000..a0b3d81d63b
--- /dev/null
+++ b/app/assets/javascripts/notes/mixins/issuable_state.js
@@ -0,0 +1,15 @@
+export default {
+  methods: {
+    isIssueConfidential(issue) {
+      return !!issue.confidential;
+    },
+
+    isIssueLocked(issue) {
+      return !!issue.discussion_locked;
+    },
+
+    hasIssueWarning(issue) {
+      return this.isIssueConfidential(issue) || this.isIssueLocked(issue);
+    },
+  },
+};
diff --git a/app/assets/javascripts/sidebar/components/confidential/confidential_issue_sidebar.vue b/app/assets/javascripts/sidebar/components/confidential/confidential_issue_sidebar.vue
index 8e7abdbffef..dfdd00cff47 100644
--- a/app/assets/javascripts/sidebar/components/confidential/confidential_issue_sidebar.vue
+++ b/app/assets/javascripts/sidebar/components/confidential/confidential_issue_sidebar.vue
@@ -47,9 +47,9 @@ export default {
 </script>
 
 <template>
-  <div class="block confidentiality">
+  <div class="block issuable-sidebar-item confidentiality">
     <div class="sidebar-collapsed-icon">
-      <i class="fa" :class="faEye" aria-hidden="true" data-hidden="true"></i>
+      <i class="fa" :class="faEye" aria-hidden="true"></i>
     </div>
     <div class="title hide-collapsed">
       Confidentiality
@@ -62,19 +62,19 @@ export default {
         Edit
       </a>
     </div>
-    <div class="value confidential-value hide-collapsed">
+    <div class="value sidebar-item-value hide-collapsed">
       <editForm
         v-if="edit"
         :toggle-form="toggleForm"
         :is-confidential="isConfidential"
         :update-confidential-attribute="updateConfidentialAttribute"
       />
-      <div v-if="!isConfidential" class="no-value confidential-value">
-        <i class="fa fa-eye is-not-confidential"></i>
+      <div v-if="!isConfidential" class="no-value sidebar-item-value">
+        <i class="fa fa-eye not-active"></i>
         Not confidential
       </div>
-      <div v-else class="value confidential-value hide-collapsed">
-        <i aria-hidden="true" data-hidden="true" class="fa fa-eye-slash is-confidential"></i>
+      <div v-else class="value sidebar-item-value hide-collapsed">
+        <i aria-hidden="true" class="fa fa-eye-slash is-active"></i>
         This issue is confidential
       </div>
     </div>
diff --git a/app/assets/javascripts/sidebar/components/confidential/edit_form.vue b/app/assets/javascripts/sidebar/components/confidential/edit_form.vue
index d578b663a54..dd17b5abd46 100644
--- a/app/assets/javascripts/sidebar/components/confidential/edit_form.vue
+++ b/app/assets/javascripts/sidebar/components/confidential/edit_form.vue
@@ -2,9 +2,6 @@
 import editFormButtons from './edit_form_buttons.vue';
 
 export default {
-  components: {
-    editFormButtons,
-  },
   props: {
     isConfidential: {
       required: true,
@@ -19,12 +16,16 @@ export default {
       type: Function,
     },
   },
+
+  components: {
+    editFormButtons,
+  },
 };
 </script>
 
 <template>
   <div class="dropdown open">
-    <div class="dropdown-menu confidential-warning-message">
+    <div class="dropdown-menu sidebar-item-warning-message">
       <div>
         <p v-if="!isConfidential">
           You are going to turn on the confidentiality. This means that only team members with
diff --git a/app/assets/javascripts/sidebar/components/confidential/edit_form_buttons.vue b/app/assets/javascripts/sidebar/components/confidential/edit_form_buttons.vue
index 97af4a3f505..143f8ae7bc1 100644
--- a/app/assets/javascripts/sidebar/components/confidential/edit_form_buttons.vue
+++ b/app/assets/javascripts/sidebar/components/confidential/edit_form_buttons.vue
@@ -15,7 +15,7 @@ export default {
     },
   },
   computed: {
-    onOrOff() {
+    buttonText() {
       return this.isConfidential ? 'Turn Off' : 'Turn On';
     },
     updateConfidentialBool() {
@@ -26,7 +26,7 @@ export default {
 </script>
 
 <template>
-  <div class="confidential-warning-message-actions">
+  <div class="sidebar-item-warning-message-actions">
     <button
       type="button"
       class="btn btn-default append-right-10"
@@ -39,7 +39,7 @@ export default {
       class="btn btn-close"
       @click.prevent="updateConfidentialAttribute(updateConfidentialBool)"
     >
-      {{ onOrOff }}
+      {{ buttonText }}
     </button>
   </div>
 </template>
diff --git a/app/assets/javascripts/sidebar/components/lock/edit_form.vue b/app/assets/javascripts/sidebar/components/lock/edit_form.vue
new file mode 100644
index 00000000000..616abec4d5e
--- /dev/null
+++ b/app/assets/javascripts/sidebar/components/lock/edit_form.vue
@@ -0,0 +1,62 @@
+<script>
+import editFormButtons from './edit_form_buttons.vue';
+import issuableMixin from '../../../vue_shared/mixins/issuable';
+
+export default {
+  props: {
+    isLocked: {
+      required: true,
+      type: Boolean,
+    },
+
+    toggleForm: {
+      required: true,
+      type: Function,
+    },
+
+    updateLockedAttribute: {
+      required: true,
+      type: Function,
+    },
+
+    issuableType: {
+      required: true,
+      type: String,
+    },
+  },
+
+  mixins: [
+    issuableMixin,
+  ],
+
+  components: {
+    editFormButtons,
+  },
+};
+</script>
+
+<template>
+  <div class="dropdown open">
+    <div class="dropdown-menu sidebar-item-warning-message">
+      <div>
+        <p v-if="isLocked">
+          {{ __(`Unlock this ${issuableDisplayName(issuableType)}?`) }}
+          <strong>{{ __('Everyone') }}</strong>
+          {{ __('will be able to comment.') }}
+        </p>
+
+        <p v-else>
+          {{ __(`Lock this ${issuableDisplayName(issuableType)}? Only`) }}
+          <strong>{{ __('project members') }}</strong>
+          {{ __('will be able to comment.') }}
+        </p>
+
+        <edit-form-buttons
+          :is-locked="isLocked"
+          :toggle-form="toggleForm"
+          :update-locked-attribute="updateLockedAttribute"
+        />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/sidebar/components/lock/edit_form_buttons.vue b/app/assets/javascripts/sidebar/components/lock/edit_form_buttons.vue
new file mode 100644
index 00000000000..7d883704142
--- /dev/null
+++ b/app/assets/javascripts/sidebar/components/lock/edit_form_buttons.vue
@@ -0,0 +1,50 @@
+<script>
+export default {
+  props: {
+    isLocked: {
+      required: true,
+      type: Boolean,
+    },
+
+    toggleForm: {
+      required: true,
+      type: Function,
+    },
+
+    updateLockedAttribute: {
+      required: true,
+      type: Function,
+    },
+  },
+
+  computed: {
+    buttonText() {
+      return this.isLocked ? this.__('Unlock') : this.__('Lock');
+    },
+
+    updateLockedBool() {
+      return !this.isLocked;
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="sidebar-item-warning-message-actions">
+    <button
+      type="button"
+      class="btn btn-default append-right-10"
+      @click="toggleForm"
+    >
+      {{ __('Cancel') }}
+    </button>
+
+    <button
+      type="button"
+      class="btn btn-close"
+      @click.prevent="updateLockedAttribute(updateLockedBool)"
+    >
+      {{ buttonText }}
+    </button>
+  </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
new file mode 100644
index 00000000000..c24edf6154d
--- /dev/null
+++ b/app/assets/javascripts/sidebar/components/lock/lock_issue_sidebar.vue
@@ -0,0 +1,108 @@
+<script>
+/* global Flash */
+import editForm from './edit_form.vue';
+import issuableMixin from '../../../vue_shared/mixins/issuable';
+
+export default {
+  props: {
+    isLocked: {
+      required: true,
+      type: Boolean,
+    },
+
+    isEditable: {
+      required: true,
+      type: Boolean,
+    },
+
+    mediator: {
+      required: true,
+      type: Object,
+      validator(mediatorObject) {
+        return mediatorObject.service && mediatorObject.service.update && mediatorObject.store;
+      },
+    },
+
+    issuableType: {
+      required: true,
+      type: String,
+    },
+  },
+
+  mixins: [
+    issuableMixin,
+  ],
+
+  components: {
+    editForm,
+  },
+
+  computed: {
+    lockIconClass() {
+      return this.isLocked ? 'fa-lock' : 'fa-unlock';
+    },
+
+    isLockDialogOpen() {
+      return this.mediator.store.isLockDialogOpen;
+    },
+  },
+
+  methods: {
+    toggleForm() {
+      this.mediator.store.isLockDialogOpen = !this.mediator.store.isLockDialogOpen;
+    },
+
+    updateLockedAttribute(locked) {
+      this.mediator.service.update(this.issuableType, {
+        discussion_locked: locked,
+      })
+      .then(() => location.reload())
+      .catch(() => Flash(this.__(`Something went wrong trying to change the locked state of this ${issuableDisplayName(this.issuableType)}`)));
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="block issuable-sidebar-item lock">
+    <div class="sidebar-collapsed-icon">
+      <i
+        class="fa"
+        :class="lockIconClass"
+        aria-hidden="true"
+      ></i>
+    </div>
+
+    <div class="title hide-collapsed">
+      {{ __(`Lock ${issuableDisplayName(issuableType)}`) }}
+      <button
+        v-if="isEditable"
+        class="pull-right lock-edit btn btn-blank"
+        type="button"
+        @click.prevent="toggleForm"
+      >
+        {{ __('Edit') }}
+      </button>
+    </div>
+
+    <div class="value sidebar-item-value hide-collapsed">
+      <editForm
+        v-if="isLockDialogOpen"
+        :toggle-form="toggleForm"
+        :is-locked="isLocked"
+        :update-locked-attribute="updateLockedAttribute"
+        :issuable-type="issuableType"
+      />
+
+      <div v-if="isLocked" class="value sidebar-item-value">
+        <i aria-hidden="true" class="fa fa-lock is-active"></i>
+        {{ __('Locked') }}
+      </div>
+
+      <div v-else class="no-value sidebar-item-value hide-collapsed">
+        <i aria-hidden="true" class="fa fa-unlock not-active"></i>
+        {{ __('Unlocked') }}
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/sidebar/sidebar_bundle.js b/app/assets/javascripts/sidebar/sidebar_bundle.js
index 3d8972050a9..645e65d7b16 100644
--- a/app/assets/javascripts/sidebar/sidebar_bundle.js
+++ b/app/assets/javascripts/sidebar/sidebar_bundle.js
@@ -3,42 +3,72 @@ import sidebarTimeTracking from './components/time_tracking/sidebar_time_trackin
 import sidebarAssignees from './components/assignees/sidebar_assignees';
 import confidential from './components/confidential/confidential_issue_sidebar.vue';
 import SidebarMoveIssue from './lib/sidebar_move_issue';
+import lockBlock from './components/lock/lock_issue_sidebar.vue';
+import Translate from '../vue_shared/translate';
 
 import Mediator from './sidebar_mediator';
 
+Vue.use(Translate);
+
+function mountConfidentialComponent(mediator) {
+  const el = document.querySelector('#js-confidential-entry-point');
+
+  if (!el) return;
+
+  const dataNode = document.getElementById('js-confidential-issue-data');
+  const initialData = JSON.parse(dataNode.innerHTML);
+
+  const ConfidentialComp = Vue.extend(confidential);
+
+  new ConfidentialComp({
+    propsData: {
+      isConfidential: initialData.is_confidential,
+      isEditable: initialData.is_editable,
+      service: mediator.service,
+    },
+  }).$mount(el);
+}
+
+function mountLockComponent(mediator) {
+  const el = document.querySelector('#js-lock-entry-point');
+
+  if (!el) return;
+
+  const dataNode = document.getElementById('js-lock-issue-data');
+  const initialData = JSON.parse(dataNode.innerHTML);
+
+  const LockComp = Vue.extend(lockBlock);
+
+  new LockComp({
+    propsData: {
+      isLocked: initialData.is_locked,
+      isEditable: initialData.is_editable,
+      mediator,
+      issuableType: gl.utils.isInIssuePage() ? 'issue' : 'merge_request',
+    },
+  }).$mount(el);
+}
+
 function domContentLoaded() {
   const sidebarOptions = JSON.parse(document.querySelector('.js-sidebar-options').innerHTML);
   const mediator = new Mediator(sidebarOptions);
   mediator.fetch();
 
   const sidebarAssigneesEl = document.querySelector('#js-vue-sidebar-assignees');
-  const confidentialEl = document.querySelector('#js-confidential-entry-point');
   // Only create the sidebarAssignees vue app if it is found in the DOM
   // We currently do not use sidebarAssignees for the MR page
   if (sidebarAssigneesEl) {
     new Vue(sidebarAssignees).$mount(sidebarAssigneesEl);
   }
 
-  if (confidentialEl) {
-    const dataNode = document.getElementById('js-confidential-issue-data');
-    const initialData = JSON.parse(dataNode.innerHTML);
+  mountConfidentialComponent(mediator);
+  mountLockComponent(mediator);
 
-    const ConfidentialComp = Vue.extend(confidential);
-
-    new ConfidentialComp({
-      propsData: {
-        isConfidential: initialData.is_confidential,
-        isEditable: initialData.is_editable,
-        service: mediator.service,
-      },
-    }).$mount(confidentialEl);
-
-    new SidebarMoveIssue(
-      mediator,
-      $('.js-move-issue'),
-      $('.js-move-issue-confirmation-button'),
-    ).init();
-  }
+  new SidebarMoveIssue(
+    mediator,
+    $('.js-move-issue'),
+    $('.js-move-issue-confirmation-button'),
+  ).init();
 
   new Vue(sidebarTimeTracking).$mount('#issuable-time-tracker');
 }
diff --git a/app/assets/javascripts/sidebar/stores/sidebar_store.js b/app/assets/javascripts/sidebar/stores/sidebar_store.js
index cc04a2a3fcf..d5d04103f3f 100644
--- a/app/assets/javascripts/sidebar/stores/sidebar_store.js
+++ b/app/assets/javascripts/sidebar/stores/sidebar_store.js
@@ -15,6 +15,7 @@ export default class SidebarStore {
       };
       this.autocompleteProjects = [];
       this.moveToProjectId = 0;
+      this.isLockDialogOpen = false;
 
       SidebarStore.singleton = this;
     }
diff --git a/app/assets/javascripts/vue_shared/components/issue/confidential_issue_warning.vue b/app/assets/javascripts/vue_shared/components/issue/confidential_issue_warning.vue
deleted file mode 100644
index 397d16331d5..00000000000
--- a/app/assets/javascripts/vue_shared/components/issue/confidential_issue_warning.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<script>
-  export default {
-    name: 'confidentialIssueWarning',
-  };
-</script>
-<template>
-  <div class="confidential-issue-warning">
-    <i
-    aria-hidden="true"
-    class="fa fa-eye-slash">
-    </i>
-    <span>
-      This is a confidential issue. Your comment will not be visible to the public.
-    </span>
-  </div>
-</template>
diff --git a/app/assets/javascripts/vue_shared/components/issue/issue_warning.vue b/app/assets/javascripts/vue_shared/components/issue/issue_warning.vue
new file mode 100644
index 00000000000..0f11b6e2223
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/issue/issue_warning.vue
@@ -0,0 +1,53 @@
+<script>
+  export default {
+    props: {
+      isLocked: {
+        type: Boolean,
+        default: false,
+      },
+
+      isConfidential: {
+        type: Boolean,
+        default: false,
+      },
+    },
+
+    computed: {
+      iconClass() {
+        return {
+          'fa-eye-slash': this.isConfidential,
+          'fa-lock': this.isLocked,
+        };
+      },
+
+      isLockedAndConfidential() {
+        return this.isConfidential && this.isLocked;
+      },
+    },
+  };
+</script>
+<template>
+  <div class="issuable-note-warning">
+    <i
+      aria-hidden="true"
+      class="fa"
+      :class="iconClass"
+      v-if="!isLockedAndConfidential"
+    ></i>
+
+    <span v-if="isLockedAndConfidential">
+      {{ __('This issue is confidential and locked.') }}
+      {{ __('People without permission will never get a notification and not be able to comment.') }}
+    </span>
+
+    <span v-else-if="isConfidential">
+      {{ __('This is a confidential issue.') }}
+      {{ __('Your comment will not be visible to the public.') }}
+    </span>
+
+    <span v-else-if="isLocked">
+      {{ __('This issue is locked.') }}
+      {{ __('Only project members can comment.') }}
+    </span>
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_shared/mixins/issuable.js b/app/assets/javascripts/vue_shared/mixins/issuable.js
new file mode 100644
index 00000000000..831102c0cac
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/mixins/issuable.js
@@ -0,0 +1,7 @@
+export default {
+  methods: {
+    issuableDisplayName(issuableType) {
+      return issuableType.replace(/_/, ' ');
+    },
+  },
+};
-- 
cgit v1.2.3


From 579092f53aa1a27e8d60bd70e12bed19123e24e7 Mon Sep 17 00:00:00 2001
From: "Luke \"Jared\" Bennett" <lbennett@gitlab.com>
Date: Thu, 14 Sep 2017 12:06:11 +0100
Subject: Remove discussion_lock

---
 app/assets/javascripts/discussion_lock.js | 46 -------------------------------
 app/assets/javascripts/main.js            |  1 -
 2 files changed, 47 deletions(-)
 delete mode 100644 app/assets/javascripts/discussion_lock.js

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/discussion_lock.js b/app/assets/javascripts/discussion_lock.js
deleted file mode 100644
index 7bf83e9b8a0..00000000000
--- a/app/assets/javascripts/discussion_lock.js
+++ /dev/null
@@ -1,46 +0,0 @@
-class DiscussionLock {
-  constructor(containerElm) {
-    this.containerElm = containerElm;
-
-    const lockButton = containerElm.querySelector('.js-discussion-lock-button');
-    console.log(lockButton);
-    if (lockButton) {
-      // remove class so we don't bind twice
-      lockButton.classList.remove('js-discussion-lock-button');
-      console.log(lockButton);
-      lockButton.addEventListener('click', this.toggleDiscussionLock.bind(this));
-    }
-  }
-
-  toggleDiscussionLock(event) {
-    const button = event.currentTarget;
-    const buttonSpan = button.querySelector('span');
-    if (!buttonSpan || button.classList.contains('disabled')) {
-      return;
-    }
-    button.classList.add('disabled');
-
-    const url = this.containerElm.dataset.url;
-    const lock = this.containerElm.dataset.lock;
-    const issuableType = this.containerElm.dataset.issuableType;
-
-    const data = {}
-    data[issuableType] = {}
-    data[issuableType].discussion_locked = lock
-
-    $.ajax({
-      url,
-      data: data,
-      type: 'PUT'
-    }).done((data) => {
-      button.classList.remove('disabled');
-    });
-  }
-
-  static bindAll(selector) {
-    [].forEach.call(document.querySelectorAll(selector), elm => new DiscussionLock(elm));
-  }
-}
-
-window.gl = window.gl || {};
-window.gl.DiscussionLock = DiscussionLock;
diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js
index ea1d50de965..0bc31a56684 100644
--- a/app/assets/javascripts/main.js
+++ b/app/assets/javascripts/main.js
@@ -80,7 +80,6 @@ import './copy_as_gfm';
 import './copy_to_clipboard';
 import './create_label';
 import './diff';
-import './discussion_lock';
 import './dropzone_input';
 import './due_date_select';
 import './files_comment_button';
-- 
cgit v1.2.3


From 09a4030cab281f588a1e8252ec93484e26a1be16 Mon Sep 17 00:00:00 2001
From: "Luke \"Jared\" Bennett" <lbennett@gitlab.com>
Date: Thu, 14 Sep 2017 14:22:32 +0100
Subject: Remove discussionlock call

---
 app/assets/javascripts/init_issuable_sidebar.js | 1 -
 1 file changed, 1 deletion(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/init_issuable_sidebar.js b/app/assets/javascripts/init_issuable_sidebar.js
index 8857601f530..29e3d2ea94e 100644
--- a/app/assets/javascripts/init_issuable_sidebar.js
+++ b/app/assets/javascripts/init_issuable_sidebar.js
@@ -13,7 +13,6 @@ export default () => {
   new LabelsSelect();
   new IssuableContext(sidebarOptions.currentUser);
   gl.Subscription.bindAll('.subscription');
-  gl.DiscussionLock.bindAll('.discussion-lock');
   new gl.DueDateSelectors();
   window.sidebar = new Sidebar();
 };
-- 
cgit v1.2.3


From e0e153d2d73199a16e7e7dbc1b34cfeabbc26410 Mon Sep 17 00:00:00 2001
From: "Luke \"Jared\" Bennett" <lbennett@gitlab.com>
Date: Thu, 14 Sep 2017 14:35:57 +0100
Subject: Dont allow diff commenting if MR locked

---
 app/assets/javascripts/diff.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/diff.js b/app/assets/javascripts/diff.js
index 6a008112203..c12dc7bdc2c 100644
--- a/app/assets/javascripts/diff.js
+++ b/app/assets/javascripts/diff.js
@@ -17,7 +17,8 @@ class Diff {
       }
     });
 
-    FilesCommentButton.init($diffFile);
+    const tab = document.getElementById('diffs');
+    if (tab && tab.dataset.isLocked === 'false') FilesCommentButton.init($diffFile);
 
     $diffFile.each((index, file) => new gl.ImageFile(file));
 
-- 
cgit v1.2.3


From 6d59795ebbe51c99317ead0be62591a5f0926c92 Mon Sep 17 00:00:00 2001
From: "Luke \"Jared\" Bennett" <lbennett@gitlab.com>
Date: Fri, 15 Sep 2017 10:19:43 +0100
Subject: Review changes

---
 app/assets/javascripts/diff.js                     |  2 +-
 .../sidebar/components/lock/edit_form.vue          | 36 ++++++++++------------
 .../sidebar/components/lock/edit_form_buttons.vue  |  4 +--
 3 files changed, 20 insertions(+), 22 deletions(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/diff.js b/app/assets/javascripts/diff.js
index c12dc7bdc2c..baeec130579 100644
--- a/app/assets/javascripts/diff.js
+++ b/app/assets/javascripts/diff.js
@@ -18,7 +18,7 @@ class Diff {
     });
 
     const tab = document.getElementById('diffs');
-    if (tab && tab.dataset.isLocked === 'false') FilesCommentButton.init($diffFile);
+    if (tab && !Object.hasOwnProperty.call(tab.dataset, 'isLocked')) FilesCommentButton.init($diffFile);
 
     $diffFile.each((index, file) => new gl.ImageFile(file));
 
diff --git a/app/assets/javascripts/sidebar/components/lock/edit_form.vue b/app/assets/javascripts/sidebar/components/lock/edit_form.vue
index 616abec4d5e..b79d357d4bb 100644
--- a/app/assets/javascripts/sidebar/components/lock/edit_form.vue
+++ b/app/assets/javascripts/sidebar/components/lock/edit_form.vue
@@ -38,25 +38,23 @@ export default {
 <template>
   <div class="dropdown open">
     <div class="dropdown-menu sidebar-item-warning-message">
-      <div>
-        <p v-if="isLocked">
-          {{ __(`Unlock this ${issuableDisplayName(issuableType)}?`) }}
-          <strong>{{ __('Everyone') }}</strong>
-          {{ __('will be able to comment.') }}
-        </p>
-
-        <p v-else>
-          {{ __(`Lock this ${issuableDisplayName(issuableType)}? Only`) }}
-          <strong>{{ __('project members') }}</strong>
-          {{ __('will be able to comment.') }}
-        </p>
-
-        <edit-form-buttons
-          :is-locked="isLocked"
-          :toggle-form="toggleForm"
-          :update-locked-attribute="updateLockedAttribute"
-        />
-      </div>
+      <p class="text" v-if="isLocked">
+        {{ __(`Unlock this ${issuableDisplayName(issuableType)}?`) }}
+        <strong>{{ __('Everyone') }}</strong>
+        {{ __('will be able to comment.') }}
+      </p>
+
+      <p class="text" v-else>
+        {{ __(`Lock this ${issuableDisplayName(issuableType)}? Only`) }}
+        <strong>{{ __('project members') }}</strong>
+        {{ __('will be able to comment.') }}
+      </p>
+
+      <edit-form-buttons
+        :is-locked="isLocked"
+        :toggle-form="toggleForm"
+        :update-locked-attribute="updateLockedAttribute"
+      />
     </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/sidebar/components/lock/edit_form_buttons.vue b/app/assets/javascripts/sidebar/components/lock/edit_form_buttons.vue
index 7d883704142..c3a553a7605 100644
--- a/app/assets/javascripts/sidebar/components/lock/edit_form_buttons.vue
+++ b/app/assets/javascripts/sidebar/components/lock/edit_form_buttons.vue
@@ -22,7 +22,7 @@ export default {
       return this.isLocked ? this.__('Unlock') : this.__('Lock');
     },
 
-    updateLockedBool() {
+    toggleLock() {
       return !this.isLocked;
     },
   },
@@ -42,7 +42,7 @@ export default {
     <button
       type="button"
       class="btn btn-close"
-      @click.prevent="updateLockedAttribute(updateLockedBool)"
+      @click.prevent="updateLockedAttribute(toggleLock)"
     >
       {{ buttonText }}
     </button>
-- 
cgit v1.2.3


From 1b52d8a4832f0231fa3f6c5cb28d065bbea9ba94 Mon Sep 17 00:00:00 2001
From: "Luke \"Jared\" Bennett" <lbennett@gitlab.com>
Date: Fri, 15 Sep 2017 17:40:29 +0100
Subject: Fix static analysis

---
 app/assets/javascripts/sidebar/components/lock/lock_issue_sidebar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'app/assets/javascripts')

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 c24edf6154d..a6a39207648 100644
--- a/app/assets/javascripts/sidebar/components/lock/lock_issue_sidebar.vue
+++ b/app/assets/javascripts/sidebar/components/lock/lock_issue_sidebar.vue
@@ -57,7 +57,7 @@ export default {
         discussion_locked: locked,
       })
       .then(() => location.reload())
-      .catch(() => Flash(this.__(`Something went wrong trying to change the locked state of this ${issuableDisplayName(this.issuableType)}`)));
+      .catch(() => Flash(this.__(`Something went wrong trying to change the locked state of this ${this.issuableDisplayName(this.issuableType)}`)));
     },
   },
 };
-- 
cgit v1.2.3


From 55a7529621515eaeffa1424a281e639cf74be6cf Mon Sep 17 00:00:00 2001
From: "Luke \"Jared\" Bennett" <lbennett@gitlab.com>
Date: Wed, 20 Sep 2017 10:28:14 +0100
Subject: is-active review changes

---
 .../sidebar/components/confidential/confidential_issue_sidebar.vue    | 4 ++--
 app/assets/javascripts/sidebar/components/lock/lock_issue_sidebar.vue | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/sidebar/components/confidential/confidential_issue_sidebar.vue b/app/assets/javascripts/sidebar/components/confidential/confidential_issue_sidebar.vue
index dfdd00cff47..f2b1099a678 100644
--- a/app/assets/javascripts/sidebar/components/confidential/confidential_issue_sidebar.vue
+++ b/app/assets/javascripts/sidebar/components/confidential/confidential_issue_sidebar.vue
@@ -70,11 +70,11 @@ export default {
         :update-confidential-attribute="updateConfidentialAttribute"
       />
       <div v-if="!isConfidential" class="no-value sidebar-item-value">
-        <i class="fa fa-eye not-active"></i>
+        <i class="fa fa-eye sidebar-item-icon"></i>
         Not confidential
       </div>
       <div v-else class="value sidebar-item-value hide-collapsed">
-        <i aria-hidden="true" class="fa fa-eye-slash is-active"></i>
+        <i aria-hidden="true" class="fa fa-eye-slash sidebar-item-icon is-active"></i>
         This issue is confidential
       </div>
     </div>
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 a6a39207648..9021d17dddf 100644
--- a/app/assets/javascripts/sidebar/components/lock/lock_issue_sidebar.vue
+++ b/app/assets/javascripts/sidebar/components/lock/lock_issue_sidebar.vue
@@ -95,12 +95,12 @@ export default {
       />
 
       <div v-if="isLocked" class="value sidebar-item-value">
-        <i aria-hidden="true" class="fa fa-lock is-active"></i>
+        <i aria-hidden="true" class="fa fa-lock sidebar-item-icon is-active"></i>
         {{ __('Locked') }}
       </div>
 
       <div v-else class="no-value sidebar-item-value hide-collapsed">
-        <i aria-hidden="true" class="fa fa-unlock not-active"></i>
+        <i aria-hidden="true" class="fa fa-unlock sidebar-item-icon"></i>
         {{ __('Unlocked') }}
       </div>
     </div>
-- 
cgit v1.2.3


From 06b31461f34bac86d31d898e4f0e5b573d6b0345 Mon Sep 17 00:00:00 2001
From: Simon Knox <psimyn@gmail.com>
Date: Mon, 11 Sep 2017 21:47:33 +1000
Subject: improve merge request widget status icon UX

x to indicate failure or cannot merge
---
 .../components/states/mr_widget_ready_to_merge.js  | 32 ++++++++++++++++------
 1 file changed, 24 insertions(+), 8 deletions(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js
index ad709da51ee..a0aba7718d4 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js
@@ -38,24 +38,40 @@ export default {
 
       return this.useCommitMessageWithDescription ? withoutDesc : withDesc;
     },
-    mergeButtonClass() {
-      const defaultClass = 'btn btn-sm btn-success accept-merge-request';
-      const failedClass = `${defaultClass} btn-danger`;
-      const inActionClass = `${defaultClass} btn-info`;
+    status() {
       const { pipeline, isPipelineActive, isPipelineFailed, hasCI, ciStatus } = this.mr;
 
       if (hasCI && !ciStatus) {
-        return failedClass;
+        return 'failed';
       } else if (!pipeline) {
-        return defaultClass;
+        return 'success';
       } else if (isPipelineActive) {
-        return inActionClass;
+        return 'pending';
       } else if (isPipelineFailed) {
+        return 'failed';
+      }
+
+      return 'success';
+    },
+    mergeButtonClass() {
+      const defaultClass = 'btn btn-sm btn-success accept-merge-request';
+      const failedClass = `${defaultClass} btn-danger`;
+      const inActionClass = `${defaultClass} btn-info`;
+
+      if (this.status === 'failed') {
         return failedClass;
+      } else if (this.status === 'pending') {
+        return inActionClass;
       }
 
       return defaultClass;
     },
+    iconClass() {
+      if (this.status === 'failed' || !this.commitMessage.length || !this.isMergeAllowed() || this.mr.preventMerge) {
+        return 'failed';
+      }
+      return 'success';
+    },
     mergeButtonText() {
       if (this.isMergingImmediately) {
         return 'Merge in progress';
@@ -208,7 +224,7 @@ export default {
   },
   template: `
     <div class="mr-widget-body media">
-      <status-icon status="success" />
+      <status-icon :status="iconClass" />
       <div class="media-body">
         <div class="mr-widget-body-controls media space-children">
           <span class="btn-group append-bottom-5">
-- 
cgit v1.2.3


From fea7b9e68255771a308e9d391079d83c58340814 Mon Sep 17 00:00:00 2001
From: "Luke \"Jared\" Bennett" <lbennett@gitlab.com>
Date: Wed, 20 Sep 2017 15:40:29 +0100
Subject: Fix diff commenting on commits

---
 app/assets/javascripts/diff.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/diff.js b/app/assets/javascripts/diff.js
index baeec130579..8959365a5c9 100644
--- a/app/assets/javascripts/diff.js
+++ b/app/assets/javascripts/diff.js
@@ -18,7 +18,7 @@ class Diff {
     });
 
     const tab = document.getElementById('diffs');
-    if (tab && !Object.hasOwnProperty.call(tab.dataset, 'isLocked')) FilesCommentButton.init($diffFile);
+    if (!tab || (tab && !Object.hasOwnProperty.call(tab.dataset, 'isLocked'))) FilesCommentButton.init($diffFile);
 
     $diffFile.each((index, file) => new gl.ImageFile(file));
 
-- 
cgit v1.2.3


From f68b3aaaadac6658f8c2b5c330873582e44b87f8 Mon Sep 17 00:00:00 2001
From: Jose Ivan Vargas <jvargas@gitlab.com>
Date: Wed, 20 Sep 2017 13:24:24 -0500
Subject: Added defaults for the protected branches dropdowns for the
 repository settings

---
 app/assets/javascripts/gl_dropdown.js              |  6 +--
 .../protected_branches/protected_branch_create.js  | 51 +++++++++++++++++++---
 2 files changed, 48 insertions(+), 9 deletions(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/gl_dropdown.js b/app/assets/javascripts/gl_dropdown.js
index 50d822eba5a..b643a38e401 100644
--- a/app/assets/javascripts/gl_dropdown.js
+++ b/app/assets/javascripts/gl_dropdown.js
@@ -737,7 +737,7 @@ GitLabDropdown = (function() {
       : selectedObject.id;
     if (isInput) {
       field = $(this.el);
-    } else if (value) {
+    } else if (value != null) {
       field = this.dropdown.parent().find("input[name='" + fieldName + "'][value='" + value.toString().replace(/'/g, '\\\'') + "']");
     }
 
@@ -745,7 +745,7 @@ GitLabDropdown = (function() {
       return;
     }
 
-    if (el.hasClass(ACTIVE_CLASS)) {
+    if (el.hasClass(ACTIVE_CLASS) && value !== 0) {
       isMarking = false;
       el.removeClass(ACTIVE_CLASS);
       if (field && field.length) {
@@ -851,7 +851,7 @@ GitLabDropdown = (function() {
       if (href && href !== '#') {
         gl.utils.visitUrl(href);
       } else {
-        $el.first().trigger('click');
+        $el.trigger('click');
       }
     }
   };
diff --git a/app/assets/javascripts/protected_branches/protected_branch_create.js b/app/assets/javascripts/protected_branches/protected_branch_create.js
index 10da3783123..007846d732a 100644
--- a/app/assets/javascripts/protected_branches/protected_branch_create.js
+++ b/app/assets/javascripts/protected_branches/protected_branch_create.js
@@ -1,15 +1,22 @@
+import _ from 'underscore';
 import ProtectedBranchAccessDropdown from './protected_branch_access_dropdown';
 import ProtectedBranchDropdown from './protected_branch_dropdown';
+import AccessorUtilities from '../lib/utils/accessor';
+
+const PB_LOCAL_STORAGE_KEY = 'protected-branches-defaults';
 
 export default class ProtectedBranchCreate {
   constructor() {
     this.$form = $('.js-new-protected-branch');
+    this.isLocalStorageAvailable = AccessorUtilities.isLocalStorageAccessSafe();
+    this.currentProjectUserDefaults = {};
     this.buildDropdowns();
   }
 
   buildDropdowns() {
     const $allowedToMergeDropdown = this.$form.find('.js-allowed-to-merge');
     const $allowedToPushDropdown = this.$form.find('.js-allowed-to-push');
+    const $protectedBranchDropdown = this.$form.find('.js-protected-branch-select');
 
     // Cache callback
     this.onSelectCallback = this.onSelect.bind(this);
@@ -28,15 +35,13 @@ export default class ProtectedBranchCreate {
       onSelect: this.onSelectCallback,
     });
 
-    // Select default
-    $allowedToPushDropdown.data('glDropdown').selectRowAtIndex(0);
-    $allowedToMergeDropdown.data('glDropdown').selectRowAtIndex(0);
-
     // Protected branch dropdown
     this.protectedBranchDropdown = new ProtectedBranchDropdown({
-      $dropdown: this.$form.find('.js-protected-branch-select'),
+      $dropdown: $protectedBranchDropdown,
       onSelect: this.onSelectCallback,
     });
+
+    this.loadPreviousSelection($allowedToMergeDropdown.data('glDropdown'), $allowedToPushDropdown.data('glDropdown'));
   }
 
   // This will run after clicked callback
@@ -45,7 +50,41 @@ export default class ProtectedBranchCreate {
     const $branchInput = this.$form.find('input[name="protected_branch[name]"]');
     const $allowedToMergeInput = this.$form.find('input[name="protected_branch[merge_access_levels_attributes][0][access_level]"]');
     const $allowedToPushInput = this.$form.find('input[name="protected_branch[push_access_levels_attributes][0][access_level]"]');
+    const completedForm = !($branchInput.val() && $allowedToMergeInput.length
+                          && $allowedToPushInput.length);
+    // Save previously used settings
+    if (!completedForm) {
+      this.savePreviousSelection($allowedToMergeInput.val(), $allowedToPushInput.val());
+    }
+
+    this.$form.find('input[type="submit"]').attr('disabled', completedForm);
+  }
+
+  loadPreviousSelection(mergeDropdown, pushDropdown) {
+    let mergeIndex = 0;
+    let pushIndex = 0;
+    if (this.isLocalStorageAvailable) {
+      const savedDefaults = JSON.parse(window.localStorage.getItem(PB_LOCAL_STORAGE_KEY));
+      if (savedDefaults != null) {
+        mergeIndex = _.findLastIndex(mergeDropdown.fullData.roles, {
+          id: parseInt(savedDefaults.mergeSelection, 0),
+        });
+        pushIndex = _.findLastIndex(pushDropdown.fullData.roles, {
+          id: parseInt(savedDefaults.pushSelection, 0),
+        });
+      }
+    }
+    mergeDropdown.selectRowAtIndex(mergeIndex);
+    pushDropdown.selectRowAtIndex(pushIndex);
+  }
 
-    this.$form.find('input[type="submit"]').attr('disabled', !($branchInput.val() && $allowedToMergeInput.length && $allowedToPushInput.length));
+  savePreviousSelection(mergeSelection, pushSelection) {
+    if (this.isLocalStorageAvailable) {
+      const branchDefaults = {
+        mergeSelection,
+        pushSelection,
+      };
+      window.localStorage.setItem(PB_LOCAL_STORAGE_KEY, JSON.stringify(branchDefaults));
+    }
   }
 }
-- 
cgit v1.2.3


From 360c1470573a34ed47b6bf594339b122900ea6d9 Mon Sep 17 00:00:00 2001
From: Jarka Kadlecova <jarka@gitlab.com>
Date: Thu, 7 Sep 2017 17:14:21 +0200
Subject: Disable comment form when discussion locked for user

---
 .../javascripts/notes/components/issue_comment_form.vue  |  3 +++
 .../notes/components/issue_discussion_locked_widget.vue  | 16 ++++++++++++++++
 2 files changed, 19 insertions(+)
 create mode 100644 app/assets/javascripts/notes/components/issue_discussion_locked_widget.vue

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/notes/components/issue_comment_form.vue b/app/assets/javascripts/notes/components/issue_comment_form.vue
index 1b27e74eeb6..afd58b7ceb7 100644
--- a/app/assets/javascripts/notes/components/issue_comment_form.vue
+++ b/app/assets/javascripts/notes/components/issue_comment_form.vue
@@ -9,6 +9,7 @@
   import eventHub from '../event_hub';
   import issueWarning from '../../vue_shared/components/issue/issue_warning.vue';
   import issueNoteSignedOutWidget from './issue_note_signed_out_widget.vue';
+  import issueDiscussionLockedWidget from './issue_discussion_locked_widget.vue';
   import markdownField from '../../vue_shared/components/markdown/field.vue';
   import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
   import issuableStateMixin from '../mixins/issuable_state';
@@ -29,6 +30,7 @@
     components: {
       issueWarning,
       issueNoteSignedOutWidget,
+      issueDiscussionLockedWidget,
       markdownField,
       userAvatarLink,
     },
@@ -239,6 +241,7 @@
 <template>
   <div>
     <issue-note-signed-out-widget v-if="!isLoggedIn" />
+    <issue-discussion-locked-widget v-else-if="!canCreate" />
     <ul
       v-else
       class="notes notes-form timeline">
diff --git a/app/assets/javascripts/notes/components/issue_discussion_locked_widget.vue b/app/assets/javascripts/notes/components/issue_discussion_locked_widget.vue
new file mode 100644
index 00000000000..7169117421b
--- /dev/null
+++ b/app/assets/javascripts/notes/components/issue_discussion_locked_widget.vue
@@ -0,0 +1,16 @@
+<script>
+  import { mapGetters } from 'vuex';
+
+  export default {
+    name: 'discussionLockedWidget',
+  };
+
+</script>
+
+<template>
+  <div class="disabled-comment text-center">
+    <span class="issuable-note-warning">
+      This issue is locked. Only <b>project members</b> can comment.
+     </span>
+  </div>
+</template>
-- 
cgit v1.2.3


From 4f4060ab4c38c739c985bf8393d25fe785138c8d Mon Sep 17 00:00:00 2001
From: Jose Ivan Vargas <jvargas@gitlab.com>
Date: Tue, 26 Sep 2017 16:14:25 -0500
Subject: Addressed observations

---
 .../protected_branches/protected_branch_create.js            | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/protected_branches/protected_branch_create.js b/app/assets/javascripts/protected_branches/protected_branch_create.js
index 007846d732a..efc612a3dc7 100644
--- a/app/assets/javascripts/protected_branches/protected_branch_create.js
+++ b/app/assets/javascripts/protected_branches/protected_branch_create.js
@@ -50,13 +50,13 @@ export default class ProtectedBranchCreate {
     const $branchInput = this.$form.find('input[name="protected_branch[name]"]');
     const $allowedToMergeInput = this.$form.find('input[name="protected_branch[merge_access_levels_attributes][0][access_level]"]');
     const $allowedToPushInput = this.$form.find('input[name="protected_branch[push_access_levels_attributes][0][access_level]"]');
-    const completedForm = !($branchInput.val() && $allowedToMergeInput.length
-                          && $allowedToPushInput.length);
-    // Save previously used settings
-    if (!completedForm) {
-      this.savePreviousSelection($allowedToMergeInput.val(), $allowedToPushInput.val());
-    }
+    const completedForm = !(
+                            $branchInput.val() &&
+                            $allowedToMergeInput.length &&
+                            $allowedToPushInput.length
+                          );
 
+    this.savePreviousSelection($allowedToMergeInput.val(), $allowedToPushInput.val());
     this.$form.find('input[type="submit"]').attr('disabled', completedForm);
   }
 
-- 
cgit v1.2.3


From 362bd88471d52b595f9dcc890a1d993ae88cafd5 Mon Sep 17 00:00:00 2001
From: "Luke \"Jared\" Bennett" <lbennett@gitlab.com>
Date: Wed, 27 Sep 2017 13:35:31 +0100
Subject: Fix static analysis

---
 .../javascripts/notes/components/issue_discussion_locked_widget.vue     | 2 --
 1 file changed, 2 deletions(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/notes/components/issue_discussion_locked_widget.vue b/app/assets/javascripts/notes/components/issue_discussion_locked_widget.vue
index 7169117421b..fa2ff6e5c58 100644
--- a/app/assets/javascripts/notes/components/issue_discussion_locked_widget.vue
+++ b/app/assets/javascripts/notes/components/issue_discussion_locked_widget.vue
@@ -1,6 +1,4 @@
 <script>
-  import { mapGetters } from 'vuex';
-
   export default {
     name: 'discussionLockedWidget',
   };
-- 
cgit v1.2.3


From 1ae29851d0f7e18933029c46d560bbc3adca4357 Mon Sep 17 00:00:00 2001
From: "Luke \"Jared\" Bennett" <lbennett@gitlab.com>
Date: Wed, 27 Sep 2017 14:17:15 +0100
Subject: Fix karma

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

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/notes/components/issue_comment_form.vue b/app/assets/javascripts/notes/components/issue_comment_form.vue
index afd58b7ceb7..e37bbe164fe 100644
--- a/app/assets/javascripts/notes/components/issue_comment_form.vue
+++ b/app/assets/javascripts/notes/components/issue_comment_form.vue
@@ -275,7 +275,7 @@
                 :markdown-docs-path="markdownDocsPath"
                 :quick-actions-docs-path="quickActionsDocsPath"
                 :add-spacing-classes="false"
-                :is-confidential-issue="isConfidentialIssue"
+                :is-confidential-issue="isIssueConfidential(getIssueData)"
                 ref="markdownField">
                 <textarea
                   id="note-body"
-- 
cgit v1.2.3


From a510d9bdfb3d5a524a62388980cfa0a552bbefb7 Mon Sep 17 00:00:00 2001
From: "Luke \"Jared\" Bennett" <lbennett@gitlab.com>
Date: Wed, 27 Sep 2017 15:46:09 +0100
Subject: Correct disabled note form style

---
 .../notes/components/issue_discussion_locked_widget.vue          | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/notes/components/issue_discussion_locked_widget.vue b/app/assets/javascripts/notes/components/issue_discussion_locked_widget.vue
index fa2ff6e5c58..f0429b82aaa 100644
--- a/app/assets/javascripts/notes/components/issue_discussion_locked_widget.vue
+++ b/app/assets/javascripts/notes/components/issue_discussion_locked_widget.vue
@@ -1,6 +1,10 @@
 <script>
   export default {
-    name: 'discussionLockedWidget',
+    computed: {
+      icon() {
+        return gl.utils.spriteIcon('lock');
+      },
+    },
   };
 
 </script>
@@ -8,7 +12,8 @@
 <template>
   <div class="disabled-comment text-center">
     <span class="issuable-note-warning">
-      This issue is locked. Only <b>project members</b> can comment.
+      <span class="icon" v-html="icon"></span>
+      <span>This issue is locked. Only <b>project members</b> can comment.</span>
      </span>
   </div>
 </template>
-- 
cgit v1.2.3


From c14617709498eebef1755ee67c51f6e428ebbbce Mon Sep 17 00:00:00 2001
From: Jose Ivan Vargas <jvargas@gitlab.com>
Date: Wed, 27 Sep 2017 11:37:23 -0500
Subject: Fixed deployment flag having content hidden when being too far right

---
 app/assets/javascripts/monitoring/components/graph.vue     |  1 +
 .../javascripts/monitoring/components/graph/deployment.vue | 14 +++++++++++++-
 2 files changed, 14 insertions(+), 1 deletion(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/monitoring/components/graph.vue b/app/assets/javascripts/monitoring/components/graph.vue
index 6b3e341f936..f292b56c5c1 100644
--- a/app/assets/javascripts/monitoring/components/graph.vue
+++ b/app/assets/javascripts/monitoring/components/graph.vue
@@ -247,6 +247,7 @@
             <graph-deployment
               :show-deploy-info="showDeployInfo"
               :deployment-data="reducedDeploymentData"
+              :graph-width="graphWidth"
               :graph-height="graphHeight"
               :graph-height-offset="graphHeightOffset"
             />
diff --git a/app/assets/javascripts/monitoring/components/graph/deployment.vue b/app/assets/javascripts/monitoring/components/graph/deployment.vue
index 3623d2ed946..e3b8be0c7fb 100644
--- a/app/assets/javascripts/monitoring/components/graph/deployment.vue
+++ b/app/assets/javascripts/monitoring/components/graph/deployment.vue
@@ -19,6 +19,10 @@
         type: Number,
         required: true,
       },
+      graphWidth: {
+        type: Number,
+        required: true,
+      },
     },
 
     computed: {
@@ -47,6 +51,14 @@
       transformDeploymentGroup(deployment) {
         return `translate(${Math.floor(deployment.xPos) + 1}, 20)`;
       },
+
+      positionFlag(deployment) {
+        let xPosition = 3;
+        if (deployment.xPos > (this.graphWidth - 200)) {
+          xPosition = -97;
+        }
+        return xPosition;
+      },
     },
   };
 </script>
@@ -77,7 +89,7 @@
       <svg
         v-if="deployment.showDeploymentFlag"
         class="js-deploy-info-box"
-        x="3"
+        :x="positionFlag(deployment)"
         y="0"
         width="92"
         height="60">
-- 
cgit v1.2.3


From 74438cd1be759903091e093bffa3ec32ec84a874 Mon Sep 17 00:00:00 2001
From: Fatih Acet <acetfatih@gmail.com>
Date: Wed, 27 Sep 2017 23:42:04 +0300
Subject: Trigger change event of the markdown textarea to allow Vue catch the
 programmatic changes.

---
 app/assets/javascripts/dropzone_input.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/dropzone_input.js b/app/assets/javascripts/dropzone_input.js
index 1cba65d17cd..bd45da8c422 100644
--- a/app/assets/javascripts/dropzone_input.js
+++ b/app/assets/javascripts/dropzone_input.js
@@ -237,9 +237,12 @@ window.DropzoneInput = (function() {
     };
 
     const insertToTextArea = function(filename, url) {
-      return $(child).val(function(index, val) {
+      const $child = $(child);
+      $child.val(function(index, val) {
         return val.replace(`{{${filename}}}`, url);
       });
+
+      $child.trigger('change');
     };
 
     const appendToTextArea = function(url) {
-- 
cgit v1.2.3


From fe96bd416c0556cac5da7a178264340798a74fbf Mon Sep 17 00:00:00 2001
From: "Luke \"Jared\" Bennett" <lbennett@gitlab.com>
Date: Fri, 29 Sep 2017 18:31:09 +0100
Subject: Fix md-area top border-radius with issue issuable-note-warning

---
 app/assets/javascripts/notes/components/issue_comment_form.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/notes/components/issue_comment_form.vue b/app/assets/javascripts/notes/components/issue_comment_form.vue
index e37bbe164fe..3682c95f6eb 100644
--- a/app/assets/javascripts/notes/components/issue_comment_form.vue
+++ b/app/assets/javascripts/notes/components/issue_comment_form.vue
@@ -263,13 +263,14 @@
               class="new-note js-quick-submit common-note-form gfm-form js-main-target-form"
             >
 
+              <div class="error-alert"></div>
+
               <issue-warning
                 v-if="hasIssueWarning(getIssueData)"
                 :is-locked="isIssueLocked(getIssueData)"
                 :is-confidential="isIssueConfidential(getIssueData)"
               />
 
-              <div class="error-alert"></div>
               <markdown-field
                 :markdown-preview-path="markdownPreviewPath"
                 :markdown-docs-path="markdownDocsPath"
-- 
cgit v1.2.3


From 3265ccfc5a6a5c9a853956f84554f470286bb5ed Mon Sep 17 00:00:00 2001
From: Eric Eastwood <contact@ericeastwood.com>
Date: Wed, 20 Sep 2017 15:35:49 -0500
Subject: Add external link FE for online artifacts

FE for https://gitlab.com/gitlab-org/gitlab-ce/issues/34102
---
 app/assets/javascripts/build_artifacts.js       | 24 +++++++++++++++++++++++-
 app/assets/javascripts/lib/utils/url_utility.js | 20 ++++++++++++++++++--
 2 files changed, 41 insertions(+), 3 deletions(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/build_artifacts.js b/app/assets/javascripts/build_artifacts.js
index bd479700fd3..19388f1f9ae 100644
--- a/app/assets/javascripts/build_artifacts.js
+++ b/app/assets/javascripts/build_artifacts.js
@@ -1,9 +1,12 @@
 /* eslint-disable func-names, space-before-function-paren, wrap-iife, prefer-arrow-callback, no-unused-vars, no-return-assign, max-len */
+import { visitUrl } from './lib/utils/url_utility';
+import { convertPermissionToBoolean } from './lib/utils/common_utils';
 
 window.BuildArtifacts = (function() {
   function BuildArtifacts() {
     this.disablePropagation();
     this.setupEntryClick();
+    this.setupTooltips();
   }
 
   BuildArtifacts.prototype.disablePropagation = function() {
@@ -17,9 +20,28 @@ window.BuildArtifacts = (function() {
 
   BuildArtifacts.prototype.setupEntryClick = function() {
     return $('.tree-holder').on('click', 'tr[data-link]', function(e) {
-      return window.location = this.dataset.link;
+      visitUrl(this.dataset.link, convertPermissionToBoolean(this.dataset.externalLink));
     });
   };
 
+  BuildArtifacts.prototype.setupTooltips = function() {
+    $('.js-artifact-tree-tooltip').tooltip({
+      placement: 'bottom',
+      // Stop the tooltip from hiding when we stop hovering the element directly
+      // We handle all the showing/hiding below
+      trigger: 'manual',
+    });
+
+    // We want the tooltip to show if you hover anywhere on the row
+    // But be placed below and in the middle of the file name
+    $('.js-artifact-tree-row')
+      .on('mouseenter', (e) => {
+        $(e.currentTarget).find('.js-artifact-tree-tooltip').tooltip('show');
+      })
+      .on('mouseleave', (e) => {
+        $(e.currentTarget).find('.js-artifact-tree-tooltip').tooltip('hide');
+      });
+  };
+
   return BuildArtifacts;
 })();
diff --git a/app/assets/javascripts/lib/utils/url_utility.js b/app/assets/javascripts/lib/utils/url_utility.js
index 3328ff9cc23..6512f7c8a94 100644
--- a/app/assets/javascripts/lib/utils/url_utility.js
+++ b/app/assets/javascripts/lib/utils/url_utility.js
@@ -1,4 +1,5 @@
 /* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, no-param-reassign, no-cond-assign, one-var, one-var-declaration-per-line, no-void, guard-for-in, no-restricted-syntax, prefer-template, quotes, max-len */
+
 var base;
 var w = window;
 if (w.gl == null) {
@@ -86,6 +87,21 @@ w.gl.utils.getLocationHash = function(url) {
 
 w.gl.utils.refreshCurrentPage = () => gl.utils.visitUrl(document.location.href);
 
-w.gl.utils.visitUrl = (url) => {
-  document.location.href = url;
+// eslint-disable-next-line import/prefer-default-export
+export function visitUrl(url, external = false) {
+  if (external) {
+    // Simulate `target="blank" ref="noopener noreferrer"`
+    // See https://mathiasbynens.github.io/rel-noopener/
+    const otherWindow = window.open();
+    otherWindow.opener = null;
+    otherWindow.location = url;
+  } else {
+    document.location.href = url;
+  }
+}
+
+window.gl = window.gl || {};
+window.gl.utils = {
+  ...(window.gl.utils || {}),
+  visitUrl,
 };
-- 
cgit v1.2.3


From 00ee7a9f27d3d00936127957eb3c99f803d3e880 Mon Sep 17 00:00:00 2001
From: "Luke \"Jared\" Bennett" <lbennett@gitlab.com>
Date: Sun, 1 Oct 2017 16:45:48 +0100
Subject: FE review changes app code

---
 app/assets/javascripts/diff.js                     |  2 +-
 .../notes/components/issue_comment_form.vue        |  4 ++--
 .../components/issue_discussion_locked_widget.vue  |  4 ++--
 .../components/confidential/edit_form_buttons.vue  |  4 ++--
 .../sidebar/components/lock/lock_issue_sidebar.vue | 22 +++++++++++++++++-----
 app/assets/javascripts/sidebar/sidebar_bundle.js   | 22 +++++++++++-----------
 .../vue_shared/components/issue/issue_warning.vue  |  2 ++
 .../javascripts/vue_shared/mixins/issuable.js      |  4 +++-
 8 files changed, 40 insertions(+), 24 deletions(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/diff.js b/app/assets/javascripts/diff.js
index 8959365a5c9..c49f83e7089 100644
--- a/app/assets/javascripts/diff.js
+++ b/app/assets/javascripts/diff.js
@@ -18,7 +18,7 @@ class Diff {
     });
 
     const tab = document.getElementById('diffs');
-    if (!tab || (tab && !Object.hasOwnProperty.call(tab.dataset, 'isLocked'))) FilesCommentButton.init($diffFile);
+    if (!tab || (tab && tab.dataset && tab.dataset.isLocked !== '')) FilesCommentButton.init($diffFile);
 
     $diffFile.each((index, file) => new gl.ImageFile(file));
 
diff --git a/app/assets/javascripts/notes/components/issue_comment_form.vue b/app/assets/javascripts/notes/components/issue_comment_form.vue
index 3682c95f6eb..715027c6fbc 100644
--- a/app/assets/javascripts/notes/components/issue_comment_form.vue
+++ b/app/assets/javascripts/notes/components/issue_comment_form.vue
@@ -58,7 +58,7 @@
       isIssueOpen() {
         return this.issueState === constants.OPENED || this.issueState === constants.REOPENED;
       },
-      canCreate() {
+      canCreateNote() {
         return this.getIssueData.current_user.can_create_note;
       },
       issueActionButtonTitle() {
@@ -241,7 +241,7 @@
 <template>
   <div>
     <issue-note-signed-out-widget v-if="!isLoggedIn" />
-    <issue-discussion-locked-widget v-else-if="!canCreate" />
+    <issue-discussion-locked-widget v-else-if="!canCreateNote" />
     <ul
       v-else
       class="notes notes-form timeline">
diff --git a/app/assets/javascripts/notes/components/issue_discussion_locked_widget.vue b/app/assets/javascripts/notes/components/issue_discussion_locked_widget.vue
index f0429b82aaa..e73ec2aaf71 100644
--- a/app/assets/javascripts/notes/components/issue_discussion_locked_widget.vue
+++ b/app/assets/javascripts/notes/components/issue_discussion_locked_widget.vue
@@ -1,7 +1,7 @@
 <script>
   export default {
     computed: {
-      icon() {
+      lockIcon() {
         return gl.utils.spriteIcon('lock');
       },
     },
@@ -12,7 +12,7 @@
 <template>
   <div class="disabled-comment text-center">
     <span class="issuable-note-warning">
-      <span class="icon" v-html="icon"></span>
+      <span class="icon" v-html="lockIcon"></span>
       <span>This issue is locked. Only <b>project members</b> can comment.</span>
      </span>
   </div>
diff --git a/app/assets/javascripts/sidebar/components/confidential/edit_form_buttons.vue b/app/assets/javascripts/sidebar/components/confidential/edit_form_buttons.vue
index 143f8ae7bc1..7ed0619ee6b 100644
--- a/app/assets/javascripts/sidebar/components/confidential/edit_form_buttons.vue
+++ b/app/assets/javascripts/sidebar/components/confidential/edit_form_buttons.vue
@@ -15,7 +15,7 @@ export default {
     },
   },
   computed: {
-    buttonText() {
+    toggleButtonText() {
       return this.isConfidential ? 'Turn Off' : 'Turn On';
     },
     updateConfidentialBool() {
@@ -39,7 +39,7 @@ export default {
       class="btn btn-close"
       @click.prevent="updateConfidentialAttribute(updateConfidentialBool)"
     >
-      {{ buttonText }}
+      {{ toggleButtonText }}
     </button>
   </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 9021d17dddf..cc214039bdd 100644
--- a/app/assets/javascripts/sidebar/components/lock/lock_issue_sidebar.vue
+++ b/app/assets/javascripts/sidebar/components/lock/lock_issue_sidebar.vue
@@ -86,7 +86,7 @@ export default {
     </div>
 
     <div class="value sidebar-item-value hide-collapsed">
-      <editForm
+      <edit-form
         v-if="isLockDialogOpen"
         :toggle-form="toggleForm"
         :is-locked="isLocked"
@@ -94,13 +94,25 @@ export default {
         :issuable-type="issuableType"
       />
 
-      <div v-if="isLocked" class="value sidebar-item-value">
-        <i aria-hidden="true" class="fa fa-lock sidebar-item-icon is-active"></i>
+      <div
+        v-if="isLocked"
+        class="value sidebar-item-value"
+      >
+        <i
+          aria-hidden="true"
+          class="fa fa-lock sidebar-item-icon is-active"
+        ></i>
         {{ __('Locked') }}
       </div>
 
-      <div v-else class="no-value sidebar-item-value hide-collapsed">
-        <i aria-hidden="true" class="fa fa-unlock sidebar-item-icon"></i>
+      <div
+        v-else
+        class="no-value sidebar-item-value hide-collapsed"
+      >
+        <i
+          aria-hidden="true"
+          class="fa fa-unlock sidebar-item-icon"
+        ></i>
         {{ __('Unlocked') }}
       </div>
     </div>
diff --git a/app/assets/javascripts/sidebar/sidebar_bundle.js b/app/assets/javascripts/sidebar/sidebar_bundle.js
index 645e65d7b16..09b9d75c02d 100644
--- a/app/assets/javascripts/sidebar/sidebar_bundle.js
+++ b/app/assets/javascripts/sidebar/sidebar_bundle.js
@@ -1,9 +1,9 @@
 import Vue from 'vue';
-import sidebarTimeTracking from './components/time_tracking/sidebar_time_tracking';
-import sidebarAssignees from './components/assignees/sidebar_assignees';
-import confidential from './components/confidential/confidential_issue_sidebar.vue';
+import SidebarTimeTracking from './components/time_tracking/sidebar_time_tracking';
+import SidebarAssignees from './components/assignees/sidebar_assignees';
+import ConfidentialIssueSidebar from './components/confidential/confidential_issue_sidebar.vue';
 import SidebarMoveIssue from './lib/sidebar_move_issue';
-import lockBlock from './components/lock/lock_issue_sidebar.vue';
+import LockIssueSidebar from './components/lock/lock_issue_sidebar.vue';
 import Translate from '../vue_shared/translate';
 
 import Mediator from './sidebar_mediator';
@@ -11,14 +11,14 @@ import Mediator from './sidebar_mediator';
 Vue.use(Translate);
 
 function mountConfidentialComponent(mediator) {
-  const el = document.querySelector('#js-confidential-entry-point');
+  const el = document.getElementById('js-confidential-entry-point');
 
   if (!el) return;
 
   const dataNode = document.getElementById('js-confidential-issue-data');
   const initialData = JSON.parse(dataNode.innerHTML);
 
-  const ConfidentialComp = Vue.extend(confidential);
+  const ConfidentialComp = Vue.extend(ConfidentialIssueSidebar);
 
   new ConfidentialComp({
     propsData: {
@@ -30,14 +30,14 @@ function mountConfidentialComponent(mediator) {
 }
 
 function mountLockComponent(mediator) {
-  const el = document.querySelector('#js-lock-entry-point');
+  const el = document.getElementById('js-lock-entry-point');
 
   if (!el) return;
 
   const dataNode = document.getElementById('js-lock-issue-data');
   const initialData = JSON.parse(dataNode.innerHTML);
 
-  const LockComp = Vue.extend(lockBlock);
+  const LockComp = Vue.extend(LockIssueSidebar);
 
   new LockComp({
     propsData: {
@@ -54,11 +54,11 @@ function domContentLoaded() {
   const mediator = new Mediator(sidebarOptions);
   mediator.fetch();
 
-  const sidebarAssigneesEl = document.querySelector('#js-vue-sidebar-assignees');
+  const sidebarAssigneesEl = document.getElementById('js-vue-sidebar-assignees');
   // Only create the sidebarAssignees vue app if it is found in the DOM
   // We currently do not use sidebarAssignees for the MR page
   if (sidebarAssigneesEl) {
-    new Vue(sidebarAssignees).$mount(sidebarAssigneesEl);
+    new Vue(SidebarAssignees).$mount(sidebarAssigneesEl);
   }
 
   mountConfidentialComponent(mediator);
@@ -70,7 +70,7 @@ function domContentLoaded() {
     $('.js-move-issue-confirmation-button'),
   ).init();
 
-  new Vue(sidebarTimeTracking).$mount('#issuable-time-tracker');
+  new Vue(SidebarTimeTracking).$mount('#issuable-time-tracker');
 }
 
 document.addEventListener('DOMContentLoaded', domContentLoaded);
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 0f11b6e2223..7a8be8c42da 100644
--- a/app/assets/javascripts/vue_shared/components/issue/issue_warning.vue
+++ b/app/assets/javascripts/vue_shared/components/issue/issue_warning.vue
@@ -4,11 +4,13 @@
       isLocked: {
         type: Boolean,
         default: false,
+        required: false,
       },
 
       isConfidential: {
         type: Boolean,
         default: false,
+        required: false,
       },
     },
 
diff --git a/app/assets/javascripts/vue_shared/mixins/issuable.js b/app/assets/javascripts/vue_shared/mixins/issuable.js
index 831102c0cac..263361587e0 100644
--- a/app/assets/javascripts/vue_shared/mixins/issuable.js
+++ b/app/assets/javascripts/vue_shared/mixins/issuable.js
@@ -1,7 +1,9 @@
 export default {
   methods: {
     issuableDisplayName(issuableType) {
-      return issuableType.replace(/_/, ' ');
+      const displayName = issuableType.replace(/_/, ' ');
+
+      return this.__ ? this.__(displayName) : displayName;
     },
   },
 };
-- 
cgit v1.2.3


From 59a6f15cd22621826116446d5f28753c973ba2d1 Mon Sep 17 00:00:00 2001
From: "Luke \"Jared\" Bennett" <lbennett@gitlab.com>
Date: Mon, 2 Oct 2017 10:34:40 +0100
Subject: Further review changes

---
 app/assets/javascripts/notes/components/issue_comment_form.vue | 7 +++----
 app/assets/javascripts/notes/components/issue_note_form.vue    | 6 +++---
 app/assets/javascripts/notes/mixins/issuable_state.js          | 8 ++++----
 3 files changed, 10 insertions(+), 11 deletions(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/notes/components/issue_comment_form.vue b/app/assets/javascripts/notes/components/issue_comment_form.vue
index 715027c6fbc..2c05817ac88 100644
--- a/app/assets/javascripts/notes/components/issue_comment_form.vue
+++ b/app/assets/javascripts/notes/components/issue_comment_form.vue
@@ -266,9 +266,9 @@
               <div class="error-alert"></div>
 
               <issue-warning
-                v-if="hasIssueWarning(getIssueData)"
-                :is-locked="isIssueLocked(getIssueData)"
-                :is-confidential="isIssueConfidential(getIssueData)"
+                v-if="hasWarning(getIssueData)"
+                :is-locked="isLocked(getIssueData)"
+                :is-confidential="isConfidential(getIssueData)"
               />
 
               <markdown-field
@@ -276,7 +276,6 @@
                 :markdown-docs-path="markdownDocsPath"
                 :quick-actions-docs-path="quickActionsDocsPath"
                 :add-spacing-classes="false"
-                :is-confidential-issue="isIssueConfidential(getIssueData)"
                 ref="markdownField">
                 <textarea
                   id="note-body"
diff --git a/app/assets/javascripts/notes/components/issue_note_form.vue b/app/assets/javascripts/notes/components/issue_note_form.vue
index f78289e68aa..e2539d6b89d 100644
--- a/app/assets/javascripts/notes/components/issue_note_form.vue
+++ b/app/assets/javascripts/notes/components/issue_note_form.vue
@@ -129,9 +129,9 @@
       class="edit-note common-note-form js-quick-submit gfm-form">
 
       <issue-warning
-        v-if="hasIssueWarning(getIssueData)"
-        :is-locked="isIssueLocked(getIssueData)"
-        :is-confidential="isIssueConfidential(getIssueData)"
+        v-if="hasWarning(getIssueData)"
+        :is-locked="isLocked(getIssueData)"
+        :is-confidential="isConfidential(getIssueData)"
       />
 
       <markdown-field
diff --git a/app/assets/javascripts/notes/mixins/issuable_state.js b/app/assets/javascripts/notes/mixins/issuable_state.js
index a0b3d81d63b..97f3ea0d5de 100644
--- a/app/assets/javascripts/notes/mixins/issuable_state.js
+++ b/app/assets/javascripts/notes/mixins/issuable_state.js
@@ -1,15 +1,15 @@
 export default {
   methods: {
-    isIssueConfidential(issue) {
+    isConfidential(issue) {
       return !!issue.confidential;
     },
 
-    isIssueLocked(issue) {
+    isLocked(issue) {
       return !!issue.discussion_locked;
     },
 
-    hasIssueWarning(issue) {
-      return this.isIssueConfidential(issue) || this.isIssueLocked(issue);
+    hasWarning(issue) {
+      return this.isConfidential(issue) || this.isLocked(issue);
     },
   },
 };
-- 
cgit v1.2.3


From cddab09bc69d291924164b1b83fdf7cdbf422dfc Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Mon, 2 Oct 2017 12:41:46 +0100
Subject: Starts edit form

---
 app/assets/javascripts/clusters.js | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 app/assets/javascripts/clusters.js

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/clusters.js b/app/assets/javascripts/clusters.js
new file mode 100644
index 00000000000..64bf22f48e2
--- /dev/null
+++ b/app/assets/javascripts/clusters.js
@@ -0,0 +1,11 @@
+document.addEventListener('DOMContentLoaded', () => {
+
+  const toggleButton = document.querySelector('.js-toggle-cluster');
+  // disable in case of no permissions
+  toggleButton.addEventListener(() => {
+
+    // update text
+  });
+
+  // poll the status
+});
-- 
cgit v1.2.3


From fd44ac2b14baeafb1a9ea5c761671213dc4cf613 Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Mon, 2 Oct 2017 16:53:26 +0100
Subject: Updates sidebar

---
 app/assets/javascripts/clusters.js | 11 -----------
 1 file changed, 11 deletions(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/clusters.js b/app/assets/javascripts/clusters.js
index 64bf22f48e2..e69de29bb2d 100644
--- a/app/assets/javascripts/clusters.js
+++ b/app/assets/javascripts/clusters.js
@@ -1,11 +0,0 @@
-document.addEventListener('DOMContentLoaded', () => {
-
-  const toggleButton = document.querySelector('.js-toggle-cluster');
-  // disable in case of no permissions
-  toggleButton.addEventListener(() => {
-
-    // update text
-  });
-
-  // poll the status
-});
-- 
cgit v1.2.3


From fd6776214abb2603ce2fb5dfb078229f0a0195e5 Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Mon, 2 Oct 2017 20:49:04 +0100
Subject: Adds toggle button Adds polling function

---
 app/assets/javascripts/clusters.js   | 136 +++++++++++++++++++++++++++++++++++
 app/assets/javascripts/dispatcher.js |   5 ++
 2 files changed, 141 insertions(+)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/clusters.js b/app/assets/javascripts/clusters.js
index e69de29bb2d..63ff676486b 100644
--- a/app/assets/javascripts/clusters.js
+++ b/app/assets/javascripts/clusters.js
@@ -0,0 +1,136 @@
+/* globals Flash */
+import Visibility from 'visibilityjs';
+import axios from 'axios';
+import Poll from './lib/utils/poll';
+import { s__ } from './locale';
+import './flash';
+
+class ClusterService {
+  constructor(options = {}) {
+    this.options = options;
+  }
+
+  fetchData() {
+    return axios.get(this.options.endpoints.checkStatus);
+  }
+
+  updateData(value) {
+    return axios.put(this.options.endpoints.editPath,
+      {
+        cluster: {
+          enabled: value,
+        },
+      },
+    );
+  }
+}
+/**
+ * Handles visibily toggle
+ * Polls the state
+ */
+export default class ClusterEdit {
+  constructor() {
+    const dataset = document.querySelector('.js-edit-cluster-form').dataset;
+
+    this.state = {
+      endpoints: {
+        checkStatus: dataset.checkStatus,
+        editPath: dataset.editPath,
+      },
+      canUpdate: dataset.canUpdate,
+      clusterStatus: dataset.clusterStatus,
+    };
+
+    this.service = new ClusterService({ endpoints: this.state.endpoints });
+    this.toggleButton = document.querySelector('.js-toggle-cluster');
+    this.errorContainer = document.querySelector('.js-cluster-error');
+    this.successContainer = document.querySelector('.js-cluster-success');
+    this.creatingContainer = document.querySelector('.js-cluster-creating');
+    this.bindEvents();
+  }
+
+  bindEvents() {
+    if (!this.canUpdate) {
+      this.disableToggle();
+    }
+
+    if (this.clusterStatus) {
+      // update to enable or disabled!
+    }
+
+    this.toggleButton.addEventListener('click', this.toggle.bind(this));
+
+    document.querySelector('.js-edit-cluster-button').addEventListener('click', this.updateData.bind(this));
+
+    this.initPoling();
+  }
+
+  toggle() {
+    this.toggleButton.classList.toggle('checked');
+    this.toggleStatus = this.toggleButton.classList.contains('checked').toString();
+  }
+
+  updateData() {
+    this.service.updateData(this.state.toggleStatus);
+  }
+
+  disableToggle(disable = true) {
+    this.toggleButton.classList.toggle('disabled', disable);
+    this.toggleButton.setAttribute('disabled', disable);
+  }
+
+  initPoling() {
+    if (this.state.clusterStatus === 'created') return;
+
+    this.poll = new Poll({
+      resource: this.service,
+      method: 'fetchData',
+      successCallback: (data) => {
+        const { status } = data.data;
+        this.updateContainer(status);
+      },
+      errorCallback: () => {
+        this.updateContainer('error');
+        Flash(s__('ClusterIntegration|Something went wrong on our end.'));
+      },
+    });
+
+    if (!Visibility.hidden()) {
+      this.poll.makeRequest();
+    } else {
+      this.service.fetchData();
+    }
+
+    Visibility.change(() => {
+      if (!Visibility.hidden()) {
+        this.poll.restart();
+      } else {
+        this.poll.stop();
+      }
+    });
+  }
+
+  hideAll() {
+    this.errorContainer.classList.add('hidden');
+    this.successContainer.classList.add('hidden');
+    this.creatingContainer.classList.add('hidden');
+  }
+
+  updateContainer(status) {
+    this.hideAll();
+    switch (status) {
+      case 'created':
+        this.successContainer.classList.remove('hidden');
+        break;
+      case 'error':
+        this.errorContainer.classList.remove('hidden');
+        break;
+      case 'creating':
+        this.creatingContainer.classList.add('hidden');
+        break;
+      default:
+        this.hideAll();
+    }
+  }
+
+}
diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js
index 31214818496..7131889a0a0 100644
--- a/app/assets/javascripts/dispatcher.js
+++ b/app/assets/javascripts/dispatcher.js
@@ -524,6 +524,11 @@ import { ajaxGet, convertPermissionToBoolean } from './lib/utils/common_utils';
         case 'admin:impersonation_tokens:index':
           new gl.DueDateSelectors();
           break;
+        case 'projects:clusters:edit':
+          import(/* webpackChunkName: "clusters" */ './clusters')
+            .then(cluster => new cluster.default()) // eslint-disable-line new-cap
+            .catch(() => {});
+          break;
       }
       switch (path[0]) {
         case 'sessions':
-- 
cgit v1.2.3


From bca86c858b361f3b5a19abcfc03972c95f4b2d2a Mon Sep 17 00:00:00 2001
From: Eric Eastwood <contact@ericeastwood.com>
Date: Tue, 3 Oct 2017 00:33:13 -0500
Subject: Add test for external HTML artifact

---
 app/assets/javascripts/lib/utils/url_utility.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/lib/utils/url_utility.js b/app/assets/javascripts/lib/utils/url_utility.js
index 6512f7c8a94..78c7a094127 100644
--- a/app/assets/javascripts/lib/utils/url_utility.js
+++ b/app/assets/javascripts/lib/utils/url_utility.js
@@ -90,7 +90,7 @@ w.gl.utils.refreshCurrentPage = () => gl.utils.visitUrl(document.location.href);
 // eslint-disable-next-line import/prefer-default-export
 export function visitUrl(url, external = false) {
   if (external) {
-    // Simulate `target="blank" ref="noopener noreferrer"`
+    // Simulate `target="blank" rel="noopener noreferrer"`
     // See https://mathiasbynens.github.io/rel-noopener/
     const otherWindow = window.open();
     otherWindow.opener = null;
-- 
cgit v1.2.3


From 97f1369990e3dd33e7f0632cfb0b7cffc64c3f5e Mon Sep 17 00:00:00 2001
From: "Luke \"Jared\" Bennett" <lbennett@gitlab.com>
Date: Tue, 3 Oct 2017 16:47:52 +0100
Subject: Remove interpolated translation strings

---
 .../javascripts/sidebar/components/lock/edit_form.vue       | 13 +++++++------
 .../sidebar/components/lock/lock_issue_sidebar.vue          |  2 +-
 2 files changed, 8 insertions(+), 7 deletions(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/sidebar/components/lock/edit_form.vue b/app/assets/javascripts/sidebar/components/lock/edit_form.vue
index b79d357d4bb..0fa19ef7217 100644
--- a/app/assets/javascripts/sidebar/components/lock/edit_form.vue
+++ b/app/assets/javascripts/sidebar/components/lock/edit_form.vue
@@ -39,15 +39,16 @@ export default {
   <div class="dropdown open">
     <div class="dropdown-menu sidebar-item-warning-message">
       <p class="text" v-if="isLocked">
-        {{ __(`Unlock this ${issuableDisplayName(issuableType)}?`) }}
-        <strong>{{ __('Everyone') }}</strong>
-        {{ __('will be able to comment.') }}
+        Unlock this {{ issuableDisplayName(issuableType) }}?
+        <strong>Everyone</strong>
+        will be able to comment.
       </p>
 
       <p class="text" v-else>
-        {{ __(`Lock this ${issuableDisplayName(issuableType)}? Only`) }}
-        <strong>{{ __('project members') }}</strong>
-        {{ __('will be able to comment.') }}
+        Lock this {{ issuableDisplayName(issuableType) }}?
+        Only
+        <strong>project members</strong>
+        will be able to comment
       </p>
 
       <edit-form-buttons
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 cc214039bdd..c4b2900e020 100644
--- a/app/assets/javascripts/sidebar/components/lock/lock_issue_sidebar.vue
+++ b/app/assets/javascripts/sidebar/components/lock/lock_issue_sidebar.vue
@@ -74,7 +74,7 @@ export default {
     </div>
 
     <div class="title hide-collapsed">
-      {{ __(`Lock ${issuableDisplayName(issuableType)}`) }}
+      Lock {{issuableDisplayName(issuableType) }}
       <button
         v-if="isEditable"
         class="pull-right lock-edit btn btn-blank"
-- 
cgit v1.2.3


From b3c9f8c7248574154d2c04c1756d534672d6063f Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Tue, 3 Oct 2017 18:23:25 +0100
Subject: Adjust to route change Adjust toggle status Add confirmation box Adds
 permissions checks

---
 app/assets/javascripts/clusters.js   | 48 +++++++++++++++++-------------------
 app/assets/javascripts/dispatcher.js |  2 +-
 2 files changed, 24 insertions(+), 26 deletions(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/clusters.js b/app/assets/javascripts/clusters.js
index 63ff676486b..81daa97a938 100644
--- a/app/assets/javascripts/clusters.js
+++ b/app/assets/javascripts/clusters.js
@@ -4,6 +4,7 @@ import axios from 'axios';
 import Poll from './lib/utils/poll';
 import { s__ } from './locale';
 import './flash';
+import { convertPermissionToBoolean } from './lib/utils/common_utils';
 
 class ClusterService {
   constructor(options = {}) {
@@ -25,8 +26,16 @@ class ClusterService {
   }
 }
 /**
- * Handles visibily toggle
- * Polls the state
+ * Cluster page has 2 separate parts:
+ * - Update form with toggle button
+ * -- Check initial state and set the toggle button
+ * -- Listen to changes
+ * -- Check permissions in order to disable
+ * -- Update cluster based on toggle status
+ *
+ * - Polling status while creating or scheduled
+ * -- Update status area with the response result
+ *
  */
 export default class ClusterEdit {
   constructor() {
@@ -37,8 +46,9 @@ export default class ClusterEdit {
         checkStatus: dataset.checkStatus,
         editPath: dataset.editPath,
       },
-      canUpdate: dataset.canUpdate,
+      canUpdate: convertPermissionToBoolean(dataset.canUpdate),
       clusterStatus: dataset.clusterStatus,
+      toggleStatus: dataset.toggleStatus,
     };
 
     this.service = new ClusterService({ endpoints: this.state.endpoints });
@@ -46,42 +56,29 @@ export default class ClusterEdit {
     this.errorContainer = document.querySelector('.js-cluster-error');
     this.successContainer = document.querySelector('.js-cluster-success');
     this.creatingContainer = document.querySelector('.js-cluster-creating');
-    this.bindEvents();
-  }
 
-  bindEvents() {
-    if (!this.canUpdate) {
-      this.disableToggle();
-    }
+    this.initEditForm();
 
-    if (this.clusterStatus) {
-      // update to enable or disabled!
+    if (this.clusterStatus === 'scheduled' || this.clusterStatus === 'creating') {
+      this.initPoling();
     }
+  }
 
+  initEditForm() {
     this.toggleButton.addEventListener('click', this.toggle.bind(this));
-
     document.querySelector('.js-edit-cluster-button').addEventListener('click', this.updateData.bind(this));
-
-    this.initPoling();
   }
 
   toggle() {
     this.toggleButton.classList.toggle('checked');
-    this.toggleStatus = this.toggleButton.classList.contains('checked').toString();
+    this.state.toggleStatus = this.toggleButton.classList.contains('checked').toString();
   }
 
   updateData() {
     this.service.updateData(this.state.toggleStatus);
   }
 
-  disableToggle(disable = true) {
-    this.toggleButton.classList.toggle('disabled', disable);
-    this.toggleButton.setAttribute('disabled', disable);
-  }
-
   initPoling() {
-    if (this.state.clusterStatus === 'created') return;
-
     this.poll = new Poll({
       resource: this.service,
       method: 'fetchData',
@@ -89,8 +86,8 @@ export default class ClusterEdit {
         const { status } = data.data;
         this.updateContainer(status);
       },
-      errorCallback: () => {
-        this.updateContainer('error');
+      errorCallback: (error) => {
+        this.updateContainer('error', error);
         Flash(s__('ClusterIntegration|Something went wrong on our end.'));
       },
     });
@@ -116,7 +113,7 @@ export default class ClusterEdit {
     this.creatingContainer.classList.add('hidden');
   }
 
-  updateContainer(status) {
+  updateContainer(status, error) {
     this.hideAll();
     switch (status) {
       case 'created':
@@ -124,6 +121,7 @@ export default class ClusterEdit {
         break;
       case 'error':
         this.errorContainer.classList.remove('hidden');
+        this.errorContainer.querySelector('.js-error-reason').textContent = error.status_reason;
         break;
       case 'creating':
         this.creatingContainer.classList.add('hidden');
diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js
index 7131889a0a0..29f9f9710ae 100644
--- a/app/assets/javascripts/dispatcher.js
+++ b/app/assets/javascripts/dispatcher.js
@@ -524,7 +524,7 @@ import { ajaxGet, convertPermissionToBoolean } from './lib/utils/common_utils';
         case 'admin:impersonation_tokens:index':
           new gl.DueDateSelectors();
           break;
-        case 'projects:clusters:edit':
+        case 'projects:clusters:show':
           import(/* webpackChunkName: "clusters" */ './clusters')
             .then(cluster => new cluster.default()) // eslint-disable-line new-cap
             .catch(() => {});
-- 
cgit v1.2.3


From 5a2b43fcc6490847fae39a1dce38ce13d5860da3 Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Wed, 4 Oct 2017 12:48:34 +0100
Subject: Adjustments to polling & forms

---
 app/assets/javascripts/clusters.js | 72 +++++++++++++++-----------------------
 1 file changed, 28 insertions(+), 44 deletions(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/clusters.js b/app/assets/javascripts/clusters.js
index 81daa97a938..5a381a5322a 100644
--- a/app/assets/javascripts/clusters.js
+++ b/app/assets/javascripts/clusters.js
@@ -4,74 +4,58 @@ import axios from 'axios';
 import Poll from './lib/utils/poll';
 import { s__ } from './locale';
 import './flash';
-import { convertPermissionToBoolean } from './lib/utils/common_utils';
 
-class ClusterService {
-  constructor(options = {}) {
-    this.options = options;
-  }
-
-  fetchData() {
-    return axios.get(this.options.endpoints.checkStatus);
-  }
-
-  updateData(value) {
-    return axios.put(this.options.endpoints.editPath,
-      {
-        cluster: {
-          enabled: value,
-        },
-      },
-    );
-  }
-}
 /**
  * Cluster page has 2 separate parts:
- * - Update form with toggle button
- * -- Check initial state and set the toggle button
- * -- Listen to changes
- * -- Check permissions in order to disable
- * -- Update cluster based on toggle status
+ *   Toggle button
  *
  * - Polling status while creating or scheduled
  * -- Update status area with the response result
  *
  */
+
+class ClusterService {
+  constructor(options = {}) {
+    this.options = options;
+  }
+  fetchData() {
+    return axios.get(this.options.endpoint);
+  }
+}
+
 export default class ClusterEdit {
   constructor() {
     const dataset = document.querySelector('.js-edit-cluster-form').dataset;
 
     this.state = {
-      endpoints: {
-        checkStatus: dataset.checkStatus,
-        editPath: dataset.editPath,
-      },
-      canUpdate: convertPermissionToBoolean(dataset.canUpdate),
+      statusPath: dataset.statusPath,
       clusterStatus: dataset.clusterStatus,
+      clusterStatusReason: dataset.clusterStatusReason,
       toggleStatus: dataset.toggleStatus,
     };
 
-    this.service = new ClusterService({ endpoints: this.state.endpoints });
+    this.service = new ClusterService({ endpoint: this.state.statusPath });
     this.toggleButton = document.querySelector('.js-toggle-cluster');
+    this.toggleInput = document.querySelector('.js-toggle-input');
     this.errorContainer = document.querySelector('.js-cluster-error');
     this.successContainer = document.querySelector('.js-cluster-success');
     this.creatingContainer = document.querySelector('.js-cluster-creating');
 
-    this.initEditForm();
+    this.toggleButton.addEventListener('click', this.toggle.bind(this));
 
-    if (this.clusterStatus === 'scheduled' || this.clusterStatus === 'creating') {
-      this.initPoling();
+    if (this.state.clusterStatus !== 'created') {
+      this.updateContainer(this.state.clusterStatus, this.state.clusterStatusReason);
     }
-  }
 
-  initEditForm() {
-    this.toggleButton.addEventListener('click', this.toggle.bind(this));
-    document.querySelector('.js-edit-cluster-button').addEventListener('click', this.updateData.bind(this));
+    if (this.state.statusPath) {
+      this.initPoling();
+    }
   }
 
   toggle() {
     this.toggleButton.classList.toggle('checked');
     this.state.toggleStatus = this.toggleButton.classList.contains('checked').toString();
+    this.toggleInput.setAttribute('value', this.state.toggleStatus);
   }
 
   updateData() {
@@ -83,11 +67,10 @@ export default class ClusterEdit {
       resource: this.service,
       method: 'fetchData',
       successCallback: (data) => {
-        const { status } = data.data;
-        this.updateContainer(status);
+        const { status, status_reason } = data.data;
+        this.updateContainer(status, status_reason);
       },
-      errorCallback: (error) => {
-        this.updateContainer('error', error);
+      errorCallback: () => {
         Flash(s__('ClusterIntegration|Something went wrong on our end.'));
       },
     });
@@ -119,12 +102,13 @@ export default class ClusterEdit {
       case 'created':
         this.successContainer.classList.remove('hidden');
         break;
-      case 'error':
+      case 'errored':
         this.errorContainer.classList.remove('hidden');
         this.errorContainer.querySelector('.js-error-reason').textContent = error.status_reason;
         break;
+      case 'scheduled':
       case 'creating':
-        this.creatingContainer.classList.add('hidden');
+        this.creatingContainer.classList.remove('hidden');
         break;
       default:
         this.hideAll();
-- 
cgit v1.2.3


From e58c8413d47080498f4327cbcb6e08edae44aa9e Mon Sep 17 00:00:00 2001
From: Tim Zallmann <tzallmann@gitlab.com>
Date: Tue, 26 Sep 2017 14:23:01 +0200
Subject: Fixed Back Button for files + line number jumping for preview and
 editor

---
 .../javascripts/repo/components/repo_editor.vue    |  2 +-
 .../javascripts/repo/components/repo_sidebar.vue   | 27 ++++++++++++++++++----
 app/assets/javascripts/repo/helpers/repo_helper.js |  4 +++-
 app/assets/javascripts/repo/stores/repo_store.js   |  4 ++++
 4 files changed, 30 insertions(+), 7 deletions(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/repo/components/repo_editor.vue b/app/assets/javascripts/repo/components/repo_editor.vue
index 96d6a75bb61..f1acd339ad3 100644
--- a/app/assets/javascripts/repo/components/repo_editor.vue
+++ b/app/assets/javascripts/repo/components/repo_editor.vue
@@ -63,7 +63,7 @@ const RepoEditor = {
       const lineNumber = e.target.position.lineNumber;
       if (e.target.element.classList.contains('line-numbers')) {
         location.hash = `L${lineNumber}`;
-        Store.activeLine = lineNumber;
+        Store.setActiveLine(lineNumber);
 
         Helper.monacoInstance.setPosition({
           lineNumber: this.activeLine,
diff --git a/app/assets/javascripts/repo/components/repo_sidebar.vue b/app/assets/javascripts/repo/components/repo_sidebar.vue
index 1e40814b95f..535206bafe3 100644
--- a/app/assets/javascripts/repo/components/repo_sidebar.vue
+++ b/app/assets/javascripts/repo/components/repo_sidebar.vue
@@ -25,11 +25,28 @@ export default {
 
   methods: {
     addPopEventListener() {
-      window.addEventListener('popstate', () => {
-        if (location.href.indexOf('#') > -1) return;
-        this.linkClicked({
-          url: location.href,
-        });
+      window.addEventListener('popstate', (event) => {
+        const selectedFile = this.files.find(file => location.href.indexOf(file.url) > -1);
+        if (selectedFile) {
+          if (selectedFile.url !== this.activeFile.url) {
+            this.fileClicked(selectedFile);
+          }
+
+          if (location.hash.indexOf('#L') > -1) {
+            const lineNumber = Number(location.hash.substr(2));
+            if (!isNaN(lineNumber)) {
+              Store.setActiveLine(lineNumber);
+              if (Store.isPreviewView()) {
+                document.getElementById('L' + lineNumber).scrollIntoView();
+              } else {
+                Helper.monacoInstance.setPosition({
+                  lineNumber: this.activeLine,
+                  column: 1,
+                });
+              }
+            }
+          }
+        }
       });
     },
 
diff --git a/app/assets/javascripts/repo/helpers/repo_helper.js b/app/assets/javascripts/repo/helpers/repo_helper.js
index ac59a2bed23..7483f8bc305 100644
--- a/app/assets/javascripts/repo/helpers/repo_helper.js
+++ b/app/assets/javascripts/repo/helpers/repo_helper.js
@@ -254,7 +254,9 @@ const RepoHelper = {
 
     RepoHelper.key = RepoHelper.genKey();
 
-    history.pushState({ key: RepoHelper.key }, '', url);
+    if (document.location.pathname !== url) {
+      history.pushState({ key: RepoHelper.key }, '', url);
+    }
 
     if (title) {
       document.title = title;
diff --git a/app/assets/javascripts/repo/stores/repo_store.js b/app/assets/javascripts/repo/stores/repo_store.js
index 9a4fc40bc69..0d1853ff148 100644
--- a/app/assets/javascripts/repo/stores/repo_store.js
+++ b/app/assets/javascripts/repo/stores/repo_store.js
@@ -101,6 +101,10 @@ const RepoStore = {
     RepoStore.activeFileIndex = i;
   },
 
+  setActiveLine(activeLine) {
+    RepoStore.activeLine = activeLine;
+  },
+
   setActiveToRaw() {
     RepoStore.activeFile.raw = false;
     // can't get vue to listen to raw for some reason so RepoStore for now.
-- 
cgit v1.2.3


From 9196a356ae675ab97e7ed49e48c1e59105ad2a81 Mon Sep 17 00:00:00 2001
From: Tim Zallmann <tzallmann@gitlab.com>
Date: Tue, 26 Sep 2017 14:58:14 +0200
Subject: Polished Back Button for files that are not in the tree anymore

---
 app/assets/javascripts/repo/components/repo_sidebar.vue | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/repo/components/repo_sidebar.vue b/app/assets/javascripts/repo/components/repo_sidebar.vue
index 535206bafe3..702056a7e3a 100644
--- a/app/assets/javascripts/repo/components/repo_sidebar.vue
+++ b/app/assets/javascripts/repo/components/repo_sidebar.vue
@@ -26,7 +26,11 @@ export default {
   methods: {
     addPopEventListener() {
       window.addEventListener('popstate', (event) => {
-        const selectedFile = this.files.find(file => location.href.indexOf(file.url) > -1);
+        let selectedFile = this.files.find(file => {return location.pathname.indexOf(file.url) > -1});
+        if (!selectedFile) {
+          // Maybe it is not in the current tree but in the opened tabs
+          selectedFile = Store.openedFiles.find(file => {return location.pathname.indexOf(file.url) > -1});
+        }
         if (selectedFile) {
           if (selectedFile.url !== this.activeFile.url) {
             this.fileClicked(selectedFile);
@@ -46,6 +50,11 @@ export default {
               }
             }
           }
+        } else {
+          // Not opened at all lets open new tab
+          this.fileClicked({
+            url: location.href,
+          });
         }
       });
     },
-- 
cgit v1.2.3


From 45b8266bcd97c1132a5012ca4df578df4999c6ac Mon Sep 17 00:00:00 2001
From: Tim Zallmann <tzallmann@gitlab.com>
Date: Fri, 29 Sep 2017 09:07:47 +0200
Subject: Fixed Eslint Errors

---
 app/assets/javascripts/repo/components/repo_sidebar.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/repo/components/repo_sidebar.vue b/app/assets/javascripts/repo/components/repo_sidebar.vue
index 702056a7e3a..f741a8d46bc 100644
--- a/app/assets/javascripts/repo/components/repo_sidebar.vue
+++ b/app/assets/javascripts/repo/components/repo_sidebar.vue
@@ -25,11 +25,11 @@ export default {
 
   methods: {
     addPopEventListener() {
-      window.addEventListener('popstate', (event) => {
-        let selectedFile = this.files.find(file => {return location.pathname.indexOf(file.url) > -1});
+      window.addEventListener('popstate', () => {
+        let selectedFile = this.files.find(file => location.pathname.indexOf(file.url) > -1);
         if (!selectedFile) {
           // Maybe it is not in the current tree but in the opened tabs
-          selectedFile = Store.openedFiles.find(file => {return location.pathname.indexOf(file.url) > -1});
+          selectedFile = Store.openedFiles.find(file => location.pathname.indexOf(file.url) > -1);
         }
         if (selectedFile) {
           if (selectedFile.url !== this.activeFile.url) {
@@ -41,7 +41,7 @@ export default {
             if (!isNaN(lineNumber)) {
               Store.setActiveLine(lineNumber);
               if (Store.isPreviewView()) {
-                document.getElementById('L' + lineNumber).scrollIntoView();
+                document.getElementById(`L${lineNumber}`).scrollIntoView();
               } else {
                 Helper.monacoInstance.setPosition({
                   lineNumber: this.activeLine,
-- 
cgit v1.2.3


From 25186c7aee7f0c25bd3c8fbaab353742d54afdf2 Mon Sep 17 00:00:00 2001
From: Tim Zallmann <tzallmann@gitlab.com>
Date: Tue, 3 Oct 2017 11:01:36 +0200
Subject: Fixed Repo Sidebar Tests

---
 .../javascripts/repo/components/repo_sidebar.vue   | 59 +++++++++++-----------
 1 file changed, 30 insertions(+), 29 deletions(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/repo/components/repo_sidebar.vue b/app/assets/javascripts/repo/components/repo_sidebar.vue
index f741a8d46bc..9d3e20a195b 100644
--- a/app/assets/javascripts/repo/components/repo_sidebar.vue
+++ b/app/assets/javascripts/repo/components/repo_sidebar.vue
@@ -18,45 +18,46 @@ export default {
   },
 
   created() {
-    this.addPopEventListener();
+    window.addEventListener('popstate', this.checkHistory);
+  },
+  destroyed() {
+    window.removeEventListener('popstate', this.checkHistory);
   },
 
   data: () => Store,
 
   methods: {
-    addPopEventListener() {
-      window.addEventListener('popstate', () => {
-        let selectedFile = this.files.find(file => location.pathname.indexOf(file.url) > -1);
-        if (!selectedFile) {
-          // Maybe it is not in the current tree but in the opened tabs
-          selectedFile = Store.openedFiles.find(file => location.pathname.indexOf(file.url) > -1);
+    checkHistory() {
+      let selectedFile = this.files.find(file => location.pathname.indexOf(file.url) > -1);
+      if (!selectedFile) {
+        // Maybe it is not in the current tree but in the opened tabs
+        selectedFile = Store.openedFiles.find(file => location.pathname.indexOf(file.url) > -1);
+      }
+      if (selectedFile) {
+        if (selectedFile.url !== this.activeFile.url) {
+          this.fileClicked(selectedFile);
         }
-        if (selectedFile) {
-          if (selectedFile.url !== this.activeFile.url) {
-            this.fileClicked(selectedFile);
-          }
 
-          if (location.hash.indexOf('#L') > -1) {
-            const lineNumber = Number(location.hash.substr(2));
-            if (!isNaN(lineNumber)) {
-              Store.setActiveLine(lineNumber);
-              if (Store.isPreviewView()) {
-                document.getElementById(`L${lineNumber}`).scrollIntoView();
-              } else {
-                Helper.monacoInstance.setPosition({
-                  lineNumber: this.activeLine,
-                  column: 1,
-                });
-              }
+        if (location.hash.indexOf('#L') > -1) {
+          const lineNumber = Number(location.hash.substr(2));
+          if (!isNaN(lineNumber)) {
+            Store.setActiveLine(lineNumber);
+            if (Store.isPreviewView()) {
+              document.getElementById(`L${lineNumber}`).scrollIntoView();
+            } else {
+              Helper.monacoInstance.setPosition({
+                lineNumber: this.activeLine,
+                column: 1,
+              });
             }
           }
-        } else {
-          // Not opened at all lets open new tab
-          this.fileClicked({
-            url: location.href,
-          });
         }
-      });
+      } else {
+        // Not opened at all lets open new tab
+        this.fileClicked({
+          url: location.href,
+        });
+      }
     },
 
     fileClicked(clickedFile) {
-- 
cgit v1.2.3


From 5c07687b3eedfc4200c9b3fcdffbc79026c285db Mon Sep 17 00:00:00 2001
From: Tim Zallmann <tzallmann@gitlab.com>
Date: Tue, 3 Oct 2017 13:56:01 +0200
Subject: Added Check for Line Number Element

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

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/repo/components/repo_sidebar.vue b/app/assets/javascripts/repo/components/repo_sidebar.vue
index 9d3e20a195b..0e6acf96836 100644
--- a/app/assets/javascripts/repo/components/repo_sidebar.vue
+++ b/app/assets/javascripts/repo/components/repo_sidebar.vue
@@ -43,7 +43,7 @@ export default {
           if (!isNaN(lineNumber)) {
             Store.setActiveLine(lineNumber);
             if (Store.isPreviewView()) {
-              document.getElementById(`L${lineNumber}`).scrollIntoView();
+              if (document.getElementById(`L${lineNumber}`)) document.getElementById(`L${lineNumber}`).scrollIntoView();
             } else {
               Helper.monacoInstance.setPosition({
                 lineNumber: this.activeLine,
-- 
cgit v1.2.3


From 8d14a95638d7d6b52254b192b3e54296e22fddc3 Mon Sep 17 00:00:00 2001
From: Tim Zallmann <tzallmann@gitlab.com>
Date: Wed, 4 Oct 2017 17:22:07 +0200
Subject: Optimising If

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

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/repo/components/repo_sidebar.vue b/app/assets/javascripts/repo/components/repo_sidebar.vue
index 0e6acf96836..9f58f63b850 100644
--- a/app/assets/javascripts/repo/components/repo_sidebar.vue
+++ b/app/assets/javascripts/repo/components/repo_sidebar.vue
@@ -42,8 +42,8 @@ export default {
           const lineNumber = Number(location.hash.substr(2));
           if (!isNaN(lineNumber)) {
             Store.setActiveLine(lineNumber);
-            if (Store.isPreviewView()) {
-              if (document.getElementById(`L${lineNumber}`)) document.getElementById(`L${lineNumber}`).scrollIntoView();
+            if (Store.isPreviewView() && document.getElementById(`L${lineNumber}`)) {
+              document.getElementById(`L${lineNumber}`).scrollIntoView();
             } else {
               Helper.monacoInstance.setPosition({
                 lineNumber: this.activeLine,
-- 
cgit v1.2.3


From 2e53056e94e2be32d481e084b68be87dc0e448dd Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Wed, 4 Oct 2017 16:43:45 +0100
Subject: Adds Frontend specs

---
 app/assets/javascripts/clusters.js | 13 +++----------
 1 file changed, 3 insertions(+), 10 deletions(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/clusters.js b/app/assets/javascripts/clusters.js
index 5a381a5322a..8bd4de92e6f 100644
--- a/app/assets/javascripts/clusters.js
+++ b/app/assets/javascripts/clusters.js
@@ -11,7 +11,6 @@ import './flash';
  *
  * - Polling status while creating or scheduled
  * -- Update status area with the response result
- *
  */
 
 class ClusterService {
@@ -23,7 +22,7 @@ class ClusterService {
   }
 }
 
-export default class ClusterEdit {
+export default class Clusters {
   constructor() {
     const dataset = document.querySelector('.js-edit-cluster-form').dataset;
 
@@ -54,12 +53,7 @@ export default class ClusterEdit {
 
   toggle() {
     this.toggleButton.classList.toggle('checked');
-    this.state.toggleStatus = this.toggleButton.classList.contains('checked').toString();
-    this.toggleInput.setAttribute('value', this.state.toggleStatus);
-  }
-
-  updateData() {
-    this.service.updateData(this.state.toggleStatus);
+    this.toggleInput.setAttribute('value', this.toggleButton.classList.contains('checked').toString());
   }
 
   initPoling() {
@@ -104,7 +98,7 @@ export default class ClusterEdit {
         break;
       case 'errored':
         this.errorContainer.classList.remove('hidden');
-        this.errorContainer.querySelector('.js-error-reason').textContent = error.status_reason;
+        this.errorContainer.querySelector('.js-error-reason').textContent = error;
         break;
       case 'scheduled':
       case 'creating':
@@ -114,5 +108,4 @@ export default class ClusterEdit {
         this.hideAll();
     }
   }
-
 }
-- 
cgit v1.2.3


From 8f2b109363ef551655a0a5210e5070d20c13c4b3 Mon Sep 17 00:00:00 2001
From: James Ramsay <jramsay@gitlab.com>
Date: Tue, 3 Oct 2017 16:07:52 -0400
Subject: Fix inconsistent use of sentence case

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

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/repo/components/repo_sidebar.vue b/app/assets/javascripts/repo/components/repo_sidebar.vue
index 1e40814b95f..685f6ff806f 100644
--- a/app/assets/javascripts/repo/components/repo_sidebar.vue
+++ b/app/assets/javascripts/repo/components/repo_sidebar.vue
@@ -74,8 +74,8 @@ export default {
     <thead v-if="!isMini">
       <tr>
         <th class="name">Name</th>
-        <th class="hidden-sm hidden-xs last-commit">Last Commit</th>
-        <th class="hidden-xs last-update text-right">Last Update</th>
+        <th class="hidden-sm hidden-xs last-commit">Last commit</th>
+        <th class="hidden-xs last-update text-right">Last update</th>
       </tr>
     </thead>
     <tbody>
-- 
cgit v1.2.3


From 91384251bbc675a3a5b4b16b781f2811d6cab959 Mon Sep 17 00:00:00 2001
From: Jose Ivan Vargas <jvargas@gitlab.com>
Date: Wed, 4 Oct 2017 16:56:20 -0500
Subject: address-code-styling

---
 .../javascripts/protected_branches/protected_branch_create.js     | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/protected_branches/protected_branch_create.js b/app/assets/javascripts/protected_branches/protected_branch_create.js
index efc612a3dc7..0a9fdb074e5 100644
--- a/app/assets/javascripts/protected_branches/protected_branch_create.js
+++ b/app/assets/javascripts/protected_branches/protected_branch_create.js
@@ -51,10 +51,10 @@ export default class ProtectedBranchCreate {
     const $allowedToMergeInput = this.$form.find('input[name="protected_branch[merge_access_levels_attributes][0][access_level]"]');
     const $allowedToPushInput = this.$form.find('input[name="protected_branch[push_access_levels_attributes][0][access_level]"]');
     const completedForm = !(
-                            $branchInput.val() &&
-                            $allowedToMergeInput.length &&
-                            $allowedToPushInput.length
-                          );
+      $branchInput.val() &&
+      $allowedToMergeInput.length &&
+      $allowedToPushInput.length
+    );
 
     this.savePreviousSelection($allowedToMergeInput.val(), $allowedToPushInput.val());
     this.$form.find('input[type="submit"]').attr('disabled', completedForm);
-- 
cgit v1.2.3


From 7d8e410ffea377f101bf26022ce2e3dd881adb02 Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Wed, 4 Oct 2017 23:47:03 +0100
Subject: Changes after review

---
 app/assets/javascripts/clusters.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/clusters.js b/app/assets/javascripts/clusters.js
index 8bd4de92e6f..50dbeb06362 100644
--- a/app/assets/javascripts/clusters.js
+++ b/app/assets/javascripts/clusters.js
@@ -39,6 +39,7 @@ export default class Clusters {
     this.errorContainer = document.querySelector('.js-cluster-error');
     this.successContainer = document.querySelector('.js-cluster-success');
     this.creatingContainer = document.querySelector('.js-cluster-creating');
+    this.errorReasonContainer = this.errorContainer.querySelector('.js-error-reason');
 
     this.toggleButton.addEventListener('click', this.toggle.bind(this));
 
@@ -47,7 +48,7 @@ export default class Clusters {
     }
 
     if (this.state.statusPath) {
-      this.initPoling();
+      this.initPolling();
     }
   }
 
@@ -56,7 +57,7 @@ export default class Clusters {
     this.toggleInput.setAttribute('value', this.toggleButton.classList.contains('checked').toString());
   }
 
-  initPoling() {
+  initPolling() {
     this.poll = new Poll({
       resource: this.service,
       method: 'fetchData',
@@ -98,7 +99,7 @@ export default class Clusters {
         break;
       case 'errored':
         this.errorContainer.classList.remove('hidden');
-        this.errorContainer.querySelector('.js-error-reason').textContent = error;
+        this.errorReasonContainer.textContent = error;
         break;
       case 'scheduled':
       case 'creating':
-- 
cgit v1.2.3


From 4f82b92199a1d0723f0bedaca1dcf16ac78fbb99 Mon Sep 17 00:00:00 2001
From: Mike Greiling <mike@pixelcog.com>
Date: Wed, 4 Oct 2017 23:26:28 -0500
Subject: ensure prometheus graph values are properly typecast as numbers

---
 app/assets/javascripts/monitoring/stores/monitoring_store.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/monitoring/stores/monitoring_store.js b/app/assets/javascripts/monitoring/stores/monitoring_store.js
index 7592af5878e..854636e9a89 100644
--- a/app/assets/javascripts/monitoring/stores/monitoring_store.js
+++ b/app/assets/javascripts/monitoring/stores/monitoring_store.js
@@ -13,7 +13,7 @@ function normalizeMetrics(metrics) {
         ...result,
         values: result.values.map(([timestamp, value]) => ({
           time: new Date(timestamp * 1000),
-          value,
+          value: Number(value),
         })),
       })),
     })),
-- 
cgit v1.2.3


From 97153e7f62023f304ba76f713e610e635d107aff Mon Sep 17 00:00:00 2001
From: Mike Greiling <mike@pixelcog.com>
Date: Thu, 5 Oct 2017 00:17:54 -0500
Subject: fix formatting

---
 app/assets/javascripts/monitoring/components/graph.vue | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/monitoring/components/graph.vue b/app/assets/javascripts/monitoring/components/graph.vue
index 6b3e341f936..523cf7c3dda 100644
--- a/app/assets/javascripts/monitoring/components/graph.vue
+++ b/app/assets/javascripts/monitoring/components/graph.vue
@@ -141,10 +141,12 @@
       },
 
       renderAxesPaths() {
-        this.timeSeries = createTimeSeries(this.graphData.queries[0],
-        this.graphWidth,
-        this.graphHeight,
-        this.graphHeightOffset);
+        this.timeSeries = createTimeSeries(
+          this.graphData.queries[0],
+          this.graphWidth,
+          this.graphHeight,
+          this.graphHeightOffset
+        );
 
         if (this.timeSeries.length > 3) {
           this.baseGraphHeight = this.baseGraphHeight += (this.timeSeries.length - 3) * 20;
-- 
cgit v1.2.3


From eb31e31478aab52d26df7cb97f075deccd8dd9dc Mon Sep 17 00:00:00 2001
From: Mike Greiling <mike@pixelcog.com>
Date: Thu, 5 Oct 2017 00:37:09 -0500
Subject: fix spelling ("outter" -> "outer")

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

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/monitoring/components/graph.vue b/app/assets/javascripts/monitoring/components/graph.vue
index 523cf7c3dda..2124fc3e8af 100644
--- a/app/assets/javascripts/monitoring/components/graph.vue
+++ b/app/assets/javascripts/monitoring/components/graph.vue
@@ -65,7 +65,7 @@
     },
 
     computed: {
-      outterViewBox() {
+      outerViewBox() {
         return `0 0 ${this.baseGraphWidth} ${this.baseGraphHeight}`;
       },
 
@@ -213,7 +213,7 @@
       class="prometheus-svg-container"
       :style="paddingBottomRootSvg">
       <svg
-        :viewBox="outterViewBox"
+        :viewBox="outerViewBox"
         ref="baseSvg">
         <g
           class="x-axis"
-- 
cgit v1.2.3


From f036d43be9cc6fb9a1b225f6c5ea2071bce190dd Mon Sep 17 00:00:00 2001
From: Mike Greiling <mike@pixelcog.com>
Date: Thu, 5 Oct 2017 01:07:01 -0500
Subject: rename graph_paths.vue consistent with all other sub-components of
 graph.vue

---
 .../javascripts/monitoring/components/graph.vue    |  2 +-
 .../monitoring/components/graph/path.vue           | 40 ++++++++++++++++++++++
 .../monitoring/components/graph_path.vue           | 40 ----------------------
 3 files changed, 41 insertions(+), 41 deletions(-)
 create mode 100644 app/assets/javascripts/monitoring/components/graph/path.vue
 delete mode 100644 app/assets/javascripts/monitoring/components/graph_path.vue

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/monitoring/components/graph.vue b/app/assets/javascripts/monitoring/components/graph.vue
index 2124fc3e8af..eb1eb6f1143 100644
--- a/app/assets/javascripts/monitoring/components/graph.vue
+++ b/app/assets/javascripts/monitoring/components/graph.vue
@@ -3,7 +3,7 @@
   import GraphLegend from './graph/legend.vue';
   import GraphFlag from './graph/flag.vue';
   import GraphDeployment from './graph/deployment.vue';
-  import GraphPath from './graph_path.vue';
+  import GraphPath from './graph/path.vue';
   import MonitoringMixin from '../mixins/monitoring_mixins';
   import eventHub from '../event_hub';
   import measurements from '../utils/measurements';
diff --git a/app/assets/javascripts/monitoring/components/graph/path.vue b/app/assets/javascripts/monitoring/components/graph/path.vue
new file mode 100644
index 00000000000..043f1bf66bb
--- /dev/null
+++ b/app/assets/javascripts/monitoring/components/graph/path.vue
@@ -0,0 +1,40 @@
+<script>
+  export default {
+    props: {
+      generatedLinePath: {
+        type: String,
+        required: true,
+      },
+      generatedAreaPath: {
+        type: String,
+        required: true,
+      },
+      lineColor: {
+        type: String,
+        required: true,
+      },
+      areaColor: {
+        type: String,
+        required: true,
+      },
+    },
+  };
+</script>
+<template>
+  <g>
+    <path
+      class="metric-area"
+      :d="generatedAreaPath"
+      :fill="areaColor"
+      transform="translate(-5, 20)">
+    </path>
+    <path
+      class="metric-line"
+      :d="generatedLinePath"
+      :stroke="lineColor"
+      fill="none"
+      stroke-width="1"
+      transform="translate(-5, 20)">
+    </path>
+  </g>
+</template>
diff --git a/app/assets/javascripts/monitoring/components/graph_path.vue b/app/assets/javascripts/monitoring/components/graph_path.vue
deleted file mode 100644
index 043f1bf66bb..00000000000
--- a/app/assets/javascripts/monitoring/components/graph_path.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<script>
-  export default {
-    props: {
-      generatedLinePath: {
-        type: String,
-        required: true,
-      },
-      generatedAreaPath: {
-        type: String,
-        required: true,
-      },
-      lineColor: {
-        type: String,
-        required: true,
-      },
-      areaColor: {
-        type: String,
-        required: true,
-      },
-    },
-  };
-</script>
-<template>
-  <g>
-    <path
-      class="metric-area"
-      :d="generatedAreaPath"
-      :fill="areaColor"
-      transform="translate(-5, 20)">
-    </path>
-    <path
-      class="metric-line"
-      :d="generatedLinePath"
-      :stroke="lineColor"
-      fill="none"
-      stroke-width="1"
-      transform="translate(-5, 20)">
-    </path>
-  </g>
-</template>
-- 
cgit v1.2.3


From b0e8d623b79f2a010616c51303c5db1cb25870e1 Mon Sep 17 00:00:00 2001
From: Mike Greiling <mike@pixelcog.com>
Date: Thu, 5 Oct 2017 01:08:05 -0500
Subject: fix x-axis pixel scale to account for transform x-offset

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

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/monitoring/components/graph.vue b/app/assets/javascripts/monitoring/components/graph.vue
index eb1eb6f1143..f1792749936 100644
--- a/app/assets/javascripts/monitoring/components/graph.vue
+++ b/app/assets/javascripts/monitoring/components/graph.vue
@@ -153,7 +153,7 @@
         }
 
         const axisXScale = d3.time.scale()
-          .range([0, this.graphWidth]);
+          .range([0, this.graphWidth - 70]);
         const axisYScale = d3.scale.linear()
           .range([this.graphHeight - this.graphHeightOffset, 0]);
 
-- 
cgit v1.2.3


From 6a5b2fe8943190cff40e6e2c5dbc629fa4540151 Mon Sep 17 00:00:00 2001
From: Eric Eastwood <contact@ericeastwood.com>
Date: Mon, 2 Oct 2017 11:11:18 -0500
Subject: Allow merge when no pipeline success

Fix https://gitlab.com/gitlab-org/gitlab-ce/issues/38389
---
 .../components/states/mr_widget_ready_to_merge.js                | 9 ++-------
 .../vue_merge_request_widget/stores/mr_widget_store.js           | 1 +
 2 files changed, 3 insertions(+), 7 deletions(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js
index edc1d191bf2..61734163b6e 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js
@@ -67,7 +67,7 @@ export default {
       return defaultClass;
     },
     iconClass() {
-      if (this.status === 'failed' || !this.commitMessage.length || !this.isMergeAllowed() || this.mr.preventMerge) {
+      if (this.status === 'failed' || !this.commitMessage.length || !this.mr.isMergeAllowed || this.mr.preventMerge) {
         return 'failed';
       }
       return 'success';
@@ -100,13 +100,8 @@ export default {
     },
   },
   methods: {
-    isMergeAllowed() {
-      return !this.mr.onlyAllowMergeIfPipelineSucceeds ||
-        this.mr.isPipelinePassing ||
-        this.mr.isPipelineSkipped;
-    },
     shouldShowMergeControls() {
-      return this.isMergeAllowed() || this.shouldShowMergeWhenPipelineSucceedsText;
+      return this.mr.isMergeAllowed || this.shouldShowMergeWhenPipelineSucceedsText;
     },
     updateCommitMessage() {
       const cmwd = this.mr.commitMessageWithDescription;
diff --git a/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js b/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
index e554082149b..c1f7e64f580 100644
--- a/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
+++ b/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
@@ -73,6 +73,7 @@ export default class MergeRequestStore {
     this.canCancelAutomaticMerge = !!data.cancel_merge_when_pipeline_succeeds_path;
     this.hasSHAChanged = this.sha !== data.diff_head_sha;
     this.canBeMerged = data.can_be_merged || false;
+    this.isMergeAllowed = data.mergeable || false;
     this.mergeOngoing = data.merge_ongoing;
 
     // Cherry-pick and Revert actions related
-- 
cgit v1.2.3


From 3c484861c50dc1be6bb24e6082aaf15b21ffc3c2 Mon Sep 17 00:00:00 2001
From: Mike Greiling <mike@pixelcog.com>
Date: Thu, 5 Oct 2017 08:13:04 +0000
Subject: Resolve "Monitoring graph empty states are gigantic on `screen-sm`
 viewport sizes"

---
 .../monitoring/components/empty_state.vue          | 42 ++++++++--------------
 .../javascripts/monitoring/monitoring_bundle.js    |  5 +--
 2 files changed, 16 insertions(+), 31 deletions(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/monitoring/components/empty_state.vue b/app/assets/javascripts/monitoring/components/empty_state.vue
index a7b483f6786..a18164482a2 100644
--- a/app/assets/javascripts/monitoring/components/empty_state.vue
+++ b/app/assets/javascripts/monitoring/components/empty_state.vue
@@ -73,34 +73,22 @@
 
 <template>
   <div class="prometheus-state">
-    <div class="row">
-      <div class="col-md-4 col-md-offset-4 state-svg svg-content">
-        <img :src="currentState.svgUrl"/>
-      </div>
+    <div class="state-svg svg-content">
+      <img :src="currentState.svgUrl"/>
     </div>
-    <div class="row">
-      <div class="col-md-6 col-md-offset-3">
-        <h4 class="text-center state-title">
-          {{currentState.title}}
-        </h4>
-      </div>
-    </div>
-    <div class="row">
-      <div class="col-md-6 col-md-offset-3">
-        <div class="description-text text-center state-description">
-          {{currentState.description}}
-          <a v-if="showButtonDescription" :href="settingsPath">
-            Prometheus server
-          </a>
-        </div>
-      </div>
-    </div>
-    <div class="row state-button-section">
-      <div class="col-md-4 col-md-offset-4 text-center state-button">
-        <a class="btn btn-success" :href="buttonPath">
-          {{currentState.buttonText}}
-        </a>
-      </div>
+    <h4 class="state-title">
+      {{currentState.title}}
+    </h4>
+    <p class="state-description">
+      {{currentState.description}}
+      <a v-if="showButtonDescription" :href="settingsPath">
+        Prometheus server
+      </a>
+    </p>
+    <div class="state-button">
+      <a class="btn btn-success" :href="buttonPath">
+        {{currentState.buttonText}}
+      </a>
     </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/monitoring/monitoring_bundle.js b/app/assets/javascripts/monitoring/monitoring_bundle.js
index ef280e02092..104432ef5de 100644
--- a/app/assets/javascripts/monitoring/monitoring_bundle.js
+++ b/app/assets/javascripts/monitoring/monitoring_bundle.js
@@ -3,8 +3,5 @@ import Dashboard from './components/dashboard.vue';
 
 document.addEventListener('DOMContentLoaded', () => new Vue({
   el: '#prometheus-graphs',
-  components: {
-    Dashboard,
-  },
-  render: createElement => createElement('dashboard'),
+  render: createElement => createElement(Dashboard),
 }));
-- 
cgit v1.2.3


From 9857ba1871a39b7f5ba598886583ab323ce6b37d Mon Sep 17 00:00:00 2001
From: Jose Ivan Vargas Lopez <jvargas@gitlab.com>
Date: Thu, 5 Oct 2017 08:52:06 +0000
Subject: Resolve "Hover and legend data should be linked"

---
 .../monitoring/components/dashboard.vue            |  8 +++++
 .../javascripts/monitoring/components/graph.vue    | 40 ++++++++++++----------
 .../monitoring/components/graph/flag.vue           |  5 +++
 .../monitoring/mixins/monitoring_mixins.js         | 22 ++++++++++++
 .../monitoring/utils/date_time_formatters.js       |  1 +
 5 files changed, 58 insertions(+), 18 deletions(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue
index f80a26b3fd4..442ed86d50c 100644
--- a/app/assets/javascripts/monitoring/components/dashboard.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard.vue
@@ -29,6 +29,7 @@
         showEmptyState: true,
         updateAspectRatio: false,
         updatedAspectRatios: 0,
+        hoverData: {},
         resizeThrottled: {},
       };
     },
@@ -64,6 +65,10 @@
           this.updatedAspectRatios = 0;
         }
       },
+
+      hoverChanged(data) {
+        this.hoverData = data;
+      },
     },
 
     created() {
@@ -72,10 +77,12 @@
         deploymentEndpoint: this.deploymentEndpoint,
       });
       eventHub.$on('toggleAspectRatio', this.toggleAspectRatio);
+      eventHub.$on('hoverChanged', this.hoverChanged);
     },
 
     beforeDestroy() {
       eventHub.$off('toggleAspectRatio', this.toggleAspectRatio);
+      eventHub.$off('hoverChanged', this.hoverChanged);
       window.removeEventListener('resize', this.resizeThrottled, false);
     },
 
@@ -102,6 +109,7 @@
         v-for="(graphData, index) in groupData.metrics"
         :key="index"
         :graph-data="graphData"
+        :hover-data="hoverData"
         :update-aspect-ratio="updateAspectRatio"
         :deployment-data="store.deploymentData"
       />
diff --git a/app/assets/javascripts/monitoring/components/graph.vue b/app/assets/javascripts/monitoring/components/graph.vue
index 6b3e341f936..322e083a058 100644
--- a/app/assets/javascripts/monitoring/components/graph.vue
+++ b/app/assets/javascripts/monitoring/components/graph.vue
@@ -7,12 +7,10 @@
   import MonitoringMixin from '../mixins/monitoring_mixins';
   import eventHub from '../event_hub';
   import measurements from '../utils/measurements';
-  import { timeScaleFormat } from '../utils/date_time_formatters';
+  import { timeScaleFormat, bisectDate } from '../utils/date_time_formatters';
   import createTimeSeries from '../utils/multiple_time_series';
   import bp from '../../breakpoints';
 
-  const bisectDate = d3.bisector(d => d.time).left;
-
   export default {
     props: {
       graphData: {
@@ -27,6 +25,11 @@
         type: Array,
         required: true,
       },
+      hoverData: {
+        type: Object,
+        required: false,
+        default: () => ({}),
+      },
     },
 
     mixins: [MonitoringMixin],
@@ -52,6 +55,7 @@
         currentXCoordinate: 0,
         currentFlagPosition: 0,
         showFlag: false,
+        showFlagContent: false,
         showDeployInfo: true,
         timeSeries: [],
       };
@@ -122,22 +126,14 @@
         const d1 = firstTimeSeries.values[overlayIndex];
         if (d0 === undefined || d1 === undefined) return;
         const evalTime = timeValueOverlay - d0[0] > d1[0] - timeValueOverlay;
-        this.currentData = evalTime ? d1 : d0;
-        this.currentDataIndex = evalTime ? overlayIndex : (overlayIndex - 1);
-        this.currentXCoordinate = Math.floor(firstTimeSeries.timeSeriesScaleX(this.currentData.time));
+        const hoveredDataIndex = evalTime ? overlayIndex : (overlayIndex - 1);
+        const hoveredDate = firstTimeSeries.values[hoveredDataIndex].time;
         const currentDeployXPos = this.mouseOverDeployInfo(point.x);
 
-        if (this.currentXCoordinate > (this.graphWidth - 200)) {
-          this.currentFlagPosition = this.currentXCoordinate - 103;
-        } else {
-          this.currentFlagPosition = this.currentXCoordinate;
-        }
-
-        if (currentDeployXPos) {
-          this.showFlag = false;
-        } else {
-          this.showFlag = true;
-        }
+        eventHub.$emit('hoverChanged', {
+          hoveredDate,
+          currentDeployXPos,
+        });
       },
 
       renderAxesPaths() {
@@ -194,6 +190,10 @@
           eventHub.$emit('toggleAspectRatio');
         }
       },
+
+      hoverData() {
+        this.positionFlag();
+      },
     },
 
     mounted() {
@@ -203,7 +203,10 @@
 </script>
 
 <template>
-  <div class="prometheus-graph">
+  <div 
+    class="prometheus-graph"
+    @mouseover="showFlagContent = true"
+    @mouseleave="showFlagContent = false">
     <h5 class="text-center graph-title">
       {{graphData.title}}
     </h5>
@@ -257,6 +260,7 @@
               :current-flag-position="currentFlagPosition"
               :graph-height="graphHeight"
               :graph-height-offset="graphHeightOffset"
+              :show-flag-content="showFlagContent"
             />
             <rect
               class="prometheus-graph-overlay"
diff --git a/app/assets/javascripts/monitoring/components/graph/flag.vue b/app/assets/javascripts/monitoring/components/graph/flag.vue
index a98e3d06c18..10fb7ff6803 100644
--- a/app/assets/javascripts/monitoring/components/graph/flag.vue
+++ b/app/assets/javascripts/monitoring/components/graph/flag.vue
@@ -23,6 +23,10 @@
         type: Number,
         required: true,
       },
+      showFlagContent: {
+        type: Boolean,
+        required: true,
+      },
     },
 
     data() {
@@ -57,6 +61,7 @@
       transform="translate(-5, 20)">
     </line>
     <svg 
+      v-if="showFlagContent"
       class="rect-text-metric"
       :x="currentFlagPosition"
       y="0">
diff --git a/app/assets/javascripts/monitoring/mixins/monitoring_mixins.js b/app/assets/javascripts/monitoring/mixins/monitoring_mixins.js
index 345a0b37a76..31f38aca5d6 100644
--- a/app/assets/javascripts/monitoring/mixins/monitoring_mixins.js
+++ b/app/assets/javascripts/monitoring/mixins/monitoring_mixins.js
@@ -1,3 +1,5 @@
+import { bisectDate } from '../utils/date_time_formatters';
+
 const mixins = {
   methods: {
     mouseOverDeployInfo(mouseXPos) {
@@ -18,6 +20,7 @@ const mixins = {
 
       return dataFound;
     },
+
     formatDeployments() {
       this.reducedDeploymentData = this.deploymentData.reduce((deploymentDataArray, deployment) => {
         const time = new Date(deployment.created_at);
@@ -40,6 +43,25 @@ const mixins = {
         return deploymentDataArray;
       }, []);
     },
+
+    positionFlag() {
+      const timeSeries = this.timeSeries[0];
+      const hoveredDataIndex = bisectDate(timeSeries.values, this.hoverData.hoveredDate, 1);
+      this.currentData = timeSeries.values[hoveredDataIndex];
+      this.currentDataIndex = hoveredDataIndex;
+      this.currentXCoordinate = Math.floor(timeSeries.timeSeriesScaleX(this.currentData.time));
+      if (this.currentXCoordinate > (this.graphWidth - 200)) {
+        this.currentFlagPosition = this.currentXCoordinate - 103;
+      } else {
+        this.currentFlagPosition = this.currentXCoordinate;
+      }
+
+      if (this.hoverData.currentDeployXPos) {
+        this.showFlag = false;
+      } else {
+        this.showFlag = true;
+      }
+    },
   },
 };
 
diff --git a/app/assets/javascripts/monitoring/utils/date_time_formatters.js b/app/assets/javascripts/monitoring/utils/date_time_formatters.js
index 26bcaa02511..c4c6b1ac1f5 100644
--- a/app/assets/javascripts/monitoring/utils/date_time_formatters.js
+++ b/app/assets/javascripts/monitoring/utils/date_time_formatters.js
@@ -2,6 +2,7 @@ import d3 from 'd3';
 
 export const dateFormat = d3.time.format('%b %-d, %Y');
 export const timeFormat = d3.time.format('%-I:%M%p');
+export const bisectDate = d3.bisector(d => d.time).left;
 
 export const timeScaleFormat = d3.time.format.multi([
   ['.%L', d => d.getMilliseconds()],
-- 
cgit v1.2.3


From ffce9fd53f4e7d400d6f45e00b7e59acd902f3a6 Mon Sep 17 00:00:00 2001
From: Grzegorz Bizon <grzesiek.bizon@gmail.com>
Date: Tue, 3 Oct 2017 13:02:48 +0200
Subject: Expose failure reason in pipeline error badge

Conflicts:
	app/serializers/pipeline_entity.rb
---
 app/assets/javascripts/pipelines/components/pipeline_url.vue | 7 +++++++
 1 file changed, 7 insertions(+)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/pipelines/components/pipeline_url.vue b/app/assets/javascripts/pipelines/components/pipeline_url.vue
index 76b97af39f1..9da0aac50a1 100644
--- a/app/assets/javascripts/pipelines/components/pipeline_url.vue
+++ b/app/assets/javascripts/pipelines/components/pipeline_url.vue
@@ -72,6 +72,13 @@
         :title="pipeline.yaml_errors">
         yaml invalid
       </span>
+      <span
+        v-if="pipeline.flags.failure_reason"
+        v-tooltip
+        class="js-pipeline-url-failure label label-danger"
+        :title="pipeline.failure_reason">
+        error
+      </span>
       <a
         v-if="pipeline.flags.auto_devops"
         tabindex="0"
-- 
cgit v1.2.3


From 8b16f1074ddb6ea6a5404d37409ab81002f28d52 Mon Sep 17 00:00:00 2001
From: Tim Zallmann <tzallmann@gitlab.com>
Date: Thu, 5 Oct 2017 11:54:46 +0200
Subject: Refactored Highlighting mechanism

---
 app/assets/javascripts/line_highlighter.js              |  9 ++++++---
 app/assets/javascripts/repo/components/repo_editor.vue  | 14 +++++++++-----
 app/assets/javascripts/repo/components/repo_preview.vue |  3 +++
 app/assets/javascripts/repo/components/repo_sidebar.vue |  8 --------
 4 files changed, 18 insertions(+), 16 deletions(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/line_highlighter.js b/app/assets/javascripts/line_highlighter.js
index a16d00b5cef..9999b5a200c 100644
--- a/app/assets/javascripts/line_highlighter.js
+++ b/app/assets/javascripts/line_highlighter.js
@@ -54,12 +54,14 @@ LineHighlighter.prototype.bindEvents = function() {
   $fileHolder.on('highlight:line', this.highlightHash);
 };
 
-LineHighlighter.prototype.highlightHash = function() {
-  var range;
+LineHighlighter.prototype.highlightHash = function(newHash) {
+  let range;
+  if (newHash) this._hash = newHash;
+
+  this.clearHighlight();
 
   if (this._hash !== '') {
     range = this.hashToRange(this._hash);
-
     if (range[0]) {
       this.highlightRange(range);
       const lineSelector = `#L${range[0]}`;
@@ -131,6 +133,7 @@ LineHighlighter.prototype.hashToRange = function(hash) {
 //
 // lineNumber - Line number to highlight
 LineHighlighter.prototype.highlightLine = function(lineNumber) {
+  console.log('LINE : ' + lineNumber);
   return $("#LC" + lineNumber).addClass(this.highlightLineClass);
 };
 
diff --git a/app/assets/javascripts/repo/components/repo_editor.vue b/app/assets/javascripts/repo/components/repo_editor.vue
index f1acd339ad3..02d9c775046 100644
--- a/app/assets/javascripts/repo/components/repo_editor.vue
+++ b/app/assets/javascripts/repo/components/repo_editor.vue
@@ -64,11 +64,6 @@ const RepoEditor = {
       if (e.target.element.classList.contains('line-numbers')) {
         location.hash = `L${lineNumber}`;
         Store.setActiveLine(lineNumber);
-
-        Helper.monacoInstance.setPosition({
-          lineNumber: this.activeLine,
-          column: 1,
-        });
       }
     },
   },
@@ -101,6 +96,15 @@ const RepoEditor = {
         this.setupEditor();
       }
     },
+
+    activeLine() {
+      if (Helper.monacoInstance) {
+        Helper.monacoInstance.setPosition({
+          lineNumber: this.activeLine,
+          column: 1,
+        });
+      }
+    },
   },
   computed: {
     shouldHideEditor() {
diff --git a/app/assets/javascripts/repo/components/repo_preview.vue b/app/assets/javascripts/repo/components/repo_preview.vue
index 2fe369a4693..514c7d9284c 100644
--- a/app/assets/javascripts/repo/components/repo_preview.vue
+++ b/app/assets/javascripts/repo/components/repo_preview.vue
@@ -28,6 +28,9 @@ export default {
         this.highlightFile();
       });
     },
+    activeLine(e) {
+      this.lineHighlighter.highlightHash('#L' + Store.activeLine);
+    },
   },
 };
 </script>
diff --git a/app/assets/javascripts/repo/components/repo_sidebar.vue b/app/assets/javascripts/repo/components/repo_sidebar.vue
index 9f58f63b850..2b0f1f661ff 100644
--- a/app/assets/javascripts/repo/components/repo_sidebar.vue
+++ b/app/assets/javascripts/repo/components/repo_sidebar.vue
@@ -42,14 +42,6 @@ export default {
           const lineNumber = Number(location.hash.substr(2));
           if (!isNaN(lineNumber)) {
             Store.setActiveLine(lineNumber);
-            if (Store.isPreviewView() && document.getElementById(`L${lineNumber}`)) {
-              document.getElementById(`L${lineNumber}`).scrollIntoView();
-            } else {
-              Helper.monacoInstance.setPosition({
-                lineNumber: this.activeLine,
-                column: 1,
-              });
-            }
           }
         }
       } else {
-- 
cgit v1.2.3


From 8cd4a7cfd702ffce4630b48a3c266e0954087362 Mon Sep 17 00:00:00 2001
From: Tim Zallmann <tzallmann@gitlab.com>
Date: Thu, 5 Oct 2017 12:01:37 +0200
Subject: Removed the console.log

---
 app/assets/javascripts/line_highlighter.js | 1 -
 1 file changed, 1 deletion(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/line_highlighter.js b/app/assets/javascripts/line_highlighter.js
index 9999b5a200c..ef91d471639 100644
--- a/app/assets/javascripts/line_highlighter.js
+++ b/app/assets/javascripts/line_highlighter.js
@@ -133,7 +133,6 @@ LineHighlighter.prototype.hashToRange = function(hash) {
 //
 // lineNumber - Line number to highlight
 LineHighlighter.prototype.highlightLine = function(lineNumber) {
-  console.log('LINE : ' + lineNumber);
   return $("#LC" + lineNumber).addClass(this.highlightLineClass);
 };
 
-- 
cgit v1.2.3


From 8262cb2f4e9f366e99592859d6348f48da4a4d39 Mon Sep 17 00:00:00 2001
From: Tim Zallmann <tzallmann@gitlab.com>
Date: Thu, 5 Oct 2017 12:29:31 +0200
Subject: CHanged to Helper Method

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

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/repo/components/repo_sidebar.vue b/app/assets/javascripts/repo/components/repo_sidebar.vue
index 2b0f1f661ff..99bf471b83d 100644
--- a/app/assets/javascripts/repo/components/repo_sidebar.vue
+++ b/app/assets/javascripts/repo/components/repo_sidebar.vue
@@ -31,7 +31,7 @@ export default {
       let selectedFile = this.files.find(file => location.pathname.indexOf(file.url) > -1);
       if (!selectedFile) {
         // Maybe it is not in the current tree but in the opened tabs
-        selectedFile = Store.openedFiles.find(file => location.pathname.indexOf(file.url) > -1);
+        selectedFile = Helper.getFileFromPath(location.pathname);
       }
       if (selectedFile) {
         if (selectedFile.url !== this.activeFile.url) {
-- 
cgit v1.2.3


From eda9e6b65baece281f45255e25a263e895d36db5 Mon Sep 17 00:00:00 2001
From: Tim Zallmann <tzallmann@gitlab.com>
Date: Thu, 5 Oct 2017 15:14:33 +0200
Subject: Fixed Linting Error + Error with Line Highlighter found in Test

---
 app/assets/javascripts/line_highlighter.js              | 2 +-
 app/assets/javascripts/repo/components/repo_preview.vue | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/line_highlighter.js b/app/assets/javascripts/line_highlighter.js
index ef91d471639..a75d1a4b8d0 100644
--- a/app/assets/javascripts/line_highlighter.js
+++ b/app/assets/javascripts/line_highlighter.js
@@ -56,7 +56,7 @@ LineHighlighter.prototype.bindEvents = function() {
 
 LineHighlighter.prototype.highlightHash = function(newHash) {
   let range;
-  if (newHash) this._hash = newHash;
+  if (newHash && typeof newHash === 'string') this._hash = newHash;
 
   this.clearHighlight();
 
diff --git a/app/assets/javascripts/repo/components/repo_preview.vue b/app/assets/javascripts/repo/components/repo_preview.vue
index 514c7d9284c..04732489c5f 100644
--- a/app/assets/javascripts/repo/components/repo_preview.vue
+++ b/app/assets/javascripts/repo/components/repo_preview.vue
@@ -28,8 +28,8 @@ export default {
         this.highlightFile();
       });
     },
-    activeLine(e) {
-      this.lineHighlighter.highlightHash('#L' + Store.activeLine);
+    activeLine() {
+      this.lineHighlighter.highlightHash(`#L${Store.activeLine}`);
     },
   },
 };
-- 
cgit v1.2.3


From 790bc25dcd727471698838c5f8504fa9dc44fc37 Mon Sep 17 00:00:00 2001
From: Jose Ivan Vargas <jvargas@gitlab.com>
Date: Thu, 5 Oct 2017 12:00:20 -0500
Subject: fix linter errors and karma specs

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

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/monitoring/components/graph.vue b/app/assets/javascripts/monitoring/components/graph.vue
index f1792749936..972f4f7adef 100644
--- a/app/assets/javascripts/monitoring/components/graph.vue
+++ b/app/assets/javascripts/monitoring/components/graph.vue
@@ -145,7 +145,7 @@
           this.graphData.queries[0],
           this.graphWidth,
           this.graphHeight,
-          this.graphHeightOffset
+          this.graphHeightOffset,
         );
 
         if (this.timeSeries.length > 3) {
-- 
cgit v1.2.3


From 7453b64347c7096b3e435c90e9e6a4eee4ab5638 Mon Sep 17 00:00:00 2001
From: Tim Zallmann <tzallmann@gitlab.com>
Date: Fri, 6 Oct 2017 09:12:33 +0200
Subject: Resetting of active Line + setting it for the async display functions

---
 .../javascripts/repo/components/repo_preview.vue   |  8 +++++++-
 .../javascripts/repo/components/repo_sidebar.vue   | 22 ++++++++++++----------
 app/assets/javascripts/repo/stores/repo_store.js   |  5 +++--
 3 files changed, 22 insertions(+), 13 deletions(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/repo/components/repo_preview.vue b/app/assets/javascripts/repo/components/repo_preview.vue
index 04732489c5f..9a9d200b8c6 100644
--- a/app/assets/javascripts/repo/components/repo_preview.vue
+++ b/app/assets/javascripts/repo/components/repo_preview.vue
@@ -14,6 +14,11 @@ export default {
     highlightFile() {
       $(this.$el).find('.file-content').syntaxHighlight();
     },
+    highlightLine() {
+      if (Store.activeLine > -1) {
+        this.lineHighlighter.highlightHash(`#L${Store.activeLine}`);
+      }
+    }
   },
   mounted() {
     this.highlightFile();
@@ -26,10 +31,11 @@ export default {
     html() {
       this.$nextTick(() => {
         this.highlightFile();
+        this.highlightLine();
       });
     },
     activeLine() {
-      this.lineHighlighter.highlightHash(`#L${Store.activeLine}`);
+      this.highlightLine();
     },
   },
 };
diff --git a/app/assets/javascripts/repo/components/repo_sidebar.vue b/app/assets/javascripts/repo/components/repo_sidebar.vue
index 99bf471b83d..10de23d0199 100644
--- a/app/assets/javascripts/repo/components/repo_sidebar.vue
+++ b/app/assets/javascripts/repo/components/repo_sidebar.vue
@@ -33,26 +33,25 @@ export default {
         // Maybe it is not in the current tree but in the opened tabs
         selectedFile = Helper.getFileFromPath(location.pathname);
       }
+
+      let lineNumber = null;
+      if (location.hash.indexOf('#L') > -1) lineNumber = Number(location.hash.substr(2));
+
       if (selectedFile) {
         if (selectedFile.url !== this.activeFile.url) {
-          this.fileClicked(selectedFile);
-        }
-
-        if (location.hash.indexOf('#L') > -1) {
-          const lineNumber = Number(location.hash.substr(2));
-          if (!isNaN(lineNumber)) {
-            Store.setActiveLine(lineNumber);
-          }
+          this.fileClicked(selectedFile, lineNumber);
+        } else {
+          Store.setActiveLine(lineNumber);
         }
       } else {
         // Not opened at all lets open new tab
         this.fileClicked({
           url: location.href,
-        });
+        }, lineNumber);
       }
     },
 
-    fileClicked(clickedFile) {
+    fileClicked(clickedFile, lineNumber) {
       let file = clickedFile;
       if (file.loading) return;
       file.loading = true;
@@ -60,17 +59,20 @@ export default {
       if (file.type === 'tree' && file.opened) {
         file = Store.removeChildFilesOfTree(file);
         file.loading = false;
+        Store.setActiveLine(lineNumber);
       } else {
         const openFile = Helper.getFileFromPath(file.url);
         if (openFile) {
           file.loading = false;
           Store.setActiveFiles(openFile);
+          Store.setActiveLine(lineNumber);
         } else {
           Service.url = file.url;
           Helper.getContent(file)
             .then(() => {
               file.loading = false;
               Helper.scrollTabsRight();
+              Store.setActiveLine(lineNumber);
             })
             .catch(Helper.loadingError);
         }
diff --git a/app/assets/javascripts/repo/stores/repo_store.js b/app/assets/javascripts/repo/stores/repo_store.js
index 0d1853ff148..93b39cff27e 100644
--- a/app/assets/javascripts/repo/stores/repo_store.js
+++ b/app/assets/javascripts/repo/stores/repo_store.js
@@ -26,7 +26,7 @@ const RepoStore = {
   },
   activeFile: Helper.getDefaultActiveFile(),
   activeFileIndex: 0,
-  activeLine: 0,
+  activeLine: -1,
   activeFileLabel: 'Raw',
   files: [],
   isCommitable: false,
@@ -85,6 +85,7 @@ const RepoStore = {
 
     if (!file.loading) Helper.updateHistoryEntry(file.url, file.pageTitle || file.name);
     RepoStore.binary = file.binary;
+    RepoStore.setActiveLine(-1);
   },
 
   setFileActivity(file, openedFile, i) {
@@ -102,7 +103,7 @@ const RepoStore = {
   },
 
   setActiveLine(activeLine) {
-    RepoStore.activeLine = activeLine;
+    if (!isNaN(activeLine)) RepoStore.activeLine = activeLine;
   },
 
   setActiveToRaw() {
-- 
cgit v1.2.3


From 0f6d20e39453b106e42ab53fa3649674b403eba5 Mon Sep 17 00:00:00 2001
From: Tim Zallmann <tzallmann@gitlab.com>
Date: Fri, 6 Oct 2017 10:03:56 +0200
Subject: Made the insertion of the English Translation File conditional +
 removed window.translations from the global object to save some memory

---
 app/assets/javascripts/locale/index.js | 1 +
 1 file changed, 1 insertion(+)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/locale/index.js b/app/assets/javascripts/locale/index.js
index ce05b3eabec..1003b9ba0af 100644
--- a/app/assets/javascripts/locale/index.js
+++ b/app/assets/javascripts/locale/index.js
@@ -4,6 +4,7 @@ import sprintf from './sprintf';
 const langAttribute = document.querySelector('html').getAttribute('lang');
 const lang = (langAttribute || 'en').replace(/-/g, '_');
 const locale = new Jed(window.translations || {});
+delete window.translations;
 
 /**
   Translates `text`
-- 
cgit v1.2.3


From 97f964074741c54f153a45f6bdd5b9e303e6a306 Mon Sep 17 00:00:00 2001
From: Jarka Kadlecova <jarka@gitlab.com>
Date: Fri, 6 Oct 2017 08:56:28 +0200
Subject: Fix wording in the js messages

---
 app/assets/javascripts/sidebar/components/lock/edit_form.vue         | 2 +-
 app/assets/javascripts/vue_shared/components/issue/issue_warning.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/sidebar/components/lock/edit_form.vue b/app/assets/javascripts/sidebar/components/lock/edit_form.vue
index 0fa19ef7217..c7a6edc7c70 100644
--- a/app/assets/javascripts/sidebar/components/lock/edit_form.vue
+++ b/app/assets/javascripts/sidebar/components/lock/edit_form.vue
@@ -48,7 +48,7 @@ export default {
         Lock this {{ issuableDisplayName(issuableType) }}?
         Only
         <strong>project members</strong>
-        will be able to comment
+        will be able to comment.
       </p>
 
       <edit-form-buttons
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 7a8be8c42da..35d6f333417 100644
--- a/app/assets/javascripts/vue_shared/components/issue/issue_warning.vue
+++ b/app/assets/javascripts/vue_shared/components/issue/issue_warning.vue
@@ -39,7 +39,7 @@
 
     <span v-if="isLockedAndConfidential">
       {{ __('This issue is confidential and locked.') }}
-      {{ __('People without permission will never get a notification and not be able to comment.') }}
+      {{ __('People without permission will never get a notification and won\'t be able to comment.') }}
     </span>
 
     <span v-else-if="isConfidential">
-- 
cgit v1.2.3


From 96944979b2a72d3d80f4447d56fb873cbd58fd6c Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Fri, 6 Oct 2017 09:29:24 +0100
Subject: Fix typo in cycle analytics breaking time component

---
 .../javascripts/cycle_analytics/components/total_time_component.vue     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'app/assets/javascripts')

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 9941b997b3f..62efd4f9c28 100644
--- a/app/assets/javascripts/cycle_analytics/components/total_time_component.vue
+++ b/app/assets/javascripts/cycle_analytics/components/total_time_component.vue
@@ -20,7 +20,7 @@
       <template v-if="time.days">{{ time.days }} <span>{{ n__('day', 'days', time.days) }}</span></template>
       <template v-if="time.hours">{{ time.hours }} <span>{{ n__('Time|hr', 'Time|hrs', time.hours) }}</span></template>
       <template v-if="time.mins && !time.days">{{ time.mins }} <span>{{ n__('Time|min', 'Time|mins', time.mins) }}</span></template>
-      <template v-if="time.seconds && hasDa === 1 || time.seconds === 0">{{ time.seconds }} <span>{{ s__('Time|s') }}</span></template>
+      <template v-if="time.seconds && hasData === 1 || time.seconds === 0">{{ time.seconds }} <span>{{ s__('Time|s') }}</span></template>
     </template>
     <template v-else>
       --
-- 
cgit v1.2.3


From 5197e7c1a127767ec3b36eb5642489d9d4631827 Mon Sep 17 00:00:00 2001
From: Tim Zallmann <tzallmann@gitlab.com>
Date: Fri, 6 Oct 2017 11:11:59 +0200
Subject: Good old dangling comma

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

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/repo/components/repo_preview.vue b/app/assets/javascripts/repo/components/repo_preview.vue
index 9a9d200b8c6..a87bef6084a 100644
--- a/app/assets/javascripts/repo/components/repo_preview.vue
+++ b/app/assets/javascripts/repo/components/repo_preview.vue
@@ -18,7 +18,7 @@ export default {
       if (Store.activeLine > -1) {
         this.lineHighlighter.highlightHash(`#L${Store.activeLine}`);
       }
-    }
+    },
   },
   mounted() {
     this.highlightFile();
-- 
cgit v1.2.3


From 3616e063e3dafc6eb4e627aa211e1030788b0be2 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Thu, 5 Oct 2017 15:57:49 +0100
Subject: Convert AbuseReports class to a module

---
 app/assets/javascripts/abuse_reports.js | 5 +----
 app/assets/javascripts/dispatcher.js    | 3 ++-
 app/assets/javascripts/main.js          | 1 -
 3 files changed, 3 insertions(+), 6 deletions(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/abuse_reports.js b/app/assets/javascripts/abuse_reports.js
index 346de4ad11e..3de192d56eb 100644
--- a/app/assets/javascripts/abuse_reports.js
+++ b/app/assets/javascripts/abuse_reports.js
@@ -1,7 +1,7 @@
 const MAX_MESSAGE_LENGTH = 500;
 const MESSAGE_CELL_SELECTOR = '.abuse-reports .message';
 
-class AbuseReports {
+export default class AbuseReports {
   constructor() {
     $(MESSAGE_CELL_SELECTOR).each(this.truncateLongMessage);
     $(document)
@@ -32,6 +32,3 @@ class AbuseReports {
     }
   }
 }
-
-window.gl = window.gl || {};
-window.gl.AbuseReports = AbuseReports;
diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js
index bbaa4e4d91e..eff8d4c8e6d 100644
--- a/app/assets/javascripts/dispatcher.js
+++ b/app/assets/javascripts/dispatcher.js
@@ -76,6 +76,7 @@ import initProjectVisibilitySelector from './project_visibility';
 import GpgBadges from './gpg_badges';
 import UserFeatureHelper from './helpers/user_feature_helper';
 import initChangesDropdown from './init_changes_dropdown';
+import AbuseReports from './abuse_reports';
 import { ajaxGet, convertPermissionToBoolean } from './lib/utils/common_utils';
 
 (function() {
@@ -557,7 +558,7 @@ import { ajaxGet, convertPermissionToBoolean } from './lib/utils/common_utils';
                   new Labels();
               }
             case 'abuse_reports':
-              new gl.AbuseReports();
+              new AbuseReports();
               break;
           }
           break;
diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js
index 24abc5c5c9e..1d36beb8305 100644
--- a/app/assets/javascripts/main.js
+++ b/app/assets/javascripts/main.js
@@ -57,7 +57,6 @@ import './u2f/register';
 import './u2f/util';
 
 // everything else
-import './abuse_reports';
 import './activities';
 import './admin';
 import './ajax_loading_spinner';
-- 
cgit v1.2.3


From 37e3d42b62bf2460f7443ac9e57661140983d335 Mon Sep 17 00:00:00 2001
From: "Luke \"Jared\" Bennett" <lbennett@gitlab.com>
Date: Fri, 6 Oct 2017 12:32:39 +0100
Subject: UX review

---
 app/assets/javascripts/vue_shared/components/issue/issue_warning.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'app/assets/javascripts')

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 35d6f333417..16c0a8efcd2 100644
--- a/app/assets/javascripts/vue_shared/components/issue/issue_warning.vue
+++ b/app/assets/javascripts/vue_shared/components/issue/issue_warning.vue
@@ -32,7 +32,7 @@
   <div class="issuable-note-warning">
     <i
       aria-hidden="true"
-      class="fa"
+      class="fa icon"
       :class="iconClass"
       v-if="!isLockedAndConfidential"
     ></i>
-- 
cgit v1.2.3


From 60e9ba21e9cec68629d39a554747607f3049fd88 Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Fri, 6 Oct 2017 18:12:42 +0100
Subject: Removes unnecessary load of LinkedTabs, Pipelines and
 MiniPipelineGraph classes

---
 app/assets/javascripts/main.js | 3 ---
 1 file changed, 3 deletions(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js
index 24abc5c5c9e..2c1dcc374ff 100644
--- a/app/assets/javascripts/main.js
+++ b/app/assets/javascripts/main.js
@@ -40,7 +40,6 @@ import './commit/file';
 import './commit/image_file';
 
 // lib/utils
-import './lib/utils/bootstrap_linked_tabs';
 import { handleLocationHash } from './lib/utils/common_utils';
 import './lib/utils/datetime_utility';
 import './lib/utils/pretty_time';
@@ -111,7 +110,6 @@ import './merge_request';
 import './merge_request_tabs';
 import './milestone';
 import './milestone_select';
-import './mini_pipeline_graph_dropdown';
 import './namespace_select';
 import './new_branch_form';
 import './new_commit_form';
@@ -119,7 +117,6 @@ import './notes';
 import './notifications_dropdown';
 import './notifications_form';
 import './pager';
-import './pipelines';
 import './preview_markdown';
 import './project';
 import './project_avatar';
-- 
cgit v1.2.3


From 940e702468ecd8c811dc2f2f4602c38ebffd9742 Mon Sep 17 00:00:00 2001
From: Annabel Dunstone Gray <annabel.dunstone@gmail.com>
Date: Fri, 29 Sep 2017 14:03:50 -0700
Subject: Start moving new nav styles into header.scss

---
 app/assets/javascripts/shortcuts.js | 15 ---------------
 1 file changed, 15 deletions(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/shortcuts.js b/app/assets/javascripts/shortcuts.js
index e754f6c4460..f63b99ba1c5 100644
--- a/app/assets/javascripts/shortcuts.js
+++ b/app/assets/javascripts/shortcuts.js
@@ -18,23 +18,8 @@ import findAndFollowLink from './shortcuts_dashboard_navigation';
       Mousetrap.bind('f', (e => this.focusFilter(e)));
       Mousetrap.bind('p b', this.onTogglePerfBar);
 
-      const $globalDropdownMenu = $('.global-dropdown-menu');
-      const $globalDropdownToggle = $('.global-dropdown-toggle');
       const findFileURL = document.body.dataset.findFile;
 
-      $('.global-dropdown').on('hide.bs.dropdown', () => {
-        $globalDropdownMenu.removeClass('shortcuts');
-      });
-
-      Mousetrap.bind('n', () => {
-        $globalDropdownMenu.toggleClass('shortcuts');
-        $globalDropdownToggle.trigger('click');
-
-        if (!$globalDropdownMenu.is(':visible')) {
-          $globalDropdownToggle.blur();
-        }
-      });
-
       Mousetrap.bind('shift+t', () => findAndFollowLink('.shortcuts-todos'));
       Mousetrap.bind('shift+a', () => findAndFollowLink('.dashboard-shortcuts-activity'));
       Mousetrap.bind('shift+i', () => findAndFollowLink('.dashboard-shortcuts-issues'));
-- 
cgit v1.2.3


From e3fe48b85dc07b135180f8ec54db95537f794fdc Mon Sep 17 00:00:00 2001
From: Mike Greiling <mike@pixelcog.com>
Date: Fri, 6 Oct 2017 15:29:32 -0500
Subject: allow prometheus graphs to handle non-congiuous paths (with NaN,
 +Inf, and -Inf)

---
 app/assets/javascripts/monitoring/utils/multiple_time_series.js | 4 ++++
 1 file changed, 4 insertions(+)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/monitoring/utils/multiple_time_series.js b/app/assets/javascripts/monitoring/utils/multiple_time_series.js
index 3cbe06d8fd6..65eec0d8d02 100644
--- a/app/assets/javascripts/monitoring/utils/multiple_time_series.js
+++ b/app/assets/javascripts/monitoring/utils/multiple_time_series.js
@@ -56,12 +56,16 @@ export default function createTimeSeries(queryData, graphWidth, graphHeight, gra
     timeSeriesScaleX.ticks(d3.time.minute, 60);
     timeSeriesScaleY.domain([0, maxValueFromSeries.maxValue]);
 
+    const defined = d => !isNaN(d.value) && d.value != null;
+
     const lineFunction = d3.svg.line()
+      .defined(defined)
       .interpolate('linear')
       .x(d => timeSeriesScaleX(d.time))
       .y(d => timeSeriesScaleY(d.value));
 
     const areaFunction = d3.svg.area()
+      .defined(defined)
       .interpolate('linear')
       .x(d => timeSeriesScaleX(d.time))
       .y0(graphHeight - graphHeightOffset)
-- 
cgit v1.2.3


From ece9621b1304c7ebc338a6765c7e9aed5126edaa Mon Sep 17 00:00:00 2001
From: Mike Greiling <mike@pixelcog.com>
Date: Fri, 6 Oct 2017 15:30:09 -0500
Subject: allow legend to properly handle NaN values

---
 app/assets/javascripts/monitoring/components/graph/legend.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/monitoring/components/graph/legend.vue b/app/assets/javascripts/monitoring/components/graph/legend.vue
index dbc48c63747..85b6d7f4cbe 100644
--- a/app/assets/javascripts/monitoring/components/graph/legend.vue
+++ b/app/assets/javascripts/monitoring/components/graph/legend.vue
@@ -79,7 +79,11 @@
       },
 
       formatMetricUsage(series) {
-        return `${formatRelevantDigits(series.values[this.currentDataIndex].value)} ${this.unitOfDisplay}`;
+        const value = series.values[this.currentDataIndex].value;
+        if (isNaN(value)) {
+          return '-';
+        }
+        return `${formatRelevantDigits(value)} ${this.unitOfDisplay}`;
       },
 
       createSeriesString(index, series) {
-- 
cgit v1.2.3


From 265b1a3b72ff7552e2ae01a059f80bd59714649d Mon Sep 17 00:00:00 2001
From: Winnie Hellmann <winnie@gitlab.com>
Date: Fri, 6 Oct 2017 20:40:41 +0000
Subject: Show confirmation modal before deleting account

---
 app/assets/javascripts/lib/utils/csrf.js           |   4 +-
 .../account/components/delete_account_modal.vue    | 146 +++++++++++++++++++++
 app/assets/javascripts/profile/account/index.js    |  21 +++
 app/assets/javascripts/repo/components/repo.vue    |   2 +-
 .../vue_shared/components/popup_dialog.vue         |   6 +-
 5 files changed, 175 insertions(+), 4 deletions(-)
 create mode 100644 app/assets/javascripts/profile/account/components/delete_account_modal.vue
 create mode 100644 app/assets/javascripts/profile/account/index.js

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/lib/utils/csrf.js b/app/assets/javascripts/lib/utils/csrf.js
index ae41cc5e8a8..0bdb547d31a 100644
--- a/app/assets/javascripts/lib/utils/csrf.js
+++ b/app/assets/javascripts/lib/utils/csrf.js
@@ -14,6 +14,9 @@ If you need to compose a headers object, use the spread operator:
     someOtherHeader: '12345',
   }
 ```
+
+see also http://guides.rubyonrails.org/security.html#cross-site-request-forgery-csrf
+and https://github.com/rails/jquery-rails/blob/v4.3.1/vendor/assets/javascripts/jquery_ujs.js#L59-L62
  */
 
 const csrf = {
@@ -53,4 +56,3 @@ if ($.rails) {
 }
 
 export default csrf;
-
diff --git a/app/assets/javascripts/profile/account/components/delete_account_modal.vue b/app/assets/javascripts/profile/account/components/delete_account_modal.vue
new file mode 100644
index 00000000000..b2b34cb83e1
--- /dev/null
+++ b/app/assets/javascripts/profile/account/components/delete_account_modal.vue
@@ -0,0 +1,146 @@
+<script>
+  import popupDialog from '../../../vue_shared/components/popup_dialog.vue';
+  import { __, s__, sprintf } from '../../../locale';
+  import csrf from '../../../lib/utils/csrf';
+
+  export default {
+    props: {
+      actionUrl: {
+        type: String,
+        required: true,
+      },
+      confirmWithPassword: {
+        type: Boolean,
+        required: true,
+      },
+      username: {
+        type: String,
+        required: true,
+      },
+    },
+    data() {
+      return {
+        enteredPassword: '',
+        enteredUsername: '',
+        isOpen: false,
+      };
+    },
+    components: {
+      popupDialog,
+    },
+    computed: {
+      csrfToken() {
+        return csrf.token;
+      },
+      inputLabel() {
+        let confirmationValue;
+        if (this.confirmWithPassword) {
+          confirmationValue = __('password');
+        } else {
+          confirmationValue = __('username');
+        }
+
+        confirmationValue = `<code>${confirmationValue}</code>`;
+
+        return sprintf(
+          s__('Profiles|Type your %{confirmationValue} to confirm:'),
+          { confirmationValue },
+          false,
+        );
+      },
+      text() {
+        return sprintf(
+          s__(`Profiles|
+You are about to permanently delete %{yourAccount}, and all of the issues, merge requests, and groups linked to your account.
+Once you confirm %{deleteAccount}, it cannot be undone or recovered.`),
+          {
+            yourAccount: `<strong>${s__('Profiles|your account')}</strong>`,
+            deleteAccount: `<strong>${s__('Profiles|Delete Account')}</strong>`,
+          },
+          false,
+        );
+      },
+    },
+    methods: {
+      canSubmit() {
+        if (this.confirmWithPassword) {
+          return this.enteredPassword !== '';
+        }
+
+        return this.enteredUsername === this.username;
+      },
+      onSubmit(status) {
+        if (status) {
+          if (!this.canSubmit()) {
+            return;
+          }
+
+          this.$refs.form.submit();
+        }
+
+        this.toggleOpen(false);
+      },
+      toggleOpen(isOpen) {
+        this.isOpen = isOpen;
+      },
+    },
+  };
+</script>
+
+<template>
+  <div>
+    <popup-dialog
+      v-if="isOpen"
+      :title="s__('Profiles|Delete your account?')"
+      :text="text"
+      :kind="`danger ${!canSubmit() && 'disabled'}`"
+      :primary-button-label="s__('Profiles|Delete account')"
+      @toggle="toggleOpen"
+      @submit="onSubmit">
+
+      <template slot="body" scope="props">
+        <p v-html="props.text"></p>
+
+        <form
+          ref="form"
+          :action="actionUrl"
+          method="post">
+
+          <input
+            type="hidden"
+            name="_method"
+            value="delete" />
+          <input
+            type="hidden"
+            name="authenticity_token"
+            :value="csrfToken" />
+
+          <p id="input-label" v-html="inputLabel"></p>
+
+          <input
+            v-if="confirmWithPassword"
+            name="password"
+            class="form-control"
+            type="password"
+            v-model="enteredPassword"
+            aria-labelledby="input-label" />
+          <input
+            v-else
+            name="username"
+            class="form-control"
+            type="text"
+            v-model="enteredUsername"
+            aria-labelledby="input-label" />
+        </form>
+      </template>
+
+    </popup-dialog>
+
+    <button
+      type="button"
+      class="btn btn-danger"
+      @click="toggleOpen(true)">
+      {{ s__('Profiles|Delete account') }}
+    </button>
+  </div>
+</template>
diff --git a/app/assets/javascripts/profile/account/index.js b/app/assets/javascripts/profile/account/index.js
new file mode 100644
index 00000000000..635056e0eeb
--- /dev/null
+++ b/app/assets/javascripts/profile/account/index.js
@@ -0,0 +1,21 @@
+import Vue from 'vue';
+
+import deleteAccountModal from './components/delete_account_modal.vue';
+
+const deleteAccountModalEl = document.getElementById('delete-account-modal');
+// eslint-disable-next-line no-new
+new Vue({
+  el: deleteAccountModalEl,
+  components: {
+    deleteAccountModal,
+  },
+  render(createElement) {
+    return createElement('delete-account-modal', {
+      props: {
+        actionUrl: deleteAccountModalEl.dataset.actionUrl,
+        confirmWithPassword: !!deleteAccountModalEl.dataset.confirmWithPassword,
+        username: deleteAccountModalEl.dataset.username,
+      },
+    });
+  },
+});
diff --git a/app/assets/javascripts/repo/components/repo.vue b/app/assets/javascripts/repo/components/repo.vue
index d6c864cb976..cc60aa5939c 100644
--- a/app/assets/javascripts/repo/components/repo.vue
+++ b/app/assets/javascripts/repo/components/repo.vue
@@ -62,7 +62,7 @@ export default {
       :primary-button-label="__('Discard changes')"
       kind="warning"
       :title="__('Are you sure?')"
-      :body="__('Are you sure you want to discard your changes?')"
+      :text="__('Are you sure you want to discard your changes?')"
       @toggle="toggleDialogOpen"
       @submit="dialogSubmitted"
     />
diff --git a/app/assets/javascripts/vue_shared/components/popup_dialog.vue b/app/assets/javascripts/vue_shared/components/popup_dialog.vue
index 994b33bc1c9..9279b50cd55 100644
--- a/app/assets/javascripts/vue_shared/components/popup_dialog.vue
+++ b/app/assets/javascripts/vue_shared/components/popup_dialog.vue
@@ -7,7 +7,7 @@ export default {
       type: String,
       required: true,
     },
-    body: {
+    text: {
       type: String,
       required: true,
     },
@@ -63,7 +63,9 @@ export default {
         <h4 class="modal-title">{{this.title}}</h4>
       </div>
       <div class="modal-body">
-        <p>{{this.body}}</p>
+        <slot name="body" :text="text">
+          <p>{{text}}</p>
+        </slot>
       </div>
       <div class="modal-footer">
         <button
-- 
cgit v1.2.3


From b54203f0ada8f7ad6d24437b6f5f46ebf43f8695 Mon Sep 17 00:00:00 2001
From: Felipe Artur <fcardozo@gitlab.com>
Date: Sat, 7 Oct 2017 04:25:17 +0000
Subject: Commenting on image diffs

---
 app/assets/javascripts/commit.js                   |  12 --
 app/assets/javascripts/commit/file.js              |  14 --
 app/assets/javascripts/commit/image_file.js        |  13 +-
 app/assets/javascripts/diff.js                     |   5 +-
 .../diff_notes/components/jump_to_discussion.js    |   9 +-
 app/assets/javascripts/dispatcher.js               |   2 -
 .../javascripts/image_diff/helpers/badge_helper.js |  38 ++++++
 .../image_diff/helpers/comment_indicator_helper.js |  58 +++++++++
 .../javascripts/image_diff/helpers/dom_helper.js   |  44 +++++++
 app/assets/javascripts/image_diff/helpers/index.js |  25 ++++
 .../javascripts/image_diff/helpers/utils_helper.js |  95 ++++++++++++++
 app/assets/javascripts/image_diff/image_badge.js   |  23 ++++
 app/assets/javascripts/image_diff/image_diff.js    | 143 +++++++++++++++++++++
 .../javascripts/image_diff/init_discussion_tab.js  |  12 ++
 .../javascripts/image_diff/replaced_image_diff.js  |  92 +++++++++++++
 app/assets/javascripts/image_diff/view_types.js    |   9 ++
 app/assets/javascripts/lib/utils/image_utility.js  |   5 +
 app/assets/javascripts/main.js                     |   3 -
 app/assets/javascripts/merge_request_tabs.js       |   4 +
 app/assets/javascripts/notes.js                    | 128 ++++++++++++++++--
 app/assets/javascripts/single_file_diff.js         |   7 +-
 21 files changed, 690 insertions(+), 51 deletions(-)
 delete mode 100644 app/assets/javascripts/commit.js
 delete mode 100644 app/assets/javascripts/commit/file.js
 create mode 100644 app/assets/javascripts/image_diff/helpers/badge_helper.js
 create mode 100644 app/assets/javascripts/image_diff/helpers/comment_indicator_helper.js
 create mode 100644 app/assets/javascripts/image_diff/helpers/dom_helper.js
 create mode 100644 app/assets/javascripts/image_diff/helpers/index.js
 create mode 100644 app/assets/javascripts/image_diff/helpers/utils_helper.js
 create mode 100644 app/assets/javascripts/image_diff/image_badge.js
 create mode 100644 app/assets/javascripts/image_diff/image_diff.js
 create mode 100644 app/assets/javascripts/image_diff/init_discussion_tab.js
 create mode 100644 app/assets/javascripts/image_diff/replaced_image_diff.js
 create mode 100644 app/assets/javascripts/image_diff/view_types.js
 create mode 100644 app/assets/javascripts/lib/utils/image_utility.js

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/commit.js b/app/assets/javascripts/commit.js
deleted file mode 100644
index 5f637524e30..00000000000
--- a/app/assets/javascripts/commit.js
+++ /dev/null
@@ -1,12 +0,0 @@
-/* eslint-disable func-names, space-before-function-paren, wrap-iife */
-/* global CommitFile */
-
-window.Commit = (function() {
-  function Commit() {
-    $('.files .diff-file').each(function() {
-      return new CommitFile(this);
-    });
-  }
-
-  return Commit;
-})();
diff --git a/app/assets/javascripts/commit/file.js b/app/assets/javascripts/commit/file.js
deleted file mode 100644
index ee087c978dd..00000000000
--- a/app/assets/javascripts/commit/file.js
+++ /dev/null
@@ -1,14 +0,0 @@
-/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-new */
-/* global ImageFile */
-
-(function() {
-  this.CommitFile = (function() {
-    function CommitFile(file) {
-      if ($('.image', file).length) {
-        new gl.ImageFile(file);
-      }
-    }
-
-    return CommitFile;
-  })();
-}).call(window);
diff --git a/app/assets/javascripts/commit/image_file.js b/app/assets/javascripts/commit/image_file.js
index 4763985c802..e7adf8814b8 100644
--- a/app/assets/javascripts/commit/image_file.js
+++ b/app/assets/javascripts/commit/image_file.js
@@ -1,4 +1,6 @@
 /* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, no-use-before-define, prefer-arrow-callback, no-else-return, consistent-return, prefer-template, quotes, one-var, one-var-declaration-per-line, no-unused-vars, no-return-assign, comma-dangle, quote-props, no-unused-expressions, no-sequences, object-shorthand, max-len */
+import 'vendor/jquery.waitforimages';
+
 (function() {
   gl.ImageFile = (function() {
     var prepareFrames;
@@ -17,15 +19,10 @@
 
             // Load two-up view after images are loaded
             // so that we can display the correct width and height information
-            const images = $('.two-up.view img', _this.file);
-            let loadedCount = 0;
-
-            images.on('load', () => {
-              loadedCount += 1;
+            const $images = $('.two-up.view img', _this.file);
 
-              if (loadedCount === images.length) {
-                _this.initView('two-up');
-              }
+            $images.waitForImages(function() {
+              _this.initView('two-up');
             });
           });
         };
diff --git a/app/assets/javascripts/diff.js b/app/assets/javascripts/diff.js
index 9ddfdb6ae21..6c78662baa7 100644
--- a/app/assets/javascripts/diff.js
+++ b/app/assets/javascripts/diff.js
@@ -3,6 +3,7 @@
 import './lib/utils/url_utility';
 import FilesCommentButton from './files_comment_button';
 import SingleFileDiff from './single_file_diff';
+import imageDiffHelper from './image_diff/helpers/index';
 
 const UNFOLD_COUNT = 20;
 let isBound = false;
@@ -20,7 +21,9 @@ class Diff {
     const tab = document.getElementById('diffs');
     if (!tab || (tab && tab.dataset && tab.dataset.isLocked !== '')) FilesCommentButton.init($diffFile);
 
-    $diffFile.each((index, file) => new gl.ImageFile(file));
+    const firstFile = $('.files').first().get(0);
+    const canCreateNote = firstFile && firstFile.hasAttribute('data-can-create-note');
+    $diffFile.each((index, file) => imageDiffHelper.initImageDiff(file, canCreateNote));
 
     if (!isBound) {
       $(document)
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 497c23f014f..e77910a83d4 100644
--- a/app/assets/javascripts/diff_notes/components/jump_to_discussion.js
+++ b/app/assets/javascripts/diff_notes/components/jump_to_discussion.js
@@ -171,7 +171,14 @@ const JumpToDiscussion = Vue.extend({
         // When jumping between unresolved discussions on the diffs tab, we show them.
         $target.closest(".content").show();
 
-        $target = $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
+        if ($notesHolder.length > 0) {
+          $target = $notesHolder;
+        }
+
         $target.show();
 
         // If we are on the diffs tab, we don't scroll to the discussion itself, but to
diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js
index e4e7cae540e..33271c25146 100644
--- a/app/assets/javascripts/dispatcher.js
+++ b/app/assets/javascripts/dispatcher.js
@@ -7,7 +7,6 @@
 /* global IssuableForm */
 /* global LabelsSelect */
 /* global MilestoneSelect */
-/* global Commit */
 /* global CommitsList */
 /* global NewBranchForm */
 /* global NotificationsForm */
@@ -316,7 +315,6 @@ import { ajaxGet, convertPermissionToBoolean } from './lib/utils/common_utils';
           new gl.Activities();
           break;
         case 'projects:commit:show':
-          new Commit();
           new gl.Diff();
           new ZenMode();
           shortcut_handler = new ShortcutsNavigation();
diff --git a/app/assets/javascripts/image_diff/helpers/badge_helper.js b/app/assets/javascripts/image_diff/helpers/badge_helper.js
new file mode 100644
index 00000000000..6a6a668308d
--- /dev/null
+++ b/app/assets/javascripts/image_diff/helpers/badge_helper.js
@@ -0,0 +1,38 @@
+export function createImageBadge(noteId, { x, y }, classNames = []) {
+  const buttonEl = document.createElement('button');
+  const classList = classNames.concat(['js-image-badge']);
+  classList.forEach(className => buttonEl.classList.add(className));
+  buttonEl.setAttribute('type', 'button');
+  buttonEl.setAttribute('disabled', true);
+  buttonEl.dataset.noteId = noteId;
+  buttonEl.style.left = `${x}px`;
+  buttonEl.style.top = `${y}px`;
+
+  return buttonEl;
+}
+
+export function addImageBadge(containerEl, { coordinate, badgeText, noteId }) {
+  const buttonEl = createImageBadge(noteId, coordinate, ['badge']);
+  buttonEl.innerText = badgeText;
+
+  containerEl.appendChild(buttonEl);
+}
+
+export function addImageCommentBadge(containerEl, { coordinate, noteId }) {
+  const buttonEl = createImageBadge(noteId, coordinate, ['image-comment-badge', 'inverted']);
+  const iconEl = document.createElement('i');
+  iconEl.className = 'fa fa-comment-o';
+  iconEl.setAttribute('aria-label', 'comment');
+
+  buttonEl.appendChild(iconEl);
+  containerEl.appendChild(buttonEl);
+}
+
+export function addAvatarBadge(el, event) {
+  const { noteId, badgeNumber } = event.detail;
+
+  // Add badge to new comment
+  const avatarBadgeEl = el.querySelector(`#${noteId} .badge`);
+  avatarBadgeEl.innerText = badgeNumber;
+  avatarBadgeEl.classList.remove('hidden');
+}
diff --git a/app/assets/javascripts/image_diff/helpers/comment_indicator_helper.js b/app/assets/javascripts/image_diff/helpers/comment_indicator_helper.js
new file mode 100644
index 00000000000..05000c73052
--- /dev/null
+++ b/app/assets/javascripts/image_diff/helpers/comment_indicator_helper.js
@@ -0,0 +1,58 @@
+export function addCommentIndicator(containerEl, { x, y }) {
+  const buttonEl = document.createElement('button');
+  buttonEl.classList.add('btn-transparent');
+  buttonEl.classList.add('comment-indicator');
+  buttonEl.setAttribute('type', 'button');
+  buttonEl.style.left = `${x}px`;
+  buttonEl.style.top = `${y}px`;
+
+  buttonEl.innerHTML = gl.utils.spriteIcon('image-comment-dark');
+
+  containerEl.appendChild(buttonEl);
+}
+
+export function removeCommentIndicator(imageFrameEl) {
+  const commentIndicatorEl = imageFrameEl.querySelector('.comment-indicator');
+  const imageEl = imageFrameEl.querySelector('img');
+  const willRemove = !!commentIndicatorEl;
+  let meta = {};
+
+  if (willRemove) {
+    meta = {
+      x: parseInt(commentIndicatorEl.style.left, 10),
+      y: parseInt(commentIndicatorEl.style.top, 10),
+      image: {
+        width: imageEl.width,
+        height: imageEl.height,
+      },
+    };
+
+    commentIndicatorEl.remove();
+  }
+
+  return Object.assign({}, meta, {
+    removed: willRemove,
+  });
+}
+
+export function showCommentIndicator(imageFrameEl, coordinate) {
+  const { x, y } = coordinate;
+  const commentIndicatorEl = imageFrameEl.querySelector('.comment-indicator');
+
+  if (commentIndicatorEl) {
+    commentIndicatorEl.style.left = `${x}px`;
+    commentIndicatorEl.style.top = `${y}px`;
+  } else {
+    addCommentIndicator(imageFrameEl, coordinate);
+  }
+}
+
+export function commentIndicatorOnClick(event) {
+  // Prevent from triggering onAddImageDiffNote in notes.js
+  event.stopPropagation();
+
+  const buttonEl = event.currentTarget;
+  const diffViewerEl = buttonEl.closest('.diff-viewer');
+  const textareaEl = diffViewerEl.querySelector('.note-container .note-textarea');
+  textareaEl.focus();
+}
diff --git a/app/assets/javascripts/image_diff/helpers/dom_helper.js b/app/assets/javascripts/image_diff/helpers/dom_helper.js
new file mode 100644
index 00000000000..12d56714b34
--- /dev/null
+++ b/app/assets/javascripts/image_diff/helpers/dom_helper.js
@@ -0,0 +1,44 @@
+export function setPositionDataAttribute(el, options) {
+  // Update position data attribute so that the
+  // new comment form can use this data for ajax request
+  const { x, y, width, height } = options;
+  const position = el.dataset.position;
+  const positionObject = Object.assign({}, JSON.parse(position), {
+    x,
+    y,
+    width,
+    height,
+  });
+
+  el.setAttribute('data-position', JSON.stringify(positionObject));
+}
+
+export function updateDiscussionAvatarBadgeNumber(discussionEl, newBadgeNumber) {
+  const avatarBadgeEl = discussionEl.querySelector('.image-diff-avatar-link .badge');
+  avatarBadgeEl.innerText = newBadgeNumber;
+}
+
+export function updateDiscussionBadgeNumber(discussionEl, newBadgeNumber) {
+  const discussionBadgeEl = discussionEl.querySelector('.badge');
+  discussionBadgeEl.innerText = newBadgeNumber;
+}
+
+export function toggleCollapsed(event) {
+  const toggleButtonEl = event.currentTarget;
+  const discussionNotesEl = toggleButtonEl.closest('.discussion-notes');
+  const formEl = discussionNotesEl.querySelector('.discussion-form');
+  const isCollapsed = discussionNotesEl.classList.contains('collapsed');
+
+  if (isCollapsed) {
+    discussionNotesEl.classList.remove('collapsed');
+  } else {
+    discussionNotesEl.classList.add('collapsed');
+  }
+
+  // Override the inline display style set in notes.js
+  if (formEl && !isCollapsed) {
+    formEl.style.display = 'none';
+  } else if (formEl && isCollapsed) {
+    formEl.style.display = 'block';
+  }
+}
diff --git a/app/assets/javascripts/image_diff/helpers/index.js b/app/assets/javascripts/image_diff/helpers/index.js
new file mode 100644
index 00000000000..4a100631003
--- /dev/null
+++ b/app/assets/javascripts/image_diff/helpers/index.js
@@ -0,0 +1,25 @@
+import * as badgeHelper from './badge_helper';
+import * as commentIndicatorHelper from './comment_indicator_helper';
+import * as domHelper from './dom_helper';
+import * as utilsHelper from './utils_helper';
+
+export default {
+  addCommentIndicator: commentIndicatorHelper.addCommentIndicator,
+  removeCommentIndicator: commentIndicatorHelper.removeCommentIndicator,
+  showCommentIndicator: commentIndicatorHelper.showCommentIndicator,
+  commentIndicatorOnClick: commentIndicatorHelper.commentIndicatorOnClick,
+
+  addImageBadge: badgeHelper.addImageBadge,
+  addImageCommentBadge: badgeHelper.addImageCommentBadge,
+  addAvatarBadge: badgeHelper.addAvatarBadge,
+
+  setPositionDataAttribute: domHelper.setPositionDataAttribute,
+  updateDiscussionAvatarBadgeNumber: domHelper.updateDiscussionAvatarBadgeNumber,
+  updateDiscussionBadgeNumber: domHelper.updateDiscussionBadgeNumber,
+  toggleCollapsed: domHelper.toggleCollapsed,
+
+  resizeCoordinatesToImageElement: utilsHelper.resizeCoordinatesToImageElement,
+  generateBadgeFromDiscussionDOM: utilsHelper.generateBadgeFromDiscussionDOM,
+  getTargetSelection: utilsHelper.getTargetSelection,
+  initImageDiff: utilsHelper.initImageDiff,
+};
diff --git a/app/assets/javascripts/image_diff/helpers/utils_helper.js b/app/assets/javascripts/image_diff/helpers/utils_helper.js
new file mode 100644
index 00000000000..96fc735e629
--- /dev/null
+++ b/app/assets/javascripts/image_diff/helpers/utils_helper.js
@@ -0,0 +1,95 @@
+import ImageBadge from '../image_badge';
+import ImageDiff from '../image_diff';
+import ReplacedImageDiff from '../replaced_image_diff';
+import '../../commit/image_file';
+
+export function resizeCoordinatesToImageElement(imageEl, meta) {
+  const { x, y, width, height } = meta;
+
+  const imageWidth = imageEl.width;
+  const imageHeight = imageEl.height;
+
+  const widthRatio = imageWidth / width;
+  const heightRatio = imageHeight / height;
+
+  return {
+    x: Math.round(x * widthRatio),
+    y: Math.round(y * heightRatio),
+    width: imageWidth,
+    height: imageHeight,
+  };
+}
+
+export function generateBadgeFromDiscussionDOM(imageFrameEl, discussionEl) {
+  const position = JSON.parse(discussionEl.dataset.position);
+  const firstNoteEl = discussionEl.querySelector('.note');
+  const badge = new ImageBadge({
+    actual: position,
+    imageEl: imageFrameEl.querySelector('img'),
+    noteId: firstNoteEl.id,
+    discussionId: discussionEl.dataset.discussionId,
+  });
+
+  return badge;
+}
+
+export function getTargetSelection(event) {
+  const containerEl = event.currentTarget;
+  const imageEl = containerEl.querySelector('img');
+
+  const x = event.offsetX;
+  const y = event.offsetY;
+
+  const width = imageEl.width;
+  const height = imageEl.height;
+
+  const actualWidth = imageEl.naturalWidth;
+  const actualHeight = imageEl.naturalHeight;
+
+  const widthRatio = actualWidth / width;
+  const heightRatio = actualHeight / height;
+
+  // Browser will include the frame as a clickable target,
+  // which would result in potential 1px out of bounds value
+  // This bound the coordinates to inside the frame
+  const normalizedX = Math.max(0, x) && Math.min(x, width);
+  const normalizedY = Math.max(0, y) && Math.min(y, height);
+
+  return {
+    browser: {
+      x: normalizedX,
+      y: normalizedY,
+      width,
+      height,
+    },
+    actual: {
+      // Round x, y so that we don't need to deal with decimals
+      x: Math.round(normalizedX * widthRatio),
+      y: Math.round(normalizedY * heightRatio),
+      width: actualWidth,
+      height: actualHeight,
+    },
+  };
+}
+
+export function initImageDiff(fileEl, canCreateNote, renderCommentBadge) {
+  const options = {
+    canCreateNote,
+    renderCommentBadge,
+  };
+  let diff;
+
+  // ImageFile needs to be invoked before initImageDiff so that badges
+  // can mount to the correct location
+  new gl.ImageFile(fileEl); // eslint-disable-line no-new
+
+  if (fileEl.querySelector('.diff-file .js-single-image')) {
+    diff = new ImageDiff(fileEl, options);
+    diff.init();
+  } else if (fileEl.querySelector('.diff-file .js-replaced-image')) {
+    diff = new ReplacedImageDiff(fileEl, options);
+    diff.init();
+  }
+
+  return diff;
+}
diff --git a/app/assets/javascripts/image_diff/image_badge.js b/app/assets/javascripts/image_diff/image_badge.js
new file mode 100644
index 00000000000..51a8cda98d7
--- /dev/null
+++ b/app/assets/javascripts/image_diff/image_badge.js
@@ -0,0 +1,23 @@
+import imageDiffHelper from './helpers/index';
+
+const defaultMeta = {
+  x: 0,
+  y: 0,
+  width: 0,
+  height: 0,
+};
+
+export default class ImageBadge {
+  constructor(options) {
+    const { noteId, discussionId } = options;
+
+    this.actual = options.actual || defaultMeta;
+    this.browser = options.browser || defaultMeta;
+    this.noteId = noteId;
+    this.discussionId = discussionId;
+
+    if (options.imageEl && !options.browser) {
+      this.browser = imageDiffHelper.resizeCoordinatesToImageElement(options.imageEl, this.actual);
+    }
+  }
+}
diff --git a/app/assets/javascripts/image_diff/image_diff.js b/app/assets/javascripts/image_diff/image_diff.js
new file mode 100644
index 00000000000..f3af92cf2b0
--- /dev/null
+++ b/app/assets/javascripts/image_diff/image_diff.js
@@ -0,0 +1,143 @@
+import imageDiffHelper from './helpers/index';
+import ImageBadge from './image_badge';
+import { isImageLoaded } from '../lib/utils/image_utility';
+
+export default class ImageDiff {
+  constructor(el, options) {
+    this.el = el;
+    this.canCreateNote = !!(options && options.canCreateNote);
+    this.renderCommentBadge = !!(options && options.renderCommentBadge);
+    this.$noteContainer = $('.note-container', this.el);
+    this.imageBadges = [];
+  }
+
+  init() {
+    this.imageFrameEl = this.el.querySelector('.diff-file .js-image-frame');
+    this.imageEl = this.imageFrameEl.querySelector('img');
+
+    this.bindEvents();
+  }
+
+  bindEvents() {
+    this.imageClickedWrapper = this.imageClicked.bind(this);
+    this.imageBlurredWrapper = imageDiffHelper.removeCommentIndicator.bind(null, this.imageFrameEl);
+    this.addBadgeWrapper = this.addBadge.bind(this);
+    this.removeBadgeWrapper = this.removeBadge.bind(this);
+    this.renderBadgesWrapper = this.renderBadges.bind(this);
+
+    // Render badges
+    if (isImageLoaded(this.imageEl)) {
+      this.renderBadges();
+    } else {
+      this.imageEl.addEventListener('load', this.renderBadgesWrapper);
+    }
+
+    // jquery makes the event delegation here much simpler
+    this.$noteContainer.on('click', '.js-diff-notes-toggle', imageDiffHelper.toggleCollapsed);
+    $(this.el).on('click', '.comment-indicator', imageDiffHelper.commentIndicatorOnClick);
+
+    if (this.canCreateNote) {
+      this.el.addEventListener('click.imageDiff', this.imageClickedWrapper);
+      this.el.addEventListener('blur.imageDiff', this.imageBlurredWrapper);
+      this.el.addEventListener('addBadge.imageDiff', this.addBadgeWrapper);
+      this.el.addEventListener('removeBadge.imageDiff', this.removeBadgeWrapper);
+    }
+  }
+
+  imageClicked(event) {
+    const customEvent = event.detail;
+    const selection = imageDiffHelper.getTargetSelection(customEvent);
+    const el = customEvent.currentTarget;
+
+    imageDiffHelper.setPositionDataAttribute(el, selection.actual);
+    imageDiffHelper.showCommentIndicator(this.imageFrameEl, selection.browser);
+  }
+
+  renderBadges() {
+    const discussionsEls = this.el.querySelectorAll('.note-container .discussion-notes .notes');
+    [...discussionsEls].forEach(this.renderBadge.bind(this));
+  }
+
+  renderBadge(discussionEl, index) {
+    const imageBadge = imageDiffHelper
+      .generateBadgeFromDiscussionDOM(this.imageFrameEl, discussionEl);
+
+    this.imageBadges.push(imageBadge);
+
+    const options = {
+      coordinate: imageBadge.browser,
+      noteId: imageBadge.noteId,
+    };
+
+    if (this.renderCommentBadge) {
+      imageDiffHelper.addImageCommentBadge(this.imageFrameEl, options);
+    } else {
+      const numberBadgeOptions = Object.assign({}, options, {
+        badgeText: index + 1,
+      });
+
+      imageDiffHelper.addImageBadge(this.imageFrameEl, numberBadgeOptions);
+    }
+  }
+
+  addBadge(event) {
+    const { x, y, width, height, noteId, discussionId } = event.detail;
+    const badgeText = this.imageBadges.length + 1;
+    const imageBadge = new ImageBadge({
+      actual: {
+        x,
+        y,
+        width,
+        height,
+      },
+      imageEl: this.imageFrameEl.querySelector('img'),
+      noteId,
+      discussionId,
+    });
+
+    this.imageBadges.push(imageBadge);
+
+    imageDiffHelper.addImageBadge(this.imageFrameEl, {
+      coordinate: imageBadge.browser,
+      badgeText,
+      noteId,
+    });
+
+    imageDiffHelper.addAvatarBadge(this.el, {
+      detail: {
+        noteId,
+        badgeNumber: badgeText,
+      },
+    });
+
+    const discussionEl = this.el.querySelector(`#discussion_${discussionId}`);
+    imageDiffHelper.updateDiscussionBadgeNumber(discussionEl, badgeText);
+  }
+
+  removeBadge(event) {
+    const { badgeNumber } = event.detail;
+    const indexToRemove = badgeNumber - 1;
+    const imageBadgeEls = this.imageFrameEl.querySelectorAll('.badge');
+
+    if (this.imageBadges.length !== badgeNumber) {
+      // Cascade badges count numbers for (avatar badges + image badges)
+      this.imageBadges.forEach((badge, index) => {
+        if (index > indexToRemove) {
+          const { discussionId } = badge;
+          const updatedBadgeNumber = index;
+          const discussionEl = this.el.querySelector(`#discussion_${discussionId}`);
+
+          imageBadgeEls[index].innerText = updatedBadgeNumber;
+
+          imageDiffHelper.updateDiscussionBadgeNumber(discussionEl, updatedBadgeNumber);
+          imageDiffHelper.updateDiscussionAvatarBadgeNumber(discussionEl, updatedBadgeNumber);
+        }
+      });
+    }
+
+    this.imageBadges.splice(indexToRemove, 1);
+
+    const imageBadgeEl = imageBadgeEls[indexToRemove];
+    imageBadgeEl.remove();
+  }
+}
diff --git a/app/assets/javascripts/image_diff/init_discussion_tab.js b/app/assets/javascripts/image_diff/init_discussion_tab.js
new file mode 100644
index 00000000000..2f16c6ef115
--- /dev/null
+++ b/app/assets/javascripts/image_diff/init_discussion_tab.js
@@ -0,0 +1,12 @@
+import imageDiffHelper from './helpers/index';
+
+export default () => {
+  // Always pass can-create-note as false because a user
+  // cannot place new badge markers on discussion tab
+  const canCreateNote = false;
+  const renderCommentBadge = true;
+
+  const diffFileEls = document.querySelectorAll('.timeline-content .diff-file.js-image-file');
+  [...diffFileEls].forEach(diffFileEl =>
+    imageDiffHelper.initImageDiff(diffFileEl, canCreateNote, renderCommentBadge));
+};
diff --git a/app/assets/javascripts/image_diff/replaced_image_diff.js b/app/assets/javascripts/image_diff/replaced_image_diff.js
new file mode 100644
index 00000000000..4abd13fb472
--- /dev/null
+++ b/app/assets/javascripts/image_diff/replaced_image_diff.js
@@ -0,0 +1,92 @@
+import imageDiffHelper from './helpers/index';
+import { viewTypes, isValidViewType } from './view_types';
+import ImageDiff from './image_diff';
+
+export default class ReplacedImageDiff extends ImageDiff {
+  init(defaultViewType = viewTypes.TWO_UP) {
+    this.imageFrameEls = {
+      [viewTypes.TWO_UP]: this.el.querySelector('.two-up .js-image-frame'),
+      [viewTypes.SWIPE]: this.el.querySelector('.swipe .js-image-frame'),
+      [viewTypes.ONION_SKIN]: this.el.querySelector('.onion-skin .js-image-frame'),
+    };
+
+    const viewModesEl = this.el.querySelector('.view-modes-menu');
+    this.viewModesEls = {
+      [viewTypes.TWO_UP]: viewModesEl.querySelector('.two-up'),
+      [viewTypes.SWIPE]: viewModesEl.querySelector('.swipe'),
+      [viewTypes.ONION_SKIN]: viewModesEl.querySelector('.onion-skin'),
+    };
+
+    this.currentView = defaultViewType;
+    this.generateImageEls();
+    this.bindEvents();
+  }
+
+  generateImageEls() {
+    this.imageEls = {};
+
+    const viewTypeNames = Object.getOwnPropertyNames(viewTypes);
+    viewTypeNames.forEach((viewType) => {
+      this.imageEls[viewType] = this.imageFrameEls[viewType].querySelector('img');
+    });
+  }
+
+  bindEvents() {
+    super.bindEvents();
+
+    this.changeToViewTwoUp = this.changeView.bind(this, viewTypes.TWO_UP);
+    this.changeToViewSwipe = this.changeView.bind(this, viewTypes.SWIPE);
+    this.changeToViewOnionSkin = this.changeView.bind(this, viewTypes.ONION_SKIN);
+
+    this.viewModesEls[viewTypes.TWO_UP].addEventListener('click', this.changeToViewTwoUp);
+    this.viewModesEls[viewTypes.SWIPE].addEventListener('click', this.changeToViewSwipe);
+    this.viewModesEls[viewTypes.ONION_SKIN].addEventListener('click', this.changeToViewOnionSkin);
+  }
+
+  get imageEl() {
+    return this.imageEls[this.currentView];
+  }
+
+  get imageFrameEl() {
+    return this.imageFrameEls[this.currentView];
+  }
+
+  changeView(newView) {
+    if (!isValidViewType(newView)) {
+      return;
+    }
+
+    const indicator = imageDiffHelper.removeCommentIndicator(this.imageFrameEl);
+
+    this.currentView = newView;
+
+    // Clear existing badges on new view
+    const existingBadges = this.imageFrameEl.querySelectorAll('.badge');
+    [...existingBadges].map(badge => badge.remove());
+
+    // Remove existing references to old view image badges
+    this.imageBadges = [];
+
+    // Image_file.js has a fade animation of 200ms for loading the view
+    // Need to wait an additional 250ms for the images to be displayed
+    // on window in order to re-normalize their dimensions
+    setTimeout(this.renderNewView.bind(this, indicator), 250);
+  }
+
+  renderNewView(indicator) {
+    // Generate badge coordinates on new view
+    this.renderBadges();
+
+    // Re-render indicator in new view
+    if (indicator.removed) {
+      const normalizedIndicator = imageDiffHelper
+        .resizeCoordinatesToImageElement(this.imageEl, {
+          x: indicator.x,
+          y: indicator.y,
+          width: indicator.image.width,
+          height: indicator.image.height,
+        });
+      imageDiffHelper.showCommentIndicator(this.imageFrameEl, normalizedIndicator);
+    }
+  }
+}
diff --git a/app/assets/javascripts/image_diff/view_types.js b/app/assets/javascripts/image_diff/view_types.js
new file mode 100644
index 00000000000..ab0a595571f
--- /dev/null
+++ b/app/assets/javascripts/image_diff/view_types.js
@@ -0,0 +1,9 @@
+export const viewTypes = {
+  TWO_UP: 'TWO_UP',
+  SWIPE: 'SWIPE',
+  ONION_SKIN: 'ONION_SKIN',
+};
+
+export function isValidViewType(validate) {
+  return !!Object.getOwnPropertyNames(viewTypes).find(viewType => viewType === validate);
+}
diff --git a/app/assets/javascripts/lib/utils/image_utility.js b/app/assets/javascripts/lib/utils/image_utility.js
new file mode 100644
index 00000000000..2977ec821cb
--- /dev/null
+++ b/app/assets/javascripts/lib/utils/image_utility.js
@@ -0,0 +1,5 @@
+/* eslint-disable import/prefer-default-export */
+
+export function isImageLoaded(element) {
+  return element.complete && element.naturalHeight !== 0;
+}
diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js
index 2c1dcc374ff..5858c2b6fd8 100644
--- a/app/assets/javascripts/main.js
+++ b/app/assets/javascripts/main.js
@@ -35,8 +35,6 @@ import './shortcuts_network';
 import './templates/issuable_template_selector';
 import './templates/issuable_template_selectors';
 
-// commit
-import './commit/file';
 import './commit/image_file';
 
 // lib/utils
@@ -70,7 +68,6 @@ import './build';
 import './build_artifacts';
 import './build_variables';
 import './ci_lint_editor';
-import './commit';
 import './commits';
 import './compare';
 import './compare_autocomplete';
diff --git a/app/assets/javascripts/merge_request_tabs.js b/app/assets/javascripts/merge_request_tabs.js
index d3299c15720..c042b22d1fd 100644
--- a/app/assets/javascripts/merge_request_tabs.js
+++ b/app/assets/javascripts/merge_request_tabs.js
@@ -13,6 +13,8 @@ import {
   isMetaClick,
 } from './lib/utils/common_utils';
 
+import initDiscussionTab from './image_diff/init_discussion_tab';
+
 /* eslint-disable max-len */
 // MergeRequestTabs
 //
@@ -154,6 +156,8 @@ import {
         }
         this.resetViewContainer();
         this.destroyPipelinesView();
+
+        initDiscussionTab();
       }
       if (this.setUrl) {
         this.setCurrentAction(action);
diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js
index 93aa29454a0..24de21f2ce2 100644
--- a/app/assets/javascripts/notes.js
+++ b/app/assets/javascripts/notes.js
@@ -24,6 +24,7 @@ import './autosave';
 import './dropzone_input';
 import TaskList from './task_list';
 import { ajaxPost, isInViewport, getPagePath, scrollToElement, isMetaKey } from './lib/utils/common_utils';
+import imageDiffHelper from './image_diff/helpers/index';
 
 window.autosize = autosize;
 window.Dropzone = Dropzone;
@@ -42,6 +43,7 @@ export default class Notes {
     this.visibilityChange = this.visibilityChange.bind(this);
     this.cancelDiscussionForm = this.cancelDiscussionForm.bind(this);
     this.onAddDiffNote = this.onAddDiffNote.bind(this);
+    this.onAddImageDiffNote = this.onAddImageDiffNote.bind(this);
     this.setupDiscussionNoteForm = this.setupDiscussionNoteForm.bind(this);
     this.onReplyToDiscussionNote = this.onReplyToDiscussionNote.bind(this);
     this.removeNote = this.removeNote.bind(this);
@@ -114,6 +116,8 @@ export default class Notes {
     $(document).on('click', '.js-discussion-reply-button', this.onReplyToDiscussionNote);
     // add diff note
     $(document).on('click', '.js-add-diff-note-button', this.onAddDiffNote);
+    // add diff note for images
+    $(document).on('click', '.js-add-image-diff-note-button', this.onAddImageDiffNote);
     // hide diff note form
     $(document).on('click', '.js-close-discussion-note-form', this.cancelDiscussionForm);
     // toggle commit list
@@ -140,6 +144,7 @@ export default class Notes {
     $(document).off('click', '.js-note-attachment-delete');
     $(document).off('click', '.js-discussion-reply-button');
     $(document).off('click', '.js-add-diff-note-button');
+    $(document).off('click', '.js-add-image-diff-note-button');
     $(document).off('visibilitychange');
     $(document).off('keyup input', '.js-note-text');
     $(document).off('click', '.js-note-target-reopen');
@@ -412,6 +417,11 @@ export default class Notes {
     this.note_ids.push(noteEntity.id);
     form = $form || $(`.js-discussion-note-form[data-discussion-id="${noteEntity.discussion_id}"]`);
     row = form.closest('tr');
+
+    if (noteEntity.on_image) {
+      row = form;
+    }
+
     lineType = this.isParallelView() ? form.find('#line_type').val() : 'old';
     diffAvatarContainer = row.prevAll('.line_holder').first().find('.js-avatar-container.' + lineType + '_line');
     // is this the first note of discussion?
@@ -423,7 +433,7 @@ export default class Notes {
       if (noteEntity.diff_discussion_html) {
         var $discussion = $(noteEntity.diff_discussion_html).renderGFM();
 
-        if (!this.isParallelView() || row.hasClass('js-temp-notes-holder')) {
+        if (!this.isParallelView() || row.hasClass('js-temp-notes-holder') || noteEntity.on_image) {
           // insert the note and the reply button after the temp row
           row.after($discussion);
         } else {
@@ -449,6 +459,7 @@ export default class Notes {
 
     if (typeof gl.diffNotesCompileComponents !== 'undefined' && noteEntity.discussion_resolvable) {
       gl.diffNotesCompileComponents();
+
       this.renderDiscussionAvatar(diffAvatarContainer, noteEntity);
     }
 
@@ -561,7 +572,7 @@ export default class Notes {
       form.find('#note_line_code').val(),
 
       // DiffNote
-      form.find('#note_position').val()
+      form.find('#note_position').val(),
     ];
     return new Autosave(textarea, key);
   }
@@ -783,9 +794,22 @@ export default class Notes {
           $(`.js-diff-avatars-${discussionId}`).trigger('remove.vue');
 
           // The notes tr can contain multiple lists of notes, like on the parallel diff
-          if (notesTr.find('.discussion-notes').length > 1) {
+          // notesTr does not exist for image diffs
+          if (notesTr.find('.discussion-notes').length > 1 || notesTr.length === 0) {
+            const $diffFile = $notes.closest('.diff-file');
+            if ($diffFile.length > 0) {
+              const removeBadgeEvent = new CustomEvent('removeBadge.imageDiff', {
+                detail: {
+                  // badgeNumber's start with 1 and index starts with 0
+                  badgeNumber: $notes.index() + 1,
+                },
+              });
+
+              $diffFile[0].dispatchEvent(removeBadgeEvent);
+            }
+
             $notes.remove();
-          } else {
+          } else if (notesTr.length > 0) {
             notesTr.remove();
           }
         }
@@ -841,7 +865,11 @@ export default class Notes {
    */
   setupDiscussionNoteForm(dataHolder, form) {
     // setup note target
-    const diffFileData = dataHolder.closest('.text-file');
+    let diffFileData = dataHolder.closest('.text-file');
+
+    if (diffFileData.length === 0) {
+      diffFileData = dataHolder.closest('.image');
+    }
 
     var discussionID = dataHolder.data('discussionId');
 
@@ -907,6 +935,31 @@ export default class Notes {
     });
   }
 
+  onAddImageDiffNote(e) {
+    const $link = $(e.currentTarget || e.target);
+    const $diffFile = $link.closest('.diff-file');
+
+    const clickEvent = new CustomEvent('click.imageDiff', {
+      detail: e,
+    });
+
+    $diffFile[0].dispatchEvent(clickEvent);
+
+    // Setup comment form
+    let newForm;
+    const $noteContainer = $link.closest('.diff-viewer').find('.note-container');
+    const $form = $noteContainer.find('> .discussion-form');
+
+    if ($form.length === 0) {
+      newForm = this.cleanForm(this.formClone.clone());
+      newForm.appendTo($noteContainer);
+    } else {
+      newForm = $form;
+    }
+
+    this.setupDiscussionNoteForm($link, newForm);
+  }
+
   toggleDiffNote({
     target,
     lineType,
@@ -999,10 +1052,25 @@ export default class Notes {
   }
 
   cancelDiscussionForm(e) {
-    var form;
     e.preventDefault();
-    form = $(e.target).closest('.js-discussion-note-form');
-    return this.removeDiscussionNoteForm(form);
+    const $form = $(e.target).closest('.js-discussion-note-form');
+    const $discussionNote = $(e.target).closest('.discussion-notes');
+
+    if ($discussionNote.length === 0) {
+      // Only send blur event when the discussion form
+      // is not part of a discussion note
+      const $diffFile = $form.closest('.diff-file');
+
+      if ($diffFile.length > 0) {
+        const blurEvent = new CustomEvent('blur.imageDiff', {
+          detail: e,
+        });
+
+        $diffFile[0].dispatchEvent(blurEvent);
+      }
+    }
+
+    return this.removeDiscussionNoteForm($form);
   }
 
   /**
@@ -1414,6 +1482,15 @@ export default class Notes {
         // Submission successful! remove placeholder
         $notesContainer.find(`#${noteUniqueId}`).remove();
 
+        const $diffFile = $form.closest('.diff-file');
+        if ($diffFile.length > 0) {
+          const blurEvent = new CustomEvent('blur.imageDiff', {
+            detail: e,
+          });
+
+          $diffFile[0].dispatchEvent(blurEvent);
+        }
+
         // Reset cached commands list when command is applied
         if (hasQuickActions) {
           $form.find('textarea.js-note-text').trigger('clear-commands-cache.atwho');
@@ -1436,7 +1513,28 @@ export default class Notes {
           }
 
           // Show final note element on UI
-          this.addDiscussionNote($form, note, $notesContainer.length === 0);
+          const isNewDiffComment = $notesContainer.length === 0;
+          this.addDiscussionNote($form, note, isNewDiffComment);
+
+          if (isNewDiffComment) {
+            // Add image badge, avatar badge and toggle discussion badge for new image diffs
+            const notePosition = $form.find('#note_position').val();
+            if ($diffFile.length > 0 && notePosition.length > 0) {
+              const { x, y, width, height } = JSON.parse(notePosition);
+              const addBadgeEvent = new CustomEvent('addBadge.imageDiff', {
+                detail: {
+                  x,
+                  y,
+                  width,
+                  height,
+                  noteId: `note_${note.id}`,
+                  discussionId: note.discussion_id,
+                },
+              });
+
+              $diffFile[0].dispatchEvent(addBadgeEvent);
+            }
+          }
 
           // append flash-container to the Notes list
           if ($notesContainer.length) {
@@ -1457,6 +1555,16 @@ export default class Notes {
         // Submission failed, remove placeholder note and show Flash error message
         $notesContainer.find(`#${noteUniqueId}`).remove();
 
+        const blurEvent = new CustomEvent('blur.imageDiff', {
+          detail: e,
+        });
+
+        const closestDiffFile = $form.closest('.diff-file');
+
+        if (closestDiffFile.length) {
+          closestDiffFile[0].dispatchEvent(blurEvent);
+        }
+
         if (hasQuickActions) {
           $notesContainer.find(`#${systemNoteUniqueId}`).remove();
         }
@@ -1500,6 +1608,8 @@ export default class Notes {
     const $noteBody = $editingNote.find('.js-task-list-container');
     const $noteBodyText = $noteBody.find('.note-text');
     const { formData, formContent, formAction } = this.getFormData($form);
+    const $diffFile = $form.closest('.diff-file');
+    const $notesContainer = $form.closest('.notes');
 
     // Cache original comment content
     const cachedNoteBodyText = $noteBodyText.html();
diff --git a/app/assets/javascripts/single_file_diff.js b/app/assets/javascripts/single_file_diff.js
index 4505a79a2df..3f811c59cb9 100644
--- a/app/assets/javascripts/single_file_diff.js
+++ b/app/assets/javascripts/single_file_diff.js
@@ -1,6 +1,7 @@
 /* eslint-disable func-names, prefer-arrow-callback, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, one-var, one-var-declaration-per-line, consistent-return, no-param-reassign, max-len */
 
 import FilesCommentButton from './files_comment_button';
+import imageDiffHelper from './image_diff/helpers/index';
 
 const WRAPPER = '<div class="diff-content"></div>';
 const LOADING_HTML = '<i class="fa fa-spinner fa-spin"></i>';
@@ -74,7 +75,11 @@ export default class SingleFileDiff {
           gl.diffNotesCompileComponents();
         }
 
-        FilesCommentButton.init($(_this.file));
+        const $file = $(_this.file);
+        FilesCommentButton.init($file);
+
+        const canCreateNote = $file.closest('.files').is('[data-can-create-note]');
+        imageDiffHelper.initImageDiff($file[0], canCreateNote);
 
         if (cb) cb();
       };
-- 
cgit v1.2.3


From ccf31a13c5ff253256f5d904bf290c5285b2eeab Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Mon, 9 Oct 2017 07:45:51 +0000
Subject: Move cycle analytics banner into a vue file

---
 .../cycle_analytics/components/banner.vue          | 55 ++++++++++++++++++++++
 .../cycle_analytics/cycle_analytics_bundle.js      |  2 +
 2 files changed, 57 insertions(+)
 create mode 100644 app/assets/javascripts/cycle_analytics/components/banner.vue

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/cycle_analytics/components/banner.vue b/app/assets/javascripts/cycle_analytics/components/banner.vue
new file mode 100644
index 00000000000..732697c134e
--- /dev/null
+++ b/app/assets/javascripts/cycle_analytics/components/banner.vue
@@ -0,0 +1,55 @@
+<script>
+  import iconCycleAnalyticsSplash from 'icons/_icon_cycle_analytics_splash.svg';
+
+  export default {
+    props: {
+      documentationLink: {
+        type: String,
+        required: true,
+      },
+    },
+    computed: {
+      iconCycleAnalyticsSplash() {
+        return iconCycleAnalyticsSplash;
+      },
+    },
+    methods: {
+      dismissOverviewDialog() {
+        this.$emit('dismiss-overview-dialog');
+      },
+    },
+  };
+</script>
+<template>
+  <div class="landing content-block">
+    <button
+      class="js-ca-dismiss-button dismiss-button"
+      type="button"
+      :aria-label="__('Dismiss Cycle Analytics introduction box')"
+      @click="dismissOverviewDialog">
+      <i
+        class="fa fa-times"
+        aria-hidden="true">
+      </i>
+    </button>
+    <div class="svg-container" v-html="iconCycleAnalyticsSplash">
+    </div>
+    <div class="inner-content">
+      <h4>
+        {{__('Introducing Cycle Analytics')}}
+      </h4>
+      <p>
+        {{ __('Cycle Analytics gives an overview of how much time it takes to go from idea to production in your project.') }}
+      </p>
+      <p>
+        <a
+          :href="documentationLink"
+          target="_blank"
+          rel="nofollow"
+          class="btn">
+          {{__('Read more')}}
+        </a>
+      </p>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js b/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js
index 991fcf114da..cdf5e3c0290 100644
--- a/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js
+++ b/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js
@@ -3,6 +3,7 @@
 import Vue from 'vue';
 import Cookies from 'js-cookie';
 import Translate from '../vue_shared/translate';
+import banner from './components/banner.vue';
 import stageCodeComponent from './components/stage_code_component.vue';
 import stagePlanComponent from './components/stage_plan_component.vue';
 import stageComponent from './components/stage_component.vue';
@@ -44,6 +45,7 @@ $(() => {
       },
     },
     components: {
+      banner,
       'stage-issue-component': stageComponent,
       'stage-plan-component': stagePlanComponent,
       'stage-code-component': stageCodeComponent,
-- 
cgit v1.2.3


From 7b8148220c0c7ad17d24c9ddf1e669ee73f086bf Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Mon, 9 Oct 2017 09:04:13 +0000
Subject: Remove AjaxLoadingSpinner and CreateLabelDropdown from global
 namespace

---
 app/assets/javascripts/ajax_loading_spinner.js     |  5 +---
 .../boards/components/new_list_dropdown.js         | 21 ++++++++--------
 app/assets/javascripts/create_label.js             | 29 ++++++++++------------
 app/assets/javascripts/dispatcher.js               |  3 ++-
 app/assets/javascripts/labels_select.js            |  3 ++-
 app/assets/javascripts/main.js                     |  2 --
 6 files changed, 29 insertions(+), 34 deletions(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/ajax_loading_spinner.js b/app/assets/javascripts/ajax_loading_spinner.js
index 8f5e2e545ec..2bc77859c26 100644
--- a/app/assets/javascripts/ajax_loading_spinner.js
+++ b/app/assets/javascripts/ajax_loading_spinner.js
@@ -1,4 +1,4 @@
-class AjaxLoadingSpinner {
+export default class AjaxLoadingSpinner {
   static init() {
     const $elements = $('.js-ajax-loading-spinner');
 
@@ -30,6 +30,3 @@ class AjaxLoadingSpinner {
     classList.toggle('fa-spin');
   }
 }
-
-window.gl = window.gl || {};
-gl.AjaxLoadingSpinner = AjaxLoadingSpinner;
diff --git a/app/assets/javascripts/boards/components/new_list_dropdown.js b/app/assets/javascripts/boards/components/new_list_dropdown.js
index d7f203b3f96..c19c989680d 100644
--- a/app/assets/javascripts/boards/components/new_list_dropdown.js
+++ b/app/assets/javascripts/boards/components/new_list_dropdown.js
@@ -1,6 +1,7 @@
-/* eslint-disable comma-dangle, func-names, no-new, space-before-function-paren, one-var,
+/* eslint-disable func-names, no-new, space-before-function-paren, one-var,
    promise/catch-or-return */
 import _ from 'underscore';
+import CreateLabelDropdown from '../../create_label';
 
 window.gl = window.gl || {};
 window.gl.issueBoards = window.gl.issueBoards || {};
@@ -15,15 +16,15 @@ $(document).off('created.label').on('created.label', (e, label) => {
     label: {
       id: label.id,
       title: label.title,
-      color: label.color
-    }
+      color: label.color,
+    },
   });
 });
 
 gl.issueBoards.newListDropdownInit = () => {
   $('.js-new-board-list').each(function () {
     const $this = $(this);
-    new gl.CreateLabelDropdown($this.closest('.dropdown').find('.dropdown-new-label'), $this.data('namespace-path'), $this.data('project-path'));
+    new CreateLabelDropdown($this.closest('.dropdown').find('.dropdown-new-label'), $this.data('namespace-path'), $this.data('project-path'));
 
     $this.glDropdown({
       data(term, callback) {
@@ -38,17 +39,17 @@ gl.issueBoards.newListDropdownInit = () => {
         const $a = $('<a />', {
           class: (active ? `is-active js-board-list-${active.id}` : ''),
           text: label.title,
-          href: '#'
+          href: '#',
         });
         const $labelColor = $('<span />', {
           class: 'dropdown-label-box',
-          style: `background-color: ${label.color}`
+          style: `background-color: ${label.color}`,
         });
 
         return $li.append($a.prepend($labelColor));
       },
       search: {
-        fields: ['title']
+        fields: ['title'],
       },
       filterable: true,
       selectable: true,
@@ -66,13 +67,13 @@ gl.issueBoards.newListDropdownInit = () => {
             label: {
               id: label.id,
               title: label.title,
-              color: label.color
-            }
+              color: label.color,
+            },
           });
 
           Store.state.lists = _.sortBy(Store.state.lists, 'position');
         }
-      }
+      },
     });
   });
 };
diff --git a/app/assets/javascripts/create_label.js b/app/assets/javascripts/create_label.js
index 907b468e576..3bed0678350 100644
--- a/app/assets/javascripts/create_label.js
+++ b/app/assets/javascripts/create_label.js
@@ -1,8 +1,8 @@
-/* eslint-disable func-names, space-before-function-paren, prefer-arrow-callback, comma-dangle, prefer-template, quotes, no-param-reassign, wrap-iife, max-len */
+/* eslint-disable func-names, prefer-arrow-callback */
 import Api from './api';
 
-class CreateLabelDropdown {
-  constructor ($el, namespacePath, projectPath) {
+export default class CreateLabelDropdown {
+  constructor($el, namespacePath, projectPath) {
     this.$el = $el;
     this.namespacePath = namespacePath;
     this.projectPath = projectPath;
@@ -22,7 +22,7 @@ class CreateLabelDropdown {
     this.addBinding();
   }
 
-  cleanBinding () {
+  cleanBinding() {
     this.$colorSuggestions.off('click');
     this.$newLabelField.off('keyup change');
     this.$newColorField.off('keyup change');
@@ -31,7 +31,7 @@ class CreateLabelDropdown {
     this.$newLabelCreateButton.off('click');
   }
 
-  addBinding () {
+  addBinding() {
     const self = this;
 
     this.$colorSuggestions.on('click', function (e) {
@@ -44,7 +44,7 @@ class CreateLabelDropdown {
 
     this.$dropdownBack.on('click', this.resetForm.bind(this));
 
-    this.$cancelButton.on('click', function(e) {
+    this.$cancelButton.on('click', function (e) {
       e.preventDefault();
       e.stopPropagation();
 
@@ -55,7 +55,7 @@ class CreateLabelDropdown {
     this.$newLabelCreateButton.on('click', this.saveLabel.bind(this));
   }
 
-  addColorValue (e, $this) {
+  addColorValue(e, $this) {
     e.preventDefault();
     e.stopPropagation();
 
@@ -66,7 +66,7 @@ class CreateLabelDropdown {
       .addClass('is-active');
   }
 
-  enableLabelCreateButton () {
+  enableLabelCreateButton() {
     if (this.$newLabelField.val() !== '' && this.$newColorField.val() !== '') {
       this.$newLabelError.hide();
       this.$newLabelCreateButton.enable();
@@ -75,7 +75,7 @@ class CreateLabelDropdown {
     }
   }
 
-  resetForm () {
+  resetForm() {
     this.$newLabelField
       .val('')
       .trigger('change');
@@ -90,13 +90,13 @@ class CreateLabelDropdown {
       .removeClass('is-active');
   }
 
-  saveLabel (e) {
+  saveLabel(e) {
     e.preventDefault();
     e.stopPropagation();
 
     Api.newLabel(this.namespacePath, this.projectPath, {
       title: this.$newLabelField.val(),
-      color: this.$newColorField.val()
+      color: this.$newColorField.val(),
     }, (label) => {
       this.$newLabelCreateButton.enable();
 
@@ -107,8 +107,8 @@ class CreateLabelDropdown {
           errors = label.message;
         } else {
           errors = Object.keys(label.message).map(key =>
-            `${gl.text.humanize(key)} ${label.message[key].join(', ')}`
-          ).join("<br/>");
+            `${gl.text.humanize(key)} ${label.message[key].join(', ')}`,
+          ).join('<br/>');
         }
 
         this.$newLabelError
@@ -122,6 +122,3 @@ class CreateLabelDropdown {
     });
   }
 }
-
-window.gl = window.gl || {};
-gl.CreateLabelDropdown = CreateLabelDropdown;
diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js
index 33271c25146..6a4dce20f24 100644
--- a/app/assets/javascripts/dispatcher.js
+++ b/app/assets/javascripts/dispatcher.js
@@ -76,6 +76,7 @@ import GpgBadges from './gpg_badges';
 import UserFeatureHelper from './helpers/user_feature_helper';
 import initChangesDropdown from './init_changes_dropdown';
 import { ajaxGet, convertPermissionToBoolean } from './lib/utils/common_utils';
+import AjaxLoadingSpinner from './ajax_loading_spinner';
 
 (function() {
   var Dispatcher;
@@ -237,7 +238,7 @@ import { ajaxGet, convertPermissionToBoolean } from './lib/utils/common_utils';
           new NewBranchForm($('.js-create-branch-form'), JSON.parse(document.getElementById('availableRefs').innerHTML));
           break;
         case 'projects:branches:index':
-          gl.AjaxLoadingSpinner.init();
+          AjaxLoadingSpinner.init();
           new DeleteModal();
           break;
         case 'projects:issues:new':
diff --git a/app/assets/javascripts/labels_select.js b/app/assets/javascripts/labels_select.js
index 2538d9c2093..d479f7ed682 100644
--- a/app/assets/javascripts/labels_select.js
+++ b/app/assets/javascripts/labels_select.js
@@ -4,6 +4,7 @@
 import _ from 'underscore';
 import IssuableBulkUpdateActions from './issuable_bulk_update_actions';
 import DropdownUtils from './filtered_search/dropdown_utils';
+import CreateLabelDropdown from './create_label';
 
 (function() {
   this.LabelsSelect = (function() {
@@ -61,7 +62,7 @@ import DropdownUtils from './filtered_search/dropdown_utils';
         $sidebarLabelTooltip.tooltip();
 
         if ($dropdown.closest('.dropdown').find('.dropdown-new-label').length) {
-          new gl.CreateLabelDropdown($dropdown.closest('.dropdown').find('.dropdown-new-label'), namespacePath, projectPath);
+          new CreateLabelDropdown($dropdown.closest('.dropdown').find('.dropdown-new-label'), namespacePath, projectPath);
         }
 
         saveLabelData = function() {
diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js
index 5858c2b6fd8..64d7c80e689 100644
--- a/app/assets/javascripts/main.js
+++ b/app/assets/javascripts/main.js
@@ -57,7 +57,6 @@ import './u2f/util';
 import './abuse_reports';
 import './activities';
 import './admin';
-import './ajax_loading_spinner';
 import './api';
 import './aside';
 import './autosave';
@@ -74,7 +73,6 @@ import './compare_autocomplete';
 import './confirm_danger_modal';
 import './copy_as_gfm';
 import './copy_to_clipboard';
-import './create_label';
 import './diff';
 import './dropzone_input';
 import './due_date_select';
-- 
cgit v1.2.3


From 2597d8d2e0956644619acbac61343635cb7bd459 Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Mon, 9 Oct 2017 10:46:40 +0000
Subject: Removes CommitsList from global namespace

---
 app/assets/javascripts/commits.js    | 51 ++++++++++++++++++------------------
 app/assets/javascripts/dispatcher.js |  2 +-
 2 files changed, 27 insertions(+), 26 deletions(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/commits.js b/app/assets/javascripts/commits.js
index 047544b1762..ae6b8902032 100644
--- a/app/assets/javascripts/commits.js
+++ b/app/assets/javascripts/commits.js
@@ -1,17 +1,19 @@
-/* eslint-disable func-names, space-before-function-paren, wrap-iife, quotes, consistent-return, no-return-assign, no-param-reassign, one-var, no-var, one-var-declaration-per-line, no-unused-vars, prefer-template, object-shorthand, comma-dangle, max-len, prefer-arrow-callback */
+/* eslint-disable func-names, wrap-iife, consistent-return,
+  no-return-assign, no-param-reassign, one-var-declaration-per-line, no-unused-vars,
+  prefer-template, object-shorthand, prefer-arrow-callback */
 /* global Pager */
 
-window.CommitsList = (function() {
-  var CommitsList = {};
+export default (function () {
+  const CommitsList = {};
 
   CommitsList.timer = null;
 
-  CommitsList.init = function(limit) {
+  CommitsList.init = function (limit) {
     this.$contentList = $('.content_list');
 
-    $("body").on("click", ".day-commits-table li.commit", function(e) {
-      if (e.target.nodeName !== "A") {
-        location.href = $(this).attr("url");
+    $('body').on('click', '.day-commits-table li.commit', function (e) {
+      if (e.target.nodeName !== 'A') {
+        location.href = $(this).attr('url');
         e.stopPropagation();
         return false;
       }
@@ -19,48 +21,47 @@ window.CommitsList = (function() {
 
     Pager.init(parseInt(limit, 10), false, false, this.processCommits);
 
-    this.content = $("#commits-list");
-    this.searchField = $("#commits-search");
+    this.content = $('#commits-list');
+    this.searchField = $('#commits-search');
     this.lastSearch = this.searchField.val();
     return this.initSearch();
   };
 
-  CommitsList.initSearch = function() {
+  CommitsList.initSearch = function () {
     this.timer = null;
-    return this.searchField.keyup((function(_this) {
-      return function() {
+    return this.searchField.keyup((function (_this) {
+      return function () {
         clearTimeout(_this.timer);
         return _this.timer = setTimeout(_this.filterResults, 500);
       };
     })(this));
   };
 
-  CommitsList.filterResults = function() {
-    var commitsUrl, form, search;
-    form = $(".commits-search-form");
-    search = CommitsList.searchField.val();
+  CommitsList.filterResults = function () {
+    const form = $('.commits-search-form');
+    const search = CommitsList.searchField.val();
     if (search === CommitsList.lastSearch) return;
-    commitsUrl = form.attr("action") + '?' + form.serialize();
+    const commitsUrl = form.attr('action') + '?' + form.serialize();
     CommitsList.content.fadeTo('fast', 0.5);
     return $.ajax({
-      type: "GET",
-      url: form.attr("action"),
+      type: 'GET',
+      url: form.attr('action'),
       data: form.serialize(),
-      complete: function() {
+      complete: function () {
         return CommitsList.content.fadeTo('fast', 1.0);
       },
-      success: function(data) {
+      success: function (data) {
         CommitsList.lastSearch = search;
         CommitsList.content.html(data.html);
         return history.replaceState({
-          page: commitsUrl
+          page: commitsUrl,
         // Change url so if user reload a page - search results are saved
         }, document.title, commitsUrl);
       },
-      error: function() {
+      error: function () {
         CommitsList.lastSearch = null;
       },
-      dataType: "json"
+      dataType: 'json',
     });
   };
 
@@ -81,7 +82,7 @@ window.CommitsList = (function() {
       commitsCount = $commitsHeadersLast.nextUntil('li.js-commit-header').find('li.commit').length;
 
       // Remove duplicate of commits header.
-      processedData = $processedData.not(`li.js-commit-header[data-day="${loadedShownDayFirst}"]`);
+      processedData = $processedData.not(`li.js-commit-header[data-day='${loadedShownDayFirst}']`);
 
       // Update commits count in the previous commits header.
       commitsCount += Number($(processedData).nextUntil('li.js-commit-header').first().find('li.commit').length);
diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js
index c3349c382ad..1edd460f380 100644
--- a/app/assets/javascripts/dispatcher.js
+++ b/app/assets/javascripts/dispatcher.js
@@ -7,7 +7,6 @@
 /* global IssuableForm */
 /* global LabelsSelect */
 /* global MilestoneSelect */
-/* global CommitsList */
 /* global NewBranchForm */
 /* global NotificationsForm */
 /* global NotificationsDropdown */
@@ -35,6 +34,7 @@
 /* global Sidebar */
 /* global ShortcutsWiki */
 
+import CommitsList from './commits';
 import Issue from './issue';
 import BindInOut from './behaviors/bind_in_out';
 import DeleteModal from './branches/branches_delete_modal';
-- 
cgit v1.2.3


From 41b430b2cfa6d16e644d14164234f890ea17c744 Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Mon, 9 Oct 2017 23:21:56 +0100
Subject: Remove u2f from globalnamespace

---
 app/assets/javascripts/dispatcher.js       |   7 +-
 app/assets/javascripts/main.js             |   6 -
 app/assets/javascripts/two_factor_auth.js  |   3 +-
 app/assets/javascripts/u2f/authenticate.js | 188 ++++++++++++++---------------
 app/assets/javascripts/u2f/error.js        |  43 +++----
 app/assets/javascripts/u2f/register.js     | 151 +++++++++++------------
 app/assets/javascripts/u2f/util.js         |  15 +--
 7 files changed, 190 insertions(+), 223 deletions(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js
index 1edd460f380..ad4bdeba01e 100644
--- a/app/assets/javascripts/dispatcher.js
+++ b/app/assets/javascripts/dispatcher.js
@@ -78,6 +78,7 @@ import initChangesDropdown from './init_changes_dropdown';
 import AbuseReports from './abuse_reports';
 import { ajaxGet, convertPermissionToBoolean } from './lib/utils/common_utils';
 import AjaxLoadingSpinner from './ajax_loading_spinner';
+import U2FAuthenticate from './u2f/authenticate';
 
 (function() {
   var Dispatcher;
@@ -535,14 +536,16 @@ import AjaxLoadingSpinner from './ajax_loading_spinner';
         case 'sessions':
         case 'omniauth_callbacks':
           if (!gon.u2f) break;
-          gl.u2fAuthenticate = new gl.U2FAuthenticate(
+          const u2fAuthenticate = new U2FAuthenticate(
             $('#js-authenticate-u2f'),
             '#js-login-u2f-form',
             gon.u2f,
             document.querySelector('#js-login-2fa-device'),
             document.querySelector('.js-2fa-form'),
           );
-          gl.u2fAuthenticate.start();
+          u2fAuthenticate.start();
+          // needed in rspec
+          gl.u2fAuthenticate = u2fAuthenticate;
         case 'admin':
           new Admin();
           switch (path[1]) {
diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js
index 853546b617b..7c703f7be9d 100644
--- a/app/assets/javascripts/main.js
+++ b/app/assets/javascripts/main.js
@@ -47,12 +47,6 @@ import './lib/utils/url_utility';
 // behaviors
 import './behaviors/';
 
-// u2f
-import './u2f/authenticate';
-import './u2f/error';
-import './u2f/register';
-import './u2f/util';
-
 // everything else
 import './activities';
 import './admin';
diff --git a/app/assets/javascripts/two_factor_auth.js b/app/assets/javascripts/two_factor_auth.js
index d26f61562a5..e3414d9afff 100644
--- a/app/assets/javascripts/two_factor_auth.js
+++ b/app/assets/javascripts/two_factor_auth.js
@@ -1,4 +1,5 @@
-/* global U2FRegister */
+import U2FRegister from './u2f/register';
+
 document.addEventListener('DOMContentLoaded', () => {
   const twoFactorNode = document.querySelector('.js-two-factor-auth');
   const skippable = twoFactorNode.dataset.twoFactorSkippable === 'true';
diff --git a/app/assets/javascripts/u2f/authenticate.js b/app/assets/javascripts/u2f/authenticate.js
index 8821b22477f..a3cc04e35fe 100644
--- a/app/assets/javascripts/u2f/authenticate.js
+++ b/app/assets/javascripts/u2f/authenticate.js
@@ -1,118 +1,108 @@
-/* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, prefer-arrow-callback, no-else-return, quotes, quote-props, comma-dangle, one-var, one-var-declaration-per-line, max-len */
+/* eslint-disable func-names, wrap-iife */
 /* global u2f */
-/* global U2FError */
-/* global U2FUtil */
-
 import _ from 'underscore';
+import isU2FSupported from './util';
+import U2FError from './error';
 
 // Authenticate U2F (universal 2nd factor) devices for users to authenticate with.
 //
 // State Flow #1: setup -> in_progress -> authenticated -> POST to server
 // State Flow #2: setup -> in_progress -> error -> setup
-(function() {
-  const global = window.gl || (window.gl = {});
-
-  global.U2FAuthenticate = (function() {
-    function U2FAuthenticate(container, form, u2fParams, fallbackButton, fallbackUI) {
-      this.container = container;
-      this.renderNotSupported = this.renderNotSupported.bind(this);
-      this.renderAuthenticated = this.renderAuthenticated.bind(this);
-      this.renderError = this.renderError.bind(this);
-      this.renderInProgress = this.renderInProgress.bind(this);
-      this.renderTemplate = this.renderTemplate.bind(this);
-      this.authenticate = this.authenticate.bind(this);
-      this.start = this.start.bind(this);
-      this.appId = u2fParams.app_id;
-      this.challenge = u2fParams.challenge;
-      this.form = form;
-      this.fallbackButton = fallbackButton;
-      this.fallbackUI = fallbackUI;
-      if (this.fallbackButton) this.fallbackButton.addEventListener('click', this.switchToFallbackUI.bind(this));
-      this.signRequests = u2fParams.sign_requests.map(function(request) {
-        // The U2F Javascript API v1.1 requires a single challenge, with
-        // _no challenges per-request_. The U2F Javascript API v1.0 requires a
-        // challenge per-request, which is done by copying the single challenge
-        // into every request.
-        //
-        // In either case, we don't need the per-request challenges that the server
-        // has generated, so we can remove them.
-        //
-        // Note: The server library fixes this behaviour in (unreleased) version 1.0.0.
-        // This can be removed once we upgrade.
-        // https://github.com/castle/ruby-u2f/commit/103f428071a81cd3d5f80c2e77d522d5029946a4
-        return _(request).omit('challenge');
-      });
+export default class U2FAuthenticate {
+  constructor(container, form, u2fParams, fallbackButton, fallbackUI) {
+    this.container = container;
+    this.renderNotSupported = this.renderNotSupported.bind(this);
+    this.renderAuthenticated = this.renderAuthenticated.bind(this);
+    this.renderError = this.renderError.bind(this);
+    this.renderInProgress = this.renderInProgress.bind(this);
+    this.renderTemplate = this.renderTemplate.bind(this);
+    this.authenticate = this.authenticate.bind(this);
+    this.start = this.start.bind(this);
+    this.appId = u2fParams.app_id;
+    this.challenge = u2fParams.challenge;
+    this.form = form;
+    this.fallbackButton = fallbackButton;
+    this.fallbackUI = fallbackUI;
+    if (this.fallbackButton) {
+      this.fallbackButton.addEventListener('click', this.switchToFallbackUI.bind(this));
     }
 
-    U2FAuthenticate.prototype.start = function() {
-      if (U2FUtil.isU2FSupported()) {
-        return this.renderInProgress();
-      } else {
-        return this.renderNotSupported();
-      }
-    };
+    // The U2F Javascript API v1.1 requires a single challenge, with
+    // _no challenges per-request_. The U2F Javascript API v1.0 requires a
+    // challenge per-request, which is done by copying the single challenge
+    // into every request.
+    //
+    // In either case, we don't need the per-request challenges that the server
+    // has generated, so we can remove them.
+    //
+    // Note: The server library fixes this behaviour in (unreleased) version 1.0.0.
+    // This can be removed once we upgrade.
+    // https://github.com/castle/ruby-u2f/commit/103f428071a81cd3d5f80c2e77d522d5029946a4
+    this.signRequests = u2fParams.sign_requests.map(request => _(request).omit('challenge'));
 
-    U2FAuthenticate.prototype.authenticate = function() {
-      return u2f.sign(this.appId, this.challenge, this.signRequests, (function(_this) {
-        return function(response) {
-          var error;
-          if (response.errorCode) {
-            error = new U2FError(response.errorCode, 'authenticate');
-            return _this.renderError(error);
-          } else {
-            return _this.renderAuthenticated(JSON.stringify(response));
-          }
-        };
-      })(this), 10);
+    this.templates = {
+      notSupported: '#js-authenticate-u2f-not-supported',
+      setup: '#js-authenticate-u2f-setup',
+      inProgress: '#js-authenticate-u2f-in-progress',
+      error: '#js-authenticate-u2f-error',
+      authenticated: '#js-authenticate-u2f-authenticated',
     };
+  }
 
-    // Rendering #
-    U2FAuthenticate.prototype.templates = {
-      "notSupported": "#js-authenticate-u2f-not-supported",
-      "setup": '#js-authenticate-u2f-setup',
-      "inProgress": '#js-authenticate-u2f-in-progress',
-      "error": '#js-authenticate-u2f-error',
-      "authenticated": '#js-authenticate-u2f-authenticated'
-    };
+  start() {
+    if (isU2FSupported()) {
+      return this.renderInProgress();
+    }
+    return this.renderNotSupported();
+  }
 
-    U2FAuthenticate.prototype.renderTemplate = function(name, params) {
-      var template, templateString;
-      templateString = $(this.templates[name]).html();
-      template = _.template(templateString);
-      return this.container.html(template(params));
-    };
+  authenticate() {
+    return u2f.sign(this.appId, this.challenge, this.signRequests, (function (_this) {
+      return function (response) {
+        if (response.errorCode) {
+          const error = new U2FError(response.errorCode, 'authenticate');
+          return _this.renderError(error);
+        }
+        return _this.renderAuthenticated(JSON.stringify(response));
+      };
+    })(this), 10);
+  }
 
-    U2FAuthenticate.prototype.renderInProgress = function() {
-      this.renderTemplate('inProgress');
-      return this.authenticate();
-    };
+  renderTemplate(name, params) {
+    const templateString = $(this.templates[name]).html();
+    const template = _.template(templateString);
+    return this.container.html(template(params));
+  }
 
-    U2FAuthenticate.prototype.renderError = function(error) {
-      this.renderTemplate('error', {
-        error_message: error.message(),
-        error_code: error.errorCode
-      });
-      return this.container.find('#js-u2f-try-again').on('click', this.renderInProgress);
-    };
+  renderInProgress() {
+    this.renderTemplate('inProgress');
+    return this.authenticate();
+  }
 
-    U2FAuthenticate.prototype.renderAuthenticated = function(deviceResponse) {
-      this.renderTemplate('authenticated');
-      const container = this.container[0];
-      container.querySelector('#js-device-response').value = deviceResponse;
-      container.querySelector(this.form).submit();
-      this.fallbackButton.classList.add('hidden');
-    };
+  renderError(error) {
+    this.renderTemplate('error', {
+      error_message: error.message(),
+      error_code: error.errorCode,
+    });
+    return this.container.find('#js-u2f-try-again').on('click', this.renderInProgress);
+  }
 
-    U2FAuthenticate.prototype.renderNotSupported = function() {
-      return this.renderTemplate('notSupported');
-    };
+  renderAuthenticated(deviceResponse) {
+    this.renderTemplate('authenticated');
+    const container = this.container[0];
+    container.querySelector('#js-device-response').value = deviceResponse;
+    container.querySelector(this.form).submit();
+    this.fallbackButton.classList.add('hidden');
+  }
 
-    U2FAuthenticate.prototype.switchToFallbackUI = function() {
-      this.fallbackButton.classList.add('hidden');
-      this.container[0].classList.add('hidden');
-      this.fallbackUI.classList.remove('hidden');
-    };
+  renderNotSupported() {
+    return this.renderTemplate('notSupported');
+  }
+
+  switchToFallbackUI() {
+    this.fallbackButton.classList.add('hidden');
+    this.container[0].classList.add('hidden');
+    this.fallbackUI.classList.remove('hidden');
+  }
 
-    return U2FAuthenticate;
-  })();
-})();
+}
diff --git a/app/assets/javascripts/u2f/error.js b/app/assets/javascripts/u2f/error.js
index 3119b3480c3..1a98564ff55 100644
--- a/app/assets/javascripts/u2f/error.js
+++ b/app/assets/javascripts/u2f/error.js
@@ -1,25 +1,22 @@
-/* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, no-console, quotes, prefer-template, max-len */
-/* global u2f */
+export default class U2FError {
+  constructor(errorCode, u2fFlowType) {
+    this.errorCode = errorCode;
+    this.message = this.message.bind(this);
+    this.httpsDisabled = window.location.protocol !== 'https:';
+    this.u2fFlowType = u2fFlowType;
+  }
 
-(function() {
-  this.U2FError = (function() {
-    function U2FError(errorCode, u2fFlowType) {
-      this.errorCode = errorCode;
-      this.message = this.message.bind(this);
-      this.httpsDisabled = window.location.protocol !== 'https:';
-      this.u2fFlowType = u2fFlowType;
-    }
-
-    U2FError.prototype.message = function() {
-      if (this.errorCode === u2f.ErrorCodes.BAD_REQUEST && this.httpsDisabled) {
-        return 'U2F only works with HTTPS-enabled websites. Contact your administrator for more details.';
-      } else if (this.errorCode === u2f.ErrorCodes.DEVICE_INELIGIBLE) {
-        if (this.u2fFlowType === 'authenticate') return 'This device has not been registered with us.';
-        if (this.u2fFlowType === 'register') return 'This device has already been registered with us.';
+  message() {
+    if (this.errorCode === window.u2f.ErrorCodes.BAD_REQUEST && this.httpsDisabled) {
+      return 'U2F only works with HTTPS-enabled websites. Contact your administrator for more details.';
+    } else if (this.errorCode === window.u2f.ErrorCodes.DEVICE_INELIGIBLE) {
+      if (this.u2fFlowType === 'authenticate') {
+        return 'This device has not been registered with us.';
       }
-      return "There was a problem communicating with your device.";
-    };
-
-    return U2FError;
-  })();
-}).call(window);
+      if (this.u2fFlowType === 'register') {
+        return 'This device has already been registered with us.';
+      }
+    }
+    return 'There was a problem communicating with your device.';
+  }
+}
diff --git a/app/assets/javascripts/u2f/register.js b/app/assets/javascripts/u2f/register.js
index 3a2534d553b..cc3f02e75f6 100644
--- a/app/assets/javascripts/u2f/register.js
+++ b/app/assets/javascripts/u2f/register.js
@@ -1,98 +1,89 @@
-/* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, no-else-return, quotes, quote-props, comma-dangle, one-var, one-var-declaration-per-line, max-len */
+/* eslint-disable func-names, wrap-iife */
 /* global u2f */
-/* global U2FError */
-/* global U2FUtil */
 
 import _ from 'underscore';
+import isU2FSupported from './util';
+import U2FError from './error';
 
 // Register U2F (universal 2nd factor) devices for users to authenticate with.
 //
 // State Flow #1: setup -> in_progress -> registered -> POST to server
 // State Flow #2: setup -> in_progress -> error -> setup
-(function() {
-  this.U2FRegister = (function() {
-    function U2FRegister(container, u2fParams) {
-      this.container = container;
-      this.renderNotSupported = this.renderNotSupported.bind(this);
-      this.renderRegistered = this.renderRegistered.bind(this);
-      this.renderError = this.renderError.bind(this);
-      this.renderInProgress = this.renderInProgress.bind(this);
-      this.renderSetup = this.renderSetup.bind(this);
-      this.renderTemplate = this.renderTemplate.bind(this);
-      this.register = this.register.bind(this);
-      this.start = this.start.bind(this);
-      this.appId = u2fParams.app_id;
-      this.registerRequests = u2fParams.register_requests;
-      this.signRequests = u2fParams.sign_requests;
-    }
+export default class U2FRegister {
+  constructor(container, u2fParams) {
+    this.container = container;
+    this.renderNotSupported = this.renderNotSupported.bind(this);
+    this.renderRegistered = this.renderRegistered.bind(this);
+    this.renderError = this.renderError.bind(this);
+    this.renderInProgress = this.renderInProgress.bind(this);
+    this.renderSetup = this.renderSetup.bind(this);
+    this.renderTemplate = this.renderTemplate.bind(this);
+    this.register = this.register.bind(this);
+    this.start = this.start.bind(this);
+    this.appId = u2fParams.app_id;
+    this.registerRequests = u2fParams.register_requests;
+    this.signRequests = u2fParams.sign_requests;
 
-    U2FRegister.prototype.start = function() {
-      if (U2FUtil.isU2FSupported()) {
-        return this.renderSetup();
-      } else {
-        return this.renderNotSupported();
-      }
+    this.templates = {
+      notSupported: '#js-register-u2f-not-supported',
+      setup: '#js-register-u2f-setup',
+      inProgress: '#js-register-u2f-in-progress',
+      error: '#js-register-u2f-error',
+      registered: '#js-register-u2f-registered',
     };
+  }
 
-    U2FRegister.prototype.register = function() {
-      return u2f.register(this.appId, this.registerRequests, this.signRequests, (function(_this) {
-        return function(response) {
-          var error;
-          if (response.errorCode) {
-            error = new U2FError(response.errorCode, 'register');
-            return _this.renderError(error);
-          } else {
-            return _this.renderRegistered(JSON.stringify(response));
-          }
-        };
-      })(this), 10);
-    };
+  start() {
+    if (isU2FSupported()) {
+      return this.renderSetup();
+    }
+    return this.renderNotSupported();
+  }
 
-    // Rendering #
-    U2FRegister.prototype.templates = {
-      "notSupported": "#js-register-u2f-not-supported",
-      "setup": '#js-register-u2f-setup',
-      "inProgress": '#js-register-u2f-in-progress',
-      "error": '#js-register-u2f-error',
-      "registered": '#js-register-u2f-registered'
-    };
+  register() {
+    return u2f.register(this.appId, this.registerRequests, this.signRequests, (function (_this) {
+      return function (response) {
+        if (response.errorCode) {
+          const error = new U2FError(response.errorCode, 'register');
+          return _this.renderError(error);
+        }
+        return _this.renderRegistered(JSON.stringify(response));
+      };
+    })(this), 10);
+  }
 
-    U2FRegister.prototype.renderTemplate = function(name, params) {
-      var template, templateString;
-      templateString = $(this.templates[name]).html();
-      template = _.template(templateString);
-      return this.container.html(template(params));
-    };
+  renderTemplate(name, params) {
+    const templateString = $(this.templates[name]).html();
+    const template = _.template(templateString);
+    return this.container.html(template(params));
+  }
 
-    U2FRegister.prototype.renderSetup = function() {
-      this.renderTemplate('setup');
-      return this.container.find('#js-setup-u2f-device').on('click', this.renderInProgress);
-    };
+  renderSetup() {
+    this.renderTemplate('setup');
+    return this.container.find('#js-setup-u2f-device').on('click', this.renderInProgress);
+  }
 
-    U2FRegister.prototype.renderInProgress = function() {
-      this.renderTemplate('inProgress');
-      return this.register();
-    };
+  renderInProgress() {
+    this.renderTemplate('inProgress');
+    return this.register();
+  }
 
-    U2FRegister.prototype.renderError = function(error) {
-      this.renderTemplate('error', {
-        error_message: error.message(),
-        error_code: error.errorCode
-      });
-      return this.container.find('#js-u2f-try-again').on('click', this.renderSetup);
-    };
+  renderError(error) {
+    this.renderTemplate('error', {
+      error_message: error.message(),
+      error_code: error.errorCode,
+    });
+    return this.container.find('#js-u2f-try-again').on('click', this.renderSetup);
+  }
 
-    U2FRegister.prototype.renderRegistered = function(deviceResponse) {
-      this.renderTemplate('registered');
-      // Prefer to do this instead of interpolating using Underscore templates
-      // because of JSON escaping issues.
-      return this.container.find("#js-device-response").val(deviceResponse);
-    };
-
-    U2FRegister.prototype.renderNotSupported = function() {
-      return this.renderTemplate('notSupported');
-    };
+  renderRegistered(deviceResponse) {
+    this.renderTemplate('registered');
+    // Prefer to do this instead of interpolating using Underscore templates
+    // because of JSON escaping issues.
+    return this.container.find('#js-device-response').val(deviceResponse);
+  }
 
-    return U2FRegister;
-  })();
-}).call(window);
+  renderNotSupported() {
+    return this.renderTemplate('notSupported');
+  }
+}
diff --git a/app/assets/javascripts/u2f/util.js b/app/assets/javascripts/u2f/util.js
index 813d363db00..9771ff935c2 100644
--- a/app/assets/javascripts/u2f/util.js
+++ b/app/assets/javascripts/u2f/util.js
@@ -1,12 +1,3 @@
-/* eslint-disable func-names, space-before-function-paren, wrap-iife */
-(function() {
-  this.U2FUtil = (function() {
-    function U2FUtil() {}
-
-    U2FUtil.isU2FSupported = function() {
-      return window.u2f;
-    };
-
-    return U2FUtil;
-  })();
-}).call(window);
+export default function isU2FSupported() {
+  return window.u2f;
+}
-- 
cgit v1.2.3


From a4c501756f8710b9d4b7a3501b54be90e1c7fd1f Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Mon, 9 Oct 2017 23:26:03 +0100
Subject: Remove Api from main.js

---
 app/assets/javascripts/main.js | 1 -
 1 file changed, 1 deletion(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js
index 853546b617b..974121412bd 100644
--- a/app/assets/javascripts/main.js
+++ b/app/assets/javascripts/main.js
@@ -56,7 +56,6 @@ import './u2f/util';
 // everything else
 import './activities';
 import './admin';
-import './api';
 import './aside';
 import './autosave';
 import loadAwardsHandler from './awards_handler';
-- 
cgit v1.2.3


From 67f4408d741b62e61f1fd767b4724727c489b42c Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Tue, 10 Oct 2017 07:47:42 +0000
Subject: Fix bad type checking to prevent 0 count badge to be shown

---
 app/assets/javascripts/header.js                 | 19 ++++++++++++++-----
 app/assets/javascripts/lib/utils/text_utility.js | 14 +++++++++++---
 2 files changed, 25 insertions(+), 8 deletions(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/header.js b/app/assets/javascripts/header.js
index dc170c60456..ea2e2205077 100644
--- a/app/assets/javascripts/header.js
+++ b/app/assets/javascripts/header.js
@@ -1,7 +1,16 @@
-/* eslint-disable func-names, space-before-function-paren, prefer-arrow-callback, no-var */
+import { highCountTrim } from '~/lib/utils/text_utility';
 
-$(document).on('todo:toggle', function(e, count) {
-  var $todoPendingCount = $('.todos-count');
-  $todoPendingCount.text(gl.text.highCountTrim(count));
-  $todoPendingCount.toggleClass('hidden', count === 0);
+/**
+ * Updates todo counter when todos are toggled.
+ * When count is 0, we hide the badge.
+ *
+ * @param {jQuery.Event} e
+ * @param {String} count
+ */
+$(document).on('todo:toggle', (e, count) => {
+  const parsedCount = parseInt(count, 10);
+  const $todoPendingCount = $('.todos-count');
+
+  $todoPendingCount.text(highCountTrim(parsedCount));
+  $todoPendingCount.toggleClass('hidden', parsedCount === 0);
 });
diff --git a/app/assets/javascripts/lib/utils/text_utility.js b/app/assets/javascripts/lib/utils/text_utility.js
index 021f936a4fa..f776829f69c 100644
--- a/app/assets/javascripts/lib/utils/text_utility.js
+++ b/app/assets/javascripts/lib/utils/text_utility.js
@@ -1,4 +1,4 @@
-/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, no-param-reassign, no-cond-assign, quotes, one-var, one-var-declaration-per-line, operator-assignment, no-else-return, prefer-template, prefer-arrow-callback, no-empty, max-len, consistent-return, no-unused-vars, no-return-assign, max-len, vars-on-top */
+/* eslint-disable import/prefer-default-export, func-names, space-before-function-paren, wrap-iife, no-var, no-param-reassign, no-cond-assign, quotes, one-var, one-var-declaration-per-line, operator-assignment, no-else-return, prefer-template, prefer-arrow-callback, no-empty, max-len, consistent-return, no-unused-vars, no-return-assign, max-len, vars-on-top */
 
 import 'vendor/latinise';
 
@@ -13,9 +13,17 @@ if ((base = w.gl).text == null) {
 gl.text.addDelimiter = function(text) {
   return text ? text.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : text;
 };
-gl.text.highCountTrim = function(count) {
+
+/**
+ * Returns '99+' for numbers bigger than 99.
+ *
+ * @param {Number} count
+ * @return {Number|String}
+ */
+export function highCountTrim(count) {
   return count > 99 ? '99+' : count;
-};
+}
+
 gl.text.randomString = function() {
   return Math.random().toString(36).substring(7);
 };
-- 
cgit v1.2.3


From fa2af5e0f5e290eff32f62c7ea9f935a6ad33967 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Mon, 2 Oct 2017 13:32:53 +0100
Subject: Flash is now a ES6 module

Reduced the technical debt around our JS flash function by making it a
module that is imported rather than relying on the global function.
The global function still exists mainly for technical debt with how
some requests are being completed, but new JS should import the module
directly.

Also reduces some tech debt in the file by removing the need for jQuery.
Instead Flash is now 100% vanilla JS.
---
 app/assets/javascripts/awards_handler.js           |   2 +-
 app/assets/javascripts/blob/balsamiq_viewer.js     |   5 +-
 .../javascripts/blob/file_template_mediator.js     |   3 +-
 app/assets/javascripts/blob/viewer/index.js        |   2 +-
 app/assets/javascripts/boards/boards_bundle.js     |   2 +-
 .../javascripts/boards/components/board_sidebar.js |   2 +-
 .../javascripts/boards/components/modal/footer.js  |   2 +-
 .../boards/components/sidebar/remove_issue.js      |   2 +-
 .../javascripts/create_merge_request_dropdown.js   |   2 +-
 .../cycle_analytics/cycle_analytics_bundle.js      |   1 +
 .../javascripts/deploy_keys/components/app.vue     |   2 +-
 .../diff_notes/components/resolve_btn.js           |   2 +-
 .../javascripts/diff_notes/services/resolve.js     |   2 +-
 .../environments/components/environment.vue        |   2 +-
 .../folder/environments_folder_view.vue            |   2 +-
 .../javascripts/filtered_search/dropdown_emoji.js  |   7 +-
 .../filtered_search/dropdown_non_user.js           |   7 +-
 .../javascripts/filtered_search/dropdown_user.js   |   5 +-
 .../filtered_search/filtered_search_manager.js     |   3 +-
 .../filtered_search_visual_tokens.js               |   2 +-
 app/assets/javascripts/flash.js                    | 119 ++++++++++-----------
 app/assets/javascripts/groups/index.js             |   3 +-
 .../integrations/integration_settings_form.js      |   4 +-
 .../javascripts/issuable_bulk_update_actions.js    |   2 +-
 app/assets/javascripts/issue.js                    |   4 +-
 .../javascripts/issue_show/components/app.vue      |   2 +-
 .../javascripts/jobs/job_details_mediator.js       |   2 +-
 app/assets/javascripts/label_manager.js            |   3 +-
 app/assets/javascripts/main.js                     |  11 +-
 .../merge_conflicts/components/diff_file_editor.js |   2 +-
 .../merge_conflicts/merge_conflicts_bundle.js      |   2 +-
 app/assets/javascripts/merge_request_tabs.js       |   3 +-
 app/assets/javascripts/milestone.js                |   3 +-
 .../javascripts/mini_pipeline_graph_dropdown.js    |   2 +-
 .../monitoring/components/dashboard.vue            |   2 +-
 app/assets/javascripts/notes.js                    |   4 +-
 .../notes/components/issue_comment_form.vue        |   7 +-
 .../notes/components/issue_discussion.vue          |   4 +-
 .../javascripts/notes/components/issue_note.vue    |   5 +-
 .../notes/components/issue_note_awards_list.vue    |   3 +-
 .../notes/components/issue_notes_app.vue           |   2 +-
 app/assets/javascripts/notes/stores/actions.js     |  10 +-
 app/assets/javascripts/notifications_dropdown.js   |   2 +-
 .../javascripts/pipelines/components/stage.vue     |   2 +-
 .../javascripts/pipelines/mixins/pipelines.js      |   3 +-
 .../pipelines/pipeline_details_bundle.js           |   3 +-
 .../pipelines/pipeline_details_mediatior.js        |   3 +-
 app/assets/javascripts/profile/profile.js          |   2 +-
 .../protected_branches/protected_branch_edit.js    |   5 +-
 .../protected_tags/protected_tag_edit.js           |   5 +-
 .../repo/components/repo_commit_section.vue        |   2 +-
 app/assets/javascripts/repo/helpers/repo_helper.js |   3 +-
 .../javascripts/repo/services/repo_service.js      |   6 +-
 app/assets/javascripts/search.js                   |   2 +-
 .../components/assignees/sidebar_assignees.js      |   3 +-
 .../confidential/confidential_issue_sidebar.vue    |   2 +-
 .../javascripts/sidebar/lib/sidebar_move_issue.js  |   2 +-
 app/assets/javascripts/sidebar/sidebar_mediator.js |   3 +-
 app/assets/javascripts/star.js                     |   3 +-
 app/assets/javascripts/task_list.js                |   3 +-
 .../components/mr_widget_deployment.js             |   3 +-
 .../mr_widget_merge_when_pipeline_succeeds.js      |   2 +-
 .../components/states/mr_widget_merged.js          |   3 +-
 .../components/states/mr_widget_ready_to_merge.js  |   2 +-
 .../components/states/mr_widget_wip.js             |   2 +-
 .../vue_merge_request_widget/mr_widget_options.js  |   3 +-
 .../vue_shared/components/markdown/field.vue       |   2 +-
 67 files changed, 148 insertions(+), 179 deletions(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/awards_handler.js b/app/assets/javascripts/awards_handler.js
index 4f01345ee3b..622764107ad 100644
--- a/app/assets/javascripts/awards_handler.js
+++ b/app/assets/javascripts/awards_handler.js
@@ -1,8 +1,8 @@
 /* eslint-disable class-methods-use-this */
-/* global Flash */
 import _ from 'underscore';
 import Cookies from 'js-cookie';
 import { isInIssuePage, updateTooltipTitle } from './lib/utils/common_utils';
+import Flash from './flash';
 
 const animationEndEventString = 'animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd';
 const transitionEndEventString = 'transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd';
diff --git a/app/assets/javascripts/blob/balsamiq_viewer.js b/app/assets/javascripts/blob/balsamiq_viewer.js
index 8641a6fdae6..062577af385 100644
--- a/app/assets/javascripts/blob/balsamiq_viewer.js
+++ b/app/assets/javascripts/blob/balsamiq_viewer.js
@@ -1,9 +1,8 @@
-/* global Flash */
-
+import Flash from '../flash';
 import BalsamiqViewer from './balsamiq/balsamiq_viewer';
 
 function onError() {
-  const flash = new window.Flash('Balsamiq file could not be loaded.');
+  const flash = new Flash('Balsamiq file could not be loaded.');
 
   return flash;
 }
diff --git a/app/assets/javascripts/blob/file_template_mediator.js b/app/assets/javascripts/blob/file_template_mediator.js
index a20c6ca7a21..583e5faa506 100644
--- a/app/assets/javascripts/blob/file_template_mediator.js
+++ b/app/assets/javascripts/blob/file_template_mediator.js
@@ -1,6 +1,5 @@
 /* eslint-disable class-methods-use-this */
-/* global Flash */
-
+import Flash from '../flash';
 import FileTemplateTypeSelector from './template_selectors/type_selector';
 import BlobCiYamlSelector from './template_selectors/ci_yaml_selector';
 import DockerfileSelector from './template_selectors/dockerfile_selector';
diff --git a/app/assets/javascripts/blob/viewer/index.js b/app/assets/javascripts/blob/viewer/index.js
index e0b73f13d36..54132e8537b 100644
--- a/app/assets/javascripts/blob/viewer/index.js
+++ b/app/assets/javascripts/blob/viewer/index.js
@@ -1,4 +1,4 @@
-/* global Flash */
+import Flash from '../../flash';
 import { handleLocationHash } from '../../lib/utils/common_utils';
 
 export default class BlobViewer {
diff --git a/app/assets/javascripts/boards/boards_bundle.js b/app/assets/javascripts/boards/boards_bundle.js
index 815248f38ee..ef4093b59e3 100644
--- a/app/assets/javascripts/boards/boards_bundle.js
+++ b/app/assets/javascripts/boards/boards_bundle.js
@@ -1,10 +1,10 @@
 /* eslint-disable one-var, quote-props, comma-dangle, space-before-function-paren */
 /* global BoardService */
-/* global Flash */
 
 import _ from 'underscore';
 import Vue from 'vue';
 import VueResource from 'vue-resource';
+import Flash from '../flash';
 import FilteredSearchBoards from './filtered_search_boards';
 import eventHub from './eventhub';
 import './models/issue';
diff --git a/app/assets/javascripts/boards/components/board_sidebar.js b/app/assets/javascripts/boards/components/board_sidebar.js
index 590b7be36e3..7f3afefc9cc 100644
--- a/app/assets/javascripts/boards/components/board_sidebar.js
+++ b/app/assets/javascripts/boards/components/board_sidebar.js
@@ -3,9 +3,9 @@
 /* global MilestoneSelect */
 /* global LabelsSelect */
 /* global Sidebar */
-/* global Flash */
 
 import Vue from 'vue';
+import Flash from '../../flash';
 import eventHub from '../../sidebar/event_hub';
 import AssigneeTitle from '../../sidebar/components/assignees/assignee_title';
 import Assignees from '../../sidebar/components/assignees/assignees';
diff --git a/app/assets/javascripts/boards/components/modal/footer.js b/app/assets/javascripts/boards/components/modal/footer.js
index a656f0546c0..de9e44cef35 100644
--- a/app/assets/javascripts/boards/components/modal/footer.js
+++ b/app/assets/javascripts/boards/components/modal/footer.js
@@ -1,7 +1,7 @@
 /* eslint-disable no-new */
-/* global Flash */
 
 import Vue from 'vue';
+import Flash from '../../../flash';
 import './lists_dropdown';
 
 const ModalStore = gl.issueBoards.ModalStore;
diff --git a/app/assets/javascripts/boards/components/sidebar/remove_issue.js b/app/assets/javascripts/boards/components/sidebar/remove_issue.js
index 1e623cf58b7..1ad97211934 100644
--- a/app/assets/javascripts/boards/components/sidebar/remove_issue.js
+++ b/app/assets/javascripts/boards/components/sidebar/remove_issue.js
@@ -1,7 +1,7 @@
 /* eslint-disable no-new */
-/* global Flash */
 
 import Vue from 'vue';
+import Flash from '../../../flash';
 
 const Store = gl.issueBoards.BoardsStore;
 
diff --git a/app/assets/javascripts/create_merge_request_dropdown.js b/app/assets/javascripts/create_merge_request_dropdown.js
index ff2f2c81971..bf40eb3ee11 100644
--- a/app/assets/javascripts/create_merge_request_dropdown.js
+++ b/app/assets/javascripts/create_merge_request_dropdown.js
@@ -1,5 +1,5 @@
 /* eslint-disable no-new */
-/* global Flash */
+import Flash from './flash';
 import DropLab from './droplab/drop_lab';
 import ISetter from './droplab/plugins/input_setter';
 
diff --git a/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js b/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js
index cdf5e3c0290..d184fcfeebd 100644
--- a/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js
+++ b/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js
@@ -2,6 +2,7 @@
 
 import Vue from 'vue';
 import Cookies from 'js-cookie';
+import Flash from '../flash';
 import Translate from '../vue_shared/translate';
 import banner from './components/banner.vue';
 import stageCodeComponent from './components/stage_code_component.vue';
diff --git a/app/assets/javascripts/deploy_keys/components/app.vue b/app/assets/javascripts/deploy_keys/components/app.vue
index a663e30dfd0..54e13b79a4f 100644
--- a/app/assets/javascripts/deploy_keys/components/app.vue
+++ b/app/assets/javascripts/deploy_keys/components/app.vue
@@ -1,5 +1,5 @@
 <script>
-  /* global Flash */
+  import Flash from '../../flash';
   import eventHub from '../eventhub';
   import DeployKeysService from '../service';
   import DeployKeysStore from '../store';
diff --git a/app/assets/javascripts/diff_notes/components/resolve_btn.js b/app/assets/javascripts/diff_notes/components/resolve_btn.js
index efb6ced9f46..20ddcbfb8bd 100644
--- a/app/assets/javascripts/diff_notes/components/resolve_btn.js
+++ b/app/assets/javascripts/diff_notes/components/resolve_btn.js
@@ -1,9 +1,9 @@
 /* eslint-disable comma-dangle, object-shorthand, func-names, quote-props, no-else-return, camelcase, max-len */
 /* global CommentsStore */
 /* global ResolveService */
-/* global Flash */
 
 import Vue from 'vue';
+import Flash from '../../flash';
 
 const ResolveBtn = Vue.extend({
   props: {
diff --git a/app/assets/javascripts/diff_notes/services/resolve.js b/app/assets/javascripts/diff_notes/services/resolve.js
index 2f063f6fe1f..6eae54f830b 100644
--- a/app/assets/javascripts/diff_notes/services/resolve.js
+++ b/app/assets/javascripts/diff_notes/services/resolve.js
@@ -1,7 +1,7 @@
-/* global Flash */
 /* global CommentsStore */
 
 import Vue from 'vue';
+import Flash from '../../flash';
 import '../../vue_shared/vue_resource_interceptor';
 
 window.gl = window.gl || {};
diff --git a/app/assets/javascripts/environments/components/environment.vue b/app/assets/javascripts/environments/components/environment.vue
index ce5f6219a3e..c039ae85cfb 100644
--- a/app/assets/javascripts/environments/components/environment.vue
+++ b/app/assets/javascripts/environments/components/environment.vue
@@ -1,6 +1,6 @@
 <script>
-/* global Flash */
 import Visibility from 'visibilityjs';
+import Flash from '../../flash';
 import EnvironmentsService from '../services/environments_service';
 import environmentTable from './environments_table.vue';
 import EnvironmentsStore from '../stores/environments_store';
diff --git a/app/assets/javascripts/environments/folder/environments_folder_view.vue b/app/assets/javascripts/environments/folder/environments_folder_view.vue
index 01e70c0bbb7..b155560df9d 100644
--- a/app/assets/javascripts/environments/folder/environments_folder_view.vue
+++ b/app/assets/javascripts/environments/folder/environments_folder_view.vue
@@ -1,6 +1,6 @@
 <script>
-/* global Flash */
 import Visibility from 'visibilityjs';
+import Flash from '../../flash';
 import EnvironmentsService from '../services/environments_service';
 import environmentTable from '../components/environments_table.vue';
 import EnvironmentsStore from '../stores/environments_store';
diff --git a/app/assets/javascripts/filtered_search/dropdown_emoji.js b/app/assets/javascripts/filtered_search/dropdown_emoji.js
index ada14d2053c..a6cc079d720 100644
--- a/app/assets/javascripts/filtered_search/dropdown_emoji.js
+++ b/app/assets/javascripts/filtered_search/dropdown_emoji.js
@@ -1,7 +1,6 @@
-/* global Flash */
-
-import Ajax from '~/droplab/plugins/ajax';
-import Filter from '~/droplab/plugins/filter';
+import Flash from '../flash';
+import Ajax from '../droplab/plugins/ajax';
+import Filter from '../droplab/plugins/filter';
 import './filtered_search_dropdown';
 
 class DropdownEmoji extends gl.FilteredSearchDropdown {
diff --git a/app/assets/javascripts/filtered_search/dropdown_non_user.js b/app/assets/javascripts/filtered_search/dropdown_non_user.js
index b32d589481d..788fb1dc614 100644
--- a/app/assets/javascripts/filtered_search/dropdown_non_user.js
+++ b/app/assets/javascripts/filtered_search/dropdown_non_user.js
@@ -1,7 +1,6 @@
-/* global Flash */
-
-import Ajax from '~/droplab/plugins/ajax';
-import Filter from '~/droplab/plugins/filter';
+import Flash from '../flash';
+import Ajax from '../droplab/plugins/ajax';
+import Filter from '../droplab/plugins/filter';
 import './filtered_search_dropdown';
 
 class DropdownNonUser extends gl.FilteredSearchDropdown {
diff --git a/app/assets/javascripts/filtered_search/dropdown_user.js b/app/assets/javascripts/filtered_search/dropdown_user.js
index ce8817b1b2e..a9e2b65def0 100644
--- a/app/assets/javascripts/filtered_search/dropdown_user.js
+++ b/app/assets/javascripts/filtered_search/dropdown_user.js
@@ -1,6 +1,5 @@
-/* global Flash */
-
-import AjaxFilter from '~/droplab/plugins/ajax_filter';
+import Flash from '../flash';
+import AjaxFilter from '../droplab/plugins/ajax_filter';
 import './filtered_search_dropdown';
 import { addClassIfElementExists } from '../lib/utils/dom_utils';
 
diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js b/app/assets/javascripts/filtered_search/filtered_search_manager.js
index a44dc279a6f..7b233842d5a 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_manager.js
+++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js
@@ -1,3 +1,4 @@
+import Flash from '../flash';
 import FilteredSearchContainer from './container';
 import RecentSearchesRoot from './recent_searches_root';
 import RecentSearchesStore from './stores/recent_searches_store';
@@ -36,7 +37,7 @@ class FilteredSearchManager {
       .catch((error) => {
         if (error.name === 'RecentSearchesServiceError') return undefined;
         // eslint-disable-next-line no-new
-        new window.Flash('An error occurred while parsing recent searches');
+        new Flash('An error occurred while parsing recent searches');
         // Gracefully fail to empty array
         return [];
       })
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 28e8240169d..dd24fc44d2a 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_visual_tokens.js
+++ b/app/assets/javascripts/filtered_search/filtered_search_visual_tokens.js
@@ -1,5 +1,5 @@
 import AjaxCache from '../lib/utils/ajax_cache';
-import '../flash'; /* global Flash */
+import Flash from '../flash';
 import FilteredSearchContainer from './container';
 import UsersCache from '../lib/utils/users_cache';
 
diff --git a/app/assets/javascripts/flash.js b/app/assets/javascripts/flash.js
index ccff8f0ace7..69e4f884f34 100644
--- a/app/assets/javascripts/flash.js
+++ b/app/assets/javascripts/flash.js
@@ -1,71 +1,68 @@
-/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, one-var, one-var-declaration-per-line, no-param-reassign, quotes, quote-props, prefer-template, comma-dangle, max-len */
+import _ from 'underscore';
 
-window.Flash = (function() {
-  var hideFlash;
+const hideFlash = (flashEl) => {
+  flashEl.style.transition = 'opacity .3s'; // eslint-disable-line no-param-reassign
+  flashEl.style.opacity = '0'; // eslint-disable-line no-param-reassign
 
-  hideFlash = function() {
-    return $(this).fadeOut();
-  };
+  flashEl.addEventListener('transitionend', () => {
+    flashEl.remove();
+  }, {
+    once: true,
+  });
+};
 
-  /**
-   * Flash banner supports different types of Flash configurations
-   * along with ability to provide actionConfig which can be used to show
-   * additional action or link on banner next to message
-   *
-   * @param {String} message Flash message
-   * @param {String} type Type of Flash, it can be `notice` or `alert` (default)
-   * @param {Object} parent Reference to Parent element under which Flash needs to appear
-   * @param {Object} actionConfig Map of config to show action on banner
-   *    @param {String} href URL to which action link should point (default '#')
-   *    @param {String} title Title of action
-   *    @param {Function} clickHandler Method to call when action is clicked on
-   */
-  function Flash(message, type, parent, actionConfig) {
-    var flash, textDiv, actionLink;
-    if (type == null) {
-      type = 'alert';
-    }
-    if (parent == null) {
-      parent = null;
-    }
-    if (parent) {
-      this.flashContainer = parent.find('.flash-container');
-    } else {
-      this.flashContainer = $('.flash-container-page');
-    }
-    this.flashContainer.html('');
-    flash = $('<div/>', {
-      "class": "flash-" + type
-    });
-    flash.on('click', hideFlash);
-    textDiv = $('<div/>', {
-      "class": 'flash-text',
-      text: message
-    });
-    textDiv.appendTo(flash);
+const createAction = config => `
+  <a
+    href="${config.href || '#'}"
+    class="flash-action"
+    ${config.href ? 'role="button"' : ''}
+  >
+    ${_.escape(config.title)}
+  </a>
+`;
 
-    if (actionConfig) {
-      const actionLinkConfig = {
-        class: 'flash-action',
-        href: actionConfig.href || '#',
-        text: actionConfig.title
-      };
+const createFlashEl = (message, type) => `
+  <div
+    class="flash-${type}"
+  >
+    <div
+      class="flash-text"
+    >
+      ${_.escape(message)}
+    </div>
+  </div>
+`;
 
-      if (!actionConfig.href) {
-        actionLinkConfig.role = 'button';
-      }
+const Flash = function Flash(message, type = 'alert', parent = document, actionConfig = null) {
+  const flashContainer = parent.querySelector('.flash-container');
+  flashContainer.innerHTML = createFlashEl(message, type);
 
-      actionLink = $('<a/>', actionLinkConfig);
+  const flashEl = flashContainer.querySelector(`.flash-${type}`);
+  flashEl.addEventListener('click', () => hideFlash(flashEl));
 
-      actionLink.appendTo(flash);
-      this.flashContainer.on('click', '.flash-action', actionConfig.clickHandler);
-    }
-    if (this.flashContainer.parent().hasClass('content-wrapper')) {
-      textDiv.addClass('container-fluid container-limited');
+  if (actionConfig) {
+    flashEl.innerHTML += createAction(actionConfig);
+
+    if (actionConfig.clickHandler) {
+      flashEl.querySelector('.flash-action').addEventListener('click', e => actionConfig.clickHandler(e));
     }
-    flash.appendTo(this.flashContainer);
-    this.flashContainer.show();
   }
 
-  return Flash;
-})();
+  if (flashContainer.parentNode.classList.contains('content-wrapper')) {
+    const flashText = flashEl.querySelector('.flash-text');
+
+    flashText.classList.add('container-fluid');
+    flashText.classList.add('container-limited');
+  }
+
+  flashContainer.style.display = 'block';
+
+  return flashContainer;
+};
+
+export {
+  Flash as default,
+  createFlashEl,
+  hideFlash,
+};
+window.Flash = Flash;
diff --git a/app/assets/javascripts/groups/index.js b/app/assets/javascripts/groups/index.js
index 9ad8e5c6052..600bae24b52 100644
--- a/app/assets/javascripts/groups/index.js
+++ b/app/assets/javascripts/groups/index.js
@@ -1,6 +1,5 @@
-/* global Flash */
-
 import Vue from 'vue';
+import Flash from '../flash';
 import GroupFilterableList from './groups_filterable_list';
 import GroupsComponent from './components/groups.vue';
 import GroupFolder from './components/group_folder.vue';
diff --git a/app/assets/javascripts/integrations/integration_settings_form.js b/app/assets/javascripts/integrations/integration_settings_form.js
index cf1e6a14725..32415a8791f 100644
--- a/app/assets/javascripts/integrations/integration_settings_form.js
+++ b/app/assets/javascripts/integrations/integration_settings_form.js
@@ -1,4 +1,4 @@
-/* global Flash */
+import Flash from '../flash';
 
 export default class IntegrationSettingsForm {
   constructor(formSelector) {
@@ -102,7 +102,7 @@ export default class IntegrationSettingsForm {
     })
     .done((res) => {
       if (res.error) {
-        new Flash(`${res.message} ${res.service_response}`, null, null, {
+        new Flash(`${res.message} ${res.service_response}`, 'alert', document, {
           title: 'Save anyway',
           clickHandler: (e) => {
             e.preventDefault();
diff --git a/app/assets/javascripts/issuable_bulk_update_actions.js b/app/assets/javascripts/issuable_bulk_update_actions.js
index c39ffdb2e0f..eb15949603f 100644
--- a/app/assets/javascripts/issuable_bulk_update_actions.js
+++ b/app/assets/javascripts/issuable_bulk_update_actions.js
@@ -1,7 +1,7 @@
 /* eslint-disable comma-dangle, quotes, consistent-return, func-names, array-callback-return, space-before-function-paren, prefer-arrow-callback, max-len, no-unused-expressions, no-sequences, no-underscore-dangle, no-unused-vars, no-param-reassign */
 /* global IssuableIndex */
-/* global Flash */
 import _ from 'underscore';
+import Flash from './flash';
 
 export default {
   init({ container, form, issues, prefixId } = {}) {
diff --git a/app/assets/javascripts/issue.js b/app/assets/javascripts/issue.js
index c0bd64814ca..3fc29f9a661 100644
--- a/app/assets/javascripts/issue.js
+++ b/app/assets/javascripts/issue.js
@@ -1,9 +1,7 @@
 /* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, one-var, no-underscore-dangle, one-var-declaration-per-line, object-shorthand, no-unused-vars, no-new, comma-dangle, consistent-return, quotes, dot-notation, quote-props, prefer-arrow-callback, max-len */
-/* global Flash */
-
 import 'vendor/jquery.waitforimages';
 import '~/lib/utils/text_utility';
-import './flash';
+import Flash from './flash';
 import TaskList from './task_list';
 import CreateMergeRequestDropdown from './create_merge_request_dropdown';
 import IssuablesHelper from './helpers/issuables_helper';
diff --git a/app/assets/javascripts/issue_show/components/app.vue b/app/assets/javascripts/issue_show/components/app.vue
index 06f6ec241f4..0e63c723e2f 100644
--- a/app/assets/javascripts/issue_show/components/app.vue
+++ b/app/assets/javascripts/issue_show/components/app.vue
@@ -1,6 +1,6 @@
 <script>
-/* global Flash */
 import Visibility from 'visibilityjs';
+import Flash from '../../flash';
 import Poll from '../../lib/utils/poll';
 import eventHub from '../event_hub';
 import Service from '../services/index';
diff --git a/app/assets/javascripts/jobs/job_details_mediator.js b/app/assets/javascripts/jobs/job_details_mediator.js
index cc014b815c4..891b12c702c 100644
--- a/app/assets/javascripts/jobs/job_details_mediator.js
+++ b/app/assets/javascripts/jobs/job_details_mediator.js
@@ -1,7 +1,7 @@
-/* global Flash */
 /* global Build */
 
 import Visibility from 'visibilityjs';
+import Flash from '../flash';
 import Poll from '../lib/utils/poll';
 import JobStore from './stores/job_store';
 import JobService from './services/job_service';
diff --git a/app/assets/javascripts/label_manager.js b/app/assets/javascripts/label_manager.js
index d8814802d9e..a8f613c6cf2 100644
--- a/app/assets/javascripts/label_manager.js
+++ b/app/assets/javascripts/label_manager.js
@@ -1,7 +1,8 @@
 /* eslint-disable comma-dangle, class-methods-use-this, no-underscore-dangle, no-param-reassign, no-unused-vars, consistent-return, func-names, space-before-function-paren, max-len */
-/* global Flash */
 /* global Sortable */
 
+import Flash from './flash';
+
 ((global) => {
   class LabelManager {
     constructor({ togglePriorityButton, prioritizedLabels, otherLabels } = {}) {
diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js
index 974121412bd..bbe9553869b 100644
--- a/app/assets/javascripts/main.js
+++ b/app/assets/javascripts/main.js
@@ -1,5 +1,4 @@
 /* eslint-disable func-names, space-before-function-paren, no-var, quotes, consistent-return, prefer-arrow-callback, comma-dangle, object-shorthand, no-new, max-len, no-multi-spaces, import/newline-after-import, import/first */
-/* global Flash */
 /* global ConfirmDangerModal */
 /* global Aside */
 
@@ -75,7 +74,7 @@ import './diff';
 import './dropzone_input';
 import './due_date_select';
 import './files_comment_button';
-import './flash';
+import Flash from './flash';
 import './gl_dropdown';
 import './gl_field_error';
 import './gl_field_errors';
@@ -168,7 +167,6 @@ $(function () {
   var $document = $(document);
   var $window = $(window);
   var $sidebarGutterToggle = $('.js-sidebar-toggle');
-  var $flash = $('.flash-container');
   var bootstrapBreakpoint = bp.getBreakpointSize();
   var fitSidebarForSize;
 
@@ -253,13 +251,6 @@ $(function () {
   // Form submitter
   });
   gl.utils.localTimeAgo($('abbr.timeago, .js-timeago'), true);
-  // Flash
-  if ($flash.length > 0) {
-    $flash.click(function () {
-      return $(this).fadeOut();
-    });
-    $flash.show();
-  }
   // Disable form buttons while a form is submitting
   $body.on('ajax:complete, ajax:beforeSend, submit', 'form', function (e) {
     var buttons;
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 645045fea88..93f8f6ee926 100644
--- a/app/assets/javascripts/merge_conflicts/components/diff_file_editor.js
+++ b/app/assets/javascripts/merge_conflicts/components/diff_file_editor.js
@@ -1,8 +1,8 @@
 /* eslint-disable comma-dangle, quote-props, no-useless-computed-key, object-shorthand, no-new, no-param-reassign, max-len */
 /* global ace */
-/* global Flash */
 
 import Vue from 'vue';
+import Flash from '../../flash';
 
 ((global) => {
   global.mergeConflicts = global.mergeConflicts || {};
diff --git a/app/assets/javascripts/merge_conflicts/merge_conflicts_bundle.js b/app/assets/javascripts/merge_conflicts/merge_conflicts_bundle.js
index d74cf5328ad..17591829b76 100644
--- a/app/assets/javascripts/merge_conflicts/merge_conflicts_bundle.js
+++ b/app/assets/javascripts/merge_conflicts/merge_conflicts_bundle.js
@@ -1,7 +1,7 @@
 /* eslint-disable new-cap, comma-dangle, no-new */
-/* global Flash */
 
 import Vue from 'vue';
+import Flash from '../flash';
 import initIssuableSidebar from '../init_issuable_sidebar';
 import './merge_conflict_store';
 import './merge_conflict_service';
diff --git a/app/assets/javascripts/merge_request_tabs.js b/app/assets/javascripts/merge_request_tabs.js
index c042b22d1fd..df042c7baff 100644
--- a/app/assets/javascripts/merge_request_tabs.js
+++ b/app/assets/javascripts/merge_request_tabs.js
@@ -1,9 +1,8 @@
 /* eslint-disable no-new, class-methods-use-this */
-/* global Flash */
 /* global notes */
 
 import Cookies from 'js-cookie';
-import './flash';
+import Flash from './flash';
 import BlobForkSuggestion from './blob/blob_fork_suggestion';
 import initChangesDropdown from './init_changes_dropdown';
 import bp from './breakpoints';
diff --git a/app/assets/javascripts/milestone.js b/app/assets/javascripts/milestone.js
index 3e07ec4d0aa..8f3f1986763 100644
--- a/app/assets/javascripts/milestone.js
+++ b/app/assets/javascripts/milestone.js
@@ -1,7 +1,8 @@
 /* eslint-disable func-names, space-before-function-paren, wrap-iife, no-use-before-define, camelcase, quotes, object-shorthand, no-shadow, no-unused-vars, comma-dangle, no-var, prefer-template, no-underscore-dangle, consistent-return, one-var, one-var-declaration-per-line, default-case, prefer-arrow-callback, max-len */
-/* global Flash */
 /* global Sortable */
 
+import Flash from './flash';
+
 (function() {
   this.Milestone = (function() {
     function Milestone() {
diff --git a/app/assets/javascripts/mini_pipeline_graph_dropdown.js b/app/assets/javascripts/mini_pipeline_graph_dropdown.js
index 64c1447f427..ca3d271663b 100644
--- a/app/assets/javascripts/mini_pipeline_graph_dropdown.js
+++ b/app/assets/javascripts/mini_pipeline_graph_dropdown.js
@@ -1,5 +1,5 @@
 /* eslint-disable no-new */
-/* global Flash */
+import Flash from './flash';
 
 /**
  * In each pipelines table we have a mini pipeline graph for each pipeline.
diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue
index 442ed86d50c..cbe24c0915b 100644
--- a/app/assets/javascripts/monitoring/components/dashboard.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard.vue
@@ -1,6 +1,6 @@
 <script>
-  /* global Flash */
   import _ from 'underscore';
+  import Flash from '../../flash';
   import MonitoringService from '../services/monitoring_service';
   import GraphGroup from './graph_group.vue';
   import Graph from './graph.vue';
diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js
index 24de21f2ce2..e1895e45918 100644
--- a/app/assets/javascripts/notes.js
+++ b/app/assets/javascripts/notes.js
@@ -5,7 +5,6 @@ default-case, prefer-template, consistent-return, no-alert, no-return-assign,
 no-param-reassign, prefer-arrow-callback, no-else-return, comma-dangle, no-new,
 brace-style, no-lonely-if, vars-on-top, no-unused-vars, no-sequences, no-shadow,
 newline-per-chained-call, no-useless-escape, class-methods-use-this */
-/* global Flash */
 /* global Autosave */
 /* global ResolveService */
 /* global mrRefreshWidgetUrl */
@@ -18,6 +17,7 @@ import Dropzone from 'dropzone';
 import 'vendor/jquery.caret'; // required by jquery.atwho
 import 'vendor/jquery.atwho';
 import AjaxCache from '~/lib/utils/ajax_cache';
+import Flash from './flash';
 import CommentTypeToggle from './comment_type_toggle';
 import loadAwardsHandler from './awards_handler';
 import './autosave';
@@ -354,7 +354,7 @@ export default class Notes {
             Object.keys(noteEntity.commands_changes).length > 0) {
           $notesList.find('.system-note.being-posted').remove();
         }
-        this.addFlash(noteEntity.errors.commands_only, 'notice', this.parentTimeline);
+        this.addFlash(noteEntity.errors.commands_only, 'notice', this.parentTimeline); // TODO: CHECK THIS!
         this.refresh();
       }
       return;
diff --git a/app/assets/javascripts/notes/components/issue_comment_form.vue b/app/assets/javascripts/notes/components/issue_comment_form.vue
index ab8516296a8..2ce52e4538a 100644
--- a/app/assets/javascripts/notes/components/issue_comment_form.vue
+++ b/app/assets/javascripts/notes/components/issue_comment_form.vue
@@ -1,8 +1,9 @@
 <script>
-  /* global Flash, Autosave */
+  /* global Autosave */
   import { mapActions, mapGetters } from 'vuex';
   import _ from 'underscore';
   import autosize from 'vendor/autosize';
+  import Flash from '../../flash';
   import '../../autosave';
   import TaskList from '../../task_list';
   import * as constants from '../constants';
@@ -145,7 +146,7 @@
                   Flash(
                     'Something went wrong while adding your comment. Please try again.',
                     'alert',
-                    $(this.$refs.commentForm),
+                    this.$refs.commentForm,
                   );
                 }
               } else {
@@ -160,7 +161,7 @@
               this.isSubmitting = false;
               this.discard(false);
               const msg = 'Your comment could not be submitted! Please check your network connection and try again.';
-              Flash(msg, 'alert', $(this.$el));
+              Flash(msg, 'alert', this.$el);
               this.note = noteData.data.note.note; // Restore textarea content.
               this.removePlaceholderNotes();
             });
diff --git a/app/assets/javascripts/notes/components/issue_discussion.vue b/app/assets/javascripts/notes/components/issue_discussion.vue
index b131ef4b182..baf43190d9e 100644
--- a/app/assets/javascripts/notes/components/issue_discussion.vue
+++ b/app/assets/javascripts/notes/components/issue_discussion.vue
@@ -1,6 +1,6 @@
 <script>
-  /* global Flash */
   import { mapActions, mapGetters } from 'vuex';
+  import Flash from '../../flash';
   import { SYSTEM_NOTE } from '../constants';
   import issueNote from './issue_note.vue';
   import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
@@ -133,7 +133,7 @@
             this.isReplying = true;
             this.$nextTick(() => {
               const msg = 'Your comment could not be submitted! Please check your network connection and try again.';
-              Flash(msg, 'alert', $(this.$el));
+              Flash(msg, 'alert', this.$el);
               this.$refs.noteForm.note = noteText;
               callback(err);
             });
diff --git a/app/assets/javascripts/notes/components/issue_note.vue b/app/assets/javascripts/notes/components/issue_note.vue
index 1f43b8a16ad..0ddbd672bed 100644
--- a/app/assets/javascripts/notes/components/issue_note.vue
+++ b/app/assets/javascripts/notes/components/issue_note.vue
@@ -1,7 +1,6 @@
 <script>
-  /* global Flash */
-
   import { mapGetters, mapActions } from 'vuex';
+  import Flash from '../../flash';
   import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
   import issueNoteHeader from './issue_note_header.vue';
   import issueNoteActions from './issue_note_actions.vue';
@@ -101,7 +100,7 @@
             this.isEditing = true;
             this.$nextTick(() => {
               const msg = 'Something went wrong while editing your comment. Please try again.';
-              Flash(msg, 'alert', $(this.$el));
+              Flash(msg, 'alert', this.$el);
               this.recoverNoteContent(noteText);
               callback();
             });
diff --git a/app/assets/javascripts/notes/components/issue_note_awards_list.vue b/app/assets/javascripts/notes/components/issue_note_awards_list.vue
index d42e61e3899..c3a340139e7 100644
--- a/app/assets/javascripts/notes/components/issue_note_awards_list.vue
+++ b/app/assets/javascripts/notes/components/issue_note_awards_list.vue
@@ -1,10 +1,9 @@
 <script>
-  /* global Flash */
-
   import { mapActions, mapGetters } from 'vuex';
   import emojiSmiling from 'icons/_emoji_slightly_smiling_face.svg';
   import emojiSmile from 'icons/_emoji_smile.svg';
   import emojiSmiley from 'icons/_emoji_smiley.svg';
+  import Flash from '../../flash';
   import { glEmojiTag } from '../../emoji';
   import tooltip from '../../vue_shared/directives/tooltip';
 
diff --git a/app/assets/javascripts/notes/components/issue_notes_app.vue b/app/assets/javascripts/notes/components/issue_notes_app.vue
index b6fc5e5036f..aecd1f957e5 100644
--- a/app/assets/javascripts/notes/components/issue_notes_app.vue
+++ b/app/assets/javascripts/notes/components/issue_notes_app.vue
@@ -1,6 +1,6 @@
 <script>
-  /* global Flash */
   import { mapGetters, mapActions } from 'vuex';
+  import Flash from '../../flash';
   import store from '../stores/';
   import * as constants from '../constants';
   import issueNote from './issue_note.vue';
diff --git a/app/assets/javascripts/notes/stores/actions.js b/app/assets/javascripts/notes/stores/actions.js
index 1a791039909..6f04aecc9b7 100644
--- a/app/assets/javascripts/notes/stores/actions.js
+++ b/app/assets/javascripts/notes/stores/actions.js
@@ -1,5 +1,5 @@
-/* global Flash */
 import Visibility from 'visibilityjs';
+import Flash from '../../flash';
 import Poll from '../../lib/utils/poll';
 import * as types from './mutation_types';
 import * as utils from './utils';
@@ -99,7 +99,7 @@ export const saveNote = ({ commit, dispatch }, noteData) => {
         eTagPoll.makeRequest();
 
         $('.js-gfm-input').trigger('clear-commands-cache.atwho');
-        Flash('Commands applied', 'notice', $(noteData.flashContainer));
+        Flash('Commands applied', 'notice', noteData.flashContainer);
       }
 
       if (commandsChanges) {
@@ -114,8 +114,8 @@ export const saveNote = ({ commit, dispatch }, noteData) => {
             .catch(() => {
               Flash(
                 'Something went wrong while adding your award. Please try again.',
-                null,
-                $(noteData.flashContainer),
+                'alert',
+                noteData.flashContainer,
               );
             });
         }
@@ -126,7 +126,7 @@ export const saveNote = ({ commit, dispatch }, noteData) => {
       }
 
       if (errors && errors.commands_only) {
-        Flash(errors.commands_only, 'notice', $(noteData.flashContainer));
+        Flash(errors.commands_only, 'notice', noteData.flashContainer);
       }
       commit(types.REMOVE_PLACEHOLDER_NOTES);
 
diff --git a/app/assets/javascripts/notifications_dropdown.js b/app/assets/javascripts/notifications_dropdown.js
index 838356133cd..f90ac2d9f71 100644
--- a/app/assets/javascripts/notifications_dropdown.js
+++ b/app/assets/javascripts/notifications_dropdown.js
@@ -1,5 +1,5 @@
 /* eslint-disable func-names, space-before-function-paren, wrap-iife, one-var, no-var, one-var-declaration-per-line, no-unused-vars, consistent-return, prefer-arrow-callback, no-else-return, max-len */
-/* global Flash */
+import Flash from './flash';
 
 (function() {
   this.NotificationsDropdown = (function() {
diff --git a/app/assets/javascripts/pipelines/components/stage.vue b/app/assets/javascripts/pipelines/components/stage.vue
index a4a27247406..1a7a5c2a415 100644
--- a/app/assets/javascripts/pipelines/components/stage.vue
+++ b/app/assets/javascripts/pipelines/components/stage.vue
@@ -13,7 +13,7 @@
  * 4. Commit widget
  */
 
-/* global Flash */
+import Flash from '../../flash';
 import { borderlessStatusIconEntityMap } from '../../vue_shared/ci_status_icons';
 import loadingIcon from '../../vue_shared/components/loading_icon.vue';
 import tooltip from '../../vue_shared/directives/tooltip';
diff --git a/app/assets/javascripts/pipelines/mixins/pipelines.js b/app/assets/javascripts/pipelines/mixins/pipelines.js
index e97f5632dc8..50bdf80c3e3 100644
--- a/app/assets/javascripts/pipelines/mixins/pipelines.js
+++ b/app/assets/javascripts/pipelines/mixins/pipelines.js
@@ -1,6 +1,5 @@
-/* global Flash */
-import '~/flash';
 import Visibility from 'visibilityjs';
+import Flash from '../../flash';
 import Poll from '../../lib/utils/poll';
 import emptyState from '../components/empty_state.vue';
 import errorState from '../components/error_state.vue';
diff --git a/app/assets/javascripts/pipelines/pipeline_details_bundle.js b/app/assets/javascripts/pipelines/pipeline_details_bundle.js
index bfc416da50b..206023d4ddb 100644
--- a/app/assets/javascripts/pipelines/pipeline_details_bundle.js
+++ b/app/assets/javascripts/pipelines/pipeline_details_bundle.js
@@ -1,6 +1,5 @@
-/* global Flash */
-
 import Vue from 'vue';
+import Flash from '../flash';
 import PipelinesMediator from './pipeline_details_mediatior';
 import pipelineGraph from './components/graph/graph_component.vue';
 import pipelineHeader from './components/header_component.vue';
diff --git a/app/assets/javascripts/pipelines/pipeline_details_mediatior.js b/app/assets/javascripts/pipelines/pipeline_details_mediatior.js
index 385e7430a7d..823ccd849f4 100644
--- a/app/assets/javascripts/pipelines/pipeline_details_mediatior.js
+++ b/app/assets/javascripts/pipelines/pipeline_details_mediatior.js
@@ -1,6 +1,5 @@
-/* global Flash */
-
 import Visibility from 'visibilityjs';
+import Flash from '../flash';
 import Poll from '../lib/utils/poll';
 import PipelineStore from './stores/pipeline_store';
 import PipelineService from './services/pipeline_service';
diff --git a/app/assets/javascripts/profile/profile.js b/app/assets/javascripts/profile/profile.js
index 3deb242bc1f..0dc02f012e4 100644
--- a/app/assets/javascripts/profile/profile.js
+++ b/app/assets/javascripts/profile/profile.js
@@ -1,5 +1,5 @@
 /* eslint-disable comma-dangle, no-unused-vars, class-methods-use-this, quotes, consistent-return, func-names, prefer-arrow-callback, space-before-function-paren, max-len */
-/* global Flash */
+import Flash from '../flash';
 import { getPagePath } from '../lib/utils/common_utils';
 
 ((global) => {
diff --git a/app/assets/javascripts/protected_branches/protected_branch_edit.js b/app/assets/javascripts/protected_branches/protected_branch_edit.js
index 3b920942a3f..632625da8e7 100644
--- a/app/assets/javascripts/protected_branches/protected_branch_edit.js
+++ b/app/assets/javascripts/protected_branches/protected_branch_edit.js
@@ -1,6 +1,5 @@
 /* eslint-disable no-new */
-/* global Flash */
-
+import Flash from '../flash';
 import ProtectedBranchAccessDropdown from './protected_branch_access_dropdown';
 
 export default class ProtectedBranchEdit {
@@ -57,7 +56,7 @@ export default class ProtectedBranchEdit {
         },
       },
       error() {
-        new Flash('Failed to update branch!', null, $('.js-protected-branches-list'));
+        new Flash('Failed to update branch!', 'alert', document.querySelector('.js-protected-branches-list'));
       },
     }).always(() => {
       this.$allowedToMergeDropdown.enable();
diff --git a/app/assets/javascripts/protected_tags/protected_tag_edit.js b/app/assets/javascripts/protected_tags/protected_tag_edit.js
index 09a387c0f9e..dad0ad25b65 100644
--- a/app/assets/javascripts/protected_tags/protected_tag_edit.js
+++ b/app/assets/javascripts/protected_tags/protected_tag_edit.js
@@ -1,6 +1,5 @@
 /* eslint-disable no-new */
-/* global Flash */
-
+import Flash from '../flash';
 import ProtectedTagAccessDropdown from './protected_tag_access_dropdown';
 
 export default class ProtectedTagEdit {
@@ -43,7 +42,7 @@ export default class ProtectedTagEdit {
         },
       },
       error() {
-        new Flash('Failed to update tag!', null, $('.js-protected-tags-list'));
+        new Flash('Failed to update tag!', 'alert', document.querySelector('.js-protected-tags-list'));
       },
     }).always(() => {
       this.$allowedToCreateDropdownButton.enable();
diff --git a/app/assets/javascripts/repo/components/repo_commit_section.vue b/app/assets/javascripts/repo/components/repo_commit_section.vue
index 119e38c583d..6d8cc964eb2 100644
--- a/app/assets/javascripts/repo/components/repo_commit_section.vue
+++ b/app/assets/javascripts/repo/components/repo_commit_section.vue
@@ -1,5 +1,5 @@
 <script>
-/* global Flash */
+import Flash from '../../flash';
 import Store from '../stores/repo_store';
 import RepoMixin from '../mixins/repo_mixin';
 import Service from '../services/repo_service';
diff --git a/app/assets/javascripts/repo/helpers/repo_helper.js b/app/assets/javascripts/repo/helpers/repo_helper.js
index 7483f8bc305..46204598e1d 100644
--- a/app/assets/javascripts/repo/helpers/repo_helper.js
+++ b/app/assets/javascripts/repo/helpers/repo_helper.js
@@ -1,7 +1,6 @@
-/* global Flash */
 import Service from '../services/repo_service';
 import Store from '../stores/repo_store';
-import '../../flash';
+import Flash from '../../flash';
 
 const RepoHelper = {
   monacoInstance: null,
diff --git a/app/assets/javascripts/repo/services/repo_service.js b/app/assets/javascripts/repo/services/repo_service.js
index af83497fa39..fe37102880b 100644
--- a/app/assets/javascripts/repo/services/repo_service.js
+++ b/app/assets/javascripts/repo/services/repo_service.js
@@ -1,5 +1,5 @@
-/* global Flash */
 import axios from 'axios';
+import Flash from '../../flash';
 import Store from '../stores/repo_store';
 import Api from '../../api';
 import Helper from '../helpers/repo_helper';
@@ -72,9 +72,9 @@ const RepoService = {
 
   commitFlash(data) {
     if (data.short_id && data.stats) {
-      window.Flash(`Your changes have been committed. Commit ${data.short_id} with ${data.stats.additions} additions, ${data.stats.deletions} deletions.`, 'notice');
+      Flash(`Your changes have been committed. Commit ${data.short_id} with ${data.stats.additions} additions, ${data.stats.deletions} deletions.`, 'notice');
     } else {
-      window.Flash(data.message);
+      Flash(data.message);
     }
   },
 };
diff --git a/app/assets/javascripts/search.js b/app/assets/javascripts/search.js
index 05caf177aec..07fee53d814 100644
--- a/app/assets/javascripts/search.js
+++ b/app/assets/javascripts/search.js
@@ -1,5 +1,5 @@
 /* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, one-var, one-var-declaration-per-line, object-shorthand, prefer-arrow-callback, comma-dangle, prefer-template, quotes, no-else-return, max-len */
-/* global Flash */
+import Flash from './flash';
 import Api from './api';
 
 (function() {
diff --git a/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.js b/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.js
index f83c3b037ed..74c17bc14a2 100644
--- a/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.js
+++ b/app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.js
@@ -1,5 +1,4 @@
-/* global Flash */
-
+import Flash from '../../../flash';
 import AssigneeTitle from './assignee_title';
 import Assignees from './assignees';
 
diff --git a/app/assets/javascripts/sidebar/components/confidential/confidential_issue_sidebar.vue b/app/assets/javascripts/sidebar/components/confidential/confidential_issue_sidebar.vue
index f2b1099a678..22a9a34dda3 100644
--- a/app/assets/javascripts/sidebar/components/confidential/confidential_issue_sidebar.vue
+++ b/app/assets/javascripts/sidebar/components/confidential/confidential_issue_sidebar.vue
@@ -1,5 +1,5 @@
 <script>
-/* global Flash */
+import Flash from '../../../flash';
 import editForm from './edit_form.vue';
 
 export default {
diff --git a/app/assets/javascripts/sidebar/lib/sidebar_move_issue.js b/app/assets/javascripts/sidebar/lib/sidebar_move_issue.js
index 3c9de02407e..ecc0f0d21f5 100644
--- a/app/assets/javascripts/sidebar/lib/sidebar_move_issue.js
+++ b/app/assets/javascripts/sidebar/lib/sidebar_move_issue.js
@@ -1,4 +1,4 @@
-/* global Flash */
+import Flash from '../../flash';
 
 function isValidProjectId(id) {
   return id > 0;
diff --git a/app/assets/javascripts/sidebar/sidebar_mediator.js b/app/assets/javascripts/sidebar/sidebar_mediator.js
index 2fe6e5b31f0..ede3a0de144 100644
--- a/app/assets/javascripts/sidebar/sidebar_mediator.js
+++ b/app/assets/javascripts/sidebar/sidebar_mediator.js
@@ -1,5 +1,4 @@
-/* global Flash */
-
+import Flash from '../flash';
 import Service from './services/sidebar_service';
 import Store from './stores/sidebar_store';
 
diff --git a/app/assets/javascripts/star.js b/app/assets/javascripts/star.js
index 3a06b477d7c..77db075d1ef 100644
--- a/app/assets/javascripts/star.js
+++ b/app/assets/javascripts/star.js
@@ -1,6 +1,5 @@
 /* eslint-disable func-names, space-before-function-paren, wrap-iife, no-unused-vars, one-var, no-var, one-var-declaration-per-line, prefer-arrow-callback, no-new, max-len */
-/* global Flash */
-
+import Flash from './flash';
 import { __, s__ } from './locale';
 
 export default class Star {
diff --git a/app/assets/javascripts/task_list.js b/app/assets/javascripts/task_list.js
index c39f569da5e..dcbec40c79e 100644
--- a/app/assets/javascripts/task_list.js
+++ b/app/assets/javascripts/task_list.js
@@ -1,6 +1,5 @@
-/* global Flash */
-
 import 'deckar01-task_list';
+import Flash from './flash';
 
 export default class TaskList {
   constructor(options = {}) {
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_deployment.js b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_deployment.js
index e98d147733c..e86a0f7e749 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_deployment.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_deployment.js
@@ -1,6 +1,5 @@
-/* global Flash */
-
 import '~/lib/utils/datetime_utility';
+import Flash from '../../flash';
 import MemoryUsage from './mr_widget_memory_usage';
 import StatusIcon from './mr_widget_status_icon';
 import MRWidgetService from '../services/mr_widget_service';
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.js
index bdfd4d9667c..05c4a28be88 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.js
@@ -1,4 +1,4 @@
-/* global Flash */
+import Flash from '../../../flash';
 import statusIcon from '../mr_widget_status_icon';
 import MRWidgetAuthor from '../../components/mr_widget_author';
 import eventHub from '../../event_hub';
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.js
index 74fc52796a0..2dfd87ed904 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.js
@@ -1,5 +1,4 @@
-/* global Flash */
-
+import Flash from '../../../flash';
 import mrWidgetAuthorTime from '../../components/mr_widget_author_time';
 import tooltip from '../../../vue_shared/directives/tooltip';
 import loadingIcon from '../../../vue_shared/components/loading_icon.vue';
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js
index 61734163b6e..b8a96b23012 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js
@@ -1,7 +1,7 @@
-/* global Flash */
 import successSvg from 'icons/_icon_status_success.svg';
 import warningSvg from 'icons/_icon_status_warning.svg';
 import simplePoll from '~/lib/utils/simple_poll';
+import Flash from '../../../flash';
 import statusIcon from '../mr_widget_status_icon';
 import eventHub from '../../event_hub';
 
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_wip.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_wip.js
index 54be1fbe675..e9a97e8fe5e 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_wip.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_wip.js
@@ -1,4 +1,4 @@
-/* global Flash */
+import Flash from '../../../flash';
 import statusIcon from '../mr_widget_status_icon';
 import tooltip from '../../../vue_shared/directives/tooltip';
 import eventHub from '../../event_hub';
diff --git a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js
index 044b664484b..4f497b204a3 100644
--- a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js
+++ b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js
@@ -1,5 +1,4 @@
-/* global Flash */
-
+import Flash from '../flash';
 import {
   WidgetHeader,
   WidgetMergeHelp,
diff --git a/app/assets/javascripts/vue_shared/components/markdown/field.vue b/app/assets/javascripts/vue_shared/components/markdown/field.vue
index 759d30c9c7c..af4187fab46 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/field.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/field.vue
@@ -1,5 +1,5 @@
 <script>
-  /* global Flash */
+  import Flash from '../../../flash';
   import markdownHeader from './header.vue';
   import markdownToolbar from './toolbar.vue';
 
-- 
cgit v1.2.3


From d668294f28c7a54a34b6cc896953ece1c9def15d Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Tue, 3 Oct 2017 15:01:02 +0100
Subject: spec fixes

---
 app/assets/javascripts/flash.js | 15 ++++++++++-----
 app/assets/javascripts/notes.js |  4 ++--
 2 files changed, 12 insertions(+), 7 deletions(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/flash.js b/app/assets/javascripts/flash.js
index 69e4f884f34..1a52c5a07bf 100644
--- a/app/assets/javascripts/flash.js
+++ b/app/assets/javascripts/flash.js
@@ -1,8 +1,10 @@
 import _ from 'underscore';
 
 const hideFlash = (flashEl) => {
-  flashEl.style.transition = 'opacity .3s'; // eslint-disable-line no-param-reassign
-  flashEl.style.opacity = '0'; // eslint-disable-line no-param-reassign
+  Object.assign(flashEl.style, {
+    transition: 'opacity .3s',
+    opacity: '0',
+  });
 
   flashEl.addEventListener('transitionend', () => {
     flashEl.remove();
@@ -33,8 +35,11 @@ const createFlashEl = (message, type) => `
   </div>
 `;
 
-const Flash = function Flash(message, type = 'alert', parent = document, actionConfig = null) {
+const createFlash = function createFlash(message, type = 'alert', parent = document, actionConfig = null) {
   const flashContainer = parent.querySelector('.flash-container');
+
+  if (!flashContainer) return null;
+
   flashContainer.innerHTML = createFlashEl(message, type);
 
   const flashEl = flashContainer.querySelector(`.flash-${type}`);
@@ -61,8 +66,8 @@ const Flash = function Flash(message, type = 'alert', parent = document, actionC
 };
 
 export {
-  Flash as default,
+  createFlash as default,
   createFlashEl,
   hideFlash,
 };
-window.Flash = Flash;
+window.Flash = createFlash;
diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js
index e1895e45918..dafbfb59c99 100644
--- a/app/assets/javascripts/notes.js
+++ b/app/assets/javascripts/notes.js
@@ -354,7 +354,7 @@ export default class Notes {
             Object.keys(noteEntity.commands_changes).length > 0) {
           $notesList.find('.system-note.being-posted').remove();
         }
-        this.addFlash(noteEntity.errors.commands_only, 'notice', this.parentTimeline); // TODO: CHECK THIS!
+        this.addFlash(noteEntity.errors.commands_only, 'notice', this.parentTimeline.get(0));
         this.refresh();
       }
       return;
@@ -593,7 +593,7 @@ export default class Notes {
     } else if ($form.hasClass('js-discussion-note-form')) {
       formParentTimeline = $form.closest('.discussion-notes').find('.notes');
     }
-    return this.addFlash('Your comment could not be submitted! Please check your network connection and try again.', 'alert', formParentTimeline);
+    return this.addFlash('Your comment could not be submitted! Please check your network connection and try again.', 'alert', formParentTimeline.get(0));
   }
 
   updateNoteError($parentTimeline) {
-- 
cgit v1.2.3


From bbf7ea24a560e22c3b51326d2413a6f8d6f0a530 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Wed, 4 Oct 2017 12:13:11 +0100
Subject: flash tests added back in documentation comment to flash file

---
 app/assets/javascripts/flash.js | 45 +++++++++++++++++++++++++++++++----------
 1 file changed, 34 insertions(+), 11 deletions(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/flash.js b/app/assets/javascripts/flash.js
index 1a52c5a07bf..d745483c93f 100644
--- a/app/assets/javascripts/flash.js
+++ b/app/assets/javascripts/flash.js
@@ -1,23 +1,27 @@
 import _ from 'underscore';
 
-const hideFlash = (flashEl) => {
-  Object.assign(flashEl.style, {
-    transition: 'opacity .3s',
-    opacity: '0',
-  });
+const hideFlash = (flashEl, fadeTransition = true) => {
+  if (fadeTransition) {
+    Object.assign(flashEl.style, {
+      transition: 'opacity .3s',
+      opacity: '0',
+    });
+  }
 
   flashEl.addEventListener('transitionend', () => {
     flashEl.remove();
   }, {
     once: true,
   });
+
+  if (!fadeTransition) flashEl.dispatchEvent(new Event('transitionend'));
 };
 
 const createAction = config => `
   <a
     href="${config.href || '#'}"
     class="flash-action"
-    ${config.href ? 'role="button"' : ''}
+    ${config.href ? '' : 'role="button"'}
   >
     ${_.escape(config.title)}
   </a>
@@ -35,7 +39,27 @@ const createFlashEl = (message, type) => `
   </div>
 `;
 
-const createFlash = function createFlash(message, type = 'alert', parent = document, actionConfig = null) {
+/*
+ *  Flash banner supports different types of Flash configurations
+ *  along with ability to provide actionConfig which can be used to show
+ *  additional action or link on banner next to message
+ *
+ *  @param {String} message             Flash message text
+ *  @param {String} type                Type of Flash, it can be `notice` or `alert` (default)
+ *  @param {Object} parent              Reference to parent element under which Flash needs to appear
+ *  @param {Object} actonConfig         Map of config to show action on banner
+ *    @param {String} href              URL to which action config should point to (default: '#')
+ *    @param {String} title             Title of action
+ *    @param {Function} clickHandler    Method to call when action is clicked on
+ *  @param {Boolean} fadeTransition     Boolean to determine whether to fade the alert out
+ */
+const createFlash = function createFlash(
+  message,
+  type = 'alert',
+  parent = document,
+  actionConfig = null,
+  fadeTransition = true,
+) {
   const flashContainer = parent.querySelector('.flash-container');
 
   if (!flashContainer) return null;
@@ -43,7 +67,7 @@ const createFlash = function createFlash(message, type = 'alert', parent = docum
   flashContainer.innerHTML = createFlashEl(message, type);
 
   const flashEl = flashContainer.querySelector(`.flash-${type}`);
-  flashEl.addEventListener('click', () => hideFlash(flashEl));
+  flashEl.addEventListener('click', () => hideFlash(flashEl, fadeTransition));
 
   if (actionConfig) {
     flashEl.innerHTML += createAction(actionConfig);
@@ -55,9 +79,7 @@ const createFlash = function createFlash(message, type = 'alert', parent = docum
 
   if (flashContainer.parentNode.classList.contains('content-wrapper')) {
     const flashText = flashEl.querySelector('.flash-text');
-
-    flashText.classList.add('container-fluid');
-    flashText.classList.add('container-limited');
+    flashText.className = `${flashText.className} container-fluid container-limited`;
   }
 
   flashContainer.style.display = 'block';
@@ -68,6 +90,7 @@ const createFlash = function createFlash(message, type = 'alert', parent = docum
 export {
   createFlash as default,
   createFlashEl,
+  createAction,
   hideFlash,
 };
 window.Flash = createFlash;
-- 
cgit v1.2.3


From 6c97107d37771522d1deec6007a791332270ba6f Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Wed, 4 Oct 2017 14:44:43 +0100
Subject: fixed eslint

---
 app/assets/javascripts/flash.js | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/flash.js b/app/assets/javascripts/flash.js
index d745483c93f..8ac2b96a22d 100644
--- a/app/assets/javascripts/flash.js
+++ b/app/assets/javascripts/flash.js
@@ -44,14 +44,14 @@ const createFlashEl = (message, type) => `
  *  along with ability to provide actionConfig which can be used to show
  *  additional action or link on banner next to message
  *
- *  @param {String} message             Flash message text
- *  @param {String} type                Type of Flash, it can be `notice` or `alert` (default)
- *  @param {Object} parent              Reference to parent element under which Flash needs to appear
- *  @param {Object} actonConfig         Map of config to show action on banner
- *    @param {String} href              URL to which action config should point to (default: '#')
- *    @param {String} title             Title of action
- *    @param {Function} clickHandler    Method to call when action is clicked on
- *  @param {Boolean} fadeTransition     Boolean to determine whether to fade the alert out
+ *  @param {String} message           Flash message text
+ *  @param {String} type              Type of Flash, it can be `notice` or `alert` (default)
+ *  @param {Object} parent            Reference to parent element under which Flash needs to appear
+ *  @param {Object} actonConfig       Map of config to show action on banner
+ *    @param {String} href            URL to which action config should point to (default: '#')
+ *    @param {String} title           Title of action
+ *    @param {Function} clickHandler  Method to call when action is clicked on
+ *  @param {Boolean} fadeTransition   Boolean to determine whether to fade the alert out
  */
 const createFlash = function createFlash(
   message,
-- 
cgit v1.2.3


From cbfc97b112849299b0aaf3b5155e278d3db17c91 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Wed, 4 Oct 2017 15:55:01 +0100
Subject: karma spec fixes

---
 app/assets/javascripts/issue_show/components/app.vue                | 5 ++---
 app/assets/javascripts/repo/services/repo_service.js                | 5 ++---
 app/assets/javascripts/sidebar/lib/sidebar_move_issue.js            | 6 ++----
 .../vue_merge_request_widget/components/states/mr_widget_wip.js     | 5 ++---
 4 files changed, 8 insertions(+), 13 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 0e63c723e2f..eecb56cb185 100644
--- a/app/assets/javascripts/issue_show/components/app.vue
+++ b/app/assets/javascripts/issue_show/components/app.vue
@@ -1,6 +1,5 @@
 <script>
 import Visibility from 'visibilityjs';
-import Flash from '../../flash';
 import Poll from '../../lib/utils/poll';
 import eventHub from '../event_hub';
 import Service from '../services/index';
@@ -153,7 +152,7 @@ export default {
         })
         .catch(() => {
           eventHub.$emit('close.form');
-          return new Flash('Error updating issue');
+          window.Flash('Error updating issue');
         });
     },
     deleteIssuable() {
@@ -167,7 +166,7 @@ export default {
         })
         .catch(() => {
           eventHub.$emit('close.form');
-          return new Flash('Error deleting issue');
+          window.Flash('Error deleting issue');
         });
     },
   },
diff --git a/app/assets/javascripts/repo/services/repo_service.js b/app/assets/javascripts/repo/services/repo_service.js
index fe37102880b..830685f7e6e 100644
--- a/app/assets/javascripts/repo/services/repo_service.js
+++ b/app/assets/javascripts/repo/services/repo_service.js
@@ -1,5 +1,4 @@
 import axios from 'axios';
-import Flash from '../../flash';
 import Store from '../stores/repo_store';
 import Api from '../../api';
 import Helper from '../helpers/repo_helper';
@@ -72,9 +71,9 @@ const RepoService = {
 
   commitFlash(data) {
     if (data.short_id && data.stats) {
-      Flash(`Your changes have been committed. Commit ${data.short_id} with ${data.stats.additions} additions, ${data.stats.deletions} deletions.`, 'notice');
+      window.Flash(`Your changes have been committed. Commit ${data.short_id} with ${data.stats.additions} additions, ${data.stats.deletions} deletions.`, 'notice');
     } else {
-      Flash(data.message);
+      window.Flash(data.message);
     }
   },
 };
diff --git a/app/assets/javascripts/sidebar/lib/sidebar_move_issue.js b/app/assets/javascripts/sidebar/lib/sidebar_move_issue.js
index ecc0f0d21f5..977dd83a7ea 100644
--- a/app/assets/javascripts/sidebar/lib/sidebar_move_issue.js
+++ b/app/assets/javascripts/sidebar/lib/sidebar_move_issue.js
@@ -1,5 +1,3 @@
-import Flash from '../../flash';
-
 function isValidProjectId(id) {
   return id > 0;
 }
@@ -38,7 +36,7 @@ class SidebarMoveIssue {
       data: (searchTerm, callback) => {
         this.mediator.fetchAutocompleteProjects(searchTerm)
           .then(callback)
-          .catch(() => new Flash('An error occurred while fetching projects autocomplete.'));
+          .catch(() => new window.Flash('An error occurred while fetching projects autocomplete.'));
       },
       renderRow: project => `
         <li>
@@ -73,7 +71,7 @@ class SidebarMoveIssue {
 
       this.mediator.moveIssue()
         .catch(() => {
-          Flash('An error occurred while moving the issue.');
+          window.Flash('An error occurred while moving the issue.');
           this.$confirmButton
             .enable()
             .removeClass('is-loading');
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_wip.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_wip.js
index e9a97e8fe5e..4f83350e07c 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_wip.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_wip.js
@@ -1,4 +1,3 @@
-import Flash from '../../../flash';
 import statusIcon from '../mr_widget_status_icon';
 import tooltip from '../../../vue_shared/directives/tooltip';
 import eventHub from '../../event_hub';
@@ -27,12 +26,12 @@ export default {
         .then(res => res.json())
         .then((res) => {
           eventHub.$emit('UpdateWidgetData', res);
-          new Flash('The merge request can now be merged.', 'notice'); // eslint-disable-line
+          new window.Flash('The merge request can now be merged.', 'notice'); // eslint-disable-line
           $('.merge-request .detail-page-description .title').text(this.mr.title);
         })
         .catch(() => {
           this.isMakingRequest = false;
-          new Flash('Something went wrong. Please try again.'); // eslint-disable-line
+          new window.Flash('Something went wrong. Please try again.'); // eslint-disable-line
         });
     },
   },
-- 
cgit v1.2.3


From fcd842b55837d2a8eab4ef32b65b5a44dfab6eba Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Thu, 5 Oct 2017 10:27:43 +0100
Subject: fixed notes specs changed how the container class is added onto the
 text element more specs

---
 app/assets/javascripts/flash.js | 14 ++++++--------
 app/assets/javascripts/notes.js |  8 ++++----
 2 files changed, 10 insertions(+), 12 deletions(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/flash.js b/app/assets/javascripts/flash.js
index 8ac2b96a22d..bc5cd818e1c 100644
--- a/app/assets/javascripts/flash.js
+++ b/app/assets/javascripts/flash.js
@@ -12,6 +12,7 @@ const hideFlash = (flashEl, fadeTransition = true) => {
     flashEl.remove();
   }, {
     once: true,
+    passive: true,
   });
 
   if (!fadeTransition) flashEl.dispatchEvent(new Event('transitionend'));
@@ -27,12 +28,12 @@ const createAction = config => `
   </a>
 `;
 
-const createFlashEl = (message, type) => `
+const createFlashEl = (message, type, isInContentWrapper = false) => `
   <div
     class="flash-${type}"
   >
     <div
-      class="flash-text"
+      class="flash-text ${isInContentWrapper ? 'container-fluid container-limited' : ''}"
     >
       ${_.escape(message)}
     </div>
@@ -64,7 +65,9 @@ const createFlash = function createFlash(
 
   if (!flashContainer) return null;
 
-  flashContainer.innerHTML = createFlashEl(message, type);
+  const isInContentWrapper = flashContainer.parentNode.classList.contains('content-wrapper');
+
+  flashContainer.innerHTML = createFlashEl(message, type, isInContentWrapper);
 
   const flashEl = flashContainer.querySelector(`.flash-${type}`);
   flashEl.addEventListener('click', () => hideFlash(flashEl, fadeTransition));
@@ -77,11 +80,6 @@ const createFlash = function createFlash(
     }
   }
 
-  if (flashContainer.parentNode.classList.contains('content-wrapper')) {
-    const flashText = flashEl.querySelector('.flash-text');
-    flashText.className = `${flashText.className} container-fluid container-limited`;
-  }
-
   flashContainer.style.display = 'block';
 
   return flashContainer;
diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js
index dafbfb59c99..cf7322ba1da 100644
--- a/app/assets/javascripts/notes.js
+++ b/app/assets/javascripts/notes.js
@@ -1213,13 +1213,13 @@ export default class Notes {
   }
 
   addFlash(...flashParams) {
-    this.flashInstance = new Flash(...flashParams);
+    this.flashContainer = new Flash(...flashParams);
   }
 
   clearFlash() {
-    if (this.flashInstance && this.flashInstance.flashContainer) {
-      this.flashInstance.flashContainer.hide();
-      this.flashInstance = null;
+    if (this.flashContainer) {
+      this.flashContainer.style.display = 'none';
+      this.flashContainer = null;
     }
   }
 
-- 
cgit v1.2.3


From b40bac3a3c251110ddba3f90d6d1e4419a65afe3 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Thu, 5 Oct 2017 14:42:29 +0100
Subject: removed global eslint for remaining files

---
 app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js    | 2 --
 app/assets/javascripts/issue_show/components/fields/description.vue | 1 -
 app/assets/javascripts/jobs/job_details_bundle.js                   | 2 --
 app/assets/javascripts/pipelines/components/pipelines_actions.vue   | 2 --
 app/assets/javascripts/repo/stores/repo_store.js                    | 1 -
 5 files changed, 8 deletions(-)

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js b/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js
index d184fcfeebd..49bb6c52180 100644
--- a/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js
+++ b/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js
@@ -1,5 +1,3 @@
-/* global Flash */
-
 import Vue from 'vue';
 import Cookies from 'js-cookie';
 import Flash from '../flash';
diff --git a/app/assets/javascripts/issue_show/components/fields/description.vue b/app/assets/javascripts/issue_show/components/fields/description.vue
index dc902eefc5f..0aa1b2c2e31 100644
--- a/app/assets/javascripts/issue_show/components/fields/description.vue
+++ b/app/assets/javascripts/issue_show/components/fields/description.vue
@@ -1,5 +1,4 @@
 <script>
-  /* global Flash */
   import updateMixin from '../../mixins/update';
   import markdownField from '../../../vue_shared/components/markdown/field.vue';
 
diff --git a/app/assets/javascripts/jobs/job_details_bundle.js b/app/assets/javascripts/jobs/job_details_bundle.js
index f92e669414a..baaf5641200 100644
--- a/app/assets/javascripts/jobs/job_details_bundle.js
+++ b/app/assets/javascripts/jobs/job_details_bundle.js
@@ -1,5 +1,3 @@
-/* global Flash */
-
 import Vue from 'vue';
 import JobMediator from './job_details_mediator';
 import jobHeader from './components/header.vue';
diff --git a/app/assets/javascripts/pipelines/components/pipelines_actions.vue b/app/assets/javascripts/pipelines/components/pipelines_actions.vue
index c4c63a52358..f3c0aca17ba 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_actions.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_actions.vue
@@ -1,6 +1,4 @@
 <script>
-  /* global Flash */
-  import '~/flash';
   import playIconSvg from 'icons/_icon_play.svg';
   import eventHub from '../event_hub';
   import loadingIcon from '../../vue_shared/components/loading_icon.vue';
diff --git a/app/assets/javascripts/repo/stores/repo_store.js b/app/assets/javascripts/repo/stores/repo_store.js
index 93b39cff27e..c633f538c1b 100644
--- a/app/assets/javascripts/repo/stores/repo_store.js
+++ b/app/assets/javascripts/repo/stores/repo_store.js
@@ -1,4 +1,3 @@
-/* global Flash */
 import Helper from '../helpers/repo_helper';
 import Service from '../services/repo_service';
 
-- 
cgit v1.2.3


From b5029214639593af5b867e9c8f06dd52767b7362 Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Tue, 10 Oct 2017 11:06:42 +0000
Subject: Remove Build code from global namespace

---
 app/assets/javascripts/build.js                    | 289 ---------------------
 app/assets/javascripts/build_artifacts.js          |  34 ++-
 app/assets/javascripts/build_variables.js          |  16 +-
 app/assets/javascripts/ci_lint_editor.js           |   7 +-
 app/assets/javascripts/dispatcher.js               |   9 +-
 app/assets/javascripts/job.js                      | 285 ++++++++++++++++++++
 .../javascripts/jobs/job_details_mediator.js       |   6 +-
 app/assets/javascripts/main.js                     |   4 -
 8 files changed, 320 insertions(+), 330 deletions(-)
 delete mode 100644 app/assets/javascripts/build.js
 create mode 100644 app/assets/javascripts/job.js

(limited to 'app/assets/javascripts')

diff --git a/app/assets/javascripts/build.js b/app/assets/javascripts/build.js
deleted file mode 100644
index 3d27a3544eb..00000000000
--- a/app/assets/javascripts/build.js
+++ /dev/null
@@ -1,289 +0,0 @@
-/* eslint-disable func-names, wrap-iife, no-use-before-define,
-consistent-return, prefer-rest-params */
-import _ from 'underscore';
-import bp from './breakpoints';
-import { bytesToKiB } from './lib/utils/number_utils';
-import { setCiStatusFavicon } from './lib/utils/common_utils';
-
-window.Build = (function () {
-  Build.timeout = null;
-  Build.state = null;
-
-  function Build(options) {
-    this.options = options || $('.js-build-options').data();
-
-    this.pageUrl = this.options.pageUrl;
-    this.buildStatus = this.options.buildStatus;
-    this.state = this.options.logState;
-    this.buildStage = this.options.buildStage;
-    this.$document = $(document);
-    this.logBytes = 0;
-    this.hasBeenScrolled = false;
-
-    this.updateDropdown = this.updateDropdown.bind(this);
-    this.getBuildTrace = this.getBuildTrace.bind(this);
-
-    this.$buildTrace = $('#build-trace');
-    this.$buildRefreshAnimation = $('.js-build-refresh');
-    this.$truncatedInfo = $('.js-truncated-info');
-    this.$buildTraceOutput = $('.js-build-output');
-    this.$topBar = $('.js-top-bar');
-
-    // Scroll controllers
-    this.$scrollTopBtn = $('.js-scroll-up');
-    this.$scrollBottomBtn = $('.js-scroll-down');
-
-    clearTimeout(Build.timeout);
-
-    this.initSidebar();
-    this.populateJobs(this.buildStage);
-    this.updateStageDropdownText(this.buildStage);
-    this.sidebarOnResize();
-
-    this.$document
-      .off('click', '.js-sidebar-build-toggle')
-      .on('click', '.js-sidebar-build-toggle', this.sidebarOnClick.bind(this));
-
-    this.$document
-      .off('click', '.stage-item')
-      .on('click', '.stage-item', this.updateDropdown);
-
-    // add event listeners to the scroll buttons
-    this.$scrollTopBtn
-      .off('click')
-      .on('click', this.scrollToTop.bind(this));
-
-    this.$scrollBottomBtn
-      .off('click')
-      .on('click', this.scrollToBottom.bind(this));
-
-    this.scrollThrottled = _.throttle(this.toggleScroll.bind(this), 100);
-
-    $(window)
-      .off('scroll')
-      .on('scroll', () => {
-        const contentHeight = this.$buildTraceOutput.height();
-        if (contentHeight > this.windowSize) {
-          // means the user did not scroll, the content was updated.
-          this.windowSize = contentHeight;
-        } else {
-          // User scrolled
-          this.hasBeenScrolled = true;
-          this.toggleScrollAnimation(false);
-        }
-
-        this.scrollThrottled();
-      });
-
-    $(window)
-      .off('resize.build')
-      .on('resize.build', _.throttle(this.sidebarOnResize.bind(this), 100));
-
-    this.updateArtifactRemoveDate();
-    this.initAffixTopArea();
-
-    this.getBuildTrace();
-  }
-
-  Build.prototype.initAffixTopArea = function () {
-    /**
-      If the browser does not support position sticky, it returns the position as static.
-      If the browser does support sticky, then we allow the browser to handle it, if not
-      then we default back to Bootstraps affix
-    **/
-    if (this.$topBar.css('position') !== 'static') return;
-
-    const offsetTop = this.$buildTrace.offset().top;
-
-    this.$topBar.affix({
-      offset: {
-        top: offsetTop,
-      },
-    });
-  };
-
-  Build.prototype.canScroll = function () {
-    return $(document).height() > $(window).height();
-  };
-
-  Build.prototype.toggleScroll = function () {
-    const currentPosition = $(document).scrollTop();
-    const scrollHeight = $(document).height();
-
-    const windowHeight = $(window).height();
-    if (this.canScroll()) {
-      if (currentPosition > 0 &&
-        (scrollHeight - currentPosition !== windowHeight)) {
-      // User is in the middle of the log
-
-        this.toggleDisableButton(this.$scrollTopBtn, false);
-        this.toggleDisableButton(this.$scrollBottomBtn, false);
-      } else if (currentPosition === 0) {
-        // User is at Top of Build Log
-
-        this.toggleDisableButton(this.$scrollTopBtn, true);
-        this.toggleDisableButton(this.$scrollBottomBtn, false);
-      } else if (scrollHeight - currentPosition === windowHeight) {
-        // User is at the bottom of the build log.
-
-        this.toggleDisableButton(this.$scrollTopBtn, false);
-        this.toggleDisableButton(this.$scrollBottomBtn, true);
-      }
-    } else {
-      this.toggleDisableButton(this.$scrollTopBtn, true);
-      this.toggleDisableButton(this.$scrollBottomBtn, true);
-    }
-  };
-
-  Build.prototype.scrollDown = function () {
-    $(document).scrollTop($(document).height());
-  };
-
-  Build.prototype.scrollToBottom = function () {
-    this.scrollDown();
-    this.hasBeenScrolled = true;
-    this.toggleScroll();
-  };
-
-  Build.prototype.scrollToTop = function () {
-    $(document).scrollTop(0);
-    this.hasBeenScrolled = true;
-    this.toggleScroll();
-  };
-
-  Build.prototype.toggleDisableButton = function ($button, disable) {
-    if (disable && $button.prop('disabled')) return;
-    $button.prop('disabled', disable);
-  };
-
-  Build.prototype.toggleScrollAnimation = function (toggle) {
-    this.$scrollBottomBtn.toggleClass('animate', toggle);
-  };
-
-  Build.prototype.initSidebar = function () {
-    this.$sidebar = $('.js-build-sidebar');
-  };
-
-  Build.prototype.getBuildTrace = function () {
-    return $.ajax({
-      url: `${this.pageUrl}/trace.json`,
-      data: { state: this.state },
-    })
-      .done((log) => {
-        setCiStatusFavicon(`${this.pageUrl}/status.json`);
-
-        if (log.state) {
-          this.state = log.state;
-        }
-
-        this.windowSize = this.$buildTraceOutput.height();
-
-        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 = bytesToKiB(this.logBytes);
-          $('.js-truncated-info-size').html(`${size}`);
-          this.$truncatedInfo.removeClass('hidden');
-        } else {
-          this.$truncatedInfo.addClass('hidden');
-        }
-
-        if (!log.complete) {
-          if (!this.hasBeenScrolled) {
-            this.toggleScrollAnimation(true);
-          } else {
-            this.toggleScrollAnimation(false);
-          }
-
-          Build.timeout = setTimeout(() => {
-            this.getBuildTrace();
-          }, 4000);
-        } else {
-          this.$buildRefreshAnimation.remove();
-          this.toggleScrollAnimation(false);
-        }
-
-        if (log.status !== this.buildStatus) {
-          gl.utils.visitUrl(this.pageUrl);
-        }
-      })
-      .fail(() => {
-        this.$buildRefreshAnimation.remove();
-      })
-      .then(() => {
-        if (!this.hasBeenScrolled) {
-          this.scrollDown();
-        }
-      })
-      .then(() => this.toggleScroll());
-  };
-
-  Build.prototype.shouldHideSidebarForViewport = function () {
-    const bootstrapBreakpoint = bp.getBreakpointSize();
-    return bootstrapBreakpoint === 'xs' || bootstrapBreakpoint === 'sm';
-  };
-
-  Build.prototype.toggleSidebar = function (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');
-    }
-  };
-
-  Build.prototype.sidebarOnResize = function () {
-    this.toggleSidebar(this.shouldHideSidebarForViewport());
-  };
-
-  Build.prototype.sidebarOnClick = function () {
-    if (this.shouldHideSidebarForViewport()) this.toggleSidebar();
-  };
-
-  Build.prototype.updateArtifactRemoveDate = function () {
-    const $date = $('.js-artifacts-remove');
-    if ($date.length) {
-      const date = $date.text();
-      return $date.text(
-        gl.utils.timeFor(new Date(date.replace(/([0-9]+)-([0-9]+)-([0-9]+)/g, '$1/$2/$3')), ' '),
-      );
-    }
-  };
-
-  Build.prototype.populateJobs = function (stage) {
-    $('.build-job').hide();
-    $(`.build-job[data-stage="${stage}"]`).show();
-  };
-
-  Build.prototype.updateStageDropdownText = function (stage) {
-    $('.stage-selection').text(stage);
-  };
-
-  Build.prototype.updateDropdown = function (e) {
-    e.preventDefault();
-    const stage = e.currentTarget.text;
-    this.updateStageDropdownText(stage);
-    this.populateJobs(stage);
-  };
-
-  return Build;
-})();
diff --git a/app/assets/javascripts/build_artifacts.js b/app/assets/javascripts/build_artifacts.js
index 19388f1f9ae..ace89398943 100644
--- a/app/assets/javascripts/build_artifacts.js
+++ b/app/assets/javascripts/build_artifacts.js
@@ -1,30 +1,30 @@
-/* eslint-disable func-names, space-before-function-paren, wrap-iife, prefer-arrow-callback, no-unused-vars, no-return-assign, max-len */
+/* eslint-disable func-names, prefer-arrow-callback, no-return-assign */
 import { visitUrl } from './lib/utils/url_utility';
 import { convertPermissionToBoolean } from './lib/utils/common_utils';
 
-window.BuildArtifacts = (function() {
-  function BuildArtifacts() {
+export default class BuildArtifacts {
+  constructor() {
     this.disablePropagation();
     this.setupEntryClick();
     this.setupTooltips();
   }
-
-  BuildArtifacts.prototype.disablePropagation = function() {
-    $('.top-block').on('click', '.download', function(e) {
+  // eslint-disable-next-line class-methods-use-this
+  disablePropagation() {
+    $('.top-block').on('click', '.download', function (e) {
       return e.stopPropagation();
     });
-    return $('.tree-holder').on('click', 'tr[data-link] a', function(e) {
+    return $('.tree-holder').on('click', 'tr[data-link] a', function (e) {
       return e.stopImmediatePropagation();
     });
-  };
-
-  BuildArtifacts.prototype.setupEntryClick = function() {
-    return $('.tree-holder').on('click', 'tr[data-link]', function(e) {
+  }
+  // eslint-disable-next-line class-methods-use-this
+  setupEntryClick() {
+    return $('.tree-holder').on('click', 'tr[data-link]', function () {
       visitUrl(this.dataset.link, convertPermissionToBoolean(this.dataset.externalLink));
     });
-  };
-
-  BuildArtifacts.prototype.setupTooltips = function() {
+  }
+  // eslint-disable-next-line class-methods-use-this
+  setupTooltips() {
     $('.js-artifact-tree-tooltip').tooltip({
       placement: 'bottom',
       // Stop the tooltip from hiding when we stop hovering the element directly
@@ -41,7 +41,5 @@ window.BuildArtifacts = (function() {
       .on('mouseleave', (e) => {
         $(e.currentTarget).find('.js-artifact-tree-tooltip').tooltip('hide');
       });
-  };
-
-  return BuildArtifacts;
-})();
+  }
+}
diff --git a/app/assets/javascripts/build_variables.js b/app/assets/javascripts/build_variables.js
index c955a9ac2ea..35edf3e0017 100644
--- a/app/assets/javascripts/build_variables.js
+++ b/app/assets/javascripts/build_variables.js
@@ -1,8 +1,10 @@
-/* eslint-disable func-names, prefer-arrow-callback, space-before-function-paren */
+/* eslint-disable func-names*/
 
-$(function() {
-  $('.reveal-variables').off('click').on('click', function() {
-    $('.js-build-variables').toggle();
-    $(this).hide();
-  });
-});
+export default function handleRevealVariables() {
+  $('.js-reveal-variables')
+    .off('click')
+    .on('click', function () {
+      $('.js-build-variables').toggle();
+      $(this).hide();
+    });
+}
diff --git a/app/assets/javascripts/ci_lint_editor.js b/app/assets/javascripts/ci_lint_editor.js
index dd4a08a2f31..b9469e5b7cb 100644
--- a/app/assets/javascripts/ci_lint_editor.js
+++ b/app/assets/javascripts/ci_lint_editor.js
@@ -1,7 +1,4 @@
-
-window.gl = window.gl || {};
-
-class CILintEditor {
+export default class CILintEditor {
   constructor() {
     this.editor = window.ace.edit('ci-editor');
     this.textarea = document.querySelector('#content');
@@ -13,5 +10,3 @@ class CILintEditor {
     });
   }
 }
-
-gl.CILintEditor = CILintEditor;
diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js
index 1edd460f380..39f2232b6fd 100644
--- a/app/assets/javascripts/dispatcher.js
+++ b/app/assets/javascripts/dispatcher.js
@@ -12,7 +12,8 @@
 /* global NotificationsDropdown */
 /* global GroupAvatar */
 /* global LineHighlighter */
-/* global BuildArtifacts */
+import BuildArtifacts from './build_artifacts';
+import CILintEditor from './ci_lint_editor';
 /* global GroupsSelect */
 /* global Search */
 /* global Admin */
@@ -90,8 +91,8 @@ import AjaxLoadingSpinner from './ajax_loading_spinner';
     }
 
     Dispatcher.prototype.initPageScripts = function() {
-      var page, path, shortcut_handler, fileBlobPermalinkUrlElement, fileBlobPermalinkUrl;
-      page = $('body').attr('data-page');
+      var path, shortcut_handler, fileBlobPermalinkUrlElement, fileBlobPermalinkUrl;
+      const page = $('body').attr('data-page');
       if (!page) {
         return false;
       }
@@ -505,7 +506,7 @@ import AjaxLoadingSpinner from './ajax_loading_spinner';
           break;
         case 'ci:lints:create':
         case 'ci:lints:show':
-          new gl.CILintEditor();
+          new CILintEditor();
           break;
         case 'users:show':
           new UserCallout();
diff --git a/app/assets/javascripts/job.js b/app/assets/javascripts/job.js
new file mode 100644
index 00000000000..c6b5844dff6
--- /dev/null
+++ b/app/assets/javascripts/job.js
@@ -0,0 +1,285 @@
+import _ from 'underscore';
+import bp from './breakpoints';
+import { bytesToKiB } from './lib/utils/number_utils';
+import { setCiStatusFavicon } from './lib/utils/common_utils';
+
+export default class Job {
+  constructor(options) {
+    this.timeout = null;
+    this.state = null;
+    this.options = options || $('.js-build-options').data();
+
+    this.pageUrl = this.options.pageUrl;
+    this.buildStatus = this.options.buildStatus;
+    this.state = this.options.logState;
+    this.buildStage = this.options.buildStage;
+    this.$document = $(document);
+    this.logBytes = 0;
+    this.hasBeenScrolled = false;
+    this.updateDropdown = this.updateDropdown.bind(this);
+
+    this.$buildTrace = $('#build-trace');
+    this.$buildRefreshAnimation = $('.js-build-refresh');
+    this.$truncatedInfo = $('.js-truncated-info');
+    this.$buildTraceOutput = $('.js-build-output');
+    this.$topBar = $('.js-top-bar');
+
+    // Scroll controllers
+    this.$scrollTopBtn = $('.js-scroll-up');
+    this.$scrollBottomBtn = $('.js-scroll-down');
+
+    clearTimeout(this.timeout);
+
+    this.initSidebar();
+    this.populateJobs(this.buildStage);
+    this.updateStageDropdownText(this.buildStage);
+    this.sidebarOnResize();
+
+    this.$document
+      .off('click', '.js-sidebar-build-toggle')
+      .on('click', '.js-sidebar-build-toggle', this.sidebarOnClick.bind(this));
+
+    this.$document
+      .off('click', '.stage-item')
+      .on('click', '.stage-item', this.updateDropdown);
+
+    // add event listeners to the scroll buttons
+    this.$scrollTopBtn
+      .off('click')
+      .on('click', this.scrollToTop.bind(this));
+
+    this.$scrollBottomBtn
+      .off('click')
+      .on('click', this.scrollToBottom.bind(this));
+
+    this.scrollThrottled = _.throttle(this.toggleScroll.bind(this), 100);
+
+    $(window)
+      .off('scroll')
+      .on('scroll', () => {
+        const contentHeight = this.$buildTraceOutput.height();
+        if (contentHeight > this.windowSize) {
+          // means the user did not scroll, the content was updated.
+          this.windowSize = contentHeight;
+        } else {
+          // User scrolled
+          this.hasBeenScrolled = true;
+          this.toggleScrollAnimation(false);
+        }
+
+        this.scrollThrottled();
+      });
+
+    $(window)
+      .off('resize.build')
+      .on('resize.build', _.throttle(this.sidebarOnResize.bind(this), 100));
+
+    this.updateArtifactRemoveDate();
+    this.initAffixTopArea();
+
+    this.getBuildTrace();
+  }
+
+  initAffixTopArea() {
+    /**
+      If the browser does not support position sticky, it returns the position as static.
+      If the browser does support sticky, then we allow the browser to handle it, if not
+      then we default back to Bootstraps affix
+    **/
+    if (this.$topBar.css('position') !== 'static') return;
+
+    const offsetTop = this.$buildTrace.offset().top;
+
+    this.$topBar.affix({
+      offset: {
+        top: offsetTop,
+      },
+    });
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  canScroll() {
+    return $(document).height() > $(window).height();
+  }
+
+  toggleScroll() {
+    const currentPosition = $(document).scrollTop();
+    const scrollHeight = $(document).height();
+
+    const windowHeight = $(window).height();
+    if (this.canScroll()) {
+      if (currentPosition > 0 &&
+        (scrollHeight - currentPosition !== windowHeight)) {
+      // User is in the middle of the log
+
+        this.toggleDisableButton(this.$scrollTopBtn, false);
+        this.toggleDisableButton(this.$scrollBottomBtn, false);
+      } else if (currentPosition === 0) {
+        // User is at Top of  Log
+
+        this.toggleDisableButton(this.$scrollTopBtn, true);
+        this.toggleDisableButton(this.$scrollBottomBtn, false);
+      } else if (scrollHeight - currentPosition === windowHeight) {
+        // User is at the bottom of the build log.
+
+        this.toggleDisableButton(this.$scrollTopBtn, false);
+        this.toggleDisableButton(this.$scrollBottomBtn, true);
+      }
+    } else {
+      this.toggleDisableButton(this.$scrollTopBtn, true);
+      this.toggleDisableButton(this.$scrollBottomBtn, true);
+    }
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  scrollDown() {
+    $(document).scrollTop($(document).height());
+  }
+
+  scrollToBottom() {
+    this.scrollDown();
+    this.hasBeenScrolled = true;
+    this.toggleScroll();
+  }
+
+  scrollToTop() {
+    $(document).scrollTop(0);
+    this.hasBeenScrolled = true;
+    this.toggleScroll();
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  toggleDisableButton($button, disable) {
+    if (disable && $button.prop('disabled')) return;
+    $button.prop('disabled', disable);
+  }
+
+  toggleScrollAnimation(toggle) {
+    this.$scrollBottomBtn.toggleClass('animate', toggle);
+  }
+
+  initSidebar() {
+    this.$sidebar = $('.js-build-sidebar');
+  }
+
+  getBuildTrace() {
+    return $.ajax({
+      url: `${this.pageUrl}/trace.json`,
+      data: { state: this.state },
+    })
+      .done((log) => {
+        setCiStatusFavicon(`${this.pageUrl}/status.json`);
+
+        if (log.state) {
+          this.state = log.state;
+        }
+
+        this.windowSize = this.$buildTraceOutput.height();
+
+        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 = bytesToKiB(this.logBytes);
+          $('.js-truncated-info-size').html(`${size}`);
+          this.$truncatedInfo.removeClass('hidden');
+        } else {
+          this.$truncatedInfo.addClass('hidden');
+        }
+
+        if (!log.complete) {
+          if (!this.hasBeenScrolled) {
+            this.toggleScrollAnimation(true);
+          } else {
+            this.toggleScrollAnimation(false);
+          }
+
+          this.timeout = setTimeout(() => {
+            this.getBuildTrace();
+          }, 4000);
+        } else {
+          this.$buildRefreshAnimation.remove();
+          this.toggleScrollAnimation(false);
+        }
+
+        if (log.status !== this.buildStatus) {
+          gl.utils.visitUrl(this.pageUrl);
+        }
+      })
+      .fail(() => {
+        this.$buildRefreshAnimation.remove();
+      })
+      .then(() => {
+        if (!this.hasBeenScrolled) {
+          this.scrollDown();
+        }
+      })
+      .then(() => this.toggleScroll());
+  }
+  // eslint-disable-next-line class-methods-use-this
+  shouldHideSidebarForViewport() {
+    const bootstrapBreakpoint = bp.getBreakpointSize();
+    return bootstrapBreakpoint === 'xs' || bootstrapBreakpoint === 'sm';
+  }
+
+  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();
+  }
+  // eslint-disable-next-line class-methods-use-this, consistent-return
+  updateArtifactRemoveDate() {
+    const $date = $('.js-artifacts-remove');
+    if ($date.length) {
+      const date = $date.text();
+      return $date.text(
+        gl.utils.timeFor(new Date(date.replace(/([0-9]+)-([0-9]+)-([0-9]+)/g, '$1/$2/$3')), ' '),
+      );
+    }
+  }
+  // eslint-disable-next-line class-methods-use-this
+  populateJobs(stage) {
+    $('.build-job').hide();
+    $(`.build-job[data-stage="${stage}"]`).show();
+  }
+  // eslint-disable-next-line class-methods-use-this
+  updateStageDropdownText(stage) {
+    $('.stage-selection').text(stage);
+  }
+
+  updateDropdown(e) {
+    e.preventDefault();
+    const stage = e.currentTarget.text;
+    this.updateStageDropdownText(stage);
+    this.populateJobs(stage);
+  }
+}
diff --git a/app/assets/javascripts/jobs/job_details_mediator.js b/app/assets/javascripts/jobs/job_details_mediator.js
index cc014b815c4..14c7b96e54d 100644
--- a/app/assets/javascripts/jobs/job_details_mediator.js
+++ b/app/assets/javascripts/jobs/job_details_mediator.js
@@ -5,7 +5,8 @@ import Visibility from 'visibilityjs';
 import Poll from '../lib/utils/poll';
 import JobStore from './stores/job_store';
 import JobService from './services/job_service';
-import '../build';
+import Job from '../job';
+import handleRevealVariables from '../build_variables';
 
 export default class JobMediator {
   constructor(options = {}) {
@@ -20,7 +21,8 @@ export default class JobMediator {
   }
 
   initBuildClass() {
-    this.build = new Build();
+    this.build = new Job();
+    handleRevealVariables();
   }
 
   fetchJob() {
diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js
index 974121412bd..ac7b976f811 100644
--- a/app/assets/javascripts/main.js
+++ b/app/assets/javascripts/main.js
@@ -61,10 +61,6 @@ import './autosave';
 import loadAwardsHandler from './awards_handler';
 import bp from './breakpoints';
 import './broadcast_message';
-import './build';
-import './build_artifacts';
-import './build_variables';
-import './ci_lint_editor';
 import './commits';
 import './compare';
 import './compare_autocomplete';
-- 
cgit v1.2.3