From 17fccfea89e604c2eb96d4b37d5830d082593a3d Mon Sep 17 00:00:00 2001
From: Jaydip Hirapara <codecracker2455@gmail.com>
Date: Thu, 31 Dec 2020 22:29:23 +0530
Subject: [PATCH] Fix link to UpGrade experiment does not load experiment
 dashboard

---
 .../store/experiments.selectors.ts            |  2 +-
 .../modal/new-flag/new-flag.component.scss    |  1 -
 .../enrollment-condition-table.component.html | 53 +++++++++++--------
 .../enrollment-condition-table.component.scss | 10 ++++
 .../enrollment-condition-table.component.ts   |  7 +--
 .../view-experiment.component.ts              |  5 +-
 6 files changed, 47 insertions(+), 31 deletions(-)

diff --git a/projects/abtesting/src/app/core/experiments/store/experiments.selectors.ts b/projects/abtesting/src/app/core/experiments/store/experiments.selectors.ts
index af1c08e2..93831840 100644
--- a/projects/abtesting/src/app/core/experiments/store/experiments.selectors.ts
+++ b/projects/abtesting/src/app/core/experiments/store/experiments.selectors.ts
@@ -32,7 +32,7 @@ export const selectSelectedExperiment = createSelector(
   ({ state: { params } }, experimentState) => {
     return experimentState.stats[params.experimentId]
       ? ({ ...experimentState.entities[params.experimentId], stat: experimentState.stats[params.experimentId] })
-      : undefined;
+      : ({ ...experimentState.entities[params.experimentId], stat: null });
   }
 );
 
diff --git a/projects/abtesting/src/app/features/dashboard/feature-flags/components/modal/new-flag/new-flag.component.scss b/projects/abtesting/src/app/features/dashboard/feature-flags/components/modal/new-flag/new-flag.component.scss
index cd734f63..e8889e4d 100644
--- a/projects/abtesting/src/app/features/dashboard/feature-flags/components/modal/new-flag/new-flag.component.scss
+++ b/projects/abtesting/src/app/features/dashboard/feature-flags/components/modal/new-flag/new-flag.component.scss
@@ -1,4 +1,3 @@
-// TODO: Make a common style with new experiment modal
 .flag-stepper {
   ::ng-deep .mat-horizontal-stepper-header-container {
     display: flex;
diff --git a/projects/abtesting/src/app/features/dashboard/home/components/enrollment-condition-table/enrollment-condition-table.component.html b/projects/abtesting/src/app/features/dashboard/home/components/enrollment-condition-table/enrollment-condition-table.component.html
index ff96336d..9849d950 100644
--- a/projects/abtesting/src/app/features/dashboard/home/components/enrollment-condition-table/enrollment-condition-table.component.html
+++ b/projects/abtesting/src/app/features/dashboard/home/components/enrollment-condition-table/enrollment-condition-table.component.html
@@ -1,29 +1,36 @@
 <div class="condition-table-container">
   <span class="ft-24-700">{{ 'home.view-experiment.enrollments-by-condition.title.text' | translate }}</span>
-  <div class="data">
-    <div class="enrollment-condition-table-container">
-      <app-table-row
-        [dataSource]="experimentData"
-        [displayedColumns]="displayedColumns"
-        [referenceId]="'condition'"
-        [experiment]="experiment"
-      >
-      </app-table-row>
-    </div>
-
-    <div class="enrollment-statistic">
-      <div class="enrollment-statistic__unique">
-        <span class="ft-14-600 title">
-          {{ 'home.view-experiment.global.users-excluded.text' | translate }}
-        </span>
-        <span class="ft-30-700 numbers">{{ experiment.stat.usersExcluded || 0 }}</span>
+  <div class="spinner" *ngIf="isStatLoading; else conditionTableTemplate">
+    <mat-spinner
+      diameter="60"
+    ></mat-spinner>
+  </div>
+  <ng-template #conditionTableTemplate>
+    <div class="data">
+      <div class="enrollment-condition-table-container">
+        <app-table-row
+          [dataSource]="experimentData"
+          [displayedColumns]="displayedColumns"
+          [referenceId]="'condition'"
+          [experiment]="experiment"
+        >
+        </app-table-row>
       </div>
-      <div class="enrollment-statistic__class" *ngIf="experiment.assignmentUnit === AssignmentUnit.GROUP">
-        <span class="ft-14-600 title">
-          {{ 'home.view-experiment.global.group-excluded.text' | translate }}
-        </span>
-        <span class="ft-30-700 numbers">{{ experiment.stat.groupsExcluded || 0}}</span>
+
+      <div class="enrollment-statistic">
+        <div class="enrollment-statistic__unique">
+          <span class="ft-14-600 title">
+            {{ 'home.view-experiment.global.users-excluded.text' | translate }}
+          </span>
+          <span class="ft-30-700 numbers">{{ experiment.stat?.usersExcluded || 0 }}</span>
+        </div>
+        <div class="enrollment-statistic__class" *ngIf="experiment.assignmentUnit === AssignmentUnit.GROUP">
+          <span class="ft-14-600 title">
+            {{ 'home.view-experiment.global.group-excluded.text' | translate }}
+          </span>
+          <span class="ft-30-700 numbers">{{ experiment.stat?.groupsExcluded || 0}}</span>
+        </div>
       </div>
     </div>
-  </div>
+  </ng-template>
 </div>
diff --git a/projects/abtesting/src/app/features/dashboard/home/components/enrollment-condition-table/enrollment-condition-table.component.scss b/projects/abtesting/src/app/features/dashboard/home/components/enrollment-condition-table/enrollment-condition-table.component.scss
index c03c0acc..f04887ba 100644
--- a/projects/abtesting/src/app/features/dashboard/home/components/enrollment-condition-table/enrollment-condition-table.component.scss
+++ b/projects/abtesting/src/app/features/dashboard/home/components/enrollment-condition-table/enrollment-condition-table.component.scss
@@ -3,6 +3,16 @@
   flex-direction: column;
   padding: 0 34px 14px 34px;
   width: 100%;
+  min-height: 150px;
+
+  .spinner {
+    display: flex;
+    position: absolute;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 150px;
+  }
 
   .data {
     display: flex;
diff --git a/projects/abtesting/src/app/features/dashboard/home/components/enrollment-condition-table/enrollment-condition-table.component.ts b/projects/abtesting/src/app/features/dashboard/home/components/enrollment-condition-table/enrollment-condition-table.component.ts
index 9a77648f..898638ff 100644
--- a/projects/abtesting/src/app/features/dashboard/home/components/enrollment-condition-table/enrollment-condition-table.component.ts
+++ b/projects/abtesting/src/app/features/dashboard/home/components/enrollment-condition-table/enrollment-condition-table.component.ts
@@ -18,6 +18,7 @@ export class EnrollmentConditionTableComponent implements OnChanges, OnInit {
     'userEnrolled',
   ];
   displayedColumns: string[] = [];
+  isStatLoading = true;
 
   constructor(private experimentService: ExperimentService) {}
 
@@ -27,17 +28,13 @@ export class EnrollmentConditionTableComponent implements OnChanges, OnInit {
     } else {
       this.displayedColumns = [...this.commonColumns, 'groupEnrolled'];
     }
-    if (changes.experiment) {
-      // TODO: Remove
-      this.experimentService.experimentStatById$(this.experiment.id).subscribe(stat => {
-      });
-    }
   }
 
   ngOnInit() {
     this.experimentService.experimentStatById$(this.experiment.id).subscribe(stat => {
       this.experimentData = [];
       if (stat && stat.conditions) {
+        this.isStatLoading = false;
         stat.conditions.forEach(condition => {
 
           const conditionObj: EnrollmentByConditionOrPartitionData = {
diff --git a/projects/abtesting/src/app/features/dashboard/home/pages/view-experiment/view-experiment.component.ts b/projects/abtesting/src/app/features/dashboard/home/pages/view-experiment/view-experiment.component.ts
index 5ff6e918..cbfc8a9f 100644
--- a/projects/abtesting/src/app/features/dashboard/home/pages/view-experiment/view-experiment.component.ts
+++ b/projects/abtesting/src/app/features/dashboard/home/pages/view-experiment/view-experiment.component.ts
@@ -59,7 +59,10 @@ export class ViewExperimentComponent implements OnInit, OnDestroy {
         if (!this.experiment) {
           this.experimentService.fetchExperimentDetailStat(experiment.id);
         }
-        this.experiment = experiment;
+        // By refreshing page if we would have experimentId then only assign it's value
+        if (experiment.id) {
+          this.experiment = experiment;
+        }
       });
   }