Notification history: Add checkboxes for multiple selection (#49392)

* Add checkboxes for selection

* className is optional...

* review comments

public/app/core/components/AppNotifications/StoredNotificationItem.tsx

@@ -1,46 +1,43 @@
-import { css } from '@emotion/css';
+import { css, cx } from '@emotion/css';
 import { formatDistanceToNow } from 'date-fns';
 import React, { ReactNode } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { config } from '@grafana/runtime';
-import { Icon, IconButton, IconName, useTheme2 } from '@grafana/ui';
+import { Icon, IconName, useTheme2 } from '@grafana/ui';
 import { getIconFromSeverity } from '@grafana/ui/src/components/Alert/Alert';
 
 export type AlertVariant = 'success' | 'warning' | 'error' | 'info';
 
 export interface Props {
+  className?: string;
   title: string;
   severity?: AlertVariant;
   timestamp?: number;
   traceId?: string;
   children?: ReactNode;
-  onRemove?: (event: React.MouseEvent) => void;
 }
 
 export const StoredNotificationItem = ({
+  className,
   title,
   severity = 'error',
   traceId,
   timestamp,
   children,
-  onRemove,
 }: Props) => {
   const theme = useTheme2();
   const styles = getStyles(theme, severity);
   const showTraceId = config.featureToggles.tracing && traceId;
 
   return (
-    <div className={styles.wrapper}>
+    <div className={cx(styles.wrapper, className)}>
       <div className={styles.icon}>
         <Icon size="xl" name={getIconFromSeverity(severity) as IconName} />
       </div>
       <div className={styles.title}>{title}</div>
       <div className={styles.body}>{children}</div>
       <span className={styles.trace}>{showTraceId && `Trace ID: ${traceId}`}</span>
-      <div className={styles.close}>
-        <IconButton aria-label="Close alert" name="times" onClick={onRemove} size="lg" type="button" />
-      </div>
       {timestamp && <span className={styles.timestamp}>{formatDistanceToNow(timestamp, { addSuffix: true })}</span>}
     </div>
   );
@@ -78,6 +75,7 @@ const getStyles = (theme: GrafanaTheme2, severity: AlertVariant) => {
       alignSelf: 'center',
       fontWeight: theme.typography.fontWeightMedium,
       color: theme.colors.text.primary,
+      paddingTop: theme.spacing(1),
     }),
     body: css({
       gridArea: 'body',
@@ -96,13 +94,6 @@ const getStyles = (theme: GrafanaTheme2, severity: AlertVariant) => {
       fontSize: theme.typography.pxToRem(10),
       color: theme.colors.text.secondary,
     }),
-    close: css({
-      gridArea: 'close',
-      display: 'flex',
-      justifySelf: 'end',
-      padding: theme.spacing(1, 0.5),
-      background: 'none',
-    }),
     timestamp: css({
       gridArea: 'timestamp',
       alignSelf: 'end',

public/app/features/notifications/StoredNotifications.tsx

@@ -1,9 +1,9 @@
 import { css, cx } from '@emotion/css';
-import React, { useRef } from 'react';
+import React, { useRef, useState } from 'react';
 import { useEffectOnce } from 'react-use';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { Button, Icon, useStyles2 } from '@grafana/ui';
+import { Button, Checkbox, Icon, useStyles2 } from '@grafana/ui';
 import { StoredNotificationItem } from 'app/core/components/AppNotifications/StoredNotificationItem';
 import {
   clearAllNotifications,
@@ -17,6 +17,7 @@ import { useDispatch, useSelector } from 'app/types';
 export function StoredNotifications() {
   const dispatch = useDispatch();
   const notifications = useSelector((state) => selectWarningsAndErrors(state.appNotifications));
+  const [selectedNotificationIds, setSelectedNotificationIds] = useState<string[]>([]);
   const lastReadTimestamp = useRef(useSelector((state) => selectLastReadTimestamp(state.appNotifications)));
   const styles = useStyles2(getStyles);
 
@@ -24,14 +25,27 @@ export function StoredNotifications() {
     dispatch(readAllNotifications(Date.now()));
   });
 
-  const onClearNotification = (id: string) => {
+  const clearSelectedNotifications = () => {
-    dispatch(clearNotification(id));
+    selectedNotificationIds.forEach((id) => {
+      dispatch(clearNotification(id));
+    });
+    setSelectedNotificationIds([]);
   };
 
   const clearAllNotifs = () => {
     dispatch(clearAllNotifications());
   };
 
+  const handleCheckboxToggle = (id: string, isChecked: boolean) => {
+    setSelectedNotificationIds((prevState) => {
+      if (isChecked && !prevState.includes(id)) {
+        return [...prevState, id];
+      } else {
+        return prevState.filter((notificationId) => notificationId !== id);
+      }
+    });
+  };
+
   if (notifications.length === 0) {
     return (
       <div className={styles.noNotifsWrapper}>
@@ -44,19 +58,28 @@ export function StoredNotifications() {
   return (
     <div className={styles.wrapper}>
       This page displays all past errors and warnings. Once dismissed, they cannot be retrieved.
-      <Button variant="destructive" onClick={clearAllNotifs} className={styles.clearAll}>
+      <div className={styles.topRow}>
-        Clear all notifications
+        <Button
-      </Button>
+          variant="destructive"
+          onClick={selectedNotificationIds.length === 0 ? clearAllNotifs : clearSelectedNotifications}
+          className={styles.clearAll}
+        >
+          {selectedNotificationIds.length === 0 ? 'Clear all notifications' : 'Clear selected notifications'}
+        </Button>
+      </div>
       <ul className={styles.list}>
         {notifications.map((notif) => (
-          <li
+          <li key={notif.id} className={styles.listItem}>
-            key={notif.id}
+            <Checkbox
-            className={cx(styles.listItem, { [styles.newItem]: notif.timestamp > lastReadTimestamp.current })}
+              value={selectedNotificationIds.includes(notif.id)}
-          >
+              onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+                handleCheckboxToggle(notif.id, event.target.checked)
+              }
+            />
             <StoredNotificationItem
+              className={cx(styles.notification, { [styles.newItem]: notif.timestamp > lastReadTimestamp.current })}
               severity={notif.severity}
               title={notif.title}
-              onRemove={() => onClearNotification(notif.id)}
               timestamp={notif.timestamp}
               traceId={notif.traceId}
             >
@@ -71,6 +94,11 @@ export function StoredNotifications() {
 
 function getStyles(theme: GrafanaTheme2) {
   return {
+    topRow: css({
+      alignItems: 'center',
+      display: 'flex',
+      justifyContent: 'flex-end',
+    }),
     smallText: css({
       fontSize: theme.typography.pxToRem(10),
       color: theme.colors.text.secondary,
@@ -90,9 +118,10 @@ function getStyles(theme: GrafanaTheme2) {
       gap: theme.spacing(1),
     }),
     listItem: css({
-      listStyle: 'none',
-      gap: theme.spacing(1),
       alignItems: 'center',
+      display: 'flex',
+      gap: theme.spacing(2),
+      listStyle: 'none',
       position: 'relative',
     }),
     newItem: css({
@@ -113,6 +142,10 @@ function getStyles(theme: GrafanaTheme2) {
       alignItems: 'center',
       gap: theme.spacing(1),
     }),
+    notification: css({
+      flex: 1,
+      position: 'relative',
+    }),
     wrapper: css({
       display: 'flex',
       flexDirection: 'column',