Merge branch 'master' of github.com:symphonyoss/SymphonyElectron

spec/__snapshots__/notificationSettings.spec.ts.snap

@@ -29,15 +29,13 @@ exports[`Notification Settings should mount, unmount and render component should
         className="display-selector"
         id="screen-selector"
         onChange={[Function]}
-        title="position"
+        title="Position"
         value={1}
       />
     </div>
     <label
       className="position-label"
-    >
+    />
-      Position
-    </label>
     <div
       className="position-container"
     >

src/app/analytics-handler.ts

@@ -1,7 +1,8 @@
 export interface IAnalyticsData {
   element: AnalyticsElements;
-  action_type?: MenuActionTypes | ScreenSnippetActionTypes;
+  action_type?: MenuActionTypes | ScreenSnippetActionTypes | ToastNotificationActionTypes;
   action_result?: AnalyticsActions;
+  extra_data?: object;
 }
 
 export interface ICrashData extends IAnalyticsData {
@@ -29,6 +30,10 @@ export enum ScreenSnippetActionTypes {
   ANNOTATE_ERASED = 'annotate_erased',
 }
 
+export enum ToastNotificationActionTypes {
+  TOAST_CLOSED = 'toast_closed',
+}
+
 export enum AnalyticsActions {
   ENABLED = 'ON',
   DISABLED = 'OFF',
@@ -37,6 +42,7 @@ export enum AnalyticsActions {
 export enum AnalyticsElements {
   MENU = 'Menu',
   SCREEN_CAPTURE_ANNOTATE = 'screen_capture_annotate',
+  TOAST_NOTIFICATION = 'toast_notification',
   SDA_CRASH = 'sda_crash',
 }
 

src/renderer/components/notification-comp.tsx

@@ -60,8 +60,6 @@ export default class NotificationComp extends React.Component<{}, IState> {
     onKeyUp: (winKey) => (event: keyboardEvent) => this.onKeyUp(event, winKey),
   };
   private flashTimer: NodeJS.Timer | undefined;
-  private customInput: React.RefObject<HTMLSpanElement>;
-  private inputCaret: React.RefObject<HTMLDivElement>;
   private input: React.RefObject<HTMLInputElement>;
 
   constructor(props) {
@@ -83,12 +81,10 @@ export default class NotificationComp extends React.Component<{}, IState> {
       canSendMessage: false,
     };
     this.updateState = this.updateState.bind(this);
-    this.setInputCaretPosition = this.setInputCaretPosition.bind(this);
+    this.onInputChange = this.onInputChange.bind(this);
     this.resetNotificationData = this.resetNotificationData.bind(this);
     this.getInputValue = this.getInputValue.bind(this);
 
-    this.customInput = React.createRef();
-    this.inputCaret = React.createRef();
     this.input = React.createRef();
   }
 
@@ -201,26 +197,12 @@ export default class NotificationComp extends React.Component<{}, IState> {
         >
           <div className='input-container'>
             <div className='input-border' />
-            <div className='input-caret-container'>
-              <span ref={this.customInput} className='custom-input' />
-            </div>
-            <div ref={this.inputCaret} className='input-caret' />
             <input
               style={bgColor}
               className={themeClassName}
               autoFocus={true}
-              onInput={this.setInputCaretPosition}
-              onKeyDown={this.setInputCaretPosition}
               onKeyUp={this.eventHandlers.onKeyUp(id)}
-              onChange={this.setInputCaretPosition}
+              onChange={this.onInputChange}
-              onClick={this.setInputCaretPosition}
-              onPaste={this.setInputCaretPosition}
-              onCut={this.setInputCaretPosition}
-              onCopy={this.setInputCaretPosition}
-              onMouseDown={this.setInputCaretPosition}
-              onMouseUp={this.setInputCaretPosition}
-              onFocus={() => this.animateCaret(true)}
-              onBlur={() => this.animateCaret(false)}
               ref={this.input}
             />
           </div>
@@ -317,7 +299,7 @@ export default class NotificationComp extends React.Component<{}, IState> {
     if (this.input.current) {
       const input = this.input.current.value;
       this.input.current.value = input + '👍';
-      this.setInputCaretPosition();
+      this.onInputChange();
       this.input.current.focus();
     }
   }
@@ -381,49 +363,21 @@ export default class NotificationComp extends React.Component<{}, IState> {
    * @private
    */
   private onKeyUp(event, id) {
-    this.setInputCaretPosition();
     if (event.key === 'Enter' || event.keyCode === 13) {
       this.onReply(id);
     }
   }
 
   /**
-   * Moves the custom input caret based on input text
+   * Updates the send button state based on input change
    * @private
    */
-  private setInputCaretPosition() {
+  private onInputChange() {
-    if (this.customInput.current) {
+    if (this.input.current) {
-      if (this.input.current) {
+      const inputText = this.input.current.value || '';
-        const inputText = this.input.current.value || '';
+      this.setState({
-        const selectionStart = this.input.current.selectionStart || 0;
+        canSendMessage: inputText.trim().length > 0,
-        this.customInput.current.innerText = inputText
+      });
-          .substring(0, selectionStart)
-          .replace(/\n$/, '\n\u0001');
-        this.setState({
-          canSendMessage: inputText.trim().length > 0,
-        });
-      }
-
-      const rects = this.customInput.current.getClientRects();
-      const lastRect = rects && rects[rects.length - 1];
-
-      const x = (lastRect && lastRect.width) || 0;
-      if (this.inputCaret.current) {
-        this.inputCaret.current.style.left = x + 'px';
-      }
-    }
-  }
-
-  /**
-   * Adds blinking animation to input caret
-   * @param hasFocus
-   * @private
-   */
-  private animateCaret(hasFocus: boolean) {
-    if (hasFocus) {
-      this.inputCaret.current?.classList.add('input-caret-focus');
-    } else {
-      this.inputCaret.current?.classList.remove('input-caret-focus');
     }
   }
 
@@ -477,6 +431,5 @@ export default class NotificationComp extends React.Component<{}, IState> {
     if (this.input.current) {
       this.input.current.value = '';
     }
-    this.setInputCaretPosition();
   }
 }

src/renderer/components/notification-settings.tsx

@@ -89,7 +89,7 @@ export default class NotificationSettings extends React.Component<{}, IState> {
                   : undefined
               }
               id='screen-selector'
-              title='position'
+              title={i18n.t('Position', NOTIFICATION_SETTINGS_NAMESPACE)()}
               value={this.state.display}
               onChange={this.selectDisplay.bind(this)}
             >
@@ -101,9 +101,7 @@ export default class NotificationSettings extends React.Component<{}, IState> {
             style={
               this.state.theme === Themes.DARK ? { color: 'white' } : undefined
             }
-          >
+          ></label>
-            {i18n.t('Position', NOTIFICATION_SETTINGS_NAMESPACE)()}
-          </label>
           <div
             className='position-container'
             style={

src/renderer/notification.ts

@@ -1,5 +1,10 @@
 import { app, BrowserWindow, ipcMain } from 'electron';
 
+import {
+  analytics,
+  AnalyticsElements,
+  ToastNotificationActionTypes,
+} from '../app/analytics-handler';
 import { config } from '../app/config-handler';
 import { createComponentWindow, windowExists } from '../app/window-utils';
 import { AnimationQueue } from '../common/animation-queue';
@@ -73,6 +78,19 @@ class Notification extends NotificationHandler {
   constructor(opts) {
     super(opts);
     ipcMain.on('close-notification', (_event, windowId) => {
+      const browserWindow = this.getNotificationWindow(windowId);
+      if (
+        browserWindow &&
+        windowExists(browserWindow) &&
+        browserWindow.notificationData
+      ) {
+        const notificationData = (browserWindow.notificationData as any).data;
+        analytics.track({
+          element: AnalyticsElements.TOAST_NOTIFICATION,
+          action_type: ToastNotificationActionTypes.TOAST_CLOSED,
+          extra_data: notificationData || {},
+        });
+      }
       // removes the event listeners on the client side
       this.notificationClosed(windowId);
       this.hideNotification(windowId);

src/renderer/styles/notification-comp.less

@@ -202,46 +202,6 @@ body {
   margin: 0 8px;
 }
 
-.input-caret-container {
-  position: absolute;
-  left: 8px;
-  top: 60px;
-  opacity: 0;
-  border: 0;
-  padding: 0;
-  margin-bottom: 0;
-  background: transparent;
-  height: 38px;
-  width: @inputWidth;
-  outline: none;
-  color: transparent;
-  text-shadow: 0 0 0 black;
-  z-index: -3;
-  white-space: pre;
-  margin-left: 8px;
-  display: inline-block;
-  max-width: 330px;
-}
-
-.custom-input {
-  font-size: 14px;
-  display: inline-block;
-  max-width: @inputWidth;
-}
-
-.input-caret {
-  position: absolute;
-  width: 2px;
-  height: 20px;
-  border-radius: 1px;
-  margin: 8px 8px;
-  background: transparent;
-}
-
-.input-caret-focus {
-  -webkit-animation: 1s blink step-end infinite;
-}
-
 input {
   width: @inputWidth;
   height: 38px;
@@ -249,7 +209,7 @@ input {
   outline: none;
   margin-left: 8px;
   font-size: 14px;
-  caret-color: transparent;
+  caret-color: #008eff;
   color: var(--text-color);
 }