Migrate SidePanel state to Zustand (#799)

Co-authored-by: hardiknai-techm <HN00734461@TechMahindra.com>

src/Explorer/Panes/PanelContainerComponent.tsx

@@ -1,12 +1,13 @@
 import { IPanelProps, IRenderFunction, Panel, PanelType } from "@fluentui/react";
 import * as React from "react";
+import { useNotificationConsole } from "../../hooks/useNotificationConsole";
+import { useSidePanel } from "../../hooks/useSidePanel";
 
 export interface PanelContainerProps {
   headerText: string;
   panelContent: JSX.Element;
   isConsoleExpanded: boolean;
   isOpen: boolean;
-  closePanel: () => void;
   panelWidth?: string;
   onRenderNavigationContent?: IRenderFunction<IPanelProps>;
 }
@@ -69,7 +70,7 @@ export class PanelContainerComponent extends React.Component<PanelContainerProps
     if ((ev.target as HTMLElement).id === "notificationConsoleHeader") {
       ev.preventDefault();
     } else {
-      this.props.closePanel();
+      useSidePanel.getState().closeSidePanel();
     }
   };
 
@@ -81,3 +82,24 @@ export class PanelContainerComponent extends React.Component<PanelContainerProps
     return panelHeight + "px";
   };
 }
+
+export const SidePanel: React.FC = () => {
+  const isConsoleExpanded = useNotificationConsole((state) => state.isExpanded);
+  const { isOpen, panelContent, headerText } = useSidePanel((state) => {
+    return {
+      isOpen: state.isOpen,
+      panelContent: state.panelContent,
+      headerText: state.headerText,
+    };
+  });
+  // TODO Refactor PanelContainerComponent into a functional component and remove this wrapper
+  // This component only exists so we can use hooks and pass them down to a non-functional component
+  return (
+    <PanelContainerComponent
+      isOpen={isOpen}
+      panelContent={panelContent}
+      headerText={headerText}
+      isConsoleExpanded={isConsoleExpanded}
+    />
+  );
+};