fix(frontend): align feedback action button

This commit is contained in:
swyam sharma 2026-07-09 22:02:22 +05:30
parent b1df36514c
commit 5602200dce
2 changed files with 14 additions and 6 deletions

View File

@ -106,6 +106,12 @@ export function ReportProblemDialog({ open, onOpenChange }: ReportProblemDialogP
}
};
const selectOutput = (output: ReportProblemOutput) => {
setSelectedOutput(output);
setCopiedOutput(null);
setCopyError(null);
};
return (
<Dialog.Root open={open} onOpenChange={onOpenChange}>
<Dialog.Portal>
@ -175,15 +181,15 @@ export function ReportProblemDialog({ open, onOpenChange }: ReportProblemDialogP
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="start" className="w-[var(--radix-dropdown-menu-trigger-width)]">
<DropdownMenuItem onSelect={() => setSelectedOutput("github")}>
<DropdownMenuItem onSelect={() => selectOutput("github")}>
<GitPullRequest aria-hidden="true" />
GitHub issue
</DropdownMenuItem>
<DropdownMenuItem onSelect={() => setSelectedOutput("discord")}>
<DropdownMenuItem onSelect={() => selectOutput("discord")}>
<MessageSquare aria-hidden="true" />
Discord
</DropdownMenuItem>
<DropdownMenuItem onSelect={() => setSelectedOutput("email")}>
<DropdownMenuItem onSelect={() => selectOutput("email")}>
<Mail aria-hidden="true" />
Email support
</DropdownMenuItem>
@ -201,8 +207,8 @@ export function ReportProblemDialog({ open, onOpenChange }: ReportProblemDialogP
)}
</div>
<div className="flex items-center justify-end border-t border-border px-5 py-4">
<Button type="button" onClick={() => void copyDraft()}>
<div className="border-t border-border px-5 py-4">
<Button type="button" className="w-full" onClick={() => void copyDraft()}>
<Send className="size-3.5" aria-hidden="true" />
{OUTPUT_ACTION_LABELS[selectedOutput]}
</Button>

View File

@ -508,16 +508,18 @@ describe("Sidebar", () => {
await user.click(screen.getByRole("button", { name: "Report destination" }));
await user.click(await screen.findByRole("menuitem", { name: "Discord" }));
expect(screen.getByRole("button", { name: "Copy and open Discord" })).toBeInTheDocument();
expect(screen.getByRole("button", { name: "Copy and open Discord" })).toHaveClass("w-full");
expect(screen.queryByRole("button", { name: "Copy and open email" })).not.toBeInTheDocument();
await user.click(screen.getByRole("button", { name: "Copy and open Discord" }));
await waitFor(() => expect(writeText).toHaveBeenCalledTimes(1));
expect(writeText.mock.calls[0][0]).toContain("**AO feedback**");
expect(screen.getByText("Discord draft copied.")).toBeInTheDocument();
await user.click(screen.getByRole("button", { name: "Report destination" }));
await user.click(await screen.findByRole("menuitem", { name: "Email support" }));
expect(screen.getByRole("button", { name: "Copy and open email" })).toBeInTheDocument();
expect(screen.queryByRole("button", { name: "Copy and open Discord" })).not.toBeInTheDocument();
expect(screen.queryByText("Discord draft copied.")).not.toBeInTheDocument();
await user.click(screen.getByRole("button", { name: "Copy and open email" }));
await waitFor(() => expect(writeText).toHaveBeenCalledTimes(2));