diff --git a/addons/core/translations/actions/en-us.yaml b/addons/core/translations/actions/en-us.yaml index 0eefc7a68..961420913 100644 --- a/addons/core/translations/actions/en-us.yaml +++ b/addons/core/translations/actions/en-us.yaml @@ -8,7 +8,6 @@ delete: Delete remove: Remove discard: Discard disconnect: Disconnect -dismiss: Dismiss save: Save submit: Submit manage: Manage diff --git a/addons/rose/addon/components/rose/notification/index.hbs b/addons/rose/addon/components/rose/notification/index.hbs deleted file mode 100644 index 0b28edb73..000000000 --- a/addons/rose/addon/components/rose/notification/index.hbs +++ /dev/null @@ -1,41 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: BUSL-1.1 -}} - - \ No newline at end of file diff --git a/addons/rose/addon/components/rose/notification/index.js b/addons/rose/addon/components/rose/notification/index.js deleted file mode 100644 index 01644d600..000000000 --- a/addons/rose/addon/components/rose/notification/index.js +++ /dev/null @@ -1,32 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: BUSL-1.1 - */ - -import Component from '@glimmer/component'; -import { computed } from '@ember/object'; - -export default class RoseNotificationComponent extends Component { - /** - * Returns an icon name based on the notification style. - * @type {string} - */ - @computed('style') - get icon() { - let icon = 'flight-icons/svg/info-16'; - - switch (this.style) { - case 'error': - icon = 'flight-icons/svg/x-square-16'; - break; - case 'success': - icon = 'flight-icons/svg/check-circle-16'; - break; - case 'warning': - icon = 'flight-icons/svg/alert-triangle-16'; - break; - } - - return icon; - } -} diff --git a/addons/rose/addon/helpers/map-type-to-color.js b/addons/rose/addon/helpers/map-type-to-color.js new file mode 100644 index 000000000..dc8a0cdc7 --- /dev/null +++ b/addons/rose/addon/helpers/map-type-to-color.js @@ -0,0 +1,18 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: BUSL-1.1 + */ + +export default function mapTypeToColor(flashMsgType) { + // Maps the flash message type parameter to the correct hds color. + switch (flashMsgType) { + case 'error': + return 'critical'; + case 'success': + return 'success'; + case 'warning': + return 'warning'; + default: + return 'neutral'; + } +} diff --git a/addons/rose/app/helpers/map-type-to-color.js b/addons/rose/app/helpers/map-type-to-color.js new file mode 100644 index 000000000..b06c6c474 --- /dev/null +++ b/addons/rose/app/helpers/map-type-to-color.js @@ -0,0 +1,6 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: BUSL-1.1 + */ + +export { default } from 'rose/helpers/map-type-to-color'; diff --git a/addons/rose/app/styles/rose/components/_index.scss b/addons/rose/app/styles/rose/components/_index.scss index 80c7428a8..e79b7def8 100644 --- a/addons/rose/app/styles/rose/components/_index.scss +++ b/addons/rose/app/styles/rose/components/_index.scss @@ -12,7 +12,6 @@ @import 'layout'; @import 'icon'; @import 'list'; -@import 'notification'; @import 'card'; @import 'cards'; @import 'page-header'; diff --git a/addons/rose/app/styles/rose/components/_notification.scss b/addons/rose/app/styles/rose/components/_notification.scss deleted file mode 100644 index 006a2a7ab..000000000 --- a/addons/rose/app/styles/rose/components/_notification.scss +++ /dev/null @@ -1,106 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: BUSL-1.1 - */ - -@use '../variables/sizing'; -@use '../utilities/type'; - -.rose-notification { - $s: sizing.rems(s); // 12 - $xs: sizing.rems(xs); // 8 - $xxs: sizing.rems(xxs); // 4 - $xxxs: sizing.rems(xxxs); // 2 - $xxxxs: sizing.rems(xxxxs); // 1 - - position: relative; - padding: sizing.rems(m); - margin-bottom: sizing.rems(m); - border: sizing.rems(xxxxs) solid; - border-radius: $xxxs; - box-shadow: - 0 $xs $s rgba(var(--stark-components), var(--opacity-3)), - 0 $xxs $xxs rgba(var(--stark-components), var(--opacity-4)); - - .rose-notification-icon { - position: relative; - top: $xxxxs; - color: var(--icon-color); - } - - .rose-notification-header { - color: var(--header-color); - @include type.type(m, semibold); - } - - .rose-notification-body { - @include type.type(s); - - // hack alert, because the icons are still hard to work with - margin-left: sizing.rems(m) + $xxs; - overflow-wrap: break-word; - } - - .rose-notification-dismiss { - position: absolute; - color: currentcolor; - background-color: transparent; - border-radius: $xxxs; - border: 0; - padding: 0; - cursor: pointer; - top: sizing.rems(s); - right: sizing.rems(s); - - .rose-icon { - display: block; - padding: $xxs; - } - - .rose-notification-dismiss-text { - position: absolute; - top: -1000px; - left: -1000px; - width: 1px; - height: 1px; - opacity: 0; - } - - &:hover { - background-color: rgba(var(--stark-components), var(--opacity-3)); - } - - &:active { - background-color: rgba(var(--stark-components), var(--opacity-2)); - } - } - - --icon-color: var(--info); - --header-color: var(--info-starker-1); - --border-color: var(--info-subtler-1); - --background-color: var(--info-subtler-3); - - border-color: var(--border-color); - background-color: var(--background-color); - - &.is-error { - --icon-color: var(--failure); - --header-color: var(--failure); - --border-color: var(--failure-subtler-1); - --background-color: var(--failure-subtler-2); - } - - &.is-success { - --icon-color: var(--success); - --header-color: var(--success-starker-1); - --border-color: var(--success-subtler-1); - --background-color: var(--success-subtler-2); - } - - &.is-warning { - --icon-color: var(--warning); - --header-color: var(--warning-starker-1); - --border-color: var(--warning-subtler-1); - --background-color: var(--warning-subtler-2); - } -} diff --git a/addons/rose/tests/integration/components/rose/notification-test.js b/addons/rose/tests/integration/components/rose/notification-test.js deleted file mode 100644 index 6d0e3c131..000000000 --- a/addons/rose/tests/integration/components/rose/notification-test.js +++ /dev/null @@ -1,41 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: BUSL-1.1 - */ - -import { module, test } from 'qunit'; -import { setupRenderingTest } from 'ember-qunit'; -import { render, find, click } from '@ember/test-helpers'; -import { hbs } from 'ember-cli-htmlbars'; - -module('Integration | Component | rose/notification', function (hooks) { - setupRenderingTest(hooks); - - test('it renders', async function (assert) { - await render(hbs` - - An error occurred. - - `); - assert.ok(find('.rose-notification')); - assert.strictEqual( - find('.rose-notification-body').textContent.trim(), - 'An error occurred.', - ); - }); - - test('it has optional dismiss button which triggers a function', async function (assert) { - assert.expect(1); - this.dismiss = () => assert.ok(true, 'dismiss clicked'); - await render(hbs` - - `); - await click('.rose-notification-dismiss'); - }); -}); diff --git a/addons/rose/tests/integration/helpers/map-type-to-color-test.js b/addons/rose/tests/integration/helpers/map-type-to-color-test.js new file mode 100644 index 000000000..14071b581 --- /dev/null +++ b/addons/rose/tests/integration/helpers/map-type-to-color-test.js @@ -0,0 +1,45 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: BUSL-1.1 + */ + +import { module, test } from 'qunit'; +import { setupRenderingTest } from 'ember-qunit'; +import { render } from '@ember/test-helpers'; +import { hbs } from 'ember-cli-htmlbars'; + +module('Integration | Helper | map-type-to-color', function (hooks) { + setupRenderingTest(hooks); + + test('it returns correct color when flash message type is `success`', async function (assert) { + this.set('inputValue', 'success'); + + await render(hbs`{{map-type-to-color this.inputValue}}`); + + assert.dom(this.element).hasText('success'); + }); + + test('it returns correct color when flash message type is `error`', async function (assert) { + this.set('inputValue', 'error'); + + await render(hbs`{{map-type-to-color this.inputValue}}`); + + assert.dom(this.element).hasText('critical'); + }); + + test('it returns correct color when flash message type is `warning`', async function (assert) { + this.set('inputValue', 'warning'); + + await render(hbs`{{map-type-to-color this.inputValue}}`); + + assert.dom(this.element).hasText('warning'); + }); + + test('it returns default color when flash message type does not match', async function (assert) { + this.set('inputValue', 'other'); + + await render(hbs`{{map-type-to-color this.inputValue}}`); + + assert.dom(this.element).hasText('neutral'); + }); +}); diff --git a/ui/admin/app/styles/_notify.scss b/ui/admin/app/styles/_notify.scss index 9940b8905..02c925ae9 100644 --- a/ui/admin/app/styles/_notify.scss +++ b/ui/admin/app/styles/_notify.scss @@ -6,60 +6,55 @@ // This file is essentially a rip of the default ember notify styles with some minor tweaks for positioning. @-webkit-keyframes ember-notify-show { from { - left: -310px; + right: -310px; } to { - left: 0; + right: 0; } } @keyframes ember-notify-show { from { - left: -310px; + right: -310px; } to { - left: 0; + right: 0; } } @-webkit-keyframes ember-notify-hide { from { - left: 0; + right: 0; } to { - left: -310px; + right: -310px; } } @keyframes ember-notify-hide { from { - left: 0; + right: 0; } to { - left: -310px; + right: -310px; } } .ember-notify-cn { bottom: 0; - left: 0; - max-width: 300px; + right: 0; position: fixed; z-index: 5000; + margin-bottom: 16px; } .ember-notify { box-sizing: border-box; display: block; - margin: 10px; + margin: 16px 24px; position: relative; - width: 300px; - - .close { - cursor: pointer; - float: right; - } + width: 360px; } .ember-notify-show { @@ -87,14 +82,7 @@ } @media only screen and (width <= 680px) { - .ember-notify-cn { - box-sizing: border-box; - padding-left: 20px; - width: 100%; - } - .ember-notify { - float: right; width: 100%; } } diff --git a/ui/admin/app/templates/application.hbs b/ui/admin/app/templates/application.hbs index e91c8750d..634233c47 100644 --- a/ui/admin/app/templates/application.hbs +++ b/ui/admin/app/templates/application.hbs @@ -114,21 +114,18 @@ {{#if this.flashMessages.queue}} -
+
{{#each this.flashMessages.queue as |flash|}} -
- + - {{flash.message}} - + {{t (concat 'states.' flash.notificationType)}} + {{flash.message}} +
{{/each}}
diff --git a/ui/admin/app/templates/authentication-complete.hbs b/ui/admin/app/templates/authentication-complete.hbs index 4a702716f..5bc0d8719 100644 --- a/ui/admin/app/templates/authentication-complete.hbs +++ b/ui/admin/app/templates/authentication-complete.hbs @@ -7,11 +7,9 @@
- - {{t 'auth.descriptions.flow-success'}} - + + {{t 'auth.titles.flow-success'}} + {{t 'auth.descriptions.flow-success'}} +
\ No newline at end of file diff --git a/ui/admin/app/templates/authentication-error.hbs b/ui/admin/app/templates/authentication-error.hbs index 2dc80a35c..d4701cbc1 100644 --- a/ui/admin/app/templates/authentication-error.hbs +++ b/ui/admin/app/templates/authentication-error.hbs @@ -7,10 +7,12 @@
- - {{t 'auth.descriptions.flow-error'}} -
- - + + {{t 'auth.titles.flow-error'}} + + {{t 'auth.descriptions.flow-error'}} + + +
\ No newline at end of file diff --git a/ui/admin/tests/acceptance/aliases/create-test.js b/ui/admin/tests/acceptance/aliases/create-test.js index 777ad18cf..16c28b432 100644 --- a/ui/admin/tests/acceptance/aliases/create-test.js +++ b/ui/admin/tests/acceptance/aliases/create-test.js @@ -26,7 +26,8 @@ module('Acceptance | aliases | create', function (hooks) { const DESTINATION_ID_SELECTOR = '[name="destination_id"]'; const HOST_ID_SELECTOR = '[name="authorize_session_arguments"]'; - const ALERT_TEXT_SELECTOR = '[role="alert"] div'; + const ALERT_TEXT_SELECTOR = + '[data-test-toast-notification] .hds-alert__description'; const FIELD_ERROR_TEXT_SELECTOR = '.hds-form-error__message'; const NAME_FIELD_TEXT = 'random string'; diff --git a/ui/admin/tests/acceptance/auth-methods/create-test.js b/ui/admin/tests/acceptance/auth-methods/create-test.js index e40381bab..cf7ca645d 100644 --- a/ui/admin/tests/acceptance/auth-methods/create-test.js +++ b/ui/admin/tests/acceptance/auth-methods/create-test.js @@ -32,7 +32,8 @@ module('Acceptance | auth-methods | create', function (hooks) { const NAME_INPUT_SELECTOR = '[name="name"]'; const URLS_INPUT_SELECTOR = '[name="urls"]'; const DESC_INPUT_SELECTOR = '[name="description"]'; - const ERROR_MSG_SELECTOR = '.rose-notification-body'; + const ERROR_MSG_SELECTOR = + '[data-test-toast-notification] .hds-alert__description'; const FIELD_ERROR_TEXT_SELECTOR = '.hds-form-error__message'; const CERTIFICATES_BTN_SELECTOR = '[name="certificates"] button'; diff --git a/ui/admin/tests/acceptance/auth-methods/delete-test.js b/ui/admin/tests/acceptance/auth-methods/delete-test.js index 19bb4b0f6..b15b4f9af 100644 --- a/ui/admin/tests/acceptance/auth-methods/delete-test.js +++ b/ui/admin/tests/acceptance/auth-methods/delete-test.js @@ -28,7 +28,8 @@ module('Acceptance | auth-methods | delete', function (hooks) { const DIALOG_DELETE_BTN_SELECTOR = '.rose-dialog .rose-button-primary'; const DIALOG_CANCEL_BTN_SELECTOR = '.rose-dialog .rose-button-secondary'; - const ERROR_MSG_SELECTOR = '.rose-notification-body'; + const ERROR_MSG_SELECTOR = + '[data-test-toast-notification] .hds-alert__description'; const MANAGE_DROPDOWN_SELECTOR = '[data-test-manage-auth-method] button:first-child'; diff --git a/ui/admin/tests/acceptance/auth-methods/oidc-test.js b/ui/admin/tests/acceptance/auth-methods/oidc-test.js index 1dbb09379..48792c0a7 100644 --- a/ui/admin/tests/acceptance/auth-methods/oidc-test.js +++ b/ui/admin/tests/acceptance/auth-methods/oidc-test.js @@ -151,10 +151,8 @@ module('Acceptance | auth-methods | oidc', function (hooks) { authMethod.attributes.state, 'Auth method state is not be updated.', ); - assert.ok( - find('.rose-notification-body').textContent.trim(), - 'Sorry!', - 'Displays error message.', - ); + assert + .dom('[data-test-toast-notification] .hds-alert__description') + .hasText('Sorry!'); }); }); diff --git a/ui/admin/tests/acceptance/auth-methods/update-test.js b/ui/admin/tests/acceptance/auth-methods/update-test.js index 242ab7842..d8acd0670 100644 --- a/ui/admin/tests/acceptance/auth-methods/update-test.js +++ b/ui/admin/tests/acceptance/auth-methods/update-test.js @@ -33,7 +33,8 @@ module('Acceptance | auth-methods | update', function (hooks) { const NAME_INPUT_SELECTOR = '[name="name"]'; const URLS_INPUT_SELECTOR = '[name="urls"]'; const DESC_INPUT_SELECTOR = '[name="description"]'; - const ERROR_MSG_SELECTOR = '.rose-notification-body'; + const ERROR_MSG_SELECTOR = + '[data-test-toast-notification] .hds-alert__description'; const FIELD_ERROR_TEXT_SELECTOR = '.hds-form-error__message'; const CERTIFICATES_REMOVE_BTN_SELECTOR = '[name="certificates"] [data-test-remove-button]'; diff --git a/ui/admin/tests/acceptance/authentication-test.js b/ui/admin/tests/acceptance/authentication-test.js index cd11e1568..d32d1abee 100644 --- a/ui/admin/tests/acceptance/authentication-test.js +++ b/ui/admin/tests/acceptance/authentication-test.js @@ -9,7 +9,6 @@ import { currentURL, fillIn, click, - find, findAll, getRootElement, } from '@ember/test-helpers'; @@ -268,7 +267,9 @@ module('Acceptance | authentication', function (hooks) { assert.notOk(currentSession().isAuthenticated); await fillIn('[name="identification"]', 'error'); await click('[type="submit"]'); - assert.ok(find('.rose-notification.is-error')); + assert + .dom('[data-test-toast-notification].hds-alert--color-critical') + .isVisible(); assert.notOk(currentSession().isAuthenticated); }); diff --git a/ui/admin/tests/acceptance/credential-library/delete-test.js b/ui/admin/tests/acceptance/credential-library/delete-test.js index 32325c5b8..8312e562a 100644 --- a/ui/admin/tests/acceptance/credential-library/delete-test.js +++ b/ui/admin/tests/acceptance/credential-library/delete-test.js @@ -134,6 +134,8 @@ module('Acceptance | credential-libraries | delete', function (hooks) { await visit(urls.credentialLibrary); await click(MANAGE_DROPDOWN_SELECTOR); await click(DELETE_ACTION_SELECTOR); - assert.ok(find('[role="alert"]').textContent.trim(), 'Oops.'); + assert + .dom('[data-test-toast-notification] .hds-alert__description') + .hasText('Oops.'); }); }); diff --git a/ui/admin/tests/acceptance/credential-library/update-test.js b/ui/admin/tests/acceptance/credential-library/update-test.js index 652f91976..29d811187 100644 --- a/ui/admin/tests/acceptance/credential-library/update-test.js +++ b/ui/admin/tests/acceptance/credential-library/update-test.js @@ -160,10 +160,9 @@ module('Acceptance | credential-libraries | update', function (hooks) { await click(BUTTON_SELECTOR, 'Activate edit mode'); await fillIn(NAME_INPUT_SELECTOR, 'random string'); await click(SAVE_BTN_SELECTOR); - assert.ok( - find('[role="alert"]').textContent.trim(), - 'The request was invalid.', - ); + assert + .dom('[data-test-toast-notification] .hds-alert__description') + .hasText('The request was invalid.'); assert.ok( find(FIELD_ERROR_TEXT_SELECTOR).textContent.trim(), 'Name is required.', diff --git a/ui/admin/tests/acceptance/credential-store/create-test.js b/ui/admin/tests/acceptance/credential-store/create-test.js index 881861ff8..5c0d447a2 100644 --- a/ui/admin/tests/acceptance/credential-store/create-test.js +++ b/ui/admin/tests/acceptance/credential-store/create-test.js @@ -131,10 +131,9 @@ module('Acceptance | credential-stores | create', function (hooks) { }); await visit(urls.newCredentialStore); await click('[type="submit"]'); - assert.ok( - find('[role="alert"]').textContent.trim(), - 'The request was invalid.', - ); + assert + .dom('[data-test-toast-notification] .hds-alert__description') + .hasText('The request was invalid.'); assert.ok( find('[data-test-error-message-name]').textContent.trim(), 'Name is required.', diff --git a/ui/admin/tests/acceptance/credential-store/credentials/create-test.js b/ui/admin/tests/acceptance/credential-store/credentials/create-test.js index ff8ef9321..a9955f5ea 100644 --- a/ui/admin/tests/acceptance/credential-store/credentials/create-test.js +++ b/ui/admin/tests/acceptance/credential-store/credentials/create-test.js @@ -234,7 +234,7 @@ module( await click('[type="submit"]'); assert - .dom('.rose-notification-body') + .dom('[data-test-toast-notification] .hds-alert__description') .hasText('Error in provided request.'); assert .dom('[data-test-error-message-password]') @@ -269,7 +269,7 @@ module( await click('[type="submit"]'); assert - .dom('.rose-notification-body') + .dom('[data-test-toast-notification] .hds-alert__description') .hasText('Error in provided request.'); assert .dom('[data-test-error-message-private-key]') @@ -304,7 +304,7 @@ module( await click('[type="submit"]'); assert - .dom('.rose-notification-body') + .dom('[data-test-toast-notification] .hds-alert__description') .hasText('Error in provided request.'); }); diff --git a/ui/admin/tests/acceptance/credential-store/credentials/delete-test.js b/ui/admin/tests/acceptance/credential-store/credentials/delete-test.js index 87ee7d642..3fc5683f9 100644 --- a/ui/admin/tests/acceptance/credential-store/credentials/delete-test.js +++ b/ui/admin/tests/acceptance/credential-store/credentials/delete-test.js @@ -7,7 +7,7 @@ import { module, test } from 'qunit'; import { setupApplicationTest } from 'ember-qunit'; import setupMirage from 'ember-cli-mirage/test-support/setup-mirage'; import { authenticateSession } from 'ember-simple-auth/test-support'; -import { click, currentURL, visit, find } from '@ember/test-helpers'; +import { click, currentURL, visit } from '@ember/test-helpers'; import { Response } from 'miragejs'; module( @@ -277,7 +277,9 @@ module( await visit(urls.usernamePasswordCredential); await click(MANAGE_DROPDOWN_SELECTOR); await click(DELETE_ACTION_SELECTOR); - assert.ok(find('[role="alert"]').textContent.trim(), 'Oops.'); + assert + .dom('[data-test-toast-notification] .hds-alert__description') + .hasText('Oops.'); }); test('deleting a username & key pair credential which errors displays error message', async function (assert) { @@ -295,7 +297,9 @@ module( await visit(urls.usernameKeyPairCredential); await click(MANAGE_DROPDOWN_SELECTOR); await click(DELETE_ACTION_SELECTOR); - assert.ok(find('[role="alert"]').textContent.trim(), 'Oops.'); + assert + .dom('[data-test-toast-notification] .hds-alert__description') + .hasText('Oops.'); }); test('deleting a JSON credential which errors displays error message', async function (assert) { @@ -313,7 +317,9 @@ module( await visit(urls.jsonCredential); await click(MANAGE_DROPDOWN_SELECTOR); await click(DELETE_ACTION_SELECTOR); - assert.ok(find('[role="alert"]').textContent.trim(), 'Oops.'); + assert + .dom('[data-test-toast-notification] .hds-alert__description') + .hasText('Oops.'); }); }, ); diff --git a/ui/admin/tests/acceptance/credential-store/credentials/update-test.js b/ui/admin/tests/acceptance/credential-store/credentials/update-test.js index c62f95803..d0d0e3815 100644 --- a/ui/admin/tests/acceptance/credential-store/credentials/update-test.js +++ b/ui/admin/tests/acceptance/credential-store/credentials/update-test.js @@ -232,10 +232,9 @@ module( await click('form [type="button"]', 'Activate edit mode'); await fillIn('[name="name"]', mockInput); await click('[type="submit"]'); - assert.ok( - find('[role="alert"]').textContent.trim(), - 'Error in provided request.', - ); + assert + .dom('[data-test-toast-notification] .hds-alert__description') + .hasText('Error in provided request.'); assert.ok( find('[data-test-error-message-name]').textContent.trim(), 'Name is required.', @@ -267,10 +266,9 @@ module( await click('form [type="button"]', 'Activate edit mode'); await fillIn('[name="name"]', mockInput); await click('[type="submit"]'); - assert.ok( - find('[role="alert"]').textContent.trim(), - 'Error in provided request.', - ); + assert + .dom('[data-test-toast-notification] .hds-alert__description') + .hasText('Error in provided request.'); assert.ok( find('[data-test-error-message-name]').textContent.trim(), 'Name is required.', @@ -302,10 +300,9 @@ module( await click('form [type="button"]', 'Activate edit mode'); await fillIn('[name="name"]', mockInput); await click('[type="submit"]'); - assert.ok( - find('[role="alert"]').textContent.trim(), - 'Error in provided request.', - ); + assert + .dom('[data-test-toast-notification] .hds-alert__description') + .hasText('Error in provided request.'); assert.ok( find('[data-test-error-message-name]').textContent.trim(), 'Name is required.', diff --git a/ui/admin/tests/acceptance/credential-store/delete-test.js b/ui/admin/tests/acceptance/credential-store/delete-test.js index 7a5229b3f..28cf87763 100644 --- a/ui/admin/tests/acceptance/credential-store/delete-test.js +++ b/ui/admin/tests/acceptance/credential-store/delete-test.js @@ -4,7 +4,7 @@ */ import { module, test } from 'qunit'; -import { visit, find, click } from '@ember/test-helpers'; +import { visit, click } from '@ember/test-helpers'; import { setupApplicationTest } from 'ember-qunit'; import setupMirage from 'ember-cli-mirage/test-support/setup-mirage'; import { setupIndexedDb } from 'api/test-support/helpers/indexed-db'; @@ -181,7 +181,9 @@ module('Acceptance | credential-stores | delete', function (hooks) { await visit(urls.staticCredentialStore); await click(MANAGE_DROPDOWN_SELECTOR); await click(DELETE_ACTION_SELECTOR); - assert.ok(find('[role="alert"]').textContent.trim(), 'Oops.'); + assert + .dom('[data-test-toast-notification] .hds-alert__description') + .hasText('Oops.'); }); test('deleting a vault credential store which errors displays error messages', async function (assert) { @@ -199,6 +201,8 @@ module('Acceptance | credential-stores | delete', function (hooks) { await visit(urls.vaultCredentialStore); await click(MANAGE_DROPDOWN_SELECTOR); await click(DELETE_ACTION_SELECTOR); - assert.ok(find('[role="alert"]').textContent.trim(), 'Oops.'); + assert + .dom('[data-test-toast-notification] .hds-alert__description') + .hasText('Oops.'); }); }); diff --git a/ui/admin/tests/acceptance/credential-store/update-test.js b/ui/admin/tests/acceptance/credential-store/update-test.js index 132b26793..4652bd23f 100644 --- a/ui/admin/tests/acceptance/credential-store/update-test.js +++ b/ui/admin/tests/acceptance/credential-store/update-test.js @@ -156,10 +156,9 @@ module('Acceptance | credential-stores | update', function (hooks) { await click('form [type="button"]', 'Activate edit mode'); await fillIn('[name="name"]', 'random string'); await click('[type="submit"]'); - assert.ok( - find('[role="alert"]').textContent.trim(), - 'The request was invalid.', - ); + assert + .dom('[data-test-toast-notification] .hds-alert__description') + .hasText('The request was invalid.'); assert.ok( find('[data-test-error-message-name]').textContent.trim(), 'Name is required.', @@ -190,10 +189,9 @@ module('Acceptance | credential-stores | update', function (hooks) { await click('form [type="button"]', 'Activate edit mode'); await fillIn('[name="name"]', 'random string'); await click('[type="submit"]'); - assert.ok( - find('[role="alert"]').textContent.trim(), - 'The request was invalid.', - ); + assert + .dom('[data-test-toast-notification] .hds-alert__description') + .hasText('The request was invalid.'); assert.ok( find('[data-test-error-message-name]').textContent.trim(), 'Name is required.', diff --git a/ui/admin/tests/acceptance/groups/delete-test.js b/ui/admin/tests/acceptance/groups/delete-test.js index f42f9083b..05a2591cb 100644 --- a/ui/admin/tests/acceptance/groups/delete-test.js +++ b/ui/admin/tests/acceptance/groups/delete-test.js @@ -85,10 +85,8 @@ module('Acceptance | groups | delete', function (hooks) { await visit(urls.group); await click(MANAGE_DROPDOWN_SELECTOR); await click(DELETE_ACTION_SELECTOR); - assert.strictEqual( - find('.rose-notification-body').textContent.trim(), - 'Oops.', - 'Displays primary error message.', - ); + assert + .dom('[data-test-toast-notification] .hds-alert__description') + .hasText('Oops.'); }); }); diff --git a/ui/admin/tests/acceptance/groups/members-test.js b/ui/admin/tests/acceptance/groups/members-test.js index eb87ee8b6..6fde45102 100644 --- a/ui/admin/tests/acceptance/groups/members-test.js +++ b/ui/admin/tests/acceptance/groups/members-test.js @@ -104,7 +104,9 @@ module('Acceptance | groups | members', function (hooks) { assert.strictEqual(findAll('tbody tr').length, membersCount); await click('.hds-dropdown-toggle-icon'); await click('tbody tr .hds-dropdown-list-item button'); - assert.ok(find('[role="alert"]')); + assert + .dom('[data-test-toast-notification] .hds-alert__description') + .hasText('The request was invalid.'); }); test('visiting member selection', async function (assert) { @@ -176,6 +178,8 @@ module('Acceptance | groups | members', function (hooks) { await visit(urls.addMembers); await click('tbody label'); await click('form [type="submit"]'); - assert.ok(find('[role="alert"]')); + assert + .dom('[data-test-toast-notification] .hds-alert__description') + .hasText('The request was invalid.'); }); }); diff --git a/ui/admin/tests/acceptance/groups/update-test.js b/ui/admin/tests/acceptance/groups/update-test.js index 86fc7ea01..f19cb73a3 100644 --- a/ui/admin/tests/acceptance/groups/update-test.js +++ b/ui/admin/tests/acceptance/groups/update-test.js @@ -96,11 +96,9 @@ module('Acceptance | groups | update', function (hooks) { await click('form [type="button"]', 'Activate edit mode'); await fillIn('[name="name"]', 'random string'); await click('[type="submit"]'); - assert.strictEqual( - find('.rose-notification-body').textContent.trim(), - 'The request was invalid.', - 'Displays primary error message.', - ); + assert + .dom('[data-test-toast-notification] .hds-alert__description') + .hasText('The request was invalid.'); assert.strictEqual( find('[data-test-error-message-name]').textContent.trim(), 'Name is required.', diff --git a/ui/admin/tests/acceptance/host-catalogs/create-test.js b/ui/admin/tests/acceptance/host-catalogs/create-test.js index acbb780ab..723ef8cfb 100644 --- a/ui/admin/tests/acceptance/host-catalogs/create-test.js +++ b/ui/admin/tests/acceptance/host-catalogs/create-test.js @@ -29,7 +29,8 @@ module('Acceptance | host-catalogs | create', function (hooks) { const TYPE_INPUT_SELECTOR = '[name="type"]'; const SAVE_BUTTON_SELECTOR = '[type="submit"]'; const CANCEL_BUTTON_SELECTOR = '.rose-form-actions [type="button"]'; - const ALERT_TEXT_SELECTOR = '[role="alert"]'; + const ALERT_TEXT_SELECTOR = + '[data-test-toast-notification] .hds-alert__description'; const instances = { scopes: { diff --git a/ui/admin/tests/acceptance/host-catalogs/delete-test.js b/ui/admin/tests/acceptance/host-catalogs/delete-test.js index 50faffa47..b04343046 100644 --- a/ui/admin/tests/acceptance/host-catalogs/delete-test.js +++ b/ui/admin/tests/acceptance/host-catalogs/delete-test.js @@ -104,7 +104,9 @@ module('Acceptance | host-catalogs | delete', function (hooks) { await click(DELETE_ACTION_SELECTOR); await click('.rose-dialog .rose-button-primary'); - assert.dom('.rose-notification-body').hasText('Deleted successfully.'); + assert + .dom('[data-test-toast-notification] .hds-alert__description') + .hasText('Deleted successfully.'); assert.strictEqual(getHostCatalogCount(), hostCatalogCount - 1); assert.strictEqual(currentURL(), urls.hostCatalogs); }); @@ -142,6 +144,8 @@ module('Acceptance | host-catalogs | delete', function (hooks) { await click(MANAGE_DROPDOWN_SELECTOR); await click(DELETE_ACTION_SELECTOR); - assert.dom('.rose-notification-body').hasText('Oops.'); + assert + .dom('[data-test-toast-notification] .hds-alert__description') + .hasText('Oops.'); }); }); diff --git a/ui/admin/tests/acceptance/host-catalogs/host-sets/create-test.js b/ui/admin/tests/acceptance/host-catalogs/host-sets/create-test.js index 5dd52a78b..83e7db51b 100644 --- a/ui/admin/tests/acceptance/host-catalogs/host-sets/create-test.js +++ b/ui/admin/tests/acceptance/host-catalogs/host-sets/create-test.js @@ -208,10 +208,9 @@ module('Acceptance | host-catalogs | host sets | create', function (hooks) { }); await visit(urls.newHostSet); await click(SUBMIT_BTN_SELECTOR); - assert.ok( - find('[role="alert"]').textContent.trim(), - 'The request was invalid.', - ); + assert + .dom('[data-test-toast-notification] .hds-alert__description') + .hasText('The request was invalid.'); assert.ok( find('[data-test-error-message-name]').textContent.trim(), 'Name is required.', diff --git a/ui/admin/tests/acceptance/host-catalogs/host-sets/delete-test.js b/ui/admin/tests/acceptance/host-catalogs/host-sets/delete-test.js index d255b3ee3..fa17fc1ce 100644 --- a/ui/admin/tests/acceptance/host-catalogs/host-sets/delete-test.js +++ b/ui/admin/tests/acceptance/host-catalogs/host-sets/delete-test.js @@ -138,6 +138,8 @@ module('Acceptance | host-catalogs | host sets | delete', function (hooks) { await visit(urls.hostSet); await click(MANAGE_DROPDOWN_SELECTOR); await click(DELETE_ACTION_SELECTOR); - assert.ok(find('[role="alert"]').textContent.trim(), 'Oops.'); + assert + .dom('[data-test-toast-notification] .hds-alert__description') + .hasText('Oops.'); }); }); diff --git a/ui/admin/tests/acceptance/host-catalogs/host-sets/hosts-test.js b/ui/admin/tests/acceptance/host-catalogs/host-sets/hosts-test.js index a61df86bf..d33f75098 100644 --- a/ui/admin/tests/acceptance/host-catalogs/host-sets/hosts-test.js +++ b/ui/admin/tests/acceptance/host-catalogs/host-sets/hosts-test.js @@ -136,7 +136,9 @@ module('Acceptance | host-catalogs | host-sets | hosts', function (hooks) { assert.strictEqual(findAll('tbody tr').length, getHostSetHostCount()); await click('[data-test-host-set-hosts-dropdown-toggle]'); await click('[data-test-host-set-hosts-dropdown-remove-host]'); - assert.ok(find('[role="alert"]')); + assert + .dom('[data-test-toast-notification] .hds-alert__description') + .hasText('The request was invalid.'); }); test('visiting add hosts', async function (assert) { @@ -209,7 +211,9 @@ module('Acceptance | host-catalogs | host-sets | hosts', function (hooks) { await visit(urls.addHosts); await click('tbody .hds-table__tr .hds-form-label'); await click('form [type="submit"]'); - assert.ok(find('[role="alert"]')); + assert + .dom('[data-test-toast-notification] .hds-alert__description') + .hasText('The request was invalid.'); }); test('visiting host creation from a host set', async function (assert) { @@ -255,7 +259,9 @@ module('Acceptance | host-catalogs | host-sets | hosts', function (hooks) { await visit(urls.createAndAddHost); await fillIn('[name="name"]', 'New Host'); await click('form [type="submit"]'); - assert.ok(find('[role="alert"]')); + assert + .dom('[data-test-toast-notification] .hds-alert__description') + .hasText('The request was invalid.'); }); test('shows error message on host addition to host set error', async function (assert) { @@ -275,7 +281,9 @@ module('Acceptance | host-catalogs | host-sets | hosts', function (hooks) { await visit(urls.createAndAddHost); await fillIn('[name="name"]', 'New Host'); await click('form [type="submit"]'); - assert.ok(find('[role="alert"]')); + assert + .dom('[data-test-toast-notification] .hds-alert__description') + .hasText('The request was invalid.'); }); test('users can navigate to host and incorrect url autocorrects', async function (assert) { diff --git a/ui/admin/tests/acceptance/host-catalogs/host-sets/update-test.js b/ui/admin/tests/acceptance/host-catalogs/host-sets/update-test.js index a904d0c21..10da34f49 100644 --- a/ui/admin/tests/acceptance/host-catalogs/host-sets/update-test.js +++ b/ui/admin/tests/acceptance/host-catalogs/host-sets/update-test.js @@ -149,10 +149,9 @@ module('Acceptance | host-catalogs | host sets | update', function (hooks) { }); await visit(urls.newHostSet); await click(SUBMIT_BTN_SELECTOR); - assert.ok( - find('[role="alert"]').textContent.trim(), - 'The request was invalid.', - ); + assert + .dom('[data-test-toast-notification] .hds-alert__description') + .hasText('The request was invalid.'); assert.ok( find('[data-test-error-message-name]').textContent.trim(), 'Name is required.', @@ -292,10 +291,9 @@ module('Acceptance | host-catalogs | host sets | update', function (hooks) { await click(EDIT_BUTTON_SELECTOR, 'Activate edit mode'); await fillIn('[name="name"]', 'random string'); await click(SUBMIT_BTN_SELECTOR); - assert.ok( - find('[role="alert"]').textContent.trim(), - 'The request was invalid.', - ); + assert + .dom('[data-test-toast-notification] .hds-alert__description') + .hasText('The request was invalid.'); assert.ok( find('[data-test-error-message-name]').textContent.trim(), 'Name is required.', diff --git a/ui/admin/tests/acceptance/host-catalogs/hosts/delete-test.js b/ui/admin/tests/acceptance/host-catalogs/hosts/delete-test.js index 2897a6cac..47db37aab 100644 --- a/ui/admin/tests/acceptance/host-catalogs/hosts/delete-test.js +++ b/ui/admin/tests/acceptance/host-catalogs/hosts/delete-test.js @@ -137,6 +137,8 @@ module('Acceptance | host-catalogs | hosts | delete', function (hooks) { await visit(urls.host); await click(MANAGE_DROPDOWN_SELECTOR); await click(DELETE_ACTION_SELECTOR); - assert.ok(find('[role="alert"]').textContent.trim(), 'Oops.'); + assert + .dom('[data-test-toast-notification] .hds-alert__description') + .hasText('Oops.'); }); }); diff --git a/ui/admin/tests/acceptance/host-catalogs/hosts/update-test.js b/ui/admin/tests/acceptance/host-catalogs/hosts/update-test.js index c29f26761..3973c5fcd 100644 --- a/ui/admin/tests/acceptance/host-catalogs/hosts/update-test.js +++ b/ui/admin/tests/acceptance/host-catalogs/hosts/update-test.js @@ -125,10 +125,9 @@ module('Acceptance | host-catalogs | hosts | update', function (hooks) { await click('form [type="button"]', 'Activate edit mode'); await fillIn('[name="name"]', 'random string'); await click('[type="submit"]'); - assert.ok( - find('[role="alert"]').textContent.trim(), - 'The request was invalid.', - ); + assert + .dom('[data-test-toast-notification] .hds-alert__description') + .hasText('The request was invalid.'); assert.ok( find('[data-test-error-message-name]').textContent.trim(), 'Name is required.', diff --git a/ui/admin/tests/acceptance/host-catalogs/update-test.js b/ui/admin/tests/acceptance/host-catalogs/update-test.js index b5840313a..ab7d21636 100644 --- a/ui/admin/tests/acceptance/host-catalogs/update-test.js +++ b/ui/admin/tests/acceptance/host-catalogs/update-test.js @@ -167,7 +167,9 @@ module('Acceptance | host-catalogs | update', function (hooks) { await fillIn(NAME_INPUT_SELECTOR, 'random string'); await click('[type="submit"]'); - assert.dom('[role="alert"] div').hasText('The request was invalid.'); + assert + .dom('[data-test-toast-notification] .hds-alert__description') + .hasText('The request was invalid.'); assert.dom('[data-test-error-message-name]').hasText('Name is required.'); }); diff --git a/ui/admin/tests/acceptance/managed-groups/create-test.js b/ui/admin/tests/acceptance/managed-groups/create-test.js index 42fdee735..83f13feea 100644 --- a/ui/admin/tests/acceptance/managed-groups/create-test.js +++ b/ui/admin/tests/acceptance/managed-groups/create-test.js @@ -28,7 +28,8 @@ module('Acceptance | managed-groups | create', function (hooks) { const CANCEL_BTN_SELECTOR = '.rose-form-actions [type="button"]'; const NAME_INPUT_SELECTOR = '[name="name"]'; const DESC_INPUT_SELECTOR = '[name="description"]'; - const ERROR_MSG_SELECTOR = '.rose-notification-body'; + const ERROR_MSG_SELECTOR = + '[data-test-toast-notification] .hds-alert__description'; const FIELD_ERROR_TEXT_SELECTOR = '.hds-form-error__message'; const MANAGE_DROPDOWN_SELECTOR = '[data-test-manage-auth-method] button:first-child'; diff --git a/ui/admin/tests/acceptance/managed-groups/delete-test.js b/ui/admin/tests/acceptance/managed-groups/delete-test.js index c2a8d8fb4..32d08b27f 100644 --- a/ui/admin/tests/acceptance/managed-groups/delete-test.js +++ b/ui/admin/tests/acceptance/managed-groups/delete-test.js @@ -25,7 +25,8 @@ module('Acceptance | managed-groups | delete', function (hooks) { '[data-test-managed-group-dropdown] button:first-child'; const DELETE_ACTION_SELECTOR = '[data-test-managed-group-dropdown] ul li button'; - const ERROR_MSG_SELECTOR = '.rose-notification-body'; + const ERROR_MSG_SELECTOR = + '[data-test-toast-notification] .hds-alert__description'; const instances = { scopes: { diff --git a/ui/admin/tests/acceptance/policy/create-test.js b/ui/admin/tests/acceptance/policy/create-test.js index 1bbb6c661..e0658c4dc 100644 --- a/ui/admin/tests/acceptance/policy/create-test.js +++ b/ui/admin/tests/acceptance/policy/create-test.js @@ -22,7 +22,8 @@ module('Acceptance | policies | create', function (hooks) { const CANCEL_BTN_SELECTOR = '.rose-form-actions [type="button"]'; const NAME_FIELD_SELECTOR = '[name="name"]'; const RETAIN_FOR_TEXT_INPUT = '[data-input="retain_for"]'; - const ALERT_TEXT_SELECTOR = '[role="alert"] div'; + const ALERT_TEXT_SELECTOR = + '[data-test-toast-notification] .hds-alert__description'; const FIELD_ERROR_TEXT_SELECTOR = '.hds-form-error__message'; const NAME_FIELD_TEXT = 'random string'; const DELETE_AFTER_TEXT_INPUT = '[data-input="delete_after"]'; diff --git a/ui/admin/tests/acceptance/roles/create-test.js b/ui/admin/tests/acceptance/roles/create-test.js index b0fa41f89..59cf73da0 100644 --- a/ui/admin/tests/acceptance/roles/create-test.js +++ b/ui/admin/tests/acceptance/roles/create-test.js @@ -130,7 +130,9 @@ module('Acceptance | roles | create', function (hooks) { await fillIn('[name="name"]', 'new target'); await click('form [type="submit"]'); await a11yAudit(); - assert.ok(find('[role="alert"]')); + assert + .dom('[data-test-toast-notification] .hds-alert__description') + .hasText('The request was invalid.'); assert.ok(find('.hds-form-error__message')); }); diff --git a/ui/admin/tests/acceptance/roles/delete-test.js b/ui/admin/tests/acceptance/roles/delete-test.js index 7e5f9a011..3a1380586 100644 --- a/ui/admin/tests/acceptance/roles/delete-test.js +++ b/ui/admin/tests/acceptance/roles/delete-test.js @@ -96,10 +96,8 @@ module('Acceptance | roles | delete', function (hooks) { await visit(urls.role); await click(MANAGE_DROPDOWN_SELECTOR); await click(DELETE_DROPDOWN_SELECTOR); - assert.strictEqual( - find('.rose-notification-body').textContent.trim(), - 'Oops.', - 'Displays primary error message.', - ); + assert + .dom('[data-test-toast-notification] .hds-alert__description') + .hasText('Oops.'); }); }); diff --git a/ui/admin/tests/acceptance/roles/global-scope-test.js b/ui/admin/tests/acceptance/roles/global-scope-test.js index d4a9fbd8b..c9718b461 100644 --- a/ui/admin/tests/acceptance/roles/global-scope-test.js +++ b/ui/admin/tests/acceptance/roles/global-scope-test.js @@ -48,7 +48,8 @@ module('Acceptance | roles | global-scope', function (hooks) { const CANCEL_BTN_SELECTOR = '.rose-form-actions [type="button"]'; const MANAGE_DROPDOWN_SELECTOR = '.hds-dropdown-toggle-button'; const MANAGE_SCOPES_SELECTOR = '[data-test-manage-dropdown-scopes]'; - const TOAST_SELECTOR = '[role="alert"]'; + const TOAST_SELECTOR = + '[data-test-toast-notification] .hds-alert__description'; const SEARCH_INPUT_SELECTOR = '.search-filtering [type="search"]'; const NO_RESULTS_MSG_SELECTOR = '[data-test-no-grant-scope-results]'; const NO_SCOPES_MSG_SELECTOR = '.role-grant-scopes div'; diff --git a/ui/admin/tests/acceptance/roles/grants-test.js b/ui/admin/tests/acceptance/roles/grants-test.js index 94de1d17e..6f733799a 100644 --- a/ui/admin/tests/acceptance/roles/grants-test.js +++ b/ui/admin/tests/acceptance/roles/grants-test.js @@ -139,7 +139,9 @@ module('Acceptance | roles | grants', function (hooks) { ); await fillIn(`${grantsForm} [name="grant"]`, 'ids=123,action=delete'); await click('.rose-form-actions [type="submit"]:not(:disabled)'); - assert.ok(find('[role="alert"]')); + assert + .dom('[data-test-toast-notification] .hds-alert__description') + .hasText('The request was invalid.'); }); test('create a grant', async function (assert) { @@ -192,7 +194,7 @@ module('Acceptance | roles | grants', function (hooks) { await fillIn(`${newGrantForm} [name="grant"]`, 'ids=123,action=delete'); await click(`${newGrantForm} [type="submit"]:not(:disabled)`); await click('.rose-form-actions [type="submit"]:not(:disabled)'); - assert.ok(find('[role="alert"]')); + assert.ok(find('[data-test-toast-notification] .hds-alert__description')); }); test('delete a grant', async function (assert) { @@ -235,6 +237,6 @@ module('Acceptance | roles | grants', function (hooks) { ); await click(`${grantsForm} button:not([type="submit"])`); await click('.rose-form-actions [type="submit"]:not(:disabled)'); - assert.ok(find('[role="alert"]')); + assert.ok(find('[data-test-toast-notification] .hds-alert__description')); }); }); diff --git a/ui/admin/tests/acceptance/roles/org-scope-test.js b/ui/admin/tests/acceptance/roles/org-scope-test.js index 96d37e6d6..d3a278e5a 100644 --- a/ui/admin/tests/acceptance/roles/org-scope-test.js +++ b/ui/admin/tests/acceptance/roles/org-scope-test.js @@ -45,7 +45,8 @@ module('Acceptance | roles | org-scope', function (hooks) { const CANCEL_BTN_SELECTOR = '.rose-form-actions [type="button"]'; const MANAGE_DROPDOWN_SELECTOR = '.hds-dropdown-toggle-button'; const MANAGE_SCOPES_SELECTOR = '[data-test-manage-dropdown-scopes]'; - const TOAST_SELECTOR = '[role="alert"]'; + const TOAST_SELECTOR = + '[data-test-toast-notification] .hds-alert__description'; const SEARCH_INPUT_SELECTOR = '.search-filtering [type="search"]'; const NO_RESULTS_MSG_SELECTOR = '[data-test-no-grant-scope-results]'; const NO_SCOPES_MSG_SELECTOR = '.role-grant-scopes div'; diff --git a/ui/admin/tests/acceptance/roles/principals-test.js b/ui/admin/tests/acceptance/roles/principals-test.js index f414fd5b0..ab2b402c3 100644 --- a/ui/admin/tests/acceptance/roles/principals-test.js +++ b/ui/admin/tests/acceptance/roles/principals-test.js @@ -105,7 +105,9 @@ module('Acceptance | roles | principals', function (hooks) { assert.strictEqual(findAll('tbody tr').length, principalsCount); await click('.hds-dropdown-toggle-icon'); await click('tbody tr .hds-dropdown-list-item button'); - assert.ok(find('[role="alert"]')); + assert + .dom('[data-test-toast-notification] .hds-alert__description') + .hasText('The request was invalid.'); }); test('cannot navigate to add principals without proper authorization', async function (assert) { @@ -166,6 +168,6 @@ module('Acceptance | roles | principals', function (hooks) { await visit(urls.addPrincipals); await click('tbody label'); await click('form [type="submit"]'); - assert.ok(find('[role="alert"]')); + assert.ok(find('[data-test-toast-notification] .hds-alert__description')); }); }); diff --git a/ui/admin/tests/acceptance/roles/update-test.js b/ui/admin/tests/acceptance/roles/update-test.js index 85cbb7c1c..fc2489e03 100644 --- a/ui/admin/tests/acceptance/roles/update-test.js +++ b/ui/admin/tests/acceptance/roles/update-test.js @@ -108,11 +108,9 @@ module('Acceptance | roles | update', function (hooks) { await click('form [type="button"]', 'Activate edit mode'); await fillIn('[name="name"]', 'random string'); await click('[type="submit"]'); - assert.strictEqual( - find('.rose-notification-body').textContent.trim(), - 'The request was invalid.', - 'Displays primary error message.', - ); + assert + .dom('[data-test-toast-notification] .hds-alert__description') + .hasText('The request was invalid.'); assert.strictEqual( find('.hds-form-error__message').textContent.trim(), 'Name is required.', diff --git a/ui/admin/tests/acceptance/scopes-test.js b/ui/admin/tests/acceptance/scopes-test.js index bd27e384a..952c16050 100644 --- a/ui/admin/tests/acceptance/scopes-test.js +++ b/ui/admin/tests/acceptance/scopes-test.js @@ -217,7 +217,9 @@ module('Acceptance | scopes', function (hooks) { await click(`[href="${urls.newOrgScope}"]`); await click(SAVE_BUTTON_SELECTOR); - assert.dom('.rose-notification-body').hasText('The request was invalid.'); + assert + .dom('[data-test-toast-notification] .hds-alert__description') + .hasText('The request was invalid.'); assert.dom('.hds-form-error__message').hasText('Name is required.'); }); }); diff --git a/ui/admin/tests/acceptance/scopes/delete-test.js b/ui/admin/tests/acceptance/scopes/delete-test.js index cb7da729a..0d12dcdc4 100644 --- a/ui/admin/tests/acceptance/scopes/delete-test.js +++ b/ui/admin/tests/acceptance/scopes/delete-test.js @@ -136,6 +136,8 @@ module('Acceptance | scopes | delete', function (hooks) { await click(MANAGE_DROPDOWN_SELECTOR); await click(DELETE_ACTION_SELECTOR); - assert.dom('.rose-notification-body').hasText('Oops.'); + assert + .dom('[data-test-toast-notification] .hds-alert__description') + .hasText('Oops.'); }); }); diff --git a/ui/admin/tests/acceptance/scopes/update-test.js b/ui/admin/tests/acceptance/scopes/update-test.js index ac6ed29ef..00d8670bc 100644 --- a/ui/admin/tests/acceptance/scopes/update-test.js +++ b/ui/admin/tests/acceptance/scopes/update-test.js @@ -127,7 +127,9 @@ module('Acceptance | scopes | update', function (hooks) { await fillIn('[name="name"]', 'random string'); await click('[type="submit"]'); - assert.dom('[role="alert"] div').hasText('The request was invalid.'); + assert + .dom('[data-test-toast-notification] .hds-alert__description') + .hasText('The request was invalid.'); assert.dom('.hds-form-error__message').hasText('Name is required.'); }); diff --git a/ui/admin/tests/acceptance/session-recordings/session-recording/channels-by-connection/channel-test.js b/ui/admin/tests/acceptance/session-recordings/session-recording/channels-by-connection/channel-test.js index 14cda3554..b791ac31d 100644 --- a/ui/admin/tests/acceptance/session-recordings/session-recording/channels-by-connection/channel-test.js +++ b/ui/admin/tests/acceptance/session-recordings/session-recording/channels-by-connection/channel-test.js @@ -23,7 +23,8 @@ module( const DELETE_DROPDOWN_SELECTOR = '[data-test-manage-dropdown-delete]'; const DROPDOWN_SELECTOR = '[data-test-manage-dropdown]'; - const ERROR_MSG_SELECTOR = '.rose-notification-body'; + const ERROR_MSG_SELECTOR = + '[data-test-toast-notification] .hds-alert__description'; // Instances const instances = { @@ -141,9 +142,7 @@ module( // if there was an error player will not render assert.dom('.session-recording-player').doesNotExist(); assert.dom('.hds-application-state__title').hasText('Playback error'); - assert - .dom('.rose-notification-body') - .includesText('rpc error: code = Unknown'); + assert.dom(ERROR_MSG_SELECTOR).includesText('rpc error: code = Unknown'); }); test('user can navigate back to session recording screen', async function (assert) { diff --git a/ui/admin/tests/acceptance/sessions/list-test.js b/ui/admin/tests/acceptance/sessions/list-test.js index 57002cd0b..b70d23999 100644 --- a/ui/admin/tests/acceptance/sessions/list-test.js +++ b/ui/admin/tests/acceptance/sessions/list-test.js @@ -169,7 +169,9 @@ module('Acceptance | sessions | list', function (hooks) { await click(`[href="${urls.sessions}"]`); await click('tbody tr:first-child td:last-child button'); - assert.dom('[role="alert"] .rose-notification-header').hasText('Success'); + assert + .dom('[data-test-toast-notification] .hds-alert__title') + .hasText('Success'); }); test('cancelling a session with error shows notification', async function (assert) { @@ -179,7 +181,9 @@ module('Acceptance | sessions | list', function (hooks) { await click(`[href="${urls.sessions}"]`); await click('tbody tr:first-child td:last-child button'); - assert.dom('[role="alert"] .rose-notification-header').hasText('Error'); + assert + .dom('[data-test-toast-notification] .hds-alert__title') + .hasText('Error'); }); test('users can link to docs page for sessions', async function (assert) { diff --git a/ui/admin/tests/acceptance/storage-buckets/create-test.js b/ui/admin/tests/acceptance/storage-buckets/create-test.js index d221678a8..ba1ae3c0e 100644 --- a/ui/admin/tests/acceptance/storage-buckets/create-test.js +++ b/ui/admin/tests/acceptance/storage-buckets/create-test.js @@ -91,7 +91,9 @@ module('Acceptance | storage-buckets | create', function (hooks) { name: commonSelectors.FIELD_NAME_VALUE, }); - assert.dom(selectors.TOAST).hasText(selectors.TOAST_SUCCESSFULL_VALUE); + assert + .dom(commonSelectors.ALERT_TOAST_BODY) + .hasText(selectors.TOAST_SUCCESSFUL_VALUE); assert.strictEqual(storageBucket.name, commonSelectors.FIELD_NAME_VALUE); assert.strictEqual(storageBucket.scopeId, instances.scopes.org.id); assert.strictEqual(getStorageBucketCount(), storageBucketCount + 1); @@ -124,7 +126,9 @@ module('Acceptance | storage-buckets | create', function (hooks) { const storageBucket = this.server.schema.storageBuckets.findBy({ name: commonSelectors.FIELD_NAME_VALUE, }); - assert.dom(selectors.TOAST).hasText(selectors.TOAST_SUCCESSFULL_VALUE); + assert + .dom(commonSelectors.ALERT_TOAST_BODY) + .hasText(selectors.TOAST_SUCCESSFUL_VALUE); assert.strictEqual(storageBucket.name, commonSelectors.FIELD_NAME_VALUE); assert.strictEqual( storageBucket.attributes.endpoint_url, @@ -267,7 +271,9 @@ module('Acceptance | storage-buckets | create', function (hooks) { await click(commonSelectors.SAVE_BTN); await a11yAudit(); - assert.dom(selectors.TOAST).hasText('The request was invalid.'); + assert + .dom(commonSelectors.ALERT_TOAST_BODY) + .hasText('The request was invalid.'); assert .dom(selectors.FIELD_BUCKET_NAME_ERROR) .hasText('This is a required field.'); diff --git a/ui/admin/tests/acceptance/storage-buckets/delete-test.js b/ui/admin/tests/acceptance/storage-buckets/delete-test.js index fffa6f727..d52b4e51e 100644 --- a/ui/admin/tests/acceptance/storage-buckets/delete-test.js +++ b/ui/admin/tests/acceptance/storage-buckets/delete-test.js @@ -25,7 +25,8 @@ module('Acceptance | storage-buckets | delete', function (hooks) { const DIALOG_CANCEL_BTN_SELECTOR = '.rose-dialog .rose-button-secondary'; const DIALOG_MESSAGE_SELECTOR = '.rose-dialog-body'; const DIALOG_TITLE_SELECTOR = '.rose-dialog-header'; - const NOTIFICATION_MSG_SELECTOR = '.rose-notification-body'; + const NOTIFICATION_MSG_SELECTOR = + '[data-test-toast-notification] .hds-alert__description'; const NOTIFICATION_MSG_TEXT = 'Deleted successfully.'; const instances = { diff --git a/ui/admin/tests/acceptance/storage-buckets/selectors.js b/ui/admin/tests/acceptance/storage-buckets/selectors.js index f8c2b2014..08eef815a 100644 --- a/ui/admin/tests/acceptance/storage-buckets/selectors.js +++ b/ui/admin/tests/acceptance/storage-buckets/selectors.js @@ -29,8 +29,7 @@ export const FIELD_SECRET_KEY_EDIT_BTN = '[data-test-secret-access-key] [type=button]'; export const FIELD_WORKER_FILTER = '[name=worker_filter]'; export const FIELD_WORKER_FILTER_ERROR = '[data-test-worker-filter-error]'; -export const TOAST = '[role=alert] div'; -export const TOAST_SUCCESSFULL_VALUE = 'Saved successfully.'; +export const TOAST_SUCCESSFUL_VALUE = 'Saved successfully.'; export const TABLE_FIRST_ROW_ACTION_DROPDOWN = 'tbody tr:first-child td:last-child button'; diff --git a/ui/admin/tests/acceptance/storage-buckets/update-test.js b/ui/admin/tests/acceptance/storage-buckets/update-test.js index e45914df7..eaad42e23 100644 --- a/ui/admin/tests/acceptance/storage-buckets/update-test.js +++ b/ui/admin/tests/acceptance/storage-buckets/update-test.js @@ -170,7 +170,9 @@ module('Acceptance | storage-buckets | update', function (hooks) { await fillIn(selectors.FIELD_WORKER_FILTER, 'random string'); await click(commonSelectors.SAVE_BTN); - assert.dom(selectors.TOAST).hasText('The request was invalid.'); + assert + .dom(commonSelectors.ALERT_TOAST_BODY) + .hasText('The request was invalid.'); assert .dom(selectors.FIELD_BUCKET_NAME_ERROR) .hasText('This is a required field.'); diff --git a/ui/admin/tests/acceptance/targets/brokered-credential-sources-test.js b/ui/admin/tests/acceptance/targets/brokered-credential-sources-test.js index 6eecfd780..a658d9341 100644 --- a/ui/admin/tests/acceptance/targets/brokered-credential-sources-test.js +++ b/ui/admin/tests/acceptance/targets/brokered-credential-sources-test.js @@ -298,7 +298,9 @@ module('Acceptance | targets | brokered credential sources', function (hooks) { await click('tbody tr:last-child label'); await click('tbody tr:first-child label'); await click('form [type="submit"]'); - assert.dom('[role="alert"]').isVisible(); + assert + .dom('[data-test-toast-notification] .hds-alert__description') + .isVisible(); }); test('can remove a vault type credential library', async function (assert) { @@ -367,7 +369,9 @@ module('Acceptance | targets | brokered credential sources', function (hooks) { assert.strictEqual(findAll('tbody tr').length, count); await click('.hds-dropdown-toggle-icon'); await click('tbody tr .hds-dropdown-list-item button'); - assert.dom('[role="alert"]').isVisible(); + assert + .dom('[data-test-toast-notification] .hds-alert__description') + .isVisible(); }); test('removing a target credential which errors displays error messages', async function (assert) { @@ -391,6 +395,8 @@ module('Acceptance | targets | brokered credential sources', function (hooks) { assert.strictEqual(findAll('tbody tr').length, count); await click('.hds-dropdown-toggle-icon'); await click('tbody tr .hds-dropdown-list-item button'); - assert.dom('[role="alert"]').isVisible(); + assert + .dom('[data-test-toast-notification] .hds-alert__description') + .isVisible(); }); }); diff --git a/ui/admin/tests/acceptance/targets/create-alias-test.js b/ui/admin/tests/acceptance/targets/create-alias-test.js index 5bf4060b2..8ec2ce265 100644 --- a/ui/admin/tests/acceptance/targets/create-alias-test.js +++ b/ui/admin/tests/acceptance/targets/create-alias-test.js @@ -27,7 +27,8 @@ module('Acceptance | targets | create-alias', function (hooks) { const NAME_FIELD_SELECTOR = '[name="name"]'; const ALIAS_FIELD_SELECTOR = '[name="value"]'; const DEST_FIELD_SELECTOR = '[name="destination_id"]'; - const ALERT_TEXT_SELECTOR = '[role="alert"] div'; + const ALERT_TEXT_SELECTOR = + '[data-test-toast-notification] .hds-alert__description'; const FIELD_ERROR_TEXT_SELECTOR = '.hds-form-error__message'; const NAME_FIELD_TEXT = 'random string'; const ALIAS_VALUE_TEXT = 'www.target1.com'; diff --git a/ui/admin/tests/acceptance/targets/create-test.js b/ui/admin/tests/acceptance/targets/create-test.js index e1be34268..73d845883 100644 --- a/ui/admin/tests/acceptance/targets/create-test.js +++ b/ui/admin/tests/acceptance/targets/create-test.js @@ -281,7 +281,9 @@ module('Acceptance | targets | create', function (hooks) { await visit(urls.newTCPTarget); await click(SAVE_BTN_SELECTOR); - assert.dom('[role="alert"] div').hasText('The request was invalid.'); + assert + .dom('[data-test-toast-notification] .hds-alert__description') + .hasText('The request was invalid.'); assert.dom('.hds-form-error__message').hasText('Name is required.'); }); @@ -308,7 +310,9 @@ module('Acceptance | targets | create', function (hooks) { await visit(urls.newSSHTarget); await click(SAVE_BTN_SELECTOR); - assert.dom('[role="alert"] div').hasText('The request was invalid.'); + assert + .dom('[data-test-toast-notification] .hds-alert__description') + .hasText('The request was invalid.'); assert.dom('.hds-form-error__message').hasText('Name is required.'); }); diff --git a/ui/admin/tests/acceptance/targets/delete-test.js b/ui/admin/tests/acceptance/targets/delete-test.js index adfc6a65e..f7d25e21f 100644 --- a/ui/admin/tests/acceptance/targets/delete-test.js +++ b/ui/admin/tests/acceptance/targets/delete-test.js @@ -89,7 +89,9 @@ module('Acceptance | targets | delete', function (hooks) { await click(DELETE_ACTION_SELECTOR); await click('.rose-dialog .rose-button-primary'); - assert.dom('.rose-notification-body').hasText('Deleted successfully.'); + assert + .dom('[data-test-toast-notification] .hds-alert__description') + .hasText('Deleted successfully.'); assert.strictEqual(getTargetCount(), targetCount - 1); assert.strictEqual(currentURL(), urls.targets); }); @@ -139,6 +141,8 @@ module('Acceptance | targets | delete', function (hooks) { await click(MANAGE_DROPDOWN_SELECTOR); await click(DELETE_ACTION_SELECTOR); - assert.dom('.rose-notification-body').hasText('Oops.'); + assert + .dom('[data-test-toast-notification] .hds-alert__description') + .hasText('Oops.'); }); }); diff --git a/ui/admin/tests/acceptance/targets/enable-session-recording/create-storage-bucket-test.js b/ui/admin/tests/acceptance/targets/enable-session-recording/create-storage-bucket-test.js index 356a0be48..03d9470f7 100644 --- a/ui/admin/tests/acceptance/targets/enable-session-recording/create-storage-bucket-test.js +++ b/ui/admin/tests/acceptance/targets/enable-session-recording/create-storage-bucket-test.js @@ -24,7 +24,8 @@ module( const SAVE_BTN_SELECTOR = '[type="submit"]'; const CANCEL_BTN_SELECTOR = '.rose-form-actions [type="button"]'; const NAME_FIELD_SELECTOR = '[name="name"]'; - const ALERT_TEXT_SELECTOR = '[role="alert"] div'; + const ALERT_TEXT_SELECTOR = + '[data-test-toast-notification] .hds-alert__description'; const FIELD_ERROR_TEXT_SELECTOR = '.hds-form-error__message'; const NAME_FIELD_TEXT = 'random string'; const BUCKET_NAME_FIELD_SELECTOR = '[name="bucket_name"]'; diff --git a/ui/admin/tests/acceptance/targets/host-sources-test.js b/ui/admin/tests/acceptance/targets/host-sources-test.js index 8e15af113..ada073880 100644 --- a/ui/admin/tests/acceptance/targets/host-sources-test.js +++ b/ui/admin/tests/acceptance/targets/host-sources-test.js @@ -167,7 +167,9 @@ module('Acceptance | targets | host-sources', function (hooks) { await click('tbody tr .hds-dropdown-list-item button'); assert.dom('tbody tr').exists({ count: targetHostSetCount }); - assert.dom('[role="alert"] div').hasText('The request was invalid.'); + assert + .dom('[data-test-toast-notification] .hds-alert__description') + .hasText('The request was invalid.'); }); test('select and save host sets to add', async function (assert) { @@ -251,7 +253,9 @@ module('Acceptance | targets | host-sources', function (hooks) { assert.strictEqual(currentURL(), urls.targetAddHostSources); assert.strictEqual(getTargetHostSetCount(), targetHostSetCount); - assert.dom('[role="alert"] div').hasText('The request was invalid.'); + assert + .dom('[data-test-toast-notification] .hds-alert__description') + .hasText('The request was invalid.'); }); test('saving host source with address brings up confirmation modal and removes address', async function (assert) { diff --git a/ui/admin/tests/acceptance/targets/injected-application-credential-sources-test.js b/ui/admin/tests/acceptance/targets/injected-application-credential-sources-test.js index 508d79a08..219832047 100644 --- a/ui/admin/tests/acceptance/targets/injected-application-credential-sources-test.js +++ b/ui/admin/tests/acceptance/targets/injected-application-credential-sources-test.js @@ -319,7 +319,9 @@ module( await click('tbody tr:last-child label'); await click('tbody tr:first-child label'); await click('form [type="submit"]'); - assert.dom('[role="alert"]').isVisible(); + assert + .dom('[data-test-toast-notification] .hds-alert__description') + .isVisible(); }); test('can remove a vault type credential library', async function (assert) { @@ -392,7 +394,9 @@ module( assert.strictEqual(findAll('tbody tr').length, count); await click('.hds-dropdown-toggle-icon'); await click('tbody tr .hds-dropdown-list-item button'); - assert.dom('[role="alert"]').isVisible(); + assert + .dom('[data-test-toast-notification] .hds-alert__description') + .isVisible(); }); test('removing a target credential which errors displays error messages', async function (assert) { @@ -418,7 +422,9 @@ module( assert.strictEqual(findAll('tbody tr').length, count); await click('.hds-dropdown-toggle-icon'); await click('tbody tr .hds-dropdown-list-item button'); - assert.dom('[role="alert"]').isVisible(); + assert + .dom('[data-test-toast-notification] .hds-alert__description') + .isVisible(); }); }, ); diff --git a/ui/admin/tests/acceptance/targets/update-test.js b/ui/admin/tests/acceptance/targets/update-test.js index fec64216c..d66dc2e19 100644 --- a/ui/admin/tests/acceptance/targets/update-test.js +++ b/ui/admin/tests/acceptance/targets/update-test.js @@ -120,7 +120,9 @@ module('Acceptance | targets | update', function (hooks) { await fillIn('[name="name"]', 'random string'); await click('[type="submit"]'); - assert.dom('[role="alert"] div').hasText('The request was invalid.'); + assert + .dom('[data-test-toast-notification] .hds-alert__description') + .hasText('The request was invalid.'); assert.dom('.hds-form-error__message').hasText('Name is required.'); }); diff --git a/ui/admin/tests/acceptance/users/accounts-test.js b/ui/admin/tests/acceptance/users/accounts-test.js index 3c9944fb6..75e1f5596 100644 --- a/ui/admin/tests/acceptance/users/accounts-test.js +++ b/ui/admin/tests/acceptance/users/accounts-test.js @@ -29,7 +29,8 @@ module('Acceptance | users | accounts', function (hooks) { '[data-test-manage-user-dropdown] ul li:first-child a'; const MANAGE_DROPDOWN_SELECTOR = '[data-test-manage-user-dropdown] button:first-child'; - const ERROR_MSG_SELECTOR = '[role="alert"]'; + const ERROR_MSG_SELECTOR = + '[data-test-toast-notification] .hds-alert__description'; const TABLE_ROWS_SELECTOR = 'tbody tr'; const CHECKBOX_SELECTOR = 'tbody label'; const SUBMIT_BTN_SELECTOR = 'form [type="submit"]'; diff --git a/ui/admin/tests/acceptance/users/create-test.js b/ui/admin/tests/acceptance/users/create-test.js index d5edfe802..0d34306ec 100644 --- a/ui/admin/tests/acceptance/users/create-test.js +++ b/ui/admin/tests/acceptance/users/create-test.js @@ -139,7 +139,9 @@ module('Acceptance | users | create', function (hooks) { await click('[type="submit"]'); assert.strictEqual(getUsersCount(), usersCount); - assert.dom('.rose-notification-body').hasText('The request was invalid.'); + assert + .dom('[data-test-toast-notification] .hds-alert__description') + .hasText('The request was invalid.'); assert.dom('[data-test-error-message-name]').hasText('Name is required.'); }); diff --git a/ui/admin/tests/acceptance/users/delete-test.js b/ui/admin/tests/acceptance/users/delete-test.js index ec1b07729..24c647fb0 100644 --- a/ui/admin/tests/acceptance/users/delete-test.js +++ b/ui/admin/tests/acceptance/users/delete-test.js @@ -88,7 +88,9 @@ module('Acceptance | users | delete', function (hooks) { await click(DELETE_ACTION_SELECTOR); await click('.rose-dialog .rose-button-primary'); - assert.dom('.rose-notification-body').hasText('Deleted successfully.'); + assert + .dom('[data-test-toast-notification] .hds-alert__description') + .hasText('Deleted successfully.'); assert.strictEqual(this.server.db.users.length, usersCount - 1); assert.strictEqual(currentURL(), urls.users); }); @@ -125,6 +127,8 @@ module('Acceptance | users | delete', function (hooks) { await click(`[href="${urls.user}"]`); await click(MANAGE_DROPDOWN_SELECTOR); await click(DELETE_ACTION_SELECTOR); - assert.dom('.rose-notification-body').hasText('Oops.'); + assert + .dom('[data-test-toast-notification] .hds-alert__description') + .hasText('Oops.'); }); }); diff --git a/ui/admin/tests/acceptance/users/update-test.js b/ui/admin/tests/acceptance/users/update-test.js index 92a28cd1e..6fea6b3e2 100644 --- a/ui/admin/tests/acceptance/users/update-test.js +++ b/ui/admin/tests/acceptance/users/update-test.js @@ -116,7 +116,9 @@ module('Acceptance | users | update', function (hooks) { await fillIn('[name="name"]', 'User name'); await click('[type="submit"]'); - assert.dom('.rose-notification-body').hasText('The request was invalid.'); + assert + .dom('[data-test-toast-notification] .hds-alert__description') + .hasText('The request was invalid.'); assert.dom('[data-test-error-message-name]').hasText('Name is required.'); }); diff --git a/ui/admin/tests/acceptance/workers/create-test.js b/ui/admin/tests/acceptance/workers/create-test.js index 833016957..365d5f4d9 100644 --- a/ui/admin/tests/acceptance/workers/create-test.js +++ b/ui/admin/tests/acceptance/workers/create-test.js @@ -4,14 +4,7 @@ */ import { module, test } from 'qunit'; -import { - visit, - fillIn, - click, - find, - findAll, - currentURL, -} from '@ember/test-helpers'; +import { visit, fillIn, click, findAll, currentURL } from '@ember/test-helpers'; import { setupApplicationTest } from 'ember-qunit'; import setupMirage from 'ember-cli-mirage/test-support/setup-mirage'; import { Response } from 'miragejs'; @@ -137,11 +130,9 @@ module('Acceptance | workers | create', function (hooks) { await visit(newWorkerURL); await fillIn('[name="worker_auth_registration_request"]', 'token'); await click('[type="submit"]'); - assert.strictEqual( - find('.rose-notification-body').textContent.trim(), - 'rpc error: code = Unknown', - 'Displays primary error message.', - ); + assert + .dom('[data-test-toast-notification] .hds-alert__description') + .hasText('rpc error: code = Unknown'); }); test('users cannot directly navigate to new worker route without proper authorization', async function (assert) { diff --git a/ui/admin/tests/acceptance/workers/delete-test.js b/ui/admin/tests/acceptance/workers/delete-test.js index 4365c7f10..c040c0f41 100644 --- a/ui/admin/tests/acceptance/workers/delete-test.js +++ b/ui/admin/tests/acceptance/workers/delete-test.js @@ -4,7 +4,7 @@ */ import { module, test } from 'qunit'; -import { visit, find, click } from '@ember/test-helpers'; +import { visit, click } from '@ember/test-helpers'; import { setupApplicationTest } from 'ember-qunit'; import setupMirage from 'ember-cli-mirage/test-support/setup-mirage'; import { Response } from 'miragejs'; @@ -110,6 +110,8 @@ module('Acceptance | workers | delete', function (hooks) { await visit(urls.worker); await click(MANAGE_DROPDOWN_TOGGLE); await click(REMOVE_WORKER_BUTTON); - assert.ok(find('[role="alert"]').textContent.trim(), 'Oops.'); + assert + .dom('[data-test-toast-notification] .hds-alert__description') + .hasText('Oops.'); }); }); diff --git a/ui/admin/tests/acceptance/workers/update-test.js b/ui/admin/tests/acceptance/workers/update-test.js index 53474862b..23bbe435e 100644 --- a/ui/admin/tests/acceptance/workers/update-test.js +++ b/ui/admin/tests/acceptance/workers/update-test.js @@ -86,11 +86,9 @@ module('Acceptance | workers | update', function (hooks) { await click('.rose-form-actions [type="button"]', 'Click edit mode'); await fillIn('[name="name"]', 'Worker Name'); await click('[type="submit"]'); - assert.strictEqual( - find('.rose-notification-body').textContent.trim(), - 'The request was invalid.', - 'Displays primary error message.', - ); + assert + .dom('[data-test-toast-notification] .hds-alert__description') + .hasText('The request was invalid.'); assert.strictEqual( find('[data-test-error-message-name]').textContent.trim(), 'Name is required', diff --git a/ui/admin/tests/helpers/selectors.js b/ui/admin/tests/helpers/selectors.js index 1b42d51b5..65423c6bf 100644 --- a/ui/admin/tests/helpers/selectors.js +++ b/ui/admin/tests/helpers/selectors.js @@ -26,6 +26,8 @@ export const HREF = (url) => `[href="${url}"]`; export const SIDEBAR_NAV_LINK = (url) => `[title="General"] a[href="${url}"]`; -export const ALERT_TOAST = '[role="alert"]'; -export const ALERT_TOAST_BODY = '.rose-notification-body'; -export const ALERT_TOAST_DISMISS = '.rose-notification-dismiss'; +export const ALERT_TOAST = '[data-test-toast-notification]'; +export const ALERT_TOAST_BODY = + '[data-test-toast-notification] .hds-alert__description'; +export const ALERT_TOAST_DISMISS = + '[data-test-toast-notification] .hds-dismiss-button'; diff --git a/ui/desktop/.stylelintrc.js b/ui/desktop/.stylelintrc.js index d48a7acc8..486166883 100644 --- a/ui/desktop/.stylelintrc.js +++ b/ui/desktop/.stylelintrc.js @@ -17,7 +17,7 @@ module.exports = { // This is often limited by the DOM and we want to order our declarations by our own standard 'no-descending-specificity': null, // As a team we want to stick to using kebab-case as our keyframe name pattern, but there are some exceptions - // in which we use keyframes from addons like ember-botify, HDS or other in which they use other naming style. + // in which we use keyframes from addons like ember-notify, HDS or other in which they use other naming style. // This regex checks for these patterns and won't fail. 'keyframes-name-pattern': [ '(hds-)|(ember-notify-)|(^gradient)|(^fadeBackground)', diff --git a/ui/desktop/app/components/dialog-detail/index.hbs b/ui/desktop/app/components/dialog-detail/index.hbs deleted file mode 100644 index 7ac9eb8fe..000000000 --- a/ui/desktop/app/components/dialog-detail/index.hbs +++ /dev/null @@ -1,27 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: BUSL-1.1 -}} - - - {{#if @notification}} - - {{/if}} - - - {{yield to='body'}} - - - {{yield to='footer'}} - - \ No newline at end of file diff --git a/ui/desktop/app/styles/_notify.scss b/ui/desktop/app/styles/_notify.scss index 82415209e..87984220b 100644 --- a/ui/desktop/app/styles/_notify.scss +++ b/ui/desktop/app/styles/_notify.scss @@ -6,62 +6,57 @@ // This file is essentially a rip of the default ember notify styles with some minor tweaks for positioning. // sass-lint:disable no-vendor-prefixes -@-webkit-keyframes 'ember-notify-show' { +@-webkit-keyframes ember-notify-show { from { - left: -310px; + right: -310px; } to { - left: 0; + right: 0; } } -@keyframes 'ember-notify-show' { +@keyframes ember-notify-show { from { - left: -310px; + right: -310px; } to { - left: 0; + right: 0; } } -@-webkit-keyframes 'ember-notify-hide' { +@-webkit-keyframes ember-notify-hide { from { - left: 0; + right: 0; } to { - left: -310px; + right: -310px; } } -@keyframes 'ember-notify-hide' { +@keyframes ember-notify-hide { from { - left: 0; + right: 0; } to { - left: -310px; + right: -310px; } } .ember-notify-cn { bottom: 0; - left: 0; - max-width: 300px; + right: 0; position: fixed; z-index: 5000; + margin-bottom: 16px; } .ember-notify { box-sizing: border-box; display: block; - margin: 10px; + margin: 16px 24px; position: relative; - width: 300px; - - .close { - cursor: pointer; - float: right; - } + width: 360px; } .ember-notify-show { @@ -89,14 +84,7 @@ } @media only screen and (width <= 680px) { - .ember-notify-cn { - box-sizing: border-box; - padding-left: 20px; - width: 100%; - } - .ember-notify { - float: right; width: 100%; } } diff --git a/ui/desktop/app/styles/app.scss b/ui/desktop/app/styles/app.scss index 72d182984..3064fcb08 100644 --- a/ui/desktop/app/styles/app.scss +++ b/ui/desktop/app/styles/app.scss @@ -278,46 +278,6 @@ text-align: center; } -// Dialog Detail -// These styles are a Work In Progress. Expect changes (lots of them) -.rose-dialog, -.dialog-detail { - z-index: 6000; -} - -.dialog-detail { - .rose-notification { - border-left: 0; - border-right: 0; - border-top: 0; - box-shadow: none; - margin-bottom: 0; - } - - .rose-dialog-body { - > :first-child { - margin-top: 0; - padding-top: 0; - } - } - - .rose-dialog-footer { - align-items: center; - - div:nth-child(1) { - display: flex; - justify-content: flex-start; - width: 50%; - } - - div:nth-child(2) { - display: flex; - justify-content: flex-end; - width: 50%; - } - } -} - // Overlay above everything - including notifications .rose-dialog-modal-overlay { z-index: 5500; diff --git a/ui/desktop/app/templates/application.hbs b/ui/desktop/app/templates/application.hbs index ba816f415..c1e9d3c34 100644 --- a/ui/desktop/app/templates/application.hbs +++ b/ui/desktop/app/templates/application.hbs @@ -67,21 +67,18 @@ {{#if this.flashMessages.queue}} -
+
{{#each this.flashMessages.queue as |flash|}} -
- + - {{flash.message}} - + {{t (concat 'states.' flash.notificationType)}} + {{flash.message}} +
{{/each}}
diff --git a/ui/desktop/tests/acceptance/authentication-test.js b/ui/desktop/tests/acceptance/authentication-test.js index f7cf69da7..e84dc69ca 100644 --- a/ui/desktop/tests/acceptance/authentication-test.js +++ b/ui/desktop/tests/acceptance/authentication-test.js @@ -160,7 +160,9 @@ module('Acceptance | authentication', function (hooks) { assert.notOk(currentSession().isAuthenticated); await fillIn('[name="identification"]', 'error'); await click('[type="submit"]'); - assert.ok(find('.rose-notification.is-error')); + assert + .dom('[data-test-toast-notification].hds-alert--color-critical') + .isVisible(); assert.notOk(currentSession().isAuthenticated); }); diff --git a/ui/desktop/tests/acceptance/cluster-url-test.js b/ui/desktop/tests/acceptance/cluster-url-test.js index ab45fd982..b5d6be601 100644 --- a/ui/desktop/tests/acceptance/cluster-url-test.js +++ b/ui/desktop/tests/acceptance/cluster-url-test.js @@ -156,7 +156,9 @@ module('Acceptance | clusterUrl', function (hooks) { await visit(urls.clusterUrl); await fillIn('[name="host"]', currentOrigin); await click('[type="submit"]'); - assert.ok(find('.rose-notification.is-error')); + assert + .dom('[data-test-toast-notification].hds-alert--color-critical') + .isVisible(); }); test('clusterUrl set automatically when autoOrigin is true', async function (assert) { diff --git a/ui/desktop/tests/acceptance/projects/sessions/index-test.js b/ui/desktop/tests/acceptance/projects/sessions/index-test.js index 1586c805e..719a31f1d 100644 --- a/ui/desktop/tests/acceptance/projects/sessions/index-test.js +++ b/ui/desktop/tests/acceptance/projects/sessions/index-test.js @@ -333,7 +333,9 @@ module('Acceptance | projects | sessions | index', function (hooks) { await click(`[href="${urls.sessions}"]`); await click('tbody tr:first-child td:last-child button'); - assert.dom('[role="alert"].is-success').isVisible(); + assert + .dom('[data-test-toast-notification].hds-alert--color-success') + .isVisible(); }); test('cancelling a session keeps you on the sessions list screen', async function (assert) { @@ -353,7 +355,9 @@ module('Acceptance | projects | sessions | index', function (hooks) { await click(`[href="${urls.sessions}"]`); await click('tbody tr:first-child td:last-child button'); - assert.dom('[role="alert"].is-error').isVisible(); + assert + .dom('[data-test-toast-notification].hds-alert--color-critical') + .isVisible(); }); test('cancelling a session with ipc error shows notification', async function (assert) { @@ -363,7 +367,9 @@ module('Acceptance | projects | sessions | index', function (hooks) { await click(`[href="${urls.sessions}"]`); await click('tbody tr:first-child td:last-child button'); - assert.dom('[role="alert"].is-error').isVisible(); + assert + .dom('[data-test-toast-notification].hds-alert--color-critical') + .isVisible(); }); test('user can change org scope and only sessions for that org will be displayed', async function (assert) { diff --git a/ui/desktop/tests/acceptance/projects/sessions/session-test.js b/ui/desktop/tests/acceptance/projects/sessions/session-test.js index 6b953dd9d..c2d48c5f8 100644 --- a/ui/desktop/tests/acceptance/projects/sessions/session-test.js +++ b/ui/desktop/tests/acceptance/projects/sessions/session-test.js @@ -217,7 +217,9 @@ module('Acceptance | projects | sessions | session', function (hooks) { await visit(urls.session); await click('[data-test-session-detail-cancel-button]'); - assert.dom('[role="alert"].is-success').isVisible(); + assert + .dom('[data-test-toast-notification].hds-alert--color-success') + .isVisible(); }); test('cancelling a session takes you to the targets list screen', async function (assert) { @@ -236,7 +238,9 @@ module('Acceptance | projects | sessions | session', function (hooks) { await visit(urls.session); await click('[data-test-session-detail-cancel-button]'); - assert.dom('[role="alert"].is-error').isVisible(); + assert + .dom('[data-test-toast-notification].hds-alert--color-critical') + .isVisible(); }); test('cancelling a session with ipc error shows notification', async function (assert) { @@ -246,6 +250,8 @@ module('Acceptance | projects | sessions | session', function (hooks) { await visit(urls.session); await click('[data-test-session-detail-cancel-button]'); - assert.dom('[role="alert"].is-error').isVisible(); + assert + .dom('[data-test-toast-notification].hds-alert--color-critical') + .isVisible(); }); }); diff --git a/ui/desktop/tests/integration/components/dialog-detail-test.js b/ui/desktop/tests/integration/components/dialog-detail-test.js deleted file mode 100644 index 6c57f09c9..000000000 --- a/ui/desktop/tests/integration/components/dialog-detail-test.js +++ /dev/null @@ -1,36 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: BUSL-1.1 - */ - -import { module, test } from 'qunit'; -import { setupRenderingTest } from 'ember-qunit'; -import { render, find } from '@ember/test-helpers'; -import { hbs } from 'ember-cli-htmlbars'; - -module('Integration | Component | dialog-detail', function (hooks) { - setupRenderingTest(hooks); - - test('it renders', async function (assert) { - await render(hbs``); - assert.ok(find('.dialog-detail')); - }); - - test('it renders with content', async function (assert) { - this.set('value', 'Test'); - await render(hbs` - - - -

{{this.value}}

- - - - `); - - assert.ok(find('.dialog-detail')); - assert.ok(find('.rose-dialog-header')); - assert.ok(find('.rose-dialog-body')); - assert.ok(find('.rose-dialog-footer')); - }); -});