From d92ec3bcafb5b69710eaabe8839b5c01645f7123 Mon Sep 17 00:00:00 2001 From: Susmitha Girumala Date: Wed, 10 Jun 2020 20:03:27 -0400 Subject: [PATCH 01/11] =?UTF-8?q?chore:=20=F0=9F=A4=96=20Add=20new=20messa?= =?UTF-8?q?ge=20component=20to=20rose=20addon?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Message component provides ability to show users a message with title, subtitle, icon, description, and navigation links. --- addons/rose/addon/components/rose/message.js | 7 ++ .../addon/components/rose/message.stories.mdx | 65 +++++++++++++++ .../addon/components/rose/message/link.js | 7 ++ .../addon/styles/rose/components/_index.scss | 1 + .../styles/rose/components/_message.scss | 83 +++++++++++++++++++ .../templates/components/rose/message.hbs | 25 ++++++ .../components/rose/message/link.hbs | 13 +++ addons/rose/app/components/rose/message.js | 1 + .../rose/app/components/rose/message/link.js | 1 + .../rose/tests/dummy/app/templates/index.hbs | 29 +++++-- .../tests/dummy/app/templates/playground.hbs | 8 ++ .../components/rose/message-test.js | 44 ++++++++++ .../components/rose/message/link-test.js | 28 +++++++ 13 files changed, 305 insertions(+), 7 deletions(-) create mode 100644 addons/rose/addon/components/rose/message.js create mode 100644 addons/rose/addon/components/rose/message.stories.mdx create mode 100644 addons/rose/addon/components/rose/message/link.js create mode 100644 addons/rose/addon/styles/rose/components/_message.scss create mode 100644 addons/rose/addon/templates/components/rose/message.hbs create mode 100644 addons/rose/addon/templates/components/rose/message/link.hbs create mode 100644 addons/rose/app/components/rose/message.js create mode 100644 addons/rose/app/components/rose/message/link.js create mode 100644 addons/rose/tests/integration/components/rose/message-test.js create mode 100644 addons/rose/tests/integration/components/rose/message/link-test.js diff --git a/addons/rose/addon/components/rose/message.js b/addons/rose/addon/components/rose/message.js new file mode 100644 index 000000000..89ac42ee5 --- /dev/null +++ b/addons/rose/addon/components/rose/message.js @@ -0,0 +1,7 @@ +import Component from '@ember/component'; +import layout from '../../templates/components/rose/message'; + +export default Component.extend({ + layout, + tagName: '', +}); diff --git a/addons/rose/addon/components/rose/message.stories.mdx b/addons/rose/addon/components/rose/message.stories.mdx new file mode 100644 index 000000000..2c3e062d9 --- /dev/null +++ b/addons/rose/addon/components/rose/message.stories.mdx @@ -0,0 +1,65 @@ +import { Meta, Story, Preview } from '@storybook/addon-docs/blocks'; +import { hbs } from 'ember-cli-htmlbars'; +import { action } from '@storybook/addon-actions'; +import { text, boolean, select } from '@storybook/addon-knobs'; + + + +# Message + +A message component containing a title, description, and nav links. Title can be configured with optional icon and subtitle. + +```html + + {{inline-svg "chevron-left"}} Go back + Need help? + +``` + + + {{ + template: hbs` + + {{inline-svg "chevron-left"}} Go back + Need help? + + `, + context: { + title: text('title', 'You are not authorized'), + subtitle: text('subtitle', 'Error 403'), + description: text('description', 'You must be granted permissions to view this data. Ask your administrator if you think you should have access.'), + icon: select( + 'icon', + { + 'alert-circle-outline': 'alert-circle-outline', + 'help-circle-outline': 'help-circle-outline', + 'disabled': 'disabled', + }, + 'disabled' + ), + }, + }} + + +Message can be configured without icons and navigation links. +```html + +``` + + {{ + template: hbs` + + `, + context: { + title: text('title', 'No logs received yet'), + description: text('description', 'Your logs will appear here when we start receiving them. If your server is currently outputting logs, check your configuration.'), + }, + }} + + +Message can be configured with a single left aligned link. +```html + + Add a namespace + +``` diff --git a/addons/rose/addon/components/rose/message/link.js b/addons/rose/addon/components/rose/message/link.js new file mode 100644 index 000000000..3291d255d --- /dev/null +++ b/addons/rose/addon/components/rose/message/link.js @@ -0,0 +1,7 @@ +import Component from '@ember/component'; +import layout from '../../../templates/components/rose/message/link'; + +export default Component.extend({ + layout, + tagName: '', +}); diff --git a/addons/rose/addon/styles/rose/components/_index.scss b/addons/rose/addon/styles/rose/components/_index.scss index f63f9bdf0..1c86e7a83 100644 --- a/addons/rose/addon/styles/rose/components/_index.scss +++ b/addons/rose/addon/styles/rose/components/_index.scss @@ -9,3 +9,4 @@ @import 'separator'; @import 'nav'; @import 'table'; +@import 'message'; diff --git a/addons/rose/addon/styles/rose/components/_message.scss b/addons/rose/addon/styles/rose/components/_message.scss new file mode 100644 index 000000000..c00e2e1fd --- /dev/null +++ b/addons/rose/addon/styles/rose/components/_message.scss @@ -0,0 +1,83 @@ +@use '../utilities/type'; +@use '../variables/sizing'; +@use '../variables/media'; + +.rose-message { + @include type.type(s, normal); + display: grid; + grid-template-areas: + 'title title title' + 'description description description' + 'left-link . right-link'; + grid-auto-columns: auto 1fr; + color: var(--ui-gray); + width: sizing.rems(m) * 16; //16 rems/320 px + + .rose-message-title { + @include type.type(m, semibold); + grid-area: title; + + .rose-message-title-text { + display: inline-block; + } + + .rose-message-icon { + display: inline; + svg { + vertical-align: top; + width: sizing.rems(m) * 2; // 40px + } + } + + .rose-message-subtitle { + @include type.type(xs, normal); + $lineHeight: 16 / 15; + line-height: $lineHeight; // 16px + vertical-align: bottom; + } + } + + .rose-message-description { + grid-area: description; + margin: sizing.rems(xs) 0; + } + + .rose-message-link { + @include type.type(xs, semibold); + text-decoration: none; + cursor: pointer; + --color: var(--ui-gray); + color: var(--color); + margin: sizing.rems(xs) 0; + + svg { + vertical-align: top; + width: sizing.rems(m); + height: sizing.rems(m); + } + + &.rose-message-link-left-align { + grid-area: left-link; + --color: var(--action); + } + + &.rose-message-link-right-align { + grid-area: right-link; + } + + &:hover { + --color: var(--action); + } + } +} + +@media (max-width: media.width(small)) { + .rose-message { + grid-template-areas: + 'title' + 'description' + 'right-link' + 'left-link'; + grid-auto-columns: auto 1fr; + } +} diff --git a/addons/rose/addon/templates/components/rose/message.hbs b/addons/rose/addon/templates/components/rose/message.hbs new file mode 100644 index 000000000..d15efb596 --- /dev/null +++ b/addons/rose/addon/templates/components/rose/message.hbs @@ -0,0 +1,25 @@ +
+ {{#if @title}} +
+ {{#if @icon}} +
{{inline-svg @icon}}
+ {{/if}} + +
+ {{@title}} + + {{#if @subtitle}} +
{{@subtitle}}
+ {{/if}} +
+
+ {{/if}} + + {{#if @description}} +
{{@description}}
+ {{/if}} + + {{yield (hash + link=(component 'rose/message/link') + )}} +
diff --git a/addons/rose/addon/templates/components/rose/message/link.hbs b/addons/rose/addon/templates/components/rose/message/link.hbs new file mode 100644 index 000000000..95337aaf2 --- /dev/null +++ b/addons/rose/addon/templates/components/rose/message/link.hbs @@ -0,0 +1,13 @@ +{{#if @leftAlign}} + + {{yield}} + +{{else}} + + {{yield}} + +{{/if}} diff --git a/addons/rose/app/components/rose/message.js b/addons/rose/app/components/rose/message.js new file mode 100644 index 000000000..914d08e41 --- /dev/null +++ b/addons/rose/app/components/rose/message.js @@ -0,0 +1 @@ +export { default } from 'rose/components/rose/message'; diff --git a/addons/rose/app/components/rose/message/link.js b/addons/rose/app/components/rose/message/link.js new file mode 100644 index 000000000..fe210dd3a --- /dev/null +++ b/addons/rose/app/components/rose/message/link.js @@ -0,0 +1 @@ +export { default } from 'rose/components/rose/message/link'; diff --git a/addons/rose/tests/dummy/app/templates/index.hbs b/addons/rose/tests/dummy/app/templates/index.hbs index bb8ae24db..bbcb98065 100644 --- a/addons/rose/tests/dummy/app/templates/index.hbs +++ b/addons/rose/tests/dummy/app/templates/index.hbs @@ -1,7 +1,22 @@ - - Level 1 - Level 2 - Level 3 - Level 4 - Level 5 - + + {{inline-svg "chevron-left"}} Go back + Need help? + +
+ + {{inline-svg "chevron-left"}} Go back + Need help? + +
+ + {{inline-svg "refresh-default"}} Try again + Need help? + +
+ + +
+ + Add a namespace + +
diff --git a/addons/rose/tests/dummy/app/templates/playground.hbs b/addons/rose/tests/dummy/app/templates/playground.hbs index 634ea800c..00b1c94cf 100644 --- a/addons/rose/tests/dummy/app/templates/playground.hbs +++ b/addons/rose/tests/dummy/app/templates/playground.hbs @@ -229,5 +229,13 @@ + + + Level 1 + Level 2 + Level 3 + Level 4 + Level 5 + diff --git a/addons/rose/tests/integration/components/rose/message-test.js b/addons/rose/tests/integration/components/rose/message-test.js new file mode 100644 index 000000000..497974080 --- /dev/null +++ b/addons/rose/tests/integration/components/rose/message-test.js @@ -0,0 +1,44 @@ +import { module, test } from 'qunit'; +import { setupRenderingTest } from 'ember-qunit'; +import { render, find, findAll } from '@ember/test-helpers'; +import hbs from 'htmlbars-inline-precompile'; + +module('Integration | Component | rose/message', function (hooks) { + setupRenderingTest(hooks); + + test('it renders', async function (assert) { + await render(hbs``); + assert.ok(find('.rose-message')); + }); + + test('it renders with attributes', async function (assert) { + await render(hbs``); + assert.ok(find('#message')); + }); + + test('it renders with title', async function (assert) { + await render(hbs``); + assert.equal(find('.rose-message-title').textContent.trim(), 'Title'); + }); + + test('it renders with subtitle', async function (assert) { + await render(hbs``); + assert.equal(find('.rose-message-subtitle').textContent.trim(), 'Subtitle'); + }); + + test('it renders with description', async function (assert) { + await render(hbs``); + assert.equal( + find('.rose-message-description').textContent.trim(), + 'Description' + ); + }); + + test('it renders with link', async function (assert) { + await render(hbs` + + + `); + assert.equal(findAll('.rose-message-link').length, 2); + }); +}); diff --git a/addons/rose/tests/integration/components/rose/message/link-test.js b/addons/rose/tests/integration/components/rose/message/link-test.js new file mode 100644 index 000000000..b92f3004a --- /dev/null +++ b/addons/rose/tests/integration/components/rose/message/link-test.js @@ -0,0 +1,28 @@ +import { module, test } from 'qunit'; +import { setupRenderingTest } from 'ember-qunit'; +import { render, find } from '@ember/test-helpers'; +import hbs from 'htmlbars-inline-precompile'; + +module('Integration | Component | rose/message/link', function (hooks) { + setupRenderingTest(hooks); + + test('it renders', async function (assert) { + await render(hbs``); + assert.ok(find('.rose-message-link')); + assert.ok(find('.rose-message-link-right-align')); + }); + + test('it renders with content', async function (assert) { + await render(hbs`Link content`); + assert.equal(find('.rose-message-link').textContent.trim(), 'Link content'); + }); + + test('it renders left aligned', async function (assert) { + this.set('leftAlign', true); + await render(hbs``); + assert.ok(find('.rose-message-link-left-align')); + + this.set('leftAlign', false); + assert.notOk(find('.rose-message-link-left-align')); + }); +}); From ffed6ba76285f166ffe8f5566b40e416fa952c72 Mon Sep 17 00:00:00 2001 From: Randall Morey Date: Thu, 11 Jun 2020 10:51:04 -0400 Subject: [PATCH 02/11] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20massage=20mess?= =?UTF-8?q?age=20component=20and=20simplify?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../rose/addon/components/rose/anonymous.js | 2 +- .../addon/components/rose/message.stories.mdx | 67 ++++++---- .../addon/components/rose/message/link.js | 7 - addons/rose/addon/styles/rose/_index.scss | 1 - .../styles/rose/{ => components}/_icon.scss | 2 +- .../addon/styles/rose/components/_index.scss | 1 + .../styles/rose/components/_message.scss | 125 +++++++++--------- .../rose/components/layout/_global.scss | 1 - .../templates/components/rose/message.hbs | 36 ++--- .../components/rose/message/link.hbs | 13 -- addons/rose/app/components/rose/anonymous.js | 2 +- .../rose/app/components/rose/message/link.js | 1 - .../rose/tests/dummy/app/templates/index.hbs | 60 ++++++--- .../components/rose/anonymous-test.js | 4 +- .../components/rose/message-test.js | 36 ++--- .../components/rose/message/link-test.js | 28 ---- 16 files changed, 179 insertions(+), 207 deletions(-) delete mode 100644 addons/rose/addon/components/rose/message/link.js rename addons/rose/addon/styles/rose/{ => components}/_icon.scss (89%) delete mode 100644 addons/rose/addon/templates/components/rose/message/link.hbs delete mode 100644 addons/rose/app/components/rose/message/link.js delete mode 100644 addons/rose/tests/integration/components/rose/message/link-test.js diff --git a/addons/rose/addon/components/rose/anonymous.js b/addons/rose/addon/components/rose/anonymous.js index 74592a562..c5321f53a 100644 --- a/addons/rose/addon/components/rose/anonymous.js +++ b/addons/rose/addon/components/rose/anonymous.js @@ -6,5 +6,5 @@ import layout from '../../templates/components/rose/anonymous'; * that yield simple contextual components, such as layouts yielding regions. */ export default Component.extend({ - layout + layout, }); diff --git a/addons/rose/addon/components/rose/message.stories.mdx b/addons/rose/addon/components/rose/message.stories.mdx index 2c3e062d9..89447aca1 100644 --- a/addons/rose/addon/components/rose/message.stories.mdx +++ b/addons/rose/addon/components/rose/message.stories.mdx @@ -7,27 +7,29 @@ import { text, boolean, select } from '@storybook/addon-knobs'; # Message -A message component containing a title, description, and nav links. Title can be configured with optional icon and subtitle. - -```html - - {{inline-svg "chevron-left"}} Go back - Need help? - -``` +A message component containing a title, description, and nav links. +Title can be configured with optional icon and subtitle. - {{ + {{ template: hbs` - - {{inline-svg "chevron-left"}} Go back - Need help? + + + {{description}} + + + + Go back + + + Need help? + `, context: { - title: text('title', 'You are not authorized'), - subtitle: text('subtitle', 'Error 403'), - description: text('description', 'You must be granted permissions to view this data. Ask your administrator if you think you should have access.'), + title: text('title', 'Page not found'), + subtitle: text('subtitle', 'Error 404'), + description: text('description', 'Sorry, we could not find the page you were looking for. Navigate to another page with the links below.'), icon: select( 'icon', { @@ -35,31 +37,48 @@ A message component containing a title, description, and nav links. Title can be 'help-circle-outline': 'help-circle-outline', 'disabled': 'disabled', }, - 'disabled' + 'help-circle-outline' ), }, }} -Message can be configured without icons and navigation links. ```html - + + + You must be granted permissions to view this data. Ask your administrator + if you think you should have access. + + + + Go back + + Need help? + ``` + +Message can be configured without icons and navigation links. + - {{ + {{ template: hbs` - + + + {{description}} + + `, context: { title: text('title', 'No logs received yet'), - description: text('description', 'Your logs will appear here when we start receiving them. If your server is currently outputting logs, check your configuration.'), + description: text('description', 'Sorry, we could not find the page you were looking for. Navigate to another page with the links below.'), }, }} -Message can be configured with a single left aligned link. ```html - - Add a namespace + + + Description. + ``` diff --git a/addons/rose/addon/components/rose/message/link.js b/addons/rose/addon/components/rose/message/link.js deleted file mode 100644 index 3291d255d..000000000 --- a/addons/rose/addon/components/rose/message/link.js +++ /dev/null @@ -1,7 +0,0 @@ -import Component from '@ember/component'; -import layout from '../../../templates/components/rose/message/link'; - -export default Component.extend({ - layout, - tagName: '', -}); diff --git a/addons/rose/addon/styles/rose/_index.scss b/addons/rose/addon/styles/rose/_index.scss index b812b9f98..b3ddfcdd1 100644 --- a/addons/rose/addon/styles/rose/_index.scss +++ b/addons/rose/addon/styles/rose/_index.scss @@ -1,5 +1,4 @@ @import 'reset'; @import 'variables'; @import 'typography'; -@import 'icon'; @import 'components'; diff --git a/addons/rose/addon/styles/rose/_icon.scss b/addons/rose/addon/styles/rose/components/_icon.scss similarity index 89% rename from addons/rose/addon/styles/rose/_icon.scss rename to addons/rose/addon/styles/rose/components/_icon.scss index 08d4c6438..451af3823 100644 --- a/addons/rose/addon/styles/rose/_icon.scss +++ b/addons/rose/addon/styles/rose/components/_icon.scss @@ -1,4 +1,4 @@ -@use 'variables/sizing'; +@use '../variables/sizing'; .rose-icon { --size: #{sizing.rems(l)}; diff --git a/addons/rose/addon/styles/rose/components/_index.scss b/addons/rose/addon/styles/rose/components/_index.scss index 1c86e7a83..948a7b735 100644 --- a/addons/rose/addon/styles/rose/components/_index.scss +++ b/addons/rose/addon/styles/rose/components/_index.scss @@ -2,6 +2,7 @@ @import 'form'; @import 'header'; @import 'layout'; +@import 'icon'; @import 'notification'; @import 'card'; @import 'cards'; diff --git a/addons/rose/addon/styles/rose/components/_message.scss b/addons/rose/addon/styles/rose/components/_message.scss index c00e2e1fd..5a3651b99 100644 --- a/addons/rose/addon/styles/rose/components/_message.scss +++ b/addons/rose/addon/styles/rose/components/_message.scss @@ -3,81 +3,76 @@ @use '../variables/media'; .rose-message { - @include type.type(s, normal); - display: grid; - grid-template-areas: - 'title title title' - 'description description description' - 'left-link . right-link'; - grid-auto-columns: auto 1fr; - color: var(--ui-gray); - width: sizing.rems(m) * 16; //16 rems/320 px + --message-color: var(--ui-gray-starker-1); + display: flex; + flex-direction: column; + color: var(--message-color); + width: sizing.rems(l) * 15; //16 rems/320 px + margin-bottom: sizing.rems(l); - .rose-message-title { - @include type.type(m, semibold); - grid-area: title; + // Icons always need tweaking + .rose-icon { + --size: #{sizing.rems(m)}; + > svg { + vertical-align: text-bottom; + } + } - .rose-message-title-text { - display: inline-block; + .rose-message-header { + display: grid; + grid-template-areas: + 'icon title' + 'icon subtitle'; + grid-auto-columns: auto 1fr; + margin-bottom: sizing.rems(m); + + .rose-icon { + // targeting 40px + --size: #{sizing.rems(xl) + sizing.rems(xxs)}; + grid-area: icon; + margin-right: sizing.rems(s); } - .rose-message-icon { - display: inline; - svg { - vertical-align: top; - width: sizing.rems(m) * 2; // 40px - } + .rose-message-title { + @include type.type(l, semibold); + grid-area: title; + margin: 0; } .rose-message-subtitle { - @include type.type(xs, normal); - $lineHeight: 16 / 15; - line-height: $lineHeight; // 16px - vertical-align: bottom; + @include type.type(s, normal); + grid-area: subtitle; + margin: 0; } } - .rose-message-description { - grid-area: description; - margin: sizing.rems(xs) 0; - } - - .rose-message-link { - @include type.type(xs, semibold); - text-decoration: none; - cursor: pointer; - --color: var(--ui-gray); - color: var(--color); - margin: sizing.rems(xs) 0; - - svg { - vertical-align: top; - width: sizing.rems(m); - height: sizing.rems(m); - } - - &.rose-message-link-left-align { - grid-area: left-link; - --color: var(--action); - } - - &.rose-message-link-right-align { - grid-area: right-link; - } - - &:hover { - --color: var(--action); - } - } -} - -@media (max-width: media.width(small)) { - .rose-message { + .rose-message-body { + display: grid; grid-template-areas: - 'title' - 'description' - 'right-link' - 'left-link'; - grid-auto-columns: auto 1fr; + 'description description' + 'left-link right-link'; + + .rose-message-description { + grid-area: description; + margin-bottom: sizing.rems(l); + } + + .rose-message-link { + @include type.type(s); + grid-area: left-link; + color: var(--action); + + text-decoration: none; + + & + .rose-message-link { + grid-area: right-link; + text-align: right; + color: var(--message-color); + } + + &:hover { + text-decoration: underline; + } + } } } diff --git a/addons/rose/addon/styles/rose/components/layout/_global.scss b/addons/rose/addon/styles/rose/components/layout/_global.scss index e6676017e..2100c70eb 100644 --- a/addons/rose/addon/styles/rose/components/layout/_global.scss +++ b/addons/rose/addon/styles/rose/components/layout/_global.scss @@ -23,7 +23,6 @@ grid-area: navigation; border-right: sizing.rems(xxxxs) solid var(--ui-border-subtler-1); } - } @media (max-width: media.width(small)) { diff --git a/addons/rose/addon/templates/components/rose/message.hbs b/addons/rose/addon/templates/components/rose/message.hbs index d15efb596..1dd3157f0 100644 --- a/addons/rose/addon/templates/components/rose/message.hbs +++ b/addons/rose/addon/templates/components/rose/message.hbs @@ -1,25 +1,27 @@ -
+
+ {{#if @title}} -
+
{{#if @icon}} -
{{inline-svg @icon}}
+ {{/if}} -
- {{@title}} +

{{@title}}

- {{#if @subtitle}} -
{{@subtitle}}
- {{/if}} -
-
+ {{#if @subtitle}} +

{{@subtitle}}

+ {{/if}} + {{/if}} - {{#if @description}} -
{{@description}}
- {{/if}} +
+ {{yield (hash + description=(component "rose/anonymous" tagName="p" class="rose-message-description") + link=(component "link-to" class="rose-message-link") + )}} +
- {{yield (hash - link=(component 'rose/message/link') - )}} -
+ diff --git a/addons/rose/addon/templates/components/rose/message/link.hbs b/addons/rose/addon/templates/components/rose/message/link.hbs deleted file mode 100644 index 95337aaf2..000000000 --- a/addons/rose/addon/templates/components/rose/message/link.hbs +++ /dev/null @@ -1,13 +0,0 @@ -{{#if @leftAlign}} - - {{yield}} - -{{else}} - - {{yield}} - -{{/if}} diff --git a/addons/rose/app/components/rose/anonymous.js b/addons/rose/app/components/rose/anonymous.js index 56df9e7f7..5117bad96 100644 --- a/addons/rose/app/components/rose/anonymous.js +++ b/addons/rose/app/components/rose/anonymous.js @@ -1 +1 @@ -export { default } from 'rose/components/rose/anonymous'; \ No newline at end of file +export { default } from 'rose/components/rose/anonymous'; diff --git a/addons/rose/app/components/rose/message/link.js b/addons/rose/app/components/rose/message/link.js deleted file mode 100644 index fe210dd3a..000000000 --- a/addons/rose/app/components/rose/message/link.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from 'rose/components/rose/message/link'; diff --git a/addons/rose/tests/dummy/app/templates/index.hbs b/addons/rose/tests/dummy/app/templates/index.hbs index bbcb98065..81a536a29 100644 --- a/addons/rose/tests/dummy/app/templates/index.hbs +++ b/addons/rose/tests/dummy/app/templates/index.hbs @@ -1,22 +1,46 @@ - - {{inline-svg "chevron-left"}} Go back + + + You must be granted permissions to view this data. + Ask your administrator if you think you should have access. + + + + Go back + Need help? -
- - {{inline-svg "chevron-left"}} Go back - Need help? - -
- - {{inline-svg "refresh-default"}} Try again - Need help? - -
- -
- - Add a namespace + + + Sorry, we couldn't find the page you were looking for. You can go back or to one of the links below. + + + + Go back + + Need help? + + + + + We ran into a problem and could not continue. You can ask your administrator or try again later. + + + + Try Again + + Need help? + + + + + Your logs will appear here when we start receiving them. If your server is currently outputting logs, check your configuration. + + + + + + Namespaces allow you to create distinct areas with their own separate policies, mounts, tokens, and identity entities. + + Add a namespace -
diff --git a/addons/rose/tests/integration/components/rose/anonymous-test.js b/addons/rose/tests/integration/components/rose/anonymous-test.js index 01e171a52..d5b65eac0 100644 --- a/addons/rose/tests/integration/components/rose/anonymous-test.js +++ b/addons/rose/tests/integration/components/rose/anonymous-test.js @@ -3,10 +3,10 @@ import { setupRenderingTest } from 'ember-qunit'; import { render, find } from '@ember/test-helpers'; import hbs from 'htmlbars-inline-precompile'; -module('Integration | Component | rose/anonymous', function(hooks) { +module('Integration | Component | rose/anonymous', function (hooks) { setupRenderingTest(hooks); - test('it renders', async function(assert) { + test('it renders', async function (assert) { await render(hbs` {{#rose/anonymous tagName='main'}} template block text diff --git a/addons/rose/tests/integration/components/rose/message-test.js b/addons/rose/tests/integration/components/rose/message-test.js index 497974080..e14d74f2e 100644 --- a/addons/rose/tests/integration/components/rose/message-test.js +++ b/addons/rose/tests/integration/components/rose/message-test.js @@ -1,44 +1,26 @@ import { module, test } from 'qunit'; import { setupRenderingTest } from 'ember-qunit'; -import { render, find, findAll } from '@ember/test-helpers'; +import { render, find } from '@ember/test-helpers'; import hbs from 'htmlbars-inline-precompile'; module('Integration | Component | rose/message', function (hooks) { setupRenderingTest(hooks); test('it renders', async function (assert) { - await render(hbs``); + assert.expect(5); + await render(hbs` + + Description + Link + + `); assert.ok(find('.rose-message')); - }); - - test('it renders with attributes', async function (assert) { - await render(hbs``); - assert.ok(find('#message')); - }); - - test('it renders with title', async function (assert) { - await render(hbs``); assert.equal(find('.rose-message-title').textContent.trim(), 'Title'); - }); - - test('it renders with subtitle', async function (assert) { - await render(hbs``); assert.equal(find('.rose-message-subtitle').textContent.trim(), 'Subtitle'); - }); - - test('it renders with description', async function (assert) { - await render(hbs``); assert.equal( find('.rose-message-description').textContent.trim(), 'Description' ); - }); - - test('it renders with link', async function (assert) { - await render(hbs` - - - `); - assert.equal(findAll('.rose-message-link').length, 2); + assert.equal(find('.rose-message-link').textContent.trim(), 'Link'); }); }); diff --git a/addons/rose/tests/integration/components/rose/message/link-test.js b/addons/rose/tests/integration/components/rose/message/link-test.js deleted file mode 100644 index b92f3004a..000000000 --- a/addons/rose/tests/integration/components/rose/message/link-test.js +++ /dev/null @@ -1,28 +0,0 @@ -import { module, test } from 'qunit'; -import { setupRenderingTest } from 'ember-qunit'; -import { render, find } from '@ember/test-helpers'; -import hbs from 'htmlbars-inline-precompile'; - -module('Integration | Component | rose/message/link', function (hooks) { - setupRenderingTest(hooks); - - test('it renders', async function (assert) { - await render(hbs``); - assert.ok(find('.rose-message-link')); - assert.ok(find('.rose-message-link-right-align')); - }); - - test('it renders with content', async function (assert) { - await render(hbs`Link content`); - assert.equal(find('.rose-message-link').textContent.trim(), 'Link content'); - }); - - test('it renders left aligned', async function (assert) { - this.set('leftAlign', true); - await render(hbs``); - assert.ok(find('.rose-message-link-left-align')); - - this.set('leftAlign', false); - assert.notOk(find('.rose-message-link-left-align')); - }); -}); From edd0d222be2c12c27e3c752f139c17f01e270cb0 Mon Sep 17 00:00:00 2001 From: Randall Morey Date: Thu, 11 Jun 2020 10:56:20 -0400 Subject: [PATCH 03/11] chore: increase link font weight --- addons/rose/addon/styles/rose/components/_message.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/addons/rose/addon/styles/rose/components/_message.scss b/addons/rose/addon/styles/rose/components/_message.scss index 5a3651b99..7aa35e13c 100644 --- a/addons/rose/addon/styles/rose/components/_message.scss +++ b/addons/rose/addon/styles/rose/components/_message.scss @@ -58,7 +58,7 @@ } .rose-message-link { - @include type.type(s); + @include type.type(s, semibold); grid-area: left-link; color: var(--action); From ab083f38f96096c98f88acf0a7f82ff01a5768bf Mon Sep 17 00:00:00 2001 From: Susmitha Girumala Date: Thu, 11 Jun 2020 21:03:49 -0400 Subject: [PATCH 04/11] =?UTF-8?q?chore:=20=F0=9F=A4=96=20Add=20centered=20?= =?UTF-8?q?layout=20component=20to=20rose=20addon?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../addon/components/rose/layout/centered.js | 7 +++ .../rose/layout/centered.stories.mdx | 25 +++++++++ .../rose/components/layout/_centered.scss | 11 ++++ .../styles/rose/components/layout/_index.scss | 1 + .../components/rose/layout/centered.hbs | 5 ++ .../app/components/rose/layout/centered.js | 1 + .../rose/tests/dummy/app/templates/index.hbs | 56 ++++--------------- .../tests/dummy/app/templates/playground.hbs | 47 ++++++++++++++++ .../components/rose/layout/centered-test.js | 29 ++++++++++ 9 files changed, 137 insertions(+), 45 deletions(-) create mode 100644 addons/rose/addon/components/rose/layout/centered.js create mode 100644 addons/rose/addon/components/rose/layout/centered.stories.mdx create mode 100644 addons/rose/addon/styles/rose/components/layout/_centered.scss create mode 100644 addons/rose/addon/templates/components/rose/layout/centered.hbs create mode 100644 addons/rose/app/components/rose/layout/centered.js create mode 100644 addons/rose/tests/integration/components/rose/layout/centered-test.js diff --git a/addons/rose/addon/components/rose/layout/centered.js b/addons/rose/addon/components/rose/layout/centered.js new file mode 100644 index 000000000..ddebf0b09 --- /dev/null +++ b/addons/rose/addon/components/rose/layout/centered.js @@ -0,0 +1,7 @@ +import Component from '@ember/component'; +import layout from '../../../templates/components/rose/layout/centered'; + +export default Component.extend({ + layout, + tagName: '', +}); diff --git a/addons/rose/addon/components/rose/layout/centered.stories.mdx b/addons/rose/addon/components/rose/layout/centered.stories.mdx new file mode 100644 index 000000000..0d7a95b61 --- /dev/null +++ b/addons/rose/addon/components/rose/layout/centered.stories.mdx @@ -0,0 +1,25 @@ +import { Meta, Story, Preview } from '@storybook/addon-docs/blocks'; +import { hbs } from 'ember-cli-htmlbars'; +import { action } from '@storybook/addon-actions'; + + + +# Layout|Centered + +A left and right centered layout/positioning component that allows a boby section to be configured + +```htmlbars + + + +``` + + + {{ + template: hbs` + + Centered Body + + `, + }} + diff --git a/addons/rose/addon/styles/rose/components/layout/_centered.scss b/addons/rose/addon/styles/rose/components/layout/_centered.scss new file mode 100644 index 000000000..ea8496fa9 --- /dev/null +++ b/addons/rose/addon/styles/rose/components/layout/_centered.scss @@ -0,0 +1,11 @@ +@use '../../variables/sizing'; + +.rose-layout-centered { + display: flex; + flex-direction: column; + + .rose-layout-centered-body { + margin: auto; + padding: sizing.rems(l) + sizing.rems(xxs) 0; //35px + } +} diff --git a/addons/rose/addon/styles/rose/components/layout/_index.scss b/addons/rose/addon/styles/rose/components/layout/_index.scss index 02f7021b2..1ed6d8338 100644 --- a/addons/rose/addon/styles/rose/components/layout/_index.scss +++ b/addons/rose/addon/styles/rose/components/layout/_index.scss @@ -1,2 +1,3 @@ @import 'global'; @import 'page'; +@import 'centered'; diff --git a/addons/rose/addon/templates/components/rose/layout/centered.hbs b/addons/rose/addon/templates/components/rose/layout/centered.hbs new file mode 100644 index 000000000..f3b2a54fb --- /dev/null +++ b/addons/rose/addon/templates/components/rose/layout/centered.hbs @@ -0,0 +1,5 @@ +
+ {{yield (hash + body=(component "rose/anonymous" tagName="section" class="rose-layout-centered-body") + )}} +
diff --git a/addons/rose/app/components/rose/layout/centered.js b/addons/rose/app/components/rose/layout/centered.js new file mode 100644 index 000000000..ff3274fee --- /dev/null +++ b/addons/rose/app/components/rose/layout/centered.js @@ -0,0 +1 @@ +export { default } from 'rose/components/rose/layout/centered'; diff --git a/addons/rose/tests/dummy/app/templates/index.hbs b/addons/rose/tests/dummy/app/templates/index.hbs index 81a536a29..b6871d7a2 100644 --- a/addons/rose/tests/dummy/app/templates/index.hbs +++ b/addons/rose/tests/dummy/app/templates/index.hbs @@ -1,46 +1,12 @@ - - - You must be granted permissions to view this data. - Ask your administrator if you think you should have access. - - - - Go back - - Need help? - + - - - Sorry, we couldn't find the page you were looking for. You can go back or to one of the links below. - - - - Go back - - Need help? - - - - - We ran into a problem and could not continue. You can ask your administrator or try again later. - - - - Try Again - - Need help? - - - - - Your logs will appear here when we start receiving them. If your server is currently outputting logs, check your configuration. - - - - - - Namespaces allow you to create distinct areas with their own separate policies, mounts, tokens, and identity entities. - - Add a namespace - + + + + + Namespaces allow you to create distinct areas with their own separate policies, mounts, tokens, and identity entities. + + Add a namespace + + + diff --git a/addons/rose/tests/dummy/app/templates/playground.hbs b/addons/rose/tests/dummy/app/templates/playground.hbs index 00b1c94cf..3d4559c6b 100644 --- a/addons/rose/tests/dummy/app/templates/playground.hbs +++ b/addons/rose/tests/dummy/app/templates/playground.hbs @@ -237,5 +237,52 @@ Level 4 Level 5 + + + + You must be granted permissions to view this data. + Ask your administrator if you think you should have access. + + + + Go back + + Need help? + + + + + Sorry, we couldn't find the page you were looking for. You can go back or to one of the links below. + + + + Go back + + Need help? + + + + + We ran into a problem and could not continue. You can ask your administrator or try again later. + + + + Try Again + + Need help? + + + + + Your logs will appear here when we start receiving them. If your server is currently outputting logs, check your configuration. + + + + + + Namespaces allow you to create distinct areas with their own separate policies, mounts, tokens, and identity entities. + + Add a namespace + diff --git a/addons/rose/tests/integration/components/rose/layout/centered-test.js b/addons/rose/tests/integration/components/rose/layout/centered-test.js new file mode 100644 index 000000000..6e74193fb --- /dev/null +++ b/addons/rose/tests/integration/components/rose/layout/centered-test.js @@ -0,0 +1,29 @@ +import { module, test } from 'qunit'; +import { setupRenderingTest } from 'ember-qunit'; +import { render, find } from '@ember/test-helpers'; +import hbs from 'htmlbars-inline-precompile'; + +module('Integration | Component | rose/layout/centered', function (hooks) { + setupRenderingTest(hooks); + + test('it renders', async function (assert) { + await render(hbs``); + assert.ok(find('.rose-layout-centered')); + assert.notOk(find('.rose-layout-centered-body')); + }); + + test('it renders with attributes', async function (assert) { + await render(hbs``); + assert.ok(find('#layout')); + }); + + test('it renders with content', async function (assert) { + await render(hbs` + Layout content + `); + assert.equal( + find('.rose-layout-centered').textContent.trim(), + 'Layout content' + ); + }); +}); From 9bb848eb5504ac9c95e192db5239a0eebbf119e7 Mon Sep 17 00:00:00 2001 From: Susmitha Girumala Date: Thu, 11 Jun 2020 21:23:33 -0400 Subject: [PATCH 05/11] =?UTF-8?q?chore:=20=F0=9F=A4=96=20Integrate=20rose/?= =?UTF-8?q?table=20component=20into=20host=20catalogs=20page?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ui/core/app/styles/app.scss | 6 ++-- .../projects/project/host-catalogs/index.hbs | 28 +++++++++++-------- .../tests/acceptance/host-catalogs-test.js | 2 +- 3 files changed, 19 insertions(+), 17 deletions(-) diff --git a/ui/core/app/styles/app.scss b/ui/core/app/styles/app.scss index f7c1e37f1..ea53643d3 100644 --- a/ui/core/app/styles/app.scss +++ b/ui/core/app/styles/app.scss @@ -19,14 +19,12 @@ } } -.projects-overview { - margin: sizing.rems(l); +.rose-layout-global-body { + margin: 0 sizing.rems(m); } .project-overview, .project-new { - margin: sizing.rems(l); - .breadcrumbs, .breadcrumbs a { color: #6f7682; diff --git a/ui/core/app/templates/orgs/org/projects/project/host-catalogs/index.hbs b/ui/core/app/templates/orgs/org/projects/project/host-catalogs/index.hbs index 490cb5b65..9194d73de 100644 --- a/ui/core/app/templates/orgs/org/projects/project/host-catalogs/index.hbs +++ b/ui/core/app/templates/orgs/org/projects/project/host-catalogs/index.hbs @@ -13,18 +13,22 @@ -
    - {{#each @model as |hostCatalog|}} -
  • - - {{hostCatalog.name}} - -
    • - {{/each}} -
+ + + {{#each @model as |hostCatalog|}} + + + + {{hostCatalog.name}} + + + + {{/each}} + + diff --git a/ui/core/tests/acceptance/host-catalogs-test.js b/ui/core/tests/acceptance/host-catalogs-test.js index acdacafa7..7a54340b3 100644 --- a/ui/core/tests/acceptance/host-catalogs-test.js +++ b/ui/core/tests/acceptance/host-catalogs-test.js @@ -23,7 +23,7 @@ module('Acceptance | host catalogs', function(hooks) { this.server.createList('project', 1); this.server.createList('host-catalog', 1); await visit('/orgs/1/projects/1/host-catalogs'); - await click('main ul li:first-child a'); + await click('main .rose-table-cell:first-child a'); await a11yAudit(); assert.equal(currentURL(), '/orgs/1/projects/1/host-catalogs/1'); }); From ad20d93765c1a2e29dead4f023c3d305b2e8566e Mon Sep 17 00:00:00 2001 From: Susmitha Girumala Date: Fri, 12 Jun 2020 11:17:35 -0400 Subject: [PATCH 06/11] =?UTF-8?q?chore:=20=F0=9F=A4=96=20Update=20hostcata?= =?UTF-8?q?logs=20table=20columns=20to=20include:type,desc?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Add type and description columns to host catalogs overview table. Move page body margin into global layout. --- .../styles/rose/components/layout/_global.scss | 1 + ui/core/app/styles/_host-catalogs.scss | 7 +++++++ ui/core/app/styles/app.scss | 5 +---- .../org/projects/project/host-catalogs/index.hbs | 16 +++++++++++++--- ui/core/translations/en-us.yaml | 7 +++++++ 5 files changed, 29 insertions(+), 7 deletions(-) create mode 100644 ui/core/app/styles/_host-catalogs.scss diff --git a/addons/rose/addon/styles/rose/components/layout/_global.scss b/addons/rose/addon/styles/rose/components/layout/_global.scss index 2100c70eb..cfc218e4e 100644 --- a/addons/rose/addon/styles/rose/components/layout/_global.scss +++ b/addons/rose/addon/styles/rose/components/layout/_global.scss @@ -13,6 +13,7 @@ .rose-layout-global-body { grid-area: body; + margin: 0 sizing.rems(m); } .rose-layout-global-header { diff --git a/ui/core/app/styles/_host-catalogs.scss b/ui/core/app/styles/_host-catalogs.scss new file mode 100644 index 000000000..1bd06bd24 --- /dev/null +++ b/ui/core/app/styles/_host-catalogs.scss @@ -0,0 +1,7 @@ +@use 'rose/variables/sizing'; + +.host-catalogs { + .description { + padding-bottom: sizing.rems(s); + } +} diff --git a/ui/core/app/styles/app.scss b/ui/core/app/styles/app.scss index ea53643d3..9a2f54344 100644 --- a/ui/core/app/styles/app.scss +++ b/ui/core/app/styles/app.scss @@ -2,6 +2,7 @@ @import 'rose'; @import 'notify'; +@import 'host-catalogs'; .rose-nav-sidebar { margin-top: sizing.rems(xxl); @@ -19,10 +20,6 @@ } } -.rose-layout-global-body { - margin: 0 sizing.rems(m); -} - .project-overview, .project-new { .breadcrumbs, diff --git a/ui/core/app/templates/orgs/org/projects/project/host-catalogs/index.hbs b/ui/core/app/templates/orgs/org/projects/project/host-catalogs/index.hbs index 9194d73de..64dba757e 100644 --- a/ui/core/app/templates/orgs/org/projects/project/host-catalogs/index.hbs +++ b/ui/core/app/templates/orgs/org/projects/project/host-catalogs/index.hbs @@ -1,7 +1,6 @@ - - + -

{{t "resources.host-catalogs"}}

+

{{t 'resources.host-catalogs'}}

 @@ -13,7 +12,16 @@ +
{{t 'descriptions.host-catalogs'}}
+ + + + {{t 'table.headers.name'}} + {{t 'table.headers.type'}} + {{t 'table.headers.description'}} + + {{#each @model as |hostCatalog|}} @@ -25,6 +33,8 @@ {{hostCatalog.name}} + {{hostCatalog.type}} + {{hostCatalog.description}} {{/each}} diff --git a/ui/core/translations/en-us.yaml b/ui/core/translations/en-us.yaml index a6cb7e4c1..dfc17716b 100644 --- a/ui/core/translations/en-us.yaml +++ b/ui/core/translations/en-us.yaml @@ -12,6 +12,8 @@ titles: new: New overview: Overview settings: Settings +descriptions: + host-catalogs: Overview of collections of hosts and host sets. states: info: Info success: Success @@ -21,6 +23,11 @@ form: label: name: Name description: Description +table: + headers: + type: Type + name: Name + description: Description dev: default-org: Default Org menu-item: Menu item From f3016c9c6fc0054cf116f3500b7e1b7da53c6020 Mon Sep 17 00:00:00 2001 From: Susmitha Girumala Date: Fri, 12 Jun 2020 12:03:13 -0400 Subject: [PATCH 07/11] =?UTF-8?q?chore:=20=F0=9F=A4=96=20Restructure=20cen?= =?UTF-8?q?tered=20layout=20to=20remove=20nested=20component?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../rose/components/layout/_centered.scss | 7 +------ .../components/rose/layout/centered.hbs | 8 +++----- .../rose/tests/dummy/app/templates/index.hbs | 18 +++++++----------- .../components/rose/layout/centered-test.js | 5 +++-- 4 files changed, 14 insertions(+), 24 deletions(-) diff --git a/addons/rose/addon/styles/rose/components/layout/_centered.scss b/addons/rose/addon/styles/rose/components/layout/_centered.scss index ea8496fa9..10844c8ae 100644 --- a/addons/rose/addon/styles/rose/components/layout/_centered.scss +++ b/addons/rose/addon/styles/rose/components/layout/_centered.scss @@ -2,10 +2,5 @@ .rose-layout-centered { display: flex; - flex-direction: column; - - .rose-layout-centered-body { - margin: auto; - padding: sizing.rems(l) + sizing.rems(xxs) 0; //35px - } + justify-content: center; } diff --git a/addons/rose/addon/templates/components/rose/layout/centered.hbs b/addons/rose/addon/templates/components/rose/layout/centered.hbs index f3b2a54fb..5d32a4b3b 100644 --- a/addons/rose/addon/templates/components/rose/layout/centered.hbs +++ b/addons/rose/addon/templates/components/rose/layout/centered.hbs @@ -1,5 +1,3 @@ -
- {{yield (hash - body=(component "rose/anonymous" tagName="section" class="rose-layout-centered-body") - )}} -
+
+ {{yield}} +
diff --git a/addons/rose/tests/dummy/app/templates/index.hbs b/addons/rose/tests/dummy/app/templates/index.hbs index b6871d7a2..dde1dea20 100644 --- a/addons/rose/tests/dummy/app/templates/index.hbs +++ b/addons/rose/tests/dummy/app/templates/index.hbs @@ -1,12 +1,8 @@ - - - - - - - Namespaces allow you to create distinct areas with their own separate policies, mounts, tokens, and identity entities. - - Add a namespace - - + + + + Namespaces allow you to create distinct areas with their own separate policies, mounts, tokens, and identity entities. + + Add a namespace + diff --git a/addons/rose/tests/integration/components/rose/layout/centered-test.js b/addons/rose/tests/integration/components/rose/layout/centered-test.js index 6e74193fb..1900a1a5a 100644 --- a/addons/rose/tests/integration/components/rose/layout/centered-test.js +++ b/addons/rose/tests/integration/components/rose/layout/centered-test.js @@ -8,6 +8,7 @@ module('Integration | Component | rose/layout/centered', function (hooks) { test('it renders', async function (assert) { await render(hbs``); + assert.ok(find('section')); assert.ok(find('.rose-layout-centered')); assert.notOk(find('.rose-layout-centered-body')); }); @@ -18,8 +19,8 @@ module('Integration | Component | rose/layout/centered', function (hooks) { }); test('it renders with content', async function (assert) { - await render(hbs` - Layout content + await render(hbs` + Layout content `); assert.equal( find('.rose-layout-centered').textContent.trim(), From c379d5c6e22fd76db1bf851260acd2326e890183 Mon Sep 17 00:00:00 2001 From: Susmitha Girumala Date: Fri, 12 Jun 2020 13:46:11 -0400 Subject: [PATCH 08/11] =?UTF-8?q?chore:=20=F0=9F=A4=96=20Update=20centere?= =?UTF-8?q?=20layout=20storybook?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/rose/layout/centered.stories.mdx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/addons/rose/addon/components/rose/layout/centered.stories.mdx b/addons/rose/addon/components/rose/layout/centered.stories.mdx index 0d7a95b61..c3bd62fd3 100644 --- a/addons/rose/addon/components/rose/layout/centered.stories.mdx +++ b/addons/rose/addon/components/rose/layout/centered.stories.mdx @@ -6,19 +6,19 @@ import { action } from '@storybook/addon-actions'; # Layout|Centered -A left and right centered layout/positioning component that allows a boby section to be configured +A left and right centered layout/positioning component. ```htmlbars - - - + + Centered + ``` {{ template: hbs` - - Centered Body + + Centered `, }} From 7ec78cf987cbc1e371e00df694020dfa58603d4c Mon Sep 17 00:00:00 2001 From: Susmitha Girumala Date: Fri, 12 Jun 2020 13:58:07 -0400 Subject: [PATCH 09/11] =?UTF-8?q?chore:=20=F0=9F=A4=96=20Update=20hostcata?= =?UTF-8?q?logs=20desc=20and=20table=20i8ln=20properties?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ui/core/app/styles/_host-catalogs.scss | 7 ------- ui/core/app/styles/app.scss | 1 - .../orgs/org/projects/project/host-catalogs/index.hbs | 8 ++++---- ui/core/translations/en-us.yaml | 4 ---- 4 files changed, 4 insertions(+), 16 deletions(-) delete mode 100644 ui/core/app/styles/_host-catalogs.scss diff --git a/ui/core/app/styles/_host-catalogs.scss b/ui/core/app/styles/_host-catalogs.scss deleted file mode 100644 index 1bd06bd24..000000000 --- a/ui/core/app/styles/_host-catalogs.scss +++ /dev/null @@ -1,7 +0,0 @@ -@use 'rose/variables/sizing'; - -.host-catalogs { - .description { - padding-bottom: sizing.rems(s); - } -} diff --git a/ui/core/app/styles/app.scss b/ui/core/app/styles/app.scss index 9a2f54344..20dbbe53f 100644 --- a/ui/core/app/styles/app.scss +++ b/ui/core/app/styles/app.scss @@ -2,7 +2,6 @@ @import 'rose'; @import 'notify'; -@import 'host-catalogs'; .rose-nav-sidebar { margin-top: sizing.rems(xxl); diff --git a/ui/core/app/templates/orgs/org/projects/project/host-catalogs/index.hbs b/ui/core/app/templates/orgs/org/projects/project/host-catalogs/index.hbs index 64dba757e..006513fa8 100644 --- a/ui/core/app/templates/orgs/org/projects/project/host-catalogs/index.hbs +++ b/ui/core/app/templates/orgs/org/projects/project/host-catalogs/index.hbs @@ -12,14 +12,14 @@ -
{{t 'descriptions.host-catalogs'}}
+

{{t 'descriptions.host-catalogs'}}

- {{t 'table.headers.name'}} - {{t 'table.headers.type'}} - {{t 'table.headers.description'}} + {{t 'form.label.name'}} + {{t 'form.label.type'}} + {{t 'form.label.description'}} diff --git a/ui/core/translations/en-us.yaml b/ui/core/translations/en-us.yaml index dfc17716b..4b51a1dc2 100644 --- a/ui/core/translations/en-us.yaml +++ b/ui/core/translations/en-us.yaml @@ -23,11 +23,7 @@ form: label: name: Name description: Description -table: - headers: type: Type - name: Name - description: Description dev: default-org: Default Org menu-item: Menu item From 0ae1ecb91c4391ff0a56a8594f50316537f22cbd Mon Sep 17 00:00:00 2001 From: Randall Morey Date: Mon, 15 Jun 2020 11:05:59 -0400 Subject: [PATCH 10/11] =?UTF-8?q?test:=20=F0=9F=92=8D=20round=20out=20new?= =?UTF-8?q?=20project=20acceptance=20tests?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ui/core/tests/acceptance/projects-test.js | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/ui/core/tests/acceptance/projects-test.js b/ui/core/tests/acceptance/projects-test.js index 612da5ffb..ee247096b 100644 --- a/ui/core/tests/acceptance/projects-test.js +++ b/ui/core/tests/acceptance/projects-test.js @@ -17,6 +17,26 @@ module('Acceptance | projects', function (hooks) { assert.equal(currentURL(), '/orgs/1/projects'); }); + test('can create new projects', async function (assert) { + assert.expect(3); + assert.equal(this.server.db.projects.length, 0); + await visit('/orgs/1/projects/new'); + await fillIn('[name="name"]', 'random string'); + await click('[type="submit"]'); + assert.equal(currentURL(), '/orgs/1/projects/1'); + assert.equal(this.server.db.projects.length, 1); + }); + + test('can cancel create new projects', async function (assert) { + assert.expect(3); + assert.equal(this.server.db.projects.length, 0); + await visit('/orgs/1/projects/new'); + await fillIn('[name="name"]', 'random string'); + await click('.rose-form-actions [type="button"]'); + assert.equal(currentURL(), '/orgs/1/projects'); + assert.equal(this.server.db.projects.length, 0); + }); + test('saving a new project with invalid fields displays error messages', async function (assert) { assert.expect(2); this.server.post('/orgs/:org_id/projects', () => { From 926337031da59a1ab9ef0ba9cb26a7260c104bcc Mon Sep 17 00:00:00 2001 From: Randall Morey Date: Mon, 15 Jun 2020 11:18:27 -0400 Subject: [PATCH 11/11] =?UTF-8?q?test:=20=F0=9F=92=8D=20add=20missing=20pr?= =?UTF-8?q?oject=20acceptance=20tests?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ui/core/tests/acceptance/projects-test.js | 28 +++++++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/ui/core/tests/acceptance/projects-test.js b/ui/core/tests/acceptance/projects-test.js index ee247096b..af00df26d 100644 --- a/ui/core/tests/acceptance/projects-test.js +++ b/ui/core/tests/acceptance/projects-test.js @@ -73,6 +73,34 @@ module('Acceptance | projects', function (hooks) { ); }); + test('can save changes to existing project', async function (assert) { + assert.expect(2); + this.server.createList('project', 1, {name: 'MyProject'}); + await visit('/orgs/1/projects/1'); + await fillIn('[name="name"]', 'random string'); + await click('.rose-form-actions [type="submit"]'); + assert.equal(currentURL(), '/orgs/1/projects/1'); + assert.equal(this.server.db.projects[0].name, 'random string'); + }); + + test('can cancel changes to existing project', async function (assert) { + assert.expect(1); + this.server.createList('project', 1, {name: 'MyProject'}); + await visit('/orgs/1/projects/1'); + await fillIn('[name="name"]', 'random string'); + await click('.rose-form-actions [type="button"]'); + assert.equal(find('[name="name"]').value, 'MyProject'); + }); + + test('can delete project', async function(assert) { + assert.expect(2); + this.server.createList('project', 1); + assert.equal(this.server.db.projects.length, 1); + await visit('/orgs/1/projects/1'); + await click('.rose-button-warning'); + assert.equal(this.server.db.projects.length, 0); + }); + test('saving an existing project with invalid fields displays error messages', async function (assert) { assert.expect(2); this.server.createList('project', 1);