@spinnaker/core 2026.3.0 → 2026.3.2

package/dist/pipeline/config/graph/PipelineGraph.d.ts

@@ -28,6 +28,7 @@ export declare class PipelineGraph extends React.Component<IPipelineGraphProps,
     private element;
     private graphResizeObserver;
     private graphStatusHash;
+    private graphStructure;
     private graphVerticalPadding;
     private lastElementWidth;
     private layoutRetryFrame;
@@ -76,6 +77,7 @@ export declare class PipelineGraph extends React.Component<IPipelineGraphProps,
     componentDidMount(): void;
     private refCallback;
     private observeElementResize;
+    private getGraphStructure;
     private validatePipeline;
     componentWillReceiveProps(nextProps: IPipelineGraphProps): void;
     componentDidUpdate(_prevProps: IPipelineGraphProps, prevState: IPipelineGraphState): void;

package/dist/pipeline/config/stages/evaluateVariables/EvaluateVariablesStageConfig.d.ts

@@ -6,5 +6,5 @@ export interface IEvaluatedVariable {
     key: string;
     value: string;
 }
-export declare function validateEvaluateVariablesStage(stage: IStage): any;
+export declare function validateEvaluateVariablesStage(stage: IStage, dashedIdentifiersEnabled?: boolean): any;
 export declare function EvaluateVariablesStageConfig(props: IStageConfigProps): JSX.Element;

package/dist/pipeline/config/stages/evaluateVariables/ExpressionCapabilitiesReader.d.ts

@@ -0,0 +1,8 @@
+export interface IExpressionCapabilities {
+    functions: unknown[];
+    spelEvaluators: unknown[];
+    dashedIdentifiersEnabled: boolean;
+}
+export declare class ExpressionCapabilitiesReader {
+    static getExpressionCapabilities(): Promise<IExpressionCapabilities>;
+}

package/dist/pipeline/config/triggers/Triggers.d.ts

@@ -7,6 +7,5 @@ export interface ITriggersProps {
     pipelineConfig?: IPipeline;
     fieldUpdated: () => void;
     updatePipelineConfig: (changes: Partial<IPipeline>) => void;
-    revertCount: number;
 }
 export declare function Triggers(props: ITriggersProps): JSX.Element;

package/package.json

@@ -5,7 +5,7 @@
     "url": "https://github.com/spinnaker/spinnaker.git"
   },
   "license": "Apache-2.0",
-  "version": "2026.3.0",
+  "version": "2026.3.2",
   "module": "dist/index.js",
   "typings": "dist/index.d.ts",
   "publishConfig": {
@@ -115,5 +115,5 @@
     "shx": "0.3.3",
     "typescript": "5.0.4"
   },
-  "gitHead": "0f7d75f5d4b42c1675e2ecc69a53f8eb73090eb9"
+  "gitHead": "d4601ebf41a79d3f529e3aa399d5ce4f6d38cd8b"
 }

package/src/pipeline/config/PipelineConfigPage.tsx

@@ -69,7 +69,6 @@ interface IPipelineConfigViewState {
   section: string;
   stageIndex: number;
   loading?: boolean;
-  revertCount: number;
   original?: string;
   originalRenderablePipeline?: string;
   isDirty?: boolean;
@@ -152,13 +151,24 @@ function getInitialViewState(
     section,
     stageIndex: hasStage ? stageIndex : 0,
     loading: false,
-    revertCount: 0,
     original: toJson(pipeline),
     originalRenderablePipeline: toJson(renderablePipeline),
     isDirty: false,
   };
 }
 
+// Keeps the stage selection in range after the stages are replaced
+function selectionInRange(
+  viewState: IPipelineConfigViewState,
+  renderablePipeline: IPipeline,
+): Pick<IPipelineConfigViewState, 'section' | 'stageIndex'> {
+  const lastStageIndex = (renderablePipeline.stages || []).length - 1;
+  return {
+    section: viewState.section === 'stage' && lastStageIndex < 0 ? 'triggers' : viewState.section,
+    stageIndex: Math.max(0, Math.min(viewState.stageIndex, lastStageIndex)),
+  };
+}
+
 function getLatestConfig(application: Application, pipeline: IPipeline): IPipeline {
   const dataSource = pipeline.strategy ? application.strategyConfigs : application.pipelineConfigs;
   return dataSource?.data?.find((config: IPipeline) => config.id === pipeline.id);
@@ -314,9 +324,9 @@ interface IPipelineStageConfigProps {
   application: Application;
   pipeline: IPipeline;
   stage: IStage;
-  updateStageDependencies: (dependencies: string[]) => void;
   updateStageField: (changes: Partial<IStage>) => void;
   stageFieldUpdated: () => void;
+  replaceStage: (stage: IStage) => void;
   removeStage: (stage: IStage) => void;
 }
 
@@ -328,24 +338,35 @@ function PipelineStageConfig({
   removeStage,
   stage,
   stageFieldUpdated,
-  updateStageDependencies,
+  replaceStage,
   updateStageField,
 }: IPipelineStageConfigProps) {
   const [stageRoleOptions, setStageRoleOptions] = React.useState<any[]>([]);
   const lastAppliedDefaultsKey = React.useRef<string>();
   const canResolveStageTypes = accounts !== null && accounts.length > 0 && !accountLoadError;
-  const configurableStageTypes = canResolveStageTypes
-    ? Registry.pipeline
-        .getConfigurableStageTypes(accounts)
-        .filter((type) => !pipeline.strategy || type.strategy)
-        .sort((a, b) => a.label.localeCompare(b.label))
-    : [];
-  const providerConfigs = stage.type ? Registry.pipeline.getProvidersFor(stage.type) : [];
+  // Registry lookups copy every stage type, so only repeat them when their inputs change
+  const configurableStageTypes = React.useMemo(
+    () =>
+      canResolveStageTypes
+        ? Registry.pipeline
+            .getConfigurableStageTypes(accounts)
+            .filter((type) => !pipeline.strategy || type.strategy)
+            .sort((a, b) => a.label.localeCompare(b.label))
+        : [],
+    [accounts, canResolveStageTypes, pipeline.strategy],
+  );
+  const providerConfigs = React.useMemo(() => (stage.type ? Registry.pipeline.getProvidersFor(stage.type) : []), [
+    stage.type,
+  ]);
   const baseStageType = providerConfigs[0]?.provides || stage.type;
   const selectedStageType = configurableStageTypes.find((type) => type.key === baseStageType);
-  const baseStageConfig = Registry.pipeline
-    .getStageTypes()
-    .find((type) => type.key === baseStageType && type.useBaseProvider && !type.provides);
+  const baseStageConfig = React.useMemo(
+    () =>
+      Registry.pipeline
+        .getStageTypes()
+        .find((type) => type.key === baseStageType && type.useBaseProvider && !type.provides),
+    [baseStageType],
+  );
   const availableProviders = selectedStageType?.cloudProviders || [];
   const selectedProvider = stage.cloudProvider || stage.cloudProviderType;
   const providerFieldsIncoherent =
@@ -501,7 +522,7 @@ function PipelineStageConfig({
 
   const editStageJson = () => {
     ReactModal.show(EditStageJsonModal, { stage } as any, { dialogClassName: 'modal-lg modal-fullscreen' })
-      .then(stageFieldUpdated)
+      .then(() => replaceStage(stage))
       .catch(() => {});
   };
 
@@ -628,7 +649,7 @@ function PipelineStageConfig({
               inputClassName="pipeline-stage-dependency-select"
               multi={true}
               name="requisiteStageRefIds"
-              onChange={(event) => updateStageDependencies(event.target.value || [])}
+              onChange={(event) => updateReservedStageField({ requisiteStageRefIds: event.target.value || [] })}
               options={stageDependencyOptions}
               value={(stage.requisiteStageRefIds || []).map(String)}
               valueRenderer={(option: any) => option.name}
@@ -780,6 +801,9 @@ export function PipelineConfigPageComponent({
   const currentPipelineId = React.useRef(pipelineId);
   const pipelineLoadGeneration = React.useRef(0);
   const templateModalInvocation = React.useRef(0);
+  const [stageEditorKeys] = React.useState(() => ({ ids: new WeakMap<IStage, number>(), next: 0 }));
+  const latestModel = React.useRef(model);
+  latestModel.current = model;
   currentPipelineId.current = pipelineId;
 
   React.useEffect(
@@ -829,7 +853,12 @@ export function PipelineConfigPageComponent({
             renderablePipeline: { ...current.renderablePipeline, ...cloneDeep(plan) },
           };
         });
-        setViewState((current) => (isCurrentInvocation() ? { ...current, isDirty: true, loading: false } : current));
+        const nextRenderablePipeline = { ...latestModel.current.renderablePipeline, ...plan };
+        setViewState((current) =>
+          isCurrentInvocation()
+            ? { ...current, ...selectionInRange(current, nextRenderablePipeline), isDirty: true, loading: false }
+            : current,
+        );
       })
       .catch(() => {})
       .finally(() => {
@@ -972,25 +1001,48 @@ export function PipelineConfigPageComponent({
   };
 
   const updateModel = (nextModel: IPipelineConfigModel, shouldMarkDirty = true) => {
+    // Callbacks that run before the next render read this model
+    latestModel.current = nextModel;
     setModel(nextModel);
     if (shouldMarkDirty) {
       markDirty(nextModel.pipeline);
     }
   };
 
+  // Each stage object gets its own editor, so replacing a stage remounts it with the new values
+  const getStageEditorKey = (stage: IStage) => {
+    if (!stageEditorKeys.ids.has(stage)) {
+      stageEditorKeys.ids.set(stage, stageEditorKeys.next++);
+    }
+    return stageEditorKeys.ids.get(stage);
+  };
+
+  // Stage edits are made in place, so the stage objects and their editors are kept
   const stageFieldUpdated = () => {
     setRevision((current) => current + 1);
-    const nextRenderablePipeline = cloneDeep(model.renderablePipeline);
+    const nextRenderablePipeline = { ...model.renderablePipeline };
     const nextPipeline = model.isTemplatedPipeline ? model.pipeline : nextRenderablePipeline;
     updateModel({ ...model, pipeline: nextPipeline, renderablePipeline: nextRenderablePipeline });
   };
 
+  // Reads the latest model, which may be newer than this render's
+  const replaceStage = (stageToReplace: IStage) => {
+    const latest = latestModel.current;
+    setRevision((current) => current + 1);
+    const nextRenderablePipeline = {
+      ...latest.renderablePipeline,
+      stages: latest.renderablePipeline.stages.map((stage) => (stage === stageToReplace ? { ...stage } : stage)),
+    };
+    const nextPipeline = latest.isTemplatedPipeline ? latest.pipeline : nextRenderablePipeline;
+    updateModel({ ...latest, pipeline: nextPipeline, renderablePipeline: nextRenderablePipeline });
+  };
+
+  // Shallow copy, so unchanged objects keep their identity
   const updatePipelineConfig = (changes: Partial<IPipeline>) => {
-    const nextPipeline = cloneDeep(model.pipeline);
     const nextChanges = model.isV2TemplatedPipeline
       ? (PipelineTemplateV2Service.filterInheritedConfig(cloneDeep(changes)) as Partial<IPipeline>)
       : changes;
-    Object.assign(nextPipeline, nextChanges);
+    const nextPipeline = { ...model.pipeline, ...nextChanges };
 
     let nextRenderablePipeline = model.renderablePipeline;
     if (model.isV2TemplatedPipeline) {
@@ -1019,7 +1071,9 @@ export function PipelineConfigPageComponent({
   };
 
   const addStage = (newStage: Partial<IStage> = { isNew: true }) => {
-    const nextRenderablePipeline = cloneDeep(model.renderablePipeline);
+    // Reads the latest model, which may be newer than this render's
+    const latest = latestModel.current;
+    const nextRenderablePipeline = cloneDeep(latest.renderablePipeline);
     const stages = nextRenderablePipeline.stages || [];
     const stageToAdd = newStage as IStage;
     stageToAdd.refId = String(Math.max(0, ...stages.map((stage) => Number(stage.refId) || 0)) + 1);
@@ -1031,8 +1085,8 @@ export function PipelineConfigPageComponent({
     }
     stages.push(stageToAdd);
     nextRenderablePipeline.stages = stages;
-    const nextPipeline = model.isTemplatedPipeline ? model.pipeline : nextRenderablePipeline;
-    updateModel({ ...model, pipeline: nextPipeline, renderablePipeline: nextRenderablePipeline });
+    const nextPipeline = latest.isTemplatedPipeline ? latest.pipeline : nextRenderablePipeline;
+    updateModel({ ...latest, pipeline: nextPipeline, renderablePipeline: nextRenderablePipeline });
     setViewState((current) => ({ ...current, section: 'stage', stageIndex: stages.length - 1 }));
   };
 
@@ -1060,12 +1114,7 @@ export function PipelineConfigPageComponent({
     });
     const nextPipeline = model.isTemplatedPipeline ? model.pipeline : nextRenderablePipeline;
     updateModel({ ...model, pipeline: nextPipeline, renderablePipeline: nextRenderablePipeline });
-    const lastStageIndex = nextRenderablePipeline.stages.length - 1;
-    setViewState((current) => ({
-      ...current,
-      section: lastStageIndex < 0 ? 'triggers' : current.section,
-      stageIndex: Math.max(0, Math.min(current.stageIndex, lastStageIndex)),
-    }));
+    setViewState((current) => ({ ...current, ...selectionInRange(current, nextRenderablePipeline) }));
   };
 
   const updateStageField = (stage: IStage, changes: Partial<IStage>) => {
@@ -1081,32 +1130,12 @@ export function PipelineConfigPageComponent({
     }
   };
 
-  const updateStageDependencies = (stageToUpdate: IStage, dependencies: string[]) => {
-    const nextRenderablePipeline = cloneDeep(model.renderablePipeline);
-    const nextStage = nextRenderablePipeline.stages.find((stage) => stage.refId === stageToUpdate.refId);
-    if (!nextStage) {
-      return;
-    }
-    nextStage.requisiteStageRefIds = dependencies;
-    const nextPipeline = model.isTemplatedPipeline ? model.pipeline : nextRenderablePipeline;
-    updateModel({ ...model, pipeline: nextPipeline, renderablePipeline: nextRenderablePipeline });
-  };
-
   const revertPipelineChanges = () => {
     const original = fromJson<IPipeline>(viewState.original);
     const originalRenderablePipeline = fromJson<IPipeline>(viewState.originalRenderablePipeline);
     const nextRenderablePipeline = model.isTemplatedPipeline ? originalRenderablePipeline : original;
     updateModel({ ...model, pipeline: original, renderablePipeline: nextRenderablePipeline }, false);
-    setViewState((current) => {
-      const lastStageIndex = nextRenderablePipeline.stages.length - 1;
-      return {
-        ...current,
-        section: current.section === 'stage' && lastStageIndex < 0 ? 'triggers' : current.section,
-        stageIndex: Math.max(0, Math.min(current.stageIndex, lastStageIndex)),
-        revertCount: (current.revertCount || 0) + 1,
-        isDirty: false,
-      };
-    });
+    setViewState((current) => ({ ...current, ...selectionInRange(current, nextRenderablePipeline), isDirty: false }));
   };
 
   const applyUpdateTs = (toSave: IPipeline) => {
@@ -1115,9 +1144,16 @@ export function PipelineConfigPageComponent({
       if (latestFromServer?.updateTs) {
         toSave.updateTs = latestFromServer.updateTs;
       }
-      const nextRenderablePipeline = model.isTemplatedPipeline ? model.renderablePipeline : toSave;
-      updateModel({ ...model, pipeline: toSave, renderablePipeline: nextRenderablePipeline }, false);
-      setOriginal(toSave, nextRenderablePipeline);
+      // Keep the current stage objects, so their editors stay mounted and edits made during the save are kept
+      const current = latestModel.current;
+      const pipeline = { ...current.pipeline };
+      if (latestFromServer?.updateTs) {
+        pipeline.updateTs = latestFromServer.updateTs;
+      }
+      const renderablePipeline = current.isTemplatedPipeline ? current.renderablePipeline : pipeline;
+      updateModel({ ...current, pipeline, renderablePipeline }, false);
+      setOriginal(toSave, current.isTemplatedPipeline ? current.renderablePipeline : toSave);
+      markDirty(pipeline);
     });
   };
 
@@ -1142,27 +1178,33 @@ export function PipelineConfigPageComponent({
   const renamePipeline = () => {
     ReactModal.show(RenamePipelineModal, { pipeline: model.pipeline, application: app } as any)
       .then((pipelineName: string) => {
-        const nextPipeline = { ...model.pipeline, name: pipelineName };
-        const nextRenderablePipeline = model.isTemplatedPipeline ? model.renderablePipeline : nextPipeline;
-        updateModel({ ...model, pipeline: nextPipeline, renderablePipeline: nextRenderablePipeline }, false);
-        return applyUpdateTs(nextPipeline);
+        const latest = latestModel.current;
+        const nextPipeline = { ...latest.pipeline, name: pipelineName };
+        const nextRenderablePipeline = latest.isTemplatedPipeline ? latest.renderablePipeline : nextPipeline;
+        updateModel({ ...latest, pipeline: nextPipeline, renderablePipeline: nextRenderablePipeline }, false);
+        return applyUpdateTs(cloneDeep(nextPipeline));
       })
       .catch(() => {});
   };
 
   const editPipelineJson = () => {
+    const editedPipeline = model.pipeline;
+    const openedUpdateTs = editedPipeline.updateTs;
     ReactModal.show(
       EditPipelineJsonModal,
-      { pipeline: model.pipeline, plan: model.isTemplatedPipeline ? model.renderablePipeline : null } as any,
+      { pipeline: editedPipeline, plan: model.isTemplatedPipeline ? model.renderablePipeline : null } as any,
       { dialogClassName: 'modal-lg modal-fullscreen' },
     )
       .then(() => {
-        const nextPipeline = cloneDeep(model.pipeline);
-        updateModel({
-          ...model,
-          pipeline: nextPipeline,
-          renderablePipeline: model.isTemplatedPipeline ? model.renderablePipeline : nextPipeline,
-        });
+        // The modal edits the pipeline it was given, but a save may have finished while it was open
+        const latest = latestModel.current;
+        const nextPipeline = cloneDeep(editedPipeline);
+        if (nextPipeline.updateTs === openedUpdateTs) {
+          nextPipeline.updateTs = latest.pipeline.updateTs;
+        }
+        const nextRenderablePipeline = latest.isTemplatedPipeline ? latest.renderablePipeline : nextPipeline;
+        updateModel({ ...latest, pipeline: nextPipeline, renderablePipeline: nextRenderablePipeline });
+        setViewState((current) => ({ ...current, ...selectionInRange(current, nextRenderablePipeline) }));
       })
       .catch(() => {});
   };
@@ -1171,34 +1213,38 @@ export function PipelineConfigPageComponent({
     ReactModal.show(DeletePipelineModal, { pipeline: model.pipeline, application: app } as any).catch(() => {});
   };
 
-  const disableToggled = (isDisabled: boolean) => {
-    const nextPipeline = { ...model.pipeline, disabled: isDisabled };
-    const nextRenderablePipeline = model.isTemplatedPipeline ? model.renderablePipeline : nextPipeline;
-    updateModel({ ...model, pipeline: nextPipeline, renderablePipeline: nextRenderablePipeline }, false);
-    const original = fromJson<IPipeline>(viewState.original);
-    original.disabled = isDisabled;
-    setOriginal(original, nextRenderablePipeline);
+  // Only the disabled flag was saved, so other pending changes stay unsaved
+  const disableToggled = (isDisabled: boolean, original: IPipeline) => {
+    const latest = latestModel.current;
+    const nextPipeline = { ...latest.pipeline, disabled: isDisabled };
+    const nextRenderablePipeline = latest.isTemplatedPipeline ? latest.renderablePipeline : nextPipeline;
+    updateModel({ ...latest, pipeline: nextPipeline, renderablePipeline: nextRenderablePipeline }, false);
+    return applyUpdateTs({ ...original, disabled: isDisabled });
   };
 
   const enablePipeline = () => {
-    ReactModal.show(EnablePipelineModal, { pipeline: fromJson<IPipeline>(viewState.original) } as any)
-      .then(() => disableToggled(false))
+    const original = fromJson<IPipeline>(viewState.original);
+    ReactModal.show(EnablePipelineModal, { pipeline: original } as any)
+      .then(() => disableToggled(false, original))
       .catch(() => {});
   };
 
   const disablePipeline = () => {
-    ReactModal.show(DisablePipelineModal, { pipeline: fromJson<IPipeline>(viewState.original) } as any)
-      .then(() => disableToggled(true))
+    const original = fromJson<IPipeline>(viewState.original);
+    ReactModal.show(DisablePipelineModal, { pipeline: original } as any)
+      .then(() => disableToggled(true, original))
       .catch(() => {});
   };
 
   const lockPipeline = () => {
     ReactModal.show(LockPipelineModal, { pipeline: model.pipeline } as any)
       .then((pipeline: IPipeline) => {
-        const nextPipeline = { ...model.pipeline, locked: pipeline.locked };
-        const nextRenderablePipeline = model.isTemplatedPipeline ? model.renderablePipeline : nextPipeline;
-        updateModel({ ...model, pipeline: nextPipeline, renderablePipeline: nextRenderablePipeline }, false);
-        setOriginal(nextPipeline, nextRenderablePipeline);
+        const latest = latestModel.current;
+        const nextPipeline = { ...latest.pipeline, locked: pipeline.locked };
+        const nextRenderablePipeline = latest.isTemplatedPipeline ? latest.renderablePipeline : nextPipeline;
+        updateModel({ ...latest, pipeline: nextPipeline, renderablePipeline: nextRenderablePipeline }, false);
+        // The modal saved the pipeline
+        return applyUpdateTs(cloneDeep(nextPipeline));
       })
       .catch(() => {});
   };
@@ -1206,11 +1252,13 @@ export function PipelineConfigPageComponent({
   const unlockPipeline = () => {
     ReactModal.show(UnlockPipelineModal, { pipeline: model.pipeline } as any)
       .then(() => {
-        const nextPipeline = cloneDeep(model.pipeline);
+        const latest = latestModel.current;
+        const nextPipeline = { ...latest.pipeline };
         delete nextPipeline.locked;
-        const nextRenderablePipeline = model.isTemplatedPipeline ? model.renderablePipeline : nextPipeline;
-        updateModel({ ...model, pipeline: nextPipeline, renderablePipeline: nextRenderablePipeline }, false);
-        setOriginal(nextPipeline, nextRenderablePipeline);
+        const nextRenderablePipeline = latest.isTemplatedPipeline ? latest.renderablePipeline : nextPipeline;
+        updateModel({ ...latest, pipeline: nextPipeline, renderablePipeline: nextRenderablePipeline }, false);
+        // The modal saved the pipeline
+        return applyUpdateTs(cloneDeep(nextPipeline));
       })
       .catch(() => {});
   };
@@ -1222,7 +1270,8 @@ export function PipelineConfigPageComponent({
       currentConfig: viewState.isDirty ? cloneDeep(model.pipeline) : null,
     } as any)
       .then((newConfig: IPipeline) => {
-        updateModel({ ...model, pipeline: newConfig, renderablePipeline: newConfig });
+        updateModel({ ...latestModel.current, pipeline: newConfig, renderablePipeline: newConfig });
+        setViewState((current) => ({ ...current, ...selectionInRange(current, newConfig) }));
         savePipeline(newConfig);
       })
       .catch(() => {});
@@ -1379,18 +1428,18 @@ export function PipelineConfigPageComponent({
                         pipeline={renderablePipeline}
                         fieldUpdated={stageFieldUpdated}
                         updatePipelineConfig={updatePipelineConfig}
-                        revertCount={viewState.revertCount}
                       />
                     )}
                     {viewState.section === 'stage' && selectedStage && (
                       <PipelineStageConfig
+                        key={getStageEditorKey(selectedStage)}
                         accounts={accounts}
                         accountLoadError={accountLoadError}
                         application={app}
                         pipeline={renderablePipeline}
                         stage={selectedStage}
                         stageFieldUpdated={stageFieldUpdated}
-                        updateStageDependencies={(dependencies) => updateStageDependencies(selectedStage, dependencies)}
+                        replaceStage={replaceStage}
                         updateStageField={(changes) => updateStageField(selectedStage, changes)}
                         removeStage={removeStage}
                       />

package/src/pipeline/config/actions/pipelineJson/EditPipelineJsonModal.spec.tsx

@@ -0,0 +1,55 @@
+import { mount } from 'enzyme';
+import React from 'react';
+
+import { EditPipelineJsonModal } from './EditPipelineJsonModal';
+import type { IPipeline } from '../../../../domain';
+
+describe('EditPipelineJsonModal', () => {
+  const pipeline = (): IPipeline => ({
+    application: 'app',
+    id: 'pipeline-id',
+    name: 'Pipeline',
+    stages: [],
+    triggers: [],
+    parameterConfig: [],
+    notifications: [],
+    limitConcurrent: true,
+    keepWaitingPipelines: false,
+  });
+
+  const updatePipeline = (edited: any) => {
+    const original = pipeline();
+    const closeModal = jasmine.createSpy('closeModal');
+    const wrapper = mount(
+      <EditPipelineJsonModal pipeline={original} plan={null} closeModal={closeModal} dismissModal={() => {}} />,
+    );
+    wrapper.setState({ pipelineJSON: JSON.stringify(edited) });
+    (wrapper.instance() as any).updatePipeline();
+    return { closeModal, original, errorMessage: (wrapper.state() as any).errorMessage as string };
+  };
+
+  it('rejects triggers that are not objects', () => {
+    const { closeModal, original, errorMessage } = updatePipeline({ ...pipeline(), triggers: ['x'] });
+
+    expect(errorMessage).toBe('The triggers property must be a list of objects.');
+    expect(closeModal).not.toHaveBeenCalled();
+    expect(original.triggers).toEqual([]);
+  });
+
+  it('rejects stages that are not a list', () => {
+    const { closeModal, original, errorMessage } = updatePipeline({ ...pipeline(), stages: 'x' });
+
+    expect(errorMessage).toBe('The stages property must be a list of objects.');
+    expect(closeModal).not.toHaveBeenCalled();
+    expect(original.stages).toEqual([]);
+  });
+
+  it('accepts stages and triggers that are lists of objects', () => {
+    const edited = { ...pipeline(), triggers: [{ type: 'cron' }] };
+    const { closeModal, original, errorMessage } = updatePipeline(edited);
+
+    expect(errorMessage).toBeFalsy();
+    expect(closeModal).toHaveBeenCalled();
+    expect(original.triggers).toEqual([{ type: 'cron' } as any]);
+  });
+});

package/src/pipeline/config/actions/pipelineJson/EditPipelineJsonModal.tsx

@@ -1,4 +1,5 @@
 import 'brace/mode/json';
+import { isPlainObject } from 'lodash';
 import React from 'react';
 import { Modal } from 'react-bootstrap';
 
@@ -54,6 +55,13 @@ export class EditPipelineJsonModal extends React.Component<IEditPipelineJsonModa
   }
 
   private validatePipeline(pipeline: IPipeline): void {
+    ['stages', 'triggers'].forEach((field) => {
+      const items = (pipeline as any)[field];
+      if (items != null && (!Array.isArray(items) || !items.every((item) => isPlainObject(item)))) {
+        throw new Error(`The ${field} property must be a list of objects.`);
+      }
+    });
+
     const refIds = new Set<string | number>();
     const badIds = new Set<string | number>();
     if (pipeline.stages) {

package/src/pipeline/config/graph/PipelineGraph.tsx

@@ -59,6 +59,7 @@ export class PipelineGraph extends React.Component<IPipelineGraphProps, IPipelin
   private element: JQuery;
   private graphResizeObserver: ResizeObserver;
   private graphStatusHash: string;
+  private graphStructure: string;
   private graphVerticalPadding = 11;
   private lastElementWidth = 0;
   private layoutRetryFrame: number | null = null;
@@ -438,6 +439,7 @@ export class PipelineGraph extends React.Component<IPipelineGraphProps, IPipelin
       newState = clone(this.defaultState);
       newState.showGraph = false;
     } else if (!statesOnly) {
+      this.graphStructure = this.getGraphStructure(props.pipeline);
       newState = clone(this.defaultState);
       const groupedNodes = this.applyPhasesAndLink(props, nodes, newState);
       this.applyPhaseWidth(props, newState);
@@ -504,6 +506,19 @@ export class PipelineGraph extends React.Component<IPipelineGraphProps, IPipelin
     this.graphResizeObserver.observe(this.element[0]);
   }
 
+  // The stage fields the configuration graph draws. Layout measures each node in the DOM, so skip it when these
+  // are unchanged.
+  private getGraphStructure(pipeline: IPipeline): string {
+    return JSON.stringify(
+      (pipeline?.stages ?? []).map((stage) => [
+        stage.refId,
+        stage.name,
+        stage.requisiteStageRefIds,
+        stage.graphRowOverride,
+      ]),
+    );
+  }
+
   @Debounce(300)
   private validatePipeline(pipeline: IPipeline): void {
     PipelineConfigValidator.validatePipeline(pipeline).catch(() => {});
@@ -524,7 +539,9 @@ export class PipelineGraph extends React.Component<IPipelineGraphProps, IPipelin
 
     if (nextProps.pipeline !== this.props.pipeline) {
       updateGraph = true;
-      stateOnly = false;
+      if (this.getGraphStructure(nextProps.pipeline) !== this.graphStructure) {
+        stateOnly = false;
+      }
       if (this.props.shouldValidate) {
         this.validatePipeline(nextProps.pipeline);
       }

package/src/pipeline/config/stages/FormikStageConfig.spec.tsx

@@ -0,0 +1,62 @@
+import type { FormikProps } from 'formik';
+import { mount } from 'enzyme';
+import React from 'react';
+
+import { FormikStageConfig } from './FormikStageConfig';
+import type { IStage } from '../../../domain';
+
+describe('FormikStageConfig', () => {
+  const mountConfig = (stage: IStage, onChange: (values: IStage) => void) => {
+    let formik: FormikProps<IStage>;
+    const wrapper = mount(
+      <FormikStageConfig
+        application={{} as any}
+        pipeline={{} as any}
+        stage={stage}
+        onChange={onChange}
+        render={(props) => {
+          formik = props.formik;
+          return null;
+        }}
+      />,
+    );
+    return { wrapper, setField: (name: string, value: any) => formik.setFieldValue(name, value) };
+  };
+
+  const stageWith = (extra: Partial<IStage> = {}): IStage => ({
+    refId: '1',
+    name: 'Script',
+    type: 'script',
+    requisiteStageRefIds: [],
+    command: 'a',
+    failPipeline: true,
+    ...extra,
+  });
+
+  it('keeps stage fields changed outside the form', (done) => {
+    const stage = stageWith();
+    const onChange = (values: IStage) => {
+      expect(values.command).toBe('b');
+      expect(values.failPipeline).toBe(false);
+      done();
+    };
+    const { wrapper, setField } = mountConfig(stage, onChange);
+
+    // Like Execution Options, which edits the stage outside the form
+    stage.failPipeline = false;
+    wrapper.setProps({ stage });
+    setField('command', 'b');
+  });
+
+  it('removes fields the form removed', (done) => {
+    const stage = stageWith();
+    const onChange = (values: IStage) => {
+      expect(values.command).toBeUndefined();
+      expect(values.failPipeline).toBe(true);
+      done();
+    };
+    const { setField } = mountConfig(stage, onChange);
+
+    setField('command', undefined);
+  });
+});