From 7afab98ab0998cda6527526f31c2b5b826fef24c Mon Sep 17 00:00:00 2001
From: Robin Moser <mail@robinmoser.de>
Date: Tue, 20 Apr 2021 15:58:22 +0200
Subject: [PATCH] add version and build info to the settings page

---
 Dockerfile                                 |  6 +++++
 ui/build.mjs                               |  2 +-
 ui/src/Pages/SettingsPage/SettingsPage.tsx |  2 ++
 ui/src/Pages/SettingsPage/VersionInfo.tsx  | 28 ++++++++++++++++++++++
 4 files changed, 37 insertions(+), 1 deletion(-)
 create mode 100644 ui/src/Pages/SettingsPage/VersionInfo.tsx

diff --git a/Dockerfile b/Dockerfile
index df744628..05d8c62f 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -8,6 +8,12 @@ ENV PHOTOVIEW_API_ENDPOINT=${PHOTOVIEW_API_ENDPOINT}
 ARG UI_PUBLIC_URL
 ENV UI_PUBLIC_URL=${UI_PUBLIC_URL:-/}
 
+ARG VERSION
+ENV VERSION=${VERSION:-undefined}
+
+ARG BUILD_DATE
+ENV BUILD_DATE=${BUILD_DATE:-undefined}
+
 RUN mkdir -p /app
 WORKDIR /app
 
diff --git a/ui/build.mjs b/ui/build.mjs
index e8efb7bb..ae710f4e 100644
--- a/ui/build.mjs
+++ b/ui/build.mjs
@@ -12,7 +12,7 @@ const bs = browserSync.create()
 const production = process.env.NODE_ENV == 'production'
 const watchMode = process.argv[2] == 'watch'
 
-const ENVIRONMENT_VARIABLES = ['NODE_ENV', 'PHOTOVIEW_API_ENDPOINT']
+const ENVIRONMENT_VARIABLES = ['NODE_ENV', 'PHOTOVIEW_API_ENDPOINT', 'VERSION', 'BUILD_DATE']
 
 const defineEnv = ENVIRONMENT_VARIABLES.reduce((acc, key) => {
   acc[`process.env.${key}`] = process.env[key] ? `"${process.env[key]}"` : null
diff --git a/ui/src/Pages/SettingsPage/SettingsPage.tsx b/ui/src/Pages/SettingsPage/SettingsPage.tsx
index c8b1dbf6..afaac4d7 100644
--- a/ui/src/Pages/SettingsPage/SettingsPage.tsx
+++ b/ui/src/Pages/SettingsPage/SettingsPage.tsx
@@ -9,6 +9,7 @@ import Layout from '../../Layout'
 import ScannerSection from './ScannerSection'
 import UserPreferences from './UserPreferences'
 import UsersTable from './Users/UsersTable'
+import VersionInfo from './VersionInfo'
 
 export const SectionTitle = styled.h2<{ nospace?: boolean }>`
   margin-top: ${({ nospace }) => (nospace ? '0' : '1.4em')} !important;
@@ -48,6 +49,7 @@ const SettingsPage = () => {
       >
         {t('settings.logout', 'Log out')}
       </Button>
+      <VersionInfo />
     </Layout>
   )
 }
diff --git a/ui/src/Pages/SettingsPage/VersionInfo.tsx b/ui/src/Pages/SettingsPage/VersionInfo.tsx
new file mode 100644
index 00000000..319f6c9d
--- /dev/null
+++ b/ui/src/Pages/SettingsPage/VersionInfo.tsx
@@ -0,0 +1,28 @@
+import React from 'react'
+import styled from 'styled-components'
+import {
+  InputLabelDescription,
+  InputLabelTitle,
+  SectionTitle,
+} from './SettingsPage'
+
+const VERSION = process.env.VERSION ? process.env.VERSION : 'undefined'
+const BUILD_DATE = process.env.BUILD_DATE ? process.env.BUILD_DATE : 'undefined'
+
+const VersionInfoWrapper = styled.div`
+  margin-bottom: 24px;
+`
+
+const VersionInfo = () => {
+  return (
+    <VersionInfoWrapper>
+      <SectionTitle>Photoview Version</SectionTitle>
+      <InputLabelTitle>Release Version</InputLabelTitle>
+      <InputLabelDescription>{VERSION}</InputLabelDescription>
+      <InputLabelTitle>Build date</InputLabelTitle>
+      <InputLabelDescription>{BUILD_DATE}</InputLabelDescription>
+    </VersionInfoWrapper>
+  )
+}
+
+export default VersionInfo