Fix broken image urls in Settings > Profile and Invite To Workspace Email (#8942)

Fixes #8601

We had 3 implementations of getImageAbsoluteURI: in twenty-front, in
twenty-ui and in twenty-emails. I was able to remove the one in
twenty-front but I could not remove it from twenty-emails as this is a
standalone for now. The vision is to introduce shared utils in a
twenty-shared package

packages/twenty-ui/src/display/avatar/components/Avatar.tsx

@@ -9,7 +9,12 @@ import { AvatarSize } from '@ui/display/avatar/types/AvatarSize';
 import { AvatarType } from '@ui/display/avatar/types/AvatarType';
 import { IconComponent } from '@ui/display/icon/types/IconComponent';
 import { ThemeContext } from '@ui/theme';
-import { Nullable, getImageAbsoluteURI, stringToHslColor } from '@ui/utilities';
+import {
+  Nullable,
+  getImageAbsoluteURI,
+  isDefined,
+  stringToHslColor,
+} from '@ui/utilities';
 
 const StyledAvatar = styled.div<{
   size: AvatarSize;
@@ -82,7 +87,7 @@ export const Avatar = ({
   );
 
   const avatarImageURI = useMemo(
-    () => getImageAbsoluteURI(avatarUrl),
+    () => (isDefined(avatarUrl) ? getImageAbsoluteURI(avatarUrl) : null),
     [avatarUrl],
   );
 

packages/twenty-ui/src/display/icon/components/TablerIcons.ts

@@ -254,7 +254,7 @@ export {
   IconVideo,
   IconWand,
   IconWorld,
-  IconX
+  IconX,
 } from '@tabler/icons-react';
 
 export type { TablerIconsProps } from '@tabler/icons-react';

packages/twenty-ui/src/utilities/image/__tests__/getImageAbsoluteURI.test.ts

@@ -0,0 +1,21 @@
+import { getImageAbsoluteURI } from '../getImageAbsoluteURI';
+
+describe('getImageAbsoluteURI', () => {
+  it('should return absolute url if the imageUrl is an absolute url', () => {
+    const imageUrl = 'https://XXX';
+    const result = getImageAbsoluteURI(imageUrl);
+    expect(result).toBe(imageUrl);
+  });
+
+  it('should return absolute url if the imageUrl is an absolute unsecure url', () => {
+    const imageUrl = 'http://XXX';
+    const result = getImageAbsoluteURI(imageUrl);
+    expect(result).toBe(imageUrl);
+  });
+
+  it('should return fully formed url if imageUrl is a relative url', () => {
+    const imageUrl = 'XXX';
+    const result = getImageAbsoluteURI(imageUrl);
+    expect(result).toBe('http://localhost:3000/files/XXX');
+  });
+});

packages/twenty-ui/src/utilities/image/getImageAbsoluteURI.ts

@@ -1,15 +1,7 @@
 import { REACT_APP_SERVER_BASE_URL } from '@ui/utilities/config';
 
-// TODO: this is a code smell trying to guess whether it's a relative path or not
-// We should instead put the meaning onto our variables and parameters
-// imageUrl should be either imageAbsoluteURL or imageRelativeServerPath
-// But we need to refactor the chain of calls to this function
-export const getImageAbsoluteURI = (imageUrl?: string | null) => {
-  if (!imageUrl) {
-    return null;
-  }
-
-  if (imageUrl?.startsWith('http')) {
+export const getImageAbsoluteURI = (imageUrl: string) => {
+  if (imageUrl.startsWith('https:') || imageUrl.startsWith('http:')) {
     return imageUrl;
   }