Merge pull request #344 from jansenk/events

feat: send event on checkbox change

src/editors/containers/VideoEditor/components/VideoSettingsModal/components/SocialShareWidget/constants.js

@@ -0,0 +1,5 @@
+export const analyticsEvents = {
+  socialSharingSettingChanged: 'edx.social.video_sharing_setting.changed',
+};
+
+export default analyticsEvents;

src/editors/containers/VideoEditor/components/VideoSettingsModal/components/SocialShareWidget/hooks.jsx

@@ -0,0 +1,26 @@
+import { useSelector } from 'react-redux';
+import { sendTrackEvent } from '@edx/frontend-platform/analytics';
+import { selectors } from '../../../../../../data/redux';
+import analyticsEvents from './constants';
+
+export const useTrackSocialSharingChange = ({ updateField }) => {
+  const analytics = useSelector(selectors.app.analytics);
+  const allowVideoSharing = useSelector(selectors.video.allowVideoSharing);
+  return (event) => {
+    sendTrackEvent(
+      analyticsEvents.socialSharingSettingChanged,
+      {
+        ...analytics,
+        value: event.target.checked,
+      },
+    );
+    updateField({
+      allowVideoSharing: {
+        ...allowVideoSharing,
+        value: event.target.checked,
+      },
+    });
+  };
+};
+
+export default useTrackSocialSharingChange;

src/editors/containers/VideoEditor/components/VideoSettingsModal/components/SocialShareWidget/hooks.test.jsx

@@ -0,0 +1,43 @@
+import { sendTrackEvent } from '@edx/frontend-platform/analytics';
+import analyticsEvents from './constants';
+import * as hooks from './hooks';
+
+jest.mock('../../../../../../data/redux', () => ({
+  selectors: {
+    app: {
+      analytics: jest.fn((state) => ({ analytics: state })),
+    },
+    video: {
+      allowVideoSharing: jest.fn((state) => ({ allowVideoSharing: state })),
+    },
+  },
+}));
+
+jest.mock('@edx/frontend-platform/analytics', () => ({
+  sendTrackEvent: jest.fn(),
+}));
+
+describe('SocialShareWidget hooks', () => {
+  describe('useTrackSocialSharingChange when', () => {
+    let onClick;
+    let updateField;
+    describe.each([true, false])('box is toggled', (checked) => {
+      beforeAll(() => {
+        jest.resetAllMocks();
+        updateField = jest.fn();
+        onClick = hooks.useTrackSocialSharingChange({ updateField });
+        expect(typeof onClick).toBe('function');
+        onClick({ target: { checked } });
+      });
+      it('field is updated', () => {
+        expect(updateField).toBeCalledWith({ allowVideoSharing: { value: checked } });
+      });
+      it('event tracking is called', () => {
+        expect(sendTrackEvent).toBeCalledWith(
+          analyticsEvents.socialSharingSettingChanged,
+          { value: checked },
+        );
+      });
+    });
+  });
+});

src/editors/containers/VideoEditor/components/VideoSettingsModal/components/SocialShareWidget/index.jsx

@@ -14,6 +14,7 @@ import {
 import { selectors, actions } from '../../../../../../data/redux';
 import CollapsibleFormWidget from '../CollapsibleFormWidget';
 import messages from './messages';
+import * as hooks from './hooks';
 
 /**
  * Collapsible Form widget controlling video thumbnail
@@ -32,6 +33,8 @@ export const SocialShareWidget = ({
   const isSetByCourse = allowVideoSharing.level === 'course';
   const videoSharingEnabled = isLibrary ? videoSharingEnabledForAll : videoSharingEnabledForCourse;
   const learnMoreLink = videoSharingLearnMoreLink || 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/developing_course/social_sharing.html';
+  const onSocialSharingCheckboxChange = hooks.useTrackSocialSharingChange({ updateField });
+
   const getSubtitle = () => {
     if (allowVideoSharing.value) {
       return intl.formatMessage(messages.enabledSubtitle);
@@ -52,12 +55,7 @@ export const SocialShareWidget = ({
         className="mt-3"
         checked={allowVideoSharing.value}
         disabled={isSetByCourse}
-        onChange={(e) => updateField({
-          allowVideoSharing: {
-            ...allowVideoSharing,
-            value: e.target.checked,
-          },
-        })}
+        onChange={onSocialSharingCheckboxChange}
       >
         <div className="small text-gray-700">
           {intl.formatMessage(messages.socialSharingCheckboxLabel)}

src/editors/data/redux/thunkActions/requests.js

@@ -290,7 +290,6 @@ export const fetchVideoFeatures = ({ ...rest }) => (dispatch, getState) => {
     requestKey: RequestKeys.fetchVideoFeatures,
     promise: api.fetchVideoFeatures({
       studioEndpointUrl: selectors.app.studioEndpointUrl(getState()),
-      learningContextId: selectors.app.learningContextId(getState()),
     }),
     ...rest,
   }));

src/editors/data/redux/thunkActions/requests.test.js

@@ -487,7 +487,6 @@ describe('requests thunkActions module', () => {
           requestKey: RequestKeys.fetchVideoFeatures,
           promise: api.fetchVideoFeatures({
             studioEndpointUrl: selectors.app.studioEndpointUrl(testState),
-            learningContextId: selectors.app.learningContextId(testState),
           }),
         },
       });

src/editors/data/services/cms/api.js

@@ -204,9 +204,8 @@ export const apiMethods = {
   ),
   fetchVideoFeatures: ({
     studioEndpointUrl,
-    learningContextId,
   }) => get(
-    urls.videoFeatures({ studioEndpointUrl, learningContextId }),
+    urls.videoFeatures({ studioEndpointUrl }),
   ),
   uploadVideo: ({
     data,

src/editors/data/services/cms/api.test.js

@@ -575,7 +575,7 @@ describe('cms api', () => {
   });
   describe('fetchVideoFeatures', () => {
     it('should call get with url.videoFeatures', () => {
-      const args = { studioEndpointUrl, learningContextId };
+      const args = { studioEndpointUrl };
       apiMethods.fetchVideoFeatures({ ...args });
       expect(get).toHaveBeenCalledWith(urls.videoFeatures({ ...args }));
     });

src/editors/data/services/cms/mockApi.js

@@ -152,7 +152,7 @@ export const fetchAdvanceSettings = ({ studioEndpointUrl, learningContextId }) =
   data: { allow_unsupported_xblocks: { value: true } },
 });
 // eslint-disable-next-line
-export const fetchVideoFeatures = ({ studioEndpointUrl, learningContextId }) => mockPromise({
+export const fetchVideoFeatures = ({ studioEndpointUrl }) => mockPromise({
   data: {
     allowThumbnailUpload: true,
     videoSharingEnabledForCourse: true,

src/editors/data/services/cms/urls.js

@@ -69,8 +69,8 @@ export const courseAdvanceSettings = ({ studioEndpointUrl, learningContextId })
   `${studioEndpointUrl}/api/contentstore/v0/advanced_settings/${learningContextId}`
 );
 
-export const videoFeatures = ({ studioEndpointUrl, learningContextId }) => (
-  `${studioEndpointUrl}/video_features/${learningContextId}`
+export const videoFeatures = ({ studioEndpointUrl }) => (
+  `${studioEndpointUrl}/video_features/`
 );
 
 export const courseVideos = ({ studioEndpointUrl, learningContextId }) => (

src/editors/data/services/cms/urls.test.js

@@ -141,8 +141,8 @@ describe('cms url methods', () => {
   });
   describe('videoFeatures', () => {
     it('returns url with studioEndpointUrl and learningContextId', () => {
-      expect(videoFeatures({ studioEndpointUrl, learningContextId }))
-        .toEqual(`${studioEndpointUrl}/video_features/${learningContextId}`);
+      expect(videoFeatures({ studioEndpointUrl }))
+        .toEqual(`${studioEndpointUrl}/video_features/`);
     });
   });
   describe('courseVideos', () => {