ECHOES-1454 Add emptyContent to FilterDropdownCategoryWithItems

[kimphanh]

Part of

---

Summary by Gitar

• Components:
  • Added emptyContent property to FilterDropdownCategoryWithItems for empty states
  • Created StyledEmptyContentWrapper and default message key filter.dropdown.emptyContent

_{This will update automatically on new commits.}

[netlify]

✅ Deploy Preview for echoes-react ready!

Name	Link
🔨 Latest commit	f44d3d2
🔍 Latest deploy log	https://app.netlify.com/projects/echoes-react/deploys/6a902cd79a5d320008316e13
😎 Deploy Preview	https://deploy-preview-759--echoes-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[hashicorp-vault-sonar-prod]

ECHOES-1454

[gitar-bot]

💡 Edge Case: Empty state after a search is blank or shows a misleading message

isEmptyItems is derived from the raw items, not from filteredItems, so the two search modes now behave inconsistently: with client-side search (isSearchable without onSearch), typing a query that matches nothing renders an empty list with no message at all (asserted by the new test), whereas with server-side search (onSearch updating items to []) the panel shows the category's emptyContent — e.g. "No milestones have been created yet" — even though milestones exist and only the query matched nothing. Consider deriving the empty state from filteredItems and/or rendering a distinct "no results for <query>" message when searchQuery is non-empty.

_{Was this helpful? React with 👍 / 👎}

[gitar-bot]

Code Review 👍 Approved with suggestions 1 resolved / 2 findings

Adds emptyContent to FilterDropdownCategoryWithItems to support empty states, addressing the i18n key default message mismatch. Consider deriving the empty state from filteredItems so client-side and server-side search modes handle no-results states consistently.

💡 Edge Case: Empty state after a search is blank or shows a misleading message

📄 src/components/filters/FilterDropdownRightPanel.tsx:75 📄 src/components/filters/FilterDropdownRightPanel.tsx:79-84 📄 src/components/filters/FilterDropdownRightPanel.tsx:167-178 📄 src/components/filters/tests/FilterDropdown-test.tsx:264-278

isEmptyItems is derived from the raw items, not from filteredItems, so the two search modes now behave inconsistently: with client-side search (isSearchable without onSearch), typing a query that matches nothing renders an empty list with no message at all (asserted by the new test), whereas with server-side search (onSearch updating items to []) the panel shows the category's emptyContent — e.g. "No milestones have been created yet" — even though milestones exist and only the query matched nothing. Consider deriving the empty state from filteredItems and/or rendering a distinct "no results for <query>" message when searchQuery is non-empty.

✅ 1 resolved

✅ Bug: i18n key default message disagrees with formatMessage default

📄 i18n/keys.json:34-37 📄 src/components/filters/FilterDropdownRightPanel.tsx:170-176 📄 src/components/filters/FilterDropdownTypes.ts:62-67
i18n/keys.json declares filter.dropdown.emptyContent with defaultMessage: "No filter option available", while the formatMessage call in FilterDropdownRightPanel uses defaultMessage: 'Empty content'. keys.json is generated by yarn build-intl-keys (formatjs extract) and yarn intl-keys-check (part of validate-ci) fails when the committed file differs from the extraction, so this PR breaks CI. Pick one wording: either the placeholder-looking 'Empty content' in the source is wrong and should become 'No filter option available' (also updating the @defaultValue TSDoc on emptyContent and the two test assertions on 'Empty content'), or regenerate keys.json.

🤖 Prompt for agents

Code Review: Adds `emptyContent` to `FilterDropdownCategoryWithItems` to support empty states, addressing the i18n key default message mismatch. Consider deriving the empty state from `filteredItems` so client-side and server-side search modes handle no-results states consistently.

1. 💡 Edge Case: Empty state after a search is blank or shows a misleading message
   Files: src/components/filters/FilterDropdownRightPanel.tsx:75, src/components/filters/FilterDropdownRightPanel.tsx:79-84, src/components/filters/FilterDropdownRightPanel.tsx:167-178, src/components/filters/__tests__/FilterDropdown-test.tsx:264-278

   `isEmptyItems` is derived from the raw `items`, not from `filteredItems`, so the two search modes now behave inconsistently: with client-side search (`isSearchable` without `onSearch`), typing a query that matches nothing renders an empty list with no message at all (asserted by the new test), whereas with server-side search (`onSearch` updating `items` to `[]`) the panel shows the category's `emptyContent` — e.g. "No milestones have been created yet" — even though milestones exist and only the query matched nothing. Consider deriving the empty state from `filteredItems` and/or rendering a distinct "no results for <query>" message when `searchQuery` is non-empty.

Implementation Status ✅ 1 of 1 objectives covered

✅ ECHOES-1454 - 1 of 1 objectives covered

This PR adds the emptyContent property to FilterDropdownCategoryWithItems to display when items is an empty array.

✅ 1 covered here

• ✅ Add emptyContent property to FilterDropdownCategoryWithItems to display when items is an empty array

Options

Auto-apply is off → Gitar will not commit updates to this branch.
Display: compact → Showing less information.

Comment with these commands to change the behavior for this request:

Auto-apply	Compact
gitar auto-apply:on	gitar display:verbose

_{Was this helpful? React with 👍 / 👎 | Gitar}

[sonarqube-next]

Quality Gate passed

Issues
0 New issues
0 Fixed issues
0 Accepted issues

Measures
0 Security Hotspots
0 Dependency risks
100.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube