From 1fdddfb869434c02b5d5928b6e84ac6e02ba913d Mon Sep 17 00:00:00 2001
From: Jesper Hodge <19345795+jesperhodge@users.noreply.github.com>
Date: Mon, 11 Mar 2024 17:10:33 -0400
Subject: [PATCH] Fix  replace broken selectable box component everywhere
 (#887)

The Configure Live modal in Pages & Resources page uses a selectable box to select the video conferencing tool. It seems broken as well (not selectable).

It looks like the bug with not working SelectableBox (see e.g. #886) affects pretty much any component that uses it.

Thus, this PR replaces every usage of the paragon component with our working copy from flcc.
---
 plugins/course-apps/live/Settings.jsx                         | 3 ++-
 plugins/course-apps/live/package.json                         | 1 +
 src/content-tags-drawer/ContentTagsCollapsible.jsx            | 2 +-
 src/content-tags-drawer/ContentTagsDropDownSelector.jsx       | 2 +-
 .../videos-page/transcript-settings/OrderTranscriptForm.jsx   | 4 ++--
 5 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/plugins/course-apps/live/Settings.jsx b/plugins/course-apps/live/Settings.jsx
index 3891b09603..a8f09257b5 100644
--- a/plugins/course-apps/live/Settings.jsx
+++ b/plugins/course-apps/live/Settings.jsx
@@ -1,8 +1,9 @@
 import React, { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { camelCase } from 'lodash';
-import { SelectableBox, Icon } from '@openedx/paragon';
+import { Icon } from '@openedx/paragon';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { SelectableBox } from '@edx/frontend-lib-content-components';
 import PropTypes from 'prop-types';
 import * as Yup from 'yup';
 import { useNavigate } from 'react-router-dom';
diff --git a/plugins/course-apps/live/package.json b/plugins/course-apps/live/package.json
index 6fbd074feb..50f38b725d 100644
--- a/plugins/course-apps/live/package.json
+++ b/plugins/course-apps/live/package.json
@@ -4,6 +4,7 @@
     "description": "Live course configuration for courses using it",
     "peerDependencies": {
         "@edx/frontend-app-course-authoring": "*",
+        "@edx/frontend-lib-content-components": "*",
         "@edx/frontend-platform": "*",
         "@openedx/paragon": "*",
         "@reduxjs/toolkit": "*",
diff --git a/src/content-tags-drawer/ContentTagsCollapsible.jsx b/src/content-tags-drawer/ContentTagsCollapsible.jsx
index ea74dd1d58..0f5e12d916 100644
--- a/src/content-tags-drawer/ContentTagsCollapsible.jsx
+++ b/src/content-tags-drawer/ContentTagsCollapsible.jsx
@@ -3,7 +3,6 @@ import React from 'react';
 import {
   Badge,
   Collapsible,
-  SelectableBox,
   Button,
   ModalPopup,
   useToggle,
@@ -11,6 +10,7 @@ import {
 } from '@openedx/paragon';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import { SelectableBox } from '@edx/frontend-lib-content-components';
 import { useIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
 import { debounce } from 'lodash';
 import messages from './messages';
diff --git a/src/content-tags-drawer/ContentTagsDropDownSelector.jsx b/src/content-tags-drawer/ContentTagsDropDownSelector.jsx
index d82a74e00a..801597786d 100644
--- a/src/content-tags-drawer/ContentTagsDropDownSelector.jsx
+++ b/src/content-tags-drawer/ContentTagsDropDownSelector.jsx
@@ -1,11 +1,11 @@
 // @ts-check
 import React, { useEffect, useState, useCallback } from 'react';
 import {
-  SelectableBox,
   Icon,
   Spinner,
   Button,
 } from '@openedx/paragon';
+import { SelectableBox } from '@edx/frontend-lib-content-components';
 import { useIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
 import { ArrowDropDown, ArrowDropUp } from '@openedx/paragon/icons';
 import PropTypes from 'prop-types';
diff --git a/src/files-and-videos/videos-page/transcript-settings/OrderTranscriptForm.jsx b/src/files-and-videos/videos-page/transcript-settings/OrderTranscriptForm.jsx
index 426be02719..0b47ce46d1 100644
--- a/src/files-and-videos/videos-page/transcript-settings/OrderTranscriptForm.jsx
+++ b/src/files-and-videos/videos-page/transcript-settings/OrderTranscriptForm.jsx
@@ -6,8 +6,8 @@ import {
   injectIntl,
   intlShape,
 } from '@edx/frontend-platform/i18n';
-import { Button, SelectableBox, Stack } from '@openedx/paragon';
-import { ErrorAlert } from '@edx/frontend-lib-content-components';
+import { Button, Stack } from '@openedx/paragon';
+import { ErrorAlert, SelectableBox } from '@edx/frontend-lib-content-components';
 import Cielo24Form from './Cielo24Form';
 import ThreePlayMediaForm from './ThreePlayMediaForm';
 import { RequestStatus } from '../../../data/constants';