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

fix(my-joy-beta): create instance - name ui fixes

Browse Source 
fixes #1004
This commit is contained in:
Sara Vieira 2018-01-15 17:34:15 +00:00 committed by Sérgio Ramos
parent 67c79c4629
commit 4bd89561c4
8 changed files with 72 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/my-joy-beta/package.json
View File

@ -31,7 +31,9 @@
"lodash.find": "^4.6.0", "lodash.find": "^4.6.0",
"lodash.get": "^4.4.2", "lodash.get": "^4.4.2",
"lodash.isstring": "^4.0.1", "lodash.isstring": "^4.0.1",
"lodash.omit": "^4.5.0",
"lodash.sortby": "^4.7.0", "lodash.sortby": "^4.7.0",
"lodash.uniqby": "^4.7.0",
"lunr": "^2.1.5", "lunr": "^2.1.5",
"normalized-styled-components": "^1.0.17", "normalized-styled-components": "^1.0.17",
"param-case": "^2.1.1", "param-case": "^2.1.1",

49
packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/name.spec.js.snap
View File

@ -11,6 +11,11 @@ exports[`renders <Name expanded /> without throwing 1`] = `
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.c8 {
margin-top: 0.5rem;
margin-bottom: 2rem;
}
.c0 { .c0 {
box-sizing: border-box; box-sizing: border-box;
display: -webkit-box; display: -webkit-box;
@ -59,7 +64,7 @@ exports[`renders <Name expanded /> without throwing 1`] = `
padding-bottom: 2.25rem; padding-bottom: 2.25rem;
} }
.c10 { .c11 {
font-family: sans-serif; font-family: sans-serif;
font-size: 100%; font-size: 100%;
line-height: 1.15; line-height: 1.15;
@ -72,30 +77,30 @@ exports[`renders <Name expanded /> without throwing 1`] = `
min-width: 7.5rem; min-width: 7.5rem;
} }
.c10::-moz-focus-inner, .c11::-moz-focus-inner,
.c10[type='button']::-moz-focus-inner, .c11[type='button']::-moz-focus-inner,
.c10[type='reset']::-moz-focus-inner, .c11[type='reset']::-moz-focus-inner,
.c10[type='submit']::-moz-focus-inner { .c11[type='submit']::-moz-focus-inner {
border-style: none; border-style: none;
padding: 0; padding: 0;
} }
.c10:-moz-focusring, .c11:-moz-focusring,
.c10[type='button']:-moz-focusring, .c11[type='button']:-moz-focusring,
.c10[type='reset']:-moz-focusring, .c11[type='reset']:-moz-focusring,
.c10[type='submit']:-moz-focusring { .c11[type='submit']:-moz-focusring {
outline: 0.0625rem dotted ButtonText; outline: 0.0625rem dotted ButtonText;
} }
.c10 + button { .c11 + button {
margin-left: 0.375rem; margin-left: 0.375rem;
} }
.c9 { .c10 {
display: inline-block; display: inline-block;
} }
.c8 { .c9 {
box-sizing: border-box; box-sizing: border-box;
display: inline-block; display: inline-block;
-webkit-box-pack: center; -webkit-box-pack: center;
@ -135,28 +140,28 @@ exports[`renders <Name expanded /> without throwing 1`] = `
border: solid 0.0625rem rgb(45,56,132); border: solid 0.0625rem rgb(45,56,132);
} }
.c8:focus { .c9:focus {
outline: 0; outline: 0;
text-decoration: none; text-decoration: none;
background-color: rgb(59,70,204); background-color: rgb(59,70,204);
border-color: rgb(45,56,132); border-color: rgb(45,56,132);
} }
.c8:hover { .c9:hover {
background-color: rgb(72,83,217); background-color: rgb(72,83,217);
border: solid 0.0625rem rgb(45,56,132); border: solid 0.0625rem rgb(45,56,132);
} }
.c8:active, .c9:active,
.c8:active:hover, .c9:active:hover,
.c8:active:focus { .c9:active:focus {
background-image: none; background-image: none;
outline: 0; outline: 0;
background-color: rgb(45,56,132); background-color: rgb(45,56,132);
border-color: rgb(45,56,132); border-color: rgb(45,56,132);
} }
.c8[disabled] { .c9[disabled] {
cursor: not-allowed; cursor: not-allowed;
pointer-events: none; pointer-events: none;
} }
@ -315,7 +320,7 @@ exports[`renders <Name expanded /> without throwing 1`] = `
className="c5" className="c5"
htmlFor="Y" htmlFor="Y"
> >
Name Instance Name
</label> </label>
<input <input
className="c6" className="c6"
@ -326,14 +331,18 @@ exports[`renders <Name expanded /> without throwing 1`] = `
className="c7" className="c7"
/> />
</div> </div>
<div
className="c8"
>
<button <button
className="c8 c9 c10" className="c9 c10 c11"
disabled={undefined} disabled={undefined}
href="" href=""
type="submit" type="submit"
> >
Next Next
</button> </button>
</div>
</form> </form>
`; `;

4
packages/my-joy-beta/src/components/create-instance/name.js
View File

@ -20,13 +20,15 @@ export default ({ handleSubmit, pristine, expanded, name, onCancel }) => (
Your instance name will be used to identify this specific instance. Your instance name will be used to identify this specific instance.
</Description> </Description>
<FormGroup name="name" fluid field={Field}> <FormGroup name="name" fluid field={Field}>
<FormLabel>Name</FormLabel> <FormLabel>Instance Name</FormLabel>
<Input /> <Input />
<FormMeta /> <FormMeta />
</FormGroup> </FormGroup>
<Margin top={2} bottom={4}>
<Button type="submit" disabled={pristine}> <Button type="submit" disabled={pristine}>
Next Next
</Button> </Button>
</Margin>
</Fragment> </Fragment>
) : ( ) : (
<Fragment> <Fragment>

15
packages/my-joy-beta/src/containers/create-instance/affinity.js
View File

@ -6,8 +6,9 @@ import { destroy, reset } from 'redux-form';
import ReduxForm from 'declarative-redux-form'; import ReduxForm from 'declarative-redux-form';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import get from 'lodash.get'; import get from 'lodash.get';
import remcalc from 'remcalc';
import { AffinityIcon, P, Button, H3 } from 'joyent-ui-toolkit'; import { AffinityIcon, P, Button, H3, Divider } from 'joyent-ui-toolkit';
import Title from '@components/create-instance/title'; import Title from '@components/create-instance/title';
import { Rule, Header } from '@components/create-instance/affinity'; import { Rule, Header } from '@components/create-instance/affinity';
@ -120,14 +121,22 @@ export const Affinity = ({
> >
Create affinity rule Create affinity rule
</Button> </Button>
<Button type="button" onClick={handleNext}> <Margin top={2} bottom={4}>
<Button type="submit" onClick={handleNext}>
Next Next
</Button> </Button>
</Margin>
<Divider height={remcalc(1)} />
</Fragment> </Fragment>
) : proceeded ? ( ) : proceeded ? (
<Fragment>
<Button type="button" onClick={handleEdit} secondary> <Button type="button" onClick={handleEdit} secondary>
Edit Edit
</Button> </Button>
<Margin top={3}>
<Divider height={remcalc(1)} />
</Margin>
</Fragment>
) : null} ) : null}
</div> </div>
</Fragment> </Fragment>
@ -146,7 +155,7 @@ export default compose(
set({ name: 'create-instance-affinity-proceeded', value: true }) set({ name: 'create-instance-affinity-proceeded', value: true })
); );
return history.push(`/instances/~create/done`); return history.push(`/instances/~create/summary`);
}, },
handleEdit: () => { handleEdit: () => {
return history.push(`/instances/~create/affinity`); return history.push(`/instances/~create/affinity`);

8
packages/my-joy-beta/src/containers/create-instance/index.js
View File

@ -2,7 +2,6 @@ import React from 'react';
import { Margin } from 'styled-components-spacing'; import { Margin } from 'styled-components-spacing';
import ReduxForm from 'declarative-redux-form'; import ReduxForm from 'declarative-redux-form';
import { stopSubmit, destroy } from 'redux-form'; import { stopSubmit, destroy } from 'redux-form';
import remcalc from 'remcalc';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { graphql, compose } from 'react-apollo'; import { graphql, compose } from 'react-apollo';
import intercept from 'apr-intercept'; import intercept from 'apr-intercept';
@ -11,7 +10,7 @@ import get from 'lodash.get';
import omit from 'lodash.omit'; import omit from 'lodash.omit';
import uniqBy from 'lodash.uniqby'; import uniqBy from 'lodash.uniqby';
import { ViewContainer, H2, Button, Divider } from 'joyent-ui-toolkit'; import { ViewContainer, H2, Button } from 'joyent-ui-toolkit';
import Name from '@containers/create-instance/name'; import Name from '@containers/create-instance/name';
import Image from '@containers/create-instance/image'; import Image from '@containers/create-instance/image';
@ -57,14 +56,11 @@ const CreateInstance = ({ step, handleSubmit, ...props }) => (
<Margin bottom={4}> <Margin bottom={4}>
<Affinity {...props} expanded={step === 'affinity'} /> <Affinity {...props} expanded={step === 'affinity'} />
</Margin> </Margin>
{step === 'done' || step === 'affinity' ? (
<Divider height={remcalc(1)} />
) : null}
<Margin top={7} bottom={10}> <Margin top={7} bottom={10}>
<ReduxForm form="create-instance" onSubmit={handleSubmit}> <ReduxForm form="create-instance" onSubmit={handleSubmit}>
{({ handleSubmit, submitting }) => ( {({ handleSubmit, submitting }) => (
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
<Button disabled={step !== 'done'} loading={submitting}> <Button disabled={step !== 'summary'} loading={submitting}>
Deploy Deploy
</Button> </Button>
</form> </form>

1
packages/my-joy-beta/src/containers/instances/snapshots.js
View File

@ -8,7 +8,6 @@ import get from 'lodash.get';
import sort from 'lodash.sortby'; import sort from 'lodash.sortby';
import { set } from 'react-redux-values'; import { set } from 'react-redux-values';
import ReduxForm from 'declarative-redux-form'; import ReduxForm from 'declarative-redux-form';
import { withRouter } from 'react-router-dom';
import { Margin } from 'styled-components-spacing'; import { Margin } from 'styled-components-spacing';
import intercept from 'apr-intercept'; import intercept from 'apr-intercept';

4
packages/my-joy-beta/src/router.js
View File

@ -157,9 +157,9 @@ export default () => (
component={props => <CreateInstance {...props} step="affinity" />} component={props => <CreateInstance {...props} step="affinity" />}
/> />
<Route <Route
path="/instances/~create/done" path="/instances/~create/summary"
exact exact
component={props => <CreateInstance {...props} step="done" />} component={props => <CreateInstance {...props} step="summary" />}
/> />
<Route <Route

8
yarn.lock
View File

@ -6479,6 +6479,10 @@ lodash.memoize@^4.1.2:
version "4.1.2" version "4.1.2"
resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe" resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
lodash.omit@^4.5.0:
version "4.5.0"
resolved "https://registry.yarnpkg.com/lodash.omit/-/lodash.omit-4.5.0.tgz#6eb19ae5a1ee1dd9df0b969e66ce0b7fa30b5e60"
lodash.pick@^4.4.0: lodash.pick@^4.4.0:
version "4.4.0" version "4.4.0"
resolved "https://registry.yarnpkg.com/lodash.pick/-/lodash.pick-4.4.0.tgz#52f05610fff9ded422611441ed1fc123a03001b3" resolved "https://registry.yarnpkg.com/lodash.pick/-/lodash.pick-4.4.0.tgz#52f05610fff9ded422611441ed1fc123a03001b3"
@ -6512,6 +6516,10 @@ lodash.uniq@^4.5.0:
version "4.5.0" version "4.5.0"
resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773" resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
lodash.uniqby@^4.7.0:
version "4.7.0"
resolved "https://registry.yarnpkg.com/lodash.uniqby/-/lodash.uniqby-4.7.0.tgz#d99c07a669e9e6d24e1362dfe266c67616af1302"
"lodash@>=3.5 <5", lodash@^4.0.0, lodash@^4.1.0, lodash@^4.11.1, lodash@^4.13.1, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.5.1: "lodash@>=3.5 <5", lodash@^4.0.0, lodash@^4.1.0, lodash@^4.11.1, lodash@^4.13.1, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.5.1:
version "4.17.4" version "4.17.4"
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"