Davidkutu/ds scrapbook render fix

CHANGELOG.md

@@ -47,6 +47,9 @@
 
 ### Fixes
 
+1. Removed unnecessary warning when executing cells that use Scrapbook,
+   Fix an html crash when using not supported mime types
+   ([#9796](https://github.com/microsoft/vscode-python/issues/9796))
 1. Fixed the focus on the interactive window when pressing ctrl + 1/ ctrl + 2
    ([#9693](https://github.com/microsoft/vscode-python/issues/9693))
 1. Fix variable explorer in Interactive and Notebook editors from interfering with execution.

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

@@ -14,7 +14,7 @@ import { ImageButton } from '../react-common/imageButton';
 import { getLocString } from '../react-common/locReactSide';
 import { fixLatexEquations } from './latexManipulation';
 import { ICellViewModel } from './mainState';
-import { getRichestMimetype, getTransform } from './transforms';
+import { getRichestMimetype, getTransform, isMimeTypeSupported } from './transforms';
 
 // tslint:disable-next-line: no-var-requires no-require-imports
 const ansiToHtml = require('ansi-to-html');
@@ -380,7 +380,7 @@ export class CellOutput extends React.Component<ICellOutputProps> {
             let mimetype = transformed.mimeType;
 
             // If that worked, use the transform
-            if (mimetype) {
+            if (mimetype && isMimeTypeSupported(mimetype)) {
                 // Get the matching React.Component for that mimetype
                 const Transform = getTransform(mimetype);
 
@@ -405,6 +405,9 @@ export class CellOutput extends React.Component<ICellOutputProps> {
                         </div>
                     );
                 }
+            } else if (mimetype.startsWith('application/scrapbook.scrap.')) {
+                // Silently skip rendering of these mime types, render an empty div so the user sees the cell was executed.
+                buffer.push(<div key={index}></div>);
             } else {
                 if (transformed.data) {
                     const keys = Object.keys(transformed.data);

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

@@ -151,3 +151,8 @@ export async function forceLoad() {
     // Used for tests to make sure we don't end up with 'Loading ...' anywhere in a test
     await Promise.all(mimeTypeToImport.map(m => m.getComponent()));
 }
+
+export function isMimeTypeSupported(mimeType: string): Boolean {
+    const match = mimeTypeToImport.find(m => m.mimeType === mimeType);
+    return match ? true : false;
+}