Impl ShareScopeSwitch

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

@@ -10,13 +10,14 @@ import { useCurrentUser } from '~/stores-universal/context';
 import { AiAssistantAccessScope } from '../../../../interfaces/ai-assistant';
 
 type Props = {
+  isDisabled: boolean,
   selectedAccessScope: AiAssistantAccessScope,
   onSelect: (accessScope: AiAssistantAccessScope) => void,
 }
 
 export const AccessScopeDropdown: React.FC<Props> = (props: Props) => {
   const {
-    selectedAccessScope, onSelect,
+    isDisabled, selectedAccessScope, onSelect,
   } = props;
 
   const { t } = useTranslation();
@@ -37,6 +38,7 @@ export const AccessScopeDropdown: React.FC<Props> = (props: Props) => {
     <>
       <UncontrolledDropdown>
         <DropdownToggle
+          disabled={isDisabled}
           caret
           className="btn-outline-secondary bg-transparent"
         >

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

@@ -4,16 +4,19 @@ import {
   ModalBody, Input, Label, Form, FormGroup,
 } from 'reactstrap';
 
+import type { AiAssistantShareScope } from '~/features/openai/interfaces/ai-assistant';
 import { AiAssistantAccessScope } from '~/features/openai/interfaces/ai-assistant';
 import type { PopulatedGrantedGroup } from '~/interfaces/page-grant';
 
 import { AccessScopeDropdown } from './AccessScopeDropdown';
 import { AiAssistantManagementHeader } from './AiAssistantManagementHeader';
+import { ShareScopeSwitch } from './ShareScopeSwitch';
 import { UserGroupSelector } from './UserGroupSelector';
 
 
 type Props = {
   selectedUserGroups: PopulatedGrantedGroup[],
+  selectedShareScope: AiAssistantShareScope,
   selectedAccessScope: AiAssistantAccessScope,
   onSelectUserGroup: (userGroup: PopulatedGrantedGroup) => void,
   onSelectAccessScope: (accessScope: AiAssistantAccessScope) => void,
@@ -24,6 +27,7 @@ export const AiAssistantManagementEditShare = (props: Props): JSX.Element => {
     selectedAccessScope, selectedUserGroups, onSelectAccessScope, onSelectUserGroup,
   } = props;
 
+  const [isShared, setIsShared] = useState(false);
   const [isUserGroupSelectorOpen, setIsUserGroupSelectorOpen] = useState(false);
 
   const selectAccessScopeHandler = useCallback((accessScope: AiAssistantAccessScope) => {
@@ -38,7 +42,6 @@ export const AiAssistantManagementEditShare = (props: Props): JSX.Element => {
       <AiAssistantManagementHeader />
 
       <ModalBody className="px-4">
-
         <Form>
           {/* トグルスイッチ */}
           <div className="form-check form-switch mb-4">
@@ -47,6 +50,8 @@ export const AiAssistantManagementEditShare = (props: Props): JSX.Element => {
               role="switch"
               id="shareAssistantSwitch"
               className="form-check-input"
+              checked={isShared}
+              onChange={() => setIsShared(!isShared)}
             />
             <Label className="form-check-label" for="shareAssistantSwitch">
               アシスタントを共有する
@@ -56,54 +61,15 @@ export const AiAssistantManagementEditShare = (props: Props): JSX.Element => {
           {/* アクセス権限ドロップダウン */}
           <div className="mb-4">
             <Label className="text-secondary mb-2">ページのアクセス権限</Label>
-            <AccessScopeDropdown selectedAccessScope={selectedAccessScope} onSelect={selectAccessScopeHandler} />
+            <AccessScopeDropdown
+              isDisabled={!isShared}
+              selectedAccessScope={selectedAccessScope}
+              onSelect={selectAccessScopeHandler}
+            />
           </div>
 
           {/* 共有範囲ラジオグループ */}
-          <div className="mb-4">
-            <Label className="text-secondary mb-3">アシスタントの共有範囲</Label>
-            <div className="d-flex flex-column gap-3">
-              <FormGroup check>
-                <Input
-                  type="radio"
-                  name="shareScope"
-                  id="shareAll"
-                  className="form-check-input"
-                />
-                <Label check for="shareAll" className="d-flex flex-column">
-                  <span>全体公開</span>
-                  <small className="text-secondary">全てのユーザーに共有されます</small>
-                </Label>
-              </FormGroup>
-
-              <FormGroup check>
-                <Input
-                  type="radio"
-                  name="shareScope"
-                  id="shareGroup"
-                  className="form-check-input"
-                />
-                <Label check for="shareGroup" className="d-flex flex-column">
-                  <span>グループを指定</span>
-                  <small className="text-secondary">選択したグループのメンバーにのみ共有されます</small>
-                </Label>
-              </FormGroup>
-
-              <FormGroup check>
-                <Input
-                  type="radio"
-                  name="shareScope"
-                  id="shareAccess"
-                  className="form-check-input"
-                  defaultChecked
-                />
-                <Label check for="shareAccess" className="d-flex flex-column">
-                  <span>ページのアクセス権限と同じ範囲</span>
-                  <small className="text-secondary">ページのアクセス権限と同じ範囲で共有されます</small>
-                </Label>
-              </FormGroup>
-            </div>
-          </div>
+          <ShareScopeSwitch isDisabled={!isShared} />
         </Form>
 
         <UserGroupSelector

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

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { Modal, TabContent, TabPane } from 'reactstrap';
 
 import { toastError, toastSuccess } from '~/client/util/toastr';
-import { AiAssistantAccessScope } from '~/features/openai/interfaces/ai-assistant';
+import { AiAssistantAccessScope, AiAssistantShareScope } from '~/features/openai/interfaces/ai-assistant';
 import type { IPageForItem } from '~/interfaces/page';
 import type { PopulatedGrantedGroup } from '~/interfaces/page-grant';
 import loggerFactory from '~/utils/logger';
@@ -32,6 +32,7 @@ const AiAssistantManagementModalSubstance = (): JSX.Element => {
   const pageMode = aiAssistantManagementModalData?.pageMode ?? AiAssistantManagementModalPageMode.HOME;
 
   // States
+  const [selectedShareScope, setSelectedShareScope] = useState<AiAssistantShareScope>(AiAssistantShareScope.OWNER);
   const [selectedAccessScope, setSelectedAccessScope] = useState<AiAssistantAccessScope>(AiAssistantAccessScope.OWNER);
   const [selectedUserGroupsForAccessScope, setSelectedUserGroupsForAccessScope] = useState<PopulatedGrantedGroup[]>([]);
   const [selectedPages, setSelectedPages] = useState<SelectedPage[]>([]);
@@ -118,6 +119,7 @@ const AiAssistantManagementModalSubstance = (): JSX.Element => {
 
         <TabPane tabId={AiAssistantManagementModalPageMode.SHARE}>
           <AiAssistantManagementEditShare
+            selectedShareScope={selectedShareScope}
             selectedAccessScope={selectedAccessScope}
             selectedUserGroups={selectedUserGroupsForAccessScope}
             onSelectAccessScope={selectAccessScopeHandler}

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

@@ -0,0 +1,68 @@
+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';
+
+type Props = {
+  isDisabled: boolean,
+}
+
+export const ShareScopeSwitch: React.FC<Props> = (props: Props) => {
+  const { isDisabled } = props;
+
+  return (
+    <div className="mb-4">
+      <Label className="text-secondary mb-3">アシスタントの共有範囲</Label>
+      <div className="d-flex flex-column gap-3">
+        <FormGroup check>
+          <Input
+            type="radio"
+            name="shareScope"
+            id="shareAll"
+            className="form-check-input"
+            disabled={isDisabled}
+          />
+          <Label check for="shareAll" className="d-flex flex-column">
+            <span>全体公開</span>
+            <small className="text-secondary">全てのユーザーに共有されます</small>
+          </Label>
+        </FormGroup>
+
+        <FormGroup check>
+          <Input
+            type="radio"
+            name="shareScope"
+            id="shareGroup"
+            className="form-check-input"
+            disabled={isDisabled}
+          />
+          <Label check for="shareGroup" className="d-flex flex-column">
+            <span>グループを指定</span>
+            <small className="text-secondary">選択したグループのメンバーにのみ共有されます</small>
+          </Label>
+        </FormGroup>
+
+        <FormGroup check>
+          <Input
+            type="radio"
+            name="shareScope"
+            id="shareAccess"
+            className="form-check-input"
+            disabled={isDisabled}
+            defaultChecked
+          />
+          <Label check for="shareAccess" className="d-flex flex-column">
+            <span>ページのアクセス権限と同じ範囲</span>
+            <small className="text-secondary">ページのアクセス権限と同じ範囲で共有されます</small>
+          </Label>
+        </FormGroup>
+      </div>
+    </div>
+  );
+};