twenty icon indicating copy to clipboard operation
twenty copied to clipboard

Display the thread content in the UI

Open bosiraphael opened this issue 1 year ago • 3 comments

Scope & Context

We have a list of threads in the UI. We want to display the following component after clicking on one thread.

Capture d’écran 2024-01-05 à 17 32 36

https://www.figma.com/file/xt8O9mFeLl46C5InWwoMrN/Twenty?type=design&node-id=16042%3A37861&mode=dev

Technical inputs

Create a ThreadActionBar component

Capture d’écran 2024-01-05 à 17 40 08

Create a ThreadMembers component which should take as props: Capture d’écran 2024-01-08 à 10 59 28

  • threadMembers: {avatarUrl : string, displayName: string, workspaceMemberId: string}

The ThreadMembers component should use the Dropdown component.

When clicking on Add Participant we should display a RelationPicker component.

Capture d’écran 2024-01-08 à 11 25 24

Create a ThreadHeader component

Capture d’écran 2024-01-05 à 17 40 17

Props:

  • subject: string
  • lastMessageSentAt: Date

Create a ThreadMessage component

Capture d’écran 2024-01-05 à 17 40 27

Props:

  • from: {avatarUrl: string, displayName: string, workspaceMemberId?: string, personId?: string}
  • to: {avatarUrl: string, displayName: string, workspaceMemberId?: string, personId?: string}[]
  • sentAt: Date
  • body: string

Create a ThreadBottomBar component

Capture d’écran 2024-01-05 à 17 40 36

For now, the buttons should do nothing.

Create a Thread component which contains ThreadActionBar, ThreadHeader, the mapping of messages to ThreadMessage and the ThreadBottomBar

Capture d’écran 2024-01-05 à 17 32 36
### Tasks
- [ ] https://github.com/twentyhq/twenty/issues/3290
- [ ] https://github.com/twentyhq/twenty/issues/3291
- [ ] https://github.com/twentyhq/twenty/issues/3292
- [ ] https://github.com/twentyhq/twenty/issues/3293
- [ ] https://github.com/twentyhq/twenty/issues/3294

bosiraphael avatar Jan 05 '24 16:01 bosiraphael

Hi @bosiraphael, I'm interested in working on this. Could you guide me how can email threads be shown on UI on local? Currently, it's blank on my side. image

Have already pulled latest code to the date.

i-am-chitti avatar Jan 06 '24 10:01 i-am-chitti

The backend for the emails is not fully ready yet. But you can add seed or mock data for now. The messages data is contained in 4 different tables: messageChannel, messageThread, message & messageRecipient. I will edit the ticket to add the props that the different components should take. Let me know if you need more details on this issue.

bosiraphael avatar Jan 08 '24 09:01 bosiraphael

I will split this ticket in multiple tickets.

bosiraphael avatar Jan 08 '24 10:01 bosiraphael