Design: Applications widget (5)

[dlabrecq]

The applications widget initially shows an empty state with a button to add an application. After adding an application, I can navigate to the pipelines page and see my progress. However, the empty state remains for the application widget until the application is staged. Currently, the design shows only the stage and run deployment environments.

Verification criteria:

• Empty state for application widget captured as sketch file in google, InVision, including interaction and visual design
• Reviewed with Dan, UXD
• Story created for implementation

[lwrigh]

@catrobson Here's a first pass at wireframes for an in progress applications widget: https://redhat.invisionapp.com/share/4RIQ3769XTV

[joshuawilson]

@dlabrecq are you working on this? or is it still under design?

[dlabrecq]

This is under design

[lwrigh]

Updated the wireframes to include a spinner and a link for navigation instead of a button within the applications widget.

[catrobson]

@lwrigh looks good. I think this is good to go from a design standpoint. @dlabrecq do you need a dev story or want to use this as your dev story?

[dlabrecq]

This one is fine

[dlabrecq]

Having some trouble implementing this design. When a pipeline is not in the stage or run environment, we're showing an in-progress state. However, we're not accounting any failed pipelines as shown below.

To add complication, there may be one or more failed pipelines while one or more pipelines are in-progress. It was also suggested that there may also be other states that we haven't accounted for; however, that needs clarification?

Screenshot of Application widget Vs the pipelines page

[lwrigh]

@dlabrecq In that case would it be possible to surface the failed pipeline in the applications widget? Would it be possible to show different stages even if set up is still in progress?

[dlabrecq]

I believe we can determine which pipeline failed, but there may be more than one. We could display the number of failed pipelines?

We could show a different layout if all applications are in-progress. (We do that now with the empty state.) However, after one or more applications move to the stage and/or run states, we only have the header to work with.

We really don't have a lot of room in the current widget to display all possible stages, unless we mimic the pipelines page.

[lwrigh]

Account for error and failed states, update designs with those taken into mind.

[lwrigh]

Here's the link to the Invision doc that features different options for showing different states within the applications widget: https://redhat.invisionapp.com/share/6SLYKNDUGVN

[dlabrecq]

I like the screen with the in-progress and failed badges. That would leave room if we want to add a badge for a canceled state later.

[lwrigh]

Updated wireframes can be viewed here: https://redhat.invisionapp.com/share/AHMBSXZK76D#/306489730_1-_Refined_Applications_Widget Most of the actions that a user could take from the widget have been taken out and the widget now serves as more of an overview. If the user would want to dig deeper and complete any actions they would have to go to the full pipelines page. A view all pipelines link has been added to the widget.