Skip to content

Commit 122f1e1

Browse files
author
Constance
authored
[App Search] Convert DocumentCreationModal to DocumentCreationFlyout (#86508)
* Convert DocumentCreationModal to a Flyout - Per discussion w/ Davey - it handles longer/detailed content better * Update instances referencing DocumentCreationFlyout * Update flyout children - modal->flyout - add hasBorder, set EuiTitle sizes, add flexgroup to footer buttons
1 parent 8e71720 commit 122f1e1

18 files changed

+181
-158
lines changed

‎x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/constants.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,14 @@
66

77
import { i18n } from '@kbn/i18n';
88

9-
export const MODAL_CANCEL_BUTTON = i18n.translate(
10-
'xpack.enterpriseSearch.appSearch.documentCreation.modalCancel',
9+
export const FLYOUT_ARIA_LABEL_ID = 'documentCreationFlyoutHeadingId';
10+
11+
export const FLYOUT_CANCEL_BUTTON = i18n.translate(
12+
'xpack.enterpriseSearch.appSearch.documentCreation.flyoutCancel',
1113
{ defaultMessage: 'Cancel' }
1214
);
13-
export const MODAL_CONTINUE_BUTTON = i18n.translate(
14-
'xpack.enterpriseSearch.appSearch.documentCreation.modalContinue',
15+
export const FLYOUT_CONTINUE_BUTTON = i18n.translate(
16+
'xpack.enterpriseSearch.appSearch.documentCreation.flyoutContinue',
1517
{ defaultMessage: 'Continue' }
1618
);
1719

‎x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/api_code_example.test.tsx‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import React from 'react';
1111
import { shallow, ShallowWrapper } from 'enzyme';
1212
import { EuiCode, EuiCodeBlock, EuiButtonEmpty } from '@elastic/eui';
1313

14-
import { ApiCodeExample, ModalHeader, ModalBody, ModalFooter } from './api_code_example';
14+
import { ApiCodeExample, FlyoutHeader, FlyoutBody, FlyoutFooter } from './api_code_example';
1515

1616
describe('ApiCodeExample', () => {
1717
const values = {
@@ -29,23 +29,23 @@ describe('ApiCodeExample', () => {
2929

3030
it('renders', () => {
3131
const wrapper = shallow(<ApiCodeExample />);
32-
expect(wrapper.find(ModalHeader)).toHaveLength(1);
33-
expect(wrapper.find(ModalBody)).toHaveLength(1);
34-
expect(wrapper.find(ModalFooter)).toHaveLength(1);
32+
expect(wrapper.find(FlyoutHeader)).toHaveLength(1);
33+
expect(wrapper.find(FlyoutBody)).toHaveLength(1);
34+
expect(wrapper.find(FlyoutFooter)).toHaveLength(1);
3535
});
3636

37-
describe('ModalHeader', () => {
37+
describe('FlyoutHeader', () => {
3838
it('renders', () => {
39-
const wrapper = shallow(<ModalHeader />);
39+
const wrapper = shallow(<FlyoutHeader />);
4040
expect(wrapper.find('h2').text()).toEqual('Indexing by API');
4141
});
4242
});
4343

44-
describe('ModalBody', () => {
44+
describe('FlyoutBody', () => {
4545
let wrapper: ShallowWrapper;
4646

4747
beforeAll(() => {
48-
wrapper = shallow(<ModalBody />);
48+
wrapper = shallow(<FlyoutBody />);
4949
});
5050

5151
it('renders with the full remote Enterprise Search API URL', () => {
@@ -64,9 +64,9 @@ describe('ApiCodeExample', () => {
6464
});
6565
});
6666

67-
describe('ModalFooter', () => {
68-
it('closes the modal', () => {
69-
const wrapper = shallow(<ModalFooter />);
67+
describe('FlyoutFooter', () => {
68+
it('closes the flyout', () => {
69+
const wrapper = shallow(<FlyoutFooter />);
7070

7171
wrapper.find(EuiButtonEmpty).simulate('click');
7272
expect(actions.closeDocumentCreation).toHaveBeenCalled();

‎x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/api_code_example.tsx‎

Lines changed: 25 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,10 @@ import { useValues, useActions } from 'kea';
1111
import { i18n } from '@kbn/i18n';
1212
import { FormattedMessage } from '@kbn/i18n/react';
1313
import {
14-
EuiModalHeader,
15-
EuiModalHeaderTitle,
16-
EuiModalBody,
17-
EuiModalFooter,
14+
EuiFlyoutHeader,
15+
EuiTitle,
16+
EuiFlyoutBody,
17+
EuiFlyoutFooter,
1818
EuiButtonEmpty,
1919
EuiText,
2020
EuiLink,
@@ -30,39 +30,43 @@ import { EngineLogic } from '../../engine';
3030
import { EngineDetails } from '../../engine/types';
3131

3232
import { DOCS_PREFIX } from '../../../routes';
33-
import { DOCUMENTS_API_JSON_EXAMPLE, MODAL_CANCEL_BUTTON } from '../constants';
33+
import {
34+
DOCUMENTS_API_JSON_EXAMPLE,
35+
FLYOUT_ARIA_LABEL_ID,
36+
FLYOUT_CANCEL_BUTTON,
37+
} from '../constants';
3438
import { DocumentCreationLogic } from '../';
3539

3640
export const ApiCodeExample: React.FC = () => (
3741
<>
38-
<ModalHeader />
39-
<ModalBody />
40-
<ModalFooter />
42+
<FlyoutHeader />
43+
<FlyoutBody />
44+
<FlyoutFooter />
4145
</>
4246
);
4347

44-
export const ModalHeader: React.FC = () => {
48+
export const FlyoutHeader: React.FC = () => {
4549
return (
46-
<EuiModalHeader>
47-
<EuiModalHeaderTitle>
48-
<h2>
50+
<EuiFlyoutHeader hasBorder>
51+
<EuiTitle size="m">
52+
<h2 id={FLYOUT_ARIA_LABEL_ID}>
4953
{i18n.translate('xpack.enterpriseSearch.appSearch.documentCreation.api.title', {
5054
defaultMessage: 'Indexing by API',
5155
})}
5256
</h2>
53-
</EuiModalHeaderTitle>
54-
</EuiModalHeader>
57+
</EuiTitle>
58+
</EuiFlyoutHeader>
5559
);
5660
};
5761

58-
export const ModalBody: React.FC = () => {
62+
export const FlyoutBody: React.FC = () => {
5963
const { engineName, engine } = useValues(EngineLogic);
6064
const { apiKey } = engine as EngineDetails;
6165

6266
const documentsApiUrl = getEnterpriseSearchUrl(`/api/as/v1/engines/${engineName}/documents`);
6367

6468
return (
65-
<EuiModalBody>
69+
<EuiFlyoutBody>
6670
<EuiText color="subdued">
6771
<p>
6872
<FormattedMessage
@@ -113,16 +117,16 @@ export const ModalBody: React.FC = () => {
113117
# ]
114118
`)}
115119
</EuiCodeBlock>
116-
</EuiModalBody>
120+
</EuiFlyoutBody>
117121
);
118122
};
119123

120-
export const ModalFooter: React.FC = () => {
124+
export const FlyoutFooter: React.FC = () => {
121125
const { closeDocumentCreation } = useActions(DocumentCreationLogic);
122126

123127
return (
124-
<EuiModalFooter>
125-
<EuiButtonEmpty onClick={closeDocumentCreation}>{MODAL_CANCEL_BUTTON}</EuiButtonEmpty>
126-
</EuiModalFooter>
128+
<EuiFlyoutFooter>
129+
<EuiButtonEmpty onClick={closeDocumentCreation}>{FLYOUT_CANCEL_BUTTON}</EuiButtonEmpty>
130+
</EuiFlyoutFooter>
127131
);
128132
};

‎x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/paste_json_text.test.tsx‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import React from 'react';
1111
import { shallow } from 'enzyme';
1212
import { EuiTextArea, EuiButtonEmpty, EuiButton } from '@elastic/eui';
1313

14-
import { PasteJsonText, ModalHeader, ModalBody, ModalFooter } from './paste_json_text';
14+
import { PasteJsonText, FlyoutHeader, FlyoutBody, FlyoutFooter } from './paste_json_text';
1515

1616
describe('PasteJsonText', () => {
1717
const values = {
@@ -35,22 +35,22 @@ describe('PasteJsonText', () => {
3535

3636
it('renders', () => {
3737
const wrapper = shallow(<PasteJsonText />);
38-
expect(wrapper.find(ModalHeader)).toHaveLength(1);
39-
expect(wrapper.find(ModalBody)).toHaveLength(1);
40-
expect(wrapper.find(ModalFooter)).toHaveLength(1);
38+
expect(wrapper.find(FlyoutHeader)).toHaveLength(1);
39+
expect(wrapper.find(FlyoutBody)).toHaveLength(1);
40+
expect(wrapper.find(FlyoutFooter)).toHaveLength(1);
4141
});
4242

43-
describe('ModalHeader', () => {
43+
describe('FlyoutHeader', () => {
4444
it('renders', () => {
45-
const wrapper = shallow(<ModalHeader />);
45+
const wrapper = shallow(<FlyoutHeader />);
4646
expect(wrapper.find('h2').text()).toEqual('Create documents');
4747
});
4848
});
4949

50-
describe('ModalBody', () => {
50+
describe('FlyoutBody', () => {
5151
it('renders and updates the textarea value', () => {
5252
setMockValues({ ...values, textInput: 'lorem ipsum' });
53-
const wrapper = shallow(<ModalBody />);
53+
const wrapper = shallow(<FlyoutBody />);
5454
const textarea = wrapper.find(EuiTextArea);
5555

5656
expect(textarea.prop('value')).toEqual('lorem ipsum');
@@ -60,16 +60,16 @@ describe('PasteJsonText', () => {
6060
});
6161
});
6262

63-
describe('ModalFooter', () => {
63+
describe('FlyoutFooter', () => {
6464
it('closes the modal', () => {
65-
const wrapper = shallow(<ModalFooter />);
65+
const wrapper = shallow(<FlyoutFooter />);
6666

6767
wrapper.find(EuiButtonEmpty).simulate('click');
6868
expect(actions.closeDocumentCreation).toHaveBeenCalled();
6969
});
7070

7171
it('disables/enables the Continue button based on whether text has been entered', () => {
72-
const wrapper = shallow(<ModalFooter />);
72+
const wrapper = shallow(<FlyoutFooter />);
7373
expect(wrapper.find(EuiButton).prop('isDisabled')).toBe(false);
7474

7575
setMockValues({ ...values, textInput: '' });

‎x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/paste_json_text.tsx‎

Lines changed: 32 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,12 @@ import { useValues, useActions } from 'kea';
99

1010
import { i18n } from '@kbn/i18n';
1111
import {
12-
EuiModalHeader,
13-
EuiModalHeaderTitle,
14-
EuiModalBody,
15-
EuiModalFooter,
12+
EuiFlyoutHeader,
13+
EuiTitle,
14+
EuiFlyoutBody,
15+
EuiFlyoutFooter,
16+
EuiFlexGroup,
17+
EuiFlexItem,
1618
EuiButton,
1719
EuiButtonEmpty,
1820
EuiTextArea,
@@ -22,42 +24,42 @@ import {
2224

2325
import { AppLogic } from '../../../app_logic';
2426

25-
import { MODAL_CANCEL_BUTTON, MODAL_CONTINUE_BUTTON } from '../constants';
27+
import { FLYOUT_ARIA_LABEL_ID, FLYOUT_CANCEL_BUTTON, FLYOUT_CONTINUE_BUTTON } from '../constants';
2628
import { DocumentCreationLogic } from '../';
2729

2830
import './paste_json_text.scss';
2931

3032
export const PasteJsonText: React.FC = () => (
3133
<>
32-
<ModalHeader />
33-
<ModalBody />
34-
<ModalFooter />
34+
<FlyoutHeader />
35+
<FlyoutBody />
36+
<FlyoutFooter />
3537
</>
3638
);
3739

38-
export const ModalHeader: React.FC = () => {
40+
export const FlyoutHeader: React.FC = () => {
3941
return (
40-
<EuiModalHeader>
41-
<EuiModalHeaderTitle>
42-
<h2>
42+
<EuiFlyoutHeader hasBorder>
43+
<EuiTitle size="m">
44+
<h2 id={FLYOUT_ARIA_LABEL_ID}>
4345
{i18n.translate('xpack.enterpriseSearch.appSearch.documentCreation.pasteJsonText.title', {
4446
defaultMessage: 'Create documents',
4547
})}
4648
</h2>
47-
</EuiModalHeaderTitle>
48-
</EuiModalHeader>
49+
</EuiTitle>
50+
</EuiFlyoutHeader>
4951
);
5052
};
5153

52-
export const ModalBody: React.FC = () => {
54+
export const FlyoutBody: React.FC = () => {
5355
const { configuredLimits } = useValues(AppLogic);
5456
const maxDocumentByteSize = configuredLimits?.engine?.maxDocumentByteSize;
5557

5658
const { textInput } = useValues(DocumentCreationLogic);
5759
const { setTextInput } = useActions(DocumentCreationLogic);
5860

5961
return (
60-
<EuiModalBody>
62+
<EuiFlyoutBody>
6163
<EuiText color="subdued">
6264
<p>
6365
{i18n.translate(
@@ -82,20 +84,26 @@ export const ModalBody: React.FC = () => {
8284
fullWidth
8385
rows={12}
8486
/>
85-
</EuiModalBody>
87+
</EuiFlyoutBody>
8688
);
8789
};
8890

89-
export const ModalFooter: React.FC = () => {
91+
export const FlyoutFooter: React.FC = () => {
9092
const { textInput } = useValues(DocumentCreationLogic);
9193
const { closeDocumentCreation } = useActions(DocumentCreationLogic);
9294

9395
return (
94-
<EuiModalFooter>
95-
<EuiButtonEmpty onClick={closeDocumentCreation}>{MODAL_CANCEL_BUTTON}</EuiButtonEmpty>
96-
<EuiButton fill isDisabled={!textInput.length}>
97-
{MODAL_CONTINUE_BUTTON}
98-
</EuiButton>
99-
</EuiModalFooter>
96+
<EuiFlyoutFooter>
97+
<EuiFlexGroup justifyContent="spaceBetween">
98+
<EuiFlexItem grow={false}>
99+
<EuiButtonEmpty onClick={closeDocumentCreation}>{FLYOUT_CANCEL_BUTTON}</EuiButtonEmpty>
100+
</EuiFlexItem>
101+
<EuiFlexItem grow={false}>
102+
<EuiButton fill isDisabled={!textInput.length}>
103+
{FLYOUT_CONTINUE_BUTTON}
104+
</EuiButton>
105+
</EuiFlexItem>
106+
</EuiFlexGroup>
107+
</EuiFlyoutFooter>
100108
);
101109
};

‎x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/show_creation_modes.test.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ describe('ShowCreationModes', () => {
3030
expect(wrapper.find(DocumentCreationButtons)).toHaveLength(1);
3131
});
3232

33-
it('closes the modal', () => {
33+
it('closes the flyout', () => {
3434
wrapper.find(EuiButtonEmpty).simulate('click');
3535
expect(actions.closeDocumentCreation).toHaveBeenCalled();
3636
});

‎x-pack/plugins/enterprise_search/public/applications/app_search/components/document_creation/creation_mode_components/show_creation_modes.tsx‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -9,37 +9,37 @@ import { useActions } from 'kea';
99

1010
import { i18n } from '@kbn/i18n';
1111
import {
12-
EuiModalHeader,
13-
EuiModalHeaderTitle,
14-
EuiModalBody,
15-
EuiModalFooter,
12+
EuiFlyoutHeader,
13+
EuiTitle,
14+
EuiFlyoutBody,
15+
EuiFlyoutFooter,
1616
EuiButtonEmpty,
1717
} from '@elastic/eui';
1818

19-
import { MODAL_CANCEL_BUTTON } from '../constants';
19+
import { FLYOUT_ARIA_LABEL_ID, FLYOUT_CANCEL_BUTTON } from '../constants';
2020
import { DocumentCreationLogic, DocumentCreationButtons } from '../';
2121

2222
export const ShowCreationModes: React.FC = () => {
2323
const { closeDocumentCreation } = useActions(DocumentCreationLogic);
2424

2525
return (
2626
<>
27-
<EuiModalHeader>
28-
<EuiModalHeaderTitle>
29-
<h2>
27+
<EuiFlyoutHeader hasBorder>
28+
<EuiTitle size="m">
29+
<h2 id={FLYOUT_ARIA_LABEL_ID}>
3030
{i18n.translate(
3131
'xpack.enterpriseSearch.appSearch.documentCreation.showCreationModes.title',
3232
{ defaultMessage: 'Add new documents' }
3333
)}
3434
</h2>
35-
</EuiModalHeaderTitle>
36-
</EuiModalHeader>
37-
<EuiModalBody>
35+
</EuiTitle>
36+
</EuiFlyoutHeader>
37+
<EuiFlyoutBody>
3838
<DocumentCreationButtons />
39-
</EuiModalBody>
40-
<EuiModalFooter>
41-
<EuiButtonEmpty onClick={closeDocumentCreation}>{MODAL_CANCEL_BUTTON}</EuiButtonEmpty>
42-
</EuiModalFooter>
39+
</EuiFlyoutBody>
40+
<EuiFlyoutFooter>
41+
<EuiButtonEmpty onClick={closeDocumentCreation}>{FLYOUT_CANCEL_BUTTON}</EuiButtonEmpty>
42+
</EuiFlyoutFooter>
4343
</>
4444
);
4545
};

0 commit comments

Comments
 (0)