Enhance webapp version with build info (#2146)

* improve app version output

* set build info

* fix typo

* always show additional build info when self-hosting

* Update apps/webapp/app/routes/_app.orgs.$organizationSlug.settings/route.tsx

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* Update apps/webapp/app/components/navigation/OrganizationSettingsSideMenu.tsx

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* fix build timestamp name

---------

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

Author: nicktrn

.github/workflows/publish-webapp.yml

@@ -56,6 +56,17 @@ jobs:
 
           echo "image_tags=${image_tags}" >> "$GITHUB_OUTPUT"
 
+      - name: 📝 Set the build info
+        id: set_build_info
+        run: |
+          tag=${{ steps.get_tag.outputs.tag }}
+          if [[ "${{ steps.get_tag.outputs.is_semver }}" == true ]]; then
+            echo "BUILD_APP_VERSION=${tag}" >> "$GITHUB_OUTPUT"
+          fi
+          echo "BUILD_GIT_SHA=${{ github.sha }}" >> "$GITHUB_OUTPUT"
+          echo "BUILD_GIT_REF_NAME=${{ github.ref_name }}" >> "$GITHUB_OUTPUT"
+          echo "BUILD_TIMESTAMP_SECONDS=$(date +%s)" >> "$GITHUB_OUTPUT"
+
       - name: 🐙 Login to GitHub Container Registry
         uses: docker/login-action@v3
         with:
@@ -70,3 +81,8 @@ jobs:
           platforms: linux/amd64,linux/arm64
           tags: ${{ steps.set_tags.outputs.image_tags }}
           push: true
+          build-args: |
+            BUILD_APP_VERSION=${{ steps.set_build_info.outputs.BUILD_APP_VERSION }}
+            BUILD_GIT_SHA=${{ steps.set_build_info.outputs.BUILD_GIT_SHA }}
+            BUILD_GIT_REF_NAME=${{ steps.set_build_info.outputs.BUILD_GIT_REF_NAME }}
+            BUILD_TIMESTAMP_SECONDS=${{ steps.set_build_info.outputs.BUILD_TIMESTAMP_SECONDS }}

apps/webapp/app/components/navigation/OrganizationSettingsSideMenu.tsx

@@ -22,16 +22,27 @@ import { SideMenuItem } from "./SideMenuItem";
 import { useCurrentPlan } from "~/routes/_app.orgs.$organizationSlug/route";
 import { Paragraph } from "../primitives/Paragraph";
 import { Badge } from "../primitives/Badge";
+import { useHasAdminAccess } from "~/hooks/useUser";
+
+export type BuildInfo = {
+  appVersion: string | undefined;
+  packageVersion: string;
+  buildTimestampSeconds: string | undefined;
+  gitSha: string | undefined;
+  gitRefName: string | undefined;
+};
 
 export function OrganizationSettingsSideMenu({
   organization,
-  version,
+  buildInfo,
 }: {
   organization: MatchedOrganization;
-  version: string;
+  buildInfo: BuildInfo;
 }) {
   const { isManagedCloud } = useFeatures();
   const currentPlan = useCurrentPlan();
+  const isAdmin = useHasAdminAccess();
+  const showBuildInfo = isAdmin || !isManagedCloud;
 
   return (
     <div
@@ -94,9 +105,33 @@ export function OrganizationSettingsSideMenu({
         <div className="flex flex-col gap-1">
           <SideMenuHeader title="App version" />
           <Paragraph variant="extra-small" className="px-2 text-text-dimmed">
-            v{version}
+            {buildInfo.appVersion || `v${buildInfo.packageVersion}`}
           </Paragraph>
         </div>
+        {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.buildTimestampSeconds) * 1000).toISOString()}
+            </Paragraph>
+          </div>
+        )}
+        {showBuildInfo && buildInfo.gitRefName && (
+          <div className="flex flex-col gap-1">
+            <SideMenuHeader title="Git ref" />
+            <Paragraph variant="extra-small" className="px-2 text-text-dimmed">
+              {buildInfo.gitRefName}
+            </Paragraph>
+          </div>
+        )}
+        {showBuildInfo && buildInfo.gitSha && (
+          <div className="flex flex-col gap-1">
+            <SideMenuHeader title="Git sha" />
+            <Paragraph variant="extra-small" className="px-2 text-text-dimmed">
+              {buildInfo.gitSha.slice(0, 9)}
+            </Paragraph>
+          </div>
+        )}
       </div>
       <div className="flex flex-col gap-1 border-t border-grid-bright p-1">
         <HelpAndFeedback />

apps/webapp/app/routes/_app.orgs.$organizationSlug.settings/route.tsx

@@ -1,25 +1,34 @@
 import { Outlet } from "@remix-run/react";
 import { type LoaderFunctionArgs } from "@remix-run/server-runtime";
-import { VERSION } from "@trigger.dev/core";
+import { VERSION as coreVersion } from "@trigger.dev/core";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import { AppContainer, MainBody } from "~/components/layout/AppLayout";
-import { OrganizationSettingsSideMenu } from "~/components/navigation/OrganizationSettingsSideMenu";
+import {
+  type BuildInfo,
+  OrganizationSettingsSideMenu,
+} from "~/components/navigation/OrganizationSettingsSideMenu";
 import { useOrganization } from "~/hooks/useOrganizations";
 
 export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   return typedjson({
-    version: VERSION,
+    buildInfo: {
+      appVersion: process.env.BUILD_APP_VERSION,
+      packageVersion: coreVersion,
+      gitSha: process.env.BUILD_GIT_SHA,
+      gitRefName: process.env.BUILD_GIT_REF_NAME,
+      buildTimestampSeconds: process.env.BUILD_TIMESTAMP_SECONDS,
+    } satisfies BuildInfo,
   });
 };
 
 export default function Page() {
-  const { version } = useTypedLoaderData<typeof loader>();
+  const { buildInfo } = useTypedLoaderData<typeof loader>();
   const organization = useOrganization();
 
   return (
     <AppContainer>
       <div className="grid grid-cols-[14rem_1fr] overflow-hidden">
-        <OrganizationSettingsSideMenu organization={organization} version={version} />
+        <OrganizationSettingsSideMenu organization={organization} buildInfo={buildInfo} />
         <MainBody>
           <Outlet />
         </MainBody>

docker/Dockerfile

@@ -82,6 +82,16 @@ COPY --from=builder --chown=node:node /triggerdotdev/scripts ./scripts
 COPY --from=builder /usr/local/bin/goose /usr/local/bin/goose
 COPY --from=builder --chown=node:node /triggerdotdev/internal-packages/clickhouse/schema /triggerdotdev/internal-packages/clickhouse/schema
 
+# Build info
+ARG BUILD_APP_VERSION
+ARG BUILD_GIT_SHA
+ARG BUILD_GIT_REF_NAME
+ARG BUILD_TIMESTAMP_SECONDS
+ENV BUILD_APP_VERSION=${BUILD_APP_VERSION} \
+    BUILD_GIT_SHA=${BUILD_GIT_SHA} \
+    BUILD_GIT_REF_NAME=${BUILD_GIT_REF_NAME} \
+    BUILD_TIMESTAMP_SECONDS=${BUILD_TIMESTAMP_SECONDS}
+
 EXPOSE 3000
 
 USER node