mpana/copilot
1
0
Fork 0
mirror of https://github.com/yldio/copilot.git synced 2024-11-28 14:10:04 +02:00
Code Issues Releases Wiki Activity

fix(628) UI Polish for Creating Deployment Group & Deployment Group List

Browse Source
This commit is contained in:
Sara Vieira 2017-10-03 13:24:06 +01:00
parent b151b4fd4a
commit 7a4161d5a8
21 changed files with 2387 additions and 2058 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/cp-frontend/.eslintrc
View File

@ -6,6 +6,7 @@
// temp // temp
"no-undef": 1, "no-undef": 1,
"no-debugger": 1, "no-debugger": 1,
"no-negated-condition": 0 "no-negated-condition": 0,
"jsx-a11y/href-no-hash": 0
} }
} }

1
packages/cp-frontend/package.json
View File

@ -6,6 +6,7 @@
"main": "build/", "main": "build/",
"scripts": { "scripts": {
"dev": "REACT_APP_GQL_PORT=3000 PORT=3069 REACT_APP_GQL_PROTOCOL=http react-scripts start", "dev": "REACT_APP_GQL_PORT=3000 PORT=3069 REACT_APP_GQL_PROTOCOL=http react-scripts start",
"start-now": "REACT_APP_GQL_PORT=8080 PORT=3069 REACT_APP_GQL_HOSTNAME=joyent-cp-gql-mock-server-sxcvsebikv.now.sh react-scripts start",
"start": "PORT=3069 react-scripts start", "start": "PORT=3069 react-scripts start",
"build": "NODE_ENV=production react-scripts build", "build": "NODE_ENV=production react-scripts build",
"lint:css": "echo 0", "lint:css": "echo 0",

26
packages/cp-frontend/src/assets/Import.svg Normal file
View File

@ -0,0 +1,26 @@
<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Import</title>
<desc>Created using Figma</desc>
<g id="Canvas" transform="translate(-2061 2768)">
<clipPath id="clip-0" clip-rule="evenodd">
<path d="M 2061 -2768L 2085 -2768L 2085 -2744L 2061 -2744L 2061 -2768Z" fill="#FFFFFF"/>
</clipPath>
<g id="Import" clip-path="url(#clip-0)">
<path d="M 2061 -2768L 2085 -2768L 2085 -2744L 2061 -2744L 2061 -2768Z" fill="#FFFFFF"/>
<g id="Bottom">
<use xlink:href="#path0_fill" transform="translate(2061 -2754)" fill="#464646"/>
</g>
<g id="Line">
<use xlink:href="#path1_fill" transform="matrix(1 0 0 1 2072 -2768)" fill="#464646"/>
</g>
<g id="Arrow">
<use xlink:href="#path2_fill" transform="translate(2067.29 -2755)" fill="#464646"/>
</g>
</g>
</g>
<defs>
<path id="path0_fill" fill-rule="evenodd" d="M 0 0L 2 0L 2 8L 22 8L 22 0L 24 0L 24 10L 22 10L 2 10L 0 10L 0 0Z"/>
<path id="path1_fill" fill-rule="evenodd" d="M 0 0L 2 0L 2 18L 0 18L 0 0Z"/>
<path id="path2_fill" fill-rule="evenodd" d="M 1.41431 0L 0 1.41431L 4.29468 5.70557L 4.94971 6.36401L 5.70874 7.11987L 11.4143 1.41455L 10 0.000244141L 5.70728 4.29297L 1.41431 0Z"/>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

2
packages/cp-frontend/src/components/manifest/environment.js
View File

@ -49,7 +49,7 @@ export const Environment = ({
loading={loading} loading={loading}
type="submit" type="submit"
> >
Continue Next
</Button> </Button>
</ButtonsRow> </ButtonsRow>
) : null; ) : null;

10
packages/cp-frontend/src/components/manifest/label.js Normal file
View File

@ -0,0 +1,10 @@
import { FormLabel } from 'joyent-ui-toolkit';
import styled from 'styled-components';
import remcalc from 'remcalc';
const StyledFormLabel = styled(FormLabel)`
margin-top: ${remcalc(24)};
margin-bottom: ${props => props.bottomSpace ? remcalc(16) : remcalc(6)};
`;
export default StyledFormLabel;

11
packages/cp-frontend/src/components/manifest/manifest.js
View File

@ -1,13 +1,12 @@
import React from 'react'; import React from 'react';
import { FormGroup, FormMeta, Button, FormLabel } from 'joyent-ui-toolkit'; import { FormGroup, FormMeta, Button } from 'joyent-ui-toolkit';
import { Row } from 'react-styled-flexboxgrid'; import { Row } from 'react-styled-flexboxgrid';
import remcalc from 'remcalc'; import remcalc from 'remcalc';
import { Field } from 'redux-form'; import { Field } from 'redux-form';
import { MEditor } from './editors'; import { MEditor } from './editors';
import StyledFormLabel from './label';
const ButtonsRow = Row.extend` const ButtonsRow = Row.extend`margin: ${remcalc(29)} 0 ${remcalc(60)} 0;`;
margin: ${remcalc(29)} 0 ${remcalc(60)} 0;
`;
export const Manifest = ({ export const Manifest = ({
handleSubmit, handleSubmit,
@ -19,7 +18,7 @@ export const Manifest = ({
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
<FormGroup reduxForm> <FormGroup reduxForm>
<FormMeta left> <FormMeta left>
<FormLabel>Project manifest</FormLabel> <StyledFormLabel bottomSpace>Project manifest</StyledFormLabel>
</FormMeta> </FormMeta>
<Field name="manifest" defaultValue={defaultValue} component={MEditor} /> <Field name="manifest" defaultValue={defaultValue} component={MEditor} />
</FormGroup> </FormGroup>
@ -32,7 +31,7 @@ export const Manifest = ({
loading={loading} loading={loading}
type="submit" type="submit"
> >
Environment Next
</Button> </Button>
</ButtonsRow> </ButtonsRow>
</form> </form>

4
packages/cp-frontend/src/components/manifest/name.js
View File

@ -1,11 +1,11 @@
import React from 'react'; import React from 'react';
import { Row, Col } from 'react-styled-flexboxgrid'; import { Row, Col } from 'react-styled-flexboxgrid';
import remcalc from 'remcalc'; import remcalc from 'remcalc';
import StyledFormLabel from './label';
import { import {
FormMeta, FormMeta,
Button, Button,
FormLabel,
Input, Input,
Small, Small,
FormGroup FormGroup
@ -19,7 +19,7 @@ export const Name = ({ handleSubmit, onCancel, dirty }) => (
<Col xs={12} md={4} lg={4}> <Col xs={12} md={4} lg={4}>
<FormGroup name="name" reduxForm> <FormGroup name="name" reduxForm>
<FormMeta left> <FormMeta left>
<FormLabel>Name the new deployment group</FormLabel> <StyledFormLabel>Name the new deployment group</StyledFormLabel>
<Small> <Small>
Your services will be deployed to eu-east-1 data center. Your services will be deployed to eu-east-1 data center.
</Small> </Small>

28
packages/cp-frontend/src/components/manifest/progress.js
View File

@ -1,4 +1,5 @@
import React from 'react'; import React from 'react';
import styled from 'styled-components';
import { import {
Progressbar, Progressbar,
@ -6,20 +7,27 @@ import {
ProgressbarButton ProgressbarButton
} from 'joyent-ui-toolkit'; } from 'joyent-ui-toolkit';
const StyledProgressbarButton = styled(ProgressbarButton)`
svg {
margin-top: 1px;
margin-left: 1px;
}
`;
const Progress = ({ stage, create, edit }) => { const Progress = ({ stage, create, edit }) => {
const _nameCompleted = stage !== 'name'; const _nameCompleted = stage !== 'name';
const _nameActive = stage === 'name'; const _nameActive = stage === 'name';
const _name = !create ? null : ( const _name = !create ? null : (
<ProgressbarItem> <ProgressbarItem>
<ProgressbarButton <StyledProgressbarButton
zIndex="10" zIndex="10"
completed={_nameCompleted} completed={_nameCompleted}
active={_nameActive} active={_nameActive}
first first
> >
Name the group Name the group
</ProgressbarButton> </StyledProgressbarButton>
</ProgressbarItem> </ProgressbarItem>
); );
@ -28,14 +36,14 @@ const Progress = ({ stage, create, edit }) => {
const _manifest = ( const _manifest = (
<ProgressbarItem> <ProgressbarItem>
<ProgressbarButton <StyledProgressbarButton
zIndex="9" zIndex="9"
completed={_manifestCompleted} completed={_manifestCompleted}
active={_manifestActive} active={_manifestActive}
first={edit} first={edit}
> >
Define Services Define services
</ProgressbarButton> </StyledProgressbarButton>
</ProgressbarItem> </ProgressbarItem>
); );
@ -44,13 +52,13 @@ const Progress = ({ stage, create, edit }) => {
const _environment = ( const _environment = (
<ProgressbarItem> <ProgressbarItem>
<ProgressbarButton <StyledProgressbarButton
zIndex="8" zIndex="8"
completed={_environmentCompleted} completed={_environmentCompleted}
active={_environmentActive} active={_environmentActive}
> >
Define Environment Define environment
</ProgressbarButton> </StyledProgressbarButton>
</ProgressbarItem> </ProgressbarItem>
); );
@ -58,9 +66,9 @@ const Progress = ({ stage, create, edit }) => {
const _review = ( const _review = (
<ProgressbarItem> <ProgressbarItem>
<ProgressbarButton zIndex="7" active={_reviewActive} last> <StyledProgressbarButton zIndex="7" active={_reviewActive} last>
Review and deploy Review and deploy
</ProgressbarButton> </StyledProgressbarButton>
</ProgressbarItem> </ProgressbarItem>
); );

40
packages/cp-frontend/src/components/manifest/review.js
View File

@ -7,9 +7,9 @@ import {
Divider, Divider,
H3, H3,
P, P,
Chevron,
typography, typography,
Card Card,
Message
} from 'joyent-ui-toolkit'; } from 'joyent-ui-toolkit';
import forceArray from 'force-array'; import forceArray from 'force-array';
import styled from 'styled-components'; import styled from 'styled-components';
@ -54,14 +54,21 @@ const ServiceCard = Card.extend`
const Dl = styled.dl`margin: 0;`; const Dl = styled.dl`margin: 0;`;
const EnvironmentChevron = styled(Chevron)`float: right;`; const Chevron = styled.svg`
transform: ;
float: right;
position: relative;
margin-top: 16px;
transform: ${props =>
props.down ? 'rotate(90deg) scale(3)' : 'rotate(270deg) scale(3)'};
`;
const EnvironmentReview = ({ environment }) => { const EnvironmentReview = ({ environment }) => {
const value = environment const value = environment
.map(({ name, value }) => `${name}=${value}`) .map(({ name, value }) => `${name}=${value}`)
.join('\n'); .join('\n');
return <EEditor input={{ value }} />; return <EEditor readOnly input={{ value }} />;
}; };
export const Review = ({ export const Review = ({
@ -71,8 +78,10 @@ export const Review = ({
dirty, dirty,
loading, loading,
environmentToggles, environmentToggles,
datacenter,
...state ...state
}) => { }) => {
console.log(datacenter);
const serviceList = forceArray(state.services).map(({ name, config }) => ( const serviceList = forceArray(state.services).map(({ name, config }) => (
<ServiceCard key={name}> <ServiceCard key={name}>
<ServiceName>{name}</ServiceName> <ServiceName>{name}</ServiceName>
@ -90,10 +99,18 @@ export const Review = ({
onClick={() => onEnvironmentToggle(name)} onClick={() => onEnvironmentToggle(name)}
> >
Environment variables{' '} Environment variables{' '}
<EnvironmentChevron { /* I'M SORRY */ }
<Chevron
width="20"
height="7"
viewBox="0 0 10 20"
down={!environmentToggles[name]} down={!environmentToggles[name]}
up={environmentToggles[name]} >
<path
fill="#464646"
d="M 1.1206 0L 0 1.36044L 3.49581 4.8L 0 8.23956L 1.1206 9.6L 6 4.8L 1.1206 0Z"
/> />
</Chevron>
</ServiceEnvironmentTitle> </ServiceEnvironmentTitle>
) : null} ) : null}
{config.environment && {config.environment &&
@ -106,12 +123,18 @@ export const Review = ({
return ( return (
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
<Message
title="Reviewing"
message="Review names of services, images being used and packages you chose or that have been recommended to you"
type="EDUCATIONAL"
/>
{serviceList} {serviceList}
<P>A single instance of each service will be deployed.</P>
<ButtonsRow> <ButtonsRow>
<Button type="button" onClick={onCancel} disabled={loading} secondary> <Button type="button" onClick={onCancel} disabled={loading} secondary>
Cancel Cancel
</Button> </Button>
<Button disabled={loading} loading={loading} type="submit"> <Button loading={loading} type="submit">
Confirm and Deploy Confirm and Deploy
</Button> </Button>
</ButtonsRow> </ButtonsRow>
@ -119,5 +142,4 @@ export const Review = ({
); );
}; };
export default Review;
export default Review

9
packages/cp-frontend/src/containers/deployment-groups/list.js
View File

@ -14,10 +14,9 @@ import DeploymentGroupsQuery from '@graphql/DeploymentGroups.gql';
import DeploymentGroupsImportableQuery from '@graphql/DeploymentGroupsImportable.gql'; import DeploymentGroupsImportableQuery from '@graphql/DeploymentGroupsImportable.gql';
import { H3, Small, IconButton, BinIcon } from 'joyent-ui-toolkit'; import { H3, Small, IconButton, BinIcon } from 'joyent-ui-toolkit';
import { withNotFound, GqlPaths } from '@containers/navigation'; import { withNotFound, GqlPaths } from '@containers/navigation';
import ImportIcon from '../../assets/Import.svg';
const DGsRows = Row.extend` const DGsRows = Row.extend`margin-top: ${remcalc(-7)};`;
margin-top: ${remcalc(-7)};
`;
const Box = styled.div` const Box = styled.div`
position: relative; position: relative;
@ -162,7 +161,9 @@ export const DeploymentGroupList = ({
<Col xs={12} sm={4} md={3} lg={3} key={slug}> <Col xs={12} sm={4} md={3} lg={3} key={slug}>
<BoxCreate> <BoxCreate>
<StyledCreateLink to={`${match.path}/~import/${slug}`}> <StyledCreateLink to={`${match.path}/~import/${slug}`}>
<Oval>&#10549;</Oval> <Oval>
<ImportIcon />
</Oval>
<CreateTitle>{name}</CreateTitle> <CreateTitle>{name}</CreateTitle>
</StyledCreateLink> </StyledCreateLink>
</BoxCreate> </BoxCreate>

2
packages/cp-frontend/test/unit/components/manifest/__snapshots__/environment.js.snap
View File

@ -505,7 +505,7 @@ exports[`renders <TestEnvironmentForm /> without throwing 1`] = `
> >
<input <input
className="c13 c14" className="c13 c14"
id="bVVQYi" id="boppOm"
placeholder="Filename including extension…" placeholder="Filename including extension…"
type="text" type="text"
value={undefined} value={undefined}

2
packages/cp-frontend/test/unit/components/manifest/__snapshots__/files.js.snap
View File

@ -192,7 +192,7 @@ exports[`renders <Files /> without throwing 1`] = `
> >
<input <input
className="c4 c5" className="c4 c5"
id="SlzVp" id="UJhJl"
placeholder="Filename including extension…" placeholder="Filename including extension…"
type="text" type="text"
value={undefined} value={undefined}

190
packages/cp-frontend/test/unit/components/manifest/__snapshots__/name.js.snap
View File

@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders <Name /> without throwing 1`] = ` exports[`renders <Name /> without throwing 1`] = `
.c8 { .c9 {
font-family: sans-serif; font-family: sans-serif;
font-size: 100%; font-size: 100%;
line-height: 1.15; line-height: 1.15;
@ -46,47 +46,47 @@ exports[`renders <Name /> without throwing 1`] = `
border: solid 0.0625rem; border: solid 0.0625rem;
} }
.c8::-moz-focus-inner, .c9::-moz-focus-inner,
.c8[type='button']::-moz-focus-inner, .c9[type='button']::-moz-focus-inner,
.c8[type='reset']::-moz-focus-inner, .c9[type='reset']::-moz-focus-inner,
.c8[type='submit']::-moz-focus-inner { .c9[type='submit']::-moz-focus-inner {
border-style: none; border-style: none;
padding: 0; padding: 0;
} }
.c8:-moz-focusring, .c9:-moz-focusring,
.c8[type='button']:-moz-focusring, .c9[type='button']:-moz-focusring,
.c8[type='reset']:-moz-focusring, .c9[type='reset']:-moz-focusring,
.c8[type='submit']:-moz-focusring { .c9[type='submit']:-moz-focusring {
outline: 0.0625rem dotted ButtonText; outline: 0.0625rem dotted ButtonText;
} }
.c8:focus { .c9:focus {
outline: 0; outline: 0;
text-decoration: none; text-decoration: none;
} }
.c8:hover { .c9:hover {
border: solid 0.0625rem; border: solid 0.0625rem;
} }
.c8:active, .c9:active,
.c8:active:hover, .c9:active:hover,
.c8:active:focus { .c9:active:focus {
background-image: none; background-image: none;
outline: 0; outline: 0;
} }
.c8[disabled] { .c9[disabled] {
cursor: not-allowed; cursor: not-allowed;
pointer-events: none; pointer-events: none;
} }
.c8 + button { .c9 + button {
margin-left: 1.25rem; margin-left: 1.25rem;
} }
.c9 { .c10 {
font-family: sans-serif; font-family: sans-serif;
font-size: 100%; font-size: 100%;
line-height: 1.15; line-height: 1.15;
@ -132,43 +132,43 @@ exports[`renders <Name /> without throwing 1`] = `
box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05); box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
} }
.c9::-moz-focus-inner, .c10::-moz-focus-inner,
.c9[type='button']::-moz-focus-inner, .c10[type='button']::-moz-focus-inner,
.c9[type='reset']::-moz-focus-inner, .c10[type='reset']::-moz-focus-inner,
.c9[type='submit']::-moz-focus-inner { .c10[type='submit']::-moz-focus-inner {
border-style: none; border-style: none;
padding: 0; padding: 0;
} }
.c9:-moz-focusring, .c10:-moz-focusring,
.c9[type='button']:-moz-focusring, .c10[type='button']:-moz-focusring,
.c9[type='reset']:-moz-focusring, .c10[type='reset']:-moz-focusring,
.c9[type='submit']:-moz-focusring { .c10[type='submit']:-moz-focusring {
outline: 0.0625rem dotted ButtonText; outline: 0.0625rem dotted ButtonText;
} }
.c9:focus { .c10:focus {
outline: 0; outline: 0;
text-decoration: none; text-decoration: none;
} }
.c9:hover { .c10:hover {
border: solid 0.0625rem; border: solid 0.0625rem;
} }
.c9:active, .c10:active,
.c9:active:hover, .c10:active:hover,
.c9:active:focus { .c10:active:focus {
background-image: none; background-image: none;
outline: 0; outline: 0;
} }
.c9[disabled] { .c10[disabled] {
cursor: not-allowed; cursor: not-allowed;
pointer-events: none; pointer-events: none;
} }
.c9 + button { .c10 + button {
margin-left: 1.25rem; margin-left: 1.25rem;
} }
@ -200,7 +200,7 @@ exports[`renders <Name /> without throwing 1`] = `
padding-left: 0.5rem; padding-left: 0.5rem;
} }
.c5 { .c6 {
font-size: 80%; font-size: 80%;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400; font-weight: 400;
@ -225,7 +225,7 @@ exports[`renders <Name /> without throwing 1`] = `
-webkit-padding-after: 0; -webkit-padding-after: 0;
} }
.c6 { .c7 {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
height: 3rem; height: 3rem;
@ -245,11 +245,11 @@ exports[`renders <Name /> without throwing 1`] = `
outline: 0; outline: 0;
} }
.c6:focus { .c7:focus {
outline: 0; outline: 0;
} }
.c4 { .c5 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400; font-weight: 400;
font-size: 0.9375rem; font-size: 0.9375rem;
@ -269,7 +269,12 @@ exports[`renders <Name /> without throwing 1`] = `
display: block; display: block;
} }
.c7 { .c4 {
margin-top: 1.5rem;
margin-bottom: 0.375rem;
}
.c8 {
box-sizing: border-box; box-sizing: border-box;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
@ -338,20 +343,20 @@ exports[`renders <Name /> without throwing 1`] = `
form="testNameForm" form="testNameForm"
> >
<label <label
className="c4" className="c4 c5"
htmlFor="bRpkHS" htmlFor="cfHyyk"
> >
Name the new deployment group Name the new deployment group
</label> </label>
<small <small
className="c5" className="c6"
> >
Your services will be deployed to eu-east-1 data center. Your services will be deployed to eu-east-1 data center.
</small> </small>
</label> </label>
<input <input
className="c6" className="c7"
id="bRpkHS" id="cfHyyk"
name="name" name="name"
onBlur={[Function]} onBlur={[Function]}
onChange={[Function]} onChange={[Function]}
@ -366,17 +371,17 @@ exports[`renders <Name /> without throwing 1`] = `
</div> </div>
</div> </div>
<div <div
className="c7" className="c8"
> >
<button <button
className="c8" className="c9"
onClick={[Function]} onClick={[Function]}
type="button" type="button"
> >
Cancel Cancel
</button> </button>
<button <button
className="c9" className="c10"
disabled={true} disabled={true}
type="submit" type="submit"
> >
@ -387,7 +392,7 @@ exports[`renders <Name /> without throwing 1`] = `
`; `;
exports[`renders <Name /> without throwing 2`] = ` exports[`renders <Name /> without throwing 2`] = `
.c8 { .c9 {
font-family: sans-serif; font-family: sans-serif;
font-size: 100%; font-size: 100%;
line-height: 1.15; line-height: 1.15;
@ -432,47 +437,47 @@ exports[`renders <Name /> without throwing 2`] = `
border: solid 0.0625rem; border: solid 0.0625rem;
} }
.c8::-moz-focus-inner, .c9::-moz-focus-inner,
.c8[type='button']::-moz-focus-inner, .c9[type='button']::-moz-focus-inner,
.c8[type='reset']::-moz-focus-inner, .c9[type='reset']::-moz-focus-inner,
.c8[type='submit']::-moz-focus-inner { .c9[type='submit']::-moz-focus-inner {
border-style: none; border-style: none;
padding: 0; padding: 0;
} }
.c8:-moz-focusring, .c9:-moz-focusring,
.c8[type='button']:-moz-focusring, .c9[type='button']:-moz-focusring,
.c8[type='reset']:-moz-focusring, .c9[type='reset']:-moz-focusring,
.c8[type='submit']:-moz-focusring { .c9[type='submit']:-moz-focusring {
outline: 0.0625rem dotted ButtonText; outline: 0.0625rem dotted ButtonText;
} }
.c8:focus { .c9:focus {
outline: 0; outline: 0;
text-decoration: none; text-decoration: none;
} }
.c8:hover { .c9:hover {
border: solid 0.0625rem; border: solid 0.0625rem;
} }
.c8:active, .c9:active,
.c8:active:hover, .c9:active:hover,
.c8:active:focus { .c9:active:focus {
background-image: none; background-image: none;
outline: 0; outline: 0;
} }
.c8[disabled] { .c9[disabled] {
cursor: not-allowed; cursor: not-allowed;
pointer-events: none; pointer-events: none;
} }
.c8 + button { .c9 + button {
margin-left: 1.25rem; margin-left: 1.25rem;
} }
.c9 { .c10 {
font-family: sans-serif; font-family: sans-serif;
font-size: 100%; font-size: 100%;
line-height: 1.15; line-height: 1.15;
@ -518,43 +523,43 @@ exports[`renders <Name /> without throwing 2`] = `
box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05); box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
} }
.c9::-moz-focus-inner, .c10::-moz-focus-inner,
.c9[type='button']::-moz-focus-inner, .c10[type='button']::-moz-focus-inner,
.c9[type='reset']::-moz-focus-inner, .c10[type='reset']::-moz-focus-inner,
.c9[type='submit']::-moz-focus-inner { .c10[type='submit']::-moz-focus-inner {
border-style: none; border-style: none;
padding: 0; padding: 0;
} }
.c9:-moz-focusring, .c10:-moz-focusring,
.c9[type='button']:-moz-focusring, .c10[type='button']:-moz-focusring,
.c9[type='reset']:-moz-focusring, .c10[type='reset']:-moz-focusring,
.c9[type='submit']:-moz-focusring { .c10[type='submit']:-moz-focusring {
outline: 0.0625rem dotted ButtonText; outline: 0.0625rem dotted ButtonText;
} }
.c9:focus { .c10:focus {
outline: 0; outline: 0;
text-decoration: none; text-decoration: none;
} }
.c9:hover { .c10:hover {
border: solid 0.0625rem; border: solid 0.0625rem;
} }
.c9:active, .c10:active,
.c9:active:hover, .c10:active:hover,
.c9:active:focus { .c10:active:focus {
background-image: none; background-image: none;
outline: 0; outline: 0;
} }
.c9[disabled] { .c10[disabled] {
cursor: not-allowed; cursor: not-allowed;
pointer-events: none; pointer-events: none;
} }
.c9 + button { .c10 + button {
margin-left: 1.25rem; margin-left: 1.25rem;
} }
@ -586,7 +591,7 @@ exports[`renders <Name /> without throwing 2`] = `
padding-left: 0.5rem; padding-left: 0.5rem;
} }
.c5 { .c6 {
font-size: 80%; font-size: 80%;
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400; font-weight: 400;
@ -611,7 +616,7 @@ exports[`renders <Name /> without throwing 2`] = `
-webkit-padding-after: 0; -webkit-padding-after: 0;
} }
.c6 { .c7 {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
height: 3rem; height: 3rem;
@ -631,11 +636,11 @@ exports[`renders <Name /> without throwing 2`] = `
outline: 0; outline: 0;
} }
.c6:focus { .c7:focus {
outline: 0; outline: 0;
} }
.c4 { .c5 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400; font-weight: 400;
font-size: 0.9375rem; font-size: 0.9375rem;
@ -655,7 +660,12 @@ exports[`renders <Name /> without throwing 2`] = `
display: block; display: block;
} }
.c7 { .c4 {
margin-top: 1.5rem;
margin-bottom: 0.375rem;
}
.c8 {
box-sizing: border-box; box-sizing: border-box;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
@ -724,20 +734,20 @@ exports[`renders <Name /> without throwing 2`] = `
form="testNameForm" form="testNameForm"
> >
<label <label
className="c4" className="c4 c5"
htmlFor="cfPoqo" htmlFor="KxdOh"
> >
Name the new deployment group Name the new deployment group
</label> </label>
<small <small
className="c5" className="c6"
> >
Your services will be deployed to eu-east-1 data center. Your services will be deployed to eu-east-1 data center.
</small> </small>
</label> </label>
<input <input
className="c6" className="c7"
id="cfPoqo" id="KxdOh"
name="name" name="name"
onBlur={[Function]} onBlur={[Function]}
onChange={[Function]} onChange={[Function]}
@ -752,17 +762,17 @@ exports[`renders <Name /> without throwing 2`] = `
</div> </div>
</div> </div>
<div <div
className="c7" className="c8"
> >
<button <button
className="c8" className="c9"
onClick={[Function]} onClick={[Function]}
type="button" type="button"
> >
Cancel Cancel
</button> </button>
<button <button
className="c9" className="c10"
disabled={true} disabled={true}
type="submit" type="submit"
> >

3576
packages/cp-frontend/test/unit/components/manifest/__snapshots__/progress.js.snap
View File

File diff suppressed because it is too large Load Diff

424
packages/cp-frontend/test/unit/components/manifest/__snapshots__/review.js.snap
View File

@ -1,26 +1,26 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders <Review /> without throwing 1`] = ` exports[`renders <Review /> without throwing 1`] = `
.c3 { .c10 {
-webkit-animation: iCqDak 1.5s ease-out 0s infinite; -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
animation: iCqDak 1.5s ease-out 0s infinite; animation: iCqDak 1.5s ease-out 0s infinite;
} }
.c4 { .c11 {
-webkit-animation: iCqDak 1.5s ease-out 0s infinite; -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
animation: iCqDak 1.5s ease-out 0s infinite; animation: iCqDak 1.5s ease-out 0s infinite;
-webkit-animation-delay: 0.5s; -webkit-animation-delay: 0.5s;
animation-delay: 0.5s; animation-delay: 0.5s;
} }
.c5 { .c12 {
-webkit-animation: iCqDak 1.5s ease-out 0s infinite; -webkit-animation: iCqDak 1.5s ease-out 0s infinite;
animation: iCqDak 1.5s ease-out 0s infinite; animation: iCqDak 1.5s ease-out 0s infinite;
-webkit-animation-delay: 1s; -webkit-animation-delay: 1s;
animation-delay: 1s; animation-delay: 1s;
} }
.c1 { .c8 {
font-family: sans-serif; font-family: sans-serif;
font-size: 100%; font-size: 100%;
line-height: 1.15; line-height: 1.15;
@ -66,47 +66,47 @@ exports[`renders <Review /> without throwing 1`] = `
box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05); box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
} }
.c1::-moz-focus-inner, .c8::-moz-focus-inner,
.c1[type='button']::-moz-focus-inner, .c8[type='button']::-moz-focus-inner,
.c1[type='reset']::-moz-focus-inner, .c8[type='reset']::-moz-focus-inner,
.c1[type='submit']::-moz-focus-inner { .c8[type='submit']::-moz-focus-inner {
border-style: none; border-style: none;
padding: 0; padding: 0;
} }
.c1:-moz-focusring, .c8:-moz-focusring,
.c1[type='button']:-moz-focusring, .c8[type='button']:-moz-focusring,
.c1[type='reset']:-moz-focusring, .c8[type='reset']:-moz-focusring,
.c1[type='submit']:-moz-focusring { .c8[type='submit']:-moz-focusring {
outline: 0.0625rem dotted ButtonText; outline: 0.0625rem dotted ButtonText;
} }
.c1:focus { .c8:focus {
outline: 0; outline: 0;
text-decoration: none; text-decoration: none;
} }
.c1:hover { .c8:hover {
border: solid 0.0625rem; border: solid 0.0625rem;
} }
.c1:active, .c8:active,
.c1:active:hover, .c8:active:hover,
.c1:active:focus { .c8:active:focus {
background-image: none; background-image: none;
outline: 0; outline: 0;
} }
.c1[disabled] { .c8[disabled] {
cursor: not-allowed; cursor: not-allowed;
pointer-events: none; pointer-events: none;
} }
.c1 + button { .c8 + button {
margin-left: 1.25rem; margin-left: 1.25rem;
} }
.c2 { .c9 {
font-family: sans-serif; font-family: sans-serif;
font-size: 100%; font-size: 100%;
line-height: 1.15; line-height: 1.15;
@ -149,50 +149,90 @@ exports[`renders <Review /> without throwing 1`] = `
background-image: none; background-image: none;
border-radius: 0.25rem; border-radius: 0.25rem;
border: solid 0.0625rem; border: solid 0.0625rem;
box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
} }
.c2::-moz-focus-inner, .c9::-moz-focus-inner,
.c2[type='button']::-moz-focus-inner, .c9[type='button']::-moz-focus-inner,
.c2[type='reset']::-moz-focus-inner, .c9[type='reset']::-moz-focus-inner,
.c2[type='submit']::-moz-focus-inner { .c9[type='submit']::-moz-focus-inner {
border-style: none; border-style: none;
padding: 0; padding: 0;
} }
.c2:-moz-focusring, .c9:-moz-focusring,
.c2[type='button']:-moz-focusring, .c9[type='button']:-moz-focusring,
.c2[type='reset']:-moz-focusring, .c9[type='reset']:-moz-focusring,
.c2[type='submit']:-moz-focusring { .c9[type='submit']:-moz-focusring {
outline: 0.0625rem dotted ButtonText; outline: 0.0625rem dotted ButtonText;
} }
.c2:focus { .c9:focus {
outline: 0; outline: 0;
text-decoration: none; text-decoration: none;
} }
.c2:hover { .c9:hover {
border: solid 0.0625rem; border: solid 0.0625rem;
} }
.c2:active, .c9:active,
.c2:active:hover, .c9:active:hover,
.c2:active:focus { .c9:active:focus {
background-image: none; background-image: none;
outline: 0; outline: 0;
} }
.c2[disabled] { .c9[disabled] {
cursor: not-allowed; cursor: not-allowed;
pointer-events: none; pointer-events: none;
} }
.c2 + button { .c9 + button {
margin-left: 1.25rem; margin-left: 1.25rem;
} }
.c4 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 500;
font-size: 0.9375rem;
}
.c6 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
line-height: 1.5rem;
font-size: 0.9375rem;
}
.c0 { .c0 {
position: relative;
margin-bottom: 0.75rem;
box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
border: 0.0625rem solid;
}
.c1 {
position: absolute;
top: 0;
left: 0;
width: 2.25rem;
height: 100%;
}
.c2 {
padding: 0.75rem 0 0.84375rem 0;
}
.c3 {
margin: 0 3.375rem 0.09375rem 3.375rem;
font-weight: 600;
}
.c5 {
margin: 0.09375rem 3.375rem 0 3.375rem;
}
.c7 {
box-sizing: border-box; box-sizing: border-box;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
@ -218,8 +258,35 @@ exports[`renders <Review /> without throwing 1`] = `
<div <div
className="c0" className="c0"
> >
<button <div
className="c1" className="c1"
type="EDUCATIONAL"
/>
<div
className="c2"
>
<h3
className="c3 c4"
>
Reviewing
</h3>
<p
className="c5 c6"
>
Review names of services, images being used and packages you chose or that have been recommended to you
</p>
</div>
</div>
<p
className="c6"
>
A single instance of each service will be deployed.
</p>
<div
className="c7"
>
<button
className="c8"
disabled={true} disabled={true}
onClick={[Function]} onClick={[Function]}
type="button" type="button"
@ -227,8 +294,7 @@ exports[`renders <Review /> without throwing 1`] = `
Cancel Cancel
</button> </button>
<button <button
className="c2" className="c9"
disabled={true}
type="submit" type="submit"
> >
<svg <svg
@ -236,21 +302,21 @@ exports[`renders <Review /> without throwing 1`] = `
width="28" width="28"
> >
<rect <rect
className="c3" className="c10"
height="6" height="6"
width="6" width="6"
x="2" x="2"
y="2" y="2"
/> />
<rect <rect
className="c4" className="c11"
height="6" height="6"
width="6" width="6"
x="11" x="11"
y="2" y="2"
/> />
<rect <rect
className="c5" className="c12"
height="6" height="6"
width="6" width="6"
x="20" x="20"
@ -263,7 +329,7 @@ exports[`renders <Review /> without throwing 1`] = `
`; `;
exports[`renders <Review /> without throwing 2`] = ` exports[`renders <Review /> without throwing 2`] = `
.c1 { .c9 {
font-family: sans-serif; font-family: sans-serif;
font-size: 100%; font-size: 100%;
line-height: 1.15; line-height: 1.15;
@ -308,47 +374,47 @@ exports[`renders <Review /> without throwing 2`] = `
border: solid 0.0625rem; border: solid 0.0625rem;
} }
.c1::-moz-focus-inner, .c9::-moz-focus-inner,
.c1[type='button']::-moz-focus-inner, .c9[type='button']::-moz-focus-inner,
.c1[type='reset']::-moz-focus-inner, .c9[type='reset']::-moz-focus-inner,
.c1[type='submit']::-moz-focus-inner { .c9[type='submit']::-moz-focus-inner {
border-style: none; border-style: none;
padding: 0; padding: 0;
} }
.c1:-moz-focusring, .c9:-moz-focusring,
.c1[type='button']:-moz-focusring, .c9[type='button']:-moz-focusring,
.c1[type='reset']:-moz-focusring, .c9[type='reset']:-moz-focusring,
.c1[type='submit']:-moz-focusring { .c9[type='submit']:-moz-focusring {
outline: 0.0625rem dotted ButtonText; outline: 0.0625rem dotted ButtonText;
} }
.c1:focus { .c9:focus {
outline: 0; outline: 0;
text-decoration: none; text-decoration: none;
} }
.c1:hover { .c9:hover {
border: solid 0.0625rem; border: solid 0.0625rem;
} }
.c1:active, .c9:active,
.c1:active:hover, .c9:active:hover,
.c1:active:focus { .c9:active:focus {
background-image: none; background-image: none;
outline: 0; outline: 0;
} }
.c1[disabled] { .c9[disabled] {
cursor: not-allowed; cursor: not-allowed;
pointer-events: none; pointer-events: none;
} }
.c1 + button { .c9 + button {
margin-left: 1.25rem; margin-left: 1.25rem;
} }
.c2 { .c8 {
font-family: sans-serif; font-family: sans-serif;
font-size: 100%; font-size: 100%;
line-height: 1.15; line-height: 1.15;
@ -393,47 +459,88 @@ exports[`renders <Review /> without throwing 2`] = `
border: solid 0.0625rem; border: solid 0.0625rem;
} }
.c2::-moz-focus-inner, .c8::-moz-focus-inner,
.c2[type='button']::-moz-focus-inner, .c8[type='button']::-moz-focus-inner,
.c2[type='reset']::-moz-focus-inner, .c8[type='reset']::-moz-focus-inner,
.c2[type='submit']::-moz-focus-inner { .c8[type='submit']::-moz-focus-inner {
border-style: none; border-style: none;
padding: 0; padding: 0;
} }
.c2:-moz-focusring, .c8:-moz-focusring,
.c2[type='button']:-moz-focusring, .c8[type='button']:-moz-focusring,
.c2[type='reset']:-moz-focusring, .c8[type='reset']:-moz-focusring,
.c2[type='submit']:-moz-focusring { .c8[type='submit']:-moz-focusring {
outline: 0.0625rem dotted ButtonText; outline: 0.0625rem dotted ButtonText;
} }
.c2:focus { .c8:focus {
outline: 0; outline: 0;
text-decoration: none; text-decoration: none;
} }
.c2:hover { .c8:hover {
border: solid 0.0625rem; border: solid 0.0625rem;
} }
.c2:active, .c8:active,
.c2:active:hover, .c8:active:hover,
.c2:active:focus { .c8:active:focus {
background-image: none; background-image: none;
outline: 0; outline: 0;
} }
.c2[disabled] { .c8[disabled] {
cursor: not-allowed; cursor: not-allowed;
pointer-events: none; pointer-events: none;
} }
.c2 + button { .c8 + button {
margin-left: 1.25rem; margin-left: 1.25rem;
} }
.c4 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 500;
font-size: 0.9375rem;
}
.c6 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
line-height: 1.5rem;
font-size: 0.9375rem;
}
.c0 { .c0 {
position: relative;
margin-bottom: 0.75rem;
box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
border: 0.0625rem solid;
}
.c1 {
position: absolute;
top: 0;
left: 0;
width: 2.25rem;
height: 100%;
}
.c2 {
padding: 0.75rem 0 0.84375rem 0;
}
.c3 {
margin: 0 3.375rem 0.09375rem 3.375rem;
font-weight: 600;
}
.c5 {
margin: 0.09375rem 3.375rem 0 3.375rem;
}
.c7 {
box-sizing: border-box; box-sizing: border-box;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
@ -459,8 +566,35 @@ exports[`renders <Review /> without throwing 2`] = `
<div <div
className="c0" className="c0"
> >
<button <div
className="c1" className="c1"
type="EDUCATIONAL"
/>
<div
className="c2"
>
<h3
className="c3 c4"
>
Reviewing
</h3>
<p
className="c5 c6"
>
Review names of services, images being used and packages you chose or that have been recommended to you
</p>
</div>
</div>
<p
className="c6"
>
A single instance of each service will be deployed.
</p>
<div
className="c7"
>
<button
className="c8"
disabled={undefined} disabled={undefined}
onClick={[Function]} onClick={[Function]}
type="button" type="button"
@ -468,8 +602,7 @@ exports[`renders <Review /> without throwing 2`] = `
Cancel Cancel
</button> </button>
<button <button
className="c2" className="c9"
disabled={undefined}
type="submit" type="submit"
> >
Confirm and Deploy Confirm and Deploy
@ -479,7 +612,7 @@ exports[`renders <Review /> without throwing 2`] = `
`; `;
exports[`renders <Review /> without throwing 3`] = ` exports[`renders <Review /> without throwing 3`] = `
.c1 { .c9 {
font-family: sans-serif; font-family: sans-serif;
font-size: 100%; font-size: 100%;
line-height: 1.15; line-height: 1.15;
@ -524,47 +657,47 @@ exports[`renders <Review /> without throwing 3`] = `
border: solid 0.0625rem; border: solid 0.0625rem;
} }
.c1::-moz-focus-inner, .c9::-moz-focus-inner,
.c1[type='button']::-moz-focus-inner, .c9[type='button']::-moz-focus-inner,
.c1[type='reset']::-moz-focus-inner, .c9[type='reset']::-moz-focus-inner,
.c1[type='submit']::-moz-focus-inner { .c9[type='submit']::-moz-focus-inner {
border-style: none; border-style: none;
padding: 0; padding: 0;
} }
.c1:-moz-focusring, .c9:-moz-focusring,
.c1[type='button']:-moz-focusring, .c9[type='button']:-moz-focusring,
.c1[type='reset']:-moz-focusring, .c9[type='reset']:-moz-focusring,
.c1[type='submit']:-moz-focusring { .c9[type='submit']:-moz-focusring {
outline: 0.0625rem dotted ButtonText; outline: 0.0625rem dotted ButtonText;
} }
.c1:focus { .c9:focus {
outline: 0; outline: 0;
text-decoration: none; text-decoration: none;
} }
.c1:hover { .c9:hover {
border: solid 0.0625rem; border: solid 0.0625rem;
} }
.c1:active, .c9:active,
.c1:active:hover, .c9:active:hover,
.c1:active:focus { .c9:active:focus {
background-image: none; background-image: none;
outline: 0; outline: 0;
} }
.c1[disabled] { .c9[disabled] {
cursor: not-allowed; cursor: not-allowed;
pointer-events: none; pointer-events: none;
} }
.c1 + button { .c9 + button {
margin-left: 1.25rem; margin-left: 1.25rem;
} }
.c2 { .c8 {
font-family: sans-serif; font-family: sans-serif;
font-size: 100%; font-size: 100%;
line-height: 1.15; line-height: 1.15;
@ -609,47 +742,88 @@ exports[`renders <Review /> without throwing 3`] = `
border: solid 0.0625rem; border: solid 0.0625rem;
} }
.c2::-moz-focus-inner, .c8::-moz-focus-inner,
.c2[type='button']::-moz-focus-inner, .c8[type='button']::-moz-focus-inner,
.c2[type='reset']::-moz-focus-inner, .c8[type='reset']::-moz-focus-inner,
.c2[type='submit']::-moz-focus-inner { .c8[type='submit']::-moz-focus-inner {
border-style: none; border-style: none;
padding: 0; padding: 0;
} }
.c2:-moz-focusring, .c8:-moz-focusring,
.c2[type='button']:-moz-focusring, .c8[type='button']:-moz-focusring,
.c2[type='reset']:-moz-focusring, .c8[type='reset']:-moz-focusring,
.c2[type='submit']:-moz-focusring { .c8[type='submit']:-moz-focusring {
outline: 0.0625rem dotted ButtonText; outline: 0.0625rem dotted ButtonText;
} }
.c2:focus { .c8:focus {
outline: 0; outline: 0;
text-decoration: none; text-decoration: none;
} }
.c2:hover { .c8:hover {
border: solid 0.0625rem; border: solid 0.0625rem;
} }
.c2:active, .c8:active,
.c2:active:hover, .c8:active:hover,
.c2:active:focus { .c8:active:focus {
background-image: none; background-image: none;
outline: 0; outline: 0;
} }
.c2[disabled] { .c8[disabled] {
cursor: not-allowed; cursor: not-allowed;
pointer-events: none; pointer-events: none;
} }
.c2 + button { .c8 + button {
margin-left: 1.25rem; margin-left: 1.25rem;
} }
.c4 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 500;
font-size: 0.9375rem;
}
.c6 {
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
font-weight: 400;
line-height: 1.5rem;
font-size: 0.9375rem;
}
.c0 { .c0 {
position: relative;
margin-bottom: 0.75rem;
box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
border: 0.0625rem solid;
}
.c1 {
position: absolute;
top: 0;
left: 0;
width: 2.25rem;
height: 100%;
}
.c2 {
padding: 0.75rem 0 0.84375rem 0;
}
.c3 {
margin: 0 3.375rem 0.09375rem 3.375rem;
font-weight: 600;
}
.c5 {
margin: 0.09375rem 3.375rem 0 3.375rem;
}
.c7 {
box-sizing: border-box; box-sizing: border-box;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
@ -675,8 +849,35 @@ exports[`renders <Review /> without throwing 3`] = `
<div <div
className="c0" className="c0"
> >
<button <div
className="c1" className="c1"
type="EDUCATIONAL"
/>
<div
className="c2"
>
<h3
className="c3 c4"
>
Reviewing
</h3>
<p
className="c5 c6"
>
Review names of services, images being used and packages you chose or that have been recommended to you
</p>
</div>
</div>
<p
className="c6"
>
A single instance of each service will be deployed.
</p>
<div
className="c7"
>
<button
className="c8"
disabled={undefined} disabled={undefined}
onClick={[Function]} onClick={[Function]}
type="button" type="button"
@ -684,8 +885,7 @@ exports[`renders <Review /> without throwing 3`] = `
Cancel Cancel
</button> </button>
<button <button
className="c2" className="c9"
disabled={undefined}
type="submit" type="submit"
> >
Confirm and Deploy Confirm and Deploy

2
packages/cp-frontend/test/unit/components/service/__snapshots__/scale.js.snap
View File

@ -358,7 +358,7 @@ exports[`renders <Scale /> without throwing 1`] = `
> >
<input <input
className="c7 c8" className="c7 c8"
id="bZKUCn" id="crSnva"
name="replicas" name="replicas"
onBlur={[Function]} onBlur={[Function]}
onChange={[Function]} onChange={[Function]}

187
packages/cp-frontend/test/unit/containers/deployment-groups/__snapshots__/create.js.snap
View File

@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders <DeploymentGroupCreate /> without throwing 1`] = ` exports[`renders <DeploymentGroupCreate /> without throwing 1`] = `
.c8 { .c9 {
font-family: sans-serif; font-family: sans-serif;
font-size: 100%; font-size: 100%;
line-height: 1.15; line-height: 1.15;
@ -46,43 +46,43 @@ exports[`renders <DeploymentGroupCreate /> without throwing 1`] = `
border: solid 0.0625rem; border: solid 0.0625rem;
} }
.c8::-moz-focus-inner, .c9::-moz-focus-inner,
.c8[type='button']::-moz-focus-inner, .c9[type='button']::-moz-focus-inner,
.c8[type='reset']::-moz-focus-inner, .c9[type='reset']::-moz-focus-inner,
.c8[type='submit']::-moz-focus-inner { .c9[type='submit']::-moz-focus-inner {
border-style: none; border-style: none;
padding: 0; padding: 0;
} }
.c8:-moz-focusring, .c9:-moz-focusring,
.c8[type='button']:-moz-focusring, .c9[type='button']:-moz-focusring,
.c8[type='reset']:-moz-focusring, .c9[type='reset']:-moz-focusring,
.c8[type='submit']:-moz-focusring { .c9[type='submit']:-moz-focusring {
outline: 0.0625rem dotted ButtonText; outline: 0.0625rem dotted ButtonText;
} }
.c8:focus { .c9:focus {
outline: 0; outline: 0;
text-decoration: none; text-decoration: none;
} }
.c8:hover { .c9:hover {
border: solid 0.0625rem; border: solid 0.0625rem;
} }
.c8:active, .c9:active,
.c8:active:hover, .c9:active:hover,
.c8:active:focus { .c9:active:focus {
background-image: none; background-image: none;
outline: 0; outline: 0;
} }
.c8[disabled] { .c9[disabled] {
cursor: not-allowed; cursor: not-allowed;
pointer-events: none; pointer-events: none;
} }
.c8 + button { .c9 + button {
margin-left: 1.25rem; margin-left: 1.25rem;
} }
@ -90,39 +90,39 @@ exports[`renders <DeploymentGroupCreate /> without throwing 1`] = `
float: left; float: left;
} }
.c6 { .c7 {
-webkit-fill: none; -webkit-fill: none;
fill: none; fill: none;
} }
.c13 {
-webkit-fill: none;
fill: none;
}
.c6 {
display: inline-block;
border-radius: 50%;
width: 1.125rem;
height: 1.125rem;
background: inherit;
border: 0.0625rem solid;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
border: 0.0625rem solid;
}
.c12 { .c12 {
-webkit-fill: none;
fill: none;
}
.c5 {
display: inline-block;
border-radius: 50%;
width: 1.125rem;
height: 1.125rem;
background: inherit;
border: 0.0625rem solid;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
border: 0.0625rem solid;
}
.c11 {
display: inline-block; display: inline-block;
border-radius: 50%; border-radius: 50%;
width: 1.125rem; width: 1.125rem;
@ -143,7 +143,7 @@ exports[`renders <DeploymentGroupCreate /> without throwing 1`] = `
align-items: center; align-items: center;
} }
.c7 { .c8 {
padding: 0.75rem 1.125rem 0.75rem 0.75rem; padding: 0.75rem 1.125rem 0.75rem 0.75rem;
background-color: #FFFFFF; background-color: #FFFFFF;
color: #464646; color: #464646;
@ -154,27 +154,27 @@ exports[`renders <DeploymentGroupCreate /> without throwing 1`] = `
cursor: default; cursor: default;
} }
.c7:focus { .c8:focus {
background-color: #FFFFFF; background-color: #FFFFFF;
border: none; border: none;
color: #464646; color: #464646;
} }
.c7:hover { .c8:hover {
background-color: #FFFFFF; background-color: #FFFFFF;
border: none; border: none;
color: #464646; color: #464646;
} }
.c7:active, .c8:active,
.c7:active:hover, .c8:active:hover,
.c7:active:focus { .c8:active:focus {
background-color: #FFFFFF; background-color: #FFFFFF;
border: none; border: none;
color: #464646; color: #464646;
} }
.c4 { .c5 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
@ -200,7 +200,7 @@ exports[`renders <DeploymentGroupCreate /> without throwing 1`] = `
border-right: none; border-right: none;
} }
.c10 { .c11 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
@ -222,7 +222,7 @@ exports[`renders <DeploymentGroupCreate /> without throwing 1`] = `
border-right: none; border-right: none;
} }
.c14 { .c15 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
@ -244,7 +244,7 @@ exports[`renders <DeploymentGroupCreate /> without throwing 1`] = `
border-right: none; border-right: none;
} }
.c15 { .c16 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
@ -265,7 +265,7 @@ exports[`renders <DeploymentGroupCreate /> without throwing 1`] = `
border-right: 0.0625rem solid; border-right: 0.0625rem solid;
} }
.c9 { .c10 {
position: absolute; position: absolute;
top: 0; top: 0;
right: -1.6875rem; right: -1.6875rem;
@ -278,7 +278,7 @@ exports[`renders <DeploymentGroupCreate /> without throwing 1`] = `
margin: 0.4rem 0.625rem 0.4rem 0.625rem; margin: 0.4rem 0.625rem 0.4rem 0.625rem;
} }
.c13 { .c14 {
position: absolute; position: absolute;
top: 0; top: 0;
right: -1.6875rem; right: -1.6875rem;
@ -291,7 +291,7 @@ exports[`renders <DeploymentGroupCreate /> without throwing 1`] = `
margin: 0.4rem 0.625rem 0.4rem 0.625rem; margin: 0.4rem 0.625rem 0.4rem 0.625rem;
} }
.c16 { .c17 {
position: absolute; position: absolute;
top: 0; top: 0;
right: -1.6875rem; right: -1.6875rem;
@ -311,6 +311,11 @@ exports[`renders <DeploymentGroupCreate /> without throwing 1`] = `
padding: 0; padding: 0;
} }
.c4 svg {
margin-top: 1px;
margin-left: 1px;
}
.c0 { .c0 {
margin-right: auto; margin-right: auto;
margin-left: auto; margin-left: auto;
@ -370,14 +375,14 @@ exports[`renders <DeploymentGroupCreate /> without throwing 1`] = `
className="c3" className="c3"
> >
<div <div
className="c4" className="c4 c5"
> >
<span <span
className="c5" className="c6"
> >
<svg <svg
active={false} active={false}
className="c6 " className="c7 "
completed={true} completed={true}
first={true} first={true}
height="9" height="9"
@ -396,27 +401,27 @@ exports[`renders <DeploymentGroupCreate /> without throwing 1`] = `
</svg> </svg>
</span> </span>
<button <button
className="c7 c8" className="c8 c9"
> >
Name the group Name the group
</button> </button>
<span <span
className="c9"
/>
</div>
</li>
<li
className="c3"
>
<div
className="c10" className="c10"
/>
</div>
</li>
<li
className="c3"
>
<div
className="c4 c11"
> >
<span <span
className="c11" className="c12"
> >
<svg <svg
active={false} active={false}
className="c12 " className="c13 "
completed={false} completed={false}
first={undefined} first={undefined}
height="9" height="9"
@ -435,27 +440,27 @@ exports[`renders <DeploymentGroupCreate /> without throwing 1`] = `
</svg> </svg>
</span> </span>
<button <button
className="c7 c8" className="c8 c9"
> >
Define Services Define services
</button> </button>
<span <span
className="c13"
/>
</div>
</li>
<li
className="c3"
>
<div
className="c14" className="c14"
/>
</div>
</li>
<li
className="c3"
>
<div
className="c4 c15"
> >
<span <span
className="c11" className="c12"
> >
<svg <svg
active={false} active={false}
className="c12 " className="c13 "
completed={false} completed={false}
first={undefined} first={undefined}
height="9" height="9"
@ -474,12 +479,12 @@ exports[`renders <DeploymentGroupCreate /> without throwing 1`] = `
</svg> </svg>
</span> </span>
<button <button
className="c7 c8" className="c8 c9"
> >
Define Environment Define environment
</button> </button>
<span <span
className="c13" className="c14"
/> />
</div> </div>
</li> </li>
@ -487,14 +492,14 @@ exports[`renders <DeploymentGroupCreate /> without throwing 1`] = `
className="c3" className="c3"
> >
<div <div
className="c15" className="c4 c16"
> >
<span <span
className="c11" className="c12"
> >
<svg <svg
active={false} active={false}
className="c12 " className="c13 "
completed={undefined} completed={undefined}
first={undefined} first={undefined}
height="9" height="9"
@ -513,12 +518,12 @@ exports[`renders <DeploymentGroupCreate /> without throwing 1`] = `
</svg> </svg>
</span> </span>
<button <button
className="c7 c8" className="c8 c9"
> >
Review and deploy Review and deploy
</button> </button>
<span <span
className="c16" className="c17"
/> />
</div> </div>
</li> </li>

2
packages/cp-frontend/test/unit/containers/service/__snapshots__/scale.js.snap
View File

@ -516,7 +516,7 @@ exports[`renders <ServiceScale /> without throwing 1`] = `
> >
<input <input
className="c12 c13" className="c12 c13"
id="bIxZkW" id="eOODr"
name="replicas" name="replicas"
onBlur={[Function]} onBlur={[Function]}
onChange={[Function]} onChange={[Function]}

12
packages/cp-frontend/test/unit/containers/services/__snapshots__/menu.js.snap
View File

@ -236,7 +236,7 @@ exports[`renders <ServicesMenu /> without throwing 1`] = `
> >
<li <li
className="c7" className="c7"
id="bqlWiO" id="cFKBMb"
> >
<div <div
className="c8" className="c8"
@ -244,7 +244,7 @@ exports[`renders <ServicesMenu /> without throwing 1`] = `
<input <input
checked={false} checked={false}
className="c9 c10" className="c9 c10"
id="bYNDQU" id="cjjZVT"
name="service-view" name="service-view"
onChange={[Function]} onChange={[Function]}
type="radio" type="radio"
@ -252,7 +252,7 @@ exports[`renders <ServicesMenu /> without throwing 1`] = `
/> />
<label <label
className="c11" className="c11"
htmlFor="bYNDQU" htmlFor="cjjZVT"
> >
List List
</label> </label>
@ -260,7 +260,7 @@ exports[`renders <ServicesMenu /> without throwing 1`] = `
</li> </li>
<li <li
className="c7" className="c7"
id="bqlWiO" id="cFKBMb"
> >
<div <div
className="c8" className="c8"
@ -268,7 +268,7 @@ exports[`renders <ServicesMenu /> without throwing 1`] = `
<input <input
checked={false} checked={false}
className="c9 c10" className="c9 c10"
id="cpsYND" id="RPTcm"
name="service-view" name="service-view"
onChange={[Function]} onChange={[Function]}
type="radio" type="radio"
@ -276,7 +276,7 @@ exports[`renders <ServicesMenu /> without throwing 1`] = `
/> />
<label <label
className="c11" className="c11"
htmlFor="cpsYND" htmlFor="RPTcm"
> >
Topology Topology
</label> </label>

0
packages/cp-gql-mock-server/.yarnclean Normal file
View File

12
packages/cp-gql-mock-server/package.json
View File

@ -10,7 +10,7 @@
"lint-ci": "eslint . --format junit --output-file $CIRCLE_TEST_REPORTS/lint/cp-gql-mock-server.xml", "lint-ci": "eslint . --format junit --output-file $CIRCLE_TEST_REPORTS/lint/cp-gql-mock-server.xml",
"test": "NODE_ENV=test nyc --reporter=lcov --reporter=text ava --verbose", "test": "NODE_ENV=test nyc --reporter=lcov --reporter=text ava --verbose",
"test-ci": "NODE_ENV=test nyc --report-dir=$CIRCLE_ARTIFACTS/cp-gql-mock-server --reporter=lcov --reporter=text ava --verbose --tap | tap-xunit > $CIRCLE_TEST_REPORTS/test/cp-gql-mock-server.xml", "test-ci": "NODE_ENV=test nyc --report-dir=$CIRCLE_ARTIFACTS/cp-gql-mock-server --reporter=lcov --reporter=text ava --verbose --tap | tap-xunit > $CIRCLE_TEST_REPORTS/test/cp-gql-mock-server.xml",
"start": "node src/index.js", "start": "PORT=4000 node src/index.js",
"dev": "PORT=3000 nodemon src/index.js", "dev": "PORT=3000 nodemon src/index.js",
"prepublish": "echo 0" "prepublish": "echo 0"
}, },
@ -36,12 +36,14 @@
}, },
"devDependencies": { "devDependencies": {
"apollo-client": "^1.9.2", "apollo-client": "^1.9.2",
"apr-for-each": "^1.0.6",
"ava": "^0.22.0", "ava": "^0.22.0",
"delay": "^2.0.0", "delay": "^2.0.0",
"eslint": "^4.5.0", "eslint": "^4.5.0",
"eslint-config-joyent-portal": "3.0.0", "eslint-config-joyent-portal": "3.0.0",
"execa": "^0.8.0", "execa": "^0.8.0",
"lodash.sortby": "^4.7.0", "lodash.sortby": "^4.7.0",
"lodash.uniq": "^4.5.0",
"mz": "^2.6.0", "mz": "^2.6.0",
"node-fetch": "^1.7.2", "node-fetch": "^1.7.2",
"nodemon": "^1.11.0", "nodemon": "^1.11.0",
@ -49,8 +51,12 @@
"tap-xunit": "^1.7.0" "tap-xunit": "^1.7.0"
}, },
"ava": { "ava": {
"files": ["test/*.js"], "files": [
"source": ["src/*.js"], "test/*.js"
],
"source": [
"src/*.js"
],
"failFast": true "failFast": true
} }
} }