Convert "Rename Group" modal to React component

[freyazjiner]

Proposed Changes

(Describe your changes here. Also describe the motivation for your changes: what problem do they solve, or how do they improve the application or codebase? If this pull request fixes an open issue, use a keyword to link this pull request to the issue.)
This PR modernizes the group renaming interface by replacing the old modal with a React component implementation.

Screenshots of your changes (if applicable)

Associated documentation repository pull request (if applicable)

Type of Change

(Write an X or a brief description next to the type or types that best describe your changes.)

Type	Applies?
🚨 Breaking change (fix or feature that would cause existing functionality to change)
✨ New feature (non-breaking change that adds functionality)
🐛 Bug fix (non-breaking change that fixes an issue)
🎨 User interface change (change to user interface; provide screenshots)
♻️ Refactoring (internal change to codebase, without changing functionality)	X
🚦 Test update (change that only adds or modifies tests)
📦 Dependency update (change that updates a dependency)
🔧 Internal (change that only affects developers or continuous integration)

Checklist

(Complete each of the following items for your pull request. Indicate that you have completed an item by changing the [ ] into a [x] in the raw text, or by clicking on the checkbox in the rendered description on GitHub.)

Before opening your pull request:

• I have performed a self-review of my changes.
  • Check that all changed files included in this pull request are intentional changes.
  • Check that all changes are relevant to the purpose of this pull request, as described above.
• I have added tests for my changes, if applicable.
  • This is required for all bug fixes and new features.
• I have updated the project documentation, if applicable.
  • This is required for new features.
• If this is my first contribution, I have added myself to the list of contributors.

After opening your pull request:

• I have updated the project Changelog (this is required for all changes).
• I have verified that the pre-commit.ci checks have passed.
• I have verified that the CI tests have passed.
• I have reviewed the test coverage changes reported by Coveralls.
• I have requested a review from a project maintainer.

Questions and Comments

(Include any questions or comments you have regarding your changes.)

[coveralls]

Pull Request Test Coverage Report for Build 18077046745

Warning: This coverage report may be inaccurate.

This pull request's base commit is no longer the HEAD commit of its target branch. This means it includes changes from outside the original pull request, including, potentially, unrelated coverage changes.

• For more information on this, see Tracking coverage changes with pull request builds.
• To avoid this issue with future PRs, see these Recommended CI Configurations.
• For a quick fix, rebase this PR at GitHub. Your next report should be accurate.

Details

• 15 of 15 (100.0%) changed or added relevant lines in 1 file are covered.
• 155 unchanged lines in 10 files lost coverage.
• Overall coverage increased (+0.005%) to 91.843%

---

Files with Coverage Reduction	New Missed Lines	%
app/models/autotest_user.rb	1	92.31%
spec/controllers/main_controller_spec.rb	1	97.95%
app/jobs/autotest_job.rb	1	83.33%
app/controllers/admin/courses_controller.rb	1	94.23%
app/helpers/automated_tests_helper.rb	6	90.53%
app/controllers/api/courses_controller.rb	8	78.85%
app/controllers/api/submission_files_controller.rb	11	85.11%
app/controllers/grade_entry_forms_controller.rb	15	80.14%
app/controllers/assignments_controller.rb	47	79.11%
app/controllers/submissions_controller.rb	64	80.38%

Totals
Change from base Build 18019211133:	0.005%
Covered Lines:	42307
Relevant Lines:	45338

---

💛 - Coveralls

[david-yz-liu]

Adding a groupingId state is good, but a better name is renameGroupingId. For any new state you add, you should initialize it in the constructor.

[david-yz-liu]

Similarly, groupName is better named renameGroupName. This state can be passed into the modal component to initialize the starting value of the group name for the input. This is a better initial value than the empty string. (I realize that this is actually an update to the original behaviour, but it's a fairly small one and coincides nicely with the refactoring changes you're making.)

[david-yz-liu]

The assignment_id parameter should be necessary, just the new_groupname param

[david-yz-liu]

@freyazjiner in addition to the inline comments, please add additional tests so that you have 100% code coverage on the new module. Remember that you can run tests with coverage locally with the --coverage flag.

[david-yz-liu]

For props that correspond to input field values, "initial" is a better word than "current". So initialGroupName rather than currentGroupName.

[david-yz-liu]

Also, it's good practice to also use the prop in the constructor to set the initial state value (even if the prop value is initially the empty string; that could change in the future).

[david-yz-liu]

I noticed when testing that the modal did not exhibit the correct behaviour: what I was looking for in my previous comment is for the input to autofill based on the group selected. Instead, the input still appears blank.

The problem is not with the new prop (initialGroupName), but rather how this function is being used. You modified the function signature to take an additional parameter group_name, which is good, but have not actually modified how this function is called. In general, make sure to be careful when changing function signatures: you need to check both the function definition and everywhere the function is called.

[david-yz-liu]

Nice work, @freyazjiner!