Add latest changes from gitlab-org/gitlab@master

14 files changed, 87 insertions, 17 deletions

diff --git a/app/assets/javascripts/issuable_sidebar/components/sidebar_app.vue b/app/assets/javascripts/issuable_sidebar/components/sidebar_app.vue
new file mode 100644
index 00000000000..06c50f62aab
--- /dev/null
+++ b/app/assets/javascripts/issuable_sidebar/components/sidebar_app.vue
@@ -0,0 +1,23 @@
+<script>
+export default {
+  props: {
+    signedIn: {
+      type: Boolean,
+      required: true,
+    },
+    sidebarStatusClass: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+};
+</script>
+
+<template>
+  <aside
+    :class="sidebarStatusClass"
+    class="right-sidebar js-right-sidebar js-issuable-sidebar"
+    aria-live="polite"
+  ></aside>
+</template>
diff --git a/app/assets/javascripts/issuable_sidebar/sidebar_bundle.js b/app/assets/javascripts/issuable_sidebar/sidebar_bundle.js
new file mode 100644
index 00000000000..c8acafa8cd8
--- /dev/null
+++ b/app/assets/javascripts/issuable_sidebar/sidebar_bundle.js
@@ -0,0 +1,27 @@
+import Vue from 'vue';
+
+import SidebarApp from './components/sidebar_app.vue';
+
+export default () => {
+  const el = document.getElementById('js-vue-issuable-sidebar');
+
+  if (!el) {
+    return false;
+  }
+
+  const { sidebarStatusClass } = el.dataset;
+  // An empty string is present when user is signed in.
+  const signedIn = el.dataset.signedIn === '';
+
+  return new Vue({
+    el,
+    components: { SidebarApp },
+    render: createElement =>
+      createElement('sidebar-app', {
+        props: {
+          signedIn,
+          sidebarStatusClass,
+        },
+      }),
+  });
+};
diff --git a/app/assets/javascripts/jobs/components/log/duration_badge.vue b/app/assets/javascripts/jobs/components/log/duration_badge.vue
index 31a101d2c95..8e5dcdcc902 100644
--- a/app/assets/javascripts/jobs/components/log/duration_badge.vue
+++ b/app/assets/javascripts/jobs/components/log/duration_badge.vue
@@ -9,7 +9,7 @@ export default {
 };
 </script>
 <template>
-  <div class="log-duration-badge rounded align-self-start px-2 ml-2 flex-shrink-0">
+  <div class="log-duration-badge rounded align-self-start px-2 ml-2 flex-shrink-0 ws-normal">
     {{ duration }}
   </div>
 </template>
diff --git a/app/assets/javascripts/jobs/components/log/line.vue b/app/assets/javascripts/jobs/components/log/line.vue
index 9fae541125e..33ee84bd4ee 100644
--- a/app/assets/javascripts/jobs/components/log/line.vue
+++ b/app/assets/javascripts/jobs/components/log/line.vue
@@ -21,8 +21,12 @@ export default {
 <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">{{
-      content.text
-    }}</span>
+    <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_header.vue b/app/assets/javascripts/jobs/components/log/line_header.vue
index 92cf3b3cf5f..85ccd5996b5 100644
--- a/app/assets/javascripts/jobs/components/log/line_header.vue
+++ b/app/assets/javascripts/jobs/components/log/line_header.vue
@@ -43,15 +43,19 @@ export default {
 
 <template>
   <div
-    class="log-line collapsible-line d-flex justify-content-between"
+    class="log-line collapsible-line d-flex justify-content-between ws-normal"
     role="button"
     @click="handleOnClick"
   >
     <icon :name="iconName" class="arrow position-absolute" />
     <line-number :line-number="line.lineNumber" :path="path" />
-    <span v-for="(content, i) in line.content" :key="i" class="line-text" :class="content.style">{{
-      content.text
-    }}</span>
+    <span
+      v-for="(content, i) in line.content"
+      :key="i"
+      class="line-text w-100 ws-pre-wrap"
+      :class="content.style"
+      >{{ content.text }}</span
+    >
     <duration-badge v-if="duration" :duration="duration" />
   </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 08c4a7ed330..ae96c32874b 100644
--- a/app/assets/javascripts/jobs/components/log/line_number.vue
+++ b/app/assets/javascripts/jobs/components/log/line_number.vue
@@ -48,7 +48,7 @@ export default {
 <template>
   <gl-link
     :id="lineNumberId"
-    class="d-inline-block text-right line-number"
+    class="d-inline-block text-right line-number flex-shrink-0"
     :href="buildLineNumber"
     >{{ parsedLineNumber }}</gl-link
   >
diff --git a/app/assets/javascripts/jobs/store/mutations.js b/app/assets/javascripts/jobs/store/mutations.js
index 412ae146ca0..702f00888d0 100644
--- a/app/assets/javascripts/jobs/store/mutations.js
+++ b/app/assets/javascripts/jobs/store/mutations.js
@@ -19,7 +19,7 @@ export default {
     state.isSidebarOpen = true;
   },
 
-  [types.RECEIVE_TRACE_SUCCESS](state, log) {
+  [types.RECEIVE_TRACE_SUCCESS](state, log = {}) {
     if (log.state) {
       state.traceState = log.state;
     }
diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue
index 9ecb9324f8c..09afa16e283 100644
--- a/app/assets/javascripts/monitoring/components/dashboard.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard.vue
@@ -416,7 +416,6 @@ export default {
             <gl-button
               v-if="showRearrangePanelsBtn"
               :pressed="isRearrangingPanels"
-              new-style
               variant="default"
               class="mr-2 mt-1 js-rearrange-button"
               @click="toggleRearrangingPanels"
@@ -426,7 +425,6 @@ export default {
             <gl-button
               v-if="addingMetricsAvailable"
               v-gl-modal="$options.addMetric.modalId"
-              new-style
               variant="outline-success"
               class="mr-2 mt-1 js-add-metric-button"
             >
diff --git a/app/assets/javascripts/pages/projects/issues/show.js b/app/assets/javascripts/pages/projects/issues/show.js
index 0447d1f79fb..28a136a5fa5 100644
--- a/app/assets/javascripts/pages/projects/issues/show.js
+++ b/app/assets/javascripts/pages/projects/issues/show.js
@@ -5,6 +5,7 @@ import ZenMode from '~/zen_mode';
 import '~/notes/index';
 import initIssueableApp from '~/issue_show';
 import initRelatedMergeRequestsApp from '~/related_merge_requests';
+import initVueIssuableSidebarApp from '~/issuable_sidebar/sidebar_bundle';
 
 export default function() {
   initIssueableApp();
@@ -12,5 +13,9 @@ export default function() {
   new Issue(); // eslint-disable-line no-new
   new ShortcutsIssuable(); // eslint-disable-line no-new
   new ZenMode(); // eslint-disable-line no-new
-  initIssuableSidebar();
+  if (gon.features && gon.features.vueIssuableSidebar) {
+    initVueIssuableSidebarApp();
+  } else {
+    initIssuableSidebar();
+  }
 }
diff --git a/app/assets/javascripts/pages/projects/issues/show/index.js b/app/assets/javascripts/pages/projects/issues/show/index.js
index 7968dfd7a12..ce74a6de11f 100644
--- a/app/assets/javascripts/pages/projects/issues/show/index.js
+++ b/app/assets/javascripts/pages/projects/issues/show/index.js
@@ -3,5 +3,7 @@ import initShow from '../show';
 
 document.addEventListener('DOMContentLoaded', () => {
   initShow();
-  initSidebarBundle();
+  if (gon.features && !gon.features.vueIssuableSidebar) {
+    initSidebarBundle();
+  }
 });
diff --git a/app/assets/javascripts/pages/projects/merge_requests/init_merge_request_show.js b/app/assets/javascripts/pages/projects/merge_requests/init_merge_request_show.js
index 7bfb83a2204..fa1de1f13cb 100644
--- a/app/assets/javascripts/pages/projects/merge_requests/init_merge_request_show.js
+++ b/app/assets/javascripts/pages/projects/merge_requests/init_merge_request_show.js
@@ -4,11 +4,16 @@ import ShortcutsIssuable from '~/behaviors/shortcuts/shortcuts_issuable';
 import { handleLocationHash } from '~/lib/utils/common_utils';
 import howToMerge from '~/how_to_merge';
 import initPipelines from '~/commit/pipelines/pipelines_bundle';
+import initVueIssuableSidebarApp from '~/issuable_sidebar/sidebar_bundle';
 import initWidget from '../../../vue_merge_request_widget';
 
 export default function() {
   new ZenMode(); // eslint-disable-line no-new
-  initIssuableSidebar();
+  if (gon.features && gon.features.vueIssuableSidebar) {
+    initVueIssuableSidebarApp();
+  } else {
+    initIssuableSidebar();
+  }
   initPipelines();
   new ShortcutsIssuable(true); // eslint-disable-line no-new
   handleLocationHash();
diff --git a/app/assets/javascripts/pages/projects/merge_requests/show/index.js b/app/assets/javascripts/pages/projects/merge_requests/show/index.js
index f61f4db78d5..ddc648702f1 100644
--- a/app/assets/javascripts/pages/projects/merge_requests/show/index.js
+++ b/app/assets/javascripts/pages/projects/merge_requests/show/index.js
@@ -4,6 +4,8 @@ import initShow from '../init_merge_request_show';
 
 document.addEventListener('DOMContentLoaded', () => {
   initShow();
-  initSidebarBundle();
+  if (gon.features && !gon.features.vueIssuableSidebar) {
+    initSidebarBundle();
+  }
   initMrNotes();
 });
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index 16cb63fc0df..370fc84e492 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -440,6 +440,7 @@ img.emoji {
 .flex-no-shrink { flex-shrink: 0; }
 .ws-initial { white-space: initial; }
 .ws-normal { white-space: normal; }
+.ws-pre-wrap { white-space: pre-wrap; }
 .overflow-auto { overflow: auto; }
 
 .d-flex-center {
diff --git a/app/assets/stylesheets/framework/job_log.scss b/app/assets/stylesheets/framework/job_log.scss
index f26c475c3c1..4a57a458c50 100644
--- a/app/assets/stylesheets/framework/job_log.scss
+++ b/app/assets/stylesheets/framework/job_log.scss
@@ -9,7 +9,6 @@
   border-radius: $border-radius-small;
   min-height: 42px;
   background-color: $builds-trace-bg;
-  white-space: pre-wrap;
 }
 
 .log-line {