You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@datalab.apache.org by hs...@apache.org on 2022/09/14 16:36:00 UTC
[incubator-datalab] 01/01: added modal for confirm unshare user, added notification message
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 <bo...@gmail.com>
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: commits-unsubscribe@datalab.apache.org
For additional commands, e-mail: commits-help@datalab.apache.org