feat(instances): CI - metadata resposive

This commit is contained in:
Fábio Moreira 2018-05-30 14:47:36 +01:00 committed by Sérgio Ramos
parent 2f9d135319
commit cad1431e79
3 changed files with 396 additions and 383 deletions

View File

@ -1,6 +1,8 @@
import React, { Fragment } from 'react'; import React, { Fragment } from 'react';
import { Margin } from 'styled-components-spacing'; import { Margin } from 'styled-components-spacing';
import Flex, { FlexItem } from 'styled-flex-component'; import Flex, { FlexItem } from 'styled-flex-component';
import { withTheme } from 'styled-components';
import { compose } from 'react-apollo'; import { compose } from 'react-apollo';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import ReduxForm from 'declarative-redux-form'; import ReduxForm from 'declarative-redux-form';
@ -41,14 +43,18 @@ const Metadata = ({
shouldAsyncValidate, shouldAsyncValidate,
handleAsyncValidate, handleAsyncValidate,
handleChangeAddOpen, handleChangeAddOpen,
theme = {},
...props ...props
}) => ( }) => {
const mobile = theme.screen === 'mobile';
return (
<Step name="metadata" getValue={handleGetValue} {...props}> <Step name="metadata" getValue={handleGetValue} {...props}>
<StepHeader icon={<MetadataIcon />}>Metadata</StepHeader> <StepHeader icon={<MetadataIcon />}>Metadata</StepHeader>
<StepDescription href="https://docs.joyent.com/public-cloud/tags-metadata"> <StepDescription href="https://docs.joyent.com/public-cloud/tags-metadata">
Metadata can be used to pass data to the instance. It can also be used to Metadata can be used to pass data to the instance. It can also be used
inject a custom boot script. Unlike tags, metadata is only viewable inside to inject a custom boot script. Unlike tags, metadata is only viewable
the instance. inside the instance.
</StepDescription> </StepDescription>
<StepPreview> <StepPreview>
<Margin top="3"> <Margin top="3">
@ -99,9 +105,9 @@ const Metadata = ({
</Fragment> </Fragment>
) : ( ) : (
<Margin top="5"> <Margin top="5">
<Flex> <Flex column={mobile}>
<FlexItem> <FlexItem>
<Margin right="1"> <Margin right={mobile ? '0' : '1'}>
<Button <Button
id="button-add-metadata" id="button-add-metadata"
type="button" type="button"
@ -113,14 +119,17 @@ const Metadata = ({
</Margin> </Margin>
</FlexItem> </FlexItem>
<FlexItem> <FlexItem>
<Margin top={mobile ? 1 : 0}>
<Button <Button
id="next-button-metadata" id="next-button-metadata"
type="button" type="button"
component={Link} component={Link}
to={next} to={next}
fluid={mobile}
> >
Next Next
</Button> </Button>
</Margin>
</FlexItem> </FlexItem>
</Flex> </Flex>
</Margin> </Margin>
@ -131,7 +140,8 @@ const Metadata = ({
)} )}
</StepOutlet> </StepOutlet>
</Step> </Step>
); );
};
export default compose( export default compose(
connect(({ values }, ownProps) => { connect(({ values }, ownProps) => {
@ -203,4 +213,4 @@ export default compose(
]); ]);
} }
})) }))
)(Metadata); )(withTheme(({ ...rest }) => <Metadata {...rest} />));

View File

@ -55,8 +55,7 @@ const Tag = ({ name, value, onRemoveClick }) => (
</Margin> </Margin>
); );
const TagsContainer = withTheme( const TagsContainer = ({
({
handleValidate, handleValidate,
handleGetValue, handleGetValue,
preview = [], preview = [],
@ -70,7 +69,7 @@ const TagsContainer = withTheme(
handleCancelEdit, handleCancelEdit,
theme = {}, theme = {},
...props ...props
}) => { }) => {
const mobile = theme.screen === 'mobile'; const mobile = theme.screen === 'mobile';
return ( return (
<Step name="tags" getValue={handleGetValue} {...props}> <Step name="tags" getValue={handleGetValue} {...props}>
@ -170,8 +169,7 @@ const TagsContainer = withTheme(
</StepOutlet> </StepOutlet>
</Step> </Step>
); );
} };
);
export default compose( export default compose(
connect(({ values }, ownProps) => { connect(({ values }, ownProps) => {
@ -225,4 +223,4 @@ export default compose(
]); ]);
} }
})) }))
)(TagsContainer); )(withTheme(({ ...rest }) => <Metadata {...rest} />));

View File

@ -83,7 +83,8 @@ const TextareaKeyValue = ({
submitting, submitting,
onlyName, onlyName,
onlyValue, onlyValue,
editor editor,
mobile
}) => ( }) => (
<Fragment> <Fragment>
{onlyValue ? null : ( {onlyValue ? null : (
@ -97,7 +98,12 @@ const TextareaKeyValue = ({
> >
<FormLabel>{titleCase(type)} key</FormLabel> <FormLabel>{titleCase(type)} key</FormLabel>
<Margin top="0.5"> <Margin top="0.5">
<Input onBlur={null} type="text" disabled={submitting} /> <Input
onBlur={null}
type="text"
disabled={submitting}
fluid={mobile}
/>
<Row> <Row>
<Col sm="7"> <Col sm="7">
<FormMeta /> <FormMeta />
@ -105,6 +111,7 @@ const TextareaKeyValue = ({
</Row> </Row>
</Margin> </Margin>
</FormGroup> </FormGroup>
<Divider height={remcalc(12)} transparent />
</Col> </Col>
</Row> </Row>
)} )}
@ -133,6 +140,7 @@ const TextareaKeyValue = ({
</Col> </Col>
</Row> </Row>
</FormGroup> </FormGroup>
<Divider height={remcalc(12)} transparent />
</Col> </Col>
</Row> </Row>
)} )}
@ -149,7 +157,7 @@ const InputKeyValue = ({
fluid = false fluid = false
}) => ( }) => (
<Flex wrap justifyStart contentStretch column={fluid}> <Flex wrap justifyStart contentStretch column={fluid}>
{!onlyValue ? ( {onlyValue ? null : (
<FlexItem basis="auto"> <FlexItem basis="auto">
<FormGroup <FormGroup
id={id ? 'kv-input-name-' + id : null} id={id ? 'kv-input-name-' + id : null}
@ -170,7 +178,7 @@ const InputKeyValue = ({
</Margin> </Margin>
</FormGroup> </FormGroup>
</FlexItem> </FlexItem>
) : null} )}
{onlyName ? null : ( {onlyName ? null : (
<Fragment> <Fragment>
<FlexItem basis="auto"> <FlexItem basis="auto">
@ -198,8 +206,7 @@ const InputKeyValue = ({
</Flex> </Flex>
); );
export const KeyValue = withTheme( export const KeyValue = ({
({
id = null, id = null,
disabled = false, disabled = false,
input = 'input', input = 'input',
@ -216,6 +223,7 @@ export const KeyValue = withTheme(
onToggleExpanded, onToggleExpanded,
onCancel = () => null, onCancel = () => null,
onRemove = () => null, onRemove = () => null,
theme = {},
editor = null, editor = null,
onlyName = false, onlyName = false,
onlyValue = false, onlyValue = false,
@ -223,10 +231,8 @@ export const KeyValue = withTheme(
borderless = false, borderless = false,
shadow = true, shadow = true,
customHeader, customHeader,
headless = false, headless = false
noActions = false, }) => {
theme = {}
}) => {
const handleHeaderClick = method === 'edit' && onToggleExpanded; const handleHeaderClick = method === 'edit' && onToggleExpanded;
const mobile = theme.screen === 'mobile'; const mobile = theme.screen === 'mobile';
@ -318,6 +324,7 @@ export const KeyValue = withTheme(
onlyName={onlyName} onlyName={onlyName}
onlyValue={onlyValue} onlyValue={onlyValue}
editor={editor} editor={editor}
mobile={mobile}
/> />
) : null} ) : null}
{input !== 'textarea' && input !== 'input' {input !== 'textarea' && input !== 'input'
@ -361,10 +368,10 @@ export const KeyValue = withTheme(
error error
id={id ? 'kv-remove-button-' + id : null} id={id ? 'kv-remove-button-' + id : null}
> >
<Margin right={2}> <Margin right="2">
<DeleteIcon <DeleteIcon
disabled={disabled || submitting} disabled={disabled || submitting}
fill={disabled || submitting ? undefined : 'red'} fill={disabled || submitting ? undefined : theme.red}
/> />
</Margin> </Margin>
<span>Delete</span> <span>Delete</span>
@ -373,14 +380,12 @@ export const KeyValue = withTheme(
)} )}
</Row> </Row>
</Margin> </Margin>
)}
</Padding> </Padding>
</CardOutlet> </CardOutlet>
) : null} ) : null}
</Card> </Card>
); );
} };
);
KeyValue.propTypes = { KeyValue.propTypes = {
input: PropTypes.oneOf(['input', 'textarea']).isRequired, input: PropTypes.oneOf(['input', 'textarea']).isRequired,
@ -397,8 +402,8 @@ KeyValue.propTypes = {
onRemove: PropTypes.func onRemove: PropTypes.func
}; };
export default ({ handleSubmit, ...rest }) => ( export default withTheme(({ handleSubmit, ...rest }) => (
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
<KeyValue {...rest} /> <KeyValue {...rest} />
</form> </form>
); ));