Fix 609 app version not displayed (#613)

* Fix new version fetching, dom structure and styling of the debug dialog

* Also pass git sha to prod container

Author: krokosik

.github/workflows/publish.yaml

@@ -60,6 +60,7 @@ jobs:
           docker build \
             --progress=plain \
             --build-arg APP_VERSION="$APP_VERSION" \
+            --build-arg GIT_SHA="$GIT_SHA" \
             -t "ossapps/splitpro-$BUILD_PLATFORM:$CHANNEL" \
             -t "ossapps/splitpro-$BUILD_PLATFORM:$GIT_SHA" \
             -t "ossapps/splitpro-$BUILD_PLATFORM:$APP_VERSION" \

Dockerfile

@@ -23,6 +23,7 @@ RUN pnpm build
 FROM node:${NODE_VERSION}-alpine${ALPINE_VERSION} AS release
 
 ARG APP_VERSION
+ARG GIT_SHA
 
 ENV NODE_ENV=production
 ENV DOCKER_OUTPUT=1
@@ -41,6 +42,7 @@ COPY --from=base /app/prisma/migrations ./prisma/migrations
 # set this so it throws error where starting server
 ENV SKIP_ENV_VALIDATION="false"
 ENV APP_VERSION=${APP_VERSION}
+ENV GIT_SHA=${GIT_SHA}
 
 COPY ./start.sh ./start.sh
 

src/components/Account/DebugInfo.tsx

@@ -13,11 +13,9 @@ import {
 } from '../ui/alert-dialog';
 import { toast } from 'sonner';
 import { env } from '~/env';
+import { cn } from '~/lib/utils';
 
-export const DebugInfo: React.FC<React.PropsWithChildren<{ gitRevision: string | null }>> = ({
-  children,
-  gitRevision,
-}) => {
+export const DebugInfo: React.FC<React.PropsWithChildren> = ({ children }) => {
   const { t } = useTranslation('common');
   const [newVersion, setNewVersion] = React.useState<string | null>(null);
 
@@ -37,16 +35,16 @@ export const DebugInfo: React.FC<React.PropsWithChildren<{ gitRevision: string |
       }
     };
 
-    if (process.env.NEXT_PUBLIC_VERSION) {
+    if (env.NEXT_PUBLIC_VERSION) {
       void fetchLatestVersion();
     }
   }, []);
 
   const copyToClipboard = useCallback(() => {
     // Copy to clipboard
     const debugInfo = [`UserAgent: ${navigator.userAgent}`];
-    if (gitRevision) {
-      debugInfo.push(`${t('account.debug_info_details.git')}: ${gitRevision}`);
+    if (env.NEXT_PUBLIC_GIT_SHA) {
+      debugInfo.push(`${t('account.debug_info_details.git')}: ${env.NEXT_PUBLIC_GIT_SHA}`);
     }
     if (env.NEXT_PUBLIC_VERSION) {
       debugInfo.push(`${t('account.debug_info_details.version')} ${env.NEXT_PUBLIC_VERSION}`);
@@ -57,33 +55,32 @@ export const DebugInfo: React.FC<React.PropsWithChildren<{ gitRevision: string |
       toast.error(t('account.debug_info_details.copy_failed'));
       console.error('Failed to copy debug info:', error);
     }
-  }, [gitRevision, t]);
+  }, [t]);
 
   return (
     <AlertDialog>
-      <AlertDialogTrigger>{children}</AlertDialogTrigger>
+      <AlertDialogTrigger asChild>{children}</AlertDialogTrigger>
       <AlertDialogContent>
         <AlertDialogHeader>
           <AlertDialogTitle>{t('account.debug_info_details.title')}</AlertDialogTitle>
           <AlertDialogDescription>
-            <p>{t('account.debug_info_details.description')}</p>
-            <pre className="mt-4 text-wrap">
-              {t('account.debug_info_details.user_agent')}:
-              <br />
-              {navigator.userAgent}
-            </pre>
-            {gitRevision && (
-              <pre className="text-wrap">
-                {t('account.debug_info_details.git')}:<br />
-                {gitRevision}
-              </pre>
-            )}
-            {env.NEXT_PUBLIC_VERSION && (
-              <pre className="text-wrap">
-                {t('account.debug_info_details.version')}:<br />
-                {env.NEXT_PUBLIC_VERSION}
-              </pre>
-            )}
+            {t('account.debug_info_details.description')}
+            <DebugInfoRow
+              label={t('account.debug_info_details.user_agent')}
+              value={navigator.userAgent}
+              className="mt-4"
+            />
+
+            <DebugInfoRow
+              label={t('account.debug_info_details.git')}
+              value={env.NEXT_PUBLIC_GIT_SHA}
+              className="mt-4"
+            />
+            <DebugInfoRow
+              label={t('account.debug_info_details.version')}
+              value={env.NEXT_PUBLIC_VERSION}
+              className="mt-4"
+            />
             {newVersion && env.NEXT_PUBLIC_VERSION && newVersion !== env.NEXT_PUBLIC_VERSION ? (
               <p className="mt-4 text-sm text-yellow-600">
                 {t('account.debug_info_details.new_version_available')}: {newVersion}
@@ -99,3 +96,23 @@ export const DebugInfo: React.FC<React.PropsWithChildren<{ gitRevision: string |
     </AlertDialog>
   );
 };
+
+const Label: React.FC<React.PropsWithChildren<{ className?: string }>> = ({
+  children,
+  className,
+}) => <span className={cn('text-sm text-white', className)}>{children}</span>;
+
+const Value: React.FC<React.PropsWithChildren<{ className?: string }>> = ({
+  children,
+  className,
+}) => <span className={cn('text-primary text-sm', className)}>{children}</span>;
+
+export const DebugInfoRow: React.FC<
+  React.PropsWithChildren<{ label: string; value?: string | null; className?: string }>
+> = ({ label, value, className }) =>
+  value ? (
+    <span className={cn('flex flex-col', className)}>
+      <Label>{label}</Label>
+      <Value>{value}</Value>
+    </span>
+  ) : null;

src/env.ts

@@ -1,4 +1,5 @@
 import { createEnv } from '@t3-oss/env-nextjs';
+import { execSync } from 'node:child_process';
 import { z } from 'zod';
 
 export const env = createEnv({
@@ -84,6 +85,7 @@ export const env = createEnv({
     NEXT_PUBLIC_IS_CLOUD_DEPLOYMENT: z.boolean().default(false),
     NEXT_PUBLIC_UPLOAD_MAX_FILE_SIZE_MB: z.coerce.number().int().positive().default(10),
     NEXT_PUBLIC_VERSION: z.string().optional(),
+    NEXT_PUBLIC_GIT_SHA: z.string().optional(),
   },
 
   /**
@@ -151,6 +153,8 @@ export const env = createEnv({
       ? Number(process.env.UPLOAD_MAX_FILE_SIZE_MB)
       : 10,
     NEXT_PUBLIC_VERSION: process.env.APP_VERSION,
+    NEXT_PUBLIC_GIT_SHA:
+      process.env.GIT_SHA ?? execSync('git rev-parse HEAD', { encoding: 'utf-8' }).trim(),
   },
   /**
    * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially

src/pages/account.tsx

@@ -1,7 +1,6 @@
 import { SiGithub, SiX } from '@icons-pack/react-simple-icons';
 import {
   BadgeInfo,
-  BugOff,
   CreditCard,
   Download,
   DownloadCloud,
@@ -37,14 +36,12 @@ import {
 import { api } from '~/utils/api';
 import type { NextPageWithUser } from '~/types';
 import { DebugInfo } from '~/components/Account/DebugInfo';
-import { execSync } from 'node:child_process';
 
 const AccountPage: NextPageWithUser<{
   feedBackPossible: boolean;
   bankConnectionEnabled: boolean;
   bankConnection: string;
-  gitRevision: string | null;
-}> = ({ feedBackPossible, bankConnectionEnabled, bankConnection, gitRevision }) => {
+}> = ({ feedBackPossible, bankConnectionEnabled, bankConnection }) => {
   const { t } = useTranslation();
   const router = useRouter();
   const userQuery = api.user.me.useQuery();
@@ -177,7 +174,7 @@ const AccountPage: NextPageWithUser<{
             {t('account.import_from_splitwise')}
           </AccountButton>
 
-          <DebugInfo gitRevision={gitRevision}>
+          <DebugInfo>
             <AccountButton>
               <BadgeInfo className="size-5 text-red-700" />
               {t('account.debug_info')}
@@ -201,21 +198,13 @@ const AccountPage: NextPageWithUser<{
 
 AccountPage.auth = true;
 
-export const getServerSideProps: GetServerSideProps = async (context) => {
-  let gitRevision = null;
-  try {
-    gitRevision = execSync('git rev-parse HEAD', { encoding: 'utf-8' }).trim();
-  } catch {}
-
-  return {
-    props: {
-      feedbackPossible: Boolean(env.FEEDBACK_EMAIL),
-      bankConnectionEnabled: Boolean(isBankConnectionConfigured()),
-      bankConnection: whichBankConnectionConfigured(),
-      gitRevision,
-      ...(await customServerSideTranslations(context.locale, ['common'])),
-    },
-  };
-};
+export const getServerSideProps: GetServerSideProps = async (context) => ({
+  props: {
+    feedbackPossible: Boolean(env.FEEDBACK_EMAIL),
+    bankConnectionEnabled: Boolean(isBankConnectionConfigured()),
+    bankConnection: whichBankConnectionConfigured(),
+    ...(await customServerSideTranslations(context.locale, ['common'])),
+  },
+});
 
 export default AccountPage;