Browse Source

feat(instances): adds cli-details UI

master
johnytiago 4 years ago committed by Sérgio Ramos
parent
commit
078513f603
  1. 20
      consoles/my-joy-instances/src/components/__tests__/__snapshots__/menu.spec.js.snap
  2. 80
      consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/list.spec.js.snap
  3. 10
      consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/metadata.spec.js.snap
  4. 12
      consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/snapshots.spec.js.snap
  5. 82
      consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/summary.spec.js.snap
  6. 2
      consoles/my-joy-instances/src/components/instances/footer.js
  7. 1
      consoles/my-joy-instances/src/constants.js
  8. 87
      consoles/my-joy-instances/src/containers/create.js
  9. 944
      consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/cns.spec.js.snap
  10. 1580
      consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/firewall.spec.js.snap
  11. 67
      consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/list.spec.js.snap
  12. 18
      consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/metadata.spec.js.snap
  13. 8
      consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/networks.spec.js.snap
  14. 22
      consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/summary.spec.js.snap
  15. 14
      consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/tags.spec.js.snap
  16. 1
      packages/instance-steps/package.json
  17. 131
      packages/instance-steps/src/footer/cli-details.js
  18. 141
      packages/instance-steps/src/footer/index.js
  19. 3
      packages/instance-steps/src/index.js
  20. 8
      packages/instance-steps/src/name/index.js
  21. 3
      packages/instance-steps/src/networks/index.js
  22. 2
      packages/instance-steps/src/tags/index.js
  23. 6
      packages/resource-step/src/status-icon.js
  24. 199
      packages/resource-widgets/src/__tests__/__snapshots__/cns.spec.js.snap
  25. 248
      packages/resource-widgets/src/__tests__/__snapshots__/firewall.spec.js.snap
  26. 1
      packages/resource-widgets/src/__tests__/__snapshots__/network.spec.js.snap
  27. 8
      packages/resource-widgets/src/cns/index.js
  28. 14
      packages/resource-widgets/src/firewall/index.js
  29. 5
      packages/resource-widgets/src/key-value/__tests__/__snapshots__/key-value.spec.js.snap
  30. 29
      packages/ui-toolkit/src/anchor/__tests___/__snapshots__/anchor.spec.js.snap
  31. 12
      packages/ui-toolkit/src/anchor/index.js
  32. 4
      packages/ui-toolkit/src/base/global.js
  33. 50
      packages/ui-toolkit/src/button/__tests___/__snapshots__/button.spec.js.snap
  34. 1
      packages/ui-toolkit/src/card/index.js
  35. 30
      packages/ui-toolkit/src/footer/sticky.js
  36. 4
      packages/ui-toolkit/src/form/__tests__/__snapshots__/form.spec.js.snap
  37. 15
      packages/ui-toolkit/src/form/base/input.js
  38. 5
      packages/ui-toolkit/src/section-list/index.js
  39. 53
      packages/ui-toolkit/src/section-list/item.js
  40. 6
      packages/ui-toolkit/src/text/__tests__/__snapshots__/text.spec.js.snap
  41. 6
      packages/ui-toolkit/src/text/headings.js

20
consoles/my-joy-instances/src/components/__tests__/__snapshots__/menu.spec.js.snap

@ -21,11 +21,9 @@ exports[`renders <Menu links /> without throwing 1`] = `
.c6 {
color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor;
}
.c6:hover {
-webkit-text-decoration: none;
text-decoration: none;
cursor: pointer;
-webkit-text-decoration: underline;
text-decoration: underline;
}
.c1 {
@ -57,10 +55,10 @@ exports[`renders <Menu links /> without throwing 1`] = `
position: relative;
}
.c5.active:after {
.c5:after {
width: 100%;
height: 0.0625rem;
background: rgb(73,73,73);
background: rgb(216,216,216);
content: '';
position: absolute;
bottom: 0;
@ -68,6 +66,14 @@ exports[`renders <Menu links /> without throwing 1`] = `
z-index: 2;
}
.c5.active:after {
background: rgb(73,73,73);
}
.c5.active {
font-weight: 600;
}
.c3 {
background: rgb(250,250,250);
list-style-type: none;

80
consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/list.spec.js.snap

@ -54,11 +54,9 @@ exports[`renders <InstanceList /> without throwing 1`] = `
.c21 {
color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor;
}
.c21:hover {
-webkit-text-decoration: none;
text-decoration: none;
cursor: pointer;
-webkit-text-decoration: underline;
text-decoration: underline;
}
.c11 {
@ -798,11 +796,9 @@ exports[`renders <InstanceList allSelected /> without throwing 1`] = `
.c21 {
color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor;
}
.c21:hover {
-webkit-text-decoration: none;
text-decoration: none;
cursor: pointer;
-webkit-text-decoration: underline;
text-decoration: underline;
}
.c11 {
@ -1542,11 +1538,9 @@ exports[`renders <InstanceList sortBy /> without throwing 1`] = `
.c21 {
color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor;
}
.c21:hover {
-webkit-text-decoration: none;
text-decoration: none;
cursor: pointer;
-webkit-text-decoration: underline;
text-decoration: underline;
}
.c12 {
@ -2286,11 +2280,9 @@ exports[`renders <InstanceList sortBy sortOrder /> without throwing 1`] = `
.c21 {
color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor;
}
.c21:hover {
-webkit-text-decoration: none;
text-decoration: none;
cursor: pointer;
-webkit-text-decoration: underline;
text-decoration: underline;
}
.c12 {
@ -3030,11 +3022,9 @@ exports[`renders <InstanceList submitting /> without throwing 1`] = `
.c21 {
color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor;
}
.c21:hover {
-webkit-text-decoration: none;
text-decoration: none;
cursor: pointer;
-webkit-text-decoration: underline;
text-decoration: underline;
}
.c11 {
@ -3774,11 +3764,9 @@ exports[`renders <InstanceList>{children}</InstanceList> without throwing 1`] =
.c21 {
color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor;
}
.c21:hover {
-webkit-text-decoration: none;
text-decoration: none;
cursor: pointer;
-webkit-text-decoration: underline;
text-decoration: underline;
}
.c11 {
@ -4512,11 +4500,9 @@ exports[`renders <Item /> without throwing 1`] = `
.c11 {
color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor;
}
.c11:hover {
-webkit-text-decoration: none;
text-decoration: none;
cursor: pointer;
-webkit-text-decoration: underline;
text-decoration: underline;
}
.c12 {
@ -5039,11 +5025,9 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
.c11 {
color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor;
}
.c11:hover {
-webkit-text-decoration: none;
text-decoration: none;
cursor: pointer;
-webkit-text-decoration: underline;
text-decoration: underline;
}
.c12 {
@ -5568,11 +5552,9 @@ exports[`renders <Item allowedActions /> without throwing 1`] = `
.c11 {
color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor;
}
.c11:hover {
-webkit-text-decoration: none;
text-decoration: none;
cursor: pointer;
-webkit-text-decoration: underline;
text-decoration: underline;
}
.c12 {
@ -6095,11 +6077,9 @@ exports[`renders <Item mutating /> without throwing 1`] = `
.c11 {
color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor;
}
.c11:hover {
-webkit-text-decoration: none;
text-decoration: none;
cursor: pointer;
-webkit-text-decoration: underline;
text-decoration: underline;
}
.c13 {

10
consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/metadata.spec.js.snap

@ -691,8 +691,8 @@ exports[`renders <AddForm /> without throwing 1`] = `
.c23 {
box-sizing: border-box;
width: 18.75rem;
height: 6rem;
min-height: 6rem;
height: 12rem;
min-height: 12rem;
padding: 0.8125rem 0.75rem;
border-radius: 0.25rem;
background-color: rgb(255,255,255);
@ -706,6 +706,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
-moz-appearance: none;
appearance: none;
outline: 0;
white-space: pre-wrap;
font-family: "Roboto Mono",monospace;
width: 100%;
min-width: 100%;
@ -1760,8 +1761,8 @@ exports[`renders <EditForm /> without throwing 1`] = `
.c23 {
box-sizing: border-box;
width: 18.75rem;
height: 6rem;
min-height: 6rem;
height: 12rem;
min-height: 12rem;
padding: 0.8125rem 0.75rem;
border-radius: 0.25rem;
background-color: rgb(255,255,255);
@ -1775,6 +1776,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
-moz-appearance: none;
appearance: none;
outline: 0;
white-space: pre-wrap;
font-family: "Roboto Mono",monospace;
width: 100%;
min-width: 100%;

12
consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/snapshots.spec.js.snap

@ -497,7 +497,7 @@ Array [
.c6 {
margin: 0;
color: rgb(73,73,73);
font-weight: normal;
font-weight: 400;
line-height: 1.625rem;
font-size: 1.3125rem;
}
@ -2401,7 +2401,7 @@ Array [
.c6 {
margin: 0;
color: rgb(73,73,73);
font-weight: normal;
font-weight: 400;
line-height: 1.625rem;
font-size: 1.3125rem;
}
@ -3289,7 +3289,7 @@ Array [
.c6 {
margin: 0;
color: rgb(73,73,73);
font-weight: normal;
font-weight: 400;
line-height: 1.625rem;
font-size: 1.3125rem;
}
@ -4177,7 +4177,7 @@ Array [
.c6 {
margin: 0;
color: rgb(73,73,73);
font-weight: normal;
font-weight: 400;
line-height: 1.625rem;
font-size: 1.3125rem;
}
@ -5065,7 +5065,7 @@ Array [
.c6 {
margin: 0;
color: rgb(73,73,73);
font-weight: normal;
font-weight: 400;
line-height: 1.625rem;
font-size: 1.3125rem;
}
@ -5953,7 +5953,7 @@ Array [
.c6 {
margin: 0;
color: rgb(73,73,73);
font-weight: normal;
font-weight: 400;
line-height: 1.625rem;
font-size: 1.3125rem;
}

82
consoles/my-joy-instances/src/components/instances/__tests__/__snapshots__/summary.spec.js.snap

@ -231,15 +231,13 @@ exports[`renders <Summary /> without throwing 1`] = `
.c36 {
color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor;
cursor: pointer;
-webkit-text-decoration: underline;
text-decoration: underline;
color: rgb(255,255,255);
-webkit-text-fill-color: currentcolor;
}
.c36:hover {
-webkit-text-decoration: none;
text-decoration: none;
}
.c29 {
min-width: 7.5rem;
}
@ -885,7 +883,7 @@ exports[`renders <Summary /> without throwing 1`] = `
.c9 {
margin: 0;
color: rgb(73,73,73);
font-weight: normal;
font-weight: 400;
line-height: 1.875rem;
font-size: 1.5rem;
}
@ -952,6 +950,7 @@ exports[`renders <Summary /> without throwing 1`] = `
-moz-appearance: none;
appearance: none;
outline: 0;
white-space: pre-wrap;
font-family: "Roboto Mono",monospace;
width: 100%;
min-width: 100%;
@ -1031,6 +1030,7 @@ exports[`renders <Summary /> without throwing 1`] = `
-moz-appearance: none;
appearance: none;
outline: 0;
white-space: pre-wrap;
font-family: "Roboto Mono",monospace;
width: 100%;
min-width: 100%;
@ -2087,15 +2087,13 @@ exports[`renders <Summary instance /> without throwing 1`] = `
.c35 {
color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor;
cursor: pointer;
-webkit-text-decoration: underline;
text-decoration: underline;
color: rgb(255,255,255);
-webkit-text-fill-color: currentcolor;
}
.c35:hover {
-webkit-text-decoration: none;
text-decoration: none;
}
.c29 {
min-width: 7.5rem;
}
@ -2580,7 +2578,7 @@ exports[`renders <Summary instance /> without throwing 1`] = `
.c9 {
margin: 0;
color: rgb(73,73,73);
font-weight: normal;
font-weight: 400;
line-height: 1.875rem;
font-size: 1.5rem;
}
@ -2647,6 +2645,7 @@ exports[`renders <Summary instance /> without throwing 1`] = `
-moz-appearance: none;
appearance: none;
outline: 0;
white-space: pre-wrap;
font-family: "Roboto Mono",monospace;
width: 100%;
min-width: 100%;
@ -4020,15 +4019,13 @@ exports[`renders <Summary instance /> without throwing 2`] = `
.c35 {
color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor;
cursor: pointer;
-webkit-text-decoration: underline;
text-decoration: underline;
color: rgb(255,255,255);
-webkit-text-fill-color: currentcolor;
}
.c35:hover {
-webkit-text-decoration: none;
text-decoration: none;
}
.c29 {
min-width: 7.5rem;
}
@ -4513,7 +4510,7 @@ exports[`renders <Summary instance /> without throwing 2`] = `
.c9 {
margin: 0;
color: rgb(73,73,73);
font-weight: normal;
font-weight: 400;
line-height: 1.875rem;
font-size: 1.5rem;
}
@ -4580,6 +4577,7 @@ exports[`renders <Summary instance /> without throwing 2`] = `
-moz-appearance: none;
appearance: none;
outline: 0;
white-space: pre-wrap;
font-family: "Roboto Mono",monospace;
width: 100%;
min-width: 100%;
@ -5949,15 +5947,13 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
.c39 {
color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor;
cursor: pointer;
-webkit-text-decoration: underline;
text-decoration: underline;
color: rgb(255,255,255);
-webkit-text-fill-color: currentcolor;
}
.c39:hover {
-webkit-text-decoration: none;
text-decoration: none;
}
.c32 {
fill: rgb(59,70,204);
stroke: rgb(59,70,204);
@ -6648,7 +6644,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
.c9 {
margin: 0;
color: rgb(73,73,73);
font-weight: normal;
font-weight: 400;
line-height: 1.875rem;
font-size: 1.5rem;
}
@ -6715,6 +6711,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
-moz-appearance: none;
appearance: none;
outline: 0;
white-space: pre-wrap;
font-family: "Roboto Mono",monospace;
width: 100%;
min-width: 100%;
@ -6794,6 +6791,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
-moz-appearance: none;
appearance: none;
outline: 0;
white-space: pre-wrap;
font-family: "Roboto Mono",monospace;
width: 100%;
min-width: 100%;
@ -7874,15 +7872,13 @@ exports[`renders <Summary state /> without throwing 1`] = `
.c35 {
color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor;
cursor: pointer;
-webkit-text-decoration: underline;
text-decoration: underline;
color: rgb(255,255,255);
-webkit-text-fill-color: currentcolor;
}
.c35:hover {
-webkit-text-decoration: none;
text-decoration: none;
}
.c29 {
min-width: 7.5rem;
}
@ -8367,7 +8363,7 @@ exports[`renders <Summary state /> without throwing 1`] = `
.c9 {
margin: 0;
color: rgb(73,73,73);
font-weight: normal;
font-weight: 400;
line-height: 1.875rem;
font-size: 1.5rem;
}
@ -8434,6 +8430,7 @@ exports[`renders <Summary state /> without throwing 1`] = `
-moz-appearance: none;
appearance: none;
outline: 0;
white-space: pre-wrap;
font-family: "Roboto Mono",monospace;
width: 100%;
min-width: 100%;
@ -8513,6 +8510,7 @@ exports[`renders <Summary state /> without throwing 1`] = `
-moz-appearance: none;
appearance: none;
outline: 0;
white-space: pre-wrap;
font-family: "Roboto Mono",monospace;
width: 100%;
min-width: 100%;
@ -9569,15 +9567,13 @@ exports[`renders <Summary state /> without throwing 2`] = `
.c35 {
color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor;
cursor: pointer;
-webkit-text-decoration: underline;
text-decoration: underline;
color: rgb(255,255,255);
-webkit-text-fill-color: currentcolor;
}
.c35:hover {
-webkit-text-decoration: none;
text-decoration: none;
}
.c29 {
min-width: 7.5rem;
}
@ -10062,7 +10058,7 @@ exports[`renders <Summary state /> without throwing 2`] = `
.c9 {
margin: 0;
color: rgb(73,73,73);
font-weight: normal;
font-weight: 400;
line-height: 1.875rem;
font-size: 1.5rem;
}
@ -10129,6 +10125,7 @@ exports[`renders <Summary state /> without throwing 2`] = `
-moz-appearance: none;
appearance: none;
outline: 0;
white-space: pre-wrap;
font-family: "Roboto Mono",monospace;
width: 100%;
min-width: 100%;
@ -10208,6 +10205,7 @@ exports[`renders <Summary state /> without throwing 2`] = `
-moz-appearance: none;
appearance: none;
outline: 0;
white-space: pre-wrap;
font-family: "Roboto Mono",monospace;
width: 100%;
min-width: 100%;
@ -11264,15 +11262,13 @@ exports[`renders <Summary state /> without throwing 3`] = `
.c36 {
color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor;
cursor: pointer;
-webkit-text-decoration: underline;
text-decoration: underline;
color: rgb(255,255,255);
-webkit-text-fill-color: currentcolor;
}
.c36:hover {
-webkit-text-decoration: none;
text-decoration: none;
}
.c29 {
min-width: 7.5rem;
}
@ -11919,7 +11915,7 @@ exports[`renders <Summary state /> without throwing 3`] = `
.c9 {
margin: 0;
color: rgb(73,73,73);
font-weight: normal;
font-weight: 400;
line-height: 1.875rem;
font-size: 1.5rem;
}
@ -11986,6 +11982,7 @@ exports[`renders <Summary state /> without throwing 3`] = `
-moz-appearance: none;
appearance: none;
outline: 0;
white-space: pre-wrap;
font-family: "Roboto Mono",monospace;
width: 100%;
min-width: 100%;
@ -12065,6 +12062,7 @@ exports[`renders <Summary state /> without throwing 3`] = `
-moz-appearance: none;
appearance: none;
outline: 0;
white-space: pre-wrap;
font-family: "Roboto Mono",monospace;
width: 100%;
min-width: 100%;

2
consoles/my-joy-instances/src/components/instances/footer.js

@ -24,7 +24,7 @@ export default ({
onReboot,
onRemove
}) => (
<StickyFooter fill="#FAFAFA" fixed bottom>
<StickyFooter fill="disabled" fixed bottom>
<Row between="xs" middle="xs">
<Col xs="7">
<Flex>

1
consoles/my-joy-instances/src/constants.js

@ -18,6 +18,7 @@ export const Forms = {
};
export const Values = {
IC_SHOW_CLI: 'INSTANCE_CREATION_SHOW_CLI',
IC_AFF_V_ADD_OPEN: 'INSTANCE_CREATION_AFFINITY_VALUE_ADD_OPEN',
IC_AFF_V_EDIT_OPEN: 'INSTANCE_CREATION_AFFINITY_VALUE_EDIT_OPEN',
IC_AFF_V_AFF: 'INSTANCE_CREATION_AFFINITY_VALUE_AFFINITY',

87
consoles/my-joy-instances/src/containers/create.js

@ -1,15 +1,14 @@
import React, { Component } from 'react';
import React, { Component, Fragment } from 'react';
import { Margin, Padding } from 'styled-components-spacing';
import { graphql, compose } from 'react-apollo';
import ReduxForm from 'declarative-redux-form';
import { connect } from 'react-redux';
import { SubmissionError, destroy } from 'redux-form';
import { set, destroyAll } from 'react-redux-values';
import Flex, { FlexItem } from 'styled-flex-component';
import intercept from 'apr-intercept';
import get from 'lodash.get';
import { H3, ViewContainer, Button } from 'joyent-ui-toolkit';
import { Provider as ResourceSteps } from 'joyent-ui-resource-step';
import styled from 'styled-components';
import {
Name,
@ -22,14 +21,20 @@ import {
Firewall,
CNS,
Affinity,
generatePayload
generatePayload,
Footer
} from 'joyent-ui-instance-steps';
import { Forms } from '@root/constants';
import { Provider as ResourceSteps } from 'joyent-ui-resource-step';
import { Anchor, H3, ViewContainer, Button } from 'joyent-ui-toolkit';
import { Forms, Values } from '@root/constants';
import parseError from '@state/parse-error';
import CreateInstanceMutation from '@graphql/create-instance.gql';
const { IC_F } = Forms;
const { IC_SHOW_CLI } = Values;
const names = {
name: 'IC_NAME',
image: 'IC_IMAGE',
@ -86,7 +91,16 @@ class CreateInstance extends Component {
};
render() {
const { match, steps, handleDefocus, handleSubmit, disabled } = this.props;
const {
match,
steps,
showCli = false,
handleDefocus,
handleToggleShowCli,
handleSubmit,
disabled
} = this.props;
const { params } = match;
const { step } = params;
@ -102,6 +116,16 @@ class CreateInstance extends Component {
affinity
} = steps;
const Mask = styled.div`
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.25);
position: absolute;
display: ${showCli ? 'block' : 'none'};
`;
return (
<ViewContainer main>
<Margin top="5">
@ -218,20 +242,43 @@ class CreateInstance extends Component {
</Margin>
</ResourceSteps>
<Margin bottom="5">
<ReduxForm form={IC_F} onSubmit={handleSubmit}>
{({ handleSubmit, submitting }) => (
<form onSubmit={handleSubmit}>
<Button
<Flex alignCenter>
<FlexItem>
<ReduxForm form={IC_F} onSubmit={handleSubmit}>
{({ handleSubmit, submitting }) => (
<form onSubmit={handleSubmit}>
<Button
disabled={disabled || !this.isFormValid()}
loading={submitting}
>
Deploy
</Button>
</form>
)}
</ReduxForm>
</FlexItem>
<FlexItem>
<Margin left={3}>
<Anchor
disabled={disabled || !this.isFormValid()}
loading={submitting}
onClick={() => handleToggleShowCli(!showCli)}
>
Deploy
</Button>
</form>
)}
</ReduxForm>
View CLI Details
</Anchor>
</Margin>
</FlexItem>
</Flex>
</Margin>
</Padding>
{showCli ? (
<Fragment>
<Footer
getData={() => generatePayload(steps)}
onCloseCli={() => handleToggleShowCli(!showCli)}
/>
<Mask onClick={() => handleToggleShowCli(!showCli)} />
</Fragment>
) : null}
</ViewContainer>
);
}
@ -254,6 +301,7 @@ export default compose(
};
const error = get(form, `${IC_F}.error`, null);
const showCli = Boolean(values[IC_SHOW_CLI]);
// Maybe re-use saved to only write the rule once
const disabled = !(
@ -270,6 +318,7 @@ export default compose(
return {
disabled,
showCli,
forms: Object.keys(form), // improve this
error,
steps
@ -277,10 +326,12 @@ export default compose(
}),
connect(null, (dispatch, { steps = {}, forms, history, createInstance }) => {
return {
handleToggleShowCli: value => {
return dispatch(set({ name: IC_SHOW_CLI, value }));
},
handleDefocus: name => value => {
return dispatch(set({ name: names[name], value }));
},
handleSubmit: async () => {
const [err, res] = await intercept(
createInstance({

944
consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/cns.spec.js.snap

File diff suppressed because it is too large Load Diff

1580
consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/firewall.spec.js.snap

File diff suppressed because it is too large Load Diff

67
consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/list.spec.js.snap

@ -172,7 +172,7 @@ exports[`renders <List /> without throwing 1`] = `
.c3 {
margin: 0;
color: rgb(73,73,73);
font-weight: normal;
font-weight: 400;
line-height: 1.625rem;
font-size: 1.3125rem;
}
@ -1153,7 +1153,7 @@ exports[`renders <List error /> without throwing 1`] = `
.c3 {
margin: 0;
color: rgb(73,73,73);
font-weight: normal;
font-weight: 400;
line-height: 1.625rem;
font-size: 1.3125rem;
}
@ -2090,11 +2090,9 @@ exports[`renders <List instances /> without throwing 1`] = `
.c33 {
color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor;
}
.c33:hover {
-webkit-text-decoration: none;
text-decoration: none;
cursor: pointer;
-webkit-text-decoration: underline;
text-decoration: underline;
}
.c13 {
@ -2230,7 +2228,7 @@ exports[`renders <List instances /> without throwing 1`] = `
.c3 {
margin: 0;
color: rgb(73,73,73);
font-weight: normal;
font-weight: 400;
line-height: 1.625rem;
font-size: 1.3125rem;
}
@ -3669,11 +3667,9 @@ exports[`renders <List instances selected /> without throwing 1`] = `
.c33 {
color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor;
}
.c33:hover {
-webkit-text-decoration: none;
text-decoration: none;
cursor: pointer;
-webkit-text-decoration: underline;
text-decoration: underline;
}
.c58 {
@ -4384,7 +4380,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
.c3 {
margin: 0;
color: rgb(73,73,73);
font-weight: normal;
font-weight: 400;
line-height: 1.625rem;
font-size: 1.3125rem;
}
@ -4425,12 +4421,10 @@ exports[`renders <List instances selected /> without throwing 1`] = `
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
background-color: rgb(250,250,250);
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;
z-index: 1;
position: fixed;
left: 0;
@ -5843,10 +5837,11 @@ exports[`renders <List instances selected /> without throwing 1`] = `
</form>
<div
className="c51"
fill="#FAFAFA"
fill="disabled"
>
<div
className="c52 c53 c1"
fill="disabled"
>
<div
className="c54"
@ -6294,11 +6289,9 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
.c33 {
color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor;
}
.c33:hover {
-webkit-text-decoration: none;
text-decoration: none;
cursor: pointer;
-webkit-text-decoration: underline;
text-decoration: underline;
}
.c58 {
@ -7009,7 +7002,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
.c3 {
margin: 0;
color: rgb(73,73,73);
font-weight: normal;
font-weight: 400;
line-height: 1.625rem;
font-size: 1.3125rem;
}
@ -7050,12 +7043,10 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
background-color: rgb(250,250,250);
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;
z-index: 1;
position: fixed;
left: 0;
@ -8468,10 +8459,11 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
</form>
<div
className="c51"
fill="#FAFAFA"
fill="disabled"
>
<div
className="c52 c53 c1"
fill="disabled"
>
<div
className="c54"
@ -8919,11 +8911,9 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
.c33 {
color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor;
}
.c33:hover {
-webkit-text-decoration: none;
text-decoration: none;
cursor: pointer;
-webkit-text-decoration: underline;
text-decoration: underline;
}
.c58 {
@ -9829,7 +9819,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
.c3 {
margin: 0;
color: rgb(73,73,73);
font-weight: normal;
font-weight: 400;
line-height: 1.625rem;
font-size: 1.3125rem;
}
@ -9870,12 +9860,10 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
background-color: rgb(250,250,250);
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;
z-index: 1;
position: fixed;
left: 0;
@ -11288,10 +11276,11 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
</form>
<div
className="c51"
fill="#FAFAFA"
fill="disabled"
>
<div
className="c52 c53 c1"
fill="disabled"
>
<div
className="c54"
@ -11831,7 +11820,7 @@ exports[`renders <List loading /> without throwing 1`] = `
.c3 {
margin: 0;
color: rgb(73,73,73);
font-weight: normal;
font-weight: 400;
line-height: 1.625rem;
font-size: 1.3125rem;
}

18
consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/metadata.spec.js.snap

@ -169,7 +169,7 @@ exports[`renders <Metadata /> without throwing 1`] = `
.c19 {
margin: 0;
color: rgb(73,73,73);
font-weight: normal;
font-weight: 400;
line-height: 1.625rem;
font-size: 1.3125rem;
}
@ -977,7 +977,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
.c19 {
margin: 0;
color: rgb(73,73,73);
font-weight: normal;
font-weight: 400;
line-height: 1.625rem;
font-size: 1.3125rem;
}
@ -1309,8 +1309,8 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
.c39 {
box-sizing: border-box;
width: 18.75rem;
height: 6rem;
min-height: 6rem;
height: 12rem;
min-height: 12rem;
padding: 0.8125rem 0.75rem;
border-radius: 0.25rem;
background-color: rgb(255,255,255);
@ -1324,6 +1324,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
-moz-appearance: none;
appearance: none;
outline: 0;
white-space: pre-wrap;
font-family: "Roboto Mono",monospace;
width: 100%;
min-width: 100%;
@ -1986,7 +1987,7 @@ exports[`renders <Metadata error /> without throwing 1`] = `
.c25 {
margin: 0;
color: rgb(73,73,73);
font-weight: normal;
font-weight: 400;
line-height: 1.625rem;
font-size: 1.3125rem;
}
@ -3578,7 +3579,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
.c19 {
margin: 0;
color: rgb(73,73,73);
font-weight: normal;
font-weight: 400;
line-height: 1.625rem;
font-size: 1.3125rem;
}
@ -3904,8 +3905,8 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
.c39 {
box-sizing: border-box;
width: 18.75rem;
height: 6rem;
min-height: 6rem;
height: 12rem;
min-height: 12rem;
padding: 0.8125rem 0.75rem;
border-radius: 0.25rem;
background-color: rgb(255,255,255);
@ -3919,6 +3920,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
-moz-appearance: none;
appearance: none;
outline: 0;
white-space: pre-wrap;
font-family: "Roboto Mono",monospace;
width: 100%;
min-width: 100%;

8
consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/networks.spec.js.snap

@ -65,7 +65,7 @@ exports[`renders <Networks /> without throwing 1`] = `
.c7 {
margin: 0;
color: rgb(73,73,73);
font-weight: normal;
font-weight: 400;
line-height: 1.625rem;
font-size: 1.3125rem;
}
@ -608,7 +608,7 @@ exports[`renders <Networks error /> without throwing 1`] = `
.c7 {
margin: 0;
color: rgb(73,73,73);
font-weight: normal;
font-weight: 400;
line-height: 1.625rem;
font-size: 1.3125rem;
}
@ -888,7 +888,7 @@ exports[`renders <Networks loading /> without throwing 1`] = `
.c7 {
margin: 0;
color: rgb(73,73,73);
font-weight: normal;
font-weight: 400;
line-height: 1.625rem;
font-size: 1.3125rem;
}
@ -1121,7 +1121,7 @@ exports[`renders <Networks networks /> without throwing 1`] = `
.c7 {
margin: 0;
color: rgb(73,73,73);
font-weight: normal;
font-weight: 400;
line-height: 1.625rem;
font-size: 1.3125rem;
}

22
consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/summary.spec.js.snap

@ -985,15 +985,13 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
.c37 {
color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor;
cursor: pointer;
-webkit-text-decoration: underline;
text-decoration: underline;
color: rgb(255,255,255);
-webkit-text-fill-color: currentcolor;
}
.c37:hover {
-webkit-text-decoration: none;
text-decoration: none;
}
.c31 {
min-width: 7.5rem;
}
@ -1597,7 +1595,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
.c11 {
margin: 0;
color: rgb(73,73,73);
font-weight: normal;
font-weight: 400;
line-height: 1.875rem;
font-size: 1.5rem;
}
@ -1701,6 +1699,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
-moz-appearance: none;
appearance: none;
outline: 0;
white-space: pre-wrap;
font-family: "Roboto Mono",monospace;
width: 100%;
min-width: 100%;
@ -2973,15 +2972,13 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
.c37 {
color: rgb(59,70,204);
-webkit-text-fill-color: currentcolor;
cursor: pointer;
-webkit-text-decoration: underline;
text-decoration: underline;
color: rgb(255,255,255);
-webkit-text-fill-color: currentcolor;
}
.c37:hover {
-webkit-text-decoration: none;
text-decoration: none;
}
.c31 {
min-width: 7.5rem;
}
@ -3585,7 +3582,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
.c11 {
margin: 0;
color: rgb(73,73,73);
font-weight: normal;
font-weight: 400;
line-height: 1.875rem;
font-size: 1.5rem;
}
@ -3689,6 +3686,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
-moz-appearance: none;
appearance: none;
outline: 0;
white-space: pre-wrap;
font-family: "Roboto Mono",monospace;
width: 100%;
min-width: 100%;

14
consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/tags.spec.js.snap

@ -169,7 +169,7 @@ exports[`renders <Tags /> without throwing 1`] = `
.c19 {
margin: 0;
color: rgb(73,73,73);
font-weight: normal;
font-weight: 400;
line-height: 1.625rem;
font-size: 1.3125rem;
}
@ -998,7 +998,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
.c47 {
margin: 0;
color: rgb(73,73,73);
font-weight: normal;
font-weight: 400;
line-height: 1.625rem;
font-size: 1.3125rem;
}
@ -1995,7 +1995,7 @@ exports[`renders <Tags editable /> without throwing 1`] = `
.c19 {
margin: 0;
color: rgb(73,73,73);
font-weight: normal;
font-weight: 400;
line-height: 1.625rem;
font-size: 1.3125rem;
}
@ -2846,7 +2846,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
.c49 {
margin: 0;
color: rgb(73,73,73);
font-weight: normal;
font-weight: 400;
line-height: 1.625rem;
font-size: 1.3125rem;
}
@ -4354,7 +4354,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
.c52 {
margin: 0;
color: rgb(73,73,73);
font-weight: normal;
font-weight: 400;
line-height: 1.625rem;
font-size: 1.3125rem;
}
@ -5407,7 +5407,7 @@ exports[`renders <Tags error /> without throwing 1`] = `
.c19 {
margin: 0;
color: rgb(73,73,73);
font-weight: normal;
font-weight: 400;
line-height: 1.625rem;
font-size: 1.3125rem;
}
@ -6368,7 +6368,7 @@ exports[`renders <Tags tags /> without throwing 1`] = `
.c19 {
margin: 0;
color: rgb(73,73,73);
font-weight: normal;
font-weight: 400;
line-height: 1.625rem;
font-size: 1.3125rem;
}

1
packages/instance-steps/package.json

@ -26,6 +26,7 @@
"apr-reduce": "^3.0.3",
"constant-case": "^2.0.0",
"declarative-redux-form": "^2.0.8",
"force-array": "^3.1.0",
"joyent-ui-resource-step": "^1.0.0",
"joyent-ui-resource-widgets": "^1.0.0",
"joyent-ui-toolkit": "^6.0.0",

131
packages/instance-steps/src/footer/cli-details.js