@elementor/editor-audits 4.4.0-1118 → 4.4.0-1120

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-audits",
-  "version": "4.4.0-1118",
+  "version": "4.4.0-1120",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,21 +39,21 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "4.4.0-1118",
-    "@elementor/editor-mcp": "4.4.0-1118",
-    "@elementor/editor-app-bar": "4.4.0-1118",
-    "@elementor/editor-elements": "4.4.0-1118",
-    "@elementor/editor-floating-panels": "4.4.0-1118",
-    "@elementor/editor-notifications": "4.4.0-1118",
-    "@elementor/editor-props": "4.4.0-1118",
-    "@elementor/editor-styles": "4.4.0-1118",
-    "@elementor/editor-v1-adapters": "4.4.0-1118",
-    "@elementor/events": "4.4.0-1118",
-    "@elementor/http-client": "4.4.0-1118",
+    "@elementor/editor": "4.4.0-1120",
+    "@elementor/editor-mcp": "4.4.0-1120",
+    "@elementor/editor-app-bar": "4.4.0-1120",
+    "@elementor/editor-elements": "4.4.0-1120",
+    "@elementor/editor-floating-panels": "4.4.0-1120",
+    "@elementor/editor-notifications": "4.4.0-1120",
+    "@elementor/editor-props": "4.4.0-1120",
+    "@elementor/editor-styles": "4.4.0-1120",
+    "@elementor/editor-v1-adapters": "4.4.0-1120",
+    "@elementor/events": "4.4.0-1120",
+    "@elementor/http-client": "4.4.0-1120",
     "@elementor/icons": "~1.77.0",
-    "@elementor/locations": "4.4.0-1118",
-    "@elementor/session": "4.4.0-1118",
-    "@elementor/store": "4.4.0-1118",
+    "@elementor/locations": "4.4.0-1120",
+    "@elementor/session": "4.4.0-1120",
+    "@elementor/store": "4.4.0-1120",
     "@elementor/ui": "1.37.5"
   },
   "peerDependencies": {

package/src/components/audit-panel.tsx

@@ -1,8 +1,7 @@
 import * as React from 'react';
 import { getHostDocumentId } from '@elementor/editor-elements';
 import { FloatingPanelBody, FloatingPanelFooter, FloatingPanelHeader } from '@elementor/editor-floating-panels';
-import { ReloadIcon } from '@elementor/icons';
-import { Box, Button, Typography } from '@elementor/ui';
+import { Box, Typography } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { AUDIT_PANEL_ID } from '../constants';
@@ -12,9 +11,10 @@ import ErrorPage from './pages/error-page';
 import LoadingPage from './pages/loading-page';
 import WelcomePage from './pages/welcome-page';
 import ReportShell from './report-shell';
+import RescanButton from './rescan-button';
 
 export default function AuditPanel() {
-	const { status, report, error, run } = useAuditReport();
+	const { status, report, error, isStale, run } = useAuditReport();
 
 	const hostDocumentId = getHostDocumentId() ?? 0;
 	const onRun = () => run( hostDocumentId );
@@ -49,15 +49,12 @@ export default function AuditPanel() {
 					<Box sx={ { flex: 1 } } />
 				) }
 				{ lastScanLabel && <AuditFeedback /> }
-				<Button
-					variant="contained"
-					size="small"
-					startIcon={ lastScanLabel ? <ReloadIcon fontSize="small" /> : undefined }
-					onClick={ onRun }
+				<RescanButton
+					hasScanned={ Boolean( lastScanLabel ) }
+					isStale={ isStale }
 					disabled={ status === 'loading' || hostDocumentId === 0 }
-				>
-					{ lastScanLabel ? __( 'Rescan', 'elementor' ) : __( 'Run page audit', 'elementor' ) }
-				</Button>
+					onClick={ onRun }
+				/>
 			</FloatingPanelFooter>
 		</>
 	);

package/src/components/audit-toggle-icon.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { ShieldCheckIcon } from '@elementor/icons';
+import { __useSelector as useSelector } from '@elementor/store';
+import { Badge } from '@elementor/ui';
+
+import { type GlobalState, selectIsStale } from '../store';
+
+export default function AuditToggleIcon() {
+	const isStale = useSelector( ( state: GlobalState ) => selectIsStale( state ) );
+
+	return (
+		<Badge
+			variant="dot"
+			color="warning"
+			invisible={ ! isStale }
+			overlap="circular"
+			slotProps={ { badge: { 'data-testid': 'audit-stale-indicator' } } }
+		>
+			<ShieldCheckIcon />
+		</Badge>
+	);
+}

package/src/components/rescan-button.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { useFloatingPanelZIndex } from '@elementor/editor-floating-panels';
+import { ReloadIcon } from '@elementor/icons';
+import { Badge, Button, Tooltip } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { AUDIT_PANEL_ID } from '../constants';
+
+type Props = {
+	hasScanned: boolean;
+	isStale: boolean;
+	disabled: boolean;
+	onClick: () => void;
+};
+
+export default function RescanButton( { hasScanned, isStale, disabled, onClick }: Props ) {
+	const panelZIndex = useFloatingPanelZIndex( AUDIT_PANEL_ID );
+
+	return (
+		<Tooltip
+			title={ __( 'Page content changed - rescan advised', 'elementor' ) }
+			disableHoverListener={ ! isStale }
+			PopperProps={ { sx: { zIndex: panelZIndex } } }
+		>
+			<Badge variant="dot" color="warning" invisible={ ! isStale } overlap="rectangular">
+				<Button
+					variant="contained"
+					size="small"
+					startIcon={ hasScanned ? <ReloadIcon fontSize="small" /> : undefined }
+					onClick={ onClick }
+					disabled={ disabled }
+				>
+					{ hasScanned ? __( 'Rescan', 'elementor' ) : __( 'Run page audit', 'elementor' ) }
+				</Button>
+			</Badge>
+		</Tooltip>
+	);
+}

package/src/hooks/use-audit-report.ts

@@ -3,7 +3,7 @@ import { getHostDocumentId } from '@elementor/editor-elements';
 import { __useDispatch as useDispatch, __useSelector as useSelector } from '@elementor/store';
 
 import { runPageAudit } from '../runner';
-import { type GlobalState, selectError, selectReport, selectStatus, slice } from '../store';
+import { type GlobalState, selectError, selectIsStale, selectReport, selectStatus, slice } from '../store';
 import { getPersistedReport, persistReport } from '../utils/report-storage';
 import { SessionExpiredError } from '../utils/session-expiration';
 
@@ -11,6 +11,7 @@ export function useAuditReport() {
 	const status = useSelector( ( state: GlobalState ) => selectStatus( state ) );
 	const report = useSelector( ( state: GlobalState ) => selectReport( state ) );
 	const error = useSelector( ( state: GlobalState ) => selectError( state ) );
+	const isStale = useSelector( ( state: GlobalState ) => selectIsStale( state ) );
 	const dispatch = useDispatch();
 	const documentId = getHostDocumentId() ?? 0;
 
@@ -45,5 +46,5 @@ export function useAuditReport() {
 		}
 	};
 
-	return { status, report, error, run };
+	return { status, report, error, isStale, run };
 }

package/src/hooks/use-audit-toggle-props.ts

@@ -1,7 +1,7 @@
 import { type ToggleActionProps } from '@elementor/editor-app-bar';
-import { ShieldCheckIcon } from '@elementor/icons';
 import { __ } from '@wordpress/i18n';
 
+import AuditToggleIcon from '../components/audit-toggle-icon';
 import { auditPanel } from '../editor-panel';
 
 export function useAuditToggleProps(): ToggleActionProps {
@@ -10,7 +10,7 @@ export function useAuditToggleProps(): ToggleActionProps {
 
 	return {
 		title: __( 'Audit Page', 'elementor' ),
-		icon: ShieldCheckIcon,
+		icon: AuditToggleIcon,
 		selected: isOpen,
 		onClick: () => toggle(),
 	};

package/src/init.ts

@@ -5,10 +5,12 @@ import { registerAppBarAuditsToggle } from './editor-app-bar';
 import { auditPanel } from './editor-panel';
 import { registerAllAudits } from './register-audits';
 import { slice } from './store/slice';
+import { syncReportStaleness } from './sync-report-staleness';
 
 export function init(): void {
 	registerSlice( slice );
 	registerAllAudits();
 	registerFloatingPanel( auditPanel.panel );
 	registerAppBarAuditsToggle();
+	syncReportStaleness();
 }

package/src/store/selectors.ts

@@ -13,3 +13,7 @@ export function selectReport( state: GlobalState ) {
 export function selectError( state: GlobalState ) {
 	return state.audits.error;
 }
+
+export function selectIsStale( state: GlobalState ) {
+	return state.audits.isStale;
+}

package/src/store/slice.ts

@@ -6,9 +6,10 @@ type SliceState = {
 	status: 'idle' | 'loading' | 'error' | 'ready';
 	report: PageAuditReport | null;
 	error: string | null;
+	isStale: boolean;
 };
 
-const initialState: SliceState = { status: 'idle', report: null, error: null };
+const initialState: SliceState = { status: 'idle', report: null, error: null, isStale: false };
 
 export const slice = __createSlice( {
 	name: 'audits',
@@ -21,6 +22,7 @@ export const slice = __createSlice( {
 		runSucceeded( state, action: PayloadAction< PageAuditReport > ) {
 			state.status = 'ready';
 			state.report = action.payload;
+			state.isStale = false;
 		},
 		runFailed( state, action: PayloadAction< string > ) {
 			state.status = 'error';
@@ -33,11 +35,18 @@ export const slice = __createSlice( {
 			state.status = 'ready';
 			state.report = action.payload;
 			state.error = null;
+			state.isStale = false;
 		},
 		reportCleared( state ) {
 			state.status = 'idle';
 			state.report = null;
 			state.error = null;
+			state.isStale = false;
+		},
+		reportStale( state ) {
+			if ( state.report ) {
+				state.isStale = true;
+			}
 		},
 	},
 } );

package/src/sync-report-staleness.ts

@@ -0,0 +1,14 @@
+import { __privateListenTo as listenTo, commandEndEvent, type CommandEvent } from '@elementor/editor-v1-adapters';
+import { __dispatch as dispatch } from '@elementor/store';
+
+import { slice } from './store/slice';
+
+export function syncReportStaleness() {
+	listenTo( commandEndEvent( 'document/save/set-is-modified' ), ( e ) => {
+		const event = e as CommandEvent< { status: boolean } >;
+
+		if ( event.args?.status ) {
+			dispatch( slice.actions.reportStale() );
+		}
+	} );
+}