App events: Add "info" variant (#89903)

* App events: Add info notification type

* Add info hook

* Revert state

* Use info alert

packages/grafana-data/src/types/legacyEvents.ts

@@ -13,6 +13,7 @@ export const AppEvents = {
   alertSuccess: eventFactory<AlertPayload>('alert-success'),
   alertWarning: eventFactory<AlertPayload>('alert-warning'),
   alertError: eventFactory<AlertErrorPayload>('alert-error'),
+  alertInfo: eventFactory<AlertPayload>('alert-info'),
 };
 
 export const PanelEvents = {

public/app/core/components/AppChrome/AppChromeService.tsx

@@ -214,7 +214,7 @@ export class AppChromeService {
     const { kioskMode, searchBarHidden } = this.state.getValue();
 
     if (searchBarHidden || kioskMode === KioskMode.TV) {
-      appEvents.emit(AppEvents.alertSuccess, [t('navigation.kiosk.tv-alert', 'Press ESC to exit kiosk mode')]);
+      appEvents.emit(AppEvents.alertInfo, [t('navigation.kiosk.tv-alert', 'Press ESC to exit kiosk mode')]);
       return KioskMode.Full;
     }
 

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

@@ -10,6 +10,7 @@ import { useSelector, useDispatch } from 'app/types';
 
 import {
   createErrorNotification,
+  createInfoNotification,
   createSuccessNotification,
   createWarningNotification,
 } from '../../copy/appNotification';
@@ -25,6 +26,7 @@ export function AppNotificationList() {
     appEvents.on(AppEvents.alertWarning, (payload) => dispatch(notifyApp(createWarningNotification(...payload))));
     appEvents.on(AppEvents.alertSuccess, (payload) => dispatch(notifyApp(createSuccessNotification(...payload))));
     appEvents.on(AppEvents.alertError, (payload) => dispatch(notifyApp(createErrorNotification(...payload))));
+    appEvents.on(AppEvents.alertInfo, (payload) => dispatch(notifyApp(createInfoNotification(...payload))));
   }, [dispatch]);
 
   const onClearAppNotification = (id: string) => {

public/app/core/copy/appNotification.ts

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useMemo, ReactElement } from 'react';
 import { v4 as uuidv4 } from 'uuid';
 
 import { getMessageFromError } from 'app/core/utils/errors';
@@ -40,7 +40,7 @@ export const createErrorNotification = (
   title: string,
   text: string | Error = '',
   traceId?: string,
-  component?: React.ReactElement
+  component?: ReactElement
 ): AppNotification => {
   return {
     ...defaultErrorNotification,
@@ -64,12 +64,23 @@ export const createWarningNotification = (title: string, text = '', traceId?: st
   showing: true,
 });
 
-/** Hook for showing toast notifications with varying severity (success, warning error).
+export const createInfoNotification = (title: string, text = '', traceId?: string): AppNotification => ({
+  severity: AppNotificationSeverity.Info,
+  icon: 'info-circle',
+  title,
+  text,
+  id: uuidv4(),
+  timestamp: Date.now(),
+  showing: true,
+});
+
+/** Hook for showing toast notifications with varying severity (success, warning, error, info).
  * @example
  * const notifyApp = useAppNotification();
  * notifyApp.success('Success!', 'Some additional text');
  * notifyApp.warning('Warning!');
  * notifyApp.error('Error!');
+ * notifyApp.info('Info text');
  */
 export function useAppNotification() {
   const dispatch = useDispatch();
@@ -84,6 +95,9 @@ export function useAppNotification() {
       error: (title: string, text = '', traceId?: string) => {
         dispatch(notifyApp(createErrorNotification(title, text, traceId)));
       },
+      info: (title: string, text = '') => {
+        dispatch(notifyApp(createInfoNotification(title, text)));
+      },
     }),
     [dispatch]
   );