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

package/es/rce/plugins/instructure_equation/plugin.js

@@ -1,5 +1,3 @@
-var _ENV, _ENV$FEATURES;
-
 /*
  * Copyright (C) 2018 - present Instructure, Inc.
  *
@@ -21,103 +19,62 @@ import htmlEscape from 'escape-html';
 import formatMessage from '../../../format-message';
 import clickCallback, { oldClickCallback } from './clickCallback';
 import { IconEquationLine } from '@instructure/ui-icons/es/svg';
+import RCEGlobals from '../../RCEGlobals';
 
 function isEquationImage(node) {
   return node.tagName === 'IMG' && node.classList.contains('equation_image') || node.classList.contains('math_equation_latex');
 }
 
-if ((_ENV = ENV) !== null && _ENV !== void 0 && (_ENV$FEATURES = _ENV.FEATURES) !== null && _ENV$FEATURES !== void 0 && _ENV$FEATURES.new_equation_editor) {
-  tinymce.create('tinymce.plugins.InstructureEquation', {
-    init(ed) {
-      ed.ui.registry.addIcon('equation', IconEquationLine.src);
-      ed.addCommand('instructureEquation', clickCallback.bind(this, ed, document));
-      ed.ui.registry.addMenuItem('instructure_equation', {
-        text: formatMessage('Equation'),
-        icon: 'equation',
-        onAction: () => ed.execCommand('instructureEquation')
-      });
-      ed.ui.registry.addToggleButton('instructure_equation', {
-        tooltip: htmlEscape(formatMessage({
-          default: 'Insert Math Equation',
-          description: 'Title for RCE button to insert a math equation'
-        })),
-        onAction: () => ed.execCommand('instructureEquation'),
-        icon: 'equation',
-
-        onSetup(buttonApi) {
-          const toggleActive = eventApi => {
-            buttonApi.setActive(isEquationImage(eventApi.element));
-          };
+tinymce.create('tinymce.plugins.InstructureEquation', {
+  init(ed) {
+    var _RCEGlobals$getFeatur;
 
-          ed.on('NodeChange', toggleActive);
-          return () => ed.off('NodeChange', toggleActive);
-        }
+    ed.ui.registry.addIcon('equation', IconEquationLine.src);
 
-      });
-      ed.ui.registry.addButton('instructure-equation-options', {
-        onAction() {
-          ed.execCommand('instructureEquation');
-        },
-
-        text: formatMessage('Edit Equation')
-      });
-      ed.ui.registry.addContextToolbar('instructure-equation-toolbar', {
-        items: 'instructure-equation-options',
-        position: 'node',
-        predicate: isEquationImage,
-        scope: 'node'
-      });
+    if ((_RCEGlobals$getFeatur = RCEGlobals.getFeatures()) !== null && _RCEGlobals$getFeatur !== void 0 && _RCEGlobals$getFeatur.new_equation_editor) {
+      ed.addCommand('instructureEquation', clickCallback.bind(this, ed, document));
+    } else {
+      ed.addCommand('instructureEquation', oldClickCallback.bind(this, ed, document));
     }
 
-  }); // Register plugin
-
-  tinymce.PluginManager.add('instructure_equation', tinymce.plugins.InstructureEquation);
-} else {
-  tinymce.create('tinymce.plugins.InstructureEquation', {
-    init(ed) {
-      ed.ui.registry.addIcon('equation', IconEquationLine.src);
-      ed.addCommand('instructureEquation', oldClickCallback.bind(this, ed, document));
-      ed.ui.registry.addMenuItem('instructure_equation', {
-        text: formatMessage('Equation'),
-        icon: 'equation',
-        onAction: () => ed.execCommand('instructureEquation')
-      });
-      ed.ui.registry.addToggleButton('instructure_equation', {
-        tooltip: htmlEscape(formatMessage({
-          default: 'Insert Math Equation',
-          description: 'Title for RCE button to insert a math equation'
-        })),
-        onAction: () => ed.execCommand('instructureEquation'),
-        icon: 'equation',
+    ed.ui.registry.addMenuItem('instructure_equation', {
+      text: formatMessage('Equation'),
+      icon: 'equation',
+      onAction: () => ed.execCommand('instructureEquation')
+    });
+    ed.ui.registry.addToggleButton('instructure_equation', {
+      tooltip: htmlEscape(formatMessage({
+        default: 'Insert Math Equation',
+        description: 'Title for RCE button to insert a math equation'
+      })),
+      onAction: () => ed.execCommand('instructureEquation'),
+      icon: 'equation',
 
-        onSetup(buttonApi) {
-          const toggleActive = eventApi => {
-            buttonApi.setActive(isEquationImage(eventApi.element));
-          };
+      onSetup(buttonApi) {
+        const toggleActive = eventApi => {
+          buttonApi.setActive(isEquationImage(eventApi.element));
+        };
 
-          ed.on('NodeChange', toggleActive);
-          return () => ed.off('NodeChange', toggleActive);
-        }
+        ed.on('NodeChange', toggleActive);
+        return () => ed.off('NodeChange', toggleActive);
+      }
 
-      });
-      ed.ui.registry.addButton('instructure-equation-options', {
-        onAction
-        /* buttonApi */
-        () {
-          ed.execCommand('instructureEquation');
-        },
+    });
+    ed.ui.registry.addButton('instructure-equation-options', {
+      onAction() {
+        ed.execCommand('instructureEquation');
+      },
 
-        text: formatMessage('Edit Equation')
-      });
-      ed.ui.registry.addContextToolbar('instructure-equation-toolbar', {
-        items: 'instructure-equation-options',
-        position: 'node',
-        predicate: isEquationImage,
-        scope: 'node'
-      });
-    }
+      text: formatMessage('Edit Equation')
+    });
+    ed.ui.registry.addContextToolbar('instructure-equation-toolbar', {
+      items: 'instructure-equation-options',
+      position: 'node',
+      predicate: isEquationImage,
+      scope: 'node'
+    });
+  }
 
-  }); // Register plugin
+}); // Register plugin
 
-  tinymce.PluginManager.add('instructure_equation', tinymce.plugins.InstructureEquation);
-}
+tinymce.PluginManager.add('instructure_equation', tinymce.plugins.InstructureEquation);

package/es/rce/plugins/instructure_external_tools/components/LtiToolsModal/ExpandoText.js

@@ -44,7 +44,7 @@ export default function ExpandoText(props) {
     padding: "none none none xx-small",
     "aria-expanded": descExpanded,
     borderRadius: "medium",
-    focused: focused,
+    withFocusOutline: focused,
     onClick: () => {
       setDescExpanded(!descExpanded);
     },

package/es/rce/plugins/instructure_external_tools/components/LtiToolsModal/LtiTool.js

@@ -32,7 +32,7 @@ export default function LtiTool(props) {
   } = props;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
     as: "span",
-    focused: focused,
+    withFocusOutline: focused,
     className: css(styles.appButton),
     padding: "xxx-small xxx-small xx-small",
     borderRadius: "medium",

package/es/rce/plugins/instructure_external_tools/components/LtiToolsModal/index.js

@@ -69,8 +69,9 @@ export function LtiToolsModal(props) {
   }, /*#__PURE__*/React.createElement(CloseButton, {
     placement: "end",
     offset: "medium",
-    onClick: props.onDismiss
-  }, formatMessage('Close')), /*#__PURE__*/React.createElement(Heading, {
+    onClick: props.onDismiss,
+    screenReaderLabel: formatMessage('Close')
+  }), /*#__PURE__*/React.createElement(Heading, {
     margin: "small"
   }, formatMessage('All Apps')), /*#__PURE__*/React.createElement(View, {
     as: "div",
@@ -111,7 +112,7 @@ export function LtiToolsModal(props) {
 
   function renderTools(ltiButtons) {
     return /*#__PURE__*/React.createElement(List, {
-      variant: "unstyled"
+      isUnstyled: true
     }, ltiButtons.sort((a, b) => a.title.localeCompare(b.title)).map(b => {
       return /*#__PURE__*/React.createElement(List.Item, {
         key: b.id

package/es/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/Header.js

@@ -22,7 +22,7 @@ import formatMessage from '../../../../../format-message';
 import { TextArea } from '@instructure/ui-text-area';
 import { Tooltip } from '@instructure/ui-tooltip';
 import { View } from '@instructure/ui-view';
-import { Button } from '@instructure/ui-buttons';
+import { IconButton } from '@instructure/ui-buttons';
 import { Checkbox } from '@instructure/ui-checkbox';
 import { IconQuestionLine } from '@instructure/ui-icons';
 import { decode } from '../../svg/utils';
@@ -65,15 +65,17 @@ export const Header = _ref => {
   }, /*#__PURE__*/React.createElement(Tooltip, {
     on: ['hover', 'focus'],
     placement: "top",
-    tip: /*#__PURE__*/React.createElement(View, {
+    renderTip: /*#__PURE__*/React.createElement(View, {
       display: "block",
       id: "alt-text-label-tooltip",
       maxWidth: "14rem"
     }, tooltipText)
-  }, /*#__PURE__*/React.createElement(Button, {
-    icon: IconQuestionLine,
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    renderIcon: IconQuestionLine,
+    withBackground: false,
+    withBorder: false,
     size: "small",
-    variant: "icon"
+    screenReaderLabel: formatMessage('Toggle tooltip')
   }))));
   return /*#__PURE__*/React.createElement(Flex, {
     direction: "column",

package/es/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/Modal.js

@@ -21,6 +21,8 @@ import { Modal } from '@instructure/ui-modal';
 import { Button, CloseButton } from '@instructure/ui-buttons';
 import { Flex } from '@instructure/ui-flex';
 import { Heading } from '@instructure/ui-heading';
+import { Alert } from '@instructure/ui-alerts';
+import { Spinner } from '@instructure/ui-spinner';
 import formatMessage from '../../../../../../format-message';
 import { cropperSettingsReducer, actions, defaultState } from '../../../reducers/imageCropper';
 import { Preview } from './Preview';
@@ -33,13 +35,58 @@ const handleSubmit = (onSubmit, settings) => createCroppedImageSvg(settings).the
   type: 'image/svg+xml'
 }))).then(base64Image => onSubmit(settings, base64Image));
 
+const renderBody = (settings, dispatch, message, loading) => {
+  if (loading) {
+    return /*#__PURE__*/React.createElement(Flex, {
+      justifyItems: "center",
+      margin: ""
+    }, /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(Spinner, {
+      margin: "small",
+      renderTitle: formatMessage('Loading...'),
+      size: "large"
+    })));
+  }
+
+  return /*#__PURE__*/React.createElement(Flex, {
+    direction: "column",
+    margin: "none"
+  }, message && /*#__PURE__*/React.createElement(Flex.Item, {
+    "data-testid": "alert-message"
+  }, /*#__PURE__*/React.createElement(Alert, {
+    variant: "info",
+    renderCloseButtonLabel: "Close",
+    margin: "small",
+    timeout: 10000
+  }, message)), /*#__PURE__*/React.createElement(Flex.Item, {
+    margin: "0 0 small 0"
+  }, /*#__PURE__*/React.createElement(Controls, {
+    settings: settings,
+    dispatch: dispatch
+  })), /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(Preview, {
+    settings: settings,
+    dispatch: dispatch
+  })));
+};
+
+const renderFooter = (settings, onClose) => {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+    onClick: onClose,
+    margin: "0 x-small 0 0"
+  }, formatMessage('Cancel')), /*#__PURE__*/React.createElement(Button, {
+    color: "primary",
+    type: "submit"
+  }, formatMessage('Save')));
+};
+
 export const ImageCropperModal = _ref => {
   let {
     open,
     onClose,
     onSubmit,
     image,
-    cropSettings
+    message,
+    cropSettings,
+    loading
   } = _ref;
   const [settings, dispatch] = useReducer(cropperSettingsReducer, defaultState);
   useEffect(() => {
@@ -55,9 +102,16 @@ export const ImageCropperModal = _ref => {
     });
   }, [cropSettings]);
   return /*#__PURE__*/React.createElement(Modal, {
+    "data-mce-component": true,
+    as: "form",
+    label: formatMessage('Crop Image'),
     size: "large",
     open: open,
     onDismiss: onClose,
+    onSubmit: e => {
+      e.preventDefault();
+      handleSubmit(onSubmit, settings).then(onClose).catch(onClose);
+    },
     shouldCloseOnDocumentClick: false
   }, /*#__PURE__*/React.createElement(Modal.Header, {
     id: "imageCropperHeader"
@@ -65,42 +119,25 @@ export const ImageCropperModal = _ref => {
     placement: "end",
     offset: "small",
     onClick: onClose,
-    screenReaderLabel: "Close"
-  }), /*#__PURE__*/React.createElement(Heading, null, formatMessage('Crop Image'))), /*#__PURE__*/React.createElement(Modal.Body, null, /*#__PURE__*/React.createElement(Flex, {
-    direction: "column",
-    margin: "none"
-  }, /*#__PURE__*/React.createElement(Flex.Item, {
-    margin: "0 0 small 0"
-  }, /*#__PURE__*/React.createElement(Controls, {
-    settings: settings,
-    dispatch: dispatch
-  })), /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(Preview, {
-    settings: settings,
-    dispatch: dispatch
-  })))), /*#__PURE__*/React.createElement(Modal.Footer, {
+    screenReaderLabel: formatMessage('Close')
+  }), /*#__PURE__*/React.createElement(Heading, null, formatMessage('Crop Image'))), /*#__PURE__*/React.createElement(Modal.Body, null, renderBody(settings, dispatch, message, loading)), !loading && /*#__PURE__*/React.createElement(Modal.Footer, {
     id: "imageCropperFooter"
-  }, /*#__PURE__*/React.createElement(Button, {
-    onClick: onClose,
-    margin: "0 x-small 0 0"
-  }, formatMessage('Cancel')), /*#__PURE__*/React.createElement(Button, {
-    color: "primary",
-    type: "submit",
-    onClick: e => {
-      e.preventDefault();
-      handleSubmit(onSubmit, settings).then(onClose).catch(onClose);
-    }
-  }, formatMessage('Save'))));
+  }, renderFooter(settings, onClose)));
 };
 ImageCropperModal.propTypes = {
   image: PropTypes.string.isRequired,
   cropSettings: ImageCropperSettingsPropTypes,
+  message: PropTypes.string,
   open: PropTypes.bool,
   onClose: PropTypes.func,
-  onSubmit: PropTypes.func
+  onSubmit: PropTypes.func,
+  loading: PropTypes.bool
 };
 ImageCropperModal.defaultProps = {
   open: false,
   cropSettings: null,
+  message: null,
+  loading: false,
   onClose: () => {},
   onSubmit: () => {}
 };

package/es/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/Preview.js

@@ -15,14 +15,14 @@
  * 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 React, { useRef, useEffect } from 'react';
+import React, { useEffect, createRef } from 'react';
 import PropTypes from 'prop-types';
 import formatMessage from '../../../../../../format-message';
 import { ImageCropperSettingsPropTypes } from './propTypes';
 import { buildSvg } from './svg';
 import { PREVIEW_WIDTH, PREVIEW_HEIGHT, BACKGROUND_SQUARE_SIZE } from './constants';
 import { useMouseWheel } from './useMouseWheel';
-import { useArrowKeys } from './useArrowKeys';
+import { useKeyMouseEvents } from './useKeyMouseEvents';
 import checkerboardStyle from '../../../../shared/CheckerboardStyling';
 /**
  * Remove the node contents and append the svg element.
@@ -58,7 +58,9 @@ export const Preview = _ref2 => {
     settings,
     dispatch
   } = _ref2;
-  const shapeRef = useRef(null);
+  const previewRef = /*#__PURE__*/createRef();
+  const shapeRef = /*#__PURE__*/createRef();
+  const imgRef = /*#__PURE__*/createRef();
   const {
     image,
     shape,
@@ -68,7 +70,11 @@ export const Preview = _ref2 => {
     translateY
   } = settings;
   const [tempScaleRatio, onWheelCallback] = useMouseWheel(scaleRatio, dispatch);
-  const [tempTranslateX, tempTranslateY] = useArrowKeys(translateX, translateY, dispatch);
+  const [tempTranslateX, tempTranslateY, onMouseDownCallback] = useKeyMouseEvents(translateX, translateY, dispatch, imgRef);
+  useEffect(() => {
+    imgRef.current.ondragstart = () => false; // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, []);
   useEffect(() => {
     const svg = buildSvg(shape);
     replaceSvg(svg, shapeRef.current);
@@ -81,7 +87,11 @@ export const Preview = _ref2 => {
   });
   return /*#__PURE__*/React.createElement("div", {
     id: "cropper-preview",
+    ref: previewRef,
     style: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
       position: 'relative',
       width: `${PREVIEW_WIDTH}px`,
       height: `${PREVIEW_HEIGHT}px`,
@@ -93,25 +103,24 @@ export const Preview = _ref2 => {
     onWheel: onWheelCallback
   }, /*#__PURE__*/React.createElement("img", {
     src: image,
+    ref: imgRef,
     alt: formatMessage('Image to crop'),
     style: {
-      position: 'absolute',
-      top: 0,
-      left: 0,
       height: '100%',
-      width: '100%',
       objectFit: 'contain',
       textAlign: 'center',
       transform: transformValue
-    }
+    },
+    onMouseDown: e => onMouseDownCallback(e, previewRef.current)
   }), /*#__PURE__*/React.createElement("div", {
     id: "cropShapeContainer",
+    ref: shapeRef,
     style: {
       position: 'absolute',
       top: 0,
-      left: 0
-    },
-    ref: shapeRef
+      left: 0,
+      pointerEvents: 'none'
+    }
   }));
 };
 Preview.propTypes = {

package/es/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/controls/ResetControls.js

@@ -0,0 +1,38 @@
+/*
+ * 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 React from 'react';
+import PropTypes from 'prop-types';
+import { Flex } from '@instructure/ui-flex';
+import { Button } from '@instructure/ui-buttons';
+import { IconResetLine } from '@instructure/ui-icons';
+import formatMessage from '../../../../../../../format-message';
+export const ResetControls = _ref => {
+  let {
+    onReset
+  } = _ref;
+  return /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(Button, {
+    renderIcon: IconResetLine,
+    onClick: onReset
+  }, formatMessage('Reset')));
+};
+ResetControls.propTypes = {
+  onReset: PropTypes.func
+};
+ResetControls.defaultProps = {
+  onReset: () => {}
+};

package/es/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/controls/RotationControls.js

@@ -20,6 +20,7 @@ import PropTypes from 'prop-types';
 import { IconButton } from '@instructure/ui-buttons';
 import { IconRotateLeftLine, IconRotateRightLine } from '@instructure/ui-icons';
 import { Flex } from '@instructure/ui-flex';
+import { View } from '@instructure/ui-view';
 import { CustomNumberInput } from './CustomNumberInput';
 import { calculateRotation, getNearestRectAngle } from './utils';
 import { BUTTON_ROTATION_DEGREES } from '../constants';
@@ -54,7 +55,13 @@ export const RotationControls = _ref => {
 
   const rotateRightCallback = () => onChange(calculateRotation(getNearestRectAngle(rotation, false) + BUTTON_ROTATION_DEGREES));
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Flex.Item, {
+  return /*#__PURE__*/React.createElement(Flex.Item, {
+    margin: "0 medium 0 0",
+    title: formatMessage('Rotation'),
+    role: "toolbar",
+    tabindex: "-1"
+  }, /*#__PURE__*/React.createElement(View, {
+    display: "inline-block",
     margin: "0 small 0 0"
   }, /*#__PURE__*/React.createElement(CustomNumberInput, {
     value: rotation,
@@ -63,17 +70,14 @@ export const RotationControls = _ref => {
     processValueCallback: calculateRotation,
     placeholder: formatMessage('Rotation'),
     onChange: value => onChange(value)
-  })), /*#__PURE__*/React.createElement(Flex.Item, {
-    margin: "0 small 0 0"
-  }, /*#__PURE__*/React.createElement(IconButton, {
+  })), /*#__PURE__*/React.createElement(IconButton, {
+    margin: "0 small 0 0",
     onClick: rotateLeftCallback,
     screenReaderLabel: formatMessage('Rotate image -90 degrees')
-  }, /*#__PURE__*/React.createElement(IconRotateLeftLine, null))), /*#__PURE__*/React.createElement(Flex.Item, {
-    margin: "0 medium 0 0"
-  }, /*#__PURE__*/React.createElement(IconButton, {
+  }, /*#__PURE__*/React.createElement(IconRotateLeftLine, null)), /*#__PURE__*/React.createElement(IconButton, {
     onClick: rotateRightCallback,
     screenReaderLabel: formatMessage('Rotate image 90 degrees')
-  }, /*#__PURE__*/React.createElement(IconRotateRightLine, null))));
+  }, /*#__PURE__*/React.createElement(IconRotateRightLine, null)));
 };
 RotationControls.propTypes = {
   rotation: PropTypes.number,

package/es/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/controls/ShapeControls.js

@@ -16,10 +16,10 @@
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 import React from 'react';
+import PropTypes from 'prop-types';
 import { Flex } from '@instructure/ui-flex';
 import formatMessage from '../../../../../../../format-message';
 import { SimpleSelect } from '@instructure/ui-simple-select';
-import PropTypes from 'prop-types';
 import { ZoomControls } from './ZoomControls';
 import { Shape } from '../../../../svg/shape';
 const SHAPE_OPTIONS = [{

package/es/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/controls/ZoomControls.js

@@ -19,7 +19,9 @@ import React from 'react';
 import { IconButton } from '@instructure/ui-buttons';
 import { IconZoomInLine, IconZoomOutLine } from '@instructure/ui-icons';
 import { Flex } from '@instructure/ui-flex';
-import { calculateScaleRatio, calculateScalePercentage, round } from './utils';
+import { View } from '@instructure/ui-view';
+import { calculateScaleRatio, calculateScalePercentage } from './utils';
+import round from '../../../../utils/round';
 import { MAX_SCALE_RATIO, MIN_SCALE_RATIO, BUTTON_SCALE_STEP } from '../constants';
 import formatMessage from '../../../../../../../format-message';
 import PropTypes from 'prop-types';
@@ -73,7 +75,12 @@ export const ZoomControls = _ref => {
     onZoomChange(newScaleRatio);
   };
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Flex.Item, {
+  return /*#__PURE__*/React.createElement(Flex.Item, {
+    title: formatMessage('Zoom'),
+    role: "toolbar",
+    tabindex: "-1"
+  }, /*#__PURE__*/React.createElement(View, {
+    display: "inline-block",
     margin: "0 small 0 0"
   }, /*#__PURE__*/React.createElement(CustomNumberInput, {
     value: round(scaleRatio * 100),
@@ -82,17 +89,17 @@ export const ZoomControls = _ref => {
     processValueCallback: calculateScalePercentage,
     placeholder: formatMessage('Zoom'),
     onChange: value => onZoomChange(round(value / 100))
-  })), /*#__PURE__*/React.createElement(Flex.Item, {
-    margin: "0 small 0 0"
-  }, /*#__PURE__*/React.createElement(IconButton, {
+  })), /*#__PURE__*/React.createElement(IconButton, {
+    margin: "0 small 0 0",
     onClick: zoomOutCallback,
     interaction: scaleRatio > MIN_SCALE_RATIO ? 'enabled' : 'disabled',
     screenReaderLabel: formatMessage('Zoom out image')
-  }, /*#__PURE__*/React.createElement(IconZoomOutLine, null))), /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(IconButton, {
+  }, /*#__PURE__*/React.createElement(IconZoomOutLine, null)), /*#__PURE__*/React.createElement(IconButton, {
+    "data-testid": "zoom-in-button",
     onClick: zoomInCallback,
     interaction: scaleRatio < MAX_SCALE_RATIO ? 'enabled' : 'disabled',
     screenReaderLabel: formatMessage('Zoom in image')
-  }, /*#__PURE__*/React.createElement(IconZoomInLine, null))));
+  }, /*#__PURE__*/React.createElement(IconZoomInLine, null)));
 };
 ZoomControls.propTypes = {
   scaleRatio: PropTypes.number,

package/es/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/controls/index.js

@@ -21,6 +21,7 @@ import { actions } from '../../../../reducers/imageCropper';
 import { ZoomControls } from './ZoomControls';
 import { RotationControls } from './RotationControls';
 import { ShapeControls } from './ShapeControls';
+import { ResetControls } from './ResetControls';
 export const Controls = _ref => {
   let {
     settings,
@@ -30,7 +31,8 @@ export const Controls = _ref => {
     id: "imageCropperControls",
     direction: "row",
     margin: "x-small",
-    alignItems: "start"
+    alignItems: "start",
+    role: "group"
   }, /*#__PURE__*/React.createElement(ShapeControls, {
     shape: settings.shape,
     onChange: shape => dispatch({
@@ -49,5 +51,11 @@ export const Controls = _ref => {
       type: actions.SET_SCALE_RATIO,
       payload: scaleRatio
     })
+  }), /*#__PURE__*/React.createElement(Flex.Item, {
+    shouldGrow: true
+  }), /*#__PURE__*/React.createElement(ResetControls, {
+    onReset: () => dispatch({
+      type: actions.RESET_SETTINGS
+    })
   }));
 };

package/es/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/controls/utils.js

@@ -16,10 +16,7 @@
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 import { BUTTON_ROTATION_DEGREES, MAX_SCALE_RATIO, MIN_SCALE_RATIO } from '../constants';
-export const round = function (number) {
-  let digits = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
-  return parseFloat(number.toFixed(digits));
-};
+import round from '../../../../utils/round';
 export const calculateScaleRatio = scaleRatio => {
   let result = round(scaleRatio);
   result = result > MAX_SCALE_RATIO ? MAX_SCALE_RATIO : result;

package/es/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/imageCropUtils.js

@@ -15,7 +15,7 @@
  * 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 round from 'round';
+import round from '../../../utils/round';
 import { buildShapeMask } from './svg/shape';
 import { createSvgElement } from './svg/utils';
 import { PREVIEW_HEIGHT } from './constants';

package/es/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/svg/shape.js

@@ -15,7 +15,7 @@
  * 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 round from 'round';
+import round from '../../../../utils/round';
 import { SHAPE_CONTAINER_LENGTH } from '../constants';
 import { createSvgElement } from './utils';
 import { Shape } from '../../../../svg/shape';