Add latest changes from gitlab-org/gitlab@15-4-stable-eev15.4.0-rc42

7 files changed, 13 insertions, 46 deletions

diff --git a/app/assets/javascripts/notebook/cells/code.vue b/app/assets/javascripts/notebook/cells/code.vue
index f5a6f3a9817..bc1bab62553 100644
--- a/app/assets/javascripts/notebook/cells/code.vue
+++ b/app/assets/javascripts/notebook/cells/code.vue
@@ -13,11 +13,6 @@ export default {
       type: Object,
       required: true,
     },
-    codeCssClass: {
-      type: String,
-      required: false,
-      default: '',
-    },
   },
   computed: {
     rawInputCode() {
@@ -39,18 +34,12 @@ export default {
 
 <template>
   <div class="cell">
-    <code-output
-      :raw-code="rawInputCode"
-      :count="cell.execution_count"
-      :code-css-class="codeCssClass"
-      type="input"
-    />
+    <code-output :raw-code="rawInputCode" :count="cell.execution_count" type="input" />
     <output-cell
       v-if="hasOutput"
       :count="cell.execution_count"
       :outputs="outputs"
       :metadata="cell.metadata"
-      :code-css-class="codeCssClass"
     />
   </div>
 </template>
diff --git a/app/assets/javascripts/notebook/cells/code/index.vue b/app/assets/javascripts/notebook/cells/code/index.vue
index e1ef9aa6d79..64e801a7516 100644
--- a/app/assets/javascripts/notebook/cells/code/index.vue
+++ b/app/assets/javascripts/notebook/cells/code/index.vue
@@ -1,10 +1,11 @@
 <script>
-import Prism from '../../lib/highlight';
+import CodeBlockHighlighted from '~/vue_shared/components/code_block_highlighted.vue';
 import Prompt from '../prompt.vue';
 
 export default {
   name: 'CodeOutput',
   components: {
+    CodeBlockHighlighted,
     Prompt,
   },
   props: {
@@ -13,11 +14,6 @@ export default {
       required: false,
       default: 0,
     },
-    codeCssClass: {
-      type: String,
-      required: false,
-      default: '',
-    },
     type: {
       type: String,
       required: true,
@@ -41,22 +37,21 @@ export default {
 
       return type.charAt(0).toUpperCase() + type.slice(1);
     },
-    cellCssClass() {
-      return {
-        [this.codeCssClass]: true,
-        'jupyter-notebook-scrolled': this.metadata.scrolled,
-      };
+    maxHeight() {
+      return this.metadata.scrolled ? '20rem' : 'initial';
     },
   },
-  mounted() {
-    Prism.highlightElement(this.$refs.code);
-  },
 };
 </script>
 
 <template>
   <div :class="type">
     <prompt :type="promptType" :count="count" />
-    <pre ref="code" :class="cellCssClass" class="language-python" v-text="code"></pre>
+    <code-block-highlighted
+      language="python"
+      :code="code"
+      :max-height="maxHeight"
+      class="gl-border"
+    />
   </div>
 </template>
diff --git a/app/assets/javascripts/notebook/cells/markdown.vue b/app/assets/javascripts/notebook/cells/markdown.vue
index 8351ae7ced6..127e046b5a9 100644
--- a/app/assets/javascripts/notebook/cells/markdown.vue
+++ b/app/assets/javascripts/notebook/cells/markdown.vue
@@ -137,7 +137,7 @@ marked.setOptions({
 
 export default {
   components: {
-    prompt: Prompt,
+    Prompt,
   },
   directives: {
     SafeHtml,
diff --git a/app/assets/javascripts/notebook/cells/output/image.vue b/app/assets/javascripts/notebook/cells/output/image.vue
index 065f5def83c..da7d83539d3 100644
--- a/app/assets/javascripts/notebook/cells/output/image.vue
+++ b/app/assets/javascripts/notebook/cells/output/image.vue
@@ -3,7 +3,7 @@ import Prompt from '../prompt.vue';
 
 export default {
   components: {
-    prompt: Prompt,
+    Prompt,
   },
   props: {
     count: {
diff --git a/app/assets/javascripts/notebook/cells/output/index.vue b/app/assets/javascripts/notebook/cells/output/index.vue
index 5f7ef4a4377..88d01ffa659 100644
--- a/app/assets/javascripts/notebook/cells/output/index.vue
+++ b/app/assets/javascripts/notebook/cells/output/index.vue
@@ -6,11 +6,6 @@ import LatexOutput from './latex.vue';
 
 export default {
   props: {
-    codeCssClass: {
-      type: String,
-      required: false,
-      default: '',
-    },
     count: {
       type: Number,
       required: false,
@@ -96,7 +91,6 @@ export default {
       :index="index"
       :raw-code="rawCode(output)"
       :metadata="metadata"
-      :code-css-class="codeCssClass"
     />
   </div>
 </template>
diff --git a/app/assets/javascripts/notebook/index.vue b/app/assets/javascripts/notebook/index.vue
index 44dc1856e49..df9694b7cd8 100644
--- a/app/assets/javascripts/notebook/index.vue
+++ b/app/assets/javascripts/notebook/index.vue
@@ -11,11 +11,6 @@ export default {
       type: Object,
       required: true,
     },
-    codeCssClass: {
-      type: String,
-      required: false,
-      default: '',
-    },
   },
   computed: {
     cells() {
@@ -52,7 +47,6 @@ export default {
       v-for="(cell, index) in cells"
       :key="index"
       :cell="cell"
-      :code-css-class="codeCssClass"
     />
   </div>
 </template>
diff --git a/app/assets/javascripts/notebook/lib/highlight.js b/app/assets/javascripts/notebook/lib/highlight.js
deleted file mode 100644
index 313aeecbd51..00000000000
--- a/app/assets/javascripts/notebook/lib/highlight.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import Prism from 'prismjs';
-import 'prismjs/components/prism-python';
-import 'prismjs/themes/prism.css';
-
-export default Prism;