fix(app): satisfy task manager lint

Author: skulidropek

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

@@ -1,19 +1,14 @@
 import { updateActionPromptValue } from "./action-prompt.js"
-import { withBusy } from "./actions-shared.js"
 import {
-  attachProjectTerminalById,
   cancelBrowserActionPrompt,
   closeSelectedProjectPort,
-  connectProjectById,
   loadSelectedProjectBrowser,
-  loadProjectTasksById,
   loadSelectedProjectPorts,
   openProjectBrowserById,
   openSelectedProjectBrowser,
   openSelectedProjectPort,
   submitBrowserActionPrompt
 } from "./actions.js"
-import { deleteProjectTerminalSession } from "./api.js"
 import type { DashboardData } from "./api.js"
 import type { createActionContext } from "./app-ready-actions.js"
 import { resolveCurrentMenu, runAuthActionByIndex, runProjectAuthActionByIndex } from "./app-ready-actions.js"
@@ -39,10 +34,9 @@ import { bindScreenActions } from "./app-ready-screen-actions.js"
 import { useSshLink } from "./app-ready-ssh-link-hook.js"
 import { bindTaskActions } from "./app-ready-task-actions.js"
 import { useProjectTasksReset } from "./app-ready-tasks-hook.js"
+import { bindTerminalActions } from "./app-ready-terminal-actions.js"
 import { useReadyUrlSync } from "./app-ready-url.js"
-import { browserMenuIndex } from "./menu.js"
 import { filterDashboardProjectsByQuery } from "./project-search.js"
-import { projectPickerScreen } from "./screen.js"
 
 type ReadyControllerArgs = {
   readonly dashboard: DashboardData
@@ -255,46 +249,6 @@ const bindBrowserActions = (
   }
 })
 
-const bindTerminalActions = (
-  actionContext: ReturnType<typeof createActionContext>,
-  state: ReturnType<typeof useReadyState>
-) => ({
-  onOpenProjectTerminalById: (projectId: string, projectKey?: string) => {
-    connectProjectById(projectId, actionContext, projectKey)
-  },
-  onOpenProjectTaskManagerById: (projectId: string) => {
-    state.setSelectedProjectId(projectId)
-    state.setSelectedMenuIndex(browserMenuIndex("Tasks"))
-    state.setProjectNavigationArmed(true)
-    state.setActiveScreen(projectPickerScreen())
-    state.deactivateTerminalWorkspace()
-    state.setProjectTasks(null)
-    state.setProjectTaskLogs("")
-    state.setProjectTasksIncludeDefault(false)
-    loadProjectTasksById(actionContext, projectId, { includeDefault: false })
-  },
-  onAttachProjectTerminalSession: (
-    projectId: string,
-    projectKey: string,
-    projectDisplayName: string,
-    sessionId: string
-  ) => {
-    attachProjectTerminalById(projectId, projectKey, projectDisplayName, sessionId, actionContext)
-  },
-  onKillProjectTerminalSession: (_projectId: string, projectKey: string, sessionId: string) => {
-    withBusy({
-      context: actionContext,
-      effect: deleteProjectTerminalSession(projectKey, sessionId),
-      label: "Killing SSH terminal",
-      onSuccess: () => {
-        state.closeTerminalSession(sessionId)
-        actionContext.reloadDashboard()
-        actionContext.setMessage(`Killed SSH terminal: ${sessionId}.`)
-      }
-    })
-  }
-})
-
 export const useReadyController = ({ dashboard, dashboardRefreshTick, refreshDashboard }: ReadyControllerArgs) => {
   const state = useReadyState()
   const currentMenu = resolveCurrentMenu(state.selectedMenuIndex)

packages/app/src/web/app-ready-terminal-actions.ts

@@ -0,0 +1,47 @@
+import { withBusy } from "./actions-shared.js"
+import { attachProjectTerminalById, connectProjectById, loadProjectTasksById } from "./actions.js"
+import { deleteProjectTerminalSession } from "./api.js"
+import type { createActionContext } from "./app-ready-actions.js"
+import type { ReadyState } from "./app-ready-hooks.js"
+import { browserMenuIndex } from "./menu.js"
+import { projectPickerScreen } from "./screen.js"
+
+export const bindTerminalActions = (
+  actionContext: ReturnType<typeof createActionContext>,
+  state: ReadyState
+) => ({
+  onOpenProjectTerminalById: (projectId: string, projectKey?: string) => {
+    connectProjectById(projectId, actionContext, projectKey)
+  },
+  onOpenProjectTaskManagerById: (projectId: string) => {
+    state.setSelectedProjectId(projectId)
+    state.setSelectedMenuIndex(browserMenuIndex("Tasks"))
+    state.setProjectNavigationArmed(true)
+    state.setActiveScreen(projectPickerScreen())
+    state.deactivateTerminalWorkspace()
+    state.setProjectTasks(null)
+    state.setProjectTaskLogs("")
+    state.setProjectTasksIncludeDefault(false)
+    loadProjectTasksById(actionContext, projectId, { includeDefault: false })
+  },
+  onAttachProjectTerminalSession: (
+    projectId: string,
+    projectKey: string,
+    projectDisplayName: string,
+    sessionId: string
+  ) => {
+    attachProjectTerminalById(projectId, projectKey, projectDisplayName, sessionId, actionContext)
+  },
+  onKillProjectTerminalSession: (_projectId: string, projectKey: string, sessionId: string) => {
+    withBusy({
+      context: actionContext,
+      effect: deleteProjectTerminalSession(projectKey, sessionId),
+      label: "Killing SSH terminal",
+      onSuccess: () => {
+        state.closeTerminalSession(sessionId)
+        actionContext.reloadDashboard()
+        actionContext.setMessage(`Killed SSH terminal: ${sessionId}.`)
+      }
+    })
+  }
+})

packages/app/src/web/panel-terminal.tsx

@@ -248,6 +248,31 @@ const TerminalActionButton = (
   </button>
 )
 
+const OptionalTerminalActionButton = (
+  {
+    compactHeaderMode,
+    compactLabel,
+    enabled,
+    label,
+    onClick
+  }: {
+    readonly compactHeaderMode: boolean
+    readonly compactLabel: string
+    readonly enabled: boolean
+    readonly label: string
+    readonly onClick: (() => void) | undefined
+  }
+): JSX.Element | null => {
+  if (!enabled || onClick === undefined) {
+    return null
+  }
+  return (
+    <TerminalActionButton compactTypingMode={compactHeaderMode} onClick={onClick}>
+      {compactHeaderMode ? compactLabel : label}
+    </TerminalActionButton>
+  )
+}
+
 const TerminalHeaderActions = (
   {
     compactHeaderMode,
@@ -257,43 +282,49 @@ const TerminalHeaderActions = (
     onOpenTaskManager,
     onOpenTerminal,
     session
-  }: Pick<
-    TerminalPanelProps,
-    "onDetach" | "onKill" | "onOpenBrowser" | "onOpenTaskManager" | "onOpenTerminal" | "session"
-  > & {
-    readonly compactHeaderMode: boolean
-  }
-): JSX.Element => (
-  <div style={compactHeaderMode ? compactHeaderActionsStyle : headerActionsStyle}>
-    {session.browserProjectId === undefined || onOpenBrowser === undefined
-      ? null
-      : (
-        <TerminalActionButton compactTypingMode={compactHeaderMode} onClick={onOpenBrowser}>
-          {compactHeaderMode ? "Browser" : "Open browser"}
-        </TerminalActionButton>
-      )}
-    {session.browserProjectId === undefined || onOpenTaskManager === undefined
-      ? null
-      : (
-        <TerminalActionButton compactTypingMode={compactHeaderMode} onClick={onOpenTaskManager}>
-          {compactHeaderMode ? "Tasks" : "Task manager"}
-        </TerminalActionButton>
-      )}
-    {session.browserProjectId === undefined || onOpenTerminal === undefined
-      ? null
-      : (
-        <TerminalActionButton compactTypingMode={compactHeaderMode} onClick={onOpenTerminal}>
-          {compactHeaderMode ? "New" : "New terminal"}
-        </TerminalActionButton>
-      )}
-    <TerminalActionButton compactTypingMode={compactHeaderMode} onClick={onDetach}>
-      Detach
-    </TerminalActionButton>
-    <TerminalActionButton compactTypingMode={compactHeaderMode} onClick={onKill}>
-      Kill
-    </TerminalActionButton>
-  </div>
-)
+  }:
+    & Pick<
+      TerminalPanelProps,
+      "onDetach" | "onKill" | "onOpenBrowser" | "onOpenTaskManager" | "onOpenTerminal" | "session"
+    >
+    & {
+      readonly compactHeaderMode: boolean
+    }
+): JSX.Element => {
+  const hasProjectActions = session.browserProjectId !== undefined
+
+  return (
+    <div style={compactHeaderMode ? compactHeaderActionsStyle : headerActionsStyle}>
+      <OptionalTerminalActionButton
+        compactHeaderMode={compactHeaderMode}
+        compactLabel="Browser"
+        enabled={hasProjectActions}
+        label="Open browser"
+        onClick={onOpenBrowser}
+      />
+      <OptionalTerminalActionButton
+        compactHeaderMode={compactHeaderMode}
+        compactLabel="Tasks"
+        enabled={hasProjectActions}
+        label="Task manager"
+        onClick={onOpenTaskManager}
+      />
+      <OptionalTerminalActionButton
+        compactHeaderMode={compactHeaderMode}
+        compactLabel="New"
+        enabled={hasProjectActions}
+        label="New terminal"
+        onClick={onOpenTerminal}
+      />
+      <TerminalActionButton compactTypingMode={compactHeaderMode} onClick={onDetach}>
+        Detach
+      </TerminalActionButton>
+      <TerminalActionButton compactTypingMode={compactHeaderMode} onClick={onKill}>
+        Kill
+      </TerminalActionButton>
+    </div>
+  )
+}
 
 const TerminalHeader = (
   {
@@ -305,13 +336,15 @@ const TerminalHeader = (
     onOpenTerminal,
     session,
     status
-  }: Pick<
-    TerminalPanelProps,
-    "onDetach" | "onKill" | "onOpenBrowser" | "onOpenTaskManager" | "onOpenTerminal" | "session"
-  > & {
-    readonly compactHeaderMode: boolean
-    readonly status: TerminalStatus
-  }
+  }:
+    & Pick<
+      TerminalPanelProps,
+      "onDetach" | "onKill" | "onOpenBrowser" | "onOpenTaskManager" | "onOpenTerminal" | "session"
+    >
+    & {
+      readonly compactHeaderMode: boolean
+      readonly status: TerminalStatus
+    }
 ): JSX.Element => (
   <div style={compactHeaderMode ? compactHeaderStyle : headerStyle}>
     <TerminalHeaderTitle compactHeaderMode={compactHeaderMode} session={session} status={status} />