From 3315205d15701475f94410abcc51476a1d52ca42 Mon Sep 17 00:00:00 2001 From: ABBOUD Moncef Date: Mon, 13 May 2024 21:26:07 +0200 Subject: [PATCH] fix: video status badge translation (#438) --- README.md | 2 +- src/editors/containers/VideoGallery/hooks.js | 10 +++--- .../containers/VideoGallery/index.test.jsx | 6 +++- .../containers/VideoGallery/messages.js | 34 +++++++++---------- src/editors/containers/VideoGallery/utils.js | 10 +++--- .../SelectionModal/GalleryCard.jsx | 5 +-- .../__snapshots__/GalleryCard.test.jsx.snap | 12 ------- 7 files changed, 36 insertions(+), 43 deletions(-) diff --git a/README.md b/README.md index cf8b3936e..fe0c00c89 100644 --- a/README.md +++ b/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: diff --git a/src/editors/containers/VideoGallery/hooks.js b/src/editors/containers/VideoGallery/hooks.js index 74f1d2718..d52a1cf31 100644 --- a/src/editors/containers/VideoGallery/hooks.js +++ b/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({ diff --git a/src/editors/containers/VideoGallery/index.test.jsx b/src/editors/containers/VideoGallery/index.test.jsx index f71edbe0e..3abae625e 100644 --- a/src/editors/containers/VideoGallery/index.test.jsx +++ b/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: [], }], diff --git a/src/editors/containers/VideoGallery/messages.js b/src/editors/containers/VideoGallery/messages.js index 2089806e7..c0c582c35 100644 --- a/src/editors/containers/VideoGallery/messages.js +++ b/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 diff --git a/src/editors/containers/VideoGallery/utils.js b/src/editors/containers/VideoGallery/utils.js index 94a60e487..1b4767b41 100644 --- a/src/editors/containers/VideoGallery/utils.js +++ b/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({ diff --git a/src/editors/sharedComponents/SelectionModal/GalleryCard.jsx b/src/editors/sharedComponents/SelectionModal/GalleryCard.jsx index b513247b7..062507eb4 100644 --- a/src/editors/sharedComponents/SelectionModal/GalleryCard.jsx +++ b/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 && ( - {asset.status} + )} { 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, diff --git a/src/editors/sharedComponents/SelectionModal/__snapshots__/GalleryCard.test.jsx.snap b/src/editors/sharedComponents/SelectionModal/__snapshots__/GalleryCard.test.jsx.snap index 129295346..4e4ceffe9 100644 --- a/src/editors/sharedComponents/SelectionModal/__snapshots__/GalleryCard.test.jsx.snap +++ b/src/editors/sharedComponents/SelectionModal/__snapshots__/GalleryCard.test.jsx.snap @@ -216,18 +216,6 @@ exports[`GalleryCard component snapshot with status badge 1`] = ` } } /> - - failed -