@elementor/editor-audits 4.3.0-1036

package/src/components/count-summary-circle.tsx

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import { Box, Chip, type ChipProps, type Theme, Typography } from '@elementor/ui';
+
+type Props = {
+	ariaLabel: string;
+	color: ChipProps[ 'color' ];
+	count: number;
+	label: string;
+	onClick: () => void;
+};
+
+const COUNT_SUMMARY_CIRCLE_SIZE = 64;
+const COUNT_SUMMARY_BORDER_WIDTH = 4;
+
+function chipBorderColor( theme: Theme, color: ChipProps[ 'color' ] ): string {
+	if ( color === 'default' || ! color ) {
+		return theme.palette.text.secondary;
+	}
+
+	return theme.palette[ color ].main;
+}
+
+export default function CountSummaryCircle( { ariaLabel, color, count, label, onClick }: Props ) {
+	return (
+		<Box
+			aria-label={ ariaLabel }
+			component="button"
+			onClick={ onClick }
+			type="button"
+			sx={ {
+				alignItems: 'center',
+				background: 'none',
+				border: 'none',
+				cursor: 'pointer',
+				display: 'flex',
+				flex: 1,
+				flexDirection: 'column',
+				gap: 0.5,
+				padding: 0,
+			} }
+		>
+			<Chip
+				color={ color }
+				label={ count }
+				size="small"
+				variant="standard"
+				sx={ ( theme: Theme ) => ( {
+					border: `${ COUNT_SUMMARY_BORDER_WIDTH }px solid ${ chipBorderColor( theme, color ) }`,
+					borderRadius: '50%',
+					height: COUNT_SUMMARY_CIRCLE_SIZE,
+					maxWidth: COUNT_SUMMARY_CIRCLE_SIZE,
+					width: COUNT_SUMMARY_CIRCLE_SIZE,
+					'& .MuiChip-label': {
+						fontSize: theme.typography.body2.fontSize,
+						fontWeight: 700,
+						lineHeight: 1,
+						padding: 0,
+					},
+				} ) }
+			/>
+			<Typography color="text.secondary" sx={ { textAlign: 'center' } } variant="caption">
+				{ label }
+			</Typography>
+		</Box>
+	);
+}

package/src/components/fix-violation-with-angie.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { isAngieAvailable, sendPromptToAngie } from '@elementor/editor-mcp';
+import { AngieIcon } from '@elementor/icons';
+import { IconButton, Tooltip } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { ANGIE_FIX_ENTRY_POINT, CREATE_WIDGET_EVENT } from '../constants';
+
+type Props = {
+	prompt: string;
+};
+
+export default function FixViolationWithAngie( { prompt }: Props ) {
+	const label = __( 'Fix with Angie', 'elementor' );
+	const href = `#angie-prompt=${ encodeURIComponent( prompt ) }`;
+
+	const handleClick = ( event: React.MouseEvent< HTMLAnchorElement > ) => {
+		event.stopPropagation();
+		event.preventDefault();
+
+		if ( isAngieAvailable() ) {
+			sendPromptToAngie( prompt );
+			return;
+		}
+
+		window.dispatchEvent(
+			new CustomEvent( CREATE_WIDGET_EVENT, {
+				detail: {
+					entry_point: ANGIE_FIX_ENTRY_POINT,
+					prompt,
+				},
+			} )
+		);
+	};
+
+	return (
+		<Tooltip title={ label }>
+			<IconButton
+				className="violation-hover-icon"
+				component="a"
+				href={ href }
+				size="small"
+				aria-label={ label }
+				onClick={ handleClick }
+			>
+				<AngieIcon fontSize="tiny" />
+			</IconButton>
+		</Tooltip>
+	);
+}

package/src/components/issues-category-row.tsx

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import { ChevronRightIcon } from '@elementor/icons';
+import { Box, Rotate, Typography, useTheme } from '@elementor/ui';
+
+import { type AuditCategory } from '../types';
+import { onKeyboardClick } from '../utils/keyboard-click';
+import { ALL_SEVERITIES, type SeverityCounts } from '../utils/severity-counts';
+import { CATEGORY_ICONS } from './category-icons';
+import SeverityIcon from './severity-icons';
+
+type Props = {
+	category: AuditCategory;
+	label: string;
+	counts: SeverityCounts;
+	onClick: () => void;
+};
+
+export default function IssuesCategoryRow( { category, label, counts, onClick }: Props ) {
+	const isRtl = 'rtl' === useTheme().direction;
+	const Icon = CATEGORY_ICONS[ category ];
+
+	return (
+		<Box
+			role="button"
+			tabIndex={ 0 }
+			onClick={ onClick }
+			onKeyDown={ onKeyboardClick( onClick ) }
+			sx={ {
+				display: 'flex',
+				alignItems: 'center',
+				gap: 1,
+				px: 2,
+				py: 1.5,
+				cursor: 'pointer',
+				borderRadius: 1,
+				border: 1,
+				borderColor: 'divider',
+				'&:hover': { bgcolor: 'action.hover' },
+				outline: 'none',
+				'&:focus-visible': { outline: '2px solid', outlineColor: 'primary.main' },
+			} }
+		>
+			<Icon fontSize="small" color="action" />
+			<Typography variant="body2" fontWeight="bold" sx={ { flex: 1 } }>
+				{ label }
+			</Typography>
+			<Box sx={ { display: 'flex', alignItems: 'center', gap: 0.5 } }>
+				{ ALL_SEVERITIES.filter( ( s ) => counts[ s ] > 0 ).map( ( severity ) => (
+					<Box key={ severity } sx={ { display: 'flex', alignItems: 'center', gap: 0.25 } }>
+						<SeverityIcon severity={ severity } />
+						<Typography variant="caption" color="text.primary" fontWeight="bold">
+							{ counts[ severity ] }
+						</Typography>
+					</Box>
+				) ) }
+			</Box>
+			<Rotate in={ isRtl }>
+				<ChevronRightIcon fontSize="small" color="action" />
+			</Rotate>
+		</Box>
+	);
+}

package/src/components/pages/all-audits-page.tsx

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import { Box } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { type PageAuditReport } from '../../types';
+import {
+	auditStatusColor,
+	type AuditStatusGroup,
+	auditStatusLabel,
+	partitionAuditResults,
+} from '../../utils/audit-status-summary';
+import StatusSection from '../status-section';
+import SubpageHeader from '../subpage-header';
+import ViolationRow from '../violation-row';
+
+type Props = {
+	initialExpandedStatus?: AuditStatusGroup;
+	onBack: () => void;
+	report: PageAuditReport;
+};
+
+export default function AllAuditsPage( { initialExpandedStatus, onBack, report }: Props ) {
+	const { failed, passed, skipped, totalViolations } = partitionAuditResults( report );
+	const expandFail = ! initialExpandedStatus || initialExpandedStatus === 'fail';
+	const expandPass = initialExpandedStatus === 'pass';
+	const expandSkipped = initialExpandedStatus === 'skipped';
+
+	return (
+		<Box key={ initialExpandedStatus ?? 'default' }>
+			<SubpageHeader title={ __( 'All audits', 'elementor' ) } onBack={ onBack } />
+			<Box sx={ { p: 1 } }>
+				<StatusSection
+					label={ auditStatusLabel( 'fail' ) }
+					count={ totalViolations }
+					color={ auditStatusColor( 'fail' ) }
+					defaultExpanded={ expandFail }
+				>
+					{ failed.map( ( r ) => (
+						<ViolationRow key={ r.audit.id } audit={ r.audit } violations={ r.result.violations } />
+					) ) }
+				</StatusSection>
+				<StatusSection
+					label={ auditStatusLabel( 'pass' ) }
+					count={ passed.length }
+					color={ auditStatusColor( 'pass' ) }
+					defaultExpanded={ expandPass }
+				>
+					{ passed.map( ( r ) => (
+						<ViolationRow key={ r.audit.id } audit={ r.audit } />
+					) ) }
+				</StatusSection>
+				<StatusSection
+					label={ auditStatusLabel( 'skipped' ) }
+					count={ skipped.length }
+					color={ auditStatusColor( 'skipped' ) }
+					defaultExpanded={ expandSkipped }
+				>
+					{ skipped.map( ( r ) => (
+						<ViolationRow key={ r.audit.id } audit={ r.audit } skipReason={ r.result.reason } />
+					) ) }
+				</StatusSection>
+			</Box>
+		</Box>
+	);
+}

package/src/components/pages/category-page.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { Box } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { CATEGORY_LABELS } from '../../constants';
+import { type AuditCategory, type PageAuditReport } from '../../types';
+import { partitionAuditResults } from '../../utils/audit-status-summary';
+import { CATEGORY_ICONS } from '../category-icons';
+import StatusSection from '../status-section';
+import SubpageHeader from '../subpage-header';
+import ViolationRow from '../violation-row';
+
+type Props = {
+	category: AuditCategory;
+	report: PageAuditReport;
+	onBack: () => void;
+};
+
+export default function CategoryPage( { category, report, onBack }: Props ) {
+	const Icon = CATEGORY_ICONS[ category ];
+	const { failed, passed, totalViolations } = partitionAuditResults( report, { category } );
+
+	return (
+		<>
+			<SubpageHeader
+				title={ CATEGORY_LABELS[ category ] }
+				onBack={ onBack }
+				backLabel={ __( 'Back to all issues', 'elementor' ) }
+				icon={ <Icon fontSize="small" color="action" /> }
+			/>
+			<Box sx={ { p: 1 } }>
+				<StatusSection
+					label={ __( 'Failed audits', 'elementor' ) }
+					count={ totalViolations }
+					color="error"
+					defaultExpanded
+				>
+					{ failed.map( ( r ) => (
+						<ViolationRow key={ r.audit.id } audit={ r.audit } violations={ r.result.violations } />
+					) ) }
+				</StatusSection>
+				<StatusSection label={ __( 'Passed audits', 'elementor' ) } count={ passed.length } color="success">
+					{ passed.map( ( r ) => (
+						<ViolationRow key={ r.audit.id } audit={ r.audit } />
+					) ) }
+				</StatusSection>
+			</Box>
+		</>
+	);
+}

package/src/components/pages/error-page.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { Box, Button, Typography } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+type Props = {
+	message: string;
+	onRetry: () => void;
+};
+
+export default function ErrorPage( { message, onRetry }: Props ) {
+	return (
+		<Box sx={ { display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 1.5, p: 4 } }>
+			<Typography variant="body2" color="error" textAlign="center">
+				{ message }
+			</Typography>
+			<Button variant="contained" size="small" onClick={ onRetry }>
+				{ __( 'Try again', 'elementor' ) }
+			</Button>
+		</Box>
+	);
+}

package/src/components/pages/issues-page.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { Box, Link, Typography } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { ALL_CATEGORIES, CATEGORY_LABELS } from '../../constants';
+import { type AuditCategory, type PageAuditReport } from '../../types';
+import { getPopulatedCategories } from '../../utils/audit-status-summary';
+import { countSeverities } from '../../utils/severity-counts';
+import IssuesCategoryRow from '../issues-category-row';
+import Promotions from '../promotions';
+
+type Props = {
+	report: PageAuditReport;
+	onCategoryClick: ( category: AuditCategory ) => void;
+	onAllAuditsClick: () => void;
+};
+
+export default function IssuesPage( { report, onCategoryClick, onAllAuditsClick }: Props ) {
+	const populatedCategories = getPopulatedCategories( report.categories, ALL_CATEGORIES );
+
+	return (
+		<Box sx={ { display: 'flex', flexDirection: 'column', gap: 4, p: 2 } }>
+			<Link
+				component="button"
+				underline="none"
+				color="inherit"
+				onClick={ onAllAuditsClick }
+				sx={ { textAlign: 'start' } }
+			>
+				<Typography variant="subtitle1" component="h2">
+					{ __( 'All issues', 'elementor' ) }
+				</Typography>
+			</Link>
+			<Box sx={ { display: 'flex', flexDirection: 'column', gap: 1 } }>
+				{ populatedCategories.map( ( category ) => (
+					<IssuesCategoryRow
+						key={ category }
+						category={ category }
+						label={ CATEGORY_LABELS[ category ] }
+						counts={ countSeverities( report, category ) }
+						onClick={ () => onCategoryClick( category ) }
+					/>
+				) ) }
+			</Box>
+			<Promotions report={ report } />
+		</Box>
+	);
+}

package/src/components/pages/loading-page.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { Box, CircularProgress, Typography } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+export default function LoadingPage() {
+	return (
+		<Box sx={ { display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 1.5, p: 4 } }>
+			<CircularProgress size={ 32 } />
+			<Typography variant="body2">{ __( 'Audit in progress.', 'elementor' ) }</Typography>
+		</Box>
+	);
+}

package/src/components/pages/overview-page.tsx

@@ -0,0 +1,140 @@
+import * as React from 'react';
+import { Box, Chip, Divider, Typography } from '@elementor/ui';
+import { __, sprintf } from '@wordpress/i18n';
+
+import { ALL_CATEGORIES, CATEGORY_LABELS } from '../../constants';
+import { type AuditCategory, type PageAuditReport } from '../../types';
+import {
+	auditStatusColor,
+	auditStatusDisplayCounts,
+	type AuditStatusGroup,
+	auditStatusLabel,
+	getPopulatedCategories,
+} from '../../utils/audit-status-summary';
+import { getScoreTier } from '../../utils/score-thresholds';
+import {
+	ALL_SEVERITIES,
+	countSeverities,
+	severityPluralLabel,
+	severityRemainingCountLabel,
+} from '../../utils/severity-counts';
+import CountSummaryCircle from '../count-summary-circle';
+import ScoreBar from '../score-bar';
+import ScoreCircle from '../score-circle';
+import SeverityIcon from '../severity-icons';
+
+type Props = {
+	onCategoryClick: ( category: AuditCategory ) => void;
+	onStatusClick: ( status: AuditStatusGroup ) => void;
+	report: PageAuditReport;
+};
+
+const STATUS_ARIA_LABELS: Record< AuditStatusGroup, ( count: number ) => string > = {
+	pass: ( count ) =>
+		sprintf(
+			/* translators: %d: number of passed audits. */
+			__( '%d passed audits, view all', 'elementor' ),
+			count
+		),
+	fail: ( count ) =>
+		sprintf(
+			/* translators: %d: number of failed audit violations. */
+			__( '%d failed audits, view all', 'elementor' ),
+			count
+		),
+	skipped: ( count ) =>
+		sprintf(
+			/* translators: %d: number of skipped audits. */
+			__( '%d skipped audits, view all', 'elementor' ),
+			count
+		),
+};
+
+const STATUS_GROUPS = [ 'fail', 'pass', 'skipped' ] as const;
+
+export default function OverviewPage( { onCategoryClick, onStatusClick, report }: Props ) {
+	const populatedCategories = getPopulatedCategories( report.categories, ALL_CATEGORIES );
+	const severityCounts = countSeverities( report );
+	const statusCounts = auditStatusDisplayCounts( report );
+	const overallScore = getScoreTier( report.overall );
+
+	return (
+		<Box sx={ { display: 'flex', flexDirection: 'column', gap: 4, p: 2 } }>
+			<Box sx={ { display: 'flex', alignItems: 'center', gap: 2 } }>
+				<ScoreCircle color={ overallScore.color } score={ report.overall } />
+				<Box sx={ { display: 'flex', flexDirection: 'column', gap: 0.5 } }>
+					<Chip
+						label={ overallScore.label }
+						color={ overallScore.color }
+						variant="standard"
+						size="small"
+						sx={ { fontWeight: 600, alignSelf: 'flex-start' } }
+					/>
+					<Typography variant="body2" color="text.secondary">
+						{ __( 'Overall score', 'elementor' ) }
+					</Typography>
+				</Box>
+			</Box>
+			<Box sx={ { display: 'flex', flexDirection: 'column', gap: 2 } }>
+				{ populatedCategories.map( ( category ) => (
+					<ScoreBar
+						key={ category }
+						label={ CATEGORY_LABELS[ category ] }
+						score={ report.categories[ category ].score }
+						onClick={ () => onCategoryClick( category ) }
+					/>
+				) ) }
+			</Box>
+			<Divider />
+			<Typography variant="subtitle1" fontWeight="bold">
+				{ __( 'Audit statuses', 'elementor' ) }
+			</Typography>
+			<Box sx={ { display: 'flex', justifyContent: 'space-around', gap: 2 } }>
+				{ STATUS_GROUPS.map( ( status ) => (
+					<CountSummaryCircle
+						key={ status }
+						ariaLabel={ STATUS_ARIA_LABELS[ status ]( statusCounts[ status ] ) }
+						color={ auditStatusColor( status ) }
+						count={ statusCounts[ status ] }
+						label={ auditStatusLabel( status ) }
+						onClick={ () => onStatusClick( status ) }
+					/>
+				) ) }
+			</Box>
+			<Divider />
+			<Typography variant="subtitle1" fontWeight="bold">
+				{ __( 'Remaining issues', 'elementor' ) }
+			</Typography>
+			<Box
+				component="ul"
+				sx={ {
+					display: 'flex',
+					flexDirection: 'column',
+					gap: 1,
+					listStyle: 'none',
+					m: 0,
+					p: 0,
+				} }
+			>
+				{ ALL_SEVERITIES.map( ( severity ) => {
+					const count = severityCounts[ severity ];
+
+					return (
+						<Box
+							aria-label={ severityRemainingCountLabel( severity, count ) }
+							component="li"
+							key={ severity }
+							sx={ { alignItems: 'center', display: 'flex', gap: 0.5 } }
+						>
+							<SeverityIcon severity={ severity } />
+							<Typography variant="body2" fontWeight="bold">
+								{ count }
+							</Typography>
+							<Typography variant="body2">{ severityPluralLabel( severity ) }</Typography>
+						</Box>
+					);
+				} ) }
+			</Box>
+		</Box>
+	);
+}

package/src/components/pages/welcome-page.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { Box, Typography } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+const INFORMATION_IMAGE_PATH = 'images/information.svg';
+
+type ElementorCommonWindow = Window & {
+	elementorCommon?: {
+		config?: {
+			urls?: {
+				assets?: string;
+			};
+		};
+	};
+};
+
+export default function WelcomePage() {
+	const assetsUrl = ( window as ElementorCommonWindow ).elementorCommon?.config?.urls?.assets ?? '';
+
+	return (
+		<Box
+			sx={ {
+				display: 'flex',
+				flexDirection: 'column',
+				alignItems: 'center',
+				justifyContent: 'center',
+				gap: 1,
+				p: 3,
+			} }
+		>
+			<img
+				className="elementor-nerd-box-icon"
+				src={ `${ assetsUrl }${ INFORMATION_IMAGE_PATH }` }
+				loading="lazy"
+				alt={ __( 'Elementor', 'elementor' ) }
+			/>
+			<Typography variant="subtitle1" component="h3" sx={ { marginBlockStart: 2 } }>
+				{ __( 'Audit your page!', 'elementor' ) }
+			</Typography>
+			<Typography variant="caption" textAlign="center">
+				{ __(
+					'Check SEO, accessibility, performance, and best practices. Click "Run page audit" to begin.',
+					'elementor'
+				) }
+			</Typography>
+		</Box>
+	);
+}

package/src/components/promotion-card.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { Box, Button, Typography } from '@elementor/ui';
+
+import { type PromotionIcon } from '../register-promotions';
+
+type Props = {
+	ctaDisabled: boolean;
+	ctaLabel: string;
+	icon: PromotionIcon;
+	onCtaClick: () => void;
+	subtitle: string;
+	title: string;
+};
+
+export default function PromotionCard( { ctaDisabled, ctaLabel, icon: Icon, onCtaClick, subtitle, title }: Props ) {
+	return (
+		<Box
+			sx={ {
+				alignItems: 'center',
+				border: 1,
+				borderColor: 'divider',
+				borderRadius: 1,
+				display: 'flex',
+				gap: 1,
+				px: 2,
+				py: 1.5,
+			} }
+		>
+			<Icon fontSize="small" color="action" />
+			<Box sx={ { display: 'flex', flex: 1, flexDirection: 'column', gap: 0.25, minWidth: 0 } }>
+				<Typography variant="body2" fontWeight="bold">
+					{ title }
+				</Typography>
+				<Typography variant="caption" color="text.secondary">
+					{ subtitle }
+				</Typography>
+			</Box>
+			<Button variant="outlined" color="secondary" size="small" disabled={ ctaDisabled } onClick={ onCtaClick }>
+				{ ctaLabel }
+			</Button>
+		</Box>
+	);
+}

package/src/components/promotions.tsx

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import { Box, Typography } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { PROMOTIONS } from '../register-promotions';
+import { type PageAuditReport } from '../types';
+import { findAuditRun } from '../utils/find-audit-run';
+import PromotionCard from './promotion-card';
+
+type Props = {
+	report: PageAuditReport;
+};
+
+export default function Promotions( { report }: Props ) {
+	const cards = PROMOTIONS.flatMap( ( config ) => {
+		const run = findAuditRun( report, config.auditId );
+
+		if ( ! run || run.result.status !== 'fail' ) {
+			return [];
+		}
+
+		const subtitle = config.formatSubtitle( run );
+
+		if ( ! subtitle ) {
+			return [];
+		}
+
+		const ctaUrl = config.getCtaUrl( run );
+
+		return [
+			{
+				config,
+				ctaUrl,
+				key: config.auditId,
+				run,
+				subtitle,
+			},
+		];
+	} );
+
+	if ( cards.length === 0 ) {
+		return null;
+	}
+
+	return (
+		<>
+			<Typography variant="subtitle1" fontWeight="bold">
+				{ __( 'Quick wins', 'elementor' ) }
+			</Typography>
+			<Box sx={ { display: 'flex', flexDirection: 'column', gap: 1 } }>
+				{ cards.map( ( { config, ctaUrl, key, run, subtitle } ) => (
+					<PromotionCard
+						key={ key }
+						icon={ config.icon }
+						title={ run.audit.title }
+						subtitle={ subtitle }
+						ctaLabel={ config.ctaLabel }
+						ctaDisabled={ ! ctaUrl }
+						onCtaClick={ () => {
+							if ( ctaUrl ) {
+								window.open( ctaUrl, '_blank' );
+							}
+						} }
+					/>
+				) ) }
+			</Box>
+		</>
+	);
+}