fix(images): fix small bugs from QA

fixes #1202
This commit is contained in:
Sara Vieira 2018-02-13 20:33:03 +00:00 committed by Sérgio Ramos
parent 29fc12d4dd
commit 4dc7b9179b
58 changed files with 163 additions and 69 deletions

View File

@ -30,10 +30,42 @@ const A = styled(Anchor)`
font-weight: ${props => props.theme.font.weight.semibold};
`;
const CardAnchor = styled(Anchor)`
color: ${props => props.theme.text};
text-decoration: none;
`;
const Type = styled(Margin)`
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
`;
const Content = styled(Padding)`
max-width: calc(100% - 48px);
overflow: hidden;
`;
const Max = styled(Flex)`
max-width: 100%;
height: 100%;
`;
const DividerContainer = styled(Margin)`
height: 100%;
`;
const Actions = styled(Flex)`
width: 48px;
height: 48px;
min-width: 48px;
`;
export const Image = ({ name, os, version, type }) => (
<Margin bottom={3}>
<Card>
<CardHeader white>
<CardAnchor to={`/${name}`} component={Link}>
<Card radius>
<CardHeader white radius>
<Padding left={2} right={2}>
<Flex full alignCenter>
<Margin right={2}>
@ -49,19 +81,19 @@ export const Image = ({ name, os, version, type }) => (
</Padding>
</CardHeader>
<Flex justifyBetween>
<Padding left={2} top={2} bottom={2}>
<Flex justifyBetween>
<Flex>
<Content left={2} top={2} bottom={2}>
<Max justifyBetween>
<Max alignCenter>
<Flex>{version}</Flex>
<Margin left={1}>
<DividerContainer left={2}>
<Divider width={remcalc(1)} height="100%" />
</Margin>
<Padding left={2}>{ImageType[type]}</Padding>
</Flex>
</Flex>
</Padding>
</DividerContainer>
<Type left={2}>{ImageType[type]}</Type>
</Max>
</Max>
</Content>
<PopoverContainer clickable>
<FlexItem basis={remcalc(48)}>
<Actions>
<PopoverTarget box style={{ borderLeft: '1px solid #D8D8D8' }}>
<ActionsIcon />
</PopoverTarget>
@ -74,20 +106,23 @@ export const Image = ({ name, os, version, type }) => (
Remove
</PopoverItem>
</Popover>
</FlexItem>
</Actions>
</PopoverContainer>
</Flex>
</Card>
</CardAnchor>
</Margin>
);
export const Filters = () => (
export const Filters = ({ selected }) => (
<Fragment>
<FormGroup name="image-type" value="all" field={Field} type="radio">
<Radio noMargin>
<Flex alignCenter>
<Margin right={2}>
<FormLabel>All</FormLabel>
<FormLabel big normal={selected !== 'all'}>
All
</FormLabel>
</Margin>
</Flex>
</Radio>
@ -101,7 +136,9 @@ export const Filters = () => (
<Radio noMargin>
<Flex alignCenter>
<Margin right={2}>
<FormLabel>Virtual machines</FormLabel>
<FormLabel big normal={selected !== 'hardware-virtual-machine'}>
Virtual machines
</FormLabel>
</Margin>
</Flex>
</Radio>
@ -115,7 +152,9 @@ export const Filters = () => (
<Radio noMargin>
<Flex alignCenter>
<Margin right={2}>
<FormLabel>Infrastructure container</FormLabel>
<FormLabel big normal={selected !== 'infrastructure-container'}>
Infrastructure container
</FormLabel>
</Margin>
</Flex>
</Radio>

View File

@ -19,7 +19,9 @@ import {
CopiableField,
DuplicateIcon,
DeleteIcon,
DotIcon
DotIcon,
FormLabel,
Input
} from 'joyent-ui-toolkit';
import { ImageType, OS } from '@root/constants';
@ -139,10 +141,17 @@ export default withTheme(({ theme = {}, ...image }) => (
</Margin>
<CopiableField text={(image.id || '').split('-')[0]} label="ID" />
<CopiableField text={image.id} label="UUID" />
<CopiableField
text={titleCase(image.os)}
label="Operating system"
<Row>
<Col xs={12} md={7}>
<FormLabel>Operating system</FormLabel>
<Input
monospace
onBlur={null}
fluid
value={titleCase(image.os)}
/>
</Col>
</Row>
</Padding>
</CardOutlet>
</Card>

View File

@ -32,7 +32,8 @@ export const List = ({
allImages = [],
loading = false,
error = null,
history
history,
typeValue
}) => (
<ViewContainer main>
<Divider height={remcalc(30)} transparent />
@ -63,7 +64,11 @@ export const List = ({
form={TOGGLE_FORM_DETAILS}
initialValues={{ 'image-type': 'all' }}
>
{props => (allImages.length ? <Filters {...props} /> : null)}
{props =>
allImages.length ? (
<Filters selected={typeValue} {...props} />
) : null
}
</ReduxForm>
</Margin>
<Row>
@ -124,7 +129,8 @@ export default compose(
return true;
}
}),
allImages: images
allImages: images,
typeValue
};
})
)(List);

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB

View File

@ -798,6 +798,7 @@ exports[`renders <Hostname values /> without throwing 1`] = `
cursor: not-allowed;
font-family: "Roboto Mono",monospace;
width: 100%;
min-width: 100%;
font-size: 0.9375rem;
line-height: normal !important;
font-style: normal;

View File

@ -3042,6 +3042,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
color: rgba(73,73,73,1);
font-family: "Roboto Mono",monospace;
width: 100%;
min-width: 100%;
text-overflow: ellipsis;
resize: vertical;
font-size: 0.9375rem;

Binary file not shown.

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 10 KiB

View File

@ -1094,10 +1094,6 @@ exports[`renders <Package /> without throwing 1`] = `
align-items: center;
}
.c3 label {
font-weight: 400;
}
.c1 {
border-width: 0.0625rem;
border-style: solid;

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.2 KiB

After

Width:  |  Height:  |  Size: 9.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 35 KiB

After

Width:  |  Height:  |  Size: 35 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 63 KiB

After

Width:  |  Height:  |  Size: 63 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 64 KiB

After

Width:  |  Height:  |  Size: 64 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 30 KiB

After

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 37 KiB

After

Width:  |  Height:  |  Size: 37 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 38 KiB

After

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 38 KiB

After

Width:  |  Height:  |  Size: 38 KiB

View File

@ -769,6 +769,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
color: rgba(73,73,73,1);
font-family: "Roboto Mono",monospace;
width: 100%;
min-width: 100%;
text-overflow: ellipsis;
resize: vertical;
font-size: 0.9375rem;
@ -1833,6 +1834,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
color: rgba(73,73,73,1);
font-family: "Roboto Mono",monospace;
width: 100%;
min-width: 100%;
text-overflow: ellipsis;
resize: vertical;
font-size: 0.9375rem;

View File

@ -860,6 +860,7 @@ exports[`renders <Summary /> without throwing 1`] = `
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;
@ -938,6 +939,7 @@ exports[`renders <Summary /> without throwing 1`] = `
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;
@ -2822,6 +2824,7 @@ exports[`renders <Summary instance /> without throwing 1`] = `
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;
@ -4883,6 +4886,7 @@ exports[`renders <Summary instance /> without throwing 2`] = `
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;
@ -6832,6 +6836,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
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;
@ -6910,6 +6915,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
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;
@ -8846,6 +8852,7 @@ exports[`renders <Summary state /> without throwing 1`] = `
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;
@ -8924,6 +8931,7 @@ exports[`renders <Summary state /> without throwing 1`] = `
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;
@ -10808,6 +10816,7 @@ exports[`renders <Summary state /> without throwing 2`] = `
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;
@ -10886,6 +10895,7 @@ exports[`renders <Summary state /> without throwing 2`] = `
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;
@ -12606,6 +12616,7 @@ exports[`renders <Summary state /> without throwing 3`] = `
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;
@ -12684,6 +12695,7 @@ exports[`renders <Summary state /> without throwing 3`] = `
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;

Binary file not shown.

Before

Width:  |  Height:  |  Size: 39 KiB

After

Width:  |  Height:  |  Size: 39 KiB

View File

@ -1186,6 +1186,7 @@ Array [
color: rgba(73,73,73,1);
font-family: "Roboto Mono",monospace;
width: 100%;
min-width: 100%;
text-overflow: ellipsis;
resize: vertical;
font-size: 0.9375rem;
@ -3124,6 +3125,7 @@ Array [
color: rgba(73,73,73,1);
font-family: "Roboto Mono",monospace;
width: 100%;
min-width: 100%;
text-overflow: ellipsis;
resize: vertical;
font-size: 0.9375rem;
@ -4241,6 +4243,7 @@ Array [
color: rgba(73,73,73,1);
font-family: "Roboto Mono",monospace;
width: 100%;
min-width: 100%;
text-overflow: ellipsis;
resize: vertical;
font-size: 0.9375rem;
@ -5629,6 +5632,7 @@ Array [
color: rgba(73,73,73,1);
font-family: "Roboto Mono",monospace;
width: 100%;
min-width: 100%;
text-overflow: ellipsis;
resize: vertical;
font-size: 0.9375rem;
@ -6765,6 +6769,7 @@ Array [
color: rgba(73,73,73,1);
font-family: "Roboto Mono",monospace;
width: 100%;
min-width: 100%;
text-overflow: ellipsis;
resize: vertical;
font-size: 0.9375rem;

View File

@ -849,6 +849,7 @@ Array [
color: rgba(73,73,73,1);
font-family: "Roboto Mono",monospace;
width: 100%;
min-width: 100%;
text-overflow: ellipsis;
resize: vertical;
font-size: 0.9375rem;
@ -2039,6 +2040,7 @@ Array [
color: rgba(73,73,73,1);
font-family: "Roboto Mono",monospace;
width: 100%;
min-width: 100%;
text-overflow: ellipsis;
resize: vertical;
font-size: 0.9375rem;
@ -3873,6 +3875,7 @@ Array [
color: rgba(73,73,73,1);
font-family: "Roboto Mono",monospace;
width: 100%;
min-width: 100%;
text-overflow: ellipsis;
resize: vertical;
font-size: 0.9375rem;
@ -5172,6 +5175,7 @@ Array [
color: rgba(73,73,73,1);
font-family: "Roboto Mono",monospace;
width: 100%;
min-width: 100%;
text-overflow: ellipsis;
resize: vertical;
font-size: 0.9375rem;
@ -6509,6 +6513,7 @@ Array [
color: rgba(73,73,73,1);
font-family: "Roboto Mono",monospace;
width: 100%;
min-width: 100%;
text-overflow: ellipsis;
resize: vertical;
font-size: 0.9375rem;
@ -7780,6 +7785,7 @@ Array [
color: rgba(73,73,73,1);
font-family: "Roboto Mono",monospace;
width: 100%;
min-width: 100%;
text-overflow: ellipsis;
resize: vertical;
font-size: 0.9375rem;

Binary file not shown.

Before

Width:  |  Height:  |  Size: 84 KiB

After

Width:  |  Height:  |  Size: 84 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 116 KiB

After

Width:  |  Height:  |  Size: 116 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 30 KiB

After

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 122 KiB

After

Width:  |  Height:  |  Size: 122 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 87 KiB

After

Width:  |  Height:  |  Size: 87 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 91 KiB

After

Width:  |  Height:  |  Size: 91 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 70 KiB

After

Width:  |  Height:  |  Size: 70 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 70 KiB

After

Width:  |  Height:  |  Size: 70 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 42 KiB

After

Width:  |  Height:  |  Size: 42 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 78 KiB

After

Width:  |  Height:  |  Size: 78 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 76 KiB

After

Width:  |  Height:  |  Size: 76 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 36 KiB

After

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 37 KiB

After

Width:  |  Height:  |  Size: 37 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 38 KiB

After

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 50 KiB

After

Width:  |  Height:  |  Size: 50 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 38 KiB

After

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.1 KiB

After

Width:  |  Height:  |  Size: 9.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.1 KiB

After

Width:  |  Height:  |  Size: 9.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.1 KiB

After

Width:  |  Height:  |  Size: 9.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.1 KiB

After

Width:  |  Height:  |  Size: 9.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 63 KiB

After

Width:  |  Height:  |  Size: 63 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 64 KiB

After

Width:  |  Height:  |  Size: 64 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 23 KiB

After

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 16 KiB

View File

@ -1622,6 +1622,7 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
cursor: not-allowed;
font-family: "Roboto Mono",monospace;
width: 100%;
min-width: 100%;
font-size: 0.9375rem;
line-height: normal !important;
font-style: normal;
@ -4069,6 +4070,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
cursor: not-allowed;
font-family: "Roboto Mono",monospace;
width: 100%;
min-width: 100%;
font-size: 0.9375rem;
line-height: normal !important;
font-style: normal;

View File

@ -1427,6 +1427,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
color: rgba(73,73,73,1);
font-family: "Roboto Mono",monospace;
width: 100%;
min-width: 100%;
text-overflow: ellipsis;
resize: vertical;
font-size: 0.9375rem;
@ -4065,6 +4066,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
color: rgba(73,73,73,1);
font-family: "Roboto Mono",monospace;
width: 100%;
min-width: 100%;
text-overflow: ellipsis;
resize: vertical;
font-size: 0.9375rem;

View File

@ -1928,6 +1928,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
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;
@ -4027,6 +4028,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
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;

View File

@ -44,6 +44,10 @@ export const BaseCard = styled.div`
background-color: ${props => props.theme.white};
border-color: ${props => props.theme.grey};
${is('radius')`
border-radius: ${remcalc(4)};
`}
${is('shadow')`
/* primary */
box-shadow: ${props => props.theme.shadows.bottomShadow};

View File

@ -17,6 +17,12 @@ const BaseHeader = BaseCard.extend`
margin: ${remcalc(-1)} ${remcalc(-1)} 0 ${remcalc(-1)};
${is('radius')`
border-radius: ${remcalc(4)};
border-bottom-right-radius: ${remcalc(0)};
border-bottom-left-radius: ${remcalc(0)};
`}
${is('parentCollapsed')`
margin: ${remcalc(-1)};
box-shadow: none;

View File

@ -525,10 +525,6 @@ exports[`Form Radio 1`] = `
align-items: center;
}
.c0 label {
font-weight: 400;
}
<li
className="c0"
disabled={false}

View File

@ -114,6 +114,7 @@ const style = css`
${is('fluid')`
width: 100%;
min-width: 100%;
`};
${is('xSmall')`

View File

@ -14,6 +14,14 @@ const StyledLabel = Label.extend`
${is('disabled') `
color: ${props => props.theme.grey};
`};
${is('big') `
font-size: ${remcalc(15)};
`};
${is('normal') `
font-weight: ${props => props.theme.font.weight.normal};
`};
`;
export default props => {

View File

@ -10,10 +10,6 @@ const Li = styled.li`
list-style-type: none;
display: flex;
align-items: center;
label {
font-weight: 400;
}
`;
const Ul = styled.ul`