From 94cf94ff68ba3d5cf64e58a03a39af8d09f74419 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Mon, 24 Apr 2023 10:20:47 +0200
Subject: [PATCH] AppNotificationList: Improves position now that topnav is
 live (#66959)

* AppNotificationList: Improves position now that topnav is live

* update pos
---
 .../AppNotifications/AppNotificationItem.tsx  | 12 ++-
 .../AppNotifications/AppNotificationList.tsx  | 87 +++++++++----------
 public/sass/components/_alerts.scss           |  9 --
 3 files changed, 49 insertions(+), 59 deletions(-)

diff --git a/public/app/core/components/AppNotifications/AppNotificationItem.tsx b/public/app/core/components/AppNotifications/AppNotificationItem.tsx
index 3ec1a2b59a2..167b2546009 100644
--- a/public/app/core/components/AppNotifications/AppNotificationItem.tsx
+++ b/public/app/core/components/AppNotifications/AppNotificationItem.tsx
@@ -20,6 +20,8 @@ export default function AppNotificationItem({ appNotification, onClearNotificati
     }, timeoutMap[appNotification.severity]);
   });
 
+  const hasBody = appNotification.component || appNotification.text || appNotification.traceId;
+
   return (
     <Alert
       severity={appNotification.severity}
@@ -27,10 +29,12 @@ export default function AppNotificationItem({ appNotification, onClearNotificati
       onRemove={() => onClearNotification(appNotification.id)}
       elevated
     >
-      <div className={styles.wrapper}>
-        <span>{appNotification.component || appNotification.text}</span>
-        {appNotification.traceId && <span className={styles.trace}>Trace ID: {appNotification.traceId}</span>}
-      </div>
+      {hasBody && (
+        <div className={styles.wrapper}>
+          <span>{appNotification.component || appNotification.text}</span>
+          {appNotification.traceId && <span className={styles.trace}>Trace ID: {appNotification.traceId}</span>}
+        </div>
+      )}
     </Alert>
   );
 }
diff --git a/public/app/core/components/AppNotifications/AppNotificationList.tsx b/public/app/core/components/AppNotifications/AppNotificationList.tsx
index 82723c43cb6..b27736e2ee0 100644
--- a/public/app/core/components/AppNotifications/AppNotificationList.tsx
+++ b/public/app/core/components/AppNotifications/AppNotificationList.tsx
@@ -1,12 +1,12 @@
-import React, { PureComponent } from 'react';
-import { connect, ConnectedProps } from 'react-redux';
+import { css } from '@emotion/css';
+import React, { useEffect } from 'react';
 
-import { AppEvents } from '@grafana/data';
-import { VerticalGroup } from '@grafana/ui';
+import { AppEvents, GrafanaTheme2 } from '@grafana/data';
+import { useStyles2, VerticalGroup } from '@grafana/ui';
 import { notifyApp, hideAppNotification } from 'app/core/actions';
 import appEvents from 'app/core/app_events';
 import { selectVisible } from 'app/core/reducers/appNotification';
-import { StoreState } from 'app/types';
+import { useSelector, useDispatch } from 'app/types';
 
 import {
   createErrorNotification,
@@ -16,53 +16,48 @@ import {
 
 import AppNotificationItem from './AppNotificationItem';
 
-export interface OwnProps {}
-
-const mapStateToProps = (state: StoreState, props: OwnProps) => ({
-  appNotifications: selectVisible(state.appNotifications),
-});
-
-const mapDispatchToProps = {
-  notifyApp,
-  hideAppNotification,
-};
-
-const connector = connect(mapStateToProps, mapDispatchToProps);
-
-export type Props = OwnProps & ConnectedProps<typeof connector>;
-
-export class AppNotificationListUnConnected extends PureComponent<Props> {
-  componentDidMount() {
-    const { notifyApp } = this.props;
+export function AppNotificationList() {
+  const appNotifications = useSelector((state) => selectVisible(state.appNotifications));
+  const dispatch = useDispatch();
+  const styles = useStyles2(getStyles);
 
+  useEffect(() => {
     appEvents.on(AppEvents.alertWarning, (payload) => notifyApp(createWarningNotification(...payload)));
     appEvents.on(AppEvents.alertSuccess, (payload) => notifyApp(createSuccessNotification(...payload)));
     appEvents.on(AppEvents.alertError, (payload) => notifyApp(createErrorNotification(...payload)));
-  }
+  }, []);
 
-  onClearAppNotification = (id: string) => {
-    this.props.hideAppNotification(id);
+  const onClearAppNotification = (id: string) => {
+    dispatch(hideAppNotification(id));
   };
 
-  render() {
-    const { appNotifications } = this.props;
-
-    return (
-      <div className="page-alert-list">
-        <VerticalGroup>
-          {appNotifications.map((appNotification, index) => {
-            return (
-              <AppNotificationItem
-                key={`${appNotification.id}-${index}`}
-                appNotification={appNotification}
-                onClearNotification={(id) => this.onClearAppNotification(id)}
-              />
-            );
-          })}
-        </VerticalGroup>
-      </div>
-    );
-  }
+  return (
+    <div className={styles.wrapper}>
+      <VerticalGroup>
+        {appNotifications.map((appNotification, index) => {
+          return (
+            <AppNotificationItem
+              key={`${appNotification.id}-${index}`}
+              appNotification={appNotification}
+              onClearNotification={onClearAppNotification}
+            />
+          );
+        })}
+      </VerticalGroup>
+    </div>
+  );
 }
 
-export const AppNotificationList = connector(AppNotificationListUnConnected);
+function getStyles(theme: GrafanaTheme2) {
+  return {
+    wrapper: css({
+      label: 'app-notifications-list',
+      zIndex: theme.zIndex.portal,
+      minWidth: 400,
+      maxWidth: 600,
+      position: 'fixed',
+      right: 6,
+      top: 88,
+    }),
+  };
+}
diff --git a/public/sass/components/_alerts.scss b/public/sass/components/_alerts.scss
index d884c587e36..47d9894d079 100644
--- a/public/sass/components/_alerts.scss
+++ b/public/sass/components/_alerts.scss
@@ -37,15 +37,6 @@
   border-color: $alert-warning-bg;
 }
 
-.page-alert-list {
-  z-index: 8000;
-  min-width: 400px;
-  max-width: 600px;
-  position: fixed;
-  right: 10px;
-  top: 60px;
-}
-
 .alert-close {
   padding: 0 0 0 $space-md;
   border: none;