Skip to content

feat: move tax types grid to mui#931

Open
priscila-moneo wants to merge 2 commits into
masterfrom
feature/move-tax-types-grid-mui
Open

feat: move tax types grid to mui#931
priscila-moneo wants to merge 2 commits into
masterfrom
feature/move-tax-types-grid-mui

Conversation

@priscila-moneo
Copy link
Copy Markdown

@priscila-moneo priscila-moneo commented May 11, 2026

ref: https://app.clickup.com/t/86b9tggfp

Summary by CodeRabbit

  • New Features

    • Improved tax type search with term, pagination and sorting.
    • Create/edit now use an in-place modal dialog.
  • Refactor

    • Migrated tax type forms and list to modern UI components and hooks.
    • Simplified navigation by consolidating tax type views.
    • Enhanced list behaviors: server-driven paging, sorting, and filtering.

@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented May 11, 2026

Warning

Rate limit exceeded

@priscila-moneo has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 50 minutes and 26 seconds before requesting another review.

You’ve run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 940ac180-41a8-4b3e-9410-406459ea8f4e

📥 Commits

Reviewing files that changed from the base of the PR and between e8c64c4 and 9e52a0a.

📒 Files selected for processing (6)
  • src/actions/tax-actions.js
  • src/components/forms/tax-type-form.js
  • src/layouts/summit-id-layout.js
  • src/layouts/tax-type-layout.js
  • src/pages/taxes/popup/tax-type-popup.js
  • src/pages/taxes/tax-type-list-page.js
📝 Walkthrough

Walkthrough

This PR converts tax-type management from page-based navigation to a modal workflow: list and form components are rewritten as hooks with MUI, a new TaxTypePopup dialog wraps the form, actions and reducer gain search/pagination/sort support, routing is updated to load the refactored list page, and legacy tax-type layout/edit page files are removed.

Changes

Tax Type Management Modal Refactor

Layer / File(s) Summary
Actions: search/pagination/sort and save flows
src/actions/tax-actions.js
getTaxTypes(term = "", page = DEFAULT_CURRENT_PAGE, perPage = DEFAULT_PER_PAGE, order = "name", orderDir = DEFAULT_ORDER_DIR) rewritten to validate ordering fields, escape term, conditionally append filter[], build dynamic request params (page/per_page and order ordering format), and include request metadata. Imports updated to add escapeFilterValue, pagination defaults, and showSuccessMessage. resetTaxTypeForm signature simplified to (dispatch). saveTaxType update/create branches now dispatch success via showSuccessMessage and return the resolved payload.
Reducer: list state extended
src/reducers/taxes/tax-type-list-reducer.js
DEFAULT_STATE expanded with term, currentPage, lastPage, perPage. REQUEST_TAX_TYPES now sets currentPage from request page and spreads remaining payload fields; RECEIVE_TAX_TYPES reads total, current_page, last_page from payload.response and updates taxTypes, totalTaxTypes, currentPage, and lastPage.
Form component → hooks + MUI
src/components/forms/tax-type-form.js
Class-based TaxTypeForm converted to a functional component using useState, useEffect, useCallback. Props→state sync handled with effects (including shallowEqual guard for ticket_types) and scrollToError. Event handlers (handleChange, handleSubmit, ticket link/unlink) rewritten as hook callbacks; some prior type-specific conversions (checkbox/datetime) removed. UI rebuilt with MUI (TextField, Box, Stack, Grid2) while preserving hidden id and ticket list configuration.
Modal wrapper: TaxTypePopup
src/pages/taxes/popup/tax-type-popup.js
New TaxTypePopup MUI Dialog component added; title toggles add/edit by entity?.id. Embeds TaxTypeForm and wires open, onClose, submit/link/unlink handlers. Includes propTypes and defaultProps.errors = {}.
List page → hooks + modal workflow
src/pages/taxes/tax-type-list-page.js
TaxTypeListPage migrated from class to functional hooks and MUI. Data loading now driven by explicit handlers calling getTaxTypes(term, page, perPage, order, orderDir) with an initial useEffect on currentSummit?.id. Add/edit flows moved to TaxTypePopup modal (create: resetTaxTypeForm() then open; edit: getTaxType(id) then open). saveTaxType refreshes list and closes modal. Deletes delegated to MuiTable onDelete callback (no sweetalert2 confirmation). Table configured with MuiTable pagination props and column headers.
Routing/layout cleanup
src/layouts/summit-id-layout.js, removed src/layouts/tax-type-layout.js, removed src/pages/taxes/edit-tax-type-page.js
summit-id-layout.js lazy-loads the refactored TaxTypeListPage for /tax-types. The legacy TaxTypeLayout and EditTaxTypePage were deleted as modal-based flows replace route-based edit pages.

Sequence Diagram

sequenceDiagram
    actor User
    participant List as TaxTypeListPage
    participant Actions as ReduxActions
    participant Server as API
    participant Popup as TaxTypePopup
    participant Form as TaxTypeForm

    User->>List: load page / interact (search/sort/paginate)
    List->>Actions: getTaxTypes(term, page, perPage, order, orderDir)
    Actions->>Server: fetch tax types (filters, pagination)
    Server-->>Actions: paginated response
    Actions-->>List: update reducer (taxTypes, total, current_page, last_page)

    User->>List: click Add
    List->>Actions: resetTaxTypeForm()
    List->>Popup: open modal (empty entity)

    User->>Form: enter data
    Form->>Actions: saveTaxType(entity)
    Actions->>Server: create/update tax type
    Server-->>Actions: saved entity
    Actions-->>List: refresh via getTaxTypes(...)
    List->>Popup: close modal
Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~50 minutes

Suggested reviewers

  • smarcet
  • tomrndom
  • martinquiroga-exo

Poem

🐰
A popup sprung where routes once lay,
Hooks hopped in and led the way,
Search and pages now leap and play,
Tickets linked with nimble sway,
A rabbit cheers: tax types, hooray!

🚥 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 'feat: move tax types grid to mui' accurately describes the main change—migrating the tax types UI components from Bootstrap to Material-UI (MUI) components across multiple files.
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 unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feature/move-tax-types-grid-mui

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

@santipalenque santipalenque left a comment

Choose a reason for hiding this comment

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

overall looks great, just a couple of requests

Comment thread src/actions/tax-actions.js Outdated
`${window.API_BASE_URL}/api/v1/summits/${currentSummit.id}/tax-types`,
authErrorHandler,
{ order, orderDir }
{ order: normalizedOrder, orderDir, page, perPage, term }
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

the order stored in reducer should be order not normalizedOrder, the latter is just to send to API

Comment thread src/components/forms/tax-type-form.js Outdated
}) => {
const [entity, setEntity] = useState({ ...entityProp });
const [errors, setErrors] = useState(errorsProp);
const prevEntityRef = useRef(entityProp);
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

no need for this, you can accomplish the same with just an useEffect and putting the entity in dependencies

Comment thread src/layouts/tax-type-layout.js Outdated
}
}
<Switch>
<Route strict exact path={match.url} component={TaxTypeListPage} />
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

if we are only having one route then there is no need for a tax-type-layout, we can just move this route to the parent layout and get rid of it

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

🧹 Nitpick comments (2)
src/pages/taxes/tax-type-list-page.js (1)

57-61: 💤 Low value

Consider keying the effect on currentSummit?.id.

Depending on currentSummit re-runs the fetch whenever any field of the summit object changes reference. Since the only thing this effect cares about is the active summit identity, using [currentSummit?.id] is cheaper and matches the guard on line 58.

🤖 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/pages/taxes/tax-type-list-page.js` around lines 57 - 61, The useEffect
currently depends on the entire currentSummit object causing unnecessary
re-runs; change its dependency array to depend only on currentSummit?.id and
keep the existing guard so the effect only triggers when the summit identity
changes—update the useEffect dependency from [currentSummit] to
[currentSummit?.id] for the effect that calls getTaxTypes(term, currentPage,
perPage, order, orderDir).
src/actions/tax-actions.js (1)

82-85: 💤 Low value

Dead null checks on guaranteed non-null values.

normalizedOrder is always assigned to either order or "name" via the ternary on lines 59–61, and orderDir has a default value (DEFAULT_ORDER_DIR). Both will never be null, so the if (normalizedOrder != null && orderDir != null) guard is dead code. You can drop the conditional and always set params.order.

🤖 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/actions/tax-actions.js` around lines 82 - 85, The null-check guard around
setting params.order is dead because normalizedOrder is always assigned (either
order or "name") and orderDir defaults to DEFAULT_ORDER_DIR; remove the
surrounding if and always assign params.order by computing orderDirSign (using
orderDir === 1 ? "" : "-") and setting params.order =
`${orderDirSign}${normalizedOrder}` within the same block (refer to
normalizedOrder, orderDir, DEFAULT_ORDER_DIR, orderDirSign, and params.order).
🤖 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/forms/tax-type-form.js`:
- Around line 23-46: The useEffect in TaxTypeForm currently depends on local
state (entity, errors) causing cleared local errors to be clobbered by
errorsProp; split into two effects: 1) a useEffect that runs when errorsProp
changes to call scrollToError(errorsProp) and, if needed, setErrors(errorsProp)
only when shallowEqual(errors, errorsProp) is false (depend only on errorsProp
and errorsProp reference change), and 2) a useEffect that syncs entity from
entityProp (compare entityProp.id to entity.id and call
setEntity({...entityProp}) when entityProp.id changes) that depends only on
entityProp; remove entity and errors from the dependency array of the original
combined effect so local handleChange updates to errors are not overwritten.

In `@src/pages/taxes/tax-type-list-page.js`:
- Around line 92-96: The modal is being closed in the finally block of
handleSave which hides validation errors on failure; instead, remove
setShowTaxTypeModal(false) from the finally and call it only on successful save
inside the promise resolution (the .then chain after saveTaxType), e.g., after
getTaxTypes completes, call setShowTaxTypeModal(false); leave rejections
untouched so currentTaxTypeErrors (and any error UI) remain visible when
saveTaxType rejects.

---

Nitpick comments:
In `@src/actions/tax-actions.js`:
- Around line 82-85: The null-check guard around setting params.order is dead
because normalizedOrder is always assigned (either order or "name") and orderDir
defaults to DEFAULT_ORDER_DIR; remove the surrounding if and always assign
params.order by computing orderDirSign (using orderDir === 1 ? "" : "-") and
setting params.order = `${orderDirSign}${normalizedOrder}` within the same block
(refer to normalizedOrder, orderDir, DEFAULT_ORDER_DIR, orderDirSign, and
params.order).

In `@src/pages/taxes/tax-type-list-page.js`:
- Around line 57-61: The useEffect currently depends on the entire currentSummit
object causing unnecessary re-runs; change its dependency array to depend only
on currentSummit?.id and keep the existing guard so the effect only triggers
when the summit identity changes—update the useEffect dependency from
[currentSummit] to [currentSummit?.id] for the effect that calls
getTaxTypes(term, currentPage, perPage, order, orderDir).
🪄 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: 9640f65d-8b34-4dd1-bd06-09cb030783d6

📥 Commits

Reviewing files that changed from the base of the PR and between 2a07f4e and 552e588.

📒 Files selected for processing (8)
  • src/actions/tax-actions.js
  • src/components/forms/tax-type-form.js
  • src/layouts/summit-id-layout.js
  • src/layouts/tax-type-layout.js
  • src/pages/taxes/edit-tax-type-page.js
  • src/pages/taxes/popup/tax-type-popup.js
  • src/pages/taxes/tax-type-list-page.js
  • src/reducers/taxes/tax-type-list-reducer.js
💤 Files with no reviewable changes (2)
  • src/pages/taxes/edit-tax-type-page.js
  • src/layouts/tax-type-layout.js

Comment thread src/components/forms/tax-type-form.js Outdated
Comment thread src/pages/taxes/tax-type-list-page.js
Comment thread src/layouts/summit-id-layout.js Outdated
path={`${match.url}/tax-types`}
render={(routeProps) => (
<>
<Breadcrumb
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

this is the onlyu route, the breadcrumb can go in the Page component

Comment thread src/layouts/summit-id-layout.js Outdated
const RegFeedMetadataLayout = React.lazy(() =>
import("./reg-feed-metadata-layout")
);
const RestrictedTaxTypeListPage = Restrict(TaxTypeListPage, "taxes");
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

you can add the Restrict in the page component export: example

Comment thread src/components/forms/tax-type-form.js Outdated
newEntity[id] = value;
this.setState({ entity: newEntity, errors: newErrors });
}
if (ev.target.type === "checkbox") {
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

doesn't look like we have any checkboxes or datetime inputs in this form, do we need this ?

@priscila-moneo priscila-moneo force-pushed the feature/move-tax-types-grid-mui branch from 552e588 to e8c64c4 Compare May 13, 2026 19:56
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: 1

🤖 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/forms/tax-type-form.js`:
- Around line 128-184: The form is a real <form> but Enter triggers native
submit because handleSubmit is only wired to the Button onClick; add an onSubmit
prop to the form element (the Box with component="form") that calls handleSubmit
and ensures it does event.preventDefault(), and then remove (or keep but no-op)
the Button's onClick to avoid duplicate handling; update the form wiring so
handleSubmit handles the submit event from the form (signature event => {
event.preventDefault(); ... }) and keep the Button as type="submit".
🪄 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: e5631419-7127-47c9-957b-cee70da10552

📥 Commits

Reviewing files that changed from the base of the PR and between 552e588 and e8c64c4.

📒 Files selected for processing (8)
  • src/actions/tax-actions.js
  • src/components/forms/tax-type-form.js
  • src/layouts/summit-id-layout.js
  • src/layouts/tax-type-layout.js
  • src/pages/taxes/edit-tax-type-page.js
  • src/pages/taxes/popup/tax-type-popup.js
  • src/pages/taxes/tax-type-list-page.js
  • src/reducers/taxes/tax-type-list-reducer.js
💤 Files with no reviewable changes (2)
  • src/pages/taxes/edit-tax-type-page.js
  • src/layouts/tax-type-layout.js
✅ Files skipped from review due to trivial changes (1)
  • src/reducers/taxes/tax-type-list-reducer.js
🚧 Files skipped from review as they are similar to previous changes (3)
  • src/pages/taxes/popup/tax-type-popup.js
  • src/actions/tax-actions.js
  • src/pages/taxes/tax-type-list-page.js

Comment thread src/components/forms/tax-type-form.js Outdated
Signed-off-by: Priscila Moneo <priscila_moneo@hotmail.com.ar>
@priscila-moneo priscila-moneo force-pushed the feature/move-tax-types-grid-mui branch from e8c64c4 to 9e52a0a Compare May 13, 2026 20:05
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