Move <Dialog/> state to zustand (#806)

src/Explorer/Controls/Dialog.tsx

@@ -15,7 +15,22 @@ import {
   ProgressIndicator,
   TextField,
 } from "@fluentui/react";
-import React, { FunctionComponent } from "react";
+import React, { FC } from "react";
+import create, { UseStore } from "zustand";
+
+export interface DialogState {
+  visible: boolean;
+  dialogProps?: DialogProps;
+  openDialog: (props: DialogProps) => void;
+  closeDialog: () => void;
+}
+
+export const useDialog: UseStore<DialogState> = create((set) => ({
+  visible: false,
+  openDialog: (props: DialogProps) => set(() => ({ visible: true, dialogProps: props })),
+  closeDialog: () =>
+    set((state) => ({ visible: false, openDialog: state.openDialog, closeDialog: state.closeDialog }), true),
+}));
 
 export interface TextFieldProps extends ITextFieldProps {
   label: string;
@@ -35,7 +50,6 @@ export interface DialogProps {
   title: string;
   subText: string;
   isModal: boolean;
-  visible: boolean;
   choiceGroupProps?: IChoiceGroupProps;
   textFieldProps?: TextFieldProps;
   linkProps?: LinkProps;
@@ -56,11 +70,12 @@ const DIALOG_TITLE_FONT_SIZE = "17px";
 const DIALOG_TITLE_FONT_WEIGHT = 400;
 const DIALOG_SUBTEXT_FONT_SIZE = "15px";
 
-export const Dialog: FunctionComponent<DialogProps> = ({
+export const Dialog: FC = () => {
+  const { visible, dialogProps: props } = useDialog();
+  const {
     title,
     subText,
     isModal,
-  visible,
     choiceGroupProps,
     textFieldProps,
     linkProps,
@@ -73,7 +88,8 @@ export const Dialog: FunctionComponent<DialogProps> = ({
     type,
     showCloseButton,
     onDismiss,
-}: DialogProps) => {
+  } = props || {};
+
   const dialogProps: IDialogProps = {
     hidden: !visible,
     dialogContentProps: {
@@ -105,7 +121,7 @@ export const Dialog: FunctionComponent<DialogProps> = ({
         }
       : {};
 
-  return (
+  return visible ? (
     <FluentDialog {...dialogProps}>
       {choiceGroupProps && <ChoiceGroup {...choiceGroupProps} />}
       {textFieldProps && <TextField {...textFieldProps} />}
@@ -120,5 +136,7 @@ export const Dialog: FunctionComponent<DialogProps> = ({
         {secondaryButtonProps && <DefaultButton {...secondaryButtonProps} />}
       </DialogFooter>
     </FluentDialog>
+  ) : (
+    <></>
   );
 };

src/Explorer/Controls/NotebookGallery/GalleryViewerComponent.tsx

@@ -28,7 +28,6 @@ import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryCons
 import { trace } from "../../../Shared/Telemetry/TelemetryProcessor";
 import * as GalleryUtils from "../../../Utils/GalleryUtils";
 import Explorer from "../../Explorer";
-import { Dialog, DialogProps } from "../Dialog";
 import { GalleryCardComponent, GalleryCardComponentProps } from "./Cards/GalleryCardComponent";
 import { CodeOfConduct } from "./CodeOfConduct/CodeOfConduct";
 import "./GalleryViewerComponent.less";
@@ -68,7 +67,6 @@ interface GalleryViewerComponentState {
   selectedTab: GalleryTab;
   sortBy: SortBy;
   searchText: string;
-  dialogProps: DialogProps;
   isCodeOfConductAccepted: boolean;
   isFetchingPublishedNotebooks: boolean;
   isFetchingFavouriteNotebooks: boolean;
@@ -119,7 +117,6 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
       selectedTab: props.selectedTab,
       sortBy: props.sortBy,
       searchText: props.searchText,
-      dialogProps: undefined,
       isCodeOfConductAccepted: undefined,
       isFetchingFavouriteNotebooks: true,
       isFetchingPublishedNotebooks: true,
@@ -187,8 +184,6 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
     return (
       <div className="galleryContainer">
         <Pivot {...pivotProps}>{pivotItems}</Pivot>
-
-        {this.state.dialogProps && <Dialog {...this.state.dialogProps} />}
       </div>
     );
   }

src/Explorer/Controls/NotebookViewer/NotebookViewerComponent.tsx

@@ -1,25 +1,25 @@
 /**
  * Wrapper around Notebook Viewer Read only content
  */
+import { IChoiceGroupProps, Icon, IProgressIndicatorProps, Link, ProgressIndicator } from "@fluentui/react";
 import { Notebook } from "@nteract/commutable";
 import { createContentRef } from "@nteract/core";
-import { IChoiceGroupProps, Icon, IProgressIndicatorProps, Link, ProgressIndicator } from "@fluentui/react";
 import * as React from "react";
 import { contents } from "rx-jupyter";
+import { getErrorMessage, getErrorStack, handleError } from "../../../Common/ErrorHandlingUtils";
 import { IGalleryItem, JunoClient } from "../../../Juno/JunoClient";
+import { SessionStorageUtility } from "../../../Shared/StorageUtility";
+import { Action } from "../../../Shared/Telemetry/TelemetryConstants";
+import { traceFailure, traceStart, traceSuccess } from "../../../Shared/Telemetry/TelemetryProcessor";
 import * as GalleryUtils from "../../../Utils/GalleryUtils";
+import { DialogHost } from "../../../Utils/GalleryUtils";
+import Explorer from "../../Explorer";
 import { NotebookClientV2 } from "../../Notebook/NotebookClientV2";
 import { NotebookComponentBootstrapper } from "../../Notebook/NotebookComponent/NotebookComponentBootstrapper";
 import NotebookReadOnlyRenderer from "../../Notebook/NotebookRenderer/NotebookReadOnlyRenderer";
-import { Dialog, DialogProps, TextFieldProps } from "../Dialog";
+import { Dialog, TextFieldProps, useDialog } from "../Dialog";
 import { NotebookMetadataComponent } from "./NotebookMetadataComponent";
 import "./NotebookViewerComponent.less";
-import Explorer from "../../Explorer";
-import { SessionStorageUtility } from "../../../Shared/StorageUtility";
-import { DialogHost } from "../../../Utils/GalleryUtils";
-import { getErrorMessage, getErrorStack, handleError } from "../../../Common/ErrorHandlingUtils";
-import { traceFailure, traceStart, traceSuccess } from "../../../Shared/Telemetry/TelemetryProcessor";
-import { Action } from "../../../Shared/Telemetry/TelemetryConstants";
 
 export interface NotebookViewerComponentProps {
   container?: Explorer;
@@ -38,7 +38,6 @@ interface NotebookViewerComponentState {
   content: Notebook;
   galleryItem?: IGalleryItem;
   isFavorite?: boolean;
-  dialogProps: DialogProps;
   showProgressBar: boolean;
 }
 
@@ -70,7 +69,6 @@ export class NotebookViewerComponent
       content: undefined,
       galleryItem: props.galleryItem,
       isFavorite: props.isFavorite,
-      dialogProps: undefined,
       showProgressBar: true,
     };
 
@@ -166,8 +164,7 @@ export class NotebookViewerComponent
           hideInputs: this.props.hideInputs,
           hidePrompts: this.props.hidePrompts,
         })}
-
+        <Dialog />
-        {this.state.dialogProps && <Dialog {...this.state.dialogProps} />}
       </div>
     );
   }
@@ -193,7 +190,6 @@ export class NotebookViewerComponent
     };
   }
 
-  // DialogHost
   showOkModalDialog(
     title: string,
     msg: string,
@@ -201,25 +197,21 @@ export class NotebookViewerComponent
     onOk: () => void,
     progressIndicatorProps?: IProgressIndicatorProps
   ): void {
-    this.setState({
+    useDialog.getState().openDialog({
-      dialogProps: {
       isModal: true,
-        visible: true,
       title,
       subText: msg,
       primaryButtonText: okLabel,
       onPrimaryButtonClick: () => {
-          this.setState({ dialogProps: undefined });
+        useDialog.getState().closeDialog();
         onOk && onOk();
       },
       secondaryButtonText: undefined,
       onSecondaryButtonClick: undefined,
       progressIndicatorProps,
-      },
     });
   }
 
-  // DialogHost
   showOkCancelModalDialog(
     title: string,
     msg: string,
@@ -232,27 +224,24 @@ export class NotebookViewerComponent
     textFieldProps?: TextFieldProps,
     primaryButtonDisabled?: boolean
   ): void {
-    this.setState({
+    useDialog.getState().openDialog({
-      dialogProps: {
       isModal: true,
-        visible: true,
       title,
       subText: msg,
       primaryButtonText: okLabel,
       secondaryButtonText: cancelLabel,
       onPrimaryButtonClick: () => {
-          this.setState({ dialogProps: undefined });
+        useDialog.getState().closeDialog();
         onOk && onOk();
       },
       onSecondaryButtonClick: () => {
-          this.setState({ dialogProps: undefined });
+        useDialog.getState().closeDialog();
         onCancel && onCancel();
       },
       progressIndicatorProps,
       choiceGroupProps,
       textFieldProps,
       primaryButtonDisabled,
-      },
     });
   }
 

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

@@ -28,8 +28,6 @@ exports[`SettingsComponent renders 1`] = `
               "changeFeedPolicy": [Function],
               "conflictResolutionPolicy": [Function],
               "container": Explorer {
-                "_closeModalDialog": [Function],
-                "_closeSynapseLinkModalDialog": [Function],
                 "_isAfecFeatureRegistered": [Function],
                 "_isInitializingNotebooks": false,
                 "_refreshSparkEnabledStateForAccount": [Function],
@@ -38,7 +36,6 @@ exports[`SettingsComponent renders 1`] = `
                 "arcadiaToken": [Function],
                 "canExceedMaximumValue": [Function],
                 "canSaveQueries": [Function],
-                "closeDialog": undefined,
                 "closeSidePanel": undefined,
                 "collapsedResourceTreeWidth": 36,
                 "collectionCreationDefaults": Object {
@@ -855,7 +852,6 @@ exports[`SettingsComponent renders 1`] = `
                 "onGitHubClientError": [Function],
                 "onRefreshDatabasesKeyPress": [Function],
                 "onRefreshResourcesClick": [Function],
-                "openDialog": undefined,
                 "openSidePanel": undefined,
                 "provideFeedbackEmail": [Function],
                 "queriesClient": QueriesClient {
@@ -923,8 +919,6 @@ exports[`SettingsComponent renders 1`] = `
           }
           container={
             Explorer {
-              "_closeModalDialog": [Function],
-              "_closeSynapseLinkModalDialog": [Function],
               "_isAfecFeatureRegistered": [Function],
               "_isInitializingNotebooks": false,
               "_refreshSparkEnabledStateForAccount": [Function],
@@ -933,7 +927,6 @@ exports[`SettingsComponent renders 1`] = `
               "arcadiaToken": [Function],
               "canExceedMaximumValue": [Function],
               "canSaveQueries": [Function],
-              "closeDialog": undefined,
               "closeSidePanel": undefined,
               "collapsedResourceTreeWidth": 36,
               "collectionCreationDefaults": Object {
@@ -1750,7 +1743,6 @@ exports[`SettingsComponent renders 1`] = `
               "onGitHubClientError": [Function],
               "onRefreshDatabasesKeyPress": [Function],
               "onRefreshResourcesClick": [Function],
-              "openDialog": undefined,
               "openSidePanel": undefined,
               "provideFeedbackEmail": [Function],
               "queriesClient": QueriesClient {
@@ -1831,8 +1823,6 @@ exports[`SettingsComponent renders 1`] = `
               "changeFeedPolicy": [Function],
               "conflictResolutionPolicy": [Function],
               "container": Explorer {
-                "_closeModalDialog": [Function],
-                "_closeSynapseLinkModalDialog": [Function],
                 "_isAfecFeatureRegistered": [Function],
                 "_isInitializingNotebooks": false,
                 "_refreshSparkEnabledStateForAccount": [Function],
@@ -1841,7 +1831,6 @@ exports[`SettingsComponent renders 1`] = `
                 "arcadiaToken": [Function],
                 "canExceedMaximumValue": [Function],
                 "canSaveQueries": [Function],
-                "closeDialog": undefined,
                 "closeSidePanel": undefined,
                 "collapsedResourceTreeWidth": 36,
                 "collectionCreationDefaults": Object {
@@ -2658,7 +2647,6 @@ exports[`SettingsComponent renders 1`] = `
                 "onGitHubClientError": [Function],
                 "onRefreshDatabasesKeyPress": [Function],
                 "onRefreshResourcesClick": [Function],
-                "openDialog": undefined,
                 "openSidePanel": undefined,
                 "provideFeedbackEmail": [Function],
                 "queriesClient": QueriesClient {
@@ -2726,8 +2714,6 @@ exports[`SettingsComponent renders 1`] = `
           }
           container={
             Explorer {
-              "_closeModalDialog": [Function],
-              "_closeSynapseLinkModalDialog": [Function],
               "_isAfecFeatureRegistered": [Function],
               "_isInitializingNotebooks": false,
               "_refreshSparkEnabledStateForAccount": [Function],
@@ -2736,7 +2722,6 @@ exports[`SettingsComponent renders 1`] = `
               "arcadiaToken": [Function],
               "canExceedMaximumValue": [Function],
               "canSaveQueries": [Function],
-              "closeDialog": undefined,
               "closeSidePanel": undefined,
               "collapsedResourceTreeWidth": 36,
               "collectionCreationDefaults": Object {
@@ -3553,7 +3538,6 @@ exports[`SettingsComponent renders 1`] = `
               "onGitHubClientError": [Function],
               "onRefreshDatabasesKeyPress": [Function],
               "onRefreshResourcesClick": [Function],
-              "openDialog": undefined,
               "openSidePanel": undefined,
               "provideFeedbackEmail": [Function],
               "queriesClient": QueriesClient {

src/Explorer/Explorer.tsx

@@ -41,7 +41,7 @@ import { logConsoleError, logConsoleInfo, logConsoleProgress } from "../Utils/No
 import * as ComponentRegisterer from "./ComponentRegisterer";
 import { ArcadiaWorkspaceItem } from "./Controls/Arcadia/ArcadiaMenuPicker";
 import { CommandButtonComponentProps } from "./Controls/CommandButton/CommandButtonComponent";
-import { DialogProps, TextFieldProps } from "./Controls/Dialog";
+import { DialogProps, TextFieldProps, useDialog } from "./Controls/Dialog";
 import { GalleryTab as GalleryTabKind } from "./Controls/NotebookGallery/GalleryViewerComponent";
 import { CommandBarComponentAdapter } from "./Menus/CommandBar/CommandBarComponentAdapter";
 import { ConsoleData } from "./Menus/NotificationConsole/NotificationConsoleComponent";
@@ -93,8 +93,6 @@ export interface ExplorerParams {
   setInProgressConsoleDataIdToBeDeleted: (id: string) => void;
   openSidePanel: (headerText: string, panelContent: JSX.Element, onClose?: () => void) => void;
   closeSidePanel: () => void;
-  closeDialog: () => void;
-  openDialog: (props: DialogProps) => void;
   tabsManager: TabsManager;
 }
 
@@ -173,8 +171,6 @@ export default class Explorer {
   public isSynapseLinkUpdating: ko.Observable<boolean>;
   public memoryUsageInfo: ko.Observable<DataModels.MemoryUsageInfo>;
   public notebookManager?: NotebookManager;
-  public openDialog: ExplorerParams["openDialog"];
-  public closeDialog: ExplorerParams["closeDialog"];
 
   public isShellEnabled: ko.Observable<boolean>;
 
@@ -199,8 +195,6 @@ export default class Explorer {
     this.setInProgressConsoleDataIdToBeDeleted = params?.setInProgressConsoleDataIdToBeDeleted;
     this.openSidePanel = params?.openSidePanel;
     this.closeSidePanel = params?.closeSidePanel;
-    this.closeDialog = params?.closeDialog;
-    this.openDialog = params?.openDialog;
 
     const startKey: number = TelemetryProcessor.traceStart(Action.InitializeDataExplorer, {
       dataExplorerArea: Constants.Areas.ResourceTree,
@@ -569,7 +563,6 @@ export default class Explorer {
         linkUrl: "https://aka.ms/cosmosdb-synapselink",
       },
       isModal: true,
-      visible: true,
       title: `Enable Azure Synapse Link on your Cosmos DB account`,
       subText: `Enable Azure Synapse Link to perform near real time analytical analytics on this account, without impacting the performance of your transactional workloads.
       Azure Synapse Link brings together Cosmos Db Analytical Store and Synapse Analytics`,
@@ -582,7 +575,7 @@ export default class Explorer {
           "Enabling Azure Synapse Link for this account. This may take a few minutes before you can enable analytical store for this account."
         );
         this.isSynapseLinkUpdating(true);
-        this._closeSynapseLinkModalDialog();
+        useDialog.getState().closeDialog();
 
         const resourceProviderClient = new ResourceProviderClientFactory().getOrCreate(userContext.databaseAccount.id);
 
@@ -610,11 +603,11 @@ export default class Explorer {
       },
 
       onSecondaryButtonClick: () => {
-        this._closeSynapseLinkModalDialog();
+        useDialog.getState().closeDialog();
         TelemetryProcessor.traceCancel(Action.EnableAzureSynapseLink);
       },
     };
-    this.openDialog(addSynapseLinkDialogProps);
+    useDialog.getState().openDialog(addSynapseLinkDialogProps);
     TelemetryProcessor.traceStart(Action.EnableAzureSynapseLink);
 
     // TODO: return result
@@ -892,15 +885,14 @@ export default class Explorer {
 
     const resetConfirmationDialogProps: DialogProps = {
       isModal: true,
-      visible: true,
       title: "Reset Workspace",
       subText: "This lets you keep your notebook files and the workspace will be restored to default. Proceed anyway?",
       primaryButtonText: "OK",
       secondaryButtonText: "Cancel",
       onPrimaryButtonClick: this._resetNotebookWorkspace,
-      onSecondaryButtonClick: this._closeModalDialog,
+      onSecondaryButtonClick: () => useDialog.getState().closeDialog(),
     };
-    this.openDialog(resetConfirmationDialogProps);
+    useDialog.getState().openDialog(resetConfirmationDialogProps);
   }
 
   private async _containsDefaultNotebookWorkspace(databaseAccount: DataModels.DatabaseAccount): Promise<boolean> {
@@ -945,7 +937,7 @@ export default class Explorer {
   }
 
   private _resetNotebookWorkspace = async () => {
-    this._closeModalDialog();
+    useDialog.getState().closeDialog();
     const clearInProgressMessage = logConsoleProgress("Resetting notebook workspace");
     try {
       await this.notebookManager?.notebookClient.resetWorkspace();
@@ -963,14 +955,6 @@ export default class Explorer {
     }
   };
 
-  private _closeModalDialog = () => {
-    this.closeDialog();
-  };
-
-  private _closeSynapseLinkModalDialog = () => {
-    this.closeDialog();
-  };
-
   public findSelectedDatabase(): ViewModels.Database {
     if (!this.selectedNode()) {
       return null;
@@ -1252,14 +1236,15 @@ export default class Explorer {
   }
 
   public showOkModalDialog(title: string, msg: string): void {
-    this.openDialog({
+    useDialog.getState().openDialog({
       isModal: true,
-      visible: true,
       title,
       subText: msg,
       primaryButtonText: "Close",
       secondaryButtonText: undefined,
-      onPrimaryButtonClick: this._closeModalDialog,
+      onPrimaryButtonClick: () => {
+        useDialog.getState().closeDialog();
+      },
       onSecondaryButtonClick: undefined,
     });
   }
@@ -1275,19 +1260,18 @@ export default class Explorer {
     textFieldProps?: TextFieldProps,
     isPrimaryButtonDisabled?: boolean
   ): void {
-    this.openDialog({
+    useDialog.getState().openDialog({
       isModal: true,
-      visible: true,
       title,
       subText: msg,
       primaryButtonText: okLabel,
       secondaryButtonText: cancelLabel,
       onPrimaryButtonClick: () => {
-        this._closeModalDialog();
+        useDialog.getState().closeDialog();
         onOk && onOk();
       },
       onSecondaryButtonClick: () => {
-        this._closeModalDialog();
+        useDialog.getState().closeDialog();
         onCancel && onCancel();
       },
       choiceGroupProps,
@@ -1605,14 +1589,13 @@ export default class Explorer {
     }
 
     if (item.type === NotebookContentItemType.Directory && item.children && item.children.length > 0) {
-      this.openDialog({
+      useDialog.getState().openDialog({
         isModal: true,
-        visible: true,
         title: "Unable to delete file",
         subText: "Directory is not empty.",
         primaryButtonText: "Close",
         secondaryButtonText: undefined,
-        onPrimaryButtonClick: this._closeModalDialog,
+        onPrimaryButtonClick: () => useDialog.getState().closeDialog(),
         onSecondaryButtonClick: undefined,
       });
       return Promise.reject();

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

@@ -17,8 +17,6 @@ exports[`GitHub Repos Panel should render Default properly 1`] = `
       addRepoProps={
         Object {
           "container": Explorer {
-            "_closeModalDialog": [Function],
-            "_closeSynapseLinkModalDialog": [Function],
             "_isAfecFeatureRegistered": [Function],
             "_isInitializingNotebooks": false,
             "_refreshSparkEnabledStateForAccount": [Function],
@@ -27,7 +25,6 @@ exports[`GitHub Repos Panel should render Default properly 1`] = `
             "arcadiaToken": [Function],
             "canExceedMaximumValue": [Function],
             "canSaveQueries": [Function],
-            "closeDialog": undefined,
             "closeSidePanel": undefined,
             "collapsedResourceTreeWidth": 36,
             "collectionCreationDefaults": Object {
@@ -844,7 +841,6 @@ exports[`GitHub Repos Panel should render Default properly 1`] = `
             "onGitHubClientError": [Function],
             "onRefreshDatabasesKeyPress": [Function],
             "onRefreshResourcesClick": [Function],
-            "openDialog": undefined,
             "openSidePanel": undefined,
             "provideFeedbackEmail": [Function],
             "queriesClient": QueriesClient {

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

@@ -7,8 +7,6 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
   errorMessage="Could not create directory "
   explorer={
     Explorer {
-      "_closeModalDialog": [Function],
-      "_closeSynapseLinkModalDialog": [Function],
       "_isAfecFeatureRegistered": [Function],
       "_isInitializingNotebooks": false,
       "_refreshSparkEnabledStateForAccount": [Function],
@@ -17,7 +15,6 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
       "arcadiaToken": [Function],
       "canExceedMaximumValue": [Function],
       "canSaveQueries": [Function],
-      "closeDialog": undefined,
       "closeSidePanel": undefined,
       "collapsedResourceTreeWidth": 36,
       "collectionCreationDefaults": Object {
@@ -834,7 +831,6 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
       "onGitHubClientError": [Function],
       "onRefreshDatabasesKeyPress": [Function],
       "onRefreshResourcesClick": [Function],
-      "openDialog": undefined,
       "openSidePanel": undefined,
       "provideFeedbackEmail": [Function],
       "queriesClient": QueriesClient {

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

@@ -5,8 +5,6 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
   closePanel={[Function]}
   explorer={
     Explorer {
-      "_closeModalDialog": [Function],
-      "_closeSynapseLinkModalDialog": [Function],
       "_isAfecFeatureRegistered": [Function],
       "_isInitializingNotebooks": false,
       "_refreshSparkEnabledStateForAccount": [Function],
@@ -15,7 +13,6 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
       "arcadiaToken": [Function],
       "canExceedMaximumValue": [Function],
       "canSaveQueries": [Function],
-      "closeDialog": undefined,
       "closeSidePanel": undefined,
       "collapsedResourceTreeWidth": 36,
       "collectionCreationDefaults": Object {
@@ -835,7 +832,6 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
       "onGitHubClientError": [Function],
       "onRefreshDatabasesKeyPress": [Function],
       "onRefreshResourcesClick": [Function],
-      "openDialog": undefined,
       "openSidePanel": undefined,
       "provideFeedbackEmail": [Function],
       "queriesClient": QueriesClient {

src/Main.tsx

@@ -30,7 +30,7 @@ import "../less/tree.less";
 import { AuthType } from "./AuthType";
 import "./Explorer/Controls/Accordion/AccordionComponent.less";
 import "./Explorer/Controls/CollapsiblePanel/CollapsiblePanelComponent.less";
-import { Dialog, DialogProps } from "./Explorer/Controls/Dialog";
+import { Dialog } from "./Explorer/Controls/Dialog";
 import "./Explorer/Controls/DynamicList/DynamicListComponent.less";
 import "./Explorer/Controls/ErrorDisplayComponent/ErrorDisplayComponent.less";
 import "./Explorer/Controls/JsonEditor/JsonEditorComponent.less";
@@ -64,17 +64,6 @@ const App: React.FunctionComponent = () => {
   //TODO: Refactor so we don't need to pass the id to remove a console data
   const [inProgressConsoleDataIdToBeDeleted, setInProgressConsoleDataIdToBeDeleted] = useState("");
 
-  const [dialogProps, setDialogProps] = useState<DialogProps>();
-  const [showDialog, setShowDialog] = useState<boolean>(false);
-
-  const openDialog = (props: DialogProps) => {
-    setDialogProps(props);
-    setShowDialog(true);
-  };
-  const closeDialog = () => {
-    setShowDialog(false);
-  };
-
   const { isPanelOpen, panelContent, headerText, openSidePanel, closeSidePanel } = useSidePanel();
   const { tabs, activeTab, tabsManager } = useTabs();
 
@@ -84,8 +73,6 @@ const App: React.FunctionComponent = () => {
     setInProgressConsoleDataIdToBeDeleted,
     openSidePanel,
     closeSidePanel,
-    openDialog,
-    closeDialog,
     tabsManager,
   };
 
@@ -226,7 +213,7 @@ const App: React.FunctionComponent = () => {
         closePanel={closeSidePanel}
         isConsoleExpanded={isNotificationConsoleExpanded}
       />
-      {showDialog && <Dialog {...dialogProps} />}
+      <Dialog />
     </div>
   );
 };