Bugfix/view exp exclude participants header name fixing

frontend/package.json

@@ -54,9 +54,11 @@
     "@ngx-translate/core": "^15.0.0",
     "@ngx-translate/http-loader": "^8.0.0",
     "@swimlane/ngx-charts": "^20.5.0",
+    "ang-jsoneditor": "^3.1.1",
     "angular2-notifications": "^16.0.1",
     "ansi-to-html": "^0.7.2",
     "dayjs": "^1.11.2",
+    "jsoneditor": "^9.10.2",
     "jszip": "^3.10.1",
     "jwt-decode": "^3.1.2",
     "lodash.clonedeep": "^4.5.0",

frontend/projects/upgrade/src/app/features/dashboard/home/pages/view-experiment/view-experiment.component.html

@@ -821,7 +821,7 @@
               <!-- Type Column -->
               <ng-container matColumnDef="participantsType">
                 <mat-header-cell class="ft-12-700" *matHeaderCellDef>
-                  {{ 'home.view-experiment-global.experiment-site.text' | translate }}
+                  {{ 'segments.global-members-type.text' | translate }}
                 </mat-header-cell>
                 <mat-cell class="ft-12-600" *matCellDef="let data">
                   <span *ngIf="data.participant_Type?.length < 50; else participantType">
@@ -838,7 +838,7 @@
               <!-- Name/Id Column -->
               <ng-container matColumnDef="participantsId">
                 <mat-header-cell class="ft-12-700" *matHeaderCellDef>
-                  {{ 'home.view-experiment-global.experiment-target.text' | translate }}
+                  {{ 'segments.global-members-id/name.text' | translate }}
                 </mat-header-cell>
                 <mat-cell class="ft-12-600" *matCellDef="let data">
                   <span *ngIf="data.participant_id?.length < 50; else participantId">

frontend/projects/upgrade/src/app/features/dashboard/profile/components/metrics/metrics.component.html

@@ -12,6 +12,16 @@
       />
       <mat-icon class="search-icon" matSuffix>search</mat-icon>
     </mat-form-field>
+    <button
+      mat-flat-button
+      color="primary"
+      class="ft-14-700"
+      (click)="openAddMetricDialog()"
+      *ngIf="permissions?.metrics.create"
+    >
+      <mat-icon>add</mat-icon>
+      <span>{{ 'metric.add-metrics.text' | translate }}</span>
+    </button>
   </div>
   <div class="read-mode-container" *ngIf="permissions?.metrics.create">
     <mat-slide-toggle class="ft-13-700" color="primary" (change)="changeMetricMode($event)" labelPosition="before">

frontend/projects/upgrade/src/app/features/dashboard/profile/components/metrics/metrics.component.ts

@@ -17,6 +17,7 @@ import { MatTableDataSource } from '@angular/material/table';
 import { AnalysisService } from '../../../../../core/analysis/analysis.service';
 import { AuthService } from '../../../../../core/auth/auth.service';
 import { DeleteMetricsComponent } from '../modals/delete-metrics/delete-metrics.component';
+import { AddMetricsComponent } from '../modals/add-metrics/add-metrics.component';
 
 @Component({
   selector: 'profile-metrics',
@@ -89,6 +90,16 @@ export class MetricsComponent implements OnInit, OnDestroy, AfterViewInit {
     return metrics;
   }
 
+  openAddMetricDialog() {
+    this.selectedMetricIndex = null;
+    const dialogRef = this.dialog.open(AddMetricsComponent, {
+      panelClass: 'add-metric-modal',
+    });
+    dialogRef.afterClosed().subscribe((result) => {
+      // Code will be executed after closing dialog
+    });
+  }
+
   deleteNode(nodeToBeDeleted: any) {
     const data = {
       children: this.nestedDataSource.data,

frontend/projects/upgrade/src/app/features/dashboard/profile/components/modals/add-metrics/add-metrics.component.html

@@ -0,0 +1,25 @@
+<div class="add-metrics">
+  <span class="ft-24-700 title">{{ 'metric.add-metrics.text' | translate | titlecase }}</span>
+
+  <div class="json-editor-container">
+    <json-editor
+      #metricsEditor
+      [options]="options"
+    ></json-editor>
+  </div>
+
+  <div class="button-container">
+    <button class="shared-modal--modal-btn" mat-raised-button (click)="onCancelClick()">
+      {{ 'global.cancel.text' | translate }}
+    </button>
+    <button
+      mat-raised-button
+      class="shared-modal--modal-btn default-button"
+      [ngClass]="{ 'default-button--disabled': metricsEditorError }"
+      [disabled]="metricsEditorError"
+      (click)="addMetrics()"
+    >
+      {{ 'global.save.text' | translate }}
+    </button>
+  </div>
+</div>

frontend/projects/upgrade/src/app/features/dashboard/profile/components/modals/add-metrics/add-metrics.component.scss

@@ -0,0 +1,37 @@
+.add-metrics {
+  .title {
+    display: block;
+    padding: 40px 40px 0;
+    height: 108px;
+  }
+
+  .json-editor-container {
+    margin-top: 20px;
+    padding: 0 36px 20px;
+    height: 300px;
+  }
+
+  ::ng-deep .jsoneditor {
+    border: 0;
+    height: 300px;
+  }
+
+  ::ng-deep .jsoneditor-menu {
+    display: none;
+  }
+
+  ::ng-deep .ace-jsoneditor .ace_gutter {
+    border-right: 1px solid var(--blue);
+  }
+
+  ::ng-deep .ace-jsoneditor .ace_gutter-active-line,
+  ::ng-deep .ace-jsoneditor .ace_marker-layer .ace_active-line {
+    background-color: var(--blue);
+  }
+
+  .button-container {
+    display: flex;
+    justify-content: flex-end;
+    padding: 0 40px 40px;
+  }
+}

frontend/projects/upgrade/src/app/features/dashboard/profile/components/modals/add-metrics/add-metrics.component.spec.ts

@@ -0,0 +1,37 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AddMetricsComponent } from './add-metrics.component';
+import { TestingModule } from '../../../../../../../testing/testing.module';
+import { AnalysisService } from '../../../../../../core/analysis/analysis.service';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { NgJsonEditorModule } from 'ang-jsoneditor';
+
+xdescribe('AddMetricsComponent', () => {
+  let component: AddMetricsComponent;
+  let fixture: ComponentFixture<AddMetricsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [AddMetricsComponent],
+      imports: [TestingModule, NgJsonEditorModule],
+      providers: [
+        AnalysisService,
+        { provide: MatDialogRef, useValue: {} },
+        {
+          provide: MAT_DIALOG_DATA,
+          useValue: {},
+        },
+      ],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AddMetricsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/projects/upgrade/src/app/features/dashboard/profile/components/modals/add-metrics/add-metrics.component.ts

@@ -0,0 +1,51 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { JsonEditorOptions, JsonEditorComponent } from 'ang-jsoneditor';
+import { MatDialogRef } from '@angular/material/dialog';
+import { AnalysisService } from '../../../../../../core/analysis/analysis.service';
+
+@Component({
+  selector: 'app-add-metrics',
+  templateUrl: './add-metrics.component.html',
+  styleUrls: ['./add-metrics.component.scss'],
+})
+export class AddMetricsComponent implements OnInit {
+  options = new JsonEditorOptions();
+  metricsEditorError = false;
+  @ViewChild('metricsEditor', { static: false }) metricsEditor: JsonEditorComponent;
+  constructor(private dialogRef: MatDialogRef<AddMetricsComponent>, private analysisService: AnalysisService) {}
+
+  ngOnInit() {
+    this.options = new JsonEditorOptions();
+    this.options.mode = 'code';
+    this.options.statusBar = false;
+
+    this.options.onChange = () => {
+      try {
+        this.metricsEditor.get();
+        this.metricsEditorError = false;
+      } catch (e) {
+        this.metricsEditorError = true;
+      }
+    };
+  }
+
+  onCancelClick(): void {
+    this.dialogRef.close();
+  }
+
+  addMetrics() {
+    const json = this.metricsEditor.get();
+    let data: any = {};
+    if (Array.isArray(json)) {
+      data = {
+        metricUnit: json,
+      };
+    } else {
+      data = {
+        metricUnit: [json],
+      };
+    }
+    this.analysisService.upsertMetrics(data);
+    this.onCancelClick();
+  }
+}

frontend/projects/upgrade/src/app/features/dashboard/profile/components/modals/add-metrics/add-metrics.theme.scss

@@ -0,0 +1,42 @@
+@use '@angular/material' as mat;
+
+@mixin add-metrics-component-theme($theme) {
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+
+  .add-metrics {
+    .title {
+      box-shadow: 0 0 8px 0 mat.get-color-from-palette($background, shadow-color);
+    }
+
+    .ace-jsoneditor .ace_scroller {
+      background-color: mat.get-color-from-palette($background, background);
+    }
+
+    .ace-jsoneditor .ace_gutter {
+      background-color: mat.get-color-from-palette($background, background);
+      color: mat.get-color-from-palette($foreground, text);
+    }
+
+    .ace-jsoneditor .ace_text-layer {
+      color: mat.get-color-from-palette($foreground, text);
+    }
+
+    .ace-jsoneditor .ace_variable {
+      color: mat.get-color-from-palette($foreground, text);
+    }
+
+    .ace-jsoneditor .ace_gutter-active-line {
+      color: mat.get-color-from-palette($foreground, text);
+    }
+
+    .ace-jsoneditor .ace_marker-layer .ace_active-line {
+      color: mat.get-color-from-palette($foreground, text);
+    }
+
+    .ace-jsoneditor .ace_string {
+      color: mat.get-color-from-palette($foreground, text);
+    }
+
+  }
+}

frontend/projects/upgrade/src/app/features/dashboard/profile/profile.module.ts

@@ -7,7 +7,9 @@ import { ProfileRootComponent } from './profile-root/profile-root.component';
 import { NewUserComponent } from './components/modals/new-user/new-user.component';
 import { ProfileInfoComponent } from './components/profile-info/profile-info.component';
 import { MetricsComponent } from './components/metrics/metrics.component';
+import { AddMetricsComponent } from './components/modals/add-metrics/add-metrics.component';
 import { DeleteMetricsComponent } from './components/modals/delete-metrics/delete-metrics.component';
+import { NgJsonEditorModule } from 'ang-jsoneditor';
 
 @NgModule({
   declarations: [
@@ -16,7 +18,8 @@ import { DeleteMetricsComponent } from './components/modals/delete-metrics/delet
     ProfileInfoComponent,
     MetricsComponent,
     DeleteMetricsComponent,
+    AddMetricsComponent,
   ],
-  imports: [CommonModule, ProfileRoutingModule, SharedModule],
+  imports: [CommonModule, ProfileRoutingModule, SharedModule, NgJsonEditorModule],
 })
 export class ProfileModule {}

frontend/projects/upgrade/src/styles.scss

@@ -3,7 +3,7 @@
 @import '@danielmoncada/angular-datetime-picker/assets/style/picker.min.css';
 @import url('https://fonts.googleapis.com/css?family=Roboto:400,700|Material+Icons');
 @import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800&display=swap');
-
+@import '~jsoneditor/dist/jsoneditor.min.css';
 @include mat.all-component-typographies();
 @include mat.core();
 
@@ -41,6 +41,7 @@
 @import './app/features/dashboard/home/components/modal/queries-modal/queries-modal.theme.scss';
 @import './app/shared/components/query-result/query-result.theme.scss';
 @import './app/features/dashboard/profile/components/metrics/metrics.theme.scss';
+@import './app/features/dashboard/profile/components/modals/add-metrics/add-metrics.theme.scss';
 @import './app/features/dashboard/home/components/experiment-query-result/experiment-query-result.theme.scss';
 @import './app/features/dashboard/home/components/modal/experiment-end-criteria/experiment-ending-criteria.theme.scss';
 @import './app/features/dashboard/home/components/modal/import-experiment/import-experiment.theme.scss';
@@ -81,6 +82,7 @@
   @include queries-modal-component-theme($theme);
   @include query-result-component-theme($theme);
   @include metrics-component-theme($theme);
+  @include add-metrics-component-theme($theme);
   @include experiment-query-result-component-theme($theme);
   @include experiment-ending-criteria-component-theme($theme);
   @include import-experiment-component-theme($theme);
@@ -143,6 +145,7 @@ button[mat-button], button[mat-raised-button], button[mat-flat-button], button[m
 .queries-modal,
 .export-modal,
 .query-result,
+.add-metric-modal,
 .duplicate-segment-modal,
 .experiment-ending-criteria {
   @include custom-components-theme($light-theme);
@@ -203,7 +206,8 @@ button[mat-button], button[mat-raised-button], button[mat-flat-button], button[m
   width: 500px;
 }
 
-.experiment-general-modal {
+.experiment-general-modal,
+.add-metric-modal {
   width: 804px;
   min-height: 294px;
 }