Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(ui): don't use anti-pattern in CheckboxFilter #11739

Merged

Conversation

agilgur5
Copy link

@agilgur5 agilgur5 commented Sep 4, 2023

Fixes #11686 (comment)

Motivation

Modifications

  • move the ChekboxFilter logic to instead set the initial state to have all phases in the top-level component, CronWorkflowList, as I suggested in my review comment
  • refactor CheckboxFilter to a functional component as mentioned above

Verification

  1. Navigated to /cron-workflows
    1. Confirmed that its initial state is all checked.
    2. Confirmed that checking different phases changes the state.
    3. Confirmed in React DevTools that state and props change as expected.
  2. Navigated to /workflows and confirmed that it works as before and no behavior was changed.

See below screenshot of /cron-workflows with React DevTools open showing the CheckboxFilter props:

Screenshot 2023-09-04 at 1 16 19 AM

Future Work

This component may be possible to further simplify and optimize:

  1. Seems memoizable
  2. <React.Fragment> seems unnecessary
  3. Potentially could simplify some of the logic as well

I didn't change these as I wanted to keep this PR/diff relatively clean

- Per my review, 9cb3783 used an anti-pattern of setting a prop based on another prop
  - change this to instead set the initial state to have all phases in the top-level component, as I suggested in my comment
    - CronWorkflowsList now roughly matches how WorkflowsList [sets](https://github.com/argoproj/argo-workflows/blob/8e01696a9c63f25b3660ed479c6f7a57bb61d82d/ui/src/app/workflows/components/workflows-list/workflows-list.tsx#L120) its initial state (it _also_ uses `localStorage` & query params though)

- refactor CheckboxFilter to be a functional component
  - this makes the anti-pattern more obvious (as it would be modifying arguments), as I mentioned in my comment

Signed-off-by: Anton Gilgur <agilgur5@gmail.com>
@terrytangyuan terrytangyuan merged commit 48697a1 into argoproj:master Sep 5, 2023
@agilgur5 agilgur5 deleted the fix-checkbox-filter-anti-pattern branch September 5, 2023 19:27
qudtjs0753 pushed a commit to qudtjs0753/argo-workflows that referenced this pull request Sep 6, 2023
dpadhiar pushed a commit to dpadhiar/argo-workflows that referenced this pull request May 9, 2024
Signed-off-by: Dillen Padhiar <dillen_padhiar@intuit.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants