@elementor/editor-audits 4.4.0-1114 → 4.4.0-1116

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-audits",
-  "version": "4.4.0-1114",
+  "version": "4.4.0-1116",
   "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-1114",
-    "@elementor/editor-mcp": "4.4.0-1114",
-    "@elementor/editor-app-bar": "4.4.0-1114",
-    "@elementor/editor-elements": "4.4.0-1114",
-    "@elementor/editor-floating-panels": "4.4.0-1114",
-    "@elementor/editor-notifications": "4.4.0-1114",
-    "@elementor/editor-props": "4.4.0-1114",
-    "@elementor/editor-styles": "4.4.0-1114",
-    "@elementor/editor-v1-adapters": "4.4.0-1114",
-    "@elementor/events": "4.4.0-1114",
-    "@elementor/http-client": "4.4.0-1114",
+    "@elementor/editor": "4.4.0-1116",
+    "@elementor/editor-mcp": "4.4.0-1116",
+    "@elementor/editor-app-bar": "4.4.0-1116",
+    "@elementor/editor-elements": "4.4.0-1116",
+    "@elementor/editor-floating-panels": "4.4.0-1116",
+    "@elementor/editor-notifications": "4.4.0-1116",
+    "@elementor/editor-props": "4.4.0-1116",
+    "@elementor/editor-styles": "4.4.0-1116",
+    "@elementor/editor-v1-adapters": "4.4.0-1116",
+    "@elementor/events": "4.4.0-1116",
+    "@elementor/http-client": "4.4.0-1116",
     "@elementor/icons": "~1.77.0",
-    "@elementor/locations": "4.4.0-1114",
-    "@elementor/session": "4.4.0-1114",
-    "@elementor/store": "4.4.0-1114",
+    "@elementor/locations": "4.4.0-1116",
+    "@elementor/session": "4.4.0-1116",
+    "@elementor/store": "4.4.0-1116",
     "@elementor/ui": "1.37.5"
   },
   "peerDependencies": {

package/src/components/audit-panel.tsx

@@ -1,6 +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 { __ } from '@wordpress/i18n';
 
@@ -51,10 +52,11 @@ export default function AuditPanel() {
 				<Button
 					variant="contained"
 					size="small"
+					startIcon={ lastScanLabel ? <ReloadIcon fontSize="small" /> : undefined }
 					onClick={ onRun }
 					disabled={ status === 'loading' || hostDocumentId === 0 }
 				>
-					{ lastScanLabel ? __( 'Re-scan', 'elementor' ) : __( 'Run page audit', 'elementor' ) }
+					{ lastScanLabel ? __( 'Rescan', 'elementor' ) : __( 'Run page audit', 'elementor' ) }
 				</Button>
 			</FloatingPanelFooter>
 		</>

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

@@ -1,14 +1,14 @@
 import * as React from 'react';
-import { Box, Chip, Typography } from '@elementor/ui';
+import { Box, 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 { getScoreTier } from '../../utils/score-thresholds';
+import { countSeverities } from '../../utils/severity-counts';
+import IssuesCategoryRow from '../issues-category-row';
 import Promotions from '../promotions';
-import ScoreBar from '../score-bar';
-import ScoreCircle from '../score-circle';
+import SeveritySummaryCards from '../severity-summary-cards';
 
 type Props = {
 	onCategoryClick: ( category: AuditCategory ) => void;
@@ -17,35 +17,30 @@ type Props = {
 
 export default function OverviewPage( { onCategoryClick, report }: Props ) {
 	const populatedCategories = getPopulatedCategories( report.categories, ALL_CATEGORIES );
-	const overallScore = getScoreTier( report.overall );
+
+	const categoryRows = populatedCategories
+		.map( ( category ) => ( { category, counts: countSeverities( report, category ) } ) )
+		.filter( ( { counts } ) => Object.values( counts ).some( ( count ) => count > 0 ) );
 
 	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 display="flex" flexDirection="column" gap={ 3 } p={ 2 }>
+			<SeveritySummaryCards report={ report } />
+			<Box display="flex" flexDirection="column" gap={ 1 }>
+				<Typography variant="subtitle1" component="h2">
+					{ __( 'All issues', 'elementor' ) }
+				</Typography>
+				<Box display="flex" flexDirection="column" gap={ 1 }>
+					{ categoryRows.map( ( { category, counts } ) => (
+						<IssuesCategoryRow
+							key={ category }
+							category={ category }
+							label={ CATEGORY_LABELS[ category ] }
+							counts={ counts }
+							onClick={ () => onCategoryClick( category ) }
+						/>
+					) ) }
 				</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>
 			<Promotions report={ report } />
 		</Box>
 	);

package/src/components/report-shell.tsx

@@ -1,114 +1,33 @@
 import * as React from 'react';
 import { useState } from 'react';
-import { Box, Divider, Tab, Tabs } from '@elementor/ui';
-import { __ } from '@wordpress/i18n';
+import { Box } from '@elementor/ui';
 
 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 ActivePage = 'overview' | { category: AuditCategory };
 
 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 } {
+function isCategoryPage( page: ActivePage ): page is { 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 );
-		}
-	};
+	const openCategory = ( category: AuditCategory ) => setActivePage( { category } );
+	const backToOverview = () => setActivePage( 'overview' );
 
 	return (
-		<Box sx={ { display: 'flex', flexDirection: 'column', flex: 1, minHeight: 0 } }>
-			<Box sx={ { flexShrink: 0 } }>
-				<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 />
-			</Box>
-			<Box sx={ { flex: 1, minHeight: 0, overflowY: 'auto' } }>
-				{ activePage === 'overview' && (
-					<OverviewPage
-						report={ report }
-						onCategoryClick={ ( category ) => openCategory( category, 'overview' ) }
-					/>
-				) }
-				{ activePage === 'issues' && (
-					<IssuesPage
-						report={ report }
-						onCategoryClick={ ( category ) => openCategory( category, 'issues' ) }
-						onAllAuditsClick={ () => openAllAudits() }
-						onStatusClick={ ( status ) => openAllAudits( status ) }
-					/>
-				) }
-				{ isAllAuditsPage( activePage ) && (
-					<AllAuditsPage
-						report={ report }
-						initialExpandedStatus={ activePage.expand }
-						onBack={ backFromSubPage }
-					/>
-				) }
-				{ isCategoryPage( activePage ) && (
-					<CategoryPage category={ activePage.category } report={ report } onBack={ backFromSubPage } />
-				) }
-			</Box>
+		<Box sx={ { flex: 1, minHeight: 0, overflowY: 'auto' } }>
+			{ activePage === 'overview' && <OverviewPage report={ report } onCategoryClick={ openCategory } /> }
+			{ isCategoryPage( activePage ) && (
+				<CategoryPage category={ activePage.category } report={ report } onBack={ backToOverview } />
+			) }
 		</Box>
 	);
 }

package/src/components/severity-summary-cards.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { Box, Typography } from '@elementor/ui';
+
+import { type AuditSeverity, type PageAuditReport } from '../types';
+import { ALL_SEVERITIES, countSeverities, severityPluralLabel } from '../utils/severity-counts';
+import SeverityIcon from './severity-icons';
+
+type Props = {
+	report: PageAuditReport;
+};
+
+export default function SeveritySummaryCards( { report }: Props ) {
+	const counts = countSeverities( report );
+
+	return (
+		<Box display="flex" gap={ 1.5 }>
+			{ ALL_SEVERITIES.map( ( severity ) => (
+				<SeverityCard key={ severity } severity={ severity } count={ counts[ severity ] } />
+			) ) }
+		</Box>
+	);
+}
+
+type SeverityCardProps = {
+	severity: AuditSeverity;
+	count: number;
+};
+
+function SeverityCard( { severity, count }: SeverityCardProps ) {
+	return (
+		<Box
+			display="flex"
+			flex={ 1 }
+			flexDirection="column"
+			gap={ 1 }
+			bgcolor="grey.50"
+			borderRadius={ 1.5 }
+			px={ 1.5 }
+			py={ 1 }
+		>
+			<SeverityIcon severity={ severity } />
+			<Box display="flex" flexDirection="column">
+				<Typography variant="h5" fontWeight={ 700 } component="span">
+					{ count }
+				</Typography>
+				<Typography variant="caption" color="text.secondary">
+					{ severityPluralLabel( severity ) }
+				</Typography>
+			</Box>
+		</Box>
+	);
+}

package/src/components/violation-row.tsx

@@ -59,7 +59,7 @@ function GuidanceAction( { violation }: { violation: AuditViolation } ) {
 	}
 
 	return (
-		<Box sx={ { display: 'flex', alignItems: 'center', gap: 1 } }>
+		<Box display="flex" alignItems="center" gap={ 1 } mt={ 1 }>
 			<ViolationCtaButton
 				ctaLabel={ violation.ctaLabel as string }
 				externalUrl={ violation.externalUrl as string }
@@ -122,7 +122,7 @@ export default function ViolationRow( { audit, expanded, onToggleExpand, skipRea
 				</IconButton>
 			</Box>
 			<Collapse in={ expanded }>
-				<Box sx={ { display: 'flex', flexDirection: 'column', gap: 1, paddingBlock: 1 } }>
+				<Box paddingBlock={ 1 }>
 					<Tooltip title={ audit.fixHint } placement="top">
 						<Alert
 							severity="secondary"
@@ -136,9 +136,9 @@ export default function ViolationRow( { audit, expanded, onToggleExpand, skipRea
 							<Typography variant="caption" component="p" color="text.secondary">
 								{ audit.description }
 							</Typography>
+							{ primaryViolation && <GuidanceAction violation={ primaryViolation } /> }
 						</Alert>
 					</Tooltip>
-					{ primaryViolation && <GuidanceAction violation={ primaryViolation } /> }
 				</Box>
 				{ violations && violations.length > 0 && (
 					<Box role="list" sx={ { paddingBlockEnd: 1 } }>

package/src/utils/audit-status-summary.ts

@@ -1,12 +1,7 @@
-import { type ChipProps } from '@elementor/ui';
-import { __ } from '@wordpress/i18n';
-
 import { type AuditCategory, type AuditResult, type AuditRun, type PageAuditReport } from '../types';
 import { isScoredAudit } from './is-scored-audit';
 import { sortFailedAuditResults } from './sort-failed-audits';
 
-export type AuditStatusGroup = 'fail' | 'pass' | 'skipped';
-
 export type PartitionedAuditResults = {
 	failed: Array< AuditRun & { result: Extract< AuditResult, { status: 'fail' } > } >;
 	passed: Array< AuditRun & { result: Extract< AuditResult, { status: 'pass' } > } >;
@@ -61,58 +56,6 @@ export function partitionAuditResults(
 	};
 }
 
-export function auditStatusDisplayCounts( report: PageAuditReport ): Record< AuditStatusGroup, number > {
-	let pass = 0;
-	let skipped = 0;
-	let totalViolations = 0;
-
-	for ( const { audit, result } of report.auditResults ) {
-		if ( ! isScoredAudit( audit ) ) {
-			continue;
-		}
-
-		switch ( result.status ) {
-			case 'fail':
-				totalViolations += result.violations.length;
-				break;
-			case 'pass':
-				pass++;
-				break;
-			case 'skipped':
-				skipped++;
-				break;
-		}
-	}
-
-	return {
-		fail: totalViolations,
-		pass,
-		skipped,
-	};
-}
-
-export function auditStatusColor( status: AuditStatusGroup ): ChipProps[ 'color' ] {
-	switch ( status ) {
-		case 'fail':
-			return 'error';
-		case 'pass':
-			return 'success';
-		case 'skipped':
-			return 'default';
-	}
-}
-
-export function auditStatusLabel( status: AuditStatusGroup ): string {
-	switch ( status ) {
-		case 'fail':
-			return __( 'Failed audits', 'elementor' );
-		case 'pass':
-			return __( 'Passed audits', 'elementor' );
-		case 'skipped':
-			return __( 'Skipped audits', 'elementor' );
-	}
-}
-
 export function getPopulatedCategories(
 	categoryTotals: PageAuditReport[ 'categories' ],
 	categories: readonly AuditCategory[]

package/src/components/audit-statuses-section.tsx

@@ -1,65 +0,0 @@
-import * as React from 'react';
-import { Box, Divider, Typography } from '@elementor/ui';
-import { __, sprintf } from '@wordpress/i18n';
-
-import { type PageAuditReport } from '../types';
-import {
-	auditStatusColor,
-	auditStatusDisplayCounts,
-	type AuditStatusGroup,
-	auditStatusLabel,
-} from '../utils/audit-status-summary';
-import CountSummaryCircle from './count-summary-circle';
-
-type Props = {
-	report: PageAuditReport;
-	onStatusClick: ( status: AuditStatusGroup ) => void;
-};
-
-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 AuditStatusesSection( { report, onStatusClick }: Props ) {
-	const statusCounts = auditStatusDisplayCounts( report );
-
-	return (
-		<>
-			<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 />
-		</>
-	);
-}

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

@@ -1,66 +0,0 @@
-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/pages/all-audits-page.tsx

@@ -1,84 +0,0 @@
-import * as React from 'react';
-import { Box } from '@elementor/ui';
-import { __ } from '@wordpress/i18n';
-
-import { useSingleExpandedCard } from '../../hooks/use-single-expanded-card';
-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';
-	const { expandedId, toggle } = useSingleExpandedCard();
-
-	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 }
-							expanded={ expandedId === r.audit.id }
-							onToggleExpand={ () => toggle( r.audit.id ) }
-						/>
-					) ) }
-				</StatusSection>
-				<StatusSection
-					label={ auditStatusLabel( 'pass' ) }
-					count={ passed.length }
-					color={ auditStatusColor( 'pass' ) }
-					defaultExpanded={ expandPass }
-				>
-					{ passed.map( ( r ) => (
-						<ViolationRow
-							key={ r.audit.id }
-							audit={ r.audit }
-							expanded={ expandedId === r.audit.id }
-							onToggleExpand={ () => toggle( r.audit.id ) }
-						/>
-					) ) }
-				</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 }
-							expanded={ expandedId === r.audit.id }
-							onToggleExpand={ () => toggle( r.audit.id ) }
-						/>
-					) ) }
-				</StatusSection>
-			</Box>
-		</Box>
-	);
-}