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/sharedComponents/ImageUploadModal/SelectImageModal/hooks.js

@@ -43,7 +43,14 @@ export const displayList = ({ sortBy, searchString, images }) => (
     imageList: images,
   }).sort(sortFunctions[sortBy in sortKeys ? sortKeys[sortBy] : sortKeys.dateNewest]));
 
-export const imgListHooks = ({ searchSortProps, setSelection, images }) => {
+export const imgListHooks = ({
+  searchSortProps,
+  setSelection,
+  images,
+  imageCount,
+}) => {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const dispatch = useDispatch();
   const [highlighted, setHighlighted] = module.state.highlighted(null);
   const [
     showSelectImageError,
@@ -73,6 +80,9 @@ export const imgListHooks = ({ searchSortProps, setSelection, images }) => {
       highlighted,
       onHighlightChange: (e) => setHighlighted(e.target.value),
       emptyGalleryLabel: messages.emptyGalleryLabel,
+      allowLazyLoad: true,
+      fetchNextPage: ({ pageNumber }) => dispatch(thunkActions.app.fetchImages({ pageNumber })),
+      assetCount: imageCount,
     },
     // highlight by id
     selectBtnProps: {
@@ -118,7 +128,7 @@ export const fileInputHooks = ({ setSelection, clearSelection, imgList }) => {
       },
     })) {
       dispatch(
-        thunkActions.app.uploadImage({
+        thunkActions.app.uploadAsset({
           file: selectedFile,
           setSelection,
         }),
@@ -133,9 +143,19 @@ export const fileInputHooks = ({ setSelection, clearSelection, imgList }) => {
   };
 };
 
-export const imgHooks = ({ setSelection, clearSelection, images }) => {
+export const imgHooks = ({
+  setSelection,
+  clearSelection,
+  images,
+  imageCount,
+}) => {
   const searchSortProps = module.searchAndSortHooks();
-  const imgList = module.imgListHooks({ setSelection, searchSortProps, images });
+  const imgList = module.imgListHooks({
+    setSelection,
+    searchSortProps,
+    images,
+    imageCount,
+  });
   const fileInput = module.fileInputHooks({
     setSelection,
     clearSelection,

src/editors/sharedComponents/ImageUploadModal/SelectImageModal/hooks.test.js

@@ -27,7 +27,7 @@ jest.mock('react-redux', () => {
 jest.mock('../../../data/redux', () => ({
   thunkActions: {
     app: {
-      uploadImage: jest.fn(),
+      uploadAsset: jest.fn(),
     },
   },
 }));
@@ -248,7 +248,7 @@ describe('SelectImageModal hooks', () => {
       hook.click();
       expect(click).toHaveBeenCalled();
     });
-    describe('addFile (uploadImage args)', () => {
+    describe('addFile (uploadAsset args)', () => {
       const eventSuccess = { target: { files: [{ value: testValue, size: 2000 }] } };
       const eventFailure = { target: { files: [testValueInvalidImage] } };
       it('image fails to upload if file size is greater than 1000000', () => {
@@ -259,14 +259,14 @@ describe('SelectImageModal hooks', () => {
         expect(spies.checkValidFileSize.mock.calls.length).toEqual(1);
         expect(spies.checkValidFileSize).toHaveReturnedWith(false);
       });
-      it('dispatches uploadImage thunkAction with the first target file and setSelection', () => {
+      it('dispatches uploadAsset thunkAction with the first target file and setSelection', () => {
         const checkValidFileSize = true;
         spies.checkValidFileSize = jest.spyOn(hooks, hookKeys.checkValidFileSize)
           .mockReturnValueOnce(checkValidFileSize);
         hook.addFile(eventSuccess);
         expect(spies.checkValidFileSize.mock.calls.length).toEqual(1);
         expect(spies.checkValidFileSize).toHaveReturnedWith(true);
-        expect(dispatch).toHaveBeenCalledWith(thunkActions.app.uploadImage({
+        expect(dispatch).toHaveBeenCalledWith(thunkActions.app.uploadAsset({
           file: testValue,
           setSelection,
         }));
@@ -281,6 +281,7 @@ describe('SelectImageModal hooks', () => {
     const searchAndSortHooks = { search: 'props' };
     const fileInputHooks = { file: 'input hooks' };
     const images = { sOmEuiMAge: { staTICUrl: '/assets/sOmEuiMAge' } };
+    const imageCount = 1;
 
     const setSelection = jest.fn();
     const clearSelection = jest.fn();
@@ -292,9 +293,11 @@ describe('SelectImageModal hooks', () => {
         .mockReturnValueOnce(searchAndSortHooks);
       spies.file = jest.spyOn(hooks, hookKeys.fileInputHooks)
         .mockReturnValueOnce(fileInputHooks);
-      hook = hooks.imgHooks({ setSelection, clearSelection, images });
+      hook = hooks.imgHooks({
+        setSelection, clearSelection, images, imageCount,
+      });
     });
-    it('forwards fileInputHooks as fileInput, called with uploadImage prop', () => {
+    it('forwards fileInputHooks as fileInput, called with uploadAsset prop', () => {
       expect(hook.fileInput).toEqual(fileInputHooks);
       expect(spies.file.mock.calls.length).toEqual(1);
       expect(spies.file).toHaveBeenCalledWith({
@@ -307,6 +310,7 @@ describe('SelectImageModal hooks', () => {
         setSelection,
         searchSortProps: searchAndSortHooks,
         images,
+        imageCount,
       });
     });
     it('forwards searchAndSortHooks as searchSortProps', () => {

src/editors/sharedComponents/ImageUploadModal/SelectImageModal/index.jsx

@@ -17,6 +17,7 @@ export const SelectImageModal = ({
   isLoaded,
   isFetchError,
   isUploadError,
+  imageCount,
 }) => {
   const {
     galleryError,
@@ -25,7 +26,12 @@ export const SelectImageModal = ({
     galleryProps,
     searchSortProps,
     selectBtnProps,
-  } = hooks.imgHooks({ setSelection, clearSelection, images: images.current });
+  } = hooks.imgHooks({
+    setSelection,
+    clearSelection,
+    images: images.current,
+    imageCount,
+  });
 
   const modalMessages = {
     confirmMsg: messages.nextButtonLabel,
@@ -66,12 +72,14 @@ SelectImageModal.propTypes = {
   isLoaded: PropTypes.bool.isRequired,
   isFetchError: PropTypes.bool.isRequired,
   isUploadError: PropTypes.bool.isRequired,
+  imageCount: PropTypes.number.isRequired,
 };
 
 export const mapStateToProps = (state) => ({
-  isLoaded: selectors.requests.isFinished(state, { requestKey: RequestKeys.fetchAssets }),
-  isFetchError: selectors.requests.isFailed(state, { requestKey: RequestKeys.fetchAssets }),
+  isLoaded: selectors.requests.isFinished(state, { requestKey: RequestKeys.fetchImages }),
+  isFetchError: selectors.requests.isFailed(state, { requestKey: RequestKeys.fetchImages }),
   isUploadError: selectors.requests.isFailed(state, { requestKey: RequestKeys.uploadAsset }),
+  imageCount: state.app.imageCount,
 });
 
 export const mapDispatchToProps = {};