Merge pull request #5758 from hashicorp/ui-empty-states

UI: Empty state styles
hashicorp · Nov 16, 2018 · f30e3db · f30e3db
2 parents f6c8400 + cec92e3
commit f30e3db
Show file tree

Hide file tree

Showing 35 changed files with 417 additions and 343 deletions.
diff --git a/ui/app/components/doc-link.js b/ui/app/components/doc-link.js
@@ -11,9 +11,10 @@ export default Component.extend({
 
   target: '_blank',
   rel: 'noreferrer noopener',
+  host: 'https://www.vaultproject.io',
 
   path: '/',
-  href: computed('path', function() {
-    return `https://www.vaultproject.io${this.get('path')}`;
+  href: computed('host', 'path', function() {
+    return `${this.host}${this.path}`;
   }),
 });
diff --git a/ui/app/components/block-empty.js → ui/app/components/empty-action-namespaces.js b/ui/app/components/block-empty.js → ui/app/components/empty-action-namespaces.js
diff --git a/ui/app/components/empty-state.js b/ui/app/components/empty-state.js
@@ -0,0 +1,6 @@
+import OuterHTML from './outer-html';
+
+export default OuterHTML.extend({
+  title: null,
+  message: null,
+});
diff --git a/ui/app/components/learn-link.js b/ui/app/components/learn-link.js
@@ -0,0 +1,5 @@
+import DocLink from './doc-link';
+
+export default DocLink.extend({
+  host: 'https://learn.hashicorp.com',
+});
diff --git a/ui/app/components/list-view.js b/ui/app/components/list-view.js
@@ -6,9 +6,17 @@ export default Component.extend({
   tagName: '',
   items: null,
   itemNoun: 'item',
+  // the dasherized name of a component to render
+  // in the EmptyState component if there are no items in items.length
+  emptyActions: '',
+
+  emptyTitle: computed('itemNoun', function() {
+    let items = pluralize(this.get('itemNoun'));
+    return `No ${items} yet`;
+  }),
 
   emptyMessage: computed('itemNoun', function() {
     let items = pluralize(this.get('itemNoun'));
-    return `There are currently no ${items}`;
+    return `Your ${items} will be listed here. Add your first ${this.get('itemNoun')} to get started.`;
   }),
 });
diff --git a/ui/app/controllers/vault/cluster/access/leases/list.js b/ui/app/controllers/vault/cluster/access/leases/list.js
@@ -49,6 +49,21 @@ export default Controller.extend({
     return !!utils.keyIsFolder(this.get('filter'));
   }),
 
+  emptyTitle: computed('baseKey.id', 'filter', 'filterIsFolder', function() {
+    let id = this.get('baseKey.id');
+    let filter = this.filter;
+    if (id === '') {
+      return 'There are currently no leases.';
+    }
+    if (this.filterIsFolder) {
+      if (filter === id) {
+        return `There are no leases under &quot;${filter}&quot;.`;
+      } else {
+        return `We couldn't find a prefix matching &quot;${filter}&quot;.`;
+      }
+    }
+  }),
+
   actions: {
     setFilter(val) {
       this.set('filter', val);

diff --git a/ui/app/styles/components/empty-state.scss b/ui/app/styles/components/empty-state.scss
@@ -0,0 +1,38 @@
+.empty-state {
+  align-items: center;
+  color: $grey;
+  display: flex;
+  background: $ui-gray-050;
+  justify-content: center;
+  padding: $spacing-xxl $spacing-s;
+  box-shadow: 0 -2px 0 -1px $ui-gray-300;
+}
+
+.empty-state-content {
+  max-width: 320px;
+}
+
+.empty-state-title {
+  color: $grey;
+  font-size: $size-4;
+  font-weight: $font-weight-semibold;
+  line-height: 1.2;
+  margin-bottom: $spacing-xs;
+}
+
+.empty-state-actions {
+  margin-top: $spacing-xs;
+
+  a,
+  .link,
+  a:not(.button):not(.file-delete-button):not(.tag) {
+    color: $blue;
+    font-size: $size-8;
+    font-weight: $font-weight-semibold;
+    text-decoration: none;
+  }
+
+  > * + * {
+    margin-left: $spacing-s;
+  }
+}
diff --git a/ui/app/styles/core.scss b/ui/app/styles/core.scss
@@ -49,6 +49,7 @@
 @import "./components/console-ui-panel";
 @import "./components/control-group";
 @import "./components/doc-link";
+@import "./components/empty-state";
 @import "./components/env-banner";
 @import "./components/features-selection";
 @import "./components/form-section";

diff --git a/ui/app/styles/utils/_colors.scss b/ui/app/styles/utils/_colors.scss
@@ -21,7 +21,7 @@ $ui-gray-050: #F7F8FA;
 $ui-gray-100: #EBEEF2;
 $ui-gray-200: #DCE0E6;
 $ui-gray-300: #BAC1CC;
-$ui-gray-500: #6a7786;
+$ui-gray-500: #6F7682;
 $ui-gray-700: #525761;
 $ui-gray-800: #373A42;
 $ui-gray-900: #1F2124;

diff --git a/ui/app/templates/components/block-empty.hbs b/ui/app/templates/components/block-empty.hbs
diff --git a/ui/app/templates/components/empty-action-namespaces.hbs b/ui/app/templates/components/empty-action-namespaces.hbs
@@ -0,0 +1,7 @@
+{{#link-to "vault.cluster.access.namespaces.create"}}
+  Create namespace
+{{/link-to}}
+
+<LearnLink @path="/vault/security/namespaces">
+  Learn More
+</LearnLink>
diff --git a/ui/app/templates/components/empty-state.hbs b/ui/app/templates/components/empty-state.hbs
@@ -0,0 +1,21 @@
+<div class="empty-state">
+  <div class="empty-state-content">
+    <h3 class="empty-state-title">
+      {{title}}
+    </h3>
+    {{#if message}}
+    <p class="empty-state-message">
+      {{message}}
+    </p>
+    {{/if}}
+    {{#if hasBlock}}
+      <div class="empty-state-actions">
+        {{yield}}
+      </div>
+    {{else if emptyActions}}
+      <div class="empty-state-actions">
+        {{component emptyActions}}
+      </div>
+    {{/if}}
+  </div>
+</div>
diff --git a/ui/app/templates/components/identity/entity-nav.hbs b/ui/app/templates/components/identity/entity-nav.hbs
@@ -33,10 +33,12 @@
     </ul>
   </nav>
 </div>
-<div class="box is-sideless has-background-grey-lighter has-short-padding is-marginless">
-  <div class="level">
-    <div class="level-left">
-      {{identity/lookup-input type=identityType}}
+{{#if model.meta.total}}
+  <div class="box is-sideless has-background-grey-lighter has-short-padding is-marginless">
+    <div class="level">
+      <div class="level-left">
+        {{identity/lookup-input type=identityType}}
+      </div>
     </div>
   </div>
-</div>
+{{/if}}
diff --git a/ui/app/templates/components/identity/item-alias/alias-metadata.hbs b/ui/app/templates/components/identity/item-alias/alias-metadata.hbs
@@ -17,15 +17,15 @@
     </div>
   </div>
 {{else}}
-  <div class="box is-bottomless has-background-white-bis">
-    <div class="columns is-centered">
-      <div class="column is-half has-text-centered">
-        <div class="box is-shadowless has-background-white-bis">
-          <p class="has-text-grey">
-            There is no metadata associated with {{model.name}}.
-          </p>
-        </div>
-      </div>
-    </div>
-  </div>
+  <EmptyState
+    @title="No metadata for {{model.name}} yet"
+    @message="You can store custom data that you want to associate with a {{lowercase (humanize model.identityType)}}. Edit this {{lowercase (humanize model.identityType)}} to get started."
+  >
+    {{#link-to "vault.cluster.access.identity.aliases.edit" model.id tagName="button" class="link"}}
+      Edit {{lowercase (humanize model.identityType)}}
+    {{/link-to}}
+    <LearnLink @path="/vault/identity-access-management/iam-identity">
+      Learn More
+    </LearnLink>
+  </EmptyState>
 {{/each-in}}
diff --git a/ui/app/templates/components/identity/item-aliases.hbs b/ui/app/templates/components/identity/item-aliases.hbs
@@ -28,15 +28,7 @@
     </div>
   {{/linked-block}}
 {{else}}
-  <div class="box is-bottomless has-background-white-bis">
-    <div class="columns is-centered">
-      <div class="column is-half has-text-centered">
-        <div class="box is-shadowless has-background-white-bis">
-          <p class="has-text-grey" data-test-no-entity-aliases-text>
-            There are no {{model.identityType}} aliases for {{model.name}}.
-          </p>
-        </div>
-      </div>
-    </div>
-  </div>
+  <EmptyState
+    @title="No {{model.identityType}} aliases for {{model.name}} yet"
+  />
 {{/each}}
diff --git a/ui/app/templates/components/identity/item-groups.hbs b/ui/app/templates/components/identity/item-groups.hbs
@@ -25,15 +25,7 @@
     {{/linked-block}}
   {{/each}}
 {{else}}
-  <div class="box is-bottomless has-background-white-bis">
-    <div class="columns is-centered">
-      <div class="column is-half has-text-centered">
-        <div class="box is-shadowless has-background-white-bis">
-          <p class="has-text-grey">
-            {{model.name}} is not a member of any groups.
-          </p>
-        </div>
-      </div>
-    </div>
-  </div>
+  <EmptyState
+    @title="{{model.name}} is not a member of any groups."
+  />
 {{/if}}
diff --git a/ui/app/templates/components/identity/item-members.hbs b/ui/app/templates/components/identity/item-members.hbs
@@ -52,15 +52,7 @@
     {{/linked-block}}
   {{/each}}
 {{else}}
-  <div class="box is-bottomless has-background-white-bis">
-    <div class="columns is-centered">
-      <div class="column is-half has-text-centered">
-        <div class="box is-shadowless has-background-white-bis">
-          <p class="has-text-grey">
-            There are no members in this group.
-          </p>
-        </div>
-      </div>
-    </div>
-  </div>
+  <EmptyState
+    @title="No members in this group yet"
+  />
 {{/if}}
diff --git a/ui/app/templates/components/identity/item-metadata.hbs b/ui/app/templates/components/identity/item-metadata.hbs
@@ -14,15 +14,7 @@
     </div>
   </div>
 {{else}}
-  <div class="box is-bottomless has-background-white-bis">
-    <div class="columns is-centered">
-      <div class="column is-half has-text-centered">
-        <div class="box is-shadowless has-background-white-bis">
-          <p class="has-text-grey">
-            There is no metadata associated with {{model.name}}.
-          </p>
-        </div>
-      </div>
-    </div>
-  </div>
+  <EmptyState
+    @title="No metadata associated with {{model.name}} yet"
+  />
 {{/each-in}}
diff --git a/ui/app/templates/components/identity/item-parent-groups.hbs b/ui/app/templates/components/identity/item-parent-groups.hbs
@@ -23,15 +23,7 @@
     {{/linked-block}}
   {{/each}}
 {{else}}
-  <div class="box is-bottomless has-background-white-bis">
-    <div class="columns is-centered">
-      <div class="column is-half has-text-centered">
-        <div class="box is-shadowless has-background-white-bis">
-          <p class="has-text-grey">
-            This group has no parent groups.
-          </p>
-        </div>
-      </div>
-    </div>
-  </div>
+  <EmptyState
+    @title="This group has no parent groups yet"
+  />
 {{/if}}
diff --git a/ui/app/templates/components/identity/item-policies.hbs b/ui/app/templates/components/identity/item-policies.hbs
@@ -20,15 +20,7 @@
     </div>
   {{/linked-block}}
 {{else}}
-  <div class="box is-bottomless has-background-white-bis">
-    <div class="columns is-centered">
-      <div class="column is-half has-text-centered">
-        <div class="box is-shadowless has-background-white-bis">
-          <p class="has-text-grey" data-test-no-entity-aliases-text>
-            There are no policies associated with {{model.name}}.
-          </p>
-        </div>
-      </div>
-    </div>
-  </div>
+  <EmptyState
+    @title="No policies associated with {{model.name}} yet"
+  />
 {{/each}}
diff --git a/ui/app/templates/components/list-view.hbs b/ui/app/templates/components/list-view.hbs
@@ -5,15 +5,9 @@
     {{/each}}
   </div>
 {{else}}
-  <div class="box is-bottomless has-background-white-bis">
-    <div class="columns is-centered">
-      <div class="column is-half has-text-centered">
-        <div class="box is-shadowless has-background-white-bis">
-          <p class="has-text-grey">
-            {{emptyMessage}}
-          </p>
-        </div>
-      </div>
-    </div>
-  </div>
+  <EmptyState
+    @title={{this.emptyTitle}}
+    @message={{this.emptyMessage}}
+    @emptyActions={{this.emptyActions}}
+  />
 {{/if}}
diff --git a/ui/app/templates/partials/secret-form-show.hbs b/ui/app/templates/partials/secret-form-show.hbs
@@ -1,11 +1,22 @@
 {{#if (and isV2 modelForData.destroyed)}}
-  <BlockEmpty>
-    Version {{modelForData.version}} of this secret has been permanently destroyed.
-  </BlockEmpty>
+  <EmptyState
+    @title="Version {{modelForData.version}} of this secret has been permanently destroyed"
+    @message="A version that has been permanently deleted cannot be restored. You can see other versions of this secret in the History menu."
+  >
+    <DocLink @path="/docs/secrets/kv/kv-v2.html">
+      Learn More
+    </DocLink>
+  </EmptyState>
 {{else if (and isV2 modelForData.deleted)}}
-  <BlockEmpty>
-    Version {{modelForData.version}} of this secret has been deleted.
-  </BlockEmpty>
+  <EmptyState
+    @title="Version {{modelForData.version}} of this secret has been deleted"
+    @message="A version that has been deleted but can be undeleted using the Version {{modelForData.version}} menu above.
+      You can also see other versions of this secret in the History menu."
+  >
+    <DocLink @path="/docs/secrets/kv/kv-v2.html">
+      Learn More
+    </DocLink>
+  </EmptyState>
 {{else}}
   {{#if showAdvancedMode}}
     {{json-editor