@instructure/quiz-core 17.58.2-rc.6 → 17.58.2-rc.8

package/es/banks/api/banks.js

@@ -11,6 +11,7 @@ import { clear, newActiveBankEntry, newActiveBank } from "../../common/actions/u
 import t from '@instructure/quiz-i18n/es/format-message';
 import { handleError } from "../../common/api/helpers.js";
 import { BANKS_BANK_PAGINATION, BANKS_BANK_ENTRY_PAGINATION, DELETE_BANK_CALL, UPDATE_BANK_CALL, CAN_EDIT, READ_ONLY, REMOVED_ACCESS, SHARED_WITH_USER, SHARED_WITH_COURSE } from '@instructure/quiz-common';
+import { noop } from 'lodash';
 var banksApiEndpoint = '/api/banks';
 var DEFAULT_PAGE_SIZE = 100;
 
@@ -169,7 +170,8 @@ export var deleteBank = function deleteBank(bankId) {
     });
   };
 };
-export var shareBank = function shareBank(_shareBank, getUserInfo) {
+export var shareBank = function shareBank(_shareBank) {
+  var getUserInfo = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : noop;
   var url = "".concat(banksApiEndpoint, "/").concat(_shareBank.bankId, "/shared_banks");
   return function (dispatch, getState) {
     var shareBankData = JSON.stringify({
@@ -213,6 +215,38 @@ export var shareBank = function shareBank(_shareBank, getUserInfo) {
     });
   };
 };
+export var getSharedBank = function getSharedBank(bankId, entityType, entityId) {
+  var url = "".concat(banksApiEndpoint, "/").concat(bankId, "/shared_banks");
+  var params = {
+    entity_type: entityType,
+    entity_id: entityId
+  };
+  return function (dispatch, getState) {
+    var fetcher = new Fetcher({
+      onError: handleError(dispatch, t('Failed to fetch shared bank.'))
+    });
+    return fetcher.get(url, params).then(function (sharedBankInfo) {
+      // if the API returns no data, we manually add placeholder to the response
+      if (sharedBankInfo.length === 0) {
+        var placeholder = {
+          id: "notshared_".concat(bankId, "_").concat(entityId),
+          entityType: entityType,
+          entityId: entityId,
+          permission: REMOVED_ACCESS,
+          bankId: bankId
+        };
+        sharedBankInfo.push(placeholder);
+      }
+
+      dispatch(handleShareBanksResponse(sharedBankInfo));
+    }).catch(function (err) {
+      if (err.response.status === 401) {
+        dispatch(clear(BANKS_BANK_PAGINATION));
+        throw err;
+      }
+    });
+  };
+};
 export var getSharedBanks = function getSharedBanks(bank, getUserInfo, getCourseInfo) {
   var url = "".concat(banksApiEndpoint, "/").concat(bank.id, "/shared_banks");
   var userSharedBanks = [];

package/es/banks/components/Bank/index.js

@@ -3,18 +3,21 @@ import { Bank as BankPresenter } from "./presenter.js";
 import { connect } from "../../../common/react-redux.js";
 import BankRecord from "../../../common/records/Bank.js";
 import { getActiveQuiz } from "../../../common/selectors/quizzes.js";
-import { getBank } from "../../../banks/api/banks.js";
+import { getBank, getSharedBank, shareBank, updateSharedBankPermission } from "../../../banks/api/banks.js";
 import { getBankEntries } from "../../../banks/api/bankEntries.js";
 import { createQuizEntry } from "../../../building/api/quizEntries.js";
-import { openModal } from "../../../common/actions/modal.js";
+import { openModal, withConfirm } from "../../../common/actions/modal.js";
 import { BUILD_TRAY_POSITION, BUILD_TRAY_STIMULUS_ID } from '@instructure/quiz-common';
 import { screenreaderNotification } from "../../../common/actions/alerts.js";
 import { reset as resetSearch } from "../../../common/actions/bankSearch.js";
+import { removeSharedBank } from "../../../common/actions/sharedBanks.js";
 import { featureOn } from "../../../common/util/featureCheck.js";
-
-function mapStateToProps(state, props) {
+export function mapStateToProps(state, props) {
   var bank = new BankRecord(state.getIn(['banks', props.bankId]));
   var search = state.get('bankSearch', immutable.Map());
+  var courseSharedBank = state.get('sharedBanks', immutable.Map()).find(function (sharedBank) {
+    return sharedBank.get('bankId') === props.bankId && sharedBank.get('entityType') === props.scope.type && sharedBank.get('entityId') === props.scope.uuid;
+  });
   var activeQuiz = getActiveQuiz(state);
   var lockBlueprintContentEnabled = featureOn('lock_blueprint_content');
   var isQuizContentLocked = activeQuiz && activeQuiz.originalQuizLockedByBlueprint && lockBlueprintContentEnabled;
@@ -22,20 +25,26 @@ function mapStateToProps(state, props) {
     bank: bank,
     isQuizContentLocked: isQuizContentLocked,
     search: search,
+    courseSharedBank: courseSharedBank,
     useBankSearch: featureOn('item_bank_search'),
     position: state.getIn(['ui', BUILD_TRAY_POSITION]),
     stimulusId: state.getIn(['ui', BUILD_TRAY_STIMULUS_ID]),
-    activeQuizId: state.getIn(['quizzes', 'activeQuizId'])
+    activeQuizId: state.getIn(['quizzes', 'activeQuizId']),
+    showShareBankFromTray: featureOn('share_bank_from_tray')
   };
 }
-
 var mapDispatchToProps = {
   addEntryToQuiz: createQuizEntry,
   getBank: getBank,
   getBankEntries: getBankEntries,
+  getSharedBank: getSharedBank,
   openModal: openModal,
+  removeSharedBank: removeSharedBank,
   resetSearch: resetSearch,
-  screenreaderNotification: screenreaderNotification
+  screenreaderNotification: screenreaderNotification,
+  shareBank: shareBank,
+  updateSharedBankPermission: updateSharedBankPermission,
+  withConfirm: withConfirm
 };
 export var Bank = connect(mapStateToProps, mapDispatchToProps)(BankPresenter);
 export default Bank;

package/es/banks/components/Bank/presenter.js

@@ -1,3 +1,6 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
@@ -10,12 +13,15 @@ import * as immutable from 'immutable';
 import debounce from 'lodash/debounce';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
+import partial from 'lodash/partial';
 import { IconPlusLine } from '@instructure/ui-icons';
 import { BreadcrumbLink } from '@instructure/ui-breadcrumb';
 import { Button } from '@instructure/ui-buttons';
 import { Heading } from '@instructure/ui-heading';
 import { AccessibleContent } from '@instructure/ui-a11y-content';
 import { themeable } from '@instructure/ui-themeable';
+import { Checkbox } from '@instructure/ui-checkbox';
+import { View } from '@instructure/ui-view';
 import BankRecord from "../../../common/records/Bank.js";
 import Page from "../../../common/components/layout/Page/index.js";
 import PaginatedCollection from "../../../common/components/shared/PaginatedCollection/index.js";
@@ -27,7 +33,7 @@ import BankEntriesList from "../../../banks/components/BankEntriesList/index.js"
 import BankSearch from "../../../banks/components/BankSearch/index.js";
 import HeaderMenu from "../../../banks/components/HeaderMenu/index.js";
 import NavWrapper from "../NavWrapper/index.js";
-import { ADD_BANK_ENTRY_MODAL, BANKS_BANK_ENTRY_PAGINATION } from '@instructure/quiz-common';
+import { ADD_BANK_ENTRY_MODAL, BANKS_BANK_ENTRY_PAGINATION, CAN_EDIT, REMOVED_ACCESS, READ_ONLY } from '@instructure/quiz-common';
 var styles = {
   componentId: 'fWUWr',
   template: function template(theme) {
@@ -56,6 +62,10 @@ export var Bank = (_dec = themeable(theme, styles), _dec(_class = (_temp = _clas
     }
 
     _this = _super.call.apply(_super, [this].concat(_args));
+    _this.state = {
+      sharedWithCourse: false,
+      shareWithCourseCheckboxDisabled: true
+    };
 
     _this.openAddBankEntryModal = function () {
       _this.props.openModal(ADD_BANK_ENTRY_MODAL, {
@@ -75,6 +85,74 @@ export var Bank = (_dec = themeable(theme, styles), _dec(_class = (_temp = _clas
       _this.createBankEntryButton = c;
     };
 
+    _this.toggleCheckbox = function () {
+      // disable until request resolves
+      _this.setState({
+        shareWithCourseCheckboxDisabled: true
+      });
+
+      _this.changeSharedPermissions();
+    };
+
+    _this.unshareBankWithCourse = /*#__PURE__*/function () {
+      var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(sharedBank) {
+        var _this$props, updateSharedBankPermission, bankId, getSharedBank, scope;
+
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                _this$props = _this.props, updateSharedBankPermission = _this$props.updateSharedBankPermission, bankId = _this$props.bankId, getSharedBank = _this$props.getSharedBank, scope = _this$props.scope;
+                _context.next = 3;
+                return updateSharedBankPermission(bankId, sharedBank.get('id'), REMOVED_ACCESS);
+
+              case 3:
+                getSharedBank(bankId, scope.type, scope.uuid).catch(function (err) {
+                  // make sure the user still has access to the bank
+                  if (err.response.status === 401) {
+                    _this.props.navigateToBanks();
+                  }
+                });
+
+              case 4:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee);
+      }));
+
+      return function (_x) {
+        return _ref.apply(this, arguments);
+      };
+    }();
+
+    _this.translatedPermissionLevel = function (permission) {
+      var _CAN_EDIT$READ_ONLY$p;
+
+      return (_CAN_EDIT$READ_ONLY$p = {}, _defineProperty(_CAN_EDIT$READ_ONLY$p, CAN_EDIT, t('edit')), _defineProperty(_CAN_EDIT$READ_ONLY$p, READ_ONLY, t('view')), _CAN_EDIT$READ_ONLY$p)[permission];
+    };
+
+    _this.confirmUnshareBankWithCourse = function () {
+      var confirmText = t('You are about to remove { accessLevel } access for { entityTitle } to this bank.', {
+        accessLevel: _this.translatedPermissionLevel(_this.props.courseSharedBank.get('permission')),
+        entityTitle: _this.props.scope.title
+      });
+
+      _this.props.withConfirm(partial(_this.unshareBankWithCourse, _this.props.courseSharedBank), {
+        title: t('Unshare Bank with Course'),
+        text: confirmText,
+        continueText: t('Confirm'),
+        onCancel: _this.onCancelUnshareBankWithCourse
+      });
+    };
+
+    _this.onCancelUnshareBankWithCourse = function () {
+      _this.setState({
+        shareWithCourseCheckboxDisabled: false
+      });
+    };
+
     _this.addBankToQuiz = function () {
       var newEntry = QuizEntry.create({
         entryId: _this.props.bankId,
@@ -100,8 +178,8 @@ export var Bank = (_dec = themeable(theme, styles), _dec(_class = (_temp = _clas
       }, _this.renderNewBankEntryButton());
     };
 
-    _this.announceResults = function (_ref) {
-      var totalPages = _ref.totalPages;
+    _this.announceResults = function (_ref2) {
+      var totalPages = _ref2.totalPages;
       var message = t("{\n      count, plural,\n         =0 {No search results found}\n        one {Displaying one page of results}\n      other {Displaying # pages of results}\n    }", {
         count: totalPages
       }); // Audibly announce when search results are ready.
@@ -115,10 +193,10 @@ export var Bank = (_dec = themeable(theme, styles), _dec(_class = (_temp = _clas
     _this.debouncedAnnounceResults = debounce(_this.announceResults, 1000);
 
     _this.getPage = function (page, search) {
-      var _this$props = _this.props,
-          getBankEntries = _this$props.getBankEntries,
-          bankId = _this$props.bankId,
-          useBankSearch = _this$props.useBankSearch;
+      var _this$props2 = _this.props,
+          getBankEntries = _this$props2.getBankEntries,
+          bankId = _this$props2.bankId,
+          useBankSearch = _this$props2.useBankSearch;
       var text = search.get('text');
       var interactionTypes = search.get('interactionTypes', immutable.Set()).toJS();
       var tagIds = search.get('tags', []).map(function (tag) {
@@ -173,19 +251,68 @@ export var Bank = (_dec = themeable(theme, styles), _dec(_class = (_temp = _clas
 
       if (this.props.onError) {
         this.props.getBank(this.props.bankId).catch(this.props.onError);
+
+        if (this.shouldRenderShareWithCourseCheckbox()) {
+          this.props.getSharedBank(this.props.bankId, this.props.scope.type, this.props.scope.uuid).catch(this.props.onError);
+        }
       } else {
         this.props.getBank(this.props.bankId);
+
+        if (this.shouldRenderShareWithCourseCheckbox()) {
+          this.props.getSharedBank(this.props.bankId, this.props.scope.type, this.props.scope.uuid);
+        }
+      } // when courseSharedBank is already loaded
+
+
+      if (this.props.courseSharedBank) {
+        this.setShareWithCourseCheckbox();
       }
     }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      var _prevProps$courseShar, _this$props$courseSha;
+
+      var permissionChanged = ((_prevProps$courseShar = prevProps.courseSharedBank) === null || _prevProps$courseShar === void 0 ? void 0 : _prevProps$courseShar.get('permission')) !== ((_this$props$courseSha = this.props.courseSharedBank) === null || _this$props$courseSha === void 0 ? void 0 : _this$props$courseSha.get('permission'));
+
+      if (this.props.courseSharedBank && permissionChanged) {
+        this.setShareWithCourseCheckbox();
+      }
+    }
+  }, {
+    key: "setShareWithCourseCheckbox",
+    value: function setShareWithCourseCheckbox() {
+      if (this.props.courseSharedBank.get('permission') === REMOVED_ACCESS) {
+        this.setState({
+          sharedWithCourse: false,
+          shareWithCourseCheckboxDisabled: false
+        });
+      } else {
+        this.setState({
+          sharedWithCourse: true,
+          shareWithCourseCheckboxDisabled: false
+        });
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.props.removeSharedBank(this.placeholderCourseSharedBankKey());
+    }
+  }, {
+    key: "placeholderCourseSharedBankKey",
+    value: function placeholderCourseSharedBankKey() {
+      return "notshared_".concat(this.props.bankId, "_").concat(this.props.scope.uuid);
+    }
   }, {
     key: "renderNav",
     value: function renderNav() {
-      var _this$props2 = this.props,
-          scope = _this$props2.scope,
-          closeTray = _this$props2.closeTray,
-          navigateToBanks = _this$props2.navigateToBanks,
-          navigateToBuild = _this$props2.navigateToBuild,
-          returnToUrl = _this$props2.returnToUrl;
+      var _this$props3 = this.props,
+          scope = _this$props3.scope,
+          closeTray = _this$props3.closeTray,
+          navigateToBanks = _this$props3.navigateToBanks,
+          navigateToBuild = _this$props3.navigateToBuild,
+          returnToUrl = _this$props3.returnToUrl;
       var isScopeEmpty = !Object.keys(scope).length;
       return /*#__PURE__*/React.createElement(NavWrapper, {
         closeTray: closeTray,
@@ -217,6 +344,50 @@ export var Bank = (_dec = themeable(theme, styles), _dec(_class = (_temp = _clas
         });
       }
     }
+  }, {
+    key: "changeSharedPermissions",
+    value: function changeSharedPermissions() {
+      if (this.props.bank.canEdit()) {
+        if (!this.state.sharedWithCourse) {
+          var shareBank = {
+            entityId: this.props.scope.uuid,
+            entityType: this.props.scope.type,
+            title: this.props.scope.title,
+            permission: READ_ONLY,
+            bankId: this.props.bankId
+          };
+          this.props.removeSharedBank(this.placeholderCourseSharedBankKey());
+          this.props.shareBank(shareBank);
+        } else {
+          this.confirmUnshareBankWithCourse();
+        }
+      }
+    }
+  }, {
+    key: "shouldRenderShareWithCourseCheckbox",
+    value: function shouldRenderShareWithCourseCheckbox() {
+      return this.props.showShareBankFromTray && this.props.scope.type === 'course' && this.props.scope.title && this.props.scope.uuid;
+    }
+  }, {
+    key: "renderCheckbox",
+    value: function renderCheckbox() {
+      if (!this.shouldRenderShareWithCourseCheckbox()) {
+        return null;
+      }
+
+      var label = t('Share with { courseName }', {
+        courseName: this.props.scope.title
+      });
+      return /*#__PURE__*/React.createElement(View, {
+        margin: "small 0",
+        as: "div"
+      }, /*#__PURE__*/React.createElement(Checkbox, {
+        checked: this.state.sharedWithCourse,
+        label: label,
+        onChange: this.toggleCheckbox,
+        disabled: this.props.bank.canEdit() ? this.state.shareWithCourseCheckboxDisabled : true
+      }));
+    }
   }, {
     key: "renderModals",
     value: function renderModals() {
@@ -292,7 +463,7 @@ export var Bank = (_dec = themeable(theme, styles), _dec(_class = (_temp = _clas
     value: function render() {
       return /*#__PURE__*/React.createElement(Page, null, this.renderModals(), this.renderNav(), /*#__PURE__*/React.createElement("div", {
         className: styles.content
-      }, this.renderName(), /*#__PURE__*/React.createElement("div", {
+      }, this.renderName(), this.renderCheckbox(), /*#__PURE__*/React.createElement("div", {
         className: styles.topMenu
       }, this.renderTopLeftMenu(), this.renderTopRightMenu()), this.renderSearch(), /*#__PURE__*/React.createElement(PaginatedCollection, {
         empty: this.emptyLoadText(),
@@ -315,6 +486,7 @@ export var Bank = (_dec = themeable(theme, styles), _dec(_class = (_temp = _clas
   closeTray: PropTypes.func,
   getBank: PropTypes.func.isRequired,
   getBankEntries: PropTypes.func.isRequired,
+  getSharedBank: PropTypes.func.isRequired,
   isCompact: PropTypes.bool,
   isQuizContentLocked: PropTypes.bool.isRequired,
   navigateToBanks: PropTypes.func.isRequired,
@@ -323,20 +495,26 @@ export var Bank = (_dec = themeable(theme, styles), _dec(_class = (_temp = _clas
   // can be from consumer
   navigateToBuild: PropTypes.func,
   // from consumer
-  scope: PropTypes.objectOf(PropTypes.shape({
+  scope: PropTypes.shape({
     type: PropTypes.string,
     uuid: PropTypes.string,
     title: PropTypes.string
-  })),
+  }),
+  courseSharedBank: ImmutablePropTypes.map,
   returnToUrl: PropTypes.string,
   // from consumer
   onError: PropTypes.func,
   openModal: PropTypes.func.isRequired,
   position: PropTypes.number,
+  removeSharedBank: PropTypes.func.isRequired,
   resetSearch: PropTypes.func.isRequired,
   screenreaderNotification: PropTypes.func.isRequired,
   search: ImmutablePropTypes.map.isRequired,
-  stimulusId: PropTypes.string
+  shareBank: PropTypes.func.isRequired,
+  stimulusId: PropTypes.string,
+  showShareBankFromTray: PropTypes.bool,
+  updateSharedBankPermission: PropTypes.func.isRequired,
+  withConfirm: PropTypes.func.isRequired
 }, _class2.defaultProps = {
   activeQuizId: null,
   addEntryToQuiz: null,
@@ -350,6 +528,8 @@ export var Bank = (_dec = themeable(theme, styles), _dec(_class = (_temp = _clas
   stimulusId: null,
   scope: {},
   returnToUrl: null,
-  isQuizContentLocked: false
+  isQuizContentLocked: false,
+  showShareBankFromTray: false,
+  courseSharedBank: null
 }, _temp)) || _class);
 export default Bank;

package/es/building/components/resources/BanksTray/presenter.js

@@ -95,7 +95,8 @@ export var BanksTray = /*#__PURE__*/function (_Component) {
             closeTray: this.closeTray,
             bankId: activeBankId,
             navigateToBanks: this.clearActiveBank,
-            navigateToBankEntry: this.props.newActiveBankEntry
+            navigateToBankEntry: this.props.newActiveBankEntry,
+            scope: this.props.itemBanksScope
           });
         }
       } else {

package/es/common/actions/sharedBanks.js

@@ -14,9 +14,9 @@ export var updateSharedBankPermission = function updateSharedBankPermission(shar
     }
   };
 };
-export var removeSharedBank = function removeSharedBank(bankId) {
+export var removeSharedBank = function removeSharedBank(sharedBankId) {
   return {
     type: REMOVE_SHARED_BANK,
-    payload: bankId
+    payload: sharedBankId
   };
 };

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnalysisMetric/index.js

@@ -0,0 +1,2 @@
+import { AnalysisMetric } from "./presenter.js";
+export default AnalysisMetric;

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnalysisMetric/presenter.js

@@ -0,0 +1,64 @@
+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";
+
+var _dec, _class, _class2, _temp;
+
+import { themeable } from '@instructure/ui-themeable';
+import theme from "./theme.js";
+var styles = {
+  componentId: 'flBnP',
+  template: function template(theme) {
+    return "\n\n.flBnP_eckF{margin:0;max-width:159px;text-transform:uppercase}";
+  },
+  'metricLabel': 'flBnP_eckF'
+};
+import React, { Component } from 'react';
+import { getSanitizedMetricValue } from "../utils.js";
+import { Metric } from '@instructure/ui-metric';
+import PropTypes from 'prop-types';
+export var AnalysisMetric = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  _inherits(AnalysisMetric, _Component);
+
+  var _super = _createSuper(AnalysisMetric);
+
+  function AnalysisMetric() {
+    _classCallCheck(this, AnalysisMetric);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(AnalysisMetric, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          metricKey = _this$props.metricKey,
+          label = _this$props.label,
+          value = _this$props.value,
+          suffix = _this$props.suffix;
+      return /*#__PURE__*/React.createElement(Metric, {
+        theme: {
+          valueFontWeight: 500,
+          padding: '0'
+        },
+        textAlign: "start",
+        key: metricKey,
+        renderLabel: /*#__PURE__*/React.createElement("p", {
+          className: styles.metricLabel
+        }, label),
+        renderValue: getSanitizedMetricValue(value, suffix)
+      });
+    }
+  }]);
+
+  AnalysisMetric.displayName = "AnalysisMetric";
+  return AnalysisMetric;
+}(Component), _class2.propTypes = {
+  metricKey: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  suffix: PropTypes.string
+}, _class2.defaultProps = {
+  suffix: ''
+}, _temp)) || _class);

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnalysisMetric/theme.js

@@ -0,0 +1,3 @@
+export default function generator() {
+  return {};
+}

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnalysisPopoverMetric/index.js

@@ -0,0 +1,2 @@
+import { AnalysisPopoverMetric } from "./presenter.js";
+export default AnalysisPopoverMetric;

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnalysisPopoverMetric/presenter.js

@@ -0,0 +1,75 @@
+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";
+
+var _dec, _class, _class2, _temp;
+
+import React, { Component } from 'react';
+import { Metric } from '@instructure/ui-metric';
+import { getSanitizedMetricValue } from "../utils.js";
+var styles = {
+  componentId: 'bLVhr',
+  template: function template(theme) {
+    return "\n\n.bLVhr_dqHR{padding-left:5px}\n\n.bLVhr_eckF{margin:0;max-width:159px;text-transform:uppercase}";
+  },
+  'popoverContainer': 'bLVhr_dqHR',
+  'metricLabel': 'bLVhr_eckF'
+};
+import MetricPopover from "../MetricPopover/index.js";
+import { themeable } from '@instructure/ui-themeable';
+import theme from "./theme.js";
+import PropTypes from 'prop-types';
+export var AnalysisPopoverMetric = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  _inherits(AnalysisPopoverMetric, _Component);
+
+  var _super = _createSuper(AnalysisPopoverMetric);
+
+  function AnalysisPopoverMetric() {
+    _classCallCheck(this, AnalysisPopoverMetric);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(AnalysisPopoverMetric, [{
+    key: "renderLabelWithPopover",
+    value: function renderLabelWithPopover(texts) {
+      return /*#__PURE__*/React.createElement("p", {
+        className: styles.metricLabel
+      }, this.props.label, /*#__PURE__*/React.createElement("span", {
+        className: styles.popoverContainer
+      }, /*#__PURE__*/React.createElement(MetricPopover, texts)));
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          metricKey = _this$props.metricKey,
+          popoverDescription = _this$props.popoverDescription,
+          value = _this$props.value;
+      return /*#__PURE__*/React.createElement(Metric, {
+        theme: {
+          valueFontWeight: 500,
+          padding: '0'
+        },
+        textAlign: "start",
+        key: metricKey,
+        renderLabel: this.renderLabelWithPopover(popoverDescription),
+        renderValue: getSanitizedMetricValue(value)
+      });
+    }
+  }]);
+
+  AnalysisPopoverMetric.displayName = "AnalysisPopoverMetric";
+  return AnalysisPopoverMetric;
+}(Component), _class2.propTypes = {
+  metricKey: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  popoverDescription: PropTypes.shape({
+    title: PropTypes.string,
+    subtitle: PropTypes.string,
+    body: PropTypes.string,
+    screenReaderLabel: PropTypes.string
+  }).isRequired
+}, _temp)) || _class);

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnalysisPopoverMetric/theme.js

@@ -0,0 +1,6 @@
+export default function generator(_ref) {
+  var spacing = _ref.spacing;
+  return {
+    headerPaddingBottom: spacing.medium
+  };
+}

package/es/reporting/components/resources/NewQuizAndItemAnalysis/NewItemAnalysis/index.js

@@ -0,0 +1,2 @@
+import { NewItemAnalysis } from "./presenter.js";
+export default NewItemAnalysis;

package/es/reporting/components/resources/NewQuizAndItemAnalysis/NewItemAnalysis/popoverContent.js

@@ -0,0 +1,18 @@
+export var difficultyIndex = {
+  title: 'Difficulty title',
+  subtitle: 'difficulty subtitle',
+  body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi elementum interdum risus sed condimentum. Duis vel nisi at quam luctus dictum id eu risus. Donec eget tristique justo',
+  screenReaderLabel: 'Lorem one'
+};
+export var discriminationIndex = {
+  title: 'Discrimination title',
+  subtitle: 'discrimination subtitle',
+  body: 'Lorem ipsum dolor sit amet',
+  screenReaderLabel: 'Lorem two'
+};
+export var pearsonCorrelation = {
+  title: 'Pearson correlation title',
+  subtitle: 'pearson correlation subtitle',
+  body: 'Lorem ipsum dolor sit amet',
+  screenReaderLabel: 'Lorem three'
+};