@elementor/editor-variables 3.33.0-179 → 3.33.0-181

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-variables",
-  "version": "3.33.0-179",
+  "version": "3.33.0-181",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,20 +39,20 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "3.33.0-179",
-    "@elementor/editor-canvas": "3.33.0-179",
-    "@elementor/editor-controls": "3.33.0-179",
-    "@elementor/editor-current-user": "3.33.0-179",
-    "@elementor/editor-editing-panel": "3.33.0-179",
-    "@elementor/editor-mcp": "3.33.0-179",
-    "@elementor/editor-panels": "3.33.0-179",
-    "@elementor/editor-props": "3.33.0-179",
-    "@elementor/editor-ui": "3.33.0-179",
-    "@elementor/editor-v1-adapters": "3.33.0-179",
-    "@elementor/http-client": "3.33.0-179",
+    "@elementor/editor": "3.33.0-181",
+    "@elementor/editor-canvas": "3.33.0-181",
+    "@elementor/editor-controls": "3.33.0-181",
+    "@elementor/editor-current-user": "3.33.0-181",
+    "@elementor/editor-editing-panel": "3.33.0-181",
+    "@elementor/editor-mcp": "3.33.0-181",
+    "@elementor/editor-panels": "3.33.0-181",
+    "@elementor/editor-props": "3.33.0-181",
+    "@elementor/editor-ui": "3.33.0-181",
+    "@elementor/editor-v1-adapters": "3.33.0-181",
+    "@elementor/http-client": "3.33.0-181",
     "@elementor/icons": "1.53.0",
-    "@elementor/mixpanel": "3.33.0-179",
-    "@elementor/schema": "3.33.0-179",
+    "@elementor/mixpanel": "3.33.0-181",
+    "@elementor/schema": "3.33.0-181",
     "@elementor/ui": "1.36.14",
     "@wordpress/i18n": "^5.13.0"
   },

package/src/components/variables-manager/variables-manager-panel.tsx

@@ -114,10 +114,12 @@ export function VariablesManagerPanel() {
 						setIsSaveDisabled( false );
 					} );
 				}
+
 				setServerError( mappedError );
 				setIsSaveDisabled( true );
 				resetNavigation();
 			}
+
 			return { success: false, error: mappedError };
 		} finally {
 			setIsSaving( false );
@@ -238,15 +240,29 @@ export function VariablesManagerPanel() {
 						content={
 							serverError ? (
 								<Alert
-									severity="error"
+									severity={ serverError.severity ?? 'error' }
 									action={
-										serverError.action ? (
+										serverError.action?.label ? (
 											<AlertAction onClick={ serverError.action.callback }>
 												{ serverError.action.label }
 											</AlertAction>
 										) : undefined
 									}
-									icon={ <AlertTriangleFilledIcon /> }
+									onClose={
+										! serverError.action?.label
+											? () => {
+													setServerError( null );
+													setIsSaveDisabled( false );
+											  }
+											: undefined
+									}
+									icon={
+										serverError.IconComponent ? (
+											<serverError.IconComponent />
+										) : (
+											<AlertTriangleFilledIcon />
+										)
+									}
 								>
 									<AlertTitle>{ serverError.message }</AlertTitle>
 									{ serverError.action?.message }

package/src/utils/validations.ts

@@ -1,3 +1,5 @@
+import type * as React from 'react';
+import { AlertTriangleFilledIcon, InfoCircleFilledIcon } from '@elementor/icons';
 import { __, sprintf } from '@wordpress/i18n';
 
 import { type TVariable, type TVariablesList } from '../storage';
@@ -14,7 +16,7 @@ export const ERROR_MESSAGES = {
 		DUPLICATED_LABELS: ( count: number, name: string ) =>
 			// eslint-disable-next-line @wordpress/i18n-translator-comments
 			sprintf( __( 'We found %1$d duplicated %2$s.', 'elementor' ), count, name ),
-		UNEXPECTED_ERROR: __( 'The save didn’t go through.', 'elementor' ),
+		UNEXPECTED_ERROR: __( 'There was a glitch.', 'elementor' ),
 		DUPLICATED_LABEL_ACTION: __( 'Take me there', 'elementor' ),
 		DUPLICATED_LABEL_ACTION_MESSAGE: __( 'Please rename the variables.', 'elementor' ),
 		UNEXPECTED_ERROR_ACTION_MESSAGE: __( 'Try saving your variables again.', 'elementor' ),
@@ -39,7 +41,7 @@ export type ErrorResponse = {
 };
 
 export type ErrorAction = {
-	label: string;
+	label?: string;
 	message?: string;
 	callback?: () => void;
 	data?: {
@@ -51,6 +53,8 @@ export type MappedError = {
 	field: string;
 	message: string;
 	action?: ErrorAction;
+	severity?: 'error' | 'secondary';
+	IconComponent?: React.ElementType;
 };
 
 export const mapServerError = ( error: ErrorResponse ): MappedError | undefined => {
@@ -70,6 +74,8 @@ export const mapServerError = ( error: ErrorResponse ): MappedError | undefined
 		return {
 			field: 'label',
 			message: ERROR_MESSAGES.BATCH.DUPLICATED_LABELS( count, name ),
+			severity: 'error',
+			IconComponent: AlertTriangleFilledIcon,
 			action: {
 				label: ERROR_MESSAGES.BATCH.DUPLICATED_LABEL_ACTION,
 				message: ERROR_MESSAGES.BATCH.DUPLICATED_LABEL_ACTION_MESSAGE,
@@ -84,6 +90,11 @@ export const mapServerError = ( error: ErrorResponse ): MappedError | undefined
 		return {
 			field: 'label',
 			message: ERROR_MESSAGES.BATCH.UNEXPECTED_ERROR,
+			severity: 'secondary',
+			IconComponent: InfoCircleFilledIcon,
+			action: {
+				message: ERROR_MESSAGES.BATCH.UNEXPECTED_ERROR_ACTION_MESSAGE,
+			},
 		};
 	}