chore(frontend): enforce inline style linting (#19134)

* chore: enforce inline style linting * fix or ignore inline styles * non-breaking spaces * fix table header * Update UI snapshots for `chromium` (1) * Update UI snapshots for `chromium` (2) * Update UI snapshots for `chromium` (2) --------- Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Michael Matloka <[email protected]>
PostHog · Dec 11, 2023 · 99f7d4a · 99f7d4a
1 parent 7531465
commit 99f7d4a
Show file tree

Hide file tree

Showing 33 changed files with 79 additions and 77 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -126,7 +126,7 @@ module.exports = {
             },
         ],
         'react/forbid-dom-props': [
-            'warn',
+            'error',
             {
                 forbid: [
                     {

diff --git a/frontend/__snapshots__/lemon-ui-colors--color-palette.png b/frontend/__snapshots__/lemon-ui-colors--color-palette.png
diff --git a/frontend/__snapshots__/scenes-app-experiments--complete-funnel-experiment.png b/frontend/__snapshots__/scenes-app-experiments--complete-funnel-experiment.png
diff --git a/frontend/__snapshots__/scenes-app-feature-flags--new-feature-flag.png b/frontend/__snapshots__/scenes-app-feature-flags--new-feature-flag.png
diff --git a/frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelWelcome.tsx b/frontend/src/layout/navigation-3000/sidepanel/panels/SidePanelWelcome.tsx
@@ -32,6 +32,7 @@ type RowProps = {
 }
 
 const Row = ({ className, columns, children }: RowProps): JSX.Element => (
+    // eslint-disable-next-line react/forbid-dom-props
     <div className={clsx('gap-4 grid', className)} style={{ gridTemplateColumns: columns ? columns : '100%' }}>
         {children}
     </div>
@@ -66,6 +67,7 @@ const Image = ({
     width?: number | string
     height?: number | string
     style?: React.CSSProperties
+    // eslint-disable-next-line react/forbid-dom-props
 }): JSX.Element => <img src={src} alt={alt} width={width} height={height} style={style} className="mt-2" />
 
 export const SidePanelWelcome = (): JSX.Element => {
@@ -96,6 +98,7 @@ export const SidePanelWelcome = (): JSX.Element => {
                     <p className="text-sm font-medium mb-3 opacity-75">We're past 0 to 1.</p>
                     <p
                         className="text-sm font-medium mb-4 opacity-75"
+                        // eslint-disable-next-line react/forbid-dom-props
                         style={{ maxWidth: 'min(calc(50% - 1rem), 16rem)' }}
                     >
                         It's time to go from 1 to&nbsp;3000. And&nbsp;this is just the&nbsp;beginning…
@@ -247,7 +250,7 @@ export const SidePanelWelcome = (): JSX.Element => {
                         Share feedback
                     </LemonButton>
                 </div>
-                <div className="-mb-3" style={{ fontSize: 13 }}>
+                <div className="-mb-3" style={{ fontSize: 13 /* eslint-disable-line react/forbid-dom-props */ }}>
                     <IconArrowLeft className="text-base mr-2 inline" />
                     <span className="m-0">
                         <strong>Pro tip:</strong> Access this panel again from the{' '}

diff --git a/frontend/src/lib/components/CopyToClipboard.tsx b/frontend/src/lib/components/CopyToClipboard.tsx
@@ -62,6 +62,7 @@ export function CopyToClipboardInline({
                     isValueSensitive && 'ph-no-capture',
                     className
                 )}
+                // eslint-disable-next-line react/forbid-dom-props
                 style={style}
                 onClick={!selectable ? copy : undefined}
                 {...props}

diff --git a/frontend/src/lib/components/DefinitionPopover/DefinitionPopover.tsx b/frontend/src/lib/components/DefinitionPopover/DefinitionPopover.tsx
@@ -1,5 +1,6 @@
 import './DefinitionPopover.scss'
 
+import { ProfilePicture } from '@posthog/lemon-ui'
 import { Divider, DividerProps } from 'antd'
 import clsx from 'clsx'
 import { useActions, useValues } from 'kea'
@@ -11,7 +12,6 @@ import { Link } from 'lib/lemon-ui/Link'
 import { Tooltip } from 'lib/lemon-ui/Tooltip'
 import { getKeyMapping } from 'lib/taxonomy'
 import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
-import { Owner } from 'scenes/events/Owner'
 
 import { KeyMapping, UserBasicType } from '~/types'
 
@@ -159,10 +159,7 @@ function TimeMeta({
                 {updatedBy && (
                     <span className="definition-popover-timemeta-user">
                         <span className="definition-popover-timemeta-spacer">by</span>
-                        <Owner
-                            user={updatedBy}
-                            style={{ display: 'inline-flex', fontWeight: 600, paddingLeft: 4, whiteSpace: 'nowrap' }}
-                        />
+                        <Owner user={updatedBy} />
                     </span>
                 )}
             </span>
@@ -174,11 +171,7 @@ function TimeMeta({
                 <span className="definition-popover-timemeta-time">Created {dayjs().to(dayjs.utc(createdAt))} </span>
                 {updatedBy && (
                     <span className="definition-popover-timemeta-user">
-                        <span className="definition-popover-timemeta-spacer">by</span>{' '}
-                        <Owner
-                            user={createdBy}
-                            style={{ display: 'inline-flex', fontWeight: 600, paddingLeft: 4, whiteSpace: 'nowrap' }}
-                        />
+                        <span className="definition-popover-timemeta-spacer">by</span> <Owner user={createdBy} />
                     </span>
                 )}
             </div>
@@ -187,6 +180,21 @@ function TimeMeta({
     return <></>
 }
 
+function Owner({ user }: { user?: UserBasicType | null }): JSX.Element {
+    return (
+        <>
+            {user?.uuid ? (
+                <div className="flex items-center flex-row">
+                    <ProfilePicture name={user.first_name} email={user.email} size="sm" />
+                    <span className="pl-2 inline-flex font-semibold pl-1 whitespace-nowrap">{user.first_name}</span>
+                </div>
+            ) : (
+                <span className="text-muted italic inline-flex font-semibold pl-1 whitespace-nowrap">No owner</span>
+            )}
+        </>
+    )
+}
+
 function HorizontalLine({ children, ...props }: DividerProps): JSX.Element {
     return (
         <Divider className="definition-popover-divider" {...props}>

diff --git a/frontend/src/lib/components/PageHeader.tsx b/frontend/src/lib/components/PageHeader.tsx
@@ -12,7 +12,6 @@ interface PageHeaderProps {
     title: string | JSX.Element
     caption?: string | JSX.Element | null | false
     buttons?: JSX.Element | false
-    style?: React.CSSProperties
     tabbedPage?: boolean // Whether the page has tabs for secondary navigation
     delimited?: boolean
     notebookProps?: Pick<DraggableToNotebookProps, 'href' | 'node' | 'properties'>
@@ -22,7 +21,6 @@ export function PageHeader({
     title,
     caption,
     buttons,
-    style,
     tabbedPage,
     delimited,
     notebookProps,
@@ -33,8 +31,7 @@ export function PageHeader({
     return (
         <>
             {!is3000 && (
-                // eslint-disable-next-line react/forbid-dom-props
-                <div className="page-title-row flex justify-between" style={style}>
+                <div className="page-title-row flex justify-between">
                     <div className="min-w-0">
                         {!is3000 &&
                             (notebookProps ? (

diff --git a/frontend/src/lib/lemon-ui/LemonTable/LemonTable.scss b/frontend/src/lib/lemon-ui/LemonTable/LemonTable.scss
@@ -83,6 +83,15 @@
         }
     }
 
+    &--lowercase-header {
+        .LemonTable__content > table {
+            > thead {
+                text-transform: none;
+                letter-spacing: normal;
+            }
+        }
+    }
+
     &.LemonTable--inset {
         --row-horizontal-padding: 0.5rem;
     }

diff --git a/frontend/src/lib/lemon-ui/LemonTable/LemonTable.tsx b/frontend/src/lib/lemon-ui/LemonTable/LemonTable.tsx
@@ -223,26 +223,25 @@ export function LemonTable<T extends Record<string, any>>({
                 stealth && 'LemonTable--stealth',
                 isScrollableLeft && 'scrollable--left',
                 isScrollableRight && 'scrollable--right',
+                !uppercaseHeader && 'LemonTable--lowercase-header',
                 className
             )}
+            // eslint-disable-next-line react/forbid-dom-props
             style={style}
             data-attr={dataAttr}
         >
             <div className="scrollable__inner" ref={scrollRef}>
                 <div className="LemonTable__content">
                     <table>
                         <colgroup>
-                            {!!expandable && <col style={{ width: 0 }} /> /* Expand/collapse column */}
+                            {!!expandable && <col className="w-0" /> /* Expand/collapse column */}
                             {columns.map((column, index) => (
+                                // eslint-disable-next-line react/forbid-dom-props
                                 <col key={`LemonTable-col-${index}`} style={{ width: column.width }} />
                             ))}
                         </colgroup>
                         {showHeader && (
-                            <thead
-                                style={
-                                    !uppercaseHeader ? { textTransform: 'none', letterSpacing: 'normal' } : undefined
-                                }
-                            >
+                            <thead>
                                 {columnGroups.some((group) => group.title) && (
                                     <tr className="LemonTable__row--grouping">
                                         {!!expandable && <th className="LemonTable__toggle" /> /* Expand/collapse */}

diff --git a/frontend/src/lib/lemon-ui/colors.stories.tsx b/frontend/src/lib/lemon-ui/colors.stories.tsx
@@ -94,7 +94,7 @@ export function ColorPalette(): JSX.Element {
     return (
         <div className="flex gap-4 flex-wrap items-start">
             {Object.keys(colorGroups).map((group) => (
-                <div key={group} className="flex flex-col" style={{ width: 150, height: 200 }}>
+                <div key={group} className="flex flex-col w-40 h-50">
                     <div className="font-bold text-ellipsis mb-2">{group}</div>
                     <div className="rounded-lg overflow-hidden flex flex-col flex-1">
                         {colorGroups[group].map((color: string) => (

diff --git a/frontend/src/scenes/ResourcePermissionModal.tsx b/frontend/src/scenes/ResourcePermissionModal.tsx
@@ -183,7 +183,7 @@ export function ResourcePermission({
                 <>
                     <h5 className="mt-4">Roles</h5>
                     {roles.length > 0 ? (
-                        <div className="pb-2 rounded overflow-y-auto" style={{ maxHeight: 300 }}>
+                        <div className="pb-2 rounded overflow-y-auto max-h-80">
                             {roles.map((role) => {
                                 return (
                                     <RoleRow

diff --git a/frontend/src/scenes/dashboard/DashboardCollaborators.tsx b/frontend/src/scenes/dashboard/DashboardCollaborators.tsx
@@ -90,7 +90,7 @@ export function DashboardCollaboration({ dashboardId }: { dashboardId: Dashboard
                                 </div>
                             )}
                             <h5 className="mt-4">Project members with access</h5>
-                            <div className="mt-2 pb-2 rounded overflow-y-auto" style={{ maxHeight: 300 }}>
+                            <div className="mt-2 pb-2 rounded overflow-y-auto max-h-80">
                                 {allCollaborators.map((collaborator) => (
                                     <CollaboratorRow
                                         key={collaborator.user.uuid}

diff --git a/frontend/src/scenes/early-access-features/InstructionsModal.tsx b/frontend/src/scenes/early-access-features/InstructionsModal.tsx
@@ -28,10 +28,7 @@ export function InstructionsModal({ onClose, visible, featureFlag }: Instruction
                             Give your users a{' '}
                             <Link to={'https://app.posthog.com/project/apps/574'}>prebuilt widget</Link> to opt-in to
                             features
-                            <img
-                                style={{ maxHeight: '100%', maxWidth: '100%', marginTop: 10 }}
-                                src={EarlyAccessFeatureImage}
-                            />
+                            <img className="max-h-full max-w-full mt-2.5" src={EarlyAccessFeatureImage} />
                         </div>
                     ),
                 },

diff --git a/frontend/src/scenes/events/Owner.tsx b/frontend/src/scenes/events/Owner.tsx
diff --git a/frontend/src/scenes/experiments/Experiment.tsx b/frontend/src/scenes/experiments/Experiment.tsx
@@ -527,7 +527,6 @@ export function Experiment(): JSX.Element {
                 <div className="view-experiment">
                     <div className="draft-header">
                         <PageHeader
-                            style={{ paddingRight: 8 }}
                             title={
                                 <div className="flex items-center gap-2">
                                     <span>{experiment?.name}</span>

diff --git a/frontend/src/scenes/feature-flags/FeatureFlag.tsx b/frontend/src/scenes/feature-flags/FeatureFlag.tsx
@@ -323,9 +323,7 @@ export function FeatureFlag({ id }: { id?: string } = {}): JSX.Element {
                                                 autoCorrect="off"
                                                 spellCheck={false}
                                             />
-                                            <span style={{ fontSize: 13 }} className="text-muted">
-                                                Feature flag keys must be unique
-                                            </span>
+                                            <span className="text-muted text-sm">Feature flag keys must be unique</span>
                                         </>
                                     )}
                                 </Field>
@@ -1017,7 +1015,7 @@ function FeatureFlagRollout({ readOnly }: { readOnly?: boolean }): JSX.Element {
                                                     />
                                                     {filterGroups.filter((group) => group.variant === variant.key)
                                                         .length > 0 && (
-                                                        <span style={{ fontSize: 11 }} className="text-muted">
+                                                        <span className="text-muted text-xs">
                                                             Overridden by{' '}
                                                             <strong>
                                                                 {variantConcatWithPunctuation(

diff --git a/frontend/src/scenes/funnels/FunnelBarGraph/MetricRow.tsx b/frontend/src/scenes/funnels/FunnelBarGraph/MetricRow.tsx
@@ -3,7 +3,7 @@ export function MetricRow({ title, value }: { title: string; value: string | num
         <div className="flex justify-between w-full">
             <div>{title}</div>
             <div>
-                <strong style={{ paddingLeft: 6 }}>{value}</strong>
+                <strong className="pl-1.5">{value}</strong>
             </div>
         </div>
     )

diff --git a/frontend/src/scenes/groups/GroupsIntroduction.tsx b/frontend/src/scenes/groups/GroupsIntroduction.tsx
@@ -14,7 +14,7 @@ export function GroupsIntroduction({ access }: Props): JSX.Element {
     if (access === GroupsAccessStatus.NoAccess) {
         header = (
             <>
-                Introducing <span className="highlight">Group Analytics</span>!
+                Introducing <span className="highlight">Group&nbsp;Analytics</span>!
             </>
         )
         subtext = (
@@ -45,17 +45,17 @@ export function GroupsIntroduction({ access }: Props): JSX.Element {
 
 export function GroupIntroductionFooter({ needsUpgrade }: { needsUpgrade: boolean }): JSX.Element {
     return (
-        <div className="text-sm bg-mid rounded p-2" style={{ maxWidth: '15rem' }}>
+        <div className="text-sm bg-mid rounded p-2 max-w-60">
             {needsUpgrade ? (
                 <>
-                    Track usage of groups of users with Group Analytics.{' '}
+                    Track usage of groups of users with Group&nbsp;Analytics.{' '}
                     <Link
                         className="font-medium"
                         to="/organization/billing"
                         target="_blank"
                         data-attr="group-analytics-upgrade"
                     >
-                        Upgrade now
+                        Upgrade now
                     </Link>{' '}
                     or{' '}
                     <Link

diff --git a/frontend/src/scenes/insights/InsightSkeleton.tsx b/frontend/src/scenes/insights/InsightSkeleton.tsx
@@ -16,7 +16,7 @@ export function InsightSkeleton(): JSX.Element {
                         <LemonSkeleton.Row repeat={3} />
                     </div>
                 </div>
-                <div className="border rounded p-6" style={{ minHeight: 600 }} />
+                <div className="border rounded p-6 min-h-100" />
             </div>
         </>
     )

diff --git a/frontend/src/scenes/insights/InsightTooltip/InsightTooltip.stories.tsx b/frontend/src/scenes/insights/InsightTooltip/InsightTooltip.stories.tsx
@@ -154,7 +154,7 @@ export function InWrapper(): JSX.Element {
     useMountedLogic(cohortsModel)
 
     return (
-        <div style={{ minHeight: 200 }}>
+        <div className="min-h-50">
             <div className="InsightTooltipWrapper">
                 <InsightTooltip
                     date={data.date}

diff --git a/frontend/src/scenes/insights/InsightTooltip/LEGACY_InsightTooltip.tsx b/frontend/src/scenes/insights/InsightTooltip/LEGACY_InsightTooltip.tsx
@@ -1,5 +1,6 @@
 import './LEGACY_InsightTooltip.scss'
 
+import clsx from 'clsx'
 import { DateDisplay } from 'lib/components/DateDisplay'
 import { IconHandClick } from 'lib/lemon-ui/icons'
 
@@ -32,7 +33,7 @@ export function LEGACY_InsightTooltip({
     hideHeader,
 }: InsightTooltipProps): JSX.Element {
     return (
-        <div className={`inner-tooltip${bodyLines.length > 1 ? ' multiple' : ''}`} style={{ maxWidth: 300 }}>
+        <div className={clsx('max-w-80', `inner-tooltip${bodyLines.length > 1 ? ' multiple' : ''}`)}>
             {!hideHeader && (
                 <header>
                     {referenceDate && interval && !preferAltTitle ? (

diff --git a/frontend/src/scenes/instance/SystemStatus/StaffUsersTab.tsx b/frontend/src/scenes/instance/SystemStatus/StaffUsersTab.tsx
@@ -74,7 +74,7 @@ export function StaffUsersTab(): JSX.Element {
                                         {myself?.uuid === user.uuid ? (
                                             <>
                                                 Please confirm you want to <b>remove yourself</b> as a staff user.
-                                                <div className="font-normal" style={{ color: 'var(--muted-alt)' }}>
+                                                <div className="font-normal text-muted-alt">
                                                     Only another staff user will be able to add you again.
                                                 </div>
                                             </>

diff --git a/frontend/src/scenes/persons/RelatedFeatureFlags.tsx b/frontend/src/scenes/persons/RelatedFeatureFlags.tsx
@@ -82,7 +82,7 @@ export function RelatedFeatureFlags({ distinctId, groups }: Props): JSX.Element
             width: 150,
             render: function Render(_, featureFlag: RelatedFeatureFlag) {
                 return (
-                    <div style={{ wordBreak: 'break-word' }}>
+                    <div className="break-words">
                         {featureFlag.active && featureFlag.value
                             ? capitalizeFirstLetter(featureFlag.value.toString())
                             : 'False'}
@@ -101,7 +101,7 @@ export function RelatedFeatureFlags({ distinctId, groups }: Props): JSX.Element
                         {featureFlag.active ? <>{featureFlagMatchMapping[featureFlag.evaluation.reason]}</> : '--'}
 
                         {matchesSet && (
-                            <span className="simple-tag ml-2" style={{ background: 'var(--primary-highlight)' }}>
+                            <span className="simple-tag ml-2 bg-primary-highlight">
                                 Set {(featureFlag.evaluation.condition_index ?? 0) + 1}
                             </span>
                         )}

diff --git a/frontend/src/scenes/pipeline/Transformations.tsx b/frontend/src/scenes/pipeline/Transformations.tsx
@@ -365,6 +365,7 @@ const MinimalAppView = ({ pluginConfig, order }: { pluginConfig: PluginConfigTyp
         <div
             ref={setNodeRef}
             className="flex gap-2 cursor-move border rounded p-2 items-center bg-bg-light"
+            // eslint-disable-next-line react/forbid-dom-props
             style={{
                 position: 'relative',
                 transform: CSS.Transform.toString(transform),

diff --git a/frontend/src/scenes/session-recordings/player/icons.tsx b/frontend/src/scenes/session-recordings/player/icons.tsx
@@ -10,6 +10,7 @@ export function IconWindowOld({ value, className = '', size = 'medium' }: IconWi
     const shortValue = typeof value === 'number' ? value : String(value).charAt(0)
     return (
         <div className={clsx('flex justify-center items-center relative shrink-0', className)}>
+            {/* eslint-disable-next-line react/forbid-dom-props */}
             <span className="absolute font-semibold mt-0.5" style={{ fontSize: size === 'medium' ? 8 : 6 }}>
                 {shortValue}
             </span>
-Original file line number
+Diff line change
@@ Expand Up / @@ -126,7 +126,7 @@ module.exports = { @@
                 },
             ],
             'react/forbid-dom-props': [
-                'warn',
+                'error',
                 {
                     forbid: [
                         {
@@ Expand Down @@