From 38703ce56b749855ae29ddba69ec5c54a61c7659 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Wed, 22 Apr 2020 18:41:51 -0700 Subject: [PATCH] Refactor top-level Kibana props to a global context state - rather them passing them around verbosely as props, the components that need them should be able to call the useContext hook + Remove IAppSearchProps in favor of IKibanaContext + Also rename `appSearchUrl` to `enterpriseSearchUrl`, since this context will contained shared/Kibana-wide values/actions useful to both AS and WS --- .../components/empty_states/empty_state.tsx | 14 +++--- .../components/empty_states/error_state.tsx | 12 +++--- .../components/empty_states/loading_state.tsx | 8 ++-- .../components/empty_states/no_user_state.tsx | 8 ++-- .../engine_overview/engine_overview.tsx | 22 +++++----- .../engine_overview/engine_table.tsx | 12 +++--- .../engine_overview_header.tsx | 14 +++--- .../components/setup_guide/setup_guide.tsx | 4 +- .../public/applications/app_search/index.tsx | 37 +++++++--------- .../public/applications/index.tsx | 43 ++++++++++++------- .../kibana_breadcrumbs/set_breadcrumbs.tsx | 12 +++--- 11 files changed, 95 insertions(+), 91 deletions(-) diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/empty_states/empty_state.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/empty_states/empty_state.tsx index c2672ec3be085..2055b0b7b54bd 100644 --- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/empty_states/empty_state.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/empty_states/empty_state.tsx @@ -4,23 +4,25 @@ * you may not use this file except in compliance with the Elastic License. */ -import React from 'react'; +import React, { useContext } from 'react'; import { EuiPage, EuiPageBody, EuiPageContent, EuiEmptyPrompt, EuiButton } from '@elastic/eui'; import { SetAppSearchBreadcrumbs as SetBreadcrumbs } from '../../../shared/kibana_breadcrumbs'; -import { IAppSearchProps } from '../../index'; +import { KibanaContext, IKibanaContext } from '../../../index'; import { EngineOverviewHeader } from '../engine_overview_header'; import './empty_states.scss'; -export const EmptyState: React.FC = ({ appSearchUrl, setBreadcrumbs }) => { +export const EmptyState: React.FC<> = () => { + const { enterpriseSearchUrl } = useContext(KibanaContext) as IKibanaContext; + return ( - + - + = ({ appSearchUrl, setBreadcr Create your first Engine diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/empty_states/error_state.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/empty_states/error_state.tsx index 3eec392749c2f..b33a4ea17f756 100644 --- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/empty_states/error_state.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/empty_states/error_state.tsx @@ -4,21 +4,23 @@ * you may not use this file except in compliance with the Elastic License. */ -import React from 'react'; +import React, { useContext } from 'react'; import { EuiPage, EuiPageBody, EuiPageContent, EuiEmptyPrompt, EuiCode } from '@elastic/eui'; import { EuiButton } from '../../../shared/react_router_helpers'; import { SetAppSearchBreadcrumbs as SetBreadcrumbs } from '../../../shared/kibana_breadcrumbs'; -import { IAppSearchProps } from '../../index'; +import { KibanaContext, IKibanaContext } from '../../../index'; import { EngineOverviewHeader } from '../engine_overview_header'; import './empty_states.scss'; -export const ErrorState: ReactFC = ({ appSearchUrl, setBreadcrumbs }) => { +export const ErrorState: ReactFC<> = () => { + const { enterpriseSearchUrl } = useContext(KibanaContext) as IKibanaContext; + return ( - + @@ -32,7 +34,7 @@ export const ErrorState: ReactFC = ({ appSearchUrl, setBreadcru <>

We cannot connect to the App Search instance at the configured host URL:{' '} - {appSearchUrl} + {enterpriseSearchUrl}

Please ensure your App Search host URL is configured correctly within{' '} diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/empty_states/loading_state.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/empty_states/loading_state.tsx index 426716030adc4..5c1d0c744f743 100644 --- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/empty_states/loading_state.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/empty_states/loading_state.tsx @@ -8,19 +8,17 @@ import React from 'react'; import { EuiPage, EuiPageBody, EuiPageContent, EuiSpacer, EuiLoadingContent } from '@elastic/eui'; import { SetAppSearchBreadcrumbs as SetBreadcrumbs } from '../../../shared/kibana_breadcrumbs'; -import { IAppSearchProps } from '../../index'; - import { EngineOverviewHeader } from '../engine_overview_header'; import './empty_states.scss'; -export const LoadingState: React.FC = ({ appSearchUrl, setBreadcrumbs }) => { +export const LoadingState: React.FC<> = () => { return ( - + - + diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/empty_states/no_user_state.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/empty_states/no_user_state.tsx index cc3fc130a7b01..f1ebaed71d95b 100644 --- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/empty_states/no_user_state.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/empty_states/no_user_state.tsx @@ -8,22 +8,20 @@ import React from 'react'; import { EuiPage, EuiPageBody, EuiPageContent, EuiEmptyPrompt, EuiCode } from '@elastic/eui'; import { SetAppSearchBreadcrumbs as SetBreadcrumbs } from '../../../shared/kibana_breadcrumbs'; -import { IAppSearchProps } from '../../index'; - import { EngineOverviewHeader } from '../engine_overview_header'; import { getUserName } from '../../utils/get_username'; import './empty_states.scss'; -export const NoUserState: React.FC = ({ appSearchUrl, setBreadcrumbs }) => { +export const NoUserState: React.FC<> = () => { const username = getUserName(); return ( - + - + = props => { - const { http, appSearchUrl } = props; +export const EngineOverview: ReactFC<> = () => { + const { http } = useContext(KibanaContext) as IKibanaContext; const [isLoading, setIsLoading] = useState(true); const [hasNoAccount, setHasNoAccount] = useState(false); @@ -88,17 +88,17 @@ export const EngineOverview: ReactFC = props => { }, [metaEnginesPage]); // eslint-disable-line // TODO: https://reactjs.org/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of-dependencies - if (hasErrorConnecting) return ; - if (hasNoAccount) return ; - if (isLoading) return ; - if (!engines.length) return ; + if (hasErrorConnecting) return ; + if (hasNoAccount) return ; + if (isLoading) return ; + if (!engines.length) return ; return ( - + - + @@ -117,7 +117,6 @@ export const EngineOverview: ReactFC = props => { pageIndex: enginesPage - 1, onPaginate: setEnginesPage, }} - appSearchUrl={appSearchUrl} /> @@ -140,7 +139,6 @@ export const EngineOverview: ReactFC = props => { pageIndex: metaEnginesPage - 1, onPaginate: setMetaEnginesPage, }} - appSearchUrl={appSearchUrl} /> diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_overview/engine_table.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_overview/engine_table.tsx index 85a51c2f3fc5d..c4ad289bfda6f 100644 --- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_overview/engine_table.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_overview/engine_table.tsx @@ -4,9 +4,11 @@ * you may not use this file except in compliance with the Elastic License. */ -import React from 'react'; +import React, { useContext } from 'react'; import { EuiBasicTable, EuiLink } from '@elastic/eui'; +import { KibanaContext, IKibanaContext } from '../../../index'; + interface IEngineTableProps { data: Array<{ name: string; @@ -19,20 +21,20 @@ interface IEngineTableProps { pageIndex: number; onPaginate(pageIndex: number); }; - appSearchUrl: string; } export const EngineTable: ReactFC = ({ data, pagination: { totalEngines, pageIndex = 0, onPaginate }, - appSearchUrl, }) => { + const { enterpriseSearchUrl } = useContext(KibanaContext) as IKibanaContext; + const columns = [ { field: 'name', name: 'Name', render: name => ( - + {name} ), @@ -77,7 +79,7 @@ export const EngineTable: ReactFC = ({ name: 'Actions', dataType: 'string', render: name => ( - + Manage ), diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_overview_header/engine_overview_header.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_overview_header/engine_overview_header.tsx index e99b286c577c9..14b2d00668c0d 100644 --- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_overview_header/engine_overview_header.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_overview_header/engine_overview_header.tsx @@ -4,20 +4,20 @@ * you may not use this file except in compliance with the Elastic License. */ -import React from 'react'; +import React, { useContext } from 'react'; import { EuiPageHeader, EuiPageHeaderSection, EuiTitle, EuiButton } from '@elastic/eui'; -interface IEngineOverviewHeader { - appSearchUrl?: string; -} +import { KibanaContext, IKibanaContext } from '../../../index'; + +export const EngineOverviewHeader: React.FC<> = () => { + const { enterpriseSearchUrl } = useContext(KibanaContext) as IKibanaContext; -export const EngineOverviewHeader: React.FC = ({ appSearchUrl }) => { const buttonProps = { fill: true, iconType: 'popout', }; - if (appSearchUrl) { - buttonProps.href = `${appSearchUrl}/as`; + if (enterpriseSearchUrl) { + buttonProps.href = `${enterpriseSearchUrl}/as`; buttonProps.target = '_blank'; } else { buttonProps.isDisabled = true; diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/setup_guide/setup_guide.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/setup_guide/setup_guide.tsx index b91fbdf1a19f3..c1bb71bada723 100644 --- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/setup_guide/setup_guide.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/setup_guide/setup_guide.tsx @@ -28,10 +28,10 @@ import { SetAppSearchBreadcrumbs as SetBreadcrumbs } from '../../../shared/kiban import GettingStarted from '../../assets/getting_started.png'; import './setup_guide.scss'; -export const SetupGuide: React.FC<> = props => { +export const SetupGuide: React.FC<> = () => { return ( - + Setup Guide diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/index.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/index.tsx index b7cd6e27696d6..4c1a85358ea14 100644 --- a/x-pack/plugins/enterprise_search/public/applications/app_search/index.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/index.tsx @@ -4,32 +4,25 @@ * you may not use this file except in compliance with the Elastic License. */ -import React from 'react'; +import React, { useContext } from 'react'; import { Route, Redirect } from 'react-router-dom'; -import { HttpHandler } from 'src/core/public'; -import { TSetBreadcrumbs } from '../../../shared/kibana_breadcrumbs'; +import { KibanaContext, IKibanaContext } from '../index'; import { SetupGuide } from './components/setup_guide'; import { EngineOverview } from './components/engine_overview'; -export interface IAppSearchProps { - appSearchUrl?: string; - http(): HttpHandler; - setBreadCrumbs(): TSetBreadcrumbs; -} +export const AppSearch: React.FC<> = () => { + const { enterpriseSearchUrl } = useContext(KibanaContext) as IKibanaContext; -export const AppSearch: React.FC = props => ( - <> - - {!props.appSearchUrl ? ( - - ) : ( - - )} - - - - - -); + return ( + <> + + {!enterpriseSearchUrl ? : } + + + + + + ); +}; diff --git a/x-pack/plugins/enterprise_search/public/applications/index.tsx b/x-pack/plugins/enterprise_search/public/applications/index.tsx index 3a7f5b37a2861..473d395c1e604 100644 --- a/x-pack/plugins/enterprise_search/public/applications/index.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/index.tsx @@ -8,27 +8,40 @@ import React from 'react'; import ReactDOM from 'react-dom'; import { BrowserRouter, Route, Redirect } from 'react-router-dom'; -import { CoreStart, AppMountParams } from 'src/core/public'; +import { CoreStart, AppMountParams, HttpHandler } from 'src/core/public'; import { ClientConfigType } from '../plugin'; +import { TSetBreadcrumbs } from './shared/kibana_breadcrumbs'; import { AppSearch } from './app_search'; +export interface IKibanaContext { + enterpriseSearchUrl?: string; + http(): HttpHandler; + setBreadCrumbs(): TSetBreadcrumbs; +} + +export const KibanaContext = React.createContext(); + export const renderApp = (core: CoreStart, params: AppMountParams, config: ClientConfigType) => { ReactDOM.render( - - - {/* This will eventually contain an Enterprise Search landing page, - and we'll also actually have a /workplace_search route */} - - - - - - , + + + + {/* This will eventually contain an Enterprise Search landing page, + and we'll also actually have a /workplace_search route */} + + + + + + + , params.element ); return () => ReactDOM.unmountComponentAtNode(params.element); diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/kibana_breadcrumbs/set_breadcrumbs.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/kibana_breadcrumbs/set_breadcrumbs.tsx index 7ce1ba1268f98..19ba890e0af0d 100644 --- a/x-pack/plugins/enterprise_search/public/applications/shared/kibana_breadcrumbs/set_breadcrumbs.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/shared/kibana_breadcrumbs/set_breadcrumbs.tsx @@ -4,9 +4,10 @@ * you may not use this file except in compliance with the Elastic License. */ -import React, { useEffect } from 'react'; +import React, { useContext, useEffect } from 'react'; import { useHistory } from 'react-router-dom'; import { Breadcrumb as EuiBreadcrumb } from '@elastic/eui'; +import { KibanaContext, IKibanaContext } from '../../index'; import { appSearchBreadcrumbs } from './generate_breadcrumbs'; /** @@ -18,16 +19,13 @@ export type TSetBreadcrumbs = (breadcrumbs: EuiBreadcrumb[]) => void; interface ISetBreadcrumbsProps { text: string; - setBreadcrumbs(): setBreadcrumbs; isRoot?: boolean; } -export const SetAppSearchBreadcrumbs: React.FC = ({ - text, - setBreadcrumbs, - isRoot, -}) => { +export const SetAppSearchBreadcrumbs: React.FC = ({ text, isRoot }) => { const history = useHistory(); + const { setBreadcrumbs } = useContext(KibanaContext) as IKibanaContext; + const crumb = isRoot ? [] : [{ text, path: history.location.pathname }]; useEffect(() => {