From a33ded1caf9a72609efaed92dbe1ec17a20c4110 Mon Sep 17 00:00:00 2001
From: Paul D'Ambra <paul@posthog.com>
Date: Wed, 14 Feb 2024 10:49:25 +0000
Subject: [PATCH] fix: toolbar selector fangling (#20325)

---
 frontend/src/toolbar/elements/Elements.tsx |  6 +++---
 frontend/src/toolbar/utils.ts              |  7 +++++--
 package.json                               |  3 +--
 pnpm-lock.yaml                             | 15 ++++-----------
 4 files changed, 13 insertions(+), 18 deletions(-)

diff --git a/frontend/src/toolbar/elements/Elements.tsx b/frontend/src/toolbar/elements/Elements.tsx
index 904cd148e8ab8..0e8c0a278d67f 100644
--- a/frontend/src/toolbar/elements/Elements.tsx
+++ b/frontend/src/toolbar/elements/Elements.tsx
@@ -2,7 +2,7 @@ import './Elements.scss'
 
 import { useActions, useValues } from 'kea'
 import { compactNumber } from 'lib/utils'
-import React from 'react'
+import { Fragment } from 'react'
 
 import { ElementInfoWindow } from '~/toolbar/elements/ElementInfoWindow'
 import { elementsLogic } from '~/toolbar/elements/elementsLogic'
@@ -75,7 +75,7 @@ export function Elements(): JSX.Element {
 
                 {heatmapElements.map(({ rect, count, clickCount, rageclickCount, element }, index) => {
                     return (
-                        <React.Fragment key={`heatmap-${index}`}>
+                        <Fragment key={`heatmap-${index}`}>
                             <HeatmapElement
                                 rect={rect}
                                 style={{
@@ -155,7 +155,7 @@ export function Elements(): JSX.Element {
                                     {compactNumber(rageclickCount)}&#128545;
                                 </HeatmapLabel>
                             )}
-                        </React.Fragment>
+                        </Fragment>
                     )
                 })}
 
diff --git a/frontend/src/toolbar/utils.ts b/frontend/src/toolbar/utils.ts
index 8bb0562c04be8..368e569bb84b5 100644
--- a/frontend/src/toolbar/utils.ts
+++ b/frontend/src/toolbar/utils.ts
@@ -2,7 +2,6 @@ import { finder } from '@medv/finder'
 import { CLICK_TARGET_SELECTOR, CLICK_TARGETS, escapeRegex, TAGS_TO_IGNORE } from 'lib/actionUtils'
 import { cssEscape } from 'lib/utils/cssEscape'
 import { querySelectorAllDeep } from 'query-selector-shadow-dom'
-import wildcardMatch from 'wildcard-match'
 
 import { ActionStepForm, BoxColor, ElementRect } from '~/toolbar/types'
 import { ActionStepType, StringMatching } from '~/types'
@@ -43,9 +42,13 @@ export function elementToQuery(element: HTMLElement, dataAttributes: string[]):
 
     try {
         return finder(element, {
-            attr: (name) => dataAttributes.some((dataAttribute) => wildcardMatch(dataAttribute)(name)),
             tagName: (name) => !TAGS_TO_IGNORE.includes(name),
             seedMinLength: 5, // include several selectors e.g. prefer .project-homepage > .project-header > .project-title over .project-title
+            attr: (name) => {
+                // preference to data attributes if they exist
+                // that aren't in the PostHog preferred list - they were returned early above
+                return name.startsWith('data-')
+            },
         })
     } catch (error) {
         console.warn('Error while trying to find a selector for element', element, error)
diff --git a/package.json b/package.json
index 156d5116aeb27..62d4f9f2d41e8 100644
--- a/package.json
+++ b/package.json
@@ -71,7 +71,7 @@
         "@dnd-kit/utilities": "^3.2.1",
         "@floating-ui/react": "^0.16.0",
         "@lottiefiles/react-lottie-player": "^3.4.7",
-        "@medv/finder": "^2.1.0",
+        "@medv/finder": "^3.1.0",
         "@microlink/react-json-view": "^1.21.3",
         "@monaco-editor/react": "4.4.6",
         "@posthog/icons": "0.5.1",
@@ -173,7 +173,6 @@
         "tailwindcss": "^3.4.0",
         "use-debounce": "^9.0.3",
         "use-resize-observer": "^8.0.0",
-        "wildcard-match": "^5.1.2",
         "zxcvbn": "^4.4.2"
     },
     "devDependencies": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d5d76b16d0a40..180a3a515a9d6 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -35,8 +35,8 @@ dependencies:
     specifier: ^3.4.7
     version: 3.4.7(react@18.2.0)
   '@medv/finder':
-    specifier: ^2.1.0
-    version: 2.1.0
+    specifier: ^3.1.0
+    version: 3.1.0
   '@microlink/react-json-view':
     specifier: ^1.21.3
     version: 1.22.2(@types/react@17.0.52)(react-dom@18.2.0)(react@18.2.0)
@@ -340,9 +340,6 @@ dependencies:
   use-resize-observer:
     specifier: ^8.0.0
     version: 8.0.0(react-dom@18.2.0)(react@18.2.0)
-  wildcard-match:
-    specifier: ^5.1.2
-    version: 5.1.2
   zxcvbn:
     specifier: ^4.4.2
     version: 4.4.2
@@ -4921,8 +4918,8 @@ packages:
       react: 18.2.0
     dev: true
 
-  /@medv/finder@2.1.0:
-    resolution: {integrity: sha512-Egrg5XO4kLol24b1Kv50HDfi5hW0yQ6aWSsO0Hea1eJ4rogKElIN0M86FdVnGF4XIGYyA7QWx0MgbOzVPA0qkA==}
+  /@medv/finder@3.1.0:
+    resolution: {integrity: sha512-ojkXjR3K0Zz3jnCR80tqPL+0yvbZk/lEodb6RIVjLz7W8RVA2wrw8ym/CzCpXO9SYVUIKHFUpc7jvf8UKfIM3w==}
     dev: false
 
   /@microlink/react-json-view@1.22.2(@types/react@17.0.52)(react-dom@18.2.0)(react@18.2.0):
@@ -21383,10 +21380,6 @@ packages:
       isexe: 2.0.0
     dev: true
 
-  /wildcard-match@5.1.2:
-    resolution: {integrity: sha512-qNXwI591Z88c8bWxp+yjV60Ch4F8Riawe3iGxbzquhy8Xs9m+0+SLFBGb/0yCTIDElawtaImC37fYZ+dr32KqQ==}
-    dev: false
-
   /wildcard@2.0.0:
     resolution: {integrity: sha512-JcKqAHLPxcdb9KM49dufGXn2x3ssnfjbcaQdLlfZsL9rH9wgDQjUtDxbo8NE0F6SFvydeu1VhZe7hZuHsB2/pw==}
     dev: true