root/fusion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(FN-1211): add collapsible advanced options to task form

Browse Source 
- Split TaskForm into a primary section and a collapsible "More options" block for dependencies, models, workflow steps, and attachments
- Auto-expand advanced options when non-default values exist and reset dependency dropdown state when the section is collapsed
- Restyle modal form hierarchy, description actions, and advanced option container for clearer visual grouping across desktop and responsive layouts
- Update NewTaskModal and TaskForm tests to open and assert advanced fields through the new More options toggle
This commit is contained in:
gsxdsm
2026-04-08 16:23:08 -07:00
parent e3aa02d58b
commit 445b6f7e72
4 changed files with 231 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
packages/dashboard/app/components/TaskForm.tsx
View File

@@ -101,7 +101,18 @@ export function TaskForm({
onSubtaskBreakdown,
onClose,
}: TaskFormProps) {
const hasInitialMoreOptions =
dependencies.length > 0 ||
pendingImages.length > 0 ||
selectedWorkflowSteps.length > 0 ||
presetMode !== "default" ||
executorModel !== "" ||
validatorModel !== "" ||
(planningModel || "") !== "" ||
(thinkingLevel || "off") !== "off";
const [showDepDropdown, setShowDepDropdown] = useState(false);
const [showMoreOptions, setShowMoreOptions] = useState(hasInitialMoreOptions);
const [depSearch, setDepSearch] = useState("");
const [availableModels, setAvailableModels] = useState<ModelInfo[]>([]);
const [favoriteProviders, setFavoriteProviders] = useState<string[]>([]);
@@ -124,6 +135,7 @@ export function TaskForm({
const autoSaveTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
const autoSaveStatusTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
const isAutoSavingRef = useRef(false);
const hadMoreOptionSelectionsRef = useRef(hasInitialMoreOptions);
const initialDescriptionRef = useRef(description.trim());
const lastAutoSavedDescriptionRef = useRef(description.trim());
@@ -149,6 +161,15 @@ export function TaskForm({
const availablePresets = settings?.modelPresets || [];
const selectedPreset = availablePresets.find((preset) => preset.id === selectedPresetId);
const hasMoreOptionSelections =
dependencies.length > 0 ||
pendingImages.length > 0 ||
selectedWorkflowSteps.length > 0 ||
presetMode !== "default" ||
executorModel !== "" ||
validatorModel !== "" ||
(planningModel || "") !== "" ||
(thinkingLevel || "off") !== "off";
// Auto-select preset by size (create mode only)
useEffect(() => {
@@ -186,6 +207,21 @@ export function TaskForm({
}
}, [isActive]);
// Auto-expand advanced options when non-default values are present.
useEffect(() => {
if (hasMoreOptionSelections && !hadMoreOptionSelectionsRef.current) {
setShowMoreOptions(true);
}
hadMoreOptionSelectionsRef.current = hasMoreOptionSelections;
}, [hasMoreOptionSelections]);
// Keep dependency dropdown state clean when advanced options are collapsed.
useEffect(() => {
if (showMoreOptions) return;
setShowDepDropdown(false);
setDepSearch("");
}, [showMoreOptions]);
// Auto-focus description (create) or title (edit) when active
useEffect(() => {
if (!isActive) return;
@@ -485,7 +521,8 @@ export function TaskForm({
onDragOver={(e) => e.preventDefault()}
onPaste={handlePaste}
>
{/* Title field (edit mode only) */}
<div className="task-form-primary-section">
{/* Title field (edit mode only) */}
{mode === "edit" && onTitleChange && (
<div className="form-group">
<label htmlFor="task-form-title">Title</label>
@@ -538,7 +575,7 @@ export function TaskForm({
value={description}
onChange={handleDescriptionInput}
placeholder="What needs to be done?"
rows={mode === "edit" ? 8 : 3}
rows={mode === "edit" ? 8 : 5}
disabled={disabled || isRefining}
/>
{mode === "edit" && !disabled && !isDescriptionExpanded && (
@@ -634,7 +671,27 @@ export function TaskForm({
)}
</div>
)}
</div>
<button
type="button"
className="task-form-more-options-toggle"
onClick={() => setShowMoreOptions((prev) => !prev)}
aria-expanded={showMoreOptions}
aria-controls="task-form-more-options"
disabled={disabled}
data-testid="task-form-more-options-toggle"
>
<span>More options</span>
{showMoreOptions ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
</button>
<div
id="task-form-more-options"
className={`task-form-more-options${showMoreOptions ? "" : " collapsed"}`}
aria-hidden={!showMoreOptions}
data-testid="task-form-more-options"
>
{/* Attachments */}
<div className="form-group">
<label>Attachments</label>
@@ -984,7 +1041,7 @@ export function TaskForm({
</div>
)}
</div>
</div>
</div>
);
}

25
packages/dashboard/app/components/__tests__/NewTaskModal.test.tsx
View File

@@ -68,19 +68,36 @@ describe("NewTaskModal", () => {
it("renders all form fields when open", () => {
renderNewTaskModal();
expect(screen.getByText("New Task")).toBeTruthy();
expect(screen.getByLabelText(/Description/i)).toBeTruthy();
expect(screen.getByRole("button", { name: "Add dependencies" })).toBeTruthy();
expect(screen.getByText(/Model Configuration/i)).toBeTruthy();
// Plan and Subtask buttons for AI-assisted creation (replaced planning mode checkbox)
expect(screen.getByRole("button", { name: "Plan" })).toBeTruthy();
expect(screen.getByRole("button", { name: "Subtask" })).toBeTruthy();
fireEvent.click(screen.getByTestId("task-form-more-options-toggle"));
expect(screen.getByRole("button", { name: "Add dependencies" })).toBeTruthy();
expect(screen.getByText(/Model Configuration/i)).toBeTruthy();
expect(screen.getByText(/Attachments/i)).toBeTruthy();
expect(screen.getByRole("button", { name: "Create Task" })).toBeTruthy();
expect(screen.getByRole("button", { name: "Cancel" })).toBeTruthy();
});
it("shows More options toggle and reveals advanced fields when clicked", () => {
renderNewTaskModal();
const toggle = screen.getByTestId("task-form-more-options-toggle");
expect(toggle).toHaveAttribute("aria-expanded", "false");
expect(screen.queryByRole("button", { name: "Add dependencies" })).toBeNull();
fireEvent.click(toggle);
expect(toggle).toHaveAttribute("aria-expanded", "true");
expect(screen.getByRole("button", { name: "Add dependencies" })).toBeTruthy();
expect(screen.getByText(/Model Configuration/i)).toBeTruthy();
expect(screen.getByText(/Attachments/i)).toBeTruthy();
});
it("renders attachments before dependencies in form order", () => {
renderNewTaskModal();

2
packages/dashboard/app/components/__tests__/TaskForm.test.tsx
View File

@@ -146,6 +146,8 @@ describe("TaskForm", () => {
renderTaskForm({ tasks, onDependenciesChange });
fireEvent.click(screen.getByTestId("task-form-more-options-toggle"));
const depButton = screen.getByRole("button", { name: "Add dependencies" });
expect(depButton).toBeTruthy();

148
packages/dashboard/app/styles.css
View File

@@ -6117,10 +6117,22 @@ body {
}
.task-form-description-actions {
width: 100%;
flex-wrap: wrap;
gap: var(--space-xs);
}
.task-form-more-options-toggle {
margin: 0 14px var(--space-sm);
width: calc(100% - 28px);
}
.task-form-more-options {
margin-left: 0;
padding-left: 0;
border-left: none;
}
.task-form .checkbox-label {
flex-wrap: wrap;
}
@@ -15610,6 +15622,142 @@ body[data-color-theme="terminal"][data-theme="light"]::before {
margin-bottom: 4px !important;
}
.task-form-primary-section {
display: flex;
flex-direction: column;
gap: var(--space-md);
margin-bottom: var(--space-sm);
}
.task-form-primary-section .form-group {
margin-bottom: 0;
}
.task-form-primary-section .description-with-refine {
padding: var(--space-sm);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
background: var(--bg-tertiary);
}
.task-form-primary-section .description-with-refine textarea {
min-height: 120px;
padding: 12px 70px 12px 12px;
line-height: 1.5;
background: var(--surface);
}
.task-form-primary-section .description-with-refine.description--fullscreen {
padding: var(--space-lg);
border: none;
background: var(--surface);
}
.task-form-primary-section .description-with-refine.description--fullscreen textarea {
min-height: unset;
}
.task-form-description-actions {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-sm);
width: fit-content;
margin-top: 0;
margin-bottom: 0;
padding: 6px;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
background: var(--bg-tertiary);
}
.task-form-description-actions .btn {
border-color: var(--border);
}
.task-form-more-options-toggle {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-sm);
padding: 10px 2px;
margin: 0 0 var(--space-sm);
border: none;
border-top: 1px solid var(--border-subtle);
border-bottom: 1px solid var(--border-subtle);
background: transparent;
color: var(--text-secondary, var(--text-muted));
font-size: 12px;
font-weight: 600;
letter-spacing: 0.3px;
text-transform: uppercase;
cursor: pointer;
transition: color var(--transition-fast), border-color var(--transition-fast);
}
.task-form-more-options-toggle:hover:not(:disabled) {
color: var(--text);
border-color: var(--border);
}
.task-form-more-options-toggle:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.task-form-more-options-toggle svg {
color: var(--text-dim);
}
.task-form-more-options {
margin-left: 6px;
padding-left: 12px;
border-left: 1px solid var(--border-subtle);
overflow: hidden;
max-height: 2400px;
opacity: 1;
transition:
max-height 0.24s ease,
opacity 0.2s ease,
margin-top 0.2s ease,
padding 0.2s ease,
border-color 0.2s ease;
}
.task-form-more-options.collapsed {
max-height: 0;
opacity: 0;
pointer-events: none;
margin-top: 0;
padding-top: 0;
padding-bottom: 0;
border-left-color: transparent;
}
.task-form-more-options .form-group {
margin-bottom: var(--space-md);
}
.task-form-more-options .form-group:last-of-type {
margin-bottom: 0;
}
.task-form-more-options .form-group label {
font-size: 11px;
color: var(--text-dim);
letter-spacing: 0.4px;
}
.task-form-more-options .form-group small {
margin-top: 6px;
color: var(--text-secondary, var(--text-muted));
}
.task-form-more-options .model-select-row {
margin-bottom: var(--space-sm);
}
/* Workflow step reorder controls */
.workflow-step-order {
margin-top: var(--space-sm);