feat: soft delete

packages/twenty-front/.storybook/main.ts

@@ -45,5 +45,16 @@ const config: StorybookConfig = {
     name: '@storybook/react-vite',
     options: {},
   },
+  viteFinal: async (config) => {
+    // Merge custom configuration into the default config
+    const { mergeConfig } = await import('vite');
+
+    return mergeConfig(config, {
+      // Add dependencies to pre-optimization
+      optimizeDeps: {
+        exclude: ['@tabler/icons-react'],
+      },
+    });
+  },
 };
 export default config;

packages/twenty-front/src/generated-metadata/graphql.ts

@@ -344,9 +344,9 @@ export type FieldConnection = {
 
 /** Type of the field */
 export enum FieldMetadataType {
+  Actor = 'ACTOR',
   Address = 'ADDRESS',
   Boolean = 'BOOLEAN',
-  Actor = 'ACTOR',
   Currency = 'CURRENCY',
   Date = 'DATE',
   DateTime = 'DATE_TIME',
@@ -452,13 +452,13 @@ export type Mutation = {
   generateTransientToken: TransientToken;
   impersonate: Verify;
   renewToken: AuthTokens;
+  runWorkflowVersion: WorkflowTriggerResult;
   sendInviteLink: SendInviteLink;
   signUp: LoginToken;
   skipSyncEmailOnboardingStep: OnboardingStepSuccess;
   syncRemoteTable: RemoteTable;
   syncRemoteTableSchemaChanges: RemoteTable;
   track: Analytics;
-  triggerWorkflow: WorkflowTriggerResult;
   unsyncRemoteTable: RemoteTable;
   updateBillingSubscription: UpdateBillingEntity;
   updateOneField: Field;
@@ -610,6 +610,11 @@ export type MutationRenewTokenArgs = {
 };
 
 
+export type MutationRunWorkflowVersionArgs = {
+  input: RunWorkflowVersionInput;
+};
+
+
 export type MutationSendInviteLinkArgs = {
   emails: Array<Scalars['String']['input']>;
 };
@@ -639,11 +644,6 @@ export type MutationTrackArgs = {
 };
 
 
-export type MutationTriggerWorkflowArgs = {
-  workflowVersionId: Scalars['String']['input'];
-};
-
-
 export type MutationUnsyncRemoteTableArgs = {
   input: RemoteTableInput;
 };
@@ -1001,6 +1001,13 @@ export enum RemoteTableStatus {
   Synced = 'SYNCED'
 }
 
+export type RunWorkflowVersionInput = {
+  /** Execution result in JSON format */
+  payload?: InputMaybe<Scalars['JSON']['input']>;
+  /** Workflow version ID */
+  workflowVersionId: Scalars['String']['input'];
+};
+
 export type SendInviteLink = {
   __typename?: 'SendInviteLink';
   /** Boolean that confirms query was dispatched */
@@ -1400,6 +1407,7 @@ export type WorkspaceFeatureFlagsArgs = {
 export enum WorkspaceActivationStatus {
   Active = 'ACTIVE',
   Inactive = 'INACTIVE',
+  OngoingCreation = 'ONGOING_CREATION',
   PendingCreation = 'PENDING_CREATION'
 }
 

packages/twenty-front/src/generated/graphql.tsx

@@ -1,5 +1,5 @@
-import * as Apollo from '@apollo/client';
 import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
 export type Maybe<T> = T | null;
 export type InputMaybe<T> = Maybe<T>;
 export type Exact<T extends { [key: string]: unknown }> = { [K in keyof T]: T[K] };
@@ -249,9 +249,9 @@ export type FieldConnection = {
 
 /** Type of the field */
 export enum FieldMetadataType {
+  Actor = 'ACTOR',
   Address = 'ADDRESS',
   Boolean = 'BOOLEAN',
-  Actor = 'ACTOR',
   Currency = 'CURRENCY',
   Date = 'DATE',
   DateTime = 'DATE_TIME',
@@ -344,11 +344,11 @@ export type Mutation = {
   generateTransientToken: TransientToken;
   impersonate: Verify;
   renewToken: AuthTokens;
+  runWorkflowVersion: WorkflowTriggerResult;
   sendInviteLink: SendInviteLink;
   signUp: LoginToken;
   skipSyncEmailOnboardingStep: OnboardingStepSuccess;
   track: Analytics;
-  triggerWorkflow: WorkflowTriggerResult;
   updateBillingSubscription: UpdateBillingEntity;
   updateOneObject: Object;
   updateOneServerlessFunction: ServerlessFunction;
@@ -457,6 +457,11 @@ export type MutationRenewTokenArgs = {
 };
 
 
+export type MutationRunWorkflowVersionArgs = {
+  input: RunWorkflowVersionInput;
+};
+
+
 export type MutationSendInviteLinkArgs = {
   emails: Array<Scalars['String']>;
 };
@@ -476,11 +481,6 @@ export type MutationTrackArgs = {
 };
 
 
-export type MutationTriggerWorkflowArgs = {
-  workflowVersionId: Scalars['String'];
-};
-
-
 export type MutationUpdateOneObjectArgs = {
   input: UpdateOneObjectInput;
 };
@@ -743,6 +743,13 @@ export enum RemoteTableStatus {
   Synced = 'SYNCED'
 }
 
+export type RunWorkflowVersionInput = {
+  /** Execution result in JSON format */
+  payload?: InputMaybe<Scalars['JSON']>;
+  /** Workflow version ID */
+  workflowVersionId: Scalars['String'];
+};
+
 export type SendInviteLink = {
   __typename?: 'SendInviteLink';
   /** Boolean that confirms query was dispatched */
@@ -1087,6 +1094,7 @@ export type WorkspaceFeatureFlagsArgs = {
 export enum WorkspaceActivationStatus {
   Active = 'ACTIVE',
   Inactive = 'INACTIVE',
+  OngoingCreation = 'ONGOING_CREATION',
   PendingCreation = 'PENDING_CREATION'
 }
 

packages/twenty-front/src/modules/activities/timelineActivities/rows/components/EventIconDynamicComponent.tsx

@@ -1,4 +1,4 @@
-import { IconCirclePlus, IconEditCircle, useIcons } from 'twenty-ui';
+import { IconCirclePlus, IconEditCircle, IconTrash, useIcons } from 'twenty-ui';
 
 import { TimelineActivity } from '@/activities/timelineActivities/types/TimelineActivity';
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
@@ -19,6 +19,9 @@ export const EventIconDynamicComponent = ({
   if (eventAction === 'updated') {
     return <IconEditCircle />;
   }
+  if (eventAction === 'deleted') {
+    return <IconTrash />;
+  }
 
   const IconComponent = getIcon(linkedObjectMetadataItem?.icon);
 

packages/twenty-front/src/modules/activities/timelineActivities/rows/main-object/components/EventRowMainObject.tsx

@@ -45,6 +45,17 @@ export const EventRowMainObject = ({
         />
       );
     }
+    case 'deleted': {
+      return (
+        <StyledMainContainer>
+          <StyledEventRowItemColumn>
+            {labelIdentifierValue}
+          </StyledEventRowItemColumn>
+          <StyledEventRowItemAction>was deleted by</StyledEventRowItemAction>
+          <StyledEventRowItemColumn>{authorFullName}</StyledEventRowItemColumn>
+        </StyledMainContainer>
+      );
+    }
     default:
       return null;
   }

packages/twenty-front/src/modules/information-banner/components/InformationBanner.tsx

@@ -1,6 +1,6 @@
 import { Button } from '@/ui/input/button/components/Button';
 import styled from '@emotion/styled';
-import { Banner, IconComponent } from 'twenty-ui';
+import { Banner, BannerVariant, IconComponent } from 'twenty-ui';
 
 const StyledBanner = styled(Banner)`
   position: absolute;
@@ -14,26 +14,30 @@ const StyledText = styled.div`
 
 export const InformationBanner = ({
   message,
+  variant = 'default',
   buttonTitle,
   buttonIcon,
   buttonOnClick,
 }: {
   message: string;
-  buttonTitle: string;
+  variant?: BannerVariant;
+  buttonTitle?: string;
   buttonIcon?: IconComponent;
-  buttonOnClick: () => void;
+  buttonOnClick?: () => void;
 }) => {
   return (
-    <StyledBanner>
+    <StyledBanner variant={variant}>
       <StyledText>{message}</StyledText>
-      <Button
-        variant="secondary"
-        title={buttonTitle}
-        Icon={buttonIcon}
-        size="small"
-        inverted
-        onClick={buttonOnClick}
-      />
+      {buttonTitle && buttonOnClick && (
+        <Button
+          variant="secondary"
+          title={buttonTitle}
+          Icon={buttonIcon}
+          size="small"
+          inverted
+          onClick={buttonOnClick}
+        />
+      )}
     </StyledBanner>
   );
 };

packages/twenty-front/src/modules/information-banner/components/deleted-record/InformationBannerDeletedRecord.tsx

@@ -0,0 +1,37 @@
+import { InformationBanner } from '@/information-banner/components/InformationBanner';
+import { useRestoreManyRecords } from '@/object-record/hooks/useRestoreManyRecords';
+import styled from '@emotion/styled';
+import { IconRefresh } from 'twenty-ui';
+
+const StyledInformationBannerDeletedRecord = styled.div`
+  height: 40px;
+  position: relative;
+
+  &:empty {
+    height: 0;
+  }
+`;
+
+export const InformationBannerDeletedRecord = ({
+  recordId,
+  objectNameSingular,
+}: {
+  recordId: string;
+  objectNameSingular: string;
+}) => {
+  const { restoreManyRecords } = useRestoreManyRecords({
+    objectNameSingular,
+  });
+
+  return (
+    <StyledInformationBannerDeletedRecord>
+      <InformationBanner
+        variant="danger"
+        message={`This record has been deleted`}
+        buttonTitle="Restore"
+        buttonIcon={IconRefresh}
+        buttonOnClick={() => restoreManyRecords([recordId])}
+      />
+    </StyledInformationBannerDeletedRecord>
+  );
+};

packages/twenty-front/src/modules/information-banner/constants/InformationBannerHeight.ts

@@ -0,0 +1 @@
+export const INFORMATION_BANNER_HEIGHT = '40px';

packages/twenty-front/src/modules/object-record/hooks/useDeleteManyRecords.ts

@@ -13,7 +13,7 @@ import { isDefined } from '~/utils/isDefined';
 import { sleep } from '~/utils/sleep';
 import { capitalize } from '~/utils/string/capitalize';
 
-type useDeleteOneRecordProps = {
+type useDeleteManyRecordProps = {
   objectNameSingular: string;
   refetchFindManyQuery?: boolean;
 };
@@ -25,7 +25,7 @@ type DeleteManyRecordsOptions = {
 
 export const useDeleteManyRecords = ({
   objectNameSingular,
-}: useDeleteOneRecordProps) => {
+}: useDeleteManyRecordProps) => {
   const apiConfig = useRecoilValue(apiConfigState);
 
   const mutationPageSize =

packages/twenty-front/src/modules/object-record/hooks/useDestroyManyRecordMutation.ts

@@ -0,0 +1,41 @@
+import gql from 'graphql-tag';
+
+import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
+import { EMPTY_MUTATION } from '@/object-record/constants/EmptyMutation';
+import { getDestroyManyRecordsMutationResponseField } from '@/object-record/utils/getDestroyManyRecordsMutationResponseField';
+import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
+import { capitalize } from '~/utils/string/capitalize';
+
+export const useDestroyManyRecordsMutation = ({
+  objectNameSingular,
+}: {
+  objectNameSingular: string;
+}) => {
+  const { objectMetadataItem } = useObjectMetadataItem({
+    objectNameSingular,
+  });
+
+  if (isUndefinedOrNull(objectMetadataItem)) {
+    return { destroyManyRecordsMutation: EMPTY_MUTATION };
+  }
+
+  const capitalizedObjectName = capitalize(objectMetadataItem.namePlural);
+
+  const mutationResponseField = getDestroyManyRecordsMutationResponseField(
+    objectMetadataItem.namePlural,
+  );
+
+  const destroyManyRecordsMutation = gql`
+    mutation DestroyMany${capitalizedObjectName}($filter: ${capitalize(
+      objectMetadataItem.nameSingular,
+    )}FilterInput!)  {
+      ${mutationResponseField}(filter: $filter) {
+        id
+      }
+    }
+  `;
+
+  return {
+    destroyManyRecordsMutation,
+  };
+};