Migrate graders_manager.jsx GroupsTable, GradersTable, CriteriaTable to React Table V8

[mrafie1]

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.)

• Added new filter component under table folder to include case sensitive filtering along side searching: case_sensitive_search_filter
  • Updated filter.jsx to allow this component to be displayed when filterVariant: "case-sensitive-text" is used
  • In case_sensitive_search_filter.jsx file, I updated the structure of filterValue
    • filterValue has a value attribute that contains the actual value to be filtered (Let me know if you want this name to be changed)
    • filterValue has a caseSensitive attribute which is a boolean with the default value of false. This changes when the user toggles the caseSensitive checkbox.
• Updated search_filter.jsx aria-label definition
  • Updated defaultSearchPlaceholderText to take in optional parameter header
• Migrated GradersTable, GroupsTable, and CriteriaTable to React Table V8
  • Added functions that were previously present in V6 implementation: getSelectedRows() and resetSelection()
  • Mimicked the previous implementation defining of columns
  • Mimicked https://github.com/MarkUsProject/Markus/pull/7826 props input to <Table>
  • GradersTable
    • Added ComponentDidUpdate function so that it updates the state attribute columnFilters when toggling display inactive graders checkbox
  • GroupsTable
    • Edited ComponentDidUpdate function so that it updates the state attribute columnFilters when toggling display inactive groups checkbox
    • Edited filtering function for group_name row to filter the filterValue filterValue.filterValue, and filter based on case sensitivity if filterValue.caseSensitive is true.

Screenshots of your changes (if applicable)

See [link](https://github.com//pull/8002)

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.)

About the criteria and section column of the groupTable, the functionality works.
Now the issue is that the spacing is a bit weird with tables that have showCoverage = true. The "graders" column data covers/overlaps the "coverage" column data. Only slightly adjusting the widths of the columns fixes the problem. Not sure how to approach this issue. I'll tinker a little bit with the minSize attributes of the column, but let me know if this is within scope of my task.

Images of issue:
Before slightly adjusting column widths using mouse pointer:

After:

In regard to Git, I had to close my previous pull request. Running Git Pull Upstream Master caused all of the previous changes made by other peers to be present in my PR, including line count and file changes. I ended up opening this PR, and the line updates/file changes reflect my actual work. However, the commits/contributors have carried over. I've asked some of the MarkUs people for help, and I've tried rebasing, but I'm still encountering this issue.

[coveralls]

Coverage Report for CI Build 27990030644

Coverage decreased (-0.08%) to 90.187%

Details

• Coverage decreased (-0.08%) from the base build.
• Patch coverage: 42 uncovered changes across 1 file (47 of 89 lines covered, 52.81%).
• 6 coverage regressions across 2 files.

Uncovered Changes

File	Changed	Covered	%
app/javascript/Components/graders_manager.jsx	77	35	45.45%
Total (4 files)	89	47	52.81%

Coverage Regressions

6 previously-covered lines in 2 files lost coverage.

File	Lines Losing Coverage	Coverage
app/javascript/Components/graders_manager.jsx	4	39.76%
app/javascript/Components/Helpers/table_helpers.jsx	2	33.94%

---

Coverage Stats

Relevant Lines:	50475
Covered Lines:	46531
Line Coverage:	92.19%
Relevant Branches:	2352
Covered Branches:	1112
Branch Coverage:	47.28%
Branches in Coverage %:	Yes
Coverage Strength:	127.2 hits per line

---

💛 - Coveralls

[david-yz-liu]

@mrafie1 nice work! The changes look good. In response to your comments:

1. About the row rendering issue: after inspecting the raw HTML, I found that the "coverage" cell was not being rendered for each row. This is because the TableRow component is memoized, so when only the columns prop of Table changes, that isn't triggering a re-render. I fixed a similar earlier by passing a columnSizing prop to TableRow; you can pass the columns directly (and update the React.memo call for TableRow) to force a re-render.
2. Not sure about the git issue you faced, but please make sure your git config pull.rebase is set to false (git config pull.rebase false) to avoid accidentally doing a rebase.

[david-yz-liu]

Nice work, @mrafie1!