[Fleet] Add Integration Policy Page Improvements

x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/details_page/index.tsx

@@ -10,17 +10,19 @@ import { Redirect, useRouteMatch, Switch, Route, useHistory, useLocation } from
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage, FormattedDate } from '@kbn/i18n/react';
 import {
+  EuiButtonEmpty,
+  EuiDescriptionList,
+  EuiDescriptionListDescription,
+  EuiDescriptionListTitle,
   EuiFlexGroup,
   EuiFlexItem,
+  EuiI18nNumber,
   EuiIconTip,
-  EuiTitle,
-  EuiText,
+  EuiLink,
+  EuiPortal,
   EuiSpacer,
-  EuiButtonEmpty,
-  EuiI18nNumber,
-  EuiDescriptionList,
-  EuiDescriptionListTitle,
-  EuiDescriptionListDescription,
+  EuiText,
+  EuiTitle,
 } from '@elastic/eui';
 import type { Props as EuiTabProps } from '@elastic/eui/src/components/tabs/tab';
 import styled from 'styled-components';
@@ -36,7 +38,7 @@ import {
   useFleetStatus,
   useIntraAppState,
 } from '../../../hooks';
-import { Loading, Error } from '../../../components';
+import { Loading, Error, AgentEnrollmentFlyout, AddAgentHelpPopover } from '../../../components';
 import { WithHeaderLayout } from '../../../layouts';
 import { LinkedAgentCount, AgentPolicyActionMenu } from '../components';
 
@@ -58,16 +60,24 @@ export const AgentPolicyDetailsPage: React.FunctionComponent = () => {
   const agentPolicyRequest = useGetOneAgentPolicy(policyId);
   const agentPolicy = agentPolicyRequest.data ? agentPolicyRequest.data.item : null;
   const { isLoading, error, sendRequest: refreshAgentPolicy } = agentPolicyRequest;
+  const queryParams = new URLSearchParams(useLocation().search);
+  const openEnrollmentFlyoutOpenByDefault = queryParams.get('openEnrollmentFlyout') === 'true';
+  const openAddAgentHelpPopoverOpenByDefault = queryParams.get('showAddAgentHelp') === 'true';
   const [redirectToAgentPolicyList] = useState<boolean>(false);
+  const [isEnrollmentFlyoutOpen, setIsEnrollmentFlyoutOpen] = useState<boolean>(
+    openEnrollmentFlyoutOpenByDefault
+  );
+  const [isAddAgentHelpPopoverOpen, setIsAddAgentHelpPopoverOpen] = useState<boolean>(
+    openAddAgentHelpPopoverOpenByDefault
+  );
   const agentStatusRequest = useGetAgentStatus(policyId);
   const { refreshAgentStatus } = agentStatusRequest;
   const {
     application: { navigateToApp },
   } = useStartServices();
   const routeState = useIntraAppState<AgentPolicyDetailsDeployAgentAction>();
   const agentStatus = agentStatusRequest.data?.results;
-  const queryParams = new URLSearchParams(useLocation().search);
-  const openEnrollmentFlyoutOpenByDefault = queryParams.get('openEnrollmentFlyout') === 'true';
+
   const { isReady: isFleetReady } = useFleetStatus();
 
   const headerLeftContent = useMemo(
@@ -138,6 +148,25 @@ export const AgentPolicyDetailsPage: React.FunctionComponent = () => {
     [getHref, isLoading, agentPolicy, policyId]
   );
 
+  const onCancelEnrollment = useMemo(() => {
+    if (routeState && routeState.onDoneNavigateTo && isFleetReady) {
+      const [appId, options] = routeState.onDoneNavigateTo;
+      return () => navigateToApp(appId, options);
+    }
+
+    return undefined;
+  }, [isFleetReady, navigateToApp, routeState]);
+
+  const addAgentLink = (
+    <EuiLink
+      onClick={() => {
+        setIsAddAgentHelpPopoverOpen(false);
+        setIsEnrollmentFlyoutOpen(true);
+      }}
+    >
+      <FormattedMessage id="xpack.fleet.policyDetails.addAgentButton" defaultMessage="Add agent" />
+    </EuiLink>
+  );
   const headerRightContent = useMemo(
     () =>
       agentPolicy ? (
@@ -168,15 +197,25 @@ export const AgentPolicyDetailsPage: React.FunctionComponent = () => {
             { isDivider: true },
             {
               label: i18n.translate('xpack.fleet.policyDetails.summary.usedBy', {
-                defaultMessage: 'Used by',
+                defaultMessage: 'Agents',
               }),
-              content: (
-                <LinkedAgentCount
-                  count={(agentStatus && agentStatus.total) || 0}
-                  agentPolicyId={(agentPolicy && agentPolicy.id) || ''}
-                  showAgentText
-                />
-              ),
+              content:
+                agentStatus && agentStatus!.total ? (
+                  <LinkedAgentCount
+                    count={agentStatus.total}
+                    agentPolicyId={(agentPolicy && agentPolicy.id) || ''}
+                    showAgentText
+                  />
+                ) : (
+                  <AddAgentHelpPopover
+                    button={addAgentLink}
+                    isOpen={isAddAgentHelpPopoverOpen}
+                    offset={15}
+                    closePopover={() => {
+                      setIsAddAgentHelpPopoverOpen(false);
+                    }}
+                  />
+                ),
             },
             { isDivider: true },
             {
@@ -203,16 +242,7 @@ export const AgentPolicyDetailsPage: React.FunctionComponent = () => {
                   onCopySuccess={(newAgentPolicy: AgentPolicy) => {
                     history.push(getPath('policy_details', { policyId: newAgentPolicy.id }));
                   }}
-                  enrollmentFlyoutOpenByDefault={openEnrollmentFlyoutOpenByDefault}
-                  onCancelEnrollment={
-                    routeState && routeState.onDoneNavigateTo && isFleetReady
-                      ? () =>
-                          navigateToApp(
-                            routeState.onDoneNavigateTo![0],
-                            routeState.onDoneNavigateTo![1]
-                          )
-                      : undefined
-                  }
+                  onCancelEnrollment={onCancelEnrollment}
                 />
               ),
             },
@@ -237,7 +267,7 @@ export const AgentPolicyDetailsPage: React.FunctionComponent = () => {
         </EuiFlexGroup>
       ) : undefined,
     /* eslint-disable-next-line react-hooks/exhaustive-deps */
-    [agentPolicy, policyId, agentStatus]
+    [agentPolicy, policyId, agentStatus, isAddAgentHelpPopoverOpen]
   );
 
   const headerTabs = useMemo(() => {
@@ -303,8 +333,28 @@ export const AgentPolicyDetailsPage: React.FunctionComponent = () => {
       );
     }
 
-    return <AgentPolicyDetailsContent agentPolicy={agentPolicy} />;
-  }, [agentPolicy, policyId, error, isLoading, redirectToAgentPolicyList]);
+    return (
+      <>
+        {isEnrollmentFlyoutOpen && (
+          <EuiPortal>
+            <AgentEnrollmentFlyout
+              agentPolicy={agentPolicy}
+              onClose={onCancelEnrollment || (() => setIsEnrollmentFlyoutOpen(false))}
+            />
+          </EuiPortal>
+        )}
+        <AgentPolicyDetailsContent agentPolicy={agentPolicy} />;
+      </>
+    );
+  }, [
+    redirectToAgentPolicyList,
+    isLoading,
+    error,
+    agentPolicy,
+    isEnrollmentFlyoutOpen,
+    onCancelEnrollment,
+    policyId,
+  ]);
 
   return (
     <AgentPolicyRefreshContext.Provider value={{ refresh: refreshAgentPolicy }}>

x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/policies/components/package_policy_agents_cell.test.tsx

@@ -13,14 +13,20 @@ import { createIntegrationsTestRendererMock } from '../../../../../../../../mock
 
 import { PackagePolicyAgentsCell } from './package_policy_agents_cell';
 
-function renderCell({ agentCount = 0, agentPolicyId = '123', onAddAgent = () => {} }) {
+function renderCell({
+  agentCount = 0,
+  agentPolicyId = '123',
+  onAddAgent = () => {},
+  hasHelpPopover = false,
+}) {
   const renderer = createIntegrationsTestRendererMock();
 
   return renderer.render(
     <PackagePolicyAgentsCell
       agentCount={agentCount}
       agentPolicyId={agentPolicyId}
       onAddAgent={onAddAgent}
+      hasHelpPopover={hasHelpPopover}
     />
   );
 }
@@ -40,4 +46,25 @@ describe('PackagePolicyAgentsCell', () => {
       expect(utils.queryByText('9999')).toBeInTheDocument();
     });
   });
+
+  test('it should display help popover if count is 0 and hasHelpPopover=true', async () => {
+    const utils = renderCell({ agentCount: 0, hasHelpPopover: true });
+    await act(async () => {
+      expect(utils.queryByText('9999')).not.toBeInTheDocument();
+      expect(utils.queryByText('Add agent')).toBeInTheDocument();
+      expect(
+        utils.container.querySelector('[data-test-subj="addAgentHelpPopover"]')
+      ).toBeInTheDocument();
+    });
+  });
+  test('it should not display help popover if count is > 0 and hasHelpPopover=true', async () => {
+    const utils = renderCell({ agentCount: 9999, hasHelpPopover: true });
+    await act(async () => {
+      expect(utils.queryByText('9999')).toBeInTheDocument();
+      expect(utils.queryByText('Add agent')).not.toBeInTheDocument();
+      expect(
+        utils.container.querySelector('[data-test-subj="addAgentHelpPopover"]')
+      ).not.toBeInTheDocument();
+    });
+  });
 });

x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/policies/components/package_policy_agents_cell.tsx

@@ -5,20 +5,43 @@
  * 2.0.
  */
 
-import React from 'react';
+import React, { useState } from 'react';
 
 import { EuiButton } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { LinkedAgentCount } from '../../../../../../components';
+import { LinkedAgentCount, AddAgentHelpPopover } from '../../../../../../components';
+
+const AddAgentButton = ({ onAddAgent }: { onAddAgent: () => void }) => (
+  <EuiButton iconType="plusInCircle" data-test-subj="addAgentButton" onClick={onAddAgent}>
+    <FormattedMessage
+      id="xpack.fleet.epm.packageDetails.integrationList.addAgent"
+      defaultMessage="Add agent"
+    />
+  </EuiButton>
+);
+
+const AddAgentButtonWithPopover = ({ onAddAgent }: { onAddAgent: () => void }) => {
+  const button = <AddAgentButton onAddAgent={onAddAgent} />;
+  const [isHelpOpen, setIsHelpOpen] = useState<boolean>(true);
+  return (
+    <AddAgentHelpPopover
+      button={button}
+      isOpen={isHelpOpen}
+      closePopover={() => setIsHelpOpen(false)}
+    />
+  );
+};
 
 export const PackagePolicyAgentsCell = ({
   agentPolicyId,
   agentCount = 0,
   onAddAgent,
+  hasHelpPopover = false,
 }: {
   agentPolicyId: string;
   agentCount?: number;
+  hasHelpPopover?: boolean;
   onAddAgent: () => void;
 }) => {
   if (agentCount > 0) {
@@ -31,12 +54,9 @@ export const PackagePolicyAgentsCell = ({
     );
   }
 
-  return (
-    <EuiButton iconType="plusInCircle" data-test-subj="addAgentButton" onClick={onAddAgent}>
-      <FormattedMessage
-        id="xpack.fleet.epm.packageDetails.integrationList.addAgent"
-        defaultMessage="Add agent"
-      />
-    </EuiButton>
-  );
+  if (!hasHelpPopover) {
+    return <AddAgentButton onAddAgent={onAddAgent} />;
+  }
+
+  return <AddAgentButtonWithPopover onAddAgent={onAddAgent} />;
 };

x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/policies/package_policies.tsx

@@ -81,6 +81,10 @@ export const PackagePoliciesPage = ({ name, version }: PackagePoliciesPanelProps
     () => queryParams.get('addAgentToPolicyId'),
     [queryParams]
   );
+  const showAddAgentHelpForPolicyId = useMemo(
+    () => queryParams.get('showAddAgentHelpForPolicyId'),
+    [queryParams]
+  );
   const [flyoutOpenForPolicyId, setFlyoutOpenForPolicyId] = useState<string | null>(
     agentPolicyIdFromParams
   );
@@ -294,6 +298,7 @@ export const PackagePoliciesPage = ({ name, version }: PackagePoliciesPanelProps
               agentPolicyId={agentPolicy.id}
               agentCount={agentPolicy.agents}
               onAddAgent={() => setFlyoutOpenForPolicyId(agentPolicy.id)}
+              hasHelpPopover={showAddAgentHelpForPolicyId === agentPolicy.id}
             />
           );
         },
@@ -321,7 +326,7 @@ export const PackagePoliciesPage = ({ name, version }: PackagePoliciesPanelProps
         },
       },
     ],
-    [getHref, viewDataStep]
+    [getHref, showAddAgentHelpForPolicyId, viewDataStep]
   );
 
   const noItemsMessage = useMemo(() => {