fix UI regressions

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

@@ -17,6 +17,7 @@ export interface DateFilterProps {
     showRollingRangePicker?: boolean
     makeLabel?: (key: React.ReactNode) => React.ReactNode
     style?: React.CSSProperties
+    popupStyle?: React.CSSProperties
     onChange?: (fromDate: string, toDate: string) => void
     disabled?: boolean
     getPopupContainer?: (props: any) => HTMLElement
@@ -34,6 +35,7 @@ export function DateFilterExperiment({
     showCustom,
     showRollingRangePicker = true,
     style,
+    popupStyle,
     disabled,
     makeLabel,
     onChange,
@@ -51,7 +53,6 @@ export function DateFilterExperiment({
 
     const optionsRef = useRef<HTMLDivElement | null>(null)
     const rollingDateRangeRef = useRef<HTMLDivElement | null>(null)
-    const fixedDateRangeRef = useRef<HTMLDivElement | null>(null)
 
     function _onChange(v: string | number | null): void {
         if (!v) {
@@ -89,7 +90,6 @@ export function DateFilterExperiment({
             rangeDateFrom={rangeDateFrom}
             rangeDateTo={rangeDateTo}
             disableBeforeYear={2015}
-            pickerRef={fixedDateRangeRef}
         />
     ) : (
         <div ref={optionsRef} className="date-filter-options" onClick={(e) => e.stopPropagation()}>
@@ -138,17 +138,18 @@ export function DateFilterExperiment({
             onClick={isOpen ? close : open}
             value={value}
             disabled={disabled}
-            style={style}
+            style={{ ...style, border: '1px solid var(--border)' }} //TODO this is a css hack, so that this button aligns with others on the page who are still on antd
             size={'small'}
-            type={'secondary'}
+            type={'stealth'}
             popup={{
                 onClickOutside: close,
                 visible: isOpen || isDateRangeOpen,
                 overlay: popupOverlay,
                 placement: 'bottom-start',
                 actionable: true,
                 closeOnClickInside: false,
-                additionalRefs: [fixedDateRangeRef, rollingDateRangeRef],
+                additionalRefs: [rollingDateRangeRef, '.datefilter-datepicker'],
+                style: popupStyle,
             }}
             icon={<CalendarOutlined />}
         >

frontend/src/lib/components/DateFilter/DateFilterExperimentLogic.ts

@@ -80,7 +80,7 @@ export const dateFilterLogic = kea<dateFilterLogicType>({
             // when props change, automatically reset the Select key to reflect the change
             const { dateFrom, dateTo, defaultValue, dateOptions, isDateFormatted } = props
             let newValue = null
-            if (dateFrom && dayjs(dateFrom).isValid() && dayjs(dateTo).isValid()) {
+            if (dateFrom && dateTo && dayjs(dateFrom).isValid() && dayjs(dateTo).isValid()) {
                 newValue = `${dateFrom} - ${dateTo}`
             } else {
                 const currKey = dateFilterToText(dateFrom, dateTo, defaultValue, dateOptions, false)

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, useRef, useEffect } from 'react'
 import { Button } from 'antd'
 import './DateFilterRangeExperiment.scss'
 import { dayjs } from 'lib/dayjs'
@@ -15,12 +15,34 @@ export function DateFilterRange(props: {
     rangeDateTo?: string | dayjs.Dayjs | null
     getPopupContainer?: (props: any) => HTMLElement
     disableBeforeYear?: number
-    pickerRef?: React.MutableRefObject<any>
 }): JSX.Element {
+    const dropdownRef = useRef<HTMLDivElement | null>(null)
     const [calendarOpen, setCalendarOpen] = useState(true)
 
+    const onClickOutside = (event: MouseEvent): void => {
+        const target = (event.composedPath?.()?.[0] || event.target) as HTMLElement
+
+        if (!target) {
+            return
+        }
+
+        const clickInPickerContainer = dropdownRef.current?.contains(target)
+
+        if (clickInPickerContainer && calendarOpen && target.tagName !== 'INPUT') {
+            setCalendarOpen(false)
+            return
+        }
+    }
+
+    useEffect(() => {
+        window.addEventListener('mousedown', onClickOutside)
+        return () => {
+            window.removeEventListener('mousedown', onClickOutside)
+        }
+    }, [calendarOpen])
+
     return (
-        <div>
+        <div ref={dropdownRef}>
             <a
                 style={{
                     margin: '0 1rem',
@@ -37,7 +59,6 @@ export function DateFilterRange(props: {
                 <label className="secondary">From date</label>
                 <br />
                 <DatePicker.RangePicker
-                    pickerRef={props.pickerRef}
                     dropdownClassName="datefilter-datepicker"
                     getPopupContainer={props.getPopupContainer}
                     defaultValue={[

frontend/src/lib/components/Popup/Popup.tsx

@@ -35,8 +35,11 @@ export interface PopupProps {
     maxContentWidth?: boolean
     className?: string
     middleware?: Middleware[]
-    /** Any other refs that needs to be taken into account for handling outside clicks e.g. other nested popups */
-    additionalRefs?: React.MutableRefObject<HTMLDivElement | null>[]
+    /** Any other refs that needs to be taken into account for handling outside clicks e.g. other nested popups.
+     * Works also with strings, matching classnames or ids, for antd legacy components that don't support refs
+     * **/
+    additionalRefs?: (React.MutableRefObject<HTMLDivElement | null> | string)[]
+    style?: React.CSSProperties
 }
 
 /** 0 means no parent. */
@@ -64,6 +67,7 @@ export const Popup = React.forwardRef<HTMLDivElement, PopupProps>(
             sameWidth = false,
             maxContentWidth = false,
             additionalRefs = [],
+            style,
         },
         ref
     ): JSX.Element => {
@@ -130,7 +134,7 @@ export const Popup = React.forwardRef<HTMLDivElement, PopupProps>(
                                 )}
                                 data-floating-placement={floatingPlacement}
                                 ref={floatingRef as MutableRefObject<HTMLDivElement>}
-                                style={{ position: strategy, top: y ?? 0, left: x ?? 0 }}
+                                style={{ position: strategy, top: y ?? 0, left: x ?? 0, ...style }}
                                 onClick={onClickInside}
                             >
                                 <div ref={ref} className="Popup__box">

frontend/src/lib/hooks/useOutsideClickHandler.ts

@@ -3,7 +3,7 @@ import { useEffect } from 'react'
 const exceptions = ['.ant-select-dropdown *', '.click-outside-block', '.click-outside-block *']
 
 export function useOutsideClickHandler(
-    refOrRefs: React.MutableRefObject<any> | React.MutableRefObject<any>[],
+    refOrRefs: string | React.MutableRefObject<any> | (React.MutableRefObject<any> | string)[],
     handleClickOutside?: (event: Event) => void,
     extraDeps: any[] = []
 ): void {
@@ -16,8 +16,12 @@ export function useOutsideClickHandler(
             }
             if (
                 allRefs.some((maybeRef) => {
-                    const ref = maybeRef.current
-                    return ref && `contains` in ref && ref.contains(event.target as Element)
+                    if (typeof maybeRef === 'string') {
+                        return event.composedPath?.()?.find((e) => (e as HTMLElement)?.matches?.(maybeRef))
+                    } else {
+                        const ref = maybeRef.current
+                        return ref && `contains` in ref && ref.contains(event.target as Element)
+                    }
                 })
             ) {
                 return

frontend/src/scenes/insights/Insight.scss

@@ -137,6 +137,8 @@
 
                 span.filter {
                     font-size: 14px;
+                    display: flex;
+                    align-items: center;
 
                     &:not(:last-child) {
                         margin-right: 0.5rem;

frontend/src/scenes/saved-insights/SavedInsights.tsx

@@ -398,11 +398,11 @@ export function SavedInsights(): JSX.Element {
                                     ))}
                                 </Select>
                             </Col>
-                            <Col>
+                            <div style={{ display: 'flex', alignItems: 'center' }}>
                                 Last modified:
                                 {dateFilterExperiment ? (
                                     <DateFilterExperiment
-                                        style={{ paddingLeft: 8 }}
+                                        style={{ marginLeft: 8 }}
                                         defaultValue="All time"
                                         dateFrom={dateFrom}
                                         dateTo={dateTo}
@@ -430,7 +430,7 @@ export function SavedInsights(): JSX.Element {
                                         }
                                     />
                                 )}
-                            </Col>
+                            </div>
                             {tab !== SavedInsightsTabs.Yours ? (
                                 <Col>
                                     Created by:

frontend/src/toolbar/stats/HeatmapStats.tsx

@@ -38,6 +38,7 @@ export function HeatmapStats(): JSX.Element {
                                 dateTo={heatmapFilter.date_to}
                                 onChange={(date_from, date_to) => setHeatmapFilter({ date_from, date_to })}
                                 getPopupContainer={getShadowRootPopupContainer}
+                                popupStyle={{ zIndex: 9999999999 }}
                             />
                         ) : (
                             <DateFilter