-
Notifications
You must be signed in to change notification settings - Fork 126
feat: refactor library routes and add section/subsection tabs #2039
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: refactor library routes and add section/subsection tabs #2039
Conversation
Thanks for the pull request, @rpenido! This repository is currently maintained by Once you've gone through the following steps feel free to tag them in a comment and let them know that your changes are ready for engineering review. 🔘 Get product approvalIf you haven't already, check this list to see if your contribution needs to go through the product review process.
🔘 Provide contextTo 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:
🔘 Get a green buildIf one or more checks are failing, continue working on your changes until this is no longer the case and your build turns green. 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:
💡 As a result it may take up to several weeks or months to complete a review and merge your PR. |
439fd90
to
10b54ce
Compare
useEffect(() => { | ||
if (!componentPickerMode) { | ||
openInfoSidebar(componentId, collectionId, unitId); | ||
} | ||
}, []); | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Moved to SidebarContext
/* | ||
|
||
<FilterByPublished key={ | ||
// It is necessary to re-render `FilterByPublished` every time `FilterByBlockType` | ||
// appears or disappears, this is because when the menu is opened it is rendered | ||
// in a previous state, causing an inconsistency in its position. | ||
// By changing the key we can re-render the component. | ||
!(insideCollections || insideUnits) ? 'filter-published-1' : 'filter-published-2' | ||
} | ||
*/ | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This seems to be a temporary/not used code commented
<Routes> | ||
const LibraryLayout = () => ( | ||
<Routes> | ||
<Route element={<LibraryLayoutWrapper />}> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Added the wrapper
using proper route nesting instead of a function
componentId: string | undefined; | ||
setComponentId: (componentId?: string) => void; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Removed misleading componentId.
const [collectionId, setCollectionId] = useState( | ||
skipUrlUpdate ? undefined : urlCollectionId || (!selectedItemIdIsUnit ? urlSelectedItemId : undefined), |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This state is now only for the collection page
const [collectionId, setCollectionId] = useState( | ||
skipUrlUpdate ? undefined : urlCollectionId || (!selectedItemIdIsUnit ? urlSelectedItemId : undefined), | ||
skipUrlUpdate ? undefined : urlCollectionId, | ||
); | ||
const [unitId, setUnitId] = useState( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This state is now only for the unit page
5159eda
to
3656f84
Compare
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## master #2039 +/- ##
==========================================
+ Coverage 93.99% 94.01% +0.02%
==========================================
Files 1155 1154 -1
Lines 24177 24185 +8
Branches 5119 5240 +121
==========================================
+ Hits 22724 22737 +13
+ Misses 1385 1371 -14
- Partials 68 77 +9 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
07c061d
to
8130606
Compare
4603202
to
a45d642
Compare
a45d642
to
acf2077
Compare
acf2077
to
c6509a9
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hi @rpenido , I found some bugs with the route changes, so haven't finished my review.
I'm wondering if we shouldn't keep these changes smaller to reduce regressions?
collectionId?: string, | ||
contentType?: ContentType, | ||
unitId?: string, | ||
doubleClicked?: boolean, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This PR breaks the "open on double click" behaviour added by #2002 ; they're now opening on single click.
I assume Axim will want Sections and Subsections to open on double click as well (not single click).
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hi @pomegranited!
I didn't remove the double-click behaviour.
Calling navigateTo({ collectionId: "someId" })
now opens the collection page and navigateTo({ selectedItemId: "someId"})
opens the sidebar, so we don't need the double-click anymore.
It was required before because the collectionId
could mean "collection open on sidebar" or "collection page open".
Can you report to me if it is not working for you?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ahhh.. I understand now. Yep, double clicking is still working as expected, sorry for the noise!
// Overwrite the params with the provided values. | ||
...((selectedItemId !== undefined) && { selectedItemId }), | ||
...((unitId !== undefined) && { unitId }), | ||
...((collectionId !== undefined) && { collectionId }), |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There's a bug when I try to switch back and forth between the All Content and Section / Subsection tabs.
To reproduce:
- Start on the main library "All Content" tab
- Click on Subsections tab: correct url
/subsections
✅ - Click on All Content: incorrectly retains the
/subsections
URL ❌
Same thing happens when switching between "All Content" and "Sections", but not with any of the other tabs.
"All Content" -> "Section" -> "All Content" or
FYI I'm not sure what part of the refactor broke this -- I'm just commenting here.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
A different bug when switching between Collections and Subsections / Sections:
- Start on the main All Content tab.
- Click Subsections: correct url
/subsections
✅ - Click Collections: incorrect url
/collections/subsections
❌
Same thing happens with Sections -> Collections.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Sorry for that @pomegranited! 😞
I missed adding the routes! Fixed here: 950914d
5846373
to
9144414
Compare
useEffect(() => { | ||
// Update the active key whenever the route changes. This ensures that the correct tab is selected | ||
// when navigating using the browser's back/forward buttons because it does not trigger a re-render. | ||
setActiveKey(getActiveKey()); | ||
}, [location.key, getActiveKey]); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This unreported bug exists on master
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👍 The refactoring you did here is really great @rpenido ! Much cleaner now, I think.
And thank you for finding and fixing those bugs with back/forth!
- I tested this on my tutor dev stack using the PR test instructions, and everything I could think to do.
- I read through the code
- I checked for accessibility issues by using my keyboard to navigate
- Includes documentation -- code comments
- User-facing strings are extracted for translation
@rpenido Thanks for this refactor! I found an issue on the component picker on the collection Page:
https://www.loom.com/share/742a87206c364edbac391640217c158f?sid=d2cef863-f5ca-4cf2-b15a-6f321c4794ac |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@rpenido Great work! Thanks for this refactor! I left some comments
src/index.jsx
Outdated
element={<ComponentPicker extraFilter={['NOT block_type = "unit"']} />} | ||
element={( | ||
<ComponentPicker | ||
extraFilter={['NOT block_type = "unit", "NOT block_type = "section"', 'NOT block_type = "subsection"']} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Also, shouldn't visibleTabs
be added like this? I'm not sure where this case is used to see the Component Picker
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Also, shouldn't
visibleTabs
be added like this? I'm not sure where this case is used to see the Component Picker
Sure! That makes sense!
Fixed: a4a6d99
Note: This current code is used on the legacy studio, where an iframe opens the route http://apps.local.edly.io:2001/authoring/component-picker
to select components for courses.
|
||
// Handle selected item id changes | ||
if (selectedItemId) { | ||
if (selectedItemId.includes(':unit:')) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
What do you think about using getContainerTypeFromId to check if it is a unit and, in the future, check if it is another container?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Done: 3adac7d
}); | ||
}); | ||
|
||
it('should navigate to the container if double clicked', async () => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@rpenido Thanks for these tests!
…rMode
Thanks for catching that! Fixed here: 636653d |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks good 👍
Description
This PR adds the "Section" and "Subsections" tabs to the library authoring and refactors our library router hook to fix some ambiguities and solve some bugs.
Additional Information:
Testing Instructions
Private ref: https://tasks.opencraft.com/browse/FAL-4168