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

Refactor Template UI logistics form (#46576) (#46687)

Browse source
This commit is contained in:
Sébastien Loix 2019-09-26 13:19:39 +02:00 committed by GitHub
parent d7ed4d4ded
commit 81ea5ef8c4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 106 additions and 95 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/plugins/es_ui_shared/static/forms/components/form_row.tsx
View file

@ -63,3 +63,12 @@ export const FormRow = ({
</EuiDescribedFormGroup>
);
};
/**
* Get a <FormRow /> component providing some common props for all instances.
* @param partialProps Partial props to apply to all <FormRow /> instances
*/
export const getFormRow = (partialProps: Partial<Props>) => (props: Partial<Props>) => {
const componentProps = { ...partialProps, ...props } as Props;
return <FormRow {...componentProps} />;
};

9
src/plugins/es_ui_shared/static/forms/hook_form_lib/components/use_field.tsx
View file

@ -91,3 +91,12 @@ export const UseField = ({
return component({ field, ...componentProps });
};
/**
* Get a <UseField /> component providing some common props for all instances.
* @param partialProps Partial props to apply to all <UseField /> instances
*/
export const getUseField = (partialProps: Partial<Props>) => (props: Partial<Props>) => {
const componentProps = { ...partialProps, ...props } as Props;
return <UseField {...componentProps} />;
};

183
x-pack/legacy/plugins/index_management/public/components/template_form/steps/step_logistics.tsx
View file

@ -6,72 +6,67 @@
import React, { useEffect } from 'react';
import { EuiFlexGroup, EuiFlexItem, EuiTitle, EuiButtonEmpty, EuiSpacer } from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n/react';
import { i18n } from '@kbn/i18n';
import {
useForm,
Form,
UseField,
getUseField,
} from '../../../../../../../../src/plugins/es_ui_shared/static/forms/hook_form_lib';
import { FormRow } from '../../../../../../../../src/plugins/es_ui_shared/static/forms/components';
import {
getFormRow,
Field,
} from '../../../../../../../../src/plugins/es_ui_shared/static/forms/components';
import { templatesDocumentationLink } from '../../../lib/documentation_links';
import { StepProps } from '../types';
import { schemas } from '../template_form_schemas';
const i18n = {
// Create or Form components with partial props that are common to all instances
const UseField = getUseField({ component: Field });
const FormRow = getFormRow({ titleTag: 'h4' });
const fieldsMeta = {
name: {
title: (
<FormattedMessage
id="xpack.idxMgmt.templateForm.stepLogistics.nameTitle"
defaultMessage="Name"
/>
),
description: (
<FormattedMessage
id="xpack.idxMgmt.templateForm.stepLogistics.nameDescription"
defaultMessage="A unique identifier for this template."
/>
),
title: i18n.translate('xpack.idxMgmt.templateForm.stepLogistics.nameTitle', {
defaultMessage: 'Name',
}),
description: i18n.translate('xpack.idxMgmt.templateForm.stepLogistics.nameDescription', {
defaultMessage: 'A unique identifier for this template.',
}),
idAria: 'stepLogisticsNameDescription',
testSubject: 'nameField',
},
indexPatterns: {
title: (
<FormattedMessage
id="xpack.idxMgmt.templateForm.stepLogistics.indexPatternsTitle"
defaultMessage="Index patterns"
/>
),
description: (
<FormattedMessage
id="xpack.idxMgmt.templateForm.stepLogistics.indexPatternsDescription"
defaultMessage="The index patterns to apply to the template."
/>
title: i18n.translate('xpack.idxMgmt.templateForm.stepLogistics.indexPatternsTitle', {
defaultMessage: 'Index patterns',
}),
description: i18n.translate(
'xpack.idxMgmt.templateForm.stepLogistics.indexPatternsDescription',
{
defaultMessage: 'The index patterns to apply to the template.',
}
),
idAria: 'stepLogisticsIndexPatternsDescription',
testSubject: 'indexPatternsField',
},
order: {
title: (
<FormattedMessage
id="xpack.idxMgmt.templateForm.stepLogistics.orderTitle"
defaultMessage="Merge order"
/>
),
description: (
<FormattedMessage
id="xpack.idxMgmt.templateForm.stepLogistics.orderDescription"
defaultMessage="The merge order when multiple templates match an index."
/>
),
title: i18n.translate('xpack.idxMgmt.templateForm.stepLogistics.orderTitle', {
defaultMessage: 'Merge order',
}),
description: i18n.translate('xpack.idxMgmt.templateForm.stepLogistics.orderDescription', {
defaultMessage: 'The merge order when multiple templates match an index.',
}),
idAria: 'stepLogisticsOrderDescription',
testSubject: 'orderField',
},
version: {
title: (
<FormattedMessage
id="xpack.idxMgmt.templateForm.stepLogistics.versionTitle"
defaultMessage="Version"
/>
),
description: (
<FormattedMessage
id="xpack.idxMgmt.templateForm.stepLogistics.versionDescription"
defaultMessage="A number that identifies the template to external management systems."
/>
),
title: i18n.translate('xpack.idxMgmt.templateForm.stepLogistics.versionTitle', {
defaultMessage: 'Version',
}),
description: i18n.translate('xpack.idxMgmt.templateForm.stepLogistics.versionDescription', {
defaultMessage: 'A number that identifies the template to external management systems.',
}),
idAria: 'stepLogisticsVersionDescription',
testSubject: 'versionField',
},
};
@ -95,6 +90,8 @@ export const StepLogistics: React.FunctionComponent<StepProps> = ({
setDataGetter(form.submit);
}, [form]);
const { name, indexPatterns, order, version } = fieldsMeta;
return (
<Form form={form} data-test-subj="stepLogistics">
<EuiFlexGroup justifyContent="spaceBetween">
@ -126,54 +123,50 @@ export const StepLogistics: React.FunctionComponent<StepProps> = ({
</EuiFlexGroup>
<EuiSpacer size="l" />
{/* Name */}
<UseField
path="name"
component={FormRow}
componentProps={{
title: i18n.name.title,
titleTag: 'h3',
description: i18n.name.description,
idAria: 'stepLogisticsNameDescription',
euiFieldProps: { disabled: isEditing },
['data-test-subj']: 'nameField',
}}
/>
<FormRow title={name.title} description={name.description} idAria={name.idAria}>
<UseField
path="name"
componentProps={{
idAria: name.idAria,
['data-test-subj']: name.testSubject,
euiFieldProps: { disabled: isEditing },
}}
/>
</FormRow>
{/* Index patterns */}
<UseField
path="indexPatterns"
component={FormRow}
componentProps={{
title: i18n.indexPatterns.title,
titleTag: 'h3',
description: i18n.indexPatterns.description,
idAria: 'stepLogisticsIndexPatternsDescription',
['data-test-subj']: 'indexPatternsField',
}}
/>
<FormRow
title={indexPatterns.title}
description={indexPatterns.description}
idAria={indexPatterns.idAria}
>
<UseField
path="indexPatterns"
componentProps={{
idAria: indexPatterns.idAria,
['data-test-subj']: indexPatterns.testSubject,
}}
/>
</FormRow>
{/* Order */}
<UseField
path="order"
component={FormRow}
componentProps={{
title: i18n.order.title,
titleTag: 'h3',
description: i18n.order.description,
idAria: 'stepLogisticsOrderDescription',
['data-test-subj']: 'orderField',
}}
/>
<FormRow title={order.title} description={order.description} idAria={order.idAria}>
<UseField
path="order"
componentProps={{
idAria: order.idAria,
['data-test-subj']: order.testSubject,
}}
/>
</FormRow>
{/* Version */}
<UseField
path="version"
component={FormRow}
componentProps={{
title: i18n.version.title,
titleTag: 'h3',
description: i18n.version.description,
idAria: 'stepLogisticsVersionDescription',
euiFieldProps: { ['data-test-subj']: 'versionField' },
}}
/>
<FormRow title={version.title} description={version.description} idAria={version.idAria}>
<UseField
path="version"
componentProps={{
idAria: version.idAria,
['data-test-subj']: version.testSubject,
}}
/>
</FormRow>
</Form>
);
};