[Fleet] Fix broken add fleet server button on policies page flyout

x-pack/plugins/fleet/public/applications/fleet/app.tsx

@@ -8,7 +8,7 @@
 import type { FunctionComponent } from 'react';
 import React, { memo, useEffect, useState } from 'react';
 import type { AppMountParameters } from '@kbn/core/public';
-import { EuiCode, EuiEmptyPrompt, EuiErrorBoundary, EuiPanel } from '@elastic/eui';
+import { EuiCode, EuiEmptyPrompt, EuiErrorBoundary, EuiPanel, EuiPortal } from '@elastic/eui';
 import type { History } from 'history';
 import { Router, Redirect, Route, Switch, useRouteMatch } from 'react-router-dom';
 import { FormattedMessage } from '@kbn/i18n-react';
@@ -27,7 +27,7 @@ import type { FleetConfigType, FleetStartServices } from '../../plugin';
 
 import { PackageInstallProvider } from '../integrations/hooks';
 
-import { useAuthz } from './hooks';
+import { useAuthz, useFlyoutContext } from './hooks';
 
 import {
   ConfigContext,
@@ -38,8 +38,15 @@ import {
   useBreadcrumbs,
   useStartServices,
   UIExtensionsContext,
+  FlyoutContextProvider,
 } from './hooks';
-import { Error, Loading, FleetSetupLoading } from './components';
+import {
+  Error,
+  Loading,
+  FleetSetupLoading,
+  AgentEnrollmentFlyout,
+  FleetServerFlyout,
+} from './components';
 import type { UIExtensionsStorage } from './types';
 
 import { FLEET_ROUTING_PATHS } from './constants';
@@ -251,7 +258,7 @@ export const FleetAppContext: React.FC<{
                               notifications={startServices.notifications}
                               theme$={theme$}
                             >
-                              {children}
+                              <FlyoutContextProvider>{children}</FlyoutContextProvider>
                             </PackageInstallProvider>
                           </Router>
                         </FleetStatusProvider>
@@ -295,6 +302,8 @@ const FleetTopNav = memo(
 
 export const AppRoutes = memo(
   ({ setHeaderActionMenu }: { setHeaderActionMenu: AppMountParameters['setHeaderActionMenu'] }) => {
+    const flyoutContext = useFlyoutContext();
+
     return (
       <>
         <FleetTopNav setHeaderActionMenu={setHeaderActionMenu} />
@@ -343,6 +352,22 @@ export const AppRoutes = memo(
             }}
           />
         </Switch>
+
+        {flyoutContext.isEnrollmentFlyoutOpen && (
+          <EuiPortal>
+            <AgentEnrollmentFlyout
+              defaultMode="standalone"
+              isIntegrationFlow={true}
+              onClose={() => flyoutContext.closeEnrollmentFlyout()}
+            />
+          </EuiPortal>
+        )}
+
+        {flyoutContext.isFleetServerFlyoutOpen && (
+          <EuiPortal>
+            <FleetServerFlyout onClose={() => flyoutContext.closeFleetServerFlyout()} />
+          </EuiPortal>
+        )}
       </>
     );
   }

x-pack/plugins/fleet/public/applications/fleet/components/fleet_server_instructions/steps/confirm_fleet_server_connection.tsx

@@ -5,15 +5,15 @@
  * 2.0.
  */
 
-import React, { useContext } from 'react';
+import React from 'react';
 
 import type { EuiStepProps } from '@elastic/eui';
 import { EuiButton, EuiLoadingSpinner, EuiSpacer } from '@elastic/eui';
 import { EuiText } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 
-import { agentFlyoutContext } from '../../../sections/agents';
+import { useFlyoutContext } from '../../../hooks';
 
 export function getConfirmFleetServerConnectionStep({
   disabled,
@@ -40,7 +40,7 @@ export function getConfirmFleetServerConnectionStep({
 const ConfirmFleetServerConnectionStepContent: React.FunctionComponent<{
   isFleetServerReady: boolean;
 }> = ({ isFleetServerReady }) => {
-  const addAgentFlyout = useContext(agentFlyoutContext);
+  const flyoutContext = useFlyoutContext();
 
   return isFleetServerReady ? (
     <>
@@ -53,7 +53,7 @@ const ConfirmFleetServerConnectionStepContent: React.FunctionComponent<{
 
       <EuiSpacer size="m" />
 
-      <EuiButton color="primary" onClick={addAgentFlyout?.openEnrollmentFlyout}>
+      <EuiButton color="primary" onClick={flyoutContext.openEnrollmentFlyout}>
         <FormattedMessage
           id="xpack.fleet.fleetServerFlyout.continueEnrollingButton"
           defaultMessage="Continue enrolling Elastic Agent"

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

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { useState, useMemo, useCallback, useRef, useEffect, useContext } from 'react';
+import React, { useState, useMemo, useCallback, useRef, useEffect } from 'react';
 import {
   EuiBasicTable,
   EuiFlexGroup,
@@ -31,6 +31,7 @@ import {
   useBreadcrumbs,
   useKibanaVersion,
   useStartServices,
+  useFlyoutContext,
 } from '../../../hooks';
 import { AgentEnrollmentFlyout, AgentPolicySummaryLine } from '../../../components';
 import { AgentStatusKueryHelper, isAgentUpgradeable } from '../../../services';
@@ -45,8 +46,6 @@ import {
 } from '../components';
 import { useFleetServerUnhealthy } from '../hooks/use_fleet_server_unhealthy';
 
-import { agentFlyoutContext } from '..';
-
 import { AgentTableHeader } from './components/table_header';
 import type { SelectionMode } from './components/types';
 import { SearchAndFilterBar } from './components/search_and_filter_bar';
@@ -125,7 +124,7 @@ export const AgentListPage: React.FunctionComponent<{}> = () => {
     isOpen: false,
   });
 
-  const flyoutContext = useContext(agentFlyoutContext);
+  const flyoutContext = useFlyoutContext();
 
   // Agent actions states
   const [agentToReassign, setAgentToReassign] = useState<Agent | undefined>(undefined);
@@ -330,7 +329,7 @@ export const AgentListPage: React.FunctionComponent<{}> = () => {
   // Fleet server unhealthy status
   const { isUnhealthy: isFleetServerUnhealthy } = useFleetServerUnhealthy();
   const onClickAddFleetServer = useCallback(() => {
-    flyoutContext?.openFleetServerFlyout();
+    flyoutContext.openFleetServerFlyout();
   }, [flyoutContext]);
 
   const columns = [

x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_requirements_page/components/enrollment_recommendation.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { useContext } from 'react';
+import React from 'react';
 import {
   EuiButton,
   EuiButtonEmpty,
@@ -17,14 +17,12 @@ import {
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 
-import { useStartServices } from '../../../../hooks';
-
-import { agentFlyoutContext } from '../..';
+import { useFlyoutContext, useStartServices } from '../../../../hooks';
 
 export const EnrollmentRecommendation: React.FunctionComponent<{
   showStandaloneTab: () => void;
 }> = ({ showStandaloneTab }) => {
-  const flyoutContext = useContext(agentFlyoutContext);
+  const flyoutContext = useFlyoutContext();
 
   const { docLinks } = useStartServices();
 

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

@@ -5,14 +5,21 @@
  * 2.0.
  */
 
-import React, { createContext, useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { Router, Route, Switch, useHistory } from 'react-router-dom';
-import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiPortal } from '@elastic/eui';
+import { EuiButton, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 
 import { FLEET_ROUTING_PATHS } from '../../constants';
-import { Loading, Error, AgentEnrollmentFlyout, FleetServerFlyout } from '../../components';
-import { useConfig, useFleetStatus, useBreadcrumbs, useAuthz, useGetSettings } from '../../hooks';
+import { Loading, Error } from '../../components';
+import {
+  useConfig,
+  useFleetStatus,
+  useBreadcrumbs,
+  useAuthz,
+  useGetSettings,
+  useFlyoutContext,
+} from '../../hooks';
 import { DefaultLayout, WithoutHeaderLayout } from '../../layouts';
 
 import { AgentListPage } from './agent_list_page';
@@ -21,30 +28,16 @@ import { AgentDetailsPage } from './agent_details_page';
 import { NoAccessPage } from './error_pages/no_access';
 import { FleetServerUpgradeModal } from './components/fleet_server_upgrade_modal';
 
-// TODO: Move all instances of toggling these flyouts to a global context object to avoid cases in which
-// we can render duplicate "stacked" flyouts
-export const agentFlyoutContext = createContext<
-  | {
-      openEnrollmentFlyout: () => void;
-      closeEnrollmentFlyout: () => void;
-      openFleetServerFlyout: () => void;
-      closeFleetServerFlyout: () => void;
-    }
-  | undefined
->(undefined);
-
 export const AgentsApp: React.FunctionComponent = () => {
   useBreadcrumbs('agent_list');
   const history = useHistory();
   const { agents } = useConfig();
   const hasFleetAllPrivileges = useAuthz().fleet.all;
   const fleetStatus = useFleetStatus();
+  const flyoutContext = useFlyoutContext();
 
   const settings = useGetSettings();
 
-  const [isEnrollmentFlyoutOpen, setIsEnrollmentFlyoutOpen] = useState(false);
-  const [isFleetServerFlyoutOpen, setIsFleetServerFlyoutOpen] = useState(false);
-
   const [fleetServerModalVisible, setFleetServerModalVisible] = useState(false);
   const onCloseFleetServerModal = useCallback(() => {
     setFleetServerModalVisible(false);
@@ -100,7 +93,7 @@ export const AgentsApp: React.FunctionComponent = () => {
           <EuiButton
             fill
             iconType="plusInCircle"
-            onClick={() => setIsEnrollmentFlyoutOpen(true)}
+            onClick={() => flyoutContext.openEnrollmentFlyout()}
             data-test-subj="addAgentBtnTop"
           >
             <FormattedMessage id="xpack.fleet.addAgentButton" defaultMessage="Add Agent" />
@@ -111,49 +104,24 @@ export const AgentsApp: React.FunctionComponent = () => {
   ) : undefined;
 
   return (
-    <agentFlyoutContext.Provider
-      value={{
-        openEnrollmentFlyout: () => setIsEnrollmentFlyoutOpen(true),
-        closeEnrollmentFlyout: () => setIsEnrollmentFlyoutOpen(false),
-        openFleetServerFlyout: () => setIsFleetServerFlyoutOpen(true),
-        closeFleetServerFlyout: () => setIsFleetServerFlyoutOpen(false),
-      }}
-    >
-      <Router history={history}>
-        <Switch>
-          <Route path={FLEET_ROUTING_PATHS.agent_details}>
-            <AgentDetailsPage />
-          </Route>
-          <Route path={FLEET_ROUTING_PATHS.agents}>
-            <DefaultLayout section="agents" rightColumn={rightColumn}>
-              {fleetServerModalVisible && (
-                <FleetServerUpgradeModal onClose={onCloseFleetServerModal} />
-              )}
-              {hasOnlyFleetServerMissingRequirement ? (
-                <FleetServerRequirementPage showEnrollmentRecommendation={false} />
-              ) : (
-                <AgentListPage />
-              )}
-            </DefaultLayout>
-          </Route>
-        </Switch>
-
-        {isEnrollmentFlyoutOpen && (
-          <EuiPortal>
-            <AgentEnrollmentFlyout
-              defaultMode="standalone"
-              isIntegrationFlow={true}
-              onClose={() => setIsEnrollmentFlyoutOpen(false)}
-            />
-          </EuiPortal>
-        )}
-
-        {isFleetServerFlyoutOpen && (
-          <EuiPortal>
-            <FleetServerFlyout onClose={() => setIsFleetServerFlyoutOpen(false)} />
-          </EuiPortal>
-        )}
-      </Router>
-    </agentFlyoutContext.Provider>
+    <Router history={history}>
+      <Switch>
+        <Route path={FLEET_ROUTING_PATHS.agent_details}>
+          <AgentDetailsPage />
+        </Route>
+        <Route path={FLEET_ROUTING_PATHS.agents}>
+          <DefaultLayout section="agents" rightColumn={rightColumn}>
+            {fleetServerModalVisible && (
+              <FleetServerUpgradeModal onClose={onCloseFleetServerModal} />
+            )}
+            {hasOnlyFleetServerMissingRequirement ? (
+              <FleetServerRequirementPage showEnrollmentRecommendation={false} />
+            ) : (
+              <AgentListPage />
+            )}
+          </DefaultLayout>
+        </Route>
+      </Switch>
+    </Router>
   );
 };

x-pack/plugins/fleet/public/applications/integrations/app.tsx

@@ -7,7 +7,7 @@
 
 import React, { memo } from 'react';
 import type { AppMountParameters } from '@kbn/core/public';
-import { EuiErrorBoundary } from '@elastic/eui';
+import { EuiErrorBoundary, EuiPortal } from '@elastic/eui';
 import type { History } from 'history';
 import { Router, Redirect, Route, Switch } from 'react-router-dom';
 import useObservable from 'react-use/lib/useObservable';
@@ -22,14 +22,17 @@ import type { FleetConfigType, FleetStartServices } from '../../plugin';
 
 import { ConfigContext, FleetStatusProvider, KibanaVersionContext } from '../../hooks';
 
-import { AgentPolicyContextProvider } from './hooks';
+import { FleetServerFlyout } from '../fleet/components';
+
+import { AgentPolicyContextProvider, useFlyoutContext } from './hooks';
 import { INTEGRATIONS_ROUTING_PATHS, pagePathGetters } from './constants';
 
 import type { UIExtensionsStorage } from './types';
 
 import { EPMApp } from './sections/epm';
-import { PackageInstallProvider, UIExtensionsContext } from './hooks';
+import { PackageInstallProvider, UIExtensionsContext, FlyoutContextProvider } from './hooks';
 import { IntegrationsHeader } from './components/header';
+import { AgentEnrollmentFlyout } from './components';
 
 const EmptyContext = () => <></>;
 
@@ -81,9 +84,11 @@ export const IntegrationsAppContext: React.FC<{
                                     notifications={startServices.notifications}
                                     theme$={theme$}
                                   >
-                                    <IntegrationsHeader {...{ setHeaderActionMenu, theme$ }} />
-                                    {children}
-                                    <Chat />
+                                    <FlyoutContextProvider>
+                                      <IntegrationsHeader {...{ setHeaderActionMenu, theme$ }} />
+                                      {children}
+                                      <Chat />
+                                    </FlyoutContextProvider>
                                   </PackageInstallProvider>
                                 </AgentPolicyContextProvider>
                               </Router>
@@ -104,6 +109,8 @@ export const IntegrationsAppContext: React.FC<{
 );
 
 export const AppRoutes = memo(() => {
+  const flyoutContext = useFlyoutContext();
+
   return (
     <>
       <Switch>
@@ -131,6 +138,22 @@ export const AppRoutes = memo(() => {
           }}
         />
       </Switch>
+
+      {flyoutContext.isEnrollmentFlyoutOpen && (
+        <EuiPortal>
+          <AgentEnrollmentFlyout
+            defaultMode="standalone"
+            isIntegrationFlow={true}
+            onClose={() => flyoutContext.closeEnrollmentFlyout()}
+          />
+        </EuiPortal>
+      )}
+
+      {flyoutContext.isFleetServerFlyoutOpen && (
+        <EuiPortal>
+          <FleetServerFlyout onClose={() => flyoutContext.closeFleetServerFlyout()} />
+        </EuiPortal>
+      )}
     </>
   );
 });

x-pack/plugins/fleet/public/hooks/index.ts

@@ -27,3 +27,4 @@ export * from './use_platform';
 export * from './use_agent_policy_refresh';
 export * from './use_package_installations';
 export * from './use_agent_enrollment_flyout_data';
+export * from './use_flyout_context';