Link to navigate to object settings is broken

[FelixMalfait]

Steps to reproduce:

1. Create a new object called "Test 2"
2. Go to that object's list view
3. Click on "Customize Fields"

4. You'll get a 404 because it redirects to http://localhost:3001/settings/objects/test2 instead of http://localhost:3001/settings/objects/test-2

We probably hardcoded the url and passed the wrong variable. We should let the Router build the url if possible and share a common logic between the 2 page. Do something as clean/robust as possible.

[greptile-apps]

To fix the broken link for navigating to object settings, update the URL construction to use the getObjectSlug utility function. This ensures consistent slug formatting. Specifically, update the to prop in SettingsObjectItemTableRow and SettingsObjectFieldItemTableRow components.

1. In SettingsObjects.tsx, modify the to prop in SettingsObjectItemTableRow:

<SettingsObjectItemTableRow
  key={activeObjectMetadataItem.namePlural}
  objectItem={activeObjectMetadataItem}
  action={<StyledIconChevronRight size={theme.icon.size.md} stroke={theme.icon.stroke.sm} />}
  to={`/settings/objects/${getObjectSlug(activeObjectMetadataItem)}`}
/>

2. In SettingsObjectDetail.tsx, modify the to prop in SettingsObjectFieldItemTableRow:

<SettingsObjectFieldItemTableRow
  key={activeMetadataField.id}
  identifierType={getFieldIdentifierType(activeMetadataField, activeObjectMetadataItem)}
  variant={activeObjectMetadataItem.isCustom ? 'identifier' : 'field-type'}
  fieldMetadataItem={activeMetadataField}
  isRemoteObjectField={activeObjectMetadataItem.isRemote}
  to={`./${getFieldSlug(activeMetadataField)}`}
  ActionIcon={
    <SettingsObjectFieldActiveActionDropdown
      isCustomField={!!activeMetadataField.isCustom}
      scopeKey={activeMetadataField.id}
      onEdit={() => navigate(`./${getFieldSlug(activeMetadataField)}`)}
      onSetAsLabelIdentifier={canBeSetAsLabelIdentifier ? () => handleSetLabelIdentifierField(activeMetadataField) : undefined}
      onDeactivate={isLabelIdentifier ? undefined : () => handleDisableField(activeMetadataField)}
    />
  }
/>

This ensures that the URLs are correctly formatted and navigates to the appropriate object settings page.

References

/packages/twenty-front/src/pages/settings/data-model/SettingsObjects.tsx
/packages/twenty-front/src/pages/settings/data-model/SettingsObjectDetail.tsx
/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx

About Greptile

This response provides a starting point for your research, not a precise solution.

Help us improve! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

Ask Greptile · Edit Issue Bot Settings

[saloni0419]

@FelixMalfait can i work on this issue

[rostaklein]

Ah, sry @saloni0419 Ive fixed this in the meantime #6228 hope you dont mind and will take another issue 😉