@instructure/quiz-core 22.16.1 → 22.17.0

package/lib/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/lib/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/lib/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));
+}

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

@@ -99,18 +99,12 @@ 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 { List } from 'immutable';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { IconMoveStartLine, IconMoveEndLine, IconPinSolid, IconQuizInstructionsLine, IconQuizTitleLine } from '@instructure/ui-icons';
-import { AccessibleContent, PresentationContent, ScreenReaderContent } from '@instructure/ui-a11y-content';
+import { PresentationContent, ScreenReaderContent } from '@instructure/ui-a11y-content';
 import { IconButton } from '@instructure/ui-buttons';
 import { Link } from '@instructure/ui-link';
 import { Text } from '@instructure/ui-text';
@@ -124,15 +118,18 @@ import { onPhone } from '../../../../util/windowChecks';
 import CustomPropTypes from '../../../../util/CustomPropTypes';
 import noop from '../../../../util/noop';
 import Pin from './Pin';
+import { TotalPointsPossible } from './components/TotalPointsPossible';
+import { connect } from '../../../../react-redux';
+import { getActiveQuiz } from '../../../../../common/selectors/quizzes';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
-export var Sidebar = /*#__PURE__*/ function(Component) {
+var BaseSidebar = /*#__PURE__*/ function(Component) {
     "use strict";
-    _inherits(Sidebar, Component);
-    function Sidebar() {
-        _class_call_check(this, Sidebar);
+    _inherits(BaseSidebar, Component);
+    function BaseSidebar() {
+        _class_call_check(this, BaseSidebar);
         var _this;
-        _this = _call_super(this, Sidebar, arguments), _define_property(_this, "scrollToTitle", function(e) {
+        _this = _call_super(this, BaseSidebar, arguments), _define_property(_this, "scrollToTitle", function(e) {
             e.preventDefault(); // prevent default link navigation
             _this.props.scrollToItem(null)(TITLE_SCROLL_KEY);
         }), _define_property(_this, "scrollToInfo", function(e) {
@@ -158,7 +155,7 @@ export var Sidebar = /*#__PURE__*/ function(Component) {
         });
         return _this;
     }
-    _create_class(Sidebar, [
+    _create_class(BaseSidebar, [
         {
             key: "componentDidMount",
             value: function componentDidMount() {
@@ -317,41 +314,6 @@ export var Sidebar = /*#__PURE__*/ function(Component) {
                 })));
             }
         },
-        {
-            key: "renderTotalPointsPossible",
-            value: function renderTotalPointsPossible() {
-                var _this_props = this.props, sidebarOpen = _this_props.sidebarOpen, totalPointsPossible = _this_props.totalPointsPossible;
-                if (typeof totalPointsPossible !== 'number') {
-                    return null;
-                }
-                var pointsText = /*#__PURE__*/ jsx(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__*/ jsx(Text, {
-                        size: "small"
-                    }, t.rich('Total question points = <points/>', {
-                        points: function() {
-                            return pointsText;
-                        }
-                    }));
-                }
-                return /*#__PURE__*/ jsx(View, {
-                    borderWidth: "0 0 small 0",
-                    padding: "small x-small",
-                    textAlign: sidebarOpen ? 'start' : 'center'
-                }, /*#__PURE__*/ jsx(AccessibleContent, {
-                    alt: t('Total question points = {totalPointsPossible}', {
-                        totalPointsPossible: totalPointsPossible
-                    })
-                }, responsiveText));
-            }
-        },
         {
             key: "renderPinned",
             value: function renderPinned() {
@@ -390,6 +352,7 @@ export var Sidebar = /*#__PURE__*/ function(Component) {
         {
             key: "render",
             value: function render() {
+                var _this_props = this.props, sidebarOpen = _this_props.sidebarOpen, totalPointsPossible = _this_props.totalPointsPossible, isSurvey = _this_props.isSurvey;
                 return /*#__PURE__*/ jsx(View, null, /*#__PURE__*/ jsx("div", {
                     css: this.props.styles.commonContainer,
                     id: "sidebar-wrapper",
@@ -410,17 +373,20 @@ export var Sidebar = /*#__PURE__*/ function(Component) {
                     onClick: noop,
                     id: SIDEBAR_NAV_ID,
                     "aria-label": t('Question Navigator')
-                }, this.renderSidebarHeader(), this.renderTotalPointsPossible(), this.renderPinned(), this.renderTitle(), this.renderInstructions(), this.renderResults(), /*#__PURE__*/ jsx("div", {
+                }, this.renderSidebarHeader(), !isSurvey && /*#__PURE__*/ jsx(TotalPointsPossible, {
+                    sidebarOpen: sidebarOpen,
+                    totalPointsPossible: totalPointsPossible
+                }), this.renderPinned(), this.renderTitle(), this.renderInstructions(), this.renderResults(), /*#__PURE__*/ jsx("div", {
                     css: this.props.styles.sidebarContent
                 }, this.props.children)))));
             }
         }
     ]);
-    return Sidebar;
+    return BaseSidebar;
 }(Component);
-_define_property(Sidebar, "displayName", 'Sidebar');
-_define_property(Sidebar, "componentId", "Quizzes".concat(Sidebar.displayName));
-_define_property(Sidebar, "propTypes", {
+_define_property(BaseSidebar, "displayName", 'Sidebar');
+_define_property(BaseSidebar, "componentId", "Quizzes".concat(BaseSidebar.displayName));
+_define_property(BaseSidebar, "propTypes", {
     children: PropTypes.oneOfType([
         PropTypes.element,
         PropTypes.arrayOf(PropTypes.element),
@@ -430,6 +396,7 @@ _define_property(Sidebar, "propTypes", {
     taking: PropTypes.bool,
     scrollToItem: CustomPropTypes.higherOrderFunction.isRequired,
     sidebarOpen: PropTypes.bool.isRequired,
+    isSurvey: PropTypes.bool.isRequired,
     pinnedItems: ImmutablePropTypes.listOf(PropTypes.shape({
         sessionItemId: PropTypes.string.isRequired,
         position: PropTypes.number.isRequired
@@ -443,7 +410,7 @@ _define_property(Sidebar, "propTypes", {
     makeStyles: PropTypes.func,
     styles: PropTypes.object
 });
-_define_property(Sidebar, "defaultProps", {
+_define_property(BaseSidebar, "defaultProps", {
     grading: false,
     taking: false,
     title: null,
@@ -452,7 +419,12 @@ _define_property(Sidebar, "defaultProps", {
     totalPointsPossible: null,
     shouldCloseOnBlur: onPhone()
 });
-Sidebar = _ts_decorate([
-    withStyleOverrides(generateStyle, generateComponentTheme)
-], Sidebar);
+export var UnconnectedSidebar = withStyleOverrides(generateStyle, generateComponentTheme)(BaseSidebar);
+function mapStateToProps(state) {
+    var quiz = getActiveQuiz(state);
+    return {
+        isSurvey: quiz.isSurvey()
+    };
+}
+export var Sidebar = connect(mapStateToProps)(UnconnectedSidebar);
 export default Sidebar;

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

@@ -4,14 +4,18 @@ import { fileUploading } from '../../../../selectors/calls';
 import { connect } from '../../../../react-redux';
 import { SidebarItem as SidebarItemPresenter } from './presenter';
 import { scrollToItem as scrollToItemAction } from '../../../../actions/scrolling';
+import { getActiveQuiz } from '../../../../../common/selectors/quizzes';
 import t from '@instructure/quiz-i18n/format-message';
 export var mapStateToProps = function(state, props) {
+    var quiz = getActiveQuiz(state);
     var displayPosition = props.quizEntry ? props.quizEntry.positionToDisplay(props.position) : t('{position, number}', {
         position: props.position
     });
     return {
         displayPosition: displayPosition,
-        preventScrollToItem: fileUploading(state) && isOneQuestionAtATime(state)
+        preventScrollToItem: fileUploading(state) && isOneQuestionAtATime(state),
+        isSurvey: quiz.isSurvey(),
+        isRequired: props.quizEntry ? props.quizEntry.isRequired : false
     };
 };
 export var mapDispatchToProps = function(dispatch, props) {

package/lib/common/components/layout/sidebar/SidebarItem/presenter.js

@@ -93,8 +93,10 @@ function _ts_decorate(decorators, target, key, desc) {
 import { Component } from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
+import { View } from '@instructure/ui-view';
 import { Link } from '@instructure/ui-link';
 import { jsx } from '@instructure/emotion';
+import { IconArrowNestLine } from '@instructure/ui-icons';
 import PositionSummary from '../PositionSummary';
 import t from '@instructure/quiz-i18n/format-message';
 import { RichContentRenderer } from '@instructure/quiz-rce';
@@ -103,6 +105,20 @@ import generateComponentTheme from './theme';
 import { Flex, END_EDITING_TRIGGER_CLASSNAME, withStyleOverrides } from '@instructure/quiz-common';
 import { Tooltip } from '@instructure/ui-tooltip';
 import { AccessibleContent } from '@instructure/ui-a11y-content';
+import { RequiredIndicator } from '../../../../../building/components/resources/quizEntry/QuizEntryShow/components/LeftHeader';
+function SideBarItemRightContent(param) {
+    var isSurvey = param.isSurvey, isRequired = param.isRequired, pointPossibleText = param.pointPossibleText;
+    if (!isSurvey) {
+        return /*#__PURE__*/ jsx(View, {
+            as: "div",
+            width: "40%"
+        }, pointPossibleText);
+    }
+    if (!isRequired) {
+        return null;
+    }
+    return /*#__PURE__*/ jsx(RequiredIndicator, null);
+}
 export var SidebarItem = /*#__PURE__*/ function(Component) {
     "use strict";
     _inherits(SidebarItem, Component);
@@ -169,25 +185,35 @@ export var SidebarItem = /*#__PURE__*/ function(Component) {
         {
             key: "renderButton",
             value: function renderButton() {
-                var _this_props = this.props, displayPosition = _this_props.displayPosition, itemId = _this_props.itemId, isAnswered = _this_props.isAnswered;
-                var content = !isAnswered && isAnswered !== null ? t('Navigate to question at position {displayPosition}, unanswered', {
+                var _this_props = this.props, displayPosition = _this_props.displayPosition, itemId = _this_props.itemId, isAnswered = _this_props.isAnswered, inStimulus = _this_props.inStimulus, sidebarOpen = _this_props.sidebarOpen;
+                var baseContent = !isAnswered && isAnswered !== null ? t('Navigate to question at position {displayPosition}, unanswered', {
                     displayPosition: displayPosition
                 }) : t('Navigate to question at position {displayPosition}', {
                     displayPosition: displayPosition
                 });
+                var stimulusContent = !isAnswered && isAnswered !== null ? t('Navigate to stimulus question at position {displayPosition}, unanswered', {
+                    displayPosition: displayPosition
+                }) : t('Navigate to stimulus question at position {displayPosition}', {
+                    displayPosition: displayPosition
+                });
+                var content = inStimulus ? stimulusContent : baseContent;
                 return /*#__PURE__*/ jsx(Tooltip, {
-                    renderTip: this.props.sidebarOpen ? '' : /*#__PURE__*/ jsx("span", {
+                    renderTip: sidebarOpen ? '' : /*#__PURE__*/ jsx("span", {
                         "aria-hidden": "true"
                     }, content),
                     placement: "start",
-                    on: this.props.sidebarOpen ? [] : [
+                    on: sidebarOpen ? [] : [
                         'hover',
                         'focus'
                     ]
-                }, /*#__PURE__*/ jsx(Link, {
+                }, inStimulus && !sidebarOpen ? /*#__PURE__*/ jsx(IconArrowNestLine, {
+                    css: {
+                        margin: '-10px 5px 0 -8px'
+                    }
+                }) : null, /*#__PURE__*/ jsx(Link, {
                     href: "#",
                     size: "small",
-                    margin: "0 small",
+                    margin: inStimulus && !sidebarOpen ? '0 0 0 -5px 0' : '0 small',
                     isWithinText: false,
                     forceButtonRole: false,
                     onClick: this.scrollToItem,
@@ -210,7 +236,7 @@ export var SidebarItem = /*#__PURE__*/ function(Component) {
         {
             key: "renderOpen",
             value: function renderOpen() {
-                var _this_props = this.props, children = _this_props.children, itemName = _this_props.itemName, pointsPossible = _this_props.pointsPossible, styles = _this_props.styles;
+                var _this_props = this.props, children = _this_props.children, itemName = _this_props.itemName, pointsPossible = _this_props.pointsPossible, styles = _this_props.styles, isSurvey = _this_props.isSurvey, isRequired = _this_props.isRequired;
                 var parentDivClass = "sidebarIsOpen ".concat(END_EDITING_TRIGGER_CLASSNAME);
                 return /*#__PURE__*/ jsx("div", {
                     className: parentDivClass,
@@ -229,10 +255,11 @@ export var SidebarItem = /*#__PURE__*/ function(Component) {
                 }, /*#__PURE__*/ jsx("div", {
                     className: "interactionType",
                     css: this.props.styles.interactionType
-                }, itemName), /*#__PURE__*/ jsx("div", {
-                    className: "pointsPossible",
-                    css: this.props.styles.pointsPossible
-                }, this.getPointsText(pointsPossible || 0))), /*#__PURE__*/ jsx("div", {
+                }, itemName), /*#__PURE__*/ jsx(SideBarItemRightContent, {
+                    isSurvey: isSurvey,
+                    isRequired: isRequired,
+                    pointPossibleText: this.getPointsText(pointsPossible || 0)
+                })), /*#__PURE__*/ jsx("div", {
                     css: this.props.styles.itemBody
                 }, /*#__PURE__*/ jsx(RichContentRenderer, {
                     content: this.props.itemBody
@@ -266,6 +293,8 @@ _define_property(SidebarItem, "propTypes", {
     preventScrollToItem: PropTypes.bool.isRequired,
     quizEntry: ImmutablePropTypes.record,
     sidebarOpen: PropTypes.bool.isRequired,
+    isSurvey: PropTypes.bool.isRequired,
+    isRequired: PropTypes.bool.isRequired,
     // from connect
     scrollToItem: PropTypes.func.isRequired,
     styles: PropTypes.object,

package/lib/common/components/layout/sidebar/SidebarItem/styles.js

@@ -58,7 +58,10 @@ var generateStyle = function(componentTheme, props) {
         displayNumber: {
             color: componentTheme.darkTextColor,
             fontSize: componentTheme.numberFontSize,
-            fontWeight: componentTheme.numberFontWeight
+            fontWeight: componentTheme.numberFontWeight,
+            minWidth: '2ch',
+            display: 'inline-block',
+            textAlign: 'center'
         },
         itemBody: {
             fontSize: componentTheme.itemBodyFontSize,