fix: frontend permission check (#784)

web/app/(commonLayout)/apps/AppCard.tsx

@@ -12,7 +12,7 @@ import Confirm from '@/app/components/base/confirm'
 import { ToastContext } from '@/app/components/base/toast'
 import { deleteApp } from '@/service/apps'
 import AppIcon from '@/app/components/base/app-icon'
-import AppsContext from '@/context/app-context'
+import AppsContext, { useAppContext } from '@/context/app-context'
 
 export type AppCardProps = {
   app: App
@@ -25,6 +25,7 @@ const AppCard = ({
 }: AppCardProps) => {
   const { t } = useTranslation()
   const { notify } = useContext(ToastContext)
+  const { isCurrentWorkspaceManager } = useAppContext()
 
   const mutateApps = useContextSelector(AppsContext, state => state.mutateApps)
 
@@ -55,7 +56,8 @@ const AppCard = ({
           <div className={style.listItemHeading}>
             <div className={style.listItemHeadingContent}>{app.name}</div>
           </div>
-          <span className={style.deleteAppIcon} onClick={onDeleteClick} />
+          { isCurrentWorkspaceManager
+          && <span className={style.deleteAppIcon} onClick={onDeleteClick} />}
         </div>
         <div className={style.listItemDescription}>{app.model_config?.pre_prompt}</div>
         <div className={style.listItemFooter}>

web/app/(commonLayout)/apps/Apps.tsx

@@ -8,7 +8,7 @@ import AppCard from './AppCard'
 import NewAppCard from './NewAppCard'
 import type { AppListResponse } from '@/models/app'
 import { fetchAppList } from '@/service/apps'
-import { useSelector } from '@/context/app-context'
+import { useAppContext, useSelector } from '@/context/app-context'
 import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
 
 const getKey = (pageIndex: number, previousPageData: AppListResponse) => {
@@ -19,6 +19,7 @@ const getKey = (pageIndex: number, previousPageData: AppListResponse) => {
 
 const Apps = () => {
   const { t } = useTranslation()
+  const { isCurrentWorkspaceManager } = useAppContext()
   const { data, isLoading, setSize, mutate } = useSWRInfinite(getKey, fetchAppList, { revalidateFirstPage: false })
   const loadingStateRef = useRef(false)
   const pageContainerRef = useSelector(state => state.pageContainerRef)
@@ -55,7 +56,8 @@ const Apps = () => {
       {data?.map(({ data: apps }) => apps.map(app => (
         <AppCard key={app.id} app={app} onDelete={mutate} />
       )))}
-      <NewAppCard ref={anchorRef} onSuccess={mutate} />
+      { isCurrentWorkspaceManager
+      && <NewAppCard ref={anchorRef} onSuccess={mutate} />}
     </nav>
   )
 }