refactor(web): mark Props of plugins/ components as read-only (#25219) (#37303)

web/app/components/plugins/base/key-value-item.tsx

@@ -9,13 +9,13 @@ import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
 import { CopyCheck } from '../../base/icons/src/vender/line/files'
 
-type Props = {
+type Props = Readonly<{
   label: string
   labelWidthClassName?: string
   value: string
   maskedValue?: string
   valueMaxWidthClassName?: string
-}
+}>
 
 const KeyValueItem: FC<Props> = ({
   label,

web/app/components/plugins/card/base/description.tsx

@@ -3,11 +3,11 @@ import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useMemo } from 'react'
 
-type Props = {
+type Props = Readonly<{
   className?: string
   text: string
   descriptionLineRows: number
-}
+}>
 
 const Description: FC<Props> = ({
   className,

web/app/components/plugins/card/base/download-count.tsx

@@ -2,9 +2,9 @@ import { RiInstallLine } from '@remixicon/react'
 import * as React from 'react'
 import { formatNumber } from '@/utils/format'
 
-type Props = {
+type Props = Readonly<{
   downloadCount: number
-}
+}>
 
 const DownloadCountComponent = ({
   downloadCount,

web/app/components/plugins/card/base/org-info.tsx

@@ -1,11 +1,11 @@
 import { cn } from '@langgenius/dify-ui/cn'
 
-type Props = {
+type Props = Readonly<{
   className?: string
   orgName?: string
   packageName: string
   packageNameClassName?: string
-}
+}>
 
 const OrgInfo = ({
   className,

web/app/components/plugins/card/base/placeholder.tsx

@@ -3,10 +3,10 @@ import { SkeletonContainer, SkeletonPoint, SkeletonRectangle, SkeletonRow } from
 import { Group } from '../../../base/icons/src/vender/other'
 import Title from './title'
 
-type Props = {
+type Props = Readonly<{
   wrapClassName: string
   loadingFileName?: string
-}
+}>
 
 export const LoadingPlaceholder = ({ className }: { className?: string }) => (
   <div className={cn('h-2 rounded-xs bg-text-quaternary opacity-20', className)} />

web/app/components/plugins/card/card-more-info.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react'
 import DownloadCount from './base/download-count'
 
-type Props = {
+type Props = Readonly<{
   downloadCount?: number
   tags: string[]
-}
+}>
 
 const CardMoreInfoComponent = ({
   downloadCount,

web/app/components/plugins/card/index.tsx

@@ -22,7 +22,7 @@ import OrgInfo from './base/org-info'
 import Placeholder from './base/placeholder'
 import Title from './base/title'
 
-type Props = {
+type Props = Readonly<{
   className?: string
   payload: Plugin
   titleLeft?: React.ReactNode
@@ -34,7 +34,7 @@ type Props = {
   isLoading?: boolean
   loadingFileName?: string
   limitedInstall?: boolean
-}
+}>
 
 const Card = ({
   className,

web/app/components/plugins/install-plugin/base/installed.tsx

@@ -8,13 +8,13 @@ import Badge, { BadgeState } from '@/app/components/base/badge/index'
 import Card from '../../card'
 import { pluginManifestInMarketToPluginProps, pluginManifestToCardPluginProps } from '../utils'
 
-type Props = {
+type Props = Readonly<{
   payload?: Plugin | PluginDeclaration | PluginManifestInMarket | null
   isMarketPayload?: boolean
   isFailed: boolean
   errMsg?: string | null
   onCancel: () => void
-}
+}>
 
 const Installed: FC<Props> = ({
   payload,

web/app/components/plugins/install-plugin/hooks/use-check-installed.tsx

@@ -3,10 +3,10 @@ import type { VersionInfo } from '../../types'
 import { useMemo } from 'react'
 import { useCheckInstalled as useDoCheckInstalled } from '@/service/use-plugins'
 
-type Props = {
+type Props = Readonly<{
   pluginIds: string[]
   enabled: boolean
-}
+}>
 const useCheckInstalled = (props: Props) => {
   const { data, isLoading, error } = useDoCheckInstalled(props)
 

web/app/components/plugins/install-plugin/install-bundle/index.tsx

@@ -18,12 +18,12 @@ export enum InstallType {
   fromDSL = 'fromDSL',
 }
 
-type Props = {
+type Props = Readonly<{
   installType?: InstallType
   fromDSLPayload: Dependency[]
   // plugins?: PluginDeclaration[]
   onClose: () => void
-}
+}>
 
 const InstallBundle: FC<Props> = ({
   installType = InstallType.fromMarketplace,

web/app/components/plugins/install-plugin/install-bundle/item/github-item.tsx

@@ -9,14 +9,14 @@ import Loading from '../../base/loading'
 import { pluginManifestToCardPluginProps } from '../../utils'
 import LoadedItem from './loaded-item'
 
-type Props = {
+type Props = Readonly<{
   checked: boolean
   onCheckedChange: (plugin: Plugin) => void
   dependency: GitHubItemAndMarketPlaceDependency
   versionInfo: VersionProps
   onFetchedPayload: (payload: Plugin) => void
   onFetchError: () => void
-}
+}>
 
 const Item: FC<Props> = ({
   checked,

web/app/components/plugins/install-plugin/install-bundle/item/loaded-item.tsx

@@ -9,13 +9,13 @@ import useGetIcon from '../../base/use-get-icon'
 import Version from '../../base/version'
 import usePluginInstallLimit from '../../hooks/use-install-plugin-limit'
 
-type Props = {
+type Props = Readonly<{
   checked: boolean
   onCheckedChange: (plugin: Plugin) => void
   payload: Plugin
   isFromMarketPlace?: boolean
   versionInfo: VersionProps
-}
+}>
 
 const LoadedItem: FC<Props> = ({
   checked,

web/app/components/plugins/install-plugin/install-bundle/item/marketplace-item.tsx

@@ -6,13 +6,13 @@ import * as React from 'react'
 import Loading from '../../base/loading'
 import LoadedItem from './loaded-item'
 
-type Props = {
+type Props = Readonly<{
   checked: boolean
   onCheckedChange: (plugin: Plugin) => void
   payload?: Plugin
   version: string
   versionInfo: VersionProps
-}
+}>
 
 const MarketPlaceItem: FC<Props> = ({
   checked,

web/app/components/plugins/install-plugin/install-bundle/item/package-item.tsx

@@ -7,13 +7,13 @@ import LoadingError from '../../base/loading-error'
 import { pluginManifestToCardPluginProps } from '../../utils'
 import LoadedItem from './loaded-item'
 
-type Props = {
+type Props = Readonly<{
   checked: boolean
   onCheckedChange: (plugin: Plugin) => void
   payload: PackageDependency
   isFromMarketPlace?: boolean
   versionInfo: VersionProps
-}
+}>
 
 const PackageItem: FC<Props> = ({
   payload,

web/app/components/plugins/install-plugin/install-bundle/ready-to-install.tsx

@@ -7,7 +7,7 @@ import { InstallStep } from '../../types'
 import Install from './steps/install'
 import Installed from './steps/installed'
 
-type Props = {
+type Props = Readonly<{
   step: InstallStep
   onStepChange: (step: InstallStep) => void
   onStartToInstall: () => void
@@ -15,7 +15,7 @@ type Props = {
   allPlugins: Dependency[]
   onClose: () => void
   isFromMarketPlace?: boolean
-}
+}>
 
 const ReadyToInstall: FC<Props> = ({
   step,

web/app/components/plugins/install-plugin/install-bundle/steps/install-multi.tsx

@@ -8,7 +8,7 @@ import MarketplaceItem from '../item/marketplace-item'
 import PackageItem from '../item/package-item'
 import { getPluginKey, useInstallMultiState } from './hooks/use-install-multi-state'
 
-type Props = {
+type Props = Readonly<{
   allPlugins: Dependency[]
   selectedPlugins: Plugin[]
   onSelect: (plugin: Plugin, selectedIndex: number, allCanInstallPluginsLength: number) => void
@@ -17,7 +17,7 @@ type Props = {
   onLoadedAllPlugin: (installedInfo: Record<string, VersionInfo>) => void
   isFromMarketPlace?: boolean
   ref?: React.Ref<ExposeRefs>
-}
+}>
 
 export type ExposeRefs = {
   selectAllPlugins: () => void

web/app/components/plugins/install-plugin/install-bundle/steps/install.tsx

@@ -22,14 +22,14 @@ import InstallMulti from './install-multi'
 
 const i18nPrefix = 'installModal'
 
-type Props = {
+type Props = Readonly<{
   allPlugins: Dependency[]
   onStartToInstall?: () => void
   onInstalled: (plugins: Plugin[], installStatus: InstallStatus[]) => void
   onCancel: () => void
   isFromMarketPlace?: boolean
   isHideButton?: boolean
-}
+}>
 
 const Install: FC<Props> = ({
   allPlugins,

web/app/components/plugins/install-plugin/install-bundle/steps/installed.tsx

@@ -9,12 +9,12 @@ import Card from '@/app/components/plugins/card'
 import { MARKETPLACE_API_PREFIX } from '@/config'
 import useGetIcon from '../../base/use-get-icon'
 
-type Props = {
+type Props = Readonly<{
   list: Plugin[]
   installStatus: InstallStatus[]
   onCancel: () => void
   isHideButton?: boolean
-}
+}>
 
 const Installed: FC<Props> = ({
   list,

web/app/components/plugins/install-plugin/install-from-local-package/ready-to-install.tsx

@@ -8,7 +8,7 @@ import Installed from '../base/installed'
 import useRefreshPluginList from '../hooks/use-refresh-plugin-list'
 import Install from './steps/install'
 
-type Props = {
+type Props = Readonly<{
   step: InstallStep
   onStepChange: (step: InstallStep) => void
   onStartToInstall: () => void
@@ -18,7 +18,7 @@ type Props = {
   manifest: PluginDeclaration | null
   errorMsg: string | null
   onError: (errorMsg: string) => void
-}
+}>
 
 const ReadyToInstall: FC<Props> = ({
   step,

web/app/components/plugins/install-plugin/install-from-local-package/steps/install.tsx

@@ -19,14 +19,14 @@ import { pluginManifestToCardPluginProps } from '../../utils'
 
 const i18nPrefix = 'installModal'
 
-type Props = {
+type Props = Readonly<{
   uniqueIdentifier: string
   payload: PluginDeclaration
   onCancel: () => void
   onStartToInstall?: () => void
   onInstalled: (notRefresh?: boolean) => void
   onFailed: (message?: string) => void
-}
+}>
 
 const Installed: FC<Props> = ({
   uniqueIdentifier,

web/app/components/plugins/install-plugin/install-from-local-package/steps/uploading.tsx

@@ -43,7 +43,7 @@ function getUploadFailureMessage(response: unknown): string | undefined {
   return (response as UploadFailureResponse).message
 }
 
-type Props = {
+type Props = Readonly<{
   isBundle: boolean
   file: File
   onCancel: () => void
@@ -53,7 +53,7 @@ type Props = {
   }) => void
   onBundleUploaded: (result: Dependency[]) => void
   onFailed: (errorMsg: string) => void
-}
+}>
 
 const Uploading: FC<Props> = ({
   isBundle,

web/app/components/plugins/install-plugin/install-from-marketplace/steps/install.tsx

@@ -20,14 +20,14 @@ import { pluginManifestInMarketToPluginProps } from '../../utils'
 
 const i18nPrefix = 'installModal'
 
-type Props = {
+type Props = Readonly<{
   uniqueIdentifier: string
   payload: PluginManifestInMarket | Plugin
   onCancel: () => void
   onStartToInstall?: () => void
   onInstalled: (notRefresh?: boolean) => void
   onFailed: (message?: string) => void
-}
+}>
 
 const Installed: FC<Props> = ({
   uniqueIdentifier,

web/app/components/plugins/marketplace/empty/index.tsx

@@ -4,11 +4,11 @@ import { useTranslation } from '#i18n'
 import { Group } from '@/app/components/base/icons/src/vender/other'
 import Line from './line'
 
-type Props = {
+type Props = Readonly<{
   text?: string
   lightCard?: boolean
   className?: string
-}
+}>
 
 const Empty = ({
   text,

web/app/components/plugins/plugin-detail-panel/action-list.tsx

@@ -8,9 +8,9 @@ import {
   useBuiltinTools,
 } from '@/service/use-tools'
 
-type Props = {
+type Props = Readonly<{
   detail: PluginDetail
-}
+}>
 
 const ActionList = ({
   detail,

web/app/components/plugins/plugin-detail-panel/agent-strategy-list.tsx

@@ -7,9 +7,9 @@ import {
   useStrategyProviderDetail,
 } from '@/service/use-strategy'
 
-type Props = {
+type Props = Readonly<{
   detail: PluginDetail
-}
+}>
 
 const AgentStrategyList = ({
   detail,

web/app/components/plugins/plugin-detail-panel/app-selector/app-inputs-form.tsx

@@ -6,12 +6,12 @@ import { FileUploaderInAttachmentWrapper } from '@/app/components/base/file-uplo
 import Input from '@/app/components/base/input'
 import { InputVarType } from '@/app/components/workflow/types'
 
-type Props = {
+type Props = Readonly<{
   inputsForms: any[]
   inputs: Record<string, any>
   inputsRef: any
   onFormChange: (value: Record<string, any>) => void
-}
+}>
 const AppInputsForm = ({
   inputsForms,
   inputs,

web/app/components/plugins/plugin-detail-panel/app-selector/app-inputs-panel.tsx

@@ -7,14 +7,14 @@ import Loading from '@/app/components/base/loading'
 import AppInputsForm from '@/app/components/plugins/plugin-detail-panel/app-selector/app-inputs-form'
 import { useAppInputsFormSchema } from '@/app/components/plugins/plugin-detail-panel/app-selector/hooks/use-app-inputs-form-schema'
 
-type Props = {
+type Props = Readonly<{
   value?: {
     app_id: string
     inputs: Record<string, unknown>
   }
   appDetail: App
   onFormChange: (value: Record<string, unknown>) => void
-}
+}>
 
 const AppInputsPanel = ({
   value,

web/app/components/plugins/plugin-detail-panel/datasource-action-list.tsx

@@ -10,9 +10,9 @@ import { useTranslation } from 'react-i18next'
 import { transformDataSourceToTool } from '@/app/components/workflow/block-selector/utils'
 import { useDataSourceList } from '@/service/use-pipeline'
 
-type Props = {
+type Props = Readonly<{
   detail: PluginDetail
-}
+}>
 
 const ActionList = ({
   detail,

web/app/components/plugins/plugin-detail-panel/detail-header/index.tsx

@@ -31,12 +31,12 @@ import { PluginCategoryEnum, PluginSource } from '../../types'
 import { HeaderModals, PluginSourceBadge } from './components'
 import { useDetailHeaderState, usePluginOperations } from './hooks'
 
-type Props = {
+type Props = Readonly<{
   detail: PluginDetail
   isReadmeView?: boolean
   onHide?: () => void
   onUpdate?: (isDelete?: boolean) => void
-}
+}>
 
 const getIconSrc = (icon: string | undefined, iconDark: string | undefined, theme: string, tenantId: string): string => {
   const iconFileName = theme === 'dark' && iconDark ? iconDark : icon

web/app/components/plugins/plugin-detail-panel/endpoint-card.tsx

@@ -31,11 +31,11 @@ import { NAME_FIELD } from './utils'
 
 type EndpointModalFormSchemas = ComponentProps<typeof EndpointModal>['formSchemas']
 
-type Props = {
+type Props = Readonly<{
   pluginDetail: PluginDetail
   data: EndpointListItem
   handleChange: () => void
-}
+}>
 
 const EndpointCard = ({
   pluginDetail,

web/app/components/plugins/plugin-detail-panel/endpoint-list.tsx

@@ -19,9 +19,9 @@ import EndpointCard from './endpoint-card'
 import EndpointModal from './endpoint-modal'
 import { NAME_FIELD } from './utils'
 
-type Props = {
+type Props = Readonly<{
   detail: PluginDetail
-}
+}>
 const EndpointList = ({ detail }: Props) => {
   const { t } = useTranslation()
   const docLink = useDocLink()

web/app/components/plugins/plugin-detail-panel/endpoint-modal.tsx

@@ -21,13 +21,13 @@ import Form from '@/app/components/header/account-setting/model-provider-page/mo
 import { useRenderI18nObject } from '@/hooks/use-i18n'
 import { ReadmeEntrance } from '../readme-panel/entrance'
 
-type Props = {
+type Props = Readonly<{
   formSchemas: FormSchema[]
   defaultValues?: any
   onCancel: () => void
   onSaved: (value: Record<string, any>) => void
   pluginDetail: PluginDetail
-}
+}>
 
 const extractDefaultValues = (schemas: any[]) => {
   const result: Record<string, any> = {}

web/app/components/plugins/plugin-detail-panel/index.tsx

@@ -23,11 +23,11 @@ import { usePluginStore } from './store'
 import { SubscriptionList } from './subscription-list'
 import { TriggerEventsList } from './trigger/event-list'
 
-type Props = {
+type Props = Readonly<{
   detail?: PluginDetail
   onUpdate: () => void
   onHide: () => void
-}
+}>
 
 const PluginDetailPanel: FC<Props> = ({
   detail,

web/app/components/plugins/plugin-detail-panel/model-list.tsx

@@ -5,9 +5,9 @@ import ModelIcon from '@/app/components/header/account-setting/model-provider-pa
 import ModelName from '@/app/components/header/account-setting/model-provider-page/model-name'
 import { useModelProviderModelList } from '@/service/use-models'
 
-type Props = {
+type Props = Readonly<{
   detail: PluginDetail
-}
+}>
 
 const ModelList = ({
   detail,

web/app/components/plugins/plugin-detail-panel/model-selector/llm-params-panel.tsx

@@ -14,13 +14,13 @@ import { getSupportedPresetConfig } from '@/app/components/header/account-settin
 import { PROVIDER_WITH_PRESET_TONE, STOP_PARAMETER_RULE } from '@/config'
 import { useModelParameterRules } from '@/service/use-common'
 
-type Props = {
+type Props = Readonly<{
   isAdvancedMode: boolean
   provider: string
   modelId: string
   completionParams: FormValue
   onCompletionParamsChange: (newParams: FormValue) => void
-}
+}>
 
 const LLMParamsPanel = ({
   isAdvancedMode,

web/app/components/plugins/plugin-detail-panel/model-selector/tts-params-panel.tsx

@@ -4,12 +4,12 @@ import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { languages } from '@/i18n-config/language'
 
-type Props = {
+type Props = Readonly<{
   currentModel: any
   language: string
   voice: string
   onChange: (language: string, voice: string) => void
-}
+}>
 
 const supportedLanguages = languages.filter(item => item.supported)
 

web/app/components/plugins/plugin-detail-panel/multiple-tool-selector/index.tsx

@@ -15,7 +15,7 @@ import ToolSelector from '@/app/components/plugins/plugin-detail-panel/tool-sele
 import { useMCPToolAvailability } from '@/app/components/workflow/nodes/_base/components/mcp-tool-availability'
 import { useAllMCPTools } from '@/service/use-tools'
 
-type Props = {
+type Props = Readonly<{
   disabled?: boolean
   value: ToolValue[]
   label: string
@@ -27,7 +27,7 @@ type Props = {
   nodeOutputVars: NodeOutPutVar[]
   availableNodes: Node[]
   nodeId?: string
-}
+}>
 
 const MultipleToolSelector = ({
   disabled,

web/app/components/plugins/plugin-detail-panel/operation-dropdown.tsx

@@ -15,7 +15,7 @@ import { useTranslation } from 'react-i18next'
 import { systemFeaturesQueryOptions } from '@/features/system-features/client'
 import { PluginSource } from '../types'
 
-type Props = {
+type Props = Readonly<{
   source: PluginSource
   onInfo: () => void
   onCheckVersion: () => void
@@ -25,7 +25,7 @@ type Props = {
   sideOffset?: number
   alignOffset?: number
   popupClassName?: string
-}
+}>
 
 const OperationDropdown: FC<Props> = ({
   source,

web/app/components/plugins/plugin-detail-panel/strategy-detail.tsx

@@ -27,7 +27,7 @@ import Description from '@/app/components/plugins/card/base/description'
 import { API_PREFIX } from '@/config'
 import { useRenderI18nObject } from '@/hooks/use-i18n'
 
-type Props = {
+type Props = Readonly<{
   provider: {
     author: string
     name: string
@@ -39,7 +39,7 @@ type Props = {
   }
   detail: StrategyDetailType
   onHide: () => void
-}
+}>
 
 const StrategyDetail: FC<Props> = ({
   provider,

web/app/components/plugins/plugin-detail-panel/strategy-item.tsx

@@ -9,7 +9,7 @@ import { useState } from 'react'
 import { useRenderI18nObject } from '@/hooks/use-i18n'
 import StrategyDetailPanel from './strategy-detail'
 
-type Props = {
+type Props = Readonly<{
   provider: {
     author: string
     name: string
@@ -20,7 +20,7 @@ type Props = {
     tags: string[]
   }
   detail: StrategyDetail
-}
+}>
 
 const StrategyItem = ({
   provider,

web/app/components/plugins/plugin-detail-panel/subscription-list/create/common-modal.tsx

@@ -22,12 +22,12 @@ import {
   useCommonModalState,
 } from './hooks/use-common-modal-state'
 
-type Props = {
+type Props = Readonly<{
   open?: boolean
   onClose: () => void
   createType: SupportedCreationMethods
   builder?: TriggerSubscriptionBuilder
-}
+}>
 
 export const CommonCreateModal = ({ open = true, onClose, createType, builder }: Props) => {
   return (

web/app/components/plugins/plugin-detail-panel/subscription-list/create/index.tsx

@@ -19,11 +19,11 @@ import { CommonCreateModal } from './common-modal'
 import { OAuthClientSettingsModal } from './oauth-client'
 import { CreateButtonType, DEFAULT_METHOD } from './types'
 
-type Props = {
+type Props = Readonly<{
   className?: string
   buttonType?: CreateButtonType
   shape?: 'square' | 'circle'
-}
+}>
 
 const MAX_COUNT = 10
 

web/app/components/plugins/plugin-detail-panel/subscription-list/create/oauth-client.tsx

@@ -10,12 +10,12 @@ import OptionCard from '@/app/components/workflow/nodes/_base/components/option-
 import { usePluginStore } from '../../store'
 import { ClientTypeEnum, useOAuthClientState as useOAuthClientSettings } from './hooks/use-oauth-client-state'
 
-type Props = {
+type Props = Readonly<{
   open: boolean
   oauthConfig?: TriggerOAuthConfig
   onOpenChange: (open: boolean) => void
   showOAuthCreateModal: (builder: TriggerSubscriptionBuilder) => void
-}
+}>
 
 const CLIENT_TYPE_OPTIONS = [ClientTypeEnum.Default, ClientTypeEnum.Custom] as const
 

web/app/components/plugins/plugin-detail-panel/subscription-list/delete-confirm.tsx

@@ -14,13 +14,13 @@ import Input from '@/app/components/base/input'
 import { useDeleteTriggerSubscription } from '@/service/use-triggers'
 import { useSubscriptionList } from './use-subscription-list'
 
-type Props = {
+type Props = Readonly<{
   onClose: (deleted: boolean) => void
   isShow: boolean
   currentId: string
   currentName: string
   workflowsInUse: number
-}
+}>
 
 const tPrefix = 'subscription.list.item.actions.deleteConfirm'
 

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

@@ -17,11 +17,11 @@ import { parsePluginErrorMessage } from '@/utils/error-parser'
 import { usePluginStore } from '../../store'
 import { useSubscriptionList } from '../use-subscription-list'
 
-type Props = {
+type Props = Readonly<{
   onClose: () => void
   subscription: TriggerSubscription
   pluginDetail?: PluginDetail
-}
+}>
 
 const EditStep = {
   EditCredentials: 'edit_credentials',

web/app/components/plugins/plugin-detail-panel/subscription-list/edit/index.tsx

@@ -6,11 +6,11 @@ import { ApiKeyEditModal } from './apikey-edit-modal'
 import { ManualEditModal } from './manual-edit-modal'
 import { OAuthEditModal } from './oauth-edit-modal'
 
-type Props = {
+type Props = Readonly<{
   onClose: () => void
   subscription: TriggerSubscription
   pluginDetail?: PluginDetail
-}
+}>
 
 export const EditModal = ({ onClose, subscription, pluginDetail }: Props) => {
   const credentialType = subscription.credential_type

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

@@ -15,11 +15,11 @@ import { useUpdateTriggerSubscription } from '@/service/use-triggers'
 import { usePluginStore } from '../../store'
 import { useSubscriptionList } from '../use-subscription-list'
 
-type Props = {
+type Props = Readonly<{
   onClose: () => void
   subscription: TriggerSubscription
   pluginDetail?: PluginDetail
-}
+}>
 
 const normalizeFormType = (type: string): FormTypeEnum => {
   switch (type) {

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

@@ -15,11 +15,11 @@ import { useUpdateTriggerSubscription } from '@/service/use-triggers'
 import { usePluginStore } from '../../store'
 import { useSubscriptionList } from '../use-subscription-list'
 
-type Props = {
+type Props = Readonly<{
   onClose: () => void
   subscription: TriggerSubscription
   pluginDetail?: PluginDetail
-}
+}>
 
 const normalizeFormType = (type: string): FormTypeEnum => {
   switch (type) {

web/app/components/plugins/plugin-detail-panel/subscription-list/log-viewer.tsx

@@ -16,10 +16,10 @@ import { useTranslation } from 'react-i18next'
 import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
 import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
 
-type Props = {
+type Props = Readonly<{
   logs: TriggerLogEntity[]
   className?: string
-}
+}>
 
 enum LogTypeEnum {
   REQUEST = 'request',

web/app/components/plugins/plugin-detail-panel/subscription-list/subscription-card.tsx

@@ -14,10 +14,10 @@ import ActionButton from '@/app/components/base/action-button'
 import { DeleteConfirm } from './delete-confirm'
 import { EditModal } from './edit'
 
-type Props = {
+type Props = Readonly<{
   data: TriggerSubscription
   pluginDetail?: PluginDetail
-}
+}>
 
 const SubscriptionCard = ({ data, pluginDetail }: Props) => {
   const { t } = useTranslation()

web/app/components/plugins/plugin-detail-panel/tool-selector/components/reasoning-config-form.tsx

@@ -45,14 +45,14 @@ import SchemaModal from './schema-modal'
 
 export type ReasoningConfigValue = ReasoningConfigValueShape
 
-type Props = {
+type Props = Readonly<{
   value: ReasoningConfigValue
   onChange: (val: ReasoningConfigValue) => void
   schemas: ToolFormSchema[]
   nodeOutputVars: NodeOutPutVar[]
   availableNodes: Node[]
   nodeId: string
-}
+}>
 
 const ReasoningConfigForm: React.FC<Props> = ({
   value,

web/app/components/plugins/plugin-detail-panel/tool-selector/components/schema-modal.tsx

@@ -11,12 +11,12 @@ import { useTranslation } from 'react-i18next'
 import VisualEditor from '@/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor'
 import { MittProvider, VisualEditorContextProvider } from '@/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/context'
 
-type Props = {
+type Props = Readonly<{
   isShow: boolean
   schema: SchemaRoot
   rootName: string
   onClose: () => void
-}
+}>
 
 const SchemaModal: FC<Props> = ({
   isShow,

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

@@ -17,11 +17,11 @@ import { addDefaultValue, toolCredentialToFormSchemas } from '@/app/components/t
 import { useRenderI18nObject } from '@/hooks/use-i18n'
 import { fetchBuiltInToolCredential, fetchBuiltInToolCredentialSchema } from '@/service/tools'
 
-type Props = {
+type Props = Readonly<{
   collection: Collection
   onCancel: () => void
   onSaved: (value: Record<string, unknown>) => void
-}
+}>
 
 const ToolCredentialForm: FC<Props> = ({
   collection,

web/app/components/plugins/plugin-detail-panel/tool-selector/components/tool-item.tsx

@@ -20,7 +20,7 @@ import { useMCPToolAvailability } from '@/app/components/workflow/nodes/_base/co
 import McpToolNotSupportTooltip from '@/app/components/workflow/nodes/_base/components/mcp-tool-not-support-tooltip'
 import { SwitchPluginVersion } from '@/app/components/workflow/nodes/_base/components/switch-plugin-version'
 
-type Props = {
+type Props = Readonly<{
   icon?: string | { content?: string, background?: string }
   providerName?: string
   isMCPTool?: boolean
@@ -39,7 +39,7 @@ type Props = {
   versionMismatch?: boolean
   open: boolean
   authRemoved?: boolean
-}
+}>
 
 const ToolItem = ({
   open,

web/app/components/plugins/plugin-detail-panel/tool-selector/components/tool-trigger.tsx

@@ -10,7 +10,7 @@ import { useTranslation } from 'react-i18next'
 import BlockIcon from '@/app/components/workflow/block-icon'
 import { BlockEnum } from '@/app/components/workflow/types'
 
-type Props = {
+type Props = Readonly<{
   open: boolean
   provider?: ToolWithProvider
   value?: {
@@ -18,7 +18,7 @@ type Props = {
     tool_name: string
   }
   isConfigure?: boolean
-}
+}>
 
 const ToolTrigger = ({
   open,

web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx

@@ -24,7 +24,7 @@ import {
 } from './components'
 import { useToolSelectorState } from './hooks/use-tool-selector-state'
 
-type Props = {
+type Props = Readonly<{
   disabled?: boolean
   placement?: Placement
   offset?: OffsetOptions
@@ -45,7 +45,7 @@ type Props = {
   nodeOutputVars: NodeOutPutVar[]
   availableNodes: Node[]
   nodeId?: string
-}
+}>
 
 const ToolSelector: FC<Props> = ({
   value,

web/app/components/plugins/plugin-item/action.tsx

@@ -26,7 +26,7 @@ import { PluginSource } from '../types'
 
 const i18nPrefix = 'action'
 
-type Props = {
+type Props = Readonly<{
   author: string
   installationId: string
   pluginUniqueIdentifier: string
@@ -38,7 +38,7 @@ type Props = {
   isShowDelete: boolean
   onDelete: () => void
   meta?: MetaData
-}
+}>
 const Action: FC<Props> = ({
   author,
   installationId,

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

@@ -34,10 +34,10 @@ import { usePluginPageContext } from '../plugin-page/context'
 import { PluginCategoryEnum, PluginSource } from '../types'
 import Action from './action'
 
-type Props = {
+type Props = Readonly<{
   className?: string
   plugin: PluginDetail
-}
+}>
 
 const PluginItem: FC<Props> = ({
   className,

web/app/components/plugins/plugin-mutation-model/index.tsx

@@ -7,7 +7,7 @@ import * as React from 'react'
 import { memo } from 'react'
 import Card from '@/app/components/plugins/card'
 
-type Props = {
+type Props = Readonly<{
   plugin: Plugin
   onCancel: () => void
   mutation: Pick<UseMutationResult, 'isSuccess' | 'isPending'>
@@ -18,7 +18,7 @@ type Props = {
   description: ReactNode
   cardTitleLeft: ReactNode
   modalBottomLeft?: ReactNode
-}
+}>
 
 const PluginMutationModal: FC<Props> = ({
   plugin,

web/app/components/plugins/plugin-page/install-plugin-dropdown.tsx

@@ -20,9 +20,9 @@ import InstallFromLocalPackage from '@/app/components/plugins/install-plugin/ins
 import { SUPPORT_INSTALL_LOCAL_FILE_EXTENSIONS } from '@/config'
 import { systemFeaturesQueryOptions } from '@/features/system-features/client'
 
-type Props = {
+type Props = Readonly<{
   onSwitchToMarketplaceTab: () => void
-}
+}>
 
 type InstallMethod = {
   icon: React.FC<{ className?: string }>

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

@@ -7,12 +7,12 @@ import KeyValueItem from '../base/key-value-item'
 import { convertRepoToUrl } from '../install-plugin/utils'
 
 const i18nPrefix = 'pluginInfoModal'
-type Props = {
+type Props = Readonly<{
   repository?: string
   release?: string
   packageName?: string
   onHide: () => void
-}
+}>
 
 const PlugInfo: FC<Props> = ({
   repository,

web/app/components/plugins/provider-card.tsx

@@ -19,10 +19,10 @@ import Description from './card/base/description'
 import DownloadCount from './card/base/download-count'
 import Title from './card/base/title'
 
-type Props = {
+type Props = Readonly<{
   className?: string
   payload: Plugin
-}
+}>
 
 const ProviderCardComponent: FC<Props> = ({
   className,

web/app/components/plugins/reference-setting-modal/auto-update-setting/index.tsx

@@ -22,10 +22,10 @@ import { convertLocalSecondsToUTCDaySeconds, convertUTCDaySecondsToLocalSeconds,
 
 const i18nPrefix = 'autoUpdate'
 
-type Props = {
+type Props = Readonly<{
   payload: AutoUpdateConfig
   onChange: (payload: AutoUpdateConfig) => void
-}
+}>
 
 const SettingTimeZone: FC<{
   children?: React.ReactNode

web/app/components/plugins/reference-setting-modal/auto-update-setting/no-data-placeholder.tsx

@@ -6,10 +6,10 @@ import { useTranslation } from 'react-i18next'
 import { SearchMenu } from '@/app/components/base/icons/src/vender/line/general'
 import { Group } from '@/app/components/base/icons/src/vender/other'
 
-type Props = {
+type Props = Readonly<{
   className: string
   noPlugins?: boolean
-}
+}>
 
 const NoDataPlaceholder: FC<Props> = ({
   className,

web/app/components/plugins/reference-setting-modal/auto-update-setting/no-plugin-selected.tsx

@@ -4,9 +4,9 @@ import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { AUTO_UPDATE_MODE } from './types'
 
-type Props = {
+type Props = Readonly<{
   updateMode: AUTO_UPDATE_MODE
-}
+}>
 
 const NoPluginSelected: FC<Props> = ({
   updateMode,

web/app/components/plugins/reference-setting-modal/auto-update-setting/plugins-picker.tsx

@@ -12,11 +12,11 @@ import { AUTO_UPDATE_MODE } from './types'
 
 const i18nPrefix = 'autoUpdate'
 
-type Props = {
+type Props = Readonly<{
   updateMode: AUTO_UPDATE_MODE
   value: string[] // plugin ids
   onChange: (value: string[]) => void
-}
+}>
 
 const PluginsPicker: FC<Props> = ({
   updateMode,

web/app/components/plugins/reference-setting-modal/auto-update-setting/plugins-selected.tsx

@@ -6,10 +6,10 @@ import Icon from '@/app/components/plugins/card/base/card-icon'
 import { MARKETPLACE_API_PREFIX } from '@/config'
 
 const MAX_DISPLAY_COUNT = 14
-type Props = {
+type Props = Readonly<{
   className?: string
   plugins: string[]
-}
+}>
 
 const PluginsSelected: FC<Props> = ({
   className,

web/app/components/plugins/reference-setting-modal/auto-update-setting/strategy-picker.tsx

@@ -13,10 +13,10 @@ import { AUTO_UPDATE_STRATEGY } from './types'
 
 const i18nPrefix = 'autoUpdate.strategy'
 
-type Props = {
+type Props = Readonly<{
   value: AUTO_UPDATE_STRATEGY
   onChange: (value: AUTO_UPDATE_STRATEGY) => void
-}
+}>
 const StrategyPicker = ({
   value,
   onChange,

web/app/components/plugins/reference-setting-modal/auto-update-setting/tool-item.tsx

@@ -8,11 +8,11 @@ import { MARKETPLACE_API_PREFIX } from '@/config'
 import { useGetLanguage } from '@/context/i18n'
 import { renderI18nObject } from '@/i18n-config'
 
-type Props = {
+type Props = Readonly<{
   payload: PluginDetail
   isChecked?: boolean
   onCheckChange: () => void
-}
+}>
 
 const ToolItem: FC<Props> = ({
   payload,

web/app/components/plugins/reference-setting-modal/auto-update-setting/tool-picker.tsx

@@ -18,13 +18,13 @@ import { PluginSource } from '../../types'
 import NoDataPlaceholder from './no-data-placeholder'
 import ToolItem from './tool-item'
 
-type Props = {
+type Props = Readonly<{
   trigger: React.ReactNode
   value: string[]
   onChange: (value: string[]) => void
   isShow: boolean
   onShowChange: (isShow: boolean) => void
-}
+}>
 
 const ToolPicker: FC<Props> = ({
   trigger,

web/app/components/plugins/reference-setting-modal/index.tsx

@@ -16,11 +16,11 @@ import { defaultValue as autoUpdateDefaultValue } from './auto-update-setting/co
 import Label from './label'
 
 const i18nPrefix = 'privilege'
-type Props = {
+type Props = Readonly<{
   payload: ReferenceSetting
   onHide: () => void
   onSave: (payload: ReferenceSetting) => void
-}
+}>
 
 const PluginSettingModal: FC<Props> = ({
   payload,

web/app/components/plugins/reference-setting-modal/label.tsx

@@ -3,10 +3,10 @@ import type { FC } from 'react'
 import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 
-type Props = {
+type Props = Readonly<{
   label: string
   description?: string
-}
+}>
 
 const Label: FC<Props> = ({
   label,

web/app/components/plugins/update-plugin/downgrade-warning.tsx

@@ -3,11 +3,11 @@ import { useTranslation } from 'react-i18next'
 
 const i18nPrefix = 'autoUpdate.pluginDowngradeWarning'
 
-type Props = {
+type Props = Readonly<{
   onCancel: () => void
   onJustDowngrade: () => void
   onExcludeAndDowngrade: () => void
-}
+}>
 const DowngradeWarningModal = ({
   onCancel,
   onJustDowngrade,

web/app/components/plugins/update-plugin/from-github.tsx

@@ -4,11 +4,11 @@ import type { UpdateFromGitHubPayload } from '../types'
 import * as React from 'react'
 import InstallFromGitHub from '../install-plugin/install-from-github'
 
-type Props = {
+type Props = Readonly<{
   payload: UpdateFromGitHubPayload
   onSave: () => void
   onCancel: () => void
-}
+}>
 
 const FromGitHub: FC<Props> = ({
   payload,

web/app/components/plugins/update-plugin/from-market-place.tsx

@@ -25,13 +25,13 @@ import DowngradeWarningModal from './downgrade-warning'
 
 const i18nPrefix = 'upgrade'
 
-type Props = {
+type Props = Readonly<{
   payload: UpdateFromMarketPlacePayload
   pluginId?: string
   onSave: () => void
   onCancel: () => void
   isShowDowngradeWarningModal?: boolean
-}
+}>
 
 type FailedUpgradeResponse = {
   task?: {

web/app/components/plugins/update-plugin/plugin-version-picker.tsx

@@ -15,7 +15,7 @@ import useTimestamp from '@/hooks/use-timestamp'
 import { useVersionListOfPlugin } from '@/service/use-plugins'
 import { isEarlierThanVersion } from '@/utils/semver'
 
-type Props = {
+type Props = Readonly<{
   disabled?: boolean
   isShow: boolean
   onShowChange: (isShow: boolean) => void
@@ -34,7 +34,7 @@ type Props = {
     unique_identifier: string
     isDowngrade: boolean
   }) => void
-}
+}>
 
 const PluginVersionPicker: FC<Props> = ({
   disabled = false,