ESLint Telemetry Rule

[CoenWarmer]

Resolves #144887

Summary

This PR adds an ESLint Plugin which checks Eui elements for the existence of a data-test-subj prop, and tries to come up with a suggestion based on the context in which the element is used.

Screen.Recording.2023-02-14.at.15.26.35.mov

Details

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.

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',
]

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

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)

Known limitations

• the rule is set to warn, not to error. There can be legitimate reasons why an engineer does not want to add a data-test-subj and we don't want to block the CI in any way.
• the suggestion is just that, a suggestion: the engineer can always adjust the value before committing.
• If an element already has a value for data-test-subj the rule will not kick in as any existing instrumentation will depend on the value.

[elasticmachine]

Pinging @elastic/apm-ui (Team:APM)

[kibana-ci]

⏳ Build in-progress, with failures

• Buildkite Build
• Commit: dd05f03
• Interpreting CI Failures

Failed CI Steps

• Build API Docs
• Check Types

History

• 💔 Build #109304 failed c08261e
• 💔 Build #109289 failed 26cec8a
• 💚 Build #108816 succeeded 42f0f6a
• 💚 Build #108539 succeeded 8e97b42aee181a25289e6a035e41e50b95a9e7f9
• 💔 Build #108500 failed 05d0b7f

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