feat: upload images from the TinyMCE in library editor #1458

dcoa · 2024-11-04T01:15:58Z

Description

This PR allows to upload images from the TinyMCE component.

The changes allows:

Update images from Libraries V2
Maintain the same behavior as courses, load the image and open a new modal view for setting configuration.
List the images for the block.

What is not cover?

Libraries V1 is not supported in this PR, so the button is hidden for that version.
Sort and filter is included in the modal

Supporting information

See the issue for more context #1398.

Testing instructions

Create a instance that supports libraries V2
Create a new Library
Chose the problem or text from the content options
The image button is visible.
Upload a image

2024-11-06.00-45-59.mov

openedx-webhooks · 2024-11-04T01:16:02Z

Thanks for the pull request, @dcoa!

What's next?

Please work through the following steps to get your changes ready for engineering review:

🔘 Get product approval

If you haven't already, check this list to see if your contribution needs to go through the product review process.

If it does, you'll need to submit a product proposal for your contribution, and have it reviewed by the Product Working Group.
- This process (including the steps you'll need to take) is documented here.
If it doesn't, simply proceed with the next step.

🔘 Provide context

To help your reviewers and other members of the community understand the purpose and larger context of your changes, feel free to add as much of the following information to the PR description as you can:

Dependencies

This PR must be merged before / after / at the same time as ...
Blockers

This PR is waiting for OEP-1234 to be accepted.
Timeline information

This PR must be merged by XX date because ...
Partner information

This is for a course on edx.org.
Supporting documentation
Relevant Open edX discussion forum threads

🔘 Get a green build

If one or more checks are failing, continue working on your changes until this is no longer the case and your build turns green.

🔘 Let us know that your PR is ready for review:

Who will review my changes?

This repository is currently maintained by @openedx/2u-tnl. Tag them in a comment and let them know that your changes are ready for review.

Where can I find more information?

If you'd like to get more details on all aspects of the review process for open source pull requests (OSPRs), check out the following resources:

When can I expect my changes to be merged?

Our goal is to get community contributions seen and reviewed as efficiently as possible.

However, the amount of time that it takes to review and merge a PR can vary significantly based on factors such as:

The size and impact of the changes that it introduces
The need for product review
Maintenance status of the parent repository

💡 As a result it may take up to several weeks or months to complete a review and merge your PR.

codecov · 2024-11-04T20:57:43Z

Codecov Report

Attention: Patch coverage is 94.23077% with 3 lines in your changes missing coverage. Please review.

Project coverage is 93.01%. Comparing base (9b4cf87) to head (93c20c9).
Report is 9 commits behind head on master.

Files with missing lines	Patch %	Lines
...ditors/sharedComponents/ImageUploadModal/index.jsx	33.33%	2 Missing ⚠️
src/editors/data/services/cms/urls.ts	80.00%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #1458      +/-   ##
==========================================
- Coverage   93.01%   93.01%   -0.01%     
==========================================
  Files        1048     1049       +1     
  Lines       20480    20518      +38     
  Branches     4402     4343      -59     
==========================================
+ Hits        19049    19084      +35     
- Misses       1361     1366       +5     
+ Partials       70       68       -2

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚨 Try these New Features:

Flaky Tests Detection - Detect and resolve failed and flaky tests
JS Bundle Analysis - Avoid shipping oversized bundles

bradenmacdonald

I tested this, and the upload worked well but the OLX is wrong:

The resulting OLX was:

<img src="http://studio.local.openedx.io:8001/library_assets/component_versions/f12c83a3-2aab-4599-a145-eab778cc62a4/static/XBlock%20Distribution.png" alt="Example" width="1294" height="837" />

The URL should be just /static/XBlock%20Distribution.png

bradenmacdonald · 2024-11-06T19:18:55Z

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

-      } else {
-        dispatch(module.fetchImages({ pageNumber: 0 }));
-      }
+      if (isLibraryKey(data.learningContextId)) { dispatch(actions.app.resetImages()); }


Why do we need to resetImages() here, any why only for libraries?

When I was testing the functionality I notice that closing the modal don't clean the state, so I can see the images of one component in the other one.

My assumption about why we can see that behavior in courses is not happening in courses because we have a change in the URL (from the legacy unit view to the MFE) that clean the state of the component.

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

src/editors/data/services/cms/utils.ts

src/editors/utils/formatLibraryImgRequest.ts

bradenmacdonald · 2024-11-06T19:44:11Z

src/editors/utils/formatLibraryImgRequest.ts

+  locked: boolean,
+};
+
+export type LibraryAssetResponse = {


It would be good to move this type into library-authoring/data.api.ts and then share it between this file and this existing function:

frontend-app-authoring/src/library-authoring/data/api.ts

Line 442 in e118eb5

export async function getXBlockAssets(usageKey: string): Promise<{ path: string; url: string; size: number }[]> {

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

src/editors/utils/formatLibraryImgRequest.ts

dcoa · 2024-11-11T09:39:55Z

Hi @bradenmacdonald, I made the changes, could you have a look? thanks :)

bradenmacdonald · 2024-11-12T21:48:07Z

The test failures are unrelated, and should be solved if you rebase this.

bradenmacdonald

Thanks for those changes!

This is looking good to me, except that it's still setting the wrong path in the OLX.

It's setting a full URL like http://studio.local.openedx.io:8001/library_assets/component_versions/94d0c558-a5e3-40af-aafa-2ba731a6121c/static/kevin-mueller-e3fNaRz31Rs-unsplash.jpg

but it should only be /static/kevin-mueller-e3fNaRz31Rs-unsplash.jpg

Screenshot of the bug:

src/library-authoring/data/api.ts

bradenmacdonald

Sorry for the delay in reviewing. I ran into an unrelated bug: openedx/edx-platform#35853

dcoa · 2024-11-17T23:39:27Z

Hi @bradenmacdonald thank you for the review, I don't have write access over this repo, do you mind merge the PR?

bradenmacdonald · 2024-11-18T18:43:16Z

@dcoa It looks like there is now a test failure on master after this merged. Can you please investigate and fix it?

openedx-webhooks added the open-source-contribution PR author is not from Axim or 2U label Nov 4, 2024

dcoa force-pushed the dcoa/tinymce-images-upload branch 4 times, most recently from b8d3291 to f8a53ad Compare November 4, 2024 20:46

dcoa changed the title ~~[WIP] feat: upload images from the modal editor in libraries~~ [WIP] feat: upload images from the TinyMCE in library Nov 5, 2024

dcoa force-pushed the dcoa/tinymce-images-upload branch 2 times, most recently from e276e00 to 2ebb15c Compare November 5, 2024 14:04

dcoa changed the title ~~[WIP] feat: upload images from the TinyMCE in library~~ feat: upload images from the TinyMCE in library Nov 5, 2024

dcoa marked this pull request as ready for review November 5, 2024 14:05

dcoa requested a review from a team as a code owner November 5, 2024 14:05

dcoa mentioned this pull request Nov 5, 2024

Support uploading images through the TinyMCE Editor #1398

Open

dcoa changed the title ~~feat: upload images from the TinyMCE in library~~ feat: upload images from the TinyMCE in library editor Nov 5, 2024

bradenmacdonald requested changes Nov 6, 2024

View reviewed changes

rpenido mentioned this pull request Nov 6, 2024

fix: image aspect ratio on component preview [FC-0062] openedx/edx-platform#35790

Merged

mphilbrick211 added the FC Relates to an Axim Funded Contribution project label Nov 8, 2024

dcoa force-pushed the dcoa/tinymce-images-upload branch 4 times, most recently from d33dc9b to ba437c9 Compare November 11, 2024 09:11

bradenmacdonald reviewed Nov 13, 2024

View reviewed changes

src/library-authoring/data/api.ts Show resolved Hide resolved

dcoa added 5 commits November 13, 2024 13:25

feat: enable to upload images from libreries in TinyMCE

15c6433

refactor: hide serach, filter and load more button in the modal

6e5aecd

docs: remove jsDoc from axios wrapper

80f23f6

refactor: use getXBlockAssetsApiUrl to get the library endpoint

8490b78

fix: set src image to a relative path

67ab0ab

dcoa added 3 commits November 13, 2024 13:25

refactor: separate fetchimages into libraries and courses

956d5fd

fix: pass isLibrary to imgProps

66c9418

refactor: use LibraryAssetResponse type in getXBlockAssets

93c20c9

dcoa force-pushed the dcoa/tinymce-images-upload branch from ba437c9 to 93c20c9 Compare November 13, 2024 03:29

bradenmacdonald approved these changes Nov 14, 2024

View reviewed changes

bradenmacdonald merged commit f740f57 into openedx:master Nov 18, 2024
7 checks passed

dcoa mentioned this pull request Nov 18, 2024

test: fix contentContainer test #1516

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: upload images from the TinyMCE in library editor #1458

feat: upload images from the TinyMCE in library editor #1458

dcoa commented Nov 4, 2024 •

edited

Loading

openedx-webhooks commented Nov 4, 2024 •

edited

Loading

codecov bot commented Nov 4, 2024 •

edited

Loading

bradenmacdonald left a comment

bradenmacdonald Nov 6, 2024

dcoa Nov 7, 2024

bradenmacdonald Nov 6, 2024

dcoa commented Nov 11, 2024

bradenmacdonald commented Nov 12, 2024

bradenmacdonald left a comment

bradenmacdonald left a comment

dcoa commented Nov 17, 2024

bradenmacdonald commented Nov 18, 2024

feat: upload images from the TinyMCE in library editor #1458

feat: upload images from the TinyMCE in library editor #1458

Conversation

dcoa commented Nov 4, 2024 • edited Loading

Description

Supporting information

Testing instructions

openedx-webhooks commented Nov 4, 2024 • edited Loading

What's next?

🔘 Get product approval

🔘 Provide context

🔘 Get a green build

🔘 Let us know that your PR is ready for review:

Who will review my changes?

Where can I find more information?

When can I expect my changes to be merged?

codecov bot commented Nov 4, 2024 • edited Loading

Codecov Report

bradenmacdonald left a comment

Choose a reason for hiding this comment

bradenmacdonald Nov 6, 2024

Choose a reason for hiding this comment

dcoa Nov 7, 2024

Choose a reason for hiding this comment

bradenmacdonald Nov 6, 2024

Choose a reason for hiding this comment

dcoa commented Nov 11, 2024

bradenmacdonald commented Nov 12, 2024

bradenmacdonald left a comment

Choose a reason for hiding this comment

bradenmacdonald left a comment

Choose a reason for hiding this comment

dcoa commented Nov 17, 2024

bradenmacdonald commented Nov 18, 2024

dcoa commented Nov 4, 2024 •

edited

Loading

openedx-webhooks commented Nov 4, 2024 •

edited

Loading

codecov bot commented Nov 4, 2024 •

edited

Loading