Feat: App folder and permission (#1726)

* app folder

* feat: app foldere

* fix: run app param error

* perf: select app ux

* perf: folder rerender

* fix: ts

* fix: parentId

* fix: permission

* perf: loading ux

* perf: per select ux

* perf: clb context

* perf: query extension tip

* fix: ts

* perf: app detail per

* perf: default per

projects/app/src/components/support/permission/MemberManager/context.tsx

@@ -1,3 +1,4 @@
+import { BoxProps, useDisclosure } from '@chakra-ui/react';
 import { CollaboratorItemType } from '@fastgpt/global/support/permission/collaborator';
 import { PermissionList } from '@fastgpt/global/support/permission/constant';
 import { Permission } from '@fastgpt/global/support/permission/controller';
@@ -5,8 +6,14 @@ import { PermissionListType, PermissionValueType } from '@fastgpt/global/support
 import { useQuery } from '@tanstack/react-query';
 import { ReactNode, useCallback } from 'react';
 import { createContext } from 'use-context-selector';
+import dynamic from 'next/dynamic';
+
+import MemberListCard, { MemberListCardProps } from './MemberListCard';
+const AddMemberModal = dynamic(() => import('./AddMemberModal'));
+const ManageModal = dynamic(() => import('./ManageModal'));
 
 export type MemberManagerInputPropsType = {
+  permission: Permission;
   onGetCollaboratorList: () => Promise<CollaboratorItemType[]>;
   permissionList: PermissionListType;
   onUpdateCollaborators: (tmbIds: string[], permission: PermissionValueType) => any;
@@ -16,7 +23,12 @@ export type MemberManagerPropsType = MemberManagerInputPropsType & {
   collaboratorList: CollaboratorItemType[];
   refetchCollaboratorList: () => void;
   isFetchingCollaborator: boolean;
-  getPreLabelList: (per: PermissionValueType) => string[];
+  getPerLabelList: (per: PermissionValueType) => string[];
+};
+export type ChildrenProps = {
+  onOpenAddMember: () => void;
+  onOpenManageModal: () => void;
+  MemberListCard: (props: MemberListCardProps) => JSX.Element;
 };
 
 type CollaboratorContextType = MemberManagerPropsType & {};
@@ -30,7 +42,7 @@ export const CollaboratorContext = createContext<CollaboratorContextType>({
   onDelOneCollaborator: function () {
     throw new Error('Function not implemented.');
   },
-  getPreLabelList: function (): string[] {
+  getPerLabelList: function (): string[] {
     throw new Error('Function not implemented.');
   },
   refetchCollaboratorList: function (): void {
@@ -39,33 +51,36 @@ export const CollaboratorContext = createContext<CollaboratorContextType>({
   onGetCollaboratorList: function (): Promise<CollaboratorItemType[]> {
     throw new Error('Function not implemented.');
   },
-  isFetchingCollaborator: false
+  isFetchingCollaborator: false,
+  permission: new Permission()
 });
 
 export const CollaboratorContextProvider = ({
+  permission,
   onGetCollaboratorList,
   permissionList,
   onUpdateCollaborators,
   onDelOneCollaborator,
   children
 }: MemberManagerInputPropsType & {
-  children: ReactNode;
+  children: (props: ChildrenProps) => ReactNode;
 }) => {
   const {
     data: collaboratorList = [],
     refetch: refetchCollaboratorList,
     isLoading: isFetchingCollaborator
   } = useQuery(['collaboratorList'], onGetCollaboratorList);
+
   const onUpdateCollaboratorsThen = async (tmbIds: string[], permission: PermissionValueType) => {
     await onUpdateCollaborators(tmbIds, permission);
     refetchCollaboratorList();
   };
-  const onDelOneCollaboratorThem = async (tmbId: string) => {
+  const onDelOneCollaboratorThen = async (tmbId: string) => {
     await onDelOneCollaborator(tmbId);
     refetchCollaboratorList();
   };
 
-  const getPreLabelList = useCallback(
+  const getPerLabelList = useCallback(
     (per: PermissionValueType) => {
       const Per = new Permission({ per });
       const labels: string[] = [];
@@ -91,17 +106,33 @@ export const CollaboratorContextProvider = ({
     [permissionList]
   );
 
+  const {
+    isOpen: isOpenAddMember,
+    onOpen: onOpenAddMember,
+    onClose: onCloseAddMember
+  } = useDisclosure();
+  const {
+    isOpen: isOpenManageModal,
+    onOpen: onOpenManageModal,
+    onClose: onCloseManageModal
+  } = useDisclosure();
+
   const contextValue = {
+    permission,
     onGetCollaboratorList,
     collaboratorList,
     refetchCollaboratorList,
     isFetchingCollaborator,
     permissionList,
     onUpdateCollaborators: onUpdateCollaboratorsThen,
-    onDelOneCollaborator: onDelOneCollaboratorThem,
-    getPreLabelList
+    onDelOneCollaborator: onDelOneCollaboratorThen,
+    getPerLabelList
   };
   return (
-    <CollaboratorContext.Provider value={contextValue}>{children}</CollaboratorContext.Provider>
+    <CollaboratorContext.Provider value={contextValue}>
+      {children({ onOpenAddMember, onOpenManageModal, MemberListCard })}
+      {isOpenAddMember && <AddMemberModal onClose={onCloseAddMember} />}
+      {isOpenManageModal && <ManageModal onClose={onCloseManageModal} />}
+    </CollaboratorContext.Provider>
   );
 };