twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2024-11-27 01:05:08 +03:00
Code Issues Packages Projects Releases Wiki Activity

Upload image for use in blocknote editor (#3044)

Browse Source 
* - upload image to use in blocknote editor
- fix local-storage not in gitignore

* fix lint

* fix runtime config
add tests for body parsing notes and tasks

* lint
This commit is contained in:
brendanlaschke 2023-12-20 15:16:19 +01:00 committed by GitHub
parent 351dc6488c
commit c4fecb0a1a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 282 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
packages/twenty-front/src/modules/activities/components/ActivityBodyEditor.tsx
View File

@ -9,6 +9,8 @@ import { Activity } from '@/activities/types/Activity';
import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
import { BlockEditor } from '@/ui/input/editor/components/BlockEditor';
import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
import { REACT_APP_SERVER_BASE_URL } from '~/config';
import { FileFolder, useUploadFileMutation } from '~/generated/graphql';
const StyledBlockNoteStyledContainer = styled.div`
width: 100%;
@ -56,6 +58,26 @@ export const ActivityBodyEditor = ({
slashMenuItems = slashMenuItems.filter((x) => x.name != 'Image');
}
const [uploadFile] = useUploadFileMutation();
const handleUploadAttachment = async (file: File): Promise<string> => {
if (!file) {
return '';
}
const result = await uploadFile({
variables: {
file,
fileFolder: FileFolder.Attachment,
},
});
if (!result?.data?.uploadFile) {
throw new Error("Couldn't upload Image");
}
const imageUrl =
REACT_APP_SERVER_BASE_URL + '/files/' + result?.data?.uploadFile;
return imageUrl;
};
const editor: BlockNoteEditor | null = useBlockNote({
initialContent:
isNonEmptyString(activity.body) && activity.body !== '{}'
@ -66,6 +88,7 @@ export const ActivityBodyEditor = ({
debounceOnChange(JSON.stringify(editor.topLevelBlocks) ?? '');
},
slashMenuItems,
uploadFile: imagesActivated ? handleUploadAttachment : undefined,
});
return (

2
packages/twenty-front/src/modules/activities/files/components/AttachmentList.tsx
View File

@ -45,7 +45,7 @@ const StyledAttachmentContainer = styled.div`
background: ${({ theme }) => theme.background.secondary};
border: 1px solid ${({ theme }) => theme.border.color.medium};
border-radius: ${({ theme }) => theme.border.radius.md};
disply: flex;
display: flex;
flex-flow: column nowrap;
justify-content: center;
width: 100%;

7
packages/twenty-front/src/modules/activities/files/components/AttachmentRow.tsx
View File

@ -12,6 +12,7 @@ import {
} from '@/object-record/field/contexts/FieldContext';
import { useDeleteOneRecord } from '@/object-record/hooks/useDeleteOneRecord';
import { IconCalendar } from '@/ui/display/icon';
import { REACT_APP_SERVER_BASE_URL } from '~/config';
import { formatToHumanReadableDate } from '~/utils';
const StyledRow = styled.div`
@ -75,11 +76,7 @@ export const AttachmentRow = ({ attachment }: { attachment: Attachment }) => {
<StyledLeftContent>
<AttachmentIcon attachment={attachment} />
<StyledLink
href={
process.env.REACT_APP_SERVER_BASE_URL +
'/files/' +
attachment.fullPath
}
href={REACT_APP_SERVER_BASE_URL + '/files/' + attachment.fullPath}
target="__blank"
>
{attachment.name}

4
packages/twenty-front/src/modules/activities/files/utils/downloadFile.ts
View File

@ -1,5 +1,7 @@
import { REACT_APP_SERVER_BASE_URL } from '~/config';
export const downloadFile = (fullPath: string, fileName: string) => {
fetch(process.env.REACT_APP_SERVER_BASE_URL + '/files/' + fullPath)
fetch(REACT_APP_SERVER_BASE_URL + '/files/' + fullPath)
.then((resp) =>
resp.status === 200
? resp.blob()

15
packages/twenty-front/src/modules/activities/notes/components/NoteCard.tsx
View File

@ -6,6 +6,7 @@ import { useOpenActivityRightDrawer } from '@/activities/hooks/useOpenActivityRi
import { ActivityTargetsInlineCell } from '@/activities/inline-cell/components/ActivityTargetsInlineCell';
import { GraphQLActivity } from '@/activities/types/GraphQLActivity';
import { Note } from '@/activities/types/Note';
import { getActivityPreview } from '@/activities/utils/getActivityPreview';
import {
FieldContext,
GenericFieldContextType,
@ -83,19 +84,7 @@ export const NoteCard = ({
}) => {
const theme = useTheme();
const openActivityRightDrawer = useOpenActivityRightDrawer();
const noteBody = note.body ? JSON.parse(note.body) : [];
const body = noteBody.length
? noteBody
.map((x: any) =>
Array.isArray(x.content)
? x.content?.map((content: any) => content?.text).join(' ')
: x.content?.text,
)
.filter((x: string) => x)
.join('\n')
: '';
const body = getActivityPreview(note.body);
const fieldContext = useMemo(
() => ({ recoilScopeId: note?.id ?? '' }),

5
packages/twenty-front/src/modules/activities/tasks/components/TaskRow.tsx
View File

@ -1,11 +1,11 @@
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { isNonEmptyString } from '@sniptt/guards';
import { ActivityTargetChips } from '@/activities/components/ActivityTargetChips';
import { useOpenActivityRightDrawer } from '@/activities/hooks/useOpenActivityRightDrawer';
import { ActivityTarget } from '@/activities/types/ActivityTarget';
import { GraphQLActivity } from '@/activities/types/GraphQLActivity';
import { getActivitySummary } from '@/activities/utils/getActivitySummary';
import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
import { IconCalendar, IconComment } from '@/ui/display/icon';
import { OverflowingTextWithTooltip } from '@/ui/display/tooltip/OverflowingTextWithTooltip';
@ -72,8 +72,7 @@ export const TaskRow = ({
const theme = useTheme();
const openActivityRightDrawer = useOpenActivityRightDrawer();
const body = JSON.parse(isNonEmptyString(task.body) ? task.body : '{}')[0]
?.content[0]?.text;
const body = getActivitySummary(task.body);
const { completeTask } = useCompleteTask(task);
const activityTargetIds =

112
packages/twenty-front/src/modules/activities/utils/__tests__/getActivityPreview.test.ts Normal file
View File

@ -0,0 +1,112 @@
import { getActivityPreview } from '../getActivityPreview';
describe('getActivityPreview', () => {
it('should work for empty body', () => {
const activityBody = {};
const res = getActivityPreview(JSON.stringify(activityBody));
expect(res).toEqual('');
});
it('should work for empty body', () => {
const activityBody = '';
const res = getActivityPreview(JSON.stringify(activityBody));
expect(res).toEqual('');
});
it('should work for text body', () => {
const activityBody = [
{
id: '103003f3-60de-4713-8779-a694ee7a22c9',
type: 'paragraph',
props: {
textColor: 'default',
backgroundColor: 'default',
textAlignment: 'left',
},
content: [{ type: 'text', text: 'test 1', styles: {} }],
children: [],
},
{
id: 'bec5b84b-e9e7-49f6-854a-c2a9811f16e5',
type: 'paragraph',
props: {
textColor: 'default',
backgroundColor: 'default',
textAlignment: 'left',
},
content: [{ type: 'text', text: 'test text', styles: {} }],
children: [],
},
{
id: 'a347c1e7-65cb-4829-af9e-52fba407c3c8',
type: 'paragraph',
props: {
textColor: 'default',
backgroundColor: 'default',
textAlignment: 'left',
},
content: [{ type: 'text', text: 'test 2', styles: {} }],
children: [],
},
{
id: '7b999cbb-f248-4ead-a64f-94840191dc86',
type: 'paragraph',
props: {
textColor: 'default',
backgroundColor: 'default',
textAlignment: 'left',
},
content: [],
children: [],
},
];
const res = getActivityPreview(JSON.stringify(activityBody));
expect(res).toEqual('test 1\ntest text\ntest 2');
});
it('should work for image as first block', () => {
const activityBody = [
{
id: '7c7779f3-9c60-4504-ab3b-230fe390d430',
type: 'image',
props: {
backgroundColor: 'default',
textAlignment: 'left',
url: 'https://favicon.twenty.com/qonto.com',
caption: '',
width: 230,
},
children: [],
},
{
id: 'ab470e73-4564-493d-a1ad-bbe2c86c4481',
type: 'paragraph',
props: {
textColor: 'default',
backgroundColor: 'default',
textAlignment: 'left',
},
content: [{ type: 'text', text: 'TEST', styles: {} }],
children: [],
},
{
id: 'd4720499-2a45-4f3b-96cf-a8415c295678',
type: 'paragraph',
props: {
textColor: 'default',
backgroundColor: 'default',
textAlignment: 'left',
},
content: [],
children: [],
},
];
const res = getActivityPreview(JSON.stringify(activityBody));
expect(res).toEqual('TEST');
});
});

112
packages/twenty-front/src/modules/activities/utils/__tests__/getActivitySummary.test.ts Normal file
View File

@ -0,0 +1,112 @@
import { getActivitySummary } from '../getActivitySummary';
describe('getActivitySummary', () => {
it('should work for empty body', () => {
const activityBody = {};
const res = getActivitySummary(JSON.stringify(activityBody));
expect(res).toEqual('');
});
it('should work for empty body', () => {
const activityBody = '';
const res = getActivitySummary(JSON.stringify(activityBody));
expect(res).toEqual('');
});
it('should work for paragraph as first block', () => {
const activityBody = [
{
id: '103003f3-60de-4713-8779-a694ee7a22c9',
type: 'paragraph',
props: {
textColor: 'default',
backgroundColor: 'default',
textAlignment: 'left',
},
content: [{ type: 'text', text: 'test 1', styles: {} }],
children: [],
},
{
id: 'bec5b84b-e9e7-49f6-854a-c2a9811f16e5',
type: 'paragraph',
props: {
textColor: 'default',
backgroundColor: 'default',
textAlignment: 'left',
},
content: [{ type: 'text', text: 'test text', styles: {} }],
children: [],
},
{
id: 'a347c1e7-65cb-4829-af9e-52fba407c3c8',
type: 'paragraph',
props: {
textColor: 'default',
backgroundColor: 'default',
textAlignment: 'left',
},
content: [{ type: 'text', text: 'test 2', styles: {} }],
children: [],
},
{
id: '7b999cbb-f248-4ead-a64f-94840191dc86',
type: 'paragraph',
props: {
textColor: 'default',
backgroundColor: 'default',
textAlignment: 'left',
},
content: [],
children: [],
},
];
const res = getActivitySummary(JSON.stringify(activityBody));
expect(res).toEqual('test 1');
});
it('should work for image as first block', () => {
const activityBody = [
{
id: '7c7779f3-9c60-4504-ab3b-230fe390d430',
type: 'image',
props: {
backgroundColor: 'default',
textAlignment: 'left',
url: 'https://favicon.twenty.com/qonto.com',
caption: '',
width: 230,
},
children: [],
},
{
id: 'ab470e73-4564-493d-a1ad-bbe2c86c4481',
type: 'paragraph',
props: {
textColor: 'default',
backgroundColor: 'default',
textAlignment: 'left',
},
content: [{ type: 'text', text: 'TEST', styles: {} }],
children: [],
},
{
id: 'd4720499-2a45-4f3b-96cf-a8415c295678',
type: 'paragraph',
props: {
textColor: 'default',
backgroundColor: 'default',
textAlignment: 'left',
},
content: [],
children: [],
},
];
const res = getActivitySummary(JSON.stringify(activityBody));
expect(res).toEqual('');
});
});

14
packages/twenty-front/src/modules/activities/utils/getActivityPreview.ts Normal file
View File

@ -0,0 +1,14 @@
export const getActivityPreview = (activityBody: string) => {
const noteBody = activityBody ? JSON.parse(activityBody) : [];
return noteBody.length
? noteBody
.map((x: any) =>
Array.isArray(x.content)
? x.content?.map((content: any) => content?.text).join(' ')
: x.content?.text,
)
.filter((x: string) => x)
.join('\n')
: '';
};

9
packages/twenty-front/src/modules/activities/utils/getActivitySummary.ts Normal file
View File

@ -0,0 +1,9 @@
export const getActivitySummary = (activityBody: string) => {
const noteBody = activityBody ? JSON.parse(activityBody) : [];
return (
noteBody[0]?.content?.text ||
noteBody[0]?.content?.map((content: any) => content?.text).join(' ') ||
''
);
};

3
packages/twenty-server/.gitignore vendored
View File

@ -1 +1,2 @@
dist/*
dist/*
.local-storage