Tab Navigation for Object Detail Page

[Bonapara]

Current Behavior

To access an object's settings, you have to click on the three-dot menu in the right part of the object name banner. This is cluttered and unclear. We want to improve this display.

Desired Behavior

We want to introduce tab navigation on the Object detail page. We should use the same component that we started using for the "Email and Calendar" advanced settings. The first tab should be "Fields" and the second tab should be "Settings."

[greptile-apps[bot]]

To implement tab navigation on the Object detail page, follow these steps:

1. Import the Tab Navigation Component: Import the tab navigation component used in 'Email and Calendar' advanced settings.

import { TabNavigation } from '@/ui/navigation/tab-navigation/components/TabNavigation';

2. Update SettingsObjectDetail.tsx: Replace the current layout with the tab navigation component.

export const SettingsObjectDetail = () => {
  const navigate = useNavigate();
  const { objectSlug = '' } = useParams();
  const { findActiveObjectMetadataItemBySlug } = useFilteredObjectMetadataItems();
  const activeObjectMetadataItem = findActiveObjectMetadataItemBySlug(objectSlug);

  useEffect(() => {
    if (!activeObjectMetadataItem) navigate(AppPath.NotFound);
  }, [activeObjectMetadataItem, navigate]);

  if (!activeObjectMetadataItem) return null;

  return (
    <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
      <SettingsPageContainer>
        <Breadcrumb
          links={[
            { children: 'Objects', href: '/settings/objects' },
            { children: activeObjectMetadataItem.labelPlural },
          ]}
        />
        <TabNavigation
          tabs={[
            { label: 'Fields', path: `/settings/objects/${objectSlug}/fields` },
            { label: 'Settings', path: `/settings/objects/${objectSlug}/settings` },
          ]}
        />
        <Outlet />
      </SettingsPageContainer>
    </SubMenuTopBarContainer>
  );
};

3. Create Routes for Tabs: Ensure that routes for 'Fields' and 'Settings' tabs are defined in your router configuration.

<Route path="/settings/objects/:objectSlug/fields" element={<FieldsComponent />} />
<Route path="/settings/objects/:objectSlug/settings" element={<SettingsComponent />} />

4. Create FieldsComponent and SettingsComponent: Implement these components to render the respective content for each tab.

This will introduce tab navigation on the Object detail page, improving the user experience.

References

/packages/twenty-front/src/pages/settings/data-model/SettingsObjectDetail.tsx /packages/twenty-front/src/pages/settings/data-model/SettingsObjectEdit.tsx /packages/twenty-front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep1.tsx /packages/twenty-front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep2.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](https://app.greptile.com/chat/github/twentyhq/twenty/main) · [Edit Issue Bot Settings](https://app.greptile.com/apps/github)