Replace underscore with lodash in the jobs components

This also uses native methods where possible

app/assets/javascripts/jobs/components/environments_block.vue

 <script>
-import _ from 'underscore';
+import { escape as esc, isEmpty } from 'lodash';
 import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import { sprintf, __ } from '../../locale';
 
@@ -43,7 +43,7 @@ export default {
           '%{startLink}%{name}%{endLink}',
           {
             startLink: `<a href="${this.deploymentStatus.environment.environment_path}" class="js-environment-link">`,
-            name: _.escape(this.deploymentStatus.environment.name),
+            name: esc(this.deploymentStatus.environment.name),
             endLink: '</a>',
           },
           false,
@@ -58,10 +58,10 @@ export default {
       return this.hasLastDeployment ? this.deploymentStatus.environment.last_deployment : {};
     },
     hasEnvironment() {
-      return !_.isEmpty(this.deploymentStatus.environment);
+      return !isEmpty(this.deploymentStatus.environment);
     },
     lastDeploymentPath() {
-      return !_.isEmpty(this.lastDeployment.deployable)
+      return !isEmpty(this.lastDeployment.deployable)
         ? this.lastDeployment.deployable.build_path
         : '';
     },
@@ -74,8 +74,8 @@ export default {
       }
 
       const { name, path } = this.deploymentCluster;
-      const escapedName = _.escape(name);
-      const escapedPath = _.escape(path);
+      const escapedName = esc(name);
+      const escapedPath = esc(path);
 
       if (!escapedPath) {
         return escapedName;

app/assets/javascripts/jobs/components/erased_block.vue

 <script>
-import _ from 'underscore';
+import { isEmpty } from 'lodash';
 import { GlLink } from '@gitlab/ui';
 import TimeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 
@@ -21,7 +21,7 @@ export default {
   },
   computed: {
     isErasedByUser() {
-      return !_.isEmpty(this.user);
+      return !isEmpty(this.user);
     },
   },
 };

app/assets/javascripts/jobs/components/job_app.vue

 <script>
-import _ from 'underscore';
+import { throttle, isEmpty } from 'lodash';
 import { mapGetters, mapState, mapActions } from 'vuex';
 import { GlLoadingIcon } from '@gitlab/ui';
 import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils';
@@ -125,7 +125,7 @@ export default {
     // Once the job log is loaded,
     // fetch the stages for the dropdown on the sidebar
     job(newVal, oldVal) {
-      if (_.isEmpty(oldVal) && !_.isEmpty(newVal.pipeline)) {
+      if (isEmpty(oldVal) && !isEmpty(newVal.pipeline)) {
         const stages = this.job.pipeline.details.stages || [];
 
         const defaultStage = stages.find(stage => stage && stage.name === this.selectedStage);
@@ -145,7 +145,7 @@ export default {
     },
   },
   created() {
-    this.throttled = _.throttle(this.toggleScrollButtons, 100);
+    this.throttled = throttle(this.toggleScrollButtons, 100);
 
     window.addEventListener('resize', this.onResize);
     window.addEventListener('scroll', this.updateScroll);

app/assets/javascripts/jobs/components/manual_variables_form.vue

 <script>
-import _ from 'underscore';
+import { uniqueId } from 'lodash';
 import { mapActions } from 'vuex';
 import { GlButton } from '@gitlab/ui';
 import { s__, sprintf } from '~/locale';
@@ -19,7 +19,9 @@ export default {
       validator(value) {
         return (
           value === null ||
-          (_.has(value, 'path') && _.has(value, 'method') && _.has(value, 'button_title'))
+          (Object.prototype.hasOwnProperty.call(value, 'path') &&
+            Object.prototype.hasOwnProperty.call(value, 'method') &&
+            Object.prototype.hasOwnProperty.call(value, 'button_title'))
         );
       },
     },
@@ -78,7 +80,7 @@ export default {
       const newVariable = {
         key: this.key,
         secret_value: this.secretValue,
-        id: _.uniqueId(),
+        id: uniqueId(),
       };
 
       this.variables.push(newVariable);

app/assets/javascripts/jobs/components/sidebar.vue

 <script>
-import _ from 'underscore';
+import { isEmpty } from 'lodash';
 import { mapActions, mapState } from 'vuex';
 import { GlLink, GlButton } from '@gitlab/ui';
 import { __, sprintf } from '~/locale';
@@ -84,10 +84,10 @@ export default {
       );
     },
     hasArtifact() {
-      return !_.isEmpty(this.job.artifact);
+      return !isEmpty(this.job.artifact);
     },
     hasTriggers() {
-      return !_.isEmpty(this.job.trigger);
+      return !isEmpty(this.job.trigger);
     },
     hasStages() {
       return (

app/assets/javascripts/jobs/components/stages_dropdown.vue

 <script>
-import _ from 'underscore';
+import { isEmpty } from 'lodash';
 import { GlLink } from '@gitlab/ui';
 import CiIcon from '~/vue_shared/components/ci_icon.vue';
 
@@ -24,7 +24,7 @@ export default {
   },
   computed: {
     hasRef() {
-      return !_.isEmpty(this.pipeline.ref);
+      return !isEmpty(this.pipeline.ref);
     },
     isTriggeredByMergeRequest() {
       return Boolean(this.pipeline.merge_request);

app/assets/javascripts/jobs/store/getters.js

-import _ from 'underscore';
+import { isEmpty, isString } from 'lodash';
 import { isScrolledToBottom } from '~/lib/utils/scroll_utils';
 
 export const headerTime = state => (state.job.started ? state.job.started : state.job.created_at);
@@ -7,15 +7,15 @@ export const hasUnmetPrerequisitesFailure = state =>
   state.job && state.job.failure_reason && state.job.failure_reason === 'unmet_prerequisites';
 
 export const shouldRenderCalloutMessage = state =>
-  !_.isEmpty(state.job.status) && !_.isEmpty(state.job.callout_message);
+  !isEmpty(state.job.status) && !isEmpty(state.job.callout_message);
 
 /**
  * When job has not started the key will be null
  * When job started the key will be a string with a date.
  */
-export const shouldRenderTriggeredLabel = state => _.isString(state.job.started);
+export const shouldRenderTriggeredLabel = state => isString(state.job.started);
 
-export const hasEnvironment = state => !_.isEmpty(state.job.deployment_status);
+export const hasEnvironment = state => !isEmpty(state.job.deployment_status);
 
 /**
  * Checks if it the job has trace.
@@ -23,7 +23,7 @@ export const hasEnvironment = state => !_.isEmpty(state.job.deployment_status);
  * @returns {Boolean}
  */
 export const hasTrace = state =>
-  state.job.has_trace || (!_.isEmpty(state.job.status) && state.job.status.group === 'running');
+  state.job.has_trace || (!isEmpty(state.job.status) && state.job.status.group === 'running');
 
 export const emptyStateIllustration = state =>
   (state.job && state.job.status && state.job.status.illustration) || {};
@@ -38,8 +38,8 @@ export const emptyStateAction = state =>
  * @returns {Boolean}
  */
 export const shouldRenderSharedRunnerLimitWarning = state =>
-  !_.isEmpty(state.job.runners) &&
-  !_.isEmpty(state.job.runners.quota) &&
+  !isEmpty(state.job.runners) &&
+  !isEmpty(state.job.runners.quota) &&
   state.job.runners.quota.used >= state.job.runners.quota.limit;
 
 export const isScrollingDown = state => isScrolledToBottom() && !state.isTraceComplete;