fix: video status badge translation (#438)

Author: CefBoud

README.md

@@ -11,7 +11,7 @@ This guide presumes you have a functioning devstack.
 
 1. Enable Studio to use an editor for your xblock using waffle flags
     1. Add the string name of your editor e.g. `html` to the flag check in the [edx-platform repo.](https://github.com/openedx/edx-platform/blob/369e5af85ab58c51a4bf4baf249d5cb36c1961fe/cms/static/js/views/pages/container.js#L190)
-    2. In devstack + venv, run `$ make dev.provision.lms+studio+frontend-app-course-authoring` to make up the required services. Minimum services required are lms, studio and frontend-app-course-authoring.
+    2. In devstack + venv, run `$ make dev.provision.lms+cms+frontend-app-course-authoring` to make up the required services. Minimum services required are lms, studio and frontend-app-course-authoring.
     4. In [Studio Django Admin](http://localhost:18000/admin/waffle/flag/) turn on `new_core_editors.use_new_text_editor` flag for HTML editor, `new_core_editors.use_new_video_editor` flag for new video editor, and `new_core_editors.use_new_problem_editor` flag for problems. The list of supported flags is in [toggles.py. ](https://github.com/openedx/edx-platform/blob/master/cms/djangoapps/contentstore/toggles.py). you might have to add a flag for your xblock of choice.
 2. Clone this repo into the [`${DEVSTACK_WORKSPACE}/src` directory](https://edx.readthedocs.io/projects/open-edx-devstack/en/latest/readme.html?highlight=DEVSTACK_WORKSPACE#id9) the sibling repo of your edx devstack `/src`.
 3. In the course authoring app, follow the guide to use your [local verison of frontend-lib-content-components. ](https://github.com/openedx/frontend-build#local-module-configuration-for-webpack) The module.config.js in the frontend-app-course-authoring repo will be:

src/editors/containers/VideoGallery/hooks.js

@@ -52,8 +52,6 @@ export const filterListByStatus = ({ statusFilter, videoList }) => {
   if (statusFilter === filterKeys.anyStatus) {
     return videoList;
   }
-  // TODO deal with translation mismatch because the video status is
-  // already translated in the backend
   return videoList.filter(({ status }) => filterKeys[statusFilter] === status);
 };
 
@@ -166,8 +164,9 @@ export const buildVideos = ({ rawVideos }) => {
       dateAdded: new Date(video.created),
       locked: false,
       thumbnail: video.course_video_image_url,
-      status: video.status,
-      statusBadgeVariant: module.getstatusBadgeVariant({ status: video.status }),
+      status: video.status_nontranslated,
+      statusBadgeVariant: module.getstatusBadgeVariant({ status: video.status_nontranslated }),
+      statusMessage: module.getStatusMessage({ status: video.status_nontranslated }),
       duration: video.duration,
       transcripts: video.transcripts,
     }));
@@ -177,7 +176,6 @@ export const buildVideos = ({ rawVideos }) => {
 
 export const getstatusBadgeVariant = ({ status }) => {
   switch (status) {
-    // TODO deal with translation mismatch
     case filterKeys.failed:
       return 'danger';
     case filterKeys.uploading:
@@ -188,6 +186,8 @@ export const getstatusBadgeVariant = ({ status }) => {
   }
 };
 
+export const getStatusMessage = ({ status }) => Object.values(filterMessages).find((m) => m.defaultMessage === status);
+
 export const useVideoProps = ({ videos }) => {
   const searchSortProps = useSearchAndSortProps();
   const videoList = useVideoListProps({

src/editors/containers/VideoGallery/index.test.jsx

@@ -22,6 +22,7 @@ const initialVideos = [
     course_video_image_url: 'course_video_image_url_1',
     created: '2022-09-07T04:56:58.726Z',
     status: 'Uploading',
+    status_nontranslated: 'Uploading',
     duration: 3,
     transcripts: [],
   },
@@ -31,6 +32,7 @@ const initialVideos = [
     course_video_image_url: 'course_video_image_url_2',
     created: '2022-11-07T04:56:58.726Z',
     status: 'In Progress',
+    status_nontranslated: 'In Progress',
     duration: 2,
     transcripts: [],
   }, {
@@ -39,6 +41,7 @@ const initialVideos = [
     course_video_image_url: 'course_video_image_url_3',
     created: '2022-01-07T04:56:58.726Z',
     status: 'Ready',
+    status_nontranslated: 'Ready',
     duration: 4,
     transcripts: [],
   },
@@ -146,7 +149,7 @@ describe('VideoGallery', () => {
     });
     it.each([
       ['Uploading', 1, [1]],
-      ['Processing', 1, [2]],
+      ['In Progress', 1, [2]],
       ['Ready', 1, [3]],
       ['Failed', 1, [4]],
     ])('videos can be filtered by status %s', async (filterBy, length, items) => {
@@ -158,6 +161,7 @@ describe('VideoGallery', () => {
           course_video_image_url: 'course_video_image_url_4',
           created: '2022-01-07T04:56:58.726Z',
           status: 'Failed',
+          status_nontranslated: 'Failed',
           duration: 4,
           transcripts: [],
         }],

src/editors/containers/VideoGallery/messages.js

@@ -54,31 +54,31 @@ export const messages = {
     description: 'Dropdown label for sorting by duration (longest)',
   },
 
-  // Filter Dropdown
-  filterByVideoStatusAny: {
-    id: 'authoring.selectvideomodal.filter.videostatusnone.label',
+  // Video status labels
+  videoStatusAny: {
+    id: 'authoring.selectvideomodal.videostatusnone.label',
     defaultMessage: 'Any status',
-    description: 'Dropdown label for no filter (any status)',
+    description: 'Label for video status (any status)',
   },
-  filterByVideoStatusUploading: {
-    id: 'authoring.selectvideomodal.filter.videostatusuploading.label',
+  videoStatusUploading: {
+    id: 'authoring.selectvideomodal.videostatusuploading.label',
     defaultMessage: 'Uploading',
-    description: 'Dropdown label for filter by video status (uploading)',
+    description: 'Label for video status (uploading)',
   },
-  filterByVideoStatusProcessing: {
-    id: 'authoring.selectvideomodal.filter.videostatusprocessing.label',
-    defaultMessage: 'Processing',
-    description: 'Dropdown label for filter by video status (processing)',
+  videoStatusProcessing: {
+    id: 'authoring.selectvideomodal.videostatusprocessing.label',
+    defaultMessage: 'In Progress',
+    description: 'Label for video status (processing)',
   },
-  filterByVideoStatusReady: {
-    id: 'authoring.selectvideomodal.filter.videostatusready.label',
+  videoStatusReady: {
+    id: 'authoring.selectvideomodal.videostatusready.label',
     defaultMessage: 'Ready',
-    description: 'Dropdown label for filter by video status (ready)',
+    description: 'Label for video status (ready)',
   },
-  filterByVideoStatusFailed: {
-    id: 'authoring.selectvideomodal.filter.videostatusfailed.label',
+  videoStatusFailed: {
+    id: 'authoring.selectvideomodal.videostatusfailed.label',
     defaultMessage: 'Failed',
-    description: 'Dropdown label for filter by video status (failed)',
+    description: 'Label for video status (failed)',
   },
 
   // Hide switch

src/editors/containers/VideoGallery/utils.js

@@ -30,11 +30,11 @@ export const filterKeys = StrictDict({
 });
 
 export const filterMessages = StrictDict({
-  anyStatus: messages[messageKeys.filterByVideoStatusAny],
-  uploading: messages[messageKeys.filterByVideoStatusUploading],
-  processing: messages[messageKeys.filterByVideoStatusProcessing],
-  ready: messages[messageKeys.filterByVideoStatusReady],
-  failed: messages[messageKeys.filterByVideoStatusFailed],
+  anyStatus: messages[messageKeys.videoStatusAny],
+  uploading: messages[messageKeys.videoStatusUploading],
+  processing: messages[messageKeys.videoStatusProcessing],
+  ready: messages[messageKeys.videoStatusReady],
+  failed: messages[messageKeys.videoStatusFailed],
 });
 
 export const sortFunctions = StrictDict({

src/editors/sharedComponents/SelectionModal/GalleryCard.jsx

@@ -44,9 +44,9 @@ export const GalleryCard = ({
               onError={thumbnailFallback && (() => setThumbnailError(true))}
             />
           )}
-          { asset.status && asset.statusBadgeVariant && (
+          { asset.statusMessage && asset.statusBadgeVariant && (
             <Badge variant={asset.statusBadgeVariant} style={{ position: 'absolute', left: '6px', top: '6px' }}>
-              {asset.status}
+              <FormattedMessage {...asset.statusMessage} />
             </Badge>
           )}
           { asset.duration >= 0 && (
@@ -103,6 +103,7 @@ GalleryCard.propTypes = {
     url: PropTypes.string,
     duration: PropTypes.number,
     status: PropTypes.string,
+    statusMessage: PropTypes.objectOf(PropTypes.string),
     statusBadgeVariant: PropTypes.string,
     transcripts: PropTypes.arrayOf(PropTypes.string),
   }).isRequired,

src/editors/sharedComponents/SelectionModal/__snapshots__/GalleryCard.test.jsx.snap

@@ -216,18 +216,6 @@ exports[`GalleryCard component snapshot with status badge 1`] = `
           }
         }
       />
-      <Badge
-        style={
-          Object {
-            "left": "6px",
-            "position": "absolute",
-            "top": "6px",
-          }
-        }
-        variant="danger"
-      >
-        failed
-      </Badge>
     </div>
     <div
       className="card-text px-3 py-2"