fix: Introduce zustand state to FacetsPanel to improve maintainability #4769

skynetigor · 2025-05-12T14:28:09Z

Closes #4560

📑 Description

Fix [🐛 Bug]: Incidents page load with resolved ones, ignoring filters #4560
Introduce state management
Add possibility to create more facet types in the future (datepicker, range selection, etc)
Hand over checkbox-like facet responsibility on Facet component (maybe renamed in future)
Add E2E to ensure default state for incidents page does not get broken again

✅ Checks

My pull request adheres to the code style of this project
My code requires changes to the documentation
I have updated the documentation as required
All the tests have passed

ℹ Additional Information

…and Facet components

vercel · 2025-05-12T14:28:13Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
keep	❌ Failed (Inspect)			May 19, 2025 10:05am

…ignoring-filters

…ity in Facet components

…ial loading verification

…tatus

codecov · 2025-05-13T11:43:52Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 46.16%. Comparing base (7d126de) to head (315f887).
Report is 14 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #4769      +/-   ##
==========================================
+ Coverage   46.14%   46.16%   +0.01%     
==========================================
  Files         165      165              
  Lines       17428    17439      +11     
==========================================
+ Hits         8043     8050       +7     
- Misses       9385     9389       +4

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

…nt tests

…ignoring-filters

…lters' of https://github.com/keephq/keep into 4560-Incidents-page-load-with-resolved-ones-ignoring-filters

…ling

…ignoring-filters

Kiryous · 2025-05-14T16:00:31Z

@greptileai

greptile-apps

PR Summary

This PR introduces Zustand state management to improve FacetsPanel maintainability and fixes an issue where resolved incidents were incorrectly displayed despite filters.

Switched from uncheckedByDefaultOptionValues to checkedByDefaultOptionValues in /keep-ui/features/filter/models.tsx to fix default filter behavior
Added new Zustand store in /keep-ui/features/filter/store/create-facets-store.ts for centralized facet state management
Implemented useFacetsConfig hook in /keep-ui/features/filter/store/use-facets-config.tsx for ID-based facet configuration
Added query handling logic in /keep-ui/features/filter/store/use-queries-handler.ts for building CEL expressions
Added E2E tests in /tests/e2e_tests/incidents_alerts_tests/test_filtering_sort_search_on_incidents.py to verify default filter behavior

_{17 file(s) reviewed, 20 comment(s)}
_{Edit PR Review Bot Settings | Greptile}

keep-ui/features/filter/facet-panel-server-side.tsx

greptile-apps · 2025-05-14T16:01:16Z

keep-ui/features/filter/build-cel.ts

+      const atLeastOneUnselected =
+        allFacetOptions.length !== facetsState[facet.id].size;


logic: This logic assumes facetsState[facet.id] is always a Set. Need null check to prevent runtime errors.

Suggested change

const atLeastOneUnselected =

allFacetOptions.length !== facetsState[facet.id].size;

const atLeastOneUnselected =

allFacetOptions.length !== facetsState[facet.id]?.size;

greptile-apps · 2025-05-14T16:01:17Z

keep-ui/features/filter/build-cel.ts

  // In case facetOptions are not loaded yet, we need to create placeholder wich will be
-  // populated based on uncheckedByDefaultOptionValues
+  // populated based on checkedByDefaultOptionValues


syntax: Typo in comment: 'wich' should be 'which'

Suggested change

// In case facetOptions are not loaded yet, we need to create placeholder wich will be

// populated based on uncheckedByDefaultOptionValues

// populated based on checkedByDefaultOptionValues

// In case facetOptions are not loaded yet, we need to create placeholder which will be

// populated based on checkedByDefaultOptionValues

greptile-apps · 2025-05-14T16:01:44Z

keep-ui/features/filter/facets-panel.tsx

  const facetOptionsRef = useRef<any>(facetOptions);
  facetOptionsRef.current = facetOptions;


style: facetOptionsRef type should be explicitly defined as Record<string, FacetOptionDto[]> instead of any

Suggested change

const facetOptionsRef = useRef<any>(facetOptions);

facetOptionsRef.current = facetOptions;

const facetOptionsRef = useRef<{ [key: string]: FacetOptionDto[] }>(facetOptions);

facetOptionsRef.current = facetOptions;

keep-ui/features/filter/facets-panel.tsx

keep-ui/features/filter/store/use-facets-loading-state-handler.ts

keep-ui/features/filter/store/use-store.tsx

keep-ui/features/filter/store/use-queries-handler.ts

Kiryous

Great effort! Approving, but please consider adding type safety suggested by greptileai and removing useless useEffects, if possible

Kiryous · 2025-05-14T13:02:00Z

keep-ui/features/filter/facets-panel.tsx


+  useEffect(


why do we need this effects to sync state? may we just store areFacetOptionsLoading in the store?

let's use this refactor opportunity to eliminate them?

…ignoring-filters

Kiryous · 2025-05-15T07:24:09Z

For the context: let's merge when @skynetigor back from OOO

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com> Signed-off-by: Ihor Panasiuk <[email protected]>

…ignoring-filters

skynetigor added 3 commits May 11, 2025 22:40

Refactor facets

4a35b59

add zustand store for facets panel

3847487

refactor: improve facet handling and state management in FacetsPanel …

91ef44a

…and Facet components

Merge branch 'main' into 4560-Incidents-page-load-with-resolved-ones-…

1459c52

…ignoring-filters

vercel bot deployed to Preview May 12, 2025 15:05 View deployment

refactor: streamline facet selection logic and improve button visibil…

c929232

…ity in Facet components

vercel bot deployed to Preview May 12, 2025 15:26 View deployment

skynetigor added 3 commits May 12, 2025 18:12

test: enhance incident tests with additional status handling and init…

df88bc7

…ial loading verification

fix: update default incident status options to include acknowledged s…

6272cca

…tatus

refactor

d977096

vercel bot deployed to Preview May 13, 2025 11:47 View deployment

Fixes

2ed4419

vercel bot deployed to Preview May 13, 2025 13:43 View deployment

skynetigor added 5 commits May 13, 2025 16:33

test: update filtering logic to include acknowledged status in incide…

14ac953

…nt tests

Merge branch 'main' into 4560-Incidents-page-load-with-resolved-ones-…

c2574bc

…ignoring-filters

Merge branch 'main' into 4560-Incidents-page-load-with-resolved-ones-…

aed9611

…ignoring-filters

Merge branch '4560-Incidents-page-load-with-resolved-ones-ignoring-fi…

4c028c3

…lters' of https://github.com/keephq/keep into 4560-Incidents-page-load-with-resolved-ones-ignoring-filters

feat: add useFacetsConfig hook for improved facets configuration hand…

5e455f2

…ling

vercel bot deployed to Preview May 13, 2025 18:29 View deployment

refactor

5560976

vercel bot deployed to Preview May 13, 2025 18:39 View deployment

skynetigor marked this pull request as ready for review May 14, 2025 07:34

dosubot bot added the size:XL This PR changes 500-999 lines, ignoring generated files. label May 14, 2025

Merge branch 'main' into 4560-Incidents-page-load-with-resolved-ones-…

9dff8d8

…ignoring-filters

dosubot bot added the Bug Something isn't working label May 14, 2025

Merge branch 'main' into 4560-Incidents-page-load-with-resolved-ones-…

7270d5e

…ignoring-filters

vercel bot deployed to Preview May 14, 2025 15:34 View deployment

greptile-apps bot reviewed May 14, 2025

View reviewed changes

Kiryous previously approved these changes May 14, 2025

View reviewed changes

Merge branch 'main' into 4560-Incidents-page-load-with-resolved-ones-…

8d199f7

…ignoring-filters

skynetigor added 2 commits May 19, 2025 11:49

refactor: remove unused buildCel function and related tests

b0ec408

refactor: improve type safety in facets panel and store

e055304

skynetigor dismissed Kiryous’s stale review via e055304 May 19, 2025 09:49

dosubot bot added size:XXL This PR changes 1000+ lines, ignoring generated files. and removed size:XL This PR changes 500-999 lines, ignoring generated files. labels May 19, 2025

skynetigor and others added 2 commits May 19, 2025 11:52

Apply suggestions from code review

a148ae4

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com> Signed-off-by: Ihor Panasiuk <[email protected]>

Merge branch 'main' into 4560-Incidents-page-load-with-resolved-ones-…

315f887

…ignoring-filters

vercel bot had a problem deploying to Preview May 19, 2025 10:05 Failure

skynetigor closed this May 19, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix: Introduce zustand state to FacetsPanel to improve maintainability #4769

fix: Introduce zustand state to FacetsPanel to improve maintainability #4769

Uh oh!

skynetigor commented May 12, 2025 •

edited

Loading

Uh oh!

vercel bot commented May 12, 2025 •

edited

Loading

Uh oh!

codecov bot commented May 13, 2025 •

edited

Loading

Uh oh!

Kiryous commented May 14, 2025

Uh oh!

greptile-apps bot left a comment

Uh oh!

Uh oh!

greptile-apps bot May 14, 2025

Uh oh!

greptile-apps bot May 14, 2025

Uh oh!

greptile-apps bot May 14, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Kiryous left a comment

Uh oh!

Kiryous May 14, 2025

Uh oh!

Kiryous commented May 15, 2025

Uh oh!

Uh oh!

		const atLeastOneUnselected =
		allFacetOptions.length !== facetsState[facet.id].size;

		const facetOptionsRef = useRef<any>(facetOptions);
		facetOptionsRef.current = facetOptions;

fix: Introduce zustand state to FacetsPanel to improve maintainability #4769

fix: Introduce zustand state to FacetsPanel to improve maintainability #4769

Uh oh!

Conversation

skynetigor commented May 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📑 Description

✅ Checks

ℹ Additional Information

Uh oh!

vercel bot commented May 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov bot commented May 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Kiryous commented May 14, 2025

Uh oh!

greptile-apps bot left a comment

Choose a reason for hiding this comment

PR Summary

Uh oh!

Uh oh!

greptile-apps bot May 14, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot May 14, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot May 14, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Kiryous left a comment

Choose a reason for hiding this comment

Uh oh!

Kiryous May 14, 2025

Choose a reason for hiding this comment

Uh oh!

Kiryous commented May 15, 2025

Uh oh!

Uh oh!

skynetigor commented May 12, 2025 •

edited

Loading

vercel bot commented May 12, 2025 •

edited

Loading

codecov bot commented May 13, 2025 •

edited

Loading