feat: soft delete

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/modules/object-record/object-filter-dropdown/types/Filter.ts

@@ -4,6 +4,7 @@ import { FilterDefinition } from './FilterDefinition';
 
 export type Filter = {
   id: string;
+  variant?: 'default' | 'trash';
   fieldMetadataId: string;
   value: string;
   displayValue: string;

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

@@ -0,0 +1,67 @@
+import { useCallback } from 'react';
+import { v4 } from 'uuid';
+
+import { useColumnDefinitionsFromFieldMetadata } from '@/object-metadata/hooks/useColumnDefinitionsFromFieldMetadata';
+import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
+import { getFilterTypeFromFieldType } from '@/object-metadata/utils/formatFieldMetadataItemsAsFilterDefinitions';
+import { Filter } from '@/object-record/object-filter-dropdown/types/Filter';
+import { useCombinedViewFilters } from '@/views/hooks/useCombinedViewFilters';
+import { isDefined } from '~/utils/isDefined';
+import { ViewFilterOperand } from '@/views/types/ViewFilterOperand';
+
+type UseHandleToggleTrashColumnFilterProps = {
+  objectNameSingular: string;
+  viewBarId: string;
+};
+
+export const useHandleToggleTrashColumnFilter = ({
+  viewBarId,
+  objectNameSingular,
+}: UseHandleToggleTrashColumnFilterProps) => {
+  const { objectMetadataItem } = useObjectMetadataItem({
+    objectNameSingular,
+  });
+
+  const { columnDefinitions } =
+    useColumnDefinitionsFromFieldMetadata(objectMetadataItem);
+
+  const { upsertCombinedViewFilter } = useCombinedViewFilters(viewBarId);
+
+  const handleToggleTrashColumnFilter = useCallback(() => {
+    const trashFieldMetadata = objectMetadataItem.fields.find(
+      (field) => field.name === 'deletedAt',
+    );
+
+    if (!isDefined(trashFieldMetadata)) return;
+
+    const correspondingColumnDefinition = columnDefinitions.find(
+      (columnDefinition) =>
+        columnDefinition.fieldMetadataId === trashFieldMetadata.id,
+    );
+
+    if (!isDefined(correspondingColumnDefinition)) return;
+
+    const filterType = getFilterTypeFromFieldType(
+      correspondingColumnDefinition?.type,
+    );
+
+    const newFilter: Filter = {
+      id: v4(),
+      variant: 'trash',
+      fieldMetadataId: trashFieldMetadata.id,
+      operand: ViewFilterOperand.IsNotEmpty,
+      displayValue: '',
+      definition: {
+        label: 'Trash',
+        iconName: 'IconTrash',
+        fieldMetadataId: trashFieldMetadata.id,
+        type: filterType,
+      },
+      value: '',
+    };
+
+    upsertCombinedViewFilter(newFilter);
+  }, [columnDefinitions, objectMetadataItem.fields, upsertCombinedViewFilter]);
+
+  return handleToggleTrashColumnFilter;
+};

packages/twenty-front/src/modules/object-record/record-index/options/components/RecordIndexOptionsDropdownContent.tsx

@@ -8,6 +8,7 @@ import {
   IconFileImport,
   IconSettings,
   IconTag,
+  IconTrash,
 } from 'twenty-ui';
 
 import { useObjectNamePluralFromSingular } from '@/object-metadata/hooks/useObjectNamePluralFromSingular';
@@ -37,6 +38,7 @@ import { useGetCurrentView } from '@/views/hooks/useGetCurrentView';
 import { ViewType } from '@/views/types/ViewType';
 import { useLocation } from 'react-router-dom';
 import { useSetRecoilState } from 'recoil';
+import { useHandleToggleTrashColumnFilter } from '@/object-record/record-index/hooks/useHandleToggleTrashColumnFilter';
 
 type RecordIndexOptionsMenu = 'fields' | 'hiddenFields';
 
@@ -88,6 +90,11 @@ export const RecordIndexOptionsDropdownContent = ({
     hiddenTableColumns,
   } = useRecordIndexOptionsForTable(recordIndexId);
 
+  const handleToggleTrashColumnFilter = useHandleToggleTrashColumnFilter({
+    objectNameSingular,
+    viewBarId: recordIndexId,
+  });
+
   const {
     visibleBoardFields,
     hiddenBoardFields,
@@ -153,6 +160,14 @@ export const RecordIndexOptionsDropdownContent = ({
             LeftIcon={IconFileExport}
             text={displayedExportProgress(progress)}
           />
+          <MenuItem
+            onClick={() => {
+              handleToggleTrashColumnFilter();
+              closeDropdown();
+            }}
+            LeftIcon={IconTrash}
+            text="Trash"
+          />
         </DropdownMenuItemsContainer>
       )}
       {currentMenu === 'fields' && (

packages/twenty-front/src/modules/views/components/SortOrFilterChip.tsx

@@ -2,12 +2,37 @@ import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { IconComponent, IconX } from 'twenty-ui';
 
-const StyledChip = styled.div`
+const StyledChip = styled.div<{ variant: SortOrFitlerChipVariant }>`
   align-items: center;
-  background-color: ${({ theme }) => theme.accent.quaternary};
-  border: 1px solid ${({ theme }) => theme.accent.tertiary};
+  background-color: ${({ theme, variant }) => {
+    switch (variant) {
+      case 'delete':
+        return theme.background.danger;
+      case 'default':
+      default:
+        return theme.accent.quaternary;
+    }
+  }};
+  border: 1px solid
+    ${({ theme, variant }) => {
+      switch (variant) {
+        case 'delete':
+          return theme.border.color.danger;
+        case 'default':
+        default:
+          return theme.accent.tertiary;
+      }
+    }};
   border-radius: 4px;
-  color: ${({ theme }) => theme.color.blue};
+  color: ${({ theme, variant }) => {
+    switch (variant) {
+      case 'delete':
+        return theme.color.red;
+      case 'default':
+      default:
+        return theme.color.blue;
+    }
+  }};
   cursor: pointer;
   display: flex;
   flex-direction: row;
@@ -24,7 +49,7 @@ const StyledIcon = styled.div`
   margin-right: ${({ theme }) => theme.spacing(1)};
 `;
 
-const StyledDelete = styled.div`
+const StyledDelete = styled.div<{ variant: SortOrFitlerChipVariant }>`
   align-items: center;
   cursor: pointer;
   display: flex;
@@ -33,7 +58,15 @@ const StyledDelete = styled.div`
   margin-top: 1px;
   user-select: none;
   &:hover {
-    background-color: ${({ theme }) => theme.accent.secondary};
+    background-color: ${({ theme, variant }) => {
+      switch (variant) {
+        case 'delete':
+          return theme.color.red20;
+        case 'default':
+        default:
+          return theme.accent.secondary;
+      }
+    }};
     border-radius: ${({ theme }) => theme.border.radius.sm};
   }
 `;
@@ -42,9 +75,12 @@ const StyledLabelKey = styled.div`
   font-weight: ${({ theme }) => theme.font.weight.medium};
 `;
 
+type SortOrFitlerChipVariant = 'default' | 'delete';
+
 type SortOrFilterChipProps = {
   labelKey?: string;
   labelValue: string;
+  variant?: SortOrFitlerChipVariant;
   Icon?: IconComponent;
   onRemove: () => void;
   onClick?: () => void;
@@ -54,6 +90,7 @@ type SortOrFilterChipProps = {
 export const SortOrFilterChip = ({
   labelKey,
   labelValue,
+  variant = 'default',
   Icon,
   onRemove,
   testId,
@@ -67,7 +104,7 @@ export const SortOrFilterChip = ({
   };
 
   return (
-    <StyledChip onClick={onClick}>
+    <StyledChip onClick={onClick} variant={variant}>
       {Icon && (
         <StyledIcon>
           <Icon size={theme.icon.size.sm} />
@@ -76,6 +113,7 @@ export const SortOrFilterChip = ({
       {labelKey && <StyledLabelKey>{labelKey}</StyledLabelKey>}
       {labelValue}
       <StyledDelete
+        variant={variant}
         onClick={handleDeleteClick}
         data-testid={'remove-icon-' + testId}
       >

packages/twenty-front/src/modules/views/components/VariantFilterChip.tsx

@@ -0,0 +1,41 @@
+import { useIcons } from 'twenty-ui';
+
+import { SortOrFilterChip } from '@/views/components/SortOrFilterChip';
+import { Filter } from '@/object-record/object-filter-dropdown/types/Filter';
+import { useCombinedViewFilters } from '@/views/hooks/useCombinedViewFilters';
+import { useMemo } from 'react';
+
+type VariantFilterChipProps = {
+  viewFilter: Filter;
+};
+
+export const VariantFilterChip = ({ viewFilter }: VariantFilterChipProps) => {
+  const { removeCombinedViewFilter } = useCombinedViewFilters();
+
+  const { getIcon } = useIcons();
+
+  const handleRemoveClick = () => {
+    removeCombinedViewFilter(viewFilter.id);
+  };
+
+  const variant = useMemo(() => {
+    switch (viewFilter.variant) {
+      case 'trash':
+        return 'delete';
+      case 'default':
+      default:
+        return 'default';
+    }
+  }, [viewFilter.variant]);
+
+  return (
+    <SortOrFilterChip
+      key={viewFilter.fieldMetadataId}
+      testId={viewFilter.fieldMetadataId}
+      variant={variant}
+      labelValue={viewFilter.definition.label}
+      Icon={getIcon(viewFilter.definition.iconName)}
+      onRemove={handleRemoveClick}
+    />
+  );
+};