Skip to content

refactor(frontend): convert Create Deployment modal to a dedicated page #396

@jeffmccune

Description

@jeffmccune

Parent Issue

Part of #394

Goal

Replace the Create Deployment modal (currently inline in the deployments index page) with a dedicated page at /projects/$projectName/deployments/new. The modal has too many form fields (8+) for a dialog, and users lose their work by accidentally clicking outside.

Acceptance Criteria

  • New route at /_authenticated/projects/$projectName/deployments/new renders a Create Deployment page
  • Page contains all existing form fields: Display Name, Name (slug), Description, Template select, Image, Tag, Command (StringListInput), Args (StringListInput), Environment Variables (EnvVarEditor)
  • "Create Deployment" button on deployments list page navigates to the new page (not a modal)
  • Empty state on deployments list page also links to the new page
  • When no templates exist, show a link to /projects/$projectName/templates/new instead of opening a sub-modal
  • On successful creation, navigates to the deployment detail page (/projects/$projectName/deployments/$deploymentName)
  • Form validation preserved (name, template, image, tag required)
  • Unit tests for the new page component with mocked query hooks
  • Tests pass: make test

Implementation Notes

Files to create

  • frontend/src/routes/_authenticated/projects/$projectName/deployments/new.tsx — the new Create Deployment page route
  • frontend/src/routes/_authenticated/projects/$projectName/deployments/-new.test.tsx — unit tests

Files to modify

  • frontend/src/routes/_authenticated/projects/$projectName/deployments/index.tsx — remove inline modal code (~120 lines), replace "Create Deployment" button with <Link to="new"> navigation

Key patterns to follow

  • Use createFileRoute('/_authenticated/projects/$projectName/deployments/new') for the route definition
  • Use useNavigate() to redirect after successful creation
  • Use useCreateDeployment from @/queries/deployments and useListDeploymentTemplates from @/queries/deployment-templates
  • Reuse existing components: StringListInput, EnvVarEditor, filterEnvVars
  • When no templates exist, render a link: "No templates available. Create a template first."
  • The page layout gives much more room for the env var editor and command/args fields

Testing approach

  • Mock @/queries/deployments and @/queries/deployment-templates with vi.mock() and vi.fn()
  • Test form rendering, validation (required fields), submission with all fields, template selection
  • Test the "no templates" state shows a link to create templates page
  • Test role-based access (OWNER/EDITOR can create, VIEWER cannot see the page or button)
  • Follow patterns from the existing -index.test.tsx file

Dependencies

Depends on #395 (Create Template page) — the "no templates" link targets the new template creation page.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions