UI: Use buttons instead of anchors where appropriate (#4939)

Use buttons instead of anchors where appropriate
hashicorp · Dec 5, 2018 · 8685b73 · 8685b73
1 parent 01aa636
commit 8685b73
Show file tree

Hide file tree

Showing 9 changed files with 47 additions and 37 deletions.
diff --git a/ui-v2/app/styles/components/action-group/layout.scss b/ui-v2/app/styles/components/action-group/layout.scss
@@ -1,6 +1,14 @@
 %action-group label span {
   display: none;
 }
+%action-group-action {
+  width: 170px;
+  padding: 10px 10px;
+  text-align: left;
+}
+%action-group li > * {
+  @extend %action-group-action;
+}
 %action-group::before {
   margin-left: -1px;
 }
@@ -59,10 +67,6 @@
   position: relative;
   z-index: 1;
 }
-%action-group li a {
-  width: 170px;
-  padding: 10px 10px;
-}
 %action-group input[type='radio'],
 %action-group input[type='radio'] ~ ul,
 %action-group input[type='radio'] ~ .with-confirmation > ul {

diff --git a/ui-v2/app/styles/components/action-group/skin.scss b/ui-v2/app/styles/components/action-group/skin.scss
@@ -5,7 +5,8 @@
   /* frame-gray */
   background-color: $gray-050;
 }
-%action-group label {
+%action-group label,
+%action-group-action {
   cursor: pointer;
 }
 %action-group label::after,
@@ -26,7 +27,10 @@
 %action-group ul::before {
   border-color: $color-action;
 }
-%action-group li a:hover {
+%action-group-action {
+  background-color: $white;
+}
+%action-group-action:hover {
   @extend %frame-blue-800;
 }
 %action-group ul,

diff --git a/ui-v2/app/styles/components/buttons.scss b/ui-v2/app/styles/components/buttons.scss
@@ -3,12 +3,13 @@ button[type='submit'],
 a.type-create {
   @extend %primary-button;
 }
+// the :not(li)'s here avoid styling action-group buttons
 button[type='reset'],
-button[type='button']:not(.copy-btn):not(.type-delete),
+:not(li) > button[type='button']:not(.copy-btn):not(.type-delete),
 html.template-error div > a {
   @extend %secondary-button;
 }
-button.type-delete {
+:not(li) > button.type-delete {
   @extend %dangerous-button;
 }
 button.copy-btn {

diff --git a/ui-v2/app/styles/core/typography.scss b/ui-v2/app/styles/core/typography.scss
@@ -52,7 +52,7 @@ caption {
 }
 th,
 %breadcrumbs a,
-%action-group a,
+%action-group-action,
 %tab-nav,
 %tooltip-bubble {
   font-weight: $typo-weight-medium;
@@ -80,6 +80,7 @@ h2,
   font-size: $typo-size-500;
 }
 body,
+%action-group-action,
 pre code,
 input,
 textarea,

diff --git a/ui-v2/app/templates/dc/acls/index.hbs b/ui-v2/app/templates/dc/acls/index.hbs
@@ -43,28 +43,28 @@
                         {{#block-slot 'action' as |confirm|}}
                             {{#action-group index=index onchange=(action change) checked=(if (eq checked index) 'checked')}}
                                 <ul>
-                                    <li>
-                                        <a data-test-edit href={{href-to 'dc.acls.edit' item.ID}}>Edit</a>
-                                    </li>
-    {{#if (eq item.ID token.SecretID) }}
-                                    <li>
-                                        <a data-test-logout onclick={{queue (action confirm 'logout' item) (action change)}}>Stop using</a>
-                                    </li>
-    {{else}}
+                                  <li>
+                                    <a data-test-edit href={{href-to 'dc.acls.edit' item.ID}}>Edit</a>
+                                  </li>
+{{#if (eq item.ID token.SecretID) }}
+                                  <li>
+                                      <button type="button" data-test-logout {{action confirm 'logout' item}}>Stop using</button>
+                                  </li>
+{{else}}
 
-                                    <li>
-                                        <a data-test-use onclick={{queue (action confirm 'use' item) (action change)}}>Use</a>
-                                    </li>
-    {{/if}}
-                                    <li>
-                                        <a data-test-clone onclick={{action 'sendClone' item}}>Clone</a>
-                                    </li>
-    {{# if (not-eq item.ID 'anonymous') }}
-                                    <li>
-                                        <a data-test-delete onclick={{action confirm 'delete' item}}>Delete</a>
-                                    </li>
-    {{/if}}
-                                </ul>
+                                  <li>
+                                      <button type="button" data-test-use {{action confirm 'use' item}}>Use</button>
+                                  </li>
+{{/if}}
+                                  <li>
+                                      <button type="button" data-test-clone {{action 'sendClone' item}}>Clone</button>
+                                  </li>
+{{# if (not-eq item.ID 'anonymous') }}
+                                  <li>
+                                      <button type="button" class="type-delete" data-test-delete {{action confirm 'delete' item}}>Delete</button>
+                                  </li>
+{{/if}}
+                              </ul>
                             {{/action-group}}
                         {{/block-slot}}
                         {{#block-slot 'dialog' as |execute cancel message name|}}

diff --git a/ui-v2/app/templates/dc/acls/policies/index.hbs b/ui-v2/app/templates/dc/acls/policies/index.hbs
@@ -61,7 +61,7 @@
                                         <a data-test-edit href={{href-to 'dc.acls.policies.edit' item.ID}}>Edit</a>
                                     </li>
                                     <li>
-                                        <a data-test-delete onclick={{action confirm 'delete' item}}>Delete</a>
+                                        <button type="button" class="type-delete" data-test-delete {{action confirm 'delete' item}}>Delete</button>
                                     </li>
     {{/if}}
                                 </ul>

diff --git a/ui-v2/app/templates/dc/acls/tokens/index.hbs b/ui-v2/app/templates/dc/acls/tokens/index.hbs
@@ -78,22 +78,22 @@
                                     </li>
     {{#if (not (token/is-legacy item))}}
                                     <li>
-                                        <a data-test-clone onclick={{action 'sendClone' item}}>Duplicate</a>
+                                        <button type="button" data-test-clone {{action 'sendClone' item}}>Duplicate</button>
                                     </li>
     {{/if}}
     {{#if (eq item.AccessorID token.AccessorID) }}
                                     <li>
-                                        <a data-test-logout onclick={{queue (action confirm 'logout' item) (action change)}}>Stop using</a>
+                                        <button type="button" data-test-logout {{action confirm 'logout' item}}>Stop using</button>
                                     </li>
     {{else}}
 
                                     <li>
-                                        <a data-test-use onclick={{queue (action confirm 'use' item) (action change)}}>Use</a>
+                                        <button type="button" data-test-use {{action confirm 'use' item}}>Use</button>
                                     </li>
     {{/if}}
     {{#unless (token/is-anonymous item) }}
                                     <li>
-                                        <a data-test-delete onclick={{action confirm 'delete' item}}>Delete</a>
+                                        <button type="button" class="type-delete" data-test-delete {{action confirm 'delete' item}}>Delete</button>
                                     </li>
     {{/unless}}
                                 </ul>

diff --git a/ui-v2/app/templates/dc/intentions/index.hbs b/ui-v2/app/templates/dc/intentions/index.hbs
@@ -63,7 +63,7 @@
                                         <a href={{href-to 'dc.intentions.edit' item.ID}}>Edit</a>
                                     </li>
                                     <li>
-                                        <a data-test-delete onclick={{action confirm 'delete' item}}>Delete</a>
+                                        <button type="button" class="type-delete" data-test-delete {{action confirm 'delete' item}}>Delete</button>
                                     </li>
                                 </ul>
                             {{/action-group}}

diff --git a/ui-v2/app/templates/dc/kv/index.hbs b/ui-v2/app/templates/dc/kv/index.hbs
@@ -59,7 +59,7 @@
                                         <a data-test-edit href={{href-to (if item.isFolder 'dc.kv.folder' 'dc.kv.edit') item.Key}}>{{if item.isFolder 'View' 'Edit'}}</a>
                                     </li>
                                     <li>
-                                        <a data-test-delete onclick={{action confirm 'delete' item}}>Delete</a>
+                                        <button type="button" class="type-delete" data-test-delete {{action confirm 'delete' item}}>Delete</button>
                                     </li>
                                 </ul>
                             {{/action-group}}