updated to match our docsnotebook-multiple-outputs

6 files changed, 92 insertions, 92 deletions

diff --git a/app/assets/javascripts/notebook/cells/code.vue b/app/assets/javascripts/notebook/cells/code.vue
index 0ccf7c620f3..58e8a709965 100644
--- a/app/assets/javascripts/notebook/cells/code.vue
+++ b/app/assets/javascripts/notebook/cells/code.vue
@@ -1,11 +1,12 @@
 <script>
-import CodeCell from './code/index.vue';
+import CodeOutput from './code/index.vue';
 import OutputCell from './output/index.vue';
 
 export default {
+  name: 'CodeCell',
   components: {
-    'code-cell': CodeCell,
-    'output-cell': OutputCell,
+    CodeOutput,
+    OutputCell,
   },
   props: {
     cell: {
@@ -38,7 +39,7 @@ export default {
 
 <template>
   <div class="cell">
-    <code-cell
+    <code-output
       type="input"
       :raw-code="rawInputCode"
       :count="cell.execution_count"
diff --git a/app/assets/javascripts/notebook/cells/code/index.vue b/app/assets/javascripts/notebook/cells/code/index.vue
index 0f3083f05b2..99903ccbc93 100644
--- a/app/assets/javascripts/notebook/cells/code/index.vue
+++ b/app/assets/javascripts/notebook/cells/code/index.vue
@@ -1,45 +1,46 @@
 <script>
-  import Prism from '../../lib/highlight';
-  import Prompt from '../prompt.vue';
+import Prism from '../../lib/highlight';
+import Prompt from '../prompt.vue';
 
-  export default {
-    components: {
-      prompt: Prompt,
+export default {
+  name: 'CodeOutput',
+  components: {
+    prompt: Prompt,
+  },
+  props: {
+    count: {
+      type: Number,
+      required: false,
+      default: 0,
     },
-    props: {
-      count: {
-        type: Number,
-        required: false,
-        default: 0,
-      },
-      codeCssClass: {
-        type: String,
-        required: false,
-        default: '',
-      },
-      type: {
-        type: String,
-        required: true,
-      },
-      rawCode: {
-        type: String,
-        required: true,
-      },
+    codeCssClass: {
+      type: String,
+      required: false,
+      default: '',
     },
-    computed: {
-      code() {
-        return this.rawCode;
-      },
-      promptType() {
-        const type = this.type.split('put')[0];
-
-        return type.charAt(0).toUpperCase() + type.slice(1);
-      },
+    type: {
+      type: String,
+      required: true,
+    },
+    rawCode: {
+      type: String,
+      required: true,
     },
-    mounted() {
-      Prism.highlightElement(this.$refs.code);
+  },
+  computed: {
+    code() {
+      return this.rawCode;
+    },
+    promptType() {
+      const type = this.type.split('put')[0];
+
+      return type.charAt(0).toUpperCase() + type.slice(1);
     },
-  };
+  },
+  mounted() {
+    Prism.highlightElement(this.$refs.code);
+  },
+};
 </script>
 
 <template>
diff --git a/app/assets/javascripts/notebook/cells/output/html.vue b/app/assets/javascripts/notebook/cells/output/html.vue
index 9177c958c82..a1f17f993e5 100644
--- a/app/assets/javascripts/notebook/cells/output/html.vue
+++ b/app/assets/javascripts/notebook/cells/output/html.vue
@@ -36,7 +36,7 @@ export default {
 <template>
   <div class="output">
     <prompt
-      type="out"
+      type="Out"
       :count="count"
       :show-output="index === 0"
     />
diff --git a/app/assets/javascripts/notebook/cells/output/index.vue b/app/assets/javascripts/notebook/cells/output/index.vue
index fac2002a0fb..fc8126dd084 100644
--- a/app/assets/javascripts/notebook/cells/output/index.vue
+++ b/app/assets/javascripts/notebook/cells/output/index.vue
@@ -1,11 +1,11 @@
 <script>
-import CodeCell from '../code/index.vue';
+import CodeOutput from '../code/index.vue';
 import HtmlOutput from './html.vue';
 import ImageOutput from './image.vue';
 
 export default {
   components: {
-    CodeCell,
+    CodeOutput,
     HtmlOutput,
     ImageOutput,
   },
@@ -42,7 +42,7 @@ export default {
     },
     componentName(output) {
       if (output.text) {
-        return 'code-cell';
+        return 'code-output';
       } else if (output.data['image/png']) {
         this.outputType = 'image/png';
 
@@ -58,7 +58,7 @@ export default {
       }
 
       this.outputType = 'text/plain';
-      return 'code-cell';
+      return 'code-output';
     },
     rawCode(output) {
       if (output.text) {
@@ -75,6 +75,7 @@ export default {
   <div>
     <component
       v-for="(output, index) in outputs"
+      :key="index"
       :is="componentName(output)"
       type="output"
       :output-type="outputType"
@@ -82,7 +83,6 @@ export default {
       :index="index"
       :raw-code="rawCode(output)"
       :code-css-class="codeCssClass"
-      :key="index"
     />
   </div>
 </template>
diff --git a/app/assets/javascripts/notebook/cells/prompt.vue b/app/assets/javascripts/notebook/cells/prompt.vue
index b0f1e29ef88..1e3e41c19ab 100644
--- a/app/assets/javascripts/notebook/cells/prompt.vue
+++ b/app/assets/javascripts/notebook/cells/prompt.vue
@@ -11,17 +11,17 @@ export default {
       required: false,
       default: 0,
     },
-  },
-  computed: {
-    hasKeys() {
-      return this.type !== '' && this.count;
-    },
     showOutput: {
       type: Boolean,
       required: false,
       default: true,
     },
   },
+  computed: {
+    hasKeys() {
+      return this.type !== '' && this.count;
+    },
+  },
 };
 </script>
 
diff --git a/app/assets/javascripts/notebook/index.vue b/app/assets/javascripts/notebook/index.vue
index e2e3b08c77f..573daefcc81 100644
--- a/app/assets/javascripts/notebook/index.vue
+++ b/app/assets/javascripts/notebook/index.vue
@@ -1,51 +1,48 @@
 <script>
-  import {
-    MarkdownCell,
-    CodeCell,
-  } from './cells';
+import { MarkdownCell, CodeCell } from './cells';
 
-  export default {
-    components: {
-      'code-cell': CodeCell,
-      'markdown-cell': MarkdownCell,
+export default {
+  components: {
+    CodeCell,
+    MarkdownCell,
+  },
+  props: {
+    notebook: {
+      type: Object,
+      required: true,
     },
-    props: {
-      notebook: {
-        type: Object,
-        required: true,
-      },
-      codeCssClass: {
-        type: String,
-        required: false,
-        default: '',
-      },
+    codeCssClass: {
+      type: String,
+      required: false,
+      default: '',
     },
-    computed: {
-      cells() {
-        if (this.notebook.worksheets) {
-          const data = {
-            cells: [],
-          };
+  },
+  computed: {
+    cells() {
+      if (this.notebook.worksheets) {
+        const data = {
+          cells: [],
+        };
 
-          return this.notebook.worksheets.reduce((cellData, sheet) => {
-            const cellDataCopy = cellData;
-            cellDataCopy.cells = cellDataCopy.cells.concat(sheet.cells);
-            return cellDataCopy;
-          }, data).cells;
-        }
+        return this.notebook.worksheets.reduce((cellData, sheet) => {
+          const cellDataCopy = cellData;
+          cellDataCopy.cells = cellDataCopy.cells.concat(sheet.cells);
+          return cellDataCopy;
+        }, data).cells;
+      }
 
-        return this.notebook.cells;
-      },
-      hasNotebook() {
-        return Object.keys(this.notebook).length;
-      },
+      return this.notebook.cells;
+    },
+    hasNotebook() {
+      return Object.keys(this.notebook).length;
     },
-    methods: {
-      cellType(type) {
-        return `${type}-cell`;
-      },
+  },
+  methods: {
+    cellType(type) {
+      return `${type}-cell`;
     },
-  };
+  },
+};
 </script>
 
 <template>
@@ -55,7 +52,8 @@
       :is="cellType(cell.cell_type)"
       :cell="cell"
       :key="index"
-      :code-css-class="codeCssClass" />
+      :code-css-class="codeCssClass"
+    />
   </div>
 </template>