Connection String

A DSN parsed into the parts that matter for its driver. A file-backed database has a path and no host, user or port — pretending every database is Postgres is what makes most of these components useless outside it.

src/components/ui/connection-string.tsx

About

From the component's own source, where it was written.

A connection string, parsed into the parts that matter for its driver.

Which parts those are is not universal, and pretending otherwise is what makes most of these components useless outside Postgres. A file-backed database has a path and no host, user or port; a cluster URL has several hosts and no single one; an ODBC string is not a URL at all. So the shape is driven by a per-driver profile, and drivers lets you add or replace any of them without touching the component.

Two formats are parsed: URL-style (postgres://…, sqlite:///…) and the semicolon key-value style SQL Server and ODBC use. A string that parses as neither is reported rather than half-rendered from a regex that matched the wrong separator.

The secret is masked by default. This is the screen people paste into tickets, and a DSN carries a live password in the middle of it.

Install

npx astralyx-ui add connection-string

Usage

import { ConnectionString } from '@/components/ui/connection-string'

<ConnectionString value={dsn} />

Composer

Change the props and the source below follows.

postgres://app:••••••••@db.internal:5432/production?sslmode=require&pool_max=20

PostgreSQL

Driver: postgres
User: app
Host: db.internal
Port: 5432
Database: production

sslmode=requirepool_max=20

Props

connection

revealed

tsx

<ConnectionString value={dsn} />

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`ConnectionString`

Extends Omit<ComponentProps<'div'>, 'children'>.

Prop	Type	Default	Description
value	string	required	URL-style (`postgres://…`, `sqlite:///…`) or the semicolon key=value style SQL Server and ODBC use. A string that parses as neither is reported, not half-rendered.
drivers	Record<string, DriverProfile>	—	Show a path and nothing else. A relative path is flagged, because it resolves against the working directory of whatever starts the process rather than the config file.
revealed	boolean	—	—
mask	string	'••••••••'	—
invalidNote	ReactNode	'That does not parse as a connection string. Expected a URL, or semicolon-separated key=value pairs.'	—
unencodedNote	ReactNode	'The password contains a character that must be percent-encoded. As written, the host will parse wrong.'	—
relativePathNote	ReactNode	'A relative path resolves against the working directory of whatever starts the process — not the config file.'	Shown for a file-backed database given a relative path.
memoryNote	ReactNode	'An in-memory database is discarded when the process exits, and is not shared between connections.'	—
revealLabel	string	'Reveal password'	—
hideLabel	string	'Hide password'	—
copyLabel	string	'Copy connection string'	—
fieldLabels	Partial<Record<DsnField, string>>	—	Overrides the field headings for every driver.

Functions

Function	Signature	Description
connectionDrivers	Record<string, DriverProfile>	Built-in profiles. Every one of these is overridable through `drivers`, and an unknown scheme falls back to the network shape rather than refusing to render — a driver nobody here anticipated is still probably a URL.
parseDsn	(dsn: string) => Parsed \| null	—

Types

`DriverProfile`

Field	Type	Description
label	string	Display name for the driver.
fields	DsnField[]	Which parts to show, in order.
labels?	Partial<Record<DsnField, string>>	Per-driver overrides for the field headings.
fileBased?	boolean	The path is a file on disk, not a network address.
defaultPort?	number	Shown when the port is absent, so the effective value is visible.
warn?	Record<string, string>	Parameters worth flagging, mapped to why.

Type	Definition	Description
`DsnField`	'user' \| 'host' \| 'port' \| 'database' \| 'path' \| 'protocol'	A connection string, parsed into the parts that matter for its driver.

Behaviour

Topic	Detail	Description
masking	default on	A DSN carries a live password mid-string, and this is the screen people paste into tickets.
warnings	per driver	`sslmode=disable` on Postgres, `encrypt=false` on SQL Server, `tls=false` on MongoDB — plus an unencoded password containing `@` `/` `?` or `#`, which silently reassigns the host.