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

web/app/components/datasets/common/chunking-mode-label.tsx

@@ -5,10 +5,10 @@ import { useTranslation } from 'react-i18next'
 import Badge from '@/app/components/base/badge'
 import { GeneralChunk, ParentChildChunk } from '@/app/components/base/icons/src/vender/knowledge'
 
-type Props = {
+type Props = Readonly<{
   isGeneralMode: boolean
   isQAMode: boolean
-}
+}>
 
 const ChunkingModeLabel: FC<Props> = ({
   isGeneralMode,

web/app/components/datasets/common/document-file-icon.tsx

@@ -19,12 +19,12 @@ const extendToFileTypeMap: { [key: string]: FileAppearanceType } = {
   docx: FileAppearanceTypeEnum.word,
 }
 
-type Props = {
+type Props = Readonly<{
   extension?: string
   name?: string
   size?: 'sm' | 'md' | 'lg' | 'xl'
   className?: string
-}
+}>
 
 const DocumentFileIcon: FC<Props> = ({
   extension,

web/app/components/datasets/common/document-picker/document-list.tsx

@@ -8,9 +8,9 @@ import {
 } from '@langgenius/dify-ui/combobox'
 import FileIcon from '../document-file-icon'
 
-type Props = {
+type Props = Readonly<{
   className?: string
-}
+}>
 
 function getDocumentExtension(document: SimpleDocumentDetail) {
   const detailExtension = document.data_source_detail_dict?.upload_file?.extension

web/app/components/datasets/common/document-picker/index.tsx

@@ -23,12 +23,12 @@ import { useDocumentList } from '@/service/knowledge/use-document'
 import FileIcon from '../document-file-icon'
 import DocumentList from './document-list'
 
-type Props = {
+type Props = Readonly<{
   datasetId: string
   value?: SimpleDocumentDetail | null
   parentMode?: ParentMode
   onChange: (value: SimpleDocumentDetail) => void
-}
+}>
 
 function getDocumentLabel(document: SimpleDocumentDetail) {
   return document.name

web/app/components/datasets/common/document-picker/preview-document-picker.tsx

@@ -15,12 +15,12 @@ import { useTranslation } from 'react-i18next'
 import Loading from '@/app/components/base/loading'
 import FileIcon from '../document-file-icon'
 
-type Props = {
+type Props = Readonly<{
   className?: string
   value?: DocumentItem
   files: DocumentItem[]
   onChange: (value: DocumentItem) => void
-}
+}>
 
 const PreviewDocumentPicker: FC<Props> = ({
   className,

web/app/components/datasets/common/document-status-with-action/auto-disabled-document.tsx

@@ -7,9 +7,9 @@ import { useTranslation } from 'react-i18next'
 import { useAutoDisabledDocuments, useDocumentEnable, useInvalidDisabledDocument } from '@/service/knowledge/use-document'
 import StatusWithAction from './status-with-action'
 
-type Props = {
+type Props = Readonly<{
   datasetId: string
-}
+}>
 
 const AutoDisabledDocument: FC<Props> = ({
   datasetId,

web/app/components/datasets/common/document-status-with-action/index-failed.tsx

@@ -9,9 +9,9 @@ import { retryErrorDocs } from '@/service/datasets'
 import { useDatasetErrorDocs } from '@/service/knowledge/use-dataset'
 import StatusWithAction from './status-with-action'
 
-type Props = {
+type Props = Readonly<{
   datasetId: string
-}
+}>
 type IIndexState = {
   value: string
 }

web/app/components/datasets/common/document-status-with-action/status-with-action.tsx

@@ -6,13 +6,13 @@ import * as React from 'react'
 import Divider from '@/app/components/base/divider'
 
 type Status = 'success' | 'error' | 'warning' | 'info'
-type Props = {
+type Props = Readonly<{
   type?: Status
   description: string
   actionText?: string
   onAction?: () => void
   disabled?: boolean
-}
+}>
 
 const IconMap = {
   success: {

web/app/components/datasets/common/economical-retrieval-method-config/index.tsx

@@ -9,11 +9,11 @@ import { EffectColor } from '../../settings/chunk-structure/types'
 import OptionCard from '../../settings/option-card'
 import RetrievalParamConfig from '../retrieval-param-config'
 
-type Props = {
+type Props = Readonly<{
   disabled?: boolean
   value: RetrievalConfig
   onChange: (value: RetrievalConfig) => void
-}
+}>
 
 const EconomicalRetrievalMethodConfig: FC<Props> = ({
   disabled = false,

web/app/components/datasets/common/retrieval-method-config/index.tsx

@@ -18,12 +18,12 @@ import { EffectColor } from '../../settings/chunk-structure/types'
 import OptionCard from '../../settings/option-card'
 import RetrievalParamConfig from '../retrieval-param-config'
 
-type Props = {
+type Props = Readonly<{
   disabled?: boolean
   value: RetrievalConfig
   showMultiModalTip?: boolean
   onChange: (value: RetrievalConfig) => void
-}
+}>
 
 const RetrievalMethodConfig: FC<Props> = ({
   disabled = false,

web/app/components/datasets/common/retrieval-method-info/index.tsx

@@ -7,9 +7,9 @@ import RadioCard from '@/app/components/base/radio-card'
 import { RETRIEVE_METHOD } from '@/types/app'
 import { retrievalIcon } from '../../create/icons'
 
-type Props = {
+type Props = Readonly<{
   value: RetrievalConfig
-}
+}>
 
 export const getIcon = (type: RETRIEVE_METHOD) => {
   return ({

web/app/components/datasets/common/retrieval-param-config/index.tsx

@@ -27,12 +27,12 @@ import { RETRIEVE_METHOD } from '@/types/app'
 import ProgressIndicator from '../../create/assets/progress-indicator.svg'
 import Reranking from '../../create/assets/rerank.svg'
 
-type Props = {
+type Props = Readonly<{
   type: RETRIEVE_METHOD
   value: RetrievalConfig
   showMultiModalTip?: boolean
   onChange: (value: RetrievalConfig) => void
-}
+}>
 
 const RetrievalParamConfig: FC<Props> = ({
   type,

web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/uploader.tsx

@@ -9,11 +9,11 @@ import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
 import { formatFileSize } from '@/utils/format'
 
-type Props = {
+type Props = Readonly<{
   file: File | undefined
   updateFile: (file?: File) => void
   className?: string
-}
+}>
 const Uploader: FC<Props> = ({ file, updateFile, className }) => {
   const { t } = useTranslation()
   const [dragging, setDragging] = useState(false)

web/app/components/datasets/create/website/base/checkbox-with-label.tsx

@@ -3,14 +3,14 @@ import { Checkbox } from '@langgenius/dify-ui/checkbox'
 import { cn } from '@langgenius/dify-ui/cn'
 import { Infotip } from '@/app/components/base/infotip'
 
-type Props = {
+type Props = Readonly<{
   className?: string
   isChecked: boolean
   onChange: (isChecked: boolean) => void
   label: string
   labelClassName?: string
   tooltip?: string
-}
+}>
 
 export default function CheckboxWithLabel({
   className = '',

web/app/components/datasets/create/website/base/crawled-result-item.tsx

@@ -7,13 +7,13 @@ import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 
-type Props = {
+type Props = Readonly<{
   payload: CrawlResultItemType
   isChecked: boolean
   isPreview: boolean
   onCheckChange: (checked: boolean) => void
   onPreview: () => void
-}
+}>
 
 const CrawledResultItem: FC<Props> = ({
   isPreview,

web/app/components/datasets/create/website/base/crawled-result.tsx

@@ -10,14 +10,14 @@ import CrawledResultItem from './crawled-result-item'
 
 const I18N_PREFIX = 'stepOne.website'
 
-type Props = {
+type Props = Readonly<{
   className?: string
   list: CrawlResultItem[]
   checkedList: CrawlResultItem[]
   onSelectedChange: (selected: CrawlResultItem[]) => void
   onPreview: (payload: CrawlResultItem) => void
   usedTime: number
-}
+}>
 
 const CrawledResult: FC<Props> = ({
   className = '',

web/app/components/datasets/create/website/base/crawling.tsx

@@ -4,11 +4,11 @@ import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { RowStruct } from '@/app/components/base/icons/src/public/other'
 
-type Props = {
+type Props = Readonly<{
   className?: string
   crawledNum: number
   totalNum: number
-}
+}>
 
 const Crawling: FC<Props> = ({
   className = '',

web/app/components/datasets/create/website/base/error-message.tsx

@@ -4,11 +4,11 @@ import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
 
-type Props = {
+type Props = Readonly<{
   className?: string
   title: string
   errorMsg?: string
-}
+}>
 
 const ErrorMessage: FC<Props> = ({
   className,

web/app/components/datasets/create/website/base/field.tsx

@@ -5,7 +5,7 @@ import * as React from 'react'
 import { Infotip } from '@/app/components/base/infotip'
 import Input from './text-input'
 
-type Props = {
+type Props = Readonly<{
   className?: string
   label: string
   labelClassName?: string
@@ -15,7 +15,7 @@ type Props = {
   placeholder?: string
   isNumber?: boolean
   tooltip?: string
-}
+}>
 
 const Field: FC<Props> = ({
   className,

web/app/components/datasets/create/website/base/options-wrap.tsx

@@ -10,11 +10,11 @@ import { ChevronRight } from '@/app/components/base/icons/src/vender/line/arrows
 
 const I18N_PREFIX = 'stepOne.website'
 
-type Props = {
+type Props = Readonly<{
   className?: string
   children: React.ReactNode
   controlFoldOptions?: number
-}
+}>
 
 const OptionsWrap: FC<Props> = ({
   className = '',

web/app/components/datasets/create/website/base/text-input.tsx

@@ -3,12 +3,12 @@ import type { FC } from 'react'
 import * as React from 'react'
 import { useCallback } from 'react'
 
-type Props = {
+type Props = Readonly<{
   value: string | number
   onChange: (value: string | number) => void
   placeholder?: string
   isNumber?: boolean
-}
+}>
 
 const MIN_VALUE = 0
 

web/app/components/datasets/create/website/base/url-input.tsx

@@ -9,10 +9,10 @@ import Input from './text-input'
 
 const I18N_PREFIX = 'stepOne.website'
 
-type Props = {
+type Props = Readonly<{
   isRunning: boolean
   onRun: (url: string) => void
-}
+}>
 
 const UrlInput: FC<Props> = ({
   isRunning,

web/app/components/datasets/create/website/firecrawl/index.tsx

@@ -19,14 +19,14 @@ import Options from './options'
 
 const ERROR_I18N_PREFIX = 'errorMsg'
 const I18N_PREFIX = 'stepOne.website'
-type Props = {
+type Props = Readonly<{
   onPreview: (payload: CrawlResultItem) => void
   checkedCrawlResult: CrawlResultItem[]
   onCheckedCrawlResultChange: (payload: CrawlResultItem[]) => void
   onJobIdChange: (jobId: string) => void
   crawlOptions: CrawlOptions
   onCrawlOptionsChange: (payload: CrawlOptions) => void
-}
+}>
 const Step = {
   init: 'init',
   running: 'running',

web/app/components/datasets/create/website/firecrawl/options.tsx

@@ -10,11 +10,11 @@ import Field from '../base/field'
 
 const I18N_PREFIX = 'stepOne.website'
 
-type Props = {
+type Props = Readonly<{
   className?: string
   payload: CrawlOptions
   onChange: (payload: CrawlOptions) => void
-}
+}>
 
 const Options: FC<Props> = ({
   className = '',

web/app/components/datasets/create/website/index.tsx

@@ -16,7 +16,7 @@ import JinaReader from './jina-reader'
 import NoData from './no-data'
 import Watercrawl from './watercrawl'
 
-type Props = {
+type Props = Readonly<{
   onPreview: (payload: CrawlResultItem) => void
   checkedCrawlResult: CrawlResultItem[]
   onCheckedCrawlResultChange: (payload: CrawlResultItem[]) => void
@@ -25,7 +25,7 @@ type Props = {
   crawlOptions: CrawlOptions
   onCrawlOptionsChange: (payload: CrawlOptions) => void
   authedDataSourceList: DataSourceAuth[]
-}
+}>
 
 const Website: FC<Props> = ({
   onPreview,

web/app/components/datasets/create/website/jina-reader/base/url-input.tsx

@@ -9,10 +9,10 @@ import { useDocLink } from '@/context/i18n'
 
 const I18N_PREFIX = 'stepOne.website'
 
-type Props = {
+type Props = Readonly<{
   isRunning: boolean
   onRun: (url: string) => void
-}
+}>
 
 const UrlInput: FC<Props> = ({
   isRunning,

web/app/components/datasets/create/website/jina-reader/index.tsx

@@ -19,14 +19,14 @@ import Options from './options'
 
 const ERROR_I18N_PREFIX = 'errorMsg'
 const I18N_PREFIX = 'stepOne.website'
-type Props = {
+type Props = Readonly<{
   onPreview: (payload: CrawlResultItem) => void
   checkedCrawlResult: CrawlResultItem[]
   onCheckedCrawlResultChange: (payload: CrawlResultItem[]) => void
   onJobIdChange: (jobId: string) => void
   crawlOptions: CrawlOptions
   onCrawlOptionsChange: (payload: CrawlOptions) => void
-}
+}>
 const Step = {
   init: 'init',
   running: 'running',

web/app/components/datasets/create/website/jina-reader/options.tsx

@@ -10,11 +10,11 @@ import Field from '../base/field'
 
 const I18N_PREFIX = 'stepOne.website'
 
-type Props = {
+type Props = Readonly<{
   className?: string
   payload: CrawlOptions
   onChange: (payload: CrawlOptions) => void
-}
+}>
 
 const Options: FC<Props> = ({
   className = '',

web/app/components/datasets/create/website/no-data.tsx

@@ -10,10 +10,10 @@ import s from './index.module.css'
 
 const I18N_PREFIX = 'stepOne.website'
 
-type Props = {
+type Props = Readonly<{
   onConfig: () => void
   provider: DataSourceProvider
-}
+}>
 
 const NoData: FC<Props> = ({
   onConfig,

web/app/components/datasets/create/website/watercrawl/index.tsx

@@ -19,14 +19,14 @@ import Options from './options'
 
 const ERROR_I18N_PREFIX = 'errorMsg'
 const I18N_PREFIX = 'stepOne.website'
-type Props = {
+type Props = Readonly<{
   onPreview: (payload: CrawlResultItem) => void
   checkedCrawlResult: CrawlResultItem[]
   onCheckedCrawlResultChange: (payload: CrawlResultItem[]) => void
   onJobIdChange: (jobId: string) => void
   crawlOptions: CrawlOptions
   onCrawlOptionsChange: (payload: CrawlOptions) => void
-}
+}>
 const Step = {
   init: 'init',
   running: 'running',

web/app/components/datasets/create/website/watercrawl/options.tsx

@@ -10,11 +10,11 @@ import Field from '../base/field'
 
 const I18N_PREFIX = 'stepOne.website'
 
-type Props = {
+type Props = Readonly<{
   className?: string
   payload: CrawlOptions
   onChange: (payload: CrawlOptions) => void
-}
+}>
 
 const Options: FC<Props> = ({
   className = '',

web/app/components/datasets/documents/components/rename-modal.tsx

@@ -10,13 +10,13 @@ import { useTranslation } from 'react-i18next'
 import Input from '@/app/components/base/input'
 import { renameDocumentName } from '@/service/datasets'
 
-type Props = {
+type Props = Readonly<{
   datasetId: string
   documentId: string
   name: string
   onClose: () => void
   onSaved: () => void
-}
+}>
 
 const RenameModal: FC<Props> = ({
   documentId,

web/app/components/datasets/documents/detail/batch-modal/csv-uploader.tsx

@@ -16,10 +16,10 @@ import { upload } from '@/service/base'
 import { useFileUploadConfig } from '@/service/use-common'
 import { Theme } from '@/types/app'
 
-type Props = {
+type Props = Readonly<{
   file: FileItem | undefined
   updateFile: (file?: FileItem) => void
-}
+}>
 const CSVUploader: FC<Props> = ({ file, updateFile }) => {
   const { t } = useTranslation()
   const [dragging, setDragging] = useState(false)

web/app/components/datasets/hit-testing/index.tsx

@@ -44,9 +44,9 @@ import ModifyRetrievalModal from './modify-retrieval-modal'
 
 const limit = 10
 
-type Props = {
+type Props = Readonly<{
   datasetId: string
-}
+}>
 
 const HitTestingPage: FC<Props> = ({ datasetId }: Props) => {
   const { t } = useTranslation()

web/app/components/datasets/hit-testing/modify-retrieval-modal.tsx

@@ -17,13 +17,13 @@ import { useDocLink } from '@/context/i18n'
 import { ModelTypeEnum } from '../../header/account-setting/model-provider-page/declarations'
 import { checkShowMultiModalTip } from '../settings/utils'
 
-type Props = {
+type Props = Readonly<{
   indexMethod: string
   value: RetrievalConfig
   isShow: boolean
   onHide: () => void
   onSave: (value: RetrievalConfig) => void
-}
+}>
 const ModifyRetrievalModal: FC<Props> = ({ indexMethod, value, isShow, onHide, onSave }) => {
   const ref = useRef(null)
   const { t } = useTranslation()

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

@@ -9,12 +9,12 @@ import DatasetCard from './dataset-card'
 import DatasetCardSkeleton from './dataset-card-skeleton'
 import NewDatasetCard from './new-dataset-card'
 
-type Props = {
+type Props = Readonly<{
   tags: string[]
   keywords: string
   includeAll: boolean
   onOpenTagManagement?: () => void
-}
+}>
 
 const Datasets = ({
   tags,

web/app/components/datasets/metadata/base/date-picker.tsx

@@ -12,12 +12,12 @@ import DatePicker from '@/app/components/base/date-and-time-picker/date-picker'
 import { userProfileQueryOptions } from '@/features/account-profile/client'
 import useTimestamp from '@/hooks/use-timestamp'
 
-type Props = {
+type Props = Readonly<{
   className?: string
   label?: string
   value?: number
   onChange: (date: number | null) => void
-}
+}>
 const WrappedDatePicker = ({
   className,
   label,

web/app/components/datasets/metadata/edit-metadata-batch/add-row.tsx

@@ -7,12 +7,12 @@ import * as React from 'react'
 import InputCombined from './input-combined'
 import Label from './label'
 
-type Props = {
+type Props = Readonly<{
   className?: string
   payload: MetadataItemWithEdit
   onChange: (value: MetadataItemWithEdit) => void
   onRemove: () => void
-}
+}>
 
 const AddRow: FC<Props> = ({
   className,

web/app/components/datasets/metadata/edit-metadata-batch/edit-row.tsx

@@ -10,12 +10,12 @@ import InputCombined from './input-combined'
 import InputHasSetMultipleValue from './input-has-set-multiple-value'
 import Label from './label'
 
-type Props = {
+type Props = Readonly<{
   payload: MetadataItemWithEdit
   onChange: (payload: MetadataItemWithEdit) => void
   onRemove: (id: string) => void
   onReset: (id: string) => void
-}
+}>
 
 const EditMetadatabatchItem: FC<Props> = ({
   payload,

web/app/components/datasets/metadata/edit-metadata-batch/edited-beacon.tsx

@@ -7,9 +7,9 @@ import * as React from 'react'
 import { useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 
-type Props = {
+type Props = Readonly<{
   onReset: () => void
-}
+}>
 
 const EditedBeacon: FC<Props> = ({
   onReset,

web/app/components/datasets/metadata/edit-metadata-batch/input-combined.tsx

@@ -14,14 +14,14 @@ import * as React from 'react'
 import Datepicker from '../base/date-picker'
 import { DataType } from '../types'
 
-type Props = {
+type Props = Readonly<{
   className?: string
   label: string
   type: DataType
   value: any
   onChange: (value: any) => void
   readOnly?: boolean
-}
+}>
 
 const InputCombined: FC<Props> = ({
   className: configClassName,

web/app/components/datasets/metadata/edit-metadata-batch/input-has-set-multiple-value.tsx

@@ -5,10 +5,10 @@ import { RiCloseLine } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 
-type Props = {
+type Props = Readonly<{
   onClear: () => void
   readOnly?: boolean
-}
+}>
 
 const InputHasSetMultipleValue: FC<Props> = ({
   onClear,

web/app/components/datasets/metadata/edit-metadata-batch/label.tsx

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

web/app/components/datasets/metadata/edit-metadata-batch/modal.tsx

@@ -19,14 +19,14 @@ import AddedMetadataItem from './add-row'
 import EditMetadataBatchItem from './edit-row'
 
 const i18nPrefix = 'metadata.batchEditMetadata'
-type Props = {
+type Props = Readonly<{
   datasetId: string
   documentNum: number
   list: MetadataItemInBatchEdit[]
   onSave: (editedList: MetadataItemInBatchEdit[], addedList: MetadataItemInBatchEdit[], isApplyToAllSelectDocument: boolean) => void
   onHide: () => void
   onShowManage: () => void
-}
+}>
 const EditMetadataBatchModal: FC<Props> = ({ datasetId, documentNum, list, onSave, onHide, onShowManage }) => {
   const { t } = useTranslation()
   const [templeList, setTempleList] = useState<MetadataItemWithEdit[]>(list)

web/app/components/datasets/metadata/hooks/use-batch-edit-document-metadata.ts

@@ -7,12 +7,12 @@ import { useMemo } from 'react'
 import { useBatchUpdateDocMetadata } from '@/service/knowledge/use-metadata'
 import { UpdateType } from '../types'
 
-type Props = {
+type Props = Readonly<{
   datasetId: string
   docList: SimpleDocumentDetail[]
   selectedDocumentIds?: string[]
   onUpdate: () => void
-}
+}>
 const useBatchEditDocumentMetadata = ({ datasetId, docList, selectedDocumentIds, onUpdate }: Props) => {
   const [isShowEditModal, { setTrue: showEditModal, setFalse: hideEditModal }] = useBoolean(false)
   const metaDataList: MetadataItemWithValue[][] = (() => {

web/app/components/datasets/metadata/hooks/use-metadata-document.ts

@@ -10,11 +10,11 @@ import { useBatchUpdateDocMetadata, useCreateMetaData, useDatasetMetaData, useDo
 import { DataType } from '../types'
 import useCheckMetadataName from './use-check-metadata-name'
 
-type Props = {
+type Props = Readonly<{
   datasetId: string
   documentId: string
   docDetail: FullDocumentDetail
-}
+}>
 const useMetadataDocument = ({ datasetId, documentId, docDetail }: Props) => {
   const { t } = useTranslation()
   const { dataset } = useDatasetDetailContext()

web/app/components/datasets/metadata/metadata-dataset/create-content.tsx

@@ -11,12 +11,12 @@ import Field from './field'
 
 const i18nPrefix = 'metadata.createMetadata'
 
-export type Props = {
+export type Props = Readonly<{
   onClose?: () => void
   onSave: (data: BuiltInMetadataItem) => void
   hasBack?: boolean
   onBack?: () => void
-}
+}>
 
 export function CreateContent({
   onClose = noop,

web/app/components/datasets/metadata/metadata-dataset/create-metadata-modal.tsx

@@ -4,12 +4,12 @@ import { Popover, PopoverContent, PopoverTrigger } from '@langgenius/dify-ui/pop
 import * as React from 'react'
 import { CreateContent } from './create-content'
 
-type Props = {
+type Props = Readonly<{
   open: boolean
   setOpen: (open: boolean) => void
   trigger: React.ReactNode
   popupLeft?: number
-} & CreateContentProps
+}> & CreateContentProps
 
 export function CreateMetadataModal({
   open,

web/app/components/datasets/metadata/metadata-dataset/dataset-metadata-drawer.tsx

@@ -38,7 +38,7 @@ import Field from './field'
 
 const i18nPrefix = 'metadata.datasetMetadata'
 
-type Props = {
+type Props = Readonly<{
   userMetadata: MetadataItemWithValueLength[]
   builtInMetadata: BuiltInMetadataItem[]
   isBuiltInEnabled: boolean
@@ -47,7 +47,7 @@ type Props = {
   onAdd: (payload: BuiltInMetadataItem) => void
   onRename: (payload: MetadataItemWithValueLength) => void
   onRemove: (metaDataId: string) => void
-}
+}>
 
 type ItemProps = {
   readonly?: boolean

web/app/components/datasets/metadata/metadata-dataset/field.tsx

@@ -2,11 +2,11 @@
 import type { FC } from 'react'
 import * as React from 'react'
 
-type Props = {
+type Props = Readonly<{
   className?: string
   label: string
   children: React.ReactNode
-}
+}>
 
 const Field: FC<Props> = ({
   className,

web/app/components/datasets/metadata/metadata-document/field.tsx

@@ -2,10 +2,10 @@
 import type { FC } from 'react'
 import * as React from 'react'
 
-type Props = {
+type Props = Readonly<{
   label: string
   children: React.ReactNode
-}
+}>
 
 const Field: FC<Props> = ({
   label,

web/app/components/datasets/metadata/metadata-document/index.tsx

@@ -13,12 +13,12 @@ import NoData from './no-data'
 
 const i18nPrefix = 'metadata.documentMetadata'
 
-type Props = {
+type Props = Readonly<{
   datasetId: string
   documentId: string
   className?: string
   docDetail: FullDocumentDetail
-}
+}>
 const MetadataDocument: FC<Props> = ({
   datasetId,
   documentId,

web/app/components/datasets/metadata/metadata-document/info-group.tsx

@@ -14,7 +14,7 @@ import { DatasetMetadataPicker } from '../metadata-dataset/dataset-metadata-pick
 import { DataType, isShowManageMetadataLocalStorageKey } from '../types'
 import Field from './field'
 
-type Props = {
+type Props = Readonly<{
   dataSetId: string
   className?: string
   noHeader?: boolean
@@ -29,7 +29,7 @@ type Props = {
   onDelete?: (item: MetadataItemWithValue) => void
   onSelect?: (item: MetadataItemWithValue) => void
   onAdd?: (item: BuiltInMetadataItem) => void
-}
+}>
 
 const InfoGroup: FC<Props> = ({
   dataSetId,

web/app/components/datasets/metadata/metadata-document/no-data.tsx

@@ -5,9 +5,9 @@ import { RiArrowRightLine } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 
-type Props = {
+type Props = Readonly<{
   onStart: () => void
-}
+}>
 
 const NoData: FC<Props> = ({
   onStart,