Feat(portal): add conditional database fields in UI for advanced node.js template#46
Merged
NgocAnhDo26 merged 1 commit intoMar 4, 2026
Conversation
NgocAnhDo26
approved these changes
Mar 4, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description: This PR implements the dynamic form logic for the Backstage scaffolder wizard to improve Developer Experience. It uses react-jsonschema-form (RJSF) conditional logic (dependencies) to only show database configuration fields when the user explicitly requests a database, closing the Issue #36 and the Dynamic Wizard design document.
Changes Made:
Updated Template Schema (apps/portal/examples/advanced-template/template.yaml):
Added a new "Database Configuration" step.
Added a mock requireDatabase checkbox (anticipating Issue [Setup] Scaffold Dynamic Wizard Extension #35).
Implemented JSON Schema dependencies logic tied to the requireDatabase checkbox.
Conditionally rendered fields:
databaseType: Select dropdown (defaults to postgres).
databaseName: Text input.
databaseVersion: Select dropdown (13, 14, 15, 16 - defaults to 15).
Added validation to ensure conditionally shown fields are marked as required only when visible.
Testing Instructions: apps/portal
yarn install + yarn start
Go to the Create tabs
Select the Advanced Node.js Template (GitOps + Webhooks).
Fill out the "Component Information" step and click Next.
On the "Database Configuration" step:
Verify Hide: Ensure only the "Add Database" checkbox is visible by default. You should be able to proceed without validation errors.
Verify Show: Check the "Add Database" box. The Database Type, Database Name, and Database Version fields should instantly appear.
Verify Validation: With the box checked, leave Database Name blank and attempt to click "Next". The form should block you and display a required field error.
Verify Reset: Uncheck the box. The fields should disappear, and the validation error should clear.
The global checkbox component in Issue #35:To make sure our UI logic wires up correctly, please ensure the boolean property name for the checkbox in the final schema is named exactly requireDatabase.
If you decide to use a different property name (e.g., hasDatabase, addDb), please let me know so I can update the dependencies mapping in template.yaml to match your variable name, or feel free to update the dependency key in this template yourself when you merge!