WiP netlify deploy

Author: devhelpr

apps/vps-web/src/app/netlify-deployment-wip/token-handler.ts

@@ -0,0 +1,31 @@
+export let netlifyAccessToken = '';
+export let netlifySiteId = '';
+export const netlifyTokenHandler = () => {
+  const siteId = document.cookie
+    .split('; ')
+    .find((row) => row.startsWith('netlify_site_id='))
+    ?.split('=')[1];
+  if (siteId) {
+    netlifySiteId = siteId;
+  }
+
+  const accessToken = document.cookie
+    .split('; ')
+    .find((row) => row.startsWith('netlify_access_token='))
+    ?.split('=')[1];
+  if (accessToken) {
+    netlifyAccessToken = accessToken;
+  } else {
+    const urlParams = new URLSearchParams(window.location.search);
+    const tokenFromUrl = urlParams.get('netlify_access_token');
+    if (tokenFromUrl) {
+      netlifyAccessToken = tokenFromUrl;
+      document.cookie = `netlify_access_token=${tokenFromUrl}; path=/; max-age=31536000; secure; samesite=strict`;
+    }
+  }
+};
+
+export const setNetlifySiteId = (siteId: string) => {
+  netlifySiteId = siteId;
+  document.cookie = `netlify_site_id=${siteId}; path=/; max-age=31536000; secure; samesite=strict`;
+};

apps/vps-web/src/main.tsx

@@ -6,12 +6,14 @@ import { pythonPage } from './app/pages/python';
 import { examplePage } from './app/pages/example';
 import {
   BaseNodeInfo,
+  createJSXElement,
   ElementNodeMap,
   Flow,
   IComputeResult,
   IConnectionNodeComponent,
   IFlowCanvasBase,
   IRectNodeComponent,
+  navBarButton,
   setupCustomEditor,
 } from '@devhelpr/visual-programming-system';
 import * as monaco from 'monaco-editor';
@@ -29,10 +31,18 @@ import {
   OffscreenCanvasNodes,
 } from './app/ai-flow-engine-worker/ai-flow-engine-worker-message';
 import { CanvasNode } from './app/custom-nodes/classes/canvas-node-class';
+import {
+  netlifyAccessToken,
+  netlifySiteId,
+  netlifyTokenHandler,
+  setNetlifySiteId,
+} from './app/netlify-deployment-wip/token-handler';
 
 /* @ts-expect-error:will-fix-later */
 const API_URL_ROOT = import.meta.env.VITE_API_URL;
 
+netlifyTokenHandler();
+
 setupCustomEditor(() => {
   let editorInstance: monaco.editor.IStandaloneCodeEditor | null = null;
   const resizeObserver: ResizeObserver | undefined = undefined;
@@ -328,6 +338,55 @@ if (url.pathname === '/run-flow') {
             node.nodeInfo.updateVisual(data);
           }
         },
+      },
+      undefined,
+      () => {
+        if (!url.searchParams.get('dev')) {
+          return null;
+        }
+        const deployWithNetlify = () => {
+          //const redirectUrl = `https://localhost:8787/netlify/code-flow-canvas`;
+          if (netlifyAccessToken) {
+            const postUrl =
+              'https://form-generator-worker.maikel-f16.workers.dev/netlify/deploy-code-flow-canvas';
+            fetch(postUrl, {
+              method: 'POST',
+              headers: {
+                'Content-Type': 'application/json',
+              },
+              body: JSON.stringify({
+                netlifyAccessToken: netlifyAccessToken,
+                netlifySiteId: netlifySiteId,
+              }),
+            })
+              .then((response) => response.json())
+              .then((data) => {
+                console.log('Deployment response:', data);
+                if (data.success) {
+                  alert('Deployment successful!');
+                  if (data.siteId) {
+                    setNetlifySiteId(data.siteId);
+                  }
+                } else {
+                  alert('Deployment failed: ' + data.message);
+                }
+              })
+              .catch((error) => {
+                console.error('Error during deployment:', error);
+                alert('Deployment failed: ' + error.message);
+              });
+          } else {
+            const redirectUrl =
+              'https://form-generator-worker.maikel-f16.workers.dev/netlify/code-flow-canvas';
+
+            fetch(redirectUrl);
+          }
+        };
+        return (
+          <button class={navBarButton} click={deployWithNetlify}>
+            Deploy
+          </button>
+        );
       }
     ); //, 100, 32);
   });

libs/app-canvas/src/app/flow-app.element.tsx

@@ -298,7 +298,8 @@ export class FlowAppElement extends AppElement<NodeInfo, FlowEngine> {
     hideFlowPresets?: boolean,
     theme?: Theme,
     flowEngine?: FlowEngine,
-    onSetCanvasApp?: (canvasApp: IFlowCanvasBase<NodeInfo>) => void
+    onSetCanvasApp?: (canvasApp: IFlowCanvasBase<NodeInfo>) => void,
+    customMenuButtons?: () => JSX.Element | null
   ) {
     super(
       appRootSelector,
@@ -941,6 +942,16 @@ export class FlowAppElement extends AppElement<NodeInfo, FlowEngine> {
               'Create composition'
             );
 
+            if (customMenuButtons) {
+              const element = customMenuButtons();
+              if (element) {
+                renderElement(
+                  element,
+                  menubarElement!.domElement as HTMLElement
+                );
+              }
+            }
+
             // renderElement(
             //   <button
             //     class={`${navBarIconButton}`}

libs/visual-programming-system/src/index.ts

@@ -62,3 +62,4 @@ export * from './interfaces/run-counter';
 export * from './utils/pointer-pos';
 export * from './components/events/pointer-events';
 export * from './interfaces/layout-properties';
+export * from './consts/classes';