From fb2a79985ef1c34ea84f04257cf3c2210b6890b6 Mon Sep 17 00:00:00 2001
From: Jesper Hodge <19345795+jesperhodge@users.noreply.github.com>
Date: Mon, 11 Mar 2024 15:26:54 -0400
Subject: [PATCH] Fix: selectable box in gallery (#461)

This fixes a bug where images and videos are not clickable when using the Gallery component.
Please see https://github.com/openedx/frontend-lib-content-components/pull/460 for a full description of the bug.
---
 .../SelectionModal/Gallery.jsx                |  4 +-
 .../SelectionModal/GalleryCard.jsx            |  2 +-
 .../__snapshots__/GalleryCard.test.jsx.snap   | 60 +++++++++++++++----
 3 files changed, 51 insertions(+), 15 deletions(-)

diff --git a/src/editors/sharedComponents/SelectionModal/Gallery.jsx b/src/editors/sharedComponents/SelectionModal/Gallery.jsx
index 179ab30e0..fe9db0532 100644
--- a/src/editors/sharedComponents/SelectionModal/Gallery.jsx
+++ b/src/editors/sharedComponents/SelectionModal/Gallery.jsx
@@ -2,14 +2,14 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import {
-  Scrollable, SelectableBox, Spinner,
+  Scrollable, Spinner,
 } from '@openedx/paragon';
-
 import {
   FormattedMessage,
   useIntl,
 } from '@edx/frontend-platform/i18n';
 
+import SelectableBox from '../SelectableBox';
 import messages from './messages';
 import GalleryCard from './GalleryCard';
 
diff --git a/src/editors/sharedComponents/SelectionModal/GalleryCard.jsx b/src/editors/sharedComponents/SelectionModal/GalleryCard.jsx
index a2207caff..c661c9de8 100644
--- a/src/editors/sharedComponents/SelectionModal/GalleryCard.jsx
+++ b/src/editors/sharedComponents/SelectionModal/GalleryCard.jsx
@@ -4,10 +4,10 @@ import PropTypes from 'prop-types';
 import {
   Badge,
   Image,
-  SelectableBox,
 } from '@openedx/paragon';
 import { FormattedMessage, FormattedDate, FormattedTime } from '@edx/frontend-platform/i18n';
 
+import SelectableBox from '../SelectableBox';
 import messages from './messages';
 import { formatDuration } from '../../utils';
 import LanguageNamesWidget from '../../containers/VideoEditor/components/VideoSettingsModal/components/VideoPreviewWidget/LanguageNamesWidget';
diff --git a/src/editors/sharedComponents/SelectionModal/__snapshots__/GalleryCard.test.jsx.snap b/src/editors/sharedComponents/SelectionModal/__snapshots__/GalleryCard.test.jsx.snap
index 426ce389f..129295346 100644
--- a/src/editors/sharedComponents/SelectionModal/__snapshots__/GalleryCard.test.jsx.snap
+++ b/src/editors/sharedComponents/SelectionModal/__snapshots__/GalleryCard.test.jsx.snap
@@ -1,9 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`GalleryCard component snapshot with duration badge 1`] = `
-<SelectableBox
+<ForwardRef
+  checked={false}
   className="card bg-white shadow-none border-0 py-0"
+  inputHidden={true}
+  isIndeterminate={false}
+  isInvalid={false}
   key="props.img.externalUrl"
+  onClick={[Function]}
+  onFocus={[Function]}
   type="radio"
 >
   <div
@@ -81,13 +87,19 @@ exports[`GalleryCard component snapshot with duration badge 1`] = `
       </p>
     </div>
   </div>
-</SelectableBox>
+</ForwardRef>
 `;
 
 exports[`GalleryCard component snapshot with duration transcripts 1`] = `
-<SelectableBox
+<ForwardRef
+  checked={false}
   className="card bg-white shadow-none border-0 py-0"
+  inputHidden={true}
+  isIndeterminate={false}
+  isInvalid={false}
   key="props.img.externalUrl"
+  onClick={[Function]}
+  onFocus={[Function]}
   type="radio"
 >
   <div
@@ -167,13 +179,19 @@ exports[`GalleryCard component snapshot with duration transcripts 1`] = `
       </p>
     </div>
   </div>
-</SelectableBox>
+</ForwardRef>
 `;
 
 exports[`GalleryCard component snapshot with status badge 1`] = `
-<SelectableBox
+<ForwardRef
+  checked={false}
   className="card bg-white shadow-none border-0 py-0"
+  inputHidden={true}
+  isIndeterminate={false}
+  isInvalid={false}
   key="props.img.externalUrl"
+  onClick={[Function]}
+  onFocus={[Function]}
   type="radio"
 >
   <div
@@ -250,13 +268,19 @@ exports[`GalleryCard component snapshot with status badge 1`] = `
       </p>
     </div>
   </div>
-</SelectableBox>
+</ForwardRef>
 `;
 
 exports[`GalleryCard component snapshot with thumbnail fallback and load error 1`] = `
-<SelectableBox
+<ForwardRef
+  checked={false}
   className="card bg-white shadow-none border-0 py-0"
+  inputHidden={true}
+  isIndeterminate={false}
+  isInvalid={false}
   key="props.img.externalUrl"
+  onClick={[Function]}
+  onFocus={[Function]}
   type="radio"
 >
   <div
@@ -322,13 +346,19 @@ exports[`GalleryCard component snapshot with thumbnail fallback and load error 1
       </p>
     </div>
   </div>
-</SelectableBox>
+</ForwardRef>
 `;
 
 exports[`GalleryCard component snapshot with thumbnail fallback and no error 1`] = `
-<SelectableBox
+<ForwardRef
+  checked={false}
   className="card bg-white shadow-none border-0 py-0"
+  inputHidden={true}
+  isIndeterminate={false}
+  isInvalid={false}
   key="props.img.externalUrl"
+  onClick={[Function]}
+  onFocus={[Function]}
   type="radio"
 >
   <div
@@ -394,13 +424,19 @@ exports[`GalleryCard component snapshot with thumbnail fallback and no error 1`]
       </p>
     </div>
   </div>
-</SelectableBox>
+</ForwardRef>
 `;
 
 exports[`GalleryCard component snapshot: dateAdded=12345 1`] = `
-<SelectableBox
+<ForwardRef
+  checked={false}
   className="card bg-white shadow-none border-0 py-0"
+  inputHidden={true}
+  isIndeterminate={false}
+  isInvalid={false}
   key="props.img.externalUrl"
+  onClick={[Function]}
+  onFocus={[Function]}
   type="radio"
 >
   <div
@@ -465,5 +501,5 @@ exports[`GalleryCard component snapshot: dateAdded=12345 1`] = `
       </p>
     </div>
   </div>
-</SelectableBox>
+</ForwardRef>
 `;