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

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

Browse Source 
fixes #1011
This commit is contained in:
Sara Vieira 2018-01-16 17:45:19 +00:00 committed by Sérgio Ramos
parent 35c50de56b
commit 39d038fa73
24 changed files with 199 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/icons/src/__tests__/__snapshots__/icons.spec.js.snap
View File

@ -2250,7 +2250,7 @@ exports[`renders <Dot /> without throwing 1`] = `
.c0 { .c0 {
width: 0.375rem; width: 0.375rem;
height: 0.375rem; height: 0.375rem;
border-radius: 0.1875rem; border-radius: 50%;
display: inline-block; display: inline-block;
} }

2
packages/icons/src/dot.js
View File

@ -4,7 +4,7 @@ import styled from 'styled-components';
export default styled.span` export default styled.span`
width: ${remcalc(6)}; width: ${remcalc(6)};
height: ${remcalc(6)}; height: ${remcalc(6)};
border-radius: ${remcalc(3)}; border-radius: 50%;
background-color: ${props => props.theme[props.color]}; background-color: ${props => props.theme[props.color]};
display: inline-block; display: inline-block;
`; `;

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

@ -123,7 +123,7 @@ exports[`renders <Rule/> without throwing 1`] = `
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
min-height: 0; min-height: 0;
max-width: 18.75rem; max-width: 22.1875rem;
text-overflow: ellipsis; text-overflow: ellipsis;
font-size: 0.9375rem; font-size: 0.9375rem;
line-height: normal !important; line-height: normal !important;
@ -262,7 +262,7 @@ exports[`renders <Rule/> without throwing 1`] = `
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
min-height: 0; min-height: 0;
max-width: 18.75rem; max-width: 22.1875rem;
text-overflow: ellipsis; text-overflow: ellipsis;
font-size: 0.9375rem; font-size: 0.9375rem;
line-height: normal !important; line-height: normal !important;
@ -589,7 +589,7 @@ exports[`renders <Rule/> without throwing 2`] = `
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
min-height: 0; min-height: 0;
max-width: 18.75rem; max-width: 22.1875rem;
text-overflow: ellipsis; text-overflow: ellipsis;
font-size: 0.9375rem; font-size: 0.9375rem;
line-height: normal !important; line-height: normal !important;
@ -728,7 +728,7 @@ exports[`renders <Rule/> without throwing 2`] = `
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
min-height: 0; min-height: 0;
max-width: 18.75rem; max-width: 22.1875rem;
text-overflow: ellipsis; text-overflow: ellipsis;
font-size: 0.9375rem; font-size: 0.9375rem;
line-height: normal !important; line-height: normal !important;

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

@ -158,7 +158,7 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216); border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1); color: rgba(73,73,73,1);
max-width: 18.75rem; max-width: 22.1875rem;
text-overflow: ellipsis; text-overflow: ellipsis;
font-size: 0.9375rem; font-size: 0.9375rem;
line-height: normal !important; line-height: normal !important;
@ -442,7 +442,7 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216); border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1); color: rgba(73,73,73,1);
max-width: 18.75rem; max-width: 22.1875rem;
text-overflow: ellipsis; text-overflow: ellipsis;
font-size: 0.9375rem; font-size: 0.9375rem;
line-height: normal !important; line-height: normal !important;

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

@ -194,7 +194,7 @@ exports[`renders <Name expanded /> without throwing 1`] = `
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216); border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1); color: rgba(73,73,73,1);
max-width: 18.75rem; max-width: 22.1875rem;
text-overflow: ellipsis; text-overflow: ellipsis;
font-size: 0.9375rem; font-size: 0.9375rem;
line-height: normal !important; line-height: normal !important;

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

@ -3961,7 +3961,7 @@ exports[`renders <Network {...network} fabric /> without throwing 1`] = `
<p <p
className="c16" className="c16"
> >
Fabric Fabric network
</p> </p>
</div> </div>
</div> </div>
@ -4352,7 +4352,7 @@ exports[`renders <Network {...network} fabric /> without throwing 2`] = `
<p <p
className="c7" className="c7"
> >
Fabric Fabric network
</p> </p>
</div> </div>
</div> </div>
@ -4942,7 +4942,9 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216); border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1); color: rgba(73,73,73,1);
max-width: 18.75rem; width: 22.1875rem;
font-family: "Roboto Mono";
max-width: 22.1875rem;
font-size: 0.9375rem; font-size: 0.9375rem;
line-height: normal !important; line-height: normal !important;
font-style: normal; font-style: normal;
@ -4986,6 +4988,22 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
color: rgba(73,73,73,0.5); color: rgba(73,73,73,0.5);
} }
.c28:disabled {
color: rgba(73,73,73,1);
}
.c28:disabled::-webkit-input-placeholder {
color: rgba(73,73,73,1);
}
.c28:disabled::-moz-placeholder {
color: rgba(73,73,73,1);
}
.c28:disabled:-ms-input-placeholder {
color: rgba(73,73,73,1);
}
.c28:focus { .c28:focus {
border-color: rgb(59,70,204); border-color: rgb(59,70,204);
outline: 0; outline: 0;
@ -5198,7 +5216,7 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
<p <p
className="c16" className="c16"
> >
Fabric Fabric network
</p> </p>
</div> </div>
</div> </div>
@ -5671,7 +5689,7 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 2`] = `
<p <p
className="c7" className="c7"
> >
Fabric Fabric network
</p> </p>
</div> </div>
</div> </div>

39
packages/my-joy-beta/src/components/create-instance/network.js
View File

@ -11,6 +11,8 @@ import { Row, Col } from 'react-styled-flexboxgrid';
import { import {
H4, H4,
P, P,
Small,
DotIcon,
Card, Card,
CardHeader, CardHeader,
CardHeaderMeta, CardHeaderMeta,
@ -76,7 +78,9 @@ export const Collapsed = ({ name, fabric, ...network }) => (
</Margin> </Margin>
</FlexItem> </FlexItem>
<FlexItem> <FlexItem>
<P>{fabric ? 'Fabric' : 'Data center network'}</P> <P>
{fabric ? 'Fabric network' : 'Data center network'}
</P>
</FlexItem> </FlexItem>
</Flex> </Flex>
</FlexItem> </FlexItem>
@ -149,7 +153,9 @@ export const Expanded = ({
</Margin> </Margin>
</FlexItem> </FlexItem>
<FlexItem> <FlexItem>
<P>{fabric ? 'Fabric' : 'Data center network'}</P> <P>
{fabric ? 'Fabric network' : 'Data center network'}
</P>
</FlexItem> </FlexItem>
</Flex> </Flex>
</FlexItem> </FlexItem>
@ -176,22 +182,47 @@ export const Expanded = ({
<CardOutlet> <CardOutlet>
<Padding all={3}> <Padding all={3}>
<Flex column> <Flex column>
{network.internet_nat ? (
<FlexItem>
<Margin bottom={3}>
<Flex alignCenter>
<Margin right={1}>
<DotIcon
width={remcalc(12)}
height={remcalc(12)}
color="green"
/>
</Margin>
<Small bold noMargin>
Outbound internet access enabled
</Small>
</Flex>
</Margin>
</FlexItem>
) : null}
<FlexItem> <FlexItem>
<FormGroup name="id"> <FormGroup name="id">
<FormLabel>ID</FormLabel> <FormLabel>ID</FormLabel>
<Input type="text" value={id} /> <Input big monospace type="text" value={id} />
</FormGroup> </FormGroup>
</FlexItem> </FlexItem>
<FlexItem> <FlexItem>
<FormGroup name="subnet"> <FormGroup name="subnet">
<FormLabel>Subnet</FormLabel> <FormLabel>Subnet</FormLabel>
<Input type="text" value={subnet} /> <Input
big
monospace
type="text"
value={subnet}
/>
</FormGroup> </FormGroup>
</FlexItem> </FlexItem>
<FlexItem> <FlexItem>
<FormGroup name="ip-range"> <FormGroup name="ip-range">
<FormLabel>IP range</FormLabel> <FormLabel>IP range</FormLabel>
<Input <Input
big
monospace
type="text" type="text"
value={`${provision_start_ip} - ${provision_end_ip}`} value={`${provision_start_ip} - ${provision_end_ip}`}
/> />

16
packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/key-value.spec.js.snap
View File

@ -665,7 +665,7 @@ exports[`renders <KeyValue /> without throwing 1`] = `
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216); border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1); color: rgba(73,73,73,1);
max-width: 18.75rem; max-width: 22.1875rem;
text-overflow: ellipsis; text-overflow: ellipsis;
font-size: 0.9375rem; font-size: 0.9375rem;
line-height: normal !important; line-height: normal !important;
@ -1816,7 +1816,7 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216); border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1); color: rgba(73,73,73,1);
max-width: 18.75rem; max-width: 22.1875rem;
text-overflow: ellipsis; text-overflow: ellipsis;
font-size: 0.9375rem; font-size: 0.9375rem;
line-height: normal !important; line-height: normal !important;
@ -2735,7 +2735,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216); border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1); color: rgba(73,73,73,1);
max-width: 18.75rem; max-width: 22.1875rem;
text-overflow: ellipsis; text-overflow: ellipsis;
font-size: 0.9375rem; font-size: 0.9375rem;
line-height: normal !important; line-height: normal !important;
@ -3777,7 +3777,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216); border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1); color: rgba(73,73,73,1);
max-width: 18.75rem; max-width: 22.1875rem;
text-overflow: ellipsis; text-overflow: ellipsis;
font-size: 0.9375rem; font-size: 0.9375rem;
line-height: normal !important; line-height: normal !important;
@ -4716,7 +4716,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216); border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1); color: rgba(73,73,73,1);
max-width: 18.75rem; max-width: 22.1875rem;
text-overflow: ellipsis; text-overflow: ellipsis;
font-size: 0.9375rem; font-size: 0.9375rem;
line-height: normal !important; line-height: normal !important;
@ -5760,7 +5760,7 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216); border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1); color: rgba(73,73,73,1);
max-width: 18.75rem; max-width: 22.1875rem;
text-overflow: ellipsis; text-overflow: ellipsis;
font-size: 0.9375rem; font-size: 0.9375rem;
line-height: normal !important; line-height: normal !important;
@ -6811,7 +6811,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
color: rgb(250,250,250); color: rgb(250,250,250);
background-color: rgb(250,250,250); background-color: rgb(250,250,250);
color: rgb(216,216,216); color: rgb(216,216,216);
max-width: 18.75rem; max-width: 22.1875rem;
text-overflow: ellipsis; text-overflow: ellipsis;
font-size: 0.9375rem; font-size: 0.9375rem;
line-height: normal !important; line-height: normal !important;
@ -7808,7 +7808,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216); border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1); color: rgba(73,73,73,1);
max-width: 18.75rem; max-width: 22.1875rem;
text-overflow: ellipsis; text-overflow: ellipsis;
font-size: 0.9375rem; font-size: 0.9375rem;
line-height: normal !important; line-height: normal !important;

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

@ -3220,7 +3220,7 @@ exports[`renders <Item /> without throwing 1`] = `
.c14 { .c14 {
width: 0.375rem; width: 0.375rem;
height: 0.375rem; height: 0.375rem;
border-radius: 0.1875rem; border-radius: 50%;
background-color: rgb(0,152,88); background-color: rgb(0,152,88);
display: inline-block; display: inline-block;
height: 0.6875rem; height: 0.6875rem;
@ -3712,7 +3712,7 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
.c14 { .c14 {
width: 0.375rem; width: 0.375rem;
height: 0.375rem; height: 0.375rem;
border-radius: 0.1875rem; border-radius: 50%;
background-color: rgb(59,70,204); background-color: rgb(59,70,204);
display: inline-block; display: inline-block;
height: 0.6875rem; height: 0.6875rem;
@ -4206,7 +4206,7 @@ exports[`renders <Item allowedActions /> without throwing 1`] = `
.c14 { .c14 {
width: 0.375rem; width: 0.375rem;
height: 0.375rem; height: 0.375rem;
border-radius: 0.1875rem; border-radius: 50%;
background-color: rgb(0,152,88); background-color: rgb(0,152,88);
display: inline-block; display: inline-block;
height: 0.6875rem; height: 0.6875rem;

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

@ -633,7 +633,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216); border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1); color: rgba(73,73,73,1);
max-width: 18.75rem; max-width: 22.1875rem;
text-overflow: ellipsis; text-overflow: ellipsis;
font-size: 0.9375rem; font-size: 0.9375rem;
line-height: normal !important; line-height: normal !important;
@ -1641,7 +1641,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216); border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1); color: rgba(73,73,73,1);
max-width: 18.75rem; max-width: 22.1875rem;
text-overflow: ellipsis; text-overflow: ellipsis;
font-size: 0.9375rem; font-size: 0.9375rem;
line-height: normal !important; line-height: normal !important;

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

@ -497,7 +497,7 @@ exports[`renders <Item /> without throwing 1`] = `
.c10 { .c10 {
width: 0.375rem; width: 0.375rem;
height: 0.375rem; height: 0.375rem;
border-radius: 0.1875rem; border-radius: 50%;
display: inline-block; display: inline-block;
height: 0.6875rem; height: 0.6875rem;
width: 0.6875rem; width: 0.6875rem;
@ -906,7 +906,7 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
.c10 { .c10 {
width: 0.375rem; width: 0.375rem;
height: 0.375rem; height: 0.375rem;
border-radius: 0.1875rem; border-radius: 50%;
display: inline-block; display: inline-block;
height: 0.6875rem; height: 0.6875rem;
width: 0.6875rem; width: 0.6875rem;

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

@ -748,7 +748,7 @@ exports[`renders <Summary /> without throwing 1`] = `
.c12 { .c12 {
width: 0.375rem; width: 0.375rem;
height: 0.375rem; height: 0.375rem;
border-radius: 0.1875rem; border-radius: 50%;
display: inline-block; display: inline-block;
margin-top: 0.0625rem; margin-top: 0.0625rem;
margin-right: 0.375rem; margin-right: 0.375rem;
@ -2912,7 +2912,7 @@ exports[`renders <Summary instance /> without throwing 1`] = `
.c12 { .c12 {
width: 0.375rem; width: 0.375rem;
height: 0.375rem; height: 0.375rem;
border-radius: 0.1875rem; border-radius: 50%;
background-color: rgb(0,152,88); background-color: rgb(0,152,88);
display: inline-block; display: inline-block;
margin-top: 0.0625rem; margin-top: 0.0625rem;
@ -5246,7 +5246,7 @@ exports[`renders <Summary instance /> without throwing 2`] = `
.c12 { .c12 {
width: 0.375rem; width: 0.375rem;
height: 0.375rem; height: 0.375rem;
border-radius: 0.1875rem; border-radius: 50%;
background-color: rgb(0,152,88); background-color: rgb(0,152,88);
display: inline-block; display: inline-block;
margin-top: 0.0625rem; margin-top: 0.0625rem;
@ -7467,7 +7467,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
.c12 { .c12 {
width: 0.375rem; width: 0.375rem;
height: 0.375rem; height: 0.375rem;
border-radius: 0.1875rem; border-radius: 50%;
display: inline-block; display: inline-block;
margin-top: 0.0625rem; margin-top: 0.0625rem;
margin-right: 0.375rem; margin-right: 0.375rem;
@ -9523,7 +9523,7 @@ exports[`renders <Summary state /> without throwing 1`] = `
.c12 { .c12 {
width: 0.375rem; width: 0.375rem;
height: 0.375rem; height: 0.375rem;
border-radius: 0.1875rem; border-radius: 50%;
background-color: rgb(0,152,88); background-color: rgb(0,152,88);
display: inline-block; display: inline-block;
margin-top: 0.0625rem; margin-top: 0.0625rem;
@ -11688,7 +11688,7 @@ exports[`renders <Summary state /> without throwing 2`] = `
.c12 { .c12 {
width: 0.375rem; width: 0.375rem;
height: 0.375rem; height: 0.375rem;
border-radius: 0.1875rem; border-radius: 50%;
background-color: rgb(216,216,216); background-color: rgb(216,216,216);
display: inline-block; display: inline-block;
margin-top: 0.0625rem; margin-top: 0.0625rem;
@ -13687,7 +13687,7 @@ exports[`renders <Summary state /> without throwing 3`] = `
.c12 { .c12 {
width: 0.375rem; width: 0.375rem;
height: 0.375rem; height: 0.375rem;
border-radius: 0.1875rem; border-radius: 50%;
background-color: rgb(59,70,204); background-color: rgb(59,70,204);
display: inline-block; display: inline-block;
margin-top: 0.0625rem; margin-top: 0.0625rem;

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

@ -626,7 +626,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216); border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1); color: rgba(73,73,73,1);
max-width: 18.75rem; max-width: 22.1875rem;
text-overflow: ellipsis; text-overflow: ellipsis;
font-size: 0.9375rem; font-size: 0.9375rem;
line-height: normal !important; line-height: normal !important;
@ -1599,7 +1599,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216); border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1); color: rgba(73,73,73,1);
max-width: 18.75rem; max-width: 22.1875rem;
text-overflow: ellipsis; text-overflow: ellipsis;
font-size: 0.9375rem; font-size: 0.9375rem;
line-height: normal !important; line-height: normal !important;

10
packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/metadata.spec.js.snap
View File

@ -1087,7 +1087,7 @@ Array [
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216); border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1); color: rgba(73,73,73,1);
max-width: 18.75rem; max-width: 22.1875rem;
text-overflow: ellipsis; text-overflow: ellipsis;
font-size: 0.9375rem; font-size: 0.9375rem;
line-height: normal !important; line-height: normal !important;
@ -2988,7 +2988,7 @@ Array [
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216); border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1); color: rgba(73,73,73,1);
max-width: 18.75rem; max-width: 22.1875rem;
text-overflow: ellipsis; text-overflow: ellipsis;
font-size: 0.9375rem; font-size: 0.9375rem;
line-height: normal !important; line-height: normal !important;
@ -4021,7 +4021,7 @@ Array [
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216); border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1); color: rgba(73,73,73,1);
max-width: 18.75rem; max-width: 22.1875rem;
text-overflow: ellipsis; text-overflow: ellipsis;
font-size: 0.9375rem; font-size: 0.9375rem;
line-height: normal !important; line-height: normal !important;
@ -5336,7 +5336,7 @@ Array [
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216); border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1); color: rgba(73,73,73,1);
max-width: 18.75rem; max-width: 22.1875rem;
text-overflow: ellipsis; text-overflow: ellipsis;
font-size: 0.9375rem; font-size: 0.9375rem;
line-height: normal !important; line-height: normal !important;
@ -6369,7 +6369,7 @@ Array [
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216); border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1); color: rgba(73,73,73,1);
max-width: 18.75rem; max-width: 22.1875rem;
text-overflow: ellipsis; text-overflow: ellipsis;
font-size: 0.9375rem; font-size: 0.9375rem;
line-height: normal !important; line-height: normal !important;

26
packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/networks.spec.js.snap
View File

@ -770,6 +770,11 @@ Array [
background-color: rgb(59,70,204); background-color: rgb(59,70,204);
border-radius: 0.25rem; border-radius: 0.25rem;
border: solid 0.0625rem rgb(45,56,132); border: solid 0.0625rem rgb(45,56,132);
cursor: not-allowed;
pointer-events: none;
color: rgb(216,216,216);
background-color: rgb(250,250,250);
border-color: rgb(216,216,216);
} }
.c1:focus { .c1:focus {
@ -798,6 +803,23 @@ Array [
pointer-events: none; pointer-events: none;
} }
.c1:focus {
background-color: rgb(250,250,250);
border-color: rgb(216,216,216);
}
.c1:hover {
background-color: rgb(250,250,250);
border-color: rgb(250,250,250);
}
.c1:active,
.c1:active:hover,
.c1:active:focus {
background-color: rgb(250,250,250);
border-color: rgb(250,250,250);
}
.c0 { .c0 {
margin-bottom: 2rem; margin-bottom: 2rem;
} }
@ -807,6 +829,7 @@ Array [
> >
<button <button
className="c1 c2 c3" className="c1 c2 c3"
disabled={true}
href="" href=""
onClick={undefined} onClick={undefined}
type="button" type="button"
@ -2585,7 +2608,7 @@ Array [
<p <p
className="c16" className="c16"
> >
Fabric Fabric network
</p> </p>
</div> </div>
</div> </div>
@ -2952,6 +2975,7 @@ Array [
> >
<button <button
className="c1 c2 c3" className="c1 c2 c3"
disabled={false}
href="" href=""
onClick={undefined} onClick={undefined}
type="button" type="button"

2
packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/tag.spec.js.snap
View File

@ -1070,7 +1070,7 @@ Array [
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216); border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1); color: rgba(73,73,73,1);
max-width: 18.75rem; max-width: 22.1875rem;
text-overflow: ellipsis; text-overflow: ellipsis;
font-size: 0.9375rem; font-size: 0.9375rem;
line-height: normal !important; line-height: normal !important;

6
packages/my-joy-beta/src/containers/create-instance/networks.js
View File

@ -79,7 +79,11 @@ export const Networks = ({
) : null} ) : null}
<Margin bottom={4}> <Margin bottom={4}>
{expanded ? ( {expanded ? (
<Button type="button" onClick={handleNext}> <Button
type="button"
disabled={!selected.length}
onClick={handleNext}
>
Next Next
</Button> </Button>
) : proceeded ? ( ) : proceeded ? (

9
packages/my-joy-beta/src/containers/create-instance/package.js
View File

@ -15,8 +15,7 @@ import {
Filters, Filters,
Packages, Packages,
Package, Package,
Overview, Overview
NoPackages
} from '@components/create-instance/package'; } from '@components/create-instance/package';
import Title from '@components/create-instance/title'; import Title from '@components/create-instance/title';
import Description from '@components/create-instance/description'; import Description from '@components/create-instance/description';
@ -99,7 +98,11 @@ const PackageContainer = ({
</Fragment> </Fragment>
) : null} ) : null}
{!expanded && selected.id ? ( {!expanded && selected.id ? (
<Overview {...selected} hasVms={hasVms} onCancel={handleCancel} /> <Overview
{...selected}
hasVms={hasVms}
onCancel={handleCancel}
/>
) : null} ) : null}
</Fragment> </Fragment>
)} )}

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

@ -2260,7 +2260,7 @@ exports[`renders <List instances /> without throwing 1`] = `
.c38 { .c38 {
width: 0.375rem; width: 0.375rem;
height: 0.375rem; height: 0.375rem;
border-radius: 0.1875rem; border-radius: 50%;
background-color: rgb(0,152,88); background-color: rgb(0,152,88);
display: inline-block; display: inline-block;
height: 0.6875rem; height: 0.6875rem;
@ -4338,7 +4338,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
.c38 { .c38 {
width: 0.375rem; width: 0.375rem;
height: 0.375rem; height: 0.375rem;
border-radius: 0.1875rem; border-radius: 50%;
background-color: rgb(0,152,88); background-color: rgb(0,152,88);
display: inline-block; display: inline-block;
height: 0.6875rem; height: 0.6875rem;
@ -6959,7 +6959,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
.c38 { .c38 {
width: 0.375rem; width: 0.375rem;
height: 0.375rem; height: 0.375rem;
border-radius: 0.1875rem; border-radius: 50%;
background-color: rgb(0,152,88); background-color: rgb(0,152,88);
display: inline-block; display: inline-block;
height: 0.6875rem; height: 0.6875rem;
@ -9789,7 +9789,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
.c38 { .c38 {
width: 0.375rem; width: 0.375rem;
height: 0.375rem; height: 0.375rem;
border-radius: 0.1875rem; border-radius: 50%;
background-color: rgb(0,152,88); background-color: rgb(0,152,88);
display: inline-block; display: inline-block;
height: 0.6875rem; height: 0.6875rem;

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

@ -1382,7 +1382,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216); border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1); color: rgba(73,73,73,1);
max-width: 18.75rem; max-width: 22.1875rem;
text-overflow: ellipsis; text-overflow: ellipsis;
font-size: 0.9375rem; font-size: 0.9375rem;
line-height: normal !important; line-height: normal !important;
@ -4188,7 +4188,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216); border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1); color: rgba(73,73,73,1);
max-width: 18.75rem; max-width: 22.1875rem;
text-overflow: ellipsis; text-overflow: ellipsis;
font-size: 0.9375rem; font-size: 0.9375rem;
line-height: normal !important; line-height: normal !important;

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

@ -1470,7 +1470,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
.c13 { .c13 {
width: 0.375rem; width: 0.375rem;
height: 0.375rem; height: 0.375rem;
border-radius: 0.1875rem; border-radius: 50%;
background-color: rgb(0,152,88); background-color: rgb(0,152,88);
display: inline-block; display: inline-block;
margin-top: 0.0625rem; margin-top: 0.0625rem;
@ -3842,7 +3842,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
.c13 { .c13 {
width: 0.375rem; width: 0.375rem;
height: 0.375rem; height: 0.375rem;
border-radius: 0.1875rem; border-radius: 50%;
background-color: rgb(0,152,88); background-color: rgb(0,152,88);
display: inline-block; display: inline-block;
margin-top: 0.0625rem; margin-top: 0.0625rem;

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

@ -1391,7 +1391,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216); border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1); color: rgba(73,73,73,1);
max-width: 18.75rem; max-width: 22.1875rem;
text-overflow: ellipsis; text-overflow: ellipsis;
font-size: 0.9375rem; font-size: 0.9375rem;
line-height: normal !important; line-height: normal !important;
@ -3315,7 +3315,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216); border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1); color: rgba(73,73,73,1);
max-width: 18.75rem; max-width: 22.1875rem;
text-overflow: ellipsis; text-overflow: ellipsis;
font-size: 0.9375rem; font-size: 0.9375rem;
line-height: normal !important; line-height: normal !important;
@ -4824,7 +4824,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216); border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1); color: rgba(73,73,73,1);
max-width: 18.75rem; max-width: 22.1875rem;
text-overflow: ellipsis; text-overflow: ellipsis;
font-size: 0.9375rem; font-size: 0.9375rem;
line-height: normal !important; line-height: normal !important;

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

@ -303,7 +303,7 @@ exports[`Form Input 1`] = `
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216); border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1); color: rgba(73,73,73,1);
max-width: 18.75rem; max-width: 22.1875rem;
text-overflow: ellipsis; text-overflow: ellipsis;
font-size: 0.9375rem; font-size: 0.9375rem;
line-height: normal !important; line-height: normal !important;
@ -593,7 +593,7 @@ exports[`Form Select 1`] = `
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216); border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1); color: rgba(73,73,73,1);
max-width: 18.75rem; max-width: 22.1875rem;
text-overflow: ellipsis; text-overflow: ellipsis;
font-size: 0.9375rem; font-size: 0.9375rem;
line-height: normal !important; line-height: normal !important;
@ -693,7 +693,7 @@ exports[`Form Textarea 1`] = `
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216); border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1); color: rgba(73,73,73,1);
max-width: 18.75rem; max-width: 22.1875rem;
text-overflow: ellipsis; text-overflow: ellipsis;
font-size: 0.9375rem; font-size: 0.9375rem;
line-height: normal !important; line-height: normal !important;

6
packages/ui-toolkit/src/form/base/input.js
View File

@ -92,6 +92,10 @@ const style = css`
width: ${remcalc(120)} width: ${remcalc(120)}
`}; `};
${is('big')`
width: ${remcalc(355)}
`};
${is('monospace')` ${is('monospace')`
font-family: ${props => props.theme.monoSpaceFont.family}; font-family: ${props => props.theme.monoSpaceFont.family};
@ -152,7 +156,7 @@ const style = css`
`}; `};
${isNot('fluid')` ${isNot('fluid')`
max-width: ${remcalc(300)}; max-width: ${remcalc(355)};
`}; `};
${is('mono')` ${is('mono')`