Enable deletion of relation fields (#5338)

In this PR 1. Enable deletion of relation fields in the product and via the api (migration part was missing in the api) 3. Change wording, only use "deactivate" and "delete" everywhere (and not a mix of the two + "disable", "erase")
2024-05-13 17:43:51 +02:00
parent 0018ec78b0
commit b9154f315e
30 changed files with 519 additions and 117 deletions
--- a/packages/twenty-front/src/modules/object-metadata/graphql/mutations.ts
+++ b/packages/twenty-front/src/modules/object-metadata/graphql/mutations.ts
@ -139,3 +139,11 @@ export const DELETE_ONE_FIELD_METADATA_ITEM = gql`
    }
  }
 `;
+
+export const DELETE_ONE_RELATION_METADATA_ITEM = gql`
+  mutation DeleteOneRelationMetadataItem($idToDelete: UUID!) {
+    deleteOneRelation(input: { id: $idToDelete }) {
+      id
+    }
+  }
+`;
--- a/packages/twenty-front/src/modules/object-metadata/graphql/queries.ts
+++ b/packages/twenty-front/src/modules/object-metadata/graphql/queries.ts
@ -68,6 +68,7 @@ export const FIND_MANY_OBJECT_METADATA_ITEMS = gql`
                defaultValue
                options
                relationDefinition {
+                  relationId
                  direction
                  sourceObjectMetadata {
                    id
--- a/packages/twenty-front/src/modules/object-metadata/hooks/mocks/useDeleteOneRelationMetadataItem.ts
+++ b/packages/twenty-front/src/modules/object-metadata/hooks/mocks/useDeleteOneRelationMetadataItem.ts
@ -0,0 +1,15 @@
+import { gql } from '@apollo/client';
+
+export const query = gql`
+  mutation DeleteOneRelationMetadataItem($idToDelete: UUID!) {
+    deleteOneRelation(input: { id: $idToDelete }) {
+      id
+    }
+  }
+`;
+
+export const variables = { idToDelete: 'idToDelete' };
+
+export const responseData = {
+  id: 'idToDelete'
+};
--- a/packages/twenty-front/src/modules/object-metadata/hooks/mocks/useFieldMetadataItem.ts
+++ b/packages/twenty-front/src/modules/object-metadata/hooks/mocks/useFieldMetadataItem.ts
@ -1,4 +1,9 @@
 import { gql } from '@apollo/client';
+import { FieldMetadataType } from '~/generated/graphql';
+
+export const FIELD_METADATA_ID = '2c43466a-fe9e-4005-8d08-c5836067aa6c';
+export const FIELD_RELATION_METADATA_ID = '4da0302d-358a-45cd-9973-9f92723ed3c1';
+export const RELATION_METADATA_ID = 'f81d4fae-7dec-11d0-a765-00a0c91e6bf6';

 const baseFields = `
  id
@ -15,13 +20,20 @@ const baseFields = `
 `;

 export const queries = {
-  eraseMetadataField: gql`
+  deleteMetadataField: gql`
    mutation DeleteOneFieldMetadataItem($idToDelete: UUID!) {
      deleteOneField(input: { id: $idToDelete }) {
        ${baseFields}
      }
    }
  `,
+  deleteMetadataFieldRelation: gql`
+  mutation DeleteOneRelationMetadataItem($idToDelete: UUID!) {
+    deleteOneRelation(input: { id: $idToDelete }) {
+      id
+    }
+  }
+`,
  activateMetadataField: gql`
    mutation UpdateOneFieldMetadataItem(
      $idToUpdate: UUID!
@ -43,13 +55,13 @@ export const queries = {
  `,
 };

-const fieldId = '2c43466a-fe9e-4005-8d08-c5836067aa6c';
 export const objectMetadataId = '25611fce-6637-4089-b0ca-91afeec95784';

 export const variables = {
-  eraseMetadataField: { idToDelete: fieldId },
+  deleteMetadataField: { idToDelete: FIELD_METADATA_ID },
+  deleteMetadataFieldRelation: { idToDelete: RELATION_METADATA_ID },
  activateMetadataField: {
-    idToUpdate: fieldId,
+    idToUpdate: FIELD_METADATA_ID,
    updatePayload: { isActive: true, label: undefined },
  },
  createMetadataField: {
@ -66,14 +78,14 @@ export const variables = {
      },
    },
  },
-  disableMetadataField: {
-    idToUpdate: fieldId,
+  deactivateMetadataField: {
+    idToUpdate: FIELD_METADATA_ID,
    updatePayload: { isActive: false, label: undefined },
  }
 };

 const defaultResponseData = {
-  id: '2c43466a-fe9e-4005-8d08-c5836067aa6c',
+  id: FIELD_METADATA_ID,
  type: 'type',
  name: 'name',
  label: 'label',
@ -86,11 +98,19 @@ const defaultResponseData = {
  updatedAt: '1996-10-10T08:27:57.117Z',
 };

+const fieldRelationResponseData = {
+  ...defaultResponseData,
+  id: FIELD_RELATION_METADATA_ID,
+  type: FieldMetadataType.Relation,
+};
+
 export const responseData = {
  default: defaultResponseData,
+  fieldRelation: fieldRelationResponseData,
  createMetadataField: {
    ...defaultResponseData,
    defaultValue: '',
    options: [],
  },
 };
+
--- a/packages/twenty-front/src/modules/object-metadata/hooks/tests/useDeleteOneRelationMetadataItem.test.tsx
+++ b/packages/twenty-front/src/modules/object-metadata/hooks/tests/useDeleteOneRelationMetadataItem.test.tsx
@ -0,0 +1,49 @@
+import { ReactNode } from 'react';
+import { MockedProvider } from '@apollo/client/testing';
+import { act, renderHook } from '@testing-library/react';
+import { RecoilRoot } from 'recoil';
+
+import { useDeleteOneRelationMetadataItem } from '@/object-metadata/hooks/useDeleteOneRelationMetadataItem';
+
+import {
+  query,
+  responseData,
+  variables,
+} from '../__mocks__/useDeleteOneRelationMetadataItem';
+
+const mocks = [
+  {
+    request: {
+      query,
+      variables,
+    },
+    result: jest.fn(() => ({
+      data: {
+        deleteOneRelation: responseData,
+      },
+    })),
+  },
+];
+
+const Wrapper = ({ children }: { children: ReactNode }) => (
+  <RecoilRoot>
+    <MockedProvider mocks={mocks} addTypename={false}>
+      {children}
+    </MockedProvider>
+  </RecoilRoot>
+);
+
+describe('useDeleteOneRelationMetadataItem', () => {
+  it('should work as expected', async () => {
+    const { result } = renderHook(() => useDeleteOneRelationMetadataItem(), {
+      wrapper: Wrapper,
+    });
+
+    await act(async () => {
+      const res =
+        await result.current.deleteOneRelationMetadataItem('idToDelete');
+
+      expect(res.data).toEqual({ deleteOneRelation: responseData });
+    });
+  });
+});
--- a/packages/twenty-front/src/modules/object-metadata/hooks/tests/useFieldMetadataItem.test.tsx
+++ b/packages/twenty-front/src/modules/object-metadata/hooks/tests/useFieldMetadataItem.test.tsx
@ -5,17 +5,20 @@ import { RecoilRoot } from 'recoil';

 import { useFieldMetadataItem } from '@/object-metadata/hooks/useFieldMetadataItem';
 import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
-import { FieldMetadataType } from '~/generated/graphql';
+import { FieldMetadataType, RelationDefinitionType } from '~/generated/graphql';

 import {
+  FIELD_METADATA_ID,
+  FIELD_RELATION_METADATA_ID,
  objectMetadataId,
  queries,
+  RELATION_METADATA_ID,
  responseData,
  variables,
 } from '../__mocks__/useFieldMetadataItem';

 const fieldMetadataItem: FieldMetadataItem = {
-  id: '2c43466a-fe9e-4005-8d08-c5836067aa6c',
+  id: FIELD_METADATA_ID,
  createdAt: '',
  label: 'label',
  name: 'name',
@ -23,11 +26,42 @@ const fieldMetadataItem: FieldMetadataItem = {
  updatedAt: '',
 };

+const fieldRelationMetadataItem: FieldMetadataItem = {
+  id: FIELD_RELATION_METADATA_ID,
+  createdAt: '',
+  label: 'label',
+  name: 'name',
+  type: FieldMetadataType.Relation,
+  updatedAt: '',
+  relationDefinition: {
+    relationId: RELATION_METADATA_ID,
+    direction: RelationDefinitionType.OneToMany,
+    sourceFieldMetadata: {
+      id: 'e5903d91-9b10-4f3e-b761-35c36e93b7c1',
+      name: 'sourceField',
+    },
+    targetFieldMetadata: {
+      id: 'd23d82d4-690b-489f-a8e3-fc5ed01a91f6',
+      name: 'targetField',
+    },
+    sourceObjectMetadata: {
+      id: 'bf46be8a-7c47-45a7-b2f1-30f49e14fbd9',
+      nameSingular: 'sourceObject',
+      namePlural: 'sourceObjects',
+    },
+    targetObjectMetadata: {
+      id: '987c0489-2855-4a63-bb81-93692e51b2a9',
+      nameSingular: 'targetObject',
+      namePlural: 'targetObjects',
+    },
+  },
+};
+
 const mocks = [
  {
    request: {
-      query: queries.eraseMetadataField,
-      variables: variables.eraseMetadataField,
+      query: queries.deleteMetadataField,
+      variables: variables.deleteMetadataField,
    },
    result: jest.fn(() => ({
      data: {
@ -35,6 +69,17 @@ const mocks = [
      },
    })),
  },
+  {
+    request: {
+      query: queries.deleteMetadataFieldRelation,
+      variables: variables.deleteMetadataFieldRelation,
+    },
+    result: jest.fn(() => ({
+      data: {
+        deleteOneRelation: responseData.fieldRelation,
+      },
+    })),
+  },
  {
    request: {
      query: queries.activateMetadataField,
@ -60,7 +105,7 @@ const mocks = [
  {
    request: {
      query: queries.activateMetadataField,
-      variables: variables.disableMetadataField,
+      variables: variables.deactivateMetadataField,
    },
    result: jest.fn(() => ({
      data: {
@ -111,13 +156,14 @@ describe('useFieldMetadataItem', () => {
    });
  });

-  it('should disableMetadataField', async () => {
+  it('should deactivateMetadataField', async () => {
    const { result } = renderHook(() => useFieldMetadataItem(), {
      wrapper: Wrapper,
    });

    await act(async () => {
-      const res = await result.current.disableMetadataField(fieldMetadataItem);
+      const res =
+        await result.current.deactivateMetadataField(fieldMetadataItem);

      expect(res.data).toEqual({
        updateOneField: responseData.default,
@ -125,17 +171,33 @@ describe('useFieldMetadataItem', () => {
    });
  });

-  it('should eraseMetadataField', async () => {
+  it('should deleteOneFieldMetadataItem when calling deleteMetadataField for a non-relation field', async () => {
    const { result } = renderHook(() => useFieldMetadataItem(), {
      wrapper: Wrapper,
    });

    await act(async () => {
-      const res = await result.current.eraseMetadataField(fieldMetadataItem);
+      const res = await result.current.deleteMetadataField(fieldMetadataItem);

      expect(res.data).toEqual({
        deleteOneField: responseData.default,
      });
    });
  });
+
+  it('should deleteOneFieldMetadataItem when calling deleteMetadataField for a relation field', async () => {
+    const { result } = renderHook(() => useFieldMetadataItem(), {
+      wrapper: Wrapper,
+    });
+
+    await act(async () => {
+      const res = await result.current.deleteMetadataField(
+        fieldRelationMetadataItem,
+      );
+
+      expect(res.data).toEqual({
+        deleteOneRelation: responseData.fieldRelation,
+      });
+    });
+  });
 });
--- a/packages/twenty-front/src/modules/object-metadata/hooks/useDeleteOneRelationMetadataItem.ts
+++ b/packages/twenty-front/src/modules/object-metadata/hooks/useDeleteOneRelationMetadataItem.ts
@ -0,0 +1,39 @@
+import { ApolloClient, useMutation } from '@apollo/client';
+import { getOperationName } from '@apollo/client/utilities';
+
+import { DELETE_ONE_RELATION_METADATA_ITEM } from '@/object-metadata/graphql/mutations';
+import {
+  DeleteOneRelationMetadataItemMutation,
+  DeleteOneRelationMetadataItemMutationVariables,
+} from '~/generated-metadata/graphql';
+
+import { FIND_MANY_OBJECT_METADATA_ITEMS } from '../graphql/queries';
+
+import { useApolloMetadataClient } from './useApolloMetadataClient';
+
+export const useDeleteOneRelationMetadataItem = () => {
+  const apolloMetadataClient = useApolloMetadataClient();
+
+  const [mutate] = useMutation<
+    DeleteOneRelationMetadataItemMutation,
+    DeleteOneRelationMetadataItemMutationVariables
+  >(DELETE_ONE_RELATION_METADATA_ITEM, {
+    client: apolloMetadataClient ?? ({} as ApolloClient<any>),
+  });
+
+  const deleteOneRelationMetadataItem = async (
+    idToDelete: DeleteOneRelationMetadataItemMutationVariables['idToDelete'],
+  ) => {
+    return await mutate({
+      variables: {
+        idToDelete,
+      },
+      awaitRefetchQueries: true,
+      refetchQueries: [getOperationName(FIND_MANY_OBJECT_METADATA_ITEMS) ?? ''],
+    });
+  };
+
+  return {
+    deleteOneRelationMetadataItem,
+  };
+};
--- a/packages/twenty-front/src/modules/object-metadata/hooks/useFieldMetadataItem.ts
+++ b/packages/twenty-front/src/modules/object-metadata/hooks/useFieldMetadataItem.ts
@ -1,4 +1,6 @@
+import { useDeleteOneRelationMetadataItem } from '@/object-metadata/hooks/useDeleteOneRelationMetadataItem';
 import { Field } from '~/generated/graphql';
+import { FieldMetadataType } from '~/generated-metadata/graphql';

 import { FieldMetadataItem } from '../types/FieldMetadataItem';
 import { formatFieldMetadataItemInput } from '../utils/formatFieldMetadataItemInput';
@ -11,6 +13,7 @@ export const useFieldMetadataItem = () => {
  const { createOneFieldMetadataItem } = useCreateOneFieldMetadataItem();
  const { updateOneFieldMetadataItem } = useUpdateOneFieldMetadataItem();
  const { deleteOneFieldMetadataItem } = useDeleteOneFieldMetadataItem();
+  const { deleteOneRelationMetadataItem } = useDeleteOneRelationMetadataItem();

  const createMetadataField = (
    input: Pick<
@ -37,19 +40,24 @@ export const useFieldMetadataItem = () => {
      updatePayload: { isActive: true },
    });

-  const disableMetadataField = (metadataField: FieldMetadataItem) =>
+  const deactivateMetadataField = (metadataField: FieldMetadataItem) =>
    updateOneFieldMetadataItem({
      fieldMetadataIdToUpdate: metadataField.id,
      updatePayload: { isActive: false },
    });

-  const eraseMetadataField = (metadataField: FieldMetadataItem) =>
-    deleteOneFieldMetadataItem(metadataField.id);
+  const deleteMetadataField = (metadataField: FieldMetadataItem) => {
+    return metadataField.type === FieldMetadataType.Relation
+      ? deleteOneRelationMetadataItem(
+          metadataField.relationDefinition?.relationId,
+        )
+      : deleteOneFieldMetadataItem(metadataField.id);
+  };

  return {
    activateMetadataField,
    createMetadataField,
-    disableMetadataField,
-    eraseMetadataField,
+    deactivateMetadataField,
+    deleteMetadataField,
  };
 };
--- a/packages/twenty-front/src/modules/object-metadata/types/FieldMetadataItem.ts
+++ b/packages/twenty-front/src/modules/object-metadata/types/FieldMetadataItem.ts
@ -3,6 +3,7 @@ import {
  Field,
  Object as MetadataObject,
  Relation,
+  RelationDefinition,
  RelationDefinitionType,
 } from '~/generated-metadata/graphql';

@ -44,6 +45,7 @@ export type FieldMetadataItem = Omit<
  defaultValue?: any;
  options?: FieldMetadataItemOption[];
  relationDefinition?: {
+    relationId: RelationDefinition['relationId'];
    direction: RelationDefinitionType;
    sourceFieldMetadata: Pick<Field, 'id' | 'name'>;
    sourceObjectMetadata: Pick<
--- a/packages/twenty-front/src/modules/object-metadata/validation-schemas/fieldMetadataItemSchema.ts
+++ b/packages/twenty-front/src/modules/object-metadata/validation-schemas/fieldMetadataItemSchema.ts
@ -55,6 +55,7 @@ export const fieldMetadataItemSchema = z.object({
  relationDefinition: z
    .object({
      __typename: z.literal('RelationDefinition').optional(),
+      relationId: z.string().uuid(),
      direction: z.nativeEnum(RelationDefinitionType),
      sourceFieldMetadata: z.object({
        __typename: z.literal('field').optional(),
--- a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDisabledActionDropdown.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDisabledActionDropdown.tsx
@ -12,14 +12,14 @@ type SettingsObjectFieldInactiveActionDropdownProps = {
  isCustomField?: boolean;
  fieldType?: FieldMetadataType;
  onActivate: () => void;
-  onErase: () => void;
+  onDelete: () => void;
  scopeKey: string;
 };

 export const SettingsObjectFieldInactiveActionDropdown = ({
  onActivate,
  scopeKey,
-  onErase,
+  onDelete,
  isCustomField,
  fieldType,
 }: SettingsObjectFieldInactiveActionDropdownProps) => {
@ -32,15 +32,12 @@ export const SettingsObjectFieldInactiveActionDropdown = ({
    closeDropdown();
  };

-  const handleErase = () => {
-    onErase();
+  const handleDelete = () => {
+    onDelete();
    closeDropdown();
  };

-  const isErasable =
-    isCustomField &&
-    fieldType !== FieldMetadataType.Relation &&
-    fieldType !== FieldMetadataType.Address;
+  const isDeletable = isCustomField && fieldType !== FieldMetadataType.Address;

  return (
    <Dropdown
@ -56,12 +53,12 @@ export const SettingsObjectFieldInactiveActionDropdown = ({
              LeftIcon={IconArchiveOff}
              onClick={handleActivate}
            />
-            {isErasable && (
+            {isDeletable && (
              <MenuItem
-                text="Erase"
+                text="Delete"
                accent="danger"
                LeftIcon={IconTrash}
-                onClick={handleErase}
+                onClick={handleDelete}
              />
            )}
          </DropdownMenuItemsContainer>
--- a/packages/twenty-front/src/modules/settings/data-model/objects/SettingsObjectInactiveMenuDropDown.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/objects/SettingsObjectInactiveMenuDropDown.tsx
@ -10,14 +10,14 @@ import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 type SettingsObjectInactiveMenuDropDownProps = {
  isCustomObject: boolean;
  onActivate: () => void;
-  onErase: () => void;
+  onDelete: () => void;
  scopeKey: string;
 };

 export const SettingsObjectInactiveMenuDropDown = ({
  onActivate,
  scopeKey,
-  onErase,
+  onDelete,
  isCustomObject,
 }: SettingsObjectInactiveMenuDropDownProps) => {
  const dropdownId = `${scopeKey}-settings-object-inactive-menu-dropdown`;
@ -29,8 +29,8 @@ export const SettingsObjectInactiveMenuDropDown = ({
    closeDropdown();
  };

-  const handleErase = () => {
-    onErase();
+  const handleDelete = () => {
+    onDelete();
    closeDropdown();
  };

@ -50,10 +50,10 @@ export const SettingsObjectInactiveMenuDropDown = ({
            />
            {isCustomObject && (
              <MenuItem
-                text="Erase"
+                text="Delete"
                LeftIcon={IconTrash}
                accent="danger"
-                onClick={handleErase}
+                onClick={handleDelete}
              />
            )}
          </DropdownMenuItemsContainer>
--- a/packages/twenty-front/src/modules/settings/data-model/objects/stories/SettingsObjectInactiveMenuDropDown.stories.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/objects/stories/SettingsObjectInactiveMenuDropDown.stories.tsx
@ -5,12 +5,12 @@ import { ComponentDecorator } from 'twenty-ui';
 import { SettingsObjectInactiveMenuDropDown } from '../SettingsObjectInactiveMenuDropDown';

 const handleActivateMockFunction = fn();
-const handleEraseMockFunction = fn();
+const handleDeleteMockFunction = fn();

 const ClearMocksDecorator: Decorator = (Story, context) => {
  if (context.parameters.clearMocks === true) {
    handleActivateMockFunction.mockClear();
-    handleEraseMockFunction.mockClear();
+    handleDeleteMockFunction.mockClear();
  }
  return <Story />;
 };
@ -21,7 +21,7 @@ const meta: Meta<typeof SettingsObjectInactiveMenuDropDown> = {
  args: {
    scopeKey: 'settings-object-inactive-menu-dropdown',
    onActivate: handleActivateMockFunction,
-    onErase: handleEraseMockFunction,
+    onDelete: handleDeleteMockFunction,
  },
  decorators: [ComponentDecorator, ClearMocksDecorator],
  parameters: {
@ -64,7 +64,7 @@ export const WithActivate: Story = {
  },
 };

-export const WithErase: Story = {
+export const WithDelete: Story = {
  args: { isCustomObject: true },
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);
@ -73,13 +73,13 @@ export const WithErase: Story = {

    await userEvent.click(dropdownButton);

-    await expect(handleEraseMockFunction).toHaveBeenCalledTimes(0);
+    await expect(handleDeleteMockFunction).toHaveBeenCalledTimes(0);

-    const eraseMenuItem = await canvas.getByText('Erase');
+    const deleteMenuItem = await canvas.getByText('Delete');

-    await userEvent.click(eraseMenuItem);
+    await userEvent.click(deleteMenuItem);

-    await expect(handleEraseMockFunction).toHaveBeenCalledTimes(1);
+    await expect(handleDeleteMockFunction).toHaveBeenCalledTimes(1);

    await userEvent.click(dropdownButton);
  },