fix: styling and rid of 5 second sync

This commit is contained in:
Adam Gough
2025-05-22 01:40:36 -07:00
parent 9c8e0d8dcf
commit 44f10488db
3 changed files with 31 additions and 62 deletions

View File

@@ -163,6 +163,7 @@ export function DeploymentInfo({
<DeployedWorkflowModal
isOpen={isViewingDeployed}
onClose={() => setIsViewingDeployed(false)}
needsRedeployment={deploymentInfo.needsRedeployment}
deployedWorkflowState={deployedState}
/>
)}

View File

@@ -31,6 +31,7 @@ const logger = createLogger('DeployedWorkflowModal')
interface DeployedWorkflowModalProps {
isOpen: boolean
onClose: () => void
needsRedeployment: boolean
deployedWorkflowState: {
blocks: Record<string, any>
edges: Array<any>
@@ -48,6 +49,7 @@ interface DeployedWorkflowModalProps {
export function DeployedWorkflowModal({
isOpen,
onClose,
needsRedeployment,
deployedWorkflowState,
}: DeployedWorkflowModalProps) {
const [showRevertDialog, setShowRevertDialog] = useState(false)
@@ -63,6 +65,7 @@ export function DeployedWorkflowModal({
const initialDeployedStateRef = useRef<any>(null);
useEffect(() => {
console.log('needsRedeployment', needsRedeployment)
if (isOpen) {
modalOpenCount.current += 1;
@@ -199,32 +202,34 @@ export function DeployedWorkflowModal({
/>
)}
<div className='mt-6 flex justify-between'>
<AlertDialog open={showRevertDialog} onOpenChange={setShowRevertDialog}>
<AlertDialogTrigger asChild>
<Button variant='destructive'>Revert to Deployed</Button>
</AlertDialogTrigger>
<AlertDialogContent style={{ zIndex: 1001 }} className='sm:max-w-[425px]'>
<AlertDialogHeader>
<AlertDialogTitle>Revert to Deployed Version?</AlertDialogTitle>
<AlertDialogDescription>
This will replace your current workflow with the deployed version. Any unsaved
changes will be lost. This action cannot be undone.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction
onClick={handleRevert}
className='bg-destructive text-destructive-foreground hover:bg-destructive/90'
>
Revert
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
<div className="flex justify-between mt-6">
{needsRedeployment && (
<AlertDialog open={showRevertDialog} onOpenChange={setShowRevertDialog}>
<AlertDialogTrigger asChild>
<Button variant="destructive">Revert to Deployed</Button>
</AlertDialogTrigger>
<AlertDialogContent style={{ zIndex: 1001 }} className="sm:max-w-[425px]">
<AlertDialogHeader>
<AlertDialogTitle>Revert to Deployed Version?</AlertDialogTitle>
<AlertDialogDescription>
This will replace your current workflow with the deployed version. Any unsaved
changes will be lost. This action cannot be undone.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction
onClick={handleRevert}
className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
>
Revert
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
)}
<Button variant='outline' onClick={onClose}>
<Button variant="outline" onClick={onClose} className="ml-auto">
Close
</Button>
</div>

View File

@@ -48,22 +48,12 @@ export function useDeploymentChangeDetection(activeWorkflowId: string | null, is
// Verify the active workflow hasn't changed while fetching
if (requestedWorkflowId !== activeWorkflowId) {
logger.debug(
`Ignoring changes response for ${requestedWorkflowId} - no longer the active workflow`
)
return
}
logger.debug(
`API needsRedeployment response for workflow ${requestedWorkflowId}: ${data.needsRedeployment}`
)
// Always update the needsRedeployment flag based on API response to handle both true and false
// This ensures it's updated when changes are detected and when changes are no longer detected
if (data.needsRedeployment) {
logger.info(
`Setting needsRedeployment flag to TRUE for workflow ${requestedWorkflowId}`
)
// Update local state
setNeedsRedeployment(true)
@@ -76,9 +66,6 @@ export function useDeploymentChangeDetection(activeWorkflowId: string | null, is
.getState()
.getWorkflowDeploymentStatus(requestedWorkflowId)
if (currentStatus?.needsRedeployment) {
logger.info(
`Setting needsRedeployment flag to FALSE for workflow ${requestedWorkflowId}`
)
// Update local state
setNeedsRedeployment(false)
@@ -153,34 +140,10 @@ export function useDeploymentChangeDetection(activeWorkflowId: string | null, is
}
})
// Set up a periodic check when needsRedeployment is true to ensure it gets set back to false
// when changes are reverted
let periodicCheckTimer: NodeJS.Timeout | null = null
if (needsRedeployment) {
// Check every 5 seconds when needsRedeployment is true to catch reverted changes
const PERIODIC_CHECK_INTERVAL = 5000 // 5 seconds
periodicCheckTimer = setInterval(() => {
// Only perform the check if this is still the active workflow
if (effectWorkflowId === activeWorkflowId) {
checkForChanges()
} else {
// Clear the interval if the workflow has changed
if (periodicCheckTimer) {
clearInterval(periodicCheckTimer)
}
}
}, PERIODIC_CHECK_INTERVAL)
}
return () => {
if (debounceTimer) {
clearTimeout(debounceTimer)
}
if (periodicCheckTimer) {
clearInterval(periodicCheckTimer)
}
workflowUnsubscribe()
subBlockUnsubscribe()
}