Replaces underscore with

* Vanilla JS and somethimes lodash

app/assets/javascripts/ide/components/branches/search_list.vue

 <script>
 import { mapActions, mapState } from 'vuex';
-import _ from 'underscore';
+import { debounce } from 'lodash';
 import { GlLoadingIcon } from '@gitlab/ui';
 import Icon from '~/vue_shared/components/icon.vue';
 import Item from './item.vue';
@@ -39,7 +39,7 @@ export default {
     loadBranches() {
       this.fetchBranches({ search: this.search });
     },
-    searchBranches: _.debounce(function debounceSearch() {
+    searchBranches: debounce(function debounceSearch() {
       this.loadBranches();
     }, 250),
     focusSearch() {

app/assets/javascripts/ide/components/commit_sidebar/actions.vue

 <script>
-import _ from 'underscore';
+import { escape as esc } from 'lodash';
 import { mapState, mapGetters, createNamespacedHelpers } from 'vuex';
 import { sprintf, s__ } from '~/locale';
 import consts from '../../stores/modules/commit/constants';
@@ -22,7 +22,7 @@ export default {
     commitToCurrentBranchText() {
       return sprintf(
         s__('IDE|Commit to %{branchName} branch'),
-        { branchName: `<strong class="monospace">${_.escape(this.currentBranchId)}</strong>` },
+        { branchName: `<strong class="monospace">${esc(this.currentBranchId)}</strong>` },
         false,
       );
     },

app/assets/javascripts/ide/components/jobs/detail.vue

 <script>
 import { mapActions, mapState } from 'vuex';
-import _ from 'underscore';
+import { throttle } from 'lodash';
 import { __ } from '../../../locale';
 import tooltip from '../../../vue_shared/directives/tooltip';
 import Icon from '../../../vue_shared/components/icon.vue';
@@ -53,7 +53,7 @@ export default {
         this.$refs.buildTrace.scrollTo(0, 0);
       }
     },
-    scrollBuildLog: _.throttle(function buildLogScrollDebounce() {
+    scrollBuildLog: throttle(function buildLogScrollDebounce() {
       const { scrollTop } = this.$refs.buildTrace;
       const { offsetHeight, scrollHeight } = this.$refs.buildTrace;
 

app/assets/javascripts/ide/components/merge_requests/list.vue

 <script>
 import { mapActions, mapState } from 'vuex';
-import _ from 'underscore';
+import { debounce } from 'lodash';
 import { GlLoadingIcon } from '@gitlab/ui';
 import { __ } from '~/locale';
 import Icon from '~/vue_shared/components/icon.vue';
@@ -59,7 +59,7 @@ export default {
     loadMergeRequests() {
       this.fetchMergeRequests({ type: this.type, search: this.search });
     },
-    searchMergeRequests: _.debounce(function debounceSearch() {
+    searchMergeRequests: debounce(function debounceSearch() {
       this.loadMergeRequests();
     }, 250),
     onSearchFocus() {

app/assets/javascripts/ide/components/panes/collapsible_sidebar.vue

 <script>
 import { mapActions, mapState } from 'vuex';
-import _ from 'underscore';
 import tooltip from '~/vue_shared/directives/tooltip';
 import Icon from '~/vue_shared/components/icon.vue';
 import ResizablePanel from '../resizable_panel.vue';
@@ -55,7 +54,7 @@ export default {
       return this.extensionTabs.filter(tab => tab.show);
     },
     tabViews() {
-      return _.flatten(this.tabs.map(tab => tab.views));
+      return this.tabs.map(tab => tab.views).flat();
     },
     aliveTabViews() {
       return this.tabViews.filter(view => this.isAliveView(view.name));

app/assets/javascripts/ide/components/pipelines/list.vue

 <script>
 import { mapActions, mapGetters, mapState } from 'vuex';
-import _ from 'underscore';
+import { escape as esc } from 'lodash';
 import { GlLoadingIcon } from '@gitlab/ui';
 import { sprintf, __ } from '../../../locale';
 import Icon from '../../../vue_shared/components/icon.vue';
@@ -35,7 +35,7 @@ export default {
       return sprintf(
         __('You can test your .gitlab-ci.yml in %{linkStart}CI Lint%{linkEnd}.'),
         {
-          linkStart: `<a href="${_.escape(this.currentProject.web_url)}/-/ci/lint">`,
+          linkStart: `<a href="${esc(this.currentProject.web_url)}/-/ci/lint">`,
           linkEnd: '</a>',
         },
         false,

app/assets/javascripts/ide/components/preview/clientside.vue

 <script>
 import { mapActions, mapGetters, mapState } from 'vuex';
-import _ from 'underscore';
+import { isEmpty } from 'lodash';
 import { Manager } from 'smooshpack';
 import { listen } from 'codesandbox-api';
 import { GlLoadingIcon } from '@gitlab/ui';
@@ -78,7 +78,7 @@ export default {
       .then(() => this.initPreview());
   },
   beforeDestroy() {
-    if (!_.isEmpty(this.manager)) {
+    if (!isEmpty(this.manager)) {
       this.manager.listener();
     }
     this.manager = {};
@@ -125,7 +125,7 @@ export default {
       clearTimeout(this.timeout);
 
       this.timeout = setTimeout(() => {
-        if (_.isEmpty(this.manager)) {
+        if (isEmpty(this.manager)) {
           this.initPreview();
 
           return;

app/assets/javascripts/ide/index.js

 import Vue from 'vue';
 import { mapActions } from 'vuex';
-import _ from 'underscore';
 import Translate from '~/vue_shared/translate';
+import { identity } from 'lodash';
 import ide from './components/ide.vue';
 import store from './stores';
 import router from './ide_router';
@@ -31,7 +31,7 @@ Vue.use(Translate);
 export function initIde(el, options = {}) {
   if (!el) return null;
 
-  const { rootComponent = ide, extendStore = _.identity } = options;
+  const { rootComponent = ide, extendStore = identity } = options;
 
   return new Vue({
     el,

app/assets/javascripts/ide/lib/diff/controller.js

 import { Range } from 'monaco-editor';
-import { throttle } from 'underscore';
+import { throttle } from 'lodash';
 import DirtyDiffWorker from './diff_worker';
 import Disposable from '../common/disposable';
 

app/assets/javascripts/ide/lib/editor.js

-import _ from 'underscore';
+import { debounce } from 'lodash';
 import { editor as monacoEditor, KeyCode, KeyMod } from 'monaco-editor';
 import store from '../stores';
 import DecorationsController from './decorations/controller';
@@ -38,7 +38,7 @@ export default class Editor {
 
     setupThemes();
 
-    this.debouncedUpdate = _.debounce(() => {
+    this.debouncedUpdate = debounce(() => {
       this.updateDimensions();
     }, 200);
   }

app/assets/javascripts/ide/stores/actions.js

 import $ from 'jquery';
 import Vue from 'vue';
-import _ from 'underscore';
+import { escape as esc } from 'lodash';
 import { __, sprintf } from '~/locale';
 import { visitUrl } from '~/lib/utils/url_utility';
 import flash from '~/flash';
@@ -296,7 +296,7 @@ export const getBranchData = ({ commit, state }, { projectId, branchId, force =
                 sprintf(
                   __('Branch not loaded - %{branchId}'),
                   {
-                    branchId: `<strong>${_.escape(projectId)}/${_.escape(branchId)}</strong>`,
+                    branchId: `<strong>${esc(projectId)}/${esc(branchId)}</strong>`,
                   },
                   false,
                 ),

app/assets/javascripts/ide/stores/actions/project.js

-import _ from 'underscore';
+import { escape as esc } from 'lodash';
 import flash from '~/flash';
 import { __, sprintf } from '~/locale';
 import service from '../../services';
@@ -73,7 +73,7 @@ export const showBranchNotFoundError = ({ dispatch }, branchId) => {
     text: sprintf(
       __("Branch %{branchName} was not found in this project's repository."),
       {
-        branchName: `<strong>${_.escape(branchId)}</strong>`,
+        branchName: `<strong>${esc(branchId)}</strong>`,
       },
       false,
     ),
@@ -154,7 +154,7 @@ export const openBranch = ({ dispatch, state, getters }, { projectId, branchId,
             sprintf(
               __('An error occurred while getting files for - %{branchId}'),
               {
-                branchId: `<strong>${_.escape(projectId)}/${_.escape(branchId)}</strong>`,
+                branchId: `<strong>${esc(projectId)}/${esc(branchId)}</strong>`,
               },
               false,
             ),

app/assets/javascripts/ide/stores/actions/tree.js

-import _ from 'underscore';
+import { defer } from 'lodash';
 import { __ } from '../../../locale';
 import service from '../../services';
 import * as types from '../mutation_types';
@@ -71,7 +71,7 @@ export const getFiles = ({ state, commit, dispatch }, payload = {}) =>
 
           // Defer setting the directory data because this triggers some intense rendering.
           // The entries is all we need to load the file editor.
-          _.defer(() => dispatch('setDirectoryData', { projectId, branchId, treeList }));
+          defer(() => dispatch('setDirectoryData', { projectId, branchId, treeList }));
 
           resolve();
         })

spec/frontend/ide/components/branches/search_list_spec.js

@@ -9,6 +9,8 @@ import { branches } from '../../mock_data';
 const localVue = createLocalVue();
 localVue.use(Vuex);
 
+jest.mock('lodash/debounce', () => jest.fn);
+
 describe('IDE branches search list', () => {
   let wrapper;
   const fetchBranchesMock = jest.fn();