Merge branch 'master' into issue_14678

14 files changed, 648 insertions, 131 deletions

diff --git a/app/assets/javascripts/awards_handler.coffee b/app/assets/javascripts/awards_handler.coffee
index 47b080406d4..6a670d5e887 100644
--- a/app/assets/javascripts/awards_handler.coffee
+++ b/app/assets/javascripts/awards_handler.coffee
@@ -1,5 +1,5 @@
 class @AwardsHandler
-  constructor: (@post_emoji_url, @noteable_type, @noteable_id, @aliases) ->
+  constructor: (@get_emojis_url, @post_emoji_url, @noteable_type, @noteable_id, @aliases) ->
     $(".js-add-award").on "click", (event) =>
       event.stopPropagation()
       event.preventDefault()
@@ -34,7 +34,7 @@ class @AwardsHandler
         $("#emoji_search").focus()
     else
       $('.js-add-award').addClass "is-loading"
-      $.get "/emojis", (response) =>
+      $.get @get_emojis_url, (response) =>
         $('.js-add-award').removeClass "is-loading"
         $(".js-award-holder").append response
         setTimeout =>
diff --git a/app/assets/javascripts/dispatcher.js.coffee b/app/assets/javascripts/dispatcher.js.coffee
index f5e1ca9860d..70fd6f50e9c 100644
--- a/app/assets/javascripts/dispatcher.js.coffee
+++ b/app/assets/javascripts/dispatcher.js.coffee
@@ -146,15 +146,11 @@ class Dispatcher
           when 'project_members', 'deploy_keys', 'hooks', 'services', 'protected_branches'
             shortcut_handler = new ShortcutsNavigation()
 
-
     # If we haven't installed a custom shortcut handler, install the default one
     if not shortcut_handler
       new Shortcuts()
 
   initSearch: ->
-    opts = $('.search-autocomplete-opts')
-    path = opts.data('autocomplete-path')
-    project_id = opts.data('autocomplete-project-id')
-    project_ref = opts.data('autocomplete-project-ref')
 
-    new SearchAutocomplete(path, project_id, project_ref)
+    # Only when search form is present
+    new SearchAutocomplete() if $('.search').length
diff --git a/app/assets/javascripts/gl_dropdown.js.coffee b/app/assets/javascripts/gl_dropdown.js.coffee
index dbcad9c0514..e8d25591f63 100644
--- a/app/assets/javascripts/gl_dropdown.js.coffee
+++ b/app/assets/javascripts/gl_dropdown.js.coffee
@@ -1,8 +1,13 @@
 class GitLabDropdownFilter
   BLUR_KEYCODES = [27, 40]
+  ARROW_KEY_CODES = [38, 40]
   HAS_VALUE_CLASS = "has-value"
 
   constructor: (@input, @options) ->
+    {
+      @filterInputBlur = true
+    } = @options
+
     $inputContainer = @input.parent()
     $clearButton = $inputContainer.find('.js-dropdown-input-clear')
 
@@ -18,22 +23,26 @@ class GitLabDropdownFilter
     # Key events
     timeout = ""
     @input.on "keyup", (e) =>
+      keyCode = e.which
+
+      return if ARROW_KEY_CODES.indexOf(keyCode) >= 0
+
       if @input.val() isnt "" and !$inputContainer.hasClass HAS_VALUE_CLASS
         $inputContainer.addClass HAS_VALUE_CLASS
       else if @input.val() is "" and $inputContainer.hasClass HAS_VALUE_CLASS
         $inputContainer.removeClass HAS_VALUE_CLASS
 
-      if e.keyCode is 13 and @input.val() isnt ""
+      if keyCode is 13 and @input.val() isnt ""
         if @options.enterCallback
           @options.enterCallback()
         return
 
       clearTimeout timeout
       timeout = setTimeout =>
-        blur_field = @shouldBlur e.keyCode
+        blur_field = @shouldBlur keyCode
         search_text = @input.val()
 
-        if blur_field
+        if blur_field and @filterInputBlur
           @input.blur()
 
         if @options.remote
@@ -92,38 +101,61 @@ class GitLabDropdown
   LOADING_CLASS = "is-loading"
   PAGE_TWO_CLASS = "is-page-two"
   ACTIVE_CLASS = "is-active"
+  currentIndex = -1
+
+  FILTER_INPUT = '.dropdown-input .dropdown-input-field'
 
   constructor: (@el, @options) ->
-    self = @
     @dropdown = $(@el).parent()
+
+    # Set Defaults
+    {
+      # If no input is passed create a default one
+      @filterInput = @getElement(FILTER_INPUT)
+      @highlight = false
+      @filterInputBlur = true
+      @enterCallback = true
+    } = @options
+
+    self = @
+
+    # If selector was passed
+    if _.isString(@filterInput)
+      @filterInput = @getElement(@filterInput)
+
     search_fields = if @options.search then @options.search.fields else [];
 
     if @options.data
-      # Remote data
-      @remote = new GitLabDropdownRemote @options.data, {
-        dataType: @options.dataType,
-        beforeSend: @toggleLoading.bind(@)
-        success: (data) =>
-          @fullData = data
+      # If data is an array
+      if _.isArray @options.data
+        @fullData = @options.data
+        @parseData @options.data
+      else
+        # Remote data
+        @remote = new GitLabDropdownRemote @options.data, {
+          dataType: @options.dataType,
+          beforeSend: @toggleLoading.bind(@)
+          success: (data) =>
+            @fullData = data
 
-          @parseData @fullData
-      }
+            @parseData @fullData
+        }
 
-    # Init filiterable
+    # Init filterable
     if @options.filterable
-      @input = @dropdown.find('.dropdown-input .dropdown-input-field')
-
-      @filter = new GitLabDropdownFilter @input,
+      @filter = new GitLabDropdownFilter @filterInput,
+        filterInputBlur: @filterInputBlur
         remote: @options.filterRemote
         query: @options.data
         keys: @options.search.fields
         data: =>
           return @fullData
         callback: (data) =>
+          currentIndex = -1
           @parseData data
-          @highlightRow 1
         enterCallback: =>
-          @selectFirstRow()
+          if @enterCallback
+            @selectRowAtIndex 0
 
     # Event listeners
 
@@ -145,10 +177,15 @@ class GitLabDropdown
         selector = ".dropdown-page-one .dropdown-content a"
 
       @dropdown.on "click", selector, (e) ->
-        selected = self.rowClicked $(@)
+        $el = $(@)
+        selected = self.rowClicked $el
 
         if self.options.clicked
-          self.options.clicked(selected)
+          self.options.clicked(selected, $el, e)
+
+  # Finds an element inside wrapper element
+  getElement: (selector) ->
+    @dropdown.find selector
 
   toggleLoading: ->
     $('.dropdown-menu', @dropdown).toggleClass LOADING_CLASS
@@ -188,16 +225,19 @@ class GitLabDropdown
         return true
 
   opened: =>
+    @addArrowKeyEvent()
+
     contentHtml = $('.dropdown-content', @dropdown).html()
     if @remote && contentHtml is ""
       @remote.execute()
 
     if @options.filterable
-      @dropdown.find(".dropdown-input-field").focus()
+      @filterInput.focus()
 
     @dropdown.trigger('shown.gl.dropdown')
 
   hidden: (e) =>
+    @removeArrayKeyEvent()
     if @options.filterable
       @dropdown
         .find(".dropdown-input-field")
@@ -237,13 +277,19 @@ class GitLabDropdown
   renderItem: (data) ->
     html = ""
 
+    # Divider
     return "<li class='divider'></li>" if data is "divider"
 
+    # Separator is a full-width divider
+    return "<li class='separator'></li>" if data is "separator"
+
+    # Header
+    return "<li class='dropdown-header'>#{data.header}</li>" if data.header?
+
     if @options.renderRow
       # Call the render function
       html = @options.renderRow(data)
     else
-      selected = if @options.isSelected then @options.isSelected(data) else false
       if not selected
         value = if @options.id then @options.id(data) else data.id
         fieldName = @options.fieldName
@@ -251,35 +297,54 @@ class GitLabDropdown
         if field.length
           selected = true
 
-      url = if @options.url then @options.url(data) else "#"
-      text = if @options.text then @options.text(data) else ""
+      # Set URL
+      if @options.url?
+        url = @options.url(data)
+      else
+        url = if data.url? then data.url else '#'
+
+      # Set Text
+      if @options.text?
+        text = @options.text(data)
+      else
+        text = if data.text? then data.text else ''
+
       cssClass = "";
 
       if selected
         cssClass = "is-active"
 
-      html = "<li>"
-      html += "<a href='#{url}' class='#{cssClass}'>"
-      html += text
-      html += "</a>"
-      html += "</li>"
+      if @highlight
+        text = @highlightTextMatches(text, @filterInput.val())
+
+      html = "<li>
+        <a href='#{url}' class='#{cssClass}'>
+          #{text}
+        </a>
+      </li>"
 
     return html
 
+  highlightTextMatches: (text, term) ->
+    occurrences = fuzzaldrinPlus.match(text, term)
+    text.split('').map((character, i) ->
+      if i in occurrences then "<b>#{character}</b>" else character
+    ).join('')
+
   noResults: ->
-    html = "<li>"
-    html += "<a href='#' class='dropdown-menu-empty-link is-focused'>"
-    html += "No matching results."
-    html += "</a>"
-    html += "</li>"
+    html = "<li class='dropdown-menu-empty-link'>
+      <a href='#' class='is-focused'>
+        No matching results.
+      </a>
+    </li>"
 
   highlightRow: (index) ->
-    if @input.val() isnt ""
+    if @filterInput.val() isnt ""
       selector = '.dropdown-content li:first-child a'
       if @dropdown.find(".dropdown-toggle-page").length
         selector = ".dropdown-page-one .dropdown-content li:first-child a"
 
-      $(selector).addClass 'is-focused'
+      @getElement(selector).addClass 'is-focused'
 
   rowClicked: (el) ->
     fieldName = @options.fieldName
@@ -288,7 +353,7 @@ class GitLabDropdown
       selectedObject = @renderedData[selectedIndex]
     value = if @options.id then @options.id(selectedObject, el) else selectedObject.id
     field = @dropdown.parent().find("input[name='#{fieldName}'][value='#{value}']")
-  
+
     if el.hasClass(ACTIVE_CLASS)
       el.removeClass(ACTIVE_CLASS)
       field.remove()
@@ -296,6 +361,8 @@ class GitLabDropdown
       # Toggle the dropdown label
       if @options.toggleLabel
         $(@el).find(".dropdown-toggle-text").text @options.toggleLabel
+      else
+        selectedObject
     else
       if !value?
         field.remove()
@@ -311,24 +378,93 @@ class GitLabDropdown
       if @options.toggleLabel
         $(@el).find(".dropdown-toggle-text").text @options.toggleLabel(selectedObject)
       if value?
-        if !field.length
+        if !field.length and fieldName
           # Create hidden input for form
           input = "<input type='hidden' name='#{fieldName}' value='#{value}' />"
           if @options.inputId?
             input = $(input)
                       .attr('id', @options.inputId)
           @dropdown.before input
+        else
+          field.val value
 
       return selectedObject
 
-  selectFirstRow: ->
-    selector = '.dropdown-content li:first-child a'
+  selectRowAtIndex: (index) ->
+    selector = ".dropdown-content li:not(.divider):eq(#{index}) a"
+
     if @dropdown.find(".dropdown-toggle-page").length
-      selector = ".dropdown-page-one .dropdown-content li:first-child a"
+      selector = ".dropdown-page-one #{selector}"
 
     # simulate a click on the first link
-    $(selector).trigger "click"
+    $(selector, @dropdown).trigger "click"
+
+  addArrowKeyEvent: ->
+    ARROW_KEY_CODES = [38, 40]
+    $input = @dropdown.find(".dropdown-input-field")
+
+    selector = '.dropdown-content li:not(.divider)'
+    if @dropdown.find(".dropdown-toggle-page").length
+      selector = ".dropdown-page-one #{selector}"
+
+    $('body').on 'keydown', (e) =>
+      currentKeyCode = e.which
+
+      if ARROW_KEY_CODES.indexOf(currentKeyCode) >= 0
+        e.preventDefault()
+        e.stopImmediatePropagation()
+
+        PREV_INDEX = currentIndex
+        $listItems = $(selector, @dropdown)
+
+        # if @options.filterable
+        #   $input.blur()
+
+        if currentKeyCode is 40
+          # Move down
+          currentIndex += 1 if currentIndex < ($listItems.length - 1)
+        else if currentKeyCode is 38
+          # Move up
+          currentIndex -= 1 if currentIndex > 0
+
+        @highlightRowAtIndex($listItems, currentIndex) if currentIndex isnt PREV_INDEX
+
+        return false
+
+      if currentKeyCode is 13
+        @selectRowAtIndex currentIndex
+
+  removeArrayKeyEvent: ->
+    $('body').off 'keydown'
+
+  highlightRowAtIndex: ($listItems, index) ->
+    # Remove the class for the previously focused row
+    $('.is-focused', @dropdown).removeClass 'is-focused'
+
+    # Update the class for the row at the specific index
+    $listItem = $listItems.eq(index)
+    $listItem.find('a:first-child').addClass "is-focused"
+
+    # Dropdown content scroll area
+    $dropdownContent = $listItem.closest('.dropdown-content')
+    dropdownScrollTop = $dropdownContent.scrollTop()
+    dropdownContentHeight = $dropdownContent.outerHeight()
+    dropdownContentTop = $dropdownContent.prop('offsetTop')
+    dropdownContentBottom = dropdownContentTop + dropdownContentHeight
+
+    # Get the offset bottom of the list item
+    listItemHeight = $listItem.outerHeight()
+    listItemTop = $listItem.prop('offsetTop')
+    listItemBottom = listItemTop + listItemHeight
+
+    if listItemBottom > dropdownContentBottom + dropdownScrollTop
+      # Scroll the dropdown content down
+      $dropdownContent.scrollTop(listItemBottom - dropdownContentBottom)
+    else if listItemTop < dropdownContentTop + dropdownScrollTop
+      # Scroll the dropdown content up
+      $dropdownContent.scrollTop(listItemTop - dropdownContentTop)
 
 $.fn.glDropdown = (opts) ->
   return @.each ->
-    new GitLabDropdown @, opts
+    if (!$.data @, 'glDropdown')
+      $.data(@, 'glDropdown', new GitLabDropdown @, opts)
diff --git a/app/assets/javascripts/issue.js.coffee b/app/assets/javascripts/issue.js.coffee
index d663e34871c..946d83b7bdd 100644
--- a/app/assets/javascripts/issue.js.coffee
+++ b/app/assets/javascripts/issue.js.coffee
@@ -6,25 +6,10 @@ class @Issue
   constructor: ->
     # Prevent duplicate event bindings
     @disableTaskList()
-    @fixAffixScroll()
     if $('a.btn-close').length
       @initTaskList()
       @initIssueBtnEventListeners()
 
-  fixAffixScroll: ->
-    fixAffix = ->
-      $discussion = $('.issuable-discussion')
-      $sidebar = $('.issuable-sidebar')
-      if $sidebar.hasClass('no-affix')
-        $sidebar.removeClass(['affix-top','affix'])
-      discussionHeight = $discussion.height()
-      sidebarHeight = $sidebar.height()
-      if sidebarHeight > discussionHeight
-        $discussion.height(sidebarHeight + 50)
-        $sidebar.addClass('no-affix')
-    $(window).on('resize', fixAffix)
-    fixAffix()
-
   initTaskList: ->
     $('.detail-page-description .js-task-list-container').taskList('enable')
     $(document).on 'tasklist:changed', '.detail-page-description .js-task-list-container', @updateTaskList
@@ -49,7 +34,7 @@ class @Issue
           issueStatus = if isClose then 'close' else 'open'
           new Flash(issueFailMessage, 'alert')
         success: (data, textStatus, jqXHR) ->
-          if data.saved
+          if 'id' of data
             $(document).trigger('issuable:change');
             if isClose
               $('a.btn-close').addClass('hidden')
diff --git a/app/assets/javascripts/issues.js.coffee b/app/assets/javascripts/issues.js.coffee
index b1479bfb449..0d9f2094c2a 100644
--- a/app/assets/javascripts/issues.js.coffee
+++ b/app/assets/javascripts/issues.js.coffee
@@ -26,6 +26,20 @@
 
     $(".selected_issue").bind "change", Issues.checkChanged
 
+  # Update state filters if present in page
+  updateStateFilters: ->
+    stateFilters =  $('.issues-state-filters')
+    newParams = {}
+    paramKeys = ['author_id', 'label_name', 'milestone_title', 'assignee_id', 'issue_search']
+
+    for paramKey in paramKeys
+      newParams[paramKey] = gl.utils.getUrlParameter(paramKey) or ''
+
+    if stateFilters.length
+      stateFilters.find('a').each ->
+        initialUrl = $(this).attr 'href'
+        $(this).attr 'href', gl.utils.mergeUrlParams(newParams, initialUrl)
+
   # Make sure we trigger ajax request only after user stop typing
   initSearch: ->
     @timer = null
@@ -54,6 +68,7 @@
         # Change url so if user reload a page - search results are saved
         history.replaceState {page: issuesUrl}, document.title, issuesUrl
         Issues.reload()
+        Issues.updateStateFilters()
       dataType: "json"
 
   checkChanged: ->
diff --git a/app/assets/javascripts/lib/notify.js.coffee b/app/assets/javascripts/lib/notify.js.coffee
new file mode 100644
index 00000000000..3f9ca39912c
--- /dev/null
+++ b/app/assets/javascripts/lib/notify.js.coffee
@@ -0,0 +1,30 @@
+((w) ->
+  notificationGranted = (message, opts, onclick) ->
+    notification = new Notification(message, opts)
+
+    if onclick
+      notification.onclick = onclick
+
+  notifyPermissions = ->
+    if 'Notification' of window
+      Notification.requestPermission()
+
+  notifyMe = (message, body, icon, onclick) ->
+    opts =
+      body: body
+      icon: icon
+    # Let's check if the browser supports notifications
+    if !('Notification' of window)
+      # do nothing
+    else if Notification.permission == 'granted'
+      # If it's okay let's create a notification
+      notificationGranted message, opts, onclick
+    else if Notification.permission != 'denied'
+      Notification.requestPermission (permission) ->
+        # If the user accepts, let's create a notification
+        if permission == 'granted'
+          notificationGranted message, opts, onclick
+
+  w.notify = notifyMe
+  w.notifyPermissions = notifyPermissions
+) window
diff --git a/app/assets/javascripts/lib/url_utility.js.coffee b/app/assets/javascripts/lib/url_utility.js.coffee
new file mode 100644
index 00000000000..abd556e0b4e
--- /dev/null
+++ b/app/assets/javascripts/lib/url_utility.js.coffee
@@ -0,0 +1,31 @@
+((w) ->
+
+  w.gl ?= {}
+  w.gl.utils ?= {}
+
+  w.gl.utils.getUrlParameter = (sParam) ->
+    sPageURL = decodeURIComponent(window.location.search.substring(1))
+    sURLVariables = sPageURL.split('&')
+    sParameterName = undefined
+    i = 0
+    while i < sURLVariables.length
+      sParameterName = sURLVariables[i].split('=')
+      if sParameterName[0] is sParam
+        return if sParameterName[1] is undefined then true else sParameterName[1]
+      i++
+
+  # #
+  #  @param {Object} params - url keys and value to merge
+  #  @param {String} url
+  # #
+  w.gl.utils.mergeUrlParams = (params, url) ->
+    newUrl = decodeURIComponent(url)
+    for paramName, paramValue of params
+      pattern = new RegExp "\\b(#{paramName}=).*?(&|$)"
+      if url.search(pattern) >= 0
+        newUrl = newUrl.replace pattern, "$1#{paramValue}$2"
+      else
+        newUrl = "#{newUrl}#{(if newUrl.indexOf('?') > 0 then '&' else '?')}#{paramName}=#{paramValue}"
+    newUrl
+
+) window
diff --git a/app/assets/javascripts/merge_request.js.coffee b/app/assets/javascripts/merge_request.js.coffee
index 6af5a48a0bb..1f46e331427 100644
--- a/app/assets/javascripts/merge_request.js.coffee
+++ b/app/assets/javascripts/merge_request.js.coffee
@@ -15,8 +15,6 @@ class @MergeRequest
     this.$('.show-all-commits').on 'click', =>
       this.showAllCommits()
 
-    @fixAffixScroll();
-
     @initTabs()
 
     # Prevent duplicate event bindings
@@ -30,20 +28,6 @@ class @MergeRequest
   $: (selector) ->
     this.$el.find(selector)
 
-  fixAffixScroll: ->
-    fixAffix = ->
-      $discussion = $('.issuable-discussion')
-      $sidebar = $('.issuable-sidebar')
-      if $sidebar.hasClass('no-affix')
-        $sidebar.removeClass(['affix-top','affix'])
-      discussionHeight = $discussion.height()
-      sidebarHeight = $sidebar.height()
-      if sidebarHeight > discussionHeight
-        $discussion.height(sidebarHeight + 50)
-        $sidebar.addClass('no-affix')
-    $(window).on('resize', fixAffix)
-    fixAffix()
-
   initTabs: ->
     if @opts.action != 'new'
       # `MergeRequests#new` has no tab-persisting or lazy-loading behavior
diff --git a/app/assets/javascripts/merge_request_widget.js.coffee b/app/assets/javascripts/merge_request_widget.js.coffee
index 738ffc8343b..84a8887fbce 100644
--- a/app/assets/javascripts/merge_request_widget.js.coffee
+++ b/app/assets/javascripts/merge_request_widget.js.coffee
@@ -2,13 +2,20 @@ class @MergeRequestWidget
   # Initialize MergeRequestWidget behavior
   #
   #   check_enable           - Boolean, whether to check automerge status
-  #   url_to_automerge_check - String, URL to use to check automerge status
-  #   current_status         - String, current automerge status
-  #   ci_enable              - Boolean, whether a CI service is enabled
-  #   url_to_ci_check        - String, URL to use to check CI status
+  #   merge_check_url - String, URL to use to check automerge status
+  #   ci_status_url        - String, URL to use to check CI status
   #
+
   constructor: (@opts) ->
-    modal = $('#modal_merge_info').modal(show: false)
+    $('#modal_merge_info').modal(show: false)
+    @firstCICheck = true
+    @readyForCICheck = true
+    clearInterval @fetchBuildStatusInterval
+
+    @pollCIStatus()
+    notifyPermissions()
+
+  setOpts: (@opts) ->
 
   mergeInProgress: (deleteSourceBranch = false)->
     $.ajax
@@ -27,18 +34,61 @@ class @MergeRequestWidget
       dataType: 'json'
 
   getMergeStatus: ->
-    $.get @opts.url_to_automerge_check, (data) ->
+    $.get @opts.merge_check_url, (data) ->
       $('.mr-state-widget').replaceWith(data)
 
-  getCiStatus: ->
-    if @opts.ci_enable
-      $.get @opts.url_to_ci_check, (data) =>
-        this.showCiState data.status
+  ciLabelForStatus: (status) ->
+    if status == 'success'
+      'passed'
+    else
+      status
+
+  pollCIStatus: ->
+    @fetchBuildStatusInterval = setInterval ( =>
+      return if not @readyForCICheck
+
+      @getCIStatus(true)
+
+      @readyForCICheck = false
+    ), 10000
+
+  getCIStatus: (showNotification) ->
+    _this = @
+    $('.ci-widget-fetching').show()
+
+    $.getJSON @opts.ci_status_url, (data) =>
+      @readyForCICheck = true
+
+      if @firstCICheck
+        @firstCICheck = false
+        @opts.ci_status = data.status
+
+      if @opts.ci_status is ''
+        @opts.ci_status = data.status
+        return
+
+      if data.status isnt @opts.ci_status
+        @showCIStatus data.status
         if data.coverage
-          this.showCiCoverage data.coverage
-      , 'json'
+          @showCICoverage data.coverage
+
+        if showNotification
+          message = @opts.ci_message.replace('{{status}}', @ciLabelForStatus(data.status))
+          message = message.replace('{{sha}}', data.sha)
+          message = message.replace('{{title}}', data.title)
+
+          notify(
+            "Build #{@ciLabelForStatus(data.status)}",
+            message,
+            @opts.gitlab_icon,
+            ->
+              @close()
+              Turbolinks.visit _this.opts.builds_path
+          )
+
+        @opts.ci_status = data.status
 
-  showCiState: (state) ->
+  showCIStatus: (state) ->
     $('.ci_widget').hide()
     allowed_states = ["failed", "canceled", "running", "pending", "success", "skipped", "not_found"]
     if state in allowed_states
@@ -52,7 +102,7 @@ class @MergeRequestWidget
       $('.ci_widget.ci-error').show()
       @setMergeButtonClass('btn-danger')
 
-  showCiCoverage: (coverage) ->
+  showCICoverage: (coverage) ->
     text = 'Coverage ' + coverage + '%'
     $('.ci_widget:visible .ci-coverage').text(text)
 
diff --git a/app/assets/javascripts/milestone_select.js.coffee b/app/assets/javascripts/milestone_select.js.coffee
index e2a7d5fbba2..f73127f49f0 100644
--- a/app/assets/javascripts/milestone_select.js.coffee
+++ b/app/assets/javascripts/milestone_select.js.coffee
@@ -84,12 +84,16 @@ class @MilestoneSelect
 
           # display:block overrides the hide-collapse rule
           $value.removeAttr('style')
-        clicked: (e) ->
+        clicked: (selected) ->
           if $dropdown.hasClass 'js-filter-bulk-update'
             return
 
-          if $dropdown.hasClass 'js-filter-submit'
-            $dropdown.parents('form').submit()
+          if $dropdown.hasClass('js-filter-submit')
+            if selected.name?
+              selectedMilestone = selected.name
+            else
+              selectedMilestone = ''
+            Issues.filterResults $dropdown.closest('form')
           else
             selected = $selectbox
               .find('input[type="hidden"]')
@@ -117,4 +121,4 @@ class @MilestoneSelect
               else
                 $value.html(milestoneLinkNoneTemplate)
                 $sidebarCollapsedValue.find('span').text('No')
-      )
\ No newline at end of file
+      )
diff --git a/app/assets/javascripts/notes.js.coffee b/app/assets/javascripts/notes.js.coffee
index ff06c57f2b5..86e3b860fcb 100644
--- a/app/assets/javascripts/notes.js.coffee
+++ b/app/assets/javascripts/notes.js.coffee
@@ -251,13 +251,11 @@ class @Notes
   Sets some hidden fields in the form.
   ###
   setupMainTargetNoteForm: ->
-
     # find the form
     form = $(".js-new-note-form")
 
-    # insert the form after the button
-    form.clone().replaceAll $(".js-main-target-form")
-    form = form.prev("form")
+    # Set a global clone of the form for later cloning
+    @formClone = form.clone()
 
     # show the form
     @setupNoteForm(form)
@@ -266,9 +264,7 @@ class @Notes
     form.removeClass "js-new-note-form"
     form.addClass "js-main-target-form"
 
-    # remove unnecessary fields and buttons
     form.find("#note_line_code").remove()
-    form.find(".js-close-discussion-note-form").remove()
 
   ###
   General note form setup.
@@ -297,7 +293,14 @@ class @Notes
       else
         previewButton.removeClass("turn-on").addClass "turn-off"
 
+    textarea.on 'focus', ->
+      $(this).closest('.md-area').addClass 'is-focused'
+
+    textarea.on 'blur', ->
+      $(this).closest('.md-area').removeClass 'is-focused'
+
     autosize(textarea)
+
     new Autosave textarea, [
       "Note"
       form.find("#note_commit_id").val()
@@ -307,7 +310,6 @@ class @Notes
     ]
 
     # remove notify commit author checkbox for non-commit notes
-    form.find(".js-notify-commit-author").remove()  if form.find("#note_noteable_type").val() isnt "Commit"
     GitLab.GfmAutoComplete.setup()
     new DropzoneInput(form)
     form.show()
@@ -455,15 +457,15 @@ class @Notes
   Shows the note form below the notes.
   ###
   replyToDiscussionNote: (e) =>
-    form = $(".js-new-note-form")
+    form = @formClone.clone()
     replyLink = $(e.target).closest(".js-discussion-reply-button")
     replyLink.hide()
 
     # insert the form after the button
-    form.clone().insertAfter replyLink
+    replyLink.after form
 
     # show the form
-    @setupDiscussionNoteForm(replyLink, replyLink.next("form"))
+    @setupDiscussionNoteForm(replyLink, form)
 
   ###
   Shows the diff or discussion form and does some setup on it.
@@ -488,7 +490,9 @@ class @Notes
         .text(form.find('.js-close-discussion-note-form').data('cancel-text'))
     @setupNoteForm form
     form.find(".js-note-text").focus()
-    form.addClass "js-discussion-note-form"
+    form
+      .removeClass('js-main-target-form')
+      .addClass("discussion-form js-discussion-note-form")
 
   ###
   Called when clicking on the "add a comment" button on the side of a diff line.
@@ -498,9 +502,8 @@ class @Notes
   ###
   addDiffNote: (e) =>
     e.preventDefault()
-    link = e.currentTarget
-    form = $(".js-new-note-form")
-    row = $(link).closest("tr")
+    $link = $(e.currentTarget)
+    row = $link.closest("tr")
     nextRow = row.next()
     hasNotes = nextRow.is(".notes_holder")
     addForm = false
@@ -509,7 +512,7 @@ class @Notes
 
     # In parallel view, look inside the correct left/right pane
     if @isParallelView()
-      lineType = $(link).data("lineType")
+      lineType = $link.data("lineType")
       targetContent += "." + lineType
       rowCssToAdd = "<tr class=\"notes_holder js-temp-notes-holder\"><td class=\"notes_line\"></td><td class=\"notes_content parallel old\"></td><td class=\"notes_line\"></td><td class=\"notes_content parallel new\"></td></tr>"
 
@@ -531,11 +534,11 @@ class @Notes
       addForm = true
 
     if addForm
-      newForm = form.clone()
+      newForm = @formClone.clone()
       newForm.appendTo row.next().find(targetContent)
 
       # show the form
-      @setupDiscussionNoteForm $(link), newForm
+      @setupDiscussionNoteForm $link, newForm
 
   ###
   Called in response to "cancel" on a diff note form.
@@ -560,7 +563,6 @@ class @Notes
 
   cancelDiscussionForm: (e) =>
     e.preventDefault()
-    form = $(".js-new-note-form")
     form = $(e.target).closest(".js-discussion-note-form")
     @removeDiscussionNoteForm(form)
 
diff --git a/app/assets/javascripts/search_autocomplete.js.coffee b/app/assets/javascripts/search_autocomplete.js.coffee
index c1801365266..6a7b4ad1db7 100644
--- a/app/assets/javascripts/search_autocomplete.js.coffee
+++ b/app/assets/javascripts/search_autocomplete.js.coffee
@@ -1,11 +1,296 @@
 class @SearchAutocomplete
-  constructor: (search_autocomplete_path, project_id, project_ref) ->
-    project_id = '' unless project_id
-    project_ref = '' unless project_ref
-    query = "?project_id=" + project_id + "&project_ref=" + project_ref
-
-    $("#search").autocomplete
-      source: search_autocomplete_path + query
-      minLength: 1
-      select: (event, ui) ->
-        location.href = ui.item.url
+
+  KEYCODE =
+    ESCAPE: 27
+    BACKSPACE: 8
+    ENTER: 13
+
+  constructor: (opts = {}) ->
+    {
+      @wrap = $('.search')
+
+      @optsEl = @wrap.find('.search-autocomplete-opts')
+      @autocompletePath = @optsEl.data('autocomplete-path')
+      @projectId = @optsEl.data('autocomplete-project-id') || ''
+      @projectRef = @optsEl.data('autocomplete-project-ref') || ''
+
+    } = opts
+
+    # Dropdown Element
+    @dropdown = @wrap.find('.dropdown')
+    @dropdownContent = @dropdown.find('.dropdown-content')
+
+    @locationBadgeEl = @getElement('.search-location-badge')
+    @locationText = @getElement('.location-text')
+    @scopeInputEl = @getElement('#scope')
+    @searchInput = @getElement('.search-input')
+    @projectInputEl = @getElement('#search_project_id')
+    @groupInputEl = @getElement('#group_id')
+    @searchCodeInputEl = @getElement('#search_code')
+    @repositoryInputEl = @getElement('#repository_ref')
+    @clearInput = @getElement('.js-clear-input')
+
+    @saveOriginalState()
+
+    # Only when user is logged in
+    @createAutocomplete() if gon.current_user_id
+
+    @searchInput.addClass('disabled')
+
+    @saveTextLength()
+
+    @bindEvents()
+
+  # Finds an element inside wrapper element
+  getElement: (selector) ->
+    @wrap.find(selector)
+
+  saveOriginalState: ->
+    @originalState = @serializeState()
+
+  saveTextLength: ->
+    @lastTextLength = @searchInput.val().length
+
+  createAutocomplete: ->
+    @searchInput.glDropdown
+        filterInputBlur: false
+        filterable: true
+        filterRemote: true
+        highlight: true
+        enterCallback: false
+        filterInput: 'input#search'
+        search:
+          fields: ['text']
+        data: @getData.bind(@)
+        selectable: true
+        clicked: @onClick.bind(@)
+
+  getData: (term, callback) ->
+    _this = @
+
+    # Do not trigger request if input is empty
+    return if @searchInput.val() is ''
+
+    # Prevent multiple ajax calls
+    return if @loadingSuggestions
+
+    @loadingSuggestions = true
+
+    jqXHR = $.get(@autocompletePath, {
+        project_id: @projectId
+        project_ref: @projectRef
+        term: term
+      }, (response) ->
+        # Hide dropdown menu if no suggestions returns
+        if !response.length
+          _this.disableAutocomplete()
+          return
+
+        data = []
+
+        # List results
+        firstCategory = true
+        for suggestion in response
+
+          # Add group header before list each group
+          if lastCategory isnt suggestion.category
+            data.push 'separator' if !firstCategory
+
+            firstCategory = false if firstCategory
+
+            data.push
+              header: suggestion.category
+
+            lastCategory = suggestion.category
+
+          data.push
+            id: "#{suggestion.category.toLowerCase()}-#{suggestion.id}"
+            category: suggestion.category
+            text: suggestion.label
+            url: suggestion.url
+
+        # Add option to proceed with the search
+        if data.length
+          data.push('separator')
+          data.push
+            text: "Result name contains \"#{term}\""
+            url: "/search?\
+                  search=#{term}\
+                  &project_id=#{_this.projectInputEl.val()}\
+                  &group_id=#{_this.groupInputEl.val()}"
+
+        callback(data)
+    ).always ->
+      _this.loadingSuggestions = false
+
+  serializeState: ->
+    {
+      # Search Criteria
+      search_project_id: @projectInputEl.val()
+      group_id: @groupInputEl.val()
+      search_code: @searchCodeInputEl.val()
+      repository_ref: @repositoryInputEl.val()
+      scope: @scopeInputEl.val()
+
+      # Location badge
+      _location: @locationText.text()
+    }
+
+  bindEvents: ->
+    $(document).on 'click', @onDocumentClick
+    @searchInput.on 'keydown', @onSearchInputKeyDown
+    @searchInput.on 'keyup', @onSearchInputKeyUp
+    @searchInput.on 'click', @onSearchInputClick
+    @searchInput.on 'focus', @onSearchInputFocus
+    @clearInput.on 'click', @onClearInputClick
+
+  onDocumentClick: (e) =>
+    # If clicking outside the search box
+    # And search input is not focused
+    # And we are not clicking inside a suggestion
+    if not $.contains(@dropdown[0], e.target) and @isFocused and not $(e.target).parents('ul').length
+      @onSearchInputBlur()
+
+  enableAutocomplete: ->
+    # No need to enable anything if user is not logged in
+    return if !gon.current_user_id
+
+    _this = @
+    @loadingSuggestions = false
+
+    @dropdown.addClass('open')
+    @searchInput.removeClass('disabled')
+
+  onSearchInputKeyDown: =>
+    # Saves last length of the entered text
+    @saveTextLength()
+
+  onSearchInputKeyUp: (e) =>
+    switch e.keyCode
+      when KEYCODE.BACKSPACE
+        # when trying to remove the location badge
+        if @lastTextLength is 0 and @badgePresent()
+            @removeLocationBadge()
+
+        # When removing the last character and no badge is present
+        if @lastTextLength is 1
+          @disableAutocomplete()
+
+        # When removing any character from existin value
+        if @lastTextLength > 1
+          @enableAutocomplete()
+
+      when KEYCODE.ESCAPE
+        @restoreOriginalState()
+
+      else
+        # Handle the case when deleting the input value other than backspace
+        # e.g. Pressing ctrl + backspace or ctrl + x
+        if @searchInput.val() is ''
+          @disableAutocomplete()
+        else
+          # We should display the menu only when input is not empty
+          @enableAutocomplete()
+
+    @wrap.toggleClass 'has-value', !!e.target.value
+
+    # Avoid falsy value to be returned
+    return
+
+  onSearchInputClick: (e) =>
+    # Prevents closing the dropdown menu
+    e.stopImmediatePropagation()
+
+  onSearchInputFocus: =>
+    @isFocused = true
+    @wrap.addClass('search-active')
+
+  onClearInputClick: (e) =>
+    e.preventDefault()
+    @searchInput.val('').focus()
+
+  onSearchInputBlur: (e) =>
+    @isFocused = false
+    @wrap.removeClass('search-active')
+
+    # If input is blank then restore state
+    if @searchInput.val() is ''
+      @restoreOriginalState()
+
+  addLocationBadge: (item) ->
+    category = if item.category? then "#{item.category}: " else ''
+    value = if item.value? then item.value else ''
+
+    html = "<span class='location-badge'>
+              <i class='location-text'>#{category}#{value}</i>
+            </span>"
+    @locationBadgeEl.html(html)
+    @wrap.addClass('has-location-badge')
+
+  restoreOriginalState: ->
+    inputs = Object.keys @originalState
+
+    for input in inputs
+      @getElement("##{input}").val(@originalState[input])
+
+
+    if @originalState._location is ''
+      @locationBadgeEl.empty()
+    else
+      @addLocationBadge(
+        value: @originalState._location
+      )
+
+    @dropdown.removeClass 'open'
+
+  badgePresent: ->
+    @locationBadgeEl.children().length
+
+  resetSearchState: ->
+    inputs = Object.keys @originalState
+
+    for input in inputs
+
+      # _location isnt a input
+      break if input is '_location'
+
+      @getElement("##{input}").val('')
+
+  removeLocationBadge: ->
+    @locationBadgeEl.empty()
+
+    # Reset state
+    @resetSearchState()
+
+    @wrap.removeClass('has-location-badge')
+
+  disableAutocomplete: ->
+    @searchInput.addClass('disabled')
+    @dropdown.removeClass('open')
+    @restoreMenu()
+
+  restoreMenu: ->
+    html = "<ul>
+              <li><a class='dropdown-menu-empty-link is-focused'>Loading...</a></li>
+            </ul>"
+    @dropdownContent.html(html)
+
+  onClick: (item, $el, e) ->
+    if location.pathname.indexOf(item.url) isnt -1
+      e.preventDefault()
+      if not @badgePresent
+        if item.category is 'Projects'
+          @projectInputEl.val(item.id)
+          @addLocationBadge(
+            value: 'This project'
+          )
+
+        if item.category is 'Groups'
+          @groupInputEl.val(item.id)
+          @addLocationBadge(
+            value: 'This group'
+          )
+
+      $el.removeClass('is-active')
+      @disableAutocomplete()
+      @searchInput.val('').focus()
diff --git a/app/assets/javascripts/sidebar.js.coffee b/app/assets/javascripts/sidebar.js.coffee
index 860d4f438d0..e1778511240 100644
--- a/app/assets/javascripts/sidebar.js.coffee
+++ b/app/assets/javascripts/sidebar.js.coffee
@@ -4,7 +4,6 @@ expanded = 'page-sidebar-expanded'
 toggleSidebar = ->
   $('.page-with-sidebar').toggleClass("#{collapsed} #{expanded}")
   $('header').toggleClass("header-collapsed header-expanded")
-  $('.toggle-nav-collapse i').toggleClass("fa-angle-right fa-angle-left")
   $.cookie("collapsed_nav", $('.page-with-sidebar').hasClass(collapsed), { path: '/' })
 
   setTimeout ( ->
diff --git a/app/assets/javascripts/zen_mode.js.coffee b/app/assets/javascripts/zen_mode.js.coffee
index e1c5446eaac..99f35ecfb0f 100644
--- a/app/assets/javascripts/zen_mode.js.coffee
+++ b/app/assets/javascripts/zen_mode.js.coffee
@@ -42,7 +42,7 @@ class @ZenMode
       $(e.currentTarget).trigger('zen_mode:leave')
 
     $(document).on 'zen_mode:enter', (e) =>
-      @enter(e.target.parentNode)
+      @enter($(e.target).closest('.md-area').find('.zen-backdrop'))
     $(document).on 'zen_mode:leave', (e) =>
       @exit()