Decouple twenty-ui Avatar from app server-URL config (#21968)

Makes `twenty-ui`'s `Avatar` render the `avatarUrl` it receives instead
of building it from `window._env_`/`window.location` at module load, so
the library no longer depends on the app environment. URL resolution
moves to `twenty-front` via a `getAbsoluteImageUrl` helper applied at
the call sites.

Part of making twenty-ui a standalone library.

packages/twenty-front/src/modules/settings/admin-panel/components/SettingsAdminGeneral.tsx

@@ -29,6 +29,7 @@ import {
   AdminPanelRecentUsersDocument,
   AdminPanelTopWorkspacesDocument,
 } from '~/generated-admin/graphql';
+import { getAbsoluteImageUrl } from '~/utils/image/getAbsoluteImageUrl';
 
 const StyledEmptyState = styled.div`
   color: ${themeCssVariables.font.color.tertiary};
@@ -136,7 +137,7 @@ export const SettingsAdminGeneral = () => {
                       overflow="hidden"
                     >
                       <Avatar
-                        avatarUrl={user.avatarUrl}
+                        avatarUrl={getAbsoluteImageUrl(user.avatarUrl)}
                         placeholder={
                           `${user.firstName || ''} ${user.lastName || ''}`.trim() ||
                           user.email
@@ -160,7 +161,7 @@ export const SettingsAdminGeneral = () => {
                       {user.workspaceId ? (
                         <>
                           <Avatar
-                            avatarUrl={user.workspaceLogo}
+                            avatarUrl={getAbsoluteImageUrl(user.workspaceLogo)}
                             placeholder={user.workspaceName || ''}
                             placeholderColorSeed={user.workspaceId}
                             size="sm"
@@ -232,7 +233,7 @@ export const SettingsAdminGeneral = () => {
                       overflow="hidden"
                     >
                       <Avatar
-                        avatarUrl={workspace.logoUrl}
+                        avatarUrl={getAbsoluteImageUrl(workspace.logoUrl)}
                         placeholder={workspace.name || ''}
                         placeholderColorSeed={workspace.id}
                         size="md"

packages/twenty-front/src/modules/settings/admin-panel/components/SettingsAdminWorkspaceContent.tsx

@@ -12,7 +12,6 @@ import { useContext } from 'react';
 import { SettingsPath } from 'twenty-shared/types';
 import {
   formatUpgradeCommandName,
-  getImageAbsoluteURI,
   getSettingsPath,
   isDefined,
 } from 'twenty-shared/utils';
@@ -30,8 +29,8 @@ import { OverflowingTextWithTooltip } from 'twenty-ui/surfaces';
 import { H2Title } from 'twenty-ui/typography';
 import { Section } from 'twenty-ui/layout';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
-import { REACT_APP_SERVER_BASE_URL } from '~/config';
 import { dateLocaleState } from '~/localization/states/dateLocaleState';
+import { getAbsoluteImageUrl } from '~/utils/image/getAbsoluteImageUrl';
 import { formatDateTimeString } from '~/utils/string/formatDateTimeString';
 
 type SettingsAdminWorkspaceContentProps = {
@@ -83,14 +82,11 @@ export const SettingsAdminWorkspaceContent = ({
           })}
           leftComponent={
             <AvatarOrIcon
-              avatarUrl={
-                getImageAbsoluteURI({
-                  imageUrl: isNonEmptyString(activeWorkspace?.logo)
-                    ? activeWorkspace?.logo
-                    : DEFAULT_WORKSPACE_LOGO,
-                  baseUrl: REACT_APP_SERVER_BASE_URL,
-                }) ?? ''
-              }
+              avatarUrl={getAbsoluteImageUrl(
+                isNonEmptyString(activeWorkspace?.logo)
+                  ? activeWorkspace?.logo
+                  : DEFAULT_WORKSPACE_LOGO,
+              )}
             />
           }
         />

packages/twenty-front/src/modules/settings/roles/components/SettingsRolesTableRow.tsx

@@ -12,6 +12,7 @@ import { AppTooltip, TooltipDelay } from 'twenty-ui/surfaces';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 
 import { type RoleWithPartialMembers } from '@/settings/roles/types/RoleWithPartialMembers';
+import { getAbsoluteImageUrl } from '~/utils/image/getAbsoluteImageUrl';
 
 const StyledAssignedText = styled.div`
   color: ${themeCssVariables.font.color.secondary};
@@ -102,7 +103,7 @@ export const SettingsRolesTableRow = ({ role }: SettingsRolesTableRowProps) => {
               <React.Fragment key={workspaceMember.id}>
                 <div id={`avatar-${workspaceMember.id}`}>
                   <Avatar
-                    avatarUrl={workspaceMember.avatarUrl}
+                    avatarUrl={getAbsoluteImageUrl(workspaceMember.avatarUrl)}
                     placeholderColorSeed={workspaceMember.id}
                     placeholder={workspaceMember.name.firstName ?? ''}
                     type="rounded"

packages/twenty-front/src/modules/settings/roles/role-assignment/components/SettingsRoleAssignmentConfirmationModalSubtitle.tsx

@@ -7,6 +7,7 @@ import { t } from '@lingui/core/macro';
 import { Avatar } from 'twenty-ui/data-display';
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { getAbsoluteImageUrl } from '~/utils/image/getAbsoluteImageUrl';
 
 const StyledSettingsCardContainer = styled.div`
   margin-top: ${themeCssVariables.spacing[6]};
@@ -41,7 +42,9 @@ export const SettingsRoleAssignmentConfirmationModalSubtitle = ({
           title={selectedRoleTarget.role?.label || ''}
           Icon={
             <Avatar
-              avatarUrl={enrichedSelectedWorkspaceMember?.avatarUrl}
+              avatarUrl={getAbsoluteImageUrl(
+                enrichedSelectedWorkspaceMember?.avatarUrl,
+              )}
               placeholderColorSeed={enrichedSelectedWorkspaceMember?.id}
               placeholder={workspaceMemberName}
               size="md"

packages/twenty-front/src/modules/settings/roles/role-assignment/components/SettingsRoleAssignmentTableRow.tsx

@@ -12,6 +12,7 @@ import { OverflowingTextWithTooltip } from 'twenty-ui/surfaces';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 import { type Agent, type ApiKeyForRole } from '~/generated-metadata/graphql';
 import { dateLocaleState } from '~/localization/states/dateLocaleState';
+import { getAbsoluteImageUrl } from '~/utils/image/getAbsoluteImageUrl';
 import { formatDateString } from '~/utils/string/formatDateString';
 import { type PartialWorkspaceMember } from '@/settings/roles/types/RoleWithPartialMembers';
 
@@ -63,7 +64,7 @@ export const SettingsRoleAssignmentTableRow = ({
         );
         return (
           <Avatar
-            avatarUrl={enrichedWorkspaceMember?.avatarUrl}
+            avatarUrl={getAbsoluteImageUrl(enrichedWorkspaceMember?.avatarUrl)}
             placeholderColorSeed={enrichedWorkspaceMember?.id}
             placeholder={enrichedWorkspaceMember?.name.firstName ?? ''}
             type="rounded"