Chore: frontend infrastructure upgrade (#16420)

Co-authored-by: NFish <douxc512@gmail.com>
Co-authored-by: zxhlyh <jasonapring2015@outlook.com>
Co-authored-by: twwu <twwu@dify.ai>
Co-authored-by: jZonG <jzongcode@gmail.com>

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

@@ -87,21 +87,21 @@ const NotionPageSelector = ({
   }, [firstWorkspaceId])
 
   return (
-    <div className='bg-background-default-subtle border border-components-panel-border rounded-xl'>
+    <div className='rounded-xl border border-components-panel-border bg-background-default-subtle'>
       {
         data?.notion_info?.length
           ? (
             <>
-              <div className='flex items-center gap-x-2 p-2 h-12 bg-components-panel-bg border-b border-b-divider-regular rounded-t-xl'>
-                <div className='grow flex items-center gap-x-1'>
+              <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 className='mx-1 w-[1px] h-3 bg-divider-regular' />
+                  <div className='mx-1 h-3 w-[1px] bg-divider-regular' />
                   <RiEqualizer2Line
-                    className='w-4 h-4 cursor-pointer text-text-tertiary'
+                    className='h-4 w-4 cursor-pointer text-text-tertiary'
                     onClick={() => setShowAccountSettingModal({ payload: 'data-source', onCancelCallback: mutate })}
                   />
                 </div>
@@ -110,7 +110,7 @@ const NotionPageSelector = ({
                   onChange={handleSearchValueChange}
                 />
               </div>
-              <div className='rounded-b-xl overflow-hidden'>
+              <div className='overflow-hidden rounded-b-xl'>
                 <PageSelector
                   value={selectedPagesId}
                   disabledValue={getPagesMapAndSelectedPagesId[2]}

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

@@ -38,12 +38,12 @@ const NotionPageSelectorModal = ({
       isShow={isShow}
       onClose={() => { }}
     >
-      <div className='flex items-center justify-between mb-6 h-8'>
+      <div className='mb-6 flex h-8 items-center justify-between'>
         <div className='text-xl font-semibold text-gray-900'>{t('common.dataSource.notion.selector.addPages')}</div>
         <div
-          className='flex items-center justify-center -mr-2 w-8 h-8 cursor-pointer'
+          className='-mr-2 flex h-8 w-8 cursor-pointer items-center justify-center'
           onClick={handleClose}>
-          <XMarkIcon className='w-4 h-4' />
+          <XMarkIcon className='h-4 w-4' />
         </div>
       </div>
       <NotionPageSelector

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

@@ -94,14 +94,14 @@ const ItemComponent = ({ index, style, data }: ListChildComponentProps<{
     if (hasChild) {
       return (
         <div
-          className='flex items-center justify-center shrink-0 mr-1 w-5 h-5 hover:bg-components-button-ghost-bg-hover rounded-md'
+          className='mr-1 flex h-5 w-5 shrink-0 items-center justify-center rounded-md hover:bg-components-button-ghost-bg-hover'
           style={{ marginLeft: current.depth * 8 }}
           onClick={() => handleToggle(index)}
         >
           {
             current.expand
-              ? <RiArrowDownSLine className='w-4 h-4 text-text-tertiary' />
-              : <RiArrowRightSLine className='w-4 h-4 text-text-tertiary' />
+              ? <RiArrowDownSLine className='h-4 w-4 text-text-tertiary' />
+              : <RiArrowRightSLine className='h-4 w-4 text-text-tertiary' />
           }
         </div>
       )
@@ -112,18 +112,18 @@ const ItemComponent = ({ index, style, data }: ListChildComponentProps<{
       )
     }
     return (
-      <div className='shrink-0 mr-1 w-5 h-5' style={{ marginLeft: current.depth * 8 }} />
+      <div className='mr-1 h-5 w-5 shrink-0' style={{ marginLeft: current.depth * 8 }} />
     )
   }
 
   return (
     <div
-      className={cn('group flex items-center pl-2 pr-[2px] rounded-md hover:bg-state-base-hover cursor-pointer',
+      className={cn('group flex cursor-pointer items-center rounded-md pl-2 pr-[2px] hover:bg-state-base-hover',
         previewPageId === current.page_id && 'bg-state-base-hover')}
       style={{ ...style, top: style.top as number + 8, left: 8, right: 8, width: 'calc(100% - 16px)' }}
     >
       <Checkbox
-        className='shrink-0 mr-2'
+        className='mr-2 shrink-0'
         checked={checkedIds.has(current.page_id)}
         disabled={disabled}
         onCheck={() => {
@@ -134,12 +134,12 @@ const ItemComponent = ({ index, style, data }: ListChildComponentProps<{
       />
       {!searchValue && renderArrow()}
       <NotionIcon
-        className='shrink-0 mr-1'
+        className='mr-1 shrink-0'
         type='page'
         src={current.page_icon}
       />
       <div
-        className='grow text-[13px] leading-4 font-medium text-text-secondary truncate'
+        className='grow truncate text-[13px] font-medium leading-4 text-text-secondary'
         title={current.page_name}
       >
         {current.page_name}
@@ -147,9 +147,9 @@ const ItemComponent = ({ index, style, data }: ListChildComponentProps<{
       {
         canPreview && (
           <div
-            className='shrink-0 hidden group-hover:flex items-center ml-1 px-2 h-6 rounded-md text-xs leading-4 font-medium text-components-button-secondary-text
-            cursor-pointer bg-components-button-secondary-bg border-[0.5px] border-components-button-secondary-border shadow-xs shadow-shadow-shadow-3
-            backdrop-blur-[10px] hover:bg-components-button-secondary-bg-hover hover:border-components-button-secondary-border-hover'
+            className='ml-1 hidden h-6 shrink-0 cursor-pointer items-center rounded-md border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg px-2 text-xs
+            font-medium leading-4 text-components-button-secondary-text shadow-xs shadow-shadow-shadow-3 backdrop-blur-[10px]
+            hover:border-components-button-secondary-border-hover hover:bg-components-button-secondary-bg-hover group-hover:flex'
             onClick={() => handlePreview(index)}>
             {t('common.dataSource.notion.selector.preview')}
           </div>
@@ -158,7 +158,7 @@ const ItemComponent = ({ index, style, data }: ListChildComponentProps<{
       {
         searchValue && (
           <div
-            className='shrink-0 ml-1 max-w-[120px] text-xs text-text-quaternary truncate'
+            className='ml-1 max-w-[120px] shrink-0 truncate text-xs text-text-quaternary'
             title={breadCrumbs.join(' / ')}
           >
             {breadCrumbs.join(' / ')}
@@ -284,7 +284,7 @@ const PageSelector = ({
 
   if (!currentDataList.length) {
     return (
-      <div className='flex items-center justify-center h-[296px] text-[13px] text-text-tertiary'>
+      <div className='flex h-[296px] items-center justify-center text-[13px] text-text-tertiary'>
         {t('common.dataSource.notion.selector.noSearchResult')}
       </div>
     )

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

@@ -19,10 +19,10 @@ const SearchInput = ({
   }, [onChange])
 
   return (
-    <div className={cn('w-[200px] flex items-center p-2 h-8 rounded-lg bg-components-input-bg-normal')}>
-      <RiSearchLine className={'w-4 h-4 mr-0.5 shrink-0 text-components-input-text-placeholder'} />
+    <div className={cn('flex h-8 w-[200px] items-center rounded-lg bg-components-input-bg-normal p-2')}>
+      <RiSearchLine className={'mr-0.5 h-4 w-4 shrink-0 text-components-input-text-placeholder'} />
       <input
-        className='min-w-0 grow px-1 text-[13px] leading-[16px] bg-transparent text-components-input-text-filled placeholder:text-components-input-text-placeholder border-0 outline-0 appearance-none'
+        className='min-w-0 grow appearance-none border-0 bg-transparent px-1 text-[13px] leading-[16px] text-components-input-text-filled outline-0 placeholder:text-components-input-text-placeholder'
         value={value}
         onChange={(e: ChangeEvent<HTMLInputElement>) => onChange(e.target.value)}
         placeholder={t('common.dataSource.notion.selector.searchPages') || ''}
@@ -30,7 +30,7 @@ const SearchInput = ({
       {
         value && (
           <RiCloseCircleFill
-            className={'w-4 h-4 shrink-0 cursor-pointer text-components-input-text-placeholder'}
+            className={'h-4 w-4 shrink-0 cursor-pointer text-components-input-text-placeholder'}
             onClick={handleClear}
           />
         )

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

@@ -1,7 +1,7 @@
 'use client'
 import { useTranslation } from 'react-i18next'
 import { Fragment } from 'react'
-import { Menu, Transition } from '@headlessui/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'
@@ -24,16 +24,16 @@ export default function WorkspaceSelector({
       {
         ({ open }) => (
           <>
-            <Menu.Button className={`flex items-center justify-center h-7 p-1 pr-2 rounded-md hover:bg-state-base-hover ${open && 'bg-state-base-hover'} cursor-pointer`}>
+            <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] text-left text-sm font-medium text-text-secondary truncate' title={currentWorkspace?.workspace_name}>{currentWorkspace?.workspace_name}</div>
+              <div className='mr-1 w-[90px] truncate text-left text-sm font-medium text-text-secondary' title={currentWorkspace?.workspace_name}>{currentWorkspace?.workspace_name}</div>
               {/* <div className='mr-1 px-1 h-[18px] bg-primary-50 rounded-lg text-xs font-medium text-text-accent'>{currentWorkspace?.pages.length}</div> */}
-              <RiArrowDownSLine className='w-4 h-4 text-text-secondary' />
-            </Menu.Button>
+              <RiArrowDownSLine className='h-4 w-4 text-text-secondary' />
+            </MenuButton>
             <Transition
               as={Fragment}
               enter="transition ease-out duration-100"
@@ -43,34 +43,34 @@ export default function WorkspaceSelector({
               leaveFrom="transform opacity-100 scale-100"
               leaveTo="transform opacity-0 scale-95"
             >
-              <Menu.Items
+              <MenuItems
                 className='absolute left-0 top-8 z-10 w-80
-                  origin-top-right rounded-lg bg-components-panel-bg-blur
-                  border-[0.5px] border-components-panel-border shadow-lg shadow-shadow-shadow-5 backdrop-blur-[5px]'
+                  origin-top-right rounded-lg border-[0.5px]
+                  border-components-panel-border bg-components-panel-bg-blur shadow-lg shadow-shadow-shadow-5 backdrop-blur-[5px]'
               >
-                <div className="p-1 max-h-50 overflow-auto">
+                <div className="max-h-50 overflow-auto p-1">
                   {
                     items.map(item => (
-                      <Menu.Item key={item.workspace_id}>
+                      <MenuItem key={item.workspace_id}>
                         <div
-                          className='flex items-center px-3 h-9 rounded-lg hover:bg-state-base-hover cursor-pointer'
+                          className='flex h-9 cursor-pointer items-center rounded-lg px-3 hover:bg-state-base-hover'
                           onClick={() => onSelect(item.workspace_id)}
                         >
                           <NotionIcon
-                            className='shrink-0 mr-2'
+                            className='mr-2 shrink-0'
                             src={item.workspace_icon}
                             name={item.workspace_name}
                           />
-                          <div className='grow mr-2 system-sm-medium text-text-secondary truncate' title={item.workspace_name}>{item.workspace_name}</div>
-                          <div className='shrink-0 system-xs-medium text-text-accent'>
+                          <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>
-                      </Menu.Item>
+                      </MenuItem>
                     ))
                   }
                 </div>
-              </Menu.Items>
+              </MenuItems>
             </Transition>
           </>
         )