Fix tinymce editor problems (#743)

Internal issue: https://2u-internal.atlassian.net/servicedesk/customer/portal/9/CR-6328?created=true

Reverted 6 merged PRs due to problems.

scroll was not working on editors
potential problems with editor content loading

------------------------------------------------------


* Revert "fix(deps): update dependency @edx/frontend-lib-content-components to v1.177.4 (#742)"

This reverts commit cc40e9d.

* Revert "feat: add escalation email field for LTI-based proctoring providers (#736)"

This reverts commit 0f483dc.

* Revert "fix: video downloads (#728)"

This reverts commit c5abd21.

* Revert "fix: import api to chunk file (#734)"

This reverts commit 6f7a992.

* Revert "feat: Taxonomy delete dialog (#684)"

This reverts commit 1eff489.

* Revert "fix(deps): update dependency @edx/frontend-lib-content-components to v1.177.1 (#727)"

This reverts commit dcabb77.

package.json

@@ -40,7 +40,7 @@
     "@edx/frontend-component-footer": "^12.3.0",
     "@edx/frontend-component-header": "^4.7.0",
     "@edx/frontend-enterprise-hotjar": "^2.0.0",
-    "@edx/frontend-lib-content-components": "1.177.4",
+    "@edx/frontend-lib-content-components": "1.176.4",
     "@edx/frontend-platform": "5.6.1",
     "@edx/paragon": "^21.5.6",
     "@fortawesome/fontawesome-svg-core": "1.2.36",

src/content-tags-drawer/data/api.js

@@ -12,7 +12,7 @@ export const getContentDataApiUrl = (contentId) => new URL(`/xblock/outline/${co
  * @param {number} taxonomyId The id of the taxonomy to fetch tags for
  * @param {string} fullPathProvided Optional param that contains the full URL to fetch data
  *                 If provided, we use it instead of generating the URL. This is usually for fetching subTags
- * @returns {Promise<import("./types.mjs").TaxonomyTagsData>}
+ * @returns {Promise<Object>}
  */
 export async function getTaxonomyTagsData(taxonomyId, fullPathProvided) {
   const { data } = await getAuthenticatedHttpClient().get(
@@ -24,7 +24,7 @@ export async function getTaxonomyTagsData(taxonomyId, fullPathProvided) {
 /**
  * Get the tags that are applied to the content object
  * @param {string} contentId The id of the content object to fetch the applied tags for
- * @returns {Promise<import("./types.mjs").ContentTaxonomyTagsData>}
+ * @returns {Promise<Object>}
  */
 export async function getContentTaxonomyTagsData(contentId) {
   const { data } = await getAuthenticatedHttpClient().get(getContentTaxonomyTagsApiUrl(contentId));
@@ -34,7 +34,7 @@ export async function getContentTaxonomyTagsData(contentId) {
 /**
  * Fetch meta data (eg: display_name) about the content object (unit/compoenent)
  * @param {string} contentId The id of the content object (unit/component)
- * @returns {Promise<import("./types.mjs").ContentData>}
+ * @returns {Promise<Object>}
  */
 export async function getContentData(contentId) {
   const { data } = await getAuthenticatedHttpClient().get(getContentDataApiUrl(contentId));

src/content-tags-drawer/data/apiHooks.jsx

@@ -12,6 +12,7 @@ import {
  * @param {number} taxonomyId The id of the taxonomy to fetch tags for
  * @param {string} fullPathProvided Optional param that contains the full URL to fetch data
  *                 If provided, we use it instead of generating the URL. This is usually for fetching subTags
+ * @returns {import("@tanstack/react-query").UseQueryResult<import("./types.mjs").TaxonomyTagsData>}
  */
 export const useTaxonomyTagsData = (taxonomyId, fullPathProvided) => (
   useQuery({
@@ -23,6 +24,7 @@ export const useTaxonomyTagsData = (taxonomyId, fullPathProvided) => (
 /**
  * Builds the query to get the taxonomy tags applied to the content object
  * @param {string} contentId The id of the content object to fetch the applied tags for
+ * @returns {import("@tanstack/react-query").UseQueryResult<import("./types.mjs").ContentTaxonomyTagsData>}
  */
 export const useContentTaxonomyTagsData = (contentId) => (
   useQuery({
@@ -34,6 +36,7 @@ export const useContentTaxonomyTagsData = (contentId) => (
 /**
  * Builds the query to get meta data about the content object
  * @param {string} contentId The id of the content object (unit/component)
+ * @returns {import("@tanstack/react-query").UseQueryResult<import("./types.mjs").ContentData>}
  */
 export const useContentData = (contentId) => (
   useQuery({

src/content-tags-drawer/data/types.mjs

@@ -100,3 +100,8 @@
  * @property {TaxonomyTagData[]} results
  */
 
+/**
+ * @typedef {Object} UseQueryResult
+ * @property {Object} data
+ * @property {string} status
+ */

src/data/services/ExamsApiService.js

@@ -1,6 +1,5 @@
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { getConfig } from '@edx/frontend-platform';
-import { convertObjectToSnakeCase } from '../../utils';
 
 class ExamsApiService {
   static isAvailable() {
@@ -27,9 +26,8 @@ class ExamsApiService {
   }
 
   static saveCourseExamConfiguration(courseId, dataToSave) {
-    const snakecaseDataToSave = convertObjectToSnakeCase(dataToSave, true);
     const apiClient = getAuthenticatedHttpClient();
-    return apiClient.patch(this.getExamConfigurationUrl(courseId), snakecaseDataToSave);
+    return apiClient.patch(this.getExamConfigurationUrl(courseId), dataToSave);
   }
 }
 

src/files-and-videos/generic/FileTable.jsx

@@ -57,7 +57,6 @@ const FileTable = ({
   };
   const [currentView, setCurrentView] = useState(defaultVal);
   const [isDeleteOpen, setDeleteOpen, setDeleteClose] = useToggle(false);
-  const [isDownloadOpen, setDownloadOpen, setDownloadClose] = useToggle(false);
   const [isAssetInfoOpen, openAssetInfo, closeAssetinfo] = useToggle(false);
   const [isAddOpen, setAddOpen, setAddClose] = useToggle(false);
   const [selectedRows, setSelectedRows] = useState([]);
@@ -115,8 +114,6 @@ const FileTable = ({
 
   const handleBulkDownload = useCallback(async (selectedFlatRows) => {
     handleErrorReset({ errorType: 'download' });
-    setSelectedRows(selectedFlatRows);
-    setDownloadOpen();
     handleDownloadFile(selectedFlatRows);
   }, []);
 
@@ -243,14 +240,6 @@ const FileTable = ({
           setSelectedRows={setSelectedRows}
           fileType={fileType}
         />
-        <ApiStatusToast
-          actionType={intl.formatMessage(messages.apiStatusDownloadingAction)}
-          selectedRowCount={selectedRows.length}
-          isOpen={isDownloadOpen}
-          setClose={setDownloadClose}
-          setSelectedRows={setSelectedRows}
-          fileType={fileType}
-        />
       </DataTable>
       <FileInput key="generic-file-upload" fileInput={fileInputControl} supportedFileFormats={supportedFileFormats} />
       {!isEmpty(selectedRows) && (

src/files-and-videos/generic/messages.js

@@ -17,10 +17,6 @@ const messages = defineMessages({
     id: 'course-authoring.files-and-upload.apiStatus.deletingAction.message',
     defaultMessage: 'Deleting',
   },
-  apiStatusDownloadingAction: {
-    id: 'course-authoring.files-and-upload.apiStatus.downloadingAction.message',
-    defaultMessage: 'Downloading',
-  },
   fileSizeError: {
     id: 'course-authoring.files-and-upload.addFiles.error.fileSize',
     defaultMessage: 'Uploaded file(s) must be 20 MB or less. Please resize file(s) and try again.',

src/files-and-videos/generic/table-components/table-custom-columns/MoreInfoColumn.jsx

@@ -33,7 +33,6 @@ const MoreInfoColumn = ({
     id,
     wrapperType,
     displayName,
-    downloadLink,
   } = row.original;
   return (
     <>
@@ -100,7 +99,7 @@ const MoreInfoColumn = ({
             as={Button}
             variant="tertiary"
             onClick={() => handleBulkDownload(
-              [{ original: { id, displayName, downloadLink } }],
+              [{ original: { id, displayName } }],
             )}
           >
             {intl.formatMessage(messages.downloadTitle)}

src/files-and-videos/videos-page/VideosPage.jsx

@@ -82,7 +82,7 @@ const VideosPage = ({
 
   const handleAddFile = (file) => dispatch(addVideoFile(courseId, file));
   const handleDeleteFile = (id) => dispatch(deleteVideoFile(courseId, id));
-  const handleDownloadFile = (selectedRows) => dispatch(fetchVideoDownload({ selectedRows, courseId }));
+  const handleDownloadFile = (selectedRows) => dispatch(fetchVideoDownload({ selectedRows }));
   const handleUsagePaths = (video) => dispatch(getUsagePaths({ video, courseId }));
   const handleErrorReset = (error) => dispatch(resetErrors(error));
   const handleFileOrder = ({ newFileIdOrder, sortType }) => {

src/files-and-videos/videos-page/VideosPage.test.jsx

@@ -36,7 +36,7 @@ import {
   addVideoThumbnail,
   fetchVideoDownload,
 } from './data/thunks';
-import { getVideosUrl, getCourseVideosApiUrl, getApiBaseUrl } from './data/api';
+import { getVideosUrl, getCoursVideosApiUrl, getApiBaseUrl } from './data/api';
 import videoMessages from './messages';
 import messages from '../generic/messages';
 
@@ -127,8 +127,8 @@ describe('FilesAndUploads', () => {
         const mockFetchResponse = Promise.resolve(mockResponseData);
         global.fetch = jest.fn().mockImplementation(() => mockFetchResponse);
 
-        axiosMock.onPost(getCourseVideosApiUrl(courseId)).reply(204, generateNewVideoApiResponse());
-        axiosMock.onGet(getCourseVideosApiUrl(courseId)).reply(200, generateAddVideoApiResponse());
+        axiosMock.onPost(getCoursVideosApiUrl(courseId)).reply(204, generateNewVideoApiResponse());
+        axiosMock.onGet(getCoursVideosApiUrl(courseId)).reply(200, generateAddVideoApiResponse());
 
         Object.defineProperty(dropzone, 'files', {
           value: [file],
@@ -223,8 +223,8 @@ describe('FilesAndUploads', () => {
         const mockFetchResponse = Promise.resolve(mockResponseData);
         global.fetch = jest.fn().mockImplementation(() => mockFetchResponse);
 
-        axiosMock.onPost(getCourseVideosApiUrl(courseId)).reply(204, generateNewVideoApiResponse());
-        axiosMock.onGet(getCourseVideosApiUrl(courseId)).reply(200, generateAddVideoApiResponse());
+        axiosMock.onPost(getCoursVideosApiUrl(courseId)).reply(204, generateNewVideoApiResponse());
+        axiosMock.onGet(getCoursVideosApiUrl(courseId)).reply(200, generateAddVideoApiResponse());
 
         const addFilesButton = screen.getAllByLabelText('file-input')[3];
         await act(async () => {
@@ -263,7 +263,7 @@ describe('FilesAndUploads', () => {
         const deleteButton = screen.getByText(messages.deleteTitle.defaultMessage).closest('a');
         expect(deleteButton).not.toHaveClass('disabled');
 
-        axiosMock.onDelete(`${getCourseVideosApiUrl(courseId)}/mOckID1`).reply(204);
+        axiosMock.onDelete(`${getCoursVideosApiUrl(courseId)}/mOckID1`).reply(204);
 
         fireEvent.click(deleteButton);
         expect(screen.getByText('Delete video(s) confirmation')).toBeVisible();
@@ -322,7 +322,8 @@ describe('FilesAndUploads', () => {
         await waitFor(() => {
           fireEvent.click(actionsButton);
         });
-        axiosMock.onPut(`${getVideosUrl(courseId)}/download`).reply(200, null);
+        axiosMock.onGet(`${getVideosUrl(courseId)}/mOckID1`).reply(200, { download_link: 'http://download.org' });
+        axiosMock.onGet(`${getVideosUrl(courseId)}/mOckID5`).reply(200, { download_link: 'http://download.org' });
 
         const downloadButton = screen.getByText(messages.downloadTitle.defaultMessage).closest('a');
         expect(downloadButton).not.toHaveClass('disabled');
@@ -532,6 +533,7 @@ describe('FilesAndUploads', () => {
         const videoMenuButton = screen.getByTestId('file-menu-dropdown-mOckID1');
         expect(videoMenuButton).toBeVisible();
 
+        axiosMock.onGet(`${getVideosUrl(courseId)}/mOckID1`).reply(200, { download_link: 'test' });
         await waitFor(() => {
           fireEvent.click(within(videoMenuButton).getByLabelText('file-menu-toggle'));
           fireEvent.click(screen.getByText('Download'));
@@ -551,7 +553,7 @@ describe('FilesAndUploads', () => {
         expect(fileMenuButton).toBeVisible();
 
         await waitFor(() => {
-          axiosMock.onDelete(`${getCourseVideosApiUrl(courseId)}/mOckID1`).reply(204);
+          axiosMock.onDelete(`${getCoursVideosApiUrl(courseId)}/mOckID1`).reply(204);
           fireEvent.click(within(fileMenuButton).getByLabelText('file-menu-toggle'));
           fireEvent.click(screen.getByTestId('open-delete-confirmation-button'));
           expect(screen.getByText('Delete video(s) confirmation')).toBeVisible();
@@ -573,7 +575,7 @@ describe('FilesAndUploads', () => {
         const errorMessage = 'File download.png exceeds maximum size of 5 GB.';
         renderComponent();
         await mockStore(RequestStatus.SUCCESSFUL);
-        axiosMock.onPost(getCourseVideosApiUrl(courseId)).reply(413, { error: errorMessage });
+        axiosMock.onPost(getCoursVideosApiUrl(courseId)).reply(413, { error: errorMessage });
         const addFilesButton = screen.getAllByLabelText('file-input')[3];
         await act(async () => {
           userEvent.upload(addFilesButton, file);
@@ -588,7 +590,7 @@ describe('FilesAndUploads', () => {
       it('404 add file should show error', async () => {
         renderComponent();
         await mockStore(RequestStatus.SUCCESSFUL);
-        axiosMock.onPost(getCourseVideosApiUrl(courseId)).reply(404);
+        axiosMock.onPost(getCoursVideosApiUrl(courseId)).reply(404);
         const addFilesButton = screen.getAllByLabelText('file-input')[3];
         await act(async () => {
           userEvent.upload(addFilesButton, file);
@@ -623,8 +625,8 @@ describe('FilesAndUploads', () => {
         const mockFetchResponse = Promise.reject(mockResponseData);
         global.fetch = jest.fn().mockImplementation(() => mockFetchResponse);
 
-        axiosMock.onPost(getCourseVideosApiUrl(courseId)).reply(204, generateNewVideoApiResponse());
-        axiosMock.onGet(getCourseVideosApiUrl(courseId)).reply(200, generateAddVideoApiResponse());
+        axiosMock.onPost(getCoursVideosApiUrl(courseId)).reply(204, generateNewVideoApiResponse());
+        axiosMock.onGet(getCoursVideosApiUrl(courseId)).reply(200, generateAddVideoApiResponse());
         const addFilesButton = screen.getAllByLabelText('file-input')[3];
         await act(async () => {
           userEvent.upload(addFilesButton, file);
@@ -645,7 +647,7 @@ describe('FilesAndUploads', () => {
         expect(videoMenuButton).toBeVisible();
 
         await waitFor(() => {
-          axiosMock.onDelete(`${getCourseVideosApiUrl(courseId)}/mOckID1`).reply(404);
+          axiosMock.onDelete(`${getCoursVideosApiUrl(courseId)}/mOckID1`).reply(404);
           fireEvent.click(within(videoMenuButton).getByLabelText('file-menu-toggle'));
           fireEvent.click(screen.getByTestId('open-delete-confirmation-button'));
           expect(screen.getByText('Delete video(s) confirmation')).toBeVisible();
@@ -699,11 +701,9 @@ describe('FilesAndUploads', () => {
         const downloadButton = screen.getByText(messages.downloadTitle.defaultMessage).closest('a');
         expect(downloadButton).not.toHaveClass('disabled');
 
-        axiosMock.onPut(`${getVideosUrl(courseId)}/download`).reply(404);
-
         await waitFor(() => {
           fireEvent.click(downloadButton);
-          executeThunk(fetchVideoDownload([{ original: { displayName: 'mOckID1', id: '2', downloadLink: 'test' } }]), store.dispatch);
+          executeThunk(fetchVideoDownload([{ original: { displayName: 'mOckID1', id: '2' } }]), store.dispatch);
         });
 
         const updateStatus = store.getState().videos.updatingStatus;