8000 FE-1338: New UI for LogsDatePickers (FE-1512) (#33164) · CodersSampling/supabase@8a340ae · GitHub
[go: up one dir, main page]
Skip to content

Commit 8a340ae

Browse files
jordienrjoshenlim
jordienr
and
joshenlim
authored
FE-1338: New UI for LogsDatePickers (FE-1512) (supabase#33164)
* add more date range options to log previewer * new ui for logs datepickers * update logsquerypanel * update previewfilterpanel * fix some bugs and add copypasting date range support * handle updating times in copypaste events * add handlepaste to timesplitinput * update warehouse datepicker * update reports datepicker * rm consolelog * update logsquerypanel * update tests * fix reportsfilterbar * update api-overview report * rm consolelogs * update storage report * add large range wraning * update large range max const * fix default values and label * fix tests * add default value to logs previewer * disable helpers fix * rm last 7 days helper * add test for disabled helpers * add label test * add helper label test * reset state when closing without saving * undo rm * fm datefns, fix test class * fix year format * rm disabled from label * fix type err in test * fix test * fix tests * max 2 days for warning * fix refresh not using latest timestamp end * refactor log explorer to use new logs datepicker state hook * Remove round to hour/day in helpers * Use now instead of end of day for datepicker TO * fix types * update global timeout for e2e tests * update test with new default * fix test * analytics container taking too long to return data so adding more timeout * force ci * fix first render issues * Smol refactor * Do not reset timestamp end when refreshing in LogsPreviewer --------- Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
1 parent fbc48bf commit 8a340ae

File tree

15 files changed

+827
-339
lines changed

15 files changed

+827
-339
lines changed

‎apps/studio/components/interfaces/DataWarehouse/WarehouseCollectionDetail.tsx

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import Link from 'next/link'
1515
import { useRouter } from 'next/router'
1616
import { useEffect, useState } from 'react'
1717
import { Button, Tooltip, TooltipContent, TooltipTrigger } from 'ui'
18-
import DatePickers from '../Settings/Logs/Logs.DatePickers'
18+
import { LogsDatePicker } from '../Settings/Logs/Logs.DatePickers'
1919
import { DatetimeHelper } from '../Settings/Logs/Logs.types'
2020
import LogTable from '../Settings/Logs/LogTable'
2121
import { TestCollectionDialog } from './TestCollectionDialog'
@@ -202,11 +202,13 @@ order by timestamp desc limit ${filters.limit} offset ${filters.offset}
202202
value={search}
203203
onChange={(e) => setSearch(e.target.value)}
204204
/> */}
205-
<DatePickers
206-
to={filters.interval?.to()}
207-
from={filters.interval?.from()}
205+
<LogsDatePicker
208206
helpers={INTERVALS}
209-
onChange={(e) =>
207+
value={{
208+
from: filters.interval.from(),
209+
to: filters.interval.to(),
210+
}}
211+
onSubmit={(e) =>
210212
setFilters({
211213
...filters,
212214
interval: {

‎apps/studio/components/interfaces/Reports/ReportFilterBar.tsx

Lines changed: 19 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import {
2020
Select,
2121
cn,
2222
} from 'ui'
23-
import DatePickers from '../Settings/Logs/Logs.DatePickers'
23+
import { DatePickerValue, LogsDatePicker } from '../Settings/Logs/Logs.DatePickers'
2424
import { REPORTS_DATEPICKER_HELPERS } from './Reports.constants'
2525
import type { ReportFilterItem } from './Reports.types'
2626

@@ -30,7 +30,7 @@ interface ReportFilterBarProps {
3030
onAddFilter: (filter: ReportFilterItem) => void
3131
onRemoveFilters: (filters: ReportFilterItem[]) => void
3232
onRefresh: () => void
33-
onDatepickerChange: ComponentProps<typeof DatePickers>['onChange']
33+
onDatepickerChange: ComponentProps<typeof LogsDatePicker>['onSubmit']
3434
datepickerTo?: string
3535
datepickerFrom?: string
3636
datepickerHelpers: typeof REPORTS_DATEPICKER_HELPERS
@@ -84,8 +84,6 @@ const ReportFilterBar = ({
8484
isLoading = false,
8585
onAddFilter,
8686
onDatepickerChange,
87-
datepickerTo = '',
88-
datepickerFrom = '',
8987
onRemoveFilters,
9088
onRefresh,
9189
datepickerHelpers,
@@ -119,6 +117,11 @@ const ReportFilterBar = ({
119117
})
120118
}
121119

120+
const handleDatepickerChange = (vals: DatePickerValue) => {
121+
onDatepickerChange(vals)
122+
setSelectedRange(vals)
123+
}
124+
122125
const handleProductFilterChange = async (
123126
nextProductFilter: null | (typeof PRODUCT_FILTERS)[number]
124127
) => {
@@ -141,9 +144,17 @@ const ReportFilterBar = ({
141144
setCurrentProductFilter(nextProductFilter)
142145
}
143146

147+
const defaultHelper = datepickerHelpers[0]
148+
const [selectedRange, setSelectedRange] = useState<DatePickerValue>({
149+
to: defaultHelper.calcTo(),
150+
from: defaultHelper.calcFrom(),
151+
isHelper: true,
152+
text: defaultHelper.text,
153+
})
154+
144155
return (
145156
<div className="flex items-center justify-between">
146-
<div className="flex flex-row justify-start items-center flex-wrap gap-x-2">
157+
<div className="flex flex-row justify-start items-center flex-wrap gap-2">
147158
<ButtonTooltip
148159
type="default"
149160
disabled={isLoading}
@@ -152,10 +163,9 @@ const ReportFilterBar = ({
152163
tooltip={{ content: { side: 'bottom', text: 'Refresh report' } }}
153164
onClick={() => onRefresh()}
154165
/>
155-
<DatePickers
156-
onChange={onDatepickerChange}
157-
to={datepickerTo}
158-
from={datepickerFrom}
166+
<LogsDatePicker
167+
onSubmit={handleDatepickerChange}
168+
value={selectedRange}
159169
helpers={datepickerHelpers}
160170
/>
161171
<DropdownMenu>

0 commit comments

Comments
 (0)
0