feat: first-boot compose discovery and adopt-first sidebar (#1600)

* feat: add compose discovery for setup preflight and sidebar empty state

Expose read-only compose discovery via GET /api/stacks/discovery and setup

diagnostics. Replace the blank sidebar with path-aware discovery and move

adopt into a dedicated dialog with a three-tab Create Stack flow.

* test: assert post-setup handoff via sessionStorage read-back

The Setup preflight test spied on Storage.prototype.setItem to check the
post-setup adopt handoff. When the jsdom storage probe fails and the test
harness swaps in its in-memory storage stub (which does not extend Storage),
that stub's setItem never touches Storage.prototype, so the spy records zero
calls and the assertion fails even though the component wrote the value.

Read the value back with sessionStorage.getItem instead, matching how every
other storage test in the suite asserts. This is robust to both the native
jsdom storage and the in-memory fallback.

* fix(setup): surface compose discovery as a preflight check row

Drop the Setup discovery banner and non-working Review button. Show

counts as a pass row in EnvironmentChecks (Setup only) and keep

Enter Sencho as the handoff that opens adopt when candidates exist.

* test(setup): cover zero-count discovery row omission

* fix(stacks): widen adopt scan to any yaml and rename into place

Homelab layouts often use nginx.yml or plex.yml. Surface those for
adopt (except overrides), rename to compose.yaml on move so stacks
register, and reset the confirm UI when a move fails.
This commit is contained in:
Anso
2026-07-10 08:42:52 -04:00
committed by GitHub
parent 7848ce339a
commit ba2e7bded9
26 changed files with 1490 additions and 130 deletions
+45 -5
View File
@@ -6,6 +6,7 @@ import { NotificationPanel } from './NotificationPanel';
import { TopBar } from './TopBar';
import { ViewRouter } from './EditorLayout/ViewRouter';
import { CreateStackDialog, type CreateMode } from './EditorLayout/CreateStackDialog';
import { AdoptExistingDialog } from './EditorLayout/AdoptExistingDialog';
import { EditorView } from './EditorLayout/EditorView';
import { ShellOverlays } from './EditorLayout/ShellOverlays';
import { classifyFailedGate } from './EditorLayout/failed-gate-recovery';
@@ -71,7 +72,7 @@ const ResourcesView = lazy(() => import('./ResourcesView'));
const GlobalObservabilityView = lazy(() => import('./GlobalObservabilityView').then(m => ({ default: m.GlobalObservabilityView })));
export default function EditorLayout() {
const { isAdmin, can } = useAuth();
const { isAdmin, can, permissions } = useAuth();
const { status: trivy } = useTrivyStatus();
const { runWithLog, panelState, logRows, healthGate } = useDeployFeedback();
@@ -164,14 +165,21 @@ export default function EditorLayout() {
createDialogOpen, setCreateDialogOpen,
} = overlayState;
// Which mode the create dialog opens on. The toolbar Create button opens on
// 'empty'; the zero-stacks empty state opens on 'import'.
// Which mode the create dialog opens on (always empty after import tab removal).
const [createDialogInitialMode, setCreateDialogInitialMode] = useState<CreateMode>('empty');
const openCreateDialog = useCallback((mode: CreateMode) => {
const [adoptDialogOpen, setAdoptDialogOpen] = useState(false);
const adoptOpenedFromSetupRef = useRef(false);
const openCreateDialog = useCallback((mode: CreateMode = 'empty') => {
setCreateDialogInitialMode(mode);
setCreateDialogOpen(true);
}, [setCreateDialogOpen]);
const openAdoptDialog = useCallback(() => {
setCreateDialogOpen(false);
setAdoptDialogOpen(true);
}, [setCreateDialogOpen]);
const [diffPreviewEnabled] = useComposeDiffPreviewEnabled();
const [topNavLabels] = useTopNavLabels();
const [topNavAlign] = useTopNavAlign();
@@ -677,6 +685,23 @@ export default function EditorLayout() {
}
}, [containers, selectedFile]); // eslint-disable-line react-hooks/exhaustive-deps
useEffect(() => {
if (permissions === null) return;
if (adoptOpenedFromSetupRef.current) return;
try {
const raw = sessionStorage.getItem('sencho:post-setup');
if (!raw) return;
sessionStorage.removeItem('sencho:post-setup');
const parsed = JSON.parse(raw) as { openAdopt?: boolean };
if (parsed.openAdopt && can('stack:create')) {
adoptOpenedFromSetupRef.current = true;
setAdoptDialogOpen(true);
}
} catch {
// ignore malformed session flag
}
}, [permissions, can]);
const createStackSlot = can('stack:create') ? (
<>
<Button
@@ -709,10 +734,19 @@ export default function EditorLayout() {
);
}}
onStacksChanged={async () => { await refreshStacks(); }}
onOpenAdopt={openAdoptDialog}
/>
</>
) : null;
const adoptDialogEl = (
<AdoptExistingDialog
open={adoptDialogOpen}
onOpenChange={setAdoptDialogOpen}
onStacksChanged={async () => { await refreshStacks(); }}
/>
);
return (
<GlobalCommandPaletteProvider>
{(() => {
@@ -766,7 +800,11 @@ export default function EditorLayout() {
if (node) void stackActions.loadFileOnNode(node, file);
},
filterChip,
onOpenCreate: can('stack:create') ? openCreateDialog : undefined,
onOpenCreate: can('stack:create') ? () => openCreateDialog('empty') : undefined,
onOpenAdopt: can('stack:read') ? openAdoptDialog : undefined,
onScan: handleScanStacks,
canCreate: can('stack:create'),
activeNodeId: activeNode?.id ?? null,
openMuteRulesWithPrefill,
stacksLoadStatus,
stacksLoadError,
@@ -1079,6 +1117,7 @@ export default function EditorLayout() {
onNavigate={navigateMobileAware}
onSettings={openSettingsMobileAware}
/>
{adoptDialogEl}
{shellOverlaysEl}
</div>
);
@@ -1095,6 +1134,7 @@ export default function EditorLayout() {
{/* Main Workspace */}
{workspaceEl}
</div>
{adoptDialogEl}
{shellOverlaysEl}
</div>
);