EditViewDataManagerProvider: Implement new relation data structure

packages/core/admin/admin/src/content-manager/components/EditViewDataManagerProvider/index.js

@@ -413,10 +413,11 @@ const EditViewDataManagerProvider = ({
     });
   }, []);
 
-  const onRemoveRelation = useCallback(keys => {
+  const removeRelation = useCallback(({ target: { name, value } }) => {
     dispatch({
       type: 'REMOVE_RELATION',
-      keys,
+      keys: name.split('.'),
+      value,
     });
   }, []);
 
@@ -491,7 +492,7 @@ const EditViewDataManagerProvider = ({
         onChange: handleChange,
         onPublish: handlePublish,
         onUnpublish,
-        onRemoveRelation,
+        removeRelation,
         readActionAllowedFields,
         redirectToPreviousPage,
         removeComponentFromDynamicZone,

packages/core/admin/admin/src/content-manager/components/EditViewDataManagerProvider/reducer.js

@@ -73,22 +73,16 @@ const reducer = (state, action) =>
         break;
       }
       case 'ADD_RELATION': {
-        if (!Array.isArray(action.value) || !action.value.length) {
+        const path = ['modifiedData', ...action.keys, 'add'];
-          break;
+        const currentValue = get(state, path);
+        const { value } = action;
+
+        if (Array.isArray(currentValue)) {
+          set(draftState, path, [...currentValue, value]);
+        } else {
+          set(draftState, path, [value]);
         }
 
-        const el = action.value[0].value;
-
-        const currentValue = get(state, ['modifiedData', ...action.keys], null);
-
-        if (!currentValue) {
-          set(draftState, ['modifiedData', ...action.keys], [el]);
-
-          break;
-        }
-
-        set(draftState, ['modifiedData', ...action.keys], [...currentValue, el]);
-
         break;
       }
       case 'INIT_FORM': {
@@ -214,15 +208,15 @@ const reducer = (state, action) =>
         break;
       }
       case 'REMOVE_RELATION': {
-        const pathArray = action.keys.split('.');
+        const path = ['modifiedData', ...action.keys, 'remove'];
-        const pathArrayLength = pathArray.length - 1;
+        const currentValue = get(state, path);
-        const pathToData = ['modifiedData', ...take(pathArray, pathArrayLength)];
+        const { value } = action;
-        const currentValue = get(state, pathToData).slice();
-        const indexToRemove = parseInt(pathArray[pathArrayLength], 10);
 
-        currentValue.splice(indexToRemove, 1);
+        if (Array.isArray(currentValue)) {
-
+          set(draftState, path, [...currentValue, value]);
-        set(draftState, pathToData, currentValue);
+        } else {
+          set(draftState, path, [value]);
+        }
 
         break;
       }

packages/core/admin/admin/src/content-manager/components/EditViewDataManagerProvider/tests/reducer.test.js

@@ -258,7 +258,7 @@ describe('CONTENT MANAGER | COMPONENTS | EditViewDataManagerProvider | reducer',
   });
 
   describe('ADD_RELATION', () => {
-    it('should add a relation in the modifiedData when it is not defined', () => {
+    it('should add a relation in the modifiedData', () => {
       const state = {
         ...initialState,
 
@@ -278,29 +278,32 @@ describe('CONTENT MANAGER | COMPONENTS | EditViewDataManagerProvider | reducer',
         },
         modifiedData: {
           name: 'name',
-          relation: [{ id: 1 }],
+          relation: {
+            add: [{ id: 1 }],
+          },
         },
       };
 
       const action = {
         type: 'ADD_RELATION',
         keys: ['relation'],
-        value: [{ label: 'ezrraez', value: { id: 1 } }],
+        value: { id: 1 },
       };
 
       expect(reducer(state, action)).toEqual(expected);
     });
+  });
 
-    it('should add a relation in the modifiedData when it is not an empty array', () => {
+  describe('REMOVE_RELATION', () => {
+    it('should remove a relation from modifiedData', () => {
       const state = {
         ...initialState,
+
         initialData: {
           name: 'name',
-          relation: [{ id: 1 }],
         },
         modifiedData: {
           name: 'name',
-          relation: [{ id: 1 }],
         },
       };
 
@@ -309,53 +312,19 @@ describe('CONTENT MANAGER | COMPONENTS | EditViewDataManagerProvider | reducer',
         componentsDataStructure: {},
         initialData: {
           name: 'name',
-          relation: [{ id: 1 }],
         },
         modifiedData: {
           name: 'name',
-          relation: [{ id: 1 }, { id: 3 }],
+          relation: {
+            remove: [{ id: 1 }],
+          },
         },
       };
 
       const action = {
-        type: 'ADD_RELATION',
+        type: 'REMOVE_RELATION',
         keys: ['relation'],
-        value: [{ value: { id: 3 } }],
+        value: { id: 1 },
-      };
-
-      expect(reducer(state, action)).toEqual(expected);
-    });
-
-    it('should not add a relation in the modifiedData when the value is empty', () => {
-      const state = {
-        ...initialState,
-        initialData: {
-          name: 'name',
-          relation: [{ id: 1 }],
-        },
-        modifiedData: {
-          name: 'name',
-          relation: [{ id: 1 }],
-        },
-      };
-
-      const expected = {
-        ...initialState,
-        componentsDataStructure: {},
-        initialData: {
-          name: 'name',
-          relation: [{ id: 1 }],
-        },
-        modifiedData: {
-          name: 'name',
-          relation: [{ id: 1 }],
-        },
-      };
-
-      const action = {
-        type: 'ADD_RELATION',
-        keys: ['relation'],
-        value: [],
       };
 
       expect(reducer(state, action)).toEqual(expected);
@@ -822,31 +791,6 @@ describe('CONTENT MANAGER | COMPONENTS | EditViewDataManagerProvider | reducer',
     });
   });
 
-  describe('REMOVE_RELATION', () => {
-    it('should remove a relation correctly', () => {
-      const state = {
-        ...initialState,
-        modifiedData: {
-          relation: ['one', 'two', 'three'],
-        },
-      };
-
-      const action = {
-        type: 'REMOVE_RELATION',
-        keys: 'relation.1',
-      };
-
-      const expected = {
-        ...initialState,
-        modifiedData: {
-          relation: ['one', 'three'],
-        },
-      };
-
-      expect(reducer(state, action)).toEqual(expected);
-    });
-  });
-
   describe('SET_DEFAULT_DATA_STRUCTURES', () => {
     it('should set the componentsDataStructure and the contentTypeDataStructure correctly', () => {
       const state = {

packages/core/admin/admin/src/content-manager/components/SelectWrapper/index.js

@@ -69,7 +69,7 @@ function SelectWrapper({
     modifiedData,
     moveRelation,
     onChange,
-    onRemoveRelation,
+    removeRelation,
   } = useCMEditViewDataManager();
   const { pathname } = useLocation();
 
@@ -226,9 +226,11 @@ function SelectWrapper({
   };
 
   const handleAddRelation = value => {
-    if (!isEmpty(value)) {
+    addRelation({ target: { name, value } });
-      addRelation({ target: { name, value } });
+  };
-    }
+
+  const handleRemoveRelation = value => {
+    removeRelation({ target: { name, value } });
   };
 
   const handleMenuOpen = () => {
@@ -301,7 +303,7 @@ function SelectWrapper({
         onMenuClose={handleMenuClose}
         onMenuOpen={handleMenuOpen}
         onMenuScrollToBottom={handleMenuScrollToBottom}
-        onRemove={onRemoveRelation}
+        onRemove={handleRemoveRelation}
         placeholder={placeholder}
         searchToPersist={searchToPersist}
         targetModel={targetModel}

packages/core/admin/admin/src/content-manager/components/SelectWrapper/utils/connect.js

@@ -2,7 +2,6 @@ import React from 'react';
 
 function connect(WrappedComponent, select) {
   return function(props) {
-    // eslint-disable-next-line react/prop-types
     const selectors = select(props);
 
     return <WrappedComponent {...props} {...selectors} />;