Skip to content

Commit

Permalink
[App Search] Convert Engines overview & engine creation to new page t…
Browse files Browse the repository at this point in the history 
…emplate (elastic#102677) (elastic#102769)

* Convert Engine Creation page to new page template

+ simplify EuiForm/form to 1 level of nesting

* Convert Meta Engine Creation page to new page template

* Initial conversion of Engines overview to new page template

* Engines Overview: simplify loading & empty state to use new page template props

* Engines Overview: simplify header

- now that the header/actions, chrome/telemetry, & empty state etc. are all DRY'd out by the template, there's no need for a separate header component
- we can simply dry out the header action, which will shortly be removed with the 7.14 launch

- note: for empty state changes: mostly indenting, the new template automatically creates a subdued panel for us in empty state so no need to include one manually

* Fix broken test mocks

I definitely should not have been importing the index file I'm mocking, but why did this only break now?? :psyduck:

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

Co-authored-by: Constance <constancecchen@users.noreply.github.com>
  • Loading branch information
@kibanamachine
kibanamachine and Constance authored Jun 21, 2021
1 parent 859d3ed commit ed5e184
Show file tree
Hide file tree
Showing 14 changed files with 309 additions and 415 deletions.
2 changes: 1 addition & 1 deletion ...k/plugins/enterprise_search/public/applications/app_search/__mocks__/engine_logic.mock.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
*/

import { EngineDetails } from '../components/engine/types';
import { ENGINES_TITLE } from '../components/engines';
import { ENGINES_TITLE } from '../components/engines/constants';
import { generateEncodedPath } from '../utils/encode_path_params';

export const mockEngineValues = {
Expand Down
146 changes: 72 additions & 74 deletions ...rise_search/public/applications/app_search/components/engine_creation/engine_creation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,15 +16,13 @@ import {
EuiFlexItem,
EuiFieldText,
EuiSelect,
EuiPageHeader,
EuiPageContent,
EuiPanel,
EuiSpacer,
EuiTitle,
EuiButton,
} from '@elastic/eui';

import { FlashMessages } from '../../../shared/flash_messages';
import { SetAppSearchChrome as SetPageChrome } from '../../../shared/kibana_chrome';
import { AppSearchPageTemplate } from '../layout';

import {
ALLOWED_CHARS_NOTE,
Expand All @@ -44,77 +42,77 @@ export const EngineCreation: React.FC = () => {
const { setLanguage, setRawName, submitEngine } = useActions(EngineCreationLogic);

return (
<div data-test-subj="EngineCreation">
<SetPageChrome trail={[ENGINE_CREATION_TITLE]} />
<EuiPageHeader pageTitle={ENGINE_CREATION_TITLE} />
<FlashMessages />
<EuiPageContent hasBorder>
<EuiForm>
<form
data-test-subj="EngineCreationForm"
onSubmit={(e) => {
e.preventDefault();
submitEngine();
}}
>
<EuiTitle>
<h2>{ENGINE_CREATION_FORM_TITLE}</h2>
</EuiTitle>
<EuiSpacer />
<EuiFlexGroup>
<EuiFlexItem>
<EuiFormRow
data-test-subj="EngineCreationNameFormRow"
label={ENGINE_CREATION_FORM_ENGINE_NAME_LABEL}
helpText={
name.length > 0 && rawName !== name ? (
<>
{SANITIZED_NAME_NOTE} <strong>{name}</strong>
</>
) : (
ALLOWED_CHARS_NOTE
)
}
<AppSearchPageTemplate
pageChrome={[ENGINE_CREATION_TITLE]}
pageHeader={{ pageTitle: ENGINE_CREATION_TITLE }}
data-test-subj="EngineCreation"
>
<EuiPanel hasBorder>
<EuiForm
component="form"
data-test-subj="EngineCreationForm"
onSubmit={(e) => {
e.preventDefault();
submitEngine();
}}
>
<EuiTitle>
<h2>{ENGINE_CREATION_FORM_TITLE}</h2>
</EuiTitle>
<EuiSpacer />
<EuiFlexGroup>
<EuiFlexItem>
<EuiFormRow
data-test-subj="EngineCreationNameFormRow"
label={ENGINE_CREATION_FORM_ENGINE_NAME_LABEL}
helpText={
name.length > 0 && rawName !== name ? (
<>
{SANITIZED_NAME_NOTE} <strong>{name}</strong>
</>
) : (
ALLOWED_CHARS_NOTE
)
}
fullWidth
>
<EuiFieldText
name="engine-name"
value={rawName}
onChange={(event) => setRawName(event.currentTarget.value)}
autoComplete="off"
fullWidth
>
<EuiFieldText
name="engine-name"
value={rawName}
onChange={(event) => setRawName(event.currentTarget.value)}
autoComplete="off"
fullWidth
data-test-subj="EngineCreationNameInput"
placeholder={ENGINE_CREATION_FORM_ENGINE_NAME_PLACEHOLDER}
autoFocus
/>
</EuiFormRow>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiFormRow label={ENGINE_CREATION_FORM_ENGINE_LANGUAGE_LABEL}>
<EuiSelect
name="engine-language"
value={language}
options={SUPPORTED_LANGUAGES}
data-test-subj="EngineCreationLanguageInput"
onChange={(event) => setLanguage(event.currentTarget.value)}
/>
</EuiFormRow>
</EuiFlexItem>
</EuiFlexGroup>
<EuiSpacer />
<EuiButton
disabled={name.length === 0}
isLoading={isLoading}
type="submit"
data-test-subj="NewEngineSubmitButton"
color="secondary"
fill
>
{ENGINE_CREATION_FORM_SUBMIT_BUTTON_LABEL}
</EuiButton>
</form>
data-test-subj="EngineCreationNameInput"
placeholder={ENGINE_CREATION_FORM_ENGINE_NAME_PLACEHOLDER}
autoFocus
/>
</EuiFormRow>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiFormRow label={ENGINE_CREATION_FORM_ENGINE_LANGUAGE_LABEL}>
<EuiSelect
name="engine-language"
value={language}
options={SUPPORTED_LANGUAGES}
data-test-subj="EngineCreationLanguageInput"
onChange={(event) => setLanguage(event.currentTarget.value)}
/>
</EuiFormRow>
</EuiFlexItem>
</EuiFlexGroup>
<EuiSpacer />
<EuiButton
disabled={name.length === 0}
isLoading={isLoading}
type="submit"
data-test-subj="NewEngineSubmitButton"
color="secondary"
fill
>
{ENGINE_CREATION_FORM_SUBMIT_BUTTON_LABEL}
</EuiButton>
</EuiForm>
</EuiPageContent>
</div>
</EuiPanel>
</AppSearchPageTemplate>
);
};
136 changes: 61 additions & 75 deletions ...prise_search/public/applications/app_search/components/engines/components/empty_state.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import React from 'react';

import { useValues, useActions } from 'kea';

import { EuiPageContent, EuiEmptyPrompt, EuiSpacer } from '@elastic/eui';
import { EuiEmptyPrompt, EuiSpacer } from '@elastic/eui';
import { i18n } from '@kbn/i18n';

import { EuiButtonTo } from '../../../../shared/react_router_helpers';
Expand All @@ -20,86 +20,72 @@ import { ENGINE_CREATION_PATH } from '../../../routes';

import { SampleEngineCreationCta } from '../../sample_engine_creation_cta/sample_engine_creation_cta';

import { EnginesOverviewHeader } from './header';

export const EmptyState: React.FC = () => {
const {
myRole: { canManageEngines },
} = useValues(AppLogic);
const { sendAppSearchTelemetry } = useActions(TelemetryLogic);

return (
<>
<EnginesOverviewHeader />
<EuiPageContent color="subdued">
{canManageEngines ? (
<EuiEmptyPrompt
data-test-subj="AdminEmptyEnginesPrompt"
iconType={EngineIcon}
title={
<h2>
{i18n.translate('xpack.enterpriseSearch.appSearch.emptyState.title', {
defaultMessage: 'Create your first engine',
})}
</h2>
}
titleSize="l"
body={
<p>
{i18n.translate('xpack.enterpriseSearch.appSearch.emptyState.description1', {
defaultMessage:
'An App Search engine stores the documents for your search experience.',
})}
</p>
}
actions={
<>
<EuiButtonTo
data-test-subj="EmptyStateCreateFirstEngineCta"
fill
to={ENGINE_CREATION_PATH}
onClick={() =>
sendAppSearchTelemetry({
action: 'clicked',
metric: 'create_first_engine_button',
})
}
>
{i18n.translate(
'xpack.enterpriseSearch.appSearch.emptyState.createFirstEngineCta',
{ defaultMessage: 'Create an engine' }
)}
</EuiButtonTo>
<EuiSpacer size="xxl" />
<SampleEngineCreationCta />
</>
}
/>
) : (
<EuiEmptyPrompt
data-test-subj="NonAdminEmptyEnginesPrompt"
iconType={EngineIcon}
title={
<h2>
{i18n.translate('xpack.enterpriseSearch.appSearch.emptyState.nonAdmin.title', {
defaultMessage: 'No engines available',
})}
</h2>
}
body={
<p>
{i18n.translate(
'xpack.enterpriseSearch.appSearch.emptyState.nonAdmin.description',
{
defaultMessage:
'Contact your App Search administrator to either create or grant you access to an engine.',
}
)}
</p>
return canManageEngines ? (
<EuiEmptyPrompt
data-test-subj="AdminEmptyEnginesPrompt"
iconType={EngineIcon}
title={
<h2>
{i18n.translate('xpack.enterpriseSearch.appSearch.emptyState.title', {
defaultMessage: 'Create your first engine',
})}
</h2>
}
titleSize="l"
body={
<p>
{i18n.translate('xpack.enterpriseSearch.appSearch.emptyState.description1', {
defaultMessage: 'An App Search engine stores the documents for your search experience.',
})}
</p>
}
actions={
<>
<EuiButtonTo
data-test-subj="EmptyStateCreateFirstEngineCta"
fill
to={ENGINE_CREATION_PATH}
onClick={() =>
sendAppSearchTelemetry({
action: 'clicked',
metric: 'create_first_engine_button',
})
}
/>
)}
</EuiPageContent>
</>
>
{i18n.translate('xpack.enterpriseSearch.appSearch.emptyState.createFirstEngineCta', {
defaultMessage: 'Create an engine',
})}
</EuiButtonTo>
<EuiSpacer size="xxl" />
<SampleEngineCreationCta />
</>
}
/>
) : (
<EuiEmptyPrompt
data-test-subj="NonAdminEmptyEnginesPrompt"
iconType={EngineIcon}
title={
<h2>
{i18n.translate('xpack.enterpriseSearch.appSearch.emptyState.nonAdmin.title', {
defaultMessage: 'No engines available',
})}
</h2>
}
body={
<p>
{i18n.translate('xpack.enterpriseSearch.appSearch.emptyState.nonAdmin.description', {
defaultMessage:
'Contact your App Search administrator to either create or grant you access to an engine.',
})}
</p>
}
/>
);
};
54 changes: 0 additions & 54 deletions ...enterprise_search/public/applications/app_search/components/engines/components/header.tsx
View file

This file was deleted.

3 changes: 1 addition & 2 deletions ...s/enterprise_search/public/applications/app_search/components/engines/components/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
* 2.0.
*/

export { EnginesOverviewHeader } from './header';
export { LoadingState } from './loading_state';
export { LaunchAppSearchButton } from './launch_as_button';
export { EmptyState } from './empty_state';
export { EmptyMetaEnginesState } from './empty_meta_engines_state';
Loading

0 comments on commit ed5e184

Please sign in to comment.