From 3232970193ea8212a8a08823088f393ee90cf2cb Mon Sep 17 00:00:00 2001
From: Anssi Juvonen <anssi.juvonen@gofore.com>
Date: Wed, 6 Nov 2024 13:23:22 +0200
Subject: [PATCH] Display build time in settings view

---
 env.d.ts                                                  | 2 ++
 package-lock.json                                         | 8 ++++----
 package.json                                              | 2 +-
 src/components/BuildTime.vue                              | 6 ++++++
 src/components/__tests__/SettingsView.spec.ts             | 8 +++++++-
 .../__tests__/__snapshots__/SettingsView.spec.ts.snap     | 3 ++-
 src/i18n/fi.json                                          | 2 +-
 src/utils/constants.ts                                    | 2 ++
 src/views/SettingsView.vue                                | 2 ++
 vite.config.ts                                            | 3 +++
 10 files changed, 30 insertions(+), 8 deletions(-)
 create mode 100644 src/components/BuildTime.vue

diff --git a/env.d.ts b/env.d.ts
index 04636e8..e410bf8 100644
--- a/env.d.ts
+++ b/env.d.ts
@@ -1,2 +1,4 @@
 /// <reference types="vite/client" />
 /// <reference types="vite-plugin-pwa/vue" />
+
+declare const __VITE_BUILD_TIME__: string;
diff --git a/package-lock.json b/package-lock.json
index 597f753..72f9edc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -34,7 +34,7 @@
         "@types/canvas-confetti": "^1.6.4",
         "@types/jsdom": "^21.1.7",
         "@types/luxon": "^3.4.2",
-        "@types/node": "^22.8.7",
+        "@types/node": "^22.9.0",
         "@vitejs/plugin-vue": "^5.1.4",
         "@vitest/coverage-istanbul": "^2.1.4",
         "@vitest/eslint-plugin": "^1.1.7",
@@ -3097,9 +3097,9 @@
       "license": "MIT"
     },
     "node_modules/@types/node": {
-      "version": "22.8.7",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.8.7.tgz",
-      "integrity": "sha512-LidcG+2UeYIWcMuMUpBKOnryBWG/rnmOHQR5apjn8myTQcx3rinFRn7DcIFhMnS0PPFSC6OafdIKEad0lj6U0Q==",
+      "version": "22.9.0",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.9.0.tgz",
+      "integrity": "sha512-vuyHg81vvWA1Z1ELfvLko2c8f34gyA0zaic0+Rllc5lbCnbSyuvb2Oxpm6TAUAC/2xZN3QGqxBNggD1nNR2AfQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
diff --git a/package.json b/package.json
index 0f719a7..e037eef 100644
--- a/package.json
+++ b/package.json
@@ -43,7 +43,7 @@
     "@types/canvas-confetti": "^1.6.4",
     "@types/jsdom": "^21.1.7",
     "@types/luxon": "^3.4.2",
-    "@types/node": "^22.8.7",
+    "@types/node": "^22.9.0",
     "@vitejs/plugin-vue": "^5.1.4",
     "@vitest/coverage-istanbul": "^2.1.4",
     "@vitest/eslint-plugin": "^1.1.7",
diff --git a/src/components/BuildTime.vue b/src/components/BuildTime.vue
new file mode 100644
index 0000000..f842fd6
--- /dev/null
+++ b/src/components/BuildTime.vue
@@ -0,0 +1,6 @@
+<script setup lang="ts">
+import {BUILD_TIME} from '@/utils/constants';
+</script>
+<template>
+  <div class="text-xs text-center">Build: {{ BUILD_TIME }}</div>
+</template>
diff --git a/src/components/__tests__/SettingsView.spec.ts b/src/components/__tests__/SettingsView.spec.ts
index e566d5e..6829db7 100644
--- a/src/components/__tests__/SettingsView.spec.ts
+++ b/src/components/__tests__/SettingsView.spec.ts
@@ -28,7 +28,13 @@ describe('SettingsView', () => {
   });
 
   it('renders', () => {
-    const wrapper = mount(SettingsView);
+    const wrapper = mount(SettingsView, {
+      global: {
+        stubs: {
+          BuildTime: true,
+        },
+      },
+    });
     expect(wrapper.html()).toMatchSnapshot();
   });
 
diff --git a/src/components/__tests__/__snapshots__/SettingsView.spec.ts.snap b/src/components/__tests__/__snapshots__/SettingsView.spec.ts.snap
index 792dd43..12cdb02 100644
--- a/src/components/__tests__/__snapshots__/SettingsView.spec.ts.snap
+++ b/src/components/__tests__/__snapshots__/SettingsView.spec.ts.snap
@@ -53,5 +53,6 @@ exports[`SettingsView > renders 1`] = `
 </div>
 <div class="flex-container flex-col justify-center"><label for="reset-button" class="label-like">Remove all data from the app</label><button data-v-24e38f3d="" class="button button--danger self-end" id="reset-button" data-test-id="reset-button"><svg data-v-24e38f3d="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
       <path d="M9,3V4H4V6H5V19A2,2 0 0,0 7,21H17A2,2 0 0,0 19,19V6H20V4H15V3H9M9,8H11V17H9V8M13,8H15V17H13V8Z" class="transition-all"></path>
-    </svg>Reset</button></div>"
+    </svg>Reset</button></div>
+<build-time-stub></build-time-stub>"
 `;
diff --git a/src/i18n/fi.json b/src/i18n/fi.json
index 5d3e99f..9c2219b 100644
--- a/src/i18n/fi.json
+++ b/src/i18n/fi.json
@@ -704,7 +704,7 @@
       "text": "Eat Your Veggies on ilmainen sovellus kasviperäisten ruoka-aineiden seuraamiseen ruokavaliossasi. Tutkimustulosten mukaan 30:n erilaisen kasviksen kuluttaminen viikoittain johtaa lukuisiin terveyshyötyihin vähemmän monipuoliseen ruokavalioon verrattuna. Avainasemassa ei siis tutkimuksen mukaan niinkään ole kulutettu määrä kuin monipuolisuus."
     },
     "categories": {
-      "title": "Mutta mansikkahan on..",
+      "title": "Mutta mansikkahan on...",
       "text": "...epähedelmä, tiedän. Tomaattikaan ei ole biologisessa mielessä vihannes, joten sovelluksessa otetaan pieniä vapauksia kategorioiden suhteen. Ilmoita silti suuret epätarkkuudet joita löydät. Voit myös ehdottaa puuttuvia vihanneksia sovellukseen lisättäväksi. Niiden pitäisi olla sellaisia, joita on kaupallisesti saatavilla maailmanlaajuisesti."
     },
     "contact": {
diff --git a/src/utils/constants.ts b/src/utils/constants.ts
index d2187a0..100da7d 100644
--- a/src/utils/constants.ts
+++ b/src/utils/constants.ts
@@ -1,6 +1,8 @@
 import type {InjectionKey, Ref} from 'vue';
 import {Category, type Locale} from './types';
 
+export const BUILD_TIME = __VITE_BUILD_TIME__;
+
 export const KEYS = {
   challenge: Symbol() as InjectionKey<Ref<string | undefined>>,
   dropdownOptions: Symbol() as InjectionKey<(active: boolean, selected: boolean) => string>,
diff --git a/src/views/SettingsView.vue b/src/views/SettingsView.vue
index b68a5cf..4718bfc 100644
--- a/src/views/SettingsView.vue
+++ b/src/views/SettingsView.vue
@@ -6,6 +6,7 @@ import {useAppStateStore} from '@/stores/appStateStore';
 import LocaleChanger from '@/components/LocaleChanger.vue';
 import ModalDialog from '@/components/ModalDialog.vue';
 import QAComponent from '@/components/QAComponent.vue';
+import BuildTime from '@/components/BuildTime.vue';
 
 const router = useRouter();
 
@@ -37,6 +38,7 @@ const reset = () => {
       >{{ $t('settings.reset.button') }}</ButtonComponent
     >
   </div>
+  <BuildTime />
   <ModalDialog v-model="resetDialogOpen" :title="$t('settings.reset.title')">
     <template #content>
       <p>{{ $t('settings.reset.text') }}</p>
diff --git a/vite.config.ts b/vite.config.ts
index ea1b160..6fd34e5 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -5,6 +5,9 @@ import vue from '@vitejs/plugin-vue';
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  define: {
+    __VITE_BUILD_TIME__: JSON.stringify(new Date().toISOString()),
+  },
   css: {
     preprocessorOptions: {
       scss: {