diff --git a/docs/features/editor.mdx b/docs/features/editor.mdx index dc23c792..79566715 100644 --- a/docs/features/editor.mdx +++ b/docs/features/editor.mdx @@ -140,6 +140,18 @@ Review the diff, then: If there are no unsaved changes the modal is skipped and the save proceeds directly. The toggle is off by default and stored per browser, so each device remembers its own setting. +## On a phone + +On a narrow screen the stack opens as a full-screen detail with **Health**, **Logs**, and **Compose** segments instead of the two-column cockpit. The **Compose** segment shows the read-only Anatomy summary; tap **edit** to open a full-screen editor for small, safe changes. + + + Mobile compose editor with a Cancel button, the compose.yaml label, a monospace text field showing the compose file, a small-edits note, and Save and Save and Deploy buttons + + +The mobile editor is a lightweight monospace text field rather than Monaco. Tap **compose** or **.env** at the top to choose the file. The **.env** toggle appears only when the stack has an env file, and the file picker is locked while you have unsaved edits so switching files cannot drop them. The footer carries the same **Save** and **Save & Deploy** actions, and every protection is shared with desktop: the diff preview, save-conflict handling, and the unsaved-changes prompt all behave the same way. **Cancel** leaves the editor and asks before discarding unsaved edits. + +A note at the bottom of the editor is a reminder that mobile editing is meant for small corrections such as bumping an image tag or fixing a value. For large compose rewrites, open the stack on a desktop. Editing requires the `stack:edit` permission. + ## Logs Below the Command Center the left column reserves the rest of its height for the **Logs** stream. Two modes are available, toggled by the buttons at the top right of the section. @@ -189,6 +201,9 @@ Sencho tries `/bin/bash` first and transparently falls back to `/bin/sh` if bash The stack has no env file to edit. Add an `env_file:` entry to a service in `compose.yaml` and save, or create a `.env` file in the stack directory through the **Files** tab. + + Open the **Compose** segment in the stack detail and tap **edit**. If the **edit** affordance is missing, your role lacks the `stack:edit` permission; ask an admin to grant it. The phone editor is intended for small corrections; for large compose rewrites, open the stack on a desktop. + The container stopped between clicking the button and the exec starting. Start the container from the action bar (or the row's **Start service** option) and try again. diff --git a/docs/images/editor/editor-mobile.png b/docs/images/editor/editor-mobile.png new file mode 100644 index 00000000..ff2354c2 Binary files /dev/null and b/docs/images/editor/editor-mobile.png differ diff --git a/e2e/mobile-stack-edit.spec.ts b/e2e/mobile-stack-edit.spec.ts new file mode 100644 index 00000000..20ffc07d --- /dev/null +++ b/e2e/mobile-stack-edit.spec.ts @@ -0,0 +1,125 @@ +/** + * Mobile compose/.env editing (below the md breakpoint). + * + * Logs in and creates the stack at desktop width (the create dialog and stack + * list are desktop-driven), then resizes to a phone viewport so EditorView + * renders MobileStackDetail. Covers the acceptance-criteria flows: open on + * mobile, edit compose, save, save-and-deploy guard, and discard dirty changes. + * Phone widths exercised: 390px and 430px. The compose/.env toggle and env-file + * save share the same handlers and are covered by MobileStackDetail.test.tsx. + */ +import { test, expect, type Page } from '@playwright/test'; +import { loginAs, waitForStacksLoaded } from './helpers'; + +const TEST_STACK = 'e2e-mobile-edit-stack'; +const PHONE_390 = { width: 390, height: 844 }; +const PHONE_430 = { width: 430, height: 932 }; + +async function deleteTestStack(page: Page) { + await page.evaluate(async (name) => { + await fetch(`/api/stacks/${name}`, { method: 'DELETE', credentials: 'include' }).catch(() => { }); + }, TEST_STACK); +} + +async function createTestStack(page: Page) { + await page.getByRole('button', { name: 'Create Stack' }).click(); + await expect(page.getByRole('dialog')).toBeVisible({ timeout: 5_000 }); + await page.locator('#create-stack-name').fill(TEST_STACK); + await page.locator('[role="dialog"]').getByRole('button', { name: 'Create' }).click(); + await expect(page.getByRole('dialog')).toBeHidden({ timeout: 8_000 }); +} + +// Open the freshly created stack in the editor (desktop), then drop to a phone +// viewport so the mobile detail surface renders, and select the Compose segment. +async function openComposeOnPhone(page: Page, viewport = PHONE_390) { + await page.locator('[role="listbox"]').getByText(TEST_STACK, { exact: true }).click(); + await page.setViewportSize(viewport); + await page.getByRole('tab', { name: 'Compose' }).click(); +} + +async function openEditor(page: Page) { + await page.getByRole('button', { name: 'edit' }).click(); + await expect(page.getByTestId('mobile-compose-editor')).toBeVisible({ timeout: 5_000 }); +} + +test.describe('mobile stack editing', () => { + test.beforeEach(async ({ page }) => { + await loginAs(page); + await waitForStacksLoaded(page); + await deleteTestStack(page); + await page.reload(); + await loginAs(page); + await waitForStacksLoaded(page); + await createTestStack(page); + }); + + test.afterEach(async ({ page }) => { + await page.setViewportSize({ width: 1280, height: 800 }); + await deleteTestStack(page); + }); + + test('edits and saves the compose file from a phone (390px)', async ({ page }) => { + await openComposeOnPhone(page); + await openEditor(page); + + await page.getByTestId('mobile-compose-editor').fill('services:\n app:\n image: nginx:1.27\n restart: always\n'); + await page.getByTestId('mobile-editor-save').click(); + + await expect(page.getByText(/file saved successfully/i)).toBeVisible({ timeout: 5_000 }); + + // The edit must actually reach disk, not just flash a toast. + const onDisk = await page.evaluate(async (name) => { + const res = await fetch(`/api/stacks/${name}`, { credentials: 'include' }); + return res.text(); + }, TEST_STACK); + expect(onDisk).toContain('nginx:1.27'); + }); + + test('does not deploy when the save PUT fails', async ({ page }) => { + await page.route(`**/api/stacks/${TEST_STACK}`, async (route, req) => { + if (req.method() === 'PUT') { + await route.fulfill({ status: 500, body: 'forced save failure' }); + return; + } + await route.continue(); + }); + let deployAttempts = 0; + await page.route(`**/api/stacks/${TEST_STACK}/deploy*`, async (route, req) => { + if (req.method() === 'POST') deployAttempts += 1; + await route.continue(); + }); + + await openComposeOnPhone(page); + await openEditor(page); + await page.getByTestId('mobile-editor-save-deploy').click(); + + await expect(page.getByText(/failed to save file/i)).toBeVisible({ timeout: 5_000 }); + await page.waitForTimeout(1_000); + expect(deployAttempts).toBe(0); + }); + + test('guards a dirty close and discards on confirm', async ({ page }) => { + await openComposeOnPhone(page); + await openEditor(page); + + await page.getByTestId('mobile-compose-editor').fill('services:\n app:\n image: nginx:1.28\n'); + await page.getByTestId('mobile-editor-close').click(); + + const dialog = page.getByRole('alertdialog', { name: /discard unsaved changes/i }); + await expect(dialog).toBeVisible({ timeout: 5_000 }); + await page.getByRole('button', { name: 'Discard changes' }).click(); + + // The editor closes back to the read-only Compose segment. + await expect(page.getByTestId('mobile-compose-editor')).toBeHidden(); + await expect(page.getByRole('button', { name: 'edit' })).toBeVisible(); + }); + + test('opens a usable editor at 430px', async ({ page }) => { + await openComposeOnPhone(page, PHONE_430); + await openEditor(page); + + await expect(page.getByTestId('mobile-compose-editor')).toBeVisible(); + await expect(page.getByTestId('mobile-editor-save')).toBeVisible(); + await expect(page.getByTestId('mobile-editor-save-deploy')).toBeVisible(); + }); +}); diff --git a/frontend/src/components/EditorLayout.tsx b/frontend/src/components/EditorLayout.tsx index dbf8259f..3340101e 100644 --- a/frontend/src/components/EditorLayout.tsx +++ b/frontend/src/components/EditorLayout.tsx @@ -453,6 +453,8 @@ export default function EditorLayout() { onDismissRecovery={() => { if (selectedFile) dismissActionResult(selectedFile); }} panelStartedAt={panelStartedAt} onMobileBack={goToMobileList} + onCloseEditor={() => stackActions.attemptLeaveEditor(() => setEditingCompose(false))} + hasUnsavedChanges={stackActions.hasUnsavedChanges} /> ); diff --git a/frontend/src/components/EditorLayout/EditorView.tsx b/frontend/src/components/EditorLayout/EditorView.tsx index 5f02f687..fb03abc5 100644 --- a/frontend/src/components/EditorLayout/EditorView.tsx +++ b/frontend/src/components/EditorLayout/EditorView.tsx @@ -199,6 +199,16 @@ export interface EditorViewProps { // Mobile-only: back affordance in the detail header returns to the stack list. onMobileBack?: () => void; + // Mobile-only (always supplied by renderEditor): close the full-screen + // compose/.env editor, routed through the unsaved-changes guard so a dirty + // close prompts before discarding. Required, not optional, because the + // fallback would silently discard edits; the desktop EditorView ignores it. + onCloseEditor: () => void; + // Mobile-only (always supplied by renderEditor): true when the compose or env + // buffer differs from disk; gates the env-file selector so switching files + // cannot drop unsaved edits. Required so a wiring gap is a compile error + // rather than a silently-disabled data-loss guard. + hasUnsavedChanges: () => boolean; // Mobile-only: notifications + more-menu cluster for the detail header right // slot (the global TopBar is dropped on the full-screen detail surface). headerActions?: React.ReactNode; diff --git a/frontend/src/components/EditorLayout/MobileComposeEditor.tsx b/frontend/src/components/EditorLayout/MobileComposeEditor.tsx new file mode 100644 index 00000000..8ded336e --- /dev/null +++ b/frontend/src/components/EditorLayout/MobileComposeEditor.tsx @@ -0,0 +1,205 @@ +import { useEffect } from 'react'; +import { ChevronLeft, Save, Rocket } from 'lucide-react'; +import { cn } from '@/lib/utils'; +import { Button } from '../ui/button'; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from '@/components/ui/select'; +import type { StackAction } from './EditorView'; + +interface MobileComposeEditorProps { + content: string; + envContent: string; + setContent: (next: string) => void; + setEnvContent: (next: string) => void; + activeTab: 'compose' | 'env' | 'files'; + setActiveTab: (tab: 'compose' | 'env' | 'files') => void; + envExists: boolean; + envFiles: string[]; + selectedEnvFile: string; + changeEnvFile: (file: string) => Promise; + isFileLoading: boolean; + loadingAction: StackAction | null; + canEdit: boolean; + requestSave: () => void; + requestSaveAndDeploy: (e: React.MouseEvent) => void; + onClose: () => void; + hasUnsavedChanges: () => boolean; +} + +// Full-screen phone editing surface for the compose file and the selected .env. +// Deliberately a lightweight monospace textarea, not Monaco: the flow is scoped to +// small, safe edits, and the native keyboard plus reliable touch scrolling matter +// more than syntax highlighting here. Every save protection (ETag conflict, diff +// preview, save-and-deploy, dirty-navigation guard) is reused from useStackActions +// via the shared editor state, so this surface only renders the controls. +export function MobileComposeEditor(props: MobileComposeEditorProps) { + const { + content, + envContent, + setContent, + setEnvContent, + activeTab, + setActiveTab, + envExists, + envFiles, + selectedEnvFile, + changeEnvFile, + isFileLoading, + loadingAction, + canEdit, + requestSave, + requestSaveAndDeploy, + onClose, + hasUnsavedChanges, + } = props; + + // The save handlers (saveFile) key off the shared editorState.activeTab, so the + // displayed buffer must match it. The desktop editor can hand off a 'files' tab + // (or 'env' with no env file) when it crosses into the mobile breakpoint; left + // alone the textarea would show compose while a save silently no-ops on 'files'. + // Normalize to 'compose' so the visible edit always saves to the visible file. + useEffect(() => { + if (activeTab === 'files' || (activeTab === 'env' && !envExists)) { + setActiveTab('compose'); + } + }, [activeTab, envExists, setActiveTab]); + + // Mirror of the normalization above for this render: 'env' only when an env + // file exists, else 'compose'. The effect makes the shared activeTab follow. + const tab: 'compose' | 'env' = activeTab === 'env' && envExists ? 'env' : 'compose'; + const value = tab === 'compose' ? content || '' : envContent || ''; + // Switching the env file refetches and overwrites the env buffer, so block it + // while there are unsaved edits (matches the desktop selector being disabled + // mid-edit). The compose <-> .env toggle stays free: both buffers persist. + const envSwitchDisabled = hasUnsavedChanges() || isFileLoading; + const actionsDisabled = isFileLoading || loadingAction === 'deploy'; + // Read-only while an env-file fetch is in flight: changeEnvFile overwrites the + // buffer when it resolves, so edits typed during the load would be silently lost. + const editorReadOnly = !canEdit || isFileLoading; + + return ( +
+ {/* Header: close + file selector */} +
+
+ + {envExists ? ( +
+ {(['compose', 'env'] as const).map(id => { + const on = tab === id; + return ( + + ); + })} +
+ ) : ( + + compose.yaml + + )} +
+ + {tab === 'env' && envFiles.length > 1 && ( + + )} +
+ + {/* Editor */} +
+