Create ESLint rule to discourage usage of navigate() and prefer Link (#5642)

### Description
Create ESLint rule to discourage usage of navigate() and prefer Link


### Refs
#5468 

### Demo

![Capture-2024-05-29-112852](https://github.com/twentyhq/twenty/assets/140154534/28378c09-86bb-49d3-9e9a-49aa1c07ad11)

![Capture-2024-05-29-112843](https://github.com/twentyhq/twenty/assets/140154534/2c05ea92-e19b-49ae-acb9-07f6ec9182ab)

Fixes #5468

---------

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Matheus <matheus_benini@hotmail.com>
Co-authored-by: Félix Malfait <felix.malfait@gmail.com>

tools/eslint-rules/index.ts

@@ -22,6 +22,10 @@ import {
   rule as noHardcodedColors,
   RULE_NAME as noHardcodedColorsName,
 } from './rules/no-hardcoded-colors';
+import {
+  rule as noNavigatePreferLink,
+  RULE_NAME as noNavigatePreferLinkName,
+} from './rules/no-navigate-prefer-link';
 import {
   rule as noStateUseref,
   RULE_NAME as noStateUserefName,
@@ -83,5 +87,6 @@ module.exports = {
     [maxConstsPerFileName]: maxConstsPerFile,
     [useRecoilCallbackHasDependencyArrayName]:
       useRecoilCallbackHasDependencyArray,
+    [noNavigatePreferLinkName]: noNavigatePreferLink,
   },
 };

tools/eslint-rules/rules/no-navigate-prefer-link.spec.ts

@@ -0,0 +1,59 @@
+import { TSESLint } from '@typescript-eslint/utils';
+
+import { rule, RULE_NAME } from './no-navigate-prefer-link';
+
+const ruleTester = new TSESLint.RuleTester({
+  parser: require.resolve('@typescript-eslint/parser'),
+});
+
+ruleTester.run(RULE_NAME, rule, {
+  valid: [
+    {
+      code: 'if(someVar) { navigate("/"); }',
+    },
+    {
+      code: '<Link to="/"><Button>Click me</Button></Link>',
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+    },
+    {
+      code: '<Button onClick={() =>{ navigate("/"); doSomething(); }} />',
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+    },
+  ],
+  invalid: [
+    {
+      code: '<Button onClick={() => navigate("/")} />',
+      errors: [
+        {
+          messageId: 'preferLink',
+        },
+      ],
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+    },
+    {
+      code: '<Button onClick={() => { navigate("/");} } />',
+      errors: [
+        {
+          messageId: 'preferLink',
+        },
+      ],
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+    },
+  ],
+});

tools/eslint-rules/rules/no-navigate-prefer-link.ts

@@ -0,0 +1,101 @@
+import { ESLintUtils, TSESTree } from '@typescript-eslint/utils';
+
+// NOTE: The rule will be available in ESLint configs as "@nx/workspace-no-navigate-prefer-link"
+export const RULE_NAME = 'no-navigate-prefer-link';
+
+export const rule = ESLintUtils.RuleCreator(() => __filename)({
+  name: RULE_NAME,
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description:
+        'Discourage usage of navigate() where a simple <Link> component would suffice.',
+    },
+    messages: {
+      preferLink: 'Use <Link> instead of navigate() for pure navigation.',
+    },
+    schema: [],
+  },
+  defaultOptions: [],
+  create: (context) => {
+    const functionMap: Record<string, TSESTree.ArrowFunctionExpression> = {};
+
+    const checkFunctionBodyHasSingleNavigateCall = (
+      func: TSESTree.ArrowFunctionExpression,
+    ) => {
+      // Check for simple arrow function with single navigate call
+      if (
+        func.body.type === 'CallExpression' &&
+        func.body.callee.type === 'Identifier' &&
+        func.body.callee.name === 'navigate'
+      ) {
+        return true;
+      }
+
+      // Check for block arrow function with single navigate call
+      if (
+        func.body.type === 'BlockStatement' &&
+        func.body.body.length === 1 &&
+        func.body.body[0].type === 'ExpressionStatement' &&
+        func.body.body[0].expression.type === 'CallExpression' &&
+        func.body.body[0].expression.callee.type === 'Identifier' &&
+        func.body.body[0].expression.callee.name === 'navigate'
+      ) {
+        return true;
+      }
+
+      return false;
+    };
+
+    return {
+      VariableDeclarator: (node) => {
+        // Check for function declaration on onClick
+        if (
+          node.init &&
+          node.init.type === 'ArrowFunctionExpression' &&
+          node.id.type === 'Identifier'
+        ) {
+          const func = node.init;
+          functionMap[node.id.name] = func;
+
+          if (checkFunctionBodyHasSingleNavigateCall(func)) {
+            context.report({
+              node: func,
+              messageId: 'preferLink',
+            });
+          }
+        }
+      },
+      JSXAttribute: (node) => {
+        // Check for navigate call directly on onClick
+        if (
+          node.name.name === 'onClick' &&
+          node.value.type === 'JSXExpressionContainer'
+        ) {
+          const expression = node.value.expression;
+
+          if (
+            expression.type === 'ArrowFunctionExpression' &&
+            checkFunctionBodyHasSingleNavigateCall(expression)
+          ) {
+            context.report({
+              node: expression,
+              messageId: 'preferLink',
+            });
+          } else if (
+            expression.type === 'Identifier' &&
+            functionMap[expression.name]
+          ) {
+            const func = functionMap[expression.name];
+            if (checkFunctionBodyHasSingleNavigateCall(func)) {
+              context.report({
+                node: expression,
+                messageId: 'preferLink',
+              });
+            }
+          }
+        }
+      },
+    };
+  },
+});