@spinnaker/core 2026.2.2 → 2026.3.0

package/src/pipeline/config/stages/monitoreddeploy/notifyDeployStartingStage.ts

@@ -1,14 +1,13 @@
-import { module } from 'angular';
-
 import { DeploymentMonitorExecutionDetails } from './DeploymentMonitorExecutionDetails';
+import { NoConfigurationStageConfig } from '../common';
+import type { IStageTypeConfig } from '../../../../domain';
 import { Registry } from '../../../../registry';
 
-export const NOTIFY_DEPLOY_STARTING_STAGE = 'spinnaker.core.pipeline.stage.monitored.notifydeploystartingstage';
+export const notifyDeployStartingStage: IStageTypeConfig = {
+  synthetic: true,
+  key: 'notifyDeployStarting',
+  component: NoConfigurationStageConfig,
+  executionDetailsSections: [DeploymentMonitorExecutionDetails],
+};
 
-module(NOTIFY_DEPLOY_STARTING_STAGE, []).config(() => {
-  Registry.pipeline.registerStage({
-    synthetic: true,
-    key: 'notifyDeployStarting',
-    executionDetailsSections: [DeploymentMonitorExecutionDetails],
-  });
-});
+Registry.pipeline.registerStage(notifyDeployStartingStage);

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

@@ -0,0 +1,109 @@
+import { mount } from 'enzyme';
+import React from 'react';
+import { act } from 'react-dom/test-utils';
+
+import { ApplicationReader } from '../../../../application/service/ApplicationReader';
+import { ReactSelectInput } from '../../../../presentation';
+import { PipelineConfigService } from '../../services/PipelineConfigService';
+import { PipelineStageConfig } from './PipelineStageConfig';
+import type { IPipeline, IStage } from '../../../../domain';
+
+describe('PipelineStageConfig', () => {
+  const flush = async () => {
+    await Promise.resolve();
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    await Promise.resolve();
+  };
+
+  beforeEach(() => {
+    spyOn(ApplicationReader, 'listApplications').and.returnValue(Promise.resolve([{ name: 'app' }]) as any);
+  });
+
+  it('uses a searchable virtualized application selector for static application values', async () => {
+    (ApplicationReader.listApplications as jasmine.Spy).and.returnValue(
+      Promise.resolve([{ name: 'app' }, { name: 'zzz-app' }]) as any,
+    );
+    const parentPipeline = { id: 'parent-pipeline', parameterConfig: [], stages: [] } as IPipeline;
+    const stage = { application: 'app' } as IStage;
+    const updateStageField = jasmine.createSpy('updateStageField');
+    spyOn(PipelineConfigService, 'getPipelinesForApplication').and.returnValue(Promise.resolve([]) as any);
+
+    const wrapper = mount(
+      <PipelineStageConfig
+        application={{ name: 'app' } as any}
+        pipeline={parentPipeline}
+        stage={stage}
+        updateStageField={updateStageField}
+      />,
+    );
+
+    await act(async () => {
+      await flush();
+    });
+    wrapper.update();
+
+    const applicationSelect = wrapper.find(ReactSelectInput).filterWhere((node) => node.prop('name') === 'application');
+    expect(applicationSelect.exists()).toBe(true);
+    expect(applicationSelect.prop('mode')).toBe('VIRTUALIZED');
+    expect(applicationSelect.prop('stringOptions')).toEqual(['app', 'zzz-app']);
+
+    await act(async () => {
+      applicationSelect.prop('onChange')({ target: { value: 'zzz-app' } } as any);
+      await flush();
+    });
+
+    expect(updateStageField).toHaveBeenCalledWith({ application: 'zzz-app' });
+
+    wrapper.unmount();
+  });
+
+  it('keeps option parameter SpeL values editable', async () => {
+    const parentPipeline = { id: 'parent-pipeline', parameterConfig: [], stages: [] } as IPipeline;
+    const childPipeline = {
+      id: 'child-pipeline',
+      name: 'Child Pipeline',
+      parameterConfig: [
+        {
+          default: null,
+          hasOptions: true,
+          name: 'choice',
+          options: [{ value: 'one' }, { value: 'two' }],
+        },
+      ],
+    } as IPipeline;
+    const stage = {
+      application: 'app',
+      pipeline: 'child-pipeline',
+      pipelineParameters: { choice: '${ trigger.properties.choice }' },
+    } as IStage;
+    const updateStageField = jasmine.createSpy('updateStageField');
+    spyOn(PipelineConfigService, 'getPipelinesForApplication').and.returnValue(Promise.resolve([childPipeline]) as any);
+
+    const wrapper = mount(
+      <PipelineStageConfig
+        application={{ name: 'app' } as any}
+        pipeline={parentPipeline}
+        stage={stage}
+        updateStageField={updateStageField}
+      />,
+    );
+
+    await act(async () => {
+      await flush();
+    });
+    wrapper.update();
+
+    const parameterInput = wrapper.find('.well input.form-control').filterWhere((node) => !node.prop('disabled'));
+    expect(parameterInput.exists()).toBe(true);
+    expect(parameterInput.prop('value')).toBe('${ trigger.properties.choice }');
+
+    await act(async () => {
+      parameterInput.prop('onChange')({ target: { value: '${ parameters.choice }' } } as any);
+      await flush();
+    });
+
+    expect(updateStageField).toHaveBeenCalledWith({ pipelineParameters: { choice: '${ parameters.choice }' } });
+
+    wrapper.unmount();
+  });
+});

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

@@ -0,0 +1,351 @@
+import { pickBy } from 'lodash';
+import React from 'react';
+
+import { ApplicationReader } from '../../../../application/service/ApplicationReader';
+import type { IStageConfigProps } from '../common';
+import { StageConfigField } from '../common';
+import type { IPipeline } from '../../../../domain';
+import { HelpField } from '../../../../help/HelpField';
+import { ReactSelectInput } from '../../../../presentation';
+import { PipelineConfigService } from '../../services/PipelineConfigService';
+import { PipelineTemplateReader, PipelineTemplateV2Service } from '../../templates';
+
+interface IPipelineParameterOption {
+  value: string;
+}
+
+interface IPipelineParameterConfig {
+  default: string;
+  description?: string;
+  hasOptions?: boolean;
+  name: string;
+  options?: IPipelineParameterOption[];
+}
+
+function hasSpel(value: string): boolean {
+  return Boolean(value && value.includes('${'));
+}
+
+function isParameterExpression(value: any): boolean {
+  return typeof value === 'string' && value.startsWith('${') && value.endsWith('}');
+}
+
+function normalizeParameters(parameterConfig: IPipelineParameterConfig[]): IPipelineParameterConfig[] {
+  return parameterConfig.map((parameter) => {
+    const options = parameter.options ? parameter.options.slice() : undefined;
+    if (parameter.default && options && !options.some((option) => option.value === parameter.default)) {
+      options.unshift({ value: parameter.default });
+    }
+    return { ...parameter, options };
+  });
+}
+
+export function PipelineStageConfig({ application, pipeline, stage, updateStageField }: IStageConfigProps) {
+  const [applications, setApplications] = React.useState<string[]>([]);
+  const [pipelines, setPipelines] = React.useState<IPipeline[]>([]);
+  const [pipelinesLoaded, setPipelinesLoaded] = React.useState(false);
+  const [pipelineParameters, setPipelineParameters] = React.useState<IPipelineParameterConfig[]>([]);
+  const [useDefaultParameters, setUseDefaultParameters] = React.useState<Record<string, boolean>>({});
+  const [userSuppliedParameters, setUserSuppliedParameters] = React.useState<Record<string, string>>({});
+  const [invalidParameters, setInvalidParameters] = React.useState<Record<string, string>>({});
+  const parameterExpression = isParameterExpression(stage.pipelineParameters);
+
+  React.useEffect(() => {
+    const defaults: Record<string, any> = {};
+    if (stage.failPipeline === undefined) {
+      defaults.failPipeline = true;
+    }
+    if (stage.waitForCompletion === undefined) {
+      defaults.waitForCompletion = true;
+    }
+    if (!stage.application) {
+      defaults.application = application.name;
+    }
+    if (Object.keys(defaults).length) {
+      updateStageField(defaults);
+    }
+  }, []);
+
+  React.useEffect(() => {
+    let active = true;
+    ApplicationReader.listApplications().then((loadedApplications) => {
+      if (active) {
+        setApplications(loadedApplications.map((app) => app.name).sort());
+      }
+    });
+    return () => {
+      active = false;
+    };
+  }, []);
+
+  React.useEffect(() => {
+    let active = true;
+    setPipelinesLoaded(false);
+
+    if (!stage.application || hasSpel(stage.application)) {
+      setPipelines([]);
+      setPipelinesLoaded(true);
+      return () => {
+        active = false;
+      };
+    }
+
+    PipelineConfigService.getPipelinesForApplication(stage.application).then((loadedPipelines) => {
+      if (!active) {
+        return;
+      }
+      const nextPipelines = loadedPipelines.filter((candidate) => candidate.id !== pipeline.id);
+      setPipelines(nextPipelines);
+      setPipelinesLoaded(true);
+
+      if (
+        stage.pipeline &&
+        !hasSpel(stage.pipeline) &&
+        !loadedPipelines.some((candidate) => candidate.id === stage.pipeline)
+      ) {
+        updateStageField({ pipeline: null });
+      }
+    });
+
+    return () => {
+      active = false;
+    };
+  }, [stage.application, pipeline.id]);
+
+  React.useEffect(() => {
+    if (!stage.pipeline || hasSpel(stage.pipeline) || hasSpel(stage.application)) {
+      clearParams();
+      return;
+    }
+
+    const selectedPipeline = pipelines.find((candidate) => candidate.id === stage.pipeline);
+    if (!selectedPipeline) {
+      clearParams();
+      return;
+    }
+
+    if (PipelineTemplateV2Service.isV2PipelineConfig(selectedPipeline)) {
+      PipelineTemplateReader.getPipelinePlan(selectedPipeline as any)
+        .then((plan) => applyPipelineConfigParameters(plan as any))
+        .catch(clearParams);
+    } else {
+      applyPipelineConfigParameters(selectedPipeline as any);
+    }
+  }, [stage.pipeline, stage.application, pipelines]);
+
+  const clearParams = () => {
+    setPipelineParameters([]);
+    setUseDefaultParameters({});
+    setUserSuppliedParameters({});
+    setInvalidParameters({});
+  };
+
+  const applyPipelineConfigParameters = (config: IPipeline & { parameterConfig?: IPipelineParameterConfig[] }) => {
+    if (!config?.parameterConfig?.length) {
+      clearParams();
+      return;
+    }
+
+    const normalizedParameters = normalizeParameters(config.parameterConfig);
+    const nextParameters = parameterExpression ? {} : { ...(stage.pipelineParameters || {}) };
+    const acceptedParameterNames = normalizedParameters.map((parameter) => parameter.name);
+    const nextInvalidParameters = pickBy(nextParameters, (_value, name) => !acceptedParameterNames.includes(name));
+    const nextUseDefaultParameters: Record<string, boolean> = {};
+
+    normalizedParameters.forEach((parameter) => {
+      if (!parameterExpression && !(parameter.name in nextParameters) && parameter.default !== null) {
+        nextUseDefaultParameters[parameter.name] = true;
+      }
+    });
+
+    if (!stage.pipelineParameters && !parameterExpression) {
+      updateStageField({ pipelineParameters: nextParameters });
+    }
+    setPipelineParameters(normalizedParameters);
+    setUseDefaultParameters(nextUseDefaultParameters);
+    setUserSuppliedParameters(nextParameters);
+    setInvalidParameters(nextInvalidParameters as Record<string, string>);
+  };
+
+  const updateParam = (parameter: string, value: string, useDefault: boolean) => {
+    const nextParameters = { ...userSuppliedParameters };
+    if (useDefault) {
+      delete nextParameters[parameter];
+    } else {
+      nextParameters[parameter] = value || '';
+    }
+    setUserSuppliedParameters(nextParameters);
+    updateStageField({ pipelineParameters: nextParameters });
+  };
+
+  const removeInvalidParameters = () => {
+    const nextParameters = { ...userSuppliedParameters };
+    Object.keys(invalidParameters).forEach((param) => delete nextParameters[param]);
+    setUserSuppliedParameters(nextParameters);
+    setInvalidParameters({});
+    updateStageField({ pipelineParameters: nextParameters });
+  };
+
+  const sortedParameters = pipelineParameters.slice().sort((a, b) => a.name.localeCompare(b.name));
+  const hasInvalidParameters = Boolean(Object.keys(invalidParameters).length && !parameterExpression);
+
+  return (
+    <div className="form-horizontal">
+      <StageConfigField label="Application">
+        {hasSpel(stage.application) ? (
+          <input
+            className="form-control input-sm"
+            onChange={(event) => updateStageField({ application: event.target.value })}
+            value={stage.application || ''}
+          />
+        ) : (
+          <ReactSelectInput
+            inputClassName="pipeline-stage-application-select"
+            mode="VIRTUALIZED"
+            name="application"
+            onChange={(event) => updateStageField({ application: event.target.value })}
+            placeholder="None"
+            stringOptions={applications}
+            value={stage.application || ''}
+          />
+        )}
+      </StageConfigField>
+      <StageConfigField label="Pipeline">
+        {hasSpel(stage.pipeline) || hasSpel(stage.application) ? (
+          <input
+            className="form-control input-sm"
+            onChange={(event) => updateStageField({ pipeline: event.target.value })}
+            value={stage.pipeline || ''}
+          />
+        ) : (
+          stage.application &&
+          pipelinesLoaded && (
+            <select
+              className="form-control input-sm"
+              onChange={(event) => updateStageField({ pipeline: event.target.value })}
+              value={stage.pipeline || ''}
+            >
+              <option value="">Select a pipeline...</option>
+              {pipelines
+                .slice()
+                .sort((a, b) => (a.name || '').localeCompare(b.name || ''))
+                .map((candidate) => (
+                  <option key={candidate.id} value={candidate.id}>
+                    {candidate.name}
+                  </option>
+                ))}
+            </select>
+          )
+        )}
+      </StageConfigField>
+      {Boolean(sortedParameters.length) && (
+        <div className="well well-sm clearfix col-md-offset-1 col-md-10">
+          <h4 className="text-left">Pipeline Parameters</h4>
+          {sortedParameters.map((parameter) => {
+            const useDefault = Boolean(useDefaultParameters[parameter.name]);
+            const parameterValue = userSuppliedParameters[parameter.name] || '';
+            const hasOptionValue =
+              !parameterValue || (parameter.options || []).some((option) => option.value === parameterValue);
+            return (
+              <div className="form-group" key={parameter.name}>
+                <div className="col-md-3 sm-label-right">
+                  <b>{parameter.name}</b> {parameter.description && <HelpField content={parameter.description} />}
+                </div>
+                <div className="col-md-5">
+                  {useDefault ? (
+                    <input className="form-control input-sm" disabled type="text" value={parameter.default || ''} />
+                  ) : parameter.hasOptions && hasOptionValue ? (
+                    <select
+                      className="form-control input-sm"
+                      onChange={(event) => updateParam(parameter.name, event.target.value, false)}
+                      value={parameterValue}
+                    >
+                      <option value="" />
+                      {(parameter.options || []).map((option) => (
+                        <option key={option.value} value={option.value}>
+                          {option.value}
+                        </option>
+                      ))}
+                    </select>
+                  ) : (
+                    <input
+                      className="form-control input-sm"
+                      onChange={(event) => updateParam(parameter.name, event.target.value, false)}
+                      type="text"
+                      value={parameterValue}
+                    />
+                  )}
+                </div>
+                {parameter.default !== null && (
+                  <div className="checkbox col-md-4">
+                    <label>
+                      <input
+                        checked={useDefault}
+                        onChange={(event) => {
+                          setUseDefaultParameters({ ...useDefaultParameters, [parameter.name]: event.target.checked });
+                          updateParam(parameter.name, userSuppliedParameters[parameter.name], event.target.checked);
+                        }}
+                        type="checkbox"
+                      />
+                      Use default
+                    </label>
+                  </div>
+                )}
+              </div>
+            );
+          })}
+          {hasInvalidParameters && (
+            <div className="horizontal center sp-margin-l-top" style={{ width: '100%' }}>
+              <div className="alert alert-danger vertical">
+                <p>
+                  <i className="fa fa-exclamation-triangle" /> The following parameters are not accepted by the pipeline
+                  but are still set in the stage configuration:
+                </p>
+                {Object.entries(invalidParameters).map(([paramName, paramValue]) => (
+                  <div className="flex-container-h" key={paramName} style={{ margin: '0.5em' }}>
+                    <label className="col-md-2">{paramName}</label>
+                    <input className="flex-grow" disabled style={{ width: '100%' }} type="text" value={paramValue} />
+                  </div>
+                ))}
+                <button className="self-right passive" onClick={removeInvalidParameters} type="button">
+                  Remove all
+                </button>
+              </div>
+            </div>
+          )}
+          {parameterExpression && (
+            <div className="horizontal center sp-margin-l-top" style={{ width: '100%' }}>
+              <div className="warning-text alert-info vertical">
+                <p>
+                  <i className="fa fa-exclamation-triangle" /> The pipelineParameters is defined as a SpeL expression
+                  and will be fully evaluated on Runtime.
+                </p>
+                <p>
+                  <code>{stage.pipelineParameters}</code>
+                </p>
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+      <StageConfigField label="Skip downstream output" helpKey="pipeline.skipDownstreamOutput">
+        <input
+          checked={Boolean(stage.skipDownstreamOutput)}
+          className="input-sm"
+          name="skipDownstreamOutput"
+          onChange={(event) => updateStageField({ skipDownstreamOutput: event.target.checked })}
+          type="checkbox"
+        />
+      </StageConfigField>
+      <StageConfigField label="Wait for results" helpKey="pipeline.waitForCompletion">
+        <input
+          checked={Boolean(stage.waitForCompletion)}
+          className="input-sm"
+          name="waitForCompletion"
+          onChange={(event) => updateStageField({ waitForCompletion: event.target.checked })}
+          type="checkbox"
+        />
+      </StageConfigField>
+    </div>
+  );
+}

package/src/pipeline/config/stages/pipeline/pipelineStage.js

@@ -1,183 +1,21 @@
 'use strict';
 
-import { module } from 'angular';
-import { pickBy } from 'lodash';
-
 import { PipelineParametersExecutionDetails } from './PipelineParametersExecutionDetails';
+import { PipelineStageConfig } from './PipelineStageConfig';
 import { PipelineStageExecutionDetails } from './PipelineStageExecutionDetails';
-import { ApplicationReader } from '../../../../application/service/ApplicationReader';
 import { ExecutionDetailsTasks } from '../common';
 import { Registry } from '../../../../registry';
-import { PipelineConfigService } from '../../services/PipelineConfigService';
-import { PipelineTemplateReader, PipelineTemplateV2Service } from '../../templates';
-
-export const CORE_PIPELINE_CONFIG_STAGES_PIPELINE_PIPELINESTAGE = 'spinnaker.core.pipeline.stage.pipelineStage';
-export const name = CORE_PIPELINE_CONFIG_STAGES_PIPELINE_PIPELINESTAGE; // for backwards compatibility
-module(CORE_PIPELINE_CONFIG_STAGES_PIPELINE_PIPELINESTAGE, [])
-  .config(function () {
-    Registry.pipeline.registerStage({
-      label: 'Pipeline',
-      description: 'Runs a pipeline',
-      key: 'pipeline',
-      restartable: true,
-      controller: 'pipelineStageCtrl',
-      controllerAs: 'pipelineStageCtrl',
-      producesArtifacts: true,
-      templateUrl: require('./pipelineStage.html'),
-      executionDetailsSections: [
-        PipelineStageExecutionDetails,
-        PipelineParametersExecutionDetails,
-        ExecutionDetailsTasks,
-      ],
-      supportsCustomTimeout: true,
-      validators: [{ type: 'requiredField', fieldName: 'pipeline' }],
-    });
-  })
-  .controller('pipelineStageCtrl', [
-    '$scope',
-    'stage',
-    function ($scope, stage) {
-      $scope.stage = stage;
-      $scope.stage.failPipeline = $scope.stage.failPipeline === undefined ? true : $scope.stage.failPipeline;
-      $scope.stage.waitForCompletion =
-        $scope.stage.waitForCompletion === undefined ? true : $scope.stage.waitForCompletion;
-
-      if (!$scope.stage.application) {
-        $scope.stage.application = $scope.application.name;
-      }
-
-      $scope.viewState = {
-        mastersLoaded: false,
-        mastersRefreshing: false,
-        mastersLastRefreshed: null,
-        pipelinesLoaded: false,
-        jobsRefreshing: false,
-        jobsLastRefreshed: null,
-        infiniteScroll: {
-          numToAdd: 20,
-          currentItems: 20,
-        },
-      };
-
-      this.hasSpel = function (string) {
-        return string && string.includes('${');
-      };
-      this.addMoreItems = function () {
-        $scope.viewState.infiniteScroll.currentItems += $scope.viewState.infiniteScroll.numToAdd;
-      };
-
-      ApplicationReader.listApplications().then(function (applications) {
-        $scope.applications = _.map(applications, 'name').sort();
-        initializeMasters();
-      });
-      const isExpression =
-        $scope.stage.pipelineParameters !== undefined &&
-        $scope.stage.pipelineParameters !== null &&
-        typeof $scope.stage.pipelineParameters === 'string'
-          ? $scope.stage.pipelineParameters.startsWith('${') && $scope.stage.pipelineParameters.endsWith('}')
-          : false;
-      function initializeMasters() {
-        if ($scope.stage.application && !$scope.stage.application.includes('${')) {
-          PipelineConfigService.getPipelinesForApplication($scope.stage.application).then(function (pipelines) {
-            $scope.pipelines = _.filter(pipelines, (pipeline) => pipeline.id !== $scope.pipeline.id);
-            const pipelineId = $scope.stage.pipeline;
-            const isFound = _.find(pipelines, (pipeline) => pipeline.id === pipelineId);
-            if (!isFound && pipelineId && !pipelineId.includes('${')) {
-              $scope.stage.pipeline = null;
-            }
-            $scope.viewState.pipelinesLoaded = true;
-            updatePipelineConfig();
-          });
-        }
-      }
-
-      function updatePipelineConfig() {
-        const pipeline = $scope.stage && $scope.stage.pipeline;
-        if (pipeline && pipeline.includes('${')) {
-          return;
-        }
-
-        if ($scope.stage && $scope.stage.application && pipeline) {
-          const config = _.find($scope.pipelines, (pipeline) => pipeline.id === $scope.stage.pipeline);
-          if (config && PipelineTemplateV2Service.isV2PipelineConfig(config)) {
-            PipelineTemplateReader.getPipelinePlan(config)
-              .then((plan) => applyPipelineConfigParameters(plan))
-              .catch(() => clearParams());
-          } else {
-            applyPipelineConfigParameters(config);
-          }
-        } else {
-          clearParams();
-        }
-      }
-
-      function applyPipelineConfigParameters(config) {
-        if (config && config.parameterConfig) {
-          if (!$scope.stage.pipelineParameters) {
-            $scope.stage.pipelineParameters = {};
-          }
-          $scope.pipelineParameters = config.parameterConfig;
-          $scope.pipelineParameters.forEach((parameterConfig) => {
-            if (
-              parameterConfig.default &&
-              parameterConfig.options &&
-              !parameterConfig.options.some((option) => option.value === parameterConfig.default)
-            ) {
-              parameterConfig.options.unshift({ value: parameterConfig.default });
-            }
-          });
-          $scope.userSuppliedParameters = $scope.stage.pipelineParameters;
-
-          if ($scope.pipelineParameters) {
-            const acceptedPipelineParams = $scope.pipelineParameters.map((param) => param.name);
-            $scope.invalidParameters = pickBy(
-              $scope.userSuppliedParameters,
-              (value, name) => !acceptedPipelineParams.includes(name),
-            );
-          }
-          $scope.hasSpeLDefinedParameterBlock = () => isExpression;
-          $scope.hasInvalidParameters = () => Object.keys(($scope.invalidParameters && !isExpression) || {}).length;
-          $scope.useDefaultParameters = {};
-          _.each($scope.pipelineParameters, function (property) {
-            if (!isExpression) {
-              if (!(property.name in $scope.stage.pipelineParameters) && property.default !== null) {
-                $scope.useDefaultParameters[property.name] = true;
-              }
-            }
-          });
-        } else {
-          clearParams();
-        }
-      }
-
-      function clearParams() {
-        $scope.pipelineParameters = {};
-        $scope.useDefaultParameters = {};
-        $scope.userSuppliedParameters = {};
-      }
-
-      $scope.useDefaultParameters = {};
-      $scope.userSuppliedParameters = {};
-
-      this.updateParam = function (parameter) {
-        if ($scope.useDefaultParameters[parameter] === true) {
-          delete $scope.userSuppliedParameters[parameter];
-          delete $scope.stage.pipelineParameters[parameter];
-        } else if ($scope.userSuppliedParameters[parameter]) {
-          $scope.stage.pipelineParameters[parameter] = $scope.userSuppliedParameters[parameter] || '';
-        }
-      };
-
-      this.removeInvalidParameters = function () {
-        Object.keys($scope.invalidParameters).forEach((param) => {
-          if ($scope.stage.pipelineParameters[param] !== 'undefined') {
-            delete $scope.stage.pipelineParameters[param];
-          }
-        });
-        $scope.invalidParameters = [];
-      };
 
-      $scope.$watch('stage.application', initializeMasters);
-      $scope.$watch('stage.pipeline', updatePipelineConfig);
-    },
-  ]);
+export const pipelineStage = {
+  label: 'Pipeline',
+  description: 'Runs a pipeline',
+  key: 'pipeline',
+  restartable: true,
+  component: PipelineStageConfig,
+  producesArtifacts: true,
+  executionDetailsSections: [PipelineStageExecutionDetails, PipelineParametersExecutionDetails, ExecutionDetailsTasks],
+  supportsCustomTimeout: true,
+  validators: [{ type: 'requiredField', fieldName: 'pipeline' }],
+};
+
+Registry.pipeline.registerStage(pipelineStage);