ESLint rule to detect forwardRef components without display name (#3451)

* Added es lint rule to ensure display name for forwardRef components

* Added display name for `forwardRef` components

* removed fix

* Added cl

* Updated message in tests

* Check if nodes parent is a member expression

* Updated cl

* Fixed issue with rule

Co-authored-by: Chandler Prall <chandler.prall@gmail.com>

.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,6 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
 - Added exports for `EuiSteps` and related components types ([#3471](https://github.com/elastic/eui/pull/3471))
+- Added `displayName` to components using `React.forwardRef` ([#3451](https://github.com/elastic/eui/pull/3451))
 
 ## [`24.0.0`](https://github.com/elastic/eui/tree/v24.0.0)
 

scripts/eslint-plugin/forward_ref_display_name.js

@@ -0,0 +1,77 @@
+/*
+ * 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);
+          }
+        }
+      },
+      MemberExpression(node) {
+        const { property } = node;
+        if (
+          property &&
+          property.type === 'Identifier' &&
+          property.name === 'displayName'
+        ) {
+          displayNameUsages.push(node.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';