Merge pull request #67 from Exabyte-io/feature/SOF-7286

Feature/SOF-7286 feat: add JupyterLite Session component

dist/mui/components/accordion/Accordion.d.ts

@@ -1,9 +1,9 @@
 import React from "react";
 export interface AccordionProps {
-    hideExpandIcon: boolean;
-    children: React.ReactNode;
+    hideExpandIcon?: boolean;
+    children?: React.ReactNode;
     isExpanded: boolean;
-    header: React.ReactNode;
-    alternativeComponent: React.ReactNode;
+    header?: React.ReactNode;
+    renderSummary?: React.ReactNode;
 }
-export default function Accordion({ hideExpandIcon, children, isExpanded, header, alternativeComponent, ...restProps }: AccordionProps): React.JSX.Element;
+export default function Accordion({ hideExpandIcon, children, isExpanded, header, renderSummary, ...restProps }: AccordionProps): React.JSX.Element;

dist/mui/components/accordion/Accordion.js

@@ -39,7 +39,7 @@ const AccordionSummary = withStyles({
     },
     expanded: {},
 })(MuiAccordionSummary);
-export default function Accordion({ hideExpandIcon, children, isExpanded, header, alternativeComponent, ...restProps }) {
+export default function Accordion({ hideExpandIcon, children, isExpanded, header, renderSummary, ...restProps }) {
     const [isExpanded_, setIsExpanded] = useState(isExpanded);
     useEffect(() => {
         setIsExpanded(isExpanded);
@@ -51,9 +51,7 @@ export default function Accordion({ hideExpandIcon, children, isExpanded, header
         }
     };
     return (React.createElement(StyledAccordion, { defaultExpanded: isExpanded, expanded: isExpanded_, ...restProps },
-        React.createElement(AccordionSummary, { onClick: handleToggleExpanded, "aria-controls": "panel2a-content", expandIcon: !hideExpandIcon && React.createElement(IconByName, { name: "actions.expand" }) },
-            React.createElement(Typography, { variant: "overline" }, header),
-            alternativeComponent),
+        React.createElement(AccordionSummary, { onClick: handleToggleExpanded, "aria-controls": "panel2a-content", expandIcon: !hideExpandIcon && React.createElement(IconByName, { name: "actions.expand" }) }, renderSummary || React.createElement(Typography, { variant: "overline" }, header)),
         React.createElement(Divider, null),
         React.createElement(AccordionDetails, null, children)));
 }

dist/other/iframe-messaging/IframeToFromHostMessageHandler.d.ts

@@ -0,0 +1,14 @@
+import { IframeMessageSchema } from "@mat3ra/esse/lib/js/types";
+type HandlerFunction = (...args: IframeMessageSchema["payload"][]) => void | any;
+declare class IframeToFromHostMessageHandler {
+    private handlers;
+    private iframeOriginURL;
+    private hostOriginURL;
+    private iframeId;
+    init(iframeOriginURL: string, iframeId: string): void;
+    destroy(): void;
+    addHandlers(action: IframeMessageSchema["action"], handlers: HandlerFunction[]): void;
+    private receiveMessage;
+    sendData(data: object): void;
+}
+export default IframeToFromHostMessageHandler;

dist/other/iframe-messaging/IframeToFromHostMessageHandler.js

@@ -0,0 +1,57 @@
+class IframeToFromHostMessageHandler {
+    constructor() {
+        this.handlers = { "get-data": [], "set-data": [], info: [] };
+        // Default values for the origin URLs  to pass the CORS policy, if not provided from the parent component
+        this.iframeOriginURL = "*";
+        this.hostOriginURL = "*";
+        // The DOM id of the iframe that is loaded in the host page to send messages from/to
+        this.iframeId = "";
+        this.receiveMessage = (event) => {
+            if (this.iframeOriginURL !== "*" &&
+                event.origin !== this.iframeOriginURL &&
+                event.origin !== this.hostOriginURL) {
+                return;
+            }
+            if (event.data.type === "from-iframe-to-host") {
+                const { action, payload } = event.data;
+                if (this.handlers[action]) {
+                    this.handlers["set-data"].forEach((handler) => {
+                        handler(payload);
+                    });
+                    this.handlers["get-data"].forEach((handler) => {
+                        const data = handler();
+                        this.sendData(data);
+                    });
+                }
+            }
+        };
+    }
+    init(iframeOriginURL, iframeId) {
+        window.addEventListener("message", this.receiveMessage);
+        this.iframeOriginURL = iframeOriginURL;
+        this.hostOriginURL = window.location.origin;
+        this.iframeId = iframeId;
+    }
+    destroy() {
+        window.removeEventListener("message", this.receiveMessage);
+    }
+    addHandlers(action, handlers) {
+        if (!this.handlers[action]) {
+            this.handlers[action] = [];
+        }
+        this.handlers[action].push(...handlers);
+    }
+    sendData(data) {
+        const message = {
+            type: "from-host-to-iframe",
+            action: "set-data",
+            payload: data,
+        };
+        const iframe = document.getElementById(this.iframeId);
+        if (iframe) {
+            // @ts-ignore
+            iframe.contentWindow.postMessage(message, this.iframeOriginURL);
+        }
+    }
+}
+export default IframeToFromHostMessageHandler;

dist/other/iframe-messaging/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./IframeToFromHostMessageHandler";

dist/other/iframe-messaging/index.js

@@ -0,0 +1 @@
+export { default } from "./IframeToFromHostMessageHandler";

dist/other/jupyterlite/JupyterLiteSession.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import IframeToFromHostMessageHandler from "../iframe-messaging/IframeToFromHostMessageHandler";
+interface JupyterLiteSessionProps {
+    originURL: string;
+    defaultNotebookPath?: string;
+    iframeId: string;
+    messageHandler?: IframeToFromHostMessageHandler;
+}
+declare class JupyterLiteSession extends React.Component<JupyterLiteSessionProps> {
+    static defaultProps: JupyterLiteSessionProps;
+    constructor(props?: JupyterLiteSessionProps);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    render(): React.JSX.Element;
+}
+export default JupyterLiteSession;

dist/other/jupyterlite/JupyterLiteSession.js

@@ -0,0 +1,30 @@
+import React from "react";
+const defaultProps = {
+    // eslint-disable-next-line react/default-props-match-prop-types
+    originURL: "https://jupyterlite.mat3ra.com",
+    // eslint-disable-next-line react/default-props-match-prop-types
+    iframeId: "jupyter-lite-iframe",
+};
+class JupyterLiteSession extends React.Component {
+    constructor(props = defaultProps) {
+        super(props);
+    }
+    componentDidMount() {
+        const { messageHandler, originURL, iframeId } = this.props;
+        messageHandler === null || messageHandler === void 0 ? void 0 : messageHandler.init(originURL, iframeId);
+    }
+    componentWillUnmount() {
+        const { messageHandler } = this.props;
+        messageHandler === null || messageHandler === void 0 ? void 0 : messageHandler.destroy();
+    }
+    render() {
+        const { defaultNotebookPath, originURL, iframeId } = this.props;
+        const src = defaultNotebookPath
+            ? `${originURL}/lab/tree?path=${defaultNotebookPath}`
+            : `${originURL}/lab`;
+        return (React.createElement("iframe", { name: "jupyterlite", title: "JupyterLite", id: iframeId, src: src, sandbox: "allow-scripts allow-same-origin allow-popups allow-forms allow-modals allow-top-navigation-by-user-activation allow-downloads", width: "100%", height: "100%" }));
+    }
+}
+// eslint-disable-next-line react/static-property-placement
+JupyterLiteSession.defaultProps = defaultProps;
+export default JupyterLiteSession;

dist/other/jupyterlite/MessageHandler.d.ts

@@ -0,0 +1,14 @@
+import { IframeMessageSchema } from "@mat3ra/esse/lib/js/types";
+type HandlerFunction = (...args: IframeMessageSchema["payload"][]) => void | any;
+declare class MessageHandler {
+    private handlers;
+    private iframeOriginURL;
+    private hostOriginURL;
+    private iframeId;
+    init(iframeOriginURL: string, iframeId: string): void;
+    destroy(): void;
+    addHandlers(action: IframeMessageSchema["action"], handlers: HandlerFunction[]): void;
+    private receiveMessage;
+    sendData(data: object): void;
+}
+export default MessageHandler;

dist/other/jupyterlite/MessageHandler.js

@@ -0,0 +1,57 @@
+class MessageHandler {
+    constructor() {
+        this.handlers = { "get-data": [], "set-data": [], info: [] };
+        this.iframeOriginURL = "*";
+        this.hostOriginURL = "*";
+        this.iframeId = "";
+        this.receiveMessage = (event) => {
+            if (this.iframeOriginURL !== "*" &&
+                event.origin !== this.iframeOriginURL &&
+                event.origin !== this.hostOriginURL) {
+                return;
+            }
+            if (event.data.type === "from-iframe-to-host") {
+                const { action, payload } = event.data;
+                // @ts-ignore
+                if (this.handlers[action]) {
+                    // @ts-ignore
+                    this.handlers["set-data"].forEach((handler) => {
+                        handler(payload);
+                    });
+                    this.handlers["get-data"].forEach((handler) => {
+                        const data = handler();
+                        this.sendData(data);
+                    });
+                }
+            }
+        };
+    }
+    init(iframeOriginURL, iframeId) {
+        window.addEventListener("message", this.receiveMessage);
+        this.iframeOriginURL = iframeOriginURL;
+        this.hostOriginURL = window.location.origin;
+        this.iframeId = iframeId;
+    }
+    destroy() {
+        window.removeEventListener("message", this.receiveMessage);
+    }
+    addHandlers(action, handlers) {
+        if (!this.handlers[action]) {
+            this.handlers[action] = [];
+        }
+        this.handlers[action].push(...handlers);
+    }
+    sendData(data) {
+        const message = {
+            type: "from-host-to-iframe",
+            action: "set-data",
+            payload: data,
+        };
+        const iframe = document.getElementById(this.iframeId);
+        if (iframe) {
+            // @ts-ignore
+            iframe.contentWindow.postMessage(message, this.iframeOriginURL);
+        }
+    }
+}
+export default MessageHandler;

dist/other/jupyterlite/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./JupyterLiteSession";

dist/other/jupyterlite/index.js

@@ -0,0 +1 @@
+export { default } from "./JupyterLiteSession";