From 9df0dcedae2a3a0773f8c7bf777d8f23f677760c Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Fri, 22 Sep 2023 22:38:33 +0800
Subject: [PATCH] fix: dataset eslint error (#1221)

---
 .../documents/detail/embedding/index.tsx      |   4 +-
 .../documents/detail/metadata/index.tsx       | 168 ++++++++++--------
 .../datasets/hit-testing/hit-detail.tsx       |   4 +-
 3 files changed, 93 insertions(+), 83 deletions(-)

diff --git a/web/app/components/datasets/documents/detail/embedding/index.tsx b/web/app/components/datasets/documents/detail/embedding/index.tsx
index 3839f745b3..a1432fc5d5 100644
--- a/web/app/components/datasets/documents/detail/embedding/index.tsx
+++ b/web/app/components/datasets/documents/detail/embedding/index.tsx
@@ -291,8 +291,8 @@ const EmbeddingDetail: FC<Props> = ({ detail, stopPosition = 'top', datasetId: d
         <Divider />
         <div className={s.previewTip}>{t('datasetDocuments.embedding.previewTip')}</div>
         <div className={style.cardWrapper}>
-          {[1, 2, 3].map(v => (
-            <SegmentCard loading={true} detail={{ position: v } as any} />
+          {[1, 2, 3].map((v, index) => (
+            <SegmentCard key={index} loading={true} detail={{ position: v } as any} />
           ))}
         </div>
       </>}
diff --git a/web/app/components/datasets/documents/detail/metadata/index.tsx b/web/app/components/datasets/documents/detail/metadata/index.tsx
index 7b9c40aace..12a2ce351c 100644
--- a/web/app/components/datasets/documents/detail/metadata/index.tsx
+++ b/web/app/components/datasets/documents/detail/metadata/index.tsx
@@ -1,11 +1,13 @@
 'use client'
 import type { FC } from 'react'
-import React, { useState, useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
 import { PencilIcon } from '@heroicons/react/24/outline'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import { get } from 'lodash-es'
 import cn from 'classnames'
+import { DocumentContext } from '../index'
+import s from './style.module.css'
 import Input from '@/app/components/base/input'
 import Button from '@/app/components/base/button'
 import Tooltip from '@/app/components/base/tooltip'
@@ -18,12 +20,10 @@ import AutoHeightTextarea from '@/app/components/base/auto-height-textarea'
 import { asyncRunSafe, getTextWidthWithCanvas } from '@/utils'
 import { modifyDocMetadata } from '@/service/datasets'
 import type { CommonResponse } from '@/models/common'
-import type { FullDocumentDetail, DocType } from '@/models/datasets'
+import type { DocType, FullDocumentDetail } from '@/models/datasets'
 import { CUSTOMIZABLE_DOC_TYPES } from '@/models/datasets'
-import type { metadataType, inputType } from '@/hooks/use-metadata'
-import { useMetadataMap, useLanguages, useBookCategories, usePersonalDocCategories, useBusinessDocCategories } from '@/hooks/use-metadata'
-import { DocumentContext } from '../index'
-import s from './style.module.css'
+import type { inputType, metadataType } from '@/hooks/use-metadata'
+import { useBookCategories, useBusinessDocCategories, useLanguages, useMetadataMap, usePersonalDocCategories } from '@/hooks/use-metadata'
 
 const map2Options = (map: { [key: string]: string }) => {
   return Object.keys(map).map(key => ({ value: key, name: map[key] }))
@@ -48,7 +48,7 @@ export const FieldInfo: FC<IFieldInfoProps> = ({
   showEdit = false,
   inputType = 'input',
   selectOptions = [],
-  onUpdate
+  onUpdate,
 }) => {
   const { t } = useTranslation()
   const textNeedWrap = getTextWidthWithCanvas(displayedValue) > 190
@@ -56,7 +56,7 @@ export const FieldInfo: FC<IFieldInfoProps> = ({
   const readAlignTop = !showEdit && textNeedWrap
 
   return (
-    <div className={cn(s.fieldInfo, editAlignTop && `!items-start`, readAlignTop && '!items-start pt-1')}>
+    <div className={cn(s.fieldInfo, editAlignTop && '!items-start', readAlignTop && '!items-start pt-1')}>
       <div className={cn(s.label, editAlignTop && 'pt-1')}>{label}</div>
       <div className={s.value}>
         {!showEdit
@@ -132,13 +132,15 @@ const Metadata: FC<IMetadataProps> = ({ docDetail, loading, onUpdate }) => {
   const [editStatus, setEditStatus] = useState(!doc_type) // if no documentType, in editing status by default
   // the initial values are according to the documentType
   const [metadataParams, setMetadataParams] = useState<{
-    documentType?: DocType | '';
+    documentType?: DocType | ''
     metadata: { [key: string]: string }
   }>(
-    doc_type ? {
-      documentType: doc_type,
-      metadata: doc_metadata || {}
-    } : { metadata: {} })
+    doc_type
+      ? {
+        documentType: doc_type,
+        metadata: doc_metadata || {},
+      }
+      : { metadata: {} })
   const [showDocTypes, setShowDocTypes] = useState(!doc_type) // whether show doc types
   const [tempDocType, setTempDocType] = useState<DocType | undefined | ''>('') // for remember icon click
   const [saveLoading, setSaveLoading] = useState(false)
@@ -153,17 +155,18 @@ const Metadata: FC<IMetadataProps> = ({ docDetail, loading, onUpdate }) => {
       setTempDocType(docDetail?.doc_type)
       setMetadataParams({
         documentType: docDetail?.doc_type,
-        metadata: docDetail?.doc_metadata || {}
+        metadata: docDetail?.doc_metadata || {},
       })
     }
   }, [docDetail?.doc_type])
 
   // confirm doc type
   const confirmDocType = () => {
-    if (!tempDocType) return;
+    if (!tempDocType)
+      return
     setMetadataParams({
       documentType: tempDocType,
-      metadata: tempDocType === metadataParams.documentType ? metadataParams.metadata : {} // change doc type, clear metadata
+      metadata: tempDocType === metadataParams.documentType ? metadataParams.metadata : {}, // change doc type, clear metadata
     })
     setEditStatus(true)
     setShowDocTypes(false)
@@ -194,9 +197,9 @@ const Metadata: FC<IMetadataProps> = ({ docDetail, loading, onUpdate }) => {
             <span className={s.changeTip}>{t('datasetDocuments.metadata.docTypeSelectWarning')}</span>
           </>}
           <Radio.Group value={tempDocType ?? documentType} onChange={setTempDocType} className={s.radioGroup}>
-            {CUSTOMIZABLE_DOC_TYPES.map((type) => {
+            {CUSTOMIZABLE_DOC_TYPES.map((type, index) => {
               const currValue = tempDocType ?? documentType
-              return <Radio value={type} className={`${s.radio} ${currValue === type ? 'shadow-none' : ''}`}>
+              return <Radio key={index} value={type} className={`${s.radio} ${currValue === type ? 'shadow-none' : ''}`}>
                 <IconButton
                   type={type}
                   isChecked={currValue === type}
@@ -223,25 +226,30 @@ const Metadata: FC<IMetadataProps> = ({ docDetail, loading, onUpdate }) => {
 
   // show metadata info and edit
   const renderFieldInfos = ({ mainField = 'book', canEdit }: { mainField?: metadataType | ''; canEdit?: boolean }) => {
-    if (!mainField) return null
+    if (!mainField)
+      return null
     const fieldMap = metadataMap[mainField]?.subFieldsMap
     const sourceData = ['originInfo', 'technicalParameters'].includes(mainField) ? docDetail : metadataParams.metadata
 
     const getTargetMap = (field: string) => {
-      if (field === 'language') return languageMap
-      if (field === 'category' && mainField === 'book') {
+      if (field === 'language')
+        return languageMap
+      if (field === 'category' && mainField === 'book')
         return bookCategoryMap
-      }
+
       if (field === 'document_type') {
-        if (mainField === 'personal_document') return personalDocCategoryMap
-        if (mainField === 'business_document') return businessDocCategoryMap
+        if (mainField === 'personal_document')
+          return personalDocCategoryMap
+        if (mainField === 'business_document')
+          return businessDocCategoryMap
       }
       return {} as any
     }
 
     const getTargetValue = (field: string) => {
       const val = get(sourceData, field, '')
-      if (!val && val !== 0) return '-'
+      if (!val && val !== 0)
+        return '-'
       if (fieldMap[field]?.inputType === 'select')
         return getTargetMap(field)[val]
       if (fieldMap[field]?.render)
@@ -286,8 +294,8 @@ const Metadata: FC<IMetadataProps> = ({ docDetail, loading, onUpdate }) => {
       documentId,
       body: {
         doc_type: metadataParams.documentType || doc_type || '',
-        doc_metadata: metadataParams.metadata
-      }
+        doc_metadata: metadataParams.metadata,
+      },
     }) as Promise<CommonResponse>)
     if (!e)
       notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
@@ -300,62 +308,64 @@ const Metadata: FC<IMetadataProps> = ({ docDetail, loading, onUpdate }) => {
 
   return (
     <div className={`${s.main} ${editStatus ? 'bg-white' : 'bg-gray-25'}`}>
-      {loading ? <Loading type='app' /> : (
-        <>
-          <div className={s.titleWrapper}>
-            <span className={s.title}>{t('datasetDocuments.metadata.title')}</span>
+      {loading
+        ? (<Loading type='app' />)
+        : (
+          <>
+            <div className={s.titleWrapper}>
+              <span className={s.title}>{t('datasetDocuments.metadata.title')}</span>
+              {!editStatus
+                ? <Button onClick={enabledEdit} className={`${s.opBtn} ${s.opEditBtn}`}>
+                  <PencilIcon className={s.opIcon} />
+                  {t('common.operation.edit')}
+                </Button>
+                : showDocTypes
+                  ? null
+                  : <div className={s.opBtnWrapper}>
+                    <Button onClick={onCancel} className={`${s.opBtn} ${s.opCancelBtn}`}>{t('common.operation.cancel')}</Button>
+                    <Button onClick={onSave}
+                      className={`${s.opBtn} ${s.opSaveBtn}`}
+                      type='primary'
+                      loading={saveLoading}
+                    >
+                      {t('common.operation.save')}
+                    </Button>
+                  </div>}
+            </div>
+            {/* show selected doc type and changing entry */}
             {!editStatus
-              ? <Button onClick={enabledEdit} className={`${s.opBtn} ${s.opEditBtn}`}>
-                <PencilIcon className={s.opIcon} />
-                {t('common.operation.edit')}
-              </Button>
+              ? <div className={s.documentTypeShow}>
+                <TypeIcon iconName={metadataMap[doc_type || 'book']?.iconName || ''} className={s.iconShow} />
+                {metadataMap[doc_type || 'book'].text}
+              </div>
               : showDocTypes
                 ? null
-                : <div className={s.opBtnWrapper}>
-                  <Button onClick={onCancel} className={`${s.opBtn} ${s.opCancelBtn}`}>{t('common.operation.cancel')}</Button>
-                  <Button onClick={onSave}
-                    className={`${s.opBtn} ${s.opSaveBtn}`}
-                    type='primary'
-                    loading={saveLoading}
-                  >
-                    {t('common.operation.save')}
-                  </Button>
-                </div>}
-          </div>
-          {/* show selected doc type and changing entry */}
-          {!editStatus
-            ? <div className={s.documentTypeShow}>
-              <TypeIcon iconName={metadataMap[doc_type || 'book']?.iconName || ''} className={s.iconShow} />
-              {metadataMap[doc_type || 'book'].text}
-            </div>
-            : showDocTypes
-              ? null
-              : <div className={s.documentTypeShow}>
-                {metadataParams.documentType && <>
-                  <TypeIcon iconName={metadataMap[metadataParams.documentType || 'book'].iconName || ''} className={s.iconShow} />
-                  {metadataMap[metadataParams.documentType || 'book'].text}
-                  {editStatus && <div className='inline-flex items-center gap-1 ml-1'>
+                : <div className={s.documentTypeShow}>
+                  {metadataParams.documentType && <>
+                    <TypeIcon iconName={metadataMap[metadataParams.documentType || 'book'].iconName || ''} className={s.iconShow} />
+                    {metadataMap[metadataParams.documentType || 'book'].text}
+                    {editStatus && <div className='inline-flex items-center gap-1 ml-1'>
                     ·
-                    <div
-                      onClick={() => { setShowDocTypes(true) }}
-                      className='cursor-pointer hover:text-[#155EEF]'
-                    >
-                      {t('common.operation.change')}
-                    </div>
-                  </div>}
-                </>}
-              </div>
-          }
-          {(!doc_type && showDocTypes) ? null : <Divider />}
-          {showDocTypes ? renderSelectDocType() : renderFieldInfos({ mainField: metadataParams.documentType, canEdit: editStatus })}
-          {/* show fixed fields */}
-          <Divider />
-          {renderFieldInfos({ mainField: 'originInfo', canEdit: false })}
-          <div className={`${s.title} mt-8`}>{metadataMap.technicalParameters.text}</div>
-          <Divider />
-          {renderFieldInfos({ mainField: 'technicalParameters', canEdit: false })}
-        </>
-      )}
+                      <div
+                        onClick={() => { setShowDocTypes(true) }}
+                        className='cursor-pointer hover:text-[#155EEF]'
+                      >
+                        {t('common.operation.change')}
+                      </div>
+                    </div>}
+                  </>}
+                </div>
+            }
+            {(!doc_type && showDocTypes) ? null : <Divider />}
+            {showDocTypes ? renderSelectDocType() : renderFieldInfos({ mainField: metadataParams.documentType, canEdit: editStatus })}
+            {/* show fixed fields */}
+            <Divider />
+            {renderFieldInfos({ mainField: 'originInfo', canEdit: false })}
+            <div className={`${s.title} mt-8`}>{metadataMap.technicalParameters.text}</div>
+            <Divider />
+            {renderFieldInfos({ mainField: 'technicalParameters', canEdit: false })}
+          </>
+        )}
     </div>
   )
 }
diff --git a/web/app/components/datasets/hit-testing/hit-detail.tsx b/web/app/components/datasets/hit-testing/hit-detail.tsx
index 2ad266ab7e..1dfffa5866 100644
--- a/web/app/components/datasets/hit-testing/hit-detail.tsx
+++ b/web/app/components/datasets/hit-testing/hit-detail.tsx
@@ -89,8 +89,8 @@ const HitDetail: FC<IHitDetailProps> = ({ segInfo, vectorInfo }) => {
         <div className={s.keywordWrapper}>
           {!segInfo?.keywords?.length
             ? '-'
-            : segInfo?.keywords?.map((word) => {
-              return <div className={s.keyword}>{word}</div>
+            : segInfo?.keywords?.map((word, index) => {
+              return <div key={index} className={s.keyword}>{word}</div>
             })}
         </div>
       </div>