React conversion + Support Dashboard

[clpetersonucf]

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.

[FrenjaminBanklin]

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.

[dmols]

Looks good to merge. Great work!

[cayb0rg]

Ship it.