feat: implemented ui updates and new features

Author: boris0301

src/client/sidebar/components/LoadingOverlay.tsx renamed to src/client/components/loading-overlay.tsx

@@ -1,54 +1,35 @@
 import { useEffect, useState } from 'react';
 import { buildUrl, handleDialogClose } from '../../utils/helpers';
 import { serverFunctions } from '../../utils/serverFunctions';
+import useAuth from '../../hooks/useAuth';
+import { CircularProgress, Container, Typography } from '@mui/material';
 
-interface AuthState {
-  authorized: boolean;
-  token?: string;
-  message?: string;
-}
-
-type Status = 'idle' | 'loading' | 'success' | 'error';
-
-const Dialog = () => {
+const CreateDiagramDialog = () => {
+  const { authState, authStatus } = useAuth();
   const [diagramsUrl, setDiagramsUrl] = useState('');
-  const [, setAuthState] = useState<null | AuthState>(null);
-  const [authStatus, setAuthStatus] = useState<Status>('idle');
 
   useEffect(() => {
-    const getAuth = async () => {
-      setAuthStatus('loading');
-      try {
-        const state = await serverFunctions.getAuthorizationState();
-        setAuthState(state);
-        setAuthStatus('success');
-
-        if (state.authorized) {
-          const url = buildUrl('/app/plugins/confluence/select', state.token);
-          setDiagramsUrl(url);
-        }
-      } catch (error) {
-        console.log('Error getting auth data', error);
-        setAuthStatus('error');
-      }
-    };
-
-    getAuth();
-  }, []);
+    if (!authState?.authorized) return;
+    // const url = buildUrl('/app/plugins/confluence/select', state.token);
+    const url = buildUrl(
+      '/app/diagrams/new?pluginSource=googledocs',
+      authState.token
+    );
+    setDiagramsUrl(url);
+  }, [authState]);
 
   useEffect(() => {
     const handleMessage = async (e: MessageEvent) => {
       const action = e.data.action;
-      console.log('action', action, e.data);
       if (action === 'save') {
         const data = e.data.data;
-        console.log(data);
         const metadata = new URLSearchParams({
           projectID: data.projectID,
           documentID: data.documentID,
           major: data.major,
           minor: data.minor,
         });
+
         try {
           await serverFunctions.insertBase64ImageWithMetadata(
             data.diagramImage,
@@ -68,8 +49,41 @@ const Dialog = () => {
     };
   }, []);
 
-  if (authStatus !== 'success') {
-    return null;
+  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 (
@@ -87,4 +101,4 @@ const Dialog = () => {
   );
 };
 
-export default Dialog;
+export default CreateDiagramDialog;

src/client/dialog/components/Dialog.tsx renamed to src/client/create-diagram-dialog/components/create-diagram-dialog.tsx

@@ -0,0 +1,5 @@
+import ReactDOM from 'react-dom';
+import CreateDiagramDialog from './components/create-diagram-dialog';
+import './styles.css';
+
+ReactDOM.render(<CreateDiagramDialog />, document.getElementById('index'));

src/client/dialog/index.html renamed to src/client/create-diagram-dialog/index.html

@@ -3,23 +3,23 @@ import { serverFunctions } from '../../utils/serverFunctions';
 import { buildUrl, handleDialogClose } from '../../utils/helpers';
 import useAuth from '../../hooks/useAuth';
 
-const EditDialog = () => {
+const EditDiagramDialog = () => {
   const { authState, authStatus } = useAuth();
   const [diagramsUrl, setDiagramsUrl] = useState('');
 
   useEffect(() => {
-    if (!authState) return;
+    if (!authState?.authorized) return;
+
     const getMetadata = async () => {
       try {
         const metadata = await serverFunctions.readSelectedImageMetadata();
-        console.log(metadata, 'metadata');
         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 && authState?.token) {
+          if (projectID && documentID && major && minor) {
             const iframeUrl = buildUrl(
               `/app/projects/${projectID}/diagrams/${documentID}/version/v.${major}.${minor}/edit`,
               authState.token
@@ -31,6 +31,7 @@ const EditDialog = () => {
         console.log(error);
       }
     };
+
     getMetadata();
   }, [authState]);
 
@@ -84,4 +85,4 @@ const EditDialog = () => {
   );
 };
 
-export default EditDialog;
+export default EditDiagramDialog;

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

@@ -0,0 +1,6 @@
+import ReactDOM from 'react-dom';
+import EditDiagramDialog from './components/edit-diagram-dialog';
+
+import './styles.css';
+
+ReactDOM.render(<EditDiagramDialog />, document.getElementById('index'));

src/client/dialog/styles.css renamed to src/client/create-diagram-dialog/styles.css

@@ -1,13 +1,18 @@
 import { useCallback, useEffect, useState } from 'react';
 import { serverFunctions } from '../utils/serverFunctions';
 
-interface AuthState {
-  authorized: boolean;
-  token?: string;
-  message?: string;
+type Status = 'idle' | 'loading' | 'success' | 'error';
+
+interface AuthorizedState {
+  authorized: true;
+  token: string;
 }
 
-type Status = 'idle' | 'loading' | 'success' | 'error';
+interface UnauthorizedState {
+  authorized: false;
+}
+
+type AuthState = AuthorizedState | UnauthorizedState;
 
 const useAuth = () => {
   const [authState, setAuthState] = useState<null | AuthState>(null);
@@ -17,7 +22,7 @@ const useAuth = () => {
     setAuthStatus('loading');
     try {
       const state = await serverFunctions.getAuthorizationState();
-      setAuthState(state);
+      setAuthState(state as AuthState);
       setAuthStatus('success');
     } catch (error) {
       console.log('Error getting auth data', error);
@@ -30,11 +35,15 @@ const useAuth = () => {
   }, [getAuth]);
 
   const signOut = async () => {
-    serverFunctions.resetOAuth();
-    setTimeout(getAuth, 2000);
+    try {
+      await serverFunctions.resetOAuth();
+      setTimeout(getAuth, 500);
+    } catch (error) {
+      console.error('Error revoking OAuth:', error);
+    }
   };
 
-  return { authState, authStatus, signOut };
+  return { authState, authStatus, getAuth, signOut };
 };
 
 export default useAuth;

src/client/dialog/index.jsx

@@ -0,0 +1,104 @@
+import { useEffect, useState } from 'react';
+import { buildUrl, handleDialogClose } from '../../utils/helpers';
+import { serverFunctions } from '../../utils/serverFunctions';
+import useAuth from '../../hooks/useAuth';
+import { CircularProgress, Container, Typography } from '@mui/material';
+
+const SelectDiagramDialog = () => {
+  const { authState, authStatus } = useAuth();
+  const [diagramsUrl, setDiagramsUrl] = useState('');
+
+  useEffect(() => {
+    if (!authState?.authorized) return;
+    // const url = buildUrl('/app/plugins/confluence/select', state.token);
+    const url = buildUrl(
+      '/app/plugins/select?pluginSource=googledocs',
+      authState.token
+    );
+    setDiagramsUrl(url);
+  }, [authState]);
+
+  useEffect(() => {
+    const handleMessage = async (e: MessageEvent) => {
+      const action = e.data.action;
+      if (action === 'save') {
+        const data = e.data.data;
+        const metadata = new URLSearchParams({
+          projectID: data.projectID,
+          documentID: data.documentID,
+          major: data.major,
+          minor: data.minor,
+        });
+
+        try {
+          await serverFunctions.insertBase64ImageWithMetadata(
+            data.diagramImage,
+            metadata.toString()
+          );
+          handleDialogClose();
+        } catch (error) {
+          console.error('Error inserting image with metadata', error);
+        }
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+
+    return () => {
+      window.removeEventListener('message', handleMessage);
+    };
+  }, []);
+
+  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 SelectDiagramDialog;

src/client/edit-dialog/components/EditDialog.tsx renamed to src/client/edit-diagram-dialog/components/edit-diagram-dialog.tsx

@@ -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>

src/client/edit-dialog/index.html renamed to src/client/edit-diagram-dialog/index.html

@@ -0,0 +1,5 @@
+import ReactDOM from 'react-dom';
+import SelectDiagramDialog from './components/select-diagram-dialog';
+import './styles.css';
+
+ReactDOM.render(<SelectDiagramDialog />, document.getElementById('index'));

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

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