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

[FelixMalfait]

We will soon merge #5462 ; I think it would be nice to find a way to enforce this rule, not as strict requirement but as a recommandation across the codebase.
Using navigate() is OK when clicking on button that is doing more than just redirecting to a page (e.g. login out, creating a new record and redirecting to it). But for pure navigation we should avoid using onClick={() => navigate(...) on the component and instead use Link which is more accessible (browser recognizes the link, it can be opened in a new tab, etc.).

As a general principal, it would be nice to always have url/links when it's only a query change and doesn't involve a mutation (e.g. tabs on show page).

TBC if creating an eslint rule is relevant, maybe not suited for it.

[greptile-apps]

Disclaimer: This comment was automatically generated with AI. It can give some useful hints as to where to look for, but sometimes it can also give very inaccurate answers so takes this with a pinch of salt :).

To create an ESLint rule to discourage the usage of navigate() and prefer Link, follow these steps:

1. Create a Custom ESLint Rule:
   • Create a new file no-navigate-prefer-link.js in the ESLint rules directory.
   • Implement the rule to check for navigate() usage and suggest Link instead.

module.exports = {
  meta: {
    type: 'suggestion',
    docs: {
      description: 'Discourage usage of navigate() and prefer Link',
      category: 'Best Practices',
      recommended: false
    },
    messages: {
      preferLink: 'Use <Link> instead of navigate() for pure navigation.'
    },
    schema: []
  },
  create: function(context) {
    return {
      CallExpression(node) {
        if (node.callee.name === 'navigate') {
          context.report({
            node,
            messageId: 'preferLink'
          });
        }
      }
    };
  }
};

2. Update ESLint Configuration:
   • Add the custom rule to your ESLint configuration file (e.g., .eslintrc.js).

module.exports = {
  // ... other configurations
  rules: {
    'no-navigate-prefer-link': 'warn'
  }
};

3. Refactor Codebase:
   • Identify instances of navigate() and refactor them to use Link where appropriate.
   • Example refactor in SettingsObjectDetail.tsx:

import { Link } from 'react-router-dom';

// Replace navigate with Link
<Link to='/desired-path'>Go to Desired Path</Link>

This will enforce the usage of Link for pure navigation and improve accessibility across the codebase.

References

/packages/twenty-front/src/pages/settings/data-model/SettingsObjectDetail.tsx
/packages/twenty-front/src/pages/not-found/NotFound.tsx
/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx
/packages/twenty-front/src/pages/settings/data-model/SettingsObjects.tsx
/packages/twenty-front/src/modules/auth/sign-in-up/hooks/useNavigateAfterSignInUp.ts
/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRowDropdownMenu.tsx
/packages/twenty-front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep2.tsx
/packages/twenty-front/src/pages/settings/data-model/SettingsObjectDetail.tsx

Ask Greptile

[gitstart-app]

Here is the GitStart Ticket for this issue: https://clients.gitstart.com/twenty/5449/tickets/TWNTY-5468