@spinnaker/core 2026.3.0 → 2026.3.2

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

@@ -32,6 +32,17 @@ const decorate = (validate: IContextualValidator, props: IFormikStageConfigProps
   return (values: IStage) => validate(values, { application, pipeline });
 };
 
+// Applies only the fields the form changed, so stage edits made outside the form are kept
+const applyChangedValues = (stage: IStage, values: IStage, prevValues: IStage): IStage => {
+  const changes: Partial<IStage> = {};
+  new Set([...Object.keys(prevValues), ...Object.keys(values)]).forEach((key) => {
+    if (values[key] !== prevValues[key]) {
+      changes[key] = values[key];
+    }
+  });
+  return { ...stage, ...changes };
+};
+
 export class FormikStageConfig extends React.Component<IFormikStageConfigProps> {
   public render() {
     const { render, onChange, stage, validate, application, pipeline } = this.props;
@@ -42,7 +53,13 @@ export class FormikStageConfig extends React.Component<IFormikStageConfigProps>
         onSubmit={() => {}}
         render={(formik) => (
           <LayoutProvider value={ResponsiveFieldLayout}>
-            <WatchValue onChange={onChange} value={formik.values} />
+            <WatchValue
+              onChange={
+                onChange &&
+                ((values: IStage, prevValues: IStage) => onChange(applyChangedValues(stage, values, prevValues)))
+              }
+              value={formik.values}
+            />
             {render({ application, pipeline, formik })}
           </LayoutProvider>
         )}

package/src/pipeline/config/stages/evaluateVariables/EvaluateVariablesStageConfig.spec.ts

@@ -0,0 +1,70 @@
+import { validateEvaluateVariablesStage } from './EvaluateVariablesStageConfig';
+import type { IStage } from '../../../../domain';
+
+function buildStage(variables: Array<{ key: string; value: string }>): IStage {
+  return ({ variables } as unknown) as IStage;
+}
+
+describe('validateEvaluateVariablesStage', () => {
+  describe('when dashed identifier support is disabled (default)', () => {
+    it('rejects a variable name containing a hyphen', () => {
+      const stage = buildStage([{ key: 'my-container-name', value: '${1}' }]);
+
+      const result = validateEvaluateVariablesStage(stage);
+
+      expect(result.variables[0].key).toEqual(
+        'Error: Variable Name should consist only of letters, numbers, or underscore',
+      );
+    });
+
+    it('accepts a variable name using only letters, numbers, and underscore', () => {
+      const stage = buildStage([{ key: 'my_container_name1', value: '${1}' }]);
+
+      const result = validateEvaluateVariablesStage(stage);
+
+      expect(result.variables).toBeUndefined();
+    });
+  });
+
+  describe('when dashed identifier support is enabled', () => {
+    it('accepts a variable name containing a hyphen', () => {
+      const stage = buildStage([{ key: 'my-container-name', value: '${1}' }]);
+
+      const result = validateEvaluateVariablesStage(stage, true);
+
+      expect(result.variables).toBeUndefined();
+    });
+
+    it('still rejects a variable name starting with a digit', () => {
+      const stage = buildStage([{ key: '1-my-container-name', value: '${1}' }]);
+
+      const result = validateEvaluateVariablesStage(stage, true);
+
+      expect(result.variables[0].key).toEqual(
+        'Error: Variable Name should consist only of letters, numbers, underscore, or hyphen',
+      );
+    });
+
+    it('still rejects a variable name containing a space or other invalid character', () => {
+      const stage = buildStage([{ key: 'my container name', value: '${1}' }]);
+
+      const result = validateEvaluateVariablesStage(stage, true);
+
+      expect(result.variables[0].key).toEqual(
+        'Error: Variable Name should consist only of letters, numbers, underscore, or hyphen',
+      );
+    });
+  });
+
+  it('still enforces the duplicate key validator regardless of dashed identifier support', () => {
+    const stage = buildStage([
+      { key: 'my-name', value: '${1}' },
+      { key: 'my-name', value: '${2}' },
+    ]);
+
+    const result = validateEvaluateVariablesStage(stage, true);
+
+    expect(result.variables[0].key).toEqual("Duplicate key 'my-name'");
+    expect(result.variables[1].key).toEqual("Duplicate key 'my-name'");
+  });
+});

package/src/pipeline/config/stages/evaluateVariables/EvaluateVariablesStageConfig.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 
 import type { IExecutionAndStagePickerProps } from './ExecutionAndStagePicker';
 import { ExecutionAndStagePicker } from './ExecutionAndStagePicker';
+import { ExpressionCapabilitiesReader } from './ExpressionCapabilitiesReader';
 import type { IFormikStageConfigInjectedProps } from '../FormikStageConfig';
 import { FormikStageConfig } from '../FormikStageConfig';
 import type { IStageConfigProps } from '../common';
@@ -31,9 +32,14 @@ export interface IEvaluatedVariable {
   value: string;
 }
 
-const variableNameValidator: IValidator = (val: string, label: string) =>
-  !val.match(/^[a-zA-Z_][a-zA-Z0-9_]*$/) &&
-  errorMessage(`${label} should consist only of letters, numbers, or underscore`);
+const createVariableNameValidator = (dashedIdentifiersEnabled: boolean): IValidator => {
+  const pattern = dashedIdentifiersEnabled ? /^[a-zA-Z_][a-zA-Z0-9_-]*$/ : /^[a-zA-Z_][a-zA-Z0-9_]*$/;
+  const allowedCharacters = dashedIdentifiersEnabled
+    ? 'letters, numbers, underscore, or hyphen'
+    : 'letters, numbers, or underscore';
+  return (val: string, label: string) =>
+    !val.match(pattern) && errorMessage(`${label} should consist only of ${allowedCharacters}`);
+};
 
 const duplicateKeyValidatorFactory = (variables: IEvaluatedVariable[] = []) => {
   const keyCounts = countBy(
@@ -43,9 +49,10 @@ const duplicateKeyValidatorFactory = (variables: IEvaluatedVariable[] = []) => {
   return (key: string) => keyCounts[key] > 1 && `Duplicate key '${key}'`;
 };
 
-export function validateEvaluateVariablesStage(stage: IStage) {
+export function validateEvaluateVariablesStage(stage: IStage, dashedIdentifiersEnabled = false) {
   const formValidator = new FormValidator(stage);
   const duplicateKeyValidator = duplicateKeyValidatorFactory(stage.variables);
+  const variableNameValidator = createVariableNameValidator(dashedIdentifiersEnabled);
   formValidator.field('variables').withValidators(
     formValidator.arrayForEach((item) => {
       item.field('key', 'Variable Name').required().withValidators(variableNameValidator, duplicateKeyValidator);
@@ -75,6 +82,13 @@ function PreviewConfiguration(props: IExecutionAndStagePickerProps) {
 export function EvaluateVariablesStageConfig(props: IStageConfigProps) {
   const { application, stage, pipeline, updateStage } = props;
   const [chosenStage, setChosenStage] = React.useState({} as IStageForSpelPreview);
+  const [dashedIdentifiersEnabled, setDashedIdentifiersEnabled] = React.useState(false);
+
+  React.useEffect(() => {
+    ExpressionCapabilitiesReader.getExpressionCapabilities()
+      .then((capabilities) => setDashedIdentifiersEnabled(capabilities.dashedIdentifiersEnabled))
+      .catch(() => setDashedIdentifiersEnabled(false));
+  }, []);
 
   const helpMessage =
     'Define one or more variables by assigning a **name** _(string)_ and a **value** ' +
@@ -86,7 +100,9 @@ export function EvaluateVariablesStageConfig(props: IStageConfigProps) {
       application={application}
       stage={stage}
       pipeline={pipeline}
-      validate={validateEvaluateVariablesStage}
+      validate={(stageToValidate) =>
+        validateEvaluateVariablesStage(stageToValidate as IStage, dashedIdentifiersEnabled)
+      }
       onChange={updateStage}
       render={(renderProps) => {
         return (

package/src/pipeline/config/stages/evaluateVariables/ExpressionCapabilitiesReader.ts

@@ -0,0 +1,13 @@
+import { REST } from '../../../../api';
+
+export interface IExpressionCapabilities {
+  functions: unknown[];
+  spelEvaluators: unknown[];
+  dashedIdentifiersEnabled: boolean;
+}
+
+export class ExpressionCapabilitiesReader {
+  public static getExpressionCapabilities(): Promise<IExpressionCapabilities> {
+    return REST('/capabilities/expressions').useCache(true).get();
+  }
+}

package/src/pipeline/config/triggers/ExecutionOptionsPageContent.tsx

@@ -11,9 +11,16 @@ export interface IExecutionOptionsPageContentProps {
 
 export function ExecutionOptionsPageContent(props: IExecutionOptionsPageContentProps) {
   const { pipeline, updatePipelineConfig } = props;
-  const [currentMaxConcurrent, setCurrentMaxConcurrent] = useState(pipeline.maxConcurrentExecutions || 0);
+  const maxConcurrent = pipeline.maxConcurrentExecutions || 0;
+  const [currentMaxConcurrent, setCurrentMaxConcurrent] = useState(maxConcurrent);
+  const [lastPipeline, setLastPipeline] = useState(pipeline);
+  // Show the pipeline's value when the pipeline changes, such as after a revert or pipeline JSON edit
+  if (pipeline !== lastPipeline) {
+    setLastPipeline(pipeline);
+    setCurrentMaxConcurrent(maxConcurrent);
+  }
   const handleMaxConcurrentChange = (changeEvent: any) => {
-    const value = Number.parseInt(changeEvent.target.value);
+    const value = Number.parseInt(changeEvent.target.value) || 0;
     setCurrentMaxConcurrent(value);
     updatePipelineConfig({ maxConcurrentExecutions: value });
   };
@@ -29,11 +36,11 @@ export function ExecutionOptionsPageContent(props: IExecutionOptionsPageContentP
             />
           )}
           onChange={() => {
-            updatePipelineConfig({ limitConcurrent: !pipeline.limitConcurrent });
+            const changes: Partial<IPipeline> = { limitConcurrent: !pipeline.limitConcurrent };
             if (!pipeline.limitConcurrent && !pipeline.keepWaitingPipelines) {
-              pipeline.keepWaitingPipelines = true;
-              updatePipelineConfig({ keepWaitingPipelines: true });
+              changes.keepWaitingPipelines = true;
             }
+            updatePipelineConfig(changes);
           }}
           value={pipeline.limitConcurrent}
         />

package/src/pipeline/config/triggers/Triggers.spec.tsx

@@ -31,7 +31,6 @@ describe('<Triggers />', () => {
       application: ApplicationModelBuilder.createApplicationForTests('products'),
       fieldUpdated: jasmine.createSpy('fieldUpdated'),
       updatePipelineConfig: jasmine.createSpy('updatePipelineConfig'),
-      revertCount: 0,
     };
   });
 

package/src/pipeline/config/triggers/Triggers.tsx

@@ -15,14 +15,10 @@ export interface ITriggersProps {
   pipelineConfig?: IPipeline;
   fieldUpdated: () => void;
   updatePipelineConfig: (changes: Partial<IPipeline>) => void;
-  revertCount: number;
 }
 
 export function Triggers(props: ITriggersProps) {
   const pipeline = props.pipeline;
-  // KLUDGE: This value is used as a React key when rendering the Triggers.
-  // Whenever the pipeline is reverted, this causes the Triggers to remount and reset formik state.
-  const revertCountKLUDGE = props.revertCount;
 
   return (
     <PageNavigator scrollableContainer=".pipeline-config-page">
@@ -35,7 +31,7 @@ export function Triggers(props: ITriggersProps) {
         badge={pipeline.triggers ? pipeline.triggers.length.toString() : '0'}
         noWrapper={true}
       >
-        <TriggersPageContent {...props} key={revertCountKLUDGE} />
+        <TriggersPageContent {...props} />
       </PageSection>
       <PageSection
         pageKey="parameters"
@@ -57,7 +53,6 @@ export function Triggers(props: ITriggersProps) {
         <MetadataPageContent
           pipeline={props.pipelineConfig || props.pipeline}
           updatePipelineConfig={props.updatePipelineConfig}
-          key={revertCountKLUDGE}
         />
       </PageSection>
     </PageNavigator>

package/src/pipeline/config/triggers/TriggersPageContent.tsx

@@ -24,12 +24,15 @@ export function TriggersPageContent(props: ITriggersPageContentProps) {
   const { pipeline, application, updatePipelineConfig } = props;
   const expectedArtifacts = pipeline?.expectedArtifacts ?? [];
   const triggers = pipeline?.triggers ?? [];
-  // KLUDGE: because we don't have a stable identifier to use for each trigger object, we need to reset the keys
-  // used for each trigger in the list when a delete happens (because the array of triggers shifts by one).
-  // For now, we do this by incrementing a counter every time a delete happens, and sticking that number
-  // into the key of each trigger before its index value. Ideally, we should generate stable UUIDs for
-  // each trigger object that we can use instead of relying on index keys.
-  const [deleteCount, setDeleteCount] = useState(0);
+  // Each trigger object gets its own form, so replacing a trigger remounts it.
+  // The key follows a trigger through its form's own edits.
+  const [triggerKeys] = useState(() => ({ ids: new WeakMap<ITrigger, number>(), next: 0 }));
+  const getTriggerKey = (trigger: ITrigger) => {
+    if (!triggerKeys.ids.has(trigger)) {
+      triggerKeys.ids.set(trigger, triggerKeys.next++);
+    }
+    return triggerKeys.ids.get(trigger);
+  };
 
   function updateRoles(roles: any[]): void {
     updatePipelineConfig({ roles });
@@ -72,7 +75,6 @@ export function TriggersPageContent(props: ITriggersPageContentProps) {
     }
 
     updatePipelineConfig(pipelineUpdate);
-    setDeleteCount(deleteCount + 1);
   }
 
   /**
@@ -82,6 +84,7 @@ export function TriggersPageContent(props: ITriggersPageContentProps) {
    * @param updatedTrigger The updated trigger
    */
   function updateTrigger(indexToUpdate: number, updatedTrigger: ITrigger): void {
+    triggerKeys.ids.set(updatedTrigger, getTriggerKey(triggers[indexToUpdate]));
     PipelineConfigValidator.validatePipeline(pipeline);
     updatePipelineConfig({
       triggers: triggers.map((trigger, index) => {
@@ -181,7 +184,7 @@ export function TriggersPageContent(props: ITriggersPageContentProps) {
         </div>
       )}
       {triggers.map((trigger, index) => (
-        <div className="trigger-config" key={`${deleteCount}:${index}`}>
+        <div className="trigger-config" key={getTriggerKey(trigger)}>
           <Trigger
             application={application}
             index={index}