2018-01-08 21:08:01 +02:00
|
|
|
import React, { Fragment } from 'react';
|
|
|
|
import { Field } from 'redux-form';
|
|
|
|
import { Margin } from 'styled-components-spacing';
|
2018-01-18 13:56:01 +02:00
|
|
|
import Flex, { FlexItem } from 'styled-flex-component';
|
|
|
|
import remcalc from 'remcalc';
|
2018-01-08 21:08:01 +02:00
|
|
|
|
|
|
|
import {
|
|
|
|
H3,
|
|
|
|
FormGroup,
|
|
|
|
FormLabel,
|
|
|
|
Input,
|
|
|
|
FormMeta,
|
2018-01-18 13:56:01 +02:00
|
|
|
Button,
|
|
|
|
RandomizeIcon
|
2018-01-08 21:08:01 +02:00
|
|
|
} from 'joyent-ui-toolkit';
|
|
|
|
|
2018-01-18 13:56:01 +02:00
|
|
|
import Description from '@components/create-instance/description';
|
|
|
|
|
|
|
|
export default ({
|
|
|
|
handleSubmit,
|
|
|
|
pristine,
|
|
|
|
asyncValidating,
|
|
|
|
expanded,
|
|
|
|
name,
|
|
|
|
placeholderName,
|
|
|
|
randomizing,
|
|
|
|
onCancel,
|
|
|
|
onRandomize
|
|
|
|
}) => (
|
2018-01-08 21:08:01 +02:00
|
|
|
<form onSubmit={handleSubmit}>
|
|
|
|
{expanded ? (
|
|
|
|
<Fragment>
|
2018-01-15 19:23:32 +02:00
|
|
|
<Description>
|
|
|
|
Your instance name will be used to identify this specific instance.
|
|
|
|
</Description>
|
2018-01-18 13:56:01 +02:00
|
|
|
<Flex>
|
|
|
|
<FlexItem>
|
|
|
|
<FormGroup name="name" fluid field={Field}>
|
|
|
|
<FormLabel>Instance Name</FormLabel>
|
|
|
|
<Input placeholder={placeholderName} onBlur={null} />
|
|
|
|
<FormMeta marginless />
|
|
|
|
</FormGroup>
|
|
|
|
</FlexItem>
|
|
|
|
<FlexItem>
|
|
|
|
<FormLabel>⁣</FormLabel>
|
|
|
|
<Margin left={1}>
|
|
|
|
<Button
|
|
|
|
type="button"
|
|
|
|
marginTop={remcalc(8)}
|
|
|
|
onClick={onRandomize}
|
|
|
|
loading={randomizing}
|
|
|
|
marginless
|
|
|
|
secondary
|
|
|
|
icon
|
|
|
|
>
|
|
|
|
<RandomizeIcon />
|
|
|
|
<span>Randomize</span>
|
|
|
|
</Button>
|
|
|
|
</Margin>
|
|
|
|
</FlexItem>
|
|
|
|
</Flex>
|
2018-01-15 19:34:15 +02:00
|
|
|
<Margin top={2} bottom={4}>
|
2018-01-18 13:56:01 +02:00
|
|
|
<Button type="submit" disabled={pristine} loading={asyncValidating}>
|
2018-01-15 19:34:15 +02:00
|
|
|
Next
|
|
|
|
</Button>
|
|
|
|
</Margin>
|
2018-01-08 21:08:01 +02:00
|
|
|
</Fragment>
|
|
|
|
) : (
|
|
|
|
<Fragment>
|
2018-01-11 22:26:42 +02:00
|
|
|
{name ? (
|
|
|
|
<Fragment>
|
|
|
|
<Margin bottom={2} top={3}>
|
2018-01-16 13:54:22 +02:00
|
|
|
<H3 bold>{name}</H3>
|
2018-01-11 22:26:42 +02:00
|
|
|
</Margin>
|
|
|
|
<Button type="button" secondary onClick={onCancel}>
|
|
|
|
Edit
|
|
|
|
</Button>
|
|
|
|
</Fragment>
|
|
|
|
) : null}
|
2018-01-08 21:08:01 +02:00
|
|
|
</Fragment>
|
|
|
|
)}
|
|
|
|
</form>
|
|
|
|
);
|