Prototype hub and spoke version of the launcher

[catrobson]

Implement a prototyped version of the hub-and-spoke version of the launcher as an alternative to user test against the vertical scrolling version of the launcher.

Designs: https://redhat.invisionapp.com/share/UJMIGIDFXYV

Usability feedback from design prototype we'll also incorporate:

• See if we can get the "Set Up New Application" button above the fold of the window scrolling. IXD and Dev to collaborate as screen is created to see how it works on various screen sizes and adjust.

[quintesse]

Very nice! I like it.

I would suggest one simplification though: justy make the "select mission" and the "select runtime" simple lists instead of the current 2-column one with its complex enabling/disabling.

We had come up with a new idea, something like this:

Where you just select a Mission from a list and then it will show you the possible Runtimes. For developers that already know what Runtime they want there's a filter at the top allowing them to choose one of the Runtime types.

This greatly reduces the complexity of that choice. And perhaps this idea could be integrated into this hub and spoke design?

The idea being that you click "Select Mission", you get the above list, the dev selects the Mission (and a Runtime) and just like in your mock-up both the Mission and Runtime "cards" would get updated on the main screen.

If you click on "Select Runtime" on the other hand you'd just get a list of Runtimes.

If you first select a Mission and afterwards go to the Runtimes, the list would be limited to the ones that the Mission supports. If you first select a Runtime and afterwards go to the Missions, the list would only show the ones that support the Runtime.

Wdyt?

[slemeur]

@catrobson : From the mockup, I'm worry that it is likely going to increase the number of clicks and the number of different screens that the user has to interact with. As a result, the time spent in the wizard might be longer that what it should be.

@quintesse : I like your proposal. I think the selector of runtimes should be more obvious (and visual, using the runtime's icon - so the user does not need to read to choose one). I'm definitely in favor of avoid having the 2 columns choices between runtimes/missions. It will make the flow easier to understand and easier to scale on different screen sizes. We would also be able to use a longer description for the missions and avoid the "more" option.

[quintesse]

@slemeur about the number of clicks: I think the whole idea of the hub & spoke model is to present the user with most options pre-filled to reasonable defaults. So for example, I think the Pipeline should already be pre-selected, probably with the most advanced option available (but perhaps opinions differ on that).

@catrobson Now looking at this design again I realized that we're missing the cluster selection for the Launcher, And we wouldn't have a pipeline selection. So the design needs to be able to switch between those two modes. (In our case Cluster selection and GitHub setup are probably of equal importance)

Also I'd make the GitHub "card" part form, asking for the name of the repository and the organization the users wants to put it in, and part setup with the button. Or at least show the values that the app will have pre-selected for you so you know that you have to click there if you are not happy with the defaults. (All to make sure that the user won't unnecessarily click through all the pages as mentioned by @slemeur )

[dlabrecq]

Below are instructions for running the hub & spoke demo I created -- I don't have a place to host this ATM.

The ngx-launcher repo contains the simple demo we've tested before. I've also integrated the changes into fabric8-ui, but that's slightly more involved to setup.

The fabric8-ui demo will allow users to fully create an application, while ngx-launcher is just a simulation (good as a backup). The caveat is that you need an Openshift.io account. In addition, typically only one or two applications can be created successfully before running out of space. When that happens, you can reset your fabric8-ui environment to clean up.

fabric8-ui (full) demo

1. git clone https://github.com/dlabrecq/fabric8-ui.git
2. cd fabric8-ui
3. git checkout hub-and-spoke-871
4. npm install
5. setenv HOST localhost
6. bash
7. source environments/openshift-prod-cluster.sh
8. npm run start
9. http://localhost:3000/

ngx-launcher (simple) demo

1. git clone https://github.com/dlabrecq/ngx-launcher.git
2. cd ngx-launcher
3. git checkout hub-and-spoke-871
4. npm install
5. npm run start:demo
6. http://localhost:8001

[catrobson]

Added edit icons into the design here: https://redhat.invisionapp.com/share/SVHP0ZMU7QD

I think we should add these as a interim solution that allows editing of these cards, and the complete and close this story in favor of the design thinking sessions as a way to extend design options around this effort.

[slemeur]

+1 I don't think we should be spending more time on a new "Hub & Spoke" wizard at this moment. We have broader problems to solve which a new wizard is not going to help on yet.

[serenamarie125]

@catrobson how do we indicate that this is no longer is progress?

[catrobson]

Closing this issue and we can open a new one if any further work is required.