removed disable on context change in experiment edit modal (#2094)

* removed disable on context change in experiment edit modal * Remove logging checkbox and enableSave variable; Add warning message for Context/Design Type changes in Overview step --------- Co-authored-by: Zack Lee <[email protected]> Co-authored-by: Zack Lee <[email protected]>
CarnegieLearningWeb · Nov 8, 2024 · d7b25e9 · d7b25e9
1 parent 3d0ef14
commit d7b25e9
Show file tree

Hide file tree

Showing 9 changed files with 42 additions and 21 deletions.
diff --git a/frontend/projects/upgrade/src/app/core/experiments/experiments.service.ts b/frontend/projects/upgrade/src/app/core/experiments/experiments.service.ts
@@ -38,7 +38,7 @@ import {
 } from './store/experiments.selectors';
 import * as experimentAction from './store//experiments.actions';
 import { AppState } from '../core.state';
-import { map, first, filter, tap } from 'rxjs/operators';
+import { map, filter, tap } from 'rxjs/operators';
 import { LocalStorageService } from '../local-storage/local-storage.service';
 import { ENV, Environment } from '../../../environments/environment-types';
 

diff --git a/frontend/projects/upgrade/src/app/core/experiments/store/experiments.model.ts b/frontend/projects/upgrade/src/app/core/experiments/store/experiments.model.ts
@@ -80,6 +80,12 @@ export enum ExperimentDesignTypes {
   FACTORIAL = 'Factorial',
 }
 
+export enum OverviewFormWarningStatus {
+  NO_WARNING = 'no warning',
+  CONTEXT_CHANGED = 'context changed',
+  DESIGN_TYPE_CHANGED = 'design type changed',
+}
+
 export interface NewExperimentDialogData {
   type: NewExperimentDialogEvents;
   formData?: any;

diff --git a/...c/app/features/dashboard/home/components/experiment-design/experiment-design.component.ts b/...c/app/features/dashboard/home/components/experiment-design/experiment-design.component.ts
@@ -151,8 +151,7 @@ export class ExperimentDesignComponent implements OnInit, OnChanges, OnDestroy {
       this.conditionCode.nativeElement.focus();
     }
 
-    if (this.isContextChanged || this.isExperimentTypeChanged) {
-      this.isContextChanged = false;
+    if (this.isExperimentTypeChanged) {
       this.decisionPoints?.clear();
       this.conditions?.clear();
       this.decisionPointDataSource.next(this.decisionPoints?.controls);

diff --git a/...features/dashboard/home/components/experiment-overview/experiment-overview.component.html b/...features/dashboard/home/components/experiment-overview/experiment-overview.component.html
@@ -168,18 +168,21 @@
           />
         </mat-chip-grid>
       </mat-form-field>
-      <mat-checkbox class="check-box" color="primary" formControlName="logging">
-        <span class="ft-13-700 checkbox-label">
-          {{ 'home.view-experiment.logging.text' | translate }}
-        </span>
-      </mat-checkbox>
     </form>
     <div class="validation-container">
       <span
         class="ft-14-600 validation-message"
         *ngIf="!isStratificationFactorSelected"
         [innerHTML]="stratificationFactorNotSelectedMsg | translate"
       ></span>
+      <span class="ft-14-600 validation-message" *ngIf="isOverviewFormCompleted" [ngSwitch]="warningStatus">
+        <ng-container *ngSwitchCase="OverviewFormWarningStatus.CONTEXT_CHANGED">
+          {{ 'home.new-experiment.overview.context-changed.warning.text' | translate }}
+        </ng-container>
+        <ng-container *ngSwitchCase="OverviewFormWarningStatus.DESIGN_TYPE_CHANGED">
+          {{ 'home.new-experiment.overview.design-type-changed.warning.text' | translate }}
+        </ng-container>
+      </span>
     </div>
   </section>
 
@@ -209,13 +212,13 @@
       </button>
       <button
         type="button"
-        *ngIf="experimentInfo && enableSave"
+        *ngIf="experimentInfo"
         mat-raised-button
         class="shared-modal--modal-btn default-button"
         [ngClass]="{
-          'default-button--disabled': !isExperimentEditable || isContextOrTypeChanged
+          'default-button--disabled': !isExperimentEditable || isDesignTypeChanged
         }"
-        [disabled]="!isExperimentEditable || isContextOrTypeChanged"
+        [disabled]="!isExperimentEditable || isDesignTypeChanged"
         (click)="emitEvent(NewExperimentDialogEvents.SAVE_DATA)"
       >
         {{ 'global.save.text' | translate }}

diff --git a/...features/dashboard/home/components/experiment-overview/experiment-overview.component.scss b/...features/dashboard/home/components/experiment-overview/experiment-overview.component.scss
@@ -58,6 +58,12 @@
   }
 }
 
+.validation-container {
+  min-height: 30px;
+  margin-top: 5px;
+  margin-bottom: 5px;
+}
+
 .loading-container {
   display: flex;
   height: 500px;

diff --git a/...p/features/dashboard/home/components/experiment-overview/experiment-overview.component.ts b/...p/features/dashboard/home/components/experiment-overview/experiment-overview.component.ts
@@ -25,6 +25,7 @@ import {
   NewExperimentPaths,
   IContextMetaData,
   ExperimentDesignTypes,
+  OverviewFormWarningStatus,
 } from '../../../../../core/experiments/store/experiments.model';
 import { ENTER, COMMA } from '@angular/cdk/keycodes';
 import { UntypedFormGroup, UntypedFormBuilder, Validators, UntypedFormArray } from '@angular/forms';
@@ -53,11 +54,12 @@ export class ExperimentOverviewComponent implements OnInit, OnDestroy {
   public ASSIGNMENT_UNIT = ASSIGNMENT_UNIT;
 
   groupTypes = [];
-  enableSave = true;
   allContexts = [];
   currentContext = null;
   initialDesignType = EXPERIMENT_TYPE.SIMPLE;
-  isContextOrTypeChanged = false;
+  warningStatus = OverviewFormWarningStatus.NO_WARNING;
+  OverviewFormWarningStatus = OverviewFormWarningStatus;
+  isOverviewFormCompleted = false;
   consistencyRules = [{ value: CONSISTENCY_RULE.INDIVIDUAL }, { value: CONSISTENCY_RULE.GROUP }];
   conditionOrders = [
     { value: CONDITION_ORDER.RANDOM },
@@ -134,7 +136,6 @@ export class ExperimentOverviewComponent implements OnInit, OnDestroy {
         stratificationFactor: [null],
         context: [null, Validators.required],
         tags: [[]],
-        logging: [false],
       });
 
       this.overviewForm.get('unitOfAssignment').valueChanges.subscribe((assignmentUnit) => {
@@ -176,14 +177,18 @@ export class ExperimentOverviewComponent implements OnInit, OnDestroy {
       });
 
       this.overviewForm.get('context').valueChanges.subscribe((context) => {
-        this.isContextOrTypeChanged = this.currentContext !== context;
+        if (context && this.currentContext && this.currentContext !== context) {
+          this.warningStatus = OverviewFormWarningStatus.CONTEXT_CHANGED;
+        }
         this.currentContext = context;
         this.experimentService.setCurrentContext(context);
         this.setGroupTypes();
       });
 
       this.overviewForm.get('designType').valueChanges.subscribe((type) => {
-        this.isContextOrTypeChanged = this.initialDesignType !== type;
+        if (this.initialDesignType !== type) {
+          this.warningStatus = OverviewFormWarningStatus.DESIGN_TYPE_CHANGED;
+        }
         this.initialDesignType = type;
       });
 
@@ -216,9 +221,9 @@ export class ExperimentOverviewComponent implements OnInit, OnDestroy {
           stratificationFactor: this.experimentInfo.stratificationFactor?.stratificationFactorName || null,
           context: this.currentContext,
           tags: this.experimentInfo.tags,
-          logging: this.experimentInfo.logging,
         });
         this.checkExperiment();
+        this.isOverviewFormCompleted = true;
       }
     });
   }
@@ -335,7 +340,6 @@ export class ExperimentOverviewComponent implements OnInit, OnDestroy {
         assignmentAlgorithm,
         stratificationFactor,
         tags,
-        logging,
       } = this.overviewForm.value;
       const stratificationFactorValueToSend = this.stratificationFactorValueToSend(
         stratificationFactor,
@@ -356,7 +360,6 @@ export class ExperimentOverviewComponent implements OnInit, OnDestroy {
             ? { stratificationFactorName: stratificationFactorValueToSend }
             : null,
           tags,
-          logging,
         };
         this.emitExperimentDialogEvent.emit({
           type: eventType,
@@ -367,6 +370,9 @@ export class ExperimentOverviewComponent implements OnInit, OnDestroy {
         if (eventType == NewExperimentDialogEvents.SAVE_DATA) {
           this.experimentDesignStepperService.experimentStepperDataReset();
           this.overviewForm.markAsPristine();
+        } else if (eventType == NewExperimentDialogEvents.SEND_FORM_DATA) {
+          this.warningStatus = OverviewFormWarningStatus.NO_WARNING;
+          this.isOverviewFormCompleted = true;
         }
       }
     }

diff --git a/.../dashboard/home/components/experiment-participants/experiment-participants.component.html b/.../dashboard/home/components/experiment-participants/experiment-participants.component.html
@@ -276,7 +276,7 @@
       </button>
       <button
         type="button"
-        *ngIf="experimentInfo && enableSave"
+        *ngIf="experimentInfo"
         mat-raised-button
         class="shared-modal--modal-btn default-button"
         (click)="emitEvent(NewExperimentDialogEvents.SAVE_DATA)"

diff --git a/...es/dashboard/home/components/experiment-participants/experiment-participants.component.ts b/...es/dashboard/home/components/experiment-participants/experiment-participants.component.ts
@@ -50,7 +50,6 @@ export class ExperimentParticipantsComponent implements OnInit {
   inclusionCriteria = [{ value: INCLUSION_CRITERIA.INCLUDE_SPECIFIC }, { value: INCLUSION_CRITERIA.EXCEPT }];
   membersDisplayedColumns = ['type', 'id', 'removeMember'];
 
-  enableSave = true;
   contextMetaData: IContextMetaData | Record<string, unknown> = {};
   contextMetaDataSub: Subscription;
   allSegments: Segment[];

diff --git a/frontend/projects/upgrade/src/assets/i18n/en.json b/frontend/projects/upgrade/src/assets/i18n/en.json
@@ -121,6 +121,8 @@
   "home.new-experiment.overview.context.error.text": "Please enter at least one context",
   "home.new-experiment.overview.stratification-factor.error.text": "Please select stratification factor",
   "home.new-experiment.overview.no-stratification-factor.error.text": "Please import the stratification factor you require from Participants Menu > Stratification Tab",
+  "home.new-experiment.overview.context-changed.warning.text": "Changing the App Context will clear all fields in the Participants and Metrics steps. Please review before saving.",
+  "home.new-experiment.overview.design-type-changed.warning.text": "Changing the Design Type will clear all fields in the Design step. Please review before saving.",
   "home.new-experiment.design.design-type.label": "Design Type",
   "home.new-experiment.design.decision-point.initial.include-message": "Experiments require at least one decision point",
   "home.new-experiment.design.factors.initial.include-message": "Factorial experiments require factors",