feat: show releases changelog on login (#3319)

app.ts

@@ -5,7 +5,7 @@ import cors from 'cors'
 import csrf from 'csurf'
 import morgan from 'morgan'
 import store, { Settings, User } from './config/store'
-import Gateway, { GatewayConfig } from './lib/Gateway'
+import Gateway, { GatewayConfig, GatewayType } from './lib/Gateway'
 import jsonStore from './lib/jsonStore'
 import * as loggers from './lib/logger'
 import MqttClient from './lib/MqttClient'
@@ -1135,6 +1135,46 @@ app.post(
 	}
 )
 
+// update versions
+app.post(
+	'/api/versions',
+	apisLimiter,
+	isAuthenticated,
+	async function (req, res) {
+		try {
+			const { disableChangelog } = req.body
+			const settings: Settings =
+				jsonStore.get(store.settings) || ({} as Settings)
+
+			if (!settings.zwave) {
+				settings.gateway = {
+					type: GatewayType.NAMED,
+				}
+				settings.gateway.versions = {}
+			}
+
+			// update versions to actual ones
+			settings.gateway.versions = {
+				app: utils.getVersion(),
+				driver: libVersion,
+				server: serverVersion,
+			}
+
+			settings.gateway.disableChangelog = disableChangelog
+
+			await jsonStore.put(store.settings, settings)
+
+			res.json({
+				success: true,
+				message: 'Versions updated successfully',
+			})
+		} catch (error) {
+			logger.error(error)
+			res.json({ success: false, message: error.message })
+		}
+	}
+)
+
 // get config
 app.get('/api/exportConfig', apisLimiter, isAuthenticated, function (req, res) {
 	return res.json({

lib/Gateway.ts

@@ -196,6 +196,12 @@ export type GatewayConfig = {
 	logFileName?: string
 	manualDiscovery?: boolean
 	authEnabled?: boolean
+	versions?: {
+		driver?: string
+		app?: string
+		server?: string
+	}
+	disableChangelog?: boolean
 }
 
 interface ValueIdTopic {

package.json

@@ -139,6 +139,7 @@
     "js-logger": "^1.6.1",
     "jsonfile": "^6.1.0",
     "jsonwebtoken": "^9.0.0",
+    "markdown-it": "^13.0.2",
     "merge": "^2.1.1",
     "morgan": "~1.10.0",
     "mqtt": "^5.0.5",

src/App.vue

@@ -892,6 +892,8 @@ export default {
 							throw Error(data.message)
 						}
 					}
+
+					await this.checkChangelog()
 				}
 			} catch (error) {
 				this.showSnackbar(error.message, 'error')
@@ -1077,6 +1079,124 @@ export default {
 				log.error(error)
 			}
 		},
+		async getRelease(project, version) {
+			try {
+				const response = await fetch(
+					`https://api.github.com/repos/zwave-js/${project}/releases/${
+						version === 'latest' ? 'latest' : 'tags/' + version
+					}`
+				)
+				const data = await response.json()
+				return data
+			} catch (error) {
+				log.error(error)
+			}
+		},
+		async checkChangelog() {
+			const settings = useBaseStore().gateway
+			if (settings?.disableChangelog) return
+
+			const versions = settings?.versions
+			// get changelog from github latest release
+			try {
+				const latest = await this.getRelease('zwave-js-ui', 'latest')
+
+				if (!latest?.tag_name) return
+				const currentVersion = import.meta.env.VITE_VERSION
+				const latestVersion = latest.tag_name.replace('v', '')
+
+				if (latestVersion !== currentVersion) {
+					this.showSnackbar(
+						`New version available: ${latest.tag_name}`,
+						'info',
+						15000
+					)
+				}
+
+				if (versions?.app !== this.appInfo.appVersion) {
+					const current = await this.getRelease(
+						'zwave-js-ui',
+						'v' + currentVersion
+					)
+					const { default: md } = await import('markdown-it')
+
+					current.body = current.body.replace(
+						new RegExp(
+							`## \\[${currentVersion}\\]\\([^\\)]+\\)`,
+							'g'
+						),
+						`## Z-Wave JS UI [${current.tag_name}](https://github.com/zwave-js/zwave-js-ui/releases/tag/${current.tag_name})`
+					)
+
+					let changelog = md()
+						.render(current.body)
+						.replace('<p>', '</br><p>')
+
+					if (this.appInfo.zwaveVersion !== versions?.zwave) {
+						// get changelog from github latest release
+						const zwaveLatest = await this.getRelease(
+							'node-zwave-js',
+							'v' + this.appInfo.zwaveVersion
+						)
+
+						const zwaveChangelog = md()
+							.render(zwaveLatest.body)
+							.replace(
+								/#(\d+)/g,
+								'<a href="https://github.com/zwave-js/node-zwave-js/pull/$1">#$1</a>'
+							)
+
+						changelog += `</br><h2>Driver <a target="_blank" href="https://github.com/zwave-js/node-zwave-js/releases/tag/${zwaveLatest.tag_name}">${zwaveLatest.tag_name}</a></h2></br>${zwaveChangelog}`
+					}
+
+					if (this.appInfo.serverVersion !== versions?.server) {
+						// get changelog from github latest release
+						const serverLatest = await this.getRelease(
+							'zwave-js-server',
+							this.appInfo.serverVersion
+						)
+
+						const serverChangelog = md()
+							.render(serverLatest.body)
+							.replace(
+								"<h2>What's Changed</h2>",
+								'<h3>Changes</h3>'
+							)
+							.replace(
+								/#(\d+)/g,
+								'<a href="https://github.com/zwave-js/zwave-js-server/pull/$1">#$1</a>'
+							)
+
+						changelog += `</br><h2>Server <a target="_blank" href="https://github.com/zwave-js/zwave-js-server/releases/tag/${serverLatest.tag_name}">${serverLatest.tag_name}</a></h2></br>${serverChangelog}`
+					}
+
+					// means we never saw the changelog for this version
+					const result = await this.confirm(
+						`Changelog`,
+						changelog,
+						'info',
+						{
+							width: 1000,
+							cancelText: '',
+							confirmText: 'OK',
+							persistent: true,
+							inputs: [
+								{
+									type: 'checkbox',
+									label: "Don't show again",
+									key: 'dontShowAgain',
+									hint: 'Enable this to never show changelogs on next updates',
+								},
+							],
+						}
+					)
+
+					await ConfigApis.updateVersions(result?.dontShowAgain)
+				}
+			} catch (error) {
+				log.error(error)
+			}
+		},
 	},
 	beforeMount() {
 		manager.register(instances.APP, this)

src/apis/ConfigApis.js

@@ -128,4 +128,8 @@ export default {
 		const response = await request.put('/store-multi', { files })
 		return response.data
 	},
+	async updateVersions(disableChangelog = false) {
+		const response = await request.post('/versions', { disableChangelog })
+		return response.data
+	},
 }

src/components/Confirm.vue

@@ -15,9 +15,9 @@
 			<v-card-text
 				v-show="!!message"
 				v-html="message"
-				class="pa-4"
+				class="px-4 pt-4"
 			></v-card-text>
-			<v-card-text v-if="options.inputs" class="pa-4">
+			<v-card-text v-if="options.inputs" class="px-4">
 				<v-container grid-list-md>
 					<v-form
 						v-model="valid"

src/stores/base.js

@@ -84,12 +84,14 @@ const useBaseStore = defineStore('base', {
 			logToFile: false,
 			values: [],
 			jobs: [],
+			disableChangelog: false,
 		},
 		appInfo: {
 			homeid: '',
 			homeHex: '',
 			appVersion: '',
 			zwaveVersion: '',
+			serverVersion: '',
 			controllerStatus: 'Unknown',
 			newConfigVersion: undefined,
 		},

src/views/Settings.vue

@@ -141,6 +141,17 @@
 											v-model="newGateway.logToFile"
 										></v-switch>
 									</v-col>
+
+									<v-col cols="12" sm="6" md="4">
+										<v-checkbox
+											persistent-hint
+											label="Disable changelogs"
+											hint="Check this to disable changelogs dialogs on new versions"
+											v-model="
+												newGateway.disableChangelog
+											"
+										></v-checkbox>
+									</v-col>
 								</v-row>
 								<v-subheader class="font-weight-bold">
 									Devices values configuration