Merge branch 'main' into feat/plugin-auto-upgrade-fe

web/app/components/base/input-number/index.spec.tsx

@@ -18,7 +18,7 @@ describe('InputNumber Component', () => {
 
   it('renders input with default values', () => {
     render(<InputNumber {...defaultProps} />)
-    const input = screen.getByRole('textbox')
+    const input = screen.getByRole('spinbutton')
     expect(input).toBeInTheDocument()
   })
 
@@ -56,7 +56,7 @@ describe('InputNumber Component', () => {
 
   it('handles direct input changes', () => {
     render(<InputNumber {...defaultProps} />)
-    const input = screen.getByRole('textbox')
+    const input = screen.getByRole('spinbutton')
 
     fireEvent.change(input, { target: { value: '42' } })
     expect(defaultProps.onChange).toHaveBeenCalledWith(42)
@@ -64,7 +64,7 @@ describe('InputNumber Component', () => {
 
   it('handles empty input', () => {
     render(<InputNumber {...defaultProps} value={0} />)
-    const input = screen.getByRole('textbox')
+    const input = screen.getByRole('spinbutton')
 
     fireEvent.change(input, { target: { value: '' } })
     expect(defaultProps.onChange).toHaveBeenCalledWith(undefined)
@@ -72,7 +72,7 @@ describe('InputNumber Component', () => {
 
   it('handles invalid input', () => {
     render(<InputNumber {...defaultProps} />)
-    const input = screen.getByRole('textbox')
+    const input = screen.getByRole('spinbutton')
 
     fireEvent.change(input, { target: { value: 'abc' } })
     expect(defaultProps.onChange).not.toHaveBeenCalled()
@@ -86,7 +86,7 @@ describe('InputNumber Component', () => {
 
   it('disables controls when disabled prop is true', () => {
     render(<InputNumber {...defaultProps} disabled />)
-    const input = screen.getByRole('textbox')
+    const input = screen.getByRole('spinbutton')
     const incrementBtn = screen.getByRole('button', { name: /increment/i })
     const decrementBtn = screen.getByRole('button', { name: /decrement/i })
 

web/app/components/base/input-number/index.tsx

@@ -55,8 +55,8 @@ export const InputNumber: FC<InputNumberProps> = (props) => {
   return <div className={classNames('flex', wrapClassName)}>
     <Input {...rest}
       // disable default controller
-      type='text'
-      className={classNames('rounded-r-none', className)}
+      type='number'
+      className={classNames('no-spinner rounded-r-none', className)}
       value={value}
       max={max}
       min={min}
@@ -77,8 +77,8 @@ export const InputNumber: FC<InputNumberProps> = (props) => {
       size={size}
     />
     <div className={classNames(
-      'flex flex-col bg-components-input-bg-normal rounded-r-md border-l border-divider-subtle text-text-tertiary focus:shadow-xs',
-      disabled && 'opacity-50 cursor-not-allowed',
+      'flex flex-col rounded-r-md border-l border-divider-subtle bg-components-input-bg-normal text-text-tertiary focus:shadow-xs',
+      disabled && 'cursor-not-allowed opacity-50',
       controlWrapClassName)}
     >
       <button

web/app/components/base/select/index.tsx

@@ -1,10 +1,10 @@
 'use client'
 import type { FC } from 'react'
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import { Combobox, ComboboxButton, ComboboxInput, ComboboxOption, ComboboxOptions, Listbox, ListboxButton, ListboxOption, ListboxOptions } from '@headlessui/react'
 import { ChevronDownIcon, ChevronUpIcon, XMarkIcon } from '@heroicons/react/20/solid'
 import Badge from '../badge/index'
-import { RiCheckLine } from '@remixicon/react'
+import { RiCheckLine, RiLoader4Line } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import classNames from '@/utils/classnames'
 import {
@@ -51,6 +51,8 @@ export type ISelectProps = {
     item: Item
     selected: boolean
   }) => React.ReactNode
+  isLoading?: boolean
+  onOpenChange?: (open: boolean) => void
 }
 const Select: FC<ISelectProps> = ({
   className,
@@ -178,17 +180,20 @@ const SimpleSelect: FC<ISelectProps> = ({
   defaultValue = 1,
   disabled = false,
   onSelect,
+  onOpenChange,
   placeholder,
   optionWrapClassName,
   optionClassName,
   hideChecked,
   notClearable,
   renderOption,
+  isLoading = false,
 }) => {
   const { t } = useTranslation()
   const localPlaceholder = placeholder || t('common.placeholder.select')
 
   const [selectedItem, setSelectedItem] = useState<Item | null>(null)
+
   useEffect(() => {
     let defaultSelect = null
     const existed = items.find((item: Item) => item.value === defaultValue)
@@ -199,8 +204,10 @@ const SimpleSelect: FC<ISelectProps> = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [defaultValue])
 
+  const listboxRef = useRef<HTMLDivElement>(null)
+
   return (
-    <Listbox
+    <Listbox ref={listboxRef}
       value={selectedItem}
       onChange={(value: Item) => {
         if (!disabled) {
@@ -212,10 +219,17 @@ const SimpleSelect: FC<ISelectProps> = ({
       <div className={classNames('group/simple-select relative h-9', wrapperClassName)}>
         {renderTrigger && <ListboxButton className='w-full'>{renderTrigger(selectedItem)}</ListboxButton>}
         {!renderTrigger && (
-          <ListboxButton className={classNames(`flex items-center w-full h-full rounded-lg border-0 bg-components-input-bg-normal pl-3 pr-10 sm:text-sm sm:leading-6 focus-visible:outline-none focus-visible:bg-state-base-hover-alt group-hover/simple-select:bg-state-base-hover-alt ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}`, className)}>
+          <ListboxButton onClick={() => {
+              // get data-open, use setTimeout to ensure the attribute is set
+              setTimeout(() => {
+                if (listboxRef.current)
+                  onOpenChange?.(listboxRef.current.getAttribute('data-open') !== null)
+              })
+          }} className={classNames(`flex items-center w-full h-full rounded-lg border-0 bg-components-input-bg-normal pl-3 pr-10 sm:text-sm sm:leading-6 focus-visible:outline-none focus-visible:bg-state-base-hover-alt group-hover/simple-select:bg-state-base-hover-alt ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}`, className)}>
             <span className={classNames('block truncate text-left system-sm-regular text-components-input-text-filled', !selectedItem?.name && 'text-components-input-text-placeholder')}>{selectedItem?.name ?? localPlaceholder}</span>
             <span className="absolute inset-y-0 right-0 flex items-center pr-2">
-              {(selectedItem && !notClearable)
+              {isLoading ? <RiLoader4Line className='h-3.5 w-3.5 animate-spin text-text-secondary' />
+              : (selectedItem && !notClearable)
                 ? (
                   <XMarkIcon
                     onClick={(e) => {
@@ -237,7 +251,7 @@ const SimpleSelect: FC<ISelectProps> = ({
           </ListboxButton>
         )}
 
-        {!disabled && (
+        {(!disabled) && (
           <ListboxOptions className={classNames('absolute z-10 mt-1 px-1 max-h-60 w-full overflow-auto rounded-xl bg-components-panel-bg-blur backdrop-blur-sm py-1 text-base shadow-lg border-components-panel-border border-[0.5px] focus:outline-none sm:text-sm', optionWrapClassName)}>
             {items.map((item: Item) => (
               <ListboxOption

web/app/components/base/tag-input/index.tsx

@@ -1,6 +1,5 @@
-import { useState } from 'react'
+import { useCallback, useState } from 'react'
 import type { ChangeEvent, FC, KeyboardEvent } from 'react'
-import { } from 'use-context-selector'
 import { useTranslation } from 'react-i18next'
 import AutosizeInput from 'react-18-input-autosize'
 import { RiAddLine, RiCloseLine } from '@remixicon/react'
@@ -40,6 +39,29 @@ const TagInput: FC<TagInputProps> = ({
     onChange(copyItems)
   }
 
+  const handleNewTag = useCallback((value: string) => {
+    const valueTrimmed = value.trim()
+    if (!valueTrimmed) {
+      notify({ type: 'error', message: t('datasetDocuments.segment.keywordEmpty') })
+      return
+    }
+
+    if ((items.find(item => item === valueTrimmed))) {
+      notify({ type: 'error', message: t('datasetDocuments.segment.keywordDuplicate') })
+      return
+    }
+
+    if (valueTrimmed.length > 20) {
+      notify({ type: 'error', message: t('datasetDocuments.segment.keywordError') })
+      return
+    }
+
+    onChange([...items, valueTrimmed])
+    setTimeout(() => {
+      setValue('')
+    })
+  }, [items, onChange, notify, t])
+
   const handleKeyDown = (e: KeyboardEvent) => {
     if (isSpecialMode && e.key === 'Enter')
       setValue(`${value}↵`)
@@ -48,24 +70,12 @@ const TagInput: FC<TagInputProps> = ({
       if (isSpecialMode)
         e.preventDefault()
 
-      const valueTrimmed = value.trim()
-      if (!valueTrimmed || (items.find(item => item === valueTrimmed)))
-        return
-
-      if (valueTrimmed.length > 20) {
-        notify({ type: 'error', message: t('datasetDocuments.segment.keywordError') })
-        return
-      }
-
-      onChange([...items, valueTrimmed])
-      setTimeout(() => {
-        setValue('')
-      })
+      handleNewTag(value)
     }
   }
 
   const handleBlur = () => {
-    setValue('')
+    handleNewTag(value)
     setFocused(false)
   }