Merge pull request #115 from ClayPulse/dev

Fix sharing & canvas tab states

Author: Shellishack

web/app/(main-layout)/layout.tsx

@@ -7,7 +7,6 @@ import PlatformAssistantProvider from "@/components/providers/platform-assistant
 import RemoteModuleProvider from "@/components/providers/remote-module-provider";
 import WrappedHeroUIProvider from "@/components/providers/wrapped-hero-ui-provider";
 import { Analytics } from "@vercel/analytics/next";
-import { ReactFlowProvider } from "@xyflow/react";
 import "material-icons/iconfont/material-icons.css";
 import type { Metadata } from "next";
 import { Suspense } from "react";
@@ -33,18 +32,16 @@ export default function RootLayout({
             <EditorContextProvider>
               <CapacitorProvider>
                 <InterModuleCommunicationProvider>
-                  <ReactFlowProvider>
-                    <DndProvider>
-                      <RemoteModuleProvider isPreventingCSS={true}>
-                        <Toaster />
-                        <Nav>
-                          <PlatformAssistantProvider>
-                            {children}
-                          </PlatformAssistantProvider>
-                        </Nav>
-                      </RemoteModuleProvider>
-                    </DndProvider>
-                  </ReactFlowProvider>
+                  <DndProvider>
+                    <RemoteModuleProvider isPreventingCSS={true}>
+                      <Toaster />
+                      <Nav>
+                        <PlatformAssistantProvider>
+                          {children}
+                        </PlatformAssistantProvider>
+                      </Nav>
+                    </RemoteModuleProvider>
+                  </DndProvider>
                 </InterModuleCommunicationProvider>
               </CapacitorProvider>
             </EditorContextProvider>

web/components/explorer/app/app-explorer.tsx

@@ -90,14 +90,14 @@ function DraggableAppPreviewCard({ ext }: { ext: ExtensionApp }) {
         isShowCompatibleChip={false}
         isShowContextMenu={false}
         isDisableButtonPress={!isDragFinished}
-        onPress={(ext) => {
+        onPress={async (ext) => {
           const config: AppViewConfig = {
             app: ext.config.id,
             viewId: `${ext.config.id}-${v4()}`,
             recommendedHeight: ext.config.recommendedHeight,
             recommendedWidth: ext.config.recommendedWidth,
           };
-          createAppViewInCanvasView(config);
+          await createAppViewInCanvasView(config);
           console.log("Is Landscape:", isLandscape);
           if (!isLandscape) {
             editorContext?.setEditorStates((prev) => ({

web/components/modals/sharing-modal.tsx

@@ -21,6 +21,7 @@ export default function SharingModal({
   const params = useSearchParams();
   // Use the 'app' query parameter to load specific extension app upon loading page
   const app = params.get("app");
+  const workflow = params.get("workflow");
 
   const tabItems: TabItem[] = [
     {
@@ -139,7 +140,7 @@ export default function SharingModal({
                   Share your workspace via this URL
                 </p>
 
-                <p className="font-bold break-all">{`${window.location.origin}?app=${app}${shareInfo?.inviteCode ? `&inviteCode=${shareInfo.inviteCode}` : ""}`}</p>
+                <p className="font-bold break-all">{`${window.location.origin}?${app ? `app=${app}` : workflow ? `workflow=${workflow}` : ""}${shareInfo?.inviteCode ? `&inviteCode=${shareInfo.inviteCode}` : ""}`}</p>
                 <Button
                   color="primary"
                   onPress={() => {

web/components/providers/dnd-provider.tsx

@@ -24,7 +24,7 @@ import {
 } from "@dnd-kit/core";
 import { addToast } from "@heroui/react";
 import { IMCMessageTypeEnum, ViewModel } from "@pulse-editor/shared-utils";
-import { Node as ReactFlowNode, useReactFlow } from "@xyflow/react";
+import { Node as ReactFlowNode } from "@xyflow/react";
 import { ReactNode, useContext, useEffect, useState } from "react";
 import { createPortal } from "react-dom";
 import { v4 } from "uuid";
@@ -58,7 +58,6 @@ export default function DndProvider({
   });
   const { isLandscape } = useScreenSize();
   const { createAppViewInCanvasView } = useTabViewManager();
-  const { updateNodeData } = useReactFlow();
 
   const [mounted, setMounted] = useState(false);
 
@@ -93,7 +92,7 @@ export default function DndProvider({
               recommendedHeight: app.config.recommendedHeight,
               recommendedWidth: app.config.recommendedWidth,
             };
-            createAppViewInCanvasView(config);
+            await createAppViewInCanvasView(config);
           } catch (error) {
             addToast({
               title: "Failed to open app",
@@ -112,10 +111,12 @@ export default function DndProvider({
               recommendedWidth: app.config.recommendedWidth,
             };
 
-            const { viewId, node, paramName } = over.data.current as {
+            const { viewId, node, paramName, updateNodeData } = over.data
+              .current as {
               viewId: string;
               node: ReactFlowNode<AppNodeData>;
               paramName: string;
+              updateNodeData: (id: string, data: Partial<AppNodeData>) => void;
             };
 
             updateNodeData(viewId, {

web/components/views/canvas/canvas-view.tsx

@@ -24,6 +24,7 @@ import {
   ReactFlow,
   Edge as ReactFlowEdge,
   Node as ReactFlowNode,
+  ReactFlowProvider,
   reconnectEdge,
   useReactFlow,
   useViewport,
@@ -377,6 +378,10 @@ export const MemoizedCanvasView = memo(
     config: CanvasViewConfig;
     isActive: boolean;
     tabName: string;
-  }) => <CanvasView config={config} isActive={isActive} tabName={tabName} />,
+  }) => (
+    <ReactFlowProvider>
+      <CanvasView config={config} isActive={isActive} tabName={tabName} />
+    </ReactFlowProvider>
+  ),
 );
 MemoizedCanvasView.displayName = "MemoizedCanvasView";

web/components/views/canvas/nodes/app-node/layout.tsx

@@ -428,12 +428,15 @@ function DroppableInputHandle({
   node: ReactFlowNode<AppNodeData>;
   editorContext: EditorContextType | undefined;
 }) {
+  const { updateNodeData } = useReactFlow();
+
   const { setNodeRef, isOver } = useDroppable({
     id: `node-handle-input-${node.id}-${paramName}`,
     data: {
       viewId: node.id,
       node,
       paramName,
+      updateNodeData,
     },
   });
 

web/components/views/view-area.tsx

@@ -22,7 +22,6 @@ export default function ViewArea() {
     selectTab,
     closeTabView,
     createAppTabView,
-    createAppViewInCanvasView,
     activeTabView,
   } = useTabViewManager();
 
@@ -76,7 +75,6 @@ export default function ViewArea() {
     } else {
       setIsShowTabs(true);
     }
-    console.log("Tab views changed:", tabViews);
   }, [tabViews]);
 
   return (

web/lib/hooks/use-tab-view-manager.ts

@@ -2,6 +2,7 @@ import { EditorContext } from "@/components/providers/editor-context-provider";
 import { IMCContext } from "@/components/providers/imc-provider";
 import { addToast } from "@heroui/react";
 import { ViewModeEnum } from "@pulse-editor/shared-utils";
+import { useRouter } from "next/navigation";
 import { useContext, useEffect, useState } from "react";
 import { v4 } from "uuid";
 import {
@@ -15,6 +16,8 @@ export function useTabViewManager() {
   const editorContext = useContext(EditorContext);
   const imcContext = useContext(IMCContext);
 
+  const router = useRouter();
+
   const [tabViews, setTabViews] = useState<TabView[]>(
     editorContext?.editorStates.tabViews ?? [],
   );
@@ -54,6 +57,7 @@ export function useTabViewManager() {
       };
     }) ?? [];
 
+  // Update local states when editor context changes
   useEffect(() => {
     if (!editorContext) {
       throw new Error("Editor context is not available");
@@ -70,6 +74,21 @@ export function useTabViewManager() {
     editorContext?.editorStates.tabIndex,
   ]);
 
+  // Pend workflow or app param when tab index changes
+  useEffect(() => {
+    if (activeTabView) {
+      if (activeTabView.type === ViewModeEnum.App) {
+        const appConfig = activeTabView.config as AppViewConfig;
+        router.push(`/?app=${appConfig.app}`);
+      } else if (activeTabView.type === ViewModeEnum.Canvas) {
+        const canvasConfig = activeTabView.config as CanvasViewConfig;
+        router.push(`/?workflow=${canvasConfig.viewId}`);
+      }
+    } else {
+      router.push(`/`);
+    }
+  }, [activeTabView]);
+
   function selectTab(newIndex: number) {
     if (!editorContext) {
       throw new Error("Editor context is not available");