feat(local-explorer-ui): Add data studio component contexts#12570
feat(local-explorer-ui): Add data studio component contexts#12570
Conversation
create-cloudflare
@cloudflare/kv-asset-handler
miniflare
@cloudflare/pages-shared
@cloudflare/unenv-preset
@cloudflare/vite-plugin
@cloudflare/vitest-pool-workers
@cloudflare/workers-editor-shared
@cloudflare/workers-utils
wrangler
commit: |
🦋 Changeset detectedLatest commit: 7c569e3 The changes in this PR will be included in the next version bump. Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
NuroDev
changed the title
| const resource = useMemo<StudioResource>( | ||
| () => ({ | ||
| databaseId: params.databaseId, | ||
| type: "d1", | ||
| }), | ||
| [params.databaseId] | ||
| ); |
There was a problem hiding this comment.
We can probably remove this at a later date
| return ( | ||
| <Collapsible.Root defaultOpen> | ||
| <Collapsible.Trigger className="group flex items-center gap-2 w-full py-3 px-4 border-0 border-b border-border bg-transparent font-semibold text-[11px] uppercase tracking-wide text-text-secondary cursor-pointer transition-colors hover:bg-border"> | ||
| <Collapsible.Trigger className="group flex items-center gap-2 w-full h-10 py-3 px-4 border-0 border-b border-border bg-transparent font-semibold text-[11px] uppercase tracking-wide text-text-secondary cursor-pointer transition-colors hover:bg-border"> |
There was a problem hiding this comment.
This is just so there is a consistent height between the sidebar items & the studio tab bar
![devin-ai-integration[bot]](https://avatars.githubusercontent.com/in/811515?s=60&v=4){kind=small}
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
|
Claude finished @NuroDev's task —— View job Changeset Review
The changeset Issue: Missing experimental feature opt-in note According to the guidelines (line 23 of The changeset currently states "This is a WIP experimental feature" but doesn't explain how users can opt in to use this feature. Since this is experimental functionality for the local explorer, the changeset should include information about how users can enable or access this feature. Suggested fix: Add a note explaining how users can opt in to or use this experimental feature. For example: ---
"@cloudflare/local-explorer-ui": minor
---
Add the initial plumbing for data studio components.
This serves as another stepping stone for adding the complete data studio to the local explorer.
This is an experimental feature. To use the local explorer, run `wrangler dev` with the appropriate configuration [or whatever the actual opt-in mechanism is]. |
There was a problem hiding this comment.
This file will likely be replaced in future with the new standard Kumo dialog system.
| const Icon = | ||
| searchParams.table === table.value ? CheckIcon : TableIcon; |
There was a problem hiding this comment.
🟡 Table select icon state derived from URL params instead of Select component's internal state
The TableSelect component replaced Select.ItemIndicator (which automatically renders based on the Select component's internal selected state) with a manual check against searchParams.table. This causes the check/table icon to be out of sync with the Select component's actual selection state.
Detailed Explanation
The original code used Base UI's Select.ItemIndicator, which only renders its children when the parent Select.Item is the currently selected item — based on the Select component's own internal state:
<Select.ItemIndicator className="flex items-center w-4">
<CheckIcon className="w-3.5 h-3.5" />
</Select.ItemIndicator>The new code at $databaseId.tsx:133-134 manually determines the icon:
const Icon = searchParams.table === table.value ? CheckIcon : TableIcon;This derives the selected state from searchParams.table (the URL), not from the Select component's value prop. When a user selects a new table, onValueChange fires and triggers navigate(), but the URL (and thus searchParams.table) only updates after the navigation completes. During this brief window, the Select dropdown may show the wrong icon — the previously selected item still shows CheckIcon while the newly selected item shows TableIcon.
Additionally, when no table is selected (searchParams.table is undefined), all items will show TableIcon, which is correct. But if the Select component's internal state somehow differs from the URL (e.g., during controlled value transitions), the icons won't reflect the actual selection.
Prompt for agents
In packages/local-explorer-ui/src/routes/d1/$databaseId.tsx, the TableSelect component at lines 132-148 should use Base UI's Select.ItemIndicator to determine which icon to show, rather than manually comparing against searchParams.table. This ensures the icon state stays in sync with the Select component's internal state. Consider restoring Select.ItemIndicator for the CheckIcon and always showing TableIcon as a fallback. For example, each Select.Item could contain both a Select.ItemIndicator (with CheckIcon) and a non-indicator fallback (with TableIcon), or use the Select component's render props if available to determine the selected state.
Was this helpful? React with 👍 or 👎 to provide feedback.
2 participants
Fixes DEVX-2415.
Changes
WindowTabandWindowTabPanecomponents into dedicated files to they're easier to manage while skimminguseMemothat were purely for class name generation with inlined usage ofcn()styleprops with Tailwind CSS classesrefreshSchemalogic has refactored from callback hell to a try / catch. This SHOULD work like before, but should it need to be restored it can.A picture of a cute animal (not mandatory, but encouraged)