CI: add TS indentation check via esLint (#24810)

.github/workflows/style.yml

@@ -89,7 +89,9 @@ jobs:
       - name: Web style check
         if: steps.changed-files.outputs.any_changed == 'true'
         working-directory: ./web
-        run: pnpm run lint
+        run: |
+          pnpm run lint
+          pnpm run eslint
 
   docker-compose-template:
     name: Docker Compose Template

web/app/components/app-sidebar/basic.tsx

@@ -46,7 +46,7 @@ const ICON_MAP = {
   dataset: <AppIcon innerIcon={DatasetSvg} className='!border-[0.5px] !border-indigo-100 !bg-indigo-25' />,
   webapp: <div className='rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-blue-brand-blue-brand-500 p-1 shadow-md'>
     <WindowCursor className='h-4 w-4 text-text-primary-on-surface' />
-</div>,
+  </div>,
   notion: <AppIcon innerIcon={NotionSvg} className='!border-[0.5px] !border-indigo-100 !bg-white' />,
 }
 

web/app/components/app-sidebar/index.tsx

@@ -67,7 +67,7 @@ const AppDetailNav = ({ title, desc, isExternal, icon, icon_background, navigati
         <AppSidebarDropdown navigation={navigation} />
       </div>
     )
-}
+  }
 
   return (
     <div

web/app/components/app/configuration/dataset-config/params-config/config-content.tsx

@@ -175,7 +175,6 @@ const ConfigContent: FC<Props> = ({
       ...datasetConfigs,
       reranking_enable: enable,
     })
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currentRerankModel, datasetConfigs, onChange])
 
   return (

web/app/components/base/form/form-scenarios/demo/index.tsx

@@ -24,7 +24,7 @@ const DemoForm = () => {
     },
   })
 
-const name = useStore(form.store, state => state.values.name)
+  const name = useStore(form.store, state => state.values.name)
 
   return (
     <form

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

@@ -61,7 +61,6 @@ const RetrievalParamConfig: FC<Props> = ({
       ...value,
       reranking_enable: enable,
     })
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currentModel, onChange, value])
 
   const rerankModel = useMemo(() => {

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

@@ -29,7 +29,6 @@ const OptionsWrap: FC<Props> = ({
   useEffect(() => {
     if (controlFoldOptions)
       foldHide()
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [controlFoldOptions])
   return (
     <div className={cn(className, !fold ? 'mb-0' : 'mb-3')}>

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

@@ -64,7 +64,6 @@ const Website: FC<Props> = ({
     checkSetApiKey().then(() => {
       setIsLoaded(true)
     })
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
   const handleOnConfig = useCallback(() => {
     setShowAccountSettingModal({

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

@@ -29,7 +29,6 @@ const OptionsWrap: FC<Props> = ({
   useEffect(() => {
     if (controlFoldOptions)
       foldHide()
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [controlFoldOptions])
   return (
     <div className={cn(className, !fold ? 'mb-0' : 'mb-3')}>

web/app/components/datasets/hit-testing/components/chunk-detail-modal.tsx

@@ -69,13 +69,13 @@ const ChunkDetailModal: FC<Props> = ({
             <div>
               <div className='flex gap-x-1'>
                 <div className='w-4 shrink-0 text-[13px] font-medium leading-[20px] text-text-tertiary'>Q</div>
-                <div className={cn('body-md-regular text-text-secondary line-clamp-20')}>
+                <div className={cn('body-md-regular line-clamp-20 text-text-secondary')}>
                   {content}
                 </div>
               </div>
               <div className='flex gap-x-1'>
                 <div className='w-4 shrink-0 text-[13px] font-medium leading-[20px] text-text-tertiary'>A</div>
-                <div className={cn('body-md-regular text-text-secondary line-clamp-20')}>
+                <div className={cn('body-md-regular line-clamp-20 text-text-secondary')}>
                   {answer}
                 </div>
               </div>

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

@@ -28,7 +28,6 @@ const useEditDatasetMetadata = ({
       showEditModal()
       localStorage.removeItem(isShowManageMetadataLocalStorageKey)
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
   const { data: datasetMetaData } = useDatasetMetaData(datasetId)

web/app/components/header/account-setting/data-source-page/data-source-website/index.tsx

@@ -32,7 +32,6 @@ const DataSourceWebsite: FC<Props> = ({ provider }) => {
 
   useEffect(() => {
     checkSetApiKey()
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
   const [configTarget, setConfigTarget] = useState<DataSourceProvider | null>(null)

web/app/components/plugins/install-plugin/install-bundle/item/github-item.tsx

@@ -41,13 +41,10 @@ const Item: FC<Props> = ({
       onFetchedPayload(payload)
       setPayload({ ...payload, from: dependency.type })
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [data])
   useEffect(() => {
     if (error)
       onFetchError()
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [error])
   if (!payload) return <Loading />
   return (

web/app/components/plugins/install-plugin/install-bundle/steps/install-multi.tsx

@@ -131,7 +131,6 @@ const InstallByDSLList: ForwardRefRenderFunction<ExposeRefs, Props> = ({
       if (failedIndex.length > 0)
         setErrorIndexes([...errorIndexes, ...failedIndex])
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isFetchingMarketplaceDataById])
 
   useEffect(() => {
@@ -156,15 +155,12 @@ const InstallByDSLList: ForwardRefRenderFunction<ExposeRefs, Props> = ({
       if (failedIndex.length > 0)
         setErrorIndexes([...errorIndexes, ...failedIndex])
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isFetchingDataByMeta])
 
   useEffect(() => {
     // get info all failed
     if (infoByMetaError || infoByIdError)
       setErrorIndexes([...errorIndexes, ...marketPlaceInDSLIndex])
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [infoByMetaError, infoByIdError])
 
   const isLoadedAllData = (plugins.filter(p => !!p).length + errorIndexes.length) === allPlugins.length
@@ -189,8 +185,6 @@ const InstallByDSLList: ForwardRefRenderFunction<ExposeRefs, Props> = ({
   useEffect(() => {
     if (isLoadedAllData && installedInfo)
       onLoadedAllPlugin(installedInfo!)
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isLoadedAllData, installedInfo])
 
   const handleSelect = useCallback((index: number) => {

web/app/components/plugins/install-plugin/install-from-github/steps/loaded.tsx

@@ -61,7 +61,6 @@ const Loaded: React.FC<LoadedProps> = ({
   useEffect(() => {
     if (hasInstalled && uniqueIdentifier === installedInfoPayload.uniqueIdentifier)
       onInstalled()
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [hasInstalled])
 
   const handleInstall = async () => {

web/app/components/plugins/install-plugin/install-from-local-package/steps/uploading.tsx

@@ -55,7 +55,6 @@ const Uploading: FC<Props> = ({
 
   React.useEffect(() => {
     handleUpload()
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
   return (
     <>

web/app/components/plugins/marketplace/context.tsx

@@ -175,7 +175,6 @@ export const MarketplaceContextProvider = ({
         })
       }
     }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [queryPlugins, queryMarketplaceCollectionsAndPlugins, isSuccess, exclude])
 
   const handleQueryMarketplaceCollectionsAndPlugins = useCallback(() => {

web/app/components/plugins/plugin-item/action.tsx

@@ -98,7 +98,6 @@ const Action: FC<Props> = ({
       hideDeleteConfirm()
       onDelete()
     }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [installationId, onDelete])
   return (
     <div className='flex space-x-1'>

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

@@ -141,7 +141,6 @@ const MCPDetailContent: FC<Props> = ({
   useEffect(() => {
     if (isTriggerAuthorize)
       handleAuthorize()
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
   if (!detail)

web/app/components/tools/utils/to-form-schema.ts

@@ -168,7 +168,7 @@ const getVarKindType = (type: FormTypeEnum) => {
     return VarKindType.constant
   if (type === FormTypeEnum.textInput || type === FormTypeEnum.secretInput)
     return VarKindType.mixed
-  }
+}
 
 export const generateAgentToolValue = (value: Record<string, any>, formSchemas: { variable: string; default?: any; type: string }[], isReasoning = false) => {
   const newValues = {} as any

web/app/components/workflow-app/hooks/use-workflow-init.ts

@@ -83,7 +83,6 @@ export const useWorkflowInit = () => {
 
   useEffect(() => {
     handleGetInitialWorkflowData()
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
   const handleFetchPreloadData = useCallback(async () => {

web/app/components/workflow/block-selector/all-tools.tsx

@@ -101,7 +101,6 @@ const AllTools = ({
         category: PluginType.tool,
       })
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [searchText, tags, enable_marketplace])
 
   const pluginRef = useRef<ListRef>(null)

web/app/components/workflow/block-selector/market-place-plugin/action.tsx

@@ -60,7 +60,6 @@ const OperationDropdown: FC<Props> = ({
       downloadFile({ data: blob, fileName })
       setNeedDownload(false)
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [blob])
   return (
     <PortalToFollowElem

web/app/components/workflow/block-selector/market-place-plugin/list.tsx

@@ -56,7 +56,6 @@ const List = forwardRef<ListRef, ListProps>(({
 
   useEffect(() => {
     handleScroll()
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [list])
 
   const handleHeadClick = () => {

web/app/components/workflow/block-selector/tool/tool.tsx

@@ -122,7 +122,6 @@ const Tool: FC<Props> = ({
     }
     if (!hasSearchText && !isFold)
       setFold(true)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [hasSearchText])
 
   const FoldIcon = isFold ? RiArrowRightSLine : RiArrowDownSLine

web/app/components/workflow/datasets-detail-store/provider.tsx

@@ -40,7 +40,6 @@ const DatasetsDetailProvider: FC<DatasetsDetailProviderProps> = ({
     }, [])
     if (allDatasetIds.length === 0) return
     updateDatasetsDetail(allDatasetIds)
-  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
   return (

web/app/components/workflow/hooks-store/provider.tsx

@@ -22,7 +22,6 @@ export const HooksStoreContextProvider = ({ children, ...restProps }: HooksStore
   useEffect(() => {
     if (storeRef.current && d3Selection && d3Zoom)
       storeRef.current.getState().refreshAll(restProps)
-  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [d3Selection, d3Zoom])
 
   if (!storeRef.current)

web/app/components/workflow/hooks/use-nodes-available-var-list.ts

@@ -37,7 +37,7 @@ const useNodesAvailableVarList = (nodes: Node[], {
 }: Params = {
   onlyLeafNodeVar: false,
   filterVar: () => true,
-  }) => {
+}) => {
   const { getTreeLeafNodes, getBeforeNodesInSameBranchIncludeParent } = useWorkflow()
   const { getNodeAvailableVars } = useWorkflowVariables()
   const isChatMode = useIsChatMode()

web/app/components/workflow/nodes/_base/components/input-support-select-var.tsx

@@ -53,7 +53,6 @@ const Editor: FC<Props> = ({
 
   useEffect(() => {
     onFocusChange?.(isFocus)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isFocus])
 
   return (

web/app/components/workflow/nodes/http/hooks/use-key-value-list.ts

@@ -31,8 +31,6 @@ const useKeyValueList = (value: string, onChange: (value: string) => void, noFil
     const newValue = list.filter(item => item.key && item.value).map(item => `${item.key}:${item.value}`).join('\n')
     if (newValue !== value)
       onChange(newValue)
-
-  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [list, noFilter])
   const addItem = useCallback(() => {
     setList([...list, {

web/app/components/workflow/nodes/http/use-config.ts

@@ -51,7 +51,6 @@ const useConfig = (id: string, payload: HttpNodeType) => {
       setInputs(newInputs)
       setIsDataReady(true)
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [defaultConfig])
 
   const handleMethodChange = useCallback((method: Method) => {

web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-trigger.tsx

@@ -31,7 +31,6 @@ const MetadataTrigger = ({
           handleRemoveCondition(condition.id)
       })
     }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [metadataList, handleRemoveCondition, selectedDatasetsLoaded])
 
   return (

web/app/components/workflow/nodes/knowledge-retrieval/use-config.ts

@@ -172,7 +172,6 @@ const useConfig = (id: string, payload: KnowledgeRetrievalNodeType) => {
       }
     })
     setInputs(newInput)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currentProvider?.provider, currentModel, currentRerankModel, rerankDefaultModel])
   const [selectedDatasets, setSelectedDatasets] = useState<DataSet[]>([])
   const [rerankModelOpen, setRerankModelOpen] = useState(false)
@@ -229,7 +228,6 @@ const useConfig = (id: string, payload: KnowledgeRetrievalNodeType) => {
       setInputs(newInputs)
       setSelectedDatasetsLoaded(true)
     })()
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
   useEffect(() => {
@@ -241,7 +239,6 @@ const useConfig = (id: string, payload: KnowledgeRetrievalNodeType) => {
     setInputs(produce(inputs, (draft) => {
       draft.query_variable_selector = query_variable_selector
     }))
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
   const handleOnDatasetsChange = useCallback((newDatasets: DataSet[]) => {

web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-importer.tsx

@@ -34,7 +34,6 @@ const JsonImporter: FC<JsonImporterProps> = ({
       const rect = importBtnRef.current.getBoundingClientRect()
       updateBtnWidth(rect.width)
     }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
   const handleTrigger = useCallback((e: React.MouseEvent<HTMLElement, MouseEvent>) => {

web/app/components/workflow/nodes/parameter-extractor/use-config.ts

@@ -155,7 +155,6 @@ const useConfig = (id: string, payload: ParameterExtractorNodeType) => {
       return
     setModelChanged(false)
     handleVisionConfigAfterModelChanged()
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isVisionModel, modelChanged])
 
   const {

web/app/components/workflow/nodes/question-classifier/use-config.ts

@@ -88,7 +88,6 @@ const useConfig = (id: string, payload: QuestionClassifierNodeType) => {
       return
     setModelChanged(false)
     handleVisionConfigAfterModelChanged()
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isVisionModel, modelChanged])
 
   const handleQueryVarChange = useCallback((newVar: ValueSelector | string) => {
@@ -110,7 +109,6 @@ const useConfig = (id: string, payload: QuestionClassifierNodeType) => {
         query_variable_selector: inputs.query_variable_selector.length > 0 ? inputs.query_variable_selector : query_variable_selector,
       })
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [defaultConfig])
 
   const handleClassesChange = useCallback((newClasses: any) => {

web/app/components/workflow/nodes/tool/use-config.ts

@@ -140,7 +140,6 @@ const useConfig = (id: string, payload: ToolNodeType) => {
       return
     const inputsWithDefaultValue = formattingParameters()
     setInputs(inputsWithDefaultValue)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currTool])
 
   // setting when call

web/eslint.config.mjs

@@ -193,11 +193,17 @@ export default combine(
       'node/prefer-global/process': 'off',
       'node/prefer-global/buffer': 'off',
       'node/no-callback-literal': 'off',
+      'eslint-comments/no-unused-disable': 'off',
+      'tailwindcss/no-arbitrary-value': 'off',
+      'tailwindcss/classnames-order': 'off',
+      'style/indent': ['error', 2, {
+        SwitchCase: 1,
+        ignoreComments: true,
 
+      }],
       // useful, but big change
       'unicorn/prefer-number-properties': 'warn',
       'unicorn/no-new-array': 'warn',
-      'style/indent': 'off',
     },
   },
   // suppress error for `no-undef` rule

web/package.json

@@ -26,6 +26,7 @@
     "lint": "npx oxlint && pnpm eslint --cache --cache-location node_modules/.cache/eslint/.eslint-cache",
     "lint-only-show-error": "npm oxlint && pnpm eslint --cache --cache-location node_modules/.cache/eslint/.eslint-cache --quiet",
     "fix": "eslint --fix .",
+    "eslint": "eslint --cache --cache-location node_modules/.cache/eslint/.eslint-cache",
     "eslint-fix": "eslint --cache --cache-location node_modules/.cache/eslint/.eslint-cache --fix",
     "eslint-fix-only-show-error": "eslint --cache --cache-location node_modules/.cache/eslint/.eslint-cache --fix --quiet",
     "eslint-complexity": "eslint --rule 'complexity: [error, {max: 15}]' --quiet",