Enhance App.js with notebook reference and improved Spark app ID handling

- Added useRef for notebook reference to facilitate direct interaction with the Notebook component.
- Updated Spark app ID handling to ensure it is set correctly when an active Spark application is detected.
- Minor refactoring for improved clarity and maintainability of the code.

Author: xuwenyihust

webapp/src/App.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import LoginForm from './components/auth/LoginForm';
 import Sidebar from './components/sidebar/Sidebar';
 import Notebook from './components/notebook/Notebook';
@@ -60,6 +60,8 @@ const App = () => {
   const [workspaceFiles, setWorkspaceFiles] = useState([]);
   const [refreshKey, setRefreshKey] = useState(0);
 
+  const notebookRef = useRef(null);
+
   // Auth
   useEffect(() => {
     const storedUsername = localStorage.getItem('username');
@@ -147,8 +149,8 @@ const App = () => {
             setNotebook(notebookData);
 
             // Update Spark badge if there's an active Spark app
-            if (sparkApp) {
-                setSparkAppId(sparkApp.spark_app_id);
+            if (sparkApp && sparkApp.spark_app_id) {
+                notebookRef.current?.setSparkAppId(sparkApp.spark_app_id);
             }
 
             setShowHistoryServer(false);
@@ -224,6 +226,7 @@ const App = () => {
             username={username}
             useremail={useremail}/>
           <Notebook 
+            ref={notebookRef}
             showNotebook={showNotebook}
             notebook={notebook}
             notebookState={notebookState}