-
- );
- }
-
- return (
-
- : tooltipMessage
- }
- side="bottom"
- >
-
-
-
+ >
+ Save & Sync
+
+
+
+
+
+
+ {hasChanges ? (
+
+ ) : null}
);
}
@@ -204,6 +223,7 @@ export function Header({
const { provider } = useSession();
const limits = useLimits();
const { isReadOnly } = useWorkflowReadOnly();
+ const { hasChanges } = useUnsavedChanges();
// Check GitHub sync limit
const githubSyncLimit = limits.github_sync ?? {
@@ -220,6 +240,8 @@ export function Header({
// When ?v= is present, user is viewing a specific version (even if latest)
const isPinnedVersion = params['v'] !== undefined && params['v'] !== null;
+ const showChangeIndicator = hasChanges && canSave && !isNewWorkflow;
+
const handleRunClick = useCallback(() => {
if (firstTriggerId) {
// select the first trigger
@@ -410,6 +432,7 @@ export function Header({
label={isNewWorkflow ? 'Create' : 'Save'}
canSync={githubSyncLimit.allowed}
syncTooltipMessage={githubSyncLimit.message}
+ hasChanges={showChangeIndicator}
/>
diff --git a/assets/js/collaborative-editor/hooks/useUnsavedChanges.ts b/assets/js/collaborative-editor/hooks/useUnsavedChanges.ts
new file mode 100644
index 00000000000..4768857ff5f
--- /dev/null
+++ b/assets/js/collaborative-editor/hooks/useUnsavedChanges.ts
@@ -0,0 +1,140 @@
+import { useMemo } from 'react';
+
+import type { Trigger } from '../types/trigger';
+import type { Workflow } from '../types/workflow';
+
+import { useSessionContext } from './useSessionContext';
+import { useWorkflowState } from './useWorkflow';
+
+export function useUnsavedChanges() {
+ const { workflow } = useSessionContext();
+
+ // Individual selectors - stable references
+ const jobs = useWorkflowState(state => state.jobs);
+ const triggers = useWorkflowState(state => state.triggers);
+ const edges = useWorkflowState(state => state.edges);
+ const positions = useWorkflowState(state => state.positions);
+ const name = useWorkflowState(state => state.workflow?.name);
+ const concurrency = useWorkflowState(state => state.workflow?.concurrency);
+ const enable_job_logs = useWorkflowState(
+ state => state.workflow?.enable_job_logs
+ );
+
+ // Memoize store workflow object to prevent recreating on every render
+ const storeWorkflow = useMemo(
+ () => ({
+ jobs,
+ triggers,
+ edges,
+ positions: positions || {},
+ name,
+ concurrency,
+ enable_job_logs,
+ }),
+ [jobs, triggers, edges, positions, name, concurrency, enable_job_logs]
+ );
+
+ // Memoize transformed base workflow (from session context)
+ const transformedBaseWorkflow = useMemo(
+ () => (workflow ? transformWorkflow(workflow) : null),
+ [workflow]
+ );
+
+ // Memoize transformed store workflow
+ const transformedStoreWorkflow = useMemo(
+ () => transformWorkflow(storeWorkflow as Workflow),
+ [storeWorkflow]
+ );
+
+ // Memoize comparison
+ const hasChanges = useMemo(() => {
+ if (!transformedBaseWorkflow) return false;
+ return isDiffWorkflow(transformedBaseWorkflow, transformedStoreWorkflow);
+ }, [transformedBaseWorkflow, transformedStoreWorkflow]);
+
+ return { hasChanges };
+}
+
+// transform workflow to normalized structure for comparison
+function transformWorkflow(workflow: Workflow) {
+ return {
+ name: workflow.name,
+ jobs: (workflow.jobs || [])
+ .map(job => ({
+ id: job.id,
+ name: job.name.trim(),
+ body: job.body.trim(),
+ adaptor: job.adaptor,
+ project_credential_id: job.project_credential_id,
+ keychain_credential_id: job.keychain_credential_id,
+ }))
+ .sort((a, b) => a.id.localeCompare(b.id)),
+ edges: (workflow.edges || [])
+ .map(edge => ({
+ id: edge.id,
+ source_job_id: edge.source_job_id,
+ source_trigger_id: edge.source_trigger_id,
+ target_job_id: edge.target_job_id,
+ enabled: edge.enabled || false,
+ condition_type: edge.condition_type,
+ condition_label: edge.condition_label?.trim(),
+ condition_expression: edge.condition_expression?.trim(),
+ }))
+ .sort((a, b) => a.id.localeCompare(b.id)),
+ triggers: (workflow.triggers || []).map(trigger =>
+ transformTrigger(trigger)
+ ),
+ positions: workflow.positions || {},
+ concurrency: workflow.concurrency,
+ enable_job_logs: workflow.enable_job_logs,
+ };
+}
+
+function transformTrigger(trigger: Trigger) {
+ const output: Partial