chore: cleanup inline styles (#18314)

PostHog · Nov 7, 2023 · daed413 · daed413
1 parent 3d6410a
commit daed413
Show file tree

Hide file tree

Showing 59 changed files with 315 additions and 181 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -86,7 +86,7 @@ module.exports = {
             },
         ],
         'react/forbid-dom-props': [
-            1,
+            'warn',
             {
                 forbid: [
                     {
@@ -98,7 +98,7 @@ module.exports = {
             },
         ],
         'posthog/warn-elements': [
-            1,
+            'warn',
             {
                 forbid: [
                     {
@@ -146,7 +146,7 @@ module.exports = {
             },
         ],
         'react/forbid-elements': [
-            2,
+            'error',
             {
                 forbid: [
                     {
@@ -200,9 +200,9 @@ module.exports = {
                 ],
             },
         ],
-        'no-constant-condition': 0,
-        'no-prototype-builtins': 0,
-        'no-irregular-whitespace': 0,
+        'no-constant-condition': 'off',
+        'no-prototype-builtins': 'off',
+        'no-irregular-whitespace': 'off',
     },
     overrides: [
         {

diff --git a/frontend/__snapshots__/filters-propertyfilters--with-no-close-button.png b/frontend/__snapshots__/filters-propertyfilters--with-no-close-button.png
diff --git a/...tend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-breakdown-edit.png b/...tend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-breakdown-edit.png
diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-breakdown.png b/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-breakdown.png
diff --git a/frontend/src/lib/components/IntervalFilter/intervalFilterLogic.ts b/frontend/src/lib/components/IntervalFilter/intervalFilterLogic.ts
@@ -0,0 +1,144 @@
+import { kea, props, key, path, connect, actions, reducers, listeners } from 'kea'
+import { objectsEqual, dateMapping } from 'lib/utils'
+import type { intervalFilterLogicType } from './intervalFilterLogicType'
+import { IntervalKeyType, Intervals, intervals } from 'lib/components/IntervalFilter/intervals'
+import { BaseMathType, InsightLogicProps, IntervalType } from '~/types'
+import { keyForInsightLogicProps } from 'scenes/insights/sharedUtils'
+import { dayjs } from 'lib/dayjs'
+import { InsightQueryNode, TrendsQuery } from '~/queries/schema'
+import { lemonToast } from 'lib/lemon-ui/lemonToast'
+import { BASE_MATH_DEFINITIONS } from 'scenes/trends/mathsLogic'
+import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic'
+
+export const intervalFilterLogic = kea<intervalFilterLogicType>([
+    props({} as InsightLogicProps),
+    key(keyForInsightLogicProps('new')),
+    path((key) => ['lib', 'components', 'IntervalFilter', 'intervalFilterLogic', key]),
+    connect((props: InsightLogicProps) => ({
+        actions: [insightVizDataLogic(props), ['updateQuerySource']],
+        values: [insightVizDataLogic(props), ['interval', 'querySource']],
+    })),
+    actions(() => ({
+        setInterval: (interval: IntervalKeyType) => ({ interval }),
+        setEnabledIntervals: (enabledIntervals: Intervals) => ({ enabledIntervals }),
+    })),
+    reducers(() => ({
+        enabledIntervals: [
+            { ...intervals } as Intervals,
+            {
+                setEnabledIntervals: (_, { enabledIntervals }) => enabledIntervals,
+            },
+        ],
+    })),
+    listeners(({ values, actions, selectors }) => ({
+        setInterval: ({ interval }) => {
+            if (values.interval !== interval) {
+                actions.updateQuerySource({ interval } as Partial<InsightQueryNode>)
+            }
+        },
+        updateQuerySource: ({ querySource }, _, __, previousState) => {
+            const { date_from, date_to } = querySource.dateRange || {}
+            const previousDateRange = selectors.querySource(previousState)?.dateRange || {}
+
+            let activeUsersMath: BaseMathType.WeeklyActiveUsers | BaseMathType.MonthlyActiveUsers | null = null
+
+            // We disallow grouping by certain intervals for weekly active users and monthly active users views
+            // e.g. WAUs grouped by month. Here, look for the first event/action running WAUs/MAUs math and
+            // pass that down to the interval filter to determine what groupings are allowed.
+            for (const series of (values.querySource as TrendsQuery)?.series || []) {
+                if (series.math === BaseMathType.WeeklyActiveUsers) {
+                    activeUsersMath = BaseMathType.WeeklyActiveUsers
+                    break
+                }
+
+                if (series.math === BaseMathType.MonthlyActiveUsers) {
+                    activeUsersMath = BaseMathType.MonthlyActiveUsers
+                    break
+                }
+            }
+
+            const enabledIntervals: Intervals = { ...intervals }
+
+            if (activeUsersMath) {
+                // Disallow grouping by hour for WAUs/MAUs as it's an expensive query that produces a view that's not useful for users
+                enabledIntervals.hour = {
+                    ...enabledIntervals.hour,
+                    disabledReason:
+                        'Grouping by hour is not supported on insights with weekly or monthly active users series.',
+                }
+
+                // Disallow grouping by month for WAUs as the resulting view is misleading to users
+                if (activeUsersMath === BaseMathType.WeeklyActiveUsers) {
+                    enabledIntervals.month = {
+                        ...enabledIntervals.month,
+                        disabledReason:
+                            'Grouping by month is not supported on insights with weekly active users series.',
+                    }
+                }
+            }
+
+            actions.setEnabledIntervals(enabledIntervals)
+
+            // If the user just flipped an event action to use WAUs/MAUs math and their
+            // current interval is unsupported by the math type, switch their interval
+            // to an appropriate allowed interval and inform them of the change via a toast
+            if (
+                activeUsersMath &&
+                (values.querySource as TrendsQuery)?.interval &&
+                enabledIntervals[(values.querySource as TrendsQuery).interval as IntervalType].disabledReason
+            ) {
+                if (values.interval === 'hour') {
+                    lemonToast.info(
+                        `Switched to grouping by day, because "${BASE_MATH_DEFINITIONS[activeUsersMath].name}" does not support grouping by ${values.interval}.`
+                    )
+                    actions.updateQuerySource({ interval: 'day' } as Partial<InsightQueryNode>)
+                } else {
+                    lemonToast.info(
+                        `Switched to grouping by week, because "${BASE_MATH_DEFINITIONS[activeUsersMath].name}" does not support grouping by ${values.interval}.`
+                    )
+                    actions.updateQuerySource({ interval: 'week' } as Partial<InsightQueryNode>)
+                }
+                return
+            }
+
+            if (
+                !date_from ||
+                (objectsEqual(date_from, previousDateRange.date_from) &&
+                    objectsEqual(date_to, previousDateRange.date_to))
+            ) {
+                return
+            }
+
+            // automatically set an interval for fixed date ranges
+            if (
+                date_from &&
+                date_to &&
+                dayjs(querySource.dateRange?.date_from).isValid() &&
+                dayjs(querySource.dateRange?.date_to).isValid()
+            ) {
+                if (dayjs(date_to).diff(dayjs(date_from), 'day') <= 3) {
+                    actions.updateQuerySource({ interval: 'hour' } as Partial<InsightQueryNode>)
+                } else if (dayjs(date_to).diff(dayjs(date_from), 'month') <= 3) {
+                    actions.updateQuerySource({ interval: 'day' } as Partial<InsightQueryNode>)
+                } else {
+                    actions.updateQuerySource({ interval: 'month' } as Partial<InsightQueryNode>)
+                }
+                return
+            }
+            // get a defaultInterval for dateOptions that have a default value
+            let interval: IntervalType = 'day'
+            for (const { key, values, defaultInterval } of dateMapping) {
+                if (
+                    values[0] === date_from &&
+                    values[1] === (date_to || undefined) &&
+                    key !== 'Custom' &&
+                    defaultInterval
+                ) {
+                    interval = defaultInterval
+                    break
+                }
+            }
+            actions.updateQuerySource({ interval } as Partial<InsightQueryNode>)
+        },
+    })),
+])
diff --git a/frontend/src/lib/components/PersonPropertySelect/PersonPropertySelect.tsx b/frontend/src/lib/components/PersonPropertySelect/PersonPropertySelect.tsx
@@ -36,6 +36,7 @@ const SortableProperty = ({
             className={clsx(sortable ? 'cursor-move' : 'cursor-auto')}
             {...attributes}
             {...listeners}
+            // eslint-disable-next-line react/forbid-dom-props
             style={{
                 transform: CSS.Translate.toString(transform),
                 transition,

diff --git a/frontend/src/lib/components/PropertyFilters/PropertyFilters.stories.tsx b/frontend/src/lib/components/PropertyFilters/PropertyFilters.stories.tsx
@@ -38,7 +38,6 @@ export function ComparingPropertyFilters(): JSX.Element {
                 propertyFilters={[...propertyFilters]}
                 onChange={() => {}}
                 pageKey={'pageKey'}
-                style={{ marginBottom: 0 }}
                 showNestedArrow
                 eventNames={[]}
             />
@@ -48,7 +47,6 @@ export function ComparingPropertyFilters(): JSX.Element {
                 propertyFilters={[...propertyFilters]}
                 onChange={() => {}}
                 pageKey={'pageKey'}
-                style={{ marginBottom: 0 }}
                 eventNames={[]}
                 disablePopover={true}
             />

diff --git a/frontend/src/lib/components/PropertyFilters/PropertyFilters.tsx b/frontend/src/lib/components/PropertyFilters/PropertyFilters.tsx
@@ -1,4 +1,4 @@
-import React, { CSSProperties, useEffect } from 'react'
+import React, { useEffect } from 'react'
 import { useValues, BindLogic, useActions } from 'kea'
 import { propertyFilterLogic } from './propertyFilterLogic'
 import { FilterRow } from './components/FilterRow'
@@ -15,7 +15,6 @@ interface PropertyFiltersProps {
     pageKey: string
     showConditionBadge?: boolean
     disablePopover?: boolean
-    style?: CSSProperties
     taxonomicGroupTypes?: TaxonomicFilterGroupType[]
     hogQLTable?: string
     showNestedArrow?: boolean
@@ -39,7 +38,6 @@ export function PropertyFilters({
     disablePopover = false, // use bare PropertyFilter without popover
     taxonomicGroupTypes,
     hogQLTable,
-    style = {},
     showNestedArrow = false,
     eventNames = [],
     orFiltering = false,
@@ -62,7 +60,7 @@ export function PropertyFilters({
     }, [propertyFilters])
 
     return (
-        <div className="PropertyFilters" style={style}>
+        <div className="PropertyFilters">
             {showNestedArrow && !disablePopover && <div className="PropertyFilters__prefix">{<>&#8627;</>}</div>}
             <div className="PropertyFilters__content">
                 <BindLogic logic={propertyFilterLogic} props={logicProps}>

diff --git a/frontend/src/lib/components/PropertyFilters/components/OperatorValueSelect.tsx b/frontend/src/lib/components/PropertyFilters/components/OperatorValueSelect.tsx
@@ -126,7 +126,7 @@ export function OperatorValueSelect({
                 />
             </div>
             {!isOperatorFlag(currentOperator || PropertyOperator.Exact) && type && propkey && (
-                <div className="flex-1" style={{ minWidth: '10rem' }} data-attr="taxonomic-value-select">
+                <div className="flex-1 min-w-40" data-attr="taxonomic-value-select">
                     <PropertyValue
                         type={type}
                         key={propkey}

diff --git a/frontend/src/lib/components/PropertyFilters/components/PropertyFiltersDisplay.tsx b/frontend/src/lib/components/PropertyFilters/components/PropertyFiltersDisplay.tsx
@@ -1,15 +1,9 @@
-import { CSSProperties } from 'react'
 import { AnyPropertyFilter } from '~/types'
 import { PropertyFilterButton } from './PropertyFilterButton'
 
-type Props = {
-    filters: AnyPropertyFilter[]
-    style?: CSSProperties
-}
-
-const PropertyFiltersDisplay: React.FunctionComponent<Props> = ({ filters, style }: Props) => {
+const PropertyFiltersDisplay = ({ filters }: { filters: AnyPropertyFilter[] }): JSX.Element => {
     return (
-        <div className="PropertyFilters mb-4" style={style}>
+        <div className="PropertyFilters flex-wrap">
             {filters &&
                 filters.map((item) => {
                     return <PropertyFilterButton key={item.key} item={item} />

diff --git a/frontend/src/lib/components/PropertyGroupFilters/PropertyGroupFilters.tsx b/frontend/src/lib/components/PropertyGroupFilters/PropertyGroupFilters.tsx
@@ -113,7 +113,6 @@ export function PropertyGroupFilters({
                                                             ? (group.values as AnyPropertyFilter[])
                                                             : null
                                                     }
-                                                    style={{ marginBottom: 0 }}
                                                     onChange={(properties) => {
                                                         setPropertyFilters(properties, propertyGroupIndex)
                                                     }}

diff --git a/frontend/src/lib/components/SeriesGlyph.tsx b/frontend/src/lib/components/SeriesGlyph.tsx
@@ -10,6 +10,7 @@ interface SeriesGlyphProps {
 
 export function SeriesGlyph({ className, style, children, variant }: SeriesGlyphProps): JSX.Element {
     return (
+        // eslint-disable-next-line react/forbid-dom-props
         <div className={`graph-series-glyph ${variant || ''} ${className}`} style={style}>
             {children}
         </div>

diff --git a/frontend/src/lib/components/Table/Table.tsx b/frontend/src/lib/components/Table/Table.tsx
@@ -13,7 +13,7 @@ export function createdAtColumn<T extends Record<string, any> = Record<string, a
         render: function RenderCreatedAt(_, item): JSX.Element | undefined | '' {
             return (
                 item.created_at && (
-                    <div style={{ whiteSpace: 'nowrap' }}>
+                    <div className="whitespace-nowrap">
                         <TZLabel time={item.created_at} />
                     </div>
                 )
@@ -33,6 +33,7 @@ export function createdByColumn<T extends Record<string, any> = Record<string, a
                     {item.created_by && (
                         <ProfilePicture name={item.created_by.first_name} email={item.created_by.email} size="md" />
                     )}
+                    {/* eslint-disable-next-line react/forbid-dom-props */}
                     <div style={{ maxWidth: 250, width: 'auto', verticalAlign: 'middle', marginLeft: 8 }}>
                         {item.created_by ? item.created_by.first_name || item.created_by.email : '-'}
                     </div>

diff --git a/frontend/src/lib/components/Table/utils.tsx b/frontend/src/lib/components/Table/utils.tsx
@@ -2,7 +2,7 @@ import { useWindowSize } from 'lib/hooks/useWindowSize'
 import { getBreakpoint } from 'lib/utils/responsiveUtils'
 
 export function normalizeColumnTitle(title: string | JSX.Element): JSX.Element {
-    return <span style={{ whiteSpace: 'nowrap' }}>{title}</span>
+    return <span className="whitespace-nowrap">{title}</span>
 }
 
 // Returns a boolean indicating whether table should be scrolling or not given a specific

diff --git a/frontend/src/lib/components/TaxonomicFilter/InfiniteSelectResults.tsx b/frontend/src/lib/components/TaxonomicFilter/InfiniteSelectResults.tsx
@@ -107,7 +107,7 @@ export function InfiniteSelectResults({
             </div>
             {taxonomicGroupTypes.map((groupType) => {
                 return (
-                    <div key={groupType} style={{ display: groupType === openTab ? 'block' : 'none', marginTop: 8 }}>
+                    <div key={groupType} className={clsx('mt-2', groupType === openTab ? 'block' : 'hidden')}>
                         <BindLogic
                             logic={infiniteListLogic}
                             props={{ ...taxonomicFilterLogicProps, listGroupType: groupType }}

diff --git a/frontend/src/lib/lemon-ui/LemonSelect/LemonSelect.stories.tsx b/frontend/src/lib/lemon-ui/LemonSelect/LemonSelect.stories.tsx
@@ -62,7 +62,7 @@ SectionedOptions.args = {
             options: [{ value: 'tomato', label: 'Tomato??', disabled: true }],
             footer: (
                 <div className="bg-side rounded p-2">
-                    <p className="text-muted" style={{ maxWidth: '15rem' }}>
+                    <p className="text-muted max-w-60">
                         I am a custom footer! <br />
                         This might be a good time to tell you about our premium features...
                     </p>

diff --git a/frontend/src/lib/lemon-ui/ProfilePicture/ProfilePicture.tsx b/frontend/src/lib/lemon-ui/ProfilePicture/ProfilePicture.tsx
@@ -1,7 +1,7 @@
 import clsx from 'clsx'
 import { useValues } from 'kea'
 import md5 from 'md5'
-import { CSSProperties, useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { userLogic } from 'scenes/userLogic'
 import { IconRobot } from '../icons'
 import { Lettermark, LettermarkColor } from '../Lettermark/Lettermark'
@@ -13,7 +13,6 @@ export interface ProfilePictureProps {
     email?: string
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'
     showName?: boolean
-    style?: CSSProperties
     className?: string
     title?: string
     index?: number
@@ -25,7 +24,6 @@ export function ProfilePicture({
     email,
     size = 'lg',
     showName,
-    style,
     className,
     index,
     title,
@@ -64,15 +62,14 @@ export function ProfilePicture({
                 src={gravatarUrl}
                 title={title || `This is the Gravatar for ${combinedNameAndEmail}`}
                 alt=""
-                style={style}
             />
         )
     } else {
         pictureComponent =
             type === 'bot' ? (
                 <IconRobot className={clsx(pictureClass, 'p-0.5')} />
             ) : (
-                <span className={pictureClass} style={style}>
+                <span className={pictureClass}>
                     <Lettermark
                         name={combinedNameAndEmail}
                         index={index}

diff --git a/frontend/src/lib/taxonomy.tsx b/frontend/src/lib/taxonomy.tsx
@@ -142,8 +142,8 @@ export const KEY_MAPPING: KeyMappingInterface = {
             description: (
                 <span>
                     This variable will be set to the distinct ID if you've called{' '}
-                    <pre style={{ display: 'inline' }}>posthog.identify('distinct id')</pre>. If the user is anonymous,
-                    it'll be empty.
+                    <pre className="inline">posthog.identify('distinct id')</pre>. If the user is anonymous, it'll be
+                    empty.
                 </span>
             ),
         },

diff --git a/frontend/src/queries/nodes/EventsNode/EventPropertyFilters.tsx b/frontend/src/queries/nodes/EventsNode/EventPropertyFilters.tsx
@@ -36,7 +36,6 @@ export function EventPropertyFilters({ query, setQuery }: EventPropertyFiltersPr
                 }
             }}
             pageKey={`EventPropertyFilters.${id}`}
-            style={{ marginBottom: 0, marginTop: 0 }}
             eventNames={eventNames}
         />
     ) : (

diff --git a/frontend/src/queries/nodes/InsightViz/PropertyGroupFilters/PropertyGroupFilters.tsx b/frontend/src/queries/nodes/InsightViz/PropertyGroupFilters/PropertyGroupFilters.tsx
@@ -101,7 +101,6 @@ export function PropertyGroupFilters({
                                                             ? (group.values as AnyPropertyFilter[])
                                                             : null
                                                     }
-                                                    style={{ marginBottom: 0 }}
                                                     onChange={(properties) => {
                                                         setPropertyFilters(properties, propertyGroupIndex)
                                                     }}
-Original file line number
+Diff line change
@@ Expand Up @@
                     }
                 }}
                 pageKey={`EventPropertyFilters.${id}`}
-                style={{ marginBottom: 0, marginTop: 0 }}
                 eventNames={eventNames}
             />
         ) : (
@@ Expand Down @@