From 7b1611e4d9d7e5b205b1f2f7b60086b60a6425e5 Mon Sep 17 00:00:00 2001
From: David Newell <d.newell1@outlook.com>
Date: Wed, 3 Apr 2024 13:44:22 +0100
Subject: [PATCH] chore: remove antd dropdown (#21282)

---
 frontend/src/scenes/persons/PersonScene.scss | 14 -----
 frontend/src/scenes/persons/PersonScene.tsx  | 60 ++++++++------------
 2 files changed, 24 insertions(+), 50 deletions(-)
 delete mode 100644 frontend/src/scenes/persons/PersonScene.scss

diff --git a/frontend/src/scenes/persons/PersonScene.scss b/frontend/src/scenes/persons/PersonScene.scss
deleted file mode 100644
index f00101bfb8348..0000000000000
--- a/frontend/src/scenes/persons/PersonScene.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-.extra-ids {
-    display: inline-flex;
-    align-items: center;
-    height: 1.25rem;
-    padding: 0 0.25rem 0 0.375rem;
-    margin: 0 0 0 0.25rem;
-    line-height: 1.125rem;
-    color: var(--primary-3000);
-    cursor: pointer;
-
-    svg {
-        margin-left: 0.25rem;
-    }
-}
diff --git a/frontend/src/scenes/persons/PersonScene.tsx b/frontend/src/scenes/persons/PersonScene.tsx
index 52449de8dc907..a505eb1125f37 100644
--- a/frontend/src/scenes/persons/PersonScene.tsx
+++ b/frontend/src/scenes/persons/PersonScene.tsx
@@ -1,10 +1,5 @@
-import './PersonScene.scss'
-
-// eslint-disable-next-line no-restricted-imports
-import { DownOutlined } from '@ant-design/icons'
-import { IconInfo } from '@posthog/icons'
-import { LemonButton, LemonDivider, LemonSelect, LemonTag, Link } from '@posthog/lemon-ui'
-import { Dropdown, Menu } from 'antd'
+import { IconChevronDown, IconCopy, IconInfo } from '@posthog/icons'
+import { LemonButton, LemonDivider, LemonMenu, LemonSelect, LemonTag, Link } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
 import { ActivityLog } from 'lib/components/ActivityLog/ActivityLog'
 import { CopyToClipboardInline } from 'lib/components/CopyToClipboard'
@@ -17,6 +12,7 @@ import { LemonBanner } from 'lib/lemon-ui/LemonBanner'
 import { LemonTabs } from 'lib/lemon-ui/LemonTabs'
 import { SpinnerOverlay } from 'lib/lemon-ui/Spinner/Spinner'
 import { Tooltip } from 'lib/lemon-ui/Tooltip'
+import { copyToClipboard } from 'lib/utils/copyToClipboard'
 import { RelatedGroups } from 'scenes/groups/RelatedGroups'
 import { NotebookSelectButton } from 'scenes/notebooks/NotebookSelectButton/NotebookSelectButton'
 import { PersonDeleteModal } from 'scenes/persons/PersonDeleteModal'
@@ -50,38 +46,30 @@ export const scene: SceneExport = {
 function PersonCaption({ person }: { person: PersonType }): JSX.Element {
     return (
         <div className="flex flex-wrap items-center gap-2">
-            <div>
-                <span className="text-muted">IDs:</span>{' '}
-                <CopyToClipboardInline
-                    tooltipMessage={null}
-                    description="person distinct ID"
-                    style={{ justifyContent: 'flex-end' }}
-                >
-                    {person.distinct_ids[0]}
-                </CopyToClipboardInline>
+            <div className="flex space-x-1">
+                <div>
+                    <span className="text-muted">IDs:</span>{' '}
+                    <CopyToClipboardInline
+                        tooltipMessage={null}
+                        description="person distinct ID"
+                        style={{ justifyContent: 'flex-end' }}
+                    >
+                        {person.distinct_ids[0]}
+                    </CopyToClipboardInline>
+                </div>
                 {person.distinct_ids.length > 1 && (
-                    <Dropdown
-                        overlay={
-                            <Menu>
-                                {person.distinct_ids.slice(1).map((distinct_id: string) => (
-                                    <Menu.Item key={distinct_id}>
-                                        <CopyToClipboardInline
-                                            description="person distinct ID"
-                                            iconStyle={{ color: 'var(--primary)' }}
-                                        >
-                                            {distinct_id}
-                                        </CopyToClipboardInline>
-                                    </Menu.Item>
-                                ))}
-                            </Menu>
-                        }
-                        trigger={['click']}
+                    <LemonMenu
+                        items={person.distinct_ids.slice(1).map((distinct_id: string) => ({
+                            label: distinct_id,
+                            sideIcon: <IconCopy className="text-primary-3000" />,
+                            onClick: () => copyToClipboard(distinct_id, 'distinct id'),
+                        }))}
                     >
-                        <LemonTag className="extra-ids space-x-1">
-                            <div>+{person.distinct_ids.length - 1}</div>
-                            <DownOutlined />
+                        <LemonTag type="primary" className="inline-flex">
+                            <span>+{person.distinct_ids.length - 1}</span>
+                            <IconChevronDown className="w-4 h-4" />
                         </LemonTag>
-                    </Dropdown>
+                    </LemonMenu>
                 )}
             </div>
             <div>