2018-02-13 22:03:57 +02:00
|
|
|
import React, { Fragment } from 'react';
|
|
|
|
import { compose, graphql } from 'react-apollo';
|
|
|
|
import { set } from 'react-redux-values';
|
|
|
|
import ReduxForm from 'declarative-redux-form';
|
2018-03-01 03:15:16 +02:00
|
|
|
import { Row, Col } from 'joyent-react-styled-flexboxgrid';
|
2018-02-13 22:03:57 +02:00
|
|
|
import { Margin } from 'styled-components-spacing';
|
|
|
|
import { change } from 'redux-form';
|
|
|
|
import { connect } from 'react-redux';
|
|
|
|
import intercept from 'apr-intercept';
|
|
|
|
import get from 'lodash.get';
|
|
|
|
|
|
|
|
import { NameIcon, H3, Button, H4, P } from 'joyent-ui-toolkit';
|
|
|
|
|
|
|
|
import Title from '@components/create-image/title';
|
|
|
|
import Details from '@components/create-image/details';
|
|
|
|
import Description from '@components/description';
|
|
|
|
import GetRandomName from '@graphql/get-random-name.gql';
|
2018-03-01 03:15:16 +02:00
|
|
|
import createClient from '@state/apollo-client';
|
|
|
|
import { instanceName as validateName } from '@state/validators';
|
2018-02-13 22:03:57 +02:00
|
|
|
import { Forms } from '@root/constants';
|
|
|
|
|
|
|
|
const NameContainer = ({
|
|
|
|
expanded,
|
|
|
|
proceeded,
|
|
|
|
name,
|
|
|
|
version,
|
|
|
|
description,
|
|
|
|
placeholderName,
|
|
|
|
randomizing,
|
2018-03-01 03:15:16 +02:00
|
|
|
handleAsyncValidate,
|
2018-02-13 22:03:57 +02:00
|
|
|
shouldAsyncValidate,
|
|
|
|
handleNext,
|
|
|
|
handleRandomize,
|
|
|
|
handleEdit,
|
|
|
|
step
|
|
|
|
}) => (
|
|
|
|
<Fragment>
|
|
|
|
<Title
|
|
|
|
id={step}
|
|
|
|
onClick={!expanded && !name && handleEdit}
|
|
|
|
collapsed={!expanded && !proceeded}
|
|
|
|
icon={<NameIcon />}
|
|
|
|
>
|
|
|
|
Image name and details
|
|
|
|
</Title>
|
|
|
|
{expanded ? (
|
|
|
|
<Description>
|
|
|
|
Here you can name your custom image, version it, and give it a
|
|
|
|
description so that you can identify it elsewhere in the Triton
|
|
|
|
ecosystem.
|
|
|
|
</Description>
|
|
|
|
) : null}
|
|
|
|
<ReduxForm
|
|
|
|
form={Forms.FORM_DETAILS}
|
|
|
|
destroyOnUnmount={false}
|
|
|
|
forceUnregisterOnUnmount={true}
|
2018-03-01 03:15:16 +02:00
|
|
|
asyncValidate={handleAsyncValidate}
|
2018-02-13 22:03:57 +02:00
|
|
|
shouldAsyncValidate={shouldAsyncValidate}
|
2018-03-01 03:15:16 +02:00
|
|
|
onSubmit={handleNext}
|
2018-02-13 22:03:57 +02:00
|
|
|
>
|
|
|
|
{props =>
|
|
|
|
expanded ? (
|
|
|
|
<Details
|
|
|
|
{...props}
|
|
|
|
placeholderName={placeholderName}
|
|
|
|
randomizing={randomizing}
|
|
|
|
onRandomize={handleRandomize}
|
|
|
|
/>
|
|
|
|
) : name ? (
|
2018-04-06 17:53:44 +03:00
|
|
|
<Margin top="3">
|
2018-02-13 22:03:57 +02:00
|
|
|
<H3 bold noMargin>
|
|
|
|
{name}
|
|
|
|
</H3>
|
|
|
|
{version ? (
|
2018-04-06 17:53:44 +03:00
|
|
|
<Margin top="2">
|
2018-02-13 22:03:57 +02:00
|
|
|
<H4 bold noMargin>
|
|
|
|
{version}
|
|
|
|
</H4>
|
|
|
|
</Margin>
|
|
|
|
) : null}
|
|
|
|
{description ? (
|
|
|
|
<Row>
|
2018-05-23 19:29:04 +03:00
|
|
|
<Col xs="12" sm="8">
|
2018-04-06 17:53:44 +03:00
|
|
|
<Margin top="1">
|
2018-02-13 22:03:57 +02:00
|
|
|
<P>{description}</P>
|
|
|
|
</Margin>
|
|
|
|
</Col>
|
|
|
|
</Row>
|
|
|
|
) : null}
|
|
|
|
</Margin>
|
|
|
|
) : null
|
|
|
|
}
|
|
|
|
</ReduxForm>
|
|
|
|
{expanded ? (
|
2018-04-06 17:53:44 +03:00
|
|
|
<Margin top="4" bottom="7">
|
2018-02-13 22:03:57 +02:00
|
|
|
<Button type="button" disabled={!name} onClick={handleNext}>
|
|
|
|
Next
|
|
|
|
</Button>
|
|
|
|
</Margin>
|
|
|
|
) : proceeded ? (
|
2018-04-06 17:53:44 +03:00
|
|
|
<Margin top="4" bottom="7">
|
2018-02-13 22:03:57 +02:00
|
|
|
<Button type="button" onClick={handleEdit} secondary>
|
|
|
|
Edit
|
|
|
|
</Button>
|
|
|
|
</Margin>
|
|
|
|
) : null}
|
|
|
|
</Fragment>
|
|
|
|
);
|
|
|
|
|
|
|
|
export default compose(
|
|
|
|
graphql(GetRandomName, {
|
2018-02-20 02:35:31 +02:00
|
|
|
options: () => ({
|
|
|
|
fetchPolicy: 'network-only',
|
|
|
|
ssr: false
|
|
|
|
}),
|
2018-02-13 22:03:57 +02:00
|
|
|
props: ({ data }) => ({
|
|
|
|
placeholderName: data.rndName || ''
|
|
|
|
})
|
|
|
|
}),
|
|
|
|
connect(
|
|
|
|
({ form, values }, ownProps) => {
|
|
|
|
const name = get(form, `${Forms.FORM_DETAILS}.values.name`, '');
|
|
|
|
const version = get(form, `${Forms.FORM_DETAILS}.values.version`, '');
|
2018-03-01 03:15:16 +02:00
|
|
|
|
2018-02-13 22:03:57 +02:00
|
|
|
const description = get(
|
|
|
|
form,
|
|
|
|
`${Forms.FORM_DETAILS}.values.description`,
|
|
|
|
''
|
|
|
|
);
|
|
|
|
|
|
|
|
const proceeded = get(values, `${Forms.FORM_DETAILS}-proceeded`, false);
|
|
|
|
const randomizing = get(values, 'create-image-name-randomizing', false);
|
|
|
|
|
|
|
|
return {
|
|
|
|
...ownProps,
|
|
|
|
proceeded,
|
|
|
|
randomizing,
|
|
|
|
name,
|
|
|
|
version,
|
|
|
|
description
|
|
|
|
};
|
|
|
|
},
|
|
|
|
(dispatch, { history, match }) => ({
|
|
|
|
handleNext: () => {
|
|
|
|
dispatch(set({ name: `${Forms.FORM_DETAILS}-proceeded`, value: true }));
|
2018-03-06 03:14:33 +02:00
|
|
|
return history.push(`/images/~create/${match.params.instance}/tag`);
|
2018-02-13 22:03:57 +02:00
|
|
|
},
|
2018-03-01 03:15:16 +02:00
|
|
|
handleEdit: () => {
|
|
|
|
dispatch(set({ name: `${Forms.FORM_DETAILS}-proceeded`, value: true }));
|
2018-03-06 03:14:33 +02:00
|
|
|
return history.push(`/images/~create/${match.params.instance}/name`);
|
2018-03-01 03:15:16 +02:00
|
|
|
},
|
|
|
|
shouldAsyncValidate: ({ trigger }) => {
|
|
|
|
return trigger === 'change';
|
|
|
|
},
|
|
|
|
handleAsyncValidate: validateName,
|
2018-02-13 22:03:57 +02:00
|
|
|
handleRandomize: async () => {
|
|
|
|
dispatch(set({ name: 'create-image-name-randomizing', value: true }));
|
|
|
|
|
|
|
|
const [err, res] = await intercept(
|
2018-03-01 03:15:16 +02:00
|
|
|
createClient().query({
|
2018-02-13 22:03:57 +02:00
|
|
|
fetchPolicy: 'network-only',
|
|
|
|
query: GetRandomName
|
|
|
|
})
|
|
|
|
);
|
|
|
|
|
|
|
|
dispatch(set({ name: 'create-image-name-randomizing', value: false }));
|
|
|
|
|
|
|
|
if (err) {
|
2018-04-06 17:53:44 +03:00
|
|
|
// eslint-disable-next-line no-console
|
2018-02-13 22:03:57 +02:00
|
|
|
console.error(err);
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
const { data } = res;
|
|
|
|
const { rndName } = data;
|
|
|
|
|
|
|
|
return dispatch(change(Forms.FORM_DETAILS, 'name', rndName));
|
|
|
|
}
|
|
|
|
})
|
|
|
|
)
|
|
|
|
)(NameContainer);
|