ESLint Telemetry Rule

[CoenWarmer]

Resolves #144887

Summary

This PR adds an ESLint Plugin which checks specific Eui elements for the existence of a data-test-subj prop. This rule will make having one for these elements required.

This rule is currently only enabled for Observability apps (APM, Infra, Observability, Synthetics, Uptime).

The plugin is also able to generate a suggestion based on the context in which the element is used. In the IDE this suggestion can be applied by using the autofix capability (see video below).

When opening a PR, the CI will automatically apply the suggestion to qualifying Eui elements in the branch.

bla.mov

Why do this?

There is an increased push to move towards data driven feature development. In order to facilitate this, we need to have an increased focus on instrumenting user event generating elements in the Kibana codebase. This linting rule is an attempt to nudge Kibana engineers to not forget to add this property when writing frontend code. It also saves a bit of work for engineers by suggesting a value for the data-test-subj based on the location of the file in the codebase and any potential default values that might be present in the JSX node tree. Finally, because the suggestion is always of the same form, it can increase the consistency in the values given to these elements.

Shape of the suggestion

The suggestion for the value of data-test-subj is of the form: [app][componentName][intent][euiElementName].

For example, when working in a component in the location: x-pack/plugins/observability/public/pages/overview/containers/overview_page/header_actions.tsx, and having the code:

function HeaderActions() {
  return (
    <EuiButton>{i18n.translate('id', { defaultMessage: 'Submit Form' })}</EuiButton>
  )
}

the suggestion becomes: data-test-subj=o11yHeaderActionsSubmitFormButton.

For elements that don't take a defaultMessage prop / translation, the suggestion takes the form: [app][componentName][euiElementName]

Which elements are checked by the ESLint rule?

In its current iteration the rule checks these Eui elements:

• EuiButton
• EuiButtonEmpty
• EuiLink
• EuiFieldText
• EuiFieldSearch
• EuiFieldNumber
• EuiSelect
• EuiRadioGroup
• 'EuiTextArea`

What types of prop setting does this rule support?

• <EuiButton data-test-subj="foo"> (direct prop)
• <EuiButton {...foo}> (via spreaded object; rule checks for data-test-subj key in object)

What types of function declarations does this rule support?

• function Foo(){} (Named function)
• const Foo = () => {} (Arrow function assigned to variable)
• const Foo = memo(() => {}) (Arrow function assigned to variable wrapped in function)
• const Foo = hoc(uponHoc(uponHoc(() => {}))) (Arrow function assigned to variable wrapped in infinite levels of functions)

Things to note

• If an element already has a value for data-test-subj the rule will not kick in as any existing instrumentation might depend on the value.
• the auto suggestion is just a suggestion: the engineer can always adjust the value for a data-test-subj before or after committing. Once a value is present (autofixed or manually set) the rule will not kick in.

[kpatticha]

it looks great, thanks for adding it 💯 . I left a few suggestions where the component (context) is missing from the id.

[jbudz]

.eslintrc.js LGTM

In the future can we split code formatting between commits or pull requests to make to make the changes easier to review?

[kdelemme]

LGTM! Good job :)

[CoenWarmer]

@elasticmachine merge upstream

[kibana-ci]

💛 Build succeeded, but was flaky

• Buildkite Build
• Commit: 52ca267
• Storybooks Preview

Failed CI Steps

• Synthetics @elastic/synthetics Tests

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
apm	3.8MB	3.8MB	+7.5KB
infra	1.3MB	1.3MB	+6.6KB
observability	1.1MB	1.1MB	+2.1KB
synthetics	1.4MB	1.4MB	+8.9KB
ux	160.6KB	160.8KB	+222.0B
total			+25.4KB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
apm	32.0KB	32.1KB	+57.0B

Unknown metric groups

ESLint disabled line counts

id	before	after	diff
securitySolution	433	436	+3

Total ESLint disabled count

id	before	after	diff
securitySolution	513	516	+3

History

• 💛 Build #113879 was flaky 68ba300
• 💛 Build #113782 was flaky 47789b1
• 💛 Build #113758 was flaky d31c336
• 💚 Build #113592 succeeded 6f0565f
• 💛 Build #113533 was flaky aaf5462
• 💔 Build #113532 failed 356965a3609e4375e10624c800d60fbca3f868b8

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream