Added components for suggestions, selected options

[joyguptaa]

Issue: 996

Description:

1. Updated helper to generate sentences based on provided parameters
2. Added a component to display suggestions, if found, otherwise show no suggestion found
3. Display selected options as pills
4. Pills can be editable/deletable
5. All the features should follow web accessibility standards (accessible through the keyboard as well)

Checklist :

1. Should render suggestion if typed input has more than 2 characters and has no key
2.  Should render suggestion if typed input has more than 2 characters in value if key is present
3. Suggestions should be selectable using mouse and keyboard
4. Rendered pills should be editable
5. Changes should be discarded if esc is pressed while editing a pill
6. Changes should be saved if 'enter' is pressed while editing a pill
7. While editing a pill suggestions should be visible
8. Allow user to search with or without typing the key (i.e. assignee, title, status)
9. Highlight the pill & stop the cursor from blinking before deleting the pill
10. Remove the pill if the user has completely erased the value of a pill while editing
11. Rendered pills should also be visible in the URL as a query param once clicked on the search button
12. Fields from query should auto convert into pills
13. Responsiveness
14. Longer text should be wrapped with ellipsis property

Anything you would like to inform the reviewer about:

I haven't added test cases for TaskSearch.tsx as of now. Will be doing it separately.

Dev Tested:

• Yes

Under Feature Flag:

• Yes

Frontend Changes:

• Yes

Images/video of the change:

• Should render suggestion if typed input has more than 2 characters and has no key
•  Should render suggestion if typed input has more than 2 characters in value if key is present

Screen.Recording.2023-12-03.at.17.48.22.mov

• Suggestions should be selectable using mouse and keyboard

Screen.Recording.2023-12-03.at.17.52.38.mov

• Rendered pills should be editable
• Changes should be discarded if esc is pressed while editing a pill
•  Changes should be saved if 'enter' is pressed while editing a pill
•  While editing a pill suggestions should be visible

Screen.Recording.2023-12-03.at.17.56.24.1.1.mov

•  Allow user to search with or without typing the key (i.e. assignee, title, status)
•  Highlight the pill & stop the cursor from blinking before deleting the pill
•  Remove the pill if the user has completely erased the value of a pill while editing

Screen.Recording.2023-12-03.at.18.03.54.1.1.mov

•  Rendered pills should also be visible in the URL as a query param once clicked on the search button
• Fields from query should auto convert into pills
• Responsiveness
•  Longer text should be wrapped with ellipsis property

Screen.Recording.2023-12-03.at.18.09.22.1.1.mp4

---

Test Suits

Test Coverage

[vercel]

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

Name	Status	Preview	Comments	Updated (UTC)
status-app	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 3, 2023 11:01am

[joyguptaa]

Created mini PRs