From 9945ab4f1bbfd5b3f03fac82643caf2506a3eced Mon Sep 17 00:00:00 2001 From: Kevin Delemme Date: Tue, 5 Nov 2024 15:08:49 -0500 Subject: [PATCH] Fix duplication of context providers --- .../shared_flyout/get_create_slo_flyout.tsx | 79 ------------------- .../shared_flyout/slo_add_form_flyout.tsx | 16 ++-- .../pages/slo_edit/shared_flyout/slo_form.tsx | 36 --------- .../slo/public/plugin.ts | 29 ++++--- .../utils/get_lazy_with_context_providers.tsx | 20 ++++- 5 files changed, 42 insertions(+), 138 deletions(-) delete mode 100644 x-pack/plugins/observability_solution/slo/public/pages/slo_edit/shared_flyout/get_create_slo_flyout.tsx delete mode 100644 x-pack/plugins/observability_solution/slo/public/pages/slo_edit/shared_flyout/slo_form.tsx diff --git a/x-pack/plugins/observability_solution/slo/public/pages/slo_edit/shared_flyout/get_create_slo_flyout.tsx b/x-pack/plugins/observability_solution/slo/public/pages/slo_edit/shared_flyout/get_create_slo_flyout.tsx deleted file mode 100644 index de86a01cd8900..0000000000000 --- a/x-pack/plugins/observability_solution/slo/public/pages/slo_edit/shared_flyout/get_create_slo_flyout.tsx +++ /dev/null @@ -1,79 +0,0 @@ -/* - * 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 React from 'react'; -import { QueryClientProvider } from '@tanstack/react-query'; -import { QueryClient } from '@tanstack/react-query'; -import { Storage } from '@kbn/kibana-utils-plugin/public'; -import { CoreStart } from '@kbn/core/public'; -import { LazyObservabilityPageTemplateProps } from '@kbn/observability-shared-plugin/public'; -import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public'; -import { RecursivePartial } from '@kbn/utility-types'; -import { ObservabilityRuleTypeRegistry } from '@kbn/observability-plugin/public'; -import { ExperimentalFeatures } from '../../../../common/config'; -import { CreateSLOForm } from '../types'; -import { PluginContext } from '../../../context/plugin_context'; -import { SLOPublicPluginsStart, SLORepositoryClient } from '../../../types'; -import { SloAddFormFlyout } from './slo_form'; - -export const getCreateSLOFlyoutLazy = ({ - core, - plugins, - observabilityRuleTypeRegistry, - ObservabilityPageTemplate, - isDev, - kibanaVersion, - isServerless, - experimentalFeatures, - sloClient, -}: { - core: CoreStart; - plugins: SLOPublicPluginsStart; - observabilityRuleTypeRegistry: ObservabilityRuleTypeRegistry; - ObservabilityPageTemplate: React.ComponentType; - isDev?: boolean; - kibanaVersion: string; - isServerless?: boolean; - experimentalFeatures: ExperimentalFeatures; - sloClient: SLORepositoryClient; -}) => { - return ({ - onClose, - initialValues, - }: { - onClose: () => void; - initialValues?: RecursivePartial; - }) => { - const queryClient = new QueryClient(); - return ( - - - - - - - - ); - }; -}; diff --git a/x-pack/plugins/observability_solution/slo/public/pages/slo_edit/shared_flyout/slo_add_form_flyout.tsx b/x-pack/plugins/observability_solution/slo/public/pages/slo_edit/shared_flyout/slo_add_form_flyout.tsx index c3b51a0058fed..98c76b190aa1a 100644 --- a/x-pack/plugins/observability_solution/slo/public/pages/slo_edit/shared_flyout/slo_add_form_flyout.tsx +++ b/x-pack/plugins/observability_solution/slo/public/pages/slo_edit/shared_flyout/slo_add_form_flyout.tsx @@ -4,19 +4,20 @@ * 2.0; you may not use this file except in compliance with the Elastic License * 2.0. */ -import { FormattedMessage } from '@kbn/i18n-react'; -import React from 'react'; -import { EuiTitle, EuiFlyoutHeader, EuiFlyout, EuiFlyoutBody, EuiFlyoutFooter } from '@elastic/eui'; +import { EuiFlyout, EuiFlyoutBody, EuiFlyoutFooter, EuiFlyoutHeader, EuiTitle } from '@elastic/eui'; +import { FormattedMessage } from '@kbn/i18n-react'; import { RecursivePartial } from '@kbn/utility-types'; import { merge } from 'lodash'; -import { createHtmlPortalNode, OutPortal } from 'react-reverse-portal'; -import { CreateSLOForm } from '../types'; +import React from 'react'; +import { OutPortal, createHtmlPortalNode } from 'react-reverse-portal'; import { SloEditForm } from '../components/slo_edit_form'; +import { CreateSLOForm } from '../types'; export const sloEditFormFooterPortal = createHtmlPortalNode(); -function SloAddFormFlyout({ +// eslint-disable-next-line import/no-default-export +export default function SloAddFormFlyout({ onClose, initialValues, }: { @@ -69,6 +70,3 @@ function SloAddFormFlyout({ ); } - -// eslint-disable-next-line import/no-default-export -export default SloAddFormFlyout; diff --git a/x-pack/plugins/observability_solution/slo/public/pages/slo_edit/shared_flyout/slo_form.tsx b/x-pack/plugins/observability_solution/slo/public/pages/slo_edit/shared_flyout/slo_form.tsx deleted file mode 100644 index 8c105e6159797..0000000000000 --- a/x-pack/plugins/observability_solution/slo/public/pages/slo_edit/shared_flyout/slo_form.tsx +++ /dev/null @@ -1,36 +0,0 @@ -/* - * 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 { lazy } from 'react'; -import React, { Suspense } from 'react'; -import { EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner, EuiLoadingSpinnerProps } from '@elastic/eui'; - -function CenterJustifiedSpinner({ size }: { size: EuiLoadingSpinnerProps['size'] }) { - return ( - - - - - - ); -} - -function suspendedComponentWithProps( - ComponentToSuspend: React.ComponentType, - size?: EuiLoadingSpinnerProps['size'] -) { - return (props: T) => ( - }> - {/* @ts-expect-error upgrade typescript v4.9.5 */} - - - ); -} - -export const SloAddFormFlyout = suspendedComponentWithProps( - lazy(() => import('./slo_add_form_flyout')) -); diff --git a/x-pack/plugins/observability_solution/slo/public/plugin.ts b/x-pack/plugins/observability_solution/slo/public/plugin.ts index 23bad61ee045d..e61910e108a7d 100644 --- a/x-pack/plugins/observability_solution/slo/public/plugin.ts +++ b/x-pack/plugins/observability_solution/slo/public/plugin.ts @@ -15,6 +15,7 @@ import { PluginInitializerContext, } from '@kbn/core/public'; import { DefaultClientOptions, createRepositoryClient } from '@kbn/server-route-repository-client'; +import { lazy } from 'react'; import { BehaviorSubject, firstValueFrom } from 'rxjs'; import { PLUGIN_NAME, sloAppId } from '../common'; import { ExperimentalFeatures, SLOConfig } from '../common/config'; @@ -28,7 +29,6 @@ import { SloOverviewEmbeddableState } from './embeddable/slo/overview/types'; import { SloDetailsLocatorDefinition } from './locators/slo_details'; import { SloEditLocatorDefinition } from './locators/slo_edit'; import { SloListLocatorDefinition } from './locators/slo_list'; -import { getCreateSLOFlyoutLazy } from './pages/slo_edit/shared_flyout/get_create_slo_flyout'; import { registerBurnRateRuleType } from './rules/register_burn_rate_rule_type'; import type { SLOPublicPluginsSetup, @@ -200,18 +200,23 @@ export class SLOPlugin const kibanaVersion = this.initContext.env.packageInfo.version; const sloClient = createRepositoryClient(core); + const lazyWithContextProviders = getLazyWithContextProviders({ + core, + isDev: this.initContext.env.mode.dev, + kibanaVersion, + observabilityRuleTypeRegistry: plugins.observability.observabilityRuleTypeRegistry, + ObservabilityPageTemplate: plugins.observabilityShared.navigation.PageTemplate, + plugins, + isServerless: !!plugins.serverless, + experimentalFeatures: this.experimentalFeatures, + sloClient, + }); + return { - getCreateSLOFlyout: getCreateSLOFlyoutLazy({ - core, - isDev: this.initContext.env.mode.dev, - kibanaVersion, - observabilityRuleTypeRegistry: plugins.observability.observabilityRuleTypeRegistry, - ObservabilityPageTemplate: plugins.observabilityShared.navigation.PageTemplate, - plugins, - isServerless: !!plugins.serverless, - experimentalFeatures: this.experimentalFeatures, - sloClient, - }), + getCreateSLOFlyout: lazyWithContextProviders( + lazy(() => import('./pages/slo_edit/shared_flyout/slo_add_form_flyout')), + { spinnerSize: 'm' } + ), }; } diff --git a/x-pack/plugins/observability_solution/slo/public/utils/get_lazy_with_context_providers.tsx b/x-pack/plugins/observability_solution/slo/public/utils/get_lazy_with_context_providers.tsx index afd615daa8df7..a43aa9e7bff59 100644 --- a/x-pack/plugins/observability_solution/slo/public/utils/get_lazy_with_context_providers.tsx +++ b/x-pack/plugins/observability_solution/slo/public/utils/get_lazy_with_context_providers.tsx @@ -5,6 +5,7 @@ * 2.0. */ +import { EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner, EuiLoadingSpinnerProps } from '@elastic/eui'; import { CoreStart } from '@kbn/core/public'; import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public'; import { Storage } from '@kbn/kibana-utils-plugin/public'; @@ -30,6 +31,10 @@ interface Props { export type LazyWithContextProviders = ReturnType; +interface Options { + spinnerSize?: EuiLoadingSpinnerProps['size']; +} + export const getLazyWithContextProviders = ({ core, @@ -42,7 +47,8 @@ export const getLazyWithContextProviders = experimentalFeatures, sloClient, }: Props) => - (LazyComponent: React.LazyExoticComponent): React.FunctionComponent => { + (LazyComponent: React.LazyExoticComponent, options?: Options): React.FunctionComponent => { + const { spinnerSize = 'xl' } = options ?? {}; const queryClient = new QueryClient(); return (props) => ( - + }> @@ -73,3 +79,13 @@ export const getLazyWithContextProviders = ); }; + +function LoadingSpinner({ size }: { size: EuiLoadingSpinnerProps['size'] }) { + return ( + + + + + + ); +}