Merge pull request #147 from Oxalate-Portal/add_buildinfo_functionality

Add version awareness as well as package building in GHA

.env

@@ -1,5 +1,5 @@
 VITE_APP_API_URL=http://localhost:8080/api
 VITE_APP_RECAPTCHA_SITE_KEY = "You need to generate this key from Google Recaptcha"
 VITE_APP_OXALATE_PAGE_TITLE = "Oxalate Portal"
-VITE_APP_OXALATE_COPYRIGHT_FOOTER = "© 2024 - Oxalate Portal project"
+VITE_APP_OXALATE_COPYRIGHT_FOOTER = "Oxalate Portal project © 2024"
 VITE_APP_POWERED_BY_OXALATE = "Powered by <a href="https://oxalate.io/">Oxalate Portal</a>"

.env.production

@@ -0,0 +1,5 @@
+VITE_APP_API_URL=http://localhost:8080/api
+VITE_APP_RECAPTCHA_SITE_KEY = "6LfGtFImAAAAAG9fADR3SUfA2sb0zXSYvZrFtPhT"
+VITE_APP_OXALATE_PAGE_TITLE = "Oxalate Portal"
+VITE_APP_OXALATE_COPYRIGHT_FOOTER = "Oxalate Portal project © 2024"
+VITE_APP_POWERED_BY_OXALATE = "Powered by <a href="https://oxalate.io/">Oxalate Portal</a>"

.github/workflows/ci.yaml

@@ -3,7 +3,7 @@ on:
   pull_request:
   push:
     branches:
-      - master
+      - main
 
 concurrency: build
 
@@ -17,8 +17,75 @@ jobs:
         uses: actions/setup-node@v4.0.2
         with:
           node-version: '20'
+
       - name: Test
         run: |
           npm install
           npm run build:test
-          npm run test --passWithNoTests -- --watchAll=false
+          npm run test --passWithNoTests -- --watchAll=false
+
+      - name: Coverage
+        run: |
+          npm run test:coverage
+
+      - name: Get main and base version
+        id: basemain
+        shell: bash
+        run: |
+          baseVersion=$(cat VERSION)
+          mainVersion=$(echo ${baseVersion} | cut -d '.' -f 1)
+          echo "baseVersion=${baseVersion}" >> $GITHUB_OUTPUT
+          echo "mainVersion=${mainVersion}" >> $GITHUB_OUTPUT
+
+      - name: Generate new version
+        id: newVer
+        shell: bash
+        run: |
+          git fetch --tags origin
+          currentVersion=$(git tag --list --sort=-version:refname "${baseVersion}.*" | head -n 1 || "${baseVersion}.0")
+
+          if [ -z "${currentVersion}" ]; then
+            newVersion="${baseVersion}.0"
+          else
+            runningNumber=$(echo ${currentVersion} | cut -f 3 -d '.')
+            newVersion="${baseVersion}.$((${runningNumber} + 1))"
+          fi
+          echo "The generated new version is: ${newVersion}"
+          echo "newVersion=${newVersion}" >> $GITHUB_OUTPUT
+        env:
+          baseVersion: ${{ steps.basemain.outputs.baseVersion }}
+
+      - name: Set new version
+        shell: bash
+        # Replace the default version in package.json with the new version
+        run: |
+          sed -i "s/\"version\": \".*\"/\"version\": \"${newVersion}\"/g" package.json
+        env:
+          newVersion: ${{ steps.newVer.outputs.newVersion }}
+
+      - name: Build production package
+        run: |
+          npm run build:production
+
+      - name: Upload package to GitHub
+        uses: actions/upload-artifact@v4
+        if: success()
+        with:
+          name: "oxalate-frontend-${{ steps.newVer.outputs.newVersion }}"
+          path: build/*
+          retention-days: 30
+          compression-level: 9
+          overwrite: true
+          if-no-files-found: warn
+
+      - name: Create tag
+        uses: actions/github-script@v7
+        with:
+          github-token: ${{ secrets.TAG_CREATION_TOKEN }}
+          script: |
+            github.rest.git.createRef({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              ref: 'refs/tags/${{ steps.newVer.outputs.newVersion }}',
+              sha: context.sha
+            })

.gitignore

@@ -20,10 +20,11 @@ ckeditor/node_modules
 .DS_Store
 .env.local
 .env.stage
-.env.production
 
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-*.log
+*.log
+
+src/buildInfo.json

VERSION

@@ -0,0 +1 @@
+0.9

generateBuildInfo.js

@@ -0,0 +1,55 @@
+const fs = require('fs');
+const path = require('path');
+const { execSync } = require('child_process');
+const dayjs = require("dayjs");
+
+function gitFetch() {
+    try {
+        execSync('git fetch', { stdio: 'inherit' });
+    } catch (error) {
+        console.error('Error fetching the latest changes from the repository:', error);
+        process.exit(1);
+    }
+}
+
+function getLatestTag() {
+    try {
+        return execSync('git describe --tags --abbrev=0').toString().trim();
+    } catch (error) {
+        return null;
+    }
+}
+
+function getNextVersion(currentVersion, latestTag) {
+    const [currentMajor, currentMinor] = currentVersion.split('.').map(Number);
+
+    if (latestTag) {
+        const [latestMajor, latestMinor, latestPatch] = latestTag.split('.').map(Number);
+
+        if (currentMajor === latestMajor && currentMinor === latestMinor) {
+            return `${currentMajor}.${currentMinor}.${latestPatch + 1}`;
+        }
+    }
+
+    return `${currentMajor}.${currentMinor}.0`;
+}
+
+const versionFilePath = path.resolve(__dirname, 'VERSION');
+const currentVersion = fs.readFileSync(versionFilePath, 'utf8').trim();
+
+gitFetch();
+
+const latestTag = getLatestTag();
+const nextVersion = getNextVersion(currentVersion, latestTag);
+
+const buildTime = new Date().toISOString();
+const buildTimeFormatted = dayjs(buildTime).format("YYYY.MM.DD HH:mm")
+const outputFilePath = path.resolve(__dirname, 'src/buildInfo.json');
+
+fs.writeFileSync(outputFilePath, JSON.stringify({ buildTime: buildTimeFormatted, version: nextVersion }), 'utf8');
+
+console.log("==================================================================================");
+console.log("Generating build time and version...");
+console.log(`Build time: ${buildTimeFormatted}`);
+console.log(`Next version: ${nextVersion}`);
+console.log("==================================================================================");

index.html

@@ -21,12 +21,6 @@
 <body class="bg-dark">
 <noscript>You need to enable JavaScript to run this app.</noscript>
 <div id="root"></div>
-<div class="text-center mt-4">
-    <p class="text-white-50">
-        %VITE_APP_OXALATE_COPYRIGHT_FOOTER%<br/>
-        %VITE_APP_POWERED_BY_OXALATE%
-    </p>
-    <script type="module" src="/src/index.tsx"></script>
-</div>
+<script type="module" src="/src/index.tsx"></script>
 </body>
 </html>

package.json

@@ -42,10 +42,12 @@
     "web-vitals": "^3.5.1"
   },
   "scripts": {
+    "prebuild": "node generateBuildInfo.js",
+    "prestart": "node generateBuildInfo.js",
     "start": "env-cmd -f .env.local vite",
-    "build:test": "tsc && vite build",
-    "build:stage": "tsc && env-cmd -f .env.stage vite build",
-    "build:production": "tsc && env-cmd -f .env.production vite build",
+    "build:test": "npm run prebuild && vite build",
+    "build:stage": "npm run prebuild && env-cmd -f .env.stage vite build",
+    "build:production": "npm run prebuild && env-cmd -f .env.production vite build",
     "test": "jest",
     "test:watch": "jest --watch",
     "test:coverage": "jest --coverage .",

src/App.tsx

@@ -6,7 +6,7 @@ import i18next from "i18next";
 import {Navigate, Route, Routes} from "react-router-dom";
 import {Register, Registration} from "./components/Register";
 import {LostPassword, NewPassword, Password, ShowUser, User} from "./components/User";
-import {Home, LoginWithCaptcha, NavigationBar} from "./components/main";
+import {Home, LoginWithCaptcha, NavigationBar, OxalateFooter} from "./components/main";
 import {EditPage, EditPageGroup, Page, PageGroups, Pages} from "./components/Page";
 import {AdminMain, AdminOrgUser, AdminOrgUsers, AuditEvents, DownloadData} from "./components/Administration";
 import {DiveEvent, DiveEvents, EditDiveEvent, PastDiveEvents, SetDives, ShowDiveEvent} from "./components/DiveEvent";
@@ -70,6 +70,7 @@ function App() {
                             <Route path="/users/certificates/:paramId" element={<PrivateRoute><EditCertificate/></PrivateRoute>}/>
                             <Route path="/users/profile" element={<PrivateRoute><User/></PrivateRoute>}/>
                         </Routes>
+                        <OxalateFooter/>
                     </ConfigProvider>
                 </div>
                 <AuthVerify logOut={logoutUser}/>

src/components/main/OxalateFooter.tsx

@@ -0,0 +1,18 @@
+import BuildInfoData from "../../buildInfo.json";
+import {Footer} from "antd/es/layout/layout";
+import {BuildInfo} from "../../models";
+
+function OxalateFooter() {
+    const buildInfo: BuildInfo = BuildInfoData;
+
+    return (
+            <Footer style={{textAlign: "center"}}
+                    dangerouslySetInnerHTML={{
+                        __html: import.meta.env.VITE_APP_OXALATE_COPYRIGHT_FOOTER + "<br/>"
+                                + "v" + buildInfo.version + " " + " built: " + buildInfo.buildTime + "<br/>"
+                                + import.meta.env.VITE_APP_POWERED_BY_OXALATE
+                    }}/>
+    );
+}
+
+export {OxalateFooter};

src/components/main/index.ts

@@ -3,4 +3,5 @@ export {Home} from "./Home";
 export {Login} from "./Login";
 export {LoginWithCaptcha} from "./LoginWithCaptcha";
 export {NavigationBar} from "./NavigationBar";
+export {OxalateFooter} from "./OxalateFooter";
 export {SubmitResult} from "./SubmitResult";

src/models/BuildInfo.ts

@@ -0,0 +1,4 @@
+export interface BuildInfo {
+    buildTime: string;
+    version: string;
+}

src/models/index.ts

@@ -5,6 +5,7 @@ export type {AbstractPageGroup} from "./AbstractPageGroup";
 export type {AbstractPage} from "./AbstractPage";
 export type {AbstractUser} from "./AbstractUser";
 // Interfaces
+export type {BuildInfo} from "./BuildInfo";
 export type {CertificateVO} from "./CertificateVO";
 export type {DiveCountItemVO} from "./DiveCountItemVO";
 export type {DiveEventVO} from "./DiveEventVO";