109 lines
4.6 KiB
JavaScript
109 lines
4.6 KiB
JavaScript
import React, { Component } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { connect } from 'react-redux';
|
|
import { actions } from '../../store/actions';
|
|
|
|
import { Form, FormGroup, FormSelect, FormSelectOption, Tile, Title } from '@patternfly/react-core';
|
|
|
|
import './WizardStepImageOutput.scss';
|
|
|
|
class WizardStepImageOutput extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.setDistro = this.setDistro.bind(this);
|
|
this.toggleUploadDestination = this.toggleUploadDestination.bind(this);
|
|
}
|
|
|
|
setDistro(distro) {
|
|
this.props.setRelease({ arch: 'x86_64', distro });
|
|
}
|
|
|
|
toggleUploadDestination(provider) {
|
|
this.props.setUploadDestinations({
|
|
...this.props.uploadDestinations,
|
|
[provider]: !this.props.uploadDestinations[provider]
|
|
});
|
|
}
|
|
|
|
render() {
|
|
const releaseOptions = [
|
|
{ value: 'rhel-84', label: 'Red Hat Enterprise Linux (RHEL) 8' },
|
|
{ value: 'centos-8', label: 'CentOS Stream 8' },
|
|
];
|
|
|
|
return (
|
|
<>
|
|
<Form>
|
|
<Title headingLevel="h2" size="xl">Image output</Title>
|
|
<FormGroup isRequired label="Release" fieldId="release-select">
|
|
<FormSelect value={ this.props.release.distro } onChange={ value => this.setDistro(value) } isRequired
|
|
aria-label="Select release input" id="release-select" data-testid="release-select">
|
|
{ releaseOptions.map(option => <FormSelectOption key={ option.value } value={ option.value } label={ option.label } />) }
|
|
</FormSelect>
|
|
</FormGroup>
|
|
<FormGroup isRequired label="Select target environment" data-testid="target-select">
|
|
<div className="tiles">
|
|
<Tile
|
|
className="tile pf-u-mr-sm"
|
|
data-testid="upload-aws"
|
|
title="Amazon Web Services"
|
|
icon={ <img
|
|
className='provider-icon'
|
|
src={ '/apps/frontend-assets/partners-icons/aws.svg' } /> }
|
|
onClick={ () => this.toggleUploadDestination('aws') }
|
|
isSelected={ this.props.uploadDestinations.aws }
|
|
isStacked
|
|
isDisplayLarge />
|
|
<Tile
|
|
className="tile pf-u-mr-sm"
|
|
data-testid="upload-google"
|
|
title="Google Cloud Platform"
|
|
icon={ <img
|
|
className='provider-icon'
|
|
src={ '/apps/frontend-assets/partners-icons/google-cloud-short.svg' } /> }
|
|
onClick={ () => this.toggleUploadDestination('google') }
|
|
isSelected={ this.props.uploadDestinations.google }
|
|
isStacked
|
|
isDisplayLarge />
|
|
<Tile
|
|
className="tile"
|
|
data-testid="upload-azure"
|
|
title="Microsoft Azure"
|
|
icon={ <img
|
|
className='provider-icon'
|
|
src={ '/apps/frontend-assets/partners-icons/microsoft-azure-short.svg' } /> }
|
|
onClick={ () => this.toggleUploadDestination('azure') }
|
|
isSelected={ this.props.uploadDestinations.azure }
|
|
isStacked
|
|
isDisplayLarge />
|
|
</div>
|
|
</FormGroup>
|
|
</Form>
|
|
</>
|
|
);
|
|
}
|
|
};
|
|
|
|
function mapStateToProps(state) {
|
|
return {
|
|
release: state.pendingCompose.release,
|
|
uploadDestinations: state.pendingCompose.uploadDestinations,
|
|
};
|
|
}
|
|
|
|
function mapDispatchToProps(dispatch) {
|
|
return {
|
|
setRelease: i => dispatch(actions.setRelease(i)),
|
|
setUploadDestinations: d => dispatch(actions.setUploadDestinations(d)),
|
|
};
|
|
}
|
|
|
|
WizardStepImageOutput.propTypes = {
|
|
setRelease: PropTypes.func,
|
|
setUploadDestinations: PropTypes.func,
|
|
release: PropTypes.object,
|
|
uploadDestinations: PropTypes.object,
|
|
};
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(WizardStepImageOutput);
|