diff --git a/packages/my-joy-instances/src/components/empty.js b/packages/my-joy-instances/src/components/empty.js index c91ef68a..2829afb2 100644 --- a/packages/my-joy-instances/src/components/empty.js +++ b/packages/my-joy-instances/src/components/empty.js @@ -2,7 +2,7 @@ import React from 'react'; import styled from 'styled-components'; import { Margin, Padding } from 'styled-components-spacing'; import Flex from 'styled-flex-component'; -import { isNot } from 'styled-is'; +import is, { isNot } from 'styled-is'; import remcalc from 'remcalc'; import { H3, Card } from 'joyent-ui-toolkit'; @@ -16,6 +16,10 @@ const NoPackagesTitle = styled(H3)` const FullWidthCard = styled(Card)` width: calc(100% - ${remcalc(2)}); + ${is('transparent')` + background: transparent; + `}; + ${isNot('borderTop')` border-top: none; `}; diff --git a/packages/my-joy-instances/src/containers/create-instance/index.js b/packages/my-joy-instances/src/containers/create-instance/index.js index 0fb89c5c..908920ba 100644 --- a/packages/my-joy-instances/src/containers/create-instance/index.js +++ b/packages/my-joy-instances/src/containers/create-instance/index.js @@ -40,7 +40,15 @@ import createClient from '@state/apollo-client'; import parseError from '@state/parse-error'; import { Forms, Values } from '@root/constants'; -const { IC_F, IC_NAME_F, IC_IMG_F, IC_PKG_F_SELECT, IC_NW_F, IC_US_F, IC_FW_F_ENABLED } = Forms; +const { + IC_F, + IC_NAME_F, + IC_IMG_F, + IC_PKG_F_SELECT, + IC_NW_F, + IC_US_F, + IC_FW_F_ENABLED +} = Forms; const { IC_MD_V_MD, diff --git a/packages/my-joy-instances/src/containers/instances/__tests__/__snapshots__/networks.spec.js.snap b/packages/my-joy-instances/src/containers/instances/__tests__/__snapshots__/networks.spec.js.snap index d5153aed..16320023 100644 --- a/packages/my-joy-instances/src/containers/instances/__tests__/__snapshots__/networks.spec.js.snap +++ b/packages/my-joy-instances/src/containers/instances/__tests__/__snapshots__/networks.spec.js.snap @@ -9,6 +9,14 @@ exports[`renders without throwing 1`] = ` margin-bottom: 1.125rem; } +.c11 { + margin-bottom: 0.75rem; +} + +.c9 { + padding: 2.25rem; +} + .c5 { color: rgba(73,73,73,1); line-height: 1.5rem; @@ -75,6 +83,69 @@ exports[`renders without throwing 1`] = ` margin-top: 1.5rem; } +.c10 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + -webkit-align-content: stretch; + -ms-flex-line-pack: stretch; + align-content: stretch; + -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; +} + +.c8 { + box-sizing: content-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + position: relative; + border-width: 0.0625rem; + border-style: solid; + -webkit-transition: all 300ms ease; + transition: all 300ms ease; + color: rgba(73,73,73,1); + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); +} + +.c12 { + color: rgb(151,151,151); + text-align: center; +} + +.c7 { + width: calc(100% - 0.125rem); + background: transparent; +} + @media only screen and (min-width:48em) { .c0 { width: 46rem; @@ -154,6 +225,252 @@ exports[`renders without throwing 1`] = ` > Networks attached to this instance +
+
+
+
+ + + Guilty_Salamander + + + Created using Figma + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

+ You have no networks attached to this instance +

+
+
+
`; @@ -166,10 +483,18 @@ exports[`renders without throwing 1`] = ` margin-bottom: 1.125rem; } +.c17 { + margin-bottom: 0.75rem; +} + .c7 { margin-bottom: 1.5rem; } +.c15 { + padding: 2.25rem; +} + .c5 { color: rgba(73,73,73,1); line-height: 1.5rem; @@ -253,6 +578,37 @@ exports[`renders without throwing 1`] = ` margin: 0; } +.c16 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + -webkit-align-content: stretch; + -ms-flex-line-pack: stretch; + align-content: stretch; + -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; +} + .c8 { display: -webkit-box; display: -webkit-flex; @@ -279,6 +635,38 @@ exports[`renders without throwing 1`] = ` padding: 1.125rem 1.125rem; } +.c14 { + box-sizing: content-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + position: relative; + border-width: 0.0625rem; + border-style: solid; + -webkit-transition: all 300ms ease; + transition: all 300ms ease; + color: rgba(73,73,73,1); + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); +} + +.c18 { + color: rgb(151,151,151); + text-align: center; +} + +.c13 { + width: calc(100% - 0.125rem); + background: transparent; +} + @media only screen and (min-width:48em) { .c0 { width: 46rem; @@ -383,6 +771,252 @@ exports[`renders without throwing 1`] = ` +
+
+
+
+ + + Guilty_Salamander + + + Created using Figma + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

+ You have no networks attached to this instance +

+
+
+
`; diff --git a/packages/my-joy-instances/src/containers/instances/networks.js b/packages/my-joy-instances/src/containers/instances/networks.js index e40345eb..20ac0ee7 100644 --- a/packages/my-joy-instances/src/containers/instances/networks.js +++ b/packages/my-joy-instances/src/containers/instances/networks.js @@ -21,6 +21,7 @@ import { import Network from '@components/network'; import Description from '@components/description'; import GetNetworks from '@graphql/list-instance-networks.gql'; +import Empty from '@components/empty'; export const Networks = ({ networks = [], @@ -45,7 +46,7 @@ export const Networks = ({

Networks attached to this instance

{loading ? : null} - {!loading && error ? ( + {!loading && error && !networks.length ? ( Ooops! @@ -69,6 +70,11 @@ export const Networks = ({ readOnly /> ))} + {!loading && !error && !networks.length ? ( + + You have no networks attached to this instance + + ) : null} );