#5822 Fix: deprecated errors (#5842)

* fix: deprecated errors

* fix: ui tests

* fix: ui tests

* fix: pr reviews

Author: Ioan Moldovan

eslint.config.mjs

@@ -72,8 +72,7 @@ const commonConfig = {
         format: ['camelCase', 'PascalCase'],
       },
     ],
-    // should be enabled in https://github.com/FlowCrypt/flowcrypt-browser/issues/5822
-    '@typescript-eslint/no-deprecated': 'off',
+    '@typescript-eslint/no-deprecated': 'warn',
     '@typescript-eslint/no-empty-interface': 'off',
     '@typescript-eslint/no-explicit-any': ['warn'],
     '@typescript-eslint/no-extraneous-class': 'off',

extension/chrome/elements/add_pubkey.ts

@@ -76,7 +76,10 @@ View.run(
           }
         },
       });
-      $('select.copy_from_email').change(this.setHandler(el => this.copyFromEmailHandler(el)));
+      $('select.copy_from_email').on(
+        'change',
+        this.setHandler(el => this.copyFromEmailHandler(el))
+      );
       $('.action_ok').on(
         'click',
         this.setHandler(() => this.submitHandler())

extension/chrome/elements/attachment.ts

@@ -376,7 +376,7 @@ export class AttachmentDownloadView extends View {
       const result = await this.gmail.msgGet(this.attachment.msgId, 'full');
       if (result?.payload?.parts) {
         for (const attMeta of result.payload.parts) {
-          if (attMeta.filename === name && attMeta.body && attMeta.body.size === this.size && attMeta.body.attachmentId) {
+          if (attMeta.filename === this.name && attMeta.body && attMeta.body.size === this.size && attMeta.body.attachmentId) {
             this.attachment.id = attMeta.body.attachmentId;
             return;
           }

extension/chrome/elements/attachment_preview.ts

@@ -17,6 +17,8 @@ import { AttachmentWarnings } from './shared/attachment_warnings.js';
 import * as pdfjsLib from 'pdfjs';
 import { AttachmentPreviewPdf } from '../../js/common/ui/attachment_preview_pdf.js';
 
+// https://github.com/FlowCrypt/flowcrypt-browser/issues/5822#issuecomment-2362529197
+// eslint-disable-next-line @typescript-eslint/no-deprecated
 pdfjsLib.GlobalWorkerOptions.workerSrc = chrome.runtime.getURL(`lib/pdf.worker.min.mjs`);
 type AttachmentType = 'img' | 'txt' | 'pdf';
 

extension/chrome/elements/backup.ts

@@ -70,7 +70,7 @@ View.run(
         'click',
         this.setHandler(async () => this.testPassphraseHandler())
       );
-      $('#pass_phrase').keydown(this.setEnterHandlerThatClicks('.action_test_pass'));
+      $('#pass_phrase').on('keydown', this.setEnterHandlerThatClicks('.action_test_pass'));
     };
 
     private sendResizeMsg = () => {

extension/chrome/elements/compose-modules/compose-attachments-module.ts

@@ -17,7 +17,7 @@ export class ComposeAttachmentsModule extends ViewModule<ComposeView> {
   }
 
   public setHandlers = () => {
-    this.view.S.cached('body').bind({ drop: Ui.event.stop(), dragover: Ui.event.stop() }); // prevents files dropped out of the intended drop area to interfere
+    this.view.S.cached('body').on({ drop: Ui.event.stop(), dragover: Ui.event.stop() }); // prevents files dropped out of the intended drop area to interfere
     this.attachment.initAttachmentDialog('fineuploader', 'fineuploader_button', {
       uiChanged: () => {
         this.view.sizeModule.setInputTextHeightManuallyIfNeeded();

extension/chrome/elements/compose-modules/compose-recipients-module.ts

@@ -108,9 +108,18 @@ export class ComposeRecipientsModule extends ViewModule<ComposeView> {
         this.view.S.cached('input_to').trigger('focus');
       })
     );
-    this.view.S.cached('input_to').focus(this.view.setHandler(() => this.focusRecipients()));
-    this.view.S.cached('cc').focus(this.view.setHandler(() => this.focusRecipients()));
-    this.view.S.cached('bcc').focus(this.view.setHandler(() => this.focusRecipients()));
+    this.view.S.cached('input_to').on(
+      'focus',
+      this.view.setHandler(() => this.focusRecipients())
+    );
+    this.view.S.cached('cc').on(
+      'focus',
+      this.view.setHandler(() => this.focusRecipients())
+    );
+    this.view.S.cached('bcc').on(
+      'focus',
+      this.view.setHandler(() => this.focusRecipients())
+    );
     this.view.S.cached('compose_table').on(
       'click',
       this.view.setHandler(() => this.hideContacts(), this.view.errModule.handle(`hide contact box`))
@@ -568,7 +577,7 @@ export class ComposeRecipientsModule extends ViewModule<ComposeView> {
         }
       }
       return false;
-    } else if (e.keyCode === 32) {
+    } else if (e.key === 'Space') {
       // Handle 'Space' key
       const target = $(e.target);
       const emails = String(target.val())
@@ -808,7 +817,7 @@ export class ComposeRecipientsModule extends ViewModule<ComposeView> {
           displayEmail = contact.email;
         } else {
           const parts = contact.email.split('@');
-          displayEmail = parts[0].replace(/<\/?b>/g, '').substr(0, 10) + '...@' + parts[1];
+          displayEmail = parts[0].replace(/<\/?b>/g, '').substring(0, 10) + '...@' + parts[1];
         }
         displayEmail = '<div class="select_contact_email" data-test="action-select-contact-email">' + Xss.escape(displayEmail) + '</div>';
         if (contact.name) {
@@ -835,7 +844,7 @@ export class ComposeRecipientsModule extends ViewModule<ComposeView> {
           this.view.errModule.handle(`select contact`)
         )
       );
-      contactItems.hover(function () {
+      contactItems.on('hover', function () {
         contactItems.removeClass('active');
         $(this).addClass('active');
       });

extension/chrome/elements/compose-modules/compose-render-module.ts

@@ -371,12 +371,13 @@ export class ComposeRenderModule extends ViewModule<ComposeView> {
   };
 
   private addComposeTableHandlers = async () => {
-    this.view.S.cached('body').keydown(
+    this.view.S.cached('body').on(
+      'keydown',
       this.view.setHandler((el, ev) => {
         this.onBodyKeydownHandler(el, ev);
       })
     );
-    this.view.S.cached('input_to').bind(
+    this.view.S.cached('input_to').on(
       'paste',
       this.view.setHandler((el, ev) => this.onRecipientPasteHandler(el, ev))
     );
@@ -391,7 +392,7 @@ export class ComposeRenderModule extends ViewModule<ComposeView> {
       .children()
       .on('click', () => false);
     this.view.S.cached('input_subject')
-      .bind(
+      .on(
         'input',
         this.view.setHandler((el: HTMLInputElement) => {
           this.subjectRTLHandler(el);

extension/chrome/elements/compose-modules/compose-reply-btn-popover-module.ts

@@ -69,7 +69,7 @@ export class ComposeReplyBtnPopoverModule extends ViewModule<ComposeView> {
     if (replyContainer.hasClass('popover-opened')) {
       $('body').on('click', popoverClickHandler);
       const replyOptions = this.view.S.cached('reply_options_container').find('.reply-option');
-      replyOptions.hover(function () {
+      replyOptions.on('hover', function () {
         replyOptions.removeClass('active');
         $(this).addClass('active');
       });

extension/chrome/elements/compose-modules/compose-send-btn-module.ts

@@ -37,7 +37,7 @@ export class ComposeSendBtnModule extends ViewModule<ComposeView> {
 
   public setHandlers = (): void => {
     const ctrlEnterHandler = Ui.ctrlEnter(() => !this.view.sizeModule.composeWindowIsMinimized && this.extractProcessSendMsg());
-    this.view.S.cached('subject').add(this.view.S.cached('compose')).keydown(ctrlEnterHandler);
+    this.view.S.cached('subject').add(this.view.S.cached('compose')).on('keydown', ctrlEnterHandler);
     this.view.S.cached('send_btn').on(
       'click',
       this.view.setHandlerPrevent('double', () => this.extractProcessSendMsg())