ESLint Telemetry Rule

.github/CODEOWNERS

@@ -334,6 +334,7 @@ packages/kbn-eslint-config @elastic/kibana-operations
 packages/kbn-eslint-plugin-disable @elastic/kibana-operations
 packages/kbn-eslint-plugin-eslint @elastic/kibana-operations
 packages/kbn-eslint-plugin-imports @elastic/kibana-operations
+packages/kbn-eslint-plugin-telemetry @elastic/actionable-observability
 x-pack/test/encrypted_saved_objects_api_integration/plugins/api_consumer_plugin @elastic/kibana-security
 src/plugins/event_annotation @elastic/kibana-visualizations
 x-pack/test/plugin_api_integration/plugins/event_log @elastic/response-ops

examples/bfetch_explorer/public/components/count_until/index.tsx

@@ -58,7 +58,11 @@ export const CountUntil: React.FC<Props> = ({ fetchStreaming }) => {
       <EuiForm data-test-subj="CountUntil">
         <pre>{JSON.stringify(error || results, null, 4)}</pre>
         <EuiSpacer size="l" />
-        <EuiButton disabled={!completed} onClick={handleReset}>
+        <EuiButton
+          data-test-subj="bfetchExplorerCountUntilResetButton"
+          disabled={!completed}
+          onClick={handleReset}
+        >
           Reset
         </EuiButton>
       </EuiForm>
@@ -69,12 +73,18 @@ export const CountUntil: React.FC<Props> = ({ fetchStreaming }) => {
     <EuiForm data-test-subj="CountUntil">
       <EuiFormRow label="Some integer" fullWidth>
         <EuiFieldNumber
+          data-test-subj="bfetchExplorerCountUntilFieldNumber"
           placeholder="Some integer"
           value={data}
           onChange={(e) => setData(Number(e.target.value))}
         />
       </EuiFormRow>
-      <EuiButton type="submit" fill onClick={handleSubmit}>
+      <EuiButton
+        data-test-subj="bfetchExplorerCountUntilStartButton"
+        type="submit"
+        fill
+        onClick={handleSubmit}
+      >
         Start
       </EuiButton>
     </EuiForm>

examples/bfetch_explorer/public/components/double_integers/index.tsx

@@ -69,7 +69,11 @@ export const DoubleIntegers: React.FC<Props> = ({ double }) => {
       <EuiForm data-test-subj="DoubleIntegers">
         <pre>{JSON.stringify(results, null, 4)}</pre>
         <EuiSpacer size="l" />
-        <EuiButton disabled={!!numberOfResultsAwaiting} onClick={handleReset}>
+        <EuiButton
+          data-test-subj="bfetchExplorerDoubleIntegersResetButton"
+          disabled={!!numberOfResultsAwaiting}
+          onClick={handleReset}
+        >
           Reset
         </EuiButton>
       </EuiForm>
@@ -80,13 +84,19 @@ export const DoubleIntegers: React.FC<Props> = ({ double }) => {
     <EuiForm data-test-subj="DoubleIntegers">
       <EuiFormRow label="Numbers in ms separated by new line" fullWidth>
         <EuiTextArea
+          data-test-subj="bfetchExplorerDoubleIntegersTextArea"
           fullWidth
           placeholder="Enter numbers in milliseconds separated by new line"
           value={numbers}
           onChange={(e) => setNumbers(e.target.value)}
         />
       </EuiFormRow>
-      <EuiButton type="submit" fill onClick={handleSubmit}>
+      <EuiButton
+        data-test-subj="bfetchExplorerDoubleIntegersSendButton"
+        type="submit"
+        fill
+        onClick={handleSubmit}
+      >
         Send
       </EuiButton>
     </EuiForm>

examples/controls_example/public/edit_example.tsx

@@ -75,6 +75,7 @@ export const EditExample = () => {
         <EuiFlexGroup gutterSize="s" alignItems="center">
           <EuiFlexItem grow={false}>
             <EuiButtonEmpty
+              data-test-subj="controlsExampleEditExampleAddControlButtonEmpty"
               color="primary"
               iconType="plusInCircle"
               isDisabled={controlGroup === undefined}
@@ -87,6 +88,7 @@ export const EditExample = () => {
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
             <EuiButton
+              data-test-subj="controlsExampleEditExampleSaveButton"
               color="primary"
               isDisabled={controlGroup === undefined || isSaving}
               fill

examples/developer_examples/public/app.tsx

@@ -51,6 +51,7 @@ function DeveloperExamples({ examples, navigateToApp, getUrlForApp }: Props) {
           <p>
             The following examples showcase services and APIs that are available to developers.
             <EuiFieldSearch
+              data-test-subj="developerExamplesDeveloperExamplesFieldSearch"
               placeholder="Search"
               value={search}
               onChange={(e) => setSearch(e.target.value)}
@@ -72,6 +73,7 @@ function DeveloperExamples({ examples, navigateToApp, getUrlForApp }: Props) {
               title={
                 <React.Fragment>
                   <EuiLink
+                    data-test-subj="developerExamplesDeveloperExamplesLink"
                     onClick={() => {
                       navigateToApp(def.appId);
                     }}

examples/expressions_explorer/public/app.tsx

@@ -49,6 +49,7 @@ const ExpressionsExplorer = ({ expressions, inspector, actions, uiSettings }: Pr
                   There are a couple of ways to run the expressions. Below some of the options are
                   demonstrated. You can read more about it{' '}
                   <EuiLink
+                    data-test-subj="expressionsExplorerExpressionsExplorerHereLink"
                     href={
                       'https://github.com/elastic/kibana/blob/main/src/plugins/expressions/README.asciidoc'
                     }

examples/expressions_explorer/public/render_expressions.tsx

@@ -60,6 +60,7 @@ export function RenderExpressionsExample({ expressions, inspector }: Props) {
             </EuiFlexItem>
             <EuiFlexItem>
               <EuiButton
+                data-test-subj="expressionsExplorerRenderExpressionsExampleOpenInspectorButton"
                 onClick={() => {
                   inspector.open(inspectorAdapters);
                 }}

examples/expressions_explorer/public/run_expressions.tsx

@@ -75,6 +75,7 @@ export function RunExpressionsExample({ expressions, inspector }: Props) {
             </EuiFlexItem>
             <EuiFlexItem>
               <EuiButton
+                data-test-subj="expressionsExplorerRunExpressionsExampleOpenInspectorButton"
                 onClick={() => {
                   inspector.open(inspectorAdapters);
                 }}

examples/field_formats_example/public/app.tsx

@@ -130,7 +130,10 @@ const CreatingCustomFieldFormat: React.FC<{ deps: Deps }> = (props) => {
         <p>
           Currency formatter that we&apos;ve just created is already integrated with data views. It
           can be applied to any <EuiCode>numeric</EuiCode> field of any data view.{' '}
-          <EuiLink onClick={() => props.deps.openDateViewNumberFieldEditor()}>
+          <EuiLink
+            data-test-subj="fieldFormatsExampleCreatingCustomFieldFormatOpenDataViewFieldEditorToGiveItATryLink"
+            onClick={() => props.deps.openDateViewNumberFieldEditor()}
+          >
             Open data view field editor to give it a try.
           </EuiLink>
         </p>
@@ -162,7 +165,10 @@ const CreatingCustomFieldFormatEditor: React.FC<{ deps: Deps }> = (props) => {
         <p>
           Currency formatter and its custom editor are integrated with data views. It can be applied
           to any <EuiCode>numeric</EuiCode> field of any data view.{' '}
-          <EuiLink onClick={() => props.deps.openDateViewNumberFieldEditor()}>
+          <EuiLink
+            data-test-subj="fieldFormatsExampleCreatingCustomFieldFormatEditorOpenDateViewFieldEditorToGiveItATryLink"
+            onClick={() => props.deps.openDateViewNumberFieldEditor()}
+          >
             Open date view field editor to give it a try.
           </EuiLink>
         </p>

examples/field_formats_example/public/examples/3_creating_custom_format_editor.tsx

@@ -22,6 +22,7 @@ const ExampleCurrencyFormatEditor: FieldFormatEditor<{ currency: string }> = (pr
   return (
     <EuiFormRow label={'Currency'}>
       <EuiSelect
+        data-test-subj="fieldFormatsExampleExampleCurrencyFormatEditorSelect"
         defaultValue={props.formatParams.currency}
         options={[
           { text: 'EUR', value: 'EUR' },

examples/files_example/public/components/app.tsx

@@ -50,13 +50,15 @@ export const FilesExampleApp = ({ files, notifications }: FilesExampleAppDeps) =
   const renderToolsRight = () => {
     return [
       <EuiButton
+        data-test-subj="filesExampleRenderToolsRightSelectAFileButton"
         onClick={() => setShowFilePickerModal(true)}
         isDisabled={isLoading || isDeletingFile}
         iconType="eye"
       >
         Select a file
       </EuiButton>,
       <EuiButton
+        data-test-subj="filesExampleRenderToolsRightUploadImageButton"
         onClick={() => setShowUploadModal(true)}
         isDisabled={isLoading || isDeletingFile}
         iconType="exportAction"
@@ -73,7 +75,11 @@ export const FilesExampleApp = ({ files, notifications }: FilesExampleAppDeps) =
       field: 'name',
       name: 'Name',
       render: (name, item) => (
-        <EuiLink disabled={isDeletingFile} onClick={() => setSelectedItem(item)}>
+        <EuiLink
+          data-test-subj="filesExampleColumnsLink"
+          disabled={isDeletingFile}
+          onClick={() => setSelectedItem(item)}
+        >
           {name}
         </EuiLink>
       ),

examples/files_example/public/components/details_flyout.tsx

@@ -99,6 +99,7 @@ export const DetailsFlyout: FunctionComponent<Props> = ({ files, file, onDismiss
         <EuiFlexGroup justifyContent="flexEnd" alignItems="center">
           <EuiFlexItem grow={false}>
             <EuiButton
+              data-test-subj="filesExampleDetailsFlyoutDownloadButton"
               iconType="download"
               href={files.example.getDownloadHref(file)}
               download={file.name}
@@ -107,7 +108,11 @@ export const DetailsFlyout: FunctionComponent<Props> = ({ files, file, onDismiss
             </EuiButton>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <EuiButtonEmpty iconType="cross" onClick={onDismiss}>
+            <EuiButtonEmpty
+              data-test-subj="filesExampleDetailsFlyoutCloseButtonEmpty"
+              iconType="cross"
+              onClick={onDismiss}
+            >
               Close
             </EuiButtonEmpty>
           </EuiFlexItem>

examples/guided_onboarding_example/public/components/main.tsx

@@ -225,6 +225,7 @@ export const Main = (props: MainProps) => {
             return (
               <EuiFlexItem>
                 <EuiButton
+                  data-test-subj="guidedOnboardingExampleMainButton"
                   onClick={() => activateGuide(guideId, guideState)}
                   fill
                   disabled={guideState?.status === 'complete'}
@@ -279,6 +280,7 @@ export const Main = (props: MainProps) => {
           <EuiFlexItem>
             <EuiFormRow label="Guide" helpText="Select a guide">
               <EuiSelect
+                data-test-subj="guidedOnboardingExampleMainSelect"
                 id="guideSelect"
                 options={selectOptions}
                 value={selectedGuide}
@@ -298,14 +300,20 @@ export const Main = (props: MainProps) => {
           <EuiFlexItem>
             <EuiFormRow label="Step ID">
               <EuiFieldText
+                data-test-subj="guidedOnboardingExampleMainFieldText"
                 value={selectedStep}
                 onChange={(e) => setSelectedStep(e.target.value as GuideStepIds)}
               />
             </EuiFormRow>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
             <EuiFormRow hasEmptyLabelSpace>
-              <EuiButton onClick={updateGuideState}>Save</EuiButton>
+              <EuiButton
+                data-test-subj="guidedOnboardingExampleMainSaveButton"
+                onClick={updateGuideState}
+              >
+                Save
+              </EuiButton>
             </EuiFormRow>
           </EuiFlexItem>
         </EuiFlexGroup>
@@ -322,23 +330,32 @@ export const Main = (props: MainProps) => {
         <EuiSpacer />
         <EuiFlexGroup>
           <EuiFlexItem grow={false}>
-            <EuiButton onClick={() => history.push('stepOne')}>
+            <EuiButton
+              data-test-subj="guidedOnboardingExampleMainStep1Button"
+              onClick={() => history.push('stepOne')}
+            >
               <FormattedMessage
                 id="guidedOnboardingExample.main.examplePages.stepOne.link"
                 defaultMessage="Step 1"
               />
             </EuiButton>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <EuiButton onClick={() => history.push('stepTwo')}>
+            <EuiButton
+              data-test-subj="guidedOnboardingExampleMainStep2Button"
+              onClick={() => history.push('stepTwo')}
+            >
               <FormattedMessage
                 id="guidedOnboardingExample.main.examplePages.stepTwo.link"
                 defaultMessage="Step 2"
               />
             </EuiButton>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <EuiButton onClick={() => history.push('stepThree')}>
+            <EuiButton
+              data-test-subj="guidedOnboardingExampleMainStep3Button"
+              onClick={() => history.push('stepThree')}
+            >
               <FormattedMessage
                 id="guidedOnboardingExample.main.examplePages.stepThree.link"
                 defaultMessage="Step 3"

examples/guided_onboarding_example/public/components/step_one.tsx

@@ -76,6 +76,7 @@ export const StepOne = ({ guidedOnboarding }: GuidedOnboardingExampleAppDeps) =>
           anchorPosition="rightUp"
         >
           <EuiButton
+            data-test-subj="guidedOnboardingExampleStepOneCompleteStep1Button"
             onClick={async () => {
               await guidedOnboardingApi?.completeGuideStep('testGuide', 'step1');
             }}

examples/guided_onboarding_example/public/components/step_three.tsx

@@ -85,6 +85,7 @@ export const StepThree = (props: StepThreeProps) => {
           anchorPosition="rightUp"
         >
           <EuiButton
+            data-test-subj="guidedOnboardingExampleStepThreeCompleteStep3Button"
             onClick={async () => {
               await guidedOnboardingApi?.completeGuideStep('testGuide', 'step3');
             }}

examples/locator_explorer/public/app.tsx

@@ -119,13 +119,19 @@ const ActionsExplorer = ({ share }: Props) => {
               <p>Create new links using the most recent version of a locator.</p>
             </EuiText>
             <EuiFieldText
+              data-test-subj="locatorExplorerActionsExplorerFieldText"
               prepend="First name"
               onChange={(e) => {
                 setFirstName(e.target.value);
               }}
             />
-            <EuiFieldText prepend="Last name" onChange={(e) => setLastName(e.target.value)} />
+            <EuiFieldText
+              data-test-subj="locatorExplorerActionsExplorerFieldText"
+              prepend="Last name"
+              onChange={(e) => setLastName(e.target.value)}
+            />
             <EuiButton
+              data-test-subj="locatorExplorerActionsExplorerAddNewLinkButton"
               onClick={() =>
                 setPersistedLinks([
                   ...persistedLinks,

examples/portable_dashboards_example/public/dynamically_add_panels_example.tsx

@@ -109,12 +109,20 @@ export const DynamicByReferenceExample = () => {
           <EuiFlexItem grow={false}>
             <EuiFlexGroup gutterSize="s">
               <EuiFlexItem>
-                <EuiButton onClick={addByValue} isDisabled={disableButtons}>
+                <EuiButton
+                  data-test-subj="portableDashboardsExampleDynamicByReferenceExampleAddVisualizationByValueButton"
+                  onClick={addByValue}
+                  isDisabled={disableButtons}
+                >
                   Add visualization by value
                 </EuiButton>
               </EuiFlexItem>
               <EuiFlexItem>
-                <EuiButton onClick={addByReference} isDisabled={disableButtons}>
+                <EuiButton
+                  data-test-subj="portableDashboardsExampleDynamicByReferenceExampleAddVisualizationFromLibraryButton"
+                  onClick={addByReference}
+                  isDisabled={disableButtons}
+                >
                   Add visualization from library
                 </EuiButton>
               </EuiFlexItem>
@@ -123,12 +131,19 @@ export const DynamicByReferenceExample = () => {
           <EuiFlexItem grow={false}>
             <EuiFlexGroup gutterSize="s">
               <EuiFlexItem>
-                <EuiButton fill onClick={onSave} isLoading={isSaving} isDisabled={disableButtons}>
+                <EuiButton
+                  data-test-subj="portableDashboardsExampleDynamicByReferenceExampleSaveToLocalStorageButton"
+                  fill
+                  onClick={onSave}
+                  isLoading={isSaving}
+                  isDisabled={disableButtons}
+                >
                   Save to local storage
                 </EuiButton>
               </EuiFlexItem>
               <EuiFlexItem>
                 <EuiButton
+                  data-test-subj="portableDashboardsExampleDynamicByReferenceExampleEmptyDashboardAndResetLocalStorageButton"
                   onClick={resetPersistableInput}
                   isLoading={isSaving}
                   isDisabled={disableButtons}