@instructure/canvas-rce 5.6.0-beta.0 → 5.6.1

package/lib/translated/en/modules/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/Course.js

@@ -22,10 +22,54 @@ import ImageList from '../../../../instructure_image/Images';
 import { useStoreProps } from '../../../../shared/StoreContext';
 import useDataUrl from '../../../../shared/useDataUrl';
 import { actions } from '../../../reducers/imageSection';
+import { canCompressImage, compressImage, shouldCompressImage } from './compressionUtils';
+import { isAnUnsupportedGifPngImage, MAX_GIF_PNG_SIZE_BYTES } from './utils';
+import { actions as svgActions } from '../../../reducers/svgSettings';
+import formatMessage from '../../../../../../format-message';
+
+const dispatchImage = async (dispatch, onChange, dataUrl, dataBlob) => {
+  let image = dataUrl;
+
+  if (isAnUnsupportedGifPngImage(dataBlob)) {
+    dispatch({ ...actions.CLEAR_IMAGE
+    });
+    return onChange({
+      type: svgActions.SET_ERROR,
+      payload: "GIF/PNG format images larger than " + MAX_GIF_PNG_SIZE_BYTES / 1024 + " KB are not currently supported."
+    });
+  }
+
+  dispatch({ ...actions.SET_IMAGE,
+    payload: ''
+  });
+  dispatch({ ...actions.SET_CROPPER_OPEN,
+    payload: true
+  });
+
+  if (canCompressImage() && shouldCompressImage(dataBlob)) {
+    try {
+      // If compression fails, use the original one
+      // TODO: We can show the user that compression failed in some way
+      image = await compressImage(dataUrl);
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.error(e);
+    }
+
+    dispatch({ ...actions.SET_COMPRESSION_STATUS,
+      payload: true
+    });
+  }
+
+  dispatch({ ...actions.SET_IMAGE,
+    payload: image
+  });
+};
 
 const Course = _ref => {
   let {
     dispatch,
+    onChange,
     onLoading,
     onLoaded
   } = _ref;
@@ -39,20 +83,16 @@ const Course = _ref => {
   const {
     setUrl,
     dataUrl,
-    dataLoading
+    dataLoading,
+    dataBlob
   } = useDataUrl();
   const category = 'uncategorized'; // Handle image selection
 
   useEffect(() => {
     // Don't clear the current image on re-render
-    if (!dataUrl) return;
-    dispatch({ ...actions.SET_IMAGE,
-      payload: dataUrl
-    });
-    dispatch({ ...actions.SET_CROPPER_OPEN,
-      payload: true
-    }); // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [dataUrl]); // Handle loading states
+    if (!dataUrl || !dataBlob) return;
+    dispatchImage(dispatch, onChange, dataUrl, dataBlob); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [dataUrl, dataBlob]); // Handle loading states
 
   useEffect(() => {
     dispatch(dataLoading ? actions.START_LOADING : actions.STOP_LOADING);
@@ -98,11 +138,13 @@ const Course = _ref => {
 
 Course.propTypes = {
   dispatch: PropTypes.func,
+  onChange: PropTypes.func,
   onLoading: PropTypes.func,
   onLoaded: PropTypes.func
 };
 Course.defaultProps = {
   dispatch: () => {},
+  onChange: () => {},
   onLoading: () => {},
   onLoaded: () => {}
 };

package/lib/translated/en/modules/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/ImageOptions.js

@@ -31,6 +31,9 @@ import { ImageCropperModal } from '../ImageCropper';
 import ModeSelect from './ModeSelect';
 import PropTypes from 'prop-types';
 import { ImageCropperSettingsPropTypes } from '../ImageCropper/propTypes';
+import { MAX_IMAGE_SIZE_BYTES } from './compressionUtils';
+
+const getCompressionMessage = () => "Your image has been compressed for Icon Maker. Images less than " + MAX_IMAGE_SIZE_BYTES / 1024 + " KB will not be compressed.";
 
 function renderImagePreview(_ref) {
   let {
@@ -123,7 +126,9 @@ export const ImageOptions = _ref4 => {
       });
     },
     image: image,
-    cropSettings: state.cropperSettings
+    cropSettings: state.cropperSettings,
+    message: state.compressed ? getCompressionMessage() : null,
+    loading: !image
   })));
 };
 ImageOptions.propTypes = {
@@ -133,7 +138,8 @@ ImageOptions.propTypes = {
     mode: PropTypes.string.isRequired,
     loading: PropTypes.bool.isRequired,
     cropperOpen: PropTypes.bool.isRequired,
-    cropperSettings: ImageCropperSettingsPropTypes
+    cropperSettings: ImageCropperSettingsPropTypes,
+    compressed: PropTypes.bool.isRequired
   }).isRequired,
   dispatch: PropTypes.func.isRequired,
   rcsConfig: PropTypes.object.isRequired

package/lib/translated/en/modules/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/ImageSection.js

@@ -219,6 +219,7 @@ export const ImageSection = _ref => {
     dispatch: dispatch,
     editor: editor,
     data: state,
+    onChange: onChange,
     onLoading: scrollToBottom,
     onLoaded: scrollToBottom
   }))), state.icon && state.mode === modes.singleColorImages.type && /*#__PURE__*/React.createElement(Flex.Item, {

package/lib/translated/en/modules/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/SVGList.js

@@ -48,7 +48,7 @@ const SVGList = _ref => {
     height: "100%",
     margin: "xx-small",
     padding: "small",
-    wrapItems: true,
+    wrap: "wrap",
     "data-testid": `${type}-svg-list`
   }, Object.keys(svgSourceList).map(iconName => /*#__PURE__*/React.createElement(Flex.Item, {
     key: iconName,

package/lib/translated/en/modules/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/Upload.js

@@ -16,13 +16,65 @@
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 import React from 'react';
+import PropTypes from 'prop-types';
 import formatMessage from '../../../../../../format-message';
 import { actions } from '../../../reducers/imageSection';
+import { actions as svgActions } from '../../../reducers/svgSettings';
 import { UploadFile } from '../../../../shared/Upload/UploadFile';
-export const onSubmit = dispatch => (_editor, _accept, _selectedPanel, uploadData) => {
+import { canCompressImage, compressImage, shouldCompressImage } from './compressionUtils';
+import { isAnUnsupportedGifPngImage, MAX_GIF_PNG_SIZE_BYTES } from './utils';
+
+function dispatchCompressedImage(theFile, dispatch) {
+  dispatch({ ...actions.SET_IMAGE,
+    payload: ''
+  });
+  dispatch({ ...actions.SET_CROPPER_OPEN,
+    payload: true
+  });
+  dispatch({ ...actions.SET_IMAGE_COLLECTION_OPEN,
+    payload: false
+  });
+  return compressImage(theFile.preview).then(blob => {
+    dispatch({ ...actions.SET_COMPRESSION_STATUS,
+      payload: true
+    });
+    dispatch({ ...actions.SET_IMAGE,
+      payload: blob
+    });
+    dispatch({ ...actions.SET_IMAGE_NAME,
+      payload: theFile.name
+    });
+  }).catch(() => {
+    // If compression fails, use the original one
+    // TODO: We can show the user that compression failed in some way
+    dispatch({ ...actions.SET_IMAGE,
+      payload: theFile.preview
+    });
+    dispatch({ ...actions.SET_IMAGE_NAME,
+      payload: theFile.name
+    });
+  });
+}
+
+export const onSubmit = (dispatch, onChange) => (_editor, _accept, _selectedPanel, uploadData) => {
   const {
     theFile
   } = uploadData;
+
+  if (isAnUnsupportedGifPngImage(theFile)) {
+    dispatch({ ...actions.SET_IMAGE_COLLECTION_OPEN,
+      payload: false
+    });
+    return onChange({
+      type: svgActions.SET_ERROR,
+      payload: "GIF/PNG format images larger than " + MAX_GIF_PNG_SIZE_BYTES / 1024 + " KB are not currently supported."
+    });
+  }
+
+  if (canCompressImage() && shouldCompressImage(theFile)) {
+    return dispatchCompressedImage(theFile, dispatch);
+  }
+
   dispatch({ ...actions.SET_IMAGE,
     payload: theFile.preview
   });
@@ -40,7 +92,8 @@ export const onSubmit = dispatch => (_editor, _accept, _selectedPanel, uploadDat
 const Upload = _ref => {
   let {
     editor,
-    dispatch
+    dispatch,
+    onChange
   } = _ref;
   return /*#__PURE__*/React.createElement(UploadFile, {
     accept: "image/*",
@@ -51,8 +104,17 @@ const Upload = _ref => {
       dispatch(actions.CLEAR_MODE);
     },
     requireA11yAttributes: false,
-    onSubmit: onSubmit(dispatch)
+    onSubmit: onSubmit(dispatch, onChange)
   });
 };
 
+Upload.propTypes = {
+  editor: PropTypes.object.isRequired,
+  dispatch: PropTypes.func,
+  onChange: PropTypes.func
+};
+Upload.defaultProps = {
+  dispatch: () => {},
+  onChange: () => {}
+};
 export default Upload;

package/lib/translated/en/modules/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/__tests__/Course.test.js

@@ -21,6 +21,8 @@ import { render, fireEvent, waitFor } from '@testing-library/react';
 import Course from '../Course';
 import { actions } from '../../../../reducers/imageSection';
 import { useStoreProps } from '../../../../../shared/StoreContext';
+import { compressImage, shouldCompressImage } from '../compressionUtils';
+import { isAnUnsupportedGifPngImage } from '../utils';
 const storeProps = {
   images: {
     Course: {
@@ -84,6 +86,14 @@ jest.mock('../../../../../shared/StoreContext', () => {
     useStoreProps: jest.fn()
   };
 });
+jest.mock('../compressionUtils', () => ({
+  shouldCompressImage: jest.fn().mockReturnValue(false),
+  compressImage: jest.fn().mockReturnValue(Promise.resolve('data:image/jpeg;base64,abcdefghijk==')),
+  canCompressImage: jest.fn().mockReturnValue(true)
+}));
+jest.mock('../utils', () => ({ ...jest.requireActual('../utils'),
+  isAnUnsupportedGifPngImage: jest.fn().mockReturnValue(false)
+}));
 describe('Course()', () => {
   let props;
 
@@ -95,7 +105,8 @@ describe('Course()', () => {
   beforeEach(() => {
     useStoreProps.mockReturnValue(storeProps);
     props = {
-      dispatch: jest.fn()
+      dispatch: jest.fn(),
+      onChange: jest.fn()
     };
   });
   afterEach(() => jest.clearAllMocks());
@@ -168,6 +179,118 @@ describe('Course()', () => {
         payload: false
       }));
     });
+    describe('and is unsupported', () => {
+      beforeAll(() => {
+        isAnUnsupportedGifPngImage.mockReturnValue(true);
+      });
+      afterAll(() => {
+        isAnUnsupportedGifPngImage.mockReturnValue(false);
+      });
+      it('dispatches a "clear image" action', async () => {
+        await waitFor(() => {
+          expect(props.dispatch).toHaveBeenCalledWith({
+            type: 'ClearImage'
+          });
+        });
+      });
+      it('invokes onChange action "set error"', async () => {
+        await waitFor(() => {
+          expect(props.onChange).toHaveBeenCalledWith({
+            type: 'SetError',
+            payload: 'GIF/PNG format images larger than 250 KB are not currently supported.'
+          });
+        });
+      });
+    });
+  });
+  describe('when a image to be compressed is clicked', () => {
+    let originalResponse;
+    beforeAll(() => {
+      const image = new Blob(['somedata'], {
+        type: 'image/jpeg',
+        size: 600000
+      });
+      fetchMock.mock('http://canvas.docker/files/722/download?download_frd=1', {
+        body: image,
+        sendAsJson: false
+      });
+      jest.spyOn(global, 'FileReader').mockImplementation(function () {
+        this.readAsDataURL = () => {
+          this.result = 'data:image/jpeg;base64,SGVsbG8sIFdvcmxkIQ==';
+          this.onloadend();
+        };
+      });
+      originalResponse = global.Response;
+
+      global.Response = function () {
+        this.blob = () => {
+          return Promise.resolve('XXXXXXXX');
+        };
+      };
+
+      shouldCompressImage.mockReturnValue(true);
+    });
+    beforeEach(() => {
+      const {
+        getByTitle
+      } = subject(); // Click the first image
+
+      fireEvent.click(getByTitle('Click to embed image_one.png'));
+    });
+    afterAll(() => {
+      fetchMock.restore();
+      global.Response = originalResponse;
+    });
+    it('dispatches a "stop loading" action', () => {
+      expect(props.dispatch.mock.calls[0][0]).toEqual({
+        type: 'StopLoading'
+      });
+    });
+    it('dispatches a "set image name" action', () => {
+      expect(props.dispatch.mock.calls[1][0]).toEqual({
+        type: 'SetImageName',
+        payload: 'grid.png'
+      });
+    });
+    it('dispatches a "loading" action', () => {
+      expect(props.dispatch.mock.calls[2][0]).toEqual({
+        type: 'StartLoading'
+      });
+    });
+    it('compressImage() was called', async () => {
+      await waitFor(() => {
+        expect(compressImage).toHaveBeenCalledWith('data:image/jpeg;base64,SGVsbG8sIFdvcmxkIQ==');
+      });
+    });
+    it('dispatches a "set compression status" action', async () => {
+      await waitFor(() => {
+        expect(props.dispatch).toHaveBeenCalledWith({
+          type: 'SetCompressionStatus',
+          payload: true
+        });
+      });
+    });
+    it('dispatches a "set image" action', async () => {
+      await waitFor(() => {
+        expect(props.dispatch).toHaveBeenCalledWith({
+          type: 'SetImage',
+          payload: 'data:image/jpeg;base64,abcdefghijk=='
+        });
+      });
+    });
+    it('dispatches a "open cropper" action', async () => {
+      await waitFor(() => {
+        expect(props.dispatch).toHaveBeenCalledWith({
+          type: 'SetCropperOpen',
+          payload: true
+        });
+      });
+    });
+    it('dispatches a "set image collection open" action', async () => {
+      await waitFor(() => expect(props.dispatch).toHaveBeenCalledWith({ ...actions.SET_IMAGE_COLLECTION_OPEN,
+        payload: false
+      }));
+    });
   });
   describe('when loading state changes', () => {
     it('calls "onLoading"', () => {

package/lib/translated/en/modules/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/__tests__/ImageSection.test.js

@@ -278,7 +278,7 @@ describe('ImageSection', () => {
           jest.runOnlyPendingTimers();
         }); // Zooms in just to change cropper settings
 
-        fireEvent.click(document.querySelector('[data-cid="Modal"] [data-cid="ModalBody"] [direction="row"] span:last-child button'));
+        fireEvent.click(getByTestId('zoom-in-button'));
         fireEvent.click(document.querySelector('[data-cid="Modal"] [type="submit"]'));
         await act(async () => {
           jest.runOnlyPendingTimers();

package/lib/translated/en/modules/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/__tests__/Upload.test.js

@@ -21,6 +21,7 @@ import Upload, { onSubmit } from '../Upload';
 import { actions } from '../../../../reducers/imageSection';
 import FakeEditor from '../../../../../shared/__tests__/FakeEditor';
 import fetchMock from 'fetch-mock';
+import { isAnUnsupportedGifPngImage } from '../utils';
 jest.mock('../../../../../../../bridge', () => {
   return {
     trayProps: {
@@ -30,6 +31,12 @@ jest.mock('../../../../../../../bridge', () => {
     }
   };
 });
+jest.mock('../compressionUtils', () => ({ ...jest.requireActual('../compressionUtils'),
+  compressImage: jest.fn().mockReturnValue(Promise.resolve('data:image/jpeg;base64,abcdefghijk=='))
+}));
+jest.mock('../utils', () => ({ ...jest.requireActual('../utils'),
+  isAnUnsupportedGifPngImage: jest.fn().mockReturnValue(false)
+}));
 let props;
 
 const subject = () => render( /*#__PURE__*/React.createElement(Upload, props));
@@ -65,12 +72,15 @@ describe('Upload()', () => {
   });
   describe('onSubmit()', () => {
     const dispatch = jest.fn();
+    const onChange = jest.fn();
     const theFile = {
       preview: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAEBCAMAAAD1kWivAAADAFBMVEWysrL5nCYYGBj7/+rceo3w1tD+yAfwFTPrIj36',
-      name: 'Test Image.png'
+      name: 'Test Image.png',
+      type: 'image/png',
+      size: 100000
     };
 
-    const onSubmitCall = () => onSubmit(dispatch)({}, {}, {}, {
+    const onSubmitCall = () => onSubmit(dispatch, onChange)({}, {}, {}, {
       theFile
     });
 
@@ -99,5 +109,78 @@ describe('Upload()', () => {
         payload: true
       });
     });
+    describe('with an unsupported image', () => {
+      beforeAll(() => {
+        isAnUnsupportedGifPngImage.mockReturnValue(true);
+      });
+      afterAll(() => {
+        isAnUnsupportedGifPngImage.mockReturnValue(false);
+      });
+      it('closes the collection', () => {
+        onSubmitCall();
+        expect(dispatch).toHaveBeenCalledWith({ ...actions.SET_IMAGE_COLLECTION_OPEN,
+          payload: false
+        });
+      });
+      it('sets the error', () => {
+        onSubmitCall();
+        expect(onChange).toHaveBeenCalledWith({
+          type: 'SetError',
+          payload: 'GIF/PNG format images larger than 250 KB are not currently supported.'
+        });
+      });
+    });
+  });
+  describe('onSubmit() with an image to be compressed', () => {
+    const dispatch = jest.fn();
+    const theFile = {
+      preview: 'data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAEBCAMAAAD1kWivAAADAFBMVEWysrL5nCYYGBj7/+rceo3w1tD+yAfwFTPrIj36',
+      name: 'Test Image.jpeg',
+      type: 'image/jpeg',
+      size: 600000
+    };
+
+    const onSubmitCall = () => onSubmit(dispatch)({}, {}, {}, {
+      theFile
+    });
+
+    const flushPromises = () => new Promise(setTimeout);
+
+    afterEach(() => jest.clearAllMocks());
+    it('sets the compression status', async () => {
+      onSubmitCall();
+      await flushPromises();
+      expect(dispatch).toHaveBeenCalledWith({ ...actions.SET_COMPRESSION_STATUS,
+        payload: true
+      });
+    });
+    it('sets the selected image', async () => {
+      onSubmitCall();
+      await flushPromises();
+      expect(dispatch).toHaveBeenCalledWith({ ...actions.SET_IMAGE,
+        payload: 'data:image/jpeg;base64,abcdefghijk=='
+      });
+    });
+    it('sets the selected image name', async () => {
+      onSubmitCall();
+      await flushPromises();
+      expect(dispatch).toHaveBeenCalledWith({ ...actions.SET_IMAGE_NAME,
+        payload: 'Test Image.jpeg'
+      });
+    });
+    it('closes the collection', async () => {
+      onSubmitCall();
+      await flushPromises();
+      expect(dispatch).toHaveBeenCalledWith({ ...actions.SET_IMAGE_COLLECTION_OPEN,
+        payload: false
+      });
+    });
+    it('opens image cropper', async () => {
+      onSubmitCall();
+      await flushPromises();
+      expect(dispatch).toHaveBeenCalledWith({ ...actions.SET_CROPPER_OPEN,
+        payload: true
+      });
+    });
   });
 });

package/lib/translated/en/modules/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/__tests__/compressionUtils.test.js

@@ -0,0 +1,114 @@
+/*
+ * Copyright (C) 2022 - present Instructure, Inc.
+ *
+ * This file is part of Canvas.
+ *
+ * Canvas is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License as published by the Free
+ * Software Foundation, version 3 of the License.
+ *
+ * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU Affero General Public License along
+ * with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+import { shouldCompressImage, compressImage } from '../compressionUtils';
+jest.spyOn(global, 'FileReader').mockImplementation(function () {
+  this.readAsDataURL = () => {
+    this.result = 'data:image/jpeg;base64,SGVsbG8sIFdvcmxkIQ==';
+    this.onloadend();
+  };
+});
+global.Image = class {
+  constructor() {
+    setTimeout(() => {
+      this.onload();
+    }, 100);
+  }
+
+};
+describe('shouldCompressImage()', () => {
+  describe('mime types', () => {
+    it('accepts jpeg images', () => {
+      expect(shouldCompressImage({
+        type: 'image/jpeg',
+        size: 600000
+      })).toBe(true);
+    });
+    it('accepts webp images', () => {
+      expect(shouldCompressImage({
+        type: 'image/webp',
+        size: 600000
+      })).toBe(true);
+    });
+    it('accepts bmp images', () => {
+      expect(shouldCompressImage({
+        type: 'image/bmp',
+        size: 600000
+      })).toBe(true);
+    });
+    it('accepts tiff images', () => {
+      expect(shouldCompressImage({
+        type: 'image/tiff',
+        size: 600000
+      })).toBe(true);
+    });
+    it("doesn't accept gif images", () => {
+      expect(shouldCompressImage({
+        type: 'image/gif',
+        size: 600000
+      })).toBe(false);
+    });
+    it("doesn't accept png images", () => {
+      expect(shouldCompressImage({
+        type: 'image/png',
+        size: 600000
+      })).toBe(false);
+    });
+    it("doesn't accept svg images", () => {
+      expect(shouldCompressImage({
+        type: 'image/svg+xml',
+        size: 600000
+      })).toBe(false);
+    });
+  });
+  describe('size', () => {
+    it('has greater size', () => {
+      expect(shouldCompressImage({
+        type: 'image/jpeg',
+        size: 600000
+      })).toBe(true);
+    });
+    it('has lower size', () => {
+      expect(shouldCompressImage({
+        type: 'image/jpeg',
+        size: 400000
+      })).toBe(false);
+    });
+  });
+});
+describe('compressImage()', () => {
+  beforeAll(() => {
+    const createElement = document.createElement.bind(document);
+
+    document.createElement = tagName => {
+      if (tagName === 'canvas') {
+        return {
+          getContext: () => ({
+            drawImage: jest.fn()
+          }),
+          toBlob: fn => fn('data:image/jpeg;base64,xxxxxxx==')
+        };
+      }
+
+      return createElement(tagName);
+    };
+  });
+  it('returns compressed blob image', async () => {
+    const result = await compressImage('data:image/jpeg;base64,abcdefhijk==');
+    expect(result).toEqual('data:image/jpeg;base64,SGVsbG8sIFdvcmxkIQ==');
+  });
+});