Foorm editor: Small UI Improvements

[molly-moen]

Various small UI improvements to improvement the usability of the foorm editor. Improvements are:

• show published state
• move the preview to the right of the editor (space permitting, if the screen gets to narrow it will move back below the editor). The survey variables are still below the editor.
  • in order to do this I had to make the container for the page larger than our default 970px
• Instead of a button to re-preview the survey, make the preview live update, with the option to toggle live preview on/off

This is not the final state of the editor, but they are improvements that will make using (and testing) the editor much more pleasant.
You can see the existing editor on levelbuilder (levelbuilder account required).
New layout (this is on a 16" screen)

Replaced preview button below survey variables with a live preview on/off toggle (this section is below the editor):

Links

• spec
• jira for published state

Testing story

Tested locally on multiple browsers. All changes are on the UI side, mostly cosmetic updates.

Reviewer Checklist:

• Tests provide adequate coverage
• Privacy and Security impacts have been assessed
• Code is well-commented
• New features are translatable or updates will not break translations
• Relevant documentation has been added or updated
• User impact is well-understood and desirable
• Pull Request is labeled appropriately
• Follow-up work items (including potential tech debt) are tracked and linked

[breville]

Looks great!

[dmcavoy]

It seems like a checkbox here might be more user friendly?

[dmcavoy]

It seems like a checkbox here might be more user friendly?

[dmcavoy]

Hey Molly - I know this is merged. Sorry I didn't get to it on Friday. I think its looks great! Just had some ideas/questions about the design which I think can totally be something you think about going forward.

1. Why would someone want to turn live preview off?
2. Maybe make the values that are true or false into checkboxes instead of text input
3. Is it possible for any of the input fields to become dropdowns? Such as workshop_course or workshop_subject?
4. Should workshop_agenda be grouped up with workshop_course and workshop_subject?

If maybe be helpful to consider adding HelpTips for different fields (https://github.com/code-dot-org/code-dot-org/blob/staging/apps/src/lib/ui/HelpTip.jsx) to explain what they do so as new people start to use the system its more friendly for them.

So excited to see this coming together!

[molly-moen]

@dmcavoy thanks for taking a look! I will incorporate this feedback into a future update. To your questions:

1. The reason to turn off is every keystroke I'm doing a backend call to fill in the form with the library items, and that could get slow if someone is making a lot of edits at once.
2. agree
3. The reason we don't have them as dropdowns is so we don't have to update the editor if a new course/subject is added.
4. yes it probably should, we added workshop_agenda most recently so it ended up at the bottom 😄

[breville]

@molly-moen Perhaps we should throttle or debounce the backend call?