Have the UI flag when an app is on the prototype stage

[brizental]

On mozilla/probe-scraper#244 we added a flag that signals when an app is still on the prototype stage.

We should have the dictionary show that on the UI somehow.

This bug should be handled in two stages:

1. Define how we are going to add this flag to the Glean dictionary's UI, discuss the proposed solution (can be done on this issue's comments);
2. Implement whatever is decided.

[singhvaishnavi]

An app can be flagged on the UI which is on the prototype stage by:

1. Adding an asterisk on the end of the app name which will be only rendered if the value of app.prototype is true, for eg: glean-js*

2. Adding a label (color red) after the list of apps which shows * Application under developement

[brizental]

Hey @singhvaishnavi thanks for the proposal! On 1., do you mean to add such asterisk on the dropdown list? Like so:

Personally I don't think it is necessary to add it in the dropdown, this could be a banner on the app's page. This way, when the user reaches the prototype app's dictionary page they are immediatelly warned that they are looking at a prototype app. Something sort of like this (haven't thought too much here about the text or layout, just a draft):

@wlach Since this would require UI changes, would you mind taking a look and telling us what you think about the proposed solutions?

[brizental]

Now that I think about it, a more drastic solution would be to just not list prototype apps at all on the Glean Dictionary, I wonder if there is any value to showing them. That would mean doing to prototypes the same thing we are doing to deprecated apps (see #53).

[wlach]

Hi @brizental @singhvaishnavi -- the first screenshot @brizental posted is not applicable (that was an older version of the Glean/Probe dictionary which focused more on metrics).

However! I think the second screenshot (with its warning text) is exactly what we'd want on the app page (http://localhost:5000/#!/apps/glean-js). On the index page (http://localhost:5000/), you can flag applications that are prototypes using the same technique @JoyLubega used in #112 (putting a "pill" next to the application)

Does that help?

[brizental]

the first screenshot @brizental posted is not applicable (that was an older version of the Glean/Probe dictionary which focused more on metrics).

Oops, I didn't realize we had a new UI.

However! I think the second screenshot (with its warning text) is exactly what we'd want on the app page (http://localhost:5000/#!/apps/glean-js). On the index page (http://localhost:5000/), you can flag applications that are prototypes using the same technique @JoyLubega used in #112 (putting a "pill" next to the application)

Does that help?

Definitely, this makes a lot of sense.

@singhvaishnavi Do you think you can go ahead with the implementation after this discussion?

[singhvaishnavi]

Yes, I can implement adding the pill next to the prototype apps, similar to #112