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

…7172)

# Backport

This will backport the following commits from `main` to `8.12`:
- [[Fleet] Fix inactive popover tour not resetting
(#176929)](#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":"[email protected]"},"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](https://github.com/elastic/kibana/assets/16084106/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
<[email protected]>","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](https://github.com/elastic/kibana/assets/16084106/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
<[email protected]>","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](https://github.com/elastic/kibana/assets/16084106/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
<[email protected]>","sha":"851657c6f9fd0113f3a5900c100ce0f3e151841f"}}]}]
BACKPORT-->

x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/components/agent_status_filter.tsx

@@ -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