feat: improve asset loading (#484)

* fix: update initialize to only call required functions

* feat: update asset urls without asset object

* feat: add pagination to select image modal

* fix: lint errors

* chore: update tests

* fix: asset pattern regex match

* feat: update pagination to be button to prevent page skipping

* fix: e.target.error for feedback fields

* fix: failing snapshots

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

@@ -26,9 +26,16 @@ export const apiMethods = {
   fetchStudioView: ({ blockId, studioEndpointUrl }) => get(
     urls.blockStudioView({ studioEndpointUrl, blockId }),
   ),
-  fetchAssets: ({ learningContextId, studioEndpointUrl }) => get(
-    urls.courseAssets({ studioEndpointUrl, learningContextId }),
-  ),
+  fetchImages: ({ learningContextId, studioEndpointUrl, pageNumber }) => {
+    const params = {
+      asset_type: 'Images',
+      page: pageNumber,
+    };
+    return get(
+      `${urls.courseAssets({ studioEndpointUrl, learningContextId })}`,
+      { params },
+    );
+  },
   fetchVideos: ({ studioEndpointUrl, learningContextId }) => get(
     urls.courseVideos({ studioEndpointUrl, learningContextId }),
   ),

src/editors/data/services/cms/api.test.js

@@ -126,10 +126,17 @@ describe('cms api', () => {
       });
     });
 
-    describe('fetchAssets', () => {
+    describe('fetchImages', () => {
       it('should call get with url.courseAssets', () => {
-        apiMethods.fetchAssets({ learningContextId, studioEndpointUrl });
-        expect(get).toHaveBeenCalledWith(urls.courseAssets({ studioEndpointUrl, learningContextId }));
+        apiMethods.fetchImages({ learningContextId, studioEndpointUrl, pageNumber: 0 });
+        const params = {
+          asset_type: 'Images',
+          page: 0,
+        };
+        expect(get).toHaveBeenCalledWith(
+          urls.courseAssets({ studioEndpointUrl, learningContextId }),
+          { params },
+        );
       });
     });
 

src/editors/data/services/cms/mockApi.js

@@ -69,7 +69,7 @@ export const fetchByUnitId = ({ blockId, studioEndpointUrl }) => mockPromise({
   data: { ancestors: [{ id: 'unitUrl' }] },
 });
 // eslint-disable-next-line
-export const fetchAssets = ({ learningContextId, studioEndpointUrl }) => mockPromise({
+export const fetchImages = ({ learningContextId, studioEndpointUrl }) => mockPromise({
   data: {
     assets: [
       {

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

@@ -52,7 +52,7 @@ export const blockStudioView = ({ studioEndpointUrl, blockId }) => (
 );
 
 export const courseAssets = ({ studioEndpointUrl, learningContextId }) => (
-  `${studioEndpointUrl}/assets/${learningContextId}/?page_size=500`
+  `${studioEndpointUrl}/assets/${learningContextId}/`
 );
 
 export const thumbnailUpload = ({ studioEndpointUrl, learningContextId, videoId }) => (

src/editors/data/services/cms/urls.test.js

@@ -119,7 +119,7 @@ describe('cms url methods', () => {
   describe('courseAssets', () => {
     it('returns url with studioEndpointUrl and learningContextId', () => {
       expect(courseAssets({ studioEndpointUrl, learningContextId }))
-        .toEqual(`${studioEndpointUrl}/assets/${learningContextId}/?page_size=500`);
+        .toEqual(`${studioEndpointUrl}/assets/${learningContextId}/`);
     });
   });
   describe('thumbnailUpload', () => {