rk@tigase.net opened 1 week ago
-
Worklog — SZ-44: Implement Branch Management UI (Phase 1)
Scope
Implement the core CRUD user interface for managing branches:
- List branches
- Create branch
- Edit branch
- Delete branch
- Associate a branch with a project
- Paginated backend integration
Lineage visualization is explicitly excluded and deferred to a follow-up issue.
Tasks Completed
1. Type Definitions (
src/types/branch.ts)- Added BranchDto with id, name, description, createdAt, updatedAt, projectId, etc.
- Added BranchCreateDto and BranchUpdateDto.
- Ensured consistency with Project and GitRepo type patterns.
Time: 0.3h
2. API Layer (
src/api/branches.ts)- Added GET paginated branches.
- Added POST create branch.
- Added PUT update branch.
- Added DELETE branch.
- All endpoints tested against backend controller.
Time: 0.4h
3. Branch List Page (
src/pages/BranchListPage.tsx)- Implemented table listing branches.
- Show project name instead of projectId.
- Added pagination controls.
- Added action buttons for edit/delete.
- Integrated with toast notifications.
Time: 1.0h
4. CreateBranchModal
- Modal with validated inputs.
- Dropdown for selecting Project.
- Auto-fill defaults and error handling.
- WIP badge for consistency with other UI modules.
Time: 0.6h
5. EditBranchModal
- Preload selected branch data.
- Allow updating name/description/project.
- Null-safe logic matching ProjectEditor patterns.
Time: 0.6h
6. Integrations & Walkthrough Testing
- Added route in App.tsx sidebar.
- Verified navigation from sidebar → branches.
- Verified backend links for project → branches.
- Verified delete workflows.
Time: 0.7h
Total Time
4.0h – 5.0h
Notes
- Branch lineage visualization will be implemented as a separate issue (SZ-XX).
- UI is stable and consistent with established Sztab design grammar.
- Backend model supports all required CRUD operations.
-
Previous Value Current Value Open
In Progress
-
Work Log — SZ-48: Branch Management UI
Date: 2025-12-10
Summary of Work Completed
- Implemented full Branch Management UI under
/projects/:id/branches. - Added dark-mode Create Branch and Edit Branch modals, consistent with Project modals.
- Integrated BranchIcon into modal headers for unified visual grammar.
- Added parent-branch dropdown in Create and Edit modals.
- Implemented validation to prevent selecting a branch as its own parent.
- Added status editing in Edit Branch modal.
- Added delete-branch function with confirmation dialog.
- Disabled delete button for default branches (
parentId = null) with tooltip “Default branch cannot be deleted”. - Standardized typography in modals (bold/italic labels, regular input fields).
- Refined toaster styling: smaller font, cleaner UI.
- Added
onUpdatedwiring to refresh branch list after Create or Edit. - Updated frontend DTO types (
ProjectDto,BranchDto, create/update request interfaces). - Updated App.tsx wiring for toaster and modal consistency.
- Verified behavior across Create, Edit, Delete, and validation scenarios.
- Merged the entire feature into main branch
wolnosc.
Testing Performed
- Verified listing of project branches.
- Created new branches with/without parents.
- Ensured invalid parent choices (branch as its own parent) are rejected.
- Verified parent dropdown population.
- Confirmed default branches cannot be deleted.
- Verified toaster messages throughout success/error flows.
- Ensured UI reloads immediately after Create/Edit/Delete.
- Confirmed no regressions to Project management UI.
Outcome
SZ-48 Branch Management UI is fully implemented, stable, and merged into
wolnosc.
Feature branchfeature/SZ-48-Branch-Management-UIis no longer required.Branch Cleanup (optional)
To delete the feature branch:
Local: git branch -d feature/SZ-48-Branch-Management-UI
Remote: git push origin –delete feature/SZ-48-Branch-Management-UI
Closing Note
Branch Management UI (SZ-48) is now complete and merged into
wolnosc.
This issue may be safely closed. - Implemented full Branch Management UI under
-
Previous Value Current Value In Progress
Closed
-
| Type |
New Feature
|
| Priority |
Normal
|
| Assignee | |
| Version |
none
|
| Sprints |
n/a
|
| Customer |
n/a
|
Issue Votes (0)
Watchers (3)
This issue tracks the implementation of the Branch Management UI for Sztab.
The backend REST endpoints for Branch entities already exist (create, update, list, delete), but the frontend has no corresponding UI. This task brings Branches to parity with the existing Users, Git Repos, and Projects management screens.
Scope
Implement a complete Branch Management feature in the Sztab frontend, including:
This UI will follow the same patterns and visual grammar established in SZ-44 (Project Management UI).
Deliverables
1. Type Definitions
Create
src/types/branch.ts:BranchDtoBranchCreateDtoBranchUpdateDtoFields must reflect the backend model:
2. API Wrapper
Create
src/api/branches.ts:getBranches(page, size, sort, order)→ paginated listgetBranchById(id)createBranch(dto)updateBranch(id, dto)deleteBranch(id)API must consume/produce paginated responses similar to users, repos, and projects.
3. Branch List Page
Create
src/pages/BranchListPage.tsx:/api/branches4. Create Branch Modal
Create
src/components/branch/CreateBranchModal.tsx:/api/projects)/api/users)/api/branchesbut paged; show only first N or client-filter)createBranch()Must match the UI style used for Project Create modal.
5. Edit Branch Modal
Create
src/components/branch/EditBranchModal.tsx:getBranchById(id)updateBranch()6. Delete Flow
confirm()for now7. Routing
Add Branch Management to admin navigation and routing:
/branches→ BranchListPageAcceptance Criteria
npm run buildpasses cleanlyNotes
Backend entities and services for Branch are already present but may require minor DTO adjustments during integration (e.g., exposing project/creator names). Any necessary backend tweaks should be included in this issue.