From 6e96676beb0b610a5d1f3f3ac53ffa0d9c0f9221 Mon Sep 17 00:00:00 2001
From: lisbet-alvarez <107949262+lisbet-alvarez@users.noreply.github.com>
Date: Mon, 5 Jun 2023 13:38:41 -0700
Subject: [PATCH 1/2] Icu 9412 refactor rose form actions to use hds buttons
 (#1697)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* refactor: 💡 use hds buttons in rose form actions

✅ Closes: ICU-9412

* test: 💍 fix form actions tests

* docs: ✏️ add new hds button attribute to storybook

* refactor: 💡 add ...attributes back in

* Update addons/rose/addon/components/rose/form/actions/edit-toggle/index.hbs

Co-authored-by: Randall Morey <randall@randallmorey.com>

* Update addons/rose/addon/components/rose/form/actions/index.hbs

Co-authored-by: Randall Morey <randall@randallmorey.com>

* refactor: 💡 remove @submitIsFullWidth option & add css instead

---------

Co-authored-by: Randall Morey <randall@randallmorey.com>
---
 .../rose/form/actions/edit-toggle/index.hbs   |  8 +++---
 .../components/rose/form/actions/index.hbs    | 25 +++++++++----------
 .../components/rose/form/actions/index.js     |  2 --
 .../styles/hds/themes/dark-mode/index.scss    |  3 +++
 .../components/rose/form/actions-test.js      | 12 ++++++---
 .../rose/form/actions/edit-toggle-test.js     |  4 +--
 .../app/components/form/onboarding/index.hbs  | 21 ++++++++--------
 ui/admin/app/styles/app.scss                  |  8 +-----
 .../acceptance/onboarding/onboarding-test.js  |  2 +-
 ui/desktop/app/styles/app.scss                |  8 +-----
 10 files changed, 43 insertions(+), 50 deletions(-)

diff --git a/addons/rose/addon/components/rose/form/actions/edit-toggle/index.hbs b/addons/rose/addon/components/rose/form/actions/edit-toggle/index.hbs
index 56b85725c..7ef8dfd21 100644
--- a/addons/rose/addon/components/rose/form/actions/edit-toggle/index.hbs
+++ b/addons/rose/addon/components/rose/form/actions/edit-toggle/index.hbs
@@ -4,7 +4,9 @@
 }}
 
 <div class='rose-form-actions' ...attributes>
-  <Rose::Button @style='secondary' {{on 'click' @enableEdit}}>
-    {{@enableEditText}}
-  </Rose::Button>
+  <Hds::Button
+    @text={{@enableEditText}}
+    @color='secondary'
+    {{on 'click' @enableEdit}}
+  />
 </div>
\ No newline at end of file
diff --git a/addons/rose/addon/components/rose/form/actions/index.hbs b/addons/rose/addon/components/rose/form/actions/index.hbs
index 4aafc52dd..9992c5e1c 100644
--- a/addons/rose/addon/components/rose/form/actions/index.hbs
+++ b/addons/rose/addon/components/rose/form/actions/index.hbs
@@ -3,19 +3,18 @@
   SPDX-License-Identifier: MPL-2.0
 }}
 
-<div class='rose-form-actions' ...attributes>
-  {{! template-lint-disable no-passed-in-event-handlers }}
-  <Rose::Button @disabled={{@submitDisabled}} @submit={{true}} @style='primary'>
-    {{@submitText}}
-  </Rose::Button>
-
+<Hds::ButtonSet class='rose-form-actions' ...attributes>
+  <Hds::Button
+    @text={{@submitText}}
+    disabled={{@submitDisabled}}
+    type='submit'
+  />
   {{#if this.showCancel}}
-    <Rose::Button
-      @disabled={{@cancelDisabled}}
-      @style='secondary'
+    <Hds::Button
+      @text={{@cancelText}}
+      @color='secondary'
+      disabled={{@cancelDisabled}}
       {{on 'click' @cancel}}
-    >
-      {{@cancelText}}
-    </Rose::Button>
+    />
   {{/if}}
-</div>
\ No newline at end of file
+</Hds::ButtonSet>
\ No newline at end of file
diff --git a/addons/rose/addon/components/rose/form/actions/index.js b/addons/rose/addon/components/rose/form/actions/index.js
index 0450d55e7..0f3a663a4 100644
--- a/addons/rose/addon/components/rose/form/actions/index.js
+++ b/addons/rose/addon/components/rose/form/actions/index.js
@@ -4,7 +4,6 @@
  */
 
 import Component from '@glimmer/component';
-import { computed } from '@ember/object';
 
 /**
  * A set of two form action buttons for submit and cancel.
@@ -22,7 +21,6 @@ export default class RoseFormActionsComponent extends Component {
   /**
    * @type {boolean}
    */
-  @computed('args.showCancel')
   get showCancel() {
     return this.args.showCancel ?? true;
   }
diff --git a/addons/rose/addon/styles/hds/themes/dark-mode/index.scss b/addons/rose/addon/styles/hds/themes/dark-mode/index.scss
index 14ab0905d..38ab4cf09 100644
--- a/addons/rose/addon/styles/hds/themes/dark-mode/index.scss
+++ b/addons/rose/addon/styles/hds/themes/dark-mode/index.scss
@@ -102,6 +102,9 @@
     --token-color-palette-neutral-200
   );
   --token-form-indicator-optional-color: var(--token-color-palette-neutral-200);
+  --token-color-foreground-high-contrast: var(
+    --token-color-palette-neutral-700
+  );
 }
 
 @media (prefers-color-scheme: dark) {
diff --git a/addons/rose/tests/integration/components/rose/form/actions-test.js b/addons/rose/tests/integration/components/rose/form/actions-test.js
index 2000b9467..d884c0568 100644
--- a/addons/rose/tests/integration/components/rose/form/actions-test.js
+++ b/addons/rose/tests/integration/components/rose/form/actions-test.js
@@ -14,7 +14,9 @@ module('Integration | Component | rose/form/actions', function (hooks) {
   test('it renders a submit button and a regular button', async function (assert) {
     assert.expect(2);
     this.cancel = () => {};
-    await render(hbs`{{rose/form/actions cancel=this.cancel}}`);
+    await render(
+      hbs`{{rose/form/actions cancel=this.cancel submitText='Save' cancelText='Cancel'}}`
+    );
     assert.ok(find('[type="submit"]'));
     assert.ok(find('button:not([type="submit"])'));
   });
@@ -23,7 +25,7 @@ module('Integration | Component | rose/form/actions', function (hooks) {
     assert.expect(2);
     this.cancel = () => {};
     await render(
-      hbs`{{rose/form/actions cancel=this.cancel submitDisabled=true cancelDisabled=true}}`
+      hbs`{{rose/form/actions cancel=this.cancel submitDisabled=true cancelDisabled=true submitText='Save' cancelText='Cancel'}}`
     );
     assert.ok(find('[type="submit"]:disabled'));
     assert.ok(find('button:not([type="submit"]):disabled'));
@@ -31,7 +33,7 @@ module('Integration | Component | rose/form/actions', function (hooks) {
 
   test('it optionally does not render the cancel button', async function (assert) {
     assert.expect(2);
-    await render(hbs`{{rose/form/actions showCancel=false}}`);
+    await render(hbs`{{rose/form/actions submitText='Save' showCancel=false}}`);
     assert.ok(find('[type="submit"]'));
     assert.notOk(find('button:not([type="submit"])'));
   });
@@ -39,7 +41,9 @@ module('Integration | Component | rose/form/actions', function (hooks) {
   test('it executes a function on cancel click', async function (assert) {
     assert.expect(1);
     this.cancel = () => assert.ok(true, 'cancel was clicked');
-    await render(hbs`{{rose/form/actions cancel=this.cancel}}`);
+    await render(
+      hbs`{{rose/form/actions cancel=this.cancel submitText='Save' cancelText='Cancel'}}`
+    );
     await click('button:not([type="submit"])');
   });
 });
diff --git a/addons/rose/tests/integration/components/rose/form/actions/edit-toggle-test.js b/addons/rose/tests/integration/components/rose/form/actions/edit-toggle-test.js
index 35efe6728..726978fc9 100644
--- a/addons/rose/tests/integration/components/rose/form/actions/edit-toggle-test.js
+++ b/addons/rose/tests/integration/components/rose/form/actions/edit-toggle-test.js
@@ -17,7 +17,7 @@ module(
       assert.expect(1);
       this.enableEdit = () => {};
       await render(
-        hbs`{{rose/form/actions/edit-toggle enableEdit=this.enableEdit}}`
+        hbs`{{rose/form/actions/edit-toggle enableEdit=this.enableEdit enableEditText='Edit'}}`
       );
       assert.ok(find('button'));
     });
@@ -26,7 +26,7 @@ module(
       assert.expect(1);
       this.enableEdit = () => assert.ok(true, 'edit was clicked');
       await render(
-        hbs`{{rose/form/actions/edit-toggle enableEdit=this.enableEdit}}`
+        hbs`{{rose/form/actions/edit-toggle enableEdit=this.enableEdit enableEditText='Edit'}}`
       );
       await click('button');
     });
diff --git a/ui/admin/app/components/form/onboarding/index.hbs b/ui/admin/app/components/form/onboarding/index.hbs
index 8b586523a..d9aefd162 100644
--- a/ui/admin/app/components/form/onboarding/index.hbs
+++ b/ui/admin/app/components/form/onboarding/index.hbs
@@ -3,7 +3,12 @@
   SPDX-License-Identifier: MPL-2.0
 }}
 
-<Rose::Form class='full-width' @cancel={{@cancel}} @onSubmit={{this.submit}}>
+<Rose::Form
+  class='full-width'
+  @cancel={{@cancel}}
+  @onSubmit={{this.submit}}
+  as |form|
+>
   <div class='create-resources-form'>
     <Hds::Form::TextInput::Field
       name='targetAddress'
@@ -55,14 +60,8 @@
     <F.Control><Image @name='ssh-target-creation' /></F.Control>
   </Hds::Form::Fieldset>
 
-  <Hds::ButtonSet>
-    <Hds::Button @text='{{t "actions.save"}}' type='submit' />
-    <Hds::Button
-      @text='{{t "actions.do-this-later"}}'
-      @color='secondary'
-      name='cancel'
-      {{on 'click' @cancel}}
-    />
-  </Hds::ButtonSet>
-
+  <form.actions
+    @submitText={{t 'actions.save'}}
+    @cancelText={{t 'actions.do-this-later'}}
+  />
 </Rose::Form>
\ No newline at end of file
diff --git a/ui/admin/app/styles/app.scss b/ui/admin/app/styles/app.scss
index e90bda620..e96574895 100644
--- a/ui/admin/app/styles/app.scss
+++ b/ui/admin/app/styles/app.scss
@@ -169,14 +169,8 @@
 
 .rose-frame {
   .rose-form-actions {
-    .rose-button-primary {
-      display: block;
-      margin: 0;
+    .hds-button {
       width: 100%;
-
-      .rose-button-wrapper {
-        display: inline;
-      }
     }
   }
 }
diff --git a/ui/admin/tests/acceptance/onboarding/onboarding-test.js b/ui/admin/tests/acceptance/onboarding/onboarding-test.js
index f237744e9..628fe120b 100644
--- a/ui/admin/tests/acceptance/onboarding/onboarding-test.js
+++ b/ui/admin/tests/acceptance/onboarding/onboarding-test.js
@@ -42,7 +42,7 @@ module('Acceptance | onboarding', function (hooks) {
   test('redirect user to orgs screen when click do this later', async function (assert) {
     assert.expect(1);
     await visit(urls.onboarding);
-    await click('[name="cancel"]');
+    await click('.rose-form-actions [type="button"]');
     assert.strictEqual(currentURL(), urls.orgs);
   });
 });
diff --git a/ui/desktop/app/styles/app.scss b/ui/desktop/app/styles/app.scss
index 6d283e153..a5888178b 100644
--- a/ui/desktop/app/styles/app.scss
+++ b/ui/desktop/app/styles/app.scss
@@ -288,14 +288,8 @@
   }
 
   .rose-form-actions {
-    .rose-button-primary {
-      display: block;
-      margin: 0;
+    .hds-button {
       width: 100%;
-
-      .rose-button-wrapper {
-        display: inline;
-      }
     }
   }
 }

From 16b466d1de8de4322d18a3b51dd8142812401a0d Mon Sep 17 00:00:00 2001
From: Lisbet Alvarez <lisbet.alvarez@hashicorp.com>
Date: Mon, 5 Jun 2023 14:24:35 -0700
Subject: [PATCH 2/2] =?UTF-8?q?test:=20=F0=9F=92=8D=20fix=20button=20selec?=
 =?UTF-8?q?tors?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../tests/acceptance/targets/enable-session-recording-test.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/admin/tests/acceptance/targets/enable-session-recording-test.js b/ui/admin/tests/acceptance/targets/enable-session-recording-test.js
index 12048e3bd..addbfba29 100644
--- a/ui/admin/tests/acceptance/targets/enable-session-recording-test.js
+++ b/ui/admin/tests/acceptance/targets/enable-session-recording-test.js
@@ -28,8 +28,8 @@ module('Acceptance | targets | enable session recording', function (hooks) {
   const TOGGLE_SELECTOR = '[name=target-enable-session-recording]';
   const LINK_TO_NEW_STORAGE_BUCKET =
     '.enable-session-recording-toggle .hds-link-standalone';
-  const SAVE_BTN_SELECTOR = '.rose-form-actions .rose-button-primary';
-  const CANCEL_BTN_SELECTOR = '.rose-form-actions .rose-button-secondary';
+  const SAVE_BTN_SELECTOR = '.rose-form-actions [type="submit"]';
+  const CANCEL_BTN_SELECTOR = '.rose-form-actions [type="button"]';
 
   // Instances
   const instances = {