mpana
/
copilot
mirror of https://github.com/yldio/copilot.git
1
0
Fork 0
Code Issues Releases Wiki Activity

fix(cp-frontend): dg list & create dg flow

This commit is contained in:
Sara Vieira 2017-10-03 14:49:59 +01:00 committed by Sérgio Ramos
parent b151b4fd4a
commit 7688397c58
21 changed files with 2386 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>
); );

41
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,6 +78,7 @@ export const Review = ({
dirty, dirty,
loading, loading,
environmentToggles, environmentToggles,
datacenter,
...state ...state
}) => { }) => {
const serviceList = forceArray(state.services).map(({ name, config }) => ( const serviceList = forceArray(state.services).map(({ name, config }) => (
@ -90,10 +98,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 +122,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 +141,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="cCyMsz"
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="bEqMUb"
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="bOJfXP"
> >
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="bOJfXP"
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="bWgdoT"
> >
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="bWgdoT"
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"
> >

3500
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="cwNinu"
name="replicas" name="replicas"
onBlur={[Function]} onBlur={[Function]}
onChange={[Function]} onChange={[Function]}

163
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,12 +401,12 @@ 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" className="c10"
/> />
</div> </div>
</li> </li>
@ -409,14 +414,14 @@ exports[`renders <DeploymentGroupCreate /> without throwing 1`] = `
className="c3" className="c3"
> >
<div <div
className="c10" 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,12 +440,12 @@ 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" className="c14"
/> />
</div> </div>
</li> </li>
@ -448,14 +453,14 @@ exports[`renders <DeploymentGroupCreate /> without throwing 1`] = `
className="c3" className="c3"
> >
<div <div
className="c14" 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="efBEr"
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="cjxBsY"
> >
<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="bHuZdp"
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="bHuZdp"
> >
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="cjxBsY"
> >
<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="cCFuSG"
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="cCFuSG"
> >
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
} }
} }