feat(FR-1568): migrate app launcher notifications from Lit to React

- Integrate React notification system with existing Lit app launcher
- Add unified notification key system for state synchronization
- Implement progress tracking with backgroundTask support
- Update notification flow throughout app launch process
- Maintain backward compatibility during migration phase
- Add comprehensive error handling with user-friendly messages

Author: ironAiken2

react/src/components/ComputeSessionNodeItems/AppLauncherModal.tsx

@@ -18,11 +18,20 @@ import {
   Row,
   Typography,
 } from 'antd';
-import { BAIFlex, BAIModal, BAISelect, BAIText } from 'backend.ai-ui';
+import {
+  BAIButton,
+  BAIFlex,
+  BAILink,
+  BAIModal,
+  BAISelect,
+  BAIText,
+} from 'backend.ai-ui';
 import _ from 'lodash';
 import { useRef, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { graphql, useFragment } from 'react-relay';
+import { useNavigate } from 'react-router-dom';
+import { useSetBAINotification } from 'src/hooks/useBAINotification';
 
 interface AppLauncherModalProps extends ModalProps {
   onRequestClose: () => void;
@@ -43,6 +52,9 @@ const AppLauncherModal: React.FC<AppLauncherModalProps> = ({
   const [forceUseV2Proxy, setForceUseV2Proxy] = useState<boolean>(false);
   const [useSubDomain, setUseSubDomain] = useState<boolean>(false);
 
+  const { upsertNotification } = useSetBAINotification();
+  const navigate = useNavigate();
+
   const session = useFragment(
     graphql`
       fragment AppLauncherModalFragment on ComputeSessionNode {
@@ -92,9 +104,38 @@ const AppLauncherModal: React.FC<AppLauncherModalProps> = ({
       }
     });
 
+    // set notification for lit-element component
+    upsertNotification({
+      key: `session-app-${session?.row_id}`,
+      message: (
+        <span>
+          {t('general.Session')}:&nbsp;
+          <BAILink
+            style={{
+              fontWeight: 'normal',
+            }}
+            onClick={() => {
+              const newSearchParams = new URLSearchParams(location.search);
+              newSearchParams.set('sessionDetail', session?.row_id || '');
+              navigate({
+                pathname: `/session`,
+                search: newSearchParams.toString(),
+              });
+            }}
+          >
+            {session?.name}
+          </BAILink>
+        </span>
+      ),
+      description: t('session.appLauncher.LaunchingApp', {
+        appName: app?.title || '',
+      }),
+    });
+
     const appController = {
       'app-name': app?.name ?? '',
       'session-uuid': session?.row_id ?? '',
+      'session-name': session?.name ?? '',
       'url-postfix': app?.redirect ?? '',
     };
 
@@ -121,10 +162,7 @@ const AppLauncherModal: React.FC<AppLauncherModalProps> = ({
       return;
     }
     // @ts-ignore
-    globalThis.appLauncher._runApp(appController).then(() => {});
-    setOpenToPublic(false);
-    setTryPreferredPort(false);
-    onRequestClose();
+    await globalThis.appLauncher._runApp(appController).then(() => {});
   };
 
   return (
@@ -166,7 +204,7 @@ const AppLauncherModal: React.FC<AppLauncherModalProps> = ({
                         gap={'xs'}
                         style={{ height: '100%' }}
                       >
-                        <Button
+                        <BAIButton
                           icon={
                             <Image
                               src={app?.src}
@@ -175,8 +213,12 @@ const AppLauncherModal: React.FC<AppLauncherModalProps> = ({
                               style={{ height: 36, width: 36 }}
                             />
                           }
-                          onClick={() => {
-                            handleAppLaunch(app);
+                          action={async () => {
+                            await handleAppLaunch(app).then(() => {
+                              setOpenToPublic(false);
+                              setTryPreferredPort(false);
+                              onRequestClose();
+                            });
                           }}
                           style={{ height: 72, width: 72 }}
                         />

react/src/hooks/useBackendAIAppLauncher.tsx

@@ -1,13 +1,22 @@
+import { useSetBAINotification } from './useBAINotification';
+import { BAILink } from 'backend.ai-ui';
+import { useTranslation } from 'react-i18next';
 import { graphql, useFragment } from 'react-relay';
+import { useNavigate } from 'react-router-dom';
 import { useBackendAIAppLauncherFragment$key } from 'src/__generated__/useBackendAIAppLauncherFragment.graphql';
 
 export const useBackendAIAppLauncher = (
   sessionFrgmt?: useBackendAIAppLauncherFragment$key | null,
 ) => {
+  const { t } = useTranslation();
+  const { upsertNotification } = useSetBAINotification();
+  const navigate = useNavigate();
+
   // TODO: migrate backend-ai-app-launcher features to this hook using fragment data.
   const session = useFragment(
     graphql`
       fragment useBackendAIAppLauncherFragment on ComputeSessionNode {
+        name
         row_id @required(action: NONE)
         vfolder_mounts
       }
@@ -17,7 +26,35 @@ export const useBackendAIAppLauncher = (
 
   // @ts-ignore
   return {
+    // TODO: AppLauncherModal should modify the hook to use, as it is currently separated,
+    // to re-declare the notification for use by the backend-ai-app-launcher.
     runTerminal: () => {
+      upsertNotification({
+        key: `session-app-${session?.row_id}`,
+        message: (
+          <span>
+            {t('general.Session')}:&nbsp;
+            <BAILink
+              style={{
+                fontWeight: 'normal',
+              }}
+              onClick={() => {
+                const newSearchParams = new URLSearchParams(location.search);
+                newSearchParams.set('sessionDetail', session?.row_id || '');
+                navigate({
+                  pathname: `/session`,
+                  search: newSearchParams.toString(),
+                });
+              }}
+            >
+              {session?.name}
+            </BAILink>
+          </span>
+        ),
+        description: t('session.appLauncher.LaunchingApp', {
+          appName: 'Console',
+        }),
+      });
       // @ts-ignore
       globalThis.appLauncher.runTerminal(session.row_id);
     },

resources/i18n/de.json

@@ -1417,6 +1417,7 @@
       "ConfirmAndRun": "Ich habe nachgesehen und ich fange an",
       "ConnectUrlIsNotValid": "Die Verbindungs-URL ist ungültig.",
       "DownloadSSHKey": "SSH-Schlüssel herunterladen",
+      "LaunchingApp": "Die App {{appName}} wird gestartet.",
       "NoExistingConnectionExample": "Keine Verbindung Zu kopierendes Beispiel.",
       "OpenVSCodeRemote": "Lokalen Visual Studio Code öffnen",
       "Prepared": "Bereit",

resources/i18n/el.json

@@ -1416,6 +1416,7 @@
       "ConfirmAndRun": "Έλεγξα και θα ξεκινήσω",
       "ConnectUrlIsNotValid": "Η διεύθυνση URL σύνδεσης δεν είναι έγκυρη.",
       "DownloadSSHKey": "Λήψη κλειδιού SSH",
+      "LaunchingApp": "Η εφαρμογή {{appName}} εκκινείται.",
       "NoExistingConnectionExample": "Δεν υπάρχει σύνδεση Παράδειγμα προς αντιγραφή.",
       "OpenVSCodeRemote": "Ανοίξτε τον τοπικό κώδικα του Visual Studio",
       "Prepared": "Ετοιμος",

resources/i18n/en.json

@@ -1425,6 +1425,7 @@
       "ConfirmAndRun": "I checked and I'll start",
       "ConnectUrlIsNotValid": "Connect URL is not valid.",
       "DownloadSSHKey": "Download SSH Key",
+      "LaunchingApp": "Starting {{appName}} app.",
       "NoExistingConnectionExample": "No Connection Example to be copied.",
       "OpenVSCodeRemote": "Open local Visual Studio Code",
       "Prepared": "Prepared",

resources/i18n/es.json

@@ -1419,6 +1419,7 @@
       "ConfirmAndRun": "Lo he comprobado y voy a empezar",
       "ConnectUrlIsNotValid": "La URL de conexión no es válida.",
       "DownloadSSHKey": "Descargar clave SSH",
+      "LaunchingApp": "{{appName}} se está iniciando.",
       "NoExistingConnectionExample": "No hay conexión Ejemplo a copiar.",
       "OpenVSCodeRemote": "Abrir código local de Visual Studio",
       "Prepared": "Preparado",

resources/i18n/fi.json

@@ -1418,6 +1418,7 @@
       "ConfirmAndRun": "Tarkistin ja aloitan",
       "ConnectUrlIsNotValid": "Yhteyden URL-osoite ei kelpaa.",
       "DownloadSSHKey": "Lataa SSH-avain",
+      "LaunchingApp": "Käynnistetään {{appName}}-sovellusta.",
       "NoExistingConnectionExample": "Ei yhteyttä Kopioitava esimerkki.",
       "OpenVSCodeRemote": "Avaa paikallinen Visual Studio Code",
       "Prepared": "Valmisteltu",

resources/i18n/fr.json

@@ -1419,6 +1419,7 @@
       "ConfirmAndRun": "j'ai vérifié et je vais commencer",
       "ConnectUrlIsNotValid": "L'URL de connexion n'est pas valide.",
       "DownloadSSHKey": "Télécharger la clé SSH",
+      "LaunchingApp": "Lancement de l'application {{appName}}.",
       "NoExistingConnectionExample": "Aucun exemple de connexion à copier.",
       "OpenVSCodeRemote": "Ouvrir le code local de Visual Studio",
       "Prepared": "Préparé",

resources/i18n/id.json

@@ -1417,6 +1417,7 @@
       "ConfirmAndRun": "Saya sudah memeriksa dan saya akan mulai",
       "ConnectUrlIsNotValid": "URL koneksi tidak valid.",
       "DownloadSSHKey": "Unduh Kunci SSH",
+      "LaunchingApp": "Menjalankan aplikasi {{appName}}.",
       "NoExistingConnectionExample": "Tidak Ada Koneksi Contoh untuk disalin.",
       "OpenVSCodeRemote": "Buka kode Visual Studio lokal",
       "Prepared": "Siap",

resources/i18n/it.json

@@ -1416,6 +1416,7 @@
       "ConfirmAndRun": "Ho controllato e comincio",
       "ConnectUrlIsNotValid": "L'URL di connessione non è valido.",
       "DownloadSSHKey": "Scarica la chiave SSH",
+      "LaunchingApp": "Avvio dell'app {{appName}} in corso.",
       "NoExistingConnectionExample": "Nessun esempio di connessione da copiare.",
       "OpenVSCodeRemote": "Aprire il codice locale di Visual Studio",
       "Prepared": "Preparato",