This is an automated email from the ASF dual-hosted git repository. hshpak pushed a commit to branch feat/DATALAB-3046/confrimation-and-notification-windows in repository https://gitbox.apache.org/repos/asf/incubator-datalab.git
commit 529b9b1dc1078bae5455a70ebfedb7d5d36334b4 Author: Hennadii_Shpak <[email protected]> AuthorDate: Wed Sep 14 19:35:27 2022 +0300 added modal for confirm unshare user, added notification message --- .../image-action-dialog.component.html | 2 +- .../image-action-dialog.component.scss | 4 ++ .../image-action-dialog.module.ts | 11 +++- .../share-dialog/share-dialog.component.html | 8 ++- .../share-dialog/share-dialog.component.scss | 15 +++-- .../share-dialog/share-dialog.component.ts | 39 +++++++++---- .../terminate-dialog.component.html | 2 +- .../terminate-dialog.component.scss | 5 +- .../un-share-warning.component.html} | 33 +++++------ .../un-share-warning.component.scss} | 51 ++++------------- .../un-share-warning.component.ts} | 65 +++++----------------- .../src/app/resources/images/images.config.ts | 8 ++- .../src/app/resources/images/images.model.ts | 6 ++ 13 files changed, 113 insertions(+), 136 deletions(-) diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/image-action-dialog.component.html b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/image-action-dialog.component.html index 238361994..ea72dcaf3 100644 --- a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/image-action-dialog.component.html +++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/image-action-dialog.component.html @@ -17,7 +17,7 @@ ~ under the License. --> -<div id="dialog-box"> +<div id="dialog-box" class="dialog__wrapper"> <header class="dialog-header"> <h4 class="modal-title">{{data.title}}<span *ngIf="data.actionType === actionType.share">: {{data.image.name}} diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/image-action-dialog.component.scss b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/image-action-dialog.component.scss index ec94d5903..80ef60e42 100644 --- a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/image-action-dialog.component.scss +++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/image-action-dialog.component.scss @@ -17,6 +17,10 @@ * under the License. */ +.dialog__wrapper { + height: 385px; +} + .content { max-height: 75vh; margin: 0; diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/image-action-dialog.module.ts b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/image-action-dialog.module.ts index 0892178e1..fc43e341d 100644 --- a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/image-action-dialog.module.ts +++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/image-action-dialog.module.ts @@ -25,13 +25,20 @@ import { TerminateDialogComponent } from './terminate-dialog/terminate-dialog.co import { ShareDialogComponent } from './share-dialog/share-dialog.component'; import { FormsModule } from '@angular/forms'; import { ShareUserDataComponent } from './share-user-data/share-user-data.component'; +import { UnShareWarningComponent } from './unshare-warning/un-share-warning.component'; @NgModule({ - declarations: [ ImageActionDialogComponent, TerminateDialogComponent, ShareDialogComponent, ShareUserDataComponent ], + declarations: [ + ImageActionDialogComponent, + TerminateDialogComponent, + ShareDialogComponent, + ShareUserDataComponent, + UnShareWarningComponent + ], imports: [ CommonModule, MaterialModule, FormsModule ], - entryComponents: [TerminateDialogComponent , ShareDialogComponent], + entryComponents: [TerminateDialogComponent , ShareDialogComponent, UnShareWarningComponent], exports: [ ImageActionDialogComponent ] }) export class ImageActionDialogModule { } diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/share-dialog/share-dialog.component.html b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/share-dialog/share-dialog.component.html index 526404984..fc2d6e7d1 100644 --- a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/share-dialog/share-dialog.component.html +++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/share-dialog/share-dialog.component.html @@ -25,7 +25,7 @@ <ng-container *ngIf="($getUserListData | async)"></ng-container> - <div datalab-share-dialog class="wrapper"> + <div datalab-share-dialog class="dialog__wrapper"> <ul class="title__list"> <li class="title__item active-tab" @@ -106,13 +106,17 @@ </div> <div *ngIf="activeTabConfig.shareWith" class="share-with__wrapper"> - <div class="user-list__wrapper scrolling"> + <div *ngIf="userDataList.length; else emptyUserList" class="user-list__wrapper scrolling"> <ul class="user-list"> <li *ngFor="let entity of userDataList" class="user-list__item"> <datalab-share-user-data (removeUserData)="unShare($event)" [userData]="entity"></datalab-share-user-data> </li> </ul> + </div> + <ng-template #emptyUserList> + <p class="empty-state">The image hase not been shared.</p> + </ng-template> </div> </div> </datalab-image-action-dialog> diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/share-dialog/share-dialog.component.scss b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/share-dialog/share-dialog.component.scss index ab614f5c6..5d5aca78b 100644 --- a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/share-dialog/share-dialog.component.scss +++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/share-dialog/share-dialog.component.scss @@ -29,6 +29,7 @@ &__item { width: 49%; + padding: 5px 0; text-align: center; border-bottom: 1px solid rgba(0,0,0,.08); } @@ -52,12 +53,10 @@ &::placeholder { color: #c6bcbc; } - - &__wrapper { - } } .active-tab { + background-color: #E9F7FA; border-bottom: 2px solid #35afd5; } @@ -74,7 +73,7 @@ .user-list { display: flex; flex-wrap: wrap; - max-height: 80px; + height: 80px; padding: 10px 0; &__wrapper{ @@ -96,6 +95,14 @@ height: 35px; } +.empty-state { + display: flex; + justify-content: center; + align-items: center; + height: 200px; + color: #35afd5; +} + // TODO REMOVE IT WHEN REMOVING THE RADIO BUTTON FROM APP //start .radio__wrapper { diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/share-dialog/share-dialog.component.ts b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/share-dialog/share-dialog.component.ts index 8523a73fe..ae26b0bdd 100644 --- a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/share-dialog/share-dialog.component.ts +++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/share-dialog/share-dialog.component.ts @@ -22,10 +22,12 @@ import { SharePlaceholder, TabName, UserDataTypeConfig } from '../image-action.c import { DialogWindowTabConfig, UserData, UserDataType } from '../image-action.model'; import { NgModel } from '@angular/forms'; import { ImagesService } from '../../../images/images.service'; -import { MAT_DIALOG_DATA } from '@angular/material/dialog'; -import { ImageActionModalData } from '../../../images'; -import { switchMap, take, tap } from 'rxjs/operators'; -import { Observable } from 'rxjs'; +import { MAT_DIALOG_DATA, MatDialog } from '@angular/material/dialog'; +import { ImageActionModalData, ModalTitle, Toaster_Message, UnShareModal } from '../../../images'; +import { switchMap, tap } from 'rxjs/operators'; +import { EMPTY, Observable } from 'rxjs'; +import { UnShareWarningComponent } from '../unshare-warning/un-share-warning.component'; +import { ToastrService } from 'ngx-toastr'; @Component({ selector: 'datalab-share-dialog', @@ -54,6 +56,8 @@ export class ShareDialogComponent implements OnInit { constructor( private imagesService: ImagesService, @Inject(MAT_DIALOG_DATA) public data: ImageActionModalData, + private dialog: MatDialog, + public toastr: ToastrService, ) { } @@ -85,12 +89,27 @@ export class ShareDialogComponent implements OnInit { } unShare(userName: string): void { - this.userDataList = this.userDataList.filter(({value}) => value !== userName); - const imageInfo = this.imagesService.createImageRequestInfo(this.data.image, this.userDataList); - this.$getUserListData = this.imagesService.shareImageAllUsers(imageInfo).pipe( - take(1), - switchMap(() => this.getSharingUserList()) - ); + const data: UnShareModal = { + userName, + title: ModalTitle.unShare + }; + const filteredList = this.userDataList.filter(({value}) => value !== userName); + const imageInfo = this.imagesService.createImageRequestInfo(this.data.image, filteredList); + + this.$getUserListData = this.dialog.open(UnShareWarningComponent, { + data, + panelClass: 'modal-sm' + }).afterClosed() + .pipe( + switchMap((confirm) => { + if (confirm) { + return this.imagesService.shareImageAllUsers(imageInfo); + } + return EMPTY; + }), + switchMap((v) => this.getSharingUserList()), + tap(() => this.toastr.success(Toaster_Message.successUnShare, Toaster_Message.successTitle)) + ); } private initUserList(): void { diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/terminate-dialog/terminate-dialog.component.html b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/terminate-dialog/terminate-dialog.component.html index e7328d1f5..bb5c58f2e 100644 --- a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/terminate-dialog/terminate-dialog.component.html +++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/terminate-dialog/terminate-dialog.component.html @@ -30,7 +30,7 @@ </div> <p *ngIf="data.isShared" class="shared-warning">!The image is shared with other users.</p> </div> - <p class="question center"> + <p class="question"> Do you want proceed? </p> </div> diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/terminate-dialog/terminate-dialog.component.scss b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/terminate-dialog/terminate-dialog.component.scss index 3b9c2a38f..31a155d95 100644 --- a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/terminate-dialog/terminate-dialog.component.scss +++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/terminate-dialog/terminate-dialog.component.scss @@ -63,9 +63,6 @@ } .question { - color: #718ba6; -} - -.center { text-align: center; + color: #718ba6; } diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/image-action-dialog.component.html b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/unshare-warning/un-share-warning.component.html similarity index 58% copy from services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/image-action-dialog.component.html copy to services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/unshare-warning/un-share-warning.component.html index 238361994..073d20067 100644 --- a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/image-action-dialog.component.html +++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/unshare-warning/un-share-warning.component.html @@ -17,28 +17,25 @@ ~ under the License. --> -<div id="dialog-box"> +<div id="dialog-box" class="dialog__wrapper"> <header class="dialog-header"> - <h4 class="modal-title">{{data.title}}<span - *ngIf="data.actionType === actionType.share">: {{data.image.name}} - </span> + <h4 class="modal-title">{{data.title}} </h4> <button type="button" class="close" (click)="dialogRef.close()">×</button> </header> <section class="content"> - <ng-content select="[datalab-share-dialog]"> - </ng-content> - <ng-content select="[datalab-terminate-dialog]"> - </ng-content> - <div [hidden]="activeTabConfig && activeTabConfig.shareWith" class="text-center m-top-30 m-bott-10"> - <button type="button" class="butt mat-raised-button" (click)="dialogRef.close()">No</button> - <button - [disabled]="isApplyBtnDisabled" - type="button" - class="butt butt-success mat-raised-button" - (click)="dialogRef.close(responseObj)"> - {{confirmBtnName}} - </button> - </div> + <p class="modal__text">User <span class="user__name">{{data.userName}}</span> will no longer have an access to the image.</p> + <p class="question center"> + Do you want proceed? + </p> </section> + <div class="text-center m-top-30 m-bott-10 button__wrapper"> + <button type="button" class="butt mat-raised-button" (click)="dialogRef.close()">No</button> + <button + type="button" + class="butt butt-success mat-raised-button" + (click)="dialogRef.close(true)"> + Yes + </button> + </div> </div> diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/terminate-dialog/terminate-dialog.component.scss b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/unshare-warning/un-share-warning.component.scss similarity index 57% copy from services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/terminate-dialog/terminate-dialog.component.scss copy to services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/unshare-warning/un-share-warning.component.scss index 3b9c2a38f..f4d9041fd 100644 --- a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/terminate-dialog/terminate-dialog.component.scss +++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/unshare-warning/un-share-warning.component.scss @@ -17,55 +17,26 @@ * under the License. */ -.terminate-action__wrapper { - width: 100%; +.content { + padding: 20px 50px 0 50px; } -.terminate-image-list__wrapper { - margin-bottom: 10px; - border-bottom: 1px solid rgba(0,0,0,.08); +.user__name { + font-weight: bold; } -.terminate-action__header--wrapper, -.terminate-image-list__wrapper { - display: flex; - justify-content: space-between; - padding: 10px 20px; - line-height: 26px; - - & > .status { - text-align: right; - } -} - -.terminate-action__header--wrapper { - margin-top: 26px; -} - -.wrapper { - & .terminate-image-list__wrapper { - & > .status { - font-weight: 300; - } - } -} - -.shared-warning { - margin-bottom: 10px; - color: red; +.modal__text { text-align: center; - font-weight: 400; -} - -.question, -.shared-warning { - line-height: 1; + color: #35afd5; + margin-bottom: 30px; } .question { + text-align: center; color: #718ba6; + font-weight: bold; } -.center { - text-align: center; +.button__wrapper { + margin-bottom: 20px; } diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/terminate-dialog/terminate-dialog.component.scss b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/unshare-warning/un-share-warning.component.ts similarity index 52% copy from services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/terminate-dialog/terminate-dialog.component.scss copy to services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/unshare-warning/un-share-warning.component.ts index 3b9c2a38f..36c1e9c86 100644 --- a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/terminate-dialog/terminate-dialog.component.scss +++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/image-action-dialog/unshare-warning/un-share-warning.component.ts @@ -17,55 +17,18 @@ * under the License. */ -.terminate-action__wrapper { - width: 100%; -} - -.terminate-image-list__wrapper { - margin-bottom: 10px; - border-bottom: 1px solid rgba(0,0,0,.08); -} - -.terminate-action__header--wrapper, -.terminate-image-list__wrapper { - display: flex; - justify-content: space-between; - padding: 10px 20px; - line-height: 26px; - - & > .status { - text-align: right; - } -} - -.terminate-action__header--wrapper { - margin-top: 26px; -} - -.wrapper { - & .terminate-image-list__wrapper { - & > .status { - font-weight: 300; - } - } -} - -.shared-warning { - margin-bottom: 10px; - color: red; - text-align: center; - font-weight: 400; -} - -.question, -.shared-warning { - line-height: 1; -} - -.question { - color: #718ba6; -} - -.center { - text-align: center; +import { Component, Inject } from '@angular/core'; +import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; +import { UnShareModal } from '../../../images'; + +@Component({ + templateUrl: './un-share-warning.component.html', + styleUrls: ['./un-share-warning.component.scss'] +}) +export class UnShareWarningComponent { + + constructor( + public dialogRef: MatDialogRef<UnShareWarningComponent>, + @Inject(MAT_DIALOG_DATA) public data: UnShareModal, + ) { } } diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/images/images.config.ts b/services/self-service/src/main/resources/webapp/src/app/resources/images/images.config.ts index 2bf2e0f39..82c4a65e3 100644 --- a/services/self-service/src/main/resources/webapp/src/app/resources/images/images.config.ts +++ b/services/self-service/src/main/resources/webapp/src/app/resources/images/images.config.ts @@ -50,8 +50,10 @@ export enum Localstorage_Key { } export enum Toaster_Message { + successTitle = 'Success!', successShare = 'The image has been successfully shared.', - successTerminate = 'The image has been terminated' + successTerminate = 'The image has been terminated', + successUnShare = 'The action has been performed successfully.' } export enum Placeholders { @@ -119,6 +121,6 @@ export enum ImageActions { export enum ModalTitle { share = 'Share image', - terminate = 'Terminate image' + terminate = 'Terminate image', + unShare = '! Warning' } - diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/images/images.model.ts b/services/self-service/src/main/resources/webapp/src/app/resources/images/images.model.ts index 63f95908c..25eaa7f72 100644 --- a/services/self-service/src/main/resources/webapp/src/app/resources/images/images.model.ts +++ b/services/self-service/src/main/resources/webapp/src/app/resources/images/images.model.ts @@ -18,6 +18,7 @@ */ import { UserData } from '../exploratory/image-action-dialog/image-action.model'; +import { ModalTitle } from './images.config'; export interface ProjectImagesInfo { filterData: ImageFilterFormDropdownData; @@ -125,3 +126,8 @@ export interface FilteredColumnList { } export type FilterFormItemType = [string, string[] | string]; + +export interface UnShareModal { + userName: string; + title: ModalTitle; +} --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
