DX-1485: Multi tabs and search history #17
Conversation
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
There was a problem hiding this comment.
Pull Request Overview
Adds multi-tab support and search history enhancements, along with various style and hook updates across the data browser.
- Introduce a
useTabcontext and new tab UI (DatabrowserTabs) for per-tab state isolation - Enhance
SearchInputwith history tracking, deduplication, and keyboard navigation in a popover - Update multiple components to use
useTab, adjust styling/padding, and gate effects based on active tab
Reviewed Changes
Copilot reviewed 20 out of 57 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| src/components/databrowser/components/sidebar/skeleton-buttons.tsx | Adjust loading skeleton wrapper styles |
| src/components/databrowser/components/sidebar/search-input.tsx | Add search history, dedupe logic, popover with keyboard nav |
| src/components/databrowser/components/sidebar/keys-list.tsx | Switch key list to useTab store context |
| src/components/databrowser/components/sidebar/infinite-scroll.tsx | Guard fetch-on-mount by active tab, spread props & styles |
| src/components/databrowser/components/sidebar/index.tsx | Sidebar layout padding and removed borders/bg |
| src/components/databrowser/components/sidebar/empty.tsx | Empty state background styling |
| src/components/databrowser/components/sidebar/db-size.tsx | Swap to useRedis hook for DB-size query |
| src/components/databrowser/components/display/key-actions.tsx | Add “Copy key” menu item, update delete styling |
| src/components/databrowser/components/display/input/custom-editor.tsx | Gate Monaco language reset by active tab |
| src/components/databrowser/components/display/index.tsx | Remove border/bg and switch to useTab for key selection |
| src/components/databrowser/components/display/header-badges.tsx | Rename TTL hook import |
| src/components/databrowser/components/display/display-simple.tsx | Remove extra padding |
| src/components/databrowser/components/display/display-list.tsx | Switch list display to useTab, add transition-colors |
| src/components/databrowser/components/display/display-list-edit.tsx | Switch edit form to useTab, remove extra padding |
| src/components/databrowser/components/display/display-header.tsx | Switch header to useTab, remove padding |
| src/components/databrowser/components/databrowser-tabs.tsx | New tabs UI component |
| src/components/databrowser/components/databrowser-instance.tsx | New instance layout with panels (needs tab context) |
| src/components/databrowser/components/add-key-modal.tsx | Switch add-key modal to useTab |
| package.json | Bump Radix UI packages, add label package |
| index.html | Update playground script path |
| const [focusedIndex, setFocusedIndex] = useState(-1) | ||
|
|
||
| const inputRef = useRef<HTMLInputElement>(null) | ||
| const historyItemRefs = useRef<(HTMLButtonElement | null)[]>([]) |
There was a problem hiding this comment.
The historyItemRefs ref is populated but never used. Either implement keyboard navigation using these refs (e.g., to programmatically focus items) or remove this unused ref to simplify the code.
| const historyItemRefs = useRef<(HTMLButtonElement | null)[]>([]) |
Copilot uses AI. Check for mistakes.
| @@ -43,7 +141,7 @@ export const SearchInput = () => { | |||
| <IconX size={16} /> | |||
| <span className="sr-only">Clear</span> | |||
| </Button> | |||
| )} | |||
| )}{" "} | |||
There was a problem hiding this comment.
There's a stray {" "} after the clear button that adds an unnecessary space. You can remove this to clean up the JSX.
| )}{" "} | |
| )} |
Copilot uses AI. Check for mistakes.
|
|
||
| export const DatabrowserInstance = ({ hidden }: { hidden?: boolean }) => { | ||
| return ( | ||
| <KeysProvider> |
There was a problem hiding this comment.
The new useTab hook is used in many child components but there's no TabProvider wrapping the tree. Wrap the content (e.g., around KeysProvider) with <TabProvider> so that useTab has the required context.
Copilot uses AI. Check for mistakes.
No description provided.