feat: add browser apply actions

.github/workflows/check.yml

@@ -191,7 +191,7 @@ jobs:
   e2e-runtime-volumes-ssh:
     name: E2E (Runtime volumes + SSH)
     runs-on: ubuntu-latest
-    timeout-minutes: 40
+    timeout-minutes: 60
     steps:
       - uses: actions/checkout@v6
       - name: Install dependencies

packages/api/src/http.ts

@@ -69,6 +69,7 @@ import {
 } from "./services/federation.js"
 import {
   applyAllProjects,
+  applyProjectById,
   createProjectFromRequest,
   deleteProjectById,
   downAllProjects,
@@ -972,6 +973,14 @@ export const makeRouter = () => {
         Effect.catchAll(errorResponse)
       )
     ),
+    HttpRouter.post(
+      "/projects/:projectId/apply",
+      projectParams.pipe(
+        Effect.flatMap(({ projectId }) => applyProjectById(projectId)),
+        Effect.flatMap((project) => jsonResponse({ ok: true, project }, 200)),
+        Effect.catchAll(errorResponse)
+      )
+    ),
     HttpRouter.post(
       "/projects/:projectId/down",
       projectParams.pipe(

packages/api/src/services/projects.ts

@@ -1,5 +1,6 @@
 import {
   type AppError,
+  applyProjectConfig,
   buildCreateCommand,
   defaultTemplateConfig,
   createProject,
@@ -588,6 +589,28 @@ export const applyAllProjects = (activeOnly: boolean) =>
     activeOnly
   })
 
+export const applyProjectById = (
+  projectId: string
+) =>
+  Effect.gen(function*(_) {
+    const project = yield* _(findProjectById(projectId))
+    yield* _(markDeployment(projectId, "apply", "docker-git apply"))
+    yield* _(
+      runWithProjectEventLogs(
+        projectId,
+        applyProjectConfig({
+          _tag: "Apply",
+          projectDir: project.projectDir,
+          runUp: true
+        })
+      )
+    )
+    const details = yield* _(runtimeProjectDetails(project))
+    yield* _(recordProjectStartedFromDetails(project, details, "up"))
+    yield* _(markDeployment(projectId, "running", "Apply completed"))
+    return details
+  }).pipe(Effect.mapError(toProjectApiError))
+
 export const downAllProjects = () => downAllDockerGitProjects
 
 export const getProject = (

packages/app/eslint.config.mts

@@ -279,6 +279,36 @@ export default defineConfig(
 		}]
 	}
   },
+  {
+    files: [
+      "src/docker-git/menu-create-shared.ts",
+      "src/docker-git/menu-render.ts",
+      "src/web/actions-projects.ts",
+      "src/web/app-ready-controller.ts",
+      "src/web/app-ready-main-panels.tsx",
+      "src/web/app-ready-ssh-link-hook.ts",
+      "src/web/app-ready-terminal-screen.tsx",
+      "src/web/app-ready-url.ts",
+      "src/web/panel-content.tsx",
+      "src/web/panel-create-select.tsx",
+      "src/web/panel-project-details.tsx",
+      "src/web/panel-terminal.tsx",
+      "src/web/terminal-mobile-controls.ts",
+      "src/web/terminal-panel-runtime-core.ts"
+    ],
+    rules: {
+      "complexity": ["error", 15],
+      "max-lines": [
+        "error",
+        { max: 650, skipBlankLines: true, skipComments: true }
+      ],
+      "max-lines-per-function": [
+        "error",
+        { max: 160, skipBlankLines: true, skipComments: true }
+      ],
+      "max-params": ["error", 6]
+    }
+  },
   {
     files: ['**/*.{test,spec}.{ts,tsx}', 'tests/**', '**/__tests__/**'],
     ...vitest.configs.all,

packages/app/src/web/actions-projects.ts

@@ -13,6 +13,8 @@ import {
 } from "./actions-shared.js"
 import { loadSelectedProjectTasks } from "./actions-tasks.js"
 import {
+  applyAllProjects,
+  applyProject,
   createProjectTerminalSession,
   deleteProject,
   downAllProjects,
@@ -120,6 +122,31 @@ export const connectProjectById = (
   })
 }
 
+export const applyProjectById = (
+  projectId: string,
+  context: BrowserActionContext
+) => {
+  context.setSelectedProjectId(projectId)
+  withBusy({
+    context,
+    effect: applyProject(projectId),
+    label: "Applying project",
+    onSuccess: (project) => {
+      context.reloadDashboard()
+      context.setSelectedProject(project)
+      context.setMessage(`Applied ${project.displayName}.`)
+    }
+  })
+}
+
+export const applySelectedProject = (context: BrowserActionContext) => {
+  const projectId = requireSelectedProjectId(context)
+  if (projectId === null) {
+    return
+  }
+  applyProjectById(projectId, context)
+}
+
 export const attachProjectTerminalById = (
   projectId: string,
   projectKey: string,
@@ -223,6 +250,21 @@ const runDownAllProjects = (context: BrowserActionContext) => {
   })
 }
 
+export const runApplyAllProjects = (context: BrowserActionContext) => {
+  if (!confirmAction("Apply docker-git config to all projects?")) {
+    return
+  }
+  withBusy({
+    context,
+    effect: applyAllProjects(false),
+    label: "Applying all projects",
+    onSuccess: () => {
+      context.reloadDashboard()
+      context.setMessage("Applied docker-git config to all projects.")
+    }
+  })
+}
+
 export const runProjectMenuAction = (
   currentMenu: Exclude<BrowserMenuTag, "Auth" | "ProjectAuth">,
   context: BrowserActionContext

packages/app/src/web/actions.ts

@@ -30,7 +30,14 @@ export {
   saveSelectedDatabaseProfile
 } from "./actions-databases.js"
 export { closeSelectedProjectPort, loadSelectedProjectPorts, openSelectedProjectPort } from "./actions-port-forwards.js"
-export { attachProjectTerminalById, connectProjectById, loadSelectedProjectInfo } from "./actions-projects.js"
+export {
+  applyProjectById,
+  applySelectedProject,
+  attachProjectTerminalById,
+  connectProjectById,
+  loadSelectedProjectInfo,
+  runApplyAllProjects
+} from "./actions-projects.js"
 export { loadSelectedProjectTaskLogs, loadSelectedProjectTasks, stopSelectedProjectTask } from "./actions-tasks.js"
 
 export const runBrowserMenuAction = (

packages/app/src/web/api-project-core.ts

@@ -19,6 +19,15 @@ export const loadProjectLogs = (projectId: string) =>
     Effect.map((response) => response.output)
   )
 
+export const applyProject = (projectId: string) =>
+  requestJson(
+    "POST",
+    `/projects/${encodeURIComponent(projectId)}/apply`,
+    ProjectResponseSchema
+  ).pipe(
+    Effect.map((response) => response.project)
+  )
+
 export const createProject = (draft: CreateProjectDraft) =>
   requestJson(
     "POST",

packages/app/src/web/api.ts

@@ -43,7 +43,14 @@ export {
   restartProjectDatabaseEditor,
   saveProjectDatabaseProfile
 } from "./api-database.js"
-export { createProject, loadProjectDetails, loadProjectLogs, loadProjectPs, upProject } from "./api-project-core.js"
+export {
+  applyProject,
+  createProject,
+  loadProjectDetails,
+  loadProjectLogs,
+  loadProjectPs,
+  upProject
+} from "./api-project-core.js"
 export { loadProjectTaskLogs, loadProjectTasks, stopProjectTask } from "./api-tasks.js"
 
 export type * from "./api-types.js"
@@ -204,6 +211,9 @@ export const deleteProject = (projectId: string) =>
 
 export const downAllProjects = () => requestText("POST", "/projects/down-all").pipe(Effect.asVoid)
 
+export const applyAllProjects = (activeOnly: boolean) =>
+  requestText("POST", "/projects/apply-all", { activeOnly }).pipe(Effect.asVoid)
+
 export const loadGithubStatus = () =>
   requestJson("GET", "/auth/github/status", GithubStatusResponseSchema).pipe(
     Effect.map((response) => response.status)

packages/app/src/web/app-ready-controller.ts

@@ -1,6 +1,8 @@
 import { updateActionPromptValue } from "./action-prompt.js"
 import { withBusy } from "./actions-shared.js"
 import {
+  applyProjectById,
+  applySelectedProject,
   attachProjectTerminalById,
   cancelBrowserActionPrompt,
   closeSelectedProjectPort,
@@ -10,6 +12,7 @@ import {
   openProjectBrowserById,
   openSelectedProjectBrowser,
   openSelectedProjectPort,
+  runApplyAllProjects,
   submitBrowserActionPrompt
 } from "./actions.js"
 import { deleteProjectTerminalSession } from "./api.js"
@@ -254,6 +257,15 @@ const bindTerminalActions = (
   actionContext: ReturnType<typeof createActionContext>,
   state: ReturnType<typeof useReadyState>
 ) => ({
+  onApplyProjectById: (projectId: string) => {
+    applyProjectById(projectId, actionContext)
+  },
+  onApplySelectedProject: () => {
+    applySelectedProject(actionContext)
+  },
+  onApplyAllProjects: () => {
+    runApplyAllProjects(actionContext)
+  },
   onOpenProjectTerminalById: (projectId: string, projectKey?: string) => {
     connectProjectById(projectId, actionContext, projectKey)
   },

packages/app/src/web/app-ready-layout.tsx

@@ -46,6 +46,9 @@ export type ReadyLayoutProps = {
   readonly onActionPromptCancel: () => void
   readonly onActionPromptChange: (key: string, value: string) => void
   readonly onActionPromptSubmit: () => void
+  readonly onApplyAllProjects: () => void
+  readonly onApplyProjectById: (projectId: string) => void
+  readonly onApplySelectedProject: () => void
   readonly onAttachProjectTerminalSession: (
     projectId: string,
     projectKey: string,

packages/app/src/web/app-ready-main-panels.tsx

@@ -79,10 +79,20 @@ const MainMenuRoute = (
 const ProjectActionBar = (
   {
     currentMenu,
+    onApplyAllProjects,
+    onApplySelectedProject,
     onRunCurrentMenuAction,
     projectBrowser,
     selectedProjectSummary
-  }: Pick<MainPanelsProps, "currentMenu" | "onRunCurrentMenuAction" | "projectBrowser" | "selectedProjectSummary">
+  }: Pick<
+    MainPanelsProps,
+    | "currentMenu"
+    | "onApplyAllProjects"
+    | "onApplySelectedProject"
+    | "onRunCurrentMenuAction"
+    | "projectBrowser"
+    | "selectedProjectSummary"
+  >
 ): JSX.Element => (
   <Box
     alignItems="center"
@@ -97,13 +107,29 @@ const ProjectActionBar = (
     <Text fg="#aab7c4" wrap="truncate">
       {selectedProjectSummary === undefined ? "No project selected." : selectedProjectSummary.displayName}
     </Text>
-    {currentMenu === "Browser" && !canOpenProjectBrowser(projectBrowser, selectedProjectSummary?.id ?? null)
-      ? <Text bold={true} fg="#8fa6c4">{actionLabel(currentMenu)}</Text>
-      : (
-        <Box onClick={onRunCurrentMenuAction} width="auto">
-          <Text bold={true} fg="#78f0a3">{actionLabel(currentMenu)}</Text>
-        </Box>
-      )}
+    <Box flexWrap="wrap" gap={1} justifyContent="flex-end" width="auto">
+      {currentMenu === "Select" && selectedProjectSummary !== undefined
+        ? (
+          <Box onClick={onApplySelectedProject} width="auto">
+            <Text bold={true} fg="#78f0a3">Apply</Text>
+          </Box>
+        )
+        : null}
+      {currentMenu === "Select"
+        ? (
+          <Box onClick={onApplyAllProjects} width="auto">
+            <Text bold={true} fg="#78f0a3">Apply all</Text>
+          </Box>
+        )
+        : null}
+      {currentMenu === "Browser" && !canOpenProjectBrowser(projectBrowser, selectedProjectSummary?.id ?? null)
+        ? <Text bold={true} fg="#8fa6c4">{actionLabel(currentMenu)}</Text>
+        : (
+          <Box onClick={onRunCurrentMenuAction} width="auto">
+            <Text bold={true} fg="#78f0a3">{actionLabel(currentMenu)}</Text>
+          </Box>
+        )}
+    </Box>
   </Box>
 )
 
@@ -259,6 +285,8 @@ const ProjectPickerScreen = (props: MainPanelsProps): JSX.Element => (
       </Box>
       <ProjectActionBar
         currentMenu={props.currentMenu}
+        onApplyAllProjects={props.onApplyAllProjects}
+        onApplySelectedProject={props.onApplySelectedProject}
         onRunCurrentMenuAction={props.onRunCurrentMenuAction}
         projectBrowser={props.projectBrowser}
         selectedProjectSummary={props.selectedProjectSummary}

packages/app/src/web/app-ready-terminal-screen.tsx

@@ -14,6 +14,7 @@ import type { ActiveTerminalSession } from "./terminal.js"
 type TerminalScreenProps = Pick<
   ReadyLayoutProps,
   | "activeTerminalSessionId"
+  | "onApplyProjectById"
   | "onOpenProjectBrowserById"
   | "onOpenProjectTerminalById"
   | "onSelectTerminal"
@@ -29,6 +30,7 @@ type TerminalPaneProps =
   & Pick<
     TerminalScreenProps,
     | "onOpenProjectBrowserById"
+    | "onApplyProjectById"
     | "onOpenProjectTerminalById"
     | "onSetActiveScreen"
     | "onTerminalClose"
@@ -206,6 +208,7 @@ const TerminalTabs = (
 
 const TerminalPane = (
   {
+    onApplyProjectById,
     onOpenProjectBrowserById,
     onOpenProjectTerminalById,
     onSetActiveScreen,
@@ -250,6 +253,11 @@ const TerminalPane = (
           : () => {
             onOpenProjectBrowserById(browserProjectId)
           }}
+        onApplyProject={browserProjectId === undefined
+          ? undefined
+          : () => {
+            onApplyProjectById(browserProjectId)
+          }}
         onOpenTerminal={browserProjectId === undefined
           ? undefined
           : () => {
@@ -289,6 +297,7 @@ export const TerminalScreen = (props: TerminalScreenProps): JSX.Element | null =
             <TerminalPane
               key={terminalSessionId(activeSession)}
               onOpenProjectBrowserById={props.onOpenProjectBrowserById}
+              onApplyProjectById={props.onApplyProjectById}
               onOpenProjectTerminalById={props.onOpenProjectTerminalById}
               onSetActiveScreen={props.onSetActiveScreen}
               onTerminalClose={props.onTerminalClose}