Group variables by step

[sergei-maertens]

Closes clears up a post it on my desk - small quality of life update

Changes

• Group variables by step in the variables editor
• Removed the "form definition" column in variables table
• Fixed storybook stories that were missing step context
• Added code markup to variable key

Checklist

Check off the items that are completed or not relevant.

• Impact on features

  • Checked copying a form
  • Checked import/export of a form
  • Config checks in the configuration overview admin page
  • Problem detection in the admin email digest is handled

• Release management

  • I have labelled the PR as "needs-backport" accordingly

• I have updated the translations assets (you do NOT need to provide translations)

  • Ran ./bin/makemessages_js.sh
  • Ran ./bin/compilemessages_js.sh

• Dockerfile/scripts

  • Updated the Dockerfile with the necessary scripts from the ./bin folder

• Commit hygiene

  • Commit messages refer to the relevant Github issue
  • Commit messages explain the "why" of change, not the how

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 96.74%. Comparing base (4cb4b65) to head (65a9ce5).
Report is 6 commits behind head on master.

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #5146   +/-   ##
=======================================
  Coverage   96.74%   96.74%           
=======================================
  Files         779      779           
  Lines       26774    26774           
  Branches     3483     3483           
=======================================
  Hits        25903    25903           
  Misses        607      607           
  Partials      264      264           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[viktorvanwijk]

Three minor things, and a general question: did you consider adding a fieldset for each step, instead of an extra row, like we do in the registration tab of the table? :)

[sergei-maertens]

Three minor things, and a general question: did you consider adding a fieldset for each step, instead of an extra row, like we do in the registration tab of the table? :)

I think the extra blue borders create too much clutter, and more importantly, because the columns are sized by their content, their widths would not be consistent across steps and that makes it all look very janky. A single table forces identical column widths.