fix: resolve box-spacing advanced label issues

blockeraai · Oct 27, 2024 · a5c879a · a5c879a
1 parent fcc4490
commit a5c879a
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 26 deletions.
diff --git a/packages/controls/js/context/hooks/use-control-context.js b/packages/controls/js/context/hooks/use-control-context.js
@@ -502,7 +502,13 @@ export const useControlContext = (args?: ControlContextHookProps): Object => {
 				return reset(dataset);
 			}
 
-			const preparedValue = prepare(args?.path, dataset);
+			let { path } = args;
+
+			if (['RESET_TO_DEFAULT', 'RESET_ALL'].includes(args?.action)) {
+				path = args?.path.replace(args?.attribute + '.', '');
+			}
+
+			const preparedValue = prepare(path, dataset);
 
 			return reset(
 				calculatedValueBasedOnSavedValue(

diff --git a/packages/editor/js/components/editor-advanced-label/helpers.js b/packages/editor/js/components/editor-advanced-label/helpers.js
@@ -164,7 +164,10 @@ export const getStatesGraph = ({
 									return null;
 								}
 
-								if (isEquals(value, defaultValue)) {
+								if (
+									isEquals(value, defaultValue) ||
+									undefined === value
+								) {
 									return null;
 								}
 

diff --git a/packages/editor/js/components/editor-advanced-label/index.js b/packages/editor/js/components/editor-advanced-label/index.js
@@ -89,13 +89,6 @@ export const EditorAdvancedLabelControl = ({
 		200
 	);
 
-	// Assume singularId is set and path include attribute so,
-	// attribute is object has nested props therefore we can exclude attribute from recieved path,
-	// so that we can prepare path to reset actions!
-	if (path && -1 !== path.indexOf(attribute) && singularId && isRepeater) {
-		path = path.replace(`${attribute}.`, '');
-	}
-
 	const isChangedValue =
 		(isChanged && isChangedOnCurrentState) ||
 		isChangedNormalStateOnBaseBreakpoint ||
@@ -304,6 +297,7 @@ export const EditorAdvancedLabelControl = ({
 													resetToDefault({
 														path,
 														onChange,
+														attribute,
 														isRepeater,
 														attributes,
 														repeaterItem,
@@ -361,6 +355,7 @@ export const EditorAdvancedLabelControl = ({
 												resetToDefault({
 													path,
 													onChange,
+													attribute,
 													isRepeater,
 													attributes,
 													repeaterItem,

diff --git a/...es/editor/js/components/editor-advanced-label/test/box-spacing.advanced-label-5.e2e.cy.js b/...es/editor/js/components/editor-advanced-label/test/box-spacing.advanced-label-5.e2e.cy.js
@@ -1247,12 +1247,7 @@ describe('Box spacing label testing (Box Spacing Control)', () => {
 
 					// assert sides label
 					['top', 'right', 'bottom', 'left'].forEach((side) => {
-						// TODO - @reza - fix this - by resetting a type (margin or padding) all sides should be removed and value of side should be 20 (normal on desktop)
-						// cy.checkBoxSpacingLabelContent(
-						// 	type,
-						// 	side,
-						// 	'30'
-						// );
+						cy.checkBoxSpacingLabelContent(type, side, '20');
 
 						cy.checkBoxSpacingLabelClassName(
 							type,
@@ -1264,10 +1259,7 @@ describe('Box spacing label testing (Box Spacing Control)', () => {
 						cy.checkBoxSpacingLabelClassName(
 							type,
 							side,
-							[
-								'changed-in-other-state',
-								'changed-in-secondary-state',
-							],
+							['changed-in-secondary-state'],
 							'not-have'
 						);
 					});
@@ -1282,10 +1274,7 @@ describe('Box spacing label testing (Box Spacing Control)', () => {
 					cy.checkBoxSpacingLabelClassName(
 						type,
 						'',
-						[
-							'changed-in-other-state',
-							'changed-in-secondary-state',
-						],
+						['changed-in-secondary-state'],
 						'not-have'
 					);
 				});

diff --git a/packages/editor/js/hooks/use-advanced-label-props/index.js b/packages/editor/js/hooks/use-advanced-label-props/index.js
@@ -360,7 +360,7 @@ export const useAdvancedLabelProps = (
 					const preparedPath = path.substring(path.indexOf('.') + 1);
 
 					const _clonedDefaultValue =
-						prepare(preparedPath, clonedDefaultValue) ??
+						prepare(preparedPath, clonedDefaultValue) ||
 						clonedDefaultValue;
 
 					// Compare with rootValue

diff --git a/packages/editor/js/hooks/use-attributes/helpers.js b/packages/editor/js/hooks/use-attributes/helpers.js
@@ -480,7 +480,12 @@ export const resetAllStates = (state: Object, action: Object): Object => {
 				const preparedPathValue = update(
 					dataset,
 					ref.path,
-					ref.defaultValue
+					-1 !== ref.path.indexOf(attributeId)
+						? prepare(
+								ref.path.replace(attributeId + '.', ''),
+								ref.defaultValue
+						  )
+						: ref.defaultValue
 				);
 
 				stateBreakpoints[breakpointType] = mergeObject(
@@ -520,7 +525,9 @@ export const resetAllStates = (state: Object, action: Object): Object => {
 
 	return {
 		...state,
-		[attributeId]: newValue,
+		[attributeId]: {
+			value: newValue,
+		},
 		blockeraBlockStates: {
 			value: blockeraBlockStates,
 		},
@@ -737,6 +744,18 @@ export const resetCurrentState = (_state: Object, action: Object): Object => {
 		currentStateValue = state[attributeId];
 	}
 
+	if (ref?.path) {
+		const path = ref.path.replace(attributeId + '.', '');
+
+		args.deletedProps.push(path);
+
+		if (isObject(newValue) && !newValue.hasOwnProperty(attributeId)) {
+			if (isEquals(ref?.defaultValue, state[attributeId])) {
+				newValue[path] = undefined;
+			}
+		}
+	}
+
 	return mergeObject(
 		state,
 		{