UI/Card: Fix handling of 'onClick' callback (#31225)

packages/grafana-ui/src/components/Card/Card.test.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { Card } from './Card';
+
+describe('Card', () => {
+  it('should execute callback when clicked', () => {
+    const callback = jest.fn();
+    render(<Card heading="Test Heading" onClick={callback} />);
+    fireEvent.click(screen.getByText('Test Heading'));
+    expect(callback).toBeCalledTimes(1);
+  });
+});

packages/grafana-ui/src/components/Card/Card.tsx

@@ -101,7 +101,7 @@ export const Card: CardInterface = ({
   const disableEvents = disabled && !actions;
 
   const containerStyles = getContainerStyles(theme, disableEvents, disableHover);
-  const onCardClick = useCallback(() => (disableHover ? () => {} : onClick), [disableHover, onClick]);
+  const onCardClick = useCallback(() => (disableHover ? () => {} : onClick?.()), [disableHover, onClick]);
 
   return (
     <CardContainer