fix: local file playback working in posthog 3000 (#19602)

* fix: local file playback working in posthog 3000 * inline * fixes
PostHog · Jan 5, 2024 · 0aa4fe5 · 0aa4fe5
1 parent 744d126
commit 0aa4fe5
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 25 deletions.
diff --git a/frontend/src/lib/lemon-ui/LemonFileInput/LemonFileInput.tsx b/frontend/src/lib/lemon-ui/LemonFileInput/LemonFileInput.tsx
@@ -9,7 +9,9 @@ import { ChangeEvent, createRef, RefObject, useEffect, useState } from 'react'
 export interface LemonFileInputProps extends Pick<HTMLInputElement, 'multiple' | 'accept'> {
     value?: File[]
     onChange?: (newValue: File[]) => void
-    // are the files currently being uploaded?
+    /**
+     * are the files currently being uploaded?
+     */
     loading?: boolean
     /** if this is not provided then this component is the drop target
      * and is styled when a file is dragged over it
@@ -18,6 +20,10 @@ export interface LemonFileInputProps extends Pick<HTMLInputElement, 'multiple' |
      * styling is applied to the alternativeDropTargetRef
      * **/
     alternativeDropTargetRef?: RefObject<HTMLElement>
+    /**
+     * the text to display to the user, a sensible default is used if not provided
+     */
+    callToAction?: string | JSX.Element
 }
 
 export const LemonFileInput = ({
@@ -28,6 +34,7 @@ export const LemonFileInput = ({
     // e.g. '.json' or 'image/*'
     accept,
     alternativeDropTargetRef,
+    callToAction,
 }: LemonFileInputProps): JSX.Element => {
     const [files, setFiles] = useState(value || value || ([] as File[]))
 
@@ -134,8 +141,12 @@ export const LemonFileInput = ({
                         accept={accept}
                         onChange={onInputChange}
                     />
-                    <IconUploadFile className={'text-2xl'} /> Click or drag and drop to upload
-                    {accept ? ` ${acceptToDisplayName(accept)}` : ''}
+                    {callToAction || (
+                        <>
+                            <IconUploadFile className={'text-2xl'} /> Click or drag and drop to upload
+                            {accept ? ` ${acceptToDisplayName(accept)}` : ''}
+                        </>
+                    )}
                 </label>
                 {files.length > 0 && (
                     <div className={'flex flex-row gap-2'}>

diff --git a/frontend/src/lib/lemon-ui/LemonTextArea/LemonTextArea.tsx b/frontend/src/lib/lemon-ui/LemonTextArea/LemonTextArea.tsx
@@ -10,7 +10,7 @@ import { lemonToast } from 'lib/lemon-ui/LemonToast/LemonToast'
 import { Link } from 'lib/lemon-ui/Link'
 import { Tooltip } from 'lib/lemon-ui/Tooltip'
 import posthog from 'posthog-js'
-import React, { createRef, useRef, useState } from 'react'
+import React, { useRef, useState } from 'react'
 import TextareaAutosize from 'react-textarea-autosize'
 import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
 
@@ -80,7 +80,7 @@ export const LemonTextAreaMarkdown = React.forwardRef<HTMLTextAreaElement, Lemon
         const { objectStorageAvailable } = useValues(preflightLogic)
 
         const [isPreviewShown, setIsPreviewShown] = useState(false)
-        const dropRef = createRef<HTMLDivElement>()
+        const dropRef = useRef<HTMLDivElement>(null)
 
         const { setFilesToUpload, filesToUpload, uploading } = useUploadFiles({
             onUpload: (url, fileName) => {

diff --git a/frontend/src/scenes/session-recordings/file-playback/SessionRecordingFilePlayback.tsx b/frontend/src/scenes/session-recordings/file-playback/SessionRecordingFilePlayback.tsx
@@ -1,9 +1,10 @@
-import Dragger from 'antd/lib/upload/Dragger'
 import { useActions, useValues } from 'kea'
 import { PayGatePage } from 'lib/components/PayGatePage/PayGatePage'
 import { IconUploadFile } from 'lib/lemon-ui/icons'
 import { LemonBanner } from 'lib/lemon-ui/LemonBanner'
+import { LemonFileInput } from 'lib/lemon-ui/LemonFileInput'
 import { SpinnerOverlay } from 'lib/lemon-ui/Spinner/Spinner'
+import { useRef } from 'react'
 import { userLogic } from 'scenes/userLogic'
 
 import { AvailableFeature } from '~/types'
@@ -17,6 +18,8 @@ export function SessionRecordingFilePlayback(): JSX.Element {
     const { hasAvailableFeature } = useValues(userLogic)
     const filePlaybackEnabled = hasAvailableFeature(AvailableFeature.RECORDINGS_FILE_EXPORT)
 
+    const dropRef = useRef<HTMLDivElement>(null)
+
     if (!filePlaybackEnabled) {
         return (
             <PayGatePage
@@ -51,26 +54,25 @@ export function SessionRecordingFilePlayback(): JSX.Element {
                     <SessionRecordingPlayer sessionRecordingId="" playerKey={playerKey} />
                 </div>
             ) : (
-                <Dragger
-                    name="file"
-                    multiple={false}
-                    accept=".json"
-                    showUploadList={false}
-                    beforeUpload={(file) => {
-                        loadFromFile(file)
-                        return false
-                    }}
+                <div
+                    ref={dropRef}
+                    className="w-full border rounded p-20 text-muted-alt flex flex-col items-center justify-center"
                 >
-                    <div className="p-20 flex flex-col items-center justify-center space-y-2 text-muted-alt">
-                        <p className="flex items-center gap-2 font-semibold">
-                            <IconUploadFile className="text-xl" />
-                            Load recording
-                        </p>
-                        <p className="text-muted-alt ">
-                            Drag and drop your exported recording here or click to open the file browser.
-                        </p>
-                    </div>
-                </Dragger>
+                    <LemonFileInput
+                        accept={'application/json'}
+                        multiple={false}
+                        onChange={(files) => loadFromFile(files[0])}
+                        alternativeDropTargetRef={dropRef}
+                        callToAction={
+                            <div className={'flex flex-col items-center justify-center space-y-2'}>
+                                <span className="flex items-center gap-2 font-semibold">
+                                    <IconUploadFile className={'text-2xl'} /> Load recording
+                                </span>
+                                <div>Drag and drop your exported recording here or click to open the file browser.</div>
+                            </div>
+                        }
+                    />
+                </div>
             )}
         </div>
     )