In catalog, make life-cycle phase icon a link to filtered list

[kyyberi]

As a developer I would like to click from catalog "production" label and get filtered list of APIs containing just APIs in production. This is faster than selecting from filtering options.

Wireframes

Currently, APIs with lifecycle status appears like below in catalog (card view)

On clicking any lifecycle status (including unknown), the API cards get sorted and only cards with that specific lifecycle appears.
Catalog view also indicates how the result is filtered with and a clear all link text.
Clicking the "clear all" should refresh the page and display the default catalog.

Same effect should also be possible for tabular view:

[Nazarah]

+1

[bajiat]

@marla-singer Would you be interested?

[marla-singer]

@bajiat Yes

[Nazarah]

@bajiat @marla-singer what about table view? Should the same feature be also working for table entries? (i.e. clicking on lifecycle status would sort the entries as well?)

[bajiat]

@Nazarah Wireframe is ok from my point of view.

For me it would be logical if the table view would work identically.

If the filtering by clicking on the label is implemented for the Catalog, the APIs on the organization page should work identically. I will create a related issue for the implementation for Organization profile page.

[bajiat]

I have created a related issue for Organization page: #2173. This can be done in next sprint, but you should take into account that the implementation should be reusable.

[marla-singer]

@kyyberi @Nazarah @bajiat Okay, we will provide users fast filtering. But how does user reset filter options? He/she will click on filter form and click Clear button? But what is profit of filtering via clicking on label if in this case user have to manipulate with filter form as well.

[marla-singer]

@kyyberi @Nazarah @bajiat What is expected if a user clicks on the label with text Unknown?

[Nazarah]

@marla-singer The wireframes shows that on adding a filter to the result, a text displays how the result is filtered and a clickable link "Clear All". User can quickly clear the filtered result by clicking the link as well as clearing the result from filter dropmenu.

In my opinion, "Unknown" label should not exist. If an API is not labeled with a lifecycle, it is clear to users from catalog/profile visualization that it is not yet within any lifecycle. keeping a status "Unknown" is itself vague and might create confusion among users.
However, for a quick fix, I suggest to have the similar action for unknown as any other labels. That is clicking unknown label should filter the results with all APIs that are not yet under any specific lifecycle label.
However, I'd suggest everyone to reconsider whether or not we should have an "unknown" status as filter category.

[marla-singer]

The wireframes shows that on adding a filter to the result, a text displays how the result is filtered and a clickable link "Clear All".

@Nazarah Yes, but we deprecated it not long time ago #2037

[Nazarah]

I'd suggest introducing that feature again.
if we are implemetning Quick Filtering by clicking liecycle labels, then we should be able to clear out the result as well.
Besides, currently the clearing takes 2 clicks to open the filtering dropmenu and clicking the clear button.
It the cases of quick/manual filtering, the indication should be visible enough to user that the result is now filtered and a wa to clear out te result.
I suggest instead of a button, use link text. In previous implementation, the button text really didn't look good.

[marla-singer]

Not totall agree about "the button text really didn't look good."
I prefer to use a button for this aim judge by semantic mean.

The <a> tag defines a hyperlink, which is used to link from one page to another.
Definition and Usage

The <button> tag defines a clickable button.
Definition and Usage

When a user clicks on Clear all, he expects some action on current page just as link means go to another page. At least we should use decorate the link with dashed line which doesn't expect go to another page

[Nazarah]

I leave the decision of button to you @marla-singer :)
Just please make sure it is aligned with other elements and is of perfect size.
All I want is visibility and quick actions filtering.

[marla-singer]

@Nazarah I prepared the different decorate for "Clear all". What do you think?

[55]

3 or 5, not to overuse color here

[Nazarah]

I'd go with 5 and 6.
This is what I had originally in my sketches.
Also while designing the wireframes, I has some discussion with Philippe and he prefers the use of 5 or 6 style to 3 or 4.
besides, in the original implementation, the button didn't look goof in organization view.
So I'd like to go with 5 & 6