FN-7171: fix Create PR commit preview layout
Keep the Create PR preview readable by aligning commit rows to their DOM order. - Split commit-row and file-row grid templates so commit SHAs use a fixed content column. - Prevent short commit SHAs from wrapping while leaving subjects in the flexible column. - Add tests covering commit preview row ordering, empty commit hints, and file-row layout. - Add a patch changeset for the published Fusion package. Files changed: .changeset/fn-7171-pr-preview-commit-layout.md | 7 +++ .../dashboard/app/components/PrCreateModal.css | 14 +++++- .../components/__tests__/PrCreateModal.test.tsx | 55 ++++++++++++++++++++++ 3 files changed, 75 insertions(+), 1 deletion(-) Fusion-Task-Id: FN-7171 Fusion-Task-Lineage: e0fe2ac5-1087-4a54-b60e-673c7b980780 Co-authored-by: Fusion (runfusion.ai) <noreply@runfusion.ai>
This commit is contained in:
7
.changeset/fn-7171-pr-preview-commit-layout.md
Normal file
7
.changeset/fn-7171-pr-preview-commit-layout.md
Normal file
@@ -0,0 +1,7 @@
|
||||
---
|
||||
"@runfusion/fusion": patch
|
||||
---
|
||||
|
||||
summary: Keep Create PR preview commit SHAs readable on one line.
|
||||
category: fix
|
||||
dev: Corrects the dashboard Create Pull Request commit-row grid and guards the DOM contract in tests.
|
||||
@@ -218,15 +218,27 @@
|
||||
.pr-create-modal__commit-row,
|
||||
.pr-create-modal__file-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto auto;
|
||||
gap: var(--space-sm);
|
||||
align-items: center;
|
||||
padding: var(--space-xs) 0;
|
||||
border-bottom: var(--btn-border-width) solid color-mix(in srgb, var(--border) 70%, transparent);
|
||||
}
|
||||
|
||||
/*
|
||||
FNXC:CreatePrModal 2026-06-27-22:35:
|
||||
Commit preview rows render DOM order as SHA, subject, author. The grid must mirror that order so the short SHA keeps content width, the subject owns the flexible column, and nowrap prevents overflow-wrap:anywhere from turning the SHA vertical.
|
||||
*/
|
||||
.pr-create-modal__commit-row {
|
||||
grid-template-columns: auto 1fr auto;
|
||||
}
|
||||
|
||||
.pr-create-modal__file-row {
|
||||
grid-template-columns: 1fr auto auto;
|
||||
}
|
||||
|
||||
.pr-create-modal__commit-row code {
|
||||
color: var(--text-muted);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.pr-create-modal__commit-row > *,
|
||||
|
||||
@@ -169,6 +169,61 @@ describe("PrCreateModal", () => {
|
||||
expect(screen.getByText(/using/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders commit preview rows in SHA, subject, author order", async () => {
|
||||
const commits = [
|
||||
{
|
||||
sha: "1234567890abcdef1234567890abcdef12345678",
|
||||
subject: "feat: add a very long subject that should use the flexible column instead of forcing the short SHA to wrap",
|
||||
author: "A very long author name that remains in the trailing column",
|
||||
},
|
||||
{
|
||||
sha: "abcdef0123456789abcdef0123456789abcdef01",
|
||||
subject: "fix: keep another subject readable",
|
||||
author: "dev",
|
||||
},
|
||||
];
|
||||
mocks.fetchPrPreflight.mockResolvedValueOnce({
|
||||
...preflight,
|
||||
commits,
|
||||
changedFiles: [
|
||||
{ path: "src/very/long/path/that/should/still/use/the/file-row-flex-column.ts", additions: 10, deletions: 2, status: "modified" as const },
|
||||
],
|
||||
});
|
||||
|
||||
renderModal();
|
||||
expect(await screen.findByDisplayValue("AI title")).toBeInTheDocument();
|
||||
|
||||
const rows = Array.from(document.querySelectorAll<HTMLDivElement>(".pr-create-modal__commit-row"));
|
||||
expect(rows).toHaveLength(commits.length);
|
||||
rows.forEach((row, index) => {
|
||||
const codeCells = row.querySelectorAll("code");
|
||||
expect(codeCells).toHaveLength(1);
|
||||
expect(codeCells[0]).toHaveTextContent(commits[index]!.sha.slice(0, 7));
|
||||
expect(row.children).toHaveLength(3);
|
||||
expect(row.children[0]).toBe(codeCells[0]);
|
||||
expect(row.children[0]).toHaveTextContent(commits[index]!.sha.slice(0, 7));
|
||||
expect(row.children[1]).toHaveTextContent(commits[index]!.subject);
|
||||
expect(row.children[2]).toHaveTextContent(commits[index]!.author);
|
||||
});
|
||||
|
||||
const fileRow = document.querySelector(".pr-create-modal__file-row");
|
||||
expect(fileRow?.children[0]).toHaveTextContent("src/very/long/path/that/should/still/use/the/file-row-flex-column.ts");
|
||||
expect(fileRow?.children[1]).toHaveTextContent("+10 / −2");
|
||||
expect(fileRow?.children[2]).toHaveTextContent("modified");
|
||||
});
|
||||
|
||||
it("renders empty commit hint without commit rows", async () => {
|
||||
mocks.fetchPrPreflight.mockResolvedValueOnce({
|
||||
...preflight,
|
||||
commitsPresent: false,
|
||||
commits: [],
|
||||
});
|
||||
|
||||
renderModal();
|
||||
expect(await screen.findByText("No commits found.")).toBeInTheDocument();
|
||||
expect(document.querySelectorAll(".pr-create-modal__commit-row")).toHaveLength(0);
|
||||
});
|
||||
|
||||
it("renders preflight and options before metadata resolves", async () => {
|
||||
const metadataDeferred = createDeferred<typeof metadata>();
|
||||
mocks.generatePrMetadata.mockReturnValueOnce(metadataDeferred.promise);
|
||||
|
||||
Reference in New Issue
Block a user