Instruct user about API Profile tabs after adding an API

[bajiat]

Implement a Bootstrap Tour that instructs the user to go to the proxy settings after the user has added an API. Otherwise, users who want to use a proxy might not know they need to set it in the Proxy tab.

Definition of done

• Implement the described scenarios using the BootStrap Tour: http://bootstraptour.com/api/

Design

Scenarios

1. API Owner adds an API and is redirected to Details tab in API Profile. Using BS Tour, User is given instructions to browse to Proxies tab and asked to add a proxy.
2. API Admin adds an API but has not configured a proxy before. This results with Proxy tab not appearing in API profile. In Profile->settings. BS tour should prompt the user there to add a proxy.

Wireframes

• Scenario 1

1. After API Owner is redirected to Details tab, BS tour start automatically, Dialogue indicates Proxy tab.
   Tab gets highlighted (if possible)
   
2. (Clicking next) User gets redirected to Proxy tab and BS tour proceeds.
   
3. (clicking next) BS tour ends with prompting user to save proxy settings and to use API Management functionalities.
   

• Scenario 2

1. When no Proxy is available for the API to attach, BS tour guides Adminr to go to Settings under profile name to add a proxy (API Umbrella, Kong, or other)
   
2. (clicking next)BS tour navigates to Settings and prompts to configure an API proxy
   (wireframe pending as the new settings tab UI is still not available)
3. (clicking next)BS tour makes appearance of the Proxy tab under API profile.
   
4. (clicking next) BS tour ends with prompting user to save proxy settings and to use API Management functionalities.
   

[Nazarah]

Link to BootStrap Tour:
http://bootstraptour.com/
click Demo to watch

[Nazarah]

Need to review the scenarios and associated wireframes.
For scenario 2, need view of new settings page to create wireframes.
@bajiat : would you be interested?

[bajiat]

@Nazarah Suggestion for the text in wireframe 3 in scenario 1:

Save the proxy settings and the different API management features like Dashboard are available for your API.
Save the proxy settings and start using different API management features like the Dashboard.

Scenario 2: only admin can add a proxy to the platform

[Nazarah]

@brylie: need to discuss the scenarios with you

[brylie]

I have started working on this task, but quickly encountered trouble when trying to import Bootstrap Tour:

• Not working BootstrapTour with meteor 1.4 sorich87/bootstrap-tour#570
• http://stackoverflow.com/questions/39310580/not-working-bootstraptour-with-meteor-1-4

I will try a different library, while this issue hopefully is discussed/resolved upstream.

@frenchbread , @jykae, @marla-singer, and/or @NNN: do any of you have any ideas how I can properly import the bootstrap-tour library in our app from an NPM package?

• https://www.npmjs.com/package/bootstrap-tour

[Nazarah]

@brylie : as you recommended I looked with http://introjs.com/, and it seems well.
We can use the style "progress bar" with it.
But I was wondering that is it possible to use the "hint style" for scenario 2.
Because based on my understanding, the tour navigates you to different part of a page without requiring any action from the user in the actual webpage.
But according to scenario 2. (3rd wireframe), we are guiding APINF Admin to work in the proxy tab.
but in actual case, the proxy tab has not appeared yet in the profile as the admin has not added anything in setting page.
So my question is, can we implement this scenario? other wise I can redesign it, s,t. it stays in the same profile page all the time

[brylie]

But according to scenario 2. (3rd wireframe), we are guiding APINF Admin to work in the proxy tab.
but in actual case, the proxy tab has not appeared yet in the profile as the admin has not added anything in setting page.
So my question is, can we implement this scenario? other wise I can redesign it, s,t. it stays in the same profile page all the time

@Nazarah lets move the second scenario into a 'Guided tour for Apinf administrators' task, where we can show a new administrator how to configure Apinf.

[brylie]

@Nazarah thanks for your feedback on the visual appearance of the tour. I have used the 'brand primary' color to indicate the current step, with help from @NNN.

@Nazarah Relatedly, I would like to add the Quick tour button as part of this task, as you suggested. One open question, what FontAwesome icon might be good for the Quick tour button?

http://fontawesome.io/icons/

[brylie]

I had to deviate from the definition of done here:

• for simplicity in the code there is a button that a person can click to get a quick tour
• the Bootstrap Tour library would not work in our codebase