feat: console descriptions (#7552)

* org page descriptions * feat(console): describe options * docs: fix bullet * lint * refactor: cleanup unused translations * translate * translate * translate * members * add links * translate * remove scripts * lint * remove node-jq * fix styles * Update console/src/assets/i18n/it.json Co-authored-by: Max Peintner <[email protected]> * Update console/src/assets/i18n/it.json Co-authored-by: Max Peintner <[email protected]> * Update console/src/assets/i18n/it.json Co-authored-by: Max Peintner <[email protected]> --------- Co-authored-by: peintnermax <[email protected]>
2026-11-07 06:42:15 +00:00 · 2024-03-13 14:53:48 +00:00
parent 1db10a4286
commit 6a1b708ff8
65 changed files with 4995 additions and 1427 deletions
@@ -1,24 +1,32 @@
 <div class="max-width-container">
  <div class="enlarged-container actions-enlarged-container">
-    <h1>{{ 'FLOWS.TITLE' | translate }}</h1>
-    <p class="desc cnsl-secondary-text">{{ 'FLOWS.DESCRIPTION' | translate }}</p>
+    <div class="actions-title-row">
+      <h1>{{ 'DESCRIPTIONS.ACTIONS.TITLE' | translate }}</h1>
+      <a mat-icon-button href="https://zitadel.com/docs/concepts/features/actions" rel="noreferrer" target="_blank">
+        <mat-icon class="icon">info_outline</mat-icon>
+      </a>
+    </div>
+    <p class="desc cnsl-secondary-text">{{ 'DESCRIPTIONS.ACTIONS.DESCRIPTION' | translate }}</p>

    <cnsl-info-section class="max-actions" *ngIf="maxActions"
      >{{ 'FLOWS.ACTIONSMAX' | translate: { value: maxActions } }}
    </cnsl-info-section>

    <ng-template cnslHasRole [hasRole]="['org.action.read']">
-      <cnsl-card title="{{ 'FLOWS.ACTIONSTITLE' | translate }}" description="{{ 'FLOWS.ACTIONSDESCRIPTION' | translate }}">
+      <cnsl-card
+        title="{{ 'DESCRIPTIONS.ACTIONS.SCRIPTS.TITLE' | translate }}"
+        description="{{ 'DESCRIPTIONS.ACTIONS.SCRIPTS.DESCRIPTION' | translate }}"
+      >
        <cnsl-action-table (changedSelection)="selection = $event"></cnsl-action-table>
      </cnsl-card>
    </ng-template>

    <div class="title-section">
-      <h2>{{ 'FLOWS.FLOWSTITLE' | translate }}</h2>
+      <h2>{{ 'DESCRIPTIONS.ACTIONS.FLOWS.TITLE' | translate }}</h2>
      <i class="las la-exchange-alt"></i>
    </div>

-    <p class="desc cnsl-secondary-text">{{ 'FLOWS.FLOWSDESCRIPTION' | translate }}</p>
+    <p class="desc cnsl-secondary-text">{{ 'DESCRIPTIONS.ACTIONS.FLOWS.DESCRIPTION' | translate }}</p>

    <ng-template cnslHasRole [hasRole]="['org.flow.read']">
      <div class="actions-flow">
@@ -1,3 +1,20 @@
+.actions-title-row {
+  display: flex;
+  align-items: center;
+
+  h1 {
+    margin: 0;
+  }
+
+  a {
+    .icon {
+      font-size: 1.2rem;
+      height: 1.2rem;
+      width: 1.2rem;
+    }
+  }
+}
+
@mixin actions-theme($theme) {
  $foreground: map-get($theme, foreground);
  $background: map-get($theme, background);
@@ -1,7 +1,12 @@
 <div class="max-width-container">
  <div class="enlarged-container">
-    <h1>{{ 'GRANTS.TITLE' | translate }}</h1>
-    <p class="grants-desc cnsl-secondary-text">{{ 'GRANTS.DESC' | translate }}</p>
+    <div class="grants-title-row">
+      <h1>{{ 'DESCRIPTIONS.AUTHORIZATIONS.TITLE' | translate }}</h1>
+      <a mat-icon-button href="https://zitadel.com/docs/concepts/structure/managers" rel="noreferrer" target="_blank">
+        <mat-icon class="icon">info_outline</mat-icon>
+      </a>
+    </div>
+    <p class="sub cnsl-secondary-text max-width-description">{{ 'DESCRIPTIONS.AUTHORIZATIONS.DESCRIPTION' | translate }}</p>
    <cnsl-user-grants
      *ngIf="grantContext === UserGrantContext.NONE"
      [displayedColumns]="[
@@ -1,8 +1,71 @@
-h1 {
-  margin: 0;
+.grants-title-row {
+  display: flex;
+  align-items: center;
+
+  h1 {
+    margin: 0;
+  }
+
+  a {
+    .icon {
+      font-size: 1.2rem;
+      height: 1.2rem;
+      width: 1.2rem;
+    }
+  }
 }

-.grants-desc {
-  margin-bottom: 1rem;
+.sub {
+  margin-bottom: 1.5rem;
  font-size: 14px;
 }
+
+@mixin grants-theme($theme) {
+  $foreground: map-get($theme, foreground);
+
+  .grants-title-row a {
+    color: map-get($foreground, text);
+  }
+
+  .grants-controls {
+    display: flex;
+    align-items: center;
+    padding-bottom: 1rem;
+    border-bottom: 1px solid map-get($foreground, dividers);
+
+    .grants-toggle-group {
+      display: flex;
+
+      .toggle-row {
+        display: flex;
+        align-items: center;
+
+        i {
+          margin-right: 0.5rem;
+        }
+
+        .info-i {
+          font-size: 1.2rem;
+          margin-left: 0.5rem;
+          margin-right: 0;
+        }
+
+        .current-dot {
+          height: 8px;
+          width: 8px;
+          border-radius: 50%;
+          background-color: rgb(84, 142, 230);
+          margin-left: 0.5rem;
+        }
+      }
+    }
+
+    .fill-space {
+      flex: 1;
+    }
+
+    .grid-btn {
+      margin-right: 0.5rem;
+    }
+  }
+}
@@ -7,9 +7,20 @@ import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.mod

 import { GrantsRoutingModule } from './grants-routing.module';
 import { GrantsComponent } from './grants.component';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';

@NgModule({
  declarations: [GrantsComponent],
-  imports: [CommonModule, GrantsRoutingModule, UserGrantsModule, TranslateModule, HasRoleModule, HasRolePipeModule],
+  imports: [
+    CommonModule,
+    GrantsRoutingModule,
+    UserGrantsModule,
+    TranslateModule,
+    HasRoleModule,
+    HasRolePipeModule,
+    MatButtonModule,
+    MatIconModule,
+  ],
 })
 export default class GrantsModule {}
@@ -17,27 +17,6 @@
    <h2 class="desc">{{ 'ONBOARDING.MOREDESCRIPTION' | translate }}</h2>

    <div class="home-grid-container">
-      <a href="https://zitadel.com/docs" target="_blank" rel="noreferrer" class="grid-item">
-        <div
-          class="icon-wrapper"
-          [ngStyle]="{
-            background: (themeService.isDarkTheme | async) ? bluedark + 50 : bluelight + 50
-          }"
-        >
-          <div
-            class="inner"
-            [ngStyle]="{
-              background: (themeService.isDarkTheme | async) ? bluedark : bluelight,
-              color: (themeService.isDarkTheme | async) ? bluelight : bluedark
-            }"
-          >
-            <i class="las la-file-alt"></i>
-          </div>
-        </div>
-
-        <span>{{ 'HOME.DOCUMENTATION.TITLE' | translate }}</span>
-      </a>
-
      <a href="https://zitadel.com/docs/guides/start/quickstart" target="_blank" rel="noreferrer" class="grid-item">
        <div
          class="icon-wrapper"
@@ -55,9 +34,37 @@
            <i class="las la-play"></i>
          </div>
        </div>
-        <span>{{ 'HOME.GETSTARTED.TITLE' | translate }}</span>
+        <div class="text-block">
+          <span>{{ 'DESCRIPTIONS.HOME.MORE_SHORTCUTS.GET_STARTED.TITLE' | translate }}</span>
+          <div class="more-shortcuts-description">
+            <p class="cnsl-secondary-text">{{ 'DESCRIPTIONS.HOME.MORE_SHORTCUTS.GET_STARTED.DESCRIPTION' | translate }}</p>
+          </div>
+        </div>
+      </a>
+      <a href="https://zitadel.com/docs" target="_blank" rel="noreferrer" class="grid-item">
+        <div
+          class="icon-wrapper"
+          [ngStyle]="{
+            background: (themeService.isDarkTheme | async) ? bluedark + 50 : bluelight + 50
+          }"
+        >
+          <div
+            class="inner"
+            [ngStyle]="{
+              background: (themeService.isDarkTheme | async) ? bluedark : bluelight,
+              color: (themeService.isDarkTheme | async) ? bluelight : bluedark
+            }"
+          >
+            <i class="las la-file-alt"></i>
+          </div>
+        </div>
+        <div class="text-block">
+          <span>{{ 'DESCRIPTIONS.HOME.MORE_SHORTCUTS.DOCS.TITLE' | translate }}</span>
+          <div class="more-shortcuts-description">
+            <p class="cnsl-secondary-text">{{ 'DESCRIPTIONS.HOME.MORE_SHORTCUTS.DOCS.DESCRIPTION' | translate }}</p>
+          </div>
+        </div>
      </a>
-
      <a href="https://zitadel.com/docs/sdk-examples/introduction" target="_blank" rel="noreferrer" class="grid-item">
        <div
          class="icon-wrapper"
@@ -75,7 +82,12 @@
            <i class="las la-play"></i>
          </div>
        </div>
-        <span>{{ 'HOME.QUICKSTARTS.TITLE' | translate }}</span>
+        <div class="text-block">
+          <span>{{ 'DESCRIPTIONS.HOME.MORE_SHORTCUTS.EXAMPLES.TITLE' | translate }}</span>
+          <div class="more-shortcuts-description">
+            <p class="cnsl-secondary-text">{{ 'DESCRIPTIONS.HOME.MORE_SHORTCUTS.EXAMPLES.DESCRIPTION' | translate }}</p>
+          </div>
+        </div>
      </a>
    </div>
  </div>
@@ -63,7 +63,7 @@
        padding: 1rem;
        display: flex;
        flex-direction: row;
-        align-items: center;
+        align-items: flex-start;
        box-sizing: border-box;
        font-size: 14px;
        background-color: $card-background-color;
@@ -128,6 +128,7 @@
          border-radius: 50vw;
          flex-shrink: 0;
          margin-right: 1rem;
+          align-self: center;

          .inner {
            border-radius: 50vw;
@@ -1,7 +1,7 @@
 <cnsl-top-view
  [hasBackButton]="false"
-  title="{{ 'IAM.TITLE' | translate }}"
-  sub="{{ 'IAM.DESCRIPTION' | translate }}"
+  title="{{ 'DESCRIPTIONS.SETTINGS.INSTANCE.TITLE' | translate }}"
+  sub="{{ 'DESCRIPTIONS.SETTINGS.INSTANCE.DESCRIPTION' | translate }}"
  [isActive]="instance?.state === State.STATE_RUNNING"
  [isInactive]="instance?.state === State.STATE_STOPPED || instance?.state === State.STATE_STOPPING"
  [hasContributors]="true"
@@ -2,9 +2,9 @@
  <div class="settings-top-view">
    <div>
      <div class="settings-title-row">
-        <h1>{{ 'SETTINGS.ORG.TITLE' | translate }}</h1>
+        <h1>{{ 'DESCRIPTIONS.SETTINGS.ORG.TITLE' | translate }}</h1>
      </div>
-      <p class="desc cnsl-secondary-text">{{ 'SETTINGS.ORG.DESCRIPTION' | translate }}</p>
+      <p class="desc cnsl-secondary-text">{{ 'DESCRIPTIONS.SETTINGS.ORG.DESCRIPTION' | translate }}</p>
    </div>
    <span class="fill-space"></span>
  </div>
@@ -56,6 +56,7 @@
    </ng-container>

    <cnsl-metadata
+      [description]="'DESCRIPTIONS.ORG.METADATA' | translate"
      [metadata]="metadata"
      [disabled]="(['org.write'] | hasRole | async) === false"
      (editClicked)="editMetadata()"
@@ -1,36 +1,44 @@
 <div class="max-width-container">
  <div class="enlarged-container">
    <div class="project-title-row">
-      <h1>{{ 'PROJECT.PAGES.LIST' | translate }}</h1>
-      <a mat-icon-button href="https://zitadel.com/docs/guides/manage/console/projects" rel="noreferrer" target="_blank">
+      <h1>{{ 'DESCRIPTIONS.PROJECTS.TITLE' | translate }}</h1>
+      <a mat-icon-button href="https://zitadel.com/docs/concepts/structure/projects" rel="noreferrer" target="_blank">
        <mat-icon class="icon">info_outline</mat-icon>
      </a>
    </div>
-    <p class="sub cnsl-secondary-text max-width-description">{{ 'PROJECT.PAGES.LISTDESCRIPTION' | translate }}</p>
-
+    <p
+      class="sub cnsl-secondary-text max-width-description"
+      [innerHTML]="'DESCRIPTIONS.PROJECTS.DESCRIPTION' | translate"
+    ></p>
    <div class="projects-controls">
      <div class="project-toggle-group">
        <cnsl-nav-toggle
-          label="{{ 'PROJECT.PAGES.TYPE.OWNED' | translate }}"
+          label="{{ 'DESCRIPTIONS.PROJECTS.OWNED.TITLE' | translate }}"
          [count]="mgmtService.ownedProjectsCount | async"
          (clicked)="setType(ProjectType.PROJECTTYPE_OWNED)"
          [active]="(projectType$ | async) === ProjectType.PROJECTTYPE_OWNED"
        ></cnsl-nav-toggle>
        <cnsl-nav-toggle
-          label="{{ 'PROJECT.PAGES.TYPE.GRANTED' | translate }}"
+          label="{{ 'DESCRIPTIONS.PROJECTS.GRANTED.TITLE' | translate }}"
          [count]="mgmtService.grantedProjectsCount | async"
          (clicked)="setType(ProjectType.PROJECTTYPE_GRANTED)"
          [active]="(projectType$ | async) === ProjectType.PROJECTTYPE_GRANTED"
        ></cnsl-nav-toggle>
      </div>
-
      <span class="fill-space"></span>
      <button class="grid-btn" (click)="grid = !grid" mat-icon-button data-e2e="toggle-grid">
        <i *ngIf="grid" class="show list view las la-th-list"></i>
        <i *ngIf="!grid" class="las la-border-all"></i>
      </button>
    </div>
-
+    <p class="sub cnsl-secondary-text max-width-description">
+      {{
+        ((projectType$ | async) === ProjectType.PROJECTTYPE_OWNED
+          ? 'DESCRIPTIONS.PROJECTS.OWNED.DESCRIPTION'
+          : 'DESCRIPTIONS.PROJECTS.GRANTED.DESCRIPTION'
+        ) | translate
+      }}
+    </p>
    <cnsl-project-grid
      *ngIf="grid"
      [projectType$]="projectType$"
@@ -157,6 +157,7 @@
      <ng-container *ngIf="currentSetting === 'metadata'">
        <cnsl-metadata
          [metadata]="metadata"
+          [description]="'DESCRIPTIONS.USERS.SELF.METADATA' | translate"
          [disabled]="(['user.write:' + user.id, 'user.write'] | hasRole | async) === false"
          *ngIf="user && user.id"
          (editClicked)="editMetadata()"
@@ -243,6 +243,9 @@
        <ng-container *ngIf="currentSetting && currentSetting === 'metadata'">
          <cnsl-metadata
            [metadata]="metadata"
+            [description]="
+              (user.machine ? 'DESCRIPTIONS.USERS.MACHINES.METADATA' : 'DESCRIPTIONS.USERS.HUMANS.METADATA') | translate
+            "
            [disabled]="(['user.write:' + user.id, 'user.write'] | hasRole | async) === false"
            *ngIf="user && user.id"
            (editClicked)="editMetadata()"
@@ -1,14 +1,13 @@
 <div class="max-width-container">
  <div class="enlarged-container" [ngSwitch]="type">
+    <div class="users-title-row">
+      <h1>{{ 'DESCRIPTIONS.USERS.TITLE' | translate }}</h1>
+      <a mat-icon-button href="https://zitadel.com/docs/concepts/structure/users" rel="noreferrer" target="_blank">
+        <mat-icon class="icon">info_outline</mat-icon>
+      </a>
+    </div>
+    <p class="user-list-sub cnsl-secondary-text">{{ 'DESCRIPTIONS.USERS.DESCRIPTION' | translate }}</p>
    <ng-container *ngSwitchCase="Type.TYPE_HUMAN">
-      <div class="users-title-row">
-        <h1>{{ 'USER.PAGES.LIST' | translate }}</h1>
-        <a mat-icon-button href="https://zitadel.com/docs/concepts/structure/users" rel="noreferrer" target="_blank">
-          <mat-icon class="icon">info_outline</mat-icon>
-        </a>
-      </div>
-      <p class="user-list-sub cnsl-secondary-text">{{ 'USER.PAGES.DESCRIPTION' | translate }}</p>
-
      <cnsl-user-table
        [type]="Type.TYPE_HUMAN"
        [canWrite$]="['user.write$'] | hasRole"
@@ -16,11 +15,7 @@
      >
      </cnsl-user-table>
    </ng-container>
-
    <ng-container *ngSwitchCase="Type.TYPE_MACHINE">
-      <h1>{{ 'USER.PAGES.LISTMACHINE' | translate }}</h1>
-      <p class="user-list-sub cnsl-secondary-text">{{ 'USER.PAGES.DESCRIPTIONMACHINE' | translate }}</p>
-
      <cnsl-user-table
        [type]="Type.TYPE_MACHINE"
        [canWrite$]="['user.write$'] | hasRole"
@@ -10,19 +10,24 @@
 >
  <div leftActions class="user-toggle-group">
    <cnsl-nav-toggle
-      label="{{ 'USER.TABLE.TYPES.HUMAN' | translate }}"
+      label="{{ 'DESCRIPTIONS.USERS.HUMANS.TITLE' | translate }}"
      (clicked)="setType(Type.TYPE_HUMAN)"
      [active]="type === Type.TYPE_HUMAN"
      data-e2e="list-humans"
    ></cnsl-nav-toggle>
    <cnsl-nav-toggle
-      label="{{ 'USER.TABLE.TYPES.MACHINE' | translate }}"
+      label="{{ 'DESCRIPTIONS.USERS.MACHINES.TITLE' | translate }}"
      (clicked)="setType(Type.TYPE_MACHINE)"
      [active]="type === Type.TYPE_MACHINE"
      data-e2e="list-machines"
    ></cnsl-nav-toggle>
  </div>
-
+  <p class="user-sub cnsl-secondary-text">
+    {{
+      (type === Type.TYPE_HUMAN ? 'DESCRIPTIONS.USERS.HUMANS.DESCRIPTION' : 'DESCRIPTIONS.USERS.MACHINES.DESCRIPTION')
+        | translate
+    }}
+  </p>
  <ng-template cnslHasRole [hasRole]="['user.write']" actions>
    <button
      (click)="deactivateSelectedUsers()"
@@ -9,6 +9,11 @@
  }
 }

+.user-sub {
+  margin-bottom: 1.5rem;
+  font-size: 14px;
+}
+
 .user-tr-actions {
  width: 42px;
 }