Added delete modal dialog

src/app/views/menubar.tsx

@@ -29,8 +29,7 @@ import {
 
 import { FileView, MainTabs } from "./file_view";
 import { AppStore } from "../stores";
-import { Button } from "./panels/widgets/controls";
-import { classNames, isInIFrame, readFileAsString } from "../utils";
+import { classNames, readFileAsString } from "../utils";
 import {
   ChartTemplate,
   primaryButtonStyles,
@@ -42,6 +41,7 @@ import { strings } from "../../strings";
 import { PositionsLeftRight, UndoRedoLocation } from "../main_view";
 import { getConfig } from "../config";
 import { EditorType } from "../stores/app_store";
+import { DeleteDialog } from "./panels/delete_dialog";
 
 export class HelpButton extends React.Component<
   {
@@ -561,61 +561,7 @@ export class MenuBar extends ContextedComponent<
   }
 
   public renderDelete() {
-    return (
-      <MenuButton
-        url={R.getSVGIcon("toolbar/trash")}
-        title={strings.menuBar.reset}
-        text={strings.menuBar.reset}
-        onClick={() => {
-          if (isInIFrame()) {
-            globals.popupController.showModal(
-              (context) => {
-                return (
-                  <div
-                    onMouseDown={(e) => {
-                      e.stopPropagation();
-                    }}
-                    className={"charticulator__reset_chart_dialog"}
-                  >
-                    <div className={"charticulator__reset_chart_dialog-inner"}>
-                      <>
-                        <p>{strings.dialog.resetConfirm}</p>
-                        <div
-                          className={
-                            "charticulator__reset_chart_dialog-buttons"
-                          }
-                        >
-                          <Button
-                            text={strings.button.yes}
-                            onClick={() => {
-                              this.context.store.dispatcher.dispatch(
-                                new Actions.Reset()
-                              );
-                              context.close();
-                            }}
-                          />
-                          <Button
-                            text={strings.button.no}
-                            onClick={() => {
-                              context.close();
-                            }}
-                          />
-                        </div>
-                      </>
-                    </div>
-                  </div>
-                );
-              },
-              { anchor: null }
-            );
-          } else {
-            if (confirm(strings.dialog.resetConfirm)) {
-              new Actions.Reset().dispatch(this.context.store.dispatcher);
-            }
-          }
-        }}
-      />
-    );
+    return <DeleteDialog context={this.context} />;
   }
 
   public renderNewOpenSave() {

src/app/views/panels/delete_dialog.tsx

@@ -0,0 +1,75 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT license.
+import * as React from "react";
+import { useCallback, useState } from "react";
+import {
+  DefaultButton,
+  Dialog,
+  DialogFooter,
+  DialogType,
+} from "@fluentui/react";
+import * as R from "../../resources";
+import { strings } from "../../../strings";
+import { isInIFrame } from "../../utils";
+import { Actions } from "../../actions";
+import { MenuButton } from "../../components";
+import { MainContextInterface } from "../../context_component";
+import { primaryButtonStyles } from "../../../core";
+
+interface DeleteDialogProps {
+  context: MainContextInterface;
+}
+
+const dialogContentProps = {
+  type: DialogType.normal,
+  title: strings.dialog.deleteChart,
+  subText: strings.dialog.resetConfirm,
+};
+
+export const DeleteDialog = ({ context }: DeleteDialogProps): JSX.Element => {
+  const [isHidden, setIsHidden] = useState<boolean>(true);
+
+  const onClick = useCallback(() => {
+    if (isInIFrame()) {
+      setIsHidden(false);
+    } else {
+      if (confirm(strings.dialog.resetConfirm)) {
+        new Actions.Reset().dispatch(context.store.dispatcher);
+      }
+    }
+  }, [context]);
+
+  const toggleHideDialog = useCallback(() => {
+    setIsHidden(true);
+  }, []);
+
+  const onDeleteChart = useCallback(() => {
+    context.store.dispatcher.dispatch(new Actions.Reset());
+    setIsHidden(true);
+  }, [context]);
+
+  return (
+    <>
+      <MenuButton
+        url={R.getSVGIcon("toolbar/trash")}
+        title={strings.menuBar.reset}
+        text={strings.menuBar.reset}
+        onClick={onClick}
+      />
+      <Dialog
+        hidden={isHidden}
+        onDismiss={toggleHideDialog}
+        dialogContentProps={dialogContentProps}
+      >
+        <DialogFooter>
+          <DefaultButton
+            styles={primaryButtonStyles}
+            onClick={onDeleteChart}
+            text={strings.button.yes}
+          />
+          <DefaultButton onClick={toggleHideDialog} text={strings.button.no} />
+        </DialogFooter>
+      </Dialog>
+    </>
+  );
+};

src/strings.ts

@@ -130,6 +130,7 @@ export const strings = {
   },
   dialog: {
     resetConfirm: "Are you sure you want to delete the chart?",
+    deleteChart: "Delete chart",
   },
   scaleEditor: {
     add: "Add",