Fix bug publish screenshot (#762)

[Preview this branch](https://cosmos-explorer-preview.azurewebsites.net/pull/762?feature.someFeatureFlagYouMightNeed=true)

The main change in this PR fixes the snapshot functionality in the Publish pane-related components. Because the code cell outputs are now rendered in their own iframes for security reasons, a single snapshot of the notebook is no longer possible: each cell output takes its own snapshot and the snapshots are collated on the main notebook snapshot.
- Move the snapshot functionality to notebook components: this removes the reference of the notebook DOM node that we must pass to the Publish pane via explorer.
- Add slice in the state and actions in notebook redux for notebook snapshot requests and result
- Add post robot message to take snapshots and receive results
- Add logic in `NotebookRenderer` to wait for all output snapshots done before taking the main one collating.
- Use `zustand` to share snapshot between Redux world and React world. This solves the issue of keeping the `PanelContainer` component generic, while being able to update its children (`PublishPanel` component) with the new snapshot.

Additional changes:
- Add `local()` in `@font-face` to check if font is already installed before downloading the font (must be done for Safari, but not Edge/Chrome)
- Add "Export output to image" menu item in notebook cell, since each cell output can take its own snapshot (which can be downloaded)
![image](https://user-images.githubusercontent.com/21954022/117454706-b5f16600-af46-11eb-8535-6bf99f3d9170.png)

src/Explorer/Panes/PanelContainerComponent.test.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import { shallow } from "enzyme";
+import React from "react";
 import { PanelContainerComponent, PanelContainerProps } from "./PanelContainerComponent";
 
 describe("PaneContainerComponent test", () => {

src/Explorer/Panes/PublishNotebookPane/PublishNotebookPane.test.tsx

@@ -12,13 +12,14 @@ describe("PublishNotebookPaneComponent", () => {
       notebookAuthor: "CosmosDB",
       notebookCreatedDate: "2020-07-17T00:00:00Z",
       notebookObject: undefined,
-      notebookParentDomElement: undefined,
+      notebookContentRef: undefined,
       setNotebookName: undefined,
       setNotebookDescription: undefined,
       setNotebookTags: undefined,
       setImageSrc: undefined,
       onError: undefined,
       clearFormError: undefined,
+      onTakeSnapshot: undefined,
     };
 
     const wrapper = shallow(<PublishNotebookPaneComponent {...props} />);

src/Explorer/Panes/PublishNotebookPane/PublishNotebookPane.tsx

@@ -2,6 +2,7 @@ import { ImmutableNotebook, toJS } from "@nteract/commutable";
 import React, { FunctionComponent, useEffect, useState } from "react";
 import { HttpStatusCodes } from "../../../Common/Constants";
 import { getErrorMessage, getErrorStack, handleError } from "../../../Common/ErrorHandlingUtils";
+import { useNotebookSnapshotStore } from "../../../hooks/useNotebookSnapshotStore";
 import { JunoClient } from "../../../Juno/JunoClient";
 import { Action } from "../../../Shared/Telemetry/TelemetryConstants";
 import { traceFailure, traceStart, traceSuccess } from "../../../Shared/Telemetry/TelemetryProcessor";
@@ -10,6 +11,7 @@ import { CodeOfConductComponent } from "../../Controls/NotebookGallery/CodeOfCon
 import { GalleryTab } from "../../Controls/NotebookGallery/GalleryViewerComponent";
 import Explorer from "../../Explorer";
 import * as FileSystemUtil from "../../Notebook/FileSystemUtil";
+import { SnapshotRequest } from "../../Notebook/NotebookComponent/types";
 import {
   GenericRightPaneComponent,
   GenericRightPaneProps,
@@ -24,7 +26,8 @@ export interface PublishNotebookPaneAProps {
   name: string;
   author: string;
   notebookContent: string | ImmutableNotebook;
-  parentDomElement: HTMLElement;
+  notebookContentRef: string;
+  onTakeSnapshot: (request: SnapshotRequest) => void;
 }
 export const PublishNotebookPane: FunctionComponent<PublishNotebookPaneAProps> = ({
   explorer: container,
@@ -33,7 +36,8 @@ export const PublishNotebookPane: FunctionComponent<PublishNotebookPaneAProps> =
   name,
   author,
   notebookContent,
-  parentDomElement,
+  notebookContentRef,
+  onTakeSnapshot,
 }: PublishNotebookPaneAProps): JSX.Element => {
   const [isCodeOfConductAccepted, setIsCodeOfConductAccepted] = useState<boolean>(false);
   const [content, setContent] = useState<string>("");
@@ -45,6 +49,7 @@ export const PublishNotebookPane: FunctionComponent<PublishNotebookPaneAProps> =
   const [notebookDescription, setNotebookDescription] = useState<string>("");
   const [notebookTags, setNotebookTags] = useState<string>("");
   const [imageSrc, setImageSrc] = useState<string>();
+  const { snapshot: notebookSnapshot, error: notebookSnapshotError } = useNotebookSnapshotStore();
 
   const CodeOfConductAccepted = async () => {
     try {
@@ -74,6 +79,14 @@ export const PublishNotebookPane: FunctionComponent<PublishNotebookPaneAProps> =
     setContent(newContent);
   }, []);
 
+  useEffect(() => {
+    setImageSrc(notebookSnapshot);
+  }, [notebookSnapshot]);
+
+  useEffect(() => {
+    setFormError(notebookSnapshotError);
+  }, [notebookSnapshotError]);
+
   const submit = async (): Promise<void> => {
     const clearPublishingMessage = NotificationConsoleUtils.logConsoleProgress(`Publishing ${name} to gallery`);
     setIsExecuting(true);
@@ -178,13 +191,14 @@ export const PublishNotebookPane: FunctionComponent<PublishNotebookPaneAProps> =
     notebookAuthor: author,
     notebookCreatedDate: new Date().toISOString(),
     notebookObject: notebookObject,
-    notebookParentDomElement: parentDomElement,
+    notebookContentRef,
     onError: createFormError,
     clearFormError: clearFormError,
     setNotebookName,
     setNotebookDescription,
     setNotebookTags,
     setImageSrc,
+    onTakeSnapshot,
   };
   return (
     <GenericRightPaneComponent {...props}>

src/Explorer/Panes/PublishNotebookPane/PublishNotebookPaneComponent.tsx

@@ -1,9 +1,9 @@
 import { Dropdown, IDropdownProps, ITextFieldProps, Stack, Text, TextField } from "@fluentui/react";
 import { ImmutableNotebook } from "@nteract/commutable";
-import Html2Canvas from "html2canvas";
 import React, { FunctionComponent, useState } from "react";
 import { GalleryCardComponent } from "../../Controls/NotebookGallery/Cards/GalleryCardComponent";
 import * as FileSystemUtil from "../../Notebook/FileSystemUtil";
+import { SnapshotRequest } from "../../Notebook/NotebookComponent/types";
 import { NotebookUtil } from "../../Notebook/NotebookUtil";
 import "./styled.less";
 
@@ -11,17 +11,19 @@ export interface PublishNotebookPaneProps {
   notebookName: string;
   notebookAuthor: string;
   notebookTags: string;
-  imageSrc: string;
   notebookDescription: string;
   notebookCreatedDate: string;
   notebookObject: ImmutableNotebook;
-  notebookParentDomElement?: HTMLElement;
+  notebookContentRef: string;
+  imageSrc: string;
+
   onError: (formError: string, formErrorDetail: string, area: string) => void;
   clearFormError: () => void;
   setNotebookName: (newValue: string) => void;
   setNotebookDescription: (newValue: string) => void;
   setNotebookTags: (newValue: string) => void;
   setImageSrc: (newValue: string) => void;
+  onTakeSnapshot: (request: SnapshotRequest) => void;
 }
 
 enum ImageTypes {
@@ -34,18 +36,19 @@ enum ImageTypes {
 export const PublishNotebookPaneComponent: FunctionComponent<PublishNotebookPaneProps> = ({
   notebookName,
   notebookTags,
-  imageSrc,
   notebookDescription,
   notebookAuthor,
   notebookCreatedDate,
   notebookObject,
-  notebookParentDomElement,
+  notebookContentRef,
+  imageSrc,
   onError,
   clearFormError,
   setNotebookName,
   setNotebookDescription,
   setNotebookTags,
   setImageSrc,
+  onTakeSnapshot,
 }: PublishNotebookPaneProps) => {
   const [type, setType] = useState<string>(ImageTypes.CustomImage);
   const CARD_WIDTH = 256;
@@ -63,25 +66,40 @@ export const PublishNotebookPaneComponent: FunctionComponent<PublishNotebookPane
   )}" to the gallery?`;
 
   const options: ImageTypes[] = [ImageTypes.CustomImage, ImageTypes.Url];
+  if (onTakeSnapshot) {
+    options.push(ImageTypes.TakeScreenshot);
+    if (notebookObject) {
+      options.push(ImageTypes.UseFirstDisplayOutput);
+    }
+  }
+
   const thumbnailSelectorProps: IDropdownProps = {
     label: "Cover image",
-    defaultSelectedKey: ImageTypes.CustomImage,
+    selectedKey: type,
     ariaLabel: "Cover image",
     options: options.map((value: string) => ({ text: value, key: value })),
     onChange: async (event, options) => {
       setImageSrc("");
       clearFormError();
       if (options.text === ImageTypes.TakeScreenshot) {
-        try {
-          await takeScreenshot(notebookParentDomElement, screenshotErrorHandler);
-        } catch (error) {
-          screenshotErrorHandler(error);
-        }
+        onTakeSnapshot({
+          aspectRatio: cardHeightToWidthRatio,
+          requestId: new Date().getTime().toString(),
+          type: "notebook",
+          notebookContentRef,
+        });
       } else if (options.text === ImageTypes.UseFirstDisplayOutput) {
-        try {
-          await takeScreenshot(findFirstOutput(), firstOutputErrorHandler);
-        } catch (error) {
-          firstOutputErrorHandler(error);
+        const cellIds = NotebookUtil.findCodeCellWithDisplay(notebookObject);
+        if (cellIds.length > 0) {
+          onTakeSnapshot({
+            aspectRatio: cardHeightToWidthRatio,
+            requestId: new Date().getTime().toString(),
+            type: "celloutput",
+            cellId: cellIds[0],
+            notebookContentRef,
+          });
+        } else {
+          firstOutputErrorHandler(new Error("Output does not exist for any of the cells."));
         }
       }
       setType(options.text);
@@ -97,13 +115,6 @@ export const PublishNotebookPaneComponent: FunctionComponent<PublishNotebookPane
     },
   };
 
-  const screenshotErrorHandler = (error: Error) => {
-    const formError = "Failed to take screen shot";
-    const formErrorDetail = `${error}`;
-    const area = "PublishNotebookPaneComponent/takeScreenshot";
-    onError(formError, formErrorDetail, area);
-  };
-
   const firstOutputErrorHandler = (error: Error) => {
     const formError = "Failed to capture first output";
     const formErrorDetail = `${error}`;
@@ -111,13 +122,6 @@ export const PublishNotebookPaneComponent: FunctionComponent<PublishNotebookPane
     onError(formError, formErrorDetail, area);
   };
 
-  if (notebookParentDomElement) {
-    options.push(ImageTypes.TakeScreenshot);
-    if (notebookObject) {
-      options.push(ImageTypes.UseFirstDisplayOutput);
-    }
-  }
-
   const imageToBase64 = (file: File, updateImageSrc: (result: string) => void) => {
     const reader = new FileReader();
     reader.readAsDataURL(file);
@@ -133,36 +137,6 @@ export const PublishNotebookPaneComponent: FunctionComponent<PublishNotebookPane
     };
   };
 
-  const takeScreenshot = (target: HTMLElement, onError: (error: Error) => void): void => {
-    const updateImageSrcWithScreenshot = (canvasUrl: string): void => {
-      setImageSrc(canvasUrl);
-    };
-
-    target.scrollIntoView();
-    Html2Canvas(target, {
-      useCORS: true,
-      allowTaint: true,
-      scale: 1,
-      logging: true,
-    })
-      .then((canvas) => {
-        //redraw canvas to fit Card Cover Image dimensions
-        const originalImageData = canvas.toDataURL();
-        const requiredHeight = parseInt(canvas.style.width.split("px")[0]) * cardHeightToWidthRatio;
-        canvas.height = requiredHeight;
-        const context = canvas.getContext("2d");
-        const image = new Image();
-        image.src = originalImageData;
-        image.onload = () => {
-          context.drawImage(image, 0, 0);
-          updateImageSrcWithScreenshot(canvas.toDataURL());
-        };
-      })
-      .catch((error) => {
-        onError(error);
-      });
-  };
-
   const renderThumbnailSelectors = (type: string) => {
     switch (type) {
       case ImageTypes.Url:
@@ -198,12 +172,6 @@ export const PublishNotebookPaneComponent: FunctionComponent<PublishNotebookPane
     }
   };
 
-  const findFirstOutput = (): HTMLElement => {
-    const indexOfFirstCodeCellWithDisplay = NotebookUtil.findFirstCodeCellWithDisplay(notebookObject);
-    const cellOutputDomElements = notebookParentDomElement.querySelectorAll<HTMLElement>(".nteract-cell-outputs");
-    return cellOutputDomElements[indexOfFirstCodeCellWithDisplay];
-  };
-
   return (
     <div className="publishNotebookPanelContent">
       <Stack className="panelMainContent" tokens={{ childrenGap: 20 }}>

src/Explorer/Panes/PublishNotebookPane/__snapshots__/PublishNotebookPane.test.tsx.snap

@@ -52,7 +52,6 @@ exports[`PublishNotebookPaneComponent renders 1`] = `
     <StackItem>
       <Dropdown
         ariaLabel="Cover image"
-        defaultSelectedKey="Custom Image"
         label="Cover image"
         onChange={[Function]}
         options={
@@ -67,6 +66,7 @@ exports[`PublishNotebookPaneComponent renders 1`] = `
             },
           ]
         }
+        selectedKey="Custom Image"
       />
     </StackItem>
     <StackItem>