@instructure/quiz-core 20.17.3-rc.0 → 20.17.3-rc.2

package/es/moderating/components/resources/ModerateTable/presenter.js

@@ -270,7 +270,8 @@ export var ModerateTable = (_dec = withStyle(generateStyle, generateComponentThe
         withBackground: false,
         withBorder: false,
         screenReaderLabel: this.scoreToggleScreenreaderMessage(),
-        onClick: this.handleScoreToggle
+        onClick: this.handleScoreToggle,
+        "data-automation": "moderation-table-score-toggle"
       }, _IconConfigureLine || (_IconConfigureLine = jsx(IconConfigureLine, null))));
     }
   }, {
@@ -321,8 +322,9 @@ export var ModerateTable = (_dec = withStyle(generateStyle, generateComponentThe
       return jsx("div", {
         css: this.props.styles.page
       }, jsx(ModerateTray, {
-        onClose: this.onCloseTray
-      }, !this.props.anonymousGrading && (_ResetQuiz || (_ResetQuiz = jsx(ResetQuiz, null))), this.props.children), this.renderContent());
+        onClose: this.onCloseTray,
+        onSave: this.props.onSaveTray
+      }, jsx(Flex.Item, null, !this.props.anonymousGrading && (_ResetQuiz || (_ResetQuiz = jsx(ResetQuiz, null)))), this.props.children), this.renderContent());
     }
   }]);
 }(Component), _ModerateTable.propTypes = {
@@ -336,6 +338,7 @@ export var ModerateTable = (_dec = withStyle(generateStyle, generateComponentThe
   onOpenTray: PropTypes.func,
   onResultsLinkClick: PropTypes.func,
   openTray: PropTypes.func.isRequired,
+  onSaveTray: PropTypes.func.isRequired,
   sessionTimeLimitInSeconds: PropTypes.number,
   hasSessionTimeLimit: PropTypes.bool,
   sendSessionTimeLimit: PropTypes.func,

package/es/moderating/components/resources/ModerateTableRow/presenter.js

@@ -2,7 +2,7 @@ import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _callSuper from "@babel/runtime/helpers/esm/callSuper";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
-var _dec, _class, _ModerateTableRow;
+var _dec, _class, _ModerateTableRow, _IconEditLine;
 /** @jsx jsx */
 /* eslint "array-callback-return": "warn" */
 import { Component } from 'react';
@@ -14,10 +14,9 @@ import { Text } from '@instructure/ui-text';
 import { Link } from '@instructure/ui-link';
 import { Avatar } from '@instructure/ui-avatar';
 import { View } from '@instructure/ui-view';
-import { Flex } from '@instructure/ui-flex';
 import { Table } from '@instructure/ui-table';
 import { IconEditLine, IconWarningLine } from '@instructure/ui-icons';
-import { Button, IconButton } from '@instructure/ui-buttons';
+import { IconButton } from '@instructure/ui-buttons';
 import { withStyle, jsx } from '@instructure/emotion';
 import t from '@instructure/quiz-i18n/es/format-message';
 import { withI18nSupport } from '@instructure/quiz-common';
@@ -43,26 +42,27 @@ export var ModerateTableRow = (_dec = withStyle(generateStyle, generateComponent
       _this.props.onModerateButtonClick(_this.props.rowData);
     };
     _this.onAccommodationsClick = function () {
+      if (!_this.props.onAccommodationsClick) return;
       _this.props.onAccommodationsClick(_this.props.rowData);
     };
     _this.generateAttemptLink = function (autogradefailed, message, quizSessionId, attemptNumber) {
       var iconTitle = t('Autograde error on attempt { attemptNumber }.', {
         attemptNumber: attemptNumber
       });
-      var link = autogradefailed ? jsx(Link, {
-        onClick: _this.onResultsLinkClick(quizSessionId),
+      var autoGradeFailedProps = {
         icon: jsx(IconWarningLine, {
           color: "warning",
           title: iconTitle
         }),
-        iconPlacement: "end"
-      }, message) : jsx(Link, {
-        onClick: _this.onResultsLinkClick(quizSessionId)
-      }, message);
+        iconPlacement: 'end'
+      };
       return jsx("div", {
         key: quizSessionId,
         css: _this.props.styles.tableDataItem
-      }, link);
+      }, jsx(Link, Object.assign({
+        onClick: _this.onResultsLinkClick(quizSessionId),
+        "data-automation": "sdk-moderation-attempts-results-link"
+      }, autogradefailed && autoGradeFailedProps), message));
     };
     _this.generateAttemptText = function (autogradefailed, message, quizSessionId, attemptNumber) {
       var iconTitle = t('Autograde error on attempt { attemptNumber }.', {
@@ -235,7 +235,8 @@ export var ModerateTableRow = (_dec = withStyle(generateStyle, generateComponent
           key: quizSessionId,
           css: _this6.props.styles.tableDataItem
         }, jsx(Link, {
-          onClick: onClick
+          onClick: onClick,
+          "data-automation": "sdk-moderation-moderate-session-log-link"
         }, message));
       });
     }
@@ -263,21 +264,9 @@ export var ModerateTableRow = (_dec = withStyle(generateStyle, generateComponent
 
         // Display the Accommodations and the button in a flex container with reverse order
         // so that the screen reader will read the accommodations first, and then the button
-        return jsx(Table.Cell, null, jsx(Flex, {
-          direction: "row-reverse",
-          justifyItems: "end"
-        }, jsx(Flex.Item, {
-          shouldShrink: true,
+        return jsx(Table.Cell, {
           "data-automation": "sdk-moderate-accommodations-text"
-        }, displayContent), jsx(Flex.Item, null, jsx(IconButton, {
-          margin: "0 x-small 0 0",
-          withBackground: false,
-          withBorder: false,
-          renderIcon: IconEditLine,
-          onClick: this.onAccommodationsClick,
-          "data-automation": "sdk-moderate-accommodations-edit",
-          screenReaderLabel: t('Edit student accommodations')
-        }))));
+        }, displayContent);
       }
     }
   }, {
@@ -286,14 +275,25 @@ export var ModerateTableRow = (_dec = withStyle(generateStyle, generateComponent
       if (this.props.shouldRenderModerateButton) {
         return jsx(Table.Cell, null, jsx("div", {
           css: this.props.styles.moderateButton
-        }, jsx(Button, {
-          size: "small",
+        }, jsx(IconButton, {
           onClick: this.onModerateButtonClick,
           ref: this.handleModerateRef,
-          "data-automation": "sdk-moderation-moderate-button"
-        }, t('Moderate'))));
+          "data-automation": "sdk-moderation-moderate-button",
+          screenReaderLabel: t('Moderate')
+        }, _IconEditLine || (_IconEditLine = jsx(IconEditLine, null)))));
       }
     }
+  }, {
+    key: "renderName",
+    value: function renderName(name, avatarName) {
+      return jsx(Link, {
+        onClick: this.onAccommodationsClick,
+        screenReaderLabel: t('Edit student accommodations'),
+        "data-automation": "sdk-moderate-accommodations-edit",
+        margin: "0 small",
+        css: avatarName
+      }, name);
+    }
   }, {
     key: "render",
     value: function render() {
@@ -312,9 +312,7 @@ export var ModerateTableRow = (_dec = withStyle(generateStyle, generateComponent
         name: name,
         src: avatarUrl,
         size: "small"
-      })), jsx("span", {
-        css: avatarName
-      }, name))), !this.props.anonymousGrading && jsx(Table.Cell, null, this.renderAttempts(quizSessions, maxAttempts)), !this.props.anonymousGrading && jsx(Table.Cell, null, this.renderScores(quizSessions)), !this.props.anonymousGrading && jsx(Table.Cell, null, this.renderTimes(quizSessions)), !this.props.anonymousGrading && jsx(Table.Cell, null, this.renderLogLinks(quizSessions)), !this.props.anonymousGrading && this.renderAccommodations(accommodations), this.renderModerate());
+      })), this.renderName(name, avatarName))), !this.props.anonymousGrading && jsx(Table.Cell, null, this.renderAttempts(quizSessions, maxAttempts)), !this.props.anonymousGrading && jsx(Table.Cell, null, this.renderScores(quizSessions)), !this.props.anonymousGrading && jsx(Table.Cell, null, this.renderTimes(quizSessions)), !this.props.anonymousGrading && jsx(Table.Cell, null, this.renderLogLinks(quizSessions)), !this.props.anonymousGrading && this.renderAccommodations(accommodations), this.renderModerate());
     }
   }]);
 }(withI18nSupport(Component)), _ModerateTableRow.propTypes = {

package/es/moderating/components/sidebar/ModerateTray/presenter.js

@@ -5,11 +5,13 @@ import _inherits from "@babel/runtime/helpers/esm/inherits";
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import t from '@instructure/quiz-i18n/es/format-message';
+import { Flex } from '@instructure/ui-flex';
 import { View } from '@instructure/ui-view';
 import { Tooltip } from '@instructure/ui-tooltip';
 import { Tray } from '@instructure/ui-tray';
-import { CloseButton } from '@instructure/ui-buttons';
+import { Button, CloseButton } from '@instructure/ui-buttons';
 import { TruncateText } from '@instructure/ui-truncate-text';
+import { Modal } from '@instructure/ui-modal';
 import { liveRegion } from '@instructure/quiz-common';
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';
 export var ModerateTray = /*#__PURE__*/function (_Component) {
@@ -38,6 +40,38 @@ export var ModerateTray = /*#__PURE__*/function (_Component) {
         isTruncated: false
       });
     };
+    _this.setCloseRef = function (el) {
+      return _this.closeRef = el;
+    };
+    _this.setTrayRef = function (el) {
+      return _this.trayRef = el;
+    };
+    _this.getTrayRef = function () {
+      return _this.trayRef;
+    };
+    _this.handleSave = function () {
+      _this.props.onSave();
+      _this.props.closeTray();
+    };
+    _this.renderTitleAndCloseButton = function () {
+      return /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Flex.Item, {
+        shouldGrow: true,
+        shouldShrink: true
+      }, _this.state.isTruncated ? /*#__PURE__*/React.createElement(Tooltip, {
+        placement: "start",
+        renderTip: _this.labelText(),
+        mountNode: _this.getTrayRef || null
+      }, function (_ref) {
+        var focused = _ref.focused;
+        return _this.renderName({
+          focused: focused
+        });
+      }) : _this.renderName()), /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(CloseButton, {
+        onClick: _this.props.closeTray,
+        elementRef: _this.setCloseRef,
+        screenReaderLabel: t('Close')
+      })));
+    };
     _this.renderChildren = function () {
       return React.Children.map(_this.props.children, function (child) {
         if (!child) return null;
@@ -48,14 +82,15 @@ export var ModerateTray = /*#__PURE__*/function (_Component) {
         });
       });
     };
-    _this.setCloseRef = function (el) {
-      return _this.closeRef = el;
-    };
-    _this.setTrayRef = function (el) {
-      return _this.trayRef = el;
-    };
-    _this.getTrayRef = function () {
-      return _this.trayRef;
+    _this.renderFooter = function () {
+      return /*#__PURE__*/React.createElement(Modal.Footer, null, /*#__PURE__*/React.createElement(Button, {
+        onClick: _this.props.closeTray,
+        margin: "0 x-small 0 0"
+      }, t('Cancel')), /*#__PURE__*/React.createElement(Button, {
+        color: "primary",
+        type: "submit",
+        onClick: _this.handleSave
+      }, t('Apply')));
     };
     return _this;
   }
@@ -95,7 +130,6 @@ export var ModerateTray = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this2 = this;
       return /*#__PURE__*/React.createElement(Tray, {
         label: this.labelText(),
         liveRegion: liveRegion,
@@ -106,25 +140,16 @@ export var ModerateTray = /*#__PURE__*/function (_Component) {
         placement: "end",
         shouldCloseOnDocumentClick: true,
         ref: this.setTrayRef
-      }, /*#__PURE__*/React.createElement(CloseButton, {
-        placement: "start",
-        offset: "x-small",
-        onClick: this.props.closeTray,
-        elementRef: this.setCloseRef,
-        screenReaderLabel: t('Close')
-      }), /*#__PURE__*/React.createElement(View, {
+      }, /*#__PURE__*/React.createElement(Flex, {
         as: "div",
-        padding: "medium"
-      }, this.state.isTruncated ? /*#__PURE__*/React.createElement(Tooltip, {
-        placement: "start",
-        renderTip: this.labelText(),
-        mountNode: this.getTrayRef || null
-      }, function (_ref) {
-        var focused = _ref.focused;
-        return _this2.renderName({
-          focused: focused
-        });
-      }) : this.renderName(), this.renderChildren()));
+        direction: "column",
+        height: "100vh"
+      }, /*#__PURE__*/React.createElement(Flex.Item, {
+        padding: "small medium"
+      }, this.renderTitleAndCloseButton()), /*#__PURE__*/React.createElement(Flex.Item, {
+        shouldGrow: true,
+        padding: "0 medium"
+      }, this.renderChildren()), /*#__PURE__*/React.createElement(Flex.Item, null, this.renderFooter())));
     }
   }]);
 }(Component);
@@ -133,6 +158,7 @@ ModerateTray.propTypes = {
   closeTray: PropTypes.func.isRequired,
   isOpen: PropTypes.bool.isRequired,
   onClose: PropTypes.func,
+  onSave: PropTypes.func.isRequired,
   participantName: PropTypes.string
 };
 ModerateTray.defaultProps = {

package/lib/moderating/components/resources/ModerateTable/presenter.js

@@ -277,7 +277,8 @@ var ModerateTable = exports.ModerateTable = (_dec = (0, _emotion.withStyle)(_sty
         withBackground: false,
         withBorder: false,
         screenReaderLabel: this.scoreToggleScreenreaderMessage(),
-        onClick: this.handleScoreToggle
+        onClick: this.handleScoreToggle,
+        "data-automation": "moderation-table-score-toggle"
       }, _IconConfigureLine || (_IconConfigureLine = (0, _emotion.jsx)(_uiIcons.IconConfigureLine, null))));
     }
   }, {
@@ -328,8 +329,9 @@ var ModerateTable = exports.ModerateTable = (_dec = (0, _emotion.withStyle)(_sty
       return (0, _emotion.jsx)("div", {
         css: this.props.styles.page
       }, (0, _emotion.jsx)(_ModerateTray.default, {
-        onClose: this.onCloseTray
-      }, !this.props.anonymousGrading && (_ResetQuiz || (_ResetQuiz = (0, _emotion.jsx)(_ResetQuiz2.default, null))), this.props.children), this.renderContent());
+        onClose: this.onCloseTray,
+        onSave: this.props.onSaveTray
+      }, (0, _emotion.jsx)(_uiFlex.Flex.Item, null, !this.props.anonymousGrading && (_ResetQuiz || (_ResetQuiz = (0, _emotion.jsx)(_ResetQuiz2.default, null)))), this.props.children), this.renderContent());
     }
   }]);
 }(_react.Component), _ModerateTable.propTypes = {
@@ -343,6 +345,7 @@ var ModerateTable = exports.ModerateTable = (_dec = (0, _emotion.withStyle)(_sty
   onOpenTray: _propTypes.default.func,
   onResultsLinkClick: _propTypes.default.func,
   openTray: _propTypes.default.func.isRequired,
+  onSaveTray: _propTypes.default.func.isRequired,
   sessionTimeLimitInSeconds: _propTypes.default.number,
   hasSessionTimeLimit: _propTypes.default.bool,
   sendSessionTimeLimit: _propTypes.default.func,

package/lib/moderating/components/resources/ModerateTableRow/presenter.js

@@ -18,7 +18,6 @@ var _uiText = require("@instructure/ui-text");
 var _uiLink = require("@instructure/ui-link");
 var _uiAvatar = require("@instructure/ui-avatar");
 var _uiView = require("@instructure/ui-view");
-var _uiFlex = require("@instructure/ui-flex");
 var _uiTable = require("@instructure/ui-table");
 var _uiIcons = require("@instructure/ui-icons");
 var _uiButtons = require("@instructure/ui-buttons");
@@ -28,7 +27,7 @@ var _quizCommon = require("@instructure/quiz-common");
 var _FormattedDuration = _interopRequireDefault(require("../../../../common/components/shared/FormattedDuration"));
 var _styles = _interopRequireDefault(require("./styles"));
 var _theme = _interopRequireDefault(require("./theme"));
-var _dec, _class, _ModerateTableRow;
+var _dec, _class, _ModerateTableRow, _IconEditLine;
 /** @jsx jsx */
 /* eslint "array-callback-return": "warn" */
 var DASHES = '---';
@@ -50,26 +49,27 @@ var ModerateTableRow = exports.ModerateTableRow = (_dec = (0, _emotion.withStyle
       _this.props.onModerateButtonClick(_this.props.rowData);
     };
     _this.onAccommodationsClick = function () {
+      if (!_this.props.onAccommodationsClick) return;
       _this.props.onAccommodationsClick(_this.props.rowData);
     };
     _this.generateAttemptLink = function (autogradefailed, message, quizSessionId, attemptNumber) {
       var iconTitle = (0, _formatMessage.default)('Autograde error on attempt { attemptNumber }.', {
         attemptNumber: attemptNumber
       });
-      var link = autogradefailed ? (0, _emotion.jsx)(_uiLink.Link, {
-        onClick: _this.onResultsLinkClick(quizSessionId),
+      var autoGradeFailedProps = {
         icon: (0, _emotion.jsx)(_uiIcons.IconWarningLine, {
           color: "warning",
           title: iconTitle
         }),
-        iconPlacement: "end"
-      }, message) : (0, _emotion.jsx)(_uiLink.Link, {
-        onClick: _this.onResultsLinkClick(quizSessionId)
-      }, message);
+        iconPlacement: 'end'
+      };
       return (0, _emotion.jsx)("div", {
         key: quizSessionId,
         css: _this.props.styles.tableDataItem
-      }, link);
+      }, (0, _emotion.jsx)(_uiLink.Link, Object.assign({
+        onClick: _this.onResultsLinkClick(quizSessionId),
+        "data-automation": "sdk-moderation-attempts-results-link"
+      }, autogradefailed && autoGradeFailedProps), message));
     };
     _this.generateAttemptText = function (autogradefailed, message, quizSessionId, attemptNumber) {
       var iconTitle = (0, _formatMessage.default)('Autograde error on attempt { attemptNumber }.', {
@@ -242,7 +242,8 @@ var ModerateTableRow = exports.ModerateTableRow = (_dec = (0, _emotion.withStyle
           key: quizSessionId,
           css: _this6.props.styles.tableDataItem
         }, (0, _emotion.jsx)(_uiLink.Link, {
-          onClick: onClick
+          onClick: onClick,
+          "data-automation": "sdk-moderation-moderate-session-log-link"
         }, message));
       });
     }
@@ -270,21 +271,9 @@ var ModerateTableRow = exports.ModerateTableRow = (_dec = (0, _emotion.withStyle
 
         // Display the Accommodations and the button in a flex container with reverse order
         // so that the screen reader will read the accommodations first, and then the button
-        return (0, _emotion.jsx)(_uiTable.Table.Cell, null, (0, _emotion.jsx)(_uiFlex.Flex, {
-          direction: "row-reverse",
-          justifyItems: "end"
-        }, (0, _emotion.jsx)(_uiFlex.Flex.Item, {
-          shouldShrink: true,
+        return (0, _emotion.jsx)(_uiTable.Table.Cell, {
           "data-automation": "sdk-moderate-accommodations-text"
-        }, displayContent), (0, _emotion.jsx)(_uiFlex.Flex.Item, null, (0, _emotion.jsx)(_uiButtons.IconButton, {
-          margin: "0 x-small 0 0",
-          withBackground: false,
-          withBorder: false,
-          renderIcon: _uiIcons.IconEditLine,
-          onClick: this.onAccommodationsClick,
-          "data-automation": "sdk-moderate-accommodations-edit",
-          screenReaderLabel: (0, _formatMessage.default)('Edit student accommodations')
-        }))));
+        }, displayContent);
       }
     }
   }, {
@@ -293,14 +282,25 @@ var ModerateTableRow = exports.ModerateTableRow = (_dec = (0, _emotion.withStyle
       if (this.props.shouldRenderModerateButton) {
         return (0, _emotion.jsx)(_uiTable.Table.Cell, null, (0, _emotion.jsx)("div", {
           css: this.props.styles.moderateButton
-        }, (0, _emotion.jsx)(_uiButtons.Button, {
-          size: "small",
+        }, (0, _emotion.jsx)(_uiButtons.IconButton, {
           onClick: this.onModerateButtonClick,
           ref: this.handleModerateRef,
-          "data-automation": "sdk-moderation-moderate-button"
-        }, (0, _formatMessage.default)('Moderate'))));
+          "data-automation": "sdk-moderation-moderate-button",
+          screenReaderLabel: (0, _formatMessage.default)('Moderate')
+        }, _IconEditLine || (_IconEditLine = (0, _emotion.jsx)(_uiIcons.IconEditLine, null)))));
       }
     }
+  }, {
+    key: "renderName",
+    value: function renderName(name, avatarName) {
+      return (0, _emotion.jsx)(_uiLink.Link, {
+        onClick: this.onAccommodationsClick,
+        screenReaderLabel: (0, _formatMessage.default)('Edit student accommodations'),
+        "data-automation": "sdk-moderate-accommodations-edit",
+        margin: "0 small",
+        css: avatarName
+      }, name);
+    }
   }, {
     key: "render",
     value: function render() {
@@ -319,9 +319,7 @@ var ModerateTableRow = exports.ModerateTableRow = (_dec = (0, _emotion.withStyle
         name: name,
         src: avatarUrl,
         size: "small"
-      })), (0, _emotion.jsx)("span", {
-        css: avatarName
-      }, name))), !this.props.anonymousGrading && (0, _emotion.jsx)(_uiTable.Table.Cell, null, this.renderAttempts(quizSessions, maxAttempts)), !this.props.anonymousGrading && (0, _emotion.jsx)(_uiTable.Table.Cell, null, this.renderScores(quizSessions)), !this.props.anonymousGrading && (0, _emotion.jsx)(_uiTable.Table.Cell, null, this.renderTimes(quizSessions)), !this.props.anonymousGrading && (0, _emotion.jsx)(_uiTable.Table.Cell, null, this.renderLogLinks(quizSessions)), !this.props.anonymousGrading && this.renderAccommodations(accommodations), this.renderModerate());
+      })), this.renderName(name, avatarName))), !this.props.anonymousGrading && (0, _emotion.jsx)(_uiTable.Table.Cell, null, this.renderAttempts(quizSessions, maxAttempts)), !this.props.anonymousGrading && (0, _emotion.jsx)(_uiTable.Table.Cell, null, this.renderScores(quizSessions)), !this.props.anonymousGrading && (0, _emotion.jsx)(_uiTable.Table.Cell, null, this.renderTimes(quizSessions)), !this.props.anonymousGrading && (0, _emotion.jsx)(_uiTable.Table.Cell, null, this.renderLogLinks(quizSessions)), !this.props.anonymousGrading && this.renderAccommodations(accommodations), this.renderModerate());
     }
   }]);
 }((0, _quizCommon.withI18nSupport)(_react.Component)), _ModerateTableRow.propTypes = {

package/lib/moderating/components/sidebar/ModerateTray/presenter.js

@@ -13,11 +13,13 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
+var _uiFlex = require("@instructure/ui-flex");
 var _uiView = require("@instructure/ui-view");
 var _uiTooltip = require("@instructure/ui-tooltip");
 var _uiTray = require("@instructure/ui-tray");
 var _uiButtons = require("@instructure/ui-buttons");
 var _uiTruncateText = require("@instructure/ui-truncate-text");
+var _uiModal = require("@instructure/ui-modal");
 var _quizCommon = require("@instructure/quiz-common");
 var _uiA11yContent = require("@instructure/ui-a11y-content");
 var ModerateTray = exports.ModerateTray = /*#__PURE__*/function (_Component) {
@@ -46,6 +48,38 @@ var ModerateTray = exports.ModerateTray = /*#__PURE__*/function (_Component) {
         isTruncated: false
       });
     };
+    _this.setCloseRef = function (el) {
+      return _this.closeRef = el;
+    };
+    _this.setTrayRef = function (el) {
+      return _this.trayRef = el;
+    };
+    _this.getTrayRef = function () {
+      return _this.trayRef;
+    };
+    _this.handleSave = function () {
+      _this.props.onSave();
+      _this.props.closeTray();
+    };
+    _this.renderTitleAndCloseButton = function () {
+      return /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, null, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+        shouldGrow: true,
+        shouldShrink: true
+      }, _this.state.isTruncated ? /*#__PURE__*/_react.default.createElement(_uiTooltip.Tooltip, {
+        placement: "start",
+        renderTip: _this.labelText(),
+        mountNode: _this.getTrayRef || null
+      }, function (_ref) {
+        var focused = _ref.focused;
+        return _this.renderName({
+          focused: focused
+        });
+      }) : _this.renderName()), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, null, /*#__PURE__*/_react.default.createElement(_uiButtons.CloseButton, {
+        onClick: _this.props.closeTray,
+        elementRef: _this.setCloseRef,
+        screenReaderLabel: (0, _formatMessage.default)('Close')
+      })));
+    };
     _this.renderChildren = function () {
       return _react.default.Children.map(_this.props.children, function (child) {
         if (!child) return null;
@@ -56,14 +90,15 @@ var ModerateTray = exports.ModerateTray = /*#__PURE__*/function (_Component) {
         });
       });
     };
-    _this.setCloseRef = function (el) {
-      return _this.closeRef = el;
-    };
-    _this.setTrayRef = function (el) {
-      return _this.trayRef = el;
-    };
-    _this.getTrayRef = function () {
-      return _this.trayRef;
+    _this.renderFooter = function () {
+      return /*#__PURE__*/_react.default.createElement(_uiModal.Modal.Footer, null, /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+        onClick: _this.props.closeTray,
+        margin: "0 x-small 0 0"
+      }, (0, _formatMessage.default)('Cancel')), /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+        color: "primary",
+        type: "submit",
+        onClick: _this.handleSave
+      }, (0, _formatMessage.default)('Apply')));
     };
     return _this;
   }
@@ -103,7 +138,6 @@ var ModerateTray = exports.ModerateTray = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this2 = this;
       return /*#__PURE__*/_react.default.createElement(_uiTray.Tray, {
         label: this.labelText(),
         liveRegion: _quizCommon.liveRegion,
@@ -114,25 +148,16 @@ var ModerateTray = exports.ModerateTray = /*#__PURE__*/function (_Component) {
         placement: "end",
         shouldCloseOnDocumentClick: true,
         ref: this.setTrayRef
-      }, /*#__PURE__*/_react.default.createElement(_uiButtons.CloseButton, {
-        placement: "start",
-        offset: "x-small",
-        onClick: this.props.closeTray,
-        elementRef: this.setCloseRef,
-        screenReaderLabel: (0, _formatMessage.default)('Close')
-      }), /*#__PURE__*/_react.default.createElement(_uiView.View, {
+      }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
         as: "div",
-        padding: "medium"
-      }, this.state.isTruncated ? /*#__PURE__*/_react.default.createElement(_uiTooltip.Tooltip, {
-        placement: "start",
-        renderTip: this.labelText(),
-        mountNode: this.getTrayRef || null
-      }, function (_ref) {
-        var focused = _ref.focused;
-        return _this2.renderName({
-          focused: focused
-        });
-      }) : this.renderName(), this.renderChildren()));
+        direction: "column",
+        height: "100vh"
+      }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+        padding: "small medium"
+      }, this.renderTitleAndCloseButton()), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+        shouldGrow: true,
+        padding: "0 medium"
+      }, this.renderChildren()), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, null, this.renderFooter())));
     }
   }]);
 }(_react.Component);
@@ -141,6 +166,7 @@ ModerateTray.propTypes = {
   closeTray: _propTypes.default.func.isRequired,
   isOpen: _propTypes.default.bool.isRequired,
   onClose: _propTypes.default.func,
+  onSave: _propTypes.default.func.isRequired,
   participantName: _propTypes.default.string
 };
 ModerateTray.defaultProps = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/quiz-core",
-  "version": "20.17.3-rc.0+5280f90a1",
+  "version": "20.17.3-rc.2+e41ad88aa",
   "license": "MIT",
   "description": "The Quiz React SDK by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
@@ -44,11 +44,11 @@
     "@instructure/emotion": "^8.51.0",
     "@instructure/grading-utils": "^1.0.0",
     "@instructure/outcomes-ui": "^3.2.2",
-    "@instructure/quiz-common": "20.17.3-rc.0+5280f90a1",
-    "@instructure/quiz-i18n": "20.17.3-rc.0+5280f90a1",
-    "@instructure/quiz-interactions": "20.17.3-rc.0+5280f90a1",
-    "@instructure/quiz-number-input": "20.17.3-rc.0+5280f90a1",
-    "@instructure/quiz-rce": "20.17.3-rc.0+5280f90a1",
+    "@instructure/quiz-common": "20.17.3-rc.2+e41ad88aa",
+    "@instructure/quiz-i18n": "20.17.3-rc.2+e41ad88aa",
+    "@instructure/quiz-interactions": "20.17.3-rc.2+e41ad88aa",
+    "@instructure/quiz-number-input": "20.17.3-rc.2+e41ad88aa",
+    "@instructure/quiz-rce": "20.17.3-rc.2+e41ad88aa",
     "@instructure/ui-a11y-content": "^8.51.0",
     "@instructure/ui-alerts": "^8.51.0",
     "@instructure/ui-avatar": "^8.51.0",
@@ -111,7 +111,7 @@
     "file-saver": "~2.0.5",
     "humps": "^2.0.0",
     "immutable": "^3.8.1",
-    "instructure-validations": "20.17.3-rc.0+5280f90a1",
+    "instructure-validations": "20.17.3-rc.2+e41ad88aa",
     "ipaddr.js": "^1.5.4",
     "isomorphic-fetch": "^2.2.0",
     "isuuid": "^0.1.0",
@@ -160,7 +160,7 @@
     "jquery": "^2.2.3",
     "karma-junit-reporter": "^2.0.1",
     "most-subject": "^5.3.0",
-    "quiz-presets": "20.17.3-rc.0+5280f90a1",
+    "quiz-presets": "20.17.3-rc.2+e41ad88aa",
     "react": "^16.8.6",
     "react-addons-test-utils": "^15.6.2",
     "react-dom": "^16.8.6",
@@ -176,5 +176,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "5280f90a17865d688d6b18ea7cac3789785cefa0"
+  "gitHead": "e41ad88aaef2af576f53ff0e212c6d793db74bf4"
 }