From 6bce8d8ded46f9a2c05868f3313483f659c45f7d Mon Sep 17 00:00:00 2001
From: Cristina Amico <criamico@users.noreply.github.com>
Date: Mon, 19 Feb 2024 11:25:20 +0100
Subject: [PATCH] [Fleet] Fix inactive popover tour not resetting (#176929)

Fixes https://github.com/elastic/kibana/issues/176124

## Summary
The [inactive popover](https://github.com/elastic/kibana/pull/149226)
that appears the first time after agents become inactive was broken
(probably because of a EUi upgrade) and wasn't dismissable anymore.

I'm adding a footer with button that makes it easily dismissable.

![Screenshot 2024-02-14 at 16 15
36](https://github.com/elastic/kibana/assets/16084106/b4029aa2-e0f7-42d4-afe1-e810b7e88d23)

### Testing
- In dev tools console, run the following. This removes from the local
storage the key that signals that the tour was already ran once.
```
  localStorage.removeItem("fleet.inactiveAgentsCalloutHasBeenDismissed")
```
- Enroll some agents and wait that at least one becomes inactive
- The popover should be visible and it should be possible to dismiss it
by clicking "got it".

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
(cherry picked from commit 851657c6f9fd0113f3a5900c100ce0f3e151841f)

# Conflicts:
#	x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/components/agent_status_filter.tsx
---
 .../components/agent_status_filter.tsx        | 32 ++++++++++++-------
 1 file changed, 20 insertions(+), 12 deletions(-)

diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/components/agent_status_filter.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/components/agent_status_filter.tsx
index ece89842c1bf6..9152b04970ba6 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/components/agent_status_filter.tsx
+++ b/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