@instructure/quiz-core 20.10.1-rc.7 → 20.11.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [20.11.0](https://gerrit.instructure.com/quizzes-ui/compare/v20.10.0...v20.11.0) (2024-03-22)
+
+
+### Features
+
+* **sub-account-bank-sharing:** Silently filter banks by subaccount with subaccount launch ([c0ed1ff](https://gerrit.instructure.com/quizzes-ui/commits/c0ed1ff3f93fd948f16d8073e223cbb46dab4a74))
+
+
+
+
+
 # [20.10.0](https://gerrit.instructure.com/quizzes-ui/compare/v20.9.0...v20.10.0) (2024-03-12)
 
 

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

@@ -11,12 +11,18 @@ import PropTypes from 'prop-types';
 import { IconButton } from '@instructure/ui-buttons';
 import { Menu } from '@instructure/ui-menu';
 import { IconExportLine, IconMoreSolid, IconImportLine, IconBankLine, IconPrinterLine, IconSpeedGraderLine } from '@instructure/ui-icons';
+import { View } from '@instructure/ui-view';
+import { Drilldown } from '@instructure/ui-drilldown';
+import { TopNavBar } from '@instructure/ui-top-nav-bar';
 import PrintTrigger from "../../../../../common/components/shared/PrintTrigger/index.js";
 import { PRINT_CURRENT_PAGE, PRINT_BLANK } from '@instructure/quiz-common';
 import { withStyle, jsx } from '@instructure/emotion';
 import t from '@instructure/quiz-i18n/es/format-message';
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js";
+
+var _ref = jsx(IconSpeedGraderLine, null);
+
 export var BuildingButtons = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(BuildingButtons, _Component);
 
@@ -73,6 +79,16 @@ export var BuildingButtons = (_dec = withStyle(generateStyle, generateComponentT
   }
 
   _createClass(BuildingButtons, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.props.makeStyles();
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.props.makeStyles();
+    }
+  }, {
     key: "renderSavingMessage",
     value: function renderSavingMessage() {
       if (this.props.quizSaving) {
@@ -86,6 +102,214 @@ export var BuildingButtons = (_dec = withStyle(generateStyle, generateComponentT
     value: function isBuildingPage() {
       return 'building' === this.props.app;
     }
+  }, {
+    key: "renderSpeedGraderButton",
+    value: function renderSpeedGraderButton() {
+      var key = 'speedgrader';
+      var text = t('Speedgrader');
+
+      if (this.props.iceTopNavBarEnabled) {
+        return jsx(Drilldown.Option, {
+          id: key,
+          key: key,
+          onOptionClick: this.openSpeedgraderLink
+        }, _ref, jsx(View, {
+          as: "span",
+          margin: "0 0 0 x-small"
+        }, text));
+      }
+
+      return jsx(Menu.Item, {
+        key: key,
+        onSelect: this.openSpeedgraderLink
+      }, jsx(IconSpeedGraderLine, {
+        css: this.props.styles.menuIcon
+      }), text);
+    }
+  }, {
+    key: "renderImportContentButton",
+    value: function renderImportContentButton() {
+      var key = 'import';
+      var text = t('Import Content');
+      var onClick = this.props.openModal;
+      var disabled = !this.props.canImport;
+      var menuItemDataAutomation = 'sdk-import-content-menuitem';
+      var iconDataAutomation = 'sdk-import-content-icon';
+
+      if (this.props.iceTopNavBarEnabled) {
+        return jsx(Drilldown.Option, {
+          id: key,
+          key: key,
+          disabled: disabled,
+          onOptionClick: onClick,
+          "data-automation": menuItemDataAutomation
+        }, jsx(IconImportLine, {
+          "data-automation": iconDataAutomation
+        }), jsx(View, {
+          as: "span",
+          margin: "0 0 0 x-small"
+        }, text));
+      }
+
+      return jsx(Menu.Item, {
+        key: key,
+        disabled: disabled,
+        onSelect: onClick,
+        "data-automation": menuItemDataAutomation
+      }, jsx(IconImportLine, {
+        css: this.props.styles.menuIcon,
+        "data-automation": iconDataAutomation
+      }), text);
+    }
+  }, {
+    key: "renderContentExportButton",
+    value: function renderContentExportButton() {
+      var key = 'export';
+      var text = t('Export Content');
+      var onClick = this.startQuizExportJob;
+      var disabled = !this.props.canExport;
+      var menuItemDataAutomation = 'sdk-export-content-menuitem';
+      var iconDataAutomation = 'sdk-export-content-icon';
+
+      if (this.props.iceTopNavBarEnabled) {
+        return jsx(Drilldown.Option, {
+          id: key,
+          key: key,
+          disabled: disabled,
+          onOptionClick: onClick,
+          "data-automation": menuItemDataAutomation
+        }, jsx(IconExportLine, {
+          "data-automation": iconDataAutomation
+        }), jsx(View, {
+          as: "span",
+          margin: "0 0 0 x-small"
+        }, text));
+      }
+
+      return jsx(Menu.Item, {
+        key: key,
+        disabled: disabled,
+        onSelect: onClick,
+        "data-automation": menuItemDataAutomation
+      }, jsx(IconExportLine, {
+        css: this.props.styles.menuIcon,
+        "data-automation": iconDataAutomation
+      }), text);
+    }
+  }, {
+    key: "renderManageItemBanksButton",
+    value: function renderManageItemBanksButton() {
+      var key = 'banks';
+      var text = t('Manage Item Banks');
+      var onClick = this.props.navigateToBanks;
+      var menuItemDataAutomation = 'sdk-manage-item-banks-menuitem';
+      var iconDataAutomation = 'sdk-manage-item-banks-icon';
+
+      if (this.props.iceTopNavBarEnabled) {
+        return jsx(Drilldown.Option, {
+          id: key,
+          key: key,
+          onOptionClick: onClick,
+          "data-automation": menuItemDataAutomation
+        }, jsx(IconBankLine, {
+          "data-automation": iconDataAutomation
+        }), jsx(View, {
+          as: "span",
+          margin: "0 0 0 x-small"
+        }, text));
+      }
+
+      return jsx(Menu.Item, {
+        key: key,
+        onSelect: onClick,
+        "data-automation": menuItemDataAutomation
+      }, jsx(IconBankLine, {
+        css: this.props.styles.menuIcon,
+        "data-automation": iconDataAutomation
+      }), text);
+    }
+  }, {
+    key: "renderPrintKeyButton",
+    value: function renderPrintKeyButton(handlePrint) {
+      var key = 'printKey';
+      var text = t('Print Key (With Answers)');
+
+      var onClick = function onClick() {
+        return handlePrint(PRINT_CURRENT_PAGE);
+      };
+
+      var disabled = !this.props.hasQuestions || this.props.isEditing;
+      var menuItemDataAutomation = 'sdk-print-key-menuitem';
+      var iconDataAutomation = 'sdk-print-icon';
+
+      if (this.props.iceTopNavBarEnabled) {
+        return jsx(Drilldown.Option, {
+          id: key,
+          key: key,
+          disabled: disabled,
+          onOptionClick: onClick // eslint-disable-line react/jsx-no-bind
+          ,
+          "data-automation": menuItemDataAutomation
+        }, jsx(IconPrinterLine, {
+          "data-automation": iconDataAutomation
+        }), jsx(View, {
+          as: "span",
+          margin: "0 0 0 x-small"
+        }, text));
+      }
+
+      return jsx(Menu.Item, {
+        key: key,
+        disabled: disabled,
+        onSelect: onClick // eslint-disable-line react/jsx-no-bind
+        ,
+        "data-automation": menuItemDataAutomation
+      }, jsx(IconPrinterLine, {
+        css: this.props.styles.menuIcon,
+        "data-automation": iconDataAutomation
+      }), text);
+    }
+  }, {
+    key: "renderPrintBlankButton",
+    value: function renderPrintBlankButton(handlePrint) {
+      var key = 'printBlank';
+      var text = t('Print Blank Quiz');
+
+      var onClick = function onClick() {
+        return handlePrint(PRINT_BLANK);
+      };
+
+      var disabled = !this.props.hasQuestions || this.props.isEditing;
+      var menuItemDataAutomation = 'sdk-print-blank-menuitem';
+      var iconDataAutomation = 'sdk-print-blank-icon';
+
+      if (this.props.iceTopNavBarEnabled) {
+        return jsx(Drilldown.Option, {
+          id: key,
+          key: key,
+          disabled: disabled,
+          onOptionClick: onClick // eslint-disable-line react/jsx-no-bind
+          ,
+          "data-automation": menuItemDataAutomation
+        }, jsx(IconPrinterLine, {
+          "data-automation": iconDataAutomation
+        }), jsx(View, {
+          as: "span",
+          margin: "0 0 0 x-small"
+        }, text));
+      }
+
+      return jsx(Menu.Item, {
+        key: key,
+        disabled: disabled,
+        onSelect: onClick // eslint-disable-line react/jsx-no-bind
+        ,
+        "data-automation": menuItemDataAutomation
+      }, jsx(IconPrinterLine, {
+        css: this.props.styles.menuIcon,
+        "data-automation": iconDataAutomation
+      }), text);
+    }
   }, {
     key: "renderMenu",
     value: function renderMenu(handlePrint) {
@@ -93,79 +317,40 @@ export var BuildingButtons = (_dec = withStyle(generateStyle, generateComponentT
       var menuItems = [];
 
       if (this.props.speedgraderLink) {
-        menuItems.push(jsx(Menu.Item, {
-          key: "speedgrader",
-          onSelect: this.openSpeedgraderLink
-        }, jsx(IconSpeedGraderLine, {
-          css: this.props.styles.menuIcon
-        }), t('Speedgrader')));
+        menuItems.push(this.renderSpeedGraderButton());
       }
 
-      menuItems.push(jsx(Menu.Item, {
-        key: "import",
-        disabled: !this.props.canImport,
-        onSelect: this.props.openModal,
-        "data-automation": "sdk-import-content-menuitem"
-      }, jsx(IconImportLine, {
-        css: this.props.styles.menuIcon,
-        "data-automation": "sdk-import-content-icon"
-      }), t('Import Content')));
+      menuItems.push(this.renderImportContentButton());
 
       if (this.props.contentExportEnabled) {
-        menuItems.push(jsx(Menu.Item, {
-          key: "export",
-          disabled: !this.props.canExport,
-          onSelect: this.startQuizExportJob,
-          "data-automation": "sdk-export-content-menuitem"
-        }, jsx(IconExportLine, {
-          css: this.props.styles.menuIcon,
-          "data-automation": "sdk-export-content-icon"
-        }), t('Export Content')));
+        menuItems.push(this.renderContentExportButton());
       }
 
       if (this.props.enableItemBanking) {
-        menuItems.push(jsx(Menu.Item, {
-          key: "banks",
-          onSelect: this.props.navigateToBanks,
-          "data-automation": "sdk-manage-item-banks-menuitem"
-        }, jsx(IconBankLine, {
-          css: this.props.styles.menuIcon,
-          "data-automation": "sdk-manage-item-banks-icon"
-        }), t('Manage Item Banks')));
+        menuItems.push(this.renderManageItemBanksButton());
       }
 
       if (this.props.printingEnabled) {
-        {
-          /* eslint-disable react/jsx-no-bind */
-        }
-        menuItems.push(jsx(Menu.Item, {
-          key: "printKey",
-          disabled: !this.props.hasQuestions || this.props.isEditing,
-          onSelect: function onSelect() {
-            return handlePrint(PRINT_CURRENT_PAGE);
-          },
-          "data-automation": "sdk-print-key-menuitem"
-        }, jsx(IconPrinterLine, {
-          css: this.props.styles.menuIcon,
-          "data-automation": "sdk-print-icon"
-        }), t('Print Key (With Answers)')));
-        menuItems.push(jsx(Menu.Item, {
-          key: "printBlank",
-          disabled: !this.props.hasQuestions || this.props.isEditing,
-          onSelect: function onSelect() {
-            return handlePrint(PRINT_BLANK);
-          },
-          "data-automation": "sdk-print-blank-menuitem"
-        }, jsx(IconPrinterLine, {
-          css: this.props.styles.menuIcon,
-          "data-automation": "sdk-print-blank-icon"
-        }), t('Print Blank Quiz')));
-        {
-          /* eslint-enable react/jsx-no-bind */
-        }
+        menuItems.push(this.renderPrintKeyButton(handlePrint));
+        menuItems.push(this.renderPrintBlankButton(handlePrint));
       }
 
       if (menuItems.length < 1) return;
+
+      if (this.props.iceTopNavBarEnabled) {
+        return jsx(TopNavBar.Item, {
+          id: this.props.id,
+          variant: "icon",
+          renderIcon: this.props.renderIcon,
+          showSubmenuChevron: false,
+          renderSubmenu: jsx(Drilldown, {
+            rootPageId: "root"
+          }, jsx(Drilldown.Page, {
+            id: "root"
+          }, menuItems))
+        }, t('More'));
+      }
+
       return jsx(Menu, {
         trigger: jsx(IconButton, {
           renderIcon: IconMoreSolid,
@@ -216,6 +401,10 @@ export var BuildingButtons = (_dec = withStyle(generateStyle, generateComponentT
   speedgraderLink: PropTypes.string,
   startExport: PropTypes.func.isRequired,
   contextUuid: PropTypes.string,
+  iceTopNavBarEnabled: PropTypes.bool,
+  id: PropTypes.string,
+  renderIcon: PropTypes.element,
+  makeStyles: PropTypes.func,
   styles: PropTypes.object
 }, _class2.defaultProps = {
   activeQuizId: null,
@@ -226,6 +415,9 @@ export var BuildingButtons = (_dec = withStyle(generateStyle, generateComponentT
   enableItemBanking: true,
   quizSaving: false,
   speedgraderLink: null,
-  contextUuid: null
+  contextUuid: null,
+  iceTopNavBarEnabled: false,
+  id: 'MoreButton',
+  renderIcon: jsx(IconMoreSolid, null)
 }, _temp)) || _class);
 export default BuildingButtons;

package/es/building/components/layout/header/BuildingButtons/styles.js

@@ -1,15 +1,19 @@
-var generateStyle = function generateStyle(componentTheme) {
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+
+var generateStyle = function generateStyle(componentTheme, props) {
+  var iceTopNavBarEnabled = props.iceTopNavBarEnabled;
   return {
     quizSaving: {
       color: componentTheme.quizSavingColor,
       margin: componentTheme.quizSavingMargin
     },
-    buttonsHolder: {
-      height: '100%',
+    buttonsHolder: _objectSpread({
+      height: '100%'
+    }, !iceTopNavBarEnabled && {
       marginRight: componentTheme.buttonsHolderMargin,
       display: 'flex',
       alignItems: 'center'
-    },
+    }),
     menuIcon: {
       verticalAlign: 'middle',
       marginRight: componentTheme.menuIconMargin,

package/es/index.js

@@ -31,7 +31,6 @@ 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";