datasource page

web/app/components/header/account-setting/data-source-page-new/card.tsx

@@ -1,6 +1,6 @@
-import { RiAddLine } from '@remixicon/react'
+import { memo } from 'react'
 import Item from './item'
-import Button from '@/app/components/base/button'
+import Configure from './configure'
 
 const Card = () => {
   return (
@@ -17,12 +17,7 @@ const Card = () => {
             notion-data-source
           </div>
         </div>
-        <Button
+        <Configure />
-          variant='secondary-accent'
-        >
-          <RiAddLine className='h-4 w-4' />
-          Configure
-        </Button>
       </div>
       <div className='system-xs-medium flex h-4 items-center pl-3 text-text-tertiary'>
         Connected workspace
@@ -42,4 +37,4 @@ const Card = () => {
   )
 }
 
-export default Card
+export default memo(Card)

web/app/components/header/account-setting/data-source-page-new/configure.tsx

@@ -0,0 +1,63 @@
+import { memo } from 'react'
+import {
+  RiAddLine,
+  RiEqualizer2Line,
+} from '@remixicon/react'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+import Button from '@/app/components/base/button'
+
+const Configure = () => {
+  return (
+    <>
+      <PortalToFollowElem
+        placement='bottom-end'
+        offset={{
+          mainAxis: 4,
+          crossAxis: -4,
+        }}
+      >
+        <PortalToFollowElemTrigger>
+          <Button
+            variant='secondary-accent'
+          >
+            <RiAddLine className='h-4 w-4' />
+            Configure
+          </Button>
+        </PortalToFollowElemTrigger>
+        <PortalToFollowElemContent className='z-[61]'>
+          <div className='w-[240px] space-y-1.5 rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-2 shadow-lg'>
+            <Button
+              variant='primary'
+              className='w-full px-0'
+            >
+              <div className='grow'>
+                use oauth
+              </div>
+              <div className='h-4 w-[1px] bg-text-primary-on-surface opacity-[0.15]'></div>
+              <div className='flex h-8 w-8 shrink-0 items-center justify-center'>
+                <RiEqualizer2Line className='h-4 w-4' />
+              </div>
+            </Button>
+            <div className='system-2xs-medium-uppercase flex h-4 items-center p-2 text-text-quaternary'>
+              <div className='mr-2 h-[1px] grow bg-gradient-to-l from-[rgba(16,24,40,0.08)]' />
+              OR
+              <div className='ml-2 h-[1px] grow bg-gradient-to-r from-[rgba(16,24,40,0.08)]' />
+            </div>
+            <Button
+              className='w-full'
+              variant='secondary-accent'
+            >
+              Use API Key
+            </Button>
+          </div>
+        </PortalToFollowElemContent>
+      </PortalToFollowElem>
+    </>
+  )
+}
+
+export default memo(Configure)

web/app/components/header/account-setting/data-source-page-new/install-from-marketplace.tsx

@@ -1,4 +1,8 @@
-import { useCallback, useState } from 'react'
+import {
+  memo,
+  useCallback,
+  useState,
+} from 'react'
 import { useTheme } from 'next-themes'
 import { useTranslation } from 'react-i18next'
 import Link from 'next/link'
@@ -77,4 +81,4 @@ const InstallFromMarketplace = ({
   )
 }
 
-export default InstallFromMarketplace
+export default memo(InstallFromMarketplace)

web/app/components/header/account-setting/data-source-page-new/item.tsx

@@ -1,3 +1,4 @@
+import { memo } from 'react'
 import Indicator from '@/app/components/header/indicator'
 import Operator from './operator'
 
@@ -22,4 +23,4 @@ const Item = () => {
   )
 }
 
-export default Item
+export default memo(Item)

web/app/components/header/account-setting/data-source-page-new/operator.tsx

@@ -1,4 +1,5 @@
 import {
+  memo,
   useCallback,
   useMemo,
 } from 'react'
@@ -70,4 +71,4 @@ const Operator = () => {
   )
 }
 
-export default Operator
+export default memo(Operator)

web/app/components/workflow-app/hooks/use-nodes-sync-draft.ts

@@ -28,6 +28,7 @@ export const useNodesSyncDraft = () => {
       edges,
       transform,
     } = store.getState()
+    const nodes = getNodes()
     const [x, y, zoom] = transform
     const {
       appId,
@@ -36,8 +37,7 @@ export const useNodesSyncDraft = () => {
       syncWorkflowDraftHash,
     } = workflowStore.getState()
 
-    if (appId) {
+    if (appId && !!nodes.length) {
-      const nodes = getNodes()
       const hasStartNode = nodes.find(node => node.data.type === BlockEnum.Start)
 
       if (!hasStartNode)