add version and build info to the settings page

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
 

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

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>
   )
 }

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