fix(funnels): replace antd correlation modal with lemon ui (#20801)

PostHog · Mar 11, 2024 · 192d80f · 192d80f
1 parent e809310
commit 192d80f
Show file tree

Hide file tree

Showing 7 changed files with 76 additions and 83 deletions.
diff --git a/...d/__snapshots__/scenes-app-insights-error-empty-states--long-loading--light.png b/...d/__snapshots__/scenes-app-insights-error-empty-states--long-loading--light.png
diff --git a/frontend/src/scenes/funnels/funnelCorrelationDetailsLogic.test.ts b/frontend/src/scenes/funnels/funnelCorrelationDetailsLogic.test.ts
@@ -69,7 +69,7 @@ describe('funnelCorrelationDetailsLogic', () => {
     describe('correlationMatrixAndScore', () => {
         it('returns calculated values based on selected details', async () => {
             await expectLogic(logic, () =>
-                logic.actions.setFunnelCorrelationDetails({
+                logic.actions.openCorrelationDetailsModal({
                     event: { event: 'some event', elements: [], properties: {} },
                     success_people_url: '',
                     failure_people_url: '',

diff --git a/frontend/src/scenes/funnels/funnelCorrelationDetailsLogic.ts b/frontend/src/scenes/funnels/funnelCorrelationDetailsLogic.ts
@@ -15,23 +15,31 @@ export const funnelCorrelationDetailsLogic = kea<funnelCorrelationDetailsLogicTy
     })),
 
     actions({
-        setFunnelCorrelationDetails: (payload: FunnelCorrelation | null) => ({ payload }),
+        openCorrelationDetailsModal: (payload: FunnelCorrelation) => ({ payload }),
+        closeCorrelationDetailsModal: true,
     }),
 
     reducers({
-        funnelCorrelationDetails: [
+        correlationDetailsModalOpen: [
+            false,
+            {
+                openCorrelationDetailsModal: () => true,
+                closeCorrelationDetailsModal: () => false,
+            },
+        ],
+        correlationDetails: [
             null as null | FunnelCorrelation,
             {
-                setFunnelCorrelationDetails: (_, { payload }) => payload,
+                openCorrelationDetailsModal: (_, { payload }) => payload,
             },
         ],
     }),
 
     selectors({
         correlationMatrixAndScore: [
-            (s) => [s.funnelCorrelationDetails, s.steps],
+            (s) => [s.correlationDetails, s.steps],
             (
-                funnelCorrelationDetails,
+                correlationDetails,
                 steps
             ): {
                 truePositive: number
@@ -41,7 +49,7 @@ export const funnelCorrelationDetailsLogic = kea<funnelCorrelationDetailsLogicTy
                 correlationScore: number
                 correlationScoreStrength: 'weak' | 'moderate' | 'strong' | null
             } => {
-                if (!funnelCorrelationDetails) {
+                if (!correlationDetails) {
                     return {
                         truePositive: 0,
                         falsePositive: 0,
@@ -54,8 +62,8 @@ export const funnelCorrelationDetailsLogic = kea<funnelCorrelationDetailsLogicTy
 
                 const successTotal = steps[steps.length - 1].count
                 const failureTotal = steps[0].count - successTotal
-                const success = funnelCorrelationDetails.success_count
-                const failure = funnelCorrelationDetails.failure_count
+                const success = correlationDetails.success_count
+                const failure = correlationDetails.failure_count
 
                 const truePositive = success // has property, converted
                 const falseNegative = failure // has property, but dropped off

diff --git a/frontend/src/scenes/insights/views/Funnels/CorrelationActionsCell.tsx b/frontend/src/scenes/insights/views/Funnels/CorrelationActionsCell.tsx
@@ -22,15 +22,15 @@ export const EventCorrelationActionsCell = ({ record }: { record: FunnelCorrelat
     const { excludeEventFromProject, excludeEventPropertyFromProject } = useActions(
         funnelCorrelationLogic(insightProps)
     )
-    const { setFunnelCorrelationDetails } = useActions(funnelCorrelationDetailsLogic(insightProps))
+    const { openCorrelationDetailsModal } = useActions(funnelCorrelationDetailsLogic(insightProps))
     const components = record.event.event.split('::')
 
     const buttons: CorrelationActionsCellComponentButtonProps[] = [
         ...(record.result_type === FunnelCorrelationResultsType.Events
             ? [
                   {
                       children: 'View correlation details',
-                      onClick: () => setFunnelCorrelationDetails(record),
+                      onClick: () => openCorrelationDetailsModal(record),
                   },
               ]
             : []),
@@ -56,13 +56,13 @@ export const PropertyCorrelationActionsCell = ({ record }: { record: FunnelCorre
     const { insightProps } = useValues(insightLogic)
     const { isPropertyExcludedFromProject } = useValues(funnelPropertyCorrelationLogic(insightProps))
     const { excludePropertyFromProject } = useActions(funnelPropertyCorrelationLogic(insightProps))
-    const { setFunnelCorrelationDetails } = useActions(funnelCorrelationDetailsLogic(insightProps))
+    const { openCorrelationDetailsModal } = useActions(funnelCorrelationDetailsLogic(insightProps))
     const propertyName = (record.event.event || '').split('::')[0]
 
     const buttons: CorrelationActionsCellComponentButtonProps[] = [
         {
             children: 'View correlation details',
-            onClick: () => setFunnelCorrelationDetails(record),
+            onClick: () => openCorrelationDetailsModal(record),
         },
         {
             children: 'Exclude property from project',

diff --git a/frontend/src/scenes/insights/views/Funnels/CorrelationMatrix.scss b/frontend/src/scenes/insights/views/Funnels/CorrelationMatrix.scss
@@ -1,53 +1,46 @@
-.correlation-matrix {
-    .ant-modal-body {
-        display: flex;
-        justify-content: center;
-    }
-
-    .correlation-table-wrapper {
-        table {
-            margin: 0 auto;
-            border-spacing: 0;
-            border-collapse: separate;
-            border: 1px solid var(--border);
-            border-radius: var(--radius);
-
-            td {
-                padding: 0.5rem 1rem;
-                text-align: center;
-                border-top: 1px solid var(--border);
-                border-left: 1px solid var(--border);
-
-                .percentage {
-                    padding-bottom: 0.25rem;
-                    font-weight: bold;
-                }
+.correlation-table-wrapper {
+    table {
+        margin: 0 auto;
+        border-spacing: 0;
+        border-collapse: separate;
+        border: 1px solid var(--border);
+        border-radius: var(--radius);
+
+        td {
+            padding: 0.5rem 1rem;
+            text-align: center;
+            border-top: 1px solid var(--border);
+            border-left: 1px solid var(--border);
+
+            .percentage {
+                padding-bottom: 0.25rem;
+                font-weight: bold;
+            }
 
-                &:first-child {
-                    border-left: none;
-                }
+            &:first-child {
+                border-left: none;
             }
+        }
 
-            .table-title {
-                color: var(--muted-alt);
+        .table-title {
+            color: var(--muted-alt);
 
-                td {
-                    border-top: none;
-                }
+            td {
+                border-top: none;
             }
+        }
 
-            thead,
-            .horizontal-header {
-                font-weight: bold;
-                color: var(--muted);
-                text-transform: uppercase;
-                background-color: var(--antd-table-background-dark);
-            }
+        thead,
+        .horizontal-header {
+            font-weight: bold;
+            color: var(--muted);
+            text-transform: uppercase;
+            background-color: var(--mid);
+        }
 
-            tbody {
-                td:not(.horizontal-header) {
-                    text-align: right;
-                }
+        tbody {
+            td:not(.horizontal-header) {
+                text-align: right;
             }
         }
     }

diff --git a/frontend/src/scenes/insights/views/Funnels/CorrelationMatrix.tsx b/frontend/src/scenes/insights/views/Funnels/CorrelationMatrix.tsx
@@ -1,7 +1,7 @@
 import './CorrelationMatrix.scss'
 
 import { IconCheckCircle } from '@posthog/icons'
-import { Button, Modal } from 'antd'
+import { LemonButton, LemonModal } from '@posthog/lemon-ui'
 import clsx from 'clsx'
 import { useActions, useValues } from 'kea'
 import { PropertyKeyInfo } from 'lib/components/PropertyKeyInfo'
@@ -22,22 +22,20 @@ import { FunnelCorrelationResultsType, FunnelCorrelationType } from '~/types'
 export function CorrelationMatrix(): JSX.Element {
     const { insightProps } = useValues(insightLogic)
     const { correlationsLoading } = useValues(funnelCorrelationLogic(insightProps))
-    const { funnelCorrelationDetails, correlationMatrixAndScore } = useValues(
+    const { correlationDetailsModalOpen, correlationDetails, correlationMatrixAndScore } = useValues(
         funnelCorrelationDetailsLogic(insightProps)
     )
-    const { setFunnelCorrelationDetails } = useActions(funnelCorrelationDetailsLogic(insightProps))
+    const { closeCorrelationDetailsModal } = useActions(funnelCorrelationDetailsLogic(insightProps))
     const { openCorrelationPersonsModal } = useActions(funnelPersonsModalLogic(insightProps))
 
-    const actor = funnelCorrelationDetails?.result_type === FunnelCorrelationResultsType.Events ? 'event' : 'property'
+    const actor = correlationDetails?.result_type === FunnelCorrelationResultsType.Events ? 'event' : 'property'
     const action =
-        funnelCorrelationDetails?.result_type === FunnelCorrelationResultsType.Events
-            ? 'performed event'
-            : 'have property'
+        correlationDetails?.result_type === FunnelCorrelationResultsType.Events ? 'performed event' : 'have property'
 
     let displayName = <></>
 
-    if (funnelCorrelationDetails) {
-        const { first_value, second_value } = parseDisplayNameForCorrelation(funnelCorrelationDetails)
+    if (correlationDetails) {
+        const { first_value, second_value } = parseDisplayNameForCorrelation(correlationDetails)
         displayName = (
             <>
                 <PropertyKeyInfo value={first_value} />
@@ -63,24 +61,19 @@ export function CorrelationMatrix(): JSX.Element {
             <IconErrorOutline className="text-danger" />
         )
 
-    const dismiss = (): void => setFunnelCorrelationDetails(null)
-
     return (
-        <Modal
-            className="correlation-matrix"
-            visible={!!funnelCorrelationDetails}
-            onCancel={dismiss}
-            destroyOnClose
-            footer={<Button onClick={dismiss}>Dismiss</Button>}
-            width={600}
+        <LemonModal
+            isOpen={correlationDetailsModalOpen}
+            onClose={closeCorrelationDetailsModal}
+            footer={<LemonButton onClick={closeCorrelationDetailsModal}>Dismiss</LemonButton>}
             title="Correlation details"
         >
             <div className="correlation-table-wrapper">
                 {correlationsLoading ? (
                     <div className="mt-4 text-center">
                         <Spinner className="text-4xl" />
                     </div>
-                ) : funnelCorrelationDetails ? (
+                ) : correlationDetails ? (
                     <>
                         <p className="text-muted-alt mb-4">
                             The table below displays the correlation details for users who {action} <b>{displayName}</b>
@@ -93,7 +86,7 @@ export function CorrelationMatrix(): JSX.Element {
                                 </tr>
                                 <tr>
                                     <td>
-                                        {funnelCorrelationDetails?.result_type === FunnelCorrelationResultsType.Events
+                                        {correlationDetails?.result_type === FunnelCorrelationResultsType.Events
                                             ? 'Performed event'
                                             : 'Has property'}
                                     </td>
@@ -119,7 +112,7 @@ export function CorrelationMatrix(): JSX.Element {
                                         ) : (
                                             <Link
                                                 onClick={() => {
-                                                    openCorrelationPersonsModal(funnelCorrelationDetails, true)
+                                                    openCorrelationPersonsModal(correlationDetails, true)
                                                 }}
                                             >
                                                 {pluralize(truePositive, 'user', undefined, true)}
@@ -141,7 +134,7 @@ export function CorrelationMatrix(): JSX.Element {
                                         ) : (
                                             <Link
                                                 onClick={() => {
-                                                    openCorrelationPersonsModal(funnelCorrelationDetails, false)
+                                                    openCorrelationPersonsModal(correlationDetails, false)
                                                 }}
                                             >
                                                 {pluralize(falseNegative, 'user', undefined, true)}
@@ -188,9 +181,8 @@ export function CorrelationMatrix(): JSX.Element {
                             </tbody>
                         </table>
                         <div className="mt-4 text-center">
-                            {capitalizeFirstLetter(funnelCorrelationDetails?.result_type || '')} <b>{displayName}</b>{' '}
-                            has a{' '}
-                            {funnelCorrelationDetails?.correlation_type === FunnelCorrelationType.Success ? (
+                            {capitalizeFirstLetter(correlationDetails?.result_type || '')} <b>{displayName}</b> has a{' '}
+                            {correlationDetails?.correlation_type === FunnelCorrelationType.Success ? (
                                 <Tooltip
                                     title={`Positive correlation means this ${actor} is correlated with a successful conversion.`}
                                 >
@@ -231,6 +223,6 @@ export function CorrelationMatrix(): JSX.Element {
                     </LemonBanner>
                 )}
             </div>
-        </Modal>
+        </LemonModal>
     )
 }
diff --git a/frontend/src/scenes/insights/views/Funnels/FunnelCorrelationTable.tsx b/frontend/src/scenes/insights/views/Funnels/FunnelCorrelationTable.tsx
@@ -113,7 +113,6 @@ export function FunnelCorrelationTable(): JSX.Element | null {
                         ? 'have this event property'
                         : 'do this event'}
                 </div>
-                <CorrelationMatrix />
             </>
         )
     }
@@ -233,6 +232,7 @@ export function FunnelCorrelationTable(): JSX.Element | null {
                         </div>
                     </span>
                 </span>
+                <CorrelationMatrix />
                 <ConfigProvider
                     renderEmpty={() =>
                         loadedEventCorrelationsTableOnce ? (