feat: add workspace pause tips

msgbyte · Nov 16, 2024 · b4bee32 · b4bee32
1 parent ae33b52
commit b4bee32
Show file tree

Hide file tree

Showing 6 changed files with 86 additions and 47 deletions.
diff --git a/src/client/components/layout/DesktopLayout.tsx b/src/client/components/layout/DesktopLayout.tsx
@@ -25,6 +25,7 @@ import { LayoutProps } from './types';
 import { useTranslation } from '@i18next-toolkit/react';
 import { CommandPanel } from '@/components/CommandPanel';
 import { RiSurveyLine } from 'react-icons/ri';
+import { WorkspacePauseTip } from '../workspace/WorkspacePauseTip';
 
 const defaultLayout: [number, number, number] = [265, 440, 655];
 
@@ -123,57 +124,62 @@ export const DesktopLayout: React.FC<LayoutProps> = React.memo((props) => {
   );
 
   return (
-    <ResizablePanelGroup
-      direction="horizontal"
-      onLayout={(sizes: number[]) => {
-        if (sizes.length === 3) {
-          setLayout(sizes as typeof defaultLayout);
-        } else if (sizes.length === 2) {
-          const listSize = layout[1];
-          const rest = 100 - sizes[0] - listSize;
-          setLayout([sizes[0], listSize, rest]);
-        }
-      }}
-      className="h-full items-stretch"
-    >
-      <ResizablePanel
-        defaultSize={layout[0]}
-        collapsedSize={1}
-        collapsible={true}
-        minSize={10}
-        maxSize={20}
-        onCollapse={() => {
-          setIsCollapsed(true);
-        }}
-        onExpand={() => {
-          setIsCollapsed(false);
+    <div className="flex h-full w-full flex-col">
+      <WorkspacePauseTip />
+
+      <ResizablePanelGroup
+        className="flex-1 items-stretch"
+        direction="horizontal"
+        onLayout={(sizes: number[]) => {
+          if (sizes.length === 3) {
+            setLayout(sizes as typeof defaultLayout);
+          } else if (sizes.length === 2) {
+            const listSize = layout[1];
+            const rest = 100 - sizes[0] - listSize;
+            setLayout([sizes[0], listSize, rest]);
+          }
         }}
-        className={cn(
-          'flex flex-col',
-          isCollapsed && 'min-w-[50px] transition-all duration-300 ease-in-out'
-        )}
       >
-        {navbar}
-      </ResizablePanel>
+        <ResizablePanel
+          defaultSize={layout[0]}
+          collapsedSize={1}
+          collapsible={true}
+          minSize={10}
+          maxSize={20}
+          onCollapse={() => {
+            setIsCollapsed(true);
+          }}
+          onExpand={() => {
+            setIsCollapsed(false);
+          }}
+          className={cn(
+            'flex flex-col',
+            isCollapsed &&
+              'min-w-[50px] transition-all duration-300 ease-in-out'
+          )}
+        >
+          {navbar}
+        </ResizablePanel>
 
-      {props.list && (
-        <>
-          <ResizableHandle withHandle />
-          <ResizablePanel defaultSize={layout[1]} minSize={25}>
-            <div className="h-full overflow-hidden">{props.list}</div>
-          </ResizablePanel>
-        </>
-      )}
+        {props.list && (
+          <>
+            <ResizableHandle withHandle />
+            <ResizablePanel defaultSize={layout[1]} minSize={25}>
+              <div className="h-full overflow-hidden">{props.list}</div>
+            </ResizablePanel>
+          </>
+        )}
 
-      <ResizableHandle withHandle />
-      <ResizablePanel
-        defaultSize={props.list ? layout[2] : layout[1] + layout[2]}
-      >
-        <div className="h-full overflow-hidden">
-          {props.children ?? <Outlet />}
-        </div>
-      </ResizablePanel>
-    </ResizablePanelGroup>
+        <ResizableHandle withHandle />
+        <ResizablePanel
+          defaultSize={props.list ? layout[2] : layout[1] + layout[2]}
+        >
+          <div className="h-full overflow-hidden">
+            {props.children ?? <Outlet />}
+          </div>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+    </div>
   );
 });
 DesktopLayout.displayName = 'DesktopLayout';
diff --git a/src/client/components/layout/MobileLayout.tsx b/src/client/components/layout/MobileLayout.tsx
@@ -18,6 +18,7 @@ import { UserConfig } from './UserConfig';
 import { Drawer, DrawerContent, DrawerTrigger } from '@/components/ui/drawer';
 import { MobileLayoutMenu } from './Menu';
 import { RiSurveyLine } from 'react-icons/ri';
+import { WorkspacePauseTip } from '../workspace/WorkspacePauseTip';
 
 export const MobileLayout: React.FC<LayoutProps> = React.memo((props) => {
   const { t } = useTranslation();
@@ -38,6 +39,8 @@ export const MobileLayout: React.FC<LayoutProps> = React.memo((props) => {
 
       <Separator />
 
+      <WorkspacePauseTip />
+
       <div className="flex-1 overflow-hidden">
         {props.children ?? <Outlet />}
       </div>

diff --git a/src/client/components/workspace/WorkspacePauseTip.tsx b/src/client/components/workspace/WorkspacePauseTip.tsx
@@ -0,0 +1,21 @@
+import { useWorkspacePaused } from '@/store/user';
+import { useTranslation } from '@i18next-toolkit/react';
+import React from 'react';
+
+export const WorkspacePauseTip: React.FC = React.memo(() => {
+  const { t } = useTranslation();
+  const paused = useWorkspacePaused();
+
+  if (!paused) {
+    return null;
+  }
+
+  return (
+    <div className="w-full rounded-b-lg bg-red-500 bg-opacity-60 py-0.5 text-center text-sm">
+      {t(
+        'Current Workspace has been paused because of exceeding the quota. Please contact the administrator to upgrade your plan.'
+      )}
+    </div>
+  );
+});
+WorkspacePauseTip.displayName = 'WorkspacePauseTip';
diff --git a/src/client/store/user.ts b/src/client/store/user.ts
@@ -105,6 +105,7 @@ export function useCurrentWorkspaceSafe() {
       name: currentWorkspace.workspace.name,
       role: currentWorkspace.role,
       settings: currentWorkspace.workspace.settings,
+      paused: currentWorkspace.workspace.paused,
     };
   });
 
@@ -173,3 +174,9 @@ export function useHasAdminPermission(): boolean {
 
   return hasAdminPermission;
 }
+
+export function useWorkspacePaused(): boolean {
+  const currentWorkspace = useCurrentWorkspace();
+
+  return currentWorkspace.paused || false;
+}
diff --git a/src/server/model/_schema/index.ts b/src/server/model/_schema/index.ts
@@ -20,6 +20,7 @@ export const workspaceSchema = z.object({
   id: z.string(),
   name: z.string(),
   settings: z.record(z.string(), z.any()),
+  paused: z.boolean(),
 });
 
 export const userInfoSchema = z.object({

diff --git a/src/server/model/user.ts b/src/server/model/user.ts
@@ -43,6 +43,7 @@ export const createUserSelect = {
           id: true,
           name: true,
           settings: true,
+          paused: true,
         },
       },
     },