@elementor/editor-variables 3.33.0-98 → 3.34.2

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import {
 	__createPanel as createPanel,
 	Panel,
@@ -8,14 +8,32 @@ import {
 	PanelHeader,
 	PanelHeaderTitle,
 } from '@elementor/editor-panels';
-import { ThemeProvider } from '@elementor/editor-ui';
+import { SaveChangesDialog, SearchField, ThemeProvider, useDialog } from '@elementor/editor-ui';
 import { changeEditMode } from '@elementor/editor-v1-adapters';
-import { ColorFilterIcon, TrashIcon, XIcon } from '@elementor/icons';
-import { Alert, Box, Button, Divider, ErrorBoundary, IconButton, type IconButtonProps, Stack } 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 { getVariables } from '../../hooks/use-prop-variables';
-import { type TVariablesList } from '../../storage';
+import { trackVariablesManagerEvent } from '../../utils/tracking';
+import { type ErrorResponse, type MappedError, mapServerError } from '../../utils/validations';
+import { getVariableType } from '../../variables-registry/variable-type-registry';
+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';
 
 const id = 'variables-manager';
@@ -30,96 +48,309 @@ export const { panel, usePanelActions } = createPanel( {
 	onClose: () => {
 		changeEditMode( 'edit' );
 	},
+	isOpenPreviousElement: true,
 } );
 
 export function VariablesManagerPanel() {
 	const { close: closePanel } = usePanelActions();
-	const [ isDirty, setIsDirty ] = useState( false );
-	const [ variables, setVariables ] = useState( getVariables( false ) );
-	const [ deletedVariables, setDeletedVariables ] = useState< string[] >( [] );
+	const { open: openSaveChangesDialog, close: closeSaveChangesDialog, isOpen: isSaveChangesDialogOpen } = useDialog();
+
+	const createMenuState = usePopupState( {
+		variant: 'popover',
+	} );
+
+	const {
+		variables,
+		isDirty,
+		searchValue,
+		isSaveDisabled,
+		handleOnChange,
+		createVariable,
+		handleDeleteVariable,
+		handleSave,
+		isSaving,
+		handleSearch,
+		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 );
 
+	const handleClosePanel = () => {
+		if ( isDirty ) {
+			openSaveChangesDialog();
+			return;
+		}
+
+		closePanel();
+	};
+
+	const handleCreateVariable = useCallback(
+		( type: string, defaultName: string, defaultValue: string ) => {
+			const newId = createVariable( type, defaultName, defaultValue );
+			if ( newId ) {
+				startAutoEdit( newId );
+			}
+		},
+		[ createVariable, startAutoEdit ]
+	);
+
+	const handleSaveClick = async () => {
+		try {
+			setServerError( null );
+			resetNavigation();
+
+			const result = await handleSave();
+			trackVariablesManagerEvent( { action: 'saveChanges' } );
+			return result;
+		} 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 );
+			setDeleteConfirmation( null );
+		},
+		[ handleDeleteVariable ]
+	);
+
 	const menuActions = [
 		{
 			name: __( 'Delete', 'elementor' ),
 			icon: TrashIcon,
 			color: 'error.main',
 			onClick: ( itemId: string ) => {
-				setDeletedVariables( [ ...deletedVariables, itemId ] );
-				setVariables( { ...variables, [ itemId ]: { ...variables[ itemId ], deleted: true } } );
-				setIsDirty( true );
+				const variable = variables[ itemId ];
+				if ( variable ) {
+					setDeleteConfirmation( { id: itemId, label: variable.label } );
+
+					const variableTypeOptions = getVariableType( variable.type );
+					trackVariablesManagerEvent( { action: 'delete', varType: variableTypeOptions?.variableType } );
+				}
 			},
 		},
 	];
 
-	const handleOnChange = ( newVariables: TVariablesList ) => {
-		setVariables( newVariables );
-		setIsDirty( true );
-	};
+	const hasVariables = Object.values( variables ).some( ( variable ) => ! variable.deleted );
 
 	return (
 		<ThemeProvider>
-			<ErrorBoundary fallback={ <ErrorBoundaryFallback /> }>
-				<Panel>
-					<PanelHeader>
-						<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>
+			<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" />
+									{ __( 'Variables Manager', 'elementor' ) }
+								</PanelHeaderTitle>
+							</Stack>
+							<Stack direction="row" gap={ 0.5 } alignItems="center">
+								<VariableManagerCreateMenu
+									onCreate={ handleCreateVariable }
+									variables={ variables }
+									menuState={ createMenuState }
+								/>
 								<CloseButton
-									sx={ { marginLeft: 'auto' } }
-									onClose={ () => {
-										closePanel();
+									aria-label="Close"
+									slotProps={ { icon: { fontSize: SIZE } } }
+									onClick={ () => {
+										handleClosePanel();
 									} }
 								/>
 							</Stack>
-							<Divider sx={ { width: '100%' } } />
 						</Stack>
-					</PanelHeader>
-					<PanelBody
-						sx={ {
-							display: 'flex',
-							flexDirection: 'column',
-							height: '100%',
-						} }
-					>
+						<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 && (
+						<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>
+					) }
+				</PanelBody>
 
-					<PanelFooter>
-						<Button fullWidth size="small" color="global" variant="contained" disabled={ ! isDirty }>
+				<PanelFooter>
+					<Infotip
+						placement="right"
+						open={ !! serverError }
+						content={
+							serverError ? (
+								<Alert
+									severity={ serverError.severity ?? 'error' }
+									action={
+										serverError.action?.label ? (
+											<AlertAction onClick={ serverError.action.callback }>
+												{ serverError.action.label }
+											</AlertAction>
+										) : undefined
+									}
+									onClose={
+										! serverError.action?.label
+											? () => {
+													setServerError( null );
+													setIsSaveDisabled( false );
+											  }
+											: undefined
+									}
+									icon={
+										serverError.IconComponent ? (
+											<serverError.IconComponent />
+										) : (
+											<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={ isSaveDisabled || ! isDirty || isSaving }
+							onClick={ handleSaveClick }
+							loading={ isSaving }
+						>
 							{ __( 'Save changes', 'elementor' ) }
 						</Button>
-					</PanelFooter>
-				</Panel>
-			</ErrorBoundary>
+					</Infotip>
+				</PanelFooter>
+			</Panel>
+
+			{ deleteConfirmation && (
+				<DeleteConfirmationDialog
+					open
+					label={ deleteConfirmation.label }
+					onConfirm={ () => handleDeleteVariableWithConfirmation( deleteConfirmation.id ) }
+					closeDialog={ () => setDeleteConfirmation( null ) }
+				/>
+			) }
+
+			{ isSaveChangesDialogOpen && (
+				<SaveChangesDialog>
+					<SaveChangesDialog.Title onClose={ closeSaveChangesDialog }>
+						{ __( 'You have unsaved changes', 'elementor' ) }
+					</SaveChangesDialog.Title>
+					<SaveChangesDialog.Content>
+						<SaveChangesDialog.ContentText>
+							{ __( 'To avoid losing your updates, save your changes before leaving.', 'elementor' ) }
+						</SaveChangesDialog.ContentText>
+					</SaveChangesDialog.Content>
+					<SaveChangesDialog.Actions
+						actions={ {
+							discard: {
+								label: __( 'Discard', 'elementor' ),
+								action: () => {
+									closeSaveChangesDialog();
+									closePanel();
+								},
+							},
+							confirm: {
+								label: __( 'Save', 'elementor' ),
+								action: async () => {
+									const result = await handleSaveClick();
+									closeSaveChangesDialog();
+									if ( result?.success ) {
+										closePanel();
+									}
+								},
+							},
+						} }
+					/>
+				</SaveChangesDialog>
+			) }
 		</ThemeProvider>
 	);
 }
 
-const CloseButton = ( { onClose, ...props }: IconButtonProps & { onClose: () => void } ) => (
-	<IconButton size="small" color="secondary" onClick={ onClose } aria-label="Close" { ...props }>
-		<XIcon fontSize="small" />
-	</IconButton>
-);
-
-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 ) => {

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createElement, useState } from 'react';
+import { createElement, useEffect, useRef } from 'react';
 import { EllipsisWithTooltip } from '@elementor/editor-ui';
 import { GripVerticalIcon } from '@elementor/icons';
 import {
@@ -20,18 +20,54 @@ import { __ } from '@wordpress/i18n';
 import { type TVariablesList } from '../../storage';
 import { getVariableType } from '../../variables-registry/variable-type-registry';
 import { LabelField } from '../fields/label-field';
-import { VariableEditMenu, type VariableManagerMenuAction } from './variable-edit-menu';
+import { VariableEditMenu, type VariableManagerMenuAction } from './ui/variable-edit-menu';
+import { VariableTableCell } from './ui/variable-table-cell';
 import { VariableEditableCell } from './variable-editable-cell';
-import { VariableTableCell } from './variable-table-cell';
 
 type Props = {
 	menuActions: VariableManagerMenuAction[];
 	variables: TVariablesList;
 	onChange: ( variables: TVariablesList ) => void;
+	autoEditVariableId?: string;
+	onAutoEditComplete?: () => void;
+	onFieldError?: ( hasError: boolean ) => void;
 };
 
-export const VariablesManagerTable = ( { menuActions, variables, onChange: handleOnChange }: Props ) => {
-	const [ ids, setIds ] = useState< string[] >( Object.keys( variables ) );
+export const VariablesManagerTable = ( {
+	menuActions,
+	variables,
+	onChange: handleOnChange,
+	autoEditVariableId,
+	onAutoEditComplete,
+	onFieldError,
+}: Props ) => {
+	const tableContainerRef = useRef< HTMLDivElement >( null );
+	const variableRowRefs = useRef< Map< string, HTMLTableRowElement > >( new Map() );
+
+	useEffect( () => {
+		if ( autoEditVariableId && tableContainerRef.current ) {
+			const rowElement = variableRowRefs.current.get( autoEditVariableId );
+			if ( rowElement ) {
+				setTimeout( () => {
+					rowElement.scrollIntoView( {
+						behavior: 'smooth',
+						block: 'center',
+						inline: 'nearest',
+					} );
+				}, 100 );
+			}
+		}
+	}, [ autoEditVariableId ] );
+
+	const handleRowRef = ( id: string ) => ( ref: HTMLTableRowElement | null ) => {
+		if ( ref ) {
+			variableRowRefs.current.set( id, ref );
+		} else {
+			variableRowRefs.current.delete( id );
+		}
+	};
+
+	const ids = Object.keys( variables ).sort( sortVariablesOrder( variables ) );
 	const rows = ids
 		.filter( ( id ) => ! variables[ id ].deleted )
 		.map( ( id ) => {
@@ -40,9 +76,9 @@ export const VariablesManagerTable = ( { menuActions, variables, onChange: handl
 
 			return {
 				id,
+				type: variable.type,
 				name: variable.label,
 				value: variable.value,
-				type: variable.type,
 				...variableType,
 			};
 		} );
@@ -52,8 +88,24 @@ export const VariablesManagerTable = ( { menuActions, variables, onChange: handl
 		tableLayout: 'fixed',
 	};
 
+	const handleReorder = ( newIds: string[] ) => {
+		const updatedVariables = { ...variables };
+
+		newIds.forEach( ( id, index ) => {
+			const current = updatedVariables[ id ];
+
+			if ( ! current ) {
+				return;
+			}
+
+			updatedVariables[ id ] = Object.assign( {}, current, { order: index + 1 } );
+		} );
+
+		handleOnChange( updatedVariables );
+	};
+
 	return (
-		<TableContainer sx={ { overflow: 'initial' } }>
+		<TableContainer ref={ tableContainerRef } sx={ { overflow: 'initial' } }>
 			<Table sx={ tableSX } aria-label="Variables manager list with drag and drop reordering" stickyHeader>
 				<TableHead>
 					<TableRow>
@@ -66,7 +118,7 @@ export const VariablesManagerTable = ( { menuActions, variables, onChange: handl
 				<TableBody>
 					<UnstableSortableProvider
 						value={ ids }
-						onChange={ setIds }
+						onChange={ handleReorder }
 						variant="static"
 						restrictAxis
 						dragOverlay={ ( { children: dragOverlayChildren, ...dragOverlayProps } ) => (
@@ -88,9 +140,7 @@ export const VariablesManagerTable = ( { menuActions, variables, onChange: handl
 									isDragged,
 									dropPosition,
 									setTriggerRef,
-									isDragOverlay,
 									isSorting,
-									index,
 								}: UnstableSortableItemRenderProps ) => {
 									const showIndicationBefore = showDropIndication && dropPosition === 'before';
 									const showIndicationAfter = showDropIndication && dropPosition === 'after';
@@ -123,7 +173,6 @@ export const VariablesManagerTable = ( { menuActions, variables, onChange: handl
 												},
 											} }
 											style={ { ...itemStyle, ...triggerStyle } }
-											disableDivider={ isDragOverlay || index === rows.length - 1 }
 										>
 											<VariableTableCell noPadding width={ 10 } maxWidth={ 10 }>
 												<IconButton
@@ -148,15 +197,34 @@ export const VariablesManagerTable = ( { menuActions, variables, onChange: handl
 														}
 													} }
 													prefixElement={ createElement( row.icon, { fontSize: 'inherit' } ) }
-													editableElement={ ( { value, onChange } ) => (
+													editableElement={ ( {
+														value,
+														onChange,
+														onValidationChange,
+														error,
+													} ) => (
 														<LabelField
 															id={ 'variable-label-' + row.id }
 															size="tiny"
 															value={ value }
 															onChange={ onChange }
+															onErrorChange={ ( errorMsg ) => {
+																onValidationChange?.( errorMsg );
+																onFieldError?.( !! errorMsg );
+															} }
+															error={ error }
 															focusOnShow
+															selectOnShow={ autoEditVariableId === row.id }
+															showWarningInfotip={ true }
+															variables={ variables }
 														/>
 													) }
+													autoEdit={ autoEditVariableId === row.id }
+													onRowRef={ handleRowRef( row.id ) }
+													onAutoEditComplete={
+														autoEditVariableId === row.id ? onAutoEditComplete : undefined
+													}
+													fieldType="label"
 												>
 													<EllipsisWithTooltip
 														title={ row.name }
@@ -177,12 +245,34 @@ export const VariablesManagerTable = ( { menuActions, variables, onChange: handl
 															} );
 														}
 													} }
-													editableElement={ row.valueField }
+													editableElement={ ( {
+														value,
+														onChange,
+														onValidationChange,
+														error,
+													} ) =>
+														row.valueField( {
+															value,
+															onChange,
+															onValidationChange: ( errorMsg ) => {
+																onValidationChange?.( errorMsg );
+																onFieldError?.( !! errorMsg );
+															},
+															error,
+														} )
+													}
+													onRowRef={ handleRowRef( row.id ) }
+													gap={ 0.25 }
+													fieldType="value"
 												>
 													{ row.startIcon && row.startIcon( { value: row.value } ) }
 													<EllipsisWithTooltip
 														title={ row.value }
-														sx={ { border: '4px solid transparent' } }
+														sx={ {
+															border: '4px solid transparent',
+															lineHeight: '1',
+															pt: 0.25,
+														} }
 													>
 														{ row.value }
 													</EllipsisWithTooltip>
@@ -214,3 +304,10 @@ export const VariablesManagerTable = ( { menuActions, variables, onChange: handl
 		</TableContainer>
 	);
 };
+function sortVariablesOrder( variables: TVariablesList ): ( a: string, b: string ) => number {
+	return ( a, b ) => {
+		const orderA = variables[ a ]?.order ?? Number.MAX_SAFE_INTEGER;
+		const orderB = variables[ b ]?.order ?? Number.MAX_SAFE_INTEGER;
+		return orderA - orderB;
+	};
+}