maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

[App Search] Create Engine UI polish (#99281)

Browse source 
* Remove incorrect external icon indicator

davey pls

* Add isLoading state to the Create Engine button

* Add isLoading state to the Create Meta Engine button
This commit is contained in:
Constance 2021-05-05 09:58:06 -07:00 committed by GitHub
parent e0d4acb1b1
commit 1322eee98e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 94 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_creation/engine_creation.test.tsx
View file

@ -15,6 +15,7 @@ import { EngineCreation } from './';
describe('EngineCreation', () => {
const DEFAULT_VALUES = {
isLoading: false,
name: '',
rawName: '',
language: 'Universal',
@ -87,6 +88,15 @@ describe('EngineCreation', () => {
false
);
});
it('passes isLoading state', () => {
setMockValues({ ...DEFAULT_VALUES, isLoading: true });
const wrapper = shallow(<EngineCreation />);
expect(wrapper.find('[data-test-subj="NewEngineSubmitButton"]').prop('isLoading')).toEqual(
true
);
});
});
describe('EngineCreationNameFormRow', () => {

5
x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_creation/engine_creation.tsx
View file

@ -40,7 +40,7 @@ import {
import { EngineCreationLogic } from './engine_creation_logic';
export const EngineCreation: React.FC = () => {
const { name, rawName, language } = useValues(EngineCreationLogic);
const { name, rawName, language, isLoading } = useValues(EngineCreationLogic);
const { setLanguage, setRawName, submitEngine } = useActions(EngineCreationLogic);
return (
@ -104,10 +104,11 @@ export const EngineCreation: React.FC = () => {
<EuiSpacer />
<EuiButton
disabled={name.length === 0}
isLoading={isLoading}
type="submit"
data-test-subj="NewEngineSubmitButton"
fill
color="secondary"
fill
>
{ENGINE_CREATION_FORM_SUBMIT_BUTTON_LABEL}
</EuiButton>

23
x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_creation/engine_creation_logic.test.ts
View file

@ -23,6 +23,7 @@ describe('EngineCreationLogic', () => {
const { setQueuedSuccessMessage, flashAPIErrors } = mockFlashMessageHelpers;
const DEFAULT_VALUES = {
isLoading: false,
name: '',
rawName: '',
language: 'Universal',
@ -63,6 +64,28 @@ describe('EngineCreationLogic', () => {
expect(EngineCreationLogic.values.name).toEqual('name-with-special-characters');
});
});
describe('submitEngine', () => {
it('sets isLoading to true', () => {
mount({ isLoading: false });
EngineCreationLogic.actions.submitEngine();
expect(EngineCreationLogic.values).toEqual({
...DEFAULT_VALUES,
isLoading: true,
});
});
});
describe('onSubmitError', () => {
it('resets isLoading to false', () => {
mount({ isLoading: true });
EngineCreationLogic.actions.onSubmitError();
expect(EngineCreationLogic.values).toEqual({
...DEFAULT_VALUES,
isLoading: false,
});
});
});
});
describe('listeners', () => {

11
x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_creation/engine_creation_logic.ts
View file

@ -22,9 +22,11 @@ interface EngineCreationActions {
setLanguage(language: string): { language: string };
setRawName(rawName: string): { rawName: string };
submitEngine(): void;
onSubmitError(): void;
}
interface EngineCreationValues {
isLoading: boolean;
language: string;
name: string;
rawName: string;
@ -37,8 +39,16 @@ export const EngineCreationLogic = kea<MakeLogicType<EngineCreationValues, Engin
setLanguage: (language) => ({ language }),
setRawName: (rawName) => ({ rawName }),
submitEngine: true,
onSubmitError: true,
},
reducers: {
isLoading: [
false,
{
submitEngine: () => true,
onSubmitError: () => false,
},
],
language: [
DEFAULT_LANGUAGE,
{
@ -67,6 +77,7 @@ export const EngineCreationLogic = kea<MakeLogicType<EngineCreationValues, Engin
actions.onEngineCreationSuccess();
} catch (e) {
flashAPIErrors(e);
actions.onSubmitError();
}
},
onEngineCreationSuccess: () => {

1
x-pack/plugins/enterprise_search/public/applications/app_search/components/engines/components/empty_state.tsx
View file

@ -55,7 +55,6 @@ export const EmptyState: React.FC = () => {
actions={
<>
<EuiButtonTo
iconType="popout"
data-test-subj="EmptyStateCreateFirstEngineCta"
fill
to={ENGINE_CREATION_PATH}

9
x-pack/plugins/enterprise_search/public/applications/app_search/components/meta_engine_creation/meta_engine_creation.test.tsx
View file

@ -18,6 +18,7 @@ import { MetaEngineCreation } from './';
const DEFAULT_VALUES = {
// MetaEngineLogic
isLoading: false,
name: 'test-meta-engine',
rawName: 'test-meta-engine',
indexedEngineNames: [],
@ -183,5 +184,13 @@ describe('MetaEngineCreation', () => {
expect(submitButton.prop('disabled')).toEqual(true);
});
it('passes isLoading state', () => {
setMockValues({ ...DEFAULT_VALUES, isLoading: true });
const wrapper = shallow(<MetaEngineCreation />);
const submitButton = wrapper.find('[data-test-subj="NewMetaEngineSubmitButton"]');
expect(submitButton.prop('isLoading')).toEqual(true);
});
});
});

5
x-pack/plugins/enterprise_search/public/applications/app_search/components/meta_engine_creation/meta_engine_creation.tsx
View file

@ -65,7 +65,7 @@ export const MetaEngineCreation: React.FC = () => {
submitEngine,
} = useActions(MetaEngineCreationLogic);
const { rawName, name, indexedEngineNames, selectedIndexedEngineNames } = useValues(
const { rawName, name, indexedEngineNames, selectedIndexedEngineNames, isLoading } = useValues(
MetaEngineCreationLogic
);
@ -157,10 +157,11 @@ export const MetaEngineCreation: React.FC = () => {
selectedIndexedEngineNames.length === 0 ||
selectedIndexedEngineNames.length > maxEnginesPerMetaEngine
}
isLoading={isLoading}
type="submit"
data-test-subj="NewMetaEngineSubmitButton"
fill
color="secondary"
fill
>
{META_ENGINE_CREATION_FORM_SUBMIT_BUTTON_LABEL}
</EuiButton>

23
x-pack/plugins/enterprise_search/public/applications/app_search/components/meta_engine_creation/meta_engine_creation_logic.test.ts
View file

@ -23,6 +23,7 @@ describe('MetaEngineCreationLogic', () => {
const { setQueuedSuccessMessage, flashAPIErrors } = mockFlashMessageHelpers;
const DEFAULT_VALUES = {
isLoading: false,
indexedEngineNames: [],
name: '',
rawName: '',
@ -76,6 +77,28 @@ describe('MetaEngineCreationLogic', () => {
]);
});
});
describe('submitEngine', () => {
it('sets isLoading to true', () => {
mount({ isLoading: false });
MetaEngineCreationLogic.actions.submitEngine();
expect(MetaEngineCreationLogic.values).toEqual({
...DEFAULT_VALUES,
isLoading: true,
});
});
});
describe('onSubmitError', () => {
it('resets isLoading to false', () => {
mount({ isLoading: true });
MetaEngineCreationLogic.actions.onSubmitError();
expect(MetaEngineCreationLogic.values).toEqual({
...DEFAULT_VALUES,
isLoading: false,
});
});
});
});
describe('listeners', () => {

13
x-pack/plugins/enterprise_search/public/applications/app_search/components/meta_engine_creation/meta_engine_creation_logic.ts
View file

@ -25,6 +25,7 @@ interface MetaEngineCreationValues {
name: string;
rawName: string;
selectedIndexedEngineNames: string[];
isLoading: boolean;
}
interface MetaEngineCreationActions {
@ -38,6 +39,7 @@ interface MetaEngineCreationActions {
selectedIndexedEngineNames: MetaEngineCreationValues['selectedIndexedEngineNames']
): { selectedIndexedEngineNames: MetaEngineCreationValues['selectedIndexedEngineNames'] };
submitEngine(): void;
onSubmitError(): void;
}
export const MetaEngineCreationLogic = kea<
@ -50,9 +52,17 @@ export const MetaEngineCreationLogic = kea<
setIndexedEngineNames: (indexedEngineNames) => ({ indexedEngineNames }),
setRawName: (rawName) => ({ rawName }),
setSelectedIndexedEngineNames: (selectedIndexedEngineNames) => ({ selectedIndexedEngineNames }),
submitEngine: () => null,
submitEngine: true,
onSubmitError: true,
},
reducers: {
isLoading: [
false,
{
submitEngine: () => true,
onSubmitError: () => false,
},
],
indexedEngineNames: [
[],
{
@ -121,6 +131,7 @@ export const MetaEngineCreationLogic = kea<
actions.onEngineCreationSuccess();
} catch (e) {
flashAPIErrors(e);
actions.onSubmitError();
}
},
}),