fix lint errs & add exp editor

src/components/DatabaseEditor.jsx

@@ -516,7 +516,7 @@ export class DatabaseEditor extends React.Component<Props, State> {
 const mapStateToProps: MapStateToProps<*,*,*> = (state, ownProps) => {
 	const obj = {
 		databases: Selectors.databaseGet(state),
-		dataformats: Selectors.dataformatGet(state).map(d => d.name),
+		dataformats: Selectors.dataformatGet(state),
 	};
 	return obj;
 };

src/components/EntityDetail.jsx

@@ -31,6 +31,7 @@ import DataformatEditorContainer from './DataformatEditor.jsx';
 import AlgorithmEditorContainer from './AlgorithmEditor.jsx';
 import LibraryEditorContainer from './LibraryEditor.jsx';
 import DatabaseEditorContainer from './DatabaseEditor.jsx';
+import ExperimentEditorContainer from './ExperimentEditor.jsx';
 
 type Props = {
 	match: any,
@@ -139,6 +140,13 @@ export class EntityDetail extends React.Component<Props, State> {
 											saveFunc={this.saveChanges}
 										/>
 								}
+								{
+									this.props.match.params.entity === 'experiment' &&
+										<ExperimentEditorContainer
+											data={this.props.getEntityObject()}
+											saveFunc={this.saveChanges}
+										/>
+								}
 							</TabPane>
 							<TabPane tabId='1'>
 								<Row>

src/components/ExperimentEditor.jsx

+// @flow
+import * as React from 'react';
+import {
+	Container,
+	Row,
+	Col,
+	Button,
+	Form,
+	FormGroup,
+	Label,
+	Input,
+	InputGroup,
+	FormText,
+	Collapse,
+	Card,
+	CardHeader,
+	CardBody,
+	TabContent, TabPane, Nav, NavItem, NavLink, CardTitle, CardText,
+	FormFeedback,
+	Alert,
+	InputGroupAddon,
+} from 'reactstrap';
+
+import { connect } from 'react-redux';
+import type { MapStateToProps, MapDispatchToProps } from 'react-redux';
+
+import { nameValidator } from '@helpers/beat';
+import type { BeatObject } from '@helpers/beat';
+import { changeObjFieldName } from '@helpers';
+
+import * as Selectors from '@store/selectors.js';
+
+import ValidSchemaBadge from './ValidSchemaBadge.jsx';
+import CacheInput from './CacheInput.jsx';
+import DeleteInputBtn from './DeleteInputBtn.jsx';
+import TypedField from './TypedField.jsx';
+
+type Props = {
+	data: BeatObject,
+	experiments: BeatObject[],
+	saveFunc: (BeatObject) => any,
+};
+
+type State = {
+	cache: any,
+};
+
+const getValidObj = (data = {}) => {
+	const getObj = {
+		name: '',
+		contents: {},
+		...JSON.parse(JSON.stringify(data))
+	};
+
+	const obj = {
+		...getObj,
+		contents: {
+			description: '',
+			datasets: {},
+			blocks: {},
+			analyzers: {},
+			globals: {
+				queue: 'queue',
+				environment: {
+					version: 'x.x.x',
+					name: 'Python 2'
+				}
+			},
+			...getObj.contents,
+		},
+	};
+
+	return obj;
+};
+
+export class ExperimentEditor extends React.Component<Props, State> {
+	constructor(props: Props) {
+		super(props);
+	}
+
+	state = {
+		cache: getValidObj(this.props.data),
+	}
+
+	componentWillReceiveProps (nextProps: Props) {
+		this.setState({
+			cache: getValidObj(nextProps.data),
+		});
+	}
+
+	setContents = (newContents: any) => {
+		this.setState({
+			cache: {
+				...this.state.cache,
+				contents: {
+					'description': this.state.cache.contents['description'],
+					...newContents,
+				}
+			}
+		});
+	}
+
+	updateExperiments = (experiments: {}) => {
+		this.setContents({...this.state.cache.contents, uses: experiments});
+	}
+
+	validatorFunc = nameValidator('experiment', this.props.experiments.map(l => l.name));
+
+	nameIsValid = (str: string = this.state.cache.name): true | React.Node => {
+		const err =
+			<span>
+				Please provide a <strong>unique</strong> experiment name
+			</span>
+		;
+		return str === this.props.data.name || this.validatorFunc(str) || err;
+	}
+
+	render = () => (
+		<div>
+			<div className='d-flex'>
+				<Button
+					className='mx-auto'
+					outline
+					color='secondary'
+					onClick={() => this.props.saveFunc(this.state.cache)}
+				>
+					Save Changes (Changes are <ValidSchemaBadge entity='experiment' obj={this.state.cache} />)
+				</Button>
+			</div>
+			<Form onSubmit={(e) => e.preventDefault()}>
+				<FormGroup tag='fieldset'>
+					<FormGroup>
+						<Label for='expName'>Name</Label>
+						<CacheInput
+							type='text'
+							name='name'
+							id='expName'
+							placeholder='New experiment name...'
+							value={this.state.cache.name}
+							onChange={e => this.setState({ cache: {...this.state.cache, 'name': e.target.value}})}
+							validateFunc={str => this.nameIsValid(str)}
+						/>
+					</FormGroup>
+					<FormGroup>
+						<Label for='description'>Short Description</Label>
+						<Input
+							type='text'
+							name='description'
+							placeholder='Experiment description...'
+							value={this.state.cache.contents['description']}
+							onChange={e => this.setContents({ ...this.state.cache.contents, 'description': e.target.value})}
+						/>
+					</FormGroup>
+				</FormGroup>
+			</Form>
+		</div>
+	);
+}
+
+const mapStateToProps: MapStateToProps<*,*,*> = (state, ownProps) => {
+	const obj = {
+		experiments: Selectors.experimentGet(state),
+	};
+	return obj;
+};
+
+export default connect(mapStateToProps)(ExperimentEditor);

src/components/TypedField.jsx

@@ -21,6 +21,7 @@ type Props = {
 	nameValidateFunc?: (string) => boolean | React.Node,
 	deleteFunc: (any) => any,
 	children?: React.Node,
+	placeholder?: string,
 };
 
 const DupErr = ({ }) => <span> Each field must have a unique name </span>;