AI First Starting UX: Import YAML path#4894
Merged
Merged
Conversation
Security Review ✅
|
lmac-1
force-pushed
the
4871-ai-first-yaml
branch
2 times, most recently
from
8dd72ee to
0a6b0d2
Compare
Add showYAMLImportModal boolean to UIStore with openYAMLImportModal and closeYAMLImportModal commands. useShowYAMLImportModal hook for reading state; both commands exposed via useUICommands. closeYAMLImportModal also clears importPanel state so the modal opens clean every time.
YAMLImportModal is a self-contained Headless UI Dialog — focus trapping, Escape key, and aria-modal included. LandingScreenWrapper wires onImportYAML and renders the modal as a sibling to LandingScreen so it opens on top without dismissing the landing screen. BreadcrumbContent refactored to read isNewWorkflow from store directly and return null itself, removing the conditional render from the parent. Cmd/Ctrl+\ opens the modal when the landing screen is active. Old left-panel import path (handleImport, handleSaveAndClose) removed.
YAMLImportPanel deleted — the modal owns all YAML import content now. Test coverage transferred to YAMLImportModal.test.tsx (mode toggling, debounced validation, state machine, successful import flow). LeftPanel no longer handles the import method case. Dropzone height controlled via h-80 container in the modal so both dropzone and code editor share one source of truth. Icon box styled with gray background. Error display only renders when errors are present.
lmac-1
force-pushed
the
4871-ai-first-yaml
branch
from
0a6b0d2 to
be58703
Compare
lmac-1
added a commit
that referenced
this pull request
Jun 26, 2026
* Add AI-first landing screen for new workflow creation (#4856) When a user navigates to /w/new, show a full-screen overlay before they reach the empty canvas. The overlay presents three entry points: - Build with AI (textarea + submit, shown when AI assistant is enabled) - Browse Templates - Import from YAML The action handlers are stubs for now, wired up in follow-on issues #4857 (Build with AI), #4858 (Browse Templates), and #4859 (Import YAML). Implementation notes: - Adds showLandingScreen boolean to UIStore, initialised to true when isNewWorkflow is true, with a dismissLandingScreen() action - Hides the breadcrumb/header bar while the landing screen is visible - Guards the existing empty-canvas placeholder with !showLandingScreen so they don't render simultaneously (TODO: remove placeholder in #4856 once landing screen is fully stable) - Adds CSS design tokens for border-subtle, border-strong, surface-subtle, and semantic-success used by the landing screen UI * Improve LandingScreen accessibility - Add role="region" + aria-labelledby on overlay div for landmark navigation - Auto-focus textarea on mount so keyboard users land in the right place - Add aria-describedby hint for Enter-to-submit keyboard shortcut - Add aria-hidden to decorative sparkle SVG - Fix focus-within:ring → focus-visible:ring on option card buttons - Add disabled:opacity-50 to Build it button for visual distinction - Bump card description text from gray-500 to gray-600 (WCAG AA contrast) - Remove unnecessary Fragment from LandingScreenWrapper * refactor(#4856): read isNewWorkflow from store in BreadcrumbContent Moves isNewWorkflow from a LiveView prop passed down to BreadcrumbContent into a store hook (useIsNewWorkflow). The component now self-hides when isNewWorkflow is true, removing the conditional wrapper at the call site. * feat(#4856): update landing screen to match revised design Replace Import YAML card with Build from Scratch card. Move YAML import to a text link at the bottom of the screen. * fix(#4856): update E2E selectors for revised landing screen design importYAMLCard -> importYAMLLink, add buildFromScratchCard to page object * AI First Starting UX: Import YAML path (#4894) * feat(#4871): add showYAMLImportModal state to UIStore Add showYAMLImportModal boolean to UIStore with openYAMLImportModal and closeYAMLImportModal commands. useShowYAMLImportModal hook for reading state; both commands exposed via useUICommands. closeYAMLImportModal also clears importPanel state so the modal opens clean every time. * feat(#4871): add YAML import modal and wire into landing screen YAMLImportModal is a self-contained Headless UI Dialog — focus trapping, Escape key, and aria-modal included. LandingScreenWrapper wires onImportYAML and renders the modal as a sibling to LandingScreen so it opens on top without dismissing the landing screen. BreadcrumbContent refactored to read isNewWorkflow from store directly and return null itself, removing the conditional render from the parent. Cmd/Ctrl+\ opens the modal when the landing screen is active. Old left-panel import path (handleImport, handleSaveAndClose) removed. * chore(#4871): remove YAMLImportPanel, transfer tests, polish dropzone UI YAMLImportPanel deleted — the modal owns all YAML import content now. Test coverage transferred to YAMLImportModal.test.tsx (mode toggling, debounced validation, state machine, successful import flow). LeftPanel no longer handles the import method case. Dropzone height controlled via h-80 container in the modal so both dropzone and code editor share one source of truth. Icon box styled with gray background. Error display only renders when errors are present. * refactor(YAMLImportModal): read import state via hooks instead of StoreContext directly * test(YAMLImportModal): rewrite tests to follow canonical vi.fn() mock pattern * fix(LandingScreen): lowercase "scratch" in card title * fix(YAMLImportModal): handle save failures and fix disabled button hover states - Show error toast when importWorkflow/saveWorkflow throws - Show "Not connected" toast when saveWorkflow returns null (disconnected) - Suppress hover styles on disabled Create and Build it buttons * fix(LandingScreen, YAMLImportModal): focus rings, error position, disconnected save guard * remove side button for old create workflow flow * test(YAMLImportModal): fix saveWorkflow mock to return truthy value on success
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Implements the "Import from YAML" entry point on the AI-first landing screen.
Changes:
YAMLImportModal— a standalone modal with the file dropzone and import flow, replacing the old left-panelYAMLImportPanelshowYAMLImportModalstate inUIStoreYAMLImportPanelfrom the left panel (the modal is now the only import surface)YAMLImportPanel.test.tsxtoYAMLImportModal.test.tsx; addedcreateUIStore.landing-screen.test.tsand E2E coverage inworkflow-landing-screen.spec.tsAdditional notes for the reviewer
This is just for reference and not for external review.
AI Usage
Please disclose whether you've used AI anywhere in this PR (it's cool, we just
want to know!):
You can read more details in our
Responsible AI Policy
Pre-submission checklist
/reviewwith Claude Code)
(e.g.,
:owner,:admin,:editor,:viewer)