From 11405f561fd13f09b1e4fd2edacb412ca193c1e8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A9lix=20Malfait?= <felix.malfait@gmail.com>
Date: Sun, 16 Jul 2023 19:03:19 +0200
Subject: [PATCH] Bug fix: avatar of account owner not displayed (#690)

* Begin - fix account owner not displayed

* Finish - profile pic of account owner not displayed
---
 front/src/generated/graphql.tsx                          | 9 ++++++---
 .../companies/components/CompanyAccountOwnerCell.tsx     | 3 ++-
 .../companies/components/CompanyAccountOwnerPicker.tsx   | 1 +
 .../components/CompanyAccountOwnerEditableField.tsx      | 3 ++-
 front/src/modules/companies/queries/select.ts            | 1 +
 front/src/modules/companies/queries/show.ts              | 1 +
 .../table/components/EditableCompanyAccountOwnerCell.tsx | 1 +
 front/src/modules/search/services/search.ts              | 1 +
 front/src/modules/users/components/Avatar.tsx            | 4 +++-
 .../modules/users/utils/getProfilePictureAbsoluteURI.ts  | 4 ++++
 front/src/testing/mock-data/companies.ts                 | 8 +++++++-
 front/src/testing/mock-data/pipeline-progress.ts         | 8 +++++++-
 12 files changed, 36 insertions(+), 8 deletions(-)

diff --git a/front/src/generated/graphql.tsx b/front/src/generated/graphql.tsx
index 09bcfd8a9..9c6451258 100644
--- a/front/src/generated/graphql.tsx
+++ b/front/src/generated/graphql.tsx
@@ -3504,14 +3504,14 @@ export type GetCompaniesQueryVariables = Exact<{
 }>;
 
 
-export type GetCompaniesQuery = { __typename?: 'Query', companies: Array<{ __typename?: 'Company', id: string, domainName: string, name: string, createdAt: string, address: string, employees?: number | null, _commentThreadCount: number, accountOwner?: { __typename?: 'User', id: string, email: string, displayName: string, firstName?: string | null, lastName?: string | null } | null }> };
+export type GetCompaniesQuery = { __typename?: 'Query', companies: Array<{ __typename?: 'Company', id: string, domainName: string, name: string, createdAt: string, address: string, employees?: number | null, _commentThreadCount: number, accountOwner?: { __typename?: 'User', id: string, email: string, displayName: string, firstName?: string | null, lastName?: string | null, avatarUrl?: string | null } | null }> };
 
 export type GetCompanyQueryVariables = Exact<{
   id: Scalars['String'];
 }>;
 
 
-export type GetCompanyQuery = { __typename?: 'Query', findUniqueCompany: { __typename?: 'Company', id: string, domainName: string, name: string, createdAt: string, address: string, employees?: number | null, _commentThreadCount: number, accountOwner?: { __typename?: 'User', id: string, email: string, displayName: string } | null } };
+export type GetCompanyQuery = { __typename?: 'Query', findUniqueCompany: { __typename?: 'Company', id: string, domainName: string, name: string, createdAt: string, address: string, employees?: number | null, _commentThreadCount: number, accountOwner?: { __typename?: 'User', id: string, email: string, displayName: string, avatarUrl?: string | null } | null } };
 
 export type UpdateCompanyMutationVariables = Exact<{
   id?: InputMaybe<Scalars['String']>;
@@ -3717,7 +3717,7 @@ export type SearchUserQueryVariables = Exact<{
 }>;
 
 
-export type SearchUserQuery = { __typename?: 'Query', searchResults: Array<{ __typename?: 'User', id: string, email: string, displayName: string, firstName?: string | null, lastName?: string | null }> };
+export type SearchUserQuery = { __typename?: 'Query', searchResults: Array<{ __typename?: 'User', id: string, email: string, displayName: string, firstName?: string | null, lastName?: string | null, avatarUrl?: string | null }> };
 
 export type EmptyQueryQueryVariables = Exact<{ [key: string]: never; }>;
 
@@ -4513,6 +4513,7 @@ export const GetCompaniesDocument = gql`
       displayName
       firstName
       lastName
+      avatarUrl
     }
   }
 }
@@ -4560,6 +4561,7 @@ export const GetCompanyDocument = gql`
       id
       email
       displayName
+      avatarUrl
     }
   }
 }
@@ -5534,6 +5536,7 @@ export const SearchUserDocument = gql`
     displayName
     firstName
     lastName
+    avatarUrl
   }
 }
     `;
diff --git a/front/src/modules/companies/components/CompanyAccountOwnerCell.tsx b/front/src/modules/companies/components/CompanyAccountOwnerCell.tsx
index 6c37a62bc..1972bbe72 100644
--- a/front/src/modules/companies/components/CompanyAccountOwnerCell.tsx
+++ b/front/src/modules/companies/components/CompanyAccountOwnerCell.tsx
@@ -7,7 +7,7 @@ import { Company, User } from '~/generated/graphql';
 import { CompanyAccountOwnerPicker } from './CompanyAccountOwnerPicker';
 
 export type CompanyAccountOnwer = Pick<Company, 'id'> & {
-  accountOwner?: Pick<User, 'id' | 'displayName'> | null;
+  accountOwner?: Pick<User, 'id' | 'displayName' | 'avatarUrl'> | null;
 };
 
 export type OwnProps = {
@@ -40,6 +40,7 @@ export function CompanyAccountOwnerCell({ company }: OwnProps) {
           <PersonChip
             id={company.accountOwner.id}
             name={company.accountOwner?.displayName ?? ''}
+            picture={company.accountOwner?.avatarUrl ?? ''}
           />
         ) : (
           <></>
diff --git a/front/src/modules/companies/components/CompanyAccountOwnerPicker.tsx b/front/src/modules/companies/components/CompanyAccountOwnerPicker.tsx
index 071503689..42b69cf27 100644
--- a/front/src/modules/companies/components/CompanyAccountOwnerPicker.tsx
+++ b/front/src/modules/companies/components/CompanyAccountOwnerPicker.tsx
@@ -42,6 +42,7 @@ export function CompanyAccountOwnerPicker({
       id: user.id,
       name: user.displayName,
       avatarType: 'rounded',
+      avatarUrl: user.avatarUrl ?? '',
     }),
     orderByField: 'firstName',
     searchOnFields: ['firstName', 'lastName'],
diff --git a/front/src/modules/companies/fields/components/CompanyAccountOwnerEditableField.tsx b/front/src/modules/companies/fields/components/CompanyAccountOwnerEditableField.tsx
index 79f76f8cc..ff93deab7 100644
--- a/front/src/modules/companies/fields/components/CompanyAccountOwnerEditableField.tsx
+++ b/front/src/modules/companies/fields/components/CompanyAccountOwnerEditableField.tsx
@@ -12,7 +12,7 @@ import { CompanyAccountOwnerPickerFieldEditMode } from './CompanyAccountOwnerPic
 
 type OwnProps = {
   company: Pick<Company, 'id' | 'accountOwnerId'> & {
-    accountOwner?: Pick<User, 'id' | 'displayName'> | null;
+    accountOwner?: Pick<User, 'id' | 'displayName' | 'avatarUrl'> | null;
   };
 };
 
@@ -41,6 +41,7 @@ export function CompanyAccountOwnerEditableField({ company }: OwnProps) {
               <PersonChip
                 id={company.accountOwner.id}
                 name={company.accountOwner?.displayName ?? ''}
+                picture={company.accountOwner?.avatarUrl ?? ''}
               />
             ) : (
               <></>
diff --git a/front/src/modules/companies/queries/select.ts b/front/src/modules/companies/queries/select.ts
index 71c916e50..1d2f4f06f 100644
--- a/front/src/modules/companies/queries/select.ts
+++ b/front/src/modules/companies/queries/select.ts
@@ -34,6 +34,7 @@ export const GET_COMPANIES = gql`
         displayName
         firstName
         lastName
+        avatarUrl
       }
     }
   }
diff --git a/front/src/modules/companies/queries/show.ts b/front/src/modules/companies/queries/show.ts
index da4db603f..57f610c90 100644
--- a/front/src/modules/companies/queries/show.ts
+++ b/front/src/modules/companies/queries/show.ts
@@ -16,6 +16,7 @@ export const GET_COMPANY = gql`
         id
         email
         displayName
+        avatarUrl
       }
     }
   }
diff --git a/front/src/modules/companies/table/components/EditableCompanyAccountOwnerCell.tsx b/front/src/modules/companies/table/components/EditableCompanyAccountOwnerCell.tsx
index b4adc8c7d..25f3654df 100644
--- a/front/src/modules/companies/table/components/EditableCompanyAccountOwnerCell.tsx
+++ b/front/src/modules/companies/table/components/EditableCompanyAccountOwnerCell.tsx
@@ -16,6 +16,7 @@ export function EditableCompanyAccountOwnerCell() {
       company={{
         id: currentRowEntityId ?? '',
         accountOwner: {
+          avatarUrl: accountOwner?.avatarUrl ?? '',
           displayName: accountOwner?.displayName ?? '',
           id: accountOwner?.id ?? '',
         },
diff --git a/front/src/modules/search/services/search.ts b/front/src/modules/search/services/search.ts
index 6f5c59c3f..558b7c3e8 100644
--- a/front/src/modules/search/services/search.ts
+++ b/front/src/modules/search/services/search.ts
@@ -38,6 +38,7 @@ export const SEARCH_USER_QUERY = gql`
       displayName
       firstName
       lastName
+      avatarUrl
     }
   }
 `;
diff --git a/front/src/modules/users/components/Avatar.tsx b/front/src/modules/users/components/Avatar.tsx
index 99b170404..a368308fb 100644
--- a/front/src/modules/users/components/Avatar.tsx
+++ b/front/src/modules/users/components/Avatar.tsx
@@ -3,6 +3,8 @@ import styled from '@emotion/styled';
 import { stringToHslColor } from '@/utils/string-to-hsl';
 import { isNonEmptyString } from '@/utils/type-guards/isNonEmptyString';
 
+import { getImageAbsoluteURIOrBase64 } from '../utils/getProfilePictureAbsoluteURI';
+
 export type AvatarType = 'squared' | 'rounded';
 
 type OwnProps = {
@@ -44,7 +46,7 @@ export function Avatar({
 
   return (
     <StyledAvatar
-      avatarUrl={avatarUrl}
+      avatarUrl={getImageAbsoluteURIOrBase64(avatarUrl)}
       placeholder={placeholder}
       size={size}
       type={type}
diff --git a/front/src/modules/users/utils/getProfilePictureAbsoluteURI.ts b/front/src/modules/users/utils/getProfilePictureAbsoluteURI.ts
index 0a8da6b3f..0ebf7bb76 100644
--- a/front/src/modules/users/utils/getProfilePictureAbsoluteURI.ts
+++ b/front/src/modules/users/utils/getProfilePictureAbsoluteURI.ts
@@ -7,5 +7,9 @@ export function getImageAbsoluteURIOrBase64(imageUrl?: string | null) {
     return imageUrl;
   }
 
+  if (imageUrl?.startsWith('https:')) {
+    return imageUrl;
+  }
+
   return `${process.env.REACT_APP_FILES_URL}/${imageUrl}`;
 }
diff --git a/front/src/testing/mock-data/companies.ts b/front/src/testing/mock-data/companies.ts
index 2a8cb16ec..cf784baea 100644
--- a/front/src/testing/mock-data/companies.ts
+++ b/front/src/testing/mock-data/companies.ts
@@ -13,7 +13,13 @@ type MockedCompany = Pick<
 > & {
   accountOwner: Pick<
     User,
-    'id' | 'email' | 'displayName' | '__typename' | 'firstName' | 'lastName'
+    | 'id'
+    | 'email'
+    | 'displayName'
+    | 'avatarUrl'
+    | '__typename'
+    | 'firstName'
+    | 'lastName'
   > | null;
 };
 
diff --git a/front/src/testing/mock-data/pipeline-progress.ts b/front/src/testing/mock-data/pipeline-progress.ts
index 5ea09e9c0..f0f2cd0c8 100644
--- a/front/src/testing/mock-data/pipeline-progress.ts
+++ b/front/src/testing/mock-data/pipeline-progress.ts
@@ -6,7 +6,13 @@ type MockedPipelineProgress = Pick<
 > & {
   accountOwner: Pick<
     User,
-    'id' | 'email' | 'displayName' | '__typename' | 'firstName' | 'lastName'
+    | 'id'
+    | 'email'
+    | 'displayName'
+    | 'avatarUrl'
+    | '__typename'
+    | 'firstName'
+    | 'lastName'
   > | null;
 };