Skip to content

fix: construct db_icon from datasource_name when missing in API response#38

Open
wicky-zipstack wants to merge 1 commit intomainfrom
fix/connection-icon-broken
Open

fix: construct db_icon from datasource_name when missing in API response#38
wicky-zipstack wants to merge 1 commit intomainfrom
fix/connection-icon-broken

Conversation

@wicky-zipstack
Copy link
Copy Markdown
Contributor

@wicky-zipstack wicky-zipstack commented Apr 2, 2026

What

  • Construct db_icon URL from datasource_name when missing in the create/update connection API response

Why

  • After the recent optimization to use API response data directly instead of re-fetching the connection list, the connection dropdown shows broken image icons
  • The create/update connection API response does not include the db_icon field
  • The dropdown renders <img src={undefined}> resulting in a broken image placeholder

How

  • In NewProject.jsx and NewEnv.jsx, when handling the optimistic update with updatedConnection data, check if db_icon is missing
  • If missing, construct the URL from datasource_name using the static pattern: https://storage.googleapis.com/visitran-static/adapter/{datasource_name}.png
  • Handles the postgrespostgresql naming mismatch

Can this PR break any existing features. If yes, please list possible items. If no, please explain why. (PS: Admins do not merge the PR without this section filled)

  • No. This only adds a fallback when db_icon is missing. If db_icon is already present in the response, the existing value is used unchanged. No impact on connections fetched from the list API (which already include db_icon).

Database Migrations

  • None

Env Config

  • None

Relevant Docs

  • N/A

Related Issues or PRs

Dependencies Versions

  • None

Notes on Testing

  • Create a new connection from the Create Project modal — icon should appear correctly in dropdown
  • Create a new connection from the Environment modal — icon should appear correctly
  • Test with different DB types (Postgres, Snowflake, BigQuery, DuckDB)
  • Verify existing connections (fetched from list API) still show icons correctly

Screenshots

N/A

Checklist

@greptile-apps
Copy link
Copy Markdown

greptile-apps bot commented Apr 2, 2026

Greptile Summary

This PR fixes broken connection dropdown icons by constructing a db_icon URL from datasource_name when the create/update connection API response omits the field. The fallback uses the static GCS pattern https://storage.googleapis.com/visitran-static/adapter/{datasource_name}.png and handles the known postgres → postgresql naming mismatch. Changes are applied identically in both NewProject.jsx and NewEnv.jsx.

Key changes:

  • Shallow-copies updatedConnection into conn before mutation, avoiding direct state object mutation — good practice.
  • Guards icon construction with !conn.db_icon && conn.datasource_name, correctly covering undefined, null, and "" for either field.
  • The state-update logic (exists-check, map-or-append) is functionally identical to what was there before, just referencing conn instead of updatedConnection.
  • No impact on connections fetched from the list API, which already carry db_icon.

The fix is minimal, targeted, and correct. The two previously raised concerns (duplicated logic across files, single override in the mapping) were already surfaced in earlier review threads and are not repeated here.

Confidence Score: 5/5

  • Safe to merge — the change is a well-guarded additive fallback with no impact on existing data paths.
  • Both changed files contain the correct logic: the fallback only fires when db_icon is absent and datasource_name is present, the postgres→postgresql mapping is handled, and the state update is non-destructive. No P0 or P1 issues found. Prior concerns (code duplication, single override entry) are P2 style suggestions already captured in previous review threads.
  • No files require special attention.

Important Files Changed

Filename Overview
frontend/src/base/new-project/NewProject.jsx Adds db_icon fallback construction from datasource_name when missing in optimistic connection update; logic is correct and well-guarded.
frontend/src/base/components/environment/NewEnv.jsx Mirrors the same db_icon fallback as NewProject.jsx; handles postgres→postgresql mapping and guards against missing datasource_name.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A["getAllConnections(updatedConnection)"] --> B{updatedConnection\nhas id?}
    B -- No --> C[Fetch full connection\nlist from API]
    B -- Yes --> D["const conn = { ...updatedConnection }"]
    D --> E{conn.db_icon\nmissing AND\nconn.datasource_name\npresent?}
    E -- No --> H[Use conn as-is]
    E -- Yes --> F{datasource_name\n=== 'postgres'?}
    F -- Yes --> G["iconName = 'postgresql'"]
    F -- No --> G2["iconName = datasource_name"]
    G --> I["conn.db_icon = GCS_URL/iconName.png"]
    G2 --> I
    I --> H
    H --> J{Connection id\nalready in list?}
    J -- Yes --> K[Replace existing\nentry with conn]
    J -- No --> L[Append conn\nto list]
    K --> M[setConnectionList]
    L --> M
    C --> N[setConnectionList with\nAPI response]
Loading

Reviews (2): Last reviewed commit: "fix: construct db_icon from datasource_n..." | Re-trigger Greptile

The create/update connection API response doesn't include db_icon,
causing broken image icons in the connection dropdown after creating
a new connection. Now constructs the icon URL from datasource_name
when db_icon is missing.
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.

1 participant