Replace react-router-dom Link with div for inner clickables

[khuddite]

Fixes #8298

1. Origin of the issue
   When there is a clickable inside the table row, it uses the Link component from react-router-dom. But at the same time, table row is also using Link component for navigation when it's clickable. Since Link component uses a tag under the hood, it results in a nested a tag warning in the dev console. People row is an example that causes the issues under Companies data model.

2. Changes made
   Replaced the inner Link component with div tag that triggers navigation on onClick event. Stopped the event from bubbling up to the table row and prevented the default navigation behavior of the table row as well.

[greptile-apps]

PR Summary

This PR fixes nested <a> tag warnings in the dev console by replacing the React Router Link component with a div in clickable table elements.

• Modified packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDataType.tsx to use useNavigate hook instead of Link
• Added click event handling with event bubbling prevention in SettingsObjectFieldDataType
• Maintains existing navigation functionality while resolving HTML validation issues
• Addresses issue Error in devtools while checking fields of object #8298 where nested anchor tags were causing dev console warnings

_{1 file(s) reviewed, no comment(s)
Edit PR Review Bot Settings | Greptile}

[Devessier]

Thank you a lot for your contribution, @khuddite. We took a step back and found that the problem could be solved more globally. We will work on it.

[Devessier]

I would like to discuss the changes with @Bonapara and @charlesBochet. I took a different approach which has ux consequences, and which could be improved technically. I'm happy to discuss it!