CloudFormationChangeSetInfo.tsx

import React, { useState } from 'react';

import { module } from 'angular';
import { react2angular } from 'react2angular';

import { StageConfigField } from '@spinnaker/core';
import { IStage } from '@spinnaker/core';

export interface ICloudFromationChangeSetInfoProps {
  stage: IStage[];
}

export const CloudFormationChangeSetInfo = ( props: ICloudFormationChangeSetInfoProps ) => {

  const [changeSetName, setChangeSetName] = useState('default');
  const { stage } = props;

  const onChange = (value: string) => {
    setChangeSetName(value);
    stage.changeSetName = value;
    console.log(value);
    console.log(props);
  };

    return  (
        <div>
            <hr />
            <h4>ChangeSet Configuration</h4>
            <StageConfigField label="ChangeSet Name">
                <input
                    className="form-control input-sm"
                    type="text"
                    value={ changeSetName }
                    onChange={ e => onChange(e.target.value)} 
                />
            </StageConfigField>
        </div>
    )
};

export const CLOUD_FORMATION_CHANGE_SET_INFO = 'spinnaker.amazon.cloudformation.changetset.info.component';

module(CLOUD_FORMATION_CHANGE_SET_INFO, []).component(
  'cloudFormationChangeSetInfo',
  react2angular(CloudFormationChangeSetInfo, ['stage']),
);