fix: SimpleSelect chevron icon state sync and add notClearable to monitoring selector (#23858)

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/chart-view.tsx

@@ -54,6 +54,7 @@ export default function ChartView({ appId, headerRight }: IChartViewProps) {
             <SimpleSelect
               items={Object.entries(TIME_PERIOD_MAPPING).map(([k, v]) => ({ value: k, name: t(`appLog.filter.period.${v.name}`) }))}
               className='mt-0 !w-40'
+              notClearable={true}
               onSelect={(item) => {
                 const id = item.value
                 const value = TIME_PERIOD_MAPPING[id]?.value ?? '-1'

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import ChartView from './chartView'
+import ChartView from './chart-view'
 import TracingPanel from './tracing/panel'
 import ApikeyInfoPanel from '@/app/components/app/overview/apikey-info-panel'
 

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

@@ -25,7 +25,7 @@ import type { EnvironmentVariable } from '@/app/components/workflow/types'
 import { fetchWorkflowDraft } from '@/service/workflow'
 import ContentDialog from '@/app/components/base/content-dialog'
 import Button from '@/app/components/base/button'
-import CardView from '@/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/cardView'
+import CardView from '@/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/card-view'
 import Divider from '../base/divider'
 import type { Operation } from './app-operations'
 import AppOperations from './app-operations'

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

@@ -192,7 +192,6 @@ const SimpleSelect: FC<ISelectProps> = ({
   const localPlaceholder = placeholder || t('common.placeholder.select')
 
   const [selectedItem, setSelectedItem] = useState<Item | null>(null)
-  const [open, setOpen] = useState(false)
 
   useEffect(() => {
     let defaultSelect = null
@@ -215,18 +214,12 @@ const SimpleSelect: FC<ISelectProps> = ({
         }
       }}
     >
+      {({ open }) => (
         <div className={classNames('group/simple-select relative h-9', wrapperClassName)}>
           {renderTrigger && <ListboxButton className='w-full'>{renderTrigger(selectedItem)}</ListboxButton>}
           {!renderTrigger && (
             <ListboxButton onClick={() => {
-              // get data-open, use setTimeout to ensure the attribute is set
+                onOpenChange?.(open)
-              setTimeout(() => {
-                if (listboxRef.current) {
-                  const isOpen = listboxRef.current.getAttribute('data-open') !== null
-                  setOpen(isOpen)
-                  onOpenChange?.(isOpen)
-                }
-              })
             }} className={classNames(`flex h-full w-full items-center rounded-lg border-0 bg-components-input-bg-normal pl-3 pr-10 focus-visible:bg-state-base-hover-alt focus-visible:outline-none group-hover/simple-select:bg-state-base-hover-alt sm:text-sm sm:leading-6 ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}`, className)}>
               <span className={classNames('system-sm-regular block truncate text-left 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">
@@ -297,6 +290,7 @@ const SimpleSelect: FC<ISelectProps> = ({
             </ListboxOptions>
           )}
         </div>
+      )}
     </Listbox>
   )
 }