@instructure/outcomes-ui 4.1.3 → 4.1.5

package/lib/translated/en-CA/components/Gradebook/icons/MasteryLevelIcon/NoEvidenceIcon.js

@@ -4,13 +4,19 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.NoEvidenceIcon = void 0;
+exports.noEvidenceIconSvgPaths = exports.NoEvidenceIcon = exports.DEFAULT_FILL_NO_EVIDENCE = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _excluded = ["fill"];
+var SVG_PATHS = [{
+  fillRule: 'evenodd',
+  clipRule: 'evenodd',
+  d: 'M18 9C18 13.9706 13.9706 18 9 18C4.02944 18 0 13.9706 0 9C0 4.02944 4.02944 0 9 0C13.9706 0 18 4.02944 18 9ZM12.9842 14.6342C11.8588 15.4314 10.4841 15.9 9 15.9C5.18924 15.9 2.1 12.8108 2.1 9C2.1 7.51587 2.56857 6.14118 3.36584 5.01579L12.9842 14.6342ZM14.4944 13.1745L4.82549 3.50559C5.98455 2.6236 7.43113 2.1 9 2.1C12.8108 2.1 15.9 5.18924 15.9 9C15.9 10.5689 15.3764 12.0155 14.4944 13.1745Z'
+}];
+var DEFAULT_FILL_NO_EVIDENCE = exports.DEFAULT_FILL_NO_EVIDENCE = '#6A7883';
 var NoEvidenceIcon = exports.NoEvidenceIcon = function NoEvidenceIcon(_ref) {
   var _ref$fill = _ref.fill,
-    fill = _ref$fill === void 0 ? '#6A7883' : _ref$fill,
+    fill = _ref$fill === void 0 ? DEFAULT_FILL_NO_EVIDENCE : _ref$fill,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement("svg", Object.assign({
     id: "no_evidence",
@@ -21,9 +27,12 @@ var NoEvidenceIcon = exports.NoEvidenceIcon = function NoEvidenceIcon(_ref) {
     xmlns: "http://www.w3.org/2000/svg",
     role: "img",
     "aria-label": "No Evidence"
-  }, props), /*#__PURE__*/_react.default.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M18 9C18 13.9706 13.9706 18 9 18C4.02944 18 0 13.9706 0 9C0 4.02944 4.02944 0 9 0C13.9706 0 18 4.02944 18 9ZM12.9842 14.6342C11.8588 15.4314 10.4841 15.9 9 15.9C5.18924 15.9 2.1 12.8108 2.1 9C2.1 7.51587 2.56857 6.14118 3.36584 5.01579L12.9842 14.6342ZM14.4944 13.1745L4.82549 3.50559C5.98455 2.6236 7.43113 2.1 9 2.1C12.8108 2.1 15.9 5.18924 15.9 9C15.9 10.5689 15.3764 12.0155 14.4944 13.1745Z"
+  }, props), SVG_PATHS.map(function (pathProps, index) {
+    return /*#__PURE__*/_react.default.createElement("path", Object.assign({
+      key: index
+    }, pathProps));
   }));
-};
+};
+var noEvidenceIconSvgPaths = exports.noEvidenceIconSvgPaths = SVG_PATHS.map(function (p) {
+  return "<path fill-rule=\"".concat(p.fillRule, "\" d=\"").concat(p.d, "\"/>");
+}).join('');

package/lib/translated/en-CA/components/Gradebook/icons/MasteryLevelIcon/RemediationIcon.js

@@ -4,13 +4,19 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.RemediationIcon = void 0;
+exports.remediationIconSvgPaths = exports.RemediationIcon = exports.DEFAULT_FILL_REMEDIATION = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _excluded = ["fill"];
+var SVG_PATHS = [{
+  fillRule: 'evenodd',
+  clipRule: 'evenodd',
+  d: 'M9 16C12.866 16 16 12.866 16 9C16 5.13401 12.866 2 9 2C5.13401 2 2 5.13401 2 9C2 12.866 5.13401 16 9 16ZM9 18C13.9706 18 18 13.9706 18 9C18 4.02944 13.9706 0 9 0C4.02944 0 0 4.02944 0 9C0 13.9706 4.02944 18 9 18Z'
+}];
+var DEFAULT_FILL_REMEDIATION = exports.DEFAULT_FILL_REMEDIATION = '#E0061F';
 var RemediationIcon = exports.RemediationIcon = function RemediationIcon(_ref) {
   var _ref$fill = _ref.fill,
-    fill = _ref$fill === void 0 ? '#E0061F' : _ref$fill,
+    fill = _ref$fill === void 0 ? DEFAULT_FILL_REMEDIATION : _ref$fill,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement("svg", Object.assign({
     id: "remediation",
@@ -21,9 +27,12 @@ var RemediationIcon = exports.RemediationIcon = function RemediationIcon(_ref) {
     xmlns: "http://www.w3.org/2000/svg",
     role: "img",
     "aria-label": "Remediation"
-  }, props), /*#__PURE__*/_react.default.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M9 16C12.866 16 16 12.866 16 9C16 5.13401 12.866 2 9 2C5.13401 2 2 5.13401 2 9C2 12.866 5.13401 16 9 16ZM9 18C13.9706 18 18 13.9706 18 9C18 4.02944 13.9706 0 9 0C4.02944 0 0 4.02944 0 9C0 13.9706 4.02944 18 9 18Z"
+  }, props), SVG_PATHS.map(function (pathProps, index) {
+    return /*#__PURE__*/_react.default.createElement("path", Object.assign({
+      key: index
+    }, pathProps));
   }));
-};
+};
+var remediationIconSvgPaths = exports.remediationIconSvgPaths = SVG_PATHS.map(function (p) {
+  return "<path fill-rule=\"".concat(p.fillRule, "\" d=\"").concat(p.d, "\"/>");
+}).join('');

package/lib/translated/en-CA/components/Gradebook/icons/MasteryLevelIcon/UnassessedIcon.js

@@ -4,13 +4,19 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.UnassessedIcon = void 0;
+exports.unassessedIconSvgPaths = exports.UnassessedIcon = exports.DEFAULT_FILL_UNASSESSED = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _excluded = ["fill"];
+var SVG_PATHS = [{
+  fillRule: 'evenodd',
+  clipRule: 'evenodd',
+  d: 'M17.8287 10.7565L15.8667 10.3683C15.9539 9.92738 16 9.47006 16 9C16 8.52994 15.9539 8.07262 15.8667 7.63168L17.8287 7.24354C17.9411 7.81162 18 8.39893 18 9C18 9.60107 17.9411 10.1884 17.8287 10.7565ZM16.4841 3.99946L14.8222 5.1121C14.3105 4.34788 13.6521 3.68948 12.8879 3.17785L14.0005 1.51591C14.982 2.17298 15.827 3.018 16.4841 3.99946ZM10.7565 0.171306L10.3683 2.13328C9.92738 2.04605 9.47006 2 9 2C8.52994 2 8.07262 2.04605 7.63168 2.13328L7.24354 0.171307C7.81163 0.0589225 8.39893 0 9 0C9.60107 0 10.1884 0.0589224 10.7565 0.171306ZM3.99946 1.51591L5.1121 3.17785C4.34788 3.68948 3.68948 4.34788 3.17785 5.1121L1.51591 3.99946C2.17298 3.018 3.018 2.17298 3.99946 1.51591ZM0.171306 7.24354C0.0589224 7.81163 0 8.39893 0 9C0 9.60107 0.0589225 10.1884 0.171306 10.7565L2.13328 10.3683C2.04605 9.92738 2 9.47006 2 9C2 8.52994 2.04605 8.07262 2.13328 7.63168L0.171306 7.24354ZM1.51591 14.0005L3.17785 12.8879C3.68948 13.6521 4.34788 14.3105 5.1121 14.8222L3.99946 16.4841C3.018 15.827 2.17298 14.982 1.51591 14.0005ZM7.24354 17.8287L7.63168 15.8667C8.07262 15.9539 8.52994 16 9 16C9.47006 16 9.92738 15.9539 10.3683 15.8667L10.7565 17.8287C10.1884 17.9411 9.60107 18 9 18C8.39893 18 7.81163 17.9411 7.24354 17.8287ZM14.0005 16.4841C14.982 15.827 15.827 14.982 16.4841 14.0005L14.8222 12.8879C14.3105 13.6521 13.6521 14.3105 12.8879 14.8222L14.0005 16.4841Z'
+}];
+var DEFAULT_FILL_UNASSESSED = exports.DEFAULT_FILL_UNASSESSED = '#C7CDD1';
 var UnassessedIcon = exports.UnassessedIcon = function UnassessedIcon(_ref) {
   var _ref$fill = _ref.fill,
-    fill = _ref$fill === void 0 ? '#C7CDD1' : _ref$fill,
+    fill = _ref$fill === void 0 ? DEFAULT_FILL_UNASSESSED : _ref$fill,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement("svg", Object.assign({
     id: "unassessed",
@@ -21,9 +27,12 @@ var UnassessedIcon = exports.UnassessedIcon = function UnassessedIcon(_ref) {
     xmlns: "http://www.w3.org/2000/svg",
     role: "img",
     "aria-label": "Unassessed"
-  }, props), /*#__PURE__*/_react.default.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M17.8287 10.7565L15.8667 10.3683C15.9539 9.92738 16 9.47006 16 9C16 8.52994 15.9539 8.07262 15.8667 7.63168L17.8287 7.24354C17.9411 7.81162 18 8.39893 18 9C18 9.60107 17.9411 10.1884 17.8287 10.7565ZM16.4841 3.99946L14.8222 5.1121C14.3105 4.34788 13.6521 3.68948 12.8879 3.17785L14.0005 1.51591C14.982 2.17298 15.827 3.018 16.4841 3.99946ZM10.7565 0.171306L10.3683 2.13328C9.92738 2.04605 9.47006 2 9 2C8.52994 2 8.07262 2.04605 7.63168 2.13328L7.24354 0.171307C7.81163 0.0589225 8.39893 0 9 0C9.60107 0 10.1884 0.0589224 10.7565 0.171306ZM3.99946 1.51591L5.1121 3.17785C4.34788 3.68948 3.68948 4.34788 3.17785 5.1121L1.51591 3.99946C2.17298 3.018 3.018 2.17298 3.99946 1.51591ZM0.171306 7.24354C0.0589224 7.81163 0 8.39893 0 9C0 9.60107 0.0589225 10.1884 0.171306 10.7565L2.13328 10.3683C2.04605 9.92738 2 9.47006 2 9C2 8.52994 2.04605 8.07262 2.13328 7.63168L0.171306 7.24354ZM1.51591 14.0005L3.17785 12.8879C3.68948 13.6521 4.34788 14.3105 5.1121 14.8222L3.99946 16.4841C3.018 15.827 2.17298 14.982 1.51591 14.0005ZM7.24354 17.8287L7.63168 15.8667C8.07262 15.9539 8.52994 16 9 16C9.47006 16 9.92738 15.9539 10.3683 15.8667L10.7565 17.8287C10.1884 17.9411 9.60107 18 9 18C8.39893 18 7.81163 17.9411 7.24354 17.8287ZM14.0005 16.4841C14.982 15.827 15.827 14.982 16.4841 14.0005L14.8222 12.8879C14.3105 13.6521 13.6521 14.3105 12.8879 14.8222L14.0005 16.4841Z"
+  }, props), SVG_PATHS.map(function (pathProps, index) {
+    return /*#__PURE__*/_react.default.createElement("path", Object.assign({
+      key: index
+    }, pathProps));
   }));
-};
+};
+var unassessedIconSvgPaths = exports.unassessedIconSvgPaths = SVG_PATHS.map(function (p) {
+  return "<path fill-rule=\"".concat(p.fillRule, "\" d=\"").concat(p.d, "\"/>");
+}).join('');

package/lib/translated/en-CA/components/Gradebook/popovers/StudentPopover/__tests__/index.test.js

@@ -257,80 +257,156 @@ describe('StudentPopover', function () {
       }, _callee0);
     })));
   });
-  describe('Loading State', function () {
-    it('shows a spinner when isLoading is true', /*#__PURE__*/(0, _asyncToGenerator2.default)(/*#__PURE__*/(0, _regenerator2.default)().m(function _callee1() {
-      var _t6;
+  describe('Security', function () {
+    it('does not render the mastery report link for a javascript: URI', /*#__PURE__*/(0, _asyncToGenerator2.default)(/*#__PURE__*/(0, _regenerator2.default)().m(function _callee1() {
       return (0, _regenerator2.default)().w(function (_context1) {
         while (1) switch (_context1.n) {
           case 0:
             renderComponent({
-              isLoading: true
+              studentGradesUrl: 'javascript:alert(document.cookie)'
             });
             _react2.fireEvent.click(_react2.screen.getByTestId('student-cell-link'));
-            _t6 = expect;
             _context1.n = 1;
-            return _react2.screen.findByTitle('Loading user details');
+            return _react2.screen.findByText('Message');
           case 1:
-            _t6(_context1.v).toBeInTheDocument();
+            expect(_react2.screen.queryByText('View Mastery Report')).not.toBeInTheDocument();
           case 2:
             return _context1.a(2);
         }
       }, _callee1);
     })));
-    it('does not show student details when isLoading is true', /*#__PURE__*/(0, _asyncToGenerator2.default)(/*#__PURE__*/(0, _regenerator2.default)().m(function _callee10() {
+    it('does not render the mastery report link for a data: URI', /*#__PURE__*/(0, _asyncToGenerator2.default)(/*#__PURE__*/(0, _regenerator2.default)().m(function _callee10() {
       return (0, _regenerator2.default)().w(function (_context10) {
         while (1) switch (_context10.n) {
           case 0:
             renderComponent({
-              isLoading: true
+              studentGradesUrl: 'data:text/html,<script>alert(1)</script>'
             });
             _react2.fireEvent.click(_react2.screen.getByTestId('student-cell-link'));
             _context10.n = 1;
-            return _react2.screen.findByTitle('Loading user details');
+            return _react2.screen.findByText('Message');
           case 1:
-            expect(_react2.screen.queryByTestId('lmgb-student-popover-avatar')).not.toBeInTheDocument();
+            expect(_react2.screen.queryByText('View Mastery Report')).not.toBeInTheDocument();
           case 2:
             return _context10.a(2);
         }
       }, _callee10);
     })));
-  });
-  describe('Error State', function () {
-    it('shows an error message when error prop is provided', /*#__PURE__*/(0, _asyncToGenerator2.default)(/*#__PURE__*/(0, _regenerator2.default)().m(function _callee11() {
-      var _t7;
+    it('renders the mastery report link for a safe https URL', /*#__PURE__*/(0, _asyncToGenerator2.default)(/*#__PURE__*/(0, _regenerator2.default)().m(function _callee11() {
+      var safeUrl, masteryLink;
       return (0, _regenerator2.default)().w(function (_context11) {
         while (1) switch (_context11.n) {
           case 0:
+            safeUrl = 'https://canvas.instructure.com/courses/123/grades/1';
             renderComponent({
-              error: 'Failed to load student details'
+              studentGradesUrl: safeUrl
             });
             _react2.fireEvent.click(_react2.screen.getByTestId('student-cell-link'));
-            _t7 = expect;
             _context11.n = 1;
-            return _react2.screen.findByText('Failed to load student details');
+            return _react2.screen.findByText('View Mastery Report');
           case 1:
-            _t7(_context11.v).toBeInTheDocument();
+            masteryLink = _context11.v;
+            expect(masteryLink.closest('a')).toHaveAttribute('href', safeUrl);
           case 2:
             return _context11.a(2);
         }
       }, _callee11);
     })));
-    it('does not show student details when error is present', /*#__PURE__*/(0, _asyncToGenerator2.default)(/*#__PURE__*/(0, _regenerator2.default)().m(function _callee12() {
+    it('renders the mastery report link for a safe http URL', /*#__PURE__*/(0, _asyncToGenerator2.default)(/*#__PURE__*/(0, _regenerator2.default)().m(function _callee12() {
+      var safeUrl, masteryLink;
       return (0, _regenerator2.default)().w(function (_context12) {
         while (1) switch (_context12.n) {
           case 0:
+            safeUrl = 'http://canvas.instructure.com/courses/123/grades/1';
             renderComponent({
-              error: 'Something went wrong'
+              studentGradesUrl: safeUrl
             });
             _react2.fireEvent.click(_react2.screen.getByTestId('student-cell-link'));
             _context12.n = 1;
-            return _react2.screen.findByText('Something went wrong');
+            return _react2.screen.findByText('View Mastery Report');
           case 1:
-            expect(_react2.screen.queryByTestId('lmgb-student-popover-avatar')).not.toBeInTheDocument();
+            masteryLink = _context12.v;
+            expect(masteryLink.closest('a')).toHaveAttribute('href', safeUrl);
           case 2:
             return _context12.a(2);
         }
       }, _callee12);
     })));
   });
+  describe('Loading State', function () {
+    it('shows a spinner when isLoading is true', /*#__PURE__*/(0, _asyncToGenerator2.default)(/*#__PURE__*/(0, _regenerator2.default)().m(function _callee13() {
+      var _t6;
+      return (0, _regenerator2.default)().w(function (_context13) {
+        while (1) switch (_context13.n) {
+          case 0:
+            renderComponent({
+              isLoading: true
+            });
+            _react2.fireEvent.click(_react2.screen.getByTestId('student-cell-link'));
+            _t6 = expect;
+            _context13.n = 1;
+            return _react2.screen.findByTitle('Loading user details');
+          case 1:
+            _t6(_context13.v).toBeInTheDocument();
+          case 2:
+            return _context13.a(2);
+        }
+      }, _callee13);
+    })));
+    it('does not show student details when isLoading is true', /*#__PURE__*/(0, _asyncToGenerator2.default)(/*#__PURE__*/(0, _regenerator2.default)().m(function _callee14() {
+      return (0, _regenerator2.default)().w(function (_context14) {
+        while (1) switch (_context14.n) {
+          case 0:
+            renderComponent({
+              isLoading: true
+            });
+            _react2.fireEvent.click(_react2.screen.getByTestId('student-cell-link'));
+            _context14.n = 1;
+            return _react2.screen.findByTitle('Loading user details');
+          case 1:
+            expect(_react2.screen.queryByTestId('lmgb-student-popover-avatar')).not.toBeInTheDocument();
+          case 2:
+            return _context14.a(2);
+        }
+      }, _callee14);
+    })));
+  });
+  describe('Error State', function () {
+    it('shows an error message when error prop is provided', /*#__PURE__*/(0, _asyncToGenerator2.default)(/*#__PURE__*/(0, _regenerator2.default)().m(function _callee15() {
+      var _t7;
+      return (0, _regenerator2.default)().w(function (_context15) {
+        while (1) switch (_context15.n) {
+          case 0:
+            renderComponent({
+              error: 'Failed to load student details'
+            });
+            _react2.fireEvent.click(_react2.screen.getByTestId('student-cell-link'));
+            _t7 = expect;
+            _context15.n = 1;
+            return _react2.screen.findByText('Failed to load student details');
+          case 1:
+            _t7(_context15.v).toBeInTheDocument();
+          case 2:
+            return _context15.a(2);
+        }
+      }, _callee15);
+    })));
+    it('does not show student details when error is present', /*#__PURE__*/(0, _asyncToGenerator2.default)(/*#__PURE__*/(0, _regenerator2.default)().m(function _callee16() {
+      return (0, _regenerator2.default)().w(function (_context16) {
+        while (1) switch (_context16.n) {
+          case 0:
+            renderComponent({
+              error: 'Something went wrong'
+            });
+            _react2.fireEvent.click(_react2.screen.getByTestId('student-cell-link'));
+            _context16.n = 1;
+            return _react2.screen.findByText('Something went wrong');
+          case 1:
+            expect(_react2.screen.queryByTestId('lmgb-student-popover-avatar')).not.toBeInTheDocument();
+          case 2:
+            return _context16.a(2);
+        }
+      }, _callee16);
+    })));
+  });
 });

package/lib/translated/en-CA/components/Gradebook/popovers/StudentPopover/index.js

@@ -107,6 +107,9 @@ var MasteryScores = function MasteryScores(_ref2) {
     }, bucket.count)));
   }))));
 };
+var isSafeUrl = function isSafeUrl(url) {
+  return /^(https?:\/\/|\/)/i.test(url);
+};
 var Actions = function Actions(_ref3) {
   var studentGradesUrl = _ref3.studentGradesUrl;
   var _useState = (0, _react.useState)(false),
@@ -129,7 +132,7 @@ var Actions = function Actions(_ref3) {
     borderWidth: "none small none none",
     width: "0px",
     height: "1.4rem"
-  }), studentGradesUrl && /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, null, /*#__PURE__*/_react.default.createElement(_uiLink.Link, {
+  }), studentGradesUrl && isSafeUrl(studentGradesUrl) && /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, null, /*#__PURE__*/_react.default.createElement(_uiLink.Link, {
     href: studentGradesUrl,
     variant: "standalone"
   }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {

package/lib/translated/en-CA/components/Gradebook/table/Cell/index.js

@@ -91,19 +91,9 @@ var arePropsEqual = function arePropsEqual(prevProps, nextProps) {
   // onKeyDown should be stable (useCallback), but check just in case
   if (prevProps.onKeyDown !== nextProps.onKeyDown) return false;
 
-  // For function children (render functions), we can't compare the function itself
-  // Instead, we rely on the fact that if all other props (especially data-cell-id
-  // which includes col.key and row data) are the same, the function would produce
-  // the same output. This is safe because:
-  // - row data doesn't change during column reorder
-  // - col.key is stable per column
-  // - The function just calls col.render with that data
-  var prevChildrenIsFunction = typeof prevProps.children === 'function';
-  var nextChildrenIsFunction = typeof nextProps.children === 'function';
-  if (prevChildrenIsFunction !== nextChildrenIsFunction) return false;
-
-  // For non-function children, compare directly
-  if (!nextChildrenIsFunction && prevProps.children !== nextProps.children) return false;
+  // Compare children by reference - function children must be stabilized with useCallback
+  // by the caller if re-renders should be avoided
+  if (prevProps.children !== nextProps.children) return false;
 
   // For function children, skip comparison - they're always new references but produce same output
   // when all other props are the same

package/lib/translated/en-CA/components/Gradebook/table/ColumnHeader/index.js

@@ -37,11 +37,9 @@ var arePropsEqual = function arePropsEqual(prevProps, nextProps) {
   // onMove and onDragEnd should be stable (useCallback in stories/parent)
   // but we don't need to check them since they're filtered out before DOM
 
-  // Skip children comparison - children might be new React elements on each render,
-  // but if all stable identifiers (id, data-cell-id, data-col-key) are the same,
-  // the column hasn't actually changed and we can safely skip re-rendering.
-  // This matches Cell's approach of relying on stable props rather than comparing children.
-
+  // Compare children by reference - function children must be stabilized with useCallback
+  // by the caller if re-renders should be avoided
+  if (prevProps.children !== nextProps.children) return false;
   return true;
 };
 var ColumnHeaderComponent = function ColumnHeaderComponent(_ref) {

package/lib/translated/en-CA/components/Gradebook/table/Table/index.js

@@ -20,15 +20,30 @@ var _index4 = require("../Cell/index.js");
 var _index5 = require("../Row/index.js");
 var _index6 = require("../RowHeader/index.js");
 var _index7 = require("../ColumnHeader/index.js");
-var _excluded = ["id", "columns", "data", "caption", "renderAboveHeader", "dragDropConfig"];
-var TableComponent = exports.TableComponent = function TableComponent(_ref) {
-  var id = _ref.id,
-    columns = _ref.columns,
-    data = _ref.data,
-    caption = _ref.caption,
-    renderAboveHeader = _ref.renderAboveHeader,
-    dragDropConfig = _ref.dragDropConfig,
-    tableProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+var _excluded = ["colRender", "rowData", "cellData"],
+  _excluded2 = ["id", "columns", "data", "caption", "renderAboveHeader", "dragDropConfig"];
+// DataCell keeps the Cell child arrow function out of the hot render
+// path. React.memo compares colRender/rowData/cellData by reference; when columns are
+// reordered those values don't change, so Cell never receives new props and skips render.
+
+var DataCellInner = function DataCellInner(_ref) {
+  var colRender = _ref.colRender,
+    rowData = _ref.rowData,
+    cellData = _ref.cellData,
+    cellProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_index4.Cell, cellProps, function (focused) {
+    return colRender(cellData, rowData, focused);
+  });
+};
+var DataCell = /*#__PURE__*/_react.default.memo(DataCellInner);
+var TableComponent = exports.TableComponent = function TableComponent(_ref2) {
+  var id = _ref2.id,
+    columns = _ref2.columns,
+    data = _ref2.data,
+    caption = _ref2.caption,
+    renderAboveHeader = _ref2.renderAboveHeader,
+    dragDropConfig = _ref2.dragDropConfig,
+    tableProps = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
   var tableRef = (0, _react.useRef)(null);
   var columnsRef = (0, _react.useRef)(columns);
 
@@ -193,11 +208,12 @@ var TableComponent = exports.TableComponent = function TableComponent(_ref) {
           }, props), col.render ? col.render(row[col.key], row) : row[col.key]);
         }
         if (col.render) {
-          return /*#__PURE__*/_react.default.createElement(_index4.Cell, Object.assign({
-            key: col.key
-          }, props), function (focused) {
-            return col.render(row[col.key], row, focused);
-          });
+          return /*#__PURE__*/_react.default.createElement(DataCell, Object.assign({
+            key: col.key,
+            colRender: col.render,
+            rowData: row,
+            cellData: row[col.key]
+          }, props));
         }
         return /*#__PURE__*/_react.default.createElement(_index4.Cell, Object.assign({
           key: col.key

package/lib/translated/en-CA/lib/__tests__/sanitize.test.js

@@ -2,17 +2,139 @@
 
 var _globals = require("@jest/globals");
 var _sanitize = require("../sanitize.js");
-(0, _globals.describe)('sanitizeForHtml', function () {
-  (0, _globals.it)('cleans invalid tags', function () {
-    var invalid = '<monkey>tag isn\'t closed';
-    (0, _globals.expect)((0, _sanitize.sanitizeHtml)(invalid)).toContain('</monkey>');
+(0, _globals.describe)('sanitizeHtml', function () {
+  (0, _globals.describe)('equation images (Canvas-specific)', function () {
+    (0, _globals.it)('rewrites /equation_images src to absolute canvas URL', function () {
+      var equationImage = 'Some text with an <img src="/equation_images/image" />';
+      (0, _globals.expect)((0, _sanitize.sanitizeHtml)(equationImage)).toContain('canvas.instructure.com/equation_images/image');
+    });
+    (0, _globals.it)('adds vertical-align style to equation images', function () {
+      var equationImage = '<img src="/equation_images/abc" />';
+      (0, _globals.expect)((0, _sanitize.sanitizeHtml)(equationImage)).toContain('vertical-align: middle');
+    });
+    (0, _globals.it)('leaves non-equation image src untouched', function () {
+      var otherImage = '<img src="/another_image">';
+      var out = (0, _sanitize.sanitizeHtml)(otherImage);
+      (0, _globals.expect)(out).toContain('src="/another_image"');
+      (0, _globals.expect)(out).not.toContain('canvas.instructure.com');
+    });
   });
-  (0, _globals.it)('replaces equation images', function () {
-    var equationImage = 'Some text with an <img src="/equation_images/image" />';
-    (0, _globals.expect)((0, _sanitize.sanitizeHtml)(equationImage)).toContain('canvas.instructure.com/equation_images/image');
+  (0, _globals.describe)('null / empty input handling', function () {
+    (0, _globals.it)('returns empty string for null', function () {
+      (0, _globals.expect)((0, _sanitize.sanitizeHtml)(null)).toBe('');
+    });
+    (0, _globals.it)('returns empty string for undefined', function () {
+      (0, _globals.expect)((0, _sanitize.sanitizeHtml)(void 0)).toBe('');
+    });
+    (0, _globals.it)('returns empty string for empty string', function () {
+      (0, _globals.expect)((0, _sanitize.sanitizeHtml)('')).toBe('');
+    });
   });
-  (0, _globals.it)('leaves other images alone', function () {
-    var otherImage = 'Some text with <img src="/another_image" />';
-    (0, _globals.expect)((0, _sanitize.sanitizeHtml)(otherImage)).toBe(otherImage);
+  (0, _globals.describe)('XSS - script execution vectors', function () {
+    (0, _globals.it)('strips <script> tags', function () {
+      var xss = 'Hello<script>alert(1)</script>World';
+      var out = (0, _sanitize.sanitizeHtml)(xss);
+      (0, _globals.expect)(out).not.toContain('<script');
+      (0, _globals.expect)(out).not.toContain('alert(1)');
+    });
+    (0, _globals.it)('strips inline event handlers (onerror)', function () {
+      var xss = '<img src="x" onerror="alert(1)">';
+      var out = (0, _sanitize.sanitizeHtml)(xss);
+      (0, _globals.expect)(out).not.toMatch(/onerror/i);
+      (0, _globals.expect)(out).not.toContain('alert(1)');
+    });
+    (0, _globals.it)('strips inline event handlers (onclick)', function () {
+      var xss = '<a href="#" onclick="alert(1)">click</a>';
+      var out = (0, _sanitize.sanitizeHtml)(xss);
+      (0, _globals.expect)(out).not.toMatch(/onclick/i);
+    });
+    (0, _globals.it)('strips inline event handlers (onload on svg)', function () {
+      var xss = '<svg onload="alert(1)"></svg>';
+      var out = (0, _sanitize.sanitizeHtml)(xss);
+      (0, _globals.expect)(out).not.toMatch(/onload/i);
+      (0, _globals.expect)(out).not.toContain('alert(1)');
+    });
+    (0, _globals.it)('strips javascript: URLs in href', function () {
+      // eslint-disable-next-line no-script-url
+      var xss = '<a href="javascript:alert(1)">x</a>';
+      var out = (0, _sanitize.sanitizeHtml)(xss);
+      (0, _globals.expect)(out).not.toMatch(/javascript:/i);
+    });
+    (0, _globals.it)('strips javascript: URLs in img src', function () {
+      // eslint-disable-next-line no-script-url
+      var xss = '<img src="javascript:alert(1)">';
+      var out = (0, _sanitize.sanitizeHtml)(xss);
+      (0, _globals.expect)(out).not.toMatch(/javascript:/i);
+    });
+    (0, _globals.it)('strips data: URLs that contain HTML/JS in iframe src', function () {
+      var xss = '<iframe src="data:text/html,<script>alert(1)</script>"></iframe>';
+      var out = (0, _sanitize.sanitizeHtml)(xss);
+      (0, _globals.expect)(out).not.toContain('alert(1)');
+    });
+    (0, _globals.it)('strips <object> tags', function () {
+      var xss = '<object data="evil.swf"></object>';
+      (0, _globals.expect)((0, _sanitize.sanitizeHtml)(xss)).not.toContain('<object');
+    });
+    (0, _globals.it)('strips <embed> tags', function () {
+      var xss = '<embed src="evil.swf">';
+      (0, _globals.expect)((0, _sanitize.sanitizeHtml)(xss)).not.toContain('<embed');
+    });
+    (0, _globals.it)('strips <form> tags (CSRF / phishing surface)', function () {
+      var xss = '<form action="https://evil.com"><input name=x></form>';
+      (0, _globals.expect)((0, _sanitize.sanitizeHtml)(xss)).not.toContain('<form');
+    });
+    (0, _globals.it)('strips style tags (CSS-based exfil / clickjacking)', function () {
+      var xss = '<style>body{background:url(//evil.com/?c=)}</style>';
+      (0, _globals.expect)((0, _sanitize.sanitizeHtml)(xss)).not.toContain('<style');
+    });
+    (0, _globals.it)('strips <meta http-equiv refresh> redirects', function () {
+      var xss = '<meta http-equiv="refresh" content="0;url=https://evil.com">';
+      (0, _globals.expect)((0, _sanitize.sanitizeHtml)(xss)).not.toContain('<meta');
+    });
+    (0, _globals.it)('strips <base> tag (can rewrite all relative URLs)', function () {
+      var xss = '<base href="https://evil.com/">';
+      (0, _globals.expect)((0, _sanitize.sanitizeHtml)(xss)).not.toContain('<base');
+    });
+    (0, _globals.it)('strips encoded onerror payloads', function () {
+      var xss = '<img src=x onerror=&#97;&#108;&#101;&#114;&#116;(1)>';
+      var out = (0, _sanitize.sanitizeHtml)(xss);
+      (0, _globals.expect)(out).not.toMatch(/onerror/i);
+    });
+    (0, _globals.it)('strips mixed-case obfuscated script tags', function () {
+      var xss = '<ScRiPt>alert(1)</sCrIpT>';
+      var out = (0, _sanitize.sanitizeHtml)(xss);
+      (0, _globals.expect)(out).not.toMatch(/<script/i);
+      (0, _globals.expect)(out).not.toContain('alert(1)');
+    });
+  });
+  (0, _globals.describe)('benign HTML (should be preserved)', function () {
+    (0, _globals.it)('preserves basic formatting tags', function () {
+      var html = '<p>Hello <strong>world</strong> <em>!</em></p>';
+      (0, _globals.expect)((0, _sanitize.sanitizeHtml)(html)).toBe(html);
+    });
+    (0, _globals.it)('preserves links with safe http(s) hrefs', function () {
+      var html = '<a href="https://example.com">link</a>';
+      (0, _globals.expect)((0, _sanitize.sanitizeHtml)(html)).toContain('href="https://example.com"');
+    });
+    (0, _globals.it)('preserves lists', function () {
+      var html = '<ul><li>a</li><li>b</li></ul>';
+      (0, _globals.expect)((0, _sanitize.sanitizeHtml)(html)).toBe(html);
+    });
+    (0, _globals.it)('preserves Canvas RCE iframes (Studio / media embeds)', function () {
+      var html = '<iframe src="https://canvas.instructure.com/media_objects_iframe/123" ' + 'allowfullscreen="" allow="fullscreen" frameborder="0" ' + 'data-media-id="123" data-media-type="video"></iframe>';
+      var out = (0, _sanitize.sanitizeHtml)(html);
+      (0, _globals.expect)(out).toContain('<iframe');
+      (0, _globals.expect)(out).toContain('data-media-id="123"');
+      (0, _globals.expect)(out).toContain('data-media-type="video"');
+      (0, _globals.expect)(out).toContain('allowfullscreen');
+    });
+  });
+  (0, _globals.describe)('link hardening', function () {
+    (0, _globals.it)('adds rel="noopener noreferrer" to target=_blank links', function () {
+      var html = '<a href="https://example.com" target="_blank">x</a>';
+      var out = (0, _sanitize.sanitizeHtml)(html);
+      (0, _globals.expect)(out).toMatch(/rel=["'][^"']*noopener[^"']*["']/);
+      (0, _globals.expect)(out).toMatch(/rel=["'][^"']*noreferrer[^"']*["']/);
+    });
   });
 });

package/lib/translated/en-CA/lib/sanitize.js

@@ -5,32 +5,28 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.sanitizeHtml = sanitizeHtml;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _sanitizeHtml = _interopRequireDefault(require("sanitize-html"));
-function transformEquationImage(tagName, attribs) {
-  return {
-    tagName: tagName,
-    attribs: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, attribs), {}, {
-      src: "https://canvas.instructure.com".concat(attribs.src),
-      style: 'vertical-align: middle'
-    })
-  };
-}
-function transformImage(tagName, attribs) {
-  if (attribs.src != null && attribs.src.indexOf('/equation_images') === 0) {
-    return transformEquationImage(tagName, attribs);
+var _dompurify = _interopRequireDefault(require("dompurify"));
+var CONFIG = {
+  ADD_TAGS: ['iframe'],
+  ADD_ATTR: ['allowfullscreen', 'allow', 'frameborder', 'sandbox', 'target', 'data-media-id', 'data-media-type'],
+  FORBID_TAGS: ['form', 'input', 'button', 'textarea', 'select', 'option']
+};
+
+// Rewrite Canvas equation-image relative URLs to absolute,
+// preserving the previous behavior of this module.
+_dompurify.default.addHook('afterSanitizeAttributes', function (node) {
+  if (node.tagName === 'IMG') {
+    var src = node.getAttribute('src') || '';
+    if (src.indexOf('/equation_images') === 0) {
+      node.setAttribute('src', "https://canvas.instructure.com".concat(src));
+      node.setAttribute('style', 'vertical-align: middle');
+    }
+  }
+  // Harden links opened in a new tab against tab-nabbing.
+  if (node.tagName === 'A' && node.getAttribute('target') === '_blank') {
+    node.setAttribute('rel', 'noopener noreferrer');
   }
-  return {
-    tagName: tagName,
-    attribs: attribs
-  };
-}
+});
 function sanitizeHtml(html) {
-  return (0, _sanitizeHtml.default)(html, {
-    allowedTags: false,
-    allowedAttributes: false,
-    transformTags: {
-      img: transformImage
-    }
-  });
+  return _dompurify.default.sanitize(html == null ? '' : html, CONFIG);
 }