Skip to content

Add presentation settings page#48

Open
robinmolen wants to merge 9 commits intofeature/12-information-pagefrom
feature/12-presentation-page
Open

Add presentation settings page#48
robinmolen wants to merge 9 commits intofeature/12-information-pagefrom
feature/12-presentation-page

Conversation

@robinmolen
Copy link
Copy Markdown
Contributor

@robinmolen robinmolen commented Mar 19, 2026

Partly closes #12

This PR depends on #51.

Adding the presentation settings page.

The buttons preview will require future changes, to display the actual button styling used in the form and the selected theme. This will be picked up with #47.

The "Go to general settings" button will be included in another PR #49.

The 'Knopteksten formulier' modal isn't exactly like the design describes it. It will require quite some changes to make it closer resemble the look and feel of the design. I've discussed it with Lidwien, and we decided to keep it as is for now.

I've made a PR to the Maykin admin-ui so we can adjust the modal padding a bit better, but still a lot of work is required to make the modal similar to the design.

@robinmolen robinmolen changed the title Feature/12 presentation page Add presentation settings page Mar 19, 2026
@robinmolen robinmolen requested a review from stefrado March 19, 2026 08:25
@robinmolen robinmolen force-pushed the feature/12-presentation-page branch from 33acbe1 to 5cc3b84 Compare March 19, 2026 08:56
@robinmolen robinmolen marked this pull request as draft March 19, 2026 08:56
@robinmolen robinmolen force-pushed the feature/12-presentation-page branch from 5cc3b84 to d8e94cd Compare March 19, 2026 09:50
@robinmolen robinmolen marked this pull request as ready for review March 19, 2026 09:50
@codecov
Copy link
Copy Markdown

codecov bot commented Mar 19, 2026

Codecov Report

❌ Patch coverage is 95.77465% with 3 lines in your changes missing coverage. Please review.
✅ Project coverage is 87.73%. Comparing base (b87f0f8) to head (c25e402).

Files with missing lines Patch % Lines
src/queryClient/form.ts 92.59% 0 Missing and 2 partials ⚠️
src/api-mocks/theme.ts 83.33% 1 Missing ⚠️
Additional details and impacted files
@@                       Coverage Diff                       @@
##           feature/12-information-page      #48      +/-   ##
===============================================================
+ Coverage                        86.16%   87.73%   +1.56%     
===============================================================
  Files                               42       47       +5     
  Lines                              318      375      +57     
  Branches                            54       58       +4     
===============================================================
+ Hits                               274      329      +55     
- Misses                              37       38       +1     
- Partials                             7        8       +1     
Flag Coverage Δ
storybook 84.53% <94.36%> (+2.14%) ⬆️
vitest 43.57% <36.76%> (-2.15%) ⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ 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.

@robinmolen robinmolen force-pushed the feature/12-presentation-page branch from d8e94cd to 86a3d01 Compare March 23, 2026 11:45
Added a mock get request for the v2 themes api.

On closer inspection, the v3 form api endpoint expects the `theme` to be a string/uuid value. This detail has been updated in the form type definition, and clearified with a comment.
As all form steps in the new admin-ui share their literals, we need a single point of truth for these step literals.

By adding the internal (frontend-only) value `_stepLiterals`, the form can easily manage one collection of literals. This also ensures that, even if all form steps are removed, we keep the literals stored in a safe place.

Before submitting the form details to the backend, we simply replace the step literals with the literals set by `_stepLiterals` and all step literals will be synced.
Added the basic configuration fields for the presentation settings page.
The form literals are handled and updated by a separate Formik Form. This LiteralsForm is used in a Modal dialog on the presentation settings page.
The `useLoaderData` would always return the initially cached form details, not the updated details. Because the form submission updates the queryClient, which resets the Formik form, we need the FormLayout to fetch and use the most recent form details.
Using queryClient useQuery we fetch the data from the current queryClient cache, instead of the initial queryClient cache.

The React-router loader is kept in place to provide preloading on the router level.
The interaction test includes the entire process of filling in the form fields, validating their values and submitting the form to the backend. The submission validates that the form fields are correctly represented in the PUT request to the backend.
@robinmolen robinmolen force-pushed the feature/12-presentation-page branch from 470c3ad to c25e402 Compare April 1, 2026 07:24
@robinmolen robinmolen changed the base branch from main to feature/12-information-page April 1, 2026 07:24
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Create the ‘old’ settings part.

1 participant