Merge remote-tracking branch 'origin/main' into feat/add-vercel-react-best-practices-skill

.github/workflows/style.yml

@@ -106,8 +106,9 @@ jobs:
         if: steps.changed-files.outputs.any_changed == 'true'
         working-directory: ./web
         run: |
-          pnpm run lint:report
-        continue-on-error: true
+          pnpm run lint:ci
+        # pnpm run lint:report
+        # continue-on-error: true
 
       # - name: Annotate Code
       #   if: steps.changed-files.outputs.any_changed == 'true' && github.event_name == 'pull_request'
@@ -126,11 +127,6 @@ jobs:
         working-directory: ./web
         run: pnpm run knip
 
-      - name: Web build check
-        if: steps.changed-files.outputs.any_changed == 'true'
-        working-directory: ./web
-        run: pnpm run build
-
   superlinter:
     name: SuperLinter
     runs-on: ubuntu-latest

.github/workflows/web-tests.yml

@@ -366,3 +366,48 @@ jobs:
           path: web/coverage
           retention-days: 30
           if-no-files-found: error
+
+  web-build:
+    name: Web Build
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./web
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v6
+        with:
+          persist-credentials: false
+
+      - name: Check changed files
+        id: changed-files
+        uses: tj-actions/changed-files@v47
+        with:
+          files: |
+            web/**
+            .github/workflows/web-tests.yml
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          package_json_file: web/package.json
+          run_install: false
+
+      - name: Setup NodeJS
+        uses: actions/setup-node@v6
+        if: steps.changed-files.outputs.any_changed == 'true'
+        with:
+          node-version: 24
+          cache: pnpm
+          cache-dependency-path: ./web/pnpm-lock.yaml
+
+      - name: Web dependencies
+        if: steps.changed-files.outputs.any_changed == 'true'
+        working-directory: ./web
+        run: pnpm install --frozen-lockfile
+
+      - name: Web build check
+        if: steps.changed-files.outputs.any_changed == 'true'
+        working-directory: ./web
+        run: pnpm run build

web/__mocks__/zustand.ts

@@ -0,0 +1,56 @@
+import type * as ZustandExportedTypes from 'zustand'
+import { act } from '@testing-library/react'
+
+export * from 'zustand'
+
+const { create: actualCreate, createStore: actualCreateStore }
+  // eslint-disable-next-line antfu/no-top-level-await
+  = await vi.importActual<typeof ZustandExportedTypes>('zustand')
+
+export const storeResetFns = new Set<() => void>()
+
+const createUncurried = <T>(
+  stateCreator: ZustandExportedTypes.StateCreator<T>,
+) => {
+  const store = actualCreate(stateCreator)
+  const initialState = store.getInitialState()
+  storeResetFns.add(() => {
+    store.setState(initialState, true)
+  })
+  return store
+}
+
+export const create = (<T>(
+  stateCreator: ZustandExportedTypes.StateCreator<T>,
+) => {
+  return typeof stateCreator === 'function'
+    ? createUncurried(stateCreator)
+    : createUncurried
+}) as typeof ZustandExportedTypes.create
+
+const createStoreUncurried = <T>(
+  stateCreator: ZustandExportedTypes.StateCreator<T>,
+) => {
+  const store = actualCreateStore(stateCreator)
+  const initialState = store.getInitialState()
+  storeResetFns.add(() => {
+    store.setState(initialState, true)
+  })
+  return store
+}
+
+export const createStore = (<T>(
+  stateCreator: ZustandExportedTypes.StateCreator<T>,
+) => {
+  return typeof stateCreator === 'function'
+    ? createStoreUncurried(stateCreator)
+    : createStoreUncurried
+}) as typeof ZustandExportedTypes.createStore
+
+afterEach(() => {
+  act(() => {
+    storeResetFns.forEach((resetFn) => {
+      resetFn()
+    })
+  })
+})

web/app/components/app/app-access-control/access-control.spec.tsx

@@ -3,9 +3,7 @@ import type { App } from '@/types/app'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import useAccessControlStore from '@/context/access-control-store'
-import { useGlobalPublicStore } from '@/context/global-public-context'
 import { AccessMode, SubjectType } from '@/models/access-control'
-import { defaultSystemFeatures } from '@/types/feature'
 import Toast from '../../base/toast'
 import AccessControlDialog from './access-control-dialog'
 import AccessControlItem from './access-control-item'
@@ -105,22 +103,6 @@ const memberSubject: Subject = {
   accountData: baseMember,
 } as Subject
 
-const resetAccessControlStore = () => {
-  useAccessControlStore.setState({
-    appId: '',
-    specificGroups: [],
-    specificMembers: [],
-    currentMenu: AccessMode.SPECIFIC_GROUPS_MEMBERS,
-    selectedGroupsForBreadcrumb: [],
-  })
-}
-
-const resetGlobalStore = () => {
-  useGlobalPublicStore.setState({
-    systemFeatures: defaultSystemFeatures,
-  })
-}
-
 beforeAll(() => {
   class MockIntersectionObserver {
     observe = vi.fn(() => undefined)
@@ -132,9 +114,6 @@ beforeAll(() => {
 })
 
 beforeEach(() => {
-  vi.clearAllMocks()
-  resetAccessControlStore()
-  resetGlobalStore()
   mockMutateAsync.mockResolvedValue(undefined)
   mockUseUpdateAccessMode.mockReturnValue({
     isPending: false,

web/app/components/app/configuration/dataset-config/select-dataset/index.tsx

@@ -189,6 +189,7 @@ const SelectDataSet: FC<ISelectDataSetProps> = ({
                 }
               </div>
             ))}
+            {isFetchingNextPage && <Loading />}
           </div>
         </>
       )}

web/app/components/apps/app-card-skeleton.tsx

@@ -21,15 +21,15 @@ export const AppCardSkeleton = React.memo(({ count = 6 }: AppCardSkeletonProps)
         >
           <SkeletonContainer className="h-full">
             <SkeletonRow>
-              <SkeletonRectangle className="h-10 w-10 rounded-lg" />
+              <SkeletonRectangle className="h-10 w-10 animate-pulse rounded-lg" />
               <div className="flex flex-1 flex-col gap-1">
-                <SkeletonRectangle className="h-4 w-2/3" />
-                <SkeletonRectangle className="h-3 w-1/3" />
+                <SkeletonRectangle className="h-4 w-2/3 animate-pulse" />
+                <SkeletonRectangle className="h-3 w-1/3 animate-pulse" />
               </div>
             </SkeletonRow>
             <div className="mt-4 flex flex-col gap-2">
-              <SkeletonRectangle className="h-3 w-full" />
-              <SkeletonRectangle className="h-3 w-4/5" />
+              <SkeletonRectangle className="h-3 w-full animate-pulse" />
+              <SkeletonRectangle className="h-3 w-4/5 animate-pulse" />
             </div>
           </SkeletonContainer>
         </div>

web/app/components/apps/list.tsx

@@ -248,6 +248,9 @@ const List = () => {
             // No apps - show empty state
             return <Empty />
           })()}
+          {isFetchingNextPage && (
+            <AppCardSkeleton count={3} />
+          )}
         </div>
 
         {isCurrentWorkspaceEditor && (

web/app/components/base/loading/index.tsx

@@ -1,21 +1,25 @@
 'use client'
 
-import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-
+import { cn } from '@/utils/classnames'
 import './style.css'
 
 type ILoadingProps = {
   type?: 'area' | 'app'
+  className?: string
 }
-const Loading = (
-  { type = 'area' }: ILoadingProps = { type: 'area' },
-) => {
+
+const Loading = (props?: ILoadingProps) => {
+  const { type = 'area', className } = props || {}
   const { t } = useTranslation()
 
   return (
     <div
-      className={`flex w-full items-center justify-center ${type === 'app' ? 'h-full' : ''}`}
+      className={cn(
+        'flex w-full items-center justify-center',
+        type === 'app' && 'h-full',
+        className,
+      )}
       role="status"
       aria-live="polite"
       aria-label={t('loading', { ns: 'appApi' })}
@@ -37,4 +41,5 @@ const Loading = (
     </div>
   )
 }
+
 export default Loading

web/app/components/datasets/list/datasets.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
+import Loading from '@/app/components/base/loading'
 import { useSelector as useAppContextWithSelector } from '@/context/app-context'
 import { useDatasetList, useInvalidDatasetList } from '@/service/knowledge/use-dataset'
 import DatasetCard from './dataset-card'
@@ -25,6 +26,7 @@ const Datasets = ({
     fetchNextPage,
     hasNextPage,
     isFetching,
+    isFetchingNextPage,
   } = useDatasetList({
     initialPage: 1,
     tag_ids: tags,
@@ -60,6 +62,7 @@ const Datasets = ({
         {datasetList?.pages.map(({ data: datasets }) => datasets.map(dataset => (
           <DatasetCard key={dataset.id} dataset={dataset} onSuccess={invalidDatasetList} />),
         ))}
+        {isFetchingNextPage && <Loading />}
         <div ref={anchorRef} className="h-0" />
       </nav>
     </>

web/app/components/header/app-nav/index.tsx

@@ -33,6 +33,7 @@ const AppNav = () => {
     data: appsData,
     fetchNextPage,
     hasNextPage,
+    isFetchingNextPage,
     refetch,
   } = useInfiniteAppList({
     page: 1,
@@ -111,6 +112,7 @@ const AppNav = () => {
         createText={t('menus.newApp', { ns: 'common' })}
         onCreate={openModal}
         onLoadMore={handleLoadMore}
+        isLoadingMore={isFetchingNextPage}
       />
       <CreateAppModal
         show={showNewAppDialog}

web/app/components/header/dataset-nav/index.tsx

@@ -23,6 +23,7 @@ const DatasetNav = () => {
     data: datasetList,
     fetchNextPage,
     hasNextPage,
+    isFetchingNextPage,
   } = useDatasetList({
     initialPage: 1,
     limit: 30,
@@ -93,6 +94,7 @@ const DatasetNav = () => {
       createText={t('menus.newDataset', { ns: 'common' })}
       onCreate={() => router.push(createRoute)}
       onLoadMore={handleLoadMore}
+      isLoadingMore={isFetchingNextPage}
     />
   )
 }

web/app/components/header/nav/index.tsx

@@ -30,6 +30,7 @@ const Nav = ({
   createText,
   onCreate,
   onLoadMore,
+  isLoadingMore,
   isApp,
 }: INavProps) => {
   const setAppDetail = useAppStore(state => state.setAppDetail)
@@ -81,6 +82,7 @@ const Nav = ({
               createText={createText}
               onCreate={onCreate}
               onLoadMore={onLoadMore}
+              isLoadingMore={isLoadingMore}
             />
           </>
         )

web/app/components/header/nav/nav-selector/index.tsx

@@ -14,6 +14,7 @@ import { useStore as useAppStore } from '@/app/components/app/store'
 import { AppTypeIcon } from '@/app/components/app/type-selector'
 import AppIcon from '@/app/components/base/app-icon'
 import { FileArrow01, FilePlus01, FilePlus02 } from '@/app/components/base/icons/src/vender/line/files'
+import Loading from '@/app/components/base/loading'
 import { useAppContext } from '@/context/app-context'
 import { cn } from '@/utils/classnames'
 
@@ -34,9 +35,10 @@ export type INavSelectorProps = {
   isApp?: boolean
   onCreate: (state: string) => void
   onLoadMore?: () => void
+  isLoadingMore?: boolean
 }
 
-const NavSelector = ({ curNav, navigationItems, createText, isApp, onCreate, onLoadMore }: INavSelectorProps) => {
+const NavSelector = ({ curNav, navigationItems, createText, isApp, onCreate, onLoadMore, isLoadingMore }: INavSelectorProps) => {
   const { t } = useTranslation()
   const router = useRouter()
   const { isCurrentWorkspaceEditor } = useAppContext()
@@ -106,6 +108,11 @@ const NavSelector = ({ curNav, navigationItems, createText, isApp, onCreate, onL
                   </MenuItem>
                 ))
               }
+              {isLoadingMore && (
+                <div className="flex justify-center py-2">
+                  <Loading />
+                </div>
+              )}
             </div>
             {!isApp && isCurrentWorkspaceEditor && (
               <MenuItem as="div" className="w-full p-1">

web/app/components/plugins/marketplace/list/list-wrapper.tsx

@@ -19,6 +19,7 @@ const ListWrapper = ({
     marketplaceCollections,
     marketplaceCollectionPluginsMap,
     isLoading,
+    isFetchingNextPage,
     page,
   } = useMarketplaceData()
 
@@ -53,6 +54,11 @@ const ListWrapper = ({
           />
         )
       }
+      {
+        isFetchingNextPage && (
+          <Loading className="my-3" />
+        )
+      }
     </div>
   )
 }

web/app/components/plugins/marketplace/state.ts

@@ -33,7 +33,7 @@ export function useMarketplaceData() {
   }, [isSearchMode, searchPluginText, activePluginType, filterPluginTags, sort])
 
   const pluginsQuery = useMarketplacePlugins(queryParams)
-  const { hasNextPage, fetchNextPage, isFetching } = pluginsQuery
+  const { hasNextPage, fetchNextPage, isFetching, isFetchingNextPage } = pluginsQuery
 
   const handlePageChange = useCallback(() => {
     if (hasNextPage && !isFetching)
@@ -50,5 +50,6 @@ export function useMarketplaceData() {
     pluginsTotal: pluginsQuery.data?.pages[0]?.total,
     page: pluginsQuery.data?.pages.length || 1,
     isLoading: collectionsQuery.isLoading || pluginsQuery.isLoading,
+    isFetchingNextPage,
   }
 }

web/app/components/plugins/plugin-page/filter-management/index.spec.tsx

@@ -144,17 +144,6 @@ describe('constant.ts - Type Definitions', () => {
 
 // ==================== store.ts Tests ====================
 describe('store.ts - Zustand Store', () => {
-  beforeEach(() => {
-    // Reset store to initial state
-    const { setState } = useStore
-    setState({
-      tagList: [],
-      categoryList: [],
-      showTagManagementModal: false,
-      showCategoryManagementModal: false,
-    })
-  })
-
   describe('Initial State', () => {
     it('should have empty tagList initially', () => {
       const { result } = renderHook(() => useStore(state => state.tagList))

web/app/components/plugins/plugin-page/plugins-panel.tsx

@@ -5,11 +5,11 @@ import { useDebounceFn } from 'ahooks'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
+import Loading from '@/app/components/base/loading'
 import PluginDetailPanel from '@/app/components/plugins/plugin-detail-panel'
 import { useGetLanguage } from '@/context/i18n'
 import { renderI18nObject } from '@/i18n-config'
 import { useInstalledLatestVersion, useInstalledPluginList, useInvalidateInstalledPluginList } from '@/service/use-plugins'
-import Loading from '../../base/loading'
 import { PluginSource } from '../types'
 import { usePluginPageContext } from './context'
 import Empty from './empty'
@@ -107,12 +107,17 @@ const PluginsPanel = () => {
                   <div className="w-full">
                     <List pluginList={filteredList || []} />
                   </div>
-                  {!isLastPage && !isFetching && (
-                    <Button onClick={loadNextPage}>
-                      {t('common.loadMore', { ns: 'workflow' })}
-                    </Button>
+                  {!isLastPage && (
+                    <div className="flex justify-center py-4">
+                      {isFetching
+                        ? <Loading className="size-8" />
+                        : (
+                            <Button onClick={loadNextPage}>
+                              {t('common.loadMore', { ns: 'workflow' })}
+                            </Button>
+                          )}
+                    </div>
                   )}
-                  {isFetching && <div className="system-md-semibold text-text-secondary">{t('detail.loading', { ns: 'appLog' })}</div>}
                 </div>
               )
             : (

web/app/components/plugins/readme-panel/index.spec.tsx

@@ -134,13 +134,6 @@ describe('BUILTIN_TOOLS_ARRAY', () => {
 // Store Tests
 // ================================
 describe('useReadmePanelStore', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-    // Reset store state before each test
-    const { setCurrentPluginDetail } = useReadmePanelStore.getState()
-    setCurrentPluginDetail()
-  })
-
   describe('Initial State', () => {
     it('should have undefined currentPluginDetail initially', () => {
       const { currentPluginDetail } = useReadmePanelStore.getState()
@@ -228,13 +221,6 @@ describe('useReadmePanelStore', () => {
 // ReadmeEntrance Component Tests
 // ================================
 describe('ReadmeEntrance', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-    // Reset store state
-    const { setCurrentPluginDetail } = useReadmePanelStore.getState()
-    setCurrentPluginDetail()
-  })
-
   // ================================
   // Rendering Tests
   // ================================
@@ -417,11 +403,6 @@ describe('ReadmeEntrance', () => {
 // ================================
 describe('ReadmePanel', () => {
   beforeEach(() => {
-    vi.clearAllMocks()
-    // Reset store state
-    const { setCurrentPluginDetail } = useReadmePanelStore.getState()
-    setCurrentPluginDetail()
-    // Reset mock
     mockUsePluginReadme.mockReturnValue({
       data: null,
       isLoading: false,

web/eslint.config.mjs

@@ -9,30 +9,15 @@ import difyI18n from './eslint-rules/index.js'
 export default antfu(
   {
     react: {
+      reactCompiler: true,
       overrides: {
         'react/no-context-provider': 'off',
         'react/no-forward-ref': 'off',
         'react/no-use-context': 'off',
-        'react/prefer-namespace-import': 'error',
 
-        // React Compiler rules
-        // Set to warn for gradual adoption
-        'react-hooks/config': 'warn',
-        'react-hooks/error-boundaries': 'warn',
-        'react-hooks/component-hook-factories': 'warn',
-        'react-hooks/gating': 'warn',
-        'react-hooks/globals': 'warn',
-        'react-hooks/immutability': 'warn',
-        'react-hooks/preserve-manual-memoization': 'warn',
-        'react-hooks/purity': 'warn',
-        'react-hooks/refs': 'warn',
         // prefer react-hooks-extra/no-direct-set-state-in-use-effect
         'react-hooks/set-state-in-effect': 'off',
-        'react-hooks/set-state-in-render': 'warn',
-        'react-hooks/static-components': 'warn',
-        'react-hooks/unsupported-syntax': 'warn',
-        'react-hooks/use-memo': 'warn',
-        'react-hooks/incompatible-library': 'warn',
+        'react-hooks-extra/no-direct-set-state-in-use-effect': 'error',
       },
     },
     nextjs: true,
@@ -40,7 +25,7 @@ export default antfu(
     typescript: {
       overrides: {
         'ts/consistent-type-definitions': ['error', 'type'],
-        'ts/no-explicit-any': 'warn',
+        'ts/no-explicit-any': 'error',
       },
     },
     test: {
@@ -54,6 +39,11 @@ export default antfu(
       },
     },
   },
+  {
+    rules: {
+      'node/prefer-global/process': 'off',
+    },
+  },
   {
     files: ['**/*.ts', '**/*.tsx'],
     settings: {
@@ -62,32 +52,6 @@ export default antfu(
       },
     },
   },
-  // downgrade some rules from error to warn for gradual adoption
-  // we should fix these in following pull requests
-  {
-    // @keep-sorted
-    rules: {
-      'next/inline-script-id': 'warn',
-      'no-console': 'warn',
-      'no-irregular-whitespace': 'warn',
-      'node/prefer-global/buffer': 'warn',
-      'node/prefer-global/process': 'warn',
-      'react/no-create-ref': 'warn',
-      'react/no-missing-key': 'warn',
-      'react/no-nested-component-definitions': 'warn',
-      'regexp/no-dupe-disjunctions': 'warn',
-      'regexp/no-super-linear-backtracking': 'warn',
-      'regexp/no-unused-capturing-group': 'warn',
-      'regexp/no-useless-assertions': 'warn',
-      'regexp/no-useless-quantifier': 'warn',
-      'style/multiline-ternary': 'warn',
-      'test/no-identical-title': 'warn',
-      'test/prefer-hooks-in-order': 'warn',
-      'ts/no-empty-object-type': 'warn',
-      'unicorn/prefer-number-properties': 'warn',
-      'unused-imports/no-unused-vars': 'warn',
-    },
-  },
   storybook.configs['flat/recommended'],
   ...pluginQuery.configs['flat/recommended'],
   // sonar
@@ -178,19 +142,19 @@ export default antfu(
     },
   },
   // dify i18n namespace migration
-  {
-    files: ['**/*.ts', '**/*.tsx'],
-    ignores: ['eslint-rules/**', 'i18n/**', 'i18n-config/**'],
-    plugins: {
-      'dify-i18n': difyI18n,
-    },
-    rules: {
-      // 'dify-i18n/no-as-any-in-t': ['error', { mode: 'all' }],
-      'dify-i18n/no-as-any-in-t': 'error',
-      // 'dify-i18n/no-legacy-namespace-prefix': 'error',
-      // 'dify-i18n/require-ns-option': 'error',
-    },
-  },
+  // {
+  //   files: ['**/*.ts', '**/*.tsx'],
+  //   ignores: ['eslint-rules/**', 'i18n/**', 'i18n-config/**'],
+  //   plugins: {
+  //     'dify-i18n': difyI18n,
+  //   },
+  //   rules: {
+  //     // 'dify-i18n/no-as-any-in-t': ['error', { mode: 'all' }],
+  //     'dify-i18n/no-as-any-in-t': 'error',
+  //     // 'dify-i18n/no-legacy-namespace-prefix': 'error',
+  //     // 'dify-i18n/require-ns-option': 'error',
+  //   },
+  // },
   // i18n JSON validation rules
   {
     files: ['i18n/**/*.json'],

web/package.json

@@ -28,6 +28,7 @@
     "build:docker": "next build && node scripts/optimize-standalone.js",
     "start": "node ./scripts/copy-and-start.mjs",
     "lint": "eslint --cache --cache-location node_modules/.cache/eslint/.eslint-cache",
+    "lint:ci": "pnpm lint --concurrency 3",
     "lint:fix": "pnpm lint --fix",
     "lint:quiet": "pnpm lint --quiet",
     "lint:complexity": "pnpm lint --rule 'complexity: [error, {max: 15}]' --quiet",

web/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "incremental": true,
-    "target": "es2015",
+    "target": "es2022",
     "jsx": "preserve",
     "lib": [
       "dom",

web/vitest.setup.ts

@@ -85,6 +85,10 @@ afterEach(() => {
 // mock next/image to avoid width/height requirements for data URLs
 vi.mock('next/image')
 
+// mock zustand - auto-resets all stores after each test
+// Based on official Zustand testing guide: https://zustand.docs.pmnd.rs/guides/testing
+vi.mock('zustand')
+
 // mock react-i18next
 vi.mock('react-i18next', async () => {
   const actual = await vi.importActual<typeof import('react-i18next')>('react-i18next')