Implementation of openedx/modular-learning#201
Implements a modal for searching course content with filters for searching in current or all courses, filtering by content type, content tags and text.
* refactor: Unit sidebar to create the TagsSidebar
* feat: Structure of TagsSidebar and TagsTree
* feat: Adding styles to the TagsTree
* feat: TagsSidebarHeader created
* feat: Add count on TagsSidebarHeader
* test: Tests for new components added
* style: Update tags count with opacity when the count is zero
* refactor: Extract tag count component as generic
* refactor: Transform Sidebar to a wrapper component
---------
Co-authored-by: Rômulo Penido <romulo@opencraft.com>
* feat: Use react-select for tags selector
Replace existing component with react-select component, by passing in
our custom component.
This retained the existing search functionality.
* fix: Fix missing deps causing constant rerender
This bug appeared after removing the react-query call to the backend
when selecting/unselecting a tag in the dropdown. Since it no longer
gets the updated state from the backend, it doesnt mask the bug.
The bug is essentially the `ContentTagsCollapsibleHelper` rerendering
causing the states to reset overriding the selected (not commited) tags.
This is due to missing dependancies in the useCallback.
* feat: Add stagedContentTags state in react-select
This adds a state and callbacks in the toplevel component of the content
tags drawer to be able to add/remove staged content tags and have them
showup in the react-select as selected chips.
* feat: Split up applied & staged content tags trees
Now content tags have seperate tree states for applied ones and staged
ones. They are updated seperately and both are used when updating the
selectable box UI. This allows for more flexibility with actions that
can be performed on the staged content tags with impacting the applied
ones.
* feat: Change style of implicit checkbox to checks
This overrides the indeterminate input checkbox style to match the
checked checkbox style, using variables defined in paragon.
* feat: Add bottom buttons in tags dropdown selector
* refactor: Remove cloneDeep + simplify code
* feat: Update placeholder/button texts
* feat: Implement cancel button + add proptypes
* feat: Implement commit/cancel staged tags
This implements the commit functionality for staged tags, taking account
for implicit tags. This also handles the case for removing applied tags
by clicking on the "x" in the TagBubble.
* feat: Keep all staged tags only commit explicit
* feat: Change style of add/cancel/load more buttons
* feat: Add inline "Add" button to commit tags
In the react-select component, an inline "Add" button showsup when some
tags are staged, if they are clicked they are commited/applied.
* fix: Keep applied tag checked when only staged child unchecked
* feat: Style add tags widget + staged tags
Also clear search term whenever tags are staged/cancelled
* feat: Fixed some typing errors
* test: Update tests to fix existing broken cases
* test: Add new functionality tests
* chore: add types to ContentTagsCollapsible
* chore: add types for useContentTagsCollapsibleHelper
* fix: Small bug with useIntl
* chore: Fix more linter issues
* refactor: Separate stagedTags and stagedTagsTree state updates
This refactor removed the warning that was caused because the state of a
parent component (ContentTagsDrawer) was being updated in the middle of
a state update in (ContentTagsCollapsible). This seperated the two state
updates to avoid this issue.
* chore: Update package-lock.json
* fix: Reset applied tags in selectbox when fetching
Whenever we get new applied tags from the backend, we reset the applied
tags that are checked, and only check the explicit tags. This was
causing an issue of duplicate applied tags being added to the selectbox.
* chore: Update package.json
---------
Co-authored-by: Braden MacDonald <braden@opencraft.com>
* feat: Make "Pages & Resources" course apps into plugins
* feat: move ora_settings
* feat: move proctoring
* feat: move progress
* feat: move teams
* feat: move wiki
* feat: move Xpert settings
* fix: add webpack.prod.config.js
* fix: clean up unused parts of package.json files
* feat: Add an error message when displaying a Course App Plugin fails
* chore: fix various eslint warnings
* chore: fix jest tests
* fix: error preventing "npm ci" from working
* feat: better tests for <SettingsComponent>
* chore: move xpert_unit_summary into same dir as other plugins
* fix: eslint-import-resolver-webpack is a dev dependency
* chore: move learning_assistant to be a plugin too
* feat: for compatibility, install 2U plugins by default
* fix: bug with learning_assistant package.json
* Revert "Fix tinymce editor problems (#743)"
This reverts commit e6ce05571f.
* chore: update flcc to working version
* chore: update flcc to version that disables plugins
Internal issue: https://2u-internal.atlassian.net/servicedesk/customer/portal/9/CR-6328?created=true
Reverted 6 merged PRs due to problems.
scroll was not working on editors
potential problems with editor content loading
------------------------------------------------------
* Revert "fix(deps): update dependency @edx/frontend-lib-content-components to v1.177.4 (#742)"
This reverts commit cc40e9d6cb.
* Revert "feat: add escalation email field for LTI-based proctoring providers (#736)"
This reverts commit 0f483dc4e1.
* Revert "fix: video downloads (#728)"
This reverts commit c5abd21569.
* Revert "fix: import api to chunk file (#734)"
This reverts commit 6f7a992847.
* Revert "feat: Taxonomy delete dialog (#684)"
This reverts commit 1eff489158.
* Revert "fix(deps): update dependency @edx/frontend-lib-content-components to v1.177.1 (#727)"
This reverts commit dcabb77218.
This adds:
New submenu 'Delete' on the Taxonomy card menu
Delete Dialog with the functionality to delete a Taxonomy
Show a Toast after delete the Taxonomy
Enable export for System defined Taxonomies
This implements a side drawer widget for content taxonomy tags.
It includes displaying the object's tags, along with their
lineage (ancestor tags) data. It also implements the listing the
available taxonomy tags (including nesting ones) to select from
to apply to this unit.
Note: The editing of tags (adding/removing) will be added in a future
PR.
* feat: Add initial UnitTaxonomyTagsDrawer widget
* feat: Add fetching unit taxonomy tags from backend
* feat: Add fetching/group tags with taxonomies
* feat: Add fetch Unit data and display name
* feat: Add Taxonomy Tags dropdown selector
* feat: Add TagBubble for tag styling
* chore: Add distinct keys to elements + remove logs
* feat: Add close drawer with ESC- keypress
* feat: Make dropdown selectors keyboard accessible
* chore: Fix issues causing validation to fail
* test: Add coverage tests for UnitTaxonomyDrawer
* feat: Incorporate tags lineage data from API
* refactor: Remove/replace deprecated injectIntl
* test: Remove redux store related code + fix warnings
* feat: Use <Loading /> instead of loading string
* docs: Add docs string to TaxonomyTagsCollapsible
* feat: Use <Spinner/> to allow mutiple loading to show
* feat: Rename UnitTaxonomyTagDrawer -> ContentTagsDrawer
* feat: Add ContentTagsTree component to render Tags
* feat: Only fetch tags when dropdowns are opened
* refactor: Simply dropdown close/open states
* feat: Use built in class styles instead of custom
* feat: Replace hardcoded values with scss variables
* refactor: follow existing structure for reactQuery/APIs
* feat: Change tag bubble outline color
* feat: Add TagOutlineIcon for implicit tags
* feat: Make aria label internationalized
* feat: Replace custom styles with builtin classes
* fix: Fix bug with closing drawer
* refactor: Simplify content tags fetching code
* refactor: Simplify getTaxonomyListApiUrl
* feat: System-defined tooltip added
* feat: Taxonomy card menu added. Export menu item added
* feat: Modal for export taxonomy
* feat: Connect with export API
* test: Tests for API and selectors
* feat: Use windows.location.href to call the export endpoint
* test: ExportModal.test added
* style: Delete unnecessary code
* docs: README updated with taxonomy feature
* style: TaxonomyCard updated to a better code style
* style: injectIntl replaced by useIntl on taxonomy pages and components
* refactor: Move and rename taxonomy UI components to match 0002 ADR
* refactor: Move api to data to match with 0002 ADR
* test: Refactor ExportModal tests
* chore: Fix validations
* chore: Lint
* refactor: Moving hooks to apiHooks
* style: Nit on return null
---------
Co-authored-by: Rômulo Penido <romulo@dash.dev.br>
Co-authored-by: Christofer Chavez <christofer@example.com>
Internal issue: https://2u-internal.atlassian.net/browse/TNL-11085
File upload gallery cards had distorted thumbnails. The goal is to fix this.
I centered the thumbnails instead of stretching them. I had to change the card layout a bit to do that, so in order to make everything look fine, I worked a bit on margins and paddings and font-size in order to bring this close to the figma mockups. It's not perfect because when you resize the browser window, the grid does some resizing that doesn't look as good as in figma, but I think it should be good enough for now.
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.
* fix: removing unnecessary CSS classes and files
The .discussion-app-card and .features-table classes aren’t actually used - that means the AppList.scss file and pages-and-resources/index.scss above it can both be deleted.
* refactor: moving AppList components into app-list sub-directory.
* refactor: moving ConfigFormContainer and children into app-config-form sub-directory
* refactor: Renaming ConfigFormContainer to AppConfigForm
Makes it consistent with app-list/AppList.
* refactor: providing discussions path to sub-components via a context
This will be used in subsequent commits as we move functionality out of DiscussionsSettings.
* fix: change step two label to “Settings”
The mockups changed the label, which is great, since we’re aiming to remove the need for selectedAppId to be in DiscussionsSettings. This is one step toward that.
This has the side effect of making app.name no longer necessary, which is great, since the app no longer contains its own name string.
* refactor: adding replacement data layer for app-list and app-config-form
This code is a replacement for the slice, thunks, and api in /discussions/data. It’s an “expand” commit that adds the new implementation. The next commit will use it, and the last will remove the old implementation.
Those files in /discussions/data contained API functions, thunks, and reducer state for two separate components (app-list and app-config-form) that don’t actually share any code. Turns out they’re perfectly separable, and more understandable apart.
This new code isn’t used yet.
* refactor: add a context to provide a formRef to AppConfigForm components
This is an intermediary commit - it’ll likely fail linting since the whitespace is a bit off. It’s also not doing anything yet - a subsequent commit will make use of this code (the provider and new ApplyButton component)
Today the DiscussionsSettings component needs to be responsible for form submission because it owns the “Apply” button that a user clicks to submit the form. It declares a “formRef” which is passed into the form and attached to the form DOM element, and then the “Apply” button can call formRef.current.submit() to submit the form from DiscussionsSettings, even though the form itself is declared way down in a sub-module.
This is awkward, and forces this top level component to be smarter than it should be, and to know too much about its children.
An alternate pattern is to create a context provider (AppConfigFormProvider) which owns the formRef and is part of the sub-module. Then create an AppConfigFormApplyButton component that knows how to pull that formRef out of the context and call submit on it.
This way, DiscussionsSettings doesn’t know anything about form submission, and we can move all that code into the app-config-form sub-module that should know about it. Win!
Again, this commit just adds the code and inserts the provider into DiscussionsSettings - it doesn’t use it all yet.
* refactor: create AppListNextButton that knows how to move to step two of the Stepper
Like the previous commit, this will enable us to factor code out of DiscussionsSettings and into a sub-module where it is a more natural fit.
This AppListNextButton makes use of the `selectedAppId` we’ll be adding to our new app-list reducer in order to know which app has been selected in the list. It can then use that to change the URL route.
In contrast to the previous commit, we use redux here instead of a context. We used context for the formRef because we try to keep complex data types like that out of redux, and also because formRef is not _state_, but just an implementation detail of how we needed to wire everything up in a React app. selectedAppId, on the other hand, is state, and so belongs in redux more naturally.
* refactor: cutting over to using the new discussions reducers
This commit will break everything, since the React components haven’t been updated to use the new reducer shape yet. Subsequent commits will convert app-list and app-config-form over.
* refactor: remove app-list logic from DiscussionsSettings
This is a ‘contract’ commit which removes functionality from DiscussionsSettings and adds it to AppList.
A word of warning that I tried my best to separate this refactor from that of AppConfigForm, but this commit may not be perfect. The original problem was that the two sub-modules were unnecessarily intertwined, making use of some shared variables when they didn’t need to (such as selectedAppId), so I can’t fully get app-list working without touching app-config-form as well… so this particular commit probably has logical errors and won’t build properly. Taken together with the next commit for app-config-form, though, they move a significant amount of logic out of DiscussionsSettings and into the sub-modules and isolate them from each other.
You’ll see here that handleSelectApp and handleStartConfig move into the app-list sub-module. The former goes into AppList, the latter was committed to AppListNextButton in a prior commit.
Once those two are gone, a bunch of other code in DiscussionsSettings starts falling away. selectedAppId is still necessary since the config form handlers are using it, but we’ll see that disappear in the next commit.
* refactor: move app-config-form logic out of DiscussionsSettings
This is the last major commit. It removes a handleApply and handleSubmit from DiscussionsSettings and then cleans up the various variables and imports which are no longer necessary.
handleApply moved into AppConfigFormApplyButton in a prior commit, and handleSubmit has moved into AppConfigForm itself. Now DiscussionsSettings doesn’t know anything about forms or submission, we’ve successfully moved all that code down into sub-modules.
This commit also makes use of AppConfigFormApplyButton.
* refactor: remove old discussions reducers, thunks, and APIs
These three files are now obsolete and have been replaced by a new set of reducers in app-list and app-config-form, specific to those sub-modules specific functions.
This has the side effect of simplifying the naming of the state variables and making it easier to reason which variables are for what sub-module. Prior to this refactor, there were several logical bugs where we were using a confusing combination of “selectedAppId” in local state, “displayedAppId” and “activeAppId” in redux, along with displayedAppConfigId, and it wasn’t quite clear what was for which part of the app, and mis-use was causing some loading and state errors as users navigated around.
The “status” variable in this reducer was also problematic, as we have two separate async requests we’re trying to track the status of - fetchApps and fetchAppConfig. The app was getting confused about what was loaded and what was still loading, which actually caused an infinite loop for me before choosing to refactor (state changes from the two requests were invalidating the state of the other, toggling back and forth between LOADED and LOADING)
* refactor: moving authoring.discussions.heading fix into the right messages file
* Adding font-awesome so we can use it with StatefulButton
* Rudimentary discussion config UI with mocked APIs.
* Updating Yellowdig logo URL
* Bumping and locking dependencies, adding formik and yup
* Wiring up the “Enable” button to go to the discussions config.
* Refactoring DiscussionConfig to use formik and yup.
* Using more paragon components - Card, CardGrid, and DataTable
* Adding keys to arrays of rendered components.
* Ignore module.config.js file.
* Bumping frontend-build to the latest version.
* Removing font-awesome again - it’s no longer necessary.
The latest version of Paragon uses <FontAwesomeIcon> for its closing “X”, rather than using CSS class names directly.
* Splitting discussion app list cards out into their own component.
They used to, but were folded in while refactoring to use Card and CardGrid.
* Adding comments to FeaturesTable.
* Fixing package SCSS imports.
They need tildas. This ensures webpack knows to look for them in the node_modules folder, and also enables webpack resolve aliases to function (which is the mechanism that module.config.js works on)
* Renaming course-page-resources to pages-and-resources
It’s all course stuff in the end.
* Renaming CoursePageResources to PagesAndResources
To match its parent directory and the page’s user-facing name.
* Simplifying name of CoursePageConfigCard to PageCard
Also moving into a sub-directory where we’ll put components for the “pages” part of the UI.
* Remove data README from example app.
* Moving discussion-tool-selector directory
Adding it as a child of the pages-and-resources module.
* Organizing SCSS.
* Simplifying discussions module structure.
- Combining “container” and discussion tool selector into DiscussionAppList.
- Removing some sub-directories that feel a bit too granular.
* Splitting out some sub-components from PagesAndResources.
* Removing unnecessary scss extension on import.
* Added new components for Discussion Tool Selection
* Incorporating discussion tool selector page into CourseAuthoringRoutes
* Improving tool selection - will now unselect
Also using a pointer cursor.
* Styling tweaks, logo size and text color
Making the logo so it doesn’t scale vertically - picked 100px arbitrarily. It will be changed, but is now at least a little more inline with how the Pages & Resources view behaves.
Also darkening text color - it looked disabled.
* Adding a “Configure forum” button
It appears when a tool is selected.
This is a temporary location, depending on whether or not we insist on this page being a full-page modal. In my opinion we should just keep it a normal page.
Co-authored-by: Aayush <ayush@opencraft.com>
* 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.
