Refactor access tokens to reuse existing DatePicker component (#38054)

* Refactor access tokens to reuse existing DatePicker component

* Clean up

* Clean

* Fixy

apps/studio/components/interfaces/Account/AccessTokens/AccessTokenList.tsx

@@ -163,7 +163,7 @@ export const AccessTokenList = ({ searchString = '', onDeleteSuccess }: AccessTo
                     <Tooltip>
                       <TooltipTrigger>{dayjs(x.last_used_at).format('DD MMM YYYY')}</TooltipTrigger>
                       <TooltipContent side="bottom">
-                        Last used on {dayjs(x.last_used_at).format('DD MMM, YYYY HH:mm')}
+                        Last used on {dayjs(x.last_used_at).format('DD MMM, YYYY HH:mm:ss')}
                       </TooltipContent>
                     </Tooltip>
                   ) : (
@@ -179,7 +179,7 @@ export const AccessTokenList = ({ searchString = '', onDeleteSuccess }: AccessTo
                         <p className="text-foreground-light">Expired</p>
                       </TooltipTrigger>
                       <TooltipContent side="bottom">
-                        Expired on {dayjs(x.expires_at).format('DD MMM, YYYY HH:mm')}
+                        Expired on {dayjs(x.expires_at).format('DD MMM, YYYY HH:mm:ss')}
                       </TooltipContent>
                     </Tooltip>
                   ) : (
@@ -190,7 +190,7 @@ export const AccessTokenList = ({ searchString = '', onDeleteSuccess }: AccessTo
                         </p>
                       </TooltipTrigger>
                       <TooltipContent side="bottom">
-                        Expires on {dayjs(x.expires_at).format('DD MMM, YYYY HH:mm')}
+                        Expires on {dayjs(x.expires_at).format('DD MMM, YYYY HH:mm:ss')}
                       </TooltipContent>
                     </Tooltip>
                   )

apps/studio/components/interfaces/Account/AccessTokens/NewAccessTokenDialog.tsx

@@ -6,6 +6,7 @@ import { type SubmitHandler, useForm } from 'react-hook-form'
 import { toast } from 'sonner'
 import { z } from 'zod'
 
+import { DatePicker } from 'components/ui/DatePicker'
 import { useAccessTokenCreateMutation } from 'data/access-tokens/access-tokens-create-mutation'
 import {
   Button,
@@ -34,7 +35,6 @@ import {
   ExpiresAtOptions,
   NON_EXPIRING_TOKEN_VALUE,
 } from './AccessTokens.constants'
-import { TokenDatePickerValue, TokensDatePicker } from './TokensDatePicker'
 
 const formId = 'new-access-token-form'
 
@@ -59,9 +59,7 @@ export const NewAccessTokenDialog = ({
   onOpenChange,
   onCreateToken,
 }: NewAccessTokenDialogProps) => {
-  const [customExpiryDate, setCustomExpiryDate] = useState<TokenDatePickerValue | undefined>(
-    undefined
-  )
+  const [customExpiryDate, setCustomExpiryDate] = useState<{ date: string } | undefined>(undefined)
   const [isCustomExpiry, setIsCustomExpiry] = useState(false)
 
   const form = useForm<z.infer<typeof TokenSchema>>({
@@ -103,7 +101,7 @@ export const NewAccessTokenDialog = ({
     if (value === CUSTOM_EXPIRY_VALUE) {
       setIsCustomExpiry(true)
       // Set a default custom date (today at 23:59:59)
-      const defaultCustomDate: TokenDatePickerValue = {
+      const defaultCustomDate = {
         date: dayjs().endOf('day').toISOString(),
       }
       setCustomExpiryDate(defaultCustomDate)
@@ -115,7 +113,7 @@ export const NewAccessTokenDialog = ({
     }
   }
 
-  const handleCustomDateChange = (value: TokenDatePickerValue) => {
+  const handleCustomDateChange = (value: { date: string }) => {
     setCustomExpiryDate(value)
   }
 
@@ -212,37 +210,20 @@ export const NewAccessTokenDialog = ({
                         </Select_Shadcn_>
                       </FormControl_Shadcn_>
                       {isCustomExpiry && (
-                        <TokensDatePicker
-                          value={customExpiryDate || { date: '' }}
-                          onSubmit={handleCustomDateChange}
-                          disabled={(date) => {
-                            const today = new Date()
-                            const maxDate = new Date()
-                            maxDate.setDate(today.getDate() + 364) // 364 days instead of 365
-
-                            // Normalize dates to ignore time
-                            const dateOnly = new Date(
-                              date.getFullYear(),
-                              date.getMonth(),
-                              date.getDate()
-                            )
-                            const todayOnly = new Date(
-                              today.getFullYear(),
-                              today.getMonth(),
-                              today.getDate()
-                            )
-                            const maxDateOnly = new Date(
-                              maxDate.getFullYear(),
-                              maxDate.getMonth(),
-                              maxDate.getDate()
-                            )
-
-                            return dateOnly < todayOnly || dateOnly > maxDateOnly
+                        <DatePicker
+                          selectsRange={false}
+                          triggerButtonSize="small"
+                          contentSide="top"
+                          minDate={new Date()}
+                          maxDate={dayjs().add(1, 'year').toDate()}
+                          onChange={(date) => {
+                            if (date.to) handleCustomDateChange({ date: date.to })
                           }}
-                          buttonTriggerProps={{
-                            size: 'small',
-                          }}
-                        />
+                        >
+                          {customExpiryDate
+                            ? `${dayjs(customExpiryDate.date).format('DD MMM, HH:mm')}`
+                            : 'Select date'}
+                        </DatePicker>
                       )}
                     </div>
                     {field.value === NON_EXPIRING_TOKEN_VALUE && (

apps/studio/components/interfaces/Account/AccessTokens/TokensDatePicker.tsx

@@ -1,239 +0,0 @@
-import dayjs from 'dayjs'
-import { ChevronLeft, ChevronRight, Clock } from 'lucide-react'
-import { PropsWithChildren, useEffect, useRef, useState } from 'react'
-import DatePicker from 'react-datepicker'
-
-import { TimeSplitInput } from 'components/ui/DatePicker/TimeSplitInput'
-import {
-  Button,
-  ButtonProps,
-  PopoverContent_Shadcn_,
-  PopoverTrigger_Shadcn_,
-  Popover_Shadcn_,
-} from 'ui'
-
-export type TokenDatePickerValue = {
-  date: string
-}
-
-interface TokensDatePickerProps {
-  value: TokenDatePickerValue
-  buttonTriggerProps?: ButtonProps
-  popoverContentProps?: typeof PopoverContent_Shadcn_
-  onSubmit: (value: TokenDatePickerValue) => void
-  disabled?: (date: Date) => boolean
-}
-
-export const TokensDatePicker = ({
-  value,
-  buttonTriggerProps,
-  popoverContentProps,
-  onSubmit,
-  disabled,
-}: PropsWithChildren<TokensDatePickerProps>) => {
-  const [open, setOpen] = useState(false)
-  const todayButtonRef = useRef<HTMLButtonElement>(null)
-  const timeInputRef = useRef<HTMLDivElement>(null)
-
-  // Reset the state when the popover closes
-  useEffect(() => {
-    if (!open) {
-      const dateToSet = value.date ? new Date(value.date) : new Date()
-      setSelectedDate(dateToSet)
-
-      // If there's an existing value, use its time, otherwise default to 23:59:59
-      if (value.date) {
-        setSelectedTime({
-          HH: dateToSet.getHours().toString().padStart(2, '0'),
-          mm: dateToSet.getMinutes().toString().padStart(2, '0'),
-          ss: dateToSet.getSeconds().toString().padStart(2, '0'),
-        })
-      } else {
-        setSelectedTime({
-          HH: '23',
-          mm: '59',
-          ss: '59',
-        })
-      }
-    }
-  }, [open, value.date])
-
-  // Focus the time input when popover opens
-  useEffect(() => {
-    if (open && timeInputRef.current) {
-      // Small delay to ensure the popover is fully rendered
-      setTimeout(() => {
-        const firstInput = timeInputRef.current?.querySelector('input')
-        if (firstInput) {
-          firstInput.focus()
-        }
-      }, 100)
-    }
-  }, [open])
-
-  // Prevent parent dialog from stealing focus when popover is open
-  useEffect(() => {
-    if (open) {
-      const handleFocusIn = (event: FocusEvent) => {
-        const target = event.target as HTMLElement
-        const popover = timeInputRef.current?.closest('[data-radix-popper-content-wrapper]')
-
-        // If focus is moving outside the popover, prevent it
-        if (popover && !popover.contains(target)) {
-          event.preventDefault()
-          event.stopPropagation()
-
-          // Refocus the first time input
-          const firstInput = timeInputRef.current?.querySelector('input')
-          if (firstInput) {
-            firstInput.focus()
-          }
-        }
-      }
-
-      document.addEventListener('focusin', handleFocusIn, true)
-
-      return () => {
-        document.removeEventListener('focusin', handleFocusIn, true)
-      }
-    }
-  }, [open])
-
-  const [selectedDate, setSelectedDate] = useState<Date | null>(
-    value.date ? new Date(value.date) : new Date()
-  )
-  const [selectedTime, setSelectedTime] = useState(() => {
-    if (value.date) {
-      const date = new Date(value.date)
-      return {
-        HH: date.getHours().toString().padStart(2, '0'),
-        mm: date.getMinutes().toString().padStart(2, '0'),
-        ss: date.getSeconds().toString().padStart(2, '0'),
-      }
-    }
-    return {
-      HH: '23',
-      mm: '59',
-      ss: '59',
-    }
-  })
-
-  function handleDatePickerChange(date: Date | null) {
-    setSelectedDate(date)
-  }
-
-  function handleApply() {
-    if (!selectedDate) return
-
-    // Add Time to the date
-    const finalDate = new Date(
-      selectedDate.setHours(+selectedTime.HH, +selectedTime.mm, +selectedTime.ss)
-    )
-
-    onSubmit({
-      date: finalDate.toISOString(),
-    })
-
-    setOpen(false)
-  }
-
-  return (
-    <Popover_Shadcn_ open={open} onOpenChange={setOpen} modal={true}>
-      <PopoverTrigger_Shadcn_ asChild>
-        <Button type="default" icon={<Clock />} {...buttonTriggerProps}>
-          {selectedDate ? `${dayjs(selectedDate).format('DD MMM, HH:mm')}` : 'Select date'}
-        </Button>
-      </PopoverTrigger_Shadcn_>
-      <PopoverContent_Shadcn_
-        className="flex w-auto p-0 z-50"
-        side="bottom"
-        align="end"
-        portal={true}
-        {...popoverContentProps}
-      >
-        <div>
-          <div className="flex p-2 gap-2 items-center">
-            <div ref={timeInputRef} className="flex flex-grow *:flex-grow gap-2 font-mono">
-              <TimeSplitInput
-                type="start"
-                startTime={selectedTime}
-                endTime={selectedTime}
-                time={selectedTime}
-                setTime={setSelectedTime}
-                setStartTime={setSelectedTime}
-                setEndTime={setSelectedTime}
-                startDate={selectedDate}
-                endDate={selectedDate}
-              />
-            </div>
-          </div>
-          <div className="p-2 border-t">
-            <DatePicker
-              inline
-              selected={selectedDate}
-              onChange={handleDatePickerChange}
-              dateFormat="MMMM d, yyyy h:mm aa"
-              dayClassName={() => 'cursor-pointer hover:bg-accent'}
-              filterDate={(date) => {
-                if (!disabled) return true
-                return !disabled(date)
-              }}
-              todayButton={
-                <div className="sr-only">
-                  <Button type="text" size="tiny" ref={todayButtonRef}>
-                    Go to today
-                  </Button>
-                </div>
-              }
-              renderCustomHeader={({
-                date,
-                decreaseMonth,
-                increaseMonth,
-                prevMonthButtonDisabled,
-                nextMonthButtonDisabled,
-              }) => (
-                <div className="flex items-center justify-between">
-                  <div className="flex w-full items-center justify-between">
-                    <Button
-                      onClick={decreaseMonth}
-                      disabled={prevMonthButtonDisabled}
-                      icon={<ChevronLeft size={14} strokeWidth={2} />}
-                      type="text"
-                      size="tiny"
-                      className="px-1.5"
-                    />
-                    <span className="text-sm text-foreground-light">
-                      {dayjs(date).format('MMMM YYYY')}
-                    </span>
-                    <Button
-                      onClick={increaseMonth}
-                      disabled={nextMonthButtonDisabled}
-                      icon={<ChevronRight size={14} strokeWidth={2} />}
-                      type="text"
-                      size="tiny"
-                      className="px-1.5"
-                    />
-                  </div>
-                </div>
-              )}
-            />
-          </div>
-          <div className="flex items-center justify-end gap-2 p-2 border-t">
-            <Button
-              type="default"
-              onClick={() => {
-                if (todayButtonRef.current) {
-                  todayButtonRef.current.click()
-                }
-                setSelectedDate(new Date())
-              }}
-            >
-              Today
-            </Button>
-            <Button onClick={handleApply}>Apply</Button>
-          </div>
-        </div>
-      </PopoverContent_Shadcn_>
-    </Popover_Shadcn_>
-  )
-}

apps/studio/components/interfaces/Account/NewAccessTokenButton.tsx

@@ -1,220 +0,0 @@
-import { zodResolver } from '@hookform/resolvers/zod'
-import { ChevronDown, ExternalLink } from 'lucide-react'
-import { useState } from 'react'
-import { type SubmitHandler, useForm } from 'react-hook-form'
-import { toast } from 'sonner'
-import { z } from 'zod'
-
-import { useAccessTokenCreateMutation } from 'data/access-tokens/access-tokens-create-mutation'
-import {
-  Button,
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogSection,
-  DialogSectionSeparator,
-  DialogTitle,
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-  Form_Shadcn_,
-  FormControl_Shadcn_,
-  FormField_Shadcn_,
-  Input_Shadcn_,
-  Select_Shadcn_,
-  SelectContent_Shadcn_,
-  SelectItem_Shadcn_,
-  SelectTrigger_Shadcn_,
-  SelectValue_Shadcn_,
-} from 'ui'
-import { Admonition } from 'ui-patterns'
-import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
-import { ExpiresAtOptions, NON_EXPIRING_TOKEN_VALUE } from './AccessTokens/AccessTokens.constants'
-
-export interface NewAccessTokenButtonProps {
-  onCreateToken: (token: any) => void
-}
-
-const TokenSchema = z.object({
-  tokenName: z.string().min(1, 'Please enter a name for the token'),
-  expiresAt: z.preprocess(
-    (val) => (val === NON_EXPIRING_TOKEN_VALUE ? undefined : val),
-    z.string().datetime().optional()
-  ),
-})
-
-const formId = 'new-access-token-form'
-
-export const NewAccessTokenButton = ({ onCreateToken }: NewAccessTokenButtonProps) => {
-  const [visible, setVisible] = useState(false)
-  const [tokenScope, setTokenScope] = useState<'V0' | undefined>(undefined)
-
-  const form = useForm<z.infer<typeof TokenSchema>>({
-    resolver: zodResolver(TokenSchema),
-    defaultValues: { tokenName: '', expiresAt: ExpiresAtOptions['month'].value },
-    mode: 'onSubmit',
-  })
-  const { mutate: createAccessToken, isLoading } = useAccessTokenCreateMutation()
-
-  const onSubmit: SubmitHandler<z.infer<typeof TokenSchema>> = async (values) => {
-    createAccessToken(
-      { name: values.tokenName, scope: tokenScope, expires_at: values.expiresAt },
-      {
-        onSuccess: (data) => {
-          toast.success(`Your access token "${data.name}" is ready.`)
-          form.reset()
-          onCreateToken(data)
-          setVisible(false)
-        },
-      }
-    )
-  }
-
-  return (
-    <>
-      <div className="flex items-center">
-        <Button
-          className="rounded-r-none px-3"
-          onClick={() => {
-            setTokenScope(undefined)
-            setVisible(true)
-          }}
-        >
-          Generate new token
-        </Button>
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button
-              type="primary"
-              title="Choose token scope"
-              className="rounded-l-none px-[4px] py-[5px]"
-              icon={<ChevronDown />}
-            />
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end" side="bottom">
-            <DropdownMenuItem
-              key="experimental-token"
-              onClick={() => {
-                setTokenScope('V0')
-                setVisible(true)
-              }}
-            >
-              Generate token for experimental API
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
-
-      <Dialog
-        open={visible}
-        onOpenChange={(open) => {
-          if (!open) form.reset()
-          setVisible(open)
-        }}
-      >
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>
-              {tokenScope === 'V0' ? 'Generate token for experimental API' : 'Generate New Token'}
-            </DialogTitle>
-          </DialogHeader>
-          <DialogSectionSeparator />
-          <DialogSection className="flex flex-col gap-4">
-            {tokenScope === 'V0' && (
-              <Admonition
-                type="warning"
-                title="The experimental API provides additional endpoints which allows you to manage your organizations and projects."
-                description={
-                  <>
-                    <p>
-                      These include deleting organizations and projects which cannot be undone. As
-                      such, be very careful when using this API.
-                    </p>
-                    <div className="mt-4">
-                      <Button asChild type="default" icon={<ExternalLink />}>
-                        <a href="https://api.supabase.com/api/v0" target="_blank" rel="noreferrer">
-                          Experimental API documentation
-                        </a>
-                      </Button>
-                    </div>
-                  </>
-                }
-              />
-            )}
-            <Form_Shadcn_ {...form}>
-              <form
-                id={formId}
-                className="flex flex-col gap-4"
-                onSubmit={form.handleSubmit(onSubmit)}
-              >
-                <FormField_Shadcn_
-                  key="tokenName"
-                  name="tokenName"
-                  control={form.control}
-                  render={({ field }) => (
-                    <FormItemLayout name="tokenName" label="Name">
-                      <FormControl_Shadcn_>
-                        <Input_Shadcn_
-                          id="tokenName"
-                          {...field}
-                          placeholder="Provide a name for your token"
-                        />
-                      </FormControl_Shadcn_>
-                    </FormItemLayout>
-                  )}
-                />
-                <FormField_Shadcn_
-                  key="expiresAt"
-                  name="expiresAt"
-                  control={form.control}
-                  render={({ field }) => (
-                    <FormItemLayout name="expiresAt" label="Expires at">
-                      <FormControl_Shadcn_>
-                        <Select_Shadcn_ value={field.value} onValueChange={field.onChange}>
-                          <SelectTrigger_Shadcn_>
-                            <SelectValue_Shadcn_ placeholder="Expires at" />
-                          </SelectTrigger_Shadcn_>
-                          <SelectContent_Shadcn_>
-                            {Object.values(ExpiresAtOptions).map((option) => (
-                              <SelectItem_Shadcn_ key={option.value} value={option.value}>
-                                {option.label}
-                              </SelectItem_Shadcn_>
-                            ))}
-                          </SelectContent_Shadcn_>
-                        </Select_Shadcn_>
-                      </FormControl_Shadcn_>
-                      {field.value === NON_EXPIRING_TOKEN_VALUE && (
-                        <Admonition
-                          type="warning"
-                          title="Make sure to keep your non-expiring token safe and secure."
-                          className="mt-6 w-full"
-                        />
-                      )}
-                    </FormItemLayout>
-                  )}
-                />
-              </form>
-            </Form_Shadcn_>
-          </DialogSection>
-          <DialogFooter>
-            <Button
-              type="default"
-              disabled={isLoading}
-              onClick={() => {
-                form.reset()
-                setVisible(false)
-              }}
-            >
-              Cancel
-            </Button>
-            <Button form={formId} htmlType="submit" loading={isLoading}>
-              Generate token
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    </>
-  )
-}

apps/studio/components/ui/DatePicker/DatePicker.tsx

@@ -1,7 +1,7 @@
 import { format } from 'date-fns'
 import dayjs from 'dayjs'
 import { ArrowRight, Calendar, ChevronLeft, ChevronRight } from 'lucide-react'
-import React, { useEffect, useState } from 'react'
+import { ReactNode, useEffect, useState } from 'react'
 import ReactDatePicker from 'react-datepicker'
 
 import type { DatePickerToFrom } from 'components/interfaces/Settings/Logs/Logs.types'
@@ -22,13 +22,15 @@ export interface DatePickerProps {
   triggerButtonType?: ButtonProps['type']
   triggerButtonClassName?: string
   triggerButtonTitle?: string
+  triggerButtonSize?: 'tiny' | 'small'
+  contentSide?: 'bottom' | 'top'
   minDate?: Date
   maxDate?: Date
   hideTime?: boolean
   hideClear?: boolean
   selectsRange?: boolean
-  renderFooter?: (args: DatePickerToFrom) => React.ReactNode | void
-  children?: React.ReactNode | React.ReactNode[] | null
+  renderFooter?: (args: DatePickerToFrom) => ReactNode | void
+  children?: ReactNode | ReactNode[] | null
 }
 
 const START_DATE_DEFAULT = new Date()
@@ -37,13 +39,15 @@ const END_DATE_DEFAULT = new Date()
 const START_TIME_DEFAULT = { HH: '00', mm: '00', ss: '00' }
 const END_TIME_DEFAULT = { HH: '23', mm: '59', ss: '59' }
 
-function DatePicker({
+export function DatePicker({
   to,
   from,
   onChange,
   triggerButtonType = 'default',
   triggerButtonClassName = '',
   triggerButtonTitle,
+  triggerButtonSize,
+  contentSide = 'bottom',
   minDate,
   maxDate,
   hideTime = false,
@@ -147,6 +151,7 @@ function DatePicker({
           title={triggerButtonTitle}
           type={triggerButtonType}
           icon={<Calendar />}
+          size={triggerButtonSize}
           className={triggerButtonClassName}
         >
           {children !== undefined ? (
@@ -171,14 +176,14 @@ function DatePicker({
           )}
         </Button>
       </PopoverTrigger_Shadcn_>
-      <PopoverContent_Shadcn_ align="center" side="bottom" className="p-0">
+      <PopoverContent_Shadcn_ align="center" side={contentSide} className="p-0">
         <>
           {hideTime ? null : (
             <>
-              <div className="flex items-stretch justify-between py-2">
+              <div className="flex items-stretch justify-between p-2">
                 {!selectsRange ? null : (
                   <>
-                    <div className="flex grow flex-col gap-1 pl-2">
+                    <div className="flex grow flex-col gap-1">
                       <TimeSplitInput
                         type="start"
                         startTime={startTime}
@@ -191,20 +196,12 @@ function DatePicker({
                         endDate={endDate}
                       />
                     </div>
-                    <div
-                      className={`
-                      flex 
-                      w-12 
-                      items-center 
-                      justify-center
-                      text-foreground-lighter
-                    `}
-                    >
+                    <div className="flex items-center justify-center w-12 text-foreground-lighter">
                       <ArrowRight strokeWidth={1.5} size={14} />
                     </div>
                   </>
                 )}
-                <div className="flex grow flex-col gap-1 pr-2">
+                <div className="flex grow flex-col gap-1">
                   <TimeSplitInput
                     type="end"
                     startTime={startTime}

apps/studio/pages/account/tokens.tsx

@@ -1,5 +1,6 @@
 import { ExternalLink, Search } from 'lucide-react'
 import { useState } from 'react'
+
 import { AccessTokenList } from 'components/interfaces/Account/AccessTokens/AccessTokenList'
 import { NewAccessTokenButton } from 'components/interfaces/Account/AccessTokens/NewAccessTokenButton'
 import { NewTokenBanner } from 'components/interfaces/Account/AccessTokens/NewTokenBanner'