From a9f0e15e65f94a350385296e058665e9c4601204 Mon Sep 17 00:00:00 2001 From: Max Peintner Date: Wed, 22 Jul 2020 13:47:31 +0200 Subject: [PATCH] fix(console): cleanup contributor module, move loading state to shared module, button visibility in light theme (#504) * refreshtable component * project grant refresh table * project role refresh, user grant, i18n * lint * auth user mfa table * auth mfa table * rm unused 404 page, add mgmt mfa table * change light accent color * add actions to mfa table * user detail mfa table * clear selection on refresh, bind data length * member table * fix padding mfa table * Update console/src/assets/i18n/en.json Co-authored-by: Florian Forster * Update console/src/assets/i18n/en.json Co-authored-by: Florian Forster * z-index, new colors * new senf color * create stepper * app create stepper * i18n * i18n sections, header titles * lint * add pro mode * main contributor component * drop project members shared module * project detail members * org contributors, iam contributors * invert card and background colors in light design * changes card design * lighten meta background * account card radius * fix imports, global user email link * move spinner to refresh-table component * Update console/src/assets/i18n/de.json Co-authored-by: Florian Forster * Update console/src/assets/i18n/de.json Co-authored-by: Florian Forster * Update console/src/assets/i18n/de.json Co-authored-by: Florian Forster * Update console/src/assets/i18n/en.json Co-authored-by: Florian Forster * Update console/src/assets/i18n/de.json Co-authored-by: Florian Forster * Update console/src/assets/i18n/de.json Co-authored-by: Florian Forster * Update console/src/assets/i18n/en.json Co-authored-by: Florian Forster * Update console/src/assets/i18n/en.json Co-authored-by: Florian Forster * Update console/src/assets/i18n/en.json Co-authored-by: Florian Forster * light background on light design * Update console/src/assets/i18n/de.json Co-authored-by: Florian Forster * Update console/src/assets/i18n/de.json Co-authored-by: Florian Forster Co-authored-by: Florian Forster --- console/src/app/app.component.scss | 5 +- .../accounts-card.component.scss | 2 +- .../contributors/contributors.component.html} | 12 +- .../contributors.component.scss} | 0 .../contributors.component.spec.ts} | 12 +- .../contributors/contributors.component.ts | 25 ++ .../contributors.module.ts} | 19 +- .../project-contributors.component.html | 32 -- .../project-contributors.component.ts | 119 ------- .../project-members.component.html | 5 +- .../project-members.component.scss | 6 - .../project-roles.component.html | 6 +- .../project-roles.component.scss | 82 +++-- .../refresh-table.component.html | 1 + .../refresh-table.component.scss | 5 + .../refresh-table/refresh-table.component.ts | 1 + .../refresh-table/refresh-table.module.ts | 2 + .../search-user-autocomplete.component.scss | 5 +- .../user-grants/user-grants.component.html | 6 +- .../user-grants/user-grants.component.scss | 6 - .../src/app/pages/home/home.component.html | 29 +- .../src/app/pages/home/home.component.scss | 10 +- console/src/app/pages/home/home.module.ts | 2 + .../iam-contributors.component.html | 28 -- .../iam-contributors.component.scss | 74 ----- .../iam-contributors.component.spec.ts | 34 -- .../iam-contributors.component.ts | 89 ----- .../iam-contributors.module.ts | 44 --- console/src/app/pages/iam/iam.component.html | 6 +- console/src/app/pages/iam/iam.component.ts | 58 ++++ console/src/app/pages/iam/iam.module.ts | 4 +- .../org-contributors.component.scss | 74 ----- .../org-contributors.component.spec.ts | 34 -- .../org-contributors.component.ts | 92 ------ .../org-contributors.module.ts | 44 --- .../orgs/org-detail/org-detail.component.html | 7 +- .../orgs/org-detail/org-detail.component.ts | 67 +++- console/src/app/pages/orgs/orgs.module.ts | 6 +- .../apps/app-create/app-create.component.html | 306 ++++++++++++++---- .../apps/app-create/app-create.component.scss | 152 +++++++-- .../apps/app-create/app-create.component.ts | 163 ++++++++-- .../app/pages/projects/apps/apps.module.ts | 4 + .../granted-project-detail.component.html | 9 +- .../granted-project-detail.component.ts | 68 +++- .../granted-projects.module.ts | 6 +- .../owned-project-detail.component.html | 9 +- .../owned-project-detail.component.ts | 74 ++++- .../owned-project-detail.module.ts | 6 +- .../project-grants.component.html | 7 +- .../project-grants.component.scss | 6 - .../auth-user-mfa.component.html | 2 +- .../user-mfa/user-mfa.component.html | 2 +- .../users/user-list/user-list.component.html | 5 +- .../users/user-list/user-list.component.scss | 6 - console/src/assets/i18n/de.json | 25 +- console/src/assets/i18n/en.json | 25 +- console/src/styles.scss | 12 +- console/src/styles/card.scss | 3 +- console/src/styles/changes.scss | 5 +- console/src/styles/meta.scss | 2 +- console/src/styles/morph-card.scss | 2 +- console/src/styles/sidenav-list.scss | 3 +- console/src/styles/table.scss | 2 +- console/src/styles/theme-card.scss | 12 +- 64 files changed, 977 insertions(+), 992 deletions(-) rename console/src/app/{pages/orgs/org-contributors/org-contributors.component.html => modules/contributors/contributors.component.html} (68%) rename console/src/app/modules/{project-contributors/project-contributors.component.scss => contributors/contributors.component.scss} (100%) rename console/src/app/modules/{project-contributors/project-contributors.component.spec.ts => contributors/contributors.component.spec.ts} (51%) create mode 100644 console/src/app/modules/contributors/contributors.component.ts rename console/src/app/modules/{project-contributors/project-contributors.module.ts => contributors/contributors.module.ts} (54%) delete mode 100644 console/src/app/modules/project-contributors/project-contributors.component.html delete mode 100644 console/src/app/modules/project-contributors/project-contributors.component.ts delete mode 100644 console/src/app/pages/iam/iam-contributors/iam-contributors.component.html delete mode 100644 console/src/app/pages/iam/iam-contributors/iam-contributors.component.scss delete mode 100644 console/src/app/pages/iam/iam-contributors/iam-contributors.component.spec.ts delete mode 100644 console/src/app/pages/iam/iam-contributors/iam-contributors.component.ts delete mode 100644 console/src/app/pages/iam/iam-contributors/iam-contributors.module.ts delete mode 100644 console/src/app/pages/orgs/org-contributors/org-contributors.component.scss delete mode 100644 console/src/app/pages/orgs/org-contributors/org-contributors.component.spec.ts delete mode 100644 console/src/app/pages/orgs/org-contributors/org-contributors.component.ts delete mode 100644 console/src/app/pages/orgs/org-contributors/org-contributors.module.ts diff --git a/console/src/app/app.component.scss b/console/src/app/app.component.scss index 2961dce89d..d09e013c72 100644 --- a/console/src/app/app.component.scss +++ b/console/src/app/app.component.scss @@ -58,7 +58,8 @@ position: absolute; top: 60px; right: 0; - overflow: hidden; + overflow: hidden; + border-radius: .5rem; } } } @@ -202,7 +203,7 @@ span { border: 1px solid #ffffff10; padding: 2px 1rem; - border-radius: .5rem; + border-radius: 50vw; color: #8795a1; font-size: 12px; } diff --git a/console/src/app/modules/accounts-card/accounts-card.component.scss b/console/src/app/modules/accounts-card/accounts-card.component.scss index f398bd0a21..8cf36c002b 100644 --- a/console/src/app/modules/accounts-card/accounts-card.component.scss +++ b/console/src/app/modules/accounts-card/accounts-card.component.scss @@ -29,7 +29,7 @@ } button { - border-radius: 1rem; + border-radius: 50vh; margin: .5rem; .mat-button-wrapper { diff --git a/console/src/app/pages/orgs/org-contributors/org-contributors.component.html b/console/src/app/modules/contributors/contributors.component.html similarity index 68% rename from console/src/app/pages/orgs/org-contributors/org-contributors.component.html rename to console/src/app/modules/contributors/contributors.component.html index 336638acd1..18fcacce72 100644 --- a/console/src/app/pages/orgs/org-contributors/org-contributors.component.html +++ b/console/src/app/modules/contributors/contributors.component.html @@ -1,11 +1,11 @@
- {{ 'PROJECT.MEMBER.TITLE' | translate }} - {{ 'PROJECT.MEMBER.TITLEDESC' | translate }} + {{ title }} + {{ description }}
-
-
+
{{totalResult}}
-
diff --git a/console/src/app/modules/project-contributors/project-contributors.component.scss b/console/src/app/modules/contributors/contributors.component.scss similarity index 100% rename from console/src/app/modules/project-contributors/project-contributors.component.scss rename to console/src/app/modules/contributors/contributors.component.scss diff --git a/console/src/app/modules/project-contributors/project-contributors.component.spec.ts b/console/src/app/modules/contributors/contributors.component.spec.ts similarity index 51% rename from console/src/app/modules/project-contributors/project-contributors.component.spec.ts rename to console/src/app/modules/contributors/contributors.component.spec.ts index 27702fb8f4..d99f9a6dee 100644 --- a/console/src/app/modules/project-contributors/project-contributors.component.spec.ts +++ b/console/src/app/modules/contributors/contributors.component.spec.ts @@ -1,20 +1,20 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; -import { ProjectContributorsComponent } from './project-contributors.component'; +import { ContributorsComponent } from './contributors.component'; -describe('ProjectContributorsComponent', () => { - let component: ProjectContributorsComponent; - let fixture: ComponentFixture; +describe('ContributorsComponent', () => { + let component: ContributorsComponent; + let fixture: ComponentFixture; beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ProjectContributorsComponent], + declarations: [ContributorsComponent], }) .compileComponents(); })); beforeEach(() => { - fixture = TestBed.createComponent(ProjectContributorsComponent); + fixture = TestBed.createComponent(ContributorsComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/console/src/app/modules/contributors/contributors.component.ts b/console/src/app/modules/contributors/contributors.component.ts new file mode 100644 index 0000000000..1e152cbcff --- /dev/null +++ b/console/src/app/modules/contributors/contributors.component.ts @@ -0,0 +1,25 @@ +import { Component, EventEmitter, Input, Output } from '@angular/core'; +import { BehaviorSubject } from 'rxjs'; + +@Component({ + selector: 'app-contributors', + templateUrl: './contributors.component.html', + styleUrls: ['./contributors.component.scss'], +}) +export class ContributorsComponent { + @Input() title: string = ''; + @Input() description: string = ''; + @Input() disabled: boolean = false; + @Input() totalResult: number = 0; + @Input() membersSubject!: BehaviorSubject; + @Output() addClicked: EventEmitter = new EventEmitter(); + @Output() showDetailClicked: EventEmitter = new EventEmitter(); + + public emitAddMember(): void { + this.addClicked.emit(); + } + + public emitShowDetail(): void { + this.showDetailClicked.emit(); + } +} diff --git a/console/src/app/modules/project-contributors/project-contributors.module.ts b/console/src/app/modules/contributors/contributors.module.ts similarity index 54% rename from console/src/app/modules/project-contributors/project-contributors.module.ts rename to console/src/app/modules/contributors/contributors.module.ts index 5a501d9f99..3586220607 100644 --- a/console/src/app/modules/project-contributors/project-contributors.module.ts +++ b/console/src/app/modules/contributors/contributors.module.ts @@ -3,28 +3,23 @@ import { NgModule } from '@angular/core'; import { MatButtonModule } from '@angular/material/button'; import { MatIconModule } from '@angular/material/icon'; import { MatTooltipModule } from '@angular/material/tooltip'; -import { TranslateModule } from '@ngx-translate/core'; -import { MemberCreateDialogModule } from '../add-member-dialog/member-create-dialog.module'; import { AvatarModule } from '../avatar/avatar.module'; -import { ProjectContributorsComponent } from './project-contributors.component'; +import { ContributorsComponent } from './contributors.component'; @NgModule({ - declarations: [ProjectContributorsComponent], + declarations: [ContributorsComponent], imports: [ - MemberCreateDialogModule, CommonModule, - TranslateModule, - MatTooltipModule, - MatIconModule, - MatButtonModule, AvatarModule, + MatIconModule, + MatTooltipModule, + MatButtonModule, ], exports: [ - ProjectContributorsComponent, + ContributorsComponent, ], }) -export class ProjectContributorsModule { } - +export class ContributorsModule { } diff --git a/console/src/app/modules/project-contributors/project-contributors.component.html b/console/src/app/modules/project-contributors/project-contributors.component.html deleted file mode 100644 index 7bae4c9277..0000000000 --- a/console/src/app/modules/project-contributors/project-contributors.component.html +++ /dev/null @@ -1,32 +0,0 @@ -
- {{ 'PROJECT.MEMBER.TITLE' | translate }} - {{ 'PROJECT.MEMBER.TITLEDESC' | translate }} -
-
- - -
- - - - - -
- - - -
- {{totalResult}} -
- - -
-
-
\ No newline at end of file diff --git a/console/src/app/modules/project-contributors/project-contributors.component.ts b/console/src/app/modules/project-contributors/project-contributors.component.ts deleted file mode 100644 index ab6a0ddc8a..0000000000 --- a/console/src/app/modules/project-contributors/project-contributors.component.ts +++ /dev/null @@ -1,119 +0,0 @@ -import { Component, Input, OnInit } from '@angular/core'; -import { MatDialog } from '@angular/material/dialog'; -import { Router } from '@angular/router'; -import { BehaviorSubject, from, of } from 'rxjs'; -import { catchError, finalize, map } from 'rxjs/operators'; -import { - ProjectGrantView, - ProjectMemberSearchResponse, - ProjectMemberView, - ProjectState, - ProjectType, - ProjectView, - User, -} from 'src/app/proto/generated/management_pb'; -import { ProjectService } from 'src/app/services/project.service'; -import { ToastService } from 'src/app/services/toast.service'; - -import { CreationType, MemberCreateDialogComponent } from '../../modules/add-member-dialog/member-create-dialog.component'; - -@Component({ - selector: 'app-project-contributors', - templateUrl: './project-contributors.component.html', - styleUrls: ['./project-contributors.component.scss'], -}) -export class ProjectContributorsComponent implements OnInit { - @Input() public project!: ProjectView.AsObject | ProjectGrantView.AsObject; - @Input() public grantId: string = ''; - @Input() public projectType!: ProjectType; - - @Input() public disabled: boolean = false; - - public totalResult: number = 0; - public membersSubject: BehaviorSubject - = new BehaviorSubject([]); - public ProjectState: any = ProjectState; - private loadingSubject: BehaviorSubject = new BehaviorSubject(false); - - public ProjectType: any = ProjectType; - - constructor(private projectService: ProjectService, - private dialog: MatDialog, - private toast: ToastService, - private router: Router) { } - - public ngOnInit(): void { - const promise: Promise | undefined = - this.projectType === ProjectType.PROJECTTYPE_OWNED ? - this.projectService.SearchProjectMembers(this.project.projectId, 100, 0) : - this.projectType === ProjectType.PROJECTTYPE_GRANTED ? - this.projectService.SearchProjectGrantMembers(this.project.projectId, - this.project.projectId, 100, 0) : undefined; - if (promise) { - from(promise).pipe( - map(resp => { - this.totalResult = resp.toObject().totalResult; - return resp.toObject().resultList; - }), - catchError(() => of([])), - finalize(() => this.loadingSubject.next(false)), - ).subscribe(members => { - this.membersSubject.next(members); - }); - } - } - - public openAddMember(): void { - const dialogRef = this.dialog.open(MemberCreateDialogComponent, { - data: { - // TODO replace - creationType: this.projectType === ProjectType.PROJECTTYPE_OWNED ? CreationType.PROJECT_OWNED : - ProjectType.PROJECTTYPE_GRANTED ? CreationType.PROJECT_GRANTED : ProjectType.PROJECTTYPE_OWNED, - projectId: this.project.projectId, - }, - width: '400px', - }); - - dialogRef.afterClosed().subscribe(resp => { - if (resp) { - const users: User.AsObject[] = resp.users; - const roles: string[] = resp.roles; - - if (users && users.length && roles && roles.length) { - users.forEach(user => { - switch (this.projectType) { - case ProjectType.PROJECTTYPE_OWNED: - return this.projectService.AddProjectMember(this.project.projectId, user.id, roles) - .then(() => { - this.toast.showInfo('PROJECT.TOAST.MEMBERADDED', true); - }).catch(error => { - this.toast.showError(error); - }); - case ProjectType.PROJECTTYPE_GRANTED: - return this.projectService.AddProjectGrantMember( - this.project.projectId, - this.grantId, - user.id, - roles, - ).then(() => { - this.toast.showInfo('PROJECT.TOAST.MEMBERADDED', true); - }).catch(error => { - this.toast.showError(error); - }); - } - }); - } - } - }); - } - - public showDetail(): void { - if (this.project?.state === ProjectState.PROJECTSTATE_ACTIVE) { - if (this.projectType === ProjectType.PROJECTTYPE_GRANTED) { - this.router.navigate(['granted-projects', this.project.projectId, 'grant', this.grantId, 'members']); - } else if (this.projectType === ProjectType.PROJECTTYPE_OWNED) { - this.router.navigate(['projects', this.project.projectId, 'members']); - } - } - } -} diff --git a/console/src/app/modules/project-members/project-members.component.html b/console/src/app/modules/project-members/project-members.component.html index fbc11673f3..1dd3a559b5 100644 --- a/console/src/app/modules/project-members/project-members.component.html +++ b/console/src/app/modules/project-members/project-members.component.html @@ -11,7 +11,7 @@
+ [selection]="selection" [loading]="dataSource?.loading$ | async">