[Dashboards]- Addition of tabs

[ehconitin]

No description provided.

[greptile-apps]

Greptile Overview

Summary

This PR implements tab functionality for dashboards by adding the ability to create new tabs dynamically. The key changes enable users to add tabs when in edit mode, with proper state management and UI updates.

• Enhanced the dashboard save action to properly await asynchronous operations
• Integrated tab creation functionality into the page layout renderer with edit mode conditional logic
• Improved the useCreatePageLayoutTab hook to generate proper UUIDs, manage active tab state, and update page layouts
• Added tab sorting by position in the transform utility to ensure consistent display order
• Fixed the add button click handler in TabList component to properly invoke the callback
• Expanded test coverage to include active tab management and multiple tab creation scenarios

The implementation follows the existing codebase patterns and maintains proper separation of concerns between UI components and state management.

Confidence Score: 4/5

• This PR is safe to merge with minor issues that should be addressed
• The implementation is solid with proper state management, comprehensive test coverage, and follows existing patterns. The minor issue with the inconsistent onClick handler in TabList should be fixed to prevent potential UI bugs, but doesn't affect core functionality.
• Pay attention to TabList.tsx to fix the missing onClick handler in the hidden measurement container

Important Files Changed

File Analysis

Filename	Score	Overview
packages/twenty-front/src/modules/page-layout/components/PageLayoutRendererContent.tsx	5/5	Added tab creation functionality with edit mode conditional logic and proper state management integration
packages/twenty-front/src/modules/page-layout/hooks/useCreatePageLayoutTab.ts	4/5	Improved tab creation logic with UUID generation, active tab management, and proper state updates
packages/twenty-front/src/modules/ui/layout/tab-list/components/TabList.tsx	4/5	Fixed add button click handler to properly call the onAddTab function

Sequence Diagram

sequenceDiagram
    participant User
    participant PageLayoutRenderer as PageLayoutRendererContent
    participant TabList
    participant CreateTabHook as useCreatePageLayoutTab
    participant RecoilState as Recoil State
    participant SaveAction as SaveDashboardAction

    User->>PageLayoutRenderer: Enters edit mode
    PageLayoutRenderer->>RecoilState: Check isPageLayoutInEditMode
    PageLayoutRenderer->>CreateTabHook: Initialize createPageLayoutTab
    PageLayoutRenderer->>TabList: Pass onAddTab handler (if in edit mode)
    
    User->>TabList: Clicks add tab button (+)
    TabList->>CreateTabHook: Call createPageLayoutTab()
    CreateTabHook->>CreateTabHook: Generate new UUID
    CreateTabHook->>RecoilState: Update pageLayoutDraft with new tab
    CreateTabHook->>RecoilState: Set activeTabId to new tab
    CreateTabHook->>RecoilState: Add empty layout for new tab
    TabList-->>User: Display new tab in UI
    
    User->>SaveAction: Clicks save button
    SaveAction->>SaveAction: await savePageLayout()
    SaveAction->>RecoilState: Set isDashboardInEditMode(false)
    SaveAction-->>User: Exit edit mode

Loading

_{6 files reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

syntax: The add button in the hidden measurement container is missing the onClick handler while the visible one has it

Suggested change

	<IconButton Icon={IconPlus} size="small" variant="tertiary" />
	<IconButton Icon={IconPlus} size="small" variant="tertiary" onClick={() => onAddTab()} />

Prompt To Fix With AI

This is a comment left during a code review.
Path: packages/twenty-front/src/modules/ui/layout/tab-list/components/TabList.tsx
Line: 221:221

Comment:
syntax: The add button in the hidden measurement container is missing the onClick handler while the visible one has it

```suggestion
                  <IconButton Icon={IconPlus} size="small" variant="tertiary" onClick={() => onAddTab()} />
```

How can I resolve this? If you propose a fix, please make it concise.

[github-actions]

🚀 Preview Environment Ready!

Your preview environment is available at: http://bore.pub:12598

This environment will automatically shut down when the PR is closed or after 5 hours.