feat: truncate notifications smartly [WPB-3754] (#15635)

* feat: truncate notifications smartly * test: update broken tests * chore: cleanup test file
wireapp · Aug 23, 2023 · 4a0aa5d · 4a0aa5d
1 parent 7ab4446
commit 4a0aa5d
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 25 deletions.
diff --git a/src/script/notification/NotificationRepository.test.ts b/src/script/notification/NotificationRepository.test.ts
@@ -93,6 +93,7 @@ describe('NotificationRepository', () => {
   let verifyNotificationEphemeral: (...args: any[]) => void;
   let verifyNotificationObfuscated: (...args: any[]) => void;
   let verifyNotificationSystem: (...args: any[]) => void;
+  let createTruncatedTitle: (name: string, conversationName: string) => string;
 
   let notification_content: any;
   const contentViewModelState: any = {};
@@ -123,7 +124,7 @@ describe('NotificationRepository', () => {
         tag: conversation.id,
       },
       timeout: NotificationRepository.CONFIG.TIMEOUT,
-      title: truncate(title, NotificationRepository.CONFIG.TITLE_LENGTH, false),
+      title: truncate(title, NotificationRepository.CONFIG.TITLE_MAX_LENGTH, false),
     };
 
     // Mocks
@@ -143,6 +144,18 @@ describe('NotificationRepository', () => {
 
     const showNotificationSpy = jest.spyOn(notificationRepository as any, 'showNotification');
 
+    createTruncatedTitle = (name, conversationName) => {
+      const titleLength = NotificationRepository.CONFIG.TITLE_MAX_LENGTH;
+      const titleSectionLength = NotificationRepository.CONFIG.TITLE_LENGTH;
+
+      const titleText = `${truncate(name, titleSectionLength, false)} in ${truncate(
+        conversationName,
+        titleSectionLength,
+        false,
+      )}`;
+      return truncate(titleText, titleLength, false);
+    };
+
     verifyNotification = (_conversation, _message, _expected_body) => {
       return notificationRepository.notify(_message, undefined, _conversation).then(() => {
         expect(showNotificationSpy).toHaveBeenCalledTimes(1);
@@ -153,10 +166,7 @@ describe('NotificationRepository', () => {
         notification_content.trigger = trigger;
 
         if (_conversation.isGroup()) {
-          const titleLength = NotificationRepository.CONFIG.TITLE_LENGTH;
-          const titleText = `${_message.user().name()} in ${_conversation.display_name()}`;
-
-          notification_content.title = truncate(titleText, titleLength, false);
+          notification_content.title = createTruncatedTitle(_message.user().name(), _conversation.display_name());
         } else {
           notification_content.title = 'Name not available';
         }
@@ -192,11 +202,8 @@ describe('NotificationRepository', () => {
 
         const obfuscateMessage = _setting === NotificationPreference.OBFUSCATE_MESSAGE;
         if (obfuscateMessage) {
-          const titleLength = NotificationRepository.CONFIG.TITLE_LENGTH;
-          const titleText = `${message.user().name()} in ${conversation.display_name()}`;
-
           notification_content.options.body = t('notificationObfuscated');
-          notification_content.title = truncate(titleText, titleLength, false);
+          notification_content.title = createTruncatedTitle(_message.user().name(), _conversation.display_name());
         } else {
           notification_content.options.body = t('notificationObfuscated');
           notification_content.title = t('notificationObfuscatedTitle');
@@ -542,10 +549,7 @@ describe('NotificationRepository', () => {
 
   describe('shows a well-formed group notification', () => {
     beforeEach(() => {
-      const titleLength = NotificationRepository.CONFIG.TITLE_LENGTH;
-      const titleText = `${message.user().name()} in ${conversation.display_name()}`;
-
-      notification_content.title = truncate(titleText, titleLength, false);
+      notification_content.title = createTruncatedTitle(user.name(), conversation.display_name());
     });
 
     it('if a group is created', () => {
@@ -603,11 +607,7 @@ describe('NotificationRepository', () => {
     describe('if people are added', () => {
       beforeEach(() => {
         memberMessage.type = CONVERSATION_EVENT.MEMBER_JOIN;
-
-        const titleLength = NotificationRepository.CONFIG.TITLE_LENGTH;
-        const titleText = `${memberMessage.user().name()} in ${conversation.display_name()}`;
-
-        notification_content.title = truncate(titleText, titleLength, false);
+        notification_content.title = createTruncatedTitle(user.name(), conversation.display_name());
       });
 
       it('with one user being added to the conversation', () => {
@@ -641,10 +641,8 @@ describe('NotificationRepository', () => {
     describe('if people are removed', () => {
       beforeEach(() => {
         memberMessage.type = CONVERSATION_EVENT.MEMBER_LEAVE;
-        const titleLength = NotificationRepository.CONFIG.TITLE_LENGTH;
-        const titleText = `${memberMessage.user().name()} in ${conversation.display_name()}`;
 
-        notification_content.title = truncate(titleText, titleLength, false);
+        notification_content.title = createTruncatedTitle(user.name(), conversation.display_name());
       });
 
       it('with one user being removed from the conversation', () => {

diff --git a/src/script/notification/NotificationRepository.ts b/src/script/notification/NotificationRepository.ts
@@ -108,7 +108,8 @@ export class NotificationRepository {
       BODY_LENGTH: 80,
       ICON_URL: '/image/logo/notification.png',
       TIMEOUT: TIME_IN_MILLIS.SECOND * 5,
-      TITLE_LENGTH: 38,
+      TITLE_LENGTH: 17,
+      TITLE_MAX_LENGTH: 38,
     };
   }
 
@@ -617,16 +618,22 @@ export class NotificationRepository {
    */
   private createTitle(messageEntity: Message, conversationEntity?: Conversation): string {
     const conversationName = conversationEntity && conversationEntity.display_name();
+    const truncatedConversationName = truncate(
+      conversationName ?? '',
+      NotificationRepository.CONFIG.TITLE_LENGTH,
+      false,
+    );
     const userEntity = messageEntity.user();
+    const truncatedName = truncate(userEntity.name(), NotificationRepository.CONFIG.TITLE_LENGTH, false);
 
     let title;
     if (conversationName) {
       title = conversationEntity.isGroup()
-        ? t('notificationTitleGroup', {conversation: conversationName, user: userEntity.name()}, {}, true)
+        ? t('notificationTitleGroup', {conversation: truncatedConversationName, user: truncatedName}, {}, true)
         : conversationName;
     }
 
-    return truncate(title || userEntity.name(), NotificationRepository.CONFIG.TITLE_LENGTH, false);
+    return truncate(title ?? truncatedName, NotificationRepository.CONFIG.TITLE_MAX_LENGTH, false);
   }
 
   /**
@@ -636,7 +643,7 @@ export class NotificationRepository {
    */
   private createTitleObfuscated(): string {
     const obfuscatedTitle = t('notificationObfuscatedTitle');
-    return truncate(obfuscatedTitle, NotificationRepository.CONFIG.TITLE_LENGTH, false);
+    return truncate(obfuscatedTitle, NotificationRepository.CONFIG.TITLE_MAX_LENGTH, false);
   }
 
   /**