admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Add Twenty Shared & Fix profile image rendering (#8841)

Browse Source 
PR Summary: 

1. Added `Twenty Shared` Package to centralize utilitiies as mentioned
in #8942
2. Optimization of `getImageAbsoluteURI.ts` to handle edge cases


![image](https://github.com/user-attachments/assets/c72a3061-6eba-46b8-85ac-869f06bf23c0)

---------

Co-authored-by: Antoine Moreaux <moreaux.antoine@gmail.com>
Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Mohammed Abdul Razak Wahab
2024-12-17 13:54:21 +05:30
committed by GitHub
parent 4e329d08b0
commit 08a9db2df6
39 changed files with 453 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
packages/twenty-front/src/modules/ui/input/components/ImageInput.tsx
View File

@ -2,14 +2,9 @@ import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { isNonEmptyString } from '@sniptt/guards';
import React from 'react';
import {
Button,
IconPhotoUp,
IconTrash,
IconUpload,
IconX,
getImageAbsoluteURI,
} from 'twenty-ui';
import { getImageAbsoluteURI } from 'twenty-shared';
import { Button, IconPhotoUp, IconTrash, IconUpload, IconX } from 'twenty-ui';
import { REACT_APP_SERVER_BASE_URL } from '~/config';
import { isDefined } from '~/utils/isDefined';
const StyledContainer = styled.div`
@ -117,7 +112,10 @@ export const ImageInput = ({
};
const pictureURI = isNonEmptyString(picture)
? getImageAbsoluteURI(picture)
? getImageAbsoluteURI({
imageUrl: picture,
baseUrl: REACT_APP_SERVER_BASE_URL,
})
: null;
return (

21
packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdownButton.tsx
View File

@ -14,12 +14,13 @@ import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { useState } from 'react';
import { useRecoilState, useRecoilValue } from 'recoil';
import { getImageAbsoluteURI } from 'twenty-shared';
import {
IconChevronDown,
MenuItemSelectAvatar,
UndecoratedLink,
getImageAbsoluteURI,
} from 'twenty-ui';
import { REACT_APP_SERVER_BASE_URL } from '~/config';
const StyledLogo = styled.div<{ logo: string }>`
background: url(${({ logo }) => logo});
@ -102,9 +103,12 @@ export const MultiWorkspaceDropdownButton = ({
isNavigationDrawerExpanded={isNavigationDrawerExpanded}
>
<StyledLogo
logo={getImageAbsoluteURI(
currentWorkspace?.logo ?? DEFAULT_WORKSPACE_LOGO,
)}
logo={
getImageAbsoluteURI({
imageUrl: currentWorkspace?.logo ?? '',
baseUrl: REACT_APP_SERVER_BASE_URL,
}) ?? ''
}
/>
<NavigationDrawerAnimatedCollapseWrapper>
<StyledLabel>{currentWorkspace?.displayName ?? ''}</StyledLabel>
@ -132,9 +136,12 @@ export const MultiWorkspaceDropdownButton = ({
text={workspace.displayName ?? '(No name)'}
avatar={
<StyledLogo
logo={getImageAbsoluteURI(
workspace.logo ?? DEFAULT_WORKSPACE_LOGO,
)}
logo={
getImageAbsoluteURI({
imageUrl: workspace.logo ?? DEFAULT_WORKSPACE_LOGO,
baseUrl: REACT_APP_SERVER_BASE_URL,
}) ?? ''
}
/>
}
selected={currentWorkspace?.id === workspace.id}

11
packages/twenty-front/src/modules/ui/utilities/page-favicon/components/PageFavicon.tsx
View File

@ -1,18 +1,23 @@
import { workspacePublicDataState } from '@/auth/states/workspacePublicDataState';
import { Helmet } from 'react-helmet-async';
import { useRecoilValue } from 'recoil';
import { getImageAbsoluteURI } from 'twenty-ui';
import { getImageAbsoluteURI } from 'twenty-shared';
import { REACT_APP_SERVER_BASE_URL } from '~/config';
export const PageFavicon = () => {
const workspacePublicData = useRecoilValue(workspacePublicDataState);
return (
<Helmet>
{workspacePublicData?.logo && (
<link
rel="icon"
type="image/x-icon"
href={getImageAbsoluteURI(workspacePublicData.logo)}
href={
getImageAbsoluteURI({
imageUrl: workspacePublicData.logo,
baseUrl: REACT_APP_SERVER_BASE_URL,
}) ?? ''
}
/>
)}
</Helmet>