feat: enhance clear search functionality in table filter component

[mertilginoglu]

Added a clear search button to the input field in the table filter component, improving user experience.

Motivation

Previously, users had to manually delete text to clear the search filter in paginated tables (#800). This was inefficient and frustrating. This change adds a clear button (X icon) that appears when there is text in the search input field, allowing users to quickly reset their search with a single click.

Description

Added a clear search button to the TableFilterPaginatedComponent that:

• Appears as an X icon button positioned on the right side of the search input field
• Only displays when the search input contains text
• Clears both the local search term and the pagination service's search term when clicked

Testing Instructions

Flow:

1. Go to Helios

2. Navigate to a page that uses the paginated table filter component (e.g., Pull Requests page or Environments page)

3. Click on the search input field in the table filter

4. Type some text to filter the table (e.g., type "feat" to filter pull requests)

5. Verify that:

   • The table filters correctly based on the search term
   • A clear button (X icon) appears on the right side of the input field
   • The clear button is visible and properly positioned

6. Click the clear button (X icon)

7. Verify that:

   • The search input field is cleared
   • The table shows all items again (no filter applied)
   • The clear button disappears

8. Test with dark mode:

   • Switch to dark mode
   • Repeat steps 3-7
   • Verify the clear button styling works correctly in dark mode

9. Test keyboard accessibility:

   • Navigate to the search input using Tab key
   • Type some text
   • Use Tab to navigate to the clear button
   • Press Enter/Space to activate the clear button
   • Verify the search is cleared

Screenshots

Checklist

General

• PR description explains the purpose and changes. (f.e. following the 'Conventional Commits')

• Changes have been tested locally.

• Screenshots have been attached.

Client

• I documented the TypeScript code using JSDoc style.

• I added multiple screenshots/screencasts of my UI changes.

[codacy-production]

Coverage summary from Codacy

See diff coverage on Codacy

Coverage variation	Diff coverage
✅ +0.42% (target: -1.00%)	✅ 0.00%

Coverage variation details

	Coverable lines	Covered lines	Coverage
Common ancestor commit (742295a)	7886	2083	26.41%
Head commit (db236b4)	7964 (+78)	2137 (+54)	26.83% (+0.42%)

Coverage variation is the difference between the coverage for the head and common ancestor commits of the pull request branch: <coverage of head commit> - <coverage of common ancestor commit>

Diff coverage details

	Coverable lines	Covered lines	Diff coverage
Pull request (#826)	1	0	0.00%

Diff coverage is the percentage of lines that are covered by tests out of the coverable lines that the pull request added or modified: <covered lines added or modified>/<coverable lines added or modified> * 100%

See your quality gate settings    Change summary preferences

[github-actions]

There hasn't been any activity on this pull request recently. Therefore, this pull request has been automatically marked as stale and will be closed if no further activity occurs within seven days. Thank you for your contributions.

[github-actions]

There hasn't been any activity on this pull request recently. Therefore, this pull request has been automatically marked as stale and will be closed if no further activity occurs within seven days. Thank you for your contributions.