Better modal popup

[paulmelnikow]

I've been working on a major improvement to the modal popup which is basically an epic. I've been referencing it as #701, however #777, #1146, and #2427 are also included.

I'm opening this to track the feature in a way that gives a more transparency to the goalpost and the process.

Here's the behavior I'd like to implement:

1. Show individual fields on the modal popup for each part of the URL path.
2. Same for the query string.
3. Pre-populate the fields with the example.
4. Provide a Clear button and a Reset button.
5. Add UI elements for the remaining badge options, e.g. logo.
6. Provide a non-editable box (like the URL box now) which contains the full URL as it's built.
7. Show the live preview whenever all the fields are filled in.

These are some of the technical milestones:

• Define the routes in a way that enables building a URL from individual fields (Reduce duplication in badge regex/url patterns #2050)
• Convert exampleUrl to pattern, namedParams, and staticPreview (Convert more badges to use static previews #1961)
  • Examples: Add static examples to a few legacy services [travis david coveralls amo] #2407 Add static examples for [Node] #2409 Modernize some examples teamcity azuredevops travis [uptimerobot vaadin vscode-marketplace] #2444 Modernize some more examples #2447 More example urls and static examples [apm waffle] #2478
  • Needed features: Support static preview with social style #2479
  • Nice to have: Route pattern doesn't support trailing optional #2497
• Extract the service definitions in a way that enables the front end to know the fields (Service definition export format #2397)
• Consume that format in the frontend and drop the old format (Refactor frontend main page and badge-example code #2441)
• Set up dev experience
  • Add basic frontend tests Add some basic frontend tests #2490
  • Adopt styled-components Rework styling using styled-components #2517
• Add fields for the named params and the query params
• Add UI elements for the remaining badge options

Superceding: #701 #777 #1146 #2427
Also ref: #1311

[paulmelnikow]

Making progress with this!

#2517 is blocking opening a PR, though it's not quite ready yet.

[paulmelnikow]

The latest work on this is in #2554 / https://shields-staging-pr-2554.herokuapp.com.

[paulmelnikow]

Let's track the remaining UI elements in #2867 and the remaining static previews in #1961.