diff --git a/packages/my-joy-beta/src/components/__tests__/__image_snapshots__/key-value-ui-js-key-value-submitting-1-snap.png b/packages/my-joy-beta/src/components/__tests__/__image_snapshots__/key-value-ui-js-key-value-submitting-1-snap.png index e00af188..4c1782bd 100644 Binary files a/packages/my-joy-beta/src/components/__tests__/__image_snapshots__/key-value-ui-js-key-value-submitting-1-snap.png and b/packages/my-joy-beta/src/components/__tests__/__image_snapshots__/key-value-ui-js-key-value-submitting-1-snap.png differ diff --git a/packages/my-joy-beta/src/components/create-instance/__tests__/__image_snapshots__/images-ui-js-images-images-name-stuff-image-name-stuff-1-snap.png b/packages/my-joy-beta/src/components/create-instance/__tests__/__image_snapshots__/images-ui-js-images-images-name-stuff-image-name-stuff-1-snap.png index 79f3bb7d..fd9bfa37 100644 Binary files a/packages/my-joy-beta/src/components/create-instance/__tests__/__image_snapshots__/images-ui-js-images-images-name-stuff-image-name-stuff-1-snap.png and b/packages/my-joy-beta/src/components/create-instance/__tests__/__image_snapshots__/images-ui-js-images-images-name-stuff-image-name-stuff-1-snap.png differ diff --git a/packages/my-joy-beta/src/components/create-instance/__tests__/__image_snapshots__/package-ui-js-packages-expanded-1-snap.png b/packages/my-joy-beta/src/components/create-instance/__tests__/__image_snapshots__/package-ui-js-packages-expanded-1-snap.png index 6ce1c7c7..8aaa17eb 100644 Binary files a/packages/my-joy-beta/src/components/create-instance/__tests__/__image_snapshots__/package-ui-js-packages-expanded-1-snap.png and b/packages/my-joy-beta/src/components/create-instance/__tests__/__image_snapshots__/package-ui-js-packages-expanded-1-snap.png differ diff --git a/packages/my-joy-beta/src/components/create-instance/__tests__/__image_snapshots__/package-ui-js-packages-is-vm-selected-1-snap.png b/packages/my-joy-beta/src/components/create-instance/__tests__/__image_snapshots__/package-ui-js-packages-is-vm-selected-1-snap.png index 6ce1c7c7..8aaa17eb 100644 Binary files a/packages/my-joy-beta/src/components/create-instance/__tests__/__image_snapshots__/package-ui-js-packages-is-vm-selected-1-snap.png and b/packages/my-joy-beta/src/components/create-instance/__tests__/__image_snapshots__/package-ui-js-packages-is-vm-selected-1-snap.png differ diff --git a/packages/my-joy-beta/src/components/create-instance/__tests__/__image_snapshots__/package-ui-js-packages-loading-1-snap.png b/packages/my-joy-beta/src/components/create-instance/__tests__/__image_snapshots__/package-ui-js-packages-loading-1-snap.png index 6ce1c7c7..8aaa17eb 100644 Binary files a/packages/my-joy-beta/src/components/create-instance/__tests__/__image_snapshots__/package-ui-js-packages-loading-1-snap.png and b/packages/my-joy-beta/src/components/create-instance/__tests__/__image_snapshots__/package-ui-js-packages-loading-1-snap.png differ diff --git a/packages/my-joy-beta/src/components/create-instance/__tests__/__image_snapshots__/package-ui-js-packages-pristine-false-1-snap.png b/packages/my-joy-beta/src/components/create-instance/__tests__/__image_snapshots__/package-ui-js-packages-pristine-false-1-snap.png index 6ce1c7c7..8aaa17eb 100644 Binary files a/packages/my-joy-beta/src/components/create-instance/__tests__/__image_snapshots__/package-ui-js-packages-pristine-false-1-snap.png and b/packages/my-joy-beta/src/components/create-instance/__tests__/__image_snapshots__/package-ui-js-packages-pristine-false-1-snap.png differ diff --git a/packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/package.spec.js.snap b/packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/package.spec.js.snap index 5bf95037..eef3ff86 100644 --- a/packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/package.spec.js.snap +++ b/packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/package.spec.js.snap @@ -1436,10 +1436,12 @@ exports[`renders without throwing 1`] = ` .c12 { color: rgb(151,151,151); + text-align: center; } .c7 { - width: 100%; + width: calc(100% - 2px); + border-top: none; }
@@ -1761,10 +1763,12 @@ exports[`renders without throwing 1`] = ` .c12 { color: rgb(151,151,151); + text-align: center; } .c7 { - width: 100%; + width: calc(100% - 2px); + border-top: none; } @@ -2086,10 +2090,12 @@ exports[`renders without throwing 1`] = ` .c12 { color: rgb(151,151,151); + text-align: center; } .c7 { - width: 100%; + width: calc(100% - 2px); + border-top: none; } @@ -2619,10 +2625,12 @@ exports[`renders without throwing 1`] = ` .c12 { color: rgb(151,151,151); + text-align: center; } .c7 { - width: 100%; + width: calc(100% - 2px); + border-top: none; } diff --git a/packages/my-joy-beta/src/components/empty.js b/packages/my-joy-beta/src/components/empty.js index 10eec9a8..d63efd77 100644 --- a/packages/my-joy-beta/src/components/empty.js +++ b/packages/my-joy-beta/src/components/empty.js @@ -8,10 +8,12 @@ import NoPackagesImage from '@assets/no-packages.svg'; const NoPackagesTitle = styled(H3)` color: ${props => props.theme.greyDark}; + text-align: center; `; const FullWidthCard = styled(Card)` - width: 100%; + width: calc(100% - 2px); + border-top: none; `; export default ({ children }) => ( diff --git a/packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/list-ui-js-item-mutating-1-snap.png b/packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/list-ui-js-item-mutating-1-snap.png index 014ba685..87bf4404 100644 Binary files a/packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/list-ui-js-item-mutating-1-snap.png and b/packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/list-ui-js-item-mutating-1-snap.png differ diff --git a/packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/snapshots-ui-js-actions-1-snap.png b/packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/snapshots-ui-js-actions-1-snap.png index 185ad268..663218cf 100644 Binary files a/packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/snapshots-ui-js-actions-1-snap.png and b/packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/snapshots-ui-js-actions-1-snap.png differ diff --git a/packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/snapshots-ui-js-item-mutating-1-snap.png b/packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/snapshots-ui-js-item-mutating-1-snap.png index ef8811fa..2a489c54 100644 Binary files a/packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/snapshots-ui-js-item-mutating-1-snap.png and b/packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/snapshots-ui-js-item-mutating-1-snap.png differ diff --git a/packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/snapshots-ui-js-snapshot-list-1-snap.png b/packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/snapshots-ui-js-snapshot-list-1-snap.png index 185ad268..663218cf 100644 Binary files a/packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/snapshots-ui-js-snapshot-list-1-snap.png and b/packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/snapshots-ui-js-snapshot-list-1-snap.png differ diff --git a/packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/snapshots-ui-js-snapshot-list-all-selected-1-snap.png b/packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/snapshots-ui-js-snapshot-list-all-selected-1-snap.png index dd7a003e..50d7fad2 100644 Binary files a/packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/snapshots-ui-js-snapshot-list-all-selected-1-snap.png and b/packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/snapshots-ui-js-snapshot-list-all-selected-1-snap.png differ diff --git a/packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/snapshots-ui-js-snapshot-list-sort-by-1-snap.png b/packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/snapshots-ui-js-snapshot-list-sort-by-1-snap.png index 0e6d01db..4f56c72a 100644 Binary files a/packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/snapshots-ui-js-snapshot-list-sort-by-1-snap.png and b/packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/snapshots-ui-js-snapshot-list-sort-by-1-snap.png differ diff --git a/packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/snapshots-ui-js-snapshot-list-sort-by-sort-order-1-snap.png b/packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/snapshots-ui-js-snapshot-list-sort-by-sort-order-1-snap.png index 7784b36b..dbd59ea9 100644 Binary files a/packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/snapshots-ui-js-snapshot-list-sort-by-sort-order-1-snap.png and b/packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/snapshots-ui-js-snapshot-list-sort-by-sort-order-1-snap.png differ diff --git a/packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/snapshots-ui-js-snapshot-list-submitting-1-snap.png b/packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/snapshots-ui-js-snapshot-list-submitting-1-snap.png index 5b597ccc..3e844843 100644 Binary files a/packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/snapshots-ui-js-snapshot-list-submitting-1-snap.png and b/packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/snapshots-ui-js-snapshot-list-submitting-1-snap.png differ diff --git a/packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/summary-ui-js-summary-starting-stopping-rebooting-removing-1-snap.png b/packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/summary-ui-js-summary-starting-stopping-rebooting-removing-1-snap.png index e43dad1d..5c94b7bf 100644 Binary files a/packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/summary-ui-js-summary-starting-stopping-rebooting-removing-1-snap.png and b/packages/my-joy-beta/src/components/instances/__tests__/__image_snapshots__/summary-ui-js-summary-starting-stopping-rebooting-removing-1-snap.png differ diff --git a/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/snapshots.spec.js.snap b/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/snapshots.spec.js.snap index 20190477..09f4e89a 100644 --- a/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/snapshots.spec.js.snap +++ b/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/snapshots.spec.js.snap @@ -572,10 +572,12 @@ Array [ .c5 { color: rgb(151,151,151); + text-align: center; } .c0 { - width: 100%; + width: calc(100% - 2px); + border-top: none; }
without throwing 1`] = ` .c26 { color: rgb(151,151,151); + text-align: center; } .c21 { - width: 100%; + width: calc(100% - 2px); + border-top: none; } @media only screen and (min-width:48em) { @@ -3523,10 +3533,12 @@ exports[`renders without throwing 1`] = ` .c26 { color: rgb(151,151,151); + text-align: center; } .c21 { - width: 100%; + width: calc(100% - 2px); + border-top: none; } @media only screen and (min-width:48em) { 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 6f6dc80a..e2fc0b2e 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 @@ -5,6 +5,14 @@ exports[`renders without throwing 1`] = ` margin-top: 0.1875rem; } +.c36 { + margin-bottom: 0.75rem; +} + +.c34 { + padding: 2.25rem; +} + .c12 { font-family: sans-serif; font-size: 100%; @@ -247,6 +255,27 @@ exports[`renders without throwing 1`] = ` margin-left: -0.625rem; } +.c38 { + color: rgba(73,73,73,1); + font-weight: normal; + line-height: 1.625rem; + font-size: 1.3125rem; + margin: 0; +} + +.c38 + p, +.c38 + small, +.c38 + h1, +.c38 + h2, +.c38 + label, +.c38 + h3, +.c38 + h4, +.c38 + h5, +.c38 + div, +.c38 + span { + margin-top: 1.5rem; +} + .c1 { background-color: rgb(216,216,216); margin: 0; @@ -268,6 +297,28 @@ exports[`renders without throwing 1`] = ` height: 1.25rem; } +.c33 { + 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); +} + .c23 { color: rgb(100,100,100); position: absolute; @@ -664,6 +715,47 @@ exports[`renders without throwing 1`] = ` justify-content: space-between; } +.c35 { + 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; +} + +.c37 { + color: rgb(151,151,151); + text-align: center; +} + +.c32 { + width: calc(100% - 2px); + border-top: none; +} + @media only screen and (min-width:48em) { .c0 { width: 46rem; @@ -902,6 +994,35 @@ exports[`renders without throwing 1`] = ` /> +
+
+
+
+ Sad Animal +
+

+ You haven't created any instances yet, but they're really easy to set up. +
+ Click above to get going. +

+
+
+
`; @@ -910,10 +1031,18 @@ exports[`renders without throwing 1`] = ` margin-top: 0.1875rem; } +.c42 { + margin-bottom: 0.75rem; +} + .c14 { margin-bottom: 1.5rem; } +.c40 { + padding: 2.25rem; +} + .c12 { font-family: sans-serif; font-size: 100%; @@ -1178,6 +1307,27 @@ exports[`renders without throwing 1`] = ` margin-left: -0.625rem; } +.c44 { + color: rgba(73,73,73,1); + font-weight: normal; + line-height: 1.625rem; + font-size: 1.3125rem; + margin: 0; +} + +.c44 + p, +.c44 + small, +.c44 + h1, +.c44 + h2, +.c44 + label, +.c44 + h3, +.c44 + h4, +.c44 + h5, +.c44 + div, +.c44 + span { + margin-top: 1.5rem; +} + .c18 { color: rgba(73,73,73,1); font-weight: 600; @@ -1207,6 +1357,28 @@ exports[`renders without throwing 1`] = ` height: 1.25rem; } +.c39 { + 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); +} + .c29 { color: rgb(100,100,100); position: absolute; @@ -1629,6 +1801,47 @@ exports[`renders without throwing 1`] = ` justify-content: space-between; } +.c41 { + 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; +} + +.c43 { + color: rgb(151,151,151); + text-align: center; +} + +.c38 { + width: calc(100% - 2px); + border-top: none; +} + @media only screen and (min-width:48em) { .c0 { width: 46rem; @@ -1892,6 +2105,35 @@ exports[`renders without throwing 1`] = ` /> +
+
+
+
+ Sad Animal +
+

+ You haven't created any instances yet, but they're really easy to set up. +
+ Click above to get going. +

+
+
+
`; diff --git a/packages/my-joy-beta/src/containers/instances/list.js b/packages/my-joy-beta/src/containers/instances/list.js index d803a99a..164af4b4 100644 --- a/packages/my-joy-beta/src/containers/instances/list.js +++ b/packages/my-joy-beta/src/containers/instances/list.js @@ -36,6 +36,7 @@ import { Item as InstanceListItem } from '@components/instances/list'; +import Empty from '@components/empty'; import InstanceListActions from '@components/instances/footer'; const TABLE_FORM_NAME = 'instance-list-table'; @@ -102,8 +103,7 @@ export const List = ({ sortBy={sortBy} sortOrder={sortOrder} toggleSelectAll={toggleSelectAll} - onSortBy={handleSortBy} - > + onSortBy={handleSortBy}> {_instances.map(({ id, ...rest }) => ( ) : null; + const _empty = + !loading && !_instances.length ? ( + + You haven't created any instances yet, but they're really easy to set + up.
+ Click above to get going. + + ) : null; + const _footer = !loading && selected.length ? ( );