fix: re-add video sharing options

Author: rpenido

src/course-outline/CourseOutline.test.tsx

@@ -52,13 +52,14 @@ import {
   courseSectionMock,
   courseSubsectionMock,
 } from './__mocks__';
-import { COURSE_BLOCK_NAMES } from './constants';
+import { COURSE_BLOCK_NAMES, VIDEO_SHARING_OPTIONS } from './constants';
 import CourseOutline from './CourseOutline';
 
 import messages from './messages';
 import headerMessages from './header-navigations/messages';
 import cardHeaderMessages from './card-header/messages';
 import enableHighlightsModalMessages from './enable-highlights-modal/messages';
+import statusBarMessages from './status-bar/messages';
 import subsectionMessages from './subsection-card/messages';
 import pageAlertMessages from './page-alerts/messages';
 import {
@@ -242,6 +243,59 @@ describe('<CourseOutline />', () => {
     expect(await findByText(messages.alertSuccessDescription.defaultMessage)).toBeInTheDocument();
   });
 
+  it('check video sharing option udpates correctly', async () => {
+    const { findByLabelText } = renderComponent();
+
+    axiosMock
+      .onPost(getCourseBlockApiUrl(courseId), {
+        metadata: {
+          video_sharing_options: VIDEO_SHARING_OPTIONS.allOff,
+        },
+      })
+      .reply(200);
+    const optionDropdown = await findByLabelText(statusBarMessages.videoSharingTitle.defaultMessage);
+    await act(
+      async () => fireEvent.change(optionDropdown, { target: { value: VIDEO_SHARING_OPTIONS.allOff } }),
+    );
+
+    expect(axiosMock.history.post.length).toBe(3);
+    expect(axiosMock.history.post[2].data).toBe(JSON.stringify({
+      metadata: {
+        video_sharing_options: VIDEO_SHARING_OPTIONS.allOff,
+      },
+    }));
+  });
+
+  it('check video sharing option shows error on failure', async () => {
+    renderComponent();
+
+    axiosMock
+      .onPost(getCourseBlockApiUrl(courseId), {
+        metadata: {
+          video_sharing_options: VIDEO_SHARING_OPTIONS.allOff,
+        },
+      })
+      .reply(500);
+    const optionDropdown = await screen.findByLabelText(statusBarMessages.videoSharingTitle.defaultMessage);
+    await act(
+      async () => fireEvent.change(optionDropdown, { target: { value: VIDEO_SHARING_OPTIONS.allOff } }),
+    );
+
+    expect(axiosMock.history.post.length).toBe(3);
+    expect(axiosMock.history.post[2].data).toBe(JSON.stringify({
+      metadata: {
+        video_sharing_options: VIDEO_SHARING_OPTIONS.allOff,
+      },
+    }));
+
+    const alertElements = screen.queryAllByRole('alert');
+    expect(alertElements.find(
+      (el) => el.classList.contains('alert-content'),
+    )).toHaveTextContent(
+      'Unable to save changes. Please try again.',
+    );
+  });
+
   it('render error alert after failed reindex correctly', async () => {
     const { findByText, findByTestId } = renderComponent();
 

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.queryByText('Video Sharing:')).not.toBeInTheDocument();
   });
 
   it('renders Archived Badge', async () => {
@@ -137,4 +144,15 @@ 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.findByText('Video Sharing:')).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 && (
+        <VideoSharingDropdown
+          handleVideoSharingOptionChange={handleVideoSharingOptionChange}
+          videoSharingOptions={videoSharingOptions}
+        />
+      )}
       <NotificationStatusIcon />
     </Stack>
   );