Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

React conversion + Support Dashboard #1359

Merged
merged 565 commits into from
Oct 12, 2023

Conversation

clpetersonucf
Copy link
Member

@clpetersonucf clpetersonucf commented Jan 13, 2022

The "React Branch" Update for Materia

Unofficially dev/10.0.

New and Notable Features

Replaces AngularJS with React and consolidates JS and CSS assets into the main repo

Previously, static assets (JS & CSS) were part of a separate repository, Materia-Server-Client-Assets. This update brings these assets back into the fold in a new top-level src directory. Compiled assets are emitted by webpack into public/ (public/dist/ when in development environments). Because React is doing the heavy lifting of DOM rendering, the old PHP partial views in fuel/app/themes/default/ are being retired.

This conversion also affects how theme overrides work. Previously, controllers would listen for Events registered in Fuel package's bootstrap.php files, and make use of PHP partial views provided by those packages. While the event registration/trigger system remains, theme packages operate a little differently. See the Materia-Theme-UCF repo for more info.

Redesign and improved responsiveness

The React conversion gave us the opportunity to give Materia a much-needed facelift. Enjoy crisper, snappier interfaces, improved UX like creator guide links in the widget creator, and a soon-to-be-implemented Dark Mode.

Improved support and administration

We've added a new user role, support_user, to bridge the gap between normal users and administrators. Both support users and admins have access to new admin panels to handle common requests from users. Support users are given access to the User admin interface, where they can easily look up user information, play history, and owned instances - and even administrate those instances directly. They also have access to the Instance admin interface, which allows fast lookups of any instance in the database and administrative actions like modifying settings or adding users.

The Widget admin interface remains available for super users, allowing for fast widget installation and updates and administration of the widget catalog.

Accessibility information

The widget catalog and details pages now include additional qualifying information about keyboard and screen reader accessibility if the requisite metadata is included in a widget's install.yaml:

metadata:
    accessibility_keyboard: Full # values can be Full | Limited | None
    accessibility_reader: Full

The new Materia-Widget-Dependencies package

Because of MSCA's retirement, the widget development kit will need a new node package dependency to provide the required Materia JS and CSS to properly run. This is provided in the new materia-widget-dependencies package, which is located within a package.json in the public/dist directory. The package can be published via a GitHub action as required, to include the latest and greatest changes from the Materia engine, creator, and score cores, or other aspects of the creator and player.

Miscellaneous updates

Other notable features include:

  • A new footer for widget players with a direct attribution link to Materia as well as a link to the player's guide, if included
  • Direct links to the Creator's Guide from within widget creators, if included
  • Support for additional audio MIME types in the media uploader, primarily .m4a
  • Support for soft deleting previously uploaded media assets in the media importer
  • Paginated API queries for particularly large API requests, including instances and score data

Extra Notes

First-time installation

Navigate to Materia/docker and run ./run_first.sh

Starting up the local Materia instance

  1. Open up two terminals
  2. In the first terminal navigate to Materia/docker and run docker-compose up
  3. In the second terminal, navigate to the root directory of the repo and run yarn dev

Useful Commands

These need to be run in the Materia/docker directory.

To create a user

./run.sh php oil r admin:new_user <username> <first> <mi> <last> <email> <password>

To give the user a role

./run.sh php oil r admin:give_user_role <username> <rolename>

Currently available roles are basic_author, support_user and super_user.

@clpetersonucf clpetersonucf added the React Branch Related to the React rewrite for Materia label Oct 24, 2022
clpetersonucf and others added 28 commits March 6, 2023 16:31

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
…sited

React media importer revisited

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
…n-errors

Issue #1446/Fix post-login redirects

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
…qset

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
…rt-user-permissions

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
Issue/1453 adds support label on profile page

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
…ions

Issue/1438 Grants support users additional permissions

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
…on-graph

Fixes to score screen and individual score semester

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
…istribution-graph

Implements Emanuel's changes to score screen and distribution graphs

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
…che-busting

Issue/1459 remove asset hash cache busting

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
Changes for deploy

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
…qset
clpetersonucf and others added 23 commits September 28, 2023 10:51

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
Fixes duplicate API score calls

Verified

This commit was signed with the committer’s verified signature.
FrenjaminBanklin Brandon Stull
…er than the 60. Removed unnecessary iconUurl utility usage in My Widgets instance component. Added CSS style to improve the look of the widget icon in the LTI widget picker.

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
…g-backwards-compatibility

Add expected `img` property to widget instance objects used by the LTI widget picker.

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
…nent-refactor

[React branch] Widget player component refactor
…port options dialog.

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
…rt-seven

React Branch fixes and polish part seven
…style issues
…ss settings modifier if a student has access to a non-student widget
…ge instantiation

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
[React Branch] Fixes and polish: final edition
…eme-ucf to v2.0.1 in composer
@clpetersonucf clpetersonucf marked this pull request as ready for review October 11, 2023 19:10
@clpetersonucf clpetersonucf added the Awaiting Review Requires a reviewer to test and review code label Oct 11, 2023
Copy link
Contributor

@FrenjaminBanklin FrenjaminBanklin left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since this work and functionality has (more or less) all been verified in the numerous individual branches that were merged into this one over time, and since it's been running without issue in a production environment for a week, I think this is probably ready to merge.

Copy link

@dmols dmols left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to merge. Great work!

Copy link
Contributor

@cayb0rg cayb0rg left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ship it.

@clpetersonucf clpetersonucf merged commit 8a44295 into master Oct 12, 2023
4 checks passed
@clpetersonucf clpetersonucf deleted the issue/support-dashboard-in-react branch October 12, 2023 18:30
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Awaiting Review Requires a reviewer to test and review code React Branch Related to the React rewrite for Materia
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants