diff --git a/packages/my-joy-instances/src/components/empty.js b/packages/my-joy-instances/src/components/empty.js index c91ef68a..ed02dcc8 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/components/instances/__tests__/__image_snapshots__/snapshots-ui-js-item-mutating-1-snap.png b/packages/my-joy-instances/src/components/instances/__tests__/__image_snapshots__/snapshots-ui-js-item-mutating-1-snap.png index a46fae04..0d6ab6c4 100644 Binary files a/packages/my-joy-instances/src/components/instances/__tests__/__image_snapshots__/snapshots-ui-js-item-mutating-1-snap.png and b/packages/my-joy-instances/src/components/instances/__tests__/__image_snapshots__/snapshots-ui-js-item-mutating-1-snap.png differ diff --git a/packages/my-joy-instances/src/containers/instances/__tests__/__image_snapshots__/firewall-ui-js-firewall-1-snap.png b/packages/my-joy-instances/src/containers/instances/__tests__/__image_snapshots__/firewall-ui-js-firewall-1-snap.png index c100cdd4..e7af8acf 100644 Binary files a/packages/my-joy-instances/src/containers/instances/__tests__/__image_snapshots__/firewall-ui-js-firewall-1-snap.png and b/packages/my-joy-instances/src/containers/instances/__tests__/__image_snapshots__/firewall-ui-js-firewall-1-snap.png differ diff --git a/packages/my-joy-instances/src/containers/instances/__tests__/__image_snapshots__/firewall-ui-js-firewall-inactive-1-snap.png b/packages/my-joy-instances/src/containers/instances/__tests__/__image_snapshots__/firewall-ui-js-firewall-inactive-1-snap.png index cc165ff3..5f69483e 100644 Binary files a/packages/my-joy-instances/src/containers/instances/__tests__/__image_snapshots__/firewall-ui-js-firewall-inactive-1-snap.png and b/packages/my-joy-instances/src/containers/instances/__tests__/__image_snapshots__/firewall-ui-js-firewall-inactive-1-snap.png differ diff --git a/packages/my-joy-instances/src/containers/instances/__tests__/__image_snapshots__/firewall-ui-js-firewall-loading-1-snap.png b/packages/my-joy-instances/src/containers/instances/__tests__/__image_snapshots__/firewall-ui-js-firewall-loading-1-snap.png index b8185b68..fd243595 100644 Binary files a/packages/my-joy-instances/src/containers/instances/__tests__/__image_snapshots__/firewall-ui-js-firewall-loading-1-snap.png and b/packages/my-joy-instances/src/containers/instances/__tests__/__image_snapshots__/firewall-ui-js-firewall-loading-1-snap.png differ diff --git a/packages/my-joy-instances/src/containers/instances/__tests__/__image_snapshots__/firewall-ui-js-firewall-tag-rules-1-snap.png b/packages/my-joy-instances/src/containers/instances/__tests__/__image_snapshots__/firewall-ui-js-firewall-tag-rules-1-snap.png index f82b0522..5f3553aa 100644 Binary files a/packages/my-joy-instances/src/containers/instances/__tests__/__image_snapshots__/firewall-ui-js-firewall-tag-rules-1-snap.png and b/packages/my-joy-instances/src/containers/instances/__tests__/__image_snapshots__/firewall-ui-js-firewall-tag-rules-1-snap.png differ diff --git a/packages/my-joy-instances/src/containers/instances/__tests__/__image_snapshots__/firewall-ui-js-firewall-tag-rules-2-snap.png b/packages/my-joy-instances/src/containers/instances/__tests__/__image_snapshots__/firewall-ui-js-firewall-tag-rules-2-snap.png index cea40912..555f3fbd 100644 Binary files a/packages/my-joy-instances/src/containers/instances/__tests__/__image_snapshots__/firewall-ui-js-firewall-tag-rules-2-snap.png and b/packages/my-joy-instances/src/containers/instances/__tests__/__image_snapshots__/firewall-ui-js-firewall-tag-rules-2-snap.png differ diff --git a/packages/my-joy-instances/src/containers/instances/__tests__/__image_snapshots__/list-ui-js-list-instances-selected-1-snap.png b/packages/my-joy-instances/src/containers/instances/__tests__/__image_snapshots__/list-ui-js-list-instances-selected-1-snap.png index 10e36bcd..92c2a48c 100644 Binary files a/packages/my-joy-instances/src/containers/instances/__tests__/__image_snapshots__/list-ui-js-list-instances-selected-1-snap.png and b/packages/my-joy-instances/src/containers/instances/__tests__/__image_snapshots__/list-ui-js-list-instances-selected-1-snap.png differ diff --git a/packages/my-joy-instances/src/containers/instances/__tests__/__image_snapshots__/list-ui-js-list-instances-selected-all-1-snap.png b/packages/my-joy-instances/src/containers/instances/__tests__/__image_snapshots__/list-ui-js-list-instances-selected-all-1-snap.png index 9172122b..7301b535 100644 Binary files a/packages/my-joy-instances/src/containers/instances/__tests__/__image_snapshots__/list-ui-js-list-instances-selected-all-1-snap.png and b/packages/my-joy-instances/src/containers/instances/__tests__/__image_snapshots__/list-ui-js-list-instances-selected-all-1-snap.png differ diff --git a/packages/my-joy-instances/src/containers/instances/__tests__/__image_snapshots__/list-ui-js-list-instances-selected-all-allowed-actions-1-snap.png b/packages/my-joy-instances/src/containers/instances/__tests__/__image_snapshots__/list-ui-js-list-instances-selected-all-allowed-actions-1-snap.png index 374fdd5e..b3bce42e 100644 Binary files a/packages/my-joy-instances/src/containers/instances/__tests__/__image_snapshots__/list-ui-js-list-instances-selected-all-allowed-actions-1-snap.png and b/packages/my-joy-instances/src/containers/instances/__tests__/__image_snapshots__/list-ui-js-list-instances-selected-all-allowed-actions-1-snap.png differ diff --git a/packages/my-joy-instances/src/containers/instances/__tests__/__image_snapshots__/list-ui-js-list-loading-1-snap.png b/packages/my-joy-instances/src/containers/instances/__tests__/__image_snapshots__/list-ui-js-list-loading-1-snap.png index 0ca282f0..cc673693 100644 Binary files a/packages/my-joy-instances/src/containers/instances/__tests__/__image_snapshots__/list-ui-js-list-loading-1-snap.png and b/packages/my-joy-instances/src/containers/instances/__tests__/__image_snapshots__/list-ui-js-list-loading-1-snap.png differ diff --git a/packages/my-joy-instances/src/containers/instances/__tests__/__image_snapshots__/networks-ui-js-networks-1-snap.png b/packages/my-joy-instances/src/containers/instances/__tests__/__image_snapshots__/networks-ui-js-networks-1-snap.png index d3c64190..8f6216ee 100644 Binary files a/packages/my-joy-instances/src/containers/instances/__tests__/__image_snapshots__/networks-ui-js-networks-1-snap.png and b/packages/my-joy-instances/src/containers/instances/__tests__/__image_snapshots__/networks-ui-js-networks-1-snap.png differ diff --git a/packages/my-joy-instances/src/containers/instances/__tests__/__image_snapshots__/networks-ui-js-networks-error-1-snap.png b/packages/my-joy-instances/src/containers/instances/__tests__/__image_snapshots__/networks-ui-js-networks-error-1-snap.png index cd86e2d1..2debeb03 100644 Binary files a/packages/my-joy-instances/src/containers/instances/__tests__/__image_snapshots__/networks-ui-js-networks-error-1-snap.png and b/packages/my-joy-instances/src/containers/instances/__tests__/__image_snapshots__/networks-ui-js-networks-error-1-snap.png differ diff --git a/packages/my-joy-instances/src/containers/instances/__tests__/__image_snapshots__/networks-ui-js-networks-loading-1-snap.png b/packages/my-joy-instances/src/containers/instances/__tests__/__image_snapshots__/networks-ui-js-networks-loading-1-snap.png index 023e6b2f..b6ff9231 100644 Binary files a/packages/my-joy-instances/src/containers/instances/__tests__/__image_snapshots__/networks-ui-js-networks-loading-1-snap.png and b/packages/my-joy-instances/src/containers/instances/__tests__/__image_snapshots__/networks-ui-js-networks-loading-1-snap.png differ 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..d78c8e9e 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 = [], @@ -69,6 +70,11 @@ export const Networks = ({ readOnly /> ))} + { + !loading && !networks.length ? ( + You have no networks attached to this instance + ) : null + } );