SDA-4365 (Make tooltip dynamic) (#2006)

* SDA-4365 - Make tooltip dynamic

* SDA-4365 - Remove win32-api as it is no longer required

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "symphony",
-  "version": "23.11.0",
+  "version": "24.2.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "symphony",
-      "version": "23.11.0",
+      "version": "24.2.0",
       "hasInstallScript": true,
       "license": "Apache-2.0",
       "dependencies": {
@@ -25,8 +25,7 @@
         "rimraf": "^3.0.2",
         "save-svg-as-png": "^1.4.17",
         "shell-path": "^3.0.0",
-        "systeminformation": "5.21.7",
+        "systeminformation": "5.21.7"
-        "win32-api": "^20.1.0"
       },
       "devDependencies": {
         "@types/cheerio": "^0.22.22",
@@ -7841,23 +7840,6 @@
         "pend": "~1.2.0"
       }
     },
-    "node_modules/ffi-napi": {
-      "version": "4.0.3",
-      "hasInstallScript": true,
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "debug": "^4.1.1",
-        "get-uv-event-loop-napi-h": "^1.0.5",
-        "node-addon-api": "^3.0.0",
-        "node-gyp-build": "^4.2.1",
-        "ref-napi": "^2.0.1 || ^3.0.2",
-        "ref-struct-di": "^1.1.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/file-type": {
       "version": "9.0.0",
       "dev": true,
@@ -8384,19 +8366,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/get-symbol-from-current-process-h": {
-      "version": "1.0.2",
-      "license": "MIT",
-      "peer": true
-    },
-    "node_modules/get-uv-event-loop-napi-h": {
-      "version": "1.0.6",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "get-symbol-from-current-process-h": "^1.0.1"
-      }
-    },
     "node_modules/get-value": {
       "version": "2.0.6",
       "dev": true,
@@ -13132,11 +13101,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/node-addon-api": {
-      "version": "3.2.1",
-      "license": "MIT",
-      "peer": true
-    },
     "node_modules/node-api-version": {
       "version": "0.1.4",
       "dev": true,
@@ -13183,16 +13147,6 @@
         "node": "^12.13 || ^14.13 || >=16"
       }
     },
-    "node_modules/node-gyp-build": {
-      "version": "4.2.3",
-      "license": "MIT",
-      "peer": true,
-      "bin": {
-        "node-gyp-build": "bin.js",
-        "node-gyp-build-optional": "optional.js",
-        "node-gyp-build-test": "build-test.js"
-      }
-    },
     "node_modules/node-gyp/node_modules/semver": {
       "version": "7.5.1",
       "dev": true,
@@ -14995,63 +14949,6 @@
         "node": ">= 0.10"
       }
     },
-    "node_modules/ref-napi": {
-      "version": "3.0.3",
-      "hasInstallScript": true,
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "debug": "^4.1.1",
-        "get-symbol-from-current-process-h": "^1.0.2",
-        "node-addon-api": "^3.0.0",
-        "node-gyp-build": "^4.2.1"
-      },
-      "engines": {
-        "node": ">= 10.0"
-      }
-    },
-    "node_modules/ref-struct-di": {
-      "version": "1.1.1",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "debug": "^3.1.0"
-      }
-    },
-    "node_modules/ref-struct-di/node_modules/debug": {
-      "version": "3.2.7",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "ms": "^2.1.1"
-      }
-    },
-    "node_modules/ref-struct-di/node_modules/ms": {
-      "version": "2.1.3",
-      "license": "MIT",
-      "peer": true
-    },
-    "node_modules/ref-union-di": {
-      "version": "1.0.1",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "debug": "^3.1.0"
-      }
-    },
-    "node_modules/ref-union-di/node_modules/debug": {
-      "version": "3.2.7",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "ms": "^2.1.1"
-      }
-    },
-    "node_modules/ref-union-di/node_modules/ms": {
-      "version": "2.1.3",
-      "license": "MIT",
-      "peer": true
-    },
     "node_modules/reflect.ownkeys": {
       "version": "0.2.0",
       "dev": true,
@@ -18146,59 +18043,6 @@
         "string-width": "^1.0.2 || 2 || 3 || 4"
       }
     },
-    "node_modules/win32-api": {
-      "version": "20.4.1",
-      "license": "MIT",
-      "dependencies": {
-        "win32-def": "^20.4.1"
-      },
-      "engines": {
-        "node": ">=14.15.0"
-      },
-      "peerDependencies": {
-        "ffi-napi": "^4.0.3",
-        "ref-napi": "^3.0.3",
-        "ref-struct-di": "^1.1.1",
-        "ref-union-di": "^1.0.1"
-      }
-    },
-    "node_modules/win32-def": {
-      "version": "20.4.1",
-      "license": "MIT",
-      "dependencies": {
-        "@waiting/shared-types": "^20.11.0"
-      },
-      "engines": {
-        "node": ">=14.15.0"
-      },
-      "peerDependencies": {
-        "ref-napi": "^3.0.3",
-        "ref-struct-di": "^1.1.1",
-        "ref-union-di": "^1.0.1"
-      }
-    },
-    "node_modules/win32-def/node_modules/@waiting/shared-types": {
-      "version": "20.13.0",
-      "license": "MIT",
-      "engines": {
-        "node": ">=14.16.0"
-      },
-      "peerDependencies": {
-        "typescript": ">=4.7.4"
-      }
-    },
-    "node_modules/win32-def/node_modules/typescript": {
-      "version": "5.1.3",
-      "license": "Apache-2.0",
-      "peer": true,
-      "bin": {
-        "tsc": "bin/tsc",
-        "tsserver": "bin/tsserver"
-      },
-      "engines": {
-        "node": ">=14.17"
-      }
-    },
     "node_modules/winreg": {
       "version": "1.2.4",
       "license": "BSD-2-Clause",
@@ -23933,18 +23777,6 @@
         "pend": "~1.2.0"
       }
     },
-    "ffi-napi": {
-      "version": "4.0.3",
-      "peer": true,
-      "requires": {
-        "debug": "^4.1.1",
-        "get-uv-event-loop-napi-h": "^1.0.5",
-        "node-addon-api": "^3.0.0",
-        "node-gyp-build": "^4.2.1",
-        "ref-napi": "^2.0.1 || ^3.0.2",
-        "ref-struct-di": "^1.1.0"
-      }
-    },
     "file-type": {
       "version": "9.0.0",
       "dev": true
@@ -24303,17 +24135,6 @@
     "get-stream": {
       "version": "6.0.1"
     },
-    "get-symbol-from-current-process-h": {
-      "version": "1.0.2",
-      "peer": true
-    },
-    "get-uv-event-loop-napi-h": {
-      "version": "1.0.6",
-      "peer": true,
-      "requires": {
-        "get-symbol-from-current-process-h": "^1.0.1"
-      }
-    },
     "get-value": {
       "version": "2.0.6",
       "dev": true
@@ -27576,10 +27397,6 @@
         }
       }
     },
-    "node-addon-api": {
-      "version": "3.2.1",
-      "peer": true
-    },
     "node-api-version": {
       "version": "0.1.4",
       "dev": true,
@@ -27629,10 +27446,6 @@
         }
       }
     },
-    "node-gyp-build": {
-      "version": "4.2.3",
-      "peer": true
-    },
     "node-int64": {
       "version": "0.4.0",
       "dev": true
@@ -28821,56 +28634,6 @@
         "resolve": "^1.1.6"
       }
     },
-    "ref-napi": {
-      "version": "3.0.3",
-      "peer": true,
-      "requires": {
-        "debug": "^4.1.1",
-        "get-symbol-from-current-process-h": "^1.0.2",
-        "node-addon-api": "^3.0.0",
-        "node-gyp-build": "^4.2.1"
-      }
-    },
-    "ref-struct-di": {
-      "version": "1.1.1",
-      "peer": true,
-      "requires": {
-        "debug": "^3.1.0"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "3.2.7",
-          "peer": true,
-          "requires": {
-            "ms": "^2.1.1"
-          }
-        },
-        "ms": {
-          "version": "2.1.3",
-          "peer": true
-        }
-      }
-    },
-    "ref-union-di": {
-      "version": "1.0.1",
-      "peer": true,
-      "requires": {
-        "debug": "^3.1.0"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "3.2.7",
-          "peer": true,
-          "requires": {
-            "ms": "^2.1.1"
-          }
-        },
-        "ms": {
-          "version": "2.1.3",
-          "peer": true
-        }
-      }
-    },
     "reflect.ownkeys": {
       "version": "0.2.0",
       "dev": true
@@ -31045,28 +30808,6 @@
         "string-width": "^1.0.2 || 2 || 3 || 4"
       }
     },
-    "win32-api": {
-      "version": "20.4.1",
-      "requires": {
-        "win32-def": "^20.4.1"
-      }
-    },
-    "win32-def": {
-      "version": "20.4.1",
-      "requires": {
-        "@waiting/shared-types": "^20.11.0"
-      },
-      "dependencies": {
-        "@waiting/shared-types": {
-          "version": "20.13.0",
-          "requires": {}
-        },
-        "typescript": {
-          "version": "5.1.3",
-          "peer": true
-        }
-      }
-    },
     "winreg": {
       "version": "1.2.4",
       "optional": true

package.json

@@ -227,8 +227,7 @@
     "rimraf": "^3.0.2",
     "save-svg-as-png": "^1.4.17",
     "shell-path": "^3.0.0",
-    "systeminformation": "5.21.7",
+    "systeminformation": "5.21.7"
-    "win32-api": "^20.1.0"
   },
   "optionalDependencies": {
     "@symphony/symphony-c9-shell": "3.26.0-0.98.2.165",

src/renderer/components/call-notification.tsx

@@ -33,6 +33,8 @@ interface ICallNotificationState {
   flash: boolean;
   isExternal: boolean;
   theme: Theme;
+  isPrimaryTextOverflowing: boolean;
+  isSecondaryTextOverflowing: boolean;
 }
 
 type mouseEventButton =
@@ -49,9 +51,13 @@ export default class CallNotification extends React.Component<
     onReject: (data) => (event: mouseEventButton) => this.reject(event, data),
   };
   private readonly defaultState: ICallNotificationState;
+  private readonly primaryTooltipRef: React.RefObject<HTMLDivElement>;
+  private readonly secondaryTooltipRef: React.RefObject<HTMLDivElement>;
 
   constructor(props) {
     super(props);
+    this.primaryTooltipRef = React.createRef();
+    this.secondaryTooltipRef = React.createRef();
     this.defaultState = {
       title: 'Incoming call',
       primaryText: 'unknown',
@@ -68,6 +74,8 @@ export default class CallNotification extends React.Component<
       flash: false,
       isExternal: false,
       theme: '',
+      isPrimaryTextOverflowing: false,
+      isSecondaryTextOverflowing: false,
     };
     this.state = { ...this.defaultState };
     this.updateState = this.updateState.bind(this);
@@ -108,6 +116,8 @@ export default class CallNotification extends React.Component<
       theme,
       flash,
       icon,
+      isPrimaryTextOverflowing,
+      isSecondaryTextOverflowing,
     } = this.state;
 
     let themeClassName;
@@ -164,12 +174,15 @@ export default class CallNotification extends React.Component<
                 <div
                   data-testid='CALL_NOTIFICATION_NAME'
                   className={`caller-name ${themeClassName} tooltip-trigger`}
+                  ref={this.primaryTooltipRef}
                 >
                   {primaryText}
                 </div>
-                <div className='tooltip-content tooltip-primary'>
+                {isPrimaryTextOverflowing && (
-                  {primaryText}
+                  <div className='tooltip-content tooltip-primary'>
-                </div>
+                    {primaryText}
+                  </div>
+                )}
                 {this.renderExtBadge(isExternal)}
               </div>
             </div>
@@ -178,12 +191,15 @@ export default class CallNotification extends React.Component<
                 <div className='caller-details'>
                   <div
                     className={`caller-role ${themeClassName} tooltip-trigger`}
+                    ref={this.secondaryTooltipRef}
                   >
                     {secondaryText}
                   </div>
-                  <div className='tooltip-content tooltip-secondary'>
+                  {isSecondaryTextOverflowing && (
-                    {secondaryText}
+                    <div className='tooltip-content tooltip-secondary'>
-                  </div>
+                      {secondaryText}
+                    </div>
+                  )}
                 </div>
               </div>
             ) : (
@@ -247,6 +263,29 @@ export default class CallNotification extends React.Component<
     ipcRenderer.send('call-notification-on-reject', id);
   };
 
+  private checkTextOverflow = () => {
+    const primaryTooltipElement = this.primaryTooltipRef.current;
+    const secondaryTooltipElement = this.secondaryTooltipRef.current;
+    // Check if the primary text content overflows the element
+    if (
+      primaryTooltipElement &&
+      primaryTooltipElement.scrollWidth > primaryTooltipElement.clientWidth
+    ) {
+      this.setState({ isPrimaryTextOverflowing: true });
+    } else {
+      this.setState({ isPrimaryTextOverflowing: false });
+    }
+    // Check if the secondary text content overflows the element
+    if (
+      secondaryTooltipElement &&
+      secondaryTooltipElement.scrollWidth > secondaryTooltipElement.clientWidth
+    ) {
+      this.setState({ isSecondaryTextOverflowing: true });
+    } else {
+      this.setState({ isSecondaryTextOverflowing: false });
+    }
+  };
+
   /**
    * Sets the component state
    *
@@ -270,6 +309,7 @@ export default class CallNotification extends React.Component<
         ? data.theme
         : Themes.LIGHT;
     this.setState(data as ICallNotificationState);
+    this.checkTextOverflow();
   }
 
   /**