feat(install): Replaces index dialog prompt with sidebar buttons

Fixes #1509
runbox · Feb 29, 2024 · a9e5223 · a9e5223
1 parent 7071d6b
commit a9e5223
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 37 deletions.
diff --git a/e2e/cypress/integration/canvastable.ts b/e2e/cypress/integration/canvastable.ts
@@ -12,7 +12,6 @@ describe('Selecting rows in canvastable', () => {
     it('should select one row', () => {
         cy.viewport('iphone-6');
         cy.visit('/');
-        cy.closeWelcomeDialog();
 
         // select
         canvas().click({ x: 15, y: 40 });
@@ -25,7 +24,6 @@ describe('Selecting rows in canvastable', () => {
     it('should select multiple rows', () => {
         cy.viewport('iphone-6');
         cy.visit('/');
-        cy.closeWelcomeDialog();
 
         canvas().trigger('mousedown', { x: 15, y: 10 });
         for (let ndx = 0; ndx <= 5; ndx++) {

diff --git a/e2e/cypress/integration/folders.ts b/e2e/cypress/integration/folders.ts
@@ -3,7 +3,6 @@
 describe('Folder management', () => {
     it('should create folder at root level', () => {
         cy.visit('/');
-        cy.closeWelcomeDialog();
 
         cy.get('#createFolderButton').click();
         cy.get('.mat-dialog-title').should('contain', 'Add new folder');
@@ -16,7 +15,6 @@ describe('Folder management', () => {
 
     it('should empty trash', () => {
         cy.visit('/');
-        cy.closeWelcomeDialog();
 
         cy.contains('mat-tree-node', 'Trash')
             .find('button.mat-icon-button[mattooltip="Folder actions"]')

diff --git a/e2e/cypress/integration/login.ts b/e2e/cypress/integration/login.ts
@@ -18,8 +18,8 @@ describe('Login', () => {
 
     function expectWebmail() {
         cy.get('#sidenavGreeting').should('contain', 'test@runbox.com');
-        cy.get('confirm-dialog').should('contain', 'Runbox 7');
-        cy.get('confirm-dialog .mat-dialog-actions button mat-icon[svgIcon="cancel"]').click().should(() => {
+        cy.get('#offerLocalIndex').should('contain', 'Runbox 7');
+        cy.get('#offerLocalIndex mat-list-item button[mattooltip="Do not synchronize index"]').click().should(() => {
           expect(JSON.parse(localStorage.getItem('221:Desktop:localSearchPromptDisplayed'))).to.equal('true');
         });
     }

diff --git a/e2e/cypress/integration/search.ts b/e2e/cypress/integration/search.ts
@@ -3,7 +3,6 @@
 describe('Search', () => {
     it('should display multiple search field panel', () => {
         cy.visit('/');
-        cy.closeWelcomeDialog();
         cy.get('mat-toolbar mat-form-field button').click();
         cy.get('input[data-placeholder=Subject]').type('testsubject');
         cy.get('mat-toolbar input[data-placeholder="Start typing to search messages"]')

diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -52,6 +52,24 @@
 
       <mat-divider></mat-divider>
 
+      <div id="offerLocalIndex" *ngIf="offerInitialLocalIndex">
+        <div style="display: flex;">
+          <p>
+            Runbox 7 can synchronize with your browser to give you an optimal webmail experience.
+          </p>
+        </div>
+        <mat-list-item>
+          <button mat-raised-button (click)="downloadIndexFromServer()" matTooltip="Synchronize index with your device" color="primary">
+            Download Search Index
+          </button>
+          <button mat-raised-button (click)="refuseLocalIndex()" matTooltip="Do not synchronize index" color="warn">
+            Cancel
+          </button>
+        </mat-list-item>
+      </div>
+
+      <mat-divider></mat-divider>
+
       <div class="sidenavSubMenu" *ngIf="mobileQuery.matches">
         <a mat-button (click)="compose();" matTooltip="Compose">
           <mat-icon  svgIcon="pencil" color="primary"></mat-icon></a>
@@ -121,7 +139,7 @@
       </mat-list-item>
     </mat-nav-list>
 
-    <mat-nav-list *ngIf="(xapianLoaded | async) && !searchService.localSearchActivated && searchService.downloadProgress===null">
+    <mat-nav-list *ngIf="(xapianLoaded | async) && !searchService.localSearchActivated && searchService.downloadProgress===null && !offerInitialLocalIndex">
       <mat-list-item (click)="downloadIndexFromServer()" matTooltip="Synchronize index with your device">
         <mat-icon  svgIcon="sync" mat-list-icon></mat-icon>
         <p mat-line>Synchronize index</p>

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -43,7 +43,6 @@ import { RMM7MessageActions } from './mailviewer/rmm7messageactions';
 import { FolderListComponent, CreateFolderEvent, RenameFolderEvent, MoveFolderEvent } from './folder/folder.module';
 import { SimpleInputDialog, SimpleInputDialogParams } from './dialog/dialog.module';
 import { map, take, skip, mergeMap, filter, tap, throttleTime, debounceTime, distinctUntilChanged } from 'rxjs/operators';
-import { ConfirmDialog } from './dialog/confirmdialog.component';
 import { WebSocketSearchService } from './websocketsearch/websocketsearch.service';
 import { WebSocketSearchMailList } from './websocketsearch/websocketsearchmaillist';
 
@@ -98,6 +97,8 @@ export class AppComponent implements OnInit, AfterViewInit, CanvasTableSelectLis
   conversationGroupingToolTip = 'Threaded conversation view';
   unreadMessagesOnlyCheckbox = false;
   unreadOnlyToolTip = 'Unread messages only';
+  localSearchIndexPrompted = false;
+  offerInitialLocalIndex = false;
 
   indexDocCount = 0;
 
@@ -318,6 +319,7 @@ export class AppComponent implements OnInit, AfterViewInit, CanvasTableSelectLis
       // sidebar
       this.showPopularRecipients = prefs.get(`${this.preferenceService.prefGroup}:${LOCAL_STORAGE_SHOW_POPULAR_RECIPIENTS}`) === 'true';
       this.avatarSource = prefs.get(`${this.preferenceService.prefGroup}:avatarSource`);
+      this.localSearchIndexPrompted = prefs.get(`${this.preferenceService.prefGroup}:localSearchPromptDisplayed`) === 'true';
 
       this.preferences = prefs;
     });
@@ -992,6 +994,8 @@ export class AppComponent implements OnInit, AfterViewInit, CanvasTableSelectLis
   }
 
   public downloadIndexFromServer() {
+    this.preferenceService.set(this.preferenceService.prefGroup, 'localSearchPromptDisplayed', 'true');
+    this.localSearchIndexPrompted = true;
     this.searchService.downloadIndexFromServer().subscribe((res) => {
       if (res) {
         this.searchService.downloadPartitions().subscribe(() => {
@@ -1003,6 +1007,12 @@ export class AppComponent implements OnInit, AfterViewInit, CanvasTableSelectLis
     });
   }
 
+  public refuseLocalIndex() {
+    // User has had the initial prompt, stop asking
+    this.preferenceService.set(this.preferenceService.prefGroup, 'localSearchPromptDisplayed', 'true');
+    this.offerInitialLocalIndex = false;
+  }
+
   singleMailViewerClosed(action: string): void {
     this.canvastable.rows.clearOpenedRow();
     this.updateUrlFragment();
@@ -1338,7 +1348,6 @@ export class AppComponent implements OnInit, AfterViewInit, CanvasTableSelectLis
   }
 
   promptLocalSearch() {
-    const localSearchIndexPrompted = this.preferences.get(`${this.preferenceService.prefGroup}:localSearchPromptDisplayed`) === 'true';
     console.log('promptLocalSearch');
     this.rmmapi.me.pipe(
       mergeMap(() => xapianLoadedSubject),
@@ -1349,35 +1358,10 @@ export class AppComponent implements OnInit, AfterViewInit, CanvasTableSelectLis
       }),
       filter(xapianLoaded => xapianLoaded ? true : false),
       map(() => {
-        if (localSearchIndexPrompted) {
+        if (this.localSearchIndexPrompted) {
           this.usewebsocketsearch = true;
         } else {
-          const dialogRef = this.dialog.open(ConfirmDialog);
-          dialogRef.componentInstance.title = 'Welcome to Runbox 7!';
-          dialogRef.componentInstance.question =
-            `Runbox 7 will now synchronize with your device to give you an optimal webmail experience.
-            If you'd later like to remove the data from your device, use the synchronization controls at the bottom of the folder pane.`;
-          dialogRef.componentInstance.yesOptionTitle = `Sounds good, let's go!`;
-          dialogRef.componentInstance.noOptionTitle = `Don't synchronize with this device.`;
-          this.preferenceService.set(this.preferenceService.prefGroup, 'localSearchPromptDisplayed', 'true');
-
-          dialogRef.afterClosed().subscribe(res => {
-            let localIndexDecision = 'clicked-away';
-            if (res === true) {
-              localIndexDecision = 'yes';
-            }
-            if (res === false) {
-              localIndexDecision = 'no';
-            }
-            this.usage.report(`local-index-decision-${localIndexDecision}`);
-
-            if (res) {
-              this.downloadIndexFromServer();
-            } else {
-              this.usewebsocketsearch = true;
-            }
-            this.updateTooltips();
-          });
+          this.offerInitialLocalIndex = true;
         }
       })
     ).subscribe();