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

2025-12-20 01:11:25 +00:00 · 2021-05-20 09:54:26 -05:00
parent 4351af986e
commit 42cf814700
9 changed files with 94 additions and 150 deletions
--- a/src/Explorer/Controls/Dialog.tsx
+++ b/src/Explorer/Controls/Dialog.tsx
@@ -15,7 +15,22 @@ import {
  ProgressIndicator,
  TextField,
 } from "@fluentui/react";
-import React, { FunctionComponent } from "react";
+import React, { FC } from "react";
+import create, { UseStore } from "zustand";
+
+export interface DialogState {
+  visible: boolean;
+  dialogProps?: DialogProps;
+  openDialog: (props: DialogProps) => void;
+  closeDialog: () => void;
+}
+
+export const useDialog: UseStore<DialogState> = create((set) => ({
+  visible: false,
+  openDialog: (props: DialogProps) => set(() => ({ visible: true, dialogProps: props })),
+  closeDialog: () =>
+    set((state) => ({ visible: false, openDialog: state.openDialog, closeDialog: state.closeDialog }), true),
+}));

 export interface TextFieldProps extends ITextFieldProps {
  label: string;
@@ -35,7 +50,6 @@ export interface DialogProps {
  title: string;
  subText: string;
  isModal: boolean;
-  visible: boolean;
  choiceGroupProps?: IChoiceGroupProps;
  textFieldProps?: TextFieldProps;
  linkProps?: LinkProps;
@@ -56,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>
+  ) : (
+    <></>
  );
 };
--- a/src/Explorer/Controls/NotebookGallery/GalleryViewerComponent.tsx
+++ b/src/Explorer/Controls/NotebookGallery/GalleryViewerComponent.tsx
@@ -28,7 +28,6 @@ import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryCons
 import { trace } from "../../../Shared/Telemetry/TelemetryProcessor";
 import * as GalleryUtils from "../../../Utils/GalleryUtils";
 import Explorer from "../../Explorer";
-import { Dialog, DialogProps } from "../Dialog";
 import { GalleryCardComponent, GalleryCardComponentProps } from "./Cards/GalleryCardComponent";
 import { CodeOfConduct } from "./CodeOfConduct/CodeOfConduct";
 import "./GalleryViewerComponent.less";
@@ -68,7 +67,6 @@ interface GalleryViewerComponentState {
  selectedTab: GalleryTab;
  sortBy: SortBy;
  searchText: string;
-  dialogProps: DialogProps;
  isCodeOfConductAccepted: boolean;
  isFetchingPublishedNotebooks: boolean;
  isFetchingFavouriteNotebooks: boolean;
@@ -119,7 +117,6 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
      selectedTab: props.selectedTab,
      sortBy: props.sortBy,
      searchText: props.searchText,
-      dialogProps: undefined,
      isCodeOfConductAccepted: undefined,
      isFetchingFavouriteNotebooks: true,
      isFetchingPublishedNotebooks: true,
@@ -187,8 +184,6 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
    return (
      <div className="galleryContainer">
        <Pivot {...pivotProps}>{pivotItems}</Pivot>
-
-        {this.state.dialogProps && <Dialog {...this.state.dialogProps} />}
      </div>
    );
  }
--- a/src/Explorer/Controls/NotebookViewer/NotebookViewerComponent.tsx
+++ b/src/Explorer/Controls/NotebookViewer/NotebookViewerComponent.tsx
@@ -1,25 +1,25 @@
 /**
 * Wrapper around Notebook Viewer Read only content
 */
+import { IChoiceGroupProps, Icon, IProgressIndicatorProps, Link, ProgressIndicator } from "@fluentui/react";
 import { Notebook } from "@nteract/commutable";
 import { createContentRef } from "@nteract/core";
-import { IChoiceGroupProps, Icon, IProgressIndicatorProps, Link, ProgressIndicator } from "@fluentui/react";
 import * as React from "react";
 import { contents } from "rx-jupyter";
+import { getErrorMessage, getErrorStack, handleError } from "../../../Common/ErrorHandlingUtils";
 import { IGalleryItem, JunoClient } from "../../../Juno/JunoClient";
+import { SessionStorageUtility } from "../../../Shared/StorageUtility";
+import { Action } from "../../../Shared/Telemetry/TelemetryConstants";
+import { traceFailure, traceStart, traceSuccess } from "../../../Shared/Telemetry/TelemetryProcessor";
 import * as GalleryUtils from "../../../Utils/GalleryUtils";
+import { DialogHost } from "../../../Utils/GalleryUtils";
+import Explorer from "../../Explorer";
 import { NotebookClientV2 } from "../../Notebook/NotebookClientV2";
 import { NotebookComponentBootstrapper } from "../../Notebook/NotebookComponent/NotebookComponentBootstrapper";
 import NotebookReadOnlyRenderer from "../../Notebook/NotebookRenderer/NotebookReadOnlyRenderer";
-import { Dialog, DialogProps, TextFieldProps } from "../Dialog";
+import { Dialog, TextFieldProps, useDialog } from "../Dialog";
 import { NotebookMetadataComponent } from "./NotebookMetadataComponent";
 import "./NotebookViewerComponent.less";
-import Explorer from "../../Explorer";
-import { SessionStorageUtility } from "../../../Shared/StorageUtility";
-import { DialogHost } from "../../../Utils/GalleryUtils";
-import { getErrorMessage, getErrorStack, handleError } from "../../../Common/ErrorHandlingUtils";
-import { traceFailure, traceStart, traceSuccess } from "../../../Shared/Telemetry/TelemetryProcessor";
-import { Action } from "../../../Shared/Telemetry/TelemetryConstants";

 export interface NotebookViewerComponentProps {
  container?: Explorer;
@@ -38,7 +38,6 @@ interface NotebookViewerComponentState {
  content: Notebook;
  galleryItem?: IGalleryItem;
  isFavorite?: boolean;
-  dialogProps: DialogProps;
  showProgressBar: boolean;
 }

@@ -70,7 +69,6 @@ export class NotebookViewerComponent
      content: undefined,
      galleryItem: props.galleryItem,
      isFavorite: props.isFavorite,
-      dialogProps: undefined,
      showProgressBar: true,
    };

@@ -166,8 +164,7 @@ export class NotebookViewerComponent
          hideInputs: this.props.hideInputs,
          hidePrompts: this.props.hidePrompts,
        })}
-
-        {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,
    });
  }

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