Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 13 KiB |
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 15 KiB |
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 13 KiB |
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 20 KiB |
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 13 KiB |
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 13 KiB |
@ -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;
|
||||
|
@ -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%;
|
||||
|
@ -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 />
|
||||
|
@ -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>
|
||||
|
@ -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;
|
||||
|
@ -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"
|
||||
|
@ -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>
|
||||
)}
|
||||
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
Before Width: | Height: | Size: 9.2 KiB After Width: | Height: | Size: 9.2 KiB |
Before Width: | Height: | Size: 31 KiB After Width: | Height: | Size: 31 KiB |
@ -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;
|
||||
|
@ -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"
|
||||
>
|
||||
|
2
packages/my-joy-beta/src/constants.js
Normal file
@ -0,0 +1,2 @@
|
||||
export const fieldError =
|
||||
'Please enter only letters, numbers, periods (.), underscores (_), and hyphens (-).';
|
Before Width: | Height: | Size: 39 KiB After Width: | Height: | Size: 39 KiB |
@ -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}
|
||||
|
@ -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}`);
|
||||
},
|
||||
|
@ -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 })),
|
||||
|
@ -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
|
||||
};
|
||||
}
|
||||
|
||||
|
@ -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 => {
|
||||
|
Before Width: | Height: | Size: 84 KiB After Width: | Height: | Size: 84 KiB |
Before Width: | Height: | Size: 116 KiB After Width: | Height: | Size: 116 KiB |
Before Width: | Height: | Size: 30 KiB After Width: | Height: | Size: 30 KiB |
Before Width: | Height: | Size: 80 KiB After Width: | Height: | Size: 80 KiB |
Before Width: | Height: | Size: 122 KiB After Width: | Height: | Size: 122 KiB |
Before Width: | Height: | Size: 87 KiB After Width: | Height: | Size: 87 KiB |
Before Width: | Height: | Size: 91 KiB After Width: | Height: | Size: 91 KiB |
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
Before Width: | Height: | Size: 50 KiB After Width: | Height: | Size: 50 KiB |
Before Width: | Height: | Size: 38 KiB After Width: | Height: | Size: 38 KiB |
Before Width: | Height: | Size: 9.1 KiB After Width: | Height: | Size: 9.1 KiB |
Before Width: | Height: | Size: 9.1 KiB After Width: | Height: | Size: 9.1 KiB |
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
Before Width: | Height: | Size: 9.1 KiB After Width: | Height: | Size: 9.1 KiB |
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 23 KiB |
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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);
|
||||
|
||||
|
@ -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({
|
||||
|
@ -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 }) => {
|
||||
|
@ -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;
|
||||
|
@ -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%;
|
||||
|
@ -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 => {
|
||||
|
@ -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
|
||||
>
|
||||
|