From 77a3ff723ef1621ddf06cd3c7b9ee634256fcf6c Mon Sep 17 00:00:00 2001 From: Mark Hopkin Date: Mon, 11 Oct 2021 14:25:46 +0100 Subject: [PATCH 01/11] Show add agent link instead of 0 agents --- .../agent_policy/details_page/index.tsx | 88 ++++++++++++------- 1 file changed, 58 insertions(+), 30 deletions(-) diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/details_page/index.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/details_page/index.tsx index eec7d80b75c4b..2797b09096237 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/details_page/index.tsx +++ b/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 } from '../../../components'; import { WithHeaderLayout } from '../../../layouts'; import { LinkedAgentCount, AgentPolicyActionMenu } from '../components'; @@ -58,7 +60,12 @@ 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 [redirectToAgentPolicyList] = useState(false); + const [isEnrollmentFlyoutOpen, setIsEnrollmentFlyoutOpen] = useState( + openEnrollmentFlyoutOpenByDefault + ); const agentStatusRequest = useGetAgentStatus(policyId); const { refreshAgentStatus } = agentStatusRequest; const { @@ -66,8 +73,7 @@ export const AgentPolicyDetailsPage: React.FunctionComponent = () => { } = useStartServices(); const routeState = useIntraAppState(); 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 +144,14 @@ export const AgentPolicyDetailsPage: React.FunctionComponent = () => { [getHref, isLoading, agentPolicy, policyId] ); + const onCancelEnrollment = useMemo( + () => + routeState && routeState.onDoneNavigateTo && isFleetReady + ? () => navigateToApp(routeState.onDoneNavigateTo![0], routeState.onDoneNavigateTo![1]) + : undefined, + [isFleetReady, navigateToApp, routeState] + ); + const headerRightContent = useMemo( () => agentPolicy ? ( @@ -168,15 +182,18 @@ export const AgentPolicyDetailsPage: React.FunctionComponent = () => { { isDivider: true }, { label: i18n.translate('xpack.fleet.policyDetails.summary.usedBy', { - defaultMessage: 'Used by', + defaultMessage: 'Agents', }), - content: ( - - ), + content: + agentStatus && agentStatus!.total ? ( + + ) : ( + setIsEnrollmentFlyoutOpen(true)}>Add agent + ), }, { isDivider: true }, { @@ -203,16 +220,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} /> ), }, @@ -303,8 +311,28 @@ export const AgentPolicyDetailsPage: React.FunctionComponent = () => { ); } - return ; - }, [agentPolicy, policyId, error, isLoading, redirectToAgentPolicyList]); + return ( + <> + {isEnrollmentFlyoutOpen && ( + + setIsEnrollmentFlyoutOpen(false))} + /> + + )} + ; + + ); + }, [ + redirectToAgentPolicyList, + isLoading, + error, + agentPolicy, + isEnrollmentFlyoutOpen, + onCancelEnrollment, + policyId, + ]); return ( From 4ed898a3902753f7398bfca6ee43ba428148eba3 Mon Sep 17 00:00:00 2001 From: Mark Hopkin Date: Mon, 11 Oct 2021 17:27:04 +0100 Subject: [PATCH 02/11] Add popover --- .../agent_policy/details_page/index.tsx | 9 ++- .../components/add_agent_help_popover.tsx | 56 +++++++++++++++++++ .../plugins/fleet/public/components/index.ts | 1 + 3 files changed, 64 insertions(+), 2 deletions(-) create mode 100644 x-pack/plugins/fleet/public/components/add_agent_help_popover.tsx diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/details_page/index.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/details_page/index.tsx index 2797b09096237..2494f619b2b57 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/details_page/index.tsx +++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/details_page/index.tsx @@ -38,7 +38,7 @@ import { useFleetStatus, useIntraAppState, } from '../../../hooks'; -import { Loading, Error, AgentEnrollmentFlyout } from '../../../components'; +import { Loading, Error, AgentEnrollmentFlyout, AddAgentHelpPopover } from '../../../components'; import { WithHeaderLayout } from '../../../layouts'; import { LinkedAgentCount, AgentPolicyActionMenu } from '../components'; @@ -152,6 +152,7 @@ export const AgentPolicyDetailsPage: React.FunctionComponent = () => { [isFleetReady, navigateToApp, routeState] ); + const addAgentLink = setIsEnrollmentFlyoutOpen(true)}>Add agent; const headerRightContent = useMemo( () => agentPolicy ? ( @@ -192,7 +193,11 @@ export const AgentPolicyDetailsPage: React.FunctionComponent = () => { showAgentText /> ) : ( - setIsEnrollmentFlyoutOpen(true)}>Add agent + ), }, { isDivider: true }, diff --git a/x-pack/plugins/fleet/public/components/add_agent_help_popover.tsx b/x-pack/plugins/fleet/public/components/add_agent_help_popover.tsx new file mode 100644 index 0000000000000..466efc112c53c --- /dev/null +++ b/x-pack/plugins/fleet/public/components/add_agent_help_popover.tsx @@ -0,0 +1,56 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ +import type { ReactElement } from 'react'; +import React from 'react'; + +import { FormattedMessage } from '@kbn/i18n/react'; + +import type { NoArgCallback } from '@elastic/eui'; +import { EuiButton, EuiLink, EuiText, EuiPopover, EuiPopoverFooter } from '@elastic/eui'; + +import { useStartServices } from '../hooks'; + +export const AddAgentHelpPopover = ({ + button, + isOpen, + closePopover, +}: { + button: ReactElement; + isOpen: boolean; + closePopover: NoArgCallback; +}) => { + const { docLinks } = useStartServices(); + + return ( + +
+ + Elastic Agent, + learnMoreLink: ( + + + + ), + }} + /> + +
+ + + Got it + + + + ); +}; diff --git a/x-pack/plugins/fleet/public/components/index.ts b/x-pack/plugins/fleet/public/components/index.ts index dca0a92076180..3252315312d02 100644 --- a/x-pack/plugins/fleet/public/components/index.ts +++ b/x-pack/plugins/fleet/public/components/index.ts @@ -19,6 +19,7 @@ export { AgentPolicyPackageBadges } from './agent_policy_package_badges'; export { DangerEuiContextMenuItem } from './danger_eui_context_menu_item'; export { PackagePolicyDeleteProvider } from './package_policy_delete_provider'; export { PackagePolicyActionsMenu } from './package_policy_actions_menu'; +export { AddAgentHelpPopover } from './add_agent_help_popover'; export * from './link_and_revision'; export * from './settings_flyout'; export * from './agent_enrollment_flyout'; From f0ec537f7142166c1ad8fe3a7922c7eaee52bf24 Mon Sep 17 00:00:00 2001 From: Mark Hopkin Date: Mon, 11 Oct 2021 17:51:05 +0100 Subject: [PATCH 03/11] open and close popover --- .../agent_policy/details_page/index.tsx | 23 +++++++++++++++---- .../components/add_agent_help_popover.tsx | 9 ++++---- 2 files changed, 23 insertions(+), 9 deletions(-) diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/details_page/index.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/details_page/index.tsx index 2494f619b2b57..baf8fc89031aa 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/details_page/index.tsx +++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/details_page/index.tsx @@ -62,10 +62,14 @@ export const AgentPolicyDetailsPage: React.FunctionComponent = () => { 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(false); const [isEnrollmentFlyoutOpen, setIsEnrollmentFlyoutOpen] = useState( openEnrollmentFlyoutOpenByDefault ); + const [isAddAgentHelpPopoverOpen, setIsAddAgentHelpPopoverOpen] = useState( + openAddAgentHelpPopoverOpenByDefault + ); const agentStatusRequest = useGetAgentStatus(policyId); const { refreshAgentStatus } = agentStatusRequest; const { @@ -152,7 +156,16 @@ export const AgentPolicyDetailsPage: React.FunctionComponent = () => { [isFleetReady, navigateToApp, routeState] ); - const addAgentLink = setIsEnrollmentFlyoutOpen(true)}>Add agent; + const addAgentLink = ( + { + setIsAddAgentHelpPopoverOpen(false); + setIsEnrollmentFlyoutOpen(true); + }} + > + Add agent + + ); const headerRightContent = useMemo( () => agentPolicy ? ( @@ -195,8 +208,10 @@ export const AgentPolicyDetailsPage: React.FunctionComponent = () => { ) : ( { + setIsAddAgentHelpPopoverOpen(false); + }} /> ), }, @@ -250,7 +265,7 @@ export const AgentPolicyDetailsPage: React.FunctionComponent = () => { ) : undefined, /* eslint-disable-next-line react-hooks/exhaustive-deps */ - [agentPolicy, policyId, agentStatus] + [agentPolicy, policyId, agentStatus, isAddAgentHelpPopoverOpen] ); const headerTabs = useMemo(() => { diff --git a/x-pack/plugins/fleet/public/components/add_agent_help_popover.tsx b/x-pack/plugins/fleet/public/components/add_agent_help_popover.tsx index 466efc112c53c..99ad7233261a9 100644 --- a/x-pack/plugins/fleet/public/components/add_agent_help_popover.tsx +++ b/x-pack/plugins/fleet/public/components/add_agent_help_popover.tsx @@ -24,20 +24,19 @@ export const AddAgentHelpPopover = ({ closePopover: NoArgCallback; }) => { const { docLinks } = useStartServices(); - return ( - +
Elastic Agent, learnMoreLink: ( @@ -47,7 +46,7 @@ export const AddAgentHelpPopover = ({
- + Got it From 99a27ee17c60d5025be64888ba394fc99753ad5b Mon Sep 17 00:00:00 2001 From: Mark Hopkin Date: Mon, 11 Oct 2021 20:35:02 +0100 Subject: [PATCH 04/11] fill button --- .../plugins/fleet/public/components/add_agent_help_popover.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/plugins/fleet/public/components/add_agent_help_popover.tsx b/x-pack/plugins/fleet/public/components/add_agent_help_popover.tsx index 99ad7233261a9..041b34e54a295 100644 --- a/x-pack/plugins/fleet/public/components/add_agent_help_popover.tsx +++ b/x-pack/plugins/fleet/public/components/add_agent_help_popover.tsx @@ -46,7 +46,7 @@ export const AddAgentHelpPopover = ({ - + Got it From f75d850ba8927fb133e93c098a521f5ae06a681f Mon Sep 17 00:00:00 2001 From: Mark Hopkin Date: Tue, 12 Oct 2021 10:48:56 +0100 Subject: [PATCH 05/11] add popover to agent cell --- .../package_policy_agents_cell.test.tsx | 29 +++++++++++++- .../components/package_policy_agents_cell.tsx | 40 ++++++++++++++----- .../detail/policies/package_policies.tsx | 7 +++- .../components/add_agent_help_popover.tsx | 7 +++- 4 files changed, 70 insertions(+), 13 deletions(-) diff --git a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/policies/components/package_policy_agents_cell.test.tsx b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/policies/components/package_policy_agents_cell.test.tsx index 8872c61299093..6cb9aab005e77 100644 --- a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/policies/components/package_policy_agents_cell.test.tsx +++ b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/policies/components/package_policy_agents_cell.test.tsx @@ -13,7 +13,12 @@ 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( @@ -21,6 +26,7 @@ function renderCell({ agentCount = 0, agentPolicyId = '123', onAddAgent = () => 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(); + }); + }); }); diff --git a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/policies/components/package_policy_agents_cell.tsx b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/policies/components/package_policy_agents_cell.tsx index 37543e7e5ae1b..e70d10e735571 100644 --- a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/policies/components/package_policy_agents_cell.tsx +++ b/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 }) => ( + + + +); + +const AddAgentButtonWithPopover = ({ onAddAgent }: { onAddAgent: () => void }) => { + const button = ; + const [isHelpOpen, setIsHelpOpen] = useState(true); + return ( + 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 ( - - - - ); + if (!hasHelpPopover) { + return ; + } + + return ; }; diff --git a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/policies/package_policies.tsx b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/policies/package_policies.tsx index 304bdd621b1b2..2a7cab929211a 100644 --- a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/policies/package_policies.tsx +++ b/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( 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(() => { diff --git a/x-pack/plugins/fleet/public/components/add_agent_help_popover.tsx b/x-pack/plugins/fleet/public/components/add_agent_help_popover.tsx index 041b34e54a295..23d8c4a22ccd7 100644 --- a/x-pack/plugins/fleet/public/components/add_agent_help_popover.tsx +++ b/x-pack/plugins/fleet/public/components/add_agent_help_popover.tsx @@ -25,7 +25,12 @@ export const AddAgentHelpPopover = ({ }) => { const { docLinks } = useStartServices(); return ( - +
Date: Tue, 12 Oct 2021 18:03:59 +0100 Subject: [PATCH 06/11] PR feedback --- .../agent_policy/details_page/index.tsx | 7 +-- .../components/add_agent_help_popover.tsx | 48 +++++++++++++------ 2 files changed, 37 insertions(+), 18 deletions(-) diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/details_page/index.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/details_page/index.tsx index baf8fc89031aa..c4a5968698f67 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/details_page/index.tsx +++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/details_page/index.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import React, { useMemo, useState } from 'react'; +import React, { useMemo, useState, useCallback } from 'react'; import { Redirect, useRouteMatch, Switch, Route, useHistory, useLocation } from 'react-router-dom'; import { i18n } from '@kbn/i18n'; import { FormattedMessage, FormattedDate } from '@kbn/i18n/react'; @@ -148,7 +148,7 @@ export const AgentPolicyDetailsPage: React.FunctionComponent = () => { [getHref, isLoading, agentPolicy, policyId] ); - const onCancelEnrollment = useMemo( + const onCancelEnrollment = useCallback( () => routeState && routeState.onDoneNavigateTo && isFleetReady ? () => navigateToApp(routeState.onDoneNavigateTo![0], routeState.onDoneNavigateTo![1]) @@ -163,7 +163,7 @@ export const AgentPolicyDetailsPage: React.FunctionComponent = () => { setIsEnrollmentFlyoutOpen(true); }} > - Add agent + ); const headerRightContent = useMemo( @@ -209,6 +209,7 @@ export const AgentPolicyDetailsPage: React.FunctionComponent = () => { { setIsAddAgentHelpPopoverOpen(false); }} diff --git a/x-pack/plugins/fleet/public/components/add_agent_help_popover.tsx b/x-pack/plugins/fleet/public/components/add_agent_help_popover.tsx index 23d8c4a22ccd7..3ded498c34716 100644 --- a/x-pack/plugins/fleet/public/components/add_agent_help_popover.tsx +++ b/x-pack/plugins/fleet/public/components/add_agent_help_popover.tsx @@ -10,29 +10,26 @@ import React from 'react'; import { FormattedMessage } from '@kbn/i18n/react'; import type { NoArgCallback } from '@elastic/eui'; -import { EuiButton, EuiLink, EuiText, EuiPopover, EuiPopoverFooter } from '@elastic/eui'; +import { EuiTourStep, EuiLink, EuiText } from '@elastic/eui'; import { useStartServices } from '../hooks'; export const AddAgentHelpPopover = ({ button, isOpen, + offset = 0, closePopover, }: { button: ReactElement; isOpen: boolean; + offset?: number; closePopover: NoArgCallback; }) => { const { docLinks } = useStartServices(); return ( - -
- + -
- - + } + isStepOpen={isOpen} + minWidth={300} + onFinish={() => {}} + step={1} + stepsTotal={1} + offset={offset} + title={ + + } + anchorPosition="downCenter" + subtitle={null} + data-test-subj="addAgentHelpPopover" + footerAction={ + { + closePopover(); + }} + > Got it - - - + + } + > + {button} + ); }; From 6b739f7928ced67b599e426e3b7281a844a6d58e Mon Sep 17 00:00:00 2001 From: Mark Hopkin Date: Tue, 12 Oct 2021 18:14:13 +0100 Subject: [PATCH 07/11] only add offset to props if it's provided --- .../public/components/add_agent_help_popover.tsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/x-pack/plugins/fleet/public/components/add_agent_help_popover.tsx b/x-pack/plugins/fleet/public/components/add_agent_help_popover.tsx index 3ded498c34716..5eec08c24c2e9 100644 --- a/x-pack/plugins/fleet/public/components/add_agent_help_popover.tsx +++ b/x-pack/plugins/fleet/public/components/add_agent_help_popover.tsx @@ -17,7 +17,7 @@ import { useStartServices } from '../hooks'; export const AddAgentHelpPopover = ({ button, isOpen, - offset = 0, + offset, closePopover, }: { button: ReactElement; @@ -26,8 +26,16 @@ export const AddAgentHelpPopover = ({ closePopover: NoArgCallback; }) => { const { docLinks } = useStartServices(); + + const optionalProps: { offset?: number } = {}; + + if (offset !== undefined) { + optionalProps.offset = offset; // offset being present in props sets it to 0 so only add if specified + } + return ( {}} step={1} stepsTotal={1} - offset={offset} title={ Date: Tue, 12 Oct 2021 18:29:43 +0100 Subject: [PATCH 08/11] make code clearer --- .../sections/agent_policy/details_page/index.tsx | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/details_page/index.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/details_page/index.tsx index c4a5968698f67..a5ff9a8997700 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/details_page/index.tsx +++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/details_page/index.tsx @@ -148,13 +148,14 @@ export const AgentPolicyDetailsPage: React.FunctionComponent = () => { [getHref, isLoading, agentPolicy, policyId] ); - const onCancelEnrollment = useCallback( - () => - routeState && routeState.onDoneNavigateTo && isFleetReady - ? () => navigateToApp(routeState.onDoneNavigateTo![0], routeState.onDoneNavigateTo![1]) - : undefined, - [isFleetReady, navigateToApp, routeState] - ); + const onCancelEnrollment = useMemo(() => { + if (routeState && routeState.onDoneNavigateTo && isFleetReady) { + const [appId, options] = routeState.onDoneNavigateTo; + return () => navigateToApp(appId, options); + } + + return undefined; + }, [isFleetReady, navigateToApp, routeState]); const addAgentLink = ( Date: Tue, 12 Oct 2021 20:10:07 +0100 Subject: [PATCH 09/11] Update x-pack/plugins/fleet/public/components/add_agent_help_popover.tsx Co-authored-by: Dave Snider --- .../fleet/public/components/add_agent_help_popover.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/x-pack/plugins/fleet/public/components/add_agent_help_popover.tsx b/x-pack/plugins/fleet/public/components/add_agent_help_popover.tsx index 5eec08c24c2e9..c42d87d07291e 100644 --- a/x-pack/plugins/fleet/public/components/add_agent_help_popover.tsx +++ b/x-pack/plugins/fleet/public/components/add_agent_help_popover.tsx @@ -75,7 +75,10 @@ export const AddAgentHelpPopover = ({ closePopover(); }} > - Got it + } > From 6e32df588c1eb9d703df9fed9dca3fa30376fd89 Mon Sep 17 00:00:00 2001 From: Mark Hopkin Date: Tue, 12 Oct 2021 20:23:00 +0100 Subject: [PATCH 10/11] remove unused import --- .../fleet/sections/agent_policy/details_page/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/details_page/index.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/details_page/index.tsx index a5ff9a8997700..76994feb18fea 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/details_page/index.tsx +++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/details_page/index.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import React, { useMemo, useState, useCallback } from 'react'; +import React, { useMemo, useState } from 'react'; import { Redirect, useRouteMatch, Switch, Route, useHistory, useLocation } from 'react-router-dom'; import { i18n } from '@kbn/i18n'; import { FormattedMessage, FormattedDate } from '@kbn/i18n/react'; From 68c36aca7e22ba3165e50ea5772f864f523227e8 Mon Sep 17 00:00:00 2001 From: Mark Hopkin Date: Tue, 12 Oct 2021 21:40:40 +0100 Subject: [PATCH 11/11] whitespace --- .../fleet/public/components/add_agent_help_popover.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/x-pack/plugins/fleet/public/components/add_agent_help_popover.tsx b/x-pack/plugins/fleet/public/components/add_agent_help_popover.tsx index c42d87d07291e..e47070fdc7b99 100644 --- a/x-pack/plugins/fleet/public/components/add_agent_help_popover.tsx +++ b/x-pack/plugins/fleet/public/components/add_agent_help_popover.tsx @@ -76,8 +76,8 @@ export const AddAgentHelpPopover = ({ }} > }