From 0d20df9a512d738ee5a9a55672e0251790672715 Mon Sep 17 00:00:00 2001
From: zxhlyh <jasonapring2015@outlook.com>
Date: Thu, 20 Jun 2024 15:48:38 +0800
Subject: [PATCH] fix: add notion page in knowledge (#5430)

---
 .../components/base/checkbox/index.module.css |  5 +++++
 web/app/components/base/checkbox/index.tsx    | 18 +++++++++++++++---
 .../base/notion-page-selector/base.tsx        | 10 +++++++---
 .../page-selector/index.tsx                   | 19 ++++++++++++++++---
 4 files changed, 43 insertions(+), 9 deletions(-)

diff --git a/web/app/components/base/checkbox/index.module.css b/web/app/components/base/checkbox/index.module.css
index 102272e13c..5fe4172f13 100644
--- a/web/app/components/base/checkbox/index.module.css
+++ b/web/app/components/base/checkbox/index.module.css
@@ -6,4 +6,9 @@
   background: #155eef url(./assets/check.svg) center center no-repeat;
   background-size: 12px 12px;
   border-color: #155eef;
+}
+
+.checked.disabled {
+  background-color: #d0d5dd;
+  border-color: #d0d5dd;
 }
\ No newline at end of file
diff --git a/web/app/components/base/checkbox/index.tsx b/web/app/components/base/checkbox/index.tsx
index da72116ce3..c3c834e5bd 100644
--- a/web/app/components/base/checkbox/index.tsx
+++ b/web/app/components/base/checkbox/index.tsx
@@ -5,13 +5,25 @@ type CheckboxProps = {
   checked?: boolean
   onCheck?: () => void
   className?: string
+  disabled?: boolean
 }
 
-const Checkbox = ({ checked, onCheck, className }: CheckboxProps) => {
+const Checkbox = ({ checked, onCheck, className, disabled }: CheckboxProps) => {
   return (
     <div
-      className={cn(s.wrapper, checked && s.checked, 'w-4 h-4 border rounded border-gray-300', className)}
-      onClick={onCheck}
+      className={cn(
+        s.wrapper,
+        checked && s.checked,
+        disabled && s.disabled,
+        'w-4 h-4 border rounded border-gray-300',
+        className,
+      )}
+      onClick={() => {
+        if (disabled)
+          return
+
+        onCheck?.()
+      }}
     />
   )
 }
diff --git a/web/app/components/base/notion-page-selector/base.tsx b/web/app/components/base/notion-page-selector/base.tsx
index eeded7d6f0..9afc158cf6 100644
--- a/web/app/components/base/notion-page-selector/base.tsx
+++ b/web/app/components/base/notion-page-selector/base.tsx
@@ -39,12 +39,15 @@ const NotionPageSelector = ({
   const firstWorkspaceId = notionWorkspaces[0]?.workspace_id
   const currentWorkspace = notionWorkspaces.find(workspace => workspace.workspace_id === currentWorkspaceId)
 
-  const getPagesMapAndSelectedPagesId: [DataSourceNotionPageMap, Set<string>] = useMemo(() => {
+  const getPagesMapAndSelectedPagesId: [DataSourceNotionPageMap, Set<string>, Set<string>] = useMemo(() => {
     const selectedPagesId = new Set<string>()
+    const boundPagesId = new Set<string>()
     const pagesMap = notionWorkspaces.reduce((prev: DataSourceNotionPageMap, next: DataSourceNotionWorkspace) => {
       next.pages.forEach((page) => {
-        if (page.is_bound)
+        if (page.is_bound) {
           selectedPagesId.add(page.page_id)
+          boundPagesId.add(page.page_id)
+        }
         prev[page.page_id] = {
           ...page,
           workspace_id: next.workspace_id,
@@ -53,7 +56,7 @@ const NotionPageSelector = ({
 
       return prev
     }, {})
-    return [pagesMap, selectedPagesId]
+    return [pagesMap, selectedPagesId, boundPagesId]
   }, [notionWorkspaces])
   const defaultSelectedPagesId = [...Array.from(getPagesMapAndSelectedPagesId[1]), ...(value || [])]
   const [selectedPagesId, setSelectedPagesId] = useState<Set<string>>(new Set(defaultSelectedPagesId))
@@ -110,6 +113,7 @@ const NotionPageSelector = ({
               <div className='rounded-b-xl overflow-hidden'>
                 <PageSelector
                   value={selectedPagesId}
+                  disabledValue={getPagesMapAndSelectedPagesId[2]}
                   searchValue={searchValue}
                   list={currentWorkspace?.pages || []}
                   pagesMap={getPagesMapAndSelectedPagesId[0]}
diff --git a/web/app/components/base/notion-page-selector/page-selector/index.tsx b/web/app/components/base/notion-page-selector/page-selector/index.tsx
index bef34b3e76..b679e33b82 100644
--- a/web/app/components/base/notion-page-selector/page-selector/index.tsx
+++ b/web/app/components/base/notion-page-selector/page-selector/index.tsx
@@ -10,6 +10,7 @@ import type { DataSourceNotionPage, DataSourceNotionPageMap } from '@/models/com
 
 type PageSelectorProps = {
   value: Set<string>
+  disabledValue: Set<string>
   searchValue: string
   pagesMap: DataSourceNotionPageMap
   list: DataSourceNotionPage[]
@@ -71,6 +72,7 @@ const ItemComponent = ({ index, style, data }: ListChildComponentProps<{
   dataList: NotionPageItem[]
   handleToggle: (index: number) => void
   checkedIds: Set<string>
+  disabledCheckedIds: Set<string>
   handleCheck: (index: number) => void
   canPreview?: boolean
   handlePreview: (index: number) => void
@@ -80,12 +82,13 @@ const ItemComponent = ({ index, style, data }: ListChildComponentProps<{
   pagesMap: DataSourceNotionPageMap
 }>) => {
   const { t } = useTranslation()
-  const { dataList, handleToggle, checkedIds, handleCheck, canPreview, handlePreview, listMapWithChildrenAndDescendants, searchValue, previewPageId, pagesMap } = data
+  const { dataList, handleToggle, checkedIds, disabledCheckedIds, handleCheck, canPreview, handlePreview, listMapWithChildrenAndDescendants, searchValue, previewPageId, pagesMap } = data
   const current = dataList[index]
   const currentWithChildrenAndDescendants = listMapWithChildrenAndDescendants[current.page_id]
   const hasChild = currentWithChildrenAndDescendants.descendants.size > 0
   const ancestors = currentWithChildrenAndDescendants.ancestors
   const breadCrumbs = ancestors.length ? [...ancestors, current.page_name] : [current.page_name]
+  const disabled = disabledCheckedIds.has(current.page_id)
 
   const renderArrow = () => {
     if (hasChild) {
@@ -113,9 +116,17 @@ const ItemComponent = ({ index, style, data }: ListChildComponentProps<{
       style={{ ...style, top: style.top as number + 8, left: 8, right: 8, width: 'calc(100% - 16px)' }}
     >
       <Checkbox
-        className='shrink-0 mr-2 group-hover:border-primary-600 group-hover:border-[2px]'
+        className={cn(
+          'shrink-0 mr-2 group-hover:border-primary-600 group-hover:border-[2px]',
+          disabled && 'group-hover:border-transparent',
+        )}
         checked={checkedIds.has(current.page_id)}
-        onCheck={() => handleCheck(index)}
+        disabled={disabled}
+        onCheck={() => {
+          if (disabled)
+            return
+          handleCheck(index)
+        }}
       />
       {!searchValue && renderArrow()}
       <NotionIcon
@@ -155,6 +166,7 @@ const Item = memo(ItemComponent, areEqual)
 
 const PageSelector = ({
   value,
+  disabledValue,
   searchValue,
   pagesMap,
   list,
@@ -284,6 +296,7 @@ const PageSelector = ({
         dataList: currentDataList,
         handleToggle,
         checkedIds: value,
+        disabledCheckedIds: disabledValue,
         handleCheck,
         canPreview,
         handlePreview,