Chore: change query log time range (#28052)

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

web/app/components/base/date-and-time-picker/calendar/index.tsx

@@ -8,9 +8,10 @@ const Calendar: FC<CalendarProps> = ({
   selectedDate,
   onDateClick,
   wrapperClassName,
+  getIsDateDisabled,
 }) => {
   return <div className={wrapperClassName}>
-    <DaysOfWeek/>
+    <DaysOfWeek />
     <div className='grid grid-cols-7 gap-0.5 p-2'>
       {
         days.map(day => <CalendarItem
@@ -18,6 +19,7 @@ const Calendar: FC<CalendarProps> = ({
           day={day}
           selectedDate={selectedDate}
           onClick={onDateClick}
+          isDisabled={getIsDateDisabled ? getIsDateDisabled(day.date) : false}
         />)
       }
     </div>

web/app/components/base/date-and-time-picker/calendar/item.tsx

@@ -7,6 +7,7 @@ const Item: FC<CalendarItemProps> = ({
   day,
   selectedDate,
   onClick,
+  isDisabled,
 }) => {
   const { date, isCurrentMonth } = day
   const isSelected = selectedDate?.isSame(date, 'date')
@@ -14,11 +15,12 @@ const Item: FC<CalendarItemProps> = ({
 
   return (
     <button type="button"
-      onClick={() => onClick(date)}
+      onClick={() => !isDisabled && onClick(date)}
       className={cn(
         'system-sm-medium relative flex items-center justify-center rounded-lg px-1 py-2',
         isCurrentMonth ? 'text-text-secondary' : 'text-text-quaternary hover:text-text-secondary',
         isSelected ? 'system-sm-medium bg-components-button-primary-bg text-components-button-primary-text' : 'hover:bg-state-base-hover',
+        isDisabled && 'cursor-not-allowed text-text-quaternary hover:bg-transparent',
       )}
     >
       {date.date()}

web/app/components/base/date-and-time-picker/date-picker/index.tsx

@@ -36,6 +36,8 @@ const DatePicker = ({
   renderTrigger,
   triggerWrapClassName,
   popupZIndexClassname = 'z-[11]',
+  noConfirm,
+  getIsDateDisabled,
 }: DatePickerProps) => {
   const { t } = useTranslation()
   const [isOpen, setIsOpen] = useState(false)
@@ -120,11 +122,20 @@ const DatePicker = ({
     setCurrentDate(currentDate.clone().subtract(1, 'month'))
   }, [currentDate])
 
+  const handleConfirmDate = useCallback((passedInSelectedDate?: Dayjs) => {
+    // passedInSelectedDate may be a click event when noConfirm is false
+    const nextDate = (dayjs.isDayjs(passedInSelectedDate) ? passedInSelectedDate : selectedDate)
+    onChange(nextDate ? nextDate.tz(timezone) : undefined)
+    setIsOpen(false)
+  }, [selectedDate, onChange, timezone])
+
   const handleDateSelect = useCallback((day: Dayjs) => {
     const newDate = cloneTime(day, selectedDate || getDateWithTimezone({ timezone }))
     setCurrentDate(newDate)
     setSelectedDate(newDate)
-  }, [selectedDate, timezone])
+    if (noConfirm)
+      handleConfirmDate(newDate)
+  }, [selectedDate, timezone, noConfirm, handleConfirmDate])
 
   const handleSelectCurrentDate = () => {
     const newDate = getDateWithTimezone({ timezone })
@@ -134,12 +145,6 @@ const DatePicker = ({
     setIsOpen(false)
   }
 
-  const handleConfirmDate = () => {
-    // debugger
-    onChange(selectedDate ? selectedDate.tz(timezone) : undefined)
-    setIsOpen(false)
-  }
-
   const handleClickTimePicker = () => {
     if (view === ViewType.date) {
       setView(ViewType.time)
@@ -270,6 +275,7 @@ const DatePicker = ({
                 days={days}
                 selectedDate={selectedDate}
                 onDateClick={handleDateSelect}
+                getIsDateDisabled={getIsDateDisabled}
               />
             ) : view === ViewType.yearMonth ? (
               <YearAndMonthPickerOptions
@@ -290,7 +296,7 @@ const DatePicker = ({
 
           {/* Footer */}
           {
-            [ViewType.date, ViewType.time].includes(view) ? (
+            [ViewType.date, ViewType.time].includes(view) && !noConfirm && (
               <DatePickerFooter
                 needTimePicker={needTimePicker}
                 displayTime={displayTime}
@@ -299,7 +305,10 @@ const DatePicker = ({
                 handleSelectCurrentDate={handleSelectCurrentDate}
                 handleConfirmDate={handleConfirmDate}
               />
-            ) : (
+            )
+          }
+          {
+            ![ViewType.date, ViewType.time].includes(view) && (
               <YearAndMonthPickerFooter
                 handleYearMonthCancel={handleYearMonthCancel}
                 handleYearMonthConfirm={handleYearMonthConfirm}

web/app/components/base/date-and-time-picker/types.ts

@@ -30,6 +30,8 @@ export type DatePickerProps = {
   renderTrigger?: (props: TriggerProps) => React.ReactNode
   minuteFilter?: (minutes: string[]) => string[]
   popupZIndexClassname?: string
+  noConfirm?: boolean
+  getIsDateDisabled?: (date: Dayjs) => boolean
 }
 
 export type DatePickerHeaderProps = {
@@ -80,12 +82,14 @@ export type CalendarProps = {
   selectedDate: Dayjs | undefined
   onDateClick: (date: Dayjs) => void
   wrapperClassName?: string
+  getIsDateDisabled?: (date: Dayjs) => boolean
 }
 
 export type CalendarItemProps = {
   day: Day
   selectedDate: Dayjs | undefined
   onClick: (date: Dayjs) => void
+  isDisabled: boolean
 }
 
 export type TimeOptionsProps = {