Migrate ConfirmAction components in lib

hashicorp · May 16, 2019 · c28d76b · c28d76b
1 parent 2551502
commit c28d76b
Show file tree

Hide file tree

Showing 20 changed files with 156 additions and 185 deletions.
diff --git a/ui/lib/core/addon/templates/components/toolbar-link.hbs b/ui/lib/core/addon/templates/components/toolbar-link.hbs
@@ -6,6 +6,7 @@
   data-test-configure-link={{data-test-configure-link}}
   data-test-alias-edit-link={{data-test-alias-edit-link}}
   data-test-entity-edit-link={{data-test-entity-edit-link}}
+  data-test-replication-link={{data-test-replication-link}}
   data-test-entity-merge-link={{data-test-entity-merge-link}}
   data-test-backend-view-link={{data-test-backend-view-link}}
   data-test-entity-create-link={{data-test-entity-create-link}}

diff --git a/ui/lib/replication/addon/templates/components/replication-action-demote.hbs b/ui/lib/replication/addon/templates/components/replication-action-demote.hbs
@@ -7,15 +7,15 @@
       (not model.performance.replicationDisabled)
     )
   }}
-  
+
     <div data-test-demote-warning>
       <AlertInline
         @type="danger"
         @message="Demoting this DR primary cluster
           would result in a DR secondary and in that mode Vault is read-only. This
-          cluster is also currently operating as a Performance 
+          cluster is also currently operating as a Performance
           capitalize model.performance.modeForUrl}}, demoting it will leave your
-          replication setup without a performance primary cluster until a new 
+          replication setup without a performance primary cluster until a new
           cluster is promoted."
       />
     </div>
@@ -32,15 +32,16 @@
 </div>
 <div class="field">
   <div class="control">
-    {{#confirm-action
-      buttonClasses="button is-primary"
-      onConfirmAction=(action "onSubmit" "demote" model.replicationAttrs.modeForUrl)
-      confirmMessage="Are you sure you want to demote this cluster?"
-      confirmButtonText="Demote cluster"
-      cancelButtonText="Cancel"
-      data-test-replication-demote=true
-      }}
+    <ConfirmAction
+      @buttonClasses="button is-primary"
+      @confirmTitle="Demote this cluster?"
+      @confirmMessage="This will affect how your Vault data is replicated."
+      @confirmButtonText="Demote"
+      @horizontalPosition="auto-left"
+      @onConfirmAction={{action "onSubmit" "demote" model.replicationAttrs.modeForUrl}}
+      data-test-replication-demote="true"
+    >
       Demote cluster
-    {{/confirm-action}}
+    </ConfirmAction>
   </div>
 </div>
diff --git a/ui/lib/replication/addon/templates/components/replication-action-disable.hbs b/ui/lib/replication/addon/templates/components/replication-action-disable.hbs
@@ -44,23 +44,24 @@
 </div>
 <div class="field">
   <div class="control">
-    {{#confirm-action
-      onConfirmAction=(action
+    <ConfirmAction
+      @buttonClasses="button is-primary"
+      @confirmTitle="Disable this cluster?"
+      @confirmMessage="Data in this cluster will no longer be replicated."
+      @confirmButtonText="Disable"
+      @horizontalPosition="auto-left"
+      @onConfirmAction={{action
         "onSubmit"
         "disable"
         (if
           (eq model.replicationAttrs.modeForUrl 'bootstrapping')
           mode
           model.replicationAttrs.modeForUrl
         )
-      )
-      buttonClasses="button is-primary"
-      confirmMessage=(concat "Are you sure you want to disable Replication on this cluster?")
-      confirmButtonText="Disable"
-      cancelButtonText="Cancel"
-      data-test-disable-replication=true
       }}
+      data-test-disable-replication="true"
+    >
       Disable Replication
-    {{/confirm-action}}
+    </ConfirmAction>
   </div>
 </div>
diff --git a/ui/lib/replication/addon/templates/components/replication-action-promote.hbs b/ui/lib/replication/addon/templates/components/replication-action-promote.hbs
@@ -57,15 +57,16 @@
   <div class="box is-marginless is-shadowless">
    <div class="field">
     <div class="control">
-      {{#confirm-action
-        buttonClasses="button is-primary"
-        onConfirmAction=(action "onSubmit" "promote" model.replicationAttrs.modeForUrl (hash dr_operation_token=dr_operation_token primary_cluster_addr=primary_cluster_addr force=force))
-        confirmMessage="Are you sure you want to promote this cluster?"
-        confirmButtonText="Promote cluster"
-        cancelButtonText="Cancel"
-        }}
+      <ConfirmAction
+        @buttonClasses="button is-primary"
+        @confirmTitle="Promote this cluster?"
+        @confirmMessage="This will affect how your Vault data is replicated."
+        @confirmButtonText="Promote"
+        @horizontalPosition="auto-left"
+        @onConfirmAction={{action "onSubmit" "promote" model.replicationAttrs.modeForUrl (hash dr_operation_token=dr_operation_token primary_cluster_addr=primary_cluster_addr force=force)}}
+      >
         Promote cluster
-      {{/confirm-action}}
+      </ConfirmAction>
     </div>
    </div>
  </div>
@@ -113,15 +114,16 @@
   </div>
   <div class="field">
     <div class="control">
-      {{#confirm-action
-        buttonClasses="button is-primary"
-        onConfirmAction=(action "onSubmit" "promote" model.replicationAttrs.modeForUrl (hash primary_cluster_addr=primary_cluster_addr force=force))
-        confirmMessage="Are you sure you want to promote this cluster?"
-        confirmButtonText="Promote cluster"
-        cancelButtonText="Cancel"
-        }}
+      <ConfirmAction
+        @buttonClasses="button is-primary"
+        @confirmTitle="Promote this cluster?"
+        @confirmMessage="This will affect how your Vault data is replicated."
+        @confirmButtonText="Promote"
+        @horizontalPosition="auto-left"
+        @onConfirmAction={{action "onSubmit" "promote" model.replicationAttrs.modeForUrl (hash primary_cluster_addr=primary_cluster_addr force=force)}}
+      >
         Promote cluster
-      {{/confirm-action}}
+      </ConfirmAction>
     </div>
   </div>
 {{/if}}
diff --git a/ui/lib/replication/addon/templates/components/replication-action-recover.hbs b/ui/lib/replication/addon/templates/components/replication-action-recover.hbs
@@ -9,15 +9,15 @@
 </div>
 <div class="field">
   <div class="control">
-    {{#confirm-action
-      buttonClasses="button is-primary"
-      onConfirmAction=(action "onSubmit" "recover")
-      confirmMessage="Are you sure you want to initiate cluster recovery?"
-      confirmButtonText="Begin recovery"
-      cancelButtonText="Cancel"
-      }}
+    <ConfirmAction
+      @buttonClasses="button is-primary"
+      @confirmTitle="Begin recovery?"
+      @confirmMessage="This will attempt to recover to continue syncing."
+      @confirmButtonText="Recover"
+      @horizontalPosition="auto-left"
+      @onConfirmAction={{action "onSubmit" "recover"}}
+    >
       Recover
-    {{/confirm-action}}
+    </ConfirmAction>
   </div>
 </div>
-
diff --git a/ui/lib/replication/addon/templates/components/replication-action-reindex.hbs b/ui/lib/replication/addon/templates/components/replication-action-reindex.hbs
@@ -9,14 +9,15 @@
 </div>
 <div class="field">
   <div class="control">
-    {{#confirm-action
-      buttonClasses="button is-primary"
-      onConfirmAction=(action "onSubmit" "reindex")
-      confirmMessage="Are you sure you want to initiate cluster reindex?"
-      confirmButtonText="Begin reindex"
-      cancelButtonText="Cancel"
-      }}
+    <ConfirmAction
+      @buttonClasses="button is-primary"
+      @confirmTitle="Begin reindex?"
+      @confirmMessage="This will initiate reindexing of the local data storage."
+      @confirmButtonText="Reindex"
+      @horizontalPosition="auto-left"
+      @onConfirmAction={{action "onSubmit" "reindex"}}
+    >
       Reindex
-    {{/confirm-action}}
+    </ConfirmAction>
   </div>
 </div>
diff --git a/ui/lib/replication/addon/templates/components/replication-action-update-primary.hbs b/ui/lib/replication/addon/templates/components/replication-action-update-primary.hbs
@@ -70,15 +70,16 @@
   <div class="box is-marginless is-shadowless">
     <div class="field">
       <div class="control">
-        {{#confirm-action
-          buttonClasses="button is-primary"
-          onConfirmAction=(action "onSubmit" "update-primary" model.replicationAttrs.modeForUrl (hash dr_operation_token=dr_operation_token token=token primary_api_addr=primary_api_addr ca_path=ca_path ca_file=ca_file))
-          confirmMessage="Are you sure you want to update this cluster's primary?"
-          confirmButtonText="Update primary"
-          cancelButtonText="Cancel"
-          }}
+        <ConfirmAction
+          @buttonClasses="button is-primary"
+          @confirmTitle="Update primary?"
+          @confirmMessage="This will update this cluster's primary."
+          @confirmButtonText="Update"
+          @horizontalPosition="auto-left"
+          @onConfirmAction={{action "onSubmit" "update-primary" model.replicationAttrs.modeForUrl (hash dr_operation_token=dr_operation_token token=token primary_api_addr=primary_api_addr ca_path=ca_path ca_file=ca_file)}}
+        >
           Update primary
-        {{/confirm-action}}
+        </ConfirmAction>
       </div>
     </div>
   </div>
@@ -137,15 +138,16 @@
 
   <div class="field">
     <div class="control">
-      {{#confirm-action
-        buttonClasses="button is-primary"
-        onConfirmAction=(action "onSubmit" "update-primary" model.replicationAttrs.modeForUrl (hash token=token primary_api_addr=primary_api_addr ca_path=ca_path ca_file=ca_file))
-        confirmMessage="Are you sure you want to update this cluster's primary?"
-        confirmButtonText="Update primary"
-        cancelButtonText="Cancel"
-        }}
+      <ConfirmAction
+        @buttonClasses="button is-primary"
+        @confirmTitle="Update primary?"
+        @confirmMessage="This will update this cluster's primary."
+        @confirmButtonText="Update"
+        @horizontalPosition="auto-left"
+        @onConfirmAction={{action "onSubmit" "update-primary" model.replicationAttrs.modeForUrl (hash token=token primary_api_addr=primary_api_addr ca_path=ca_path ca_file=ca_file)}}
+      >
         Update primary
-      {{/confirm-action}}
+      </ConfirmAction>
     </div>
   </div>
 {{/if}}
diff --git a/ui/lib/replication/addon/templates/mode/secondaries/config-edit.hbs b/ui/lib/replication/addon/templates/mode/secondaries/config-edit.hbs
@@ -1,3 +1,16 @@
+<Toolbar>
+  <ToolbarActions>
+    <ConfirmAction
+      @buttonClasses="toolbar-link"
+      @confirmMessage="This will affect which data gets replicated to this secondary."
+      @onConfirmAction={{action "saveConfig" model.config true}}
+      @data-test-delete-mount-config="true"
+    >
+      Delete config
+    </ConfirmAction>
+  </ToolbarActions>
+</Toolbar>
+
 <div class="box is-fullwidth is-shadowless is-marginless">
   <h4 class="title is-5 is-marginless">
     Edit mount filter config for <code>{{model.config.id}}</code>
@@ -25,15 +38,5 @@
         {{/link-to}}
       </div>
     </div>
-    {{#confirm-action
-      onConfirmAction=(action "saveConfig" model.config true)
-      confirmMessage=(concat "Are you sure you want to delete the filter config for " model.config.id "?")
-      confirmButtonText="Delete"
-      cancelButtonText="Cancel"
-      data-test-delete-mount-config=true
-    }}
-      Delete
-      <Chevron @isButton={{true}} />
-    {{/confirm-action}}
   </div>
 </form>
diff --git a/ui/lib/replication/addon/templates/mode/secondaries/config-show.hbs b/ui/lib/replication/addon/templates/mode/secondaries/config-show.hbs
@@ -1,3 +1,22 @@
+<Toolbar>
+  <ToolbarActions>
+    {{#if model.config.mode}}
+      <ToolbarLink
+        @params={{array "mode.secondaries.config-edit" model.config.id}}
+        @data-test-replication-link="edit-mount-config"
+      >
+        Edit config
+      </ToolbarLink>
+    {{else}}
+      <ToolbarLink
+        @params={{array "mode.secondaries.config-create" model.config.id}}
+        @data-test-replication-link="create-mount-config"
+      >
+        Create config
+      </ToolbarLink>
+    {{/if}}
+  </ToolbarActions>
+</Toolbar>
 <div class="box is-fullwidth is-shadowless is-marginless">
   <h4 class="title is-5 is-marginless">
     Mount filter config for <code>{{model.config.id}}</code>
@@ -18,31 +37,7 @@
   </div>
 {{else}}
   <EmptyState
-    @title="Performance Mount Filtering is not configured for this secondary"
+    @title="No config yet"
+    @message="Performance Mount Filtering is not configured for this secondary"
   />
 {{/if}}
-<div class="field is-fullwidth box is-shadowless">
-  {{#if model.config.mode}}
-    <div class="control">
-      {{#link-to
-        "mode.secondaries.config-edit"
-        model.config.id
-        class="button"
-        data-test-replication-link="edit-mount-config"
-        }}
-        Edit
-      {{/link-to}}
-    </div>
-  {{else}}
-    <div class="control">
-      {{#link-to
-        "mode.secondaries.config-create"
-        model.config.id
-        class="button"
-        data-test-replication-link="create-mount-config"
-        }}
-        Create
-      {{/link-to}}
-    </div>
-  {{/if}}
-</div>
diff --git a/ui/lib/replication/addon/templates/mode/secondaries/index.hbs b/ui/lib/replication/addon/templates/mode/secondaries/index.hbs
@@ -23,7 +23,7 @@
   </Toolbar>
   {{#if model.replicationAttrs.knownSecondaries.length}}
     {{#each model.replicationAttrs.knownSecondaries as |secondary|}}
-      <div class="box is-shadowless is-marginless" data-test-secondary-name={{secondary}}>
+      <div class="list-item-row" data-test-secondary-name={{secondary}}>
         <div class="columns is-mobile">
           <div class="column is-10">
             {{secondary}}
@@ -33,31 +33,27 @@
               {{#popup-menu name="secondary-details"}}
                 <nav class="menu">
                   <ul class="menu-list">
-                    {{#if model.canRevokeSecondary}}
-                      <li class="action">
-                        {{#confirm-action
-                          onConfirmAction=(action "onSubmit" "revoke-secondary" "primary" (hash id=secondary))
-                          confirmMessage=(concat "Are you sure you want to revoke " secondary "?")
-                          confirmButtonText="Revoke"
-                          cancelButtonText="Cancel"
-                          buttonClasses="button link is-destroy"
-                          confirmButtonClasses="is-danger is-outlined button"
-                          showConfirm=(get this (concat secondary '-isRevoking'))
-                          containerClasses="is-block"
-                          messageClasses="box is-shadowless is-marginless"
-                          class=(if (get this (concat secondary '-isRevoking')) "is-block ")
-                        }}
-                          Revoke
-                        {{/confirm-action}}
-                      </li>
-                    {{/if}}
                     {{#if (eq replicationMode 'performance')}}
                       <li class="action">
                         {{#link-to "mode.secondaries.config-show" replicationMode secondary data-test-replication-mount-filter-link=true}}
                           Mount filter config
                         {{/link-to}}
                       </li>
                     {{/if}}
+                    {{#if model.canRevokeSecondary}}
+                      <li class="action">
+                        <ConfirmAction
+                          @buttonClasses="button link is-destroy"
+                          @confirmTitle="Revoke token?"
+                          @confirmMessage="This will revoke this secondary token."
+                          @confirmButtonText="Revoke"
+                          @horizontalPosition="auto-left"
+                          @onConfirmAction={{action "onSubmit" "revoke-secondary" "primary" (hash id=secondary)}}
+                        >
+                          Revoke
+                        </ConfirmAction>
+                      </li>
+                    {{/if}}
                   </ul>
                 </nav>
               {{/popup-menu}}