Move delete collection confirmation pane to react (#417)

src/Main.tsx

@@ -14,6 +14,7 @@ import "./Explorer/Controls/CollapsiblePanel/CollapsiblePanelComponent.less";
 import "./Explorer/Controls/DynamicList/DynamicListComponent.less";
 import "./Explorer/Controls/JsonEditor/JsonEditorComponent.less";
 import "./Explorer/Graph/GraphExplorerComponent/graphExplorer.less";
+import "./Explorer/Panes/PanelComponent.less";
 import "../less/TableStyles/queryBuilder.less";
 import "../externals/jquery.dataTables.min.css";
 import "../less/TableStyles/fulldatatables.less";
@@ -64,7 +65,9 @@ import arrowLeftImg from "../images/imgarrowlefticon.svg";
 import { KOCommentEnd, KOCommentIfStart } from "./koComment";
 import { useConfig } from "./hooks/useConfig";
 import { useKnockoutExplorer } from "./hooks/useKnockoutExplorer";
+import { useSidePanel } from "./hooks/useSidePanel";
 import { NotificationConsoleComponent } from "./Explorer/Menus/NotificationConsole/NotificationConsoleComponent";
+import { PanelContainerComponent } from "./Explorer/Panes/PanelContainerComponent";
 
 initializeIcons();
 
@@ -73,10 +76,15 @@ const App: React.FunctionComponent = () => {
   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 { isPanelOpen, panelContent, headerText, openSidePanel, closeSidePanel } = useSidePanel();
+
   const explorerParams: ExplorerParams = {
     setIsNotificationConsoleExpanded,
     setNotificationConsoleData,
     setInProgressConsoleDataIdToBeDeleted,
+    openSidePanel,
+    closeSidePanel,
   };
   const config = useConfig();
   useKnockoutExplorer(config, explorerParams);
@@ -309,6 +317,13 @@ const App: React.FunctionComponent = () => {
         </div>
       </div>
       {/* Global loader - End */}
+      <PanelContainerComponent
+        isOpen={isPanelOpen}
+        panelContent={panelContent}
+        headerText={headerText}
+        closePanel={closeSidePanel}
+        isConsoleExpanded={isNotificationConsoleExpanded}
+      />
       <div data-bind="react:uploadItemsPaneAdapter" />
       <div data-bind='component: { name: "add-database-pane", params: {data: addDatabasePane} }' />
       <div data-bind='component: { name: "add-collection-pane", params: { data: addCollectionPane} }' />