refactor(web): mark Props of (commonLayout) components as read-only (#25219) (#37291)

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/long-time-range-picker.tsx

@@ -13,11 +13,11 @@ type TimePeriodOption = {
   name: string
 }
 
-type Props = {
+type Props = Readonly<{
   periodMapping: { [key: string]: { value: number, name: TimePeriodName } }
   onSelect: (payload: PeriodParams) => void
   queryDateFormat: string
-}
+}>
 
 const today = dayjs()
 

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/time-range-picker/date-picker.tsx

@@ -12,12 +12,12 @@ import Picker from '@/app/components/base/date-and-time-picker/date-picker'
 import { useLocale } from '@/context/i18n'
 import { formatToLocalTime } from '@/utils/format'
 
-type Props = {
+type Props = Readonly<{
   start: Dayjs
   end: Dayjs
   onStartChange: (date?: Dayjs) => void
   onEndChange: (date?: Dayjs) => void
-}
+}>
 
 const today = dayjs()
 const DatePicker: FC<Props> = ({

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/time-range-picker/index.tsx

@@ -16,11 +16,11 @@ const today = dayjs()
 
 type TimePeriodName = I18nKeysByPrefix<'appLog', 'filter.period.'>
 
-type Props = {
+type Props = Readonly<{
   ranges: { value: number, name: TimePeriodName }[]
   onSelect: (payload: PeriodParams) => void
   queryDateFormat: string
-}
+}>
 
 const TimeRangePicker: FC<Props> = ({
   ranges,

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/time-range-picker/range-selector.tsx

@@ -17,11 +17,11 @@ type TimePeriodOption = {
   name: string
 }
 
-type Props = {
+type Props = Readonly<{
   isCustomRange: boolean
   ranges: { value: number, name: TimePeriodName }[]
   onSelect: (payload: PeriodParamsWithTimeRange) => void
-}
+}>
 
 const RangeSelector: FC<Props> = ({
   isCustomRange,

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/config-button.tsx

@@ -12,12 +12,12 @@ import * as React from 'react'
 import { useState } from 'react'
 import ConfigPopup from './config-popup'
 
-type Props = {
+type Props = Readonly<{
   readOnly: boolean
   className?: string
   hasConfigured: boolean
   children?: React.ReactNode
-} & PopupProps
+}> & PopupProps
 
 const ConfigBtn: FC<Props> = ({
   className,

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/field.tsx

@@ -4,7 +4,7 @@ import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import Input from '@/app/components/base/input'
 
-type Props = {
+type Props = Readonly<{
   className?: string
   label: string
   labelClassName?: string
@@ -12,7 +12,7 @@ type Props = {
   onChange: (value: string) => void
   isRequired?: boolean
   placeholder?: string
-}
+}>
 
 const Field: FC<Props> = ({
   className,

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-config-modal.tsx

@@ -28,7 +28,7 @@ import { docURL } from './config'
 import Field from './field'
 import { TracingProvider } from './type'
 
-type Props = {
+type Props = Readonly<{
   appId: string
   type: TracingProvider
   payload?: ArizeConfig | PhoenixConfig | LangSmithConfig | LangFuseConfig | OpikConfig | WeaveConfig | AliyunConfig | MLflowConfig | DatabricksConfig | TencentConfig | null
@@ -36,7 +36,7 @@ type Props = {
   onCancel: () => void
   onSaved: (payload: ArizeConfig | PhoenixConfig | LangSmithConfig | LangFuseConfig | OpikConfig | WeaveConfig | AliyunConfig | MLflowConfig | DatabricksConfig | TencentConfig) => void
   onChosen: (provider: TracingProvider) => void
-}
+}>
 
 const I18N_PREFIX = 'tracing.configProvider'
 

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-panel.tsx

@@ -13,7 +13,7 @@ import { TracingProvider } from './type'
 
 const I18N_PREFIX = 'tracing'
 
-type Props = {
+type Props = Readonly<{
   type: TracingProvider
   readOnly: boolean
   isChosen: boolean
@@ -21,7 +21,7 @@ type Props = {
   onChoose: () => void
   hasConfigured: boolean
   onConfig: () => void
-}
+}>
 
 const getIcon = (type: TracingProvider) => {
   return ({

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/tracing-icon.tsx

@@ -4,10 +4,10 @@ import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { TracingIcon as Icon } from '@/app/components/base/icons/src/public/tracing'
 
-type Props = {
+type Props = Readonly<{
   className?: string
   size: 'lg' | 'md'
-}
+}>
 
 const sizeClassMap = {
   lg: 'w-9 h-9 p-2 rounded-[10px]',

web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/hitTesting/page.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react'
 import Main from '@/app/components/datasets/hit-testing'
 
-type Props = {
+type Props = Readonly<{
   params: Promise<{ datasetId: string }>
-}
+}>
 
 const HitTesting = async (props: Props) => {
   const params = await props.params

web/app/(commonLayout)/error.tsx

@@ -5,10 +5,10 @@ import { useTranslation } from 'react-i18next'
 import { FullScreenLoading } from '@/app/components/full-screen-loading'
 import { isLegacyBase401 } from '@/features/account-profile/client'
 
-type Props = {
+type Props = Readonly<{
   error: Error & { digest?: string }
   unstable_retry: () => void
-}
+}>
 
 export default function CommonLayoutError({ error, unstable_retry }: Props) {
   const { t } = useTranslation('common')