Prevent expanding/collapsing a notification when clicking the action …

…button (#48074)

* Prevent expanding/collapsing a notification when clicking the action button

* Add a test

web/packages/design/src/Alert/Alert.tsx

@@ -134,7 +134,7 @@ interface Props<K> {
 export interface Action {
   content: React.ReactNode;
   href?: string;
-  onClick?: () => void;
+  onClick?: (event: React.MouseEvent) => void;
 }
 
 export interface AlertProps

web/packages/shared/components/Notification/Notification.test.tsx

@@ -0,0 +1,49 @@
+/**
+ * Teleport
+ * Copyright (C) 2024 Gravitational, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { render } from 'design/utils/testing';
+import { fireEvent, screen } from '@testing-library/react';
+
+import { Notification } from './Notification';
+
+test('click on action button does not expand or collapse notification', async () => {
+  const description = 'An error happened';
+
+  render(
+    <Notification
+      item={{
+        id: '865801ca',
+        severity: 'error',
+        content: {
+          title: 'Warning',
+          description,
+          action: { content: 'Retry' },
+        },
+      }}
+      onRemove={() => {}}
+    />
+  );
+
+  fireEvent.click(screen.getByText('Retry'));
+
+  // Check if the text still has the initial, "collapsed" style (look at shortTextCss).
+  expect(screen.getByText(description)).toHaveStyleRule(
+    '-webkit-line-clamp',
+    '3'
+  );
+});

web/packages/shared/components/Notification/Notification.tsx

@@ -227,6 +227,8 @@ const NotificationBody = ({
   const longerTextCss = isExpanded ? textCss : shortTextCss;
   const hasListOrDescription = !!content.list || !!content.description;
 
+  const { action } = content;
+
   return (
     <>
       {/* Note: an empty <Text/> element would still generate a flex gap, so we
@@ -237,9 +239,20 @@ const NotificationBody = ({
           {content.description}
         </Text>
       )}
-      {content.action && (
+      {action && (
         <Box alignSelf="flex-start">
-          <ActionButton intent="neutral" action={content.action} />
+          <ActionButton
+            intent="neutral"
+            action={{
+              href: action.href,
+              content: action.content,
+              onClick: event => {
+                // Prevents toggling the isExpanded flag.
+                event.stopPropagation();
+                action.onClick?.(event);
+              },
+            }}
+          />
         </Box>
       )}
     </>