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
cee-chen · May 7, 2020 · 38703ce · 38703ce
1 parent 128c71a
commit 38703ce
Show file tree

Hide file tree

Showing 11 changed files with 95 additions and 91 deletions.
diff --git a/.../enterprise_search/public/applications/app_search/components/empty_states/empty_state.tsx b/.../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<IAppSearchProps> = ({ appSearchUrl, setBreadcrumbs }) => {
+export const EmptyState: React.FC<> = () => {
+  const { enterpriseSearchUrl } = useContext(KibanaContext) as IKibanaContext;
+
   return (
     <EuiPage restrictWidth className="empty-state">
-      <SetBreadcrumbs setBreadcrumbs={setBreadcrumbs} isRoot />
+      <SetBreadcrumbs isRoot />
 
       <EuiPageBody>
-        <EngineOverviewHeader appSearchUrl={appSearchUrl} />
+        <EngineOverviewHeader />
         <EuiPageContent>
           <EuiEmptyPrompt
             iconType="eyeClosed"
@@ -36,7 +38,7 @@ export const EmptyState: React.FC<IAppSearchProps> = ({ appSearchUrl, setBreadcr
               <EuiButton
                 iconType="popout"
                 fill
-                href={`${appSearchUrl}/as/engines/new`}
+                href={`${enterpriseSearchUrl}/as/engines/new`}
                 target="_blank"
               >
                 Create your first Engine

diff --git a/.../enterprise_search/public/applications/app_search/components/empty_states/error_state.tsx b/.../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<IAppSearchProps> = ({ appSearchUrl, setBreadcrumbs }) => {
+export const ErrorState: ReactFC<> = () => {
+  const { enterpriseSearchUrl } = useContext(KibanaContext) as IKibanaContext;
+
   return (
     <EuiPage restrictWidth className="empty-state">
-      <SetBreadcrumbs setBreadcrumbs={setBreadcrumbs} isRoot />
+      <SetBreadcrumbs isRoot />
 
       <EuiPageBody>
         <EngineOverviewHeader />
@@ -32,7 +34,7 @@ export const ErrorState: ReactFC<IAppSearchProps> = ({ appSearchUrl, setBreadcru
               <>
                 <p>
                   We cannot connect to the App Search instance at the configured host URL:{' '}
-                  <EuiCode>{appSearchUrl}</EuiCode>
+                  <EuiCode>{enterpriseSearchUrl}</EuiCode>
                 </p>
                 <p>
                   Please ensure your App Search host URL is configured correctly within{' '}

diff --git a/...nterprise_search/public/applications/app_search/components/empty_states/loading_state.tsx b/...nterprise_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<IAppSearchProps> = ({ appSearchUrl, setBreadcrumbs }) => {
+export const LoadingState: React.FC<> = () => {
   return (
     <EuiPage restrictWidth className="engine-overview empty-state">
-      <SetBreadcrumbs setBreadcrumbs={setBreadcrumbs} isRoot />
+      <SetBreadcrumbs isRoot />
 
       <EuiPageBody>
-        <EngineOverviewHeader appSearchUrl={appSearchUrl} />
+        <EngineOverviewHeader />
         <EuiPageContent>
           <EuiLoadingContent lines={5} />
           <EuiSpacer size="xxl" />

diff --git a/...nterprise_search/public/applications/app_search/components/empty_states/no_user_state.tsx b/...nterprise_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<IAppSearchProps> = ({ appSearchUrl, setBreadcrumbs }) => {
+export const NoUserState: React.FC<> = () => {
   const username = getUserName();
 
   return (
     <EuiPage restrictWidth className="empty-state">
-      <SetBreadcrumbs setBreadcrumbs={setBreadcrumbs} isRoot />
+      <SetBreadcrumbs isRoot />
 
       <EuiPageBody>
-        <EngineOverviewHeader appSearchUrl={appSearchUrl} />
+        <EngineOverviewHeader />
         <EuiPageContent>
           <EuiEmptyPrompt
             iconType="lock"

diff --git a/...rise_search/public/applications/app_search/components/engine_overview/engine_overview.tsx b/...rise_search/public/applications/app_search/components/engine_overview/engine_overview.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { useEffect, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import {
   EuiPage,
   EuiPageBody,
@@ -16,7 +16,7 @@ import {
 } from '@elastic/eui';
 
 import { SetAppSearchBreadcrumbs as SetBreadcrumbs } from '../../../shared/kibana_breadcrumbs';
-import { IAppSearchProps } from '../../index';
+import { KibanaContext, IKibanaContext } from '../../../index';
 
 import EnginesIcon from '../../assets/engine.svg';
 import MetaEnginesIcon from '../../assets/meta_engine.svg';
@@ -27,8 +27,8 @@ import { EngineTable } from './engine_table';
 
 import './engine_overview.scss';
 
-export const EngineOverview: ReactFC<IAppSearchProps> = 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<IAppSearchProps> = 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 <ErrorState {...props} />;
-  if (hasNoAccount) return <NoUserState {...props} />;
-  if (isLoading) return <LoadingState {...props} />;
-  if (!engines.length) return <EmptyState {...props} />;
+  if (hasErrorConnecting) return <ErrorState />;
+  if (hasNoAccount) return <NoUserState />;
+  if (isLoading) return <LoadingState />;
+  if (!engines.length) return <EmptyState />;
 
   return (
     <EuiPage restrictWidth className="engine-overview">
-      <SetBreadcrumbs {...props} isRoot />
+      <SetBreadcrumbs isRoot />
 
       <EuiPageBody>
-        <EngineOverviewHeader appSearchUrl={appSearchUrl} />
+        <EngineOverviewHeader />
 
         <EuiPageContent>
           <EuiPageContentHeader>
@@ -117,7 +117,6 @@ export const EngineOverview: ReactFC<IAppSearchProps> = props => {
                 pageIndex: enginesPage - 1,
                 onPaginate: setEnginesPage,
               }}
-              appSearchUrl={appSearchUrl}
             />
           </EuiPageContentBody>
 
@@ -140,7 +139,6 @@ export const EngineOverview: ReactFC<IAppSearchProps> = props => {
                     pageIndex: metaEnginesPage - 1,
                     onPaginate: setMetaEnginesPage,
                   }}
-                  appSearchUrl={appSearchUrl}
                 />
               </EuiPageContentBody>
             </>

diff --git a/...erprise_search/public/applications/app_search/components/engine_overview/engine_table.tsx b/...erprise_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<IEngineTableProps> = ({
   data,
   pagination: { totalEngines, pageIndex = 0, onPaginate },
-  appSearchUrl,
 }) => {
+  const { enterpriseSearchUrl } = useContext(KibanaContext) as IKibanaContext;
+
   const columns = [
     {
       field: 'name',
       name: 'Name',
       render: name => (
-        <EuiLink href={`${appSearchUrl}/as/engines/${name}`} target="_blank">
+        <EuiLink href={`${enterpriseSearchUrl}/as/engines/${name}`} target="_blank">
           {name}
         </EuiLink>
       ),
@@ -77,7 +79,7 @@ export const EngineTable: ReactFC<IEngineTableProps> = ({
       name: 'Actions',
       dataType: 'string',
       render: name => (
-        <EuiLink href={`${appSearchUrl}/as/engines/${name}`} target="_blank" color="primary">
+        <EuiLink href={`${enterpriseSearchUrl}/as/engines/${name}`} target="_blank" color="primary">
           Manage
         </EuiLink>
       ),

diff --git a/...blic/applications/app_search/components/engine_overview_header/engine_overview_header.tsx b/...blic/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<IEngineOverviewHeader> = ({ 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/...s/enterprise_search/public/applications/app_search/components/setup_guide/setup_guide.tsx b/...s/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 (
     <EuiPage className="setup-guide">
-      <SetBreadcrumbs {...props} text="Setup Guide" />
+      <SetBreadcrumbs text="Setup Guide" />
       <EuiPageSideBar>
         <EuiText color="subdued" size="s">
           <strong>Setup Guide</strong>

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
@@ -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<IAppSearchProps> = props => (
-  <>
-    <Route exact path="/app_search">
-      {!props.appSearchUrl ? (
-        <Redirect to="/app_search/setup_guide" />
-      ) : (
-        <EngineOverview {...props} />
-      )}
-    </Route>
-    <Route path="/app_search/setup_guide">
-      <SetupGuide {...props} />
-    </Route>
-  </>
-);
+  return (
+    <>
+      <Route exact path="/app_search">
+        {!enterpriseSearchUrl ? <Redirect to="/app_search/setup_guide" /> : <EngineOverview />}
+      </Route>
+      <Route path="/app_search/setup_guide">
+        <SetupGuide />
+      </Route>
+    </>
+  );
+};
diff --git 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(
-    <BrowserRouter basename={params.appBasePath}>
-      <Route exact path="/">
-        {/* This will eventually contain an Enterprise Search landing page,
-        and we'll also actually have a /workplace_search route */}
-        <Redirect to="/app_search" />
-      </Route>
-      <Route path="/app_search">
-        <AppSearch
-          http={core.http}
-          appSearchUrl={config.host}
-          setBreadcrumbs={core.chrome.setBreadcrumbs}
-        />
-      </Route>
-    </BrowserRouter>,
+    <KibanaContext.Provider
+      value={{
+        http: core.http,
+        enterpriseSearchUrl: config.host,
+        setBreadcrumbs: core.chrome.setBreadcrumbs,
+      }}
+    >
+      <BrowserRouter basename={params.appBasePath}>
+        <Route exact path="/">
+          {/* This will eventually contain an Enterprise Search landing page,
+          and we'll also actually have a /workplace_search route */}
+          <Redirect to="/app_search" />
+        </Route>
+        <Route path="/app_search">
+          <AppSearch />
+        </Route>
+      </BrowserRouter>
+    </KibanaContext.Provider>,
     params.element
   );
   return () => ReactDOM.unmountComponentAtNode(params.element);