@elementor/editor-audits 4.3.0-1036

package/src/components/report-shell.tsx

@@ -0,0 +1,110 @@
+import * as React from 'react';
+import { useState } from 'react';
+import { Box, Divider, Tab, Tabs } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { type AuditCategory, type PageAuditReport } from '../types';
+import { type AuditStatusGroup } from '../utils/audit-status-summary';
+import AllAuditsPage from './pages/all-audits-page';
+import CategoryPage from './pages/category-page';
+import IssuesPage from './pages/issues-page';
+import OverviewPage from './pages/overview-page';
+
+type TabId = 'overview' | 'issues';
+
+type ActivePage =
+	| 'overview'
+	| 'issues'
+	| { backTo: TabId; category: AuditCategory }
+	| { backTo: TabId; expand?: AuditStatusGroup; page: 'all-audits' };
+
+type Props = {
+	report: PageAuditReport;
+};
+
+function activeTab( page: ActivePage ): TabId {
+	if ( page === 'overview' ) {
+		return 'overview';
+	}
+
+	if ( page === 'issues' ) {
+		return 'issues';
+	}
+
+	return page.backTo;
+}
+
+function isAllAuditsPage( page: ActivePage ): page is { backTo: TabId; expand?: AuditStatusGroup; page: 'all-audits' } {
+	return typeof page === 'object' && 'page' in page && page.page === 'all-audits';
+}
+
+function isCategoryPage( page: ActivePage ): page is { backTo: TabId; category: AuditCategory } {
+	return typeof page === 'object' && 'category' in page;
+}
+
+export default function ReportShell( { report }: Props ) {
+	const [ activePage, setActivePage ] = useState< ActivePage >( 'overview' );
+
+	const currentTab = activeTab( activePage );
+
+	const handleTabChange = ( _: React.SyntheticEvent, value: TabId ) => {
+		setActivePage( value );
+	};
+
+	const openCategory = ( category: AuditCategory, backTo: TabId ) => {
+		setActivePage( { category, backTo } );
+	};
+
+	const openAllAudits = ( expand?: AuditStatusGroup, backTo: TabId = 'issues' ) => {
+		setActivePage( { page: 'all-audits', expand, backTo } );
+	};
+
+	const backFromSubPage = () => {
+		if ( isAllAuditsPage( activePage ) || isCategoryPage( activePage ) ) {
+			setActivePage( activePage.backTo );
+		}
+	};
+
+	return (
+		<Box>
+			<Tabs
+				aria-label={ __( 'Audit navigation', 'elementor' ) }
+				value={ currentTab }
+				onChange={ handleTabChange }
+				textColor="secondary"
+				indicatorColor="secondary"
+				size="small"
+				centered={ true }
+				variant="fullWidth"
+			>
+				<Tab value="overview" label={ __( 'Overview', 'elementor' ) } />
+				<Tab value="issues" label={ __( 'Issues', 'elementor' ) } />
+			</Tabs>
+			<Divider />
+			{ activePage === 'overview' && (
+				<OverviewPage
+					report={ report }
+					onCategoryClick={ ( category ) => openCategory( category, 'overview' ) }
+					onStatusClick={ ( status ) => openAllAudits( status, 'overview' ) }
+				/>
+			) }
+			{ activePage === 'issues' && (
+				<IssuesPage
+					report={ report }
+					onCategoryClick={ ( category ) => openCategory( category, 'issues' ) }
+					onAllAuditsClick={ () => openAllAudits() }
+				/>
+			) }
+			{ isAllAuditsPage( activePage ) && (
+				<AllAuditsPage
+					report={ report }
+					initialExpandedStatus={ activePage.expand }
+					onBack={ backFromSubPage }
+				/>
+			) }
+			{ isCategoryPage( activePage ) && (
+				<CategoryPage category={ activePage.category } report={ report } onBack={ backFromSubPage } />
+			) }
+		</Box>
+	);
+}

package/src/components/score-bar.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { ChevronRightIcon } from '@elementor/icons';
+import { Box, LinearProgress, Rotate, Typography, useTheme } from '@elementor/ui';
+
+import { onKeyboardClick } from '../utils/keyboard-click';
+import { getScoreTier } from '../utils/score-thresholds';
+
+type Props = {
+	label: string;
+	score: number;
+	onClick?: () => void;
+};
+
+export default function ScoreBar( { label, score, onClick }: Props ) {
+	const isRtl = 'rtl' === useTheme().direction;
+
+	return (
+		<Box
+			role={ onClick ? 'button' : undefined }
+			tabIndex={ onClick ? 0 : undefined }
+			onClick={ onClick }
+			onKeyDown={ onClick ? onKeyboardClick( onClick ) : undefined }
+			sx={ {
+				display: 'flex',
+				alignItems: 'center',
+				gap: 1,
+				cursor: onClick ? 'pointer' : 'default',
+				outline: 'none',
+				'&:focus-visible': { outline: '2px solid', outlineColor: 'primary.main', borderRadius: 1 },
+				py: 0.5,
+			} }
+		>
+			<Typography variant="body2" sx={ { minWidth: 96 } }>
+				{ label }
+			</Typography>
+			<LinearProgress
+				variant="determinate"
+				value={ score }
+				color={ getScoreTier( score ).color }
+				sx={ { flex: 1, height: 6, borderRadius: 4, bgcolor: 'action.disabledBackground' } }
+			/>
+			<Typography
+				variant="body2"
+				color="text.primary"
+				sx={ { minWidth: 24, textAlign: 'right', fontWeight: 900 } }
+			>
+				{ score }
+			</Typography>
+			{ onClick && (
+				<Rotate in={ isRtl }>
+					<ChevronRightIcon fontSize="small" color="action" />
+				</Rotate>
+			) }
+		</Box>
+	);
+}

package/src/components/score-circle.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { Box, CircularProgress, Typography } from '@elementor/ui';
+
+import { getScoreTier, type ScoreColor } from '../utils/score-thresholds';
+
+type Props = {
+	color?: ScoreColor;
+	score: number;
+};
+
+const SCORE_CIRCLE_SIZE = 88;
+const SCORE_CIRCLE_THICKNESS = 3;
+
+export default function ScoreCircle( { color, score }: Props ) {
+	const progressColor = color ?? getScoreTier( score ).color;
+
+	return (
+		<Box
+			role="progressbar"
+			aria-valuenow={ score }
+			aria-valuemin={ 0 }
+			aria-valuemax={ 100 }
+			sx={ { position: 'relative', display: 'inline-flex' } }
+		>
+			<CircularProgress
+				variant="determinate"
+				value={ 100 }
+				size={ SCORE_CIRCLE_SIZE }
+				thickness={ SCORE_CIRCLE_THICKNESS }
+				sx={ { color: 'action.disabledBackground' } }
+			/>
+			<CircularProgress
+				variant="determinate"
+				value={ score }
+				size={ SCORE_CIRCLE_SIZE }
+				thickness={ SCORE_CIRCLE_THICKNESS }
+				color={ progressColor }
+				sx={ { position: 'absolute', left: 0 } }
+			/>
+			<Box
+				sx={ {
+					position: 'absolute',
+					inset: 0,
+					display: 'flex',
+					alignItems: 'center',
+					justifyContent: 'center',
+				} }
+			>
+				<Typography
+					variant="h4"
+					component="span"
+					color="text.primary"
+					sx={ { fontWeight: 700, lineHeight: 1 } }
+				>
+					{ score }
+				</Typography>
+			</Box>
+		</Box>
+	);
+}

package/src/components/severity-icons.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { AlertCircleIcon, AlertTriangleFilledIcon, InfoCircleIcon } from '@elementor/icons';
+
+import { type AuditSeverity } from '../types';
+
+type IconComponent = typeof AlertTriangleFilledIcon;
+
+type SeverityConfig = {
+	Icon: IconComponent;
+	color: 'error' | 'warning' | 'info';
+};
+
+const SEVERITY_CONFIG: Record< AuditSeverity, SeverityConfig > = {
+	error: { Icon: AlertTriangleFilledIcon, color: 'error' },
+	warning: { Icon: AlertCircleIcon, color: 'warning' },
+	info: { Icon: InfoCircleIcon, color: 'info' },
+};
+
+type Props = {
+	severity: AuditSeverity;
+};
+
+export default function SeverityIcon( { severity }: Props ) {
+	const { Icon, color } = SEVERITY_CONFIG[ severity ];
+	return <Icon fontSize="small" color={ color } />;
+}

package/src/components/status-section.tsx

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { useState } from 'react';
+import { ChevronDownIcon } from '@elementor/icons';
+import { Box, Chip, type ChipProps, Collapse, IconButton } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+type Props = {
+	label: string;
+	count: number;
+	color?: ChipProps[ 'color' ];
+	defaultExpanded?: boolean;
+	children: React.ReactNode;
+};
+
+export default function StatusSection( { label, count, color = 'default', defaultExpanded = false, children }: Props ) {
+	const [ expanded, setExpanded ] = useState( defaultExpanded );
+
+	if ( count === 0 ) {
+		return null;
+	}
+
+	return (
+		<Box sx={ { paddingBlock: 1 } }>
+			<Box
+				sx={ { display: 'flex', alignItems: 'center', gap: 0.5, cursor: 'pointer' } }
+				onClick={ () => setExpanded( ( v ) => ! v ) }
+			>
+				<IconButton
+					size="small"
+					aria-label={ expanded ? __( 'Collapse', 'elementor' ) : __( 'Expand', 'elementor' ) }
+				>
+					<ChevronDownIcon
+						fontSize="small"
+						sx={ {
+							transform: expanded ? 'rotate(180deg)' : undefined,
+							transition: 'transform .2s',
+						} }
+					/>
+				</IconButton>
+				<Chip label={ `${ label } (${ count })` } size="small" color={ color } variant="standard" />
+			</Box>
+			<Collapse in={ expanded }>
+				<Box sx={ { paddingInlineStart: 4.25, paddingBlock: 2 } }>{ children }</Box>
+			</Collapse>
+		</Box>
+	);
+}

package/src/components/subpage-header.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { ArrowLeftIcon } from '@elementor/icons';
+import { Box, IconButton, Rotate, Typography, useTheme } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+type Props = {
+	title: string;
+	onBack: () => void;
+	backLabel?: string;
+	icon?: React.ReactNode;
+};
+
+export default function SubpageHeader( { title, onBack, backLabel, icon }: Props ) {
+	const isRtl = 'rtl' === useTheme().direction;
+
+	return (
+		<Box sx={ { display: 'flex', alignItems: 'center', gap: 0.5, p: 1 } }>
+			<IconButton size="small" onClick={ onBack } aria-label={ backLabel ?? __( 'Back', 'elementor' ) }>
+				<Rotate in={ isRtl }>
+					<ArrowLeftIcon fontSize="small" />
+				</Rotate>
+			</IconButton>
+			{ icon }
+			<Typography variant="subtitle2" fontWeight="bold">
+				{ title }
+			</Typography>
+		</Box>
+	);
+}

package/src/components/violation-icons.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { FileSettingsIcon, SettingsIcon, ShieldCheckIcon } from '@elementor/icons';
+import { Box } from '@elementor/ui';
+
+import { type AuditViolation } from '../types';
+
+type Props = {
+	violation: AuditViolation;
+	widgetIcon: string | null;
+};
+
+export default function ViolationIcon( { violation, widgetIcon }: Props ) {
+	if ( widgetIcon ) {
+		return (
+			<Box
+				component="i"
+				className={ widgetIcon }
+				aria-hidden={ true }
+				sx={ { fontSize: 'inherit', width: '1em', textAlign: 'center' } }
+			/>
+		);
+	}
+
+	if ( violation.targetHint === 'page-settings' ) {
+		return <FileSettingsIcon fontSize="inherit" aria-hidden={ true } />;
+	}
+
+	if ( violation.targetHint === 'site-settings' || violation.targetHint === 'site-identity-settings' ) {
+		return <SettingsIcon fontSize="inherit" aria-hidden={ true } />;
+	}
+
+	return <ShieldCheckIcon fontSize="inherit" aria-hidden={ true } />;
+}

package/src/components/violation-row.tsx

@@ -0,0 +1,169 @@
+import * as React from 'react';
+import { useState } from 'react';
+import { getElementIcon, getElementTitle } from '@elementor/editor-elements';
+import { AlertCircleIcon, BulbIcon, CheckIcon, ChevronDownIcon, EyeIcon, HelpIcon } from '@elementor/icons';
+import { Alert, AlertTitle, Box, Collapse, IconButton, Tooltip, Typography } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { focusViolation } from '../hooks/focus-violation';
+import { type AuditMeta, type AuditViolation } from '../types';
+import { buildAngiePrompt } from '../utils/build-angie-prompt';
+import { onKeyboardClick } from '../utils/keyboard-click';
+import FixViolationWithAngie from './fix-violation-with-angie';
+import SeverityIcon from './severity-icons';
+import ViolationIcon from './violation-icons';
+
+type Props = {
+	audit: AuditMeta;
+	skipReason?: string;
+	violations?: AuditViolation[];
+};
+
+function SkipReasonTooltip( { reason }: { reason: string } ) {
+	return (
+		<Tooltip title={ reason } placement="top">
+			<Box aria-label={ reason } component="span" sx={ { display: 'inline-flex', alignItems: 'center' } }>
+				<HelpIcon fontSize="small" color="action" />
+			</Box>
+		</Tooltip>
+	);
+}
+
+function StatusIndicator( { audit, violations }: Pick< Props, 'audit' | 'violations' > ) {
+	if ( violations ) {
+		return (
+			<>
+				<Typography variant="caption" color="text.secondary" fontWeight="bold">
+					{ violations.length }
+				</Typography>
+				<SeverityIcon severity={ audit.severity } />
+			</>
+		);
+	}
+
+	return <CheckIcon fontSize="small" color="success" />;
+}
+
+export default function ViolationRow( { audit, skipReason, violations }: Props ) {
+	const [ expanded, setExpanded ] = useState( false );
+
+	const toggleExpanded = () => setExpanded( ( value ) => ! value );
+
+	return (
+		<Box sx={ { borderBottom: 1, borderColor: 'divider', paddingBlock: 0.5 } }>
+			<Box sx={ { display: 'flex', alignItems: 'center', gap: 0.5 } }>
+				<Box
+					sx={ {
+						alignItems: 'center',
+						cursor: 'pointer',
+						display: 'flex',
+						flex: 1,
+						gap: 0.5,
+						minWidth: 0,
+					} }
+					onClick={ toggleExpanded }
+				>
+					<Typography variant="body2" sx={ { flex: 1 } }>
+						{ audit.title }
+					</Typography>
+					{ ! skipReason && <StatusIndicator audit={ audit } violations={ violations } /> }
+				</Box>
+				{ skipReason && <SkipReasonTooltip reason={ skipReason } /> }
+				<IconButton
+					size="small"
+					aria-label={ expanded ? __( 'Collapse', 'elementor' ) : __( 'Expand', 'elementor' ) }
+					onClick={ toggleExpanded }
+				>
+					<ChevronDownIcon
+						fontSize="small"
+						sx={ {
+							transform: expanded ? 'rotate(180deg)' : undefined,
+							transition: 'transform .2s',
+						} }
+					/>
+				</IconButton>
+			</Box>
+			<Collapse in={ expanded }>
+				<Box sx={ { display: 'flex', flexDirection: 'column', gap: 1, paddingBlock: 1 } }>
+					<Alert
+						severity="secondary"
+						sx={ { p: 1 } }
+						icon={ <AlertCircleIcon fontSize="small" color="secondary" aria-hidden={ true } /> }
+					>
+						<AlertTitle>
+							<Typography variant="caption" component="p" color="text.primary" fontWeight="bold">
+								{ __( "What's the issue", 'elementor' ) }
+							</Typography>
+						</AlertTitle>
+						<Typography variant="caption" component="p" color="text.secondary">
+							{ audit.description }
+						</Typography>
+					</Alert>
+					<Alert
+						severity="info"
+						sx={ { p: 1 } }
+						icon={ <BulbIcon fontSize="small" color="info" aria-hidden={ true } /> }
+					>
+						<AlertTitle>
+							<Typography variant="caption" component="p" color="text.primary" fontWeight="bold">
+								{ __( 'How to resolve', 'elementor' ) }
+							</Typography>
+						</AlertTitle>
+						<Typography variant="caption" component="p" color="text.secondary">
+							{ audit.fixHint }
+						</Typography>
+					</Alert>
+				</Box>
+				{ violations && violations.length > 0 && (
+					<Box role="list" sx={ { paddingBlockEnd: 1, paddingInlineStart: 2 } }>
+						{ violations.map( ( violation, idx ) => {
+							const widgetIcon = violation.elementId ? getElementIcon( violation.elementId ) : null;
+							const elementTitle = violation.elementId ? getElementTitle( violation.elementId ) : null;
+							const rowLabel = elementTitle
+								? `${ elementTitle } - ${ violation.label }`
+								: violation.label;
+
+							return (
+								<Box
+									key={ idx }
+									role="button"
+									tabIndex={ 0 }
+									onClick={ () => focusViolation( violation ) }
+									onKeyDown={ onKeyboardClick( () => focusViolation( violation ) ) }
+									sx={ {
+										display: 'flex',
+										alignItems: 'center',
+										gap: 1,
+										paddingBlock: 0.5,
+										paddingInline: 2,
+										borderRadius: 1,
+										cursor: 'pointer',
+										'& .violation-hover-icon': { opacity: 0, transition: 'opacity .15s' },
+										'&:hover': { bgcolor: 'action.hover' },
+										'&:hover .violation-hover-icon, &:focus-visible .violation-hover-icon': {
+											opacity: 1,
+										},
+									} }
+								>
+									<ViolationIcon violation={ violation } widgetIcon={ widgetIcon } />
+									<Box sx={ { flex: 1 } }>
+										<Typography variant="caption">{ rowLabel }</Typography>
+										{ violation.detail && (
+											<Typography variant="caption" color="text.secondary">
+												{ violation.detail }
+											</Typography>
+										) }
+									</Box>
+									{ violation.angieFix && (
+										<FixViolationWithAngie prompt={ buildAngiePrompt( rowLabel ) } />
+									) }
+									<EyeIcon className="violation-hover-icon" fontSize="tiny" aria-hidden={ true } />
+								</Box>
+							);
+						} ) }
+					</Box>
+				) }
+			</Collapse>
+		</Box>
+	);
+}

package/src/constants.ts

@@ -0,0 +1,35 @@
+import { __ } from '@wordpress/i18n';
+
+import { type AuditCategory } from './types';
+
+export const AUDIT_PANEL_ID = 'audit-panel';
+
+export const REPORT_STORAGE_KEY_PREFIX = 'elementor/audits/report';
+
+export const CREATE_WIDGET_EVENT = 'elementor/editor/create-widget';
+
+export const ANGIE_FIX_ENTRY_POINT = 'audit_violation';
+
+export const FEEDBACK_EXPERIMENT_NAME = 'in_editor_feedback';
+export const FEEDBACK_ENTRY_POINT = 'audit_panel';
+
+export const FEEDBACK_CLICKED_EVENT = 'audit_feedback_clicked';
+export const FEEDBACK_SENT_EVENT = 'audit_feedback_sent';
+export const FEEDBACK_CANCELLED_EVENT = 'audit_feedback_cancelled';
+export const FEEDBACK_CLOSED_EVENT = 'audit_feedback_closed';
+
+export const ALL_CATEGORIES: AuditCategory[] = [
+	'best-practices',
+	'seo',
+	'accessibility',
+	'performance',
+	'compliance',
+];
+
+export const CATEGORY_LABELS: Record< AuditCategory, string > = {
+	'best-practices': __( 'Best Practices', 'elementor' ),
+	seo: __( 'SEO', 'elementor' ),
+	accessibility: __( 'Accessibility', 'elementor' ),
+	performance: __( 'Performance', 'elementor' ),
+	compliance: __( 'Compliance', 'elementor' ),
+};

package/src/editor-app-bar.tsx

@@ -0,0 +1,13 @@
+import { utilitiesMenu } from '@elementor/editor-app-bar';
+
+import { useAuditToggleProps } from './hooks/use-audit-toggle-props';
+
+const AUDIT_TOGGLE_PRIORITY = 24;
+
+export function registerAppBarAuditsToggle(): void {
+	utilitiesMenu.registerToggleAction( {
+		id: 'toggle-audit-panel',
+		priority: AUDIT_TOGGLE_PRIORITY,
+		useProps: useAuditToggleProps,
+	} );
+}

package/src/editor-panel.tsx

@@ -0,0 +1,19 @@
+import { createFloatingPanel } from '@elementor/editor-floating-panels';
+
+import AuditPanel from './components/audit-panel';
+import { AUDIT_PANEL_ID } from './constants';
+
+export const auditPanel = createFloatingPanel( {
+	id: AUDIT_PANEL_ID,
+	title: 'Audit',
+	icon: () => null,
+	component: AuditPanel,
+	isDraggable: true,
+	isResizable: true,
+	defaults: {
+		width: 360,
+		height: 600,
+		minWidth: 280,
+		minHeight: 400,
+	},
+} );

package/src/hooks/focus-violation.ts

@@ -0,0 +1,53 @@
+import { getContainer, selectElement } from '@elementor/editor-elements';
+import { __privateOpenRoute as openRoute, __privateRunCommand as runCommand } from '@elementor/editor-v1-adapters';
+
+import { type AuditViolation } from '../types';
+
+const SCROLL_TO_VIEW_DELAY_MS = 200;
+
+export function focusViolation( violation: AuditViolation ): void {
+	if ( violation.elementId ) {
+		const container = getContainer( violation.elementId );
+
+		if ( container ) {
+			selectElement( violation.elementId );
+
+			const domElement = container.view?.getDomElement?.();
+
+			if ( domElement ) {
+				(
+					window as unknown as {
+						elementor?: { helpers?: { scrollToView?: ( element: unknown, timeout?: number ) => void } };
+					}
+				 ).elementor?.helpers?.scrollToView?.( domElement, SCROLL_TO_VIEW_DELAY_MS );
+			}
+		}
+
+		if ( violation.targetHint === 'element-settings' ) {
+			runCommand( 'panel/editor/open' );
+		}
+
+		return;
+	}
+
+	if ( violation.externalUrl ) {
+		window.open( violation.externalUrl, '_blank' );
+		return;
+	}
+
+	if ( violation.targetHint === 'page-settings' ) {
+		openRoute( 'panel/page-settings/settings' );
+		return;
+	}
+
+	if ( violation.targetHint === 'site-settings' ) {
+		runCommand( 'panel/global/open' );
+		return;
+	}
+
+	if ( violation.targetHint === 'site-identity-settings' ) {
+		void runCommand( 'panel/global/open' ).then( () => {
+			openRoute( 'panel/global/settings-site-identity' );
+		} );
+	}
+}