app/assets/javascripts/cycle_analytics/default_event_objects.js

-module.exports = {
+export default {
   issue: {
     created_at: '',
     url: '',

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

@@ -75,26 +75,32 @@
 </script>
 <template>
-  <div class="col-lg-9 col-lg-offset-3 append-bottom-default deploy-keys">
+  <div class="append-bottom-default deploy-keys">
     <loading-icon
       v-if="isLoading && !hasKeys"
       size="2"
       label="Loading deploy keys"
-      />
+    />
     <div v-else-if="hasKeys">
       <keys-panel
         title="Enabled deploy keys for this project"
         :keys="keys.enabled_keys"
-        :store="store" />
+        :store="store"
+        :endpoint="endpoint"
+      />
       <keys-panel
         title="Deploy keys from projects you have access to"
         :keys="keys.available_project_keys"
-        :store="store" />
+        :store="store"
+        :endpoint="endpoint"
+      />
       <keys-panel
         v-if="keys.public_keys.length"
         title="Public deploy keys available to any project"
         :keys="keys.public_keys"
-        :store="store" />
+        :store="store"
+        :endpoint="endpoint"
+      />
     </div>
   </div>
 </template>

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

@@ -11,6 +11,10 @@
         type: Object,
         required: true,
       },
+      endpoint: {
+        type: String,
+        required: true,
+      },
     },
     components: {
       actionBtn,
@@ -19,6 +23,9 @@
       timeagoDate() {
         return gl.utils.getTimeago().format(this.deployKey.created_at);
       },
+      editDeployKeyPath() {
+        return `${this.endpoint}/${this.deployKey.id}/edit`;
+      },
     },
     methods: {
       isEnabled(id) {
@@ -33,7 +40,8 @@
     <div class="pull-left append-right-10 hidden-xs">
       <i
         aria-hidden="true"
-        class="fa fa-key key-icon">
+        class="fa fa-key key-icon"
+      >
       </i>
     </div>
     <div class="deploy-key-content key-list-item-info">
@@ -45,7 +53,8 @@
       </div>
       <div
         v-if="deployKey.can_push"
-        class="write-access-allowed">
+        class="write-access-allowed"
+      >
         Write access allowed
       </div>
     </div>
@@ -53,7 +62,8 @@
       <a
         v-for="project in deployKey.projects"
         class="label deploy-project-label"
-        :href="project.full_path">
+        :href="project.full_path"
+      >
         {{ project.full_name }}
       </a>
     </div>
@@ -61,20 +71,30 @@
       <span class="key-created-at">
         created {{ timeagoDate }}
       </span>
+      <a
+        v-if="deployKey.can_edit"
+        class="btn btn-small"
+        :href="editDeployKeyPath"
+      >
+        Edit
+      </a>
       <action-btn
         v-if="!isEnabled(deployKey.id)"
         :deploy-key="deployKey"
-        type="enable"/>
+        type="enable"
+      />
       <action-btn
         v-else-if="deployKey.destroyed_when_orphaned && deployKey.almost_orphaned"
         :deploy-key="deployKey"
         btn-css-class="btn-warning"
-        type="remove" />
+        type="remove"
+      />
       <action-btn
         v-else
         :deploy-key="deployKey"
         btn-css-class="btn-warning"
-        type="disable" />
+        type="disable"
+      />
     </div>
   </div>
 </template>

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

@@ -20,6 +20,10 @@
         type: Object,
         required: true,
       },
+      endpoint: {
+        type: String,
+        required: true,
+      },
     },
     components: {
       key,
@@ -34,18 +38,22 @@
       ({{ keys.length }})
     </h5>
     <ul class="well-list"
-      v-if="keys.length">
+      v-if="keys.length"
+    >
       <li
         v-for="deployKey in keys"
         :key="deployKey.id">
         <key
           :deploy-key="deployKey"
-          :store="store" />
+          :store="store"
+          :endpoint="endpoint"
+        />
       </li>
     </ul>
     <div
       class="settings-message text-center"
-      v-else-if="showHelpBox">
+      v-else-if="showHelpBox"
+    >
       No deploy keys found. Create one with the form above.
     </div>
   </div>

app/assets/javascripts/diff.js

 /* eslint-disable class-methods-use-this */
-require('./lib/utils/url_utility');
+import './lib/utils/url_utility';
+import FilesCommentButton from './files_comment_button';
+import SingleFileDiff from './single_file_diff';
 const UNFOLD_COUNT = 20;
 let isBound = false;
@@ -8,8 +10,14 @@ let isBound = false;
 class Diff {
   constructor() {
     const $diffFile = $('.files .diff-file');
-    $diffFile.singleFileDiff();
-    $diffFile.filesCommentButton();
+
+    $diffFile.each((index, file) => {
+      if (!$.data(file, 'singleFileDiff')) {
+        $.data(file, 'singleFileDiff', new SingleFileDiff(file));
+      }
+    });
+
+    FilesCommentButton.init($diffFile);
     $diffFile.each((index, file) => new gl.ImageFile(file));

app/assets/javascripts/diff_notes/components/diff_note_avatars.js

@@ -139,9 +139,9 @@ const DiffNoteAvatars = Vue.extend({
       const notesCount = this.notesCount;
       $(this.$el).closest('.js-avatar-container')
-        .toggleClass('js-no-comment-btn', notesCount > 0)
+        .toggleClass('no-comment-btn', notesCount > 0)
         .nextUntil('.js-avatar-container')
-        .toggleClass('js-no-comment-btn', notesCount > 0);
+        .toggleClass('no-comment-btn', notesCount > 0);
     },
     toggleDiscussionsToggleState() {
       const $notesHolders = $(this.$el).closest('.code').find('.notes_holder');

app/assets/javascripts/diff_notes/components/jump_to_discussion.js

@@ -16,6 +16,13 @@ const JumpToDiscussion = Vue.extend({
     };
   },
   computed: {
+    buttonText: function () {
+      if (this.discussionId) {
+        return 'Jump to next unresolved discussion';
+      } else {
+        return 'Jump to first unresolved discussion';
+      }
+    },
     allResolved: function () {
       return this.unresolvedDiscussionCount === 0;
     },
@@ -87,7 +94,7 @@ const JumpToDiscussion = Vue.extend({
             hasDiscussionsToJumpTo = false;
           }
         }
-      } else if (activeTab !== 'notes') {
+      } else if (activeTab !== 'show') {
         // If we are on the commits or builds tabs,
         // there are no discussions to jump to.
         hasDiscussionsToJumpTo = false;
@@ -96,12 +103,12 @@ const JumpToDiscussion = Vue.extend({
       if (!hasDiscussionsToJumpTo) {
         // If there are no discussions to jump to on the current page,
         // switch to the notes tab and jump to the first disucssion there.
-        window.mrTabs.activateTab('notes');
-        activeTab = 'notes';
+        window.mrTabs.activateTab('show');
+        activeTab = 'show';
         jumpToFirstDiscussion = true;
       }
-      if (activeTab === 'notes') {
+      if (activeTab === 'show') {
         discussionsSelector = '.discussion[data-discussion-id]';
         discussionIdsInScope = discussionIdsForElements($(discussionsSelector));
       }
@@ -149,7 +156,7 @@ const JumpToDiscussion = Vue.extend({
       let $target = $(`${discussionsSelector}[data-discussion-id="${nextUnresolvedDiscussionId}"]`);
-      if (activeTab === 'notes') {
+      if (activeTab === 'show') {
         $target = $target.closest('.note-discussion');
         // If the next discussion is closed, toggle it open.

app/assets/javascripts/diff_notes/components/resolve_btn.js

-/* eslint-disable comma-dangle, object-shorthand, func-names, quote-props, no-else-return, camelcase, no-new, max-len */
+/* eslint-disable comma-dangle, object-shorthand, func-names, quote-props, no-else-return, camelcase, max-len */
 /* global CommentsStore */
 /* global ResolveService */
 /* global Flash */
@@ -64,8 +64,6 @@ const ResolveBtn = Vue.extend({
       });
     },
     resolve: function () {
-      const errorFlashMsg = 'An error occurred when trying to resolve a comment. Please try again.';
-
       if (!this.canResolve) return;
       let promise;
@@ -79,24 +77,20 @@ const ResolveBtn = Vue.extend({
           .resolve(this.noteId);
       }
-      promise.then((response) => {
-        this.loading = false;
-        if (response.status === 200) {
-          const data = response.json();
+      promise
+        .then(resp => resp.json())
+        .then((data) => {
+          this.loading = false;
           const resolved_by = data ? data.resolved_by : null;
           CommentsStore.update(this.discussionId, this.noteId, !this.isResolved, resolved_by);
           this.discussion.updateHeadline(data);
           gl.mrWidget.checkStatus();
-        } else {
-          new Flash(errorFlashMsg);
-        }
-        this.updateTooltip();
-      }).catch(() => {
-        new Flash(errorFlashMsg);
-      });
+          this.updateTooltip();
+        })
+        .catch(() => new Flash('An error occurred when trying to resolve a comment. Please try again.'));
     }
   },
   mounted: function () {

app/assets/javascripts/diff_notes/diff_notes_bundle.js

@@ -2,19 +2,18 @@
 /* global ResolveCount */
 import Vue from 'vue';
-
-require('./models/discussion');
-require('./models/note');
-require('./stores/comments');
-require('./services/resolve');
-require('./mixins/discussion');
-require('./components/comment_resolve_btn');
-require('./components/jump_to_discussion');
-require('./components/resolve_btn');
-require('./components/resolve_count');
-require('./components/resolve_discussion_btn');
-require('./components/diff_note_avatars');
-require('./components/new_issue_for_discussion');
+import './models/discussion';
+import './models/note';
+import './stores/comments';
+import './services/resolve';
+import './mixins/discussion';
+import './components/comment_resolve_btn';
+import './components/jump_to_discussion';
+import './components/resolve_btn';
+import './components/resolve_count';
+import './components/resolve_discussion_btn';
+import './components/diff_note_avatars';
+import './components/new_issue_for_discussion';
 $(() => {
   const projectPath = document.querySelector('.merge-request').dataset.projectPath;

app/assets/javascripts/diff_notes/services/resolve.js

-/* eslint-disable class-methods-use-this, one-var, camelcase, no-new, comma-dangle, no-param-reassign, max-len */
 /* global Flash */
 /* global CommentsStore */
 import Vue from 'vue';
-import VueResource from 'vue-resource';
-
-require('../../vue_shared/vue_resource_interceptor');
-
-Vue.use(VueResource);
+import '../../vue_shared/vue_resource_interceptor';
 window.gl = window.gl || {};
@@ -36,27 +31,22 @@ class ResolveServiceClass {
       promise = this.resolveAll(mergeRequestId, discussionId);
     }
-    promise.then((response) => {
-      discussion.loading = false;
-
-      if (response.status === 200) {
-        const data = response.json();
-        const resolved_by = data ? data.resolved_by : null;
+    promise
+      .then(resp => resp.json())
+      .then((data) => {
+        discussion.loading = false;
+        const resolvedBy = data ? data.resolved_by : null;
         if (isResolved) {
           discussion.unResolveAllNotes();
         } else {
-          discussion.resolveAllNotes(resolved_by);
+          discussion.resolveAllNotes(resolvedBy);
         }
         gl.mrWidget.checkStatus();
         discussion.updateHeadline(data);
-      } else {
-        throw new Error('An error occurred when trying to resolve discussion.');
-      }
-    }).catch(() => {
-      new Flash('An error occurred when trying to resolve a discussion. Please try again.');
-    });
+      })
+      .catch(() => new Flash('An error occurred when trying to resolve a discussion. Please try again.'));
   }
   resolveAll(mergeRequestId, discussionId) {
@@ -66,7 +56,7 @@ class ResolveServiceClass {
     return this.discussionResource.save({
       mergeRequestId,
-      discussionId
+      discussionId,
     }, {});
   }
@@ -77,7 +67,7 @@ class ResolveServiceClass {
     return this.discussionResource.delete({
       mergeRequestId,
-      discussionId
+      discussionId,
     }, {});
   }
 }

app/assets/javascripts/dispatcher.js

 /* eslint-disable func-names, space-before-function-paren, no-var, prefer-arrow-callback, wrap-iife, no-shadow, consistent-return, one-var, one-var-declaration-per-line, camelcase, default-case, no-new, quotes, no-duplicate-case, no-case-declarations, no-fallthrough, max-len */
-/* global UsernameValidator */
-/* global ActiveTabMemoizer */
+/* global ProjectSelect */
 /* global ShortcutsNavigation */
-/* global Build */
-/* global Issuable */
+/* global IssuableIndex */
 /* global ShortcutsIssuable */
-/* global ZenMode */
 /* global Milestone */
 /* global IssuableForm */
 /* global LabelsSelect */
 /* global MilestoneSelect */
 /* global Commit */
+/* global CommitsList */
+/* global NewBranchForm */
 /* global NotificationsForm */
-/* global TreeView */
 /* global NotificationsDropdown */
 /* global GroupAvatar */
 /* global LineHighlighter */
@@ -22,31 +20,36 @@
 /* global Search */
 /* global Admin */
 /* global NamespaceSelects */
+/* global NewCommitForm */
+/* global NewBranchForm */
 /* global Project */
 /* global ProjectAvatar */
+/* global MergeRequest */
+/* global Compare */
 /* global CompareAutocomplete */
+/* global ProjectFindFile */
 /* global ProjectNew */
-/* global Star */
 /* global ProjectShow */
+/* global ProjectImport */
 /* global Labels */
 /* global Shortcuts */
+/* global ShortcutsFindFile */
 /* global Sidebar */
 /* global ShortcutsWiki */
 import Issue from './issue';
-
 import BindInOut from './behaviors/bind_in_out';
 import DeleteModal from './branches/branches_delete_modal';
 import Group from './group';
 import GroupName from './group_name';
 import GroupsList from './groups_list';
 import ProjectsList from './projects_list';
+import setupProjectEdit from './project_edit';
 import MiniPipelineGraph from './mini_pipeline_graph_dropdown';
 import BlobLinePermalinkUpdater from './blob/blob_line_permalink_updater';
 import Landing from './landing';
 import BlobForkSuggestion from './blob/blob_fork_suggestion';
 import UserCallout from './user_callout';
-import { ProtectedTagCreate, ProtectedTagEditList } from './protected_tags';
 import ShortcutsWiki from './shortcuts_wiki';
 import Pipelines from './pipelines';
 import BlobViewer from './blob/viewer/index';
@@ -54,16 +57,28 @@ import AutoWidthDropdownSelect from './issuable/auto_width_dropdown_select';
 import UsersSelect from './users_select';
 import RefSelectDropdown from './ref_select_dropdown';
 import GfmAutoComplete from './gfm_auto_complete';
-
-const ShortcutsBlob = require('./shortcuts_blob');
+import ShortcutsBlob from './shortcuts_blob';
+import SigninTabsMemoizer from './signin_tabs_memoizer';
+import Star from './star';
+import Todos from './todos';
+import TreeView from './tree';
+import UsagePing from './usage_ping';
+import UsernameValidator from './username_validator';
+import VersionCheckImage from './version_check_image';
+import Wikis from './wikis';
+import ZenMode from './zen_mode';
+import initSettingsPanels from './settings_panels';
+import initExperimentalFlags from './experimental_flags';
+import OAuthRememberMe from './oauth_remember_me';
+import PerformanceBar from './performance_bar';
+import initNotes from './init_notes';
+import initLegacyFilters from './init_legacy_filters';
+import initIssuableSidebar from './init_issuable_sidebar';
+import GpgBadges from './gpg_badges';
 (function() {
   var Dispatcher;
-  $(function() {
-    return new Dispatcher();
-  });
-
   Dispatcher = (function() {
     function Dispatcher() {
       this.initSearch();
@@ -80,7 +95,18 @@ const ShortcutsBlob = require('./shortcuts_blob');
       path = page.split(':');
       shortcut_handler = null;
-      new GfmAutoComplete(gl.GfmAutoComplete && gl.GfmAutoComplete.dataSources).setup();
+      $('.js-gfm-input').each((i, el) => {
+        const gfm = new GfmAutoComplete(gl.GfmAutoComplete && gl.GfmAutoComplete.dataSources);
+        const enableGFM = gl.utils.convertPermissionToBoolean(el.dataset.supportsAutocomplete);
+        gfm.setup($(el), {
+          emojis: true,
+          members: enableGFM,
+          issues: enableGFM,
+          milestones: enableGFM,
+          mergeRequests: enableGFM,
+          labels: enableGFM,
+        });
+      });
       function initBlob() {
         new LineHighlighter();
@@ -109,28 +135,31 @@ const ShortcutsBlob = require('./shortcuts_blob');
           .init();
       }
+      const filteredSearchEnabled = gl.FilteredSearchManager && document.querySelector('.filtered-search');
+
       switch (page) {
+        case 'profiles:preferences:show':
+          initExperimentalFlags();
+          break;
         case 'sessions:new':
           new UsernameValidator();
-          new ActiveTabMemoizer();
+          new SigninTabsMemoizer();
+          new OAuthRememberMe({ container: $(".omniauth-container") }).bindEvents();
           break;
         case 'projects:boards:show':
         case 'projects:boards:index':
           shortcut_handler = new ShortcutsNavigation();
           new UsersSelect();
           break;
-        case 'projects:builds:show':
-          new Build();
-          break;
         case 'projects:merge_requests:index':
         case 'projects:issues:index':
-          if (gl.FilteredSearchManager) {
-            new gl.FilteredSearchManager(page === 'projects:issues:index' ? 'issues' : 'merge_requests');
+          if (filteredSearchEnabled) {
+            const filteredSearchManager = new gl.FilteredSearchManager(page === 'projects:issues:index' ? 'issues' : 'merge_requests');
+            filteredSearchManager.setup();
           }
-          Issuable.init();
-          new gl.IssuableBulkActions({
-            prefixId: page === 'projects:merge_requests:index' ? 'merge_request_' : 'issue_',
-          });
+          const pagePrefix = page === 'projects:merge_requests:index' ? 'merge_request_' : 'issue_';
+          IssuableIndex.init(pagePrefix);
+
           shortcut_handler = new ShortcutsNavigation();
           new UsersSelect();
           break;
@@ -138,6 +167,11 @@ const ShortcutsBlob = require('./shortcuts_blob');
           new Issue();
           shortcut_handler = new ShortcutsIssuable();
           new ZenMode();
+          initIssuableSidebar();
+          initNotes();
+          break;
+        case 'dashboard:milestones:index':
+          new ProjectSelect();
           break;
         case 'projects:milestones:show':
         case 'groups:milestones:show':
@@ -145,12 +179,21 @@ const ShortcutsBlob = require('./shortcuts_blob');
           new Milestone();
           new Sidebar();
           break;
-        case 'groups:issues':
+        case 'dashboard:issues':
+        case 'dashboard:merge_requests':
         case 'groups:merge_requests':
-          new UsersSelect();
+          new ProjectSelect();
+          initLegacyFilters();
+          break;
+        case 'groups:issues':
+          if (filteredSearchEnabled) {
+            const filteredSearchManager = new gl.FilteredSearchManager('issues');
+            filteredSearchManager.setup();
+          }
+          new ProjectSelect();
           break;
         case 'dashboard:todos:index':
-          new gl.Todos();
+          new Todos();
           break;
         case 'dashboard:projects:index':
         case 'dashboard:projects:starred':
@@ -160,12 +203,8 @@ const ShortcutsBlob = require('./shortcuts_blob');
         case 'admin:projects:index':
           new ProjectsList();
           break;
-        case 'dashboard:groups:index':
-          new GroupsList();
-          break;
         case 'explore:groups:index':
           new GroupsList();
-
           const landingElement = document.querySelector('.js-explore-groups-landing');
           if (!landingElement) break;
           const exploreGroupsLanding = new Landing(
@@ -183,11 +222,15 @@ const ShortcutsBlob = require('./shortcuts_blob');
         case 'groups:milestones:update':
           new ZenMode();
           new gl.DueDateSelectors();
-          new gl.GLForm($('.milestone-form'));
+          new gl.GLForm($('.milestone-form'), true);
           break;
         case 'projects:compare:show':
           new gl.Diff();
           break;
+        case 'projects:branches:new':
+        case 'projects:branches:create':
+          new NewBranchForm($('.js-create-branch-form'), JSON.parse(document.getElementById('availableRefs').innerHTML));
+          break;
         case 'projects:branches:index':
           gl.AjaxLoadingSpinner.init();
           new DeleteModal();
@@ -195,18 +238,31 @@ const ShortcutsBlob = require('./shortcuts_blob');
         case 'projects:issues:new':
         case 'projects:issues:edit':
           shortcut_handler = new ShortcutsNavigation();
-          new gl.GLForm($('.issue-form'));
+          new gl.GLForm($('.issue-form'), true);
           new IssuableForm($('.issue-form'));
           new LabelsSelect();
           new MilestoneSelect();
           new gl.IssuableTemplateSelectors();
           break;
-        case 'projects:merge_requests:new':
-        case 'projects:merge_requests:new_diffs':
+        case 'projects:merge_requests:creations:new':
+          const mrNewCompareNode = document.querySelector('.js-merge-request-new-compare');
+          if (mrNewCompareNode) {
+            new Compare({
+              targetProjectUrl: mrNewCompareNode.dataset.targetProjectUrl,
+              sourceBranchUrl: mrNewCompareNode.dataset.sourceBranchUrl,
+              targetBranchUrl: mrNewCompareNode.dataset.targetBranchUrl,
+            });
+          } else {
+            const mrNewSubmitNode = document.querySelector('.js-merge-request-new-submit');
+            new MergeRequest({
+              action: mrNewSubmitNode.dataset.mrSubmitAction,
+            });
+          }
+        case 'projects:merge_requests:creations:diffs':
         case 'projects:merge_requests:edit':
           new gl.Diff();
           shortcut_handler = new ShortcutsNavigation();
-          new gl.GLForm($('.merge-request-form'));
+          new gl.GLForm($('.merge-request-form'), true);
           new IssuableForm($('.merge-request-form'));
           new LabelsSelect();
           new MilestoneSelect();
@@ -215,29 +271,44 @@ const ShortcutsBlob = require('./shortcuts_blob');
           break;
         case 'projects:tags:new':
           new ZenMode();
-          new gl.GLForm($('.tag-form'));
-          new RefSelectDropdown($('.js-branch-select'), window.gl.availableRefs);
+          new gl.GLForm($('.tag-form'), true);
+          new RefSelectDropdown($('.js-branch-select'));
+          break;
+        case 'projects:snippets:show':
+          initNotes();
+          break;
+        case 'projects:snippets:new':
+        case 'projects:snippets:edit':
+        case 'projects:snippets:create':
+        case 'projects:snippets:update':
+          new gl.GLForm($('.snippet-form'), true);
+          break;
+        case 'snippets:new':
+        case 'snippets:edit':
+        case 'snippets:create':
+        case 'snippets:update':
+          new gl.GLForm($('.snippet-form'), false);
           break;
         case 'projects:releases:edit':
           new ZenMode();
-          new gl.GLForm($('.release-form'));
+          new gl.GLForm($('.release-form'), true);
           break;
         case 'projects:merge_requests:show':
           new gl.Diff();
           shortcut_handler = new ShortcutsIssuable(true);
           new ZenMode();
-          break;
-        case "projects:merge_requests:diffs":
-          new gl.Diff();
-          new ZenMode();
+
+          initIssuableSidebar();
+          initNotes();
+
+          const mrShowNode = document.querySelector('.merge-request');
+          window.mergeRequest = new MergeRequest({
+            action: mrShowNode.dataset.mrAction,
+          });
           break;
         case 'dashboard:activity':
           new gl.Activities();
           break;
-        case 'dashboard:issues':
-        case 'dashboard:merge_requests':
-          new UsersSelect();
-          break;
         case 'projects:commit:show':
           new Commit();
           new gl.Diff();
@@ -246,15 +317,24 @@ const ShortcutsBlob = require('./shortcuts_blob');
           new MiniPipelineGraph({
             container: '.js-commit-pipeline-graph',
           }).bindEvents();
+          initNotes();
+          $('.commit-info.branches').load(document.querySelector('.js-commit-box').dataset.commitPath);
           break;
         case 'projects:commit:pipelines':
           new MiniPipelineGraph({
             container: '.js-commit-pipeline-graph',
           }).bindEvents();
+          $('.commit-info.branches').load(document.querySelector('.js-commit-box').dataset.commitPath);
           break;
-        case 'projects:commits:show':
         case 'projects:activity':
+          new gl.Activities();
+          shortcut_handler = new ShortcutsNavigation();
+          break;
+        case 'projects:commits:show':
+          CommitsList.init(document.querySelector('.js-project-commits-show').dataset.commitsLimit);
+          new gl.Activities();
           shortcut_handler = new ShortcutsNavigation();
+          GpgBadges.fetch();
           break;
         case 'projects:show':
           shortcut_handler = new ShortcutsNavigation();
@@ -266,6 +346,15 @@ const ShortcutsBlob = require('./shortcuts_blob');
             new BlobViewer();
           }
           break;
+        case 'projects:edit':
+          setupProjectEdit();
+          break;
+        case 'projects:imports:show':
+          new ProjectImport();
+          break;
+        case 'projects:pipelines:new':
+          new NewBranchForm($('.js-new-pipeline-form'));
+          break;
         case 'projects:pipelines:builds':
         case 'projects:pipelines:failures':
         case 'projects:pipelines:show':
@@ -296,7 +385,7 @@ const ShortcutsBlob = require('./shortcuts_blob');
           new gl.Members();
           new UsersSelect();
           break;
-        case 'projects:members:show':
+        case 'projects:project_members:index':
           new gl.MemberExpirationDate('.js-access-expiration-date-groups');
           new GroupsSelect();
           new gl.MemberExpirationDate();
@@ -319,25 +408,25 @@ const ShortcutsBlob = require('./shortcuts_blob');
           shortcut_handler = new ShortcutsNavigation();
           new TreeView();
           new BlobViewer();
-          gl.TargetBranchDropDown.bootstrap();
+          new NewCommitForm($('.js-create-dir-form'));
+          $('#tree-slider').waitForImages(function() {
+            gl.utils.ajaxGet(document.querySelector('.js-tree-content').dataset.logsPath);
+          });
           break;
         case 'projects:find_file:show':
+          const findElement = document.querySelector('.js-file-finder');
+          const projectFindFile = new ProjectFindFile($(".file-finder-holder"), {
+            url: findElement.dataset.fileFindUrl,
+            treeUrl: findElement.dataset.findTreeUrl,
+            blobUrlTemplate: findElement.dataset.blobUrlTemplate,
+          });
+          new ShortcutsFindFile(projectFindFile);
           shortcut_handler = true;
           break;
-        case 'projects:blob:new':
-          gl.TargetBranchDropDown.bootstrap();
-          break;
-        case 'projects:blob:create':
-          gl.TargetBranchDropDown.bootstrap();
-          break;
         case 'projects:blob:show':
           new BlobViewer();
-          gl.TargetBranchDropDown.bootstrap();
           initBlob();
           break;
-        case 'projects:blob:edit':
-          gl.TargetBranchDropDown.bootstrap();
-          break;
         case 'projects:blame:show':
           initBlob();
           break;
@@ -347,10 +436,20 @@ const ShortcutsBlob = require('./shortcuts_blob');
         case 'projects:labels:edit':
           new Labels();
           break;
+        case 'groups:labels:index':
         case 'projects:labels:index':
           if ($('.prioritized-labels').length) {
             new gl.LabelManager();
           }
+          $('.label-subscription').each((i, el) => {
+            const $el = $(el);
+
+            if ($el.find('.dropdown-group-label').length) {
+              new gl.GroupLabelSubscription($el);
+            } else {
+              new gl.ProjectLabelSubscription($el);
+            }
+          });
           break;
         case 'projects:network:show':
           // Ensure we don't create a particular shortcut handler here. This is
@@ -361,26 +460,25 @@ const ShortcutsBlob = require('./shortcuts_blob');
           new ProjectFork();
           break;
         case 'projects:artifacts:browse':
+          new ShortcutsNavigation();
           new BuildArtifacts();
           break;
         case 'projects:artifacts:file':
+          new ShortcutsNavigation();
           new BlobViewer();
           break;
         case 'help:index':
-          gl.VersionCheckImage.bindErrorEvent($('img.js-version-status-badge'));
+          VersionCheckImage.bindErrorEvent($('img.js-version-status-badge'));
           break;
         case 'search:show':
           new Search();
           break;
-        case 'projects:repository:show':
-          // Initialize Protected Branch Settings
-          new gl.ProtectedBranchCreate();
-          new gl.ProtectedBranchEditList();
-          // Initialize Protected Tag Settings
-          new ProtectedTagCreate();
-          new ProtectedTagEditList();
+        case 'projects:settings:repository:show':
+          // Initialize expandable settings panels
+          initSettingsPanels();
           break;
-        case 'projects:ci_cd:show':
+        case 'projects:settings:ci_cd:show':
+        case 'groups:settings:ci_cd:show':
           new gl.ProjectVariables();
           break;
         case 'ci:lints:create':
@@ -390,15 +488,23 @@ const ShortcutsBlob = require('./shortcuts_blob');
         case 'users:show':
           new UserCallout();
           break;
+        case 'admin:conversational_development_index:show':
+          new UserCallout();
+          break;
         case 'snippets:show':
           new LineHighlighter();
           new BlobViewer();
+          initNotes();
           break;
         case 'import:fogbugz:new_user_map':
           new UsersSelect();
           break;
+        case 'profiles:personal_access_tokens:index':
+        case 'admin:impersonation_tokens:index':
+          new gl.DueDateSelectors();
+          break;
       }
-      switch (path.first()) {
+      switch (path[0]) {
         case 'sessions':
         case 'omniauth_callbacks':
           if (!gon.u2f) break;
@@ -414,7 +520,7 @@ const ShortcutsBlob = require('./shortcuts_blob');
           new Admin();
           switch (path[1]) {
             case 'cohorts':
-              new gl.UsagePing();
+              new UsagePing();
               break;
             case 'groups':
               new UsersSelect();
@@ -466,10 +572,11 @@ const ShortcutsBlob = require('./shortcuts_blob');
               new NotificationsDropdown();
               break;
             case 'wikis':
-              new gl.Wikis();
+              new Wikis();
               shortcut_handler = new ShortcutsWiki();
               new ZenMode();
-              new gl.GLForm($('.wiki-form'));
+              new gl.GLForm($('.wiki-form'), true);
+              new Sidebar();
               break;
             case 'snippets':
               shortcut_handler = new ShortcutsNavigation();
@@ -493,11 +600,22 @@ const ShortcutsBlob = require('./shortcuts_blob');
             case 'protected_branches':
               shortcut_handler = new ShortcutsNavigation();
           }
+          break;
+        case 'users':
+          const action = path[1];
+          import(/* webpackChunkName: 'user_profile' */ './users')
+            .then(user => user.default(action))
+            .catch(() => {});
+          break;
       }
       // If we haven't installed a custom shortcut handler, install the default one
       if (!shortcut_handler) {
         new Shortcuts();
       }
+
+      if (document.querySelector('#peek')) {
+        new PerformanceBar({ container: '#peek' });
+      }
     };
     Dispatcher.prototype.initSearch = function() {
@@ -515,4 +633,8 @@ const ShortcutsBlob = require('./shortcuts_blob');
     return Dispatcher;
   })();
+
+  $(function() {
+    new Dispatcher();
+  });
 }).call(window);

app/assets/javascripts/droplab/keyboard.js

@@ -8,7 +8,7 @@ const Keyboard = function () {
   var isUpArrow = false;
   var isDownArrow = false;
   var removeHighlight = function removeHighlight(list) {
-    var itemElements = Array.prototype.slice.call(list.list.querySelectorAll('li:not(.divider)'), 0);
+    var itemElements = Array.prototype.slice.call(list.list.querySelectorAll('li:not(.divider):not(.hidden)'), 0);
     var listItems = [];
     for(var i = 0; i < itemElements.length; i++) {
       var listItem = itemElements[i];

app/assets/javascripts/droplab/plugins/ajax.js

 /* eslint-disable */
+import AjaxCache from '~/lib/utils/ajax_cache';
+
 const Ajax = {
-  _loadUrlData: function _loadUrlData(url) {
-    var self = this;
-    return new Promise(function(resolve, reject) {
-      var xhr = new XMLHttpRequest;
-      xhr.open('GET', url, true);
-      xhr.onreadystatechange = function () {
-        if(xhr.readyState === XMLHttpRequest.DONE) {
-          if (xhr.status === 200) {
-            var data = JSON.parse(xhr.responseText);
-            self.cache[url] = data;
-            return resolve(data);
-          } else {
-            return reject([xhr.responseText, xhr.status]);
-          }
-        }
-      };
-      xhr.send();
-    });
-  },
   _loadData: function _loadData(data, config, self) {
     if (config.loadingTemplate) {
       var dataLoadingTemplate = self.hook.list.list.querySelector('[data-loading-template]');
@@ -28,10 +11,19 @@ const Ajax = {
     if (!self.destroyed) self.hook.list[config.method].call(self.hook.list, data);
   },
+  preprocessing: function preprocessing(config, data) {
+    let results = data;
+
+    if (config.preprocessing && !data.preprocessed) {
+      results = config.preprocessing(data);
+      AjaxCache.override(config.endpoint, results);
+    }
+
+    return results;
+  },
   init: function init(hook) {
     var self = this;
     self.destroyed = false;
-    self.cache = self.cache || {};
     var config = hook.config.Ajax;
     this.hook = hook;
     if (!config || !config.endpoint || !config.method) {
@@ -48,14 +40,11 @@ const Ajax = {
       this.listTemplate = dynamicList.outerHTML;
       dynamicList.outerHTML = loadingTemplate.outerHTML;
     }
-    if (self.cache[config.endpoint]) {
-      self._loadData(self.cache[config.endpoint], config, self);
-    } else {
-      this._loadUrlData(config.endpoint)
-        .then(function(d) {
-          self._loadData(d, config, self);
-        }, config.onError).catch(config.onError);
-    }
+
+    return AjaxCache.retrieve(config.endpoint)
+      .then(self.preprocessing.bind(null, config))
+      .then((data) => self._loadData(data, config, self))
+      .catch(config.onError);
   },
   destroy: function() {
     this.destroyed = true;

app/assets/javascripts/droplab/plugins/ajax_filter.js

 /* eslint-disable */
+import AjaxCache from '../../lib/utils/ajax_cache';
 const AjaxFilter = {
   init: function(hook) {
@@ -58,50 +59,27 @@ const AjaxFilter = {
     this.loading = true;
     var params = config.params || {};
     params[config.searchKey] = searchValue;
-    var self = this;
-    self.cache = self.cache || {};
     var url = config.endpoint + this.buildParams(params);
-    var urlCachedData = self.cache[url];
-    if (urlCachedData) {
-      self._loadData(urlCachedData, config, self);
-    } else {
-      this._loadUrlData(url)
-        .then(function(data) {
-          self._loadData(data, config, self);
-        }, config.onError).catch(config.onError);
-    }
-  },
-
-  _loadUrlData: function _loadUrlData(url) {
-    var self = this;
-    return new Promise(function(resolve, reject) {
-      var xhr = new XMLHttpRequest;
-      xhr.open('GET', url, true);
-      xhr.onreadystatechange = function () {
-        if(xhr.readyState === XMLHttpRequest.DONE) {
-          if (xhr.status === 200) {
-            var data = JSON.parse(xhr.responseText);
-            self.cache[url] = data;
-            return resolve(data);
-          } else {
-            return reject([xhr.responseText, xhr.status]);
-          }
+    return AjaxCache.retrieve(url)
+      .then((data) => {
+        this._loadData(data, config);
+        if (config.onLoadingFinished) {
+          config.onLoadingFinished(data);
         }
-      };
-      xhr.send();
-    });
+      })
+      .catch(config.onError);
   },
-  _loadData: function _loadData(data, config, self) {
-    const list = self.hook.list;
+  _loadData(data, config) {
+    const list = this.hook.list;
     if (config.loadingTemplate && list.data === undefined ||
       list.data.length === 0) {
       const dataLoadingTemplate = list.list.querySelector('[data-loading-template]');
       if (dataLoadingTemplate) {
-        dataLoadingTemplate.outerHTML = self.listTemplate;
+        dataLoadingTemplate.outerHTML = this.listTemplate;
       }
     }
-    if (!self.destroyed) {
+    if (!this.destroyed) {
       var hookListChildren = list.list.children;
       var onlyDynamicList = hookListChildren.length === 1 && hookListChildren[0].hasAttribute('data-dynamic');
       if (onlyDynamicList && data.length === 0) {
@@ -109,7 +87,7 @@ const AjaxFilter = {
       }
       list.setData.call(list, data);
     }
-    self.notLoading();
+    this.notLoading();
     list.currentIndex = 0;
   },

app/assets/javascripts/dropzone_input.js

 /* eslint-disable func-names, space-before-function-paren, wrap-iife, max-len, one-var, no-var, one-var-declaration-per-line, no-unused-vars, camelcase, quotes, no-useless-concat, prefer-template, quote-props, comma-dangle, object-shorthand, consistent-return, prefer-arrow-callback */
 /* global Dropzone */
-
-require('./preview_markdown');
+import _ from 'underscore';
+import './preview_markdown';
 window.DropzoneInput = (function() {
   function DropzoneInput(form) {
-    var updateAttachingMessage, $attachingFileMessage, $mdArea, $attachButton, $cancelButton, $retryLink, $uploadingErrorContainer, $uploadingErrorMessage, $uploadProgress, $uploadingProgressContainer, appendToTextArea, btnAlert, child, closeAlertMessage, closeSpinner, divHover, divSpinner, dropzone, $formDropzone, formTextarea, getFilename, handlePaste, iconPaperclip, iconSpinner, insertToTextArea, isImage, maxFileSize, pasteText, uploadsPath, showError, showSpinner, uploadFile;
-    Dropzone.autoDiscover = false;
-    divHover = '<div class="div-dropzone-hover"></div>';
-    iconPaperclip = '<i class="fa fa-paperclip div-dropzone-icon"></i>';
-    $attachButton = form.find('.button-attach-file');
-    $attachingFileMessage = form.find('.attaching-file-message');
-    $cancelButton = form.find('.button-cancel-uploading-files');
-    $retryLink = form.find('.retry-uploading-link');
-    $uploadProgress = form.find('.uploading-progress');
-    $uploadingErrorContainer = form.find('.uploading-error-container');
-    $uploadingErrorMessage = form.find('.uploading-error-message');
-    $uploadingProgressContainer = form.find('.uploading-progress-container');
-    uploadsPath = window.uploads_path || null;
-    maxFileSize = gon.max_file_size || 10;
-    formTextarea = form.find('.js-gfm-input');
+    const divHover = '<div class="div-dropzone-hover"></div>';
+    const iconPaperclip = '<i class="fa fa-paperclip div-dropzone-icon"></i>';
+    const $attachButton = form.find('.button-attach-file');
+    const $attachingFileMessage = form.find('.attaching-file-message');
+    const $cancelButton = form.find('.button-cancel-uploading-files');
+    const $retryLink = form.find('.retry-uploading-link');
+    const $uploadProgress = form.find('.uploading-progress');
+    const $uploadingErrorContainer = form.find('.uploading-error-container');
+    const $uploadingErrorMessage = form.find('.uploading-error-message');
+    const $uploadingProgressContainer = form.find('.uploading-progress-container');
+    const uploadsPath = window.uploads_path || null;
+    const maxFileSize = gon.max_file_size || 10;
+    const formTextarea = form.find('.js-gfm-input');
+    let handlePaste;
+    let pasteText;
+    let addFileToForm;
+    let updateAttachingMessage;
+    let isImage;
+    let getFilename;
+    let uploadFile;
+
     formTextarea.wrap('<div class="div-dropzone"></div>');
     formTextarea.on('paste', (function(_this) {
       return function(event) {
@@ -28,16 +34,16 @@ window.DropzoneInput = (function() {
     })(this));
     // Add dropzone area to the form.
-    $mdArea = formTextarea.closest('.md-area');
+    const $mdArea = formTextarea.closest('.md-area');
     form.setupMarkdownPreview();
-    $formDropzone = form.find('.div-dropzone');
+    const $formDropzone = form.find('.div-dropzone');
     $formDropzone.parent().addClass('div-dropzone-wrapper');
     $formDropzone.append(divHover);
     $formDropzone.find('.div-dropzone-hover').append(iconPaperclip);
     if (!uploadsPath) return;
-    dropzone = $formDropzone.dropzone({
+    const dropzone = $formDropzone.dropzone({
       url: uploadsPath,
       dictDefaultMessage: '',
       clickable: true,
@@ -71,6 +77,7 @@ window.DropzoneInput = (function() {
         pasteText(response.link.markdown, shouldPad);
         // Show 'Attach a file' link only when all files have been uploaded.
         if (!processingFileCount) $attachButton.removeClass('hide');
+        addFileToForm(response.link.url);
       },
       error: function(file, errorMessage = 'Attaching the file failed.', xhr) {
         // If 'error' event is fired by dropzone, the second parameter is error message.
@@ -116,7 +123,7 @@ window.DropzoneInput = (function() {
       }
     });
-    child = $(dropzone[0]).children('textarea');
+    const child = $(dropzone[0]).children('textarea');
     // removeAllFiles(true) stops uploading files (if any)
     // and remove them from dropzone files queue.
@@ -194,9 +201,14 @@ window.DropzoneInput = (function() {
       $(child).val(beforeSelection + formattedText + afterSelection);
       textarea.setSelectionRange(caretStart + formattedText.length, caretEnd + formattedText.length);
       textarea.style.height = `${textarea.scrollHeight}px`;
+      formTextarea.get(0).dispatchEvent(new Event('input'));
       return formTextarea.trigger('input');
     };
+    addFileToForm = function(path) {
+      $(form).append('<input type="hidden" name="files[]" value="' + _.escape(path) + '">');
+    };
+
     getFilename = function(e) {
       var value;
       if (window.clipboardData && window.clipboardData.getData) {
@@ -205,7 +217,36 @@ window.DropzoneInput = (function() {
         value = e.clipboardData.getData('text/plain');
       }
       value = value.split("\r");
-      return value.first();
+      return value[0];
+    };
+
+    const showSpinner = function(e) {
+      return $uploadingProgressContainer.removeClass('hide');
+    };
+
+    const closeSpinner = function() {
+      return $uploadingProgressContainer.addClass('hide');
+    };
+
+    const showError = function(message) {
+      $uploadingErrorContainer.removeClass('hide');
+      $uploadingErrorMessage.html(message);
+    };
+
+    const closeAlertMessage = function() {
+      return form.find('.div-dropzone-alert').alert('close');
+    };
+
+    const insertToTextArea = function(filename, url) {
+      return $(child).val(function(index, val) {
+        return val.replace(`{{${filename}}}`, url);
+      });
+    };
+
+    const appendToTextArea = function(url) {
+      return $(child).val(function(index, val) {
+        return val + url + "\n";
+      });
     };
     uploadFile = function(item, filename) {
@@ -256,31 +297,6 @@ window.DropzoneInput = (function() {
       messageContainer.text(attachingMessage);
     };
-    insertToTextArea = function(filename, url) {
-      return $(child).val(function(index, val) {
-        return val.replace(`{{${filename}}}`, url);
-      });
-    };
-
-    appendToTextArea = function(url) {
-      return $(child).val(function(index, val) {
-        return val + url + "\n";
-      });
-    };
-
-    showSpinner = function(e) {
-      return $uploadingProgressContainer.removeClass('hide');
-    };
-
-    closeSpinner = function() {
-      return $uploadingProgressContainer.addClass('hide');
-    };
-
-    showError = function(message) {
-      $uploadingErrorContainer.removeClass('hide');
-      $uploadingErrorMessage.html(message);
-    };
-
     form.find('.markdown-selector').click(function(e) {
       e.preventDefault();
       $(this).closest('.gfm-form').find('.div-dropzone').click();

app/assets/javascripts/due_date_select.js

@@ -2,6 +2,8 @@
 /* global dateFormat */
 /* global Pikaday */
+import DateFix from './lib/utils/datefix';
+
 class DueDateSelect {
   constructor({ $dropdown, $loading } = {}) {
     const $dropdownParent = $dropdown.closest('.dropdown');
@@ -43,14 +45,13 @@ class DueDateSelect {
   initDatePicker() {
     const $dueDateInput = $(`input[name='${this.fieldName}']`);
-
+    const dateFix = DateFix.dashedFix($dueDateInput.val());
     const calendar = new Pikaday({
       field: $dueDateInput.get(0),
       theme: 'gitlab-theme',
       format: 'yyyy-mm-dd',
       onSelect: (dateText) => {
         const formattedDate = dateFormat(new Date(dateText), 'yyyy-mm-dd');
-
         $dueDateInput.val(formattedDate);
         if (this.$dropdown.hasClass('js-issue-boards-due-date')) {
@@ -62,7 +63,7 @@ class DueDateSelect {
       }
     });
-    calendar.setDate(new Date($dueDateInput.val()));
+    calendar.setDate(dateFix);
     this.$datePicker.append(calendar.el);
     this.$datePicker.data('pikaday', calendar);
   }
@@ -168,6 +169,7 @@ class DueDateSelectors {
   initMilestoneDatePicker() {
     $('.datepicker').each(function() {
       const $datePicker = $(this);
+      const dateFix = DateFix.dashedFix($datePicker.val());
       const calendar = new Pikaday({
         field: $datePicker.get(0),
         theme: 'gitlab-theme animate-picker',
@@ -177,7 +179,8 @@ class DueDateSelectors {
           $datePicker.val(dateFormat(new Date(dateText), 'yyyy-mm-dd'));
         }
       });
-      calendar.setDate(new Date($datePicker.val()));
+
+      calendar.setDate(dateFix);
       $datePicker.data('pikaday', calendar);
     });

app/assets/javascripts/emoji/index.js

+import _ from 'underscore';
+import emojiMap from 'emojis/digests.json';
+import emojiAliases from 'emojis/aliases.json';
+
+export const validEmojiNames = [...Object.keys(emojiMap), ...Object.keys(emojiAliases)];
+
+export function normalizeEmojiName(name) {
+  return Object.prototype.hasOwnProperty.call(emojiAliases, name) ? emojiAliases[name] : name;
+}
+
+export function isEmojiNameValid(name) {
+  return validEmojiNames.indexOf(name) >= 0;
+}
+
+export function filterEmojiNames(filter) {
+  const match = filter.toLowerCase();
+  return validEmojiNames.filter(name => name.indexOf(match) >= 0);
+}
+
+export function filterEmojiNamesByAlias(filter) {
+  return _.uniq(filterEmojiNames(filter).map(name => normalizeEmojiName(name)));
+}
+
+let emojiCategoryMap;
+export function getEmojiCategoryMap() {
+  if (!emojiCategoryMap) {
+    emojiCategoryMap = {
+      activity: [],
+      people: [],
+      nature: [],
+      food: [],
+      travel: [],
+      objects: [],
+      symbols: [],
+      flags: [],
+    };
+    Object.keys(emojiMap).forEach((name) => {
+      const emoji = emojiMap[name];
+      if (emojiCategoryMap[emoji.category]) {
+        emojiCategoryMap[emoji.category].push(name);
+      }
+    });
+  }
+  return emojiCategoryMap;
+}
+
+export function getEmojiInfo(query) {
+  let name = normalizeEmojiName(query);
+  let emojiInfo = emojiMap[name];
+
+  // Fallback to question mark for unknown emojis
+  if (!emojiInfo) {
+    name = 'grey_question';
+    emojiInfo = emojiMap[name];
+  }
+
+  return { ...emojiInfo, name };
+}
+
+export function emojiFallbackImageSrc(inputName) {
+  const { name, digest } = getEmojiInfo(inputName);
+  return `${gon.asset_host || ''}${gon.relative_url_root || ''}/assets/emoji/${name}-${digest}.png`;
+}
+
+export function emojiImageTag(name, src) {
+  return `<img class="emoji" title=":${name}:" alt=":${name}:" src="${src}" width="20" height="20" align="absmiddle" />`;
+}
+
+export function glEmojiTag(inputName, options) {
+  const opts = { sprite: false, forceFallback: false, ...options };
+  const { name, ...emojiInfo } = getEmojiInfo(inputName);
+
+  const fallbackImageSrc = emojiFallbackImageSrc(name);
+  const fallbackSpriteClass = `emoji-${name}`;
+
+  const classList = [];
+  if (opts.forceFallback && opts.sprite) {
+    classList.push('emoji-icon');
+    classList.push(fallbackSpriteClass);
+  }
+  const classAttribute = classList.length > 0 ? `class="${classList.join(' ')}"` : '';
+  const fallbackSpriteAttribute = opts.sprite ? `data-fallback-sprite-class="${fallbackSpriteClass}"` : '';
+  let contents = emojiInfo.moji;
+  if (opts.forceFallback && !opts.sprite) {
+    contents = emojiImageTag(name, fallbackImageSrc);
+  }
+
+  return `
+    <gl-emoji
+      ${classAttribute}
+      data-name="${name}"
+      data-fallback-src="${fallbackImageSrc}"
+      ${fallbackSpriteAttribute}
+      data-unicode-version="${emojiInfo.unicodeVersion}"
+      title="${emojiInfo.description}"
+    >
+      ${contents}
+    </gl-emoji>
+  `;
+}

app/assets/javascripts/emoji/support/index.js

+import isEmojiUnicodeSupported from './is_emoji_unicode_supported';
+import getUnicodeSupportMap from './unicode_support_map';
+
+// cache browser support map between calls
+let browserUnicodeSupportMap;
+
+export default function isEmojiUnicodeSupportedByBrowser(emojiUnicode, unicodeVersion) {
+  browserUnicodeSupportMap = browserUnicodeSupportMap || getUnicodeSupportMap();
+  return isEmojiUnicodeSupported(browserUnicodeSupportMap, emojiUnicode, unicodeVersion);
+}

app/assets/javascripts/behaviors/gl_emoji/is_emoji_unicode_supported.js → app/assets/javascripts/emoji/support/is_emoji_unicode_supported.js

@@ -28,7 +28,8 @@ function isSkinToneComboEmoji(emojiUnicode) {
 // doesn't support the skin tone versions of horse racing
 const horseRacingCodePoint = 127943;// parseInt('1F3C7', 16)
 function isHorceRacingSkinToneComboEmoji(emojiUnicode) {
-  return Array.from(emojiUnicode)[0].codePointAt(0) === horseRacingCodePoint &&
+  const firstCharacter = Array.from(emojiUnicode)[0];
+  return firstCharacter && firstCharacter.codePointAt(0) === horseRacingCodePoint &&
     isSkinToneComboEmoji(emojiUnicode);
 }
@@ -110,7 +111,7 @@ function isEmojiUnicodeSupported(unicodeSupportMap = {}, emojiUnicode, unicodeVe
 }
 export {
-  isEmojiUnicodeSupported,
+  isEmojiUnicodeSupported as default,
   isFlagEmoji,
   isKeycapEmoji,
   isSkinToneComboEmoji,

app/assets/javascripts/behaviors/gl_emoji/unicode_support_map.js → app/assets/javascripts/emoji/support/unicode_support_map.js

@@ -140,7 +140,7 @@ function generateUnicodeSupportMap(testMap) {
   return resultMap;
 }
-function getUnicodeSupportMap() {
+export default function getUnicodeSupportMap() {
   let unicodeSupportMap;
   let userAgentFromCache;
@@ -165,8 +165,3 @@ function getUnicodeSupportMap() {
   return unicodeSupportMap;
 }
-
-export {
-  getUnicodeSupportMap,
-  generateUnicodeSupportMap,
-};