Move notification console to react (#400)

src/Main.tsx

@@ -54,7 +54,8 @@ import "./Libs/is-integer-polyfill";
 import "url-polyfill/url-polyfill.min";
 
 import { initializeIcons } from "office-ui-fabric-react/lib/Icons";
-import React from "react";
+import { ExplorerParams } from "./Explorer/Explorer";
+import React, { useState } from "react";
 import ReactDOM from "react-dom";
 import copyImage from "../images/Copy.svg";
 import hdeConnectImage from "../images/HdeConnectCosmosDB.svg";
@@ -63,12 +64,22 @@ import arrowLeftImg from "../images/imgarrowlefticon.svg";
 import { KOCommentEnd, KOCommentIfStart } from "./koComment";
 import { useConfig } from "./hooks/useConfig";
 import { useKnockoutExplorer } from "./hooks/useKnockoutExplorer";
+import { NotificationConsoleComponent } from "./Explorer/Menus/NotificationConsole/NotificationConsoleComponent";
 
 initializeIcons();
 
 const App: React.FunctionComponent = () => {
+  const [isNotificationConsoleExpanded, setIsNotificationConsoleExpanded] = useState(false);
+  const [notificationConsoleData, setNotificationConsoleData] = useState(undefined);
+  //TODO: Refactor so we don't need to pass the id to remove a console data
+  const [inProgressConsoleDataIdToBeDeleted, setInProgressConsoleDataIdToBeDeleted] = useState("");
+  const explorerParams: ExplorerParams = {
+    setIsNotificationConsoleExpanded,
+    setNotificationConsoleData,
+    setInProgressConsoleDataIdToBeDeleted,
+  };
   const config = useConfig();
-  useKnockoutExplorer(config);
+  useKnockoutExplorer(config, explorerParams);
 
   return (
     <div className="flexContainer">
@@ -270,8 +281,14 @@ const App: React.FunctionComponent = () => {
           role="contentinfo"
           aria-label="Notification console"
           id="explorerNotificationConsole"
-          data-bind="react: notificationConsoleComponentAdapter"
-        />
+        >
+          <NotificationConsoleComponent
+            isConsoleExpanded={isNotificationConsoleExpanded}
+            consoleData={notificationConsoleData}
+            inProgressConsoleDataIdToBeDeleted={inProgressConsoleDataIdToBeDeleted}
+            setIsConsoleExpanded={setIsNotificationConsoleExpanded}
+          />
+        </div>
       </div>
       {/* Global loader - Start */}