Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UI: Empty state styles #5758

Merged
merged 16 commits into from
Nov 16, 2018
Merged

UI: Empty state styles #5758

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
865d10e
Add Empty State component
joshuaogle Nov 2, 2018
f692420
Remove old BlockEmpty component
joshuaogle Nov 3, 2018
ab00bc8
Replaced more old empty states
joshuaogle Nov 3, 2018
4767923
Better empty state copy
joshuaogle Nov 3, 2018
1bf4886
Fix prettier style on List View test
joshuaogle Nov 10, 2018
c4c987e
add learn link component
meirish Nov 14, 2018
5f71ee9
use outer-html component as a base for empty state
meirish Nov 14, 2018
4d8e6fa
use anchors and LearnLink component
meirish Nov 14, 2018
a80b649
move Add -> Create, add emptyTitle for leases list
meirish Nov 14, 2018
98ccba4
lint
meirish Nov 14, 2018
2d864cb
don't use bulma classes for empty-state
meirish Nov 15, 2018
5197a53
don't show disable button for groups
meirish Nov 15, 2018
08bbfd6
make sure tabs show up on identity show pages
meirish Nov 15, 2018
868eca5
use EmptyState on secrets list
meirish Nov 15, 2018
1036b29
pass emptyActions through list view component and render into EmptyState
meirish Nov 15, 2018
cec92e3
Merge branch 'master' into ui-empty-states
joshuaogle Nov 16, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions ui/app/components/doc-link.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}`;
}),
});
0 ui/app/components/block-empty.js → ui/app/components/empty-action-namespaces.js
View file
Open in desktop
File renamed without changes.
6 changes: 6 additions & 0 deletions ui/app/components/empty-state.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import OuterHTML from './outer-html';

export default OuterHTML.extend({
title: null,
message: null,
});
5 changes: 5 additions & 0 deletions ui/app/components/learn-link.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import DocLink from './doc-link';

export default DocLink.extend({
host: 'https://learn.hashicorp.com',
});
10 changes: 9 additions & 1 deletion ui/app/components/list-view.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.`;
}),
});
15 changes: 15 additions & 0 deletions ui/app/controllers/vault/cluster/access/leases/list.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 "${filter}".`;
} else {
return `We couldn't find a prefix matching "${filter}".`;
}
}
}),

actions: {
setFilter(val) {
this.set('filter', val);
Expand Down
38 changes: 38 additions & 0 deletions ui/app/styles/components/empty-state.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
meirish marked this conversation as resolved.
Show resolved Hide resolved
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;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we have these styles in a var or mixin somewhere? I feel like we use them in a few places.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No we don't, but that's a good idea

font-size: $size-8;
font-weight: $font-weight-semibold;
text-decoration: none;
}

> * + * {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeeesss! Lobotomised owl! (with one ear!!) 🙌

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lol, I hadn't heard that one yet. That's fantastic. It is a handy selector though, especially in nav lists like this

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah there was a great list apart article on it a few years back - https://alistapart.com/article/axiomatic-css-and-lobotomized-owls

margin-left: $spacing-s;
}
}
1 change: 1 addition & 0 deletions ui/app/styles/core.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down
2 changes: 1 addition & 1 deletion ui/app/styles/utils/_colors.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
11 changes: 0 additions & 11 deletions ui/app/templates/components/block-empty.hbs
View file
Open in desktop

This file was deleted.

7 changes: 7 additions & 0 deletions ui/app/templates/components/empty-action-namespaces.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{{#link-to "vault.cluster.access.namespaces.create"}}
Create namespace
{{/link-to}}

<LearnLink @path="/vault/security/namespaces">
Learn More
</LearnLink>
21 changes: 21 additions & 0 deletions ui/app/templates/components/empty-state.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
12 changes: 7 additions & 5 deletions ui/app/templates/components/identity/entity-nav.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}}
22 changes: 11 additions & 11 deletions ui/app/templates/components/identity/item-alias/alias-metadata.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}}
14 changes: 3 additions & 11 deletions ui/app/templates/components/identity/item-aliases.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}}
14 changes: 3 additions & 11 deletions ui/app/templates/components/identity/item-groups.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}}
14 changes: 3 additions & 11 deletions ui/app/templates/components/identity/item-members.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}}
14 changes: 3 additions & 11 deletions ui/app/templates/components/identity/item-metadata.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}}
14 changes: 3 additions & 11 deletions ui/app/templates/components/identity/item-parent-groups.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}}
14 changes: 3 additions & 11 deletions ui/app/templates/components/identity/item-policies.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}}
16 changes: 5 additions & 11 deletions ui/app/templates/components/list-view.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}}
23 changes: 17 additions & 6 deletions ui/app/templates/partials/secret-form-show.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand Down
Loading