Refactor AiAssistantManagementEditShare and related components to unify user group selection handling and improve scope type management

apps/app/src/features/openai/client/components/AiAssistant/AiAssistantManagementModal/AiAssistantManagementEditShare.tsx

@@ -4,8 +4,7 @@ import {
   ModalBody, Input, Label,
 } from 'reactstrap';
 
-import type { AiAssistantScopeType } from '~/features/openai/interfaces/ai-assistant';
-import { AiAssistantAccessScope, AiAssistantShareScope } from '~/features/openai/interfaces/ai-assistant';
+import { AiAssistantScopeType, AiAssistantAccessScope, AiAssistantShareScope } from '~/features/openai/interfaces/ai-assistant';
 import type { PopulatedGrantedGroup } from '~/interfaces/page-grant';
 
 import { AccessScopeDropdown } from './AccessScopeDropdown';
@@ -15,10 +14,11 @@ import { ShareScopeSwitch } from './ShareScopeSwitch';
 
 
 type Props = {
-  selectedUserGroups: PopulatedGrantedGroup[],
   selectedShareScope: AiAssistantShareScope,
   selectedAccessScope: AiAssistantAccessScope,
-  onSelectUserGroup: (userGroup: PopulatedGrantedGroup) => void,
+  selectedUserGroupsForShareScope: PopulatedGrantedGroup[],
+  selectedUserGroupsForAccessScope: PopulatedGrantedGroup[],
+  onSelectUserGroup: (userGroup: PopulatedGrantedGroup, scopeType: AiAssistantScopeType) => void,
   onSelectScope: (scope: AiAssistantAccessScope | AiAssistantShareScope, scopeType?: AiAssistantScopeType) => void,
 }
 
@@ -26,13 +26,15 @@ export const AiAssistantManagementEditShare = (props: Props): JSX.Element => {
   const {
     selectedAccessScope,
     selectedShareScope,
-    selectedUserGroups,
+    selectedUserGroupsForShareScope,
+    selectedUserGroupsForAccessScope,
     onSelectScope,
     onSelectUserGroup,
   } = props;
 
   const [isShared, setIsShared] = useState(false);
   const [isUserGroupSelectorOpen, setIsUserGroupSelectorOpen] = useState(false);
+  const [selectedUserGroupType, setSelectedUserGroupType] = useState<AiAssistantScopeType>(AiAssistantScopeType.ACCESS);
 
   const changeShareToggleHandler = useCallback(() => {
     setIsShared((prev) => {
@@ -46,6 +48,7 @@ export const AiAssistantManagementEditShare = (props: Props): JSX.Element => {
   const selectScopeHandler = useCallback((scope: AiAssistantAccessScope | AiAssistantShareScope, scopeType: AiAssistantScopeType) => {
     onSelectScope(scope, scopeType);
     if ((scope as AiAssistantAccessScope) === AiAssistantAccessScope.GROUPS || (scope as AiAssistantShareScope) === AiAssistantShareScope.GROUPS) {
+      setSelectedUserGroupType(scopeType);
       setIsUserGroupSelectorOpen(true);
     }
   }, [onSelectScope]);
@@ -84,7 +87,8 @@ export const AiAssistantManagementEditShare = (props: Props): JSX.Element => {
         <SelectUserGroupModal
           isOpen={isUserGroupSelectorOpen}
           closeModal={() => setIsUserGroupSelectorOpen(false)}
-          selectedUserGroup={selectedUserGroups}
+          selectedUserGroupType={selectedUserGroupType}
+          selectedUserGroup={selectedUserGroupType === AiAssistantScopeType.ACCESS ? selectedUserGroupsForAccessScope : selectedUserGroupsForShareScope}
           onSelect={onSelectUserGroup}
         />
       </ModalBody>

apps/app/src/features/openai/client/components/AiAssistant/AiAssistantManagementModal/AiAssistantManagementModal.tsx

@@ -35,6 +35,7 @@ const AiAssistantManagementModalSubstance = (): JSX.Element => {
   const [selectedShareScope, setSelectedShareScope] = useState<AiAssistantShareScope>(AiAssistantShareScope.OWNER);
   const [selectedAccessScope, setSelectedAccessScope] = useState<AiAssistantAccessScope>(AiAssistantAccessScope.OWNER);
   const [selectedUserGroupsForAccessScope, setSelectedUserGroupsForAccessScope] = useState<PopulatedGrantedGroup[]>([]);
+  const [selectedUserGroupsForShareScope, setSelectedUserGroupsForShareScope] = useState<PopulatedGrantedGroup[]>([]);
   const [selectedPages, setSelectedPages] = useState<SelectedPage[]>([]);
   const [instruction, setInstruction] = useState<string>(t('modal_ai_assistant.default_instruction'));
 
@@ -78,17 +79,20 @@ const AiAssistantManagementModalSubstance = (): JSX.Element => {
     setSelectedShareScope(accessScope);
   }, []);
 
-  const selectUserGroupsForAccessScopeHandler = useCallback((targetUserGroup: PopulatedGrantedGroup) => {
-    const selectedUserGroupIds = selectedUserGroupsForAccessScope.map(userGroup => userGroup.item._id);
+  const selectUserGroupsHandler = useCallback((targetUserGroup: PopulatedGrantedGroup, scopeType: AiAssistantScopeType) => {
+    const selectedUserGroups = scopeType === AiAssistantScopeType.ACCESS ? selectedUserGroupsForAccessScope : selectedUserGroupsForShareScope;
+    const setSelectedUserGroups = scopeType === AiAssistantScopeType.ACCESS ? setSelectedUserGroupsForAccessScope : setSelectedUserGroupsForShareScope;
+
+    const selectedUserGroupIds = selectedUserGroups.map(userGroup => userGroup.item._id);
     if (selectedUserGroupIds.includes(targetUserGroup.item._id)) {
       // if selected, remove it
-      setSelectedUserGroupsForAccessScope(selectedUserGroupsForAccessScope.filter(userGroup => userGroup.item._id !== targetUserGroup.item._id));
+      setSelectedUserGroups(selectedUserGroups.filter(userGroup => userGroup.item._id !== targetUserGroup.item._id));
     }
     else {
       // if not selected, add it
-      setSelectedUserGroupsForAccessScope([...selectedUserGroupsForAccessScope, targetUserGroup]);
+      setSelectedUserGroups([...selectedUserGroups, targetUserGroup]);
     }
-  }, [selectedUserGroupsForAccessScope]);
+  }, [selectedUserGroupsForAccessScope, selectedUserGroupsForShareScope]);
 
 
   /*
@@ -130,9 +134,10 @@ const AiAssistantManagementModalSubstance = (): JSX.Element => {
           <AiAssistantManagementEditShare
             selectedShareScope={selectedShareScope}
             selectedAccessScope={selectedAccessScope}
-            selectedUserGroups={selectedUserGroupsForAccessScope}
+            selectedUserGroupsForShareScope={selectedUserGroupsForShareScope}
+            selectedUserGroupsForAccessScope={selectedUserGroupsForAccessScope}
             onSelectScope={selectScopeHandler}
-            onSelectUserGroup={selectUserGroupsForAccessScopeHandler}
+            onSelectUserGroup={selectUserGroupsHandler}
           />
         </TabPane>
 

apps/app/src/features/openai/client/components/AiAssistant/AiAssistantManagementModal/SelectUserGroupModal.tsx

@@ -6,18 +6,22 @@ import {
   Modal, ModalHeader, ModalBody,
 } from 'reactstrap';
 
+import type { AiAssistantScopeType } from '~/features/openai/interfaces/ai-assistant';
 import type { PopulatedGrantedGroup } from '~/interfaces/page-grant';
 import { useSWRxUserRelatedGroups } from '~/stores/user';
 
 type Props = {
   isOpen: boolean,
-  closeModal: () => void,
+  selectedUserGroupType: AiAssistantScopeType,
   selectedUserGroup: PopulatedGrantedGroup[],
-  onSelect: (userGroup: PopulatedGrantedGroup) => void,
+  closeModal: () => void,
+  onSelect: (userGroup: PopulatedGrantedGroup, scopeType: AiAssistantScopeType) => void,
 }
 
 const SelectUserGroupModalSubstance: React.FC<Props> = (props: Props) => {
-  const { selectedUserGroup, onSelect, closeModal } = props;
+  const {
+    selectedUserGroup, selectedUserGroupType, onSelect, closeModal,
+  } = props;
 
   const { t } = useTranslation();
   const { data: userRelatedGroups } = useSWRxUserRelatedGroups();
@@ -34,7 +38,7 @@ const SelectUserGroupModalSubstance: React.FC<Props> = (props: Props) => {
           className="btn btn-outline-primary d-flex justify-content-start mb-3 mx-4 align-items-center p-3"
           type="button"
           key={userGroup.item.id}
-          onClick={() => onSelect(userGroup)}
+          onClick={() => onSelect(userGroup, selectedUserGroupType)}
         >
           <input type="checkbox" checked={checked(userGroup)} />
           <p className="ms-3 mb-0">{userGroup.item.name}</p>