Merge pull request #1607 from nocodb/feat/breaking-change-info

feat: announcement

packages/nc-gui/components/importantAnnouncement.vue

@@ -0,0 +1,87 @@
+<template>
+  <v-menu bottom offset-y>
+    <template #activator="{on}">
+      <transition name="announcement">
+        <v-btn
+          v-if="!loading"
+          text
+          small
+          class="mb-0 mr-2 py-0 "
+          v-on="on"
+        >
+          Announcement
+          <v-icon small>
+            mdi-menu-down
+          </v-icon>
+        </v-btn>
+      </transition>
+    </template>
+    <v-list dense>
+      <v-list-item dense>
+        <span class="message">
+          Starting from v0.90, <br/>
+          our API will undergo changes <br/>
+          and we are discontinuing GraphQL
+        </span>
+      </v-list-item>
+      <v-list-item dense href="https://github.com/nocodb/nocodb/issues/1564" target="_blank">
+        <v-icon small class="mr-2">
+          mdi-script-text-outline
+        </v-icon>
+        <span class="caption">
+          API Changes in v0.90.0
+        </span>
+      </v-list-item>
+      <!-- <v-list-item dense href="#" target="_blank">
+        <v-icon small class="mr-2">
+          mdi-rocket-launch-outline
+        </v-icon>
+        <span class="caption">
+          Migration Guide
+        </span>
+      </v-list-item> -->
+      <v-list-item @click="announcementAlert = false">
+        <v-icon small class="mr-2">
+          mdi-close
+        </v-icon>
+
+        <span class="caption">
+          <!--Hide menu-->
+          {{ $t('general.hideMenu') }}
+        </span>
+      </v-list-item>
+    </v-list>
+  </v-menu>
+</template>
+
+<script>
+export default {
+  name: 'ImportantAnnouncement',
+  data: () => ({
+    loading: true
+  }),
+  computed: {
+  },
+  mounted() {
+    setTimeout(() => {
+      this.loading = false
+    }, 1000)
+  }
+}
+</script>
+
+<style scoped>
+.announcement-enter-active, .announcement-leave-active {
+  transition: opacity .5s;
+}
+
+.announcement-enter, .announcement-leave-to {
+  opacity: 0;
+}
+
+.message {
+  font-size: 0.80rem !important;
+  font-weight: bold;
+  margin: 10px;
+}
+</style>

packages/nc-gui/layouts/default.vue

@@ -110,6 +110,8 @@
           {{ ghStarText }}
         </gh-btns-star>
 
+        <important-announcement />
+
         <release-info />
 
         <template v-if="isDashboard">
@@ -581,6 +583,7 @@
 
 <script>
 import ReleaseInfo from '@/components/releaseInfo'
+import ImportantAnnouncement from '../components/importantAnnouncement.vue'
 import { mapGetters, mapActions, mapMutations } from 'vuex'
 import 'splitpanes/dist/splitpanes.css'
 import ChangeEnv from '../components/changeEnv'
@@ -602,6 +605,7 @@ export default {
     TemplatesModal,
     Loader,
     ReleaseInfo,
+    ImportantAnnouncement,
     Language,
     ChangeEnv,
     XBtn,
@@ -609,7 +613,7 @@ export default {
     dlgUnexpectedError,
     notification,
     settings,
-    xTerm
+    xTerm,
   },
   data: () => ({
     clickCount: true,