import React from 'react';
import { Field } from 'redux-form';
import styled from 'styled-components';
import SimpleTable from 'react-simple-table';
import { Row, Col } from 'react-styled-flexboxgrid';
import { Dots2 } from 'styled-text-spinners';
import Bundle from 'react-bundle';
import remcalc from 'remcalc';
import forceArray from 'force-array';
import {
FormGroup,
FormMeta,
Input,
Button,
Card,
Progressbar,
ProgressbarItem,
ProgressbarButton,
H3,
typography
} from 'joyent-ui-toolkit';
const Dl = styled.dl`
margin: ${remcalc(13)} ${remcalc(19)};
`;
const ServiceName = H3.extend`
margin-top: 0;
margin-bottom: 0;
line-height: 1.6;
font-weight: 600;
`;
const ServiceCard = Card.extend`
min-height: ${remcalc(72)};
`;
const ImageTitle = ServiceName.extend`
display: inline-block;
`;
const Image = styled.span`
${typography.fontFamily};
`;
const ButtonsRow = Row.extend`
margin-top: ${remcalc(29)};
margin-bottom: ${remcalc(60)};
`;
const MEditor = ManifestEditor => ({ input, defaultValue }) =>
;
const EEditor = ManifestEditor => ({ input, defaultValue }) =>
;
export const Name = ({ handleSubmit, onCancel, dirty }) =>
;
export const Manifest = ({ handleSubmit, onCancel, dirty, defaultValue }) =>
;
export const Environment = ({
handleSubmit,
onCancel,
dirty,
defaultValue,
loading
}) =>
;
export const Review = ({ handleSubmit, onCancel, dirty, ...state }) => {
const serviceList = forceArray(state.services).map(({ name, config }) =>
- {name}
- Image: {config.image}
{config.environment.length
? - Environment:
: undefined}
{config.environment.length
?
: undefined}
);
return (
);
};
export const Progress = ({ stage, create, edit }) => {
const _nameCompleted = stage !== 'name';
const _nameActive = stage === 'name';
const _name = !create
? null
:
Name the group
;
const _manifestCompleted = ['environment', 'review'].indexOf(stage) >= 0;
const _manifestActive = create ? stage === 'manifest' : stage === 'edit';
const _manifest = (
Define Services
);
const _environmentCompleted = stage === 'review';
const _environmentActive = stage === 'environment';
const _environment = (
Define Environment
);
const _reviewActive = stage === 'review';
const _review = (
Review and deploy
);
return (
{_name}
{_manifest}
{_environment}
{_review}
);
};