parent
d7ed4d4ded
commit
81ea5ef8c4
|
@ -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} />;
|
||||
};
|
||||
|
|
|
@ -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} />;
|
||||
};
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
|
Loading…
Reference in a new issue