发布

  • [OPIK-6309] [FE] feat: unify top bars across side panels (#6627)

    frostbyte_neo 发布于 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 a header prop for full top-bar replacement and blockOverlayClose
    for form-panel dirty guards. Drop closeButtonPosition (zero callers) and
    hideDefaultControls (replaced by header semantics).

    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

    下载附件