chore: remove popconfirm (#20793)

PostHog · Mar 8, 2024 · d99d74c · d99d74c
1 parent 1d3c741
commit d99d74c
Show file tree

Hide file tree

Showing 15 changed files with 270 additions and 258 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -119,7 +119,17 @@ module.exports = {
                     },
                     {
                         name: 'antd',
-                        importNames: ['Card', 'Col', 'Row', 'Alert', 'Tooltip', 'Progress', 'Radio', 'Divider'],
+                        importNames: [
+                            'Card',
+                            'Col',
+                            'Row',
+                            'Alert',
+                            'Tooltip',
+                            'Progress',
+                            'Radio',
+                            'Divider',
+                            'Popconfirm',
+                        ],
                         message: 'please use the Lemon equivalent instead',
                     },
                 ],
@@ -252,6 +262,10 @@ module.exports = {
                         element: 'Divider',
                         message: 'use <LemonDivider> instead',
                     },
+                    {
+                        element: 'Popconfirm',
+                        message: 'use <LemonDialog> instead',
+                    },
                 ],
             },
         ],

diff --git a/frontend/__snapshots__/replay-player-failure--recent-recordings-404--dark.png b/frontend/__snapshots__/replay-player-failure--recent-recordings-404--dark.png
diff --git a/frontend/__snapshots__/replay-player-failure--recent-recordings-404--light.png b/frontend/__snapshots__/replay-player-failure--recent-recordings-404--light.png
diff --git a/frontend/src/lib/components/CodeSnippet/CodeSnippet.tsx b/frontend/src/lib/components/CodeSnippet/CodeSnippet.tsx
@@ -1,8 +1,6 @@
 import './CodeSnippet.scss'
 
 import { IconCollapse, IconCopy, IconExpand } from '@posthog/icons'
-import { Popconfirm } from 'antd'
-import { PopconfirmProps } from 'antd/lib/popconfirm'
 import clsx from 'clsx'
 import { useValues } from 'kea'
 import { LemonButton } from 'lib/lemon-ui/LemonButton'
@@ -77,19 +75,12 @@ SyntaxHighlighter.registerLanguage(Language.HTTP, http)
 SyntaxHighlighter.registerLanguage(Language.SQL, sql)
 SyntaxHighlighter.registerLanguage(Language.Kotlin, kotlin)
 
-export interface Action {
-    icon: React.ReactElement
-    title: string
-    callback: () => void
-    popconfirmProps?: Omit<PopconfirmProps, 'onConfirm'>
-}
-
 export interface CodeSnippetProps {
     children: string
     language?: Language
     wrap?: boolean
     compact?: boolean
-    actions?: Action[]
+    actions?: JSX.Element
     style?: React.CSSProperties
     /** What is being copied. @example 'link' */
     thing?: string
@@ -118,23 +109,7 @@ export function CodeSnippet({
         // eslint-disable-next-line react/forbid-dom-props
         <div className={clsx('CodeSnippet', compact && 'CodeSnippet--compact')} style={style}>
             <div className="CodeSnippet__actions">
-                {actions &&
-                    actions.map(({ icon, callback, popconfirmProps, title }, index) =>
-                        !popconfirmProps ? (
-                            <LemonButton
-                                key={`snippet-action-${index}`}
-                                onClick={callback}
-                                icon={icon}
-                                title={title}
-                                size={compact ? 'small' : 'medium'}
-                                noPadding
-                            />
-                        ) : (
-                            <Popconfirm key={`snippet-action-${index}`} {...popconfirmProps} onConfirm={callback}>
-                                <LemonButton icon={icon} title={title} size={compact ? 'small' : 'medium'} noPadding />
-                            </Popconfirm>
-                        )
-                    )}
+                {actions}
                 <LemonButton
                     data-attr="copy-code-button"
                     icon={<IconCopy />}

diff --git a/frontend/src/lib/components/PropertiesTable/PropertiesTable.tsx b/frontend/src/lib/components/PropertiesTable/PropertiesTable.tsx
@@ -1,8 +1,8 @@
 import './PropertiesTable.scss'
 
 import { IconPencil, IconTrash, IconWarning } from '@posthog/icons'
-import { LemonCheckbox, LemonInput, LemonTag, Link, Tooltip } from '@posthog/lemon-ui'
-import { Dropdown, Input, Menu, Popconfirm } from 'antd'
+import { LemonCheckbox, LemonDialog, LemonInput, LemonTag, Link, Tooltip } from '@posthog/lemon-ui'
+import { Dropdown, Input, Menu } from 'antd'
 import clsx from 'clsx'
 import { useActions, useValues } from 'kea'
 import { combineUrl } from 'kea-router'
@@ -342,6 +342,23 @@ export function PropertiesTable({
         })
 
         if (onDelete && nestingLevel === 0) {
+            const onClickDelete = (property: string): void => {
+                LemonDialog.open({
+                    title: (
+                        <>
+                            Are you sure you want to delete property <code>{property}</code>?
+                        </>
+                    ),
+                    description: 'This cannot be undone',
+                    primaryButton: {
+                        type: 'primary',
+                        status: 'danger',
+                        onClick: () => onDelete(property),
+                        children: 'Delete',
+                    },
+                })
+            }
+
             columns.push({
                 key: 'delete',
                 title: '',
@@ -350,20 +367,12 @@ export function PropertiesTable({
                     return (
                         !PROPERTY_KEYS.includes(item[0]) &&
                         !String(item[0]).startsWith('$initial_') && (
-                            <Popconfirm
-                                onConfirm={() => onDelete(item[0])}
-                                okButtonProps={{ danger: true }}
-                                okText="Delete"
-                                title={
-                                    <>
-                                        Are you sure you want to delete property <code>{item[0]}</code>?{' '}
-                                        <b>This cannot be undone.</b>
-                                    </>
-                                }
-                                placement="left"
-                            >
-                                <LemonButton icon={<IconTrash />} status="danger" size="small" />
-                            </Popconfirm>
+                            <LemonButton
+                                icon={<IconTrash />}
+                                status="danger"
+                                size="small"
+                                onClick={() => onClickDelete(item[0])}
+                            />
                         )
                     )
                 },

diff --git a/frontend/src/queries/nodes/DataTable/ExportWithConfirmation.tsx b/frontend/src/queries/nodes/DataTable/ExportWithConfirmation.tsx
diff --git a/frontend/src/scenes/appContextLogic.ts b/frontend/src/scenes/appContextLogic.ts
@@ -0,0 +1,51 @@
+import * as Sentry from '@sentry/react'
+import { afterMount, connect, kea, path } from 'kea'
+import api from 'lib/api'
+import { getAppContext } from 'lib/utils/getAppContext'
+
+import { UserType } from '~/types'
+
+import type { appContextLogicType } from './appContextLogicType'
+import { organizationLogic } from './organizationLogic'
+import { teamLogic } from './teamLogic'
+import { userLogic } from './userLogic'
+
+export const appContextLogic = kea<appContextLogicType>([
+    path(['scenes', 'appContextLogic']),
+    connect({
+        actions: [
+            userLogic,
+            ['loadUserSuccess'],
+            organizationLogic,
+            ['loadCurrentOrganizationSuccess'],
+            teamLogic,
+            ['loadCurrentTeam', 'loadCurrentTeamSuccess'],
+        ],
+    }),
+    afterMount(({ actions }) => {
+        const appContext = getAppContext()
+        const preloadedUser = appContext?.current_user
+
+        if (appContext && preloadedUser) {
+            void api.get('api/users/@me/').then((remoteUser: UserType) => {
+                if (remoteUser.uuid !== preloadedUser.uuid) {
+                    console.error(`Preloaded user ${preloadedUser.uuid} does not match remote user ${remoteUser.uuid}`)
+                    Sentry.captureException(
+                        new Error(`Preloaded user ${preloadedUser.uuid} does not match remote user ${remoteUser.uuid}`),
+                        {
+                            tags: {
+                                posthog_app_context: JSON.stringify(getAppContext()),
+                                remote_user: JSON.stringify(remoteUser),
+                            },
+                        }
+                    )
+
+                    // NOTE: This doesn't fix the issue but removes the confusion of seeing incorrect user info in the UI
+                    actions.loadUserSuccess(remoteUser)
+                    actions.loadCurrentOrganizationSuccess(remoteUser.organization)
+                    actions.loadCurrentTeam()
+                }
+            })
+        }
+    }),
+])
diff --git a/frontend/src/scenes/experiments/Experiment.tsx b/frontend/src/scenes/experiments/Experiment.tsx
@@ -2,6 +2,7 @@ import './Experiment.scss'
 
 import { IconPlusSmall, IconTrash, IconWarning } from '@posthog/icons'
 import {
+    LemonDialog,
     LemonDivider,
     LemonInput,
     LemonSelect,
@@ -11,7 +12,6 @@ import {
     LemonTextArea,
     Tooltip,
 } from '@posthog/lemon-ui'
-import { Popconfirm } from 'antd'
 import clsx from 'clsx'
 import { BindLogic, useActions, useValues } from 'kea'
 import { Form, Group } from 'kea-forms'
@@ -571,25 +571,7 @@ export function Experiment(): JSX.Element {
                                                 />
                                                 <LemonDivider vertical />
                                             </>
-                                            <Popconfirm
-                                                placement="bottomLeft"
-                                                title={
-                                                    <div>
-                                                        Reset this experiment and go back to draft mode?
-                                                        <div className="text-sm text-muted">
-                                                            All collected data so far will be discarded.
-                                                        </div>
-                                                        {experiment.archived && (
-                                                            <div className="text-sm text-muted">
-                                                                Resetting will also unarchive the experiment.
-                                                            </div>
-                                                        )}
-                                                    </div>
-                                                }
-                                                onConfirm={() => resetRunningExperiment()}
-                                            >
-                                                <LemonButton type="secondary">Reset</LemonButton>
-                                            </Popconfirm>
+                                            <ResetButton experiment={experiment} onConfirm={resetRunningExperiment} />
                                             {!experiment.end_date && (
                                                 <LemonButton
                                                     type="secondary"
@@ -858,6 +840,41 @@ export function Experiment(): JSX.Element {
     )
 }
 
+const ResetButton = ({ experiment, onConfirm }: { experiment: ExperimentType; onConfirm: () => void }): JSX.Element => {
+    const onClickReset = (): void => {
+        LemonDialog.open({
+            title: 'Reset this experiment?',
+            content: (
+                <>
+                    <div className="text-sm text-muted">
+                        All collected data so far will be discarded and the experiment will go back to draft mode.
+                    </div>
+                    {experiment.archived && (
+                        <div className="text-sm text-muted">Resetting will also unarchive the experiment.</div>
+                    )}
+                </>
+            ),
+            primaryButton: {
+                children: 'Confirm',
+                type: 'primary',
+                onClick: onConfirm,
+                size: 'small',
+            },
+            secondaryButton: {
+                children: 'Cancel',
+                type: 'tertiary',
+                size: 'small',
+            },
+        })
+    }
+
+    return (
+        <LemonButton type="secondary" onClick={onClickReset}>
+            Reset
+        </LemonButton>
+    )
+}
+
 export function StatusTag({ experiment }: { experiment: ExperimentType }): JSX.Element {
     const status = getExperimentStatus(experiment)
     return (