Fix display of Jupyter notebooks where cell.source is a string

Fixes #27374

app/assets/javascripts/notebook/cells/code.vue

@@ -21,11 +21,11 @@ export default {
   },
   computed: {
     rawInputCode() {
-      if (this.cell.source) {
+      if (this.cell.source && Array.isArray(this.cell.source)) {
         return this.cell.source.join('');
       }
 
-      return '';
+      return this.cell.source || '';
     },
     hasOutput() {
       return this.cell.outputs.length;

changelogs/unreleased/27374-jupyter-notebook-cellsource.yml

+---
+title: Fix display of PyCharm generated Jupyter notebooks
+merge_request: 28810
+author: Jan Beckmann
+type: fixed

spec/javascripts/notebook/cells/code_spec.js

@@ -11,14 +11,19 @@ describe('Code component', () => {
     json = getJSONFixture('blob/notebook/basic.json');
   });
 
+  const setupComponent = cell => {
+    const comp = new Component({
+      propsData: {
+        cell,
+      },
+    });
+    comp.$mount();
+    return comp;
+  };
+
   describe('without output', () => {
     beforeEach(done => {
-      vm = new Component({
-        propsData: {
-          cell: json.cells[0],
-        },
-      });
-      vm.$mount();
+      vm = setupComponent(json.cells[0]);
 
       setTimeout(() => {
         done();
@@ -32,12 +37,7 @@ describe('Code component', () => {
 
   describe('with output', () => {
     beforeEach(done => {
-      vm = new Component({
-        propsData: {
-          cell: json.cells[2],
-        },
-      });
-      vm.$mount();
+      vm = setupComponent(json.cells[2]);
 
       setTimeout(() => {
         done();
@@ -52,4 +52,23 @@ describe('Code component', () => {
       expect(vm.$el.querySelector('.output')).toBeDefined();
     });
   });
+
+  describe('with string for cell.source', () => {
+    beforeEach(done => {
+      const cell = json.cells[0];
+      cell.source = cell.source.join('');
+
+      vm = setupComponent(cell);
+
+      setTimeout(() => {
+        done();
+      });
+    });
+
+    it('renders the same input as when cell.source is an array', () => {
+      const expected = "console.log('test')";
+
+      expect(vm.$el.querySelector('.input').innerText).toContain(expected);
+    });
+  });
 });