From 80bf86992dac2271133e4bdb95cced2e3c0b0719 Mon Sep 17 00:00:00 2001
From: Kristin Aoki <42981026+KristinAoki@users.noreply.github.com>
Date: Mon, 25 Mar 2024 10:02:09 -0400
Subject: [PATCH] fix: transcript and thumbnail uploads (#914)

* fix: transcript and thumbnail uploads

* chore: add missing tests
---
 .../videos-page/VideoThumbnail.jsx            | 63 ++++++++++---------
 .../videos-page/VideosPage.test.jsx           |  6 ++
 .../transcript-item/Transcript.jsx            |  3 +-
 3 files changed, 41 insertions(+), 31 deletions(-)

diff --git a/src/files-and-videos/videos-page/VideoThumbnail.jsx b/src/files-and-videos/videos-page/VideoThumbnail.jsx
index c796647b4..d1c65f337 100644
--- a/src/files-and-videos/videos-page/VideoThumbnail.jsx
+++ b/src/files-and-videos/videos-page/VideoThumbnail.jsx
@@ -26,7 +26,10 @@ const VideoThumbnail = ({
   intl,
 }) => {
   const fileInputControl = useFileInput({
-    onAddFile: (file) => handleAddThumbnail(file, id),
+    onAddFile: (files) => {
+      const [file] = files;
+      handleAddThumbnail(file, id);
+    },
     setSelectedRows: () => {},
     setAddOpen: () => false,
   });
@@ -46,18 +49,30 @@ const VideoThumbnail = ({
   const showThumbnail = allowThumbnailUpload && thumbnail && isUploaded;
 
   return (
-    <div data-testid={`video-thumbnail-${id}`} className="video-thumbnail row justify-content-center align-itmes-center">
-      {allowThumbnailUpload && <div className="thumbnail-overlay" />}
+    <div className="video-thumbnail row justify-content-center align-itmes-center">
+      {allowThumbnailUpload && showThumbnail && <div className="thumbnail-overlay" />}
       {showThumbnail && !thumbnailError && pageLoadStatus === RequestStatus.SUCCESSFUL ? (
-        <div className="border rounded">
-          <Image
-            style={imageSize}
-            className="m-1 bg-light-300"
-            src={thumbnail}
-            alt={intl.formatMessage(messages.thumbnailAltMessage, { displayName })}
-            onError={() => setThumbnailError(true)}
-          />
-        </div>
+        <>
+          <div className="border rounded">
+            <Image
+              style={imageSize}
+              className="m-1 bg-light-300"
+              src={thumbnail}
+              alt={intl.formatMessage(messages.thumbnailAltMessage, { displayName })}
+              onError={() => setThumbnailError(true)}
+            />
+          </div>
+          <div className="add-thumbnail" data-testid={`video-thumbnail-${id}`}>
+            <Button
+              variant="primary"
+              size="sm"
+              onClick={fileInputControl.click}
+              tabIndex="0"
+            >
+              {addThumbnailMessage}
+            </Button>
+          </div>
+        </>
       ) : (
         <>
           <div
@@ -76,24 +91,12 @@ const VideoThumbnail = ({
         </>
       )}
       {allowThumbnailUpload && (
-        <>
-          <div className="add-thumbnail">
-            <Button
-              variant="primary"
-              size="sm"
-              onClick={fileInputControl.click}
-              tabIndex="0"
-            >
-              {addThumbnailMessage}
-            </Button>
-          </div>
-          <FileInput
-            key="video-thumbnail-upload"
-            fileInput={fileInputControl}
-            supportedFileFormats={supportedFiles}
-            allowMultiple={false}
-          />
-        </>
+        <FileInput
+          key="video-thumbnail-upload"
+          fileInput={fileInputControl}
+          supportedFileFormats={supportedFiles}
+          allowMultiple={false}
+        />
       )}
     </div>
   );
diff --git a/src/files-and-videos/videos-page/VideosPage.test.jsx b/src/files-and-videos/videos-page/VideosPage.test.jsx
index 833571187..21327140d 100644
--- a/src/files-and-videos/videos-page/VideosPage.test.jsx
+++ b/src/files-and-videos/videos-page/VideosPage.test.jsx
@@ -218,6 +218,12 @@ describe('Videos page', () => {
         const updateStatus = store.getState().videos.updatingStatus;
         expect(updateStatus).toEqual(RequestStatus.SUCCESSFUL);
       });
+      it('should no render thumbnail upload button', async () => {
+        await mockStore(RequestStatus.SUCCESSFUL);
+        const addThumbnailButton = screen.queryByTestId('video-thumbnail-mOckID5');
+
+        expect(addThumbnailButton).toBeNull();
+      });
     });
 
     describe('table actions', () => {
diff --git a/src/files-and-videos/videos-page/info-sidebar/transcript-item/Transcript.jsx b/src/files-and-videos/videos-page/info-sidebar/transcript-item/Transcript.jsx
index 781fe2574..cb0a9f67c 100644
--- a/src/files-and-videos/videos-page/info-sidebar/transcript-item/Transcript.jsx
+++ b/src/files-and-videos/videos-page/info-sidebar/transcript-item/Transcript.jsx
@@ -32,7 +32,8 @@ const Transcript = ({
   }, [transcript]);
 
   const input = useFileInput({
-    onAddFile: (file) => {
+    onAddFile: (files) => {
+      const [file] = files;
       handleTranscript({
         file,
         language,