Skip to content

impl: add databasePicker component logic#51

Merged
hoangphuc841 merged 1 commit into
features/database-persistencefrom
users/ndvh/impl/database-picker-component
Mar 8, 2026
Merged

impl: add databasePicker component logic#51
hoangphuc841 merged 1 commit into
features/database-persistencefrom
users/ndvh/impl/database-picker-component

Conversation

@VH3956
Copy link
Copy Markdown
Collaborator

@VH3956 VH3956 commented Mar 7, 2026

Description: This PR implements the React state and rendering logic for the custom DatabasePicker field extension in the Backstage Scaffolder. This component streamlines the UI by only capturing the dbType and dbName. Secret generation and other connection details are handled securely by the backend operator.

Changes Made:

  1. Created Custom Field Extension (packages/app/src/scaffolder/DatabasePickerExtension):

    • DatabasePicker.tsx: Implemented a React component with a dropdown for Database Type ("No Database", "PostgreSQL"). Conditionally renders a text input for Database Name when "PostgreSQL" is selected.

    • extension.ts: Registered the component as a Backstage Scaffolder Field Extension and added custom validation logic (ensures dbName is provided if postgres is selected).

    • index.ts: Exported the new extension.

  2. App Integration (packages/app/src/App.tsx):

    • Imported and registered DatabasePickerExtension within the route so Backstage can recognize the custom field.
  3. Template Update (examples/advanced-template/template.yaml):

    • Replaced the pure JSON Schema conditional block with the new custom field: ui:field: DatabasePicker. The form now directly passes the { dbType, dbName } object back to the template state.

@VH3956 VH3956 linked an issue Mar 7, 2026 that may be closed by this pull request
@hoangphuc841
Copy link
Copy Markdown
Collaborator

Unused scaffolderFieldExtensions Array in App.tsx (Line 79)
const scaffolderFieldExtensions = [DatabasePickerExtension]; // ← Declared but never used
The extension is correctly registered via JSX on line 103 so this array is dead code. Remove it.

@hoangphuc841 hoangphuc841 merged commit 8ed980b into features/database-persistence Mar 8, 2026
@hoangphuc841 hoangphuc841 deleted the users/ndvh/impl/database-picker-component branch March 8, 2026 15:08
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.

[Impl] Develop DatabasePicker Component Logic

2 participants