Merge branch 'dev' into merge-down-to-dev/6.0.1

CarnegieLearningWeb · Nov 19, 2024 · 728455e · 728455e
2 parents e0cb220 + 32988cb
commit 728455e
Show file tree

Hide file tree

Showing 9 changed files with 70 additions and 48 deletions.
diff --git a/...d/feature-flags/modals/import-feature-flag-modal/import-feature-flag-modal.component.html b/...d/feature-flags/modals/import-feature-flag-modal/import-feature-flag-modal.component.html
@@ -38,7 +38,7 @@
             <!-- Actions Column -->
             <ng-container matColumnDef="actions">
               <th mat-header-cell *matHeaderCellDef></th>
-              <td mat-cell class="ft-14-500" *matCellDef="let element">
+              <td mat-cell class="ft-14-500 dense-2" *matCellDef="let element">
                 <button
                   mat-icon-button
                   [ngClass]="{ 'expand-button--disabled': element.compatibilityType === 'compatible' }"

diff --git a/...d/feature-flags/modals/import-feature-flag-modal/import-feature-flag-modal.component.scss b/...d/feature-flags/modals/import-feature-flag-modal/import-feature-flag-modal.component.scss
@@ -62,17 +62,16 @@
       }
     }
 
-    &.disabled {
-      opacity: 0.5;
-      cursor: default;
-    }
-
     .cdk-column-actions {
-      width: 10%;
+      width: 15%;
+
+      .expand-button--disabled {
+        opacity: 0.5;
+      }
     }
 
     .cdk-column-fileName {
-      width: 60%;
+      width: 55%;
     }
 
     .cdk-column-compatibilityType {
@@ -91,4 +90,4 @@
       }
     }
   }
-}
+}
diff --git a/...d/feature-flags/modals/upsert-feature-flag-modal/upsert-feature-flag-modal.component.html b/...d/feature-flags/modals/upsert-feature-flag-modal/upsert-feature-flag-modal.component.html
@@ -9,7 +9,7 @@
   <form [formGroup]="featureFlagForm" class="form-standard dense-3">
     <mat-form-field appearance="outline">
       <mat-label class="ft-14-400">Name</mat-label>
-      <input matInput formControlName="name" placeholder="e.g., My feature flag" class="ft-14-400" cdkFocusInitial/>
+      <input matInput formControlName="name" placeholder="e.g., My feature flag" class="ft-14-400"/>
       <mat-hint class="form-hint ft-12-400">
         {{ 'feature-flags.upsert-flag-modal.name-hint.text' | translate }}
       </mat-hint>

diff --git a/...es/dashboard/segments/components/modal/duplicate-segment/duplicate-segment.component.html b/...es/dashboard/segments/components/modal/duplicate-segment/duplicate-segment.component.html
@@ -2,37 +2,22 @@
   <p class="ft-14-600">
     {{ 'segments.duplicate-segment.heading.text' | translate: { segmentName: data.segment.name } }}
   </p>
-  <mat-form-field
-    class="dense-2 name"
-    appearance="outline"
-    subscriptSizing="dynamic"
-  >
+  <mat-form-field class="dense-2 name" appearance="outline" subscriptSizing="dynamic">
     <mat-label class="ft-14-400">
       {{ 'segments.duplicate-segment.segmentName-input-placeholder.text' | translate }}
     </mat-label>
-    <input
-      class="ft-14-400 name-input"
-      matInput
-      [(ngModel)]="segmentName"
-      required
-    />
+    <input class="ft-14-400 name-input" matInput [(ngModel)]="segmentName" required />
   </mat-form-field>
   <br />
-  <mat-form-field
-    class="dense-2 description"
-    appearance="outline"
-    subscriptSizing="dynamic"
-  >
+  <mat-form-field class="dense-2 description" appearance="outline" subscriptSizing="dynamic">
     <mat-label class="ft-14-400">
       {{ 'segments.duplicate-segment.segmentDescription-input-placeholder.text' | translate }}
     </mat-label>
-    <input
-      class="ft-14-400 name-input"
-      matInput
-      [(ngModel)]="segmentDescription"
-      [value]="segmentDescription"
-    />
+    <input class="ft-14-400 name-input" matInput [(ngModel)]="segmentDescription" [value]="segmentDescription" />
   </mat-form-field>
+  <span class="ft-14-400 validation-message" *ngIf="!isSegmentNameValid">
+    {{ 'segments.new-segment-overview-stepper.segment-name-error.text' | translate }}
+  </span>
 </div>
 <div mat-dialog-actions class="duplicate-segment-dialog-actions">
   <button class="shared-modal--modal-btn" mat-flat-button (click)="onCancelClick()">

diff --git a/...es/dashboard/segments/components/modal/duplicate-segment/duplicate-segment.component.scss b/...es/dashboard/segments/components/modal/duplicate-segment/duplicate-segment.component.scss
@@ -21,6 +21,10 @@
     }
   }
 
+  .validation-message {
+    margin-top: 8px;
+  }
+
   &-actions {
     justify-content: flex-end;
     margin: 0;

diff --git a/...ures/dashboard/segments/components/modal/duplicate-segment/duplicate-segment.component.ts b/...ures/dashboard/segments/components/modal/duplicate-segment/duplicate-segment.component.ts
@@ -1,6 +1,8 @@
 import { ChangeDetectionStrategy, Component, Inject } from '@angular/core';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { SegmentsService } from '../../../../../../core/segments/segments.service';
+import { Segment } from '../../../../../../core/segments/store/segments.model';
+import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'app-duplicate-segment',
@@ -11,31 +13,62 @@ import { SegmentsService } from '../../../../../../core/segments/segments.servic
 export class DuplicateSegmentComponent {
   segmentName: string;
   segmentDescription: string;
+  allSegments: Segment[];
+  allSegmentsSub: Subscription;
+  isSegmentNameValid = true;
 
   constructor(
     public dialogRef: MatDialogRef<DuplicateSegmentComponent>,
     private segmentsService: SegmentsService,
     @Inject(MAT_DIALOG_DATA) public data: any
-  ) {
+  ) {}
+
+  ngOnInit() {
+    this.allSegmentsSub = this.segmentsService.allSegments$.subscribe((allSegments) => {
+      this.allSegments = allSegments;
+    });
+
     this.segmentName = this.data.segment.name + ' 2';
     this.segmentDescription = '(Copy) ' + this.data.segment.description;
   }
 
-  onCancelClick(): void {
-    this.dialogRef.close();
+  SegmentNameValidation(name: string, context: string) {
+    let allSegmentNameContextArray = [];
+    this.isSegmentNameValid = true;
+    allSegmentNameContextArray = this.allSegments.map((segment) => segment.name.trim() + '_' + segment.context);
+    const segmentNameContextString = name.trim() + '_' + context;
+    if (allSegmentNameContextArray.includes(segmentNameContextString)) {
+      this.isSegmentNameValid = false;
+    }
   }
 
   onDuplicateClick(segmentName: string, segmentDescription: string) {
-    const duplicateSegmentData = { ...this.data.segment, name: segmentName, description: segmentDescription, id: null };
+    this.SegmentNameValidation(segmentName, this.data.segment.context);
+    if (this.isSegmentNameValid) {
+      const duplicateSegmentData = {
+        ...this.data.segment,
+        name: segmentName.trim(),
+        description: segmentDescription,
+        id: null,
+      };
+
+      duplicateSegmentData.userIds = duplicateSegmentData.individualForSegment.map((individual) => individual.userId);
+      duplicateSegmentData.subSegmentIds = duplicateSegmentData.subSegments.map((subSegment) => subSegment.id);
+      duplicateSegmentData.groups = duplicateSegmentData.groupForSegment.map((group) => ({
+        type: group.type,
+        groupId: group.groupId,
+      }));
 
-    duplicateSegmentData.userIds = duplicateSegmentData.individualForSegment.map((individual) => individual.userId);
-    duplicateSegmentData.subSegmentIds = duplicateSegmentData.subSegments.map((subSegment) => subSegment.id);
-    duplicateSegmentData.groups = duplicateSegmentData.groupForSegment.map((group) => ({
-      type: group.type,
-      groupId: group.groupId,
-    }));
+      this.segmentsService.createNewSegment(duplicateSegmentData);
+      this.onCancelClick();
+    }
+  }
+
+  onCancelClick(): void {
+    this.dialogRef.close();
+  }
 
-    this.segmentsService.createNewSegment(duplicateSegmentData);
-    this.onCancelClick();
+  ngOnDestroy() {
+    this.allSegmentsSub.unsubscribe();
   }
 }
diff --git a/...app/features/dashboard/segments/components/segment-overview/segment-overview.component.ts b/...app/features/dashboard/segments/components/segment-overview/segment-overview.component.ts
@@ -92,7 +92,7 @@ export class SegmentOverviewComponent implements OnInit, OnDestroy {
       }
       return segment.name + '_' + segment.context;
     });
-    const segmentNameContextString = name + '_' + context;
+    const segmentNameContextString = name.trim() + '_' + context;
     if (this.allSegmentNameContextArray.includes(segmentNameContextString)) {
       this.isSegmentNameValid = false;
     }
@@ -124,5 +124,6 @@ export class SegmentOverviewComponent implements OnInit, OnDestroy {
 
   ngOnDestroy() {
     this.contextMetaDataSub.unsubscribe();
+    this.allSegmentsSub.unsubscribe();
   }
 }
diff --git a/.../upgrade/src/app/features/dashboard/segments/pages/view-segment/view-segment.component.ts b/.../upgrade/src/app/features/dashboard/segments/pages/view-segment/view-segment.component.ts
@@ -37,7 +37,7 @@ export class ViewSegmentComponent implements OnInit, OnDestroy {
     private segmentsService: SegmentsService,
     private dialog: MatDialog,
     private authService: AuthService,
-    private activatedroute: ActivatedRoute,
+    private activatedRoute: ActivatedRoute,
     private router: Router
   ) {}
 
@@ -58,7 +58,7 @@ export class ViewSegmentComponent implements OnInit, OnDestroy {
       this.permissions = permission;
     });
 
-    this.segmentIdSub = this.activatedroute.paramMap.subscribe((params) => {
+    this.segmentIdSub = this.activatedRoute.paramMap.subscribe((params) => {
       const segmentIdFromParams = params.get('segmentId');
       this.segmentsService.fetchSegmentById(segmentIdFromParams);
     });

diff --git a/frontend/projects/upgrade/src/app/shared/services/common-dialog.service.ts b/frontend/projects/upgrade/src/app/shared/services/common-dialog.service.ts
@@ -156,7 +156,7 @@ export class DialogService {
     const config: MatDialogConfig = {
       data: commonModalConfig,
       width: ModalSize.STANDARD,
-      autoFocus: true,
+      autoFocus: 'input',
       disableClose: true,
     };
     return this.dialog.open(UpsertFeatureFlagModalComponent, config);