Move <Dialog/> state to zustand (#806)
This commit is contained in:
parent
4351af986e
commit
42cf814700
|
@ -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,24 +70,26 @@ const DIALOG_TITLE_FONT_SIZE = "17px";
|
|||
const DIALOG_TITLE_FONT_WEIGHT = 400;
|
||||
const DIALOG_SUBTEXT_FONT_SIZE = "15px";
|
||||
|
||||
export const Dialog: FunctionComponent<DialogProps> = ({
|
||||
title,
|
||||
subText,
|
||||
isModal,
|
||||
visible,
|
||||
choiceGroupProps,
|
||||
textFieldProps,
|
||||
linkProps,
|
||||
progressIndicatorProps,
|
||||
primaryButtonText,
|
||||
secondaryButtonText,
|
||||
onPrimaryButtonClick,
|
||||
onSecondaryButtonClick,
|
||||
primaryButtonDisabled,
|
||||
type,
|
||||
showCloseButton,
|
||||
onDismiss,
|
||||
}: DialogProps) => {
|
||||
export const Dialog: FC = () => {
|
||||
const { visible, dialogProps: props } = useDialog();
|
||||
const {
|
||||
title,
|
||||
subText,
|
||||
isModal,
|
||||
choiceGroupProps,
|
||||
textFieldProps,
|
||||
linkProps,
|
||||
progressIndicatorProps,
|
||||
primaryButtonText,
|
||||
secondaryButtonText,
|
||||
onPrimaryButtonClick,
|
||||
onSecondaryButtonClick,
|
||||
primaryButtonDisabled,
|
||||
type,
|
||||
showCloseButton,
|
||||
onDismiss,
|
||||
} = 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>
|
||||
) : (
|
||||
<></>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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: {
|
||||
isModal: true,
|
||||
visible: true,
|
||||
title,
|
||||
subText: msg,
|
||||
primaryButtonText: okLabel,
|
||||
onPrimaryButtonClick: () => {
|
||||
this.setState({ dialogProps: undefined });
|
||||
onOk && onOk();
|
||||
},
|
||||
secondaryButtonText: undefined,
|
||||
onSecondaryButtonClick: undefined,
|
||||
progressIndicatorProps,
|
||||
useDialog.getState().openDialog({
|
||||
isModal: true,
|
||||
title,
|
||||
subText: msg,
|
||||
primaryButtonText: okLabel,
|
||||
onPrimaryButtonClick: () => {
|
||||
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: {
|
||||
isModal: true,
|
||||
visible: true,
|
||||
title,
|
||||
subText: msg,
|
||||
primaryButtonText: okLabel,
|
||||
secondaryButtonText: cancelLabel,
|
||||
onPrimaryButtonClick: () => {
|
||||
this.setState({ dialogProps: undefined });
|
||||
onOk && onOk();
|
||||
},
|
||||
onSecondaryButtonClick: () => {
|
||||
this.setState({ dialogProps: undefined });
|
||||
onCancel && onCancel();
|
||||
},
|
||||
progressIndicatorProps,
|
||||
choiceGroupProps,
|
||||
textFieldProps,
|
||||
primaryButtonDisabled,
|
||||
useDialog.getState().openDialog({
|
||||
isModal: true,
|
||||
title,
|
||||
subText: msg,
|
||||
primaryButtonText: okLabel,
|
||||
secondaryButtonText: cancelLabel,
|
||||
onPrimaryButtonClick: () => {
|
||||
useDialog.getState().closeDialog();
|
||||
onOk && onOk();
|
||||
},
|
||||
onSecondaryButtonClick: () => {
|
||||
useDialog.getState().closeDialog();
|
||||
onCancel && onCancel();
|
||||
},
|
||||
progressIndicatorProps,
|
||||
choiceGroupProps,
|
||||
textFieldProps,
|
||||
primaryButtonDisabled,
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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
17
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>
|
||||
);
|
||||
};
|
||||
|
|
Loading…
Reference in New Issue