feat(console): email label policy, cleanup policy grid module (#890)

* add primitive label policy component, routing

* label policy, i18n

* refactor policy grid

* i18n

* lint

* cleanup i19n policy

* rm failed events styling

* fix detail layout padding, de i18n

* remove unused translations

console/src/app/pages/iam/failed-events/failed-events.component.html

@@ -16,7 +16,7 @@
             <ng-container matColumnDef="failedSequence">
                 <th mat-header-cell *matHeaderCellDef> {{ 'IAM.FAILEDEVENTS.FAILEDSEQUENCE' | translate }} </th>
                 <td mat-cell *matCellDef="let event">
-                    <span class="role app-label">{{event?.failedSequence}}</span>
+                    <span>{{event?.failedSequence}}</span>
                 </td>
             </ng-container>
 

console/src/app/pages/iam/iam-policy-grid/iam-policy-grid.component.html

@@ -1,78 +0,0 @@
-<h1>{{'IAM.POLICY.TITLE' | translate}}</h1>
-
-<p class="top-desc">{{'IAM.POLICY.DESCRIPTION' | translate}}</p>
-
-<div class="row-lyt">
-    <ng-template appHasRole [appHasRole]="['iam.policy.read']">
-        <div class="p-item card">
-            <div class="avatar">
-                <mat-icon class="icon" svgIcon="mdi_textbox_password"></mat-icon>
-            </div>
-            <div class="title">
-                <span>{{'ORG.POLICY.PWD_COMPLEXITY.TITLE' | translate}}</span>
-                <button mat-icon-button disabled>
-                    <i *ngIf="complexityPolicy" class="icon las la-check-circle"></i>
-                </button>
-            </div>
-
-            <p class="desc">
-                {{'ORG.POLICY.PWD_COMPLEXITY.DESCRIPTION' | translate}}</p>
-
-            <span class="fill-space"></span>
-            <div class="btn-wrapper">
-                <button [disabled]="!complexityPolicy" [routerLink]="[ 'policy', PolicyComponentType.COMPLEXITY ]"
-                    mat-stroked-button>{{'ORG.POLICY.BTN_EDIT' | translate}}</button>
-            </div>
-        </div>
-    </ng-template>
-
-    <ng-template appHasRole [appHasRole]="['iam.policy.read']">
-        <div class="p-item card">
-            <div class="avatar">
-                <i class="icon las la-gem"></i>
-            </div>
-            <div class="title">
-                <span>{{'ORG.POLICY.IAM_POLICY.TITLE' | translate}}</span>
-                <button mat-icon-button disabled>
-                    <i *ngIf="iamPolicy" class="icon las la-check-circle"></i>
-                </button>
-            </div>
-
-            <p class="desc">
-                {{'ORG.POLICY.IAM_POLICY.DESCRIPTION' | translate}}</p>
-
-            <span class="fill-space"></span>
-            <div class="btn-wrapper">
-                <ng-template appHasRole [appHasRole]="['iam.policy.write']">
-                    <button [disabled]="!iamPolicy" [routerLink]="[ 'policy', PolicyComponentType.IAM ]"
-                        mat-stroked-button>{{'ORG.POLICY.BTN_EDIT' | translate}}</button>
-                </ng-template>
-            </div>
-        </div>
-    </ng-template>
-
-    <ng-template appHasRole [appHasRole]="['policy.read']">
-        <div class="p-item card">
-            <div class="avatar">
-                <i class="icon las la-gem"></i>
-            </div>
-            <div class="title">
-                <span>{{'ORG.POLICY.LOGIN_POLICY.TITLE' | translate}}</span>
-                <button mat-icon-button disabled>
-                    <i *ngIf="loginPolicy" class="icon las la-check-circle"></i>
-                </button>
-            </div>
-
-            <p class="desc">
-                {{'ORG.POLICY.LOGIN_POLICY.DESCRIPTION' | translate}}</p>
-
-            <span class="fill-space"></span>
-            <div class="btn-wrapper">
-                <ng-template appHasRole [appHasRole]="['iam.policy.write']">
-                    <button [disabled]="!loginPolicy" [routerLink]="[ 'policy', PolicyComponentType.LOGIN ]"
-                        mat-stroked-button>{{'ORG.POLICY.BTN_EDIT' | translate}}</button>
-                </ng-template>
-            </div>
-        </div>
-    </ng-template>
-</div>

console/src/app/pages/iam/iam-policy-grid/iam-policy-grid.component.scss

@@ -1,75 +0,0 @@
-h1 {
-  font-size: 1.2rem;
-}
-
-.top-desc {
-  color: var(--grey);
-}
-
-.row-lyt {
-  display: flex;
-  flex-wrap: wrap;
-  margin: 0 -1rem;
-
-  .p-item {
-    flex-basis: 300px;
-    margin: 1rem;
-    display: flex;
-    flex-direction: column;
-    min-height: 200px;
-    padding: 1rem;
-
-    @media only screen and (max-width: 450px) {
-      flex-basis: 100%;
-    }
-
-    .avatar {
-      height: 60px;
-      width: 60px;
-      border-radius: 50%;
-      background: linear-gradient(40deg, rgb(129, 85, 185) 30%, #8983f7);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      margin-bottom: .5rem;
-
-      .icon,
-      i {
-        font-size: 2.5rem;
-        height: 2.5rem;
-        line-height: 2.5rem;
-      }
-    }
-
-    .title {
-      display: flex;
-      align-items: center;
-
-      span {
-        font-size: 1.2rem;
-      }
-
-      .icon {
-        margin-left: 1rem;
-        margin-right: 1rem;
-      }
-    }
-
-    .desc {
-      font-size: .9rem;
-      color: var(--grey);
-    }
-
-    .fill-space {
-      flex: 1;
-    }
-
-    .btn-wrapper {
-      display: flex;
-    }
-
-    button {
-      margin-right: 1rem;
-    }
-  }
-}

console/src/app/pages/iam/iam-policy-grid/iam-policy-grid.component.spec.ts

@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { IamPolicyGridComponent } from './iam-policy-grid.component';
-
-describe('IamPolicyGridComponent', () => {
-    let component: IamPolicyGridComponent;
-    let fixture: ComponentFixture<IamPolicyGridComponent>;
-
-    beforeEach(async(() => {
-        TestBed.configureTestingModule({
-            declarations: [IamPolicyGridComponent],
-        })
-            .compileComponents();
-    }));
-
-    beforeEach(() => {
-        fixture = TestBed.createComponent(IamPolicyGridComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
-
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
-});

console/src/app/pages/iam/iam-policy-grid/iam-policy-grid.component.ts

@@ -1,43 +0,0 @@
-import { Component } from '@angular/core';
-import { PolicyComponentType } from 'src/app/modules/policies/policy-component-types.enum';
-import { DefaultLoginPolicy, DefaultPasswordComplexityPolicyView, OrgIamPolicyView } from 'src/app/proto/generated/admin_pb';
-import { PolicyState } from 'src/app/proto/generated/management_pb';
-import { AdminService } from 'src/app/services/admin.service';
-import { GrpcAuthService } from 'src/app/services/grpc-auth.service';
-
-@Component({
-    selector: 'app-iam-policy-grid',
-    templateUrl: './iam-policy-grid.component.html',
-    styleUrls: ['./iam-policy-grid.component.scss'],
-})
-export class IamPolicyGridComponent {
-    public complexityPolicy!: DefaultPasswordComplexityPolicyView.AsObject;
-    public loginPolicy!: DefaultLoginPolicy.AsObject;
-    public iamPolicy!: OrgIamPolicyView.AsObject;
-
-    public PolicyState: any = PolicyState;
-    public PolicyComponentType: any = PolicyComponentType;
-
-    constructor(
-        private authService: GrpcAuthService,
-        private adminService: AdminService,
-    ) {
-        this.getData();
-    }
-
-    private getData(): void {
-
-        this.authService.isAllowed(['policy.read']).subscribe(allowed => {
-            if (allowed) {
-                this.adminService.GetDefaultLoginPolicy().then(data => this.loginPolicy = data.toObject());
-                this.adminService.GetDefaultPasswordComplexityPolicy().then(data => this.complexityPolicy = data.toObject());
-            }
-        });
-
-        this.authService.isAllowed(['iam.policy.read']).subscribe(allowed => {
-            if (allowed) {
-                this.adminService.GetDefaultOrgIamPolicy().then(data => this.iamPolicy = data.toObject());
-            }
-        });
-    }
-}

console/src/app/pages/iam/iam-routing.module.ts

@@ -89,6 +89,14 @@ const routes: Routes = [
                 loadChildren: () => import('src/app/modules/policies/login-policy/login-policy.module')
                     .then(m => m.LoginPolicyModule),
             },
+            {
+                path: PolicyComponentType.LABEL,
+                data: {
+                    serviceType: PolicyComponentServiceType.ADMIN,
+                },
+                loadChildren: () => import('src/app/modules/policies/label-policy/label-policy.module')
+                    .then(m => m.LabelPolicyModule),
+            },
         ],
     },
 ];

console/src/app/pages/iam/iam.component.html

@@ -3,7 +3,7 @@
         <h1 class="h1">{{'IAM.DETAIL.TITLE' | translate}}</h1>
         <p class="sub">{{'IAM.DETAIL.DESCRIPTION' | translate}} </p>
 
-        <app-iam-policy-grid></app-iam-policy-grid>
+        <app-policy-grid [type]="PolicyGridType.IAM"></app-policy-grid>
 
         <app-card title="{{ 'IAM.VIEWS.TITLE' | translate }}" description="{{ 'IAM.VIEWS.DESCRIPTION' | translate }}">
             <app-iam-views></app-iam-views>

console/src/app/pages/iam/iam.component.ts

@@ -5,6 +5,7 @@ import { BehaviorSubject, from, Observable, of } from 'rxjs';
 import { catchError, finalize, map } from 'rxjs/operators';
 import { CreationType, MemberCreateDialogComponent } from 'src/app/modules/add-member-dialog/member-create-dialog.component';
 import { PolicyComponentServiceType } from 'src/app/modules/policies/policy-component-types.enum';
+import { PolicyGridType } from 'src/app/modules/policy-grid/policy-grid.component';
 import { OrgMemberView, UserView } from 'src/app/proto/generated/management_pb';
 import { AdminService } from 'src/app/services/admin.service';
 import { ToastService } from 'src/app/services/toast.service';
@@ -22,6 +23,8 @@ export class IamComponent {
     public membersSubject: BehaviorSubject<OrgMemberView.AsObject[]>
         = new BehaviorSubject<OrgMemberView.AsObject[]>([]);
 
+    public PolicyGridType: any = PolicyGridType;
+
     constructor(public adminService: AdminService, private dialog: MatDialog, private toast: ToastService,
         private router: Router) {
         this.loadMembers();

console/src/app/pages/iam/iam.module.ts

@@ -20,6 +20,7 @@ import { CardModule } from 'src/app/modules/card/card.module';
 import { ChangesModule } from 'src/app/modules/changes/changes.module';
 import { ContributorsModule } from 'src/app/modules/contributors/contributors.module';
 import { MetaLayoutModule } from 'src/app/modules/meta-layout/meta-layout.module';
+import { PolicyGridModule } from 'src/app/modules/policy-grid/policy-grid.module';
 import { RefreshTableModule } from 'src/app/modules/refresh-table/refresh-table.module';
 import { SharedModule } from 'src/app/modules/shared/shared.module';
 import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.module';
@@ -27,13 +28,12 @@ import { LocalizedDatePipeModule } from 'src/app/pipes/localized-date-pipe/local
 import { TimestampToDatePipeModule } from 'src/app/pipes/timestamp-to-date-pipe/timestamp-to-date-pipe.module';
 
 import { FailedEventsComponent } from './failed-events/failed-events.component';
-import { IamPolicyGridComponent } from './iam-policy-grid/iam-policy-grid.component';
 import { IamRoutingModule } from './iam-routing.module';
 import { IamViewsComponent } from './iam-views/iam-views.component';
 import { IamComponent } from './iam.component';
 
 @NgModule({
-    declarations: [IamComponent, IamViewsComponent, FailedEventsComponent, IamPolicyGridComponent],
+    declarations: [IamComponent, IamViewsComponent, FailedEventsComponent],
     imports: [
         CommonModule,
         IamRoutingModule,
@@ -64,6 +64,7 @@ import { IamComponent } from './iam.component';
         RefreshTableModule,
         HasRolePipeModule,
         MatSortModule,
+        PolicyGridModule,
     ],
 })
 export class IamModule { }

console/src/app/pages/orgs/org-detail/org-detail.component.html

@@ -29,7 +29,7 @@
         </ng-container>
 
         <ng-template appHasRole [appHasRole]="['policy.read']">
-            <app-policy-grid></app-policy-grid>
+            <app-policy-grid [type]="PolicyGridType.ORG"></app-policy-grid>
         </ng-template>
     </div>
 

console/src/app/pages/orgs/org-detail/org-detail.component.ts

@@ -10,6 +10,7 @@ import { catchError, finalize, map } from 'rxjs/operators';
 import { CreationType, MemberCreateDialogComponent } from 'src/app/modules/add-member-dialog/member-create-dialog.component';
 import { ChangeType } from 'src/app/modules/changes/changes.component';
 import { PolicyComponentServiceType } from 'src/app/modules/policies/policy-component-types.enum';
+import { PolicyGridType } from 'src/app/modules/policy-grid/policy-grid.component';
 import { WarnDialogComponent } from 'src/app/modules/warn-dialog/warn-dialog.component';
 import {
     Org,
@@ -54,6 +55,7 @@ export class OrgDetailComponent implements OnInit, OnDestroy {
     public totalMemberResult: number = 0;
     public membersSubject: BehaviorSubject<OrgMemberView.AsObject[]>
         = new BehaviorSubject<OrgMemberView.AsObject[]>([]);
+    public PolicyGridType: any = PolicyGridType;
 
     constructor(
         private dialog: MatDialog,

console/src/app/pages/orgs/orgs.module.ts

@@ -17,6 +17,7 @@ import { MemberCreateDialogModule } from 'src/app/modules/add-member-dialog/memb
 import { CardModule } from 'src/app/modules/card/card.module';
 import { ContributorsModule } from 'src/app/modules/contributors/contributors.module';
 import { MetaLayoutModule } from 'src/app/modules/meta-layout/meta-layout.module';
+import { PolicyGridModule } from 'src/app/modules/policy-grid/policy-grid.module';
 import { SharedModule } from 'src/app/modules/shared/shared.module';
 import { WarnDialogModule } from 'src/app/modules/warn-dialog/warn-dialog.module';
 import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.module';
@@ -26,10 +27,9 @@ import { AddDomainDialogModule } from './org-detail/add-domain-dialog/add-domain
 import { DomainVerificationComponent } from './org-detail/domain-verification/domain-verification.component';
 import { OrgDetailComponent } from './org-detail/org-detail.component';
 import { OrgsRoutingModule } from './orgs-routing.module';
-import { PolicyGridComponent } from './policy-grid/policy-grid.component';
 
 @NgModule({
-    declarations: [OrgDetailComponent, PolicyGridComponent, DomainVerificationComponent],
+    declarations: [OrgDetailComponent, DomainVerificationComponent],
     imports: [
         CommonModule,
         HasRolePipeModule,
@@ -56,6 +56,7 @@ import { PolicyGridComponent } from './policy-grid/policy-grid.component';
         SharedModule,
         ContributorsModule,
         CopyToClipboardModule,
+        PolicyGridModule,
     ],
 })
 export class OrgsModule { }

console/src/app/pages/orgs/policy-grid/policy-grid.component.html

@@ -1,80 +0,0 @@
-<h1>{{'ORG.POLICY.TITLE' | translate}}</h1>
-
-<p class="top-desc">{{'ORG.POLICY.DESCRIPTION' | translate}}</p>
-
-<div class="row-lyt">
-    <ng-template appHasRole [appHasRole]="['iam.policy.read']">
-        <div class="p-item card">
-            <div class="avatar">
-                <mat-icon class="icon" svgIcon="mdi_textbox_password"></mat-icon>
-            </div>
-            <div class="title">
-                <span>{{'ORG.POLICY.PWD_COMPLEXITY.TITLE' | translate}}</span>
-                <button mat-icon-button disabled>
-                    <i *ngIf="complexityPolicy" class="icon las la-check-circle"></i>
-                </button>
-            </div>
-
-            <p class="desc">
-                {{'ORG.POLICY.PWD_COMPLEXITY.DESCRIPTION' | translate}}</p>
-
-            <span class="fill-space"></span>
-            <div class="btn-wrapper">
-                <button [disabled]="!complexityPolicy" [routerLink]="[ 'policy', PolicyComponentType.COMPLEXITY ]"
-                    mat-stroked-button>{{'ORG.POLICY.BTN_EDIT' | translate}}</button>
-            </div>
-        </div>
-    </ng-template>
-
-    <ng-template appHasRole [appHasRole]="['iam.policy.read']">
-        <div class="p-item card">
-            <div class="avatar">
-                <i class="icon las la-gem"></i>
-            </div>
-            <div class="title">
-                <span>{{'ORG.POLICY.IAM_POLICY.TITLE' | translate}}</span>
-                <button mat-icon-button disabled>
-                    <i *ngIf="iamPolicy" class="icon las la-check-circle"></i>
-                </button>
-            </div>
-
-            <p class="desc">
-                {{'ORG.POLICY.IAM_POLICY.DESCRIPTION' | translate}}</p>
-
-            <span class="fill-space"></span>
-            <div class="btn-wrapper">
-                <ng-template appHasRole [appHasRole]="['iam.policy.write']">
-                    <button [disabled]="!iamPolicy" [routerLink]="[ 'policy', PolicyComponentType.IAM ]"
-                        mat-stroked-button>{{'ORG.POLICY.BTN_EDIT' | translate}}</button>
-                </ng-template>
-            </div>
-        </div>
-    </ng-template>
-
-    <ng-template appHasRole [appHasRole]="['policy.read']">
-        <div class="p-item card">
-            <div class="avatar">
-                <i class="icon las la-gem"></i>
-            </div>
-            <div class="title">
-                <span>{{'ORG.POLICY.LOGIN_POLICY.TITLE' | translate}}</span>
-                <button mat-icon-button disabled>
-                    <i *ngIf="loginPolicy" class="icon las la-check-circle"></i>
-                </button>
-            </div>
-
-            <ng-template #showDescIAM>
-                <p class="desc">
-                    {{'ORG.POLICY.LOGIN_POLICY.DESCRIPTION' | translate}}</p>
-            </ng-template>
-
-            <span class="fill-space"></span>
-            <div class="btn-wrapper">
-                <ng-template appHasRole [appHasRole]="['policy.write']">
-                    <button [disabled]="!loginPolicy" [routerLink]="[ 'policy', PolicyComponentType.LOGIN ]"
-                        mat-stroked-button>{{'ORG.POLICY.BTN_EDIT' | translate}}</button>
-                </ng-template>
-            </div>
-        </div>
-    </ng-template>
-</div>

console/src/app/pages/orgs/policy-grid/policy-grid.component.scss

@@ -1,75 +0,0 @@
-h1 {
-  font-size: 1.2rem;
-}
-
-.top-desc {
-  color: var(--grey);
-}
-
-.row-lyt {
-  display: flex;
-  flex-wrap: wrap;
-  margin: 0 -1rem;
-
-  .p-item {
-    flex-basis: 300px;
-    margin: 1rem;
-    display: flex;
-    flex-direction: column;
-    min-height: 200px;
-    padding: 1rem;
-
-    @media only screen and (max-width: 450px) {
-      flex-basis: 100%;
-    }
-
-    .avatar {
-      height: 60px;
-      width: 60px;
-      border-radius: 50%;
-      background: linear-gradient(40deg, rgb(129, 85, 185) 30%, #8983f7);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      margin-bottom: .5rem;
-
-      .icon,
-      i {
-        font-size: 2.5rem;
-        height: 2.5rem;
-        line-height: 2.5rem;
-      }
-    }
-
-    .title {
-      display: flex;
-      align-items: center;
-
-      span {
-        font-size: 1.2rem;
-      }
-
-      .icon {
-        margin-left: 1rem;
-        margin-right: 1rem;
-      }
-    }
-
-    .desc {
-      font-size: .9rem;
-      color: var(--grey);
-    }
-
-    .fill-space {
-      flex: 1;
-    }
-
-    .btn-wrapper {
-      display: flex;
-    }
-
-    button {
-      margin-right: 1rem;
-    }
-  }
-}

console/src/app/pages/orgs/policy-grid/policy-grid.component.spec.ts

@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { PolicyGridComponent } from './policy-grid.component';
-
-describe('PolicyGridComponent', () => {
-    let component: PolicyGridComponent;
-    let fixture: ComponentFixture<PolicyGridComponent>;
-
-    beforeEach(async(() => {
-        TestBed.configureTestingModule({
-            declarations: [PolicyGridComponent],
-        })
-            .compileComponents();
-    }));
-
-    beforeEach(() => {
-        fixture = TestBed.createComponent(PolicyGridComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
-
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
-});

console/src/app/pages/orgs/policy-grid/policy-grid.component.ts

@@ -1,41 +0,0 @@
-import { Component } from '@angular/core';
-import { PolicyComponentType } from 'src/app/modules/policies/policy-component-types.enum';
-import {
-    LoginPolicyView,
-    OrgIamPolicyView,
-    PasswordComplexityPolicyView,
-    PolicyState,
-} from 'src/app/proto/generated/management_pb';
-import { ManagementService } from 'src/app/services/mgmt.service';
-import { ToastService } from 'src/app/services/toast.service';
-
-@Component({
-    selector: 'app-policy-grid',
-    templateUrl: './policy-grid.component.html',
-    styleUrls: ['./policy-grid.component.scss'],
-})
-export class PolicyGridComponent {
-    public complexityPolicy!: PasswordComplexityPolicyView.AsObject;
-    public iamPolicy!: OrgIamPolicyView.AsObject;
-    public loginPolicy!: LoginPolicyView.AsObject;
-
-    public PolicyState: any = PolicyState;
-    public PolicyComponentType: any = PolicyComponentType;
-
-    constructor(
-        public mgmtService: ManagementService,
-        private toast: ToastService,
-    ) {
-        this.getData();
-    }
-
-    private getData(): void {
-        this.mgmtService.GetPasswordComplexityPolicy().then(data => this.complexityPolicy = data.toObject()).catch(error => {
-            this.toast.showError(error);
-        });
-        this.mgmtService.GetMyOrgIamPolicy().then(data => this.iamPolicy = data.toObject());
-        this.mgmtService.GetLoginPolicy().then(data => {
-            this.loginPolicy = data.toObject();
-        });
-    }
-}