From 35c50de56b9fec8e16b7d0c50a4f4dceea3a5db7 Mon Sep 17 00:00:00 2001 From: Sara Vieira Date: Tue, 16 Jan 2018 15:34:54 +0000 Subject: [PATCH] fix(my-joy-beta): create instance - packages ui fixes fixes #1007 --- packages/my-joy-beta/package.json | 2 +- packages/my-joy-beta/src/assets/debian.svg | 2 +- packages/my-joy-beta/src/assets/ghost.svg | 2 +- packages/my-joy-beta/src/assets/java.svg | 2 +- packages/my-joy-beta/src/assets/multiarch.svg | 2 +- .../my-joy-beta/src/assets/no-packages.svg | 1 + packages/my-joy-beta/src/assets/node.svg | 2 +- .../my-joy-beta/src/assets/postgresql.svg | 2 +- packages/my-joy-beta/src/assets/redis.svg | 2 +- packages/my-joy-beta/src/assets/smart.svg | 2 +- .../__snapshots__/package.spec.js.snap | 798 +++++++++++++++--- .../src/components/create-instance/package.js | 87 +- .../src/containers/create-instance/package.js | 86 +- packages/ui-toolkit/src/base/global.js | 1 + .../__tests__/__snapshots__/form.spec.js.snap | 5 + packages/ui-toolkit/src/form/base/toggle.js | 2 +- packages/ui-toolkit/src/table/index.js | 1 + yarn.lock | 6 +- 18 files changed, 830 insertions(+), 175 deletions(-) create mode 100644 packages/my-joy-beta/src/assets/no-packages.svg diff --git a/packages/my-joy-beta/package.json b/packages/my-joy-beta/package.json index cce11296..495b7734 100644 --- a/packages/my-joy-beta/package.json +++ b/packages/my-joy-beta/package.json @@ -22,6 +22,7 @@ "@manaflair/redux-batch": "^0.1.0", "apollo": "^0.2.2", "apr-intercept": "^1.0.4", + "bytes": "^3.0.0", "clipboard-copy": "^1.2.0", "constant-case": "^2.0.0", "date-fns": "^1.29.0", @@ -37,7 +38,6 @@ "lunr": "^2.1.5", "normalized-styled-components": "^1.0.17", "param-case": "^2.1.1", - "prettysize": "^1.1.0", "prop-types": "^15.6.0", "react": "^16.2.0", "react-apollo": "^1.4.16", diff --git a/packages/my-joy-beta/src/assets/debian.svg b/packages/my-joy-beta/src/assets/debian.svg index 765fea07..e0e44bb4 100644 --- a/packages/my-joy-beta/src/assets/debian.svg +++ b/packages/my-joy-beta/src/assets/debian.svg @@ -1 +1 @@ -Artboard 1 copy \ No newline at end of file +Artboard 1 copy \ No newline at end of file diff --git a/packages/my-joy-beta/src/assets/ghost.svg b/packages/my-joy-beta/src/assets/ghost.svg index 1877dfb0..5042e1ab 100644 --- a/packages/my-joy-beta/src/assets/ghost.svg +++ b/packages/my-joy-beta/src/assets/ghost.svg @@ -1 +1 @@ -Artboard 1 copy 16 \ No newline at end of file +Artboard 1 copy 16 \ No newline at end of file diff --git a/packages/my-joy-beta/src/assets/java.svg b/packages/my-joy-beta/src/assets/java.svg index 0df674be..fa4beb77 100644 --- a/packages/my-joy-beta/src/assets/java.svg +++ b/packages/my-joy-beta/src/assets/java.svg @@ -1 +1 @@ -Artboard 1 copy 17 \ No newline at end of file +Artboard 1 copy 17 \ No newline at end of file diff --git a/packages/my-joy-beta/src/assets/multiarch.svg b/packages/my-joy-beta/src/assets/multiarch.svg index 2c69011d..d4cea682 100644 --- a/packages/my-joy-beta/src/assets/multiarch.svg +++ b/packages/my-joy-beta/src/assets/multiarch.svg @@ -1 +1 @@ -Artboard 1 copy 43 \ No newline at end of file +Artboard 1 copy 43 \ No newline at end of file diff --git a/packages/my-joy-beta/src/assets/no-packages.svg b/packages/my-joy-beta/src/assets/no-packages.svg new file mode 100644 index 00000000..9edef361 --- /dev/null +++ b/packages/my-joy-beta/src/assets/no-packages.svg @@ -0,0 +1 @@ +Guilty_SalamanderCreated using Figma \ No newline at end of file diff --git a/packages/my-joy-beta/src/assets/node.svg b/packages/my-joy-beta/src/assets/node.svg index cc086e14..d0202a11 100644 --- a/packages/my-joy-beta/src/assets/node.svg +++ b/packages/my-joy-beta/src/assets/node.svg @@ -1 +1 @@ -Artboard 1 copy 10 \ No newline at end of file +Artboard 1 copy 10 \ No newline at end of file diff --git a/packages/my-joy-beta/src/assets/postgresql.svg b/packages/my-joy-beta/src/assets/postgresql.svg index 21eeef84..1c0db9e8 100644 --- a/packages/my-joy-beta/src/assets/postgresql.svg +++ b/packages/my-joy-beta/src/assets/postgresql.svg @@ -1 +1 @@ -Artboard 1 copy 12 \ No newline at end of file +Artboard 1 copy 12 \ No newline at end of file diff --git a/packages/my-joy-beta/src/assets/redis.svg b/packages/my-joy-beta/src/assets/redis.svg index 40132c4a..988f1723 100644 --- a/packages/my-joy-beta/src/assets/redis.svg +++ b/packages/my-joy-beta/src/assets/redis.svg @@ -1 +1 @@ -Artboard 1 copy 20 \ No newline at end of file +Artboard 1 copy 20 \ No newline at end of file diff --git a/packages/my-joy-beta/src/assets/smart.svg b/packages/my-joy-beta/src/assets/smart.svg index 2c69011d..d4cea682 100644 --- a/packages/my-joy-beta/src/assets/smart.svg +++ b/packages/my-joy-beta/src/assets/smart.svg @@ -1 +1 @@ -Artboard 1 copy 43 \ No newline at end of file +Artboard 1 copy 43 \ No newline at end of file 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 1f2ee2fd..c175ee46 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 @@ -16,6 +16,11 @@ exports[`renders without throwing 1`] = ` margin-left: 0.25rem; } +.c13 { + margin-top: 0.5rem; + margin-bottom: 0.25rem; +} + .c10 { display: -webkit-box; display: -webkit-flex; @@ -68,6 +73,129 @@ exports[`renders without throwing 1`] = ` align-items: center; } +.c16 { + font-family: sans-serif; + font-size: 100%; + line-height: 1.15; + margin: 0; + overflow: visible; + text-transform: none; + -webkit-appearance: button; + -moz-appearance: button; + appearance: button; + min-width: 7.5rem; +} + +.c16::-moz-focus-inner, +.c16[type='button']::-moz-focus-inner, +.c16[type='reset']::-moz-focus-inner, +.c16[type='submit']::-moz-focus-inner { + border-style: none; + padding: 0; +} + +.c16:-moz-focusring, +.c16[type='button']:-moz-focusring, +.c16[type='reset']:-moz-focusring, +.c16[type='submit']:-moz-focusring { + outline: 0.0625rem dotted ButtonText; +} + +.c16 + button { + margin-left: 0.375rem; +} + +.c15 { + display: inline-block; +} + +.c14 { + 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); +} + +.c14:focus { + outline: 0; + text-decoration: none; + background-color: rgb(59,70,204); + border-color: rgb(45,56,132); +} + +.c14:hover { + background-color: rgb(72,83,217); + border: solid 0.0625rem rgb(45,56,132); +} + +.c14:active, +.c14:active:hover, +.c14:active:focus { + background-image: none; + outline: 0; + background-color: rgb(45,56,132); + border-color: rgb(45,56,132); +} + +.c14[disabled] { + cursor: not-allowed; + pointer-events: none; +} + +.c14:focus { + background-color: rgb(255,255,255); + border-color: rgb(216,216,216); +} + +.c14:hover { + background-color: rgb(247,247,247); + border-color: rgb(216,216,216); +} + +.c14:active, +.c14:active:hover, +.c14:active:focus { + background-color: rgb(230,230,230); + border-color: rgb(216,216,216); +} + .c9 { font-size: 0.9375rem; font-style: normal; @@ -281,7 +409,10 @@ exports[`renders without throwing 1`] = ` />
@@ -346,7 +477,10 @@ exports[`renders without throwing 1`] = ` />
@@ -411,7 +545,10 @@ exports[`renders without throwing 1`] = ` />
@@ -541,7 +681,10 @@ exports[`renders without throwing 1`] = ` />
+
+ +
`; @@ -642,13 +796,13 @@ Array [ className="c3" /> - 1 Bytes + 1
- 1 Bytes + 1 disk
- 1 Bytes + 1
- 1 Bytes + 1 disk
without throwing 1`] = ` .c7 { margin-left: 0.75rem; - margin-bottom: 0.75rem; } .c2 { @@ -1223,6 +1376,7 @@ exports[`renders without throwing 1`] = ` box-sizing: border-box; padding: 0 1.5rem; height: 3.75rem; + text-align: right; border-bottom-width: 0; } @@ -1294,6 +1448,8 @@ exports[`renders without throwing 1`] = `
without throwing 1`] = ` name="td" selected={false} > - 1 Bytes + 1 without throwing 1`] = ` name="td" selected={false} > - 1 Bytes + 1 without throwing 1`] = ` `; exports[`renders without throwing 1`] = ` -.c7 { +.c10 { + margin-bottom: 0.5rem; +} + +.c13 { margin-top: 2rem; } -.c10 { +.c8 { + padding: 8rem; +} + +.c9 { + 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; +} + +.c16 { font-family: sans-serif; font-size: 100%; line-height: 1.15; @@ -1357,30 +1552,30 @@ exports[`renders without throwing 1`] = ` min-width: 7.5rem; } -.c10::-moz-focus-inner, -.c10[type='button']::-moz-focus-inner, -.c10[type='reset']::-moz-focus-inner, -.c10[type='submit']::-moz-focus-inner { +.c16::-moz-focus-inner, +.c16[type='button']::-moz-focus-inner, +.c16[type='reset']::-moz-focus-inner, +.c16[type='submit']::-moz-focus-inner { border-style: none; padding: 0; } -.c10:-moz-focusring, -.c10[type='button']:-moz-focusring, -.c10[type='reset']:-moz-focusring, -.c10[type='submit']:-moz-focusring { +.c16:-moz-focusring, +.c16[type='button']:-moz-focusring, +.c16[type='reset']:-moz-focusring, +.c16[type='submit']:-moz-focusring { outline: 0.0625rem dotted ButtonText; } -.c10 + button { +.c16 + button { margin-left: 0.375rem; } -.c9 { +.c15 { display: inline-block; } -.c8 { +.c14 { box-sizing: border-box; display: inline-block; -webkit-box-pack: center; @@ -1420,37 +1615,80 @@ exports[`renders without throwing 1`] = ` border: solid 0.0625rem rgb(45,56,132); } -.c8:focus { +.c14:focus { outline: 0; text-decoration: none; background-color: rgb(59,70,204); border-color: rgb(45,56,132); } -.c8:hover { +.c14:hover { background-color: rgb(72,83,217); border: solid 0.0625rem rgb(45,56,132); } -.c8:active, -.c8:active:hover, -.c8:active:focus { +.c14:active, +.c14:active:hover, +.c14:active:focus { background-image: none; outline: 0; background-color: rgb(45,56,132); border-color: rgb(45,56,132); } -.c8[disabled] { +.c14[disabled] { cursor: not-allowed; pointer-events: none; } +.c12 { + color: rgba(73,73,73,1); + font-weight: normal; + line-height: 1.625rem; + font-size: 1.3125rem; + margin: 0; +} + +.c12 + p, +.c12 + small, +.c12 + h1, +.c12 + h2, +.c12 + label, +.c12 + h3, +.c12 + h4, +.c12 + h5, +.c12 + div, +.c12 + span { + margin-top: 1.5rem; +} + .c4 { margin-bottom: 0.125rem; margin-left: 0.5625rem; } +.c7 { + 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); +} + .c0 { overflow: hidden; border-spacing: 0; @@ -1531,7 +1769,7 @@ exports[`renders without throwing 1`] = ` -ms-user-select: none; user-select: none; vertical-align: middle; - text-align: left; + text-align: right; height: 2.625rem; color: rgb(189,189,189); font-weight: 500; @@ -1565,6 +1803,10 @@ exports[`renders without throwing 1`] = ` border-bottom-width: 0.0625rem; } +.c11 { + color: rgb(151,151,151); +} +
@@ -1658,9 +1900,36 @@ exports[`renders without throwing 1`] = `
+
+
+
+ No packages were found +
+

+ Sorry, but we weren’t able to find any packages with that filter +

+
+
+
+
+ ); +export const NoPackages = () => ( + + + + + No packages were found + + + Sorry, but we weren’t able to find any packages with that filter + + + + +); + export const Package = ({ selected = false, id, @@ -133,7 +160,7 @@ export const Package = ({ hasVms }) => ( - + @@ -145,13 +172,21 @@ export const Package = ({ - {pretty(memory)} - - {pretty(disk)} - {ssd && SSD} + + {bytes(memory, { decimalPlaces: 0 })} + + + {bytes(disk, { decimalPlaces: 0 })} + {ssd && SSD} + + {hasVms && ( + + {vcpus} + + )} + + {price} - {hasVms && {vcpus}} - {price} ); @@ -162,7 +197,8 @@ export const Packages = ({ sortOrder = 'desc', onSortBy = () => null, hasVms, - children + children, + packages }) => ( @@ -181,10 +217,10 @@ export const Packages = ({ onSortBy('ram', sortOrder)} + onClick={() => onSortBy('memory', sortOrder)} sortOrder={sortOrder} - showSort={sortBy === 'ram'} - left + showSort={sortBy === 'memory'} + right middle actionable > @@ -195,7 +231,7 @@ export const Packages = ({ onClick={() => onSortBy('disk', sortOrder)} sortOrder={sortOrder} showSort={sortBy === 'disk'} - left + right middle actionable > @@ -207,7 +243,7 @@ export const Packages = ({ onClick={() => onSortBy('vcpu', sortOrder)} sortOrder={sortOrder} showSort={sortBy === 'vcpu'} - left + right middle actionable > @@ -219,7 +255,7 @@ export const Packages = ({ onClick={() => onSortBy('price', sortOrder)} sortOrder={sortOrder} showSort={sortBy === 'price'} - left + right middle actionable > @@ -229,6 +265,7 @@ export const Packages = ({ {children}
+ {!packages ? : null}
); @@ -134,25 +137,25 @@ export default compose( const _sortBy = get(values, 'packages-list-sort-by', 'price'); const _sortOrder = get(values, 'packages-list-sort-order', 'asc'); - const ssdOnly = get(form, `${FORM_NAME}-filters.values.ssd`, false); + const ssdOnly = get(form, `${FILTERS}.values.ssd`, false); const computeOptimized = get( form, - `${FORM_NAME}-filters.values.compute-optimized`, + `${FILTERS}.values.compute-optimized`, false ); const generalPurpose = get( form, - `${FORM_NAME}-filters.values.general-purpose`, + `${FILTERS}.values.general-purpose`, false ); const storageOptimized = get( form, - `${FORM_NAME}-filters.values.storage-optimized`, + `${FILTERS}.values.storage-optimized`, false ); const memoryOptimized = get( form, - `${FORM_NAME}-filters.values.memory-optimized`, + `${FILTERS}.values.memory-optimized`, false ); const vmSelected = get(form, 'create-instance-image.values.vms', false); @@ -191,6 +194,9 @@ export default compose( (dispatch, { history }) => ({ handleSubmit: () => history.push('/instances/~create/tags'), handleCancel: () => history.push('/instances/~create/package'), + resetFilters: () => { + dispatch(reset(`${FILTERS}-filters`)); + }, handleSortBy: (newSortBy, sortOrder) => { dispatch([ set({ diff --git a/packages/ui-toolkit/src/base/global.js b/packages/ui-toolkit/src/base/global.js index e70e1208..4bf5b61a 100644 --- a/packages/ui-toolkit/src/base/global.js +++ b/packages/ui-toolkit/src/base/global.js @@ -26,6 +26,7 @@ export default ({ theme }) => css` margin: 0; padding: 0; background: ${theme.background}; + color: ${theme.text}; } html, diff --git a/packages/ui-toolkit/src/form/__tests__/__snapshots__/form.spec.js.snap b/packages/ui-toolkit/src/form/__tests__/__snapshots__/form.spec.js.snap index 67f640cf..53c4c52b 100644 --- a/packages/ui-toolkit/src/form/__tests__/__snapshots__/form.spec.js.snap +++ b/packages/ui-toolkit/src/form/__tests__/__snapshots__/form.spec.js.snap @@ -164,7 +164,10 @@ exports[`Form Checkbox 1`] = ` />