random-mirrors
/
cosmos-explorer
mirror of https://github.com/Azure/cosmos-explorer.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

This commit is contained in:
Steve Faulkner 2021-05-20 09:54:26 -05:00 committed by GitHub
parent 4351af986e
commit 42cf814700
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 94 additions and 150 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/Explorer/Controls/Dialog.tsx
View File

@ -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>
) : (
<></>
);
};

5
src/Explorer/Controls/NotebookGallery/GalleryViewerComponent.tsx
View File

@ -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>
);
}

39
src/Explorer/Controls/NotebookViewer/NotebookViewerComponent.tsx
View File

@ -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,
})}
{this.state.dialogProps && <Dialog {...this.state.dialogProps} />}
<Dialog />
</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({
dialogProps: {
useDialog.getState().openDialog({
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({
dialogProps: {
useDialog.getState().openDialog({
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,
},
});
}

16
src/Explorer/Controls/Settings/__snapshots__/SettingsComponent.test.tsx.snap
View File

@ -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 {

49
src/Explorer/Explorer.tsx
View File

@ -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();

4
src/Explorer/Panes/GitHubReposPanel/__snapshots__/GitHubReposPanel.test.tsx.snap
View File

@ -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 {

4
src/Explorer/Panes/StringInputPane/__snapshots__/StringInputPane.test.tsx.snap
View File

@ -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 {

4
src/Explorer/Panes/__snapshots__/DeleteDatabaseConfirmationPanel.test.tsx.snap
View File

@ -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 {

17
src/Main.tsx
View File

@ -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>
);
};