feat: added diagram preview and edit functionality

appsscript.json

@@ -15,22 +15,5 @@
     "https://www.googleapis.com/auth/script.external_request",
     "https://www.googleapis.com/auth/documents"
   ],
-  "addOns": {
-    "common": {
-      "name": "Mermaid Chart",
-      "logoUrl": "https://www.mermaidchart.com/img/mermaid-chart-48.png",
-      "useLocaleFromApp": true,
-      "universalActions": [
-        {
-          "label": "Learn more about Mermaid Chart",
-          "openLink": "www.mermaidchart.com"
-        }
-      ],
-      "layoutProperties": {
-        "primaryColor": "#424242",
-        "secondaryColor": "#ff3670"
-      }
-    }
-  },
   "runtimeVersion": "V8"
 }

src/client/edit-diagram-dialog/components/edit-diagram-dialog.tsx

@@ -3,6 +3,8 @@ import { serverFunctions } from '../../utils/serverFunctions';
 import { buildUrl, handleDialogClose } from '../../utils/helpers';
 import useAuth from '../../hooks/useAuth';
 
+const editUrl = localStorage.getItem('editUrl');
+
 const EditDiagramDialog = () => {
   const { authState, authStatus } = useAuth();
   const [diagramsUrl, setDiagramsUrl] = useState('');
@@ -12,28 +14,34 @@ const EditDiagramDialog = () => {
 
     const getMetadata = async () => {
       try {
+        if (editUrl) {
+          const iframeUrl = buildUrl(editUrl, authState.token);
+          setDiagramsUrl(iframeUrl);
+          localStorage.removeItem('editUrl');
+          return;
+        }
         const metadata = await serverFunctions.readSelectedImageMetadata();
-        if (typeof metadata === 'string') {
-          const params = new URLSearchParams(metadata);
-          const projectID = params.get('projectID');
-          const documentID = params.get('documentID');
-          const major = params.get('major');
-          const minor = params.get('minor');
-          if (projectID && documentID && major && minor) {
-            const iframeUrl = buildUrl(
-              `/app/projects/${projectID}/diagrams/${documentID}/version/v.${major}.${minor}/edit`,
-              authState.token
-            );
-            setDiagramsUrl(iframeUrl);
-          }
+        if (typeof metadata !== 'string') return;
+
+        const params = new URLSearchParams(metadata);
+        const projectID = params.get('projectID');
+        const documentID = params.get('documentID');
+        const major = params.get('major');
+        const minor = params.get('minor');
+        if (projectID && documentID && major && minor) {
+          const iframeUrl = buildUrl(
+            `/app/projects/${projectID}/diagrams/${documentID}/version/v.${major}.${minor}/edit`,
+            authState.token
+          );
+          setDiagramsUrl(iframeUrl);
         }
       } catch (error) {
         console.log(error);
       }
     };
 
     getMetadata();
-  }, [authState]);
+  }, [authState, editUrl]);
 
   useEffect(() => {
     const handleMessage = async (e: MessageEvent) => {

src/client/preview-diagram-dialog/components/preview-diagram-dialog.tsx

@@ -0,0 +1,70 @@
+import { useEffect, useState } from 'react';
+import { buildUrl } from '../../utils/helpers';
+import useAuth from '../../hooks/useAuth';
+import { CircularProgress, Container, Typography } from '@mui/material';
+
+const previewUrl = localStorage.getItem('previewUrl');
+
+const PreviewDiagramDialog = () => {
+  const { authState, authStatus } = useAuth();
+  const [diagramsUrl, setDiagramsUrl] = useState('');
+
+  useEffect(() => {
+    if (!authState?.authorized || !previewUrl) return;
+    const url = buildUrl(previewUrl, authState.token);
+    setDiagramsUrl(url);
+  }, [authState, previewUrl]);
+
+  if (authStatus === 'idle' || authStatus === 'loading') {
+    return (
+      <Container
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          height: '96.5vh',
+        }}
+      >
+        <CircularProgress />
+      </Container>
+    );
+  }
+
+  if (authStatus === 'error') {
+    return (
+      <Container
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          height: '96.5vh',
+        }}
+      >
+        <Typography variant="h5" gutterBottom my={2} textAlign="center">
+          Error
+        </Typography>
+        <Typography paragraph textAlign="center">
+          Something went wrong. Please try again later.
+        </Typography>
+      </Container>
+    );
+  }
+
+  return (
+    <div style={{ padding: '3px', overflowX: 'hidden', height: '100%' }}>
+      <iframe
+        src={diagramsUrl}
+        title="diagrams"
+        style={{
+          border: 'none',
+          width: '100%',
+          height: '96.5vh',
+        }}
+      />
+    </div>
+  );
+};
+
+export default PreviewDiagramDialog;

src/client/preview-diagram-dialog/index.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <base target="_top" />
+    <!-- Add any external scripts and stylesheets here -->
+    <script
+      crossorigin
+      src="https://unpkg.com/[email protected]/umd/react.production.min.js"
+    ></script>
+    <script
+      crossorigin
+      src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"
+    ></script>
+    <script
+      crossorigin
+      src="https://unpkg.com/@mui/[email protected]/umd/material-ui.production.min.js"
+    ></script>
+    <script
+      crossorigin
+      src="https://unpkg.com/[email protected]/dist/index.js"
+    ></script>
+    <script
+      crossorigin
+      src="https://unpkg.com/@types/[email protected]/index.d.ts"
+    ></script>
+  </head>
+  <body>
+    <section id="index">
+      <script type="module" src="./index.jsx"></script>
+      <!-- bundled js and css will get inlined here during build-->
+    </section>
+  </body>
+</html>

src/client/preview-diagram-dialog/index.jsx

@@ -0,0 +1,7 @@
+import ReactDOM from 'react-dom';
+import PreviewDiagramDialog from './components/preview-diagram-dialog';
+import './styles.css';
+
+const container = document.getElementById('index');
+const root = ReactDOM.createRoot(container);
+root.render(<PreviewDiagramDialog />);

src/client/preview-diagram-dialog/styles.css

@@ -0,0 +1,4 @@
+/* needed to make consistent test snapshots across OSs */
+body {
+  font-family: Arial !important;
+}