Add button to quickly include all form variables in JSON dump plugin #5070

viktorvanwijk · 2025-01-31T15:59:47Z

Closes #5066

Changes

Add button to quickly include all form variables in JSON dump plugin

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 · 2025-01-31T16:08:11Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 96.74%. Comparing base (a1a1b00) to head (3819dac).

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #5070   +/-   ##
=======================================
  Coverage   96.74%   96.74%           
=======================================
  Files         771      771           
  Lines       26636    26636           
  Branches     3467     3467           
=======================================
  Hits        25770    25770           
  Misses        605      605           
  Partials      261      261

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

viktorvanwijk · 2025-02-06T14:45:21Z

docs/developers/frontend/index.rst

I'm thinking now this might be better placed in Backend -> Admin styling?

No this would be the correct place. (S)CSS is frontend stuff :)
I would suggest moving this to a separate file, instead of added it to the index.rst, just to give some structure.

I was a bit confused by the definition of frontend here. If you look at the frontend documentation, it only mentions the repos related to the form frontend, not the admin styling. I guess it depends on what is meant exactly by Backend and Frontend here:

robinmolen

Some small comments/things to keep in mind :)

src/openforms/js/components/admin/form_design/registrations/json_dump/fields/Variables.js

robinmolen · 2025-02-11T11:59:03Z

src/openforms/js/components/admin/form_design/registrations/json_dump/fields/Variables.js

+
+          <button
+            type="button"
+            className="button button--padded"


.button--padded currently does nothing, as its not defined in any .scss file. I think it would be nice to add some padding to this button.

As i see it, you have two options:

You could add .button--padded to the _button.scss file (using @include bem.modifier('padded')) and define the padding there (in this case, keep the padding inline with the other buttons)

Or you could use the <ActionButton /> component (which is already styled like you would want)

I had indeed seen the <ActionButton />, but it uses an <input /> component rather than a <button />. Wouldn't this mean that it acts like a 'Save' button of the modal?

EDIT: I guess we can override the type property with type="button"

src/openforms/js/components/admin/form_design/registrations/json_dump/fields/Variables.js

robinmolen · 2025-02-11T12:29:57Z

docs/developers/frontend/index.rst

No this would be the correct place. (S)CSS is frontend stuff :)
I would suggest moving this to a separate file, instead of added it to the index.rst, just to give some structure.

docs/developers/frontend/index.rst

robinmolen · 2025-02-11T12:43:58Z

docs/developers/frontend/index.rst

+       .json-dump-variables {
+         display: flex;
+
+         &--horizontal {


If we are gonna add documentation for styling, we might as well convince the reader to use @include bem. stuff :)

Suggested change

&--horizontal {

@include bem.modifier('horizontal') {

Is there an advantage of using @include bem.modifier?

docs/developers/frontend/index.rst

src/openforms/scss/components/admin/_json-dump-variables.scss

…egistration options

Added a (short) section on how to add custom styling of admin components.

viktorvanwijk added topic: registration owner: venlo labels Jan 31, 2025

viktorvanwijk changed the title ~~Add button to quickly include all form varianles in JSON dump plugin~~ Add button to quickly include all form variables in JSON dump plugin Feb 3, 2025

viktorvanwijk force-pushed the 5066-add-possiblity-to-quickly-include-all-form-fields-in-the-data-to-be-sent-for-the-json-dump-registration-backend branch from b11b609 to 1013703 Compare February 3, 2025 08:37

viktorvanwijk marked this pull request as ready for review February 4, 2025 14:10

viktorvanwijk force-pushed the 5066-add-possiblity-to-quickly-include-all-form-fields-in-the-data-to-be-sent-for-the-json-dump-registration-backend branch from 820f230 to 62bc105 Compare February 5, 2025 10:16

viktorvanwijk commented Feb 6, 2025

View reviewed changes

viktorvanwijk requested a review from robinmolen February 11, 2025 09:32

robinmolen requested changes Feb 11, 2025

View reviewed changes

viktorvanwijk added 2 commits February 13, 2025 14:28

✨ [#5066] Add button to include all form variables in the JSON dump r…

e68f728

…egistration options

🌐 [#5066] Update translations

219a2b5

viktorvanwijk force-pushed the 5066-add-possiblity-to-quickly-include-all-form-fields-in-the-data-to-be-sent-for-the-json-dump-registration-backend branch 3 times, most recently from 00d1a2d to 0ad3397 Compare February 13, 2025 13:34

📝 [#5066] Update frontend documentation

3819dac

Added a (short) section on how to add custom styling of admin components.

viktorvanwijk force-pushed the 5066-add-possiblity-to-quickly-include-all-form-fields-in-the-data-to-be-sent-for-the-json-dump-registration-backend branch from 0ad3397 to 3819dac Compare February 13, 2025 13:49

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add button to quickly include all form variables in JSON dump plugin #5070

Add button to quickly include all form variables in JSON dump plugin #5070

viktorvanwijk commented Jan 31, 2025 •

edited

Loading

codecov bot commented Jan 31, 2025 •

edited

Loading

viktorvanwijk Feb 6, 2025

robinmolen Feb 11, 2025

viktorvanwijk Feb 13, 2025

robinmolen left a comment

robinmolen Feb 11, 2025

viktorvanwijk Feb 13, 2025 •

edited

Loading

robinmolen Feb 11, 2025

robinmolen Feb 11, 2025

viktorvanwijk Feb 13, 2025

Add button to quickly include all form variables in JSON dump plugin #5070

Are you sure you want to change the base?

Add button to quickly include all form variables in JSON dump plugin #5070

Conversation

viktorvanwijk commented Jan 31, 2025 • edited Loading

codecov bot commented Jan 31, 2025 • edited Loading

Codecov Report

viktorvanwijk Feb 6, 2025

Choose a reason for hiding this comment

robinmolen Feb 11, 2025

Choose a reason for hiding this comment

viktorvanwijk Feb 13, 2025

Choose a reason for hiding this comment

robinmolen left a comment

Choose a reason for hiding this comment

robinmolen Feb 11, 2025

Choose a reason for hiding this comment

viktorvanwijk Feb 13, 2025 • edited Loading

Choose a reason for hiding this comment

robinmolen Feb 11, 2025

Choose a reason for hiding this comment

robinmolen Feb 11, 2025

Choose a reason for hiding this comment

viktorvanwijk Feb 13, 2025

Choose a reason for hiding this comment

viktorvanwijk commented Jan 31, 2025 •

edited

Loading

codecov bot commented Jan 31, 2025 •

edited

Loading

viktorvanwijk Feb 13, 2025 •

edited

Loading