Merge pull request #9615 from weseek/feat/160857-implement-share-scope-warning-modal

feat: Implement ShareScopeWarningModal

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

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useState } from 'react';
 
 import { useTranslation } from 'react-i18next';
 import {
@@ -10,6 +10,8 @@ import { useCurrentUser } from '~/stores-universal/context';
 
 import { useAiAssistantManagementModal, AiAssistantManagementModalPageMode } from '../../../stores/ai-assistant';
 
+import { ShareScopeWarningModal } from './ShareScopeWarningModal';
+
 type Props = {
   name: string;
   description: string;
@@ -35,6 +37,8 @@ export const AiAssistantManagementHome = (props: Props): JSX.Element => {
   const { data: currentUser } = useCurrentUser();
   const { close: closeAiAssistantManagementModal, changePageMode } = useAiAssistantManagementModal();
 
+  const [isShareScopeWarningModalOpen, setIsShareScopeWarningModalOpen] = useState(false);
+
   const getShareScopeLabel = useCallback((shareScope: AiAssistantShareScope) => {
     const baseLabel = `modal_ai_assistant.share_scope.${shareScope}.label`;
     return shareScope === AiAssistantShareScope.OWNER
@@ -42,6 +46,17 @@ export const AiAssistantManagementHome = (props: Props): JSX.Element => {
       : t(baseLabel);
   }, [currentUser?.username, t]);
 
+  const createAiAssistantHandler = useCallback(async() => {
+    // TODO: Implement the logic to check if the assistant has a share scope that includes private pages
+    // task: https://redmine.weseek.co.jp/issues/161341
+    if (true) {
+      setIsShareScopeWarningModalOpen(true);
+      return;
+    }
+
+    await onCreateAiAssistant();
+  }, [onCreateAiAssistant]);
+
   return (
     <>
       <ModalHeader tag="h4" toggle={closeAiAssistantManagementModal} className="pe-4">
@@ -121,10 +136,16 @@ export const AiAssistantManagementHome = (props: Props): JSX.Element => {
         </ModalBody>
 
         <ModalFooter>
-          <button type="button" className="btn btn-outline-secondary" onClick={() => {}}>キャンセル</button>
-          <button type="button" className="btn btn-primary" onClick={onCreateAiAssistant}>アシスタントを作成する</button>
+          <button type="button" className="btn btn-outline-secondary" onClick={closeAiAssistantManagementModal}>キャンセル</button>
+          <button type="button" className="btn btn-primary" onClick={createAiAssistantHandler}>アシスタントを作成する</button>
         </ModalFooter>
       </div>
+
+      <ShareScopeWarningModal
+        isOpen={isShareScopeWarningModalOpen}
+        closeModal={() => setIsShareScopeWarningModalOpen(false)}
+        onSubmit={createAiAssistantHandler}
+      />
     </>
   );
 };

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

@@ -0,0 +1,71 @@
+import React, { useCallback } from 'react';
+
+import {
+  Modal, ModalHeader, ModalBody, ModalFooter,
+} from 'reactstrap';
+
+type Props = {
+  isOpen: boolean,
+  closeModal: () => void,
+  onSubmit: () => Promise<void>,
+}
+
+export const ShareScopeWarningModal = (props: Props): JSX.Element => {
+  const {
+    isOpen,
+    closeModal,
+    onSubmit,
+  } = props;
+
+  const createAiAssistantHandler = useCallback(() => {
+    closeModal();
+    onSubmit();
+  }, [closeModal, onSubmit]);
+
+  return (
+    <Modal size="lg" isOpen={isOpen} toggle={closeModal}>
+      <ModalHeader toggle={closeModal}>
+        <div className="d-flex align-items-center">
+          <span className="material-symbols-outlined text-warning me-2 fs-4">warning</span>
+          <span className="text-warning fw-bold">共有範囲の確認</span>
+        </div>
+      </ModalHeader>
+
+      <ModalBody className="py-4 px-4">
+        <p className="mb-4">
+          このアシスタントには限定公開されているページが含まれています。<br />
+          現在の設定では、アシスタントを通じてこれらのページの情報が、本来のアクセス権限を超えて共有される可能性があります。
+        </p>
+
+        <div className="mb-4">
+          <p className="mb-2 text-secondary">含まれる限定公開ページ</p>
+          <code>
+            /Project/GROWI/新機能/GROWI AI
+          </code>
+        </div>
+
+        <p>
+          続行する場合、これらのページの内容がアシスタントの公開範囲内で共有される可能性があることを確認してください。
+        </p>
+      </ModalBody>
+
+      <ModalFooter>
+        <button
+          type="button"
+          className="btn btn-outline-secondary"
+          onClick={closeModal}
+        >
+          設定を見直す
+        </button>
+
+        <button
+          type="button"
+          className="btn btn-warning"
+          onClick={createAiAssistantHandler}
+        >
+          理解して続行する
+        </button>
+      </ModalFooter>
+    </Modal>
+  );
+};