Refactor AccessScopeDropdown and UserGroupSelector to update user group selection logic

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

@@ -16,19 +16,19 @@ type Props = {
   selectedAccessScope: AiAssistantAccessScope,
   selectedUserGroup: PopulatedGrantedGroup[];
   onSelectAccessScope: (accessScope: AiAssistantAccessScope) => void,
-  onSelectUserGroup: (userGroup: PopulatedGrantedGroup[]) => void,
+  onSelectUserGroup: (userGroup: PopulatedGrantedGroup) => void,
 }
 
 export const AccessScopeDropdown: React.FC<Props> = (props: Props) => {
+  const {
+    selectedAccessScope, selectedUserGroup, onSelectAccessScope, onSelectUserGroup,
+  } = props;
+
   const { t } = useTranslation();
   const { data: currentUser } = useCurrentUser();
 
   const [isUserGroupSelectorOpen, setIsUserGroupSelectorOpen] = useState(false);
 
-  const {
-    selectedAccessScope, selectedUserGroup, onSelectAccessScope, onSelectUserGroup,
-  } = props;
-
   const getAccessScopeLabel = useCallback((accessScope: AiAssistantAccessScope) => {
     const baseLabel = `modal_ai_assistant.access_scope.${accessScope}`;
     return accessScope === AiAssistantAccessScope.OWNER
@@ -41,10 +41,7 @@ export const AccessScopeDropdown: React.FC<Props> = (props: Props) => {
     if (accessScope === AiAssistantAccessScope.GROUPS) {
       setIsUserGroupSelectorOpen(true);
     }
-    else {
-      onSelectUserGroup([]);
-    }
-  }, [onSelectAccessScope, onSelectUserGroup]);
+  }, [onSelectAccessScope]);
 
   return (
     <>
@@ -69,6 +66,7 @@ export const AccessScopeDropdown: React.FC<Props> = (props: Props) => {
         closeModal={() => setIsUserGroupSelectorOpen(false)}
         selectedUserGroup={selectedUserGroup}
         onSelect={onSelectUserGroup}
+        onCompleteSelect={() => setIsUserGroupSelectorOpen(false)}
       />
     </>
   );

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

@@ -36,9 +36,17 @@ const AiAssistantManegementModalSubstance = (): JSX.Element => {
     setSelectedAccessScope(accessScope);
   }, []);
 
-  const selectUserGroupsForShareScopeHandler = useCallback((userGroups: PopulatedGrantedGroup[]) => {
-    setSelectedUserGroupsForAccessScope(userGroups);
-  }, []);
+  const selectUserGroupsForAccessScopeHandler = useCallback((targetUserGroup: PopulatedGrantedGroup) => {
+    const selectedUserGroupIds = selectedUserGroupsForAccessScope.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));
+    }
+    else {
+      // if not selected, add it
+      setSelectedUserGroupsForAccessScope([...selectedUserGroupsForAccessScope, targetUserGroup]);
+    }
+  }, [selectedUserGroupsForAccessScope]);
 
   const clickOpenPageSelectModalHandler = useCallback(() => {
     const onSelected = (page: IPageForItem, isIncludeSubPage: boolean) => {
@@ -126,7 +134,7 @@ const AiAssistantManegementModalSubstance = (): JSX.Element => {
               selectedAccessScope={selectedAccessScope}
               selectedUserGroup={selectedUserGroupsForAccessScope}
               onSelectAccessScope={clickAccessScopeItemHandler}
-              onSelectUserGroup={selectUserGroupsForShareScopeHandler}
+              onSelectUserGroup={selectUserGroupsForAccessScopeHandler}
             />
           </FormGroup>
 

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

@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from 'react';
+import React, { useCallback } from 'react';
 
 import { GroupType } from '@growi/core';
 import { useTranslation } from 'react-i18next';
@@ -13,41 +13,29 @@ type Props = {
   isOpen: boolean,
   closeModal: () => void,
   selectedUserGroup: PopulatedGrantedGroup[],
-  onSelect: (userGroup: PopulatedGrantedGroup[]) => void,
+  onSelect: (userGroup: PopulatedGrantedGroup) => void,
+  onCompleteSelect: () => void,
 }
 
 const UserGroupSelectorSubstance: React.FC<Props> = (props: Props) => {
+  const { selectedUserGroup, onSelect, onCompleteSelect } = props;
+
   const { t } = useTranslation();
   const { data: userRelatedGroups } = useSWRxUserRelatedGroups();
 
-  const [selectedUserGroup_, setSelectedUserGroup_] = useState<PopulatedGrantedGroup[]>(props.selectedUserGroup);
-
-  const groupListItemClickHandler = useCallback((targetUserGroup: PopulatedGrantedGroup) => {
-    const selectedUserGroupIds = selectedUserGroup_.map(userGroup => userGroup.item._id);
-    if (selectedUserGroupIds.includes(targetUserGroup.item._id)) {
-      // if selected, remove it
-      setSelectedUserGroup_(selectedUserGroup_.filter(userGroup => userGroup.item._id !== targetUserGroup.item._id));
-    }
-    else {
-      // if not selected, add it
-      setSelectedUserGroup_([...selectedUserGroup_, targetUserGroup]);
-    }
-  }, [selectedUserGroup_]);
-
   const checked = useCallback((targetUserGroup: PopulatedGrantedGroup) => {
-    const selectedUserGroupIds = selectedUserGroup_.map(userGroup => userGroup.item._id);
+    const selectedUserGroupIds = selectedUserGroup.map(userGroup => userGroup.item._id);
     return selectedUserGroupIds.includes(targetUserGroup.item._id);
-  }, [selectedUserGroup_]);
+  }, [selectedUserGroup]);
 
   return (
     <ModalBody className="d-flex flex-column">
-
       {userRelatedGroups != null && userRelatedGroups.relatedGroups.map(userGroup => (
         <button
           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={() => groupListItemClickHandler(userGroup)}
+          onClick={() => onSelect(userGroup)}
         >
           <input type="checkbox" checked={checked(userGroup)} />
           <p className="ms-3 mb-0">{userGroup.item.name}</p>
@@ -58,7 +46,7 @@ const UserGroupSelectorSubstance: React.FC<Props> = (props: Props) => {
       <button
         type="button"
         className="btn btn-primary mt-2 mx-auto"
-        onClick={() => props.onSelect(selectedUserGroup_)}
+        onClick={onCompleteSelect}
       >
         {t('Done')}
       </button>