Skip to content

Commit

Permalink
[8.17] [Search][a11y] Add validation to extraction rules form (#202980)…
Browse files Browse the repository at this point in the history 
… (#205192)

# Backport

This will backport the following commits from `main` to `8.17`:
- [[Search][a11y] Add validation to extraction rules form
(#202980)](#202980)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Navarone
Feekery","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-12-27T11:22:19Z","message":"[Search][a11y]
Add validation to extraction rules form (#202980)\n\n## Closes:
https://github.com/elastic/kibana/issues/199154\r\n\r\nThis adds more
validations to the Crawler extraction rules form.\r\n\r\nThe original
issue of the error being at the top of the page is not\r\neasily
fixable, as it's a catch-all server error display. Ideally,
we\r\nshouldn't have server errors occurring at all, so it makes sense
to me\r\nto just add a front-end validation to the inputs in this
field.\r\n\r\nThese validations cover the following previously-missed
scenarios:\r\n\r\n1. When a user has not added any rules\r\n2. When rule
is for a specific URL and the URL pattern field is empty,\r\nor doesn't
begin with `/`\r\n3. When the value for \"Source\" is empty (covers both
HTML element and\r\nURL selectors)\r\n4. When \"Content\" is \"A fixed
value\" and the value field is
empty","sha":"9865da3844674e560e9f87c07ce65ad025afb12f","branchLabelMapping":{"^v9.0.0$":"main","^v8.18.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","Team:Search","backport:prev-major"],"title":"[Search][a11y]
Add validation to extraction rules
form","number":202980,"url":"https://github.com/elastic/kibana/pull/202980","mergeCommit":{"message":"[Search][a11y]
Add validation to extraction rules form (#202980)\n\n## Closes:
https://github.com/elastic/kibana/issues/199154\r\n\r\nThis adds more
validations to the Crawler extraction rules form.\r\n\r\nThe original
issue of the error being at the top of the page is not\r\neasily
fixable, as it's a catch-all server error display. Ideally,
we\r\nshouldn't have server errors occurring at all, so it makes sense
to me\r\nto just add a front-end validation to the inputs in this
field.\r\n\r\nThese validations cover the following previously-missed
scenarios:\r\n\r\n1. When a user has not added any rules\r\n2. When rule
is for a specific URL and the URL pattern field is empty,\r\nor doesn't
begin with `/`\r\n3. When the value for \"Source\" is empty (covers both
HTML element and\r\nURL selectors)\r\n4. When \"Content\" is \"A fixed
value\" and the value field is
empty","sha":"9865da3844674e560e9f87c07ce65ad025afb12f"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/202980","number":202980,"mergeCommit":{"message":"[Search][a11y]
Add validation to extraction rules form (#202980)\n\n## Closes:
https://github.com/elastic/kibana/issues/199154\r\n\r\nThis adds more
validations to the Crawler extraction rules form.\r\n\r\nThe original
issue of the error being at the top of the page is not\r\neasily
fixable, as it's a catch-all server error display. Ideally,
we\r\nshouldn't have server errors occurring at all, so it makes sense
to me\r\nto just add a front-end validation to the inputs in this
field.\r\n\r\nThese validations cover the following previously-missed
scenarios:\r\n\r\n1. When a user has not added any rules\r\n2. When rule
is for a specific URL and the URL pattern field is empty,\r\nor doesn't
begin with `/`\r\n3. When the value for \"Source\" is empty (covers both
HTML element and\r\nURL selectors)\r\n4. When \"Content\" is \"A fixed
value\" and the value field is
empty","sha":"9865da3844674e560e9f87c07ce65ad025afb12f"}}]}] BACKPORT-->

Co-authored-by: Navarone Feekery <[email protected]>
  • Loading branch information
@kibanamachine @navarone-feekery
kibanamachine and navarone-feekery authored Dec 27, 2024
1 parent 324eb8f commit 9864cfc
Show file tree
Hide file tree
Showing 2 changed files with 81 additions and 28 deletions.
30 changes: 28 additions & 2 deletions ...ents/search_index/crawler/crawler_domain_detail/extraction_rules/edit_extraction_rule.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -298,9 +298,34 @@ export const EditExtractionRule: React.FC<EditExtractionRuleProps> = ({
<Controller
control={control}
name={`url_filters.${index}.pattern`}
render={({ field }) => (
rules={{
validate: (rule) => {
if (!rule?.trim()) {
return i18n.translate(
'xpack.enterpriseSearch.content.indices.extractionRules.editContentField.fieldInput.requiredError',
{
defaultMessage: 'A value is required.',
}
);
}

if (rule[0] !== '/') {
return i18n.translate(
'xpack.enterpriseSearch.content.indices.extractionRules.editContentField.fieldInput.slashMissingError',
{
defaultMessage: 'Value must begin with a /.',
}
);
}

return true;
},
}}
render={({ field, fieldState: { error, isTouched } }) => (
<>
<EuiFormRow
isInvalid={!!error && isTouched}
error={error?.message}
label={i18n.translate(
'xpack.enterpriseSearch.content.indices.extractionRules.editRule.url.urlFilter.',
{
Expand All @@ -311,6 +336,7 @@ export const EditExtractionRule: React.FC<EditExtractionRuleProps> = ({
<EuiFieldText
data-telemetry-id="entSearchContent-crawler-domainDetail-extractionRules-urlPattern"
fullWidth
isInvalid={!!error && isTouched}
placeholder={i18n.translate(
'xpack.enterpriseSearch.content.indices.extractionRules.editRule.url.urlFilters.patternPlaceholder',
{
Expand Down Expand Up @@ -414,7 +440,7 @@ export const EditExtractionRule: React.FC<EditExtractionRuleProps> = ({
data-telemetry-id="entSearchContent-crawler-domainDetail-extractionRules-saveExtractionRule"
type="submit"
onClick={() => saveRule({ ...getValues() })}
disabled={!formState.isValid}
disabled={!formState.isValid || !rulesFields || rulesFields.length === 0}
>
{i18n.translate(
'xpack.enterpriseSearch.content.indices.extractionRules.editRule.saveButtonLabel',
Expand Down
79 changes: 53 additions & 26 deletions ...ts/search_index/crawler/crawler_domain_detail/extraction_rules/edit_field_rule_flyout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -227,28 +227,39 @@ export const EditFieldRuleFlyout: React.FC<EditFieldRuleFlyoutProps> = ({
{!!field.value && (
<>
<EuiSpacer />
<EuiFormRow
fullWidth
label={
field.value === FieldType.HTML
? i18n.translate(
'xpack.enterpriseSearch.content.indices.extractionRules.editContentField.content.htmlLabel',
{
defaultMessage: 'CSS selector or XPath expression',
}
)
: i18n.translate(
'xpack.enterpriseSearch.content.indices.extractionRules.editContentField.content.urlLabel',
{
defaultMessage: 'URL pattern',
}
)
}
>
<Controller
control={control}
name="selector"
render={({ field: selectorField, fieldState: { error, isTouched } }) => (
<Controller
control={control}
name="selector"
rules={{
validate: (rule) =>
!!rule?.trim() ||
i18n.translate(
'xpack.enterpriseSearch.content.indices.extractionRules.editContentField.fieldInput.requiredError',
{
defaultMessage: 'A value is required.',
}
),
}}
render={({ field: selectorField, fieldState: { error, isTouched } }) => (
<EuiFormRow
isInvalid={!!error && isTouched}
error={error?.message}
label={
field.value === FieldType.HTML
? i18n.translate(
'xpack.enterpriseSearch.content.indices.extractionRules.editContentField.content.htmlLabel',
{
defaultMessage: 'CSS selector or XPath expression',
}
)
: i18n.translate(
'xpack.enterpriseSearch.content.indices.extractionRules.editContentField.content.urlLabel',
{
defaultMessage: 'URL pattern',
}
)
}
>
<EuiFieldText
data-telemetry-id="entSearchContent-crawler-domainDetail-extractionRules-editContentRuleSelector"
isInvalid={!!error && isTouched}
Expand All @@ -273,9 +284,9 @@ export const EditFieldRuleFlyout: React.FC<EditFieldRuleFlyoutProps> = ({
onChange={selectorField.onChange}
value={selectorField.value ?? ''}
/>
)}
/>
</EuiFormRow>
</EuiFormRow>
)}
/>
<EuiSpacer />
{field.value === FieldType.HTML ? (
<EuiLink
Expand Down Expand Up @@ -443,8 +454,23 @@ export const EditFieldRuleFlyout: React.FC<EditFieldRuleFlyoutProps> = ({
<Controller
control={control}
name="content_from.value"
render={({ field: valueField }) => (
rules={{
validate: (rule) =>
!!rule?.trim() ||
i18n.translate(
'xpack.enterpriseSearch.content.indices.extractionRules.editContentField.contentFixedValue.requiredError',
{
defaultMessage: 'A value is required',
}
),
}}
render={({
field: valueField,
fieldState: { error: fieldError, isTouched: fieldIsTouched },
}) => (
<EuiFormRow
isInvalid={!!fieldError && fieldIsTouched}
error={fieldError?.message}
helpText={i18n.translate(
'xpack.enterpriseSearch.content.indices.extractionRules.editContentField.fixedValue.helpText',
{
Expand All @@ -461,6 +487,7 @@ export const EditFieldRuleFlyout: React.FC<EditFieldRuleFlyoutProps> = ({
<EuiFieldText
data-telemetry-id="entSearchContent-crawler-domainDetail-extractionRules-editContentRuleFixedValue"
fullWidth
isInvalid={!!fieldError && fieldIsTouched}
placeholder={i18n.translate(
'xpack.enterpriseSearch.content.indices.extractionRules.editContentField.fixedValue.placeHolder',
{
Expand Down

0 comments on commit 9864cfc

Please sign in to comment.