Migrate remaining notification console methods to zustand (#873)

src/Contracts/ViewModels.ts

@@ -6,7 +6,7 @@ import {
   UserDefinedFunctionDefinition,
 } from "@azure/cosmos";
 import Explorer from "../Explorer/Explorer";
-import { ConsoleData } from "../Explorer/Menus/NotificationConsole/NotificationConsoleComponent";
+import { ConsoleData } from "../Explorer/Menus/NotificationConsole/ConsoleData";
 import { CassandraTableKey, CassandraTableKeys } from "../Explorer/Tables/TableDataClient";
 import ConflictId from "../Explorer/Tree/ConflictId";
 import DocumentId from "../Explorer/Tree/DocumentId";

src/Explorer/Controls/Settings/__snapshots__/SettingsComponent.test.tsx.snap

@@ -71,8 +71,6 @@ exports[`SettingsComponent renders 1`] = `
                 },
                 "selectedDatabaseId": [Function],
                 "selectedNode": [Function],
-                "setInProgressConsoleDataIdToBeDeleted": undefined,
-                "setNotificationConsoleData": undefined,
                 "sparkClusterConnectionInfo": [Function],
                 "tabsManager": TabsManager {
                   "activeTab": [Function],
@@ -142,8 +140,6 @@ exports[`SettingsComponent renders 1`] = `
               },
               "selectedDatabaseId": [Function],
               "selectedNode": [Function],
-              "setInProgressConsoleDataIdToBeDeleted": undefined,
-              "setNotificationConsoleData": undefined,
               "sparkClusterConnectionInfo": [Function],
               "tabsManager": TabsManager {
                 "activeTab": [Function],
@@ -226,8 +222,6 @@ exports[`SettingsComponent renders 1`] = `
                 },
                 "selectedDatabaseId": [Function],
                 "selectedNode": [Function],
-                "setInProgressConsoleDataIdToBeDeleted": undefined,
-                "setNotificationConsoleData": undefined,
                 "sparkClusterConnectionInfo": [Function],
                 "tabsManager": TabsManager {
                   "activeTab": [Function],
@@ -297,8 +291,6 @@ exports[`SettingsComponent renders 1`] = `
               },
               "selectedDatabaseId": [Function],
               "selectedNode": [Function],
-              "setInProgressConsoleDataIdToBeDeleted": undefined,
-              "setNotificationConsoleData": undefined,
               "sparkClusterConnectionInfo": [Function],
               "tabsManager": TabsManager {
                 "activeTab": [Function],

src/Explorer/Explorer.tsx

@@ -41,7 +41,6 @@ import * as ComponentRegisterer from "./ComponentRegisterer";
 import { DialogProps, TextFieldProps, useDialog } from "./Controls/Dialog";
 import { GalleryTab as GalleryTabKind } from "./Controls/NotebookGallery/GalleryViewerComponent";
 import { useCommandBar } from "./Menus/CommandBar/CommandBarComponentAdapter";
-import { ConsoleData } from "./Menus/NotificationConsole/NotificationConsoleComponent";
 import * as FileSystemUtil from "./Notebook/FileSystemUtil";
 import { SnapshotRequest } from "./Notebook/NotebookComponent/types";
 import { NotebookContentItem, NotebookContentItemType } from "./Notebook/NotebookContentItem";
@@ -83,8 +82,6 @@ BindingHandlersRegisterer.registerBindingHandlers();
 var tmp = ComponentRegisterer;
 
 export interface ExplorerParams {
-  setNotificationConsoleData: (consoleData: ConsoleData) => void;
-  setInProgressConsoleDataIdToBeDeleted: (id: string) => void;
   tabsManager: TabsManager;
 }
 
@@ -96,9 +93,6 @@ export default class Explorer {
   public queriesClient: QueriesClient;
   public tableDataClient: TableDataClient;
 
-  private setNotificationConsoleData: (consoleData: ConsoleData) => void;
-  private setInProgressConsoleDataIdToBeDeleted: (id: string) => void;
-
   // Resource Tree
   public databases: ko.ObservableArray<ViewModels.Database>;
   public selectedDatabaseId: ko.Computed<string>;
@@ -145,9 +139,6 @@ export default class Explorer {
   private static readonly MaxNbDatabasesToAutoExpand = 5;
 
   constructor(params?: ExplorerParams) {
-    this.setNotificationConsoleData = params?.setNotificationConsoleData;
-    this.setInProgressConsoleDataIdToBeDeleted = params?.setInProgressConsoleDataIdToBeDeleted;
-
     const startKey: number = TelemetryProcessor.traceStart(Action.InitializeDataExplorer, {
       dataExplorerArea: Constants.Areas.ResourceTree,
     });
@@ -444,14 +435,6 @@ export default class Explorer {
     return this.selectedNode() == null;
   }
 
-  public logConsoleData(consoleData: ConsoleData): void {
-    this.setNotificationConsoleData(consoleData);
-  }
-
-  public deleteInProgressConsoleDataWithId(id: string): void {
-    this.setInProgressConsoleDataIdToBeDeleted(id);
-  }
-
   public refreshDatabaseForResourceToken(): Q.Promise<any> {
     const databaseId = this.resourceTokenDatabaseId();
     const collectionId = this.resourceTokenCollectionId();

src/Explorer/Graph/GraphExplorerComponent/GraphExplorer.test.tsx

@@ -10,7 +10,7 @@ import { queryDocumentsPage } from "../../../Common/dataAccess/queryDocumentsPag
 import * as DataModels from "../../../Contracts/DataModels";
 import * as StorageUtility from "../../../Shared/StorageUtility";
 import { TabComponent } from "../../Controls/Tabs/TabComponent";
-import { ConsoleDataType } from "../../Menus/NotificationConsole/NotificationConsoleComponent";
+import { ConsoleDataType } from "../../Menus/NotificationConsole/ConsoleData";
 import GraphTab from "../../Tabs/GraphTab";
 import * as D3ForceGraph from "./D3ForceGraph";
 import { GraphData } from "./GraphData";

src/Explorer/Graph/GraphExplorerComponent/GraphExplorer.tsx

@@ -18,7 +18,7 @@ import { logConsoleError, logConsoleInfo, logConsoleProgress } from "../../../Ut
 import { EditorReact } from "../../Controls/Editor/EditorReact";
 import * as InputTypeaheadComponent from "../../Controls/InputTypeahead/InputTypeaheadComponent";
 import * as TabComponent from "../../Controls/Tabs/TabComponent";
-import { ConsoleDataType } from "../../Menus/NotificationConsole/NotificationConsoleComponent";
+import { ConsoleDataType } from "../../Menus/NotificationConsole/ConsoleData";
 import { IGraphConfig } from "../../Tabs/GraphTab";
 import { ArraysByKeyCache } from "./ArraysByKeyCache";
 import * as D3ForceGraph from "./D3ForceGraph";

src/Explorer/Graph/GraphExplorerComponent/NodePropertiesComponent.tsx

@@ -5,21 +5,26 @@
  */
 
 import * as React from "react";
-import { GraphHighlightedNodeData, EditedProperties, EditedEdges, PossibleVertex } from "./GraphExplorer";
-import { CollapsiblePanel } from "../../Controls/CollapsiblePanel/CollapsiblePanel";
-import { ReadOnlyNodePropertiesComponent } from "./ReadOnlyNodePropertiesComponent";
-import { EditorNodePropertiesComponent } from "./EditorNodePropertiesComponent";
-import { ReadOnlyNeighborsComponent } from "./ReadOnlyNeighborsComponent";
-import * as ViewModels from "../../../Contracts/ViewModels";
-import { Item } from "../../Controls/InputTypeahead/InputTypeaheadComponent";
-import * as EditorNeighbors from "./EditorNeighborsComponent";
-import EditIcon from "../../../../images/edit.svg";
-import DeleteIcon from "../../../../images/delete.svg";
-import CheckIcon from "../../../../images/check.svg";
 import CancelIcon from "../../../../images/cancel.svg";
-import { GraphExplorer } from "./GraphExplorer";
+import CheckIcon from "../../../../images/check.svg";
-import { ConsoleDataType } from "../../Menus/NotificationConsole/NotificationConsoleComponent";
+import DeleteIcon from "../../../../images/delete.svg";
+import EditIcon from "../../../../images/edit.svg";
+import * as ViewModels from "../../../Contracts/ViewModels";
 import { AccessibleElement } from "../../Controls/AccessibleElement/AccessibleElement";
+import { CollapsiblePanel } from "../../Controls/CollapsiblePanel/CollapsiblePanel";
+import { Item } from "../../Controls/InputTypeahead/InputTypeaheadComponent";
+import { ConsoleDataType } from "../../Menus/NotificationConsole/ConsoleData";
+import * as EditorNeighbors from "./EditorNeighborsComponent";
+import { EditorNodePropertiesComponent } from "./EditorNodePropertiesComponent";
+import {
+  EditedEdges,
+  EditedProperties,
+  GraphExplorer,
+  GraphHighlightedNodeData,
+  PossibleVertex,
+} from "./GraphExplorer";
+import { ReadOnlyNeighborsComponent } from "./ReadOnlyNeighborsComponent";
+import { ReadOnlyNodePropertiesComponent } from "./ReadOnlyNodePropertiesComponent";
 
 export enum Mode {
   READONLY_PROP,

src/Explorer/Menus/NotificationConsole/ConsoleData.tsx

@@ -0,0 +1,16 @@
+/**
+ * Interface for the data/content that will be recorded
+ */
+
+export interface ConsoleData {
+  type: ConsoleDataType;
+  date: string;
+  message: string;
+  id?: string;
+}
+
+export enum ConsoleDataType {
+  Info = 0,
+  Error = 1,
+  InProgress = 2,
+}

src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.test.tsx

@@ -1,10 +1,7 @@
 import { shallow } from "enzyme";
 import React from "react";
-import {
+import { ConsoleDataType } from "./ConsoleData";
-  ConsoleDataType,
+import { NotificationConsoleComponent, NotificationConsoleComponentProps } from "./NotificationConsoleComponent";
-  NotificationConsoleComponent,
-  NotificationConsoleComponentProps,
-} from "./NotificationConsoleComponent";
 
 describe("NotificationConsoleComponent", () => {
   const createBlankProps = (): NotificationConsoleComponentProps => {

src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx

@@ -17,25 +17,7 @@ import ChevronUpIcon from "../../../../images/QueryBuilder/CollapseChevronUp_16x
 import { ClientDefaults, KeyCodes } from "../../../Common/Constants";
 import { useNotificationConsole } from "../../../hooks/useNotificationConsole";
 import { userContext } from "../../../UserContext";
-
+import { ConsoleData, ConsoleDataType } from "./ConsoleData";
-/**
- * Log levels
- */
-export enum ConsoleDataType {
-  Info = 0,
-  Error = 1,
-  InProgress = 2,
-}
-
-/**
- * Interface for the data/content that will be recorded
- */
-export interface ConsoleData {
-  type: ConsoleDataType;
-  date: string;
-  message: string;
-  id?: string;
-}
 
 export interface NotificationConsoleComponentProps {
   isConsoleExpanded: boolean;
@@ -323,14 +305,13 @@ const PrPreview = (props: { pr: string }) => {
   );
 };
 
-export const NotificationConsole: React.FC<
+export const NotificationConsole: React.FC = () => {
-  Pick<NotificationConsoleComponentProps, "consoleData" | "inProgressConsoleDataIdToBeDeleted">
-> = ({
-  consoleData,
-  inProgressConsoleDataIdToBeDeleted,
-}: Pick<NotificationConsoleComponentProps, "consoleData" | "inProgressConsoleDataIdToBeDeleted">) => {
   const setIsExpanded = useNotificationConsole((state) => state.setIsExpanded);
   const isExpanded = useNotificationConsole((state) => state.isExpanded);
+  const consoleData = useNotificationConsole((state) => state.consoleData);
+  const inProgressConsoleDataIdToBeDeleted = useNotificationConsole(
+    (state) => state.inProgressConsoleDataIdToBeDeleted
+  );
   // TODO Refactor NotificationConsoleComponent 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 (

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

@@ -43,7 +43,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
               variant="small"
             >
               <span
-                className="css-102"
+                className="css-53"
               >
                 Confirm by typing the 
                 container
@@ -347,18 +347,18 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                 value=""
               >
                 <div
-                  className="ms-TextField root-104"
+                  className="ms-TextField root-55"
                 >
                   <div
                     className="ms-TextField-wrapper"
                   >
                     <div
-                      className="ms-TextField-fieldGroup fieldGroup-105"
+                      className="ms-TextField-fieldGroup fieldGroup-56"
                     >
                       <input
                         aria-invalid={false}
                         autoFocus={true}
-                        className="ms-TextField-field field-106"
+                        className="ms-TextField-field field-57"
                         id="confirmCollectionId"
                         onBlur={[Function]}
                         onChange={[Function]}
@@ -381,7 +381,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
               variant="small"
             >
               <span
-                className="css-115"
+                className="css-66"
               >
                 Help us improve Azure Cosmos DB!
               </span>
@@ -391,7 +391,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
               variant="small"
             >
               <span
-                className="css-115"
+                className="css-66"
               >
                 What is the reason why you are deleting this 
                 container
@@ -697,17 +697,17 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                 value=""
               >
                 <div
-                  className="ms-TextField ms-TextField--multiline root-104"
+                  className="ms-TextField ms-TextField--multiline root-55"
                 >
                   <div
                     className="ms-TextField-wrapper"
                   >
                     <div
-                      className="ms-TextField-fieldGroup fieldGroup-116"
+                      className="ms-TextField-fieldGroup fieldGroup-67"
                     >
                       <textarea
                         aria-invalid={false}
-                        className="ms-TextField-field field-117"
+                        className="ms-TextField-field field-68"
                         id="deleteCollectionFeedbackInput"
                         onBlur={[Function]}
                         onChange={[Function]}
@@ -2434,7 +2434,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                   >
                     <button
                       aria-label="OK"
-                      className="ms-Button ms-Button--primary root-119"
+                      className="ms-Button ms-Button--primary root-70"
                       data-is-focusable={true}
                       id="sidePanelOkButton"
                       onClick={[Function]}
@@ -2446,14 +2446,14 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                       type="submit"
                     >
                       <span
-                        className="ms-Button-flexContainer flexContainer-120"
+                        className="ms-Button-flexContainer flexContainer-71"
                         data-automationid="splitbuttonprimary"
                       >
                         <span
-                          className="ms-Button-textContainer textContainer-121"
+                          className="ms-Button-textContainer textContainer-72"
                         >
                           <span
-                            className="ms-Button-label label-123"
+                            className="ms-Button-label label-74"
                             id="id__6"
                             key="id__6"
                           >

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

@@ -60,8 +60,6 @@ exports[`GitHub Repos Panel should render Default properly 1`] = `
             },
             "selectedDatabaseId": [Function],
             "selectedNode": [Function],
-            "setInProgressConsoleDataIdToBeDeleted": undefined,
-            "setNotificationConsoleData": undefined,
             "sparkClusterConnectionInfo": [Function],
             "tabsManager": TabsManager {
               "activeTab": [Function],

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

@@ -50,8 +50,6 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
       },
       "selectedDatabaseId": [Function],
       "selectedNode": [Function],
-      "setInProgressConsoleDataIdToBeDeleted": undefined,
-      "setNotificationConsoleData": undefined,
       "sparkClusterConnectionInfo": [Function],
       "tabsManager": TabsManager {
         "activeTab": [Function],

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

@@ -52,8 +52,6 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
       },
       "selectedDatabaseId": [Function],
       "selectedNode": [Function],
-      "setInProgressConsoleDataIdToBeDeleted": undefined,
-      "setNotificationConsoleData": undefined,
       "sparkClusterConnectionInfo": [Function],
       "tabsManager": TabsManager {
         "activeTab": [Function],
@@ -90,7 +88,7 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
           verticalAlign="center"
         >
           <div
-            className="ms-Stack panelInfoErrorContainer css-102"
+            className="ms-Stack panelInfoErrorContainer css-53"
           >
             <StyledIconBase
               aria-label="warning"
@@ -379,7 +377,7 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
               >
                 <i
                   aria-label="warning"
-                  className="panelWarningIcon root-104"
+                  className="panelWarningIcon root-55"
                   data-icon-name="WarningSolid"
                   role="img"
                 >
@@ -398,7 +396,7 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
               >
                 <span
                   aria-label="message"
-                  className="panelWarningErrorMessage css-105"
+                  className="panelWarningErrorMessage css-56"
                 >
                   Warning! The action you are about to take cannot be undone. Continuing will permanently delete this resource and all of its children resources.
                 </span>
@@ -422,7 +420,7 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
             variant="small"
           >
             <span
-              className="css-105"
+              className="css-56"
             >
               Confirm by typing the database id
             </span>
@@ -722,18 +720,18 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
               validateOnLoad={true}
             >
               <div
-                className="ms-TextField root-107"
+                className="ms-TextField root-58"
               >
                 <div
                   className="ms-TextField-wrapper"
                 >
                   <div
-                    className="ms-TextField-fieldGroup fieldGroup-108"
+                    className="ms-TextField-fieldGroup fieldGroup-59"
                   >
                     <input
                       aria-invalid={false}
                       autoFocus={true}
-                      className="ms-TextField-field field-109"
+                      className="ms-TextField-field field-60"
                       id="confirmDatabaseId"
                       onBlur={[Function]}
                       onChange={[Function]}
@@ -756,7 +754,7 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
             variant="small"
           >
             <span
-              className="css-126"
+              className="css-77"
             >
               Help us improve Azure Cosmos DB!
             </span>
@@ -766,7 +764,7 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
             variant="small"
           >
             <span
-              className="css-126"
+              className="css-77"
             >
               What is the reason why you are deleting this database?
             </span>
@@ -1068,17 +1066,17 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
               validateOnLoad={true}
             >
               <div
-                className="ms-TextField ms-TextField--multiline root-107"
+                className="ms-TextField ms-TextField--multiline root-58"
               >
                 <div
                   className="ms-TextField-wrapper"
                 >
                   <div
-                    className="ms-TextField-fieldGroup fieldGroup-127"
+                    className="ms-TextField-fieldGroup fieldGroup-78"
                   >
                     <textarea
                       aria-invalid={false}
-                      className="ms-TextField-field field-128"
+                      className="ms-TextField-field field-79"
                       id="deleteDatabaseFeedbackInput"
                       onBlur={[Function]}
                       onChange={[Function]}
@@ -2804,7 +2802,7 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
                   >
                     <button
                       aria-label="OK"
-                      className="ms-Button ms-Button--primary root-118"
+                      className="ms-Button ms-Button--primary root-69"
                       data-is-focusable={true}
                       id="sidePanelOkButton"
                       onClick={[Function]}
@@ -2816,14 +2814,14 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
                       type="submit"
                     >
                       <span
-                        className="ms-Button-flexContainer flexContainer-119"
+                        className="ms-Button-flexContainer flexContainer-70"
                         data-automationid="splitbuttonprimary"
                       >
                         <span
-                          className="ms-Button-textContainer textContainer-120"
+                          className="ms-Button-textContainer textContainer-71"
                         >
                           <span
-                            className="ms-Button-label label-122"
+                            className="ms-Button-label label-73"
                             id="id__3"
                             key="id__3"
                           >

src/GitHub/GitHubOAuthService.test.ts

@@ -1,6 +1,5 @@
 import { HttpStatusCodes } from "../Common/Constants";
 import Explorer from "../Explorer/Explorer";
-import { ConsoleDataType } from "../Explorer/Menus/NotificationConsole/NotificationConsoleComponent";
 import NotebookManager from "../Explorer/Notebook/NotebookManager";
 import { JunoClient } from "../Juno/JunoClient";
 import { IGitHubConnectorParams } from "./GitHubConnector";
@@ -17,8 +16,6 @@ describe("GitHubOAuthService", () => {
     originalDataExplorer = window.dataExplorer;
     window.dataExplorer = {
       ...originalDataExplorer,
-      logConsoleData: (data): void =>
-        data.type === ConsoleDataType.Error ? console.error(data.message) : console.error(data.message),
     } as Explorer;
     window.dataExplorer.notebookManager = new NotebookManager();
     window.dataExplorer.notebookManager.junoClient = junoClient;

src/Main.tsx

@@ -56,16 +56,10 @@ import "./Shared/appInsights";
 initializeIcons();
 
 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 [isLeftPaneExpanded, setIsLeftPaneExpanded] = useState<boolean>(true);
-
   const { tabs, activeTab, tabsManager } = useTabs();
 
   const explorerParams: ExplorerParams = {
-    setNotificationConsoleData,
-    setInProgressConsoleDataIdToBeDeleted,
     tabsManager,
   };
 
@@ -117,10 +111,7 @@ const App: React.FunctionComponent = () => {
           aria-label="Notification console"
           id="explorerNotificationConsole"
         >
-          <NotificationConsole
+          <NotificationConsole />
-            consoleData={notificationConsoleData}
-            inProgressConsoleDataIdToBeDeleted={inProgressConsoleDataIdToBeDeleted}
-          />
         </div>
       </div>
       <SidePanel />

src/Utils/NotificationConsoleUtils.ts

@@ -1,11 +1,8 @@
 import * as _ from "underscore";
-import { ConsoleDataType } from "../Explorer/Menus/NotificationConsole/NotificationConsoleComponent";
+import { ConsoleDataType } from "../Explorer/Menus/NotificationConsole/ConsoleData";
-
+import { useNotificationConsole } from "../hooks/useNotificationConsole";
-const _global = typeof self === "undefined" ? window : self;
 
 function log(type: ConsoleDataType, message: string): () => void {
-  const dataExplorer = _global.dataExplorer;
-  if (dataExplorer) {
   const id = _.uniqueId();
   const date = new Intl.DateTimeFormat("en-EN", {
     hour12: true,
@@ -13,11 +10,8 @@ function log(type: ConsoleDataType, message: string): () => void {
     minute: "numeric",
   }).format(new Date());
 
-    dataExplorer.logConsoleData({ type, date, message, id });
+  useNotificationConsole.getState().setNotificationConsoleData({ type, date, message, id });
-    return () => dataExplorer.deleteInProgressConsoleDataWithId(id);
+  return () => useNotificationConsole.getState().setInProgressConsoleDataIdToBeDeleted(id);
-  }
-
-  return () => undefined;
 }
 
 export const logConsoleProgress = (msg: string): (() => void) => log(ConsoleDataType.InProgress, msg);

src/hooks/useNotificationConsole.ts

@@ -1,14 +1,25 @@
 import create, { UseStore } from "zustand";
+import { ConsoleData } from "../Explorer/Menus/NotificationConsole/ConsoleData";
 
 export interface NotificationConsoleState {
   isExpanded: boolean;
+  inProgressConsoleDataIdToBeDeleted: string;
+  consoleData: ConsoleData | undefined;
   expandConsole: () => void;
   // TODO Remove this method. Add a `closeConsole` method instead
   setIsExpanded: (isExpanded: boolean) => void;
+  // TODO These two methods badly need a refactor. Not very react friendly.
+  setNotificationConsoleData: (consoleData: ConsoleData) => void;
+  setInProgressConsoleDataIdToBeDeleted: (id: string) => void;
 }
 
 export const useNotificationConsole: UseStore<NotificationConsoleState> = create((set) => ({
   isExpanded: false,
+  consoleData: undefined,
+  inProgressConsoleDataIdToBeDeleted: "",
   expandConsole: () => set((state) => ({ ...state, isExpanded: true })),
   setIsExpanded: (isExpanded) => set((state) => ({ ...state, isExpanded })),
+  setNotificationConsoleData: (consoleData: ConsoleData) => set((state) => ({ ...state, consoleData })),
+  setInProgressConsoleDataIdToBeDeleted: (id: string) =>
+    set((state) => ({ ...state, inProgressConsoleDataIdToBeDeleted: id })),
 }));