From 450c91fb48b6ffb0fafd025d61fe279b5eaf71d0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Martin=20K=C3=BCnzi?= <Martin.Kuenzi@swisstopo.ch>
Date: Thu, 23 Jan 2025 11:17:58 +0100
Subject: [PATCH] PB-1031: icon now redirect to repo

- The github icon link redirects to the repository
- The app version link redirects to the release IF this is a clean version, otherwise it leads to the repository
---
 src/config/staging.config.js        |  2 +-
 src/utils/components/AppVersion.vue | 36 ++++++++++++++++++++---------
 2 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/src/config/staging.config.js b/src/config/staging.config.js
index 4f1132104..085d52059 100644
--- a/src/config/staging.config.js
+++ b/src/config/staging.config.js
@@ -29,7 +29,7 @@ export const APP_VERSION = __APP_VERSION__
  * @type {String}
  */
 
-export const GITHUB_REPOSITORY = 'https://github.com/geoadmin/web-mapviewer/releases/tag/'
+export const GITHUB_REPOSITORY = 'https://github.com/geoadmin/web-mapviewer'
 /**
  * Display a big development banner on all but these hosts.
  *
diff --git a/src/utils/components/AppVersion.vue b/src/utils/components/AppVersion.vue
index c4daf777e..457b1c62d 100644
--- a/src/utils/components/AppVersion.vue
+++ b/src/utils/components/AppVersion.vue
@@ -5,25 +5,31 @@ import { useStore } from 'vuex'
 import { APP_VERSION } from '@/config/staging.config'
 import { GITHUB_REPOSITORY } from '@/config/staging.config'
 
+const cleanAppVersionRegex = /v\d+\.\d+\.\d+$/
 const store = useStore()
 const appVersion = ref(APP_VERSION)
 
 const isProd = computed(() => store.getters.isProductionSite)
 
-function openGithubLink() {
-    window.open(GITHUB_REPOSITORY + APP_VERSION, '_blank')
+function openGithubReleaseLink() {
+    const isAppVersionClean = appVersion.value.match(cleanAppVersionRegex)
+    if (!isAppVersionClean) {
+        openGithubRepoLink()
+    } else {
+        window.open(GITHUB_REPOSITORY + `/releases/tag/` + APP_VERSION, '_blank')
+    }
+}
+function openGithubRepoLink() {
+    window.open(GITHUB_REPOSITORY, '_blank')
 }
 </script>
 
 <template>
-    <div
-        class="app-version"
-        :class="{ 'app-version-prod': isProd }"
-        data-cy="app-version"
-        @click="openGithubLink"
-    >
-        <font-awesome-icon :icon="['fab', 'github']" />
-        {{ appVersion }}
+    <div class="app-version" :class="{ 'app-version-prod': isProd }" data-cy="app-version">
+        <span @click="openGithubRepoLink" class="githubIcon"
+            ><font-awesome-icon :icon="['fab', 'github']"
+        /></span>
+        <span class="app-version-link" @click="openGithubReleaseLink"> {{ appVersion }}</span>
     </div>
 </template>
 
@@ -32,11 +38,19 @@ function openGithubLink() {
 
 .app-version {
     color: $gray-800;
-    word-spacing: 3px;
     cursor: pointer;
 }
 
+.app-version-link {
+    margin-left: 3px;
+}
+
+.githubIcon {
+    margin-right: 3px;
+}
+
 .app-version-prod {
     color: $gray-500;
+    cursor: pointer;
 }
 </style>