Improve performance of demo workspace - Rename getImageAbsoluteURIOrBase64 function (#6282)

### Description

1. This PR is a continuation of a previous PR:
https://github.com/twentyhq/twenty/pull/6201#pullrequestreview-2175601222

2. One test case was removed here:
`packages/twenty-front/src/utils/image/__tests__/getImageAbsoluteURI.test.ts`
because since we are not handling base64 images anymore, the result is
the same of the last test case. Would you rather we update the test
instead?


### Refs

- #3514
- https://github.com/twentyhq/twenty/pull/6201

### Demo


https://www.loom.com/share/4f32b535c77a4d418e319b095d09452c?sid=df34adf8-b013-44ef-b794-d54846f52d2d

Fixes #3514

---------

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>

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

@@ -1,6 +1,6 @@
 import { styled } from '@linaria/react';
 import { isNonEmptyString, isUndefined } from '@sniptt/guards';
-import { useContext } from 'react';
+import { useContext, useMemo } from 'react';
 import { useRecoilState } from 'recoil';
 
 import { invalidAvatarUrlsState } from '@ui/display/avatar/components/states/isInvalidAvatarUrlState';
@@ -8,7 +8,7 @@ import { AVATAR_PROPERTIES_BY_SIZE } from '@ui/display/avatar/constants/AvatarPr
 import { AvatarSize } from '@ui/display/avatar/types/AvatarSize';
 import { AvatarType } from '@ui/display/avatar/types/AvatarType';
 import { ThemeContext } from '@ui/theme';
-import { Nullable, stringToHslColor } from '@ui/utilities';
+import { Nullable, getImageAbsoluteURI, stringToHslColor } from '@ui/utilities';
 
 const StyledAvatar = styled.div<{
   size: AvatarSize;
@@ -73,15 +73,21 @@ export const Avatar = ({
     invalidAvatarUrlsState,
   );
 
-  const noAvatarUrl = !isNonEmptyString(avatarUrl);
+  const avatarImageURI = useMemo(
+    () => getImageAbsoluteURI(avatarUrl),
+    [avatarUrl],
+  );
+
+  const noAvatarUrl = !isNonEmptyString(avatarImageURI);
 
   const placeholderChar = placeholder?.[0]?.toLocaleUpperCase();
 
-  const showPlaceholder = noAvatarUrl || invalidAvatarUrls.includes(avatarUrl);
+  const showPlaceholder =
+    noAvatarUrl || invalidAvatarUrls.includes(avatarImageURI);
 
   const handleImageError = () => {
-    if (isNonEmptyString(avatarUrl)) {
-      setInvalidAvatarUrls((prev) => [...prev, avatarUrl]);
+    if (isNonEmptyString(avatarImageURI)) {
+      setInvalidAvatarUrls((prev) => [...prev, avatarImageURI]);
     }
   };
 
@@ -105,7 +111,7 @@ export const Avatar = ({
       {showPlaceholder ? (
         placeholderChar
       ) : (
-        <StyledImage src={avatarUrl} onError={handleImageError} alt="" />
+        <StyledImage src={avatarImageURI} onError={handleImageError} alt="" />
       )}
     </StyledAvatar>
   );

packages/twenty-ui/src/utilities/config/index.ts

@@ -0,0 +1,30 @@
+declare global {
+  interface Window {
+    _env_?: Record<string, string>;
+    __APOLLO_CLIENT__?: any;
+  }
+}
+
+const getDefaultUrl = () => {
+  if (
+    window.location.hostname === 'localhost' ||
+    window.location.hostname === '127.0.0.1'
+  ) {
+    // In development environment front and backend usually run on separate ports
+    // we set the default value to localhost:3000.
+    // It dev context, we use env vars to overwrite it
+    return 'http://localhost:3000';
+  } else {
+    // Outside of localhost we assume that they run on the same port
+    // because the backend will serve the frontend
+    // It prod context, we use env-config.js + window var to ovewrite it
+    return `${window.location.protocol}//${window.location.hostname}${
+      window.location.port ? `:${window.location.port}` : ''
+    }`;
+  }
+};
+
+export const REACT_APP_SERVER_BASE_URL =
+  window._env_?.REACT_APP_SERVER_BASE_URL ||
+  process.env.REACT_APP_SERVER_BASE_URL ||
+  getDefaultUrl();

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

@@ -0,0 +1,15 @@
+import { REACT_APP_SERVER_BASE_URL } from '@ui/utilities/config';
+
+export const getImageAbsoluteURI = (imageUrl?: string | null) => {
+  if (!imageUrl) {
+    return null;
+  }
+
+  if (imageUrl?.startsWith('https:')) {
+    return imageUrl;
+  }
+
+  const serverFilesUrl = REACT_APP_SERVER_BASE_URL;
+
+  return `${serverFilesUrl}/files/${imageUrl}`;
+};

packages/twenty-ui/src/utilities/index.ts

@@ -1,4 +1,5 @@
 export * from './color/utils/stringToHslColor';
+export * from './image/getImageAbsoluteURI';
 export * from './isDefined';
 export * from './state/utils/createState';
 export * from './types/Nullable';