FN-7326: move Quick Add attach action next to Save
Align the expanded Quick Add action row so attachment controls sit beside Save.\n\n- Move the icon-only attachment button immediately after Save while keeping its hidden file input trigger and pending image badge.\n- Update QuickEntryBox DOM-order expectations to lock Attach next to Save.\n- Add a patch changeset for the published Fusion package.\n\nFiles changed:\n .changeset/fn-7326-quick-add-attach.md | 7 +++++\n .../dashboard/app/components/QuickEntryBox.tsx | 31 +++++++++++-----------\n .../components/__tests__/QuickEntryBox.test.tsx | 8 +++---\n 3 files changed, 28 insertions(+), 18 deletions(-) Fusion-Task-Id: FN-7326 Fusion-Task-Lineage: f9469a3f-2e94-4af4-8c74-332f2b4a10c2 Co-authored-by: Fusion (runfusion.ai) <noreply@runfusion.ai>
This commit is contained in:
7
.changeset/fn-7326-quick-add-attach.md
Normal file
7
.changeset/fn-7326-quick-add-attach.md
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
---
|
||||||
|
"@runfusion/fusion": patch
|
||||||
|
---
|
||||||
|
|
||||||
|
summary: Move the Quick Add attachment button next to Save in the expanded action row.
|
||||||
|
category: fix
|
||||||
|
dev: Preserves FN-7304 icon-only attachment behavior while updating QuickEntryBox action order coverage.
|
||||||
@@ -1946,6 +1946,22 @@ export function QuickEntryBox({ onCreate, addToast, tasks = [], availableModels,
|
|||||||
{t("tasks.save", "Save")}
|
{t("tasks.save", "Save")}
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
|
{/* FNXC:QuickAddAttachments 2026-06-30-00:00: Keep the Quick Add attachment affordance immediately to the right of Save while preserving the icon-only label, hidden file input trigger, and pending-count badge. */}
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onMouseDown={(e) => e.preventDefault()}
|
||||||
|
className="btn btn-icon btn-sm quick-entry-attach-button"
|
||||||
|
data-testid="quick-entry-attach"
|
||||||
|
onClick={() => fileInputRef.current?.click()}
|
||||||
|
aria-label={attachLabel}
|
||||||
|
title={attachLabel}
|
||||||
|
>
|
||||||
|
<Paperclip size={12} aria-hidden="true" />
|
||||||
|
{pendingImages.length > 0 && (
|
||||||
|
<span className="quick-entry-attach-count" aria-hidden="true">{pendingImages.length}</span>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className={`btn btn-sm ${isFastMode ? "btn-primary" : ""}`}
|
className={`btn btn-sm ${isFastMode ? "btn-primary" : ""}`}
|
||||||
@@ -2228,21 +2244,6 @@ export function QuickEntryBox({ onCreate, addToast, tasks = [], availableModels,
|
|||||||
);
|
);
|
||||||
})()}
|
})()}
|
||||||
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onMouseDown={(e) => e.preventDefault()}
|
|
||||||
className="btn btn-icon btn-sm quick-entry-attach-button"
|
|
||||||
data-testid="quick-entry-attach"
|
|
||||||
onClick={() => fileInputRef.current?.click()}
|
|
||||||
aria-label={attachLabel}
|
|
||||||
title={attachLabel}
|
|
||||||
>
|
|
||||||
<Paperclip size={12} aria-hidden="true" />
|
|
||||||
{pendingImages.length > 0 && (
|
|
||||||
<span className="quick-entry-attach-count" aria-hidden="true">{pendingImages.length}</span>
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button
|
<button
|
||||||
ref={modelTriggerRef}
|
ref={modelTriggerRef}
|
||||||
type="button"
|
type="button"
|
||||||
|
|||||||
@@ -386,13 +386,13 @@ function mockMobileViewport() {
|
|||||||
|
|
||||||
const QUICK_ENTRY_ACTION_BUTTONS = [
|
const QUICK_ENTRY_ACTION_BUTTONS = [
|
||||||
["Save", "quick-entry-save"],
|
["Save", "quick-entry-save"],
|
||||||
|
["Attach", "quick-entry-attach"],
|
||||||
["Fast", "quick-entry-fast-toggle"],
|
["Fast", "quick-entry-fast-toggle"],
|
||||||
["GitHub", "quick-entry-github-toggle"],
|
["GitHub", "quick-entry-github-toggle"],
|
||||||
["Priority", "quick-entry-priority-button"],
|
["Priority", "quick-entry-priority-button"],
|
||||||
["Subtask", "subtask-button"],
|
["Subtask", "subtask-button"],
|
||||||
["Refine", "refine-button"],
|
["Refine", "refine-button"],
|
||||||
["Deps", "quick-entry-deps"],
|
["Deps", "quick-entry-deps"],
|
||||||
["Attach", "quick-entry-attach"],
|
|
||||||
["Models", "quick-entry-models"],
|
["Models", "quick-entry-models"],
|
||||||
["Node", "quick-entry-node-button"],
|
["Node", "quick-entry-node-button"],
|
||||||
["Agent", "quick-entry-agent-button"],
|
["Agent", "quick-entry-agent-button"],
|
||||||
@@ -823,11 +823,13 @@ describe("QuickEntryBox", () => {
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
it("Save button is the first action button in DOM order", () => {
|
it("places Attach immediately after Save in DOM order", () => {
|
||||||
renderQuickEntryBox({});
|
renderQuickEntryBox({});
|
||||||
expandQuickEntry();
|
expandQuickEntry();
|
||||||
|
|
||||||
expect(getActionButtonTestIdsInDomOrder()[0]).toBe("quick-entry-save");
|
const actionButtonTestIds = getActionButtonTestIdsInDomOrder();
|
||||||
|
expect(actionButtonTestIds.slice(0, 2)).toEqual(["quick-entry-save", "quick-entry-attach"]);
|
||||||
|
expect(actionButtonTestIds.indexOf("quick-entry-attach")).toBe(actionButtonTestIds.indexOf("quick-entry-save") + 1);
|
||||||
});
|
});
|
||||||
|
|
||||||
it("action buttons appear in correct DOM order after reorder", () => {
|
it("action buttons appear in correct DOM order after reorder", () => {
|
||||||
|
|||||||
Reference in New Issue
Block a user