feat: cloud changelogs

packages/nc-gui/components/feed/Changelog/index.vue

@@ -1,5 +1,9 @@
 <script setup lang="ts">
-const { loadFeed, githubFeed, isErrorOccurred } = useProductFeed()
+const props = defineProps<{
+  type: 'github' | 'cloud'
+}>()
+
+const { loadFeed, githubFeed, isErrorOccurred, cloudFeed } = useProductFeed()
 
 const scrollContainer = ref<HTMLElement>()
 
@@ -8,12 +12,16 @@ const { isLoading } = useInfiniteScroll(
   async () => {
     if (isLoading.value) return
     await loadFeed({
-      type: 'github',
+      type: props.type,
       loadMore: true,
     })
   },
   { distance: 4 },
 )
+
+const feed = computed(() => {
+  return props.type === 'github' ? githubFeed.value : cloudFeed.value
+})
 </script>
 
 <template>
@@ -24,15 +32,18 @@ const { isLoading } = useInfiniteScroll(
     }"
     class="overflow-y-auto nc-scrollbar-md mx-auto w-full"
   >
-    <div v-if="isErrorOccurred?.github && !githubFeed.length" class="h-full flex justify-center items-center">
+    <div
-      <FeedError page="github" />
+      v-if="(props.type === 'github' ? isErrorOccurred.github : isErrorOccurred.cloud) && !feed.length"
+      class="h-full flex justify-center items-center"
+    >
+      <FeedError :page="type" />
     </div>
-    <div v-else-if="isLoading && !githubFeed.length" class="flex items-center justify-center h-full w-full">
+    <div v-else-if="isLoading && !feed.length" class="flex items-center justify-center h-full w-full">
       <GeneralLoader size="xlarge" />
     </div>
 
     <div v-else class="mx-auto max-w-[540px] xl:max-w-[638px] justify-around justify-items-center">
-      <FeedChangelogItem v-for="(feed, index) in githubFeed" :key="feed.Id" :item="feed" :index="index" />
+      <FeedChangelogItem v-for="(item, index) in feed" :key="item.Id" :item="item" :index="index" />
     </div>
   </div>
 </template>

packages/nc-gui/components/feed/Error.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 const props = defineProps<{
-  page: 'all' | 'youtube' | 'github' | 'twitter'
+  page: 'all' | 'youtube' | 'github' | 'twitter' | 'cloud'
 }>()
 
 const emits = defineEmits(['reload'])
 
-const { loadFeed, socialFeed, youtubeFeed, githubFeed } = useProductFeed()
+const { loadFeed, socialFeed, youtubeFeed, githubFeed, cloudFeed } = useProductFeed()
 
 const triggerReload = async () => {
   if (props.page === 'twitter') {
@@ -24,6 +24,8 @@ const triggerReload = async () => {
     youtubeFeed.value = data
   } else if (props.page === 'github') {
     githubFeed.value = data
+  } else if (props.page === 'cloud') {
+    cloudFeed.value = data
   }
 }
 </script>

packages/nc-gui/components/feed/View.vue

@@ -21,7 +21,13 @@ const tabs: Array<{
     container: FeedRecents,
   },
   {
-    key: 'changelog',
+    key: 'cloud',
+    icon: 'ncCloud',
+    title: 'Cloud Changelog',
+    container: FeedChangelog,
+  },
+  {
+    key: 'github',
     icon: 'ncList',
     title: 'Changelog',
     container: FeedChangelog,
@@ -89,13 +95,13 @@ onMounted(() => {
         <div class="relative">
           <FeedSocial
             :class="{
-              'normal-left': tab.key === 'recents' || tab.key === 'youtube',
+              'normal-left': ['recents', 'youtube', 'cloud'].includes(tab.key),
-              'changelog-left': tab.key === 'changelog',
+              'changelog-left': tab.key === 'github',
               'changelog-twitter': tab.key === 'twitter',
             }"
             class="absolute social-card"
           />
-          <component :is="tab.container" />
+          <component :is="tab.container" :type="tab.key" />
         </div>
       </a-tab-pane>
     </NcTabs>

packages/nc-gui/composables/useProductFeed.ts

@@ -14,13 +14,16 @@ export const useProductFeed = createSharedComposable(() => {
 
   const socialFeed = ref<ProductFeedItem[]>([])
 
+  const cloudFeed = ref<ProductFeedItem[]>([])
+
   const isErrorOccurred = reactive({
     youtube: false,
     github: false,
     social: false,
+    cloud: false,
   })
 
-  const loadFeed = async ({ loadMore, type }: { loadMore: boolean; type: 'youtube' | 'github' | 'all' }) => {
+  const loadFeed = async ({ loadMore, type }: { loadMore: boolean; type: 'youtube' | 'github' | 'all' | 'cloud' }) => {
     try {
       let page = 1
 
@@ -35,6 +38,9 @@ export const useProductFeed = createSharedComposable(() => {
           case 'all':
             page = Math.ceil(socialFeed.value.length / 10) + 1
             break
+          case 'cloud':
+            page = Math.ceil(cloudFeed.value.length / 10) + 1
+            break
         }
       }
 
@@ -50,6 +56,9 @@ export const useProductFeed = createSharedComposable(() => {
         case 'all':
           socialFeed.value = [...socialFeed.value, ...response] as ProductFeedItem[]
           break
+        case 'cloud':
+          cloudFeed.value = [...cloudFeed.value, ...response] as ProductFeedItem[]
+          break
       }
     } catch (error) {
       switch (type) {
@@ -62,6 +71,9 @@ export const useProductFeed = createSharedComposable(() => {
         case 'all':
           isErrorOccurred.social = true
           break
+        case 'cloud':
+          isErrorOccurred.cloud = true
+          break
       }
       console.error(error)
       return []
@@ -113,6 +125,7 @@ export const useProductFeed = createSharedComposable(() => {
     youtubeFeed,
     githubFeed,
     socialFeed,
+    cloudFeed,
     loadFeed,
     isNewFeedAvailable,
   }

packages/nc-gui/lib/types.ts

@@ -281,7 +281,7 @@ interface ProductFeedItem {
   Id: string
   Title: string
   Description: string
-  ['Feed Source']: 'Youtube' | 'Github' | 'All'
+  ['Feed Source']: 'Youtube' | 'Github' | 'All' | 'Cloud'
   Url: string
   Tags?: string
   ['Published Time']: string

packages/nocodb/src/schema/swagger.json

@@ -16046,7 +16046,8 @@
               "enum": [
                 "all",
                 "github",
-                "youtube"
+                "youtube",
+                "cloud"
               ]
             },
             "name": "type",