mirror of
https://github.com/elastic/kibana.git
synced 2025-04-25 18:27:59 -04:00
010ee2e112
Resolves https://github.com/elastic/kibana/issues/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. https://user-images.githubusercontent.com/535564/225449622-bbfccb40-fdd2-4f69-9d5a-7d5a97bf62e6.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. --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Dario Gieselaar <d.gieselaar@gmail.com> Co-authored-by: Katerina Patticha <kate@kpatticha.com> Co-authored-by: Tiago Costa <tiago.costa@elastic.co>
13 lines
491 B
JavaScript
13 lines
491 B
JavaScript
/*
|
|
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
|
* or more contributor license agreements. Licensed under the Elastic License
|
|
* 2.0 and the Server Side Public License, v 1; you may not use this file except
|
|
* in compliance with, at your election, the Elastic License 2.0 or the Server
|
|
* Side Public License, v 1.
|
|
*/
|
|
|
|
module.exports = {
|
|
preset: '@kbn/test/jest_node',
|
|
rootDir: '../..',
|
|
roots: ['<rootDir>/packages/kbn-eslint-plugin-telemetry'],
|
|
};
|