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

feat(my-joy-beta): create instane page starter

Browse Source
This commit is contained in:
Sara Vieira 2018-01-08 19:08:01 +00:00 committed by Sérgio Ramos
parent 5a8c8e8fb2
commit 98166047fd
22 changed files with 2012 additions and 163 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

File diff suppressed because it is too large Load Diff

433
packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/title.spec.js.snap Normal file
View File

@ -0,0 +1,433 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders <Toolbar /> without throwing 1`] = `
Array [
.c2 {
color: rgba(73,73,73,1);
line-height: 1.5rem;
font-size: 0.9375rem;
margin: 0;
}
.c2 + p,
.c2 + small,
.c2 + h1,
.c2 + h2,
.c2 + label,
.c2 + h3,
.c2 + h4,
.c2 + h5,
.c2 + div,
.c2 + span {
padding-bottom: 2.25rem;
}
.c0 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
}
.c1 {
margin-right: 0.25rem;
}
<div
className="c0"
>
<div
className="c1"
/>
<p
className="c2"
/>
</div>,
.c2 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -0.5rem;
margin-left: -0.5rem;
}
.c1 {
background-color: rgb(216,216,216);
margin: 0;
height: 0.0625rem;
}
.c0 {
margin-top: 0.25rem;
margin-bottom: 1rem;
}
<div
className="c0"
>
<div
className="c1 c2"
height="0.0625rem"
/>
</div>,
]
`;
exports[`renders <Toolbar icon="NameIcon"/> without throwing 1`] = `
Array [
.c2 {
color: rgba(73,73,73,1);
line-height: 1.5rem;
font-size: 0.9375rem;
margin: 0;
}
.c2 + p,
.c2 + small,
.c2 + h1,
.c2 + h2,
.c2 + label,
.c2 + h3,
.c2 + h4,
.c2 + h5,
.c2 + div,
.c2 + span {
padding-bottom: 2.25rem;
}
.c0 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
}
.c1 {
margin-right: 0.25rem;
}
<div
className="c0"
>
<div
className="c1"
>
<svg
className=""
height="17"
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
viewBox="0 0 16.24 13.55"
width="17"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<path
d="M.24,13.55c-1-2,1.39-6.73,1.52-7C4.47,1.5,6.77-.55,9,.12a2.34,2.34,0,0,1,1.4,1.16c.54,1.06-.26,2.41-1.18,4-.55.91-1.69,3.42-1.78,3.67-.37,1-.88,2.35-.52,2.86.19.28.73.34,1.14.34s1-.77,1.31-1.49c.56-1.48,1.87-4.94,4.1-4.27,1.78.53,1.27,2.56.93,3.91s-.11,1.51-.1,1.52a2.21,2.21,0,0,0,1.95-.24v1c-1.41.73-2.11.72-2.74.21-.88-.71-.48-2.19-.33-2.75.38-1.52.47-2.3-.07-2.46-.73-.22-1.6,1-2.57,3.52-.4,1.1-1.26,2.3-2.48,2.3a2.48,2.48,0,0,1-2.17-.88c-.72-1.05-.14-2.62.38-4,.09-.23,1.3-2.91,1.87-3.87s2.11-3.06.49-3.29S5.18,2.83,2.87,7.16c-1.71,3.21-1.78,5.95-1.62,6.39Z"
fill="rgba(73, 73, 73, 1)"
/>
</svg>
</div>
<p
className="c2"
/>
</div>,
.c2 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -0.5rem;
margin-left: -0.5rem;
}
.c1 {
background-color: rgb(216,216,216);
margin: 0;
height: 0.0625rem;
}
.c0 {
margin-top: 0.25rem;
margin-bottom: 1rem;
}
<div
className="c0"
>
<div
className="c1 c2"
height="0.0625rem"
/>
</div>,
]
`;
exports[`renders <Toolbar icon="Test" label="Instance name"/> without throwing 1`] = `
Array [
.c2 {
color: rgba(73,73,73,1);
line-height: 1.5rem;
font-size: 0.9375rem;
margin: 0;
}
.c2 + p,
.c2 + small,
.c2 + h1,
.c2 + h2,
.c2 + label,
.c2 + h3,
.c2 + h4,
.c2 + h5,
.c2 + div,
.c2 + span {
padding-bottom: 2.25rem;
}
.c0 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
}
.c1 {
margin-right: 0.25rem;
}
<div
className="c0"
>
<div
className="c1"
>
<svg
className=""
height="17"
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
viewBox="0 0 16.24 13.55"
width="17"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<path
d="M.24,13.55c-1-2,1.39-6.73,1.52-7C4.47,1.5,6.77-.55,9,.12a2.34,2.34,0,0,1,1.4,1.16c.54,1.06-.26,2.41-1.18,4-.55.91-1.69,3.42-1.78,3.67-.37,1-.88,2.35-.52,2.86.19.28.73.34,1.14.34s1-.77,1.31-1.49c.56-1.48,1.87-4.94,4.1-4.27,1.78.53,1.27,2.56.93,3.91s-.11,1.51-.1,1.52a2.21,2.21,0,0,0,1.95-.24v1c-1.41.73-2.11.72-2.74.21-.88-.71-.48-2.19-.33-2.75.38-1.52.47-2.3-.07-2.46-.73-.22-1.6,1-2.57,3.52-.4,1.1-1.26,2.3-2.48,2.3a2.48,2.48,0,0,1-2.17-.88c-.72-1.05-.14-2.62.38-4,.09-.23,1.3-2.91,1.87-3.87s2.11-3.06.49-3.29S5.18,2.83,2.87,7.16c-1.71,3.21-1.78,5.95-1.62,6.39Z"
fill="rgba(73, 73, 73, 1)"
/>
</svg>
</div>
<p
className="c2"
>
Instance name
</p>
</div>,
.c2 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -0.5rem;
margin-left: -0.5rem;
}
.c1 {
background-color: rgb(216,216,216);
margin: 0;
height: 0.0625rem;
}
.c0 {
margin-top: 0.25rem;
margin-bottom: 1rem;
}
<div
className="c0"
>
<div
className="c1 c2"
height="0.0625rem"
/>
</div>,
]
`;
exports[`renders <Toolbar label="Test"/> without throwing 1`] = `
Array [
.c2 {
color: rgba(73,73,73,1);
line-height: 1.5rem;
font-size: 0.9375rem;
margin: 0;
}
.c2 + p,
.c2 + small,
.c2 + h1,
.c2 + h2,
.c2 + label,
.c2 + h3,
.c2 + h4,
.c2 + h5,
.c2 + div,
.c2 + span {
padding-bottom: 2.25rem;
}
.c0 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
}
.c1 {
margin-right: 0.25rem;
}
<div
className="c0"
>
<div
className="c1"
/>
<p
className="c2"
>
Test
</p>
</div>,
.c2 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -0.5rem;
margin-left: -0.5rem;
}
.c1 {
background-color: rgb(216,216,216);
margin: 0;
height: 0.0625rem;
}
.c0 {
margin-top: 0.25rem;
margin-bottom: 1rem;
}
<div
className="c0"
>
<div
className="c1 c2"
height="0.0625rem"
/>
</div>,
]
`;

54
packages/my-joy-beta/src/components/create-instance/__tests__/name.spec.js Normal file
View File

@ -0,0 +1,54 @@
import React from 'react';
import renderer from 'react-test-renderer';
import 'jest-styled-components';
import Name from '../name';
import Theme from '@mocks/theme';
it('renders <Name /> without throwing', () => {
expect(
renderer
.create(
<Theme>
<Name />
</Theme>
)
.toJSON()
).toMatchSnapshot();
});
it('renders <Name expanded /> without throwing', () => {
expect(
renderer
.create(
<Theme>
<Name expanded />
</Theme>
)
.toJSON()
).toMatchSnapshot();
});
it('renders <Name name="test" /> without throwing', () => {
expect(
renderer
.create(
<Theme>
<Name name="test" />
</Theme>
)
.toJSON()
).toMatchSnapshot();
});
it('renders <Name pristine={false} /> without throwing', () => {
expect(
renderer
.create(
<Theme>
<Name pristine={false} />
</Theme>
)
.toJSON()
).toMatchSnapshot();
});

56
packages/my-joy-beta/src/components/create-instance/__tests__/title.spec.js Normal file
View File

@ -0,0 +1,56 @@
import React from 'react';
import renderer from 'react-test-renderer';
import 'jest-styled-components';
import { NameIcon } from 'joyent-ui-toolkit';
import Title from '../title';
import Theme from '@mocks/theme';
it('renders <Toolbar /> without throwing', () => {
expect(
renderer
.create(
<Theme>
<Title />
</Theme>
)
.toJSON()
).toMatchSnapshot();
});
it('renders <Toolbar label="Test"/> without throwing', () => {
expect(
renderer
.create(
<Theme>
<Title label="Test" />
</Theme>
)
.toJSON()
).toMatchSnapshot();
});
it('renders <Toolbar icon="NameIcon"/> without throwing', () => {
expect(
renderer
.create(
<Theme>
<Title icon={<NameIcon />} />
</Theme>
)
.toJSON()
).toMatchSnapshot();
});
it('renders <Toolbar icon="Test" label="Instance name"/> without throwing', () => {
expect(
renderer
.create(
<Theme>
<Title icon={<NameIcon />} label="Instance name" />
</Theme>
)
.toJSON()
).toMatchSnapshot();
});

48
packages/my-joy-beta/src/components/create-instance/name.js Normal file
View File

@ -0,0 +1,48 @@
import React, { Fragment } from 'react';
import { Field } from 'redux-form';
import { Margin } from 'styled-components-spacing';
import {
NameIcon,
H3,
P,
FormGroup,
FormLabel,
Input,
FormMeta,
Button
} from 'joyent-ui-toolkit';
import Title from './title';
export default ({ handleSubmit, pristine, expanded, name, onCancel }) => (
<form onSubmit={handleSubmit}>
<Title icon={<NameIcon />} label="Instance name" />
{expanded ? (
<Fragment>
<Margin bottom={3}>
<P>
Your instance name will be used to identify this specific instance.
</P>
</Margin>
<FormGroup name="name" fluid field={Field}>
<FormLabel>Name</FormLabel>
<Input />
<FormMeta />
</FormGroup>
<Button type="submit" disabled={pristine}>
Next
</Button>
</Fragment>
) : (
<Fragment>
<Margin bottom={2} top={3}>
<H3>{name}</H3>
</Margin>
<Button type="button" secondary onClick={onCancel}>
Edit
</Button>
</Fragment>
)}
</form>
);

18
packages/my-joy-beta/src/components/create-instance/title.js Normal file
View File

@ -0,0 +1,18 @@
import React, { Fragment } from 'react';
import Flex from 'styled-flex-component';
import { Margin } from 'styled-components-spacing';
import remcalc from 'remcalc';
import { Divider, P } from 'joyent-ui-toolkit';
export default ({ icon, label }) => (
<Fragment>
<Flex>
<Margin right={1}>{icon}</Margin>
<P>{label}</P>
</Flex>
<Margin top={1} bottom={3}>
<Divider height={remcalc(1)} />
</Margin>
</Fragment>
);

4
packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/snapshots.spec.js.snap
View File

@ -1268,7 +1268,7 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
name="td"
selected={undefined}
>
28 days
about 1 month
</td>
<td
className="c12"
@ -1276,7 +1276,7 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
name="td"
selected={undefined}
>
28 days
about 1 month
</td>
<td
className="c13 c14"

7
packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/summary.spec.js.snap
View File

@ -716,6 +716,7 @@ exports[`renders <Summary /> without throwing 1`] = `
.c6 {
color: rgba(73,73,73,1);
font-weight: normal;
line-height: 1.875rem;
font-size: 1.5rem;
margin: 0;
@ -2877,6 +2878,7 @@ exports[`renders <Summary instance /> without throwing 1`] = `
.c6 {
color: rgba(73,73,73,1);
font-weight: normal;
line-height: 1.875rem;
font-size: 1.5rem;
margin: 0;
@ -5208,6 +5210,7 @@ exports[`renders <Summary instance /> without throwing 2`] = `
.c6 {
color: rgba(73,73,73,1);
font-weight: normal;
line-height: 1.875rem;
font-size: 1.5rem;
margin: 0;
@ -7426,6 +7429,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
.c6 {
color: rgba(73,73,73,1);
font-weight: normal;
line-height: 1.875rem;
font-size: 1.5rem;
margin: 0;
@ -9479,6 +9483,7 @@ exports[`renders <Summary state /> without throwing 1`] = `
.c6 {
color: rgba(73,73,73,1);
font-weight: normal;
line-height: 1.875rem;
font-size: 1.5rem;
margin: 0;
@ -11641,6 +11646,7 @@ exports[`renders <Summary state /> without throwing 2`] = `
.c6 {
color: rgba(73,73,73,1);
font-weight: normal;
line-height: 1.875rem;
font-size: 1.5rem;
margin: 0;
@ -13637,6 +13643,7 @@ exports[`renders <Summary state /> without throwing 3`] = `
.c6 {
color: rgba(73,73,73,1);
font-weight: normal;
line-height: 1.875rem;
font-size: 1.5rem;
margin: 0;

1
packages/my-joy-beta/src/components/navigation/__tests__/__snapshots__/header.spec.js.snap
View File

@ -104,6 +104,7 @@ exports[`renders <Header /> without throwing 1`] = `
.c3 {
color: rgba(73,73,73,1);
font-weight: normal;
line-height: 1.875rem;
font-size: 1.5rem;
margin: 0;

15
packages/my-joy-beta/src/containers/create-instance/index.js Normal file
View File

@ -0,0 +1,15 @@
import React from 'react';
import { Margin } from 'styled-components-spacing';
import { ViewContainer, H2 } from 'joyent-ui-toolkit';
import Name from '@containers/create-instance/name';
export default ({ step }) => (
<ViewContainer>
<Margin top={4} bottom={4}>
<H2>Create Instances</H2>
</Margin>
<Name expanded={step === 'name'} />
</ViewContainer>
);

40
packages/my-joy-beta/src/containers/create-instance/name.js Normal file
View File

@ -0,0 +1,40 @@
import React from 'react';
import { withRouter } from 'react-router';
import { compose } from 'react-apollo';
import ReduxForm from 'declarative-redux-form';
import { connect } from 'react-redux';
import get from 'lodash.get';
import Name from '@components/create-instance/name';
const NameContainer = ({ expanded, name, handleSubmit, handleCancel }) => (
<ReduxForm
form="create-instance-name"
destroyOnUnmount={false}
forceUnregisterOnUnmount={true}
onSubmit={handleSubmit}
>
{props => (
<Name
{...props}
name={name}
expanded={expanded}
onCancel={handleCancel}
/>
)}
</ReduxForm>
);
export default compose(
withRouter,
connect(
(state, ownProps) => ({
...ownProps,
name: get(state, 'form.create-instance-name.values.name')
}),
(dispatch, { history }) => ({
handleSubmit: () => history.push(`/instances/~create/image`),
handleCancel: () => history.push(`/instances/~create/name`)
})
)
)(NameContainer);

172
packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/list.spec.js.snap
View File

@ -75,11 +75,6 @@ exports[`renders <List /> without throwing 1`] = `
background-color: rgb(59,70,204);
border-radius: 0.25rem;
border: solid 0.0625rem rgb(45,56,132);
cursor: not-allowed;
pointer-events: none;
color: rgb(216,216,216);
background-color: rgb(250,250,250);
border-color: rgb(216,216,216);
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
@ -118,23 +113,6 @@ exports[`renders <List /> without throwing 1`] = `
pointer-events: none;
}
.c10:focus {
background-color: rgb(250,250,250);
border-color: rgb(216,216,216);
}
.c10:hover {
background-color: rgb(250,250,250);
border-color: rgb(250,250,250);
}
.c10:active,
.c10:active:hover,
.c10:active:focus {
background-color: rgb(250,250,250);
border-color: rgb(250,250,250);
}
.c10 svg + span {
margin-left: 0.75rem;
}
@ -841,11 +819,11 @@ exports[`renders <List /> without throwing 1`] = `
</label>
<button
className="c10 c11 c12"
disabled={true}
disabled={false}
href=""
icon={true}
onClick={undefined}
type="submit"
onClick={[Function]}
type="button"
>
Create Instance
</button>
@ -1088,11 +1066,6 @@ exports[`renders <List error /> without throwing 1`] = `
background-color: rgb(59,70,204);
border-radius: 0.25rem;
border: solid 0.0625rem rgb(45,56,132);
cursor: not-allowed;
pointer-events: none;
color: rgb(216,216,216);
background-color: rgb(250,250,250);
border-color: rgb(216,216,216);
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
@ -1131,23 +1104,6 @@ exports[`renders <List error /> without throwing 1`] = `
pointer-events: none;
}
.c10:focus {
background-color: rgb(250,250,250);
border-color: rgb(216,216,216);
}
.c10:hover {
background-color: rgb(250,250,250);
border-color: rgb(250,250,250);
}
.c10:active,
.c10:active:hover,
.c10:active:focus {
background-color: rgb(250,250,250);
border-color: rgb(250,250,250);
}
.c10 svg + span {
margin-left: 0.75rem;
}
@ -1906,11 +1862,11 @@ exports[`renders <List error /> without throwing 1`] = `
</label>
<button
className="c10 c11 c12"
disabled={true}
disabled={false}
href=""
icon={true}
onClick={undefined}
type="submit"
onClick={[Function]}
type="button"
>
Create Instance
</button>
@ -2187,11 +2143,6 @@ exports[`renders <List instances /> without throwing 1`] = `
background-color: rgb(59,70,204);
border-radius: 0.25rem;
border: solid 0.0625rem rgb(45,56,132);
cursor: not-allowed;
pointer-events: none;
color: rgb(216,216,216);
background-color: rgb(250,250,250);
border-color: rgb(216,216,216);
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
@ -2230,23 +2181,6 @@ exports[`renders <List instances /> without throwing 1`] = `
pointer-events: none;
}
.c10:focus {
background-color: rgb(250,250,250);
border-color: rgb(216,216,216);
}
.c10:hover {
background-color: rgb(250,250,250);
border-color: rgb(250,250,250);
}
.c10:active,
.c10:active:hover,
.c10:active:focus {
background-color: rgb(250,250,250);
border-color: rgb(250,250,250);
}
.c10 svg + span {
margin-left: 0.75rem;
}
@ -3112,11 +3046,11 @@ exports[`renders <List instances /> without throwing 1`] = `
</label>
<button
className="c10 c11 c12"
disabled={true}
disabled={false}
href=""
icon={true}
onClick={undefined}
type="submit"
onClick={[Function]}
type="button"
>
Create Instance
</button>
@ -3652,11 +3586,6 @@ exports[`renders <List instances selected /> without throwing 1`] = `
background-color: rgb(59,70,204);
border-radius: 0.25rem;
border: solid 0.0625rem rgb(45,56,132);
cursor: not-allowed;
pointer-events: none;
color: rgb(216,216,216);
background-color: rgb(250,250,250);
border-color: rgb(216,216,216);
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
@ -3695,23 +3624,6 @@ exports[`renders <List instances selected /> without throwing 1`] = `
pointer-events: none;
}
.c10:focus {
background-color: rgb(250,250,250);
border-color: rgb(216,216,216);
}
.c10:hover {
background-color: rgb(250,250,250);
border-color: rgb(250,250,250);
}
.c10:active,
.c10:active:hover,
.c10:active:focus {
background-color: rgb(250,250,250);
border-color: rgb(250,250,250);
}
.c10 svg + span {
margin-left: 0.75rem;
}
@ -5287,11 +5199,11 @@ exports[`renders <List instances selected /> without throwing 1`] = `
</label>
<button
className="c10 c11 c12"
disabled={true}
disabled={false}
href=""
icon={true}
onClick={undefined}
type="submit"
onClick={[Function]}
type="button"
>
Create Instance
</button>
@ -6307,11 +6219,6 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
background-color: rgb(59,70,204);
border-radius: 0.25rem;
border: solid 0.0625rem rgb(45,56,132);
cursor: not-allowed;
pointer-events: none;
color: rgb(216,216,216);
background-color: rgb(250,250,250);
border-color: rgb(216,216,216);
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
@ -6350,23 +6257,6 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
pointer-events: none;
}
.c10:focus {
background-color: rgb(250,250,250);
border-color: rgb(216,216,216);
}
.c10:hover {
background-color: rgb(250,250,250);
border-color: rgb(250,250,250);
}
.c10:active,
.c10:active:hover,
.c10:active:focus {
background-color: rgb(250,250,250);
border-color: rgb(250,250,250);
}
.c10 svg + span {
margin-left: 0.75rem;
}
@ -7942,11 +7832,11 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
</label>
<button
className="c10 c11 c12"
disabled={true}
disabled={false}
href=""
icon={true}
onClick={undefined}
type="submit"
onClick={[Function]}
type="button"
>
Create Instance
</button>
@ -8962,11 +8852,6 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
background-color: rgb(59,70,204);
border-radius: 0.25rem;
border: solid 0.0625rem rgb(45,56,132);
cursor: not-allowed;
pointer-events: none;
color: rgb(216,216,216);
background-color: rgb(250,250,250);
border-color: rgb(216,216,216);
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
@ -9005,23 +8890,6 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
pointer-events: none;
}
.c10:focus {
background-color: rgb(250,250,250);
border-color: rgb(216,216,216);
}
.c10:hover {
background-color: rgb(250,250,250);
border-color: rgb(250,250,250);
}
.c10:active,
.c10:active:hover,
.c10:active:focus {
background-color: rgb(250,250,250);
border-color: rgb(250,250,250);
}
.c10 svg + span {
margin-left: 0.75rem;
}
@ -10806,11 +10674,11 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
</label>
<button
className="c10 c11 c12"
disabled={true}
disabled={false}
href=""
icon={true}
onClick={undefined}
type="submit"
onClick={[Function]}
type="button"
>
Create Instance
</button>
@ -12278,8 +12146,8 @@ exports[`renders <List loading /> without throwing 1`] = `
disabled={true}
href=""
icon={true}
onClick={undefined}
type="submit"
onClick={[Function]}
type="button"
>
Create Instance
</button>

4
packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/metadata.spec.js.snap
View File

@ -173,6 +173,7 @@ exports[`renders <Metadata /> without throwing 1`] = `
.c16 {
color: rgba(73,73,73,1);
font-weight: normal;
line-height: 1.625rem;
font-size: 1.3125rem;
margin: 0;
@ -1009,6 +1010,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
.c34 {
color: rgba(73,73,73,1);
font-weight: normal;
line-height: 1.625rem;
font-size: 1.3125rem;
margin: 0;
@ -2099,6 +2101,7 @@ exports[`renders <Metadata error /> without throwing 1`] = `
.c22 {
color: rgba(73,73,73,1);
font-weight: normal;
line-height: 1.625rem;
font-size: 1.3125rem;
margin: 0;
@ -3824,6 +3827,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
.c16 {
color: rgba(73,73,73,1);
font-weight: normal;
line-height: 1.625rem;
font-size: 1.3125rem;
margin: 0;

2
packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/summary.spec.js.snap
View File

@ -1442,6 +1442,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
.c7 {
color: rgba(73,73,73,1);
font-weight: normal;
line-height: 1.875rem;
font-size: 1.5rem;
margin: 0;
@ -3811,6 +3812,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
.c7 {
color: rgba(73,73,73,1);
font-weight: normal;
line-height: 1.875rem;
font-size: 1.5rem;
margin: 0;

7
packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/tags.spec.js.snap
View File

@ -173,6 +173,7 @@ exports[`renders <Tags /> without throwing 1`] = `
.c16 {
color: rgba(73,73,73,1);
font-weight: normal;
line-height: 1.625rem;
font-size: 1.3125rem;
margin: 0;
@ -1025,6 +1026,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
.c34 {
color: rgba(73,73,73,1);
font-weight: normal;
line-height: 1.625rem;
font-size: 1.3125rem;
margin: 0;
@ -2085,6 +2087,7 @@ exports[`renders <Tags editable /> without throwing 1`] = `
.c16 {
color: rgba(73,73,73,1);
font-weight: normal;
line-height: 1.625rem;
font-size: 1.3125rem;
margin: 0;
@ -2958,6 +2961,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
.c34 {
color: rgba(73,73,73,1);
font-weight: normal;
line-height: 1.625rem;
font-size: 1.3125rem;
margin: 0;
@ -4458,6 +4462,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
.c38 {
color: rgba(73,73,73,1);
font-weight: normal;
line-height: 1.625rem;
font-size: 1.3125rem;
margin: 0;
@ -5511,6 +5516,7 @@ exports[`renders <Tags error /> without throwing 1`] = `
.c16 {
color: rgba(73,73,73,1);
font-weight: normal;
line-height: 1.625rem;
font-size: 1.3125rem;
margin: 0;
@ -6611,6 +6617,7 @@ exports[`renders <Tags tags /> without throwing 1`] = `
.c16 {
color: rgba(73,73,73,1);
font-weight: normal;
line-height: 1.625rem;
font-size: 1.3125rem;
margin: 0;

5
packages/my-joy-beta/src/containers/instances/list.js
View File

@ -52,7 +52,8 @@ export const List = ({
submitting,
handleAction,
toggleSelectAll,
handleSortBy
handleSortBy,
history
}) => {
const _instances = forceArray(instances);
@ -137,7 +138,7 @@ export const List = ({
searchPlaceholder="Search for name, state, tags, etc..."
searchable={!_loading}
actionLabel="Create Instance"
actionable={false}
onActionClick={() => history.push(`/instances/~create`)}
/>
)}
</ReduxForm>

2
packages/my-joy-beta/src/containers/navigation/__tests__/__snapshots__/breadcrumb.spec.js.snap
View File

@ -39,6 +39,7 @@ exports[`renders <Breadcrumb /> without throwing 1`] = `
.c5 {
color: rgba(73,73,73,1);
font-weight: normal;
line-height: 1.875rem;
font-size: 1.5rem;
margin: 0;
@ -208,6 +209,7 @@ exports[`renders <Breadcrumb match /> without throwing 1`] = `
.c5 {
color: rgba(73,73,73,1);
font-weight: normal;
line-height: 1.875rem;
font-size: 1.5rem;
margin: 0;

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

@ -19,6 +19,8 @@ import {
Resize as InstanceResize
} from '@containers/instances';
import CreateInstance from '@containers/create-instance';
export default () => (
<BrowserRouter>
<PageContainer>
@ -93,6 +95,63 @@ export default () => (
{/* Actions */}
<Switch>
{/* Create Instance */}
<Route
path="/instances/~create/"
exact
component={({ match }) => <Redirect to="/instances/~create/name" />}
/>
<Route
path="/instances/~create/name"
exact
component={() => <CreateInstance step="name" />}
/>
<Route
path="/instances/~create/image"
exact
component={() => <CreateInstance step="image" />}
/>
<Route
path="/instances/~create/package"
exact
component={() => <CreateInstance step="package" />}
/>
<Route
path="/instances/~create/tags"
exact
component={() => <CreateInstance step="tags" />}
/>
<Route
path="/instances/~create/metadata"
exact
component={() => <CreateInstance step="metadata" />}
/>
<Route
path="/instances/~create/networks"
exact
component={() => <CreateInstance step="networks" />}
/>
<Route
path="/instances/~create/firewall"
exact
component={() => <CreateInstance step="firewall" />}
/>
<Route
path="/instances/~create/cns"
exact
component={() => <CreateInstance step="cns" />}
/>
<Route
path="/instances/~create/affinity"
exact
component={() => <CreateInstance step="affinity" />}
/>
<Route
path="/instances/~create/summary"
exact
component={() => <CreateInstance step="summary" />}
/>
<Route
path="/instances/~resize/:instance"
exact

2
packages/ui-toolkit/src/breadcrumb/__tests__/__snapshots__/index.spec.js.snap
View File

@ -3,6 +3,7 @@
exports[`Breadcrumb Default Breadcrumb 1`] = `
.c5 {
color: rgba(73,73,73,1);
font-weight: normal;
line-height: 1.875rem;
font-size: 1.5rem;
margin: 0;
@ -259,6 +260,7 @@ exports[`Breadcrumb Default Breadcrumb 1`] = `
exports[`Breadcrumb Default Item 1`] = `
.c1 {
color: rgba(73,73,73,1);
font-weight: normal;
line-height: 1.875rem;
font-size: 1.5rem;
margin: 0;

3
packages/ui-toolkit/src/index.js
View File

@ -102,7 +102,8 @@ export {
Stop as StopIcon,
Tags as TagsIcon,
Triton as TritonIcon,
User as UserIcon
User as UserIcon,
Name as NameIcon
} from './icons';
export {

6
packages/ui-toolkit/src/text/__tests__/__snapshots__/text.spec.js.snap
View File

@ -8,7 +8,7 @@ exports[`Button H1 1`] = `
font-size: 2.25rem;
line-height: 2.8125rem;
font-style: normal;
font-stretch: normal;
font-weight: normal;
margin: 0;
}
@ -35,6 +35,7 @@ exports[`Button H1 1`] = `
exports[`Button H2 1`] = `
.c0 {
color: rgba(73,73,73,1);
font-weight: normal;
line-height: 1.875rem;
font-size: 1.5rem;
margin: 0;
@ -63,6 +64,7 @@ exports[`Button H2 1`] = `
exports[`Button H3 1`] = `
.c0 {
color: rgba(73,73,73,1);
font-weight: normal;
line-height: 1.625rem;
font-size: 1.3125rem;
margin: 0;
@ -120,6 +122,7 @@ exports[`Button H4 1`] = `
exports[`Button H5 1`] = `
.c0 {
color: rgba(73,73,73,1);
font-weight: normal;
line-height: 1.5rem;
font-size: 0.9375rem;
margin: 0;
@ -148,6 +151,7 @@ exports[`Button H5 1`] = `
exports[`Button H6 1`] = `
.c0 {
color: rgba(73,73,73,1);
font-weight: normal;
line-height: 1.125rem;
font-size: 0.8125rem;
margin: 0;

10
packages/ui-toolkit/src/text/headings.js
View File

@ -9,7 +9,7 @@ export const H1 = NH1.extend`
font-size: ${remcalc(36)};
line-height: ${remcalc(45)};
font-style: normal;
font-stretch: normal;
font-weight: normal;
margin: 0;
${is('inline')`
@ -37,7 +37,7 @@ export const H1 = NH1.extend`
export const H2 = styled.h2`
color: ${props => props.theme.text};
font-weight: normal;
line-height: ${remcalc(30)};
font-size: ${remcalc(24)};
margin: 0;
@ -67,7 +67,7 @@ export const H2 = styled.h2`
export const H3 = styled.h3`
color: ${props => props.theme.text};
font-weight: normal;
line-height: ${remcalc(26)};
font-size: ${remcalc(21)};
margin: 0;
@ -128,7 +128,7 @@ export const H4 = styled.h4`
export const H5 = styled.h4`
color: ${props => props.theme.text};
font-weight: normal;
line-height: ${remcalc(24)};
font-size: ${remcalc(15)};
margin: 0;
@ -158,7 +158,7 @@ export const H5 = styled.h4`
export const H6 = styled.h6`
color: ${props => props.theme.text};
font-weight: normal;
line-height: ${remcalc(18)};
font-size: ${remcalc(13)};
margin: 0;