openedx / frontend-app-ora-grading Goto Github PK

Open Response Assessment - Enhanced Staff Grader - Allows graders to easily review, evaluate and grade ORAs

License: GNU Affero General Public License v3.0

Shell 0.01% JavaScript 98.18% Makefile 0.43% HTML 0.08% SCSS 1.30%

frontend-app-ora-grading's Introduction

frontend-app-ora-grading

Purpose

The ORA Staff Grading App is a micro-frontend (MFE) staff grading experience for Open Response Assessments (ORAs). This experience was designed to streamline the grading process and enable richer previews of submission content and, eventually, replace on-platform grading workflows for ORA.

When enabled, ORAs with a staff grading step will link to this new MFE when clicking "Grade Available Responses" from the ORA or link in the instructor dashboard.

The ORA Staff Grader depends on the lms/djangoapps/ora_staff_grader app in edx-platform.

Getting Started

Prerequisites

The devstack is currently recommended as a development environment for your new MFE. If you start it with make dev.up.lms that should give you everything you need as a companion to this frontend.

Note that it is also possible to use Tutor to develop an MFE. You can refer to the relevant tutor-mfe documentation to get started using it.

Plugins

This MFE can be customized using Frontend Plugin Framework.

The parts of this MFE that can be customized in that manner are documented here.

Developing

Cloning and Startup

First, clone the repo, install code prerequisites, and start the app.

1. Clone your new repo:

``git clone [email protected]:openedx/frontend-app-ora-grading.git``

2. Use node v18.x.

  The current version of the micro-frontend build scripts support node 18.
  Using other major versions of node *may* work, but this is unsupported.  For
  convenience, this repository includes an .nvmrc file to help in setting the
  correct node version via `nvm <https://github.com/nvm-sh/nvm>`_.

3. Install npm dependencies:

  ``cd frontend-app-ora-grading && npm install``

4. Update the application port to use for local development:

  Default port is 1993. If this does not work for you, update the line
  `PORT=1993` to your port in all .env.* files

5. Start the dev server:

  ``npm start``

The app will, by default, run on http://localhost:1993 unless otherwise specified in .env.development:PORT and .env.development:BASE_URL.

Next, enable the ORA Grading micro-frontend in edx-platform

Add the path to the ORA Grading app in edx-platform:
1. Go to your environment settings (e.g. edx-platform/lms/envs/private.py)
2. Add the environment variable, ORA_GRADING_MICROFRONTEND_URL pointing to the ORA Grading app location (e.g. http://localhost:1993).
Start / restart the edx-platform lms.
Enable the ORA Grading feature in Django Admin.
1. Go to Django Admin ({lms-root}/admin)
2. Navigate to django-waffle > Flags and click add/enable a new flag.
3. Add a new flag called openresponseassessment.enhanced_staff_grader and enable it.

From there, visit an Open Response Assessment with a Staff Graded Step and click the "View and grade responses" button to begin grading in the ORA Staff Grader experience.

Making Changes

Get / install the latest code:

# Grab the latest code
git checkout master
git pull

# Install/update the dev requirements
npm install

Before committing:

# Make a new branch for your changes
git checkout -b <your_github_username>/<short_description>

# Using your favorite editor, edit the code to make your change.

# Run your new tests
npm test

# Commit all your changes
git commit ...
git push

# Open a PR and ask for review.

Deploying

This component follows the standard deploy process for MFEs. For details, see the MFE production deployment guide

Internationalization

Please see refer to the frontend-platform i18n howto for documentation on internationalization.

Getting Help

If you're having trouble, we have discussion forums at https://discuss.openedx.org where you can connect with others in the community.

Our real-time conversations are on Slack. You can request a Slack invitation, then join our community Slack workspace. Because this is a frontend repository, the best place to discuss it would be in the #wg-frontend channel.

For anything non-trivial, the best path is to open an issue in this repository with as many details about the issue you are facing as you can provide.

https://github.com/openedx/frontend-app-ora-grading/issues

For more information about these options, see the Getting Help page.

License

The code in this repository is licensed under the AGPLv3 unless otherwise noted.

Please see LICENSE for details.

Contributing

Contributions are very welcome. Please read How To Contribute for details.

This project is currently accepting all types of contributions, bug fixes, security fixes, maintenance work, or new features. However, please make sure to have a discussion about your new feature idea with the maintainers prior to beginning development to maximize the chances of your change being accepted. You can start a conversation by creating a new issue on this repo summarizing your idea.

The Open edX Code of Conduct

All community members are expected to follow the Open edX Code of Conduct.

People

The assigned maintainers for this component and other project details may be found in Backstage. Backstage pulls this data from the catalog-info.yaml file in this repo.

Reporting Security Issues

Please do not report security issues in public, and email [email protected] instead.

frontend-app-ora-grading's People

Contributors

Stargazers

Watchers

frontend-app-ora-grading's Issues

Node 20 upgrade

Description

See the parent ticket for the general description and motivation, openedx/public-engineering#267. Make sure to follow its recommendations for each step of the process.

Tasks

Beta Give feedback

test: Add Node 20 to the CI matrix (example PR)
[build|refactor]: Upgrade to Node 20 (example PR)
test: Remove Node 18 from the CI matrix (example PR)
Options

testing-library/jest-dom lib problems and paragon problems

Currently, you cannot run tests because starting from testing-library v6.0.0, you no longer need to add

import '@testing-library/jest-dom/extend-expect'; in src/setupTest.js

If you run

npm run test

You will encounter this error:

After removing that line, you will encounter an error with @openedx/paragon:

ORA grading not displaying ORAs with file uploads

Bug Description

Hi. I'm running openedx palm 3 with tutor. Recently I found that when trying to open an ORA with file upload by clicking on the "View all responses" button, the frontend crashes, displaying the page below:

When using a low speed internet connection, you can get a glance of the ORA app but then the said page will be displayed within a second. Diving more into the issue, I realised that the actual error is coming from the file preview part and then later when trying to show the error banner, another error occurs which is what we see in the screenshot above.

How to reproduce

On a palm 3 installation of openedx, head to studio. Create an open response unit with optional or required file upload.
To do so, create a course and then a section and subsection. Within the subsection create a unit and choose "Open Response" component.

Choose one of the types (I chose staff review assessment). Then click on the "Edit" button on top of the component.

Then on the "Settings" tab, enable file upload by making it either "Required" or "Optional".

Save and publish your changes. Head to LMS by clicking on "View live version" button. Add your response and a file
to the ORA. Upload the file and submit the ORA.
Now for grading, with a staff access, click on the "Grade available responses" button at the bottom of the unit.

In the opened page click on the "View all responses" button on top right to get the error page.

Environment

OpenedX Palm 3
Tutor 16.1.5
Ubuntu 22.04

Additional context

The issue was originally posted on openedx forum.

Upgrade Node JS from 16 to 18

Abstract
Node 16's support will end on September 11, 2023. So we have to upgrade node JS to v18 before that.

Extras
Project should use .nvmrc to have a consistent node version
We have to update Readme accordingly.

Upgrade Node JS from 16 to 18

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Warning

These dependencies are deprecated:

Datasource	Name	Replacement PR?
npm	`redux-devtools-extension`

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Detected dependencies

github-actions

.github/workflows/add-depr-ticket-to-depr-board.yml

.github/workflows/add-remove-label-on-comment.yml

.github/workflows/ci.yml

actions/checkout v3

actions/setup-node v3

codecov/codecov-action v4

dawidd6/action-send-mail v3

ubuntu 20.04

.github/workflows/commitlint.yml

.github/workflows/lockfileversion-check.yml

.github/workflows/npm-publish.yml

actions/checkout v2

actions/setup-node v2

ubuntu 20.04

.github/workflows/self-assign-issue.yml

npm

package.json

@edx/brand ^1.2.2

@edx/frontend-component-header 5.0.2

@edx/frontend-platform 7.1.0

@edx/openedx-atlas ^0.6.0

@fortawesome/fontawesome-svg-core ^1.2.36

@fortawesome/free-brands-svg-icons ^5.15.4

@fortawesome/free-solid-svg-icons ^5.15.4

@fortawesome/react-fontawesome ^0.2.0

@openedx/frontend-slot-footer ^1.0.2

@openedx/paragon 21.11.3

@redux-beacon/segment ^1.1.0

@reduxjs/toolkit ^1.6.1

@testing-library/user-event ^14.0.0

@zip.js/zip.js ^2.4.6

axios ^0.28.0

classnames ^2.3.1

core-js 3.35.1

dompurify ^2.3.1

email-prop-type ^3.0.1

file-saver ^2.0.5

filesize ^8.0.6

font-awesome 4.7.0

history 5.3.0

html-react-parser ^1.3.0

lodash ^4.17.21

moment ^2.29.3

prop-types 15.8.1

query-string 7.1.3

react ^17.0.2

react-dom ^17.0.2

react-helmet ^6.1.0

react-intl 6.4.7

react-pdf ^5.5.0

react-redux ^7.2.9

react-router 6.21.3

react-router-dom 6.21.3

react-router-redux ^5.0.0-alpha.9

redux 4.2.1

redux-beacon ^2.1.0

redux-devtools-extension 2.13.9

redux-logger 3.0.6

redux-thunk 2.4.2

regenerator-runtime ^0.14.0

reselect ^4.0.0

util ^0.12.4

whatwg-fetch ^3.6.2

@edx/browserslist-config ^1.2.0

@edx/react-unit-test-utils 2.0.0

@edx/reactifex ^2.1.1

@openedx/frontend-build 13.0.28

@testing-library/jest-dom ^6.0.0

@testing-library/react 12.1.5

axios-mock-adapter ^1.20.0

fetch-mock ^9.11.0

husky ^7.0.0

identity-obj-proxy ^3.0.0

jest 29.7.0

jest-expect-message ^1.0.2

react-dev-utils ^12.0.1

react-test-renderer ^17.0.2

reactifex 1.1.1

redux-mock-store ^1.5.4

semantic-release ^19.0.3

nvm

.nvmrc

node 18.19

Check this box to trigger a request for Renovate to run again on this repository

Switch to Ansible-free Docker image

In order to advance implementation of both OEP-45: Configuring and Operating Open edX and openedx/public-engineering#51, we would like to switch devstack from using primarily Docker images built with Ansible code from the configuration repository to images built from Dockerfiles in each service's repository. We hope this will also help simplify Tutor by providing better base images to derive from, with fewer workarounds and duplicated code blocks required in Tutor.

A/C

Ensure that the repo's Dockerfile can create a base image which is appropriate for small production installations
Ensure that the repo's Dockerfile also defines an additional image derived from the base which adds dependencies and configuration changes needed for development environments
Check with the Tutor developers during code review to see if any further changes to the Dockerfile would help simplify Tutor
Automate uploads of both images when code changes are merged
Switch devstack to use the new Ansible-free development image, and do some basic testing to ensure it works before merging

Repalce edx.org brand with openedx brand in dependencies

The latest master depends on edx.org brand package which is not open source.

Upgrade React JS to v17

This repo is currently using React JS v16. We need to upgrade it to React 17 before moving to latest React version(v18).
React 17 doesn’t add any new developer-facing features, so its upgrade might not cause any breaking changes. Our end goal is to upgrade React to v18 but v18 no longer support enzyme, so we are upgrading to React 17 and then we’ll migrate from enzyme.

Epic Link

React 17 upgrade