From 27e596e9163a67368174658978a296af5cb86d16 Mon Sep 17 00:00:00 2001
From: Paul D'Ambra <paul@posthog.com>
Date: Thu, 26 Sep 2024 14:10:39 +0100
Subject: [PATCH] fix: react render error (#25227)

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
---
 .eslintrc.js                                  |   3 ++
 ...n-ui-lemon-input-select--default--dark.png | Bin 1804 -> 1645 bytes
 ...-ui-lemon-input-select--default--light.png | Bin 1769 -> 1648 bytes
 frontend/src/queries/nodes/HogQLX/render.tsx  |  45 ++++++++++--------
 package.json                                  |   1 +
 pnpm-lock.yaml                                |  12 +++++
 6 files changed, 40 insertions(+), 21 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index a2db223beff..403a38e4c43 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -42,6 +42,7 @@ module.exports = {
     },
     plugins: [
         'react',
+        "react-hooks",
         'cypress',
         '@typescript-eslint',
         'compat',
@@ -51,6 +52,8 @@ module.exports = {
         'unused-imports',
     ],
     rules: {
+        "react-hooks/rules-of-hooks": "warn",
+        "react-hooks/exhaustive-deps": "warn",
         // PyCharm always adds curly braces, I guess vscode doesn't, PR reviewers often complain they are present on props that don't need them
         // let's save the humans time and let the machines do the work
         // "never" means if the prop does not need the curly braces, they will be removed/errored
diff --git a/frontend/__snapshots__/lemon-ui-lemon-input-select--default--dark.png b/frontend/__snapshots__/lemon-ui-lemon-input-select--default--dark.png
index 30d6848c0dcbf7228755ed513c8020bfe27f2127..ec8494f1cb6838e23a02e6aeb53912d15be4ed5c 100644
GIT binary patch
delta 1615
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
B=BfYy

delta 1775
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
RhXMcq002ovPDHLkV1kqMX{G=G

diff --git a/frontend/__snapshots__/lemon-ui-lemon-input-select--default--light.png b/frontend/__snapshots__/lemon-ui-lemon-input-select--default--light.png
index 115f6d83d8d7f3b54c217d879e4df2d1f44c4e07..5496b3c4488fac464a7442907ff7c5a4323ed8b8 100644
GIT binary patch
delta 1618
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
E0RWp1)c^nh

delta 1740
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

diff --git a/frontend/src/queries/nodes/HogQLX/render.tsx b/frontend/src/queries/nodes/HogQLX/render.tsx
index 00da6f9bc85..87f725385a3 100644
--- a/frontend/src/queries/nodes/HogQLX/render.tsx
+++ b/frontend/src/queries/nodes/HogQLX/render.tsx
@@ -24,6 +24,29 @@ export function parseHogQLX(value: any): any {
     return value.map((v) => parseHogQLX(v))
 }
 
+function ViewRecordingModalButton({ sessionId }: { sessionId: string }): JSX.Element {
+    const { openSessionPlayer } = useActions(sessionPlayerModalLogic)
+    return (
+        <ErrorBoundary>
+            <LemonButton
+                type="primary"
+                size="xsmall"
+                sideIcon={<IconPlayCircle />}
+                data-attr="hog-ql-view-recording-button"
+                to={urls.replaySingle(sessionId)}
+                onClick={(e) => {
+                    e.preventDefault()
+                    if (sessionId) {
+                        openSessionPlayer({ id: sessionId })
+                    }
+                }}
+            >
+                View recording
+            </LemonButton>
+        </ErrorBoundary>
+    )
+}
+
 export function renderHogQLX(value: any): JSX.Element {
     const object = parseHogQLX(value)
 
@@ -44,27 +67,7 @@ export function renderHogQLX(value: any): JSX.Element {
             )
         } else if (tag === 'RecordingButton') {
             const { sessionId, ...props } = rest
-            const { openSessionPlayer } = useActions(sessionPlayerModalLogic)
-            return (
-                <ErrorBoundary>
-                    <LemonButton
-                        type="primary"
-                        size="xsmall"
-                        sideIcon={<IconPlayCircle />}
-                        data-attr="hog-ql-view-recording-button"
-                        {...props}
-                        to={urls.replaySingle(sessionId)}
-                        onClick={(e) => {
-                            e.preventDefault()
-                            if (sessionId) {
-                                openSessionPlayer({ id: sessionId })
-                            }
-                        }}
-                    >
-                        View recording
-                    </LemonButton>
-                </ErrorBoundary>
-            )
+            return <ViewRecordingModalButton sessionId={sessionId} {...props} />
         } else if (tag === 'a') {
             const { href, source, target } = rest
             return (
diff --git a/package.json b/package.json
index efe9a211b08..eb9b6649b64 100644
--- a/package.json
+++ b/package.json
@@ -267,6 +267,7 @@
         "eslint-plugin-jest": "^28.6.0",
         "eslint-plugin-posthog": "link:./eslint-rules",
         "eslint-plugin-react": "^7.33.2",
+        "eslint-plugin-react-hooks": "^4.6.2",
         "eslint-plugin-simple-import-sort": "^10.0.0",
         "eslint-plugin-storybook": "^0.6.15",
         "eslint-plugin-unused-imports": "^3.1.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d2b9a78348d..559a67f7f03 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -614,6 +614,9 @@ devDependencies:
   eslint-plugin-react:
     specifier: ^7.33.2
     version: 7.33.2(eslint@8.57.0)
+  eslint-plugin-react-hooks:
+    specifier: ^4.6.2
+    version: 4.6.2(eslint@8.57.0)
   eslint-plugin-simple-import-sort:
     specifier: ^10.0.0
     version: 10.0.0(eslint@8.57.0)
@@ -12274,6 +12277,15 @@ packages:
       - typescript
     dev: true
 
+  /eslint-plugin-react-hooks@4.6.2(eslint@8.57.0):
+    resolution: {integrity: sha512-QzliNJq4GinDBcD8gPB5v0wh6g8q3SUi6EFF0x8N/BL9PoVs0atuGc47ozMRyOWAKdwaZ5OnbOEa3WR+dSGKuQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0
+    dependencies:
+      eslint: 8.57.0
+    dev: true
+
   /eslint-plugin-react@7.33.2(eslint@8.57.0):
     resolution: {integrity: sha512-73QQMKALArI8/7xGLNI/3LylrEYrlKZSb5C9+q3OtOewTnMQi5cT+aE9E41sLCmli3I9PGGmD1yiZydyo4FEPw==}
     engines: {node: '>=4'}