Some additions to the project import configuration page

[agjohnson]

I pulled down #166 to provide a bit of guidance, but ended up with fixes
to the PR either way. I added a few features on top, to replace plain
text with visual elements and interactive components. These aren't fully
working yet (the example selector namely, see #184).

[agjohnson]

I was able to make use of the column structure from the base template, in #186. This makes review here messy as I don't want to yet rebase this and the underlying PR on top of that. I'll probably open up another PR based off that and merge in parts of #166 to that branch.

[humitos]

This looks good to me 💯

I find really hard to understand what are the CSS classes that I should use, but I guess that will come eventually.

One thing that I noticed is that it's hard to realize the content of the suggested config file is scrollable because there is no vertical scroll bar when the page is shown. So, it's easy to think the file ends there when it's not. I'd like to show as much as possible of its content without hiding the form buttons if that's possible.

Another thing I noticed is that for some reason the YAML content is not highlighted as other code format is. Is it possible to highlight it without too much work?

[agjohnson]

I find really hard to understand what are the CSS classes that I should use, but I guess that will come eventually.

Yeah, it's not obvious what elements or element variations are being used until you start working with FUI/SUI more. I noted on the other PR that I'll cover this more with:

• Docs: add more introductory resources #187

But it's also always harder building new UI or more custom new UI because what element works best is always more subjective.

One thing that I noticed is that it's hard to realize the content of the suggested config file is scrollable

Yeah, this is a bit of a browser thing, but we might be able to use a more native scroll bar here instead. Most browsers show a micro version of the scroll bar these days though.

I'd like to show as much as possible of its content without hiding the form buttons if that's possible

I didn't do this because showing the full source without scrolling pushes the buttons well out of the viewport, and then it isn't clear what the user is supposed to do with the page -- it doesn't look like a form. The scrolling segment isn't a great solution, but it's better in this regard.

Ultimately, I'd see us using a popup modal for the example source instead, with the code examples popping up after the user selects one. This gives us a chance to provide more context on the page around the examples, and make it really obvious what the user is supposed to do with the example source. For a first pass, I think the scrolling segment is a good compromise.

Another thing I noticed is that for some reason the YAML content is not highlighted as other code format is.

It's because we don't have Pygments available, the other UIs perform the Pygments highlighting inside the view code. We do need to show the actually plain text source though, where Pygments does alter the source to add the HTML classes, so I'd probably lean towards using something like highlight.js or another JS library.

• Mentioned this a bit in Add JS for swapping examples on project creation form #184