import ChevronDownIcon from '@elementor/icons/ChevronDownIcon'; import ChevronUpIcon from '@elementor/icons/ChevronUpIcon'; import HistoryIcon from '@elementor/icons/HistoryIcon'; import Box from '@elementor/ui/Box'; import LinearProgress from '@elementor/ui/LinearProgress'; import Table from '@elementor/ui/Table'; import TableBody from '@elementor/ui/TableBody'; import TableCell from '@elementor/ui/TableCell'; import TableContainer from '@elementor/ui/TableContainer'; import TableFooter from '@elementor/ui/TableFooter'; import TableHead from '@elementor/ui/TableHead'; import TableRow from '@elementor/ui/TableRow'; import Tooltip from '@elementor/ui/Tooltip'; import Typography from '@elementor/ui/Typography'; import { styled } from '@elementor/ui/styles'; import PropTypes from 'prop-types'; import Button from '@ea11y/components/button'; import VisuallyHidden from '@ea11y/components/visually-hidden'; import TableLoader from '@ea11y/pages/assistant/loaders/table-loader'; import AccessibilityAssistantResultsTableCTA from '@ea11y/pages/assistant/results/cta'; import { DropdownMenu } from '@ea11y/pages/assistant/results/dropdown-menu'; import AccessibilityAssistantResultsPagination from '@ea11y/pages/assistant/results/pagination'; import AccessibilityAssistantResultsTableProgressChip from '@ea11y/pages/assistant/results/progress-chip'; import AccessibilityAssistantTooltip from '@ea11y/pages/assistant/tooltip'; import { mixpanelEvents, mixpanelService } from '@ea11y-apps/global/services'; import { dateI18n } from '@wordpress/date'; import { forwardRef, Fragment, useState } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; const AccessibilityAssistantResultsTable = ({ scannerResults, loading }) => { const [openRows, setOpenRows] = useState({}); const handleToggleRow = (index) => { const willBeOpen = !openRows[index]; setOpenRows((prev) => ({ ...prev, [index]: willBeOpen, })); mixpanelService.sendEvent( mixpanelEvents.assistantDashboardHistoryLogsButtonClicked, { state: willBeOpen ? 'open' : 'closed', }, ); }; const formatDate = (dateString) => { const date = new Date(dateString); return dateI18n(__('d.m.Y, H:i', 'pojo-accessibility'), date, undefined); }; if (loading) { return ( ); } return ( {__('Page', 'pojo-accessibility')} {__('URL', 'pojo-accessibility')} {__('Last scan', 'pojo-accessibility')} {__('Issues resolved', 'pojo-accessibility')} {__('Actions', 'pojo-accessibility')} {scannerResults.map((result, index) => { const resolvedPercentage = result.issues_total ? Math.round((result.issues_fixed / result.issues_total) * 100) : 0; return ( {result.page_title} {result.page_url} {formatDate(result.last_scan)} {result.issues_fixed}/{result.issues_total} } endIcon={ openRows[index] ? ( ) : ( ) } aria-label={__( 'View scan history', 'pojo-accessibility', )} disabled={!result.scans.length} onClick={() => handleToggleRow(index)} /> {openRows[index] && result.scans.map((scan, scanIndex) => { const resolvedScanPercentage = scan.issues_total ? Math.round( (scan.issues_fixed / scan.issues_total) * 100, ) : 0; return ( {formatDate(scan.date)} {scan.issues_fixed}/{scan.issues_total} ); })} ); })} {scannerResults.length > 0 && ( )}
); }; AccessibilityAssistantResultsTable.propTypes = { scannerResults: PropTypes.array.isRequired, loading: PropTypes.bool.isRequired, }; const StyledTableContainer = styled(TableContainer)` margin-top: ${({ theme }) => theme.spacing(3)}; padding: ${({ theme }) => theme.spacing(2)}; border: 1px solid ${({ theme }) => theme.palette.divider}; border-radius: ${({ theme }) => theme.shape.borderRadius}px; `; const StyledProgressContainer = styled(Box)` display: flex; align-items: center; gap: ${({ theme }) => theme.spacing(1)}; `; const StyledControlsContainer = styled(Box)` display: flex; align-items: center; justify-content: flex-end; gap: ${({ theme }) => theme.spacing(2)}; `; const ForwardedButton = forwardRef((props, ref) => (