feat(my-joy-beta): initial animations

This commit is contained in:
Sara Vieira 2018-01-30 15:50:19 +00:00 committed by Sérgio Ramos
parent f21123e9ac
commit 1e841b83a9
38 changed files with 257 additions and 389 deletions

View File

@ -65,7 +65,7 @@
"yargs": "^10.0.3"
},
"resolutions": {
"styled-components": "3.1.3",
"styled-components": "3.1.4",
"axios": "0.16.2",
"follow-redirects": "1.4.1",
"debug": "3.1.0",

View File

@ -20,7 +20,7 @@
"dependencies": {
"remcalc": "^1.0.10",
"rnd-id": "^2.0.2",
"styled-components": "^3.1.2"
"styled-components": "^3.1.4"
},
"devDependencies": {
"babel-cli": "^6.26.0",

View File

@ -46,20 +46,17 @@
"punycode": "^2.1.0",
"react": "^16.2.0",
"react-apollo": "^2.0.4",
"react-collapse": "^4.0.3",
"react-dom": "^16.2.0",
"react-motion": "^0.5.2",
"react-redux": "^5.0.6",
"react-redux-values": "^1.1.2",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"react-transition-group": "^2.2.1",
"redux": "^3.7.2",
"redux-actions": "^2.2.1",
"redux-form": "^7.2.1",
"remcalc": "^1.0.10",
"scroll-to-element": "^2.0.0",
"styled-components": "^3.1.2",
"styled-components": "^3.1.4",
"styled-components-spacing": "^2.1.3",
"styled-flex-component": "^2.1.0",
"title-case": "^2.1.1"

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.2 KiB

After

Width:  |  Height:  |  Size: 9.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 31 KiB

After

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 40 KiB

After

Width:  |  Height:  |  Size: 41 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 60 KiB

After

Width:  |  Height:  |  Size: 58 KiB

View File

@ -100,6 +100,7 @@ Array [
<div
className=""
id={undefined}
onClick={undefined}
>
<div
@ -257,6 +258,7 @@ Array [
<div
className=""
id={undefined}
onClick={false}
>
<div
@ -1789,6 +1791,7 @@ Array [
<div
className=""
id={undefined}
onClick={false}
>
<div
@ -2259,6 +2262,7 @@ Array [
<div
className=""
id={undefined}
onClick={undefined}
>
<div
@ -4614,6 +4618,7 @@ Array [
<div
className=""
id={undefined}
onClick={false}
>
<div

View File

@ -100,6 +100,7 @@ Array [
<div
className=""
id={undefined}
onClick={undefined}
>
<div
@ -257,6 +258,7 @@ Array [
<div
className=""
id={undefined}
onClick={undefined}
>
<div
@ -413,6 +415,7 @@ Array [
<div
className=""
id={undefined}
onClick={false}
>
<div
@ -748,11 +751,6 @@ Array [
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);
}
.c1:focus {
@ -781,23 +779,6 @@ Array [
pointer-events: none;
}
.c1:focus {
background-color: rgb(250,250,250);
border-color: rgb(216,216,216);
}
.c1:hover {
background-color: rgb(250,250,250);
border-color: rgb(250,250,250);
}
.c1:active,
.c1:active:hover,
.c1:active:focus {
background-color: rgb(250,250,250);
border-color: rgb(250,250,250);
}
.c0 {
margin-bottom: 1.5rem;
}
@ -807,7 +788,6 @@ Array [
>
<button
className="c1 c2 c3"
disabled={true}
href=""
onClick={undefined}
type="button"
@ -918,6 +898,7 @@ Array [
<div
className=""
id={undefined}
onClick={undefined}
>
<div
@ -1075,6 +1056,7 @@ Array [
<div
className=""
id={undefined}
onClick={false}
>
<div
@ -1281,23 +1263,23 @@ Array [
cursor: not-allowed;
}
.c17 {
.c16 {
color: rgba(73,73,73,1);
line-height: 1.5rem;
font-size: 0.9375rem;
margin: 0;
}
.c17 + p,
.c17 + small,
.c17 + h1,
.c17 + h2,
.c17 + label,
.c17 + h3,
.c17 + h4,
.c17 + h5,
.c17 + div,
.c17 + span {
.c16 + p,
.c16 + small,
.c16 + h1,
.c16 + h2,
.c16 + label,
.c16 + h3,
.c16 + h4,
.c16 + h5,
.c16 + div,
.c16 + span {
padding-bottom: 2.25rem;
}
@ -1329,7 +1311,7 @@ Array [
padding-left: 0.625rem;
}
.c13 {
.c12 {
color: rgba(73,73,73,1);
font-weight: 600;
line-height: 1.5rem;
@ -1337,20 +1319,20 @@ Array [
margin: 0;
}
.c13 + p,
.c13 + small,
.c13 + h1,
.c13 + h2,
.c13 + label,
.c13 + h3,
.c13 + h4,
.c13 + h5,
.c13 + div,
.c13 + span {
.c12 + p,
.c12 + small,
.c12 + h1,
.c12 + h2,
.c12 + label,
.c12 + h3,
.c12 + h4,
.c12 + h5,
.c12 + div,
.c12 + span {
margin-top: 0.75rem;
}
.c31 {
.c30 {
color: rgba(73,73,73,1);
font-weight: 600;
line-height: 1.5rem;
@ -1360,16 +1342,16 @@ Array [
color: rgb(255,255,255);
}
.c31 + p,
.c31 + small,
.c31 + h1,
.c31 + h2,
.c31 + label,
.c31 + h3,
.c31 + h4,
.c31 + h5,
.c31 + div,
.c31 + span {
.c30 + p,
.c30 + small,
.c30 + h1,
.c30 + h2,
.c30 + label,
.c30 + h3,
.c30 + h4,
.c30 + h5,
.c30 + div,
.c30 + span {
margin-top: 0.75rem;
}
@ -1547,7 +1529,7 @@ Array [
color: inherit;
}
.c14 {
.c13 {
box-sizing: content-box;
display: -webkit-box;
display: -webkit-flex;
@ -1583,15 +1565,15 @@ Array [
background-color: transparent;
}
.c14 > [name='card']:not(:last-child) {
.c13 > [name='card']:not(:last-child) {
margin-bottom: 0.8125rem;
}
.c14 > [name='card']:last-child {
.c13 > [name='card']:last-child {
margin-bottom: 0.4375rem;
}
.c24 {
.c23 {
box-sizing: content-box;
display: -webkit-box;
display: -webkit-flex;
@ -1619,7 +1601,7 @@ Array [
flex: 0 0 2.875rem;
}
.c25 {
.c24 {
box-sizing: content-box;
display: -webkit-box;
display: -webkit-flex;
@ -1657,12 +1639,12 @@ Array [
box-shadow: none;
}
.c25 button {
.c24 button {
margin-bottom: 0;
margin-top: 0;
}
.c26 {
.c25 {
box-sizing: content-box;
display: -webkit-box;
display: -webkit-flex;
@ -1721,7 +1703,7 @@ Array [
color: inherit;
}
.c28 {
.c27 {
box-sizing: content-box;
display: -webkit-box;
display: -webkit-flex;
@ -1759,12 +1741,12 @@ Array [
margin: -0.0625rem -0.0625rem 0 -0.0625rem;
}
.c28 button {
.c27 button {
margin-bottom: 0;
margin-top: 0;
}
.c29 {
.c28 {
box-sizing: content-box;
display: -webkit-box;
display: -webkit-flex;
@ -1820,7 +1802,7 @@ Array [
box-shadow: none;
}
.c30 {
.c29 {
box-sizing: content-box;
display: -webkit-box;
display: -webkit-flex;
@ -1956,7 +1938,7 @@ Array [
-webkit-padding-after: 0;
}
.c20 {
.c19 {
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
@ -1972,7 +1954,7 @@ Array [
flex-shrink: 1;
}
.c22 {
.c21 {
margin-right: 0.375rem;
}
@ -1980,33 +1962,28 @@ Array [
margin-bottom: 1.5rem;
}
.c16 {
.c15 {
margin-bottom: 1.125rem;
}
.c19 {
.c18 {
margin-right: 1.5rem;
}
.c23 {
.c22 {
margin-top: 1.125rem;
}
.c12 {
padding-right: 0rem;
padding-left: 0rem;
}
.c15 {
.c14 {
padding: 1.5rem;
}
.c27 {
.c26 {
padding-right: 1.125rem;
padding-left: 1.125rem;
}
.c18 {
.c17 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@ -2026,7 +2003,7 @@ Array [
align-content: stretch;
}
.c21 {
.c20 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@ -2133,50 +2110,46 @@ Array [
disabled={false}
name="card-header-meta"
>
<div
<h4
className="c12"
>
<h4
className="c13"
>
name
</h4>
</div>
name
</h4>
</div>
</div>
<div
className="c14"
className="c13"
name="card-outlet"
>
<div
className="c15"
className="c14"
>
<div
className="c16"
className="c15"
>
<p
className="c17"
className="c16"
>
description
</p>
</div>
<div
className="c18"
className="c17"
>
<div
className="c19"
className="c18"
>
<div
className="c20"
className="c19"
>
<div
className="c21"
className="c20"
>
<div
className="c20"
className="c19"
>
<div
className="c22"
className="c21"
>
<svg
className=""
@ -2199,10 +2172,10 @@ Array [
</div>
</div>
<div
className="c20"
className="c19"
>
<p
className="c17"
className="c16"
>
Private
</p>
@ -2211,19 +2184,19 @@ Array [
</div>
</div>
<div
className="c19"
className="c18"
>
<div
className="c20"
className="c19"
>
<div
className="c21"
className="c20"
>
<div
className="c20"
className="c19"
>
<div
className="c22"
className="c21"
>
<svg
height="16.2"
@ -2239,10 +2212,10 @@ Array [
</div>
</div>
<div
className="c20"
className="c19"
>
<p
className="c17"
className="c16"
>
Fabric network
</p>
@ -2250,165 +2223,31 @@ Array [
</div>
</div>
</div>
<div
className="c19"
>
<div
className="c20"
>
<div
className="c21"
>
<div
className="c20"
>
<div
className="c22"
>
<svg
className=""
height="17"
innerRef={undefined}
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
viewBox="0 0 17 17"
width="17"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(-1105 974)"
>
<g>
<g>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(1105 -974)"
xlinkHref="#c"
/>
</g>
<g>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(1111 -974)"
xlinkHref="#c"
/>
</g>
<g>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(1117 -974)"
xlinkHref="#c"
/>
</g>
<g>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(1105 -968)"
xlinkHref="#c"
/>
</g>
<g>
<g>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(1111 -968)"
xlinkHref="#d"
/>
</g>
</g>
<g>
<g>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(1117 -968)"
xlinkHref="#d"
/>
</g>
</g>
<g>
<g>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(1105 -962)"
xlinkHref="#d"
/>
</g>
</g>
<g>
<g>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(1111 -962)"
xlinkHref="#d"
/>
</g>
</g>
<g>
<g>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(1117 -962)"
xlinkHref="#d"
/>
</g>
</g>
</g>
</g>
<defs>
<path
d="M 2.5 5C 3.88071 5 5 3.88071 5 2.5C 5 1.11929 3.88071 0 2.5 0C 1.11929 0 0 1.11929 0 2.5C 0 3.88071 1.11929 5 2.5 5Z"
id="c"
/>
<path
d="M 2.5 1C 3.3 1 4 1.7 4 2.5C 4 3.3 3.3 4 2.5 4C 1.7 4 1 3.3 1 2.5C 1 1.7 1.7 1 2.5 1ZM 2.5 0C 1.1 0 0 1.1 0 2.5C 0 3.9 1.1 5 2.5 5C 3.9 5 5 3.9 5 2.5C 5 1.1 3.9 0 2.5 0Z"
id="d"
/>
</defs>
</svg>
</div>
</div>
<div
className="c20"
>
<p
className="c17"
>
0 instances
</p>
</div>
</div>
</div>
</div>
</div>
<div
className="c23"
className="c22"
>
<div
className="c24"
className="c23"
disabled={false}
name="card"
>
<div
className="c25"
className="c24"
disabled={false}
name="card-header"
onClick={[Function]}
>
<div
className="c26"
className="c25"
disabled={false}
name="card-header-meta"
>
<div
className="c27"
className="c26"
>
<p
className="c17"
className="c16"
>
Network information
</p>
@ -2462,12 +2301,12 @@ Array [
name="card"
>
<div
className="c28"
className="c27"
disabled={false}
name="card-header"
>
<div
className="c29"
className="c28"
disabled={false}
name="card-header-box"
>
@ -2505,54 +2344,50 @@ Array [
</div>
</div>
<div
className="c30"
className="c29"
disabled={false}
name="card-header-meta"
>
<div
className="c12"
<h4
className="c30"
>
<h4
className="c31"
>
name2
</h4>
</div>
name2
</h4>
</div>
</div>
<div
className="c14"
className="c13"
name="card-outlet"
>
<div
className="c15"
className="c14"
>
<div
className="c16"
className="c15"
>
<p
className="c17"
className="c16"
>
description2
</p>
</div>
<div
className="c18"
className="c17"
>
<div
className="c19"
className="c18"
>
<div
className="c20"
className="c19"
>
<div
className="c21"
className="c20"
>
<div
className="c20"
className="c19"
>
<div
className="c22"
className="c21"
>
<svg
className=""
@ -2575,10 +2410,10 @@ Array [
</div>
</div>
<div
className="c20"
className="c19"
>
<p
className="c17"
className="c16"
>
Private
</p>
@ -2587,19 +2422,19 @@ Array [
</div>
</div>
<div
className="c19"
className="c18"
>
<div
className="c20"
className="c19"
>
<div
className="c21"
className="c20"
>
<div
className="c20"
className="c19"
>
<div
className="c22"
className="c21"
>
<svg
height="13"
@ -2615,10 +2450,10 @@ Array [
</div>
</div>
<div
className="c20"
className="c19"
>
<p
className="c17"
className="c16"
>
Data center network
</p>
@ -2709,11 +2544,6 @@ Array [
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);
}
.c1:focus {
@ -2742,23 +2572,6 @@ Array [
pointer-events: none;
}
.c1:focus {
background-color: rgb(250,250,250);
border-color: rgb(216,216,216);
}
.c1:hover {
background-color: rgb(250,250,250);
border-color: rgb(250,250,250);
}
.c1:active,
.c1:active:hover,
.c1:active:focus {
background-color: rgb(250,250,250);
border-color: rgb(250,250,250);
}
.c0 {
margin-bottom: 1.5rem;
}
@ -2768,7 +2581,6 @@ Array [
>
<button
className="c1 c2 c3"
disabled={true}
href=""
onClick={undefined}
type="button"
@ -2879,6 +2691,7 @@ Array [
<div
className=""
id={undefined}
onClick={false}
>
<div

View File

@ -100,6 +100,7 @@ Array [
<div
className=""
id={undefined}
onClick={undefined}
>
<div
@ -250,6 +251,7 @@ Array [
<div
className=""
id={undefined}
onClick={false}
>
<div
@ -1755,6 +1757,7 @@ Array [
<div
className=""
id={undefined}
onClick={false}
>
<div
@ -2242,6 +2245,7 @@ Array [
<div
className=""
id={undefined}
onClick={undefined}
>
<div
@ -2392,6 +2396,7 @@ Array [
<div
className=""
id={undefined}
onClick={false}
>
<div

View File

@ -100,6 +100,7 @@ Array [
<div
className=""
id={undefined}
onClick={undefined}
>
<div
@ -1214,6 +1215,7 @@ Array [
<div
className=""
id={undefined}
onClick={undefined}
>
<div
@ -2634,6 +2636,7 @@ Array [
<div
className=""
id={undefined}
onClick={undefined}
>
<div
@ -3090,6 +3093,7 @@ Array [
<div
className=""
id={undefined}
onClick={undefined}
>
<div
@ -4302,6 +4306,7 @@ Array [
<div
className=""
id={undefined}
onClick={undefined}
>
<div
@ -5656,6 +5661,7 @@ Array [
<div
className=""
id={undefined}
onClick={undefined}
>
<div
@ -7010,6 +7016,7 @@ Array [
<div
className=""
id={undefined}
onClick={false}
>
<div

View File

@ -48,18 +48,23 @@ export const Affinity = ({
step
}) => (
<Fragment>
<Title id={step} onClick={!expanded && !proceeded && handleEdit} icon={<AffinityIcon />}>
<Title
id={step}
onClick={!expanded && !proceeded && handleEdit}
icon={<AffinityIcon />}
>
Affinity
</Title>
{expanded ? (
<Description>
Control placement of instances on the physical servers. Design applications to adapt at
failure by distributing application components. Instances are only provisioned when the
exact criteria is met.{' '}
Control placement of instances on the physical servers. Design
applications to adapt at failure by distributing application components.
Instances are only provisioned when the exact criteria is met.{' '}
<a
target="__blank"
href="https://docs.joyent.com/public-cloud/instances/docker/how/start-containers#controlling-container-placement"
rel="noopener noreferrer">
rel="noopener noreferrer"
>
Read the docs
</a>
</Description>
@ -76,7 +81,8 @@ export const Affinity = ({
initialValues={rule}
destroyOnUnmount={false}
forceUnregisterOnUnmount={true}
onSubmit={newValue => handleUpdateAffinityRule(index, newValue)}>
onSubmit={newValue => handleUpdateAffinityRule(index, newValue)}
>
{props => (
<KeyValue
{...props}
@ -97,7 +103,8 @@ export const Affinity = ({
form={FORM_NAME_CREATE}
destroyOnUnmount={false}
forceUnregisterOnUnmount={true}
onSubmit={handleAddAffinityRules}>
onSubmit={handleAddAffinityRules}
>
{props => (
<KeyValue
{...props}
@ -115,7 +122,11 @@ export const Affinity = ({
{expanded ? (
<Fragment>
{affinityRules.length === 0 ? (
<Button type="button" onClick={() => handleChangeAddOpen(true)} secondary>
<Button
type="button"
onClick={() => handleChangeAddOpen(true)}
secondary
>
Create Affinity Rule
</Button>
) : null}
@ -150,7 +161,9 @@ export default compose(
})),
connect(null, (dispatch, { affinityRules = [], history }) => ({
handleNext: () => {
dispatch(set({ name: 'create-instance-affinity-proceeded', value: true }));
dispatch(
set({ name: 'create-instance-affinity-proceeded', value: true })
);
return history.push(`/instances/~create/summary`);
},
@ -165,10 +178,16 @@ export default compose(
const appendAffinityRule = set({
name: `create-instance-affinity`,
value: affinityRules.concat([{ ...RULE_DEFAULTS, ...rule, expanded: false }])
value: affinityRules.concat([
{ ...RULE_DEFAULTS, ...rule, expanded: false }
])
});
return dispatch([destroy(FORM_NAME_CREATE), toggleToClosed, appendAffinityRule]);
return dispatch([
destroy(FORM_NAME_CREATE),
toggleToClosed,
appendAffinityRule
]);
},
handleUpdateAffinityRule: (index, newAffinityRule) => {
affinityRules[index] = {

View File

@ -1,6 +1,4 @@
import React, { Component, Fragment } from 'react';
import styled, { keyframes } from 'styled-components';
import is from 'styled-is';
import React, { Component } from 'react';
import scrollToElement from 'scroll-to-element';
import ReactDOM from 'react-dom';
@ -52,7 +50,8 @@ const AnimatedWrapper = WrappedComponent =>
<div
ref={w => {
this.wrapper = w;
}}>
}}
>
<WrappedComponent {...this.props} />
</div>
);

View File

@ -68,7 +68,8 @@ const Firewall = ({
tagRules={tagRules}
enabled={enabled}
/>
) : null}
) : null
}
</ReduxForm>
) : null}
{proceeded && !expanded ? (

View File

@ -34,17 +34,23 @@ export const Metadata = ({
step
}) => (
<Fragment>
<Title id={step} onClick={!expanded && !proceeded && handleEdit} icon={<MetadataIcon />}>
<Title
id={step}
onClick={!expanded && !proceeded && handleEdit}
icon={<MetadataIcon />}
>
Metadata
</Title>
{expanded ? (
<Description>
Metadata can be used to pass data to the instance. It can also be used to inject a custom
boot script. Unlike tags, metadata is only viewable inside the instance.{' '}
Metadata can be used to pass data to the instance. It can also be used
to inject a custom boot script. Unlike tags, metadata is only viewable
inside the instance.{' '}
<a
target="__blank"
href="https://docs.joyent.com/public-cloud/tags-metadata/metadata"
rel="noopener noreferrer">
rel="noopener noreferrer"
>
Read the docs
</a>
</Description>
@ -63,7 +69,8 @@ export const Metadata = ({
initialValues={{ name, value }}
destroyOnUnmount={false}
forceUnregisterOnUnmount={true}
onSubmit={newValue => handleUpdateMetadata(index, newValue)}>
onSubmit={newValue => handleUpdateMetadata(index, newValue)}
>
{props => (
<KeyValue
{...props}
@ -72,7 +79,9 @@ export const Metadata = ({
method="edit"
input="textarea"
type="metadata"
onToggleExpanded={() => (expanded ? handleToggleExpanded(index) : null)}
onToggleExpanded={() =>
expanded ? handleToggleExpanded(index) : null
}
onCancel={() => handleCancelEdit(index)}
onRemove={() => handleRemoveMetadata(index)}
/>
@ -84,7 +93,8 @@ export const Metadata = ({
form={FORM_NAME_CREATE}
destroyOnUnmount={false}
forceUnregisterOnUnmount={true}
onSubmit={handleAddMetadata}>
onSubmit={handleAddMetadata}
>
{props => (
<KeyValue
{...props}
@ -100,7 +110,11 @@ export const Metadata = ({
<div>
{expanded ? (
<Margin bottom={4}>
<Button type="button" onClick={() => handleChangeAddOpen(true)} secondary>
<Button
type="button"
onClick={() => handleChangeAddOpen(true)}
secondary
>
Add Metadata
</Button>
<Button type="button" onClick={handleNext}>
@ -127,7 +141,9 @@ export default compose(
})),
connect(null, (dispatch, { metadata = [], history }) => ({
handleNext: () => {
dispatch(set({ name: 'create-instance-metadata-proceeded', value: true }));
dispatch(
set({ name: 'create-instance-metadata-proceeded', value: true })
);
return history.push('/instances/~create/user-script');
},
@ -145,7 +161,11 @@ export default compose(
value: metadata.concat([{ ...value, open: false }])
});
return dispatch([destroy(FORM_NAME_CREATE), toggleToClosed, appendMetadata]);
return dispatch([
destroy(FORM_NAME_CREATE),
toggleToClosed,
appendMetadata
]);
},
handleUpdateMetadata: (index, newMetadata) => {
metadata[index] = {

View File

@ -72,7 +72,8 @@ const NameContainer = ({
Edit
</Button>
</Fragment>
) : null}
) : null
}
</ReduxForm>
</Fragment>
);

View File

@ -31,19 +31,24 @@ export const Networks = ({
step
}) => (
<Fragment>
<Title id={step} onClick={!expanded && !proceeded && handleEdit} icon={<NetworkIcon />}>
<Title
id={step}
onClick={!expanded && !proceeded && handleEdit}
icon={<NetworkIcon />}
>
Networks
</Title>
{expanded ? (
<Description>
Instances are automatically connected to a private fabric network, which is the best choice
for internal communication within your application. Data center networks are the best choice
for exposing your application to the public internet (if the data center network is a public
network).{' '}
Instances are automatically connected to a private fabric network, which
is the best choice for internal communication within your application.
Data center networks are the best choice for exposing your application
to the public internet (if the data center network is a public network).{' '}
<a
target="__blank"
href="https://docs.joyent.com/public-cloud/network/sdn"
rel="noopener noreferrer">
rel="noopener noreferrer"
>
Read more
</a>
</Description>
@ -55,7 +60,11 @@ export const Networks = ({
) : null}
{loading && expanded ? <StatusLoader /> : null}
{!loading ? (
<ReduxForm form={FORM_NAME} destroyOnUnmount={false} forceUnregisterOnUnmount={true}>
<ReduxForm
form={FORM_NAME}
destroyOnUnmount={false}
forceUnregisterOnUnmount={true}
>
{props => (
<form>
{networks.map(
@ -69,7 +78,9 @@ export const Networks = ({
machinesExpanded={machinesExpanded}
small={!expanded && selected}
onInfoClick={() => setInfoExpanded(id, !infoExpanded)}
onMachinesClick={() => setMachinesExpanded(id, !machinesExpanded)}
onMachinesClick={() =>
setMachinesExpanded(id, !machinesExpanded)
}
{...network}
/>
) : null
@ -80,7 +91,7 @@ export const Networks = ({
) : null}
<Margin bottom={4}>
{expanded ? (
<Button type="button" disabled={!selected.length} onClick={handleNext}>
<Button type="button" onClick={handleNext}>
Next
</Button>
) : proceeded ? (
@ -115,9 +126,20 @@ export default compose(
.map(({ id, name, ...network }) => ({
...network,
name,
selected: empty(id) && name === 'Joyent-SDC-Public' ? true : Boolean(selected[id]),
infoExpanded: get(values, `create-instance-networks-${id}-info-expanded`, false),
machinesExpanded: get(values, `create-instance-networks-${id}-machines-expanded`, false),
selected:
empty(id) && name === 'Joyent-SDC-Public'
? true
: Boolean(selected[id]),
infoExpanded: get(
values,
`create-instance-networks-${id}-info-expanded`,
false
),
machinesExpanded: get(
values,
`create-instance-networks-${id}-machines-expanded`,
false
),
id
}))
.sort((a, b) => a.name < b.name);
@ -128,8 +150,15 @@ export default compose(
.map(({ id, name, ...network }) => ({
...network,
name,
selected: empty(id) && name === 'Joyent-SDC-Public' ? true : Boolean(selected[id]),
infoExpanded: get(values, `create-instance-networks-${id}-expanded`, false),
selected:
empty(id) && name === 'Joyent-SDC-Public'
? true
: Boolean(selected[id]),
infoExpanded: get(
values,
`create-instance-networks-${id}-expanded`,
false
),
id
}))
.sort((a, b) => a.name < b.name)
@ -137,7 +166,9 @@ export default compose(
},
(dispatch, { history }) => ({
handleNext: () => {
dispatch(set({ name: 'create-instance-networks-proceeded', value: true }));
dispatch(
set({ name: 'create-instance-networks-proceeded', value: true })
);
return history.push('/instances/~create/firewall');
},

View File

@ -59,7 +59,8 @@ export const UserScript = ({
onRemove={handleRemove}
onlyValue
/>
)}
)
}
</ReduxForm>
<div>
{expanded ? (

Binary file not shown.

Before

Width:  |  Height:  |  Size: 30 KiB

After

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 42 KiB

After

Width:  |  Height:  |  Size: 42 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 48 KiB

After

Width:  |  Height:  |  Size: 48 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 38 KiB

After

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.1 KiB

After

Width:  |  Height:  |  Size: 9.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 16 KiB

View File

@ -3,5 +3,6 @@ module.exports = {
'^redux-form$': '<rootDir>/src/mocks/redux-form',
'^react-responsive$': '<rootDir>/src/mocks/react-responsive',
'^react-router-dom$': '<rootDir>/src/mocks/react-router-dom',
'^declarative-redux-form$': '<rootDir>/src/mocks/declarative-redux-form'
'^declarative-redux-form$': '<rootDir>/src/mocks/declarative-redux-form',
'^scroll-to-element': '<rootDir>/src/mocks/scroll-to-element'
};

View File

@ -0,0 +1 @@
export default () => null;

View File

@ -38,7 +38,7 @@
"react-styled-flexboxgrid": "^2.1.1",
"remcalc": "^1.0.10",
"rnd-id": "^2.0.2",
"styled-components": "^3.1.2",
"styled-components": "^3.1.4",
"styled-is": "^1.1.2",
"unitcalc": "^1.1.2"
},

View File

@ -28,7 +28,7 @@
"react-scripts": "1.0.17",
"redux": "^3.7.2",
"redux-form": "^7.1.2",
"styled-components": "^2.3.0"
"styled-components": "^3.1.4"
},
"devDependencies": {
"babel-preset-joyent-portal": "^6.0.1",

View File

@ -2195,10 +2195,6 @@ center-align@^0.1.1:
align-text "^0.1.3"
lazy-cache "^1.0.3"
chain-function@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/chain-function/-/chain-function-1.0.0.tgz#0d4ab37e7e18ead0bdc47b920764118ce58733dc"
chalk@1.1.3, chalk@^1.0.0, chalk@^1.1.0, chalk@^1.1.1, chalk@^1.1.3:
version "1.1.3"
resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
@ -3457,10 +3453,6 @@ dom-converter@~0.1:
dependencies:
utila "~0.3"
dom-helpers@^3.2.0:
version "3.3.1"
resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.3.1.tgz#fc1a4e15ffdf60ddde03a480a9c0fece821dd4a6"
dom-serializer@0:
version "0.1.0"
resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.1.0.tgz#073c697546ce0780ce23be4a28e293e40bc30c82"
@ -8550,7 +8542,7 @@ quotation@^1.0.0, quotation@^1.0.1, quotation@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/quotation/-/quotation-1.1.0.tgz#3f9c9b2e7780856f27c5015bec628d690e82c70d"
raf@3.4.0, raf@^3.1.0:
raf@3.4.0:
version "3.4.0"
resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.0.tgz#a28876881b4bc2ca9117d4138163ddb80f781575"
dependencies:
@ -8643,12 +8635,6 @@ react-codemirror2@^3.0.3, react-codemirror2@^3.0.7:
version "3.0.7"
resolved "https://registry.yarnpkg.com/react-codemirror2/-/react-codemirror2-3.0.7.tgz#d5d9888158263ae56da766539d7803486566ab9f"
react-collapse@^4.0.3:
version "4.0.3"
resolved "https://registry.yarnpkg.com/react-collapse/-/react-collapse-4.0.3.tgz#b96de959ed0092a43534630b599a4753dd76d543"
dependencies:
prop-types "^15.5.8"
react-create-component-from-tag-prop@^1.2.1:
version "1.3.1"
resolved "https://registry.yarnpkg.com/react-create-component-from-tag-prop/-/react-create-component-from-tag-prop-1.3.1.tgz#5389407d99f88ba2b36351780a6094470b44a7c7"
@ -8761,14 +8747,6 @@ react-icons@^2.2.7:
dependencies:
react-icon-base "2.1.0"
react-motion@^0.5.2:
version "0.5.2"
resolved "https://registry.yarnpkg.com/react-motion/-/react-motion-0.5.2.tgz#0dd3a69e411316567927917c6626551ba0607316"
dependencies:
performance-now "^0.2.0"
prop-types "^15.5.8"
raf "^3.1.0"
react-popper@^0.7.5:
version "0.7.5"
resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-0.7.5.tgz#71c25946f291db381231281f6b95729e8b801596"
@ -8951,17 +8929,6 @@ react-test-renderer@^16.2.0:
object-assign "^4.1.1"
prop-types "^15.6.0"
react-transition-group@^2.2.1:
version "2.2.1"
resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.2.1.tgz#e9fb677b79e6455fd391b03823afe84849df4a10"
dependencies:
chain-function "^1.0.0"
classnames "^2.2.5"
dom-helpers "^3.2.0"
loose-envify "^1.3.1"
prop-types "^15.5.8"
warning "^3.0.0"
react@16.2.0, react@^0.14.0, react@^15.5.4, react@^16.2.0:
version "16.2.0"
resolved "https://registry.yarnpkg.com/react/-/react-16.2.0.tgz#a31bd2dab89bff65d42134fa187f24d054c273ba"
@ -10387,9 +10354,9 @@ styled-components-spacing@^2.1.3:
react-create-component-from-tag-prop "^1.2.1"
styled-components-breakpoint "^1.0.0-preview.3"
styled-components@2.2.4, styled-components@3.1.3, styled-components@^3.1.2:
version "3.1.3"
resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-3.1.3.tgz#dae16953fdfc694b7341c43934145c360da0accb"
styled-components@2.2.4, styled-components@3.1.4, styled-components@^3.1.4:
version "3.1.4"
resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-3.1.4.tgz#1bdc1409c9bacafee3510c573d23b73039b0d875"
dependencies:
buffer "^5.0.3"
css-to-react-native "^2.0.3"