fix: frontend permission check (#784)

web/app/components/header/account-setting/data-source-page/data-source-notion/index.tsx

@@ -8,6 +8,7 @@ import s from './style.module.css'
 import NotionIcon from '@/app/components/base/notion-icon'
 import { apiPrefix } from '@/config'
 import type { DataSourceNotion as TDataSourceNotion } from '@/models/common'
+import { useAppContext } from '@/context/app-context'
 
 type DataSourceNotionProps = {
   workspaces: TDataSourceNotion[]
@@ -16,6 +17,8 @@ const DataSourceNotion = ({
   workspaces,
 }: DataSourceNotionProps) => {
   const { t } = useTranslation()
+  const { isCurrentWorkspaceManager } = useAppContext()
+
   const connected = !!workspaces.length
 
   return (
@@ -35,18 +38,25 @@ const DataSourceNotion = ({
           }
         </div>
         {
-          !connected
+          connected
             ? (
               <Link
-                className='flex items-center ml-3 px-3 h-7 bg-white border border-gray-200 rounded-md text-xs font-medium text-gray-700 cursor-pointer'
-                href={`${apiPrefix}/oauth/data-source/notion`}>
+                className={
+                  `flex items-center ml-3 px-3 h-7 bg-white border border-gray-200
+                  rounded-md text-xs font-medium text-gray-700
+                  ${isCurrentWorkspaceManager ? 'cursor-pointer' : 'grayscale opacity-50 cursor-default'}`
+                }
+                href={isCurrentWorkspaceManager ? `${apiPrefix}/oauth/data-source/notion` : '/'}>
                 {t('common.dataSource.connect')}
               </Link>
             )
             : (
               <Link
-                href={`${apiPrefix}/oauth/data-source/notion`}
-                className='flex items-center px-3 h-7 bg-white border-[0.5px] border-gray-200 text-xs font-medium text-primary-600 rounded-md cursor-pointer'>
+                href={isCurrentWorkspaceManager ? `${apiPrefix}/oauth/data-source/notion` : '/' }
+                className={
+                  `flex items-center px-3 h-7 bg-white border-[0.5px] border-gray-200 text-xs font-medium text-primary-600 rounded-md
+                  ${isCurrentWorkspaceManager ? 'cursor-pointer' : 'grayscale opacity-50 cursor-default'}`
+                }>
                 <PlusIcon className='w-[14px] h-[14px] mr-[5px]' />
                 {t('common.dataSource.notion.addWorkspace')}
               </Link>

web/app/components/header/account-setting/key-validator/Operate.tsx

@@ -5,6 +5,7 @@ import type { Status } from './declarations'
 type OperateProps = {
   isOpen: boolean
   status: Status
+  disabled?: boolean
   onCancel: () => void
   onSave: () => void
   onAdd: () => void
@@ -14,6 +15,7 @@ type OperateProps = {
 const Operate = ({
   isOpen,
   status,
+  disabled,
   onCancel,
   onSave,
   onAdd,
@@ -44,10 +46,10 @@ const Operate = ({
 
   if (status === 'add') {
     return (
-      <div className='
-        px-3 h-[28px] bg-white border border-gray-200 rounded-md cursor-pointer
-        text-xs font-medium text-gray-700 flex items-center
-      ' onClick={onAdd}>
+      <div className={
+        `px-3 h-[28px] bg-white border border-gray-200 rounded-md cursor-pointer
+        text-xs font-medium text-gray-700 flex items-center ${disabled && 'opacity-50 cursor-default'}}`
+      } onClick={() => !disabled && onAdd()}>
         {t('common.provider.addKey')}
       </div>
     )
@@ -69,10 +71,10 @@ const Operate = ({
             <Indicator color='green' className='mr-4' />
           )
         }
-        <div className='
-          px-3 h-[28px] bg-white border border-gray-200 rounded-md cursor-pointer
-          text-xs font-medium text-gray-700 flex items-center
-        ' onClick={onEdit}>
+        <div className={
+          `px-3 h-[28px] bg-white border border-gray-200 rounded-md cursor-pointer
+          text-xs font-medium text-gray-700 flex items-center ${disabled && 'opacity-50 cursor-default'}}`
+        } onClick={() => !disabled && onEdit()}>
           {t('common.provider.editKey')}
         </div>
       </div>

web/app/components/header/account-setting/key-validator/index.tsx

@@ -13,6 +13,7 @@ export type KeyValidatorProps = {
   forms: Form[]
   keyFrom: KeyFrom
   onSave: (v: ValidateValue) => Promise<boolean | undefined>
+  disabled?: boolean
 }
 
 const KeyValidator = ({
@@ -22,6 +23,7 @@ const KeyValidator = ({
   forms,
   keyFrom,
   onSave,
+  disabled,
 }: KeyValidatorProps) => {
   const triggerKey = `plugins/${type}`
   const { eventEmitter } = useEventEmitterContextContext()
@@ -85,10 +87,11 @@ const KeyValidator = ({
           onSave={handleSave}
           onAdd={handleAdd}
           onEdit={handleEdit}
+          disabled={disabled}
         />
       </div>
       {
-        isOpen && (
+        isOpen && !disabled && (
           <div className='px-4 py-3'>
             {
               forms.map(form => (

web/app/components/header/account-setting/members-page/index.tsx

@@ -16,9 +16,9 @@ import { fetchMembers } from '@/service/common'
 import I18n from '@/context/i18n'
 import { useAppContext } from '@/context/app-context'
 import Avatar from '@/app/components/base/avatar'
-import { useWorkspacesContext } from '@/context/workspace-context'
 
 dayjs.extend(relativeTime)
+
 const MembersPage = () => {
   const { t } = useTranslation()
   const RoleMap = {
@@ -27,15 +27,13 @@ const MembersPage = () => {
     normal: t('common.members.normal'),
   }
   const { locale } = useContext(I18n)
-  const { userProfile } = useAppContext()
+  const { userProfile, currentWorkspace, isCurrentWorkspaceManager } = useAppContext()
   const { data, mutate } = useSWR({ url: '/workspaces/current/members' }, fetchMembers)
   const [inviteModalVisible, setInviteModalVisible] = useState(false)
   const [invitationLink, setInvitationLink] = useState('')
   const [invitedModalVisible, setInvitedModalVisible] = useState(false)
   const accounts = data?.accounts || []
   const owner = accounts.filter(account => account.role === 'owner')?.[0]?.email === userProfile.email
-  const { workspaces } = useWorkspacesContext()
-  const currentWrokspace = workspaces.filter(item => item.current)?.[0]
 
   return (
     <>
@@ -43,14 +41,14 @@ const MembersPage = () => {
         <div className='flex items-center mb-4 p-3 bg-gray-50 rounded-2xl'>
           <div className={cn(s['logo-icon'], 'shrink-0')}></div>
           <div className='grow mx-2'>
-            <div className='text-sm font-medium text-gray-900'>{currentWrokspace?.name}</div>
+            <div className='text-sm font-medium text-gray-900'>{currentWorkspace?.name}</div>
             <div className='text-xs text-gray-500'>{t('common.userProfile.workspace')}</div>
           </div>
-          <div className='
-            shrink-0 flex items-center py-[7px] px-3 border-[0.5px] border-gray-200
+          <div className={
+            `shrink-0 flex items-center py-[7px] px-3 border-[0.5px] border-gray-200
             text-[13px] font-medium text-primary-600 bg-white
-            shadow-xs rounded-lg cursor-pointer
-          ' onClick={() => setInviteModalVisible(true)}>
+            shadow-xs rounded-lg ${isCurrentWorkspaceManager ? 'cursor-pointer' : 'grayscale opacity-50 cursor-default'}`
+          } onClick={() => isCurrentWorkspaceManager && setInviteModalVisible(true)}>
             <UserPlusIcon className='w-4 h-4 mr-2 ' />
             {t('common.members.invite')}
           </div>

web/app/components/header/account-setting/plugin-page/SerpapiPlugin.tsx

@@ -6,6 +6,7 @@ import type { Form, ValidateValue } from '../key-validator/declarations'
 import { updatePluginKey, validatePluginKey } from './utils'
 import { useToastContext } from '@/app/components/base/toast'
 import type { PluginProvider } from '@/models/common'
+import { useAppContext } from '@/context/app-context'
 
 type SerpapiPluginProps = {
   plugin: PluginProvider
@@ -16,6 +17,7 @@ const SerpapiPlugin = ({
   onUpdate,
 }: SerpapiPluginProps) => {
   const { t } = useTranslation()
+  const { isCurrentWorkspaceManager } = useAppContext()
   const { notify } = useToastContext()
 
   const forms: Form[] = [{
@@ -70,6 +72,7 @@ const SerpapiPlugin = ({
         link: 'https://serpapi.com/manage-api-key',
       }}
       onSave={handleSave}
+      disabled={!isCurrentWorkspaceManager}
     />
   )
 }