Skip to content

builds: add a files changed tab to the build detail page#744

Draft
ericholscher wants to merge 13 commits into
mainfrom
claude/add-files-changed-tab-Ww4dF
Draft

builds: add a files changed tab to the build detail page#744
ericholscher wants to merge 13 commits into
mainfrom
claude/add-files-changed-tab-Ww4dF

Conversation

@ericholscher
Copy link
Copy Markdown
Member

@ericholscher ericholscher commented May 22, 2026

Summary

Adds a "Files changed" tab to the build detail page, next to the build output. It shows the file tree diff for a build — the documentation pages added, modified, or deleted — as a flat list with a status icon per row and a summary count.

  • Appears for both pull request builds and version builds whenever a diff is available, with context-aware wording ("Comparing this pull request against latest" vs. "Comparing this build against the previous build").
  • Pull request builds also show a pull request info card. The number, link, and Open/Closed state use real data; the title, author, and branch names are demo placeholders — Read the Docs does not store that metadata yet (see the comment in build_files_changed.html).
  • Tab switching reuses the existing Knockout view (BuildDetailView).

Depends on the backend that supplies the files_changed_diff context: readthedocs/readthedocs.org#13060.

Test plan

  • npm run build — assets rebuilt; prettier and djlint clean
  • Verify the tab on a PR build and a version build in a full environment

This pull request was generated by an AI agent (Claude Code).

claude added 5 commits May 21, 2026 10:48
Add a "Files changed" tab next to the build output that shows the file
tree diff for a build: the documentation pages added, modified, or
deleted. It appears for both pull request builds and version builds when
a diff is available, with context-aware comparison wording.

https://claude.ai/code/session_01TBAfbmqA3Gy3ejeYkyHV7q
Render the file tree diff as a single flat list of changed pages with a
status icon per row, under a summary header, matching the build overview
mockup.

https://claude.ai/code/session_01TBAfbmqA3Gy3ejeYkyHV7q
Show a pull request info card above the diff on pull request builds.
The pull request number and link use real data; the title, state,
author, and branches are demo placeholders since Read the Docs does
not store that metadata yet.

https://claude.ai/code/session_01TBAfbmqA3Gy3ejeYkyHV7q
The pull request info card now reads Version.state for the Open/Closed
badge instead of a demo placeholder. Title, author, and branch names
remain demo data.

https://claude.ai/code/session_01TBAfbmqA3Gy3ejeYkyHV7q
Drop the unused wrapper element and icon title attributes, and rename
the tab-switch method for symmetry.

https://claude.ai/code/session_01TBAfbmqA3Gy3ejeYkyHV7q
claude added 8 commits May 22, 2026 10:25
Use `load blocktrans trans from i18n` instead of a wildcard load, which
djlint flags (T901).

https://claude.ai/code/session_01TBAfbmqA3Gy3ejeYkyHV7q
When a build has a file tree diff, open the build detail page on the
files changed tab instead of the output. Also give the tab a valid
icon (fa-code-compare).

https://claude.ai/code/session_01TBAfbmqA3Gy3ejeYkyHV7q
Use Fomantic's horizontal label variation, which has smaller vertical
padding, so the Open/Closed badge fits the pull request card title line.

https://claude.ai/code/session_01TBAfbmqA3Gy3ejeYkyHV7q
Use a Fomantic header component for the pull request card. Fomantic
vertically centers labels inside a header (.ui.header .ui.label), so the
Open/Closed badge aligns with the title instead of sitting low.

https://claude.ai/code/session_01TBAfbmqA3Gy3ejeYkyHV7q
Drop the demo title, author, and branch placeholders. The card now
shows only what Read the Docs stores: the pull request number, link,
and state.

https://claude.ai/code/session_01TBAfbmqA3Gy3ejeYkyHV7q
Make the state badge a direct child of the Fomantic header. Fomantic
only applies its label-centering nudge (.ui.header > .ui.label) to
direct children, so the badge now sits centered on the title line.

https://claude.ai/code/session_01TBAfbmqA3Gy3ejeYkyHV7q
Explain that the state badge must stay a direct child of the header for
Fomantic to vertically center it.

https://claude.ai/code/session_01TBAfbmqA3Gy3ejeYkyHV7q
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants