silverstripe / deploynaut

js/DeployPlan.jsx

/* global Q */

var React = require("react");

var Events = require('./events.js');
var Helpers = require('./helpers.js');
var SummaryTable = require('./SummaryTable.jsx');

var DeployPlan = React.createClass({

	getInitialState: function() {
		return {
			loading_changes: false,
			deploy_disabled: false,
			deployHover: false
		};
	},
	componentDidMount: function() {
		var self = this;
		// register subscribers
		this.loadingSub = Events.subscribe('change_loading', function () {
			self.setState({
				loading_changes: true
			});
		});
		this.loadingDoneSub = Events.subscribe('change_loading/done', function () {
			self.setState({
				loading_changes: false
			});
		});
	},
	loadingSub: null,
	loadingDoneSub: null,
	deployHandler: function(event) {
		event.preventDefault();
		this.setState({
			deploy_disabled: true
		});

		Q($.ajax({
			type: "POST",
			dataType: 'json',
			url: this.props.context.envUrl + '/start-deploy',
			data: {
				// Pass the strategy object the user has just signed off back to the backend.
				strategy: this.props.summary,
				DispatcherSecurityID: this.props.summary.SecurityID
			}
		})).then(function(data) {
			window.location = data.url;
		}, function(data) {
			console.error(data); // eslint-disable-line no-console
		});
	},
	mouseEnterHandler: function() {
		this.setState({deployHover: true});
	},
	mouseLeaveHandler: function() {
		this.setState({deployHover: false});
	},
	canDeploy: function() {
		return (this.props.summary.validationCode === "success" || this.props.summary.validationCode === "warning");
	},
	actionTitle: function() {
		var actionTitle = this.props.summary.actionTitle;
		if (typeof actionTitle === 'undefined' || actionTitle === '') {
			return 'Make a selection';
		}
		return this.props.summary.actionTitle;
	},
	render: function() {
		var messages = this.props.summary.messages;
		var deployAction;
		if (this.canDeploy()) {
			deployAction = (
				<div
					className="section"
					onMouseEnter={this.mouseEnterHandler}
					onMouseLeave={this.mouseLeaveHandler}
				>
						<button
							value="Confirm Deployment"
							className="deploy pull-left"
							disabled={this.state.deploy_disabled}
							onClick={this.deployHandler}
						>
							{this.actionTitle()}
						</button>
						<QuickSummary
							activated={this.state.deployHover}
							context={this.props.context}
							summary={this.props.summary}
						/>
				</div>
			);
		}

		var headerClasses = Helpers.classNames({
			header: true,
			inactive: !this.canDeploy(),
			loading: this.state.loading_changes
		});

		return (
			<div>
				<div className="section">
					<div className={headerClasses}>
						<span className="status-icon"></span>
						<span className="numberCircle">2</span>
						&nbsp;Review changes
					</div>
					<MessageList messages={messages} />
					<SummaryTable changes={this.props.summary.changes} />
				</div>
				{deployAction}
			</div>
		);
	}
});

function QuickSummary(props) {

	var type = (props.summary.actionCode === 'fast' ? 'code-only' : 'full');
	var extraDefinitions = [];
	if (props.summary.estimatedTime && props.summary.estimatedTime > 0) {
		extraDefinitions.push(<dt key="duration_term">Duration:</dt>);
		extraDefinitions.push(
			<dd key="duration_definition">{props.summary.estimatedTime} min approx.</dd>);
	}

	var dlClasses = Helpers.classNames({
		activated: props.activated,
		'quick-summary': true
	});

	var moreInfo = null;
	if (typeof props.context.deployHelp !== 'undefined' && props.context.deployHelp) {
		moreInfo = (
			<a className="small" href={props.context.deployHelp}>more info</a>
		);
	}

	var env;
	if (props.context.siteUrl) {
		env = (
			<a href={props.context.siteUrl}>{props.context.envName}</a>
		);
	} else {
		env = <span>{props.context.envName}</span>;
	}

	return (
		<dl className={dlClasses}>
			<dt>Environment:</dt>
			<dd>{env}</dd>
			<dt>Deploy type:</dt>
			<dd>{type} {moreInfo}</dd>
			{extraDefinitions}
		</dl>
	);
}

var MessageList = React.createClass({
	render: function() {
		if (this.props.messages.length < 1) {
			return null;
		}
		if (typeof this.props.messages === 'undefined') {
			return null;
		}
		var idx = 0;
		var messages = this.props.messages.map(function(message) {
			idx++;

As per coding-style, please do not use ++, but use += 1 instead.

			return <Message key={idx} message={message} />;
		});
		return (
			<div>
				{messages}
			</div>
		);
	}
});

function Message(props) {
	var classMap = {
		error: 'alert alert-danger',
		warning: 'alert alert-warning',
		success: 'alert alert-info'
	};
	var classname = classMap[props.message.code];
	return (
		<div
			className={classname}
			role="alert"
			dangerouslySetInnerHTML={{__html: props.message.text}}

Dangerous property 'dangerouslySetInnerHTML' found

		/>
	);
}

module.exports = DeployPlan;