Skip to content

Commit

Permalink
Merge branch 'main' into fix-onverflow-on-notes
Browse files Browse the repository at this point in the history
  • Loading branch information
martmull committed Jun 14, 2024
2 parents 259a4d7 + 28202cc commit 24649a9
Show file tree
Hide file tree
Showing 13 changed files with 247 additions and 107 deletions.
6 changes: 5 additions & 1 deletion packages/twenty-emails/src/emails/send-invite-link.email.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { MainText } from 'src/components/MainText';
import { Title } from 'src/components/Title';
import { WhatIsTwenty } from 'src/components/WhatIsTwenty';
import { capitalize } from 'src/utils/capitalize';
import { getImageAbsoluteURIOrBase64 } from 'src/utils/getImageAbsoluteURIOrBase64';

type SendInviteLinkEmailProps = {
link: string;
Expand All @@ -17,13 +18,16 @@ type SendInviteLinkEmailProps = {
email: string;
firstName: string;
};
serverUrl?: string;
};

export const SendInviteLinkEmail = ({
link,
workspace,
sender,
serverUrl,
}: SendInviteLinkEmailProps) => {
const workspaceLogo = getImageAbsoluteURIOrBase64(workspace.logo, serverUrl);
return (
<BaseEmail width={333}>
<Title value="Join your team on Twenty" />
Expand All @@ -34,7 +38,7 @@ export const SendInviteLinkEmail = ({
<br />
</MainText>
<HighlightedContainer>
{workspace.logo && <Img src={workspace.logo} width={40} height={40} />}
{workspaceLogo && <Img src={workspaceLogo} width={40} height={40} />}
{workspace.name && <HighlightedText value={workspace.name} />}
<CallToAction href={link} value="Accept invite" />
</HighlightedContainer>
Expand Down
16 changes: 16 additions & 0 deletions packages/twenty-emails/src/utils/getImageAbsoluteURIOrBase64.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
export const getImageAbsoluteURIOrBase64 = (
imageUrl?: string | null,
serverUrl?: string,
) => {
if (!imageUrl) {
return null;
}

if (imageUrl?.startsWith('data:') || imageUrl?.startsWith('https:')) {
return imageUrl;
}

return serverUrl?.endsWith('/')
? `${serverUrl.substring(0, serverUrl.length - 1)}/files/${imageUrl}`
: `${serverUrl || ''}/files/${imageUrl}`;
};
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@ export const NoteCard = ({
<StyledCardContent>{body}</StyledCardContent>
</StyledCardDetailsContainer>
<StyledFooter>
<ActivityTargetsInlineCell activity={note} readonly maxWidth={200} />
<ActivityTargetsInlineCell activity={note} readonly />
{note.comments && note.comments.length > 0 && (
<StyledCommentIcon>
<IconComment size={theme.icon.size.md} />
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import styled from '@emotion/styled';
import { useRecoilValue } from 'recoil';
import { Avatar } from 'twenty-ui';

import { FavoritesSkeletonLoader } from '@/favorites/components/FavoritesSkeletonLoader';
Expand All @@ -8,6 +9,7 @@ import { DraggableList } from '@/ui/layout/draggable-list/components/DraggableLi
import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem';
import { NavigationDrawerSection } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSection';
import { NavigationDrawerSectionTitle } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle';
import { useNavigationSection } from '@/ui/navigation/navigation-drawer/hooks/useNavigationSection';
import { getImageAbsoluteURIOrBase64 } from '~/utils/image/getImageAbsoluteURIOrBase64';

import { useFavorites } from '../hooks/useFavorites';
Expand Down Expand Up @@ -36,6 +38,10 @@ export const Favorites = () => {
const { favorites, handleReorderFavorite } = useFavorites();
const loading = useIsPrefetchLoading();

const { toggleNavigationSection, isNavigationSectionOpenState } =
useNavigationSection('Favorites');
const isNavigationSectionOpen = useRecoilValue(isNavigationSectionOpenState);

if (loading) {
return <FavoritesSkeletonLoader />;
}
Expand All @@ -44,48 +50,53 @@ export const Favorites = () => {

return (
<StyledContainer>
<NavigationDrawerSectionTitle label="Favorites" />
<DraggableList
onDragEnd={handleReorderFavorite}
draggableItems={
<>
{favorites.map((favorite, index) => {
const {
id,
labelIdentifier,
avatarUrl,
avatarType,
link,
recordId,
} = favorite;

return (
<DraggableItem
key={id}
draggableId={id}
index={index}
itemComponent={
<StyledNavigationDrawerItem
key={id}
label={labelIdentifier}
Icon={() => (
<StyledAvatar
entityId={recordId}
avatarUrl={getImageAbsoluteURIOrBase64(avatarUrl)}
type={avatarType}
placeholder={labelIdentifier}
className="fav-avatar"
/>
)}
to={link}
/>
}
/>
);
})}
</>
}
<NavigationDrawerSectionTitle
label="Favorites"
onClick={() => toggleNavigationSection()}
/>
{isNavigationSectionOpen && (
<DraggableList
onDragEnd={handleReorderFavorite}
draggableItems={
<>
{favorites.map((favorite, index) => {
const {
id,
labelIdentifier,
avatarUrl,
avatarType,
link,
recordId,
} = favorite;

return (
<DraggableItem
key={id}
draggableId={id}
index={index}
itemComponent={
<StyledNavigationDrawerItem
key={id}
label={labelIdentifier}
Icon={() => (
<StyledAvatar
entityId={recordId}
avatarUrl={getImageAbsoluteURIOrBase64(avatarUrl)}
type={avatarType}
placeholder={labelIdentifier}
className="fav-avatar"
/>
)}
to={link}
/>
}
/>
);
})}
</>
}
/>
)}
</StyledContainer>
);
};
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import { Favorites } from '@/favorites/components/Favorites';
import { ObjectMetadataNavItems } from '@/object-metadata/components/ObjectMetadataNavItems';
import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem';
import { NavigationDrawerSection } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSection';
import { NavigationDrawerSectionTitle } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle';
import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState';
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';

Expand Down Expand Up @@ -56,10 +55,8 @@ export const MainNavigationDrawerItems = () => {

<Favorites />

<NavigationDrawerSection>
<NavigationDrawerSectionTitle label="Workspace" />
<ObjectMetadataNavItems />
</NavigationDrawerSection>
<ObjectMetadataNavItems isRemote={false} />
<ObjectMetadataNavItems isRemote={true} />
</>
);
};
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { useLocation } from 'react-router-dom';
import { useRecoilValue } from 'recoil';
import { useIcons } from 'twenty-ui';

import { ObjectMetadataNavItemsSkeletonLoader } from '@/object-metadata/components/ObjectMetadataNavItemsSkeletonLoader';
Expand All @@ -7,11 +8,21 @@ import { useIsPrefetchLoading } from '@/prefetch/hooks/useIsPrefetchLoading';
import { usePrefetchedData } from '@/prefetch/hooks/usePrefetchedData';
import { PrefetchKey } from '@/prefetch/types/PrefetchKey';
import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem';
import { NavigationDrawerSection } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSection';
import { NavigationDrawerSectionTitle } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle';
import { useNavigationSection } from '@/ui/navigation/navigation-drawer/hooks/useNavigationSection';
import { View } from '@/views/types/View';
import { getObjectMetadataItemViews } from '@/views/utils/getObjectMetadataItemViews';

export const ObjectMetadataNavItems = () => {
export const ObjectMetadataNavItems = ({ isRemote }: { isRemote: boolean }) => {
const { toggleNavigationSection, isNavigationSectionOpenState } =
useNavigationSection('Objects' + (isRemote ? 'Remote' : 'Workspace'));
const isNavigationSectionOpen = useRecoilValue(isNavigationSectionOpenState);

const { activeObjectMetadataItems } = useFilteredObjectMetadataItems();
const filteredActiveObjectMetadataItems = activeObjectMetadataItems.filter(
(item) => (isRemote ? item.isRemote : !item.isRemote),
);
const { getIcon } = useIcons();
const currentPath = useLocation().pathname;

Expand All @@ -23,55 +34,69 @@ export const ObjectMetadataNavItems = () => {
}

return (
<>
{[
...activeObjectMetadataItems
.filter((item) =>
['person', 'company', 'opportunity'].includes(item.nameSingular),
)
.sort((objectMetadataItemA, objectMetadataItemB) => {
const order = ['person', 'company', 'opportunity'];
const indexA = order.indexOf(objectMetadataItemA.nameSingular);
const indexB = order.indexOf(objectMetadataItemB.nameSingular);
if (indexA === -1 || indexB === -1) {
return objectMetadataItemA.nameSingular.localeCompare(
objectMetadataItemB.nameSingular,
);
}
return indexA - indexB;
}),
...activeObjectMetadataItems
.filter(
(item) =>
!['person', 'company', 'opportunity'].includes(item.nameSingular),
)
.sort((objectMetadataItemA, objectMetadataItemB) => {
return new Date(objectMetadataItemA.createdAt) <
new Date(objectMetadataItemB.createdAt)
? 1
: -1;
}),
].map((objectMetadataItem) => {
const objectMetadataViews = getObjectMetadataItemViews(
objectMetadataItem.id,
views,
);
const viewId = objectMetadataViews[0]?.id;
filteredActiveObjectMetadataItems.length > 0 && (
<NavigationDrawerSection>
<NavigationDrawerSectionTitle
label={isRemote ? 'Remote' : 'Workspace'}
onClick={() => toggleNavigationSection()}
/>

{isNavigationSectionOpen &&
[
...filteredActiveObjectMetadataItems
.filter((item) =>
['person', 'company', 'opportunity'].includes(
item.nameSingular,
),
)
.sort((objectMetadataItemA, objectMetadataItemB) => {
const order = ['person', 'company', 'opportunity'];
const indexA = order.indexOf(objectMetadataItemA.nameSingular);
const indexB = order.indexOf(objectMetadataItemB.nameSingular);
if (indexA === -1 || indexB === -1) {
return objectMetadataItemA.nameSingular.localeCompare(
objectMetadataItemB.nameSingular,
);
}
return indexA - indexB;
}),
...filteredActiveObjectMetadataItems
.filter(
(item) =>
!['person', 'company', 'opportunity'].includes(
item.nameSingular,
),
)
.sort((objectMetadataItemA, objectMetadataItemB) => {
return new Date(objectMetadataItemA.createdAt) <
new Date(objectMetadataItemB.createdAt)
? 1
: -1;
}),
].map((objectMetadataItem) => {
const objectMetadataViews = getObjectMetadataItemViews(
objectMetadataItem.id,
views,
);
const viewId = objectMetadataViews[0]?.id;

const navigationPath = `/objects/${objectMetadataItem.namePlural}${
viewId ? `?view=${viewId}` : ''
}`;
const navigationPath = `/objects/${objectMetadataItem.namePlural}${
viewId ? `?view=${viewId}` : ''
}`;

return (
<NavigationDrawerItem
key={objectMetadataItem.id}
label={objectMetadataItem.labelPlural}
to={navigationPath}
active={currentPath === `/objects/${objectMetadataItem.namePlural}`}
Icon={getIcon(objectMetadataItem.icon)}
/>
);
})}
</>
return (
<NavigationDrawerItem
key={objectMetadataItem.id}
label={objectMetadataItem.labelPlural}
to={navigationPath}
active={
currentPath === `/objects/${objectMetadataItem.namePlural}`
}
Icon={getIcon(objectMetadataItem.icon)}
/>
);
})}
</NavigationDrawerSection>
)
);
};
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,8 @@ const StyledLabelAndIconContainer = styled.div`

const StyledValueContainer = styled.div`
display: flex;
min-width: 100%;
flex-grow: 1;
min-width: 0;
`;

const StyledLabelContainer = styled.div<{ width?: number }>`
Expand Down
Loading

0 comments on commit 24649a9

Please sign in to comment.