[RAM] Fix edit fly-out (#172737)

Edit Rule fly-out to be wrapped in its own React Query QueryClient
provider
This commit is contained in:
Xavier Mouligneau 2023-12-07 10:13:00 -05:00 committed by GitHub
parent 3f42ee0671
commit f487c7d9a6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 53 additions and 54 deletions

View file

@ -15,7 +15,6 @@ import { RedirectAppLinks } from '@kbn/shared-ux-link-redirect-app';
import { EuiThemeProvider } from '@kbn/kibana-react-plugin/common';
import { InspectorContextProvider } from '@kbn/observability-shared-plugin/public';
import { ObservabilityAIAssistantProvider } from '@kbn/observability-ai-assistant-plugin/public';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { SyntheticsDataViewContextProvider } from './contexts/synthetics_data_view_context';
import { SyntheticsAppProps } from './contexts';
@ -69,8 +68,6 @@ const Application = (props: SyntheticsAppProps) => {
store.dispatch(setBasePath(basePath));
const queryClient = new QueryClient();
return (
<EuiErrorBoundary>
<i18nCore.Context>
@ -84,56 +81,54 @@ const Application = (props: SyntheticsAppProps) => {
}}
>
<ReduxProvider store={store}>
<QueryClientProvider client={queryClient}>
<KibanaContextProvider
services={{
...core,
...plugins,
storage,
data: startPlugins.data,
inspector: startPlugins.inspector,
triggersActionsUi: startPlugins.triggersActionsUi,
observability: startPlugins.observability,
observabilityShared: startPlugins.observabilityShared,
exploratoryView: startPlugins.exploratoryView,
cases: startPlugins.cases,
spaces: startPlugins.spaces,
fleet: startPlugins.fleet,
}}
>
<SyntheticsDataViewContextProvider dataViews={startPlugins.dataViews}>
<ObservabilityAIAssistantProvider
value={startPlugins.observabilityAIAssistant.service}
>
<Router history={appMountParameters.history}>
<EuiThemeProvider darkMode={darkMode}>
<SyntheticsRefreshContextProvider>
<SyntheticsSettingsContextProvider {...props}>
<SyntheticsThemeContextProvider darkMode={darkMode}>
<SyntheticsStartupPluginsContextProvider {...startPlugins}>
<div className={APP_WRAPPER_CLASS} data-test-subj="syntheticsApp">
<RedirectAppLinks
coreStart={{
application: core.application,
}}
>
<InspectorContextProvider>
<PageRouter />
<ActionMenu appMountParameters={appMountParameters} />
<TestNowModeFlyoutContainer />
</InspectorContextProvider>
</RedirectAppLinks>
</div>
</SyntheticsStartupPluginsContextProvider>
</SyntheticsThemeContextProvider>
</SyntheticsSettingsContextProvider>
</SyntheticsRefreshContextProvider>
</EuiThemeProvider>
</Router>
</ObservabilityAIAssistantProvider>
</SyntheticsDataViewContextProvider>
</KibanaContextProvider>
</QueryClientProvider>
<KibanaContextProvider
services={{
...core,
...plugins,
storage,
data: startPlugins.data,
inspector: startPlugins.inspector,
triggersActionsUi: startPlugins.triggersActionsUi,
observability: startPlugins.observability,
observabilityShared: startPlugins.observabilityShared,
exploratoryView: startPlugins.exploratoryView,
cases: startPlugins.cases,
spaces: startPlugins.spaces,
fleet: startPlugins.fleet,
}}
>
<SyntheticsDataViewContextProvider dataViews={startPlugins.dataViews}>
<ObservabilityAIAssistantProvider
value={startPlugins.observabilityAIAssistant.service}
>
<Router history={appMountParameters.history}>
<EuiThemeProvider darkMode={darkMode}>
<SyntheticsRefreshContextProvider>
<SyntheticsSettingsContextProvider {...props}>
<SyntheticsThemeContextProvider darkMode={darkMode}>
<SyntheticsStartupPluginsContextProvider {...startPlugins}>
<div className={APP_WRAPPER_CLASS} data-test-subj="syntheticsApp">
<RedirectAppLinks
coreStart={{
application: core.application,
}}
>
<InspectorContextProvider>
<PageRouter />
<ActionMenu appMountParameters={appMountParameters} />
<TestNowModeFlyoutContainer />
</InspectorContextProvider>
</RedirectAppLinks>
</div>
</SyntheticsStartupPluginsContextProvider>
</SyntheticsThemeContextProvider>
</SyntheticsSettingsContextProvider>
</SyntheticsRefreshContextProvider>
</EuiThemeProvider>
</Router>
</ObservabilityAIAssistantProvider>
</SyntheticsDataViewContextProvider>
</KibanaContextProvider>
</ReduxProvider>
</KibanaThemeProvider>
</i18nCore.Context>

View file

@ -6,16 +6,20 @@
*/
import React from 'react';
import { QueryClientProvider } from '@tanstack/react-query';
import { ConnectorProvider } from '../application/context/connector_context';
import { RuleEdit } from '../application/sections/rule_form';
import type { ConnectorServices, RuleEditProps as AlertEditProps } from '../types';
import { queryClient } from '../application/query_client';
export const getEditRuleFlyoutLazy = (
props: AlertEditProps & { connectorServices: ConnectorServices }
) => {
return (
<ConnectorProvider value={{ services: props.connectorServices }}>
<RuleEdit {...props} />
<QueryClientProvider client={queryClient}>
<RuleEdit {...props} />
</QueryClientProvider>
</ConnectorProvider>
);
};