This is an automated email from the ASF dual-hosted git repository. hshpak pushed a commit to branch feat/add-platform/validation in repository https://gitbox.apache.org/repos/asf/incubator-datalab.git
commit d03dea7b9207ec8333a70caab4b5ad63fc0f70c1 Author: Hennadii_Shpak <[email protected]> AuthorDate: Thu Oct 6 00:14:44 2022 +0300 added validation on add platform dialog --- .../connected-platform-dialog.component.html | 21 ++++++++++++++++++++- .../connected-platform-dialog.component.scss | 11 ++++++++--- .../connected-platform-dialog.component.ts | 13 +++++++++---- .../connected-platforms.component.html | 11 +++++++++-- .../connected-platforms.component.ts | 1 + .../connected-platforms.module.ts | 8 +++++--- .../modal-parts/modal-btn/modal-btn.component.html | 2 +- 7 files changed, 53 insertions(+), 14 deletions(-) diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/connected-platforms/connected-platform-dialog/connected-platform-dialog.component.html b/services/self-service/src/main/resources/webapp/src/app/resources/connected-platforms/connected-platform-dialog/connected-platform-dialog.component.html index 3ca47cf20..ef0ae70ef 100644 --- a/services/self-service/src/main/resources/webapp/src/app/resources/connected-platforms/connected-platform-dialog/connected-platform-dialog.component.html +++ b/services/self-service/src/main/resources/webapp/src/app/resources/connected-platforms/connected-platform-dialog/connected-platform-dialog.component.html @@ -46,6 +46,13 @@ <label>Platform url</label> <div class="input__wrapper"> <input placeholder="Platform url" type="text" formControlName="url"> + <span + class="error" + *ngIf="!connectedPlatformForm?.controls.url.valid + && connectedPlatformForm.controls.url.touched" + > + Please provide a valid endpoint url with slash in the end. + </span> </div> </div> @@ -53,9 +60,21 @@ <label>Name</label> <div class="input__wrapper"> <input placeholder="Enter name" type="text" formControlName="name"> + <span + class="error" + *ngIf="!connectedPlatformForm?.controls.name.valid && connectedPlatformForm.controls.name.touched" + > + Can only contain letters, numbers. Minimum 2 symbols. + </span> </div> </div> - <datalab-modal-btn [confirmBtnName]="confirmButtonName.add" (closeEvent)="onBtnClick($event)"></datalab-modal-btn> + <div class="button__wrapper"> + <datalab-modal-btn + [isConfirmBtnDisabled]="isFormValid" + [confirmBtnName]="confirmButtonName.add" + (closeEvent)="onBtnClick($event)" + ></datalab-modal-btn> + </div> </form> </div> </div> diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/connected-platforms/connected-platform-dialog/connected-platform-dialog.component.scss b/services/self-service/src/main/resources/webapp/src/app/resources/connected-platforms/connected-platform-dialog/connected-platform-dialog.component.scss index f012798cf..0becd0d19 100644 --- a/services/self-service/src/main/resources/webapp/src/app/resources/connected-platforms/connected-platform-dialog/connected-platform-dialog.component.scss +++ b/services/self-service/src/main/resources/webapp/src/app/resources/connected-platforms/connected-platform-dialog/connected-platform-dialog.component.scss @@ -25,12 +25,12 @@ display: flex; justify-content: space-between; align-items: baseline; - margin-bottom: 20px; + height: 56px; } .select__wrapper { position: relative; - width: 285px; + width: 320px; height: 36px; & ::ng-deep .mat-form-field-wrapper { @@ -89,5 +89,10 @@ } .input__wrapper { - width: 285px; + width: 320px; + height: 56px; +} + +.button__wrapper { + padding-top: 20px; } diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/connected-platforms/connected-platform-dialog/connected-platform-dialog.component.ts b/services/self-service/src/main/resources/webapp/src/app/resources/connected-platforms/connected-platform-dialog/connected-platform-dialog.component.ts index 9e0f5c458..058834ccd 100644 --- a/services/self-service/src/main/resources/webapp/src/app/resources/connected-platforms/connected-platform-dialog/connected-platform-dialog.component.ts +++ b/services/self-service/src/main/resources/webapp/src/app/resources/connected-platforms/connected-platform-dialog/connected-platform-dialog.component.ts @@ -19,10 +19,11 @@ import { Component, Inject, OnInit } from '@angular/core'; import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; -import { FormBuilder, FormGroup } from '@angular/forms'; +import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { ModalTitle } from '../../images'; import { AddModalData, AddPlatformFromValue } from '../connected-platforms.models'; import { ConfirmButtonNames } from '../connected-platforms.config'; +import { PATTERNS } from '../../../core/util'; @Component({ selector: 'datalab-connected-platform-dialog', @@ -55,9 +56,13 @@ export class ConnectedPlatformDialogComponent implements OnInit { private initForm(): void { this.connectedPlatformForm = this.fb.group({ - type: '', - url: '', - name: '' + type: ['', Validators.required], + url: ['', [ Validators.required, Validators.pattern(PATTERNS.fullUrl)]], + name: ['', [ Validators.required, Validators.pattern(PATTERNS.projectName), Validators.minLength(2)]] }); } + + get isFormValid(): boolean { + return this.connectedPlatformForm.valid; + } } diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/connected-platforms/connected-platforms.component.html b/services/self-service/src/main/resources/webapp/src/app/resources/connected-platforms/connected-platforms.component.html index 43042832c..08acd3619 100644 --- a/services/self-service/src/main/resources/webapp/src/app/resources/connected-platforms/connected-platforms.component.html +++ b/services/self-service/src/main/resources/webapp/src/app/resources/connected-platforms/connected-platforms.component.html @@ -41,8 +41,15 @@ <ng-container matColumnDef="linkToPlatform"> <th mat-header-cell *matHeaderCellDef>{{tableHeaderCellTitles.linkToPlatform}}</th> <td class="column" mat-cell *matCellDef="let element"> - <a class="link" [href]="element.url | normalizeLink" target="_blank"> - {{element.url}} + <a + class="link" + [href]="element.url | normalizeLink" + target="_blank" + [matTooltip]="element.url" + matTooltipPosition="above" + [matTooltipDisabled]="element.url.length < maxUrlLength" + > + {{element.url | truncateTextPipe : maxUrlLength}} </a> </td> </ng-container> diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/connected-platforms/connected-platforms.component.ts b/services/self-service/src/main/resources/webapp/src/app/resources/connected-platforms/connected-platforms.component.ts index 16b83a2a9..b49dbc545 100644 --- a/services/self-service/src/main/resources/webapp/src/app/resources/connected-platforms/connected-platforms.component.ts +++ b/services/self-service/src/main/resources/webapp/src/app/resources/connected-platforms/connected-platforms.component.ts @@ -38,6 +38,7 @@ import { WarningDialogComponent } from './warning-dialog/warning-dialog.componen }) export class ConnectedPlatformsComponent implements OnInit { readonly tableHeaderCellTitles: typeof ConnectedPlatformsTableTitles = ConnectedPlatformsTableTitles; + readonly maxUrlLength: number = 30; // tslint:disable-next-line:max-line-length private readonly connectedPlatformsStatus$$: BehaviorSubject<ConnectedPlatformsStatus> = new BehaviorSubject<ConnectedPlatformsStatus>({} as ConnectedPlatformsStatus); diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/connected-platforms/connected-platforms.module.ts b/services/self-service/src/main/resources/webapp/src/app/resources/connected-platforms/connected-platforms.module.ts index 17fb763b8..6d230e86d 100644 --- a/services/self-service/src/main/resources/webapp/src/app/resources/connected-platforms/connected-platforms.module.ts +++ b/services/self-service/src/main/resources/webapp/src/app/resources/connected-platforms/connected-platforms.module.ts @@ -25,10 +25,11 @@ import { ConnectedPlatformsComponent } from './connected-platforms.component'; import { MaterialModule } from '../../shared/material.module'; import { NormalizeLinkPipeModule } from '../../core/pipes'; import { BubbleModule } from '../../shared'; -import { WarningDialogComponent } from './warning-dialog/warning-dialog.component'; +import { ReactiveFormsModule } from '@angular/forms'; +import { TruncateTextPipeModule } from '../../core/pipes/truncate-text-pipe'; import { ModalPartsModule } from '../../shared/modal-parts/modal-parts.module'; +import { WarningDialogComponent } from './warning-dialog/warning-dialog.component'; import { ConnectedPlatformDialogComponent } from './connected-platform-dialog/connected-platform-dialog.component'; -import { ReactiveFormsModule } from '@angular/forms'; @NgModule({ @@ -44,7 +45,8 @@ import { ReactiveFormsModule } from '@angular/forms'; ConnectedPlatformsRoutingModule, BubbleModule, ModalPartsModule, - ReactiveFormsModule + ReactiveFormsModule, + TruncateTextPipeModule ], entryComponents: [ ConnectedPlatformDialogComponent, WarningDialogComponent ] }) diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/modal-parts/modal-btn/modal-btn.component.html b/services/self-service/src/main/resources/webapp/src/app/shared/modal-parts/modal-btn/modal-btn.component.html index 0a5089c4b..0c31d2939 100644 --- a/services/self-service/src/main/resources/webapp/src/app/shared/modal-parts/modal-btn/modal-btn.component.html +++ b/services/self-service/src/main/resources/webapp/src/app/shared/modal-parts/modal-btn/modal-btn.component.html @@ -23,7 +23,7 @@ <div class="button__wrapper"> <button type="button" class="butt mat-raised-button" (click)="close()">No</button> <button - [disabled]="isConfirmBtnDisabled" + [disabled]="!isConfirmBtnDisabled" type="button" class="butt butt-success mat-raised-button" (click)="close(true)"> --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
