feat: add library component picker #1356

rpenido · 2024-10-02T21:19:05Z

Description

The component picker can be accessed here: http://apps.local.edly.io:2001/course-authoring/component-picker

Additional Information

Part of:

Add library content to a course #1337

Private-ref: FAL-3876

openedx-webhooks · 2024-10-02T21:19:09Z

Thanks for the pull request, @rpenido!

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.

🔘 Update the status of your PR

Your PR is currently marked as a draft. After completing the steps above, update its status by clicking "Ready for Review", or removing "WIP" from the title, as appropriate.

🔘 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.

bradenmacdonald · 2024-10-02T21:29:16Z

@rpenido FYI, once we implement #1354 we will need to make it so that this "component picker" mode only shows the published version of things, not the draft.

bradenmacdonald · 2024-10-02T21:36:27Z

src/library-authoring/common/context.tsx

@@ -20,6 +20,8 @@ export interface LibraryContextData {
  closeCreateCollectionModal: () => void;
  openCollectionInfoSidebar: (collectionId: string) => void;
  currentCollectionId?: string;
+  componentPickerMode: boolean;
+  enableComponentPickerMode: () => void;


I don't think this should be a function and have a state, because we don't need to toggle it on and off.

What I'd recommend is that you base this on #1345 and then instead of <LibraryProvider libraryId={libraryId}>, for the component picker route you can use <LibraryProvider libraryId={libraryId} componentPicker> . That is much cleaner, because it's just a prop on the context provider, and then it'll be available everywhere. You don't have to manage it as a state and call it within useEffect.

That PR is waiting for your review btw :) Sorry that it conflicts with this one.

codecov · 2024-10-04T17:56:24Z

Codecov Report

Attention: Patch coverage is 84.05797% with 44 lines in your changes missing coverage. Please review.

Project coverage is 92.86%. Comparing base (66b14a5) to head (cdfe3d6).

Files with missing lines	Patch %	Lines
...brary-authoring/component-picker/SelectLibrary.tsx	35.71%	18 Missing ⚠️
...ary-authoring/component-picker/ComponentPicker.tsx	50.00%	10 Missing ⚠️
...c/library-authoring/collections/CollectionInfo.tsx	68.75%	5 Missing ⚠️
src/library-authoring/components/ComponentCard.tsx	75.00%	4 Missing and 1 partial ⚠️
...library-authoring/component-info/ComponentInfo.tsx	81.81%	4 Missing ⚠️
...ry-authoring/collections/LibraryCollectionPage.tsx	85.71%	2 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #1356      +/-   ##
==========================================
- Coverage   93.01%   92.86%   -0.16%     
==========================================
  Files        1035     1039       +4     
  Lines       19632    19794     +162     
  Branches     4172     4210      +38     
==========================================
+ Hits        18261    18381     +120     
- Misses       1306     1350      +44     
+ Partials       65       63       -2

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

rpenido · 2024-10-10T20:47:36Z

src/library-authoring/LibraryAuthoringPage.tsx

-            <Routes>
-              <Route
-                path={TabList.home}
-                element={(
-                  <LibraryHome tabList={TabList} handleTabChange={handleTabChange} />
-                )}
-              />
-              <Route
-                path={TabList.components}
-                element={<LibraryComponents variant="full" />}
-              />
-              <Route
-                path={TabList.collections}
-                element={<LibraryCollections variant="full" />}
-              />
-              <Route
-                path="*"
-                element={<NotFoundAlert />}
-              />
-            </Routes>


We had to change to render based on a state instead of the route because of the ComponentPicker component

Can you elaborate? Why can't we have nested routes, with three home/components/collections routes underneath /library/foo and the same three home/components/collections routes also available underneath /library-component-picker/ ?

Hmm. You're right. We can. I didn't think this way when I refactored this.
Do you prefer we stick to the routing approach? We will just need to fix some places where we do absolute redirects to '/library/libraryId' to support this.

Well what I really want is to implement #1230 ASAP, which will simplify everything. Then the "All/Collections/Components" tabs will essentially be just another filter. But yeah, I do think it should be in the route if possible.

Though it doesn't need to be in the route for the content picker.

Just to be clear, it is still in the URL path as it was. I'm just using states from the context to render the child components instead of the Router component.

I will check how far I'm from using Routes again tomorrow.

rpenido · 2024-10-10T20:48:20Z

src/library-authoring/LibraryLayout.tsx

-      <Routes>
-        <Route
-          path="collection/:collectionId"
-          element={<LibraryCollectionPage />}
-        />
-        <Route
-          path="*"
-          element={<LibraryAuthoringPage />}
-        />
-      </Routes>


We had to change to render based on a state instead of the route because of the ComponentPicker component

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

bradenmacdonald reviewed Oct 2, 2024

View reviewed changes

rpenido force-pushed the rpenido/fal-3876-add-library-content-to-a-course branch 4 times, most recently from adb7247 to 785a830 Compare October 4, 2024 00:00

rpenido mentioned this pull request Oct 8, 2024

feat: manage collections in component sidebar [FC-0062] #1373

Open

1 task

rpenido force-pushed the rpenido/fal-3876-add-library-content-to-a-course branch 2 times, most recently from 5b8042d to 5c2842a Compare October 8, 2024 20:28

rpenido commented Oct 10, 2024

View reviewed changes

rpenido force-pushed the rpenido/fal-3876-add-library-content-to-a-course branch 2 times, most recently from 9babe85 to 7e61a2c Compare October 10, 2024 22:30

feat: add library component picker

cdfe3d6

rpenido force-pushed the rpenido/fal-3876-add-library-content-to-a-course branch from 7e61a2c to cdfe3d6 Compare October 10, 2024 22:45

feat: add api call

df9b518

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add library component picker #1356

feat: add library component picker #1356

rpenido commented Oct 2, 2024 •

edited

Loading

openedx-webhooks commented Oct 2, 2024

bradenmacdonald commented Oct 2, 2024

bradenmacdonald Oct 2, 2024

codecov bot commented Oct 4, 2024 •

edited

Loading

rpenido Oct 10, 2024

bradenmacdonald Oct 10, 2024

rpenido Oct 10, 2024 •

edited

Loading

bradenmacdonald Oct 10, 2024

bradenmacdonald Oct 10, 2024

rpenido Oct 10, 2024 •

edited

Loading

rpenido Oct 10, 2024 •

edited

Loading

feat: add library component picker #1356

Are you sure you want to change the base?

feat: add library component picker #1356

Conversation

rpenido commented Oct 2, 2024 • edited Loading

Description

Additional Information

openedx-webhooks commented Oct 2, 2024

What's next?

🔘 Get product approval

🔘 Provide context

🔘 Get a green build

🔘 Update the status of your PR

🔘 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?

bradenmacdonald commented Oct 2, 2024

bradenmacdonald Oct 2, 2024

Choose a reason for hiding this comment

codecov bot commented Oct 4, 2024 • edited Loading

Codecov Report

rpenido Oct 10, 2024

Choose a reason for hiding this comment

bradenmacdonald Oct 10, 2024

Choose a reason for hiding this comment

rpenido Oct 10, 2024 • edited Loading

Choose a reason for hiding this comment

bradenmacdonald Oct 10, 2024

Choose a reason for hiding this comment

bradenmacdonald Oct 10, 2024

Choose a reason for hiding this comment

rpenido Oct 10, 2024 • edited Loading

Choose a reason for hiding this comment

rpenido Oct 10, 2024 • edited Loading

Choose a reason for hiding this comment

rpenido commented Oct 2, 2024 •

edited

Loading

codecov bot commented Oct 4, 2024 •

edited

Loading

rpenido Oct 10, 2024 •

edited

Loading

rpenido Oct 10, 2024 •

edited

Loading

rpenido Oct 10, 2024 •

edited

Loading