From 55e645131fb71659167d7d7732a57af1b104b83a Mon Sep 17 00:00:00 2001
From: Boris Edigariani <sys1988@gmail.com>
Date: Tue, 6 Aug 2024 16:05:39 +0400
Subject: [PATCH] feat: added diagram preview and edit functionality

---
 appsscript.json                               |  17 ---
 .../components/edit-diagram-dialog.tsx        |  36 +++--
 .../components/preview-diagram-dialog.tsx     |  70 +++++++++
 src/client/preview-diagram-dialog/index.html  |  33 +++++
 src/client/preview-diagram-dialog/index.jsx   |   7 +
 src/client/preview-diagram-dialog/styles.css  |   4 +
 src/client/sidebar/components/Sidebar.tsx     | 139 +++++++++++-------
 src/server/index.ts                           |   6 +-
 src/server/ui.js                              |  63 ++++----
 vite.config.ts                                |   5 +
 10 files changed, 269 insertions(+), 111 deletions(-)
 create mode 100644 src/client/preview-diagram-dialog/components/preview-diagram-dialog.tsx
 create mode 100644 src/client/preview-diagram-dialog/index.html
 create mode 100644 src/client/preview-diagram-dialog/index.jsx
 create mode 100644 src/client/preview-diagram-dialog/styles.css

diff --git a/appsscript.json b/appsscript.json
index b52ef40..ac5a99a 100644
--- a/appsscript.json
+++ b/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"
 }
diff --git a/src/client/edit-diagram-dialog/components/edit-diagram-dialog.tsx b/src/client/edit-diagram-dialog/components/edit-diagram-dialog.tsx
index 1e35522..4330607 100644
--- a/src/client/edit-diagram-dialog/components/edit-diagram-dialog.tsx
+++ b/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,20 +14,26 @@ 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);
@@ -33,7 +41,7 @@ const EditDiagramDialog = () => {
     };
 
     getMetadata();
-  }, [authState]);
+  }, [authState, editUrl]);
 
   useEffect(() => {
     const handleMessage = async (e: MessageEvent) => {
diff --git a/src/client/preview-diagram-dialog/components/preview-diagram-dialog.tsx b/src/client/preview-diagram-dialog/components/preview-diagram-dialog.tsx
new file mode 100644
index 0000000..94dccca
--- /dev/null
+++ b/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;
diff --git a/src/client/preview-diagram-dialog/index.html b/src/client/preview-diagram-dialog/index.html
new file mode 100644
index 0000000..20bd2dd
--- /dev/null
+++ b/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/react@18.2.0/umd/react.production.min.js"
+    ></script>
+    <script
+      crossorigin
+      src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js"
+    ></script>
+    <script
+      crossorigin
+      src="https://unpkg.com/@mui/material@5.11.11/umd/material-ui.production.min.js"
+    ></script>
+    <script
+      crossorigin
+      src="https://unpkg.com/gas-client@1.1.1/dist/index.js"
+    ></script>
+    <script
+      crossorigin
+      src="https://unpkg.com/@types/react@18.2.66/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>
diff --git a/src/client/preview-diagram-dialog/index.jsx b/src/client/preview-diagram-dialog/index.jsx
new file mode 100644
index 0000000..44b3dc1
--- /dev/null
+++ b/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 />);
diff --git a/src/client/preview-diagram-dialog/styles.css b/src/client/preview-diagram-dialog/styles.css
new file mode 100644
index 0000000..dfb6691
--- /dev/null
+++ b/src/client/preview-diagram-dialog/styles.css
@@ -0,0 +1,4 @@
+/* needed to make consistent test snapshots across OSs */
+body {
+  font-family: Arial !important;
+}
diff --git a/src/client/sidebar/components/Sidebar.tsx b/src/client/sidebar/components/Sidebar.tsx
index 341a4cb..f34dc13 100644
--- a/src/client/sidebar/components/Sidebar.tsx
+++ b/src/client/sidebar/components/Sidebar.tsx
@@ -25,6 +25,10 @@ const Sidebar = () => {
   const intervalRef = useRef<number | null>(null);
   const [diagramsUrl, setDiagramsUrl] = useState<string>('');
   const [chartImages, setChartImages] = useState<ChartImage[]>([]);
+  const [chartImagesState, setChartImagesState] = useState('idle');
+  const [createDiagramState, setCreateDiagramState] = useState('idle');
+  const [selectDiagramState, setSelectDiagramState] = useState('idle');
+  const [updateDiagramsState, setUpdateDiagramsState] = useState('idle');
   const { authState, authStatus, getAuth, signOut } = useAuth();
 
   useEffect(() => {
@@ -44,20 +48,24 @@ const Sidebar = () => {
 
   const getImages = useCallback(async () => {
     try {
+      setChartImagesState('loading');
       const images = await serverFunctions.getChartImages();
       setChartImages(images);
+      setChartImagesState('success');
     } catch (error) {
       console.error('Error getting images', error);
+      setChartImagesState('error');
     }
   }, []);
 
   useEffect(() => {
     getImages();
-  }, [getImages]);
+  }, [getImages, tab]);
 
   useEffect(() => {
     const handleMessage = async (e: MessageEvent) => {
       const action = e.data.action;
+      console.log('action', action);
       if (action === 'save') {
         const data = e.data.data;
         const metadata = new URLSearchParams({
@@ -71,9 +79,28 @@ const Sidebar = () => {
             data.diagramImage,
             metadata.toString()
           );
+          getImages();
         } catch (error) {
           console.error('Error inserting image with metadata', error);
         }
+      } else if (action === 'edit') {
+        const data = e.data;
+        if (!data.editUrl) return;
+        try {
+          localStorage.setItem('editUrl', data.editUrl);
+          await serverFunctions.openEditDiagramDialogWithUrl(data.editUrl);
+        } catch (error) {
+          console.error('Error opening edit dialog', error);
+        }
+      } else if (action === 'view') {
+        console.log(e.data);
+        if (!e.data.url) return;
+        try {
+          localStorage.setItem('previewUrl', e.data.url);
+          await serverFunctions.openPreviewDiagramDialog();
+        } catch (error) {
+          console.error('Error opening edit dialog', error);
+        }
       }
     };
 
@@ -109,36 +136,36 @@ const Sidebar = () => {
     }
   };
 
-  // const handleLogOut = async () => {
-  //   try {
-  //     await serverFunctions.revokeOAuth();
-  //     setTimeout(getAuth, 500);
-  //   } catch (error) {
-  //     console.error('Error revoking OAuth:', error);
-  //   }
-  // };
-
   const handleDiagramsUpdate = async () => {
     try {
+      setUpdateDiagramsState('loading');
       await serverFunctions.syncImages();
+      setUpdateDiagramsState('success');
     } catch (error) {
       console.error('Error updating all diagrams', error);
+      setUpdateDiagramsState('error');
     }
   };
 
   const handleSelectDiagram = async () => {
     try {
+      setSelectDiagramState('loading');
       await serverFunctions.openSelectDiagramDialog();
+      setSelectDiagramState('success');
     } catch (error) {
       console.error('Error inserting diagram', error);
+      setSelectDiagramState('error');
     }
   };
 
   const handleCreateDiagram = async () => {
     try {
+      setCreateDiagramState('loading');
       await serverFunctions.openCreateDiagramDialog();
+      setCreateDiagramState('success');
     } catch (error) {
       console.error('Error creating new diagram', error);
+      setCreateDiagramState('error');
     }
   };
 
@@ -255,6 +282,7 @@ const Sidebar = () => {
                   textTransform: 'initial',
                 }}
                 onClick={handleCreateDiagram}
+                disabled={createDiagramState === 'loading'}
               >
                 New diagram
               </Button>
@@ -269,6 +297,7 @@ const Sidebar = () => {
                   textTransform: 'initial',
                 }}
                 onClick={handleSelectDiagram}
+                disabled={selectDiagramState === 'loading'}
               >
                 Browse diagrams
               </Button>
@@ -282,6 +311,7 @@ const Sidebar = () => {
                   textTransform: 'initial',
                 }}
                 onClick={handleDiagramsUpdate}
+                disabled={updateDiagramsState === 'loading'}
               >
                 Update all diagrams
               </Button>
@@ -308,48 +338,55 @@ const Sidebar = () => {
                     />
                   </Tabs>
                 </Box>
-                {tab === 0 ? (
-                  <iframe
-                    src={diagramsUrl}
-                    title="diagrams"
-                    style={{
-                      border: 'none',
-                      marginTop: '20px',
-                      width: '100%',
-                      height: 'calc(100vh - 520px)',
-                    }}
-                  />
-                ) : (
-                  <Container
-                    sx={{
-                      display: 'flex',
-                      flexDirection: 'column',
-                      alignItems: 'center',
-                      gap: '20px',
-                      marginTop: '20px',
-                    }}
-                  >
-                    {chartImages.map((image) => (
-                      <div
-                        key={image.altDescription}
-                        onClick={() =>
-                          handleSelectedImage(image.altDescription)
-                        }
-                      >
-                        <img
-                          src={image.image}
-                          alt={image.altDescription}
-                          style={{
-                            width: '200px',
-                            height: 'auto',
-                            marginBottom: '10px',
-                            cursor: 'pointer',
-                          }}
-                        />
-                      </div>
+                <iframe
+                  src={diagramsUrl}
+                  title="diagrams"
+                  style={{
+                    border: 'none',
+                    marginTop: '20px',
+                    width: '260px',
+                    height: 'calc(100vh - 520px)',
+                    display: tab === 0 ? 'block' : 'none',
+                  }}
+                />
+                <Container
+                  sx={{
+                    display: tab === 1 ? 'flex' : 'none',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    gap: '20px',
+                    marginTop: '20px',
+                    height: 'calc(100vh - 520px)',
+                    overflowY: 'auto',
+                  }}
+                >
+                  {chartImagesState !== 'error' &&
+                    (chartImages.length > 0 ? (
+                      chartImages.map((image) => (
+                        <div
+                          key={image.altDescription}
+                          onClick={() =>
+                            handleSelectedImage(image.altDescription)
+                          }
+                        >
+                          <img
+                            src={image.image}
+                            alt={image.altDescription}
+                            style={{
+                              width: '200px',
+                              height: 'auto',
+                              marginBottom: '10px',
+                              cursor: 'pointer',
+                            }}
+                          />
+                        </div>
+                      ))
+                    ) : (
+                      <Typography title="h4" textAlign="center">
+                        No selected diagrams
+                      </Typography>
                     ))}
-                  </Container>
-                )}
+                </Container>
               </Box>
             </>
           ) : (
diff --git a/src/server/index.ts b/src/server/index.ts
index 8062113..8050ee9 100644
--- a/src/server/index.ts
+++ b/src/server/index.ts
@@ -2,7 +2,9 @@ import {
   onOpen,
   openCreateDiagramDialog,
   openEditDiagramDialog,
+  openEditDiagramDialogWithUrl,
   openSelectDiagramDialog,
+  openPreviewDiagramDialog,
   openSidebar,
   getOAuthURL,
   handleCallback,
@@ -14,7 +16,6 @@ import {
   syncImages,
   selectChartImage,
   getChartImages,
-  checkChartsLimit,
 } from './ui';
 
 // Public functions must be exported as named exports
@@ -22,7 +23,9 @@ export {
   onOpen,
   openCreateDiagramDialog,
   openEditDiagramDialog,
+  openEditDiagramDialogWithUrl,
   openSelectDiagramDialog,
+  openPreviewDiagramDialog,
   openSidebar,
   getOAuthURL,
   handleCallback,
@@ -34,5 +37,4 @@ export {
   syncImages,
   selectChartImage,
   getChartImages,
-  checkChartsLimit,
 };
diff --git a/src/server/ui.js b/src/server/ui.js
index db94794..d7f5ed9 100644
--- a/src/server/ui.js
+++ b/src/server/ui.js
@@ -12,13 +12,6 @@ export const onOpen = () => {
 };
 
 export const openCreateDiagramDialog = () => {
-  // const code = checkChartsLimit();
-  // if (code === 401) {
-  //   DocumentApp.getUi().alert(
-  //     'You have reached your five diagram limit on the Free tier.'
-  //   );
-  //   return;
-  // }
   const html = HtmlService.createHtmlOutputFromFile('create-diagram-dialog')
     .append(
       `<script>
@@ -42,6 +35,7 @@ export const openEditDiagramDialog = () => {
     DocumentApp.getUi().alert('No selection found. Please select an image.');
     return;
   }
+
   const html = HtmlService.createHtmlOutputFromFile('edit-diagram-dialog')
     .append(
       `<script>
@@ -54,6 +48,41 @@ export const openEditDiagramDialog = () => {
     )
     .setWidth(1366)
     .setHeight(768);
+
+  DocumentApp.getUi().showModalDialog(html, 'Edit Diagram');
+};
+
+export const openPreviewDiagramDialog = () => {
+  const html = HtmlService.createHtmlOutputFromFile('preview-diagram-dialog')
+    .append(
+      `<script>
+      window.addEventListener('message', function(event) {
+        if (event.data === "closeDialog") {
+            google.script.host.close();
+        }
+      }, false);
+    </script>`
+    )
+    .setWidth(1366)
+    .setHeight(768);
+
+  DocumentApp.getUi().showModalDialog(html, 'Preview Diagram');
+};
+
+export const openEditDiagramDialogWithUrl = (editUrl) => {
+  const html = HtmlService.createHtmlOutputFromFile('edit-diagram-dialog')
+    .append(
+      `<script>
+      window.addEventListener('message', function(event) {
+        if (event.data === "closeDialog") {
+            google.script.host.close();
+        }
+      }, false);
+    </script>`
+    )
+    .setWidth(1366)
+    .setHeight(768);
+
   DocumentApp.getUi().showModalDialog(html, 'Edit Diagram');
 };
 
@@ -415,23 +444,3 @@ export const selectChartImage = (altDescription) => {
   // Set the selection to the range that includes the second image
   DocumentApp.getActiveDocument().setSelection(range);
 };
-
-export function checkChartsLimit() {
-  const { token } = getAuthorizationState();
-
-  // Fetch the new image as a blob with error handling
-  const response = UrlFetchApp.fetch(
-    `${baseURL}/app/diagrams/new?pluginSource=googledocs`,
-    {
-      muteHttpExceptions: true,
-      headers: {
-        Cookie: `mc-auth-token=${token}`,
-      },
-    }
-  );
-  if (response.getResponseCode() === 402) {
-    DocumentApp.getUi().alert('No selection found. Please select an image.');
-    return;
-  }
-  return response.getResponseCode();
-}
diff --git a/vite.config.ts b/vite.config.ts
index 8e13cd7..3231126 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -30,6 +30,11 @@ const clientEntrypoints = [
     filename: 'select-diagram-dialog',
     template: 'select-diagram-dialog/index.html',
   },
+  {
+    name: 'CLIENT - Preview Diagram Dialog',
+    filename: 'preview-diagram-dialog',
+    template: 'preview-diagram-dialog/index.html',
+  },
   {
     name: 'CLIENT - Sidebar',
     filename: 'sidebar',