refactor: spilt context for better hmr (#33033)

web/app/components/plugins/plugin-auth/__tests__/authorized-in-node.spec.tsx

@@ -42,7 +42,7 @@ vi.mock('@/context/app-context', () => ({
   }),
 }))
 
-vi.mock('@/app/components/base/toast', () => ({
+vi.mock('@/app/components/base/toast/context', () => ({
   useToastContext: () => ({ notify: vi.fn() }),
 }))
 

web/app/components/plugins/plugin-auth/__tests__/plugin-auth-in-agent.spec.tsx

@@ -42,7 +42,7 @@ vi.mock('@/context/app-context', () => ({
   }),
 }))
 
-vi.mock('@/app/components/base/toast', () => ({
+vi.mock('@/app/components/base/toast/context', () => ({
   useToastContext: () => ({ notify: vi.fn() }),
 }))
 

web/app/components/plugins/plugin-auth/authorize/__tests__/api-key-modal.spec.tsx

@@ -9,7 +9,7 @@ const mockAddPluginCredential = vi.fn().mockResolvedValue({})
 const mockUpdatePluginCredential = vi.fn().mockResolvedValue({})
 const mockFormValues = { isCheckValidated: true, values: { __name__: 'My Key', api_key: 'sk-123' } }
 
-vi.mock('@/app/components/base/toast', () => ({
+vi.mock('@/app/components/base/toast/context', () => ({
   useToastContext: () => ({
     notify: mockNotify,
   }),

web/app/components/plugins/plugin-auth/authorize/__tests__/authorize-components.spec.tsx

@@ -95,7 +95,7 @@ vi.mock('@/app/components/base/form/form-scenarios/auth', () => ({
 
 // Mock useToastContext
 const mockNotify = vi.fn()
-vi.mock('@/app/components/base/toast', () => ({
+vi.mock('@/app/components/base/toast/context', () => ({
   useToastContext: () => ({ notify: mockNotify }),
 }))
 

web/app/components/plugins/plugin-auth/authorize/__tests__/oauth-client-settings.spec.tsx

@@ -9,7 +9,7 @@ const mockDeletePluginOAuthCustomClient = vi.fn().mockResolvedValue({})
 const mockInvalidPluginOAuthClientSchema = vi.fn()
 const mockFormValues = { isCheckValidated: true, values: { __oauth_client__: 'custom', client_id: 'test-id' } }
 
-vi.mock('@/app/components/base/toast', () => ({
+vi.mock('@/app/components/base/toast/context', () => ({
   useToastContext: () => ({
     notify: mockNotify,
   }),

web/app/components/plugins/plugin-auth/authorize/api-key-modal.tsx

@@ -16,7 +16,7 @@ import AuthForm from '@/app/components/base/form/form-scenarios/auth'
 import { FormTypeEnum } from '@/app/components/base/form/types'
 import Loading from '@/app/components/base/loading'
 import Modal from '@/app/components/base/modal/modal'
-import { useToastContext } from '@/app/components/base/toast'
+import { useToastContext } from '@/app/components/base/toast/context'
 import { ReadmeEntrance } from '../../readme-panel/entrance'
 import { ReadmeShowType } from '../../readme-panel/store'
 import {

web/app/components/plugins/plugin-auth/authorize/oauth-client-settings.tsx

@@ -17,7 +17,7 @@ import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
 import AuthForm from '@/app/components/base/form/form-scenarios/auth'
 import Modal from '@/app/components/base/modal/modal'
-import { useToastContext } from '@/app/components/base/toast'
+import { useToastContext } from '@/app/components/base/toast/context'
 import { ReadmeEntrance } from '../../readme-panel/entrance'
 import { ReadmeShowType } from '../../readme-panel/store'
 import {

web/app/components/plugins/plugin-auth/authorized/__tests__/index.spec.tsx

@@ -52,7 +52,7 @@ vi.mock('../../hooks/use-credential', () => ({
 
 // Mock toast context
 const mockNotify = vi.fn()
-vi.mock('@/app/components/base/toast', () => ({
+vi.mock('@/app/components/base/toast/context', () => ({
   useToastContext: () => ({
     notify: mockNotify,
   }),

web/app/components/plugins/plugin-auth/authorized/index.tsx

@@ -19,7 +19,7 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import { useToastContext } from '@/app/components/base/toast'
+import { useToastContext } from '@/app/components/base/toast/context'
 import Indicator from '@/app/components/header/indicator'
 import { cn } from '@/utils/classnames'
 import Authorize from '../authorize'

web/app/components/plugins/plugin-auth/hooks/__tests__/use-plugin-auth-action.spec.ts

@@ -11,7 +11,7 @@ const mockSetPluginDefaultCredential = vi.fn().mockResolvedValue({})
 const mockUpdatePluginCredential = vi.fn().mockResolvedValue({})
 const mockNotify = vi.fn()
 
-vi.mock('@/app/components/base/toast', () => ({
+vi.mock('@/app/components/base/toast/context', () => ({
   useToastContext: () => ({
     notify: mockNotify,
   }),

web/app/components/plugins/plugin-auth/hooks/use-plugin-auth-action.ts

@@ -5,7 +5,7 @@ import {
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useToastContext } from '@/app/components/base/toast'
+import { useToastContext } from '@/app/components/base/toast/context'
 import {
   useDeletePluginCredentialHook,
   useSetPluginDefaultCredentialHook,

web/app/components/plugins/plugin-detail-panel/subscription-list/edit/__tests__/apikey-edit-modal.spec.tsx

@@ -54,13 +54,16 @@ vi.mock('@/app/components/base/toast', async (importOriginal) => {
     default: {
       notify: (args: { type: string, message: string }) => mockToast(args),
     },
-    useToastContext: () => ({
-      notify: (args: { type: string, message: string }) => mockToast(args),
-      close: vi.fn(),
-    }),
   }
 })
 
+vi.mock('@/app/components/base/toast/context', () => ({
+  useToastContext: () => ({
+    notify: (args: { type: string, message: string }) => mockToast(args),
+    close: vi.fn(),
+  }),
+}))
+
 const createSubscription = (overrides: Partial<TriggerSubscription> = {}): TriggerSubscription => ({
   id: 'sub-1',
   name: 'Subscription One',

web/app/components/plugins/plugin-detail-panel/subscription-list/edit/__tests__/manual-edit-modal.spec.tsx

@@ -37,13 +37,16 @@ vi.mock('@/app/components/base/toast', async (importOriginal) => {
     default: {
       notify: (args: { type: string, message: string }) => mockToast(args),
     },
-    useToastContext: () => ({
-      notify: (args: { type: string, message: string }) => mockToast(args),
-      close: vi.fn(),
-    }),
   }
 })
 
+vi.mock('@/app/components/base/toast/context', () => ({
+  useToastContext: () => ({
+    notify: (args: { type: string, message: string }) => mockToast(args),
+    close: vi.fn(),
+  }),
+}))
+
 const createSubscription = (overrides: Partial<TriggerSubscription> = {}): TriggerSubscription => ({
   id: 'sub-1',
   name: 'Subscription One',

web/app/components/plugins/plugin-detail-panel/subscription-list/edit/__tests__/oauth-edit-modal.spec.tsx

@@ -37,13 +37,16 @@ vi.mock('@/app/components/base/toast', async (importOriginal) => {
     default: {
       notify: (args: { type: string, message: string }) => mockToast(args),
     },
-    useToastContext: () => ({
-      notify: (args: { type: string, message: string }) => mockToast(args),
-      close: vi.fn(),
-    }),
   }
 })
 
+vi.mock('@/app/components/base/toast/context', () => ({
+  useToastContext: () => ({
+    notify: (args: { type: string, message: string }) => mockToast(args),
+    close: vi.fn(),
+  }),
+}))
+
 const createSubscription = (overrides: Partial<TriggerSubscription> = {}): TriggerSubscription => ({
   id: 'sub-1',
   name: 'Subscription One',

web/app/components/plugins/plugin-detail-panel/tool-selector/components/__tests__/tool-credentials-form.spec.tsx

@@ -12,6 +12,9 @@ vi.mock('@/utils/classnames', () => ({
 
 vi.mock('@/app/components/base/toast', () => ({
   default: { notify: vi.fn() },
+}))
+
+vi.mock('@/app/components/base/toast/context', () => ({
   useToastContext: () => ({ notify: vi.fn() }),
 }))
 

web/app/components/plugins/plugin-page/__tests__/context.spec.tsx

@@ -3,7 +3,8 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 // Import mocks
 import { useGlobalPublicStore } from '@/context/global-public-context'
 
-import { PluginPageContext, PluginPageContextProvider, usePluginPageContext } from '../context'
+import { PluginPageContext, usePluginPageContext } from '../context'
+import { PluginPageContextProvider } from '../context-provider'
 
 // Mock dependencies
 vi.mock('nuqs', () => ({

web/app/components/plugins/plugin-page/context-provider.tsx

@@ -1,24 +1,20 @@
 'use client'
 
-import type { ReactNode, RefObject } from 'react'
+import type { ReactNode } from 'react'
+import type { PluginPageTab } from './context'
 import type { FilterState } from './filter-management'
-import { noop } from 'es-toolkit/function'
 import { parseAsStringEnum, useQueryState } from 'nuqs'
 import {
   useMemo,
   useRef,
   useState,
 } from 'react'
-import {
-  createContext,
-  useContextSelector,
-} from 'use-context-selector'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { PLUGIN_PAGE_TABS_MAP, usePluginPageTabs } from '../hooks'
 import { PLUGIN_TYPE_SEARCH_MAP } from '../marketplace/constants'
-
-export type PluginPageTab = typeof PLUGIN_PAGE_TABS_MAP[keyof typeof PLUGIN_PAGE_TABS_MAP]
-  | (typeof PLUGIN_TYPE_SEARCH_MAP)[keyof typeof PLUGIN_TYPE_SEARCH_MAP]
+import {
+  PluginPageContext,
+} from './context'
 
 const PLUGIN_PAGE_TAB_VALUES: PluginPageTab[] = [
   PLUGIN_PAGE_TABS_MAP.plugins,
@@ -29,42 +25,10 @@ const PLUGIN_PAGE_TAB_VALUES: PluginPageTab[] = [
 const parseAsPluginPageTab = parseAsStringEnum<PluginPageTab>(PLUGIN_PAGE_TAB_VALUES)
   .withDefault(PLUGIN_PAGE_TABS_MAP.plugins)
 
-export type PluginPageContextValue = {
-  containerRef: RefObject<HTMLDivElement | null>
-  currentPluginID: string | undefined
-  setCurrentPluginID: (pluginID?: string) => void
-  filters: FilterState
-  setFilters: (filter: FilterState) => void
-  activeTab: PluginPageTab
-  setActiveTab: (tab: PluginPageTab) => void
-  options: Array<{ value: string, text: string }>
-}
-
-const emptyContainerRef: RefObject<HTMLDivElement | null> = { current: null }
-
-export const PluginPageContext = createContext<PluginPageContextValue>({
-  containerRef: emptyContainerRef,
-  currentPluginID: undefined,
-  setCurrentPluginID: noop,
-  filters: {
-    categories: [],
-    tags: [],
-    searchQuery: '',
-  },
-  setFilters: noop,
-  activeTab: PLUGIN_PAGE_TABS_MAP.plugins,
-  setActiveTab: noop,
-  options: [],
-})
-
 type PluginPageContextProviderProps = {
   children: ReactNode
 }
 
-export function usePluginPageContext(selector: (value: PluginPageContextValue) => any) {
-  return useContextSelector(PluginPageContext, selector)
-}
-
 export const PluginPageContextProvider = ({
   children,
 }: PluginPageContextProviderProps) => {

web/app/components/plugins/plugin-page/context.ts

@@ -0,0 +1,46 @@
+'use client'
+
+import type { RefObject } from 'react'
+import type { PLUGIN_TYPE_SEARCH_MAP } from '../marketplace/constants'
+import type { FilterState } from './filter-management'
+import { noop } from 'es-toolkit/function'
+import {
+  createContext,
+  useContextSelector,
+} from 'use-context-selector'
+import { PLUGIN_PAGE_TABS_MAP } from '../hooks'
+
+export type PluginPageTab = typeof PLUGIN_PAGE_TABS_MAP[keyof typeof PLUGIN_PAGE_TABS_MAP]
+  | (typeof PLUGIN_TYPE_SEARCH_MAP)[keyof typeof PLUGIN_TYPE_SEARCH_MAP]
+
+export type PluginPageContextValue = {
+  containerRef: RefObject<HTMLDivElement | null>
+  currentPluginID: string | undefined
+  setCurrentPluginID: (pluginID?: string) => void
+  filters: FilterState
+  setFilters: (filter: FilterState) => void
+  activeTab: PluginPageTab
+  setActiveTab: (tab: PluginPageTab) => void
+  options: Array<{ value: string, text: string }>
+}
+
+const emptyContainerRef: RefObject<HTMLDivElement | null> = { current: null }
+
+export const PluginPageContext = createContext<PluginPageContextValue>({
+  containerRef: emptyContainerRef,
+  currentPluginID: undefined,
+  setCurrentPluginID: noop,
+  filters: {
+    categories: [],
+    tags: [],
+    searchQuery: '',
+  },
+  setFilters: noop,
+  activeTab: PLUGIN_PAGE_TABS_MAP.plugins,
+  setActiveTab: noop,
+  options: [],
+})
+
+export function usePluginPageContext(selector: (value: PluginPageContextValue) => any) {
+  return useContextSelector(PluginPageContext, selector)
+}

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

@@ -28,10 +28,8 @@ import { PLUGIN_PAGE_TABS_MAP } from '../hooks'
 import InstallFromLocalPackage from '../install-plugin/install-from-local-package'
 import InstallFromMarketplace from '../install-plugin/install-from-marketplace'
 import { PLUGIN_TYPE_SEARCH_MAP } from '../marketplace/constants'
-import {
-  PluginPageContextProvider,
-  usePluginPageContext,
-} from './context'
+import { usePluginPageContext } from './context'
+import { PluginPageContextProvider } from './context-provider'
 import DebugInfo from './debug-info'
 import InstallPluginDropdown from './install-plugin-dropdown'
 import PluginTasks from './plugin-tasks'