ui(deploy): scrollIntoView when expanding a history row
On long deployment histories the StartupLogPanel would render off-screen when the user clicked a row. Ref + useEffect scrolls the panel into view with block:'nearest' so expanding a row that's already in view doesn't cause a disorienting jump. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -1,4 +1,4 @@
|
|||||||
import { useState } from 'react';
|
import { useEffect, useRef, useState } from 'react';
|
||||||
import { DataTable } from '@cameleer/design-system';
|
import { DataTable } from '@cameleer/design-system';
|
||||||
import type { Column } from '@cameleer/design-system';
|
import type { Column } from '@cameleer/design-system';
|
||||||
import type { Deployment, AppVersion } from '../../../../api/queries/admin/apps';
|
import type { Deployment, AppVersion } from '../../../../api/queries/admin/apps';
|
||||||
@@ -16,8 +16,15 @@ interface Props {
|
|||||||
export function HistoryDisclosure({ deployments, versions, appSlug, envSlug }: Props) {
|
export function HistoryDisclosure({ deployments, versions, appSlug, envSlug }: Props) {
|
||||||
const [open, setOpen] = useState(false);
|
const [open, setOpen] = useState(false);
|
||||||
const [expanded, setExpanded] = useState<string | null>(null);
|
const [expanded, setExpanded] = useState<string | null>(null);
|
||||||
|
const logPanelRef = useRef<HTMLDivElement | null>(null);
|
||||||
const versionMap = new Map(versions.map((v) => [v.id, v]));
|
const versionMap = new Map(versions.map((v) => [v.id, v]));
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (expanded && logPanelRef.current) {
|
||||||
|
logPanelRef.current.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
|
||||||
|
}
|
||||||
|
}, [expanded]);
|
||||||
|
|
||||||
const rows = deployments
|
const rows = deployments
|
||||||
.slice()
|
.slice()
|
||||||
.sort((a, b) => (b.createdAt ?? '').localeCompare(a.createdAt ?? ''));
|
.sort((a, b) => (b.createdAt ?? '').localeCompare(a.createdAt ?? ''));
|
||||||
@@ -55,7 +62,11 @@ export function HistoryDisclosure({ deployments, versions, appSlug, envSlug }: P
|
|||||||
{expanded && (() => {
|
{expanded && (() => {
|
||||||
const d = rows.find((r) => r.id === expanded);
|
const d = rows.find((r) => r.id === expanded);
|
||||||
if (!d) return null;
|
if (!d) return null;
|
||||||
return <StartupLogPanel deployment={d} appSlug={appSlug} envSlug={envSlug} />;
|
return (
|
||||||
|
<div ref={logPanelRef}>
|
||||||
|
<StartupLogPanel deployment={d} appSlug={appSlug} envSlug={envSlug} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
})()}
|
})()}
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
|||||||
Reference in New Issue
Block a user