Add latest changes from gitlab-org/gitlab@13-2-stable-ee

17 files changed, 70 insertions, 152 deletions

diff --git a/app/assets/javascripts/jobs/components/commit_block.vue b/app/assets/javascripts/jobs/components/commit_block.vue
index 72a5ff01672..c4f180f200c 100644
--- a/app/assets/javascripts/jobs/components/commit_block.vue
+++ b/app/assets/javascripts/jobs/components/commit_block.vue
@@ -32,7 +32,7 @@ export default {
       block: !isLastBlock,
     }"
   >
-    <p class="append-bottom-5">
+    <p class="gl-mb-2">
       <span class="font-weight-bold">{{ __('Commit') }}</span>
 
       <gl-link :href="commit.commit_path" class="js-commit-sha commit-sha link-commit">
diff --git a/app/assets/javascripts/jobs/components/environments_block.vue b/app/assets/javascripts/jobs/components/environments_block.vue
index c34a3488dbd..c78738221f1 100644
--- a/app/assets/javascripts/jobs/components/environments_block.vue
+++ b/app/assets/javascripts/jobs/components/environments_block.vue
@@ -274,7 +274,7 @@ export default {
 };
 </script>
 <template>
-  <div class="prepend-top-default append-bottom-default js-environment-container">
+  <div class="gl-mt-3 gl-mb-3 js-environment-container">
     <div class="environment-information">
       <ci-icon :status="iconStatus" />
       <p class="inline gl-mb-0" v-html="environment"></p>
diff --git a/app/assets/javascripts/jobs/components/erased_block.vue b/app/assets/javascripts/jobs/components/erased_block.vue
index fc5e022f44a..a6d1b41c275 100644
--- a/app/assets/javascripts/jobs/components/erased_block.vue
+++ b/app/assets/javascripts/jobs/components/erased_block.vue
@@ -27,7 +27,7 @@ export default {
 };
 </script>
 <template>
-  <div class="prepend-top-default js-build-erased">
+  <div class="gl-mt-3 js-build-erased">
     <div class="erased alert alert-warning">
       <template v-if="isErasedByUser">
         {{ s__('Job|Job has been erased by') }}
diff --git a/app/assets/javascripts/jobs/components/job_app.vue b/app/assets/javascripts/jobs/components/job_app.vue
index 0783d1157be..f43a058b5f8 100644
--- a/app/assets/javascripts/jobs/components/job_app.vue
+++ b/app/assets/javascripts/jobs/components/job_app.vue
@@ -17,7 +17,7 @@ import UnmetPrerequisitesBlock from './unmet_prerequisites_block.vue';
 import Sidebar from './sidebar.vue';
 import { sprintf } from '~/locale';
 import delayedJobMixin from '../mixins/delayed_job_mixin';
-import { isNewJobLogActive } from '../store/utils';
+import Log from './log/log.vue';
 
 export default {
   name: 'JobPageApp',
@@ -28,7 +28,7 @@ export default {
     EnvironmentsBlock,
     ErasedBlock,
     Icon,
-    Log: () => (isNewJobLogActive() ? import('./log/log.vue') : import('./job_log.vue')),
+    Log,
     LogTopBar,
     StuckBlock,
     UnmetPrerequisitesBlock,
@@ -270,7 +270,7 @@ export default {
         <div
           v-if="job.archived"
           ref="sticky"
-          class="js-archived-job prepend-top-default archived-job"
+          class="js-archived-job gl-mt-3 archived-job"
           :class="{ 'sticky-top border-bottom-0': hasTrace }"
         >
           <icon name="lock" class="align-text-bottom" />
@@ -280,7 +280,7 @@ export default {
         <div
           v-if="hasTrace"
           class="build-trace-container position-relative"
-          :class="{ 'prepend-top-default': !job.archived }"
+          :class="{ 'gl-mt-3': !job.archived }"
         >
           <log-top-bar
             :class="{
diff --git a/app/assets/javascripts/jobs/components/job_log.vue b/app/assets/javascripts/jobs/components/job_log.vue
deleted file mode 100644
index 20888c0af42..00000000000
--- a/app/assets/javascripts/jobs/components/job_log.vue
+++ /dev/null
@@ -1,59 +0,0 @@
-<script>
-import { mapState, mapActions } from 'vuex';
-
-export default {
-  name: 'JobLog',
-  props: {
-    trace: {
-      type: String,
-      required: true,
-    },
-    isComplete: {
-      type: Boolean,
-      required: true,
-    },
-  },
-  computed: {
-    ...mapState(['isScrolledToBottomBeforeReceivingTrace']),
-  },
-  updated() {
-    this.$nextTick(() => {
-      this.handleScrollDown();
-    });
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.handleScrollDown();
-    });
-  },
-  methods: {
-    ...mapActions(['scrollBottom']),
-    /**
-     * The job log is sent in HTML, which means we need to use `v-html` to render it
-     * Using the updated hook with $nextTick is not enough to wait for the DOM to be updated
-     * in this case because it runs before `v-html` has finished running, since there's no
-     * Vue binding.
-     * In order to scroll the page down after `v-html` has finished, we need to use setTimeout
-     */
-    handleScrollDown() {
-      if (this.isScrolledToBottomBeforeReceivingTrace) {
-        setTimeout(() => {
-          this.scrollBottom();
-        }, 0);
-      }
-    },
-  },
-};
-</script>
-<template>
-  <pre class="js-build-trace build-trace qa-build-trace">
-    <code class="bash" v-html="trace">
-    </code>
-
-    <div v-if="!isComplete" class="js-log-animation build-loader-animation">
-      <div class="dot"></div>
-      <div class="dot"></div>
-      <div class="dot"></div>
-    </div>
-  </pre>
-</template>
diff --git a/app/assets/javascripts/jobs/components/job_log_controllers.vue b/app/assets/javascripts/jobs/components/job_log_controllers.vue
index bcec83a7aee..a68174d8e1d 100644
--- a/app/assets/javascripts/jobs/components/job_log_controllers.vue
+++ b/app/assets/javascripts/jobs/components/job_log_controllers.vue
@@ -77,7 +77,7 @@ export default {
         <gl-link
           v-if="rawPath"
           :href="rawPath"
-          class="js-raw-link text-plain text-underline prepend-left-5"
+          class="js-raw-link text-plain text-underline gl-ml-2"
           >{{ s__('Job|Complete Raw') }}</gl-link
         >
       </template>
diff --git a/app/assets/javascripts/jobs/components/log/collapsible_section.vue b/app/assets/javascripts/jobs/components/log/collapsible_section.vue
index 0c7b78a3da7..55cdfb691f4 100644
--- a/app/assets/javascripts/jobs/components/log/collapsible_section.vue
+++ b/app/assets/javascripts/jobs/components/log/collapsible_section.vue
@@ -3,7 +3,7 @@ import LogLine from './line.vue';
 import LogLineHeader from './line_header.vue';
 
 export default {
-  name: 'CollpasibleLogSection',
+  name: 'CollapsibleLogSection',
   components: {
     LogLine,
     LogLineHeader,
diff --git a/app/assets/javascripts/jobs/components/log/line.vue b/app/assets/javascripts/jobs/components/log/line.vue
index 33ee84bd4ee..48f669ae8ed 100644
--- a/app/assets/javascripts/jobs/components/log/line.vue
+++ b/app/assets/javascripts/jobs/components/log/line.vue
@@ -2,9 +2,7 @@
 import LineNumber from './line_number.vue';
 
 export default {
-  components: {
-    LineNumber,
-  },
+  functional: true,
   props: {
     line: {
       type: Object,
@@ -15,18 +13,28 @@ export default {
       required: true,
     },
   },
+  render(h, { props }) {
+    const { line, path } = props;
+
+    const chars = line.content.map(content => {
+      return h(
+        'span',
+        {
+          class: ['ws-pre-wrap', content.style],
+        },
+        content.text,
+      );
+    });
+
+    return h('div', { class: 'js-line log-line' }, [
+      h(LineNumber, {
+        props: {
+          lineNumber: line.lineNumber,
+          path,
+        },
+      }),
+      ...chars,
+    ]);
+  },
 };
 </script>
-
-<template>
-  <div class="js-line log-line">
-    <line-number :line-number="line.lineNumber" :path="path" />
-    <span
-      v-for="(content, i) in line.content"
-      :key="i"
-      :class="content.style"
-      class="ws-pre-wrap"
-      >{{ content.text }}</span
-    >
-  </div>
-</template>
diff --git a/app/assets/javascripts/jobs/components/log/line_number.vue b/app/assets/javascripts/jobs/components/log/line_number.vue
index ae96c32874b..7ca9154d2fe 100644
--- a/app/assets/javascripts/jobs/components/log/line_number.vue
+++ b/app/assets/javascripts/jobs/components/log/line_number.vue
@@ -1,10 +1,6 @@
 <script>
-import { GlLink } from '@gitlab/ui';
-
 export default {
-  components: {
-    GlLink,
-  },
+  functional: true,
   props: {
     lineNumber: {
       type: Number,
@@ -15,41 +11,24 @@ export default {
       required: true,
     },
   },
-  computed: {
-    /**
-     * Builds the url for each line number
-     *
-     * @returns {String}
-     */
-    buildLineNumber() {
-      return `${this.path}#${this.lineNumberId}`;
-    },
-    /**
-     * Array indexes start with 0, so we add 1
-     * to create the line number
-     *
-     * @returns {Number} the line number
-     */
-    parsedLineNumber() {
-      return this.lineNumber + 1;
-    },
+  render(h, { props }) {
+    const { lineNumber, path } = props;
 
-    /**
-     * Creates the anchor for each link
-     *
-     * @returns {String}
-     */
-    lineNumberId() {
-      return `L${this.parsedLineNumber}`;
-    },
+    const parsedLineNumber = lineNumber + 1;
+    const lineId = `L${parsedLineNumber}`;
+    const lineHref = `${path}#${lineId}`;
+
+    return h(
+      'a',
+      {
+        class: 'gl-link d-inline-block text-right line-number flex-shrink-0',
+        attrs: {
+          id: lineId,
+          href: lineHref,
+        },
+      },
+      parsedLineNumber,
+    );
   },
 };
 </script>
-<template>
-  <gl-link
-    :id="lineNumberId"
-    class="d-inline-block text-right line-number flex-shrink-0"
-    :href="buildLineNumber"
-    >{{ parsedLineNumber }}</gl-link
-  >
-</template>
diff --git a/app/assets/javascripts/jobs/components/log/log.vue b/app/assets/javascripts/jobs/components/log/log.vue
index f0bdbde0602..0134e5dafe8 100644
--- a/app/assets/javascripts/jobs/components/log/log.vue
+++ b/app/assets/javascripts/jobs/components/log/log.vue
@@ -1,11 +1,11 @@
 <script>
 import { mapState, mapActions } from 'vuex';
-import CollpasibleLogSection from './collapsible_section.vue';
+import CollapsibleLogSection from './collapsible_section.vue';
 import LogLine from './line.vue';
 
 export default {
   components: {
-    CollpasibleLogSection,
+    CollapsibleLogSection,
     LogLine,
   },
   computed: {
@@ -51,7 +51,7 @@ export default {
 <template>
   <code class="job-log d-block" data-qa-selector="job_log_content">
     <template v-for="(section, index) in trace">
-      <collpasible-log-section
+      <collapsible-log-section
         v-if="section.isHeader"
         :key="`collapsible-${index}`"
         :section="section"
diff --git a/app/assets/javascripts/jobs/components/manual_variables_form.vue b/app/assets/javascripts/jobs/components/manual_variables_form.vue
index d4aab5c7faf..d83c598dd48 100644
--- a/app/assets/javascripts/jobs/components/manual_variables_form.vue
+++ b/app/assets/javascripts/jobs/components/manual_variables_form.vue
@@ -112,7 +112,7 @@ export default {
       <div v-for="variable in variables" :key="variable.id" class="gl-responsive-table-row">
         <div class="table-section section-50">
           <div class="table-mobile-header" role="rowheader">{{ s__('Pipeline|Key') }}</div>
-          <div class="table-mobile-content append-right-10">
+          <div class="table-mobile-content gl-mr-3">
             <input
               :ref="`${$options.inputTypes.key}-${variable.id}`"
               v-model="variable.key"
@@ -124,7 +124,7 @@ export default {
 
         <div class="table-section section-50">
           <div class="table-mobile-header" role="rowheader">{{ s__('Pipeline|Value') }}</div>
-          <div class="table-mobile-content append-right-10">
+          <div class="table-mobile-content gl-mr-3">
             <input
               :ref="`${$options.inputTypes.value}-${variable.id}`"
               v-model="variable.secret_value"
@@ -149,7 +149,7 @@ export default {
       <div class="gl-responsive-table-row">
         <div class="table-section section-50">
           <div class="table-mobile-header" role="rowheader">{{ s__('Pipeline|Key') }}</div>
-          <div class="table-mobile-content append-right-10">
+          <div class="table-mobile-content gl-mr-3">
             <input
               ref="inputKey"
               v-model="key"
@@ -161,7 +161,7 @@ export default {
 
         <div class="table-section section-50">
           <div class="table-mobile-header" role="rowheader">{{ s__('Pipeline|Value') }}</div>
-          <div class="table-mobile-content append-right-10">
+          <div class="table-mobile-content gl-mr-3">
             <input
               ref="inputSecretValue"
               v-model="secretValue"
@@ -172,7 +172,7 @@ export default {
         </div>
       </div>
     </div>
-    <div class="d-flex prepend-top-default justify-content-center">
+    <div class="d-flex gl-mt-3 justify-content-center">
       <p class="text-muted" v-html="helpText"></p>
     </div>
     <div class="d-flex justify-content-center">
diff --git a/app/assets/javascripts/jobs/components/stuck_block.vue b/app/assets/javascripts/jobs/components/stuck_block.vue
index da01269a50c..b69e6f9686f 100644
--- a/app/assets/javascripts/jobs/components/stuck_block.vue
+++ b/app/assets/javascripts/jobs/components/stuck_block.vue
@@ -31,7 +31,7 @@ export default {
         s__(`This job is stuck because you don't have
   any active runners online or available with any of these tags assigned to them:`)
       }}
-      <span v-for="(tag, index) in tags" :key="index" class="badge badge-primary append-right-4">
+      <span v-for="(tag, index) in tags" :key="index" class="badge badge-primary gl-mr-2">
         {{ tag }}
       </span>
     </p>
diff --git a/app/assets/javascripts/jobs/components/trigger_block.vue b/app/assets/javascripts/jobs/components/trigger_block.vue
index 1a076249fe7..f55429ecdae 100644
--- a/app/assets/javascripts/jobs/components/trigger_block.vue
+++ b/app/assets/javascripts/jobs/components/trigger_block.vue
@@ -46,7 +46,7 @@ export default {
     <p
       v-if="trigger.short_token"
       class="js-short-token"
-      :class="{ 'append-bottom-5': hasVariables, 'gl-mb-0': !hasVariables }"
+      :class="{ 'gl-mb-2': hasVariables, 'gl-mb-0': !hasVariables }"
     >
       <span class="font-weight-bold">{{ __('Trigger token:') }}</span> {{ trigger.short_token }}
     </p>
diff --git a/app/assets/javascripts/jobs/store/actions.js b/app/assets/javascripts/jobs/store/actions.js
index 0ce8dfe4442..4bd8d6f58a6 100644
--- a/app/assets/javascripts/jobs/store/actions.js
+++ b/app/assets/javascripts/jobs/store/actions.js
@@ -195,7 +195,7 @@ export const receiveTraceError = ({ dispatch }) => {
   flash(__('An error occurred while fetching the job log.'));
 };
 /**
- * When the user clicks a collpasible line in the job
+ * When the user clicks a collapsible line in the job
  * log, we commit a mutation to update the state
  *
  * @param {Object} section
diff --git a/app/assets/javascripts/jobs/store/mutations.js b/app/assets/javascripts/jobs/store/mutations.js
index 6193d8d34ab..924b811d0d6 100644
--- a/app/assets/javascripts/jobs/store/mutations.js
+++ b/app/assets/javascripts/jobs/store/mutations.js
@@ -1,6 +1,6 @@
 import Vue from 'vue';
 import * as types from './mutation_types';
-import { logLinesParser, updateIncrementalTrace, isNewJobLogActive } from './utils';
+import { logLinesParser, updateIncrementalTrace } from './utils';
 
 export default {
   [types.SET_JOB_ENDPOINT](state, endpoint) {
@@ -25,22 +25,16 @@ export default {
     }
 
     if (log.append) {
-      if (isNewJobLogActive()) {
-        state.trace = log.lines ? updateIncrementalTrace(log.lines, state.trace) : state.trace;
-      } else {
-        state.trace += log.html;
-      }
+      state.trace = log.lines ? updateIncrementalTrace(log.lines, state.trace) : state.trace;
+
       state.traceSize += log.size;
     } else {
       // When the job still does not have a trace
       // the trace response will not have a defined
       // html or size. We keep the old value otherwise these
       // will be set to `null`
-      if (isNewJobLogActive()) {
-        state.trace = log.lines ? logLinesParser(log.lines) : state.trace;
-      } else {
-        state.trace = log.html || state.trace;
-      }
+      state.trace = log.lines ? logLinesParser(log.lines) : state.trace;
+
       state.traceSize = log.size || state.traceSize;
     }
 
diff --git a/app/assets/javascripts/jobs/store/state.js b/app/assets/javascripts/jobs/store/state.js
index d76828ad19b..2fe945b2985 100644
--- a/app/assets/javascripts/jobs/store/state.js
+++ b/app/assets/javascripts/jobs/store/state.js
@@ -1,5 +1,3 @@
-import { isNewJobLogActive } from './utils';
-
 export default () => ({
   jobEndpoint: null,
   traceEndpoint: null,
@@ -18,7 +16,7 @@ export default () => ({
   // Used to check if we should keep the automatic scroll
   isScrolledToBottomBeforeReceivingTrace: true,
 
-  trace: isNewJobLogActive() ? [] : '',
+  trace: [],
   isTraceComplete: false,
   traceSize: 0,
   isTraceSizeVisible: false,
diff --git a/app/assets/javascripts/jobs/store/utils.js b/app/assets/javascripts/jobs/store/utils.js
index 0b28c52a78f..8d6e5aac566 100644
--- a/app/assets/javascripts/jobs/store/utils.js
+++ b/app/assets/javascripts/jobs/store/utils.js
@@ -11,7 +11,7 @@ export const parseLine = (line = {}, lineNumber) => ({
 /**
  * When a line has `section_header` set to true, we create a new
  * structure to allow to nest the lines that belong to the
- * collpasible section
+ * collapsible section
  *
  * @param Object line
  * @param Number lineNumber
@@ -91,7 +91,7 @@ export const getIncrementalLineNumber = acc => {
  * Parses the job log content into a structure usable by the template
  *
  * For collaspible lines (section_header = true):
- *    - creates a new array to hold the lines that are collpasible,
+ *    - creates a new array to hold the lines that are collapsible,
  *    - adds a isClosed property to handle toggle
  *    - adds a isHeader property to handle template logic
  *    - adds the section_duration
@@ -177,5 +177,3 @@ export const updateIncrementalTrace = (newLog = [], oldParsed = []) => {
 
   return logLinesParser(newLog, parsedLog);
 };
-
-export const isNewJobLogActive = () => gon && gon.features && gon.features.jobLogJson;