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

package/es/building/components/layout/header/BuildingButtonsICE/index.js

@@ -0,0 +1,40 @@
+import { bindActionCreators } from 'redux';
+import partial from 'lodash/partial';
+import { connect } from "../../../../../common/react-redux.js";
+import * as modalActions from "../../../../../common/actions/modal.js";
+import { set as setUI } from "../../../../../common/actions/ui.js";
+import { BUILD_TRAY_OPEN, BUILD_TRAY_BUTTON_REF } from '@instructure/quiz-common';
+import { generateImportModalId } from "../../../../../common/components/ImportModal/index.js";
+import { BuildingButtonsICE as BuildingButtonsICEPresenter } from "./presenter.js";
+import { getActiveQuiz } from "../../../../../common/selectors/quizzes.js";
+import { featureOn } from "../../../../../common/util/featureCheck.js";
+import { startQuizExportJob } from "../../../../../common/actions/quizExport.js";
+import { addAlert, addInfo } from "../../../../../common/actions/alerts.js";
+export function mapStateToProps(state) {
+  var quiz = 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: featureOn('printing')
+  };
+}
+
+var mapDispatchToProps = function mapDispatchToProps(dispatch) {
+  return {
+    addAlert: bindActionCreators(addAlert, dispatch),
+    addInfo: bindActionCreators(addInfo, dispatch),
+    openBanksTray: bindActionCreators(setUI.bind(void 0, BUILD_TRAY_OPEN, true), dispatch),
+    setBanksTrayButtonRef: bindActionCreators(partial(setUI, BUILD_TRAY_BUTTON_REF), dispatch),
+    startExport: bindActionCreators(startQuizExportJob, dispatch),
+    openModal: bindActionCreators(modalActions.openModal.bind(modalActions, generateImportModalId('qtiImport')), dispatch)
+  };
+};
+
+var BuildingButtonsICE = connect(mapStateToProps, mapDispatchToProps)(BuildingButtonsICEPresenter);
+BuildingButtonsICE.displayName = 'TopNavBarItem';
+export default BuildingButtonsICE;

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

@@ -0,0 +1,249 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Drilldown } from '@instructure/ui-drilldown';
+import { View } from '@instructure/ui-view';
+import { TopNavBar } from '@instructure/ui-top-nav-bar';
+import { IconExportLine, IconImportLine, IconBankLine, IconPrinterLine, IconSpeedGraderLine } from '@instructure/ui-icons';
+import PrintTrigger from "../../../../../common/components/shared/PrintTrigger/index.js";
+import { PRINT_CURRENT_PAGE, PRINT_BLANK } from '@instructure/quiz-common';
+import t from '@instructure/quiz-i18n/es/format-message';
+
+var _ref = /*#__PURE__*/React.createElement(IconSpeedGraderLine, null);
+
+var _ref2 = /*#__PURE__*/React.createElement(IconImportLine, {
+  "data-automation": "sdk-import-content-icon"
+});
+
+var _ref3 = /*#__PURE__*/React.createElement(IconExportLine, {
+  "data-automation": "sdk-export-content-icon"
+});
+
+var _ref4 = /*#__PURE__*/React.createElement(IconBankLine, {
+  "data-automation": "sdk-manage-item-banks-icon"
+});
+
+var _ref5 = /*#__PURE__*/React.createElement(IconPrinterLine, {
+  "data-automation": "sdk-print-icon"
+});
+
+var _ref6 = /*#__PURE__*/React.createElement(IconPrinterLine, {
+  "data-automation": "sdk-print-blank-icon"
+});
+
+export var BuildingButtonsICE = /*#__PURE__*/function (_Component) {
+  _inherits(BuildingButtonsICE, _Component);
+
+  var _super = _createSuper(BuildingButtonsICE);
+
+  function BuildingButtonsICE() {
+    var _this;
+
+    _classCallCheck(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(t("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;
+  }
+
+  _createClass(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.createElement(Drilldown.Option, {
+          id: "speedgrader",
+          key: "speedgrader",
+          onOptionClick: this.openSpeedgraderLink
+        }, _ref, /*#__PURE__*/React.createElement(View, {
+          as: "span",
+          margin: "0 0 0 x-small"
+        }, t('Speedgrader'))));
+      }
+
+      options.push( /*#__PURE__*/React.createElement(Drilldown.Option, {
+        id: "import",
+        key: "import",
+        disabled: !this.props.canImport,
+        onOptionClick: this.props.openModal,
+        "data-automation": "sdk-import-content-menuitem"
+      }, _ref2, /*#__PURE__*/React.createElement(View, {
+        as: "span",
+        margin: "0 0 0 x-small"
+      }, t('Import Content'))));
+
+      if (this.props.contentExportEnabled) {
+        options.push( /*#__PURE__*/React.createElement(Drilldown.Option, {
+          id: "export",
+          key: "export",
+          disabled: !this.props.canExport,
+          onOptionClick: this.startQuizExportJob,
+          "data-automation": "sdk-export-content-menuitem"
+        }, _ref3, /*#__PURE__*/React.createElement(View, {
+          as: "span",
+          margin: "0 0 0 x-small"
+        }, t('Export Content'))));
+      }
+
+      if (this.props.enableItemBanking) {
+        options.push( /*#__PURE__*/React.createElement(Drilldown.Option, {
+          id: "banks",
+          key: "banks",
+          onOptionClick: this.props.navigateToBanks,
+          "data-automation": "sdk-manage-item-banks-menuitem"
+        }, _ref4, /*#__PURE__*/React.createElement(View, {
+          as: "span",
+          margin: "0 0 0 x-small"
+        }, t('Manage Item Banks'))));
+      }
+
+      if (this.props.printingEnabled) {
+        {
+          /* eslint-disable react/jsx-no-bind */
+        }
+        options.push( /*#__PURE__*/React.createElement(Drilldown.Option, {
+          id: "printKey",
+          key: "printKey",
+          disabled: !this.props.hasQuestions || this.props.isEditing,
+          onOptionClick: function onOptionClick() {
+            return handlePrint(PRINT_CURRENT_PAGE);
+          },
+          "data-automation": "sdk-print-key-menuitem"
+        }, _ref5, /*#__PURE__*/React.createElement(View, {
+          as: "span",
+          margin: "0 0 0 x-small"
+        }, t('Print Key (With Answers)'))));
+        options.push( /*#__PURE__*/React.createElement(Drilldown.Option, {
+          id: "printBlank",
+          key: "printBlank",
+          disabled: !this.props.hasQuestions || this.props.isEditing,
+          onOptionClick: function onOptionClick() {
+            return handlePrint(PRINT_BLANK);
+          },
+          "data-automation": "sdk-print-blank-menuitem"
+        }, _ref6, /*#__PURE__*/React.createElement(View, {
+          as: "span",
+          margin: "0 0 0 x-small"
+        }, t('Print Blank Quiz'))));
+        {
+          /* eslint-enable react/jsx-no-bind */
+        }
+      }
+
+      if (options.length < 1) return;
+      return /*#__PURE__*/React.createElement(TopNavBar.Item, {
+        id: this.props.id,
+        variant: "icon",
+        renderIcon: this.props.renderIcon,
+        showSubmenuChevron: false,
+        renderSubmenu: /*#__PURE__*/React.createElement(Drilldown, {
+          rootPageId: "root"
+        }, /*#__PURE__*/React.createElement(Drilldown.Page, {
+          id: "root"
+        }, options))
+      }, t('More'));
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      /* eslint-disable react/jsx-no-bind */
+      return /*#__PURE__*/React.createElement(PrintTrigger, {
+        render: function render(handlePrint) {
+          return _this2.renderOptions(handlePrint);
+        },
+        navigateToPreviewPrint: this.props.navigateToPreviewPrint
+      });
+      /* eslint-enable react/jsx-no-bind */
+    }
+  }]);
+
+  BuildingButtonsICE.displayName = "BuildingButtonsICE";
+  return BuildingButtonsICE;
+}(Component);
+BuildingButtonsICE.propTypes = {
+  id: PropTypes.string.isRequired,
+  renderIcon: PropTypes.element.isRequired,
+  app: PropTypes.string,
+  addAlert: PropTypes.func.isRequired,
+  addInfo: PropTypes.func,
+  activeQuizId: PropTypes.string,
+  canExport: PropTypes.bool.isRequired,
+  canImport: PropTypes.bool.isRequired,
+  contentExportEnabled: PropTypes.bool,
+  contentExport: PropTypes.func,
+  enableItemBanking: PropTypes.bool,
+  hasQuestions: PropTypes.bool.isRequired,
+  isEditing: PropTypes.bool.isRequired,
+  navigateToBanks: PropTypes.func.isRequired,
+  navigateToPreviewPrint: PropTypes.func.isRequired,
+  openBanksTray: PropTypes.func.isRequired,
+  openModal: PropTypes.func.isRequired,
+  printingEnabled: PropTypes.bool.isRequired,
+  setBanksTrayButtonRef: PropTypes.func.isRequired,
+  speedgraderLink: PropTypes.string,
+  startExport: PropTypes.func.isRequired,
+  contextUuid: PropTypes.string
+};
+BuildingButtonsICE.defaultProps = {
+  activeQuizId: null,
+  addInfo: function addInfo() {},
+  app: null,
+  contentExportEnabled: false,
+  contentExport: null,
+  enableItemBanking: true,
+  speedgraderLink: null,
+  contextUuid: null
+};
+export default BuildingButtonsICE;

package/es/common/components/SDKNavBar.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Provider } from "../react-redux.js";
+import store from "../../reduxStore.js";
+import NavBar from "./layout/navbar/index.js";
+export var SDKNavBar = function SDKNavBar(props) {
+  return /*#__PURE__*/React.createElement(Provider, {
+    store: store
+  }, /*#__PURE__*/React.createElement(NavBar, props));
+};
+NavBar.displayName = 'SDKNavBar';
+export default SDKNavBar;

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

@@ -0,0 +1,39 @@
+import { bindActionCreators } from 'redux';
+import partial from 'lodash/partial';
+import { connect } from "../../../../common/react-redux.js";
+import * as modalActions from "../../../../common/actions/modal.js";
+import { set as setUI } from "../../../../common/actions/ui.js";
+import { BUILD_TRAY_OPEN, BUILD_TRAY_BUTTON_REF } from '@instructure/quiz-common';
+import { generateImportModalId } from "../../ImportModal/index.js";
+import { NavBar as NavBarPresenter } from "./presenter.js";
+import { getActiveQuiz } from "../../../selectors/quizzes.js";
+import { featureOn } from "../../../util/featureCheck.js";
+import { startQuizExportJob } from "../../../actions/quizExport.js";
+import { addAlert, addInfo } from "../../../actions/alerts.js";
+export function mapStateToProps(state) {
+  var quiz = 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: featureOn('printing')
+  };
+}
+
+var mapDispatchToProps = function mapDispatchToProps(dispatch) {
+  return {
+    addAlert: bindActionCreators(addAlert, dispatch),
+    addInfo: bindActionCreators(addInfo, dispatch),
+    openBanksTray: bindActionCreators(setUI.bind(void 0, BUILD_TRAY_OPEN, true), dispatch),
+    setBanksTrayButtonRef: bindActionCreators(partial(setUI, BUILD_TRAY_BUTTON_REF), dispatch),
+    startExport: bindActionCreators(startQuizExportJob, dispatch),
+    openModal: bindActionCreators(modalActions.openModal.bind(modalActions, generateImportModalId('qtiImport')), dispatch)
+  };
+};
+
+export var NavBar = connect(mapStateToProps, mapDispatchToProps)(NavBarPresenter);
+export default NavBar;

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

@@ -0,0 +1,111 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { TopNavBar } from '@instructure/ui-top-nav-bar';
+import { IconQuizLine } from '@instructure/ui-icons';
+import t from '@instructure/quiz-i18n/es/format-message';
+
+var _ref = /*#__PURE__*/React.createElement(IconQuizLine, {
+  color: "primary",
+  size: "small"
+});
+
+export var NavBar = /*#__PURE__*/function (_Component) {
+  _inherits(NavBar, _Component);
+
+  var _super = _createSuper(NavBar);
+
+  function NavBar() {
+    var _this;
+
+    _classCallCheck(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 t('{hiddenChildrenCount} more actions', {
+        hiddenChildrenCount: hiddenChildrenCount
+      });
+    };
+
+    _this.hiddenMenuItemsMenuTriggerLabel = function (hiddenChildrenCount) {
+      return t('{hiddenChildrenCount} More', {
+        hiddenChildrenCount: hiddenChildrenCount
+      });
+    };
+
+    return _this;
+  }
+
+  _createClass(NavBar, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      return /*#__PURE__*/React.createElement(TopNavBar, {
+        breakpoint: "48em",
+        mediaQueryMatch: "element",
+        inverseColor: true
+      }, function () {
+        return /*#__PURE__*/React.createElement(TopNavBar.Layout, {
+          themeOverride: {
+            desktopBackgroundInverse: '#f5f5f5',
+            smallViewportBackgroundInverse: '#f5f5f5'
+          },
+          navLabel: t('Quizzes navigation bar'),
+          desktopConfig: {
+            hideActionsUserSeparator: true
+          },
+          smallViewportConfig: {
+            dropdownMenuToggleButtonLabel: t('Toggle Menu'),
+            dropdownMenuLabel: t('Main Menu')
+          },
+          renderBrand: /*#__PURE__*/React.createElement(TopNavBar.Brand, {
+            screenReaderLabel: t('Quizzes'),
+            renderIcon: _ref
+          }),
+          renderMenuItems: /*#__PURE__*/React.createElement(TopNavBar.MenuItems, {
+            listLabel: t('Page navigation'),
+            currentPageId: window.location.pathname,
+            renderHiddenItemsMenuTriggerLabel: _this2.hiddenMenuItemsMenuTriggerLabel
+          }, _this2.props.menuItems.map(function (menuItem) {
+            return /*#__PURE__*/React.createElement(TopNavBar.Item, {
+              id: menuItem.path,
+              key: menuItem.path,
+              onClick: _this2.props.handleMenuItemChange
+            }, menuItem.text);
+          })),
+          renderActionItems: /*#__PURE__*/React.createElement(TopNavBar.ActionItems, {
+            listLabel: t('Actions'),
+            renderHiddenItemsMenuTriggerLabel: _this2.hiddenActionItemsMenuTriggerLabel
+          }, _toConsumableArray(_this2.props.actionItems))
+        });
+      });
+    }
+  }]);
+
+  NavBar.displayName = "NavBar";
+  return NavBar;
+}(Component);
+NavBar.propTypes = {
+  menuItems: PropTypes.arrayOf(PropTypes.shape({
+    path: PropTypes.string.isRequired,
+    text: PropTypes.string.isRequired
+  })),
+  handleMenuItemChange: PropTypes.func,
+  actionItems: PropTypes.arrayOf(PropTypes.node)
+};
+NavBar.defaultProps = {
+  menuItems: [],
+  handleMenuItemChange: function handleMenuItemChange() {},
+  actionItems: []
+};
+export default NavBar;

package/es/index.js

@@ -32,9 +32,11 @@ export { Banks as BanksPage } from "./banks/components/Banks/index.js";
 export { Bank as BankPage } from "./banks/components/Bank/index.js";
 export { BankEntry as BankEntryPage } from "./banks/components/BankEntry/index.js";
 export { SDKBuildingButtons } from "./building/components/layout/header/SDKBuildingButtons/index.js";
+export { default as SDKBuildingButtonsICE } from "./building/components/layout/header/BuildingButtonsICE/index.js";
 export { Paginator } from "./common/components/shared/Paginator/index.js";
 export { SDKMenuButton } from "./common/components/SDKMenuButton.js";
 export { SDKTimer } from "./common/components/SDKTimer.js";
+export { SDKNavBar } from "./common/components/SDKNavBar.js";
 export { CentileDistribution } from "./reporting/components/charts/Distribution/CentileDistribution.js";
 export { OutcomeAnalysis } from "./reporting/components/resources/OutcomeAnalysis/index.js";
 export { PositionBox } from "./common/components/resources/positionBox/PositionBox.js";

package/lib/building/components/layout/header/BuildingButtonsICE/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 = 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("../../../../../common/components/ImportModal/index.js");
+
+var _presenter = require("./presenter.js");
+
+var _quizzes = require("../../../../../common/selectors/quizzes.js");
+
+var _featureCheck = require("../../../../../common/util/featureCheck.js");
+
+var _quizExport = require("../../../../../common/actions/quizExport.js");
+
+var _alerts = require("../../../../../common/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 BuildingButtonsICE = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(_presenter.BuildingButtonsICE);
+BuildingButtonsICE.displayName = 'TopNavBarItem';
+var _default = BuildingButtonsICE;
+exports.default = _default;