@instructure/quiz-core 22.16.1 → 22.17.0

package/es/building/components/resources/quizEntry/QuizEntryShow/presenter.js

@@ -130,25 +130,17 @@ function _is_native_reflect_construct() {
         return !!result;
     })();
 }
-function _ts_decorate(decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for(var i = decorators.length - 1; i >= 0; i--)if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-}
 import { Component } from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import partial from 'lodash/partial';
 import { DragSource } from 'react-dnd';
-import { IconAiColoredSolid, IconBankLine } from '@instructure/ui-icons';
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';
 import { jsx } from '@instructure/emotion';
 import { FillBlankInteractionType } from '@instructure/quiz-interactions';
-import { TOP, withStyleOverrides } from '@instructure/quiz-common';
+import { TOP, withStyleOverrides, Flex } from '@instructure/quiz-common';
 import t from '@instructure/quiz-i18n/format-message';
 import { convertFITBtoRich } from '../../../../../common/util/fitbCopyHelper';
-import Item from '../../../../../common/records/Item';
 import Overlay from '../../../../../common/components/shared/overlay';
 import ActionButtons from '../../ActionButtons';
 import { ItemTypes, dragSource, collectDrag } from '../../../../../common/components/shared/drag_and_drop/dragAndDropUtils';
@@ -156,15 +148,14 @@ import PositionBox from '../../../../../common/components/resources/positionBox/
 import DragAndDropZone from '../../../../../common/components/shared/drag_and_drop/DragAndDropZone';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
-import { Tooltip } from '@instructure/ui-tooltip';
-import { View } from '@instructure/ui-view';
-var QuizEntryShow = /*#__PURE__*/ function(Component) {
+import { LeftHeader } from './components/LeftHeader';
+var BaseQuizEntryShow = /*#__PURE__*/ function(Component) {
     "use strict";
-    _inherits(QuizEntryShow, Component);
-    function QuizEntryShow() {
-        _class_call_check(this, QuizEntryShow);
+    _inherits(BaseQuizEntryShow, Component);
+    function BaseQuizEntryShow() {
+        _class_call_check(this, BaseQuizEntryShow);
         var _this;
-        _this = _call_super(this, QuizEntryShow, arguments), _define_property(_this, "state", {
+        _this = _call_super(this, BaseQuizEntryShow, arguments), _define_property(_this, "state", {
             editAfterCall: null,
             copyAfterCall: null
         }), _define_property(_this, "editingOn", function() {
@@ -215,7 +206,7 @@ var QuizEntryShow = /*#__PURE__*/ function(Component) {
         });
         return _this;
     }
-    _create_class(QuizEntryShow, [
+    _create_class(BaseQuizEntryShow, [
         {
             key: "componentDidUpdate",
             value: function componentDidUpdate() {
@@ -266,14 +257,6 @@ var QuizEntryShow = /*#__PURE__*/ function(Component) {
                 return false;
             }
         },
-        {
-            key: "getPointsText",
-            value: function getPointsText(points) {
-                return t("{\n      points, plural,\n        one {# point}\n      other {# points}\n    }", {
-                    points: points
-                });
-            }
-        },
         {
             key: "removalDialogData",
             value: function removalDialogData() {
@@ -291,71 +274,6 @@ var QuizEntryShow = /*#__PURE__*/ function(Component) {
                 return this.props.quizEntries.size === 1;
             }
         },
-        {
-            key: "renderPointsPossible",
-            value: function renderPointsPossible() {
-                if (_instanceof(this.props.entry, Item)) {
-                    var pointsPossible = this.props.quizEntry.pointsPossible;
-                    return /*#__PURE__*/ jsx("div", {
-                        className: "points",
-                        css: this.props.styles.points,
-                        "data-automation": "sdk-points-possible-div"
-                    }, this.getPointsText(pointsPossible || 0));
-                }
-            }
-        },
-        {
-            key: "renderInteractionType",
-            value: function renderInteractionType() {
-                if (_instanceof(this.props.entry, Item)) {
-                    var interactionTypeName = this.props.entry.getInteractionType().name || this.props.interactionTypeName;
-                    return /*#__PURE__*/ jsx("div", {
-                        css: this.props.styles.interactionTypeName,
-                        "data-automation": "sdk-interaction-type-name-div"
-                    }, interactionTypeName);
-                }
-            }
-        },
-        {
-            key: "renderBankedContent",
-            value: function renderBankedContent() {
-                if (this.props.quizEntry.isBank || this.props.quizEntry.isBankEntry) {
-                    return /*#__PURE__*/ jsx(IconBankLine, null);
-                }
-            }
-        },
-        {
-            key: "renderAiGeneratedContent",
-            value: function renderAiGeneratedContent() {
-                if (!this.props.quizEntry.isAiGenerated) {
-                    return null;
-                }
-                return /*#__PURE__*/ jsx(View, {
-                    stacking: "topmost"
-                }, /*#__PURE__*/ jsx(Tooltip, {
-                    renderTip: t('This question was generated using AI'),
-                    placement: "top center",
-                    on: [
-                        'hover',
-                        'focus'
-                    ]
-                }, /*#__PURE__*/ jsx(IconAiColoredSolid, {
-                    color: "primary",
-                    "aria-label": t('This question was generated using AI')
-                })));
-            }
-        },
-        {
-            key: "renderLeftHeader",
-            value: function renderLeftHeader() {
-                return /*#__PURE__*/ jsx("div", {
-                    css: this.props.styles.leftHeader
-                }, this.renderBankedContent(), this.renderAiGeneratedContent(), this.renderInteractionType(), this.renderPointsPossible(), /*#__PURE__*/ jsx("div", {
-                    css: this.props.styles.title,
-                    "data-automation": "sdk-quiz-entry-title-div"
-                }, this.props.entry.title));
-            }
-        },
         {
             key: "setInert",
             value: function setInert(node) {
@@ -365,7 +283,7 @@ var QuizEntryShow = /*#__PURE__*/ function(Component) {
         {
             key: "render",
             value: function render() {
-                var _this_props = this.props, connectDragPreview = _this_props.connectDragPreview, displayPosition = _this_props.displayPosition, draggingOver = _this_props.draggingOver, draggingAboveHalf = _this_props.draggingAboveHalf, quizEntry = _this_props.quizEntry, stimulusOrientation = _this_props.stimulusOrientation, isContentLockedByBlueprint = _this_props.isContentLockedByBlueprint, lockBlueprintContentEnabled = _this_props.lockBlueprintContentEnabled;
+                var _this_props = this.props, connectDragPreview = _this_props.connectDragPreview, displayPosition = _this_props.displayPosition, draggingOver = _this_props.draggingOver, draggingAboveHalf = _this_props.draggingAboveHalf, quizEntry = _this_props.quizEntry, stimulusOrientation = _this_props.stimulusOrientation, isContentLockedByBlueprint = _this_props.isContentLockedByBlueprint, lockBlueprintContentEnabled = _this_props.lockBlueprintContentEnabled, interactionTypeName = _this_props.interactionTypeName, entry = _this_props.entry, isSurvey = _this_props.isSurvey;
                 var positionToDisplay = this.props.quizEntry.positionToDisplay(displayPosition);
                 var positionText = t('Preview of question at position {position}', {
                     position: positionToDisplay
@@ -398,7 +316,16 @@ var QuizEntryShow = /*#__PURE__*/ function(Component) {
                     position: positionToDisplay,
                     headingText: positionText,
                     headingLevel: quizEntry.isInStimulus ? 'h3' : 'h2'
-                }), this.renderLeftHeader(), /*#__PURE__*/ jsx(ActionButtons, {
+                }), /*#__PURE__*/ jsx(Flex.Item, {
+                    shouldGrow: true,
+                    overflowX: "hidden",
+                    overflowY: "hidden"
+                }, /*#__PURE__*/ jsx(LeftHeader, {
+                    quizEntry: quizEntry,
+                    entry: entry,
+                    interactionTypeName: interactionTypeName,
+                    isSurvey: isSurvey
+                })), /*#__PURE__*/ jsx(ActionButtons, {
                     connectDragSource: this.props.connectDragSource,
                     displayPosition: this.props.displayPosition,
                     onDelete: this.removeItem,
@@ -422,11 +349,11 @@ var QuizEntryShow = /*#__PURE__*/ function(Component) {
             }
         }
     ]);
-    return QuizEntryShow;
+    return BaseQuizEntryShow;
 }(Component);
-_define_property(QuizEntryShow, "displayName", 'QuizEntryShow');
-_define_property(QuizEntryShow, "componentId", "Quizzes".concat(QuizEntryShow.displayName));
-_define_property(QuizEntryShow, "propTypes", {
+_define_property(BaseQuizEntryShow, "displayName", 'QuizEntryShow');
+_define_property(BaseQuizEntryShow, "componentId", "Quizzes".concat(BaseQuizEntryShow.displayName));
+_define_property(BaseQuizEntryShow, "propTypes", {
     children: PropTypes.oneOfType([
         PropTypes.arrayOf(PropTypes.node),
         PropTypes.node
@@ -461,9 +388,10 @@ _define_property(QuizEntryShow, "propTypes", {
     switchOnEditing: PropTypes.func.isRequired,
     updateItemCallStatus: PropTypes.string.isRequired,
     withConfirm: PropTypes.func.isRequired,
-    styles: PropTypes.object
+    styles: PropTypes.object,
+    isSurvey: PropTypes.bool
 });
-_define_property(QuizEntryShow, "defaultProps", {
+_define_property(BaseQuizEntryShow, "defaultProps", {
     children: null,
     draggingOver: false,
     draggingAboveHalf: false,
@@ -478,9 +406,6 @@ _define_property(QuizEntryShow, "defaultProps", {
     richFITBInteractionID: '',
     stimulusOrientation: null
 });
-QuizEntryShow = _ts_decorate([
-    withStyleOverrides(generateStyle, generateComponentTheme)
-], QuizEntryShow);
-export var QuizEntryShowRaw = QuizEntryShow;
+export var QuizEntryShow = withStyleOverrides(generateStyle, generateComponentTheme)(BaseQuizEntryShow);
 export var QuizEntryShowPresenter = DragSource(ItemTypes.QUIZ_ENTRY, dragSource, collectDrag)(QuizEntryShow);
 export default QuizEntryShowPresenter;

package/es/building/components/resources/quizEntry/QuizEntryShow/styles.js

@@ -52,15 +52,6 @@ function _object_spread_props(target, source) {
 }
 var generateStyle = function(componentTheme) {
     var mp = '@media print';
-    var interactionTypeStyles = {
-        color: componentTheme.titleInteractionTypeNamePointsColor,
-        fontSize: componentTheme.titleInteractionTypeNamePointsFontSize,
-        marginLeft: componentTheme.titleInteractionTypeNamePointsLeftMargin,
-        marginRight: componentTheme.titleInteractionTypeNamePointsRightMargin,
-        textOverflow: 'ellipsis',
-        overflow: 'hidden',
-        whiteSpace: 'nowrap'
-    };
     var optionsButtonDragDropStyle = {
         backgroundColor: 'transparent',
         border: 'none',
@@ -116,9 +107,6 @@ var generateStyle = function(componentTheme) {
                 backgroundColor: 'initial'
             }
         },
-        title: interactionTypeStyles,
-        interactionTypeName: interactionTypeStyles,
-        points: interactionTypeStyles,
         itemHolder: {
             overflowWrap: 'anywhere',
             margin: componentTheme.itemHolderMargin

package/es/common/actions/modal.js

@@ -11,7 +11,8 @@ export function withConfirm(onContinue) {
         continueVariant: void 0,
         cancelText: void 0,
         size: void 0,
-        shouldReturnFocus: true
+        shouldReturnFocus: true,
+        submitButtonDisabled: false
     };
     var modalOptions = Object.assign({}, defaultConfirmOptions, opts);
     return {

package/es/common/components/ConfirmationModal/index.js

@@ -30,7 +30,7 @@ import { bindActionCreators } from 'redux';
 import { Map } from 'immutable';
 import { connect } from '../../react-redux';
 import { closeModal } from '../../actions/modal';
-import ConfirmationModal from './presenter';
+import { ConfirmationModal } from './presenter';
 var mapStateToProps = function(state) {
     var modal = state.get('modal');
     return _object_spread({

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

@@ -1,165 +1,57 @@
-function _assert_this_initialized(self) {
-    if (self === void 0) {
-        throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-    }
-    return self;
-}
-function _call_super(_this, derived, args) {
-    derived = _get_prototype_of(derived);
-    return _possible_constructor_return(_this, _is_native_reflect_construct() ? Reflect.construct(derived, args || [], _get_prototype_of(_this).constructor) : derived.apply(_this, args));
-}
-function _class_call_check(instance, Constructor) {
-    if (!(instance instanceof Constructor)) {
-        throw new TypeError("Cannot call a class as a function");
-    }
-}
-function _defineProperties(target, props) {
-    for(var i = 0; i < props.length; i++){
-        var descriptor = props[i];
-        descriptor.enumerable = descriptor.enumerable || false;
-        descriptor.configurable = true;
-        if ("value" in descriptor) descriptor.writable = true;
-        Object.defineProperty(target, descriptor.key, descriptor);
-    }
-}
-function _create_class(Constructor, protoProps, staticProps) {
-    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
-    if (staticProps) _defineProperties(Constructor, staticProps);
-    return Constructor;
-}
-function _define_property(obj, key, value) {
-    if (key in obj) {
-        Object.defineProperty(obj, key, {
-            value: value,
-            enumerable: true,
-            configurable: true,
-            writable: true
-        });
-    } else {
-        obj[key] = value;
-    }
-    return obj;
-}
-function _get_prototype_of(o) {
-    _get_prototype_of = Object.setPrototypeOf ? Object.getPrototypeOf : function getPrototypeOf(o) {
-        return o.__proto__ || Object.getPrototypeOf(o);
-    };
-    return _get_prototype_of(o);
-}
-function _inherits(subClass, superClass) {
-    if (typeof superClass !== "function" && superClass !== null) {
-        throw new TypeError("Super expression must either be null or a function");
-    }
-    subClass.prototype = Object.create(superClass && superClass.prototype, {
-        constructor: {
-            value: subClass,
-            writable: true,
-            configurable: true
-        }
-    });
-    if (superClass) _set_prototype_of(subClass, superClass);
-}
-function _possible_constructor_return(self, call) {
-    if (call && (_type_of(call) === "object" || typeof call === "function")) {
-        return call;
-    }
-    return _assert_this_initialized(self);
-}
-function _set_prototype_of(o, p) {
-    _set_prototype_of = Object.setPrototypeOf || function setPrototypeOf(o, p) {
-        o.__proto__ = p;
-        return o;
-    };
-    return _set_prototype_of(o, p);
-}
-function _type_of(obj) {
-    "@swc/helpers - typeof";
-    return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
-}
-function _is_native_reflect_construct() {
-    try {
-        var result = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() {}));
-    } catch (_) {}
-    return (_is_native_reflect_construct = function() {
-        return !!result;
-    })();
-}
-import React, { Component } from 'react';
+import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { Button, CloseButton } from '@instructure/ui-buttons';
 import { Text } from '@instructure/ui-text';
 import { Heading } from '@instructure/ui-heading';
 import t from '@instructure/quiz-i18n/format-message';
 import { ImportantModal, ModalHeader, ModalBody, ModalFooter, XSMALL_SIDE_MARGIN } from '@instructure/quiz-common';
-export var ConfirmationModal = /*#__PURE__*/ function(Component) {
-    "use strict";
-    _inherits(ConfirmationModal, Component);
-    function ConfirmationModal() {
-        _class_call_check(this, ConfirmationModal);
-        var _this;
-        _this = _call_super(this, ConfirmationModal, arguments), _define_property(_this, "state", {
-            action: null
-        }), _define_property(_this, "continueAction", function() {
-            _this.setState({
-                action: 'continue'
-            }, _this.props.closeModal);
-        }), _define_property(_this, "cancelAction", function() {
-            _this.setState({
-                action: 'cancel'
-            }, _this.props.closeModal);
-        }), _define_property(_this, "doAction", function() {
-            var _this_props = _this.props, onContinue = _this_props.onContinue, onCancel = _this_props.onCancel;
-            if (_this.state.action === 'continue') {
-                onContinue && onContinue();
-            } else if (_this.state.action === 'cancel') {
-                onCancel && onCancel();
-            }
-            _this.setState({
-                action: null
-            });
-        });
-        return _this;
-    }
-    _create_class(ConfirmationModal, [
-        {
-            key: "render",
-            value: function render() {
-                var _this_props = this.props, title = _this_props.title, text = _this_props.text, cancelText = _this_props.cancelText, continueText = _this_props.continueText, size = _this_props.size, shouldReturnFocus = _this_props.shouldReturnFocus, continueVariant = _this_props.continueVariant, automationPrefix = _this_props.automationPrefix;
-                return /*#__PURE__*/ React.createElement(ImportantModal, {
-                    open: this.props.modalOpen,
-                    size: size || 'small',
-                    label: title || t('Confirm'),
-                    onDismiss: this.cancelAction,
-                    "data-automation": automationPrefix ? "sdk-".concat(automationPrefix, "-confirmation-modal") : 'sdk-confirmation-modal',
-                    shouldReturnFocus: shouldReturnFocus,
-                    onClose: this.doAction
-                }, /*#__PURE__*/ React.createElement(ModalHeader, null, /*#__PURE__*/ React.createElement(Heading, {
-                    level: "reset",
-                    as: "h2",
-                    "data-automation": automationPrefix ? "sdk-".concat(automationPrefix, "-confirmation-modal-heading") : 'sdk-confirmation-modal-heading'
-                }, title || t('Confirm')), /*#__PURE__*/ React.createElement(CloseButton, {
-                    onClick: this.cancelAction,
-                    placement: "end",
-                    offset: "medium",
-                    screenReaderLabel: t('Close')
-                })), /*#__PURE__*/ React.createElement(ModalBody, null, /*#__PURE__*/ React.createElement(Text, {
-                    color: "primary"
-                }, text || t('Are you sure?'))), /*#__PURE__*/ React.createElement(ModalFooter, null, /*#__PURE__*/ React.createElement(Button, {
-                    onClick: this.cancelAction,
-                    margin: XSMALL_SIDE_MARGIN,
-                    "data-automation": automationPrefix ? "sdk-".concat(automationPrefix, "-confirmation-modal-cancel") : 'sdk-confirmation-modal-cancel'
-                }, cancelText || t('Cancel')), /*#__PURE__*/ React.createElement(Button, {
-                    color: continueVariant || 'primary',
-                    onClick: this.continueAction,
-                    margin: XSMALL_SIDE_MARGIN,
-                    "data-automation": automationPrefix ? "sdk-".concat(automationPrefix, "-confirmation-modal-confirm") : 'sdk-confirmation-modal-confirm'
-                }, continueText || t('Confirm'))));
-            }
-        }
+export function ConfirmationModal(param) {
+    var closeModal = param.closeModal, modalOpen = param.modalOpen, title = param.title, text = param.text, cancelText = param.cancelText, continueText = param.continueText, continueVariant = param.continueVariant, size = param.size, _param_shouldReturnFocus = param.shouldReturnFocus, shouldReturnFocus = _param_shouldReturnFocus === void 0 ? true : _param_shouldReturnFocus, submitButtonDisabled = param.submitButtonDisabled, onContinue = param.onContinue, onCancel = param.onCancel, automationPrefix = param.automationPrefix;
+    var continueAction = useCallback(function() {
+        onContinue && onContinue();
+        closeModal();
+    }, [
+        onContinue,
+        closeModal
+    ]);
+    var cancelAction = useCallback(function() {
+        onCancel && onCancel();
+        closeModal();
+    }, [
+        onCancel,
+        closeModal
     ]);
-    return ConfirmationModal;
-}(Component);
-_define_property(ConfirmationModal, "propTypes", {
+    return /*#__PURE__*/ React.createElement(ImportantModal, {
+        open: modalOpen,
+        size: size || 'small',
+        label: title || t('Confirm'),
+        onDismiss: cancelAction,
+        "data-automation": automationPrefix ? "sdk-".concat(automationPrefix, "-confirmation-modal") : 'sdk-confirmation-modal',
+        shouldReturnFocus: shouldReturnFocus
+    }, /*#__PURE__*/ React.createElement(ModalHeader, null, /*#__PURE__*/ React.createElement(Heading, {
+        level: "reset",
+        as: "h2",
+        "data-automation": automationPrefix ? "sdk-".concat(automationPrefix, "-confirmation-modal-heading") : 'sdk-confirmation-modal-heading'
+    }, title || t('Confirm')), /*#__PURE__*/ React.createElement(CloseButton, {
+        onClick: cancelAction,
+        placement: "end",
+        offset: "medium",
+        screenReaderLabel: t('Close')
+    })), /*#__PURE__*/ React.createElement(ModalBody, null, /*#__PURE__*/ React.createElement(Text, {
+        color: "primary"
+    }, text || t('Are you sure?'))), /*#__PURE__*/ React.createElement(ModalFooter, null, /*#__PURE__*/ React.createElement(Button, {
+        onClick: cancelAction,
+        margin: XSMALL_SIDE_MARGIN,
+        "data-automation": automationPrefix ? "sdk-".concat(automationPrefix, "-confirmation-modal-cancel") : 'sdk-confirmation-modal-cancel'
+    }, cancelText || t('Cancel')), /*#__PURE__*/ React.createElement(Button, {
+        color: continueVariant || 'primary',
+        disabled: submitButtonDisabled,
+        onClick: continueAction,
+        margin: XSMALL_SIDE_MARGIN,
+        "data-automation": automationPrefix ? "sdk-".concat(automationPrefix, "-confirmation-modal-confirm") : 'sdk-confirmation-modal-confirm'
+    }, continueText || t('Confirm'))));
+}
+ConfirmationModal.propTypes = {
     closeModal: PropTypes.func.isRequired,
     modalOpen: PropTypes.bool.isRequired,
     title: PropTypes.string,
@@ -172,20 +64,8 @@ _define_property(ConfirmationModal, "propTypes", {
     continueVariant: PropTypes.string,
     size: PropTypes.string,
     shouldReturnFocus: PropTypes.bool,
+    submitButtonDisabled: PropTypes.bool,
     onContinue: PropTypes.func,
     onCancel: PropTypes.func,
     automationPrefix: PropTypes.string
-});
-_define_property(ConfirmationModal, "defaultProps", {
-    title: null,
-    text: null,
-    cancelText: null,
-    continueText: null,
-    continueVariant: null,
-    size: null,
-    shouldReturnFocus: true,
-    onContinue: null,
-    onCancel: null,
-    automationPrefix: null
-});
-export default ConfirmationModal;
+};

package/es/common/components/SDKApp/index.js

@@ -97,7 +97,7 @@ import { DragDropContext } from 'react-dnd';
 import { jsx } from '@instructure/emotion';
 import { ApplyLocale } from '@instructure/ui-i18n';
 import { Provider } from '../../react-redux';
-import store from '../../../reduxStore';
+import store, { setAppDispatch } from '../../../reduxStore';
 import { getLocale, withStyleOverrides } from '@instructure/quiz-common';
 import { set } from '../../actions/ui';
 import { addAlert } from '../../actions/alerts';
@@ -118,6 +118,7 @@ var UndecoratedSDKApp = /*#__PURE__*/ function(Component) {
     function UndecoratedSDKApp(props) {
         _class_call_check(this, UndecoratedSDKApp);
         var _this;
+        var _this_props_rceConfig;
         _this = _call_super(this, UndecoratedSDKApp, [
             props
         ]), _define_property(_this, "addAlert", function(opts) {
@@ -126,8 +127,27 @@ var UndecoratedSDKApp = /*#__PURE__*/ function(Component) {
         // TODO: move to something like this down the line
         // so we dont implicitly share state
         // this.store = this.configureStore()
+        setAppDispatch(props.appDispatch);
         _this.store = store;
         _this.setLocale();
+        // Initialize Redux store with props BEFORE render to prevent race conditions
+        // where child components make API calls before the token is set
+        _this.store.dispatch([
+            setAPIEndpoint(_this.props.apiEndpoint),
+            setCanvasOrigin((_this_props_rceConfig = _this.props.rceConfig) === null || _this_props_rceConfig === void 0 ? void 0 : _this_props_rceConfig.canvasOrigin),
+            _this.setAppContainer(_this.props.appContainer),
+            setUserToken(_this.props.userToken),
+            setOutcomesEndpoint(_this.props.outcomesEndpoint),
+            setOutcomesToken(_this.props.outcomesToken),
+            setContextUuid(_this.props.contextUuid),
+            setExternalAccountUuid(_this.props.externalAccountUuid)
+        ]);
+        if (_this.props.itemBankSharingEnabled) {
+            _this.store.dispatch(addFeatures('item_bank_sharing'));
+        }
+        if (_this.props.gradeByQuestionEnabled !== null) {
+            _this.store.dispatch(setGradeByQuestionEnabled(_this.props.gradeByQuestionEnabled));
+        }
         return _this;
     }
     _create_class(UndecoratedSDKApp, [
@@ -151,28 +171,6 @@ var UndecoratedSDKApp = /*#__PURE__*/ function(Component) {
                 return set('appContainer', selectors);
             }
         },
-        {
-            key: "UNSAFE_componentWillMount",
-            value: function UNSAFE_componentWillMount() {
-                var _this_props_rceConfig;
-                this.store.dispatch([
-                    setAPIEndpoint(this.props.apiEndpoint),
-                    setCanvasOrigin((_this_props_rceConfig = this.props.rceConfig) === null || _this_props_rceConfig === void 0 ? void 0 : _this_props_rceConfig.canvasOrigin),
-                    this.setAppContainer(this.props.appContainer),
-                    setUserToken(this.props.userToken),
-                    setOutcomesEndpoint(this.props.outcomesEndpoint),
-                    setOutcomesToken(this.props.outcomesToken),
-                    setContextUuid(this.props.contextUuid),
-                    setExternalAccountUuid(this.props.externalAccountUuid)
-                ]);
-                if (this.props.itemBankSharingEnabled) {
-                    this.store.dispatch(addFeatures('item_bank_sharing'));
-                }
-                if (this.props.gradeByQuestionEnabled !== null) {
-                    this.store.dispatch(setGradeByQuestionEnabled(this.props.gradeByQuestionEnabled));
-                }
-            }
-        },
         {
             key: "componentDidMount",
             value: function componentDidMount() {
@@ -272,6 +270,7 @@ _define_property(UndecoratedSDKApp, "propTypes", {
     })),
     userToken: PropTypes.string.isRequired,
     disableAlertLiveRegion: PropTypes.bool,
+    appDispatch: PropTypes.func.isRequired,
     styles: PropTypes.object
 });
 _define_property(UndecoratedSDKApp, "contextTypes", {

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import t from '@instructure/quiz-i18n/format-message';
+import { Text } from '@instructure/ui-text';
+import { View } from '@instructure/ui-view';
+import { AccessibleContent } from '@instructure/ui-a11y-content';
+export function TotalPointsPossible(param) {
+    var sidebarOpen = param.sidebarOpen, totalPointsPossible = param.totalPointsPossible;
+    if (typeof totalPointsPossible !== 'number') {
+        return null;
+    }
+    var pointsText = /*#__PURE__*/ React.createElement(Text, {
+        key: "pointsText",
+        size: "small",
+        weight: "bold"
+    }, t("{\n      totalPointsPossible, plural,\n       one {# pt}\n       other {# pts}\n      }", {
+        totalPointsPossible: totalPointsPossible
+    }));
+    var responsiveText = pointsText;
+    if (sidebarOpen) {
+        responsiveText = /*#__PURE__*/ React.createElement(Text, {
+            size: "small"
+        }, t.rich('Total question points = <points/>', {
+            points: function() {
+                return pointsText;
+            }
+        }));
+    }
+    return /*#__PURE__*/ React.createElement(View, {
+        borderWidth: "0 0 small 0",
+        padding: "small x-small",
+        textAlign: sidebarOpen ? 'start' : 'center'
+    }, /*#__PURE__*/ React.createElement(AccessibleContent, {
+        alt: t('Total question points = {totalPointsPossible}', {
+            totalPointsPossible: totalPointsPossible
+        })
+    }, responsiveText));
+}