ESLint Telemetry Rule

.github/CODEOWNERS

@@ -331,6 +331,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

package.json

@@ -1061,6 +1061,7 @@
     "@kbn/eslint-plugin-disable": "link:packages/kbn-eslint-plugin-disable",
     "@kbn/eslint-plugin-eslint": "link:packages/kbn-eslint-plugin-eslint",
     "@kbn/eslint-plugin-imports": "link:packages/kbn-eslint-plugin-imports",
+    "@kbn/eslint-plugin-telemetry": "link:packages/kbn-eslint-plugin-telemetry",
     "@kbn/expect": "link:packages/kbn-expect",
     "@kbn/failed-test-reporter-cli": "link:packages/kbn-failed-test-reporter-cli",
     "@kbn/find-used-node-modules": "link:packages/kbn-find-used-node-modules",

packages/kbn-eslint-config/.eslintrc.js

@@ -12,6 +12,7 @@ module.exports = {
     '@kbn/eslint-plugin-disable',
     '@kbn/eslint-plugin-eslint',
     '@kbn/eslint-plugin-imports',
+    '@kbn/eslint-plugin-telemetry',
     'prettier',
   ],
 
@@ -297,5 +298,6 @@ module.exports = {
     '@kbn/imports/uniform_imports': 'error',
     '@kbn/imports/no_unused_imports': 'error',
     '@kbn/imports/no_boundary_crossing': 'error',
+    '@kbn/telemetry/event_generating_elements_should_be_instrumented': 'warn',
   },
 };

packages/kbn-eslint-plugin-telemetry/BUILD.bazel

@@ -0,0 +1,129 @@
+load("@npm//@bazel/typescript:index.bzl", "ts_config")
+load("@build_bazel_rules_nodejs//:index.bzl", "js_library")
+load("//src/dev/bazel:index.bzl", "jsts_transpiler", "pkg_npm", "pkg_npm_types", "ts_project")
+
+PKG_DIRNAME = "kbn-eslint-plugin-telemetry"
+PKG_REQUIRE_NAME = "@kbn/eslint-plugin-telemetry"
+
+SOURCE_FILES = glob(
+  [
+    "**/*.ts",
+  ],
+  exclude = [
+    "**/*.config.js",
+    "**/*.mock.*",
+    "**/*.test.*",
+    "**/*.stories.*",
+    "**/__snapshots__/**",
+    "**/integration_tests/**",
+    "**/mocks/**",
+    "**/scripts/**",
+    "**/storybook/**",
+    "**/test_fixtures/**",
+    "**/test_helpers/**",
+  ],
+)
+
+SRCS = SOURCE_FILES
+
+filegroup(
+  name = "srcs",
+  srcs = SRCS,
+)
+
+NPM_MODULE_EXTRA_FILES = [
+  "package.json",
+]
+
+# In this array place runtime dependencies, including other packages and NPM packages
+# which must be available for this code to run.
+#
+#  To reference other packages use:
+#    "//repo/relative/path/to/package"
+#    eg. "//packages/kbn-utils"
+#
+#  To reference a NPM package use:
+#    "@npm//name-of-package"
+#    eg. "@npm//lodash"
+RUNTIME_DEPS = [
+  # "@npm//@typescript-eslint/typescript-estree",
+  # "@npm//@types/estree",
+  # "@npm//eslint",
+]
+
+# In this array place dependencies necessary to build the types, which will include the
+# :npm_module_types target of other packages and packages from NPM, including @types/*
+# packages.
+#
+#  To reference the types for another package use:
+#    "//repo/relative/path/to/package:npm_module_types"
+#    eg. "//packages/kbn-utils:npm_module_types"
+#
+#  References to NPM packages work the same as RUNTIME_DEPS
+TYPES_DEPS = [
+  "@npm//@types/node",
+  "@npm//@types/jest",
+  "@npm//@types/eslint",
+  "@npm//@typescript-eslint/typescript-estree",
+]
+
+jsts_transpiler(
+  name = "target_node",
+  srcs = SRCS,
+  build_pkg_name = package_name(),
+)
+
+ts_config(
+  name = "tsconfig",
+  src = "tsconfig.json",
+  deps = [
+    "//:tsconfig.base.json",
+    "//:tsconfig.bazel.json",
+  ],
+)
+
+ts_project(
+  name = "tsc_types",
+  args = ['--pretty'],
+  srcs = SRCS,
+  deps = TYPES_DEPS,
+  declaration = True,
+  declaration_map = True,
+  emit_declaration_only = True,
+  out_dir = "target_types",
+  tsconfig = ":tsconfig",
+)
+
+js_library(
+  name = PKG_DIRNAME,
+  srcs = NPM_MODULE_EXTRA_FILES,
+  deps = RUNTIME_DEPS + [":target_node"],
+  package_name = PKG_REQUIRE_NAME,
+  visibility = ["//visibility:public"],
+)
+
+pkg_npm(
+  name = "npm_module",
+  deps = [":" + PKG_DIRNAME],
+)
+
+filegroup(
+  name = "build",
+  srcs = [":npm_module"],
+  visibility = ["//visibility:public"],
+)
+
+pkg_npm_types(
+  name = "npm_module_types",
+  srcs = SRCS,
+  deps = [":tsc_types"],
+  package_name = PKG_REQUIRE_NAME,
+  tsconfig = ":tsconfig",
+  visibility = ["//visibility:public"],
+)
+
+filegroup(
+  name = "build_types",
+  srcs = [":npm_module_types"],
+  visibility = ["//visibility:public"],
+)

packages/kbn-eslint-plugin-telemetry/README.mdx

@@ -0,0 +1,13 @@
+---
+id: kibDevDocsOpsEslintPluginTelemetry
+slug: /kibana-dev-docs/ops/kbn-eslint-plugin-telemetry
+title: '@kbn/eslint-plugin-telemetry'
+description: Custom ESLint rules to support telemetry in the Kibana repository
+tags: ['kibana', 'dev', 'contributor', 'operations', 'eslint', 'telemetry']
+---
+
+`@kbn/eslint-plugin-telemetry` is an ESLint plugin providing custom rules for validating JSXCode in the Kibana repo to make sure it can be instrumented for the purposes of telemetry.
+
+## `@kbn/telemetry/instrumentable_elements_should_be_instrumented`
+
+This rule warns engineers to add `data-test-subj` to instrumentable components. It currently suggests the most widely used EUI components (`EuiButton`, `EuiFieldText`, etc), but can be expanded with often-used specific components used in the Kibana repo.

packages/kbn-eslint-plugin-telemetry/helpers/get_app_name.test.ts

@@ -0,0 +1,28 @@
+/*
+ * 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.
+ */
+
+import { getAppName } from './get_app_name';
+
+const SYSTEMPATH = 'systemPath';
+
+const testMap = [
+  ['x-pack/plugins/observability/foo/bar/baz/header_actions.tsx', 'o11y'],
+  ['x-pack/plugins/apm/public/components/app/correlations/correlations_table.tsx', 'apm'],
+  ['x-pack/plugins/cases/public/components/foo.tsx', 'cases'],
+  ['packages/kbn-alerts-ui-shared/src/alert_lifecycle_status_badge/index.tsx', 'kbnAlertsUiShared'],
+];
+
+describe('Get App Name', () => {
+  test.each(testMap)(
+    'should get the responsible app name from a file path',
+    (path, expectedValue) => {
+      const appName = getAppName(`${SYSTEMPATH}/${path}`, SYSTEMPATH);
+      expect(appName).toBe(expectedValue);
+    }
+  );
+});

packages/kbn-eslint-plugin-telemetry/helpers/get_app_name.ts

@@ -0,0 +1,26 @@
+/*
+ * 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.
+ */
+
+import { camelCase } from 'lodash';
+import path from 'path';
+
+const XPACK_DIR_ROOT = '/x-pack/plugins';
+const PACKAGES_ROOT = '/packages';
+
+export function getAppName(fileName: string, cwd: string) {
+  const { dir } = path.parse(fileName);
+  const relativePathToFile = dir.replace(cwd, '');
+
+  const appName = relativePathToFile.includes(XPACK_DIR_ROOT)
+    ? relativePathToFile.split(XPACK_DIR_ROOT)[1].split('/')[1]
+    : relativePathToFile.includes(PACKAGES_ROOT)
+    ? relativePathToFile.split(PACKAGES_ROOT)[1].split('/')[1]
+    : '';
+
+  return appName === 'observability' ? 'o11y' : camelCase(appName);
+}

packages/kbn-eslint-plugin-telemetry/helpers/get_function_name.ts

@@ -0,0 +1,34 @@
+/*
+ * 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.
+ */
+
+import { AST_NODE_TYPES, TSESTree } from '@typescript-eslint/typescript-estree';
+
+export function getFunctionName(func: TSESTree.FunctionDeclaration | TSESTree.Node): string {
+  if (
+    'id' in func &&
+    func.id &&
+    func.type === AST_NODE_TYPES.FunctionDeclaration &&
+    func.id.type === AST_NODE_TYPES.Identifier
+  ) {
+    return func.id.name;
+  }
+
+  if (
+    func.parent &&
+    (func.parent.type !== AST_NODE_TYPES.VariableDeclarator ||
+      func.parent.id.type !== AST_NODE_TYPES.Identifier)
+  ) {
+    return getFunctionName(func.parent);
+  }
+
+  if (func.parent?.id && 'name' in func.parent.id) {
+    return func.parent.id.name;
+  }
+
+  return '';
+}

packages/kbn-eslint-plugin-telemetry/helpers/get_intent_from_node.ts

@@ -0,0 +1,133 @@
+/*
+ * 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.
+ */
+import { TSESTree } from '@typescript-eslint/typescript-estree';
+import camelCase from 'lodash/camelCase';
+
+/*
+    Attempts to get a string representation of the intent
+    out of an array of nodes.
+
+    Currently supported node types in the array:
+    * String literal text (JSXText)
+    * Translated text via <FormattedMessage> component -> uses prop `defaultMessage`
+    * Translated text via {i18n.translate} call -> uses passed options object key `defaultMessage` 
+*/
+export function getIntentFromNode(originalNode: TSESTree.JSXOpeningElement): string {
+  const parent = originalNode.parent as TSESTree.JSXElement;
+
+  const node = Array.isArray(parent.children) ? parent.children : [];
+
+  if (node.length === 0) {
+    return '';
+  }
+
+  /*
+    In order to satisfy TS we need to do quite a bit of defensive programming.
+    This is my best attempt at providing the minimum amount of typeguards and
+    keeping the code readable. In the cases where types are explicitly set to
+    variables, it was done to help the compiler when it couldn't infer the type.
+    */
+  return node.reduce((acc: string, currentNode) => {
+    switch (currentNode.type) {
+      case 'JSXText':
+        // When node is a string primitive
+        return `${acc}${strip(currentNode.value)}`;
+
+      case 'JSXElement':
+        // Determining whether node is of form `<FormattedMessage defaultMessage="message" />`
+        const name: TSESTree.JSXTagNameExpression = currentNode.openingElement.name;
+        const attributes: Array<TSESTree.JSXAttribute | TSESTree.JSXSpreadAttribute> =
+          currentNode.openingElement.attributes;
+
+        if (!('name' in name) || name.name !== 'FormattedMessage') {
+          return '';
+        }
+
+        const defaultMessageProp = attributes.find(
+          (attribute) => 'name' in attribute && attribute.name.name === 'defaultMessage'
+        );
+
+        if (
+          !defaultMessageProp ||
+          !('value' in defaultMessageProp) ||
+          !('type' in defaultMessageProp.value!) ||
+          defaultMessageProp.value.type !== 'Literal' ||
+          typeof defaultMessageProp.value.value !== 'string'
+        ) {
+          return '';
+        }
+
+        return `${acc}${strip(defaultMessageProp.value.value)}`;
+
+      case 'JSXExpressionContainer':
+        // Determining whether node is of form `{i18n.translate('foo', { defaultMessage: 'message'})}`
+        const expression: TSESTree.JSXEmptyExpression | TSESTree.Expression =
+          currentNode.expression;
+
+        if (!('arguments' in expression)) {
+          return '';
+        }
+
+        const args: TSESTree.CallExpressionArgument[] = expression.arguments;
+        const callee: TSESTree.LeftHandSideExpression = expression.callee;
+
+        if (!('object' in callee)) {
+          return '';
+        }
+
+        const object: TSESTree.LeftHandSideExpression = callee.object;
+        const property: TSESTree.Expression | TSESTree.PrivateIdentifier = callee.property;
+
+        if (!('name' in object) || !('name' in property)) {
+          return '';
+        }
+
+        if (object.name !== 'i18n' || property.name !== 'translate') {
+          return '';
+        }
+
+        const callExpressionArgument: TSESTree.CallExpressionArgument | undefined = args.find(
+          (arg) => arg.type === 'ObjectExpression'
+        );
+
+        if (!callExpressionArgument || callExpressionArgument.type !== 'ObjectExpression') {
+          return '';
+        }
+
+        const defaultMessageValue: TSESTree.ObjectLiteralElement | undefined =
+          callExpressionArgument.properties.find(
+            (prop) =>
+              prop.type === 'Property' && 'name' in prop.key && prop.key.name === 'defaultMessage'
+          );
+
+        if (
+          !defaultMessageValue ||
+          !('value' in defaultMessageValue) ||
+          defaultMessageValue.value.type !== 'Literal' ||
+          typeof defaultMessageValue.value.value !== 'string'
+        ) {
+          return '';
+        }
+
+        return `${acc}${strip(defaultMessageValue.value.value)}`;
+
+      default:
+        break;
+    }
+
+    return acc;
+  }, '');
+}
+
+function strip(input: string): string {
+  if (!input) return '';
+
+  const cleanedString = camelCase(input);
+
+  return `${cleanedString.charAt(0).toUpperCase()}${cleanedString.slice(1)}`;
+}