Simpler list item rows

- Makes list items flush with sides, expands into gutter on hover
- Makes unclickable row items more distinguishable

ui/app/components/list-item-row.js

@@ -1,10 +1,10 @@
 import Ember from 'ember';
 import hbs from 'htmlbars-inline-precompile';
 
-let LinkedBlockComponent = Ember.Component.extend({
+let ListItemRowComponent = Ember.Component.extend({
   layout: hbs`{{yield}}`,
 
-  classNames: 'linked-block',
+  classNames: 'list-item-row',
 
   routing: Ember.inject.service('-routing'),
   queryParams: null,
@@ -28,8 +28,8 @@ let LinkedBlockComponent = Ember.Component.extend({
   },
 });
 
-LinkedBlockComponent.reopenClass({
+ListItemRowComponent.reopenClass({
   positionalParams: 'params',
 });
 
-export default LinkedBlockComponent;
+export default ListItemRowComponent;

ui/app/styles/components/box-label.scss

@@ -8,7 +8,7 @@ label.box-label {
   @extend .is-gapless;
   border-color: $grey-light;
   border-radius: 3px;
-  box-shadow: $box-link-shadow, $box-shadow-middle;
+  box-shadow: $box-link-shadow;
   text-decoration: none;
   transition: box-shadow $speed;
   width: 100%;

ui/app/styles/components/linked-block.scss

@@ -1,16 +0,0 @@
-.linked-block {
-  cursor: pointer;
-  transition: box-shadow $speed;
-  will-change: box-shadow;
-
-  &:hover,
-  &:focus,
-  &:active {
-    position: relative;
-    box-shadow: 0 2px 0 -1px $grey-light, 0 -2px 0 -1px $grey-light, $box-link-hover-shadow, $box-shadow-middle;
-  }
-}
-
-.linked-block .columns {
-  @extend .is-flex-center;
-}

ui/app/styles/components/list-item-row.scss

@@ -0,0 +1,28 @@
+.list-item-row {
+  @extend .box;
+  @extend .is-sideless;
+  @extend .is-marginless;
+  padding-left: 0;
+  padding-right: 0;
+
+  &.is-selectable {
+    cursor: pointer;
+    transition: box-shadow $speed, margin $speed, padding $speed;
+    will-change: box-shadow, margin, padding;
+
+    &:hover,
+    &:focus,
+    &:active {
+      margin-left: #{-$column-gap} !important;
+      margin-right: #{-$column-gap} !important;
+      padding-left: $column-gap;
+      padding-right: $column-gap;
+      position: relative;
+      box-shadow: 0 2px 0 -1px $grey-light, 0 -2px 0 -1px $grey-light, $box-link-hover-shadow, $box-shadow-middle;
+    }
+  }
+}
+
+.list-item-row .columns {
+  @extend .is-flex-center;
+}

ui/app/styles/core.scss

@@ -55,7 +55,7 @@
 @import "./components/init-illustration";
 @import "./components/info-table-row";
 @import "./components/input-hint";
-@import "./components/linked-block";
+@import "./components/list-item-row";
 @import "./components/list-pagination";
 @import "./components/loader";
 @import "./components/login-form";

ui/app/styles/utils/_bulma_variables.scss

@@ -77,7 +77,7 @@ $menu-item-hover-background-color: $grey-lightest;
 $menu-item-active-color: $link;
 $menu-item-active-background-color: transparent;
 
-$box-link-shadow: 0 0 0 1px $grey-light;
+$box-link-shadow: 0 0 0 1px $ui-gray-200;
 $box-link-hover-shadow: 0 0 0 1px $grey-light;
 
 // animations

ui/app/styles/utils/_colors.scss

@@ -17,6 +17,7 @@ $vault-gray-dark: $vault-gray-700;
 // UI Gray
 $ui-gray-050: #F7F8FA;
 $ui-gray-100: #EBEEF2;
+$ui-gray-200: #DCE0E6;
 $ui-gray-300: #BAC1CC;
 $ui-gray-500: #6a7786;
 $ui-gray-700: #525761;

ui/app/templates/components/identity/item-aliases.hbs

@@ -1,9 +1,9 @@
 {{#each (if model.alias.id (array model.alias) model.aliases) as |item|}}
-  {{#linked-block
+  {{#list-item-row
     "vault.cluster.access.identity.aliases.show"
     item.id
     "details"
-    class="box is-sideless is-marginless"
+    class="is-selectable"
   }}
     <div class="columns is-mobile">
       <div class="column is-10">
@@ -26,7 +26,7 @@
         {{identity/popup-alias params=(array item)}}
       </div>
     </div>
-  {{/linked-block}}
+  {{/list-item-row}}
 {{else}}
   <div class="box is-bottomless has-background-white-bis">
     <div class="columns is-centered">

ui/app/templates/components/identity/item-groups.hbs

@@ -1,7 +1,7 @@
 {{#if model.groupIds}}
   {{#each model.directGroupIds as |gid|}}
     <a href={{href-to "vault.cluster.access.identity.show" "groups" gid "details" }}
-      class="box is-sideless is-marginless"
+      class="list-item-row is-selectable"
       >{{i-con
         glyph='folder'
         size=14
@@ -9,19 +9,20 @@
         }}{{gid}}</a>
   {{/each}}
   {{#each model.inheritedGroupIds as |gid|}}
-  {{#linked-block
+    {{#list-item-row
-     "vault.cluster.access.identity.show" "groups" gid "details"
+       "vault.cluster.access.identity.show" "groups" gid "details"
-      class="box is-sideless is-marginless"
+        class="list-item-row is-selectable"
-  }}
+    }}
-    <a href={{href-to "vault.cluster.access.identity.show" "groups" gid "details" }}
+      <a href={{href-to "vault.cluster.access.identity.show" "groups" gid "details" }}
-       class="has-text-black"
+         class="has-text-black"
       >{{i-con
-        glyph='folder'
+          glyph='folder'
-        size=14
+          size=14
-        class="has-text-grey-light"
+          class="has-text-grey-light"
-        }}{{gid}}</a>
+          }}{{gid}}
+      </a>
       <span class="tag has-text-grey is-size-8">inherited</span>
-      {{/linked-block}}
+    {{/list-item-row}}
   {{/each}}
 {{else}}
   <div class="box is-bottomless has-background-white-bis">

ui/app/templates/components/identity/item-members.hbs

@@ -1,38 +1,37 @@
 {{#if model.hasMembers}}
   {{#each model.memberGroupIds as |gid|}}
-
+    {{#list-item-row
-  {{#linked-block
-    "vault.cluster.access.identity.show"
-    "groups"
-    gid
-    details
-    class="box is-sideless is-marginless"
-  }}
-    <div class="columns is-mobile">
-      <div class="column is-10">
-        <a href={{href-to "vault.cluster.access.identity.show" "groups" gid "details" }}
-          class="is-block has-text-black has-text-weight-semibold"
-          >{{i-con
-            glyph='folder'
-            size=14
-            class="has-text-grey-light"
-            }}{{gid}}</a>
-      </div>
-      <div class="column has-text-right">
-        {{#if model.canEdit}}
-          {{identity/popup-members params=(array model "memberGroupIds" gid)}}
-        {{/if}}
-      </div>
-    </div>
-    {{/linked-block}}
-  {{/each}}
-  {{#each model.memberEntityIds as |gid|}}
-    {{#linked-block
       "vault.cluster.access.identity.show"
       "groups"
       gid
       details
-      class="box is-sideless is-marginless"
+      class="is-selectable"
+    }}
+      <div class="columns is-mobile">
+        <div class="column is-10">
+          <a href={{href-to "vault.cluster.access.identity.show" "groups" gid "details" }}
+            class="is-block has-text-black has-text-weight-semibold"
+            >{{i-con
+              glyph='folder'
+              size=14
+              class="has-text-grey-light"
+              }}{{gid}}</a>
+        </div>
+        <div class="column has-text-right">
+          {{#if model.canEdit}}
+            {{identity/popup-members params=(array model "memberGroupIds" gid)}}
+          {{/if}}
+        </div>
+      </div>
+    {{/list-item-row}}
+  {{/each}}
+  {{#each model.memberEntityIds as |gid|}}
+    {{#list-item-row
+      "vault.cluster.access.identity.show"
+      "groups"
+      gid
+      details
+      class="is-selectable"
     }}
       <div class="columns">
         <div class="column is-10">
@@ -50,7 +49,7 @@
           {{/if}}
         </div>
       </div>
-    {{/linked-block}}
+    {{/list-item-row}}
   {{/each}}
 {{else}}
   <div class="box is-bottomless has-background-white-bis">

ui/app/templates/components/identity/item-parent-groups.hbs

@@ -1,11 +1,11 @@
 {{#if model.parentGroupIds.length}}
   {{#each model.parentGroupIds as |gid|}}
-    {{#linked-block
+    {{#list-item-row
       "vault.cluster.access.identity.show"
       "groups"
       gid
       details
-      class="box is-sideless is-marginless"
+      class="is-selectable"
     }}
       <div class="columns is-mobile">
         <div class="column is-10">
@@ -20,7 +20,7 @@
         <div class="column has-text-right">
         </div>
       </div>
-    {{/linked-block}}
+    {{/list-item-row}}
   {{/each}}
 {{else}}
   <div class="box is-bottomless has-background-white-bis">

ui/app/templates/components/identity/item-policies.hbs

@@ -1,9 +1,9 @@
 {{#each model.policies as |policyName|}}
-  {{#linked-block
+  {{#list-item-row
     "vault.cluster.policy.show"
     "acl"
     item
-    class="box is-sideless is-marginless"
+    class="is-selectable"
   }}
     <div class="columns is-mobile">
       <div class="column is-10">
@@ -18,7 +18,7 @@
         {{/if}}
       </div>
     </div>
-  {{/linked-block}}
+  {{/list-item-row}}
 {{else}}
   <div class="box is-bottomless has-background-white-bis">
     <div class="columns is-centered">
@@ -32,4 +32,3 @@
     </div>
   </div>
 {{/each}}
-

ui/app/templates/partials/secret-list/aws-role-item.hbs

@@ -1,11 +1,11 @@
-{{#linked-block
+{{#list-item-row
   (concat
     "vault.cluster.secrets.backend."
     "credentials"
     (if (not item.id) "-root")
   )
   item.id
-  class="box is-sideless is-marginless"
+  class="is-selectable"
   data-test-secret-link=item.id
 }}
   <div class="columns is-mobile">
@@ -33,5 +33,4 @@
       {{partial 'partials/role-aws/popup-menu'}}
     </div>
   </div>
-{{/linked-block}}
+{{/list-item-row}}
-

ui/app/templates/partials/secret-list/item.hbs

@@ -1,11 +1,11 @@
-{{#linked-block
+{{#list-item-row
   (concat
     "vault.cluster.secrets.backend."
     (if item.isFolder "list" "show")
     (if (not item.id) "-root")
   )
   item.id
-  class="box is-sideless is-marginless"
+  class="is-selectable"
   data-test-secret-link=item.id
 }}
   <div class="columns is-mobile">
@@ -25,4 +25,4 @@
     <div class="column has-text-right">
     </div>
   </div>
-{{/linked-block}}
+{{/list-item-row}}

ui/app/templates/partials/secret-list/pki-cert-item.hbs

@@ -1,11 +1,11 @@
-{{#linked-block
+{{#list-item-row
   (concat
     "vault.cluster.secrets.backend."
     "show"
     (if (not item.id) "-root")
   )
   item.idForNav
-  class="box is-sideless is-marginless linked-block"
+  class="is-selectable"
   data-test-secret-link=item.id
   tagName="div"
 }}
@@ -34,4 +34,4 @@
       {{pki-cert-popup item=item}}
     </div>
   </div>
-{{/linked-block}}
+{{/list-item-row}}

ui/app/templates/partials/secret-list/pki-role-item.hbs

@@ -1,4 +1,4 @@
-{{#linked-block
+{{#list-item-row
   (concat
     "vault.cluster.secrets.backend."
     "credentials"
@@ -7,7 +7,7 @@
   item.backend
   item.id
   queryParams=(hash action="issue")
-  class="box is-sideless is-marginless"
+  class="is-selectable"
   data-test-secret-link=item.id
   tagName="div"
 }}
@@ -37,4 +37,4 @@
       {{partial "partials/role-pki/popup-menu"}}
     </div>
   </div>
-{{/linked-block}}
+{{/list-item-row}}

ui/app/templates/partials/secret-list/ssh-role-item.hbs

@@ -1,11 +1,11 @@
-{{#linked-block
+{{#list-item-row
   (concat
     "vault.cluster.secrets.backend."
     (if (eq item.keyType "ca") "sign" "credentials")
     (if (not item.id) "-root")
   )
   item.id
-  class="box is-sideless is-marginless"
+  class="is-selectable"
   data-test-secret-link=item.id
 }}
   <div class="columns is-mobile">
@@ -40,5 +40,4 @@
       {{/if}}
     </div>
   </div>
-{{/linked-block}}
+{{/list-item-row}}
-

ui/app/templates/vault/cluster/access/identity/aliases/index.hbs

@@ -1,11 +1,11 @@
 {{identity/entity-nav identityType=identityType}}
 {{#if model.meta.total}}
   {{#each model as |item|}}
-    {{#linked-block
+    {{#list-item-row
       "vault.cluster.access.identity.aliases.show"
       item.id
       "details"
-      class="box is-sideless is-marginless"
+      class="is-selectable"
       data-test-identity-row=true
       }}
       <div class="columns is-mobile">
@@ -34,7 +34,7 @@
           {{identity/popup-alias params=(array item) onSuccess=(action "onDelete")}}
         </div>
       </div>
-    {{/linked-block}}
+    {{/list-item-row}}
   {{/each}}
 {{else}}
   <div class="box is-bottomless has-background-white-bis">

ui/app/templates/vault/cluster/access/identity/index.hbs

@@ -1,11 +1,11 @@
 {{identity/entity-nav identityType=identityType}}
 {{#if model.meta.total}}
   {{#each model as |item|}}
-    {{#linked-block
+    {{#list-item-row
       "vault.cluster.access.identity.show"
       item.id
       "details"
-      class="box is-sideless is-marginless"
+      class="is-selectable"
       data-test-identity-row=true
       }}
       <div class="columns is-mobile">
@@ -105,7 +105,7 @@
           {{/popup-menu}}
         </div>
       </div>
-    {{/linked-block}}
+    {{/list-item-row}}
   {{/each}}
 {{else}}
   <div class="box is-bottomless has-background-white-bis">

ui/app/templates/vault/cluster/access/leases/list.hbs

@@ -99,7 +99,7 @@
       (if item.isFolder "vault.cluster.access.leases.list" "vault.cluster.access.leases.show")
       item.id
       }}"
-      class="is-flex box is-sideless is-marginless"
+      class="list-item-row is-selectable"
       data-test-lease-link={{item.id}}
     >
       {{i-con

ui/app/templates/vault/cluster/access/methods.hbs

@@ -14,13 +14,16 @@
 
 {{#each (sort-by "path" model) as |method|}}
   <div
-    class="box is-sideless is-marginless"
+    class="list-item-row"
     data-test-auth-backend-link={{method.id}}
     >
     <div class="level is-mobile">
       <div class="level-left">
         <div>
-          {{i-con glyph="folder" size=14 class="has-text-grey-light"}} <span data-test-path data-test-id={{method.id}}>{{method.path}}</span>
+          {{i-con glyph="folder" size=14 class="has-text-grey-light"}}
+          <span data-test-path data-test-id={{method.id}} class="has-text-weight-semibold has-text-grey">
+            {{method.path}}
+          </span>
           <br />
           <span class="tag">
             {{#if (eq method.type 'plugin')}}

ui/app/templates/vault/cluster/policies/index.hbs

@@ -48,25 +48,28 @@
   {{#if model.meta.total}}
     {{#each model as |item|}}
       {{#if (eq item.id "root")}}
-        <div class="is-flex box is-sideless is-marginless" data-test-policy-item>
+        <div class="list-item-row is-flex" data-test-policy-item>
           {{i-con
             glyph='file'
             size=14
             class="has-text-grey-light"
           }}
           <div>
-            <span class="has-text-weight-semibold" data-test-policy-name>{{item.id}}</span>
+            <span class="has-text-weight-semibold has-text-grey" data-test-policy-name>
+              {{item.id}}
+            </span>
             <p class="help has-text-grey">
-            The <code>root</code> policy does not contain any rules but can do anything within Vault. It should be used with extreme care.
+              The <code>root</code> policy does not contain any rules but can
+              do anything within Vault. It should be used with extreme care.
             </p>
           </div>
         </div>
       {{else}}
-        {{#linked-block
+        {{#list-item-row
           "vault.cluster.policy.show"
           policyType
           item.id
-          class="box is-sideless is-marginless"
+          class="is-selectable"
           data-test-policy-link=item.id
         }}
           <div class="columns is-mobile">
@@ -135,7 +138,7 @@
               {{/popup-menu}}
             </div>
           </div>
-        {{/linked-block}}
+        {{/list-item-row}}
       {{/if}}
     {{else}}
       <div class="box is-sideless">

ui/app/templates/vault/cluster/secrets/backends.hbs

@@ -13,10 +13,10 @@
 </PageHeader>
 
 {{#each supportedBackends as |backend|}}
-  {{#linked-block
+  {{#list-item-row
     "vault.cluster.secrets.backend.list-root"
     backend.id
-    class="box is-sideless is-marginless has-pointer"
+    class="is-selectable"
     data-test-secret-backend-row=backend.id
   }}
     <div class="level is-mobile">
@@ -65,16 +65,16 @@
         </div>
       </div>
     </div>
-  {{/linked-block}}
+  {{/list-item-row}}
 {{/each}}
 {{#each unsupportedBackends as |backend|}}
-  <div class="box is-sideless is-marginless"
+  <div class="list-item-row"
        data-test-secret-backend-row={{backend.id}}
     >
     <div class="level is-mobile">
       <div class="level-left">
         <div>
-          <div data-test-secret-path class="has-text-weight-semibold">
+          <div data-test-secret-path class="has-text-weight-semibold has-text-grey">
             {{i-con glyph="folder" size=14 class="has-text-grey-light"}} {{backend.path}}
           </div>
           <span class="tag">