feat: Introduce CredentialSelector component and remove WorkspaceSelector

web/app/components/base/notion-page-selector/base.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useMemo, useState } from 'react'
-import WorkspaceSelector from './workspace-selector'
+import type { NotionCredential } from './credential-selector'
+import WorkspaceSelector from './credential-selector'
 import SearchInput from './search-input'
 import PageSelector from './page-selector'
 import type { DataSourceNotionPageMap, DataSourceNotionWorkspace, NotionPage } from '@/models/common'
@@ -7,6 +8,7 @@ import { useModalContextSelector } from '@/context/modal-context'
 import NotionConnector from '../notion-connector'
 import { usePreImportNotionPages } from '@/service/knowledge/use-import'
 import Header from '../../datasets/create/website/base/header'
+import type { DataSourceCredential } from '../../header/account-setting/data-source-page-new/types'
 
 type NotionPageSelectorProps = {
   value?: string[]
@@ -15,6 +17,7 @@ type NotionPageSelectorProps = {
   previewPageId?: string
   onPreview?: (selectedPage: NotionPage) => void
   datasetId?: string
+  credentialList: DataSourceCredential[]
 }
 
 const NotionPageSelector = ({
@@ -24,22 +27,35 @@ const NotionPageSelector = ({
   previewPageId,
   onPreview,
   datasetId = '',
+  credentialList,
 }: NotionPageSelectorProps) => {
-  const { data, refetch } = usePreImportNotionPages({ url: '/notion/pre-import/pages', datasetId })
-  const [prevData, setPrevData] = useState(data)
   const [searchValue, setSearchValue] = useState('')
-  const [currentWorkspaceId, setCurrentWorkspaceId] = useState('')
   const setShowAccountSettingModal = useModalContextSelector(s => s.setShowAccountSettingModal)
 
-  const notionWorkspaces = useMemo(() => {
-    return data?.notion_info || []
-  }, [data?.notion_info])
-  const firstWorkspaceId = notionWorkspaces[0]?.workspace_id
-  const currentWorkspace = notionWorkspaces.find(workspace => workspace.workspace_id === currentWorkspaceId)
+  const notionCredentials = useMemo((): NotionCredential[] => {
+    return credentialList.map((item) => {
+      return {
+        credentialId: item.id,
+        credentialName: item.name,
+        workspaceIcon: item.credential.workspace_icon,
+        workspaceName: item.credential.workspace_name,
+      }
+    })
+  }, [credentialList])
+  const [currentCredential, setCurrentCredential] = useState(notionCredentials[0])
+
+  useEffect(() => {
+    const credential = notionCredentials.find(item => item.credentialId === currentCredential?.credentialId)
+    if (!credential)
+      setCurrentCredential(notionCredentials[0])
+  }, [notionCredentials])
+
+  const { data } = usePreImportNotionPages({ datasetId, credentialId: currentCredential.credentialId || '' })
 
   const getPagesMapAndSelectedPagesId: [DataSourceNotionPageMap, Set<string>, Set<string>] = useMemo(() => {
     const selectedPagesId = new Set<string>()
     const boundPagesId = new Set<string>()
+    const notionWorkspaces = data?.notion_info || []
     const pagesMap = notionWorkspaces.reduce((prev: DataSourceNotionPageMap, next: DataSourceNotionWorkspace) => {
       next.pages.forEach((page) => {
         if (page.is_bound) {
@@ -55,88 +71,86 @@ const NotionPageSelector = ({
       return prev
     }, {})
     return [pagesMap, selectedPagesId, boundPagesId]
-  }, [notionWorkspaces])
+  }, [data?.notion_info])
+
   const defaultSelectedPagesId = [...Array.from(getPagesMapAndSelectedPagesId[1]), ...(value || [])]
   const [selectedPagesId, setSelectedPagesId] = useState<Set<string>>(new Set(defaultSelectedPagesId))
 
-  if (prevData !== data) {
-    setPrevData(data)
+  useEffect(() => {
     setSelectedPagesId(new Set(defaultSelectedPagesId))
-  }
+  }, [data])
 
   const handleSearchValueChange = useCallback((value: string) => {
     setSearchValue(value)
   }, [])
-  const handleSelectWorkspace = useCallback((workspaceId: string) => {
-    setCurrentWorkspaceId(workspaceId)
+
+  const handleSelectCredential = useCallback((credentialId: string) => {
+    const credential = notionCredentials.find(item => item.credentialId === credentialId)!
+    setCurrentCredential(credential)
   }, [])
-  const handleSelectPages = (newSelectedPagesId: Set<string>) => {
+
+  const handleSelectPages = useCallback((newSelectedPagesId: Set<string>) => {
     const selectedPages = Array.from(newSelectedPagesId).map(pageId => getPagesMapAndSelectedPagesId[0][pageId])
 
     setSelectedPagesId(new Set(Array.from(newSelectedPagesId)))
     onSelect(selectedPages)
-  }
-  const handlePreviewPage = (previewPageId: string) => {
+  }, [getPagesMapAndSelectedPagesId, onSelect])
+
+  const handlePreviewPage = useCallback((previewPageId: string) => {
     if (onPreview)
       onPreview(getPagesMapAndSelectedPagesId[0][previewPageId])
-  }
-
-  useEffect(() => {
-    setCurrentWorkspaceId(firstWorkspaceId)
-  }, [firstWorkspaceId])
+  }, [getPagesMapAndSelectedPagesId, onSelect, onPreview])
 
   const handleConfigureNotion = useCallback(() => {
-    setShowAccountSettingModal({ payload: 'data-source', onCancelCallback: refetch })
-  }, [setShowAccountSettingModal, refetch])
+    setShowAccountSettingModal({ payload: 'data-source' })
+  }, [setShowAccountSettingModal])
+
+  if (!data) {
+    return (
+      <NotionConnector
+        onSetting={handleConfigureNotion}
+      />
+    )
+  }
 
   return (
-    <>
-      {
-        data?.notion_info?.length
-          ? (
-            <div className='flex flex-col gap-y-2'>
-              <Header
-                onClickConfiguration={handleConfigureNotion}
-                title={'Choose notion pages'}
-                buttonText={'Configure Notion'}
-                docTitle={'Notion docs'}
-                docLink={'https://www.notion.so/docs'}
-              />
-              <div className='rounded-xl border border-components-panel-border bg-background-default-subtle'>
-                <div className='flex h-12 items-center gap-x-2 rounded-t-xl border-b border-b-divider-regular bg-components-panel-bg p-2'>
-                  <div className='flex grow items-center gap-x-1'>
-                    <WorkspaceSelector
-                      value={currentWorkspaceId || firstWorkspaceId}
-                      items={notionWorkspaces}
-                      onSelect={handleSelectWorkspace}
-                    />
-                  </div>
-                  <SearchInput
-                    value={searchValue}
-                    onChange={handleSearchValueChange}
-                  />
-                </div>
-                <div className='overflow-hidden rounded-b-xl'>
-                  <PageSelector
-                    value={selectedPagesId}
-                    disabledValue={getPagesMapAndSelectedPagesId[2]}
-                    searchValue={searchValue}
-                    list={currentWorkspace?.pages || []}
-                    pagesMap={getPagesMapAndSelectedPagesId[0]}
-                    onSelect={handleSelectPages}
-                    canPreview={canPreview}
-                    previewPageId={previewPageId}
-                    onPreview={handlePreviewPage}
-                  />
-                </div>
-              </div>
-            </div>
-          )
-          : (
-            <NotionConnector onSetting={handleConfigureNotion} />
-          )
-      }
-    </>
+    <div className='flex flex-col gap-y-2'>
+      <Header
+        onClickConfiguration={handleConfigureNotion}
+        title={'Choose notion pages'}
+        buttonText={'Configure Notion'}
+        docTitle={'Notion docs'}
+        docLink={'https://www.notion.so/docs'}
+      />
+      <div className='rounded-xl border border-components-panel-border bg-background-default-subtle'>
+        <div className='flex h-12 items-center gap-x-2 rounded-t-xl border-b border-b-divider-regular bg-components-panel-bg p-2'>
+          <div className='flex grow items-center gap-x-1'>
+            <WorkspaceSelector
+              value={currentCredential.credentialId}
+              items={notionCredentials}
+              onSelect={handleSelectCredential}
+            />
+          </div>
+          <SearchInput
+            value={searchValue}
+            onChange={handleSearchValueChange}
+          />
+        </div>
+        <div className='overflow-hidden rounded-b-xl'>
+          <PageSelector
+            value={selectedPagesId}
+            disabledValue={getPagesMapAndSelectedPagesId[2]}
+            searchValue={searchValue}
+            list={data.notion_info?.[0].pages || []}
+            pagesMap={getPagesMapAndSelectedPagesId[0]}
+            onSelect={handleSelectPages}
+            canPreview={canPreview}
+            previewPageId={previewPageId}
+            onPreview={handlePreviewPage}
+          />
+        </div>
+      </div>
+    </div>
   )
 }
 

web/app/components/base/notion-page-selector/credential-selector/index.tsx

@@ -0,0 +1,113 @@
+'use client'
+import { useTranslation } from 'react-i18next'
+import React, { Fragment, useMemo } from 'react'
+import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react'
+import { RiArrowDownSLine } from '@remixicon/react'
+import NotionIcon from '../../notion-icon'
+
+export type NotionCredential = {
+  credentialId: string
+  credentialName: string
+  workspaceIcon?: string
+  workspaceName?: string
+}
+
+type CredentialSelectorProps = {
+  value: string
+  items: NotionCredential[]
+  onSelect: (v: string) => void
+}
+
+const CredentialSelector = ({
+  value,
+  items,
+  onSelect,
+}: CredentialSelectorProps) => {
+  const { t } = useTranslation()
+  const currentCredential = items.find(item => item.credentialId === value)!
+
+  const getDisplayName = (item: NotionCredential) => {
+    return item.workspaceName || t('datasetPipeline.credentialSelector.name', {
+      credentialName: item.credentialName,
+      pluginName: 'Notion',
+    })
+  }
+
+  const currentDisplayName = useMemo(() => {
+    return getDisplayName(currentCredential)
+  }, [currentCredential])
+
+  return (
+    <Menu as='div' className='relative inline-block text-left'>
+      {
+        ({ open }) => (
+          <>
+            <MenuButton className={`flex h-7 items-center justify-center rounded-md p-1 pr-2 hover:bg-state-base-hover ${open && 'bg-state-base-hover'} cursor-pointer`}>
+              <NotionIcon
+                className='mr-2'
+                src={currentCredential?.workspaceIcon}
+                name={currentDisplayName}
+              />
+              <div
+                className='mr-1 w-[90px] truncate text-left text-sm font-medium text-text-secondary'
+                title={currentDisplayName}
+              >
+                {currentDisplayName}
+              </div>
+              <RiArrowDownSLine className='h-4 w-4 text-text-secondary' />
+            </MenuButton>
+            <Transition
+              as={Fragment}
+              enter='transition ease-out duration-100'
+              enterFrom='transform opacity-0 scale-95'
+              enterTo='transform opacity-100 scale-100'
+              leave='transition ease-in duration-75'
+              leaveFrom='transform opacity-100 scale-100'
+              leaveTo='transform opacity-0 scale-95'
+            >
+              <MenuItems
+                className='absolute left-0 top-8 z-10 w-80
+                  origin-top-right rounded-lg border-[0.5px]
+                  border-components-panel-border bg-components-panel-bg-blur shadow-lg shadow-shadow-shadow-5'
+              >
+                <div className='max-h-50 overflow-auto p-1'>
+                  {
+                    items.map((item) => {
+                      const displayName = getDisplayName(item)
+                      return (
+                        <MenuItem key={item.credentialId}>
+                          <div
+                            className='flex h-9 cursor-pointer items-center rounded-lg px-3 hover:bg-state-base-hover'
+                            onClick={() => onSelect(item.credentialId)}
+                          >
+                            <NotionIcon
+                              className='mr-2 shrink-0'
+                              src={item.workspaceIcon}
+                              name={displayName}
+                            />
+                            <div
+                              className='system-sm-medium mr-2 grow truncate text-text-secondary'
+                              title={displayName}
+                            >
+                              {displayName}
+                            </div>
+                            {/* // ?Cannot get page length with new auth system */}
+                            {/* <div className='system-xs-medium shrink-0 text-text-accent'>
+                            {item.pages.length} {t('common.dataSource.notion.selector.pageSelected')}
+                          </div> */}
+                          </div>
+                        </MenuItem>
+                      )
+                    })
+                  }
+                </div>
+              </MenuItems>
+            </Transition>
+          </>
+        )
+      }
+    </Menu>
+  )
+}
+
+export default React.memo(CredentialSelector)

web/app/components/base/notion-page-selector/workspace-selector/index.tsx

@@ -1,79 +0,0 @@
-'use client'
-import { useTranslation } from 'react-i18next'
-import { Fragment } from 'react'
-import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react'
-import { RiArrowDownSLine } from '@remixicon/react'
-import NotionIcon from '../../notion-icon'
-import type { DataSourceNotionWorkspace } from '@/models/common'
-
-type WorkspaceSelectorProps = {
-  value: string
-  items: Omit<DataSourceNotionWorkspace, 'total'>[]
-  onSelect: (v: string) => void
-}
-export default function WorkspaceSelector({
-  value,
-  items,
-  onSelect,
-}: WorkspaceSelectorProps) {
-  const { t } = useTranslation()
-  const currentWorkspace = items.find(item => item.workspace_id === value)
-
-  return (
-    <Menu as="div" className="relative inline-block text-left">
-      {
-        ({ open }) => (
-          <>
-            <MenuButton className={`flex h-7 items-center justify-center rounded-md p-1 pr-2 hover:bg-state-base-hover ${open && 'bg-state-base-hover'} cursor-pointer`}>
-              <NotionIcon
-                className='mr-2'
-                src={currentWorkspace?.workspace_icon}
-                name={currentWorkspace?.workspace_name}
-              />
-              <div className='mr-1 w-[90px] truncate text-left text-sm font-medium text-text-secondary' title={currentWorkspace?.workspace_name}>{currentWorkspace?.workspace_name}</div>
-              <RiArrowDownSLine className='h-4 w-4 text-text-secondary' />
-            </MenuButton>
-            <Transition
-              as={Fragment}
-              enter="transition ease-out duration-100"
-              enterFrom="transform opacity-0 scale-95"
-              enterTo="transform opacity-100 scale-100"
-              leave="transition ease-in duration-75"
-              leaveFrom="transform opacity-100 scale-100"
-              leaveTo="transform opacity-0 scale-95"
-            >
-              <MenuItems
-                className='absolute left-0 top-8 z-10 w-80
-                  origin-top-right rounded-lg border-[0.5px]
-                  border-components-panel-border bg-components-panel-bg-blur shadow-lg shadow-shadow-shadow-5'
-              >
-                <div className="max-h-50 overflow-auto p-1">
-                  {
-                    items.map(item => (
-                      <MenuItem key={item.workspace_id}>
-                        <div
-                          className='flex h-9 cursor-pointer items-center rounded-lg px-3 hover:bg-state-base-hover'
-                          onClick={() => onSelect(item.workspace_id)}
-                        >
-                          <NotionIcon
-                            className='mr-2 shrink-0'
-                            src={item.workspace_icon}
-                            name={item.workspace_name}
-                          />
-                          <div className='system-sm-medium mr-2 grow truncate text-text-secondary' title={item.workspace_name}>{item.workspace_name}</div>
-                          <div className='system-xs-medium shrink-0 text-text-accent'>
-                            {item.pages.length} {t('common.dataSource.notion.selector.pageSelected')}
-                          </div>
-                        </div>
-                      </MenuItem>
-                    ))
-                  }
-                </div>
-              </MenuItems>
-            </Transition>
-          </>
-        )
-      }
-    </Menu>
-  )
-}