import { Form } from 'formik' ; import { pickBy } from 'lodash' ; import React from 'react' ; import { Modal } from 'react-bootstrap' ; import { FormikFormField , HelpField , ModalClose , noop , ReactModal , ReactSelectInput , SelectInput , SpinFormik , SubmitButton , TextInput , } from '@spinnaker/core' ; import type { IRedirectActionConfig } from '../../../domain' ; import './ConfigureConfigModal.css' ; export interface IConfigureRedirectConfigModalProps { config : IRedirectActionConfig ; closeModal ? ( result ? ) : void ; dismissModal ? ( rejection ? ) : void ; } export class ConfigureRedirectConfigModal extends React . Component < IConfigureRedirectConfigModalProps > { private initialValues : IRedirectActionConfig ; public static defaultProps : Partial < IConfigureRedirectConfigModalProps > = { closeModal : noop , dismissModal : noop , } ; public static show ( props ) { return ReactModal . show ( ConfigureRedirectConfigModal , props ) ; } constructor ( props ) { super ( props ) ; const config = props . config || ( { } as IRedirectActionConfig ) ; this . initialValues = { host : config . host || '' , path : config . path || '' , port : config . port || '' , protocol : config . protocol || undefined , query : config . query || '' , statusCode : config . statusCode || 'HTTP_301' , } ; } private close = ( reason ? ) : void => { this . props . dismissModal ( reason ) ; } ; private submit = ( data ) : void => { const filteredData = pickBy ( data , ( value ) => value && value !== '' ) ; this . props . closeModal ( filteredData ) ; } ; public render ( ) { const submitLabel = 'Save Config' ; return ( < div className = "configure-config-modal" > < SpinFormik < IRedirectActionConfig > initialValues = { this . initialValues } onSubmit = { this . submit } render = { ( { isValid } ) => ( < Form className = "form-horizontal" > < ModalClose dismiss = { this . close } /> < Modal . Header > < Modal . Title > Configure Redirect < HelpField id = "aws.loadBalancer.redirect" / > < /Modal.Title> < /Modal.Header> < Modal . Body > < FormikFormField name = "host" label = "Host" required = { false } input = { ( props ) => < TextInput { ... props } / > } help = { < HelpField id = "aws.loadBalancer.redirect.host" / > } /> < FormikFormField name = "path" label = "Path" required = { false } input = { ( props ) => < TextInput { ... props } / > } help = { < HelpField id = "aws.loadBalancer.redirect.path" / > } /> < FormikFormField name = "port" label = "Port" required = { false } input = { ( props ) => < TextInput { ... props } / > } help = { < HelpField id = "aws.loadBalancer.redirect.port" / > } /> < FormikFormField name = "protocol" label = "Protocol" required = { false } input = { ( props ) => ( < ReactSelectInput { ... props } stringOptions = { [ 'HTTP' , 'HTTPS' , '#{protocol}' ] } placeholder = "Select Protocol" clearable = { false } style = { { width : '130px' } } />)} help={<HelpField id="aws.loadBalancer.redirect.protocol"/ > } /> < FormikFormField name = "query" label = "Query" required = { false } input = { ( props ) => < TextInput { ... props } / > } help = { < HelpField id = "aws.loadBalancer.redirect.query" / > } /> < FormikFormField name = "statusCode" label = "Status Code" required = { true } input = { ( props ) => < SelectInput { ... props } options = { [ 'HTTP_301' , 'HTTP_302' ] } / > } help = { < HelpField id = "aws.loadBalancer.redirect.statusCode" / > } /> < /Modal.Body> < Modal . Footer > < button className = "btn btn-default" onClick = { this . close } type = "button" > Cancel < /button> < SubmitButton isDisabled = { ! isValid } submitting = { false } isFormSubmit = { true } label = { submitLabel } / > < /Modal.Footer> < /Form>)}/ > < /div>); } }