feat: add Function Edit Page

File tree browser and code editor for viewing and editing
function source code on GitHub. Files load from the Git Data
API, the handler file is auto-selected based on func.yaml
runtime. Save & Deploy pushes changes back via updateRepo,
which caches the last commit SHA to handle GitHub's eventually
consistent ref storage.

Migrate test runner from Jest to Vitest with MSW 2.x for
GitHub API mocking. Merge RepoInfo and SourceRepo into single
RepoMetadata type. Extract shared utils (parseNamespaceAndRuntime,
getLanguageFromPath, handlerMap). Add CSP connect-src for
GitHub API in dev mode.

Co-Authored-By: Claude <noreply@anthropic.com>
Signed-off-by: Stanislav Jakuschevskij <sjakusch@redhat.com>

Author: twoGiants

AGENTS.md

@@ -7,6 +7,12 @@ This is the project map. Read this first, every session.
 FaaS PoC UI for OpenShift Console — React + TypeScript + Webpack + PatternFly 6 + OCP Dynamic Plugin SDK.
 See `docs/design/` for full design specs.
 
+## Communication
+
+- Ask before staring modifications of code.
+- Ask before starting a new task or making a design decision.
+- Once actively implementing, keep going without asking. Only stop to ask when blocked by sandbox, permissions, or ambiguous requirements.
+
 ## Writing Style
 
 No em dashes (`—`). Use commas, periods, or parentheses instead.

docs/ARCHITECTURE.md

@@ -39,13 +39,23 @@ Arrows mean "imports / depends on."
 - Services never import Components or Views
 - No circular dependencies
 
-## Page / Component / Hook Rules
+## React
 
-**Components are simple** — they receive data via props, render it, and call callbacks to return data to the parent (or use context). No logic at the top of a component.
+### Page / Component / Hook Rules
 
-**Pages are smart** — they use central hooks (e.g. `useClusterService`, `useSourceControl`) to fetch, prepare, and transform all data needed for downstream components.
+**Components are simple by default** — they receive data via props, render it, and call callbacks. No logic at the top of a component.
 
-**Extract logic into hooks** — if a page or component has any logic (state management, data transformation, side effects), extract it into a co-named hook: `FunctionTable.tsx` → `useFunctionTable.ts`, `FunctionsListPage.tsx` → `useFunctionsListPage.ts`. If there is no logic, no hook is needed.
+**A component may own its own data and state when it encapsulates a self-contained capability that is not specific to any one page** (e.g., forge connection, auth flows, notification subscriptions). The component becomes the single owner of that concern. Pages consume it without orchestrating its internals.
+
+**Pages are smart for page-specific data** — they use central hooks (e.g. `useClusterService`, `useSourceControl`) to fetch, prepare, and transform all data needed for downstream components.
+
+**Extract logic into hooks** — if a page or component has any logic (state management, data transformation, side effects), extract it into a custom hook. If the hook is reused by multiple components, put it in a separate file: `useFunctionTable.ts`. If the hook is only used by one component, keep it in the same file, do not export it. If there is no logic, no hook is needed.
+
+**File ordering** — within a file, put the exported component at the top, then its hook below, then helper functions at the bottom. Readers see the main thing first and can drill down.
+
+### Performance
+
+- **No speculative memoization**: Do not wrap every function in `useCallback` or every value in `useMemo` as a habit. Use them when there is a concrete reason: a `React.memo` child that depends on a stable reference, or a known re-render path (e.g., a sibling component re-rendering on every keystroke). Plain functions and derived values are the default.
 
 ## Architectural Guidance
 

docs/STYLEGUIDE.md

@@ -17,11 +17,17 @@
 - **No `any` type**: Use proper TypeScript types.
 - **No `console.log`**: Use structured approach if logging needed.
 - **Naming**: `use*` for hooks, `*Service` for services, PascalCase for components/types.
+- **Co-locate helper functions**: Keep helper functions in the same file as the component or hook that uses them. Test them indirectly through the consumer's tests. Only extract to `utils/` when shared across multiple unrelated modules.
 
 ## Documentation
 
 - **No em dashes (`—`)**. Use commas, periods, or parentheses instead.
 
+## CSS
+
+- **PatternFly first**: Use PatternFly component props for all layout and spacing. Only fall back to custom CSS when PatternFly does not cover the need.
+- **Relative units only**: When custom CSS is necessary, use `rem` and `em` for all sizing. Never use `px`.
+
 ## OCP Plugin Styling Constraints
 
 The `.stylelintrc.yaml` enforces strict rules to prevent breaking the OpenShift Console:

docs/WORKFLOW.md

@@ -17,7 +17,7 @@ Every session, before doing any work:
 After [Startup Sequence](#startup-sequence), work through the picked feature:
 
 1. **Plan** — read `docs/ARCHITECTURE.md` + `docs/STYLEGUIDE.md` + `docs/TESTING.md`, then use `/brainstorming` to design the chosen feature from `docs/features.json`, then use `/writing-plans` to create implementation plan → `docs/plans/active/<NNN>-<type>-<short-name>.md`
-2. **Branch** — create feature branch per [Branching](#branching) convention
+2. **Branch** — create feature branch per [Branching](#branching) convention. Immediately push and open a **draft PR** (`gh pr create --draft`) to reserve the PR number for other contributors' branch numbering.
 3. **Implement** — using `/executing-plans` skill
 4. **Review** — code review using `/requesting-code-review` skill, fix found issues
 5. **Manual Test** — use browser automation and validate it works in the browser

docs/claude-progress.txt

@@ -1,6 +1,27 @@
 # Claude Progress Log
 # Newest entries first. Agents: append your entry at the top after the header.
 
+---
+## 2026-04-28 | Session: Function Edit Page
+Worked on: Full Function Edit Page feature (plan 016)
+Completed:
+- Function Edit Page with FileTreeView file browser and SDK CodeEditor
+- FileTreeView component: loading spinner state, empty placeholder, directories-before-files sorting, dirty dot indicators, fixed width with horizontal scroll
+- SDK CodeEditor with empty state (code icon, "Start editing"), language label, auto-selected handler file based on func.yaml runtime
+- EditToolbar with Back link (unsaved changes modal), Save & Deploy (success alert with 2s auto-dismiss, danger alert on error)
+- SourceControlService: fetch(repo) via git.getTree recursive + blob fetches, updateRepo(repo) with local commit SHA cache for GitHub's eventual consistency
+- Decomposed push() into push() (initial commits) and updateRepo() (subsequent commits)
+- Migrated test runner from Jest to Vitest with MSW 2.x for GitHub API mocking
+- Merged RepoInfo + SourceRepo into single RepoMetadata type
+- Extracted parseNamespaceAndRuntime, getLanguageFromPath, handlerMap into shared utils
+- Added CSP connect-src for GitHub API in dev mode (start-console.sh)
+- Removed navigation state passing between pages (each page loads own data from URL params)
+- Added CSS, co-location, React performance rules to style guide and architecture docs
+- Added communication rules and draft PR step to workflow docs
+- 12 test suites, 89 tests, all passing, zero lint errors
+Left off: PR #16 ready for review. Missing test coverage for dirty tracking, save error alert, modal interactions, file selection.
+Blockers: None
+
 ---
 ## 2026-04-28 | Session: Runtime PAT entry and user avatar
 Worked on: Replace compile-time PAT injection with runtime modal entry, add user avatar to page headers

docs/features.json

@@ -96,6 +96,19 @@
     ],
     "passes": true
   },
+  {
+    "category": "technical",
+    "description": "CI/CD: GitHub Actions pipelines for PR checks and master publish to GHCR, plus lint fixes and README deployment instructions",
+    "steps": [
+      "PR pipeline (.github/workflows/pr.yml): triggers on pull_request to master, runs yarn install --immutable, yarn lint, yarn test — branch cannot merge without passing checks and an approval",
+      "Publish pipeline (.github/workflows/publish.yml): triggers on push to master (merged PRs), runs yarn install --immutable, yarn lint, yarn test, then builds multi-arch container image via docker/build-push-action using existing Dockerfile and pushes to ghcr.io/twogiants/console-functions-plugin with :latest and :sha-<commit> tags",
+      "Both pipelines use actions/setup-node@v4 with node-version 22, corepack enable, and cache: yarn for Yarn install caching (GitHub runners ship Node 20 by default with corepack disabled)",
+      "Both pipelines authenticate to GHCR using GITHUB_TOKEN secret with packages:write permission (token added to repo's Actions secrets)",
+      "Add yarn lint script to package.json if missing, run it, and fix all lint errors in the codebase",
+      "Update README.md deployment section (lines 96-117) — replace generic Helm boilerplate, placeholder commands, and obsolete OCP 4.10 / i18n notes with concrete instructions: oc new-project console-functions-plugin, helm upgrade -i console-functions-plugin charts/openshift-console-plugin -n console-functions-plugin --create-namespace --set plugin.image=ghcr.io/twogiants/console-functions-plugin:latest@sha256:<digest>"
+    ],
+    "passes": true
+  },
   {
     "category": "functional",
     "description": "GitHub PAT Avatar: session-wide PAT entry via modal + avatar component showing authenticated GitHub user",
@@ -126,19 +139,6 @@
     ],
     "passes": false
   },
-  {
-    "category": "technical",
-    "description": "CI/CD: GitHub Actions pipelines for PR checks and master publish to GHCR, plus lint fixes and README deployment instructions",
-    "steps": [
-      "PR pipeline (.github/workflows/pr.yml): triggers on pull_request to master, runs yarn install --immutable, yarn lint, yarn test — branch cannot merge without passing checks and an approval",
-      "Publish pipeline (.github/workflows/publish.yml): triggers on push to master (merged PRs), runs yarn install --immutable, yarn lint, yarn test, then builds multi-arch container image via docker/build-push-action using existing Dockerfile and pushes to ghcr.io/twogiants/console-functions-plugin with :latest and :sha-<commit> tags",
-      "Both pipelines use actions/setup-node@v4 with node-version 22, corepack enable, and cache: yarn for Yarn install caching (GitHub runners ship Node 20 by default with corepack disabled)",
-      "Both pipelines authenticate to GHCR using GITHUB_TOKEN secret with packages:write permission (token added to repo's Actions secrets)",
-      "Add yarn lint script to package.json if missing, run it, and fix all lint errors in the codebase",
-      "Update README.md deployment section (lines 96-117) — replace generic Helm boilerplate, placeholder commands, and obsolete OCP 4.10 / i18n notes with concrete instructions: oc new-project console-functions-plugin, helm upgrade -i console-functions-plugin charts/openshift-console-plugin -n console-functions-plugin --create-namespace --set plugin.image=ghcr.io/twogiants/console-functions-plugin:latest@sha256:<digest>"
-    ],
-    "passes": true
-  },
   {
     "category": "functional",
     "description": "Set GitHub Secret (KUBECONFIG) on created function repos so GH Actions can deploy to the cluster",
@@ -149,5 +149,23 @@
       "GH Actions workflow can authenticate to the cluster and run func deploy"
     ],
     "passes": false
+  },
+  {
+    "category": "functional",
+    "description": "Function Edit Page with TreeView file browser and CodeEditor for editing and deploying function code",
+    "steps": [
+      "SourceControlService extended with fetch(repo) and updateRepo(repo) methods. fetch retrieves full repo tree via git.getTree recursive + blob fetches. updateRepo commits on existing branches with local commit SHA cache for GitHub's eventual consistency",
+      "Navigate to /faas/edit/:name loads files from GitHub via listFunctionRepos + fetch (each page loads its own data from URL params)",
+      "Page layout: toolbar at top (Back link left, success/danger Alert center, Save & Deploy button right), FileTreeView fixed-width left panel (16rem, horizontally scrollable), SDK CodeEditor fills remaining width (70vh height)",
+      "FileTreeView builds nested tree from flat FileEntry[] paths with loading spinner state, empty placeholder state, directories expand/collapse only, files are selectable and update CodeEditor content",
+      "SDK CodeEditor with empty state (code icon + 'Start editing' message) when no file selected, language label visible in header",
+      "CodeEditor language auto-detected from file extension via getLanguageFromPath utility",
+      "Handler file auto-selected on load based on runtime from func.yaml (no fallback selection if handler not found)",
+      "Modified files indicated in tree with dot indicator after filename, dirty state derived by comparing working content against original per file on every onChange",
+      "Save & Deploy button pushes all files to GitHub via updateRepo, resets dirty state on success, shows spinner and disables button during push, shows success alert with auto-dismiss after 2 seconds",
+      "Back to Functions link navigates to /faas directly if clean, shows unsaved changes confirmation modal if dirty",
+      "Empty tree with 'No files' placeholder and disabled Save & Deploy when repo not found, back link always visible"
+    ],
+    "passes": true
   }
 ]

docs/plans/completed/016-feat-function-edit-page.md

@@ -0,0 +1,86 @@
+# Function Edit Page Implementation Plan
+
+**Status:** COMPLETED
+
+**Goal:** Build the Function Edit Page with a TreeView file browser and CodeEditor for editing and deploying function code to GitHub.
+
+**Architecture:** The page follows the project's layered architecture. A `useFunctionEditPage` hook (co-located in the view file, unexported) handles data loading, state management, and save logic. A `FileTreeView` component with a co-located `useFileTreeView` hook renders the file tree. An `EditToolbar` component with `useEditToolbar` hook manages save flow and navigation. The `SourceControlService` interface is extended with `fetch()` and `updateRepo()`.
+
+**Tech Stack:** React, PatternFly 6 (TreeView, Toolbar, Modal, Button, Alert, EmptyState), OCP Dynamic Plugin SDK (CodeEditor, DocumentTitle, ListPageHeader), Vitest + React Testing Library + MSW
+
+**Testing approach:** MSW for all GitHub API interactions. `vi.mock` only for `react-i18next` and OCP SDK components.
+
+---
+
+## Completed Tasks
+
+### Task 1: Add fetch() to SourceControlService and GithubService
+
+- Added `fetch(repo)` using `git.getTree({ recursive: '1' })` + per-file `git.getBlob`
+- Migrated all GithubService tests from `vi.mock('@octokit/rest')` to MSW handlers
+- Renamed test file to `GithubService.test.ts`
+- Merged `RepoInfo` + `SourceRepo` into single `RepoMetadata` type
+- Added test for `fetchFileContent` error path
+
+### Task 2: Decompose push() into push() and updateRepo()
+
+- `push()` for initial commits (createRef, no parents)
+- `updateRepo()` for subsequent commits with local commit SHA cache
+- Cache handles GitHub's eventually consistent ref storage (stale getRef on rapid saves)
+- Cache clears only on "not a fast forward" errors (external push), not on network errors
+- 5 updateRepo tests: first push, second from cache, third from cache, stale cache recovery, network error preserves cache
+
+### Task 3: Add getLanguageFromPath utility
+
+- Maps file extensions and special filenames (Dockerfile, Makefile) to Monaco Language enum
+- Extracted to shared `src/utils/utils.ts` along with `parseNamespaceAndRuntime` and `handlerMap`
+
+### Tasks 4+5: FileTreeView component
+
+- Builds `TreeViewDataItem[]` directly from flat `FileEntry[]` paths (no intermediate type)
+- Separate handling for root files and nested files
+- Directories render before files, sorted alphabetically
+- Loading state with spinner and "Loading source..." text
+- Empty state with "No files" placeholder (not clickable)
+- Dirty indicator after filename (`func.yaml ●`)
+- `React.memo` with `useMemo` (justified: parent re-renders on every CodeEditor keystroke)
+- Fixed width (16rem) with horizontal scroll, vertical scroll for long file lists
+- 11 test cases using realistic Node function file structure from knative/func templates
+
+### Task 6: FunctionEditPage view and hooks
+
+- Page component: toolbar + flex layout (FileTreeView left, SDK CodeEditor right)
+- `Flex` with `direction: row`, `flexWrap: nowrap`, `alignItems: stretch` (fixes baseline alignment stacking issue)
+- SDK CodeEditor with `height="70vh"`, empty state (code icon + "Start editing"), language label visible
+- Handler file auto-selected based on runtime from func.yaml (function.go for Go, index.js for Node, function/func.py for Python)
+- Each page loads its own data from URL params (no navigation state passing between pages)
+- `resolveRepoContent` extracts API calls from state management
+- Repo metadata stored in state after load for save without re-fetching
+
+### EditToolbar component
+
+- Back link (left), success/danger Alert (center), Save & Deploy button (right)
+- `useEditToolbar` hook: save flow with isSaving/error/success state
+- Success alert "Pushed to GitHub. Deployment running..." with 2-second auto-dismiss (tested with `vi.useFakeTimers`)
+- Unsaved changes confirmation modal (LeaveModal) on back navigation when dirty
+- Save & Deploy disabled when no changes
+
+### Infrastructure changes
+
+- Migrated from Jest to Vitest with MSW 2.x
+- Custom jsdom environment removed (Vitest handles globals natively)
+- CSP connect-src for GitHub API added to start-console.sh for dev mode
+- Added CSS, co-location, React performance rules to style guide and architecture docs
+- Added communication rules and draft PR step to workflow docs
+
+---
+
+## Deviations from original plan
+
+- Used SDK CodeEditor instead of PatternFly CodeEditor (CSP blob URL issues with Monaco workers in OCP Console)
+- Removed navigation state passing between list and edit page (each page is self-contained)
+- Split `push()` into `push()` + `updateRepo()` (clearer separation of initial vs subsequent commits)
+- Added local commit SHA cache (GitHub eventual consistency workaround)
+- Added success alert after save (not in original plan)
+- Editor empty state with code icon (not in original plan)
+- `autoSelectHandler` renamed to `determineHandler` (pure function, returns path instead of calling setState)

docs/potential-features.json

@@ -22,5 +22,16 @@
       "Namespace column visible in admin perspective, hidden in dev perspective (redundant with project selector)"
     ],
     "passes": false
+  },
+  {
+    "category": "technical",
+    "description": "Replace per-file blob fetching in GithubService.fetch() with single archive download (downloadTarballArchive) and extraction for better performance",
+    "steps": [
+      "Download repo as tarball via octokit.repos.downloadTarballArchive()",
+      "Decompress gzip with DecompressionStream, parse tar format",
+      "Strip the prefix directory from extracted paths",
+      "Return FileEntry[] from extracted contents instead of N+1 getBlob calls"
+    ],
+    "passes": false
   }
 ]

jest.config.ts

@@ -13,6 +13,7 @@
   "Delete": "Delete",
   "Edit": "Edit",
   "Enter your GitHub Personal Access Token to connect your repositories.": "Enter your GitHub Personal Access Token to connect your repositories.",
+  "Edit function": "Edit function",
   "Error creating function": "Error creating function",
   "Function Settings": "Function Settings",
   "FaaS": "FaaS",
@@ -25,12 +26,21 @@
   "No functions found": "No functions found",
   "Owner": "Owner",
   "Personal Access Token": "Personal Access Token",
+  "Pushed to GitHub. Deployment running...": "Pushed to GitHub. Deployment running...",
   "Registry": "Registry",
   "Replicas": "Replicas",
   "Repository": "Repository",
   "Runtime": "Runtime",
   "Serverless functions in your repository and deployed to your cluster. Manage lifecycle, monitor status, and scale on demand.": "Serverless functions in your repository and deployed to your cluster. Manage lifecycle, monitor status, and scale on demand.",
   "Status": "Status",
   "URL": "URL",
-  "Undeploy": "Undeploy"
+  "Undeploy": "Undeploy",
+  "Back to Functions": "Back to Functions",
+  "Save & Deploy": "Save & Deploy",
+  "Select a file from the tree view to start editing.": "Select a file from the tree view to start editing.",
+  "Start editing": "Start editing",
+  "Unsaved changes": "Unsaved changes",
+  "You have unsaved changes. Leave anyway?": "You have unsaved changes. Leave anyway?",
+  "Stay": "Stay",
+  "Leave": "Leave"
 }