Share an email thread to workspace members chip and dropdown (#4199) #5640

pereira0x · 2024-05-28T22:35:36Z

Feature: Email thread members visibility

For this feature we implemented a chip and a dropdown menu that allows users to check which workspace members can see an email thread, as depicted on issue (#4199).

Implementations

create a new database table (messageThreadMember)
relations between messageThreadMembers and the relevant existing tables (MessageThread and WorkspaceMembers)
added a new column to the MessageThread table: everyone - to indicate that all workspace members can see the email thread
create a new repository for the new table, including new queries
edit the queries so that the new fields could be fetched from the frontend
created a component MultiChip, that shows a group of user avatars, instead of just one
created a component, ShareDropdownMenu, that shows up once the EmailThreadMembersChip is clicked. On this menu you can see which workspace members can view the email thread.

Screenshots

Here are some screenshots of the frontend components that were created:

Chip with everyone in the workspace being part of the message thread:

Chip with just one member of the workspace (the owner) being part of the message thread:

Chip with some members of the workspace being part of the message thread:

How the chip looks in a message thread:

Dropdown that opens when you click on the chip:

Testing and Mock data

We also added mock data (TypeORM seeds), focusing on adding mock data related to message thread members.

Conclusion

As some of the changes that we needed to do, regarding the change of visibility of the message thread, were not covered by the existing documentation, we were told to open a PR and ask for feedback on this part of the implementation. Right now, our implementation is focused on displaying who is part of an email thread.

Feel free to let us know which steps we should follow next :)

greptile-apps

PR Summary

Introduced EmailThreadMembersChip component to display email thread visibility.
Added new fields to fetchAllThreadMessagesOperationSignatureFactory.ts for message thread members.
Updated RightDrawerEmailThread.tsx to manage message thread state with Recoil.
Created new types MessageThread and MessageThreadMember.
Added MessageThreadMembersBar component to show email thread members in the right drawer.

greptile-apps · 2024-05-28T22:35:59Z

packages/twenty-front/src/modules/activities/emails/components/EmailThreadMembersChip.tsx

+  messageThread: MessageThread | null;
+}) => {
+  const renderChip = () => {
+    if (!messageThread) {


Consider renaming isEveryone to isVisibleToEveryone for better clarity.

We don't feel the need for this change, as we wanted the variable to be consistent with the database table.

greptile-apps · 2024-05-28T22:36:00Z

packages/twenty-front/src/modules/activities/emails/components/EmailThreadMembersChip.tsx

+  const renderChip = () => {
+    if (!messageThread) {
+      return null;
+    }


Avoid using optional chaining (?.) when the variable is already checked for null.

This is correct, we will be fixing this in our next commit.

greptile-apps · 2024-05-28T22:36:00Z

packages/twenty-front/src/modules/activities/emails/components/EmailThreadMembersChip.tsx

+    switch (isEveryone) {
+      case false:
+        if (numberOfMessageThreadMembers === 1) {
+          return (


The label prop for SharedDropdownMenu is missing when numberOfMessageThreadMembers is not 1. Consider adding a default label.

Label already has a default value (empty string).

greptile-apps · 2024-05-28T22:36:35Z

...wenty-front/src/modules/activities/emails/right-drawer/components/RightDrawerEmailThread.tsx

@@ -10,6 +11,7 @@ import { useRightDrawerEmailThread } from '@/activities/emails/right-drawer/hook
 import { emailThreadIdWhenEmailThreadWasClosedState } from '@/activities/emails/states/lastViewableEmailThreadIdState';
 import { EmailThreadMessage as EmailThreadMessageType } from '@/activities/emails/types/EmailThreadMessage';
 import { RIGHT_DRAWER_CLICK_OUTSIDE_LISTENER_ID } from '@/ui/layout/right-drawer/constants/RightDrawerClickOutsideListener';
+import { messageThreadState } from '@/ui/layout/right-drawer/states/messageThreadState';


Move the declaration of setMessageThread above the useEffect hook for better readability.

We will apply this change as well.

greptile-apps · 2024-05-28T22:37:23Z

packages/twenty-front/src/modules/activities/emails/types/MessageThread.ts

+
+export type MessageThread = {
+  id: string;
+  everyone: boolean;


Consider renaming everyone to something more descriptive like isVisibleToAll for better clarity.

We think everyone is fine for this case.

greptile-apps · 2024-05-28T22:39:27Z

packages/twenty-front/src/modules/ui/layout/dropdown/components/SharedDropdownMenu.tsx

+                avatarUrl={getImageAbsoluteURIOrBase64(
+                  messageThreadMembersAvatarUrls?.[0],
+                )}
+                entityId={messageThreadMembers?.[0].workspaceMember.id}


Consider extracting the avatar rendering logic into a separate function to improve readability.

We don't think that this is necessary for this case.

greptile-apps · 2024-05-28T22:40:37Z

packages/twenty-server/src/database/typeorm-seeds/workspace/message-thread-members.ts

@@ -0,0 +1,103 @@
+import { EntityManager } from 'typeorm';


Consider adding a comment explaining the purpose of this seed script for future maintainers.

This is not an existing practice in the codebase. We don't think this is relevant here.

greptile-apps · 2024-05-28T22:40:38Z

packages/twenty-server/src/database/typeorm-seeds/workspace/message-thread-members.ts

+      'updatedAt',
+      'deletedAt',
+      'messageThreadId',
+      'workspaceMemberId',


Add error handling for the database insertion to manage potential failures gracefully.

We followed the same approach as with the other files, so we don't believe this is necessary.

greptile-apps · 2024-05-28T22:40:38Z

packages/twenty-server/src/database/typeorm-seeds/workspace/message-thread-members.ts

+    ])
+    .orIgnore()
+    .values([
+      {


The field 'workspaceUserId' should be 'workspaceMemberId' to match the table schema.

Same as above. We will be fixing this..

greptile-apps · 2024-05-28T22:46:38Z

packages/twenty-ui/src/display/chip/components/MultiChip.tsx

+  avatarUrls = [],
+  LeftIcon,
+  RightIcon,
+  className,


Consider renaming nAvatars to additionalAvatarsCount for better clarity.

We can change this variable name, but we think that a better name would be numberOfAvatars.

Bonapara · 2024-05-29T08:23:09Z

Thanks so much @pereira0x! From a design perspective, there is an unwanted top bar on the following component:

Dropdown that opens when you click on the chip:

simaosanguinho · 2024-05-29T09:34:22Z

Hey @Bonapara. Me and @pereira0x will take care of removing the unwanted top bar from the Dropdown component. Additionally, we'll review the bot suggestions and apply them to our patch.

simaosanguinho · 2024-06-04T12:52:00Z

Good afternoon everyone! Just pushed some changes, please tell us if we missed something.

simaosanguinho · 2024-06-08T17:56:06Z

Hi everyone. Regarding shared emails visibility change, me and @pereira0x were told on Discord that we could not leverage useFindManyRecords to change the visibility on shared email threads, given that nested query filters are not supported yet. Any ideas how we can move forward now @charlesBochet?

FelixMalfait · 2024-06-09T19:15:05Z

Hey thanks for this and apologies for the slow review! We'll review and try to get it merged this week.
Do you think you can handle the merge conflicts? I know it's a pain sorry

simaosanguinho · 2024-06-09T19:24:33Z

No worries!! The merge conflicts will be solved by the end of tomorrow.

Co-authored-by: Simão Sanguinho <[email protected]>

Co-authored-by: José Pereira <[email protected]>

Co-authored-by: Simão Sanguinho <[email protected]>

Co-authored-by: José Pereira <[email protected]>

Co-authored-by: Simão Sanguinho <[email protected]>

Co-authored-by: José Pereira <[email protected]>

Co-authored-by: Simão Sanguinho <[email protected]>

Co-authored-by: José Pereira <[email protected]>

Co-authored-by: Simão Sanguinho <[email protected]>

Co-authored-by: José Pereira <[email protected]>

Co-authored-by: Simão Sanguinho <[email protected]>

pereira0x · 2024-06-29T11:53:41Z

Hey, just letting you guys know that the new conflicts are now fixed!

greptile-apps bot reviewed May 28, 2024

View reviewed changes

charlesBochet added the PR: awaiting review label May 29, 2024

charlesBochet self-assigned this May 29, 2024

simaosanguinho force-pushed the shared-message-thread branch from 903e191 to 69026e1 Compare June 10, 2024 15:02

pereira0x force-pushed the shared-message-thread branch from 69026e1 to c3bfed6 Compare June 17, 2024 15:23

pereira0x and others added 19 commits June 29, 2024 12:32

feat: add everyone column to messageThread table

4f3345f

Co-authored-by: Simão Sanguinho <[email protected]>

feat: add messageThreadMembers table

fa523a5

Co-authored-by: Simão Sanguinho <[email protected]>

feat: add messageThreadMember repository functionality

49ef2a7

Co-authored-by: José Pereira <[email protected]>

feat: add messageThreadMembersBar

408abf0

Co-authored-by: José Pereira <[email protected]>

feat: add initial messageThreadMembersChip boilerplate

a890f5b

Co-authored-by: Simão Sanguinho <[email protected]>

feat: add member prop to emailThreadMembersChip

97dcab2

Co-authored-by: José Pereira <[email protected]>

feat: return everyone field on MessageThreads fetching

b6ff717

Co-authored-by: Simão Sanguinho <[email protected]>

feat: add MessageThread info when fetching Messages

069ee17

Co-authored-by: Simão Sanguinho <[email protected]>

feat: pass MessageThread data to MessageThreadMembersBar

74e5028

Co-authored-by: Simão Sanguinho <[email protected]>

feat: display messageThreadMembersChip depending on number of members

31c535d

Co-authored-by: Simão Sanguinho <[email protected]>

feat: seed a new messageThreadMember

8209fbb

Co-authored-by: José Pereira <[email protected]>

feat: add messageThreadMembers share button and dropdown

3a409d1

Co-authored-by: José Pereira <[email protected]>

feat: add participant in messageThreadMembers chip (twentyhq#4199)

cbabdfa

Co-authored-by: Simão Sanguinho <[email protected]>

fix: rename object-metadata to workspace-entity

5e0e316

Co-authored-by: Simão Sanguinho <[email protected]>

fix: remove unwanted menu separator

4074fed

Co-authored-by: José Pereira <[email protected]>

fix: apply greptile-apps bot suggestions

0f08608

Co-authored-by: Simão Sanguinho <[email protected]>

fix: resolve rebase conflicts

6ad1047

Co-authored-by: José Pereira <[email protected]>

fix: resolve rebase conflicts

df594e5

Co-authored-by: Simão Sanguinho <[email protected]>

fix: resolve rebase conflicts

0e94dc5

Co-authored-by: Simão Sanguinho <[email protected]>

pereira0x force-pushed the shared-message-thread branch from c3bfed6 to 0e94dc5 Compare June 29, 2024 11:45

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Share an email thread to workspace members chip and dropdown (#4199) #5640

Share an email thread to workspace members chip and dropdown (#4199) #5640

pereira0x commented May 28, 2024

greptile-apps bot left a comment

greptile-apps bot May 28, 2024

simaosanguinho Jun 4, 2024

greptile-apps bot May 28, 2024

pereira0x Jun 4, 2024

greptile-apps bot May 28, 2024

pereira0x Jun 4, 2024

greptile-apps bot May 28, 2024

simaosanguinho Jun 4, 2024

greptile-apps bot May 28, 2024

simaosanguinho Jun 4, 2024 •

edited

Loading

greptile-apps bot May 28, 2024

pereira0x Jun 4, 2024

greptile-apps bot May 28, 2024

pereira0x Jun 4, 2024

greptile-apps bot May 28, 2024

pereira0x Jun 4, 2024 •

edited

Loading

greptile-apps bot May 28, 2024

pereira0x Jun 4, 2024

greptile-apps bot May 28, 2024

pereira0x Jun 4, 2024

Bonapara commented May 29, 2024

simaosanguinho commented May 29, 2024

simaosanguinho commented Jun 4, 2024

simaosanguinho commented Jun 8, 2024

FelixMalfait commented Jun 9, 2024

simaosanguinho commented Jun 9, 2024

pereira0x commented Jun 29, 2024 •

edited

Loading

Share an email thread to workspace members chip and dropdown (#4199) #5640

Are you sure you want to change the base?

Share an email thread to workspace members chip and dropdown (#4199) #5640

Conversation

pereira0x commented May 28, 2024

Feature: Email thread members visibility

Implementations

Screenshots

Testing and Mock data

Conclusion

greptile-apps bot left a comment

Choose a reason for hiding this comment

PR Summary

greptile-apps bot May 28, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

greptile-apps bot May 28, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

greptile-apps bot May 28, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

greptile-apps bot May 28, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

greptile-apps bot May 28, 2024

Choose a reason for hiding this comment

simaosanguinho Jun 4, 2024 • edited Loading

Choose a reason for hiding this comment

greptile-apps bot May 28, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

greptile-apps bot May 28, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

greptile-apps bot May 28, 2024

Choose a reason for hiding this comment

pereira0x Jun 4, 2024 • edited Loading

Choose a reason for hiding this comment

greptile-apps bot May 28, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

greptile-apps bot May 28, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Bonapara commented May 29, 2024

simaosanguinho commented May 29, 2024

simaosanguinho commented Jun 4, 2024

simaosanguinho commented Jun 8, 2024

FelixMalfait commented Jun 9, 2024

simaosanguinho commented Jun 9, 2024

pereira0x commented Jun 29, 2024 • edited Loading

simaosanguinho Jun 4, 2024 •

edited

Loading

pereira0x Jun 4, 2024 •

edited

Loading

pereira0x commented Jun 29, 2024 •

edited

Loading