@instructure/quiz-core 22.16.0 → 22.17.0

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

@@ -8,6 +8,7 @@ import { set } from '../../../../common/actions/ui';
 import { getModalTrigger } from '../../../../common/util/modalHelpers';
 import { generateImportModalId } from '../../../../common/components/ImportModal';
 import { ITEM_FEEDBACK_MODAL, ITEM_FEEDBACK_MODAL_ITEM, ITEM_FEEDBACK_MODAL_FEEDBACK } from '@instructure/quiz-common';
+import { getActiveQuiz } from '../../../../common/selectors/quizzes';
 function mapStateToProps(state, props) {
     var nestedModals = [
         'correct',
@@ -19,6 +20,7 @@ function mapStateToProps(state, props) {
         'isOpen'
     ]);
     var importModalOpen = nestedModals.includes(openModal);
+    var quiz = getActiveQuiz(state);
     return {
         importModalOpen: importModalOpen,
         modalOpen: openModal === ITEM_FEEDBACK_MODAL,
@@ -30,7 +32,8 @@ function mapStateToProps(state, props) {
             'ui',
             ITEM_FEEDBACK_MODAL_FEEDBACK
         ]) || Map(),
-        modalTrigger: getModalTrigger(state)
+        modalTrigger: getModalTrigger(state),
+        isSurvey: quiz.isSurvey()
     };
 }
 var mapDispatchToProps = {

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

@@ -84,23 +84,27 @@ 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 React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { Button, CloseButton } from '@instructure/ui-buttons';
+import { View } from '@instructure/ui-view';
 import { Heading } from '@instructure/ui-heading';
 import { jsx } from '@instructure/emotion';
 import { RichContentRenderer, RichContentInput, RCE_THREE_LINES_HEIGHT } from '@instructure/quiz-rce';
 import t from '@instructure/quiz-i18n/format-message';
-import { Modal, ModalHeader, ModalBody, ModalFooter, ITEM_FEEDBACK_MODAL_FEEDBACK, XSMALL_SIDE_MARGIN, withStyleOverrides } from '@instructure/quiz-common';
-import generateStyle from './styles';
-import generateComponentTheme from './theme';
+import { Modal, ModalHeader, ModalBody, ModalFooter, ITEM_FEEDBACK_MODAL_FEEDBACK, XSMALL_SIDE_MARGIN } from '@instructure/quiz-common';
+function FeedbackInput(param) {
+    var textAreaId = param.textAreaId, label = param.label, content = param.content, onChange = param.onChange;
+    return /*#__PURE__*/ jsx(RichContentInput, {
+        textareaId: textAreaId,
+        label: label,
+        plainTextLabel: label,
+        defaultContent: content,
+        onChange: onChange,
+        height: RCE_THREE_LINES_HEIGHT
+    });
+}
 export var ItemFeedbackModal = /*#__PURE__*/ function(Component) {
     "use strict";
     _inherits(ItemFeedbackModal, Component);
@@ -145,35 +149,12 @@ export var ItemFeedbackModal = /*#__PURE__*/ function(Component) {
                 }, t('Done'));
             }
         },
-        {
-            key: "renderRichContentInput",
-            value: function renderRichContentInput(key, label) {
-                return /*#__PURE__*/ jsx("div", null, /*#__PURE__*/ jsx("br", null), /*#__PURE__*/ jsx("label", {
-                    css: this.props.styles.feedbackLabel,
-                    htmlFor: key
-                }, label), /*#__PURE__*/ jsx(RichContentInput, {
-                    label: "",
-                    textareaId: key,
-                    defaultContent: this.props.feedback.get(key),
-                    onChange: this.onFeedbackWrapper(key),
-                    height: RCE_THREE_LINES_HEIGHT
-                }));
-            }
-        },
-        {
-            key: "renderContent",
-            value: function renderContent() {
-                return /*#__PURE__*/ jsx("div", null, /*#__PURE__*/ jsx(RichContentRenderer, {
-                    customStyles: this.props.styles.itemStem,
-                    content: this.props.item.itemBody
-                }), this.renderRichContentInput('correct', t('For a correct answer')), this.renderRichContentInput('incorrect', t('For an incorrect answer')), this.renderRichContentInput('neutral', t('Provide general feedback (regardless of answer)')));
-            }
-        },
         {
             key: "render",
             value: function render() {
-                return /*#__PURE__*/ jsx("div", null, /*#__PURE__*/ jsx(Modal, {
-                    open: this.props.modalOpen || this.props.importModalOpen,
+                var _this_props = this.props, modalOpen = _this_props.modalOpen, importModalOpen = _this_props.importModalOpen, feedback = _this_props.feedback, item = _this_props.item, isSurvey = _this_props.isSurvey;
+                return /*#__PURE__*/ jsx(Modal, {
+                    open: modalOpen || importModalOpen,
                     onClose: this.closeAction,
                     size: "large",
                     label: t('Student Feedback'),
@@ -187,7 +168,32 @@ export var ItemFeedbackModal = /*#__PURE__*/ function(Component) {
                     placement: "end",
                     offset: "medium",
                     screenReaderLabel: t('Close')
-                })), /*#__PURE__*/ jsx(ModalBody, null, this.renderContent()), /*#__PURE__*/ jsx(ModalFooter, null, this.cancelButton(), this.doneButton())));
+                })), /*#__PURE__*/ jsx(ModalBody, null, /*#__PURE__*/ jsx(View, {
+                    as: "div",
+                    margin: "0 0 medium 0"
+                }, /*#__PURE__*/ jsx(RichContentRenderer, {
+                    customStyles: {
+                        whiteSpace: 'nowrap',
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis'
+                    },
+                    content: item.itemBody
+                })), !isSurvey && /*#__PURE__*/ jsx(React.Fragment, null, /*#__PURE__*/ jsx(FeedbackInput, {
+                    textAreaId: "correct",
+                    label: t('For a correct answer'),
+                    content: feedback.get('correct'),
+                    onChange: this.onFeedbackWrapper('correct')
+                }), /*#__PURE__*/ jsx(FeedbackInput, {
+                    textAreaId: "incorrect",
+                    label: t('For an incorrect answer'),
+                    content: feedback.get('incorrect'),
+                    onChange: this.onFeedbackWrapper('incorrect')
+                })), /*#__PURE__*/ jsx(FeedbackInput, {
+                    textAreaId: "neutral",
+                    label: t('Provide general feedback (regardless of answer)'),
+                    content: feedback.get('neutral'),
+                    onChange: this.onFeedbackWrapper('neutral')
+                })), /*#__PURE__*/ jsx(ModalFooter, null, this.cancelButton(), this.doneButton()));
             }
         }
     ]);
@@ -204,12 +210,9 @@ _define_property(ItemFeedbackModal, "propTypes", {
     modalOpen: PropTypes.bool.isRequired,
     setUi: PropTypes.func.isRequired,
     modalTrigger: PropTypes.instanceOf(Component),
-    styles: PropTypes.object
+    isSurvey: PropTypes.bool.isRequired
 });
 _define_property(ItemFeedbackModal, "defaultProps", {
     modalTrigger: null
 });
-ItemFeedbackModal = _ts_decorate([
-    withStyleOverrides(generateStyle, generateComponentTheme)
-], ItemFeedbackModal);
 export default ItemFeedbackModal;

package/lib/building/components/resources/quizEntry/QuizEntry/index.js

@@ -58,7 +58,8 @@ export var mapStateToProps = function(state, props) {
         tagAssociations: tagAssociations,
         useBankTags: useBankTags,
         workingEntry: entry.getWorkingInstance(),
-        workingQuizEntry: props.quizEntry.getWorkingInstance()
+        workingQuizEntry: props.quizEntry.getWorkingInstance(),
+        isSurvey: activeQuiz.isSurvey()
     };
 };
 var dispatchToProps = {

package/lib/building/components/resources/quizEntry/QuizEntry/presenter.js

@@ -265,7 +265,8 @@ export var QuizEntry = /*#__PURE__*/ function(Component) {
             key: "additionalEditOptions",
             value: function additionalEditOptions(item) {
                 var options = [];
-                if (this.props.quizEntry.entryType === 'Item') {
+                // Don't show item banking options for surveys (both graded and ungraded)
+                if (this.props.quizEntry.entryType === 'Item' && !this.props.isSurvey) {
                     options.push({
                         key: 'banks',
                         title: t('Item Banking'),
@@ -293,7 +294,8 @@ export var QuizEntry = /*#__PURE__*/ function(Component) {
                     initialFocusId: this.props.initialFocusId,
                     validationErrorsFromApi: this.props.validationErrorsFromApi,
                     clearValidationErrorsFromApi: this.props.clearValidationErrorsFromApi,
-                    separatorConfig: this.props.separatorConfig
+                    separatorConfig: this.props.separatorConfig,
+                    isSurvey: this.props.isSurvey
                 };
             }
         },
@@ -538,6 +540,7 @@ _define_property(QuizEntry, "propTypes", {
         decimalSeparator: PropTypes.string,
         thousandSeparator: PropTypes.string
     }),
+    isSurvey: PropTypes.bool,
     styles: PropTypes.object
 });
 _define_property(QuizEntry, "defaultProps", {
@@ -548,6 +551,7 @@ _define_property(QuizEntry, "defaultProps", {
     initialFocusId: null,
     isContentLockedByBlueprint: false,
     isEditing: false,
+    isSurvey: false,
     partialDeepScoringEnabled: false,
     partialScoringEnabled: false,
     scrollKey: void 0,

package/lib/building/components/resources/quizEntry/QuizEntryEdit/Footer/index.js

@@ -1,6 +1,7 @@
 import { connect } from '../../../../../../common/react-redux';
 import makeEditable from '../../../../../../common/components/shared/functionality/makeEditable';
 import QuizEntryEditFooter from './presenter';
+import { getActiveQuiz } from '../../../../../../common/selectors/quizzes';
 export function mapStateToProps(state, props) {
     var entry = props.entry, quizEntry = props.quizEntry, workingQuizEntry = props.workingQuizEntry;
     var workingEntry;
@@ -12,8 +13,11 @@ export function mapStateToProps(state, props) {
         // Bank quizEntry with Item entry.
         workingEntry = entry.getWorkingInstance();
     }
+    var quiz = getActiveQuiz(state);
+    var isSurvey = quiz.isSurvey();
     return {
-        workingEntry: workingEntry
+        workingEntry: workingEntry,
+        isSurvey: isSurvey
     };
 }
 export default makeEditable(connect(mapStateToProps)(QuizEntryEditFooter));

package/lib/building/components/resources/quizEntry/QuizEntryEdit/Footer/presenter.js

@@ -142,6 +142,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import { View } from '@instructure/ui-view';
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';
 import { Text } from '@instructure/ui-text';
+import { Checkbox } from '@instructure/ui-checkbox';
 import NumberInput from '@instructure/quiz-number-input';
 import { IconButton } from '@instructure/ui-buttons';
 import { jsx } from '@instructure/emotion';
@@ -161,6 +162,18 @@ function countDecimals(normalizedPointsString) {
     var _normalizedPointsString_split = _sliced_to_array(normalizedPointsString.split('.'), 2), _ = _normalizedPointsString_split[0], decimals = _normalizedPointsString_split[1];
     return decimals ? decimals.length : 0;
 }
+function RequiredCheckbox(props) {
+    var isRequired = props.isRequired, onChange = props.onChange;
+    return /*#__PURE__*/ jsx(View, {
+        margin: "0 small 0 0"
+    }, /*#__PURE__*/ jsx(Checkbox, {
+        label: "Required",
+        value: "medium",
+        variant: "toggle",
+        onChange: onChange,
+        checked: isRequired
+    }));
+}
 export var QuizEntryEditFooter = /*#__PURE__*/ function(Component) {
     "use strict";
     _inherits(QuizEntryEditFooter, Component);
@@ -200,13 +213,23 @@ export var QuizEntryEditFooter = /*#__PURE__*/ function(Component) {
                     normalizedPoints: normalizedPoints
                 });
             }
+        }), _define_property(_this, "handleRequiredChange", function(event) {
+            var checked = event.target.checked;
+            _this.props.changeQuizEntryProperties(_this.props.quizEntry.id, {
+                required: checked
+            });
+            _this.setState({
+                isRequired: checked
+            });
         }), _define_property(_this, "handleButtonRef", function(node) {
             _this.addFeedbackButton = node;
         });
         var points = _this.getPoints();
+        var isRequired = _this.getIsRequired();
         _this.state = {
             points: points,
-            normalizedPoints: points
+            normalizedPoints: points,
+            isRequired: isRequired
         };
         return _this;
     }
@@ -229,6 +252,12 @@ export var QuizEntryEditFooter = /*#__PURE__*/ function(Component) {
                 return workingQuizEntry.regradeAdjustedPointsPossible(workingEntry.id) || workingQuizEntry.pointsPossible || 0;
             }
         },
+        {
+            key: "getIsRequired",
+            value: function getIsRequired() {
+                return this.props.workingQuizEntry.isRequired || false;
+            }
+        },
         {
             key: "pointsDisabled",
             value: function pointsDisabled() {
@@ -293,9 +322,14 @@ export var QuizEntryEditFooter = /*#__PURE__*/ function(Component) {
         {
             key: "renderLeftFooter",
             value: function renderLeftFooter() {
+                var isRequired = this.state.isRequired;
+                var component = this.props.isSurvey ? /*#__PURE__*/ jsx(RequiredCheckbox, {
+                    isRequired: isRequired,
+                    onChange: this.handleRequiredChange
+                }) : this.renderPointsSection();
                 return /*#__PURE__*/ jsx("div", {
                     css: this.props.styles.leftFooter
-                }, this.renderPointsSection(), this.renderFeedbackSection());
+                }, component, this.renderFeedbackSection());
             }
         },
         {
@@ -343,6 +377,7 @@ _define_property(QuizEntryEditFooter, "componentId", "Quizzes".concat(QuizEntryE
 _define_property(QuizEntryEditFooter, "propTypes", {
     alternativeRightFooter: PropTypes.func,
     changeQuizEntryPoints: PropTypes.func.isRequired,
+    changeQuizEntryProperties: PropTypes.func.isRequired,
     clearChanges: PropTypes.func.isRequired,
     disableSubmit: PropTypes.bool,
     displayPosition: PropTypes.number.isRequired,
@@ -359,7 +394,8 @@ _define_property(QuizEntryEditFooter, "propTypes", {
     workingEntry: ImmutablePropTypes.record.isRequired,
     // This prop is flagged as unused, but it is actually used
     workingQuizEntry: ImmutablePropTypes.record.isRequired,
-    styles: PropTypes.object
+    styles: PropTypes.object,
+    isSurvey: PropTypes.bool.isRequired
 });
 _define_property(QuizEntryEditFooter, "defaultProps", {
     alternativeRightFooter: null,

package/lib/building/components/resources/quizEntry/QuizEntryEdit/index.js

@@ -74,6 +74,7 @@ function mapDispatchToProps(dispatch) {
         newActiveBank: bindActionCreators(newActiveBank, dispatch),
         changeItemTitle: boundModificationActions.changeItemTitle,
         changeQuizEntryPoints: boundModificationActions.changeQuizEntryPoints,
+        changeQuizEntryProperties: boundModificationActions.changeQuizEntryProperties,
         clearModifications: boundModificationActions.clearModifications,
         clearTemporaryItem: boundModificationActions.clearTemporaryItem,
         clearNextQuizEntry: boundModificationActions.clearNextQuizEntry,

package/lib/building/components/resources/quizEntry/QuizEntryEdit/presenter.js

@@ -530,6 +530,7 @@ var QuizEntryEdit = /*#__PURE__*/ function(Component) {
                 var footerProps = pick(this.props, [
                     'alternativeRightFooter',
                     'changeQuizEntryPoints',
+                    'changeQuizEntryProperties',
                     'clearTemporaryItem',
                     'displayPosition',
                     'entry',

package/lib/building/components/resources/quizEntry/QuizEntryShow/components/LeftHeader.js

@@ -0,0 +1,151 @@
+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 _instanceof(left, right) {
+    if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) {
+        return !!right[Symbol.hasInstance](left);
+    } else {
+        return left instanceof right;
+    }
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+import React from 'react';
+import PropTypes from 'prop-types';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import t from '@instructure/quiz-i18n/format-message';
+import { IconBankLine, IconAiColoredSolid } from '@instructure/ui-icons';
+import { Flex } from '@instructure/quiz-common';
+import { TruncateText } from '@instructure/ui-truncate-text';
+import { Text } from '@instructure/ui-text';
+import { View } from '@instructure/ui-view';
+import { Tooltip } from '@instructure/ui-tooltip';
+import { Item } from '../../../../../../common/records';
+function QuizEntryLeftHeaderText(param) {
+    var content = param.content, textProps = param.textProps, viewProps = param.viewProps;
+    return /*#__PURE__*/ React.createElement(View, _object_spread({
+        as: "div"
+    }, viewProps), /*#__PURE__*/ React.createElement(TruncateText, {
+        color: "secondary"
+    }, /*#__PURE__*/ React.createElement(Text, _object_spread({
+        color: "secondary",
+        size: "small"
+    }, textProps), content)));
+}
+QuizEntryLeftHeaderText.propTypes = {
+    content: PropTypes.string.isRequired,
+    textProps: PropTypes.shape(Text.propTypes),
+    viewProps: PropTypes.shape(View.propTypes)
+};
+function BankedContent(param) {
+    var quizEntry = param.quizEntry;
+    if (!quizEntry.isBank && !quizEntry.isBankEntry) {
+        return null;
+    }
+    return /*#__PURE__*/ React.createElement(View, {
+        stacking: "topmost"
+    }, /*#__PURE__*/ React.createElement(IconBankLine, null));
+}
+function AiGeneratedContent() {
+    return /*#__PURE__*/ React.createElement(View, {
+        stacking: "topmost"
+    }, /*#__PURE__*/ React.createElement(Tooltip, {
+        renderTip: t('This question was generated using AI'),
+        placement: "top center",
+        on: [
+            'hover',
+            'focus'
+        ]
+    }, /*#__PURE__*/ React.createElement(IconAiColoredSolid, {
+        color: "primary",
+        "aria-label": t('This question was generated using AI')
+    })));
+}
+export function InteractionTypeName(param) {
+    var name = param.name, _param_defaultValue = param.defaultValue, defaultValue = _param_defaultValue === void 0 ? null : _param_defaultValue, textProps = param.textProps;
+    if (!name && !defaultValue) {
+        return null;
+    }
+    var interactionName = name || defaultValue;
+    return /*#__PURE__*/ React.createElement(QuizEntryLeftHeaderText, {
+        content: interactionName,
+        viewProps: {
+            'data-automation': 'sdk-interaction-type-name-div'
+        },
+        textProps: textProps
+    });
+}
+InteractionTypeName.propTypes = {
+    name: PropTypes.string.isRequired,
+    defaultValue: PropTypes.string,
+    textProps: PropTypes.shape(Text.propTypes)
+};
+export function RequiredIndicator() {
+    return /*#__PURE__*/ React.createElement(QuizEntryLeftHeaderText, {
+        content: t('(Required)'),
+        textProps: {
+            fontStyle: 'italic'
+        }
+    });
+}
+export function PointsPossible(param) {
+    var pointsPossible = param.pointsPossible;
+    return /*#__PURE__*/ React.createElement(QuizEntryLeftHeaderText, {
+        content: t("{\n        points, plural,\n          one {# point}\n        other {# points}\n      }", {
+            points: pointsPossible || 0
+        }),
+        viewProps: {
+            className: 'points',
+            'data-automation': 'sdk-points-possible-div'
+        }
+    });
+}
+export function LeftHeader(param) {
+    var quizEntry = param.quizEntry, entry = param.entry, interactionTypeName = param.interactionTypeName, isSurvey = param.isSurvey;
+    return /*#__PURE__*/ React.createElement(Flex, {
+        alignItems: "center",
+        height: "100%",
+        gap: "mediumSmall"
+    }, /*#__PURE__*/ React.createElement(BankedContent, {
+        quizEntry: quizEntry
+    }), quizEntry.isAiGenerated && /*#__PURE__*/ React.createElement(AiGeneratedContent, null), _instanceof(entry, Item) && /*#__PURE__*/ React.createElement(InteractionTypeName, {
+        name: entry.getInteractionType().name,
+        defaultValue: interactionTypeName
+    }), !isSurvey && /*#__PURE__*/ React.createElement(PointsPossible, {
+        pointsPossible: quizEntry.pointsPossible
+    }), entry.title && /*#__PURE__*/ React.createElement(QuizEntryLeftHeaderText, {
+        content: entry.title,
+        viewProps: {
+            'data-automation': 'sdk-quiz-entry-title-div'
+        }
+    }), quizEntry.isRequired && /*#__PURE__*/ React.createElement(RequiredIndicator, null));
+}
+LeftHeader.propTypes = {
+    entry: ImmutablePropTypes.record.isRequired,
+    quizEntry: ImmutablePropTypes.record.isRequired,
+    isSurvey: PropTypes.bool,
+    interactionTypeName: PropTypes.string
+};

package/lib/building/components/resources/quizEntry/QuizEntryShow/index.js

@@ -5,7 +5,7 @@ import { createItem } from '../../../../../common/actions/modifications';
 import { removeQuizEntry } from '../../../../api/quizEntries';
 import { withConfirm } from '../../../../../common/actions/modal';
 import { QuizEntryShowPresenter } from './presenter';
-import { getQuizEntryWithErrorsShowing } from '../../../../../common/selectors/quizzes';
+import { getQuizEntryWithErrorsShowing, getActiveQuiz } from '../../../../../common/selectors/quizzes';
 import { CREATE_ITEM_CALL, UPDATE_ITEM_CALL } from '@instructure/quiz-common';
 import { featureOn } from '../../../../../common/util/featureCheck';
 function mapStateToProps(state, props) {
@@ -31,6 +31,8 @@ function mapStateToProps(state, props) {
     ], Map()).find(function(interactionType) {
         return interactionType.get('slug') === 'rich-fill-blank';
     });
+    var quiz = getActiveQuiz(state);
+    var isSurvey = quiz.isSurvey();
     return {
         createItemCallStatus: state.getIn([
             'calls',
@@ -48,7 +50,8 @@ function mapStateToProps(state, props) {
             'calls',
             UPDATE_ITEM_CALL,
             'requestStatus'
-        ], '')
+        ], ''),
+        isSurvey: isSurvey
     };
 }
 var mapDispatchToProps = {