Logs show page (#4611)

* Being implementing events on the frontend * Rename JSON to RAW JSON * Fix handling of json field on frontend * Log user id * Add frontend tests * Update packages/twenty-server/src/engine/api/graphql/workspace-query-runner/jobs/save-event-to-db.job.ts Co-authored-by: Weiko <corentin@twenty.com> * Move db calls to a dedicated repository * Add server-side tests --------- Co-authored-by: Weiko <corentin@twenty.com>
2024-03-22 14:01:16 +01:00
parent aee6d49ea9
commit d876b40056
38 changed files with 488 additions and 95 deletions
--- a/packages/twenty-front/src/generated-metadata/graphql.ts
+++ b/packages/twenty-front/src/generated-metadata/graphql.ts
@ -73,6 +73,7 @@ export type Billing = {
 export type BillingSubscription = {
  __typename?: 'BillingSubscription';
  id: Scalars['ID']['output'];
+  interval?: Maybe<Scalars['String']['output']>;
  status: Scalars['String']['output'];
 };

@ -263,7 +264,6 @@ export enum FieldMetadataType {
  DateTime = 'DATE_TIME',
  Email = 'EMAIL',
  FullName = 'FULL_NAME',
-  Json = 'JSON',
  Link = 'LINK',
  MultiSelect = 'MULTI_SELECT',
  Number = 'NUMBER',
@ -272,6 +272,7 @@ export enum FieldMetadataType {
  Position = 'POSITION',
  Probability = 'PROBABILITY',
  Rating = 'RATING',
+  RawJson = 'RAW_JSON',
  Relation = 'RELATION',
  Select = 'SELECT',
  Text = 'TEXT',
@ -341,6 +342,7 @@ export type Mutation = {
  renewToken: AuthTokens;
  signUp: LoginToken;
  track: Analytics;
+  updateBillingSubscription: UpdateBillingEntity;
  updateOneField: Field;
  updateOneObject: Object;
  updatePasswordViaResetToken: InvalidatePassword;
@ -545,6 +547,8 @@ export type Query = {
  fields: FieldConnection;
  findWorkspaceFromInviteHash: Workspace;
  getProductPrices: ProductPricesEntity;
+  getTimelineCalendarEventsFromCompanyId: TimelineCalendarEventsWithTotal;
+  getTimelineCalendarEventsFromPersonId: TimelineCalendarEventsWithTotal;
  getTimelineThreadsFromCompanyId: TimelineThreadsWithTotal;
  getTimelineThreadsFromPersonId: TimelineThreadsWithTotal;
  object: Object;
@ -591,6 +595,20 @@ export type QueryGetProductPricesArgs = {
 };


+export type QueryGetTimelineCalendarEventsFromCompanyIdArgs = {
+  companyId: Scalars['ID']['input'];
+  page: Scalars['Int']['input'];
+  pageSize: Scalars['Int']['input'];
+};
+
+
+export type QueryGetTimelineCalendarEventsFromPersonIdArgs = {
+  page: Scalars['Int']['input'];
+  pageSize: Scalars['Int']['input'];
+  personId: Scalars['ID']['input'];
+};
+
+
 export type QueryGetTimelineThreadsFromCompanyIdArgs = {
  companyId: Scalars['ID']['input'];
  page: Scalars['Int']['input'];
@ -697,7 +715,7 @@ export type Sentry = {

 export type SessionEntity = {
  __typename?: 'SessionEntity';
-  url: Scalars['String']['output'];
+  url?: Maybe<Scalars['String']['output']>;
 };

 /** Sort Directions */
@ -724,6 +742,45 @@ export type Telemetry = {
  enabled: Scalars['Boolean']['output'];
 };

+export type TimelineCalendarEvent = {
+  __typename?: 'TimelineCalendarEvent';
+  attendees: Array<TimelineCalendarEventAttendee>;
+  conferenceSolution: Scalars['String']['output'];
+  conferenceUri: Scalars['String']['output'];
+  description: Scalars['String']['output'];
+  endsAt: Scalars['DateTime']['output'];
+  id: Scalars['ID']['output'];
+  isCanceled: Scalars['Boolean']['output'];
+  isFullDay: Scalars['Boolean']['output'];
+  location: Scalars['String']['output'];
+  startsAt: Scalars['DateTime']['output'];
+  title: Scalars['String']['output'];
+  visibility: TimelineCalendarEventVisibility;
+};
+
+export type TimelineCalendarEventAttendee = {
+  __typename?: 'TimelineCalendarEventAttendee';
+  avatarUrl: Scalars['String']['output'];
+  displayName: Scalars['String']['output'];
+  firstName: Scalars['String']['output'];
+  handle: Scalars['String']['output'];
+  lastName: Scalars['String']['output'];
+  personId?: Maybe<Scalars['ID']['output']>;
+  workspaceMemberId?: Maybe<Scalars['ID']['output']>;
+};
+
+/** Visibility of the calendar event */
+export enum TimelineCalendarEventVisibility {
+  Metadata = 'METADATA',
+  ShareEverything = 'SHARE_EVERYTHING'
+}
+
+export type TimelineCalendarEventsWithTotal = {
+  __typename?: 'TimelineCalendarEventsWithTotal';
+  timelineCalendarEvents: Array<TimelineCalendarEvent>;
+  totalNumberOfCalendarEvents: Scalars['Int']['output'];
+};
+
 export type TimelineThread = {
  __typename?: 'TimelineThread';
  firstParticipant: TimelineThreadParticipant;
@ -760,6 +817,12 @@ export type TransientToken = {
  transientToken: AuthToken;
 };

+export type UpdateBillingEntity = {
+  __typename?: 'UpdateBillingEntity';
+  /** Boolean that confirms query was successful */
+  success: Scalars['Boolean']['output'];
+};
+
 export type UpdateFieldInput = {
  defaultValue?: InputMaybe<Scalars['JSON']['input']>;
  description?: InputMaybe<Scalars['String']['input']>;
--- a/packages/twenty-front/src/generated/graphql.tsx
+++ b/packages/twenty-front/src/generated/graphql.tsx
@ -184,7 +184,6 @@ export enum FieldMetadataType {
  DateTime = 'DATE_TIME',
  Email = 'EMAIL',
  FullName = 'FULL_NAME',
-  Json = 'JSON',
  Link = 'LINK',
  MultiSelect = 'MULTI_SELECT',
  Number = 'NUMBER',
@ -193,6 +192,7 @@ export enum FieldMetadataType {
  Position = 'POSITION',
  Probability = 'PROBABILITY',
  Rating = 'RATING',
+  RawJson = 'RAW_JSON',
  Relation = 'RELATION',
  Select = 'SELECT',
  Text = 'TEXT',
@ -255,7 +255,6 @@ export type Mutation = {
  generateJWT: AuthTokens;
  generateTransientToken: TransientToken;
  impersonate: Verify;
-  removeWorkspaceMember: Scalars['String'];
  renewToken: AuthTokens;
  signUp: LoginToken;
  track: Analytics;
@ -314,11 +313,6 @@ export type MutationImpersonateArgs = {
 };


-export type MutationRemoveWorkspaceMemberArgs = {
-  memberId: Scalars['String'];
-};
-
-
 export type MutationRenewTokenArgs = {
  refreshToken: Scalars['String'];
 };
@ -1098,13 +1092,6 @@ export type GetCurrentUserQueryVariables = Exact<{ [key: string]: never; }>;

 export type GetCurrentUserQuery = { __typename?: 'Query', currentUser: { __typename?: 'User', id: string, firstName: string, lastName: string, email: string, canImpersonate: boolean, supportUserHash?: string | null, workspaceMember?: { __typename?: 'WorkspaceMember', id: string, colorScheme: string, avatarUrl?: string | null, locale: string, name: { __typename?: 'FullName', firstName: string, lastName: string } } | null, defaultWorkspace: { __typename?: 'Workspace', id: string, displayName?: string | null, logo?: string | null, domainName?: string | null, inviteHash?: string | null, allowImpersonation: boolean, subscriptionStatus: string, activationStatus: string, featureFlags?: Array<{ __typename?: 'FeatureFlag', id: string, key: string, value: boolean, workspaceId: string }> | null, currentBillingSubscription?: { __typename?: 'BillingSubscription', status: string, interval?: string | null } | null }, workspaces: Array<{ __typename?: 'UserWorkspace', workspace?: { __typename?: 'Workspace', id: string, displayName?: string | null, logo?: string | null, domainName?: string | null } | null }> } };

-export type RemoveWorkspaceMemberMutationVariables = Exact<{
-  memberId: Scalars['String'];
-}>;
-
-
-export type RemoveWorkspaceMemberMutation = { __typename?: 'Mutation', removeWorkspaceMember: string };
-
 export type ActivateWorkspaceMutationVariables = Exact<{
  input: ActivateWorkspaceInput;
 }>;
@ -2311,37 +2298,6 @@ export function useGetCurrentUserLazyQuery(baseOptions?: Apollo.LazyQueryHookOpt
 export type GetCurrentUserQueryHookResult = ReturnType<typeof useGetCurrentUserQuery>;
 export type GetCurrentUserLazyQueryHookResult = ReturnType<typeof useGetCurrentUserLazyQuery>;
 export type GetCurrentUserQueryResult = Apollo.QueryResult<GetCurrentUserQuery, GetCurrentUserQueryVariables>;
-export const RemoveWorkspaceMemberDocument = gql`
-    mutation RemoveWorkspaceMember($memberId: String!) {
-  removeWorkspaceMember(memberId: $memberId)
-}
-    `;
-export type RemoveWorkspaceMemberMutationFn = Apollo.MutationFunction<RemoveWorkspaceMemberMutation, RemoveWorkspaceMemberMutationVariables>;
-
-/**
- * __useRemoveWorkspaceMemberMutation__
- *
- * To run a mutation, you first call `useRemoveWorkspaceMemberMutation` within a React component and pass it any options that fit your needs.
- * When your component renders, `useRemoveWorkspaceMemberMutation` returns a tuple that includes:
- * - A mutate function that you can call at any time to execute the mutation
- * - An object with fields that represent the current status of the mutation's execution
- *
- * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
- *
- * @example
- * const [removeWorkspaceMemberMutation, { data, loading, error }] = useRemoveWorkspaceMemberMutation({
- *   variables: {
- *      memberId: // value for 'memberId'
- *   },
- * });
- */
-export function useRemoveWorkspaceMemberMutation(baseOptions?: Apollo.MutationHookOptions<RemoveWorkspaceMemberMutation, RemoveWorkspaceMemberMutationVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useMutation<RemoveWorkspaceMemberMutation, RemoveWorkspaceMemberMutationVariables>(RemoveWorkspaceMemberDocument, options);
-      }
-export type RemoveWorkspaceMemberMutationHookResult = ReturnType<typeof useRemoveWorkspaceMemberMutation>;
-export type RemoveWorkspaceMemberMutationResult = Apollo.MutationResult<RemoveWorkspaceMemberMutation>;
-export type RemoveWorkspaceMemberMutationOptions = Apollo.BaseMutationOptions<RemoveWorkspaceMemberMutation, RemoveWorkspaceMemberMutationVariables>;
 export const ActivateWorkspaceDocument = gql`
    mutation ActivateWorkspace($input: ActivateWorkspaceInput!) {
  activateWorkspace(data: $input) {
--- a/packages/twenty-front/src/modules/activities/events/components/EventList.tsx
+++ b/packages/twenty-front/src/modules/activities/events/components/EventList.tsx
@ -0,0 +1,22 @@
+import { ReactElement } from 'react';
+
+import { EventRow } from '@/activities/events/components/EventRow';
+import { Event } from '@/activities/events/types/Event';
+import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
+
+type EventListProps = {
+  targetableObject: ActivityTargetableObject;
+  title: string;
+  events: Event[];
+  button?: ReactElement | false;
+};
+
+export const EventList = ({ events }: EventListProps) => {
+  return (
+    <>
+      {events &&
+        events.length > 0 &&
+        events.map((event: Event) => <EventRow key={event.id} event={event} />)}
+    </>
+  );
+};
--- a/packages/twenty-front/src/modules/activities/events/components/EventRow.tsx
+++ b/packages/twenty-front/src/modules/activities/events/components/EventRow.tsx
@ -0,0 +1,11 @@
+import { Event } from '@/activities/events/types/Event';
+
+export const EventRow = ({ event }: { event: Event }) => {
+  return (
+    <>
+      <p>
+        {event.name}:<pre>{event.properties}</pre>
+      </p>
+    </>
+  );
+};
--- a/packages/twenty-front/src/modules/activities/events/components/Events.tsx
+++ b/packages/twenty-front/src/modules/activities/events/components/Events.tsx
@ -0,0 +1,25 @@
+import { isNonEmptyArray } from '@sniptt/guards';
+
+import { EventList } from '@/activities/events/components/EventList';
+import { useEvents } from '@/activities/events/hooks/useEvents';
+import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
+
+export const Events = ({
+  targetableObject,
+}: {
+  targetableObject: ActivityTargetableObject;
+}) => {
+  const { events } = useEvents(targetableObject);
+
+  if (!isNonEmptyArray(events)) {
+    return <div>No log yet</div>;
+  }
+
+  return (
+    <EventList
+      targetableObject={targetableObject}
+      title="All"
+      events={events ?? []}
+    />
+  );
+};
--- a/packages/twenty-front/src/modules/activities/events/hooks/tests/useEvents.test.ts
+++ b/packages/twenty-front/src/modules/activities/events/hooks/tests/useEvents.test.ts
@ -0,0 +1,91 @@
+import { renderHook } from '@testing-library/react';
+
+import { useEvents } from '@/activities/events/hooks/useEvents';
+
+jest.mock('@/object-record/hooks/useFindManyRecords', () => ({
+  useFindManyRecords: jest.fn(),
+}));
+
+describe('useEvent', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('fetches events correctly for a given targetableObject', () => {
+    const mockEvents = [
+      {
+        __typename: 'Event',
+        id: '166ec73f-26b1-4934-bb3b-c86c8513b99b',
+        opportunityId: null,
+        opportunity: null,
+        personId: null,
+        person: null,
+        company: {
+          __typename: 'Company',
+          address: 'Paris',
+          linkedinLink: {
+            __typename: 'Link',
+            label: '',
+            url: '',
+          },
+          xLink: {
+            __typename: 'Link',
+            label: '',
+            url: '',
+          },
+          position: 4,
+          domainName: 'microsoft.com',
+          employees: null,
+          createdAt: '2024-03-21T16:01:41.809Z',
+          annualRecurringRevenue: {
+            __typename: 'Currency',
+            amountMicros: 100000000,
+            currencyCode: 'USD',
+          },
+          idealCustomerProfile: false,
+          accountOwnerId: null,
+          updatedAt: '2024-03-22T08:28:44.812Z',
+          name: 'Microsoft',
+          id: '460b6fb1-ed89-413a-b31a-962986e67bb4',
+        },
+        workspaceMember: {
+          __typename: 'WorkspaceMember',
+          locale: 'en',
+          avatarUrl: '',
+          updatedAt: '2024-03-21T16:01:41.839Z',
+          name: {
+            __typename: 'FullName',
+            firstName: 'Tim',
+            lastName: 'Apple',
+          },
+          id: '20202020-0687-4c41-b707-ed1bfca972a7',
+          userEmail: 'tim@apple.dev',
+          colorScheme: 'Light',
+          createdAt: '2024-03-21T16:01:41.839Z',
+          userId: '20202020-9e3b-46d4-a556-88b9ddc2b034',
+        },
+        workspaceMemberId: '20202020-0687-4c41-b707-ed1bfca972a7',
+        createdAt: '2024-03-22T08:28:44.830Z',
+        name: 'updated.company',
+        companyId: '460b6fb1-ed89-413a-b31a-962986e67bb4',
+        properties: '{"diff": {"address": {"after": "Paris", "before": ""}}}',
+        updatedAt: '2024-03-22T08:28:44.830Z',
+      },
+    ];
+    const mockTargetableObject = {
+      id: '1',
+      targetObjectNameSingular: 'Opportunity',
+    };
+
+    const useFindManyRecordsMock = jest.requireMock(
+      '@/object-record/hooks/useFindManyRecords',
+    );
+    useFindManyRecordsMock.useFindManyRecords.mockReturnValue({
+      records: mockEvents,
+    });
+
+    const { result } = renderHook(() => useEvents(mockTargetableObject));
+
+    expect(result.current.events).toEqual(mockEvents);
+  });
+});
--- a/packages/twenty-front/src/modules/activities/events/hooks/useEvents.tsx
+++ b/packages/twenty-front/src/modules/activities/events/hooks/useEvents.tsx
@ -0,0 +1,28 @@
+import { Event } from '@/activities/events/types/Event';
+import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
+import { getActivityTargetObjectFieldIdName } from '@/activities/utils/getTargetObjectFilterFieldName';
+import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
+import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
+
+// do we need to test this?
+export const useEvents = (targetableObject: ActivityTargetableObject) => {
+  const targetableObjectFieldIdName = getActivityTargetObjectFieldIdName({
+    nameSingular: targetableObject.targetObjectNameSingular,
+  });
+
+  const { records: events } = useFindManyRecords({
+    objectNameSingular: CoreObjectNameSingular.Event,
+    filter: {
+      [targetableObjectFieldIdName]: {
+        eq: targetableObject.id,
+      },
+    },
+    orderBy: {
+      createdAt: 'DescNullsFirst',
+    },
+  });
+
+  return {
+    events: events as Event[],
+  };
+};
--- a/packages/twenty-front/src/modules/activities/events/types/Event.ts
+++ b/packages/twenty-front/src/modules/activities/events/types/Event.ts
@ -0,0 +1,12 @@
+export type Event = {
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  deletedAt: string | null;
+  opportunityId: string | null;
+  companyId: string;
+  personId: string;
+  workspaceMemberId: string;
+  properties: any;
+  name: string;
+};
--- a/packages/twenty-front/src/modules/object-metadata/types/CoreObjectNameSingular.ts
+++ b/packages/twenty-front/src/modules/object-metadata/types/CoreObjectNameSingular.ts
@ -8,6 +8,7 @@ export enum CoreObjectNameSingular {
  Comment = 'comment',
  Company = 'company',
  ConnectedAccount = 'connectedAccount',
+  Event = 'event',
  Favorite = 'favorite',
  Message = 'message',
  MessageChannel = 'messageChannel',
--- a/packages/twenty-front/src/modules/object-metadata/utils/mapFieldMetadataToGraphQLQuery.ts
+++ b/packages/twenty-front/src/modules/object-metadata/utils/mapFieldMetadataToGraphQLQuery.ts
@ -34,6 +34,7 @@ export const mapFieldMetadataToGraphQLQuery = ({
      'RATING',
      'SELECT',
      'POSITION',
+      'RAW_JSON',
    ] as FieldMetadataType[]
  ).includes(fieldType);

--- a/packages/twenty-front/src/modules/object-record/record-field/types/FieldMetadata.ts
+++ b/packages/twenty-front/src/modules/object-record/record-field/types/FieldMetadata.ts
@ -69,6 +69,11 @@ export type FieldRatingMetadata = {
  fieldName: string;
 };

+export type FieldRawJsonMetadata = {
+  objectMetadataNameSingular?: string;
+  fieldName: string;
+};
+
 export type FieldDefinitionRelationType =
  | 'FROM_MANY_OBJECTS'
  | 'FROM_ONE_OBJECT'
--- a/packages/twenty-front/src/modules/object-record/record-field/types/FieldType.ts
+++ b/packages/twenty-front/src/modules/object-record/record-field/types/FieldType.ts
@ -17,4 +17,5 @@ export type FieldType =
  | 'URL'
  | 'UUID'
  | 'MULTI_SELECT'
-  | 'NUMERIC';
+  | 'NUMERIC'
+  | 'RAW_JSON';
--- a/packages/twenty-front/src/modules/object-record/record-field/types/guards/assertFieldMetadata.ts
+++ b/packages/twenty-front/src/modules/object-record/record-field/types/guards/assertFieldMetadata.ts
@ -10,6 +10,7 @@ import {
  FieldNumberMetadata,
  FieldPhoneMetadata,
  FieldRatingMetadata,
+  FieldRawJsonMetadata,
  FieldRelationMetadata,
  FieldSelectMetadata,
  FieldTextMetadata,
@ -47,7 +48,9 @@ type AssertFieldMetadataFunction = <
                            ? FieldTextMetadata
                            : E extends 'UUID'
                              ? FieldUuidMetadata
-                              : never,
+                              : E extends 'RAW_JSON'
+                                ? FieldRawJsonMetadata
+                                : never,
 >(
  fieldType: E,
  fieldTypeGuard: (
--- a/packages/twenty-front/src/modules/object-record/record-field/types/guards/isFieldRawJson.ts
+++ b/packages/twenty-front/src/modules/object-record/record-field/types/guards/isFieldRawJson.ts
@ -0,0 +1,6 @@
+import { FieldDefinition } from '../FieldDefinition';
+import { FieldMetadata, FieldRawJsonMetadata } from '../FieldMetadata';
+
+export const isFieldRawJson = (
+  field: Pick<FieldDefinition<FieldMetadata>, 'type'>,
+): field is FieldDefinition<FieldRawJsonMetadata> => field.type === 'RAW_JSON';
--- a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx
@ -3,6 +3,7 @@ import { useRecoilValue } from 'recoil';

 import { Calendar } from '@/activities/calendar/components/Calendar';
 import { EmailThreads } from '@/activities/emails/components/EmailThreads';
+import { Events } from '@/activities/events/components/Events';
 import { Attachments } from '@/activities/files/components/Attachments';
 import { Notes } from '@/activities/notes/components/Notes';
 import { ObjectTasks } from '@/activities/tasks/components/ObjectTasks';
@ -65,6 +66,8 @@ export const ShowPageRightContainer = ({
  const activeTabId = useRecoilValue(activeTabIdState);

  const shouldDisplayCalendarTab = useIsFeatureEnabled('IS_CALENDAR_ENABLED');
+  const shouldDisplayLogTab = useIsFeatureEnabled('IS_EVENT_OBJECT_ENABLED');
+
  const shouldDisplayEmailsTab =
    (emails &&
      targetableObject.targetObjectNameSingular ===
@ -101,7 +104,6 @@ export const ShowPageRightContainer = ({
      title: 'Emails',
      Icon: IconMail,
      hide: !shouldDisplayEmailsTab,
-      hasBetaPill: true,
    },
    {
      id: 'calendar',
@ -109,6 +111,13 @@ export const ShowPageRightContainer = ({
      Icon: IconCalendarEvent,
      hide: !shouldDisplayCalendarTab,
    },
+    {
+      id: 'logs',
+      title: 'Logs',
+      Icon: IconTimelineEvent,
+      hide: !shouldDisplayLogTab,
+      hasBetaPill: true,
+    },
  ];

  return (
@ -131,6 +140,7 @@ export const ShowPageRightContainer = ({
      )}
      {activeTabId === 'emails' && <EmailThreads entity={targetableObject} />}
      {activeTabId === 'calendar' && <Calendar />}
+      {activeTabId === 'logs' && <Events targetableObject={targetableObject} />}
    </StyledShowPageRightContainer>
  );
 };