Spearhead
/
joyent-portal
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

feat(instances): user scripts responsive designs

This commit is contained in:
Fábio Moreira 2018-05-30 15:02:29 +01:00 committed by Sérgio Ramos
parent cad1431e79
commit deb1a8436f
1 changed files with 47 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
packages/instance-steps/src/user-script/index.js
View File

@ -1,4 +1,5 @@
import React, { Fragment } from 'react'; import React, { Fragment } from 'react';
import { withTheme } from 'styled-components';
import { Margin } from 'styled-components-spacing'; import { Margin } from 'styled-components-spacing';
import { compose } from 'react-apollo'; import { compose } from 'react-apollo';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
@ -30,47 +31,52 @@ const UserScript = ({
handleChangeOpenForm, handleChangeOpenForm,
handleSubmit, handleSubmit,
handleEdit, handleEdit,
theme = {},
...props ...props
}) => ( }) => {
<Step name="user-script" getValue={handleGetValue} {...props}> const mobile = theme.screen === 'mobile';
<StepHeader icon={<ScriptIcon />}>User script</StepHeader> return (
<StepDescription href="https://docs.joyent.com/private-cloud/instances/using-mdata#UsingtheMetadataAPI-ListofMetadataKeys"> <Step name="user-script" getValue={handleGetValue} {...props}>
Insert code to execute when the machine starts (first boot only for KVM, <StepHeader icon={<ScriptIcon />}>User script</StepHeader>
every boot for infrastructure containers). <StepDescription href="https://docs.joyent.com/private-cloud/instances/using-mdata#UsingtheMetadataAPI-ListofMetadataKeys">
</StepDescription> Insert code to execute when the machine starts (first boot only for KVM,
<StepPreview> every boot for infrastructure containers).
<Overview lines={preview.lines} /> </StepDescription>
</StepPreview> <StepPreview>
<StepOutlet> <Overview lines={preview.lines} />
{({ next }) => ( </StepPreview>
<Margin top="5"> <StepOutlet>
<ReduxForm {({ next }) => (
form={IR_US_F} <Margin top="5">
destroyOnUnmount={false} <ReduxForm
forceUnregisterOnUnmount={true} form={IR_US_F}
onSubmit={handleSubmit} destroyOnUnmount={false}
> forceUnregisterOnUnmount={true}
{props => ( onSubmit={handleSubmit}
<Fragment> >
<UserScriptForm {...props} /> {props => (
<Margin top="5"> <Fragment>
<Button <UserScriptForm {...props} />
id="next-button-userscript" <Margin top={mobile ? '3' : '5'}>
type="button" <Button
component={Link} id="next-button-userscript"
to={next} type="button"
> component={Link}
Next to={next}
</Button> fluid={mobile}
</Margin> >
</Fragment> Next
)} </Button>
</ReduxForm> </Margin>
</Margin> </Fragment>
)} )}
</StepOutlet> </ReduxForm>
</Step> </Margin>
); )}
</StepOutlet>
</Step>
);
};
export default compose( export default compose(
connect( connect(
@ -100,4 +106,4 @@ export default compose(
} }
}) })
) )
)(UserScript); )(withTheme(({ ...rest }) => <UserScript {...rest} />));