feat(gui-v2): release info

packages/nc-gui-v2/components.d.ts

@@ -150,6 +150,8 @@ declare module '@vue/runtime-core' {
     MdiPlusOutline: typeof import('~icons/mdi/plus-outline')['default']
     MdiRefresh: typeof import('~icons/mdi/refresh')['default']
     MdiReload: typeof import('~icons/mdi/reload')['default']
+    MdiRocketLaunchOutline: typeof import('~icons/mdi/rocket-launch-outline')['default']
+    MdiScriptTextOutline: typeof import('~icons/mdi/script-text-outline')['default']
     MdiSearch: typeof import('~icons/mdi/search')['default']
     MdiSlack: typeof import('~icons/mdi/slack')['default']
     MdiStar: typeof import('~icons/mdi/star')['default']

packages/nc-gui-v2/components/general/ReleaseInfo.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { message } from 'ant-design-vue'
+import { onMounted } from '@vue/runtime-core'
+import { extractSdkResponseErrorMsg } from '#imports'
+
+const { $api } = useNuxtApp()
+
+const { currentVersion, latestRelease, hiddenRelease } = useGlobal()
+
+const releaseAlert = computed(
+  () =>
+    currentVersion.value &&
+    latestRelease.value &&
+    currentVersion.value !== latestRelease.value &&
+    latestRelease.value !== hiddenRelease.value,
+)
+
+async function fetchReleaseInfo() {
+  try {
+    const versionInfo = await $api.utils.appVersion()
+    if (versionInfo && versionInfo.releaseVersion && versionInfo.currentVersion && !/[^0-9.]/.test(versionInfo.currentVersion)) {
+      currentVersion.value = versionInfo.currentVersion
+      latestRelease.value = versionInfo.releaseVersion
+    } else {
+      currentVersion.value = null
+      latestRelease.value = null
+    }
+  } catch (e: any) {
+    message.error(await extractSdkResponseErrorMsg(e))
+  }
+}
+
+onMounted(async () => await fetchReleaseInfo())
+</script>
+
+<template>
+  <div v-if="releaseAlert" class="flex items-center">
+    <a-dropdown :trigger="['click']" placement="bottom">
+      <a-button class="bg-primary border-none">
+        <div class="flex gap-1 align-center text-white">
+          <span class="text-sm font-weight-medium">{{ $t('activity.upgrade.available') }}</span>
+          <mdi-menu-down />
+        </div>
+      </a-button>
+      <template #overlay>
+        <div class="mt-1 bg-white shadow-lg !border">
+          <nuxt-link class="text-primary" to="https://github.com/nocodb/nocodb/releases" target="_blank">
+            <div class="nc-menu-item">
+              <mdi-script-text-outline />
+              {{ latestRelease }} {{ $t('activity.upgrade.releaseNote') }}
+            </div>
+          </nuxt-link>
+          <nuxt-link class="text-primary" to="https://docs.nocodb.com/getting-started/upgrading" target="_blank">
+            <div class="nc-menu-item">
+              <mdi-rocket-launch-outline />
+              <!-- How to upgrade? -->
+              {{ $t('activity.upgrade.howTo') }}
+            </div>
+          </nuxt-link>
+          <a-divider class="ma-0" />
+          <div class="nc-menu-item" @click="latestRelease = null">
+            <mdi-close />
+            <!-- Hide menu -->
+            {{ $t('general.hideMenu') }}
+          </div>
+        </div>
+      </template>
+    </a-dropdown>
+  </div>
+</template>

packages/nc-gui-v2/composables/useGlobal/state.ts

@@ -59,6 +59,9 @@ export function useGlobalState(storageKey = 'nocodb-gui-v2'): State {
     filterAutoSave: true,
     previewAs: null,
     includeM2M: false,
+    currentVersion: null,
+    latestRelease: null,
+    hiddenRelease: null,
   }
 
   /** saves a reactive state, any change to these values will write/delete to localStorage */

packages/nc-gui-v2/composables/useGlobal/types.ts

@@ -36,6 +36,9 @@ export interface StoredState {
   filterAutoSave: boolean
   previewAs: string | null
   includeM2M: boolean
+  currentVersion: string | null
+  latestRelease: string | null
+  hiddenRelease: string | null
 }
 
 export type State = ToRefs<Omit<StoredState, 'token'>> & {

packages/nc-gui-v2/layouts/base.vue

@@ -43,6 +43,8 @@ const logout = () => {
 
           <div class="flex-1" />
 
+          <GeneralReleaseInfo />
+
           <GeneralShareBaseButton />
 
           <a-tooltip placement="bottom">