refactor(web): mark Props of app/annotation components as read-only (#25219) (#37299)

web/app/components/app/annotation/add-annotation-modal/edit-item/index.tsx

@@ -9,11 +9,11 @@ export enum EditItemType {
   Query = 'query',
   Answer = 'answer',
 }
-type Props = {
+type Props = Readonly<{
   type: EditItemType
   content: string
   onChange: (content: string) => void
-}
+}>
 
 const EditItem: FC<Props> = ({
   type,

web/app/components/app/annotation/add-annotation-modal/index.tsx

@@ -21,11 +21,11 @@ import AnnotationFull from '@/app/components/billing/annotation-full'
 import { useProviderContext } from '@/context/provider-context'
 import EditItem, { EditItemType } from './edit-item'
 
-type Props = {
+type Props = Readonly<{
   isShow: boolean
   onHide: () => void
   onAdd: (payload: AnnotationItemBasic) => void
-}
+}>
 
 const AddAnnotationModal: FC<Props> = ({
   isShow,

web/app/components/app/annotation/batch-add-annotation-modal/csv-uploader.tsx

@@ -9,10 +9,10 @@ import { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Csv as CSVIcon } from '@/app/components/base/icons/src/public/files'
 
-export type Props = {
+export type Props = Readonly<{
   file: File | undefined
   updateFile: (file?: File) => void
-}
+}>
 
 const CSVUploader: FC<Props> = ({
   file,

web/app/components/app/annotation/clear-all-annotations-confirm-modal/index.tsx

@@ -12,11 +12,11 @@ import {
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 
-type Props = {
+type Props = Readonly<{
   isShow: boolean
   onHide: () => void
   onConfirm: () => void
-}
+}>
 
 const ClearAllAnnotationsConfirmModal: FC<Props> = ({
   isShow,

web/app/components/app/annotation/edit-annotation-modal/edit-item/index.tsx

@@ -13,12 +13,12 @@ export enum EditItemType {
   Query = 'query',
   Answer = 'answer',
 }
-type Props = {
+type Props = Readonly<{
   type: EditItemType
   content: string
   readonly?: boolean
   onSave: (content: string) => Promise<void>
-}
+}>
 
 export const EditTitle: FC<{ className?: string, title: string }> = ({ className, title }) => (
   <div className={cn(className, 'flex h-[18px] items-center system-xs-medium text-text-tertiary')}>

web/app/components/app/annotation/edit-annotation-modal/index.tsx

@@ -29,7 +29,7 @@ import useTimestamp from '@/hooks/use-timestamp'
 import { addAnnotation, editAnnotation } from '@/service/annotation'
 import EditItem, { EditItemType } from './edit-item'
 
-type Props = {
+type Props = Readonly<{
   isShow: boolean
   onHide: () => void
   appId: string
@@ -42,7 +42,7 @@ type Props = {
   createdAt?: number
   onRemove: () => void
   onlyEditResponse?: boolean
-}
+}>
 
 const EditAnnotationModal: FC<Props> = ({
   isShow,

web/app/components/app/annotation/header-opts/index.tsx

@@ -29,12 +29,12 @@ import ClearAllAnnotationsConfirmModal from '../clear-all-annotations-confirm-mo
 const CSV_HEADER_QA_EN = ['Question', 'Answer']
 const CSV_HEADER_QA_CN = ['问题', '答案']
 
-type Props = {
+type Props = Readonly<{
   appId: string
   onAdd: (payload: AnnotationItemBasic) => void
   onAdded: () => void
   controlUpdateList: number
-}
+}>
 
 type OperationsMenuProps = {
   list: AnnotationItemBasic[]

web/app/components/app/annotation/index.tsx

@@ -30,9 +30,9 @@ import { List } from './list'
 import { AnnotationEnableStatus, JobStatus } from './type'
 import ViewAnnotationModal from './view-annotation-modal'
 
-type Props = {
+type Props = Readonly<{
   appDetail: App
-}
+}>
 
 const Annotation: FC<Props> = (props) => {
   const { appDetail } = props

web/app/components/app/annotation/list.tsx

@@ -9,14 +9,14 @@ import useTimestamp from '@/hooks/use-timestamp'
 import BatchAction from './batch-action'
 import RemoveAnnotationConfirmModal from './remove-annotation-confirm-modal'
 
-type Props = {
+type Props = Readonly<{
   list: AnnotationItem[]
   onView: (item: AnnotationItem) => void
   onRemove: (id: string) => void
   selectedIds: string[]
   onSelectedIdsChange: (selectedIds: string[]) => void
   onBatchDelete: () => Promise<void>
-}
+}>
 
 type AnnotationTableRowProps = {
   item: AnnotationItem

web/app/components/app/annotation/remove-annotation-confirm-modal/index.tsx

@@ -11,11 +11,11 @@ import {
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 
-type Props = {
+type Props = Readonly<{
   isShow: boolean
   onHide: () => void
   onRemove: () => void
-}
+}>
 
 const RemoveAnnotationConfirmModal: FC<Props> = ({
   isShow,

web/app/components/app/annotation/view-annotation-modal/index.tsx

@@ -33,14 +33,14 @@ import { fetchHitHistoryList } from '@/service/annotation'
 import EditItem, { EditItemType } from '../edit-annotation-modal/edit-item'
 import HitHistoryNoData from './hit-history-no-data'
 
-type Props = {
+type Props = Readonly<{
   appId: string
   isShow: boolean
   onHide: () => void
   item: AnnotationItem
   onSave: (editedQuery: string, editedAnswer: string) => Promise<void>
   onRemove: () => void
-}
+}>
 
 enum TabType {
   annotation = 'annotation',