Refactor AiAssistantManagementEditShare to unify scope selection handling and improve component structure

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

@@ -1,11 +1,10 @@
 import React, { useCallback, useState } from 'react';
 
 import {
-  ModalBody, Input, Label, Form, FormGroup,
+  ModalBody, Input, Label,
 } from 'reactstrap';
 
-import type { AiAssistantShareScope } from '~/features/openai/interfaces/ai-assistant';
-import { AiAssistantAccessScope } from '~/features/openai/interfaces/ai-assistant';
+import { AiAssistantAccessScope, AiAssistantShareScope } from '~/features/openai/interfaces/ai-assistant';
 import type { PopulatedGrantedGroup } from '~/interfaces/page-grant';
 
 import { AccessScopeDropdown } from './AccessScopeDropdown';
@@ -19,58 +18,77 @@ type Props = {
   selectedShareScope: AiAssistantShareScope,
   selectedAccessScope: AiAssistantAccessScope,
   onSelectUserGroup: (userGroup: PopulatedGrantedGroup) => void,
-  onSelectAccessScope: (accessScope: AiAssistantAccessScope) => void,
+  onSelectScope: (accessScope: AiAssistantAccessScope | AiAssistantShareScope, scopeType?: 'Access' | 'Share') => void,
 }
 
 export const AiAssistantManagementEditShare = (props: Props): JSX.Element => {
   const {
-    selectedAccessScope, selectedUserGroups, onSelectAccessScope, onSelectUserGroup,
+    selectedAccessScope,
+    selectedShareScope,
+    selectedUserGroups,
+    onSelectScope,
+    onSelectUserGroup,
   } = props;
 
   const [isShared, setIsShared] = useState(false);
   const [isUserGroupSelectorOpen, setIsUserGroupSelectorOpen] = useState(false);
 
+  const changeShareToggleHandler = useCallback(() => {
+    setIsShared((prev) => {
+      if (prev) { // if isShared === true
+        onSelectScope(AiAssistantShareScope.OWNER);
+      }
+      return !prev;
+    });
+  }, [onSelectScope]);
+
   const selectAccessScopeHandler = useCallback((accessScope: AiAssistantAccessScope) => {
-    onSelectAccessScope(accessScope);
+    onSelectScope(accessScope, 'Access');
     if (accessScope === AiAssistantAccessScope.GROUPS) {
       setIsUserGroupSelectorOpen(true);
     }
-  }, [onSelectAccessScope]);
+  }, [onSelectScope]);
+
+  const selectShareScopeHandler = useCallback((shareScope: AiAssistantShareScope) => {
+    onSelectScope(shareScope, 'Share');
+    if (shareScope === AiAssistantShareScope.GROUPS) {
+      setIsUserGroupSelectorOpen(true);
+    }
+  }, [onSelectScope]);
 
   return (
     <>
       <AiAssistantManagementHeader />
 
       <ModalBody className="px-4">
-        <Form>
-          {/* トグルスイッチ */}
-          <div className="form-check form-switch mb-4">
-            <Input
-              type="switch"
-              role="switch"
-              id="shareAssistantSwitch"
-              className="form-check-input"
-              checked={isShared}
-              onChange={() => setIsShared(!isShared)}
-            />
-            <Label className="form-check-label" for="shareAssistantSwitch">
-              アシスタントを共有する
-            </Label>
-          </div>
+        <div className="form-check form-switch mb-4">
+          <Input
+            type="switch"
+            role="switch"
+            id="shareAssistantSwitch"
+            className="form-check-input"
+            checked={isShared}
+            onChange={changeShareToggleHandler}
+          />
+          <Label className="form-check-label" for="shareAssistantSwitch">
+            アシスタントを共有する
+          </Label>
+        </div>
 
-          {/* アクセス権限ドロップダウン */}
-          <div className="mb-4">
-            <Label className="text-secondary mb-2">ページのアクセス権限</Label>
-            <AccessScopeDropdown
-              isDisabled={!isShared}
-              selectedAccessScope={selectedAccessScope}
-              onSelect={selectAccessScopeHandler}
-            />
-          </div>
+        <div className="mb-4">
+          <Label className="text-secondary mb-2">ページのアクセス権限</Label>
+          <AccessScopeDropdown
+            isDisabled={!isShared}
+            selectedAccessScope={selectedAccessScope}
+            onSelect={selectAccessScopeHandler}
+          />
+        </div>
 
-          {/* 共有範囲ラジオグループ */}
-          <ShareScopeSwitch isDisabled={!isShared} />
-        </Form>
+        <ShareScopeSwitch
+          isDisabled={!isShared}
+          selectedShareScope={selectedShareScope}
+          onSelect={selectShareScopeHandler}
+        />
 
         <UserGroupSelector
           isOpen={isUserGroupSelectorOpen}

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

@@ -65,8 +65,17 @@ const AiAssistantManagementModalSubstance = (): JSX.Element => {
   /*
   *  For AiAssistantManagementEditShare methods
   */
-  const selectAccessScopeHandler = useCallback((accessScope: AiAssistantAccessScope) => {
+  const selectScopeHandler = useCallback((accessScope: AiAssistantAccessScope | AiAssistantShareScope, scopeType?: 'Access' | 'Share') => {
+    if (scopeType === 'Access') {
+      setSelectedAccessScope(accessScope);
+      return;
+    }
+    if (scopeType === 'Share') {
+      setSelectedShareScope(accessScope);
+      return;
+    }
     setSelectedAccessScope(accessScope);
+    setSelectedShareScope(accessScope);
   }, []);
 
   const selectUserGroupsForAccessScopeHandler = useCallback((targetUserGroup: PopulatedGrantedGroup) => {
@@ -122,7 +131,7 @@ const AiAssistantManagementModalSubstance = (): JSX.Element => {
             selectedShareScope={selectedShareScope}
             selectedAccessScope={selectedAccessScope}
             selectedUserGroups={selectedUserGroupsForAccessScope}
-            onSelectAccessScope={selectAccessScopeHandler}
+            onSelectScope={selectScopeHandler}
             onSelectUserGroup={selectUserGroupsForAccessScopeHandler}
           />
         </TabPane>

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

@@ -1,20 +1,23 @@
 import React, { useCallback } from 'react';
 
-import { useTranslation } from 'react-i18next';
 import {
   Input, Label, FormGroup,
 } from 'reactstrap';
 
-import { useCurrentUser } from '~/stores-universal/context';
-
-import { AiAssistantAccessScope } from '../../../../interfaces/ai-assistant';
+import { AiAssistantShareScope } from '../../../../interfaces/ai-assistant';
 
 type Props = {
   isDisabled: boolean,
+  selectedShareScope: AiAssistantShareScope,
+  onSelect: (shareScope: AiAssistantShareScope) => void,
 }
 
 export const ShareScopeSwitch: React.FC<Props> = (props: Props) => {
-  const { isDisabled } = props;
+  const { isDisabled, selectedShareScope, onSelect } = props;
+
+  const checkShareScopeRadioHandler = useCallback((shareScope: AiAssistantShareScope) => {
+    onSelect(shareScope);
+  }, [onSelect]);
 
   return (
     <div className="mb-4">
@@ -26,7 +29,9 @@ export const ShareScopeSwitch: React.FC<Props> = (props: Props) => {
             name="shareScope"
             id="shareAll"
             className="form-check-input"
+            onChange={() => checkShareScopeRadioHandler(AiAssistantShareScope.PUBLIC_ONLY)}
             disabled={isDisabled}
+            checked={selectedShareScope === AiAssistantShareScope.PUBLIC_ONLY}
           />
           <Label check for="shareAll" className="d-flex flex-column">
             <span>全体公開</span>
@@ -40,7 +45,9 @@ export const ShareScopeSwitch: React.FC<Props> = (props: Props) => {
             name="shareScope"
             id="shareGroup"
             className="form-check-input"
+            onChange={() => checkShareScopeRadioHandler(AiAssistantShareScope.GROUPS)}
             disabled={isDisabled}
+            checked={selectedShareScope === AiAssistantShareScope.GROUPS}
           />
           <Label check for="shareGroup" className="d-flex flex-column">
             <span>グループを指定</span>
@@ -55,6 +62,7 @@ export const ShareScopeSwitch: React.FC<Props> = (props: Props) => {
             id="shareAccess"
             className="form-check-input"
             disabled={isDisabled}
+            checked={selectedShareScope === AiAssistantShareScope.OWNER}
             defaultChecked
           />
           <Label check for="shareAccess" className="d-flex flex-column">