Fix exportAll to export every experiments in DB

backend/packages/Upgrade/src/api/controllers/ExperimentController.ts

@@ -1286,7 +1286,38 @@ export class ExperimentController {
     @Req() request: AppRequest
   ): Promise<Experiment[]> {
     const experimentIds = params.ids;
-    return this.experimentService.exportExperiment(experimentIds, currentUser, request.logger);
+    return this.experimentService.exportExperiment(currentUser, request.logger, experimentIds);
+  }
+
+  /**
+   * @swagger
+   * /experiments/all:
+   *    get:
+   *       description: Export All Experiment JSON
+   *       tags:
+   *         - Experiments
+   *       produces:
+   *         - application/json
+   *       responses:
+   *          '200':
+   *            description: Experiments are exported
+   *            schema:
+   *             type: array
+   *             items:
+   *               type: object
+   *               properties:
+   *                 fileName:
+   *                   type: string
+   *                 error:
+   *                   type: string
+   *          '401':
+   *            description: AuthorizationRequiredError
+   *          '500':
+   *            description: Internal Server Error
+   */
+  @Get('/export/all')
+  public exportAllExperiment(@CurrentUser() currentUser: UserDTO, @Req() request: AppRequest): Promise<Experiment[]> {
+    return this.experimentService.exportExperiment(currentUser, request.logger);
   }
 
   /**

backend/packages/Upgrade/src/api/services/ExperimentService.ts

@@ -566,10 +566,10 @@ export class ExperimentService {
     return validatedExperiments;
   }
 
-  public async exportExperiment(experimentIds: string[], user: UserDTO, logger: UpgradeLogger): Promise<Experiment[]> {
+  public async exportExperiment(user: UserDTO, logger: UpgradeLogger, experimentIds?: string[]): Promise<Experiment[]> {
     logger.info({ message: `Inside export Experiment JSON ${experimentIds}` });
     const experimentDetails = await this.experimentRepository.find({
-      where: { id: In(experimentIds) },
+      where: experimentIds ? { id: In(experimentIds) } : undefined,
       relations: [
         'partitions',
         'conditions',

frontend/projects/upgrade/src/app/core/experiments/experiments.data.service.ts

@@ -91,6 +91,11 @@ export class ExperimentDataService {
     return this.http.get(url, { params: ids });
   }
 
+  exportAllExperimentDesign() {
+    const url = `${this.environment.api.exportAllExperiment}`;
+    return this.http.get(url);
+  }
+
   fetchExperimentGraphInfo(params: any) {
     const url = this.environment.api.experimentGraphInfo;
     return this.http.post(url, params);

frontend/projects/upgrade/src/app/core/experiments/experiments.service.spec.ts

@@ -580,7 +580,12 @@ describe('ExperimentService', () => {
 
       service.exportExperimentDesign([experimentId]);
 
-      expect(mockStore.dispatch).toHaveBeenCalledWith(actionExportExperimentDesign({ experimentIds: [experimentId] }));
+      expect(mockStore.dispatch).toHaveBeenCalledWith(
+        actionExportExperimentDesign({
+          experimentIds: [experimentId],
+          exportAll: false,
+        })
+      );
     });
   });
 

frontend/projects/upgrade/src/app/core/experiments/experiments.service.ts

@@ -35,6 +35,7 @@ import {
   selectIsPollingExperimentDetailStats,
   selectCurrentContextMetaDataConditions,
   selectIsLoadingContextMetaData,
+  selectExperimentsExportLoading,
 } from './store/experiments.selectors';
 import * as experimentAction from './store//experiments.actions';
 import { AppState } from '../core.state';
@@ -63,6 +64,7 @@ export class ExperimentService {
   isLoadingExperiment$ = this.store$.pipe(select(selectIsLoadingExperiment));
   isLoadingExperimentDetailStats$ = this.store$.pipe(select(selectIsLoadingExperimentDetailStats));
   isPollingExperimentDetailStats$ = this.store$.pipe(select(selectIsPollingExperimentDetailStats));
+  isExperimentsExportLoading$ = this.store$.pipe(select(selectExperimentsExportLoading));
   selectedExperiment$ = this.store$.pipe(select(selectSelectedExperiment));
   allDecisionPoints$ = this.store$.pipe(select(selectAllDecisionPoints));
   allExperimentNames$ = this.store$.pipe(select(selectAllExperimentNames));
@@ -204,7 +206,11 @@ export class ExperimentService {
   }
 
   exportExperimentDesign(experimentIds: string[]) {
-    this.store$.dispatch(experimentAction.actionExportExperimentDesign({ experimentIds }));
+    this.store$.dispatch(experimentAction.actionExportExperimentDesign({ experimentIds, exportAll: false }));
+  }
+
+  exportAllExperimentDesign() {
+    this.store$.dispatch(experimentAction.actionExportExperimentDesign({ experimentIds: [], exportAll: true }));
   }
 
   importExperiment(experiments: Experiment[]) {

frontend/projects/upgrade/src/app/core/experiments/store/experiments.actions.ts

@@ -136,7 +136,7 @@ export const actionExportExperimentInfo = createAction(
 
 export const actionExportExperimentDesign = createAction(
   '[Experiment] Export Experiment Design',
-  props<{ experimentIds: string[] }>()
+  props<{ experimentIds: string[]; exportAll: boolean }>()
 );
 
 export const actionExportExperimentInfoSuccess = createAction('[Experiment] Export Experiment Info Success');

frontend/projects/upgrade/src/app/core/experiments/store/experiments.effects.spec.ts

@@ -1352,7 +1352,12 @@ describe('ExperimentEffects', () => {
         expect(resultingAction).toEqual(expectedAction);
       });
 
-      actions$.next(actionExportExperimentDesign({ experimentIds: [experimentId] }));
+      actions$.next(
+        actionExportExperimentDesign({
+          experimentIds: [experimentId],
+          exportAll: false,
+        })
+      );
 
       tick(0);
     }));
@@ -1367,7 +1372,12 @@ describe('ExperimentEffects', () => {
         expect(resultingAction).toEqual(expectedAction);
       });
 
-      actions$.next(actionExportExperimentDesign({ experimentIds: [experimentId] }));
+      actions$.next(
+        actionExportExperimentDesign({
+          experimentIds: [experimentId],
+          exportAll: false,
+        })
+      );
 
       tick(0);
     }));

frontend/projects/upgrade/src/app/core/experiments/store/experiments.effects.ts

@@ -463,10 +463,13 @@ export class ExperimentEffects {
   exportExperimentDesign$ = createEffect(() =>
     this.actions$.pipe(
       ofType(experimentAction.actionExportExperimentDesign),
-      map((action) => ({ experimentIds: action.experimentIds })),
+      map((action) => ({ experimentIds: action.experimentIds, exportAll: action.exportAll })),
       filter(({ experimentIds }) => !!experimentIds),
-      switchMap(({ experimentIds }) =>
-        this.experimentDataService.exportExperimentDesign(experimentIds).pipe(
+      switchMap(({ experimentIds, exportAll: allExport }) => {
+        const apiCall$ = allExport
+          ? this.experimentDataService.exportAllExperimentDesign()
+          : this.experimentDataService.exportExperimentDesign(experimentIds);
+        return apiCall$.pipe(
           tap(() => {
             this.notificationService.showSuccess('Experiment Design JSON downloaded!');
           }),
@@ -485,8 +488,8 @@ export class ExperimentEffects {
             return experimentAction.actionExportExperimentDesignSuccess();
           }),
           catchError(() => [experimentAction.actionExportExperimentDesignFailure()])
-        )
-      )
+        );
+      })
     )
   );
 

frontend/projects/upgrade/src/app/core/experiments/store/experiments.model.ts

@@ -308,6 +308,7 @@ export interface ExperimentState extends EntityState<Experiment> {
   isLoadingExperiment: boolean;
   isLoadingExperimentDetailStats: boolean;
   isPollingExperimentDetailStats: boolean;
+  isLoadingExperimentExport: boolean;
   skipExperiment: number;
   totalExperiments: number;
   searchKey: EXPERIMENT_SEARCH_KEY;

frontend/projects/upgrade/src/app/core/experiments/store/experiments.reducer.ts

@@ -17,6 +17,7 @@ export const initialState: ExperimentState = adapter.getInitialState({
   isLoadingExperiment: false,
   isLoadingExperimentDetailStats: false,
   isPollingExperimentDetailStats: false,
+  isLoadingExperimentExport: false,
   skipExperiment: 0,
   totalExperiments: null,
   searchKey: EXPERIMENT_SEARCH_KEY.ALL,
@@ -152,6 +153,14 @@ const reducer = createReducer(
   on(experimentsAction.actionEndExperimentDetailStatsPolling, (state) => ({
     ...state,
     isPollingExperimentDetailStats: false,
+  })),
+  on(experimentsAction.actionExportExperimentDesign, (state) => ({
+    ...state,
+    isLoadingExperimentExport: true,
+  })),
+  on(experimentsAction.actionExportExperimentDesignSuccess, (state) => ({
+    ...state,
+    isLoadingExperimentExport: false,
   }))
 );
 

frontend/projects/upgrade/src/app/core/experiments/store/experiments.selectors.ts

@@ -63,6 +63,11 @@ export const selectIsGraphLoading = createSelector(selectExperimentState, (state
 
 export const selectExperimentGraphRange = createSelector(selectExperimentState, (state) => state.graphRange);
 
+export const selectExperimentsExportLoading = createSelector(
+  selectExperimentState,
+  (state) => state.isLoadingExperimentExport
+);
+
 export const selectExperimentGraphInfo = createSelector(
   selectExperimentState,
   selectExperimentGraphRange,

frontend/projects/upgrade/src/app/core/local-storage/local-storage.service.spec.ts

@@ -26,6 +26,7 @@ describe('LocalStorageService', () => {
       isLoadingExperiment: false,
       isLoadingExperimentDetailStats: false,
       isPollingExperimentDetailStats: false,
+      isLoadingExperimentExport: false,
       skipExperiment: 0,
       totalExperiments: null,
       searchKey: EXPERIMENT_SEARCH_KEY.ALL,
@@ -50,6 +51,7 @@ describe('LocalStorageService', () => {
       isLoadingExperiment: false,
       isLoadingExperimentDetailStats: false,
       isPollingExperimentDetailStats: false,
+      isLoadingExperimentExport: false,
       skipExperiment: 0,
       totalExperiments: null,
       searchKey: null,

frontend/projects/upgrade/src/app/core/local-storage/local-storage.service.ts

@@ -38,6 +38,7 @@ export class LocalStorageService {
       isLoadingExperiment: false,
       isLoadingExperimentDetailStats: false,
       isPollingExperimentDetailStats: false,
+      isLoadingExperimentExport: false,
       skipExperiment: 0,
       totalExperiments: null,
       searchKey: experimentSearchKey as EXPERIMENT_SEARCH_KEY,

frontend/projects/upgrade/src/app/features/dashboard/home/components/experiment-list/experiment-list.component.ts

@@ -189,7 +189,7 @@ export class ExperimentListComponent implements OnInit, OnDestroy, AfterViewInit
   openExportAllExperimentsDialog() {
     this.dialog.open(ExportModalComponent, {
       panelClass: 'export-modal',
-      data: { experiment: this.allExperiments.data },
+      data: { experiment: this.allExperiments.data, exportAll: true },
     });
   }
 

frontend/projects/upgrade/src/app/features/dashboard/home/components/modal/export-experiment/export-experiment.component.html

@@ -1,48 +1,53 @@
 <div class="export-experiment-container">
   <span class="ft-24-700 title">{{ 'home.view-experiment.export-experiment.text' | translate | titlecase }}</span>
 
-  <form [formGroup]="exportForm" class="export-experiment-container-form">
-    <mat-form-field class="dense-2" appearance="outline" subscriptSizing="dynamic">
-      <mat-label class="ft-14-400">
-        {{ 'home.view-experiment.export-method.text' | translate }}
-      </mat-label>
-      <mat-select class="ft-14-400 export-selection" formControlName="exportMethod">
-        <mat-option class="ft-14-400" *ngFor="let method of exportMethod" [value]="method.value">
-          {{ method.value }}
-        </mat-option>
-      </mat-select>
-    </mat-form-field>
-  </form>
-  <span
-    class="ft-14-400 info-msg"
-    *ngIf="exportForm.get('exportMethod').value === 'Email Experiment Data (CSV)'"
-    [innerHTML]="'home.view-experiment.export-warning.text' | translate: { email: emailId }"
-  ></span>
-  <span
-    class="ft-14-400 info-msg"
-    *ngIf="exportForm.get('exportMethod').value === 'Email Experiment Data (CSV)' && experiments.length > 1"
-  >
-    {{ 'home.view-experiment.export-csv-warning.text' | translate }}
-  </span>
-  <div class="button-container">
-    <button class="shared-modal--modal-btn" mat-raised-button (click)="onCancelClick()">
-      {{ 'global.cancel.text' | translate }}
-    </button>
-    <button
-      mat-raised-button
-      [ngClass]="{
-        'default-button--disabled':
+  <ng-container *ngIf="!(isExperimentsExportLoading$ | async); else loadingSpinner">
+    <form [formGroup]="exportForm" class="export-experiment-container-form">
+      <mat-form-field class="dense-2" appearance="outline" subscriptSizing="dynamic">
+        <mat-label class="ft-14-400">
+          {{ 'home.view-experiment.export-method.text' | translate }}
+        </mat-label>
+        <mat-select class="ft-14-400 export-selection" formControlName="exportMethod">
+          <mat-option class="ft-14-400" *ngFor="let method of exportMethod" [value]="method.value">
+            {{ method.value }}
+          </mat-option>
+        </mat-select>
+      </mat-form-field>
+    </form>
+    <span
+      class="ft-14-400 info-msg"
+      *ngIf="exportForm.get('exportMethod').value === 'Email Experiment Data (CSV)'"
+      [innerHTML]="'home.view-experiment.export-warning.text' | translate: { email: emailId }"
+    ></span>
+    <span
+      class="ft-14-400 info-msg"
+      *ngIf="exportForm.get('exportMethod').value === 'Email Experiment Data (CSV)' && experiments.length > 1"
+    >
+      {{ 'home.view-experiment.export-csv-warning.text' | translate }}
+    </span>
+    <div class="button-container">
+      <button class="shared-modal--modal-btn" mat-raised-button (click)="onCancelClick()">
+        {{ 'global.cancel.text' | translate }}
+      </button>
+      <button
+        mat-raised-button
+        [ngClass]="{
+          'default-button--disabled':
+            (exportForm.get('exportMethod').value === 'Email Experiment Data (CSV)' && experiments.length > 1) ||
+            !isExportMethodSelected
+        }"
+        [disabled]="
           (exportForm.get('exportMethod').value === 'Email Experiment Data (CSV)' && experiments.length > 1) ||
           !isExportMethodSelected
-      }"
-      [disabled]="
-        (exportForm.get('exportMethod').value === 'Email Experiment Data (CSV)' && experiments.length > 1) ||
-        !isExportMethodSelected
-      "
-      class="shared-modal--modal-btn default-button"
-      (click)="exportExperiment()"
-    >
-      {{ 'home.view-experiment.export-button.text' | translate }}
-    </button>
-  </div>
+        "
+        class="shared-modal--modal-btn default-button"
+        (click)="exportExperiment()"
+      >
+        {{ 'home.view-experiment.export-button.text' | translate }}
+      </button>
+    </div>
+  </ng-container>
+  <ng-template #loadingSpinner>
+    <mat-spinner class="spinner" diameter="60"></mat-spinner>
+  </ng-template>
 </div>

frontend/projects/upgrade/src/app/features/dashboard/home/components/modal/export-experiment/export-experiment.component.scss

@@ -1,4 +1,14 @@
 .export-experiment-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  min-height: 250px;
+
+  .spinner {
+    width: 100%;
+    margin: auto;
+  }
+
   .title {
     display: block;
     padding: 40px 40px 0;