Enhance webapp version with build info #2146
Conversation
|
WalkthroughThis change introduces enhanced build metadata handling across the web application's build and deployment pipeline. The GitHub Actions workflow now sets and passes build metadata—such as version, commit SHA, reference name, and build timestamp—as build arguments to the Docker build process. The Dockerfile is updated to receive these arguments and expose them as environment variables in the final container. In the application code, a new 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
⏰ Context from checks skipped due to timeout of 90000ms (5)
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
apps/webapp/app/components/navigation/OrganizationSettingsSideMenu.tsx (1)
111-134: Optimize date conversion and fix field name reference.The conditional rendering and data formatting look good, but there are two improvements needed.
- Fix the field name reference to match the corrected type:
- {showBuildInfo && buildInfo.buildTimestampSeonds && ( + {showBuildInfo && buildInfo.buildTimestampSeconds && ( <div className="flex flex-col gap-1"> <SideMenuHeader title="Build timestamp" /> <Paragraph variant="extra-small" className="px-2 text-text-dimmed"> - {new Date(Number(buildInfo.buildTimestampSeonds) * 1000).toISOString()} + {new Date(Number(buildInfo.buildTimestampSeconds) * 1000).toISOString()} </Paragraph> </div> )}
- Consider memoizing the date conversion to avoid repeated computation:
import { useMemo } from 'react'; // Inside the component: const formattedTimestamp = useMemo(() => { if (!buildInfo.buildTimestampSeconds) return null; return new Date(Number(buildInfo.buildTimestampSeconds) * 1000).toISOString(); }, [buildInfo.buildTimestampSeconds]); // Then use: {formattedTimestamp}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
.github/workflows/publish-webapp.yml(2 hunks)apps/webapp/app/components/navigation/OrganizationSettingsSideMenu.tsx(2 hunks)apps/webapp/app/routes/_app.orgs.$organizationSlug.settings/route.tsx(1 hunks)docker/Dockerfile(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (7)
- GitHub Check: units / internal / 📊 Merge Reports
- GitHub Check: units / webapp / 🧪 Unit Tests: Webapp (4, 10)
- GitHub Check: units / webapp / 🧪 Unit Tests: Webapp (6, 10)
- GitHub Check: e2e / 🧪 CLI v3 tests (windows-latest - npm)
- GitHub Check: e2e / 🧪 CLI v3 tests (windows-latest - pnpm)
- GitHub Check: typecheck / typecheck
- GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (7)
docker/Dockerfile (1)
85-93: LGTM! Build metadata integration is well-implemented.The Dockerfile correctly accepts build arguments and exposes them as environment variables in the final container. This follows Docker best practices and enables runtime access to build information.
.github/workflows/publish-webapp.yml (2)
59-68: LGTM! Build metadata collection is correctly implemented.The conditional logic for setting
BUILD_APP_VERSIONonly for semantic versions is appropriate, and the metadata collection using GitHub context variables is correct.
84-88: Build arguments properly passed to Docker.The build arguments are correctly passed to the Docker build step, ensuring build metadata flows from the workflow to the container.
apps/webapp/app/routes/_app.orgs.$organizationSlug.settings/route.tsx (2)
3-3: Good refactoring of import naming.Renaming
VERSIONtocoreVersionimproves clarity and avoids naming conflicts with the new build info structure.
25-31: Component integration looks good.The destructuring of
buildInfofrom loader data and passing it to the component is correctly implemented.apps/webapp/app/components/navigation/OrganizationSettingsSideMenu.tsx (2)
44-45: Well-designed conditional display logic.The
showBuildInfologic correctly shows detailed build information to admins or self-hosted users while hiding it from regular cloud users. This provides appropriate access control for sensitive build metadata.
108-108: Good fallback strategy for version display.The version display logic properly prioritizes
appVersionand falls back topackageVersion, ensuring a version is always shown.
apps/webapp/app/routes/_app.orgs.$organizationSlug.settings/route.tsx
Outdated
Show resolved
Hide resolved
apps/webapp/app/components/navigation/OrganizationSettingsSideMenu.tsx
Outdated
Show resolved
Hide resolved
…ute.tsx Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
…Menu.tsx Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Attach build info at deploy time and display it on the settings page. Cloud users will only see the app version, self-hosters will see the rest as well. This is very useful for debugging.