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

Remove Dialog Adapter (#446)

This commit is contained in:
Steve Faulkner 2021-02-24 18:41:28 -06:00 committed by GitHub
parent 2d2d8b6efe
commit 6c90ef2e62
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 48 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/Explorer/Controls/DialogReactComponent/DialogComponent.tsx → src/Explorer/Controls/Dialog.tsx
View File

@ -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<DialogProps, {}> {
export class Dialog extends React.Component<DialogProps> {
constructor(props: DialogProps) {
super(props);
}
@ -91,7 +91,7 @@ export class DialogComponent extends React.Component<DialogProps, {}> {
: undefined;
return (
<Dialog {...dialogProps}>
<FluentDialog {...dialogProps}>
{choiceGroupProps && <ChoiceGroup {...choiceGroupProps} />}
{textFieldProps && <TextField {...textFieldProps} />}
{linkProps && (
@ -104,7 +104,7 @@ export class DialogComponent extends React.Component<DialogProps, {}> {
<PrimaryButton {...primaryButtonProps} />
{secondaryButtonProps && <DefaultButton {...secondaryButtonProps} />}
</DialogFooter>
</Dialog>
</FluentDialog>
);
}
}

16
src/Explorer/Controls/DialogReactComponent/DialogComponentAdapter.tsx
View File

@ -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<DialogProps>;
public renderComponent(): JSX.Element {
return <DialogComponent {...this.parameters()} />;
}
}

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

@ -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<GalleryViewerCompone
<div className="galleryContainer">
<Pivot {...pivotProps}>{pivotItems}</Pivot>
{this.state.dialogProps && <DialogComponent {...this.state.dialogProps} />}
{this.state.dialogProps && <Dialog {...this.state.dialogProps} />}
</div>
);
}

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

@ -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 && <DialogComponent {...this.state.dialogProps} />}
{this.state.dialogProps && <Dialog {...this.state.dialogProps} />}
</div>
);
}

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

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

56
src/Explorer/Explorer.tsx
View File

@ -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<boolean>;
public memoryUsageInfo: ko.Observable<DataModels.MemoryUsageInfo>;
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<DialogProps>;
private addSynapseLinkDialog: DialogComponentAdapter;
private _addSynapseLinkDialogProps: ko.Observable<DialogProps>;
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<DialogProps>({
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<DialogProps>({
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<boolean> {
@ -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",

6
src/Explorer/Notebook/NotebookManager.ts
View File

@ -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<string>;
dialogProps: ko.Observable<DialogProps>;
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

18
src/Main.tsx
View File

@ -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<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 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 = () => {
<KOCommentIfStart if="isCopyNotebookPaneEnabled" />
<div data-bind="react: copyNotebookPaneAdapter" />
<KOCommentEnd />
{/* Global access token expiration dialog - End */}
<div data-bind="react: dialogComponentAdapter" />
<div data-bind="react: addSynapseLinkDialog" />
{showDialog && <Dialog {...dialogProps} />}
</div>
);
};

2
src/Utils/GalleryUtils.ts
View File

@ -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";