Skip to content

Feat(portal): add conditional database fields in UI for advanced node.js template#46

Merged
NgocAnhDo26 merged 1 commit into
features/database-persistencefrom
users/ndvh/feat/dynamicUI-conditional-fields
Mar 4, 2026
Merged

Feat(portal): add conditional database fields in UI for advanced node.js template#46
NgocAnhDo26 merged 1 commit into
features/database-persistencefrom
users/ndvh/feat/dynamicUI-conditional-fields

Conversation

@VH3956
Copy link
Copy Markdown
Collaborator

@VH3956 VH3956 commented Mar 4, 2026

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:

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

  1. yarn install + yarn start

  2. Go to the Create tabs

  3. Select the Advanced Node.js Template (GitOps + Webhooks).

  4. Fill out the "Component Information" step and click Next.

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

⚠️ Note for the Issue #35 (Add Database Checkbox):

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!

@VH3956 VH3956 linked an issue Mar 4, 2026 that may be closed by this pull request
@VH3956 VH3956 changed the title add conditional database fields in UI for advanced node.js template Feat(portal): add conditional database fields in UI for advanced node.js template Mar 4, 2026
@NgocAnhDo26 NgocAnhDo26 merged commit 4b44ce3 into features/database-persistence Mar 4, 2026
@NgocAnhDo26 NgocAnhDo26 deleted the users/ndvh/feat/dynamicUI-conditional-fields branch March 4, 2026 16:05
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.

[Feature] Dynamic UI - Conditional Fields

2 participants