ESLint rule to detect forwardRef components without display name

.eslintplugin.js

@@ -2,4 +2,5 @@ exports.rules = {
   i18n: require('./scripts/eslint-plugin/i18n'),
   'href-with-rel': require('./scripts/eslint-plugin/rel'),
   'require-license-header': require('./scripts/eslint-plugin/require_license_header'),
+  'forward-ref': require('./scripts/eslint-plugin/forward_ref_display_name'),
 };

.eslintrc.js

@@ -58,6 +58,7 @@ module.exports = {
     "prefer-template": "error",
     "local/i18n": "error",
     "local/href-with-rel": "error",
+    "local/forward-ref": "error",
     "local/require-license-header": [
       'warn',
       {

CHANGELOG.md

@@ -1,5 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Added eslint rule to detect `forwardRef` components without `displayName` ([#3451](https://github.com/elastic/eui/pull/3451))
 - Added `sortBy` and `sortShift` props to `euiPaletteColorBlind()` for sorting along the color wheel ([#3387](https://github.com/elastic/eui/pull/3387))
 - Added `partition` key to `EuiChartThemeType` for Partition chart support ([#3387](https://github.com/elastic/eui/pull/3387))
 - Updated `EuiImage`'s `caption` prop type from `string` to `ReactNode` ([#3387](https://github.com/elastic/eui/pull/3387))

scripts/eslint-plugin/forward_ref_display_name.js

@@ -0,0 +1,72 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'Enforce display name to forwardRef components',
+    },
+  },
+  create: function(context) {
+    const forwardRefUsages = [];
+    const displayNameUsages = [];
+    return {
+      VariableDeclarator(node) {
+        if (node.init && node.init.type === 'CallExpression') {
+          if (
+            node.init.callee &&
+            node.init.callee.type === 'MemberExpression'
+          ) {
+            if (
+              node.init.callee.property &&
+              node.init.callee.property.name === 'forwardRef'
+            ) {
+              forwardRefUsages.push(node.id);
+            }
+          }
+          if (node.init.callee && node.init.callee.name === 'forwardRef') {
+            forwardRefUsages.push(node.id);
+          }
+        }
+      },
+      Identifier(node) {
+        if (node.name === 'displayName') {
+          displayNameUsages.push(node.parent.object);
+        }
+      },
+      'Program:exit'() {
+        forwardRefUsages.forEach(identifier => {
+          if (!isDisplayNameUsed(identifier)) {
+            context.report({
+              node: identifier,
+              message: 'Forward ref components must use a display name',
+            });
+          }
+        });
+      },
+    };
+    function isDisplayNameUsed(identifier) {
+      const node = displayNameUsages.find(
+        displayName => displayName.name === identifier.name
+      );
+      return !!node;
+    }
+  },
+};

scripts/eslint-plugin/forward_ref_display_name.test.js

@@ -0,0 +1,47 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import rule from './forward_ref_display_name.js';
+const RuleTester = require('eslint').RuleTester;
+
+const ruleTester = new RuleTester({
+  parser: 'babel-eslint',
+});
+
+const valid = [
+  `const Component = React.forwardRef<ref>(() => {})
+   Component.displayName = "EuiBadgeGroup"
+`,
+];
+
+const invalid = [
+  {
+    code: 'const Component = React.forwardRef<ref>(() => {})',
+    errors: [
+      {
+        message: 'Forward ref components must use a display name',
+      },
+    ],
+  },
+];
+
+ruleTester.run('forward_ref_display_name', rule, {
+  valid,
+  invalid,
+});

src/components/color_picker/color_picker_swatch.tsx

@@ -53,3 +53,5 @@ export const EuiColorPickerSwatch = forwardRef<
     />
   );
 });
+
+EuiColorPickerSwatch.displayName = 'EuiColorPickerSwatch';

src/components/color_picker/saturation.tsx

@@ -208,3 +208,5 @@ export const EuiSaturation = forwardRef<HTMLDivElement, EuiSaturationProps>(
     );
   }
 );
+
+EuiSaturation.displayName = 'EuiSaturation';

src/components/datagrid/data_grid_header_row.tsx

@@ -122,4 +122,6 @@ const EuiDataGridHeaderRow = forwardRef<
   );
 });
 
+EuiDataGridHeaderRow.displayName = 'EuiDataGridHeaderRow';
+
 export { EuiDataGridHeaderRow };

src/components/form/range/range_slider.tsx

@@ -94,3 +94,5 @@ export const EuiRangeSlider = forwardRef<HTMLInputElement, EuiRangeSliderProps>(
     );
   }
 );
+
+EuiRangeSlider.displayName = 'EuiRangeSlider';

src/components/form/range/range_wrapper.tsx

@@ -46,3 +46,5 @@ export const EuiRangeWrapper = forwardRef<HTMLDivElement, EuiRangeWrapperProps>(
     );
   }
 );
+
+EuiRangeWrapper.displayName = 'EuiRangeWrapper';