Implement update check for HomePage

electron.vite.config.ts

@@ -1,32 +1,35 @@
-import { resolve } from 'path';
-import { defineConfig, externalizeDepsPlugin } from 'electron-vite';
-import vue from '@vitejs/plugin-vue';
+import { resolve } from "path";
+import { defineConfig, externalizeDepsPlugin } from "electron-vite";
+import vue from "@vitejs/plugin-vue";
 
 export default defineConfig({
-  main: {
-    plugins: [externalizeDepsPlugin()],
-    resolve: {
-      alias: {
-        '@common': resolve('src/common')
-      }
+    main: {
+        plugins: [externalizeDepsPlugin()],
+        resolve: {
+            alias: {
+                "@common": resolve("src/common")
+            }
+        },
     },
-  },
-  preload: {
-    plugins: [externalizeDepsPlugin()],
-    resolve: {
-      alias: {
-        '@common': resolve('src/common'),
-        '@preload': resolve('src/preload')
-      }
+    preload: {
+        plugins: [externalizeDepsPlugin()],
+        resolve: {
+            alias: {
+                "@common": resolve("src/common"),
+                "@preload": resolve("src/preload")
+            }
+        },
     },
-  },
-  renderer: {
-    resolve: {
-      alias: {
-        '@renderer': resolve('src/renderer'),
-        '@common': resolve('src/common')
-      }
-    },
-    plugins: [vue()]
-  }
+    renderer: {
+        resolve: {
+            alias: {
+                "@renderer": resolve("src/renderer"),
+                "@common": resolve("src/common")
+            }
+        },
+        plugins: [vue()],
+        optimizeDeps: {
+            exclude: ["marked"]
+        }
+    }
 });

package.json

@@ -6,8 +6,8 @@
   "author": "Unipept Team (Ghent University)",
   "description": "A desktop equivalent of unipept.ugent.be. This app aims at high-throughput analysis of metaproteomics samples.",
   "repository": {
-      "type": "git",
-      "url": "https://github.com/unipept/unipept-desktop.git"
+    "type": "git",
+    "url": "https://github.com/unipept/unipept-desktop.git"
   },
   "main": "./out/main/index.js",
   "homepage": "https://unipept.ugent.be",
@@ -28,7 +28,9 @@
     "@electron-toolkit/preload": "^2.0.0",
     "@electron-toolkit/utils": "^1.0.2",
     "@electron/remote": "^2.0.10",
+    "compare-versions": "^6.1.0",
     "electron-updater": "^5.3.0",
+    "marked": "^7.0.1",
     "pinia": "^2.1.6",
     "vue-router": "4",
     "vuetify": "^3.3.9"
@@ -38,6 +40,7 @@
     "@electron/notarize": "^1.2.3",
     "@mdi/font": "^7.2.96",
     "@rushstack/eslint-patch": "^1.3.0",
+    "@types/marked": "^5.0.1",
     "@types/node": "^18.16.16",
     "@vitejs/plugin-vue": "^4.2.3",
     "@vue/eslint-config-typescript": "^11.0.3",

src/renderer/components/pages/HomePage.vue

@@ -26,7 +26,7 @@
                         <span
                             v-if="updateAvailable"
                             class="logo-subline"
-                            @click="updateNotesActive = true"
+                            @click="openUpdateNotesDialog()"
                         >
                             <v-icon
                                 style="position: relative; bottom: 2px;"
@@ -43,12 +43,14 @@
             </v-col>
         </v-row>
     </v-container>
+    <update-notes-dialog v-model="isUpdateNotesDialogActive" />
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue';
 import GithubCommunicator from "@renderer/logic/communication/github/GithubCommunicator";
 import ComparatorUtils from "@renderer/logic/utils/ComparatorUtils";
+import UpdateNotesDialog from "@renderer/components/releases/UpdateNotesDialog.vue";
 
 const appVersion = ref(await window.api.app.versions.app);
 const chromeVersion = ref(await window.api.app.versions.chrome);
@@ -58,6 +60,11 @@ const githubCommunicator = new GithubCommunicator();
 const remoteVersion = ref(await githubCommunicator.getMostRecentVersion());
 const updateAvailable = ref(ComparatorUtils.isVersionLargerThan(remoteVersion.value, appVersion.value));
 
+const isUpdateNotesDialogActive = ref(false);
+const openUpdateNotesDialog = function() {
+    isUpdateNotesDialogActive.value = true;
+}
+
 </script>
 
 <style scoped>

src/renderer/components/releases/UpdateNotesDialog.vue

@@ -0,0 +1,97 @@
+<template>
+    <v-dialog v-model="isDialogActive">
+        <v-card>
+            <v-card-title>
+                Available updates
+            </v-card-title>
+            <v-card-text>
+                <div
+                    v-if="isLoading"
+                    class="text-center"
+                >
+                    <v-progress-circular
+                        indeterminate
+                        color="primary"
+                    />
+                </div>
+                <div v-else>
+                    <div>
+                        Your current version of Unipept Desktop is outdated. The following updates are available and
+                        will be automatically installed in the background:
+                    </div>
+                    <div
+                        class="mt-4 release-notes"
+                        v-html="releaseContent"
+                    />
+                </div>
+                <div class="text-center mt-4">
+                    <v-btn
+                        color="primary"
+                        @click="isDialogActive = false"
+                    >
+                        Dismiss
+                    </v-btn>
+                </div>
+            </v-card-text>
+        </v-card>
+    </v-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import ComparatorUtils from "@renderer/logic/utils/ComparatorUtils";
+import GitHubCommunicator from "@renderer/logic/communication/github/GithubCommunicator";
+import { marked } from "marked";
+
+const props = defineProps<{
+    modelValue: boolean;
+}>();
+
+const emit = defineEmits<{
+    (e: "update:modelValue", value: boolean): void
+}>();
+
+const isDialogActive = ref(props.modelValue);
+const isLoading = ref(true);
+
+watch(() => props.modelValue, (newValue) => {
+    isDialogActive.value = newValue;
+});
+
+watch(() => isDialogActive.value, (newValue) => {
+    emit("update:modelValue", newValue);
+});
+
+const releaseContent = ref("");
+const retrieveReleaseNotes = async function() {
+    isLoading.value = true;
+
+    try {
+        const communicator = new GitHubCommunicator();
+        const appVersion = await window.api.app.versions.app;
+        const allReleases = (await communicator.getAllReleases()).filter(
+            (rel) => ComparatorUtils.isVersionLargerThan(rel, appVersion)
+        );
+
+        let releaseNotes = "";
+        for (const release of allReleases) {
+            // Add title for this release
+            releaseNotes += `### Unipept Desktop ${release}\n`;
+            releaseNotes += await communicator.getReleaseNotes(release) + "\n\n";
+        }
+
+        releaseContent.value = marked(releaseNotes);
+    } catch (error) {
+        releaseContent.value = "Could not load release notes. Make sure you're connected to the internet."
+    } finally {
+        isLoading.value = false;
+    }
+}
+
+retrieveReleaseNotes();
+
+</script>
+
+<style scoped>
+
+</style>

src/renderer/plugins/vuetify.ts

@@ -44,6 +44,9 @@ const vuetify = createVuetify({
         VTooltip: {
             openDelay: 500,
             location: "bottom"
+        },
+        VDialog: {
+            maxWidth: 1000
         }
     }
 });

yarn.lock

@@ -586,6 +586,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/marked@^5.0.1":
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/@types/marked/-/marked-5.0.1.tgz#15acd796d722b91bf00738c8c8539aaf5034f0c6"
+  integrity sha512-Y3pAUzHKh605fN6fvASsz5FDSWbZcs/65Q6xYRmnIP9ZIYz27T4IOmXfH9gWJV1dpi7f1e7z7nBGUTx/a0ptpA==
+
 "@types/minimatch@*":
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-5.1.2.tgz#07508b45797cb81ec3f273011b054cd0755eddca"
@@ -1333,6 +1338,11 @@ compare-version@^0.1.2:
   resolved "https://registry.yarnpkg.com/compare-version/-/compare-version-0.1.2.tgz#0162ec2d9351f5ddd59a9202cba935366a725080"
   integrity sha512-pJDh5/4wrEnXX/VWRZvruAGHkzKdr46z11OlTPN+VrATlWWhSKewNCJ1futCO5C7eJB3nPMFZA1LeYtcFboZ2A==
 
+compare-versions@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/compare-versions/-/compare-versions-6.1.0.tgz#3f2131e3ae93577df111dba133e6db876ffe127a"
+  integrity sha512-LNZQXhqUvqUTotpZ00qLSaify3b4VFD588aRr8MKFw4CMUr98ytzCW5wDH5qx/DEY5kCDXcbcRuCqL0szEf2tg==
+
 [email protected]:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
@@ -2477,6 +2487,11 @@ make-dir@^2.1.0:
     pify "^4.0.1"
     semver "^5.6.0"
 
+marked@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/marked/-/marked-7.0.1.tgz#f5b8efa20362ed1b89739c0a902e17148011930d"
+  integrity sha512-m8Aze620Ts62yaciz2DghZGUkUfdgvSNRicS2/XtQkStMNoce3NWjOD2b/jWF32+XXK6udM6pRhv2dKNlneAFA==
+
 matcher@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/matcher/-/matcher-3.0.0.tgz#bd9060f4c5b70aa8041ccc6f80368760994f30ca"