From 0e342afd130342642b545e48e92bc8900d9a9199 Mon Sep 17 00:00:00 2001 From: Sara Vieira Date: Wed, 17 Jan 2018 20:11:42 +0000 Subject: [PATCH] fix(my-joy-beta): create instance - cns ui fixes fixes #1013 --- packages/my-joy-beta/package.json | 1 + .../__tests__/__snapshots__/menu.spec.js.snap | 14 +- .../src/containers/create-instance/cns.js | 68 +- .../__tests__/__snapshots__/list.spec.js.snap | 1246 ++++++++--------- .../my-joy-beta/src/graphql/get-account.gql | 5 + yarn.lock | 4 + 6 files changed, 679 insertions(+), 659 deletions(-) create mode 100644 packages/my-joy-beta/src/graphql/get-account.gql diff --git a/packages/my-joy-beta/package.json b/packages/my-joy-beta/package.json index b9260826..c620540d 100644 --- a/packages/my-joy-beta/package.json +++ b/packages/my-joy-beta/package.json @@ -36,6 +36,7 @@ "normalized-styled-components": "^1.0.17", "param-case": "^2.1.1", "prop-types": "^15.6.0", + "punycode": "^2.1.0", "react": "^16.2.0", "react-apollo": "^2.0.4", "react-dom": "^16.2.0", diff --git a/packages/my-joy-beta/src/components/navigation/__tests__/__snapshots__/menu.spec.js.snap b/packages/my-joy-beta/src/components/navigation/__tests__/__snapshots__/menu.spec.js.snap index 8818c9a5..bf9b286e 100644 --- a/packages/my-joy-beta/src/components/navigation/__tests__/__snapshots__/menu.spec.js.snap +++ b/packages/my-joy-beta/src/components/navigation/__tests__/__snapshots__/menu.spec.js.snap @@ -29,6 +29,13 @@ exports[`renders without throwing 1`] = ` max-width: 62.5rem; } +.c3 { + display: inline-block; + font-size: 0.9375rem; + line-height: 1.6; + margin-right: 1.4375rem; +} + .c4 { color: rgb(70,70,70); text-decoration: none; @@ -40,13 +47,6 @@ exports[`renders without throwing 1`] = ` cursor: default; } -.c3 { - display: inline-block; - font-size: 0.9375rem; - line-height: 1.6; - margin-right: 1.4375rem; -} - .c2 { list-style-type: none; padding: 0; diff --git a/packages/my-joy-beta/src/containers/create-instance/cns.js b/packages/my-joy-beta/src/containers/create-instance/cns.js index e62efb28..075d2b9d 100644 --- a/packages/my-joy-beta/src/containers/create-instance/cns.js +++ b/packages/my-joy-beta/src/containers/create-instance/cns.js @@ -1,5 +1,5 @@ import React, { Fragment } from 'react'; -import { compose } from 'react-apollo'; +import { compose, graphql } from 'react-apollo'; import ReduxForm from 'declarative-redux-form'; import { destroy } from 'redux-form'; import { connect } from 'react-redux'; @@ -7,6 +7,7 @@ import get from 'lodash.get'; import { Margin, Padding } from 'styled-components-spacing'; import Flex from 'styled-flex-component'; import { set } from 'react-redux-values'; +import punycode from 'punycode'; import remcalc from 'remcalc'; import { @@ -19,9 +20,12 @@ import { FormLabel, Toggle, Divider, - TagList + TagList, + StatusLoader } from 'joyent-ui-toolkit'; +import getAccount from '../../graphql/get-account.gql'; + import { Hostname, Header, @@ -46,7 +50,8 @@ const CNSContainer = ({ handleEdit, handleToggleCnsEnabled, handleAddService, - handleRemoveService + handleRemoveService, + loading }) => ( }>Container Name Service @@ -69,19 +74,27 @@ const CNSContainer = ({
- - {hostnames - .filter(({ service }) => !service) - .map(({ value, ...hostname }) => ( - - ))} - + {loading ? ( + + {' '} + + + ) : ( + + {hostnames + .filter(({ service }) => !service) + .map(({ value, ...hostname }) => ( + + ))} + + )} + {serviceNames.length ? ( - + Existing CNS service name(s) - + {serviceNames.map((value, index) => ( ) : null} -

- *All hostnames are indicative and will be confirmed after - deployment. + *All hostnames listed here will be confirmed after deployment.

@@ -147,7 +158,7 @@ const CNSContainer = ({

{cnsEnabled ? 'CNS Enabled' : 'CNS Not Enabled'}

 - {cnsEnabled ? ( + {cnsEnabled && serviceNames.length ? ( Existing CNS service name(s) @@ -171,7 +182,13 @@ const CNSContainer = ({ ); export default compose( - connect(({ form, values }, ownProps) => { + graphql(getAccount, { + props: ({ data: { loading, account: { id } = [] } }) => ({ + loading, + id + }) + }), + connect(({ form, values }, { id }) => { const instanceName = get( form, 'create-instance-name.values.name', @@ -179,17 +196,16 @@ export default compose( ); const serviceNames = get(values, `${CNS_FORM}-services`, []); - // REPLACE WITH USER ID AND DATA CENTER - const userID = '10703e3c-ada6-478d-c757-e5bcad0ea74c'; + // REPLACE WITH DATA CENTER const dataCenter = 'us-east-1'; const hostnames = [ { - values: [`${instanceName}.inst.${userID}.${dataCenter}.triton.zone`], + values: [`${instanceName}.inst.${id}.${dataCenter}.triton.zone`], public: true }, { - values: [`${instanceName}.inst.${userID}.${dataCenter}.cns.joyent.com`] + values: [`${instanceName}.inst.${id}.${dataCenter}.cns.joyent.com`] }, { values: [], @@ -209,7 +225,7 @@ export default compose( return serviceNames.map(name => { const postfix = hostname.public ? '.triton.zone' : '.cns.joyent.com'; - const value = `${name}.svc.${userID}.${dataCenter}${postfix}`; + const value = `${name}.svc.${id}.${dataCenter}${postfix}`; hostname.values.push(value); }); }); @@ -231,11 +247,17 @@ export default compose( handleToggleCnsEnabled: ({ target }) => dispatch(set({ name: `${CNS_FORM}-enabled`, value: !cnsEnabled })), handleAddService: ({ name }) => { + const serviceName = punycode.encode( + name + .toLowerCase() + .split(' ') + .join('-') + ); dispatch([ destroy(`${CNS_FORM}-new-service`), set({ name: `${CNS_FORM}-services`, - value: serviceNames.concat(name.toLowerCase()) + value: serviceNames.concat(serviceName) }) ]); }, diff --git a/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/list.spec.js.snap b/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/list.spec.js.snap index 94562064..3a084738 100644 --- a/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/list.spec.js.snap +++ b/packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/list.spec.js.snap @@ -3600,13 +3600,6 @@ exports[`renders without throwing 1`] = ` border-radius: 0.6875rem; } -.c42 { - background-color: rgba(241,241,241,1); - border-top: 0.0625rem solid rgb(216,216,216); - height: 4.375rem; - max-height: 4.375rem; -} - .c11 { display: inline-block; } @@ -3695,7 +3688,7 @@ exports[`renders without throwing 1`] = ` max-height: 1.125rem; } -.c47 { +.c46 { box-sizing: border-box; display: inline-block; -webkit-box-pack: center; @@ -3755,6 +3748,131 @@ exports[`renders without throwing 1`] = ` align-items: center; } +.c46:focus { + outline: 0; + text-decoration: none; + background-color: rgb(59,70,204); + border-color: rgb(45,56,132); +} + +.c46:hover { + background-color: rgb(72,83,217); + border: solid 0.0625rem rgb(45,56,132); +} + +.c46:active, +.c46:active:hover, +.c46:active:focus { + background-image: none; + outline: 0; + background-color: rgb(45,56,132); + border-color: rgb(45,56,132); +} + +.c46[disabled] { + cursor: not-allowed; + pointer-events: none; +} + +.c46:focus { + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); +} + +.c46:hover { + background-color: rgb(247,247,247); + border-color: rgb(216,216,216); +} + +.c46:active, +.c46:active:hover, +.c46:active:focus { + background-color: rgb(230,230,230); + border-color: rgb(216,216,216); +} + +.c46:focus { + background-color: rgb(250,250,250); + border-color: rgb(216,216,216); +} + +.c46:hover { + background-color: rgb(250,250,250); + border-color: rgb(250,250,250); +} + +.c46:active, +.c46:active:hover, +.c46:active:focus { + background-color: rgb(250,250,250); + border-color: rgb(250,250,250); +} + +.c46 svg + span { + margin-left: 0.75rem; +} + +.c46 svg { + max-height: 1.125rem; +} + +.c47 { + box-sizing: border-box; + display: inline-block; + -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; + min-height: 3rem; + height: 3rem; + min-width: 7.5rem; + margin-bottom: 0.5rem; + margin-top: 0.5rem; + padding: 0.9375rem 1.125rem; + position: relative; + font-size: 0.9375rem; + text-align: center; + font-style: normal; + font-stretch: normal; + line-height: normal; + -webkit-letter-spacing: normal; + -moz-letter-spacing: normal; + -ms-letter-spacing: normal; + letter-spacing: normal; + text-decoration: none; + white-space: nowrap; + vertical-align: middle; + touch-action: manipulation; + cursor: pointer; + color: rgb(255,255,255); + -webkit-text-fill-color: currentcolor; + background-image: none; + background-color: rgb(59,70,204); + border-radius: 0.25rem; + border: solid 0.0625rem rgb(45,56,132); + color: rgb(70,70,70); + -webkit-text-fill-color: currentcolor; + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); + cursor: not-allowed; + pointer-events: none; + color: rgb(216,216,216); + background-color: rgb(250,250,250); + border-color: rgb(216,216,216); + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + .c47:focus { outline: 0; text-decoration: none; @@ -3823,7 +3941,7 @@ exports[`renders without throwing 1`] = ` max-height: 1.125rem; } -.c48 { +.c49 { box-sizing: border-box; display: inline-block; -webkit-box-pack: center; @@ -3865,11 +3983,18 @@ exports[`renders without throwing 1`] = ` -webkit-text-fill-color: currentcolor; background-color: rgb(255,255,255); border-color: rgb(216,216,216); + color: rgb(210,67,58); + -webkit-text-fill-color: currentcolor; + background-color: rgb(255,255,255); + border-color: rgb(210,67,58); cursor: not-allowed; pointer-events: none; color: rgb(216,216,216); background-color: rgb(250,250,250); border-color: rgb(216,216,216); + padding: 0.5625rem 1.125rem; + font-size: 0.8125rem; + min-width: 0rem; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; @@ -3878,73 +4003,91 @@ exports[`renders without throwing 1`] = ` -webkit-box-align: center; -ms-flex-align: center; align-items: center; + float: right; } -.c48:focus { +.c49:focus { outline: 0; text-decoration: none; background-color: rgb(59,70,204); border-color: rgb(45,56,132); } -.c48:hover { +.c49:hover { background-color: rgb(72,83,217); border: solid 0.0625rem rgb(45,56,132); } -.c48:active, -.c48:active:hover, -.c48:active:focus { +.c49:active, +.c49:active:hover, +.c49:active:focus { background-image: none; outline: 0; background-color: rgb(45,56,132); border-color: rgb(45,56,132); } -.c48[disabled] { +.c49[disabled] { cursor: not-allowed; pointer-events: none; } -.c48:focus { +.c49:focus { background-color: rgb(255,255,255); border-color: rgb(216,216,216); } -.c48:hover { +.c49:hover { background-color: rgb(247,247,247); border-color: rgb(216,216,216); } -.c48:active, -.c48:active:hover, -.c48:active:focus { +.c49:active, +.c49:active:hover, +.c49:active:focus { background-color: rgb(230,230,230); border-color: rgb(216,216,216); } -.c48:focus { +.c49:focus { + background-color: rgb(255,255,255); + border-color: rgb(210,67,58); +} + +.c49:hover { + background-color: rgb(247,247,247); + border-color: rgb(210,67,58); +} + +.c49:active, +.c49:active:hover, +.c49:active:focus { + background-color: rgb(230,230,230); + border-color: rgb(210,67,58); +} + +.c49:focus { background-color: rgb(250,250,250); border-color: rgb(216,216,216); } -.c48:hover { +.c49:hover { background-color: rgb(250,250,250); border-color: rgb(250,250,250); } -.c48:active, -.c48:active:hover, -.c48:active:focus { +.c49:active, +.c49:active:hover, +.c49:active:focus { background-color: rgb(250,250,250); border-color: rgb(250,250,250); } -.c48 svg + span { +.c49 svg + span { margin-left: 0.75rem; } -.c48 svg { +.c49 svg { max-height: 1.125rem; } @@ -3999,9 +4142,6 @@ exports[`renders without throwing 1`] = ` color: rgb(216,216,216); background-color: rgb(250,250,250); border-color: rgb(216,216,216); - padding: 0.5625rem 1.125rem; - font-size: 0.8125rem; - min-width: 0rem; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; @@ -4098,153 +4238,6 @@ exports[`renders without throwing 1`] = ` max-height: 1.125rem; } -.c51 { - box-sizing: border-box; - display: inline-block; - -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; - min-height: 3rem; - height: 3rem; - min-width: 7.5rem; - margin-bottom: 0.5rem; - margin-top: 0.5rem; - padding: 0.9375rem 1.125rem; - position: relative; - font-size: 0.9375rem; - text-align: center; - font-style: normal; - font-stretch: normal; - line-height: normal; - -webkit-letter-spacing: normal; - -moz-letter-spacing: normal; - -ms-letter-spacing: normal; - letter-spacing: normal; - text-decoration: none; - white-space: nowrap; - vertical-align: middle; - touch-action: manipulation; - cursor: pointer; - color: rgb(255,255,255); - -webkit-text-fill-color: currentcolor; - background-image: none; - background-color: rgb(59,70,204); - border-radius: 0.25rem; - border: solid 0.0625rem rgb(45,56,132); - color: rgb(70,70,70); - -webkit-text-fill-color: currentcolor; - background-color: rgb(255,255,255); - border-color: rgb(216,216,216); - color: rgb(210,67,58); - -webkit-text-fill-color: currentcolor; - background-color: rgb(255,255,255); - border-color: rgb(210,67,58); - cursor: not-allowed; - pointer-events: none; - color: rgb(216,216,216); - background-color: rgb(250,250,250); - border-color: rgb(216,216,216); - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - float: right; -} - -.c51:focus { - outline: 0; - text-decoration: none; - background-color: rgb(59,70,204); - border-color: rgb(45,56,132); -} - -.c51:hover { - background-color: rgb(72,83,217); - border: solid 0.0625rem rgb(45,56,132); -} - -.c51:active, -.c51:active:hover, -.c51:active:focus { - background-image: none; - outline: 0; - background-color: rgb(45,56,132); - border-color: rgb(45,56,132); -} - -.c51[disabled] { - cursor: not-allowed; - pointer-events: none; -} - -.c51:focus { - background-color: rgb(255,255,255); - border-color: rgb(216,216,216); -} - -.c51:hover { - background-color: rgb(247,247,247); - border-color: rgb(216,216,216); -} - -.c51:active, -.c51:active:hover, -.c51:active:focus { - background-color: rgb(230,230,230); - border-color: rgb(216,216,216); -} - -.c51:focus { - background-color: rgb(255,255,255); - border-color: rgb(210,67,58); -} - -.c51:hover { - background-color: rgb(247,247,247); - border-color: rgb(210,67,58); -} - -.c51:active, -.c51:active:hover, -.c51:active:focus { - background-color: rgb(230,230,230); - border-color: rgb(210,67,58); -} - -.c51:focus { - background-color: rgb(250,250,250); - border-color: rgb(216,216,216); -} - -.c51:hover { - background-color: rgb(250,250,250); - border-color: rgb(250,250,250); -} - -.c51:active, -.c51:active:hover, -.c51:active:focus { - background-color: rgb(250,250,250); - border-color: rgb(250,250,250); -} - -.c51 svg + span { - margin-left: 0.75rem; -} - -.c51 svg { - max-height: 1.125rem; -} - .c6 { font-size: 0.9375rem; font-style: normal; @@ -4267,7 +4260,7 @@ exports[`renders without throwing 1`] = ` padding-bottom: 1.125rem; } -.c44 { +.c43 { margin-right: auto; margin-left: auto; box-sizing: border-box; @@ -4330,7 +4323,7 @@ exports[`renders without throwing 1`] = ` flex: 1 1 auto; } -.c45 { +.c44 { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -4370,7 +4363,7 @@ exports[`renders without throwing 1`] = ` padding-left: 0.5rem; } -.c46 { +.c45 { box-sizing: border-box; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; @@ -4379,7 +4372,7 @@ exports[`renders without throwing 1`] = ` padding-left: 0.5rem; } -.c49 { +.c48 { box-sizing: border-box; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; @@ -4395,7 +4388,7 @@ exports[`renders without throwing 1`] = ` height: 1.875rem; } -.c43 { +.c42 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -4413,10 +4406,13 @@ exports[`renders without throwing 1`] = ` -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; - background-color: rgb(30,49,59); + background-color: rgba(241,241,241,1); + border-top: 0.0625rem solid rgb(216,216,216); max-height: 3.3125rem; min-height: 3.3125rem; line-height: 1.5625rem; + height: 4.375rem; + max-height: 4.375rem; position: fixed; left: 0; right: 0; @@ -4976,32 +4972,32 @@ exports[`renders without throwing 1`] = ` } @media only screen and (min-width:48em) { - .c44 { + .c43 { width: 46rem; } } @media only screen and (min-width:64em) { - .c44 { + .c43 { width: 61rem; } } @media only screen and (min-width:75em) { - .c44 { + .c43 { width: 76rem; } } @media only screen and (max-width:47.9375rem) { - .c44 { + .c43 { padding-left: 0.375rem; padding-right: 0.375rem; } } @media only screen and (min-width:0em) { - .c45 { + .c44 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -5010,7 +5006,7 @@ exports[`renders without throwing 1`] = ` } @media only screen and (min-width:0em) { - .c45 { + .c44 { -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; @@ -5059,7 +5055,7 @@ exports[`renders without throwing 1`] = ` } @media only screen and (min-width:0em) { - .c46 { + .c45 { -webkit-flex-basis: 58.333333333333336%; -ms-flex-preferred-size: 58.333333333333336%; flex-basis: 58.333333333333336%; @@ -5069,7 +5065,7 @@ exports[`renders without throwing 1`] = ` } @media only screen and (min-width:0em) { - .c49 { + .c48 { -webkit-flex-basis: 41.66666666666667%; -ms-flex-preferred-size: 41.66666666666667%; flex-basis: 41.66666666666667%; @@ -5601,23 +5597,23 @@ exports[`renders without throwing 1`] = `