Made the run editor more beautiful with tags
@@ -3,8 +3,7 @@ import {Button, Form} from 'semantic-ui-react';
import Markdown from './Markdown';
import Breadcrumbs from './Breadcrumbs';
import _ from 'lodash';
-import {Label, Icon} from 'semantic-ui-react';
-
+import {Label, Icon, Grid} from 'semantic-ui-react';
// TODO: we might want to merge with ModelEditor
class RunEditor extends React.Component {
constructor(props) {
@@ -37,11 +36,18 @@ class RunEditor extends React.Component {
render() {
return (
<Form className="ui form">
+ <Grid>
+ <Grid.Row>
+ <Grid.Column>
<Breadcrumbs
entity={this.props.model.entityName}
model={this.props.model.name}
run={this.props.bucket.name}
/>
+ </Grid.Column>
+ </Grid.Row>
+ <Grid.Row>
+ <Grid.Column>
<Form.Field>
<label>Description</label>
{this.state.preview ? (
@@ -58,15 +64,26 @@ class RunEditor extends React.Component {
/>
)}
</Form.Field>
- <Form.Group label="Tags">
+ </Grid.Column>
+ </Grid.Row>
+ <Grid.Row>
+ <Grid.Column>
+ <Form.Group>
+ <Form.Field>
+ <label>Tags</label>
+ </Form.Field>
<Form.Input
- width={3}
+ width={6}
value={this.state.newTag}
onChange={(e, {value}) => {
this.setState({newTag: value});
}}
/>
+
<Button
+ labeled
+ icon="plus"
+ content="Add"
onClick={e => {
e.preventDefault();
if (this.state.newTag.length) {
@@ -78,10 +95,15 @@ class RunEditor extends React.Component {
newTag: '',
});
}
- }}>
- Add
- </Button>
+ }}
+ />
</Form.Group>
+ </Grid.Column>
+ </Grid.Row>
+
+ <Grid.Row>
+ {' '}
+ <Grid.Column>
<Form.Group>
{this.state.tags.map(tag => (
<Label key={tag}>
@@ -99,8 +121,13 @@ class RunEditor extends React.Component {
</Label>
))}
</Form.Group>
+ </Grid.Column>
+ </Grid.Row>
+ <Grid.Row>
+ <Grid.Column>
<Button.Group>
- <Button onClick={() => this.setState({preview: !this.state.preview})}>
+ <Button
+ onClick={() => this.setState({preview: !this.state.preview})}>
{this.state.preview ? 'Edit' : 'Preview'}
</Button>
<Button.Or />
@@ -118,13 +145,18 @@ class RunEditor extends React.Component {
id: this.props.bucket.id,
})
.then(res => {
- window.location.href = `/${this.props.model.entityName}/${
- this.props.model.name
- }/runs/${res.data.upsertBucket.bucket.name}`;
+ window.location.href = `/${
+ this.props.model.entityName
+ }/${this.props.model.name}/runs/${
+ res.data.upsertBucket.bucket.name
+ }`;
});
}}
/>
</Button.Group>
+ </Grid.Column>
+ </Grid.Row>
+ </Grid>
</Form>
);
}
