fix: readd video sharing options

Author: rpenido

src/course-outline/CourseOutline.tsx

@@ -112,6 +112,7 @@ const CourseOutline = () => {
     handleDuplicateSectionSubmit,
     handleDuplicateSubsectionSubmit,
     handleDuplicateUnitSubmit,
+    handleVideoSharingOptionChange,
     handlePasteClipboardClick,
     notificationDismissUrl,
     discussionsSettings,
@@ -243,6 +244,7 @@ const CourseOutline = () => {
             isLoading={isLoading}
             statusBarData={statusBarData}
             openEnableHighlightsModal={openEnableHighlightsModal}
+            handleVideoSharingOptionChange={handleVideoSharingOptionChange}
           />
           <hr className="mt-4 mb-0 w-100 text-light-400" />
           <div className="d-flex align-items-baseline">

src/course-outline/constants.ts

@@ -73,6 +73,12 @@ export const BEST_PRACTICES_CHECKLIST = {
   ],
 } as const;
 
+export const VIDEO_SHARING_OPTIONS = {
+  perVideo: 'per-video',
+  allOn: 'all-on',
+  allOff: 'all-off',
+} as const;
+
 export const API_ERROR_TYPES = {
   networkError: 'networkError',
   serverError: 'serverError',

src/course-outline/data/api.ts

@@ -454,6 +454,26 @@ export async function setCourseItemOrderList(itemId: string, children: Array<str
   return data;
 }
 
+/**
+ * Set video sharing setting
+ * @param {string} courseId
+ * @param {string} videoSharingOption
+ * @returns {Promise<Object>}
+ */
+export async function setVideoSharingOption(
+  courseId: string,
+  videoSharingOption: string,
+): Promise<object> {
+  const { data } = await getAuthenticatedHttpClient()
+    .post(getCourseBlockApiUrl(courseId), {
+      metadata: {
+        video_sharing_options: videoSharingOption,
+      },
+    });
+
+  return data;
+}
+
 /**
  * Paste block to clipboard
  * @param {string} parentLocator

src/course-outline/data/slice.ts

@@ -2,6 +2,7 @@
 import { createSlice } from '@reduxjs/toolkit';
 
 import { RequestStatus } from '@src/data/constants';
+import { VIDEO_SHARING_OPTIONS } from '@src/course-outline/constants';
 import { CourseOutlineState } from './types';
 
 const initialState = {
@@ -31,6 +32,7 @@ const initialState = {
       completedCourseBestPracticesChecks: 0,
     },
     videoSharingEnabled: false,
+    videoSharingOptions: VIDEO_SHARING_OPTIONS.perVideo,
   },
   sectionsList: [],
   isCustomRelativeDatesActive: false,

src/course-outline/data/thunk.ts

@@ -15,6 +15,7 @@ import {
   getCourseItem,
   restartIndexingOnCourse,
   setSectionOrderList,
+  setVideoSharingOption,
   setCourseItemOrderList,
   dismissNotification,
   createDiscussionsTopics,
@@ -157,6 +158,24 @@ export function enableCourseHighlightsEmailsQuery(courseId: string) {
   };
 }
 
+export function setVideoSharingOptionQuery(courseId: string, option: string) {
+  return async (dispatch) => {
+    dispatch(updateSavingStatus({ status: RequestStatus.PENDING }));
+    showToastOutsideReact(NOTIFICATION_MESSAGES.saving);
+
+    try {
+      await setVideoSharingOption(courseId, option);
+      dispatch(updateStatusBar({ videoSharingOptions: option }));
+
+      dispatch(updateSavingStatus({ status: RequestStatus.SUCCESSFUL }));
+    } catch {
+      dispatch(updateSavingStatus({ status: RequestStatus.FAILED }));
+    } finally {
+      closeToastOutsideReact();
+    }
+  };
+}
+
 export function fetchCourseReindexQuery(reindexLink: string) {
   return async (dispatch) => {
     dispatch(updateReindexLoadingStatus({ status: RequestStatus.IN_PROGRESS }));

src/course-outline/data/types.ts

@@ -52,6 +52,7 @@ export interface CourseOutlineStatusBar {
   isSelfPaced: boolean;
   checklist: ChecklistType;
   videoSharingEnabled: boolean;
+  videoSharingOptions: string;
 }
 
 export interface CourseOutlineState {

src/course-outline/hooks.jsx

@@ -39,6 +39,7 @@ import {
   fetchCourseBestPracticesQuery,
   fetchCourseLaunchQuery,
   fetchCourseReindexQuery,
+  setVideoSharingOptionQuery,
   dismissNotificationQuery,
   syncDiscussionsTopics,
 } from './data/thunk';
@@ -223,6 +224,10 @@ const useCourseOutline = ({ courseId }) => {
     handleConfigureModalClose();
   };
 
+  const handleVideoSharingOptionChange = (value) => {
+    dispatch(setVideoSharingOptionQuery(courseId, value));
+  };
+
   const handleDismissNotification = () => {
     dispatch(dismissNotificationQuery(`${getConfig().STUDIO_BASE_URL}${notificationDismissUrl}`));
   };
@@ -277,6 +282,7 @@ const useCourseOutline = ({ courseId }) => {
     handleDuplicateSectionSubmit,
     handleDuplicateSubsectionSubmit,
     handleDuplicateUnitSubmit,
+    handleVideoSharingOptionChange,
     handlePasteClipboardClick,
     notificationDismissUrl,
     discussionsSettings,

src/course-outline/status-bar/StatusBar.test.tsx

@@ -1,3 +1,4 @@
+import { VIDEO_SHARING_OPTIONS } from '@src/course-outline/constants';
 import { CourseOutlineStatusBar } from '@src/course-outline/data/types';
 import { initializeMocks, render, screen } from '@src/testUtils';
 import { StatusBar, StatusBarProps } from './StatusBar';
@@ -17,7 +18,8 @@ const statusBarData: CourseOutlineStatusBar = {
     completedCourseBestPracticesChecks: 1,
   },
   highlightsEnabledForMessaging: false,
-  videoSharingEnabled: true,
+  videoSharingEnabled: false,
+  videoSharingOptions: VIDEO_SHARING_OPTIONS.allOn,
 };
 
 jest.mock('@src/course-libraries/data/apiHooks', () => ({
@@ -35,6 +37,7 @@ jest.mock('@src/course-outline/data/apiHooks', () => ({
   }),
 }));
 const mockOpenEnableHighlightsModal = jest.fn();
+const mockHandleVideoSharingOptionChange = jest.fn();
 
 const renderComponent = (props?: Partial<StatusBarProps>) =>
   render(
@@ -43,6 +46,7 @@ const renderComponent = (props?: Partial<StatusBarProps>) =>
       isLoading={isLoading}
       statusBarData={statusBarData}
       openEnableHighlightsModal={mockOpenEnableHighlightsModal}
+      handleVideoSharingOptionChange={mockHandleVideoSharingOptionChange}
       {...props}
     />,
   );
@@ -60,6 +64,9 @@ describe('<StatusBar />', () => {
     expect(await screen.findByText('Feb 05, 2013 - Apr 09, 2013')).toBeInTheDocument();
     expect(await screen.findByText(`2/9 ${messages.checklistCompleted.defaultMessage}`)).toBeInTheDocument();
     expect(await screen.findByText('Active')).toBeInTheDocument();
+
+    // Video sharing is not enabled by default
+    expect(screen.queryByTestId('video-sharing-wrapper')).not.toBeInTheDocument();
   });
 
   it('renders Archived Badge', async () => {
@@ -137,4 +144,16 @@ describe('<StatusBar />', () => {
     });
     expect(await screen.findByText(messages.highlightEmailsEnabled.defaultMessage)).toBeInTheDocument();
   });
+
+
+  it('does render video sharing dropdown if enabled', async () => {
+    renderComponent({
+      statusBarData: {
+        ...statusBarData,
+        videoSharingEnabled: true,
+      },
+    });
+
+    expect(await screen.findByTestId('video-sharing-wrapper')).toBeInTheDocument();
+  });
 });

src/course-outline/status-bar/StatusBar.tsx

@@ -7,6 +7,8 @@ import {
 import {
   Badge,
   Button,
+  Form,
+  Hyperlink,
   Icon,
   Stack,
 } from '@openedx/paragon';
@@ -20,7 +22,10 @@ import {
 
 import type { ChecklistType, CourseOutlineStatusBar } from '@src/course-outline/data/types';
 import { useEntityLinksSummaryByDownstreamContext } from '@src/course-libraries/data/apiHooks';
+import { VIDEO_SHARING_OPTIONS } from '@src/course-outline/constants';
 import { useCourseDetails } from '@src/course-outline/data/apiHooks';
+import { getVideoSharingOptionText } from '@src/course-outline/utils';
+import { useHelpUrls } from '@src/help-urls/hooks';
 
 import messages from './messages';
 import { NotificationStatusIcon } from './NotificationStatusIcon';
@@ -203,24 +208,73 @@ const Highlights = ({ highlightsEnabledForMessaging, openEnableHighlightsModal }
   }
 };
 
+const VideoSharingDropdown = ({ handleVideoSharingOptionChange, videoSharingOptions }: {
+  handleVideoSharingOptionChange: (value: string) => void;
+  videoSharingOptions: string;
+}) => {
+  const intl = useIntl();
+  const {
+    socialSharing: socialSharingUrl,
+  } = useHelpUrls(['socialSharing']);
+
+  return (
+    <Form.Group
+      size="sm"
+      className="d-flex m-0 align-items-center"
+    >
+      <Form.Label className="h5 m-0 mr-2 text-gray-700">
+        <FormattedMessage {...messages.videoSharingTitle} />:
+      </Form.Label>
+      <div className="d-flex align-items-center">
+        <Form.Control
+          as="select"
+          defaultValue={videoSharingOptions}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleVideoSharingOptionChange(e.target.value)}
+        >
+          {Object.values(VIDEO_SHARING_OPTIONS).map((option) => (
+            <option
+              key={option}
+              value={option}
+            >
+              {getVideoSharingOptionText(option, messages, intl)}
+            </option>
+          ))}
+        </Form.Control>
+        <Hyperlink
+          className="small"
+          destination={socialSharingUrl}
+          target="_blank"
+          showLaunchIcon={false}
+        >
+          <FormattedMessage {...messages.videoSharingLink} />
+        </Hyperlink>
+      </div>
+    </Form.Group>
+  );
+};
+
 export interface StatusBarProps {
   courseId: string;
   isLoading: boolean;
   statusBarData: CourseOutlineStatusBar;
   openEnableHighlightsModal: () => void;
+  handleVideoSharingOptionChange: (value: string) => void;
 }
 
 export const StatusBar = ({
   statusBarData,
   isLoading,
   courseId,
   openEnableHighlightsModal,
+  handleVideoSharingOptionChange,
 }: StatusBarProps) => {
   const {
     endDate,
     courseReleaseDate,
     highlightsEnabledForMessaging,
     checklist,
+    videoSharingEnabled,
+    videoSharingOptions,
   } = statusBarData;
 
   const courseReleaseDateObj = moment.utc(courseReleaseDate, 'MMM DD, YYYY [at] HH:mm UTC', true);
@@ -246,6 +300,12 @@ export const StatusBar = ({
         highlightsEnabledForMessaging={highlightsEnabledForMessaging}
         openEnableHighlightsModal={openEnableHighlightsModal}
       />
+      {videoSharingEnabled || true && (
+        <VideoSharingDropdown
+          handleVideoSharingOptionChange={handleVideoSharingOptionChange}
+          videoSharingOptions={videoSharingOptions}
+        />
+      )}
       <NotificationStatusIcon />
     </Stack>
   );

src/course-outline/status-bar/messages.ts

@@ -50,6 +50,26 @@ const messages = defineMessages({
     defaultMessage: 'Manage tags',
     description: 'Opens the drawer to edit content tags',
   },
+  videoSharingTitle: {
+    id: 'course-authoring.course-outline.status-bar.video-sharing.title',
+    defaultMessage: 'Video Sharing',
+  },
+  videoSharingLink: {
+    id: 'course-authoring.course-outline.status-bar.video-sharing.link',
+    defaultMessage: 'Learn more',
+  },
+  videoSharingPerVideoText: {
+    id: 'course-authoring.course-outline.status-bar.video-sharing.perVideo.text',
+    defaultMessage: 'Per Video',
+  },
+  videoSharingAllOffText: {
+    id: 'course-authoring.course-outline.status-bar.video-sharing.allOff.text',
+    defaultMessage: 'No Videos',
+  },
+  videoSharingAllOnText: {
+    id: 'course-authoring.course-outline.status-bar.video-sharing.allOn.text',
+    defaultMessage: 'All Videos',
+  },
   unpublishedBadgeText: {
     id: 'course-authoring.course-outline.status-bar.unpublished.badge.text',
     defaultMessage: 'Unpublished Changes',