@elementor/editor-audits 4.4.0-1101 → 4.4.0-1102

package/package.json

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

package/src/components/audit-panel.tsx

@@ -26,7 +26,13 @@ export default function AuditPanel() {
 				badge={ __( 'Beta', 'elementor' ) }
 				titleVariant="subtitle2"
 			/>
-			<FloatingPanelBody>
+			<FloatingPanelBody
+				sx={
+					status === 'ready'
+						? { display: 'flex', flexDirection: 'column', overflow: 'hidden', minHeight: 0 }
+						: undefined
+				}
+			>
 				{ status === 'idle' && <WelcomePage /> }
 				{ status === 'loading' && <LoadingPage /> }
 				{ status === 'error' && <ErrorPage message={ error ?? '' } onRetry={ onRun } /> }

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

@@ -0,0 +1,65 @@
+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/category-icons.ts

@@ -1,17 +1,11 @@
-import {
-	ElementorAccessibilityIcon,
-	FilterIcon,
-	HeartHandShakeIcon,
-	Settings2Icon,
-	ShieldHalfFilledIcon,
-} from '@elementor/icons';
+import { BoltIcon, ElementorAccessibilityIcon, FileSearchIcon, Settings2Icon, ShieldCheckIcon } from '@elementor/icons';
 
 import type { AuditCategory } from '../types';
 
 export const CATEGORY_ICONS: Record< AuditCategory, typeof Settings2Icon > = {
 	'best-practices': Settings2Icon,
-	seo: FilterIcon,
+	seo: FileSearchIcon,
 	accessibility: ElementorAccessibilityIcon,
-	performance: ShieldHalfFilledIcon,
-	compliance: HeartHandShakeIcon,
+	performance: BoltIcon,
+	compliance: ShieldCheckIcon,
 };

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

@@ -1,25 +1,42 @@
 import * as React from 'react';
+import { useState } 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 { type AuditStatusGroup, getPopulatedCategories } from '../../utils/audit-status-summary';
+import { countSeverities, type SeverityCounts } from '../../utils/severity-counts';
+import AuditStatusesSection from '../audit-statuses-section';
 import IssuesCategoryRow from '../issues-category-row';
-import Promotions from '../promotions';
+import SeverityFilterChips, { type SeverityFilter } from '../severity-filter-chips';
 
 type Props = {
 	report: PageAuditReport;
 	onCategoryClick: ( category: AuditCategory ) => void;
 	onAllAuditsClick: () => void;
+	onStatusClick: ( status: AuditStatusGroup ) => void;
 };
 
-export default function IssuesPage( { report, onCategoryClick, onAllAuditsClick }: Props ) {
+function filterCounts( counts: SeverityCounts, filter: SeverityFilter ): SeverityCounts {
+	if ( filter === 'all' ) {
+		return counts;
+	}
+
+	return { error: 0, warning: 0, info: 0, [ filter ]: counts[ filter ] };
+}
+
+export default function IssuesPage( { report, onCategoryClick, onAllAuditsClick, onStatusClick }: Props ) {
+	const [ filter, setFilter ] = useState< SeverityFilter >( 'all' );
 	const populatedCategories = getPopulatedCategories( report.categories, ALL_CATEGORIES );
 
+	const categoryRows = populatedCategories
+		.map( ( category ) => ( { category, counts: filterCounts( countSeverities( report, category ), filter ) } ) )
+		.filter( ( { counts } ) => Object.values( counts ).some( ( count ) => count > 0 ) );
+
 	return (
 		<Box sx={ { display: 'flex', flexDirection: 'column', gap: 4, p: 2 } }>
+			<AuditStatusesSection report={ report } onStatusClick={ onStatusClick } />
 			<Link
 				component="button"
 				underline="none"
@@ -31,18 +48,18 @@ export default function IssuesPage( { report, onCategoryClick, onAllAuditsClick
 					{ __( 'All issues', 'elementor' ) }
 				</Typography>
 			</Link>
+			<SeverityFilterChips selected={ filter } onChange={ setFilter } />
 			<Box sx={ { display: 'flex', flexDirection: 'column', gap: 1 } }>
-				{ populatedCategories.map( ( category ) => (
+				{ categoryRows.map( ( { category, counts } ) => (
 					<IssuesCategoryRow
 						key={ category }
 						category={ category }
 						label={ CATEGORY_LABELS[ category ] }
-						counts={ countSeverities( report, category ) }
+						counts={ counts }
 						onClick={ () => onCategoryClick( category ) }
 					/>
 				) ) }
 			</Box>
-			<Promotions report={ report } />
 		</Box>
 	);
 }

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

@@ -1,61 +1,22 @@
 import * as React from 'react';
-import { Box, Chip, Divider, Typography } from '@elementor/ui';
-import { __, sprintf } from '@wordpress/i18n';
+import { Box, Chip, Typography } from '@elementor/ui';
+import { __ } 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 { 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 Promotions from '../promotions';
 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 ) {
+export default function OverviewPage( { onCategoryClick, report }: Props ) {
 	const populatedCategories = getPopulatedCategories( report.categories, ALL_CATEGORIES );
-	const severityCounts = countSeverities( report );
-	const statusCounts = auditStatusDisplayCounts( report );
 	const overallScore = getScoreTier( report.overall );
 
 	return (
@@ -85,56 +46,7 @@ export default function OverviewPage( { onCategoryClick, onStatusClick, report }
 					/>
 				) ) }
 			</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>
+			<Promotions report={ report } />
 		</Box>
 	);
 }

package/src/components/promotions.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Box, Typography } from '@elementor/ui';
+import { Box, Divider, Typography } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { PROMOTIONS } from '../register-promotions';
@@ -44,8 +44,9 @@ export default function Promotions( { report }: Props ) {
 
 	return (
 		<>
+			<Divider />
 			<Typography variant="subtitle1" fontWeight="bold">
-				{ __( 'Quick wins', 'elementor' ) }
+				{ __( 'Quick actions', 'elementor' ) }
 			</Typography>
 			<Box sx={ { display: 'flex', flexDirection: 'column', gap: 1 } }>
 				{ cards.map( ( { config, ctaUrl, key, run, subtitle } ) => (

package/src/components/report-shell.tsx

@@ -66,45 +66,49 @@ export default function ReportShell( { report }: Props ) {
 	};
 
 	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 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>
 	);
 }

package/src/components/severity-filter-chips.tsx

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import { Box, Chip } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { type AuditSeverity } from '../types';
+import { ALL_SEVERITIES, severityPluralLabel } from '../utils/severity-counts';
+import SeverityIcon from './severity-icons';
+
+export type SeverityFilter = 'all' | AuditSeverity;
+
+type Props = {
+	selected: SeverityFilter;
+	onChange: ( filter: SeverityFilter ) => void;
+};
+
+export default function SeverityFilterChips( { selected, onChange }: Props ) {
+	return (
+		<Box sx={ { display: 'flex', alignItems: 'center', gap: 1 } }>
+			<FilterChip
+				label={ __( 'All', 'elementor' ) }
+				isSelected={ selected === 'all' }
+				onClick={ () => onChange( 'all' ) }
+			/>
+			{ ALL_SEVERITIES.map( ( severity ) => (
+				<FilterChip
+					key={ severity }
+					label={ severityPluralLabel( severity ) }
+					icon={ <SeverityIcon severity={ severity } /> }
+					isSelected={ selected === severity }
+					onClick={ () => onChange( severity ) }
+				/>
+			) ) }
+		</Box>
+	);
+}
+
+type FilterChipProps = {
+	label: string;
+	icon?: React.ReactElement;
+	isSelected: boolean;
+	onClick: () => void;
+};
+
+function FilterChip( { label, icon, isSelected, onClick }: FilterChipProps ) {
+	return (
+		<Chip
+			label={ label }
+			icon={ icon }
+			size="small"
+			variant="filled"
+			color="default"
+			onClick={ onClick }
+			aria-pressed={ isSelected }
+			sx={ { bgcolor: isSelected ? 'action.selected' : 'transparent' } }
+		/>
+	);
+}

package/src/components/severity-icons.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { AlertCircleIcon, AlertTriangleFilledIcon, InfoCircleIcon } from '@elementor/icons';
+import { AlertCircleIcon, AlertTriangleFilledIcon, BulbIcon } from '@elementor/icons';
 
 import { type AuditSeverity } from '../types';
 
@@ -13,7 +13,7 @@ type SeverityConfig = {
 const SEVERITY_CONFIG: Record< AuditSeverity, SeverityConfig > = {
 	error: { Icon: AlertTriangleFilledIcon, color: 'error' },
 	warning: { Icon: AlertCircleIcon, color: 'warning' },
-	info: { Icon: InfoCircleIcon, color: 'info' },
+	info: { Icon: BulbIcon, color: 'info' },
 };
 
 type Props = {

package/src/constants.ts

@@ -31,5 +31,5 @@ export const CATEGORY_LABELS: Record< AuditCategory, string > = {
 	seo: __( 'SEO', 'elementor' ),
 	accessibility: __( 'Accessibility', 'elementor' ),
 	performance: __( 'Performance', 'elementor' ),
-	compliance: __( 'Compliance', 'elementor' ),
+	compliance: __( 'Site compliance', 'elementor' ),
 };

package/src/utils/severity-counts.ts

@@ -1,4 +1,4 @@
-import { __, sprintf } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 
 import { type AuditCategory, type AuditSeverity, type PageAuditReport } from '../types';
 import { isScoredAudit } from './is-scored-audit';
@@ -36,29 +36,6 @@ export function severityPluralLabel( severity: AuditSeverity ): string {
 		case 'warning':
 			return __( 'Warnings', 'elementor' );
 		case 'info':
-			return __( 'Info', 'elementor' );
-	}
-}
-
-export function severityRemainingCountLabel( severity: AuditSeverity, count: number ): string {
-	switch ( severity ) {
-		case 'error':
-			return sprintf(
-				/* translators: %d: number of remaining error violations. */
-				__( '%d errors', 'elementor' ),
-				count
-			);
-		case 'warning':
-			return sprintf(
-				/* translators: %d: number of remaining warning violations. */
-				__( '%d warnings', 'elementor' ),
-				count
-			);
-		case 'info':
-			return sprintf(
-				/* translators: %d: number of remaining info violations. */
-				__( '%d info', 'elementor' ),
-				count
-			);
+			return __( 'Suggestions', 'elementor' );
 	}
 }