diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/empty_states/empty_states.test.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/empty_states/empty_states.test.tsx index 2d2f92c2f7b1f..b76cc73a996b4 100644 --- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/empty_states/empty_states.test.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/empty_states/empty_states.test.tsx @@ -12,8 +12,8 @@ import { EuiEmptyPrompt, EuiButton, EuiCode, EuiLoadingContent } from '@elastic/ import { FormattedMessage } from '@kbn/i18n/react'; import { shallowWithIntl } from '../../../__mocks__'; -jest.mock('../../utils/get_username', () => ({ getUserName: jest.fn() })); -import { getUserName } from '../../utils/get_username'; +jest.mock('../../../shared/get_username', () => ({ getUserName: jest.fn() })); +import { getUserName } from '../../../shared/get_username'; jest.mock('../../../shared/telemetry', () => ({ sendTelemetry: jest.fn(), 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 8ee038f33971a..b86b3caceefca 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 @@ -10,8 +10,8 @@ import { FormattedMessage } from '@kbn/i18n/react'; import { SetAppSearchBreadcrumbs as SetBreadcrumbs } from '../../../shared/kibana_breadcrumbs'; import { SendAppSearchTelemetry as SendTelemetry } from '../../../shared/telemetry'; +import { getUserName } from '../../../shared/get_username'; import { EngineOverviewHeader } from '../engine_overview_header'; -import { getUserName } from '../../utils/get_username'; import './empty_states.scss'; diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/setup_guide/setup_guide.test.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/setup_guide/setup_guide.test.tsx index 4a07e950041e7..82cc344d49632 100644 --- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/setup_guide/setup_guide.test.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/setup_guide/setup_guide.test.tsx @@ -6,15 +6,16 @@ import React from 'react'; import { shallow } from 'enzyme'; -import { EuiPageSideBar, EuiSteps } from '@elastic/eui'; +import { SetAppSearchBreadcrumbs as SetBreadcrumbs } from '../../../shared/kibana_breadcrumbs'; +import { SetupGuide as SetupGuideLayout } from '../../../shared/setup_guide'; import { SetupGuide } from './'; describe('SetupGuide', () => { it('renders', () => { const wrapper = shallow(); - expect(wrapper.find(EuiSteps)).toHaveLength(1); - expect(wrapper.find(EuiPageSideBar)).toHaveLength(1); + expect(wrapper.find(SetupGuideLayout)).toHaveLength(1); + expect(wrapper.find(SetBreadcrumbs)).toHaveLength(1); }); }); 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 be39cd6908ee1..dba445e2961bc 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 @@ -5,243 +5,60 @@ */ import React from 'react'; -import { - EuiPage, - EuiPageSideBar, - EuiPageBody, - EuiPageContent, - EuiSpacer, - EuiFlexGroup, - EuiFlexItem, - EuiTitle, - EuiText, - EuiIcon, - EuiSteps, - EuiCode, - EuiCodeBlock, - EuiAccordion, - EuiLink, -} from '@elastic/eui'; +import { EuiSpacer, EuiTitle, EuiText } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n/react'; import { i18n } from '@kbn/i18n'; +import { SetupGuide as SetupGuideLayout } from '../../../shared/setup_guide'; import { SetAppSearchBreadcrumbs as SetBreadcrumbs } from '../../../shared/kibana_breadcrumbs'; import { SendAppSearchTelemetry as SendTelemetry } from '../../../shared/telemetry'; - import GettingStarted from '../../assets/getting_started.png'; -import './setup_guide.scss'; - -export const SetupGuide: React.FC = () => { - return ( - - - - - - - - - - - - - - - - - - -

- -

-
-
-
- - {i18n.translate('xpack.enterpriseSearch.setupGuide.videoAlt', - +export const SetupGuide: React.FC = () => ( + + + - -

- -

-
- - -

- -

-
-
+ + {i18n.translate('xpack.enterpriseSearch.appSearch.setupGuide.videoAlt', + - - - -

- config/kibana.yml, - configSetting: enterpriseSearch.host, - }} - /> -

- - enterpriseSearch.host: 'http://localhost:3002' - - - ), - }, - { - title: i18n.translate('xpack.enterpriseSearch.setupGuide.step2.title', { - defaultMessage: 'Reload your Kibana instance', - }), - children: ( - -

- -

-

- - Elasticsearch Native Auth - - ), - }} - /> -

-
- ), - }, - { - title: i18n.translate('xpack.enterpriseSearch.setupGuide.step3.title', { - defaultMessage: 'Troubleshooting issues', - }), - children: ( - <> - - -

- -

-
-
- - - -

- -

-
-
- - - -

- - Standard Auth - - ), - }} - /> -

-
-
- - ), - }, - ]} - /> -
-
-
- ); -}; + +

+ +

+
+ + +

+ +

+
+ +); diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/utils/get_username.test.ts b/x-pack/plugins/enterprise_search/public/applications/shared/get_username/get_username.test.ts similarity index 100% rename from x-pack/plugins/enterprise_search/public/applications/app_search/utils/get_username.test.ts rename to x-pack/plugins/enterprise_search/public/applications/shared/get_username/get_username.test.ts diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/utils/get_username.ts b/x-pack/plugins/enterprise_search/public/applications/shared/get_username/get_username.ts similarity index 100% rename from x-pack/plugins/enterprise_search/public/applications/app_search/utils/get_username.ts rename to x-pack/plugins/enterprise_search/public/applications/shared/get_username/get_username.ts diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/get_username/index.ts b/x-pack/plugins/enterprise_search/public/applications/shared/get_username/index.ts new file mode 100644 index 0000000000000..efc58065784fb --- /dev/null +++ b/x-pack/plugins/enterprise_search/public/applications/shared/get_username/index.ts @@ -0,0 +1,7 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +export { getUserName } from './get_username'; diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/setup_guide/index.ts b/x-pack/plugins/enterprise_search/public/applications/shared/setup_guide/index.ts new file mode 100644 index 0000000000000..c367424d375f9 --- /dev/null +++ b/x-pack/plugins/enterprise_search/public/applications/shared/setup_guide/index.ts @@ -0,0 +1,7 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +export { SetupGuide } from './setup_guide'; diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/setup_guide/setup_guide.scss b/x-pack/plugins/enterprise_search/public/applications/shared/setup_guide/setup_guide.scss similarity index 100% rename from x-pack/plugins/enterprise_search/public/applications/app_search/components/setup_guide/setup_guide.scss rename to x-pack/plugins/enterprise_search/public/applications/shared/setup_guide/setup_guide.scss diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/setup_guide/setup_guide.test.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/setup_guide/setup_guide.test.tsx new file mode 100644 index 0000000000000..0423ae61779af --- /dev/null +++ b/x-pack/plugins/enterprise_search/public/applications/shared/setup_guide/setup_guide.test.tsx @@ -0,0 +1,44 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import React from 'react'; +import { shallow } from 'enzyme'; +import { EuiSteps, EuiIcon, EuiLink } from '@elastic/eui'; + +import { mountWithContext } from '../../__mocks__'; + +import { SetupGuide } from './'; + +describe('SetupGuide', () => { + it('renders', () => { + const wrapper = shallow( + +

Wow!

+
+ ); + + expect(wrapper.find('h1').text()).toEqual('Enterprise Search'); + expect(wrapper.find(EuiIcon).prop('type')).toEqual('logoEnterpriseSearch'); + expect(wrapper.find('[data-test-subj="test"]').text()).toEqual('Wow!'); + expect(wrapper.find(EuiSteps)).toHaveLength(1); + }); + + it('renders with optional auth links', () => { + const wrapper = mountWithContext( + + Baz + + ); + + expect(wrapper.find(EuiLink).first().prop('href')).toEqual('http://bar.com'); + expect(wrapper.find(EuiLink).last().prop('href')).toEqual('http://foo.com'); + }); +}); diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/setup_guide/setup_guide.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/setup_guide/setup_guide.tsx new file mode 100644 index 0000000000000..4ebffea10aa12 --- /dev/null +++ b/x-pack/plugins/enterprise_search/public/applications/shared/setup_guide/setup_guide.tsx @@ -0,0 +1,226 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import React from 'react'; +import { + EuiPage, + EuiPageSideBar, + EuiPageBody, + EuiPageContent, + EuiSpacer, + EuiFlexGroup, + EuiFlexItem, + EuiTitle, + EuiText, + EuiIcon, + EuiSteps, + EuiCode, + EuiCodeBlock, + EuiAccordion, + EuiLink, +} from '@elastic/eui'; +import { FormattedMessage } from '@kbn/i18n/react'; +import { i18n } from '@kbn/i18n'; + +import './setup_guide.scss'; + +/** + * Shared Setup Guide component. Sidebar content and product name/links are + * customizable, but the basic layout and instruction steps are DRYed out + */ + +interface ISetupGuideProps { + children: React.ReactNode; + productName: string; + productEuiIcon: 'logoAppSearch' | 'logoWorkplaceSearch' | 'logoEnterpriseSearch'; + standardAuthLink?: string; + elasticsearchNativeAuthLink?: string; +} + +export const SetupGuide: React.FC = ({ + children, + productName, + productEuiIcon, + standardAuthLink, + elasticsearchNativeAuthLink, +}) => ( + + + + + + + + + + + + + + + +

{productName}

+
+
+
+ + {children} +
+ + + + +

+ config/kibana.yml, + configSetting: enterpriseSearch.host, + }} + /> +

+ + enterpriseSearch.host: 'http://localhost:3002' + + + ), + }, + { + title: i18n.translate('xpack.enterpriseSearch.setupGuide.step2.title', { + defaultMessage: 'Reload your Kibana instance', + }), + children: ( + +

+ +

+

+ + Elasticsearch Native Auth + + ) : ( + 'Elasticsearch Native Auth' + ), + }} + /> +

+
+ ), + }, + { + title: i18n.translate('xpack.enterpriseSearch.setupGuide.step3.title', { + defaultMessage: 'Troubleshooting issues', + }), + children: ( + <> + + +

+ +

+
+
+ + + +

+ +

+
+
+ + + +

+ + Standard Auth + + ) : ( + 'Standard Auth' + ), + }} + /> +

+
+
+ + ), + }, + ]} + /> +
+
+
+);