Migrate SidePanel state to Zustand (#799)

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

src/Explorer/Panes/NewVertexPanel/NewVertexPanel.test.tsx

@@ -36,14 +36,7 @@ describe("New Vertex Panel", () => {
   it("should call form submit method", () => {
     const onSubmitSpy = jest.fn();
 
-    const newWrapper = mount(
-      <NewVertexPanel
-        explorer={fakeExplorer}
-        partitionKeyPropertyProp={undefined}
-        openNotificationConsole={(): void => undefined}
-        onSubmit={onSubmitSpy}
-      />
-    );
+    const newWrapper = mount(<NewVertexPanel partitionKeyPropertyProp={undefined} onSubmit={onSubmitSpy} />);
     //eslint-disable-next-line
     newWrapper.find("form").simulate("submit", { preventDefault: () => {} });
 
@@ -61,14 +54,7 @@ describe("New Vertex Panel", () => {
 
     const result = onSubmitSpy(fakeNewVertexData, onErrorSpy, onSuccessSpy);
 
-    const newWrapper = mount(
-      <NewVertexPanel
-        explorer={fakeExplorer}
-        partitionKeyPropertyProp={undefined}
-        openNotificationConsole={(): void => undefined}
-        onSubmit={onSubmitSpy}
-      />
-    );
+    const newWrapper = mount(<NewVertexPanel partitionKeyPropertyProp={undefined} onSubmit={onSubmitSpy} />);
     //eslint-disable-next-line
     newWrapper.find("form").simulate("submit", { preventDefault: () => {} });
 

src/Explorer/Panes/NewVertexPanel/NewVertexPanel.tsx

@@ -1,21 +1,17 @@
 import { useBoolean } from "@fluentui/react-hooks";
 import React, { FunctionComponent, useState } from "react";
 import * as ViewModels from "../../../Contracts/ViewModels";
-import Explorer from "../../Explorer";
+import { useSidePanel } from "../../../hooks/useSidePanel";
 import { NewVertexComponent } from "../../Graph/NewVertexComponent/NewVertexComponent";
 import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";
 export interface INewVertexPanelProps {
-  explorer: Explorer;
   partitionKeyPropertyProp: string;
   onSubmit: (result: ViewModels.NewVertexData, onError: (errorMsg: string) => void, onSuccess: () => void) => void;
-  openNotificationConsole: () => void;
 }
 
 export const NewVertexPanel: FunctionComponent<INewVertexPanelProps> = ({
-  explorer,
   partitionKeyPropertyProp,
   onSubmit,
-  openNotificationConsole,
 }: INewVertexPanelProps): JSX.Element => {
   let newVertexDataValue: ViewModels.NewVertexData;
   const [errorMessage, setErrorMessage] = useState<string>("");
@@ -33,10 +29,10 @@ export const NewVertexPanel: FunctionComponent<INewVertexPanelProps> = ({
     setErrorMessage(errorMsg);
     setLoadingFalse();
   };
-
+  const closeSidePanel = useSidePanel((state) => state.closeSidePanel);
   const onSuccess = () => {
     setLoadingFalse();
-    explorer.closeSidePanel();
+    closeSidePanel();
   };
 
   const onChange = (newVertexData: ViewModels.NewVertexData) => {
@@ -47,7 +43,6 @@ export const NewVertexPanel: FunctionComponent<INewVertexPanelProps> = ({
     isExecuting: isLoading,
     submitButtonText: "OK",
     onSubmit: () => submit(),
-    expandConsole: openNotificationConsole,
   };
 
   return (

src/Explorer/Panes/NewVertexPanel/__snapshots__/NewVertexPanel.test.tsx.snap

@@ -2,7 +2,6 @@
 
 exports[`New Vertex Panel should render default property 1`] = `
 <RightPaneForm
-  expandConsole={[Function]}
   formError=""
   isExecuting={false}
   onSubmit={[Function]}