FWF-5754 : [Modified] Table update to previous when search clears

[Bonymol-aot]

User description

📝 Pull Request Summary

Description:

• Advanced search back to previous when user clear the search
• Breadcrumb style fix

Related Jira Ticket:
https://aottech.atlassian.net/browse/FWF-5754

Type of Change:

• ✨ Feature
• 🐞 Bug Fix
• ♻️ Refactor
• 🧹 Code Cleanup
• 🧪 Test Addition / Update
• 📦 Dependency Update
• 📘 Documentation Update
• 🚀 Deployment / Config / Security Updates

---

🧩 Microfrontends Affected

Please select all microfrontends or modules that are part of this change:

• forms-flow-admin
• forms-flow-components
• forms-flow-integration
• forms-flow-nav
• forms-flow-review
• forms-flow-service
• forms-flow-submissions
• forms-flow-theme
• scripts
• Others (please specify below)

Details (if Others selected):

---

🧠 Summary of Changes

---

🧪 Testing Details

Testing Performed:

Screenshots (if applicable):

---

✅ Checklist

• Code builds successfully without lint or type errors
• Unit tests added or updated
• Integration or end-to-end tests validated
• UI verified
• Documentation updated (README / Confluence / UI Docs)
• No sensitive information (keys, passwords, secrets) committed
• I have updated the CHANGELOG with relevant details
• I have given a clear and meaningful PR title and description
• I have verified cross-repo dependencies (if any)
• I have confirmed backward compatibility with previous releases
• Verified changes across all selected microfrontends

---

👥 Reviewer Notes

---

PR Type

Bug fix, Enhancement

---

Description

• Clear filters when search input emptied

• Refresh table to first page on clear

• Reset stored search field values

• Breadcrumb label styling refinement

---

Diagram Walkthrough

flowchart LR
  UI["Search input cleared"] --> Effect["useEffect detects empty search"]
  Effect --> Clear["Clear field filters"]
  Effect --> ResetStore["Dispatch clear search values"]
  Effect --> PageOne["Set page to 1"]
  PageOne --> Refresh["Table refreshes to previous state"]
  Style["Breadcrumb label style"] -- "remove display inline-block" --> Ellipsis["Maintain single-line ellipsis"]

Loading

File Walkthrough

	Relevant files
Bug fix	SubmissionListing.tsx Handle manual search clear and reset table                              forms-flow-submissions/src/Routes/SubmissionListing.tsx Add useEffect to detect cleared search. Reset field filters and flags when cleared. Dispatch actions to clear search and page to 1. Depend on selected key, text, and applied flag. +11/-0
Enhancement	_breadCrumbs.scss Breadcrumb label styling adjustment                                            forms-flow-theme/scss/v8-scss/_breadCrumbs.scss Remove display property from breadcrumb label. Preserve ellipsis overflow styling. +0/-1

---

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[github-actions]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Effect Dependencies The useEffect that clears filters when search is cleared does not include 'dispatch' in its dependency array and relies on 'filtersApplied' which it also updates; verify no stale closures or missed updates occur, and consider including 'dispatch' for completeness or wrapping actions in useCallback. useEffect(() => { const isSearchCleared = (searchText || "").trim() === ""; if (isSearchCleared && filtersApplied) { setFieldFilters({}); dispatch(clearSearchFieldValues()); dispatch(setAnalyzeSubmissionPage(1)); setFiltersApplied(false); } }, [selectedSearchFieldKey, searchText, filtersApplied]); // Use the current submissionFields state for calculation UX Reset Scope Clearing search resets page and wipes all field filters; confirm this should not also respect other active filters or selected field keys, and ensure it doesn’t unintentionally clear non-search filters. const isSearchCleared = (searchText || "").trim() === ""; if (isSearchCleared && filtersApplied) { setFieldFilters({}); dispatch(clearSearchFieldValues()); dispatch(setAnalyzeSubmissionPage(1)); setFiltersApplied(false); } }, [selectedSearchFieldKey, searchText, filtersApplied]); Layout Regression Removing 'display: inline-block' from '.breadcrumb-item-label' could affect truncation/alignment in flex/inline contexts; validate across breakpoints and RTL to ensure ellipsis still renders correctly. .breadcrumb-item-label { max-width: 450px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;

[github-actions]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
General	Ensure ellipsis rendering Without display: inline-block or block, text-overflow: ellipsis may not render consistently across browsers. Restore an explicit display to ensure truncation works reliably. forms-flow-theme/scss/v8-scss/_breadCrumbs.scss [120-124] .breadcrumb-item-label { + display: inline-block; max-width: 450px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; +} Suggestion importance[1-10]: 7 __ Why: Reintroducing display: inline-block can be important for reliable text-overflow: ellipsis behavior across browsers; it directly addresses a change in the PR and improves robustness.	Medium
	Prevent redundant state updates Guard against redundant state updates when filtersApplied is already false to prevent unnecessary renders. Also short-circuit early if searchText is non-empty to minimize effect work. forms-flow-submissions/src/Routes/SubmissionListing.tsx [204-212] useEffect(() => { - const isSearchCleared = (searchText || "").trim() === ""; - if (isSearchCleared && filtersApplied) { - setFieldFilters({}); - dispatch(clearSearchFieldValues()); - dispatch(setAnalyzeSubmissionPage(1)); - setFiltersApplied(false); - } -}, [selectedSearchFieldKey, searchText, filtersApplied]); + const text = (searchText || "").trim(); + if (text !== "" || !filtersApplied) return; + setFieldFilters({}); + dispatch(clearSearchFieldValues()); + dispatch(setAnalyzeSubmissionPage(1)); + setFiltersApplied(false); +}, [selectedSearchFieldKey, searchText, filtersApplied, dispatch]); Suggestion importance[1-10]: 5 __ Why: The early return slightly simplifies logic and avoids unnecessary state updates, but the existing guard if (isSearchCleared && filtersApplied) already prevents redundant updates in most cases; improvement is minor.	Low
Possible issue	Include missing dependency Add dispatch to the dependency array to avoid stale closure issues where updates or re-renders use an outdated dispatch reference. This ensures the effect remains consistent with React Hooks rules and current props/state. forms-flow-submissions/src/Routes/SubmissionListing.tsx [204-212] useEffect(() => { const isSearchCleared = (searchText || "").trim() === ""; if (isSearchCleared && filtersApplied) { setFieldFilters({}); dispatch(clearSearchFieldValues()); dispatch(setAnalyzeSubmissionPage(1)); setFiltersApplied(false); } -}, [selectedSearchFieldKey, searchText, filtersApplied]); +}, [selectedSearchFieldKey, searchText, filtersApplied, dispatch]); Suggestion importance[1-10]: 6 __ Why: Adding dispatch to the effect dependencies is a reasonable adherence to Hooks rules and avoids potential stale references, though Redux dispatch is typically stable so the impact is moderate.	Low