TICKET-614: Add case sensitivy to group search

[Naragod]

Proposed Changes

Add case sensitivity to group search.

Screenshots of your changes (if applicable)

Screen.Recording.2026-05-08.at.5.04.27.PM.mov

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)	X
🐛 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)
🚦 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]

Coverage Report for CI Build 25768252823

Coverage increased (+0.03%) to 91.754%

Details

• Coverage increased (+0.03%) from the base build.
• Patch coverage: 20 uncovered changes across 3 files (73 of 93 lines covered, 78.49%).
• No coverage regressions found.

Uncovered Changes

File	Changed	Covered	%
app/javascript/Components/groups_manager.jsx	44	28	63.64%
app/javascript/Components/annotation_usage_panel.jsx	19	16	84.21%
app/javascript/Components/graders_manager.jsx	7	6	85.71%

Coverage Regressions

No coverage regressions found.

---

Coverage Stats

Relevant Lines:	48737
Covered Lines:	45462
Line Coverage:	93.28%
Relevant Branches:	1895
Covered Branches:	995
Branch Coverage:	52.51%
Branches in Coverage %:	Yes
Coverage Strength:	131.4 hits per line

---

💛 - Coveralls

[donny-wong]

Thank you @Naragod , looks good. Please update branch and I will approve it at that time. Thank you.

[david-yz-liu]

@Naragod Nice work! Sorry I took a while to review this. The UI is very nice and I appreciate the attention to consistency across components.

I left two comments, one of which is describes a change to the approach that causes a bit of work but I think will result in a nice simplification of these changes. Please feel free to message on Slack if you'd like to chat further about this.

[david-yz-liu]

I appreciate the coercion, but for null and undefined: String(null) === "null" and String(undefined) === "undefined", which I do not think are appropriate values for this function. I'd be happy to have them "coerced" into the empty string "".

[david-yz-liu]

Okay so looking at the overall code changes, I think we can simplify greatly by keeping the toggled "caseSensitive" state in this component rather than lift it up to the parent component. The key idea here is that we can use the onChange callback to pass arbitrary data directly between this filter component and the table.

So you should be able to do something like

export function caseSensitiveTextFilter({onChange, column}) => {
  const { filterValue, setFilterValue } = React.useState("");
  const { caseSensitive, setCaseSensitive } = React.useState(false);

  React.useEffect(() => {
    // Key line
    onChange({filterValue: filterValue, caseSensitive: caseSensitive});
  }, [filterValue, caseSensitive]);

  return (
    // The same, except the input element onChange callbacks call setFilterValue/setCaseSensitive
    ...
  );
});

Then you can modify the filterMethod functions used in the components to access filter.value.filterValue and filter.value.caseSensitive directly, rather than requiring the latter to be passed in by the parent component.