fix web style

web/app/components/workflow-app/components/workflow-header/features-trigger.spec.tsx

@@ -108,7 +108,7 @@ vi.mock('@/app/components/app/app-publisher', () => ({
         <button type="button" onClick={() => { Promise.resolve(props.onPublish?.()).catch(() => undefined) }}>
           publisher-publish
         </button>
-        <button type="button" onClick={() => { Promise.resolve(props.onPublish?.({ title: 'Test title', releaseNotes: 'Test notes' })).catch(() => undefined) }}>
+        <button type="button" onClick={() => { Promise.resolve(props.onPublish?.({ url: '/apps/app-id/workflows/publish', title: 'Test title', releaseNotes: 'Test notes' })).catch(() => undefined) }}>
           publisher-publish-with-params
         </button>
       </div>

web/app/components/workflow-app/components/workflow-header/features-trigger.tsx

@@ -1,3 +1,4 @@
+import type { ModelAndParameter } from '@/app/components/app/configuration/debug/types'
 import type { EndNodeType } from '@/app/components/workflow/nodes/end/types'
 import type { StartNodeType } from '@/app/components/workflow/nodes/start/types'
 import type {
@@ -140,7 +141,8 @@ const FeaturesTrigger = () => {
   const needWarningNodes = useChecklist(nodes, edges)
 
   const updatePublishedWorkflow = useInvalidateAppWorkflow()
-  const onPublish = useCallback(async (params?: PublishWorkflowParams) => {
+  const onPublish = useCallback(async (params?: ModelAndParameter | PublishWorkflowParams) => {
+    const publishParams = params && 'title' in params ? params : undefined
     // First check if there are any items in the checklist
     // if (!validateBeforeRun())
     //   throw new Error('Checklist has unresolved items')
@@ -154,8 +156,8 @@ const FeaturesTrigger = () => {
     if (await handleCheckBeforePublish()) {
       const res = await publishWorkflow({
         url: `/apps/${appID}/workflows/publish`,
-        title: params?.title || '',
-        releaseNotes: params?.releaseNotes || '',
+        title: publishParams?.title || '',
+        releaseNotes: publishParams?.releaseNotes || '',
       })
 
       if (res) {

web/app/components/workflow-app/components/workflow-main.tsx

@@ -1,13 +1,16 @@
 import type { Features as FeaturesData } from '@/app/components/base/features/types'
 import type { WorkflowProps } from '@/app/components/workflow'
+import type { CollaborationUpdate } from '@/app/components/workflow/collaboration/types/collaboration'
+import type { Shape as HooksStoreShape } from '@/app/components/workflow/hooks-store/store'
+import type { Edge, Node } from '@/app/components/workflow/types'
+import type { FetchWorkflowDraftResponse } from '@/types/workflow'
 import {
   useCallback,
   useEffect,
   useMemo,
   useRef,
-  useState,
 } from 'react'
-import { useReactFlow, useStoreApi } from 'reactflow'
+import { useReactFlow } from 'reactflow'
 import { useFeaturesStore } from '@/app/components/base/features/hooks'
 import { FILE_EXTS } from '@/app/components/base/prompt-editor/constants'
 import { WorkflowWithInnerContext } from '@/app/components/workflow'
@@ -31,6 +34,7 @@ import {
 import WorkflowChildren from './workflow-children'
 
 type WorkflowMainProps = Pick<WorkflowProps, 'nodes' | 'edges' | 'viewport'>
+type WorkflowDataUpdatePayload = Pick<FetchWorkflowDraftResponse, 'features' | 'conversation_variables' | 'environment_variables'>
 const WorkflowMain = ({
   nodes,
   edges,
@@ -42,7 +46,14 @@ const WorkflowMain = ({
   const containerRef = useRef<HTMLDivElement>(null)
   const reactFlow = useReactFlow()
 
-  const store = useStoreApi()
+  const reactFlowStore = useMemo(() => ({
+    getState: () => ({
+      getNodes: () => reactFlow.getNodes(),
+      setNodes: (nodesToSet: Node[]) => reactFlow.setNodes(nodesToSet),
+      getEdges: () => reactFlow.getEdges(),
+      setEdges: (edgesToSet: Edge[]) => reactFlow.setEdges(edgesToSet),
+    }),
+  }), [reactFlow])
   const {
     startCursorTracking,
     stopCursorTracking,
@@ -50,15 +61,11 @@ const WorkflowMain = ({
     cursors,
     isConnected,
     isEnabled: isCollaborationEnabled,
-  } = useCollaboration(appId || '', store)
-  const [myUserId, setMyUserId] = useState<string | null>(null)
-
-  useEffect(() => {
-    if (isCollaborationEnabled && isConnected)
-      setMyUserId('current-user')
-    else
-      setMyUserId(null)
-  }, [isCollaborationEnabled, isConnected])
+  } = useCollaboration(appId || '', reactFlowStore)
+  const myUserId = useMemo(
+    () => (isCollaborationEnabled && isConnected ? 'current-user' : null),
+    [isCollaborationEnabled, isConnected],
+  )
 
   const filteredCursors = Object.fromEntries(
     Object.entries(cursors).filter(([userId]) => userId !== myUserId),
@@ -76,7 +83,7 @@ const WorkflowMain = ({
     }
   }, [startCursorTracking, stopCursorTracking, reactFlow, isCollaborationEnabled])
 
-  const handleWorkflowDataUpdate = useCallback((payload: any) => {
+  const handleWorkflowDataUpdate = useCallback((payload: WorkflowDataUpdatePayload) => {
     const {
       features,
       conversation_variables,
@@ -141,7 +148,7 @@ const WorkflowMain = ({
     if (!appId || !isCollaborationEnabled)
       return
 
-    const unsubscribe = collaborationManager.onVarsAndFeaturesUpdate(async (update: any) => {
+    const unsubscribe = collaborationManager.onVarsAndFeaturesUpdate(async (_update: CollaborationUpdate) => {
       try {
         const response = await fetchWorkflowDraft(`/apps/${appId}/workflows/draft`)
         handleWorkflowDataUpdate(response)
@@ -160,7 +167,6 @@ const WorkflowMain = ({
       return
 
     const unsubscribe = collaborationManager.onWorkflowUpdate(async () => {
-      console.log('Received workflow update from collaborator, fetching latest workflow data')
       try {
         const response = await fetchWorkflowDraft(`/apps/${appId}/workflows/draft`)
 
@@ -190,7 +196,6 @@ const WorkflowMain = ({
       return
 
     const unsubscribe = collaborationManager.onSyncRequest(() => {
-      console.log('Leader received sync request, performing sync')
       doSyncWorkflowDraft()
     })
 
@@ -234,7 +239,7 @@ const WorkflowMain = ({
     invalidateConversationVarValues,
   } = useInspectVarsCrud()
 
-  const hooksStore = useMemo(() => {
+  const hooksStore = useMemo<Partial<HooksStoreShape>>(() => {
     return {
       syncWorkflowDraftWhenPageClose,
       doSyncWorkflowDraft,
@@ -320,7 +325,7 @@ const WorkflowMain = ({
         edges={edges}
         viewport={viewport}
         onWorkflowDataUpdate={handleWorkflowDataUpdate}
-        hooksStore={hooksStore as any}
+        hooksStore={hooksStore}
         cursors={filteredCursors}
         myUserId={myUserId}
         onlineUsers={onlineUsers}

web/app/components/workflow-app/hooks/use-available-nodes-meta-data.ts

@@ -38,7 +38,7 @@ export const useAvailableNodesMetaData = () => {
             TriggerPluginDefault,
           ]
     ),
-  ], [isChatMode, startNodeMetaData])
+  ] as AvailableNodesMetaData['nodes'], [isChatMode, startNodeMetaData])
 
   const availableNodesMetaData = useMemo(() => mergedNodesMetaData.map((node) => {
     const { metaData } = node
@@ -59,7 +59,7 @@ export const useAvailableNodesMetaData = () => {
         title,
       },
     }
-  }), [mergedNodesMetaData, t, docLink])
+  }) as AvailableNodesMetaData['nodes'], [mergedNodesMetaData, t, docLink])
 
   const availableNodesMetaDataMap = useMemo(() => availableNodesMetaData.reduce((acc, node) => {
     acc![node.metaData.type] = node

web/app/components/workflow-app/hooks/use-get-run-and-trace-url.ts

@@ -3,8 +3,14 @@ import { useWorkflowStore } from '@/app/components/workflow/store'
 
 export const useGetRunAndTraceUrl = () => {
   const workflowStore = useWorkflowStore()
-  const getWorkflowRunAndTraceUrl = useCallback((runId: string) => {
+  const getWorkflowRunAndTraceUrl = useCallback((runId?: string) => {
     const { appId } = workflowStore.getState()
+    if (!appId || !runId) {
+      return {
+        runUrl: '',
+        traceUrl: '',
+      }
+    }
 
     return {
       runUrl: `/apps/${appId}/workflow-runs/${runId}`,

web/app/components/workflow-app/hooks/use-nodes-sync-draft.ts

@@ -98,15 +98,12 @@ export const useNodesSyncDraft = () => {
     const currentIsLeader = isCollaborationEnabled ? collaborationManager.getIsLeader() : true
 
     // Only allow leader to sync data
-    if (isCollaborationEnabled && !currentIsLeader) {
-      console.log('Not leader, skipping sync on page close')
+    if (isCollaborationEnabled && !currentIsLeader)
       return
-    }
 
     const postParams = getPostParams()
 
     if (postParams) {
-      console.log('Leader syncing workflow draft on page close')
       navigator.sendBeacon(
         `${API_PREFIX}/apps/${params.appId}/workflows/draft`,
         JSON.stringify(postParams.params),
@@ -131,14 +128,11 @@ export const useNodesSyncDraft = () => {
 
     // If not leader and not forcing upload, request the leader to sync
     if (isCollaborationEnabled && !currentIsLeader && !forceUpload) {
-      console.log('Not leader, requesting leader to sync workflow draft')
       if (isCollaborationEnabled)
         collaborationManager.emitSyncRequest()
       callback?.onSettled?.()
       return
     }
-
-    console.log(forceUpload ? 'Force uploading workflow draft' : 'Leader performing workflow draft sync')
     const postParams = getPostParams()
 
     if (postParams) {