UI for making API private for a user group

[bajiat]

In addition to being able to select between private and public, owner should be able to select that the API is public/visible to certain users: "private to a group".

Definition of done

• In the API profile, the owner can select that the API is private to a group.
• In the API Catalog, the owner can see an indication of
  • completely private API
  • API being partially provate (visible to a selected group of users).

Wireframes

1. API Visibility comes under Settings tab.
   Has a separate Pane with radio buttons to select visibility option.
   Default is public.
   
2. To give access to specific people.
   The section gets active when radio button is selected
   Users can be added via email.
   On adding a new user, they should appear as tags under the text field.
   In API profile page , and API catalog, special icon should appear to indicate the API is visible for a specific group
   (reference of BS tags: https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/)
   
3. API is accessible only to owner
   In API profile page , and API catalog, special icon should appear to indicate the API is visible only for owner
   

[Nazarah]

@NNN any design ideas about this issue?

[Nazarah]

@bajiat : currently we have a toggler in API profile to make an API public/private to the audience. Should this toggler still remain as we are changing the privacy option of an API?
Or it is going to be replaced by this issue?

[bajiat]

@Nazarah Toggler with three options? Can you sketch (even on paper) some options for the owner to select between the options?

[Nazarah]

@NNN based on a discussion with @bajiat and @jykae I prepared the given wireframes.
Please have a look and give your feedback

[55]

@Nazarah, really nice, love it!

We need to start separating content of this view into subviews, ex. with leftside navigation.
Maybe not in this task.

[55]

One thing about the icons of indication. Let's use label instead of icons.
And only one label - Private if API is private to everybody and same label if available to some users.
It will make UI look cleaner. Owners can always check who can see theirs API in the settings. There is no need to separately show these with different types of icons/labels.

[Nazarah]

@NNN agreed with the design suggestions.

[Nazarah]

@NNN I've got another suggestion, to change the API header, card and table row (in API catalog) color if an API is private. The label is good for profile header and table row, where more space is available. Am not just sure about the card view with little space.

[brylie]

...moving discussion here from #1623.

After our stand-up today, we reviewed the API Visibility feature/UI. @philippeluickx suggested, and we generally agreed, that the API Visibility selector should be a drop-down, rather than radio buttons. @Nazarah agreed to wireframe the select drop-down, as part of this task.

As an enhancement, we are discussing improving the drop-down by using an enhancement library, such as:

• Bootstrap Select
• Chosen
• Select2
• Selectize

Using one of the above plugins would allow us to include the help text directly within the select menu, similar to how it is included among the radio select options: