[ICU-15647] Replace Rose::Dialog with Hds::Modal in admin ui only

addons/rose/app/styles/rose/components/_index.scss

@@ -3,19 +3,21 @@
  * SPDX-License-Identifier: BUSL-1.1
  */
 
+// This list is sorted in ascending order to improve readability
+
 @import 'button';
+@import 'card';
+@import 'cards';
+@import 'code-editor';
 @import 'dialog';
 @import 'dropdown';
 @import 'form';
 @import 'frame';
 @import 'header';
-@import 'layout';
 @import 'icon';
+@import 'layout';
 @import 'list';
-@import 'card';
-@import 'cards';
-@import 'page-header';
+@import 'metadata-list';
 @import 'nav';
+@import 'page-header';
 @import 'toolbar';
-@import 'code-editor';
-@import 'metadata-list';

ui/admin/app/templates/application.hbs

@@ -132,33 +132,36 @@
 {{/if}}
 
 <PendingConfirmations as |confirmation accept deny|>
-  <Rose::Dialog
-    @heading={{if
-      confirmation.options.title
-      (t confirmation.options.title)
-      (t 'actions.confirm')
-    }}
-    @dismissButtonText={{t 'actions.cancel'}}
-    @icon='flight-icons/svg/alert-triangle-16'
-    @style='warning'
-    @modal={{true}}
-    @dismiss={{deny}}
-    as |dialog|
-  >
-    <dialog.body>
-      <p>{{confirmation.text}}</p>
-    </dialog.body>
-    <dialog.footer>
-      <Rose::Button @style='primary' {{on 'click' accept}}>
-        {{if
-          confirmation.options.confirm
-          (t confirmation.options.confirm)
-          (t 'actions.ok')
-        }}
-      </Rose::Button>
-      <Rose::Button @style='secondary' {{on 'click' deny}}>
-        {{t 'actions.cancel'}}
-      </Rose::Button>
-    </dialog.footer>
-  </Rose::Dialog>
+  <Hds::Modal @color='warning' as |M|>
+    <M.Header @icon='alert-triangle' @onDismiss={{deny}}>
+      {{if
+        confirmation.options.title
+        (t confirmation.options.title)
+        (t 'actions.confirm')
+      }}
+    </M.Header>
+    <M.Body>
+      <Hds::Text::Body @tag='p'>
+        {{confirmation.text}}
+      </Hds::Text::Body>
+    </M.Body>
+    <M.Footer>
+      <Hds::ButtonSet>
+        <Hds::Button
+          @text={{if
+            confirmation.options.confirm
+            (t confirmation.options.confirm)
+            (t 'actions.ok')
+          }}
+          @color='primary'
+          {{on 'click' accept}}
+        />
+        <Hds::Button
+          @text={{t 'actions.cancel'}}
+          @color='secondary'
+          {{on 'click' deny}}
+        />
+      </Hds::ButtonSet>
+    </M.Footer>
+  </Hds::Modal>
 </PendingConfirmations>

ui/admin/tests/acceptance/auth-methods/delete-test.js

@@ -12,6 +12,7 @@ import a11yAudit from 'ember-a11y-testing/test-support/audit';
 import { Response } from 'miragejs';
 import { authenticateSession } from 'ember-simple-auth/test-support';
 import { TYPE_AUTH_METHOD_LDAP } from 'api/models/auth-method';
+import * as commonSelectors from 'admin/tests/helpers/selectors';
 
 module('Acceptance | auth-methods | delete', function (hooks) {
   setupApplicationTest(hooks);
@@ -21,8 +22,6 @@ module('Acceptance | auth-methods | delete', function (hooks) {
   let featuresService;
   let getAuthMethodCount;
 
-  const DIALOG_DELETE_BTN_SELECTOR = '.rose-dialog .rose-button-primary';
-  const DIALOG_CANCEL_BTN_SELECTOR = '.rose-dialog .rose-button-secondary';
   const ERROR_MSG_SELECTOR =
     '[data-test-toast-notification] .hds-alert__description';
 
@@ -176,7 +175,7 @@ module('Acceptance | auth-methods | delete', function (hooks) {
     await click(`[href="${urls.authMethod}"]`);
     await click(MANAGE_DROPDOWN_SELECTOR);
     await click(DELETE_ACTION_SELECTOR);
-    await click(DIALOG_DELETE_BTN_SELECTOR);
+    await click(commonSelectors.MODAL_WARNING_CONFIRM_BTN);
 
     assert.strictEqual(currentURL(), urls.authMethods);
     assert.strictEqual(getAuthMethodCount(), authMethodCount - 1);
@@ -192,7 +191,7 @@ module('Acceptance | auth-methods | delete', function (hooks) {
     await click(`[href="${urls.ldapAuthMethod}"]`);
     await click(MANAGE_DROPDOWN_SELECTOR);
     await click(DELETE_ACTION_SELECTOR);
-    await click(DIALOG_DELETE_BTN_SELECTOR);
+    await click(commonSelectors.MODAL_WARNING_CONFIRM_BTN);
 
     assert.strictEqual(currentURL(), urls.authMethods);
     assert.strictEqual(getAuthMethodCount(), authMethodCount - 1);
@@ -207,7 +206,7 @@ module('Acceptance | auth-methods | delete', function (hooks) {
     await click(`[href="${urls.authMethod}"]`);
     await click(MANAGE_DROPDOWN_SELECTOR);
     await click(DELETE_ACTION_SELECTOR);
-    await click(DIALOG_CANCEL_BTN_SELECTOR);
+    await click(commonSelectors.MODAL_WARNING_CANCEL_BTN);
 
     assert.strictEqual(currentURL(), urls.authMethod);
     assert.strictEqual(getAuthMethodCount(), authMethodCount);
@@ -223,7 +222,7 @@ module('Acceptance | auth-methods | delete', function (hooks) {
     await click(`[href="${urls.ldapAuthMethod}"]`);
     await click(MANAGE_DROPDOWN_SELECTOR);
     await click(DELETE_ACTION_SELECTOR);
-    await click(DIALOG_CANCEL_BTN_SELECTOR);
+    await click(commonSelectors.MODAL_WARNING_CANCEL_BTN);
 
     assert.strictEqual(currentURL(), urls.ldapAuthMethod);
     assert.strictEqual(getAuthMethodCount(), authMethodCount);

ui/admin/tests/acceptance/credential-library/update-test.js

@@ -184,9 +184,9 @@ module('Acceptance | credential-libraries | update', function (hooks) {
     try {
       await visit(urls.credentialLibraries);
     } catch (e) {
-      assert.dom(commonSelectors.DIALOG_UNSAVED_CHANGES).isVisible();
+      assert.dom(commonSelectors.MODAL_WARNING).isVisible();
 
-      await click(commonSelectors.DIALOG_UNSAVED_CHANGES_DISCARD);
+      await click(commonSelectors.MODAL_WARNING_CONFIRM_BTN);
 
       assert.strictEqual(currentURL(), urls.credentialLibraries);
       assert.notEqual(
@@ -215,9 +215,9 @@ module('Acceptance | credential-libraries | update', function (hooks) {
     try {
       await visit(urls.credentialLibraries);
     } catch {
-      assert.dom(commonSelectors.DIALOG_UNSAVED_CHANGES).isVisible();
+      assert.dom(commonSelectors.MODAL_WARNING).isVisible();
 
-      await click(commonSelectors.DIALOG_UNSAVED_CHANGES_CANCEL);
+      await click(commonSelectors.MODAL_WARNING_CANCEL_BTN);
 
       assert.strictEqual(currentURL(), urls.credentialLibrary);
       assert.notEqual(

ui/admin/tests/acceptance/credential-store/credentials/delete-test.js

@@ -9,6 +9,7 @@ import setupMirage from 'ember-cli-mirage/test-support/setup-mirage';
 import { authenticateSession } from 'ember-simple-auth/test-support';
 import { click, currentURL, visit } from '@ember/test-helpers';
 import { Response } from 'miragejs';
+import * as commonSelectors from 'admin/tests/helpers/selectors';
 
 module(
   'Acceptance | credential-stores | credentials | delete',
@@ -182,7 +183,7 @@ module(
       await visit(urls.usernamePasswordCredential);
       await click(MANAGE_DROPDOWN_SELECTOR);
       await click(DELETE_ACTION_SELECTOR);
-      await click('.rose-dialog footer .rose-button-primary');
+      await click(commonSelectors.MODAL_WARNING_CONFIRM_BTN);
       assert.strictEqual(currentURL(), urls.credentials);
       assert.strictEqual(
         getUsernamePasswordCredentialCount(),
@@ -198,7 +199,7 @@ module(
       await visit(urls.usernameKeyPairCredential);
       await click(MANAGE_DROPDOWN_SELECTOR);
       await click(DELETE_ACTION_SELECTOR);
-      await click('.rose-dialog footer .rose-button-primary');
+      await click(commonSelectors.MODAL_WARNING_CONFIRM_BTN);
       assert.strictEqual(currentURL(), urls.credentials);
       assert.strictEqual(
         getUsernameKeyPairCredentialCount(),
@@ -213,7 +214,7 @@ module(
       await visit(urls.jsonCredential);
       await click(MANAGE_DROPDOWN_SELECTOR);
       await click(DELETE_ACTION_SELECTOR);
-      await click('.rose-dialog footer .rose-button-primary');
+      await click(commonSelectors.MODAL_WARNING_CONFIRM_BTN);
       assert.strictEqual(currentURL(), urls.credentials);
       assert.strictEqual(getJSONCredentialCount(), jsonCredentialCount - 1);
     });
@@ -226,7 +227,7 @@ module(
       await visit(urls.usernamePasswordCredential);
       await click(MANAGE_DROPDOWN_SELECTOR);
       await click(DELETE_ACTION_SELECTOR);
-      await click('.rose-dialog footer .rose-button-secondary');
+      await click(commonSelectors.MODAL_WARNING_CANCEL_BTN);
       assert.strictEqual(currentURL(), urls.usernamePasswordCredential);
       assert.strictEqual(
         getUsernamePasswordCredentialCount(),
@@ -242,7 +243,7 @@ module(
       await visit(urls.usernameKeyPairCredential);
       await click(MANAGE_DROPDOWN_SELECTOR);
       await click(DELETE_ACTION_SELECTOR);
-      await click('.rose-dialog footer .rose-button-secondary');
+      await click(commonSelectors.MODAL_WARNING_CANCEL_BTN);
       assert.strictEqual(currentURL(), urls.usernameKeyPairCredential);
       assert.strictEqual(
         getUsernameKeyPairCredentialCount(),
@@ -257,7 +258,7 @@ module(
       await visit(urls.jsonCredential);
       await click(MANAGE_DROPDOWN_SELECTOR);
       await click(DELETE_ACTION_SELECTOR);
-      await click('.rose-dialog footer .rose-button-secondary');
+      await click(commonSelectors.MODAL_WARNING_CANCEL_BTN);
       assert.strictEqual(currentURL(), urls.jsonCredential);
       assert.strictEqual(getJSONCredentialCount(), jsonCredentialCount);
     });

ui/admin/tests/acceptance/credential-store/credentials/update-test.js

@@ -16,6 +16,7 @@ import { setupApplicationTest } from 'admin/tests/helpers';
 import setupMirage from 'ember-cli-mirage/test-support/setup-mirage';
 import { Response } from 'miragejs';
 import { authenticateSession } from 'ember-simple-auth/test-support';
+import * as commonSelectors from 'admin/tests/helpers/selectors';
 
 module(
   'Acceptance | credential-stores | credentials | update',
@@ -322,11 +323,8 @@ module(
       try {
         await visit(urls.credentials);
       } catch (e) {
-        assert.dom('.rose-dialog').isVisible();
-        await click(
-          '.rose-dialog-footer button:first-of-type',
-          'Click Discard',
-        );
+        assert.dom(commonSelectors.MODAL_WARNING).isVisible();
+        await click(commonSelectors.MODAL_WARNING_CONFIRM_BTN, 'Click Discard');
         assert.strictEqual(currentURL(), urls.credentials);
         assert.notEqual(
           this.server.schema.credentials.where({ type: 'username_password' })
@@ -349,11 +347,8 @@ module(
       try {
         await visit(urls.credentials);
       } catch (e) {
-        assert.dom('.rose-dialog').isVisible();
-        await click(
-          '.rose-dialog-footer button:first-of-type',
-          'Click Discard',
-        );
+        assert.dom(commonSelectors.MODAL_WARNING).isVisible();
+        await click(commonSelectors.MODAL_WARNING_CONFIRM_BTN, 'Click Discard');
         assert.strictEqual(currentURL(), urls.credentials);
         assert.notEqual(
           this.server.schema.credentials.where({ type: 'ssh_private_key' })
@@ -376,11 +371,8 @@ module(
       try {
         await visit(urls.credentials);
       } catch (e) {
-        assert.dom('.rose-dialog').isVisible();
-        await click(
-          '.rose-dialog-footer button:first-of-type',
-          'Click Discard',
-        );
+        assert.dom(commonSelectors.MODAL_WARNING).isVisible();
+        await click(commonSelectors.MODAL_WARNING_CONFIRM_BTN, 'Click Discard');
         assert.strictEqual(currentURL(), urls.credentials);
         assert.notEqual(
           this.server.schema.credentials.where({ type: 'json' }).models[0].name,
@@ -403,8 +395,8 @@ module(
       try {
         await visit(urls.credentials);
       } catch (e) {
-        assert.dom('.rose-dialog').isVisible();
-        await click('.rose-dialog-footer button:last-child', 'Click Cancel');
+        assert.dom(commonSelectors.MODAL_WARNING).isVisible();
+        await click(commonSelectors.MODAL_WARNING_CANCEL_BTN, 'Click Cancel');
         assert.strictEqual(currentURL(), urls.usernamePasswordCredential);
         assert.strictEqual(find('[name="name"]').value, mockInput);
         assert.strictEqual(
@@ -429,8 +421,8 @@ module(
       try {
         await visit(urls.credentials);
       } catch (e) {
-        assert.dom('.rose-dialog').isVisible();
-        await click('.rose-dialog-footer button:last-child', 'Click Cancel');
+        assert.dom(commonSelectors.MODAL_WARNING).isVisible();
+        await click(commonSelectors.MODAL_WARNING_CANCEL_BTN, 'Click Cancel');
         assert.strictEqual(currentURL(), urls.usernameKeyPairCredential);
         assert.strictEqual(find('[name="name"]').value, mockInput);
         assert.strictEqual(
@@ -455,8 +447,8 @@ module(
       try {
         await visit(urls.credentials);
       } catch (e) {
-        assert.dom('.rose-dialog').isVisible();
-        await click('.rose-dialog-footer button:last-child', 'Click Cancel');
+        assert.dom(commonSelectors.MODAL_WARNING).isVisible();
+        await click(commonSelectors.MODAL_WARNING_CANCEL_BTN, 'Click Cancel');
         assert.strictEqual(currentURL(), urls.jsonCredential);
         assert.strictEqual(find('[name="name"]').value, mockInput);
         assert.strictEqual(

ui/admin/tests/acceptance/credential-store/update-test.js

@@ -220,8 +220,8 @@ module('Acceptance | credential-stores | update', function (hooks) {
     try {
       await visit(urls.credentialStores);
     } catch (e) {
-      assert.ok(find('.rose-dialog'));
-      await click('.rose-dialog-footer button:first-child', 'Click Discard');
+      assert.ok(find(commonSelectors.MODAL_WARNING));
+      await click(commonSelectors.MODAL_WARNING_CONFIRM_BTN, 'Click Discard');
       assert.strictEqual(currentURL(), urls.credentialStores);
       assert.notEqual(
         this.server.schema.credentialStores.where({ type: 'static' }).models[0]
@@ -245,8 +245,8 @@ module('Acceptance | credential-stores | update', function (hooks) {
     try {
       await visit(urls.credentialStores);
     } catch (e) {
-      assert.ok(find('.rose-dialog'));
-      await click('.rose-dialog-footer button:first-child', 'Click Discard');
+      assert.ok(find(commonSelectors.MODAL_WARNING));
+      await click(commonSelectors.MODAL_WARNING_CONFIRM_BTN, 'Click Discard');
       assert.strictEqual(currentURL(), urls.credentialStores);
       assert.notEqual(
         this.server.schema.credentialStores.where({ type: 'vault' }).models[0]
@@ -269,8 +269,8 @@ module('Acceptance | credential-stores | update', function (hooks) {
     try {
       await visit(urls.credentialStores);
     } catch (e) {
-      assert.ok(find('.rose-dialog'));
-      await click('.rose-dialog-footer button:last-child');
+      assert.ok(find(commonSelectors.MODAL_WARNING));
+      await click(commonSelectors.MODAL_WARNING_CANCEL_BTN);
       assert.strictEqual(currentURL(), urls.staticCredentialStore);
       assert.notEqual(
         this.server.schema.credentialStores.where({ type: 'static' }).models[0]
@@ -293,8 +293,8 @@ module('Acceptance | credential-stores | update', function (hooks) {
     try {
       await visit(urls.credentialStores);
     } catch (e) {
-      assert.ok(find('.rose-dialog'));
-      await click('.rose-dialog-footer button:last-child');
+      assert.ok(find(commonSelectors.MODAL_WARNING));
+      await click(commonSelectors.MODAL_WARNING_CANCEL_BTN);
       assert.strictEqual(currentURL(), urls.vaultCredentialStore);
       assert.notEqual(
         this.server.schema.credentialStores.where({ type: 'vault' }).models[0]

ui/admin/tests/acceptance/host-catalogs/delete-test.js

@@ -10,6 +10,7 @@ import setupMirage from 'ember-cli-mirage/test-support/setup-mirage';
 import { Response } from 'miragejs';
 import { authenticateSession } from 'ember-simple-auth/test-support';
 import { setupIndexedDb } from 'api/test-support/helpers/indexed-db';
+import * as commonSelectors from 'admin/tests/helpers/selectors';
 
 module('Acceptance | host-catalogs | delete', function (hooks) {
   setupApplicationTest(hooks);
@@ -97,7 +98,7 @@ module('Acceptance | host-catalogs | delete', function (hooks) {
     await click(`[href="${urls.hostCatalog}"]`);
     await click(MANAGE_DROPDOWN_SELECTOR);
     await click(DELETE_ACTION_SELECTOR);
-    await click('.rose-dialog .rose-button-primary');
+    await click(commonSelectors.MODAL_WARNING_CONFIRM_BTN);
 
     assert
       .dom('[data-test-toast-notification] .hds-alert__description')
@@ -115,7 +116,7 @@ module('Acceptance | host-catalogs | delete', function (hooks) {
     await click(`[href="${urls.hostCatalog}"]`);
     await click(MANAGE_DROPDOWN_SELECTOR);
     await click(DELETE_ACTION_SELECTOR);
-    await click('.rose-dialog .rose-button-secondary');
+    await click(commonSelectors.MODAL_WARNING_CANCEL_BTN);
 
     assert.strictEqual(getHostCatalogCount(), hostCatalogCount);
     assert.strictEqual(currentURL(), urls.hostCatalog);