From fb7b596841be2c115cd2ef78d62eeaf5d994aa78 Mon Sep 17 00:00:00 2001
From: Kyle Pollich <kyle.pollich@elastic.co>
Date: Thu, 24 Jun 2021 14:29:56 -0400
Subject: [PATCH] Fix missing setting modal in integrations app (#103317)

---
 .../public/applications/integrations/app.tsx  | 30 +++++++++++++------
 1 file changed, 21 insertions(+), 9 deletions(-)

diff --git a/x-pack/plugins/fleet/public/applications/integrations/app.tsx b/x-pack/plugins/fleet/public/applications/integrations/app.tsx
index c69b6805e0e863..cad51a54d70744 100644
--- a/x-pack/plugins/fleet/public/applications/integrations/app.tsx
+++ b/x-pack/plugins/fleet/public/applications/integrations/app.tsx
@@ -7,7 +7,7 @@
 
 import React, { memo, useEffect, useState } from 'react';
 import type { AppMountParameters } from 'kibana/public';
-import { EuiCode, EuiEmptyPrompt, EuiErrorBoundary, EuiPanel } from '@elastic/eui';
+import { EuiCode, EuiEmptyPrompt, EuiErrorBoundary, EuiPanel, EuiPortal } from '@elastic/eui';
 import type { History } from 'history';
 import { createHashHistory } from 'history';
 import { Router, Redirect, Route, Switch } from 'react-router-dom';
@@ -29,10 +29,10 @@ import type { FleetConfigType, FleetStartServices } from '../../plugin';
 import { KibanaContextProvider } from '../../../../../../src/plugins/kibana_react/public';
 import { EuiThemeProvider } from '../../../../../../src/plugins/kibana_react/common';
 
-import { AgentPolicyContextProvider } from './hooks';
+import { AgentPolicyContextProvider, useUrlModal } from './hooks';
 import { INTEGRATIONS_ROUTING_PATHS } from './constants';
 
-import { Error, Loading } from './components';
+import { Error, Loading, SettingFlyout } from './components';
 
 import type { UIExtensionsStorage } from './types';
 
@@ -234,12 +234,24 @@ export const IntegrationsAppContext: React.FC<{
 );
 
 export const AppRoutes = memo(() => {
+  const { modal, setModal } = useUrlModal();
   return (
-    <Switch>
-      <Route path={INTEGRATIONS_ROUTING_PATHS.integrations}>
-        <EPMApp />
-      </Route>
-      <Redirect to={INTEGRATIONS_ROUTING_PATHS.integrations_all} />
-    </Switch>
+    <>
+      {modal === 'settings' && (
+        <EuiPortal>
+          <SettingFlyout
+            onClose={() => {
+              setModal(null);
+            }}
+          />
+        </EuiPortal>
+      )}
+      <Switch>
+        <Route path={INTEGRATIONS_ROUTING_PATHS.integrations}>
+          <EPMApp />
+        </Route>
+        <Redirect to={INTEGRATIONS_ROUTING_PATHS.integrations_all} />
+      </Switch>
+    </>
   );
 });