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

feat(instances): bug fixes #1387

This commit is contained in:
johnytiago 2018-05-17 11:05:28 +01:00 committed by Sérgio Ramos
parent 5d46689869
commit 0189822a08
22 changed files with 16180 additions and 19354 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
consoles/my-joy-images/src/components/summary.js
View File

@ -12,7 +12,7 @@ import {
CardOutlet,
H2,
P,
Label,
Label as BaseLabel,
Divider,
Button,
QueryBreakpoints,
@ -42,6 +42,10 @@ const VerticalDivider = styled.div`
}
`;
const Label = styled(BaseLabel)`
font-weight: 200;
`;
const GreyLabel = styled(Label)`
opacity: 0.5;
padding-right: ${remcalc(3)};
@ -147,7 +151,7 @@ export default withTheme(({ theme = {}, onRemove, removing, ...image }) => (
<Margin right="1">
<DeleteIcon fill={theme.red} />
</Margin>
<span>Remove</span>
<span>Delete</span>
</Button>
</Medium>
</Col>

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

@ -1050,7 +1050,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
</svg>
</div>
<span>
Remove
Delete
</span>
</button>
</div>
@ -2133,7 +2133,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
</svg>
</div>
<span>
Remove
Delete
</span>
</button>
</div>

17427
consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/summary.spec.js.snap
View File

File diff suppressed because it is too large Load Diff

206
consoles/my-joy-instances/src/components/instances/footer.js
View File

@ -1,6 +1,8 @@
import React from 'react';
import { Row, Col } from 'joyent-react-styled-flexboxgrid';
import { withTheme } from 'styled-components';
import { Margin } from 'styled-components-spacing';
import Flex from 'styled-flex-component';
import {
Button,
@ -25,93 +27,109 @@ export default withTheme(
onRemove,
theme = {}
}) => (
<StickyFooter fixed bottom>
<StickyFooter fixed bottom fill="#FAFAFA">
<Row between="xs" middle="xs">
<Col xs={7}>
{onStart && [
<SmallOnly key="small-only">
<Button
type="button"
onClick={onStart}
disabled={submitting || !allowedActions.start}
loading={submitting && statuses.starting}
secondary
small
icon
>
<StartIcon disabled={submitting || !allowedActions.start} />
</Button>
</SmallOnly>,
<Medium key="medium">
<Button
type="button"
onClick={onStart}
disabled={submitting || !allowedActions.start}
loading={submitting && statuses.starting}
secondary
icon
>
<StartIcon disabled={submitting || !allowedActions.start} />
<span>Start</span>
</Button>
</Medium>
]}
{onStop && [
<SmallOnly key="small-only">
<Button
type="button"
onClick={onStop}
disabled={submitting || !allowedActions.stop}
loading={submitting && statuses.stopping}
secondary
small
icon
>
<StopIcon disabled={submitting || !allowedActions.stop} />
</Button>
</SmallOnly>,
<Medium key="medium">
<Button
type="button"
onClick={onStop}
disabled={submitting || !allowedActions.stop}
loading={submitting && statuses.stopping}
secondary
icon
>
<StopIcon disabled={submitting || !allowedActions.stop} />
<span>Stop</span>
</Button>
</Medium>
]}
{onReboot && [
<SmallOnly key="small-only">
<Button
type="button"
onClick={onReboot}
disabled={submitting || !allowedActions.reboot}
loading={submitting && statuses.rebooting}
secondary
small
icon
>
<ResetIcon disabled={submitting || !allowedActions.reboot} />
</Button>
</SmallOnly>,
<Medium key="medium">
<Button
type="button"
onClick={onReboot}
disabled={submitting || !allowedActions.reboot}
loading={submitting && statuses.rebooting}
secondary
icon
>
<ResetIcon disabled={submitting || !allowedActions.reboot} />
<span>Reboot</span>
</Button>
</Medium>
]}
<Flex>
{onStart && [
<SmallOnly key="small-only">
<Button
type="button"
onClick={onStart}
disabled={submitting || !allowedActions.start}
loading={submitting && statuses.starting}
secondary
small
icon
>
<StartIcon disabled={submitting || !allowedActions.start} />
</Button>
</SmallOnly>,
<Margin right={1}>
<Medium key="medium">
<Button
type="button"
onClick={onStart}
disabled={submitting || !allowedActions.start}
loading={submitting && statuses.starting}
secondary
icon
>
<Margin right={1}>
<StartIcon
disabled={submitting || !allowedActions.start}
/>
</Margin>
<span>Start</span>
</Button>
</Medium>
</Margin>
]}
{onStop && [
<SmallOnly key="small-only">
<Button
type="button"
onClick={onStop}
disabled={submitting || !allowedActions.stop}
loading={submitting && statuses.stopping}
secondary
small
icon
>
<StopIcon disabled={submitting || !allowedActions.stop} />
</Button>
</SmallOnly>,
<Margin right={1}>
<Medium key="medium">
<Button
type="button"
onClick={onStop}
disabled={submitting || !allowedActions.stop}
loading={submitting && statuses.stopping}
secondary
icon
>
<Margin right={1}>
<StopIcon disabled={submitting || !allowedActions.stop} />
</Margin>
<span>Stop</span>
</Button>
</Medium>
</Margin>
]}
{onReboot && [
<SmallOnly key="small-only">
<Button
type="button"
onClick={onReboot}
disabled={submitting || !allowedActions.reboot}
loading={submitting && statuses.rebooting}
secondary
small
icon
>
<ResetIcon disabled={submitting || !allowedActions.reboot} />
</Button>
</SmallOnly>,
<Margin right={1}>
<Medium key="medium">
<Button
type="button"
onClick={onReboot}
disabled={submitting || !allowedActions.reboot}
loading={submitting && statuses.rebooting}
secondary
icon
>
<ResetIcon
disabled={submitting || !allowedActions.reboot}
/>
<span>Reboot</span>
</Button>
</Medium>
</Margin>
]}
</Flex>
</Col>
{onRemove && (
<Col xs={5}>
@ -148,14 +166,16 @@ export default withTheme(
right
icon
>
<DeleteIcon
disabled={submitting || !allowedActions.remove}
fill={
!(submitting || !allowedActions.remove)
? theme.red
: undefined
}
/>
<Margin right={1}>
<DeleteIcon
disabled={submitting || !allowedActions.remove}
fill={
!(submitting || !allowedActions.remove)
? theme.red
: undefined
}
/>
</Margin>
<span>Remove</span>
</Button>
</Medium>

26
consoles/my-joy-instances/src/components/instances/list.js
View File

@ -7,6 +7,7 @@ import { Link } from 'react-router-dom';
import { Field } from 'redux-form';
import Flex from 'styled-flex-component';
import queryString from 'query-string';
import { Padding } from 'styled-components-spacing';
import {
Anchor,
@ -24,8 +25,8 @@ import {
Popover,
PopoverContainer,
PopoverTarget,
PopoverItem,
PopoverDivider,
PopoverItem as BasePopoverItem,
PopoverDivider as BasePopoverDivider,
DotIcon,
ActionsIcon
} from 'joyent-ui-toolkit';
@ -66,6 +67,14 @@ const Actions = styled(Flex)`
height: ${remcalc(48)};
`;
const PopoverItem = styled(BasePopoverItem)`
padding-bottom: ${remcalc(11)};
`;
const PopoverDivider = styled(BasePopoverDivider)`
margin-left: ${remcalc(-18)};
`;
export const FetchingItem = () => (
<TableTr colSpan="6">
<TableTd colSpan="6" middle center>
@ -131,9 +140,14 @@ export const Item = ({
Stop
</PopoverItem>
<PopoverItem disabled={!allowedActions.reboot} onClick={onReboot}>
Reboot
Restart
</PopoverItem>
<PopoverDivider />
<PopoverItem disabled={!allowedActions.remove} onClick={onRemove}>
Delete
</PopoverItem>
<Padding bottom={2}>
<PopoverDivider />
</Padding>
<PopoverItem disabled={false} onClick={onCreateImage}>
<ItemAnchor
href={`${GLOBAL.origin}/images/~create/${id}`}
@ -143,10 +157,6 @@ export const Item = ({
Create Image
</ItemAnchor>
</PopoverItem>
<PopoverDivider />
<PopoverItem disabled={!allowedActions.remove} onClick={onRemove}>
Remove
</PopoverItem>
</Popover>
</TableTd>
</PopoverContainer>

240
consoles/my-joy-instances/src/components/instances/summary.js
View File

@ -1,6 +1,7 @@
import React from 'react';
import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
import { Row, Col } from 'joyent-react-styled-flexboxgrid';
import { default as Flex, FlexItem } from 'styled-flex-component';
import styled, { withTheme } from 'styled-components';
import { Margin, Padding } from 'styled-components-spacing';
import titleCase from 'title-case';
@ -12,10 +13,12 @@ import {
Card,
CardOutlet,
Divider,
ResetIcon,
Button as BaseButton,
Button,
ButtonGroup,
PopoverButton,
PopoverItem as BasePopoverItem,
H2 as BaseH2,
Label,
Label as BaseLabel,
CopiableField,
QueryBreakpoints,
DotIcon,
@ -23,7 +26,6 @@ import {
StartIcon,
StopIcon,
EditIcon,
InstanceTypeIcon,
Input,
FormMeta,
FormGroup
@ -42,6 +44,10 @@ const stateColor = {
FAILED: 'red'
};
const Label = styled(BaseLabel)`
font-weight: 200;
`;
const GreyLabel = styled(Label)`
opacity: 0.5;
padding-right: ${remcalc(3)};
@ -53,16 +59,6 @@ const TrimedLabel = styled(Label)`
text-overflow: ellipsis;
`;
const Flex = styled.div`
align-items: center;
display: flex;
justify-content: flex-start;
@media (max-width: ${remcalc(767)}) {
display: block;
}
`;
const Actionable = styled(Margin)`
cursor: pointer;
`;
@ -84,8 +80,8 @@ const H2 = styled(BaseH2)`
margin: 0;
`;
const Button = styled(BaseButton)`
margin-right: ${remcalc(6)};
const PopoverItem = styled(BasePopoverItem)`
padding-bottom: ${remcalc(11)};
`;
export const Meta = ({
@ -107,7 +103,7 @@ export const Meta = ({
<H2>
{editingName ? (
<form onSubmit={handleSubmit}>
<Flex style={{ alignItems: 'start' }}>
<Flex alignStart>
<FormGroup name="name" field={Field}>
<Input
onBlur={null}
@ -200,127 +196,95 @@ export default withTheme(
<Margin top={3}>
<Row between="xs">
<Col xs={9}>
<Button
href={`${GLOBAL.origin}/images/~create/${instance.id}`}
target="__blank"
rel="noopener noreferrer"
secondary
bold
small
icon
>
<Padding top={0.5}>
<InstanceTypeIcon />
</Padding>
</Button>
<SmallOnly>
<Button
href={`${GLOBAL.origin}/images/~create/${instance.id}`}
target="__blank"
rel="noopener noreferrer"
secondary
bold
small
icon
>
<Padding top={0}>
<InstanceTypeIcon />
</Padding>
</Button>
</SmallOnly>
<SmallOnly>
<Button
type="button"
loading={starting}
disabled={instance.state !== 'STOPPED'}
onClick={() => onAction('start')}
secondary
small
icon
>
<Margin right={2}>
<StartIcon disabled={instance.state !== 'STOPPED'} />
<Flex>
<FlexItem>
<Margin right={1}>
<ButtonGroup>
{instance.state === 'STOPPED' ? (
<Button
type="button"
loading={starting}
disabled={instance.state !== 'STOPPED'}
onClick={() => onAction('start')}
secondary
bold
icon
>
<Margin right={2}>
<StartIcon
disabled={instance.state !== 'STOPPED'}
/>
</Margin>
<span>Start</span>
</Button>
) : (
<Button
type="button"
loading={stopping}
disabled={instance.state !== 'RUNNING'}
onClick={() => onAction('stop')}
secondary
bold
icon
>
<Margin right={2}>
<StopIcon
disabled={instance.state !== 'RUNNING'}
/>
</Margin>
<span>Stop</span>
</Button>
)}
<PopoverButton secondary>
<PopoverItem
disabled={instance.state === 'RUNNING'}
onClick={() =>
instance.state === 'RUNNING'
? null
: onAction('start')
}
>
Start
</PopoverItem>
<PopoverItem
disabled={instance.state === 'STOPPED'}
onClick={() =>
instance.state === 'STOPPED'
? null
: onAction('reboot')
}
>
Restart
</PopoverItem>
<PopoverItem
disabled={instance.state === 'STOPPED'}
onClick={() =>
instance.state === 'STOPPED'
? null
: onAction('stop')
}
>
Stop
</PopoverItem>
</PopoverButton>
</ButtonGroup>
</Margin>
</Button>
</SmallOnly>
<Medium>
<Button
type="button"
loading={starting}
disabled={instance.state !== 'STOPPED'}
onClick={() => onAction('start')}
secondary
bold
icon
>
<Margin right={2}>
<StartIcon disabled={instance.state !== 'STOPPED'} />
</Margin>
<span>Start</span>
</Button>
</Medium>
<SmallOnly>
<Button
type="button"
loading={stopping}
disabled={instance.state !== 'RUNNING'}
onClick={() => onAction('stop')}
secondary
small
icon
>
<Margin right={2}>
<StopIcon disabled={instance.state !== 'RUNNING'} />
</Margin>
</Button>
</SmallOnly>
<Medium>
<Button
type="button"
loading={stopping}
disabled={instance.state !== 'RUNNING'}
onClick={() => onAction('stop')}
secondary
bold
icon
>
<Margin right={2}>
<StopIcon disabled={instance.state !== 'RUNNING'} />
</Margin>
<span>Stop</span>
</Button>
</Medium>
<SmallOnly>
<Button
type="button"
loading={rebooting}
disabled={instance.state !== 'RUNNING'}
onClick={() => onAction('reboot')}
secondary
small
icon
>
<Margin right={2}>
<ResetIcon disabled={instance.state !== 'RUNNING'} />
</Margin>
</Button>
</SmallOnly>
<Medium>
<Button
type="button"
loading={rebooting}
disabled={instance.state !== 'RUNNING'}
onClick={() => onAction('reboot')}
secondary
bold
icon
>
<Margin right={2}>
<ResetIcon disabled={instance.state !== 'RUNNING'} />
</Margin>
<span>Reboot</span>
</Button>
</Medium>
</FlexItem>
<FlexItem>
<Button
href={`${GLOBAL.origin}/images/~create/${
instance.id
}`}
target="__blank"
rel="noopener noreferrer"
secondary
bold
icon
>
Create Image
</Button>
</FlexItem>
</Flex>
</Col>
<Col xs={3}>
<SmallOnly>
@ -374,7 +338,7 @@ export default withTheme(
}
/>
</Margin>
<span>Remove</span>
<span>Delete</span>
</Button>
</Medium>
</Col>

3918
consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/firewall.spec.js.snap
View File

File diff suppressed because it is too large Load Diff

11145
consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/list.spec.js.snap
View File

File diff suppressed because it is too large Load Diff

6
consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/metadata.spec.js.snap
View File

@ -1738,7 +1738,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
</svg>
</div>
<span>
Remove
Delete
</span>
</button>
</div>
@ -4295,7 +4295,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
</svg>
</div>
<span>
Remove
Delete
</span>
</button>
</div>
@ -4525,7 +4525,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
</svg>
</div>
<span>
Remove
Delete
</span>
</button>
</div>

48
consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/networks.spec.js.snap
View File

@ -207,11 +207,15 @@ exports[`renders <Networks /> without throwing 1`] = `
</div>
</div>
</div>
<h3
className="c7"
<div
className="c2"
>
Networks attached to this instance
</h3>
<h3
className="c7"
>
Networks attached to this instance
</h3>
</div>
<div
className="c8 c9"
disabled={false}
@ -700,11 +704,15 @@ exports[`renders <Networks error /> without throwing 1`] = `
</div>
</div>
</div>
<h3
className="c7"
<div
className="c2"
>
Networks attached to this instance
</h3>
<h3
className="c7"
>
Networks attached to this instance
</h3>
</div>
<div
className="c8"
>
@ -924,11 +932,15 @@ exports[`renders <Networks loading /> without throwing 1`] = `
</div>
</div>
</div>
<h3
className="c7"
<div
className="c2"
>
Networks attached to this instance
</h3>
<h3
className="c7"
>
Networks attached to this instance
</h3>
</div>
<div
className="c8"
>
@ -1438,11 +1450,15 @@ exports[`renders <Networks networks /> without throwing 1`] = `
</div>
</div>
</div>
<h3
className="c7"
<div
className="c2"
>
Networks attached to this instance
</h3>
<h3
className="c7"
>
Networks attached to this instance
</h3>
</div>
<div
className="c3"
>

2354
consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/summary.spec.js.snap
View File

File diff suppressed because it is too large Load Diff

4
consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/tags.spec.js.snap
View File

@ -1687,7 +1687,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
</svg>
</div>
<span>
Remove
Delete
</span>
</button>
</div>
@ -3464,7 +3464,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
</svg>
</div>
<span>
Remove
Delete
</span>
</button>
</div>

70
consoles/my-joy-instances/src/containers/instances/firewall.js
View File

@ -1,12 +1,12 @@
/* eslint-disable camelcase */
import React, { Fragment } from 'react';
import React from 'react';
import intercept from 'apr-intercept';
import { connect } from 'react-redux';
import { compose, graphql } from 'react-apollo';
import ReduxForm from 'declarative-redux-form';
import { SubmissionError } from 'redux-form';
import { Margin } from 'styled-components-spacing';
import remcalc from 'remcalc';
import { default as Flex, FlexItem } from 'styled-flex-component';
import isBoolean from 'lodash.isboolean';
import get from 'lodash.get';
@ -15,8 +15,7 @@ import {
Message,
MessageTitle,
MessageDescription,
StatusLoader,
Divider
StatusLoader
} from 'joyent-ui-toolkit';
import {
@ -70,38 +69,37 @@ export const Firewall = ({
</Message>
</Margin>
) : null}
<ReduxForm
form="fw-enabled"
destroyOnUnmount={false}
forceUnregisterOnUnmount={true}
{...{ initialValues: isBoolean(enabled) ? { enabled } : undefined }}
onSubmit={handleEnabledToggle}
>
{props =>
loading ? null : (
<Fragment>
<Margin bottom={5}>
<ToggleFirewallForm {...props} submitOnChange />
</Margin>
<Divider height={remcalc(1)} />
</Fragment>
)
}
</ReduxForm>
<ReduxForm
form="fw-inactive"
destroyOnUnmount={false}
forceUnregisterOnUnmount={true}
initialValues={{ inactive }}
>
{props =>
!enabled || loading ? null : (
<Margin top={4}>
<ToggleInactiveForm {...props} />
</Margin>
)
}
</ReduxForm>
<Flex>
<FlexItem>
<ReduxForm
form="fw-enabled"
destroyOnUnmount={false}
forceUnregisterOnUnmount={true}
{...{ initialValues: isBoolean(enabled) ? { enabled } : undefined }}
onSubmit={handleEnabledToggle}
>
{props =>
loading ? null : (
<Margin right={5}>
<ToggleFirewallForm {...props} submitOnChange />
</Margin>
)
}
</ReduxForm>
</FlexItem>
<FlexItem>
<ReduxForm
form="fw-inactive"
destroyOnUnmount={false}
forceUnregisterOnUnmount={true}
initialValues={{ inactive }}
>
{props =>
!enabled || loading ? null : <ToggleInactiveForm {...props} />
}
</ReduxForm>
</FlexItem>
</Flex>
{!loading && !defaultRules.length && !tagRules.length ? (
<Margin top={5}>
<Empty borderTop>

8
consoles/my-joy-instances/src/containers/instances/networks.js
View File

@ -37,7 +37,9 @@ export const Networks = ({
complete control over the network environment. Read more on fabrics.
</Description>
</Margin>
<H3>Networks attached to this instance</H3>
<Margin bottom={3}>
<H3>Networks attached to this instance</H3>
</Margin>
{loading ? <StatusLoader /> : null}
{!loading && error && !networks.length ? (
<Margin bottom={5}>
@ -79,14 +81,14 @@ export default compose(
}
}),
props: ({ data }) => {
console.log(data);
const { loading, error, variables } = data;
const { id } = variables;
const machines = get(data, 'machines.results', []);
const machines = get(data, 'machine', []);
const instance = find(forceArray(machines), ['id', id]);
const values = get(instance, 'networks', []);
const networks = reverse(sortBy(values, 'public'));
return {
networks,
instance,

35
packages/resource-widgets/src/__tests__/__snapshots__/firewall.spec.js.snap
View File

@ -96,11 +96,6 @@ Array [
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
height: 100%;
-webkit-flex-basis: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
}
.c10 {
@ -1449,11 +1444,6 @@ Array [
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
height: 100%;
-webkit-flex-basis: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
}
.c9 {
@ -1852,11 +1842,6 @@ Array [
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
height: 100%;
-webkit-flex-basis: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
}
.c9 {
@ -2255,11 +2240,6 @@ Array [
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
height: 100%;
-webkit-flex-basis: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
}
.c9 {
@ -2662,11 +2642,6 @@ Array [
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
height: 100%;
-webkit-flex-basis: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
}
.c9 {
@ -3073,11 +3048,6 @@ Array [
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
height: 100%;
-webkit-flex-basis: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
}
.c9 {
@ -3580,11 +3550,6 @@ Array [
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
height: 100%;
-webkit-flex-basis: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
}
.c10 {

10
packages/resource-widgets/src/firewall/index.js
View File

@ -76,7 +76,7 @@ const Rule = ({ enabled, rule_obj }) => {
<Padding left={3} right={3} top={2} bottom={2}>
<Row>
<Col xs={3}>
<Flex justifyStart alignCenter contentStretch full>
<Flex justifyStart alignCenter contentStretch>
<Margin right={0.5}>
<FlexItem>
<Strong style={style}>From: </Strong>
@ -86,7 +86,7 @@ const Rule = ({ enabled, rule_obj }) => {
</Flex>
</Col>
<Col xs={3}>
<Flex justifyStart alignCenter contentStretch full>
<Flex justifyStart alignCenter contentStretch>
<Margin right={0.5}>
<FlexItem>
<Strong style={style}>To: </Strong>
@ -96,7 +96,7 @@ const Rule = ({ enabled, rule_obj }) => {
</Flex>
</Col>
<Col xs={2}>
<Flex justifyStart alignCenter contentStretch full>
<Flex justifyStart alignCenter contentStretch>
<Margin right={0.5}>
<FlexItem>
<Strong style={style}>Protocol: </Strong>
@ -108,7 +108,7 @@ const Rule = ({ enabled, rule_obj }) => {
</Flex>
</Col>
<Col xs={2}>
<Flex justifyStart alignCenter contentStretch full>
<Flex justifyStart alignCenter contentStretch>
<Margin right={0.5}>
<FlexItem>
<Strong style={style}>Ports: </Strong>
@ -120,7 +120,7 @@ const Rule = ({ enabled, rule_obj }) => {
</Flex>
</Col>
<Col xs={2}>
<Flex justifyStart alignCenter contentStretch full>
<Flex justifyStart alignCenter contentStretch>
<Margin right={0.5}>
<FlexItem>
<Strong style={style}>Action: </Strong>

1
packages/ui-toolkit/src/button/group.js
View File

@ -6,6 +6,7 @@ export default styled.span`
& [data-ui-button='true']:not(:first-child) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-left: none;
}
& [data-ui-button='true']:not(:last-child) {

3
packages/ui-toolkit/src/footer/sticky-footer.js
View File

@ -19,7 +19,8 @@ const Footer = styled.div`
flex-wrap: nowrap;
align-content: stretch;
align-items: stretch;
background-color: rgba(241, 241, 241, 1);
background-color: ${props =>
props.fill ? props => props.fill : 'rgba(241, 241, 241, 1)'};
border-top: ${remcalc(1)} solid ${props => props.theme.grey};
max-height: ${remcalc(53)};
min-height: ${remcalc(53)};

14
packages/ui-toolkit/src/key-value/__tests__/__snapshots__/key-value.spec.js.snap
View File

@ -995,7 +995,7 @@ exports[`renders <KeyValue /> without throwing 1`] = `
</svg>
</div>
<span>
Remove
Delete
</span>
</button>
</div>
@ -2207,7 +2207,7 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
</svg>
</div>
<span>
Remove
Delete
</span>
</button>
</div>
@ -3269,7 +3269,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
</svg>
</div>
<span>
Remove
Delete
</span>
</button>
</div>
@ -4276,7 +4276,7 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
</svg>
</div>
<span>
Remove
Delete
</span>
</button>
</div>
@ -5285,7 +5285,7 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
</svg>
</div>
<span>
Remove
Delete
</span>
</button>
</div>
@ -7500,7 +7500,7 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
</svg>
</div>
<span>
Remove
Delete
</span>
</button>
</div>
@ -8507,7 +8507,7 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
</svg>
</div>
<span>
Remove
Delete
</span>
</button>
</div>

2
packages/ui-toolkit/src/key-value/index.js
View File

@ -351,7 +351,7 @@ export const KeyValue = ({
fill={disabled || submitting ? undefined : theme.red}
/>
</Margin>
<span>Remove</span>
<span>Delete</span>
</Button>
</Col>
)}

1
packages/ui-toolkit/src/popover/__tests__/__snapshots__/popover.spec.js.snap
View File

@ -36,6 +36,7 @@ Array [
.c1 {
display: block;
text-align: left;
font-size: 1rem;
cursor: pointer;
}

4
packages/ui-toolkit/src/popover/item.js
View File

@ -2,12 +2,12 @@ import React, { Component } from 'react';
import is, { isNot } from 'styled-is';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import remcalc from 'remcalc';
const BaseItem = styled.span`
display: block;
text-align: left;
${isNot('disabled')`
font-size: ${remcalc(16)} ${isNot('disabled')`
cursor: pointer;
&:hover {