@instructure/canvas-rce 5.6.0 → 5.6.1

package/lib/translated/en_AU/modules/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/useKeyMouseEvents.js

@@ -0,0 +1,211 @@
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
+
+/*
+ * 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 { useEffect, useState, useRef, useCallback } from 'react';
+import { debounce } from '@instructure/debounce';
+import round from '../../../utils/round';
+import { KEY_EVENT_DELAY, KEY_EVENT_STEP } from './constants';
+import { actions } from '../../../reducers/imageCropper';
+const EVENT_EXCEPTION_ELEMENT_IDS = ['imageCropperHeader', 'imageCropperFooter', 'imageCropperControls'];
+
+function useKeysEvents(tempTranslateXRef, tempTranslateYRef, tempTranslateX, tempTranslateY, setTempTranslateX, setTempTranslateY, isMoving, setIsMoving) {
+  // Refs that manage the keydown acceleration
+  const direction = useRef(0);
+  const elapsedTime = useRef(0);
+
+  const onKeyDownCallback = event => {
+    var _context, _context2, _context3;
+
+    // 37 = Left, 38 = Up, 39 = Right, 40 = Down
+    const {
+      keyCode
+    } = event;
+
+    if (!_includesInstanceProperty(_context = [37, 38, 39, 40]).call(_context, keyCode)) {
+      return;
+    }
+
+    elapsedTime.current += 1;
+    let increment = 1;
+
+    if (keyCode === direction.current) {
+      increment = Math.floor(elapsedTime.current / KEY_EVENT_STEP) + 1;
+    } else {
+      direction.current = keyCode;
+      elapsedTime.current = 0;
+    }
+
+    event.preventDefault();
+
+    if (_includesInstanceProperty(_context2 = [37, 39]).call(_context2, keyCode)) {
+      const signedIncrement = keyCode === 37 ? -increment : increment;
+      const newTranslateX = round(tempTranslateXRef.current + signedIncrement);
+      setTempTranslateX(newTranslateX);
+    }
+
+    if (_includesInstanceProperty(_context3 = [38, 40]).call(_context3, keyCode)) {
+      const signedIncrement = keyCode === 38 ? -increment : increment;
+      const newTranslateY = round(tempTranslateYRef.current + signedIncrement);
+      setTempTranslateY(newTranslateY);
+    }
+  };
+
+  const stopMovementCallback = useCallback(debounce(() => {
+    direction.current = elapsedTime.current = 0;
+    setIsMoving(false);
+  }, KEY_EVENT_DELAY), []);
+  useEffect(() => {
+    const onKeyDownCallbackWrapper = event => {
+      // If the active element is in the modal header, footer or controls.
+      if (EVENT_EXCEPTION_ELEMENT_IDS.some(id => {
+        var _document$getElementB;
+
+        return (_document$getElementB = document.getElementById(id)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.contains(document.activeElement);
+      })) {
+        return;
+      }
+
+      onKeyDownCallback(event);
+    }; // Adds the event listener when component did mount
+
+
+    document.addEventListener('keydown', onKeyDownCallbackWrapper);
+    return () => {
+      // Removes the event listener when component will unmount
+      document.removeEventListener('keydown', onKeyDownCallbackWrapper);
+    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  useEffect(() => {
+    if (isMoving && direction.current !== 0) {
+      stopMovementCallback();
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [tempTranslateX, tempTranslateY]);
+}
+
+function useMouseEvents(tempTranslateX, tempTranslateY, setTempTranslateX, setTempTranslateY, setIsMoving) {
+  const initialPageX = useRef(0);
+  const initialPageY = useRef(0);
+  const mouseDown = useRef(false);
+  const imgElement = useRef(null);
+  const containerElement = useRef(null);
+
+  const stoppedMovingCallback = () => {
+    mouseDown.current = false;
+    initialPageX.current = 0;
+    initialPageY.current = 0;
+    imgElement.current.onmousemove = null;
+    imgElement.current.onmouseup = null;
+    imgElement.current = null;
+    containerElement.current.onmouseout = null;
+    containerElement.current = null;
+    setIsMoving(false);
+  };
+
+  const startedMovingCallback = (target, clientX, clientY, container) => {
+    mouseDown.current = true;
+    initialPageX.current = clientX;
+    initialPageY.current = clientY;
+    target.onmousemove = onMouseMoveCallback;
+    target.onmouseup = stoppedMovingCallback;
+    imgElement.current = target; // Should stop the movement when mouse leaves the preview
+
+    container.onmouseout = stoppedMovingCallback;
+    containerElement.current = container;
+    setIsMoving(true);
+  };
+
+  const onMouseMoveCallback = e => {
+    if (!mouseDown.current) {
+      return stoppedMovingCallback();
+    }
+
+    setTempTranslateX(tempTranslateX + e.clientX - initialPageX.current);
+    setTempTranslateY(tempTranslateY + e.clientY - initialPageY.current);
+  };
+
+  return (e, container) => startedMovingCallback(e.target, e.clientX, e.clientY, container);
+}
+
+export function useKeyMouseEvents(translateX, translateY, dispatch, imgRef) {
+  const [tempTranslateX, _setTempTranslateX] = useState(translateX);
+  const [tempTranslateY, _setTempTranslateY] = useState(translateY);
+  const [isMoving, setIsMoving] = useState(false); // These are used to get the current values when the callback is called from outside.
+
+  const tempTranslateXRef = useRef(tempTranslateX);
+  const tempTranslateYRef = useRef(tempTranslateY);
+
+  const setTempTranslateX = data => {
+    setIsMoving(true);
+    tempTranslateXRef.current = data;
+
+    _setTempTranslateX(data);
+  };
+
+  const setTempTranslateY = data => {
+    setIsMoving(true);
+    tempTranslateYRef.current = data;
+
+    _setTempTranslateY(data);
+  };
+
+  useKeysEvents(tempTranslateXRef, tempTranslateYRef, tempTranslateX, tempTranslateY, setTempTranslateX, setTempTranslateY, isMoving, setIsMoving);
+  const onMouseDownCallback = useMouseEvents(tempTranslateX, tempTranslateY, setTempTranslateX, setTempTranslateY, setIsMoving); // Updates the reducer state when user stops moving.
+
+  useEffect(() => {
+    if (isMoving) {
+      return;
+    }
+
+    if (tempTranslateX !== translateX) {
+      dispatch({
+        type: actions.SET_TRANSLATE_X,
+        payload: tempTranslateX
+      });
+    }
+
+    if (tempTranslateY !== translateY) {
+      dispatch({
+        type: actions.SET_TRANSLATE_Y,
+        payload: tempTranslateY
+      });
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [isMoving]); // Updates the component state when props changed.
+
+  useEffect(() => {
+    if (isMoving) {
+      return;
+    }
+
+    if (translateX !== tempTranslateX) {
+      tempTranslateXRef.current = translateX;
+
+      _setTempTranslateX(translateX);
+    }
+
+    if (translateY !== tempTranslateY) {
+      tempTranslateYRef.current = translateY;
+
+      _setTempTranslateY(translateY);
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [translateX, translateY]);
+  return [tempTranslateX, tempTranslateY, onMouseDownCallback];
+}

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

@@ -23,9 +23,22 @@ 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, dataUrl, dataBlob) => {
+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: ''
   });
@@ -56,6 +69,7 @@ const dispatchImage = async (dispatch, dataUrl, dataBlob) => {
 const Course = _ref => {
   let {
     dispatch,
+    onChange,
     onLoading,
     onLoaded
   } = _ref;
@@ -77,7 +91,7 @@ const Course = _ref => {
   useEffect(() => {
     // Don't clear the current image on re-render
     if (!dataUrl || !dataBlob) return;
-    dispatchImage(dispatch, dataUrl, dataBlob); // eslint-disable-next-line react-hooks/exhaustive-deps
+    dispatchImage(dispatch, onChange, dataUrl, dataBlob); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [dataUrl, dataBlob]); // Handle loading states
 
   useEffect(() => {
@@ -124,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_AU/modules/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/ImageOptions.js

@@ -139,7 +139,7 @@ ImageOptions.propTypes = {
     loading: PropTypes.bool.isRequired,
     cropperOpen: PropTypes.bool.isRequired,
     cropperSettings: ImageCropperSettingsPropTypes,
-    compressed: PropTypes.string
+    compressed: PropTypes.bool.isRequired
   }).isRequired,
   dispatch: PropTypes.func.isRequired,
   rcsConfig: PropTypes.object.isRequired

package/lib/translated/en_AU/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_AU/modules/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/Upload.js

@@ -16,10 +16,13 @@
  * 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';
 import { canCompressImage, compressImage, shouldCompressImage } from './compressionUtils';
+import { isAnUnsupportedGifPngImage, MAX_GIF_PNG_SIZE_BYTES } from './utils';
 
 function dispatchCompressedImage(theFile, dispatch) {
   dispatch({ ...actions.SET_IMAGE,
@@ -53,11 +56,21 @@ function dispatchCompressedImage(theFile, dispatch) {
   });
 }
 
-export const onSubmit = dispatch => (_editor, _accept, _selectedPanel, uploadData) => {
+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);
   }
@@ -79,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/*",
@@ -90,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_AU/modules/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/__tests__/Course.test.js

@@ -21,7 +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, canCompressImage } from '../compressionUtils';
+import { compressImage, shouldCompressImage } from '../compressionUtils';
+import { isAnUnsupportedGifPngImage } from '../utils';
 const storeProps = {
   images: {
     Course: {
@@ -90,6 +91,9 @@ jest.mock('../compressionUtils', () => ({
   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;
 
@@ -101,7 +105,8 @@ describe('Course()', () => {
   beforeEach(() => {
     useStoreProps.mockReturnValue(storeProps);
     props = {
-      dispatch: jest.fn()
+      dispatch: jest.fn(),
+      onChange: jest.fn()
     };
   });
   afterEach(() => jest.clearAllMocks());
@@ -174,6 +179,29 @@ 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;

package/lib/translated/en_AU/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_AU/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: {
@@ -33,6 +34,9 @@ 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));
@@ -68,6 +72,7 @@ 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',
@@ -75,7 +80,7 @@ describe('Upload()', () => {
       size: 100000
     };
 
-    const onSubmitCall = () => onSubmit(dispatch)({}, {}, {}, {
+    const onSubmitCall = () => onSubmit(dispatch, onChange)({}, {}, {}, {
       theFile
     });
 
@@ -104,6 +109,27 @@ 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();

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

@@ -0,0 +1,75 @@
+/*
+ * 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 { isAnUnsupportedGifPngImage } from '../utils';
+import { shouldCompressImage } from '../compressionUtils';
+describe('isAnUnsupportedGifPngImage()', () => {
+  it('returns true for a heavy GIF image', () => {
+    expect(isAnUnsupportedGifPngImage({
+      type: 'image/gif',
+      size: 300 * 1024
+    })).toBe(true);
+  });
+  it('returns true for a heavy PNG image', () => {
+    expect(isAnUnsupportedGifPngImage({
+      type: 'image/png',
+      size: 300 * 1024
+    })).toBe(true);
+  });
+  describe('returns false based on', () => {
+    describe('mime types', () => {
+      it('for jpeg images', () => {
+        expect(isAnUnsupportedGifPngImage({
+          type: 'image/jpeg',
+          size: 200 * 1024
+        })).toBe(false);
+      });
+      it('for webp images', () => {
+        expect(isAnUnsupportedGifPngImage({
+          type: 'image/webp',
+          size: 200 * 1024
+        })).toBe(false);
+      });
+      it('for bmp images', () => {
+        expect(isAnUnsupportedGifPngImage({
+          type: 'image/bmp',
+          size: 200 * 1024
+        })).toBe(false);
+      });
+      it('for tiff images', () => {
+        expect(isAnUnsupportedGifPngImage({
+          type: 'image/tiff',
+          size: 200 * 1024
+        })).toBe(false);
+      });
+    });
+    describe('size', () => {
+      it('for gif images with small size', () => {
+        expect(isAnUnsupportedGifPngImage({
+          type: 'image/gif',
+          size: 100 * 1024
+        })).toBe(false);
+      });
+      it('for png images with small size', () => {
+        expect(isAnUnsupportedGifPngImage({
+          type: 'image/png',
+          size: 100 * 1024
+        })).toBe(false);
+      });
+    });
+  });
+});

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

@@ -0,0 +1,29 @@
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
+
+/*
+ * 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/>.
+ */
+export const MAX_GIF_PNG_SIZE_BYTES = 250 * 1024;
+export const isAnUnsupportedGifPngImage = _ref => {
+  var _context;
+
+  let {
+    type,
+    size
+  } = _ref;
+  return _includesInstanceProperty(_context = ['image/gif', 'image/png']).call(_context, type) && size > MAX_GIF_PNG_SIZE_BYTES;
+};

package/lib/translated/en_AU/modules/rce/plugins/instructure_icon_maker/components/IconMakerTray.js

@@ -28,7 +28,7 @@ import { CreateIconMakerForm } from './CreateIconMakerForm';
 import { Footer } from './CreateIconMakerForm/Footer';
 import { buildStylesheet, buildSvg } from '../svg';
 import { statuses, useSvgSettings } from '../svg/settings';
-import { defaultState } from '../reducers/svgSettings';
+import { defaultState, actions } from '../reducers/svgSettings';
 import { ICON_MAKER_ATTRIBUTE, ICON_MAKER_DOWNLOAD_URL_ATTR } from '../svg/constants';
 import { FixedContentTray } from '../../shared/FixedContentTray';
 import { useStoreProps } from '../../shared/StoreContext';
@@ -40,25 +40,25 @@ import bridge from '../../../../bridge';
 const INVALID_MESSAGE = "One of the following styles must be added to save an icon: Icon Color, Outline Size, Icon Text, or Image";
 const UNSAVED_CHANGES_MESSAGE = "You have unsaved changes in the Icon Maker tray. Do you want to continue without saving these changes?";
 
-function renderHeader(title, settings, onKeyDown, isInvalid, onAlertDismissal, onClose) {
+function renderHeader(title, settings, onKeyDown, onAlertDismissal, onClose) {
   return /*#__PURE__*/React.createElement(View, {
     as: "div",
     background: "primary"
-  }, isInvalid && /*#__PURE__*/React.createElement(Alert, {
+  }, settings.error && /*#__PURE__*/React.createElement(Alert, {
     variant: "error",
     margin: "small",
     timeout: 10000,
     onDismiss: onAlertDismissal,
     renderCloseButtonLabel: "Close"
-  }, INVALID_MESSAGE), /*#__PURE__*/React.createElement(Flex, {
+  }, settings.error), /*#__PURE__*/React.createElement(Flex, {
     direction: "column"
   }, /*#__PURE__*/React.createElement(Flex.Item, {
     padding: "medium medium small"
   }, /*#__PURE__*/React.createElement(Flex, {
     direction: "row"
   }, /*#__PURE__*/React.createElement(Flex.Item, {
-    grow: true,
-    shrink: true
+    shouldGrow: true,
+    shouldShrink: true
   }, /*#__PURE__*/React.createElement(Heading, {
     as: "h2"
   }, title)), /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(CloseButton, {
@@ -133,7 +133,6 @@ export function IconMakerTray(_ref) {
   } = _ref;
   const nameRef = useRef();
   const applyRef = useRef();
-  const [isInvalid, setIsInvalid] = useState(false);
   const [isOpen, setIsOpen] = useState(true);
   const [replaceAll, setReplaceAll] = useState(false);
   const title = editing ? "Edit Icon" : "Create Icon";
@@ -177,7 +176,10 @@ export function IconMakerTray(_ref) {
   }, [settings.name]);
   useEffect(() => {
     if (validIcon(settings)) {
-      setIsInvalid(false);
+      dispatch({
+        type: actions.SET_ERROR,
+        payload: null
+      });
       setStatus(statuses.IDLE);
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
@@ -190,7 +192,10 @@ export function IconMakerTray(_ref) {
     setStatus(statuses.LOADING);
 
     if (!validIcon(settings)) {
-      setIsInvalid(true);
+      dispatch({
+        type: actions.SET_ERROR,
+        payload: INVALID_MESSAGE
+      });
       setStatus(statuses.ERROR);
       return;
     }
@@ -277,14 +282,17 @@ export function IconMakerTray(_ref) {
     replaceInitialSettings(); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [settingsStatus]);
 
-  const handleAlertDismissal = () => setIsInvalid(false);
+  const handleAlertDismissal = () => dispatch({
+    type: actions.SET_ERROR,
+    payload: null
+  });
 
   return /*#__PURE__*/React.createElement(FixedContentTray, {
     title: title,
     isOpen: isOpen,
     onDismiss: onClose,
     onUnmount: onUnmount,
-    renderHeader: () => renderHeader(title, settings, onKeyDown, isInvalid, handleAlertDismissal, onClose),
+    renderHeader: () => renderHeader(title, settings, onKeyDown, handleAlertDismissal, onClose),
     renderBody: () => renderBody(settings, dispatch, editor, editing, !replaceAll, nameRef, rcsConfig, isLoading),
     renderFooter: () => renderFooter(status, onClose, handleSubmit, editing, replaceAll, setReplaceAll, applyRef),
     bodyAs: "form",