refactor(web): mark Props of tools/mcp components as read-only (#25219) (#37251)

web/app/components/tools/mcp/create-card.tsx

@@ -12,9 +12,9 @@ import { useDocLink } from '@/context/i18n'
 import { useCreateMCP } from '@/service/use-tools'
 import MCPModal from './modal'
 
-type Props = {
+type Props = Readonly<{
   handleCreate: (provider: ToolWithProvider) => void
-}
+}>
 
 const NewMCPCard = ({ handleCreate }: Props) => {
   const { t } = useTranslation()

web/app/components/tools/mcp/detail/content.tsx

@@ -37,13 +37,13 @@ import ListLoading from './list-loading'
 import OperationDropdown from './operation-dropdown'
 import ToolItem from './tool-item'
 
-type Props = {
+type Props = Readonly<{
   detail: ToolWithProvider
   onUpdate: (isDelete?: boolean) => void
   onHide: () => void
   isTriggerAuthorize: boolean
   onFirstCreate: () => void
-}
+}>
 
 type MCPModalConfirmPayload = Parameters<ComponentProps<typeof MCPModal>['onConfirm']>[0]
 type MutationResult = {

web/app/components/tools/mcp/detail/operation-dropdown.tsx

@@ -16,12 +16,12 @@ import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
 
-type Props = {
+type Props = Readonly<{
   inCard?: boolean
   onOpenChange?: (open: boolean) => void
   onEdit: () => void
   onRemove: () => void
-}
+}>
 
 const OperationDropdown: FC<Props> = ({
   inCard,

web/app/components/tools/mcp/detail/provider-detail.tsx

@@ -13,13 +13,13 @@ import {
 import * as React from 'react'
 import MCPDetailContent from './content'
 
-type Props = {
+type Props = Readonly<{
   detail?: ToolWithProvider
   onUpdate: () => void
   onHide: () => void
   isTriggerAuthorize: boolean
   onFirstCreate: () => void
-}
+}>
 
 const MCPDetailPanel: FC<Props> = ({
   detail,

web/app/components/tools/mcp/detail/tool-item.tsx

@@ -7,9 +7,9 @@ import { useTranslation } from 'react-i18next'
 import { useLocale } from '@/context/i18n'
 import { getLanguage } from '@/i18n-config/language'
 
-type Props = {
+type Props = Readonly<{
   tool: Tool
-}
+}>
 
 const MCPToolItem = ({
   tool,

web/app/components/tools/mcp/headers-input.tsx

@@ -14,12 +14,12 @@ export type HeaderItem = {
   value: string
 }
 
-type Props = {
+type Props = Readonly<{
   headersItems: HeaderItem[]
   onChange: (headerItems: HeaderItem[]) => void
   readonly?: boolean
   isMasked?: boolean
-}
+}>
 
 const HeadersInput = ({
   headersItems,

web/app/components/tools/mcp/index.tsx

@@ -10,9 +10,9 @@ import NewMCPCard from './create-card'
 import MCPDetailPanel from './detail/provider-detail'
 import MCPCard from './provider-card'
 
-type Props = {
+type Props = Readonly<{
   searchText: string
-}
+}>
 
 const MCPList = ({
   searchText,

web/app/components/tools/mcp/mcp-server-param-item.tsx

@@ -3,11 +3,11 @@ import { Textarea } from '@langgenius/dify-ui/textarea'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 
-type Props = {
+type Props = Readonly<{
   data?: any
   value: string
   onChange: (value: string) => void
-}
+}>
 
 const MCPServerParamItem = ({
   data,

web/app/components/tools/mcp/provider-card.tsx

@@ -21,13 +21,13 @@ import { useDeleteMCP, useUpdateMCP } from '@/service/use-tools'
 import OperationDropdown from './detail/operation-dropdown'
 import MCPModal from './modal'
 
-type Props = {
+type Props = Readonly<{
   currentProvider?: ToolWithProvider
   data: ToolWithProvider
   handleSelect: (providerID: string) => void
   onUpdate: (providerID: string) => void
   onDeleted: () => void
-}
+}>
 
 const MCPCard = ({
   currentProvider,