* Fixes an issue where Form Switch was unexpectedly getting wrong width from its parent.
* style: add discussion topics UI
* feat: Add section for general discussion topic in legacy form
* style: improve style according to Figma and add name uniqueness validation
1- Improve styling for General discussion topics section
2- Add discussion topic name uniqueness validation using yup test
3- Add internationalisation for discussion topic section
* test: Update LegacyForm test cases
Update LegacyForm test cases according to new requirements. Add mock store in test cases as we are using redux in DiscussionTopic and manipulating the redux store.
* refactor: update variables name and add async type in thunk function
Co-authored-by: Awais Ansari <awais.ansari63@gmail.com>
* feat: added new messages for new discussion providers
* fix: changed styles and minor test update
* refactor: refactored feature id names
* fix: Update messages.js
The application was expecting a different API shape than the server was sending. I have _no_ idea how this made it through, as it’s blatantly broken. I don’t see any changes in this code in the past few weeks.
Anyway, the client was expecting a “features” array inside an app (provider), which simply didn’t exist. The app itself is the array. This PR udpates the shape in `normalizeApps` and also the associated test, which was also equally as wrong. Somehow.
* refactor: reusable connection error and permission denied alerts
This commit pulls the connection error and permission denied alerts out of ProctoredExamSettings and also makes them Open edX friendly by removing references to “edX” and using the SUPPORT_URL environment variable to supply the support link.
This is in preparation for using these alerts in the Discussions UI.
* refactor: saveAppConfig now responsible for redirect
I’ve moved the redirect to the pages and resources path into the thunk for saveAppConfig. This is because we only want to do it if the thunk is successful, and it’s easier to do it here than to have `then` and `catch` handlers in the component. In particular, this is because we can’t stop the `then` from happening unless we throw an error from the thunk, but the component has nothing to do on a thrown error. This avoids the awkward code in the component and just handles it all here.
* feat: handle access denied by setting DENIED statuses
This takes us one step closer to user messaging for permission denied errors by setting an explicit DENIED status and saveStatus when a request was denied because the user didn’t have permissions. Note that this is different than a 401, which is unauthorized, meaning the user is logged out. This doesn’t handle 401s.
Following this, we can then use the DENIED status to give the user feedback on what’s going on.
* feat: adding error alerts
This commit adds friendly error alerts for connection and permission denied errors in the discussions app.
If the initial fetch apps request errors out or is denied, then the entire contents of the modal is replaced with an error message.
If the save app config request errors out, then a message is displayed at the top of the form.
If the sae app config request is denied, the entire contents of the modal is replaced with a permission denied error message, as in the first case.
* fix: internationalize some strings that got left behind
- General
- Questions for the TAs
* fix: making the questions for TAs field consistent with the general topic one
* fix: improving i18n descriptions as per review feedback
* 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
