Convert "actions" item in ActionBar to a dropdown

[FelixMalfait]

Enable IS_QUICK_ACTIONS_ENABLED feature flag (manually add it in Postgres to feature flag table) Check useRecordTableContextMenuEntries.tsx ; you'll see we added a "Quick Action" item. We want to transform that into a dropdown. The dropdown should table an array of elements. Soon that array of elements will be driven by the backend that will return something like this

[
  'companies': [
   {"label": "Enrich", "icon": "IconWand", action:"enrich"
   ],
   'people': [
   {"label": "Enrich", "icon": "IconWand", action:"enrich"
   ],
]

It would be good to also anticipate that.

See Figma for reference:

[vinaybhamre]

@FelixMalfait Please assign this to me I would like to work on this

[FelixMalfait]

Thanks @vinaybhamre! Let us know on Discord if you need help

[i-am-chitti]

@vinaybhamre are you working on this? If not, I can work on this.

[vinaybhamre]

@i-am-chitti I was working on this but it's little difficult for me right now, You can work on this

@FelixMalfait Please assign this issue to @i-am-chitti

[i-am-chitti]

@FelixMalfait,

On my local, it's "Quick Action" and it's different from what's referred in Figma. Are you referring to the same as on my local. Also, could you guide me here on how can I add a dropdown as it's only accepting label, icon and onClick ie, ActionBarEntry?

[FelixMalfait]

Hey @i-am-chitti sorry I took long to get back to you! Yes we need to rename "Quick Action" to "Actions" and also change the icon according to the Figma. Directionally this is what I would do:

• update useRecordTableContextMenuEntries.tsx to introduce a new kind of item that doesn't have an onclick property but that has a subActions property that is an array of items that themselves have onclick properties
• in ActionBar.tsx when we are looping over entries we should account for the two types of item and if it's the kind without an onclick property but an array of items then we should display the list differently, wrapping subitems in DropDownScope/DropDown
• the see if the style is okay, maybe the current Dropdown component have to be modified a little bit to fit the use-case

Let me know if that works or not! Thanks

[i-am-chitti]

Thanks @FelixMalfait for the clear directions.

This is what I've developed -

I've rendered the dropdown items as MenuItem. Is this correct? Also, currently the dropdown items are dummy. Do we have it dynamically available in the codebase from backend?

[FelixMalfait]

@i-am-chitti would be great if you are able to adjust the positioning of the dropdown?

See prototype here

No the backend hasn't been done yet so we would only have enrich for now. Let's just take a hardcoded array as an input for now and tomorrow we'll replace it by something we fetch

The idea was that: (1) Apps will be able to register actions. For example tomorrow we could have an OpenAI app that registers some action X, Y. (2) Users will be able to register actions too. Kind of like webhooks URLs in the developers settings there would be a section below where they can register small piece of code or something like that. That way for example Twenty can become your backend or be plugged to your backend. Not sure if it's clear! But it isn't ready yet! Functions could be tricky to build if we want to allow users to code 😅 - not sure yet what will be the different steps to implement it, maybe first step will be to just register 1 URL per action and we send a POST request to that url... Before we introduce other types of actions like code-base actions

[i-am-chitti]

@FelixMalfait I'm not able to adjust the positioning as the component through which this styling can be done is inside main Dropdown - https://github.com/twentyhq/twenty/blob/main/packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx#L120-L127. Not sure how to apply style on this as it already accepting floatingStyles as prop which contain transform property.

Applying any style here will globally affect. Have raised a PR here - https://github.com/twentyhq/twenty/pull/3339 which you can check.

[FelixMalfait]

Thanks @i-am-chitti! Let's move with this now then and we'll try to fix this later. As this is still behind feature flag it's acceptable and that gives us a bit more time to find a solution