From bad763596c57356591ab27c059c20e57bd6dc88b Mon Sep 17 00:00:00 2001 From: Ihor Romaniuk Date: Thu, 30 Nov 2023 21:34:19 +0200 Subject: [PATCH 01/11] fix: video thumbnail availability (#421) --- .../__snapshots__/index.test.jsx.snap | 13 +++++++++++-- .../components/ThumbnailWidget/index.jsx | 6 +++--- .../components/ThumbnailWidget/messages.js | 3 ++- 3 files changed, 16 insertions(+), 6 deletions(-) diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/ThumbnailWidget/__snapshots__/index.test.jsx.snap b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/ThumbnailWidget/__snapshots__/index.test.jsx.snap index 925bf5993..a1f33627b 100644 --- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/ThumbnailWidget/__snapshots__/index.test.jsx.snap +++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/ThumbnailWidget/__snapshots__/index.test.jsx.snap @@ -22,7 +22,7 @@ exports[`ThumbnailWidget snapshots snapshots: renders as expected where thumbnai variant="light" > @@ -167,6 +167,15 @@ exports[`ThumbnailWidget snapshots snapshots: renders as expected with a thumbna id="authoring.videoeditor.thumbnail.error.fileSizeError" /> + + + diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/ThumbnailWidget/index.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/ThumbnailWidget/index.jsx index c8b9efe77..ce060b7d3 100644 --- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/ThumbnailWidget/index.jsx +++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/ThumbnailWidget/index.jsx @@ -75,7 +75,7 @@ export const ThumbnailWidget = ({ > - {edxVideo ? null : ( + {(allowThumbnailUpload && edxVideo) ? null : ( @@ -90,7 +90,7 @@ export const ThumbnailWidget = ({ src={thumbnailSrc || thumbnail} alt={intl.formatMessage(messages.thumbnailAltText)} /> - { (allowThumbnailUpload && edxVideo) ? ( + {(allowThumbnailUpload && edxVideo) ? ( diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/ThumbnailWidget/messages.js b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/ThumbnailWidget/messages.js index f6a1112ad..e930448cb 100644 --- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/ThumbnailWidget/messages.js +++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/ThumbnailWidget/messages.js @@ -24,7 +24,8 @@ const messages = defineMessages({ }, unavailableMessage: { id: 'authoring.videoeditor.thumbnail.unavailable.message', - defaultMessage: 'Select a video from your library to enable this feature', + defaultMessage: + 'Select a video from your library to enable this feature (applies only to courses that run on the edx.org site).', description: 'Message for unavailable thumbnail widget', }, uploadButtonLabel: { From 8928d35f17558bcb9d55e68891a0691a932ca3ff Mon Sep 17 00:00:00 2001 From: ABBOUD Moncef Date: Thu, 30 Nov 2023 20:43:12 +0100 Subject: [PATCH 02/11] fix: make filter dropdown closable by clicking outside + revert to single-value video filter (#414) --- src/editors/containers/VideoGallery/hooks.js | 29 ++++++-------- .../containers/VideoGallery/index.test.jsx | 11 +++--- .../containers/VideoGallery/messages.js | 6 +-- src/editors/containers/VideoGallery/utils.js | 3 +- .../MultiSelectFilterDropdown.jsx | 38 ------------------- .../SelectionModal/SearchSort.jsx | 31 +++++++++++++-- .../SelectionModal/SearchSort.test.jsx | 20 +++++----- 7 files changed, 59 insertions(+), 79 deletions(-) delete mode 100644 src/editors/sharedComponents/SelectionModal/MultiSelectFilterDropdown.jsx diff --git a/src/editors/containers/VideoGallery/hooks.js b/src/editors/containers/VideoGallery/hooks.js index 3c8c3ec24..2842976ad 100644 --- a/src/editors/containers/VideoGallery/hooks.js +++ b/src/editors/containers/VideoGallery/hooks.js @@ -7,7 +7,7 @@ import * as appHooks from '../../hooks'; import { selectors } from '../../data/redux'; import analyticsEvt from '../../data/constants/analyticsEvt'; import { - filterKeys, sortFunctions, sortKeys, sortMessages, + filterKeys, filterMessages, sortFunctions, sortKeys, sortMessages, } from './utils'; export const { @@ -18,17 +18,9 @@ export const { export const useSearchAndSortProps = () => { const [searchString, setSearchString] = React.useState(''); const [sortBy, setSortBy] = React.useState(sortKeys.dateNewest); - const [filterBy, setFilterBy] = React.useState([]); + const [filterBy, setFilterBy] = React.useState(filterKeys.anyStatus); const [hideSelectedVideos, setHideSelectedVideos] = React.useState(false); - const handleFilter = (key) => () => { - if (filterBy.includes(key)) { - setFilterBy(filterBy.filter(item => item !== key)); - } else { - setFilterBy([...filterBy, key]); - } - }; - return { searchString, onSearchChange: (e) => setSearchString(e.target.value), @@ -38,7 +30,9 @@ export const useSearchAndSortProps = () => { sortKeys, sortMessages, filterBy, - onFilterClick: handleFilter, + onFilterClick: (key) => () => setFilterBy(key), + filterKeys, + filterMessages, showSwitch: false, hideSelectedVideos, switchMessage: messages.hideSelectedCourseVideosSwitchLabel, @@ -54,15 +48,13 @@ export const filterListBySearch = ({ .includes(searchString.toLowerCase())) ); -export const filterListByStatus = ({ - statusFilter, - videoList, -}) => { - if (statusFilter.length === 0) { +export const filterListByStatus = ({ statusFilter, videoList }) => { + if (statusFilter === filterKeys.anyStatus) { return videoList; } - return videoList.filter(({ status }) => statusFilter.map(key => filterKeys[key]) - .includes(status)); + // TODO deal with translation mismatch because the video status is + // already translated in the backend + return videoList.filter(({ status }) => filterKeys[statusFilter] === status); }; export const filterListByHideSelectedCourse = ({ videoList }) => ( @@ -181,6 +173,7 @@ export const buildVideos = ({ rawVideos }) => { export const getstatusBadgeVariant = ({ status }) => { switch (status) { + // TODO deal with translation mismatch case filterKeys.failed: return 'danger'; case filterKeys.uploading: diff --git a/src/editors/containers/VideoGallery/index.test.jsx b/src/editors/containers/VideoGallery/index.test.jsx index 1ac21014d..26d1a46e3 100644 --- a/src/editors/containers/VideoGallery/index.test.jsx +++ b/src/editors/containers/VideoGallery/index.test.jsx @@ -163,13 +163,12 @@ describe('VideoGallery', () => { }], }); - await act(async () => { - fireEvent.click(screen.getByRole('button', { - name: 'Video status', - })); + act(() => { + fireEvent.click(screen.getByTestId('dropdown-filter')); }); - await act(async () => { - fireEvent.click(screen.getByRole('checkbox', { + + act(() => { + fireEvent.click(screen.getByRole('button', { name: filterBy, })); }); diff --git a/src/editors/containers/VideoGallery/messages.js b/src/editors/containers/VideoGallery/messages.js index a846b3956..5d293eee6 100644 --- a/src/editors/containers/VideoGallery/messages.js +++ b/src/editors/containers/VideoGallery/messages.js @@ -55,10 +55,10 @@ export const messages = { }, // Filter Dropdown - filterByVideoStatusNone: { + filterByVideoStatusAny: { id: 'authoring.selectvideomodal.filter.videostatusnone.label', - defaultMessage: 'Video status', - description: 'Dropdown label for filter by video status (none)', + defaultMessage: 'Any status', + description: 'Dropdown label for no filter (any status)', }, filterByVideoStatusUploading: { id: 'authoring.selectvideomodal.filter.videostatusuploading.label', diff --git a/src/editors/containers/VideoGallery/utils.js b/src/editors/containers/VideoGallery/utils.js index 8a1373948..94a60e487 100644 --- a/src/editors/containers/VideoGallery/utils.js +++ b/src/editors/containers/VideoGallery/utils.js @@ -22,6 +22,7 @@ export const sortMessages = StrictDict({ }); export const filterKeys = StrictDict({ + anyStatus: 'anyStatus', uploading: 'Uploading', processing: 'In Progress', ready: 'Ready', @@ -29,7 +30,7 @@ export const filterKeys = StrictDict({ }); export const filterMessages = StrictDict({ - title: messages[messageKeys.filterByVideoStatusNone], + anyStatus: messages[messageKeys.filterByVideoStatusAny], uploading: messages[messageKeys.filterByVideoStatusUploading], processing: messages[messageKeys.filterByVideoStatusProcessing], ready: messages[messageKeys.filterByVideoStatusReady], diff --git a/src/editors/sharedComponents/SelectionModal/MultiSelectFilterDropdown.jsx b/src/editors/sharedComponents/SelectionModal/MultiSelectFilterDropdown.jsx deleted file mode 100644 index b6ec2fd6c..000000000 --- a/src/editors/sharedComponents/SelectionModal/MultiSelectFilterDropdown.jsx +++ /dev/null @@ -1,38 +0,0 @@ -import React from 'react'; - -import { useIntl } from '@edx/frontend-platform/i18n'; -import { Dropdown, DropdownToggle, Form } from '@edx/paragon'; - -import PropTypes from 'prop-types'; -import { filterKeys, filterMessages } from '../../containers/VideoGallery/utils'; - -const MultiSelectFilterDropdown = ({ - selected, onSelectionChange, -}) => { - const intl = useIntl(); - return ( - - - {intl.formatMessage(filterMessages.title)} - - - {Object.keys(filterKeys).map(key => ( - - {intl.formatMessage(filterMessages[key])} - - ))} - - - ); -}; - -MultiSelectFilterDropdown.propTypes = { - selected: PropTypes.arrayOf(PropTypes.string).isRequired, - onSelectionChange: PropTypes.func.isRequired, -}; -export default MultiSelectFilterDropdown; diff --git a/src/editors/sharedComponents/SelectionModal/SearchSort.jsx b/src/editors/sharedComponents/SelectionModal/SearchSort.jsx index d9b00e554..15a5422e7 100644 --- a/src/editors/sharedComponents/SelectionModal/SearchSort.jsx +++ b/src/editors/sharedComponents/SelectionModal/SearchSort.jsx @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { - ActionRow, Form, Icon, IconButton, SelectMenu, MenuItem, + ActionRow, Dropdown, Form, Icon, IconButton, SelectMenu, MenuItem, } from '@edx/paragon'; import { Close, Search } from '@edx/paragon/icons'; import { @@ -11,7 +11,6 @@ import { } from '@edx/frontend-platform/i18n'; import messages from './messages'; -import MultiSelectFilterDropdown from './MultiSelectFilterDropdown'; import { sortKeys, sortMessages } from '../../containers/VideoGallery/utils'; export const SearchSort = ({ @@ -22,6 +21,8 @@ export const SearchSort = ({ onSortClick, filterBy, onFilterClick, + filterKeys, + filterMessages, showSwitch, switchMessage, onSwitchClick, @@ -62,7 +63,25 @@ export const SearchSort = ({ ))} - {onFilterClick && } + { onFilterClick && ( + + + + + + {Object.keys(filterKeys).map(key => ( + + + + ))} + + + )} { showSwitch && ( <> @@ -86,6 +105,8 @@ export const SearchSort = ({ SearchSort.defaultProps = { filterBy: '', onFilterClick: null, + filterKeys: null, + filterMessages: null, showSwitch: false, onSwitchClick: null, }; @@ -96,8 +117,10 @@ SearchSort.propTypes = { clearSearchString: PropTypes.func.isRequired, sortBy: PropTypes.string.isRequired, onSortClick: PropTypes.func.isRequired, - filterBy: PropTypes.arrayOf(PropTypes.string), + filterBy: PropTypes.string, onFilterClick: PropTypes.func, + filterKeys: PropTypes.shape({}), + filterMessages: PropTypes.shape({}), showSwitch: PropTypes.bool, switchMessage: PropTypes.shape({}).isRequired, onSwitchClick: PropTypes.func, diff --git a/src/editors/sharedComponents/SelectionModal/SearchSort.test.jsx b/src/editors/sharedComponents/SelectionModal/SearchSort.test.jsx index 74899d3a2..d7e0395c1 100644 --- a/src/editors/sharedComponents/SelectionModal/SearchSort.test.jsx +++ b/src/editors/sharedComponents/SelectionModal/SearchSort.test.jsx @@ -7,7 +7,7 @@ import { import { IntlProvider } from '@edx/frontend-platform/i18n'; import { sortKeys, sortMessages } from '../ImageUploadModal/SelectImageModal/utils'; -import { filterMessages } from '../../containers/VideoGallery/utils'; +import { filterKeys, filterMessages } from '../../containers/VideoGallery/utils'; import { SearchSort } from './SearchSort'; import messages from './messages'; @@ -32,7 +32,10 @@ describe('SearchSort component', () => { id: 'test.id', defaultMessage: 'test message', }, + filterBy: filterKeys.anyStatus, onFilterClick: jest.fn(), + filterKeys, + filterMessages, showSwitch: true, }; @@ -68,17 +71,16 @@ describe('SearchSort component', () => { .toBeInTheDocument(); }); }); - test('adds a filter option for each filterKet', async () => { - const { getByRole } = getComponent(); - await act(() => { - fireEvent.click(screen.getByRole('button', { name: /video status/i })); + test('adds a filter option for each filter key', async () => { + const { getByTestId } = getComponent(); + act(() => { + fireEvent.click(getByTestId('dropdown-filter')); }); + Object.keys(filterMessages) .forEach((key) => { - if (key !== 'title') { - expect(getByRole('checkbox', { name: filterMessages[key].defaultMessage })) - .toBeInTheDocument(); - } + expect(getByTestId(`dropdown-filter-${key}`)) + .toBeInTheDocument(); }); }); test('searchbox should show clear message button when not empty', async () => { From 60439d5be6e01b905ae8451003d1cd17aee0a090 Mon Sep 17 00:00:00 2001 From: Dmytro <98233552+DmytroAlipov@users.noreply.github.com> Date: Thu, 30 Nov 2023 23:33:25 +0200 Subject: [PATCH 03/11] fix: displaying the correct default randomization value (#413) --- .../EditProblemView/SettingsWidget/index.jsx | 7 +- .../__snapshots__/index.test.jsx.snap | 64 +++++++++++++++++-- .../Randomization/index.jsx | 10 ++- .../Randomization/index.test.jsx | 8 ++- src/editors/data/constants/problem.js | 2 +- .../data/redux/thunkActions/problem.js | 3 +- src/editors/data/redux/thunkActions/video.js | 5 ++ src/editors/data/services/cms/types.js | 1 + 8 files changed, 87 insertions(+), 13 deletions(-) diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/index.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/index.jsx index ec229c7fc..037cc4e4d 100644 --- a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/index.jsx +++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/index.jsx @@ -118,7 +118,11 @@ export const SettingsWidget = ({ { problemType === ProblemTypeKeys.ADVANCED && (
- +
) } @@ -162,6 +166,7 @@ SettingsWidget.propTypes = { maxAttempts: PropTypes.number, showanswer: PropTypes.string, showReseButton: PropTypes.bool, + rerandomize: PropTypes.string, }).isRequired, // eslint-disable-next-line settings: PropTypes.any.isRequired, diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/Randomization/__snapshots__/index.test.jsx.snap b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/Randomization/__snapshots__/index.test.jsx.snap index a9a780585..2c8432711 100644 --- a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/Randomization/__snapshots__/index.test.jsx.snap +++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/Randomization/__snapshots__/index.test.jsx.snap @@ -1,6 +1,58 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`RandomizationCard snapshot snapshot: renders randonmization setting card with randomization defined 1`] = ` +exports[`RandomizationCard snapshot snapshot: renders randomization setting card with default randomization 1`] = ` + +
+ {randomization, select, + null {No Python based randomization is present in this problem.} + other {Defines when to randomize the variables specified in the associated Python script. For problems that do not randomize values, specify "Never".} + } +
+ + + + + + + + + +`; + +exports[`RandomizationCard snapshot snapshot: renders randomization setting card with randomization defined 1`] = ` @@ -52,7 +104,7 @@ exports[`RandomizationCard snapshot snapshot: renders randonmization setting car `; -exports[`RandomizationCard snapshot snapshot: renders randonmization setting card with randomization null 1`] = ` +exports[`RandomizationCard snapshot snapshot: renders randomization setting card with randomization null 1`] = ` diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/Randomization/index.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/Randomization/index.jsx index 0cb2817e4..f20845ed8 100644 --- a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/Randomization/index.jsx +++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/Randomization/index.jsx @@ -9,11 +9,16 @@ import { RandomizationTypesKeys, RandomizationTypes } from '../../../../../../.. export const RandomizationCard = ({ randomization, + defaultValue, updateSettings, // inject intl, }) => { - const { summary, handleChange } = useRandomizationSettingStatus({ randomization, updateSettings }); + const curretRandomization = randomization || defaultValue; + const { summary, handleChange } = useRandomizationSettingStatus({ + randomization: curretRandomization, + updateSettings, + }); return ( { @@ -48,6 +53,7 @@ export const RandomizationCard = ({ }; RandomizationCard.propTypes = { + defaultValue: PropTypes.string.isRequired, randomization: PropTypes.string.isRequired, updateSettings: PropTypes.func.isRequired, intl: intlShape.isRequired, diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/Randomization/index.test.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/Randomization/index.test.jsx index b4a062a48..c47799848 100644 --- a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/Randomization/index.test.jsx +++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/Randomization/index.test.jsx @@ -11,6 +11,7 @@ jest.mock('./hooks', () => ({ describe('RandomizationCard', () => { const props = { randomization: 'sOmE_vAlUE', + defaultValue: 'default_vAlUE', updateSettings: jest.fn().mockName('args.updateSettings'), intl: { formatMessage }, }; @@ -32,11 +33,14 @@ describe('RandomizationCard', () => { }); describe('snapshot', () => { - test('snapshot: renders randonmization setting card with randomization defined', () => { + test('snapshot: renders randomization setting card with randomization defined', () => { expect(shallow()).toMatchSnapshot(); }); - test('snapshot: renders randonmization setting card with randomization null', () => { + test('snapshot: renders randomization setting card with default randomization', () => { expect(shallow()).toMatchSnapshot(); }); + test('snapshot: renders randomization setting card with randomization null', () => { + expect(shallow()).toMatchSnapshot(); + }); }); }); diff --git a/src/editors/data/constants/problem.js b/src/editors/data/constants/problem.js index 1f0c378ae..5dcc8558c 100644 --- a/src/editors/data/constants/problem.js +++ b/src/editors/data/constants/problem.js @@ -193,7 +193,7 @@ export const ShowAnswerTypes = StrictDict({ export const RandomizationTypesKeys = StrictDict({ NEVER: 'never', ALWAYS: 'always', - ONRESET: 'on_reset', + ONRESET: 'onreset', PERSTUDENT: 'per_student', }); diff --git a/src/editors/data/redux/thunkActions/problem.js b/src/editors/data/redux/thunkActions/problem.js index 4ed432660..9edf656b5 100644 --- a/src/editors/data/redux/thunkActions/problem.js +++ b/src/editors/data/redux/thunkActions/problem.js @@ -32,6 +32,7 @@ export const getDataFromOlx = ({ rawOLX, rawSettings, defaultSettings }) => { olxParser = new OLXParser(rawOLX); parsedProblem = olxParser.getParsedOLXData(); } catch (error) { + // eslint-disable-next-line no-console console.error('The Problem Could Not Be Parsed from OLX. redirecting to Advanced editor.', error); return { problemType: ProblemTypeKeys.ADVANCED, rawOLX, settings: parseSettings(rawSettings, defaultSettings) }; } @@ -55,7 +56,7 @@ export const loadProblem = ({ rawOLX, rawSettings, defaultSettings }) => (dispat }; export const fetchAdvancedSettings = ({ rawOLX, rawSettings }) => (dispatch) => { - const advancedProblemSettingKeys = ['max_attempts', 'showanswer', 'show_reset_button']; + const advancedProblemSettingKeys = ['max_attempts', 'showanswer', 'show_reset_button', 'rerandomize']; dispatch(requests.fetchAdvancedSettings({ onSuccess: (response) => { const defaultSettings = {}; diff --git a/src/editors/data/redux/thunkActions/video.js b/src/editors/data/redux/thunkActions/video.js index e3524e9f0..cc5b0797c 100644 --- a/src/editors/data/redux/thunkActions/video.js +++ b/src/editors/data/redux/thunkActions/video.js @@ -50,6 +50,7 @@ export const loadVideoData = (selectedVideoId, selectedVideoUrl) => (dispatch, g // Use the selected video url first const videoSourceUrl = selectedVideoUrl != null ? selectedVideoUrl : videoUrl; const [licenseType, licenseOptions] = module.parseLicense({ licenseData: studioView, level: 'block' }); + // eslint-disable-next-line no-console console.log(licenseType); const transcripts = rawVideoData.transcriptsFromSelected ? rawVideoData.transcriptsFromSelected : module.parseTranscripts({ transcriptsData: studioView }); @@ -168,6 +169,7 @@ export const parseTranscripts = ({ transcriptsData }) => { return Object.keys(transcriptsObj.value); } catch (error) { if (error instanceof SyntaxError) { + // eslint-disable-next-line no-console console.error('Invalid JSON:', error.message); } else { throw error; @@ -265,6 +267,7 @@ export const uploadThumbnail = ({ thumbnail, emptyCanvas }) => (dispatch, getSta })); } }, + // eslint-disable-next-line no-console onFailure: (e) => console.log({ UploadFailure: e }, 'Resampling thumbnail upload'), })); }; @@ -404,6 +407,7 @@ export const uploadVideo = ({ supportedFiles, setLoadSpinner, postUploadRedirect const uploadUrl = fileObj.upload_url; const uploadFile = supportedFiles.find((file) => file.get('file').name === fileName); if (!uploadFile) { + // eslint-disable-next-line no-console console.error(`Could not find file object with name "${fileName}" in supportedFiles array.`); return; } @@ -417,6 +421,7 @@ export const uploadVideo = ({ supportedFiles, setLoadSpinner, postUploadRedirect }, }) .then(() => postUploadRedirect(edxVideoId)) + // eslint-disable-next-line no-console .catch((error) => console.error('Error uploading file:', error)); })); setLoadSpinner(false); diff --git a/src/editors/data/services/cms/types.js b/src/editors/data/services/cms/types.js index c63d87a6c..f35ec2441 100644 --- a/src/editors/data/services/cms/types.js +++ b/src/editors/data/services/cms/types.js @@ -64,6 +64,7 @@ export const problemDataProps = { max_attempts: PropTypes.number, showanswer: PropTypes.string, show_reset_button: PropTypes.bool, + rerandomize: PropTypes.string, }), }), }; From ed051c3543e3ba21dee13c1c67617ffa66a9b5e9 Mon Sep 17 00:00:00 2001 From: Dmytro <98233552+DmytroAlipov@users.noreply.github.com> Date: Fri, 1 Dec 2023 16:26:12 +0200 Subject: [PATCH 04/11] fix: default display of Show Answer and Show reset option (#403) Hardcoding values for showAnswer and showResetButton in initialState leads to incorrect selection of additional states specified in Advanced settings. --- .../SettingsWidget/__snapshots__/index.test.jsx.snap | 12 +++++++++--- .../EditProblemView/SettingsWidget/index.jsx | 8 ++++++-- .../SettingsWidget/settingsComponents/ResetCard.jsx | 9 ++++++--- .../settingsComponents/ShowAnswerCard.jsx | 6 ++++-- src/editors/data/redux/problem/reducers.js | 6 +++--- 5 files changed, 28 insertions(+), 13 deletions(-) diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/__snapshots__/index.test.jsx.snap b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/__snapshots__/index.test.jsx.snap index ea8ae5d6f..52a608aec 100644 --- a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/__snapshots__/index.test.jsx.snap +++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/__snapshots__/index.test.jsx.snap @@ -62,7 +62,9 @@ exports[`SettingsWidget snapshot snapshot: renders Settings widget for Advanced
- +
- +
- +
- +
{ problemType === ProblemTypeKeys.ADVANCED && ( @@ -165,7 +169,7 @@ SettingsWidget.propTypes = { defaultSettings: PropTypes.shape({ maxAttempts: PropTypes.number, showanswer: PropTypes.string, - showReseButton: PropTypes.bool, + showResetButton: PropTypes.bool, rerandomize: PropTypes.string, }).isRequired, // eslint-disable-next-line diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/ResetCard.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/ResetCard.jsx index a4038863b..3f4d1415e 100644 --- a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/ResetCard.jsx +++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/ResetCard.jsx @@ -10,6 +10,7 @@ import { selectors } from '../../../../../../data/redux'; export const ResetCard = ({ showResetButton, + defaultValue, updateSettings, // inject intl, @@ -17,10 +18,11 @@ export const ResetCard = ({ const isLibrary = useSelector(selectors.app.isLibrary); const { setResetTrue, setResetFalse } = resetCardHooks(updateSettings); const advancedSettingsLink = `${useSelector(selectors.app.studioEndpointUrl)}/settings/advanced/${useSelector(selectors.app.learningContextId)}#show_reset_button`; + const currentResetButton = showResetButton !== null ? showResetButton : defaultValue; return ( @@ -37,10 +39,10 @@ export const ResetCard = ({ )} - - @@ -50,6 +52,7 @@ export const ResetCard = ({ ResetCard.propTypes = { showResetButton: PropTypes.bool.isRequired, + defaultValue: PropTypes.bool.isRequired, updateSettings: PropTypes.func.isRequired, // injected intl: intlShape.isRequired, diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/ShowAnswerCard.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/ShowAnswerCard.jsx index 5739abbed..2e92667fd 100644 --- a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/ShowAnswerCard.jsx +++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/ShowAnswerCard.jsx @@ -26,6 +26,8 @@ export const ShowAnswerCard = ({ showAttempts, } = useAnswerSettings(showAnswer, updateSettings); + const currentShowAnswer = showAnswer.on || defaultValue; + const showAnswerSection = ( <>
@@ -43,7 +45,7 @@ export const ShowAnswerCard = ({ {Object.values(ShowAnswerTypesKeys).map((answerType) => { @@ -79,7 +81,7 @@ export const ShowAnswerCard = ({ return ( {showAnswerSection} diff --git a/src/editors/data/redux/problem/reducers.js b/src/editors/data/redux/problem/reducers.js index 4173cbc9b..c672b85a3 100644 --- a/src/editors/data/redux/problem/reducers.js +++ b/src/editors/data/redux/problem/reducers.js @@ -2,7 +2,7 @@ import _ from 'lodash-es'; import { createSlice } from '@reduxjs/toolkit'; import { indexToLetterMap } from '../../../containers/ProblemEditor/data/OLXParser'; import { StrictDict } from '../../../utils'; -import { ProblemTypeKeys, RichTextProblems, ShowAnswerTypesKeys } from '../../constants/problem'; +import { ProblemTypeKeys, RichTextProblems } from '../../constants/problem'; import { ToleranceTypes } from '../../../containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/Tolerance/constants'; const nextAlphaId = (lastId) => String.fromCharCode(lastId.charCodeAt(0) + 1); @@ -28,10 +28,10 @@ const initialState = { hints: [], timeBetween: 0, showAnswer: { - on: ShowAnswerTypesKeys.FINISHED, + on: '', afterAttempts: 0, }, - showResetButton: false, + showResetButton: null, solutionExplanation: '', tolerance: { value: null, From 2aeb09431580fff44b5dd7d123ad9fba0194bff3 Mon Sep 17 00:00:00 2001 From: Artur Gaspar Date: Mon, 4 Dec 2023 11:35:30 -0300 Subject: [PATCH 05/11] fix: video gallery design fixes (#407) --- .../containers/VideoGallery/index.test.jsx | 14 +++--- .../containers/VideoGallery/messages.js | 12 ++--- .../sharedComponents/BaseModal/index.jsx | 4 ++ .../SelectionModal/SearchSort.jsx | 16 +++++-- .../SelectionModal/SearchSort.test.jsx | 13 +++--- .../sharedComponents/SelectionModal/index.jsx | 45 +++++++++++-------- .../SelectionModal/index.scss | 32 +++++++++++++ .../SelectionModal/messages.js | 5 +++ 8 files changed, 100 insertions(+), 41 deletions(-) create mode 100644 src/editors/sharedComponents/SelectionModal/index.scss diff --git a/src/editors/containers/VideoGallery/index.test.jsx b/src/editors/containers/VideoGallery/index.test.jsx index 26d1a46e3..4bba888b9 100644 --- a/src/editors/containers/VideoGallery/index.test.jsx +++ b/src/editors/containers/VideoGallery/index.test.jsx @@ -124,17 +124,17 @@ describe('VideoGallery', () => { expect(window.location.assign).toHaveBeenCalled(); }); it.each([ - [/by date added \(newest\)/i, [2, 1, 3]], - [/by date added \(oldest\)/i, [3, 1, 2]], - [/by name \(ascending\)/i, [1, 2, 3]], - [/by name \(descending\)/i, [3, 2, 1]], - [/by duration \(longest\)/i, [3, 1, 2]], - [/by duration \(shortest\)/i, [2, 1, 3]], + [/newest/i, [2, 1, 3]], + [/oldest/i, [3, 1, 2]], + [/name A-Z/i, [1, 2, 3]], + [/name Z-A/i, [3, 2, 1]], + [/longest/i, [3, 1, 2]], + [/shortest/i, [2, 1, 3]], ])('videos can be sorted %s', async (sortBy, order) => { await renderComponent(); fireEvent.click(screen.getByRole('button', { - name: /by date added \(newest\)/i, + name: /By newest/i, })); fireEvent.click(screen.getByRole('link', { name: sortBy, diff --git a/src/editors/containers/VideoGallery/messages.js b/src/editors/containers/VideoGallery/messages.js index 5d293eee6..2089806e7 100644 --- a/src/editors/containers/VideoGallery/messages.js +++ b/src/editors/containers/VideoGallery/messages.js @@ -25,32 +25,32 @@ export const messages = { // Sort Dropdown sortByDateNewest: { id: 'authoring.selectvideomodal.sort.datenewest.label', - defaultMessage: 'By date added (newest)', + defaultMessage: 'newest', description: 'Dropdown label for sorting by date (newest)', }, sortByDateOldest: { id: 'authoring.selectvideomodal.sort.dateoldest.label', - defaultMessage: 'By date added (oldest)', + defaultMessage: 'oldest', description: 'Dropdown label for sorting by date (oldest)', }, sortByNameAscending: { id: 'authoring.selectvideomodal.sort.nameascending.label', - defaultMessage: 'By name (ascending)', + defaultMessage: 'name A-Z', description: 'Dropdown label for sorting by name (ascending)', }, sortByNameDescending: { id: 'authoring.selectvideomodal.sort.namedescending.label', - defaultMessage: 'By name (descending)', + defaultMessage: 'name Z-A', description: 'Dropdown label for sorting by name (descending)', }, sortByDurationShortest: { id: 'authoring.selectvideomodal.sort.durationshortest.label', - defaultMessage: 'By duration (shortest)', + defaultMessage: 'shortest', description: 'Dropdown label for sorting by duration (shortest)', }, sortByDurationLongest: { id: 'authoring.selectvideomodal.sort.durationlongest.label', - defaultMessage: 'By duration (longest)', + defaultMessage: 'longest', description: 'Dropdown label for sorting by duration (longest)', }, diff --git a/src/editors/sharedComponents/BaseModal/index.jsx b/src/editors/sharedComponents/BaseModal/index.jsx index 388652b6d..85869da13 100644 --- a/src/editors/sharedComponents/BaseModal/index.jsx +++ b/src/editors/sharedComponents/BaseModal/index.jsx @@ -20,6 +20,7 @@ export const BaseModal = ({ size, isFullscreenScroll, bodyStyle, + className, }) => ( @@ -59,6 +61,7 @@ BaseModal.defaultProps = { size: 'lg', isFullscreenScroll: true, bodyStyle: null, + className: undefined, }; BaseModal.propTypes = { @@ -72,6 +75,7 @@ BaseModal.propTypes = { size: PropTypes.string, isFullscreenScroll: PropTypes.bool, bodyStyle: PropTypes.shape({}), + className: PropTypes.string, }; export default BaseModal; diff --git a/src/editors/sharedComponents/SelectionModal/SearchSort.jsx b/src/editors/sharedComponents/SelectionModal/SearchSort.jsx index 15a5422e7..619a44bfb 100644 --- a/src/editors/sharedComponents/SelectionModal/SearchSort.jsx +++ b/src/editors/sharedComponents/SelectionModal/SearchSort.jsx @@ -4,13 +4,14 @@ import PropTypes from 'prop-types'; import { ActionRow, Dropdown, Form, Icon, IconButton, SelectMenu, MenuItem, } from '@edx/paragon'; -import { Close, Search } from '@edx/paragon/icons'; +import { Check, Close, Search } from '@edx/paragon/icons'; import { FormattedMessage, useIntl, } from '@edx/frontend-platform/i18n'; import messages from './messages'; +import './index.scss'; import { sortKeys, sortMessages } from '../../containers/VideoGallery/utils'; export const SearchSort = ({ @@ -55,9 +56,18 @@ export const SearchSort = ({ { !showSwitch && } - + {Object.keys(sortKeys).map(key => ( - + + + + + ))} diff --git a/src/editors/sharedComponents/SelectionModal/SearchSort.test.jsx b/src/editors/sharedComponents/SelectionModal/SearchSort.test.jsx index d7e0395c1..980c38f6f 100644 --- a/src/editors/sharedComponents/SelectionModal/SearchSort.test.jsx +++ b/src/editors/sharedComponents/SelectionModal/SearchSort.test.jsx @@ -6,8 +6,9 @@ import { } from '@testing-library/react'; import { IntlProvider } from '@edx/frontend-platform/i18n'; -import { sortKeys, sortMessages } from '../ImageUploadModal/SelectImageModal/utils'; -import { filterKeys, filterMessages } from '../../containers/VideoGallery/utils'; +import { + filterKeys, filterMessages, sortKeys, sortMessages, +} from '../../containers/VideoGallery/utils'; import { SearchSort } from './SearchSort'; import messages from './messages'; @@ -51,23 +52,23 @@ describe('SearchSort component', () => { const { getByRole } = getComponent(); await act(() => { fireEvent.click(screen.getByRole('button', { - name: /by date added \(oldest\)/i, + name: /By oldest/i, })); }); Object.values(sortMessages) .forEach(({ defaultMessage }) => { - expect(getByRole('link', { name: defaultMessage })) + expect(getByRole('link', { name: `By ${defaultMessage}` })) .toBeInTheDocument(); }); }); test('adds a sort option for each sortKey', async () => { const { getByRole } = getComponent(); await act(() => { - fireEvent.click(screen.getByRole('button', { name: /by date added \(oldest\)/i })); + fireEvent.click(screen.getByRole('button', { name: /oldest/i })); }); Object.values(sortMessages) .forEach(({ defaultMessage }) => { - expect(getByRole('link', { name: defaultMessage })) + expect(getByRole('link', { name: `By ${defaultMessage}` })) .toBeInTheDocument(); }); }); diff --git a/src/editors/sharedComponents/SelectionModal/index.jsx b/src/editors/sharedComponents/SelectionModal/index.jsx index d57c717ed..d0c06a025 100644 --- a/src/editors/sharedComponents/SelectionModal/index.jsx +++ b/src/editors/sharedComponents/SelectionModal/index.jsx @@ -16,6 +16,8 @@ import ErrorAlert from '../ErrorAlerts/ErrorAlert'; import FetchErrorAlert from '../ErrorAlerts/FetchErrorAlert'; import UploadErrorAlert from '../ErrorAlerts/UploadErrorAlert'; +import './index.scss'; + export const SelectionModal = ({ isOpen, close, @@ -85,27 +87,32 @@ export const SelectionModal = ({
)} + className="selection-modal" > - {/* Error Alerts */} - - - - - + {/* + If the modal dialog content is zero height, it shows a bottom shadow + as if there was content to scroll to, so make the min-height 1px. + */} + + {/* Error Alerts */} + + + + + - {/* User Feedback Alerts */} - - - - + {/* User Feedback Alerts */} + + + {showGallery && } diff --git a/src/editors/sharedComponents/SelectionModal/index.scss b/src/editors/sharedComponents/SelectionModal/index.scss new file mode 100644 index 000000000..8e3225945 --- /dev/null +++ b/src/editors/sharedComponents/SelectionModal/index.scss @@ -0,0 +1,32 @@ +.search-sort-menu .pgn__menu-item-text { + text-transform: capitalize; +} + +.search-sort-menu .pgn__menu .search-sort-menu-by { + display: none; +} + +/* Sort options come in pairs of ascending and descending. */ +.search-sort-menu .pgn__menu > div:nth-child(even) { + border-bottom: 1px solid #f4f3f6; +} + +.search-sort-menu .pgn__menu > div:last-child { + border-bottom: none; +} + +.selection-modal .pgn__vstack > .alert { + margin-bottom: 0; + margin-top: 1.5rem; +} + +/* Set top padding to 0 when there is an alert above. */ +.selection-modal .pgn__vstack > .alert + .gallery > .pgn__scrollable-body-content > .p-4 { + padding-top: 0 !important; +} + +.selection-modal .pgn__vstack > .alert > .alert-icon { + /* Vertical margin equal to the vertical padding of the "Dismiss" button. */ + margin-bottom: 0.4375rem; + margin-top: 0.4375rem; +} diff --git a/src/editors/sharedComponents/SelectionModal/messages.js b/src/editors/sharedComponents/SelectionModal/messages.js index 2aa74f9e2..9e865930b 100644 --- a/src/editors/sharedComponents/SelectionModal/messages.js +++ b/src/editors/sharedComponents/SelectionModal/messages.js @@ -24,6 +24,11 @@ export const messages = { defaultMessage: 'Added {date} at {time}', description: 'File date-added string', }, + sortBy: { + id: 'authoring.selectionmodal.sortBy', + defaultMessage: 'By', + description: '"By" before sort option', + }, }; export default messages; From 1ddaf9a6624ee30c40d891e45f88d5766aa975d5 Mon Sep 17 00:00:00 2001 From: Artur Gaspar Date: Mon, 4 Dec 2023 11:58:17 -0300 Subject: [PATCH 06/11] fix: video editor and uploader layout fixes (#410) * fix: video upload page layout fixes * fix: video editor thumbnail fallback icon colour and size * fix: video uploader close button go back instead of closing app Change the video uploader close button to always go back in navigation history, and change the gallery to replace its location with the video uploader's when automatically loading it due to an empty video list, so that when the uploader goes back in the history, it goes to what was before the gallery. * fix: video editor spinners vertical alignment The Editor component uses the pgn__modal-fullscreen class to be fullscreen, but it is not structured like a Paragon FullscreenModal and the fullscreen positioning style is not applied correctly, particularly in the case where the content is smaller than the body - a vertically centred component will be centred to the content size, not to the screen. Here we directly apply the style that would have applied to the relevant elements of a Paragon FullscreenModal. * fix: use trailingElement for video uploader input button Also styles the button so it looks the same on hover/active. --- src/editors/Editor.jsx | 14 +- .../__snapshots__/Editor.test.jsx.snap | 22 +- .../__snapshots__/index.test.jsx.snap | 18 +- .../containers/EditorContainer/index.jsx | 5 +- .../components/VideoPreviewWidget/index.jsx | 2 +- src/editors/containers/VideoGallery/hooks.js | 10 +- src/editors/containers/VideoGallery/index.jsx | 2 +- .../containers/VideoGallery/index.test.jsx | 6 +- .../VideoUploadEditor/VideoUploader.jsx | 57 +-- .../__snapshots__/VideoUploader.test.jsx.snap | 154 ++++---- .../__snapshots__/index.test.jsx.snap | 346 +++++++++--------- .../containers/VideoUploadEditor/hooks.js | 3 + .../containers/VideoUploadEditor/index.jsx | 43 +-- .../containers/VideoUploadEditor/index.scss | 31 +- .../VideoUploadEditor/index.test.jsx | 19 +- src/editors/data/images/videoThumbnail.svg | 2 +- 16 files changed, 376 insertions(+), 358 deletions(-) diff --git a/src/editors/Editor.jsx b/src/editors/Editor.jsx index d1b14cb38..9236e0474 100644 --- a/src/editors/Editor.jsx +++ b/src/editors/Editor.jsx @@ -31,9 +31,19 @@ export const Editor = ({ const EditorComponent = supportedEditors[blockType]; return ( -
+
diff --git a/src/editors/__snapshots__/Editor.test.jsx.snap b/src/editors/__snapshots__/Editor.test.jsx.snap index 8c929ec63..8a314a651 100644 --- a/src/editors/__snapshots__/Editor.test.jsx.snap +++ b/src/editors/__snapshots__/Editor.test.jsx.snap @@ -3,10 +3,19 @@ exports[`Editor render presents error message if no relevant editor found and ref ready 1`] = `
TextEditor) 1`] = `

My test content @@ -78,7 +83,12 @@ exports[`EditorContainer component render snapshot: initialized. enable save and exports[`EditorContainer component render snapshot: not initialized. disable save and pass to header 1`] = `
- + {isInitialized && children} {intl.formatMessage(thumbnailMessages.thumbnailAltText)} { +export const useVideoUploadHandler = ({ replace }) => { const learningContextId = useSelector(selectors.app.learningContextId); const blockId = useSelector(selectors.app.blockId); - return () => navigateTo(`/course/${learningContextId}/editor/video_upload/${blockId}`); + const path = `/course/${learningContextId}/editor/video_upload/${blockId}`; + if (replace) { + return () => window.location.replace(path); + } + return () => navigateTo(path); }; export const useCancelHandler = () => ( @@ -196,7 +200,7 @@ export const useVideoProps = ({ videos }) => { inputError, selectBtnProps, } = videoList; - const fileInput = { click: useVideoUploadHandler() }; + const fileInput = { click: useVideoUploadHandler({ replace: false }) }; return { galleryError, diff --git a/src/editors/containers/VideoGallery/index.jsx b/src/editors/containers/VideoGallery/index.jsx index 0600c1334..164f174ae 100644 --- a/src/editors/containers/VideoGallery/index.jsx +++ b/src/editors/containers/VideoGallery/index.jsx @@ -19,7 +19,7 @@ export const VideoGallery = () => { (state) => selectors.requests.isFailed(state, { requestKey: RequestKeys.uploadVideo }), ); const videos = hooks.buildVideos({ rawVideos }); - const handleVideoUpload = hooks.useVideoUploadHandler(); + const handleVideoUpload = hooks.useVideoUploadHandler({ replace: true }); useEffect(() => { // If no videos exists redirects to the video upload screen diff --git a/src/editors/containers/VideoGallery/index.test.jsx b/src/editors/containers/VideoGallery/index.test.jsx index 4bba888b9..4292c24e5 100644 --- a/src/editors/containers/VideoGallery/index.test.jsx +++ b/src/editors/containers/VideoGallery/index.test.jsx @@ -80,7 +80,7 @@ describe('VideoGallery', () => { beforeAll(() => { oldLocation = window.location; delete window.location; - window.location = { assign: jest.fn() }; + window.location = { replace: jest.fn() }; }); afterAll(() => { window.location = oldLocation; @@ -118,10 +118,10 @@ describe('VideoGallery', () => { )); }); it('navigates to video upload page when there are no videos', async () => { - expect(window.location.assign).not.toHaveBeenCalled(); + expect(window.location.replace).not.toHaveBeenCalled(); updateState({ videos: [] }); await renderComponent(); - expect(window.location.assign).toHaveBeenCalled(); + expect(window.location.replace).toHaveBeenCalled(); }); it.each([ [/newest/i, [2, 1, 3]], diff --git a/src/editors/containers/VideoUploadEditor/VideoUploader.jsx b/src/editors/containers/VideoUploadEditor/VideoUploader.jsx index c2783fe64..8b7a73f94 100644 --- a/src/editors/containers/VideoUploadEditor/VideoUploader.jsx +++ b/src/editors/containers/VideoUploadEditor/VideoUploader.jsx @@ -8,7 +8,6 @@ import { ArrowForward, FileUpload, Close } from '@edx/paragon/icons'; import { useDispatch } from 'react-redux'; import { thunkActions } from '../../data/redux'; import * as hooks from './hooks'; -import * as editorHooks from '../EditorContainer/hooks'; import messages from './messages'; const URLUploader = () => { @@ -17,49 +16,52 @@ const URLUploader = () => { const intl = useIntl(); return (
-
- +
+
-
- {intl.formatMessage(messages.dropVideoFileHere)} - {intl.formatMessage(messages.info)} +
+ {intl.formatMessage(messages.dropVideoFileHere)} + {intl.formatMessage(messages.info)}
-
OR
-
- +
+ OR +
+
+ { event.stopPropagation(); }} onChange={(event) => { setTextInputValue(event.target.value); }} + trailingElement={( + { + event.stopPropagation(); + if (textInputValue.trim() !== '') { + onURLUpload(textInputValue); + } + }} + /> + )} /> -
- { - event.stopPropagation(); - if (textInputValue.trim() !== '') { - onURLUpload(textInputValue); - } - }} - /> -
); }; -export const VideoUploader = ({ setLoading, onClose }) => { +export const VideoUploader = ({ setLoading }) => { const dispatch = useDispatch(); const intl = useIntl(); - const handleCancel = editorHooks.handleCancel({ onClose }); + const goBack = hooks.useHistoryGoBack(); const handleProcessUpload = ({ fileData }) => { dispatch(thunkActions.video.uploadVideo({ @@ -77,7 +79,7 @@ export const VideoUploader = ({ setLoading, onClose }) => { alt={intl.formatMessage(messages.closeButtonAltText)} src={Close} iconAs={Icon} - onClick={handleCancel} + onClick={goBack} />
{ VideoUploader.propTypes = { setLoading: PropTypes.func.isRequired, - onClose: PropTypes.func.isRequired, }; export default VideoUploader; diff --git a/src/editors/containers/VideoUploadEditor/__snapshots__/VideoUploader.test.jsx.snap b/src/editors/containers/VideoUploadEditor/__snapshots__/VideoUploader.test.jsx.snap index c4307f49a..5a4f1efbc 100644 --- a/src/editors/containers/VideoUploadEditor/__snapshots__/VideoUploader.test.jsx.snap +++ b/src/editors/containers/VideoUploadEditor/__snapshots__/VideoUploader.test.jsx.snap @@ -60,11 +60,11 @@ Object { class="d-flex flex-column" >
- + Drag and drop video here or click to upload Upload MP4 or MOV files (5 GB max)
OR
-
-
- + +
@@ -218,11 +215,11 @@ Object { class="d-flex flex-column" >
- + Drag and drop video here or click to upload Upload MP4 or MOV files (5 GB max)
OR
-
-
- + +
diff --git a/src/editors/containers/VideoUploadEditor/__snapshots__/index.test.jsx.snap b/src/editors/containers/VideoUploadEditor/__snapshots__/index.test.jsx.snap index e85627dc6..62df48ed6 100644 --- a/src/editors/containers/VideoUploadEditor/__snapshots__/index.test.jsx.snap +++ b/src/editors/containers/VideoUploadEditor/__snapshots__/index.test.jsx.snap @@ -5,26 +5,69 @@ Object { "asFragment": [Function], "baseElement":
-
+
-
- +
+