Table Empty States V2

[MarkDeMaria]

@jwforres @benjaminapetersen

Fixes #109
Previous PR #125

Replaces empty states for:
-Routes
-Builds, Build Summary, Build Log
-Deployments
-Events
-Images
-Other Resources
-Pods
-Services
-Storage

[spadgett]

@MarkDeMaria I think we should add in an "Add to Project" button for things that don't have create forms. Here is an example from the pipelines page:

https://github.com/openshift/origin-web-console/blob/master/app/views/pipelines.html#L22-L38

Can you try this message on one page and post a screenshot of how it looks?

No pods have been added to project my-project.

[ Add to Project ]

[MarkDeMaria]

@spadgett

For reference, we explored adding buttons to pages that don't have them.

Here's a sample with a button:

[spadgett]

I prefer it with the button, although i wouldn't say no pods... twice. One h2 with the sentence should be enough

[openshift-bot]

Origin Web Console Action Required: Pull request cannot be automatically merged, please rebase your branch from latest HEAD and push again

[MarkDeMaria]

@ajacobs21e, could you offer some design input on this PR?

Currently, empty state tables look like this. If we have an option to create/add something, like a route, we put the button in the top right. However, I believe Routes are the only component that allows additions.

This is the updated empty state. Note the 'Add' buttons placement is the same.

For pages that cannot be added, @spadgett is suggesting that we add a 'Add to Project' button that would simply go to the 'Add to Project' page, not a page specific to say, creating pods or some specific component.

What are your thoughts? Thanks!

[ajacobs21e]

Is there any benefit to showing the table column headers for an empty state?

If not, should we switch to the empty state pattern for all empty tables?
https://www.patternfly.org/pattern-library/content-views/table-view/#_design

On Thu, Sep 15, 2016 at 7:38 PM, Mark DeMaria notifications@github.com
wrote:

@ajacobs21e https://github.com/ajacobs21e, could you offer some design
input on this PR?

Currently, empty state tables look like this. If we have an option to
create/add something, like a route, we put the button in the top right.
However, I believe Routes are the only component that allows additions.
[image: image]
https://cloud.githubusercontent.com/assets/19572090/18560352/38792b26-7b49-11e6-9131-9cdf15f80af0.png

This is the updated empty state. Note the 'Add' buttons placement is the
same.
[image: image]
https://cloud.githubusercontent.com/assets/19572090/18560418/6c46f5e6-7b49-11e6-91af-768bb02ee446.png

For pages that cannot be added, @spadgett https://github.com/spadgett
is suggesting that we add a 'Add to Project' button that would simply go to
the 'Add to Project' page, not a page specific to say, creating pods or
some specific component.
[image: image]
https://cloud.githubusercontent.com/assets/19572090/18560447/91adf6d6-7b49-11e6-98fd-7956e11dd17c.png

What are your thoughts? Thanks!

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#497 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AGHlfpdCoVvafhXR4XCYIUPAnYaj5z32ks5qqYKjgaJpZM4Jvwtq
.

Allie Jacobs
UXD

calendar
https://www.google.com/calendar/b/1/embed?src=ajacobs@redhat.com&ctz=America/New_York

[jwforres]

@ajacobs21e I have several concerns/questions if we were going to use the
patternfly empty state pattern

• It's designed assuming you always have a big descriptive block of text.
  Should we just grab descriptions from the docs about what this resource is
  to fill up that content?
• It has a weird generic + icon, which personally I think looks like a
  health/hospital symbol. But we don't have icons for everything so we can't
  just replace with something that makes sense everywhere.
• It assumes you have an action you can perform. Hence mark's question on
  whether we use 'Add to Project' in lieu of having individual Create actions.

Those points aside I believe there is history in this PR as to other
concerns about trying to use the patternfly empty state @spadgett or
@MarkDeMaria may remember the specifics

On Fri, Sep 16, 2016 at 6:45 AM, Allie Jacobs notifications@github.com
wrote:

Is there any benefit to showing the table column headers for an empty
state?

If not, should we switch to the empty state pattern for all empty tables?
https://www.patternfly.org/pattern-library/content-views/
table-view/#_design

On Thu, Sep 15, 2016 at 7:38 PM, Mark DeMaria notifications@github.com
wrote:

@ajacobs21e https://github.com/ajacobs21e, could you offer some design
input on this PR?

Currently, empty state tables look like this. If we have an option to
create/add something, like a route, we put the button in the top right.
However, I believe Routes are the only component that allows additions.
[image: image]
<https://cloud.githubusercontent.com/assets/19572090/18560352/38792b26-
7b49-11e6-9131-9cdf15f80af0.png>

This is the updated empty state. Note the 'Add' buttons placement is the
same.
[image: image]
<https://cloud.githubusercontent.com/assets/19572090/18560418/6c46f5e6-
7b49-11e6-91af-768bb02ee446.png>

For pages that cannot be added, @spadgett https://github.com/spadgett
is suggesting that we add a 'Add to Project' button that would simply go
to
the 'Add to Project' page, not a page specific to say, creating pods or
some specific component.
[image: image]
<https://cloud.githubusercontent.com/assets/19572090/18560447/91adf6d6-
7b49-11e6-98fd-7956e11dd17c.png>

What are your thoughts? Thanks!

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#497
issuecomment-247397705>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/
AGHlfpdCoVvafhXR4XCYIUPAnYaj5z32ks5qqYKjgaJpZM4Jvwtq>
.

Allie Jacobs
UXD

calendar
<https://www.google.com/calendar/b/1/embed?src=ajacobs@redhat.com&ctz=
America/New_York>

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#497 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABZk7WkqTXcd5XVLFygdhVvDKtOOStdbks5qqnNQgaJpZM4Jvwtq
.

[MarkDeMaria]

@jwforres @ajacobs21e

I believe the biggest argument for not using the PF Empty State was the fact that we're not using it everywhere. See @spadgett 's comment here

[spadgett]

We added the original empty state messages before the Patternfly empty state pattern existed. If we use the Patternfly style, we should use it everywhere. But we've had some trouble making the Patternfly style fit in some places, in particular where the entire page isn't blank, only a smaller area.

[MarkDeMaria]

Sam, can you list some pages that are using the old empty state that don't work well with the PF state?

[spadgett]

We have empty state messages in a dozen files. I'd rather not mix styles.

$ ag --html -l empty-state
app/index.html
app/views/attach-pvc.html
app/views/browse/build-config.html
app/views/browse/pod.html
app/views/create.html
app/views/directives/deploy-image.html
app/views/directives/deployment-metrics.html
app/views/directives/logs/_log-viewer.html
app/views/directives/pod-metrics.html
app/views/modals/debug-terminal.html
app/views/pipelines.html
app/views/projects.html

We'd need to check how the Patternfly styles look in the debug terminal modal, the build trends chart, log viewer, metrics page, and monitoring page (which includes the empty state message inside expanded list view rows in some cases).

If we switch, I'd like to switch everywhere and address the concerns that @jwforres raises: #497 (comment)

Note that our existing styles are pretty close to Patternfly without the hospital icon and outer border.

[ajacobs21e]

these responses got lost while I was traveling, sorry!

• It's designed assuming you always have a big descriptive block of text.
  Should we just grab descriptions from the docs about what this resource is
  to fill up that content?

If there's no helpful text there's no need to add it. It could be text explaining why there are no results. Is it because the user hasn't added anything to their project? Or is it because they have a source with no route (for example)? Or is there a problem?

• It has a weird generic + icon, which personally I think looks like a
  health/hospital symbol. But we don't have icons for everything so we can't
  just replace with something that makes sense everywhere.

If the prompt is to add something, the add icon makes sense.

• It assumes you have an action you can perform. Hence mark's question on
  whether we use 'Add to Project' in lieu of having individual Create actions.

Are we able to know that the reason there are zero pods because you haven't added anything to your project yet, and therefore "Add to Project" would be the appropriate action here?
For something like routes I would rather see the create route action here than add to project, again if that's the right context.

[rhamilto]

I prefer the existing console empty-state-message design over the empty table. And browse/pipelines [1] is now an outlier because it features the empty-state-message design, but the other browse pages do not (we've another outlier in quota [2], but it's a special one-off). I think we should pick up the work in this PR (and add new pages like stateful sets). @jwforres, @spadgett, what do you think? If we're not going to switch, we should at least close this PR and #109.

[1]

[2]

[spadgett]

Replaced by #2259