improve app version output

Author: nicktrn

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

@@ -22,16 +22,26 @@ 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;
+  buildTimestampSeonds: 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();
 
   return (
     <div
@@ -94,9 +104,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>
+        {isAdmin && buildInfo.buildTimestampSeonds && (
+          <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()}
+            </Paragraph>
+          </div>
+        )}
+        {isAdmin && 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>
+        )}
+        {isAdmin && 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,
+      buildTimestampSeonds: 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>