Admin UI: List Identities in the Client Details page (#357)

* feat: create identities-overview shared component * feat: use identities-overview shared component in identities list page * feat: add identities overview table to client details page * feat: add clientId option to the identities overview shared component * fix: identities table should not appear in the create client page * fix: identities overview component having no height while loading * fix: center identities overview content --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
nmshd · Nov 2, 2023 · ef50aca · ef50aca
1 parent acd5069
commit ef50aca
Show file tree

Hide file tree

Showing 11 changed files with 646 additions and 518 deletions.
diff --git a/AdminUi/src/AdminUi/ClientApp/src/app/app.module.ts b/AdminUi/src/AdminUi/ClientApp/src/app/app.module.ts
@@ -54,6 +54,7 @@ import { LoggerWriterService } from "./services/logger-writer-service/logger-wri
 import { SidebarService } from "./services/sidebar-service/sidebar.service";
 import { ApiKeyInterceptor } from "./shared/interceptors/api-key.interceptor";
 import { XSRFInterceptor } from "./shared/interceptors/xsrf.interceptor";
+import { IdentitiesOverviewComponent } from "./components/shared/identities-overview/identities-overview.component";
 
 @NgModule({
     declarations: [
@@ -72,7 +73,8 @@ import { XSRFInterceptor } from "./shared/interceptors/xsrf.interceptor";
         AssignQuotasDialogComponent,
         ConfirmationDialogComponent,
         LoginComponent,
-        ChangeSecretDialogComponent
+        ChangeSecretDialogComponent,
+        IdentitiesOverviewComponent
     ],
     imports: [
         FormsModule,

diff --git a/...nUi/src/AdminUi/ClientApp/src/app/components/client/client-edit/client-edit.component.css b/...nUi/src/AdminUi/ClientApp/src/app/components/client/client-edit/client-edit.component.css
@@ -79,6 +79,33 @@
     color: #fff;
 }
 
+.client-accordion {
+    margin: 0px 0px 0px 5px !important;
+}
+
+.details-expansion-panel-header {
+    background: #17428d !important;
+}
+
+.details-expansion-panel-header:hover {
+    background: #11337a !important;
+}
+.details-expansion-panel-header.mat-expansion-panel-header.mat-expanded {
+    border-radius: 4px 4px 0px 0px;
+}
+
+.details-panel-header-title {
+    color: white !important;
+}
+
+.details-panel-header-desc {
+    color: rgba(255, 255, 255, 0.54) !important;
+}
+
+:host ::ng-deep .details-expansion-panel-header > .mat-expansion-indicator::after {
+    color: white !important;
+}
+
 .auto-height {
     height: auto;
 }
diff --git a/...Ui/src/AdminUi/ClientApp/src/app/components/client/client-edit/client-edit.component.html b/...Ui/src/AdminUi/ClientApp/src/app/components/client/client-edit/client-edit.component.html
@@ -78,6 +78,19 @@ <h2 class="header-title">{{ editMode ? headerEdit : headerCreate }}</h2>
             </div>
         </mat-card-content>
     </mat-card>
+    <mat-accordion *ngIf="editMode" class="client-accordion">
+        <mat-expansion-panel class="details-expansion-panel" [expanded]="true">
+            <mat-expansion-panel-header class="details-expansion-panel-header">
+                <mat-panel-title class="details-panel-header-title">
+                    {{ headerIdentities }}
+                </mat-panel-title>
+                <mat-panel-description class="details-panel-header-desc">
+                    {{ headerIdentitiesDescription }}
+                </mat-panel-description>
+            </mat-expansion-panel-header>
+            <app-identities-overview [clientId]="clientId"></app-identities-overview>
+        </mat-expansion-panel>
+    </mat-accordion>
     <div class="action-buttons">
         <button *ngIf="editMode" mat-raised-button color="primary" (click)="updateClient()" [disabled]="!canSaveClient() || disabled">Save</button>
         <button *ngIf="!editMode" mat-raised-button color="primary" (click)="createClient()" [disabled]="!canSaveClient() || disabled">Save</button>

diff --git a/AdminUi/src/AdminUi/ClientApp/src/app/components/client/client-edit/client-edit.component.ts b/AdminUi/src/AdminUi/ClientApp/src/app/components/client/client-edit/client-edit.component.ts
@@ -14,8 +14,13 @@ import { PagedHttpResponseEnvelope } from "src/app/utils/paged-http-response-env
 export class ClientEditComponent {
     public headerEdit: string;
     public headerCreate: string;
+
     public headerDescriptionEdit: string;
     public headerDescriptionCreate: string;
+
+    public headerIdentities: string;
+    public headerIdentitiesDescription: string;
+
     public showPassword: boolean;
     public clientId?: string;
     public editMode: boolean;
@@ -35,6 +40,8 @@ export class ClientEditComponent {
         this.headerEdit = "Edit Client";
         this.headerDescriptionCreate = "Please fill the form below to create your Client";
         this.headerDescriptionEdit = "Perform your desired changes and save to edit your Client";
+        this.headerIdentities = "Identities";
+        this.headerIdentitiesDescription = "View and manage Identities created by this Client.";
         this.editMode = false;
         this.loading = true;
         this.disabled = false;

diff --git a/...Ui/ClientApp/src/app/components/quotas/identity/identity-list/identity-list.component.css b/...Ui/ClientApp/src/app/components/quotas/identity/identity-list/identity-list.component.css
@@ -1,72 +1,8 @@
-.mat-column-address,
-.mat-column-address-filter,
-.mat-column-clientId,
-.mat-column-publicKey {
-    width: 25%;
-    word-break: break-all;
-}
-
-.mat-column-createdAt,
-.mat-column-created-at-filter,
-.mat-column-last-login-filter,
-.mat-column-lastLoginAt {
-    max-width: 330px;
-}
-
-.mat-column-tier-filter,
-.mat-column-tierName,
-.mat-column-createdWithClient,
-.mat-column-client-filter {
-    max-width: 230px;
-}
-
-.mat-column-number-of-devices-filter,
-.mat-column-numberOfDevices,
-.mat-column-identity-version-filter,
-.mat-column-identityVersion,
-.mat-column-datawallet-version-filter,
-.mat-column-datawalletVersion {
-    max-width: 200px;
-}
-
 .disabled-container {
     pointer-events: none;
     opacity: 0.4;
 }
 
-.inline-action-buttons ::ng-deep .mat-mdc-form-field-icon-suffix {
-    display: inherit;
-}
-
-.mat-column-address {
-    width: 26.5em;
-}
-
-.tier-navigation {
-    text-decoration: underline;
-    color: blue;
-}
-
-.loading {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    z-index: 999;
-    position: absolute;
-    margin-top: -60px;
-    width: 100%;
-    height: 100%;
-}
-
-.no-data {
-    padding: 25px;
-}
-
-.mat-mdc-row:hover {
-    background-color: #ddd !important;
-    cursor: pointer;
-}
-
 .card-header {
     border-radius: 3px;
     padding: 15px;
@@ -76,62 +12,10 @@
     margin: 15px 15px -50px 15px;
 }
 
-.filter-cell {
-    display: flex;
-    justify-content: space-between;
-}
-
 .header-description {
     color: #fff;
 }
 
 .header-title {
     color: #fff;
 }
-
-.action-buttons {
-    margin-top: 50px;
-    display: flex;
-    justify-content: flex-end;
-}
-
-@media screen and (max-width: 960px) {
-    .card-header {
-        margin: 15px 15px -20px 15px;
-    }
-
-    .mat-mdc-table .mat-mdc-header-row {
-        display: none;
-    }
-
-    .mat-mdc-table .mat-mdc-row {
-        display: flex;
-        flex-wrap: wrap;
-        height: auto;
-        border-bottom: 1px solid #ddd;
-    }
-
-    .mat-mdc-table .mat-mdc-cell {
-        width: 100%;
-        border-bottom: 0px solid #ddd;
-        font-size: 1em;
-        min-height: 30px;
-        margin-bottom: 4%;
-        word-break: break-all;
-        white-space: pre-wrap;
-    }
-
-    .mat-mdc-table .mat-mdc-cell:before {
-        content: attr(data-label) ":";
-        float: left;
-        font-weight: 500;
-    }
-
-    .mat-mdc-table .mat-mdc-cell:first-child {
-        margin-top: 25px;
-    }
-
-    .mat-mdc-table .mat-mdc-row:last-child {
-        border-bottom: 0px;
-    }
-}