Skip to content

Feature: new grid filter#242

Open
santipalenque wants to merge 7 commits into
mainfrom
feature/new-grid-filter
Open

Feature: new grid filter#242
santipalenque wants to merge 7 commits into
mainfrom
feature/new-grid-filter

Conversation

@santipalenque
Copy link
Copy Markdown
Contributor

@santipalenque santipalenque commented May 18, 2026

https://app.clickup.com/t/86b9ruudz

Summary by CodeRabbit

  • New Features

    • Grid filtering UI with multi-criteria AND/OR builder, apply/clear/delete flows
    • New UI components: Dropdown, RoundButton, ToggleButtons, Filter button/count, modular filter inputs
  • Documentation

    • Usage docs for the grid filter, hook-based state access, operator guidance and examples
    • English translations for grid filter UI
  • Tests

    • Added tests for Dropdown, ToggleButtons and GridFilter interactions
  • Chores

    • Package bumped to 5.0.23-beta.1; upgraded react-redux and redux versions

Review Change Stack

@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented May 18, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: df468a87-6e5b-4bb7-b1c9-990c4ff6c98a

📥 Commits

Reviewing files that changed from the base of the PR and between f9c57c2 and 9e1c3f2.

📒 Files selected for processing (1)
  • src/components/mui/GridFilter/components/Filter.jsx

📝 Walkthrough

Walkthrough

Adds a dialog-driven GridFilter with Redux persistence, supporting utilities and subcomponents (Dropdown, RoundButton, ToggleButtons), tests, i18n strings, webpack entries, and upgrades react-redux/redux in package.json.

Changes

Grid Filter Feature

Layer / File(s) Summary
Package and dependency updates
package.json
Version bumped and react-redux upgraded to ^7.1.0 (dev + peer); redux bumped in devDependencies.
Barrel exports and documentation
src/components/index.js, src/components/mui/GridFilter/index.js, src/components/mui/GridFilter/readme.md
Exports new MUI components and GridFilter surface; README documents Redux setup, usage, operators, hook API, and customParser.
Dropdown component and tests
src/components/mui/Dropdown/index.jsx, src/components/mui/__tests__/Dropdown.test.jsx
FormControl-based Dropdown supporting single/multi-select, placeholder rendering, label lookup, and tests covering selection and onChange.
Simple MUI UI component wrappers
src/components/mui/RoundButton/index.jsx, src/components/mui/ToggleButtons/index.jsx, src/components/mui/__tests__/ToggleButtons.test.jsx
RoundButton enforces circular 40px sizing; ToggleButtons wraps ToggleButtonGroup (exclusive) with color-based styling and tests.
GridFilter utilities, operators, and translations
src/components/mui/GridFilter/utils.js, src/i18n/en.json
Defines OPERATORS mapping, JOIN_OPERATORS, EMPTY_FILTER template, and adds grid_filter i18n strings.
GridFilter Redux state management
src/components/mui/GridFilter/actions/filter-actions.js, src/components/mui/GridFilter/reducers/all-filters-reducer.js, src/components/mui/GridFilter/reducers/filter-reducer.js
Adds SAVE_FILTERS and saveFilters action, allFiltersReducer to upsert per-id state, and filterReducer to compute parsedFilter and handle join operator wrapping.
useGridFilter hook
src/components/mui/GridFilter/hooks/useGridFilter.jsx
Reads allFilters from Redux, derives current filter state, builds valuesWithIds, exposes filterCount/joinOperator/parsedFilter/resetFilters.
GridFilter sub-components
src/components/mui/GridFilter/components/Filter.jsx, src/components/mui/GridFilter/components/FilterButton.jsx, src/components/mui/GridFilter/components/ValueInput/index.jsx
Filter renders criteria/operator/value inputs with auto-selection and add/delete actions; FilterButton toggles dialog or shows count chip; ValueInput delegates to TextField or Dropdown based on type.
GridFilter main container component
src/components/mui/GridFilter/GridFilter.jsx
Dialog-based filter builder: initializes state via useGridFilter, manages editable filters, applies custom parsers, submits via Redux saveFilters action, and supports clear/delete operations.
Tests and webpack configuration
src/components/mui/__tests__/GridFilter.test.jsx, webpack.common.js
Jest/RTL tests verify GridFilter dialog and ToggleButtons behavior; webpack adds entries for dropdown, toggle-buttons, round-button, and grid-filter.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Suggested reviewers

  • smarcet

Poem

🐰 I nibble on props and hop through state,
A dialog blooms where filters create,
Operators lined in a neat little row,
Redux keeps whispers the users will know,
Hooray — components ready to show!

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title 'Feature: new grid filter' directly addresses the main changeset, which introduces a complete new GridFilter component with supporting utilities, hooks, reducers, and tests.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feature/new-grid-filter

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint skipped: no ESLint configuration detected in root package.json. To enable, add eslint to devDependencies.


Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 5

🧹 Nitpick comments (3)
src/components/mui/GridFilter/utils.js (1)

38-43: 💤 Low value

Consider using a symbol or generated ID for EMPTY_FILTER.

The string literal "new" as the id could conflict with actual filter IDs if the backend ever generates an ID with the value "new".

🔄 Proposed alternatives

Option 1: Use a Symbol

 export const EMPTY_FILTER = {
   criteria: null,
   operator: null,
   value: null,
-  id: "new"
+  id: Symbol("new")
 };

Option 2: Use a unique prefix

 export const EMPTY_FILTER = {
   criteria: null,
   operator: null,
   value: null,
-  id: "new"
+  id: "__new__"
 };
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/components/mui/GridFilter/utils.js` around lines 38 - 43, EMPTY_FILTER
currently uses the literal id "new" which may conflict with real IDs; update
EMPTY_FILTER (and any code that compares or serializes its id) to use a
non-colliding identifier instead—either replace the id with a Symbol (e.g., use
Symbol('EMPTY_FILTER') and adjust any equality checks to use strict identity) or
generate a namespaced/unique id (e.g., prefix with "__empty__" or use a UUID)
and ensure functions that create, compare, or send filters handle the new form
(refer to EMPTY_FILTER and any usages that read .id).
package.json (1)

85-85: 🏗️ Heavy lift

react-redux v7.1.0 usage is compatible with the codebase.

The codebase actively uses react-redux v7.1.0 with three components using the connect() HOC pattern and one using hooks (useDispatch, useSelector). All patterns found are fully compatible with react-redux v7—no breaking changes were detected, and the dependency combination with React 17 and Redux 3.7.2 is valid and stable.

However, consider upgrading to ^7.2.9 instead of ^7.1.0 for bug fixes and improvements.

Also applies to: 152-152

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@package.json` at line 85, Update the react-redux dependency in package.json
from "^7.1.0" to "^7.2.9" (the "react-redux" entry), run your package manager to
update the lockfile (npm install or yarn install), and run the test suite and
the app to ensure existing usages of connect(), useDispatch, and useSelector
continue to work; if any type or runtime regressions appear, adjust
imports/usages accordingly and commit the updated package.json and lockfile.
src/components/mui/RoundButton/index.jsx (1)

18-29: ⚡ Quick win

Support MUI array-based sx composition for full compatibility.

The current object-spread pattern on line 18 (sx={{ ...defaults, ...sx }}) prevents users from passing array or function values, which MUI v6 explicitly supports for theme-based and conditional styling. Converting to MUI's array format preserves defaults while accepting all three supported types.

♻️ Proposed refactor
-const RoundButton = ({ children, sx = {}, ...props }) => (
+const RoundButton = ({ children, sx, ...props }) => (
   <Button
     // eslint-disable-next-line react/jsx-props-no-spreading
     {...props}
-    sx={{
-      width: 40,
-      height: 40,
-      minWidth: "auto",
-      borderRadius: "50%",
-      padding: 0,
-      ...sx
-    }}
+    sx={[
+      {
+        width: 40,
+        height: 40,
+        minWidth: "auto",
+        borderRadius: "50%",
+        padding: 0
+      },
+      sx
+    ]}
   >
     {children}
   </Button>
 );
@@
 RoundButton.propTypes = {
   children: PropTypes.node.isRequired,
-  sx: PropTypes.object
+  sx: PropTypes.oneOfType([
+    PropTypes.object,
+    PropTypes.array,
+    PropTypes.func
+  ])
 };
 
 RoundButton.defaultProps = {
-  sx: {}
+  sx: undefined
 };

Also applies to: lines 35-42

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/components/mui/RoundButton/index.jsx` around lines 18 - 29, The
RoundButton component currently merges default sx properties by object-spreading
which rejects array or function sx values; update the sx prop on the Button
inside RoundButton (and the analogous block at the other occurrence) to compose
defaults using MUI's array form: provide the defaults as the first array element
and then concatenate the incoming sx (if it's already an array spread it,
otherwise append it as a single element) so functions, arrays and objects are
all supported by MUI; target the RoundButton component and the other sx merge
site mentioned and replace the object spread with this array-composition
pattern.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/components/index.js`:
- Line 123: Change the incorrect default re-export of MuiGridFilter to use the
named export from the GridFilter barrel: import the named export GridFilter and
re-export it aliased as MuiGridFilter, and keep the other named exports
(OPERATORS as FILTER_OPERATORS, JOIN_OPERATORS as FILTER_JOIN_OPERATORS,
EMPTY_FILTER as FILTER_EMPTY_FILTER, useGridFilter, allFiltersReducer,
saveFilters as saveGridFilters, SAVE_FILTERS) as named re-exports; update the
export statement that currently references MuiGridFilter to reference GridFilter
(aliased) and the listed named symbols so it matches the named exports provided
by GridFilter.

In `@src/components/mui/GridFilter/components/ValueInput/index.jsx`:
- Around line 21-30: ValueInput currently accepts a missing type at runtime (it
falls back to Dropdown via INPUT_TYPE_MAP lookup) but its propTypes mark type as
required; update the prop contract to match runtime behavior by making the type
prop optional (remove PropTypes.string.isRequired and use PropTypes.string) or
add a default prop for type that maps to the Dropdown key; locate the ValueInput
component and adjust the propTypes (and/or defaultProps) for the type prop so
PropTypes no longer warns when type is omitted.

In `@src/components/mui/GridFilter/hooks/useGridFilter.jsx`:
- Around line 7-10: The hook assumes state.allGridFiltersState exists and
crashes if missing; update the useSelector call so it safely accesses the slice
and returns a default array when absent (e.g., use optional chaining and nullish
coalescing to get allFilters), then compute filter = allFilters.find(f => f.id
=== id) || {}; specifically change the selector used in useSelector and keep the
rest of the logic (referencing useSelector, allGridFiltersState, allFilters, id,
and filter) so the hook never throws during render when the slice is undefined.

In `@src/components/mui/GridFilter/utils.js`:
- Around line 11-15: The HAS and HAS_NOT operators (symbols HAS and HAS_NOT in
GridFilter utils) are marked "not available on API" and should not be sent to
the backend; either remove them from the exported operator list if they are
unusable, or clearly mark them as client-only and prevent submission by adding
runtime validation that filters out operator values ">>" and "!>>" before
building API requests (e.g., in the function that serializes filter rules), or
add UI-level documentation/tooltip indicating they perform client-side filtering
only—pick one approach and implement it consistently so the UI never sends
HAS/HAS_NOT to the API.
- Around line 3-36: The operator labels are being translated eagerly at module
load via T.translate in OPERATORS and JOIN_OPERATORS, causing untranslated keys
if i18n isn't initialized; update OPERATORS and JOIN_OPERATORS so label values
are computed lazily (e.g., replace static label strings with getter functions or
accessor functions that call T.translate at use time) and update any code that
reads operator.label to call or access the getter (keep the operator value
fields like value unchanged); specifically modify the OPERATORS constant and
JOIN_OPERATORS to store functions/getters that invoke T.translate rather than
calling T.translate during module initialization.

---

Nitpick comments:
In `@package.json`:
- Line 85: Update the react-redux dependency in package.json from "^7.1.0" to
"^7.2.9" (the "react-redux" entry), run your package manager to update the
lockfile (npm install or yarn install), and run the test suite and the app to
ensure existing usages of connect(), useDispatch, and useSelector continue to
work; if any type or runtime regressions appear, adjust imports/usages
accordingly and commit the updated package.json and lockfile.

In `@src/components/mui/GridFilter/utils.js`:
- Around line 38-43: EMPTY_FILTER currently uses the literal id "new" which may
conflict with real IDs; update EMPTY_FILTER (and any code that compares or
serializes its id) to use a non-colliding identifier instead—either replace the
id with a Symbol (e.g., use Symbol('EMPTY_FILTER') and adjust any equality
checks to use strict identity) or generate a namespaced/unique id (e.g., prefix
with "__empty__" or use a UUID) and ensure functions that create, compare, or
send filters handle the new form (refer to EMPTY_FILTER and any usages that read
.id).

In `@src/components/mui/RoundButton/index.jsx`:
- Around line 18-29: The RoundButton component currently merges default sx
properties by object-spreading which rejects array or function sx values; update
the sx prop on the Button inside RoundButton (and the analogous block at the
other occurrence) to compose defaults using MUI's array form: provide the
defaults as the first array element and then concatenate the incoming sx (if
it's already an array spread it, otherwise append it as a single element) so
functions, arrays and objects are all supported by MUI; target the RoundButton
component and the other sx merge site mentioned and replace the object spread
with this array-composition pattern.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 0145fadd-9bf7-4e7e-bd74-36021910a900

📥 Commits

Reviewing files that changed from the base of the PR and between e01d8de and ca1a369.

⛔ Files ignored due to path filters (1)
  • yarn.lock is excluded by !**/yarn.lock, !**/*.lock
📒 Files selected for processing (21)
  • package.json
  • src/components/index.js
  • src/components/mui/Dropdown/index.jsx
  • src/components/mui/GridFilter/GridFilter.jsx
  • src/components/mui/GridFilter/actions/filter-actions.js
  • src/components/mui/GridFilter/components/Filter.jsx
  • src/components/mui/GridFilter/components/FilterButton.jsx
  • src/components/mui/GridFilter/components/ValueInput/index.jsx
  • src/components/mui/GridFilter/hooks/useGridFilter.jsx
  • src/components/mui/GridFilter/index.js
  • src/components/mui/GridFilter/readme.md
  • src/components/mui/GridFilter/reducers/all-filters-reducer.js
  • src/components/mui/GridFilter/reducers/filter-reducer.js
  • src/components/mui/GridFilter/utils.js
  • src/components/mui/RoundButton/index.jsx
  • src/components/mui/ToggleButtons/index.jsx
  • src/components/mui/__tests__/Dropdown.test.jsx
  • src/components/mui/__tests__/GridFilter.test.jsx
  • src/components/mui/__tests__/ToggleButtons.test.jsx
  • src/i18n/en.json
  • webpack.common.js

Comment thread src/components/index.js Outdated
Comment on lines +21 to +30
const ValueInput = ({ type, ...rest }) => {
const Component = type ? INPUT_TYPE_MAP[type] : Dropdown; // use dropdown as a placeholder
// eslint-disable-next-line react/jsx-props-no-spreading
return Component ? <Component {...rest} /> : null;
};

ValueInput.propTypes = {
id: PropTypes.string.isRequired,
type: PropTypes.string.isRequired,
value: PropTypes.oneOfType([
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Align type prop contract with runtime fallback behavior.

Line 22 supports missing type (falls back to Dropdown), but Line 29 requires type. This mismatch creates noisy PropTypes warnings for a supported path.

Suggested fix
-  type: PropTypes.string.isRequired,
+  type: PropTypes.oneOf(["text", "select"]),
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const ValueInput = ({ type, ...rest }) => {
const Component = type ? INPUT_TYPE_MAP[type] : Dropdown; // use dropdown as a placeholder
// eslint-disable-next-line react/jsx-props-no-spreading
return Component ? <Component {...rest} /> : null;
};
ValueInput.propTypes = {
id: PropTypes.string.isRequired,
type: PropTypes.string.isRequired,
value: PropTypes.oneOfType([
const ValueInput = ({ type, ...rest }) => {
const Component = type ? INPUT_TYPE_MAP[type] : Dropdown; // use dropdown as a placeholder
// eslint-disable-next-line react/jsx-props-no-spreading
return Component ? <Component {...rest} /> : null;
};
ValueInput.propTypes = {
id: PropTypes.string.isRequired,
type: PropTypes.oneOf(["text", "select"]),
value: PropTypes.oneOfType([
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/components/mui/GridFilter/components/ValueInput/index.jsx` around lines
21 - 30, ValueInput currently accepts a missing type at runtime (it falls back
to Dropdown via INPUT_TYPE_MAP lookup) but its propTypes mark type as required;
update the prop contract to match runtime behavior by making the type prop
optional (remove PropTypes.string.isRequired and use PropTypes.string) or add a
default prop for type that maps to the Dropdown key; locate the ValueInput
component and adjust the propTypes (and/or defaultProps) for the type prop so
PropTypes no longer warns when type is omitted.

Comment thread src/components/mui/GridFilter/hooks/useGridFilter.jsx
Comment thread src/components/mui/GridFilter/utils.js Outdated
@santipalenque santipalenque force-pushed the feature/new-grid-filter branch from ca1a369 to baf678e Compare May 18, 2026 20:06
@OpenStackweb OpenStackweb deleted a comment from coderabbitai Bot May 21, 2026
@santipalenque santipalenque force-pushed the feature/new-grid-filter branch from baf678e to f9c57c2 Compare May 21, 2026 15:03
@santipalenque santipalenque requested a review from smarcet May 21, 2026 15:03
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

♻️ Duplicate comments (1)
src/components/mui/GridFilter/components/ValueInput/index.jsx (1)

22-30: ⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Make type prop contract consistent with runtime fallback.

Line 22 supports missing type (fallback to Dropdown), but Line 29 marks type as required, producing avoidable PropTypes warnings.

Suggested fix
-  type: PropTypes.string.isRequired,
+  type: PropTypes.string,
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/components/mui/GridFilter/components/ValueInput/index.jsx` around lines
22 - 30, The propTypes for ValueInput currently mark the type prop as required
but the render path falls back to Dropdown when type is missing (Component =
type ? INPUT_TYPE_MAP[type] : Dropdown), so update ValueInput.propTypes to make
type optional (change PropTypes.string.isRequired to PropTypes.string) or
alternatively provide a default via ValueInput.defaultProps (e.g., type:
undefined or a default key) so the runtime fallback to Dropdown is consistent
with the prop contract; refer to ValueInput, INPUT_TYPE_MAP, Dropdown, and
ValueInput.propTypes when making the change.
🧹 Nitpick comments (3)
src/components/mui/__tests__/GridFilter.test.jsx (1)

73-73: ⚡ Quick win

Brittle getByRole("button") queries.

screen.getByRole("button") will throw as soon as GridFilter/FilterButton renders more than one button (e.g., a badge clear icon, a count chip), which is likely as this feature evolves. Consider scoping by accessible name (e.g., getByRole("button", { name: "grid_filter.open_filters" })) to make these tests resilient.

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/components/mui/__tests__/GridFilter.test.jsx` at line 73, The test is
using a brittle screen.getByRole("button") which will break if GridFilter /
FilterButton renders additional buttons; update the assertion in
GridFilter.test.jsx to scope the role lookup by accessible name (e.g., use
screen.getByRole("button", { name: "grid_filter.open_filters" }) or the actual
i18n label used by FilterButton) so the test targets the intended FilterButton
element in the GridFilter component; ensure you reference the same accessible
name used in FilterButton/GridFilter to keep the test stable as UI adds other
buttons.
src/i18n/en.json (1)

143-144: 💤 Low value

Confirm trailing/leading spaces are intentional.

"filter_by": "Filter by " and "following": " one of the following: " carry padding spaces, presumably to concatenate fragments at render time. Concatenating translated fragments is fragile for i18n (word order varies by locale). If these are stitched together with a criteria/operator label in JSX, prefer a single template like "filter_by_following": "Filter by {criteria} one of the following: " so future translations can reorder freely.

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/i18n/en.json` around lines 143 - 144, The two i18n keys "filter_by" and
"following" include trailing/leading spaces and are being concatenated; replace
them with a single templated key (e.g., "filter_by_following": "Filter by
{criteria} one of the following:") and remove the old "filter_by" and
"following" keys, then update any call sites that currently concatenate
"filter_by" + criteria + "following" (look for uses of keys "filter_by" and
"following") to instead call the translation for "filter_by_following" and pass
the criteria as the {criteria} interpolation parameter so translators can
reorder words safely.
webpack.common.js (1)

90-92: 💤 Low value

Implicit index resolution is safe for the added MUI entry directories

components/mui/dropdown, components/mui/toggle-buttons, and components/mui/round-button each point to a directory containing an index.jsx (and components/mui/grid-filter contains index.js). webpack.common.js sets resolve.extensions to ['.js', '.jsx', '.json'] and does not override resolve.mainFiles, so webpack’s default index main-file lookup will resolve these correctly; using explicit .../index.jsx paths would be optional consistency/robustness rather than a fix.

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@webpack.common.js` around lines 90 - 92, The three webpack entries
'components/mui/dropdown', 'components/mui/toggle-buttons', and
'components/mui/round-button' are safe to keep as-is because resolve.extensions
includes '.jsx' and webpack will use the default 'index' main-file lookup; no
change is required. If you prefer explicit consistency, update those entry
values to point to the actual files (e.g.
'./src/components/mui/Dropdown/index.jsx',
'./src/components/mui/ToggleButtons/index.jsx',
'./src/components/mui/RoundButton/index.jsx') and note that
'components/mui/grid-filter' should point to
'./src/components/mui/GridFilter/index.js' to reflect its .js index.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/components/mui/GridFilter/components/Filter.jsx`:
- Around line 49-53: The useEffect is incorrectly treating valid falsy values
(0, false) as unset by using the falsy check !value?.value; update the condition
in the effect that sets the sole option so it only triggers when value.value is
null or undefined (e.g. replace !value?.value with value?.value == null or
(value?.value === undefined || value?.value === null)), keeping the rest of the
logic (options = valueSettings.props?.options; if (options?.length === 1 && ...
) handleChange("value", options[0].value);) unchanged.

In `@src/components/mui/GridFilter/reducers/filter-reducer.js`:
- Around line 11-16: The FIL_${SAVE_FILTERS} branch in filterReducer
destructures payload without a guard which will throw if action.payload is
undefined; update the reducer to default payload to an empty object (e.g., treat
payload = {} when extracting { id, filters, joinOperator }) and give
joinOperator a sensible default (or fall back to existing default constant) so
that calling saveFilters(id) or useGridFilter.resetFilters (which may send no
payload) won't crash the reducer.

---

Duplicate comments:
In `@src/components/mui/GridFilter/components/ValueInput/index.jsx`:
- Around line 22-30: The propTypes for ValueInput currently mark the type prop
as required but the render path falls back to Dropdown when type is missing
(Component = type ? INPUT_TYPE_MAP[type] : Dropdown), so update
ValueInput.propTypes to make type optional (change PropTypes.string.isRequired
to PropTypes.string) or alternatively provide a default via
ValueInput.defaultProps (e.g., type: undefined or a default key) so the runtime
fallback to Dropdown is consistent with the prop contract; refer to ValueInput,
INPUT_TYPE_MAP, Dropdown, and ValueInput.propTypes when making the change.

---

Nitpick comments:
In `@src/components/mui/__tests__/GridFilter.test.jsx`:
- Line 73: The test is using a brittle screen.getByRole("button") which will
break if GridFilter / FilterButton renders additional buttons; update the
assertion in GridFilter.test.jsx to scope the role lookup by accessible name
(e.g., use screen.getByRole("button", { name: "grid_filter.open_filters" }) or
the actual i18n label used by FilterButton) so the test targets the intended
FilterButton element in the GridFilter component; ensure you reference the same
accessible name used in FilterButton/GridFilter to keep the test stable as UI
adds other buttons.

In `@src/i18n/en.json`:
- Around line 143-144: The two i18n keys "filter_by" and "following" include
trailing/leading spaces and are being concatenated; replace them with a single
templated key (e.g., "filter_by_following": "Filter by {criteria} one of the
following:") and remove the old "filter_by" and "following" keys, then update
any call sites that currently concatenate "filter_by" + criteria + "following"
(look for uses of keys "filter_by" and "following") to instead call the
translation for "filter_by_following" and pass the criteria as the {criteria}
interpolation parameter so translators can reorder words safely.

In `@webpack.common.js`:
- Around line 90-92: The three webpack entries 'components/mui/dropdown',
'components/mui/toggle-buttons', and 'components/mui/round-button' are safe to
keep as-is because resolve.extensions includes '.jsx' and webpack will use the
default 'index' main-file lookup; no change is required. If you prefer explicit
consistency, update those entry values to point to the actual files (e.g.
'./src/components/mui/Dropdown/index.jsx',
'./src/components/mui/ToggleButtons/index.jsx',
'./src/components/mui/RoundButton/index.jsx') and note that
'components/mui/grid-filter' should point to
'./src/components/mui/GridFilter/index.js' to reflect its .js index.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: fa84d986-2e78-44b1-8f7d-7464ee122ea7

📥 Commits

Reviewing files that changed from the base of the PR and between baf678e and f9c57c2.

⛔ Files ignored due to path filters (1)
  • yarn.lock is excluded by !**/yarn.lock, !**/*.lock
📒 Files selected for processing (21)
  • package.json
  • src/components/index.js
  • src/components/mui/Dropdown/index.jsx
  • src/components/mui/GridFilter/GridFilter.jsx
  • src/components/mui/GridFilter/actions/filter-actions.js
  • src/components/mui/GridFilter/components/Filter.jsx
  • src/components/mui/GridFilter/components/FilterButton.jsx
  • src/components/mui/GridFilter/components/ValueInput/index.jsx
  • src/components/mui/GridFilter/hooks/useGridFilter.jsx
  • src/components/mui/GridFilter/index.js
  • src/components/mui/GridFilter/readme.md
  • src/components/mui/GridFilter/reducers/all-filters-reducer.js
  • src/components/mui/GridFilter/reducers/filter-reducer.js
  • src/components/mui/GridFilter/utils.js
  • src/components/mui/RoundButton/index.jsx
  • src/components/mui/ToggleButtons/index.jsx
  • src/components/mui/__tests__/Dropdown.test.jsx
  • src/components/mui/__tests__/GridFilter.test.jsx
  • src/components/mui/__tests__/ToggleButtons.test.jsx
  • src/i18n/en.json
  • webpack.common.js
✅ Files skipped from review due to trivial changes (2)
  • src/components/mui/GridFilter/index.js
  • src/components/mui/GridFilter/utils.js

Comment thread src/components/mui/GridFilter/components/Filter.jsx
Comment thread src/components/mui/GridFilter/reducers/filter-reducer.js
@santipalenque
Copy link
Copy Markdown
Contributor Author

done @smarcet

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants