From f60c643aa8c15083fd7dec38416396ef79bbee27 Mon Sep 17 00:00:00 2001
From: Angel Garbarino <Monkeychip@users.noreply.github.com>
Date: Tue, 21 Nov 2023 09:06:45 -0700
Subject: [PATCH] UI: HDS adoption replace <Button> in lib/replication (#24161)

* replication directory components update

* need to wait for another pr to merge for revoke and fixing a one off in distribute:

* clean up

* amend revoke with new ConfirmAction work.

* some PR comments

* remove wrapping LinkTo

* Update ui/lib/replication/addon/templates/mode/secondaries/revoke.hbs

Co-authored-by: claire bontempo <68122737+hellobontempo@users.noreply.github.com>

---------

Co-authored-by: claire bontempo <68122737+hellobontempo@users.noreply.github.com>
---
 .../components/keymgmt/distribute.hbs         | 30 ++++++----------
 .../components/replication-summary.hbs        | 19 +++++-----
 .../addon/templates/mode/secondaries/add.hbs  | 19 ++++------
 .../mode/secondaries/config-create.hbs        | 17 +++------
 .../mode/secondaries/config-edit.hbs          | 19 +++-------
 .../templates/mode/secondaries/revoke.hbs     | 35 +++++++++----------
 6 files changed, 52 insertions(+), 87 deletions(-)

diff --git a/ui/app/templates/components/keymgmt/distribute.hbs b/ui/app/templates/components/keymgmt/distribute.hbs
index ec9fdbc063..c9c54a3332 100644
--- a/ui/app/templates/components/keymgmt/distribute.hbs
+++ b/ui/app/templates/components/keymgmt/distribute.hbs
@@ -151,24 +151,16 @@
       </div>
     </fieldset>
 
-    <div class="field is-grouped box is-fullwidth is-bottomless">
-      <div class="control">
-        <button
-          type="submit"
-          disabled={{or this.validationErrorCount this.createDistribution.isRunning}}
-          class="button is-primary"
-          data-test-secret-save={{true}}
-        >
-          {{#if this.createDistribution.isRunning}}
-            <span class="loader is-inline-block"></span>
-          {{else}}
-            {{if (or (not @key) this.isNewKey) "Add key" "Distribute key"}}
-          {{/if}}
-        </button>
-      </div>
-      <div class="control">
-        <Hds::Button @text="Cancel" @color="secondary" {{on "click" @onClose}} />
-      </div>
-    </div>
+    <hr class="has-background-gray-100" />
+    <Hds::ButtonSet>
+      <Hds::Button
+        @text={{if (or (not @key) this.isNewKey) "Add key" "Distribute key"}}
+        @icon={{if this.createDistribution.isRunning "loading"}}
+        type="submit"
+        data-test-secret-save
+        disabled={{this.createDistribution.isRunning}}
+      />
+      <Hds::Button @text="Cancel" @color="secondary" {{on "click" @onClose}} />
+    </Hds::ButtonSet>
   </form>
 {{/if}}
\ No newline at end of file
diff --git a/ui/lib/replication/addon/templates/components/replication-summary.hbs b/ui/lib/replication/addon/templates/components/replication-summary.hbs
index c32a365a53..3750ad2c5a 100644
--- a/ui/lib/replication/addon/templates/components/replication-summary.hbs
+++ b/ui/lib/replication/addon/templates/components/replication-summary.hbs
@@ -278,11 +278,12 @@
       )
     }}
       <div class="field is-grouped box is-fullwidth is-bottomless">
-        <div class="control">
-          <button type="submit" class="button is-primary" disabled={{this.disallowEnable}} data-test-replication-enable>
-            Enable Replication
-          </button>
-        </div>
+        <Hds::Button
+          @text="Enable Replication"
+          type="submit"
+          disabled={{this.disallowEnable}}
+          data-test-replication-enable
+        />
       </div>
     {{/if}}
   </form>
@@ -315,9 +316,7 @@
         {{#if this.submit.isRunning}}
           <LayoutLoading />
         {{else}}
-          <LinkTo @route="mode.index" @model="dr" class="link-plain">
-            <ReplicationModeSummary @mode="dr" @cluster={{this.cluster}} @tagName="span" />
-          </LinkTo>
+          <ReplicationModeSummary @mode="dr" @cluster={{this.cluster}} @tagName="span" />
         {{/if}}
       {{else}}
         <ReplicationModeSummary @mode="dr" @cluster={{this.cluster}} @tagName="div" />
@@ -329,9 +328,7 @@
           <Icon @size="24" @name="replication-perf" />
           Performance
         </h3>
-        <LinkTo @route="mode.index" @model="performance" class="link-plain">
-          <ReplicationModeSummary @mode="performance" @cluster={{this.cluster}} @tagName="span" />
-        </LinkTo>
+        <ReplicationModeSummary @mode="performance" @cluster={{this.cluster}} @tagName="span" />
       </div>
     {{/if}}
   {{/if}}
diff --git a/ui/lib/replication/addon/templates/mode/secondaries/add.hbs b/ui/lib/replication/addon/templates/mode/secondaries/add.hbs
index 838af13f44..c6a6cbaabd 100644
--- a/ui/lib/replication/addon/templates/mode/secondaries/add.hbs
+++ b/ui/lib/replication/addon/templates/mode/secondaries/add.hbs
@@ -25,7 +25,7 @@
         name="activation-token-id"
         id="activation-token-id"
         @value={{this.id}}
-        data-test-replication-secondary-id={{true}}
+        data-test-replication-secondary-id
       />
     </div>
     <p class="help has-text-grey">
@@ -45,18 +45,11 @@
   {{#if (eq this.replicationMode "performance")}}
     <PathFilterConfigList @paths={{this.paths}} @config={{this.filterConfig}} @id={{this.id}} />
   {{/if}}
-  <div class="field is-grouped box is-fullwidth is-bottomless">
-    <div class="control">
-      <button type="submit" class="button is-primary" data-test-secondary-add={{true}}>
-        Generate token
-      </button>
-    </div>
-    <div class="control">
-      <LinkTo @route="mode.secondaries" @model={{this.replicationMode}} class="button">
-        Cancel
-      </LinkTo>
-    </div>
-  </div>
+  <hr class="has-background-gray-100" />
+  <Hds::ButtonSet>
+    <Hds::Button @text="Generate token" type="submit" data-test-secondary-add />
+    <Hds::Button @text="Cancel" @color="secondary" @route="mode.secondaries" @model={{this.model.replicationMode}} />
+  </Hds::ButtonSet>
 </form>
 
 {{#if this.isModalActive}}
diff --git a/ui/lib/replication/addon/templates/mode/secondaries/config-create.hbs b/ui/lib/replication/addon/templates/mode/secondaries/config-create.hbs
index 3fbf861065..1858da83be 100644
--- a/ui/lib/replication/addon/templates/mode/secondaries/config-create.hbs
+++ b/ui/lib/replication/addon/templates/mode/secondaries/config-create.hbs
@@ -11,16 +11,9 @@
 </div>
 <form {{action "saveConfig" this.model.config on="submit"}}>
   <PathFilterConfigList @paths={{this.model.paths}} @config={{this.model.config}} />
-  <div class="field is-grouped box is-fullwidth is-shadowless">
-    <div class="control">
-      <button type="submit" class="button is-primary">
-        Create
-      </button>
-    </div>
-    <div class="control">
-      <LinkTo @route="mode.secondaries.config-show" @model={{this.model.config.id}} class="button">
-        Cancel
-      </LinkTo>
-    </div>
-  </div>
+  <hr class="has-background-gray-100" />
+  <Hds::ButtonSet>
+    <Hds::Button @text="Create" type="submit" />
+    <Hds::Button @text="Cancel" @color="secondary" @route="mode.secondaries.config-show" @model={{this.model.config.id}} />
+  </Hds::ButtonSet>
 </form>
\ No newline at end of file
diff --git a/ui/lib/replication/addon/templates/mode/secondaries/config-edit.hbs b/ui/lib/replication/addon/templates/mode/secondaries/config-edit.hbs
index 77a4b57f33..03b5dbd18d 100644
--- a/ui/lib/replication/addon/templates/mode/secondaries/config-edit.hbs
+++ b/ui/lib/replication/addon/templates/mode/secondaries/config-edit.hbs
@@ -12,18 +12,9 @@
 </div>
 <form {{action "saveConfig" this.model.config on="submit"}}>
   <PathFilterConfigList @paths={{this.model.paths}} @config={{this.model.config}} />
-  <div class="field is-grouped is-grouped-split is-fullwidth box is-bottomless">
-    <div class="field is-grouped">
-      <div class="control">
-        <button type="submit" class="button is-primary" data-test-config-save>
-          Update
-        </button>
-      </div>
-      <div class="control">
-        <LinkTo @route="mode.secondaries.config-show" @model={{this.model.config.id}} class="button">
-          Cancel
-        </LinkTo>
-      </div>
-    </div>
-  </div>
+  <hr class="has-background-gray-100" />
+  <Hds::ButtonSet>
+    <Hds::Button @text="Update" type="submit" data-test-config-save />
+    <Hds::Button @text="Cancel" @color="secondary" @route="mode.secondaries.config-show" @model={{this.model.config.id}} />
+  </Hds::ButtonSet>
 </form>
\ No newline at end of file
diff --git a/ui/lib/replication/addon/templates/mode/secondaries/revoke.hbs b/ui/lib/replication/addon/templates/mode/secondaries/revoke.hbs
index fa52a6becd..1143f5170a 100644
--- a/ui/lib/replication/addon/templates/mode/secondaries/revoke.hbs
+++ b/ui/lib/replication/addon/templates/mode/secondaries/revoke.hbs
@@ -20,21 +20,20 @@
     The secondary id to revoke; given initially to generate a secondary token.
   </p>
 </div>
-<div class="field is-grouped box is-fullwidth is-bottomless">
-  <div class="control">
-    <ConfirmAction
-      @buttonText="Revoke"
-      @confirmTitle="Revoke token?"
-      @confirmMessage="This will revoke this secondary token."
-      @disabledMessage={{unless this.id "A secondary ID is required perform revocation."}}
-      @onConfirmAction={{action "onSubmit" "revoke-secondary" "primary" (hash id=this.id)}}
-    />
-  </div>
-  <div class="control">
-    {{#unless this.isRevoking}}
-      <LinkTo @route="mode.secondaries" @model={{this.replicationMode}} class="button">
-        Cancel
-      </LinkTo>
-    {{/unless}}
-  </div>
-</div>
\ No newline at end of file
+<hr class="has-background-gray-100" />
+<Hds::ButtonSet>
+  <ConfirmAction
+    @buttonText="Revoke"
+    @confirmTitle="Revoke token?"
+    @confirmMessage="This will revoke this secondary token."
+    @disabledMessage={{unless this.id "A secondary ID is required perform revocation."}}
+    @onConfirmAction={{action "onSubmit" "revoke-secondary" "primary" (hash id=this.id)}}
+  />
+  <Hds::Button
+    @text="Cancel"
+    @color="secondary"
+    @route="mode.secondaries"
+    @model={{this.replicationMode}}
+    @disabled={{this.isRevoking}}
+  />
+</Hds::ButtonSet>
\ No newline at end of file