Add option to include subordinated pages in page selection modal

apps/app/src/client/components/PageSelectModal/PageSelectModal.tsx

@@ -29,6 +29,7 @@ const PageSelectModalSubstance: FC = () => {
   } = usePageSelectModal();
 
   const [clickedParentPage, setClickedParentPage] = useState<IPageForItem | null>(null);
+  const [isIncludeSubPage, setIsIncludeSubPage] = useState(true);
 
   const { t } = useTranslation();
 
@@ -36,6 +37,11 @@ const PageSelectModalSubstance: FC = () => {
   const { data: isReadOnlyUser } = useIsReadOnlyUser();
   const { data: targetAndAncestorsData } = useTargetAndAncestors();
   const { data: currentPage } = useSWRxCurrentPage();
+  const { data: pageSelectModalData } = usePageSelectModal();
+
+  console.log('pageSelectModalData', pageSelectModalData);
+
+  const isHierarchicalSelectionMode = pageSelectModalData?.opts?.isHierarchicalSelectionMode ?? false;
 
   const onClickTreeItem = useCallback((page: IPageForItem) => {
     const parentPagePath = page.path;
@@ -54,11 +60,11 @@ const PageSelectModalSubstance: FC = () => {
 
   const onClickDone = useCallback(() => {
     if (clickedParentPage != null) {
-      PageSelectModalData?.opts?.onSelected?.(clickedParentPage);
+      PageSelectModalData?.opts?.onSelected?.(clickedParentPage, isIncludeSubPage);
     }
 
     closeModal();
-  }, [PageSelectModalData?.opts, clickedParentPage, closeModal]);
+  }, [PageSelectModalData?.opts, clickedParentPage, closeModal, isIncludeSubPage]);
 
   const parentPagePath = pathUtils.addTrailingSlash(nodePath.dirname(currentPage?.path ?? ''));
 
@@ -91,12 +97,24 @@ const PageSelectModalSubstance: FC = () => {
         </Suspense>
       </ModalBody>
       <ModalFooter className="border-top d-flex flex-column">
-        <div className="form-check form-check-info align-self-start ms-4">
-          <input type="checkbox" id="includeSubPages" className="form-check-input" name="fileUpload" />
-          <label className="form-label form-check-label" htmlFor="includeSubPages">
-            {t('Include Subordinated Page')}
-          </label>
-        </div>
+        { isHierarchicalSelectionMode && (
+          <div className="form-check form-check-info align-self-start ms-4">
+            <input
+              type="checkbox"
+              id="includeSubPages"
+              className="form-check-input"
+              name="fileUpload"
+              checked={isIncludeSubPage}
+              onChange={() => setIsIncludeSubPage(!isIncludeSubPage)}
+            />
+            <label
+              className="form-label form-check-label"
+              htmlFor="includeSubPages"
+            >
+              {t('Include Subordinated Page')}
+            </label>
+          </div>
+        )}
         <div className="d-flex gap-2 align-self-end">
           <Button color="secondary" onClick={onClickCancel}>{t('Cancel')}</Button>
           <Button color="primary" onClick={onClickDone}>{t('Done')}</Button>

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

@@ -15,36 +15,43 @@ import styles from './AiAssistantManegementModal.module.scss';
 const moduleClass = styles['grw-ai-assistant-manegement'] ?? '';
 
 
-const SelectedPageList = memo(({ selectedPages }: { selectedPages: IPageForItem[] }): JSX.Element => {
+type SelectedPage = {
+  page: IPageForItem,
+  isIncludeSubPage: boolean,
+}
+
+const SelectedPageList = memo(({ selectedPages }: { selectedPages: SelectedPage[] }): JSX.Element => {
+  const { t } = useTranslation();
+
   if (selectedPages.length === 0) {
     return <></>;
   }
 
   return (
     <div className="mb-3">
-      {selectedPages.map(page => (
+      {selectedPages.map(({ page, isIncludeSubPage }) => (
         <p key={page._id} className="mb-1">
           <code>{ page.path }</code>
+          {isIncludeSubPage && <span className="badge rounded-pill text-bg-secondary ms-2">{t('Include Subordinated Page')}</span>}
         </p>
       ))}
     </div>
   );
 });
 
-
 const AiAssistantManegementModalSubstance = (): JSX.Element => {
   const { open: openPageSelectModal } = usePageSelectModal();
-  const [selectedPages, setSelectedPages] = useState<IPageForItem[]>([]);
+  const [selectedPages, setSelectedPages] = useState<SelectedPage[]>([]);
 
   const onClickOpenPageSelectModalButton = useCallback(() => {
-    const onSelected = (page: IPageForItem) => {
-      const selectedPageids = selectedPages.map(selectedPage => selectedPage._id);
-      if (page._id != null && !selectedPageids.includes(page._id)) {
-        setSelectedPages([...selectedPages, page]);
+    const onSelected = (page: IPageForItem, isIncludeSubPage: boolean) => {
+      const selectedPageIds = selectedPages.map(selectedPage => selectedPage.page._id);
+      if (page._id != null && !selectedPageIds.includes(page._id)) {
+        setSelectedPages([...selectedPages, { page, isIncludeSubPage }]);
       }
     };
 
-    openPageSelectModal({ onSelected });
+    openPageSelectModal({ onSelected, isHierarchicalSelectionMode: true });
   }, [openPageSelectModal, selectedPages]);
 
 

apps/app/src/interfaces/ui.ts

@@ -38,4 +38,4 @@ export type OnRenamedFunction = (path: string) => void;
 export type OnDuplicatedFunction = (fromPath: string, toPath: string) => void;
 export type OnPutBackedFunction = (path: string) => void;
 export type onDeletedBookmarkFolderFunction = (bookmarkFolderId: string) => void;
-export type OnSelectedFunction = (page: IPageForItem) => void;
+export type OnSelectedFunction = (page: IPageForItem, isIncludeSubPage: boolean) => void;

apps/app/src/stores/modal.tsx

@@ -721,6 +721,7 @@ export const useDeleteAttachmentModal = (): SWRResponse<DeleteAttachmentModalSta
 * PageSelectModal
 */
 type IPageSelectModalOption = {
+  isHierarchicalSelectionMode?: boolean,
   onSelected?: OnSelectedFunction,
 }