fix(console): add resource id to meta layout, error highlighting formfield label, missing tooltips, cleanup app detail (#1025)

* add resource id to meta layout, tooltips

* input label disable prop, app detail info

* lint

console/src/app/app.component.html

@@ -134,7 +134,8 @@
                             </ng-template>
 
                             <ng-template appHasRole [appHasRole]="['user.grant.read(:[0-9]*)?']">
-                                <a @navitem class="nav-item" [routerLinkActive]="['active']" [routerLink]="[ '/grants']"
+                                <a @navitem matTooltip="{{'MENU.TOOLTIP.AUTHZ' | translate}}" class="nav-item"
+                                    [routerLinkActive]="['active']" [routerLink]="[ '/grants']"
                                     [routerLinkActiveOptions]="{ exact: true }">
                                     <i class="icon las la-shield-alt"></i>
                                     <span class="label">{{ 'MENU.GRANTS' | translate }}</span>

console/src/app/app.component.scss

@@ -36,6 +36,10 @@
 
   .doc-link {
     margin-right: 1rem;
+
+    @media only screen and (max-width: 500px) {
+      display: none;
+    }
   }
 
   .icon-container {

console/src/app/modules/accounts-card/accounts-card.component.scss

@@ -56,7 +56,7 @@
 
       &:hover {
         cursor: pointer;
-        background-color: #ffffff10;
+        background-color: #00000010;
       }
 
       .small-avatar {

console/src/app/modules/contributors/contributors.component.html

@@ -30,7 +30,7 @@
                 </div>
             </ng-template>
             <button class="add-img" (click)="emitAddMember()" [disabled]="disabled" mat-icon-button
-                aria-label="Edit contributors">
+                matTooltip="{{'ACTIONS.ADD' | translate}}" aria-label="Edit contributors">
                 <mat-icon>add</mat-icon>
             </button>
             <span class="fill-space"></span>

console/src/app/modules/form-field/form-field.component.ts

@@ -45,7 +45,10 @@ class CnslFormFieldBase {
         '[class.ng-valid]': '_shouldForward("valid")',
         '[class.ng-invalid]': '_shouldForward("invalid")',
         '[class.ng-pending]': '_shouldForward("pending")',
-        // '[class.cnsl-form-field-invalid]': '_control.errorState',
+        '[class.cnsl-form-field-disabled]': '_control.disabled',
+        '[class.cnsl-form-field-autofilled]': '_control.autofilled',
+        '[class.cnsl-focused]': '_control.focused',
+        '[class.cnsl-form-field-invalid]': '_control.errorState',
     },
     encapsulation: ViewEncapsulation.None,
     changeDetection: ChangeDetectionStrategy.OnPush,

console/src/app/modules/info-section/info-section.component.html

@@ -0,0 +1,6 @@
+<div class="info-section-row">
+    <i class="icon las la-info"></i>
+    <div class="info-section-content">
+        <ng-content></ng-content>
+    </div>
+</div>

console/src/app/modules/info-section/info-section.component.scss

@@ -0,0 +1,30 @@
+@import '~@angular/material/theming';
+
+@mixin info-section-theme($theme) {
+  $primary: map-get($theme, primary);
+  $primary-color: mat-color($primary, 500);
+  $is-dark-theme: map-get($theme, is-dark);
+
+  .info-section-row {
+    display: flex;
+    background-color: if($is-dark-theme, #ffffff13, #f3f3f3);
+    border-radius: 4px;
+    padding: .5rem 0;
+    padding-right: 1rem;
+    color: if($is-dark-theme, #d6d6d6, #3c4257);
+    font-size: 14px;
+
+    .icon {
+      margin-right: 1rem;
+      height: 1.2rem;
+      line-height: 1.2rem;
+      font-size: 1.2rem;
+      margin-left: .5rem;
+      color: $primary-color;
+    }
+
+    .info-section-content {
+      flex: 1;
+    }
+  }
+}

console/src/app/modules/info-section/info-section.component.spec.ts

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

console/src/app/modules/info-section/info-section.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'cnsl-info-section',
+    templateUrl: './info-section.component.html',
+    styleUrls: ['./info-section.component.scss'],
+})
+export class InfoSectionComponent { }

console/src/app/modules/info-section/info-section.module.ts

@@ -0,0 +1,17 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import { InfoSectionComponent } from './info-section.component';
+
+
+
+@NgModule({
+    declarations: [InfoSectionComponent],
+    imports: [
+        CommonModule,
+    ],
+    exports: [
+        InfoSectionComponent,
+    ],
+})
+export class InfoSectionModule { }

console/src/app/modules/label/label.component.scss

@@ -5,12 +5,27 @@
   $primary: map-get($theme, primary);
   $primary-color: mat-color($primary, 500);
   $is-dark-theme: map-get($theme, is-dark);
+  $warn: map-get($theme, warn);
+  $warn-color: mat-color($warn, 500);
 
   .cnsl-label {
     display: block;
     font-size: 12px;
     color: if($is-dark-theme, var(--grey), var(--grey));
+    transition: color .2s ease;
     margin-bottom: 4px;
     font-weight: 400;
   }
+
+  .cnsl-form-field-disabled {
+    .cnsl-label {
+      color: if($is-dark-theme, #ffffff80, #00000061);
+    }
+  }
+
+  .cnsl-form-field-invalid {
+    .cnsl-label {
+      color: $warn-color;
+    }
+  }
 }

console/src/app/modules/meta-layout/meta.scss

@@ -0,0 +1,57 @@
+
+@import '~@angular/material/theming';
+
+@mixin meta-theme($theme) {
+  .meta-details {
+    margin-bottom: 1rem;
+    border-bottom: 1px solid #81868a40;
+    padding-bottom: 1rem;
+
+    .meta-row {
+      display: flex;
+      margin-bottom: .5rem;
+      align-items: center;
+
+      .first {
+        flex: 1;
+        font-size: 13px;
+        margin-right: .5rem;
+      }
+
+      .fill-space {
+        flex: 1;
+      }
+
+      .second {
+        font-size: 13px;
+      }
+
+      .state {
+        border-radius: 50vw;
+        padding: 2px .5rem;
+        letter-spacing: .05em;
+        font-size: 13px;
+        background-color: #8795a120;
+
+        &.active {
+          background-color: #85d996;
+          color: black;
+        }
+
+        &.inactive {
+          background-color: #ff8981;
+          color: black;
+        }
+      }
+    }
+  }
+
+  .mat-tab-label {
+    min-width: 100px !important;
+  }
+
+  .meta-flex-col {
+    display: flex;
+    flex-direction: column;
+  }
+}

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

@@ -6,7 +6,7 @@
         <app-policy-grid [type]="PolicyGridType.IAM"></app-policy-grid>
     </div>
 
-    <div class="side" metainfo>
+    <div metainfo>
         <app-contributors [totalResult]="totalMemberResult" [loading]="loading$ | async"
             [membersSubject]="membersSubject" title="{{ 'PROJECT.MEMBER.TITLE' | translate }}"
             description="{{ 'PROJECT.MEMBER.TITLEDESC' | translate }}" (addClicked)="openAddMember()"

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

@@ -6,11 +6,3 @@
   color: var(--grey);
   margin-bottom: 2rem;
 }
-
-.side {
-  .details {
-    margin-bottom: 1rem;
-    border-bottom: 1px solid #81868a40;
-    padding-bottom: 1rem;
-  }
-}

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

@@ -34,12 +34,16 @@
     </div>
 
     <div class="side" metainfo>
-        <div class="details">
+        <div class="meta-details">
-            <div class="row">
+            <div class="meta-row">
+                <span class="first">{{'RESOURCEID' | translate}}:</span>
+                <span *ngIf="org?.id" class="second">{{ org.id }}</span>
+            </div>
+            <div class="meta-row">
                 <span class="first">{{'ORG.PAGES.PRIMARYDOMAIN'  | translate}}</span>
                 <span class="second"><span style="display: block;">{{primaryDomain}}</span></span>
             </div>
-            <div class="row">
+            <div class="meta-row">
                 <span class="first">{{'ORG.PAGES.STATE'  | translate}}</span>
                 <span *ngIf="org && org.state !== undefined"
                     class="second">{{'ORG.STATE.'+org.state | translate}}</span>
@@ -54,7 +58,7 @@
                     (showDetailClicked)="showDetail()" (refreshClicked)="loadMembers()" [disabled]="false">
                 </app-contributors>
             </mat-tab>
-            <mat-tab label="{{ 'CHANGES.ORG.TITLE' | translate }}" class="flex-col">
+            <mat-tab label="{{ 'CHANGES.ORG.TITLE' | translate }}" class="meta-flex-col">
                 <app-changes *ngIf="org" [changeType]="ChangeType.ORG" [id]="org.id"></app-changes>
             </mat-tab>
         </mat-tab-group>

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

@@ -63,31 +63,3 @@
   font-size: 14px;
   color: #818a8a;
 }
-
-.side {
-  .details {
-    margin-bottom: 1rem;
-    border-bottom: 1px solid #81868a40;
-    padding-bottom: 1rem;
-
-    .row {
-      display: flex;
-      margin-bottom: .5rem;
-      align-items: center;
-
-      .first {
-        flex: 1;
-        font-size: .8rem;
-        margin-right: .5rem;
-      }
-
-      .second {
-        font-size: .8rem;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        margin-left: 1rem;
-        text-align: right;
-      }
-    }
-  }
-}

console/src/app/pages/projects/apps/app-detail/app-detail.component.html

@@ -14,7 +14,7 @@
 
         <app-card title="{{ 'APP.PAGES.DETAIL.TITLE' | translate }}" *ngIf="app">
             <form [formGroup]="appNameForm" (ngSubmit)="saveApp()">
-                <div class="content">
+                <div class="name-content">
                     <mat-button-toggle-group formControlName="state" class="toggle" (change)="changeState($event)">
                         <mat-button-toggle [value]="AppState.APPSTATE_INACTIVE"
                             matTooltip="{{ 'ACTIONS.DEACTIVATE' | translate}}">
@@ -26,18 +26,18 @@
                         </mat-button-toggle>
                     </mat-button-toggle-group>
 
-                    <cnsl-form-field class="formfield">
+                    <cnsl-form-field class="name-field">
                         <cnsl-label>{{ 'APP.NAME' | translate }}</cnsl-label>
                         <input cnslInput formControlName="name" />
                     </cnsl-form-field>
 
-                    <p class="docs-line" *ngIf="docs?.discoveryEndpoint">Discovery Endpoint: {{docs.discoveryEndpoint}}
+                    <cnsl-info-section class="docs-line" *ngIf="docs?.discoveryEndpoint">
-                    </p>
+                        <p><strong>Discovery Endpoint:</strong> {{docs.discoveryEndpoint}}</p>
-                    <p class="docs-line" *ngIf="docs?.issuer">Issuer: {{docs.issuer}}</p>
+                        <p><strong>Issuer:</strong> {{docs.issuer}}</p>
+                    </cnsl-info-section>
                 </div>
                 <div class="btn-container">
-                    <button class="submit-button" type="submit" color="primary"
+                    <button type="submit" color="primary" [disabled]="appNameForm.invalid || name?.disabled"
-                        [disabled]="appNameForm.invalid || name?.disabled"
                         mat-raised-button>{{ 'ACTIONS.SAVE' | translate }}</button>
                 </div>
             </form>
@@ -50,9 +50,12 @@
             </div>
 
             <div class="compliance">
-                <p class="problem" *ngFor="let problem of app.oidcConfig.complianceProblemsList">
+                <cnsl-info-section class="problem">
-                    {{problem.localizedMessage}}
+                    <ul style="margin: 0;">
-                </p>
+                        <li style="margin: 0 0 .5rem 0;" *ngFor="let problem of app.oidcConfig.complianceProblemsList">
+                            {{problem.localizedMessage}}</li>
+                    </ul>
+                </cnsl-info-section>
             </div>
             <form *ngIf="appForm" [formGroup]="appForm" (ngSubmit)="saveOIDCApp()">
                 <div class="content">
@@ -113,10 +116,16 @@
                     <mat-checkbox *ngIf="accessTokenType?.value === OIDCTokenType.OIDCTOKENTYPE_JWT" class="full-width"
                         formControlName="accessTokenRoleAssertion" color="primary">
                         {{'APP.OIDC.ACCESSTOKENROLEASSERTION' | translate}}</mat-checkbox>
-                    <p class="full-width desc">{{'APP.OIDC.ACCESSTOKENROLEASSERTION_DESCRIPTION' | translate}}</p>
+
-                    <mat-checkbox class="full-width" formControlName="idTokenRoleAssertion" color="primary">
+                    <cnsl-info-section class="full-width desc">
+                        <span>{{'APP.OIDC.ACCESSTOKENROLEASSERTION_DESCRIPTION' | translate}}</span>
+                    </cnsl-info-section>
+                    <mat-checkbox class="full-width" style="margin-bottom: .5rem" formControlName="idTokenRoleAssertion"
+                        color="primary">
                         {{'APP.OIDC.IDTOKENROLEASSERTION' | translate}}</mat-checkbox>
-                    <p class="full-width desc">{{'APP.OIDC.IDTOKENROLEASSERTION_DESCRIPTION' | translate}}</p>
+                    <cnsl-info-section class="full-width desc">
+                        <span>{{'APP.OIDC.IDTOKENROLEASSERTION_DESCRIPTION' | translate}}</span>
+                    </cnsl-info-section>
 
                     <div class="divider"></div>
 
@@ -126,10 +135,15 @@
                         {{ 'APP.OIDC.DEVMODE' | translate }}
                     </mat-slide-toggle>
 
-                    <p class="step-description" style="margin-bottom: 2rem;">{{'APP.OIDC.DEVMODEDESC' | translate}}</p>
+                    <cnsl-info-section class="step-description">
-                    <p class="step-description"
+                        <span style="margin-bottom: 2rem;">{{'APP.OIDC.DEVMODEDESC' | translate}}</span>
+                    </cnsl-info-section>
+
+                    <cnsl-info-section class="step-description"
                         *ngIf="applicationType?.value == OIDCApplicationType.OIDCAPPLICATIONTYPE_NATIVE">
-                        {{'APP.OIDC.REDIRECTDESCRIPTIONNATIVE' | translate}}</p>
+                        <span>{{'APP.OIDC.REDIRECTDESCRIPTIONNATIVE' | translate}}</span>
+                    </cnsl-info-section>
+
                     <p class="step-description"
                         *ngIf="applicationType?.value == OIDCApplicationType.OIDCAPPLICATIONTYPE_WEB || applicationType?.value == OIDCApplicationType.OIDCAPPLICATIONTYPE_USER_AGENT">
                         {{'APP.OIDC.REDIRECTDESCRIPTIONWEB' | translate}}</p>
@@ -141,7 +155,8 @@
                             <input #redInput cnslInput placeholder="{{'APP.OIDC.COMMAORENTERSEPERATION' | translate}}"
                                 [formControl]="redirectControl">
                         </cnsl-form-field>
-                        <button matTooltip="{{'ACTIONS.ADD' | translate}}" type="submit" mat-icon-button>
+                        <button matTooltip="{{'ACTIONS.ADD' | translate}}" type="submit" mat-icon-button
+                            [disabled]="redirectControl.invalid || !canWrite">
                             <mat-icon>add</mat-icon>
                         </button>
                     </form>
@@ -164,7 +179,8 @@
                             <input #postInput cnslInput placeholder="{{'APP.OIDC.COMMAORENTERSEPERATION' | translate}}"
                                 [formControl]="postRedirectControl">
                         </cnsl-form-field>
-                        <button matTooltip="{{'ACTIONS.ADD' | translate}}" type="submit" mat-icon-button>
+                        <button matTooltip="{{'ACTIONS.ADD' | translate}}" type="submit" mat-icon-button
+                            [disabled]="postRedirectControl.invalid || !canWrite">
                             <mat-icon>add</mat-icon>
                         </button>
                     </form>
@@ -193,8 +209,12 @@
     </div>
 
     <div class="side" metainfo>
-        <div class="details">
+        <div class="meta-details">
-            <div class="row">
+            <div class="meta-row">
+                <span class="first">{{'RESOURCEID' | translate}}:</span>
+                <span *ngIf="app?.id" class="second">{{ app.id }}</span>
+            </div>
+            <div class="meta-row">
                 <span class="first">{{'PROJECT.STATE.TITLE' | translate}}:</span>
                 <span *ngIf="app && app.state !== undefined"
                     [ngClass]="{'active': app.state === AppState.APPSTATE_ACTIVE, 'inactive': app.state === AppState.APPSTATE_INACTIVE}"

console/src/app/pages/projects/apps/app-detail/app-detail.component.scss

@@ -37,6 +37,46 @@
   font-size: 14px;
 }
 
+.name-content {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+
+  .toggle {
+    outline: none;
+    align-self: flex-start;
+    margin-top: 1rem;
+    margin-right: 1rem;
+    border-radius: .5rem;
+
+    * {
+      outline: none;
+    }
+
+    i {
+      margin-right: 1rem;
+    }
+  }
+
+  .name-field {
+    flex: 1;
+  }
+}
+
+.docs-line {
+  flex-basis: 100%;
+  margin: .5rem 0;
+
+  p {
+    margin: 0;
+    margin-bottom: .5rem;
+  }
+
+  p:last-child {
+    margin: 0;
+  }
+}
+
 .content {
   display: flex;
   flex-direction: row;
@@ -91,6 +131,7 @@
   .desc {
     color: var(--grey);
     font-size: 14px;
+    margin-bottom: 1rem;
   }
 
   .devmode {
@@ -110,39 +151,12 @@
     color: #f44336;
     margin: 0 .5rem 1.5rem .5rem;
   }
-
-  .docs-line {
-    flex-basis: 100%;
-    font-size: 14px;
-    color: var(--grey);
-    margin-top: 0;
-  }
-
-  .toggle {
-    outline: none;
-    align-self: flex-start;
-    margin-top: 1rem;
-    margin-right: 1rem;
-    border-radius: .5rem;
-
-    * {
-      outline: none;
-    }
-
-    i {
-      margin-right: 1rem;
-    }
-  }
 }
 
 .btn-container {
   display: flex;
   justify-content: flex-end;
-  margin: 0 -.5rem;
+  margin-top: 1rem;
-
-  .submit-button {
-    margin: 0 .5rem;
-  }
 }
 
 .chip {
@@ -158,56 +172,5 @@
   flex-basis: 100%;
   margin: 1.5rem .5rem;
   height: 1px;
-  background-color: var(--grey);
+  background-color: rgba(#8795a1, .2);
-}
-
-.side {
-  .details {
-    margin-bottom: 1rem;
-    border-bottom: 1px solid #81868a40;
-    padding-bottom: 1rem;
-
-    .row {
-      display: flex;
-      margin-bottom: .5rem;
-      align-items: center;
-
-      .first {
-        flex: 1;
-        font-size: 13px;
-        margin-right: .5rem;
-      }
-
-      .fill-space {
-        flex: 1;
-      }
-
-      .state {
-        border-radius: 50vw;
-        padding: 2px .5rem;
-        letter-spacing: .05em;
-        font-size: 13px;
-        background-color: #8795a120;
-
-        &.active {
-          background-color: #85d996;
-          color: black;
-        }
-
-        &.inactive {
-          background-color: #ff8981;
-          color: black;
-        }
-      }
-    }
-  }
-
-  .mat-tab-label {
-    min-width: 100px !important;
-  }
-
-  .flex-col {
-    display: flex;
-    flex-direction: column;
-  }
 }

console/src/app/pages/projects/apps/apps.module.ts

@@ -20,6 +20,7 @@ import { CopyToClipboardModule } from 'src/app/directives/copy-to-clipboard/copy
 import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
 import { CardModule } from 'src/app/modules/card/card.module';
 import { ChangesModule } from 'src/app/modules/changes/changes.module';
+import { InfoSectionModule } from 'src/app/modules/info-section/info-section.module';
 import { InputModule } from 'src/app/modules/input/input.module';
 import { MetaLayoutModule } from 'src/app/modules/meta-layout/meta-layout.module';
 
@@ -61,6 +62,7 @@ import { AppsRoutingModule } from './apps-routing.module';
         InputModule,
         MetaLayoutModule,
         ChangesModule,
+        InfoSectionModule,
     ],
     exports: [TranslateModule],
 })

console/src/app/pages/projects/granted-projects/granted-project-detail/granted-project-detail.component.html

@@ -26,8 +26,12 @@
         </ng-template>
     </div>
     <div class="side" metainfo>
-        <div class="details">
+        <div class="meta-details">
-            <div class="row">
+            <div class="meta-row">
+                <span class="first">{{'RESOURCEID' | translate}}:</span>
+                <span *ngIf="projectId" class="second">{{ projectId }}</span>
+            </div>
+            <div class="meta-row">
                 <span class="first">{{'PROJECT.STATE.TITLE' | translate}}:</span>
                 <span *ngIf="project && project.state !== undefined" class="state"
                     [ngClass]="{'active': project.state === ProjectState.PROJECTSTATE_ACTIVE, 'inactive': project.state === ProjectState.PROJECTSTATE_INACTIVE}">{{'PROJECT.STATE.'+project.state | translate}}</span>
@@ -43,7 +47,7 @@
                     [disabled]="(['project.member.write$', 'project.member.write:'+ project.projectId]| hasRole | async) == false">
                 </app-contributors>
             </mat-tab>
-            <mat-tab label="{{ 'CHANGES.PROJECT.TITLE' | translate }}" class="flex-col">
+            <mat-tab label="{{ 'CHANGES.PROJECT.TITLE' | translate }}" class="meta-flex-col">
                 <app-changes *ngIf="project" [changeType]="ChangeType.PROJECT" [id]="project.projectId"></app-changes>
             </mat-tab>
         </mat-tab-group>

console/src/app/pages/projects/granted-projects/granted-project-detail/granted-project-detail.component.scss

@@ -39,54 +39,3 @@
   font-size: .9rem;
   color: var(--grey);
 }
-
-.side {
-  .details {
-    margin-bottom: 1rem;
-    border-bottom: 1px solid #81868a40;
-    padding-bottom: 1rem;
-
-    .row {
-      display: flex;
-      margin-bottom: .5rem;
-      align-items: center;
-
-      .first {
-        flex: 1;
-        font-size: 13px;
-        margin-right: .5rem;
-      }
-
-      .fill-space {
-        flex: 1;
-      }
-
-      .state {
-        border-radius: 50vw;
-        padding: 2px .5rem;
-        letter-spacing: .05em;
-        font-size: 11px;
-        background-color: #8795a120;
-
-        &.active {
-          background-color: #85d996;
-          color: black;
-        }
-
-        &.inactive {
-          background-color: #ff8981;
-          color: black;
-        }
-      }
-    }
-  }
-
-  .mat-tab-label {
-    min-width: 100px !important;
-  }
-
-  .flex-col {
-    display: flex;
-    flex-direction: column;
-  }
-}

console/src/app/pages/projects/owned-projects/owned-project-detail/owned-project-detail.component.html

@@ -110,8 +110,12 @@
         </ng-container>
     </div>
     <div class="side" metainfo>
-        <div class="details">
+        <div class="meta-details">
-            <div class="row">
+            <div class="meta-row">
+                <span class="first">{{'RESOURCEID' | translate}}:</span>
+                <span *ngIf="projectId" class="second">{{ projectId }}</span>
+            </div>
+            <div class="meta-row">
                 <span class="first">{{'PROJECT.STATE.TITLE' | translate}}:</span>
                 <span *ngIf="project && project.state !== undefined" class="state"
                     [ngClass]="{'active': project.state === ProjectState.PROJECTSTATE_ACTIVE, 'inactive': project.state === ProjectState.PROJECTSTATE_INACTIVE}">{{'PROJECT.STATE.'+project.state | translate}}</span>
@@ -127,7 +131,7 @@
                     [disabled]="(['project.member.write$', 'project.member.write:'+ project.projectId]| hasRole | async) == false">
                 </app-contributors>
             </mat-tab>
-            <mat-tab label="{{ 'CHANGES.PROJECT.TITLE' | translate }}" class="flex-col">
+            <mat-tab label="{{ 'CHANGES.PROJECT.TITLE' | translate }}" class="meta-flex-col">
                 <app-changes *ngIf="project" [changeType]="ChangeType.PROJECT" [id]="project.projectId"></app-changes>
             </mat-tab>
         </mat-tab-group>

console/src/app/pages/projects/owned-projects/owned-project-detail/owned-project-detail.component.scss

@@ -54,53 +54,6 @@
   align-items: center;
 }
 
-.side {
-  .details {
-    margin-bottom: 1rem;
-    border-bottom: 1px solid #81868a40;
-    padding-bottom: 1rem;
-
-    .row {
-      display: flex;
-      margin-bottom: .5rem;
-      align-items: center;
-
-      .first {
-        flex: 1;
-        font-size: 13px;
-        margin-right: .5rem;
-      }
-
-      .state {
-        border-radius: 50vw;
-        padding: 2px .5rem;
-        letter-spacing: .05em;
-        font-size: 11px;
-        background-color: #8795a120;
-
-        &.active {
-          background-color: #85d996;
-          color: black;
-        }
-
-        &.inactive {
-          background-color: #ff8981;
-          color: black;
-        }
-      }
-    }
-  }
-
-  .mat-tab-label {
-    min-width: 100px !important;
-  }
-
-  .flex-col {
-    display: flex;
-    flex-direction: column;
-  }
-}
-
 .desc {
   color: var(--grey);
   font-size: 14px;

console/src/app/pages/projects/owned-projects/owned-project-list/owned-project-list.component.html

@@ -66,8 +66,9 @@
                 <ng-container matColumnDef="actions" stickyEnd>
                     <th mat-header-cell *matHeaderCellDef></th>
                     <td mat-cell *matCellDef="let project">
-                        <button *ngIf="project.projectId !== zitadelProjectId" color="warn" mat-icon-button
+                        <button class="dlt-button" *ngIf="project.projectId !== zitadelProjectId" color="warn"
-                            matTooltip="{{'ACTIONS.DELETE' | translate}}" (click)="deleteProject(project.projectId)">
+                            mat-icon-button matTooltip="{{'ACTIONS.DELETE' | translate}}"
+                            (click)="deleteProject(project.projectId)">
                             <i class="las la-trash"></i>
                         </button>
                     </td>

console/src/app/pages/projects/owned-projects/owned-project-list/owned-project-list.component.scss

@@ -45,4 +45,14 @@ h1 {
 
 tr {
   outline: none;
+
+  .dlt-button {
+    visibility: hidden;
+  }
+
+  &:hover {
+    .dlt-button {
+      visibility: visible;
+    }
+  }
 }

console/src/app/pages/users/user-detail/auth-user-detail/auth-user-detail.component.html

@@ -40,7 +40,7 @@
 
         <app-card *ngIf="user" title="{{ 'USER.LOGINMETHODS.TITLE' | translate }}"
             description="{{ 'USER.LOGINMETHODS.DESCRIPTION' | translate }}">
-            <button card-actions mat-icon-button (click)="refreshUser()">
+            <button card-actions mat-icon-button (click)="refreshUser()" matTooltip="{{'ACTIONS.REFRESH' | translate}}">
                 <mat-icon>refresh</mat-icon>
             </button>
             <app-contact *ngIf="user?.human" [human]="user.human" [state]="user.state" canWrite="true"
@@ -64,8 +64,12 @@
     </div>
 
     <div *ngIf="user" class="side" metainfo>
-        <div class="details">
+        <div class="meta-details">
-            <div class="row" *ngIf="user?.preferredLoginName">
+            <div class="meta-row">
+                <span class="first">{{'RESOURCEID' | translate}}:</span>
+                <span *ngIf="user?.id" class="second">{{ user.id }}</span>
+            </div>
+            <div class="meta-row" *ngIf="user?.preferredLoginName">
                 <span class="first">{{'USER.PREFERRED_LOGINNAME' | translate}}</span>
                 <span class="second"><span style="display: block;">{{user.preferredLoginName}}</span></span>
             </div>

console/src/app/pages/users/user-detail/auth-user-detail/auth-user-detail.component.scss

@@ -65,40 +65,6 @@
   }
 }
 
-.side {
-  .details {
-    margin-bottom: 1rem;
-    border-bottom: 1px solid #81868a40;
-    padding-bottom: 1rem;
-
-    .row {
-      display: flex;
-      margin-bottom: .5rem;
-      align-items: center;
-
-      .first {
-        flex: 1;
-        font-size: .8rem;
-        margin-right: .5rem;
-        white-space: nowrap;
-      }
-
-      .second {
-        font-size: .8rem;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        margin-left: 1rem;
-        text-align: right;
-      }
-    }
-
-    .changes {
-      flex: 1;
-      min-height: 0;
-    }
-  }
-}
-
 .resendemail {
   margin-right: 1rem;
 }

console/src/app/pages/users/user-detail/external-idps/external-idps.component.html

@@ -40,7 +40,7 @@
             <ng-container matColumnDef="actions" stickyEnd>
                 <th mat-header-cell *matHeaderCellDef></th>
                 <td mat-cell *matCellDef="let idp">
-                    <button mat-icon-button matTooltip="{{'ACTIONS.REMOVE' | translate}}"
+                    <button color="warn" mat-icon-button matTooltip="{{'ACTIONS.REMOVE' | translate}}"
                         (click)="removeExternalIdp(idp)">
                         <i class="las la-trash"></i>
                     </button>

console/src/app/pages/users/user-detail/memberships/memberships.component.html

@@ -30,7 +30,7 @@
                 </div>
             </ng-template>
             <button [disabled]="disabled" class="add-img" (click)="addMember()" mat-icon-button
-                aria-label="add membership">
+                matTooltip="{{'ACTIONS.ADD' | translate}}" aria-label="add membership">
                 <mat-icon>add</mat-icon>
             </button>
             <span class="fill-space"></span>

console/src/app/pages/users/user-detail/user-detail/user-detail.component.html

@@ -67,7 +67,7 @@
 
         <app-card *ngIf="user.human" title="{{ 'USER.LOGINMETHODS.TITLE' | translate }}"
             description="{{ 'USER.LOGINMETHODS.DESCRIPTION' | translate }}">
-            <button card-actions mat-icon-button (click)="refreshUser()">
+            <button card-actions mat-icon-button (click)="refreshUser()" matTooltip="{{'ACTIONS.REFRESH' | translate}}">
                 <mat-icon>refresh</mat-icon>
             </button>
             <app-contact disablePhoneCode="true"
@@ -97,12 +97,16 @@
     </div>
 
     <div *ngIf="user" class="side" metainfo>
-        <div class="details">
+        <div class="meta-details">
-            <div class="row" *ngIf="user?.preferredLoginName">
+            <div class="meta-row">
+                <span class="first">{{'RESOURCEID' | translate}}:</span>
+                <span *ngIf="user?.id" class="second">{{ user.id }}</span>
+            </div>
+            <div class="meta-row" *ngIf="user?.preferredLoginName">
                 <span class="first">{{'USER.PREFERRED_LOGINNAME' | translate}}</span>
                 <span class="second"><span style="display: block;">{{user.preferredLoginName}}</span></span>
             </div>
-            <div class="row">
+            <div class="meta-row">
                 <span class="first">{{'ORG.PAGES.STATE'  | translate}}</span>
                 <span *ngIf="user && user.state !== undefined" class="state"
                     [ngClass]="{'active': user.state === UserState.USERSTATE_ACTIVE, 'inactive': user.state === UserState.USERSTATE_INACTIVE}">{{'USER.DATA.STATE'+user.state | translate}}</span>

console/src/app/pages/users/user-detail/user-detail/user-detail.component.scss

@@ -29,51 +29,6 @@
 }
 
 .side {
-  .details {
-    margin-bottom: 1rem;
-    border-bottom: 1px solid #81868a40;
-    padding-bottom: 1rem;
-
-    .row {
-      display: flex;
-      margin-bottom: .5rem;
-      align-items: center;
-
-      .first {
-        flex: 1;
-        font-size: 13px;
-        margin-right: .5rem;
-        white-space: nowrap;
-      }
-
-      .second {
-        font-size: .13px;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        margin-left: 1rem;
-        text-align: right;
-      }
-
-      .state {
-        border-radius: 50vw;
-        padding: 2px .5rem;
-        letter-spacing: .05em;
-        font-size: 11px;
-        background-color: #8795a120;
-
-        &.active {
-          background-color: #85d996;
-          color: black;
-        }
-
-        &.inactive {
-          background-color: #ff8981;
-          color: black;
-        }
-      }
-    }
-  }
-
   .changes {
     flex: 1;
     min-height: 0;

console/src/assets/i18n/de.json

@@ -95,6 +95,7 @@
         "SEND":"Senden",
         "NEWVALUE":"Neuer Wert"
     },
+    "RESOURCEID":"Ressourcen-ID",
     "TABLE": {
         "NOROWS":"Keine Daten"
     },

console/src/assets/i18n/en.json

@@ -95,6 +95,7 @@
         "SEND":"Send",
         "NEWVALUE":"New Value"
     },
+    "RESOURCEID":"Resource Id",
     "TABLE": {
         "NOROWS":"No data"
     },

console/src/component-themes.scss

@@ -6,6 +6,7 @@
 @import './styles/sidenav-list';
 @import 'src/app/modules/avatar/avatar.component';
 @import 'src/app/modules/changes/changes.component';
+@import 'src/app/modules/info-section/info-section.component';
 @import 'src/app/modules/detail-layout/detail-layout.component';
 @import 'src/app/pages/projects/owned-projects/owned-project-detail/application-grid/application-grid.component';
 @import 'src/app/pages/users/user-detail/auth-user-detail/theme-setting/theme-card';
@@ -13,6 +14,7 @@
 @import 'src/app/app.component.scss';
 @import 'src/app/modules/form-field/form-field.component.scss';
 @import 'src/app/modules/label/label.component.scss';
+@import 'src/app/modules/meta-layout/meta.scss';
 
 @mixin component-themes($theme) {
   @include avatar-theme($theme);
@@ -30,4 +32,6 @@
   @include cnsl-label-theme($theme);
   @include cnsl-error-theme($theme);
   @include link-theme($theme);
+  @include meta-theme($theme);
+  @include info-section-theme($theme);
 }

console/src/styles/error.scss

@@ -11,9 +11,5 @@
     font-size: 12px;
     color: $warn-color;
     margin-bottom: 5px;
-
-    // &.block {
-    //   display: block;
-    // }
   }
 }

console/src/styles/input.scss

@@ -54,7 +54,11 @@
 
     &[disabled] {
         border-color: if($is-dark-theme,#36373850,#cccdce50);
-        cursor: not-allowed;
+        color: if($is-dark-theme, #ffffff80 ,#00000061);
+
+        &::placeholder {
+            color: if($is-dark-theme, #ffffff80 ,#00000061);
+        }
     }
   }