diff --git a/packages/babel-preset/package.json b/packages/babel-preset/package.json index 0dceaea3..46b6c5cd 100644 --- a/packages/babel-preset/package.json +++ b/packages/babel-preset/package.json @@ -18,4 +18,4 @@ "eslint": "^4.5.0", "eslint-config-joyent-portal": "3.0.0" } -} +} \ No newline at end of file diff --git a/packages/cp-frontend/package.json b/packages/cp-frontend/package.json index b6a2a757..fb535635 100644 --- a/packages/cp-frontend/package.json +++ b/packages/cp-frontend/package.json @@ -72,7 +72,7 @@ "cross-env": "^5.0.5", "eslint": "^4.5.0", "eslint-config-joyent-portal": "3.0.0", - "jest": "^20.0.4", + "jest": "^21.0.1", "jest-alias-preprocessor": "^1.1.1", "jest-cli": "^20.0.4", "jest-diff": "^20.0.3", diff --git a/packages/cp-frontend/src/components/manifest/edit-or-create.js b/packages/cp-frontend/src/components/manifest/edit-or-create.js deleted file mode 100644 index 21153c5d..00000000 --- a/packages/cp-frontend/src/components/manifest/edit-or-create.js +++ /dev/null @@ -1,460 +0,0 @@ -import React, { Component } from 'react'; -import { Field } from 'redux-form'; -import styled from 'styled-components'; -import { Row, Col } from 'react-styled-flexboxgrid'; -import Bundle from 'react-bundle'; -import remcalc from 'remcalc'; -import forceArray from 'force-array'; -import is from 'styled-is'; - -import { Loader } from '@components/messaging'; - -import { - FormGroup, - FormMeta, - Input, - Button, - Card, - Progressbar, - ProgressbarItem, - ProgressbarButton, - H3, - P, - typography, - Divider, - Chevron -} from 'joyent-ui-toolkit'; - -const EnvironmentChevron = styled(Chevron)` - float: right; -`; - -const EnvironmentDivider = Divider.extend` - margin-top: ${remcalc(34)}; -`; - -const ServiceDivider = Divider.extend` - margin: ${remcalc(13)} ${remcalc(-20)} 0 ${remcalc(-20)}; -`; - -const Dl = styled.dl` - margin: 0; -`; - -const ServiceName = H3.extend` - margin-top: 0; - margin-bottom: ${remcalc(5)}; - line-height: 1.6; - font-size: ${remcalc(18)}; -`; - -const ImageTitle = H3.extend` - display: inline-block; - margin: 0; -`; - -const Image = styled.span` - ${typography.fontFamily}; - font-size: ${remcalc(15)}; -`; - -const ServiceEnvironmentTitle = P.extend` - margin: ${remcalc(13)} 0 0 0; - - ${is('expanded')` - margin-bottom: ${remcalc(13)}; - `}; -`; - -const ButtonsRow = Row.extend` - margin: ${remcalc(29)} 0 ${remcalc(60)} 0; -`; - -const FilenameContainer = styled.span` - display: flex; - flex-direction: row; - flex-wrap: nowrap; - justify-content: space-between; - align-content: stretch; - align-items: stretch; -`; - -const FilenameInput = styled(Input)` - order: 0; - flex: 1 1 auto; - align-self: stretch; - margin: 0 0 ${remcalc(13)} 0; -`; - -const FilenameRemove = Button.extend` - order: 0; - flex: 0 1 auto; - align-self: auto; - margin: 0 0 0 ${remcalc(8)}; - height: ${remcalc(48)}; -`; - -const FileCard = Card.extend` - padding: ${remcalc(24)} ${remcalc(19)}; -`; - -const ServiceCard = Card.extend` - padding: ${remcalc(13)} ${remcalc(19)}; - min-height: initial; -`; - -const Subtitle = H3.extend` - margin-top: ${remcalc(34)}; - margin-bottom: ${remcalc(3)}; -`; - -const Description = P.extend` - margin-top: ${remcalc(3)}; - margin-bottom: ${remcalc(20)}; -`; - -class ManifestEditorBundle extends Component { - constructor() { - super(); - - this.state = {}; - - this.handleRender = this.handleRender.bind(this); - } - handleRender(ManifestEditor) { - if (ManifestEditor) { - setTimeout(() => { - this.setState({ ManifestEditor }); - }, 80); - } - - return ; - } - render() { - if (!this.state.ManifestEditor) { - return ( - import('joyent-manifest-editor')}> - {this.handleRender} - - ); - } - - const { ManifestEditor } = this.state; - const { children, ...rest } = this.props; - - return {children}; - } -} - -const MEditor = ({ input, defaultValue, readOnly }) => ( - -); - -const EEditor = ({ input, defaultValue, readOnly }) => ( - -); - -export const Name = ({ handleSubmit, onCancel, dirty }) => ( -
- - - - - - - - - - - - -
-); - -export const Manifest = ({ - handleSubmit, - onCancel, - dirty, - defaultValue = '', - loading -}) => ( -
- - - - - - -); - -const File = ({ id, name, value, onRemoveFile, readOnly }) => { - const removeButton = !readOnly ? ( - - Remove - - ) : null; - - const fileEditor = !readOnly ? ( - - ) : ( - - ); - - const input = !readOnly ? ( - - ) : ( - - ); - - return ( - - - - {input} - {removeButton} - - - {fileEditor} - - ); -}; - -const Files = ({ files, onAddFile, onRemoveFile, readOnly }) => { - const footer = !readOnly ? ( - - ) : null; - - return ( -
- {files.map(({ id, ...rest }) => ( - onRemoveFile(id)} - readOnly={readOnly} - {...rest} - /> - ))} - {footer} -
- ); -}; - -export const Environment = ({ - handleSubmit, - onCancel, - onAddFile, - onRemoveFile, - dirty, - defaultValue = '', - files = [], - readOnly = false, - loading -}) => { - const envEditor = !readOnly ? ( - - ) : ( - - ); - - const footerDivider = !readOnly ? : null; - - const footer = !readOnly ? ( - - - - - ) : null; - - return ( -
- Global variables - - These variables are going to be availabe for interpolation in the - manifest - - {envEditor} - - Enviroment files - - The variables from this files will be applied to the services that - require them - - - {footerDivider} - {footer} - - ); -}; - -const EnvironmentReview = ({ environment }) => { - const value = environment - .map(({ name, value }) => `${name}=${value}`) - .join('\n'); - - return ; -}; - -export const Review = ({ - handleSubmit, - onEnvironmentToggle = () => null, - onCancel, - dirty, - loading, - environmentToggles, - ...state -}) => { - const serviceList = forceArray(state.services).map(({ name, config }) => ( - - {name} -
-
- Image: {config.image} -
-
- {config.environment && config.environment.length ? ( - - ) : null} - {config.environment && config.environment.length ? ( - onEnvironmentToggle(name)} - > - Environment variables{' '} - - - ) : null} - {config.environment && - config.environment.length && - environmentToggles[name] ? ( - - ) : null} - - )); - - return ( -
- {serviceList} - - - - -
- ); -}; - -export const Progress = ({ stage, create, edit }) => { - const _nameCompleted = stage !== 'name'; - const _nameActive = stage === 'name'; - - const _name = !create ? null : ( - - - Name the group - - - ); - - const _manifestCompleted = ['environment', 'review'].indexOf(stage) >= 0; - const _manifestActive = create ? stage === 'manifest' : stage === 'edit'; - - const _manifest = ( - - - Define Services - - - ); - - const _environmentCompleted = stage === 'review'; - const _environmentActive = stage === 'environment'; - - const _environment = ( - - - Define Environment - - - ); - - const _reviewActive = stage === 'review'; - - const _review = ( - - - Review and deploy - - - ); - - return ( - - {_name} - {_manifest} - {_environment} - {_review} - - ); -}; diff --git a/packages/cp-frontend/src/components/manifest/editors.js b/packages/cp-frontend/src/components/manifest/editors.js new file mode 100644 index 00000000..9c21ab58 --- /dev/null +++ b/packages/cp-frontend/src/components/manifest/editors.js @@ -0,0 +1,20 @@ +import React from 'react'; +import ManifestEditorBundle from './manifest-editor'; + +export const MEditor = ({ input, defaultValue, readOnly }) => ( + +); + +export const EEditor = ({ input, defaultValue, readOnly }) => ( + +); diff --git a/packages/cp-frontend/src/components/manifest/environment.js b/packages/cp-frontend/src/components/manifest/environment.js new file mode 100644 index 00000000..1feac7a1 --- /dev/null +++ b/packages/cp-frontend/src/components/manifest/environment.js @@ -0,0 +1,83 @@ +import React from 'react'; +import { Field } from 'redux-form'; +import remcalc from 'remcalc'; +import { Row } from 'react-styled-flexboxgrid'; +import { Button, Divider, H3, P } from 'joyent-ui-toolkit'; + +import { EEditor } from './editors'; +import Files from './files'; + +const EnvironmentDivider = Divider.extend`margin-top: ${remcalc(34)};`; +const ButtonsRow = Row.extend`margin: ${remcalc(29)} 0 ${remcalc(60)} 0;`; + +const Subtitle = H3.extend` + margin-top: ${remcalc(34)}; + margin-bottom: ${remcalc(3)}; +`; + +const Description = P.extend` + margin-top: ${remcalc(3)}; + margin-bottom: ${remcalc(20)}; +`; + +export const Environment = ({ + handleSubmit, + onCancel, + onAddFile, + onRemoveFile, + dirty, + defaultValue = '', + files = [], + readOnly = false, + loading +}) => { + const envEditor = !readOnly ? ( + + ) : ( + + ); + + const footerDivider = !readOnly ? : null; + + const footer = !readOnly ? ( + + + + + ) : null; + + return ( +
+ Global variables + + These variables are going to be availabe for interpolation in the + manifest + + {envEditor} + + Enviroment files + + The variables from this files will be applied to the services that + require them + + + {footerDivider} + {footer} + + ); +}; + +export default Environment; diff --git a/packages/cp-frontend/src/components/manifest/files.js b/packages/cp-frontend/src/components/manifest/files.js new file mode 100644 index 00000000..e9189828 --- /dev/null +++ b/packages/cp-frontend/src/components/manifest/files.js @@ -0,0 +1,99 @@ +import React from 'react'; +import { Field } from 'redux-form'; +import styled from 'styled-components'; +import remcalc from 'remcalc'; +import { EEditor } from './editors'; + +import { + FormGroup, + Input, + Button, + Card +} from 'joyent-ui-toolkit'; + +const FilenameContainer = styled.span` + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-between; + align-content: stretch; + align-items: stretch; +`; + +const FilenameInput = styled(Input)` + order: 0; + flex: 1 1 auto; + align-self: stretch; + margin: 0 0 ${remcalc(13)} 0; +`; + +const FilenameRemove = Button.extend` + order: 0; + flex: 0 1 auto; + align-self: auto; + margin: 0 0 0 ${remcalc(8)}; + height: ${remcalc(48)}; +`; + +const FileCard = Card.extend`padding: ${remcalc(24)} ${remcalc(19)};`; + +const File = ({ id, name, value, onRemoveFile, readOnly }) => { + const removeButton = !readOnly ? ( + + Remove + + ) : null; + + const fileEditor = !readOnly ? ( + + ) : ( + + ); + + const input = !readOnly ? ( + + ) : ( + + ); + + return ( + + + + {input} + {removeButton} + + + {fileEditor} + + ); +}; + +const Files = ({ files, onAddFile, onRemoveFile, readOnly }) => { + const footer = !readOnly ? ( + + ) : null; + + return ( +
+ {files.map(({ id, ...rest }) => ( + onRemoveFile(id)} + readOnly={readOnly} + {...rest} + /> + ))} + {footer} +
+ ); +}; + +export default Files; \ No newline at end of file diff --git a/packages/cp-frontend/src/components/manifest/index.js b/packages/cp-frontend/src/components/manifest/index.js new file mode 100644 index 00000000..fd7fb745 --- /dev/null +++ b/packages/cp-frontend/src/components/manifest/index.js @@ -0,0 +1,8 @@ +export { default as Files } from './files'; +export { default as Editors } from './editors'; +export { default as ManifestEditorBundle } from './manifest-editor'; +export { default as Manifest } from './manifest'; +export { default as Name } from './name'; +export { default as Review } from './review'; +export { default as Progress } from './progress'; +export { default as Environment } from './environment'; \ No newline at end of file diff --git a/packages/cp-frontend/src/components/manifest/manifest-editor.js b/packages/cp-frontend/src/components/manifest/manifest-editor.js new file mode 100644 index 00000000..5ac3924e --- /dev/null +++ b/packages/cp-frontend/src/components/manifest/manifest-editor.js @@ -0,0 +1,39 @@ +import React, { Component } from 'react'; +import Bundle from 'react-bundle'; + +import { Loader } from '@components/messaging'; + +class ManifestEditorBundle extends Component { + constructor() { + super(); + + this.state = {}; + + this.handleRender = this.handleRender.bind(this); + } + handleRender(ManifestEditor) { + if (ManifestEditor) { + setTimeout(() => { + this.setState({ ManifestEditor }); + }, 80); + } + + return ; + } + render() { + if (!this.state.ManifestEditor) { + return ( + import('joyent-manifest-editor')}> + {this.handleRender} + + ); + } + + const { ManifestEditor } = this.state; + const { children, ...rest } = this.props; + + return {children}; + } +} + +export default ManifestEditorBundle; diff --git a/packages/cp-frontend/src/components/manifest/manifest.js b/packages/cp-frontend/src/components/manifest/manifest.js new file mode 100644 index 00000000..be5b166e --- /dev/null +++ b/packages/cp-frontend/src/components/manifest/manifest.js @@ -0,0 +1,36 @@ +import React from 'react'; +import { FormMeta, Button, Label } from 'joyent-ui-toolkit'; +import { Row } from 'react-styled-flexboxgrid'; +import remcalc from 'remcalc'; +import { Field } from 'redux-form'; + +const ButtonsRow = Row.extend`margin: ${remcalc(29)} 0 ${remcalc(60)} 0;`; + +export const Manifest = ({ + handleSubmit, + onCancel, + dirty, + defaultValue = '', + loading +}) => ( +
+ + + + + + + + + +); + +export default Manifest; diff --git a/packages/cp-frontend/src/components/manifest/name.js b/packages/cp-frontend/src/components/manifest/name.js new file mode 100644 index 00000000..b7058b73 --- /dev/null +++ b/packages/cp-frontend/src/components/manifest/name.js @@ -0,0 +1,42 @@ +import React from 'react'; +import { + FormMeta, + Button, + Label, + Input, + Small, + FormGroup +} from 'joyent-ui-toolkit'; +import { Row, Col } from 'react-styled-flexboxgrid'; +import remcalc from 'remcalc'; +import { Field } from 'redux-form'; + +const ButtonsRow = Row.extend`margin: ${remcalc(29)} 0 ${remcalc(60)} 0;`; + +export const Name = ({ handleSubmit, onCancel, dirty }) => ( +
+ + + + + + + Your services will be deployed to eu-east-1 data center. + + + + + + + + + + +
+); + +export default Name; diff --git a/packages/cp-frontend/src/components/manifest/progress.js b/packages/cp-frontend/src/components/manifest/progress.js new file mode 100644 index 00000000..4a10856b --- /dev/null +++ b/packages/cp-frontend/src/components/manifest/progress.js @@ -0,0 +1,77 @@ +import React from 'react'; + +import { + Progressbar, + ProgressbarItem, + ProgressbarButton +} from 'joyent-ui-toolkit'; + +const Progress = ({ stage, create, edit }) => { + const _nameCompleted = stage !== 'name'; + const _nameActive = stage === 'name'; + + const _name = !create ? null : ( + + + Name the group + + + ); + + const _manifestCompleted = ['environment', 'review'].indexOf(stage) >= 0; + const _manifestActive = create ? stage === 'manifest' : stage === 'edit'; + + const _manifest = ( + + + Define Services + + + ); + + const _environmentCompleted = stage === 'review'; + const _environmentActive = stage === 'environment'; + + const _environment = ( + + + Define Environment + + + ); + + const _reviewActive = stage === 'review'; + + const _review = ( + + + Review and deploy + + + ); + + return ( + + {_name} + {_manifest} + {_environment} + {_review} + + ); +}; + +export default Progress; diff --git a/packages/cp-frontend/src/components/manifest/review.js b/packages/cp-frontend/src/components/manifest/review.js new file mode 100644 index 00000000..9f43d9bf --- /dev/null +++ b/packages/cp-frontend/src/components/manifest/review.js @@ -0,0 +1,123 @@ +import React from 'react'; +import remcalc from 'remcalc'; +import { Row } from 'react-styled-flexboxgrid'; +import is from 'styled-is'; +import { + Button, + Divider, + H3, + P, + Chevron, + typography, + Card +} from 'joyent-ui-toolkit'; +import forceArray from 'force-array'; +import styled from 'styled-components'; + +import { EEditor } from './editors'; + +const ButtonsRow = Row.extend`margin: ${remcalc(29)} 0 ${remcalc(60)} 0;`; + +const ServiceEnvironmentTitle = P.extend` + margin: ${remcalc(13)} 0 0 0; + + ${is('expanded')` + margin-bottom: ${remcalc(13)}; + `}; +`; + +const ServiceName = H3.extend` + margin-top: 0; + margin-bottom: ${remcalc(5)}; + line-height: 1.6; + font-size: ${remcalc(18)}; +`; + +const ImageTitle = H3.extend` + display: inline-block; + margin: 0; +`; + +const Image = styled.span` + ${typography.fontFamily}; + font-size: ${remcalc(15)}; +`; + +const ServiceDivider = Divider.extend` + margin: ${remcalc(13)} ${remcalc(-20)} 0 ${remcalc(-20)}; +`; + +const ServiceCard = Card.extend` + padding: ${remcalc(13)} ${remcalc(19)}; + min-height: initial; +`; + +const Dl = styled.dl`margin: 0;`; + +const EnvironmentChevron = styled(Chevron)`float: right;`; + +const EnvironmentReview = ({ environment }) => { + const value = environment + .map(({ name, value }) => `${name}=${value}`) + .join('\n'); + + return ; +}; + +export const Review = ({ + handleSubmit, + onEnvironmentToggle = () => null, + onCancel, + dirty, + loading, + environmentToggles, + ...state +}) => { + const serviceList = forceArray(state.services).map(({ name, config }) => ( + + {name} +
+
+ Image: {config.image} +
+
+ {config.environment && config.environment.length ? ( + + ) : null} + {config.environment && config.environment.length ? ( + onEnvironmentToggle(name)} + > + Environment variables{' '} + + + ) : null} + {config.environment && + config.environment.length && + environmentToggles[name] ? ( + + ) : null} + + )); + + return ( +
+ {serviceList} + + + + +
+ ); +}; + + +export default Review \ No newline at end of file diff --git a/packages/cp-frontend/src/components/navigation/breadcrumb.js b/packages/cp-frontend/src/components/navigation/breadcrumb.js index 4781fcab..9784a4e6 100644 --- a/packages/cp-frontend/src/components/navigation/breadcrumb.js +++ b/packages/cp-frontend/src/components/navigation/breadcrumb.js @@ -1,6 +1,6 @@ import React from 'react'; import styled from 'styled-components'; -import { Grid } from 'react-styled-flexboxgrid'; +import { Grid, Col } from 'react-styled-flexboxgrid'; import { Link } from 'react-router-dom'; import forceArray from 'force-array'; import PropTypes from 'prop-types'; @@ -36,7 +36,9 @@ const getBreadcrumbItems = (...links) => const NavBreadcrumb = ({ links = [] }) => ( - {getBreadcrumbItems(...links)} + + {getBreadcrumbItems(...links)} + ); diff --git a/packages/cp-frontend/src/components/navigation/header.js b/packages/cp-frontend/src/components/navigation/header.js index ef46d6d4..5375a0e6 100644 --- a/packages/cp-frontend/src/components/navigation/header.js +++ b/packages/cp-frontend/src/components/navigation/header.js @@ -3,15 +3,25 @@ import PropTypes from 'prop-types'; import { Link } from 'react-router-dom'; import { Img } from 'normalized-styled-components'; import remcalc from 'remcalc'; +import styled from 'styled-components'; import Logo from '@assets/triton_logo.png'; -import { Header, HeaderBrand, HeaderItem } from 'joyent-ui-toolkit'; - +import { + Header, + HeaderBrand, + HeaderItem, + DataCenterIcon, + UserIcon +} from 'joyent-ui-toolkit'; const StyledLogo = Img.extend` width: ${remcalc(87)}; height: ${remcalc(25)}; `; +const Item = styled.span` + padding-left: 5px; +`; + const NavHeader = ({ datacenter, username }) => (
@@ -19,8 +29,14 @@ const NavHeader = ({ datacenter, username }) => ( - {datacenter} - {username} + + + {datacenter} + + + + {username} +
); diff --git a/packages/cp-frontend/src/containers/deployment-group/index.js b/packages/cp-frontend/src/containers/deployment-group/index.js index b8cadaaa..0f0cb91b 100644 --- a/packages/cp-frontend/src/containers/deployment-group/index.js +++ b/packages/cp-frontend/src/containers/deployment-group/index.js @@ -1 +1 @@ -export { default as DeploymentGroupDelete } from './delete'; +export { default as DeploymentGroupDelete } from './delete'; \ No newline at end of file diff --git a/packages/cp-frontend/src/containers/deployment-groups/create.js b/packages/cp-frontend/src/containers/deployment-groups/create.js index 2c316d9b..d79283c7 100644 --- a/packages/cp-frontend/src/containers/deployment-groups/create.js +++ b/packages/cp-frontend/src/containers/deployment-groups/create.js @@ -1,14 +1,25 @@ import React from 'react'; +import { graphql } from 'react-apollo'; +import get from 'lodash.get'; import ManifestEditOrCreate from '@containers/manifest/edit-or-create'; -import { Progress } from '@components/manifest/edit-or-create'; +import { Progress } from '@components/manifest'; import { LayoutContainer } from '@components/layout'; import { Title } from '@components/navigation'; +import PortalQuery from '@graphql/Portal.gql'; -export default ({ match }) => ( +const DeploymentGroupCreate = ({ match, dataCenter }) => ( Creating deployment group - + ); + +const DeploymentGroupCreateWithData = graphql(PortalQuery, { + props: ({ data: { portal = {} } }) => ({ + dataCenter: get(portal, 'datacenter.region', '') + }) +})(DeploymentGroupCreate); + +export default DeploymentGroupCreateWithData; \ No newline at end of file diff --git a/packages/cp-frontend/src/containers/environment/index.js b/packages/cp-frontend/src/containers/environment/index.js index ceb7ea29..aa578d1a 100644 --- a/packages/cp-frontend/src/containers/environment/index.js +++ b/packages/cp-frontend/src/containers/environment/index.js @@ -7,7 +7,7 @@ import ManifestQuery from '@graphql/Manifest.gql'; import { LayoutContainer } from '@components/layout'; import { Title } from '@components/navigation'; import { Loader, ErrorMessage } from '@components/messaging'; -import { Environment } from '@components/manifest/edit-or-create'; +import { Environment } from '@components/manifest'; const EnvironmentReadOnly = ({ files = [], diff --git a/packages/cp-frontend/src/containers/manifest/edit-or-create.js b/packages/cp-frontend/src/containers/manifest/edit-or-create.js index ac0d6c31..8cb9b44e 100644 --- a/packages/cp-frontend/src/containers/manifest/edit-or-create.js +++ b/packages/cp-frontend/src/containers/manifest/edit-or-create.js @@ -21,11 +21,11 @@ import DeploymentGroupConfigQuery from '@graphql/DeploymentGroupConfig.gql'; import { client } from '@state/store'; import { ErrorMessage } from '@components/messaging'; import { - Name, - Manifest, Environment, - Review -} from '@components/manifest/edit-or-create'; + Name, + Review, + Manifest +} from '@components/manifest'; const INTERPOLATE_REGEX = /\$([_a-z][_a-z0-9]*)/gi; @@ -243,6 +243,7 @@ class DeploymentGroupEditOrCreate extends Component { }; handleNameSubmit({ name = '' }) { + console.log(name); this.setState({ name }, () => this.redirect({ stage: 'manifest', prog: true }) ); @@ -401,9 +402,10 @@ class DeploymentGroupEditOrCreate extends Component { renderNameForm() { const { NameForm } = this.state; + const { dataCenter } = this.props; return ( - + ); } @@ -490,4 +492,4 @@ export default compose( provisionManifest: variables => mutate({ variables }) }) }) -)(withRouter(DeploymentGroupEditOrCreate)); +)(withRouter(DeploymentGroupEditOrCreate)); \ No newline at end of file diff --git a/packages/cp-frontend/src/containers/manifest/index.js b/packages/cp-frontend/src/containers/manifest/index.js index 5fe48b31..13106952 100644 --- a/packages/cp-frontend/src/containers/manifest/index.js +++ b/packages/cp-frontend/src/containers/manifest/index.js @@ -7,7 +7,7 @@ import ManifestQuery from '@graphql/Manifest.gql'; import DeploymentGroupBySlugQuery from '@graphql/DeploymentGroupBySlug.gql'; import ManifestEditOrCreate from '@containers/manifest/edit-or-create'; -import { Progress } from '@components/manifest/edit-or-create'; +import { Progress } from '@components/manifest'; import { LayoutContainer } from '@components/layout'; import { Title } from '@components/navigation'; import { Loader, ErrorMessage, WarningMessage } from '@components/messaging'; diff --git a/packages/cp-frontend/test/unit/components/manifest/edit-or-create.js b/packages/cp-frontend/test/unit/components/manifest/edit-or-create.js deleted file mode 100644 index 5f4392b7..00000000 --- a/packages/cp-frontend/test/unit/components/manifest/edit-or-create.js +++ /dev/null @@ -1,21 +0,0 @@ -/** - * @jest-environment jsdom - */ - -import React from 'react'; -import renderer from 'react-test-renderer'; -import 'jest-styled-components'; - -import MEditor from '@components/manifest/edit-or-create.js'; -import { Router } from '../../mocks'; - -xit('renders without throwing', () => { - const tree = renderer - .create( - - - - ) - .toJSON(); - expect(tree).toMatchSnapshot(); -}); diff --git a/packages/cp-frontend/test/unit/components/navigation/__snapshots__/breadcrumb.js.snap b/packages/cp-frontend/test/unit/components/navigation/__snapshots__/breadcrumb.js.snap index 233fa4e6..ece13c04 100644 --- a/packages/cp-frontend/test/unit/components/navigation/__snapshots__/breadcrumb.js.snap +++ b/packages/cp-frontend/test/unit/components/navigation/__snapshots__/breadcrumb.js.snap @@ -6,7 +6,7 @@ exports[`renders without throwing 1`] = ` margin-left: auto; } -.c2 { +.c3 { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -25,6 +25,15 @@ exports[`renders without throwing 1`] = ` margin-left: -0.5rem; } +.c2 { + box-sizing: border-box; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; +} + .c0 { border-bottom: solid 0.0625rem; } @@ -47,16 +56,148 @@ exports[`renders without throwing 1`] = ` } } +@media only screen and (min-width:0em) { + .c2 { + -webkit-flex-basis: 100%; + -ms-flex-basis: 100%; + flex-basis: 100%; + max-width: 100%; + display: block; + } +} +
-
-
+ .c1 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-right: -0.5rem; + margin-left: -0.5rem; +} + +.c0 { + box-sizing: border-box; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; +} + +@media only screen and (min-width:0em) { + .c0 { + -webkit-flex-basis: 100%; + -ms-flex-basis: 100%; + flex-basis: 100%; + max-width: 100%; + display: block; + } +} + +
+ .c0 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-right: -0.5rem; + margin-left: -0.5rem; +} + +
+
`; diff --git a/packages/cp-frontend/test/unit/components/services/list-item.js b/packages/cp-frontend/test/unit/components/services/list-item.js index e5f84ddf..7304e4b6 100644 --- a/packages/cp-frontend/test/unit/components/services/list-item.js +++ b/packages/cp-frontend/test/unit/components/services/list-item.js @@ -6,9 +6,12 @@ import React from 'react'; import renderer from 'react-test-renderer'; import 'jest-styled-components'; -import ServiceListItem from '@components/services/list-item.js'; +import ServiceListItem from '@components/services/list-item'; import { Router, service } from '../../mocks'; + +console.log(service); + it('renders without throwing', () => { const tree = renderer .create( diff --git a/packages/cp-frontend/test/unit/containers/deployment-group/__snapshots__/delete.js.snap b/packages/cp-frontend/test/unit/containers/deployment-group/__snapshots__/delete.js.snap index 1e835e7e..22165d4d 100644 --- a/packages/cp-frontend/test/unit/containers/deployment-group/__snapshots__/delete.js.snap +++ b/packages/cp-frontend/test/unit/containers/deployment-group/__snapshots__/delete.js.snap @@ -49,17 +49,17 @@ exports[`renders without throwing 1`] = ` } .c4::-moz-focus-inner, -.c4[type="button"]::-moz-focus-inner, -.c4[type="reset"]::-moz-focus-inner, -.c4[type="submit"]::-moz-focus-inner { +.c4[type='button']::-moz-focus-inner, +.c4[type='reset']::-moz-focus-inner, +.c4[type='submit']::-moz-focus-inner { border-style: none; padding: 0; } .c4:-moz-focusring, -.c4[type="button"]:-moz-focusring, -.c4[type="reset"]:-moz-focusring, -.c4[type="submit"]:-moz-focusring { +.c4[type='button']:-moz-focusring, +.c4[type='reset']:-moz-focusring, +.c4[type='submit']:-moz-focusring { outline: 0.0625rem dotted ButtonText; } @@ -144,17 +144,17 @@ exports[`renders without throwing 1`] = ` } .c9::-moz-focus-inner, -.c9[type="button"]::-moz-focus-inner, -.c9[type="reset"]::-moz-focus-inner, -.c9[type="submit"]::-moz-focus-inner { +.c9[type='button']::-moz-focus-inner, +.c9[type='reset']::-moz-focus-inner, +.c9[type='submit']::-moz-focus-inner { border-style: none; padding: 0; } .c9:-moz-focusring, -.c9[type="button"]:-moz-focusring, -.c9[type="reset"]:-moz-focusring, -.c9[type="submit"]:-moz-focusring { +.c9[type='button']:-moz-focusring, +.c9[type='reset']:-moz-focusring, +.c9[type='submit']:-moz-focusring { outline: 0.0625rem dotted ButtonText; } @@ -278,12 +278,392 @@ exports[`renders without throwing 1`] = `
-
- -
-

+ .c1 { + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-weight: 500; + font-size: 1.5rem; +} + +.c0 { + line-height: 1.25; + color: ; + margin: 0 0 0.75rem 0; +} + +

Deleting a deployment group:
Wordpress Blog Example

-

Deleting a deployment group will also remove all of the services and instances associated with that deployment group. Are you sure you want to continue?

- - -
-
  • -
    - - without throwing 1`] = ` /> - -
    • -
  • -
    - - without throwing 1`] = ` /> - -
    • -
  • -
    - - without throwing 1`] = ` /> - -
    • diff --git a/packages/cp-frontend/test/unit/containers/deployment-groups/__snapshots__/import.js.snap b/packages/cp-frontend/test/unit/containers/deployment-groups/__snapshots__/import.js.snap index 6635c40d..ab8ac3c6 100644 --- a/packages/cp-frontend/test/unit/containers/deployment-groups/__snapshots__/import.js.snap +++ b/packages/cp-frontend/test/unit/containers/deployment-groups/__snapshots__/import.js.snap @@ -36,6 +36,7 @@ exports[`renders without throwing 1`] = ` } .c3 { + -webkit-fill: ; fill: ; stroke: ; -webkit-animation: iCqDak 1.5s ease-out 0s infinite; @@ -43,6 +44,7 @@ exports[`renders without throwing 1`] = ` } .c4 { + -webkit-fill: ; fill: ; stroke: ; -webkit-animation: iCqDak 1.5s ease-out 0s infinite; @@ -52,6 +54,7 @@ exports[`renders without throwing 1`] = ` } .c5 { + -webkit-fill: ; fill: ; stroke: ; -webkit-animation: iCqDak 1.5s ease-out 0s infinite; @@ -139,42 +142,199 @@ exports[`renders without throwing 1`] = `
    -

    Importing deployment group

    -
    - - - - -

    Loading...

    diff --git a/packages/cp-frontend/test/unit/containers/deployment-groups/__snapshots__/list.js.snap b/packages/cp-frontend/test/unit/containers/deployment-groups/__snapshots__/list.js.snap index 3dfc053e..a5c6f302 100644 --- a/packages/cp-frontend/test/unit/containers/deployment-groups/__snapshots__/list.js.snap +++ b/packages/cp-frontend/test/unit/containers/deployment-groups/__snapshots__/list.js.snap @@ -49,6 +49,7 @@ exports[`renders without throwing 1`] = ` } .c8 > svg { + -webkit-fill: ; fill: ; } @@ -65,6 +66,7 @@ exports[`renders without throwing 1`] = ` .c8:focus, .c8:hover > svg { + -webkit-fill: ; fill: ; } @@ -79,6 +81,7 @@ exports[`renders without throwing 1`] = ` .c8:active, .c8:active:hover, .c8:active:focus > svg { + -webkit-fill: ; fill: ; } @@ -91,6 +94,7 @@ exports[`renders without throwing 1`] = ` } .c8[disabled] > svg { + -webkit-fill: ; fill: ; } @@ -108,6 +112,7 @@ exports[`renders without throwing 1`] = ` .c8[disabled]:active, .c8[disabled]:active:hover, .c8[disabled]:active:focus > svg { + -webkit-fill: ; fill: ; } @@ -276,12 +281,14 @@ exports[`renders without throwing 1`] = ` .c7:focus > svg, .c7:hover > svg { + -webkit-fill: ; fill: ; } .c7:active > svg, .c7:active:hover > svg, .c7:active:focus > svg { + -webkit-fill: ; fill: ; } @@ -346,33 +353,879 @@ exports[`renders without throwing 1`] = `
    -

    Deployment groups

    -
    svg { + -webkit-fill: ; + fill: ; +} + +.c6:focus { + outline: 0; + background-color: ; + border-color: ; +} + +.c6:hover { + background-color: ; + border-color: ; +} + +.c6:focus, +.c6:hover > svg { + -webkit-fill: ; + fill: ; +} + +.c6:active, +.c6:active:hover, +.c6:active:focus { + outline: 0; + background-color: ; + border-color: ; +} + +.c6:active, +.c6:active:hover, +.c6:active:focus > svg { + -webkit-fill: ; + fill: ; +} + +.c6[disabled] { + cursor: not-allowed; + pointer-events: none; + color: ; + background-color: ; + border-color: ; +} + +.c6[disabled] > svg { + -webkit-fill: ; + fill: ; +} + +.c6[disabled]:focus, +.c6[disabled]:hover, +.c6[disabled]:active, +.c6[disabled]:active:hover, +.c6[disabled]:active:focus { + background-color: ; + border-color: ; +} + +.c6[disabled]:focus, +.c6[disabled]:hover, +.c6[disabled]:active, +.c6[disabled]:active:hover, +.c6[disabled]:active:focus > svg { + -webkit-fill: ; + fill: ; +} + +.c0 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-right: -0.5rem; + margin-left: -0.5rem; + margin-top: -0.4375rem; +} + +.c2 { + position: relative; + text-decoration: none; + color: ; + background-color: ; + box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05); + border: solid 0.0625rem; + margin-top: 1.25rem; + margin-bottom: 0; + padding: 1.125rem; + min-height: 16.125rem; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + +.c2:last-child { + margin-bottom: 1.25rem; +} + +.c7 { + position: relative; + text-decoration: none; + color: ; + background-color: ; + box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05); + border: solid 0.0625rem; + margin-top: 1.25rem; + margin-bottom: 0; + padding: 1.125rem; + min-height: 16.125rem; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + background-color: ; +} + +.c7:last-child { + margin-bottom: 1.25rem; +} + +.c7:hover { + background-color: ; +} + +.c9 { + border: solid 0.0625rem; + border-radius: 50%; + width: 3rem; + height: 3rem; + line-height: 3rem; + font-size: 1.5rem; + text-align: center; + margin-bottom: 1.25rem; +} + +.c10 { + font-size: 80%; + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-weight: 400; + line-height: 1.125rem; + font-size: 0.875rem; + font-weight: 600; + text-align: center; +} + +.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; + margin-top: 0.625rem; + font-weight: 600; +} + +.c3 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-grow: 1; + -ms-flex-grow: 1; + flex-grow: 1; + text-decoration: none; + color: ; +} + +.c8 { + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -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; + -webkit-align-content: center; + -ms-flex-line-pack: center; + align-content: center; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +.c5 { + position: absolute; + right: 0; + bottom: 0; + border: none; +} + +.c5:hover, +.c5:focus, +.c5:active, +.c5:active:hover, +.c5:active:focus { + background-color: ; +} + +.c5:focus > svg, +.c5:hover > svg { + -webkit-fill: ; + fill: ; +} + +.c5:active > svg, +.c5:active:hover > svg, +.c5:active:focus > svg { + -webkit-fill: ; + fill: ; +} + +@media only screen and (min-width:0em) { + .c1 { + -webkit-flex-basis: 100%; + -ms-flex-basis: 100%; + flex-basis: 100%; + max-width: 100%; + display: block; + } +} + +@media only screen and (min-width:48em) { + .c1 { + -webkit-flex-basis: 33.333333333333336%; + -ms-flex-basis: 33.333333333333336%; + flex-basis: 33.333333333333336%; + max-width: 33.333333333333336%; + display: block; + } +} + +@media only screen and (min-width:64em) { + .c1 { + -webkit-flex-basis: 25%; + -ms-flex-basis: 25%; + flex-basis: 25%; + max-width: 25%; + display: block; + } +} + +@media only screen and (min-width:75em) { + .c1 { + -webkit-flex-basis: 25%; + -ms-flex-basis: 25%; + flex-basis: 25%; + max-width: 25%; + display: block; + } +} + +
    -
    svg { + -webkit-fill: ; + fill: ; +} + +.c5:focus { + outline: 0; + background-color: ; + border-color: ; +} + +.c5:hover { + background-color: ; + border-color: ; +} + +.c5:focus, +.c5:hover > svg { + -webkit-fill: ; + fill: ; +} + +.c5:active, +.c5:active:hover, +.c5:active:focus { + outline: 0; + background-color: ; + border-color: ; +} + +.c5:active, +.c5:active:hover, +.c5:active:focus > svg { + -webkit-fill: ; + fill: ; +} + +.c5[disabled] { + cursor: not-allowed; + pointer-events: none; + color: ; + background-color: ; + border-color: ; +} + +.c5[disabled] > svg { + -webkit-fill: ; + fill: ; +} + +.c5[disabled]:focus, +.c5[disabled]:hover, +.c5[disabled]:active, +.c5[disabled]:active:hover, +.c5[disabled]:active:focus { + background-color: ; + border-color: ; +} + +.c5[disabled]:focus, +.c5[disabled]:hover, +.c5[disabled]:active, +.c5[disabled]:active:hover, +.c5[disabled]:active:focus > svg { + -webkit-fill: ; + fill: ; +} + +.c1 { + position: relative; + text-decoration: none; + color: ; + background-color: ; + box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05); + border: solid 0.0625rem; + margin-top: 1.25rem; + margin-bottom: 0; + padding: 1.125rem; + min-height: 16.125rem; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + +.c1:last-child { + margin-bottom: 1.25rem; +} + +.c3 { + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-weight: 500; + font-size: 0.9375rem; + margin-top: 0.625rem; + font-weight: 600; +} + +.c2 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-grow: 1; + -ms-flex-grow: 1; + flex-grow: 1; + text-decoration: none; + color: ; +} + +.c4 { + position: absolute; + right: 0; + bottom: 0; + border: none; +} + +.c4:hover, +.c4:focus, +.c4:active, +.c4:active:hover, +.c4:active:focus { + background-color: ; +} + +.c4:focus > svg, +.c4:hover > svg { + -webkit-fill: ; + fill: ; +} + +.c4:active > svg, +.c4:active:hover > svg, +.c4:active:focus > svg { + -webkit-fill: ; + fill: ; +} + +@media only screen and (min-width:0em) { + .c0 { + -webkit-flex-basis: 100%; + -ms-flex-basis: 100%; + flex-basis: 100%; + max-width: 100%; + display: block; + } +} + +@media only screen and (min-width:48em) { + .c0 { + -webkit-flex-basis: 33.333333333333336%; + -ms-flex-basis: 33.333333333333336%; + flex-basis: 33.333333333333336%; + max-width: 33.333333333333336%; + display: block; + } +} + +@media only screen and (min-width:64em) { + .c0 { + -webkit-flex-basis: 25%; + -ms-flex-basis: 25%; + flex-basis: 25%; + max-width: 25%; + display: block; + } +} + +@media only screen and (min-width:75em) { + .c0 { + -webkit-flex-basis: 25%; + -ms-flex-basis: 25%; + flex-basis: 25%; + max-width: 25%; + display: block; + } +} + +
    -
    svg { + -webkit-fill: ; + fill: ; +} + +.c4:focus { + outline: 0; + background-color: ; + border-color: ; +} + +.c4:hover { + background-color: ; + border-color: ; +} + +.c4:focus, +.c4:hover > svg { + -webkit-fill: ; + fill: ; +} + +.c4:active, +.c4:active:hover, +.c4:active:focus { + outline: 0; + background-color: ; + border-color: ; +} + +.c4:active, +.c4:active:hover, +.c4:active:focus > svg { + -webkit-fill: ; + fill: ; +} + +.c4[disabled] { + cursor: not-allowed; + pointer-events: none; + color: ; + background-color: ; + border-color: ; +} + +.c4[disabled] > svg { + -webkit-fill: ; + fill: ; +} + +.c4[disabled]:focus, +.c4[disabled]:hover, +.c4[disabled]:active, +.c4[disabled]:active:hover, +.c4[disabled]:active:focus { + background-color: ; + border-color: ; +} + +.c4[disabled]:focus, +.c4[disabled]:hover, +.c4[disabled]:active, +.c4[disabled]:active:hover, +.c4[disabled]:active:focus > svg { + -webkit-fill: ; + fill: ; +} + +.c0 { + position: relative; + text-decoration: none; + color: ; + background-color: ; + box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05); + border: solid 0.0625rem; + margin-top: 1.25rem; + margin-bottom: 0; + padding: 1.125rem; + min-height: 16.125rem; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + +.c0:last-child { + margin-bottom: 1.25rem; +} + +.c2 { + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-weight: 500; + font-size: 0.9375rem; + margin-top: 0.625rem; + font-weight: 600; +} + +.c1 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-grow: 1; + -ms-flex-grow: 1; + flex-grow: 1; + text-decoration: none; + color: ; +} + +.c3 { + position: absolute; + right: 0; + bottom: 0; + border: none; +} + +.c3:hover, +.c3:focus, +.c3:active, +.c3:active:hover, +.c3:active:focus { + background-color: ; +} + +.c3:focus > svg, +.c3:hover > svg { + -webkit-fill: ; + fill: ; +} + +.c3:active > svg, +.c3:active:hover > svg, +.c3:active:focus > svg { + -webkit-fill: ; + fill: ; +} + +
    - -

    Wordpress Blog Example

    - svg { + -webkit-fill: ; + fill: ; +} + +.c1:focus { + outline: 0; + background-color: ; + border-color: ; +} + +.c1:hover { + background-color: ; + border-color: ; +} + +.c1:focus, +.c1:hover > svg { + -webkit-fill: ; + fill: ; +} + +.c1:active, +.c1:active:hover, +.c1:active:focus { + outline: 0; + background-color: ; + border-color: ; +} + +.c1:active, +.c1:active:hover, +.c1:active:focus > svg { + -webkit-fill: ; + fill: ; +} + +.c1[disabled] { + cursor: not-allowed; + pointer-events: none; + color: ; + background-color: ; + border-color: ; +} + +.c1[disabled] > svg { + -webkit-fill: ; + fill: ; +} + +.c1[disabled]:focus, +.c1[disabled]:hover, +.c1[disabled]:active, +.c1[disabled]:active:hover, +.c1[disabled]:active:focus { + background-color: ; + border-color: ; +} + +.c1[disabled]:focus, +.c1[disabled]:hover, +.c1[disabled]:active, +.c1[disabled]:active:hover, +.c1[disabled]:active:focus > svg { + -webkit-fill: ; + fill: ; +} + +.c0 { + position: absolute; + right: 0; + bottom: 0; + border: none; +} + +.c0:hover, +.c0:focus, +.c0:active, +.c0:active:hover, +.c0:active:focus { + background-color: ; +} + +.c0:focus > svg, +.c0:hover > svg { + -webkit-fill: ; + fill: ; +} + +.c0:active > svg, +.c0:active:hover > svg, +.c0:active:focus > svg { + -webkit-fill: ; + fill: ; +} + + @@ -394,24 +1247,314 @@ exports[`renders without throwing 1`] = `
    -
    -
    - -
    +
    - Create new deployment group diff --git a/packages/cp-frontend/test/unit/containers/manifest/edit-or-create.js b/packages/cp-frontend/test/unit/containers/manifest/edit-or-create.js deleted file mode 100644 index 967b0d00..00000000 --- a/packages/cp-frontend/test/unit/containers/manifest/edit-or-create.js +++ /dev/null @@ -1,23 +0,0 @@ -/** - * @jest-environment jsdom - */ - -import React from 'react'; -import renderer from 'react-test-renderer'; -import 'jest-styled-components'; - -import DeploymentGroupEditOrCreate from '@containers/manifest/edit-or-create.js'; -import { Router, Store } from '../../mocks'; - -it('renders without throwing', () => { - const tree = renderer - .create( - - - - - - ) - .toJSON(); - expect(tree).toMatchSnapshot(); -}); diff --git a/packages/cp-frontend/test/unit/containers/navigation/__snapshots__/breadcrumb.js.snap b/packages/cp-frontend/test/unit/containers/navigation/__snapshots__/breadcrumb.js.snap index a2f3deeb..e449d34f 100644 --- a/packages/cp-frontend/test/unit/containers/navigation/__snapshots__/breadcrumb.js.snap +++ b/packages/cp-frontend/test/unit/containers/navigation/__snapshots__/breadcrumb.js.snap @@ -6,7 +6,7 @@ exports[`renders without throwing 1`] = ` margin-left: auto; } -.c2 { +.c3 { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -25,7 +25,16 @@ exports[`renders without throwing 1`] = ` margin-left: -0.5rem; } -.c3 { +.c2 { + box-sizing: border-box; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + padding-right: 0.5rem; + padding-left: 0.5rem; +} + +.c4 { font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; font-weight: 500; font-size: 1.5rem; @@ -35,7 +44,7 @@ exports[`renders without throwing 1`] = ` display: inline-block; } -.c4 { +.c5 { border: solid; border-width: 0 0.125rem 0.125rem 0; display: inline-block; @@ -68,26 +77,263 @@ exports[`renders without throwing 1`] = ` } } +@media only screen and (min-width:0em) { + .c2 { + -webkit-flex-basis: 100%; + -ms-flex-basis: 100%; + flex-basis: 100%; + max-width: 100%; + display: block; + } +} +
    -
    -
    -
    -

    - Dashboard -

    -
    + .c0 { + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-right: -0.5rem; + margin-left: -0.5rem; +} + +.c1 { + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-weight: 500; + font-size: 1.5rem; + font-weight: 400; + color: ; + margin: 1.25rem 0 1.125rem 0; + display: inline-block; +} + +.c2 { + border: solid; + border-width: 0 0.125rem 0.125rem 0; + display: inline-block; + padding: 0.125rem; + -webkit-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + transform: rotate(-45deg); + margin: 0.1875rem 0.625rem 0.1875rem 0.625rem; +} + +
    + .c0 { + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-weight: 500; + font-size: 1.5rem; + font-weight: 400; + color: ; + margin: 1.25rem 0 1.125rem 0; + display: inline-block; +} + +.c1 { + border: solid; + border-width: 0 0.125rem 0.125rem 0; + display: inline-block; + padding: 0.125rem; + -webkit-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + transform: rotate(-45deg); + margin: 0.1875rem 0.625rem 0.1875rem 0.625rem; +} + +
    + .c0 { + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-weight: 500; + font-size: 1.5rem; + font-weight: 400; + color: ; + margin: 1.25rem 0 1.125rem 0; + display: inline-block; +} + +

    + Dashboard +

    + .c0 { + border: solid; + border-width: 0 0.125rem 0.125rem 0; + display: inline-block; + padding: 0.125rem; + -webkit-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + transform: rotate(-45deg); + margin: 0.1875rem 0.625rem 0.1875rem 0.625rem; +} + +
    +
    diff --git a/packages/cp-frontend/test/unit/containers/service/__snapshots__/delete.js.snap b/packages/cp-frontend/test/unit/containers/service/__snapshots__/delete.js.snap index 8bf9fac3..40b6f79c 100644 --- a/packages/cp-frontend/test/unit/containers/service/__snapshots__/delete.js.snap +++ b/packages/cp-frontend/test/unit/containers/service/__snapshots__/delete.js.snap @@ -49,17 +49,17 @@ exports[`renders without throwing 1`] = ` } .c4::-moz-focus-inner, -.c4[type="button"]::-moz-focus-inner, -.c4[type="reset"]::-moz-focus-inner, -.c4[type="submit"]::-moz-focus-inner { +.c4[type='button']::-moz-focus-inner, +.c4[type='reset']::-moz-focus-inner, +.c4[type='submit']::-moz-focus-inner { border-style: none; padding: 0; } .c4:-moz-focusring, -.c4[type="button"]:-moz-focusring, -.c4[type="reset"]:-moz-focusring, -.c4[type="submit"]:-moz-focusring { +.c4[type='button']:-moz-focusring, +.c4[type='reset']:-moz-focusring, +.c4[type='submit']:-moz-focusring { outline: 0.0625rem dotted ButtonText; } @@ -144,17 +144,17 @@ exports[`renders without throwing 1`] = ` } .c9::-moz-focus-inner, -.c9[type="button"]::-moz-focus-inner, -.c9[type="reset"]::-moz-focus-inner, -.c9[type="submit"]::-moz-focus-inner { +.c9[type='button']::-moz-focus-inner, +.c9[type='reset']::-moz-focus-inner, +.c9[type='submit']::-moz-focus-inner { border-style: none; padding: 0; } .c9:-moz-focusring, -.c9[type="button"]:-moz-focusring, -.c9[type="reset"]:-moz-focusring, -.c9[type="submit"]:-moz-focusring { +.c9[type='button']:-moz-focusring, +.c9[type='reset']:-moz-focusring, +.c9[type='submit']:-moz-focusring { outline: 0.0625rem dotted ButtonText; } @@ -278,12 +278,392 @@ exports[`renders without throwing 1`] = `
    -
    - -
    -

    + .c1 { + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-weight: 500; + font-size: 1.5rem; +} + +.c0 { + line-height: 1.25; + color: ; + margin: 0 0 0.75rem 0; +} + +

    Deleting a service:
    Nginx

    -

    Deleting a service can lead to irreversible loss of data and failures in your application. Are you sure you want to continue?

    - - -
    svg { + -webkit-fill: ; + fill: ; +} + +.c9:focus { + outline: 0; + background-color: ; + border-color: ; +} + +.c9:hover { + background-color: ; + border-color: ; +} + +.c9:focus, +.c9:hover > svg { + -webkit-fill: ; + fill: ; +} + +.c9:active, +.c9:active:hover, +.c9:active:focus { + outline: 0; + background-color: ; + border-color: ; +} + +.c9:active, +.c9:active:hover, +.c9:active:focus > svg { + -webkit-fill: ; + fill: ; +} + +.c9[disabled] { + cursor: not-allowed; + pointer-events: none; + color: ; + background-color: ; + border-color: ; +} + +.c9[disabled] > svg { + -webkit-fill: ; + fill: ; +} + +.c9[disabled]:focus, +.c9[disabled]:hover, +.c9[disabled]:active, +.c9[disabled]:active:hover, +.c9[disabled]:active:focus { + background-color: ; + border-color: ; +} + +.c9[disabled]:focus, +.c9[disabled]:hover, +.c9[disabled]:active, +.c9[disabled]:active:hover, +.c9[disabled]:active:focus > svg { + -webkit-fill: ; + fill: ; +} + +.c11 { + margin-left: 0.375rem; +} + +.c4 { + padding: 0.35em 0.75em 0.625em; + display: inline-block; + margin: 0; + padding: 0; + border: none; + overflow: hidden; + width: 100%; + height: auto; + -webkit-margin-start: 0; + -webkit-margin-end: 0; + -webkit-padding-before: 0; + -webkit-padding-start: 0; + -webkit-padding-end: 0; + -webkit-padding-after: 0; +} + +.c5 { + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-weight: 400; + font-size: 0.9375rem; + font-style: normal; + font-stretch: normal; + color: ; + float: right; +} + +.c6 { + margin-bottom: 1.5rem; +} + +.c8 { + box-sizing: border-box; + width: 100%; + height: 3rem; + margin-bottom: 0.5rem; + margin-top: 0.5rem; + padding: 0.8125rem 1.125rem; + border-radius: 0.25rem; + background-color: ; + border: 0.0625rem solid; + font-size: 0.9375rem; + line-height: normal !important; + font-weight: 400; + font-style: normal; + font-stretch: normal; + color: ; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + outline: 0; +} + +.c8:focus { + border-color: ; + outline: 0; +} + +.c7 { + width: 7.5rem; + margin: 0 0.75rem 0 0; + vertical-align: middle; +} + +@media only screen and (min-width:48.0625rem) { + .c5 { + text-align: right; + } +} + + -

    Scaling a service:
    Nginx

    -

    Choose how many instances of a service you want to have running.

    -
    svg { + -webkit-fill: ; + fill: ; +} + +.c5:focus { + outline: 0; + background-color: ; + border-color: ; +} + +.c5:hover { + background-color: ; + border-color: ; +} + +.c5:focus, +.c5:hover > svg { + -webkit-fill: ; + fill: ; +} + +.c5:active, +.c5:active:hover, +.c5:active:focus { + outline: 0; + background-color: ; + border-color: ; +} + +.c5:active, +.c5:active:hover, +.c5:active:focus > svg { + -webkit-fill: ; + fill: ; +} + +.c5[disabled] { + cursor: not-allowed; + pointer-events: none; + color: ; + background-color: ; + border-color: ; +} + +.c5[disabled] > svg { + -webkit-fill: ; + fill: ; +} + +.c5[disabled]:focus, +.c5[disabled]:hover, +.c5[disabled]:active, +.c5[disabled]:active:hover, +.c5[disabled]:active:focus { + background-color: ; + border-color: ; +} + +.c5[disabled]:focus, +.c5[disabled]:hover, +.c5[disabled]:active, +.c5[disabled]:active:hover, +.c5[disabled]:active:focus > svg { + -webkit-fill: ; + fill: ; +} + +.c7 { + margin-left: 0.375rem; +} + +.c0 { + padding: 0.35em 0.75em 0.625em; + display: inline-block; + margin: 0; + padding: 0; + border: none; + overflow: hidden; + width: 100%; + height: auto; + -webkit-margin-start: 0; + -webkit-margin-end: 0; + -webkit-padding-before: 0; + -webkit-padding-start: 0; + -webkit-padding-end: 0; + -webkit-padding-after: 0; +} + +.c1 { + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-weight: 400; + font-size: 0.9375rem; + font-style: normal; + font-stretch: normal; + color: ; + float: right; +} + +.c2 { + margin-bottom: 1.5rem; +} + +.c4 { + box-sizing: border-box; + width: 100%; + height: 3rem; + margin-bottom: 0.5rem; + margin-top: 0.5rem; + padding: 0.8125rem 1.125rem; + border-radius: 0.25rem; + background-color: ; + border: 0.0625rem solid; + font-size: 0.9375rem; + line-height: normal !important; + font-weight: 400; + font-style: normal; + font-stretch: normal; + color: ; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + outline: 0; +} + +.c4:focus { + border-color: ; + outline: 0; +} + +.c3 { + width: 7.5rem; + margin: 0 0.75rem 0 0; + vertical-align: middle; +} + +@media only screen and (min-width:48.0625rem) { + .c1 { + text-align: right; + } +} + +
    -
    -
    - -