add export segment all list design modal

Author: danoswaltCL

backend/packages/Upgrade/.env.test

@@ -27,7 +27,7 @@ TYPEORM_CONNECTION=postgres
 TYPEORM_HOST=postgres
 TYPEORM_HOSTNAME_REPLICAS=[]
 TYPEORM_PORT=5432
-TYPEORM_USERNAME=postgres
+TYPEORM_USERNAME=doswalt
 TYPEORM_PASSWORD=postgres
 TYPEORM_DATABASE=postgres
 TYPEORM_SYNCHRONIZE=false

frontend/projects/upgrade/src/app/features/dashboard/segments/pages/segment-details-page/segment-details-page-content/segment-lists-section-card/segment-lists-section-card.component.ts

@@ -10,7 +10,7 @@ import { IMenuButtonItem } from 'upgrade_types';
 import { SegmentsService } from '../../../../../../../core/segments/segments.service';
 import { DialogService } from '../../../../../../../shared/services/common-dialog.service';
 import { Segment, SEGMENT_LIST_ACTIONS } from '../../../../../../../core/segments/store/segments.model';
-import { Observable } from 'rxjs';
+import { Observable, Subscription } from 'rxjs';
 import { AuthService } from '../../../../../../../core/auth/auth.service';
 import { UserPermission } from '../../../../../../../core/auth/store/auth.models';
 import { ParticipantListRowActionEvent } from '../../../../../../../core/feature-flags/store/feature-flags.model';
@@ -36,6 +36,7 @@ export class SegmentListsSectionCardComponent {
   permissions$: Observable<UserPermission>;
   tableRowCount$ = this.segmentsService.selectSegmentListsLength$;
   selectedSegment$ = this.segmentsService.selectedSegment$;
+  subscriptions = new Subscription();
 
   menuButtonItems: IMenuButtonItem[] = [
     {
@@ -78,15 +79,17 @@ export class SegmentListsSectionCardComponent {
   }
 
   handleExportAllLists(segment: Segment) {
-    this.dialogService
-      .openExportSegmentListsDesignModal()
-      .afterClosed()
-      .subscribe((isExportClicked: boolean) => {
-        if (isExportClicked) {
-          const subsegmentIds = segment.subSegments.map((subSegment) => subSegment.id);
-          this.segmentsService.exportSegments(subsegmentIds);
-        }
-      });
+    this.subscriptions.add(
+      this.dialogService
+        .openExportSegmentListsDesignModal()
+        .afterClosed()
+        .subscribe((isExportClicked: boolean) => {
+          if (isExportClicked) {
+            const subsegmentIds = segment.subSegments.map((subSegment) => subSegment.id);
+            this.segmentsService.exportSegments(subsegmentIds);
+          }
+        })
+    );
   }
 
   onSectionCardExpandChange(isSectionCardExpanded: boolean) {
@@ -97,4 +100,8 @@ export class SegmentListsSectionCardComponent {
     // This will be implemented later when we implement the table component
     console.log('Row action', event, segmentId);
   }
+
+  onDestroy() {
+    this.subscriptions.unsubscribe();
+  }
 }