feat: add-ons menu added

Author: boris0301

.eslintignore

@@ -1,2 +1,5 @@
 /dist
-/node_modules
+/node_modules
+
+tailwind.config.js
+vite.config.ts

.eslintrc.json

@@ -2,7 +2,6 @@
   "root": true,
   "parser": "@typescript-eslint/parser",
   "extends": [
-    "airbnb-base",
     "plugin:prettier/recommended",
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended"
@@ -14,17 +13,7 @@
   "rules": {
     "prettier/prettier": "error",
     "camelcase": "warn",
-    "import/prefer-default-export": "warn",
-    "import/no-extraneous-dependencies": "warn",
-    "prefer-object-spread": "warn",
-    "import/extensions": [
-      "error",
-      "ignorePackages",
-      {
-        "js": "never",
-        "ts": "never"
-      }
-    ]
+    "prefer-object-spread": "warn"
   },
   "ignorePatterns": ["dist", ".eslintrc.json"],
   "settings": {

appsscript.json

@@ -1,10 +1,36 @@
 {
   "timeZone": "America/New_York",
-  "dependencies": {},
+  "dependencies": {
+    "libraries": [
+      {
+        "userSymbol": "OAuth2",
+        "version": "43",
+        "libraryId": "1B7FSrk5Zi6L1rSxxTDgDEUsPzlukDsi4KGuTMorsTQHhGBzBkMun4iDF"
+      }
+    ]
+  },
   "exceptionLogging": "STACKDRIVER",
   "oauthScopes": [
     "https://www.googleapis.com/auth/script.container.ui",
-    "https://www.googleapis.com/auth/spreadsheets"
+    "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"
 }

package.json

@@ -57,10 +57,8 @@
     "cross-env": "^7.0.3",
     "dotenv": "^16.4.5",
     "eslint": "^8.57.0",
-    "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-googleappsscript": "^1.0.4",
-    "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jest": "^26.5.3",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react-hooks": "^4.6.0",

src/client/.eslintrc.json

@@ -1,7 +1,6 @@
 {
   "root": true,
   "extends": [
-    "airbnb-base",
     "plugin:prettier/recommended",
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",
@@ -11,24 +10,13 @@
   "rules": {
     "prettier/prettier": "error",
     "camelcase": "warn",
-    "import/prefer-default-export": "warn",
-    "import/no-extraneous-dependencies": "warn",
     "prefer-object-spread": "warn",
     "spaced-comment": "off",
     "react-refresh/only-export-components": [
       "warn",
       { "allowConstantExport": true }
     ],
-    "import/extensions": [
-      "error",
-      "ignorePackages",
-      {
-        "js": "never",
-        "jsx": "never",
-        "ts": "never",
-        "tsx": "never"
-      }
-    ]
+    "@typescript-eslint/no-explicit-any": "off"
   },
   "settings": {
     "react": {

src/client/dialog/components/Dialog.tsx

@@ -1,9 +1,87 @@
+import { useEffect, useState } from 'react';
+import { buildUrl, handleDialogClose } from '../../utils/helpers';
+import { serverFunctions } from '../../utils/serverFunctions';
+
+interface AuthState {
+  authorized: boolean;
+  token?: string;
+  message?: string;
+}
+
+type Status = 'idle' | 'loading' | 'success' | 'error';
+
 const Dialog = () => {
+  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();
+  }, []);
+
+  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,
+            metadata.toString()
+          );
+          handleDialogClose();
+        } catch (error) {
+          console.error('Error inserting image with metadata', error);
+        }
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+
+    return () => {
+      window.removeEventListener('message', handleMessage);
+    };
+  }, []);
+
+  if (authStatus !== 'success') {
+    return null;
+  }
+
   return (
-    <div style={{ padding: '3px', overflowX: 'hidden' }}>
+    <div style={{ padding: '3px', overflowX: 'hidden', height: '100%' }}>
       <iframe
-        src="https://mermaid-js.github.io/mermaid-live-editor/edit/"
-        style={{ border: 'none', height: '742px', width: '100%' }}
+        src={diagramsUrl}
+        title="diagrams"
+        style={{
+          border: 'none',
+          width: '100%',
+          height: '96.5vh',
+        }}
       />
     </div>
   );

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

@@ -0,0 +1,87 @@
+import { useEffect, useState } from 'react';
+import { serverFunctions } from '../../utils/serverFunctions';
+import { buildUrl, handleDialogClose } from '../../utils/helpers';
+import useAuth from '../../hooks/useAuth';
+
+const EditDialog = () => {
+  const { authState, authStatus } = useAuth();
+  const [diagramsUrl, setDiagramsUrl] = useState('');
+
+  useEffect(() => {
+    if (!authState) 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) {
+            const iframeUrl = buildUrl(
+              `/app/projects/${projectID}/diagrams/${documentID}/version/v.${major}.${minor}/edit`,
+              authState.token
+            );
+            setDiagramsUrl(iframeUrl);
+          }
+        }
+      } catch (error) {
+        console.log(error);
+      }
+    };
+    getMetadata();
+  }, [authState]);
+
+  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({
+          projectID: data.projectID,
+          documentID: data.documentID,
+          major: data.major,
+          minor: data.minor,
+        });
+        try {
+          await serverFunctions.replaceSelectedImageWithBase64AndSize(
+            data.diagramImage,
+            metadata.toString()
+          );
+          handleDialogClose();
+        } catch (error) {
+          console.error('Error updating image with metadata', error);
+        }
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+
+    return () => {
+      window.removeEventListener('message', handleMessage);
+    };
+  }, []);
+
+  if (authStatus !== 'success' || !diagramsUrl) {
+    return null;
+  }
+
+  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 EditDialog;

src/client/edit-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>

src/client/edit-dialog/index.jsx

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

src/client/edit-dialog/styles.css

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

src/client/hooks/useAuth.ts

@@ -0,0 +1,40 @@
+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';
+
+const useAuth = () => {
+  const [authState, setAuthState] = useState<null | AuthState>(null);
+  const [authStatus, setAuthStatus] = useState<Status>('idle');
+
+  const getAuth = useCallback(async () => {
+    setAuthStatus('loading');
+    try {
+      const state = await serverFunctions.getAuthorizationState();
+      setAuthState(state);
+      setAuthStatus('success');
+    } catch (error) {
+      console.log('Error getting auth data', error);
+      setAuthStatus('error');
+    }
+  }, []);
+
+  useEffect(() => {
+    getAuth();
+  }, [getAuth]);
+
+  const signOut = async () => {
+    serverFunctions.resetOAuth();
+    setTimeout(getAuth, 2000);
+  };
+
+  return { authState, authStatus, signOut };
+};
+
+export default useAuth;