feat: display specific action types in workflow side panel tooltips

[DipakHalkude]

What I've Implemented

I've added tooltips that show the original action type when you hover over workflow step icons in the side panel. Now even if you rename an action to something custom, you can still see what type of action it actually is by hovering over the icon.

The Problem This Solves

Before this change, once you renamed a workflow action (like changing "Create Record" to "Add New Customer"), there was no way to tell what the original action type was. This made it really confusing when collaborating with others or when coming back to your own workflows after some time - you couldn't tell if an action was a "Create Record" or "Update Record" or something else.

What Changed

Updated action type labels: Instead of showing just "Action" for all record operations, the system now shows specific types like "Create Record", "Update Record", "Delete Record", etc.

Added hover tooltips: When you hover over the action icons in the workflow side panel, a tooltip appears showing the original action type, even if you've renamed the step title.

Before vs After

Before: All actions showed "Action" in the side panel, making it impossible to distinguish between different types after renaming.

After: Each action shows its specific type in tooltips, so you always know what you're working with.

This should make workflow management much clearer, especially when multiple people are collaborating on the same workflow!

Resolves #14878

Demo Video

See it in action: https://www.loom.com/share/c0e0ec24e4524d0685b841e9ceb011d0?t=65&sid=dc05e58a-8869-4969-aa67-9772242fe697

[github-actions]

Welcome!

Hello there, congrats on your first PR! We're excited to have you contributing to this project.
By submitting your Pull Request, you acknowledge that you agree with the terms of our Contributor License Agreement.

Generated by 🚫 dangerJS against 9e485ed

[greptile-apps]

Greptile Overview

Summary

This PR enhances the workflow user experience by adding tooltips to action icons in the side panel. The change addresses a significant UX issue where users lost visibility into the actual action type once they customized workflow step titles. Previously, after renaming an action like "Create Record" to "Add New Customer", there was no way to determine the original action type, making workflows difficult to maintain and collaborate on.

The implementation leverages the existing workflow infrastructure, specifically the headerType prop that already contains localized action type names from the useActionHeaderTypeOrThrow hook. The solution adds an AppTooltip component that displays the action type when hovering over the icon in the side panel header. A unique tooltip ID is generated using the header type to ensure multiple tooltips can coexist without conflicts.

This change integrates seamlessly with the existing workflow action management system, which already provides comprehensive header information including icons, colors, and localized type strings through specialized hooks. The tooltip enhancement preserves crucial metadata visibility while maintaining the flexibility for users to customize action titles.

Important Files Changed

Changed Files

Filename	Score	Overview
packages/twenty-front/src/modules/command-menu/components/SidePanelHeader.tsx	4/5	Added tooltip functionality to display action types when hovering over workflow step icons in the side panel

Confidence score: 4/5

• This PR is safe to merge with minimal risk as it only adds non-intrusive tooltip functionality
• Score reflects a straightforward UI enhancement that leverages existing infrastructure without modifying core workflow logic
• No files require special attention as the change is localized and uses established patterns

Sequence Diagram

sequenceDiagram
    participant User
    participant SidePanelHeader
    participant AppTooltip
    participant getActionHeaderTypeOrThrow

    User->>SidePanelHeader: "Hovers over workflow action icon"
    SidePanelHeader->>getActionHeaderTypeOrThrow: "Gets specific action type (e.g., 'CREATE_RECORD')"
    getActionHeaderTypeOrThrow-->>SidePanelHeader: "Returns localized action type (e.g., 'Create Record')"
    SidePanelHeader->>AppTooltip: "Displays tooltip with specific action type"
    AppTooltip-->>User: "Shows tooltip: 'Create Record', 'Update Record', etc."

Loading

_{1 file reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

style: Consider using a more robust ID generation method to handle potential edge cases with special characters in headerType

Prompt To Fix With AI

This is a comment left during a code review.
Path: packages/twenty-front/src/modules/command-menu/components/SidePanelHeader.tsx
Line: 93:93

Comment:
**style:** Consider using a more robust ID generation method to handle potential edge cases with special characters in headerType

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:60175

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

[DipakHalkude]

@Bonapara Please have a look :)

[thomtrp]

Hi @DipakHalkude, thank you for contributing. I need to validate the feature we want in that discussion first #14878 (comment)