@instructure/quiz-core 20.17.3-rc.1 → 20.17.3-rc.3

package/es/banks/components/Bank/presenter.js

@@ -339,7 +339,8 @@ export var Bank = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
         checked: this.state.sharedWithCourse,
         label: label,
         onChange: this.toggleCheckbox,
-        disabled: this.props.bank.canEdit() ? this.state.shareWithCourseCheckboxDisabled : true
+        disabled: this.props.bank.canEdit() ? this.state.shareWithCourseCheckboxDisabled : true,
+        "data-automation": "sdk-share-bank-with-course-checkbox"
       }));
     }
   }, {
@@ -371,7 +372,8 @@ export var Bank = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
         return jsx(Button, {
           onClick: this.addBankToQuiz,
           margin: "small none",
-          renderIcon: IconPlusLine
+          renderIcon: IconPlusLine,
+          "data-automation": "sdk-add-bank-to-quiz-button"
         }, jsx(AccessibleContent, {
           alt: t('Add this bank to quiz')
         }, t('All / Random')));

package/es/banks/components/BankSearch/presenter.js

@@ -141,7 +141,8 @@ export var BankSearch = (_dec = withStyle(generateStyle, generateComponentTheme)
         type: "search",
         placeholder: t('Search'),
         onChange: this.updateSearch,
-        value: this.props.search.get('text', '') || ''
+        value: this.props.search.get('text', '') || '',
+        "data-automation": "sdk-bank-search-input"
       })), jsx(Flex.Item, null, jsx(Button, {
         onClick: toggleFilters,
         margin: "none none none small",

package/es/banks/components/Banks/presenter.js

@@ -285,7 +285,8 @@ export var Banks = (_dec = withStyle(generateStyle, generateComponentTheme), _de
         onChange: this.handleBanksParentChange,
         value: this.props.scopeType,
         renderLabel: t('Filter By'),
-        width: "13rem"
+        width: "13rem",
+        "data-automation": "sdk-banks-filter-select"
       }, scopeOptions.map(function (option) {
         return jsx(SimpleSelect.Option, {
           id: searchFiltersSelectOptionIdPrefix + option.slug,

package/es/banks/components/BanksList/presenter.js

@@ -174,6 +174,14 @@ export var BanksList = (_dec = withStyle(generateStyle, generateComponentTheme),
       }
       return bank.sharedCount;
     };
+    _this.handleTableRef = function (element) {
+      if (element) {
+        var simpleSelect = element.querySelector('[role="combobox"]');
+        if (simpleSelect) {
+          simpleSelect.setAttribute('data-automation', 'sdk-banks-sorting-select');
+        }
+      }
+    };
     _this.renderBankInfo = function (bank) {
       var navigateToBank = function navigateToBank(bankId) {
         return function () {
@@ -250,6 +258,7 @@ export var BanksList = (_dec = withStyle(generateStyle, generateComponentTheme),
         onClick: _this.openDuplicateBankModal(bank),
         name: "Duplicate",
         size: "small",
+        "data-automation": "sdk-duplicate-bank-button",
         renderIcon: IconCopyLine,
         withBackground: false,
         withBorder: false,
@@ -423,7 +432,8 @@ export var BanksList = (_dec = withStyle(generateStyle, generateComponentTheme),
       return jsx(Table, {
         margin: "small 0",
         caption: t('Banks'),
-        layout: this.props.isCompact ? 'stacked' : 'auto'
+        layout: this.props.isCompact ? 'stacked' : 'auto',
+        elementRef: this.handleTableRef
       }, jsx(Table.Head, {
         renderSortLabel: t('Sort By')
       }, jsx(Table.Row, null, this.renderTableSortHeader('name', t('Name')), this.renderTableSortHeader('updated_at', t('Updated')), jsx(Table.ColHeader, {

package/es/banks/components/SharingModal/RootAccountSharing.js

@@ -50,7 +50,8 @@ export var RootAccountSharing = (_dec = withStyle(generateStyle, generateCompone
         variant: "toggle",
         value: "accountPermission",
         checked: this.isSharedWithAccount(),
-        onChange: this.props.onShareChange
+        onChange: this.props.onShareChange,
+        "data-automation": "sdk-share-bank-with-institution-toggle"
       })), this.isSharedWithAccount() && /*#__PURE__*/React.createElement(Grid.Col, {
         width: "auto"
       }, /*#__PURE__*/React.createElement(SimpleSelect, {

package/es/building/components/resources/ItemFeedbackModal/presenter.js

@@ -48,7 +48,8 @@ export var ItemFeedbackModal = (_dec = withStyle(generateStyle, generateComponen
     value: function cancelButton() {
       return jsx(Button, {
         onClick: this.closeAction,
-        margin: XSMALL_SIDE_MARGIN
+        margin: XSMALL_SIDE_MARGIN,
+        "data-automation": "sdk-item-feedback-modal-cancel-button"
       }, t('Cancel'));
     }
   }, {
@@ -57,7 +58,8 @@ export var ItemFeedbackModal = (_dec = withStyle(generateStyle, generateComponen
       return jsx(Button, {
         color: "primary",
         onClick: this.continueAction,
-        margin: XSMALL_SIDE_MARGIN
+        margin: XSMALL_SIDE_MARGIN,
+        "data-automation": "sdk-item-feedback-modal-done-button"
       }, t('Done'));
     }
   }, {

package/es/building/components/resources/quiz/instructions/Instructions/presenter.js

@@ -158,7 +158,8 @@ export var QuizInstructions = (_dec = withStyle(generateStyle, generateComponent
         screenreaderText: t('Edit Instructions'),
         scrollKey: this.props.scrollKey,
         onClick: this.toggleEditing,
-        ref: this.setRef('editButton')
+        ref: this.setRef('editButton'),
+        "data-automation": "sdk-build-edit-instructions-button"
       }))));
     }
   }]);

package/es/common/components/Pin/presenter.js

@@ -36,7 +36,8 @@ export var Pin = /*#__PURE__*/function (_Component) {
         withBackground: false,
         withBorder: false,
         renderIcon: this.props.isPinned ? IconPinSolid : IconPinLine,
-        screenReaderLabel: message
+        screenReaderLabel: message,
+        "data-automation": "sdk-pin-question-button"
       });
     }
   }]);

package/es/common/components/layout/sidebar/Sidebar/index.js

@@ -104,9 +104,11 @@ export var Sidebar = (_dec = withStyle(generateStyle, generateComponentTheme), _
         onClick: this.scrollToTitle,
         renderIcon: _IconQuizTitleLine || (_IconQuizTitleLine = jsx(IconQuizTitleLine, {
           color: "primary"
-        }))
+        })),
+        "data-automation": "sidebar-title-button"
       }, jsx(ScreenReaderContent, null, t('Navigate to title'))), jsx(PresentationContent, null, jsx("span", {
         css: this.props.styles.sidebar.description,
+        "data-automation": "sidebar-title-text",
         onClick: this.scrollToTitle,
         tabIndex: "-1"
       }, this.props.title || t('Title'))));

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

@@ -322,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 = {
@@ -337,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/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/es/moderating/components/sidebar/ResetQuiz/presenter.js

@@ -63,7 +63,8 @@ export var ResetQuiz = /*#__PURE__*/function (_Component) {
         ref: this.reopenButtonRef,
         onClick: this.reopenQuizSession,
         disabled: !this.props.isComplete,
-        margin: "small none"
+        margin: "small none",
+        "data-automation": "sdk-reopen-quiz-button"
       }, t('Reopen')) : null);
     }
   }]);

package/lib/banks/components/Bank/presenter.js

@@ -347,7 +347,8 @@ var Bank = exports.Bank = (_dec = (0, _emotion.withStyle)(_styles.default, _them
         checked: this.state.sharedWithCourse,
         label: label,
         onChange: this.toggleCheckbox,
-        disabled: this.props.bank.canEdit() ? this.state.shareWithCourseCheckboxDisabled : true
+        disabled: this.props.bank.canEdit() ? this.state.shareWithCourseCheckboxDisabled : true,
+        "data-automation": "sdk-share-bank-with-course-checkbox"
       }));
     }
   }, {
@@ -379,7 +380,8 @@ var Bank = exports.Bank = (_dec = (0, _emotion.withStyle)(_styles.default, _them
         return (0, _emotion.jsx)(_uiButtons.Button, {
           onClick: this.addBankToQuiz,
           margin: "small none",
-          renderIcon: _uiIcons.IconPlusLine
+          renderIcon: _uiIcons.IconPlusLine,
+          "data-automation": "sdk-add-bank-to-quiz-button"
         }, (0, _emotion.jsx)(_uiA11yContent.AccessibleContent, {
           alt: (0, _formatMessage.default)('Add this bank to quiz')
         }, (0, _formatMessage.default)('All / Random')));

package/lib/banks/components/BankSearch/presenter.js

@@ -148,7 +148,8 @@ var BankSearch = exports.BankSearch = (_dec = (0, _emotion.withStyle)(_styles.de
         type: "search",
         placeholder: (0, _formatMessage.default)('Search'),
         onChange: this.updateSearch,
-        value: this.props.search.get('text', '') || ''
+        value: this.props.search.get('text', '') || '',
+        "data-automation": "sdk-bank-search-input"
       })), (0, _emotion.jsx)(_uiFlex.Flex.Item, null, (0, _emotion.jsx)(_uiButtons.Button, {
         onClick: toggleFilters,
         margin: "none none none small",

package/lib/banks/components/Banks/presenter.js

@@ -293,7 +293,8 @@ var Banks = exports.Banks = (_dec = (0, _emotion.withStyle)(_styles.default, _th
         onChange: this.handleBanksParentChange,
         value: this.props.scopeType,
         renderLabel: (0, _formatMessage.default)('Filter By'),
-        width: "13rem"
+        width: "13rem",
+        "data-automation": "sdk-banks-filter-select"
       }, scopeOptions.map(function (option) {
         return (0, _emotion.jsx)(_uiSimpleSelect.SimpleSelect.Option, {
           id: searchFiltersSelectOptionIdPrefix + option.slug,

package/lib/banks/components/BanksList/presenter.js

@@ -182,6 +182,14 @@ var BanksList = exports.BanksList = (_dec = (0, _emotion.withStyle)(_styles.defa
       }
       return bank.sharedCount;
     };
+    _this.handleTableRef = function (element) {
+      if (element) {
+        var simpleSelect = element.querySelector('[role="combobox"]');
+        if (simpleSelect) {
+          simpleSelect.setAttribute('data-automation', 'sdk-banks-sorting-select');
+        }
+      }
+    };
     _this.renderBankInfo = function (bank) {
       var navigateToBank = function navigateToBank(bankId) {
         return function () {
@@ -258,6 +266,7 @@ var BanksList = exports.BanksList = (_dec = (0, _emotion.withStyle)(_styles.defa
         onClick: _this.openDuplicateBankModal(bank),
         name: "Duplicate",
         size: "small",
+        "data-automation": "sdk-duplicate-bank-button",
         renderIcon: _uiIcons.IconCopyLine,
         withBackground: false,
         withBorder: false,
@@ -431,7 +440,8 @@ var BanksList = exports.BanksList = (_dec = (0, _emotion.withStyle)(_styles.defa
       return (0, _emotion.jsx)(_uiTable.Table, {
         margin: "small 0",
         caption: (0, _formatMessage.default)('Banks'),
-        layout: this.props.isCompact ? 'stacked' : 'auto'
+        layout: this.props.isCompact ? 'stacked' : 'auto',
+        elementRef: this.handleTableRef
       }, (0, _emotion.jsx)(_uiTable.Table.Head, {
         renderSortLabel: (0, _formatMessage.default)('Sort By')
       }, (0, _emotion.jsx)(_uiTable.Table.Row, null, this.renderTableSortHeader('name', (0, _formatMessage.default)('Name')), this.renderTableSortHeader('updated_at', (0, _formatMessage.default)('Updated')), (0, _emotion.jsx)(_uiTable.Table.ColHeader, {

package/lib/banks/components/SharingModal/RootAccountSharing.js

@@ -58,7 +58,8 @@ var RootAccountSharing = exports.RootAccountSharing = (_dec = (0, _emotion.withS
         variant: "toggle",
         value: "accountPermission",
         checked: this.isSharedWithAccount(),
-        onChange: this.props.onShareChange
+        onChange: this.props.onShareChange,
+        "data-automation": "sdk-share-bank-with-institution-toggle"
       })), this.isSharedWithAccount() && /*#__PURE__*/_react.default.createElement(_uiGrid.Grid.Col, {
         width: "auto"
       }, /*#__PURE__*/_react.default.createElement(_uiSimpleSelect.SimpleSelect, {

package/lib/building/components/resources/ItemFeedbackModal/presenter.js

@@ -55,7 +55,8 @@ var ItemFeedbackModal = exports.ItemFeedbackModal = (_dec = (0, _emotion.withSty
     value: function cancelButton() {
       return (0, _emotion.jsx)(_uiButtons.Button, {
         onClick: this.closeAction,
-        margin: _quizCommon.XSMALL_SIDE_MARGIN
+        margin: _quizCommon.XSMALL_SIDE_MARGIN,
+        "data-automation": "sdk-item-feedback-modal-cancel-button"
       }, (0, _formatMessage.default)('Cancel'));
     }
   }, {
@@ -64,7 +65,8 @@ var ItemFeedbackModal = exports.ItemFeedbackModal = (_dec = (0, _emotion.withSty
       return (0, _emotion.jsx)(_uiButtons.Button, {
         color: "primary",
         onClick: this.continueAction,
-        margin: _quizCommon.XSMALL_SIDE_MARGIN
+        margin: _quizCommon.XSMALL_SIDE_MARGIN,
+        "data-automation": "sdk-item-feedback-modal-done-button"
       }, (0, _formatMessage.default)('Done'));
     }
   }, {

package/lib/building/components/resources/quiz/instructions/Instructions/presenter.js

@@ -161,7 +161,8 @@ var QuizInstructions = exports.QuizInstructions = (_dec = (0, _emotion.withStyle
         screenreaderText: (0, _formatMessage.default)('Edit Instructions'),
         scrollKey: this.props.scrollKey,
         onClick: this.toggleEditing,
-        ref: this.setRef('editButton')
+        ref: this.setRef('editButton'),
+        "data-automation": "sdk-build-edit-instructions-button"
       }))));
     }
   }]);

package/lib/common/components/Pin/presenter.js

@@ -44,7 +44,8 @@ var Pin = exports.Pin = /*#__PURE__*/function (_Component) {
         withBackground: false,
         withBorder: false,
         renderIcon: this.props.isPinned ? _uiIcons.IconPinSolid : _uiIcons.IconPinLine,
-        screenReaderLabel: message
+        screenReaderLabel: message,
+        "data-automation": "sdk-pin-question-button"
       });
     }
   }]);

package/lib/common/components/layout/sidebar/Sidebar/index.js

@@ -111,9 +111,11 @@ var Sidebar = exports.Sidebar = (_dec = (0, _emotion.withStyle)(_styles.default,
         onClick: this.scrollToTitle,
         renderIcon: _IconQuizTitleLine || (_IconQuizTitleLine = (0, _emotion.jsx)(_uiIcons.IconQuizTitleLine, {
           color: "primary"
-        }))
+        })),
+        "data-automation": "sidebar-title-button"
       }, (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Navigate to title'))), (0, _emotion.jsx)(_uiA11yContent.PresentationContent, null, (0, _emotion.jsx)("span", {
         css: this.props.styles.sidebar.description,
+        "data-automation": "sidebar-title-text",
         onClick: this.scrollToTitle,
         tabIndex: "-1"
       }, this.props.title || (0, _formatMessage.default)('Title'))));

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

@@ -329,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 = {
@@ -344,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/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/lib/moderating/components/sidebar/ResetQuiz/presenter.js

@@ -71,7 +71,8 @@ var ResetQuiz = exports.ResetQuiz = /*#__PURE__*/function (_Component) {
         ref: this.reopenButtonRef,
         onClick: this.reopenQuizSession,
         disabled: !this.props.isComplete,
-        margin: "small none"
+        margin: "small none",
+        "data-automation": "sdk-reopen-quiz-button"
       }, (0, _formatMessage.default)('Reopen')) : null);
     }
   }]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/quiz-core",
-  "version": "20.17.3-rc.1+7c49355a8",
+  "version": "20.17.3-rc.3+9b710b879",
   "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.1+7c49355a8",
-    "@instructure/quiz-i18n": "20.17.3-rc.1+7c49355a8",
-    "@instructure/quiz-interactions": "20.17.3-rc.1+7c49355a8",
-    "@instructure/quiz-number-input": "20.17.3-rc.1+7c49355a8",
-    "@instructure/quiz-rce": "20.17.3-rc.1+7c49355a8",
+    "@instructure/quiz-common": "20.17.3-rc.3+9b710b879",
+    "@instructure/quiz-i18n": "20.17.3-rc.3+9b710b879",
+    "@instructure/quiz-interactions": "20.17.3-rc.3+9b710b879",
+    "@instructure/quiz-number-input": "20.17.3-rc.3+9b710b879",
+    "@instructure/quiz-rce": "20.17.3-rc.3+9b710b879",
     "@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.1+7c49355a8",
+    "instructure-validations": "20.17.3-rc.3+9b710b879",
     "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.1+7c49355a8",
+    "quiz-presets": "20.17.3-rc.3+9b710b879",
     "react": "^16.8.6",
     "react-addons-test-utils": "^15.6.2",
     "react-dom": "^16.8.6",
@@ -176,5 +176,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "7c49355a8b03cd20dabf480c2ba6c8c616a7eb65"
+  "gitHead": "9b710b87929cc2d203de0f9f68e75a5e2b1a3150"
 }