From 6c90ef2e626f6a3eba7a221d7c22a8bcd03eb087 Mon Sep 17 00:00:00 2001 From: Steve Faulkner Date: Wed, 24 Feb 2021 18:41:28 -0600 Subject: [PATCH] Remove Dialog Adapter (#446) --- .../DialogComponent.tsx => Dialog.tsx} | 8 +-- .../DialogComponentAdapter.tsx | 16 ------ .../GalleryViewerComponent.tsx | 4 +- .../NotebookViewerComponent.tsx | 4 +- .../SettingsComponent.test.tsx.snap | 40 +++---------- src/Explorer/Explorer.tsx | 56 +++++-------------- src/Explorer/Notebook/NotebookManager.ts | 6 +- src/Main.tsx | 18 +++++- src/Utils/GalleryUtils.ts | 2 +- 9 files changed, 48 insertions(+), 106 deletions(-) rename src/Explorer/Controls/{DialogReactComponent/DialogComponent.tsx => Dialog.tsx} (93%) delete mode 100644 src/Explorer/Controls/DialogReactComponent/DialogComponentAdapter.tsx diff --git a/src/Explorer/Controls/DialogReactComponent/DialogComponent.tsx b/src/Explorer/Controls/Dialog.tsx similarity index 93% rename from src/Explorer/Controls/DialogReactComponent/DialogComponent.tsx rename to src/Explorer/Controls/Dialog.tsx index 961dc0b0c..3b69e45be 100644 --- a/src/Explorer/Controls/DialogReactComponent/DialogComponent.tsx +++ b/src/Explorer/Controls/Dialog.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import { Dialog, DialogType, DialogFooter, IDialogProps } from "office-ui-fabric-react/lib/Dialog"; +import { Dialog as FluentDialog, DialogType, DialogFooter, IDialogProps } from "office-ui-fabric-react/lib/Dialog"; import { IButtonProps, PrimaryButton, DefaultButton } from "office-ui-fabric-react/lib/Button"; import { ITextFieldProps, TextField } from "office-ui-fabric-react/lib/TextField"; import { Link } from "office-ui-fabric-react/lib/Link"; @@ -50,7 +50,7 @@ const DIALOG_TITLE_FONT_SIZE = "17px"; const DIALOG_TITLE_FONT_WEIGHT = 400; const DIALOG_SUBTEXT_FONT_SIZE = "15px"; -export class DialogComponent extends React.Component { +export class Dialog extends React.Component { constructor(props: DialogProps) { super(props); } @@ -91,7 +91,7 @@ export class DialogComponent extends React.Component { : undefined; return ( - + {choiceGroupProps && } {textFieldProps && } {linkProps && ( @@ -104,7 +104,7 @@ export class DialogComponent extends React.Component { {secondaryButtonProps && } - + ); } } diff --git a/src/Explorer/Controls/DialogReactComponent/DialogComponentAdapter.tsx b/src/Explorer/Controls/DialogReactComponent/DialogComponentAdapter.tsx deleted file mode 100644 index 8e1db3b10..000000000 --- a/src/Explorer/Controls/DialogReactComponent/DialogComponentAdapter.tsx +++ /dev/null @@ -1,16 +0,0 @@ -/** - * This adapter is responsible to render the Dialog React component - * If the component signals a change through the callback passed in the properties, it must render the React component when appropriate - * and update any knockout observables passed from the parent. - */ -import * as React from "react"; -import { DialogComponent, DialogProps } from "./DialogComponent"; -import { ReactAdapter } from "../../../Bindings/ReactBindingHandler"; - -export class DialogComponentAdapter implements ReactAdapter { - public parameters: ko.Observable; - - public renderComponent(): JSX.Element { - return ; - } -} diff --git a/src/Explorer/Controls/NotebookGallery/GalleryViewerComponent.tsx b/src/Explorer/Controls/NotebookGallery/GalleryViewerComponent.tsx index 4fe41075f..67e59b3d2 100644 --- a/src/Explorer/Controls/NotebookGallery/GalleryViewerComponent.tsx +++ b/src/Explorer/Controls/NotebookGallery/GalleryViewerComponent.tsx @@ -23,7 +23,7 @@ import { import * as React from "react"; import { IGalleryItem, IJunoResponse, IPublicGalleryData, JunoClient } from "../../../Juno/JunoClient"; import * as GalleryUtils from "../../../Utils/GalleryUtils"; -import { DialogComponent, DialogProps } from "../DialogReactComponent/DialogComponent"; +import { Dialog, DialogProps } from "../Dialog"; import { GalleryCardComponent, GalleryCardComponentProps } from "./Cards/GalleryCardComponent"; import "./GalleryViewerComponent.less"; import { HttpStatusCodes } from "../../../Common/Constants"; @@ -196,7 +196,7 @@ export class GalleryViewerComponent extends React.Component {pivotItems} - {this.state.dialogProps && } + {this.state.dialogProps && } ); } diff --git a/src/Explorer/Controls/NotebookViewer/NotebookViewerComponent.tsx b/src/Explorer/Controls/NotebookViewer/NotebookViewerComponent.tsx index 5a49b9952..d98dd2cef 100644 --- a/src/Explorer/Controls/NotebookViewer/NotebookViewerComponent.tsx +++ b/src/Explorer/Controls/NotebookViewer/NotebookViewerComponent.tsx @@ -11,7 +11,7 @@ import * as GalleryUtils from "../../../Utils/GalleryUtils"; import { NotebookClientV2 } from "../../Notebook/NotebookClientV2"; import { NotebookComponentBootstrapper } from "../../Notebook/NotebookComponent/NotebookComponentBootstrapper"; import NotebookReadOnlyRenderer from "../../Notebook/NotebookRenderer/NotebookReadOnlyRenderer"; -import { DialogComponent, DialogProps, TextFieldProps } from "../DialogReactComponent/DialogComponent"; +import { Dialog, DialogProps, TextFieldProps } from "../Dialog"; import { NotebookMetadataComponent } from "./NotebookMetadataComponent"; import "./NotebookViewerComponent.less"; import Explorer from "../../Explorer"; @@ -179,7 +179,7 @@ export class NotebookViewerComponent hidePrompts: this.props.hidePrompts, })} - {this.state.dialogProps && } + {this.state.dialogProps && } ); } diff --git a/src/Explorer/Controls/Settings/__snapshots__/SettingsComponent.test.tsx.snap b/src/Explorer/Controls/Settings/__snapshots__/SettingsComponent.test.tsx.snap index d3328ca3c..18471bb82 100644 --- a/src/Explorer/Controls/Settings/__snapshots__/SettingsComponent.test.tsx.snap +++ b/src/Explorer/Controls/Settings/__snapshots__/SettingsComponent.test.tsx.snap @@ -28,10 +28,8 @@ exports[`SettingsComponent renders 1`] = ` "changeFeedPolicy": [Function], "conflictResolutionPolicy": [Function], "container": Explorer { - "_addSynapseLinkDialogProps": [Function], "_closeModalDialog": [Function], "_closeSynapseLinkModalDialog": [Function], - "_dialogProps": [Function], "_isAfecFeatureRegistered": [Function], "_isInitializingNotebooks": false, "_isSystemDatabasePredicate": [Function], @@ -677,9 +675,6 @@ exports[`SettingsComponent renders 1`] = ` "visible": [Function], }, "addDatabaseText": [Function], - "addSynapseLinkDialog": DialogComponentAdapter { - "parameters": [Function], - }, "addTableEntityPane": AddTableEntityPane { "addButtonLabel": "Add Property", "attributeNameLabel": "Property Name", @@ -786,6 +781,7 @@ exports[`SettingsComponent renders 1`] = ` }, "clickHostedAccountSwitch": [Function], "clickHostedDirectorySwitch": [Function], + "closeDialog": undefined, "closeSidePanel": undefined, "collapsedResourceTreeWidth": 36, "collectionCreationDefaults": Object { @@ -841,9 +837,6 @@ exports[`SettingsComponent renders 1`] = ` "visible": [Function], }, "deleteDatabaseText": [Function], - "dialogComponentAdapter": DialogComponentAdapter { - "parameters": [Function], - }, "editTableEntityPane": EditTableEntityPane { "addButtonLabel": "Add Property", "attributeNameLabel": "Property Name", @@ -1004,6 +997,7 @@ exports[`SettingsComponent renders 1`] = ` "onRefreshResourcesClick": [Function], "onSwitchToConnectionString": [Function], "onToggleKeyDown": [Function], + "openDialog": undefined, "openSidePanel": undefined, "provideFeedbackEmail": [Function], "queriesClient": QueriesClient { @@ -1267,10 +1261,8 @@ exports[`SettingsComponent renders 1`] = ` } container={ Explorer { - "_addSynapseLinkDialogProps": [Function], "_closeModalDialog": [Function], "_closeSynapseLinkModalDialog": [Function], - "_dialogProps": [Function], "_isAfecFeatureRegistered": [Function], "_isInitializingNotebooks": false, "_isSystemDatabasePredicate": [Function], @@ -1916,9 +1908,6 @@ exports[`SettingsComponent renders 1`] = ` "visible": [Function], }, "addDatabaseText": [Function], - "addSynapseLinkDialog": DialogComponentAdapter { - "parameters": [Function], - }, "addTableEntityPane": AddTableEntityPane { "addButtonLabel": "Add Property", "attributeNameLabel": "Property Name", @@ -2025,6 +2014,7 @@ exports[`SettingsComponent renders 1`] = ` }, "clickHostedAccountSwitch": [Function], "clickHostedDirectorySwitch": [Function], + "closeDialog": undefined, "closeSidePanel": undefined, "collapsedResourceTreeWidth": 36, "collectionCreationDefaults": Object { @@ -2080,9 +2070,6 @@ exports[`SettingsComponent renders 1`] = ` "visible": [Function], }, "deleteDatabaseText": [Function], - "dialogComponentAdapter": DialogComponentAdapter { - "parameters": [Function], - }, "editTableEntityPane": EditTableEntityPane { "addButtonLabel": "Add Property", "attributeNameLabel": "Property Name", @@ -2243,6 +2230,7 @@ exports[`SettingsComponent renders 1`] = ` "onRefreshResourcesClick": [Function], "onSwitchToConnectionString": [Function], "onToggleKeyDown": [Function], + "openDialog": undefined, "openSidePanel": undefined, "provideFeedbackEmail": [Function], "queriesClient": QueriesClient { @@ -2519,10 +2507,8 @@ exports[`SettingsComponent renders 1`] = ` "changeFeedPolicy": [Function], "conflictResolutionPolicy": [Function], "container": Explorer { - "_addSynapseLinkDialogProps": [Function], "_closeModalDialog": [Function], "_closeSynapseLinkModalDialog": [Function], - "_dialogProps": [Function], "_isAfecFeatureRegistered": [Function], "_isInitializingNotebooks": false, "_isSystemDatabasePredicate": [Function], @@ -3168,9 +3154,6 @@ exports[`SettingsComponent renders 1`] = ` "visible": [Function], }, "addDatabaseText": [Function], - "addSynapseLinkDialog": DialogComponentAdapter { - "parameters": [Function], - }, "addTableEntityPane": AddTableEntityPane { "addButtonLabel": "Add Property", "attributeNameLabel": "Property Name", @@ -3277,6 +3260,7 @@ exports[`SettingsComponent renders 1`] = ` }, "clickHostedAccountSwitch": [Function], "clickHostedDirectorySwitch": [Function], + "closeDialog": undefined, "closeSidePanel": undefined, "collapsedResourceTreeWidth": 36, "collectionCreationDefaults": Object { @@ -3332,9 +3316,6 @@ exports[`SettingsComponent renders 1`] = ` "visible": [Function], }, "deleteDatabaseText": [Function], - "dialogComponentAdapter": DialogComponentAdapter { - "parameters": [Function], - }, "editTableEntityPane": EditTableEntityPane { "addButtonLabel": "Add Property", "attributeNameLabel": "Property Name", @@ -3495,6 +3476,7 @@ exports[`SettingsComponent renders 1`] = ` "onRefreshResourcesClick": [Function], "onSwitchToConnectionString": [Function], "onToggleKeyDown": [Function], + "openDialog": undefined, "openSidePanel": undefined, "provideFeedbackEmail": [Function], "queriesClient": QueriesClient { @@ -3758,10 +3740,8 @@ exports[`SettingsComponent renders 1`] = ` } container={ Explorer { - "_addSynapseLinkDialogProps": [Function], "_closeModalDialog": [Function], "_closeSynapseLinkModalDialog": [Function], - "_dialogProps": [Function], "_isAfecFeatureRegistered": [Function], "_isInitializingNotebooks": false, "_isSystemDatabasePredicate": [Function], @@ -4407,9 +4387,6 @@ exports[`SettingsComponent renders 1`] = ` "visible": [Function], }, "addDatabaseText": [Function], - "addSynapseLinkDialog": DialogComponentAdapter { - "parameters": [Function], - }, "addTableEntityPane": AddTableEntityPane { "addButtonLabel": "Add Property", "attributeNameLabel": "Property Name", @@ -4516,6 +4493,7 @@ exports[`SettingsComponent renders 1`] = ` }, "clickHostedAccountSwitch": [Function], "clickHostedDirectorySwitch": [Function], + "closeDialog": undefined, "closeSidePanel": undefined, "collapsedResourceTreeWidth": 36, "collectionCreationDefaults": Object { @@ -4571,9 +4549,6 @@ exports[`SettingsComponent renders 1`] = ` "visible": [Function], }, "deleteDatabaseText": [Function], - "dialogComponentAdapter": DialogComponentAdapter { - "parameters": [Function], - }, "editTableEntityPane": EditTableEntityPane { "addButtonLabel": "Add Property", "attributeNameLabel": "Property Name", @@ -4734,6 +4709,7 @@ exports[`SettingsComponent renders 1`] = ` "onRefreshResourcesClick": [Function], "onSwitchToConnectionString": [Function], "onToggleKeyDown": [Function], + "openDialog": undefined, "openSidePanel": undefined, "provideFeedbackEmail": [Function], "queriesClient": QueriesClient { diff --git a/src/Explorer/Explorer.tsx b/src/Explorer/Explorer.tsx index 2e21a2e25..371f21307 100644 --- a/src/Explorer/Explorer.tsx +++ b/src/Explorer/Explorer.tsx @@ -40,8 +40,7 @@ import { configContext, Platform, updateConfigContext } from "../ConfigContext"; import { ConsoleData, ConsoleDataType } from "./Menus/NotificationConsole/NotificationConsoleComponent"; import { decryptJWTToken, getAuthorizationHeader } from "../Utils/AuthorizationUtils"; import { DefaultExperienceUtility } from "../Shared/DefaultExperienceUtility"; -import { DialogComponentAdapter } from "./Controls/DialogReactComponent/DialogComponentAdapter"; -import { DialogProps, TextFieldProps } from "./Controls/DialogReactComponent/DialogComponent"; +import { DialogProps, TextFieldProps } from "./Controls/Dialog"; import { ExecuteSprocParamsPane } from "./Panes/ExecuteSprocParamsPane"; import { ExplorerMetrics } from "../Common/Constants"; import { ExplorerSettings } from "../Shared/ExplorerSettings"; @@ -111,6 +110,8 @@ export interface ExplorerParams { setInProgressConsoleDataIdToBeDeleted: (id: string) => void; openSidePanel: (headerText: string, panelContent: JSX.Element) => void; closeSidePanel: () => void; + closeDialog: () => void; + openDialog: (props: DialogProps) => void; } export default class Explorer { @@ -250,6 +251,8 @@ export default class Explorer { public isSynapseLinkUpdating: ko.Observable; public memoryUsageInfo: ko.Observable; public notebookManager?: any; // This is dynamically loaded + public openDialog: ExplorerParams["openDialog"]; + public closeDialog: ExplorerParams["closeDialog"]; private _panes: ContextualPaneBase[] = []; private _isSystemDatabasePredicate: (database: ViewModels.Database) => boolean = (database) => false; @@ -263,10 +266,6 @@ export default class Explorer { // React adapters private commandBarComponentAdapter: CommandBarComponentAdapter; - private dialogComponentAdapter: DialogComponentAdapter; - private _dialogProps: ko.Observable; - private addSynapseLinkDialog: DialogComponentAdapter; - private _addSynapseLinkDialogProps: ko.Observable; private selfServeLoadingComponentAdapter: SelfServeLoadingComponentAdapter; private static readonly MaxNbDatabasesToAutoExpand = 5; @@ -277,6 +276,8 @@ 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, @@ -905,7 +906,6 @@ export default class Explorer { this.notebookManager = new notebookManagerModule.default(); this.notebookManager.initialize({ container: this, - dialogProps: this._dialogProps, notebookBasePath: this.notebookBasePath, resourceTree: this.resourceTree, refreshCommandBarButtons: () => this.refreshCommandBarButtons(), @@ -973,32 +973,7 @@ export default class Explorer { featureSubcription.dispose(); }); - this._dialogProps = ko.observable({ - isModal: false, - visible: false, - title: undefined, - subText: undefined, - primaryButtonText: undefined, - secondaryButtonText: undefined, - onPrimaryButtonClick: undefined, - onSecondaryButtonClick: undefined, - }); - this.dialogComponentAdapter = new DialogComponentAdapter(); - this.dialogComponentAdapter.parameters = this._dialogProps; this.mostRecentActivity = new MostRecentActivity.MostRecentActivity(this); - - this._addSynapseLinkDialogProps = ko.observable({ - isModal: false, - visible: false, - title: undefined, - subText: undefined, - primaryButtonText: undefined, - secondaryButtonText: undefined, - onPrimaryButtonClick: undefined, - onSecondaryButtonClick: undefined, - }); - this.addSynapseLinkDialog = new DialogComponentAdapter(); - this.addSynapseLinkDialog.parameters = this._addSynapseLinkDialogProps; } public openEnableSynapseLinkDialog(): void { @@ -1060,7 +1035,7 @@ export default class Explorer { TelemetryProcessor.traceCancel(Action.EnableAzureSynapseLink); }, }; - this._addSynapseLinkDialogProps(addSynapseLinkDialogProps); + this.openDialog(addSynapseLinkDialogProps); TelemetryProcessor.traceStart(Action.EnableAzureSynapseLink); // TODO: return result @@ -1496,6 +1471,7 @@ export default class Explorer { ); return; } + const resetConfirmationDialogProps: DialogProps = { isModal: true, visible: true, @@ -1506,7 +1482,7 @@ export default class Explorer { onPrimaryButtonClick: this._resetNotebookWorkspace, onSecondaryButtonClick: this._closeModalDialog, }; - this._dialogProps(resetConfirmationDialogProps); + this.openDialog(resetConfirmationDialogProps); } private async _containsDefaultNotebookWorkspace(databaseAccount: DataModels.DatabaseAccount): Promise { @@ -1570,13 +1546,11 @@ export default class Explorer { }; private _closeModalDialog = () => { - this._dialogProps().visible = false; - this._dialogProps.valueHasMutated(); + this.closeDialog(); }; private _closeSynapseLinkModalDialog = () => { - this._addSynapseLinkDialogProps().visible = false; - this._addSynapseLinkDialogProps.valueHasMutated(); + this.closeDialog(); }; public findSelectedDatabase(): ViewModels.Database { @@ -2080,7 +2054,7 @@ export default class Explorer { } public showOkModalDialog(title: string, msg: string): void { - this._dialogProps({ + this.openDialog({ isModal: true, visible: true, title, @@ -2103,7 +2077,7 @@ export default class Explorer { textFieldProps?: TextFieldProps, isPrimaryButtonDisabled?: boolean ): void { - this._dialogProps({ + this.openDialog({ isModal: true, visible: true, title, @@ -2437,7 +2411,7 @@ export default class Explorer { } if (item.type === NotebookContentItemType.Directory && item.children && item.children.length > 0) { - this._dialogProps({ + this.openDialog({ isModal: true, visible: true, title: "Unable to delete file", diff --git a/src/Explorer/Notebook/NotebookManager.ts b/src/Explorer/Notebook/NotebookManager.ts index 39aae9943..ce482d9ef 100644 --- a/src/Explorer/Notebook/NotebookManager.ts +++ b/src/Explorer/Notebook/NotebookManager.ts @@ -18,7 +18,6 @@ import { contents } from "rx-jupyter"; import { NotebookContainerClient } from "./NotebookContainerClient"; import { MemoryUsageInfo } from "../../Contracts/DataModels"; import { NotebookContentClient } from "./NotebookContentClient"; -import { DialogProps } from "../Controls/DialogReactComponent/DialogComponent"; import { ResourceTreeAdapter } from "../Tree/ResourceTreeAdapter"; import { PublishNotebookPaneAdapter } from "../Panes/PublishNotebookPaneAdapter"; import { getFullName } from "../../Utils/UserUtils"; @@ -31,7 +30,6 @@ import { getErrorMessage } from "../../Common/ErrorHandlingUtils"; export interface NotebookManagerOptions { container: Explorer; notebookBasePath: ko.Observable; - dialogProps: ko.Observable; resourceTree: ResourceTreeAdapter; refreshCommandBarButtons: () => void; refreshNotebookList: () => void; @@ -181,10 +179,8 @@ export default class NotebookManager { multiline: true, defaultValue: commitMsg, rows: 3, - onChange: (_, newValue: string) => { + onChange: (_: unknown, newValue: string) => { commitMsg = newValue; - this.params.dialogProps().primaryButtonDisabled = !commitMsg; - this.params.dialogProps.valueHasMutated(); }, }, !commitMsg diff --git a/src/Main.tsx b/src/Main.tsx index d424b90ab..316dcf3a8 100644 --- a/src/Main.tsx +++ b/src/Main.tsx @@ -69,6 +69,7 @@ import { useSidePanel } from "./hooks/useSidePanel"; import { NotificationConsoleComponent } from "./Explorer/Menus/NotificationConsole/NotificationConsoleComponent"; import { PanelContainerComponent } from "./Explorer/Panes/PanelContainerComponent"; import { SplashScreen } from "./Explorer/SplashScreen/SplashScreen"; +import { Dialog, DialogProps } from "./Explorer/Controls/Dialog"; initializeIcons(); @@ -78,6 +79,17 @@ 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(); + const [showDialog, setShowDialog] = useState(false); + + const openDialog = (props: DialogProps) => { + setDialogProps(props); + setShowDialog(true); + }; + const closeDialog = () => { + setShowDialog(false); + }; + const { isPanelOpen, panelContent, headerText, openSidePanel, closeSidePanel } = useSidePanel(); const explorerParams: ExplorerParams = { @@ -86,6 +98,8 @@ const App: React.FunctionComponent = () => { setInProgressConsoleDataIdToBeDeleted, openSidePanel, closeSidePanel, + openDialog, + closeDialog, }; const config = useConfig(); const explorer = useKnockoutExplorer(config?.platform, explorerParams); @@ -355,9 +369,7 @@ const App: React.FunctionComponent = () => {
- {/* Global access token expiration dialog - End */} -
-
+ {showDialog && }
); }; diff --git a/src/Utils/GalleryUtils.ts b/src/Utils/GalleryUtils.ts index 95ed276d7..4a56c8900 100644 --- a/src/Utils/GalleryUtils.ts +++ b/src/Utils/GalleryUtils.ts @@ -8,7 +8,7 @@ import { } from "../Explorer/Controls/NotebookGallery/GalleryViewerComponent"; import Explorer from "../Explorer/Explorer"; import { IChoiceGroupOption, IChoiceGroupProps, IProgressIndicatorProps } from "office-ui-fabric-react"; -import { TextFieldProps } from "../Explorer/Controls/DialogReactComponent/DialogComponent"; +import { TextFieldProps } from "../Explorer/Controls/Dialog"; import { getErrorMessage, getErrorStack, handleError } from "../Common/ErrorHandlingUtils"; import { HttpStatusCodes } from "../Common/Constants"; import { trace, traceFailure, traceStart, traceSuccess } from "../Shared/Telemetry/TelemetryProcessor";