@instructure/quiz-core 20.3.1-rc.2 → 20.3.1-rc.4

package/lib/building/components/layout/header/BuildingButtonsICE/presenter.js

@@ -0,0 +1,274 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.BuildingButtonsICE = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _uiDrilldown = require("@instructure/ui-drilldown");
+
+var _uiView = require("@instructure/ui-view");
+
+var _uiTopNavBar = require("@instructure/ui-top-nav-bar");
+
+var _uiIcons = require("@instructure/ui-icons");
+
+var _index = _interopRequireDefault(require("../../../../../common/components/shared/PrintTrigger/index.js"));
+
+var _quizCommon = require("@instructure/quiz-common");
+
+var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
+
+var _ref = /*#__PURE__*/_react.default.createElement(_uiIcons.IconSpeedGraderLine, null);
+
+var _ref2 = /*#__PURE__*/_react.default.createElement(_uiIcons.IconImportLine, {
+  "data-automation": "sdk-import-content-icon"
+});
+
+var _ref3 = /*#__PURE__*/_react.default.createElement(_uiIcons.IconExportLine, {
+  "data-automation": "sdk-export-content-icon"
+});
+
+var _ref4 = /*#__PURE__*/_react.default.createElement(_uiIcons.IconBankLine, {
+  "data-automation": "sdk-manage-item-banks-icon"
+});
+
+var _ref5 = /*#__PURE__*/_react.default.createElement(_uiIcons.IconPrinterLine, {
+  "data-automation": "sdk-print-icon"
+});
+
+var _ref6 = /*#__PURE__*/_react.default.createElement(_uiIcons.IconPrinterLine, {
+  "data-automation": "sdk-print-blank-icon"
+});
+
+var BuildingButtonsICE = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(BuildingButtonsICE, _Component);
+
+  var _super = (0, _createSuper2.default)(BuildingButtonsICE);
+
+  function BuildingButtonsICE() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, BuildingButtonsICE);
+
+    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.quizExportAlert = function () {
+      _this.props.addInfo((0, _formatMessage.default)("The export process has been started. This can take a while for larger quizzes.\n      You can leave the page and you'll get notified when the export is completed."));
+    };
+
+    _this.openBanksTray = function () {
+      _this.props.setBanksTrayButtonRef(_this.banksTrayButton);
+
+      _this.props.openBanksTray();
+    };
+
+    _this.openSpeedgraderLink = function () {
+      window.open(_this.props.speedgraderLink, '_blank');
+    };
+
+    _this.startQuizExportJob = function () {
+      if (_this.props.canExport) {
+        var _this$props = _this.props,
+            activeQuizId = _this$props.activeQuizId,
+            contextUuid = _this$props.contextUuid;
+        var exportSettings = {
+          export_type: 'qti',
+          everything: false,
+          quizzes: [activeQuizId]
+        };
+
+        _this.quizExportAlert();
+
+        _this.props.contentExport({
+          contextUuid: contextUuid,
+          exportSettings: exportSettings
+        }, _this.props.addAlert);
+
+        _this.props.startExport(activeQuizId);
+      }
+    };
+
+    return _this;
+  }
+
+  (0, _createClass2.default)(BuildingButtonsICE, [{
+    key: "isBuildingPage",
+    value: function isBuildingPage() {
+      return 'building' === this.props.app;
+    }
+  }, {
+    key: "renderOptions",
+    value: function renderOptions(handlePrint) {
+      if (!this.isBuildingPage()) return;
+      var options = [];
+
+      if (this.props.speedgraderLink) {
+        options.push( /*#__PURE__*/_react.default.createElement(_uiDrilldown.Drilldown.Option, {
+          id: "speedgrader",
+          key: "speedgrader",
+          onOptionClick: this.openSpeedgraderLink
+        }, _ref, /*#__PURE__*/_react.default.createElement(_uiView.View, {
+          as: "span",
+          margin: "0 0 0 x-small"
+        }, (0, _formatMessage.default)('Speedgrader'))));
+      }
+
+      options.push( /*#__PURE__*/_react.default.createElement(_uiDrilldown.Drilldown.Option, {
+        id: "import",
+        key: "import",
+        disabled: !this.props.canImport,
+        onOptionClick: this.props.openModal,
+        "data-automation": "sdk-import-content-menuitem"
+      }, _ref2, /*#__PURE__*/_react.default.createElement(_uiView.View, {
+        as: "span",
+        margin: "0 0 0 x-small"
+      }, (0, _formatMessage.default)('Import Content'))));
+
+      if (this.props.contentExportEnabled) {
+        options.push( /*#__PURE__*/_react.default.createElement(_uiDrilldown.Drilldown.Option, {
+          id: "export",
+          key: "export",
+          disabled: !this.props.canExport,
+          onOptionClick: this.startQuizExportJob,
+          "data-automation": "sdk-export-content-menuitem"
+        }, _ref3, /*#__PURE__*/_react.default.createElement(_uiView.View, {
+          as: "span",
+          margin: "0 0 0 x-small"
+        }, (0, _formatMessage.default)('Export Content'))));
+      }
+
+      if (this.props.enableItemBanking) {
+        options.push( /*#__PURE__*/_react.default.createElement(_uiDrilldown.Drilldown.Option, {
+          id: "banks",
+          key: "banks",
+          onOptionClick: this.props.navigateToBanks,
+          "data-automation": "sdk-manage-item-banks-menuitem"
+        }, _ref4, /*#__PURE__*/_react.default.createElement(_uiView.View, {
+          as: "span",
+          margin: "0 0 0 x-small"
+        }, (0, _formatMessage.default)('Manage Item Banks'))));
+      }
+
+      if (this.props.printingEnabled) {
+        {
+          /* eslint-disable react/jsx-no-bind */
+        }
+        options.push( /*#__PURE__*/_react.default.createElement(_uiDrilldown.Drilldown.Option, {
+          id: "printKey",
+          key: "printKey",
+          disabled: !this.props.hasQuestions || this.props.isEditing,
+          onOptionClick: function onOptionClick() {
+            return handlePrint(_quizCommon.PRINT_CURRENT_PAGE);
+          },
+          "data-automation": "sdk-print-key-menuitem"
+        }, _ref5, /*#__PURE__*/_react.default.createElement(_uiView.View, {
+          as: "span",
+          margin: "0 0 0 x-small"
+        }, (0, _formatMessage.default)('Print Key (With Answers)'))));
+        options.push( /*#__PURE__*/_react.default.createElement(_uiDrilldown.Drilldown.Option, {
+          id: "printBlank",
+          key: "printBlank",
+          disabled: !this.props.hasQuestions || this.props.isEditing,
+          onOptionClick: function onOptionClick() {
+            return handlePrint(_quizCommon.PRINT_BLANK);
+          },
+          "data-automation": "sdk-print-blank-menuitem"
+        }, _ref6, /*#__PURE__*/_react.default.createElement(_uiView.View, {
+          as: "span",
+          margin: "0 0 0 x-small"
+        }, (0, _formatMessage.default)('Print Blank Quiz'))));
+        {
+          /* eslint-enable react/jsx-no-bind */
+        }
+      }
+
+      if (options.length < 1) return;
+      return /*#__PURE__*/_react.default.createElement(_uiTopNavBar.TopNavBar.Item, {
+        id: this.props.id,
+        variant: "icon",
+        renderIcon: this.props.renderIcon,
+        showSubmenuChevron: false,
+        renderSubmenu: /*#__PURE__*/_react.default.createElement(_uiDrilldown.Drilldown, {
+          rootPageId: "root"
+        }, /*#__PURE__*/_react.default.createElement(_uiDrilldown.Drilldown.Page, {
+          id: "root"
+        }, options))
+      }, (0, _formatMessage.default)('More'));
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      /* eslint-disable react/jsx-no-bind */
+      return /*#__PURE__*/_react.default.createElement(_index.default, {
+        render: function render(handlePrint) {
+          return _this2.renderOptions(handlePrint);
+        },
+        navigateToPreviewPrint: this.props.navigateToPreviewPrint
+      });
+      /* eslint-enable react/jsx-no-bind */
+    }
+  }]);
+  BuildingButtonsICE.displayName = "BuildingButtonsICE";
+  return BuildingButtonsICE;
+}(_react.Component);
+
+exports.BuildingButtonsICE = BuildingButtonsICE;
+BuildingButtonsICE.propTypes = {
+  id: _propTypes.default.string.isRequired,
+  renderIcon: _propTypes.default.element.isRequired,
+  app: _propTypes.default.string,
+  addAlert: _propTypes.default.func.isRequired,
+  addInfo: _propTypes.default.func,
+  activeQuizId: _propTypes.default.string,
+  canExport: _propTypes.default.bool.isRequired,
+  canImport: _propTypes.default.bool.isRequired,
+  contentExportEnabled: _propTypes.default.bool,
+  contentExport: _propTypes.default.func,
+  enableItemBanking: _propTypes.default.bool,
+  hasQuestions: _propTypes.default.bool.isRequired,
+  isEditing: _propTypes.default.bool.isRequired,
+  navigateToBanks: _propTypes.default.func.isRequired,
+  navigateToPreviewPrint: _propTypes.default.func.isRequired,
+  openBanksTray: _propTypes.default.func.isRequired,
+  openModal: _propTypes.default.func.isRequired,
+  printingEnabled: _propTypes.default.bool.isRequired,
+  setBanksTrayButtonRef: _propTypes.default.func.isRequired,
+  speedgraderLink: _propTypes.default.string,
+  startExport: _propTypes.default.func.isRequired,
+  contextUuid: _propTypes.default.string
+};
+BuildingButtonsICE.defaultProps = {
+  activeQuizId: null,
+  addInfo: function addInfo() {},
+  app: null,
+  contentExportEnabled: false,
+  contentExport: null,
+  enableItemBanking: true,
+  speedgraderLink: null,
+  contextUuid: null
+};
+var _default = BuildingButtonsICE;
+exports.default = _default;

package/lib/common/components/SDKNavBar.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SDKNavBar = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactRedux = require("../react-redux.js");
+
+var _reduxStore = _interopRequireDefault(require("../../reduxStore.js"));
+
+var _index = _interopRequireDefault(require("./layout/navbar/index.js"));
+
+var SDKNavBar = function SDKNavBar(props) {
+  return /*#__PURE__*/_react.default.createElement(_reactRedux.Provider, {
+    store: _reduxStore.default
+  }, /*#__PURE__*/_react.default.createElement(_index.default, props));
+};
+
+exports.SDKNavBar = SDKNavBar;
+_index.default.displayName = 'SDKNavBar';
+var _default = SDKNavBar;
+exports.default = _default;

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

@@ -0,0 +1,65 @@
+"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 _partial = _interopRequireDefault(require("lodash/partial"));
+
+var _reactRedux = require("../../../../common/react-redux.js");
+
+var modalActions = _interopRequireWildcard(require("../../../../common/actions/modal.js"));
+
+var _ui = require("../../../../common/actions/ui.js");
+
+var _quizCommon = require("@instructure/quiz-common");
+
+var _index = require("../../ImportModal/index.js");
+
+var _presenter = require("./presenter.js");
+
+var _quizzes = require("../../../selectors/quizzes.js");
+
+var _featureCheck = require("../../../util/featureCheck.js");
+
+var _quizExport = require("../../../actions/quizExport.js");
+
+var _alerts = require("../../../actions/alerts.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 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 NavBar = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(_presenter.NavBar);
+exports.NavBar = NavBar;
+var _default = NavBar;
+exports.default = _default;

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

@@ -0,0 +1,133 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.NavBar = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _uiTopNavBar = require("@instructure/ui-top-nav-bar");
+
+var _uiIcons = require("@instructure/ui-icons");
+
+var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
+
+var _ref = /*#__PURE__*/_react.default.createElement(_uiIcons.IconQuizLine, {
+  color: "primary",
+  size: "small"
+});
+
+var NavBar = /*#__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
+      });
+    };
+
+    return _this;
+  }
+
+  (0, _createClass2.default)(NavBar, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      return /*#__PURE__*/_react.default.createElement(_uiTopNavBar.TopNavBar, {
+        breakpoint: "48em",
+        mediaQueryMatch: "element",
+        inverseColor: true
+      }, function () {
+        return /*#__PURE__*/_react.default.createElement(_uiTopNavBar.TopNavBar.Layout, {
+          themeOverride: {
+            desktopBackgroundInverse: '#f5f5f5',
+            smallViewportBackgroundInverse: '#f5f5f5'
+          },
+          navLabel: (0, _formatMessage.default)('Quizzes navigation bar'),
+          desktopConfig: {
+            hideActionsUserSeparator: true
+          },
+          smallViewportConfig: {
+            dropdownMenuToggleButtonLabel: (0, _formatMessage.default)('Toggle Menu'),
+            dropdownMenuLabel: (0, _formatMessage.default)('Main Menu')
+          },
+          renderBrand: /*#__PURE__*/_react.default.createElement(_uiTopNavBar.TopNavBar.Brand, {
+            screenReaderLabel: (0, _formatMessage.default)('Quizzes'),
+            renderIcon: _ref
+          }),
+          renderMenuItems: /*#__PURE__*/_react.default.createElement(_uiTopNavBar.TopNavBar.MenuItems, {
+            listLabel: (0, _formatMessage.default)('Page navigation'),
+            currentPageId: window.location.pathname,
+            renderHiddenItemsMenuTriggerLabel: _this2.hiddenMenuItemsMenuTriggerLabel
+          }, _this2.props.menuItems.map(function (menuItem) {
+            return /*#__PURE__*/_react.default.createElement(_uiTopNavBar.TopNavBar.Item, {
+              id: menuItem.path,
+              key: menuItem.path,
+              onClick: _this2.props.handleMenuItemChange
+            }, menuItem.text);
+          })),
+          renderActionItems: /*#__PURE__*/_react.default.createElement(_uiTopNavBar.TopNavBar.ActionItems, {
+            listLabel: (0, _formatMessage.default)('Actions'),
+            renderHiddenItemsMenuTriggerLabel: _this2.hiddenActionItemsMenuTriggerLabel
+          }, (0, _toConsumableArray2.default)(_this2.props.actionItems))
+        });
+      });
+    }
+  }]);
+  NavBar.displayName = "NavBar";
+  return NavBar;
+}(_react.Component);
+
+exports.NavBar = NavBar;
+NavBar.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)
+};
+NavBar.defaultProps = {
+  menuItems: [],
+  handleMenuItemChange: function handleMenuItemChange() {},
+  actionItems: []
+};
+var _default = NavBar;
+exports.default = _default;