@instructure/quiz-core 20.11.3-rc.8 → 20.11.3

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

@@ -0,0 +1,95 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var generateStyle = function generateStyle(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',
+    color: 'inherit',
+    fontSize: componentTheme.optionsButtonDragDropHandleFontSize,
+    margin: componentTheme.optionsButtonDragDropHandleMargin
+  };
+  return {
+    quizEntryWrapper: (0, _defineProperty2.default)({
+      transform: 'translate3d(0, 0, 0)'
+    }, mp, {
+      breakInside: 'avoid'
+    }),
+    quizEntryShow: {
+      padding: componentTheme.quizEntryShowPadding,
+      backgroundColor: componentTheme.quizEntryShowBackgroundColor
+    },
+    header: {
+      height: componentTheme.headerHeight,
+      display: 'flex',
+      flexWrap: 'nowrap',
+      flexDirection: 'row',
+      alignItems: 'stretch',
+      paddingRight: componentTheme.headerRightPadding
+    },
+    dndBorder: {
+      border: componentTheme.dndBorder
+    },
+    leftHeader: {
+      flex: '8 0 0',
+      display: 'inline-flex',
+      overflow: 'hidden',
+      alignItems: 'center'
+    },
+    connectingLines: {
+      flex: '0 0 auto',
+      display: 'inline-flex',
+      borderLeft: "".concat(componentTheme.phoneConnectingLinesBorderWidth, " dotted"),
+      borderBottom: "".concat(componentTheme.phoneConnectingLinesBorderWidth, " dotted"),
+      borderColor: componentTheme.phoneConnectingLinesBorderColor,
+      height: '2rem',
+      width: '1.2rem',
+      marginTop: '-0.8rem',
+      marginRight: '1.2rem'
+    },
+    rightHeader: {
+      flex: '0 0 auto',
+      display: 'inline-flex',
+      textAlign: 'right',
+      zIndex: componentTheme.rightHeaderZIndex,
+      color: componentTheme.rightHeaderColor,
+      button: {
+        backgroundColor: 'initial'
+      }
+    },
+    title: interactionTypeStyles,
+    interactionTypeName: interactionTypeStyles,
+    points: interactionTypeStyles,
+    itemHolder: {
+      overflowWrap: 'anywhere',
+      margin: componentTheme.itemHolderMargin
+    },
+    optionsButton: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, optionsButtonDragDropStyle), {}, {
+      cursor: 'pointer'
+    }),
+    dragAndDropHandle: optionsButtonDragDropStyle
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

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

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = generator;
+exports.default = void 0;
 
-function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var spacing = _ref.spacing,
       colors = _ref.colors,
       typography = _ref.typography,
@@ -30,4 +30,7 @@ function generator(_ref) {
     phoneConnectingLinesBorderColor: colors.ash,
     phoneBreakPoint: "max-width: ".concat(breakpoints.medium)
   };
-}
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;

package/lib/common/actions/outcomes.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.setContextUuid = setContextUuid;
+exports.setExternalAccountUuid = setExternalAccountUuid;
 exports.setOutcomesEndpoint = setOutcomesEndpoint;
 exports.setOutcomesToken = setOutcomesToken;
 
@@ -16,6 +17,13 @@ function setContextUuid(contextUuid) {
   };
 }
 
+function setExternalAccountUuid(externalAccountUuid) {
+  return {
+    type: _quizCommon.SET_EXTERNAL_ACCOUNT_UUID,
+    payload: externalAccountUuid
+  };
+}
+
 function setOutcomesEndpoint(endpoint) {
   return {
     type: _quizCommon.SET_OUTCOMES_ENDPOINT,

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

@@ -108,7 +108,7 @@ var SDKApp = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec(_class
     value: function componentWillMount() {
       var _this$props$rceConfig;
 
-      this.store.dispatch([(0, _config.setAPIEndpoint)(this.props.apiEndpoint), (0, _config.setCanvasOrigin)((_this$props$rceConfig = this.props.rceConfig) === null || _this$props$rceConfig === void 0 ? void 0 : _this$props$rceConfig.canvasOrigin), this.setAppContainer(this.props.appContainer), (0, _config.setUserToken)(this.props.userToken), (0, _outcomes.setOutcomesEndpoint)(this.props.outcomesEndpoint), (0, _outcomes.setOutcomesToken)(this.props.outcomesToken), (0, _outcomes.setContextUuid)(this.props.contextUuid)]);
+      this.store.dispatch([(0, _config.setAPIEndpoint)(this.props.apiEndpoint), (0, _config.setCanvasOrigin)((_this$props$rceConfig = this.props.rceConfig) === null || _this$props$rceConfig === void 0 ? void 0 : _this$props$rceConfig.canvasOrigin), this.setAppContainer(this.props.appContainer), (0, _config.setUserToken)(this.props.userToken), (0, _outcomes.setOutcomesEndpoint)(this.props.outcomesEndpoint), (0, _outcomes.setOutcomesToken)(this.props.outcomesToken), (0, _outcomes.setContextUuid)(this.props.contextUuid), (0, _outcomes.setExternalAccountUuid)(this.props.externalAccountUuid)]);
 
       if (this.props.itemBankSharingEnabled) {
         this.store.dispatch((0, _features.addFeatures)('item_bank_sharing'));
@@ -166,6 +166,10 @@ var SDKApp = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec(_class
       if (newProps.gradeByQuestionEnabled !== this.props.gradeByQuestionEnabled && this.props.gradeByQuestionEnabled !== null) {
         this.store.dispatch((0, _grading.setGradeByQuestionEnabled)(newProps.gradeByQuestionEnabled));
       }
+
+      if (newProps.externalAccountUuid !== this.props.externalAccountUuid) {
+        this.store.dispatch((0, _outcomes.setExternalAccountUuid)(newProps.externalAccountUuid));
+      }
     }
   }, {
     key: "render",
@@ -193,6 +197,7 @@ var SDKApp = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec(_class
   appContainer: _CustomPropTypes.default.selectors.isRequired,
   children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]).isRequired,
   contextUuid: _propTypes.default.string,
+  externalAccountUuid: _propTypes.default.string,
   gradeByQuestionEnabled: _propTypes.default.bool,
   itemBankSharingEnabled: _propTypes.default.bool,
   // ESLint seems to this the "locale" prop is unused even though it definitely is
@@ -222,6 +227,7 @@ var SDKApp = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec(_class
   locale: _propTypes.default.string
 }, _class2.defaultProps = {
   contextUuid: '',
+  externalAccountUuid: '',
   gradeByQuestionEnabled: null,
   itemBankSharingEnabled: false,
   locale: null,

package/lib/common/components/layout/navbar/SecondaryNavBarButton/index.js

@@ -70,7 +70,7 @@ var SecondaryNavBarButton = (_dec = (0, _emotion.withStyle)(_styles.default, _th
   }]);
   SecondaryNavBarButton.displayName = "SecondaryNavBarButton";
   return SecondaryNavBarButton;
-}(_react.Component), _class2.propTypes = {
+}(_react.Component), _class2.displayName = 'TopNavBarItem', _class2.propTypes = {
   children: _propTypes.default.string.isRequired,
   styles: _propTypes.default.object,
   makeStyles: _propTypes.default.func

package/lib/common/components/layout/navbar/index.js

@@ -1,65 +1,156 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.mapStateToProps = mapStateToProps;
 exports.default = exports.NavBar = void 0;
 
-var _redux = require("redux");
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
-var _partial = _interopRequireDefault(require("lodash/partial"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 
-var _reactRedux = require("../../../../common/react-redux.js");
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 
-var modalActions = _interopRequireWildcard(require("../../../../common/actions/modal.js"));
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
 
-var _ui = require("../../../../common/actions/ui.js");
+var _react = require("react");
 
-var _quizCommon = require("@instructure/quiz-common");
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _index = require("../../ImportModal/index.js");
+var _uiTopNavBar = require("@instructure/ui-top-nav-bar");
 
-var _presenter = require("./presenter.js");
+var _uiIcons = require("@instructure/ui-icons");
 
-var _quizzes = require("../../../selectors/quizzes.js");
+var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
 
-var _featureCheck = require("../../../util/featureCheck.js");
+var _emotion = require("@instructure/emotion");
 
-var _quizExport = require("../../../actions/quizExport.js");
+var _styles = _interopRequireDefault(require("./styles.js"));
 
-var _alerts = require("../../../actions/alerts.js");
+var _theme = _interopRequireDefault(require("./theme.js"));
 
-function mapStateToProps(state) {
-  var quiz = (0, _quizzes.getActiveQuiz)(state);
-  return {
-    activeQuizId: quiz.id,
-    canExport: !state.getIn(['quizExport', "activeQuiz".concat(quiz.id)]),
-    canImport: quiz.canImport(),
-    hasQuestions: quiz.hasQuestions(),
-    isEditing: state.get('editing') && state.get('editing').some(function (elem) {
-      return elem;
-    }),
-    printingEnabled: (0, _featureCheck.featureOn)('printing')
-  };
-}
+var _dec, _class, _class2, _temp;
 
-var mapDispatchToProps = function mapDispatchToProps(dispatch) {
-  return {
-    addAlert: (0, _redux.bindActionCreators)(_alerts.addAlert, dispatch),
-    addInfo: (0, _redux.bindActionCreators)(_alerts.addInfo, dispatch),
-    openBanksTray: (0, _redux.bindActionCreators)(_ui.set.bind(void 0, _quizCommon.BUILD_TRAY_OPEN, true), dispatch),
-    setBanksTrayButtonRef: (0, _redux.bindActionCreators)((0, _partial.default)(_ui.set, _quizCommon.BUILD_TRAY_BUTTON_REF), dispatch),
-    startExport: (0, _redux.bindActionCreators)(_quizExport.startQuizExportJob, dispatch),
-    openModal: (0, _redux.bindActionCreators)(modalActions.openModal.bind(modalActions, (0, _index.generateImportModalId)('qtiImport')), dispatch)
-  };
-};
+var _ref = (0, _emotion.jsx)(_uiIcons.IconQuizLine, {
+  color: "primary",
+  size: "small"
+});
 
-var NavBar = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(_presenter.NavBar);
+var NavBar = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(NavBar, _Component);
+
+  var _super = (0, _createSuper2.default)(NavBar);
+
+  function NavBar() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, NavBar);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _this.hiddenActionItemsMenuTriggerLabel = function (hiddenChildrenCount) {
+      return (0, _formatMessage.default)('{hiddenChildrenCount} more actions', {
+        hiddenChildrenCount: hiddenChildrenCount
+      });
+    };
+
+    _this.hiddenMenuItemsMenuTriggerLabel = function (hiddenChildrenCount) {
+      return (0, _formatMessage.default)('{hiddenChildrenCount} More', {
+        hiddenChildrenCount: hiddenChildrenCount
+      });
+    };
+
+    _this.renderBrand = function () {
+      return (0, _emotion.jsx)(_uiTopNavBar.TopNavBar.Brand, {
+        screenReaderLabel: (0, _formatMessage.default)('Quizzes'),
+        renderIcon: _ref
+      });
+    };
+
+    _this.renderMenuItems = function () {
+      return (0, _emotion.jsx)(_uiTopNavBar.TopNavBar.MenuItems, {
+        listLabel: (0, _formatMessage.default)('Page navigation'),
+        currentPageId: window.location.pathname,
+        renderHiddenItemsMenuTriggerLabel: _this.hiddenMenuItemsMenuTriggerLabel
+      }, _this.props.menuItems.map(function (menuItem) {
+        return _this.renderMenuItem(menuItem);
+      }));
+    };
+
+    _this.renderMenuItem = function (menuItem) {
+      return (0, _emotion.jsx)(_uiTopNavBar.TopNavBar.Item, {
+        id: menuItem.path,
+        key: menuItem.path,
+        onClick: function onClick() {
+          return _this.props.handleMenuItemChange(menuItem.path);
+        } // eslint-disable-line react/jsx-no-bind
+
+      }, menuItem.text);
+    };
+
+    _this.renderActionItems = function () {
+      return (0, _emotion.jsx)(_uiTopNavBar.TopNavBar.ActionItems, {
+        listLabel: (0, _formatMessage.default)('Actions'),
+        renderHiddenItemsMenuTriggerLabel: _this.hiddenActionItemsMenuTriggerLabel
+      }, (0, _toConsumableArray2.default)(_this.props.actionItems));
+    };
+
+    return _this;
+  }
+
+  (0, _createClass2.default)(NavBar, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      return (0, _emotion.jsx)(_uiTopNavBar.TopNavBar, {
+        breakpoint: this.props.styles.phoneBreakPoint,
+        mediaQueryMatch: "element",
+        inverseColor: true
+      }, function () {
+        return (0, _emotion.jsx)(_uiTopNavBar.TopNavBar.Layout, {
+          themeOverride: {
+            desktopBackgroundInverse: _this2.props.styles.backgroundColor,
+            smallViewportBackgroundInverse: _this2.props.styles.backgroundColor
+          },
+          navLabel: (0, _formatMessage.default)('Quizzes navigation bar'),
+          desktopConfig: {
+            hideActionsUserSeparator: true
+          },
+          smallViewportConfig: {
+            dropdownMenuToggleButtonLabel: (0, _formatMessage.default)('Toggle Menu'),
+            dropdownMenuLabel: (0, _formatMessage.default)('Main Menu')
+          },
+          renderBrand: _this2.renderBrand(),
+          renderMenuItems: _this2.renderMenuItems(),
+          renderActionItems: _this2.renderActionItems()
+        });
+      });
+    }
+  }]);
+  NavBar.displayName = "NavBar";
+  return NavBar;
+}(_react.Component), _class2.propTypes = {
+  menuItems: _propTypes.default.arrayOf(_propTypes.default.shape({
+    path: _propTypes.default.string.isRequired,
+    text: _propTypes.default.string.isRequired
+  })),
+  handleMenuItemChange: _propTypes.default.func,
+  actionItems: _propTypes.default.arrayOf(_propTypes.default.node),
+  styles: _propTypes.default.object
+}, _class2.defaultProps = {
+  menuItems: [],
+  handleMenuItemChange: function handleMenuItemChange() {},
+  actionItems: []
+}, _temp)) || _class);
 exports.NavBar = NavBar;
 var _default = NavBar;
 exports.default = _default;

package/lib/common/components/resources/item/ItemEdit/index.js

@@ -47,7 +47,8 @@ function mapStateToProps(state, props) {
   var workingItem = props.entry.getWorkingInstance();
   var isValid = workingItem.isValid();
   var errorsShowing = state.get('errorsShowing', (0, _immutable.Map)());
-  var errorsAreShowing = errorsShowing.get(props.guid);
+  var errorsAreShowing = errorsShowing.get(props.guid); // Null must always be passed to contextUuid when working with banks
+
   var contextUuid = props.contextUuid === void 0 ? state.getIn(['outcomes', 'contextUuid']) : props.contextUuid;
   return {
     answerFeedbackEnabled: (0, _featureCheck.featureOn)('answer_level_feedback'),
@@ -65,7 +66,9 @@ function mapStateToProps(state, props) {
     partialDeepScoringEnabled: (0, _featureCheck.featureOn)('partial_deep_scoring'),
     partialScoringEnabled: (0, _featureCheck.featureOn)('partial_scoring'),
     quizId: (0, _quizzes2.getActiveQuizId)(state),
-    showCalculator: (0, _featureCheck.featureOn)('calculator_per_question')
+    showCalculator: (0, _featureCheck.featureOn)('calculator_per_question'),
+    scope: props.scope,
+    rootAccountUuid: state.getIn(['outcomes', 'externalAccountUuid'])
   };
 }
 

package/lib/common/components/resources/item/ItemEdit/presenter.js

@@ -45,6 +45,8 @@ var _ElementsForSelectors = _interopRequireDefault(require("../../../../../commo
 
 var _instUIMessages = require("../../../../util/instUIMessages.js");
 
+var _featureCheck = require("../../../../../common/util/featureCheck.js");
+
 var ItemEdit = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(ItemEdit, _Component);
 
@@ -102,27 +104,53 @@ var ItemEdit = /*#__PURE__*/function (_Component) {
           workingItem = _this$props.workingItem;
       var itemId = guid || workingItem.get('id');
       var outcomeAlignmentSetGuid = workingItem.get('outcomeAlignmentSetGuid');
+      var launchContexts = [];
+      var rootAccountName = this.props.scope.root_account_name;
+      var launchContextUuid = this.props.scope.launch_context_uuid;
+      var launchContextTitle = this.props.scope.title; // If editing within a quiz, there is no account launch context
+
+      if ((0, _featureCheck.featureOn)('sub_account_bank_sharing') && rootAccountName) {
+        launchContexts.push({
+          uuid: this.props.rootAccountUuid,
+          name: rootAccountName
+        }); // Add if it is a course or sub-account launch context
+
+        if (launchContextUuid && launchContextUuid !== this.props.rootAccountUuid) {
+          launchContexts.push({
+            uuid: launchContextUuid,
+            name: launchContextTitle
+          });
+        }
+      }
+
       var options = [];
 
       if (this.props.outcomesEndpoint) {
         options.push({
           key: 'outcomes',
-          title: /*#__PURE__*/_react.default.createElement("span", null, (0, _formatMessage.default)('Align to Outcomes'), " ", /*#__PURE__*/_react.default.createElement(_OutcomeCount.default, {
+          title: /*#__PURE__*/_react.default.createElement("span", null, (0, _formatMessage.default)('Align to Outcomes'), /*#__PURE__*/_react.default.createElement(_OutcomeCount.default, Object.assign({
             alignmentSetId: outcomeAlignmentSetGuid,
             artifactType: "quizEntry",
             artifactId: itemId,
-            contextUuid: this.props.contextUuid,
+            contextUuid: this.props.contextUuid // Both components need to be aware of the launch contexts
+
+          }, launchContexts.length > 0 && {
+            launchContexts: launchContexts
+          }, {
             host: this.props.outcomesEndpoint,
             jwt: this.props.outcomesToken,
             screenreaderNotification: this.props.screenreaderNotification,
             liveRegion: _quizCommon.liveRegion
-          })),
-          component: /*#__PURE__*/_react.default.createElement(_OutcomeAlignments.default, {
+          }))),
+          component: /*#__PURE__*/_react.default.createElement(_OutcomeAlignments.default, Object.assign({
             artifactType: "quizEntry",
             artifactId: itemId,
             applicationElement: this.applicationElement,
             alignmentSetId: outcomeAlignmentSetGuid,
-            contextUuid: this.props.contextUuid,
+            contextUuid: this.props.contextUuid
+          }, launchContexts.length > 0 && {
+            launchContexts: launchContexts
+          }, {
             emptySetHeading: (0, _formatMessage.default)('Align Institution outcomes to this question.'),
             host: this.props.outcomesEndpoint,
             jwt: this.props.outcomesToken,
@@ -131,7 +159,7 @@ var ItemEdit = /*#__PURE__*/function (_Component) {
             onUpdate: this.onOutcomeAlignmentSetChange,
             screenreaderNotification: this.props.screenreaderNotification,
             liveRegion: _quizCommon.liveRegion
-          })
+          }))
         });
       }
 
@@ -201,7 +229,15 @@ ItemEdit.propTypes = {
   validationErrorsFromApi: _propTypes.default.objectOf(_propTypes.default.arrayOf(_propTypes.default.shape({
     type: _propTypes.default.string,
     text: _propTypes.default.string
-  })))
+  }))),
+  scope: _propTypes.default.shape({
+    type: _propTypes.default.string,
+    uuid: _propTypes.default.string,
+    title: _propTypes.default.string,
+    launch_context_uuid: _propTypes.default.string,
+    root_account_name: _propTypes.default.string
+  }),
+  rootAccountUuid: _propTypes.default.string
 };
 ItemEdit.defaultProps = {
   additionalOptions: [],
@@ -216,7 +252,9 @@ ItemEdit.defaultProps = {
   quizId: null,
   initialFocusId: null,
   showCalculator: false,
-  validationErrorsFromApi: {}
+  validationErrorsFromApi: {},
+  scope: {},
+  rootAccountUuid: null
 };
 var _default = ItemEdit;
 exports.default = _default;