fix: UI/UX improvements — tooltips, nav label, connection save and refresh#13
Merged
Conversation
…fresh - Rename "Dashboard" to "Projects" in top navigation for clarity - Add Ant Design Tooltip wrappers to all Visitran AI sidebar header buttons - Await getAllConnection() before closing modal to ensure dropdown refreshes - Skip connection test on metadata-only updates (name/description changes)
wicky-zipstack
requested review from
Deepak-Gnanasekar,
Mohammed-Salahudeen,
abhizipstack and
tahierhussain
- Constrain explorer tree height so content overflows and scrolls - Show scrollbar thumb only when hovering over the explorer panel
- Replace 3-dot MoreOutlined icon with "More (N)" text button showing hidden item count - Add square badge for the count with primary color styling - Place "More" button inline next to last visible item instead of far right - Skip "More" button entirely when hidden items fit without it
tahierhussain
requested changes
Mar 31, 2026
tahierhussain
left a comment
tahierhussain
left a comment
Contributor
There was a problem hiding this comment.
@wicky-zipstack Can you please add screenshots for all the UI changes that were made?
|
| Filename | Overview |
|---|---|
| backend/backend/application/context/connection.py | Adds _has_credentials_changed() helper and server-side credential guard before test_connection_data(); the connection_url exclusion in _DERIVED_FIELDS leaves a silent bypass for URL-mode connections (flagged in prior thread, still unresolved) |
| frontend/src/base/components/environment/CreateConnection.jsx | Adds metadata_only flag when only name/description changed, passes updated connection object to getAllConnection() for optimistic list refresh; backend now provides secondary server-side guard mitigating the credential-change gap in hasDetailsChanged |
| frontend/src/base/components/environment/NewEnv.jsx | Replaces network refetch in getAllConnections with an optimistic state update when a connection object with an id is supplied, falling back to a full fetch otherwise; correctly handles insert vs. update semantics |
| frontend/src/base/new-project/NewProject.jsx | Mirrors the NewEnv.jsx optimistic-update pattern for getAllConnections; also adds ` |
| frontend/src/ide/editor/no-code-toolbar/no-code-toolbar.jsx | Replaces standalone MoreOutlined ellipsis button with an inline "More (N)" badge button inside the Space element; width measurement logic accounts for the new button's presence via ELLIPSIS_BUTTON_WIDTH constant |
| frontend/src/ide/editor/no-code-toolbar/no-code-toolbar.css | Adds .toolbar-more-badge styling for the count chip and adjusts toolbar content layout to flexbox; scroll-behavior: smooth is now a no-op on an overflow: hidden element (harmless) |
| frontend/src/ide/ide-layout.css | Chains min-height: 0 / overflow: hidden through the Ant Design tab hierarchy to enable proper scrolling in the explorer tree, and adds webkit hover-only scrollbar thumb styling |
| frontend/src/ide/chat-ai/Header.jsx | Wraps all AI sidebar action buttons in <Tooltip>, removes the HistoryOutlined button that previously had a misleading onClick handler, and removes now-redundant inline title props |
| frontend/src/base/components/topbar/NavigationTabs.jsx | Cosmetic rename of "Dashboard" label to "Projects" — no logic changes |
Sequence Diagram
sequenceDiagram
participant U as User
participant FE as CreateConnection.jsx
participant API as Backend API
participant DB as Database
Note over U,DB: Metadata-only update (name/description change)
U->>FE: Change connection name, click Save
FE->>FE: hasDetailsChanged=true, no credentials revealed
FE->>API: PUT /connection/{id} { metadata_only: true, connection_details: { passw: "********" } }
API->>DB: fetch stored_model
DB-->>API: stored_details (decrypted)
API->>API: _merge_with_stored → replaces sentinels with real values
API->>API: _has_credentials_changed(merged, stored) → False
Note over API: metadata_only=true AND credentials_changed=false → skip test
API->>DB: update_connection(name, details)
DB-->>API: updated model
API-->>FE: { id, name, datasource_name, ... }
FE->>FE: getAllConnection(updatedConnection) → optimistic setConnectionList
FE->>U: Modal closes, dropdown updated immediately
Note over U,DB: Credential update (password changed after reveal)
U->>FE: Reveal credentials, change password, click Save
FE->>FE: hasDetailsChanged=false → metadata_only NOT set
FE->>API: PUT /connection/{id} { connection_details: { passw: "new_password" } }
API->>API: _merge_with_stored → new password not masked, kept as-is
API->>API: _has_credentials_changed → True
API->>API: test_connection_data(datasource, merged_data)
API->>DB: update_connection
DB-->>API: updated model
API-->>FE: { id, name, ... }
FE->>FE: getAllConnection(updatedConnection) → optimistic update
FE->>U: Modal closes, connection validated
Reviews (6): Last reviewed commit: "fix: improve getAllConnections — rename ..." | Re-trigger Greptile
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
- Use CSS variables for scrollbar colors (dark/light theme support) - Remove !important from toolbar CSS, use specificity instead - Remove fit-without-More optimization logic - Use create/update API response data instead of re-fetching connection list - Replace backend credential-change detection with explicit metadata_only flag - Remove History button (mislabeled onClick handler) - Remove empty seq_badge_wrapper div from More button
Use padding-top on .toolbar-more-item instead of empty seq_badge_wrapper div.
Use margin-top: 11px on .toolbar-more-item to match seq_badge_wrapper offset on other toolbar items, instead of empty spacer div.
…e path - Add _has_credentials_changed() as server-side safety net: skip connection test only when metadata_only=true AND credentials are unchanged - Pass update API response data to getAllConnection() to avoid re-fetching
tahierhussain
requested changes
Mar 31, 2026
When connection data is passed from create/update response, update the connection list state directly instead of making an extra API call. Applied to both NewEnv.jsx and NewProject.jsx.
tahierhussain
requested changes
Mar 31, 2026
… fallback to empty array - Rename connectionData → updatedConnection for clarity - Add optional chaining (updatedConnection?.id, c?.id) for edge cases - Ensure connectionList always falls back to [] if API returns undefined/null - Applied to both NewEnv.jsx and NewProject.jsx
abhizipstack
approved these changes
Apr 1, 2026
abhizipstack
approved these changes
Apr 1, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
<Tooltip>wrappers to all 7 Visitran AI sidebar header buttonsWhy
getAllConnection()was not awaited before closing the modalHow
Tooltipfrom antd, wrapped all header buttons with<Tooltip title="...">, removed redundanttitleattributesgetAllConnection()toawait getAllConnection()beforesetIsModalOpen(false)in both create and update paths_has_credentials_changed()helper that compares incoming credentials against stored values;test_connection_data()is now only called when credentials actually changedMoreOutlinedicon withMore (N)text + count badge + down arrow; moved button inline with toolbar items instead of far right; added smart overflow check — if hidden items fit without the "More" button, show all items directly.toolbar-more-badgestyling (square badge, primary blue, white text); fixed vertical alignment and top clipping of filter badgeCan 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)
awaitfix only changes timing (wait before close vs close before wait). The backend credential check is conservative — it still tests when any credential field differs, only skipping when metadata-only changes are made. The scrollbar and toolbar changes are CSS/layout-only and do not affect component logic. All CSS used is cross-browser compatible.Database Migrations
Env Config
Relevant Docs
Related Issues or PRs
Dependencies Versions
Notes on Testing
Screenshots
Checklist