@instructure/outcomes-ui 4.1.1 → 4.1.2

package/es/translated/es/components/Gradebook/gradebook-table/StudentCell/__tests__/index.test.js

@@ -4,19 +4,7 @@ import { expect } from '@jest/globals';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { SecondaryInfoDisplay, NameDisplayFormat } from "../../../../../util/gradebook/constants.js";
-import { GradebookConfigProvider } from "../../../context/GradebookConfigContext/index.js";
-import { mockMasteryScores } from "../../../__mocks__/mockData.js";
 import { StudentCell } from "../index.js";
-jest.mock("../../../popovers/StudentPopover", function () {
-  return {
-    StudentPopover: function StudentPopover(_ref) {
-      var studentName = _ref.studentName;
-      return /*#__PURE__*/React.createElement("div", {
-        "data-testid": "student-popover"
-      }, studentName);
-    }
-  };
-});
 var mockStudent = {
   id: '123',
   name: 'Jane Doe',
@@ -28,82 +16,54 @@ var mockStudent = {
   avatar_url: 'https://example.com/avatar.jpg',
   status: 'active'
 };
-var DEFAULT_CONFIG = {
-  components: {
-    StudentPopover: function StudentPopover(_ref2) {
-      var studentName = _ref2.studentName;
-      return /*#__PURE__*/React.createElement("div", {
-        "data-testid": "student-popover"
-      }, studentName);
-    },
-    SettingsTrayContent: function SettingsTrayContent() {
-      return /*#__PURE__*/React.createElement("div", null, "Settings Content");
-    }
-  }
-};
-var renderWithConfig = function renderWithConfig(ui) {
-  var config = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : DEFAULT_CONFIG;
-  return render(/*#__PURE__*/React.createElement(GradebookConfigProvider, {
-    config: config
-  }, ui));
-};
 describe('StudentCell', function () {
   var defaultProps = {
-    courseId: 'course-1',
     student: mockStudent,
-    masteryScores: mockMasteryScores
+    studentPopover: /*#__PURE__*/React.createElement("div", {
+      "data-testid": "student-popover"
+    }, "Jane Doe")
   };
   describe('rendering', function () {
     it('renders the student cell with default props', function () {
-      renderWithConfig(/*#__PURE__*/React.createElement(StudentCell, defaultProps));
+      render(/*#__PURE__*/React.createElement(StudentCell, defaultProps));
       expect(screen.getByTestId('student-cell')).toBeInTheDocument();
     });
     it('renders the student avatar by default', function () {
-      renderWithConfig(/*#__PURE__*/React.createElement(StudentCell, defaultProps));
+      render(/*#__PURE__*/React.createElement(StudentCell, defaultProps));
       expect(screen.getByTestId('student-avatar')).toBeInTheDocument();
     });
     it('does not render the student avatar when showStudentAvatar is false', function () {
-      renderWithConfig(/*#__PURE__*/React.createElement(StudentCell, Object.assign({}, defaultProps, {
+      render(/*#__PURE__*/React.createElement(StudentCell, Object.assign({}, defaultProps, {
         showStudentAvatar: false
       })));
       expect(screen.queryByTestId('student-avatar')).not.toBeInTheDocument();
     });
-    it('renders the StudentPopover component', function () {
-      renderWithConfig(/*#__PURE__*/React.createElement(StudentCell, defaultProps));
-      expect(screen.getByTestId('student-popover')).toBeInTheDocument();
-    });
-    it('passes masteryScores to StudentPopover', function () {
-      renderWithConfig(/*#__PURE__*/React.createElement(StudentCell, Object.assign({}, defaultProps, {
-        masteryScores: mockMasteryScores
-      })));
+    it('renders the student popover', function () {
+      render(/*#__PURE__*/React.createElement(StudentCell, defaultProps));
       expect(screen.getByTestId('student-popover')).toBeInTheDocument();
     });
   });
-  describe('student name display', function () {
-    it('displays student display_name by default', function () {
-      renderWithConfig(/*#__PURE__*/React.createElement(StudentCell, defaultProps));
+  describe('student popover content', function () {
+    it('renders the provided student popover content', function () {
+      render(/*#__PURE__*/React.createElement(StudentCell, defaultProps));
       expect(screen.getByTestId('student-popover')).toHaveTextContent('Jane Doe');
     });
-    it('displays student display_name when nameDisplayFormat is FIRST_LAST', function () {
-      renderWithConfig(/*#__PURE__*/React.createElement(StudentCell, Object.assign({}, defaultProps, {
-        nameDisplayFormat: NameDisplayFormat.FIRST_LAST
-      })));
-      expect(screen.getByTestId('student-popover')).toHaveTextContent('Jane Doe');
-    });
-    it('displays student sortable_name when nameDisplayFormat is LAST_FIRST', function () {
-      renderWithConfig(/*#__PURE__*/React.createElement(StudentCell, Object.assign({}, defaultProps, {
-        nameDisplayFormat: NameDisplayFormat.LAST_FIRST
+    it('can render custom popover content', function () {
+      render(/*#__PURE__*/React.createElement(StudentCell, Object.assign({}, defaultProps, {
+        studentPopover: /*#__PURE__*/React.createElement("div", {
+          "data-testid": "custom-popover"
+        }, "Custom Content")
       })));
-      expect(screen.getByTestId('student-popover')).toHaveTextContent('Doe, Jane');
+      expect(screen.getByTestId('custom-popover')).toHaveTextContent('Custom Content');
     });
   });
   describe('secondary info display', function () {
     it('does not render secondary info when secondaryInfoDisplay is not provided', function () {
-      renderWithConfig(/*#__PURE__*/React.createElement(StudentCell, defaultProps));
+      render(/*#__PURE__*/React.createElement(StudentCell, defaultProps));
       expect(screen.queryByTestId('student-secondary-info')).not.toBeInTheDocument();
     });
     it('renders SIS ID when secondaryInfoDisplay is SIS_ID', function () {
-      renderWithConfig(/*#__PURE__*/React.createElement(StudentCell, Object.assign({}, defaultProps, {
+      render(/*#__PURE__*/React.createElement(StudentCell, Object.assign({}, defaultProps, {
         secondaryInfoDisplay: SecondaryInfoDisplay.SIS_ID
       })));
       var secondaryInfo = screen.getByTestId('student-secondary-info');
@@ -111,7 +71,7 @@ describe('StudentCell', function () {
       expect(secondaryInfo).toHaveTextContent('SIS123');
     });
     it('renders integration ID when secondaryInfoDisplay is INTEGRATION_ID', function () {
-      renderWithConfig(/*#__PURE__*/React.createElement(StudentCell, Object.assign({}, defaultProps, {
+      render(/*#__PURE__*/React.createElement(StudentCell, Object.assign({}, defaultProps, {
         secondaryInfoDisplay: SecondaryInfoDisplay.INTEGRATION_ID
       })));
       var secondaryInfo = screen.getByTestId('student-secondary-info');
@@ -119,7 +79,7 @@ describe('StudentCell', function () {
       expect(secondaryInfo).toHaveTextContent('INT456');
     });
     it('renders login ID when secondaryInfoDisplay is LOGIN_ID', function () {
-      renderWithConfig(/*#__PURE__*/React.createElement(StudentCell, Object.assign({}, defaultProps, {
+      render(/*#__PURE__*/React.createElement(StudentCell, Object.assign({}, defaultProps, {
         secondaryInfoDisplay: SecondaryInfoDisplay.LOGIN_ID
       })));
       var secondaryInfo = screen.getByTestId('student-secondary-info');
@@ -130,7 +90,7 @@ describe('StudentCell', function () {
       var studentWithoutSIS = _objectSpread(_objectSpread({}, mockStudent), {}, {
         sis_id: void 0
       });
-      renderWithConfig(/*#__PURE__*/React.createElement(StudentCell, Object.assign({}, defaultProps, {
+      render(/*#__PURE__*/React.createElement(StudentCell, Object.assign({}, defaultProps, {
         student: studentWithoutSIS,
         secondaryInfoDisplay: SecondaryInfoDisplay.SIS_ID
       })));
@@ -142,7 +102,7 @@ describe('StudentCell', function () {
       var studentWithoutIntegrationId = _objectSpread(_objectSpread({}, mockStudent), {}, {
         integration_id: void 0
       });
-      renderWithConfig(/*#__PURE__*/React.createElement(StudentCell, Object.assign({}, defaultProps, {
+      render(/*#__PURE__*/React.createElement(StudentCell, Object.assign({}, defaultProps, {
         student: studentWithoutIntegrationId,
         secondaryInfoDisplay: SecondaryInfoDisplay.INTEGRATION_ID
       })));
@@ -154,7 +114,7 @@ describe('StudentCell', function () {
       var studentWithoutLoginId = _objectSpread(_objectSpread({}, mockStudent), {}, {
         login_id: void 0
       });
-      renderWithConfig(/*#__PURE__*/React.createElement(StudentCell, Object.assign({}, defaultProps, {
+      render(/*#__PURE__*/React.createElement(StudentCell, Object.assign({}, defaultProps, {
         student: studentWithoutLoginId,
         secondaryInfoDisplay: SecondaryInfoDisplay.LOGIN_ID
       })));
@@ -163,7 +123,7 @@ describe('StudentCell', function () {
       expect(secondaryInfo).toHaveTextContent('');
     });
     it('does not render secondary info when secondaryInfoDisplay is NONE', function () {
-      renderWithConfig(/*#__PURE__*/React.createElement(StudentCell, Object.assign({}, defaultProps, {
+      render(/*#__PURE__*/React.createElement(StudentCell, Object.assign({}, defaultProps, {
         secondaryInfoDisplay: SecondaryInfoDisplay.NONE
       })));
       expect(screen.queryByTestId('student-secondary-info')).not.toBeInTheDocument();
@@ -171,14 +131,14 @@ describe('StudentCell', function () {
   });
   describe('student status', function () {
     it('does not render status badge for active students', function () {
-      renderWithConfig(/*#__PURE__*/React.createElement(StudentCell, defaultProps));
+      render(/*#__PURE__*/React.createElement(StudentCell, defaultProps));
       expect(screen.queryByTestId('student-status')).not.toBeInTheDocument();
     });
     it('renders status badge for inactive students', function () {
       var inactiveStudent = _objectSpread(_objectSpread({}, mockStudent), {}, {
         status: 'inactive'
       });
-      renderWithConfig(/*#__PURE__*/React.createElement(StudentCell, Object.assign({}, defaultProps, {
+      render(/*#__PURE__*/React.createElement(StudentCell, Object.assign({}, defaultProps, {
         student: inactiveStudent
       })));
       var status = screen.getByTestId('student-status');
@@ -189,7 +149,7 @@ describe('StudentCell', function () {
       var concludedStudent = _objectSpread(_objectSpread({}, mockStudent), {}, {
         status: 'concluded'
       });
-      renderWithConfig(/*#__PURE__*/React.createElement(StudentCell, Object.assign({}, defaultProps, {
+      render(/*#__PURE__*/React.createElement(StudentCell, Object.assign({}, defaultProps, {
         student: concludedStudent
       })));
       var status = screen.getByTestId('student-status');
@@ -199,17 +159,17 @@ describe('StudentCell', function () {
   });
   describe('avatar', function () {
     it('sets avatar name from student name', function () {
-      renderWithConfig(/*#__PURE__*/React.createElement(StudentCell, defaultProps));
+      render(/*#__PURE__*/React.createElement(StudentCell, defaultProps));
       var avatar = screen.getByTestId('student-avatar');
       expect(avatar).toBeInTheDocument();
     });
     it('sets avatar src from student avatar_url', function () {
-      renderWithConfig(/*#__PURE__*/React.createElement(StudentCell, defaultProps));
+      render(/*#__PURE__*/React.createElement(StudentCell, defaultProps));
       var avatar = screen.getByTestId('student-avatar');
       expect(avatar).toBeInTheDocument();
     });
     it('uses sortable_name for avatar when nameDisplayFormat is LAST_FIRST', function () {
-      renderWithConfig(/*#__PURE__*/React.createElement(StudentCell, Object.assign({}, defaultProps, {
+      render(/*#__PURE__*/React.createElement(StudentCell, Object.assign({}, defaultProps, {
         nameDisplayFormat: NameDisplayFormat.LAST_FIRST
       })));
       var avatar = screen.getByTestId('student-avatar');

package/es/translated/es/components/Gradebook/gradebook-table/StudentCell/index.js

@@ -3,7 +3,6 @@ import { Avatar } from '@instructure/ui-avatar';
 import { Flex } from '@instructure/ui-flex';
 import { Text } from '@instructure/ui-text';
 import { SecondaryInfoDisplay, NameDisplayFormat } from "../../../../util/gradebook/constants.js";
-import { useGradebookConfig } from "../../context/GradebookConfigContext/index.js";
 var getSecondaryInfo = function getSecondaryInfo(student, secondaryInfoDisplay) {
   if (!secondaryInfoDisplay) return null;
   switch (secondaryInfoDisplay) {
@@ -18,16 +17,12 @@ var getSecondaryInfo = function getSecondaryInfo(student, secondaryInfoDisplay)
   }
 };
 export var StudentCell = function StudentCell(_ref) {
-  var courseId = _ref.courseId,
-    student = _ref.student,
-    masteryScores = _ref.masteryScores,
+  var student = _ref.student,
     secondaryInfoDisplay = _ref.secondaryInfoDisplay,
     _ref$showStudentAvata = _ref.showStudentAvatar,
     showStudentAvatar = _ref$showStudentAvata === void 0 ? true : _ref$showStudentAvata,
-    nameDisplayFormat = _ref.nameDisplayFormat;
-  var _useGradebookConfig = useGradebookConfig(),
-    components = _useGradebookConfig.components;
-  var StudentPopover = components.StudentPopover;
+    nameDisplayFormat = _ref.nameDisplayFormat,
+    studentPopover = _ref.studentPopover;
   var shouldShowStudentStatus = student.status === 'inactive' || student.status === 'concluded';
   var secondaryInfo = getSecondaryInfo(student, secondaryInfoDisplay);
   var studentName = nameDisplayFormat === NameDisplayFormat.LAST_FIRST ? student.sortable_name : student.display_name;
@@ -49,13 +44,7 @@ export var StudentCell = function StudentCell(_ref) {
   }, /*#__PURE__*/React.createElement(Flex, {
     direction: "column",
     textAlign: "start"
-  }, /*#__PURE__*/React.createElement(StudentPopover, {
-    key: student.id,
-    student: student,
-    studentName: studentName,
-    courseId: courseId,
-    masteryScores: masteryScores
-  }), secondaryInfo !== null && /*#__PURE__*/React.createElement(Text, {
+  }, studentPopover, secondaryInfo !== null && /*#__PURE__*/React.createElement(Text, {
     size: "legend",
     color: "secondary",
     "data-testid": "student-secondary-info"

package/es/translated/es/components/Gradebook/gradebook-table/StudentCell/index.stories.js

@@ -2,23 +2,25 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import React from 'react';
 import { View } from '@instructure/ui-view';
 import { SecondaryInfoDisplay, NameDisplayFormat } from "../../../../util/gradebook/constants.js";
-import { StoryWrapper } from "../../storybook/decorators.js";
-import { mockMasteryScores, mockStudent, mockStudentLongName } from "../../__mocks__/mockData.js";
+import { mockStudent, mockStudentLongName } from "../../__mocks__/mockData.js";
+import { createStudentPopover, StoryWrapper } from "../../storybook/decorators.js";
 import { StudentCell } from "../../../../index.js";
 var meta = {
   title: 'Gradebook/StudentCell',
   component: StudentCell,
   decorators: [function (Story) {
-    return /*#__PURE__*/React.createElement(View, {
+    return /*#__PURE__*/React.createElement(StoryWrapper, null, /*#__PURE__*/React.createElement(View, {
       as: "div",
       width: "300px",
       height: "48px",
       display: "block"
-    }, /*#__PURE__*/React.createElement(StoryWrapper, null, /*#__PURE__*/React.createElement(Story, null)));
+    }, /*#__PURE__*/React.createElement(Story, null)));
   }],
   args: {
-    courseId: '123',
-    masteryScores: mockMasteryScores
+    studentPopover: createStudentPopover({
+      studentName: mockStudent.display_name,
+      student: mockStudent
+    })
   }
 };
 export default meta;
@@ -49,7 +51,11 @@ export var LastFirstFormat = {
   args: {
     student: mockStudent,
     nameDisplayFormat: NameDisplayFormat.LAST_FIRST,
-    secondaryInfoDisplay: SecondaryInfoDisplay.SIS_ID
+    secondaryInfoDisplay: SecondaryInfoDisplay.SIS_ID,
+    studentPopover: createStudentPopover({
+      studentName: mockStudent.sortable_name,
+      student: mockStudent
+    })
   }
 };
 export var FirstLastFormat = {
@@ -62,14 +68,22 @@ export var FirstLastFormat = {
 export var LongName = {
   args: {
     student: mockStudentLongName,
-    secondaryInfoDisplay: SecondaryInfoDisplay.SIS_ID
+    secondaryInfoDisplay: SecondaryInfoDisplay.SIS_ID,
+    studentPopover: createStudentPopover({
+      studentName: mockStudentLongName.display_name,
+      student: mockStudentLongName
+    })
   }
 };
 export var LongNameLastFirst = {
   args: {
     student: mockStudentLongName,
     nameDisplayFormat: NameDisplayFormat.LAST_FIRST,
-    secondaryInfoDisplay: SecondaryInfoDisplay.SIS_ID
+    secondaryInfoDisplay: SecondaryInfoDisplay.SIS_ID,
+    studentPopover: createStudentPopover({
+      studentName: mockStudentLongName.sortable_name,
+      student: mockStudentLongName
+    })
   }
 };
 export var ShowStatus = {

package/es/translated/es/components/Gradebook/popovers/StudentPopover/__tests__/index.test.js

@@ -23,16 +23,7 @@ describe('StudentPopover', function () {
   var renderComponent = function renderComponent() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
     return render(/*#__PURE__*/React.createElement(GradebookConfigProvider, {
-      config: {
-        components: {
-          StudentPopover: function StudentPopover() {
-            return null;
-          },
-          SettingsTrayContent: function SettingsTrayContent() {
-            return null;
-          }
-        }
-      }
+      config: {}
     }, /*#__PURE__*/React.createElement(StudentPopover, _objectSpread(_objectSpread({}, defaultProps), props))));
   };
   describe('Rendering', function () {

package/es/translated/es/components/Gradebook/storybook/decorators.js

@@ -9,18 +9,23 @@ import { NameDisplayFormatSelector } from "../toolbar/SettingsTray/NameDisplaySe
 import { StudentPopover } from "../popovers/StudentPopover/index.js";
 import { NameDisplayFormat } from "../../../util/gradebook/constants.js";
 import { GradebookApp } from "../GradebookApp.js";
+import { GradebookAppProvider } from "../context/GradebookAppContext/index.js";
 import { createStudent, mockUserDetailsDefault } from "../__mocks__/mockData.js";
-var StudentPopoverWrapper = function StudentPopoverWrapper(props) {
-  return /*#__PURE__*/React.createElement(StudentPopover, Object.assign({}, props, {
-    student: props.student || createStudent('1', 'John', 'Doe'),
-    studentName: props.studentName || 'John Doe',
+export var createStudentPopover = function createStudentPopover(_ref) {
+  var studentName = _ref.studentName,
+    student = _ref.student,
+    masteryScores = _ref.masteryScores;
+  return /*#__PURE__*/React.createElement(StudentPopover, {
+    student: student || createStudent('1', 'John', 'Doe'),
+    studentName: studentName,
+    masteryScores: masteryScores,
     studentGradesUrl: "/test-url",
     userDetails: mockUserDetailsDefault
-  }));
+  });
 };
-var ExampleSettingsTrayContent = function ExampleSettingsTrayContent(_ref) {
-  var settings = _ref.settings,
-    _onChange = _ref.onChange;
+export var ExampleSettingsTrayContent = function ExampleSettingsTrayContent(_ref2) {
+  var settings = _ref2.settings,
+    _onChange = _ref2.onChange;
   return /*#__PURE__*/React.createElement(Flex, {
     direction: "column",
     gap: "large"
@@ -43,19 +48,14 @@ var ExampleSettingsTrayContent = function ExampleSettingsTrayContent(_ref) {
     }
   }));
 };
-export var StoryWrapper = function StoryWrapper(_ref2) {
-  var children = _ref2.children,
-    masteryLevelConfig = _ref2.masteryLevelConfig,
-    components = _ref2.components;
-  var defaultComponents = {
-    StudentPopover: StudentPopoverWrapper,
-    SettingsTrayContent: ExampleSettingsTrayContent
-  };
+export var StoryWrapper = function StoryWrapper(_ref3) {
+  var children = _ref3.children,
+    masteryLevelConfig = _ref3.masteryLevelConfig;
   return /*#__PURE__*/React.createElement(GradebookApp, {
     config: {
-      components: _objectSpread(_objectSpread({}, defaultComponents), components),
       masteryLevelConfig: masteryLevelConfig
-    },
+    }
+  }, /*#__PURE__*/React.createElement(GradebookAppProvider, {
     settings: {
       settings: {
         showStudentNames: true,
@@ -85,5 +85,5 @@ export var StoryWrapper = function StoryWrapper(_ref2) {
         return onSave;
       }()
     }
-  }, children);
+  }, children));
 };

package/es/translated/es/components/Gradebook/toolbar/SettingsTray/__tests__/index.test.js

@@ -6,7 +6,6 @@ import { expect, jest } from '@jest/globals';
 import '@testing-library/jest-dom';
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import { SettingsTray } from "../index.js";
-import { GradebookConfigProvider } from "../../../context/GradebookConfigContext/index.js";
 import { GradebookAppProvider } from "../../../context/GradebookAppContext/index.js";
 import * as FlashAlert from "../../../../FlashAlert/index.js";
 jest.mock("../../../../FlashAlert");
@@ -46,34 +45,20 @@ describe('SettingsTray', function () {
       }
     })));
   };
-  var createConfig = function createConfig() {
-    var overrides = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-    return {
-      components: _objectSpread({
-        StudentPopover: function StudentPopover() {
-          return null;
-        },
-        SettingsTrayContent: MockSettingsTrayContent
-      }, overrides)
-    };
-  };
   var renderWithProviders = function renderWithProviders() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-    var configOverrides = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
-    var settingsOverrides = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};
-    var config = createConfig(configOverrides);
+    var settingsOverrides = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
     var settingsConfig = _objectSpread({
       settings: defaultSettings,
       onSave: defaultMockOnSave
     }, settingsOverrides);
-    return render(/*#__PURE__*/React.createElement(GradebookConfigProvider, {
-      config: config
-    }, /*#__PURE__*/React.createElement(GradebookAppProvider, {
+    return render(/*#__PURE__*/React.createElement(GradebookAppProvider, {
       settings: settingsConfig
     }, /*#__PURE__*/React.createElement(SettingsTray, Object.assign({
       open: false,
-      onDismiss: jest.fn()
-    }, props)))));
+      onDismiss: jest.fn(),
+      SettingsTrayContent: MockSettingsTrayContent
+    }, props))));
   };
   beforeEach(function () {
     jest.clearAllMocks();
@@ -105,15 +90,14 @@ describe('SettingsTray', function () {
       expect(screen.getByText('Cancel')).toBeInTheDocument();
       expect(screen.getByText('Save')).toBeInTheDocument();
     });
-    it('renders SettingsTrayContent from config', function () {
+    it('renders SettingsTrayContent from prop', function () {
       var CustomSettingsTrayContent = function CustomSettingsTrayContent() {
         return /*#__PURE__*/React.createElement("div", {
           "data-testid": "custom-content"
         }, "Custom");
       };
       renderWithProviders({
-        open: true
-      }, {
+        open: true,
         SettingsTrayContent: CustomSettingsTrayContent
       });
       expect(screen.getByTestId('custom-content')).toBeInTheDocument();
@@ -125,19 +109,17 @@ describe('SettingsTray', function () {
           open: false
         }),
         rerender = _renderWithProviders.rerender;
-      var config = createConfig();
       var settingsConfig = {
         settings: defaultSettings,
         onSave: defaultMockOnSave
       };
-      rerender(/*#__PURE__*/React.createElement(GradebookConfigProvider, {
-        config: config
-      }, /*#__PURE__*/React.createElement(GradebookAppProvider, {
+      rerender(/*#__PURE__*/React.createElement(GradebookAppProvider, {
         settings: settingsConfig
       }, /*#__PURE__*/React.createElement(SettingsTray, {
         open: true,
-        onDismiss: jest.fn()
-      }))));
+        onDismiss: jest.fn(),
+        SettingsTrayContent: MockSettingsTrayContent
+      })));
       expect(screen.getByLabelText('Option 1')).toBeChecked();
       expect(screen.getByLabelText('Option 2')).toHaveValue('test');
     });
@@ -177,27 +159,24 @@ describe('SettingsTray', function () {
       expect(input).toHaveValue('changed');
 
       // Close and reopen
-      var config = createConfig();
       var settingsConfig = {
         settings: defaultSettings,
         onSave: defaultMockOnSave
       };
-      rerender(/*#__PURE__*/React.createElement(GradebookConfigProvider, {
-        config: config
-      }, /*#__PURE__*/React.createElement(GradebookAppProvider, {
+      rerender(/*#__PURE__*/React.createElement(GradebookAppProvider, {
         settings: settingsConfig
       }, /*#__PURE__*/React.createElement(SettingsTray, {
         open: false,
-        onDismiss: jest.fn()
-      }))));
-      rerender(/*#__PURE__*/React.createElement(GradebookConfigProvider, {
-        config: config
-      }, /*#__PURE__*/React.createElement(GradebookAppProvider, {
+        onDismiss: jest.fn(),
+        SettingsTrayContent: MockSettingsTrayContent
+      })));
+      rerender(/*#__PURE__*/React.createElement(GradebookAppProvider, {
         settings: settingsConfig
       }, /*#__PURE__*/React.createElement(SettingsTray, {
         open: true,
-        onDismiss: jest.fn()
-      }))));
+        onDismiss: jest.fn(),
+        SettingsTrayContent: MockSettingsTrayContent
+      })));
 
       // Should be reset to original value
       expect(screen.getByLabelText('Option 2')).toHaveValue('test');
@@ -247,7 +226,7 @@ describe('SettingsTray', function () {
             renderWithProviders({
               open: true,
               onDismiss: onDismiss
-            }, {}, {
+            }, {
               onSave: onSave
             });
 
@@ -291,7 +270,7 @@ describe('SettingsTray', function () {
             renderWithProviders({
               open: true,
               onDismiss: onDismiss
-            }, {}, {
+            }, {
               onSave: onSave
             });
 
@@ -336,7 +315,7 @@ describe('SettingsTray', function () {
             renderWithProviders({
               open: true,
               onDismiss: onDismiss
-            }, {}, {
+            }, {
               onSave: onSave
             });
 
@@ -366,7 +345,7 @@ describe('SettingsTray', function () {
             renderWithProviders({
               open: true,
               onDismiss: onDismiss
-            }, {}, {
+            }, {
               onSave: onSave
             });
 
@@ -403,7 +382,7 @@ describe('SettingsTray', function () {
             });
             renderWithProviders({
               open: true
-            }, {}, {
+            }, {
               onSave: onSave
             });
             saveButton = screen.getByTestId('lmgb-save-settings-button');
@@ -440,7 +419,7 @@ describe('SettingsTray', function () {
             renderWithProviders({
               open: true,
               onDismiss: onDismiss
-            }, {}, {
+            }, {
               onSave: onSave
             });
 
@@ -462,8 +441,7 @@ describe('SettingsTray', function () {
         return /*#__PURE__*/React.createElement("div", null, "Content");
       });
       renderWithProviders({
-        open: true
-      }, {
+        open: true,
         SettingsTrayContent: SettingsTrayContent
       });
       expect(SettingsTrayContent).toHaveBeenCalledWith(expect.objectContaining({

package/es/translated/es/components/Gradebook/toolbar/SettingsTray/index.js

@@ -8,7 +8,6 @@ import { Flex } from '@instructure/ui-flex';
 import { Text } from '@instructure/ui-text';
 import { Tray } from '@instructure/ui-tray';
 import { colors } from '@instructure/canvas-theme';
-import { useGradebookConfig } from "../../context/GradebookConfigContext/index.js";
 import { useGradebookApp } from "../../context/GradebookAppContext/index.js";
 import { showFlashAlert } from "../../../FlashAlert/index.js";
 /**
@@ -22,15 +21,13 @@ import { showFlashAlert } from "../../../FlashAlert/index.js";
  */
 export var SettingsTray = function SettingsTray(_ref) {
   var open = _ref.open,
-    onDismiss = _ref.onDismiss;
-  var _useGradebookConfig = useGradebookConfig(),
-    components = _useGradebookConfig.components;
+    onDismiss = _ref.onDismiss,
+    SettingsTrayContent = _ref.SettingsTrayContent;
   var _useGradebookApp = useGradebookApp(),
     _useGradebookApp$sett = _useGradebookApp.settings,
     contextSettings = _useGradebookApp$sett.settings,
     setSettings = _useGradebookApp$sett.setSettings,
     onSave = _useGradebookApp$sett.onSave;
-  var SettingsTrayContent = components.SettingsTrayContent;
   var _useState = useState(contextSettings),
     _useState2 = _slicedToArray(_useState, 2),
     localSettings = _useState2[0],

package/es/translated/es/components/Gradebook/toolbar/SettingsTray/index.stories.js

@@ -3,7 +3,7 @@ import React, { useState } from 'react';
 import { SettingsTray } from "./index.js";
 import { Button } from '@instructure/ui-buttons';
 import { View } from '@instructure/ui-view';
-import { StoryWrapper } from "../../storybook/decorators.js";
+import { StoryWrapper, ExampleSettingsTrayContent } from "../../storybook/decorators.js";
 var meta = {
   title: 'Gradebook/SettingsTray',
   component: SettingsTray,
@@ -26,7 +26,8 @@ export var Default = {
       open: open,
       onDismiss: function onDismiss() {
         return setOpen(false);
-      }
+      },
+      SettingsTrayContent: ExampleSettingsTrayContent
     }));
   }
 };
@@ -34,7 +35,8 @@ export var Open = {
   render: function render() {
     return /*#__PURE__*/React.createElement(SettingsTray, {
       open: true,
-      onDismiss: function onDismiss() {}
+      onDismiss: function onDismiss() {},
+      SettingsTrayContent: ExampleSettingsTrayContent
     });
   }
 };