Merge pull request #1200 from exadel-inc/ui_bug_fixes

UI Bug Fixes

ui/src/app/features/collection-manager-subject-right/collection-manager-subject-right/collection-manager-subject-right.component.ts

@@ -13,7 +13,7 @@
  * or implied. See the License for the specific language governing
  * permissions and limitations under the License.
  */
-import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
+import { Component, EventEmitter, Input, OnChanges, Output, SimpleChange, SimpleChanges } from '@angular/core';
 import { CircleLoadingProgressEnum } from 'src/app/data/enums/circle-loading-progress.enum';
 import { SubjectModeEnum } from 'src/app/data/enums/subject-mode.enum';
 import { CollectionItem } from 'src/app/data/interfaces/collection';
@@ -67,8 +67,11 @@ export class CollectionManagerSubjectRightComponent implements OnChanges {
   }
 
   ngOnChanges(changes: SimpleChanges) {
-    const change = changes['collectionItems'];
-    if (change && change['currentValue'] !== change['previousValue']) {
+    this.checkUploadStatus(changes['collectionItems']);
+  }
+
+  checkUploadStatus(colleactionItems: SimpleChange): void {
+    if (colleactionItems && colleactionItems['currentValue'] !== colleactionItems['previousValue']) {
       const collectionOnHold = this.collectionItems.filter(item => item.status === CircleLoadingProgressEnum.OnHold);
 
       this.isCollectionOnHold = !!collectionOnHold.length;

ui/src/app/features/create-application/application/application-name.component.ts

@@ -17,6 +17,7 @@ import { Component, EventEmitter, Input, OnDestroy, OnInit, Output, ViewChild }
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { MatStepper } from '@angular/material/stepper';
 import { Subscription } from 'rxjs';
+import { MAX_INPUT_LENGTH } from 'src/app/core/constants';
 
 enum DefaultAppName {
   DemoApp = 'Demo app',
@@ -27,13 +28,13 @@ enum DefaultAppName {
   templateUrl: './application-name.component.html',
   styleUrls: ['../shared-styles.component.scss'],
 })
-
 export class ApplicationNameComponent implements OnInit, OnDestroy {
   @Output() applicationName = new EventEmitter<{ applicationName: string }>();
   @Input() stepper: MatStepper;
   application: FormGroup;
   valueSubs: Subscription;
   isValid: boolean = true;
+  maxInputLength: number = MAX_INPUT_LENGTH;
 
   constructor(private fb: FormBuilder) {}
 
@@ -48,6 +49,11 @@ export class ApplicationNameComponent implements OnInit, OnDestroy {
         return;
       }
 
+      if (val === this.maxInputLength) {
+        this.isValid = false;
+        return;
+      }
+
       this.isValid = true;
     });
   }

ui/src/app/features/model-clone-dialog/model-clone-dialog.component.html

@@ -25,15 +25,25 @@ <h1 class="dialog__title">{{ 'common.capital.clone' | translate }} {{ data.entit
         (input)="onChange(initialName)"
         placeholder="{{ 'common.name' | translate }}"
       />
-      <div class="err" *ngIf="alreadyExists">
-        {{ data.errorMsg }}
+      <div class="err">
+        <ng-container *ngIf="alreadyExists">
+          {{ data.errorMsg }}
+        </ng-container>
+        <ng-container *ngIf="initialName?.length > maxInputLength">
+          {{ 'common.input_lengh_err' | translate }}
+        </ng-container>
       </div>
     </div>
     <div class="dialog__actions">
       <button type="button" (click)="dialogRef.close()" class="cancel-btn">
         {{ 'common.capital.cancel' | translate }}
       </button>
-      <button type="submit" [mat-dialog-close]="initialName" [disabled]="isCloneDisabled || alreadyExists" class="clone-btn">
+      <button
+        type="submit"
+        [mat-dialog-close]="initialName"
+        [disabled]="isCloneDisabled || alreadyExists || initialName?.length > maxInputLength"
+        class="clone-btn"
+      >
         {{ 'common.capital.clone' | translate }}
       </button>
     </div>

ui/src/app/features/model-clone-dialog/model-clone-dialog.component.ts

@@ -16,6 +16,7 @@
 
 import { Component, Inject } from '@angular/core';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MAX_INPUT_LENGTH } from 'src/app/core/constants';
 
 @Component({
   selector: 'app-model-clone-dialog',
@@ -25,6 +26,7 @@ import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 export class ModelCloneDialogComponent {
   initialName: string;
   alreadyExists: boolean;
+  maxInputLength: number = MAX_INPUT_LENGTH;
 
   constructor(public dialogRef: MatDialogRef<ModelCloneDialogComponent>, @Inject(MAT_DIALOG_DATA) public data: any) {}
 

ui/src/app/features/model-info/model-info.component.html

@@ -25,9 +25,9 @@
           class="name"
           matTooltip="{{ currentModel.name }}"
           matTooltipClass="top-arrow"
-          [matTooltipDisabled]="currentModel.name.length <= 50"
+          [matTooltipDisabled]="currentModel.name.length < 40"
         >
-          {{ currentModel.name | truncate: 40 }}</span
+          {{ currentModel.name | truncate : 40 }}</span
         >
       </div>
 
@@ -38,7 +38,7 @@
 
       <div class="created-date--container">
         <span class="label">{{ 'model_info.created_on' | translate }}</span>
-        <span class="date">{{ currentModel.createdDate | date: 'yyyy-MM-dd' }}</span>
+        <span class="date">{{ currentModel.createdDate | date : 'yyyy-MM-dd' }}</span>
       </div>
 
       <div class="api-key--container">

ui/src/app/features/model-table/model-table.component.html

@@ -35,7 +35,7 @@
           matTooltipClass="top-arrow"
           [matTooltipDisabled]="disableToolTip(element.name)"
         >
-          {{ element.name | truncate: 20 }}
+          {{ element.name | truncate : 20 }}
         </span>
       </div>
     </td>
@@ -44,7 +44,7 @@
     <td mat-cell *matCellDef="let element">
       <div class="content--wrapper">
         <div class="content--wrapper_key">
-          <span class="key">{{ element.apiKey }}</span>
+          <span class="key" (click)="dashboard.emit(element)">{{ element.apiKey }}</span>
           <button mat-icon-button [cdkCopyToClipboard]="element.apiKey">
             <mat-icon
               svgIcon="copy"
@@ -62,7 +62,7 @@
     <td mat-cell *matCellDef="let element">
       <div class="content--wrapper">
         <div class="content--wrapper_type">
-          <span class="type">{{ element.type | lowercase }}</span>
+          <span class="type" (click)="dashboard.emit(element)">{{ element.type | lowercase }}</span>
         </div>
       </div>
     </td>

ui/src/app/features/sign-up-form/sign-up-form.component.html

@@ -76,7 +76,10 @@
           required
           placeholder="{{ 'registration.password_placeholder' | translate }}"
         />
-        <div class="err" *ngIf="form.controls.password.status === 'INVALID' && form.controls.password.touched">
+        <div
+          class="err"
+          *ngIf="form.controls.password.status === 'INVALID' && form.controls.password.touched && form.controls.password.dirty"
+        >
           <span>{{ 'registration.password_restriction' | translate }}</span>
         </div>
       </div>

ui/src/app/store/manage-collectiom/effects.ts

@@ -63,13 +63,16 @@ import { selectCurrentApiKey } from '../model/selectors';
 import { SubjectModeEnum } from 'src/app/data/enums/subject-mode.enum';
 import { CollectionItem } from 'src/app/data/interfaces/collection';
 import { selectMaxFileSize } from '../image-size/selectors';
+import { Routes } from 'src/app/data/enums/routers-url.enum';
+import { Router } from '@angular/router';
 
 @Injectable()
 export class CollectionEffects {
   constructor(
     private actions: Actions,
     private collectionService: CollectionService,
     private snackBarService: SnackBarService,
+    private router: Router,
     private store: Store<CollectionEntityState>
   ) {}
 
@@ -299,4 +302,13 @@ export class CollectionEffects {
       )
     )
   );
+
+  //Listen for the 'loadModelsFail'
+  @Effect({ dispatch: false })
+  loadFail$ = this.actions.pipe(
+    ofType(loadSubjectsFail),
+    tap(() => {
+      this.router.navigateByUrl(Routes.Home);
+    })
+  );
 }

ui/src/app/store/model/effects.ts

@@ -62,7 +62,9 @@ export class ModelEffects {
     switchMap(action =>
       this.modelService.getModel(action.applicationId, action.selectedModelId).pipe(
         map(model => loadModelSuccess({ model })),
-        catchError(error => of(loadModelFail({ error })))
+        catchError(error => {
+          return of(loadModelFail({ error }));
+        })
       )
     )
   );