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
geoadmin · Jan 23, 2025 · bbf7931 · bbf7931
1 parent 95fdae3
commit bbf7931
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 12 deletions.
diff --git 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
@@ -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+(-beta\.\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>