Toolbar Date Filter, remove react-hot-loader, fix dashboard date filter URL

.ts-strict-blacklist

@@ -71,18 +71,18 @@ frontend/src/scenes/actions/ActionsTable.tsx(125,29)
 frontend/src/scenes/actions/ActionsTable.tsx(136,36)
 frontend/src/scenes/actions/ActionsTable.tsx(139,29)
 frontend/src/scenes/actions/ActionsTable.tsx(192,35)
-frontend/src/scenes/annotations/index.tsx(32,47)
-frontend/src/scenes/annotations/index.tsx(51,47)
-frontend/src/scenes/annotations/index.tsx(57,48)
-frontend/src/scenes/annotations/index.tsx(63,43)
-frontend/src/scenes/annotations/index.tsx(69,41)
-frontend/src/scenes/annotations/index.tsx(146,44)
-frontend/src/scenes/annotations/index.tsx(152,38)
-frontend/src/scenes/annotations/index.tsx(156,39)
-frontend/src/scenes/annotations/index.tsx(232,50)
-frontend/src/scenes/annotations/index.tsx(242,55)
-frontend/src/scenes/annotations/index.tsx(280,70)
-frontend/src/scenes/annotations/index.tsx(282,59)
+frontend/src/scenes/annotations/index.tsx(30,47)
+frontend/src/scenes/annotations/index.tsx(49,47)
+frontend/src/scenes/annotations/index.tsx(55,48)
+frontend/src/scenes/annotations/index.tsx(61,43)
+frontend/src/scenes/annotations/index.tsx(67,41)
+frontend/src/scenes/annotations/index.tsx(144,44)
+frontend/src/scenes/annotations/index.tsx(150,38)
+frontend/src/scenes/annotations/index.tsx(154,39)
+frontend/src/scenes/annotations/index.tsx(230,50)
+frontend/src/scenes/annotations/index.tsx(240,55)
+frontend/src/scenes/annotations/index.tsx(278,70)
+frontend/src/scenes/annotations/index.tsx(280,59)
 frontend/src/scenes/billing/Billing.tsx(6,24)
 frontend/src/scenes/billing/Billing.tsx(51,24)
 frontend/src/scenes/billing/Billing.tsx(53,61)
@@ -129,7 +129,7 @@ frontend/src/scenes/dashboard/DashboardItems.tsx(92,43)
 frontend/src/scenes/dashboard/Dashboards.tsx(27,42)
 frontend/src/scenes/dashboard/Dashboards.tsx(27,46)
 frontend/src/scenes/dashboard/Dashboards.tsx(56,46)
-frontend/src/scenes/events/Events.tsx(49,22)
+frontend/src/scenes/events/Events.tsx(47,22)
 frontend/src/scenes/events/EventsVolumeTable.tsx(53,14)
 frontend/src/scenes/events/EventsVolumeTable.tsx(55,22)
 frontend/src/scenes/events/EventsVolumeTable.tsx(63,29)
@@ -188,7 +188,7 @@ frontend/src/scenes/insights/InsightTabs/TrendTab/TrendTab.tsx(99,32)
 frontend/src/scenes/insights/InsightTabs/TrendTab/TrendTab.tsx(99,43)
 frontend/src/scenes/insights/InsightTabs/TrendTab/TrendTab.tsx(121,57)
 frontend/src/scenes/insights/insightCommandLogic.ts(10,41)
-frontend/src/scenes/instance/Licenses/index.tsx(63,31)
+frontend/src/scenes/instance/Licenses/index.tsx(61,31)
 frontend/src/scenes/instance/Licenses/logic.ts(38,17)
 frontend/src/scenes/instance/Licenses/logic.ts(43,5)
 frontend/src/scenes/instance/Licenses/logic.ts(47,71)
@@ -210,16 +210,12 @@ frontend/src/scenes/persons/Cohort.tsx(80,40)
 frontend/src/scenes/persons/Cohort.tsx(166,52)
 frontend/src/scenes/persons/Cohort.tsx(168,36)
 frontend/src/scenes/persons/CohortGroup.tsx(88,29)
-frontend/src/scenes/persons/Cohorts.tsx(28,33)
-frontend/src/scenes/persons/Cohorts.tsx(67,83)
-frontend/src/scenes/persons/Cohorts.tsx(71,42)
-frontend/src/scenes/persons/Cohorts.tsx(74,55)
-frontend/src/scenes/persons/Cohorts.tsx(74,65)
-frontend/src/scenes/persons/Cohorts.tsx(87,48)
-frontend/src/scenes/persons/Cohorts.tsx(109,29)
-frontend/src/scenes/persons/Cohorts.tsx(134,39)
-frontend/src/scenes/persons/Cohorts.tsx(158,69)
-frontend/src/scenes/persons/Cohorts.tsx(167,37)
+frontend/src/scenes/persons/Cohorts.tsx(27,33)
+frontend/src/scenes/persons/Cohorts.tsx(65,83)
+frontend/src/scenes/persons/Cohorts.tsx(69,42)
+frontend/src/scenes/persons/Cohorts.tsx(72,55)
+frontend/src/scenes/persons/Cohorts.tsx(72,65)
+frontend/src/scenes/persons/Cohorts.tsx(85,48)
 frontend/src/scenes/persons/MergePerson.tsx(56,56)
 frontend/src/scenes/plugins/PluginImage.tsx(4,30)
 frontend/src/scenes/plugins/Repository.tsx(22,56)

babel.config.js

@@ -4,7 +4,6 @@ module.exports = {
         '@babel/plugin-transform-runtime',
         '@babel/plugin-transform-react-jsx',
         '@babel/plugin-proposal-class-properties',
-        'react-hot-loader/babel',
         ['babel-plugin-kea', { path: './frontend/src' }],
     ],
     presets: ['@babel/preset-env', '@babel/typescript'],

frontend/src/layout/navigation/MainNavigation.tsx

@@ -17,7 +17,6 @@ import { triggerResizeAfterADelay } from 'lib/utils'
 import { useEscapeKey } from 'lib/hooks/useEscapeKey'
 import lgLogo from 'public/posthog-logo-white.svg'
 import smLogo from 'public/icon-white.svg'
-import { hot } from 'react-hot-loader/root'
 import './Navigation.scss'
 import {
     IconCohorts,
@@ -138,8 +137,7 @@ function PinnedDashboards(): JSX.Element {
     )
 }
 
-export const MainNavigation = hot(_MainNavigation)
-function _MainNavigation(): JSX.Element {
+export function MainNavigation(): JSX.Element {
     const { user } = useValues(userLogic)
     const { currentOrganization } = useValues(organizationLogic)
     const { menuCollapsed, toolbarModalOpen, pinnedDashboardsVisible } = useValues(navigationLogic)

frontend/src/layout/navigation/TopNavigation.tsx

@@ -22,7 +22,6 @@ import { guardPremiumFeature } from 'scenes/UpgradeModal'
 import { sceneLogic } from 'scenes/sceneLogic'
 import { CreateProjectModal } from 'scenes/project/CreateProjectModal'
 import { CreateOrganizationModal } from 'scenes/organization/CreateOrganizationModal'
-import { hot } from 'react-hot-loader/root'
 import { isMobile, platformCommandControlKey } from 'lib/utils'
 import { commandPaletteLogic } from 'lib/components/CommandPalette/commandPaletteLogic'
 import { Link } from 'lib/components/Link'
@@ -71,8 +70,7 @@ export function WhoAmI({ user }: { user: UserType }): JSX.Element {
     )
 }
 
-export const TopNavigation = hot(_TopNavigation)
-export function _TopNavigation(): JSX.Element {
+export function TopNavigation(): JSX.Element {
     const {
         setMenuCollapsed,
         setChangelogModalOpen,

frontend/src/lib/components/DateFilter/DateFilter.tsx

@@ -1,18 +1,23 @@
-import React, { useRef, useEffect, useState } from 'react'
-import { Select, DatePicker, Button } from 'antd'
-import { useValues, useActions } from 'kea'
-import moment from 'moment'
-import { dateFilterLogic } from './dateFilterLogic'
+import React, { useState } from 'react'
+import { Select } from 'antd'
+import moment, { Moment } from 'moment'
 import { dateMapping, isDate, dateFilterToText } from 'lib/utils'
+import { DateFilterRange } from 'lib/components/DateFilter/DateFilterRange'
 
-interface Props {
+export interface DateFilterProps {
     defaultValue: string
     showCustom?: boolean
     bordered?: boolean
     makeLabel?: (key: string) => React.ReactNode
     style?: React.CSSProperties
-    onChange?: () => void
+    onChange?: (fromDate: string, toDate: string) => void
     disabled?: boolean
+    getPopupContainer?: (props: any) => HTMLElement
+}
+
+interface RawDateFilterProps extends DateFilterProps {
+    dateFrom?: string | Moment
+    dateTo?: string | Moment
 }
 
 export function DateFilter({
@@ -23,12 +28,10 @@ export function DateFilter({
     disabled,
     makeLabel,
     onChange,
-}: Props): JSX.Element {
-    const {
-        dates: { dateFrom, dateTo },
-    } = useValues(dateFilterLogic)
-
-    const { setDates } = useActions(dateFilterLogic)
+    getPopupContainer,
+    dateFrom,
+    dateTo,
+}: RawDateFilterProps): JSX.Element {
     const [rangeDateFrom, setRangeDateFrom] = useState(
         dateFrom && isDate.test(dateFrom as string) ? moment(dateFrom) : undefined
     )
@@ -42,10 +45,7 @@ export function DateFilter({
     }
 
     function setDate(fromDate: string, toDate: string): void {
-        setDates(fromDate, toDate)
-        if (onChange) {
-            onChange()
-        }
+        onChange?.(fromDate, toDate)
     }
 
     function _onChange(v: string): void {
@@ -103,10 +103,12 @@ export function DateFilter({
             dropdownMatchSelectWidth={false}
             disabled={disabled}
             optionLabelProp={makeLabel ? 'label' : undefined}
+            getPopupContainer={getPopupContainer}
             dropdownRender={(menu: React.ReactElement) => {
                 if (dateRangeOpen) {
                     return (
-                        <DatePickerDropdown
+                        <DateFilterRange
+                            getPopupContainer={getPopupContainer}
                             onClick={dropdownOnClick}
                             onDateFromChange={(date) => setRangeDateFrom(date)}
                             onDateToChange={(date) => setRangeDateTo(date)}
@@ -140,83 +142,3 @@ export function DateFilter({
         </Select>
     )
 }
-
-function DatePickerDropdown(props: {
-    onClickOutside: () => void
-    onClick: (e: React.MouseEvent) => void
-    onDateFromChange: (date: moment.Moment | undefined) => void
-    onDateToChange: (date: moment.Moment | undefined) => void
-    onApplyClick: () => void
-    rangeDateFrom: string | moment.Moment | undefined
-    rangeDateTo: string | moment.Moment | undefined
-}): JSX.Element {
-    const dropdownRef = useRef<HTMLDivElement | null>(null)
-    const [calendarOpen, setCalendarOpen] = useState(false)
-
-    const onClickOutside = (event: MouseEvent): void => {
-        if ((!event.target || !dropdownRef.current?.contains(event.target as any)) && !calendarOpen) {
-            props.onClickOutside()
-        }
-    }
-
-    useEffect(() => {
-        document.addEventListener('mousedown', onClickOutside)
-        return () => {
-            document.removeEventListener('mousedown', onClickOutside)
-        }
-    }, [calendarOpen])
-
-    return (
-        <div ref={dropdownRef}>
-            <a
-                style={{
-                    margin: '0 1rem',
-                    color: 'rgba(0, 0, 0, 0.2)',
-                    fontWeight: 700,
-                }}
-                href="#"
-                onClick={props.onClick}
-            >
-                &lt;
-            </a>
-            <hr style={{ margin: '0.5rem 0' }} />
-            <div style={{ padding: '0 1rem' }}>
-                <label className="secondary">From date</label>
-                <br />
-                <DatePicker.RangePicker
-                    defaultValue={[
-                        props.rangeDateFrom
-                            ? moment.isMoment(props.rangeDateFrom)
-                                ? props.rangeDateFrom
-                                : moment(props.rangeDateFrom)
-                            : null,
-                        props.rangeDateTo
-                            ? moment.isMoment(props.rangeDateTo)
-                                ? props.rangeDateTo
-                                : moment(props.rangeDateTo)
-                            : null,
-                    ]}
-                    onOpenChange={(open) => {
-                        setCalendarOpen(open)
-                    }}
-                    onChange={(dates) => {
-                        if (dates && dates.length === 2) {
-                            props.onDateFromChange(dates[0] || undefined)
-                            props.onDateToChange(dates[1] || undefined)
-                        }
-                    }}
-                    popupStyle={{ zIndex: 999999 }}
-                />
-                <br />
-                <Button
-                    type="default"
-                    disabled={!props.rangeDateTo || !props.rangeDateFrom}
-                    style={{ marginTop: '1rem', marginBottom: '1rem' }}
-                    onClick={props.onApplyClick}
-                >
-                    Apply filter
-                </Button>
-            </div>
-        </div>
-    )
-}

frontend/src/lib/components/DateFilter/DateFilterRange.tsx

@@ -0,0 +1,110 @@
+import React, { useEffect, useRef, useState } from 'react'
+import moment from 'moment'
+import { Button, DatePicker } from 'antd'
+
+export function DateFilterRange(props: {
+    onClickOutside: () => void
+    onClick: (e: React.MouseEvent) => void
+    onDateFromChange: (date: moment.Moment | undefined) => void
+    onDateToChange: (date: moment.Moment | undefined) => void
+    onApplyClick: () => void
+    rangeDateFrom: string | moment.Moment | undefined
+    rangeDateTo: string | moment.Moment | undefined
+    getPopupContainer?: (props: any) => HTMLElement
+}): JSX.Element {
+    const dropdownRef = useRef<HTMLDivElement | null>(null)
+    const [calendarOpen, setCalendarOpen] = useState(false)
+
+    const onClickOutside = (event: MouseEvent): void => {
+        const target = (event.composedPath?.()?.[0] || event.target) as HTMLElement
+
+        if (!target) {
+            return
+        }
+
+        const clickInPickerContainer = dropdownRef.current?.contains(target)
+        const clickInDateDropdown = event
+            .composedPath?.()
+            ?.find((e) => (e as HTMLElement)?.matches?.('.datefilter-datepicker'))
+
+        if (clickInPickerContainer && calendarOpen && target.tagName !== 'INPUT') {
+            setCalendarOpen(false)
+            return
+        }
+
+        if (!clickInPickerContainer && !clickInDateDropdown) {
+            if (calendarOpen) {
+                setCalendarOpen(false)
+            } else {
+                props.onClickOutside()
+            }
+        }
+    }
+
+    useEffect(() => {
+        window.addEventListener('mousedown', onClickOutside)
+        return () => {
+            window.removeEventListener('mousedown', onClickOutside)
+        }
+    }, [calendarOpen])
+
+    return (
+        <div ref={dropdownRef}>
+            <a
+                style={{
+                    margin: '0 1rem',
+                    color: 'rgba(0, 0, 0, 0.2)',
+                    fontWeight: 700,
+                }}
+                href="#"
+                onClick={props.onClick}
+            >
+                &lt;
+            </a>
+            <hr style={{ margin: '0.5rem 0' }} />
+            <div style={{ padding: '0 1rem' }}>
+                <label className="secondary">From date</label>
+                <br />
+                <DatePicker.RangePicker
+                    dropdownClassName="datefilter-datepicker"
+                    getPopupContainer={props.getPopupContainer}
+                    defaultValue={[
+                        props.rangeDateFrom
+                            ? moment.isMoment(props.rangeDateFrom)
+                                ? props.rangeDateFrom
+                                : moment(props.rangeDateFrom)
+                            : null,
+                        props.rangeDateTo
+                            ? moment.isMoment(props.rangeDateTo)
+                                ? props.rangeDateTo
+                                : moment(props.rangeDateTo)
+                            : null,
+                    ]}
+                    open={calendarOpen}
+                    onOpenChange={(open) => {
+                        if (open) {
+                            setCalendarOpen(open)
+                        }
+                    }}
+                    onChange={(dates) => {
+                        if (dates && dates.length === 2) {
+                            props.onDateFromChange(dates[0] || undefined)
+                            props.onDateToChange(dates[1] || undefined)
+                            setCalendarOpen(false)
+                        }
+                    }}
+                    popupStyle={{ zIndex: 999999 }}
+                />
+                <br />
+                <Button
+                    type="default"
+                    disabled={!props.rangeDateTo || !props.rangeDateFrom}
+                    style={{ marginTop: '1rem', marginBottom: '1rem' }}
+                    onClick={props.onApplyClick}
+                >
+                    Apply filter
+                </Button>
+            </div>
+        </div>
+    )
+}