@elementor/editor-variables 3.33.0-174 → 3.33.0-176

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-variables",
-  "version": "3.33.0-174",
+  "version": "3.33.0-176",
   "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-174",
-    "@elementor/editor-canvas": "3.33.0-174",
-    "@elementor/editor-controls": "3.33.0-174",
-    "@elementor/editor-current-user": "3.33.0-174",
-    "@elementor/editor-editing-panel": "3.33.0-174",
-    "@elementor/editor-mcp": "3.33.0-174",
-    "@elementor/editor-panels": "3.33.0-174",
-    "@elementor/editor-props": "3.33.0-174",
-    "@elementor/editor-ui": "3.33.0-174",
-    "@elementor/editor-v1-adapters": "3.33.0-174",
-    "@elementor/http-client": "3.33.0-174",
+    "@elementor/editor": "3.33.0-176",
+    "@elementor/editor-canvas": "3.33.0-176",
+    "@elementor/editor-controls": "3.33.0-176",
+    "@elementor/editor-current-user": "3.33.0-176",
+    "@elementor/editor-editing-panel": "3.33.0-176",
+    "@elementor/editor-mcp": "3.33.0-176",
+    "@elementor/editor-panels": "3.33.0-176",
+    "@elementor/editor-props": "3.33.0-176",
+    "@elementor/editor-ui": "3.33.0-176",
+    "@elementor/editor-v1-adapters": "3.33.0-176",
+    "@elementor/http-client": "3.33.0-176",
     "@elementor/icons": "1.53.0",
-    "@elementor/mixpanel": "3.33.0-174",
-    "@elementor/schema": "3.33.0-174",
+    "@elementor/mixpanel": "3.33.0-176",
+    "@elementor/schema": "3.33.0-176",
     "@elementor/ui": "1.36.14",
     "@wordpress/i18n": "^5.13.0"
   },

package/src/components/ui/menu-item-content.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import { EllipsisWithTooltip, type VirtualizedItem } from '@elementor/editor-ui';
 import { EditIcon } from '@elementor/icons';
-import { Box, IconButton, ListItemIcon, Typography } from '@elementor/ui';
+import { Box, IconButton, ListItemIcon, Tooltip, Typography } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 const SIZE = 'tiny';
+const EDIT_LABEL = __( 'Edit variable', 'elementor' );
 
 export const MenuItemContent = < T, V extends string >( { item }: { item: VirtualizedItem< T, V > } ) => {
 	const onEdit = item.onEdit as ( ( value: V ) => void ) | undefined;
@@ -41,16 +42,18 @@ export const MenuItemContent = < T, V extends string >( { item }: { item: Virtua
 				) }
 			</Box>
 			{ !! onEdit && (
-				<IconButton
-					sx={ { mx: 1, opacity: '0' } }
-					onClick={ ( e: React.MouseEvent< HTMLButtonElement > ) => {
-						e.stopPropagation();
-						onEdit( item.value );
-					} }
-					aria-label={ __( 'Edit', 'elementor' ) }
-				>
-					<EditIcon color="action" fontSize={ SIZE } />
-				</IconButton>
+				<Tooltip placement="top" title={ EDIT_LABEL }>
+					<IconButton
+						sx={ { mx: 1, opacity: '0' } }
+						onClick={ ( e: React.MouseEvent< HTMLButtonElement > ) => {
+							e.stopPropagation();
+							onEdit( item.value );
+						} }
+						aria-label={ EDIT_LABEL }
+					>
+						<EditIcon color="action" fontSize={ SIZE } />
+					</IconButton>
+				</Tooltip>
 			) }
 		</>
 	);

package/src/components/ui/tags/assigned-tag.tsx

@@ -4,6 +4,7 @@ import { Box, IconButton, Stack, Tooltip, Typography, UnstableTag as Tag, type U
 import { __ } from '@wordpress/i18n';
 
 export const SIZE = 'tiny';
+const UNLINK_LABEL = __( 'Unlink variable', 'elementor' );
 
 interface VariableTagProps extends UnstableTagProps {
 	onUnlink?: () => void;
@@ -14,9 +15,11 @@ export const AssignedTag = ( { startIcon, label, onUnlink, ...props }: VariableT
 
 	if ( onUnlink ) {
 		actions.push(
-			<IconButton key="unlink" size={ SIZE } onClick={ onUnlink } aria-label={ __( 'Unlink', 'elementor' ) }>
-				<DetachIcon fontSize={ SIZE } />
-			</IconButton>
+			<Tooltip key="unlink" title={ UNLINK_LABEL } placement="bottom">
+				<IconButton size={ SIZE } onClick={ onUnlink } aria-label={ UNLINK_LABEL }>
+					<DetachIcon fontSize={ SIZE } />
+				</IconButton>
+			</Tooltip>
 		);
 	}
 

package/src/components/variable-edit.tsx

@@ -5,7 +5,7 @@ import { useSuppressedMessage } from '@elementor/editor-current-user';
 import { PopoverBody } from '@elementor/editor-editing-panel';
 import { PopoverHeader } from '@elementor/editor-ui';
 import { ArrowLeftIcon, TrashIcon } from '@elementor/icons';
-import { Button, CardActions, Divider, FormHelperText, IconButton, Typography } from '@elementor/ui';
+import { Button, CardActions, Divider, FormHelperText, IconButton, Tooltip, Typography } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { useVariableType } from '../context/variable-type-context';
@@ -20,6 +20,7 @@ import { EDIT_CONFIRMATION_DIALOG_ID, EditConfirmationDialog } from './ui/edit-c
 import { FormField } from './ui/form-field';
 
 const SIZE = 'tiny';
+const DELETE_LABEL = __( 'Delete variable', 'elementor' );
 
 type Props = {
 	editId: string;
@@ -127,14 +128,11 @@ export const VariableEdit = ( { onClose, onGoBack, onSubmit, editId }: Props ) =
 
 	if ( userPermissions.canDelete() ) {
 		actions.push(
-			<IconButton
-				key="delete"
-				size={ SIZE }
-				aria-label={ __( 'Delete', 'elementor' ) }
-				onClick={ handleDeleteConfirmation }
-			>
-				<TrashIcon fontSize={ SIZE } />
-			</IconButton>
+			<Tooltip key="delete" placement="top" title={ DELETE_LABEL }>
+				<IconButton size={ SIZE } onClick={ handleDeleteConfirmation } aria-label={ DELETE_LABEL }>
+					<TrashIcon fontSize={ SIZE } />
+				</IconButton>
+			</Tooltip>
 		);
 	}
 

package/src/components/variables-manager/hooks/use-error-navigation.ts

@@ -0,0 +1,49 @@
+import { useCallback, useRef } from 'react';
+
+export interface UseErrorNavigationReturn {
+	createNavigationCallback: (
+		ids: string[],
+		onNavigate: ( id: string ) => void,
+		onComplete: () => void
+	) => () => void;
+	resetNavigation: () => void;
+}
+
+export const useErrorNavigation = (): UseErrorNavigationReturn => {
+	const currentIndexRef = useRef( 0 );
+
+	const createNavigationCallback = useCallback(
+		( ids: string[], onNavigate: ( id: string ) => void, onComplete: () => void ) => {
+			return () => {
+				if ( ! ids?.length ) {
+					return;
+				}
+
+				const currentIndex = currentIndexRef.current;
+				const currentId = ids[ currentIndex ];
+
+				if ( currentId ) {
+					onNavigate( currentId );
+
+					const nextIndex = currentIndex + 1;
+					if ( nextIndex >= ids.length ) {
+						onComplete();
+						currentIndexRef.current = 0;
+					} else {
+						currentIndexRef.current = nextIndex;
+					}
+				}
+			};
+		},
+		[]
+	);
+
+	const resetNavigation = useCallback( () => {
+		currentIndexRef.current = 0;
+	}, [] );
+
+	return {
+		createNavigationCallback,
+		resetNavigation,
+	};
+};

package/src/components/variables-manager/hooks/use-variables-manager-state.ts

@@ -1,18 +1,16 @@
 import { useCallback, useState } from 'react';
-import { __ } from '@wordpress/i18n';
 
 import { generateTempId } from '../../../batch-operations';
 import { getVariables } from '../../../hooks/use-prop-variables';
 import { service } from '../../../service';
 import { type TVariablesList } from '../../../storage';
 import { filterBySearch } from '../../../utils/filter-by-search';
-import { ERROR_MESSAGES } from '../../../utils/validations';
 
 export const useVariablesManagerState = () => {
 	const [ variables, setVariables ] = useState( () => getVariables( false ) );
 	const [ deletedVariables, setDeletedVariables ] = useState< string[] >( [] );
+	const [ isSaveDisabled, setIsSaveDisabled ] = useState( false );
 	const [ isDirty, setIsDirty ] = useState( false );
-	const [ hasValidationErrors, setHasValidationErrors ] = useState( false );
 	const [ isSaving, setIsSaving ] = useState( false );
 	const [ searchValue, setSearchValue ] = useState( '' );
 
@@ -49,28 +47,21 @@ export const useVariablesManagerState = () => {
 		setSearchValue( searchTerm );
 	};
 
-	const handleSave = useCallback( async (): Promise< { success: boolean; error?: string } > => {
-		try {
-			const originalVariables = getVariables( false );
-			setIsSaving( true );
-			const result = await service.batchSave( originalVariables, variables );
+	const handleSave = useCallback( async (): Promise< { success: boolean } > => {
+		const originalVariables = getVariables( false );
+		setIsSaving( true );
+		const result = await service.batchSave( originalVariables, variables );
 
-			if ( result.success ) {
-				await service.load();
-				const updatedVariables = service.variables();
+		if ( result.success ) {
+			await service.load();
+			const updatedVariables = service.variables();
 
-				setVariables( updatedVariables );
-				setDeletedVariables( [] );
-				setIsDirty( false );
-				setIsSaving( false );
-				return { success: true };
-			}
-			throw new Error( __( 'Failed to save variables. Please try again.', 'elementor' ) );
-		} catch ( error ) {
-			const errorMessage = error instanceof Error ? error.message : ERROR_MESSAGES.UNEXPECTED_ERROR;
-			setIsSaving( false );
-			return { success: false, error: errorMessage };
+			setVariables( updatedVariables );
+			setDeletedVariables( [] );
+			setIsDirty( false );
 		}
+
+		return { success: result.success };
 	}, [ variables ] );
 
 	const filteredVariables = () => {
@@ -84,7 +75,7 @@ export const useVariablesManagerState = () => {
 		variables: filteredVariables(),
 		deletedVariables,
 		isDirty,
-		hasValidationErrors,
+		isSaveDisabled,
 		handleOnChange,
 		createVariable,
 		handleDeleteVariable,
@@ -92,6 +83,7 @@ export const useVariablesManagerState = () => {
 		isSaving,
 		handleSearch,
 		searchValue,
-		setHasValidationErrors,
+		setIsSaving,
+		setIsSaveDisabled,
 	};
 };

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

@@ -10,14 +10,26 @@ import {
 } from '@elementor/editor-panels';
 import { SaveChangesDialog, SearchField, ThemeProvider, useDialog } from '@elementor/editor-ui';
 import { changeEditMode } from '@elementor/editor-v1-adapters';
-import { ColorFilterIcon, TrashIcon } from '@elementor/icons';
-import { Alert, Box, Button, CloseButton, Divider, ErrorBoundary, Stack, usePopupState } from '@elementor/ui';
+import { AlertTriangleFilledIcon, ColorFilterIcon, TrashIcon } from '@elementor/icons';
+import {
+	Alert,
+	AlertAction,
+	AlertTitle,
+	Button,
+	CloseButton,
+	Divider,
+	Infotip,
+	Stack,
+	usePopupState,
+} from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
+import { type ErrorResponse, type MappedError, mapServerError } from '../../utils/validations';
 import { DeleteConfirmationDialog } from '../ui/delete-confirmation-dialog';
 import { EmptyState } from '../ui/empty-state';
 import { NoSearchResults } from '../ui/no-search-results';
 import { useAutoEdit } from './hooks/use-auto-edit';
+import { useErrorNavigation } from './hooks/use-error-navigation';
 import { useVariablesManagerState } from './hooks/use-variables-manager-state';
 import { SIZE, VariableManagerCreateMenu } from './variables-manager-create-menu';
 import { VariablesManagerTable } from './variables-manager-table';
@@ -47,20 +59,23 @@ export function VariablesManagerPanel() {
 	const {
 		variables,
 		isDirty,
-		hasValidationErrors,
 		searchValue,
+		isSaveDisabled,
 		handleOnChange,
 		createVariable,
 		handleDeleteVariable,
 		handleSave,
 		isSaving,
 		handleSearch,
-		setHasValidationErrors,
+		setIsSaving,
+		setIsSaveDisabled,
 	} = useVariablesManagerState();
 
 	const { autoEditVariableId, startAutoEdit, handleAutoEditComplete } = useAutoEdit();
+	const { createNavigationCallback, resetNavigation } = useErrorNavigation();
 
 	const [ deleteConfirmation, setDeleteConfirmation ] = useState< { id: string; label: string } | null >( null );
+	const [ serverError, setServerError ] = useState< MappedError | null >( null );
 
 	usePreventUnload( isDirty );
 
@@ -83,6 +98,32 @@ export function VariablesManagerPanel() {
 		[ createVariable, startAutoEdit ]
 	);
 
+	const handleSaveClick = async () => {
+		try {
+			setServerError( null );
+			resetNavigation();
+
+			return await handleSave();
+		} catch ( error ) {
+			const mappedError = mapServerError( error as ErrorResponse );
+			const duplicatedIds = mappedError?.action?.data?.duplicatedIds;
+
+			if ( mappedError && 'label' === mappedError.field ) {
+				if ( duplicatedIds && mappedError.action ) {
+					mappedError.action.callback = createNavigationCallback( duplicatedIds, startAutoEdit, () => {
+						setIsSaveDisabled( false );
+					} );
+				}
+				setServerError( mappedError );
+				setIsSaveDisabled( true );
+				resetNavigation();
+			}
+			return { success: false, error: mappedError };
+		} finally {
+			setIsSaving( false );
+		}
+	};
+
 	const handleDeleteVariableWithConfirmation = useCallback(
 		( itemId: string ) => {
 			handleDeleteVariable( itemId );
@@ -108,113 +149,145 @@ export function VariablesManagerPanel() {
 
 	return (
 		<ThemeProvider>
-			<ErrorBoundary fallback={ <ErrorBoundaryFallback /> }>
-				<Panel>
-					<PanelHeader
-						sx={ {
-							height: 'unset',
-						} }
-					>
-						<Stack width="100%" direction="column" alignItems="center">
-							<Stack p={ 1 } pl={ 2 } width="100%" direction="row" alignItems="center">
-								<Stack width="100%" direction="row" gap={ 1 }>
-									<PanelHeaderTitle sx={ { display: 'flex', alignItems: 'center', gap: 0.5 } }>
-										<ColorFilterIcon fontSize="inherit" />
-										{ __( 'Variable Manager', 'elementor' ) }
-									</PanelHeaderTitle>
-								</Stack>
-								<Stack direction="row" gap={ 0.5 } alignItems="center">
-									<VariableManagerCreateMenu
-										onCreate={ handleCreateVariable }
-										variables={ variables }
-										menuState={ createMenuState }
-									/>
-									<CloseButton
-										aria-label="Close"
-										slotProps={ { icon: { fontSize: SIZE } } }
-										onClick={ () => {
-											handleClosePanel();
-										} }
-									/>
-								</Stack>
-							</Stack>
+			<Panel>
+				<PanelHeader
+					sx={ {
+						height: 'unset',
+					} }
+				>
+					<Stack width="100%" direction="column" alignItems="center">
+						<Stack p={ 1 } pl={ 2 } width="100%" direction="row" alignItems="center">
 							<Stack width="100%" direction="row" gap={ 1 }>
-								<SearchField
-									sx={ {
-										display: 'flex',
-										flex: 1,
+								<PanelHeaderTitle sx={ { display: 'flex', alignItems: 'center', gap: 0.5 } }>
+									<ColorFilterIcon fontSize="inherit" />
+									{ __( 'Variable Manager', 'elementor' ) }
+								</PanelHeaderTitle>
+							</Stack>
+							<Stack direction="row" gap={ 0.5 } alignItems="center">
+								<VariableManagerCreateMenu
+									onCreate={ handleCreateVariable }
+									variables={ variables }
+									menuState={ createMenuState }
+								/>
+								<CloseButton
+									aria-label="Close"
+									slotProps={ { icon: { fontSize: SIZE } } }
+									onClick={ () => {
+										handleClosePanel();
 									} }
-									placeholder={ __( 'Search', 'elementor' ) }
-									value={ searchValue }
-									onSearch={ handleSearch }
 								/>
 							</Stack>
-							<Divider sx={ { width: '100%' } } />
 						</Stack>
-					</PanelHeader>
-					<PanelBody
-						sx={ {
-							display: 'flex',
-							flexDirection: 'column',
-							height: '100%',
-						} }
-					>
-						{ hasVariables && (
-							<VariablesManagerTable
-								menuActions={ menuActions }
-								variables={ variables }
-								onChange={ handleOnChange }
-								autoEditVariableId={ autoEditVariableId }
-								onAutoEditComplete={ handleAutoEditComplete }
-								onFieldError={ setHasValidationErrors }
+						<Stack width="100%" direction="row" gap={ 1 }>
+							<SearchField
+								sx={ {
+									display: 'flex',
+									flex: 1,
+								} }
+								placeholder={ __( 'Search', 'elementor' ) }
+								value={ searchValue }
+								onSearch={ handleSearch }
 							/>
-						) }
+						</Stack>
+						<Divider sx={ { width: '100%' } } />
+					</Stack>
+				</PanelHeader>
+				<PanelBody
+					sx={ {
+						display: 'flex',
+						flexDirection: 'column',
+						height: '100%',
+					} }
+				>
+					{ hasVariables && (
+						<VariablesManagerTable
+							menuActions={ menuActions }
+							variables={ variables }
+							onChange={ handleOnChange }
+							autoEditVariableId={ autoEditVariableId }
+							onAutoEditComplete={ handleAutoEditComplete }
+							onFieldError={ setIsSaveDisabled }
+						/>
+					) }
 
-						{ ! hasVariables && searchValue && (
-							<NoSearchResults
-								searchValue={ searchValue }
-								onClear={ () => handleSearch( '' ) }
-								icon={ <ColorFilterIcon fontSize="large" /> }
-							/>
-						) }
+					{ ! hasVariables && searchValue && (
+						<NoSearchResults
+							searchValue={ searchValue }
+							onClear={ () => handleSearch( '' ) }
+							icon={ <ColorFilterIcon fontSize="large" /> }
+						/>
+					) }
 
-						{ ! hasVariables && ! searchValue && (
-							<EmptyState
-								title={ __( 'Create your first variable', 'elementor' ) }
-								message={ __(
-									'Variables are saved attributes that you can apply anywhere on your site.',
-									'elementor'
-								) }
-								icon={ <ColorFilterIcon fontSize="large" /> }
-								onAdd={ createMenuState.open }
-							/>
-						) }
-					</PanelBody>
+					{ ! hasVariables && ! searchValue && (
+						<EmptyState
+							title={ __( 'Create your first variable', 'elementor' ) }
+							message={ __(
+								'Variables are saved attributes that you can apply anywhere on your site.',
+								'elementor'
+							) }
+							icon={ <ColorFilterIcon fontSize="large" /> }
+							onAdd={ createMenuState.open }
+						/>
+					) }
+				</PanelBody>
 
-					<PanelFooter>
+				<PanelFooter>
+					<Infotip
+						placement="right"
+						open={ !! serverError }
+						content={
+							serverError ? (
+								<Alert
+									severity="error"
+									action={
+										serverError.action ? (
+											<AlertAction onClick={ serverError.action.callback }>
+												{ serverError.action.label }
+											</AlertAction>
+										) : undefined
+									}
+									icon={ <AlertTriangleFilledIcon /> }
+								>
+									<AlertTitle>{ serverError.message }</AlertTitle>
+									{ serverError.action?.message }
+								</Alert>
+							) : null
+						}
+						arrow={ false }
+						slotProps={ {
+							popper: {
+								modifiers: [
+									{
+										name: 'offset',
+										options: { offset: [ -10, 10 ] },
+									},
+								],
+							},
+						} }
+					>
 						<Button
 							fullWidth
 							size="small"
 							color="global"
 							variant="contained"
-							disabled={ ! isDirty || hasValidationErrors || isSaving }
-							onClick={ handleSave }
+							disabled={ isSaveDisabled || ! isDirty || isSaving }
+							onClick={ handleSaveClick }
 							loading={ isSaving }
 						>
 							{ __( 'Save changes', 'elementor' ) }
 						</Button>
-					</PanelFooter>
-				</Panel>
+					</Infotip>
+				</PanelFooter>
+			</Panel>
 
-				{ deleteConfirmation && (
-					<DeleteConfirmationDialog
-						open
-						label={ deleteConfirmation.label }
-						onConfirm={ () => handleDeleteVariableWithConfirmation( deleteConfirmation.id ) }
-						closeDialog={ () => setDeleteConfirmation( null ) }
-					/>
-				) }
-			</ErrorBoundary>
+			{ deleteConfirmation && (
+				<DeleteConfirmationDialog
+					open
+					label={ deleteConfirmation.label }
+					onConfirm={ () => handleDeleteVariableWithConfirmation( deleteConfirmation.id ) }
+					closeDialog={ () => setDeleteConfirmation( null ) }
+				/>
+			) }
 
 			{ isSaveChangesDialogOpen && (
 				<SaveChangesDialog>
@@ -238,9 +311,11 @@ export function VariablesManagerPanel() {
 							confirm: {
 								label: __( 'Save', 'elementor' ),
 								action: async () => {
-									await handleSave();
+									const result = await handleSaveClick();
 									closeSaveChangesDialog();
-									closePanel();
+									if ( result?.success ) {
+										closePanel();
+									}
 								},
 							},
 						} }
@@ -251,14 +326,6 @@ export function VariablesManagerPanel() {
 	);
 }
 
-const ErrorBoundaryFallback = () => (
-	<Box role="alert" sx={ { minHeight: '100%', p: 2 } }>
-		<Alert severity="error" sx={ { mb: 2, maxWidth: 400, textAlign: 'center' } }>
-			<strong>{ __( 'Something went wrong', 'elementor' ) }</strong>
-		</Alert>
-	</Box>
-);
-
 const usePreventUnload = ( isDirty: boolean ) => {
 	useEffect( () => {
 		const handleBeforeUnload = ( event: BeforeUnloadEvent ) => {