feat(gui-v2): Api and support page

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

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

@@ -83,6 +83,8 @@ declare module '@vue/runtime-core' {
     IcRoundKeyboardArrowDown: typeof import('~icons/ic/round-keyboard-arrow-down')['default']
     IcRoundSearch: typeof import('~icons/ic/round-search')['default']
     LogosGoogleGmail: typeof import('~icons/logos/google-gmail')['default']
+    LogosRedditIcon: typeof import('~icons/logos/reddit-icon')['default']
+    LogosSwagger: typeof import('~icons/logos/swagger')['default']
     MaterialSymbolsArrowCircleLeftRounded: typeof import('~icons/material-symbols/arrow-circle-left-rounded')['default']
     MaterialSymbolsArrowCircleRightRounded: typeof import('~icons/material-symbols/arrow-circle-right-rounded')['default']
     MaterialSymbolsAttachFile: typeof import('~icons/material-symbols/attach-file')['default']
@@ -100,6 +102,7 @@ declare module '@vue/runtime-core' {
     MdiAccountGroupIcon: typeof import('~icons/mdi/account-group-icon')['default']
     MdiAccountIcon: typeof import('~icons/mdi/account-icon')['default']
     MdiAccountOutline: typeof import('~icons/mdi/account-outline')['default']
+    MdiAccountPlus: typeof import('~icons/mdi/account-plus')['default']
     MdiAccountPlusOutline: typeof import('~icons/mdi/account-plus-outline')['default']
     MdiAccountSupervisorOutline: typeof import('~icons/mdi/account-supervisor-outline')['default']
     MdiAlphaA: typeof import('~icons/mdi/alpha-a')['default']
@@ -108,6 +111,8 @@ declare module '@vue/runtime-core' {
     MdiArrowLeftBold: typeof import('~icons/mdi/arrow-left-bold')['default']
     MdiAt: typeof import('~icons/mdi/at')['default']
     MdiBackburger: typeof import('~icons/mdi/backburger')['default']
+    MdiBookOpenOutline: typeof import('~icons/mdi/book-open-outline')['default']
+    MdiBookOpenPageVariantOutline: typeof import('~icons/mdi/book-open-page-variant-outline')['default']
     MdiBugOutline: typeof import('~icons/mdi/bug-outline')['default']
     MdiCalculator: typeof import('~icons/mdi/calculator')['default']
     MdiCalendarMonth: typeof import('~icons/mdi/calendar-month')['default']
@@ -124,6 +129,7 @@ declare module '@vue/runtime-core' {
     MdiCloseThick: typeof import('~icons/mdi/close-thick')['default']
     MdiCodeJson: typeof import('~icons/mdi/code-json')['default']
     MdiCog: typeof import('~icons/mdi/cog')['default']
+    MdiCommentTextOutline: typeof import('~icons/mdi/comment-text-outline')['default']
     MdiContentCopy: typeof import('~icons/mdi/content-copy')['default']
     MdiContentSave: typeof import('~icons/mdi/content-save')['default']
     MdiCurrencyUsd: typeof import('~icons/mdi/currency-usd')['default']
@@ -161,6 +167,7 @@ declare module '@vue/runtime-core' {
     MdiHeart: typeof import('~icons/mdi/heart')['default']
     MdiHook: typeof import('~icons/mdi/hook')['default']
     MdiInformation: typeof import('~icons/mdi/information')['default']
+    MdiJson: typeof import('~icons/mdi/json')['default']
     MdiKeyboardReturn: typeof import('~icons/mdi/keyboard-return')['default']
     MdiKeyPlus: typeof import('~icons/mdi/key-plus')['default']
     MdiKeyStar: typeof import('~icons/mdi/key-star')['default']

packages/nc-gui-v2/components/dashboard/TreeView.vue

@@ -409,8 +409,9 @@ function openTableCreateDialog() {
 
     <a-divider class="!my-0" />
 
-    <div class="flex items-center justify-center p-2">
-      <GeneralShareBaseButton />
+    <div class="flex items-start flex-col justify-start px-4 py-5 gap-2">
+      <GeneralShareBaseButton class="py-1 px-2 text-primary font-weight-bold cursor-pointer select-none" />
+      <GeneralHelpAndSupport class="py-1 px-2 text-gray-500 cursor-pointer select-none" />
     </div>
   </div>
 </template>

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

@@ -0,0 +1,52 @@
+<script lang="ts" setup>
+const showDrawer = ref(false)
+</script>
+
+<template>
+  <div>
+    <div size="middle" type="primary" class="rounded" @click="showDrawer = true">
+      <div class="flex items-center space-x-1">
+        <MdiCommentTextOutline class="mr-1 nc-share-base" />
+        <!-- todo: i18n -->
+        <div>APIs & Support</div>
+      </div>
+    </div>
+
+    <a-drawer
+      v-model:visible="showDrawer"
+      class="h-full relative"
+      style="color: red"
+      placement="right"
+      size="small"
+      :closable="false"
+      :body-style="{ padding: '12px 24px 24px 24px', background: '#fafafa' }"
+    >
+      <div class="flex flex-col w-full h-full p-4">
+        <!-- todo: i18n -->
+        <a-typography-title :level="4" class="!mb-6 !text-gray-500">Help center</a-typography-title>
+
+        <GeneralSocialCard show-swagger-link class="!w-full nc-social-card" />
+        <div class="flex-1 my-2"></div>
+        <GeneralSponsors class="!w-full" />
+      </div>
+    </a-drawer>
+  </div>
+</template>
+
+<style scoped lang="scss">
+/* Social card style */
+.nc-social-card {
+  @apply !shadow-none !border-0 bg-transparent;
+
+  :deep(.ant-spin-container) {
+    @apply !gap-3;
+
+    .ant-list-item {
+      @apply mb-2 border-1 bg-white;
+      &:last-child {
+        @apply border-1;
+      }
+    }
+  }
+}
+</style>

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

@@ -10,7 +10,7 @@ const { isUIAllowed } = useUIPermission()
 
 <template>
   <div class="flex items-center">
-    <a-button
+    <div
       v-if="
         isUIAllowed('newUser') &&
         route.name !== 'index' &&
@@ -24,10 +24,11 @@ const { isUIAllowed } = useUIPermission()
       @click="showUserModal = true"
     >
       <div class="flex items-center space-x-1">
-        <mdi-account-supervisor-outline class="mr-1 nc-share-base" />
-        <div>{{ $t('activity.share') }}</div>
+        <MdiAccountPlusOutline class="mr-1 nc-share-base" />
+        <!-- todo: i18n       <div>{{ $t('activity.share') }}</div> -->
+        <div>{{ $t('activity.inviteTeam') }}</div>
       </div>
-    </a-button>
+    </div>
     <TabsAuthUserManagementUsersModal :key="showUserModal" :show="showUserModal" @closed="showUserModal = false" />
   </div>
 </template>

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

@@ -1,16 +1,70 @@
 <script setup lang="ts">
 import { enumColor as colors } from '#imports'
 
+const { showSwaggerLink } = defineProps<{ showSwaggerLink?: boolean }>()
+
+const { project } = useProject()
+
+const route = useRoute()
+
+const { appInfo } = useGlobal()
+
 const { lang: currentLang } = useGlobal()
 
 const isRtlLang = $computed(() => ['fa'].includes(currentLang.value))
+
+const openSwaggerLink = () => {
+  openLink(`/api/v1/db/meta/projects/${route.params.projectId}/swagger`, appInfo.value?.ncSiteUrl)
+}
 </script>
 
 <template>
   <a-card :body-style="{ padding: '0px' }" class="w-[300px] shadow-sm !rounded-lg">
     <a-list class="w-full" dense>
+      <a-list-item v-if="showSwaggerLink && project">
+        <nuxt-link
+          v-t="['e:docs']"
+          class="text-primary !no-underline !text-current py-4 font-weight-medium"
+          target="_blank"
+          @click="openSwaggerLink"
+        >
+          <div class="ml-3 flex items-center text-sm">
+            <LogosSwagger />
+            <!--            todo:  i18n -->
+            <span class="ml-3">{{ project.title }} : Swagger Documentation</span>
+          </div>
+        </nuxt-link>
+      </a-list-item>
+      <a-list-item>
+        <nuxt-link
+          v-t="['e:docs']"
+          class="text-primary !no-underline !text-current"
+          target="_blank"
+          to="https://docs.nocodb.com/"
+        >
+          <div class="ml-3 flex items-center text-sm">
+            <MdiBookOpenOutline class="text-lg text-accent" />
+            <!--            todo:  i18n -->
+            <span class="ml-3">Documentation</span>
+          </div>
+        </nuxt-link>
+      </a-list-item>
+      <a-list-item>
+        <nuxt-link
+          v-t="['e:docs']"
+          class="text-primary !no-underline !text-current"
+          target="_blank"
+          to="https://apis.nocodb.com/"
+        >
+          <div class="ml-3 flex items-center text-sm">
+            <MdiJson class="text-lg text-green-500" />
+            <!--            todo:  i18n -->
+            <span class="ml-3">API Documentation</span>
+          </div>
+        </nuxt-link>
+      </a-list-item>
       <a-list-item>
-        <nuxt-link class="text-primary" to="https://github.com/nocodb/nocodb" target="_blank">
+        <nuxt-link class="text-primary !no-underline !text-current" to="https://github.com/nocodb/nocodb" target="_blank">
           <div class="flex items-center text-sm">
             <mdi-github class="mx-3 text-lg" />
             <div v-if="isRtlLang">
@@ -22,8 +76,8 @@ const isRtlLang = $computed(() => ['fa'].includes(currentLang.value))
             </div>
             <div v-else class="flex items-center">
               <!-- Star -->
-              {{ $t('labels.community.starUs1') }}
-              <mdi-star-outline class="mx-1" />
+              {{ `${$t('labels.community.starUs1')} ` }}
+
               <!-- us on Github -->
               {{ $t('labels.community.starUs2') }}
             </div>
@@ -31,7 +85,7 @@ const isRtlLang = $computed(() => ['fa'].includes(currentLang.value))
         </nuxt-link>
       </a-list-item>
       <a-list-item>
-        <nuxt-link class="text-primary" to="https://calendly.com/nocodb-meeting" target="_blank">
+        <nuxt-link class="text-primary !no-underline !text-current" to="https://calendly.com/nocodb-meeting" target="_blank">
           <div class="flex items-center text-sm">
             <mdi-calendar-month class="mx-3 text-lg" :color="colors.dark[3 % colors.dark.length]" />
             <!-- Book a Free DEMO -->
@@ -42,7 +96,7 @@ const isRtlLang = $computed(() => ['fa'].includes(currentLang.value))
         </nuxt-link>
       </a-list-item>
       <a-list-item>
-        <nuxt-link class="text-primary" to="https://discord.gg/5RgZmkW" target="_blank">
+        <nuxt-link class="text-primary !no-underline !text-current" to="https://discord.gg/5RgZmkW" target="_blank">
           <div class="flex items-center text-sm">
             <mdi-discord class="mx-3 text-lg" :color="colors.dark[0 % colors.dark.length]" />
             <!-- Get your questions answered -->
@@ -53,7 +107,7 @@ const isRtlLang = $computed(() => ['fa'].includes(currentLang.value))
         </nuxt-link>
       </a-list-item>
       <a-list-item>
-        <nuxt-link class="text-primary" to="https://twitter.com/NocoDB" target="_blank">
+        <nuxt-link class="text-primary !no-underline !text-current" to="https://twitter.com/NocoDB" target="_blank">
           <div class="flex items-center text-sm">
             <mdi-twitter class="mx-3 text-lg" :color="colors.dark[1 % colors.dark.length]" />
             <!-- Follow NocoDB -->
@@ -63,10 +117,29 @@ const isRtlLang = $computed(() => ['fa'].includes(currentLang.value))
           </div>
         </nuxt-link>
       </a-list-item>
-      <a-list-item v-t="['e:hiring']">
-        <nuxt-link class="text-primary" target="_blank" to="http://careers.nocodb.com">
+      <a-list-item>
+        <nuxt-link
+          v-t="['e:hiring']"
+          class="text-primary !no-underline !text-current"
+          target="_blank"
+          to="http://careers.nocodb.com"
+        >
           <div class="flex items-center text-sm">
-            <div class="ml-3">🚀 <span class="ml-2">We are Hiring!!!</span></div>
+            <!--            todo:  i18n -->
+            <div class="ml-3">🚀 <span class="ml-3">We are Hiring!!!</span></div>
+          </div>
+        </nuxt-link>
+      </a-list-item>
+      <a-list-item>
+        <nuxt-link
+          v-t="['e:reddit']"
+          class="text-primary !no-underline !text-current"
+          target="_blank"
+          to="https://www.reddit.com/r/NocoDB/"
+        >
+          <div class="ml-3 flex items-center text-sm">
+            <LogosRedditIcon />
+            <span class="ml-4">/r/NocoDB/</span>
           </div>
         </nuxt-link>
       </a-list-item>