feat: library home page bare bones (TEMP) #37

rpenido · 2024-05-31T21:33:36Z

Description

This PR adds a "Bare Bones" version of the Library Home and updates the SearchResult component to redirect to this new page.

More Info

Closes: Library Home Page - "Bare Bones" openedx/frontend-app-authoring#1036
Depends on: feat: Add lib v2/legacy tabs in studio home openedx/frontend-app-authoring#1050

Testing Instructions

Run your local stack on this branch
Make sure you have the studio.library_authoring_mfe waffle flag DISABLED
Go to the Studio Home and check the "Libraries" tab
Click on one library with components
Check if the component count is shown in the last card and the "Components" tab
Use the keyword search box and check if the component count is filtered accordingly
Navigate through the Home, Components and Collections tab and check if you can navigate back using the "Back" button from the brownser
Go back to the Studio Home and open a library WITHOUT components
You should see a message with a button that will allow the user to add new components (not implemented yet)
Go back to the Studio Home and open the search modal
Find a library v2 component and click on it. It should redirect to the new Library Home.

Private ref: FAL-3753

When lib mode is set to "mixed", both "Libraries" and "Legacy Libraries" tabs are show in the Studio Home. When "Libraries" is clicked, v2 libraries are fetched, when "Legacy Libraries" is clicked, v1 libraries are fetched. When lib mode is set to "v1 only" or "v2 only", only one tab "Libraries" is show and only the respective libraries are fetched when the tab is clicked.

This is to switch between different library modes.

The path updates when selecting tabs, when accessing the url with the path directly it will open its respective tab. Navigating using the browser back/forward buttons is also supported.

This commit is temporary as the current frontend build system in tests doesnt support TS syntax. That should be fixed soon, and this commit should be removed.

This is a temporary commit since there are currently no webpack loaders that support tsx files in the test running. This commit should be removed once that is fixed upstream.

yusuf-musleh

@rpenido Great work on this! Overall it works pretty well, just found a things that need to be fixed and some small nits.

yusuf-musleh · 2024-06-06T12:40:38Z

src/index.jsx

        <Route path="/legacy-libraries" element={<StudioHome />} />
-        <Route path="/library/:libraryId" element={<LibraryV2Placeholder />} />
+        <Route path="/library/:libraryId/*" element={<LibraryAuthoringPage />} />
        <Route path="/course/:courseId/*" element={<CourseAuthoringRoutes />} />


If you click on the "Create Library" button when the studio.library_authoring_mfe flag is disabled, it navigates to the http://apps.local.edly.io:2001/course-authoring/library/create (which renders the placeholder page as a temporary thing I added in my PR), however that's broken because it assumes create is a libraryKey and the backend errors out.

Not sure where it should redirect to, maybe a new placeholder "create" page?

I created a placeholder for the New Library page (a24b3ba)
Also, I didn't find a task to create this form in the course authoring. CC @ChrisChV

@rpenido Yes, there is no such screen in the mockups. @bradenmacdonald I guess that's included in another epic?

Ah, we missed that. I'll create a story for it. For now, just use the placeholder.

Here is the story for it: openedx#1077

yusuf-musleh · 2024-06-06T12:48:03Z

src/library-authoring/EmptyStates.jsx

+    <div>You have not added any content to this library yet.</div>
+    <Button iconBefore={Add}>Add Content</Button>


nit: The text here in both the div and button is missing internationalization.

Thank you for catching that! Fixed: 4deaea9

yusuf-musleh · 2024-06-06T12:57:18Z

src/library-authoring/LibraryHome.jsx

+  return (
+    <Stack gap={3}>
+      <Section title="Recently Modified">
+        Recently modified components and collections will be displayed here.


nit: Similarly here, internationalize text.

Fixed: 4deaea9

yusuf-musleh · 2024-06-06T13:13:14Z

src/search-modal/SearchResult.jsx

+      if (libraryAuthoringMfeUrl) {
+        return `${libraryAuthoringMfeUrl}${urlSuffix}`;
      }


When clicking on the search result it still redirects to the library authoring mfe when the flag is disabled. I think it missing && redirectToLibraryAuthoringMfe in the check.

Fixed: c2bdecf

When lib mode is set to "mixed", both "Libraries" and "Legacy Libraries" tabs are show in the Studio Home. When "Libraries" is clicked, v2 libraries are fetched, when "Legacy Libraries" is clicked, v1 libraries are fetched. When lib mode is set to "v1 only" or "v2 only", only one tab "Libraries" is show and only the respective libraries are fetched when the tab is clicked.

This is to switch between different library modes.

The path updates when selecting tabs, when accessing the url with the path directly it will open its respective tab. Navigating using the browser back/forward buttons is also supported.

This commit is temporary as the current frontend build system in tests doesnt support TS syntax. That should be fixed soon, and this commit should be removed.

This is a temporary commit since there are currently no webpack loaders that support tsx files in the test running. This commit should be removed once that is fixed upstream.

…753-library-home-page-bare-bones

yusuf-musleh

@rpenido Great work here! Thanks for addressing the issues, things are working well!

Left a few final nits/comments.

src/library-authoring/LibraryAuthoringPage.jsx

yusuf-musleh · 2024-06-09T13:12:57Z

src/library-authoring/LibraryAuthoringPage.test.jsx

+      index_name: 'studio',
+      api_key: 'test-key',
+    });
+    //


nit: extra blank comment

Fixed: 388c40e

yusuf-musleh · 2024-06-09T13:27:15Z

webpack.dev-tutor.config.js

Seems like this file slipped thought and got pushed accidentally.

Fixed: 388c40e

yusuf-musleh · 2024-06-09T13:33:31Z

src/library-authoring/LibraryAuthoringPage.jsx

+        <SearchField
+          value={searchKeywords}
+          placeholder={intl.formatMessage(messages.searchPlaceholder)}
+          onChange={(value) => setSearchKeywords(value)}
+          className="w-50"
+        />


The onSubmit still needs to be defined here, as if you press "Enter" it causes an error onSubmit is not a function. We can pass in a no-op function () => {} since the search is already performed onChange so it doesn't fire again.

Good catch! Fixed: 388c40e

src/search-modal/data/apiHooks.js

This reverts commit c63bc2f.

codecov · 2024-06-19T13:10:46Z

Codecov Report

Attention: Patch coverage is 95.75758% with 7 lines in your changes missing coverage. Please review.

Please upload report for BASE (yusuf-musleh/lib-v2-tab-studio-home@e2ed3bc). Learn more about missing BASE report.

❗ Current head 942cbff differs from pull request most recent head 94f483b

Please upload reports for the commit 94f483b to get more accurate results.

Files	Patch %	Lines
...tudio-home/tabs-section/libraries-v2-tab/index.jsx	80.95%	3 Missing and 1 partial ⚠️
src/header/Header.jsx	80.00%	1 Missing ⚠️
src/library-authoring/LibraryAuthoringPage.jsx	96.29%	1 Missing ⚠️
src/studio-home/tabs-section/index.jsx	96.42%	1 Missing ⚠️

Additional details and impacted files

@@                          Coverage Diff                           @@
##             yusuf-musleh/lib-v2-tab-studio-home      #37   +/-   ##
======================================================================
  Coverage                                       ?   92.49%           
======================================================================
  Files                                          ?      718           
  Lines                                          ?    12745           
  Branches                                       ?     2809           
======================================================================
  Hits                                           ?    11789           
  Misses                                         ?      918           
  Partials                                       ?       38

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

This PR adds a new configuration flag that shows/hides tabs in studio home along with some new functionality around to V1 and V2 Libraries. When the new LIBRARY_MODE flag is set to "mixed" (default in dev) it will show "Libraries" and "Legacy Libraries" tabs that correspond to v1 and v2 tabs respectively. When the new LIBRARY_MODE flag is set to "v1 only" (default in production) or "v2 only", only one tab "Libraries" is shown and only the respective libraries are fetched when the tab is clicked. In addition to the above changes, the URL/route now updates when clicking on the tabs, and navigating to it directly would open up that tab as well as a new placeholder page that you will be redirected to when clicking on a v2 library if the library authoring MFE is not enabled.

rpenido · 2024-06-20T12:52:20Z

Closed in favor of: openedx#1076

yusuf-musleh added 5 commits June 3, 2024 15:44

feat: Add LIBRARY_MODE config variable

15c678b

This is to switch between different library modes.

feat: Add url paths/navigation for each tab

14b8b3a

The path updates when selecting tabs, when accessing the url with the path directly it will open its respective tab. Navigating using the browser back/forward buttons is also supported.

feat: LibraryV2 redirect to lib mfe or placeholder

515cc71

feat: Add pagination support for lib v2s

9c6e1e6

yusuf-musleh force-pushed the yusuf-musleh/lib-v2-tab-studio-home branch from 049e490 to 9c6e1e6 Compare June 3, 2024 12:45

yusuf-musleh added 4 commits June 3, 2024 16:50

fix: Redirect to placeholder create lib in v2/mixed disabled mfe

da189c1

temp: This removes TS code to get tests to run

85d9ff2

This commit is temporary as the current frontend build system in tests doesnt support TS syntax. That should be fixed soon, and this commit should be removed.

test: Update existing tests to support changes

c6b7bf8

temp: Rename .tsx -> .jsx & .ts -> .js for tests

14933d2

This is a temporary commit since there are currently no webpack loaders that support tsx files in the test running. This commit should be removed once that is fixed upstream.

rpenido force-pushed the rpenido/fal-3753-library-home-page-bare-bones branch 3 times, most recently from b698d89 to 4391778 Compare June 4, 2024 01:15

fix: Fix lint issues

8b96268

yusuf-musleh force-pushed the yusuf-musleh/lib-v2-tab-studio-home branch from 975b8db to 8b96268 Compare June 4, 2024 12:54

feat: library home page bare bones

f8db853

rpenido force-pushed the rpenido/fal-3753-library-home-page-bare-bones branch from 4391778 to f8db853 Compare June 4, 2024 17:56

test: Add tests for new functionality

7a8488d

rpenido marked this pull request as draft June 5, 2024 13:08

fix: update search modal for new library urls

7842ce0

yusuf-musleh suggested changes Jun 6, 2024

View reviewed changes

yusuf-musleh added 9 commits June 6, 2024 17:33

feat: Add LIBRARY_MODE config variable

be8b2f4

This is to switch between different library modes.

feat: Add url paths/navigation for each tab

27b2581

The path updates when selecting tabs, when accessing the url with the path directly it will open its respective tab. Navigating using the browser back/forward buttons is also supported.

feat: LibraryV2 redirect to lib mfe or placeholder

4ffd651

feat: Add pagination support for lib v2s

7f97243

fix: Redirect to placeholder create lib in v2/mixed disabled mfe

c86b85a

temp: This removes TS code to get tests to run

efbc625

This commit is temporary as the current frontend build system in tests doesnt support TS syntax. That should be fixed soon, and this commit should be removed.

test: Update existing tests to support changes

21da6f8

temp: Rename .tsx -> .jsx & .ts -> .js for tests

79e6516

This is a temporary commit since there are currently no webpack loaders that support tsx files in the test running. This commit should be removed once that is fixed upstream.

rpenido force-pushed the rpenido/fal-3753-library-home-page-bare-bones branch 4 times, most recently from 3af4eef to 8ef4e0c Compare June 7, 2024 18:48

fix: add tests

72edfac

rpenido force-pushed the rpenido/fal-3753-library-home-page-bare-bones branch from 8ef4e0c to 72edfac Compare June 7, 2024 18:59

rpenido added 5 commits June 7, 2024 17:08

Merge branch 'yusuf-musleh/lib-v2-tab-studio-home' into rpenido/fal-3…

8086ebf

…753-library-home-page-bare-bones

fix: removing unused file

91443e9

fix: add ts-check

a29cf7e

fix: removing deleted file references

4deab76

chore: trigger CI

e8bca34

yusuf-musleh approved these changes Jun 9, 2024

View reviewed changes

fix: fixes from review

388c40e

bradenmacdonald reviewed Jun 13, 2024

View reviewed changes

src/search-modal/data/apiHooks.js Outdated Show resolved Hide resolved

rpenido added 3 commits June 14, 2024 10:41

fix: fix default parameter syntax

7d6096e

fix: new library redirect

c63bc2f

Revert "fix: new library redirect"

efe0bed

This reverts commit c63bc2f.

chore: trigger CI

942cbff

yusuf-musleh force-pushed the yusuf-musleh/lib-v2-tab-studio-home branch from 2e3fa43 to 09e3979 Compare June 19, 2024 14:42

rpenido force-pushed the rpenido/fal-3753-library-home-page-bare-bones branch from 9ca7038 to 18a8482 Compare June 20, 2024 02:21

fix: new library redirect

2d3be09

rpenido force-pushed the rpenido/fal-3753-library-home-page-bare-bones branch from 18a8482 to 2d3be09 Compare June 20, 2024 02:22

rpenido and others added 5 commits June 19, 2024 23:29

fix: remove warning on library home

e8f9f78

fix: remove unused import

f9920f4

Merge branch 'master' into rpenido/fal-3753-library-home-page-bare-bones

7fd6c27

fix: merging nits

94f483b

rpenido closed this Jun 20, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: library home page bare bones (TEMP) #37

feat: library home page bare bones (TEMP) #37

rpenido commented May 31, 2024 •

edited

Loading

yusuf-musleh left a comment

yusuf-musleh Jun 6, 2024

rpenido Jun 6, 2024

ChrisChV Jun 7, 2024

bradenmacdonald Jun 7, 2024

bradenmacdonald Jun 7, 2024

yusuf-musleh Jun 6, 2024

rpenido Jun 6, 2024

yusuf-musleh Jun 6, 2024

rpenido Jun 6, 2024

yusuf-musleh Jun 6, 2024

rpenido Jun 6, 2024

yusuf-musleh left a comment

yusuf-musleh Jun 9, 2024

rpenido Jun 13, 2024

yusuf-musleh Jun 9, 2024

rpenido Jun 13, 2024

yusuf-musleh Jun 9, 2024

rpenido Jun 13, 2024

codecov bot commented Jun 19, 2024 •

edited

Loading

rpenido commented Jun 20, 2024

		<div>You have not added any content to this library yet.</div>
		<Button iconBefore={Add}>Add Content</Button>

feat: library home page bare bones (TEMP) #37

feat: library home page bare bones (TEMP) #37

Conversation

rpenido commented May 31, 2024 • edited Loading

Description

More Info

Testing Instructions

yusuf-musleh left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yusuf-musleh left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

codecov bot commented Jun 19, 2024 • edited Loading

Codecov Report

rpenido commented Jun 20, 2024

rpenido commented May 31, 2024 •

edited

Loading

codecov bot commented Jun 19, 2024 •

edited

Loading