Get "manager email" from Google API

client/src/app/give-feedback/give-feedback/give-feedback.component.html

@@ -39,7 +39,11 @@ <h1 class="gbl-page-title">
 </h1>
 
 <form [formGroup]="form" [appConfirmBeforeSubmit]="onSubmit.bind(this)" appConfirmBeforeSubmitConfig="sendFeedback">
-  <app-autocomplete-email [email]="form.controls.receiverEmail" class="gbl-form-field" />
+  <app-autocomplete-email
+    [email]="form.controls.receiverEmail"
+    [showManagerEmail]="form.controls.shared.value"
+    class="gbl-form-field"
+  />
 
   <app-give-feedback-details
     [context]="form.controls.context"

client/src/app/shared/autocomplete-email/autocomplete-email/autocomplete-email.component.html

@@ -18,13 +18,17 @@
   <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
     @for (result of queryResults$ | async; track result.email) {
       <mat-option [value]="result.email" (onSelectionChange)="selectEmail(result.email)">
-        <div class="my-2 flex gap-3">
+        <div class="my-2 flex items-center gap-3">
           <app-avatar [photoUrl]="result.photoUrl" [name]="result.displayName" />
 
           <div>
             {{ result.displayName }}
 
-            <div class="text-sm opacity-70">{{ result.email }}</div>
+            <div class="gbl-body-medium" style="color: var(--mat-sys-secondary)">{{ result.email }}</div>
+
+            @if (result.managerEmail && showManagerEmail()) {
+              <div class="gbl-body-small" style="color: var(--mat-sys-outline)">Manager: {{ result.managerEmail }}</div>
+            }
           </div>
         </div>
       </mat-option>

client/src/app/shared/autocomplete-email/autocomplete-email/autocomplete-email.component.ts

@@ -29,6 +29,8 @@ import { ValidationErrorMessagePipe } from '../../validation/validation-error-me
 export class AutocompleteEmailComponent {
   forManager = input(false, { transform: booleanAttribute });
 
+  showManagerEmail = input(false, { transform: booleanAttribute });
+
   private allowedEmailDomainsValidator = allowedEmailDomainsValidatorFactory(inject(ALLOWED_EMAIL_DOMAINS));
 
   email = input(

client/src/app/shared/autocomplete-email/multi-autocomplete-email/multi-autocomplete-email.component.html

@@ -25,13 +25,19 @@
     <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
       @for (result of queryResults$ | async; track result.email) {
         <mat-option [value]="result.email" (onSelectionChange)="add(result.email)">
-          <div class="my-2 flex gap-3">
+          <div class="my-2 flex items-center gap-3">
             <app-avatar [photoUrl]="result.photoUrl" [name]="result.displayName" />
 
             <div>
               {{ result.displayName }}
 
-              <div class="text-sm opacity-70">{{ result.email }}</div>
+              <div class="gbl-body-medium" style="color: var(--mat-sys-secondary)">{{ result.email }}</div>
+
+              @if (result.managerEmail && showManagerEmail()) {
+                <div class="gbl-body-small" style="color: var(--mat-sys-outline)">
+                  Manager: {{ result.managerEmail }}
+                </div>
+              }
             </div>
           </div>
         </mat-option>

client/src/app/shared/autocomplete-email/multi-autocomplete-email/multi-autocomplete-email.component.ts

@@ -1,6 +1,15 @@
 import { COMMA } from '@angular/cdk/keycodes';
 import { AsyncPipe } from '@angular/common';
-import { Component, DestroyRef, ViewEncapsulation, afterNextRender, inject, input, viewChild } from '@angular/core';
+import {
+  Component,
+  DestroyRef,
+  ViewEncapsulation,
+  afterNextRender,
+  booleanAttribute,
+  inject,
+  input,
+  viewChild,
+} from '@angular/core';
 import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
 import { MatAutocomplete, MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatChipEditedEvent, MatChipInput, MatChipsModule } from '@angular/material/chips';
@@ -55,6 +64,8 @@ export class MultiAutocompleteEmailComponent {
 
   isInvalidEmail = input<((email: string) => boolean) | undefined>(undefined);
 
+  showManagerEmail = input(false, { transform: booleanAttribute });
+
   matChipInput = viewChild.required(MatChipInput);
 
   matAutocomplete = viewChild.required(MatAutocomplete);

client/src/app/shared/people/people.types.ts

@@ -2,4 +2,5 @@ export type Person = {
   email: string;
   displayName?: string;
   photoUrl?: string;
+  managerEmail?: string;
 };

server/src/core/google-apis/google-apis.service.ts

@@ -4,6 +4,7 @@ import { ConfigService } from '@nestjs/config';
 import { AppConfig } from '../config';
 import { JWT_SCOPES, JWT_SUBJECT } from './google-apis.config';
 import { Person } from './google-apis.types';
+import { mapGoogleUserRelationsToZenikaManagerEmail } from './google-apis.utils';
 
 @Injectable()
 export class GoogleApisService {
@@ -30,7 +31,7 @@ export class GoogleApisService {
 
       const { data } = await admin('directory_v1').users.list({
         access_token: accessToken,
-        fields: 'users(primaryEmail, name, thumbnailPhotoUrl), nextPageToken',
+        fields: 'users(primaryEmail, name, thumbnailPhotoUrl, relations), nextPageToken',
         viewType: 'domain_public',
         domain: 'zenika.com',
         pageToken,
@@ -47,6 +48,7 @@ export class GoogleApisService {
             email: user.primaryEmail,
             displayName: user.name?.fullName ?? undefined,
             photoUrl: user.thumbnailPhotoUrl ?? undefined,
+            managerEmail: mapGoogleUserRelationsToZenikaManagerEmail(user.relations),
           });
         }
         return _persons;

server/src/core/google-apis/google-apis.types.ts

@@ -2,4 +2,5 @@ export type Person = {
   email: string;
   displayName?: string;
   photoUrl?: string;
+  managerEmail?: string;
 };

server/src/core/google-apis/google-apis.utils.ts

@@ -0,0 +1,23 @@
+/**
+ * Inside Zenika's organization, the `Schema$User['relations']` Google API field, follows a particular interface.
+ *
+ * import type { admin_directory_v1 } from '@googleapis/admin';
+ *
+ *    `admin_directory_v1.Schema$User['relations']`
+ * is equal to:
+ *    `{ type: 'manager'; value: string }[]`
+ */
+
+type ManagerRelation = {
+  type: 'manager';
+  /**
+   * The manager email.
+   */
+  value: string;
+};
+
+const isManagerRelation = (relation: unknown): relation is ManagerRelation =>
+  Object.prototype.toString.call(relation) === '[object Object]' && (relation as ManagerRelation).type === 'manager';
+
+export const mapGoogleUserRelationsToZenikaManagerEmail = (relations: unknown) =>
+  Array.isArray(relations) ? relations.find(isManagerRelation)?.value : undefined;

server/src/people/people-cache.utils.ts

@@ -43,5 +43,8 @@ export const searchPersons = (query: string, searchablePersons: SearchablePerson
         searchTokens.some((searchToken) => searchToken.startsWith(querySearchToken)),
       ),
     )
-    .map(({ email, displayName, photoUrl }) => ({ email, displayName, photoUrl }));
+    .map((searchablePerson) => {
+      const { searchTokens, ...person } = searchablePerson; // eslint-disable-line @typescript-eslint/no-unused-vars
+      return person;
+    });
 };