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

@@ -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
   }
 }
     `;

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 ?? ''}
           />
         ) : (
           <></>

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'],

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 ?? ''}
               />
             ) : (
               <></>

front/src/modules/companies/queries/select.ts

@@ -34,6 +34,7 @@ export const GET_COMPANIES = gql`
         displayName
         firstName
         lastName
+        avatarUrl
       }
     }
   }

front/src/modules/companies/queries/show.ts

@@ -16,6 +16,7 @@ export const GET_COMPANY = gql`
         id
         email
         displayName
+        avatarUrl
       }
     }
   }

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 ?? '',
         },

front/src/modules/search/services/search.ts

@@ -38,6 +38,7 @@ export const SEARCH_USER_QUERY = gql`
       displayName
       firstName
       lastName
+      avatarUrl
     }
   }
 `;

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}

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}`;
 }

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;
 };
 

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;
 };