* feat: pagination studio home for courses
* chore: addressing some comments
* refactor: addressing pr comments
* test: adding test for studio home slice
* feat: search input and filters for course home
* fix: using open edx paragon
* feat: usedebounce hook for searching courses
* fix: filters params for searching coruses
* feat: adding coursekey when course name is empty
* chore: remove edit in studio button
* fix: message changed when courses were not found
* refactor: support courses tab filters and pagination
* test: more cases for course filters component
* refactor: coverage for onsubmit search field
* test: unit test for courses tab component
* feat: loading for search input and layout of course tab
* fix: linter problems
* test: adding more tests for courses tab
* refactor: don't ignore empty string as a case for searching
* refactor: manage empty search bar as special case for searching
* fix: remove expected dispatch mock for clear button
---------
Co-authored-by: Maria Grimaldi <maria.grimaldi@edunext.co>
Also includes:
- feat: set <title> on taxonomy list page and taxonomy detail page
- fix: display all taxonomies on the list page, even if > 10
- refactor: separate out loading spinner component
* test: adding @testing-library/user-event
We use this library to simulate user clicks on interactive elements.
* test: adding some test environment mocks
Paragon components tend to use some advanced browser features that aren’t available in node.js/jest’s environment. This safely mocks those features so that testing can proceed.
* test: Make our API responses reusable
Our future tests for DiscussionsSettings will want to use these API responses, so pull them out into a “factories” directory so multiple tests can re-use them.
The directory is called “factories” because ideally we’d use a test data factory to generate this data if we need a number of varieties of it. Right now we just need these two, so generating factories for it isn’t really worthwhile. But we might as well put it in the right place.
* refactor: use new CheckboxControl for AppCards
This replaces our usage of Input for checkboxes with a new CheckboxControl which is made specifically for this sort of use case.
It also adds an aria-label that describes what the checkbox does: “Select <appName>”
* feat: adds aria-label to Next button
The button lacked a label - this also lets us use queryByLabelText in our tests.
* test: favoring getByRole over getByTestId
The testing-library documentation talks about how it’s preferable to write tests that act like screen readers and inspect the DOM in ways that a user would. Adding “test IDs” is a last resort when no better option is available. The spinner actually has a “status” role on it, so we can use that instead here.
* feat: adding a spinner to the AppConfigForm
Improves the UX here by giving the user some feedback, and also makes it consistent with how AppList works.
* fix: set the selected app in redux so it’s official
Prior to this, we derived a selected app from the activeAppId if one wasn’t actively selected, but we never sent that decision back to redux. This closes the loop.
* fix: add the message for selecting an app
Forgot to include this in a prior commit. Oops.
* refactor: use Paragon Stepper and FullscreenModal
Also deletes our app-specific implementations of Stepper and FullScreenModal.
Note that the routes were pulled up into PagesAndResources. This is so that we can access the appId param in DiscussionsSettings, and is an artifact of how react-router works. You can’t access sub-route params in the same component that defines sub-routes.
Related to this, we now decide which step we’re on by examining the appId parameter, rather than having a route per step. Conceptually it’s the same and each step has its own route, but now DiscussionsSettings just has multiple routes and doesn’t define subroutes.
* test: Adding tests proving that DiscussionsSettings works
This exercises the modal and stepper, proving that they interact with routes properly. It also exercises the navigation buttons.
* doc: documenting selectedAppId and activeAppId
* fix: removing unnecessary aria-label attributes
aria-label is only necessary on buttons if the button text doesn’t sufficiently label the button, i.e., in the case that the button text is an “X” instead of the word “Close”. This removes unnecessary button aria-labe attributes and updates the tests not to use them.
* test: adding more DiscussionsSettings tests
- form submission
- loading the ‘legacy’ form
* test: improving coverage for “full support” apps
* fix: PageCard should use the pages and resources path from context
This prevents some odd behaviors around changing the URL based on the current path.
* fix: use the correct formRef for AppConfigForm children
Straight up refactoring bug. This should be using the formRef from the context, but was still defining its own and passing it down. This ultimately meant that the submit button wasn’t properly hooked up to the form, since the form was given a different ref than the submit button.
* fix: Only validate fields that have been touched
* fix: use the title instead of app.name
app.name doesn’t exist - but the title is the string we’re looking for. Use it.
* refactor: default appConfig appropriately for both config forms
In subsequent PRs we’re going to start passing null appConfigs to forms sometimes - this uses prop types to set default values for the forms if the component isn’t passed a meaningful appConfig.
* refactor: replace and flesh out discussions data layer
Since we only have one GET endpoint for all the data around discussions, we don’t need two separate slices/thunks/api files. The API needs to be hit once when the discussions settings load. This means the app-list and app-config-form share far more state than originally thought.
The AppList and AppConfigForm are no longer responsible for data loading - we’ve moved that back up into DiscussionsSettings. Now they just read from the redux state and load what they need.
The main change is moving app-list/data/slice.js up to discussions/data/slice.js, renaming the reducer, and adding a saveStatus to it - turns out this is all we need. The original two slices go away.
The discussions/data/api file gets a proper implementation of postAppConfig which mostly works with the server as of this writing - we have some data shape issues to figure out.
AppConfigForm needed a little help. It now checks whether our data is loaded and selects an app based on its route. This allows us to deep link in and keep the selectedAppId correct.
* Adding a loading spinner to AppList
This is only tangentally related to the current PR, admittedly.
* test: adding some title tests to LegacyConfigForm.test.jsx
Needed to add the title prop, then decided I’d test it.
* test: adding a test suite for discussions/data files
This test exercises the thunks, slice, and api parts of the data layer all at once in ‘real’ scenarios with mocked API requests.
