drop eslint back to warn

PostHog · Oct 31, 2023 · e2387f8 · e2387f8
1 parent 190ae65
commit e2387f8
Show file tree

Hide file tree

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

diff --git a/frontend/src/scenes/cohorts/CohortFilters/CohortCriteriaGroups.tsx b/frontend/src/scenes/cohorts/CohortFilters/CohortCriteriaGroups.tsx
@@ -48,7 +48,7 @@ export function CohortCriteriaGroups(logicProps: CohortLogicProps): JSX.Element
                                                 onChange={(value) => setInnerGroupType(value, groupIndex)}
                                                 value={group.type}
                                             />
-                                            <div style={{ flex: 1, minWidth: '0.5rem' }} />
+                                            <div className="flex-1 min-w-2" />
                                             <LemonButton
                                                 icon={<IconCopy />}
                                                 status="primary-alt"

diff --git a/frontend/src/scenes/cohorts/CohortFilters/CohortCriteriaRowBuilder.tsx b/frontend/src/scenes/cohorts/CohortFilters/CohortCriteriaRowBuilder.tsx
@@ -121,7 +121,7 @@ export function CohortCriteriaRowBuilder({
                             />
                         )}
                     </Row>
-                    <div style={{ display: 'flex' }}>
+                    <div className="flex">
                         <Col>
                             <span className="CohortCriteriaRow__Criteria__arrow">&#8627;</span>
                         </Col>

diff --git a/frontend/src/scenes/dashboard/DashboardCollaborators.tsx b/frontend/src/scenes/dashboard/DashboardCollaborators.tsx
@@ -88,12 +88,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" style={{ maxHeight: 300 }}>
                                 {allCollaborators.map((collaborator) => (
                                     <CollaboratorRow
                                         key={collaborator.user.uuid}

diff --git a/frontend/src/scenes/dashboard/dashboards/NoDashboards.tsx b/frontend/src/scenes/dashboard/dashboards/NoDashboards.tsx
@@ -21,7 +21,7 @@ export const NoDashboards = (): JSX.Element => {
                         })
                     }
                 >
-                    <div style={{ textAlign: 'center', fontSize: 40 }}>
+                    <div className="text-4xl text-center">
                         <AppstoreAddOutlined />
                     </div>
                 </Card>
@@ -36,7 +36,7 @@ export const NoDashboards = (): JSX.Element => {
                         })
                     }
                 >
-                    <div style={{ textAlign: 'center', fontSize: 40 }}>
+                    <div className="text-4xl text-center">
                         <AppstoreAddOutlined />
                     </div>
                 </Card>

diff --git a/frontend/src/scenes/experiments/ExperimentImplementationDetails.tsx b/frontend/src/scenes/experiments/ExperimentImplementationDetails.tsx
@@ -111,7 +111,7 @@ export function ExperimentImplementationDetails({ experiment }: ExperimentImplem
             title={<span className="card-secondary">Feature flag usage and implementation</span>}
             className="experiment-implementation-details"
         >
-            <div style={{ justifyContent: 'space-between' }} className="flex mb-2">
+            <div className="flex mb-2 justify-between">
                 <div>
                     <span className="mr-2">Variant group</span>
                     <Select

diff --git a/frontend/src/scenes/experiments/ExperimentPreview.tsx b/frontend/src/scenes/experiments/ExperimentPreview.tsx
@@ -225,7 +225,7 @@ export function ExperimentPreview({
                         </Col>
                         <Col span={12}>
                             <div className="card-secondary">Participants</div>
-                            <div style={{ display: 'inline-block' }}>
+                            <div className="inline-block">
                                 {targetingProperties ? (
                                     <>
                                         {groupFilters(targetingProperties, undefined, aggregationLabel)}

diff --git a/frontend/src/scenes/feature-flags/FeatureFlag.tsx b/frontend/src/scenes/feature-flags/FeatureFlag.tsx
@@ -890,7 +890,7 @@ function FeatureFlagRollout({ readOnly }: { readOnly?: boolean }): JSX.Element {
                             <Col span={4}>Variant key</Col>
                             <Col span={6}>Description</Col>
                             <Col span={8}>
-                                <div style={{ display: 'flex', flexDirection: 'column', fontWeight: 'normal' }}>
+                                <div className="flex flex-col" style={{ fontWeight: 'normal' }}>
                                     <b>Payload</b>
                                     <span className="text-muted">
                                         Specify return payload when the variant key matches

diff --git a/frontend/src/scenes/funnels/FunnelBarGraph/MetricRow.tsx b/frontend/src/scenes/funnels/FunnelBarGraph/MetricRow.tsx
@@ -1,6 +1,6 @@
 export function MetricRow({ title, value }: { title: string; value: string | number }): JSX.Element {
     return (
-        <div style={{ width: '100%', display: 'flex', justifyContent: 'space-between' }}>
+        <div className="flex justify-between w-full">
             <div>{title}</div>
             <div>
                 <strong style={{ paddingLeft: 6 }}>{value}</strong>

diff --git a/frontend/src/scenes/insights/views/Histogram/Histogram.tsx b/frontend/src/scenes/insights/views/Histogram/Histogram.tsx
@@ -260,5 +260,6 @@ export function Histogram({
 
     /* minWidth required to enforce d3's width calculations on the div wrapping the svg
      so that scrolling horizontally works */
+    //  eslint-disable-next-line react/forbid-dom-props
     return <div className="histogram-container" ref={ref} style={{ minWidth: config.width }} />
 }
diff --git a/frontend/src/scenes/instance/DeadLetterQueue/MetricsTab.tsx b/frontend/src/scenes/instance/DeadLetterQueue/MetricsTab.tsx
@@ -71,12 +71,7 @@ export function MetricsTab(): JSX.Element {
                         }}
                         embedded
                     />
-                    <div
-                        style={{
-                            margin: '1rem',
-                            textAlign: 'center',
-                        }}
-                    >
+                    <div className="m-4 text-center">
                         <Button
                             disabled={rowsPerMetric[row.key].length % ROWS_LIMIT !== 0}
                             onClick={() => loadMoreRows(row.key)}

diff --git a/frontend/src/scenes/instance/SystemStatus/KafkaInspectorTab.tsx b/frontend/src/scenes/instance/SystemStatus/KafkaInspectorTab.tsx
@@ -10,13 +10,11 @@ export function KafkaInspectorTab(): JSX.Element {
 
     return (
         <div>
-            <h3 className="l3" style={{ marginTop: 16 }}>
-                Kafka Inspector
-            </h3>
+            <h3 className="l3 mt-4">Kafka Inspector</h3>
             <div className="mb-4">Debug Kafka messages using the inspector tool.</div>
             <Divider style={{ margin: 0, marginBottom: 16 }} />
             <section>
-                <div style={{ display: 'flex', marginBottom: '0.75rem' }}>
+                <div className="flex mb-3">
                     <Form
                         logic={kafkaInspectorLogic}
                         formKey="fetchKafkaMessage"

diff --git a/frontend/src/scenes/instance/SystemStatus/StaffUsersTab.tsx b/frontend/src/scenes/instance/SystemStatus/StaffUsersTab.tsx
@@ -67,16 +67,11 @@ export function StaffUsersTab(): JSX.Element {
                                 okType: 'primary',
                                 okButtonProps: { className: 'btn-danger' },
                                 content: (
-                                    <div style={{ border: '' }}>
+                                    <div className="border-none">
                                         {myself?.uuid === user.uuid ? (
                                             <>
                                                 Please confirm you want to <b>remove yourself</b> as a staff user.
-                                                <div
-                                                    style={{
-                                                        fontWeight: 'normal',
-                                                        color: 'var(--muted-alt)',
-                                                    }}
-                                                >
+                                                <div className="font-normal" style={{ color: 'var(--muted-alt)' }}>
                                                     Only another staff user will be able to add you again.
                                                 </div>
                                             </>
@@ -99,9 +94,7 @@ export function StaffUsersTab(): JSX.Element {
 
     return (
         <div>
-            <h3 className="l3" style={{ marginTop: 16 }}>
-                Staff Users
-            </h3>
+            <h3 className="l3 mt-4">Staff Users</h3>
             <div className="mb-4">
                 Users who have permissions to manage instance-wide settings. Staff user permissions are set at the{' '}
                 <b>instance-level and are independent of any organization or project permissions.</b>{' '}
@@ -113,7 +106,7 @@ export function StaffUsersTab(): JSX.Element {
             <Divider style={{ margin: 0, marginBottom: 16 }} />
             <section>
                 <div className="flex gap-2 mb-4">
-                    <div style={{ flex: 1 }}>
+                    <div className="flex-1">
                         <LemonSelectMultiple
                             placeholder="Add staff users here…"
                             loading={allUsersLoading}

diff --git a/frontend/src/scenes/organization/Settings/Invites.tsx b/frontend/src/scenes/organization/Settings/Invites.tsx
@@ -98,7 +98,7 @@ export function Invites(): JSX.Element {
 
     return (
         <div>
-            <h2 id="invites" className="subtitle" style={{ justifyContent: 'space-between' }}>
+            <h2 id="invites" className="subtitle justify-between">
                 Pending Invites
                 <LemonButton type="primary" onClick={showInviteModal} data-attr="invite-teammate-button">
                     Invite team member

diff --git a/frontend/src/scenes/organization/Settings/Permissions/Permissions.tsx b/frontend/src/scenes/organization/Settings/Permissions/Permissions.tsx
@@ -54,7 +54,7 @@ export function Permissions({ isRestricted }: RestrictedComponentProps): JSX.Ele
     return (
         <>
             <div className="flex items-center">
-                <div style={{ flexGrow: 1 }}>
+                <div className="grow">
                     <h2 id="roles" className="subtitle">
                         Permission Defaults
                     </h2>

diff --git a/frontend/src/scenes/organization/Settings/Permissions/Roles/Roles.tsx b/frontend/src/scenes/organization/Settings/Permissions/Roles/Roles.tsx
@@ -58,7 +58,7 @@ export function Roles({ isRestricted }: RestrictedComponentProps): JSX.Element {
     return (
         <>
             <div className="flex items-center">
-                <div style={{ flexGrow: 1 }}>
+                <div className="grow">
                     <h2 id="roles" className="subtitle">
                         Roles
                     </h2>

diff --git a/frontend/src/scenes/organization/Settings/VerifiedDomains/VerifiedDomains.tsx b/frontend/src/scenes/organization/Settings/VerifiedDomains/VerifiedDomains.tsx
@@ -27,7 +27,7 @@ export function VerifiedDomains(): JSX.Element {
     return (
         <>
             <div className="flex items-center">
-                <div style={{ flexGrow: 1 }}>
+                <div className="grow">
                     <div id="domain-whitelist" /> {/** For backwards link compatibility. Remove after 2022-06-01. */}
                     <h2 id="authentication-domains" className="subtitle">
                         Authentication domains

diff --git a/frontend/src/scenes/plugins/edit/PluginField.tsx b/frontend/src/scenes/plugins/edit/PluginField.tsx
@@ -77,7 +77,7 @@ export function PluginField({
             ))}
         </Select>
     ) : (
-        <strong style={{ color: 'var(--danger)' }}>
+        <strong className="text-danger">
             Unknown field type "<code>{fieldConfig.type}</code>".
             <br />
             You may need to upgrade PostHog!

diff --git a/frontend/src/scenes/plugins/plugin/PluginImage.tsx b/frontend/src/scenes/plugins/plugin/PluginImage.tsx
@@ -42,6 +42,7 @@ export function PluginImage({
     ) : (
         <div
             className="plugin-image shrink-0"
+            // eslint-disable-next-line react/forbid-dom-props
             style={{
                 width: pixelSize,
                 height: pixelSize,

diff --git a/frontend/src/scenes/plugins/plugin/PluginLogs.tsx b/frontend/src/scenes/plugins/plugin/PluginLogs.tsx
@@ -11,24 +11,24 @@ function PluginLogEntryTypeDisplay(type: PluginLogEntryType): JSX.Element {
     let color: string | undefined
     switch (type) {
         case PluginLogEntryType.Debug:
-            color = 'var(--muted)'
+            color = 'text-muted'
             break
         case PluginLogEntryType.Log:
-            color = 'var(--default)'
+            color = 'text-default'
             break
         case PluginLogEntryType.Info:
-            color = 'var(--blue)'
+            color = 'text-primary'
             break
         case PluginLogEntryType.Warn:
-            color = 'var(--warning)'
+            color = 'text-warning'
             break
         case PluginLogEntryType.Error:
-            color = 'var(--danger)'
+            color = 'text-danger'
             break
         default:
             break
     }
-    return <span style={{ color }}>{type}</span>
+    return <span className={color}>{type}</span>
 }
 
 const columns: ResizableColumnType<PluginLogEntry>[] = [

diff --git a/frontend/src/scenes/plugins/source/PluginSource.tsx b/frontend/src/scenes/plugins/source/PluginSource.tsx
@@ -79,7 +79,7 @@ export function PluginSource({
             title={pluginSourceLoading ? 'Loading...' : `Edit App: ${name}`}
             placement={placement ?? 'left'}
             footer={
-                <div style={{ textAlign: 'right' }}>
+                <div className="text-right">
                     <Button onClick={closePluginSource} style={{ marginRight: 16 }}>
                         Close
                     </Button>
@@ -125,7 +125,7 @@ export function PluginSource({
                                                 }}
                                             />
                                             {!value && createDefaultPluginSource(name)[currentFile] ? (
-                                                <div style={{ marginTop: '0.5rem' }}>
+                                                <div className="mt-2">
                                                     <LemonButton
                                                         type="primary"
                                                         onClick={() =>

diff --git a/frontend/src/scenes/plugins/tabs/apps/InstalledAppsReorderModal.tsx b/frontend/src/scenes/plugins/tabs/apps/InstalledAppsReorderModal.tsx
@@ -16,6 +16,7 @@ const MinimalAppView = ({ plugin, order }: { plugin: PluginTypeWithConfig; order
         <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/project/Settings/ExtraTeamSettings.tsx b/frontend/src/scenes/project/Settings/ExtraTeamSettings.tsx
@@ -43,7 +43,7 @@ function ExtraSettingInput({
     const [value, setValue] = useState(defaultValue)
 
     return (
-        <div className="space-y-4" style={{ maxWidth: '40rem' }}>
+        <div className="space-y-4 max-w-160">
             <LemonInput value={value as any} onChange={setValue} disabled={currentTeamLoading} type={type as any} />
             <LemonButton
                 type="primary"

diff --git a/frontend/src/scenes/project/Settings/index.tsx b/frontend/src/scenes/project/Settings/index.tsx
@@ -56,7 +56,7 @@ function DisplayName(): JSX.Element {
     }
 
     return (
-        <div className="space-y-4" style={{ maxWidth: '40rem' }}>
+        <div className="space-y-4 max-w-160">
             <LemonInput value={name} onChange={setName} disabled={currentTeamLoading} />
             <LemonButton
                 type="primary"

diff --git a/frontend/src/scenes/session-recordings/player/controller/Seekbar.tsx b/frontend/src/scenes/session-recordings/player/controller/Seekbar.tsx
@@ -63,9 +63,9 @@ export function Seekbar(): JSX.Element {
                             ))}
                         </div>
 
-                        {/* eslint-disable-next-line react/forbid-dom-props */}
                         <div
                             className="PlayerSeekbar__currentbar"
+                            // eslint-disable-next-line react/forbid-dom-props
                             style={{ width: `${Math.max(thumbLeftPos, 0)}px` }}
                         />
                         {/* eslint-disable-next-line react/forbid-dom-props */}

diff --git a/frontend/src/scenes/session-recordings/player/icons.tsx b/frontend/src/scenes/session-recordings/player/icons.tsx
@@ -10,7 +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)}>
-            <span className="absolute font-semibold" style={{ fontSize: size === 'medium' ? 8 : 6, marginTop: 2 }}>
+            <span className="absolute font-semibold mt-0.5" style={{ fontSize: size === 'medium' ? 8 : 6 }}>
                 {shortValue}
             </span>
             <svg

diff --git a/frontend/src/scenes/surveys/SurveyEdit.tsx b/frontend/src/scenes/surveys/SurveyEdit.tsx
@@ -699,13 +699,7 @@ export default function SurveyEdit(): JSX.Element {
                                                     description="Use the PostHog API to show/hide your survey programmatically"
                                                     value={SurveyType.API}
                                                 >
-                                                    <div
-                                                        style={{
-                                                            position: 'absolute',
-                                                            left: '1rem',
-                                                            width: 350,
-                                                        }}
-                                                    >
+                                                    <div className="absolute left-4" style={{ width: 350 }}>
                                                         <SurveyAPIEditor survey={survey} />
                                                     </div>
                                                 </PresentationTypeCard>
@@ -929,7 +923,7 @@ export default function SurveyEdit(): JSX.Element {
                 />
             </div>
             <LemonDivider vertical />
-            <div className="flex flex-col items-center h-full w-full sticky top-0 pt-8" style={{ maxWidth: 320 }}>
+            <div className="max-w-80 flex flex-col items-center h-full w-full sticky top-0 pt-8">
                 <SurveyFormAppearance
                     activePreview={selectedQuestion || 0}
                     survey={survey}

diff --git a/frontend/src/scenes/surveys/SurveyView.tsx b/frontend/src/scenes/surveys/SurveyView.tsx
@@ -213,7 +213,7 @@ export function SurveyView({ id }: { id: string }): JSX.Element {
                                                 </div>
                                             )}
                                             {survey.type !== SurveyType.API ? (
-                                                <div className="mt-6" style={{ maxWidth: 320 }}>
+                                                <div className="mt-6 max-w-80">
                                                     <SurveyFormAppearance
                                                         activePreview={selectedQuestion || 0}
                                                         survey={survey}
-Original file line number
+Diff line change
@@ Expand Up / @@ -86,7 +86,7 @@ module.exports = { @@
                 },
             ],
             'react/forbid-dom-props': [
-                'error',
+                'warn',
                 {
                     forbid: [
                         {
@@ Expand Down @@