[8.12] [Fleet] Fix inactive popover tour not resetting (#176929) (#177172)

# Backport

This will backport the following commits from `main` to `8.12`:
- [[Fleet] Fix inactive popover tour not resetting
(#176929)](https://github.com/elastic/kibana/pull/176929)

<!--- Backport version: 8.9.8 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Cristina
Amico","email":"criamico@users.noreply.github.com"},"sourceCommit":{"committedDate":"2024-02-19T10:25:20Z","message":"[Fleet]
Fix inactive popover tour not resetting (#176929)\n\nFixes
https://github.com/elastic/kibana/issues/176124\r\n\r\n## Summary\r\nThe
[inactive
popover](https://github.com/elastic/kibana/pull/149226)\r\nthat appears
the first time after agents become inactive was broken\r\n(probably
because of a EUi upgrade) and wasn't dismissable anymore.\r\n\r\nI'm
adding a footer with button that makes it easily
dismissable.\r\n\r\n![Screenshot 2024-02-14 at 16
15\r\n36](b4029aa2-e0f7-42d4-afe1-e810b7e88d23)\r\n\r\n###
Testing \r\n- In dev tools console, run the following. This removes from
the local\r\nstorage the key that signals that the tour was already ran
once.\r\n```\r\n
localStorage.removeItem(\"fleet.inactiveAgentsCalloutHasBeenDismissed\")\r\n```\r\n-
Enroll some agents and wait that at least one becomes inactive\r\n- The
popover should be visible and it should be possible to dismiss it\r\nby
clicking \"got it\".\r\n\r\nCo-authored-by: Kibana Machine
<42973632+kibanamachine@users.noreply.github.com>","sha":"851657c6f9fd0113f3a5900c100ce0f3e151841f","branchLabelMapping":{"^v8.14.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","Team:Fleet","v8.13.0","v8.12.2","v8.14.0"],"number":176929,"url":"https://github.com/elastic/kibana/pull/176929","mergeCommit":{"message":"[Fleet]
Fix inactive popover tour not resetting (#176929)\n\nFixes
https://github.com/elastic/kibana/issues/176124\r\n\r\n## Summary\r\nThe
[inactive
popover](https://github.com/elastic/kibana/pull/149226)\r\nthat appears
the first time after agents become inactive was broken\r\n(probably
because of a EUi upgrade) and wasn't dismissable anymore.\r\n\r\nI'm
adding a footer with button that makes it easily
dismissable.\r\n\r\n![Screenshot 2024-02-14 at 16
15\r\n36](b4029aa2-e0f7-42d4-afe1-e810b7e88d23)\r\n\r\n###
Testing \r\n- In dev tools console, run the following. This removes from
the local\r\nstorage the key that signals that the tour was already ran
once.\r\n```\r\n
localStorage.removeItem(\"fleet.inactiveAgentsCalloutHasBeenDismissed\")\r\n```\r\n-
Enroll some agents and wait that at least one becomes inactive\r\n- The
popover should be visible and it should be possible to dismiss it\r\nby
clicking \"got it\".\r\n\r\nCo-authored-by: Kibana Machine
<42973632+kibanamachine@users.noreply.github.com>","sha":"851657c6f9fd0113f3a5900c100ce0f3e151841f"}},"sourceBranch":"main","suggestedTargetBranches":["8.12"],"targetPullRequestStates":[{"branch":"8.13","label":"v8.13.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"url":"https://github.com/elastic/kibana/pull/177161","number":177161,"state":"OPEN"},{"branch":"8.12","label":"v8.12.2","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.14.0","labelRegex":"^v8.14.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/176929","number":176929,"mergeCommit":{"message":"[Fleet]
Fix inactive popover tour not resetting (#176929)\n\nFixes
https://github.com/elastic/kibana/issues/176124\r\n\r\n## Summary\r\nThe
[inactive
popover](https://github.com/elastic/kibana/pull/149226)\r\nthat appears
the first time after agents become inactive was broken\r\n(probably
because of a EUi upgrade) and wasn't dismissable anymore.\r\n\r\nI'm
adding a footer with button that makes it easily
dismissable.\r\n\r\n![Screenshot 2024-02-14 at 16
15\r\n36](b4029aa2-e0f7-42d4-afe1-e810b7e88d23)\r\n\r\n###
Testing \r\n- In dev tools console, run the following. This removes from
the local\r\nstorage the key that signals that the tour was already ran
once.\r\n```\r\n
localStorage.removeItem(\"fleet.inactiveAgentsCalloutHasBeenDismissed\")\r\n```\r\n-
Enroll some agents and wait that at least one becomes inactive\r\n- The
popover should be visible and it should be possible to dismiss it\r\nby
clicking \"got it\".\r\n\r\nCo-authored-by: Kibana Machine
<42973632+kibanamachine@users.noreply.github.com>","sha":"851657c6f9fd0113f3a5900c100ce0f3e151841f"}}]}]
BACKPORT-->
This commit is contained in:
Cristina Amico 2024-02-20 15:31:26 +01:00 committed by GitHub
parent 1b457956ed
commit 6536da7fb1
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -13,6 +13,7 @@ import {
EuiText,
EuiTourStep,
useEuiTheme,
EuiLink,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n-react';
@ -64,17 +65,11 @@ const LeftpaddedNotificationBadge = styled(EuiNotificationBadge)`
margin-left: 10px;
`;
const TourStepNoHeaderFooter = styled(EuiTourStep)`
.euiTourFooter {
display: none;
}
.euiTourHeader {
display: none;
}
`;
const InactiveAgentsTourStep: React.FC<{ isOpen: boolean }> = ({ children, isOpen }) => (
<TourStepNoHeaderFooter
const InactiveAgentsTourStep: React.FC<{
isOpen: boolean;
setInactiveAgentsCalloutHasBeenDismissed: (val: boolean) => void;
}> = ({ children, isOpen, setInactiveAgentsCalloutHasBeenDismissed }) => (
<EuiTourStep
content={
<EuiText size="s">
<FormattedMessage
@ -91,9 +86,21 @@ const InactiveAgentsTourStep: React.FC<{ isOpen: boolean }> = ({ children, isOpe
onFinish={() => {}}
anchorPosition="upCenter"
maxWidth={280}
footerAction={
<EuiLink
onClick={() => {
setInactiveAgentsCalloutHasBeenDismissed(true);
}}
>
<FormattedMessage
id="xpack.fleet.addAgentHelpPopover.footActionButton"
defaultMessage="Got it"
/>
</EuiLink>
}
>
{children as React.ReactElement}
</TourStepNoHeaderFooter>
</EuiTourStep>
);
export const AgentStatusFilter: React.FC<{
@ -160,6 +167,7 @@ export const AgentStatusFilter: React.FC<{
return (
<InactiveAgentsTourStep
isOpen={newlyInactiveAgentsCount > 0 && !inactiveAgentsCalloutHasBeenDismissed}
setInactiveAgentsCalloutHasBeenDismissed={setInactiveAgentsCalloutHasBeenDismissed}
>
<EuiPopover
ownFocus