[CORE-152] Add form flow editor by Kyle9410-Chen · Pull Request #13 · NYCU-SDC/core-system-frontend

Kyle9410-Chen · 2026-02-04T06:01:57Z

Type of changes

Feature

Purpose

Add form flow editor

Additional Information

Add a new shared component, popover.

…rops

…gement improvements

…ering

…ent SVG

…group elements

Copilot

Pull request overview

This PR adds a comprehensive form flow editor feature with visual workflow management capabilities. The implementation includes a new Popover shared component and extensive updates to form editing functionality.

Changes:

Adds a visual form flow editor with node-based workflow representation including START, END, SECTION, and CONDITION node types
Introduces a new Popover shared component using Radix UI primitives for contextual menus
Adds development proxy configuration for API requests and wraps the app with ToastProvider

Reviewed changes

Copilot reviewed 24 out of 35 changed files in this pull request and generated 14 comments.

Show a summary per file

File	Description
vite.config.ts	Adds proxy configuration for API requests to development server
package.json / pnpm-lock.yaml	Adds @radix-ui/react-popover dependency
src/App.tsx	Wraps application with ToastProvider for global toast notifications
src/shared/components/index.ts	Exports new Popover component
src/shared/components/Popover/*	New Popover component implementation with animations
src/shared/components/Select/*	Adds "text" variant for inline select styling
src/features/form/components/AdminFormDetailPages/EditPage.tsx	Implements complete flow editor with node management logic
src/features/form/components/AdminFormDetailPages/components/FormEditor/*	FlowRenderer and Arrow components for visual workflow
src/features/form/components/AdminFormDetailPages/components/SectionEditor/*	Various question editor components moved to subdirectory
src/features/form/components/AdminFormDetailPages/types/workflow.ts	Type definitions for workflow nodes
src/features/dashboard/components/AdminSettingsPage.tsx	Updates orgSlug to uppercase and adds debug logging
src/features/dashboard/components/ComponentsDemo.tsx	Adds Popover demo
src/features/form/components/AdminFormsPage.tsx	Adds commented import statement

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-02-04T10:15:30Z

src/features/form/components/AdminFormDetailPages/EditPage.tsx

-			<div>Section Edit Page Content</div>
-			<button onClick={() => handleEditForm("test")}>Edit Form</button>
+			<h2>表單結構</h2>
+			<blockquote className={styles.description}>點擊區塊已新增或編輯條件與問題</blockquote>


There is a typo in the Chinese text. The word "已" should be "以" (meaning "to" or "in order to"). The current text reads "點擊區塊已新增或編輯條件與問題" which should be "點擊區塊以新增或編輯條件與問題" (Click on blocks to add or edit conditions and questions).

Suggested change

<blockquote className={styles.description}>點擊區塊已新增或編輯條件與問題</blockquote>

<blockquote className={styles.description}>點擊區塊以新增或編輯條件與問題</blockquote>

Copilot · 2026-02-04T10:15:30Z

src/features/form/components/AdminFormDetailPages/EditPage.tsx

+import type { NodeItem } from "./types/workflow";
+
+const postProcessNodes = (nodes: NodeItem[]): NodeItem[] => {
+	console.log("Post-processing nodes:", nodes);


The console.log statement should be removed before merging to production. Debug logging statements should not be committed to the codebase.

Suggested change

console.log("Post-processing nodes:", nodes);

Copilot · 2026-02-04T10:15:30Z

vite.config.ts

+	server: {
+		proxy: {
+			"/api": {
+				target: "https://dev.core-system.sdc.nycu.club",


The proxy configuration includes a hardcoded development URL "https://dev.core-system.sdc.nycu.club". This should be moved to an environment variable to allow different environments (dev, staging, production) to be configured without code changes. Consider using an environment variable like "VITE_API_BASE_URL" instead.

Copilot · 2026-02-04T10:15:31Z

src/features/form/components/AdminFormDetailPages/components/FormEditor/FlowRenderer.tsx

+			content={
+				<div className={styles.popoverContent}>
+					{node.type === "SECTION" && <Button variant="secondary">編輯</Button>}
+					{node.type != "END" && node.type != "CONDITION" && (


Inconsistent comparison operators are used: line 104 uses != while line 109 uses !==. For consistency and best practices in JavaScript/TypeScript, always use strict equality operators (=== and !==) instead of loose equality operators (== and !=).

Suggested change

{node.type != "END" && node.type != "CONDITION" && (

{node.type !== "END" && node.type !== "CONDITION" && (

Copilot · 2026-02-04T10:15:31Z

src/features/form/components/AdminFormDetailPages/components/FormEditor/FlowRenderer.tsx

+					{node.type === "SECTION" && <Button variant="secondary">編輯</Button>}
+					{node.type != "END" && node.type != "CONDITION" && (
+						<Button variant="secondary" onClick={onAddSection}>
+							新增區域
+						</Button>
+					)}


The "編輯" (Edit) button on line 103 does not have an onClick handler. This appears to be a placeholder button that does nothing when clicked, which could confuse users. Either add the appropriate handler or remove this button until the functionality is implemented.

Suggested change

{node.type === "SECTION" && <Button variant="secondary">編輯</Button>}

{node.type != "END" && node.type != "CONDITION" && (

<Button variant="secondary" onClick={onAddSection}>

新增區域

</Button>

)}

{node.type != "END" && node.type != "CONDITION" && (

<Button variant="secondary" onClick={onAddSection}>

新增區域

</Button>

)}

Copilot · 2026-02-04T10:15:33Z

src/features/form/components/AdminFormDetailPages/EditPage.tsx

+		if (nodeToMerge && nodeToDelete.type === "CONDITION" && nodeToDelete.nextTrue !== nodeToDelete.mergeId && nodeToDelete.nextFalse !== nodeToDelete.mergeId) {
+			setToastOpen(true);
+			setToastTitle("無法刪除條件節點");
+			setToastDescription("請確保只有一個可辨識的分支路後再嘗試刪除。");


There is a typo in the error message. "可辨識的分支路" should be "可辨識的分支路徑" (with the complete word "路徑" meaning "path"). The current text is incomplete.

Suggested change

setToastDescription("請確保只有一個可辨識的分支路後再嘗試刪除。");

setToastDescription("請確保只有一個可辨識的分支路徑後再嘗試刪除。");

Copilot · 2026-02-04T10:15:33Z

src/features/dashboard/components/AdminSettingsPage.tsx

 export const AdminSettingsPage = () => {
 	// NOTE: current routes are hard-coded to /orgs/sdc/*
-	const orgSlug = "sdc";
+	const orgSlug = "SDC";


The orgSlug value has been changed from lowercase "sdc" to uppercase "SDC". This may cause issues if the API is case-sensitive, as all the hardcoded routes throughout the codebase use lowercase "sdc" (e.g., "/orgs/sdc/forms"). If this change is intentional, the associated comment on line 43 should be updated to reflect that routes use lowercase but the API expects uppercase. Otherwise, this should be reverted to "sdc" to maintain consistency.

Suggested change

const orgSlug = "SDC";

const orgSlug = "sdc";

Copilot · 2026-02-04T10:15:33Z

src/features/form/components/AdminFormDetailPages/components/FormEditor/FlowRenderer.tsx

+		);
+	}, [nodes]);
+
+	const renderedIds = new Set<string>();


The renderedIds Set is declared inside the component but outside the renderNode function. This means it persists across renders but doesn't get reset when the component re-renders. This could cause nodes to not be rendered properly after a state update. The Set should be initialized inside a useMemo hook or the renderNode function should be restructured to handle this correctly.

Copilot · 2026-02-04T10:15:33Z

src/features/form/components/AdminFormDetailPages/EditPage.tsx

+			return;
+		}
+
+		if (!nodeToDelete) return;


There is redundant code - the variable nodeToDelete is checked twice for null/undefined. The check on line 260 is unnecessary since the same check already exists on line 252 with an early return. This second check can be removed.

Suggested change

if (!nodeToDelete) return;

Copilot · 2026-02-04T10:15:34Z

src/features/form/components/AdminFormDetailPages/EditPage.tsx

+					return { ...node, nextFalse: nodeToDelete.next || (nodeToDelete.mergeId === nodeToDelete.nextTrue ? nodeToDelete.nextFalse : nodeToDelete.nextFalse) };
+				}
+				if (node.nextTrue === id) {
+					return { ...node, nextTrue: nodeToDelete.next || (nodeToDelete.mergeId === nodeToDelete.nextTrue ? nodeToDelete.nextFalse : nodeToDelete.nextFalse) };


The condition logic on lines 268, 270, and 271 is complex and appears to have duplicated ternary expressions. The expression (nodeToDelete.mergeId === nodeToDelete.nextTrue ? nodeToDelete.nextFalse : nodeToDelete.nextFalse) evaluates to nodeToDelete.nextFalse in both cases, making the ternary operator redundant. This suggests either a logic error or unnecessary complexity that should be simplified to just nodeToDelete.next || nodeToDelete.nextFalse.

Suggested change

return { ...node, nextFalse: nodeToDelete.next || (nodeToDelete.mergeId === nodeToDelete.nextTrue ? nodeToDelete.nextFalse : nodeToDelete.nextFalse) };

}

if (node.nextTrue === id) {

return { ...node, nextTrue: nodeToDelete.next || (nodeToDelete.mergeId === nodeToDelete.nextTrue ? nodeToDelete.nextFalse : nodeToDelete.nextFalse) };

return { ...node, nextFalse: nodeToDelete.next || nodeToDelete.nextFalse };

}

if (node.nextTrue === id) {

return { ...node, nextTrue: nodeToDelete.next || nodeToDelete.nextFalse };

…or improved performance

…-processing

…d improve FlowNode interaction

…in AdminFormEditPage

Kyle9410-Chen and others added 13 commits February 2, 2026 15:13

feat: implement SectionEditor components for form customization

c691a01

feat: add Popover component and integrate into ComponentsDemo

2269ada

feat: enhance Popover component with animation effects and simplify p…

cf90f2a

…rops

feat: remove unused popover state from ComponentsDemo

29419a5

feat: implement form flow editor with node management and rendering

c6776fc

feat: remove ToastProvider from App component

15e87e1

fix: add proxy to vite.config.ts

a218b2a

feat: wrap AppRouter with ToastProvider for toast notifications

c4896f3

feat: implement form flow editor with node management and rendering

897d7fc

feat: remove ToastProvider from App component

f3cdead

feat: implement form flow editor with node management and rendering

a2947eb

feat: remove ToastProvider from App component

2f2ab6e

feat: wrap AppRouter with ToastProvider for toast notifications

d9e6362

Kyle9410-Chen self-assigned this Feb 4, 2026

Kyle9410-Chen added 9 commits February 4, 2026 16:22

feat: enhance form flow editor with toast notifications and node mana…

0f4bd3b

…gement improvements

feat: remove unused Edit Form button from AdminFormEditPage

161ec9f

feat: refactor Arrow component to improve structure and add icon rend…

245435a

…ering

feat: add strokeLinecap and strokeLinejoin attributes to Arrow compon…

120404c

…ent SVG

feat: simplify Arrow component SVG structure by removing unnecessary …

e44ee0c

…group elements

fix: fix lint error

4ce51cd

feat: remove unnecessary className from Arrow component SVG

b630269

feat: add missing styles for arrow component in CSS

de6485b

feat: update Arrow component styles and structure for improved rendering

2b3d167

Kyle9410-Chen requested a review from elvisdragonmao February 4, 2026 10:09

Kyle9410-Chen marked this pull request as ready for review February 4, 2026 10:09

Copilot AI review requested due to automatic review settings February 4, 2026 10:09

Copilot started reviewing on behalf of Kyle9410-Chen February 4, 2026 10:10 View session

Copilot AI reviewed Feb 4, 2026

View reviewed changes

Kyle9410-Chen added 2 commits February 4, 2026 20:57

feat: implement merge section and condition addition in flow editor

24062c9

refactor: refactor getPath and findMergeNodeId functions to use Map f…

3149fd3

…or improved performance

Kyle9410-Chen added 7 commits February 4, 2026 21:50

fix: fix typo

7b82828

fix: remove logging for debugging

a11a0b4

fix: update conditional checks in FlowNode component for clarity

a6f232b

fix: fix typo

b0afff7

fix: enhance merge node detection and update node connections in post…

d69f202

…-processing

fix: refactor Popover component to support dynamic content closure an…

f3fafe0

…d improve FlowNode interaction

feat: integrate uuid for dynamic section and condition ID generation …

117b915

…in AdminFormEditPage

elvisdragonmao approved these changes Feb 17, 2026

View reviewed changes

Merge branch 'main' into feat/CORE-152-add-form-flow-editor

0297f33

elvisdragonmao merged commit b2869fe into main Feb 17, 2026
2 of 5 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[CORE-152] Add form flow editor#13

[CORE-152] Add form flow editor#13
elvisdragonmao merged 32 commits intomainfrom
feat/CORE-152-add-form-flow-editor

Kyle9410-Chen commented Feb 4, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Feb 4, 2026

Uh oh!

Copilot AI Feb 4, 2026

Uh oh!

Copilot AI Feb 4, 2026

Uh oh!

Copilot AI Feb 4, 2026

Uh oh!

Copilot AI Feb 4, 2026

Uh oh!

Copilot AI Feb 4, 2026

Uh oh!

Copilot AI Feb 4, 2026

Uh oh!

Copilot AI Feb 4, 2026

Uh oh!

Copilot AI Feb 4, 2026

Uh oh!

Copilot AI Feb 4, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

	<blockquote className={styles.description}>點擊區塊已新增或編輯條件與問題</blockquote>
	<blockquote className={styles.description}>點擊區塊以新增或編輯條件與問題</blockquote>

	{node.type != "END" && node.type != "CONDITION" && (
	{node.type !== "END" && node.type !== "CONDITION" && (

	setToastDescription("請確保只有一個可辨識的分支路後再嘗試刪除。");
	setToastDescription("請確保只有一個可辨識的分支路徑後再嘗試刪除。");

Conversation

Kyle9410-Chen commented Feb 4, 2026

Type of changes

Purpose

Additional Information

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Feb 4, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 4, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 4, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 4, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 4, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 4, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 4, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 4, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 4, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 4, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants