Newsfeed unread badge is always shown after refresh

[afharo]

Kibana version: master

Elasticsearch version: 8.0.0-SNAPSHOT

Server OS version: macOS 11.3

Browser version: Firefox 88.0

Browser OS version: macOS 11.3

Original install method (e.g. download page, yum, from source, etc.): from source

Describe the bug:

Every time Kibana is loaded, on the browser, the Newsfeed unread indicator is shown.

Steps to reproduce:

1. Open Kibana
2. Open the Newsfeed to set the feed as read (notice the red bubble is gone)
3. Refresh the page
4. Notice the red bubble is back

Expected behavior:

The red bubble should only show if new content is downloaded.

Screenshots (if relevant):

Errors in browser console (if relevant):

Provide logs and/or server output (if relevant):

Any additional context:

This might be the relevant piece of code to change:

kibana/src/plugins/newsfeed/public/components/newsfeed_header_nav_button.tsx

Lines 34 to 41 in 4584a8b

	function handleStatusChange(fetchResult: FetchResult | void | null) {
	if (fetchResult) {
	setShowBadge(fetchResult.hasNew);
	}
	setNewsFetchResult(fetchResult);
	}
	const subscription = apiFetchResult.subscribe((res) => handleStatusChange(res));

[elasticmachine]

Pinging @elastic/kibana-core (Team:Core)

[pgayvallet]

Found the root cause.

The local storage key we're using to store the already fetched item ids is regenerated at each reload

kibana/src/plugins/newsfeed/public/lib/api.ts

Lines 32 to 33 in 4584a8b

	export class NewsfeedApiDriver {
	private readonly id = uuid.v4();

kibana/src/plugins/newsfeed/public/lib/api.ts

Line 47 in 4584a8b

this.hashSetStorageKey = `${NEWSFEED_HASH_SET_STORAGE_KEY}.${this.id}`;

This is causing the 'is new' logic to always returns false between reloads, and to also flood the local storage with old entries:

Should be quite easy to address.

[pgayvallet]

After a closer look, it's slightly more complicated than that. ATM, when you open the newsfeed flyout, the information that the news was read is only used on the UI (removing the unread red pill in the header), and not propagated to the persistence. This was working-ish because of this issue. If we do fix the fact that reloading the page clears the unread state, we will also need to only flag new items as read when the user effectively opens the news flyout by clicking on the top nav button.