outputs will appear as a single textbox, with one scrollbar (#8327)

* made all outputs a single jsx element

* fixed a bug, error with mimetype would show
every time

* removed 1 useless line

* removed useless comment

Author: David Kutugata

src/datascience-ui/interactive-common/cellOutput.tsx

@@ -346,59 +346,64 @@ export class CellOutput extends React.Component<ICellOutputProps> {
 
     // tslint:disable-next-line: max-func-body-length
     private renderOutputs(outputs: nbformat.IOutput[]): JSX.Element[] {
-        return outputs.map(this.renderOutput);
+        return [this.renderOutput(outputs)];
     }
 
-    private renderOutput = (output: nbformat.IOutput, index: number): JSX.Element => {
-        const transformed = this.transformOutput(output);
-        let mimetype = transformed.mimeType;
-
-        // If that worked, use the transform
-        if (mimetype) {
-            // Get the matching React.Component for that mimetype
-            const Transform = transforms[mimetype];
-
-            // Create a default set of properties
-            const style: React.CSSProperties = {
-            };
-
-            // Create a scrollbar style if necessary
-            if (transformed.renderWithScrollbars && this.props.maxTextSize) {
-                style.overflowX = 'auto';
-                style.overflowY = 'auto';
-                style.maxHeight = `${this.props.maxTextSize}px`;
-            }
-
-            let className = transformed.isText ? 'cell-output-text' : 'cell-output-html';
-            className = transformed.isError ? `${className} cell-output-error` : className;
-
-            // If we are not theming plots then wrap them in a white span
-            if (transformed.outputSpanClassName) {
-                return (
-                    <div role='group' key={index} onDoubleClick={transformed.doubleClick} onClick={this.click} className={className} style={style}>
-                        <span className={transformed.outputSpanClassName}>
+    private renderOutput = (outputs: nbformat.IOutput[]): JSX.Element => {
+        const buffer: JSX.Element[] = [];
+        const transformedList = outputs.map(this.transformOutput);
+
+        transformedList.forEach(transformed => {
+            let mimetype = transformed.mimeType;
+
+            // If that worked, use the transform
+            if (mimetype) {
+                // Get the matching React.Component for that mimetype
+                const Transform = transforms[mimetype];
+
+                let className = transformed.isText ? 'cell-output-text' : 'cell-output-html';
+                className = transformed.isError ? `${className} cell-output-error` : className;
+
+                // If we are not theming plots then wrap them in a white span
+                if (transformed.outputSpanClassName) {
+                    buffer.push(
+                        <div role='group' onDoubleClick={transformed.doubleClick} onClick={this.click} className={className}>
+                            <span className={transformed.outputSpanClassName}>
+                                {transformed.extraButton}
+                                <Transform data={transformed.data} />
+                            </span>
+                        </div>
+                    );
+                } else {
+                    buffer.push(
+                        <div role='group' onDoubleClick={transformed.doubleClick} onClick={this.click} className={className}>
                             {transformed.extraButton}
                             <Transform data={transformed.data} />
-                        </span>
-                    </div>
-                );
+                        </div>
+                    );
+                }
             } else {
-                return (
-                    <div role='group' key={index} onDoubleClick={transformed.doubleClick} onClick={this.click} className={className} style={style}>
-                        {transformed.extraButton}
-                        <Transform data={transformed.data} />
-                    </div>
-                );
+                if (transformed.data) {
+                    const keys = Object.keys(transformed.data);
+                    mimetype = keys.length > 0 ? keys[0] : 'unknown';
+                } else {
+                    mimetype = 'unknown';
+                }
+                const str: string = this.getUnknownMimeTypeFormatString().format(mimetype);
+                buffer.push(<div>{str}</div>);
             }
-        }
+        });
 
-        if (output.data) {
-            const keys = Object.keys(output.data);
-            mimetype = keys.length > 0 ? keys[0] : 'unknown';
-        } else {
-            mimetype = 'unknown';
+        // Create a default set of properties
+        const style: React.CSSProperties = {
+        };
+
+        // Create a scrollbar style if necessary
+        if (transformedList.some(transformed => transformed.renderWithScrollbars) && this.props.maxTextSize) {
+            style.overflowY = 'auto';
+            style.maxHeight = `${this.props.maxTextSize}px`;
         }
-        const str: string = this.getUnknownMimeTypeFormatString().format(mimetype);
-        return <div key={index}>{str}</div>;
+
+        return <div style={style}>{buffer}</div>;
     }
 }