Refactor AiAssistantManagementEditShare and ShareScopeSwitch to integrate selectedAccessScope handling

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

@@ -24,8 +24,8 @@ type Props = {
 
 export const AiAssistantManagementEditShare = (props: Props): JSX.Element => {
   const {
-    selectedAccessScope,
     selectedShareScope,
+    selectedAccessScope,
     selectedUserGroupsForShareScope,
     selectedUserGroupsForAccessScope,
     onSelectScope,
@@ -81,6 +81,7 @@ export const AiAssistantManagementEditShare = (props: Props): JSX.Element => {
         <ShareScopeSwitch
           isDisabled={!isShared}
           selectedShareScope={selectedShareScope}
+          selectedAccessScope={selectedAccessScope}
           onSelect={selectScopeHandler}
         />
 

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

@@ -66,17 +66,17 @@ const AiAssistantManagementModalSubstance = (): JSX.Element => {
   /*
   *  For AiAssistantManagementEditShare methods
   */
-  const selectScopeHandler = useCallback((accessScope: AiAssistantAccessScope | AiAssistantShareScope, scopeType?: AiAssistantScopeType) => {
+  const selectScopeHandler = useCallback((targetScope: AiAssistantAccessScope | AiAssistantShareScope, scopeType?: AiAssistantScopeType) => {
     if (scopeType === AiAssistantScopeType.ACCESS) {
-      setSelectedAccessScope(accessScope);
+      setSelectedAccessScope(targetScope);
       return;
     }
     if (scopeType === AiAssistantScopeType.SHARE) {
-      setSelectedShareScope(accessScope);
+      setSelectedShareScope(targetScope);
       return;
     }
-    setSelectedAccessScope(accessScope);
-    setSelectedShareScope(accessScope);
+    setSelectedAccessScope(targetScope);
+    setSelectedShareScope(targetScope);
   }, []);
 
   const selectUserGroupsHandler = useCallback((targetUserGroup: PopulatedGrantedGroup, scopeType: AiAssistantScopeType) => {

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

@@ -1,23 +1,48 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useState } from 'react';
 
 import {
   Input, Label, FormGroup,
 } from 'reactstrap';
 
+import type { AiAssistantAccessScope } from '../../../../interfaces/ai-assistant';
 import { AiAssistantShareScope, AiAssistantScopeType } from '../../../../interfaces/ai-assistant';
 
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const { OWNER, ...excludedOwnerShareScope } = AiAssistantShareScope;
+const ShareScopeSwitchType = {
+  ...excludedOwnerShareScope,
+  SAME_AS_ACCESS_SCOPE: 'sameAsAccessScope',
+} as const;
+
+type ShareScopeSwitchType = typeof ShareScopeSwitchType[keyof typeof ShareScopeSwitchType];
+
 type Props = {
   isDisabled: boolean,
   selectedShareScope: AiAssistantShareScope,
+  selectedAccessScope: AiAssistantAccessScope,
   onSelect: (shareScope: AiAssistantShareScope, scopeType: AiAssistantScopeType) => void,
 }
 
 export const ShareScopeSwitch: React.FC<Props> = (props: Props) => {
-  const { isDisabled, selectedShareScope, onSelect } = props;
+  const {
+    isDisabled,
+    selectedShareScope,
+    selectedAccessScope,
+    onSelect,
+  } = props;
+  const [selectedScope, setSelectedScope] = useState<ShareScopeSwitchType>(ShareScopeSwitchType.SAME_AS_ACCESS_SCOPE);
+
+  const checkShareScopeRadioHandler = useCallback((shareScope: ShareScopeSwitchType) => {
+    setSelectedScope(shareScope);
+    if (shareScope === ShareScopeSwitchType.SAME_AS_ACCESS_SCOPE) {
+      onSelect(selectedAccessScope, AiAssistantScopeType.SHARE);
+      return;
+    }
 
-  const checkShareScopeRadioHandler = useCallback((shareScope: AiAssistantShareScope) => {
     onSelect(shareScope, AiAssistantScopeType.SHARE);
-  }, [onSelect]);
+  }, [onSelect, selectedAccessScope]);
+
 
   return (
     <div className="mb-4">
@@ -29,9 +54,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}
+            onChange={() => checkShareScopeRadioHandler(ShareScopeSwitchType.PUBLIC_ONLY)}
+            checked={selectedScope === ShareScopeSwitchType.PUBLIC_ONLY}
           />
           <Label check for="shareAll" className="d-flex flex-column">
             <span>全体公開</span>
@@ -45,9 +70,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}
+            onChange={() => checkShareScopeRadioHandler(ShareScopeSwitchType.GROUPS)}
+            checked={selectedScope === ShareScopeSwitchType.GROUPS}
           />
           <Label check for="shareGroup" className="d-flex flex-column">
             <span>グループを指定</span>
@@ -62,8 +87,8 @@ export const ShareScopeSwitch: React.FC<Props> = (props: Props) => {
             id="shareAccess"
             className="form-check-input"
             disabled={isDisabled}
-            checked={selectedShareScope === AiAssistantShareScope.OWNER}
-            defaultChecked
+            onChange={() => checkShareScopeRadioHandler(ShareScopeSwitchType.SAME_AS_ACCESS_SCOPE)}
+            checked={selectedScope === ShareScopeSwitchType.SAME_AS_ACCESS_SCOPE}
           />
           <Label check for="shareAccess" className="d-flex flex-column">
             <span>ページのアクセス権限と同じ範囲</span>