fix(Toolbar): Cancel export should hide the progress indicator. (#15917)

Author: gedinakova

projects/igniteui-angular/src/lib/grids/grid/grid-toolbar.spec.ts

@@ -173,6 +173,18 @@ describe('IgxGrid - Grid Toolbar #grid - ', () => {
             expect($('#csvEntry').textContent).toMatch(instance.customCSVText);
         });
 
+        it('progress indicator should stop on canceling the export', () => {
+            fixture.componentInstance.exportStartCancelled = true;
+            fixture.detectChanges();
+            $(TOOLBAR_EXPORTER_TAG).querySelector('button').click();
+            fixture.detectChanges();
+            $('#excelEntry').click();
+            fixture.detectChanges();
+
+            expect(instance.exporterAction.isExporting).toBeFalse();
+            expect(instance.exporterAction.toolbar.showProgress).toBeFalse();
+        });
+
         it('Setting overlaySettings for each toolbar columns action', () => {
             const defaultSettings = instance.pinningAction.overlaySettings;
             const defaultFiltSettings = instance.advancedFiltAction.overlaySettings;
@@ -297,7 +309,7 @@ export class DefaultToolbarComponent {
                 <igx-grid-toolbar-advanced-filtering #advancedFiltAction>
                     {{ advancedFilteringTitle }}
                 </igx-grid-toolbar-advanced-filtering>
-                <igx-grid-toolbar-exporter #exporterAction [exportCSV]="exportCSV" [exportExcel]="exportExcel" [filename]="exportFilename">
+                <igx-grid-toolbar-exporter #exporterAction [exportCSV]="exportCSV" [exportExcel]="exportExcel" [filename]="exportFilename" (exportStarted)="exportStarted($event)">
                     {{ exporterText }}
                     <span id="excelEntry" excelText>{{ customExcelText }}</span>
                     <span id="csvEntry" csvText>{{ customCSVText }}</span>
@@ -346,8 +358,15 @@ export class ToolbarActionsComponent {
         modal: true,
         closeOnEscape: false
     };
+    public exportStartCancelled = false;
 
     constructor() {
         this.data = [...DATA];
     }
+
+    public exportStarted(args) {
+        if (this.exportStartCancelled) {
+            args.cancel = true;
+        }
+    }
 }

projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-exporter.component.ts

@@ -126,13 +126,14 @@ export class IgxGridToolbarExporterComponent extends BaseToolbarDirective {
 
         this.exportStarted.emit(args);
         this.grid.toolbarExporting.emit(args);
-        this.isExporting = true;
-        this.toolbar.showProgress = true;
 
         if (args.cancel) {
             return;
         }
 
+        this.isExporting = true;
+        this.toolbar.showProgress = true;
+
         exporter.exportEnded.pipe(first()).subscribe(() => {
             this.exportEnded.emit();
             this.isExporting = false;