From 58adb46323eccdf2da63ed69e6fc0ffa7eb684ce Mon Sep 17 00:00:00 2001
From: monoid <qaswedfr55@gmail.com>
Date: Sun, 13 Oct 2024 01:40:01 +0900
Subject: [PATCH] feat: Add BuildInfoCard component

This commit adds a new component called BuildInfoCard. The BuildInfoCard component displays information about the build, including the Git branch, Git hash, build time, and build version. It is used in the SettingPage component.

The packages/client/vite.config.ts file is modified to define environment variables for the build information. The __BUILD_TIME__, __BUILD_VERSION__, __GIT_BRANCH__, and __GIT_HASH__ variables are defined using functions that retrieve the current build time, build version, Git branch, and Git hash respectively.

This commit introduces new functionality and improves the user experience by providing build information in the application.
---
 .../client/src/components/BuildInfoCard.tsx   | 45 +++++++++++++++++++
 packages/client/src/page/settingPage.tsx      |  4 +-
 packages/client/src/util/env.ts               | 13 ++++++
 packages/client/vite.config.ts                | 30 +++++++++++++
 4 files changed, 91 insertions(+), 1 deletion(-)
 create mode 100644 packages/client/src/components/BuildInfoCard.tsx
 create mode 100644 packages/client/src/util/env.ts

diff --git a/packages/client/src/components/BuildInfoCard.tsx b/packages/client/src/components/BuildInfoCard.tsx
new file mode 100644
index 0000000..7410357
--- /dev/null
+++ b/packages/client/src/components/BuildInfoCard.tsx
@@ -0,0 +1,45 @@
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { getBuildInfo } from "../util/env";
+import { Clock, GitBranch, GitCommit, Tag } from "lucide-react";
+
+export default function BuildInfoCard() {
+  const buildInfo = getBuildInfo();
+
+  return (
+    <Card className="w-full">
+      <CardHeader>
+        <CardTitle className="text-2xl font-bold">Build Information</CardTitle>
+      </CardHeader>
+      <CardContent className="grid gap-4">
+        <div className="flex items-center space-x-4">
+          <GitBranch className="h-5 w-5 text-muted-foreground" />
+          <div>
+            <p className="text-sm font-medium leading-none">Git Branch</p>
+            <p className="text-sm text-muted-foreground">{buildInfo.gitBranch}</p>
+          </div>
+        </div>
+        <div className="flex items-center space-x-4">
+          <GitCommit className="h-5 w-5 text-muted-foreground" />
+          <div>
+            <p className="text-sm font-medium leading-none">Git Hash</p>
+            <p className="text-sm text-muted-foreground">{buildInfo.gitHash}</p>
+          </div>
+        </div>
+        <div className="flex items-center space-x-4">
+          <Clock className="h-5 w-5 text-muted-foreground" />
+          <div>
+            <p className="text-sm font-medium leading-none">Build Time</p>
+            <p className="text-sm text-muted-foreground">{buildInfo.buildTime}</p>
+          </div>
+        </div>
+        <div className="flex items-center space-x-4">
+          <Tag className="h-5 w-5 text-muted-foreground" />
+          <div>
+            <p className="text-sm font-medium leading-none">Build Version</p>
+            <p className="text-sm text-muted-foreground">{buildInfo.buildVersion}</p>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
\ No newline at end of file
diff --git a/packages/client/src/page/settingPage.tsx b/packages/client/src/page/settingPage.tsx
index ef5deac..c66cdeb 100644
--- a/packages/client/src/page/settingPage.tsx
+++ b/packages/client/src/page/settingPage.tsx
@@ -2,6 +2,7 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { type TernaryDarkMode, useTernaryDarkMode, useMediaQuery } from "usehooks-ts";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import { Label } from "@/components/ui/label";
+import BuildInfoCard from "@/components/BuildInfoCard";
 
 function LightModeView() {
     return <div className="items-center rounded-md border-2 border-muted p-1 hover:border-accent">
@@ -46,7 +47,7 @@ export function SettingPage() {
     const isSystemDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
 
     return (
-        <div className="p-4">
+        <div className="p-4 space-y-2">
             <Card>
                 <CardHeader>
                     <CardTitle className="text-2xl">Settings</CardTitle>
@@ -85,6 +86,7 @@ export function SettingPage() {
                     </div>
                 </CardContent>
             </Card>
+            <BuildInfoCard />
         </div>
     )
 }
diff --git a/packages/client/src/util/env.ts b/packages/client/src/util/env.ts
new file mode 100644
index 0000000..87d7be0
--- /dev/null
+++ b/packages/client/src/util/env.ts
@@ -0,0 +1,13 @@
+declare const __GIT_BRANCH__: string;
+declare const __GIT_HASH__: string;
+declare const __BUILD_TIME__: string;
+declare const __BUILD_VERSION__: string;
+
+export function getBuildInfo() {
+  return {
+    gitBranch: __GIT_BRANCH__,
+    gitHash: __GIT_HASH__,
+    buildTime: __BUILD_TIME__,
+    buildVersion: __BUILD_VERSION__,
+  };
+}
\ No newline at end of file
diff --git a/packages/client/vite.config.ts b/packages/client/vite.config.ts
index 327a9e7..e2a2df3 100644
--- a/packages/client/vite.config.ts
+++ b/packages/client/vite.config.ts
@@ -2,11 +2,41 @@ import { defineConfig, loadEnv } from 'vite'
 import path from 'node:path'
 import react from '@vitejs/plugin-react-swc'
 
+import { execSync } from "child_process";
+
+function getCurrentGitHash(): string {
+  const gitHash = execSync("git rev-parse HEAD")
+    .toString()
+    .trim();
+  return gitHash;
+}
+
+function getBuildTime(): string {
+  return new Date().toISOString();
+}
+
+function getBuildVersion(): string {
+  return process.env.BUILD_VERSION ?? getCurrentGitHash();
+}
+
+function getCurrentGitBranch(): string {
+  const gitBranch = execSync("git rev-parse --abbrev-ref HEAD")
+    .toString()
+    .trim();
+  return gitBranch;
+}
+
 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => {
   const env = loadEnv(mode, process.cwd(), "");
   return {
   plugins: [react()],
+  define: {
+    __BUILD_TIME__: `"${getBuildTime()}"`,
+    __BUILD_VERSION__: `"${getBuildVersion()}"`,
+    __GIT_BRANCH__: `"${getCurrentGitBranch()}"`,
+    __GIT_HASH__: `"${getCurrentGitHash()}"`,
+  },
   resolve: {
     alias: {
       '@': path.resolve(__dirname, './src'),