Call notification bugs backport (#1973)

* SDA-4299 - Make primary text inline-block (#1950) * SDA-4300 (Fix issues related to call toast notification) (#1961) * SDA-4300 - Fix issues related to call toast notification * SDA-4300 - Fix timer GitHub action issue * SDA-4332 - Limit toast notification to prevent overlying of call notification (#1966) * Removed accept button icon + larger buttons (#1970) * Removed accept button icon + larger buttons * Removed default image logic in call notifications * UT fix --------- Co-authored-by: Kiran Niranjan <kiran.niranjan@symphony.com>
finos · Oct 6, 2023 · 0df4d90 · 0df4d90
1 parent 45b9141
commit 0df4d90
Show file tree

Hide file tree

Showing 6 changed files with 92 additions and 40 deletions.
diff --git a/spec/callNotification.spec.ts b/spec/callNotification.spec.ts
@@ -119,16 +119,16 @@ describe('Call toast notification component', () => {
     expect(imClass.exists()).toBeTruthy();
   });
 
-  it('should render Symphony logo if Symphony default image provided', () => {
+  it('should render profile picture if Symphony default image provided', () => {
     const icon = './default.png';
     ipcRenderer.send(IPC_RENDERER_NOTIFICATION_DATA_CHANNEL, {
       ...defaultProps,
       icon,
     });
     const defaultLogoContainer = wrapper.find('.default-logo');
-    expect(defaultLogoContainer).toBeTruthy();
+    expect(defaultLogoContainer.exists()).toBeFalsy();
     const imageContainer = wrapper.find('.profile-picture');
-    expect(imageContainer.exists()).toBeFalsy();
+    expect(imageContainer).toBeTruthy();
   });
 
   it('should flash in a custom way when theme is set', () => {

diff --git a/src/renderer/components/call-notification.tsx b/src/renderer/components/call-notification.tsx
@@ -48,10 +48,11 @@ export default class CallNotification extends React.Component<
     onAccept: (data) => (event: mouseEventButton) => this.accept(event, data),
     onReject: (data) => (event: mouseEventButton) => this.reject(event, data),
   };
+  private readonly defaultState: ICallNotificationState;
 
   constructor(props) {
     super(props);
-    this.state = {
+    this.defaultState = {
       title: 'Incoming call',
       primaryText: 'unknown',
       secondaryText: '',
@@ -68,6 +69,7 @@ export default class CallNotification extends React.Component<
       isExternal: false,
       theme: '',
     };
+    this.state = { ...this.defaultState };
     this.updateState = this.updateState.bind(this);
   }
 
@@ -97,7 +99,6 @@ export default class CallNotification extends React.Component<
       company,
       companyIconUrl,
       color,
-      actionIconUrl,
       profilePlaceHolderText,
       callType,
       acceptButtonText,
@@ -134,11 +135,7 @@ export default class CallNotification extends React.Component<
       : callType === 'IM' || callType === 'ROOM'
       ? 'join'
       : 'answer';
-    const rejectText = rejectButtonText
-      ? rejectButtonText
-      : callType === 'IM' || callType === 'ROOM'
-      ? 'ignore'
-      : 'decline';
+    const rejectText = rejectButtonText ? rejectButtonText : 'decline';
 
     return (
       <div
@@ -165,17 +162,25 @@ export default class CallNotification extends React.Component<
               <div className='caller-name-container'>
                 <div
                   data-testid='CALL_NOTIFICATION_NAME'
-                  className={`caller-name ${themeClassName}`}
+                  className={`caller-name ${themeClassName} tooltip-trigger`}
                 >
                   {primaryText}
                 </div>
+                <div className='tooltip-content tooltip-primary'>
+                  {primaryText}
+                </div>
                 {this.renderExtBadge(isExternal)}
               </div>
             </div>
             {secondaryText ? (
               <div className='secondary-text-container'>
                 <div className='caller-details'>
-                  <div className={`caller-role ${themeClassName}`}>
+                  <div
+                    className={`caller-role ${themeClassName} tooltip-trigger`}
+                  >
+                    {secondaryText}
+                  </div>
+                  <div className='tooltip-content tooltip-secondary'>
                     {secondaryText}
                   </div>
                 </div>
@@ -220,22 +225,6 @@ export default class CallNotification extends React.Component<
             })}
             onClick={this.eventHandlers.onAccept(id)}
           >
-            {actionIconUrl ? (
-              <img
-                onError={(event) => {
-                  (event.target as any).src =
-                    '../renderer/assets/call-icon.svg';
-                }}
-                className={'action-icon'}
-                src={actionIconUrl}
-              />
-            ) : (
-              <img
-                src='../renderer/assets/call-icon.svg'
-                alt='join call icon'
-                className='profile-picture-badge'
-              />
-            )}
             <div className='label'>{acceptText}</div>
           </button>
         </div>
@@ -264,6 +253,7 @@ export default class CallNotification extends React.Component<
    * @param data {Object}
    */
   private updateState(_event, data): void {
+    this.setState({ ...this.defaultState });
     const { color } = data;
     // FYI: 1.5 sends hex color but without '#', reason why we check and add prefix if necessary.
     // Goal is to keep backward compatibility with 1.5 colors (SDA v. 9.2.0)
@@ -297,9 +287,8 @@ export default class CallNotification extends React.Component<
     let imgClass = 'default-logo';
     let url = '../renderer/assets/notification-symphony-logo.svg';
     let alt = 'Symphony logo';
-    const isDefaultUrl = imageUrl && imageUrl.includes('default.png');
 
-    if (imageUrl && !isDefaultUrl) {
+    if (imageUrl) {
       imgClass = 'profile-picture';
       url = imageUrl;
       alt = 'Profile picture';

diff --git a/src/renderer/notification-handler.ts b/src/renderer/notification-handler.ts
@@ -31,6 +31,7 @@ const NEXT_INSERT_POSITION_WITH_INPUT = 142;
 const NOTIFICATIONS_PADDING_SEPARATION = 12;
 const CALL_NOTIFICATION_WIDTH = 264;
 const CALL_NOTIFICATION_HEIGHT = 286;
+const MAX_VISIBLE_TOAST_FOR_CALL_NOTIFICATION = 3;
 export default class NotificationHandler {
   public settings: ISettings;
   public callNotificationSettings: ICorner = { x: 0, y: 0 };
@@ -150,9 +151,9 @@ export default class NotificationHandler {
     }
     this.calculateDimensions();
     // Maximum amount of Notifications we can show:
-    this.settings.maxVisibleNotifications = Math.floor(
-      display.workAreaSize.height / this.settings.totalHeight,
-    );
+    this.settings.maxVisibleNotifications =
+      Math.floor(display.workAreaSize.height / this.settings.totalHeight) -
+      MAX_VISIBLE_TOAST_FOR_CALL_NOTIFICATION;
   }
 
   /**

diff --git a/src/renderer/styles/call-notification.less b/src/renderer/styles/call-notification.less
@@ -136,10 +136,11 @@ body {
   font-style: normal;
   font-weight: 600;
   line-height: 24px;
-  display: flex;
+  display: inline-block;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  position: relative;
   max-width: 200px;
 }
 
@@ -228,26 +229,29 @@ text {
 
 .actions {
   display: flex;
-  justify-content: center;
-  align-items: flex-start;
+  flex-flow: row;
+  width: 100%;
   gap: 16px;
-  align-self: stretch;
 
   button {
     display: flex;
+    flex-grow: 1;
+    flex-basis: calc(100% / 2);
+    padding: 4px 8px;
     padding: 4px 12px;
     justify-content: center;
-    width: var(--button-width);
     align-items: center;
-    gap: 8px;
     border-radius: 16px;
     border-style: none;
     cursor: pointer;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 
     .label {
       color: @red-05;
       text-align: center;
-      font-size: 12px;
+      font-size: 11px;
       font-family: @font-family;
       font-style: normal;
       font-weight: 600;
@@ -266,6 +270,10 @@ text {
 
 .decline {
   background-color: @red-50;
+
+  &:hover {
+    background-color: @red-40;
+  }
 }
 
 .action-icon {
@@ -274,6 +282,45 @@ text {
 
 .accept {
   background-color: @green-50;
+
+  &:hover {
+    background-color: @green-40;
+  }
+}
+
+.tooltip-content {
+  visibility: hidden;
+  background-color: #333;
+  color: #fff;
+  border-radius: 4px;
+  padding: 5px 10px;
+  position: absolute;
+  z-index: 1;
+  left: 50%;
+  width: auto;
+  max-width: 200px;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  height: auto;
+  transform: translateX(-50%);
+  opacity: 0;
+  transition: opacity 0.3s, visibility 0.3s;
+}
+
+.tooltip-primary {
+  bottom: 50%;
+}
+.tooltip-secondary {
+  bottom: 40%;
+}
+
+.tooltip-trigger {
+  &:hover {
+    & + .tooltip-content {
+      visibility: visible;
+      opacity: 1;
+    }
+  }
 }
 
 .light-flashing {

diff --git a/src/renderer/styles/theme.less b/src/renderer/styles/theme.less
@@ -30,4 +30,6 @@
 
 @red-05: #fbeeed;
 @red-50: #dd342e;
+@red-40: #ff5d50;
 @green-50: #378535;
+@green-40: #2eaa35;
diff --git a/src/renderer/styles/tool-tip.less b/src/renderer/styles/tool-tip.less
@@ -0,0 +1,13 @@
+.tooltip {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100px;
+  height: 50px;
+  background-color: red;
+  border: 1px solid #ccc;
+  padding: 10px;
+  border-radius: 5px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  z-index: 999999;
+}