Skip to content

Connection string mode#1723

Merged
lyubov-voloshko merged 5 commits intomainfrom
connection-string-mode
Apr 21, 2026
Merged

Connection string mode#1723
lyubov-voloshko merged 5 commits intomainfrom
connection-string-mode

Conversation

@lyubov-voloshko
Copy link
Copy Markdown
Collaborator

@lyubov-voloshko lyubov-voloshko commented Apr 21, 2026

Summary by CodeRabbit

Release Notes

  • New Features

    • Added connection string input method for direct database connections with validation and error handling.
    • Implemented dynamic credential form rendering that adapts based on selected database type.
  • Style

    • Updated database connection form layout and styling for improved UI organization.

Copilot AI review requested due to automatic review settings April 21, 2026 10:35
@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented Apr 21, 2026

Warning

Rate limit exceeded

@lyubov-voloshko has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 55 minutes and 25 seconds before requesting another review.

Your organization is not enrolled in usage-based pricing. Contact your admin to enable usage-based pricing to continue reviews beyond the rate limit, or try again in 55 minutes and 25 seconds.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 5898efa6-64d3-475b-b301-366c9d6fd434

📥 Commits

Reviewing files that changed from the base of the PR and between 3daeb51 and e538655.

⛔ Files ignored due to path filters (1)
  • frontend/yarn.lock is excluded by !**/yarn.lock, !**/*.lock
📒 Files selected for processing (6)
  • frontend/package.json
  • frontend/src/app/components/connect-db/connect-db.component.css
  • frontend/src/app/components/connect-db/connect-db.component.html
  • frontend/src/app/components/connect-db/connect-db.component.ts
  • frontend/src/app/directives/connection-string-validator.directive.ts
  • frontend/src/app/validators/connection-string.validator.ts
📝 Walkthrough

Walkthrough

The PR introduces connection string parsing functionality to the database connection component. A new connection-string-parser dependency is added, and a validator-based parsing system is implemented. Database credential forms are refactored from static conditional rendering to dynamic component injection, with support for connection string input and auto-population of connection details.

Changes

Cohort / File(s) Summary
Dependencies
frontend/package.json
Added connection-string-parser dependency (^1.0.4) to support parsing connection strings.
Connection String Validation
frontend/src/app/validators/connection-string.validator.ts, frontend/src/app/directives/connection-string-validator.directive.ts
New validator file implements parseConnectionString() function to parse and normalize connection strings into ParsedConnectionString interface; maps schemes to database types and applies defaults. New directive wraps the validator for use with Angular forms via ngModel.
Connect DB Component
frontend/src/app/components/connect-db/connect-db.component.ts
Replaced static credential form imports with dynamic component infrastructure; added credentialsFormMap for type-to-component mapping; introduced applyConnectionString() method to parse input and populate form fields; added related public state properties for dynamic form rendering.
Connect DB Template
frontend/src/app/components/connect-db/connect-db.component.html
Removed per-database conditional credential forms; added new "Connection string" input field with validation errors and "Apply" button; replaced removed forms with single <ndc-dynamic> component driven by credentialsFormComponent and related inputs/outputs/attributes.
Connect DB Styling
frontend/src/app/components/connect-db/connect-db.component.css
Changed .credentials-fieldset to use Angular host/deep scoping; adjusted grid-row positioning; renamed .connectForm__typeSwitch to .connectForm__toggle; added layout rules for new .connectForm__connectionString input with flex spacing and button positioning; updated alert margin styling.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant Component as Connect DB<br/>Component
    participant Validator as Connection String<br/>Validator
    participant Parser as Parser<br/>Function
    participant Form as Dynamic Form<br/>Component

    User->>Component: Enter connection string
    User->>Component: Click "Apply"
    Component->>Validator: applyConnectionString()
    Validator->>Parser: parseConnectionString()
    Parser->>Parser: Extract scheme & validate
    Parser->>Parser: Map scheme to DBtype
    Parser->>Parser: Parse URL structure
    Parser->>Parser: Apply defaults & decode
    Parser-->>Validator: Return ParsedConnectionString
    Validator->>Component: Populate db fields
    Component->>Component: Clear connectionString input
    Component->>Form: Update credentialsFormComponent
    Form-->>User: Render form for parsed DB type
    Component-->>User: Show success snackbar
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

🐰 A string comes in, so neat and clean,
The parser spins like a machine,
DB fields fill up so fast,
Dynamic forms arrive at last!
Connection made with rabbit's delight,

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch connection-string-mode

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@lyubov-voloshko lyubov-voloshko merged commit b2df2ac into main Apr 21, 2026
13 of 15 checks passed
@lyubov-voloshko lyubov-voloshko deleted the connection-string-mode branch April 21, 2026 10:38
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR adds a “connection string mode” to the Connect DB flow, letting users paste a DB connection URI to auto-fill credentials, and refactors the direct-connection credential forms to render via a single dynamic component.

Changes:

  • Add a connection-string parser + Angular validator/directive to validate and parse DB URIs.
  • Add a connection string input + “Apply” action to auto-populate connection fields on the Connect DB page.
  • Replace per-DB *ngIf credential form rendering with ng-dynamic-component-based dynamic rendering.

Reviewed changes

Copilot reviewed 6 out of 7 changed files in this pull request and generated 4 comments.

Show a summary per file
File Description
frontend/package.json Adds connection-string-parser dependency.
frontend/yarn.lock Locks the new dependency and transitive requirements.
frontend/src/app/validators/connection-string.validator.ts Implements parsing + validation for connection strings.
frontend/src/app/directives/connection-string-validator.directive.ts Exposes the validator as an ngModel directive.
frontend/src/app/components/connect-db/connect-db.component.ts Wires parsing into the connect flow and introduces dynamic form selection.
frontend/src/app/components/connect-db/connect-db.component.html Adds the connection string UI and swaps to <ndc-dynamic> for credential forms.
frontend/src/app/components/connect-db/connect-db.component.css Adjusts layout/styling for the new connection string section and dynamic form rendering.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

};

public credentialsFormComponent: Type<BaseCredentialsFormComponent> | null = null;
public credentialsFormInputs: Record<string, any> = {};
Copy link

Copilot AI Apr 21, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

credentialsFormInputs is declared but never used (inputs are inlined in the template). Remove this property or use it to avoid dead code and potential unused-member lint/TS warnings.

Suggested change
public credentialsFormInputs: Record<string, any> = {};

Copilot uses AI. Check for mistakes.
grid-row: 6 / span 4;
}

:host ::ng-deep .connectForm__typeSwitch + ndc-dynamic + .credentials-fieldset {
Copy link

Copilot AI Apr 21, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The selector .connectForm__typeSwitch + ndc-dynamic + .credentials-fieldset does not match the new template structure: the credentials form class is applied via ndcDynamicAttributes to the dynamically created component inside <ndc-dynamic>, not to a sibling following ndc-dynamic. As written, this rule will never apply and can break the intended grid positioning. Adjust the selector to target the element that actually has the class (e.g., ndc-dynamic .credentials-fieldset or apply the class on ndc-dynamic itself and update the selector accordingly).

Suggested change
:host ::ng-deep .connectForm__typeSwitch + ndc-dynamic + .credentials-fieldset {
:host ::ng-deep .connectForm__typeSwitch + ndc-dynamic .credentials-fieldset {

Copilot uses AI. Check for mistakes.
Comment on lines +471 to +501
applyConnectionString() {
if (!this.connectionString.trim()) {
return;
}

try {
const parsed = parseConnectionString(this.connectionString);

this.db.type = parsed.dbType;
this.db.host = parsed.host;
this.db.port = parsed.port;
this.db.username = parsed.username;
this.db.password = parsed.password;
this.db.database = parsed.database;

if (parsed.authSource) {
this.db.authSource = parsed.authSource;
}
if (parsed.schema) {
this.db.schema = parsed.schema;
}
if (parsed.ssl) {
this.db.ssl = true;
}

this.connectionString = '';
this._notifications.showSuccessSnackbar('Connection string parsed successfully');
} catch (_e) {
// Validation directive handles error display
}
}
Copy link

Copilot AI Apr 21, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

New connection-string behavior (applyConnectionString() / parseConnectionString() integration) isn’t covered by the existing ConnectDBComponent unit tests. Add tests to verify that a valid URI populates db fields and switches the credentials form to the parsed DB type, and that invalid/unsupported URIs don’t mutate state.

Copilot uses AI. Check for mistakes.
Comment on lines +480 to +495
this.db.host = parsed.host;
this.db.port = parsed.port;
this.db.username = parsed.username;
this.db.password = parsed.password;
this.db.database = parsed.database;

if (parsed.authSource) {
this.db.authSource = parsed.authSource;
}
if (parsed.schema) {
this.db.schema = parsed.schema;
}
if (parsed.ssl) {
this.db.ssl = true;
}

Copy link

Copilot AI Apr 21, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

applyConnectionString() updates db.type but never updates credentialsFormComponent, so the dynamic credentials form can stay on the previously selected DB type after applying a connection string. Update credentialsFormComponent (or call dbTypeChange() / centralize the logic) after setting db.type so the UI matches the parsed scheme. Also consider explicitly clearing/overwriting optional fields (authSource, schema, ssl) when they are absent in the parsed string to avoid leaving stale values from prior manual edits.

Suggested change
this.db.host = parsed.host;
this.db.port = parsed.port;
this.db.username = parsed.username;
this.db.password = parsed.password;
this.db.database = parsed.database;
if (parsed.authSource) {
this.db.authSource = parsed.authSource;
}
if (parsed.schema) {
this.db.schema = parsed.schema;
}
if (parsed.ssl) {
this.db.ssl = true;
}
this.dbTypeChange();
this.db.host = parsed.host;
this.db.port = parsed.port;
this.db.username = parsed.username;
this.db.password = parsed.password;
this.db.database = parsed.database;
this.db.authSource = parsed.authSource ?? null;
this.db.schema = parsed.schema ?? null;
this.db.ssl = parsed.ssl ?? false;

Copilot uses AI. Check for mistakes.
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.

2 participants