feat: add help tip (#371)

* fix: formula display error * fix: db connection can not delete * feat: add help tip
teableio · Feb 22, 2024 · 32235b4 · 32235b4
1 parent d2d6e3c
commit 32235b4
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 26 deletions.
diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
@@ -1,2 +1,2 @@
 github: teableio
-ko_fi: teableio
+ko_fi: teable
diff --git a/apps/nextjs-app/src/features/app/blocks/table/table-header/TableHeader.tsx b/apps/nextjs-app/src/features/app/blocks/table/table-header/TableHeader.tsx
@@ -1,9 +1,9 @@
-import { Settings, UserPlus } from '@teable/icons';
+import { HelpCircle, Settings, UserPlus } from '@teable/icons';
 import { useBase, useTableId } from '@teable/sdk/hooks';
 import { Button } from '@teable/ui-lib/shadcn';
-
 import Link from 'next/link';
 import { SpaceCollaboratorModalTrigger } from '@/features/app/components/collaborator-manage/space/SpaceCollaboratorModalTrigger';
+import { getHelpLink } from '@/lib/help-link';
 import { ExpandViewList } from '../../view/list/ExpandViewList';
 import { ViewList } from '../../view/list/ViewList';
 
@@ -25,17 +25,24 @@ export const TableHeader: React.FC = () => {
       <div className="grow basis-0"></div>
       <Collaborators />
 
-      <Button asChild variant="ghost" size="xs" className="hidden sm:flex">
-        <Link
-          href={{
-            pathname: '/base/[baseId]/[tableId]/design',
-            query: { baseId: base.id, tableId },
-          }}
-          title="Design"
-        >
-          <Settings className="size-4" />
-        </Link>
-      </Button>
+      <div className="flex">
+        <Button asChild variant="ghost" size="xs" className="hidden sm:flex">
+          <Link
+            href={{
+              pathname: '/base/[baseId]/[tableId]/design',
+              query: { baseId: base.id, tableId },
+            }}
+            title="Design"
+          >
+            <Settings className="size-4" />
+          </Link>
+        </Button>
+        <Button asChild variant="ghost" size="xs" className="hidden sm:flex">
+          <a href={getHelpLink()} title="Help" target="_blank" rel="noreferrer">
+            <HelpCircle className="size-4" />
+          </a>
+        </Button>
+      </div>
       <SpaceCollaboratorModalTrigger
         space={{
           name: base.name,

diff --git a/apps/nextjs-app/src/features/app/dashboard/Pages.tsx b/apps/nextjs-app/src/features/app/dashboard/Pages.tsx
@@ -1,10 +1,10 @@
 import { AnchorProvider } from '@teable/sdk/context';
 import { Button, Tabs } from '@teable/ui-lib/shadcn';
-import { Alert, AlertTitle, AlertDescription } from '@teable/ui-lib/shadcn/ui/alert';
 import { useTranslation } from 'next-i18next';
 import { useState } from 'react';
 import { useLocalStorage } from 'react-use';
 import { dashboardConfig } from '@/features/i18n/dashboard.config';
+import { getHelpLink } from '@/lib/help-link';
 import { Pickers } from './components/Pickers';
 import { GridContent } from './GridContent';
 
@@ -22,18 +22,33 @@ export function DashboardPage() {
             <h2 className="text-3xl font-bold tracking-tight">{t('common:noun.dashboard')}</h2>
           </div>
           {!showDashboard ? (
-            <div className="flex h-full items-center justify-center p-4">
-              <Alert className="w-[400px]">
-                <AlertTitle>
-                  <span className="text-lg">🏗️</span> Coming soon
-                </AlertTitle>
-                <AlertDescription>
-                  Dashboard is under development, click to view demo{' '}
-                  <Button size="xs" onClick={() => setShowDashboard(true)}>
-                    Demo
+            <div className="flex h-full flex-col items-center justify-center p-4">
+              <ul className="mb-4 space-y-2 text-left">
+                <li>Click the + sign on the left sidebar to create a table.</li>
+                <li>
+                  Visit the{' '}
+                  <a
+                    href={getHelpLink()}
+                    className="text-blue-500 hover:text-blue-700"
+                    target="_blank"
+                    rel="noreferrer"
+                  >
+                    Help Center
+                  </a>{' '}
+                  for assistance.
+                </li>
+                <li>
+                  Dashboard is under development,
+                  <Button
+                    className="text-md"
+                    variant="link"
+                    size="xs"
+                    onClick={() => setShowDashboard(true)}
+                  >
+                    click to view demo
                   </Button>
-                </AlertDescription>
-              </Alert>
+                </li>
+              </ul>
             </div>
           ) : (
             <Tabs defaultValue="overview" className="overflow-y-auto">

diff --git a/apps/nextjs-app/src/lib/help-link.ts b/apps/nextjs-app/src/lib/help-link.ts
@@ -0,0 +1,5 @@
+export const getHelpLink = () =>
+  'https://help.' +
+  (typeof window === 'object'
+    ? window.location.hostname.split('.').slice(-2).join('.')
+    : 'teable.io');
diff --git a/apps/nextjs-app/src/pages/base/[baseId].tsx b/apps/nextjs-app/src/pages/base/[baseId].tsx
@@ -1,4 +1,5 @@
 import type { GetServerSideProps } from 'next';
+import { ssrApi } from '@/backend/api/rest/table.ssr';
 import type { NextPageWithLayout } from '@/lib/type';
 
 const Node: NextPageWithLayout = () => {
@@ -7,6 +8,17 @@ const Node: NextPageWithLayout = () => {
 
 export const getServerSideProps: GetServerSideProps = async (context) => {
   const { baseId } = context.query;
+  const tables = await ssrApi.getTables(baseId as string);
+  const defaultTable = tables[0];
+  if (defaultTable) {
+    const defaultView = await ssrApi.getDefaultViewId(baseId as string, defaultTable.id);
+    return {
+      redirect: {
+        destination: `/base/${baseId}/${defaultTable.id}/${defaultView.id}`,
+        permanent: false,
+      },
+    };
+  }
 
   return {
     redirect: {