add export segment all list design modal

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

@@ -14,7 +14,7 @@ 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 {
@@ -43,6 +43,7 @@ export class SegmentListsSectionCardComponent {
   permissions$: Observable<UserPermission>;
   tableRowCount$ = this.segmentsService.selectSegmentListsLength$;
   selectedSegment$ = this.segmentsService.selectedSegment$;
+  subscriptions = new Subscription();
 
   menuButtonItems: IMenuButtonItem[] = [
     {
@@ -77,13 +78,27 @@ export class SegmentListsSectionCardComponent {
         console.log('Import List');
         break;
       case SEGMENT_LIST_ACTIONS.EXPORT_ALL:
-        console.log('Export All Lists');
+        this.handleExportAllLists(segment);
         break;
       default:
         console.log('Unknown action');
     }
   }
 
+  handleExportAllLists(segment: Segment) {
+    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) {
     this.isSectionCardExpanded = isSectionCardExpanded;
   }
@@ -113,4 +128,8 @@ export class SegmentListsSectionCardComponent {
         }
       });
   }
+
+  onDestroy() {
+    this.subscriptions.unsubscribe();
+  }
 }

frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-modal/common-modal.component.html

@@ -1,7 +1,7 @@
 <mat-card class="common-modal">
   <!-- top part of the dialog -->
   <header class="header-container dense-2">
-    <h4 class="ft-22-700 header-title">{{ title }}</h4>
+    <h4 class="ft-22-700 header-title">{{ title | translate }}</h4>
     <button mat-icon-button mat-dialog-close class="close-btn">
       <mat-icon>close</mat-icon>
     </button>
@@ -14,7 +14,7 @@ <h4 class="ft-22-700 header-title">{{ title }}</h4>
   <!-- bottom part of the dialog -->
   <section *ngIf="!hideFooter" class="footer-container">
     <button mat-flat-button mat-dialog-close class="dialog-action-btn cancel-btn">
-      {{ cancelBtnLabel }}
+      {{ cancelBtnLabel | translate }}
     </button>
     <button
       class="dialog-action-btn"
@@ -23,7 +23,7 @@ <h4 class="ft-22-700 header-title">{{ title }}</h4>
       [disabled]="primaryActionBtnDisabled"
       (click)="onPrimaryActionBtnClicked()"
     >
-      {{ primaryActionBtnLabel }}
+      {{ primaryActionBtnLabel | translate }}
     </button>
   </section>
 </mat-card>

frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-modal/common-modal.component.ts

@@ -7,6 +7,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatDialogClose } from '@angular/material/dialog';
 import { CommonModule } from '@angular/common';
 import { MatIcon } from '@angular/material/icon';
+import { TranslateModule } from '@ngx-translate/core';
 
 @Component({
   selector: 'app-common-dialog',
@@ -19,6 +20,7 @@ import { MatIcon } from '@angular/material/icon';
     MatDialogClose,
     CommonModule,
     MatIcon,
+    TranslateModule,
   ],
   templateUrl: './common-modal.component.html',
   styleUrl: './common-modal.component.scss',

frontend/projects/upgrade/src/app/shared/services/common-dialog.service.ts

@@ -378,7 +378,7 @@ export class DialogService {
     return this.dialog.open(DeleteFeatureFlagModalComponent, config);
   }
 
-  openExportDesignModal(title, warning: string): MatDialogRef<CommonSimpleConfirmationModalComponent, boolean> {
+  openExportDesignModal(title: string, warning: string): MatDialogRef<CommonSimpleConfirmationModalComponent, boolean> {
     const commonModalConfig: CommonModalConfig = {
       title: title,
       primaryActionBtnLabel: 'Export',
@@ -391,6 +391,18 @@ export class DialogService {
     return this.openSimpleCommonConfirmationModal(commonModalConfig, ModalSize.MEDIUM);
   }
 
+  openExportSegmentListsDesignModal(): MatDialogRef<CommonSimpleConfirmationModalComponent, boolean> {
+    const commonModalConfig: CommonModalConfig = {
+      title: 'segments.export-feature-flag-design.confirmation-title.text',
+      primaryActionBtnLabel: 'Export',
+      primaryActionBtnColor: 'primary',
+      cancelBtnLabel: 'Cancel',
+      params: {
+        message: 'segments.export-feature-flag-design.confirmation-message.text',
+      },
+    };
+    return this.openSimpleCommonConfirmationModal(commonModalConfig, ModalSize.MEDIUM);
+  }
   openEmailFeatureFlagDataModal(
     warning: string,
     subtext: string

frontend/projects/upgrade/src/assets/i18n/en.json

@@ -501,6 +501,8 @@
   "segments.new-segment-overview-stepper.segment-name-error.text": "Segment name already exists for selected context. Please enter a unique segment name",
   "segments.view-segment.members-subtitle.text": "Member(s)",
   "segments.global-members.segments-count-members-error.text": "Please have at least 1 valid member to move forward",
+  "segments.export-feature-flag-design.confirmation-title.text": "Segment List Export All",
+  "segments.export-feature-flag-design.confirmation-message.text": "Are you sure you want to export all lists (JSON)?",
   "segments.import-segment.text": "IMPORT SEGMENT",
   "segments.import-segment.message.text": "Select the JSON file(s) to import segments:",
   "segments.import-segment-modal.title.text": "Import Segment",