feat: customize permission detect

web/app/components/explore/app-card/index.tsx

@@ -17,14 +17,16 @@ const CustomizeBtn = (
 
 export type AppCardProps = {
   app: App,
+  canCreate: boolean,
   onCreate: () => void,
   onAddToWorkspace: (appId: string) => void,
 }
 
 const AppCard = ({
   app,
+  canCreate,
   onCreate,
-  onAddToWorkspace
+  onAddToWorkspace,
 }: AppCardProps) => {
   const { t } = useTranslation()
   const {app: appBasicInfo} = app
@@ -47,10 +49,12 @@ const AppCard = ({
               <PlusIcon className='w-4 h-4 mr-1' />
               <span className='text-xs'>{t('explore.appCard.addToWorkspace')}</span>
             </Button>
-            <Button className='grow flex items-center !h-7 space-x-1' onClick={onCreate}>
+            {canCreate && (
-              {CustomizeBtn}
+              <Button className='grow flex items-center !h-7 space-x-1' onClick={onCreate}>
-              <span className='text-xs'>{t('explore.appCard.customize')}</span>
+                {CustomizeBtn}
-            </Button>
+                <span className='text-xs'>{t('explore.appCard.customize')}</span>
+              </Button>
+            )}
           </div>
         </div>
       </div>

web/app/components/explore/app-list/index.tsx

@@ -16,7 +16,7 @@ import Toast from '../../base/toast'
 
 const Apps: FC = ({ }) => {
   const { t } = useTranslation()
-  const { setControlUpdateInstalledApps } = useContext(ExploreContext)
+  const { setControlUpdateInstalledApps, hasEditPermission } = useContext(ExploreContext)
   const [currCategory, setCurrCategory] = React.useState('')
   const [allList, setAllList] = React.useState<App[]>([])
   const [isLoaded, setIsLoaded] = React.useState(false)
@@ -95,6 +95,7 @@ const Apps: FC = ({ }) => {
             <AppCard 
               key={app.app_id}
               app={app}
+              canCreate={hasEditPermission}
               onCreate={() => {
                 setCurrApp(app)
                 setIsShowCreateModal(true)

web/app/components/explore/index.tsx

@@ -1,8 +1,9 @@
 'use client'
-import React, { FC } from 'react'
+import React, { FC, useEffect } from 'react'
 import ExploreContext from '@/context/explore-context'
 import Sidebar from '@/app/components/explore/sidebar'
-
+import { useAppContext } from '@/context/app-context'
+import { fetchMembers } from '@/service/common'
 
 export interface IExploreProps {
   children: React.ReactNode
@@ -12,13 +13,26 @@ const Explore: FC<IExploreProps> = ({
   children
 }) => {
   const [controlUpdateInstalledApps, setControlUpdateInstalledApps] = React.useState(0)
+  const { userProfile } = useAppContext()
+  const [hasEditPermission, setHasEditPermission] = React.useState(false)
+
+  useEffect(() => {
+    (async () => {
+      const { accounts } = await fetchMembers({ url: '/workspaces/current/members', params: {}})
+      if(!accounts) return
+      const currUser = accounts.find(account => account.id === userProfile.id)
+      setHasEditPermission(currUser?.role !== 'normal')
+    })()
+  }, [])
+
   return (
     <div className='flex h-full bg-gray-100 border-t border-gray-200'>
       <ExploreContext.Provider
         value={
           {
             controlUpdateInstalledApps,
-            setControlUpdateInstalledApps
+            setControlUpdateInstalledApps,
+            hasEditPermission
           }
         }
       >

web/context/explore-context.ts

@@ -3,11 +3,13 @@ import { createContext } from 'use-context-selector'
 type IExplore = {
   controlUpdateInstalledApps: number
   setControlUpdateInstalledApps: (controlUpdateInstalledApps: number) => void
+  hasEditPermission: boolean
 }
 
 const ExploreContext = createContext<IExplore>({
   controlUpdateInstalledApps: 0,
   setControlUpdateInstalledApps: () => { },
+  hasEditPermission: false,
 })
 
 export default ExploreContext