From 852d032e1ae1f7c989d8b2ec7d8e05bf2a54928e Mon Sep 17 00:00:00 2001
From: Alex Khomenko <Clarity-89@users.noreply.github.com>
Date: Mon, 1 Jul 2024 14:28:49 +0300
Subject: [PATCH] App events: Add "info" variant (#89903)

* App events: Add info notification type

* Add info hook

* Revert state

* Use info alert
---
 .../grafana-data/src/types/legacyEvents.ts    |  1 +
 .../components/AppChrome/AppChromeService.tsx |  2 +-
 .../AppNotifications/AppNotificationList.tsx  |  2 ++
 public/app/core/copy/appNotification.ts       | 20 ++++++++++++++++---
 4 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/packages/grafana-data/src/types/legacyEvents.ts b/packages/grafana-data/src/types/legacyEvents.ts
index 8154a322159..0ba9e15a932 100644
--- a/packages/grafana-data/src/types/legacyEvents.ts
+++ b/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 = {
diff --git a/public/app/core/components/AppChrome/AppChromeService.tsx b/public/app/core/components/AppChrome/AppChromeService.tsx
index 7a062e1152f..5c1d88ebb41 100644
--- a/public/app/core/components/AppChrome/AppChromeService.tsx
+++ b/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;
     }
 
diff --git a/public/app/core/components/AppNotifications/AppNotificationList.tsx b/public/app/core/components/AppNotifications/AppNotificationList.tsx
index 7b989214d45..edb686f0d55 100644
--- a/public/app/core/components/AppNotifications/AppNotificationList.tsx
+++ b/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) => {
diff --git a/public/app/core/copy/appNotification.ts b/public/app/core/copy/appNotification.ts
index 485cdc6d4c6..60e766d48a2 100644
--- a/public/app/core/copy/appNotification.ts
+++ b/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]
   );