[MM-22815][MM-23693][MM-23735] - Improve empty states on RHS search variants

[nevyangelova]

Summary

As part of the UI quick wins, this PR handles empty states in the RHS search variants. Included is "mentions", "search", "flagged posts", "pinned posts" and "emoji picker". It add the "no_results_indicator.tsx" component adapted to match the respective designs.

Ticket Link

https://mattermost.atlassian.net/browse/MM-23693
https://mattermost.atlassian.net/browse/MM-22815
https://mattermost.atlassian.net/browse/MM-23735

[alifarooq0]

Nice @nevyangelova! Just a question about FormattedHTMLMessage.

[alifarooq0]

Suggested change

	import {NoResultsVariant} from '../no_results_indicator/types';
	import {NoResultsVariant} from 'components/no_results_indicator/types';

[alifarooq0]

nit: empty line

[matthewbirtch]

@nevyangelova I tried spinning up a test server, but looks like it failed. I'll review when this is working again.

[nevyangelova]

/update-branch

[nevyangelova]

@matthewbirtch test server finally succeeded :D

[ogi-m]

@nevyangelova I'm seeing a few issues:

1. Sidebar header overlaps the date separator:
   

2. Mentions empty state not replaced with Search empty state:

• Click on Recent Mentions (@ icon)
• Enter something in search that won't return any results and hit enter
  Expected: Search empty state is shown
  Observed: Mentions empty state is shown

3. Recent Mentions icon in active state after searching

• Click on Recent Mentions (@ icon)
• Enter something in search that will return results and hit enter
  Expected: Default/inactive icon is shown for Recent Mentions
  Observed: Active icon is shown for Recent Mentions
  

[nevyangelova]

/update-branch

[jgilliam17]

@nevyangelova
I checked for at-mentions missing hints when search term is cleared and see the hints missing - see gifs

1. State: Without previous search history, user with no mentions
   i. Start by using cmd+shift+r before clicking on the @ icon
   ii. Click on @ followed by click on x to clear the search field < note no hint popover, field focused
   iii. Click outside of the search or click esc
   Observed: Search hint popup flashes and populates RHS
   

2. State: With previous search history, user with no mentions
   i. Search for a term with no results e.g apple, close RHS after searching and clear the field
   ii. Click on @, followed by x to clear the search field < note no hint popover, field focused
   iii. Click outside of the search field or click esc
   Observed: Search hint popup flashes briefly, replaced by the information for previous apple search
   Note that even if your apple search has previously returned some results, RHS still displays No results for "apple" at this point
   

[jgilliam17]

@nevyangelova @matthewbirtch I noticed that empty states for mentions, pinned and flagged have added yet
Is this an intended change and acceptable?

[nevyangelova]

@jgilliam17 this PR is approved by UX.

[jgilliam17]

Thank you @nevyangelova

Tested, looks good to merge.

• Verified emoji empty state
• Verified empty state for mentions, flagged and pinned
• Verified search empty state

Per discussion with Nevy, issue with search results displaying on the RHS after user clears the at-mention search can be addressed separately after merge and testing as it’s out of scope here.

[mm-cloud-bot]

Test server destroyed