Show a list Identities on the Tier Details page (#364)

* feat: add panel for identities in tier page * feat: allow IdentitiesOverview component to default to a single Tier * feat: add IdentitiesOverview to Tier page * refactor: lint * add npm lint command * fix: bad modifiers * refactor: only load tiers if filter is needed --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Daniel Almeida <[email protected]>
nmshd · Nov 6, 2023 · 977ac10 · 977ac10
1 parent 22e8d99
commit 977ac10
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 13 deletions.
diff --git a/AdminUi/src/AdminUi/ClientApp/package.json b/AdminUi/src/AdminUi/ClientApp/package.json
@@ -8,7 +8,8 @@
         "build": "ng build",
         "build:ssr": "ng run AdminUi:server:dev",
         "watch": "ng build --watch --configuration development",
-        "test": "ng test"
+        "test": "ng test",
+        "lint": "eslint --ext ts ./src"
     },
     "private": true,
     "dependencies": {

diff --git a/...Ui/src/AdminUi/ClientApp/src/app/components/quotas/tier/tier-edit/tier-edit.component.css b/...Ui/src/AdminUi/ClientApp/src/app/components/quotas/tier/tier-edit/tier-edit.component.css
@@ -68,26 +68,26 @@
     margin: 0px 0px 0px 5px !important;
 }
 
-.quotas-expansion-panel-header {
+.expansion-panel-header {
     background: #17428d !important;
 }
 
-.quotas-expansion-panel-header:hover {
+.expansion-panel-header:hover {
     background: #11337a !important;
 }
-.quotas-expansion-panel-header.mat-expansion-panel-header.mat-expanded {
+.expansion-panel-header.mat-expansion-panel-header.mat-expanded {
     border-radius: 4px 4px 0px 0px;
 }
 
-.quotas-panel-header-title {
+.panel-header-title {
     color: white !important;
 }
 
-.quotas-panel-header-desc {
+.panel-header-desc {
     color: rgba(255, 255, 255, 0.54) !important;
 }
 
-:host ::ng-deep .quotas-expansion-panel-header > .mat-expansion-indicator::after {
+:host ::ng-deep .expansion-panel-header > .mat-expansion-indicator::after {
     color: white !important;
 }
 

diff --git a/...i/src/AdminUi/ClientApp/src/app/components/quotas/tier/tier-edit/tier-edit.component.html b/...i/src/AdminUi/ClientApp/src/app/components/quotas/tier/tier-edit/tier-edit.component.html
@@ -24,12 +24,12 @@ <h2 class="header-title">{{ editMode ? headerEdit : headerCreate }}</h2>
         </mat-card-content>
     </mat-card>
     <mat-accordion *ngIf="editMode" class="tier-accordion" [multi]="true">
-        <mat-expansion-panel class="quotas-expansion-panel" [expanded]="true">
-            <mat-expansion-panel-header class="quotas-expansion-panel-header">
-                <mat-panel-title class="quotas-panel-header-title">
+        <mat-expansion-panel class="expansion-panel" [expanded]="true">
+            <mat-expansion-panel-header class="expansion-panel-header">
+                <mat-panel-title class="panel-header-title">
                     {{ headerQuotas }}
                 </mat-panel-title>
-                <mat-panel-description class="quotas-panel-header-desc">
+                <mat-panel-description class="panel-header-desc">
                     {{ headerQuotasDescription }}
                 </mat-panel-description>
             </mat-expansion-panel-header>
@@ -88,6 +88,13 @@ <h2 class="header-title">{{ editMode ? headerEdit : headerCreate }}</h2>
                 </tr>
             </table>
         </mat-expansion-panel>
+        <mat-expansion-panel class="expansion-panel" [expanded]="true">
+            <mat-expansion-panel-header class="expansion-panel-header">
+                <mat-panel-title class="panel-header-title"> Identities </mat-panel-title>
+                <mat-panel-description class="panel-header-desc"> View Identities associated with this Tier </mat-panel-description>
+            </mat-expansion-panel-header>
+            <app-identities-overview *ngIf="tierId !== undefined" [tierId]="tierId"></app-identities-overview>
+        </mat-expansion-panel>
     </mat-accordion>
     <div class="action-buttons">
         <button *ngIf="editMode" mat-button color="warn" (click)="openConfirmationDialogTierDeletion()" [disabled]="!tier.isDeletable">Delete</button>

diff --git a/.../ClientApp/src/app/components/shared/identities-overview/identities-overview.component.ts b/.../ClientApp/src/app/components/shared/identities-overview/identities-overview.component.ts
@@ -3,7 +3,7 @@ import { MatPaginator, PageEvent } from "@angular/material/paginator";
 import { MatSnackBar } from "@angular/material/snack-bar";
 import { Router } from "@angular/router";
 import { NGXLogger } from "ngx-logger";
-import { fromEvent, filter, debounceTime, distinctUntilChanged, tap } from "rxjs";
+import { debounceTime, distinctUntilChanged, filter, fromEvent, tap } from "rxjs";
 import { ClientOverview, ClientService } from "src/app/services/client-service/client-service";
 import { IdentityOverview, IdentityOverviewFilter, IdentityService } from "src/app/services/identity-service/identity.service";
 import { TierOverview, TierService } from "src/app/services/tier-service/tier.service";
@@ -32,6 +32,8 @@ export class IdentitiesOverviewComponent {
         this.debounceFilter(input, "identityVersion");
     }
 
+    @Input() public tierId?: string;
+
     public identities: IdentityOverview[];
 
     public totalRecords: number;
@@ -85,8 +87,19 @@ export class IdentitiesOverviewComponent {
             this.getClients();
         }
 
+        if (this.tierId) {
+            this.setTierFilter();
+        } else {
+            this.getTiers();
+        }
+
         this.getIdentities();
-        this.getTiers();
+    }
+
+    private setTierFilter() {
+        this.displayedColumnFilters = this.displayedColumnFilters.filter((it) => it !== "tier-filter");
+        this.displayedColumns = this.displayedColumns.filter((it) => it !== "tierName");
+        this.filter.tiers = [this.tierId!];
     }
 
     private debounceFilter(filterElement: ElementRef | undefined, filterName: string): void {