This change makes the following updates to the UX of the taxonomy pages:
* On the taxonomies list, display the full name of taxonomies in a tooltip if it's longer than what's displayed
* On the taxonomy detail page, please change the title of the "Value" column to "Tag name"
* On taxonomy detail page, remove the "child tags" column and put it in parentheses instead
* Update tags count color
* Several minor issues brought up here: https://github.com/openedx/modular-learning/issues/105#issuecomment-1829412705.
* Fix issue with scroll position not being reset on navigation
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
* style: confirmation modal added for in-context discussion toggle
* refactor: removed duplicate message id
* refactor: function moved to on line direct call
* style: on disabled cohorts toggle remains disabled and link to instructor dashboard shows
* fix: test cases fixed
Co-authored-by: Mehak Nasir <mehaknasir94@gmail.com>
* fix: improve styling and behaviour to match mockups
This fixes the following issues:
TNL-8737: Description field should be larger
TNL-8738: Increase right and left padding in expanded card
TNL-8739: Expand/Collapse icon should have fixed position
TNL-8741: Remove field helper text on field error state
TNL-8742: Use consistent spacing between field and helper text
TNL-8743: Too much spacing above Save button
TNL-8744: remove field error states when re-focusing on field
TNL-8762: Copy changes to team configuration
TNL-8763: Radio button rendering issues
TNL-8764: Use lowercase "M" for "Public managed" and "Private managed" labels
TNL-8766: Match style of labels in collapsed card
* fix: calculator switch click issue and save button animation will be clickable without any changes
* style: remove inline style and fix content display glitch
* style: TNL-8566 add padding top for external link
* style: TNL-8574 fix badge width and height
* fix: resolve console error and remove fix height for modal dialog
* fix: TNL-8457 Show field error state on blank discussion provider fields
* fix: TNL-8474 Remove Resources section
* fix: TNL-8473 change pages and resources background color to light-200
* fix: TNL-8476 app card descriptions should be bottom aligned
* fix: TNL-8472 remove Disabled badge from tiles
* fix: TNL-8487 use stateful button for configuration modal
Hooks up the course apps API so that the data returned by the server is being used.
Adds the base components and infrastructure to enable adding pages for configuring
each app.
* 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.
* 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.
* chore: adding jest-dom package and configuring it
Also bumping version of paragon - it’s in this commit because the changes in package-lock.json can’t really be separated from each other.
* fix: improve mocked data in the API layer
Make the mocked data for the app configs closer to reality, using correct shape and better IDs.
* fix: improve layout of FormSwitchGroup and make compatible wit latest paragon
Form.Group needs a controlId, and this layout gives a nice gutter between the text side on the left and the switch itself on the right.
* fix: active vs. displayed apps and app configs
We have a problem in that the app config and app that are _displayed_ in the frontend are not necessarily the same as app and app config that’s _active_ for the course. I.e., maybe I’m configuring a new one, but a different integration’s already set up.
This commit changes our data model a bit to differentiate between the two - this will let us display information about what’s currently active at the same time as configuring a different integration.
This commit also tweaks a Container size to make the form a bit wider. Pretty.
* refactor: split LegacyConfigForm parts out into their own components
This is in preparation for needing to share legacy config form fields with the ‘standard’ config form for the new discussions MFE. In particular, we also need to pull the InContextDiscussionFields out of the legacy form - that component exists but isn’t technically used in this commit. It will be included in the ‘standard’ form soon.
* feat: Implement edX forums advanced setting editor
This change implements the UX for the advanced settings editor for the internal edX forums.
* Stepper now intelligently shows/hides drop shadows on the header and footer
Also organized the component into a more Paragon-like organization with the sub-components hanging off the main one.
* Organizing full screen modal in a more Paragon-like way.
Also fixing a few minor styling issues.
* Massaging SettingsEditor into LegacyConfigForm
- Reorganizing into apps/legacy directory from settings/base-forum
- Using Formik and Yup for managing form data
- Refactoring FormSwitchGroup a little and adding data-related properties
- Also moving FormSwitchGroup into ‘generic’
- Some initial attempts at error validation in LegacyConfigForm (a blackout dates regex which doesn’t seem to work yet)
- Sub-sections of config now fold and animate when their parent is toggled.
* Minor naming and refactoring of Discussions component
- Event handlers should be named handle*, not on*. Oops. Got over-zealous.
- Organizing paths into some variables at the top of the component. The pages and resources path should probably be passed in.
* Hooking up and organizing LTI and Legacy forms
- The LTI form moves into app/lti
- Adds in rendering of the legacy discussions form.
- Splits up the messages file a bit (app/lti/messages.js exists now)
- Removing unnecessary h1 in the LtiConfigForm.
* Removing ‘info’ blue coloring from the pages & resources view.
Co-authored-by: Kshitij Sobti <kshitij@sobti.in>
* Bumping paragon version to latest.
* Modifying event handlers to be named with “on” prefix instead of “Handler” suffix
* Tweaking a message id.
* Removing “Discussion” prefix from discussions components.
Seems unnecessary.
* Backing pages & resources view with data handling.
It still has the list of pages hard coded.
* Adding FullScreenModal and Stepper components.
These components are pretty close to their final form. They could benefit from some snapshot tests and such; there isn’t much actual functionality in ‘em.
Stepper will get a bit more functionality when we add the dynamic drop shadow behavior. Depending on whether the stepper body is at the top or bottom, drop shadows on the header and footer should appear or disappear to indicate more content exists above or below the viewport.
* Moving discussions routes inside PagesAndResources
Note that the discussions component has been renamed - that’ll be coming in a subsequent commit.
Also trying to get consistent about calling it “discussions”
* AppList gets less responsibility
The AppList is now a child of the top-level “Discussions” component, so it’s no longer responsible for loading the app list or storing the state for the selected app ID. It’s also given a handler for when an app is selected, and no longer has a button to configure the app.
* Fleshing out Discussions component
The top-level Discussions component (renamed from DiscussionsRoutes) is now responsible for a lot.
- it loads the app list
- it keeps track of selected app ID
- it has handlers for all the various user actions so they can be coordinated here at the top.
- it uses component composition to create the majority of the UI, folding together FullScreenModal and Stepper with its route-based views.
* Decomposing the app config form
The discussion app config form has been decomposed into a container responsible for loading app data, and a component specifically for the LTI configuration form.
In the future, ConfigFormContainer will get a second possible child for the edX Forums app, and will switch between the two forms based on the app being configured.
Note that I expect that some of the data loading logic from ConfigFormContainer may be better situated in the Discussions component… everything else is happening there, and it may make sense for it to handle loading the app config data as necessary as well.
* Updating dependencies and removing unneeded ones.
* Fixing broken IntlProvider attribute in ProctoredExamSettings test.
* package-lock.json was out of sync - checking it in.
* Initializing an empty redux store.
* Adding model-store from frontend-app-learning.
This will let us save data from the server in a normalized way in redux, reducing boilerplate in React components.
* Fixing paragon button usage.
(also just organizing the imports while I was there…)
* Using paragon button instead of an anchor tag.
For the “New Page” button in the pages & resources view.
* Add API, reducers, and thunks to add course detail data into redux.
Subsequent PR will use this to store course detail data for use across different pages in the application.
* Prep work to add CourseAuthoringPage component.
Decided the course-detail sub-directory didn’t make much sense, given component structure, and moved it up to src.
These functions will be used in a CourseAuthoringPage component to load course detail data and display the Header and Footer in one common place, wrapping all the existing course authoring pages (proctoring and pages & resources)
It will also replace LmsApiService.js
* Minor style refactorings.
(This commit had originally made some changes to how courseId was passed in to these two components, but I decided to back it out… but the style stuff is worth adding as a fixed nit.)
* Refactor course detail loading and top-level course authoring components
This commit does a few things:
- Factors course detail data loading out of the Header.
- Loads that data in CourseAuthoringPage instead, adding it to redux and then passing it to the Header from there.
- Deletes LmsApiService, which is no longer used.
- Changes the route paths to be more canonical and entity-oriented, i.e., the first part of the route is the course, followed by the specific page about that course to load, rather than the other way around. This more naturally allows us to use react-router to extract the common course detail loading code that only depends on the courseId.
* Refactoring routes code a bit to pass courseId into components
Didn’t like how CourseAuthoringPage, LegacyProctoringRoute, and CourseAuthoringRoutes all reached into the parent route to find the courseId, so passed it in instead.
* Updating README with more detail on routes in the MFE.
