Commit 6df0336b authored by Jaden DIEFENBAUGH's avatar Jaden DIEFENBAUGH
Browse files

fix lint errs & add exp editor

parent 294d3a17
......@@ -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;
};
......
......@@ -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>
......
// @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);
......@@ -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>;
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment