Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 | 22x 59x | import React from 'react';
/**
* Props for ErrorMessage component
*/
export interface ErrorMessageProps {
/**
* Error title
* @default 'Error'
*/
title?: string;
/**
* Error message to display
*/
message: string;
/**
* Optional retry callback function
*/
retry?: () => void;
/**
* Optional test ID for automated testing
*/
testId?: string;
/**
* Optional CSS class name
*/
className?: string;
}
/**
* Error message component for displaying errors to users
*
* ## Business Perspective
*
* Provides clear, actionable error messages to users when operations fail,
* maintaining trust and helping users understand what went wrong and how
* to proceed. Critical for operational excellence. ⚠️
*
* ## Technical Perspective
*
* Reusable error display component with consistent styling and optional
* retry functionality. Ensures errors are displayed in a user-friendly
* manner across all widgets.
*
* @example
* ```tsx
* // Simple error message
* <ErrorMessage message="Failed to load data" />
*
* // Error with custom title
* <ErrorMessage
* title="Connection Error"
* message="Unable to reach the server"
* />
*
* // Error with retry button
* <ErrorMessage
* message="Failed to load metrics"
* retry={() => refetchData()}
* />
* ```
*/
export const ErrorMessage: React.FC<ErrorMessageProps> = ({
title = 'Error',
message,
retry,
testId = 'error-message',
className = ''
}) => {
return (
<div
className={`p-4 border border-red-300 dark:border-red-700 bg-red-50 dark:bg-red-900 dark:bg-opacity-20 rounded-lg ${className}`}
data-testid={testId}
role="alert"
aria-live="polite"
>
<h3
className="text-red-800 dark:text-red-300 font-semibold text-lg mb-2 flex items-center"
data-testid={`${testId}-title`}
>
<span className="mr-2" aria-hidden="true">⚠️</span>
{title}
</h3>
<p
className="text-red-600 dark:text-red-400 mb-4"
data-testid={`${testId}-text`}
>
{message}
</p>
{retry && (
<button
onClick={retry}
className="px-4 py-2 bg-red-600 dark:bg-red-700 text-white rounded hover:bg-red-700 dark:hover:bg-red-600 transition-colors focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2"
data-testid={`${testId}-retry-button`}
aria-label="Try again"
>
Try Again
</button>
)}
</div>
);
};
export default ErrorMessage;
|