Implement updated UI for PITR backups, midway refining components, validation

studio/components/interfaces/Database/Backups/PITR/PITR.types.ts

@@ -0,0 +1,14 @@
+export interface Timezone {
+  value: string
+  abbr: string
+  offset: number
+  isdst: boolean
+  text: string
+  utc: string[]
+}
+
+export interface Time {
+  h: string
+  m: string
+  s: string
+}

studio/components/interfaces/Database/Backups/PITR/PITR.utils.ts

@@ -0,0 +1,31 @@
+import dayjs from 'dayjs'
+import { ALL_TIMEZONES } from './PITR.constants'
+import { Timezone } from './PITR.types'
+
+export const getClientTimezone = () => {
+  const defaultTz = dayjs.tz.guess()
+  const timezone = ALL_TIMEZONES.find((option) => {
+    if (option.utc.includes(defaultTz)) return option
+    else return undefined
+  })
+  return timezone ?? ALL_TIMEZONES[0]
+}
+
+export const checkMatchingDates = (selectedDate: Date | undefined, targetDate: Date) => {
+  if (!selectedDate) return false
+
+  const formattedSelectedDate = new Date(selectedDate.getTime())
+  formattedSelectedDate.setHours(0, 0, 0, 0)
+
+  const formattedTargetDate = new Date(targetDate.getTime())
+  formattedTargetDate.setHours(0, 0, 0, 0)
+
+  return Number(formattedSelectedDate) === Number(formattedTargetDate)
+}
+
+export const formatNumberToTwoDigits = (number: Number) => {
+  return number.toLocaleString('en-US', {
+    minimumIntegerDigits: 2,
+    useGrouping: false,
+  })
+}

studio/components/interfaces/Database/Backups/PITR/PITRNotice.tsx

@@ -0,0 +1,35 @@
+import { Button, IconCalendar, IconClock } from '@supabase/ui'
+import { FormPanel } from 'components/ui/Forms'
+
+const PITRNotice = ({}) => {
+  return (
+    <FormPanel
+      disabled={true}
+      footer={
+        <div className="flex items-center justify-between p-6">
+          <span className="text-scale-1000 text-sm">
+            Recovery retention period can be increase by upgrading
+          </span>
+          <Button type="default" icon={<IconClock strokeWidth={2} />}>
+            Increase backup retention
+          </Button>
+        </div>
+      }
+    >
+      <div className="p-6 flex space-x-6">
+        <div className="h-10 w-10 rounded flex items-center justify-center bg-scale-700">
+          <IconCalendar strokeWidth={2} />
+        </div>
+        <div className="space-y-2">
+          <p className="text-sm">Recovery retention period</p>
+          <p className="text-sm text-scale-1100">
+            Database changes are logged every <span className="text-scale-1200">2 minutes</span>,
+            with a total recovery period of up to <span className="text-scale-1200">7 days</span>.
+          </p>
+        </div>
+      </div>
+    </FormPanel>
+  )
+}
+
+export default PITRNotice

studio/components/interfaces/Database/Backups/PITR/PITRSelection.tsx

@@ -0,0 +1,326 @@
+import dayjs from 'dayjs'
+import DatePicker from 'react-datepicker'
+import { useState } from 'react'
+import { format } from 'date-fns'
+import { observer } from 'mobx-react-lite'
+import {
+  Button,
+  Modal,
+  IconChevronLeft,
+  IconChevronRight,
+  IconHelpCircle,
+  IconDatabase,
+} from '@supabase/ui'
+
+import { useStore } from 'hooks'
+
+import { Time } from './PITR.types'
+import { getClientTimezone, checkMatchingDates, formatNumberToTwoDigits } from './PITR.utils'
+import PITRStatus from './PITRStatus'
+import TimeInput from './TimeInput'
+import TimezoneSelection from './TimezoneSelection'
+import { FormHeader, FormPanel } from 'components/ui/Forms'
+import InformationBox from 'components/ui/InformationBox'
+
+// [Joshen TODO] Remaining todos:
+// - Need to validate the selectedDate against earliest and latest here to disable the review restore details button
+// - Refine messaging in confirmation modal
+// - Actually hook up the BE API, please ensure that the unix timestamp getting sent is correct
+// - Highlight available dates in the calendar and add a legend
+// - Just need to check in thereafter with Jonny if the changes are okay
+// - Deprecate old PITR components
+
+const PITRSelection = ({}) => {
+  const { backups } = useStore()
+  const { earliestPhysicalBackupDateUnix, latestPhysicalBackupDateUnix } =
+    backups?.configuration?.physicalBackupData ?? {}
+
+  const [selectedDate, setSelectedDate] = useState<Date>()
+  const [selectedTimezone, setSelectedTimezone] = useState(getClientTimezone())
+  const [showConfiguration, setShowConfiguration] = useState(false)
+  const [showConfirmation, setShowConfirmation] = useState(false)
+
+  const formattedSelectedDate = dayjs.unix(Number(selectedDate) / 1000)
+  // Should only convert to timezone at when confirming
+  // const formattedSelectedDate = dayjs.unix(Number(selectedDate) / 1000).tz(selectedTimezone?.utc[0])
+
+  const earliestAvailableBackup = new Date(earliestPhysicalBackupDateUnix * 1000)
+  const earliestAvailableTiming = dayjs(earliestAvailableBackup).tz(selectedTimezone?.utc[0])
+
+  const latestAvailableBackup = new Date(latestPhysicalBackupDateUnix * 1000)
+  const latestAvailableTiming = dayjs(latestAvailableBackup).tz(selectedTimezone?.utc[0])
+
+  const isSelectedOnEarliest = checkMatchingDates(selectedDate, earliestAvailableBackup)
+  const isSelectedOnLatest = checkMatchingDates(selectedDate, latestAvailableBackup)
+
+  const formattedSelectedTiming =
+    selectedDate !== undefined
+      ? {
+          h: formatNumberToTwoDigits(selectedDate.getHours()),
+          m: formatNumberToTwoDigits(selectedDate.getMinutes()),
+          s: formatNumberToTwoDigits(selectedDate.getSeconds()),
+        }
+      : undefined
+
+  const formattedEarliestTiming = isSelectedOnEarliest
+    ? {
+        h: formatNumberToTwoDigits(earliestAvailableTiming.hour()),
+        m: formatNumberToTwoDigits(earliestAvailableTiming.minute()),
+        s: formatNumberToTwoDigits(earliestAvailableTiming.second()),
+      }
+    : undefined
+
+  const formattedLatestTiming = isSelectedOnLatest
+    ? {
+        h: formatNumberToTwoDigits(latestAvailableTiming.hour()),
+        m: formatNumberToTwoDigits(latestAvailableTiming.minute()),
+        s: formatNumberToTwoDigits(latestAvailableTiming.second()),
+      }
+    : undefined
+
+  const onCancel = () => {
+    setSelectedDate(undefined)
+    setSelectedTimezone(getClientTimezone())
+    setShowConfiguration(false)
+  }
+
+  const onUpdateDate = (date: Date) => {
+    const isSelectedOnEarliest = checkMatchingDates(date, earliestAvailableBackup)
+    const isSelectedOnLatest = checkMatchingDates(selectedDate, latestAvailableBackup)
+
+    if (isSelectedOnEarliest) {
+      date.setHours(
+        earliestAvailableTiming.hour(),
+        earliestAvailableTiming.minute(),
+        earliestAvailableTiming.second(),
+        0
+      )
+    } else if (isSelectedOnLatest) {
+      date.setHours(
+        latestAvailableTiming.hour(),
+        latestAvailableTiming.minute(),
+        latestAvailableTiming.second(),
+        0
+      )
+    } else {
+      date.setHours(0, 0, 0, 0)
+    }
+
+    setSelectedDate(date)
+  }
+
+  const onUpdateTime = (time: Time) => {
+    if (!selectedDate) return
+    const updatedDate = new Date(Number(selectedDate))
+    updatedDate.setHours(Number(time.h))
+    updatedDate.setMinutes(Number(time.m))
+    updatedDate.setSeconds(Number(time.s))
+    setSelectedDate(updatedDate)
+  }
+
+  return (
+    <>
+      <FormHeader
+        title="Restore your database from a backup"
+        description="Database changes are watched and recorded, so that you can restore your database to any point in time"
+      />
+      {!showConfiguration ? (
+        <PITRStatus onSetConfiguration={() => setShowConfiguration(true)} />
+      ) : (
+        <FormPanel
+          disabled={true}
+          footer={
+            <div className="flex items-center justify-end gap-3 p-6">
+              <Button type="default" onClick={onCancel}>
+                Cancel
+              </Button>
+              <Button type="warning" onClick={() => setShowConfirmation(true)}>
+                Review restore details
+              </Button>
+            </div>
+          }
+        >
+          <div className="flex justify-between px-10 py-6 space-x-10">
+            <div className="w-1/3 space-y-2">
+              {/* Highlight the available dates better */}
+              <DatePicker
+                inline
+                selected={selectedDate}
+                onChange={onUpdateDate}
+                dayClassName={() => 'cursor-pointer'}
+                minDate={earliestAvailableBackup}
+                maxDate={latestAvailableBackup}
+                // highlightDates={[new Date()]}
+                renderCustomHeader={({
+                  date,
+                  decreaseMonth,
+                  increaseMonth,
+                  prevMonthButtonDisabled,
+                  nextMonthButtonDisabled,
+                }) => (
+                  <div className="flex items-center justify-between px-2 py-2">
+                    <div className="flex w-full items-center justify-between">
+                      <button
+                        onClick={decreaseMonth}
+                        disabled={prevMonthButtonDisabled}
+                        type="button"
+                        className={`
+                            ${prevMonthButtonDisabled && 'cursor-not-allowed opacity-50'}
+                            text-scale-1100 hover:text-scale-1200 focus:outline-none
+                        `}
+                      >
+                        <IconChevronLeft size={16} strokeWidth={2} />
+                      </button>
+                      <span className="text-scale-1100 text-sm">{format(date, 'MMMM yyyy')}</span>
+                      <button
+                        onClick={increaseMonth}
+                        disabled={nextMonthButtonDisabled}
+                        type="button"
+                        className={`
+                            ${nextMonthButtonDisabled && 'cursor-not-allowed opacity-50'}
+                            text-scale-1100 hover:text-scale-1200 focus:outline-none
+                        `}
+                      >
+                        <IconChevronRight size={16} strokeWidth={2} />
+                      </button>
+                    </div>
+                  </div>
+                )}
+              />
+            </div>
+            <div className="w-2/3">
+              {!selectedDate ? (
+                <div className="h-full flex items-center justify-center">
+                  <div className="mx-2">
+                    <InformationBox
+                      defaultVisibility
+                      hideCollapse
+                      icon={<IconHelpCircle strokeWidth={2} />}
+                      title="Select a date which you'd like to restore your database to"
+                    />
+                  </div>
+                </div>
+              ) : (
+                <div className="space-y-8 py-2">
+                  <div className="space-y-1">
+                    <p className="text-sm text-scale-1100">Restore database to</p>
+                    <p className="text-3xl">
+                      {formattedSelectedDate.format('DD MMM YYYY, HH:mm:ss')}
+                    </p>
+                  </div>
+                  <div className="space-y-2">
+                    <p className="text-sm text-scale-1100">Time of recovery</p>
+                    <div className="w-[310px]">
+                      <TimezoneSelection
+                        hideLabel
+                        dropdownWidth="w-[350px]"
+                        selectedTimezone={selectedTimezone}
+                        onSelectTimezone={setSelectedTimezone}
+                      />
+                    </div>
+
+                    <TimeInput
+                      defaultTime={formattedSelectedTiming}
+                      minimumTime={formattedEarliestTiming}
+                      maximumTime={formattedLatestTiming}
+                      onChange={onUpdateTime}
+                    />
+
+                    <div className="!mt-4 space-y-1">
+                      {isSelectedOnEarliest && (
+                        <p className="text-sm text-scale-1000">
+                          Earliest available backup on this date is at{' '}
+                          {earliestAvailableTiming.format('HH:mm:ss')}
+                        </p>
+                      )}
+                      {isSelectedOnLatest && (
+                        <p className="text-sm text-scale-1000">
+                          Latest available backup on this date is at{' '}
+                          {latestAvailableTiming.format('HH:mm:ss')}
+                        </p>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        </FormPanel>
+      )}
+      <Modal
+        closable
+        size="medium"
+        visible={showConfirmation}
+        onCancel={() => setShowConfirmation(false)}
+        customFooter={
+          <div className="flex items-center justify-end space-x-2">
+            <Button type="default" onClick={() => setShowConfirmation(false)}>
+              Cancel
+            </Button>
+            <Button type="warning" onClick={() => setShowConfirmation(false)}>
+              I understand, begin restore
+            </Button>
+          </div>
+        }
+      >
+        <div className="space-y-4 py-3">
+          <Modal.Content>
+            <p>Point in time recovery review</p>
+          </Modal.Content>
+          <Modal.Seperator />
+          <Modal.Content>
+            <div className="py-2 space-y-1">
+              <p className="text-sm text-scale-1100"> Your database will be restored to</p>
+              <p className="text-2xl">{formattedSelectedDate.format('DD MMM YYYY, HH:mm:ss')}</p>
+              <p className="text-lg">{selectedTimezone?.text}</p>
+            </div>
+          </Modal.Content>
+          <Modal.Seperator />
+          <Modal.Content>
+            <div className="py-2 space-y-3">
+              <p className="text-sm text-scale-1100">
+                Any changes made to your database up to this point of time will be lost. This
+                includes any changes involving storage and authentication.
+              </p>
+              <p className="text-sm text-scale-1100">
+                The restoration process will incur some downtime to your project and cannot be
+                undone.
+              </p>
+              {/* <div className="flex space-x-5">
+                <div className="w-10 h-10 rounded bg-scale-1200">
+                  <IconDatabase strokeWidth={2} />
+                </div>
+                <div>
+                  <p className="text-sm">Potential loss of recent data</p>
+                  <p className="text-sm text-scale-1100">
+                    Any database changes being made currently could be lost.
+                  </p>
+                </div>
+              </div>
+              <div className="flex space-x-5">
+                <div className="w-10 h-10 rounded bg-scale-1200" />
+                <div>
+                  <p className="text-sm">Potential loss of new users</p>
+                  <p className="text-sm text-scale-1100">
+                    Users that recently signed up to your project could be lost.
+                  </p>
+                </div>
+              </div>
+              <div className="flex space-x-5">
+                <div className="w-10 h-10 rounded bg-scale-1200" />
+                <div>
+                  <p className="text-sm">Potential loss of storage files</p>
+                  <p className="text-sm text-scale-1100">
+                    Any files recently uploaded to your storage could be lost.
+                  </p>
+                </div>
+              </div> */}
+            </div>
+          </Modal.Content>
+        </div>
+      </Modal>
+    </>
+  )
+}
+
+export default observer(PITRSelection)

studio/components/interfaces/Database/Backups/PITR/PITRStatus.tsx

@@ -0,0 +1,72 @@
+import dayjs from 'dayjs'
+import { FC, useState } from 'react'
+import { observer } from 'mobx-react-lite'
+import { Button, IconAlertCircle } from '@supabase/ui'
+
+import { useStore } from 'hooks'
+import { getClientTimezone } from './PITR.utils'
+import { FormHeader, FormPanel } from 'components/ui/Forms'
+import TimezoneSelection from './TimezoneSelection'
+
+interface Props {
+  onSetConfiguration: () => void
+}
+
+const PITRStatus: FC<Props> = ({ onSetConfiguration }) => {
+  const { backups } = useStore()
+  const { earliestPhysicalBackupDateUnix, latestPhysicalBackupDateUnix } =
+    backups?.configuration?.physicalBackupData ?? {}
+
+  const [selectedTimezone, setSelectedTimezone] = useState<any>(getClientTimezone())
+
+  const earliestAvailableBackup = dayjs
+    .unix(earliestPhysicalBackupDateUnix)
+    .tz(selectedTimezone?.utc[0])
+    .format('DD MMM YYYY, HH:mm:ss')
+
+  const latestAvailableBackup = dayjs
+    .unix(latestPhysicalBackupDateUnix)
+    .tz(selectedTimezone?.utc[0])
+    .format('DD MMM YYYY, HH:mm:ss')
+
+  return (
+    <>
+      <FormPanel
+        disabled={true}
+        footer={
+          <div className="flex items-center justify-between p-6">
+            <div className="flex items-center space-x-4">
+              <IconAlertCircle className="text-scale-1100" size={18} strokeWidth={1.5} />
+              <span className="text-scale-1000 text-sm">
+                You'll be able to pick the right date and time when you begin
+              </span>
+            </div>
+            <Button onClick={() => onSetConfiguration()}>Start a restore</Button>
+          </div>
+        }
+      >
+        <div className="p-6 space-y-6">
+          <div className="w-[350px]">
+            <TimezoneSelection
+              hideLabel
+              selectedTimezone={selectedTimezone}
+              onSelectTimezone={setSelectedTimezone}
+            />
+          </div>
+          <div className="flex items-center space-x-20">
+            <div className="space-y-2">
+              <p className="text-sm text-scale-1100">Database restore available from</p>
+              <p className="text-2xl">{earliestAvailableBackup}</p>
+            </div>
+            <div className="space-y-2">
+              <p className="text-sm text-scale-1100">Latest restore available at</p>
+              <p className="text-2xl">{latestAvailableBackup}</p>
+            </div>
+          </div>
+        </div>
+      </FormPanel>
+    </>
+  )
+}
+
+export default observer(PITRStatus)

studio/components/interfaces/Database/Backups/PITR/TimeInput.tsx

@@ -0,0 +1,185 @@
+import dayjs from 'dayjs'
+import { isNaN } from 'lodash'
+import { ChangeEvent, FC, useEffect, useState } from 'react'
+import * as Tooltip from '@radix-ui/react-tooltip'
+import { IconClock } from '@supabase/ui'
+
+import { Time } from './PITR.types'
+import { formatNumberToTwoDigits } from './PITR.utils'
+
+// [Joshen] This is trying to do the same thing as TimeSplitInput.tsx
+// so can we please look to try to combine these 2 components together if possible
+// The problem with TimeSplitInput is that it's tightly coupled to the date + its
+// tightly coupled to the context of a range. Ideally it should be more modular
+// which is what this component is trying to achieve
+
+// [Joshen] Potential extension, give option to toggle 24 hours or AM/PM
+
+interface Props {
+  defaultTime?: Time
+  minimumTime?: Time
+  maximumTime?: Time
+  onChange?: (time: Time) => void
+}
+
+const TimeInput: FC<Props> = ({ defaultTime, minimumTime, maximumTime, onChange = () => {} }) => {
+  const [isFocused, setIsFocused] = useState(false)
+  const [error, setError] = useState<string>()
+  const [time, setTime] = useState<Time>({ h: '00', m: '00', s: '00' })
+
+  useEffect(() => {
+    if (defaultTime) setTime(defaultTime)
+  }, [])
+
+  useEffect(() => {
+    validate(defaultTime ?? time)
+  }, [JSON.stringify(minimumTime), JSON.stringify(maximumTime)])
+
+  const validate = (time: Time) => {
+    let error = undefined
+
+    const formattedTime = dayjs(`${time.h}:${time.m}:${time.s}`, 'HH:mm:ss', true)
+    if (!formattedTime.isValid()) error = 'Please enter a valid time'
+
+    const formattedMinimumTime = minimumTime
+      ? dayjs(`${minimumTime.h}:${minimumTime.m}:${minimumTime.s}`, 'HH:mm:ss', true)
+      : undefined
+    if (formattedMinimumTime && formattedTime.isBefore(formattedMinimumTime)) {
+      error = 'Selected time is before the minimum time allowed'
+    }
+
+    const formattedMaximumTime = maximumTime
+      ? dayjs(`${maximumTime.h}:${maximumTime.m}:${maximumTime.s}`, 'HH:mm:ss', true)
+      : undefined
+    if (formattedMaximumTime && formattedTime.isAfter(formattedMaximumTime)) {
+      error = 'Selected time is after the maximum time allowed'
+    }
+
+    setError(error)
+    return error === undefined
+  }
+
+  const onFocus = () => setIsFocused(true)
+
+  const onInputChange = (event: ChangeEvent<HTMLInputElement>, unit: 'h' | 'm' | 's') => {
+    if (isNaN(Number(event.target.value))) return
+    setTime({ ...time, [unit]: event.target.value })
+  }
+
+  const onInputBlur = (event: ChangeEvent<HTMLInputElement>, unit: 'h' | 'm' | 's') => {
+    const formattedInput = formatNumberToTwoDigits(Number(event.target.value))
+    const updatedTime = { ...time, [unit]: formattedInput }
+    setTime(updatedTime)
+
+    const isValid = validate(updatedTime)
+    if (isValid) onChange(updatedTime)
+
+    setIsFocused(false)
+  }
+
+  return (
+    <>
+      <div
+        className={[
+          'flex items-center justify-between transition',
+          'rounded-md bg-scaleA-200 border px-3.5 py-2 w-[310px]',
+          `${
+            isFocused
+              ? 'border-scale-900'
+              : error === undefined
+              ? 'border-scale-700'
+              : 'border-red-800'
+          }`,
+        ].join(' ')}
+      >
+        <IconClock className="text-scale-1100" size={18} strokeWidth={1.5} />
+        <Tooltip.Root delayDuration={0}>
+          <Tooltip.Trigger className="w-1/4">
+            <input
+              type="text"
+              maxLength={2}
+              pattern="[0-9]*"
+              placeholder="HH"
+              value={time.h}
+              onFocus={onFocus}
+              aria-label="Hours"
+              onBlur={(event) => onInputBlur(event, 'h')}
+              onChange={(event) => onInputChange(event, 'h')}
+              className="w-full text-sm bg-transparent p-0 text-center outline-none border-none focus:ring-0"
+            />
+          </Tooltip.Trigger>
+          <Tooltip.Content side="bottom">
+            <Tooltip.Arrow className="radix-tooltip-arrow" />
+            <div
+              className={[
+                'bg-scale-100 rounded py-1 px-2 leading-none shadow',
+                'border-scale-200 border',
+              ].join(' ')}
+            >
+              <span className="text-scale-1200 text-xs">Hours (HH)</span>
+            </div>
+          </Tooltip.Content>
+        </Tooltip.Root>
+        <span>:</span>
+        <Tooltip.Root delayDuration={0}>
+          <Tooltip.Trigger className="w-1/4">
+            <input
+              type="text"
+              maxLength={2}
+              pattern="[0-9]*"
+              placeholder="MM"
+              value={time.m}
+              onFocus={onFocus}
+              aria-label="Minutes"
+              onBlur={(event) => onInputBlur(event, 'm')}
+              onChange={(event) => onInputChange(event, 'm')}
+              className="w-full text-sm bg-transparent p-0 text-center outline-none border-none focus:ring-0"
+            />
+          </Tooltip.Trigger>
+          <Tooltip.Content side="bottom">
+            <Tooltip.Arrow className="radix-tooltip-arrow" />
+            <div
+              className={[
+                'bg-scale-100 rounded py-1 px-2 leading-none shadow',
+                'border-scale-200 border',
+              ].join(' ')}
+            >
+              <span className="text-scale-1200 text-xs">Minutes (MM)</span>
+            </div>
+          </Tooltip.Content>
+        </Tooltip.Root>
+        <span>:</span>
+        <Tooltip.Root delayDuration={0}>
+          <Tooltip.Trigger className="w-1/4">
+            <input
+              type="text"
+              maxLength={2}
+              pattern="[0-9]*"
+              placeholder="SS"
+              value={time.s}
+              onFocus={onFocus}
+              aria-label="Seconds"
+              onBlur={(event) => onInputBlur(event, 's')}
+              onChange={(event) => onInputChange(event, 's')}
+              className="w-full text-sm bg-transparent p-0 text-center outline-none border-none focus:ring-0"
+            />
+          </Tooltip.Trigger>
+          <Tooltip.Content side="bottom">
+            <Tooltip.Arrow className="radix-tooltip-arrow" />
+            <div
+              className={[
+                'bg-scale-100 rounded py-1 px-2 leading-none shadow',
+                'border-scale-200 border',
+              ].join(' ')}
+            >
+              <span className="text-scale-1200 text-xs">Seconds (SS)</span>
+            </div>
+          </Tooltip.Content>
+        </Tooltip.Root>
+      </div>
+      {error && <p className="text-sm text-red-900">{error}</p>}
+    </>
+  )
+}
+
+export default TimeInput

studio/components/interfaces/Database/Backups/PITR/TimezoneSelection.tsx

@@ -0,0 +1,78 @@
+import { FC, useState, FormEvent } from 'react'
+import { Listbox, IconSearch, IconGlobe } from '@supabase/ui'
+
+import { ALL_TIMEZONES } from './PITR.constants'
+
+interface Props {
+  hideLabel?: boolean
+  dropdownWidth?: string
+  selectedTimezone: any
+  onSelectTimezone: (timezone: any) => void
+}
+
+const TimezoneSelection: FC<Props> = ({
+  hideLabel,
+  dropdownWidth,
+  selectedTimezone,
+  onSelectTimezone,
+}) => {
+  const [searchString, setSearchString] = useState<string>('')
+
+  const timezoneOptions =
+    searchString.length > 0
+      ? ALL_TIMEZONES.map((option) => option.text).filter((option) =>
+          option.toLowerCase().includes(searchString.toLowerCase())
+        )
+      : ALL_TIMEZONES.map((option) => option.text)
+
+  return (
+    <div className="flex justify-between space-x-8">
+      {!hideLabel && <p className="w-2/5 text-sm">Select timezone</p>}
+      <div className={`${hideLabel ? 'w-full' : 'w-3/5'}`}>
+        <Listbox
+          value={selectedTimezone.text}
+          icon={<IconGlobe />}
+          onChange={(text) => {
+            const selectedTimezone = ALL_TIMEZONES.find((option) => option.text === text)
+            onSelectTimezone(selectedTimezone)
+          }}
+          onBlur={() => setSearchString('')}
+        >
+          <div
+            className={[
+              'fixed top-0 flex w-full items-center',
+              'rounded-t-md border-b border-gray-600 bg-gray-500',
+              'mb-4 space-x-2 px-4 py-2',
+            ].join(' ')}
+            style={{ zIndex: 1 }}
+          >
+            <IconSearch size={14} />
+            <input
+              autoFocus
+              className="placeholder-scale-1000 w-72 bg-transparent text-sm outline-none"
+              value={searchString}
+              placeholder={''}
+              onChange={(e: FormEvent<HTMLInputElement>) => setSearchString(e.currentTarget.value)}
+            />
+          </div>
+          {/* Whitespace to shift listbox options down for searchfield */}
+          <div className="h-8" />
+          {timezoneOptions.map((option) => {
+            return (
+              <Listbox.Option key={option} label={option} value={option} className={dropdownWidth}>
+                <div>{option}</div>
+              </Listbox.Option>
+            )
+          })}
+          {timezoneOptions.length === 0 && (
+            <Listbox.Option disabled key="no-results" label="" value="">
+              No timezones found
+            </Listbox.Option>
+          )}
+        </Listbox>
+      </div>
+    </div>
+  )
+}
+
+export default TimezoneSelection

studio/components/interfaces/Database/Backups/PITR/index.ts

@@ -0,0 +1,4 @@
+import PITRNotice from './PITRNotice'
+import PITRSelection from './PITRSelection'
+
+export { PITRNotice, PITRSelection }

studio/components/interfaces/Database/Backups/PITRBackupSelection/PITRBackupSelection.tsx

@@ -29,6 +29,7 @@ import {
   convertTimeStringtoUnixS,
 } from './PITRBackupSelection.utils'
 import InformationBox from 'components/ui/InformationBox'
+import { FormHeader } from 'components/ui/Forms'
 
 interface Props {}
 
@@ -159,153 +160,161 @@ const PITRBackupSelection: FC<Props> = () => {
   }
 
   return (
-    <div className="space-y-6">
-      {!canTriggerPhysicalBackups && (
-        <InformationBox
-          icon={<IconAlertCircle className="text-scale-1100" strokeWidth={2} />}
-          title="You need additional permissions to trigger a scheduled backup"
-        />
-      )}
-      <form onSubmit={onSubmit}>
-        <div className="space-y-4">
-          <div className="space-y-4 rounded border border-gray-400 border-opacity-50 bg-gray-300 py-3">
-            <div className="space-y-4 py-2">
-              <div className="flex justify-between space-x-8">
-                <p className="w-2/5 pl-4 text-sm">Select timezone</p>
-                <div className="w-3/5 px-4">
-                  <Listbox
-                    value={selectedTimezone.text}
-                    onChange={(text) => {
-                      const selectedTimezone = ALL_TIMEZONES.find((option) => option.text === text)
-                      setSelectedTimezone(selectedTimezone)
-                    }}
-                    onBlur={() => setSearchString('')}
-                  >
-                    <div
-                      className={[
-                        'fixed top-0 flex w-full items-center',
-                        'rounded-t-md border-b border-gray-600 bg-gray-500',
-                        'mb-4 space-x-2 px-4 py-2',
-                      ].join(' ')}
-                      style={{ zIndex: 1 }}
+    <>
+      <FormHeader
+        title="Restore from a point in time"
+        description="Database changes are watched and recorded, so that you cna restore your database to any point in time"
+      />
+      <div className="space-y-6">
+        {!canTriggerPhysicalBackups && (
+          <InformationBox
+            icon={<IconAlertCircle className="text-scale-1100" strokeWidth={2} />}
+            title="You need additional permissions to trigger a scheduled backup"
+          />
+        )}
+        <form onSubmit={onSubmit}>
+          <div className="space-y-4">
+            <div className="space-y-4 rounded border border-gray-400 border-opacity-50 bg-gray-300 py-3">
+              <div className="space-y-4 py-2">
+                <div className="flex justify-between space-x-8">
+                  <p className="w-2/5 pl-4 text-sm">Select timezone</p>
+                  <div className="w-3/5 px-4">
+                    <Listbox
+                      value={selectedTimezone.text}
+                      onChange={(text) => {
+                        const selectedTimezone = ALL_TIMEZONES.find(
+                          (option) => option.text === text
+                        )
+                        setSelectedTimezone(selectedTimezone)
+                      }}
+                      onBlur={() => setSearchString('')}
                     >
-                      <IconSearch size={14} />
-                      <input
-                        autoFocus
-                        className="placeholder-scale-1000 w-72 bg-transparent text-sm outline-none"
-                        value={searchString}
-                        placeholder={''}
-                        onChange={(e: FormEvent<HTMLInputElement>) =>
-                          setSearchString(e.currentTarget.value)
-                        }
-                      />
-                    </div>
-                    {/* Whitespace to shift listbox options down for searchfield */}
-                    <div className="h-8" />
-                    {timezoneOptions.map((option) => {
-                      return (
-                        <Listbox.Option key={option} label={option} value={option}>
-                          <div>{option}</div>
+                      <div
+                        className={[
+                          'fixed top-0 flex w-full items-center',
+                          'rounded-t-md border-b border-gray-600 bg-gray-500',
+                          'mb-4 space-x-2 px-4 py-2',
+                        ].join(' ')}
+                        style={{ zIndex: 1 }}
+                      >
+                        <IconSearch size={14} />
+                        <input
+                          autoFocus
+                          className="placeholder-scale-1000 w-72 bg-transparent text-sm outline-none"
+                          value={searchString}
+                          placeholder={''}
+                          onChange={(e: FormEvent<HTMLInputElement>) =>
+                            setSearchString(e.currentTarget.value)
+                          }
+                        />
+                      </div>
+                      {/* Whitespace to shift listbox options down for searchfield */}
+                      <div className="h-8" />
+                      {timezoneOptions.map((option) => {
+                        return (
+                          <Listbox.Option key={option} label={option} value={option}>
+                            <div>{option}</div>
+                          </Listbox.Option>
+                        )
+                      })}
+                      {timezoneOptions.length === 0 && (
+                        <Listbox.Option disabled key="no-results" label="" value="">
+                          No timezones found
                         </Listbox.Option>
-                      )
-                    })}
-                    {timezoneOptions.length === 0 && (
-                      <Listbox.Option disabled key="no-results" label="" value="">
-                        No timezones found
-                      </Listbox.Option>
-                    )}
-                  </Listbox>
+                      )}
+                    </Listbox>
+                  </div>
+                </div>
+                <div className="flex justify-between space-x-8">
+                  <div className="w-2/5 space-y-2 pl-4">
+                    <p className="text-sm">Earliest point of recovery</p>
+                  </div>
+                  <div className="w-3/5">
+                    <Input
+                      readOnly
+                      disabled
+                      step={1}
+                      type="datetime-local"
+                      className="px-4"
+                      value={earliestAvailableBackup}
+                    />
+                  </div>
+                </div>
+                <div className="flex justify-between space-x-8">
+                  <div className="w-2/5 space-y-2 pl-4">
+                    <p className="text-sm">Latest point of recovery</p>
+                  </div>
+                  <div className="w-3/5">
+                    <Input
+                      readOnly
+                      disabled
+                      step={1}
+                      type="datetime-local"
+                      className="px-4"
+                      value={latestAvailableBackup}
+                    />
+                  </div>
                 </div>
               </div>
-              <div className="flex justify-between space-x-8">
+              <Popover.Seperator />
+              <div className="flex justify-between space-x-8 py-2">
                 <div className="w-2/5 space-y-2 pl-4">
-                  <p className="text-sm">Earliest point of recovery</p>
+                  <p className="text-sm">Recovery point</p>
+                  <p className="text-scale-1100 text-sm">
+                    Select a date and time that you would like to restore your project to
+                  </p>
                 </div>
                 <div className="w-3/5">
                   <Input
-                    readOnly
-                    disabled
                     step={1}
                     type="datetime-local"
+                    error={errors?.recoveryPoint}
                     className="px-4"
-                    value={earliestAvailableBackup}
+                    onChange={(e) => {
+                      setErrors(undefined)
+                      setRecoveryPoint(e.target.value)
+                    }}
                   />
                 </div>
               </div>
-              <div className="flex justify-between space-x-8">
-                <div className="w-2/5 space-y-2 pl-4">
-                  <p className="text-sm">Latest point of recovery</p>
-                </div>
-                <div className="w-3/5">
-                  <Input
-                    readOnly
-                    disabled
-                    step={1}
-                    type="datetime-local"
-                    className="px-4"
-                    value={latestAvailableBackup}
-                  />
-                </div>
+              <Popover.Seperator />
+              <div className="flex items-center justify-end px-4">
+                <Button type="default" htmlType="submit">
+                  Restore
+                </Button>
               </div>
             </div>
-            <Popover.Seperator />
-            <div className="flex justify-between space-x-8 py-2">
-              <div className="w-2/5 space-y-2 pl-4">
-                <p className="text-sm">Recovery point</p>
-                <p className="text-scale-1100 text-sm">
-                  Select a date and time that you would like to restore your project to
-                </p>
-              </div>
-              <div className="w-3/5">
-                <Input
-                  step={1}
-                  type="datetime-local"
-                  error={errors?.recoveryPoint}
-                  className="px-4"
-                  onChange={(e) => {
-                    setErrors(undefined)
-                    setRecoveryPoint(e.target.value)
-                  }}
-                />
-              </div>
-            </div>
-            <Popover.Seperator />
-            <div className="flex items-center justify-end px-4">
-              <Button type="default" htmlType="submit">
-                Restore
-              </Button>
-            </div>
           </div>
-        </div>
-      </form>
-      <ConfirmationModal
-        visible={showConfirmation}
-        size="medium"
-        header="Confirm to restore"
-        children={
-          <Modal.Content>
-            <div className="space-y-2 py-4">
-              <div className="space-y-1">
+        </form>
+        <ConfirmationModal
+          visible={showConfirmation}
+          size="medium"
+          header="Confirm to restore"
+          children={
+            <Modal.Content>
+              <div className="space-y-2 py-4">
+                <div className="space-y-1">
+                  <p className="text-scale-1100 text-sm">
+                    Are you sure you want to restore your database from:
+                  </p>
+                  <p className="text-scale-1200 text-sm">
+                    {dayjs(recoveryPoint).format('DD MMM YYYY, HH:mm:ss')} (
+                    {getTimezoneOffsetText(selectedTimezone)})?
+                  </p>
+                </div>
                 <p className="text-scale-1100 text-sm">
-                  Are you sure you want to restore your database from:
-                </p>
-                <p className="text-scale-1200 text-sm">
-                  {dayjs(recoveryPoint).format('DD MMM YYYY, HH:mm:ss')} (
-                  {getTimezoneOffsetText(selectedTimezone)})?
+                  This will destroy any new data written since this backup was made.
                 </p>
               </div>
-              <p className="text-scale-1100 text-sm">
-                This will destroy any new data written since this backup was made.
-              </p>
-            </div>
-          </Modal.Content>
-        }
-        buttonLabel="Restore"
-        buttonLoadingLabel="Restoring"
-        onSelectCancel={() => setShowConfirmation(false)}
-        onSelectConfirm={onConfirmRestore}
-      />
-    </div>
+            </Modal.Content>
+          }
+          buttonLabel="Restore"
+          buttonLoadingLabel="Restoring"
+          onSelectCancel={() => setShowConfirmation(false)}
+          onSelectConfirm={onConfirmRestore}
+        />
+      </div>
+    </>
   )
 }
 

studio/components/ui/InformationBox.tsx

@@ -35,7 +35,7 @@ const InformationBox: FC<Props> = ({
     >
       <div className="flex flex-col px-4">
         <div className="flex items-center justify-between">
-          <div className="flex w-full space-x-3 lg:items-center">
+          <div className="flex w-full space-x-3 lg:items-start">
             {icon && <span className="text-scale-900">{icon}</span>}
             <div className="flex-grow">
               <h5 className="text-scale-1200 text-sm">{title}</h5>
@@ -54,26 +54,28 @@ const InformationBox: FC<Props> = ({
             </div>
           ) : null}
         </div>
-        <div
-          className={`flex flex-col space-y-3 overflow-hidden transition-all ${
-            isExpanded ? 'mt-3' : ''
-          }`}
-          style={{ maxHeight: isExpanded ? 500 : 0 }}
-        >
-          <div className="text-scale-1100 text-sm">{description}</div>
+        {(description || url || button) && (
+          <div
+            className={`flex flex-col space-y-3 overflow-hidden transition-all ${
+              isExpanded ? 'mt-3' : ''
+            }`}
+            style={{ maxHeight: isExpanded ? 500 : 0 }}
+          >
+            <div className="text-scale-1100 text-sm">{description}</div>
 
-          {url && (
-            <a
-              href={url}
-              target="_blank"
-              className="text-scale-1100 hover:text-scale-1200 text-sm underline transition-colors"
-            >
-              {urlLabel}
-            </a>
-          )}
+            {url && (
+              <a
+                href={url}
+                target="_blank"
+                className="text-scale-1100 hover:text-scale-1200 text-sm underline transition-colors"
+              >
+                {urlLabel}
+              </a>
+            )}
 
-          {button && <div>{button}</div>}
-        </div>
+            {button && <div>{button}</div>}
+          </div>
+        )}
       </div>
     </div>
   )

studio/components/ui/PasswordStrengthBar.tsx

@@ -40,6 +40,7 @@ const PasswordStrengthBar = ({
       )}
       <p
         className={
+          // [Joshen TODO] Is this correct?
           passwordStrengthScore >= DEFAULT_MINIMUM_PASSWORD_STRENGTH ? 'text-green-600' : ''
         }
       >

studio/package-lock.json

@@ -22,7 +22,7 @@
         "@supabase/react-data-grid": "^7.1.0-beta.7",
         "@supabase/shared-types": "^0.1.25",
         "@supabase/supabase-js": "^2.0.0-rc.2",
-        "@supabase/ui": "0.37.0-alpha.80",
+        "@supabase/ui": "0.37.0-alpha.81",
         "ajv": "^8.6.3",
         "analytics-node": "^3.5.0",
         "awesome-debounce-promise": "^2.1.0",
@@ -51,7 +51,7 @@
         "react-beautiful-dnd": "^13.1.0",
         "react-contexify": "^5.0.0",
         "react-csv": "^2.0.3",
-        "react-datepicker": "^4.6.0",
+        "react-datepicker": "^4.8.0",
         "react-dnd": "^14.0.3",
         "react-dnd-html5-backend": "^14.0.1",
         "react-dom": "^17.0.2",
@@ -8408,9 +8408,9 @@
       }
     },
     "node_modules/@supabase/ui": {
-      "version": "0.37.0-alpha.80",
-      "resolved": "https://registry.npmjs.org/@supabase/ui/-/ui-0.37.0-alpha.80.tgz",
-      "integrity": "sha512-oTBX43SipvCOmdG4UTt2yM//Meqfof4j7Fgmdi6rAn2EGpqo9xVqWxqlCLLvcbaK94Sl0i5R43zZEWz6RJoUIg==",
+      "version": "0.37.0-alpha.81",
+      "resolved": "https://registry.npmjs.org/@supabase/ui/-/ui-0.37.0-alpha.81.tgz",
+      "integrity": "sha512-CxqdikE6wGw6pGQ6b3vRA8qnvCK20VyeMyy8Z4hJ/Dg2qRfgQqbrv7qS+6A1S8pg657EzCCo0DIH75SijaU8eA==",
       "dependencies": {
         "@headlessui/react": "^1.0.0",
         "@mertasan/tailwindcss-variables": "^2.0.1",
@@ -23134,9 +23134,9 @@
       "integrity": "sha512-exyAdFLAxtuM4wNwLYrlKyPYLiJ7e0mv9tqPAd3kq+k1CiJFtznevR3yP0icv5q/y200w+lzNgi7TQn1Wrhu0w=="
     },
     "node_modules/react-datepicker": {
-      "version": "4.7.0",
-      "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.7.0.tgz",
-      "integrity": "sha512-FS8KgbwqpxmJBv/bUdA42MYqYZa+fEYcpc746DZiHvVE2nhjrW/dg7c5B5fIUuI8gZET6FOzuDgezNcj568Czw==",
+      "version": "4.8.0",
+      "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.8.0.tgz",
+      "integrity": "sha512-u69zXGHMpxAa4LeYR83vucQoUCJQ6m/WBsSxmUMu/M8ahTSVMMyiyQzauHgZA2NUr9y0FUgOAix71hGYUb6tvg==",
       "dependencies": {
         "@popperjs/core": "^2.9.2",
         "classnames": "^2.2.6",
@@ -23146,8 +23146,8 @@
         "react-popper": "^2.2.5"
       },
       "peerDependencies": {
-        "react": "^16.9.0 || ^17",
-        "react-dom": "^16.9.0 || ^17"
+        "react": "^16.9.0 || ^17 || ^18",
+        "react-dom": "^16.9.0 || ^17 || ^18"
       }
     },
     "node_modules/react-dnd": {
@@ -35813,9 +35813,9 @@
       }
     },
     "@supabase/ui": {
-      "version": "0.37.0-alpha.80",
-      "resolved": "https://registry.npmjs.org/@supabase/ui/-/ui-0.37.0-alpha.80.tgz",
-      "integrity": "sha512-oTBX43SipvCOmdG4UTt2yM//Meqfof4j7Fgmdi6rAn2EGpqo9xVqWxqlCLLvcbaK94Sl0i5R43zZEWz6RJoUIg==",
+      "version": "0.37.0-alpha.81",
+      "resolved": "https://registry.npmjs.org/@supabase/ui/-/ui-0.37.0-alpha.81.tgz",
+      "integrity": "sha512-CxqdikE6wGw6pGQ6b3vRA8qnvCK20VyeMyy8Z4hJ/Dg2qRfgQqbrv7qS+6A1S8pg657EzCCo0DIH75SijaU8eA==",
       "requires": {
         "@headlessui/react": "^1.0.0",
         "@mertasan/tailwindcss-variables": "^2.0.1",
@@ -47308,9 +47308,9 @@
       "integrity": "sha512-exyAdFLAxtuM4wNwLYrlKyPYLiJ7e0mv9tqPAd3kq+k1CiJFtznevR3yP0icv5q/y200w+lzNgi7TQn1Wrhu0w=="
     },
     "react-datepicker": {
-      "version": "4.7.0",
-      "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.7.0.tgz",
-      "integrity": "sha512-FS8KgbwqpxmJBv/bUdA42MYqYZa+fEYcpc746DZiHvVE2nhjrW/dg7c5B5fIUuI8gZET6FOzuDgezNcj568Czw==",
+      "version": "4.8.0",
+      "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.8.0.tgz",
+      "integrity": "sha512-u69zXGHMpxAa4LeYR83vucQoUCJQ6m/WBsSxmUMu/M8ahTSVMMyiyQzauHgZA2NUr9y0FUgOAix71hGYUb6tvg==",
       "requires": {
         "@popperjs/core": "^2.9.2",
         "classnames": "^2.2.6",

studio/package.json

@@ -28,7 +28,7 @@
     "@supabase/react-data-grid": "^7.1.0-beta.7",
     "@supabase/shared-types": "^0.1.25",
     "@supabase/supabase-js": "^2.0.0-rc.2",
-    "@supabase/ui": "0.37.0-alpha.80",
+    "@supabase/ui": "0.37.0-alpha.81",
     "ajv": "^8.6.3",
     "analytics-node": "^3.5.0",
     "awesome-debounce-promise": "^2.1.0",
@@ -57,7 +57,7 @@
     "react-beautiful-dnd": "^13.1.0",
     "react-contexify": "^5.0.0",
     "react-csv": "^2.0.3",
-    "react-datepicker": "^4.6.0",
+    "react-datepicker": "^4.8.0",
     "react-dnd": "^14.0.3",
     "react-dnd-html5-backend": "^14.0.1",
     "react-dom": "^17.0.2",

studio/pages/project/[ref]/database/backups/pitr.tsx

@@ -8,6 +8,7 @@ import { DatabaseLayout } from 'components/layouts'
 import { PITRBackupSelection } from 'components/interfaces/Database'
 import { NextPageWithLayout } from 'types'
 import NoPermission from 'components/ui/NoPermission'
+import { PITRNotice, PITRSelection } from 'components/interfaces/Database/Backups/PITR'
 
 const DatabaseScheduledBackups: NextPageWithLayout = () => {
   const { ui } = useStore()
@@ -28,16 +29,17 @@ const DatabaseScheduledBackups: NextPageWithLayout = () => {
           if (id === 'scheduled') router.push(`/project/${ref}/database/backups/scheduled`)
         }}
       >
-        <Tabs.Panel id="scheduled" label="Scheduled" />
+        <Tabs.Panel id="scheduled" label="Scheduled backups" />
         <Tabs.Panel id="pitr" label="Point in Time" />
       </Tabs>
 
-      <div className="space-y-4">
-        <p className="text-scale-1100 text-sm">
-          Restore your project from a specific date and time.
-        </p>
+      <div className="space-y-8">
         {canReadPhysicalBackups ? (
-          <PITRBackupSelection />
+          <>
+            <PITRNotice />
+            <PITRSelection />
+            {/* <PITRBackupSelection /> */}
+          </>
         ) : (
           <NoPermission resourceText="view PITR backups" />
         )}

studio/pages/project/[ref]/database/backups/scheduled.tsx

@@ -27,7 +27,7 @@ const DatabaseScheduledBackups: NextPageWithLayout = () => {
           if (id === 'pitr') router.push(`/project/${ref}/database/backups/pitr`)
         }}
       >
-        <Tabs.Panel id="scheduled" label="Scheduled" />
+        <Tabs.Panel id="scheduled" label="Scheduled backups" />
         <Tabs.Panel id="pitr" label="Point in Time" />
       </Tabs>
 

studio/styles/date-picker.scss

@@ -99,3 +99,11 @@
 .react-datepicker__day--range-end {
   @apply bg-brand-900 text-white hover:text-scale-700 hover:bg-white;
 }
+
+.react-datepicker__day--highlighted {
+  background: linear-gradient(135deg, #34B27B 0% 20%, transparent 20%);
+}
+
+.react-datepicker__day--selected.react-datepicker__day--highlighted {
+  background: linear-gradient(135deg, #34B27B 0% 20%, hsla(153, 60%, 28%, 1) 20%);
+}

studio/styles/main.scss

@@ -126,6 +126,10 @@ input[type='submit']:hover {
   @apply btn-primary-hover;
 }
 
+input::placeholder {
+  @apply text-scale-900;
+}
+
 .form-group input::placeholder {
   @apply text-scale-900;
 }

studio/styles/ui.scss

@@ -326,3 +326,7 @@
     // fill: #eeeeee;
   }
 }
+
+.pitr-listbox {
+  @apply md:gap-x-2;
+}