feat: add release note and `how to upgrade` link

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui/components/releaseInfo.vue

@@ -1,23 +1,43 @@
 <template>
-  <transition name="release">
-    <v-alert
-      v-if="releaseAlert"
-      class="mb-0"
-      border="left"
-      colored-border
-      outlined
-      type="info"
-      :icon="false"
-      dense
-    >
-      <a href="https://github.com/nocodb/nocodb/releases" target="_blank" class="white--text text-decoration-none"><span class="caption">New version is available (<strong>{{
-        releaseVersion
-      }}</strong>)</span></a>
-      <x-icon x-small :color="['grey lighten-2']" btnclass="mr-n2" @click="releaseAlert =false">
-        mdi-close
-      </x-icon>
-    </v-alert>
-  </transition>
+  <v-menu bottom offset-y>
+    <template #activator="{on}">
+      <transition name="release">
+        <v-btn
+          v-if="releaseAlert"
+          text
+          small
+          class="mb-0 mr-2 py-0 "
+          v-on="on"
+        >
+          Upgrade available
+          <v-icon small>
+            mdi-menu-down
+          </v-icon>
+        </v-btn>
+      </transition>
+    </template>
+    <v-list dense>
+      <v-list-item dense href="https://github.com/nocodb/nocodb/releases" target="_blank">
+        <v-icon small class="mr-2">
+          mdi-script-text-outline
+        </v-icon>
+        <span class="caption">{{ releaseVersion }} Release notes</span>
+      </v-list-item>
+      <v-list-item dense href="https://docs.nocodb.com/getting-started/upgrading" target="_blank">
+        <v-icon small class="mr-2">
+          mdi-rocket-launch-outline
+        </v-icon>
+        <span class="caption">How to upgrade ?</span>
+      </v-list-item>
+      <v-list-item @click="releaseAlert = false">
+        <v-icon small class="mr-2">
+          mdi-close
+        </v-icon>
+
+        <span class="caption">Hide menu</span>
+      </v-list-item>
+    </v-list>
+  </v-menu>
 </template>
 
 <script>

packages/nc-gui/layouts/default.vue

@@ -97,7 +97,7 @@
       <v-spacer />
 
       <v-toolbar-items class="hidden-sm-and-down">
-        <release-info class="mr-2 py-0" />
+        <release-info />
 
         <template v-if="isDashboard">
           <div>
@@ -320,7 +320,7 @@
 
                               </v-list-item-title>
                             </v-list-item>-->
-              <v-list-item  v-ge="['Sign Out','']" dense>
+              <v-list-item v-ge="['Sign Out','']" dense>
                 <v-list-item-title>
                   <v-icon small>
                     mdi-at
@@ -328,14 +328,14 @@
                 </v-list-item-title>
               </v-list-item>
 
-              <v-divider></v-divider>
+              <v-divider />
 
-              <v-list-item v-if="isDashboard"
+              <v-list-item
+                v-if="isDashboard"
                 v-clipboard="$store.state.users.token"
                 dense
                 @click.stop="$toast.success('Auth token copied to clipboard').goAway(3000)"
               >
-
                 <v-list-item-title>
                   <v-icon key="terminal-dash" small>
                     mdi-content-copy
@@ -368,7 +368,7 @@
                     {{ isGql ? 'GraphQL APIs' : 'Swagger APIs Doc' }}</span>
                 </v-list-item-title>
               </v-list-item>
-              <v-divider></v-divider>
+              <v-divider />
               <v-list-item v-if="isDashboard" v-ge="['Sign Out','']" dense @click="copyProjectInfo">
                 <v-list-item-title>
                   <v-icon small>
@@ -377,7 +377,7 @@
                 </v-list-item-title>
               </v-list-item>
 
-              <v-list-item dense @click.stop="settingsTabAdd" v-if="isDashboard">
+              <v-list-item v-if="isDashboard" dense @click.stop="settingsTabAdd">
                 <v-list-item-title>
                   <v-icon key="terminal-dash" small>
                     mdi-palette
@@ -386,7 +386,7 @@
                 </v-list-item-title>
               </v-list-item>
 
-              <v-divider v-if="isDashboard"></v-divider>
+              <v-divider v-if="isDashboard" />
 
               <v-list-item v-ge="['Sign Out','']" dense @click="MtdSignOut">
                 <v-list-item-title>
@@ -563,13 +563,13 @@
 import ReleaseInfo from '@/components/releaseInfo'
 import { mapGetters, mapActions, mapMutations } from 'vuex'
 import 'splitpanes/dist/splitpanes.css'
-import { copyTextToClipboard } from '@/helpers/xutils'
 import ChangeEnv from '../components/changeEnv'
 import XBtn from '../components/global/xBtn'
 import dlgUnexpectedError from '../components/utils/dlgUnexpectedError'
 import notification from '../components/notification.vue'
 import settings from '../components/settings'
 import xTerm from '../components/xTerm'
+import { copyTextToClipboard } from '@/helpers/xutils'
 import Snackbar from '~/components/snackbar'
 import Language from '~/components/utils/language'