Refactor AccessScopeDropdown and AiAssistantManagementEditShare components for improved prop handling and UI consistency

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

@@ -1,34 +1,27 @@
-import React, { useState, useCallback } from 'react';
+import React, { useCallback } from 'react';
 
 import { useTranslation } from 'react-i18next';
 import {
   UncontrolledDropdown, DropdownToggle, DropdownMenu, DropdownItem,
 } from 'reactstrap';
 
-import type { PopulatedGrantedGroup } from '~/interfaces/page-grant';
 import { useCurrentUser } from '~/stores-universal/context';
 
 import { AiAssistantAccessScope } from '../../../../interfaces/ai-assistant';
 
-import { UserGroupSelector } from './UserGroupSelector';
-
 type Props = {
   selectedAccessScope: AiAssistantAccessScope,
-  selectedUserGroup: PopulatedGrantedGroup[];
-  onSelectAccessScope: (accessScope: AiAssistantAccessScope) => void,
-  onSelectUserGroup: (userGroup: PopulatedGrantedGroup) => void,
+  onSelect: (accessScope: AiAssistantAccessScope) => void,
 }
 
 export const AccessScopeDropdown: React.FC<Props> = (props: Props) => {
   const {
-    selectedAccessScope, selectedUserGroup, onSelectAccessScope, onSelectUserGroup,
+    selectedAccessScope, onSelect,
   } = props;
 
   const { t } = useTranslation();
   const { data: currentUser } = useCurrentUser();
 
-  const [isUserGroupSelectorOpen, setIsUserGroupSelectorOpen] = useState(false);
-
   const getAccessScopeLabel = useCallback((accessScope: AiAssistantAccessScope) => {
     const baseLabel = `modal_ai_assistant.access_scope.${accessScope}`;
     return accessScope === AiAssistantAccessScope.OWNER
@@ -37,18 +30,15 @@ export const AccessScopeDropdown: React.FC<Props> = (props: Props) => {
   }, [currentUser?.username, t]);
 
   const selectAccessScopeHandler = useCallback((accessScope: AiAssistantAccessScope) => {
-    onSelectAccessScope(accessScope);
-    if (accessScope === AiAssistantAccessScope.GROUPS) {
-      setIsUserGroupSelectorOpen(true);
-    }
-  }, [onSelectAccessScope]);
+    onSelect(accessScope);
+  }, [onSelect]);
 
   return (
     <>
       <UncontrolledDropdown>
         <DropdownToggle
           caret
-          className="btn-outline-secondary"
+          className="btn-outline-secondary bg-transparent"
         >
           {getAccessScopeLabel(selectedAccessScope)}
         </DropdownToggle>
@@ -60,13 +50,6 @@ export const AccessScopeDropdown: React.FC<Props> = (props: Props) => {
           ))}
         </DropdownMenu>
       </UncontrolledDropdown>
-
-      <UserGroupSelector
-        isOpen={isUserGroupSelectorOpen}
-        closeModal={() => setIsUserGroupSelectorOpen(false)}
-        selectedUserGroup={selectedUserGroup}
-        onSelect={onSelectUserGroup}
-      />
     </>
   );
 };

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

@@ -1,17 +1,37 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useState } from 'react';
 
 import {
-  ModalBody, Input, Label, Form, FormGroup, Dropdown, DropdownItem, DropdownToggle, DropdownMenu,
+  ModalBody, Input, Label, Form, FormGroup,
 } from 'reactstrap';
 
+import { AiAssistantAccessScope } from '~/features/openai/interfaces/ai-assistant';
+import type { PopulatedGrantedGroup } from '~/interfaces/page-grant';
+
+import { AccessScopeDropdown } from './AccessScopeDropdown';
 import { AiAssistantManagementHeader } from './AiAssistantManagementHeader';
+import { UserGroupSelector } from './UserGroupSelector';
 
 
 type Props = {
-  //
+  selectedUserGroups: PopulatedGrantedGroup[],
+  selectedAccessScope: AiAssistantAccessScope,
+  onSelectUserGroup: (userGroup: PopulatedGrantedGroup) => void,
+  onSelectAccessScope: (accessScope: AiAssistantAccessScope) => void,
 }
 
 export const AiAssistantManagementEditShare = (props: Props): JSX.Element => {
+  const {
+    selectedAccessScope, selectedUserGroups, onSelectAccessScope, onSelectUserGroup,
+  } = props;
+
+  const [isUserGroupSelectorOpen, setIsUserGroupSelectorOpen] = useState(false);
+
+  const selectAccessScopeHandler = useCallback((accessScope: AiAssistantAccessScope) => {
+    onSelectAccessScope(accessScope);
+    if (accessScope === AiAssistantAccessScope.GROUPS) {
+      setIsUserGroupSelectorOpen(true);
+    }
+  }, [onSelectAccessScope]);
 
   return (
     <>
@@ -36,20 +56,7 @@ export const AiAssistantManagementEditShare = (props: Props): JSX.Element => {
           {/* アクセス権限ドロップダウン */}
           <div className="mb-4">
             <Label className="text-secondary mb-2">ページのアクセス権限</Label>
-            <Dropdown className="w-100">
-              <DropdownToggle
-                caret
-                color="light"
-                className="w-100 text-start bg-white border d-flex justify-content-between align-items-center"
-              >
-                <span>UserNameがアクセス可能な全てのページ</span>
-              </DropdownToggle>
-              <DropdownMenu className="w-100">
-                <DropdownItem>
-                  UserNameがアクセス可能な全てのページ
-                </DropdownItem>
-              </DropdownMenu>
-            </Dropdown>
+            <AccessScopeDropdown selectedAccessScope={selectedAccessScope} onSelect={selectAccessScopeHandler} />
           </div>
 
           {/* 共有範囲ラジオグループ */}
@@ -99,6 +106,12 @@ export const AiAssistantManagementEditShare = (props: Props): JSX.Element => {
           </div>
         </Form>
 
+        <UserGroupSelector
+          isOpen={isUserGroupSelectorOpen}
+          closeModal={() => setIsUserGroupSelectorOpen(false)}
+          selectedUserGroup={selectedUserGroups}
+          onSelect={onSelectUserGroup}
+        />
       </ModalBody>
     </>
   );

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

@@ -64,7 +64,7 @@ const AiAssistantManagementModalSubstance = (): JSX.Element => {
   /*
   *  For AiAssistantManagementEditShare methods
   */
-  const clickAccessScopeItemHandler = useCallback((accessScope: AiAssistantAccessScope) => {
+  const selectAccessScopeHandler = useCallback((accessScope: AiAssistantAccessScope) => {
     setSelectedAccessScope(accessScope);
   }, []);
 
@@ -117,7 +117,12 @@ const AiAssistantManagementModalSubstance = (): JSX.Element => {
         </TabPane>
 
         <TabPane tabId={AiAssistantManagementModalPageMode.SHARE}>
-          <AiAssistantManagementEditShare />
+          <AiAssistantManagementEditShare
+            selectedAccessScope={selectedAccessScope}
+            selectedUserGroups={selectedUserGroupsForAccessScope}
+            onSelectAccessScope={selectAccessScopeHandler}
+            onSelectUserGroup={selectUserGroupsForAccessScopeHandler}
+          />
         </TabPane>
 
         <TabPane tabId={AiAssistantManagementModalPageMode.PAGES}>