-
[OPIK-6309] [FE] feat: unify top bars across side panels (#6627)
发布于
2026-05-07 13:35:49 +00:00 - [OPIK-6309] [FE] feat: introduce SheetTopBar with form/info variants
Replace private DefaultSheetHeader with exported SheetTopBar (form/info
variants) inside ui/sheet.tsx. Add blockOverlayClose contract on
SheetContent + SideDialog so form panels can guard against dirty-state
overlay close. Migrate AddOptimizationDialog to the info variant and
drop the centered title/subtitle block per design.Co-Authored-By: Claude Opus 4.7 (1M context) noreply@anthropic.com
- feat(sheet-panels): adopt SheetTopBar across v2 sheet usages
Roll the unified SheetTopBar pattern out to every v2 panel that lives
on the Sheet primitive: AddExperimentDialog, QuickstartDialog,
SetGuardrailDialog, AgentConfigurationEditPanel and TraceLogsSidebar.
Inner SheetTitle blocks are removed in favour of the top-bar slot,
right-side actions move into the SheetTopBar children, and
AgentConfigurationEditPanel wires blockOverlayClose to its dirty state
so unsaved edits can't be dismissed by an overlay click.Co-Authored-By: Claude Opus 4.7 (1M context) noreply@anthropic.com
- feat(resizable-side-panel): extend top-bar pattern to RSP
Add ResizableSidePanelTopBar (form/info variants — X / chevron close,
title slot, leftIcon, right-aligned actions) and a self-contained
ResizableSidePanelArrowNavigation helper that owns the J/K hotkeys
(plus visible Previous/Next buttons with HotkeyDisplay). RSP itself
gains aheaderprop for full top-bar replacement andblockOverlayClose
for form-panel dirty guards. Drop closeButtonPosition (zero callers) and
hideDefaultControls (replaced byheadersemantics).Migrate every v2 RSP consumer to the new header slot:
- TraceDetailsPanel / ThreadDetailsPanel: dedup the inline
chevron+title+nav JSX, drop their custom J/K useHotkeys (now owned
by the helper) - CompareExperimentsPanel: chevron + Share + Copy ID + Previous/Next;
Share/Copy ID downsized to 2xs to match the nav buttons - TestSuiteExperimentPanel: chevron + Share + Copy ID + Previous/Next,
empty title (body content owns the heading) - DatasetItemEditorAutosaveLayout: chevron + "Dataset item "
(full id on hover) + dropdown menu + Previous/Next - TestSuiteItemPanel: chevron + "Add item" / "Edit item" + dropdown
(only when not new) + Previous/Next - AddItemPanelWrapper: form variant (X) + "Add item"
- CreateDatasetSidebar: form variant (X) + dirty-state overlay block
ShareURLButton accepts an optional
size="2xs"so consumers can match
the new top-bar density. v1 mirrors untouched — RSP's default render
path is preserved verbatim.Co-Authored-By: Claude Opus 4.7 (1M context) noreply@anthropic.com
- refactor(playground-logs): align empty + no-match states with main Logs page
Swap DataTableNoData for the richer DataTableEmptyContent (light/dark
empty-logs illustrations, title, description) and DataTableNoMatchingData
(empty-search illustrations, Clear filters button). Wire handleClearFilters
to reset search and filters in one click. Mirrors the TracesSpansTab
treatment so the playground logs sidebar feels consistent with the parent
Logs page.Co-Authored-By: Claude Opus 4.7 (1M context) noreply@anthropic.com
- refactor(side-panels): tighten OPIK-6309 follow-ups
- CompareExperimentsPanel: pass ignoreHotkeys={isTraceDetailsOpened} to
the arrow-nav helper so J/K don't navigate the outer panel while a
trace details child panel is open (mirrors TestSuiteExperimentPanel) - ResizableSidePanel: drop the redundant {headerContent && headerContent}
guard - Extract DatasetItemActionsDropdown — Share / Copy item ID / Delete item
menu was inlined in DatasetItemEditorAutosaveLayout and TestSuiteItemPanel
with identical structure; now a single shared component
Co-Authored-By: Claude Opus 4.7 (1M context) noreply@anthropic.com
- test(side-panels): add ResizableSidePanelArrowNavigation tests
11 vitest cases covering: render-nothing-when-no-nav, Previous/Next
button render + click handlers, disabled states from hasPrevious /
hasNext, J / K keyboard handlers, ignoreHotkeys gate, and J/K no-op
when the corresponding direction is unavailable.Co-Authored-By: Claude Opus 4.7 (1M context) noreply@anthropic.com
- refactor(side-panels): apply UX feedback on top-bar panels
- AddExperimentDialog / AddOptimizationDialog: tighten content padding
to 20 px (px-5) so it aligns with the top bar, and drop the
max-w-[1250px] cap so the central content grows with the panel - TraceLogsSidebar (Playground / Optimization / Experiment logs):
remove the right-side "Back" button per UX. Cleans up the now-unused
backLabel prop chain through TraceLogsSidebarButton, TrialDetails,
PlaygroundHeader, and CompareExperimentsDetails.
Co-Authored-By: Claude Opus 4.7 (1M context) noreply@anthropic.com
Co-authored-by: Claude Opus 4.7 (1M context) noreply@anthropic.com
下载附件