feat(my-joy-beta): add validation

fixes #1244
This commit is contained in:
Sara Vieira 2018-02-23 17:57:13 +00:00 committed by Sérgio Ramos
parent 9e67c3ab67
commit 7d618d9992
63 changed files with 7596 additions and 6073 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 16 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: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 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: 20 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 13 KiB

View File

@ -5,7 +5,8 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
margin-top: 0.1875rem;
}
.c6 {
.c7 {
margin-top: 1.3125rem;
margin-left: 0.75rem;
}
@ -30,10 +31,6 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-align-items: flex-end;
-webkit-box-align: flex-end;
-ms-flex-align: flex-end;
align-items: flex-end;
}
.c1 {
@ -53,7 +50,7 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
display: block;
}
.c9 {
.c10 {
font-family: sans-serif;
font-size: 100%;
line-height: 1.15;
@ -66,36 +63,36 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
min-width: 7.5rem;
}
.c9::-moz-focus-inner,
.c9[type='button']::-moz-focus-inner,
.c9[type='reset']::-moz-focus-inner,
.c9[type='submit']::-moz-focus-inner {
.c10::-moz-focus-inner,
.c10[type='button']::-moz-focus-inner,
.c10[type='reset']::-moz-focus-inner,
.c10[type='submit']::-moz-focus-inner {
border-style: none;
padding: 0;
}
.c9:-moz-focusring,
.c9[type='button']:-moz-focusring,
.c9[type='reset']:-moz-focusring,
.c9[type='submit']:-moz-focusring {
.c10:-moz-focusring,
.c10[type='button']:-moz-focusring,
.c10[type='reset']:-moz-focusring,
.c10[type='submit']:-moz-focusring {
outline: 0.0625rem dotted ButtonText;
}
.c10 + button,
.c10 + a {
margin-left: 0.375rem;
}
.c9 {
display: inline-block;
}
.c9 + button,
.c9 + a {
margin-left: 0.375rem;
}
.c8 {
display: inline-block;
}
.c8 + button,
.c8 + a {
margin-left: 0.375rem;
}
.c7 {
box-sizing: border-box;
display: inline-block;
-webkit-box-pack: center;
@ -135,7 +132,7 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
border: solid 0.0625rem rgb(45,56,132);
}
.c7:focus {
.c8:focus {
outline: 0;
-webkit-text-decoration: none;
text-decoration: none;
@ -143,21 +140,21 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
border-color: rgb(45,56,132);
}
.c7:hover {
.c8:hover {
background-color: rgb(72,83,217);
border: solid 0.0625rem rgb(45,56,132);
}
.c7:active,
.c7:active:hover,
.c7:active:focus {
.c8:active,
.c8:active:hover,
.c8:active:focus {
background-image: none;
outline: 0;
background-color: rgb(45,56,132);
border-color: rgb(45,56,132);
}
.c7[disabled] {
.c8[disabled] {
cursor: not-allowed;
pointer-events: none;
}
@ -176,7 +173,21 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
font-size: 0.8125rem;
}
.c11 {
.c6 {
font-size: 0.9375rem;
line-height: 1.125rem;
font-style: normal;
font-stretch: normal;
display: block;
color: rgb(70,70,70);
text-align: left;
float: right;
font-size: 0.8125rem;
float: none;
width: 18.75rem;
}
.c12 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
@ -195,7 +206,7 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
margin-left: -0.625rem;
}
.c10 {
.c11 {
background-color: rgb(216,216,216);
margin: 0;
background-color: transparent;
@ -227,8 +238,6 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1);
max-width: 22.1875rem;
text-overflow: ellipsis;
font-size: 0.9375rem;
line-height: normal !important;
font-style: normal;
@ -237,6 +246,13 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
-moz-appearance: none;
appearance: none;
outline: 0;
max-width: 22.1875rem;
text-overflow: ellipsis;
}
.c5:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c5::-webkit-input-placeholder {
@ -273,11 +289,6 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
color: rgba(73,73,73,0.5);
}
.c5:focus {
border-color: rgb(59,70,204);
outline: 0;
}
<form
onSubmit={undefined}
>
@ -311,6 +322,9 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
placeholder="Example: mySQLdb"
required={true}
/>
<label
className="c6"
/>
</div>
</div>
</div>
@ -318,17 +332,18 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
className="c1"
>
<div
className="c6"
className="c7"
>
<button
className="c7 c8 c9"
className="c8 c9 c10"
disabled={undefined}
href=""
type="submit"
>
Add
</button>
<div
className="c10 c11"
className="c11 c12"
height="0.25rem"
/>
</div>
@ -342,7 +357,8 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
margin-top: 0.1875rem;
}
.c6 {
.c7 {
margin-top: 1.3125rem;
margin-left: 0.75rem;
}
@ -367,10 +383,6 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-align-items: flex-end;
-webkit-box-align: flex-end;
-ms-flex-align: flex-end;
align-items: flex-end;
}
.c1 {
@ -390,7 +402,7 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
display: block;
}
.c9 {
.c10 {
font-family: sans-serif;
font-size: 100%;
line-height: 1.15;
@ -403,36 +415,36 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
min-width: 7.5rem;
}
.c9::-moz-focus-inner,
.c9[type='button']::-moz-focus-inner,
.c9[type='reset']::-moz-focus-inner,
.c9[type='submit']::-moz-focus-inner {
.c10::-moz-focus-inner,
.c10[type='button']::-moz-focus-inner,
.c10[type='reset']::-moz-focus-inner,
.c10[type='submit']::-moz-focus-inner {
border-style: none;
padding: 0;
}
.c9:-moz-focusring,
.c9[type='button']:-moz-focusring,
.c9[type='reset']:-moz-focusring,
.c9[type='submit']:-moz-focusring {
.c10:-moz-focusring,
.c10[type='button']:-moz-focusring,
.c10[type='reset']:-moz-focusring,
.c10[type='submit']:-moz-focusring {
outline: 0.0625rem dotted ButtonText;
}
.c10 + button,
.c10 + a {
margin-left: 0.375rem;
}
.c9 {
display: inline-block;
}
.c9 + button,
.c9 + a {
margin-left: 0.375rem;
}
.c8 {
display: inline-block;
}
.c8 + button,
.c8 + a {
margin-left: 0.375rem;
}
.c7 {
box-sizing: border-box;
display: inline-block;
-webkit-box-pack: center;
@ -470,9 +482,14 @@ exports[`renders <AddServiceForm pristine /> 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);
}
.c7:focus {
.c8:focus {
outline: 0;
-webkit-text-decoration: none;
text-decoration: none;
@ -480,25 +497,42 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
border-color: rgb(45,56,132);
}
.c7:hover {
.c8:hover {
background-color: rgb(72,83,217);
border: solid 0.0625rem rgb(45,56,132);
}
.c7:active,
.c7:active:hover,
.c7:active:focus {
.c8:active,
.c8:active:hover,
.c8:active:focus {
background-image: none;
outline: 0;
background-color: rgb(45,56,132);
border-color: rgb(45,56,132);
}
.c7[disabled] {
.c8[disabled] {
cursor: not-allowed;
pointer-events: none;
}
.c8:focus {
background-color: rgb(250,250,250);
border-color: rgb(216,216,216);
}
.c8:hover {
background-color: rgb(250,250,250);
border-color: rgb(250,250,250);
}
.c8:active,
.c8:active:hover,
.c8:active:focus {
background-color: rgb(250,250,250);
border-color: rgb(250,250,250);
}
.c3 {
font-size: 0.9375rem;
line-height: 1.125rem;
@ -513,7 +547,21 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
font-size: 0.8125rem;
}
.c11 {
.c6 {
font-size: 0.9375rem;
line-height: 1.125rem;
font-style: normal;
font-stretch: normal;
display: block;
color: rgb(70,70,70);
text-align: left;
float: right;
font-size: 0.8125rem;
float: none;
width: 18.75rem;
}
.c12 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
@ -532,7 +580,7 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
margin-left: -0.625rem;
}
.c10 {
.c11 {
background-color: rgb(216,216,216);
margin: 0;
background-color: transparent;
@ -564,8 +612,6 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1);
max-width: 22.1875rem;
text-overflow: ellipsis;
font-size: 0.9375rem;
line-height: normal !important;
font-style: normal;
@ -574,6 +620,13 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
-moz-appearance: none;
appearance: none;
outline: 0;
max-width: 22.1875rem;
text-overflow: ellipsis;
}
.c5:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c5::-webkit-input-placeholder {
@ -610,11 +663,6 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
color: rgba(73,73,73,0.5);
}
.c5:focus {
border-color: rgb(59,70,204);
outline: 0;
}
<form
onSubmit={undefined}
>
@ -648,6 +696,9 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
placeholder="Example: mySQLdb"
required={true}
/>
<label
className="c6"
/>
</div>
</div>
</div>
@ -655,17 +706,18 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
className="c1"
>
<div
className="c6"
className="c7"
>
<button
className="c7 c8 c9"
className="c8 c9 c10"
disabled={true}
href=""
type="submit"
>
Add
</button>
<div
className="c10 c11"
className="c11 c12"
height="0.25rem"
/>
</div>
@ -809,12 +861,6 @@ exports[`renders <Hostname values /> without throwing 1`] = `
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
color: rgb(250,250,250);
background-color: rgb(250,250,250);
color: rgb(216,216,216);
cursor: not-allowed;
font-family: "Roboto Mono",monospace;
width: 100%;
min-width: 100%;
font-size: 0.9375rem;
line-height: normal !important;
font-style: normal;
@ -823,6 +869,17 @@ exports[`renders <Hostname values /> without throwing 1`] = `
-moz-appearance: none;
appearance: none;
outline: 0;
background-color: rgb(250,250,250);
color: rgb(216,216,216);
cursor: not-allowed;
font-family: "Roboto Mono",monospace;
width: 100%;
min-width: 100%;
}
.c8:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c8::-webkit-input-placeholder {
@ -887,11 +944,6 @@ exports[`renders <Hostname values /> without throwing 1`] = `
color: rgba(73,73,73,1);
}
.c8:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c2 {
padding-right: 0.75rem;
margin-right: 0.75rem;

View File

@ -4990,8 +4990,6 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1);
font-family: "Roboto Mono",monospace;
max-width: 22.1875rem;
font-size: 0.9375rem;
line-height: normal !important;
font-style: normal;
@ -5000,10 +4998,17 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
-moz-appearance: none;
appearance: none;
outline: 0;
font-family: "Roboto Mono",monospace;
max-width: 22.1875rem;
width: 22.1875rem;
max-width: 100%;
}
.c31:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c31::-webkit-input-placeholder {
color: rgba(73,73,73,0.5);
}
@ -5054,11 +5059,6 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
color: rgba(73,73,73,1);
}
.c31:focus {
border-color: rgb(59,70,204);
outline: 0;
}
@media only screen and (min-width:0em) {
.c1 {
-webkit-flex-basis: 100%;

View File

@ -19,7 +19,8 @@ import {
FormLabel,
PublicIcon,
PrivateIcon,
CopiableField
CopiableField,
FormMeta
} from 'joyent-ui-toolkit';
import Tag from '@components/tags';
@ -79,10 +80,11 @@ export const AddServiceForm = ({
handleSubmit,
submitting,
disabled,
pristine
pristine,
invalid
}) => (
<form onSubmit={handleSubmit}>
<Flex alignEnd wrap>
<Flex wrap>
<FlexItem>
<FormGroup name="name" field={Field}>
<FormLabel>Attach to new CNS service name</FormLabel>
@ -94,12 +96,18 @@ export const AddServiceForm = ({
required
disabled={disabled || submitting}
/>
<FormMeta />
</Margin>
</FormGroup>
</FlexItem>
<FlexItem>
<Margin left={2}>
<Button type="submit" loading={submitting} inline>
<Margin top={3.5} left={2}>
<Button
type="submit"
disabled={pristine || invalid}
loading={submitting}
inline
>
Add
</Button>
<Divider height={remcalc(4)} transparent />

View File

@ -178,6 +178,20 @@ exports[`renders <Rule/> without throwing 1`] = `
display: none;
}
.c16 {
font-size: 0.9375rem;
line-height: 1.125rem;
font-style: normal;
font-stretch: normal;
display: block;
color: rgb(70,70,70);
text-align: left;
float: right;
font-size: 0.8125rem;
float: none;
width: 18.75rem;
}
.c2 {
color: rgba(73,73,73,1);
font-weight: normal;
@ -212,6 +226,14 @@ exports[`renders <Rule/> without throwing 1`] = `
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1);
font-size: 0.9375rem;
line-height: normal !important;
font-style: normal;
font-stretch: normal;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
border: none;
border-bottom: 0.0625rem solid rgba(73,73,73,1);
border-radius: 0;
@ -226,13 +248,10 @@ exports[`renders <Rule/> without throwing 1`] = `
min-height: 0;
max-width: 22.1875rem;
text-overflow: ellipsis;
font-size: 0.9375rem;
line-height: normal !important;
font-style: normal;
font-stretch: normal;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.c15:focus {
border-color: rgb(59,70,204);
outline: 0;
}
@ -270,11 +289,6 @@ exports[`renders <Rule/> without throwing 1`] = `
color: rgba(73,73,73,0.5);
}
.c15:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c4 {
position: relative;
display: -webkit-inline-box;
@ -354,6 +368,14 @@ exports[`renders <Rule/> without throwing 1`] = `
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1);
font-size: 0.9375rem;
line-height: normal !important;
font-style: normal;
font-stretch: normal;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
border: none;
border-bottom: 0.0625rem solid rgba(73,73,73,1);
border-radius: 0;
@ -370,13 +392,10 @@ exports[`renders <Rule/> without throwing 1`] = `
width: 4.125rem;
max-width: 4.125rem;
text-overflow: ellipsis;
font-size: 0.9375rem;
line-height: normal !important;
font-style: normal;
font-stretch: normal;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.c6:focus {
border-color: rgb(59,70,204);
outline: 0;
}
@ -414,11 +433,6 @@ exports[`renders <Rule/> without throwing 1`] = `
color: rgba(73,73,73,0.5);
}
.c6:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c8 {
box-sizing: border-box;
width: 18.75rem;
@ -429,6 +443,14 @@ exports[`renders <Rule/> without throwing 1`] = `
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1);
font-size: 0.9375rem;
line-height: normal !important;
font-style: normal;
font-stretch: normal;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
border: none;
border-bottom: 0.0625rem solid rgba(73,73,73,1);
border-radius: 0;
@ -445,13 +467,10 @@ exports[`renders <Rule/> without throwing 1`] = `
width: 6.25rem;
max-width: 6.25rem;
text-overflow: ellipsis;
font-size: 0.9375rem;
line-height: normal !important;
font-style: normal;
font-stretch: normal;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.c8:focus {
border-color: rgb(59,70,204);
outline: 0;
}
@ -489,11 +508,6 @@ exports[`renders <Rule/> without throwing 1`] = `
color: rgba(73,73,73,0.5);
}
.c8:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c11 {
box-sizing: border-box;
width: 18.75rem;
@ -504,6 +518,14 @@ exports[`renders <Rule/> without throwing 1`] = `
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1);
font-size: 0.9375rem;
line-height: normal !important;
font-style: normal;
font-stretch: normal;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
border: none;
border-bottom: 0.0625rem solid rgba(73,73,73,1);
border-radius: 0;
@ -520,13 +542,10 @@ exports[`renders <Rule/> without throwing 1`] = `
width: 8.4375rem;
max-width: 8.4375rem;
text-overflow: ellipsis;
font-size: 0.9375rem;
line-height: normal !important;
font-style: normal;
font-stretch: normal;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.c11:focus {
border-color: rgb(59,70,204);
outline: 0;
}
@ -564,11 +583,6 @@ exports[`renders <Rule/> without throwing 1`] = `
color: rgba(73,73,73,0.5);
}
.c11:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c14 {
box-sizing: border-box;
width: 18.75rem;
@ -579,6 +593,14 @@ exports[`renders <Rule/> without throwing 1`] = `
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1);
font-size: 0.9375rem;
line-height: normal !important;
font-style: normal;
font-stretch: normal;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
border: none;
border-bottom: 0.0625rem solid rgba(73,73,73,1);
border-radius: 0;
@ -595,13 +617,10 @@ exports[`renders <Rule/> without throwing 1`] = `
width: 8.125rem;
max-width: 8.125rem;
text-overflow: ellipsis;
font-size: 0.9375rem;
line-height: normal !important;
font-style: normal;
font-stretch: normal;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.c14:focus {
border-color: rgb(59,70,204);
outline: 0;
}
@ -639,11 +658,6 @@ exports[`renders <Rule/> without throwing 1`] = `
color: rgba(73,73,73,0.5);
}
.c14:focus {
border-color: rgb(59,70,204);
outline: 0;
}
<div
className="c0"
>
@ -895,6 +909,9 @@ exports[`renders <Rule/> without throwing 1`] = `
}
}
/>
<label
className="c16"
/>
</div>
</div>
</div>
@ -1040,6 +1057,20 @@ exports[`renders <Rule/> without throwing 2`] = `
display: none;
}
.c16 {
font-size: 0.9375rem;
line-height: 1.125rem;
font-style: normal;
font-stretch: normal;
display: block;
color: rgb(70,70,70);
text-align: left;
float: right;
font-size: 0.8125rem;
float: none;
width: 18.75rem;
}
.c2 {
color: rgba(73,73,73,1);
font-weight: normal;
@ -1074,6 +1105,14 @@ exports[`renders <Rule/> without throwing 2`] = `
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1);
font-size: 0.9375rem;
line-height: normal !important;
font-style: normal;
font-stretch: normal;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
border: none;
border-bottom: 0.0625rem solid rgba(73,73,73,1);
border-radius: 0;
@ -1088,13 +1127,10 @@ exports[`renders <Rule/> without throwing 2`] = `
min-height: 0;
max-width: 22.1875rem;
text-overflow: ellipsis;
font-size: 0.9375rem;
line-height: normal !important;
font-style: normal;
font-stretch: normal;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.c15:focus {
border-color: rgb(59,70,204);
outline: 0;
}
@ -1132,11 +1168,6 @@ exports[`renders <Rule/> without throwing 2`] = `
color: rgba(73,73,73,0.5);
}
.c15:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c4 {
position: relative;
display: -webkit-inline-box;
@ -1216,6 +1247,14 @@ exports[`renders <Rule/> without throwing 2`] = `
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1);
font-size: 0.9375rem;
line-height: normal !important;
font-style: normal;
font-stretch: normal;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
border: none;
border-bottom: 0.0625rem solid rgba(73,73,73,1);
border-radius: 0;
@ -1232,13 +1271,10 @@ exports[`renders <Rule/> without throwing 2`] = `
width: 4.125rem;
max-width: 4.125rem;
text-overflow: ellipsis;
font-size: 0.9375rem;
line-height: normal !important;
font-style: normal;
font-stretch: normal;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.c6:focus {
border-color: rgb(59,70,204);
outline: 0;
}
@ -1276,11 +1312,6 @@ exports[`renders <Rule/> without throwing 2`] = `
color: rgba(73,73,73,0.5);
}
.c6:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c8 {
box-sizing: border-box;
width: 18.75rem;
@ -1291,6 +1322,14 @@ exports[`renders <Rule/> without throwing 2`] = `
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1);
font-size: 0.9375rem;
line-height: normal !important;
font-style: normal;
font-stretch: normal;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
border: none;
border-bottom: 0.0625rem solid rgba(73,73,73,1);
border-radius: 0;
@ -1307,13 +1346,10 @@ exports[`renders <Rule/> without throwing 2`] = `
width: 6.25rem;
max-width: 6.25rem;
text-overflow: ellipsis;
font-size: 0.9375rem;
line-height: normal !important;
font-style: normal;
font-stretch: normal;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.c8:focus {
border-color: rgb(59,70,204);
outline: 0;
}
@ -1351,11 +1387,6 @@ exports[`renders <Rule/> without throwing 2`] = `
color: rgba(73,73,73,0.5);
}
.c8:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c11 {
box-sizing: border-box;
width: 18.75rem;
@ -1366,6 +1397,14 @@ exports[`renders <Rule/> without throwing 2`] = `
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1);
font-size: 0.9375rem;
line-height: normal !important;
font-style: normal;
font-stretch: normal;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
border: none;
border-bottom: 0.0625rem solid rgba(73,73,73,1);
border-radius: 0;
@ -1382,13 +1421,10 @@ exports[`renders <Rule/> without throwing 2`] = `
width: 8.4375rem;
max-width: 8.4375rem;
text-overflow: ellipsis;
font-size: 0.9375rem;
line-height: normal !important;
font-style: normal;
font-stretch: normal;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.c11:focus {
border-color: rgb(59,70,204);
outline: 0;
}
@ -1426,11 +1462,6 @@ exports[`renders <Rule/> without throwing 2`] = `
color: rgba(73,73,73,0.5);
}
.c11:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c14 {
box-sizing: border-box;
width: 18.75rem;
@ -1441,6 +1472,14 @@ exports[`renders <Rule/> without throwing 2`] = `
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1);
font-size: 0.9375rem;
line-height: normal !important;
font-style: normal;
font-stretch: normal;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
border: none;
border-bottom: 0.0625rem solid rgba(73,73,73,1);
border-radius: 0;
@ -1457,13 +1496,10 @@ exports[`renders <Rule/> without throwing 2`] = `
width: 8.125rem;
max-width: 8.125rem;
text-overflow: ellipsis;
font-size: 0.9375rem;
line-height: normal !important;
font-style: normal;
font-stretch: normal;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.c14:focus {
border-color: rgb(59,70,204);
outline: 0;
}
@ -1501,11 +1537,6 @@ exports[`renders <Rule/> without throwing 2`] = `
color: rgba(73,73,73,0.5);
}
.c14:focus {
border-color: rgb(59,70,204);
outline: 0;
}
<div
className="c0"
>
@ -1757,6 +1788,9 @@ exports[`renders <Rule/> without throwing 2`] = `
}
}
/>
<label
className="c16"
/>
</div>
</div>
</div>

View File

@ -225,8 +225,6 @@ exports[`renders <Images images=[{name: stuff, imageName: stuff}] /> without thr
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1);
max-width: 22.1875rem;
text-overflow: ellipsis;
font-size: 0.9375rem;
line-height: normal !important;
font-style: normal;
@ -235,6 +233,13 @@ exports[`renders <Images images=[{name: stuff, imageName: stuff}] /> without thr
-moz-appearance: none;
appearance: none;
outline: 0;
max-width: 22.1875rem;
text-overflow: ellipsis;
}
.c9:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c9::-webkit-input-placeholder {
@ -271,11 +276,6 @@ exports[`renders <Images images=[{name: stuff, imageName: stuff}] /> without thr
color: rgba(73,73,73,0.5);
}
.c9:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c6 {
min-width: 100%;
width: 9rem;

View File

@ -243,6 +243,7 @@ exports[`renders <Name /> without throwing 1`] = `
float: right;
font-size: 0.8125rem;
float: none;
width: 18.75rem;
}
.c9 {
@ -297,8 +298,6 @@ exports[`renders <Name /> without throwing 1`] = `
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1);
max-width: 22.1875rem;
text-overflow: ellipsis;
font-size: 0.9375rem;
line-height: normal !important;
font-style: normal;
@ -307,6 +306,13 @@ exports[`renders <Name /> without throwing 1`] = `
-moz-appearance: none;
appearance: none;
outline: 0;
max-width: 22.1875rem;
text-overflow: ellipsis;
}
.c5:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c5::-webkit-input-placeholder {
@ -343,11 +349,6 @@ exports[`renders <Name /> without throwing 1`] = `
color: rgba(73,73,73,0.5);
}
.c5:focus {
border-color: rgb(59,70,204);
outline: 0;
}
<form>
<div
className="c0"
@ -674,6 +675,7 @@ exports[`renders <Name expanded /> without throwing 1`] = `
float: right;
font-size: 0.8125rem;
float: none;
width: 18.75rem;
}
.c9 {
@ -728,8 +730,6 @@ exports[`renders <Name expanded /> without throwing 1`] = `
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1);
max-width: 22.1875rem;
text-overflow: ellipsis;
font-size: 0.9375rem;
line-height: normal !important;
font-style: normal;
@ -738,6 +738,13 @@ exports[`renders <Name expanded /> without throwing 1`] = `
-moz-appearance: none;
appearance: none;
outline: 0;
max-width: 22.1875rem;
text-overflow: ellipsis;
}
.c5:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c5::-webkit-input-placeholder {
@ -774,11 +781,6 @@ exports[`renders <Name expanded /> without throwing 1`] = `
color: rgba(73,73,73,0.5);
}
.c5:focus {
border-color: rgb(59,70,204);
outline: 0;
}
<form>
<div
className="c0"
@ -1105,6 +1107,7 @@ exports[`renders <Name name="test" /> without throwing 1`] = `
float: right;
font-size: 0.8125rem;
float: none;
width: 18.75rem;
}
.c9 {
@ -1159,8 +1162,6 @@ exports[`renders <Name name="test" /> without throwing 1`] = `
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1);
max-width: 22.1875rem;
text-overflow: ellipsis;
font-size: 0.9375rem;
line-height: normal !important;
font-style: normal;
@ -1169,6 +1170,13 @@ exports[`renders <Name name="test" /> without throwing 1`] = `
-moz-appearance: none;
appearance: none;
outline: 0;
max-width: 22.1875rem;
text-overflow: ellipsis;
}
.c5:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c5::-webkit-input-placeholder {
@ -1205,11 +1213,6 @@ exports[`renders <Name name="test" /> without throwing 1`] = `
color: rgba(73,73,73,0.5);
}
.c5:focus {
border-color: rgb(59,70,204);
outline: 0;
}
<form>
<div
className="c0"
@ -1536,6 +1539,7 @@ exports[`renders <Name pristine={false} /> without throwing 1`] = `
float: right;
font-size: 0.8125rem;
float: none;
width: 18.75rem;
}
.c9 {
@ -1590,8 +1594,6 @@ exports[`renders <Name pristine={false} /> without throwing 1`] = `
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1);
max-width: 22.1875rem;
text-overflow: ellipsis;
font-size: 0.9375rem;
line-height: normal !important;
font-style: normal;
@ -1600,6 +1602,13 @@ exports[`renders <Name pristine={false} /> without throwing 1`] = `
-moz-appearance: none;
appearance: none;
outline: 0;
max-width: 22.1875rem;
text-overflow: ellipsis;
}
.c5:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c5::-webkit-input-placeholder {
@ -1636,11 +1645,6 @@ exports[`renders <Name pristine={false} /> without throwing 1`] = `
color: rgba(73,73,73,0.5);
}
.c5:focus {
border-color: rgb(59,70,204);
outline: 0;
}
<form>
<div
className="c0"

View File

@ -5,7 +5,7 @@ import { Field } from 'redux-form';
import titleCase from 'title-case';
import remcalc from 'remcalc';
import { H5, Select, Input, FormGroup } from 'joyent-ui-toolkit';
import { H5, Select, Input, FormGroup, FormMeta } from 'joyent-ui-toolkit';
const style = {
lineHeight: '48px',
@ -82,6 +82,7 @@ export const Rule = rule => (
required
placeholder="key"
/>
<FormMeta small />
</FormGroup>
<H5 style={style} inline noMargin>
and value{' '}
@ -99,6 +100,7 @@ export const Rule = rule => (
required
placeholder="value"
/>
<FormMeta small />
</FormGroup>
</Fragment>
) : (
@ -115,6 +117,7 @@ export const Rule = rule => (
required
placeholder="Example instance name: nginx"
/>
<FormMeta />
</FormGroup>
</Fragment>
)}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 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

View File

@ -994,10 +994,6 @@ exports[`renders <Summary /> without throwing 1`] = `
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1);
font-family: "Roboto Mono",monospace;
width: 100%;
min-width: 100%;
text-overflow: ellipsis;
font-size: 0.9375rem;
line-height: normal !important;
font-style: normal;
@ -1006,6 +1002,15 @@ exports[`renders <Summary /> without throwing 1`] = `
-moz-appearance: none;
appearance: none;
outline: 0;
font-family: "Roboto Mono",monospace;
width: 100%;
min-width: 100%;
text-overflow: ellipsis;
}
.c32:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c32::-webkit-input-placeholder {
@ -1058,11 +1063,6 @@ exports[`renders <Summary /> without throwing 1`] = `
color: rgba(73,73,73,1);
}
.c32:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c34 {
box-sizing: border-box;
width: 18.75rem;
@ -1073,9 +1073,6 @@ exports[`renders <Summary /> without throwing 1`] = `
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1);
font-family: "Roboto Mono",monospace;
width: 100%;
min-width: 100%;
font-size: 0.9375rem;
line-height: normal !important;
font-style: normal;
@ -1084,6 +1081,14 @@ exports[`renders <Summary /> without throwing 1`] = `
-moz-appearance: none;
appearance: none;
outline: 0;
font-family: "Roboto Mono",monospace;
width: 100%;
min-width: 100%;
}
.c34:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c34::-webkit-input-placeholder {
@ -1136,11 +1141,6 @@ exports[`renders <Summary /> without throwing 1`] = `
color: rgba(73,73,73,1);
}
.c34:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c31 {
display: -webkit-box;
display: -webkit-flex;
@ -3023,9 +3023,6 @@ exports[`renders <Summary instance /> without throwing 1`] = `
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1);
font-family: "Roboto Mono",monospace;
width: 100%;
min-width: 100%;
font-size: 0.9375rem;
line-height: normal !important;
font-style: normal;
@ -3034,6 +3031,14 @@ exports[`renders <Summary instance /> without throwing 1`] = `
-moz-appearance: none;
appearance: none;
outline: 0;
font-family: "Roboto Mono",monospace;
width: 100%;
min-width: 100%;
}
.c33:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c33::-webkit-input-placeholder {
@ -3086,11 +3091,6 @@ exports[`renders <Summary instance /> without throwing 1`] = `
color: rgba(73,73,73,1);
}
.c33:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c32 {
display: -webkit-box;
display: -webkit-flex;
@ -5150,9 +5150,6 @@ exports[`renders <Summary instance /> without throwing 2`] = `
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1);
font-family: "Roboto Mono",monospace;
width: 100%;
min-width: 100%;
font-size: 0.9375rem;
line-height: normal !important;
font-style: normal;
@ -5161,6 +5158,14 @@ exports[`renders <Summary instance /> without throwing 2`] = `
-moz-appearance: none;
appearance: none;
outline: 0;
font-family: "Roboto Mono",monospace;
width: 100%;
min-width: 100%;
}
.c33:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c33::-webkit-input-placeholder {
@ -5213,11 +5218,6 @@ exports[`renders <Summary instance /> without throwing 2`] = `
color: rgba(73,73,73,1);
}
.c33:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c32 {
display: -webkit-box;
display: -webkit-flex;
@ -7268,10 +7268,6 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1);
font-family: "Roboto Mono",monospace;
width: 100%;
min-width: 100%;
text-overflow: ellipsis;
font-size: 0.9375rem;
line-height: normal !important;
font-style: normal;
@ -7280,6 +7276,15 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
-moz-appearance: none;
appearance: none;
outline: 0;
font-family: "Roboto Mono",monospace;
width: 100%;
min-width: 100%;
text-overflow: ellipsis;
}
.c36:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c36::-webkit-input-placeholder {
@ -7332,11 +7337,6 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
color: rgba(73,73,73,1);
}
.c36:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c38 {
box-sizing: border-box;
width: 18.75rem;
@ -7347,9 +7347,6 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1);
font-family: "Roboto Mono",monospace;
width: 100%;
min-width: 100%;
font-size: 0.9375rem;
line-height: normal !important;
font-style: normal;
@ -7358,6 +7355,14 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
-moz-appearance: none;
appearance: none;
outline: 0;
font-family: "Roboto Mono",monospace;
width: 100%;
min-width: 100%;
}
.c38:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c38::-webkit-input-placeholder {
@ -7410,11 +7415,6 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
color: rgba(73,73,73,1);
}
.c38:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c35 {
display: -webkit-box;
display: -webkit-flex;
@ -9349,10 +9349,6 @@ exports[`renders <Summary state /> without throwing 1`] = `
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1);
font-family: "Roboto Mono",monospace;
width: 100%;
min-width: 100%;
text-overflow: ellipsis;
font-size: 0.9375rem;
line-height: normal !important;
font-style: normal;
@ -9361,6 +9357,15 @@ exports[`renders <Summary state /> without throwing 1`] = `
-moz-appearance: none;
appearance: none;
outline: 0;
font-family: "Roboto Mono",monospace;
width: 100%;
min-width: 100%;
text-overflow: ellipsis;
}
.c33:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c33::-webkit-input-placeholder {
@ -9413,11 +9418,6 @@ exports[`renders <Summary state /> without throwing 1`] = `
color: rgba(73,73,73,1);
}
.c33:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c35 {
box-sizing: border-box;
width: 18.75rem;
@ -9428,9 +9428,6 @@ exports[`renders <Summary state /> without throwing 1`] = `
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1);
font-family: "Roboto Mono",monospace;
width: 100%;
min-width: 100%;
font-size: 0.9375rem;
line-height: normal !important;
font-style: normal;
@ -9439,6 +9436,14 @@ exports[`renders <Summary state /> without throwing 1`] = `
-moz-appearance: none;
appearance: none;
outline: 0;
font-family: "Roboto Mono",monospace;
width: 100%;
min-width: 100%;
}
.c35:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c35::-webkit-input-placeholder {
@ -9491,11 +9496,6 @@ exports[`renders <Summary state /> without throwing 1`] = `
color: rgba(73,73,73,1);
}
.c35:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c32 {
display: -webkit-box;
display: -webkit-flex;
@ -11378,10 +11378,6 @@ exports[`renders <Summary state /> without throwing 2`] = `
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1);
font-family: "Roboto Mono",monospace;
width: 100%;
min-width: 100%;
text-overflow: ellipsis;
font-size: 0.9375rem;
line-height: normal !important;
font-style: normal;
@ -11390,6 +11386,15 @@ exports[`renders <Summary state /> without throwing 2`] = `
-moz-appearance: none;
appearance: none;
outline: 0;
font-family: "Roboto Mono",monospace;
width: 100%;
min-width: 100%;
text-overflow: ellipsis;
}
.c33:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c33::-webkit-input-placeholder {
@ -11442,11 +11447,6 @@ exports[`renders <Summary state /> without throwing 2`] = `
color: rgba(73,73,73,1);
}
.c33:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c35 {
box-sizing: border-box;
width: 18.75rem;
@ -11457,9 +11457,6 @@ exports[`renders <Summary state /> without throwing 2`] = `
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1);
font-family: "Roboto Mono",monospace;
width: 100%;
min-width: 100%;
font-size: 0.9375rem;
line-height: normal !important;
font-style: normal;
@ -11468,6 +11465,14 @@ exports[`renders <Summary state /> without throwing 2`] = `
-moz-appearance: none;
appearance: none;
outline: 0;
font-family: "Roboto Mono",monospace;
width: 100%;
min-width: 100%;
}
.c35:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c35::-webkit-input-placeholder {
@ -11520,11 +11525,6 @@ exports[`renders <Summary state /> without throwing 2`] = `
color: rgba(73,73,73,1);
}
.c35:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c32 {
display: -webkit-box;
display: -webkit-flex;
@ -13346,10 +13346,6 @@ exports[`renders <Summary state /> without throwing 3`] = `
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1);
font-family: "Roboto Mono",monospace;
width: 100%;
min-width: 100%;
text-overflow: ellipsis;
font-size: 0.9375rem;
line-height: normal !important;
font-style: normal;
@ -13358,6 +13354,15 @@ exports[`renders <Summary state /> without throwing 3`] = `
-moz-appearance: none;
appearance: none;
outline: 0;
font-family: "Roboto Mono",monospace;
width: 100%;
min-width: 100%;
text-overflow: ellipsis;
}
.c32:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c32::-webkit-input-placeholder {
@ -13410,11 +13415,6 @@ exports[`renders <Summary state /> without throwing 3`] = `
color: rgba(73,73,73,1);
}
.c32:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c34 {
box-sizing: border-box;
width: 18.75rem;
@ -13425,9 +13425,6 @@ exports[`renders <Summary state /> without throwing 3`] = `
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1);
font-family: "Roboto Mono",monospace;
width: 100%;
min-width: 100%;
font-size: 0.9375rem;
line-height: normal !important;
font-style: normal;
@ -13436,6 +13433,14 @@ exports[`renders <Summary state /> without throwing 3`] = `
-moz-appearance: none;
appearance: none;
outline: 0;
font-family: "Roboto Mono",monospace;
width: 100%;
min-width: 100%;
}
.c34:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c34::-webkit-input-placeholder {
@ -13488,11 +13493,6 @@ exports[`renders <Summary state /> without throwing 3`] = `
color: rgba(73,73,73,1);
}
.c34:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c31 {
display: -webkit-box;
display: -webkit-flex;

View File

@ -237,8 +237,6 @@ exports[`renders <Toolbar /> without throwing 1`] = `
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1);
max-width: 22.1875rem;
text-overflow: ellipsis;
font-size: 0.9375rem;
line-height: normal !important;
font-style: normal;
@ -247,6 +245,13 @@ exports[`renders <Toolbar /> without throwing 1`] = `
-moz-appearance: none;
appearance: none;
outline: 0;
max-width: 22.1875rem;
text-overflow: ellipsis;
}
.c4:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c4::-webkit-input-placeholder {
@ -283,11 +288,6 @@ exports[`renders <Toolbar /> without throwing 1`] = `
color: rgba(73,73,73,0.5);
}
.c4:focus {
border-color: rgb(59,70,204);
outline: 0;
}
<div
className="c0"
>
@ -575,8 +575,6 @@ exports[`renders <Toolbar actionLabel /> without throwing 1`] = `
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1);
max-width: 22.1875rem;
text-overflow: ellipsis;
font-size: 0.9375rem;
line-height: normal !important;
font-style: normal;
@ -585,6 +583,13 @@ exports[`renders <Toolbar actionLabel /> without throwing 1`] = `
-moz-appearance: none;
appearance: none;
outline: 0;
max-width: 22.1875rem;
text-overflow: ellipsis;
}
.c4:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c4::-webkit-input-placeholder {
@ -621,11 +626,6 @@ exports[`renders <Toolbar actionLabel /> without throwing 1`] = `
color: rgba(73,73,73,0.5);
}
.c4:focus {
border-color: rgb(59,70,204);
outline: 0;
}
<div
className="c0"
>
@ -935,8 +935,6 @@ exports[`renders <Toolbar actionable /> without throwing 1`] = `
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1);
max-width: 22.1875rem;
text-overflow: ellipsis;
font-size: 0.9375rem;
line-height: normal !important;
font-style: normal;
@ -945,6 +943,13 @@ exports[`renders <Toolbar actionable /> without throwing 1`] = `
-moz-appearance: none;
appearance: none;
outline: 0;
max-width: 22.1875rem;
text-overflow: ellipsis;
}
.c4:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c4::-webkit-input-placeholder {
@ -981,11 +986,6 @@ exports[`renders <Toolbar actionable /> without throwing 1`] = `
color: rgba(73,73,73,0.5);
}
.c4:focus {
border-color: rgb(59,70,204);
outline: 0;
}
<div
className="c0"
>
@ -1273,8 +1273,6 @@ exports[`renders <Toolbar onActionClick /> without throwing 1`] = `
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1);
max-width: 22.1875rem;
text-overflow: ellipsis;
font-size: 0.9375rem;
line-height: normal !important;
font-style: normal;
@ -1283,6 +1281,13 @@ exports[`renders <Toolbar onActionClick /> without throwing 1`] = `
-moz-appearance: none;
appearance: none;
outline: 0;
max-width: 22.1875rem;
text-overflow: ellipsis;
}
.c4:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c4::-webkit-input-placeholder {
@ -1319,11 +1324,6 @@ exports[`renders <Toolbar onActionClick /> without throwing 1`] = `
color: rgba(73,73,73,0.5);
}
.c4:focus {
border-color: rgb(59,70,204);
outline: 0;
}
<div
className="c0"
>
@ -1611,8 +1611,6 @@ exports[`renders <Toolbar searchLabel /> without throwing 1`] = `
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1);
max-width: 22.1875rem;
text-overflow: ellipsis;
font-size: 0.9375rem;
line-height: normal !important;
font-style: normal;
@ -1621,6 +1619,13 @@ exports[`renders <Toolbar searchLabel /> without throwing 1`] = `
-moz-appearance: none;
appearance: none;
outline: 0;
max-width: 22.1875rem;
text-overflow: ellipsis;
}
.c4:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c4::-webkit-input-placeholder {
@ -1657,11 +1662,6 @@ exports[`renders <Toolbar searchLabel /> without throwing 1`] = `
color: rgba(73,73,73,0.5);
}
.c4:focus {
border-color: rgb(59,70,204);
outline: 0;
}
<div
className="c0"
>
@ -1949,8 +1949,6 @@ exports[`renders <Toolbar searchPlaceholder /> without throwing 1`] = `
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1);
max-width: 22.1875rem;
text-overflow: ellipsis;
font-size: 0.9375rem;
line-height: normal !important;
font-style: normal;
@ -1959,6 +1957,13 @@ exports[`renders <Toolbar searchPlaceholder /> without throwing 1`] = `
-moz-appearance: none;
appearance: none;
outline: 0;
max-width: 22.1875rem;
text-overflow: ellipsis;
}
.c4:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c4::-webkit-input-placeholder {
@ -1995,11 +2000,6 @@ exports[`renders <Toolbar searchPlaceholder /> without throwing 1`] = `
color: rgba(73,73,73,0.5);
}
.c4:focus {
border-color: rgb(59,70,204);
outline: 0;
}
<div
className="c0"
>
@ -2287,11 +2287,6 @@ exports[`renders <Toolbar searchable /> without throwing 1`] = `
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
color: rgb(250,250,250);
background-color: rgb(250,250,250);
color: rgb(216,216,216);
cursor: not-allowed;
max-width: 22.1875rem;
text-overflow: ellipsis;
font-size: 0.9375rem;
line-height: normal !important;
font-style: normal;
@ -2300,6 +2295,16 @@ exports[`renders <Toolbar searchable /> without throwing 1`] = `
-moz-appearance: none;
appearance: none;
outline: 0;
background-color: rgb(250,250,250);
color: rgb(216,216,216);
cursor: not-allowed;
max-width: 22.1875rem;
text-overflow: ellipsis;
}
.c4:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c4::-webkit-input-placeholder {
@ -2348,11 +2353,6 @@ exports[`renders <Toolbar searchable /> without throwing 1`] = `
color: rgba(73,73,73,0.5);
}
.c4:focus {
border-color: rgb(59,70,204);
outline: 0;
}
<div
className="c0"
>

View File

@ -0,0 +1,2 @@
export const fieldError =
'Please enter only letters, numbers, periods (.), underscores (_), and hyphens (-).';

Binary file not shown.

Before

Width:  |  Height:  |  Size: 39 KiB

After

Width:  |  Height:  |  Size: 39 KiB

View File

@ -420,7 +420,7 @@ Array [
<ul
className="c0"
/>,
.c23 {
.c25 {
font-family: sans-serif;
font-size: 100%;
line-height: 1.15;
@ -433,36 +433,36 @@ Array [
min-width: 7.5rem;
}
.c23::-moz-focus-inner,
.c23[type='button']::-moz-focus-inner,
.c23[type='reset']::-moz-focus-inner,
.c23[type='submit']::-moz-focus-inner {
.c25::-moz-focus-inner,
.c25[type='button']::-moz-focus-inner,
.c25[type='reset']::-moz-focus-inner,
.c25[type='submit']::-moz-focus-inner {
border-style: none;
padding: 0;
}
.c23:-moz-focusring,
.c23[type='button']:-moz-focusring,
.c23[type='reset']:-moz-focusring,
.c23[type='submit']:-moz-focusring {
.c25:-moz-focusring,
.c25[type='button']:-moz-focusring,
.c25[type='reset']:-moz-focusring,
.c25[type='submit']:-moz-focusring {
outline: 0.0625rem dotted ButtonText;
}
.c23 + button,
.c23 + a {
.c25 + button,
.c25 + a {
margin-left: 0.375rem;
}
.c22 {
.c24 {
display: inline-block;
}
.c22 + button,
.c22 + a {
.c24 + button,
.c24 + a {
margin-left: 0.375rem;
}
.c21 {
.c23 {
box-sizing: border-box;
display: inline-block;
-webkit-box-pack: center;
@ -507,7 +507,7 @@ Array [
margin: 0;
}
.c21:focus {
.c23:focus {
outline: 0;
-webkit-text-decoration: none;
text-decoration: none;
@ -515,43 +515,43 @@ Array [
border-color: rgb(45,56,132);
}
.c21:hover {
.c23:hover {
background-color: rgb(72,83,217);
border: solid 0.0625rem rgb(45,56,132);
}
.c21:active,
.c21:active:hover,
.c21:active:focus {
.c23:active,
.c23:active:hover,
.c23:active:focus {
background-image: none;
outline: 0;
background-color: rgb(45,56,132);
border-color: rgb(45,56,132);
}
.c21[disabled] {
.c23[disabled] {
cursor: not-allowed;
pointer-events: none;
}
.c21:focus {
.c23:focus {
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
}
.c21:hover {
.c23:hover {
background-color: rgb(247,247,247);
border-color: rgb(216,216,216);
}
.c21:active,
.c21:active:hover,
.c21:active:focus {
.c23:active,
.c23:active:hover,
.c23:active:focus {
background-color: rgb(230,230,230);
border-color: rgb(216,216,216);
}
.c24 {
.c26 {
box-sizing: border-box;
display: inline-block;
-webkit-box-pack: center;
@ -597,7 +597,7 @@ Array [
margin: 0;
}
.c24:focus {
.c26:focus {
outline: 0;
-webkit-text-decoration: none;
text-decoration: none;
@ -605,43 +605,43 @@ Array [
border-color: rgb(45,56,132);
}
.c24:hover {
.c26:hover {
background-color: rgb(72,83,217);
border: solid 0.0625rem rgb(45,56,132);
}
.c24:active,
.c24:active:hover,
.c24:active:focus {
.c26:active,
.c26:active:hover,
.c26:active:focus {
background-image: none;
outline: 0;
background-color: rgb(45,56,132);
border-color: rgb(45,56,132);
}
.c24[disabled] {
.c26[disabled] {
cursor: not-allowed;
pointer-events: none;
}
.c24:focus {
.c26:focus {
background-color: rgb(250,250,250);
border-color: rgb(216,216,216);
}
.c24:hover {
.c26:hover {
background-color: rgb(250,250,250);
border-color: rgb(250,250,250);
}
.c24:active,
.c24:active:hover,
.c24:active:focus {
.c26:active,
.c26:active:hover,
.c26:active:focus {
background-color: rgb(250,250,250);
border-color: rgb(250,250,250);
}
.c26 {
.c28 {
box-sizing: border-box;
display: inline-block;
-webkit-box-pack: center;
@ -699,7 +699,7 @@ Array [
float: right;
}
.c26:focus {
.c28:focus {
outline: 0;
-webkit-text-decoration: none;
text-decoration: none;
@ -707,66 +707,66 @@ Array [
border-color: rgb(45,56,132);
}
.c26:hover {
.c28:hover {
background-color: rgb(72,83,217);
border: solid 0.0625rem rgb(45,56,132);
}
.c26:active,
.c26:active:hover,
.c26:active:focus {
.c28:active,
.c28:active:hover,
.c28:active:focus {
background-image: none;
outline: 0;
background-color: rgb(45,56,132);
border-color: rgb(45,56,132);
}
.c26[disabled] {
.c28[disabled] {
cursor: not-allowed;
pointer-events: none;
}
.c26:focus {
.c28:focus {
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
}
.c26:hover {
.c28:hover {
background-color: rgb(247,247,247);
border-color: rgb(216,216,216);
}
.c26:active,
.c26:active:hover,
.c26:active:focus {
.c28:active,
.c28:active:hover,
.c28:active:focus {
background-color: rgb(230,230,230);
border-color: rgb(216,216,216);
}
.c26:focus {
.c28:focus {
color: rgb(205,37,27);
background-color: rgb(255,255,255);
border-color: rgb(205,37,27);
}
.c26:hover {
.c28:hover {
color: rgb(205,37,27);
background-color: rgb(255,255,255);
border-color: rgb(205,37,27);
}
.c26:active,
.c26:active:hover,
.c26:active:focus {
.c28:active,
.c28:active:hover,
.c28:active:focus {
background-color: rgba(210,67,58,0.1);
border-color: rgb(205,37,27);
}
.c26 svg + span {
.c28 svg + span {
margin-left: 0.75rem;
}
.c26 svg {
.c28 svg {
max-height: 1.125rem;
}
@ -784,7 +784,7 @@ Array [
font-size: 0.8125rem;
}
.c16 {
.c18 {
font-size: 0.9375rem;
line-height: 1.125rem;
font-style: normal;
@ -795,9 +795,10 @@ Array [
float: right;
font-size: 0.8125rem;
float: none;
width: 18.75rem;
}
.c19 {
.c16 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
@ -816,7 +817,26 @@ Array [
margin-left: -0.625rem;
}
.c20 {
.c21 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 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.625rem;
margin-left: -0.625rem;
}
.c17 {
box-sizing: border-box;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
@ -826,7 +846,17 @@ Array [
display: block;
}
.c25 {
.c22 {
box-sizing: border-box;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-right: 0.625rem;
padding-left: 0.625rem;
display: block;
}
.c27 {
box-sizing: border-box;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
@ -861,7 +891,7 @@ Array [
margin-top: 0.1875rem;
}
.c18 {
.c20 {
margin-top: 0.375rem;
}
@ -957,7 +987,7 @@ Array [
flex-basis: auto;
}
.c17 {
.c19 {
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
@ -1168,8 +1198,6 @@ Array [
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1);
max-width: 22.1875rem;
text-overflow: ellipsis;
font-size: 0.9375rem;
line-height: normal !important;
font-style: normal;
@ -1178,6 +1206,13 @@ Array [
-moz-appearance: none;
appearance: none;
outline: 0;
max-width: 22.1875rem;
text-overflow: ellipsis;
}
.c15:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c15::-webkit-input-placeholder {
@ -1214,11 +1249,6 @@ Array [
color: rgba(73,73,73,0.5);
}
.c15:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c2 {
word-wrap: break-word;
overflow-wrap: break-word;
@ -1232,7 +1262,7 @@ Array [
}
@media only screen and (min-width:0em) {
.c19 {
.c21 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
@ -1241,7 +1271,7 @@ Array [
}
@media only screen and (min-width:0em) {
.c19 {
.c21 {
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
@ -1249,8 +1279,17 @@ Array [
}
}
@media only screen and (min-width:48em) {
.c17 {
-webkit-flex-basis: 58.333333333333336%;
-ms-flex-preferred-size: 58.333333333333336%;
flex-basis: 58.333333333333336%;
max-width: 58.333333333333336%;
}
}
@media only screen and (min-width:0em) {
.c20 {
.c22 {
-webkit-flex-basis: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
@ -1259,7 +1298,7 @@ Array [
}
@media only screen and (min-width:0em) {
.c25 {
.c27 {
display: none;
}
}
@ -1335,14 +1374,22 @@ Array [
id="k"
onBlur={null}
/>
<div
className="c16"
>
<div
className="c17"
>
<label
className="c18"
/>
</div>
</div>
</div>
<label
className="c16"
/>
</div>
</div>
<div
className="c17"
className="c19"
/>
<div
className="c11"
@ -1369,24 +1416,32 @@ Array [
id="l"
onBlur={null}
/>
<div
className="c16"
>
<div
className="c17"
>
<label
className="c18"
/>
</div>
</div>
</div>
<label
className="c16"
/>
</div>
</div>
</div>
<div
className="c18"
className="c20"
>
<div
className="c19"
className="c21"
>
<div
className="c20"
className="c22"
>
<button
className="c21 c22 c23"
className="c23 c24 c25"
disabled={false}
href=""
onClick={[Function]}
@ -1397,7 +1452,7 @@ Array [
</span>
</button>
<button
className="c24 c22 c23"
className="c26 c24 c25"
disabled={true}
href=""
type="submit"
@ -1408,10 +1463,10 @@ Array [
</button>
</div>
<div
className="c25"
className="c27"
>
<button
className="c26 c22 c23"
className="c28 c24 c25"
disabled={false}
href=""
icon={true}

View File

@ -13,6 +13,7 @@ import { AffinityIcon, Button, H3, Divider, KeyValue } from 'joyent-ui-toolkit';
import Title from '@components/create-instance/title';
import { Rule, Header } from '@components/create-instance/affinity';
import Description from '@components/description';
import { fieldError } from '@root/constants';
const FORM_NAME_CREATE = 'CREATE-INSTANCE-AFFINITY-ADD';
const FORM_NAME_EDIT = i => `CREATE-INSTANCE-AFFINITY-EDIT-${i}`;
@ -37,6 +38,8 @@ export const Affinity = ({
handleAddAffinityRules,
handleRemoveAffinityRule,
handleUpdateAffinityRule,
shouldAsyncValidate,
handleAsyncValidation,
handleToggleExpanded,
handleCancelEdit,
handleChangeAddOpen,
@ -79,6 +82,8 @@ export const Affinity = ({
initialValues={rule}
destroyOnUnmount={false}
forceUnregisterOnUnmount={true}
shouldAsyncValidate={shouldAsyncValidate}
asyncValidation={handleAsyncValidation}
onSubmit={newValue => handleUpdateAffinityRule(index, newValue)}
>
{props => (
@ -103,6 +108,8 @@ export const Affinity = ({
form={FORM_NAME_CREATE}
destroyOnUnmount={false}
forceUnregisterOnUnmount={true}
shouldAsyncValidate={shouldAsyncValidate}
asyncValidate={handleAsyncValidation}
onSubmit={handleAddAffinityRules}
>
{props =>
@ -161,7 +168,28 @@ export default compose(
rule
};
}),
connect(null, (dispatch, { affinityRules = [], history }) => ({
connect(null, (dispatch, { affinityRules = [], rule, history }) => ({
shouldAsyncValidate: ({ trigger }) => trigger === 'change',
handleAsyncValidation: async rule => {
const validName = /^[a-zA-Z_.-]{1,16}$/.test(rule['rule-instance-name']);
const validKey = /^[a-zA-Z_.-]{1,16}$/.test(
rule['rule-instance-tag-key']
);
const validValue = /^[a-zA-Z_.-]{1,16}$/.test(
rule['rule-instance-tag-value']
);
if (validName && validKey && validValue) {
return;
}
// eslint-disable-next-line no-throw-literal
throw {
'rule-instance-name': fieldError,
'rule-instance-tag-key': fieldError,
'rule-instance-tag-value': fieldError
};
},
handleEdit: () => {
return history.push(`/~create/affinity${history.location.search}`);
},

View File

@ -14,6 +14,7 @@ import Title from '@components/create-instance/title';
import Cns, { Footer, AddServiceForm } from '@components/cns';
import Description from '@components/description';
import GetAccount from '@graphql/get-account.gql';
import { fieldError } from '@root/constants';
const CNS_FORM = 'create-instance-cns';
@ -30,7 +31,9 @@ const CNSContainer = ({
handleToggleCnsEnabled,
handleAddService,
handleRemoveService,
step
step,
shouldAsyncValidate,
handleAsyncValidate
}) => (
<Fragment>
<Title
@ -68,6 +71,8 @@ const CNSContainer = ({
destroyOnUnmount={false}
forceUnregisterOnUnmount={true}
onSubmit={handleAddService}
shouldAsyncValidate={shouldAsyncValidate}
asyncValidate={handleAsyncValidate}
>
{props => <AddServiceForm {...props} />}
</ReduxForm>
@ -163,6 +168,20 @@ export default compose(
dispatch(set({ name: `${CNS_FORM}-proceeded`, value: true }));
return history.push(`/~create/affinity${history.location.search}`);
},
shouldAsyncValidate: ({ trigger }) => trigger === 'change',
handleAsyncValidate: async ({ name = '', value = '' }) => {
const isNameValid = /^[a-zA-Z_.-]{1,16}$/.test(name);
const isValueValid = /^[a-zA-Z_.-]{1,16}$/.test(value);
if (isNameValid && isValueValid) {
return;
}
throw {
name: isNameValid ? null : fieldError,
value: isValueValid ? null : fieldError
};
},
handleEdit: () => history.push(`/~create/cns${history.location.search}`),
handleToggleCnsEnabled: ({ target }) =>
dispatch(set({ name: `${CNS_FORM}-enabled`, value: !cnsEnabled })),

View File

@ -18,6 +18,7 @@ import GetInstance from '@graphql/get-instance-small.gql';
import GetRandomName from '@graphql/get-random-name.gql';
import { client } from '@state/store';
import parseError from '@state/parse-error';
import { fieldError } from '@root/constants';
const FORM_NAME = 'create-instance-name';
@ -113,21 +114,21 @@ export default compose(
};
},
(dispatch, { history, query }) => ({
shouldAsyncValidate: ({ trigger }) => trigger === 'submit',
shouldAsyncValidate: ({ trigger }) => trigger === 'change',
handleAsyncValidation: async ({ name }) => {
const sanitized = punycode.encode(name).replace(/-$/, '');
if (sanitized !== name) {
// eslint-disable-next-line no-throw-literal
throw {
name: 'Special characters are not accepted'
name: fieldError
};
}
if (!/^[a-zA-Z0-9][a-zA-Z0-9\\_\\.\\-]*$/.test(name)) {
// eslint-disable-next-line no-throw-literal
throw {
name: 'Invalid name'
name: fieldError
};
}

View File

@ -20,6 +20,7 @@ import {
import Title from '@components/create-instance/title';
import Description from '@components/description';
import Tag from '@components/tags';
import { fieldError } from '@root/constants';
const FORM_NAME_CREATE = 'CREATE-INSTANCE-TAGS-ADD';
const FORM_NAME_EDIT = i => `CREATE-INSTANCE-TAGS-EDIT-${i}`;
@ -39,7 +40,7 @@ export const Tags = ({
handleNext,
handleEdit,
shouldAsyncValidate,
asyncValidate
handleAsyncValidate
}) => (
<Fragment>
<Title
@ -88,7 +89,7 @@ export const Tags = ({
forceUnregisterOnUnmount={true}
onSubmit={handleAddTag}
shouldAsyncValidate={shouldAsyncValidate}
asyncValidate={asyncValidate}
asyncValidate={handleAsyncValidate}
>
{props =>
expanded && addOpen ? (
@ -150,20 +151,18 @@ export default compose(
handleEdit: () => {
return history.push(`/~create/tags${history.location.search}`);
},
shouldAsyncValidate: ({ trigger }) => {
return trigger === 'submit';
},
asyncValidate: async ({ name = '', value = '' }) => {
const isNameInvalid = name.length === 0;
const isValueInvalid = value.length === 0;
shouldAsyncValidate: ({ trigger }) => trigger === 'change',
handleAsyncValidate: async ({ name = '', value = '' }) => {
const isNameValid = /^[a-zA-Z_.-]{1,16}$/.test(name);
const isValueValid = /^[a-zA-Z_.-]{1,16}$/.test(value);
if (!isNameInvalid && !isValueInvalid) {
if (isNameValid && isValueValid) {
return;
}
throw {
name: isNameInvalid,
value: isValueInvalid
name: isNameValid ? null : fieldError,
value: isValueValid ? null : fieldError
};
},
handleAddTag: value => {

Binary file not shown.

Before

Width:  |  Height:  |  Size: 84 KiB

After

Width:  |  Height:  |  Size: 84 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 116 KiB

After

Width:  |  Height:  |  Size: 116 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 30 KiB

After

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 80 KiB

After

Width:  |  Height:  |  Size: 80 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 122 KiB

After

Width:  |  Height:  |  Size: 122 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 87 KiB

After

Width:  |  Height:  |  Size: 87 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 91 KiB

After

Width:  |  Height:  |  Size: 91 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 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: 50 KiB

After

Width:  |  Height:  |  Size: 50 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: 9.1 KiB

After

Width:  |  Height:  |  Size: 9.1 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: 9.1 KiB

After

Width:  |  Height:  |  Size: 9.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 23 KiB

After

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 16 KiB

View File

@ -483,8 +483,6 @@ exports[`renders <List /> without throwing 1`] = `
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1);
max-width: 22.1875rem;
text-overflow: ellipsis;
font-size: 0.9375rem;
line-height: normal !important;
font-style: normal;
@ -493,6 +491,13 @@ exports[`renders <List /> without throwing 1`] = `
-moz-appearance: none;
appearance: none;
outline: 0;
max-width: 22.1875rem;
text-overflow: ellipsis;
}
.c7:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c7::-webkit-input-placeholder {
@ -529,11 +534,6 @@ exports[`renders <List /> without throwing 1`] = `
color: rgba(73,73,73,0.5);
}
.c7:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c14 {
overflow: hidden;
border-spacing: 0;
@ -1788,8 +1788,6 @@ exports[`renders <List error /> without throwing 1`] = `
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1);
max-width: 22.1875rem;
text-overflow: ellipsis;
font-size: 0.9375rem;
line-height: normal !important;
font-style: normal;
@ -1798,6 +1796,13 @@ exports[`renders <List error /> without throwing 1`] = `
-moz-appearance: none;
appearance: none;
outline: 0;
max-width: 22.1875rem;
text-overflow: ellipsis;
}
.c7:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c7::-webkit-input-placeholder {
@ -1834,11 +1839,6 @@ exports[`renders <List error /> without throwing 1`] = `
color: rgba(73,73,73,0.5);
}
.c7:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c20 {
overflow: hidden;
border-spacing: 0;
@ -3044,8 +3044,6 @@ exports[`renders <List instances /> without throwing 1`] = `
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1);
max-width: 22.1875rem;
text-overflow: ellipsis;
font-size: 0.9375rem;
line-height: normal !important;
font-style: normal;
@ -3054,6 +3052,13 @@ exports[`renders <List instances /> without throwing 1`] = `
-moz-appearance: none;
appearance: none;
outline: 0;
max-width: 22.1875rem;
text-overflow: ellipsis;
}
.c7:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c7::-webkit-input-placeholder {
@ -3090,11 +3095,6 @@ exports[`renders <List instances /> without throwing 1`] = `
color: rgba(73,73,73,0.5);
}
.c7:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c41 {
cursor: pointer;
height: 100%;
@ -5084,8 +5084,6 @@ exports[`renders <List instances selected /> without throwing 1`] = `
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1);
max-width: 22.1875rem;
text-overflow: ellipsis;
font-size: 0.9375rem;
line-height: normal !important;
font-style: normal;
@ -5094,6 +5092,13 @@ exports[`renders <List instances selected /> without throwing 1`] = `
-moz-appearance: none;
appearance: none;
outline: 0;
max-width: 22.1875rem;
text-overflow: ellipsis;
}
.c7:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c7::-webkit-input-placeholder {
@ -5130,11 +5135,6 @@ exports[`renders <List instances selected /> without throwing 1`] = `
color: rgba(73,73,73,0.5);
}
.c7:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c41 {
cursor: pointer;
height: 100%;
@ -7505,8 +7505,6 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1);
max-width: 22.1875rem;
text-overflow: ellipsis;
font-size: 0.9375rem;
line-height: normal !important;
font-style: normal;
@ -7515,6 +7513,13 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
-moz-appearance: none;
appearance: none;
outline: 0;
max-width: 22.1875rem;
text-overflow: ellipsis;
}
.c7:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c7::-webkit-input-placeholder {
@ -7551,11 +7556,6 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
color: rgba(73,73,73,0.5);
}
.c7:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c41 {
cursor: pointer;
height: 100%;
@ -10137,8 +10137,6 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1);
max-width: 22.1875rem;
text-overflow: ellipsis;
font-size: 0.9375rem;
line-height: normal !important;
font-style: normal;
@ -10147,6 +10145,13 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
-moz-appearance: none;
appearance: none;
outline: 0;
max-width: 22.1875rem;
text-overflow: ellipsis;
}
.c7:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c7::-webkit-input-placeholder {
@ -10183,11 +10188,6 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
color: rgba(73,73,73,0.5);
}
.c7:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c41 {
cursor: pointer;
height: 100%;
@ -11780,11 +11780,6 @@ exports[`renders <List loading /> without throwing 1`] = `
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
color: rgb(250,250,250);
background-color: rgb(250,250,250);
color: rgb(216,216,216);
cursor: not-allowed;
max-width: 22.1875rem;
text-overflow: ellipsis;
font-size: 0.9375rem;
line-height: normal !important;
font-style: normal;
@ -11793,6 +11788,16 @@ exports[`renders <List loading /> without throwing 1`] = `
-moz-appearance: none;
appearance: none;
outline: 0;
background-color: rgb(250,250,250);
color: rgb(216,216,216);
cursor: not-allowed;
max-width: 22.1875rem;
text-overflow: ellipsis;
}
.c7:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c7::-webkit-input-placeholder {
@ -11841,11 +11846,6 @@ exports[`renders <List loading /> without throwing 1`] = `
color: rgba(73,73,73,0.5);
}
.c7:focus {
border-color: rgb(59,70,204);
outline: 0;
}
@media only screen and (min-width:48em) {
.c0 {
width: 46rem;

View File

@ -1959,9 +1959,6 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1);
font-family: "Roboto Mono",monospace;
width: 100%;
min-width: 100%;
font-size: 0.9375rem;
line-height: normal !important;
font-style: normal;
@ -1970,6 +1967,14 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
-moz-appearance: none;
appearance: none;
outline: 0;
font-family: "Roboto Mono",monospace;
width: 100%;
min-width: 100%;
}
.c34:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c34::-webkit-input-placeholder {
@ -2022,11 +2027,6 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
color: rgba(73,73,73,1);
}
.c34:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c33 {
display: -webkit-box;
display: -webkit-flex;
@ -4124,9 +4124,6 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1);
font-family: "Roboto Mono",monospace;
width: 100%;
min-width: 100%;
font-size: 0.9375rem;
line-height: normal !important;
font-style: normal;
@ -4135,6 +4132,14 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
-moz-appearance: none;
appearance: none;
outline: 0;
font-family: "Roboto Mono",monospace;
width: 100%;
min-width: 100%;
}
.c34:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c34::-webkit-input-placeholder {
@ -4187,11 +4192,6 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
color: rgba(73,73,73,1);
}
.c34:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c33 {
display: -webkit-box;
display: -webkit-flex;

View File

@ -26,6 +26,7 @@ import DeleteTag from '@graphql/delete-tag.gql';
import UpdateTags from '@graphql/update-tags.gql';
import GetTags from '@graphql/list-tags.gql';
import parseError from '@state/parse-error';
import { fieldError } from '@root/constants';
const FORM_NAME = 'cns-new-service';
@ -39,7 +40,9 @@ const CnsContainer = ({
mutating = false,
loading = false,
mutationError = false,
loadingError = null
loadingError = null,
shouldAsyncValidate,
handleAsyncValidate
}) => (
<ViewContainer main>
<Margin bottom={1}>
@ -90,6 +93,8 @@ const CnsContainer = ({
destroyOnUnmount={false}
forceUnregisterOnUnmount={true}
onSubmit={val => handleAddService(val, services)}
shouldAsyncValidate={shouldAsyncValidate}
asyncValidate={handleAsyncValidate}
>
{props => <AddServiceForm {...props} disabled={mutating} />}
</ReduxForm>
@ -249,6 +254,18 @@ export default compose(
return refetch();
},
shouldAsyncValidate: ({ trigger }) => trigger === 'change',
handleAsyncValidate: async ({ name }) => {
const isNameValid = /^[a-zA-Z_.-]{1,16}$/.test(name);
if (isNameValid) {
return;
}
throw {
name: fieldError
};
},
handleRemoveService: async (name, services) => {
const value = services.filter(svc => name !== svc);

View File

@ -34,6 +34,7 @@ import ToolbarForm from '@components/instances/toolbar';
import SnapshotsListActions from '@components/instances/footer';
import parseError from '@state/parse-error';
import Confirm from '@state/confirm';
import { fieldError } from '@root/constants';
const MENU_FORM_NAME = 'snapshot-list-menu';
const TABLE_FORM_NAME = 'snapshot-list-table';
@ -56,7 +57,9 @@ const Snapshots = ({
sortBy,
toggleSelectAll,
toggleCreateSnapshotOpen,
createSnapshotOpen
createSnapshotOpen,
shouldAsyncValidate,
handleAsyncValidate
}) => {
const _values = forceArray(snapshots);
const _loading = !_values.length && loading ? <StatusLoader /> : null;
@ -80,13 +83,20 @@ const Snapshots = ({
const _createSnapshot =
!loading && createSnapshotOpen ? (
<Margin bottom={4}>
<ReduxForm form={CREATE_FORM_NAME} onSubmit={handleCreateSnapshot}>
{props => (
<SnapshotAddForm
{...props}
onCancel={() => toggleCreateSnapshotOpen(false)}
/>
)}
<ReduxForm
form={CREATE_FORM_NAME}
shouldAsyncValidate={shouldAsyncValidate}
asyncValidate={handleAsyncValidate}
onSubmit={handleCreateSnapshot}
>
{props => {
return (
<SnapshotAddForm
{...props}
onCancel={() => toggleCreateSnapshotOpen(false)}
/>
);
}}
</ReduxForm>
</Margin>
) : null;
@ -256,6 +266,18 @@ export default compose(
})
]);
},
shouldAsyncValidate: ({ trigger }) => trigger === 'change',
handleAsyncValidate: async ({ name }) => {
const isNameValid = /^[a-zA-Z_.-]{1,16}$/.test(name);
if (isNameValid) {
return;
}
throw {
name: fieldError
};
},
toggleCreateSnapshotOpen: value =>
dispatch(
set({

View File

@ -32,6 +32,7 @@ import UpdateTags from '@graphql/update-tags.gql';
import DeleteTag from '@graphql/delete-tag.gql';
import parseError from '@state/parse-error';
import Confirm from '@state/confirm';
import { fieldError } from '@root/constants';
const MENU_FORM_NAME = 'instance-tags-list-menu';
const ADD_FORM_NAME = 'instance-tags-add-new';
@ -50,7 +51,7 @@ export const Tags = ({
handleRemove,
handleCreate,
shouldAsyncValidate,
asyncValidate
handleAsyncValidate
}) => {
const _loading = !(loading && !tags.length) ? null : <StatusLoader />;
@ -60,7 +61,7 @@ export const Tags = ({
onSubmit={handleCreate}
onCancel={() => handleToggleAddOpen(false)}
shouldAsyncValidate={shouldAsyncValidate}
asyncValidate={asyncValidate}
asyncValidate={handleAsyncValidate}
>
{TagsAddForm}
</ReduxForm>
@ -100,7 +101,7 @@ export const Tags = ({
form={editing.form}
initialValues={{ name: editing.name, value: editing.value }}
shouldAsyncValidate={shouldAsyncValidate}
asyncValidate={asyncValidate}
handleAsyncValidate={handleAsyncValidate}
onSubmit={handleEdit}
>
{props => (
@ -212,20 +213,18 @@ export default compose(
handleToggleEditing: value => {
return dispatch(set({ name: `editing-tag`, value }));
},
shouldAsyncValidate: ({ trigger }) => {
return trigger === 'submit';
},
asyncValidate: async ({ name = '', value = '' }) => {
const isNameInvalid = name.length === 0;
const isValueInvalid = value.length === 0;
shouldAsyncValidate: ({ trigger }) => trigger === 'change',
handleAsyncValidate: async ({ name = '', value = '' }) => {
const isNameValid = /^[a-zA-Z_.-]{1,16}$/.test(name);
const isValueValid = /^[a-zA-Z_.-]{1,16}$/.test(value);
if (!isNameInvalid && !isValueInvalid) {
if (isNameValid && isValueValid) {
return;
}
throw {
name: isNameInvalid,
value: isValueInvalid
name: isNameValid ? null : fieldError,
value: isValueValid ? null : fieldError
};
},
handleEdit: async ({ name, value }, _, { form, initialValues }) => {

View File

@ -246,6 +246,7 @@ exports[`Form FormMeta 1`] = `
-webkit-text-fill-color: currentcolor;
font-size: 0.8125rem;
float: none;
width: 18.75rem;
}
.c1 {
@ -261,6 +262,7 @@ exports[`Form FormMeta 1`] = `
-webkit-text-fill-color: currentcolor;
font-size: 0.8125rem;
float: none;
width: 18.75rem;
}
.c2 {
@ -276,6 +278,7 @@ exports[`Form FormMeta 1`] = `
-webkit-text-fill-color: currentcolor;
font-size: 0.8125rem;
float: none;
width: 18.75rem;
}
<div>
@ -308,8 +311,6 @@ exports[`Form Input 1`] = `
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1);
max-width: 22.1875rem;
text-overflow: ellipsis;
font-size: 0.9375rem;
line-height: normal !important;
font-style: normal;
@ -318,6 +319,13 @@ exports[`Form Input 1`] = `
-moz-appearance: none;
appearance: none;
outline: 0;
max-width: 22.1875rem;
text-overflow: ellipsis;
}
.c0:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c0::-webkit-input-placeholder {
@ -354,11 +362,6 @@ exports[`Form Input 1`] = `
color: rgba(73,73,73,0.5);
}
.c0:focus {
border-color: rgb(59,70,204);
outline: 0;
}
<input
className="c0"
disabled={false}
@ -603,8 +606,6 @@ exports[`Form Select 1`] = `
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1);
max-width: 22.1875rem;
text-overflow: ellipsis;
font-size: 0.9375rem;
line-height: normal !important;
font-style: normal;
@ -613,6 +614,13 @@ exports[`Form Select 1`] = `
-moz-appearance: none;
appearance: none;
outline: 0;
max-width: 22.1875rem;
text-overflow: ellipsis;
}
.c2:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c2::-webkit-input-placeholder {
@ -649,11 +657,6 @@ exports[`Form Select 1`] = `
color: rgba(73,73,73,0.5);
}
.c2:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c1 {
position: relative;
padding: 0.75rem;
@ -707,8 +710,6 @@ exports[`Form Textarea 1`] = `
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1);
max-width: 22.1875rem;
text-overflow: ellipsis;
font-size: 0.9375rem;
line-height: normal !important;
font-style: normal;
@ -717,6 +718,13 @@ exports[`Form Textarea 1`] = `
-moz-appearance: none;
appearance: none;
outline: 0;
max-width: 22.1875rem;
text-overflow: ellipsis;
}
.c1:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c1::-webkit-input-placeholder {
@ -753,11 +761,6 @@ exports[`Form Textarea 1`] = `
color: rgba(73,73,73,0.5);
}
.c1:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c0 {
position: relative;
display: -webkit-inline-box;

View File

@ -34,6 +34,19 @@ const style = css`
background-color: ${props => props.theme.white};
border: ${remcalc(1)} solid ${props => props.theme.grey};
color: ${color};
font-size: ${remcalc(15)};
line-height: normal !important;
font-style: normal;
font-stretch: normal;
appearance: none;
outline: 0;
&:focus {
border-color: ${props => props.theme.primary};
outline: 0;
}
&::-webkit-input-placeholder {
color: ${props => props.theme.textDisabled};
@ -122,7 +135,11 @@ const style = css`
`};
${is('error')`
border-color: ${props => props.theme.redDark}
border-color: ${props => props.theme.red};
&:focus {
border-color: ${props => props.theme.red};
}
`};
${is('embedded')`
@ -172,20 +189,6 @@ const style = css`
resize: ${props => props.resize};
`};
font-size: ${remcalc(15)};
line-height: normal !important;
font-style: normal;
font-stretch: normal;
appearance: none;
outline: 0;
&:focus {
border-color: ${props => props.theme.primary};
outline: 0;
}
${is('big')`
width: ${remcalc(355)};
max-width: 100%;

View File

@ -29,6 +29,11 @@ const StyledLabel = Label.extend`
font-size: ${remcalc(13)};
float: none;
width: ${remcalc(300)};
${is('small')`
width: ${remcalc(120)};
`};
`;
const Meta = props => {

View File

@ -82,8 +82,12 @@ const TextareaKeyValue = ({
<FormLabel>{titleCase(type)} key</FormLabel>
<Margin top={0.5}>
<Input onBlur={null} type="text" disabled={submitting} />
<Row>
<Col sm={7}>
<FormMeta />
</Col>
</Row>
</Margin>
<FormMeta />
</FormGroup>
<Divider height={remcalc(12)} transparent />
</Col>
@ -102,7 +106,11 @@ const TextareaKeyValue = ({
props={{ submitting, editor }}
/>
</Margin>
<FormMeta />
<Row>
<Col sm={7}>
<FormMeta />
</Col>
</Row>
</FormGroup>
<Divider height={remcalc(12)} transparent />
</Col>
@ -127,8 +135,12 @@ const InputKeyValue = ({
</FormLabel>
<Margin top={0.5}>
<Input onBlur={null} type="text" disabled={submitting} />
<Row>
<Col sm={7}>
<FormMeta />
</Col>
</Row>
</Margin>
<FormMeta />
</FormGroup>
</FlexItem>
) : null}
@ -139,9 +151,13 @@ const InputKeyValue = ({
<FormGroup name="value" field={Field} fluid>
<FormLabel>{titleCase(type)} value</FormLabel>
<Margin top={0.5}>
<Input onBlur={null} disabled={submitting} />
<Input onBlur={null} type="text" disabled={submitting} />
<Row>
<Col sm={7}>
<FormMeta />
</Col>
</Row>
</Margin>
<FormMeta />
</FormGroup>
</FlexItem>
</Fragment>
@ -160,6 +176,7 @@ export const KeyValue = ({
expanded = true,
submitting = false,
pristine = true,
invalid = false,
removing = false,
handleSubmit,
onToggleExpanded = () => null,
@ -173,7 +190,6 @@ export const KeyValue = ({
customHeader
}) => {
const handleHeaderClick = method === 'edit' && onToggleExpanded;
return (
<Card collapsed={!expanded} actionable={!expanded} shadow>
<CardHeader
@ -267,7 +283,7 @@ export const KeyValue = ({
</Button>
<Button
type="submit"
disabled={pristine}
disabled={pristine || invalid}
loading={submitting && !removing}
marginless
>