libredb / libredb/libredb-studio

Admin empty state hardcodes "7 DB Types" while the product ships 16 engines

Open Beginner friendly
#854 1 comment 0 reactions 0 assignees View on GitHub
bug good first issue
Dominant language
TypeScript
Stars
726
Forks
119
Avg merge
7h 47m
Merged PRs (30d)
265

Description

## What

The empty state on the admin Overview is the first thing a new admin sees before they add a connection. It says the product supports 7 database types and names 7 engines. We ship 16 external engines, so nine of them are missing from that first screen.

## Where

`src/components/admin/tabs/OverviewTab.tsx` line 1115:

```tsx
label: "7 DB Types",
description: "PostgreSQL, MySQL, SQLite, MongoDB, Redis, Oracle, MSSQL",
```

The real list is `EXTERNAL_DATABASE_TYPES` in `src/lib/db/compatibility.ts`. ClickHouse, Cassandra, Trino, Druid, Elasticsearch, OpenSearch, Couchbase, DuckDB and libSQL are all absent from the admin copy.

## Expected

The count and the engine names are derived from `EXTERNAL_DATABASE_TYPES` rather than typed by hand, so the card cannot go stale again when a provider lands.

The login page already does this. `src/components/login/hero-proof.tsx` renders the count as `EXTERNAL_DATABASE_TYPES.length`, and `docs/ui/login-page.md` explains why. The admin copy never got the same treatment.

## How to fix

1. In `src/components/admin/tabs/OverviewTab.tsx`, import `EXTERNAL_DATABASE_TYPES` from `@/lib/db/compatibility`.
2. In the `features` array around line 1113, replace the literal label with a derived one: ``label: `${EXTERNAL_DATABASE_TYPES.length} DB Types` ``.
3. Build the description from the first few engine labels instead of the hand-typed string. `getDBConfig` from `@/lib/db-ui-config` is already imported in this file.
4. Follow the shape used in `src/components/login/hero-proof.tsx` so both surfaces read one source.

## How to check

Run `bun run dev`, sign in as admin, and open the admin dashboard with no connections saved. The card should read "16 DB Types". Add or remove an entry in `EXTERNAL_DATABASE_TYPES` locally and confirm the number on screen follows it.

Contributor guide

Open the contributing guide

Research direction

Start in src/components/admin/tabs/OverviewTab.tsx around line 1115 and compare its empty-state feature card with src/components/login/hero-proof.tsx. Read EXTERNAL_DATABASE_TYPES in src/lib/db/compatibility.ts and the existing getDBConfig import, then run bun run dev and open the admin dashboard with no saved connections. Done means the card shows the derived count and engine names, including 16 DB Types, and changes when the source list changes.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
databases, frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Active
Clarity
Clearly specified
Newbie friendliness
88/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.