feat: add basic pagination

.env.development

@@ -44,4 +44,5 @@ HOTJAR_DEBUG=true
 INVITE_STUDENTS_EMAIL_TO="someone@domain.com"
 AI_TRANSLATIONS_BASE_URL='http://localhost:18760'
 ENABLE_HOME_PAGE_COURSE_API_V2='true'
+ENABLE_HOME_PAGE_LIBRARY_API_V2=true
 ENABLE_CHECKLIST_QUALITY=true

src/index.jsx

@@ -126,6 +126,7 @@ initialize({
         ENABLE_VIDEO_UPLOAD_PAGE_LINK_IN_CONTENT_DROPDOWN: process.env.ENABLE_VIDEO_UPLOAD_PAGE_LINK_IN_CONTENT_DROPDOWN || 'false',
         ENABLE_TAGGING_TAXONOMY_PAGES: process.env.ENABLE_TAGGING_TAXONOMY_PAGES || 'false',
         ENABLE_HOME_PAGE_COURSE_API_V2: process.env.ENABLE_HOME_PAGE_COURSE_API_V2 || 'false',
+        ENABLE_HOME_PAGE_LIBRARY_API_V2: process.env.ENABLE_HOME_PAGE_LIBRARY_API_V2 || 'false',
         ENABLE_CHECKLIST_QUALITY: process.env.ENABLE_CHECKLIST_QUALITY || 'true',
       }, 'CourseAuthoringConfig');
     },

src/studio-home/StudioHome.jsx

@@ -27,6 +27,8 @@ import AlertMessage from '../generic/alert-message';
 
 const StudioHome = ({ intl }) => {
   const isPaginationCoursesEnabled = getConfig().ENABLE_HOME_PAGE_COURSE_API_V2 === 'true';
+  const isPaginationLibrariesEnabled = getConfig().ENABLE_HOME_PAGE_LIBRARY_API_V2 === 'true';
+
   const {
     isLoadingPage,
     isFailedLoadingPage,
@@ -141,6 +143,7 @@ const StudioHome = ({ intl }) => {
               isShowProcessing={isShowProcessing}
               dispatch={dispatch}
               isPaginationCoursesEnabled={isPaginationCoursesEnabled}
+              isPaginationLibrariesEnabled={isPaginationLibrariesEnabled}
             />
           </section>
         </Layout.Element>

src/studio-home/data/api.js

@@ -39,6 +39,11 @@ export async function getStudioHomeLibraries() {
   return camelCaseObject(data);
 }
 
+export async function getStudioHomeLibrariesV2(customParams) {
+  const { data } = await getAuthenticatedHttpClient().get(`${getApiBaseUrl()}/api/contentstore/v2/home/libraries`, { params: customParams });
+  return camelCaseObject(data);
+}
+
 /**
  * Handle course notification requests.
  * @param {string} url

src/studio-home/data/api.test.js

@@ -44,7 +44,7 @@ describe('studio-home api calls', () => {
     expect(result).toEqual(expected);
   });
 
-  fit('should get studio courses data', async () => {
+  it('should get studio courses data', async () => {
     const apiLink = `${getApiBaseUrl()}/api/contentstore/v1/home/courses`;
     axiosMock.onGet(apiLink).reply(200, generateGetStudioCoursesApiResponse());
     const result = await getStudioHomeCourses('');
@@ -54,7 +54,7 @@ describe('studio-home api calls', () => {
     expect(result).toEqual(expected);
   });
 
-  fit('should get studio courses data v2', async () => {
+  it('should get studio courses data v2', async () => {
     const apiLink = `${getApiBaseUrl()}/api/contentstore/v2/home/courses`;
     axiosMock.onGet(apiLink).reply(200, generateGetStudioCoursesApiResponse());
     const result = await getStudioHomeCoursesV2('');

src/studio-home/data/thunks.js

@@ -5,6 +5,7 @@ import {
   handleCourseNotification,
   getStudioHomeCourses,
   getStudioHomeLibraries,
+  getStudioHomeLibrariesV2,
   getStudioHomeCoursesV2,
 } from './api';
 import {
@@ -47,12 +48,14 @@ function fetchStudioHomeData(search, hasHomeData, requestParams = {}, isPaginati
   };
 }
 
-function fetchLibraryData() {
+function fetchLibraryData(isPaginationEnabled = false, requestParams = {}) {
   return async (dispatch) => {
     dispatch(updateLoadingStatuses({ libraryLoadingStatus: RequestStatus.IN_PROGRESS }));
 
     try {
-      const libraryData = await getStudioHomeLibraries();
+      const libraryData = isPaginationEnabled
+        ? await getStudioHomeLibrariesV2(requestParams)
+        : await getStudioHomeLibraries();
       dispatch(fetchLibraryDataSuccess(libraryData));
       dispatch(updateLoadingStatuses({ libraryLoadingStatus: RequestStatus.SUCCESSFUL }));
     } catch (error) {

src/studio-home/tabs-section/index.jsx

@@ -19,6 +19,7 @@ const TabsSection = ({
   isShowProcessing,
   dispatch,
   isPaginationCoursesEnabled,
+  isPaginationLibrariesEnabled,
 }) => {
   const TABS_LIST = {
     courses: 'courses',
@@ -94,6 +95,7 @@ const TabsSection = ({
               libraries={libraries}
               isLoading={isLoadingLibraries}
               isFailed={isFailedLibrariesPage}
+              isEnabledPagination={isPaginationLibrariesEnabled}
             />
           )}
         </Tab>,
@@ -107,7 +109,7 @@ const TabsSection = ({
     if (tab === TABS_LIST.libraries && redirectToLibraryAuthoringMfe) {
       window.location.assign(libraryAuthoringMfeUrl);
     } else if (tab === TABS_LIST.libraries && !redirectToLibraryAuthoringMfe) {
-      dispatch(fetchLibraryData());
+      dispatch(fetchLibraryData(isPaginationLibrariesEnabled));
     }
     setTabKey(tab);
   };
@@ -126,6 +128,7 @@ const TabsSection = ({
 
 TabsSection.defaultProps = {
   isPaginationCoursesEnabled: false,
+  isPaginationLibrariesEnabled: false,
 };
 
 TabsSection.propTypes = {
@@ -135,6 +138,7 @@ TabsSection.propTypes = {
   isShowProcessing: PropTypes.bool.isRequired,
   dispatch: PropTypes.func.isRequired,
   isPaginationCoursesEnabled: PropTypes.bool,
+  isPaginationLibrariesEnabled: PropTypes.bool,
 };
 
 export default injectIntl(TabsSection);